React Three Fiber/Three.js如何实现OrbitControls按钮模拟中键缩放

直接修改useThree()返回的相机位置无法得到预期效果，核心原因是OrbitControls内部维护了独立的目标点坐标、缩放边界、阻尼状态、相机投影参数，手动修改相机位置不会同步到控件内部状态，会被控件后续的更新逻辑覆盖，也无法对齐鼠标中键dolly的原生交互逻辑。

正确实现方式是直接调用OrbitControls实例内置的缩放方法，和鼠标中键触发的逻辑完全同源，效果100%匹配：

• 给OrbitControls组件绑定ref获取控件实例
• 调用实例原生的dollyIn/dollyOut方法执行缩放，这两个方法就是控件内部响应鼠标中键操作时调用的方法，自动兼容透视相机/正交相机、最小/最大距离限制、阻尼动画
• 调用缩放方法后手动执行update()让改动生效

完整代码示例 #

import { Canvas } from '@react-three/fiber'
import { OrbitControls, Html } from '@react-three/drei'
import { useRef } from 'react'

function Scene() {
  const controlsRef = useRef(null)

  // 放大，效果与鼠标中键前滚完全一致
  const handleZoomIn = () => {
    if (!controlsRef.current) return
    // 参数为缩放步长，1.2和默认鼠标滚轮缩放手感接近
    controlsRef.current.dollyIn(1.2)
    controlsRef.current.update()
  }

  // 缩小，效果与鼠标中键后滚完全一致
  const handleZoomOut = () => {
    if (!controlsRef.current) return
    controlsRef.current.dollyOut(1.2)
    controlsRef.current.update()
  }

  return (
    <>
      {/* 场景常规内容 */}
      <mesh>
        <boxGeometry args={[1,1,1]} />
        <meshStandardMaterial color="orange" />
      </mesh>
      <ambientLight intensity={0.5} />
      <directionalLight position={[5,5,5]} />

      {/* 绑定ref到OrbitControls */}
      <OrbitControls 
        ref={controlsRef}
        enableDamping
        dampingFactor={0.05}
        minDistance={2}
        maxDistance={20}
      />

      {/* 缩放按钮，用Html组件包裹DOM节点即可在Canvas内渲染，也可将按钮放在Canvas外层 */}
      <Html fullscreen>
        <div style={{
          position: 'absolute',
          bottom: 20,
          right: 20,
          zIndex: 100,
          display: 'flex',
          flexDirection: 'column',
          gap: 8
        }}>
          <button onClick={handleZoomIn} style={{width: 40, height: 40}}>+</button>
          <button onClick={handleZoomOut} style={{width: 40, height: 40}}>-</button>
        </div>
      </Html>
    </>
  )
}

export default function App() {
  return (
    <div style={{width: '100vw', height: '100vh', position: 'relative'}}>
      <Canvas camera={{position: [0,0,5]}}>
        <Scene />
      </Canvas>
    </div>
  )
}

注意事项 #

• 步长参数可根据需求调整，需要更慢的缩放节奏可调小到1.1，更快可调大到1.5
• 开启enableDamping阻尼配置时该方案完全兼容，不需要额外手写过渡动画，控件会自动处理平滑效果
• 配置了minDistance/maxDistance（透视相机）或minZoom/maxZoom（正交相机）时，调用dolly方法会自动遵守边界限制，不会出现缩放越界的问题
• 不要额外手动修改相机的position、zoom等属性做缩放，会破坏OrbitControls的内部状态一致性，导致交互冲突

内容的提问来源于stack exchange，提问作者coder3210