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에서는 더 이상 지원되지 않습니다 (Check 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)를 사용해야합니다