文章目錄

• 前言
• 材質的常用屬性
• • 基礎屬性
  • 融合屬性
  • 高級屬性
• 常用的材質
• • MeshBasicMaterial()
  • MeshDepthMaterial()
  • 聯合材質createMultiMaterialObject ( geometry, materials: Array )
  • 法線材質MeshNormalMaterial()
  • Lambert材質MeshLambertMaterial()
  • Phong材質MeshPhongMaterial()
  • 標準格材質MeshStandardMaterial()
  • 物理材質MeshPhysicalMaterial()
  • 線材質LineMaterial()
• 效果示例

---

前言

threejs材質講解：材質常用屬性，材質種類，效果示例

---

材質的常用屬性

基礎屬性

id // 標識符，創建時自增uuid // 唯一標識name // 材質名稱opacity // 不透明度，[0,1],transpant為true時生效transpant // booloverdraw // 過度描繪visible // 是否可見side // 側面，定義為哪一面使用材質：Three.FrontSide,Three.BackSide,Three.DoubleSideneedsUpdate // bool，為true時，使用最新的材質屬性而不是緩存colorWrite // bool，為true時，不會輸出真實的顏色flatShading // bool，平面著色，為flase時光照效果更加平滑lights // bool，為true時接收光照dithering // bool，開啟時使用顏色抖動shadowSide // 產生投影的面，與side對應的面相反vertexColors // 頂點顏色fog // bool,霧化效果

融合屬性

渲染的顏色與背景交互的方式

blending // 材質與背景融合的方式blendSrc // 融合源blendDst // 融合目標blendequation // 融合人透明度，結blendSrc，blendDst自定義融合方式blendSrcAplha // 為 blendSrc指定透明度blendDstAplha // 為 blendDst指定透明度

高級屬性

WebGL底層相關的一些參數，不常用

depthTest // depthWrite // depthFunc //alphstest //precision //

常用的材質

MeshBasicMaterial()

一個以簡單著色（平面或線框）方式來繪制幾何體的材質。不受光照影響

• 具備一些自有屬性

color // 顏色 wireframe // bool,將材質渲染成線框,對調試有利 wireframeLinewidth // 開啟wireframe時，定義線框中線的寬度 （線框線寬） 這個屬性 wireframeLinecap // 開啟wireframe時,定義線框模式下頂點間線段的端點如何顯示。可選值包括 butt（平）、round（圓）和 square(方） wireframeLinejoin //定義線段的連接點如何顯示。可選的值包括 round、bevel（斜角）和 miter（尖角）。

MeshDepthMaterial()

按深度繪制幾何體的材質。深度基于相機遠近平面。白色最近，黑色最遠，可以通過相機的near屬性和far屬性之間的差距決定場景的亮度和物體消失的速度。

聯合材質createMultiMaterialObject ( geometry, materials: Array )

需要借助SceneUtils這個外部工具包

• geometry 幾何體
• materials 材質數組

舉例

const cubeGeometry = new THREE.BoxGeometry(10, 10, 10);// 定義要聯合的兩種材質const cubeMaterial = new THREE.MeshDepthMaterial();const colorMaterial = new THREE.MeshBasicMaterial({color: controls.color,transparent: true, // 當材質為MeshBasicMaterial時，需要設置，否則會出現一個純色物體blending: THREE.MultiplyBlending});const cube = new THREE.SceneUtils.createMultiMaterialObject(cubeGeometry,[colorMaterial,cubeMaterial]);cube.children[1].scale.set(0.99, 0.99, 0.99); // 防止畫面閃爍 cube.castShadow = true;scene.add(cube);

createMultiMaterialObject函數創建一個網格的時候，幾何體會被復制，返回一個Group，里面兩個網格完全相同,分布被賦予不同的材料。通過縮小MeshDepthMaterial材質的網格，就可以避免畫面閃爍。方法如下：

cube.children[1].scale.set(0.99, 0.99, 0.99);

法線材質MeshNormalMaterial()

把法向量映射到RGB顏色的材質

Lambert材質MeshLambertMaterial()

該材質使用基于非物理的Lambertian模型來計算反射率。 這可以很好地模擬一些表面（例如未經處理的木材或石材），但不能模擬具有鏡面高光的光澤表面（例如涂漆木材）

Phong材質MeshPhongMaterial()

該材質使用非物理的Blinn-Phong模型來計算反射率。 該材質可以模擬具有鏡面高光的光澤表面（例如涂漆木材）

標準格材質MeshStandardMaterial()

使用物理上正確的模型計算表面材質與光照的互動。能夠更好地表現塑料質感和金屬質感

物理材質MeshPhysicalMaterial()

MeshStandardMaterial的擴展，能夠更好地控制反射率

線材質LineMaterial()

一種用于繪制線框樣式幾何體的材質

效果示例

場景搭建見鏈接 threejs-場景創建（基于react-hooks）

const createGeo = () => {/*** 創建兩個法向量材質的球和立方體*/const sphereGeometry = new THREE.SphereGeometry(5, 20, 20);const cubeGeometry = new THREE.BoxGeometry(10, 10, 10);const meshMaterial = new THREE.MeshNormalMaterial();const sphere = new THREE.Mesh(sphereGeometry, meshMaterial);const cube = new THREE.Mesh(cubeGeometry, meshMaterial);sphere.position.set(-40, 20, 0);cube.position.set(-20, 20, 0);sphere.castShadow = true;cube.castShadow = true;scence.add(sphere);scence.add(cube);/*** 創建一個指定材質的立方體*/const group = new THREE.Mesh();// add all the rubik cube elementsconst mats = [new THREE.MeshBasicMaterial({ color: 0x009e60 }),new THREE.MeshBasicMaterial({ color: 0x0051ba }),new THREE.MeshBasicMaterial({ color: 0xffd500 }),new THREE.MeshBasicMaterial({ color: 0xff5800 }),new THREE.MeshBasicMaterial({ color: 0xC41E3A }),new THREE.MeshBasicMaterial({ color: 0xffffff }),];for (let x = 0; x < 3; x++) {for (let y = 0; y < 3; y++) {for (let z = 0; z < 3; z++) {const cubeGeom = new THREE.BoxGeometry(2.9, 2.9, 2.9);const cube = new THREE.Mesh(cubeGeom, mats);cube.castShadow = true;cube.position.set(x * 3 - 3, y * 3 - 3 + 20, z * 3 - 3);group.add(cube);}}}group.castShadow = truescence.add(group);/*** 創建一個lambert材質的立方體*/const LambertMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});const lambertSphere = new THREE.Mesh(sphereGeometry, LambertMaterial);lambertSphere.castShadow = true;lambertSphere.position.set(20, 20, 0);scence.add(lambertSphere);/*** 創建一個Phong材質的立方體*/const PhongMaterial = new THREE.MeshPhongMaterial({color: 0x7777ff});const PhongSphere = new THREE.Mesh(sphereGeometry, PhongMaterial);PhongSphere.castShadow = true;PhongSphere.position.set(40, 20, 0);scence.add(PhongSphere);/*** 創建一個標準材質的立方體*/const Standardmaterial = new THREE.MeshStandardMaterial({ color: 0x7777ff });const StandardCube = new THREE.Mesh(cubeGeometry, Standardmaterial);StandardCube.castShadow = true;StandardCube.position.set(60, 20, 0);scence.add(StandardCube);/*** 創建一個物理材質的立方體*/const Physicalmaterial = new THREE.MeshPhysicalMaterial({ color: 0x7777ff });const PhysicalCube = new THREE.Mesh(cubeGeometry, Physicalmaterial);PhysicalCube.castShadow = true;PhysicalCube.position.set(80, 20, 0);scence.add(PhysicalCube);/*** 創建一個線材質的立方體*/const lineMater = new THREE.LineBasicMaterial({ vertexColors: true })const geometry = new THREE.BufferGeometry()const color = new THREE.Color();let vertices = new Array();let color1 = new Array();for (let i = 0; i < 5000; i++) {const x = Math.random() * 10 const y = Math.random() * 10 const z = Math.random() * 10 vertices.push(x, y, z);color.setHSL(Math.random(), Math.random(), Math.random());color1.push(color.r, color.g, color.b);geometry.setAttribute('position',new THREE.Float32BufferAttribute(vertices, 3));geometry.setAttribute('color', new THREE.Float32BufferAttribute(color1, 3));}const mesh = new THREE.Line(geometry, lineMater)mesh.position.set(100, 12.5, -5)mesh.castShadow = truescence.add(mesh)}

效果如下：

總結

以上是生活随笔為你收集整理的threejs-材质的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。