three.js - 无法将多个纹理应用于简单的立方体

Question

使用three.js r62

grass_side = new THREE.MeshLambertMaterial({
    map: THREE.ImageUtils.loadTexture('assets/blocks/grass_side.png')
});

grass_top = new THREE.MeshLambertMaterial({
    map: THREE.ImageUtils.loadTexture('assets/blocks/grass_top.png')
});

materials = new THREE.MeshFaceMaterial([
    grass_side,
    grass_top
]);

cube = new THREE.CubeGeometry(30, 30, 30);
cube.faces[0].materialIndex = 0;
cube.faces[1].materialIndex = 0; 
cube.faces[2].materialIndex = 0; 
cube.faces[3].materialIndex = 0;
cube.faces[4].materialIndex = 1; 
cube.faces[5].materialIndex = 1;

box = new THREE.Mesh(cube, materials);
scene.add(box);

我在stackoverflow的某个地方找到了这段代码，但它不起作用。我不断收到这些错误：

Uncaught TypeError: Cannot read property 'map' of undefined three.js:376
Uncaught TypeError: Cannot read property 'attributes' of undefined three.js:458

Answer 1

你的问题在哪里？如果您需要一个多纹理立方体的工作示例，您可以查看：http ://stemkoski.github.io/Three.js/Mesh-Movement.html

使用的代码如下：

// create an array with six textures for a cool cube
var materialArray = [];
materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/xpos.png' ) }));
materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/xneg.png' ) }));
materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/ypos.png' ) }));
materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/yneg.png' ) }));
materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/zpos.png' ) }));
materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/zneg.png' ) }));
var MovingCubeMat = new THREE.MeshFaceMaterial(materialArray);
var MovingCubeGeom = new THREE.CubeGeometry( 50, 50, 50, 1, 1, 1, materialArray );
MovingCube = new THREE.Mesh( MovingCubeGeom, MovingCubeMat );
MovingCube.position.set(0, 25.1, 0);
scene.add( MovingCube );