CODEWITHSUNDEEP
javascriptthree.jsskybox
Ramy
Ramy

Reputation: 33

THREE.js SkyBox

I want to create a SkyBox in THREE.js, already found a few tipps how to create it, but it doesnt work. I tried all of them but nothing works. The Filepaths and Imagepaths are right.

Can Someone explain whats wrong with the code and why the skybox doesnt appear?

<!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>

Upvotes: 2

Views: 2227

Answers (2)

Paul Hutson
Paul Hutson

Reputation: 25

You've not added a light to the scene.

Use the following code to add some lighting and you should be OK:

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

Of course, you could just use an ambient light (although I've not tried that in my skybox scene) - the following should allow you to do that:

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

Hope that helps!

Upvotes: 0

Adrian Moisa
Adrian Moisa

Reputation: 4343

You seem to be missing the camera wich renders the environment map and also the sphere with the environement map. 

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

Upvotes: 1

Related Questions