在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。

THREE.TextureLoader作品异步，所以你必须使用the onLoad callback（该load方法的第二PARAM），用于将纹理到你的材料：

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