인프런 커뮤니티 질문&답변
작성한 질문수
[#전진! 3D 스크롤 11] mousePos 공식 질문 있습니다!
작성
·
308
0
강좌섹션, 전진! 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 하는 것은 어떤 이유에서 만들어진건지 궁금합니다!
답변 2
0
AI 인턴님이 잘 설명해주셨는데.. 덧붙이자면,
그냥 e.clientX / innerWidth는 비율이 되니까 0에서 1사이의 값이 나오는데, 그걸 -1에서 1 범위로 바꾸기 위해서 추가 연산을 해준거라고 심플하게 생각하시면 됩니다.
y값은 기본적으로 위로 갈 수록 마이너스 아래로 갈 수록 플러스가 되는데, 우리는 그와 반대로, 위로 가면 플러스, 아래로 가면 마이너스로 바꿔주기 위해서 x값과 부호를 반대로 해 준 것이고요^^
0
안녕하세요, 프린이 님. 인프런 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로 값의 범위를 조정한 이유는 원하는 범위 내에서 좌표를 사용하기 위해서입니다.
제가 도움이 되었는지 확인하고 다른 궁금한 점이 있으면 언제든지 물어보세요!