三.js 天空盒答案

【问题标题】：THREE.js SkyBox三.js 天空盒
【发布时间】：2017-01-02 04:34:12
【问题描述】：

我想在 THREE.js 中创建一个 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>

【问题讨论】：

标签： javascript three.js skybox

【解决方案1】：

您似乎缺少渲染环境贴图的相机以及带有环境贴图的球体。

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

【讨论】：

【解决方案2】：

您尚未在场景中添加灯光。

使用下面的代码添加一些光照应该没问题：

// Lighting in general
// Light one
var light = new THREE.PointLight(0x999999, 2, 100);
light.position.set(50, 50, 50);
scene.add(light);

// Light two
var lightScene = new THREE.PointLight(0x999999, 2, 100);
lightScene.position.set(0, 5, 0);
scene.add(lightScene);

当然，您可以只使用环境光（虽然我没有在我的天空盒场景中尝试过） - 以下内容应该允许您这样做：

var light = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light );

希望有帮助！

【讨论】：