ThreeJS实现汽车内外视角切换：外部转车与驾驶位相机固定旋转

要实现外部视角和驾驶座视角的切换，核心是区分两种视角下相机的控制逻辑和挂载关系，以下是具体实现步骤和代码修改：

核心思路 #

• 外部视角：保留原OrbitControls，让相机绕汽车中心旋转、缩放、平移，方便查看整车。
• 驾驶座视角：将相机绑定到汽车驾驶座位置（作为汽车的子对象），仅允许相机绕Y轴小范围旋转，避免移出车内视野。

修改后的代码 #

import { useState, useRef } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import { OrbitControls, Stage } from '@react-three/drei'
import Car from './Car' // 你的汽车组件

export default function CarViewer(props) {
  const [viewMode, setViewMode] = useState('external') // external:外部视角，driver:驾驶座视角
  const cameraRef = useRef()
  const carRef = useRef()
  const controlsRef = useRef()

  // 驾驶座视角的相机旋转控制（限制旋转范围，避免移出车内）
  useFrame((state) => {
    if (viewMode === 'driver') {
      // 通过鼠标X轴移动控制相机Y轴旋转，限制旋转范围在±45°（可根据需求调整）
      const rotateRange = Math.PI / 4
      cameraRef.current.rotation.y = Math.max(-rotateRange, Math.min(rotateRange, state.pointer.x * Math.PI/2))
      // 固定相机在驾驶座的相对位置（数值根据你的3D模型实际驾驶座位置调整）
      cameraRef.current.position.set(0, 1.2, -2)
    }
  })

  return (
    <Canvas dpr={[1, 2]}>
      <color attach="background" args={["#101010"]} />
      <Suspense fallback={<></>}>
        {/* 视角切换按钮 */}
        <button 
          style={{ position: 'absolute', top: 20, left: 20, padding: '8px 16px', zIndex: 10, cursor: 'pointer' }}
          onClick={() => setViewMode(prev => prev === 'external' ? 'driver' : 'external')}
        >
          {viewMode === 'external' ? '切换到驾驶座视角' : '切换到外部视角'}
        </button>

        <OrbitControls
          ref={controlsRef}
          enablePan={viewMode === 'external'}
          enableZoom={viewMode === 'external'}
          panSpeed={0.1}
          enableRotate={viewMode === 'external'}
          rotateSpeed={0.5}
          maxPolarAngle={Math.PI / 2.1}
          maxDistance={20}
          target={[0, 1, 0]} // 汽车中心位置（根据模型实际高度调整Y值）
        />

        <PerspectiveCamera 
          makeDefault 
          position={[0, 3, 15]} 
          ref={cameraRef}
          // 驾驶座视角下，相机挂载为汽车的子对象，随汽车同步移动（如果汽车有动画的话）
          parent={viewMode === 'driver' ? carRef.current : null}
        />

        <Stage environment={null} intensity={0.6} castShadow={false}>
          <Car {...props} ref={carRef} />
        </Stage>
      </Suspense>
    </Canvas>
  )
}

关键细节说明 #

1. 视角状态管理：用viewMode状态切换两种视角，同时控制OrbitControls的功能开关（驾驶座视角禁用平移、缩放、旋转）。
2. 驾驶座相机绑定：将相机设为汽车的子对象，确保汽车移动时相机同步跟随（如果你的汽车有行驶动画的话）。
3. 旋转范围限制：通过Math.max和Math.min限制相机Y轴旋转角度，避免转出车外，你可以根据模型大小调整rotateRange的值。
4. 相机位置调整：cameraRef.current.position.set(0, 1.2, -2)是驾驶座的相对位置，需要根据你的3D模型实际驾驶座坐标修改，建议直接在模型软件里查看驾驶座的局部坐标。

进阶优化（可选） #

如果你的汽车模型里有单独的驾驶座Mesh，可以直接将相机挂载到驾驶座Mesh下，位置更精准：

1. 在Car组件中暴露驾驶座的Ref：

// Car.jsx
import { forwardRef, useRef, useImperativeHandle } from 'react'

const Car = (props, ref) => {
  const driverSeatRef = useRef()
  // 暴露驾驶座Ref给父组件
  useImperativeHandle(ref, () => ({
    driverSeat: driverSeatRef.current
  }))

  return (
    <group>
      {/* 其他汽车部件 */}
      <mesh ref={driverSeatRef} {...你的驾驶座模型属性} />
    </group>
  )
}

export default forwardRef(Car)

2. 在主组件中修改相机的父对象：

parent={viewMode === 'driver' ? carRef.current.driverSeat : null}
// 相机相对驾驶座的位置（比如人眼高度）
cameraRef.current.position.set(0, 0.5, 0)

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