如何在three.js中为三角形添加纹理? [英] how do I add a texture to a triangle in three.js?

问题描述

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

I've created a scene which has many cubes, spheres, etc, in it, and have been able to apply textures to those primitives, but when I want to add a texture to a simple triangle, I'm totally lost.

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

Here's the closest I've come to getting it right:

  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);

这不起作用.我得到的只是一个闪烁的三角形(当场景移动时)，图像应该在那里.

This does not work. All i get is a flickering triangle (when the scene is moved) where an image should be.

要对此进行测试，请转到 https://www.poptents.eu/3dFrame.php，在屋顶部分上传图像，然后拖动视图以查看屋顶闪烁.

To test this, go to https://www.poptents.eu/3dFrame.php, upload an image in the Roof section, and drag the view to see the roof flicker.

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

Does anyone know what I'm doing wrong here?

推荐答案

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

You need to read a bit on UV Mapping. You can't initialize it with (0,0) to all 4 corners. You need to specify a number between 0 to 1 which is the percentage of the texture's width and height. Meaning, a full texture on a Face4 would be (0,0), (1,0), (1,1), (0,1) if the vertices are like (top-left), (top-right), (bottom-right), (bottom-left)... and so on...

这篇关于如何在three.js中为三角形添加纹理?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！