Detect when object has rendered

[axelboc]

I have a bunch of E2E tests that take screenshots of my canvas, and I'm looking for a way to know precisely when to take the screenshots. I can log something to the console and look for this log in my E2E tests, but I need to log at the correct time -- that is, when the scene has "finished rendering", or when a specific object has rendered.

My attempt with useFrame was unsuccessful: I have a <mesh /> with a name and I wait for this mesh to appear in the children of the scene (state.scene.children) before logging to the console. Unfortunately, this doesn't seem to do the trick: my screenshot remains blank. Is this the way to go and I just need to look for some other property of the state? Or is useFrame just not the right solution?

addAfterEffect seems promising, but I have to clue how to use it to detect the rendering of a specific object.

[CodyJasonBennett]

You can use Object3D.onAfterRender to check when your object is rendered.

<mesh
  onAfterRender={state => console.log(state)}
/>

Alternatively, as seen in the comments, react-three-fiber also has a global callback.

import { addAfterEffect } from 'react-three-fiber'

addAfterEffect(() => console.log('Rendered'))

[drcmda]

There's also a global export addAfterEffect or something like that, this would trigger if rendering has commenced period no matter how many objects