一、three.js采用右手坐標系：

x軸正方向向右，y軸正方向向上，z軸由屏幕從裏向外，如下圖右：

二、3D編程三要素：場景、渲染器、攝像機

1.場景：創建的物品和模型都需放入場景中

threejs創建場景的方式

scene = new THREE.Scene();

2.渲染器

（1）創建渲染器

renderer = new THREE.WebGLRenderer({antialias: true});

（2）設置渲染面積

renderer.setSize(width, height);

width和height是canvas的長寬

（3）將渲染的元素放入h5頁面

document.getElementById(‘canvas-frame‘).appendChild(renderer.domElement)

renderer.domElement其實是封裝好的一個canvas元素，所有顯示內容都會渲染在此canvas上;

（4）背景

renderer.setClearColor(0xFFFF00, 1.0);

（5）渲染場景

renderer.clear();

renderer.render(scene, camera);

3.攝像機

攝像機分為透視投影攝像機和正交投影攝像機

（1）透視投影攝像機

THREE.PerspectiveCamera(fov, aspect, near, far);

fov是視景體豎直方向上的張角（是角度制而非弧度制）。

aspect等於width / height，是照相機水平方向和豎直方向長度的比值，通常設為canvas的橫縱比例。

near和far分別是照相機到視景體最近、最遠的距離，均為正值，且far應大於near。如下圖，灰色部分是可渲染的區域。

（2）正交投影攝像機

THREE.OrthographicCamera(left, right, top, bottom, near, far)

這六個參數分別代表正交投影照相機拍攝到的空間的六個面的位置，這六個面圍成一個長方體，我們稱其為視景體（Frustum）。只有在視景體內部的物體才可能顯示在屏幕上，而視景體外的物體會在顯示之前被裁減掉。為了保持照相機的橫豎比例，需要保證(right -left）與(top - bottom)的比例與Canvas寬度與高度的比例一致。near與far都是指到照相機位置在深度平面的位置，而照相機不應該拍攝到其後方的物體，因此這兩個值應該均為正值。為了保證場景中的物體不會因為太近或太遠而被照相機忽略，一般near的值設置得較小，far的值設置得較大，具體值視場景中物體的位置等決定。

創建及初始化攝像機舉例：

 1 camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
 2 
 3 camera.position.x = 0;
 4 camera.position.y = 0;
 5 camera.position.z = 20;
 6 
 7 camera.up.x = 0;
 8 camera.up.y = 0;
 9 camera.up.z = 20;
10 
11 camera.lookAt({
12     x: 0,
13     y: 0,
14     z: 0
15 });

three.js引擎基礎知識—攝像機、場景及渲染器