Matarialize中文社区-Three.js 框架中的常量—

Three.js 框架中的常量——Material Constants 使用详解

少陵野老 2024-10-17 21:21:32

57 Material Constants 专栏

在 Three.js 中，Material（材质）是定义物体如何与光线和环境进行交互的核心组件。材质的配置直接影响三维模型的视觉效果，例如其颜色、透明度、光泽度等。为了让开发者更灵活地控制材质属性，Three.js 提供了一系列的常量，用于设置材质的各种属性。

本文将详细介绍 Three.js 中的材质常量（Material Constants），包括如何使用这些常量控制材质的渲染效果，并通过大量代码示例展示它们的实际应用。

1. Material Constants 概述

Three.js 中的材质常量主要用于控制材质的渲染效果、遮罩方式、光照模式以及其他视觉效果。主要常量包括：

side 常量：用于控制物体的渲染方向（正面、背面或双面渲染）。
blending 常量：用于定义材质的混合模式。
depth 常量：控制深度测试（Depth Test）和深度写入（Depth Write）的行为。
shading 常量：用于选择着色器的类型。
polygonOffset 常量：用于控制多边形偏移。
alpha 常量：用于设置材质的透明度属性。

在使用材质常量时，我们通常会将这些常量与材质的构造函数或属性一同使用，进一步自定义模型的渲染效果。

2. 常用 Material Constants 详解

2.1 `THREE.FrontSide`、`THREE.BackSide` 和 `THREE.DoubleSide`

这些常量用于控制物体的渲染方向：

THREE.FrontSide：只渲染物体的正面。
THREE.BackSide：只渲染物体的背面。
THREE.DoubleSide：同时渲染物体的正面和背面。

示例：

const geometry = new THREE.BoxGeometry();
const materialFront = new THREE.MeshBasicMaterial({ 
  color: 0xff0000, 
  side: THREE.FrontSide 
});
const materialBack = new THREE.MeshBasicMaterial({ 
  color: 0x0000ff, 
  side: THREE.BackSide 
});
const materialDouble = new THREE.MeshBasicMaterial({ 
  color: 0x00ff00, 
  side: THREE.DoubleSide 
});

const cubeFront = new THREE.Mesh(geometry, materialFront);
const cubeBack = new THREE.Mesh(geometry, materialBack);
const cubeDouble = new THREE.Mesh(geometry, materialDouble);

cubeFront.position.x = -3;
cubeBack.position.x = 0;
cubeDouble.position.x = 3;

scene.add(cubeFront);
scene.add(cubeBack);
scene.add(cubeDouble);

在这个示例中，三个立方体分别使用了 FrontSide、BackSide 和 DoubleSide。cubeFront 只渲染正面，cubeBack 只渲染背面，而 cubeDouble 则同时渲染正面和背面。

2.2 `THREE.NormalBlending`、`THREE.AdditiveBlending` 和 `THREE.SubtractiveBlending`

这些常量用于定义材质的混合模式：

THREE.NormalBlending：默认的混合模式，源颜色会覆盖目标颜色。
THREE.AdditiveBlending：源颜色与目标颜色相加，通常用于光效叠加。
THREE.SubtractiveBlending：源颜色从目标颜色中减去，通常用于消光效果。

示例：

const geometry = new THREE.SphereGeometry(1, 32, 32);
const materialNormal = new THREE.MeshBasicMaterial({ 
  color: 0xff0000, 
  blending: THREE.NormalBlending, 
  transparent: true, 
  opacity: 0.7 
});
const materialAdditive = new THREE.MeshBasicMaterial({ 
  color: 0x00ff00, 
  blending: THREE.AdditiveBlending, 
  transparent: true, 
  opacity: 0.7 
});
const materialSubtractive = new THREE.MeshBasicMaterial({ 
  color: 0x0000ff, 
  blending: THREE.SubtractiveBlending, 
  transparent: true, 
  opacity: 0.7 
});

const sphereNormal = new THREE.Mesh(geometry, materialNormal);
const sphereAdditive = new THREE.Mesh(geometry, materialAdditive);
const sphereSubtractive = new THREE.Mesh(geometry, materialSubtractive);

sphereNormal.position.x = -3;
sphereAdditive.position.x = 0;
sphereSubtractive.position.x = 3;

scene.add(sphereNormal);
scene.add(sphereAdditive);
scene.add(sphereSubtractive);

在这个示例中，我们使用了三种不同的混合模式来渲染三个球体。sphereNormal 使用了默认混合模式，sphereAdditive 使用了叠加模式，而 sphereSubtractive 则使用了减法模式。

2.3 `THREE.NeverDepth`、`THREE.LessDepth` 和 `THREE.AlwaysDepth`

这些常量用于控制深度测试，决定如何处理物体在深度缓冲区中的深度值：

THREE.NeverDepth：永远不通过深度测试。
THREE.LessDepth：深度较小的物体优先渲染。
THREE.AlwaysDepth：无条件通过深度测试，覆盖所有物体。

示例：

const geometry = new THREE.PlaneGeometry(5, 5);
const materialDepthNever = new THREE.MeshBasicMaterial({ 
  color: 0xff0000, 
  depthTest: true, 
  depthFunc: THREE.NeverDepth 
});
const materialDepthLess = new THREE.MeshBasicMaterial({ 
  color: 0x00ff00, 
  depthTest: true, 
  depthFunc: THREE.LessDepth 
});
const materialDepthAlways = new THREE.MeshBasicMaterial({ 
  color: 0x0000ff, 
  depthTest: true, 
  depthFunc: THREE.AlwaysDepth 
});

const planeNever = new THREE.Mesh(geometry, materialDepthNever);
const planeLess = new THREE.Mesh(geometry, materialDepthLess);
const planeAlways = new THREE.Mesh(geometry, materialDepthAlways);

planeNever.position.z = -1;
planeLess.position.z = 0;
planeAlways.position.z = 1;

scene.add(planeNever);
scene.add(planeLess);
scene.add(planeAlways);

在这个示例中，planeNever 从不通过深度测试，因此它不会遮挡其他物体，planeLess 使用标准深度测试，planeAlways 总是渲染在所有物体的前面。

2.4 `THREE.SmoothShading` 和 `THREE.FlatShading`

这两个常量用于选择材质的着色模式：

THREE.SmoothShading：平滑着色，顶点的法线会进行插值，产生光滑的视觉效果。
THREE.FlatShading：平面着色，每个多边形的法线不会插值，产生硬边效果。

示例：

const geometry = new THREE.IcosahedronGeometry(1, 0);
const materialSmooth = new THREE.MeshPhongMaterial({ 
  color: 0xff0000, 
  shading: THREE.SmoothShading 
});
const materialFlat = new THREE.MeshPhongMaterial({ 
  color: 0x0000ff, 
  shading: THREE.FlatShading 
});

const icosahedronSmooth = new THREE.Mesh(geometry, materialSmooth);
const icosahedronFlat = new THREE.Mesh(geometry, materialFlat);

icosahedronSmooth.position.x = -2;
icosahedronFlat.position.x = 2;

scene.add(icosahedronSmooth);
scene.add(icosahedronFlat);

在这个示例中，icosahedronSmooth 使用平滑着色，光线效果在多边形之间平滑过渡，而 icosahedronFlat 使用平面着色，产生硬边效果。

2.5 `THREE.NoBlending`、`THREE.CustomBlending` 和 `THREE.MultiplyBlending`

这些常量用于控制材质的混合模式：

THREE.NoBlending：禁用混合效果。
THREE.CustomBlending：允许自定义混合模式。
THREE.MultiplyBlending：源颜色与目标颜色相乘，通常用于暗化效果。

示例：

const geometry = new THREE.TorusGeometry(1, 0.3, 16, 100);
const materialNoBlending = new THREE.MeshBasicMaterial({ 
  color: 0xffff00, 
  blending: THREE.NoBlending 
});
const materialMultiplyBlending = new THREE.MeshBasicMaterial({ 
  color: 0x00ffff, 
  blending: THREE.MultiplyBlending, 
  transparent: true, 
  opacity: 0.8 
});

const torusNoBlending = new THREE.Mesh(geometry, materialNoBlending);
const torusMultiplyBlending = new THREE.Mesh(geometry, materialMultiplyBlending);

torusNoBlending.position.x = -2;
torusMultiplyBlending.position.x = 2;

scene.add(torusNoBlending);
scene.add(torusMultiplyBlending);

在这个示例中，torusNoBlending 没有使用任何混合效果，而 torusMultiplyBlending 使用了相乘混合效果。

3. 综合示例：使用常量创建场景

我们可以将上述的常量结合起来，创建一个更复杂的 Three.js 场景：

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 材质
const materials = [
  new THREE.MeshBasicMaterial({ color: 0xff0000, side: THREE.DoubleSide }),
  new THREE.MeshStandardMaterial({ color: 0x00ff00, roughness: 0.5 }),
  new THREE.MeshPhongMaterial({ color: 0x0000ff, shading: THREE.SmoothShading })
];

// 几何体
const geometries = [
  new THREE.BoxGeometry(),
  new THREE.SphereGeometry(1, 32, 32),
  new THREE.IcosahedronGeometry(1, 0)
];

// 添加网格
for (let i = 0; i < materials.length; i++) {
  const mesh = new THREE.Mesh(geometries[i], materials[i]);
  mesh.position.x = (i - 1) * 2;
  scene.add(mesh);
}

// 光源
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 1).normalize();
scene.add(light);

// 相机位置
camera.position.z = 5;

// 动画循环
function animate() {
  requestAnimationFrame(animate);
  scene.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

在这个综合示例中，我们创建了一个 Three.js 场景，并使用不同的材质常量为多个几何体设置了不同的渲染效果。通过动画循环，我们实现了持续的旋转效果，展示了这些材质常量的动态表现。