Question

我计划在现有的6立方全景图的顶部添加等矩形（或球形）全景图支持。我发现该库可以通过将等矩形图像转换为6个立方体来轻松实现此目的：

https://github.com/spite/THREE.EquirectangularToCubemap

我们可以简单地使用equiToCube.convert( texture, 1024 )：

renderer = new THREE.WebGLRenderer();
var loader = new THREE.TextureLoader();
loader.load( 'equirectangular-panorama.jpg', function( res ) {
    var equiToCube = new EquirectangularToCubemap( renderer );  
    mesh = new THREE.Mesh(
       new THREE.TorusKnotGeometry( 10, 3, 100, 32 ),
       new THREE.MeshBasicMaterial( { envMap: equiToCube.convert( res, 1024 ) } )
    );
    scene.add( mesh );
} );

看起来很简单。但是，我的6立方图像加载方法如下所示：

function getTextureCube(path, step, total){
  var urls = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg"];
  var loader = new THREE.CubeTextureLoader();
  var maxAnisotropy = renderer.getMaxAnisotropy();
  var textureCube = loader.load(urls, function(texture){
        texture.minFilter = THREE.NearestFilter;
        texture.anisotropy = maxAnisotropy;
        texture.wrapS = THREE.RepeatWrapping;
        texture.repeat.x = -1;
    }, function ( xhr ) {
        log( (xhr.loaded / xhr.total * 100) + '% loaded' );
    }, function ( xhr ) {
        log( 'error loading texture', xhr );
    });
  return textureCube;
}

我无法成功利用equiToCube.convert( texture, 1024 )进行转换，从而导致黑屏而不是全景。

function getEquirectangularTextureCube(path, step, total){
   var loader = new THREE.TextureLoader(); // Note TextureLoader
   var maxAnisotropy = renderer.getMaxAnisotropy();
   var equiToCube = new EquirectangularToCubemap( renderer );
   var textureCube = loader.load(path, function(texture){
      texture.minFilter = THREE.NearestFilter;
      texture.anisotropy = maxAnisotropy;
      texture.wrapS = THREE.RepeatWrapping;
      texture.repeat.x = -1;
   }, function ( xhr ) {
      log( (xhr.loaded / xhr.total * 100) + '% loaded' );
   }, function ( xhr ) {
      log( 'error loading texture', xhr );
   });
   return equiToCube.convert( textureCube, 2048 );  // Note .convert
}

一些想法可以帮助您：如果可以帮助返回答案，则此返回的纹理可用于片段着色器和制服。另外，我可能未正确使用equiToCube-我确实在loader.load中使用了它，但未成功。

任何将如何集成等矩形（或球形）全景图支持的想法都将受到赞赏。

Three.js：将等角（球形）全景图转换为6立方体贴图

0 个答案: