How can I stop rendering when I click on a button, and resume it after executing another action

[nestorchura2019]

How can I stop rendering when I click on a button, and resume it after executing another action.
in three.js I could do it with

to resume rendering
this.renderer.setAnimationLoop(this.render.bind(this));

to stop rendering
this.renderer.setAnimationLoop(null);

How can stop the render when raycast(clic) the cube and resume when click on the cube again

https://codesandbox.io/s/r3f-start-stop-render-7mkli?file=/src/App.js

[Code47X]

The Canvas has an invalidateFrameLoop prop that does what you're looking for.

https://codesandbox.io/s/r3f-start-stop-render-forked-7zum5

[drcmda]

this would be a solution. you also could set invalidateFrameloop unconditionally on canvas: now it will only render when props change or when something moves, like orbitcontrols. https://codesandbox.io/s/r3f-start-stop-render-forked-3gron?file=/src/App.js the dev tools show 60fps but it isn't really accurate.

[VityaSchel]

Looks like this doesn't work anymore, is there a new solution to completely stop rendering?

[drcmda]

it's called frameloop="demand" as of v6