1. 程式人生 > >webGL之three.js入門3--材料篇

webGL之three.js入門3--材料篇

gmat 深度 官網 像素 face 得到 hba 根據 線框

這幾天在看李鵬程翻譯的[美]Jos Dirksen的《Three.js開發指南》,看到第八章了,現在來總結一下threejs中材料的相關知識。順帶也看完了上海交大的張雯莉出的《threejs入門指南》,我所學所寫都是基於書和threejs官網的一些例子。

這兩本書的電子版:鏈接: http://pan.baidu.com/s/1hrTqJGg 密碼: e8ay


Threejs r85版的材質解析:

相比之前的版本代碼,新版本有所改動,各位同學看書的時候,最好對照著Github上面最新的代碼。


LineBasicMaterial:可以用於THREE.Line幾何體,從而創建著色的直線。


LineDashedMaterial:類似line基礎材質,但可以創建虛線效果。


MeshBasicMaterial(網格基礎材質):為幾何體賦予一種簡單的顏色,或者顯示幾何體的線框 。忽略光線的作用,是什麽顏色,就直接顯示什麽顏色,但也由於這種材質忽略了光照的作用,那麽它也不會有任何陰影的效果。


MeshDepthMaterial(網格深度材質):根據網格到相機的距離,該材質決定如何給網格染色 ,根據物體上每一點到攝像機的遠近來顯示顏色,遠的顯示黑色,近的顯示白色。

MeshNormalMaterial(網格法向材質):根據物體表面的法向量計算顏色 ,決定光的發射方向、在計算光照、陰影時提供信息、為物體表面上色。法向量所指的方向決定每個面從MeshNormalMaterial材質獲取的顏色。在平面上添加表示法向量的箭頭:使用THREE.ArrowHelper。

MeshLambertMaterial(網格朗伯材質):考慮光照的影響,可以創建顏色暗淡,不光亮的物體 。ambient:對環境光的反射能力 ,和AmbientLight光源一起使用。該顏色會與AmbientLight光源的顏色相乘。默認是白色。 emissive:該材質發射的屬性。材質的自發光顏色,可以用來表現光源的顏色 。不像是光源,只是一種純粹的、不受其他光照影響的顏色。默認是黑色。Lambert 材質(MeshLambertMaterial)是符合 Lambert 光照模型的材質。 Lambert 光照模型的主要特點是只考慮漫反射而不考慮鏡面反射的效果,因而對於金屬、鏡子等需要鏡面反射效果的物體就不適應,對於其他大部分物體的漫反射效果都是適用的。
Idiffuse = Kd * Id * cos(theta) ,Idiffuse 是漫反射光強, Kd 是物體表面的漫反射屬性, Id 是光強, theta 是光的入射角弧度。

MeshPhongMaterial(網格phong式材質=鏡面反射材質):考慮光照的影響,可以創建光亮的物體 。對於金屬、鏡面的表現尤為適合。 specular:指定該材質的光亮程度及其高光部分的顏色。如果將他設置成跟color屬性相同的顏色,將會得到一種更加類似金屬的材質。如果設置為灰色,材質將變得更像塑料。
Ispecular = Ks * Is * (cos(alpha)) ^ n ,Ispecular 是鏡面反射的光強, Ks 是材質表面鏡面反射系數, Is 是光源強度,alpha 是反射光與視線的夾角, n 是高光指數,越大則高光光斑越小。 shininess 屬性控制光照模型中的 n 值。

MeshFaceMaterial(網格面材質):這是一種容器,可以在該容器中為物體的各個表面上設置不同的顏色 。

ShaderMaterial(著色器材質):使用自定義的著色器程序,直接控制頂點的放置方式,以及像素的著色方式。個人覺得這個比較復雜,但是應用應該比其他幾種都要廣泛一點,需要一些webGL的基礎。

SpriteMaterial: 粒子材質,適用於粒子系統,用來模擬雪花小雨什麽的。


補充:R69以後,粒子系統中的ParticleBasicMaterial 重命名為PointCloudMaterial,ParticleSystem重命名為PointCloud,貌似刪掉了Particle這個組件,粒子系統裏面只用Sprite。

webGL之three.js入門3--材料篇