초격차 패키지 Online
더 쉽고 편하게 만드는 3D 인터랙티브 웹 개발 :
구현부터 최적화까지 (feat. R3F & Three.js)

01 고퀄 3D 인터랙티브 웹 프로젝트 5개

스크롤 인터랙션, API 정보 웹, 방향키 이동 포트폴리오, 채팅까지 포함한 3D 인터랙티브 웹 완성
02 국내최초 R3F부터 Three.js까지

3D 개발을 위한 대표 근본 스택 Three.js이해는 물론, 더 쉽게 개발 가능한 R3F까지 포함한 커리큘럼
03 국내유일 인터랙티브 웹 최적화 학습까지

사용자의 클릭에 바로 반응하도록! 빠른 속도를 위한 최적화까지 꼼꼼하게 챙긴 국내 유일 강의

기본 정보

1. 기본정보
• 5개 대주제 약 44시간30분 의 3D 인터랙티브 웹 강의
• 초급 - 실전
• 다른 강의들에 포함된 단순 구현이 아닌, 인터랙티브 웹에 각종 기능까지 더한 3D 인터랙티브 웹 프로젝트를 완성

2. 수강대상
• 3D를 만들고 싶었지만 Three.js가 어려워서 다른 방법을 찾고 싶던 분(R3F 학습 추천)
• 단순 오브젝트 구현이 아닌 웹 기능 요소를 인터랙티브 웹에 담고 싶었던 분
• 인터랙티브 웹 최적화로 반응 속도까지 높이고 싶었던 분
• 화려한 웹 포트폴리오를 만들고 싶은 개발자
• 코딩으로 미디어아트, 인터랙티브 웹 게임을 만들고 싶은 분

강의 특징

• 수강료 1회 결제로 평생 소장
• 부가 학습 자료 제공

1. 기획의도
• 인터랙티브 웹이 오브젝트 구현에서 끝나는 게 아닌, 나의 포트폴리오, 랜딩페이지, 정보 전달 등 다양하게 활용할 수 있는 강의입니다.
• 화려한 ‘웹 페이지’에 다양한 기능을 녹여 동일 주제 타 웹 페이지와 비교 우위를 갖는 나만의 웹을 만들 수 있습니다.

2. 사용 스택
• 국내유일! R3F(@react-three/fiber: 8.14.3)
• three.js 0.157.0
• @react-three/drei 9.82.0
• @react-three/cannon 6.6.0
• framer-motion 10.16.4
• framer-motion-3d 10.16.4
• day.js 1.11.10
• cannon-es 0.20.0
• react-dom 15.0
• react-router-dom 6.15.0
• socket.io 4.7
• react 18.2.0
• recoil 0.7.7
• HTML 5
• CSS 3
• TypeScript 5.0.2
• express.js 4.18.2
• node.js 16
• AWS EC2
• vite 4.4.5
• styled-components 6.0.8
• sass 1.68

코스 프로모션 배너 전용입니다.

0일 0시간 0분 0초 코스 프로모션 배너 전용입니다.

(자동)

정가 ~~(자동)~~

할인 금액 (자동)

현재 판매가 (자동)

(자동)

* 12개월 무이자 할부 시

바로 구매하기

시각적인 효과로 사용자를 휘어잡는

단순 오브젝트 구현 수준이 아닌
 포트폴리오나, 상업적 웹 사이트 수준으로 배울 방법은 없을까?

어디서도 찾기 어려운, 그런 강의
패스트캠퍼스에선 배울 수 있습니다.

더 쉽고 화려한 인터랙티브 웹 개발을 위한 7가지 초격차혜택

프로젝트 미리보기

*아래 이미지는 모두 강의에서 제작할 프로젝트입니다*

1
포트폴리오부터 랜딩페이지, 게임, 커머스등 활용도 높은
5개 대규모 프로젝트로 배우는 3D 인터랙티브 웹 개발

프로젝트 1 . 기초

r3f를 이용한 스크롤 애니메이션
스크롤로 오브젝트 제어하기
gsap 이용 gltf 모델의 춤추기

최종 목표
3D이해를 위해 Three.js 기본 개념 이해 및 R3F 개념 이해를 통해 실습으로 적용하기

프로젝트 적용 Point
∙ R3F 개념 이해 및 적용하기
∙ R3F로 힙합 댄싱 스크롤 기반 페이지 애니메이션 구현(GSAP)
∙ 스크롤 양에 따라 dom요소 변화
∙ 파티클이 카메라 각도에 따라 역동적인 색상 변화

구현 기능 요소
∙ 스크롤 이벤트로 카메라 각도 제어하기
∙ 스크롤 이벤트로 오브젝트 제어하기
∙ 최적화를 위한 Instancing 개념 및 실습
∙ 최적화를 위한 Merge 개념 및 실습
∙ 최적화를 위한 Preload 개념 및 실습

프로젝트 2. 기본

3D 지구 오브젝트 로우폴리로 구성하기
3D 지구를 다각도에서 바라볼 수 있게 만들기
3D 오브젝트에 API 연동하여 정보 보여주기

최종 목표
∙ React R3F 개발 환경 구축
∙ R3F로 구현한 3D 오브젝트에서 API연동까지
∙ R3F에서 3D 오브젝트에 애니메이션 주기
∙ R3F에서 리액트 라우터를 활용한 페이지 이동

프로젝트 적용 Point
∙ 3D 오브젝트를 활용한 정보 전달
∙ 지구와 날씨 모델, 날씨 API 활용
∙ API 데이터 연동 및 라우팅 적용
∙ 애니메이션 및 카메라 인터랙션 적용
∙ 날씨 오픈 API 데이터 일치하는 모델 렌더링
∙ Drei 활용 인터랙티브 요소 제작
∙ Framer-motion을 활용한 페이지간 이동시 애니메이션 유지

구현 기능 요소
∙ React Three Drei 활용학습
∙ 비동기 데이터 로딩 및 API 연동
∙ Frame-motion-3D를 활용한 애니메이션 학습
∙ React Router를 활용한 학습
∙ 후처리 효과 및 모델 클릭시 마우스 형태 바꾸기

프로젝트 3. 활용

물리엔진을 이용한 오브젝트 간 상호작용
특정 공간 도달시 정보 공개 이벤트 발생
3D 오브젝트 방향키로 이동 구현

최종 목표
R3F로 3D 오브젝트와 Scene을 구성하여
오브젝트를 게임처럼 방향키 이동 구현하기

프로젝트 적용 Point
∙ 물리엔진 적용을 통한 3D 공간의 물리력(마찰력 등) 구현하기
∙ 특정 장소 이동시 원하는 정보 나타내는 포트폴리오 활용하기
∙ Recoil을 활용한 전역 상태 관리
∙ 모델 최적화 및 텍스처 압축
∙ 물리 엔진의 Static, Kinematic, Dynamic 이해 및 활용

구현 기능 요소
∙ R3F로 3D scene 구성하기
∙ R3Cannon으로 자동차 구현하기
∙ UI 팝업 및 이벤트 처리
∙ 물리 엔진의 다양한 속성 및 모델 교체 기능 구현
∙ Framer-motion을 통한 이벤트 및 모션 만들기
∙ 특정 지역 진입시 이벤트 발생 구현하기
∙ FPS 개념 과 R3F 환경에서 확인 하는법
∙ 물체 충돌시 UI 팝업 생성하기

프로젝트 4. 심화

캐릭터 정하고 입장하기
3D 캐릭터 간의 채팅 구현
물리엔진을 이용한 미니게임 사격 게임 구현

최종 목표
∙ R3F와 Three.js로 3D 오브젝트부터 공간까지 구성
∙ 여러 프론트엔드 기술이 결합된 하나의 온전한 프로젝트 구현 -> 이를 응용하여 다른 프로젝트로 확장

프로젝트 적용 Point
∙ Three.js와 R3F를 함께 사용하는 방법 익히기
∙ 다중 유저 상호작용 및 채팅 기능 구현
∙ 3D 모델 간의 상호작용 및 배치 기능 구현
∙ 물리엔진을 이용한 미니게임 & 공간 구현하기
∙ 이벤트 핸들러 사용 방법 학습하기

구현 기능 요소
∙ 유저플로우로 구현하는 프로젝트
∙ 3D 공간을 활용한 가구 방배치 및 공간 이동 구현
∙ 3D 아바타의 채팅 상호작용 구현
∙ SNS 서비스 입장 전 UI 만들기
∙ useGLTF 훅 이용, 운동장 구성 모델링 에셋 로드
∙ 물리엔진을 이용하여 총알 발사 기능 구현

프로젝트 5. 완성

QR 코드 리드 후 카카오페이 연동
자동 실행되는 와이폰 소개 파트 구현
와이폰 3D 모델링 파트 구현

최종 목표
∙R3F와 Three.js로 3D 오브젝트부터 공간까지 구성
∙ 오브젝트 구현부터 웹다운 기능 구현, 완성도를 높이는 최적화, 배포까지 한 번에 담은 3D 웹 개발 프로젝트

프로젝트 적용 Point
∙ Three.js와 R3F를 사용하여 3D 모델 보여주기
∙ React를 기반으로 Next.js를 이해하여 최적화까지 챙긴 프로젝트 구현하기
∙ 호버 / 스크롤 애니메이션 효과 구현해보기
∙ 파티클 이펙트 구현해보기
∙ 자동 실행되는 아이폰 소개 파트 만들어보기

구현 기능 요소
∙ 마우스가 올라갔을 때 메뉴 리스트를 보여주기
∙ 하단으로 스크롤 시 나오는 Floating Navigation 만들기
∙ 스크롤을 내리면 등장하는 버튼 만들기
∙ 파티클 효과 만들어보기
∙ 카카오페이 결제 연동을 통한 3D 커머셜 인터랙티브 웹 만들기
∙ AWS EC2에 배포해보기

2
인터랙티브 웹을 더 쉽게!
국내 최초ㅣ3D의 근본 Three.js는 물론, 더 쉽게 3D를 구현하는 R3F까지 한번에!

JavaScript 기반의 Three.js와 React 기반의 R3F VanilaJS가 어려웠던 분들을 위해
더 쉽게 현란한 3D를 구현하는 방법을 학습합니다.

더 쉽게 3D 인터랙티브를 구현 시켜줄 프레임워크
R3F (react-three/fiber)

Three.js와 R3F, 각각의 장점을 활용해
프로젝트 요구사항과 상황에 알맞은 인터랙티브 웹 개발 방법까지 한번에

R3F로 구현 난이도는 Down , 퀄리티는 Up!
총 5단계의 체계적 커리큘럼으로 완성하는 쉽고 완성도 높은 3D 웹!

R3F 기초개념 부터 배운뒤 3D 오브젝트 구현을 함께 진행합니다.
R3F와 Three.js를 함께 사용하는 방법까지 한번에 배웁니다.
실전에서 활용할 수 있도록 성능 최적화에 대한 부분까지 다룹니다.

모든 프로젝트에 웹 최적화 실습 100% 포함!

더 부드럽고 효과적인 UX를 제공하여
인터랙티브 웹의 맛을 살리세요

3
3D 오브젝트 구현에서만 끝나는 활용도 낮은 강의는 그만!
오브젝트를 활용한 재밌는 채팅부터, 유저의 눈을 사로 잡는 상품 소개까지

프론트엔드 실무에서도 200% 적용 가능한 80가지 이상의 기능 실습을 확인하세요!

4
3D 인터랙티브 웹 구현부터, 활용도를 높이는 스택까지
25가지 이상 기술 단계별 학습

3D 구현부터 기능 구현까지 체계적으로 학습합니다.

3D를 빠르고 효과적으로 개발해주는
R3F와 꿀 조합인 Drei 까지 완벽 학습!

HTML 및 CSS를 3D 공간에 통합

HTML 요소와 CSS 스타일을 3D 공간에
렌더링해 3D 요소와 2D 요소를 조합
텍스처 및 재질 설정

텍스처와 재질 설정을 간단하게 처리해
3D 오브젝트의 외관을 다양하게 조작
카메라 컨트롤

카메라 이동, 줌, 회전 등을 사용자에게 제공해
유저가 3D 공간을 탐색하고 상호 작용 가능
3D 모델 로딩 및 렌더링

간단한 코드로 3D 모델을 화면에 표시

고급심화 학습

3STEP 물리엔진 학습으로,
3D 움직임과 인터랙션을 더 정확하게, 더 역동적으로!

1단계. 기본 물리 원리 이해

2단계. 물체 유형 구분

3단계. 물리력 적용

+Plus

타사의 유료 강의 주제를 혜택 강의로 만나세요!
HTML,CSS,JS로 완성하는 스페셜 인터랙티브 웹 프로젝트 제공.

R3F나 Three.js 같은 프레임워크를 활용하지 않고
인터랙티브 웹을 개발하는 방법을 알려드립니다.

공기팟 st 스크롤 인터랙티브 웹사이트
강의 하나로, 원하는 인터랙티브 웹을 만들 수 있도록 혜택 강의까지 확실히 챙겨드립니다

학습내용

1. 환경 설정
∙ HTML, CSS, JS, Webpack 설정
∙ 헤더, 푸터 , 내비게이션 등의 요소 작성
2. 스크롤 애니메이션
∙ CDN 이미지를 스크롤 재생으로 구현
∙ 추출한 이미지 스크롤 재생으로 구현
3. 스크롤 이벤트 추가
∙ GSAP 스크롤 이벤트 소개
∙ 스크롤 트리거 예제와 함께 섹션2 구현 (글자 투명도)
∙ 스크롤 트리거 예제와 함께 섹션3 구현 (요소 위치 변경)

심플한 인터랙션 구현이 아닌,
3D 인터랙트 웹 공부를 언제든 꺼내볼 수 있도록,

필요한 이미지 자료부터, 코드까지 모두 강의에서 제공합니다.

Special 7.

3D를 전문으로 다룬 전문가가 알려주는
인터랙티브 웹 개발, 믿고 들어도 좋습니다.

압도적인 포트폴리와 경력을 가진 강사진으로 구성된 3D 인터랙티브 웹개발 강의.

강사님들의 포트폴리오

어디서도 배울 수 없는 독보적이고 실용성 높은 프로젝트!
퀄리티는 높이고 가격 부담은 확 낮췄습니다!

패스트캠퍼스의 3D 인터랙티브 강의는?
3D에 웹 기능까지 덧붙여 활용도가 높은 강의!

API 연동, 채팅 기능, 방향키 이동으로 3D 공간활용, 스크롤 애니메이션등
더 다양하게 활용 가능한 강의

본 강의에서만 누릴 수 있는 특별 학습 Point!

커리큘럼

개별 강의로 손색이 없는 총 5개의 프로젝트를 초격차 패키지 하나로 모두 들을 수 있습니다!
지금 한 번만 결제하고 모든 강의를 평생 소장하세요!

프로젝트01. Threejs, R3f, Drei 기초

01. 기본 세팅 및 소개

ㆍ 프로젝트 소개

02. 프로젝트 구현에 필요한 Threejs 개념 정리

ㆍ 프로젝트 소개 및 환경 세팅
ㆍ Threejs의 기본 구성 요소(Renderer, Scene, Camera, Mesh)의 개념
ㆍ Threejs의 기본 구성 요소(Renderer, Scene, Camera, Mesh)실습
ㆍ Threejs의 기본 구성 요소(Geometry)개념
ㆍ Threejs의 기본 구성 요소(Geometry)실습
ㆍ Threejs의 기본 구성 요소(Material)개념
ㆍ Threejs의 기본 구성 요소(Material)실습
ㆍ Threejs의 기본 구성 요소(Light, Shadow, Controls)개념
ㆍ Threejs의 기본 구성 요소(Light, Shadow, Controls)실습
ㆍ Threejs로 파일 로드하기
ㆍ Threejs로 애니메이션 구현하기
ㆍ Threejs로 Pointer 이벤트 다루기

03. R3F(React Three Fiber)의 기본

ㆍ 프로젝트 소개 및 환경 세팅
ㆍ Threejs와 R3F의 차이점 알아보기
ㆍ R3F의 기본 구성 요소(Renderer, Scene, Camera, Mesh)실습
ㆍ R3F의 기본 구성 요소(Geometry)실습
ㆍ R3F의 기본 구성 요소(Light, Shadow, Controls)실습
ㆍ R3F로 GLB 파일 로드하기
ㆍ R3F로 애니메이션 구현하기
ㆍ R3F로 Pointer 이벤트 다루기
ㆍ 알아두면 유용한 R3F 생태계의 라이브러리 gltfjsx 알아보기
ㆍ 알아두면 유용한 R3F 생태계의 라이브러리 postprocessing 알아보기
ㆍ 알아두면 유용한 R3F 생태계의 라이브러리 cannon 알아보기

04. R3F로 힙합 댄싱 스크롤 페이지 만들기

ㆍ 프로젝트 소개 및 환경 세팅
ㆍ React 페이지 컴포넌트 및 캔버스 세팅하기
ㆍ GLB 파일 로드 후, 애니메이션 재생하기
ㆍ ScrollControls 추가하기
ㆍ useProgress를 이용하여, Loader 컴포넌트 추가하기
ㆍ gsap 알아보기
ㆍ gsap과 scrollControls 연동하여 Timeline 구성하기
ㆍ 스크롤 이벤트로 카메라 각도 제어하기
ㆍ 스크롤 이벤트로 오브젝트 제어하기
ㆍ 스크롤 이벤트로 변화하는 역동적인 효과 추가하기1
ㆍ 스크롤 이벤트로 변화하는 역동적인 효과 추가하기2
ㆍ 스크롤 이벤트로 나타나는 DOM 제어하기1
ㆍ 스크롤 이벤트로 나타나는 DOM 제어하기2
ㆍ PositionalAudio로 3D 상에서 입체적 음향효과 구현하기

05. R3F(React Three Fiber) 최적화

ㆍ Instancing 개념 및 실습
ㆍ Merge 개념 및 실습
ㆍ Preload 개념 및 실습
ㆍ React Suspense와 R3F 연동 및 Loader 컴포넌트 만들어보기
ㆍ Three-stdlib의 최적화 예제 알아보기
ㆍ 마무리

프로젝트 02. API 활용, 도시 내비게이션

1. R3F에서 3D 개발 환경 구현

ㆍ 학습 개발 환경 설정 (vscode,github,r3f,node)
ㆍ 기본 Scene 구성 (canvas, box)
ㆍ 3D오브젝트 로드 방법 학습 (glb)
ㆍ 지구 3D오브젝트 구현
ㆍ 날씨 3D오브젝트 구현 (해, 비, 구름, 미스트, 눈)

2. Open API 활용 및 API KEY키 관리

ㆍ 날씨 Open API 소개 및 API KEY 관리 (API, 환경변수)
ㆍ 시 날씨 데이터 호출 방법 학습 (promise)
ㆍ API 데이터와 3D오브젝트 연결
ㆍ 그룹 오브젝트 해당 오브젝트만 기억하기 (useMemo)
ㆍ 비동기 데이터(3D 오브젝트, API 데이터) 로딩 처리하기 (suspense)

3. 3D 오브젝트 애니메이션 구현

ㆍ 물체 회전 시키기 (useFrame)
ㆍ 3D오브젝트들 아치 형태로 위치시키기
ㆍ framer-motion-3D 라이브러리 소개
ㆍ 물체 호버시 크기 변경

4. 심화 인터랙티브 요소 구현 (Drei)

ㆍ Drei 라이브러리 간단 소개
ㆍ html,css를 Canvas에 구현 (Html)
ㆍ 카메라 인터랙션 구현 (Orbitcontrols)
ㆍ 3D오브젝트 클릭시 포커스 및 아웃 (Bounds, useBounds)

5. 리액트 페이지 이동 (react-router)

ㆍ 리액트 라우터에 대한 이해
ㆍ API 데이터에 따른 상세 페이지 5개 제작
ㆍ 3D오브젝트 클릭시 해당 상세 페이지로 이동 시키기
ㆍ 페이지 이동간 애니메이션 관리 (AnimatePresence)

6. 후처리 효과 및 모델 클릭시 마우스 형태 바꾸기

ㆍ 마우스 형태 바꾸기 (css)
ㆍ 지구 회전 icon 넣기 (css)
ㆍ 구름 효과 넣기 (Cloud)

프로젝트 03. 3D 물리엔진 자동차 웹

1.3D 개발 환경 구현

ㆍ 프로젝트 설명 (r3f, cannon)
ㆍ use-cannon 라이브러리 소개
ㆍ leva 라이브러리 소개
ㆍ 물리 엔진 기본 1편 (useBox, useShpere, useCylinder, usePlane )
ㆍ물리 엔진 기본 2편 (useTrimesh, useConvexPolyhedron )

2. use-cannon로 자동차 구현

ㆍ 물리 엔진을 가진 자동차의 바디 만들기 (useBox)
ㆍ 물리 엔진을 가진 바퀴 만들기 (useCompoundBody)
ㆍ 키보드를 통한 바퀴 제어 로직 만들기
ㆍ 물리엔진 Static, Kinematic, Dynamic 이해하기
ㆍ useBox, useSphere로 충돌체 만들기 구체, 박스 (Dynamic)
ㆍ 벽과 고정체 만들기 (Static)
ㆍ 자동차를 따라다니는 카메라 만들기 (useThree)

3. 3D 오브젝트에 실제 모델 적용하기

ㆍ gltfjsx로 소개 및 glb 파일을 jsx로 변환하기
ㆍ 자동차 바디 glb 모델로 적용하기
ㆍ 자동차 바퀴 glb 모델로 적용하기
ㆍ 충돌 모델 glb 모델로 적용하기
ㆍ Text 3D 모델 넣기

4. 이벤트 및 모션 만들기

ㆍ recoil 전역값 관리 학습
ㆍ 페이지 진입시 인 모션 만들기
ㆍ 물체 충돌 UI 팝업 생성
ㆍ 물체 충돌시 물체 회전 (간판 회전)
ㆍ 물체 마우스 클릭시 페이지 이동(링크 이동)
ㆍ 특정 지역 진입시 이벤트1(버튼 클릭으로 링크 이동) 발생
ㆍ - 특정 지역 진입시 이벤트2((box flood) 발생

5. 최적화 학습 내역

ㆍ FPS 개념 과 Drei를 통한 status 확인
ㆍ Webp로 텍스처 압축
ㆍ gltf-pipeline Draco 압축을 통한 모델 최적화
ㆍ gltf => glb로 변환

프로젝트04. 3D SNS 서비스 만들기

01. 3D SNS 서비스 프로젝트 소개

ㆍ 프로젝트 구현에 필요한 라이브러리 소개
ㆍ 구현해 볼 프로젝트 서비스 기능 소개
ㆍ 기본적인 프로젝트 구조 소개
ㆍ 자주 사용하게 될 R3F와 Drei의 기능 소개

02. 기본적인 평면 구성 및 Scene 초기 세팅

ㆍ R3F로 캔버스 세팅하기
ㆍ R3F로 카메라 배치하기
ㆍ R3F로 조명과 그림자 배치하기
ㆍ R3F로 바닥 배치하기
ㆍ useFrame 훅을 이용하여, 애니메이션 쉽게 구현하기

03. Socket.io 개념 및 기본 서버 구현 및 클라이언트 사이드 연동

ㆍ Socket.io 란
ㆍ Socket.io 예제 실습하기
ㆍ Socket.io 로 프로젝트 서버의 서버사이드 구축하기
ㆍ Socket.io 로 프로젝트 서버의 클라이언트 사이드 구축 후, 이벤트 발행하기
ㆍ 여러 유저의 상태 동기화하기

04. SNS 서비스 입장 전 UI 만들기

ㆍ 유저 정보 입력 UI 구현하기
ㆍ 유저 정보 입력 후, 데이터 서버와 동기화하기
ㆍ 유저 캐릭터 스켈레톤 구조 살펴보기
ㆍ 유저 캐릭터 선택하기 UI 구현하기

05. 운동장 맵, 기능 만들기

ㆍ useGLTF 훅을 이용하여, 운동장 구성 모델링 에셋 로드하기
ㆍ 운동장 맵에 다양한 효과 입히기
ㆍ 운동장 맵에 NPC 추가하기
ㆍ 운동장 맵에 오브젝트 추가하기1
ㆍ 운동장 맵에 오브젝트 추가하기2
ㆍ 운동장 맵에 오브젝트 추가하기3
ㆍ 운동장 맵에 추가된 오브젝트에 이벤트 부착하기1
ㆍ 운동장 맵에 추가된 오브젝트에 이벤트 부착하기2
ㆍ 운동장 맵에 추가된 오브젝트에 이벤트 부착하기3
ㆍ 모델링 오브젝트 인터렉션 기능 - Geometry의 BoundingBox 계산을 통해. 모델링 오브젝트 경계선 구하기
ㆍ 모델링 오브젝트 인터렉션 기능 - 경계선 안으로 들어올 때, 모델링 오브젝트 인터렉션 기능 구현

06. SNS 서비스 입장 후 UI 만들기

ㆍ 맵 변경을 위한 드롭다운 구현
ㆍ 채팅창 UI 구현
ㆍ 채팅창 기능 구현
ㆍ 채팅 말풍선 기능 구현
ㆍ 유저 알림 UI 구현
ㆍ 유저 알림 기능 구현
ㆍ 모델링 저작권 관련 설명
ㆍ 모델링 저작권 명시 푸터 구현

07. 마이룸 맵, 기능 만들기

ㆍ R3F로 방과 바닥 Mesh 배치하기
ㆍ Drei의 OrbitControls의 카메라 회전 각도 제한하기
ㆍ useGLTF 훅을 이용하여, 가구 모델링 에셋 배치하기
ㆍ 가구 배치 기능 구현 - 상단 버튼 UI 만들기
ㆍ 가구 배치 기능 구현 - pointermove 이벤트헨들러 설정하기
ㆍ 가구 배치 기능 구현 - pointer 이벤트헨들러 설정하기
ㆍ 가구 배치 기능 구현 - 주변 구조물과의 offset 고려하여 pointermove 이벤트핸들러 수정하기
ㆍ 가구 배치 기능 구현 - 최종 배치 기능 구현 완료하기
ㆍ 기술 스택 배치 기능 구현 - 상단 버튼 UI 만들기
ㆍ 기술 스택 배치 기능 구현 - useTexture 훅을 이용하여, 기술 스택 cube Mesh의 Material의 map 속성에 texture 적용하기
ㆍ 기술 스택 배치 기능 구현 - pointermove 이벤트핸들러 설정하기
ㆍ 기술 스택 배치 기능 구현 - pointerup 이벤트핸들러 설정하기
ㆍ 기술 스택 배치 기능 구현 - 주변 구조물과의 offset 고려하여 pointermove 이벤트핸들러 수정하기
ㆍ 기술 스택 배치 기능 구현 - 최종 배치 기능 구현 완료하기
ㆍ 마이룸 메모 배치 구현 - 메모 남기기 UI 만들기
ㆍ 메모 배치 기능 구현 - pointermove 이벤트핸들러 설정하기
ㆍ 메모 배치 기능 구현 - pointerup 이벤트핸들러 설정하기
ㆍ 메모 배치 기능 구현 - 주변 구조물과의 offset 고려하여 pointermove 이벤트핸들러 수정하기
ㆍ 메모 배치 기능 구현 - 최종 배치 기능 구현 완료하기
ㆍ 배치된 가구 회전 기능 구현1
ㆍ 배치된 가구 회전 기능 구현2
ㆍ 배치된 가구 회전 기능 구현3

08. 미니게임 맵, 기능 만들기

ㆍ FPS 게임에 필요한 에셋 로드 및 배치하기
ㆍ FPS 게임 인터페이스 만들기
ㆍ 게임 표적 배치 하기
ㆍ 총기 반동 효과 구현
ㆍ 물리엔진을 이용하여 총알 발사 기능 구현
ㆍ 물리엔진을 이용하여 총알과 표적의 충돌 기능 구현

09. 마무리

ㆍ 반드시 기억해야할 요소
ㆍ 3D 상에서의 간단한 수학계산 살펴보기

프로젝트05. 와이폰 프로 15 프로젝트(+결제 기능 연동으로 커머스 기능까지)

01. React.js로 시작하는 Next.js 아이폰 클론코딩 프로젝트

ㆍ[ Next.js 기본개념 및 특징들] Next.js 기본 소개
ㆍ Next.js 프로젝트 생성해보기
ㆍ Next.js 간단 실습해보기

02. 아이폰 홈페이지의 헤더/푸터 구현해보기

ㆍ [기본 UI 만들어보기] Footer 기본 UI 만들어보기
ㆍ [기본 UI 만들어보기] Header 기본 UI 만들어보기
ㆍ [기본 UI 만들어보기] SVG 적용해보기
ㆍ [마우스가 올라갔을 때 UI를 바꿔보기] Header에 호버 애니메이션 적용해보기
ㆍ [Responsive Design 구현해보기] Tailwind를 이용하여 Responsive Design 구현해보기
ㆍ [Framer-motion 기본 알아보기] Framer-motion 애니메이션 효과 알아보기
ㆍ [마우스가 올라갔을 때 메뉴 리스트를 보여주기] Framer-motion을 사용하여 메뉴 만들기
ㆍ [하단으로 스크롤 시 나오는 Floating Navigation 만들기] Framer-motion을 사용하여 Floating Navigation 만들기

03. 자동 실행되는 아이폰 소개 파트 만들어보기

ㆍ [비디오가 자동으로 실행되게 해보자] 비디오 인터렉션 구현해보기
ㆍ [비디오가 자동으로 실행되게 해보자] Framer-motion을 활용하여 비디오 인터렉션 구현해보기
ㆍ [비디오가 자동으로 실행되게 해보자] 비디오 인터렉션 최적화해보기
ㆍ [두둥 등장하는 컴포넌트 만들기] Framer-motion을 사용하여 컴포넌트 나타나게 만들기
ㆍ [클릭 시 Footer로 이동하게 해보기] Anchor 구현해보기

04. 인터렉티브한 아이폰 핵심 파트 만들어보기

ㆍ [스크롤을 내리면 등장하는 타이틀 만들기] Framer-motion을 사용하여 등장하는 텍스트 만들기
ㆍ [스크롤을 내리면 등장하는 타이틀 만들기] Framer-motion을 사용하여 등장하는 버튼 만들기 1
ㆍ [스크롤을 내리면 등장하는 타이틀 만들기] Framer-motion을 사용하여 등장하는 버튼 만들기 2
ㆍ [비디오 재생과 연동해보기] 비디오 재생에 따라 컴포넌트 업데이트하기

05. 아이폰 3D 모델링 파트 구현해보기

ㆍ [3D 파트 구현] 3D 기본 설정하기
ㆍ [3D 파트 구현] 아이폰 모델 로드하기
ㆍ 하단부 버튼 구현해보기
ㆍ [3D 인터렉션 주기] 아이폰 모델 색깔 바꿔보기
ㆍ [3D 인터렉션 주기] 아이폰 모델 크기 바꿔보기

06. 앞서 배운 애니메이션을 다른 파트에 적용해보기

ㆍ R3F로 캔버스 세팅하기
ㆍ 탐구 섹션 만들어보기
ㆍ A17 소개 파트 만들어보기
ㆍ 카메라 소개 파트 만들어보기

07. 인터렉티브한 추가 효과 구현해보기

ㆍ [파티클 효과 만들어보기] tsParticle 효과 알아보기
ㆍ [파티클 효과 만들어보기] tsParticle을 사용하여 섹션 하나 만들어보기

08. 카카오페이 결제 연동해보기

ㆍ 카카오페이 전체 흐름 이해해보기
ㆍ 카카오페이 환경설정 준비하기
ㆍ 카카오페이 결제창 호출해보기

09. Next.js를 활용한 SEO 구현해보기

ㆍ SEO 구현해보기

10. 배포해보기

ㆍ [AWS EC2에 배포] EC2 생성 / 환경설정 해보기
ㆍ [AWS EC2에 배포] EC2에 코드 올려보고 실행해보기
ㆍ [AWS EC2에 배포] EC2 외부 접속 허용해보기
ㆍ[AWS EC2에 배포] EC2 지속적으로 돌려보기
ㆍ Vercel에 배포해보기

부록 - 에어팟 st 스크롤 인터랙션 인터랙티브 웹

1. 환경설정

ㆍ html,css,js 웹팩 설정
ㆍ 레이아웃 구성, 헤더,푸터, 스크롤 콘텐츠

2. 스크롤로 영상 제어

ㆍ video 파일을 영상 스크롤 재생으로 구현
ㆍ CDN 이미지를 스크롤 재생으로 구현
ㆍ 영상을 이미지로 추출하는 법
ㆍ 추출한 이미지로 스크롤 재생으로 구현

3. 스크롤 이벤트 추가

ㆍ gsap 스크롤 이벤트 소개
ㆍ 스크롤 트리거 예제와 함께 섹션2 구현 (글자 투명도)
ㆍ 스크롤 트리거 예제와 함께 섹션3 구현 (요소 위치 변경)
ㆍ 스크롤 트리거 예제와 함께 섹션4 구현 (관광 제품 소개)
ㆍ 해더, 푸터 스크롤 이벤트 구현

04. 아키텍처 테스트

ㆍ 아키텍처 테스트 소개
ㆍ [실습] ArchUnit 기반 아키텍처 테스트 - 1
ㆍ [실습] ArchUnit 기반 아키텍처 테스트 - 2

추가 강의. 3D 에디터 개발 프로젝트

1. Three.js를 활용하여 기본 에디터 배경 만들기

ㆍ 무한 그리드 만들어보기
ㆍ 커스텀 카메라 만들어보기
ㆍ커스텀 Axis Helper 만들어보기

2. Mesh를 에디터에 로드해보기

ㆍ 기본 도형 (구, 정육면체, 원기둥 등)을 로드해보기
ㆍ CDN 이미지를 스크롤 재생으로 구현
ㆍ 텍스트 로드해보기
ㆍ 외부 파일 로드해보기

3. Mesh를 움직이기

ㆍ Mesh를 선택하기
ㆍ 선택한 Mesh를 UI적으로 표현해보기
ㆍ 선택된 Mesh를 움직여보기

4. Mesh를 에디터에 로드해보기

ㆍ 두 Mesh를 합치기 - Union
ㆍ 두 Mesh의 겹치는 부분만 남겨놓기 - Intersect
ㆍ 두 Mesh의 겹치지 않는 부분만 남기기 - Negate

5. 만든 Mesh를 저장해보자

ㆍ Mesh를 에디터에 로드해보기
ㆍ 에디터에 만들어낸 Mesh를 저장해보기

상세 커리큘럼.

자세한 커리큘럼 및 내용은 여기서 확인하세요!

자세히 보기 »

(자동)

정가 ~~(자동)~~

할인 금액 (자동)

현재 판매가 (자동)

(자동)

* 12개월 무이자 할부 시

바로 구매하기

이 강의도 추천해요.

학습규정 * 본 상품은 동영상 형태의 강의를 수강하는 상품입니다.
* 상황에 따라 사전 공지 없이 할인이 조기 마감되거나 연장될 수 있습니다.
* 수강 신청 및 결제를 완료하시면, 마이페이지를 통해 바로 수강이 가능합니다.
* 강의 공개 일정은 내부 사정에 따라 변경될 수 있습니다.

총 학습기간:
– 정상 수강기간(유료 수강기간) 최초 2개월 (60일), 무료 수강 기간은 61일 일차 이후로 무제한이며, 유료 수강기간과 무료 수강기간 모두 동일하게 시청 가능합니다.
– 본 패키지는 약 44시간30분분량으로, 일 1시간 내외의 학습 시간을 통해 정상 수강 기간(=유료 수강 기간) 내에 모두 수강이 가능합니다.
– 수강시작일: 수강 시작일은 결제일로부터 기간이 산정되며, 결제를 완료하시면 마이페이지를 통해 바로 수강이 가능합니다. (사전 예약 강의는 1차 강의 오픈일)
– 패스트캠퍼스의 사정으로 수강시작이 늦어진 경우에는 해당 일정 만큼 수강 시작일이 연기됩니다.
– 일부 강의는 아직 모든 영상이 공개되지 않았습니다. 각 상세페이지 하단에 공개 일정이 안내되어 있습니다.

주의사항 – 상황에 따라 사전 공지 없이 할인이 조기 마감되거나 연장될 수 있습니다.
– 천재지변, 폐업 등 서비스 중단이 불가피한 상황에는 서비스가 종료될 수 있습니다.
– 본 상품은 기수강생 할인, VIP CLUB 제도 (구 프리미엄 멤버십), 기타 할인 이벤트 적용이 불가할 수 있습니다.
– 커리큘럼은 제작 과정에서 일부 추가, 삭제 및 변경될 수 있습니다.
– 쿠폰 적용이나 프로모션 등으로 인해 5만원 이하의 금액으로 강의를 결제할 경우, 할부가 적용되지 않습니다.

환불규정 – 환불금액은 정가가 아닌 실제 결제금액을 기준으로 계산됩니다.
– 쿠폰을 사용하여 강의를 결제하신 후 취소/환불 시 쿠폰은 복구되지 않습니다.

– 수강시작 후 7일 이내, 5강 미만 수강 시에는 100% 환불 가능합니다.
– 수강시작 후 7일 이내, 5강 이상 수강 시 전체 강의에서 수강한 강의의 비율에 해당하는 수강료를 차감 후 환불 가능합니다.

– 수강시작 후 7일 초과 시 정상 수강기간 대비 잔여일에 대해 아래 환불규정에 따라 환불 가능합니다.
환불요청일 시 기준
: 수강시작 후 1/3 경과 전, 실 결제금액의 2/3에 해당하는 금액 환불
: 수강시작 후 1/2 경과 전, 실 결제금액의 1/2에 해당하는 금액 환불
: 수강시작 후 1/2 경과 후, 환불 금액 없음

* 보다 자세한 환불 규정은 홈페이지 취소/환불 정책에서 확인 가능합니다.

패스트캠퍼스 아이디 공유 금지 정책 안내 [패스트캠퍼스 아이디 공유 금지 정책]
패스트캠퍼스의 모든 온라인 강의에서는 1개의 아이디로 여러명이 공유하는 형태를 금지하고 있습니다.
동시접속에 대한 기록은 내부 시스템을 통해 자동으로 누적되며, 이후 서비스 이용이 제한될 수 있습니다.

[기기제한 정책]
패스트캠퍼스 온라인 강의 시청을 위해서는 ID별 최대 3개의 기기를 등록할 수 있으며, 기기 등록은 온라인 강의장 접속 시 자동 등록됩니다.
최대 갯수를 초과하였을 경우 등록된 기기 해제가 필요합니다.

[저작권 정책]
패스트캠퍼스의 모든 강의는 무단 배포 및 가공하는 행위, 캡쳐 및 녹화하여 공유하는 행위, 무단으로 판매하는 행위 등 일체의 저작권 침해 행위를 금지합니다.
부정 사용이 적발될 경우 저작권법 위반에 의한 법적인 제재를 받으실 수 있습니다.

root layout

더 쉽고 편하게 만드는 3D 인터랙티브 웹 개발 : 구현부터 최적화까지 (feat. R3F & Three.js)