使用THREE.js在立方体几何体上应用纹理

我有一个简单的THREE.js应用程序，可以渲染立方体并在每个面上应用纹理，如下所示：

var cubeGeometry = new THREE.CubeGeometry(5, 8, 1, 4, 4, 1);

var materials = [ new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('front.jpg') }),
//.....Front, back, left, etc...                              
]; 

...

var cubeMesh = new THREE.Mesh(cubeGeometry, new THREE.MeshFaceMaterial(materials));

然而，我看到的只是一个黑色的立方体，即图像不会出现在立方体的面上

此外，我的代码在THREE.js库的第50版中运行良好，因此似乎是一个新版本的更改导致了我的代码崩溃，我似乎找不到任何相关文档

---

感谢您的帮助

从97版开始，以下代码应起作用

// creates cubes geometry in front of camera (assuming your camera position and rotation has not changed)
var geometry = new THREE.CubeGeometry(1, 1, 1, -2, 0, 0);

// creates a texture loader for the cube
var texture = new THREE.TextureLoader();

// defines variables to make things easier
var counter, textures = [], materials = [];

// iterate through all 6 sides of the cube
for(counter = 0; counter < 6; counter ++) {

  // loads and stores a texture (you might run into some problems with loading images directly from a source because of security protocols, so copying the image data is a for sure way to get the image to load)
  textures[counter] = texture.load('data:image/restOfImageAddress');

  // creates material from previously stored texture
  materials.push(new THREE.MeshBasicMaterial({map: textures[counter]}));
}

// creates the cube by mixing the geometry and materials
var cubeMesh = new THREE.Mesh(geometry, materials);

//在相机前面创建立方体几何体（假设您的相机位置和旋转没有改变）
var geometry=新的三立方测量法（1,1,1，-2,0,0）；
//为立方体创建纹理加载程序
var texture=new THREE.TextureLoader（）；
//定义变量使事情变得更简单
变量计数器，纹理=[]，材质=[]；
//遍历立方体的所有6个边
用于（计数器=0；计数器<6；计数器++）{
//加载和存储纹理（由于安全协议，直接从源加载图像时可能会遇到一些问题，因此复制图像数据是确保加载图像的一种方法）
纹理[counter]=texture.load（'data:image/restOfImageAddress'）；
//从以前存储的纹理创建材质
push（新的3.MeshBasicMaterial（{map:textures[counter]}））；
}
//通过混合几何体和材质创建立方体
var cubeMesh=新的三个网格（几何体、材质）；

好的，你能试着用简单的颜色而不是纹理来看看这是否与纹理有关吗？