Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Update examples to use renderer.setAnimationLoop

See original GitHub issue

Since renderer.setAnimationLoop was added a few months back, we should update most of the examples to use this.

It’s cleaner, since it abstracts away the call to requestAnimationFrame and means that a minimal loop now can be done like this:

function init() {

    var scene = ...
    var camera = ...
    var renderer = ...

    renderer.setAnimationLoop( function () {

        renderer.render( scene, camera );

    } );
}

init();

Instead of the current way:


var scene, camera, renderer;

function init() {

    scene = ...
    camera = ...
    renderer = ...

}

function animate() {

    requestAnimationFrame( animate );

    renderer.render( scene, camera );

}

init();
animate();

If people agree, I’ll start to work on converting the examples over the next couple of weeks.

Issue Analytics

State:
Created 5 years ago
Reactions:8
Comments:6 (2 by maintainers)

Top GitHub Comments

3reactions

mrdoobcommented, Nov 13, 2018

I think I like this. But I prefer this pattern:

function init() {

    var scene = ...
    var camera = ...
    var renderer = ...

    renderer.setAnimationLoop( animation );

}

function animation() {

    renderer.render( scene, camera );

}

init();

0reactions

mrdoobcommented, Nov 17, 2018

That won’t work, it would need to be:

Oh yes, sorry. I meant to move the declarations outside.

Top Results From Across the Web

WebGLRenderer#setAnimationLoop – three.js docs

The WebGL renderer displays your beautifully crafted scenes using WebGL. Constructor. WebGLRenderer( parameters : Object ). parameters - (optional) object with ...

The Animation Loop | Discover three.js

We're using the renderer.render method to draw the scene. ... setAnimationLoop was added fairly recently, older three.js examples and tutorials often use ....

three.WebGLRenderer.render JavaScript and Node.js code ...

setAnimationLoop (() => { this.renderer.render(this.scene, this.camera); }); } ... function update() { cube.rotation.x += 0.01; cube.rotation.y += 0.01; ...

ThreeJS Stop Rendering - javascript - Stack Overflow

function animate() { renderer.render(scene, camera); controls.update(); } renderer.setAnimationLoop(animate);.

Adding a Persistence Effect to Three.js Scenes - Codrops

We will render to Framebuffer 2 and update its corresponding THREE.Texture . We will use ... here is our updated example using persistence:....