2

当我搜索一些天空盒图像（例如谷歌图像）时，我得到了以横向交叉模式显示单个图像的点击。但是所有三个.js 示例（例如）我已经设法找到显示加载 6 个图像。

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

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

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

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

4

2 回答 2

2

答：是的，它绝对可以是单个图像。您在提供的 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
  ....

您可以尝试使用小提琴来查看如果修改这些值会发生什么。IE

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 );
}
于 2016-03-11T22:18:13.050 回答
0

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

  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] } ) );
  }
于 2020-12-08T09:41:30.583 回答