在 React 中观察 Three.Js 场景中的属性

Question

我已经按照 here 使用的样式将 ThreeJs 场景作为 React 组件实现了；但是，我在如何使用其父组件的状态正确更新场景时遇到了麻烦。在我的实现中，用户可以通过滑块、菜单等来配置某些属性（对象的高度、颜色等），这些都是它们自己独立的 React 组件。这些中的每一个都将它们的状态提升到三个场景的父组件。通常，我可以将这些作为道具传递回去，如果需要，组件会重新渲染，但在这种情况下，ThreeJs 需要决定何时更新和渲染，因为 DOM 没有变化。

有没有办法让三场景组件“观察”它的道具，然后在它们发生变化时处理对场景的更新。在传统应用程序中，我会使用观察者模式，但我不确定如何在这里实现。

Answer 1

原生 ThreeJS 需要你自己更新组件。您可以实现 getter/setter 或在 useEffect 钩子中触发更新功能，如下所示

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

你也可以试试这个为 ThreeJS 组件提供状态变化反应的项目

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