How to click a button outside of r3f and pass the click into r3f?

[jparismorgan]

Hi there, I would like to have a <button> outside of r3f that I can click and then tell r3f that I clicked.

The use case is similar to this question where I want to export some meshes from the r3f scene based on the click: https://stackoverflow.com/questions/71874160/how-to-export-obj-file-using-react-three-fiber

A minimal and working repro can be found here: https://codesandbox.io/s/shy-worker-g64peh?file=/src/App.js

Thank you for any help!

[danburonline]

Have you considered using a global state management library like Zustand? As long as it's not something inside the render loop (i.e. it's not changing something within 60fps+ loops) then you should be fine with that too. Either way, depending on the size of the app, you might want to reconsider using a global state management tool instead of trying to pass functions and props into the React tree.

[gene-ius]

Quick follow-up question regarding using Zustand Global State Management! I would be a complete noob using Zustand so I am wondering if all instances of useState hooks used in components (both r3f and regular react components) would have to be migrated to use Zustand? Or could a combination of both be used? I am in a similar position as @jparismorgan , in which I just want to load a new mesh when a button is clicked , but additionally in the dom, text must be updated to show information about the newly loaded mesh. I greatly appreciate your help!

[drcmda]

ref on canvas gives you the html canvas element which is useless for what you are trying to do. there are many way in which you can access canvas state, for instance onCreated

const [state, set] = useState()
return <Canvas onCreated={set} />

state will contains the scene, camera, everything you need.

[gene-ius]

What if you have defined a three.js mesh - using react three fiber - within the canvas? I wish to change the state of just that mesh with the click of a html button. The button is responsible for updating both the mesh in the react scene and a text description in the dom describing the newly loaded mesh. Also, when you say ref, are you referring to the useRef hook or something else?

[symbiosdotwiki]

There needs to be a standard solution for this, Building a web interface for r3f using normal react is essential.