ThreeJs如何在Icosahedron二十面体表面添加Tetrahedron四面体结构

你现有基于IcosahedronGeometry的思路完全可行，不需要更换其他几何体，核心实现逻辑是遍历二十面体的每个三角面，在每个面的位置生成向外凸起的四面体即可，以下是具体实现步骤和可直接运行的代码：

步骤1：获取二十面体的面数据 #

你生成的细分二十面体每个面都是三角形，我们需要从几何体中提取每个面的三个顶点坐标、面法向，用来定位每个四面体的位置和朝向。

步骤2：生成四面体模板并批量实例化 #

直接生成数千个独立Mesh会严重影响性能，推荐用THREE.InstancedMesh做实例化渲染，只需要1个四面体模板几何体，就能批量渲染所有面的四面体，性能损耗极低。

// 1. 基础参数设置，可根据需求自行调整
const icoRadius = 1; // 二十面体半径，和你原有参数保持一致
const icoDetail = 4; // 细分等级，和你原有参数保持一致
const tetraHeight = 0.2; // 每个四面体的凸起高度
const tetraScale = 0.15; // 四面体底面的缩放比例

// 2. 生成基础二十面体几何体，提取面信息
const icoGeo = new THREE.IcosahedronGeometry(icoRadius, icoDetail);
const icoPos = icoGeo.attributes.position;

// 3. 创建四面体模板几何体
const tetraGeo = new THREE.TetrahedronGeometry(1);
// 调整模板比例，让底面适配二十面体的面大小
tetraGeo.scale(tetraScale, tetraHeight, tetraScale);
// 将模板的底面平移到y=0位置，方便后续对齐到二十面体的面
tetraGeo.translate(0, tetraHeight / 2, 0);

// 4. 初始化实例化网格，总实例数=三角形面数=顶点数/3
const instanceCount = icoPos.count / 3;
const instancedMesh = new THREE.InstancedMesh(tetraGeo, redMat, instanceCount);

// 5. 遍历每个面，计算对应四面体的位置和朝向
const dummy = new THREE.Object3D();
const center = new THREE.Vector3();
const upDir = new THREE.Vector3(0, 1, 0);

for (let i = 0; i < instanceCount; i++) {
  // 取当前面的三个顶点计算中心点
  const a = new THREE.Vector3().fromBufferAttribute(icoPos, i * 3);
  const b = new THREE.Vector3().fromBufferAttribute(icoPos, i * 3 + 1);
  const c = new THREE.Vector3().fromBufferAttribute(icoPos, i * 3 + 2);
  center.addVectors(a, b).add(c).divideScalar(3);
  
  // 设置四面体位置为当前面的中心点
  dummy.position.copy(center);
  // 设置四面体朝向：尖顶沿法向朝外（二十面体为中心在原点的凸几何体，中心点归一化方向即为面法向）
  dummy.quaternion.setFromUnitVectors(upDir, center.clone().normalize());
  // 保存当前实例的变换矩阵
  dummy.updateMatrix();
  instancedMesh.setMatrixAt(i, dummy.matrix);
}

// 6. 添加到场景即可
scene.add(instancedMesh);

// 如果你需要保留原有的实心二十面体作为基底，也可以同时添加
// const Icosah = new THREE.Mesh(icoGeo, redMat);
// scene.add(Icosah);

参数调整说明 #

• 如果觉得四面体大小不符合预期，调整tetraHeight和tetraScale两个参数即可
• 如果后续需要把所有四面体合并为单个几何体做其他处理，用BufferGeometryUtils.mergeBufferGeometries方法合并所有四面体的几何体即可，不需要实例化渲染也可以换成这种实现方式

内容的提问来源于stack exchange，提问作者TINTIN