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

【问题标题】：Can a skybox be a single image, and if not why?天空盒可以是单个图像吗？如果不是，为什么？
【发布时间】：2020-12-08 17:41:30
【问题描述】：

当我搜索一些天空盒图像（例如google images）时，我会看到以横向交叉模式显示单个图像的点击。但是所有三个.js 示例 (for example) 我已经设法找到显示加载 6 张图片。

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

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

这里是a question，貌似用的是单张图片，其实是一行，答案用的是2x3的网格；它们都不是十字形的！

（顺便说一句，额外的问题：我尝试从源代码中解决这个问题，但它在哪里？THREE.CubeTextureLoader().load() 代码是一个循环加载，无论给出多少 URL（注意。没有检查它是 6），然后调用THREE.Texture，看起来很通用。）

【问题讨论】：

你知道如何制作横向交叉图案的图像天空盒吗？

标签： three.js skybox

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

【讨论】：

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

【讨论】：