让我们来看看 Three.js 中构成 3D 对象的三个关键元素：几何体、材质和网格。

什么是几何体？

几何体是定义 3D 物体形状的顶点、面和线的集合。简单来说，可以将其视为三维对象的 "骨架"。 请看下面的示例代码

// 创建一个自定义三角形
const geometry = new THREE.BufferGeometry()；

// 三角形顶点的坐标
const vertices = new Float32Array([
    -1.0, -1.0, 0.0, // v0
     1.0, -1.0, 0.0, // v1
     0.0, 1.0, 0.0 // v2
]);

// 将缓冲区属性分配给几何体
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3))；

基本几何类型

Three.js 提供的几何体类允许您创建各种基本形状。

// 方框
const boxGeometry = new THREE.BoxGeometry(width, height, depth)；

// 球体
const sphereGeometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments)；

// 平面
const planeGeometry = new THREE.PlaneGeometry(width, height)；

// 圆柱
const cylinderGeometry = new THREE.CylinderGeometry(radiusTop, radiusBottom, height)；

// 锥体
const coneGeometry = new THREE.ConeGeometry(radius, height)；

// 甜甜圈形状
const torusGeometry = new THREE.TorusGeometry(radius, tube, radialSegments)；

什么是材质？

材质定义了三维物体的外观。它包含决定物体外观的所有视觉属性，如颜色、透明度和纹理。我们使用以下关键属性

const material = new THREE.MeshStandardMaterial({)
    // 基本属性
    transparent: true, // 是否使用透明度
    opacity: 0.5, // 不透明度（0.0 到 1.0）
    side: THREE.DoubleSide, // 双面渲染
    visible: true, // 可见
    wireframe: false, // 线框模式

    // 颜色相关
    color: 0xff0000, // 默认颜色
    emissive: 0x000000, // 自发光颜色

    // 等等...
});

主要材质类型及其特性

1. 网格基本材质

这是最简单的材质，不受光照影响。它性能良好，适合简单应用。由于不需要进行光照计算，因此渲染速度最快。

2. 网格标准材质

一种使用基于物理的渲染（PBR）的材质。PBR 根据真实世界的物理原理模拟光线的相互作用，从而产生非常逼真的效果。 这使得渲染的计算成本比其他材质更高2。

3. 网格红光材质

MeshPhongMaterial 是一种非常适合表现光滑表面的材质。它使用 Phong 阴影模型来计算高光和反射，通常用于表现塑料或陶瓷等材质。

新的 THREE.MeshBasicMaterial({
  color: 颜色
  side: THREE.DoubleSide、
});
新的 THREE.MeshStandardMaterial({
  color: color、
  粗糙度：0.5、
  metalness: 0.5、
  side: THREE.DoubleSide、
}),
新的 THREE.MeshPhongMaterial({
  color: color、
  shininess: 60、
  specular: 0x444444、
  side: THREE.DoubleSide、
}),

贴图的基本概念和类型

材质使用各种贴图使物体的外观更加逼真和丰富。贴图提供了一种将纹理映射到三维物体表面的方法，每种贴图用于控制不同的视觉特性。

1. 贴图

应用基本颜色纹理的贴图。

const textureLoader = new THREE.TextureLoader()；
const colorTexture = textureLoader.load('hangyodon.avif')；

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

2. 法线贴图

表示表面细节的贴图。

const normalTexture = textureLoader.load('hangyodon.avif')；

const material = new THREE.MeshStandardMaterial({
    normalMap: normalTexture、
    normalScale: new THREE.Vector2(1, 1) // 调整法线贴图的强度
});

3. 粗糙度贴图

控制表面粗糙度的贴图。它被 MeshStandardMaterial 使用。

const roughnessTexture = textureLoader.load('hangyodon.avif');

const material = new THREE.MeshStandardMaterial({
    roughnessMap: roughnessTexture,
    roughness：1.0 // 默认粗糙度值
});

网格

现在，将作为骨架的 "几何体 "和定义外观的 "材质 "结合在一起的对象就是网格。Mesh 是一个继承自 Three.js 中 Object3D 的类，它创建了一个可以在三维空间中渲染的对象。

const geometry = new THREE.BoxGeometry(1, 1, 1)；
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })；
const mesh = new THREE.Mesh(geometry, material)；
scene.add(mesh)；

网格的属性和方法

位置。

// 设置位置
mesh.position.set(x, y, z)；
// 或
mesh.position.x = 1；
mesh.position.y = 2；
mesh.position.z = 3；

旋转

// 设置位置
mesh.position.set(x, y, z)；
// 或
mesh.position.x = 1；
mesh.position.y = 2；
mesh.position.z = 3；

缩放

// 设置缩放比例
mesh.scale.set(x, y, z)；
// 或
mesh.scale.x = 2; // 沿 x 轴缩放 2 倍
mesh.scale.y = 0.5; // 沿 Y 轴缩放 0.5
mesh.scale.z = 1; // Z 轴不变

总结

我们已经了解了 Three.js 的核心组件。我们使用 "几何体"（Geometry）来定义三维对象的形状，使用 "材质"（Material）来表达对象的视觉特性，而使用 "网格"（Mesh）则将两者结合起来，创建在屏幕上渲染的三维对象。

在本文中，我们通过一些基本示例介绍了核心概念，但 Three.js 的用途和功能远不止这些。

此外，由于 3D 图形的特性，更复杂的对象需要更多的计算资源。因此，在实际项目中，您需要牢记以下几点（否则会在手机上爆炸......）

• 保持合理的多边形数量
• 为不必要的对象释放内存

🔎 参考资料

• Three.js 文档