3d 在webgl中绘制圆环体

我正在尝试使用webgl渲染圆环体。我正在使用第三方库，这使得这个过程更容易：我只需要声明各种顶点、它们的法线和它们的索引。3个索引的每个元组绘制一个三角形，顶点必须遵循右手规则

到目前为止，这就是我所拥有的：

 this.vertices = [];
        this.indices = [];
        this.normals = [];
        this.texCoords = [];

        let slices_angle = 0;
        let loops_angle = 0;
        let slices_delta = (2 * Math.PI) / this.slices;
        let loops_delta = (2 * Math.PI) / this.loops;
        let abc = 0;

        while (slices_angle < 2 * Math.PI + slices_delta) {
            let cos_slices = Math.cos(slices_angle);
            let sin_slices = Math.sin(slices_angle);
            let cos_loops = Math.cos(loops_angle);
            let sin_loops = Math.sin(loops_angle);

            while (loops_angle < 2 * Math.PI + loops_delta) {
                //   x=(R+r·cos(v))cos(w)
                //   y=(R+r·cos(v))sin(w)
                //             z=r.sin(v)

                let x = (this.outerRad + this.inner_rad * cos_slices) * cos_loops;
                let y = (this.outerRad + this.inner_rad * cos_slices) * sin_loops;
                let z = this.inner_rad * sin_slices;

                this.vertices.push(x, y, z);
                this.normals.push(x, y, z);

                // this.texCoords.push(j / this.slices);
                // this.texCoords.push(i / this.stacks);

                loops_angle += loops_delta;
            }

            slices_angle += slices_delta;
        }

        for (var i = 0; i < this.loops; i++) {
            let v1 = i * (this.slices + 1);
            let v2 = v1 + this.slices + 1;

            for (var j = 0; j < this.slices; j++) {

                this.indices.push(v1);
                this.indices.push(v2);
                this.indices.push(v1 + 1);

                this.indices.push(v1 + 1);
                this.indices.push(v2);
                this.indices.push(v2 + 1);

                v1++;
                v2++;
            }
        }

this.vertices=[]；
该指数为[]；
this.normals=[]；
this.texCoords=[]；
设切片_角=0；
设环_角=0；
让slices_delta=（2*Math.PI）/this.slices；
让loops_delta=（2*Math.PI）/this.loops；
设abc=0；
同时（切片角度<2*Math.PI+切片增量）{
设cos_slices=Math.cos（slices_angle）；
设sin_slices=Math.sin（slices_angle）；
设cos_loops=Math.cos（loops_angle）；
设sin_loops=Math.sin（loops_angle）；
while（循环角度<2*Math.PI+循环增量）{
//x=（R+R·cos（v））cos（w）
//y=（R+R·cos（v））sin（w）
//z=r.sin（v）
设x=（this.outerRad+this.inner_rad*cos_切片）*cos_循环；
设y=（this.outerRad+this.inner_rad*cos_切片）*sin_循环；
设z=this.inner_rad*sin_切片；
这个。顶点。推（x，y，z）；
这个.法线.推力（x，y，z）；
//this.texCoords.push（j/this.slices）；
//this.texCoords.push（i/this.stacks）；
回路_角度+=回路_增量；
}
切片_角度+=切片_三角形；
}
for（var i=0；i

为了声明顶点的坐标，我得到了这个网站的帮助，但是我在索引方面遇到了问题

---

代码一眼就看不出有多大意义。你有一个内环和外环

在内部循环中，此代码计算顶点

           let x = (this.outerRad + this.inner_rad * cos_slices) * cos_loops;
           let y = (this.outerRad + this.inner_rad * cos_slices) * sin_loops;
           let z = this.inner_rad * sin_slices;

           this.vertices.push(x, y, z);
           this.normals.push(x, y, z);

但这些计算在内部循环中没有任何变化

法线不能是x、y、z（与位置相同）

此外，还需要使循环+1和切片+1顶点。顶点从每个循环的顶点开始，切片将具有相同的位置，但不具有相同的纹理坐标

然后，就索引而言，每个切片都是（循环+1）顶点，因此我认为代码中的循环是向后的

如果是我，而不是基于角度的循环，我会基于循环和切片进行循环

for (slice = 0; slice < this.slices; ++slice) {
  for (loop = 0; loop < this.loops; ++loop) {
    ...

for（slice=0；slice

这是另一个版本

const o={
切片：8，
循环：20，
内弧度：0.5，
外层：2，
makeVerts（）{
this.vertices=[]；
该指数为[]；
this.normals=[]；
this.texCoords=[]；
对于（设slice=0；slice这并不是解决问题，但您的坐标计算部分有一个问题：您在外循环中计算
cos\u循环
和
sin\u循环
，但您正在使用内循环更改
loops\u角度
。作为一个简单的解决方案，您可以在外循环内将
loops\u角度
重置为0。），然后计算内部循环中的
cos\u循环
和
sin\u循环
。非常感谢！下次hehe时，我会更加关注我的代码