Three.js ( R3F ) Camera

Perspective

Defalut값으로, 원근법이 적용된 렌더링 기법으로 같은 크기라도 카메라로부터 멀리 있는 물체는 작게 렌더링된다.

절두체 = 카메라로 공간을 보여주는 영역

짤리는 부분이 존재한다.

Parameter

aspect는 자동적으로 맞춰준다.

• fov: 높이의 각도 ( 0 보다는 크고 180보다는 작아야 한다. 값이 올라갈수록 멀리서 찍는거라고 생각하면 된다. )
• aspect: 비율 ( width / height )
• near: Camera에서 절두체까지의 길이 ( 값이 올라갈수록 밑 부분이 좁아진다. )
• far: Camera에서 끝부분까지의 길이 ( 한마디로 깊이 )

---

Orthographic

원근법이 적용되지 않은 렌더링 기법 카메라

절두체

짤리는 부분 없이 모든 공간을 보여준다.

Parameter

xLeft, xRight, yTop, yBottom은 3D 객체를 렌더링할때 대상에 맞체 자동으로 맞춰준다.

• xLeft, xRight: 절두체의 가로 ( 기준점: 가운데 )
• yTop, YBottom: 절두체의 세로 ( 기준점: 가운데 )
• near: Camera에서 절두체까지의 길이 ( 값이 올라갈수록 밑 부분이 좁아진다. )
• far: Camera에서 끝부분까지의 길이 ( 한마디로 깊이 )

Orthographic로 변경하는법

	<Canvas orthographic> // <- orthographic을 추가해준다.
  		// ....
  	</Canvas>

---

Camera 위치를 변경하는법

import { useThree } from "@react-three/fiber"

const { camera } = useThree();

camera.position.z += 0.1 // 카메라 위치를 변경 x, y축도 가능
camera.lookAt(x, y, z) // 카메라가 바라보는 위치를 변경

return (
  // ...
	camera={zoom: 1} // <- Defalut
  // 카메라 확대하는 기능
  // ...
)

getObjectByName()

Element의 3D Object인 자식의 정보를 가져온다. ( 아래 코드에서는 mesh )

useFrame((state) => {
	const sphere = state.scene.getObjectByName("sphereName")
})

return (
  <group name="sphereName">
	<mesh>
  		<sphereGeometry args=[0.3, 32, 32] />
  		<meshStandardMaterial
			color="#fff"
			// ...
		/>
  	</mesh>
  </group>
)