Three.js 3D cube spins faster and faster when re-initializing

Question

I am trying to understand this: The first Three.js example with a spinning 3D cube spins faster and faster every time it is re-initialized.

The code has an init function that sets up the scene and an animate function that starts the animation loop. If I repeatedly call init and animate, I expect the cube to reset completely but instead the cube is spinning faster and faster every time it it re-initialized.

Why is this happening?
Isn't the object being properly re-initialized?
Is it a feature of three.js or JavaScript?

Here is a JS Fiddle that shows the what I'm talking about. I have set it up to re-initialize every two seconds: http://jsfiddle.net/1hq2esLr/ (tested in Firefox and Chrome)

Here is the full code:

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

function init() {
    scene = new THREE.Scene();

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

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

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

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

    // render-aread is just a <div id="render-area"></div>
    var renderarea = document.getElementById('render-area');

    // Remove all existing nodes.
    while (renderarea.firstChild) {
        renderarea.removeChild(renderarea.firstChild);
    }
    renderarea.appendChild( renderer.domElement );
}

function animate() {
    requestAnimationFrame( animate );
    render();

}

function render() {
    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    renderer.render( scene, camera );
}

// Calling this function repeatedly increases the speed of the spinning cube.
// Global variable problem?
function start() {
    init();
    animate();
}

Nikola Dimitroff · Accepted Answer · 2014-08-17 21:18:06Z

5

Your previous scene isn't disposed when calling start the second time. You are seeing multiple scenes rendered on top of one another and that creates the illusion that the mesh is going faster. The reason behind this is that once fired, animate keeps calling requestAnimationFrame(animate) and thus any object that animate references stays alive and is not garbage collected.

To fix things, you need to cancel the animation:

var id = null;
function start() {
    if (id !== null) 
        cancelAnimationFrame(id)   
     ...
}

function animate() {
    id = requestAnimationFrame( animate );
    render();
}

Now your objects will properly go out of scope and the garbage collector will do his job.

edited Aug 17, 2014 at 21:18

answered Aug 17, 2014 at 21:06

Nikola Dimitroff

6,2572 gold badges28 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Three.js 3D cube spins faster and faster when re-initializing

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related