ThreeJS入门（025）：THREE.MeshStandardMaterial 知识详解，示例代码

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，webgl，ThreeJS，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

查看本专栏目录 - 本文是第 025篇入门文章

THREE.MeshStandardMaterial 是 Three.js 中的一种高级材质类型，用于模拟基于物理的渲染（PBR，Physically Based Rendering）。这种材质类型采用了金属度-粗糙度（Metalness-Roughness）工作流，能够更好地模拟现实世界的光照和表面属性，适用于渲染金属、石头、木材等具有复杂表面特性的物体。

构造函数

构造函数 new THREE.MeshStandardMaterial(parameters) 接受一个包含材质属性的对象参数 parameters。

常用属性

THREE.MeshStandardMaterial 继承自 THREE.Material，并具有一些特定的属性，可以用来控制材质的外观：

• color：基础颜色，默认为白色（0xffffff）。可以是一个整数，表示十六进制颜色值。
• map：基础颜色贴图，可以用来替代材质的颜色。可以是一个 THREE.Texture 对象。
• roughness：粗糙度，默认为 0.5。粗糙度定义了表面的光滑程度，数值越高，表面越粗糙。
• roughnessMap：粗糙度贴图，可以用来定义表面的粗糙度变化。可以是一个 THREE.Texture 对象。
• metalness：金属度，默认为 0.5。金属度定义了表面的金属程度，数值越高，表面越像金属。
• metalnessMap：金属度贴图，可以用来定义表面的金属度变化。可以是一个 THREE.Texture 对象。
• emissive：自发光颜色，默认为黑色（0x000000）。即使在没有光源的情况下，也会显示这个颜色。
• emissiveMap：自发光贴图，可以用来定义自发光的颜色。可以是一个 THREE.Texture 对象。
• normalMap：法线贴图，可以用来模拟表面细节。可以是一个 THREE.Texture 对象。
• normalScale：法线贴图的比例，默认为 Vector2(1, 1)。
• bumpMap：凹凸贴图，可以用来模拟表面细节。可以是一个 THREE.Texture 对象。
• bumpScale：凹凸贴图的比例，默认为 1。
• displacementMap：置换贴图，可以用来改变表面的高度。可以是一个 THREE.Texture 对象。
• displacementScale：置换贴图的比例，默认为 1。
• displacementBias：置换贴图的偏移，默认为 0。
• alphaMap：透明度贴图，可以用来定义材质的透明度。可以是一个 THREE.Texture 对象。
• opacity：材质的全局透明度，默认为 1（不透明）。
• transparent：是否开启透明模式，默认为 false。如果设置为 true，则需要设置 opacity 或者使用 alphaMap。
• side：指定材质在哪一面渲染，可以是 THREE.FrontSide（正面）、THREE.BackSide（背面）或 THREE.DoubleSide（双面）。
• wireframe：是否启用线框模式，默认为 false。
• visible：是否渲染该材质，默认为 true。
• depthTest：是否进行深度测试，默认为 true。
• depthWrite：是否写入深度缓冲区，默认为 true。
• blending：混合模式，默认为 THREE.NormalBlending。可以设置为 THREE.AdditiveBlending、THREE.SubtractiveBlending 等。
• vertexColors：是否启用顶点颜色，默认为 THREE.NoColors。可以设置为 THREE.VertexBasicColors、THREE.VertexColors 或 THREE.FaceColors。
• flatShading：是否使用平滑着色，默认为 false。如果设置为 true，则每个面片都将使用平均法线。
• envMap：环境贴图，可以用来模拟环境光照。可以是一个 THREE.Texture 对象。
• reflectivity：环境光反射率，默认为 1。
• refractionRatio：折射率，默认为 0.98。
• combine：环境贴图的组合方式，默认为 THREE.MixOperation。

示例

下面是一个简单的示例，展示了如何使用 THREE.MeshStandardMaterial 创建一个带有基础颜色贴图、金属度和粗糙度效果的网格对象：

// 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);

// 加载基础颜色贴图
const textureLoader = new THREE.TextureLoader();
const colorTexture = textureLoader.load('path/to/color_texture.jpg');

// 创建 MeshStandardMaterial
const material = new THREE.MeshStandardMaterial({
  map: colorTexture,
  color: 0xffffff, // 基础颜色
  emissive: 0x000000, // 自发光颜色
  metalness: 0.5, // 金属度
  roughness: 0.5, // 粗糙度
  side: THREE.DoubleSide // 双面渲染
});

// 创建网格对象
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

使用颜色贴图

THREE.MeshStandardMaterial 可以使用颜色贴图来替代材质的颜色。只需要设置 map 属性即可。

// 创建 MeshStandardMaterial
const material = new THREE.MeshStandardMaterial({
  map: colorTexture
});

使用透明度贴图

如果需要根据贴图来定义每个像素的透明度，可以使用 alphaMap 属性。

// 加载透明度贴图
const alphaTexture = textureLoader.load('path/to/alpha_texture.png');

// 创建 MeshStandardMaterial
const material = new THREE.MeshStandardMaterial({
  map: colorTexture,
  alphaMap: alphaTexture,
  transparent: true
});

使用自发光贴图

自发光贴图可以让材质在没有光源的情况下仍然发光。

// 加载自发光贴图
const emissiveTexture = textureLoader.load('path/to/emissive_texture.png');

// 创建 MeshStandardMaterial
const material = new THREE.MeshStandardMaterial({
  emissiveMap: emissiveTexture
});

使用金属度和粗糙度

THREE.MeshStandardMaterial 可以通过设置 metalness 和 roughness 属性来模拟金属和非金属表面的外观。

// 创建 MeshStandardMaterial
const material = new THREE.MeshStandardMaterial({
  color: 0xffffff,
  metalness: 1, // 金属度
  roughness: 0.1 // 较低的粗糙度
});

使用金属度贴图和粗糙度贴图

金属度贴图和粗糙度贴图可以用来定义表面的不同区域的金属度和粗糙度。

// 加载金属度贴图
const metalnessTexture = textureLoader.load('path/to/metalness_texture.jpg');

// 加载粗糙度贴图
const roughnessTexture = textureLoader.load('path/to/roughness_texture.jpg');

// 创建 MeshStandardMaterial
const material = new THREE.MeshStandardMaterial({
  map: colorTexture,
  metalnessMap: metalnessTexture,
  roughnessMap: roughnessTexture
});

使用法线贴图

法线贴图可以用来模拟表面细节，使物体表面看起来更加复杂。

// 加载法线贴图
const normalTexture = textureLoader.load('path/to/normal_texture.jpg');

// 创建 MeshStandardMaterial
const material = new THREE.MeshStandardMaterial({
  map: colorTexture,
  normalMap: normalTexture,
  normalScale: new THREE.Vector2(1, 1)
});

使用凹凸贴图

凹凸贴图可以用来模拟表面细节，使物体表面看起来更加复杂。

// 加载凹凸贴图
const bumpTexture = textureLoader.load('path/to/bump_texture.jpg');

// 创建 MeshStandardMaterial
const material = new THREE.MeshStandardMaterial({
  map: colorTexture,
  bumpMap: bumpTexture,
  bumpScale: 0.05
});

使用置换贴图

置换贴图可以用来改变表面的高度，从而实现更真实的表面细节。

// 加载置换贴图
const displacementTexture = textureLoader.load('path/to/displacement_texture.jpg');

// 创建 MeshStandardMaterial
const material = new THREE.MeshStandardMaterial({
  map: colorTexture,
  displacementMap: displacementTexture,
  displacementScale: 0.1,
  displacementBias: 0.0
});

使用环境贴图

环境贴图可以用来模拟环境光照效果，让物体表面显得更加自然。

// 加载环境贴图
const environmentTextureLoader = new THREE.TextureLoader();
const environmentTexture = environmentTextureLoader.load('path/to/environment_texture.jpg');
environmentTexture.mapping = THREE.CubeRefractionMapping;

// 创建 MeshStandardMaterial
const material = new THREE.MeshStandardMaterial({
  map: colorTexture,
  envMap: environmentTexture,
  reflectivity: 0.5
});

使用线框模式

如果需要渲染网格的线框，可以启用 wireframe 属性。

// 创建 MeshStandardMaterial
const material = new THREE.MeshStandardMaterial({
  wireframe: true
});

// 创建网格对象
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

总结

THREE.MeshStandardMaterial 是一种用于模拟基于物理的渲染（PBR）的材质类型，适用于需要模拟复杂表面特性的场景。通过调整其属性，可以实现不同的视觉效果，如使用颜色贴图、透明度贴图、自发光贴图、金属度贴图、粗糙度贴图、法线贴图、凹凸贴图、置换贴图以及环境贴图等。这种材质非常适合用于模拟金属、石头、木材等具有复杂表面特性的物体。通过合理的配置，可以使得场景中的物体看起来更加真实和自然。