Three.js開發指南(4):使用Three.js的材質
材質結合幾何體可以構成網格。材質就像是物體的皮膚,決定幾何體外表的樣子。可以決定一個幾何體看起來是否像金屬、透明與否,以及是否顯示成線框。
4.1 理解共有屬性
材質基類,THREE.Material。
共有屬性分成了三類:
基礎屬性:可以控制物體的透明度、是否可見或如何引用物體。
融合屬性:決定物體如何與背景融合
高階屬性:可以控制底層WebGL上下渲染物體的方法
4.2 從簡單的網格材質(基礎、深度和麵)開始
簡單表面的MeshBasicMaterial:
基於深度著色的MeshDepthMaterial:
聯合材質:
計演算法向顏色的MeshNormalMaterial:
為每個面指定材質的MeshFaceMaterial:
4.3 學習高階材質
用於暗淡、不光亮表面的MeshLambertMaterial:
用於光亮表面的MeshPhongMaterial:
用ShaderMaterial建立自己的著色器:著色器不是用JavaScript編寫的。只能用類似C的GLSL語言來寫著色器。
4.4 線段幾何體的材質
LineBasicMaterial:通過線段基礎材質可以設定線段的顏色、寬度、端點和連線點屬性。
LineDashedMaterial:跟LineBasicMaterial的屬性一樣,但是通過指定短劃線和空格的長度,可以建立出虛線效果。
相關文章
- three.js獲取物件的材質JS物件
- Three.js開發指南(3):使用Three.js裡的各種光源JS
- Three.js開發指南(5 6):使用Three.js的幾何體JS
- Three.js開發指南(2):使用構建Three.js場景的基本元件JS元件
- 38 Three.js高階材質THREE.ShaderMaterialJS
- Three.js開發指南(1):介紹JS
- Three.js開發指南(10):載入和使用紋理JS
- Three.js開發指南(7):粒子和粒子系統JS
- 39 Three.js線性幾何體材質THREE.LineBasicMaterialJS
- 40 Three.js線性幾何體材質THREE.LineDashedMaterialJS
- Three.js開發指南隨書原始碼下載地址JS原始碼
- Three.js開發指南(9):建立動畫和移動相機JS動畫
- three.js 著色器材質之紋理JS
- 小遊戲使用three.js遊戲JS
- three.js學習4_光源JS
- 【Three.js】Three.js學習記錄JS
- Three.js開發指南(11):定製著色器和渲染後期處理JS
- Three.js開發指南(12):用Physijs在場景中新增物理效果JS
- three.js 著色器材質內建變數JS變數
- three.js 著色器材質之變數(二)JS變數
- three.js 著色器材質之初識著色器JS
- three.js 著色器材質之變數(一)JS變數
- three.jsJS
- Three.js開發指南(8):建立、載入高階網格和幾何體JS
- three.js WebGLRenderTargetJSWeb
- three.js 數學方法之Matrix4JS
- three.js 著色器材質之glsl內建函式JS函式
- THREE.JS中 CubeTextureLoader 使用避坑JS
- three.js 曲線JS
- docker 部署three.jsDockerJS
- three.js之GroupJS
- Three.js中的矩陣JS矩陣
- Three.js 動效方案JS
- three.js 製作魔方JS
- THREE.js渲染順序JS
- Three.js 入門示例JS
- Three.js基礎(二)JS
- Three.js基礎(一)JS