在 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 已弃用（改为检查 ). In latest versions you should use THREE.TextureLoader。

THREE.TextureLoader 异步工作，因此您必须使用 the onLoad callback（load 方法的第二个参数）将纹理应用到您的 material:

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

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

Draw Texture to Custom Shape in Three.js

canvas

webgl

three.js