React Three Fiber中固定模型位置并关闭OrbitControls自动缩放

1. 解决页面滚动冲突 #

OrbitControls默认会拦截鼠标滚轮事件，哪怕设置了enableZoom={false}，还是会阻止页面正常滚动。直接在Controls里阻止滚轮事件冒泡：

import { OrbitControls } from '@react-three/drei'

<OrbitControls
  enableZoom={false}
  enablePan={false}
  enableRotate={false} // 不需要旋转功能的话直接关闭
  makeDefault
  onWheel={(e) => e.stopPropagation()} // 让滚轮事件归还给页面，解决滚动卡住的问题
/>

2. 把模型固定在中心 #

Sketchfab下载的模型经常自带位置偏移，两种快速居中的方法：

方法一：用drei的Center组件 #

直接包裹模型，自动完成居中处理：

import { Center } from '@react-three/drei'

<Center>
  <primitive object={你的Sketchfab模型} />
</Center>

方法二：手动计算居中 #

如果Center组件无效，就自己计算模型包围盒调整位置：

import { useRef, useEffect } from 'react'
import { Box3, Vector3 } from 'three'

const Model = () => {
  const modelRef = useRef(null)

  useEffect(() => {
    if (modelRef.current) {
      const boundingBox = new Box3().setFromObject(modelRef.current)
      const centerPoint = boundingBox.getCenter(new Vector3())
      modelRef.current.position.sub(centerPoint) // 将模型偏移量归零，移到原点
    }
  }, [])

  return <primitive ref={modelRef} object={你的Sketchfab模型} />
}

3. 彻底锁死缩放行为 #

仅设置enableZoom={false}可能不够，再加几个属性彻底禁用缩放相关逻辑：

<OrbitControls
  enableZoom={false}
  minDistance={0}
  maxDistance={0} // 锁定相机与模型的距离，杜绝任何缩放可能
/>

4. 固定Canvas与相机参数 #

确保R3F的Canvas尺寸固定，相机位置也保持不变：

import { Canvas } from '@react-three/fiber'

<Canvas
  camera={{ position: [0, 0, 5], fov: 50 }} // 固定相机位置和视角
  style={{ width: '100%', height: '500px' }} // 给Canvas设置固定高度，避免页面滚动时Canvas变形导致的视觉缩放
>
  {/* 你的场景内容 */}
</Canvas>

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