Three.js를 활용한 웹사이트 만들기

이 튜토리얼은 React + Vite 에 Three.js 를 활용한 웹사이트입니다.

React와 Vite를 통해 사이트를 효율적으로 만들어 보는 방법을 익힙니다. 깊이 배우기 보다는 다양한 방법을 사용하여 흐름과 감각을 익히기 위한 튜토리얼입니다.

완성작 보기

미리보기 :

사용 스택

• three(https://threejs.org/) 를 사용한 3D모델링을 통해 더욱 다이나믹한 웹사이트를 제작합니다.
• vite(https://ko.vitejs.dev/) 를 사용하여 사이트를 번들링하고 관리합니다.
• gsap(https://greensock.com/gsap) 를 이용하여 패럴랙스 효과를 줍니다.
• lenis(https://lenis.studiofreight.com/) 를 이용하여 스무스 효과를 구현합니다.
• git(https://github.com/) 을 사용하여 파일을 관리합니다.
• HTML, CSS 기반으로 웹사이트의 기본 레이아웃 설계하고, 웹 표준 및 웹 접근성을 준수하여 작업합니다. ARIA(Accessible Rich Internet Applications)

client 프로젝트 실행

• client로 이동합니다. cd client

• npm을 설치합니다. npm install

• vite를 설치합니다. npm create vite@latest

• three를 설치합니다. npm install three

• gsap를 설치합니다. npm install gsap

• lenis를 설치합니다. npm install @studio-freight/lenis

• 실행합니다. npm run dev