Question

我们有一个加载球形全景图的Web应用程序。此应用程序是使用Three.js开发的。纹理是360度图像。随着图像尺寸变大，加载速度变慢。我们希望如何通过将图像平铺成小块并仅加载可见部分的图块来实现。感谢您的帮助！

Answer 1

通常会将360度全景图像作为立方体贴图加载，例如http://www.humus.name/Textures/SaintPetersSquare1.jpg

您可以将立方体贴图分割成许多图像，就像大多数THREE.js示例中所做的那样

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;

要使您的图像加载更加可忍受，请使用ImageLoader和LoadManager将一个事件添加到图像加载中：

ImageLoader

如何加载球面全景图像平铺

1 个答案: