使用 Three.js 在 WebGL 中的环形几何上进行非径向纹理映射答案

【问题标题】：Non-radial texture mapping over a ring geometry in WebGL using Three.js使用 Three.js 在 WebGL 中的环形几何上进行非径向纹理映射
【发布时间】：2014-07-01 06:49:24
【问题描述】：

我正在尝试使用 ThreeJS 库在 2D 几何图形上使用纹理来模拟图像变形效果。我想在空心圆上应用纹理图像（基本上是由 THREE.RingGeometry 函数构建的环）并获得此图像所示的结果：

接下来我展示了我在场景中获得的实心环及其线框版本的结果：

问题在于，如您所见，纹理是以径向方式应用的，从环的中心到外部。但是，我真正需要的是以同心圆方式应用纹理图像，如本问题的第一张图片所示。

这个想法是在环形上生成原始纹理的变形版本。我想知道如何通过 Three.js 以编程方式实现这种效果，使目标形状可以是任意 2D 几何图形。

以下是我用来绘制场景的相关代码：

var texture = THREE.ImageUtils.loadTexture('./images/texture.png');

var wireRing = new THREE.Mesh(new THREE.RingGeometry(10, 20, 50, 5, 0, Math.PI * 2), new THREE.MeshBasicMaterial({map: texture, wireframe: true}));
wireRing.position.set(-25, 50, 0);
scene.add(wireRing);

var ring = new THREE.Mesh(new THREE.RingGeometry(10, 20, 50, 5, 0, Math.PI * 2), new THREE.MeshBasicMaterial({map: texture}));
ring.position.set(25, 50, 0);
scene.add(ring);

【问题讨论】：

到目前为止你有什么代码？您可以编辑您的问题以添加您的代码吗？
您好，感谢您的回复。我已更新消息以显示我用于绘制场景的相关代码部分。整个html文件和其他资源发布在dropbox.com/s/6t097e1y0utcenh/Code.zip
我建议您将代码下载到three.js 并查看RingGeometry 函数。听起来您只想交换纹理坐标。基本上是RingGeometry.js 中的第 32 行。交换逗号周围的 2 个部分。要么将图像旋转 90 度。
嗨@gman，感谢您的评论。我已经按照您的建议修改了 RingGeometry 函数，但没有成功。纹理映射仍然是径向的，但看起来是旋转的。当纹理图像旋转 90 度时也会发生这种情况。我很确定这与 UV 配置有关，但找不到解决方法。 :S

标签： opengl-es three.js mapping textures

【解决方案1】：

您只需要像这样更改RingGeometry 中的 UV 映射：

uvs.push( new THREE.Vector2( o / thetaSegments, i / phiSegments ) );

另外，如果你想围绕圆环旋转纹理，你可以通过改变thetaStart 参数来实例化RingGeometry：

var geometry = new THREE.RingGeometry( 10, 20, 50, 5, thetaStart, Math.PI * 2 );

three.js r.67

【讨论】：

非常感谢@WestLangley，您的解决方案确实非常适合戒指！只是最后一个问题......如果不需要公共平面映射，则应始终针对使用的任何几何体修改 UV 映射？如果目标几何体有任何其他通用形状怎么办？
任何其他几何形状？你问的很多，不是吗？