Three.js 中的网格模型和三角形概念

建议先阅读完文章，再查看 实例代码

在 Three.js 中，网格模型 Mesh 是由多个三角形（面）组成的，这些三角形共同模拟了物体的表面。理解三角形的构成和渲染规则对于创建复杂的 3D 模型至关重要。

三角形（面）的基本概念

网格模型 Mesh 实际上是由许多三角形拼接构成的。在渲染过程中，几何体 BufferGeometry 中的顶点坐标每三个一组，形成一个三角形。多个这样的三角形组合起来，就能模拟出物体的表面。

三角形的正反面

在空间中，一个三角形有两个面：正面和反面。Three.js 中区分正反面的规则基于顶点的顺序：

• 正面：如果从眼睛（相机）的方向看去，顶点的顺序是逆时针的，则该面被视为正面。
• 反面：如果顶点的顺序是顺时针的，则该面被视为反面。

双面可见性

Three.js 中的材质默认只渲染正面。但是，可以通过设置材质的 side 属性来改变这一行为：

• THREE.FrontSide：默认设置，只有正面可见。
• THREE.BackSide：只有背面可见。
• THREE.DoubleSide：正面和反面都可见。

实例代码

以下是一个实例，展示如何创建一个自定义的 BufferGeometry，设置其顶点数据，并使用 Mesh 渲染出来。同时，我们将展示如何设置材质以实现双面可见。

// 初始化场景、相机和渲染器
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 geometry = new THREE.BufferGeometry();
const vertices = new Float32Array([
    -1, -1, 0, // 顶点1
     1, -1, 0, // 顶点2
     0,  1, 0  // 顶点3
]);
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));

// 添加索引以形成三角形
const indices = [0, 1, 2];
geometry.setIndex(indices);

// 创建材质
const material = new THREE.MeshBasicMaterial({
    color: 0x0000ff, // 材质颜色
    side: THREE.DoubleSide // 双面可见
});

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

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

// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

在这个实例中，我们首先创建了一个包含三个顶点的 BufferGeometry 对象，并为这些顶点设置了位置属性。然后，我们为几何体添加了索引，以指示哪些顶点应该组成一个三角形。接着，我们创建了一个 MeshBasicMaterial 材质，并将其 side 属性设置为 THREE.DoubleSide，以确保三角形的正面和反面都是可见的。最后，我们创建了一个 Mesh 对象，将其添加到场景中，并启动了渲染循环。