Three.js 第四天几何体顶点组设置

在 Three.js 中，我们可以通过设置顶点组来对几何体的不同部分应用不同的材质。这一功能在创建复杂模型时非常有用，比如一个由多种材质组成的机器人模型，我们可以为机器人的不同部件设置不同的顶点组，然后分别应用相应的材质。

索引值与顶点组

首先，我们需要定义几何体的顶点和索引。以一个简单的四边形为例，代码如下：

js 复制代码

// * 索引值绘制
const vertices = new Float32Array([
    -1.0, -1.0, 0,
    1.0, -1.0, 0,
    1.0, 1.0, 0.0,
    -1.0, 1.0, 0
]);
// * 创建索引
const indices = new Uint16Array([0, 1, 2, 2, 3, 0]);

上述代码中，vertices定义了四边形的四个顶点坐标，indices则定义了如何通过这些顶点来构建三角形面（在 WebGL 中，几何体通常由三角形组成）。

接下来，我们创建一个BufferGeometry对象，并将顶点和索引设置进去：

js 复制代码

const geometry = new THREE.BufferGeometry();
// * 创建索引属性
geometry.setIndex(new THREE.BufferAttribute(indices, 1));
// * 分三分 分别为x,y,z
geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));

这里，geometry.setIndex方法用于设置几何体的索引，geometry.setAttribute方法用于设置几何体的顶点位置属性。

设置顶点组

要设置顶点组，我们使用geometry.addGroup方法。该方法接受三个参数：

参数 1：从第几个索引开始。

参数 2：在第几个索引结束。

参数 3：材质的索引。

例如，我们将上述四边形的前三个顶点作为一个顶点组，后两个顶点作为另一个顶点组，并分别设置不同的材质索引：

js 复制代码

// * 设置顶点组，设置多个材质
geometry.addGroup(0, 3, 0);
geometry.addGroup(3, 5, 1);

这样，我们就将四边形的不同部分划分成了两个顶点组，并且为它们分别指定了材质索引。

多材质应用

设置好顶点组后，我们就可以为几何体应用多种材质了。在创建Mesh对象时，我们将材质以数组的形式传递进去。

创建材质

首先，创建不同的材质对象，例如：

js 复制代码

const material = new THREE.MeshBasicMaterial({
    color: 0x00ff00,
    wireframe: true
});
const material2 = new THREE.MeshBasicMaterial({
    color: 0xaaff22
});

这里创建了两种不同的材质，material是绿色的线框材质，material2是一种带有颜色的实心材质。

应用材质到网格

然后，创建Mesh对象并将几何体和材质数组传递进去：

js 复制代码

const cube = new THREE.Mesh(geometry, [material, material2]);

在这个例子中，cube这个网格对象会根据我们之前设置的顶点组，将material应用到第一个顶点组对应的部分，将material2应用到第二个顶点组对应的部分。

注意事项

如果在创建Mesh对象时只传递一个材质，那么整个几何体都会使用这个材质进行渲染。如果传递的材质数组长度小于顶点组的数量，那么超出材质数组范围的顶点组对应的面将不会被渲染。

例如，我们创建一个正方体并尝试为它的六个面分别应用不同的材质：

js 复制代码

const material = new THREE.MeshBasicMaterial({
    color: 0x00ff00,
    wireframe: true
});
const material2 = new THREE.MeshBasicMaterial({
    color: 0xaaff22
});
const material3 = new THREE.MeshBasicMaterial({
    color: 0xaabbcc
});
const material4 = new THREE.MeshBasicMaterial({
    color: 0xaaddee
});
const material5 = new THREE.MeshBasicMaterial({
    color: 0xaaffee
});
const material6 = new THREE.MeshBasicMaterial({
    color: 0xaa1234
});
const geometryBox = new THREE.BoxGeometry(1, 1, 1);
const cube1 = new THREE.Mesh(geometryBox, [
    material,
    material2,
    material3,
    material4,
    material5,
    material6
]);

在这个例子中，正方体的六个面会分别被渲染成不同的颜色。但如果我们只传递了四个材质，像这样：

js 复制代码

const cube1 = new THREE.Mesh(geometryBox, [
    material,
    material2,
    material3,
    material4
]);

那么正方体将只有四个面会被渲染，另外两个面将不会显示。

通过今天的学习，你已经掌握了如何在 Three.js 中设置几何体的顶点组以及应用多材质，这将为你创建更加丰富和复杂的 3D 场景打下坚实的基础。在后续的学习中，我们将继续探索 Three.js 的更多高级特性。