[three.js] 마우스를 따라가는 정육면체

본 내용은 아래 강의에서 공부한 내용입니다. 강의가 정말 좋으니 추천드립니당..

https://www.inflearn.com/course/threejs-3d-%EC%9D%B8%ED%84%B0%EB%9E%99%ED%8B%B0%EB%B8%8C

 

Three.js 3D 인터랙티브 바로 시작하기 강의 | 코딩일레븐 - 인프런

 

https://www.inflearn.com/users/258264/@coding11

코딩일레븐님의 소개 - 인프런

 

 

 

 

*기존 소스는 그대로 사용하고 onDocumentMouseMove이벤트를 건다.

마우스를 왼쪽으로 이동시켰을때, 오른쪽으로 이동시켰을때를 픽셀 단위로 나타내서 위치를 계산함.

let windowHalfX = WIDTH / 2; let windowHalfY = HEIGHT / 2; document.addEventListener("mousemove", onDocumentMouseMove); const onDocumentMouseMove = (event) => {     //이 계산을 통해 마우스 위치가 화면 중앙을 기준으로 얼마나 떨어져 있는지를 계산합니다     // 마우스가 화면 중앙에 있을 때: mouseX와 mouseY는 0     // 마우스가 중앙보다 오른쪽에 있을 때: mouseX는 양수     // 마우스가 중앙보다 왼쪽에 있을 때: mouseX는 음수     // 마우스가 중앙보다 아래에 있을 때: mouseY는 양수     // 마우스가 중앙보다 위에 있을 때: mouseY는 음수     // 예를 들어, 마우스를 화면 오른쪽으로 움직이면 mouseX가 양수가 되어 박스가 오른쪽으로 회전하고, 왼쪽으로 움직이면 mouseX가 음수가 되어 박스가 왼쪽으로 회전하게 됩니다.     //event.clientX : 브라우저 창 내에서 마우스의 가로(X축) 위치를 픽셀 단위로 나타냅니다     mouseX = event.clientX - windowHalfX;     //event.clientY : 브라우저 창 내에서 마우스의 세로(Y축) 위치를 픽셀 단위로 나타냅니다     mouseY = event.clientY - windowHalfY;     // console.log(mouseY);     // console.log(event.clientX, windowHalfX, mouseX); }; const animete = () => {     //많이 도는 횟수 0.003     targetX = mouseX * 0.003;     targetY = mouseY * 0.002;     if (boxMesh) {         //속도제어 0.1         boxMesh.rotation.y += 0.1 * (targetX - boxMesh.rotation.y);         boxMesh.rotation.x += 0.1 * (targetY - boxMesh.rotation.x);     }     camera.lookAt(scene.position);     //장면의 위치를 바라봄     camera.updateProjectionMatrix();     //변경된 값을 카메라에 적용한다     renderer.render(scene, camera);     requestAnimationFrame(animete); };