2.點線面

在Threejs中定義一個點

在三維空間中的某一個點能夠用一個座標點來表示。一個座標點由x,y,z三個份量構成。在three.js中，點能夠在右手座標系中表示：

空間幾何中，點能夠用一個向量來表示，在Three.js中也是用一個向量來表示的，代碼以下所示：

THREE.Vector3 = function ( x, y, z ) {

this.x = x || 0;
this.y = y || 0;
this.z = z || 0;

};

咱們來分析這段代碼：前面咱們已經知道了THREE是Three.js引擎的一個全局變量。只要你想用它，就能夠在任何地方用它。有點充氣娃娃的意思，不須要你贊成，你想用就用吧。

那麼THREE.Vector3呢，就是表示Vector3是定義在THREE下面的一個類。之後要用Vector3，就必需要加THREE前綴。固然Three.js的設計者，也能夠不加THREE這個前綴，可是他們預見到，Three.js引擎中會有不少類型，最好給這些類型加一個前綴，以避免與開發者的代碼產生衝突。

THREE.Vector3被賦值爲一個函數。這個函數有3個參數，分別表明x座標，y座標和z座標的份量。函數體內的代碼將他們分別賦值給成員變量x，y，z。看看上面的代碼，中間使用了一個「||」（或）運算符，就是當x=null或者undefine時，this.x的值應該取0。
三、點的操做

在3D世界中點能夠用THREE.Vector3D來表示。對應源碼爲/src/math/Vector3.js（注意：源碼所在的位置，可能不一樣版本不同，請本身搜索Vector3關鍵詞來肯定）。在您繼續學習以前，你能夠打開該文件瀏覽一下，推薦使用WebStorm，若是沒有，你也能夠用NotePad++。

如今來看看怎麼定義個點，假設有一個點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);

咱們這裏使用了set方法，爲了之後深刻學習的方便，這裏將Vector3的經常使用方法列出以下，爲了避免影響文章的連貫性，咱們專門列出了一個網頁來介紹它。

一、首先，咱們聲明瞭一個幾何體geometry，以下：

var geometry = new THREE.Geometry();

幾何體裏面有一個vertices變量，能夠用來存放點。

二、定義一種線條的材質，使用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 } );

三、接下來，定義兩種顏色，分別表示線條兩個端點的顏色，以下所示：

var color1 = new THREE.Color( 0x444444 ),

color2 = new THREE.Color( 0xFF0000 );

四、定義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);

五、爲4中定義的2個頂點，設置不一樣的顏色，代碼以下所示：

geometry.colors.push( color1, color2 );

geometry中colors表示頂點的顏色，必須材質中vertexColors等於THREE.VertexColors 時，顏色纔有效，若是vertexColors等於THREE.NoColors時，顏色就沒有效果了。那麼就會去取材質中color的值，這個很重要，你們必定記住。

六、定義一條線

定義線條，使用THREE.Line類，代碼以下所示：

var line = new THREE.Line( geometry, material, THREE.LinePieces );

第一個參數是幾何體geometry，裏面包含了2個頂點和頂點的顏色。第二個參數是線條的材質，或者是線條的屬性，表示線條以哪一種方式取色。第三個參數是一組點的鏈接方式，咱們會在後面詳細講解。

而後，將這條線加入到場景中，代碼以下：

scene.add(line);

這樣，場景中就會出現剛纔的那條線段了。

學習的資料和源碼我都共享到個人gitHub倉庫中去了,你們有興趣的能夠去下載,歡迎foke,clone,加星星,也算是對個人一個鼓勵吧

three學習資料的github地址
或者複製連接地址到瀏覽器
https://github.com/kingder-c/LearnThree.js