如何加载球形全景图图块

Question

We have a web application which loads a spherical panorama. This application is developed using Three.js. Texture is a 360 degree image. As the image size becomes big the loading is slow. We would like how this can be over come by tiling the images into small pieces and load the tiles of the visible part only. Appreciate your help!

Answer 1

Usually 360 panoramic images are loaded in as cube-maps, so something like http://www.humus.name/Textures/SaintPetersSquare1.jpg

You can split the cubemap up into many images, as is done in most THREE.js examples

http://threejs.org/examples/#webgl_materials_cubemap

var path = "textures/cube/SwedishRoyalCastle/";
var format = '.jpg';
var urls = [
    path + 'px' + format, path + 'nx' + format,
    path + 'py' + format, path + 'ny' + format,
    path + 'pz' + format, path + 'nz' + format
  ];

var reflectionCube = THREE.ImageUtils.loadTextureCube( urls );
reflectionCube.format = THREE.RGBFormat;

var refractionCube = new THREE.CubeTexture( reflectionCube.image, THREE.CubeRefractionMapping );
refractionCube.format = THREE.RGBFormat;

To make your image loading more bearable, add an event to the image loading, using the ImageLoader and LoadManager:

ImageLoader