THREE.CubeTextureLoader 1px edges错误

Question

我使用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的bug。

​

​

为什么它是heppend？

附言:如果我使用map为每一面加载纹理，一切都很好！

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

Answer 1

@WestLangley在他的评论中有很好的观点。除此之外，我想指出的是，人工创建巨型盒子的方法有一些弱点，因为它仍然是扭曲的，并且容易受到边界上的z争斗的影响。

在three.js的现代版本中，一种更好的替代方法是将CubeTexture从cubeTextureLoader.load分配给scene.background。