Three.js - 向自定义几何添加纹理

Question

我正在将具有纹理贴图的简单材质应用到自定义网格。我找不到任何我能理解的例子，所以我做了这个小提琴来演示我想要达到的目标。

/// MATERIAL 
var texture = new THREE.TextureLoader().load("https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/crate.gif"); 
var material = new THREE.MeshBasicMaterial({ 
    map: texture, 
    side: THREE.DoubleSide 
}); 

// TRIANGLE 
var geometry2 = new THREE.Geometry(); 
var v1 = new THREE.Vector3(0,200,0); 
var v2 = new THREE.Vector3(0,0,-100); 
var v3 = new THREE.Vector3(0,0,100); 
geometry2.vertices.push(v1); 
geometry2.vertices.push(v2); 
geometry2.vertices.push(v3); 
geometry2.faces.push(new THREE.Face3(0, 1, 2)); 
meshCustom = new THREE.Mesh(geometry2, material); 
scene.add(meshCustom); 

// CUBE 
var geometry = new THREE.BoxBufferGeometry(100, 100, 100); 
mesh = new THREE.Mesh(geometry, material); 
scene.add(mesh); 

https://jsfiddle.net/benaloney/L7js807k/8/

我只想三角形有纹理的立方体一样，我理解需要有UV网格上的这个工作坐标，但我不确定如何实现这个。

Answer 1

的三角纹理看起来怪异，但...以防万一，适应乌布苏您的实际目标可能会有帮助：

Your updated fiddle

方法如下：

//texture 
    var texture2 = new THREE.TextureLoader().load("https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/crate.gif"); 


//material 
    var material2 = new THREE.MeshBasicMaterial({ 
     map: texture2, 
     side: THREE.DoubleSide 
    }); 

    // TRIANGLE 
    var geometry2 = new THREE.Geometry(); 
    var v1 = new THREE.Vector3(0,200,0); 
    var v2 = new THREE.Vector3(0,0,-100); 
    var v3 = new THREE.Vector3(0,0,100); 
    geometry2.vertices.push(v1); 
    geometry2.vertices.push(v2); 
    geometry2.vertices.push(v3); 
    geometry2.faces.push(new THREE.Face3(0, 1, 2)); 

//manually setting your UVs 
    geometry2.faceVertexUvs[0].push([ 
      new THREE.Vector2(0,0),  //play with these values 
      new THREE.Vector2(0.5,0), 
      new THREE.Vector2(0.5,0.5) 
     ]); 

//updating the uvs 
    geometry2.uvsNeedUpdate = true; 

Answer 2

得到它的工作，所以我也需要紫外线对几何坐标。由于这个其他问题：

https://stackoverflow.com/a/27317936/2419584

我加入这个功能，通过它的几何形状。

function assignUVs(geometry) { 
    geometry.faceVertexUvs[0] = []; 
    geometry.faces.forEach(function(face) { 
     var components = ['x', 'y', 'z'].sort(function(a, b) { 
      return Math.abs(face.normal[a]) > Math.abs(face.normal[b]); 
     }); 

     var v1 = geometry.vertices[face.a]; 
     var v2 = geometry.vertices[face.b]; 
     var v3 = geometry.vertices[face.c]; 

     geometry.faceVertexUvs[0].push([ 
      new THREE.Vector2(v1[components[0]], v1[components[1]]), 
      new THREE.Vector2(v2[components[0]], v2[components[1]]), 
      new THREE.Vector2(v3[components[0]], v3[components[1]]) 
     ]); 

    }); 
    geometry.uvsNeedUpdate = true; 
} 

这会自动从几何图形生成UV坐标，然后允许纹理图像显示在自定义几何图形上。

这是我更新的工作jsfiddle。

https://jsfiddle.net/benaloney/L7js807k/9/