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

【问题标题】：Applying textures on cube geometry using THREE.js使用 THREE.js 在立方体几何体上应用纹理
【发布时间】：2012-11-19 23:17:16
【问题描述】：

我有一个简单的 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 版中运行良好，因此似乎是一个更改是较新的版本导致我的代码中断，而且我似乎找不到任何相关文档。

感谢任何帮助。

【问题讨论】：

好的，你可以试试用简单的颜色代替纹理，看看是不是纹理相关的问题？

标签： three.js textures

【解决方案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);

【讨论】：