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

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

1 个答案: