CODEWITHSUNDEEP
javascriptthree.js
mapgiordani
mapgiordani

Reputation: 65

How can I control when render three js scene

All examples that I saw, uses a loop structure to render the scene, like that:

renderer.render(cena, camera);

function render(){
    renderer.render(cena, camera);
    //code to render
    requestAnimationFrame(render);
}

render();

But I want to control the rendering in another structure, only when I interact with a thing... like

while(true){
//code - operations
alert('press ok to another step'); // or wait 2 sec
renderer.render(scene,camera);
}

What is the correct method to do this?

Upvotes: 0

Views: 448

Answers (2)

Thomasn
Thomasn

Reputation: 483

as shown in this example, you can simply call renderer.render() http://threejs.org/examples/#raytracing_sandbox

Upvotes: 0

ShuberFu
ShuberFu

Reputation: 709

Of course, if you want, you can call renderer.render at anytime, although it would probably be a lot better to render it in the requestAnimationFrame() (much better performance). If you really have a need to change something that you don't want to be renderer (say, several async functions modifying scene object), you can always do something like this.

function render(){
    //code to update scene
    if (toRender) renderer.render(scene, camera);
    requestAnimationFrame(render);
}

render();

Set toRender to false while you're updating the scene, this prevent the renderer from re-drawing your scene, then set toRender back to true to have it draw the scene in the next frame.

Upvotes: 1

Related Questions