Three.js是WebGL的框架之一，對於我們學習前端3D動畫是一個非常好的幫助。

三大元件

在Three.js中，要渲染物體到網頁需要三個元件，即

• 場景
• 相機
• 渲染器
  有了這三樣基本的東西我們才能繼續

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 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);
 

domElement元素表示渲染器中的畫布，所有的渲染都是畫在domElement上的，然後再appendChild將元素接入body，然後就可以在頁面裡面顯示。

實時渲染

不停的對畫面進行渲染，即使畫面中沒有任何改變，也需要重新渲染。

離線渲染

提前渲染