テクスチャをThree.jsのカスタムシェイプに描画する

Question

私は不規則な四辺形を描画しています。今私はテクスチャとして四辺形にイメージとしてマップしたいと思います。私は四角形に特定の色を割り当てることができますが、画像には割り当てません。私は何をしているのですか？

var camera = new THREE.Camera(
    35,      // Field of view 
    window.innerWidth/600, // Aspect ratio 
    .1,      // Near plane distance 
    10000      // Far plane distance 
); 
camera.position.set(3,1,100); 
camera.up.set(0, 0, 1); 
camera.lookAt(new THREE.Vector3(0, 0, 0)); 

var material_4 = new THREE.MeshBasicMaterial({ 
    color: 0x000000, 
    wireframe: true 
}); 

var geom = new THREE.Geometry(); 
var v1 = new THREE.Vector3(0, 0, 0); 
var v2 = new THREE.Vector3(0, 10,0); 
var v3 = new THREE.Vector3(10, 0, 00); 
var v4 = new THREE.Vector3(10, 10, 00); 

geom.vertices.push(new THREE.Vertex(v1)); 
geom.vertices.push(new THREE.Vertex(v2)); 
geom.vertices.push(new THREE.Vertex(v3)); 
geom.vertices.push(new THREE.Vertex(v4)); 

geom.faces.push(new THREE.Face4(0,2,3,1)); 

geom.faceVertexUvs[0].push([ 
    new THREE.UV(0, 0), 
    new THREE.UV(0, 1), 
    new THREE.UV(1, 1), 
    new THREE.UV(1, 0) 
]); 

var material = new THREE.MeshLambertMaterial({color: 0x00cc00 }); 
var bookCover = new THREE.MeshPhongMaterial() 
bookCover.map = new THREE.ImageUtils.loadTexture('4.png'); 

//var object = new THREE.Mesh(geom,material_4); // THis works 
//var object = new THREE.Mesh(geom,material); //This works 
var object = new THREE.Mesh(geom,bookCover); // this doesnot work why? 

object.overdraw=true; 
scene.addChild(object); 

Answer 1

どのバージョンのthree.jsを使用していますか？新しいバージョンTHREE.ImageUtils.loadTextureでは廃止予定です（a related question hereを確認してください）。最新バージョンでは代わりにTHREE.TextureLoaderを使用してください。

var onLoad = function(texture){ 
    bookCover.map = texture; 
    bookCover.needsUpdate = true; 
} 
var loader = new THREE.TextureLoader(); 
loader.load('4.png', onLoad); 

：非同期

THREE.TextureLoader作品は、あなたがあなたのマテリアルにテクスチャを適用するためのthe onLoad callback（load方法の第二のparam）を使用する必要があります