如何在React Three Fiber的MapControls中限制最大平移距离

卡顿原因 #

MapControls 执行平移操作时会同步更新相机位置和控制目标点（target） 两个属性，你之前的实现只限制了相机位置，target 仍然会超出边界，两者数值冲突就会出现卡顿、跳闪的问题。

可行解决方案 #

方案1：帧循环限制（适配所有动态场景）

通过 ref 拿到 MapControls 实例，每帧同步限制 target 和相机位置即可解决冲突：

import { useRef } from 'react'
import { MapControls } from '@react-three/drei'
import { useThree, useFrame } from '@react-three/fiber'
import * as THREE from 'three'

function Controls() {
  const { camera } = useThree();
  const controlsRef = useRef(null);
  // 自定义平移边界值
  const MAX_BOUNDARY = 90;
  const MIN_BOUNDARY = -90;

  useFrame(() => {
    if (!controlsRef.current) return;
    // 限制控制目标点坐标
    controlsRef.current.target.x = THREE.MathUtils.clamp(controlsRef.current.target.x, MIN_BOUNDARY, MAX_BOUNDARY)
    controlsRef.current.target.y = THREE.MathUtils.clamp(controlsRef.current.target.y, MIN_BOUNDARY, MAX_BOUNDARY)
    // 限制相机坐标
    camera.position.x = THREE.MathUtils.clamp(camera.position.x, MIN_BOUNDARY, MAX_BOUNDARY)
    camera.position.y = THREE.MathUtils.clamp(camera.position.y, MIN_BOUNDARY, MAX_BOUNDARY)
    // 手动更新控件保证数值同步
    controlsRef.current.update()
  })
  
  return <MapControls ref={controlsRef} />
}

方案2：事件回调限制（性能更优）

如果你的场景没有其它会主动修改相机位置的逻辑，可以用 onChange 回调实现，只有用户操作控件时才会执行限制逻辑：

import { MapControls } from '@react-three/drei'
import { useThree } from '@react-three/fiber'
import * as THREE from 'three'

function Controls() {
  const { camera } = useThree();
  const MAX_BOUNDARY = 90;
  const MIN_BOUNDARY = -90;

  const handleControlUpdate = (e) => {
    const controls = e.target
    // 限制控制目标点坐标
    controls.target.x = THREE.MathUtils.clamp(controls.target.x, MIN_BOUNDARY, MAX_BOUNDARY)
    controls.target.y = THREE.MathUtils.clamp(controls.target.y, MIN_BOUNDARY, MAX_BOUNDARY)
    // 限制相机坐标
    camera.position.x = THREE.MathUtils.clamp(camera.position.x, MIN_BOUNDARY, MAX_BOUNDARY)
    camera.position.y = THREE.MathUtils.clamp(camera.position.y, MIN_BOUNDARY, MAX_BOUNDARY)
  }
  
  return <MapControls onChange={handleControlUpdate} />
}

适配OrbitControls说明 #

以上逻辑完全适用于 drei 提供的 OrbitControls，仅需要替换对应组件名即可，两者底层都基于 three.js 原生控制类封装，逻辑通用。

内容的提问来源于stack exchange，提问作者Alexander Hörl