Three.js
1.[Three.js] 맛보기
장면 만들기 가장 먼저 HTML 파일을 만들고 tree.js 파일을 가져와서 실행한다. Scene 만들기 three.js 로 뭔가를 표현하기 위해선 scene , camera , renderer 가 필요하다. 다음과 같이 장면을 구현할 수 있다. 여러 종류의
2.[Three.js] Three 기초
본문은 Three.js 기초 내용을 바탕으로 하여 요약 및 정리글이다. Three.js 란? Three.js 는 웹페이지에 3D 객체를 쉽게 렌더링해주는 라이브러리다. 점, 선, 삼각현을 그리는 시스템인 WebGL 을 이용한다. 먼저 Three.js 구조를 살펴
3.[Three.js] 기본 구조
원시 모델 Three.js 의 원시 모델이란, 런타임에 다양한 인자들로 정의한 3D 모양을 의미한다. 주로 공, 육면체 등으로 3D 그래프를 만드는데 사용한다. BoxGeomtry 육면체 CircleGeometry 원 
불필요한 렌더링 없애기 대부분 렌더링과정을 아래와 같이 재귀적으로 requestAnimationFrame 함수를 사용한다. 애니메이션이 지속적이라면 상관없지만, 없다면 불필요한 렌더링이 반복되어 연산 낭비가 일어난다. 처음 한 번만 렌더링하고 변화가 있을 때만 렌
5.[Three.js] 최적화
다중 요소 렌더링 최적화 Three.js 는 사용자가 Mesh 를 하나 만들 때마다 매번 시스템에 하나 이상의 렌더링 요청을 보낸다. 결과물이 같아도 mesh 를 1개를 렌더링할 때보다 2개를 렌더링할 때 오버헤드가 더 많이 발생한다. 그래서 mesh를 하나로 합치면
6.[Three.js] 활용하기 1
인터넷에서 CC-BY-NC 3.0 풍자 3D 모델을 하나 가져온다. 블렌더 파일을 받아 .OBJ 형식으로 변환한다. 조명 예제와 합쳐 장면에 HemisphereLight 하나, DirectionalLight 하나가 있는 예제가 있는 셈이다. 또 GUI 관련 코드와
7.[Three.js] 활용하기 2
Three.js 배경과 하늘 상자 Three.js 에서 단순한 배경은 CSS 만큼 쉽다. 먼저 CSS로 canvas에 배경을 추가한다. 그리고 WebGLRenderer 에 alpha 옵션을 켜 아무것도 없는 공간은 투명하게 보이도록 설정한다. !codesandb
8.[Three.js] 활용하기 3
다중 캔버스, 다중 씬 다중 씬을 위해선 여러 캔버스를 만들어, 각 캔버스마다 Renderer 를 생성하면 될 것처럼 보일 수 있다. 하지만 이 방법은 문제가 생긴다. 브라우저의 WebGL 컨텍스트(context)는 제한적 일반적으로 약 8개가 최대다. 9번째