# How to get raycaster corrected when canvas is in a componenet?

**URL:** <https://discourse.threejs.org/t/how-to-get-raycaster-corrected-when-canvas-is-in-a-componenet/53076>\
**Category:** Questions\
**Tags:** raycaster\
**Created:** [June 21, 2023, 6:15am UTC](https://discourse.threejs.org/t/how-to-get-raycaster-corrected-when-canvas-is-in-a-componenet/53076 "2023-06-21T06:15:06Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![binoy\_t](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/binoy_t/32/24330_2.png) [@binoy\_t](https://discourse.threejs.org/u/binoy_t)\
**Post date:** [June 21, 2023, 6:15am UTC](https://discourse.threejs.org/t/how-to-get-raycaster-corrected-when-canvas-is-in-a-componenet/53076/1 "2023-06-21T06:15:06Z")

</div>

Hi,  
I am trying to measure the distance between two points in a scene.  
Here is the reference I used: [Raycaster Measurements - Three.js Tutorials](https://sbcode.net/threejs/measurements/).  
It works fine when the canvas is only present, but when there are other components the ray is getting hit somewhere else. Initially I thought it was because I gave ` document.addEventListener("mousemove", onMouseMove, false);` and changed `document` with `canvas` element. But there was no difference.

this is the function used for mouse move :

```javascript
function onMouseMove(event) {
  event.preventDefault();

  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  if (drawingLine) {
    raycaster.setFromCamera(mouse, camera);
    intersects = raycaster.intersectObjects(pickableObjects, false);
    if (intersects.length > 0) {
      const positions = line.geometry.attributes.position.array;
      const v0 = new THREE.Vector3(positions[0], positions[1], positions[2]);
      const v1 = new THREE.Vector3(
        intersects[0].point.x,
        intersects[0].point.y,
        intersects[0].point.z
      );
      positions[3] = intersects[0].point.x;
      positions[4] = intersects[0].point.y;
      positions[5] = intersects[0].point.z;
      line.geometry.attributes.position.needsUpdate = true;
      const distance = v0.distanceTo(v1);
      measurementLabels[lineId].element.innerText = distance.toFixed(3) + "mm";
      measurementLabels[lineId].position.set(
        (v0.x + v1.x) / 2,
        (v0.y + v1.y) / 2,
        (v0.z + v1.z) / 2
      );
    }
  }
}

```

I would like to make the raycaster accurate.

Thanks,  
Binoy

---

<div class="post-metadata">

**Author:** ![Oxyn](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/oxyn/32/12902_2.png) [@Oxyn](https://discourse.threejs.org/u/Oxyn)\
**Post date:** [June 21, 2023, 2:02pm UTC](https://discourse.threejs.org/t/how-to-get-raycaster-corrected-when-canvas-is-in-a-componenet/53076/2 "2023-06-21T14:02:01Z")

</div>

Some wild guesses:

You can attempt to use recursive mode to see if it’s a hierarchy issue.  
`raycaster.intersectObjects(pickableObjects, true)`

if the ray hit something else, you should be able to log the result and check what’s interfering  
`console.log(intersects)`, maybe the mouse coordinate pick the wrong `clientX / clientY` I’m betting on that if you use nested elements.

if the ray doesn’t output anything, then it come from something else.  
like the event itself not firing.

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [June 21, 2023, 4:36pm UTC](https://discourse.threejs.org/t/how-to-get-raycaster-corrected-when-canvas-is-in-a-componenet/53076/3 "2023-06-21T16:36:54Z")

</div>

Instead of this

```javascript
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

```

try

```javascript
mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;

```

In the second code example, it adjusts to the size of the canvas, instead of the browser window.

If your canvas is smaller than the document, and offset left and top some distance, you can try

```javascript
const rect = renderer.domElement.getBoundingClientRect()
...
function onDocumentMouseMove(event) {
    ...
    mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1
    mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1
    ...
}

```

Also, If you are using the CSS2DRenderer to draw the labels over top, then make sure it also matches the dimensions of the canvas.

---

<div class="post-metadata">

**Author:** ![binoy\_t](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/binoy_t/32/24330_2.png) [@binoy\_t](https://discourse.threejs.org/u/binoy_t)\
**Post date:** [June 22, 2023, 4:50am UTC](https://discourse.threejs.org/t/how-to-get-raycaster-corrected-when-canvas-is-in-a-componenet/53076/4 "2023-06-22T04:50:16Z")

</div>

Thanks for the help, this worked

> [@seanwasere](#):
>
> ```javascript
> mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1
> mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1
> 
> ```