Three.js로 시작하는 인터랙티브 웹 3D
공개
로그인 없이 누구나 시청 가능한 강좌입니다.
Three.js의 기본 구조부터 3D 오브젝트, 재질, 텍스처, 조명, 카메라, 외부 3D 모델까지 단계적으로 학습하고, 마우스와 스크롤에 반응하는 인터랙티브 웹 3D를 직접 구현하는 강좌입니다.
Renderer, Scene, Camera와 같은 Three.js의 핵심 개념부터 Geometry, Material, Texture, Light, Shadow, OrbitControls를 다루며 웹에서 3D 공간을 구성하는 방법을 익힙니다. 이후 OBJ, GLTF, HDR 환경을 활용해 실제 3D 에셋을 웹으로 가져오는 방법과 Raycaster, GSAP, Particle 등을 이용해 사용자의 마우스와 스크롤에 반응하는 인터랙션까지 구현합니다.
단순히 문법이나 기능만 나열하는 것이 아니라, 실제 웹사이트에서 활용할 수 있는 3D 표현과 인터랙션을 직접 만들어보며 Three.js의 구조와 응용 방식을 자연스럽게 익히는 것을 목표로 합니다.
이런 분들이 들으면 좋아요
- 웹사이트에 3D 그래픽을 적용해보고 싶은 분
- Three.js를 처음 시작하는 디자이너와 개발자
- 인터랙티브 웹사이트 제작에 관심 있는 분
- 마우스와 스크롤에 반응하는 3D 인터랙션을 만들고 싶은 분
- 3D 모델을 활용한 웹 포트폴리오나 프로모션 페이지를 제작하고 싶은 분
- GSAP과 Three.js를 함께 활용해보고 싶은 분
이런 지식이 있으면 좋아요
- HTML과 CSS의 기본 구조를 이해하고 있으면 좋습니다.
- JavaScript의 변수, 함수, 이벤트 등 기초 문법을 알고 있으면 학습에 도움이 됩니다.
- Three.js 또는 WebGL 경험은 없어도 괜찮습니다.
- 실습을 위한 코드 에디터와 브라우저 실행 환경이 필요합니다.
이런 자료를 포함해요
예제 미리보기
강좌 커리큘럼
강좌에서 배울 내용을 확인해 보세요.
20개 수업
0분 00초
0개 퀴즈
