使用 React Three Fiber 实现 X 轴上的相机旋转

Question

我只想设置我的相机 X 角度视图以从上方查看我的场景。

这是我的起始代码：

          <PerspectiveCamera
            makeDefault
            rotation={[0, 4.7, 0]}
            position={[-20, 7, 0]}
            fov={60}
            near={1}
            far={100}
          />
          <PerspectiveCamera
            ref={cameraRef}
            rotation={[0, 4.7, 0]}
            position={[-20, 7, 0]}
            fov={50}
            near={1}
            far={100}
          />

我正在更改 x 轴旋转值，但似乎它会影响 y 轴旋转...

      <PerspectiveCamera
        makeDefault
        rotation={[0, 4.7, 0]}
        position={[-20, 7, 0]}
        fov={60}
        near={1}
        far={100}
      />
      <PerspectiveCamera
        ref={cameraRef}
        rotation={[1, 4.7, 0]}  // HERE IS WHAT I CHANGED !
        position={[-20, 7, 0]}
        fov={50}
        near={1}
        far={100}
      />

如果我改变 x 轴旋转，结果就是......奇怪？

我想设置我的相机从上到下观察，类似这样的:

如果我只是更改 x 轴旋转，那么结果就是我正在寻找的 x 旋转：

          <PerspectiveCamera
        makeDefault 
        rotation={[0, 4.7, 0]}
        position={[-20, 7, 0]} 
        fov={60} 
        near={1}
        far={100}
      />
      <PerspectiveCamera
        ref={cameraRef} 
        rotation={[-0.5, 0, 0]}
        position={[-20, 7, 0]} 
        fov={50} 
        near={1}
        far={100}
      />

感谢您的帮助。

这是完整的代码：

import { Canvas } from '@react-three/fiber';
import React, { Suspense, useRef } from 'react';
import SoccerField from '../models/SoccerField.jsx';
import SoccerBall from '../models/SoccerBall.jsx';
import {
CameraControls,
MeshReflectorMaterial,
PerspectiveCamera,
useHelper
} from '@react-three/drei';
import { degToRad } from 'maath/misc';
import Trophy from '../models/Trophy.jsx';
import SoccerStadium from '../models/SoccerStadium.jsx';
import { AxesHelper, CameraHelper } from 'three';

const SoccerScene = () => {
const controls = useRef();
const directionalLightRef = useRef();
console.log(directionalLightRef);

const cameraRef = useRef();
console.log(cameraRef);
return (
<section className="w-full h-screen relative bg-[#dfd6c6]">
  <Canvas
    className={`w-full h-screen bg-transparent`}
    shadows
  >
    {cameraRef.current && <primitive object={new 
CameraHelper(cameraRef.current)} />}

    <Suspense fallback={null}>
      <primitive object={new AxesHelper(5)} />

      <directionalLight
        ref={directionalLightRef}
        position={[60, 100, 100]}
        rotation={[0, 0, 0]}
        intensity={2}
        castShadow
        shadow-mapSize-width={4096 * 2} // Augmente la résolution de l'ombre
        shadow-mapSize-height={4096 * 2} // Augmente la résolution de l'ombre
        shadow-camera-left={-50} // Augmente la largeur de la caméra d'ombre
        shadow-camera-right={50} // Augmente la largeur de la caméra d'ombre
        shadow-camera-top={10} // Augmente la hauteur de la caméra d'ombre
        shadow-camera-bottom={-10}
      />
      {/*{directionalLightRef.current && (*/}
      {/*  <cameraHelper args={[directionalLightRef.current.shadow.camera]} />*/}
      {/*)}*/}
      <ambientLight intensity={0.5} />
      <pointLight
        position={[10, 5, 10]}
        intensity={2}
      />
      <spotLight
        position={[0, 50, 10]}
        angle={0.15}
        penumbra={1}
        intensity={2}
      />
      <hemisphereLight
        skyColor="#b1e1ff"
        groundColor="#000000"
        intensity={1}
      />

      {/* Caméra principale avec ref */}
      <PerspectiveCamera
        makeDefault // Cela définira cette caméra comme la caméra par défaut
        rotation={[0, 4.7, 0]}
        position={[-20, 7, 0]} // Position de la caméra pour ajuster l'angle
        fov={60} // Vous pouvez ajuster le champ de vision pour changer l'angle
        near={1}
        far={100}
      />
      <PerspectiveCamera
        ref={cameraRef} // Attachement de la ref ici
        rotation={[0, 4.7, 0]}
        position={[-20, 7, 0]} // Position de la caméra pour ajuster l'angle
        fov={50} // Vous pouvez ajuster le champ de vision pour changer l'angle
        near={1}
        far={100}
      />
      {/* Utilisation du CameraHelper */}
      {cameraRef.current && <primitive object={new CameraHelper(cameraRef.current)} />}

      <CameraControls
        ref={controls}
        // minPolarAngle={degToRad(20)}
        // maxPolarAngle={degToRad(90)}
      />
      <SoccerStadium
        scale={0.1}
        position={[10, 0, 0]}
      />
      <group
        castShadow
        receiveShadow
        position={[-5, 4.3, -3]}
      >
        <Trophy
          scale={3}
          position={[10, 0, 2]}
        />
        <SoccerBall
          position={[5, -1, 2]}
          scale={0.5}
        />
      </group>
    </Suspense>
  </Canvas>
</section>
);
};

export default SoccerScene;

Answer 1

我不熟悉react-3语法。但我可以尽力帮助你找到解决问题的方向。为了让相机从上方观察物体，您需要通过物体上方的“position.y”设置其高度。并将相机目标（即相机所看的地方）设置为物体。为此，相机目标矢量必须与对象矢量的位置相匹配。