在 Three.js 中将纹理绘制到自定义形状答案

【问题标题】：Draw Texture to Custom Shape in Three.js在 Three.js 中将纹理绘制到自定义形状
【发布时间】：2016-10-31 01:01:12
【问题描述】：

我画了一个不规则的四边形。现在我想将图像作为纹理映射到四边形。我可以为四边形而不是图像分配特定的颜色。我遇到了什么错误？

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);

【问题讨论】：

标签： canvas three.js webgl

【解决方案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);

【讨论】：