1.three.js快速入門

入門案列

一個最簡單的three.js項目，需要用到的對象有4個 ：

Scene（場景）

Camera（相機）

Renderer（渲染器）

Mesh（網格模型）

其中，Scene好比我們的辦公室，是用來存儲辦公用品。Camera和Renderer好比辦公室的閉路電視。Camera就是閉路電視，

Renderer是什麼類型的閉路電視，是黑白的還是彩色的。Mesh就是辦公室的電腦、桌椅、職員等。

例子 

第一個3D場景

 

物體旋轉

單單隻有一個黃色的立方體，似乎沒什麼看頭。接下來讓我們把這個立方體圍繞着y軸旋轉。

網格模型中，使用rotation屬性可以使物體發生旋轉。如果需要物體不斷的旋轉，則需要調用requestAnimationFrame + Renderer

的render方

法。如 : 

//更新函數
function updata(){
    mesh.rotation.y +=0.01; //旋轉網格體的y軸
    renderer.render(scene, camera);  //重要，重新渲染畫面
    requestAnimationFrame(updata);
}
updata();

例子 

旋轉動畫、requestAnimationFrame週期性渲染

 

控制器OrbitControls

通過Three.js的相機控件OrbitControls.js可以對Threejs的三維場景進行縮放、平移、旋轉操作，本質上改變的並不是場景，而是

相機的參數，相機的位置角度不同，同一個場景的渲染效果是不一樣，比如一個相機繞着一個場景旋轉，就像場景旋轉一樣。

使用OrbitControls之前，你需要在你的項目中引入OrbitControls.js，主要代碼 ：

//控制器
let orbitControls = new THREE.OrbitControls(camera);

//添加change事件
orbitControls.addEventListener('change', function(){

    //重新渲染
    renderer.render(scene, camera); 

});

OrbitControls需要一個相機對象，然後添加chang事件，若change事件被觸發則重新調用渲染器的render方法。

例子

鼠標操作三維場景旋轉縮放

 

材質和光源

在現實的生活中，不同的材質被光源照射後，會產生不同的反應。比如一輛汽車

在threejs中，並不是所有材質都會對光源產生反應。本章只介紹一種會對光源產生反應的材質MeshLambertMaterial（蘭伯特材質）以及兩種光源PointLight（點光源）、AmbientLight（環境光）

例子

材質與光照效果