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

Question

我有一个简单的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版本中我的代码可以正常运行，所以似乎是更新的版本中有一些变化使得我的代码出现问题，但我找不到相关的文档资料。

感谢任何帮助。

- user1336301

---

好的，你可以尝试使用简单的颜色而不是纹理来查看是否与纹理有关。 - geekonaut

Answer 1

以下代码应在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);

- DMVerfurth