three.js 강의 마우스 위치에 따른 회전 예제

멤버십 회원 전용 구독

마우스 위치에 따라 회전시키기(파티클 추가) – Three.js 강의

3D Three.js 웹개발 GSAP Raycaster

이번에는 마우스 위치에 따라 오브젝트를 회전시키는 방법을 배워보고, 함수를 사용해서 파티클을 추가해볼게요.

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

3D Three.js 웹개발 GSAP Raycaster

디자인베이스

누구나 쉽게 배우는 디자인 클래스

three.js 강의 Raycaster 예제

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

스크롤에 따른 3D 인터렉션(회전, 카메라 이동) - Three.js 강의

three.js 강의 스크롤에 따른 애니메이션 예제