Three.js 의 기본구조를 안다는 상태에서 작성했습니다. React에 Three.js를 적용해봅시다. 먼저 리액트 프로젝트를 만들고, three.js 를 사용하기 위해 3가지 패키지를 설치합니다. 저는 vite로 프로젝트를 만들었습니다. npm init vite three.js react-three-fiber : three.js 를 리액트 문법에 맞게 사용할 수 있도록 react-three/drei : react-three-fiber 하는 일을 좀 더 쉽게 도와줌. npm install three @react-three/fiber @react-three/drei 기본 구조 Three.js는 기본적으로 html canvas 태그 안에서 렌더링됩니다. 따라서 react-three-fiber에 canvas..
three.js 에서는 다양한 내장 Geometries를 제공합니다. BoxGeometry (상자) BoxGeometry는 세 가지 주요 차원(너비, 높이, 깊이)을 기반으로 상자 모양의 기하학객체를 생성하는 데 사용됩니다. 인자없이 생성하면 기본값의 정육면체가 만들어지죠. 인자는 총 6개이며, 인자 모두 선택사항이고, 기본값 1을 가집니다. BoxGeometry는 BufferGeometry클래스를 기반으로 하고 있습니다. width : 너비 height 높이 deeps 깊이 widthSegments :너비 세그먼트 수 heightSegments :높이 세그먼트 수 depthSegments :깊이 세그먼트 수 *widthSegments :면의 너비값에 따라 분할된 직사각형 면의 수. //const box..
Object3 D의 부모 자식관계. Three.js에서는 Object3D에 자식요소로 다른 Object3D를 추가할 수 있습니다. 그리고 위치, 배율, 회전과 같은 부모객체에 대해 변경사항이 일어날 시 자식 객체에도 영향을 줍니다. 이러한 방식은 웹브라우저 페이지 스타일링시 부모요소의 position을 기준으로 따라가는 자식요소의 상대위치 개념과 유사합니다. 아래와 같은 오브젝트 3D 계층 구조를 만들고 위치, 스케일, 회전 등으로 객체를 조작해 어떻게 동작하는 지 알아봅시다. scene.add(cube) //cube은 scene의 자식이 된다. //오브젝트 3D 계층 구조 //빨간공은 초록공 자식이 있고, 초록공은 파랑공 자식이 있는 구조입니다. //가시축 AxesHelper은 각 scene과 obje..
Stats.js Stats.js 는 JavaScript 성능 모니터 도구입니다. 적용하면 웹사이트 상단에 UI가 표현되며 해당 페이지의 성능 모니터링을 할 수 있습니다. FPS: 초당 렌더링된 프레임수(높을 수록 부드럽게 애니메이션이 동작) MS : 한 프레임을 렌더링하는 데 걸리는 시간 (milliseconds) MEM: 할당된 메모리(Mbytes). stats.js 사용법 three.js 에 stats 가 들어가 있기 때문에 따로 설치할 필요는 없습니다. npm i stats.js //... import Stats from "three/examples/jsm/libs/stats.module" //... const stats = new Stats() //프레임 렌더링 계산 document.body.ap..
예제 코드를 통해 Three.js의 기본 구조를 파악해 봅시다. 크게 네 가지 순서로 작성합니다. 1. Scene(장면) 생성. scene(3D 공간)을 생성합니다. const scene = new THREE.Scene() -> 더 설정해 준다면 여러 scene을 생성할 수 있고, 배경색 등 여러 조건을 설정할 수 있습니다. scene.background = new THREE.Color(0x000000) //헥스 코드로 표현한다. 빨간 배경색 0xff0000 ,초록색 0x00ff00 2. Objects(정육면체) 생성. 사실 Object는 *particles(입자), lights(조명)과 같이 다양하게 포함된 개념이지만, 지금은 3D Object(Mesh)인 정육면체로 예시를 들겠습니다. Mesh(3D ..
Three.js을 실습할 환경을 만들어 봅시다. 설치 npm install three --save-dev npm install @types/three --save-dev 파일 구조는 다음구조를 참고해 만들어줍니다. 배표를 위한 dist 폴더와 소스코드가 들어가는 src 폴더를 만드네요. |-- praThree |-- dist |-- client |-- index.html |-- server |-- node_modules |-- @types |-- three |-- (Several extra files and folders containing the Three.js definitions) |-- three |-- (Several extra files and folders containing the Thre..
Three.js Three.js란 웹에 3D객체를 쉽게 렌더링하도록 도와주는 자바스크립트 3D 라이브러리입니다. WebGL과 비교한다면 WebGL은 2D/3D객체를 렌더링하는 일을 하고, Three.js은 어려운 WebGL을 3D 그래픽에 관련된 수학 지식들이 없이 직관적인 코드를 짤 수 있도록 도와주는 3D 라이브러리라고 할 수 있겠네요! * SVG와 CSS를 통해 3D를 만들 수 있지만 매우 제한적이고 어렵습니다. 종류 하는 일 언어 WebGL 레스터화 엔진 웹에서 2차원 그래픽과 인터랙티브 3차원 그래픽을 렌더링 자바스크립트 Three.js 3D 라이브러리 수학지식없이 WebGL을 사용하도록 도와주는 라이브러리 자바스크립트 * OpenGL 과 WebGL OpenGL은 Open Graphics Lib..
사용자경험을 중요하게 생각할수록 웹에 더 다이내믹한 인터랙션을 표현하고 싶은 욕심이 생겼고 자연스럽게 WebGL에 호기심이 생겼습니다. WebGL관련 MDN문서에서는 3D 그래픽에 관련된 수학적 이해를 기반으로 읽어야 한다라며 겁을 줘서 두려운데(당연하게도 겁을 주지 않았다.) 작시성반이라고 일단 시작하고 보면 생각보다 쉬울 거라며 스스로를 다독이며 공부를 시작했습니다. WebGL WebGL은 웹상에서 별도의 플러그인없이 2D/3D 그래픽을 렌더링 하기 위한 low level js API입니다. 종종 3D 라이브러리로 여겨지는데 *레스터화 엔진이라고 합니다. webGL은 브라우저 엔진에 내장된 HTML5 Canvas 요소 위에서 그려지며, 다음과 같은 좌표시스템 이해가 필요합니다. *3D 라이브러리 vs..
