如何将纹理添加到three.js中的三角形？

我创建了一个场景，其中包含许多立方体，球体等，并且已经能够将纹理应用到这些基元，但是当我想将纹理添加到简单的三角形时，我完全失去了。如何将纹理添加到three.js中的三角形？

这里是我来得到它的权利最接近：

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，在屋顶部分上载图像，然后拖动视图查看屋顶闪烁。

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

来源

2012-09-02 Kae Verens

您需要阅读UV Mapping。你不能用（0,0）将它初始化为全部4个角落。您需要指定一个介于0到1之间的数字，它是纹理宽度和高度的百分比。意思是，如果顶点类似于（左上角），（右上角），则表面4上的全纹理将是（0,0），（1,0），（1,1），（0,1），（右下），（左下）...等等...

来源

2012-09-02 21:36:12 EliSherer

如何将纹理添加到three.js中的三角形？

回答

相关问题