4

我创建了一个场景,其中包含许多立方体、球体等,并且能够将纹理应用于这些图元,但是当我想为一个简单的三角形添加纹理时,我完全迷失了。

这是我最接近正确的方法:

  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,在屋顶部分上传一张图片,然后拖动视图以查看屋顶闪烁。

有谁知道我在这里做错了什么?

4

1 回答 1

5

您需要阅读一些关于UV Mapping的内容。您不能使用 (0,0) 将其初始化到所有 4 个角。您需要指定一个介于 0 到 1 之间的数字,它是纹理宽度和高度的百分比。意思是,如果顶点像(左上),(右上),Face4 上的完整纹理将是(0,0),(1,0),(1,1),(0,1), (右下),(左下)......等等......

于 2012-09-02T21:36:12.857 回答