ThreeJS ExtrudeGeometry无法创建孔洞问题求助

嘿，太懂这种在ExtrudeGeometry里加孔洞却死活不出来的挫败感了！看你贴的代码，问题大概率出在这几个地方：孔洞路径的方向不对、没把孔洞加到形状的holes数组里，或者路径没正确闭合。我给你整理了完整的正确实现，你可以照着改：

核心问题说明 #

Three.js对形状和孔洞的**缠绕顺序（winding order）**有严格要求：基础形状和孔洞的路径方向必须相反（比如基础形状是逆时针，孔洞就得是顺时针，反之亦然），否则渲染引擎会把孔洞当成外部形状处理，自然就看不到孔洞效果了。另外，一定要把孔洞路径添加到shape.holes数组里，不然程序根本不知道这是个孔洞！

完整可运行代码示例 #

// 先搭好基础的Three.js环境（这部分你可能已经有了，但加上更完整）
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 options = {
  depth: 5, // 挤出的厚度
  bevelEnabled: false // 先关闭倒角，避免干扰孔洞效果
};

// 绘制带孔洞的形状
function drawShape() {
  // 创建基础形状（逆时针方向绘制）
  const shape = new THREE.Shape();
  shape.moveTo(10, 10);
  shape.lineTo(10, 40);
  shape.lineTo(30, 40);
  shape.lineTo(30, 10);
  shape.closePath(); // 显式闭合路径，更稳妥

  // 创建孔洞路径（顺时针方向，和基础形状相反）
  const hole1 = new THREE.Path();
  hole1.moveTo(15, 15);
  hole1.lineTo(25, 15);
  hole1.lineTo(25, 25);
  hole1.lineTo(15, 25);
  hole1.closePath(); // 闭合孔洞路径

  // 把孔洞添加到形状的holes数组里！这步千万别忘
  shape.holes.push(hole1);

  return shape;
}

// 创建挤出网格并添加到场景
const extrudedMesh = new THREE.Mesh(
  new THREE.ExtrudeGeometry(drawShape(), options),
  new THREE.MeshLambertMaterial({ color: 0x593788 })
);
scene.add(extrudedMesh);

// 添加光源，不然Lambert材质看不到颜色
const light = new THREE.PointLight(0xffffff);
light.position.set(50, 50, 50);
scene.add(light);

// 调整相机位置，确保能看到物体
camera.position.z = 100;

// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  extrudedMesh.rotation.x += 0.01;
  extrudedMesh.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

关键注意点 #

• 缠绕顺序：基础形状和孔洞的方向必须相反，你可以通过调整lineTo的顺序改变方向，或者用path.reverse()直接反转路径方向
• 添加holes数组：一定要执行shape.holes.push(holePath)，否则孔洞不会被程序识别
• 闭合路径：用closePath()显式闭合路径比手动画回起点更可靠，能避免路径不闭合导致的渲染异常
• 简化测试：先关闭bevelEnabled，等孔洞显示正常后再开启倒角，避免倒角参数干扰孔洞渲染

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