如何在React Three Fiber中实现固定相机的第一人称旋转控制？

你可以通过调整OrbitControls的配置满足需求，核心逻辑是禁用所有相位移操作，同时强制锁定相机位置到全景盒中心，以下是基于@react-three/fiber和drei的最小实现代码：

依赖说明 #

需要预先安装以下包：

• react
• react-dom
• three
• @react-three/fiber
• @react-three/drei

完整代码 #

import React from 'react'
import * as THREE from 'three'
import { createRoot } from 'react-dom/client'
import { Canvas, useFrame } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei'

// 全景场景组件
function PanoramaScene() {
  // 每帧强制重置相机位置到中心点，确保相机不会移动
  useFrame(({ camera, controls }) => {
    camera.position.set(0, 0, 0)
    controls.update()
  })

  return (
    <>
      {/* 全景盒：scale设为负数值让纹理朝内渲染 */}
      <mesh scale={[-100, -100, -100]}>
        <boxGeometry />
        {/* 这里可以替换为你的全景图纹理，示例用纯色代替 */}
        <meshBasicMaterial color="#2ecc71" side={THREE.BackSide} />
      </mesh>

      <OrbitControls
        enableZoom={false} // 禁用缩放
        enablePan={false} // 禁用平移
        minPolarAngle={0} // 允许垂直旋转到顶部
        maxPolarAngle={Math.PI} // 允许垂直旋转到底部
        cursor="grab" // 设置光标为拖拽样式
      />
    </>
  )
}

// 根组件
function App() {
  return (
    <Canvas
      camera={{
        fov: 75,
        aspect: window.innerWidth / window.innerHeight,
        near: 0.1,
        far: 1000,
        position: [0, 0, 0] // 初始相机位置固定在中心
      }}
      style={{ width: '100vw', height: '100vh' }}
    >
      <PanoramaScene />
    </Canvas>
  )
}

createRoot(document.getElementById('root')).render(<App />)

关键配置说明 #

• 全景盒使用负缩放翻转法线，保证纹理在立方体内部可见，符合在物体内部操控的需求
• OrbitControls禁用缩放、平移后仅保留旋转能力，配合每帧重置相机位置，彻底固定相机坐标，只会修改视角旋转参数
• 你可以替换meshBasicMaterial的color属性为纹理map，加载六面全景图或者等距柱状全景图实现真实全景效果

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