如何访问react-three-fiber中的控件实例？

Question

有没有办法在react-three-fiber中访问场景的controls实例

我知道可以使用下面这样的引用来访问它：

import { useFrame } from 'react-three-fiber'

const controls = useRef()
useFrame(state => controls.current.update())
return <orbitControls ref={controls} />

但我正在寻找一种全球访问方式，比如：

    const { 
        gl,         // WebGL renderer
        scene,      // Default scene
        camera,     // Default camera
    } = useThree()

Answer 1

我不认为你可以开箱即用。

实现类似useThree示例的一种方法是将控件ref存储在上下文中，然后您应该能够在组件树的任何后代中使用它来消费该上下文。

例如(请记住，我没有测试这段代码)：

const ControlsContext = createContext()

const ControlsContainer = ({ children }) => {
  const controls = useRef()
  return (
    <ControlsContext.Provider value={{ controls: controls.current }}>
      <orbitControls ref={controls} />
      {children}
    </ControlsContext.Provider>
  )
}

const YourComponent = () => {
  const { controls } = useContext(ControlsContext)
  // do whatever you need, but remember to check if it's defined
}

const App = () => (
  <ControlsContainer>
    <YourComponent />
  </ControlsContainer>
)

然而，我不认为这是一个好的实践。您可能希望将所有控制器代码放在一个组件中。如果你需要将它共享给另一个组件，你可以简单地在一个道具中传递它。