Thumbnail
지식공유자의 깜짝할인 중(D-8)
BEST
개발 · 프로그래밍 프론트엔드

Three.js로 시작하는 3D 인터랙티브 웹 대시보드

(5)
77개의 수강평 ∙  1,575명의 수강생
23% 165,000원 126,500원

월 25,300원

5개월 할부 시
지식공유자: 1분코딩
총 163개 수업 (18시간 56분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

초급자를 위해 준비한
[웹 개발, 웹 퍼블리싱] 강의입니다.

웹에서 3D를 구현할 수 있는 자바스크립트 라이브러리, three.js의 핵심 개념들을 익히고 응용 예제까지 만들어 보면서 3D 웹 개발에 대한 감을 익혀봅니다.

✍️
이런 걸
배워요!
WebGL 라이브러리 three.js를 이용한 3D 웹 구현
바닐라 자바스크립트를 활용한 3D 인터랙티브 웹 개발

three.js로 웹에서 구현 가능한
3D 웹 어플리케이션 만들자! 🤳

인기 드라마에 나오는 징검다리 게임을 직접 만들어봅니다.
물리엔진으로 사실적인 움직임을 만들어봅니다.
점 (point)의 좌표를 활용해 파티클 효과를 만들어봅니다.
스크롤에 따라 반응하는 3D 비주얼이
적용된 페이지를 만들어봅니다.

 추가 콘텐츠 업데이트! 

3D 공간에서 캐릭터가 자유롭게 움직이는 동작을 구현해 봅니다.

three.js로 시작하는
3D 인터랙티브 웹 

우리나라에는 three.js로 작업한 웹사이트가 많이 없었지만, 최근 들어 메타버스나 VR, AR 등이 급부상하면서 3D 콘텐츠에 대한 수요가 늘고 있습니다. 그에 비해 입문자가 쉽게 공부할 수 있는 자료들이 많이 부족하다고 느껴져서 강의를 기획하게 되었습니다. 

웹 브라우저에서 3차원 컴퓨터 그래픽스 애니메이션 응용을
만들고 표현하기 위해 사용되는 JS 라이브러리


섹션별 학습내용 미리 엿보기 📚

섹션 0 three.js가 무엇인지와 기본적인 사용 방법을 알아봅니다. 웹팩 사용법도 함께 익혀요!

섹션 1 기본 요소들에 대한 전반적인 내용을 살펴보며, 3D 장면을 구성할 수 있게 됩니다.

섹션 2 three.js 개발을 더 편리하게 도와주는 도구들을 알아봅니다.

섹션 3 위치 이동, 크기 조정, 회전 등 변환 (transform)에 대해 알아봅니다.

섹션 4 모양을 나타내는 geometry를 알아봅니다.

섹션 5 간단한 카메라 컨트롤 활용만으로도 다양한 기능의 카메라 액션을 사용할 수 있어요.

섹션 6 재질을 나타내는 여러가지 material에 대해 알아봅니다.

섹션 7 여러가지 조명과 빛의 형태를 알아봅니다.

섹션 8 클릭을 감지하는 방법을 알아봅니다.

섹션 9~13 배운 내용들을 활용하여 실용적인 예제를 다양하게 만들어봅니다.


이런 분들이 들으면 좋아요 🙌

눈에 띄는 3D 웹사이트
만들고 싶은 개발자/디자이너

메타버스/VR 등의 웹에서
3D를 구현하고 싶은 분
다른 개발자들과는 차별화된
무기를 갖고 싶은 개발자


한땀 한땀 같이 코딩해요 👨‍💻

블렌더를 이용해서 직접 3D 캐릭터를 만들어요.
만든 3D 캐릭터에 애니메이션을 적용해봐요.

이 강의만의 특징은 무엇인가요?

  • 다양한 예제를 통해 이해하고 응용하여 나만의 작업물을 만들어 가는 강의
  • 직접 같이 한땀 한땀 코딩하면서 익히고 실력을 쌓을 수 있는 강의
  • 눈에 띄는 개발자가 될 수 있는 3D 개념을 익히는 강의
  • 단순 3D뿐 아니라, 모델링 소프트웨어인 블렌더까지 다루는 강의!

 

🛤 1분코딩 Three.js 로드맵에서 30% 할인쿠폰을 받으세요

1

1분코딩 Three.js 로드맵에서 "전체 구매 적용" 30% 할인 쿠폰을 받으실 수 있습니다. (두 강의 중 하나는 이미 듣고 계신 분도, 로드맵 쿠폰으로 수강신청을 하시면 새로 수강하는 강의에 30% 할인이 적용되니 두개의 강의를 모두 수강하실 분은 로드맵에서 수강신청 해주세요!)
로드맵 바로 가기

 
 
예상 질문에 답해드려요 🙏

Q. 초보자도 들을 수 있는 강의인가요?

자바스크립트 기초를 아시는 분이라면 가능합니다. 자바스크립트 수업은 아니지만, 중간중간 등장하는 자바스크립트 개념들도 설명드리니 크게 어려움은 없을거예요.

Q. 수업 내용을 어느 정도의 수준까지 다루나요?

자세한 내용은 커리큘럼을 보시면 되는데요, 징검다리 건너기 게임이 가장 난이도가 높은 최종 예제라고 보시면 됩니다. 그 정도의 3D 웹 애플리케이션을 만들기 위해 필요한 내용들을 공부한다고 생각해주세요.

Q. 수업에서 공부한 내용 정도면, 제가 원하는 형태의 3D 웹 구현이 가능할까요?

만드시려는 웹사이트의 형태에 따라 다르겠지만, 커리큘럼에 three.js의 핵심적인 내용들이 포함되어 있으므로 분명 배우기 전과는 완전히 다른 작업물을 만드실 수 있을 거예요.

Q. 강의를 듣고나면 어느 정도의 성장을 이룰 수 있을까요?

완강하신 후, 여러분은 3D 웹페이지를 개발할 수 있게 됩니다. 3D는 그 자체로 특별해서 직접 구현할 수 있다면 취업 시장에서도 눈에 띄는 개발자가 될 수 있어요. 3D 웹을 구현할 수 있다는 것, 그런 포트폴리오를 갖고 있다는 것 자체가 개발자/디자이너로서 강력한 무기가 될거예요.


지식공유자 소개 ✒️

제 입으로 이런 말 하기 쑥스럽지만...800개가 넘는 수강평 ⭐평균 5점 만점 강사랍니다😅

안녕하세요! 제주에서 스튜디오밀이라는 회사를 운영하고 있는 디자이너이자 개발자, 콘텐츠 크리에이터 1분코딩입니다. 제 스튜디오밀 웹사이트 또한 three.js를 이용해 만들었어요!

이 강의는 간단한 작업물만 만들고 끝나는게 아니라, 실제 동작하는 예제들을 만들어 봄으로써 three.js를 제대로 활용할 수 있어요. 뿐만 아니라 3D 모델링 소프트웨어인 블렌더로 원하는 형태를 모델링 하는 방법까지 커리큘럼에 포함하고 있어서, 내가 원하는 결과물을 만들 수 있습니다.

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
3D 웹사이트를 만들고 싶은 분
눈에 띄는 포트폴리오 웹사이트를 만들고 싶은 분
웹에서 동작하는 3D 콘텐츠를 만들어야 하는 분
📚
선수 지식,
필요할까요?
자바스크립트 기초

안녕하세요
1분코딩 입니다.
1분코딩의 썸네일

서울에서 웹 개발자/디자이너로 일했고 지금은 제주에서 웹사이트 만드는 일, 강의, 영상 만드는 일, 컨텐츠 만드는 일 등 해보고 싶은거 이것저것 해보며 살고 있습니다 :)
비주얼 임팩트가 있는 인터랙티브 웹 개발에 특히 관심이 많고 페이스북과 유튜브 "1분코딩"에서 관련 기술들을 공유하고 있어요.

커리큘럼 총 163 개 ˙ 18시간 56분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 1. three.js의 기본 요소 익히기
소스코드 다운로드
기본 장면 구성요소 살펴보기 미리보기 06:45
기본 장면 만들기 - Renderer 08:35
기본장면 만들기 - Camera 07:40
기본 장면 만들기 - Mesh 05:57
직교 카메라(Orthographic Camera) 07:18
소스코드 구조 잡기 04:15
브라우저 창 사이즈 변경에 대응하기 08:26
배경의 색, 투명도 설정하기 05:31
빛(조명, Light) 04:45
애니메이션 기본 10:04
애니메이션 성능 보정 15:45
안개(Fog) 07:16
라이브러리를 이용한 애니메이션 05:38
(참고) npm, webpack을 사용하지 않고 개발하는 방법 10:57
섹션 2. 개발을 편리하게 해주는 도구들
소스코드 다운로드
축, 그리드 헬퍼 06:40
초당 프레임 수(FPS) 체크하기 03:07
GUI 컨트롤 09:20
섹션 3. Transform(변환)
소스코드 다운로드
위치 이동 06:02
크기 조정 01:26
회전 05:38
그룹 만들기(Scene Graph) 11:31
섹션 4. Geometry(모양)
소스코드 다운로드
여러가지 Geometry 살펴보기 13:34
Geometry 형태 조작하기 1 08:16
Geometry 형태 조작하기 2 08:46
Geometry 형태 조작하기 3 08:36
Geometry 형태 조작하기 4 05:52
섹션 5. 카메라 컨트롤
소스코드 다운로드
OrbitControls 14:07
TrackballControls 02:19
FlyControls 03:29
FirstPersonControls 02:24
PointerLockControls 04:25
DragControls 04:00
마인크래프트 스타일 컨트롤 12:04
섹션 6. Material(재질)
소스코드 다운로드
MeshBasicMaterial 05:04
MeshLambertMaterial, MeshPhongMaterial 06:13
MeshStandardMaterial 04:22
각지게 표현하기, flatShading 01:07
Mesh의 앞뒷면 03:30
텍스쳐 이미지 로드하기 07:43
로딩 매니저(여러개의 텍스쳐 이미지) 05:20
텍스쳐 변환 05:56
여러 이미지 텍스쳐가 적용된 큐브 05:51
MeshToonMaterial(만화 느낌) 05:45
MeshNormalMaterial 02:49
MeshMatcapMaterial 04:30
MeshStandardMaterial에 효과 더하기 08:51
EnvironmentMap 08:57
Skybox 06:14
Material에 Canvas 사용하기 07:11
섹션 7. Light(조명)
소스코드 다운로드
Light 기본 사용법 10:49
Light 애니메이션 07:16
그림자(Shadow) 처리하기 12:08
PointLight 03:25
SpotLight 02:11
HemisphereLight 03:12
RectAreaLight 04:29
섹션 8. Raycaster(클릭 감지)
Raycaster의 동작 원리 미리보기 02:06
소스코드 다운로드
준비 - Line으로 선 만들고 메쉬 배치하기 08:32
특정 광선을 지나는 메쉬 체크하기 10:25
클릭한 메쉬 감지하기 14:26
드래그 클릭 방지 10:23
드래그 클릭 방지 모듈로 만들기 06:16
섹션 9. 3D 캐릭터 모델을 만들고 three.js에서 활용하기
소스코드 다운로드
커스텀 3D 모델 포맷 03:32
[Blender] 블렌더 소개 02:21
[Blender] 패널 추가/삭제 05:26
[Blender] 마우스/트랙패드 컨트롤 04:51
[Blender] 3D 뷰포트 패널 03:43
[Blender] 메쉬의 크기, 추가/삭제 03:34
[Blender] Object 모드와 Edit 모드 13:23
[Blender] 캐릭터 몸통 만들기 12:30
[Blender] 캐릭터 다리 만들기(대칭) 04:04
[Blender] 캐릭터 팔 만들기 09:55
[Blender] 캐릭터 머리 만들기 03:30
[Blender] UV 매핑(전개도 만들기) 06:19
[Blender] 색칠하기 03:51
[Blender] 애니메이션 뼈대 만들기 09:17
[Blender] 애니메이션 만들기 06:54
[Blender] 파일 내보내기 02:06
커스텀 모델 로드하기 07:56
커스텀 모델 애니메이션 05:37
애니메이션 과정 복습 11:55
다운로드 받은 파일 활용하기 03:08
[Blender] 도미노 블럭 만들기(inset, bevel) 08:08
섹션 10. 물리엔진 다루기
물리엔진과 three.js의 관계 미리보기 03:16
소스코드 다운로드
물리엔진 월드 생성 10:23
물리가 적용되는 객체 만들기 19:27
재질에 따른 마찰력과 반발력 12:01
힘(Force) 08:56
랜덤 위치에 공 생성하기 19:11
성능 관리 설정 04:22
충돌 사운드 넣기 07:36
오브젝트 제거하기 06:10
도미노 만들기 1 - glb 배치 15:15
도미노 만들기 2 - 물리엔진 적용 05:41
도미노 만들기 3 - 레이캐스팅 08:02
도미노 만들기 4 - 쓰러뜨리기 05:02
섹션 11. Particle(파티클)
소스코드 다운로드
기본 지오메트리 파티클 05:49
랜덤 파티클 08:30
파티클 이미지 05:10
여러가지 색상의 파티클 02:53
포인트 좌표에 메쉬 생성하기 07:13
형태가 바뀌는 이미지 패널 만들기 1 05:55
형태가 바뀌는 이미지 패널 만들기 2 04:17
형태가 바뀌는 이미지 패널 만들기 3 08:05
형태가 바뀌는 이미지 패널 만들기 4 11:58
섹션 12. 예제 - 스크롤 기반의 3D 랜딩 페이지
프로젝트 살펴보기 01:34
소스코드 다운로드
스크롤 페이지 만들기 2 - 기본 구조 잡기 16:21
스크롤 페이지 만들기 3 - House 클래스 만들기 12:17
스크롤 페이지 만들기 4 - 객체 배치하고 애니메이션 처리하기 13:24
섹션 13. 예제 - 징검다리 게임
프로젝트 살펴보기 미리보기 01:37
소스코드 다운로드
폴더 구조 살펴보기 04:19
기본 장면 구성 05:33
조명 설치 05:36
무대 설치 1 20:58
무대 설치 2 10:12
일반 유리, 강화 유리 설치 10:06
플레이어 만들기 18:34
클릭 처리(Raycaster) 09:47
물리 엔진 기본 설정 06:35
각 객체들에 물리 엔진 적용하기 24:13
스텝(단계) 설정 11:37
점프 동작 구현 08:21
동작 조건 제어 10:47
glb 애니메이션 05:04
실패 시 조명 끄기 03:21
게임 클리어 03:43
추가 카메라 설치 09:02
사운드 추가 10:01
드래그 클릭 방지 04:13
(추가) 캐릭터 그림자 생성 04:34
섹션 14. 마치며
늘 행복하세요! 03:02
섹션 15. [추가 콘텐츠] 여러개의 Scene 동시에 사용하기
소스코드 다운로드
여러개의 Scene 사용하기 1 06:44
여러개의 Scene 사용하기 2 10:38
여러개의 Scene 사용하기 3 14:56
여러개의 Scene 사용하기 4 16:10
여러개의 Scene 사용하기 5 19:46
섹션 16. [추가 콘텐츠] 3D 공간에서 움직이는 캐릭터 ("춘식이 관찰일기" 같은 동작 구현)
소스코드 다운로드
3D 공간에서 움직이는 캐릭터 1 10:26
3D 공간에서 움직이는 캐릭터 2 08:13
3D 공간에서 움직이는 캐릭터 3 08:06
3D 공간에서 움직이는 캐릭터 4 11:31
강의 게시일 : 2022년 02월 25일 (마지막 업데이트일 : 2023년 01월 25일)
수강평 총 77개
수강생분들이 직접 작성하신 수강평입니다.
5
77개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
이정우 thumbnail
5
안그래도 이미 구독되있는 1분코딩님이 이렇게 따끈따끈하고 질좋은 강의를 올려주셔서 감사합니다. 1분코딩님 덕분에 우리나라 프론트엔드 개발자분들이 three.js을 기본으로 사용하는 날도 머지 않았네요 ㅎㅎ
2022-03-10
지식공유자 1분코딩
와- 꿈같은 이야기네요! 좋은 말씀 넘 감사합니다 정우님- 공부 화이팅 하시고요😊
2022-03-11
임수진 thumbnail
5
좋아요오오오오
2022-03-28
지식공유자 1분코딩
감사합니다 수진님!
2022-04-02
이현우 thumbnail
5
너무 좋은강의 잘들었습니다. !! 덕분에 재밌는거 많이 해볼수 있을거같네요!!
2022-03-24
지식공유자 1분코딩
감사합니다 현우님! 재밌는거 많이 만들어보시면 공부도 많이 될거예요! ㅎㅎ
2022-04-02
김김 thumbnail
5
평소에 배우고 싶었던 분야라서 항상 공부 해야겠다고 생각만 하고 문서를 봐도 어떻게 시작할지 몰라 까마득했는데, 하나하나 세세히 같이 따라할 수 있어서 좋았습니다!
2022-03-22
지식공유자 1분코딩
공부 화이팅입니다 김김님! 감사합니다^^
2022-04-02
육영서 thumbnail
5
Three.js의 기본을 알 수 있는 정말 멋진 강의입니다. 해외의 3D 웹 등에서 어떻게 구현하지? 라고 생각했던 것들의 원리를 정리해서 쉽게 알려주시고, three.js 뿐만 아니라 블렌더 사용 방법과 웹에서 물리가 적용되는 방식, 인터랙션에 대한 간단한 이해까지 더해져서 저에게 이 수업은 1+1 그 이상이었습니다. 간결한 설명들과 멋진 예제들로 좋은 강의를 만들어주신 선생님께 정말 감사합니다!
2022-03-03
지식공유자 1분코딩
넘 감사합니다 영서님🥲 강의를 출시하고 나면, 첫 수강평이 달리기까지 항상 많이 긴장이 되거든요.. 제딴엔 열심히 만들었지만, 보시는 분들께는 어떨지를 알 수가 없어서.. 힘나는 말씀 감사드리고, 앞으로도 같이 재밌게 공부해요!
2022-03-03
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!