초급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.
이런 걸
배워요!
Three.js
3D 인터랙티브 개발
TweenMax (GSAP)
2D를 넘어 3D를 다루면 개발이 더 재밌어집니다!
Three.js로 입체적인 컨텐츠 개발 함께해요. 🧩
활용도 높은 Three.js,
미리 공부해서 준비하기 📖
제가 실무에서 사용하는 Three.js 소스를 사용하여 커리큘럼을 기획했습니다.
서비스부터 콘텐츠, 게임 등 활용도 높은 Three.js를 쉽게 알려드리고,
실무에 바로 사용할 수 있는 원본 소스도 제공합니다.
일부 예제 이미지 공유 드립니다
수강 타겟/강의 목적 🔑
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 개발 및
데이터 시각화, 인터랙티브 사이트 제작을 했습니다.
https://brunch.co.kr/@yahao2512
저와 함께 깃털처럼 가벼운 코딩 함께 해보시죠!
커리큘럼
전체
57개 ∙ (4시간 33분)
가 제공되는 강의입니다.
인트로
06:13
Threejs 페이지 둘러보기
03:36
vscode 및 익스텐션 설치
01:03
Z좌표의 이해 (깊이감)
03:06
module 방식으로 시작
06:14
카메라 마우스로 제어 해보기
04:41
mouse 위치값으로 3D 제어
06:50