Raycasting Mouse Intersection in Three.js

You're correct that the issue is likely related to how you're normalizing the mouse coordinates for raycasting. When using raycasting in Three.js, it's crucial to normalize the mouse coordinates correctly based on the actual dimensions of your renderer's DOM element, not just the window dimensions.

The Problem

Looking at your description, the white outline around your scene is indeed affecting your calculations. This happens because your mouse coordinates are being normalized based on the entire window, but your Three.js renderer might not occupy the entire window space.

Solution

Here's how to correctly calculate mouse coordinates for raycasting:

JAVASCRIPTCopied
function onMouseMove(event) {
  // Get the bounding rectangle of the renderer's DOM element
  const rect = renderer.domElement.getBoundingClientRect();
  
  // Calculate mouse position in normalized device coordinates (-1 to +1)
  mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
  mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
  
  // Update the raycaster
  raycaster.setFromCamera(mouse, camera);
  
  // Calculate intersections
  const intersects = raycaster.intersectObjects(scene.children, true);
  
  if (intersects.length > 0) {
    // Handle intersection
    const intersectionPoint = intersects[0].point;
    // Update your marker or other visual feedback
  }
}

Key Points

1. Use getBoundingClientRect() to get the exact position and dimensions of your renderer's canvas element.
2. Calculate mouse coordinates relative to the canvas element, not the window.
3. Normalize these coordinates to the range of -1 to 1 as required by Three.js raycaster.

This approach ensures that your raycasting calculations are accurate regardless of where your canvas is positioned within the page or if there are margins/padding around it.

Remember to attach this function to the appropriate event listener:

JAVASCRIPTCopied
renderer.domElement.addEventListener('mousemove', onMouseMove, false);

This should resolve the offset issue you're experiencing with your raycaster intersections.