On rendering getting black screen in three.js

Question

The code below is showing black screen even though body background color is #135462. I am thinking that its showing black screen due to rendering code. But not able to remove that black screen and getting the background color.

Object also is not displaying on the screen. My object link can be found here: https://www.dropbox.com/s/ukw7k1vyqkg4f7d/SupermanSmall.json?dl=0

Anyone have any ideas on why this is happening?

    <!DOCTYPE html>
<html lang="en">
    <head>
        <title>My three.js</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                background:#135462;
                color:#fff;
                padding:0;
                margin:0;
                overflow:hidden;
                font-family:georgia;
                text-align:center;
            }


        </style>
    </head>

    <body>          

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

            <script src="js/loaders/ObjectLoader.js"></script>
            <script src="js/Detector.js"></script>

          <script>
          if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

                        var container;
            var camera, scene, renderer;

            var windowHalfX = window.innerWidth / 2;
            var windowHalfY = window.innerHeight / 2;

            init();
            animate();

            function init() {
                container = document.createElement( 'div' );
                document.body.appendChild( container );

                camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 10000 );
                camera.position.z = 5;

                scene = new THREE.Scene();
                scene.add( camera );

                var loader = new THREE.ObjectLoader();
                loader.load( "obj/superman/SupermanSmall.json", function(obj){

                scene.add(obj);

                });

                renderer = new THREE.WebGLRenderer();
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                container.appendChild( renderer.domElement );



            }

            function animate() {

                    requestAnimationFrame( animate );
                    camera.lookAt( scene.position );

                    renderer.render( scene, camera );

            }

          </script>

    </body>
</html>

look at the javascript console messages. are there any errors there? — gaitat, Mar 21 '15 at 15:12
@ gaitat: "THREE.WebGLRenderer" "70" three.min.js:513:51 not well-formed SupermanSmall.json:1:1 TypeError: THREE[a.type] is not a constructor three.min.js:274:292. This is what I have in console. — kiran, Mar 24 '15 at 07:17
thats why you get black screen. because you have errors in your code. — gaitat, Mar 24 '15 at 14:22
@kiran - it's good practice to look at the answers and upvote/accept them if they provided a solution to your problem. — Matteo, May 29 '17 at 17:02

matthew ludwigs · Answer 1 · 2015-11-10T16:30:27.393

5

I am guessing that once you fix your errors you might still have a black screen. Try adding this:

renderer.setClearColor(0xEEEEEE);

Or whatever color you want to put in there. You can also do this if you want:

renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));

This should change your background color.

edited Nov 10 '15 at 16:30

answered Nov 10 '15 at 16:24

matthew ludwigs

51
1
4

Matteo · Answer 2 · 2016-08-24T22:23:03.293

Another solution is to set the alpha property of the renderer to true. That will allow transparency to show the background you defined in the CSS, i.e.:

CSS

body {
    background: linear-gradient(#e4e0ba, #f7d9aa);
    margin: 0px;
    overflow: hidden;
}

Javascript

// Create the renderer
renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild( renderer.domElement );

On rendering getting black screen in three.js

2 Answers2

Linked