Javascript Three.js自定义楼梯几何图形

我正在尝试为圆形楼梯创建自己的自定义three.js几何体。但我一定是把步骤的顶点或索引弄错了

这是一个使用我的几何图形的示例楼梯

这是我的代码（错误的索引和顶点位于函数generateStepTops第177行、generateStepFronts第259行和generateStepSide第338行）

var渲染器、场景、摄影机、控件；
/**
* 
*@param{number}半径
*@param{number}holeRadius
*@param{number}段
*@param{number}角度
*@param{number}thetaStart
*@param{number}长度
*@param{number}stepTheta
*/
功能楼梯几何（半径、孔半径、分段、角度、起点、长度、步长）{
如果（！（此楼梯几何体实例））{
抛出new TypeError（“需要使用new调用StairsGeometry”）；
}
三、几何学。叫（这个）；
this.type='stairsgometry'；
此参数={
半径：半径，
霍雷拉迪乌斯：霍雷拉迪乌斯，
分段：分段，
角度:角度,，
恒星：恒星，
长度：长度，
斯捷普西塔：斯捷普西塔
};
这是从缓冲几何（新的楼梯缓冲几何（半径、孔半径、分段、角度、起点、长度、步长））；
这个.mergeVertices（）；
}
stairsgometry.prototype=Object.create（三个.Geometry.prototype）；
StairsGeometry.prototype.constructor=StairsGeometry；
/**
* 
*@param{number}半径
*@param{number}holeRadius
*@param{number}段
*@param{number}角度
*@param{number}thetaStart
*@param{number}长度
*@param{number}stepTheta
*/
功能楼梯缓冲区几何图形（半径、孔半径、分段、角度、起点、长度、步长）{
如果（！（此StairsBufferGeometry实例））{
抛出new TypeError（“需要使用new调用StairsBufferGeometry”）；
}
三,打电话,；
this.type='StairsBufferGeometry'；
这个参数={
半径：半径，
霍雷拉迪乌斯：霍雷拉迪乌斯，
分段：分段，
角度:角度,，
恒星：恒星，
长度：长度，
斯捷普西塔：斯捷普西塔
};
var范围=此；
半径=！isNaN（半径）？半径：20；
holeRadius=！isNaN（holeRadius）？holeRadius:20；
高度=！isNaN（高度）？高度：10；
分段=！isNaN（分段=数学楼层（分段））？分段：8；
角度=！isNaN（角度）？角度：Math.PI/8；
恒星=！isNaN（恒星）？恒星：0；
thetaLength=！isNaN（thetaLength）？thetaLength:Math.PI*2；
stepTheta=！isNaN（stepTheta）？stepTheta:Math.PI/18；
//缓冲区
var指数=[]；
var顶点=[]；
var法线=[]；
var-uvs=[]；
//辅助变量
var指数=0；
var indexArray=[]；
var圆周=长度*半径；
变量高度=周长*数学tan（角度）；
var stepSegments=Math.ceil（thetaLength/stepTheta）；
var stepThetaSegments=分段/分段；
var stepHeight=高度/阶梯段；
var halfStepHeight=stepHeight/2；
var-groupStart=0；
generateStepTops（）；
生成前端（）；
生成硫甙（真）；
生成硫甙（假）；
generateBottom（）；
生成侧（真）；
生成侧（假）；
generateEdge（真）；
generateEdge（假）；
这个.setIndex（索引）；
this.addAttribute（'position'，新的三个.Float32BufferAttribute（顶点，3））；
this.addAttribute（'normal'，新的三个.Float32BufferAttribute（normals，3））；
this.addAttribute（'uv'，新的三个.Float32BufferAttribute（uvs，2））；
函数生成器页面（isStart）{
var indexStart=指数；
var normal=new-THREE.Vector3（）；
var顶点=新的三个向量3（）；
varθ=θ星；
如果（！isStart）θ+=长度；
var sinTheta=数学sin（θ）；
var cosTheta=数学cos（θ）；
var startingHeight=halfStepHeight+（isStart？0：高度）-stepHeight；
对于（变量y=0；y<2；y++）{
对于（变量x=0；x<2；x++）{
var activeRadius=x==0？holeRadius:半径；
顶点.x=活动半径*sinTheta；
顶点y=起始高度+半高度*（y==0？-1:1）；
顶点z=活动半径*cosTheta；
顶点.push（顶点.x，顶点.y，顶点.z）；
normal.set（sinTheta，0，cosTheta）.normalize（）；
法线推动（法线.x，法线.y，法线.z）；
//紫外线
推（1-x，1-y）；
索引++；
}
}
var a=indexStart+0；
var b=indexStart+1；
var c=indexStart+3；
var d=indexStart+2；
//面孔
如果（isStart）{
指数推（a，b，d）；
指数推（b，c，d）；
}否则{
指数推（a，d，b）；
指数推（b，d，c）；
}
scope.addGroup（groupStart，6,0）；
//计算组的新起始值
groupStart+=6；
}
函数generateStepTops（）{
var indexStart=指数；
var normal=new-THREE.Vector3（）；
var顶点=新的三个向量3（）；
var-groupCount=0；
var activeTheta=thetaStart；
var-activeHeight=stepHeight；
//生成顶点、法线和UV
对于（var stepIndex=0；stepIndex，通过将楼梯长度（
thetaLength
）除以一步的长度（
stepTheta
）来计算步数

我假设，输入参数
segments
（在您的示例中为3）不是段的总数，而是楼梯一步的段数：

var stepThetaSegments = segments;
segments = stepSegments * stepThetaSegments;

此外，顶点索引中存在大量错位。一个大问题是楼梯的踏板和侧面必须分段平铺，但台阶的前部不必平铺。

要查看所有面，必须以相同的方向（逆时针方向）绘制所有基本体。请参见

请参阅下面代码段中更正的详细信息

预览：



var渲染器、场景、摄影机、控件；
/**
* 
*@param{number}半径
*@param{number}holeRadius
*@param{number}segmen
var stepThetaSegments = segments;
segments = stepSegments * stepThetaSegments;