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

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

    스크롤 인터랙션, API 정보 웹, 방향키 이동 포트폴리오, 채팅까지 포함한 3D 인터랙티브 웹 완성

  • 02 국내최초 R3F부터 Three.js까지

    3D 개발을 위한 대표 근본 스택 Three.js이해는 물론, 더 쉽게 개발 가능한 R3F까지 포함한 커리큘럼

  • 03 국내유일 인터랙티브 웹 최적화 학습까지

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

코스 프로모션 배너 전용입니다.
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 기초

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

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

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

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

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

  • 상세 커리큘럼.

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

    자세히 보기 »

(자동)
정가 (자동)
할인 금액 (자동)
현재 판매가 (자동)

(자동)

* 12개월 무이자 할부 시
바로 구매하기
해당 강의는 사전 예약 구매 상품입니다.

영상 공개는 다음과 같이 7회에 걸쳐 공개됩니다.
(1회 구매 이후 모든 영상을 평생 소장 가능합니다.)

-----

1차 공개 : 23년 11월 22일 (수)
2차 공개 : 23년 12월 20일 (수)
3차 공개 : 24년 01월 24일 (수)
4차 공개 : 24년 02월 21일 (수)
5차 공개 : 24년 03월 27일 (수)
6차 공개 : 24년 04월 30일 (화)
전체 공개 : 24년 06월 07일 (금)

이 강의도 추천해요.
ADsp 문항