Name		Name	Last commit message	Last commit date
Latest commit History 41 Commits
app		app
assets		assets
components		components
constants		constants
public		public
screenshots		screenshots
store		store
utils		utils
.eslintrc.json		.eslintrc.json
.gitattributes		.gitattributes
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
next.config.js		next.config.js
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json
yarn.lock		yarn.lock

Repository files navigation

Nexthree-Fiber

Next.js@13 과 React-three/fiber 를 이용한 3D 웹페이지 구현

🧩 데모

https://r3f-next-13.vercel.app/

🖼️ 스크린샷

메인

커스터마이징

🧱 기술 스택

📌 구현 기능

framer-motion 을 통한 페이지 전환 애니메이션 및 UI 탭 애니메이션 구현
R3F / drei / maath를 사용해 3D 모델링 및 렌더링 구현
마우스 커서 위치에 따른 모델 회전 구현
모델의 색상을 원하는 대로 변경 구현
모델에 부착하는 데칼을 'Logo' 또는 'Full' 텍스처로 변경 구현
Open AI의 api key를 이용해 프롬프트를 입력하면 🤖dalle가 이미지를 생성해주고 데칼로 붙여주는 기능 구현
'Logo' 또는 'Full' 텍스처를 선택하면 해당 텍스처로 데칼을 붙여주는 기능 구현
캔버스 캡쳐 및 다운로드 기능 구현
모델 두 개(👕티셔츠, ⛵요트) 중 선택 가능
모델 로딩 화면 구현

🎸 기타

💯 Lighthouse Report

모델과 폰트 크기 때문에 조금은 낮게 나온 성적😔

About

React-three-fiber와 Next@13으로 만드는 프로젝트

r3f-next-13.vercel.app

threejs typescript nextjs tailwindcss react-three-fiber valtio

Report repository

Languages