threejs 熱力圖做成材質_Three.js開發指南---使用three.js的材質（第四章）

材質就像物體的皮膚，決定了幾何體的外表，例如是否像草地/金屬，是否透明，是否顯示線框等

一 材質

THREE.js的材質分為多種，Three.js提供了一個材質基類THREE.Material，

該基類擁有three.js所有材質的公有屬性，分為三類：基礎屬性，融合屬性，進階屬性

基礎屬性：ID,name，透明度，是否可見，是否需要重新整理等

融合屬性：決定了物體如何與背景融合

進階屬性：可以控制WEBGL上下文渲染物體的方法，大多數情況下，是不會用這些屬性，我們這裡不再讨論

1.1 基礎屬性

屬性

描述

ID(描述符)

用來辨別材質，在建立時指派

name(名稱)

通過該屬性克賦予該材質名稱

opacity(透明度)

定義物體有多透明，與transparent屬性一起使用

transparent(是否透明)

設定為true時，會根據opacity的值來設定透明度，設定為false時，則隻着色

overdraw(過度描繪)

當使用THREE.CanvasRenderer畫布渲染器繪制對象的時候，物體之間可能會有空隙，這時設定該值為true，多邊形會被渲染的稍微大一點，

visible(是否可見)

定義該材質是否可見

side(側面)

決定了幾何體的哪一面應用該材質，

THREE.FrontSide應用到幾何體的前(外)面；

THREE.BackSide應用到幾何體的後(内)面；

THREE.DoubleSide應用到幾何體的内外兩側

needUpdate(是否重新整理)

設定該值為true後，如果材質發生改變，就會使用新的材質重新整理它的緩存

1.2 融合屬性

屬性

描述

blending(融合)

決定物體上的材質如何跟背景融合，一般是NormalBlending，這種模式一般隻顯示材質的上層

blendsrc(融合源)

通過指定融合源，融合目标來指定源如何跟目标融合以及融合時如何使用目标，以達到建立自定義的融合模式

融合源的預設值SrcAlphaFactor：使用alpha透明度通道進行融合

融合目标的預設值OneMinusSrcAlphaFactor：融合目标也使用融合源的alpha通道進行融合

blendingequation隻讀blendsrc和blenddst的值的疊加方式建立自定義的融合方式

blenddst(融合目标)

blendingequation(融合公式)

1.3 基礎材質(MeshBasicMaterial)

MeshBasicMaterial是一種簡單的材質，這種材質不考慮光照的影響。

使用這種材質的網格會被渲染成一些簡單的平面多邊形，而且可以通過設定wireframe的值會顯示幾何體的線框

屬性

描述

color

設定材質的顔色

wireframe

是否将材質渲染成線框

wireframeLinewidth

如果設定了wireframe的值，則該屬性則設定了線框的寬度，即線框的寬度

wireframeLinecap(線框的端點)

該屬性定義了線框模式下端點的顯示方式，有butt平，round圓，square方，

但是在實際的應用中，該值很難看出效果，而且webglrenderer不支援該屬性

wireframeLinejoin(線框線段連接配接點)

定義線段的連接配接點如何顯示，webglrenderer不支援該屬性

shading(着色方式)

THREE.SmoothShading平滑着色，和THREE.FlatShading平面着色，

平面着色的話，每個面是什麼顔色就會被渲染成什麼顔色，

而平滑着色的話可以使物體的表面看起來變的更光滑一些

vertexColors(頂點顔色)

可以通過該屬性為每一個頂點定義不同的顔色，但是canvasRenderer不支援

fog(霧化)

目前材質是否會受全局霧化效果的影響

side(面)

該屬性可以指定幾何體的哪個面應用了材質，

由于材質多應用于物體前面的面上，

是以當旋轉的時候，會有一部分時間是不可見的(其實是物體背面沒有應用材質)

side屬性的值有front(隻有物體的前面應用材質)和double(前後都應用材質)

1

margin:0;overflow:hidden;

}