如何在three.js中给三角形添加纹理？

Question

我创建了一个场景，其中有许多立方体、球体等等，并且已经能够将纹理应用到这些基本图形上，但是当我想要向一个简单的三角形添加纹理时，我完全不知道该怎么做。

以下是我最接近正确的尝试：

  var texture=THREE.ImageUtils.loadTexture('/f/3d-images/texture-steel.jpg');
  var materialDecalRoof=new THREE.MeshBasicMaterial( {
    'map': texture,
    'wireframe': false,
    'overdraw': true
  } );
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(tentX/2+1, tentY, tentZ/2+1));
geometry.vertices.push(new THREE.Vector3(0, tentT, 0));
geometry.vertices.push(new THREE.Vector3(0, tentT, 0));
geometry.vertices.push(new THREE.Vector3(-tentX/2-1, tentY, tentZ/2+1));
geometry.faces.push(new THREE.Face4(0, 1, 2, 3));
geometry.faceVertexUvs[0].push([
  new THREE.UV(0, 0),
  new THREE.UV(0, 0),
  new THREE.UV(0, 0),
  new THREE.UV(0, 0)
]);
geometry.computeFaceNormals();
geometry.computeCentroids();
geometry.computeVertexNormals();
var mesh= new THREE.Mesh( geometry, materialDecalRoof);
scene.add(mesh);

这个不起作用。当场景移动时，我只看到一个闪烁的三角形（应该是一个图像）。

要测试这个，请转到 https://www.poptents.eu/3dFrame.php，在屋顶部分上传一张图片，并拖动视图以查看屋顶闪烁。

有人知道我在这里做错了什么吗？

- Kae Verens

Answer 1

您需要了解一下UV贴图。不能将所有四个角初始化为(0,0)。需要指定一个介于0到1之间的数字表示纹理宽度和高度的百分比。

这意味着，如果顶点是(top-left), (top-right), (bottom-right), (bottom-left)...等等，那么在Face4上的完整纹理应为(0,0), (1,0), (1,1), (0,1)。

- EliSherer