THREE.JS中常用的3種材質

總序

材質和幾何體構成網格，決定幾何體是否像金屬，透明與否，已經是否顯示成線框。

• MeshBasicMaterial：對光照無感，給幾何體一種簡單的顏色或顯示線框

• MeshLambertMaterial：這種材質對光照有反應，用於創建暗淡的不發光的物體

• MeshPhongMaterial：這種材質對光照也有反應，用於創建金屬類明亮的物體

材質的共有屬性

材質雖然可能有不同的分類，但是都是材質啊，還是有共性的地方，共有屬性體現在基礎屬性，融合屬性，高級屬性三個方面。這三個方面其實是THREE.Material這個基類的屬性。

THREE.Material的基礎屬性

列出一些常用的

———-

• ID：標識材質
• name： 名稱
• opacity：透明度，結合transparent使用，範圍爲0~1
• transparent：是否透明，如果爲true則結合opacity設置透明度。如果爲false則物體不透明
• visible：是否可見，false則看不見，默認可以看見
• side：側面，覺得幾何體的哪一面應用這個材質，默認爲THREE.FrontSide(前外面)，還有THREE.BackSide(後內面)和THREE.DoubleSide(兩面)
• needUpdate：如果爲true，則在幾何體使用新的材質的時候更新材質緩存

———-

THREE.Material的融合屬性

總結起來，不常用

———-

• blending ：覺得物體的材質如何和背景融合，默認值爲NormalBlending,這種情況下只顯示材質的上層
• blendsrc：除了標準融合外，還可以通過指定融合源，融合目標，和融合公式，創建自定義的融合模式，默認SrcAlphaFactor，即alpha通道進行融合
• blenddst：默認OneMinusAlphaFactor，定義目標的融合方式，默認也使用alpha通道融合
• blendingequation：融合公式，指定如何使用融合源和融合目標，默認爲addEquation，即將顏色想加

———-

THREE.Material的高級屬性

不常用，因爲沒有用過啊

THREE.MeshBasicMaterial 基礎網格材質

使用這種材質的網格，通常被渲染成簡單的多邊形，而且可以選擇想要線框。除了一些THREE.Material的屬性以外，還有如下屬性

• color：設置材質的顏色
• wireframe：如果爲true，則將材質渲染成線框，在調試的時候可以起到很好的作用
• wireframeLinewidth：wireframe爲true時，設置線框中線的寬度
• wireframeLinecap：決定線框端點如何顯示，可選的值 round，bevel(斜角)和miter(尖角)。
• vertexColors：通過這屬性，定義頂點的顏色，在canvasRender中不起作用。
• fog：決定單個材質的是否受全局霧化的影響。
  值得一提的是：
  對於fog屬性，在全局中如果設定了霧化屬性，那麼本應該對所有場景的物體都添加霧化效果。

scene.fog=new THREE.Fog(0xffffff,0.015,100)

而如果在當前材質中設置的如

var cubeGeo= new THREE.CubeGeometry(30,30,30);
var cubeMat= new THREE.MeshBasicMaterial({color:"0x0c0c0c",fog:false})
var cude= new THREE.Mesh(cubeGeo,cubeMat);
scene.add(cube);

則在當前這個cude方塊中，並不能體現霧化效果

Code

        var cubeGeometry = new THREE.BoxGeometry(15, 15, 15);
        var meshMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff});
        var cube = new THREE.Mesh(cubeGeometry, meshMaterial);
        //meshMaterial.wireframe=true;

有無wireframe的區別如下面2圖所示

THREE.MeshLambertMaterial暗淡不發光

該材質對光源有反應，除了之前說過的color，transparent，opacity，fog等屬性，還有一些特有的屬性，總結起來就只有2個

• ambient：設置材質的環境色，和AmbientLight光源一起使用，這個顏色會與環境光的顏色相乘。即是對光源作出反應。
• emissive：設置材質發射的顏色，不是一種光源，而是一種不受光照影響的顏色。默認爲黑色

Code

代碼和上面的基本類似

        var cubeGeometry = new THREE.BoxGeometry(15, 15, 15);
        var meshMaterial = new THREE.MeshLamebertMaterial({color: 0x7777ff});
        var cube = new THREE.Mesh(cubeGeometry, meshMaterial);

但是渲染出來的結果卻不太一樣

THREE.MeshPhongMaterial金屬發亮的物體

該材質對光源有反應，除了之前說過的color，transparent，opacity，fog等屬性，還有一些特有的屬性，總結起來有4個

• ambient：設置材質的環境色，和AmbientLight光源一起使用，這個顏色會與環境光的顏色相乘。即是對光源作出反應。
• emissive：設置材質發射的顏色，不是一種光源，而是一種不受光照影響的顏色。默認爲黑色
• specular：指定該材質的光亮程度及其高光部分的顏色，如果設置成和color屬性相同的顏色，則會得到另一個更加類似金屬的材質，如果設置成grey灰色，則看起來像塑料
• shininess：指定高光部分的亮度，默認值爲30.

Code

代碼類似 只貼出其中一點點

        var meshMaterial = new THREE.MeshPhongMaterial({
        color: 0x7777ff，
        specular:0x7777ff,
        shininess:30
        });