如何创建多个Box并仅在一侧更改纹理?

时间:2014-04-27 23:23:21

标签: three.js textures mesh

我正在尝试将纹理仅应用于Box对象的一侧。

基本代码:

BoxGeo = new THREE.BoxGeometry(50, 50, 125);
BoxMat = new THREE.MeshLambertMaterial({ color: 0xF0F0F0 });
BoxObj = new THREE.Mesh(GeoBox, GeoMat);

我尝试使用包含6个材质对象的数组,5个颜色和一个带有图像的数组(从每个Box的另一个纹理数组中随机选择)。但它引发了一个错误:(

是否可以为每张脸提供一个具有不同纹理的Box的简单示例? 我在网上看到了一些例子,但是他们需要将材质数组放在Geometry对象中,我想避免为了性能原因为每个Box创建一个新的Geometric对象。

1 个答案:

答案 0 :(得分:8)

this sample怎么样?它创建材质数组,然后将其添加到网格中。所以,你可以重复使用它。

相关代码:

// Create an array of materials to be used in a cube, one for each side
var cubeMaterialArray = [];

// order to add materials: x+,x-,y+,y-,z+,z-
cubeMaterialArray.push( new THREE.MeshBasicMaterial( { color: 0xff3333 } ) );
cubeMaterialArray.push( new THREE.MeshBasicMaterial( { color: 0xff8800 } ) );
cubeMaterialArray.push( new THREE.MeshBasicMaterial( { color: 0xffff33 } ) );
cubeMaterialArray.push( new THREE.MeshBasicMaterial( { color: 0x33ff33 } ) );
cubeMaterialArray.push( new THREE.MeshBasicMaterial( { color: 0x3333ff } ) );
cubeMaterialArray.push( new THREE.MeshBasicMaterial( { color: 0x8833ff } ) );

var cubeMaterials = new THREE.MeshFaceMaterial( cubeMaterialArray );

// Cube parameters: width (x), height (y), depth (z), 
//       (optional) segments along x, segments along y, segments along z
var cubeGeometry = new THREE.CubeGeometry( 100, 100, 100, 1, 1, 1 );

// using THREE.MeshFaceMaterial() in the constructor below
//   causes the mesh to use the materials stored in the geometry

cube = new THREE.Mesh( cubeGeometry, cubeMaterials );