0

有什么方法可以访问controls场景的实例react-three-fiber吗？

我知道可以使用以下引用来访问它：

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()
4

1 回答 1

1

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

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

例如（请记住，我没有测试此代码）：

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>
)

但是，我认为这不是一个好习惯。您可能希望将所有控制器代码保存在一个组件中。如果你需要将它共享给另一个组件，你可以简单地将它传递到一个 prop 中。

于 2021-01-11T13:28:17.887 回答