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

Question

当我搜索一些天空盒图像时（例如 google images) I am getting hits showing single images in a sideways cross pattern. But all the three.js examples (for example），我设法找到了 show loading 6 图像。

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

documentation 有点含糊（即关于 6 张图像是一个选项还是唯一的方法）。

这里是好像是用单图，其实是一行，答案用的是2x3的格子；都不是十字形！

（顺便说一句，奖金问题：我尝试从源代码中解决这个问题，但它在哪里？THREE.CubeTextureLoader().load() code is a loop to load however many URLs it is given (NB. no checking that it is 6), then calls THREE.Texture，这看起来非常通用。）

Answer 1

答：是的，绝对可以是单张图片。你在你提供的Whosebug问题中有证据。

为什么存在交叉图像：有时（我在 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] } ) );
  }

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

Can a skybox be a single image, and if not why?

three.js

skybox