Observing properties in a Three.Js Scene in React

Question

I've implemented a ThreeJs Scene as a React component following the style used here ; however, I'm having trouble with how to properly update the Scene using state from it's parent component. In my implementation, certain properties are configurable by the user (height of an object, it's color, etc.) through sliders, menus, etc. which are their own separate React components. Each of these lift their state up to the Three Scene's parent component. Normally, I could pass these back down as props and the component would rerender if needed, but in this case ThreeJs needs to decide when to update and render as the DOM is not changing.

Is there a way for the Three Scene Component to "Observe" it's props and then handle updates to the scene when they change. In a traditional application I would use the Observer Pattern, but I'm not sure how to implement that here.

Answer 1

Natively ThreeJS requires you to update component by yourself. You can implement getter/setter or in useEffect hook to trigger the update function as below

https://threejs.org/docs/#manual/en/introduction/How-to-update-things

And you can also try this project which provides state changes reaction to ThreeJS component

https://github.com/react-spring/react-three-fiber