javascript - 如何限制 react 三纤维MapControls中的平移距离

Question

我正在使用 React Three Fiber和 drei .我想知道如何使用 MapControls 限制最大平移距离. 网上有一些关于如何使用普通 three.js 存档的解决方案。但没有使用 MapControls或 OrbitControls来自 drei和 r3f .

我试过了，但是一旦达到极限，相机就会出现奇怪的故障。

function Controls() {
  const { camera } = useThree();

  useFrame(() => {
    camera.position.x = THREE.MathUtils.clamp(camera.position.x, -90, 90)
    camera.position.y = THREE.MathUtils.clamp(camera.position.y, -90, 90)
  })
  
  return (
    <MapControls />
  )
}

谢谢你的帮助

亚历山大

Answer 1

基于 this一个解决方案是创建一个看起来像这样的自定义 'Controls' 组件。

const Controls = () => {
  const { camera } = useThree()
  const controlsRef = useRef()    

  useEffect(() => {
    controlsRef.current.addEventListener('change', function () {
      if (this.target.y < -10) {
        this.target.y = -10
        camera.position.y = -10
      } else if (this.target.y > 10) {
        this.target.y = 10
        camera.position.y = 10
      }
    })
  }, [])

  return (
    <MapControls ref={controlsRef} enableZoom={false} enableRotate={false} />
  )
}

然后可以将其用作 Canvas 组件的子组件。

<Canvas>
  <Controls />
</Canvas>