Scene is always blank

Questions
1

Hey guys, I’m a super newbie and following a tutorial but I’m getting a blank scene, can you tell me what I’m doing wrong? (I also tried leaving ‘scene’ inside the init() and call the createBox() and scene.add(box) calls within init(), but it didn’t work either)
Many thanks!

var scene;

function init() {

    scene = new THREE.Scene();
    var aspect = window.innerWidth / window.innerHeight;
    
    var camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 1000);
    camera.position.z = 5;
    
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById('webgl').appendChild(renderer.domElement);
    renderer.render(scene, camera);
    
}


function createBox(w, h, d){
    var box = new THREE.BoxGeometry(w, h, d);
    var material = new THREE.MeshBasicMaterial({
        color:0x00ff00
    });

    var mesh = new THREE.Mesh(box, material);

    return mesh;
}


init();

var aBox = createBox(1, 1, 1);
scene.add(aBox);
2

Please read this
https://threejs.org/docs/index.html#manual/introduction/Creating-a-scene

Rendering the scene

If you copied the code from above into the HTML file we created earlier, you wouldn’t be able to see anything. This is because we’re not actually rendering anything yet. For that, we need what’s called a render or animate loop.

function animate() {

	requestAnimationFrame( animate );
	renderer.render( scene, camera );

}

animate();

This will create a loop that causes the renderer to draw the scene every time the screen is refreshed (on a typical screen this means 60 times per second).

1 Like
3

Thanks a lot for your through explanation hofk! :slight_smile: I’ll make sure to read the manual from scratch…