three.js 강의 Raycaster 예제

마우스 위치에 따라 애니메이션 추가(Raycaster 응용) – Three.js 강의

해당 강좌는 유튜브 멤버십 회원 전용 강좌입니다.

바로 구독하기

이번에는마우스를 움직일 때 마우스의 위치에따라 주변 오브젝트들이 반응하는 인터렉션을 구현해볼거예요. 저번에 배운 레이케스터를 사용할 예정이고, 애니메이션은 부드럽게 하기위해 GSAP의 트윈맥스를 사용합니다.

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