threeJS基礎學習---建立一個場景（Creating a scene）
開始之前
在開始使用three.js之前，你需要一個地方來顯示它。將下列HTML程式碼儲存為你電腦上的一個HTML檔案，同時將three.js複製到該HTML檔案所在的目錄下的lib/目錄下，然後在你的瀏覽器中開啟這個HTML檔案。在js目錄下建立creatingaScene.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script src="lib/three.js"></script> <script src='js/creatingaScene.js'></script> </body> </html>
建立一個場景
//creatingaScene.js const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 ); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);
我們現在建立了場景、相機和渲染器。
threejs中相機的理解:
相機扮演的角色和我們看電影時放映機的角色差不多，照相機不斷的拍攝我們建立好的場景，然後通過渲染器渲染到螢幕中，最後在螢幕中展現出建立的3d場景。一般情況下，照相機是禁止的，但是如果我們想看到我們建立場景中更多的視野的時候，可以通過不斷的移動照相機來實現，如果一定要拿某一樣東西來比喻，那用我們的眼睛是再適合不過的了。three.js中提供了兩種基本的照相機，分別是正投影相機OrthographicCamera和透視投影相機PerspectiveCamera。透視投影照相機對應投影到的物體的大小是隨著距離逐漸變小的，而正投影照相機投影到的物體大小是不受距離影響的。兩者區別可以通過下圖簡單說明：
const camera = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
0.1,
1000
);
上述程式碼中，new THREE.PerspectiveCamera建構函式用來建立透視投影相機，該建構函式總共有四個引數，分別是fov，aspect，near，far 。fov表示攝像機視錐體垂直視野角度，最小值為0，最大值為180，預設值為50，實際專案中一般都定義45，因為45最接近人正常睜眼角度；aspect表示攝像機視錐體長寬比，預設長寬比為1，即表示看到的是正方形，實際專案中使用的是螢幕的寬高比；near表示攝像機視錐體近端面，這個值預設為0.1，實際專案中都會設定為1；far表示攝像機視錐體遠端面，預設為2000，這個值可以是無限的，說的簡單點就是我們視覺所能看到的最遠距離。
除了上述四個基本屬性之外，透視投影相機六個屬性，分別是：filmGauge，filmOffset，focus，isPerspectiveCamera，view，zoom。這幾個引數在實際應用中很少用到，基本都保持預設值。如果想了解各屬性的意義及完成的功能可以通過官方文件去了解。
新增立方體
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
要建立一個立方體，我們需要一個BoxGeometry（立方體）物件. 這個物件包含了一個立方體中所有的頂點（vertices）和麵（faces）。未來我們將在這方面進行更多的探索。
接下來，對於這個立方體，我們需要給它一個材質，來讓它有顏色。Three.js自帶了幾種材質，在這裡我們使用的是MeshBasicMaterial。所有的材質都存有應用於他們的屬性的物件。在這裡為了簡單起見，我們只設置一個color屬性，值為0x00ff00，也就是綠色。這裡所做的事情，和在CSS或者Photoshop中使用十六進位制(hex colors)顏色格式來設定顏色的方式一致。
第三步，我們需要一個Mesh（網格）。 網格包含一個幾何體以及作用在此幾何體上的材質，我們可以直接將網格物件放入到我們的場景中，並讓它在場景中自由移動。
預設情況下，當我們呼叫scene.add()的時候，物體將會被新增到(0,0,0)座標。但將使得攝像機和立方體彼此在一起。為了防止這種情況的發生，我們只需要將攝像機稍微向外移動一些即可。
渲染場景
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
使立方體動起來
在開始之前，如果你已經將上面的程式碼寫入到了你所建立的檔案中，你可以看到一個綠色的方塊。讓我們來做一些更加有趣的事 —— 讓它旋轉起來。
將下列程式碼新增到animate()函式中renderer.render呼叫的上方：
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
總結
這一小節我們建立場景、相機和渲染器，並通過threeJ建立了一個立方體，通過cube.rotation 這個函式將立方體的轉動。
creatingaScene.js 完整的程式碼如下
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
0.1,
1000
);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();