如何使用 three.js r67 将径向纹理应用于环？答案

【问题标题】：How can I apply a radial texture to a ring with three.js r67?如何使用 three.js r67 将径向纹理应用于环？
【发布时间】：2017-03-26 10:54:48
【问题描述】：

我正在尝试将纹理应用于 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

感谢您的帮助！

【问题讨论】：

你会考虑使用类似于ring_gradient.png 的东西作为你的纹理吗？
我会说您链接的答案中的代码具有您正在寻找的确切答案，无需调整代码。我错过了什么吗？
@vals，我尝试使用该链接中的代码更改 uv 映射。它将纹理定向在正确的方向（即径向），但实际上只有一小部分纹理映射到环上。也就是说，如果我要使纹理具有五个彩色带（比如红色、橙色、黄色、绿色、蓝色），结果是红色和橙色的同心圆，但没有黄色、绿色或蓝色。我不知道如何让纹理的其余部分显示出来。就像 10% 的纹理映射到环的径向范围的 100%，而不是 100% 到 100%。
@vals 我已经实现了您的解决方案，但您可以看到它并不完全有效：link 尝试更改以下行中的最后两个数字，您会看到一些奇怪的行为几何和纹理。就好像它自我遮蔽了自己一样。很奇怪。我认为只有当 thetaSegments=phiSegments 时，你才能获得完整的纹理，即便如此，环上也会有一个有趣的自身阴影。
这不是我的解决方案 :-) 反正我觉得代码有点不对，应该是 uvs.push( new THREE.Vector2( i/(thetaSegments-1), o/ (phiSegments-1) ) );

标签： javascript three.js texture-mapping

【解决方案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;
    }
}

【讨论】：

【解决方案2】：

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

//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 的帮助。

【讨论】：