如何将径向纹理应用到带有three.js r67的环上？
我正在尝试将纹理应用到ringGeometry in three.js r67中。我无法得到正确的纹理方向。我想应用下面的纹理到一个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)出现在环的两侧。我想让它看起来更像这样：
我有一个非常不稳定的掌握紫外线地图。请注意，我提供的纹理只是一个例子。我希望能在环上的径向纹理的一般情况下这样做。
其他人发布了一个类似的问题，但我不知道如何将他们的例子中的UV映射调整到我的身上：
Non-radial texture mapping over a ring geometry in WebGL using Three.js
谢谢你的帮忙!
回答 2
Stack Overflow用户
发布于 2014-07-10 06:24:16
经过一些实验，我可以确认@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设置为相同的号码。否则，只有部分纹理会出现在戒指上。我希望这能帮上忙。谢谢你的帮助。
Stack Overflow用户
发布于 2017-03-25 18:14:57
我的用例是用径向纹理显示土星周围的光环。下面的代码是基于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;
}
}https://stackoverflow.com/questions/24634971
复制
相似问题
scale_fill_manual不尊重价值和标签的顺序
不尊重抚养顺序？
Android不尊重颜色！
in图中的自定义离散颜色标度不尊重顺序。
颜色栏不尊重限值
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
