3

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

任何帮助表示赞赏。

4

1 回答 1

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);
于 2018-10-24T14:02:31.463 回答