文章目錄

• 前言
• 材質(zhì)的常用屬性
• • 基礎(chǔ)屬性
  • 融合屬性
  • 高級(jí)屬性
• 常用的材質(zhì)
• • MeshBasicMaterial()
  • MeshDepthMaterial()
  • 聯(lián)合材質(zhì)createMultiMaterialObject ( geometry, materials: Array )
  • 法線材質(zhì)MeshNormalMaterial()
  • Lambert材質(zhì)MeshLambertMaterial()
  • Phong材質(zhì)MeshPhongMaterial()
  • 標(biāo)準(zhǔn)格材質(zhì)MeshStandardMaterial()
  • 物理材質(zhì)MeshPhysicalMaterial()
  • 線材質(zhì)LineMaterial()
• 效果示例

---

前言

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

---

材質(zhì)的常用屬性

基礎(chǔ)屬性

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

融合屬性

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

blending // 材質(zhì)與背景融合的方式blendSrc // 融合源blendDst // 融合目標(biāo)blendequation // 融合人透明度，結(jié)blendSrc，blendDst自定義融合方式blendSrcAplha // 為 blendSrc指定透明度blendDstAplha // 為 blendDst指定透明度

高級(jí)屬性

WebGL底層相關(guān)的一些參數(shù)，不常用

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

常用的材質(zhì)

MeshBasicMaterial()

一個(gè)以簡(jiǎn)單著色（平面或線框）方式來(lái)繪制幾何體的材質(zhì)。不受光照影響

• 具備一些自有屬性

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

MeshDepthMaterial()

按深度繪制幾何體的材質(zhì)。深度基于相機(jī)遠(yuǎn)近平面。白色最近，黑色最遠(yuǎn)，可以通過(guò)相機(jī)的near屬性和far屬性之間的差距決定場(chǎng)景的亮度和物體消失的速度。

聯(lián)合材質(zhì)createMultiMaterialObject ( geometry, materials: Array )

需要借助SceneUtils這個(gè)外部工具包

• geometry 幾何體
• materials 材質(zhì)數(shù)組

舉例

const cubeGeometry = new THREE.BoxGeometry(10, 10, 10);// 定義要聯(lián)合的兩種材質(zhì)const cubeMaterial = new THREE.MeshDepthMaterial();const colorMaterial = new THREE.MeshBasicMaterial({color: controls.color,transparent: true, // 當(dāng)材質(zhì)為MeshBasicMaterial時(shí)，需要設(shè)置，否則會(huì)出現(xiàn)一個(gè)純色物體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函數(shù)創(chuàng)建一個(gè)網(wǎng)格的時(shí)候，幾何體會(huì)被復(fù)制，返回一個(gè)Group，里面兩個(gè)網(wǎng)格完全相同,分布被賦予不同的材料。通過(guò)縮小MeshDepthMaterial材質(zhì)的網(wǎng)格，就可以避免畫面閃爍。方法如下：

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

法線材質(zhì)MeshNormalMaterial()

把法向量映射到RGB顏色的材質(zhì)

Lambert材質(zhì)MeshLambertMaterial()

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

Phong材質(zhì)MeshPhongMaterial()

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

標(biāo)準(zhǔn)格材質(zhì)MeshStandardMaterial()

使用物理上正確的模型計(jì)算表面材質(zhì)與光照的互動(dòng)。能夠更好地表現(xiàn)塑料質(zhì)感和金屬質(zhì)感

物理材質(zhì)MeshPhysicalMaterial()

MeshStandardMaterial的擴(kuò)展，能夠更好地控制反射率

線材質(zhì)LineMaterial()

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

效果示例

場(chǎng)景搭建見(jiàn)鏈接 threejs-場(chǎng)景創(chuàng)建（基于react-hooks）

const createGeo = () => {/*** 創(chuàng)建兩個(gè)法向量材質(zhì)的球和立方體*/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);/*** 創(chuàng)建一個(gè)指定材質(zhì)的立方體*/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);/*** 創(chuàng)建一個(gè)lambert材質(zhì)的立方體*/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);/*** 創(chuàng)建一個(gè)Phong材質(zhì)的立方體*/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);/*** 創(chuàng)建一個(gè)標(biāo)準(zhǔn)材質(zhì)的立方體*/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);/*** 創(chuàng)建一個(gè)物理材質(zhì)的立方體*/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);/*** 創(chuàng)建一個(gè)線材質(zhì)的立方體*/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)}

效果如下：

總結(jié)

以上是生活随笔為你收集整理的threejs-材质的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。