Question

I’m about to learn three.js. I’ve downloaded the library from github: three.js

I tried to run the first example of three.js in the link above. The weird problem is, it’s working in jsFiddle but it not working in my computer.

I’ve this error in console:

TypeError: document.body is null
[Break On This Error]   
document.body.appendChild( renderer.domElement );

jsFiddle Live Working Demo

And here is my code exactly copied from link above:

And yes the three.js included in the page.

    var camera, scene, renderer;
    var geometry, material, mesh;

    init();
    animate();

    function init() {

        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.z = 1000;

        scene = new THREE.Scene();

        geometry = new THREE.CubeGeometry( 200, 200, 200 );
        material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

        mesh = new THREE.Mesh( geometry, material );
        scene.add( mesh );

        renderer = new THREE.CanvasRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );

        document.body.appendChild( renderer.domElement );

    }

    function animate() {

        // note: three.js includes requestAnimationFrame shim
        requestAnimationFrame( animate );

        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;

        renderer.render( scene, camera );

    }

Answer 1

Your code is running before the browser has parsed the HTML document and built the DOM. That’s why document.body is undefined.

Use a “load” event handler:

window.onload = function() {
  // all that code here
};

Your jsfiddle version worked because that site does that for you; it’s what the top selection thing is for on the left-hand side control panel.

Oh, also, you have to be careful when copying code from jsfiddle. Unless they’ve fixed it with the recent facelift, it’s really easy to pick up weird hidden characters when you copy/paste, causing mysterious JavaScript errors.