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 而且是一个循环体出来的,但有的墙壁是"放倒"着的，有的墙壁是"站立"着的。经过多次尝试后总结发现只要extrudePath 和xy平面不是平行的，墙壁就是立着，但如果是平行于xy面，那么墙壁就是倒着的，猜测是因为Shape 本身就是个二维的，拉伸为ExtrudeGeometry时，应该是默认将其每个点的坐标作为了在xy平面上的坐标(或xy平面分量上的坐标)，而如果extrudePath 和xy面平行，也就没有了这个分量也就没法取这个值了？
不知道我这么理解对不对，应该怎么解决呢？

Answer 1

// 定义 Shape
const wallShape = new THREE.Shape(); 

// 旋转 Shape 使其面向 Z 轴正方向
wallShape.rotateZ(Math.PI / 2); 

// 添加 Shape 轮廓点
wallShape.moveTo(-3.5, -0.25);
wallShape.lineTo(3.5, -0.25);
//...其他点

// 构建拉伸路径 
const verticalPath = new THREE.CatmullRomCurve3(points);

// 旋转路径使其垂直 XY 平面
verticalPath.rotateX(Math.PI / 2);

// Extrude 设置
const extrudeSettings = {
  steps: 100,
  extrudePath: verticalPath  
};

// 创建几何体
const geometry = new THREE.ExtrudeGeometry(wallShape, extrudeSettings);

// 创建网格
const mesh = new THREE.Mesh(geometry);