카메라 종류

• Perspective Camera, Orthographic Camera

• 둘다 절두체라는 개념이 존재
  

카메라 생성을 위한 파라미터(절두체를 정의하기 위한 값들)

Perspective Camera

• OrbitControls - 카메라를 내부적으로 관리하는 컴포넌트이기 때문에 필요없음

• Aspect를 Canvas컴포넌트가 자동으로 설정해주는데, 3차원 장면이 렌더링 되는 영역의 비율로 설정해주기 때문에 Fovy, zNear, zFar만 신경쓰면 됨

• zNear, zFar에 벗어나는 지점은 랜더링 되지 않음

  • near: 1를 9로 변경할 경우

{/* fov - 카메라 렌즈 화곽을 75도로 지정(Fovy값 0 ~ 180) / position - 카메라 위치 x, y 각 7로 지정*/}
<Canvas camera={{ fov: 75, near: 9, far: 20, position: [7, 7, 0] }}>
        {/* <MYElement3D /> */}
        <MYElement3DLight />
      </Canvas>

lookAt 메서드를 통해 카메라가 바라보는 위치를 조정

• MYElement3DLight에서 ui에서 컨트롤 할 수 있도록 코드 추가

  const { camera } = useThree();
  useControls({
    // positionZ은 카메라의 위치
    positionZ: {
      value: 0,
      min: -10,
      max: 10,
      step: 0.1,
      onChange: (v) => (camera.position.z = v),
    },
    //targetZ는 카메라가 바라보는 위치
    targetZ: {
      value: 0,
      min: -10,
      max: 10,
      step: 0.1,
      onChange: (v) => camera.lookAt(0, 0, v),
    },
  });

• 카메라의 위치를 빨간색 공의 위치로 추적(useFrame)

//카메라의 위치를 빨간색 공의 위치로 추적 (getWorldPosition를 Vector3객체에 저장해서 저장된 객체를 카메라의 포지션에 복사)
const target = new THREE.Vector3(); smallSpherePivot.children[0].getWorldPosition(target);
state.camera.position.copy(target);

• 빨간색 공이 이동할 다음 위치를 카메라가 항상 바라보도록
  

빨간구가 이동할 위치를 얻어와야하기 때문에 object를 생성(object3D위치를 smallSpherePivot와 동일하게 )

<group name="ghostSpherePivot">
    <object3D position={[3, 0.5, 0]} />
</group>

• useFrame

//빨간색보다 30도 더 회전 시킴
    ghostSpherePivot.rotation.y = THREE.MathUtils.degToRad(time * 50 + 30);
    ghostSpherePivot.children[0].getWorldPosition(target);
    state.camera.lookAt(target);

• 지날때 잘리는걸 없애고 넓게 보여지기 위해 camera조절

<Canvas camera={{ fov: 130, near: 0.1, far: 20, position: [7, 7, 0] }}>

Orthographic Camera

• xLeft, xRight, yTop, yBottom은 3차원 장면이 랜더링될 때 영역에 맞게 자동으로 설정이 된다.

• Near와 far값만 신경쓰면됨

• 원근감 없음

 <Canvas
        orthographic
        camera={{ near: 0.1, far: 20, zoom: 100, position: [7, 7, 0] }}
      >

이 글은 아래 유투브 강의를 듣고 작성한 글 입니다.
https://www.youtube.com/watch?v=0jnGlLb_z7w&list=PLe6NQuuFBu7HUeJkowKRkLWwkdOlhwrje&index=4