LIBRARY/Three.js

Three.js - Renderer, Scene, Camera

Three.js의 큰 틀은 3가지가 있다 제목처럼 Renderer, Scene, Camera 출처: youtube 디자인베이스 장면을 만들어서 3D Object를 넣고 카메라로 비춰고 Renderer를 통해서 html 파일안에 보여주는식이다 Renderer 카메라에 담긴 장면을 웹사이트에 구현해주는 Renderer이다 Scene 여러개의 3D 오브젝트, 즉 말 그대로 특정한 장면이 모인 것 (안개, 배경색, 배경 등) Camera 시야각, 종횡비, 카메라 시작 끝 지점, 카메라 등 3D 공간의을 카메라로 위치 특정 데이터를 비춰서 Renderer 에게 전달해준다 index.js에 Renderer, Scene, Camera 함수 추가 import * as THREE from 'three' import { ..

Three.js - webpack, 보일러플레이트 설치

webpack이란 프론트엔드 모듈 번들러 웹 애플리케이션을 구성하는 자원(HTML, CSS, JS, Image 등)을 각각의 모듈로 보고 이를 병합된 하나의 결과물을 만드는 도구이다 보다 쉽게 작업하기 위해 Three.js + Webpack가 포함된 보일러플레이트 설치 보일러플레이트란 Boilerplate code 기초 골격을 통으로 찍어내는 플레이트, 매번 반복적인 코드를 짤 필요없는 코드 디자인 오픈 소스와 비슷한 개념이다 아래 깃헙에서 오픈소스로 사용 가능하다 three.js Boilerplate를 오픈소스로 올려서 공유해주시는 분들께 감사를 표합니다 https://github.com/aakatev/three-js-webpack $ npm i $ npm run start localhost:9000 ..