Three.js, WebGL, 渲染六张图片的全景图

Question

我使用 three.js 和 CSS3D 渲染器制作了一张全景图，现在我想使用 WebGL 渲染器做同样的事情。

在 CSS3D 中，下面的代码让我得到了一个完美齐平且完整的全景图：

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);
}

[附带问题：必须有更好的方法来格式化粘贴的代码，而不是逐行输入并点击 space 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 );

Three.js, WebGL, 渲染六张图片的全景图

Three.js, WebGL, render panorama of six images

javascript

panoramas

three.js