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

Вы должны понимать, как настроены ультрафиолетовые лучи для IcosahedronGeometry - они очень похожи на УФ для SphereGeometry, в котором карта мира покроет всю сферу.

Это очень отличается от УФ для CubeGeometryгде текстура отображается на каждом лице.

Поэкспериментируйте с обновленной скрипкой, чтобы убедиться в этом: http://jsfiddle.net/jzbf7/2/ (Если сфера слишком темная, отрендуйте ее снова - цвета случайные.)

Также есть ошибка в IcosahedronGeometry УФ карта. Это видно по "шву".

three.js r.56