1、右手坐標系
Threejs使用的是右手坐標系，這源於opengl默認情況下，也是右手坐標系。下面是右手坐標系的圖例，如果對這個概念不理解，可以百度一下，我保證你伸出手比划的那一瞬間你就明白了，如果不明白請給作者留言，我會盡快補上關於坐標系的知識。
圖中右邊那個手對應的坐標系，就是右手坐標系。在Threejs中，坐標和右邊的坐標完全一樣。x軸正方向向右，y軸正方向向上，z軸由屏幕從里向外。
5、線條的深入理解
在Threejs中，一條線由點，材質和顏色組成。
點由THREE.Vector3表示，Threejs中沒有提供單獨畫點的函數，它必須被放到一個THREE.Geometry形狀中，這個結構中包含一個數組vertices，這個vertices就是存放無數的點（THREE.Vector3）的數組。這個表示可以如下圖所示：
為了繪制一條直線，首先我們需要定義兩個點，如下代碼所示：
var p1 = new THREE.Vector3( -100, 0, 100 );
var p2 = new THREE.Vector3( 100, 0, -100 );
請大家思考一下，這兩個點在坐標系的什么位置，然后我們聲明一個THREE.Geometry，並把點加進入，代碼如下所示：
var geometry = new THREE.Geometry();
geometry.vertices.push(p1);
geometry.vertices.push(p2);
geometry.vertices的能夠使用push方法，是因為geometry.vertices是一個數組。這樣geometry 中就有了2個點了。
然后我們需要給線加一種材質，可以使用專為線准備的材質，THREE.LineBasicMaterial。
最終我們通過THREE.Line繪制了一條線，如下代碼所示:
var line = new THREE.Line( geometry, material, THREE.LinePieces );
ok，line就是我們要的線條了。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Three框架</title> <script src="libs/Three.js"></script> <style type="text/css"> div#canvas-frame { border: none; cursor: pointer; width: 100%; height: 600px; background-color: #EEEEEE; } </style> <script> var renderer; function initThree() { width = document.getElementById('canvas-frame').clientWidth; height = document.getElementById('canvas-frame').clientHeight; renderer = new THREE.WebGLRenderer({ antialias : true }); renderer.setSize(width, height); document.getElementById('canvas-frame').appendChild(renderer.domElement); renderer.setClearColor(0xFFFFFF, 1.0); } var camera; function initCamera() { camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000); camera.position.x = 0; camera.position.y = 1000; camera.position.z = 0; camera.up.x = 0; camera.up.y = 0; camera.up.z = 1; camera.lookAt({ x : 0, y : 0, z : 0 }); } var scene; function initScene() { scene = new THREE.Scene(); } var light; function initLight() { light = new THREE.DirectionalLight(0xFF0000, 1.0, 0); light.position.set(100, 100, 200); scene.add(light); } var cube; function initObject() { var geometry = new THREE.Geometry(); geometry.vertices.push( new THREE.Vector3( - 500, 0, 0 ) );//在x軸上定義兩個點p1(-500,0,0) geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) );//p2(500,0,0) for ( var i = 0; i <= 20; i ++ ) {//這兩個點決定了x軸上的一條線段，將這條線段復制20次，分別平行移動到z軸的不同位置，就能夠形成一組平行的線段。 var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) ); line.position.z = ( i * 50 ) - 500; scene.add( line ); var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) ); line.position.x = ( i * 50 ) - 500; line.rotation.y = 90 * Math.PI / 180; // 旋轉90度 scene.add( line ); //將p1p2這條線先圍繞y軸旋轉90度，然后再復制20份，平行於z軸移動到不同的位置，也能形成一組平行線。 } } function threeStart() { initThree(); initCamera(); initScene(); initLight(); initObject(); renderer.clear(); renderer.render(scene, camera); } </script> </head> <body onload="threeStart();"> <div id="canvas-frame"></div> </body> </html>
