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

三角形上のテクスチャは、あなたの実際のオブジェクトが役立つかもしれないにUVを適応、念のために...しかし奇妙に見える：

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

作業、それを手に入れたので、私はUVが幾何学上の座標必要でした。この他の質問への感謝：

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/