javascript - 如何使用 three.js r67 将径向纹理应用于戒指？

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

我的用例是使用径向纹理显示土星周围的光环。以下代码是基于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;
    }
}