if(life){code();}

Camera 조작 3D 공간에서 카메라의 위치(position)와 시점(lookAt) 조절의 의미 : 사용자의 시각적 경험 결정  Leva를 활용한 카메라 조작 Leva 라이브러리의 useControls를 사용한 카메라 조작npm i leva  useControls를 이용해 카메라의 Z축 위치와 Y축 시점을 조절할 수 있는 슬라이더 생성import { useControls } from "leva";import { useThree } from "@react-three/fiber";const Elements = () => { const { camera } = useThree(); const dirLight = useRef(null); useHelper(dirLight, THREE.DirectionalL..

Three.js에서의 카메라 Three.js에서는 카메라를 통해 3D 공간을 2D 화면에 투영→ 3D 장면을 렌더링하려면 반드시 카메라(Camera)가 필요   대표적인 두 가지 카메라  PerspectiveCamera (원근 카메라)현실 세계의 눈과 같은 방식으로 원근감 표현→ 멀리 있는 객체는 작게, 가까운 객체는 크게 보임3D 게임, 가상현실(VR), 건축 시각화 등에서 주로 사용됨 OrthographicCamera (직교 카메라)원근감을 적용하지 않고 모든 객체를 같은 크기로 표시X, Y, Z 축에 따른 왜곡 없이 일정한 크기로 보임2D UI, CAD(설계), 전략 게임 등에 적합     Three.js에서 카메라 속성position카메라의 위치 설정[x, y, z] 좌표로 지정lookAt카메라가..

3D 그래픽에서 3D 렌더링 과정의 핵심 구성 요소  Scene (무대) 3D 그래픽의 무대 역할을 하는 공간 모든 3D 객체(Object), 광원(Light), 카메라(Camera) 등이 Scene에 배치됨HTML의 document와 같은 역할 Three.js에서의 Scene생성const scene = new THREE.Scene();     Camera (카메라) Scene 내의 3D 오브젝트를 어떤 시점에서 볼 것인지 결정Scene을 촬영하는 '눈'의 역할  PerspectiveCamera (원근 카메라) 실제 사람의 눈처럼 원근감을 적용하여 객체를 보여줌→ 가까운 물체는 크게, 먼 물체는 작게 보임new THREE.PerspectiveCamera(fov, aspect, near, far);  Or..