Three.js

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

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

Part 1 Three.js란?

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

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

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

WebGL?
Part1
Shaders
webGL을통해전송하는요소들
• vertex:점
• fragment:색깔

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

Three.js의개념
Part1
82줄 -> 18줄

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

Part 2 Three.js, 어디에 사용되고 있을까?

일반 웹사이트/서비스
Part2

온라인 트리 꾸미기

랜딩 페이지(나라 소개)

개인 포트폴리오(ex: Bruno Simon)

마케팅
Part2

GUCCI 제품 소개 페이지

캔김치

게임
Part2

핀볼 게임

온라인 기사
Part2

Part 3 Three.js로 움직이는 3D 도형 그리기

Three.js설치하기
Part3
JavaScriptPackageManager이용하기(npm,yarn,pnpm…)
CDN

index.html파일
Part3

Renderer,Scene그리고Camera준비하기
Part3

빙글빙글돌아가는정육면체렌더링하기(Mesh,setAnimationLoop)
Part3

개체움직이기
Part3

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

Part3
https://sketchfab.com/

Part3

Part 4 Three.js의 장점/한계와 전망

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

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

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

감사합니다

참고 자료
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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Three.js

Ähnlich wie Three.js (15)

Mehr von Wonjun Hwang

Mehr von Wonjun Hwang (20)

Three.js