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

【问题标题】：WebGL Three.js : Texture alingment on a geometry faceWebGL Three.js：几何面上的纹理对齐
【发布时间】：2013-02-23 11:11:53
【问题描述】：

我想在二十面体几何的每个面上写文字

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

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/

有什么想法吗？

【问题讨论】：

标签： html 3d three.js webgl

【解决方案1】：

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

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

使用更新后的小提琴进行实验，您可以自己查看：http://jsfiddle.net/jzbf7/2/ （如果球体渲染得太暗，请重新渲染——颜色是随机的。）

另外，IcosahedronGeometry UV 贴图中存在一个错误。这可以在“接缝”处看到。

three.js r.56

【讨论】：

感谢您的改编，这意味着没有解决方案可以在二十面体几何面上应用文本？
您可以自己修改二十面体几何UV，以达到您想要的效果。
谢谢，我们会努力做到的！