[JS] mouse 이벤트

mousemove

캔버스나 webGL 등등 자주 쓰이므로 기억해두기

const mousePos = { x: 0, y: 0 };


window.addEventListener('mousemove', function (e) {
    mousePos.x = -1 + (e.clientX / this.window.innerWidth) * 2;
    mousePos.y = 1 - (e.clientY / this.window.innerHeight) * 2;
    console.log(mousePos);
});

누구를 회전시켜야 할까

정답은 stage!
왜냐면 stage는 캐릭터를 포함하고 있음

mousePos 조작하기

window.addEventListener('mousemove', function (e) {
    mousePos.x = -1 + (e.clientX / this.window.innerWidth) * 2;
    mousePos.y = 1 - (e.clientY / this.window.innerHeight) * 2;
    stageElm.style.transform = `rotateX(${mousePos.y * 5}deg) rotateY(${mousePos.x * 5}deg)`;
});```