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方法的第二个参数）将纹理应用于材质：

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

在Three.js中将纹理绘制为自定义形状

1 个答案: