Spline :: 반응형 구 만들기 (Interactive Spheres in 3D)

가운데 빛나는 구에 마우스를 올리면 주변의 미니 구들이 반응한다. 

 

🔮 [Spline] 반응형 구 만들기 (Interactive Spheres in 3D)

- 가운데 메인 구를 만든다. 

- 주변에 미니 구를 만들고 축을 바깥으로 가게 옮겨준다.

- 구의 색을 Lightning이 아닌 Depth와 Frensel로 만들어준다. 이때 Depth는 Local이 아닌 World로 해서 이동했을 때도 그림자가 자연스럽게 되게 만들어준다. 노랑-파랑, 파랑-어두운 파랑 이런식으로 Depth를 쌓아준다. 

- 미니 구에 여러 상태를 만들어 바깥으로 위치를 옮긴다음에 메인 구에다가 마우스 호버 이벤트를 만들어 그 상태들을 링크해준다.

- 애니메이션은 spring으로 delay들을 다르게 걸어주면 훨씬 자연스러워 진다.

 

📘 Takeaways

- 조명이 아니라 Depth로 색을 쌓아준다. 

- 포토샵의 Action처럼 이벤트 설정값을 따로 저장해둘 수는 없고 하나하나 설정해줘야한다. 

 

🔗 Tutorial

https://youtu.be/P2bv2mn7bCk