Three.js: Преобразование прямоугольной (сферической) панорамы в 6-кубовую карту - PullRequest
Новая
       37

Three.js: Преобразование прямоугольной (сферической) панорамы в 6-кубовую карту

0 голосов
/ 12 сентября 2018

Я планирую добавить равноугольную (или сферическую) поддержку панорамы поверх существующей 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, но безуспешно.

Буду признателен за любые идеи по интеграции поддержки прямоугольной (или сферической) панорамы.

...