THREE.js SkyBox

Я хочу создать SkyBox в THREE.js, уже нашел несколько советов, как его создать, но это не работает. Я пробовал их все, но ничего не работает. Пути к файлам и пути к изображениям правильные.

Может кто-нибудь объяснить, что не так с кодом и почему не появляется скайбокс?

<!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
person Ramy    schedule 03.06.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Кажется, вам не хватает камеры, которая отображает карту окружения, а также сферу с картой окружения.

// 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);
person Adrian Moisa    schedule 03.06.2015

arrow_upward
0
arrow_downward

Вы не добавили света в сцену.

Используйте следующий код, чтобы добавить немного освещения, и все будет в порядке:

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

Надеюсь, это поможет!

person Paul Hutson    schedule 04.01.2016