Math functions for mouse position and camera bounds

threejs-coords.js

export const getScreenPoint = (clientX, clientY, el) => {
  const boundingRect = el.getBoundingClientRect();
  return new THREE.Vector2(
    (clientX - boundingRect.left) * (el.offsetWidth / boundingRect.width),
    (clientY - boundingRect.top) * (el.offsetHeight / boundingRect.height)
  );
};

export const screenToLatLng = (view, vector) => {
  const direction = view.screenToWorld(vector);
  const lat = 90 - Math.acos(direction.y / 1) * 180 / Math.PI;
  const lng =
    (Math.atan2(direction.x, direction.z) * 180 / -Math.PI + 360) % 360 - 180;
  return { lat, lng };
};

export const getClickCoords = (clientX, clientY, viewer) => {
  const screen = getScreenPoint(clientX, clientY, viewer.parent);
  return screenToLatLng(viewer.view, screen);
};

// return array with boundingbox array in: left, bottom, right, top
export const getCameraBounds = (renderer) => {
  const angleV = renderer.camera.fov / 2 * 1.5;
  const angleH = angleV * renderer.displayResolution.ratio;
  return [
    renderer.camera.yaw - angleH,
    renderer.camera.pitch - angleV,
    renderer.camera.yaw + angleH,
    renderer.camera.pitch + angleV
  ];
};