世界的構成，由點開始
睜開你的美麗的大眼睛，看看你周圍的世界，它是多麼好看的3D世界呀。3D世界由啥玩意組成的，除了夸父和女媧，還有誰能回答呢？ 但在計算機裡，計算機可以告訴你3D世界是由啥玩意組成的。
1.3D世界的組成
在計算機這個神祕的國度裡，3D世界是由點組成，兩個點構成一條直線，三個不在同一條直線上的點就能夠組成一個三角形面，無數三角形面就能夠組成各種物體的形狀
我們通常把這種網格模型叫做Mesh模型。給物體貼上皮膚或者專業點就叫做紋理，那這個物體就活靈活現了。最後無數的物體構成了我們的3D世界
複製程式碼在Three.js中定義一個點
在三維空間中的某一個點可以用一個座標點來表示。一個座標由x,y,z三個分量構成。在Three.js中，點可以在右手座標系裡表示。
空間幾何中，點可以用一個向量來表示，在Three.js中也是用一個向量來表示。程式碼如下：
Three.Vector3 = function(x=0,y=0,z=0){
this.x = x;
this.y = y;
this.z = z
}
程式碼分析：THREE是Three.js引擎的一個全域性變數。只要你想用它，就可以在任何地方使用它。
那麼THREE.Vector3呢，就是表示Vector3是定義在THREE下面的一個類。以後要用Vector3,就必須要加THREE字首。
點的操作
在3D世界中點可以用THREE.Vector3D來表示。對應原始碼為src/math/Vector3.js。
如何定義一個點呢？
//第一種方式
let point1 = new THREE.Vector3(4,8,9);
//第二種方式
let point1 = new THREE.Vector3();
point.set(4,8,9)
</code>
複製程式碼複製程式碼
畫一條彩色線
幾何裡有定理：兩個不重合的點能夠決定一條直線。在Three.js中，也可以通過定義兩個點來畫一條直線。
這是一條每個點不同顏色的線條
具體程式碼如下
class RenderPoint{
renderer;
camera;
scene;
light;
line;
width;
height;
constroctuor(id){
this.dom = document.getElementById(id)
}
initThree(){
this.width = this.dom.clientWidth;
this.height = this.dom.clientHeight;
this.renderer = new THREE.WebGLRenderer({
antialias : true
});
this.renderer.setSize(this.width,this.height);
this.dom.appendChild(this.renderer.domElement);
renderer.setClearColor(0xFFFFFF,1.0);
}
initCamera(){
this.camera = new THREE.PerspectiveCamera(45,this.width/this.height,1,10000)
this.camera.position.set(0,1000,0);
this.camera.up.x = 0;
this.camera.up.y = 0;
this.camera.up.z = 1;
camera.lookAt({
x:0,
y:0,
z:0
})
}
initScene() {
this.scene = new THREE.Scene();
}
initLight() {
this.light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);
this.light.position.set(100, 100, 200);
this.scene.add(light);
}
initObject(){
let geometry = new THREE.Geometry();
let material = new THREE.LineBasicMaterial( { vertexColors: true } )
let material = new THREE.LineBasicMaterial( { vertexColors: true } )
let p1 = new THREE.Vector3( -100, 0, 100 );
let p2 = new THREE.Vector3( 100, 0, -100 );
geometry.vertices.push(p1);
geometry.vertices.push(p2);
geometry.colors.push( color1, color2 );
this.line = new THREE.Line( geometry, material, THREE.LinePieces )
scene.add(this.line);
}
threeStart() {
this.initThree();
this.initCamera();
this.initScene();
this.initLight();
this.initObject();
this.renderer.clear();
this.renderer.render(this.scene,this.camera);
}
}
複製程式碼
1.首先，我們宣告瞭一個幾何體geometry，如下：
var geometry = new THREE.Geometry();
幾何體裡面有一個vertices變數，可以用來存放點。
2.定義一種線條的材質，使用THREE.LineBasicMaterial型別來定義，它接受一個集合作為引數，其原型如下：
LineBasicMaterial( parameters )
Parameters是一個定義材質外觀的物件，它包含多個屬性來定義材質，這些屬性是：
複製程式碼
Color：線條的顏色，用16進位制來表示，預設的顏色是白色。
Linewidth：線條的寬度，預設時候1個單位寬度。
Linecap：線條兩端的外觀，預設是圓角端點，當線條較粗的時候才看得出效果，如果線條很細，那麼你幾乎看不出效果了。
Linejoin：兩個線條的連線點處的外觀，預設是“round”，表示圓角。
VertexColors：定義線條材質是否使用頂點顏色，這是一個boolean值。意思是，線條各部分的顏色會根據頂點的顏色來進行插值。（如果關於插值不是很明白，可以QQ問我，QQ在前言中你一定能夠找到，嘿嘿，雖然沒有明確寫出）。
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類，程式碼如下所示：
this.line = new THREE.Line( geometry, material, THREE.LinePieces );
第一個引數是幾何體geometry，裡面包含了2個頂點和頂點的顏色。第二個引數是線條的材質，或者是線條的屬性，表示線條以哪種方式取色,第三個引數是一組點的連線方式
然後，將這條線加入到場景中，程式碼如下
this.scene.add(this.line);
這樣，場景中就會出現剛才的那條線段了。