WebGL/ThreeJS幾何體、材質、紋理貼圖，給幾何體披上好看的外衣

1、ThreeJS的常見幾何體

BufferGeometry和Geometry有什麼不同？

如果你想簡單了解BufferGeometry和Geometry有什麼不同,就是兩者的資料結構不同，緩沖類型幾何體BufferGeometry相比普通幾何體Geometry性能更好。Three.js渲染器在解析幾何體對象的時候，如果幾何體對象是普通幾何體對象Geometry, Three.js的WebGL渲染器會把普通幾何體對象Geometry轉化為緩沖類型幾何體對象BufferGeometry,然後再提取BufferGeometry包含的頂點資訊，這裡可以看出來直接使用Buf fer Geometry解析的時候相對Geometrv少了一步,自然性能更高一些。

ThreeJS中的常見幾何體

幾何體名稱	解釋	方法執行個體
BoxGeometry	立方幾何體	var geometry = new THREE.BoxGeometry(1,1,1 );
CircleGeometry	圓形幾何體	var geometry =new THREE.CircleGeometry( 5, 32 );
ConeGeometry	圓錐幾何體	var geometry = new THREE.ConeGeometry( 5, 20, 32 );
CylinderGeometry	圓柱幾何體	var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );
DodecahedronGeometry	十二面幾何體	var geometry = new THREE.DodecahedronGeometry(12, 0);
EdgesGeometry	邊緣幾何體	var edges = new THREE.EdgesGeometry( geometry );
IcosahedronGeometry	二十面幾何體	var geometry = new THREE.IcosahedronGeometry( 12, 0);
OctahedronGeometry	八面幾何體	var geometry = new THREE.OctahedronGeometry(12, O );
PlaneGeometry	平面幾何體	var geometry = new THREE.PlaneGeometry( 5, 20, 32 );
RingGeometry	圓環幾何體	var geometry = new THREE.RingGeometry( 1,5, 32);
SphereGeometry	球幾何體	var geometry = new THREE. SphereGeometry( 5, 32, 32 ); :
TetrahedronGeometry	四面幾何體	var geometry = new THREE.TetrahedronGeometry( 5, 32, 32 );
TextGeometry	文本幾何體
TorusGeometry	圓環幾何體	var geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );
TubeGeometry	管道緩沖幾何體	var geometry =new THREE.TubeGeometry( path, 20, 2, 8, false );
WireframeGeometry	網格幾何體	var geometry = new THREE.SphereBufferGeometry( 100, 100, 100 );

ThreeJS EdgesGeometry邊緣幾何體畫一個立方體的邊框

var edges = new THREE.EdgesGeometry( geometry,0); // 每個面都有斜線

var edges = new THREE.EdgesGeometry( geometry,1); // 去掉每個面的斜線

ThreeJS 網格幾何體(WireframeGeometry)

擠壓幾何體(ExtrudeGeometry)

它是從一個二維圖形建立出-個三維圖形。譬如，我們可以先通過THREE . Shape對象，先建立一個二維的圖形，然後通過ExtrudeGeometry 将它拉伸為-一個三維圖形。也可以先通過THREE. PlaneGeometry對象建立一個二維平面，然後再利用ExtrudeGeometry 進行拉伸。

車削幾何體(LatheGeometry)

THREE.LatheGeometry允許你從一條光滑的曲線建立圖形。此曲線是由多個點定義，通常稱作樣條曲線。然後再繞y軸旋轉，就生成了一組車床類型的幾何體模型。

參數幾何體(ParametricGeometry)

使用THREE.ParametricGeometry可以根據傳入的公式，計算出相應的幾何體。這是一一個很具有擴充性的幾何體。

多面體(PolyhedronGeometry)

多面體是一種隻有平面和直邊的幾何體。多數情況下我們不會使用這種幾何體，因為three. js庫為我們提供了幾種特定的多面體，如: TetrahedronGeometry四面體、OctahedronGeometry八面體、DodecahedronGeometry十二面體、IcosahedronGeometry二十面體。

形狀幾何體(ShapeGeometry)

從一個或多個路徑形狀中建立一個單面多邊形幾何體。

圓環扭結幾何體(TorusKnotGeometry)

這是一種比較特别的扭結，樣子就像是一根管子繞着它自己轉了幾圈。

2、常見的材質

點材質 PointsMaterial

點材質比較簡單,隻有PointsMaterial ,通常使用點模型的時候會使用點材質PointsMaterial。

點材貭pointsMaterial的.size屬性可以毎個點這染的方形區域尺寸像素大小。注意:血用到點模型対象。

var geometry = new THREE.Spher eGeometry(100，25，25); //建立一個球體幾何對象
//建立一個點材質對象
var material = new THREE.PointsMaterial({
color: 0x0000ff， //顔色
size: 1, //點渲染尺寸
});
//點模型對象參數: 幾何體
點材質
var point = new THREE . Points (geometry，materia1l);
scene. add(point); //網格 模型添加到場景中

線材質

線材質有基礎線材質LineBasicMaterial和虛線材質LineDashedMaterial兩個，通常使用使用Line等線模型才會用到線材質。

基礎線材質LineBasicMaterial。注意:應用到線模型對象

var geometry = new THREE . Spher eGeometry(100，25， 25);//球體
//直線基礎材質對象
var material = new THREE .L ineBasi cMaterial({
color: 0x0000ff
});
var line = new THREE.Line(geometry， material); //線模型對象
scene. add(1ine); //點模型添加到場景中

虛線材質L ineDashedMaterial

//虛線材質對象:産生虛線效果
var material = new THREE.LineDashedMaterial({
color: 0x0000ff,
dashSize: 10,//顯示線段的大小。預設為3。
gapSize: 5,//間隙的大小。 預設為1
});
var line = new THREE.Line(geometry， material); //線模型對象
// computeL ineDistances方法計算L ineDashedMater ia1所需的距離數組
line. computeL ineDistances();

網格模型材質

Threejs提供的網格類材質比較多，網格材質涉及的材質種類和材質屬性也比較多, -節課也無法講解完，本節課先有一個感性的認知。

網格材質顧名思義，網格類模型才會使用的材質對象。注意:應用到網格模型對象基礎網格材質對象MeshBasicMaterial ,不受帶有方向光源影響，沒有棱角感。

var material = new THREE.MeshBasicMaterial(l
    color: 0x0000ff
])

MeshLambertMaterial材質可以實作網格Mesh表面與光源的漫反射光照計算,了光照計算，物體表面分界的位置才産生棱角感。

var material = new THREE.MeshLambertMaterial({
    color:0x00ff00
})

高光網格材質MeshPhongMaterial除了和MeshLambertMaterial一樣可以實作光源和網格表面的漫反射光照計算,還可以産生高光效果(鏡面反射)。

var material = new THREE .MeshPhongMaterial(l
    color:0xff0000
    specular :0x444444,//高光部分的顔色
    shininess:20,//高光部分的亮度，預設30
]);

材質的基本屬性

如果你的javascript語言基礎還可以，應該明白類、基類、子類、父類等概念。如果你有這些類的概念,那麼在學習Threejs的過程中,如何查找Threejs文檔将會比較順利。

點材質PointsMaterial、基礎線材質LineBasicMaterial、基礎網格材質MeshBasicMaterial、高光網格材質MeshPhongMaterial等材質都是父類Material的子類。

各種各樣的材質子類都有自己的特定屬性，比如點材質特有的尺寸屬性.size、光網格材質特有的高光顔色屬性. specular等等這些屬性可以成為子類材質的私有屬性。

所有子類的材質都會從父類材質Material繼承透明度opacity、面side等屬性,這些來自父類的屬性都是子類共有的屬性。

.size屬性

在Three.js開發過程中你可能會遇到下面的問題，比如three.js矩形平面planegeometry的網格模型插入場景看不到，一個球體或立方體網格模型如何背面顯示貼圖，正面不顯示....對于這些問題可以通過Three.js材質對象.side屬性來設定。

材質.side屬性的具體介紹可以檢視Threejs文檔中所有材質對象的基類Material。

.side屬性的屬性值定義面的渲染方式前面後面或雙面.屬性的預設值是THREE.Frontside，表示前面.也可以設定為後面THREE.Backside或雙面THREE.Doubleside

var material = new THREE.MeshBasicMaterial({
    color: 0xdd00ff,
    size: THREE.Doubleside
]);

材質透明度. opacity

通過材質的透明度屬性. opacity可以設定材質的透明程度，. opacity屬性值的範圍是0.0~1.0, 0.0值表示完全透明, 1.0表示完全不透明，. opacity預設值1.0。

當設定. opacity屬性值的時候，需要設定材質屬性transparent值為true,如果材質的transparent屬性沒設定為true,材質會保持完全不适明狀态。

在構造函數參數中設定transparent和. opacity的屬性值.

var material = new THREE.MeshPhongMaterial(l
    color: 0x220000 ,
    // transparent設定為true,開啟透明，否則opacity不起作用
    transparent: true ,
    //設定材質透明度
    opacity: 0.4
]);

通過通路材質對象屬性形式設定transparent和.opacity的屬性值

// transparent沒置カtrue,幵後透明，否則opacity不起作用
material.transparent = true;
// 設定材質透明度
material.opacity = 0.4;

深度測試.depthTest

depthTest depthWrite :繪制不透明物體時，深度測試開啟是能保證正确的遮擋關系，繪制透明物體時，關掉深度測試就能看到透明物體之後的物體

3、建立紋理貼圖

//紋理貼圖映射到- -個矩形平面上
    var geometry = new THREE.PlaneGeometry(204，102); //矩形平面
    // TextureLoader建立一 個紋理加載器對象， 可以加載圖檔作為幾何體紋理
    var textureLoader = new THREE.TextureLoader() ;
    //執行1oad方法，加載紋理貼圖成功後，傳回- -個紋理對象Texture
textureLoader.1oad('Earth. png', function(texture) {
    var material = new THREE .MeshL amber tMaterial({
    // color: 0x0000ff,
    //設定顔色紋理貼圖: Textur e對象作為材質map屬性的屬性值
    map: texture,//設定 顔色貼圖屬性值
    }); //材質對象Material
    var mesh = new THREE.Mesh(geometry, material); //網格模型對象Mesh
    scene.add(mesh); //網格模型添加到場景中
    //紋理貼圖加載成功後，調用渲染函數執行渲染操作
    // render();
})

WebGL/ThreeJS幾何體、材質、紋理貼圖，給幾何體披上好看的外衣

1、ThreeJS的常見幾何體

BufferGeometry和Geometry有什麼不同？

ThreeJS EdgesGeometry邊緣幾何體畫一個立方體的邊框

ThreeJS 網格幾何體(WireframeGeometry)

擠壓幾何體(ExtrudeGeometry)

車削幾何體(LatheGeometry)

參數幾何體(ParametricGeometry)

多面體(PolyhedronGeometry)

形狀幾何體(ShapeGeometry)

圓環扭結幾何體(TorusKnotGeometry)

2、常見的材質

點材質 PointsMaterial

線材質

材質的基本屬性

.size屬性

材質透明度. opacity

深度測試.depthTest

3、建立紋理貼圖

繼續閱讀

HDU 4719 Oh My Holy FFF

CSU 1561 (More) Multiplication

CSU 1563 Lexicography

HDU 4721 Food and Productivity

ZOJ 1041 Transmitters

CSU 1562 Fun House

CodeChef PALPROB Palindromeness

UVA 10344- 23 out of 5

ZOJ 1104 Leaps Tall Buildings

HDU 2821 Pusher

UVA 1401 Remember the Word

ZOJ 2748 Free Kick

CSU 1567 Reverse Rot

JAVA 系列——>開發工具IntelliJ IDEA的安裝以及配置、快捷鍵IDEA 簡介

UVA 519 Puzzle (II)

磁盤結構及在Linux中的命名

WebGL/ThreeJS幾何體、材質、紋理貼圖，給幾何體披上好看的外衣

1、ThreeJS的常見幾何體

BufferGeometry和Geometry有什麼不同？

ThreeJS EdgesGeometry邊緣幾何體畫一個立方體的邊框

ThreeJS 網格幾何體(WireframeGeometry)

擠壓幾何體(ExtrudeGeometry)

車削幾何體(LatheGeometry)

參數幾何體(ParametricGeometry)

多面體(PolyhedronGeometry)

形狀幾何體(ShapeGeometry)

圓環扭結幾何體(TorusKnotGeometry)

2、常見的材質

​​點材質 PointsMaterial​​

​​線材質​​

材質的基本屬性

.size屬性

材質透明度. opacity

深度測試.depthTest

3、建立紋理貼圖

繼續閱讀

點材質 PointsMaterial

線材質