Spline :: 반응형 3D 토글 만들기

 

토글을 클릭 하면 색상이 바뀐다. 

 

 

🔮 Spline :: 반응형 3D 토글 만들기

- 토글이 얹어질 배경을 사각형으로 만든다. 기본 배경이 아니라 사각형으로 해서 따로 배경을 만들어줘야 State로 Event를 만들어 색상을 변경할 수 있다. 

- 기본 사각형에서 코너 둥글게 하고 두께 만들어서 토글 배경을 만든다.

- Color와 Depth를 이용해서 색상과 반사광을 만든다. 

- 위에 구를 얹고 배경 가운데 오게 한다. 

- 구에 Color와 Depth를 이용해서 색상과 반사광을 만든다. 

- 토글 위에 큐브를 만들어서 왼쪽과 오른쪽 가짜 Touch Target을 만들어준다. 이때 레이어를 끄면 안되고 오른쪽 패널에서 Color를 안 보이게 해줘야 클릭이 가능하다. 이때 사각형이 아닌 큐브를 쓰는데 회전할 때도 클릭이 되게 하려고 그러는건가 싶다. 사각형을 쓰면 정면에서만 클릭이 되니까. 

- Base state, state를 만들어서 가짜 왼쪽, 오른쪽 상자들에 이벤트를 만들어서 state들을 연결해준다. 

- Point light를 만들어서 Event / Follow를 선택하면 마우스를 따라다닌다. 

- Export option -> On Hover / Orbit Camera를 하면 앵글 자체가 마우스를 따라다니게 된다. 

 

📘 Takeaways

- 하나의 물체에 두 가지 이벤트를 하려면 가짜 물체를 하나 만들어서 Event를 연결해줘야 한다. 

- Export option에서 스크롤과 줌을 제한할 수 있다.

 

 

🔗 Tutorial

https://www.youtube.com/watch?v=zkw5GT9nYS8&ab_channel=Spline