WebGL Three.js：几何面上的纹理对齐

Question

我想在IcosahedronGeometry的每个面上写文字

我能够生成纹理并将纹理应用于所有面：

for ( var i = 0; i < geometry.faces.length; i ++ ) {
geometry.faces[i].materialIndex = i;
materials.push( new THREE.MeshBasicMaterial( { overdraw: true, map:  getTexture(i), wireframe: true, wireframeLinewidth: 1} ) );
 }

// 3D element   
element = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial(materials) );

然而每个纹理都覆盖了另一个......我无法正确对齐它们

http://jsfiddle.net/jzbf7/

有什么想法吗？

Answer 1

您需要了解如何为IcosahedronGeometry设置UV - 它们与SphereGeometry的UV非常相似，其中世界地图将覆盖整个球体。

这与CubeGeometry的UV非常不同，其中纹理映射到每个面。

尝试使用更新的小提琴，亲眼看看：http://jsfiddle.net/jzbf7/2/ （如果球体渲染太暗，再次渲染 - 颜色是随机的。）

此外，IcosahedronGeometry UV地图中存在错误。这可以在“接缝”中看到。

three.js r.56