THREE.CubeTextureLoader 1px edges bug

Question

I create panorama cube using 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);

But when textures loaded I see 1px bug on the edges.

Why it's heppend?

P.S. If I load textures for each sides using map all good!

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

An `envMap` is for reflections, not for the purpose you are using it for. Search for `skybox` in the three.js examples, and see http://stackoverflow.com/questions/16310880/comparing-methods-of-creating-skybox-material-in-three-js — WestLangley, Feb 14 '16 at 22:36
Problem only in envMap? Can I use cubeTextureLoader for map attribute and solve problem? — skywind, Feb 19 '16 at 04:49
See how the skybox is implemented using `THREE.ShaderLib[ "cube" ];` in http://threejs.org/examples/webgl_materials_cubemap.html. — WestLangley, Feb 19 '16 at 10:03

score 0 · Answer 1 · answered Oct 29 '19 at 23:34

@WestLangley has good points in his comments. In addition to those, I would like to point out that the method of artificially creating a giant box has some weaknesses, in that it is still distorted, and can be susceptible to z-fighting on the borders.

A better alternative in modern versions of three.js is to assign a the CubeTexture from cubeTextureLoader.load to scene.background.

THREE.CubeTextureLoader 1px edges bug

1 Answers1