1. ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Three.js로 웹에서 3D 개발하기
JavaScript로 3D 게임을 만들 수 있다?!
2023.05.26
김혜린

2. ⓒSaebyeol Yu. Saebyeol’s PowerPoint
목차
1 Three.js란?
2 Three.js,어디에사용되고있을까?
3 Three.js로움직이는3D도형그리기
4 Three.js의장점/한계와전망
a table of contents

3. ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Part 1 Three.js란?

4. ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Three.js란?
Part1
웹 페이지에 3D 객체를 렌더링할 수 있도록 도와주는
JavaScript 오픈소스 라이브러리
WebGL 기술을 바탕으로 렌더링, 카메라, 조명 등의
3D 프로그래밍 기술을 쉽게 사용할 수 있도록 해준다.
https://github.com/mrdoob/three.js

5. ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Three.js란?
Part1
Ricardo Cabello
• 스페인 바르셀로나 출생(현재 일본 거주)
• 디자이너로 커리어를 시작
• ‘데모씬’이라는 컴퓨터 아트 서브 컬쳐에서 활동하면서
재사용 가능한 3D 툴의 필요성을 느껴 Three.js를 만들기 시작

6. ⓒSaebyeol Yu. Saebyeol’s PowerPoint
웹에서도
쓰고싶어!
WebGL?
Part1
OpenGL(Graphic Library) WebGL
• GPU와 통신하여 2D, 3D 그래픽을 표현
할수있도록해주는API규격또는라이브
러리
• C언어기반
• 무엇을,어떻게그릴지에관한함수들
• 함수를호출하면드라이버를통해GPU와
소통
• VR, CAD, 게임, 시각화, 시뮬레이션 등에
많이사용
• 애플리케이션과 그래픽 카드 사이에서
2D/3D 물체들을 웹페이지에 띄워주는
JavaScript라이브러리
• HTML5canvas요소위에그림
• 모바일브라우저에서도사용가능

7. ⓒSaebyeol Yu. Saebyeol’s PowerPoint
WebGL?
Part1
Shaders
webGL을통해전송하는요소들
• vertex:점
• fragment:색깔

8. ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Three.js의개념
Part1
어렵고직관적이지못한webGL을편하게쓸수있도록한번더감싼JavaScript라이브러리(==함수들)

9. ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Three.js의개념
Part1
82줄 -> 18줄

10. ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Three.js의개념
Part1
1 Scene을만들어Camera로비춘다.
2 Scene안에원하는(3D)Object들을넣는다.
3 그전체를Renderer로HTMLcanvas안에렌더링한다.

11. ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Part 2 Three.js, 어디에 사용되고 있을까?

12. ⓒSaebyeol Yu. Saebyeol’s PowerPoint
일반 웹사이트/서비스
Part2

13. ⓒSaebyeol Yu. Saebyeol’s PowerPoint
온라인 트리 꾸미기

14. ⓒSaebyeol Yu. Saebyeol’s PowerPoint
랜딩 페이지(나라 소개)

15. ⓒSaebyeol Yu. Saebyeol’s PowerPoint
개인 포트폴리오(ex: Bruno Simon)

16. ⓒSaebyeol Yu. Saebyeol’s PowerPoint
마케팅
Part2

17. ⓒSaebyeol Yu. Saebyeol’s PowerPoint
GUCCI 제품 소개 페이지

18. ⓒSaebyeol Yu. Saebyeol’s PowerPoint
캔김치

19. ⓒSaebyeol Yu. Saebyeol’s PowerPoint
게임
Part2

20. ⓒSaebyeol Yu. Saebyeol’s PowerPoint
핀볼 게임

21. ⓒSaebyeol Yu. Saebyeol’s PowerPoint
온라인 기사
Part2

22. ⓒSaebyeol Yu. Saebyeol’s PowerPoint

23. ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Part 3 Three.js로 움직이는 3D 도형 그리기

24. ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Three.js설치하기
Part3
JavaScriptPackageManager이용하기(npm,yarn,pnpm…)
CDN

25. ⓒSaebyeol Yu. Saebyeol’s PowerPoint
index.html파일
Part3

26. ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Renderer,Scene그리고Camera준비하기
Part3

27. ⓒSaebyeol Yu. Saebyeol’s PowerPoint
빙글빙글돌아가는정육면체렌더링하기(Mesh,setAnimationLoop)
Part3

28. ⓒSaebyeol Yu. Saebyeol’s PowerPoint
개체움직이기
Part3

29. ⓒSaebyeol Yu. Saebyeol’s PowerPoint
외부모델불러오기
Part3
애드온중하나인GLTFLoader를import하여모델을불러올수있습니다.

30. ⓒSaebyeol Yu. Saebyeol’s PowerPoint
외부모델불러오기
Part3
https://sketchfab.com/

31. ⓒSaebyeol Yu. Saebyeol’s PowerPoint
외부모델불러오기
Part3

32. ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Part 4 Three.js의 장점/한계와 전망

33. ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Three.js의장점
Part4
1
2
web에서인터랙티브한/몰입감있는사용자경험을줄수있다.
3
러닝커브가낮다.
가장오래되고큰커뮤니티를가졌고,꾸준히업데이트되고있다.
4 react-three-fiber등으로React에서편하게개발이가능하다.

34. ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Three.js의한계
Part4
1 모델링을하지않으면멋진작품을만들기어렵다.
2 게임개발엔진들보다세세한기능들이부족하다.
3 TypeScript기반이아니다.

35. ⓒSaebyeol Yu. Saebyeol’s PowerPoint
3D라이브러리의전망
Part4
• 물리엔진내장:게임개발에적합
• 고급기능제공
• 2014년부터TS전환
• Microsoft가후원
W3C,Apple,Mozilla,Microsoft,Google엔지니어들이
함께개발한webGL보다성능향상된API

36. ⓒSaebyeol Yu. Saebyeol’s PowerPoint
감사합니다

37. ⓒSaebyeol Yu. Saebyeol’s PowerPoint
참고 자료
https://ko.wikipedia.org/wiki/Three.js
https://pickywicky.co.kr/
http://yahao2512.com/
https://bruno-simon.com/
https://www.bbc.co.uk/news/resources/idt-5136bea2-40b8-45bf-83be-e06babcbc2bf
https://1955horsebit.gucci.com/#/handbags
https://code-masterjung.tistory.com/110
https://fitc.ca/speaker/mrdoob/
https://www.youtube.com/watch?v=sDVIHac66tM
https://medium.com/@su_bak/opengl-%EC%9D%B4%EB%9E%80-ad19cf68c948
https://www.youtube.com/watch?v=6AHpdQCrf_Q
https://pr-o.medium.com/three-js-in-next-js-73d65c2dedb6
https://news.hada.io/topic?id=7624