1

I want to upload 360 image of size minimum 75 MB in sphere geometry. But loading time is too long and sometimes chrome browser gets hanged and needs to restart the browser.

I tried using sphere buffer geometry instead of sphere geometry.

      const geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
      geometry.scale( - 1, 1, 1 );
      const loader = new THREE.TextureLoader();
        loader.load(`fileUrl`,
            texture => {
                const sphereMaterial = new THREE.MeshBasicMaterial({
                    map: texture,
                    transparent: true,
                    opacity: 1
                });
                const sphereMesh = new THREE.Mesh( geometry, sphereMaterial );
                sphereMesh.name = 'Mesh1';
                sphereMesh.material.side =  THREE.DoubleSide;
                scene.add(sphereMesh);
            },
            xhr => {
                console.log(`${objectJson.url}` + ' ' + (xhr.loaded / xhr.total * 100) + '% loaded');
            },
            xhr => {
                reject(new Error(xhr + 'An error occurred loading while loading: ' + `${objectJson.url}`));
            }
            );
        });
  }

It takes too much time to load 73 mb files and if multiple files to be loaded within same function browser crashes or gets hanged until it is restarted.

user6795317
  • 141
  • 4
  • 10
  • 1
    75Mb is indeed very large, and then we are not even talking about resizing this to become a texture on THREE.js which needs to be placed in your GPU buffer. Big companies get around this by splitting the image up into a bunch of smaller ones and only loading the ones they need. You could split it in eight, make eight parts to your sphere (four quadrants bottom, four quadrants top) and only load them once a raycaster hits them. If that doesnt work, start chopping up even smaller. And before anything else, see what happens if you try to load a _much_ smaller file. – somethinghere Aug 30 '19 at 12:49
  • 3
    Also, I have build 360s before in THREE.js, and you _do not_ need a 75Mb file. Just reduce the filesize with a JPEG to something ~1-3Mb - users will barely see the difference unless they have a 700ppi display. – somethinghere Aug 30 '19 at 12:51
  • 2
    Besides, it also makes sense to `minFilter` to `THREE.LinearFilter` if you run out of GPU memory. By default, the engine generates mipmaps for textures which requires some additional space. – Mugen87 Aug 30 '19 at 13:49
  • Pretty good chance you can make this texture much smaller, without significant visible differences, on https://squoosh.app/. I wouldn't use anything larger than 4096x4096. – Don McCurdy Aug 31 '19 at 05:13
  • Do we have any plugin to dynamically split images into 8 parts ?? And if i split those images into 8 parts how to load it using three.js i mean which Geometry should i use ? Can you share me some sample codes ? Thank you. – user6795317 Sep 05 '19 at 08:19

0 Answers0