Question

我正在尝试将纹理应用于three.js r67中的ringGeometry。我无法正确地获得纹理。我想将以下纹理径向应用于ringGeometry网格，以便纹理的蓝色端部出现在环的内圆周上，红色端部出现在外圆周上。这是我的代码的相关部分，JSFiddle链接到一个正在运行的示例：

geometry = new THREE.RingGeometry(100, 192, 60);
material = new THREE.MeshPhongMaterial({ map: texture });
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

http://jsfiddle.net/mareid/8t4cz/4/

我无法获得纹理（a）径向流动，（b）与环的径向范围对齐，以便显示整个纹理，并且（c）出现在两侧环。我希望它看起来更像这样：

http://astro.utoronto.ca/~mreid/ring_gradient.png

我对UV贴图非常不稳定。请注意，我提供的纹理只是一个例子。我希望能够在环上的径向纹理的一般情况下做到这一点。

其他人发布了类似的问题，但我无法弄清楚如何调整从他们的示例到我的UV映射：

Non-radial texture mapping over a ring geometry in WebGL using Three.js

感谢您的帮助！

Answer 1

经过一些实验，我可以确认在@vals链接和提倡的线程上共享的解决方案确实有效，但是像我这样的新手需要解决方案中缺少一个细节。因此，总而言之，要将径向纹理应用于RingGeometry，您需要修改three.js中的uv映射（在本例中为r67），如下所示：

//uvs.push( new THREE.Vector2( ( vertex.x / outerRadius+1)/2, ( vertex.y / outerRadius + 1 ) / 2 ) );
uvs.push( new THREE.Vector2( i/(thetaSegments-1), o/ (phiSegments-1) ) );

然后，您还需要确保在调用RingGeometry时，将thetaSegments和phiSegments设置为相同的数字。否则，只有部分纹理会出现在环上。我希望这可以帮助别人。感谢@vals和@WestLangley的帮助。

Answer 2

我的用例是使用径向纹理在土星周围显示环。以下代码是基于three.js r84的直接摘录。

var segs = 96;
var ii = radius * 1.200;
var oo = radius * 1.950;

var geometry = new THREE.RingBufferGeometry(ii, oo, segs);

var uvs = geometry.attributes.uv.array;
// loop and initialization taken from RingBufferGeometry
var phiSegments = geometry.parameters.phiSegments || 0;
var thetaSegments = geometry.parameters.thetaSegments || 0;
phiSegments = phiSegments !== undefined ? Math.max( 1, phiSegments ) : 1;
thetaSegments = thetaSegments !== undefined ? Math.max( 3, thetaSegments ) : 8;
for ( var c = 0, j = 0; j <= phiSegments; j ++ ) {
    for ( var i = 0; i <= thetaSegments; i ++ ) {
        uvs[c++] = i / thetaSegments,
        uvs[c++] = j / phiSegments;
    }
}

如何将一个径向纹理应用于具有three.js r67的环？

2 个答案: