BEST

프론트엔드

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

Name: Three.js로 시작하는 3D 인터랙티브 웹
Price: 165000 KRW
Rating: 5 (115 reviews)

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

(5.0) 수강평 115개

수강생 1,916명

난이도 초급

수강기한 무제한

1분코딩

스윗코리아

임직원들도 이 강의를 듣고 있어요!

스윗코리아

임직원들도 이 강의를 듣고 있어요!

먼저 경험한 수강생들의 후기

5.0

이정우

95% 수강 후 작성

안그래도 이미 구독되있는 1분코딩님이 이렇게 따끈따끈하고 질좋은 강의를 올려주셔서 감사합니다. 1분코딩님 덕분에 우리나라 프론트엔드 개발자분들이 three.js을 기본으로 사용하는 날도 머지 않았네요 ㅎㅎ

5.0

육영서

99% 수강 후 작성

Three.js의 기본을 알 수 있는 정말 멋진 강의입니다. 해외의 3D 웹 등에서 어떻게 구현하지? 라고 생각했던 것들의 원리를 정리해서 쉽게 알려주시고, three.js 뿐만 아니라 블렌더 사용 방법과 웹에서 물리가 적용되는 방식, 인터랙션에 대한 간단한 이해까지 더해져서 저에게 이 수업은 1+1 그 이상이었습니다. 간결한 설명들과 멋진 예제들로 좋은 강의를 만들어주신 선생님께 정말 감사합니다!

5.0

김김

29% 수강 후 작성

평소에 배우고 싶었던 분야라서 항상 공부 해야겠다고 생각만 하고 문서를 봐도 어떻게 시작할지 몰라 까마득했는데, 하나하나 세세히 같이 따라할 수 있어서 좋았습니다!

수강 후 이런걸 얻을 수 있어요

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분코딩 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분코딩입니다.

커리어인증

19,800

명

수강생

1,297

개

수강평

1,175

개

답변

5.0

점

강의 평점

개

강의

서울에서 웹 개발자/디자이너로 일했고, 제주를 거쳐.. 현재는 말레이시아 페낭에서 열심히 개발도 하고, 교육 콘텐츠도 만들고, 1인 기업으로서 해볼 수 있는 여러가지 시도와 실험들을 해보고 있습니다.
비주얼 임팩트가 있는 인터랙티브 웹에 관심이 많고, 유튜브와 페이스북 "1분코딩"에서 웹 개발 관련 기술들을 공유하고 있어요.

개발자/디자이너/콘텐츠크리에이터
웹사이트 https://studiomeal.com
유튜브 https://youtube.com/c/1분코딩
페이스북 https://www.facebook.com/1mincoding

커리큘럼

전체

161개 ∙ (18시간 39분)

해당 강의에서 제공:

수업자료

섹션 1. three.js 시작하기

7개 ∙ (46분)

섹션 2. three.js의 기본 요소 익히기

14개 ∙ (1시간 38분)

8. 소스코드 다운로드
9. 기본 장면 구성요소 살펴보기
06:45
10. 기본 장면 만들기 - Renderer
11:06
11. 기본장면 만들기 - Camera
07:40
12. 기본 장면 만들기 - Mesh
05:57
13. 직교 카메라(Orthographic Camera)
07:18
14. 소스코드 구조 잡기
04:15
15. 브라우저 창 사이즈 변경에 대응하기
08:26
16. 배경의 색, 투명도 설정하기
05:31
17. 빛(조명, Light)
04:45
18. 애니메이션 기본
08:44
19. 애니메이션 성능 보정
15:40
20. 안개(Fog)
07:11
21. 라이브러리를 이용한 애니메이션
05:30

섹션 3. 개발을 편리하게 해주는 도구들

4개 ∙ (19분)

22. 소스코드 다운로드
23. 축, 그리드 헬퍼
06:40
24. 초당 프레임 수(FPS) 체크하기
03:07
25. GUI 컨트롤
09:20

섹션 4. Transform(변환)

5개 ∙ (24분)

섹션 5. Geometry(모양)

6개 ∙ (45분)

섹션 6. 카메라 컨트롤

8개 ∙ (42분)

섹션 7. Material(재질)

17개 ∙ (1시간 29분)

섹션 8. Light(조명)

8개 ∙ (43분)

섹션 9. Raycaster(클릭 감지)

7개 ∙ (52분)

섹션 10. 3D 캐릭터 모델을 만들고 three.js에서 활용하기

22개 ∙ (2시간 12분)

섹션 11. 물리엔진 다루기

14개 ∙ (2시간 5분)

섹션 12. Particle(파티클)

10개 ∙ (59분)

섹션 13. 예제 - 스크롤 기반의 3D 랜딩 페이지

5개 ∙ (43분)

섹션 14. 예제 - 징검다리 게임

22개 ∙ (3시간 8분)

섹션 15. 마치며

1개 ∙ (3분)

섹션 16. [추가 콘텐츠] 여러개의 Scene 동시에 사용하기

6개 ∙ (1시간 8분)

섹션 17. [추가 콘텐츠] 3D 공간에서 움직이는 캐릭터 ("춘식이 관찰일기" 같은 동작 구현)

5개 ∙ (38분)

강의 게시일: 2022. 02. 24.

마지막 업데이트일: 2025. 07. 21.

수강평

전체

115개

5.0

115개의 수강평

김김
수강평 11
∙
평균 평점 5.0
2022. 03. 22.
5
29% 수강 후 작성
평소에 배우고 싶었던 분야라서 항상 공부 해야겠다고 생각만 하고 문서를 봐도 어떻게 시작할지 몰라 까마득했는데, 하나하나 세세히 같이 따라할 수 있어서 좋았습니다!
- 1분코딩
  지식공유자
  2022. 04. 02.
  공부 화이팅입니다 김김님! 감사합니다^^
이현우
수강평 4
∙
평균 평점 5.0
2022. 03. 24.
5
100% 수강 후 작성
너무 좋은강의 잘들었습니다. !! 덕분에 재밌는거 많이 해볼수 있을거같네요!!
- 1분코딩
  지식공유자
  2022. 04. 02.
  감사합니다 현우님! 재밌는거 많이 만들어보시면 공부도 많이 될거예요! ㅎㅎ
임수진
수강평 9
∙
평균 평점 4.8
2022. 03. 28.
5
100% 수강 후 작성
좋아요오오오오
- 1분코딩
  지식공유자
  2022. 04. 02.
  감사합니다 수진님!
육영서
수강평 5
∙
평균 평점 5.0
2022. 03. 03.
5
99% 수강 후 작성
Three.js의 기본을 알 수 있는 정말 멋진 강의입니다. 해외의 3D 웹 등에서 어떻게 구현하지? 라고 생각했던 것들의 원리를 정리해서 쉽게 알려주시고, three.js 뿐만 아니라 블렌더 사용 방법과 웹에서 물리가 적용되는 방식, 인터랙션에 대한 간단한 이해까지 더해져서 저에게 이 수업은 1+1 그 이상이었습니다. 간결한 설명들과 멋진 예제들로 좋은 강의를 만들어주신 선생님께 정말 감사합니다!
- 1분코딩
  지식공유자
  2022. 03. 03.
  넘 감사합니다 영서님🥲 강의를 출시하고 나면, 첫 수강평이 달리기까지 항상 많이 긴장이 되거든요.. 제딴엔 열심히 만들었지만, 보시는 분들께는 어떨지를 알 수가 없어서.. 힘나는 말씀 감사드리고, 앞으로도 같이 재밌게 공부해요!
이정우
수강평 2
∙
평균 평점 5.0
2022. 03. 10.
5
95% 수강 후 작성
안그래도 이미 구독되있는 1분코딩님이 이렇게 따끈따끈하고 질좋은 강의를 올려주셔서 감사합니다. 1분코딩님 덕분에 우리나라 프론트엔드 개발자분들이 three.js을 기본으로 사용하는 날도 머지 않았네요 ㅎㅎ
- 1분코딩
  지식공유자
  2022. 03. 11.
  와- 꿈같은 이야기네요! 좋은 말씀 넘 감사합니다 정우님- 공부 화이팅 하시고요😊

1분코딩님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

Three.js로 1인칭 3D 웹사이트 만들기

1분코딩

데스크탑과 모바일에서 모두 동작하는 1인칭 3D 웹사이트를 만들어 보는 강의입니다.

초급

인터랙티브 웹, Three.js, 3d

Three.js로 1인칭 3D 웹사이트 만들기

1분코딩

(English) Build a First-person View 3D Website with Three.js

1분코딩

In this lesson, you'll create a first-person 3D website that works on both desktop and mobile.

초급

Three.js, 인터랙티브 웹, 3d

(English) Build a First-person View 3D Website with Three.js

1분코딩

PixiJS로 만드는 2D 그래픽과 게임 with Cursor(AI)

1분코딩

2D 그래픽의 독보적 강자 PixiJS의 기본을 익히고, AI 코드 에디터 Cursor를 이용해 빠르고 효율적으로 개발하는 방법도 배워봅니다.

입문

pixijs, cursor, webgl

PixiJS로 만드는 2D 그래픽과 게임 with Cursor(AI)

1분코딩

웹 애니메이션의 새로운 표준, Web Animations API

1분코딩

라이브러리는 선택이지만, 웹 표준 기술은 필수입니다. 웹 애니메이션의 새로운 표준인 Web Animation API에 남들보다 빠르게 적응하고, 실무에도 바로 활용해보세요!

초급

Web Animations API, JavaScript, HTML/CSS

웹 애니메이션의 새로운 표준, Web Animations API

1분코딩

BBC 인터랙티브 페이지 "코로나19가 바꿀 사무실의 미래" 클론

1분코딩

SNS에서 인기리에 공유되고 있는 BBC의 "코로나19가 바꿀 사무실의 미래" 인터랙티브 페이지의 핵심 기능을 똑같이 만들어 봅니다.

초급

인터랙티브 웹, 클론코딩

BBC 인터랙티브 페이지 "코로나19가 바꿀 사무실의 미래" 클론

1분코딩

애플 웹사이트 인터랙션 클론!

1분코딩

애플 웹사이트에 자주 등장하는 고급 인터랙션 효과들을 처음부터 직접 개발하는 방법을 배울 수 있습니다.

중급이상

인터랙티브 웹, 클론코딩, JavaScript

애플 웹사이트 인터랙션 클론!

1분코딩

CSS Flex와 Grid 제대로 익히기

1분코딩

현재, 그리고 미래의 표준이 될 CSS 레이아웃 작성 방식인 Flex와 Grid에 대해 배울 수 있습니다.

초급

HTML/CSS, Flex

CSS Flex와 Grid 제대로 익히기

1분코딩

3D리플릿 만들기 - 인터랙티브 웹 프로젝트

1분코딩

인터랙티브 웹 프로젝트는, CSS와 자바스크립트를 이용해 창의적인 인터랙션이 있는 예제를 하나씩 만들어보는 시리즈입니다.

중급이상

HTML/CSS, JavaScript, 인터랙티브 웹

3D리플릿 만들기 - 인터랙티브 웹 프로젝트

1분코딩

SVG 마스터

1분코딩

웹 벡터 그래픽 SVG를 기초부터 제대로 익히고, 재미있고 다양한 예제들을 통해 원하는 방향으로 응용할 수 있는 기술을 습득합니다.

초급

SVG, HTML/CSS

SVG 마스터

1분코딩

인터랙티브 웹 개발 제대로 시작하기

1분코딩

크리에이티브 넘치는 인터랙티브 웹페이지를 개발할 수 있는 기본기를 다질 수 있는 수업입니다.

초급

HTML/CSS, JavaScript, 인터랙티브 웹

인터랙티브 웹 개발 제대로 시작하기

1분코딩

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

Three.js 3D 인터랙티브 바로 시작하기

코딩일레븐

실무에서 Three.js를 바로 사용할 수 있도록 커리큘럼을 구성했습니다!

초급

인터랙티브 웹, Three.js

Three.js 3D 인터랙티브 바로 시작하기

코딩일레븐

인터랙티브 웹 개발 제대로 시작하기

1분코딩

크리에이티브 넘치는 인터랙티브 웹페이지를 개발할 수 있는 기본기를 다질 수 있는 수업입니다.

초급

HTML/CSS, JavaScript, 인터랙티브 웹

인터랙티브 웹 개발 제대로 시작하기

1분코딩

인터랙티브 개발 실무 끝장내기 [역량 강화편]

코딩일레븐

실무에서 사용하는 인터랙티브 JS, CSS 노하우를 아낌없이 공개합니다.

초급

인터랙티브 웹, JavaScript

인터랙티브 개발 실무 끝장내기 [역량 강화편]

코딩일레븐

디자이너의 스킬업을 위한 Lottie 완벽 이해하기

디자인베이스

더 이상 Gif, Video에 의존하지 않아도 됩니다. 에프터이펙트에서 제작한 애니메이션을 코드로 출력해서 자바스크립트를 통해 다양한 인터렉션을 구현하는 방법을 배워볼게요. 여러분도 매력적인 웹사이트를 만들 수 있습니다.

초급

Lottie, 웹 디자인, JavaScript

디자이너의 스킬업을 위한 Lottie 완벽 이해하기

디자인베이스

실전! 웹사이트제작! Step by Step! (와이스튜디오_반응형웹)

J.영

실전! 웹사이트 제작! Step By Step의 Applcation Course로 html/ CSS/ jQuery 와plug_in을 사용하여 와이스튜디오(http://www.ystudio.co.kr/) 의 메인페이지를 그대로 제작해 보는 과정입니다. (강의 완성 파일 첨부!)

초급

HTML/CSS, jQuery, 인터랙티브 웹

실전! 웹사이트제작! Step by Step! (와이스튜디오_반응형웹)

J.영