three.js - 使用 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 版中运行良好，因此似乎是更新版本的更改导致我的代码中断，而且我似乎找不到任何相关文档。

感谢任何帮助。

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