材質(Material)和幾何體(Geometry)

1.    材質

　　一個材質結合一個幾何體可以組成一個mesh對象。材質就像物體的皮膚，決定了幾何體的外表。例如:皮膚定義了一個幾何體看起來是否像金屬、透明與否，或者顯示為線框。

基本的材質如下:

1.屬性介紹

1.1基礎屬性

 　　這些屬性是所有材質共有的。通過這些屬性可以設置材質的透明度、是否可見以及如何被引用(ID或自定義名稱)。

1.2.融合屬性

 　　融合決定了渲染的顏色如何與它們的后面的顏色交互。

 

1.3高級屬性

　　這些屬性與WebGL內部工作有關，如下:

2.基本的網格材質

 設置材質屬性的方法有兩種，一種是通過構造函數傳入參數的形式，如下

var meshMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff});

第二種是通過修改屬性的方法設置:

        var meshMaterial = new THREE.MeshBasicMaterial();
        meshMaterial.color = new THREE.Color(0x7777ff);
        meshMaterial.name="xxx";

 2.1    THREE.MeshBasicMaterial

 　　一種非常簡單的材質，不考慮場景中的光照的影響。使用這種材質的網格會被渲染成簡單的平面多邊形，而且可以顯示幾何體的線框。除了上面的公共屬性還可以設置下面的屬性:

 2.2    THREE.MeshDepthMaterial

 　　這種材質其外觀不是由光照或某個屬性決定的，而是由物體到攝像機的距離決定的。可以將這種材質與其他材質結合使用，從而很容易地創建出逐漸消失的效果。其特有屬性如下:

3.高級材質 (光亮的和暗淡的材質)

　　THREE.MeshLambertMaterial和THREE.MeshPhongtMaterial材質會對光源做出反應，並且分別用來創建暗淡的材質和光亮的材質。

 3.1THREE.MeshLambertMaterial  創建暗淡材質

　　創建暗淡的但是並不光亮的表面。會對光源產生影響。其特有的屬性如下:

3..2    THREE.MeshPhongtMaterial創建光亮的材質

　　與上面基本一樣，只是用於創建光亮的材質。其基本屬性如下:

 

總結:

　　不是所有的材質都能對場景中的光源產生反應，如果希望一個材質計算光照的影響，應該使用高級材質(THREE.MeshLambertMaterial和THREE.MeshPhongtMaterial) 。

　　材質的大部分屬性在運行時可以修改，但是有一些屬性(例如side)不能修改。如果需要修改這些屬性的值，需要將needsUodate屬性設置為true。

 

2.    幾何體 (重要)

　　材質決定物體的外觀，幾何級決定了物體的形狀，Three.js提供的幾何體有:

基本的幾何體:

高級幾何體:

 1.THREE.JS提供發基本幾何體

　　基本的有二維幾何體:THREE.CircleGeometry,THREE.RingGeometry和THREE.PlanGeometry、ShapeGeometry。

1.1二維幾何體:

　　二維幾何體，看上去是扁平的，只有兩個維度。

(1)THREE.PlaneGeometry(10, 14, 4, 4)   創建二維平面幾何體

　　其屬性如下:

(2)THREE.CircleGeometry(4, 10, 0.3 * Math.PI * 2, 0.3 * Math.PI * 2)　　創建圓形或者扇形

　　其屬性如下:

創建一個完整的圓的代碼如下:

new THREE.CircleGeometry(3,12)

 

創建一個半圓的代碼如下:

new THREE.CircleGeometry(3,12,0,Math.PI)

 

(3)THREE.RingGeometry()  創建類似於圓的圖形

　　其參數如下:

(4)THREE.ShapeGeometry  自定義二維幾何體

 

1.2   三維幾何體

 1.THREE.BoxGeometry  立方體幾何體 (重要)

　　創建一個長方體只需要指定寬度高度和深度就可以，屬性如下:

例如:

new THREE.BoxGeometry(10, 10, 10, 1, 1, 1)

如下:

 

 2.  THREE.SphereGeometry(4, 10, 10) 創建球體

 　　創建三維球體，屬性如下：

3.new THREE.CylinderGeometry(20, 20, 20)  創建類似於圓柱體

 　屬性如下:

 

總結:

　　開始創建幾何體時，不要直接使用那些復雜的材質，可以從簡單的BasicMaterial開始，並將wireframe屬性設為true，或者使用NormalMaterial。

　　對於二維圖形，重要的是記住它們放置在x-y平面上的。如果想擁有一個水平的二維圖形，那么需要將x軸旋轉-0.5*Math.PI。如果要旋轉一個二維圖形或者一個開放的三維圖形，記住需要將材質設置成THREE.DoubleSide,如果不這么做，那么幾何體的內側或背面將會不可見。