JavaScript-three.js库中MeshFaceMaterial的使用方法或Material的使用方法

Question

我想完成一个各个面都能添加图的3D立方体。官网的文档都不完整，无奈。

Answer 1

//存放六个面的图片
var texture_placeholder = document.createElement( 'canvas' );
texture_placeholder.width = 128;
texture_placeholder.height = 128;
var materials = [
loadTexture( 'r.jpg' ), // right
loadTexture( 'l.jpg' ), // left
loadTexture( 'u.jpg' ), // top
loadTexture( 'd.jpg' ), // bottom
loadTexture( 'f.jpg' ), // front
loadTexture( 'b.jpg' ) // back
];

var mesh = new THREE.Mesh( new THREE.CubeGeometry( 400, 400, 400, 8, 8, 8, materials ), new THREE.MeshFaceMaterial() );

function loadTexture( path ) {
var texture = new THREE.Texture( texture_placeholder );
var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: true } );
var image = new Image();
image.onload = function () {
texture.needsUpdate = true;
material.map.image = this;
render();
};
image.src = path;
return material;
}

不知道你想要的是不是这种效果的。