CuBe

큐브를 맞추는 사이트 🎮 플레이 링크 🎮

---

🎲 주요 기능

큐브 자유롭게 회전

v.1.0.0 큐브를 회전할 수 있습니다.

큐브 밖을 드래그하면 큐브 전체를 회전합니다.

큐브 안을 선택하여 드래그하면 해당 면만 회전합니다.

모바일도 지원합니다.

🎲 지원 환경

아래 환경에서 테스트 완료

• Windows 10
• Edge 88.0.705.74
• Chrome 88.0.4324
• 삼성 갤럭시 기본 모바일 브라우저

🎲 개발 기간

2021.01.14 ~ 2021.02.25 (버전 1.0)

2020.03. ~ () (서버 준비중)

🎲 구현 요구사항

• 함수는 한번에 한 가지 기능만 한다
• git commit을 의미있게 기록한다
• 상수를 활용한다
• 비즈니스 로직과 UI 로직을 분리한다
• 예외케이스를 고려한다
• 주석에는 왜? 무엇을? 을 작성한다

🎲 DONE

• 개발환경 설정
  • eslint 설정
  • prettier 설정
• 브라우저 크기에 맞춰 큐브 크기 조절
• 큐브 회전하기
  • 큐브 몸통 회전하기
  • 큐브 한 면만 회전하기
• 부드러운 회전 애니메이션
• 마우스로 피킹한 물체 표시하기
• 카툰렌더링
• 깃허브 호스팅

🎲 TODO

• 컴포넌트 형태로 변환하기 (DOM 렌더링과 큐브의 기능·이벤트를 분리하여 다른 곳에서도 큐브를 사용하기 위함)
• three.js 에서 개발자 도구 열면 보이게하는기능? 글꼴 sub-zero
• 버전이 낮은 브라우저에서도 지원하기 (웹팩, 바벨)
• 테스트 코드 작성 (비즈니스모델, E2E)

버전 2.0.0

• 큐브 정답 맞추기
  • 큐브 사진 업로드
  • 큐브 색깔 인식
  • 해답 전체재생
  • 해답 단계별로 재생
• 사용법 튜토리얼 안내
• 큐브 텍스쳐 테마 선택 기능

🎲 사용 오픈소스

• Three.js (https://threejs.org/)
• Tween.js (https://github.com/tweenjs/tween.js/)

           ______     __  __     ______     ______
          /\  ___\   /\ \/\ \   /\  == \   /\  ___\
          \ \ \____  \ \ \_\ \  \ \  __<   \ \  __\
           \ \_____\  \ \_____\  \ \_____\  \ \_____\
            \/_____/   \/_____/   \/_____/   \/_____/