---
type: bookmarks
tags: ['gsap', 'draggable', '360', 'ui']
status: release
ctime: 2022-04-09
mtime: 2024-03-22
---

360 이미지를 드래그해서 회전시키는 기능을 개발할때 3d 리소스를 제공 받을 수 있다면 three.js 같은 라이브러리를 사용해서 쉽게(?) 구현이 가능하다. three.js가 초반 진입 장벽이 높은 것 같지만 단순히 모델 리소스를 보여주는 정도는 배경지식이나 기본지식이 없더라도 어느정도 예제 코드들을 본다면 구현이 가능하다고 본다. 물론 제대로 하고 싶다면 배경지식과 three.js 자체에 대한 학습이 필요.

그런데 부득이하게 여러장으로 된 이미지만 제공 받을 수 있다면 직접 구현해야한다. 그런데 생각보다 드래그 기능을 처음부터 구현한다는게 보통의 개발자들에게는 불편한게 사실이므로 이미 존재하는 플러그인이나 라이브러리를 사용하는게 현실적이다.

그래서 찾아본 gsap의 [Draggable](https://greensock.com/draggable/). 그런데 문서를 보면 다이얼 같이 (뭐라 표현하는게 적당한지 모르겠지만) 직접적으로 드래그 하는 관점의 설명들이 대부분이다. 그런데 360 이미지 같은 경우는 직접적으로 드래그 라기보다는 액션을 빌린 동작이어서 처음에 약간 혼란스러웠는데 좀 더 찾아보니 proxy의 개념을 빌려서 설명된 부분이 있었고 저런식으로 하면 쉽게 [구현](https://codepen.io/eunsoolee/pen/BaZwxoO)이 가능하다.

참고

- [Advanced tutorial: CubeDial, a 3D Carousel made with GSAP - Blog - GreenSock](https://greensock.com/cube-dial-tutorial)
- https://codepen.io/GreenSock/pen/nHpec/
- https://codepen.io/GreenSock/pen/LVEXrB
- https://codepen.io/jamiejefferson/pen/kFhKE/

반대 방향으로 진행시 계산법

- https://codepen.io/GreenSock/pen/b99ec2f21dcd53ecd19c004744b0b6c1