three.js - 如何创建多个 Box 并且只更改一侧的纹理？

Question

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

基本代码:

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

我尝试使用包含 6 个 Material 对象的数组，其中 5 个有颜色，一个带有图像(从每个 Box 的另一个纹理数组中随机选择)。但它抛出一个错误:(

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

Answer 1

怎么样this sample ?它创建 Material 阵列，然后将其添加到网格中。所以，你可以重复使用它。

相关代码:

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