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 回答