javascript - 如何在反应三纤维 MapControls 中限制平移距离

Question

我正在使用React Three Fiber和drei。我想知道如何使用MapControls. 网上有一些解决方案，说明如何使用普通文件存档，three.js但不使用MapControlsor OrbitControlsfromdrei和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

基于这个答案，一个解决方案是创建一个'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>