Three.js, WebGL, рендеринг панорамы шести изображений

Question

Я построил одну панораму, используя three.js и рендеринг CSS3D, теперь я хочу сделать то же самое с помощью средства визуализации WebGL.

В CSS3D, следующий код получает меня совершенно флеш и unbreaking панорамы:

var sides = [ 
{ 
url: '/assets/posx.jpg', 
position: [ -644, 0, 0 ], 
rotation: [ 0, Math.PI/2, 0 ] 
}, 
{ 
url: '/assets/negx.jpg', 
position: [ 644, 0, 0 ], 
rotation: [ 0, -Math.PI/2, 0 ] 
}, 
{ 
url: '/assets/posy.jpg', 
position: [ 0, 644, 0 ], 
rotation: [ Math.PI/2, 0, Math.PI ] 
}, 
{ 
url: '/assets/negy.jpg', 
position: [ 0, -644, 0 ], 
rotation: [ -Math.PI/2, 0, Math.PI ] 
}, 
{ 
url: '/assets/posz.jpg', 
position: [ 0, 0, 644 ], 
rotation: [ 0, Math.PI, 0 ] 
}, 
{ 
url: '/assets/negz.jpg', 
position: [ 0, 0, -644 ], 
rotation: [ 0, 0, 0 ] 
} 
]; 
for (var i = 0; i < sides.length; i++) { 
var side = sides[ i ]; 
var element = document.createElement('img'); 
element.width = 1300; 
element.height = 1300; 
element.src = side.url; 
var object = new THREE.CSS3DObject(element); 
object.position.fromArray(side.position); 
object.rotation.fromArray(side.rotation); 
scene.add(object); 
} 

[сторона вопроса: там должно быть лучшим способом форматирования вставленного кода, отличными происходит построчно и ударять пространство 4 раза, вправо]

Вот мой эквивалент код для WebGL, что делает изображения, но это не совсем чистое, и есть явный разрыв, где перекрытие изображения не имеет визуальный смысл:

var sides = [ 
     { 
      url: '/assets/posx.jpg' 
     }, 
     { 
      url: '/assets/negx.jpg' 
     }, 
     { 
      url: '/assets/posy.jpg' 
     }, 
     { 
      url: '/assets/negy.jpg' 
     }, 
     { 
      url: '/assets/posz.jpg' 
     }, 
     { 
      url: '/assets/negz.jpg' 
     } 
    ]; 

    //i chose 8 for this because other numbers i tried rendered interesting 
    //distortions into the images 
    var k = 8 
    for (var i = 0; i < sides.length; i++) { 

     var side = sides[ i ]; 
     var geometry = new THREE.SphereGeometry(10, k, k); 
     k += 8; 
     geometry.applyMatrix(new THREE.Matrix4().makeScale(-1, 1, 1)); 

     var material = new THREE.MeshBasicMaterial({ 
      map: THREE.ImageUtils.loadTexture(side.url) 
     }); 
     mesh = new THREE.Mesh(geometry, material); 
     scene.add(mesh); 

    } 

Итак, есть стандартный метод проецирования шести изображений в панораму с использованием Three.js и механизма рендеринга WebGl?

Answer 1

Что вы ищете, называется «skybox».

Существует самый простой пример: https://stemkoski.github.io/Three.js/Skybox.html

в этой части вы вставляя изображения:

var imagePrefix = "images/dawnmountain-"; 
var directions = ["xpos", "xneg", "ypos", "yneg", "zpos", "zneg"]; 
var imageSuffix = ".png"; 
var skyGeometry = new THREE.CubeGeometry(5000, 5000, 5000); 

var materialArray = []; 
for (var i = 0; i < 6; i++) 
    materialArray.push(new THREE.MeshBasicMaterial({ 
     map: THREE.ImageUtils.loadTexture(imagePrefix + directions[i] + imageSuffix), 
     side: THREE.BackSide 
    })); 
var skyMaterial = new THREE.MeshFaceMaterial(materialArray); 
var skyBox = new THREE.Mesh(skyGeometry, skyMaterial); 
scene.add(skyBox);