在 webgl 中绘制圆环

Question

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

\n\n

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

\n\n

 this.vertices = [];\n        this.indices = [];\n        this.normals = [];\n        this.texCoords = [];\n\n        let slices_angle = 0;\n        let loops_angle = 0;\n        let slices_delta = (2 * Math.PI) / this.slices;\n        let loops_delta = (2 * Math.PI) / this.loops;\n        let abc = 0;\n\n        while (slices_angle < 2 * Math.PI + slices_delta) {\n            let cos_slices = Math.cos(slices_angle);\n            let sin_slices = Math.sin(slices_angle);\n            let cos_loops = Math.cos(loops_angle);\n            let sin_loops = Math.sin(loops_angle);\n\n            while (loops_angle < 2 * Math.PI + loops_delta) {\n                //   x=(R+r\xc2\xb7cos(v))cos(w)\n                //   y=(R+r\xc2\xb7cos(v))sin(w)\n                //             z=r.sin(v)\n\n                let x = (this.outerRad + this.inner_rad * cos_slices) * cos_loops;\n                let y = (this.outerRad + this.inner_rad * cos_slices) * sin_loops;\n                let z = this.inner_rad * sin_slices;\n\n                this.vertices.push(x, y, z);\n                this.normals.push(x, y, z);\n\n                // this.texCoords.push(j / this.slices);\n                // this.texCoords.push(i / this.stacks);\n\n                loops_angle += loops_delta;\n            }\n\n            slices_angle += slices_delta;\n        }\n\n        for (var i = 0; i < this.loops; i++) {\n            let v1 = i * (this.slices + 1);\n            let v2 = v1 + this.slices + 1;\n\n            for (var j = 0; j < this.slices; j++) {\n\n                this.indices.push(v1);\n                this.indices.push(v2);\n                this.indices.push(v1 + 1);\n\n                this.indices.push(v1 + 1);\n                this.indices.push(v2);\n                this.indices.push(v2 + 1);\n\n                v1++;\n                v2++;\n            }\n        }\n

\n\n

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

\n\n

\n

Answer 1

该代码乍一看没有多大意义。你有一个内循环和外循环

\n\n

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

\n\n

           let x = (this.outerRad + this.inner_rad * cos_slices) * cos_loops;\n           let y = (this.outerRad + this.inner_rad * cos_slices) * sin_loops;\n           let z = this.inner_rad * sin_slices;\n\n           this.vertices.push(x, y, z);\n           this.normals.push(x, y, z);\n

\n\n

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

\n\n

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

\n\n

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

\n\n

然后，只要你的索引将每个切片作为 (loops + 1) 个顶点，所以我认为代码中的循环是向后的。

\n\n

如果是我，我不会根据角度进行循环，而是根据循环和切片进行循环

\n\n

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

\n\n

这是另一个版本

\n\n

\r\n

\r\n

           let x = (this.outerRad + this.inner_rad * cos_slices) * cos_loops;\n           let y = (this.outerRad + this.inner_rad * cos_slices) * sin_loops;\n           let z = this.inner_rad * sin_slices;\n\n           this.vertices.push(x, y, z);\n           this.normals.push(x, y, z);\n

\r\n

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

\r\n

\r\n

\r\n

\n