Three.js-Svelte-ShoesProject

Three.js Svelte Shoesproject

배포 URL

https://three-js-svelte-shoes-project.vercel.app/

고객 맞춤 구두 제작 서비스를 제공하기 위한 페이지 구현

구현Tool : Svlete, Three.js, Tailwind

  1. 3D 모델링 기능(줌인, 줌아웃, 회전, 영역선택 등)
  2. 색상, 텍스처 선택를 위한 팔레트 컴포넌츠
  3. 현재 선택된 색상값과 텍스처값을 저장하고 받아온 데이터 이용
  4. 선택 되돌리기, 다시실행 버튼 기능 구현(선택과정을 전역데이터로 관리)
  5. 영역이 선택될때마다 눈에띄는 초록색 색상으로 표현(1.6초)
  6. 결제버튼(done) 클릭시 선택가능 구역의 결과값을 한눈에 볼 수 있음
  7. 반응형 구현

  • 초기화면

  • 줌인/회전 기능

  • 팔레트 축소

  • 선택영역 표시

  • 색상변경

  • 텍스쳐변경

  • 결제버튼 클릭

  • 반응형 기능

Top categories

Loading Svelte Themes