if(life){code();}

Material 3D 객체의 표면 표현 방식을 정의하는 요소3D 랜더러가 객체를 그릴 때, 빛의 반사, 색상, 투명도 등 다양한 특성을 결정 *Three.js에서 모든 재질(Material)은 Material 클래스를 상속받아 만들어져 있음  Material의 형태Point Material점으로 표현되는 재질Line Material선으로 표현되는 재질Mesh Material메시 형태로 표현되는 재질 (가장 많이 사용되는 유형), 여러 가지 타입이 있음MeshBasicMaterial, MeshStandardMaterial, MeshLambertMaterial, MeshPhongMaterial 등이 존재Meterial three.js docs threejs.org   Material의 주요 속성  visib..

Geometry 기하학적 구조mesh의 모양(shape)을 정의하는 컴포넌트 Three.js에서는 Geometry가 삼각형(Tris)들로 이루어진 구조로 표현됨모든 Geometry는 BuffetGeometry 클래스를 상속받아 사용됨  *Three.js에서 Geometry를 삼각형(Tris)으로 만드는 이유삼각형은 가장 단순한 다각형삼각형은 가장 적은 점(Vertices)으로 면(Face)을 만들 수 있는 도형다른 다각형도 삼각형의 조합으로 만들 수 있음사각형(Quadrangle) → 삼각형 2개로 구성오각형(Pentagon) → 삼각형 3개로 구성 *High Poly vs. Low Poly High Poly : 삼각형 개수가 많아 곡면이 부드럽게 표현됨Low Poly : 삼각형 개수가 적어 성능이 좋지..

Scene 3D 환경을 구성하는 가장 기본적인 단위Camera를 통해 렌더링되기 위해 여러 Object들이 배치됨  Three.js 및 React Three Fiber(R3F)에서 Scene을 구성하는 주요 요소Mesh, Geometry, Material (+ Lighting, Grouping, Interaction 등이 추가됨)  Mesh (메쉬)Geometry (형태)와 Meterial (재질)을 결합하여 3D 객체를 생성하는 기본 단위  예시 코드 조각 {/* 정육면체 */} {/* 기본 재질 */}  Geometry (형태) 3D 객체의 형태 또는 구조를 정의하는 요소  기본 Geometry 종류boxGeometry → 박스(큐브)sphereGeometry → 구(공)planeGeometr..

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..