html - WebGL Three.js：几何面上的纹理调整

Question

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

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

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

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

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

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

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

三.js r.56