Browser crashes while loading high quality images in three.js?

519 Views Asked by At

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.

0

There are 0 best solutions below