if(life){code();}

React App 생성npx create-react-app 앱이름npx(Node Package eXecute)설치 없이 패키지 실행최신 버전 실행로컬 설치된 패키지 실행일회성 스크립트 실행특정 패키지를 글로벌 설치 없이 한 번만 실해하고 삭제→ 전역 설치 없이 최신 버전으로 프로젝트 생성  애플리케이션 실행cd 앱이름만든 프로젝트 폴더로 이동 (changediretory 앱이름)npm startReact App 시작 (Node Package Manager start)  CRA

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

프로젝트 기본 요소 설치 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보다 느리고 설정이 ..

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