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

你在找什麼叫做「天空盒」。

有一個最簡單的例子： 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);