three.js中文文檔 1.建立場景

時間 2019-11-11

原文原文鏈接

1.建立場景

標籤： three.jshtml

本節目標是爲 three.js 作簡介。咱們從使用旋轉立方體來搭建場景開始。若是遇到困難須要幫助，頁面底部有可參考的源碼。編程

開始前

在計算機中保存以下 HTML 代碼，並在 js 目錄下包含 three.js，而後在瀏覽器中打開canvas

<html>
    <head>
        <meta charset=utf-8>
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src="js/three.js"></script>
        <script>
            // Our Javascript will go here.
        </script>
    </body>
</html>

接下來的代碼都會下載 script 標籤中瀏覽器

建立示例場景

爲了利用three.js來進行展現，咱們須要三種元素：場景，攝像機，渲染器，以便來渲染攝像機中的場景。app

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

讓咱們花點時間來解釋發生了什麼。咱們如今建立了場景，攝像機和渲染器。dom

在 three.js 中有幾種攝像機。咱們暫時用的是 PerspectiveCamera （透視攝像機）函數

它的第一個屬性是視圖角（FOV)，它是能看見的視圖範圍，其值表示角度大小。性能

第二個屬性是寬高比。大多數狀況你想要使用被高除過以後的寬度，否則會發生像在寬屏電視上放舊電影的狀況 —— 圖像看起來被壓扁了。動畫

後面兩個屬性是近景面和遠景面。只會渲染這兩個面之間的區域。目前你沒必要關心這些，使用這些參數能提升性能。code

接下來談談渲染器。這即是神奇之處。除了咱們這裏用的 WebGLRenderer 外， three.js 還提供一些渲染器用在不支持 WebGL 的老舊瀏覽器上。

除了建立渲染器實例，咱們也須要設置應用渲染的尺寸。推薦使用填充整個應用的寬高 —— 本例中是瀏覽器窗口的寬高。對於性能優先的應用，你能使用 setSize 來設置更小的值，好比 window.innerHeight/2， window.innerWidth/2，會渲染一半的尺寸。

若是你想低分辨率地渲染整個尺寸，你能夠設置 setSize 的第三個參數 — uodateStyle 爲 <font color="#FF1493">false</font>，若是 canvas 元素寬高都爲 100%，則會以 1/2 分辨率渲染應用。

再爾，咱們須要在 HTML 中添加被渲染的元素。渲染器經過 canvas 來給咱們展現場景。

「都很好，但以前說的立方體呢」讓咱們如今添加。

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

咱們須要 BoxGeometry來建立立方體。這個對象包含立方體全部的點（頂點）和填充（面）。咱們之後會討論。

除了幾何體外，咱們還須要材質爲其上色。three.js 提供了一些材質，但咱們暫且使用 MeshBasicMaterial。全部材質接受並應用一個包含全部屬性的對象。爲簡單起見，咱們僅僅提供一個顏色屬性：綠色 —— <font color="#00ff00">0x00ff00</font>。和 CSS 和 PS 裏的同樣採用十六進制的顏色。

咱們須要的第三個要素是 Mesh。 mesh 是一個將材質應用到幾何體上的對象，而後咱們能將其放入場景中，並自由移動。

當咱們調用 scene.add()，咱們添加的會默認顯示在座標（0，0,0,）處。這會致使攝像機和立方體內部重疊。爲了不這點，咱們簡單地把攝像機往外移一點。

渲染場景

若是你在 HTML 文件中複製瞭如上代碼，屏幕不會顯示東西。由於咱們還沒渲染場景。因此咱們須要調用渲染器或者動畫循環。

function animate() {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
}
animate();

這會建立一個讓渲染器每秒繪製一幀的循環。若是你對網頁遊戲編程不瞭解，你可能會說「爲何不寫setInterval 函數呢？」事實上，咱們能夠，可是 requestAnimationFrame 好處更多。最重要的好處是當瀏覽器切換到另外一個標籤頁時，requestAnimationFrame 會暫停渲染，所以不會浪費寶貴的處理能力和電池壽命。

讓立方體動起來

若是你插入了咱們剛剛建立的代碼，你應該會看見一個綠色的立方體。讓它旋轉起來不至於單調。

在animate 函數中的 renderer.render 上添加以下代碼：

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

它會按幀運行（每秒60幀），並賦予立方體優雅的動畫。基本上，應用運行時，你想移動或改變任何元素，必須經過動畫循環。你固然在此處能調用其餘函數，以避免animate函數上百行代碼結尾。

結果

恭喜！你如今建立好了第一個 three.js 應用。很簡單，但總得突破。

完整代碼參考以下。琢磨一下並深入理解其工做機理

<html>
    <head>
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src="js/three.js"></script>
        <script>
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

            var renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );

            var geometry = new THREE.BoxGeometry( 1, 1, 1 );
            var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
            var cube = new THREE.Mesh( geometry, material );
            scene.add( cube );

            camera.position.z = 5;

            var animate = function () {
                requestAnimationFrame( animate );

                cube.rotation.x += 0.1;
                cube.rotation.y += 0.1;

                renderer.render(scene, camera);
            };

            animate();
        </script>
    </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。