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

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

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

Canvas API 웹에서 3D 그래픽을 구현하는 주요 기술 중 하나HTML의 요소를 이용, JavaScript로 픽셀 단위의 그래픽을 직접 그림(픽셀 조작)벡터 그래픽이 아닌 비트맵 기반으로 동작, 한 번 그린 후에는 별도로 다시 그려야 함 (자동 UI 갱신 X)→ 3D 좌표계에서 오브젝트 배치, 조명 설정, 렌더링 최적화, 충돌 감지 같은 요소를 고려한 복잡한 3D 그래픽을 구현WebGL과 함께 사용하면 GPU 가속을 활용한 3D 그래픽 가능  html  "> → 쉽게 3D그래픽을 다룰 수 있도록 도와주는 라이브러리들 (자동으로 WebGL 컨텍스트를 생성하고 렌더링을 관리)three.jsJavaScript 기반의 3D 그래픽 라이브러리WebGL을 쉽게 사용할 수 있도록 도와줌@react-three/..