three.js - threejs 中 ExtrudeGeometry 几何体 需要的 Shape 怎么确定 方向？

Question

threejs 通过 THREE.ExtrudeGeometry 创建多个几何体作为墙壁，结果发现创建的几何体方向不一致，问题部分代码如下：

    const wallShape = new THREE.Shape()    wallShape.moveTo(-3.5,-0.25);    wallShape.lineTo(3.5,-0.25)    wallShape.lineTo(3.5,0.25)    wallShape.lineTo(-3.5,0.25)    wallShape.lineTo(-3.5,-0.25)    let wallArr=[]    let timearr=GridHelperObj.vertexs.map(item=>{        return new THREE.Vector3(item.x,3.5,-item.z)    })    timearr.forEach((item,index)=>{        let str=item        let end=index!=timearr.length-1?timearr[index+1]:timearr[0]        const closedSpline=new THREE.CatmullRomCurve3([str,end]);        const extrudesetting={            steps:100,            bevelEnabled:false,            extrudePath:closedSpline        }        var wallgeometry = new THREE.ExtrudeGeometry(wallShape, extrudesetting);        var wallmaterial = new THREE.MeshBasicMaterial({ color: 0x999999 });        let timeobj=new THREE.Mesh(wallgeometry, wallmaterial)        wallArr.push(timeobj)    })    const group = new THREE.Group();    group.add(...wallArr)    group.add(        flootmesh    );    return group;

效果如下：

明明是利用同一个 Shape 而且是一个循环体出来的，为什么有的墙壁是"倒"着的，有的墙壁是"立"着的？应该怎么解决呢？？ PS:不支持换其他方案，最好是不换方案解决问题的思路

Answer 1

ExtrudeGeometry 在处理形状方向的问题上有一个默认的行为，那就是它总是从形状的底部向顶部挤压。也就是说，形状的底部是最低点，顶部是最高点。如果形状在三维空间中是反转的（即，"倒"着的），ExtrudeGeometry 也会反转挤压的方向。

在你的代码中，你使用了 THREE.CatmullRomCurve3 来生成路径，然后将这个路径传递给 ExtrudeGeometry。然而，CatmullRomCurve3 生成的曲线是关于起点的对称的，也就是说，如果你改变路径的起点，那么生成的形状可能会是反转的。

解决这个问题的一个方法是确保你的路径是单向的，也就是说，如果你沿着路径走，你会始终看到形状的前面。你可以通过调整 CatmullRomCurve3 的起点和终点来达到这个效果。

另外，如果你的墙壁需要一个特定的方向，你可能需要手动反转你的形状或者在创建形状之后使用 THREE.ShapeUtils.reverse() 函数来反转形状。

在你的代码中，你可以在创建 wallShape 之后添加以下代码来反转形状：

wallShape = THREE.ShapeUtils.reverse(wallShape);

这将会使得形状的方向和预期一致。