Question

当我搜索一些天空盒图像（例如google images）时，我的热门歌曲以侧向交叉模式显示单个图像。但所有三个.js例子（for example）我都设法找到加载6张图片。

我不得不剪切一张图片，然后额外加载6张图片而不是一张图片，这感觉很奇怪。

documentation有点模糊（即6个图像是一个选项，还是唯一的方法）。

这里似乎是a question使用单个图像，但它是一行，答案使用2x3网格;它们都不是十字形！

（顺便说一下，奖金问题：我试过从源代码中解决这个问题，但它在哪里？THREE.CubeTextureLoader().load()代码是一个循环来加载它给出了很多的URL（NB。没有检查它是什么6），然后调用THREE.Texture，这似乎非常通用。）

Answer 1

答案：是的，它绝对可以是单个图像。您在所提供的stackoverflow问题中有证据。

为什么交叉图像存在：有时（我在OpenGl中完成此操作），您可以为多维数据集的6个面中的每一个指定图像中的坐标。它看起来不像three.js库提供了这个功能。

他们提供的是.repeat和.offset属性。这就是单个图像jsfiddle中使用的内容。

for ( var i = 0; i < 6; i ++ ) {
  t[i] = THREE.ImageUtils.loadTexture( imgData ); //2048x256
  t[i].repeat.x  = 1 / 8;
  t[i].offset.x = i / 8;
  // Could also use repeat.y and offset.y, which are probably used in the 2x3 image
  ....

您可以试用fiddle来查看修改这些值会发生什么。即。

t[i].repeat.x  = 1 / 4;
t[i].offset.x = i / 4;

祝你好运，希望这会有所帮助。

奖金问题编辑：此外，在THREE.CubeTextureLoader().load()代码中，一旦加载了6张图片，它实际上会自动更新：

...
if ( loaded === 6 ) {
    texture.needsUpdate = true;
    if ( onLoad ) onLoad( texture );
}

Answer 2

仅供参考，尝试过后正确映射：

  x_offset = [3, 1, 2, 2, 2, 0];
  y_offset = [1, 1, 2, 0, 1, 1];
  for ( var i = 0; i < 6; i ++ ) {
      t[i] = loader.load( imgData, render ); //2330 x 1740 // cubemap
      t[i].repeat.x  = 1 / 4;
      t[i].offset.x = x_offset[i] / 4;
      t[i].repeat.y  = 1 / 3;
      t[i].offset.y = y_offset[i] / 3;
      //t[i].magFilter = THREE.NearestFilter;
      t[i].minFilter = THREE.NearestFilter;
      t[i].generateMipmaps = false;
      materials.push( new THREE.MeshBasicMaterial( { map: t[i] } ) );
  }

天空盒可以是单个图像，如果不是为什么？

2 个答案: