three.js 강의 Raycaster 예제

Raycaster 이용해서 3D 오브젝트 마우스 오버시 움직임 조절하기(Gsap)

이번에는 Raycaster를 이용해서 3D 오브젝트에 마우스 오버시 움직임 조절하는 방법을 알아볼게요. 우선, 나의 마우스의 위치를 이동할 때마다 구하고, Raycaster를 통해 Scene내에 물체 위에 마우스가 있는지 파악해서 애니메이션을 구현하는 방식을 배워볼게요. 부드러운 애니메이션 적용을 위해 Gsap의 Tweenmax를 같이 사용합니다.

*디자인 베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커맨드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요.