Interactive Website - 3D website

Three.js를 사용해서 웹사이트를 만드는 튜토리얼을 해보았다. React app에서 어떻게 하면 mouse 이벤트를 활용해서 3d 애니메이션을 적용하는지 파악할 수 있었다. 

동작 화면

큰 흐름

canvas만 처리하는 컴포넌트를 빼고, 그위에 layer를 해주는 부분을 따로 뺀다. canvas는 screen-size에 꽉차도록 구성하고, main은 일반적으로 구성을 하되, absolute 설정을 해서 위에 떠있도록 한다. canvas 컴포넌트에서 mouse scroll 이벤트가 동작하면 카메라 위치를 옮기거나, 물체를 rotate하거나 position을 업데이트해주는 동작을 추가하면 유저의 인터렉션에 따라서 3d 이벤트가 동작하도록 제어가 가능하다. 

 

내 코드

https://github.com/hayoung0Lee/Interactive-Website/tree/main/01-3D-website

hayoung0Lee/Interactive-Website

 

 

참고자료