[#전진! 3D 스크롤 11] mousePos 공식 질문 있습니다!

Question

강좌섹션, 전진! 3D 스크롤 11(5:49) 에서 mousePos 공식 어떻게 나오게 됐는지 궁금해 문의 드립니다!   mousePos.x = -1 + (e.clientX / window.innerWidth) * 2; mousePos.y = 1 - (e.clientY / window.innerHeight) * 2; 이왕 코드 다 작성하고 이해하는 중에, 해당 부분도 이해하고 싶어 문의 드립니다   e.clientX(e.clientY) / window.innerWidth(window.innerHeight) 브라우저( window.innerWidth , window.innerHeight ) 가로 세로 기준으로 현재 마우스 위치(e.clientX/e.clientY)가 어디인지 구하는 수식으로 이해했습니다.   mousePos.x = -1 + ..중략.. * 2; mousePos.y = 1 - ..중략.. * 2; 그리고 -1과 1은 결과 반환값으로, -1과 1로 나오기 위해서 지정한 것으로 추측되구요, 그 이외에 - 하는 것, + 하는 것, * 2 하는 것은 어떤 이유에서 만들어진건지 궁금합니다!

1분코딩 · Answer

AI 인턴님이 잘 설명해주셨는데.. 덧붙이자면,
그냥 e.clientX / innerWidth는 비율이 되니까 0에서 1사이의 값이 나오는데, 그걸 -1에서 1 범위로 바꾸기 위해서 추가 연산을 해준거라고 심플하게 생각하시면 됩니다.
y값은 기본적으로 위로 갈 수록 마이너스 아래로 갈 수록 플러스가 되는데, 우리는 그와 반대로, 위로 가면 플러스, 아래로 가면 마이너스로 바꿔주기 위해서 x값과 부호를 반대로 해 준 것이고요^^

인프런 AI 인턴 · Answer

안녕하세요, 프린이 님. 인프런 AI 인턴이에요. 마우스의 위치를 화면의 상대적인 좌표로 변환하기 위한 수식입니다. mousePos.x = -1 + (e.clientX / window.innerWidth) * 2; 위의 코드는 마우스의 X 좌표 값을 e.clientX 로 가져와서 브라우저의 너비인 window.innerWidth 로 나눈 후 2를 곱한 값을 -1에서 더하여 최종적인 X 좌표 값을 계산합니다. mousePos.y = 1 - (e.clientY / window.innerHeight) * 2; 위의 코드는 마우스의 Y 좌표 값을 e.clientY 로 가져와서 브라우저의 높이인 window.innerHeight 로 나눈 후 2를 곱한 값을 1에서 빼서 최종적인 Y 좌표 값을 계산합니다. 따라서, 마우스의 위치를 가져와서 브라우저의 너비와 높이로 나누고 범위를 -1에서 1로 조정한 후 mousePos 변수에 할당하는 것입니다. 이렇게 변환된 좌표는 WebGL이나 Three.js와 같은 3D 그래픽 프로그래밍에서 사용될 수 있습니다. 마우스의 위치를 상대적인 좌표로 변환하는 이유는 다양한 기기와 화면 크기에서 일관된 결과를 얻기 위함입니다. 또한, -1과 1로 값의 범위를 조정한 이유는 원하는 범위 내에서 좌표를 사용하기 위해서입니다. 제가 도움이 되었는지 확인하고 다른 궁금한 점이 있으면 언제든지 물어보세요!