使用Three.js在WebGL中的环形几何体上进行非径向纹理映射 [英] Non-radial texture mapping over a ring geometry in WebGL using Three.js

问题描述

我正在尝试使用ThreeJS库在2D几何体上使用纹理来模拟图像变形效果.我想在空心圆(基本上是THREE.RingGeometry函数构建的圆环)上应用纹理图像，并获得该图像上显示的结果:

I am trying to simulate image deformation effects using textures over 2D geomtries using the ThreeJS library. I want to apply a texture image over a hollow circle (basically, a ring built by the THREE.RingGeometry function) and obtain the results shown at this image:

下面，我展示了我在实景环及其线框版本中在场景中获得的结果:

Following I show the results I am obtaining in my scene both for the solid ring and its wireframed version:

问题是，如您所见，纹理是从环的中心到外部以放射状方式应用的.但是，我真正需要的是以同心圆的方式应用纹理图像，如该问题的第一幅图像所示.

The problem is that, as you see, the texture is been applied in a radial way, from the center of the ring to the outside. However, what I really need is to apply the texture image on a concentric circle way, as shown in the first image of this question.

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

The idea is to produce a deformed version of the original texture over a ring shape. I would like to know how this effect can be programmatically achieved through Three.js in such a way that the destination shape can be any arbitrary 2D geometry .

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

Following, there is the relevant code I am using to draw my scene:

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);

推荐答案

您只需要像这样更改RingGeometry中的UV贴图:

You just need to change the UV mapping in RingGeometry like so:

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

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

Also, if you want to rotate the texture around the ring, you instantiate the RingGeometry by varying the thetaStart parameter:

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

three.js r.67

three.js r.67

这篇关于使用Three.js在WebGL中的环形几何体上进行非径向纹理映射的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！