I decided to create a complete sphere using sphere tiles, allowing me to manipulate each tile individually when they are within the FOV.
To achieve this, I broke down an equirectangular panorama into various square images in order to place them onto the tiles. However, there seems to be an issue with the texture alignment on the top and bottom rows of segments within each tile.
Here is an example showcasing some imported square images:
The original test image:
How can I ensure that the textures align correctly on the tiles? Below is the code used to generate the tiles:
/*
segment Data:
x/y are generated by a loop
maxX/maxY are the maximum values of these loops
*/
sphere = new THREE.SphereGeometry(radius, 4, 4, segmentData.x * 2 * Math.PI / segmentData.maxX, 2 * Math.PI / segmentData.maxX, segmentData.y * Math.PI / segmentData.maxY, Math.PI / segmentData.maxY);
texture = new THREE.TextureLoader().load(tileImagePath);
material = new THREE.MeshBasicMaterial({map: texture});
mesh = new THREE.Mesh(sphere, material);
scene.add(mesh);
As I am new to three.js, I suspect this may be a simple problem. Can someone please provide assistance?
Any help would be greatly appreciated. Thank you!