How to correctly take over the render loop when loading assets

[alexbrt]

First of all, I would like to share my appreciation for this great library. Amazing job guys! ⭐

I'm currently building a rather complex animation which (as far as I can tell) can only be done via imperative code, manually issuing Three.js renders within the useFrame hook. Recently, I discovered some unwanted behavior which I'm not sure whether or not is a bug.

I have an object which is added to the scene declaratively with the <primitive object={...} /> tag, instantiated in a useMemo hook, and assigned a material and rendered in the useFrame hook. The material is assigned in useFrame because I'm hot-swapping the material of the mesh and overlaying multiple renders.

So far, everything works as expected. However, some SVG assets need to be loaded before rendering the scene via the useLoader hook, coupled with a top-level <Suspense fallback={null}> component. Things start to break here. Apparently, when adding the above code, there are a couple of renders issued to Three.js before running the code in the useFrame hook, one of which renders the object mentioned above. This causes a brief white flash of the object when loading the page, because the object does not yet have a material.

I wasn't able to replicate the flash in a sandbox but the initial renders issued before running the code in useFrame can be seen in the debugger in the following one: CodeSandbox

If this is not a bug, what would be the correct way to imperatively render objects when loading assets?

[drcmda]

not sure what i am looking at here, there is no console output in that demo. suspense will interrupt the component, it wont even get to the useframe part until the model has loaded, until then r3f will render as usual because nothing has informed it about something taking over the render loop.

useframe executes 60 times per second, i don't think this is the place to set a material btw. that should be useEffect (executes after paint) or useLayoutEffect (executes before paint)

what is that complex animation about though, why do you need to imperatively render it?

[alexbrt]

Apologies for the slow reply. After upgrading a few dependencies including three and r3f, the above flickering cannot be reproduced, so I guess it's no longer a problem.

I'm currently trying to recreate the following demo made by Lorenzo Cadamuro.

Regarding the need to imperatively render the animation, my take on it is that I have one mesh (the cube) which I need render with different materials (mask, displacement, reflection, content) in some intermediate framebuffers used as textures in the final shader which renders everything to screen. To do the above, I have a series of cubeMesh.material = shaderMaterial, gl.setRenderTarget() and gl.render(...) in useFrame. If there's any better way to do it please let me know 😄 !

[drcmda]

no thats exactly what useframe is for. i have tons of examples doing something like that, for instance: https://codesandbox.io/s/r3f-floating-diamonds-prb9t