if(life){code();}

Obj 3D + Transform Object 3D 모든 3D 객체의 부모 클래스 Scene, Mesh, Group, Camera 등 모든 주요 요소가 Object3D를 상속받음→ 자동으로 생성되는 Scene도 Object3D의 인스턴스position, rotation, scale 등의 변형(Tranform) 속성을 기본적으로 가짐Object3D를 상속받은 모든 객체는 Transform(변환)기능 사용 가능→ useThree 훅을 사용하면 scene을 가져와서 조작 가능Object3 three.js docs threejs.org   useThree 훅을 이용한 Scene 접근import { Canvas, useThree } from "@react-three/fiber";const Element = () ..

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 : 삼각형 개수가 적어 성능이 좋지..

웹페이지를 구성하는 기본 요소HTMLCSSJavaScipt  HTML(HyperText Markup Language) 웹페이지의 구조를 정의하는 기본적인 요소태그(tag)를 사용하여 텍스트, 이미지, 링크 등의 콘텐츠를 표현함  HTML 태그 기본 구조 HTML 태그 여는 태그와 닫는 태그로 구성여는 태그와 닫는 태그 사이에 콘텐츠를 배치div 태그h1 태그p 태그 태그 안에 태그를 추가할 수 있음*태그(tag) == 엘리먼트(element) == 요소 HTML 태그 W3Schools.comW3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popul..

Three.js와 react-three-fiber(R3F)를 활용하여 3D 개발을 할 때 유용한 도구들OrbitControls → 3D 공간을 자유롭게 탐색 가능AxesHelper → 좌표 축을 직관적으로 이해할 수 있음GridHelper → 바닥과 같은 참조선을 쉽게 추가 가능이를 활용하여 카메라 컨트롤, 좌표 축 표시, 그리드 배경 등 직관적인 가이드라인을 추가   OrbitControls 카메라를 마우스 또는 터치 제스처를 사용하여 조작할 수 있도록 해주는 컨트롤 도구마우스를 이용해 회전, 확대/축소(Zoom), 패닝(이동)이 가능 좌클릭 + 드래그 → 카메라 회전 (Orbit)우클릭 + 드래그 → 카메라 위치 이동 (Pan)휠 스크롤 → 줌 인/아웃 (Zoom) Canvas 내부에 를 선언하면, ..

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카메라가..

Node.js JavaScript 런타임서버 사이드 개발을 비롯한 다양한 환경에서 JavaScript를 실행할 수 있도록 해주는 도구  Node.js 다운로드 링크운영 체제(OS)에 맞는 버전을 다운로드하고 설치LTS(Long Term Support) 버전 권장 - 안정성과 장기적 지원 제공설치 완료 후, 터미널 또는 명령 프롬프트에서 다음 명령어를 실행하여 설치 확인node -vnpm -v 정상적으로 버전이 출력되면 설치 완료  *npm(Node Package Manager) Node.js의 패키지 매니저Node.js를 설치하면 자동으로 함께 설치됨JavaScript 라이브러리와 패키지를 관리 패키지 설치 및 관리npm install 패키지명 : JavaScript 라이브러리 설치npm uninstll..

3D 인터랙티브 사용자가 3D 환경과 상호작용할 수 있는 기술  일반적인 3D 모델단순 시각적 표현 3D인터랙티브 환경마우스, 키보드, 터치 등 다양한 입력 방식으로 3D 객체 조작 가능 3D 사이트 예시 Muhammad Bilal Khan - WebGL Developer mbilalkhan.com   Three.jsJavaScript 기반의 Web 3D 라이브러리다양한 형태의 3D 객체, 조명, 카메라, 재질, 텍스처 등을 기본 지원커뮤니티가 활발하여 레퍼런스 자료 다수, 학습 및 문제 해결 용이  Three.js 기본 코드 예제import * as THREE from 'three';function createScene() { // 렌더러 생성 const renderer = new THREE..