Как применить текстуру к пользовательскому геометрии в Three.js

Question

я успешно применил текстуры к геометрии куба с этим:

var geometry = new THREE.CubeGeometry(10, 10, 10); 
var meshMaterial = new THREE.MeshPhongMaterial({ transparent: false, map: THREE.ImageUtils.loadTexture('/app/images/wood.jpg') }); 
meshMaterial.side = THREE.DoubleSide; 
var mesh = new THREE.Mesh(geometry, meshMaterial); 

С этим я получаю хороший текстурированный куб, как это:

Теперь я хочу, чтобы применить ту же текстуру (512x512 JPG изображения) в пользовательской модели я загружаю из STL и это то, что я получаю (в этом случае пирамида):

Это код:

loader.load(jsonParam.url, function (geometry) { 
      var meshMaterial = new THREE.MeshPhongMaterial({ transparent: false, map: THREE.ImageUtils.loadTexture('/app/images/wood.jpg') }); 
      meshMaterial.side = THREE.DoubleSide; 

      var mesh = new THREE.Mesh(geometry, meshMaterial); 

      mesh.castShadow = false; 
      mesh.receiveShadow = true; 
      scene.add(mesh); 
     }); 

Почему текстура не применяется, и я получаю только то, что, как представляется, в среднем цвета текстуры?

Answer 1

Вам нужно УФ-картографирование.
Вы можете либо отредактировать модель в программном обеспечении моделирования, чтобы добавить UV-координаты, либо, возможно, сгенерировать их, как в ответе, опубликованном here.
Я полагаю, что другой вариант - создать собственный шейдер, который отображает текстуру на поверхность модели без использования UV-координат.