ThreeJS triangulateShape返回null，自定义形状生成失败求助

API 探路者

2026-5-26

我来帮你搞定这个triangulateShape返回null的问题，我之前用ThreeJS做自定义形状时也踩过这个坑！

问题出在哪？

THREE.ShapeUtils.triangulateShape() 本质是个2D图形三角化工具，它只认二维坐标，你传入的是带z轴的三维点，函数直接无法处理，所以返回null。另外要确认你的点是按顺时针/逆时针的闭合顺序排列的（你的点顺序没问题，是标准的正方形顶点顺序）。

修复步骤&代码示例

核心就是把三维点转换成二维坐标，再给triangulateShape处理：

// 你的原始顶点数据
const vertexStrings = ["-1 0 1", "-1 0 -1", "1 0 -1", "1 0 1"];

// 第一步：把字符串转成ThreeJS的三维向量（方便后续操作）
const points3D = vertexStrings.map(str => {
  const [x, y, z] = str.split(' ').map(parseFloat);
  return new THREE.Vector3(x, y, z);
});

// 第二步：提取二维坐标——因为所有点的y值都是0，形状在XZ平面上，所以取x和z作为2D坐标
const points2D = points3D.map(v => new THREE.Vector2(v.x, v.z));

// 第三步：调用三角化函数，第二个参数是孔洞数组，这里没有孔洞就传空数组
const faces = THREE.ShapeUtils.triangulateShape(points2D, []);

console.log(faces); // 这时候就能得到你预期的 [[0,1,2], [0,2,3]] 啦！

// 第四步：把三角面加到Geometry里（如果需要渲染的话）
const geometry = new THREE.Geometry();
geometry.vertices = points3D;
// 逐个添加三角面
faces.forEach(indices => {
  geometry.faces.push(new THREE.Face3(...indices));
});
geometry.computeFaceNormals(); // 别忘了计算法线，不然渲染出来可能是黑的