三.CubeTextureLoader 1px 边缘错误

Posted 2023-02-27

【中文标题】三.CubeTextureLoader 1px 边缘错误

【英文标题】：THREE.CubeTextureLoader 1px edges bug

【发布时间】：2016-05-23 16:45:55

【问题描述】：

我使用 THREE.CubeTextureLoader 创建全景立方体：

pano = [
    'scenes/4/2048/px.jpg', 'scenes/4/2048/nx.jpg',
    'scenes/4/2048/py.jpg', 'scenes/4/2048/ny.jpg',
    'scenes/4/2048/pz.jpg', 'scenes/4/2048/nz.jpg',
];
newCubeTexture = cubeTextureLoader.load(pano);
geometry = new THREE.BoxGeometry(20000, 20000, 20000);
material = new THREE.MeshBasicMaterial(
    envMap: newCubeTexture,
    side: THREE.BackSide,
    color: 0xffffff,
    transparent: true,
    opacity: 0
);
mesh = new THREE.Mesh(geometry, material);

但是当纹理加载时，我在边缘看到 1px 错误。

为什么会这样？

附：如果我使用地图为每一面加载纹理都很好！

new THREE.MeshBasicMaterial(
    map: new THREE.ImageUtils.loadTexture(arr[i]),
    side: THREE.BackSide,
    transparent: true,
    opacity: 0
);

【问题讨论】：

envMap 用于反射，而不是用于您使用它的目的。在three.js示例中搜索skybox，查看***.com/questions/16310880/…

问题仅在 envMap 中？我可以使用 cubeTextureLoader 来获取地图属性并解决问题吗？

看看天空盒是如何在threejs.org/examples/webgl_materials_cubemap.html中使用THREE.ShaderLib[ "cube" ];实现的。

【参考方案1】：

@WestLangley 在他的 cmets 中表现出色。除此之外，我想指出的是，人工创建一个巨型盒子的方法也有一些弱点，它仍然是扭曲的，并且在边界上容易受到 z-fighting 的影响。

在three.js 的现代版本中，一个更好的选择是将CubeTexture 从cubeTextureLoader.load 分配给scene.background。