three.js筆記——（1）入門

時間 2019-12-05

原文原文鏈接

入門

這部份內容的目標是簡單地介紹three.js，咱們首先講如何用three.js來實現一個旋轉的立方體。具體的實例將會給出，以防你卡住或者須要幫助。html

在html文件中引入three.js文件

在使用three.js以前，首先須要在你的html文件中將它包含進來，以下面代碼段所示：git

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>My first three.js app</title>
    </head>
    <body>
        <script src="three.js"></script>
        <script>
            // Our Javascript will go here.
        </script>
    </body>
</html>

而後在空的<script>標籤中咱們能夠書寫本身的代碼。github

使用three.js進行三維物體渲染的三要素

想要用three.js來展現任何東西，須要三個條件：場景（scene）、照相機（camera）和渲染器（renderer），具有這三種條件後方可將一個三維物體來渲染在瀏覽器中。接下來咱們將具體介紹這三個條件的具體含義和實例對象建立方法。canvas

場景

定義：直觀地理解，場景就是佈置出的一個場地，就比如照相館在拍照前先要選擇一個場地，而後再架設照相機，打光線以及讓模特站進去才能進行拍攝。場景容許你設置什麼以及哪些地方須要被three.js所渲染。它是你放置對象、光線以及照相機的地方。
建立實例對象：three.js中給出多種類型的場景構造區,經常使用的就是Scene()構造器，建立一個場景對象實例的代碼是：
var scene = new THREE.Scene();
關於更多的場景知識的，咱們將會在以後的文章中進行介紹。瀏覽器

照相機

定義：直觀地講，照相機就像是進行攝影或者錄像時使用的照相機。照相機的功能相似於觀察物體的一個眼睛，物體須要經過相機來進行呈現，它負責將三維的物體投影到二維的屏幕上。
建立實例對象：根據投影方式的不一樣，three.js中給出了兩種不一樣類型的照相機，分別爲正交投影相機和透視投影相機，建立照相機實例對象的代碼分別爲：app

正交投影相機：var camera = new THREE.OrthographicCamera();
透視投影相機：var camera = new THREE.PerspectiveCamera();

因爲這兩種相機的投影方式不一樣，因此兩種照相機對象的參數意義也各不相同。less

正交投影照相機（OrthographicCamera）

正交投影照相機中投影線是垂直於投影面進行投影，所以物體在投影以後的比例不回發生改變，以下圖所示函數

正交投影照相機的構造函數爲OrthographicCamera(left, right, top, bottom, near, far)包含了六個參數，left就是整個投影線區域的左側面，right就是投影線區域的右側面，top就是投影線區域的上側面，而bottom就是投影線區域的下側面。 near是到距離相機較近的那一面的距離，far是離距離相機較遠的那一面的距離，這六個投影面圍成的區域就是相機投影的可見區域。在三維空間中，只有這個區域中的物體才能被照相機所觀測到。spa

透視投影照相機（PerspectiveCamera）

透視投影照相機中投影是線是以照相機爲匯聚點發散的，投影線和投影面不垂直，物體投影以後的比例會發生變化，咱們會觀察到物體的透視效果，以下圖所示。.net

透視投影照相機的構造函數是PerspectiveCamera(fov, aspect, near, far) ，其中fov是可視角度；aspect爲width/height，一般是容器（canvas）的寬高比；near是近斷距離，far是遠端距離。只有在距離照相機大於near的距離小於far的距離以內才能夠被照相機觀察到。

關於更多照相機的知識咱們會在以後的文章中進行介紹。

渲染器

定義：渲染器的功能是將咱們建立的場景和照相機所觀察到的三維物體在二維平面上的投影進行渲染展示到瀏覽器中。
建立：var renderer = new THREE.WebGLRenderer();
渲染：renderer.render(scene, camera) 在進行渲染的時候須要將以前建立的場景和照相機都傳入渲染函數中。

關於更多渲染器的知識咱們將會在以後的文章中進行介紹。

栗子

有了場景、照相機和渲染器三個要素以後，咱們就能夠在瀏覽器中展示出複雜的三維物體了，首先來看一個簡單的栗子～

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>My first three.js app</title>
    </head>
    <body>
        //建立一個canvas標籤用來做爲展示三維圖形的容器
        <canvas id="mainCanvas" width="400" height="400"></canvas>
        
        //引入three.js文件
        <script src="three.js"></script>
        <script>
            // Our Javascript will go here.
            function init(){
                //建立scene
                var scene = new THREE.Scene();
                
                //建立camera
                var camera = new THREE.PerspectiveCamera(45, 1/1, 1, 1000);
                camera.position.set(0,0,5);
                scene.add(camera);
                
                //建立renderer
                var renderer = new THREE.WebGLRenderer({
                    canvas: document.getElementById('mainCanvas')
                });
                renderer.setClearColor(0x000000);//設置背景顏色
                
                //建立一個幾何體
                var geometry = new THREE.BoxGeometry( 1, 1, 1 );
                var material = new THREE.MeshBasicMaterial( { color: 0xFFFF00 } );
                var cube = new THREE.Mesh( geometry, material );
                scene.add( cube );   //將建立的幾何體加入場景中                                
                
                var animate = function(){
                    requestAnimationFrame(animate);  //以瀏覽器刷新的速度調用animate函數
                    cube.rotation.z += 0.01;  //繞z軸旋轉
                    renderer.render(scene, camera);  //將場景scene和camera進行渲染
                };
                animate();
            };
            init();
        </script>
    </body>
</html>

快打開瀏覽器看看，是否是看到那個旋轉的正方體了～
項目github地址：旋轉的正方體

參考文獻：
1.creating a scene
2.three.js 照相機

相關標籤/搜索

每日一句

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