點：可以用THREE.Vector3D來表示
現在來看看怎麼定義個點，假設有一個點x=4，y=8，z=9。你可以這樣定義它：
var point1 = new THREE.Vecotr3(4,8,9);
另外你也可以使用set方法，代碼如下：
var point1 = new THREE.Vector3();
point1.set(4,8,9);1、首先，我們聲明瞭一個幾何體geometry，如下：
var geometry = new THREE.Geometry();
幾何體裏面有一個vertices變量，可以用來存放點。
2、定義一種線條的材質，使用THREE.LineBasicMaterial類型來定義，它接受一個集合作爲參數，其原型如下：
LineBasicMaterial( parameters )
Parameters是一個定義材質外觀的對象，它包含多個屬性來定義材質，這些屬性是：
Color：線條的顏色，用16進制來表示，默認的顏色是白色。
Linewidth：線條的寬度，默認時候1個單位寬度。
Linecap：線條兩端的外觀，默認是圓角端點，當線條較粗的時候才看得出效果，如果線條很細，那麼你幾乎看不出效果了。
Linejoin：兩個線條的連接點處的外觀，默認是“round”，表示圓角。
VertexColors：定義線條材質是否使用頂點顏色，這是一個boolean值。意思是，線條各部分的顏色會根據頂點的顏色來進行插值。
Fog：定義材質的顏色是否受全局霧效的影響。
我們這裏使用了頂點顏色vertexColors: THREE.VertexColors，就是線條的顏色會根據頂點來計算。
var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );
3、接下來，定義兩種顏色，分別表示線條兩個端點的顏色，如下所示：
var color1 = new THREE.Color( 0x444444 ),
color2 = new THREE.Color( 0xFF0000 );
4、定義2個頂點的位置，並放到geometry中，代碼如下：
var p1 = new THREE.Vector3( -100, 0, 100 );
var p2 = new THREE.Vector3( 100, 0, -100 );
geometry.vertices.push(p1);
geometry.vertices.push(p2);
5、爲4中定義的2個頂點，設置不同的顏色，代碼如下所示：
geometry.colors.push( color1, color2 );
geometry中colors表示頂點的顏色，必須材質中vertexColors等於THREE.VertexColors 時，顏色纔有效，如果vertexColors等於THREE.NoColors時，顏色就沒有效果了。那麼就會去取材質中color的值，這個很重要，大家一定記住。
6、定義一條線
定義線條，使用THREE.Line類，代碼如下所示：
var line = new THREE.Line( geometry, material, THREE.LinePieces );
第一個參數是幾何體geometry，裏面包含了2個頂點和頂點的顏色。第二個參數是線條的材質，或者是線條的屬性，表示線條以哪種方式取色。第三個參數是一組點的連接方式，我們會在後面詳細講解。
然後，將這條線加入到場景中，代碼如下：
scene.add(line);
課程代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Three框架</title>
<script src="js/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();
var material = new THREE.LineBasicMaterial( { vertexColors: true } );
var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0xFF0000 );
// 線的材質可以由2點的顏色決定
var p1 = new THREE.Vector3( -100, 0, 100 );
var p2 = new THREE.Vector3( 100, 0, -100 );
geometry.vertices.push(p1);
geometry.vertices.push(p2);
geometry.colors.push( color1, color2 );
var line = new THREE.Line( geometry, material, THREE.LinePieces );
scene.add(line);
}
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>