How to re-render when foreign object (passed to <primitive>) is updated?

[trusktr]

What's the official way to tell r3f to re-render when an object from outside is updated (without a continual game loop)?

For example, I have something like this:

<primitive object={foreignObject}></primitive>

then outside of react-three-fiber, outside of React, that object gets updated sometimes (I know when it happens).

If I do not use invalidateFrameLoop, things work fine (it is continually re-rendering so it picks up the updates).

But I'd like to not have a continuous loop. How do we arbitrarily tell r3f when to re-render?

This is similar to discussion in #868, but specifically, I need to tell r3f to re-render the three.js scene after a foreign object has been updated.

[drcmda]

you can invalidate yourself

import { invalidate } from "react-three-fiber"

  ...
  foreignObject.position.x = foo
  invalidate()

<primitive object={foreignObject} />

alternatively you can also get it from useThree

const { invalidate } = useThree()
...
invalidate()

the difference is, if you have multiple canvases the global one will invalidate them all, the local one via useThree will only invalidate its own canvas.

it will otherwise invalidate automatically when props change (including those of your primitive). 3rd party controls that move stuff or animate invalidate automatically as well (all of drei's controls like orbit and so on, react-spring, etc).

[trusktr]

Ah, that's helpful. I hadn't connected those dots yet. Thanks!