BEST

개발 · 프로그래밍

프론트엔드

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

Name: Three.js 3D 인터랙티브 바로 시작하기
Price: 110000 KRW

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

(4.7) 수강평 25개

수강생 380명

코딩일레븐

인터랙티브 웹 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 기초

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

3,256

명

수강생

215

개

수강평

209

개

답변

4.7

점

강의 평점

개

강의

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

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

http://yahao2512.com

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

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

커리큘럼

전체

57개 ∙ (4시간 33분)

해당 강의에서 제공:

수업자료

섹션 1. 강의 소개

2개 ∙ (6분)

인트로
06:13
교육 자료 다운로드

섹션 2. Three.js 무작정 따라하기

6개 ∙ (25분)

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

섹션 3. Three.js 인터랙티브 기초

4개 ∙ (25분)

module 방식으로 시작
06:14
카메라 마우스로 제어 해보기
04:41
mouse 위치값으로 3D 제어
06:50
기본 도형 응용 (Geometry 종류)
07:50

섹션 4. keyboard 제어하는 기본 도형

6개 ∙ (33분)

섹션 5. 1분만에 3D 공간 만들기

2개 ∙ (7분)

섹션 6. 우주공간 속 지구와 달

5개 ∙ (20분)

섹션 7. 미술관(갤러리) 인터랙티브

7개 ∙ (33분)

섹션 8. Z값을 이용한 (깊이감 있는) 페이지

11개 ∙ (42분)

섹션 9. 3D 모델링을 이용한 인터랙티브 개발

12개 ∙ (1시간 10분)

섹션 10. 마무리

2개 ∙ (7분)

강의 게시일: 2022. 05. 15.

마지막 업데이트일: 2022. 05. 16.

수강평

전체

25개

4.7

25개의 수강평

소나무
2022. 06. 16.
∙
수강평 2
∙
평균 평점 5.0
5
91% 수강 후 작성
신기하고 재미있어서, 구매 후 하루 만에 완강했습니다. 3D 기능 구현을 해야 하는 업무가 있어서, 구글링 하다가 알게 되었어요. 3D 구현 방법이 막막했는데, 강의를 계속 보다 보니 구현 방법을 알게 됩니다. 각각의 강의를 보다 보니 신기하기도 하고, 재미있어서 어제 6시에 결제하고, 지금 시간 새벽 4시까지 봤습니다. 세심한 강의 해 주셔서 감사합니다. ^^
- 코딩일레븐
  지식공유자
  2022. 06. 17.
  three.js 생각보다 어렵지 않죠? ^^ 이 강의가 도움이 된 것 같아서 다행입니다. 수강평 감사드립니다.
seol2ya
2024. 10. 17.
∙
수강평 17
∙
평균 평점 5.0
5
100% 수강 후 작성
THE NALCH
2022. 05. 17.
∙
수강평 3
∙
평균 평점 5.0
5
77% 수강 후 작성
오래기다렸습니다!! 왜 이제서야 오픈하시나요!!
- 코딩일레븐
  지식공유자
  2022. 05. 17.
  으헉 감사합니다 첫 수강평이네요! 늦어도 너무 늦었죠. 죄송하고 기다려주셔서 감사합니다 :)
우디
2022. 05. 19.
수정됨
∙
수강평 2
∙
평균 평점 5.0
5
7% 수강 후 작성
코딩일레븐 강의 정말 잘 만들어졌네요! 예제랑 설명이 잘 설명되어서 직접 해보면서 이해가 쏙쏙 됩니다. Three.js 강의가 많지 않은데, 이렇게 새로운 걸 배울 수 있어서 좋았어요. 다음 강의도 기대됩니다!
- 코딩일레븐
  지식공유자
  2022. 05. 19.
  수강평 감사드립니다! 요즘엔 그래도 three.js 강의나 관련 글이 많아진 것 같아요. 그만큼 관심도 많아진 것 같습니다. 다양하게 활용 가능하니 이번기회에 친해져 보세요. 다음 강의는... 네. 언젠간.
KT C
2024. 08. 07.
∙
수강평 13
∙
평균 평점 5.0
5
77% 수강 후 작성
업무에 도움이 많이 됐습니다. 감사합니다.

코딩일레븐님의 다른 강의

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

몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]

코딩일레븐

₩44,000

초급 / 인터랙티브 웹, JavaScript

4.6

(137)

1,700+

짧은 시간에 실무에서 가장 많이 사용하는 인터랙티브 스킬을 알려드립니다.

초급

인터랙티브 웹, JavaScript

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

코딩일레븐

₩88,000

초급 / 인터랙티브 웹, JavaScript

4.8

(53)

1,100+

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

초급

인터랙티브 웹, JavaScript

비슷한 강의

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

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

1분코딩

₩165,000

초급 / 인터랙티브 웹, Blender, Three.js

5.0

(93)

1,700+

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

초급

인터랙티브 웹, Blender, Three.js

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

1분코딩

₩88,000

초급 / Three.js, 인터랙티브 웹, 3d, JavaScript, 포트폴리오

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

초급

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

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

1분코딩

₩55,000

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

5.0

(310)

3,400+

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

초급

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

실전! 웹사이트제작! Step by Step! ('돕다' 사이트제작_Application Course)

J.영

₩22,000

초급 / HTML/CSS, jQuery, 인터랙티브 웹, 반응형 웹

5.0

(5)

100+

돕다 사이트 제작 Application Course로, 실제 웹사이트 메인페이지를 그대로 제작·구현해보는 강의입니다. 무료 강의로 오픈한 돕다 사이트 Basic Course의 Layout과 Animation 위주의 단순한 구조의 코딩에서 Fixed header, Image Slider, Mobile navigation, Scroll Animation, 반응형 등을 추가하며 코딩 하나하나를 수정보완하며 완성해가는 웹페이지 제작 실전! 강의입니다. (본강의는 돕다-Basic Course를 들으시고 수강하셔야 학습 효과가 크다고 볼 수 있습니다.)

초급

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

실전! 웹사이트제작! Step by Step! ('라한호텔' 사이트제작_Application Course)

J.영

₩27,500

초급 / HTML/CSS, jQuery, 인터랙티브 웹, 클론코딩

5.0

(12)

400+

'호텔 현대라한_목포점' 사이트 제작으로, 실제 웹사이트 메인페이지를 그대로 제작·구현해보는 강의입니다. html/css기초 지식이 있는 분들을 대상으로 html Markup과 Layout제작에 대한 이해는 물론 Fixheader, Image Slider, MenuOpen Bar, Scroll Animation 제작까지의 웹에서 꼭 필요로한 skill을 배울 수 있는 웹페이지 제작 실전! 강의입니다.

초급

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

순수 html/css/js만을 활용한 반응형웹 제작[실전편] 부트캠프

영코디 킴쌤

₩39,600

초급 / HTML/CSS, 반응형 웹, 인터랙티브 웹

5.0

(2)

부트스트랩(BOOTSTRAP)을 사용하지 않고 순수하게 html/css/js 만을 활용하여 디바이스별로 다양한 레이아웃을 구현할 수 있는 반응형 웹페이지 만들기[2024년 최신판] 수업의 실전 제작수업입니다.

초급

HTML/CSS, 반응형 웹, 인터랙티브 웹

웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT

깡코딩

₩88,000

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

4.8

(21)

300+

웹게임도 만들고, 프론트엔드 웹 개발 스킬도 배우는 1석 3조 수업! 독자적인 아이디어로 JavaScript, CSS, HTML을 활용해 게임을 만들 수 있는 방법을 수업으로 만들었습니다!

초급

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

월 ₩22,000

5개월 할부 시

₩110,000

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

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

이런 걸 배울 수 있어요

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

수강 타겟/강의 목적 🔑

섹션별 학습내용 📚

예상 질문 Q&A 💬

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

three.js 로 개발한 게임 소개

다른 강의 보기

이런 분들께 추천드려요!

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

커리큘럼

수강평

코딩일레븐님의 다른 강의

비슷한 강의

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

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

이런 분들께
추천드려요!

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