javascript - THREE.js SkyBox

我想在THREE.js中创建一个SkyBox，已经找到了一些创建它的技巧，但是它不起作用。我尝试了所有这些，但没有任何效果。 Filepaths和Imagepaths是正确的。

有人可以解释代码有什么问题吗，为什么没有出现skybox吗？

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Earth</title>
        <meta charset="utf-8">
        <style>
            body {
                margin: 0px;
                background-color: #000000;
                overflow: hidden;
            }
        </style>
    </head>
    <body>

        <script src="../js/three.min.js"></script>

        <script>

            var camera, scene, renderer;
            var mirrorCube, mirrorCubeCamera; // for mirror material
            var mirrorSphere, mirrorSphereCamera; // for mirror material

            init();
            animate();

            function init() {
                renderer = new THREE.WebGLRenderer();
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                document.body.appendChild( renderer.domElement );

                scene = new THREE.Scene();
                camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
                scene.add(camera);
                camera.position.set(0,150,400);
                camera.lookAt(scene.position);

                var sides  = ['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg'];
                var scCube = THREE.ImageUtils.loadTexture(sides);
                scCube.format = THREE.RGBFormat;

                var skyShader = THREE.ShaderLib["cube"];
                skyShader.uniform["tCube"].value = scCube;
                var skyMaterial = new THREE.ShaderMaterial( {
                    fragmentShader: skyShader.fragmentShader, vertexShader: skyShader.vertexShader,
                    uniforms: skyShader.uniforms, depthWrite: false, side: THREE.BackSide
                });

                var skyBox = new THREE.Mesh(new THREE.CubeGeometry(500, 500, 500), skyMaterial);
                skyMaterial.needsUpdate = true;

                scene.add(skyBox);
            }

            function render()
            {
                mirrorSphere.visible = false;
                mirrorSphereCamera.updateCubeMap( renderer, scene );
                mirrorSphere.visible = true;

                renderer.render( scene, camera );
            }

            function onWindowResize() {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize( window.innerWidth, window.innerHeight );
            }

            function animate() {
                requestAnimationFrame( animate );
                render();
                renderer.render( scene, camera );
            }

        </script>

    </body>
</html>

最佳答案

您似乎缺少用于渲染环境贴图以及环境贴图球的摄影机。

// Create the enviroment map camera
mirrorSphereCamera = new THREE.CubeCamera( 0.1, 150000, 512 );
mirrorSphereCamera.renderTarget.minFilter = THREE.LinearMipMapLinearFilter;
scene.add( mirrorSphereCamera );

// Sphere material
var mirrorSphereMaterial = new THREE.MeshBasicMaterial({
    envMap: mirrorSphereCamera.renderTarget
});

// Sphere geometry
mirrorSphere = new THREE.Mesh( sphereGeom, mirrorSphereMaterial );
mirrorSphere.position.set( 1000, 1000, 0 );
mirrorSphereCamera.position = mirrorSphere.position;
scene.add(mirrorSphere);

Skybox

javascript - THREE.js SkyBox