Three.js

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

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

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

Three.js

Three.js

Recomendados

Más contenido relacionado

Similar a Three.js

Similar a Three.js(7)

Más de Wonjun Hwang

Más de Wonjun Hwang(20)

Three.js