My latest project involved creating a 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);
However, upon loading the textures, I noticed a strange 1px bug on the edges:
https://i.sstatic.net/qfc7i.png
Can anyone explain why this is happening?
P.S. I found that loading textures for each side individually using map resolves this issue:
new THREE.MeshBasicMaterial({
map: new THREE.ImageUtils.loadTexture(arr[i]),
side: THREE.BackSide,
transparent: true,
opacity: 0
});