Updating DIV style and others DOM properties from camera moves

[Albanbrice]

Hello,

I'm trying to animate a property (the 2D position of a DIV) from the camera position and rotation.
The idea is to represent the location of the current 3d camera (depicted as blue-green compass) over a SVG floor plan of the 3d scene.

I easily found my way in pure and old fashioned three.js with some variables and functions... but so far I fail with react and three-fiber, being totally new in both.
I do believe it can be achieved with a zustand store, but somehow I don't now how to synchronize in my SetupCompass component the values I should be getting from the useFrame loop initiated in controls.jsx
If someone here has an idea how to manage this, please feel free to have a look at my sandbox.
Thanks in advance

https://codesandbox.io/s/wizardly-chandrasekhar-0cicz?file=/src/components/plan/plan-svg.jsx

[drcmda]

there is no difference between r3f and three, everything you did in your vanilla app you can do here in a similar manner. if you have a reference to that svg component or a store or anything that allows you to bridge these two, then you can write values to it in a camera component within the canvas.