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

Question

我正在尝试使用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);

Answer 1

您只需更改RingGeometry中的UV映射，如下所示：

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

此外，如果要围绕环旋转纹理，可以通过更改RingGeometry参数来实例化thetaStart：

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

three.js r.67