使用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
答案 0 :(得分:0)
你的问题在哪里? 如果您需要多纹理多维数据集的工作示例,可以查看: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 );