如何创建多个 Box 并且只更改一侧的纹理？答案

【问题标题】：How to create multiple Box and only change the texture on one side?如何创建多个 Box 并且只更改一侧的纹理？
【发布时间】：2014-06-13 08:39:40
【问题描述】：

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

基本代码：

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

我尝试使用一个包含 6 个材质对象、5 个彩色对象和一个带有图像的数组（从每个盒子的另一个纹理数组中随机选择）。但它会引发错误:(

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

【问题讨论】：

标签： three.js textures mesh

【解决方案1】：

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

【讨论】：

哈哈哈！惊人的！太感谢了！（我想我检查了这个网站上的所有演示，除了这个）
@JeremyDicaire - 很高兴为您提供帮助