THREE.js使用ExtrudeGeometry拉伸2D图形时深度/高度不符合预期如何解决？

核心问题排查方向 #

• 移除冗余冲突代码
  你提供的代码中存在一行无效逻辑：const califorGeo = new THREE.ShapeGeometry(californiaShape);，其中californiaShape变量未在当前片段中定义。如果你的实际运行环境中该变量为已声明的全局形状对象，会导致形状计算冲突，引发挤压参数失效，直接删除该行即可。
• 修正形状顶点缠绕顺序
  Three.js的Shape对象默认要求顶点按逆时针顺序定义，你当前的顶点是顺时针排列，错误的缠绕顺序会导致挤压深度计算异常。可调整顶点顺序，或手动设置geoPointsShape.autoClose = true强制形状闭合。
• 排查父节点缩放叠加
  若生成的calMesh挂载到了设置过Z轴缩放的Group或Object3D父节点下，父级缩放会叠加到网格尺寸上，导致显示深度远大于设定的0.1。可通过console.log(calMesh.getWorldScale(new THREE.Vector3()))打印世界坐标系下的缩放值校验。
• 排除材质干扰
  如果你使用的globalMaterial配置了位移贴图、自定义着色器或特殊渲染模式，可能造成视觉厚度偏差，可先替换为普通MeshBasicMaterial测试定位问题。

修正后参考代码 #

const geoPoints = [];
// 调整为逆时针顶点顺序
geoPoints.push(new THREE.Vector2(1, 1));
geoPoints.push(new THREE.Vector2(1, -1));
geoPoints.push(new THREE.Vector2(-1, -1));
geoPoints.push(new THREE.Vector2(-1, 1));

const geoPointsShape = new THREE.Shape(geoPoints);
geoPointsShape.autoClose = true;

const extrudeSettings = {
  steps: 1,
  depth: 0.1,
  bevelEnabled: false,
};

const extrude = new THREE.ExtrudeGeometry(geoPointsShape, extrudeSettings);
// 临时用基础材质测试，排除材质影响
const testMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00, side: THREE.DoubleSide });
const calMesh = new THREE.Mesh(extrude, testMaterial);
// 直接挂载到根场景，避免父级缩放干扰
scene.add(calMesh);

异常效果参考 #

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