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 = () ..

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

GUI(Graphical User Interface) Controller 사용자가 소프트웨어의 기능을 시각적으로 조작할 수 있도록 도와주는 인터페이스예 : 게임에서 클릭할 수 있는 메뉴 버튼/ 설정 패널   Leva 라이브러리 활용 LevaReact 애플리케이션에서 사용 가능한 경량화된 GUI 컨트롤러 라이브러리실시간으로 장면 속성을 조정할 수 있는 인터페이스를 제공 npm i leva useControls 훅을 사용하여 다양한 입력 컨트롤을 쉽게 생성하고 관리할 수 있음장면 내 요소의 속성을 실시간으로 조정 가능코드 몇 줄의 추가로 GUI 패널을 추가할 수 있어 편리  Leva를 활용한 3D 객체 컨트롤 useControls를 이용한 속성 조정const options = useMemo(() => { ..

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

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 Canvas 만들기 프로젝트 초기화 기본 프로젝트 설정  App.jsx 및 App.css 설정 App.jsximport "./App.css";function App() { return ;}export default App;  App.csshtml,body,#root { margin: 0; padding: 0; width: 100%; height: 100%;}  main.jsx import './index.css'코드제거   /src/index.css 파일 삭제 터미널에서 프로젝트 실행npm run dev   3D Canvas 추가 R3F(Canvas) 추가3D 환경을 만들기 위해 Canvas 추가 Canvas importimport { Canvas } from "@react-three/fi..

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

프로젝트 기본 요소 설치 React와 Three.js를 결합한 3D 웹 애플리케이션을 개발하기 위한 기본 요소빌드 도구(Build Tool)React를 위한 3D 렌더링 라이브러리(React 기반 Three.js 렌더링)@react-three/fiber를 위한 보조 유틸리티 라이브러리(Three.js용 React 컴포넌트 모음) 빌드도구Vite빠른 개발 서버, HMR(Hot Module Replacement) 지원ESM(ECMAScript Modules) 기반으로 효율적인 빌드 속도 제공최신 브라우저 환경에 최적화Create React App (CRA)Facebook이 만든 공식 React 프로젝트 생성 도구Webpack을 사용한 번들링설정 없이 바로 사용 가능하지만, 속도가 Vite보다 느리고 설정이 ..

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