[Three.js]Three.js中文文檔-建立一個場景(Creating a scene)

時間 2019-11-06

標籤 three.js 中文文檔建立一個場景 creating scene 欄目 JavaScript 简体版

原文原文鏈接

建立一個場景

本節的目的是介紹Three.js。咱們將開始創建一個場景，一個旋轉的立方體。文章最後提供有原代碼。html

Three.js是什麼？

讓咱們試着簡單地描述它：
Three.js是一個在瀏覽器中使用WebGL建立3D變得容易的庫。當你想建立一個立方體的時候，使用原生WebGL來建立，須要寫數百行JavaScript代碼，若是使用Three.js只須要幾行代碼就能夠完成。canvas

在咱們開始使用Three.js以前

在您使用以前, 你須要在某個地方展現一個示例。把如下的html代碼保存到你電腦上，隨便建一個文件就能夠了, 而且把three.min.js 文件拷貝放到你下面代碼下的 js/ 文件夾裏, 並在瀏覽器打開。如下的代碼都是使用Three.js以前的準備工做，和咱們平時使用其餘開發庫差很少。promise

<!DOCTYPE html>
<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.min.js"></script>
        <script>
            // 咱們後續的 Javascript 將寫在這裏.
        </script>
    </body>
</html>

接下來，如下文檔的代碼都放在以上空白的<script>標籤裏瀏覽器

建立一個場景

實際上，咱們要使用 Three.js 展現一些畫面到瀏覽器上, 咱們須要下面這三樣東西:
一個場景(scene)，一個攝像頭(camera) , 和一個渲染器(renderer)，因此咱們使用一個相機渲染一個場景.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 );

讓咱們花幾分鐘時間來解釋一下以上的代碼作了些什麼事情。咱們在這裏設置了一個場景, 一個攝像頭和一個渲染器。在Three.js裏有幾種不一樣方式的攝像頭。在這裏, 咱們使用的是一個叫作PerspectiveCamera的攝像機。第一個屬性75設置的是視角,第二個屬性設置的是攝像頭拍攝下來的東西的長寬比。 dom

你幾乎總要使用元素的寬度除以元素的高度值, 或者你會獲得相同的結果，當您在寬屏電視上播放老電影 - 圖像看起來壓扁的樣子.接下來的兩個屬性是遠近裁剪平面。這也就意味着，是物體遠離鏡頭遠於某個或近於某個將不會被渲染的值。你沒必要如今就擔憂這個，但你可能想在你的應用中使用其餘的一些值，以得到更好的性能。函數

接下來是渲染器，全部魔法效果都在這裏產生。咱們在這裏使用WebGLRenderer。three.js所提供的一些其餘特性，常常被用來告訴用戶因爲瀏覽器過舊或者其餘形成的不支持WebGL緣由。性能

除了建立渲染實例，咱們還須要設置大小在咱們要使用的應用程序中。使用該區域的寬度和高度來填充咱們的應用程序，這是一個好主意-在這種狀況下，瀏覽器窗口的寬度和高度。性能密集型應用程序，您也能夠給組量較小的值，如window.innerwidth/2和window.innerheight/2，這將使應用程序在一半大小的窗口下渲染。動畫

若是的應用程序運行在一個低分辨率的狀況下，可是你想保持程序的視窗大小，你能夠在調用setSize的時候並把updateStyle設置爲false，例如：rest

setSize(window.innerWidth/2, window.innerHeight/2, false)

以上示例將會使你的應用將以原來的一半分辨率運行，假設你的<canvas>寬高設置爲100%[備註，此處代碼是爲了分清楚，不要加入文件中執行].

Last but not least, we add the renderer element to our HTML document. This is a <canvas> element the renderer uses to display the scene to us.
"That's all good, but where's that cube you promised?" Let's add it now.
最後，但並不止於此，當咱們在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.這個對象包含了多維數據集(立方體)的全部點（頂點）和填充（面）.這個對象將在後面進行仔細探討.除了幾何(geometry)以外,咱們須要一種材質(material)來對它進行上色.Three.js 提供了幾個材質，但咱們在這裏使用了網格基本材料(MeshBasicMaterial).咱們使用的全部材料都是一個對象.爲了讓事情變得更簡單，咱們使用 0x00ff00 這樣的顏色屬性值,這個顏色屬性值表明綠色.這個顏色值就像使用CSS或者Photoshop同樣(十六進制的顏色值).這裏作的第三件事是使用了一個網格.網格也是一個對象，把材質(material)應用到幾何體(geometry)上,而後咱們就能夠插入到咱們的場景中，並能夠自由移動.

默認狀況下，但咱們調用scence.add()的時候，咱們要添加的東西講被添加在(0,0,0)座標下.這會致使相機和立方體彼此交叉。爲了不這一點，咱們只需將相機移出一點。

渲染場景

若是你把上面的複製代碼到咱們先前建立的HTML文件，你還不能看到任何東西。這是由於咱們尚未真正的渲染任何東西。下面，咱們須要的是一個渲染循環。

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

這將建立一個循環，使渲染繪製場景每秒60次。若是你在瀏覽器中編寫遊戲，你可能會說，「爲何咱們不去建立一個setInterval？」咱們是能夠這麼作，但requestAnimationFrame 具備許多優勢。也許最重要的一點是，當用戶導航到另外一個瀏覽器選項卡時候，會暫停處理，這將不浪費寶貴的處理能力和電池壽命。

能動的立方體

If you insert all the code above into the file you created before we began, you should see a green box. Let's make it all a little more interesting by rotating it.
若是你把以上的代碼都插入到以前建立的html文檔裏，你能夠看到一個綠色的盒子.咱們可讓盒子旋轉起來變得更有趣.
在你調用的render方法中，把如下代碼添加到renderer.render前面:

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

這將會在運行的每一幀(每秒60次),同時立方體會有一個漂亮的旋轉動畫.基本上，在程序運行過程當中你能夠經過渲染循環來進行任何你想要的移動或改變.你能夠在渲染函數裏調用其餘函數，這樣你就不會形成寫一個成千上百行的渲染函數.

結果

恭喜！如今你結束了你的第一個Three.js應用.這看起來是很簡單的，你必須得從一個地方開始.
文章末尾提供了完整的代碼，你能夠運行或者修改並運行完整的程序，更好的理解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.min.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 render = function () {
                requestAnimationFrame( render );

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

                renderer.render(scene, camera);
            };

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

相關標籤/搜索

每日一句

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