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

Question

当我搜索一些天空盒图像(例如 google images )时，我得到的结果是以横向十字图案显示单个图像。但是所有的三个.js 示例( for example )我都设法找到了加载 6 个图像的显示。

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

documentation有点模糊(即 6 个图像是否是一个选项，或者是唯一的方法)。

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

(顺便说一句，额外的问题:我尝试从源代码中解决这个问题，但是它在哪里？ THREE.CubeTextureLoader().load() 代码是一个循环，用于加载给定的多个 URL(注意。没有检查它是否是 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 );
}