Thumbnail
BEST
개발 · 프로그래밍 프론트엔드

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

(4.7)
22개의 수강평 ∙  346명의 수강생
110,000원

월 22,000원

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

초급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.

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

✍️
이런 걸
배워요!
Three.js
3D 인터랙티브 개발
TweenMax (GSAP)

2D를 넘어 3D를 다루면 개발이 더 재밌어집니다!
Three.js로 입체적인 컨텐츠 개발 함께해요. 🧩

활용도 높은 Three.js,
미리 공부해서 준비하기 📖

제가 실무에서 사용하는 Three.js 소스를 사용하여 커리큘럼을 기획했습니다.
서비스부터 콘텐츠, 게임 등 활용도 높은 Three.js를 쉽게 알려드리고,
실무에 바로 사용할 수 있는 원본 소스도 제공합니다.

 

일부 예제 이미지 공유 드립니다

우주공간에서 자전과 공전을 하는 지구와 달
조명과 액자가 걸려있는 갤러리 공간
3D Z값 시뮬레이션
GSAP 라이브러리로 부드러운 카메라 이동
입체적인 랜덤한 이미지인터랙티브 개발
해외 사이트 클론, 스크롤과 3D 연동
3D 캐릭터 소개 페이지 제작
초간단 3D 공간 만들기

수강 타겟/강의 목적 🔑

3D로 제작된 페이지를
만들고싶은 분

입체적인 콘텐츠 개발에
관심이 많은 분

Three.js를 바로 실무에서
사용하고 싶은 분


섹션별 학습내용 📚

Section 1

  • Three.js 무작정 따라하기

Section 2

  • Three.js 인터랙티브 기초

Section 3

  • keyboard 제어하는 기본 도형

Section 4

  • 1분만에 3D 공간 만들기

Section 5

  • 우주공간, 지구와 달

Section 6

  • 미술관(갤러리) 인터랙티브

Section 7

  • Z값을 이용한 (깊이감 있는) 페이지

Section 8

  • 3D 모델링을 이용한 인터랙티브 개발


예상 질문 Q&A 💬

Q. 비전공자도 들을 수 있나요?

Javascript 기초가 있다면 더욱 수월하겠지만, 기초부터 배우는 강의이기 때문에 비전공자도 편하게 들으실 수 있습니다. 또한, 예제의 모든 JS 소스를 제공해 드리니 보시면서 따라하실 수 있습니다.

Q. Three.js를 배우면 뭐가 좋은가요?

입체를 다루면 서비스나 콘텐츠의 퀄리티가 달라집니다. 개인 프로젝트나 포트폴리오 배경으로만 깔아도 시선을 확 끌수 있지요. 상상만했던 페이지를 직접 만들수 있습니다.

Q. 실무에서 많이 사용하나요?

게임이나 콘텐츠에는 이미 많이 사용되고 있고, 서비스에서도 Three.js를 사용하는 일이 점점 많아지고 있습니다. (토스 뱅크 카드 신청 페이지에도 three.js가 쓰였습니다)


지식공유자를 소개합니다 ✒️

Three.js를 이용한 인터랙티브 콘텐츠 및 웹 페이지를 많이 제작했습니다.
데이터 시각화부터 게임까지 다양한 곳에 Three.js를 사용하고 있습니다.
아래 영상은 FECONF에서 Three.js 사용 경험을 공유했던 영상입니다.

three.js 로 개발한 게임 소개

 

다른 강의 보기

현업에서 실제 사용하는 인터랙티브 스크립트

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
Three.js를 바로 실무에 사용하실 분
입체적인 콘텐츠 개발에 관심 많으신 분
해외 사이트 같은 포트폴리오가 필요하신 분
📚
선수 지식,
필요할까요?
javascript 기초
css 기초

안녕하세요
코딩일레븐 입니다.
코딩일레븐의 썸네일

15년 이상 여러 기업과 언론사에서 front-end 개발 및

데이터 시각화, 인터랙티브 사이트 제작을 했습니다.

http://yahao2512.com

 

https://brunch.co.kr/@yahao2512

저와 함께 깃털처럼 가벼운 코딩 함께 해보시죠!

커리큘럼 총 57 개 ˙ 4시간 33분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 강의 소개
인트로 미리보기 06:13
교육 자료 다운로드
섹션 1. Three.js 무작정 따라하기
Threejs 페이지 둘러보기 미리보기 03:36
vscode 및 익스텐션 설치 01:03
Three.js 다운로드 및 CDN 사용 미리보기 03:07
Three.js 기초 설명 (perspective camera, animate) 07:30
Z좌표의 이해 (깊이감) 미리보기 03:06
재질과 조명 (Material, Light) 06:56
섹션 2. Three.js 인터랙티브 기초
module 방식으로 시작 06:14
카메라 마우스로 제어 해보기 04:41
mouse 위치값으로 3D 제어 06:50
기본 도형 응용 (Geometry 종류) 07:50
섹션 3. keyboard 제어하는 기본 도형
섹션 3 인트로 미리보기 00:52
기본 도형으로 자동차 만들기 08:18
keyboard 이벤트 (keycode) 04:45
그룹의 이해 Three.Group, forEach 09:36
조명 넣기 (LIGHT 종류) 05:40
카메라 컨트롤 OrbitControls 04:13
섹션 4. 1분만에 3D 공간 만들기
섹션 4 인트로 미리보기 00:42
입체적인 공간 구현 06:55
섹션 5. 우주공간 속 지구와 달
섹션 5 인트로 미리보기 00:58
지구 만들기 (Texture Loader) 07:09
우주 공간 만들기 03:14
공전과 자전하는 달 만들기 04:23
움직이는 구름 넣기 05:15
섹션 6. 미술관(갤러리) 인터랙티브
섹션 6 인트로 미리보기 01:20 기본 도형과 위치값의 이해 미리보기 04:41
갤러리 벽면 만들기 04:49
액자 조명 넣기 ( Shadow, Spot Light ) 07:18
페이지 이동 구현 1. 마우스 클릭 03:52
페이지 이동 구현 2. 마우스 휠 02:50
부록 - TweenMax (GSAP)과 이미지 드래그 08:28
섹션 7. Z값을 이용한 (깊이감 있는) 페이지
섹션 7 인트로 미리보기 01:19
3D 공간에 이미지 랜덤으로 뿌리기 04:43
안개 효과로 분위기 내기 ( THREE.Fog ) 03:37
마우스 스크롤 값과 Z좌표 연동 02:55
마우스 위치값과 이미지 위치 연동 03:35
페이지 진행바 넣기 ( progress bar ) 06:52
페이지 Height 값 셋팅 ( 추가 설명 ) 01:24
클릭 감지 (raycaster) 08:08
클릭시 페이지 이동 02:52
해외 사이트 클론 06:17
과제 01:12
섹션 8. 3D 모델링을 이용한 인터랙티브 개발
섹션 8 인트로 미리보기 02:14
무료 3D 다운로드 및 three.js editor 사용법 06:43
자연스러운 무대 연출 ( fog ) 05:21
FBX loader 모델링 로드 06:35
모델링 그림자 연출 ( object.travers ) 03:14
애니메이션 제어 ( mixer ) 05:55
키보드 애니메이션 컨트롤 02:58
스크롤 이벤트와 모델링 회전 08:34
부드러운 카메라 이동 ( GSAP, TweenMax) 07:27
해외 레퍼런스 페이지 분석 미리보기 02:24
html에 3D 투명 레이어 올리기 05:39
window scrollTop으로 모델링 제어 및 연출 13:11
섹션 9. 마무리
[꿀팁] 3D 파일 로드시 주의할 점 04:36
수고하셨습니다 02:51
강의 게시일 : 2022년 05월 16일 (마지막 업데이트일 : 2022년 05월 16일)
수강평 총 22개
수강생분들이 직접 작성하신 수강평입니다.
4.7
22개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
Thomas thumbnail
5
관심이 많았던 분야였는데 쉽게 배울수 있어서 너무 유익했습니다. 새로운 강의가 기대되요
2024-01-31
우디 thumbnail
5
믿고보는 코딩일레븐.. 예제랑 설명이 잘되있어서 스텝 별로 따라가기 너무 쉬움ㅎㅎ 신기하네요 이거ㅋㅋ 재밌어요 추천합니다. Three.js 강의 찾기가 쉽지 않은데 새로운 거 해볼 수 있어서 너무 좋았습니다. 다음 강의도 재밌는걸로 부탁드려요
2022-05-19
지식공유자 코딩일레븐
수강평 감사드립니다! 요즘엔 그래도 three.js 강의나 관련 글이 많아진 것 같아요. 그만큼 관심도 많아진 것 같습니다. 다양하게 활용 가능하니 이번기회에 친해져 보세요. 다음 강의는... 네. 언젠간.
2022-05-19
위대한 쇼맨 thumbnail
5
솔직히 도움이 됩니다. 알고 싶은 내용만 있네요. 나머지 공부는 혼자서 채워가면 될 것 같습니다. 감사합니다.
2024-02-06
THE NALCH thumbnail
5
오래기다렸습니다!! 왜 이제서야 오픈하시나요!!
2022-05-17
지식공유자 코딩일레븐
으헉 감사합니다 첫 수강평이네요! 늦어도 너무 늦었죠. 죄송하고 기다려주셔서 감사합니다 :)
2022-05-17
소나무 thumbnail
5
신기하고 재미있어서, 구매 후 하루 만에 완강했습니다. 3D 기능 구현을 해야 하는 업무가 있어서, 구글링 하다가 알게 되었어요. 3D 구현 방법이 막막했는데, 강의를 계속 보다 보니 구현 방법을 알게 됩니다. 각각의 강의를 보다 보니 신기하기도 하고, 재미있어서 어제 6시에 결제하고, 지금 시간 새벽 4시까지 봤습니다. 세심한 강의 해 주셔서 감사합니다. ^^
2022-06-17
지식공유자 코딩일레븐
three.js 생각보다 어렵지 않죠? ^^ 이 강의가 도움이 된 것 같아서 다행입니다. 수강평 감사드립니다.
2022-06-17