How to manually call renderer.render(scene, camera) of the Canvas?

[trusktr]

How can we get the references to the scene (camera is easy, just add one to the markup and use ref) and renderer, in order to manually render?

---

The simplified answer, so you don't have to scan below, is to use r3f's useThree hook to get the internal context of the <Canvas>, and then we can manually render things like this:

const {gl: renderer, scene, camera} = useThree()
// ...
renderer.render(scene, camera) // manually render the scene

If you defined your own camera (f.e. with <perspectiveCamera>), then you can use a ref to get a reference to it, and pass your custom camera for the camera arg to the renderer.render call.

[drcmda]

you can always call gl.render inside useFrame((state, delta) => state.gl.render(state.scene, state.camera)), for instance if you wanted to render into an off-buffer: https://codesandbox.io/s/r3f-render-target-qgcrx

but you can also take over the render loop by providing an index: useFrame((state, delta) => ..., index)

https://codesandbox.io/s/react-three-fiber-viewcube-py4db

if there's a non zero index the renderloop belongs to you, and you can even chain render passes like that (bigger index comes last). once the component unmounts the renderloop goes back to normal (automated by r3f)

[trusktr]

Oh, nice, that's a simple way to hook them into a class component!

[trusktr]

But I don't want a game loop, I am trying to manually re-render the scene when changes outside of React happen.

The whole app is mostly plain JS, and I am introducing r3f only to some parts, and need to tell the Canvas to update even when nothing related to react state has changed.

I tried using forceUpdate() in my class component after changing non-r3f content, but even that seems to have a race condition where sometimes it renders before or after r3f stuff is ready to draw. I haven't pinpointed the exact issue yet.

Basically my case is not simple r3f, because it's mostly plain Three.js.

[trusktr]

If I am not mistaken, does useFrame imply I will be using a game loop? Basically I want invalidateFrameloop to be true, then to manually render the underlying renderer.

Let me give it a try....

[trusktr]

Hey, if Canvas were a class component, it could easily expose a renderThree method. 😃

[trusktr]

@drcmda Ah, you know what, I could easily wrap r3f's <Canvas> inside a HoC class-component also named <Canvas> to add the new renderThree method (internally it will useThree to get the context)!

I realized this after learning how to wrap useThree using the trick from your last comment. Thanks!