crosshairs 와 마우스 일치

// 크로스 헤어
let mousePosition = new THREE.Vector2();
const crosshairs = new THREE.Group();
crosshairs.position.z = -1;
camera.add(crosshairs);
const crossMaterial = new THREE.LineBasicMaterial({
  color: 0xfffff,
})
const lineGeometry = new THREE.BufferGeometry();
const lineVerts = [ 0, 0.05, 0, 0, 0.02, 0];
lineGeometry.setAttribute("position", new THREE.Float32BufferAttribute(lineVerts, 3))

for ( let i = 0; i < 4; i++){
  const line = new THREE.Line(lineGeometry, crossMaterial);
  line.rotation.z = i * 0.5 * Math.PI;
  crosshairs.add(line)
}

// 십자선과 마우스 일치
const onMouseMove = (evt)=> {
  w = window.innerWidth;
  h = window.innerHeight;
  let aspect = w/h;
  let fudge = { x: aspect * 0.75, y: 0.75};
  mousePosition.x = ((evt.clientX /w) * 2 -1) * fudge.x;
  mousePosition.y = (-1 * (evt.clientY / h) *2 + 1) * fudge.y;
}

window.addEventListener("mousemove", onMouseMove, false)

function animate(t = 0) {
  updateCamera(t);
  requestAnimationFrame(animate);
  crosshairs.position.set(mousePosition.x, mousePosition.y);
}
animate();

1. 코드에서 fudge는 mousePosition.x와 mousePosition.y 값을 조정하기 위해 사용되는 보정값입니다. 이 보정값은 화면의 종횡비(aspect ratio)에 따라 x축과 y축에서 마우스 위치가 제대로 반영되도록 도와줍니다.
2. 브라우저 창의 크기에 맞춰 마우스 좌표를 -1에서 1 사이의 범위로 변환하는 것입니다. 그러나 화면의 종횡비(aspect ratio)가 정사각형이 아니면, 마우스가 x축 또는 y축으로 이동할 때 왜곡이 발생할 수 있습니다. 이를 보정하기 위해 fudge 값을 도입한 것입니다.
3. fudge.x는 x축에서 마우스 위치 값을 조정하기 위한 보정값입니다. aspect * 0.75는 창의 종횡비를 기준으로 x축의 좌표가 왜곡되지 않도록 값을 조정합니다. 예를 들어, 가로가 넓으면 마우스가 x축으로 이동할 때 더 큰 값을 반영하도록 조정됩니다.
4. fudge.y는 y축의 보정값으로, 여기서는 고정된 0.75를 사용하여 y축 좌표를 조정합니다. 이 값은 y축에서도 마우스 좌표가 과도하게 움직이는 것을 방지하기 위해 약간 축소된 값을 적용하는 것입니다.
5. evt.clientX / w는 마우스의 x좌표를 0에서 1 사이의 값으로 변환합니다. * 2 - 1은 이 값을 -1에서 1 사이의 범위로 변환합니다. 마우스가 왼쪽에 있으면 -1, 오른쪽에 있으면 1이 됩니다. fudge.x를 곱하여 x축의 보정값을 적용합니다. 종횡비가 클수록 x축에서 더 큰 보정이 이루어집니다.
6. evt.clientY / h는 마우스의 y좌표를 0에서 1 사이의 값으로 변환합니다.  * 2 - 1은 이 값을 -1에서 1 사이의 값으로 변환합니다. (위쪽이 1, 아래쪽이 -1이 됩니다.) 마지막으로 fudge.y를 곱하여 y축에 대한 보정값을 적용합니다. 이 경우 0.75로 고정되었으므로, y축 좌표의 움직임을 조금 더 제어하는 역할을 합니다.
7. 이를 통해 화면의 가로/세로 비율이 달라도 마우스 위치가 화면에서 올바르게 계산되고, 왜곡 없이 반응하도록 돕습니다.

 

 

 

 

 

참고: crosshairs 만들기 설명 (1)