# Raycaster is detecting the intersection at an offset

**URL:** <https://discourse.threejs.org/t/raycaster-is-detecting-the-intersection-at-an-offset/70123>\
**Category:** Questions\
**Tags:** raycaster\
**Created:** [August 31, 2024, 1:08pm UTC](https://discourse.threejs.org/t/raycaster-is-detecting-the-intersection-at-an-offset/70123 "2024-08-31T13:08:17Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Chayan\_Pant](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chayan_pant/32/48872_2.png) [@Chayan\_Pant](https://discourse.threejs.org/u/Chayan_Pant)\
**Post date:** [August 31, 2024, 1:08pm UTC](https://discourse.threejs.org/t/raycaster-is-detecting-the-intersection-at-an-offset/70123/1 "2024-08-31T13:08:17Z")

</div>

I am getting this output:

I am adding a small red sphere at the point of intersection.  
You can see that it is getting offset by some distance, I have already applied the solution mentioned in this thread.  
[Solution in a thread](https://discourse.threejs.org/t/solved-raycaster-on-mouse-click-laggs-an-action-behind/3184/2)

Here is my code:

```javascript
//
// Raycaster
//

let raycaster = new THREE.Raycaster();

const mouse = new THREE.Vector2()

window.addEventListener('mousemove', (event) => {
  var canvasBounds = renderer.domElement.getBoundingClientRect();

  mouse.x = ((event.clientX - canvasBounds.left) / (canvasBounds.right - canvasBounds.left)) * 2 - 1;
  mouse.y = - ((event.clientY - canvasBounds.top) / (canvasBounds.bottom - canvasBounds.top)) * 2 + 1;
})

let testBox = new THREE.Mesh(new THREE.BoxGeometry(2, 2, 2), new THREE.MeshBasicMaterial);
testBox.position.set(-5, 5, 10);
testBox.name = 'Test Box'
scene.add(testBox)

// 
// GAME LOOP ==========================================================================
// 
const clock = new THREE.Clock();
let animate = () => {
...
...
raycaster.setFromCamera(mouse, camera)
    let boxIntersect = raycaster.intersectObject(testBox);
    console.log(boxIntersect);
    if(boxIntersect.length > 0){
      let sphereTest = new THREE.Mesh(new THREE.SphereGeometry(0.02, 32, 32), new THREE.MeshBasicMaterial({color:'red'}));
      sphereTest.position.set(boxIntersect[0].point.x, boxIntersect[0].point.y, boxIntersect[0].point.z);
      scene.add(sphereTest)
    }
...
}

```

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [August 31, 2024, 5:28pm UTC](https://discourse.threejs.org/t/raycaster-is-detecting-the-intersection-at-an-offset/70123/2 "2024-08-31T17:28:27Z")

</div>

What’s drawing the trail on the cursor?

Not sure whats wrong in yr app… can you post the renderer setup? Are you setting devicePixelRatio? That might interact with the coordinate calculation…

---

<div class="post-metadata">

**Author:** ![Chayan\_Pant](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chayan_pant/32/48872_2.png) [@Chayan\_Pant](https://discourse.threejs.org/u/Chayan_Pant)\
**Post date:** [August 31, 2024, 5:34pm UTC](https://discourse.threejs.org/t/raycaster-is-detecting-the-intersection-at-an-offset/70123/3 "2024-08-31T17:34:44Z")

</div>

@manthrax

The cursor trail is from a chrome extension: [CursorTrace link](https://chromewebstore.google.com/detail/cursortrace/gdngbglapejijhppfmpaofmcgbcpofnj)

I am not setting the pixel ratio. Here is my renderer setup, along with camera:

```javascript
// 
// RENDERER ============================================================================
//

const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });
renderer.setSize(sizes.width, sizes.height);

renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
renderer.gammaOutput = true;
renderer.gammaFactor = 3;
renderer.toneMapping = THREE['LinearToneMapping'];
renderer.toneMappingExposure = 1.13;

renderer.render(scene, camera);

```

```javascript
// 
// CAMERA =============================================================================
// 
let camera;
let perspectiveCamera = new THREE.PerspectiveCamera(
  55,
  sizes.width / sizes.height,
  0.1,
  300
);
perspectiveCamera.position.set(-8, 8, 25);
camera = perspectiveCamera

```

---

<div class="post-metadata">

**Author:** ![dubois](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@dubois](https://discourse.threejs.org/u/dubois)\
**Post date:** [August 31, 2024, 5:42pm UTC](https://discourse.threejs.org/t/raycaster-is-detecting-the-intersection-at-an-offset/70123/4 "2024-08-31T17:42:53Z")

</div>

> [@Chayan\_Pant](#):
>
> `canvasBounds.right - canvasBounds.left`

Why dont you use `canvasBounds.width` for this?

---

<div class="post-metadata">

**Author:** ![Chayan\_Pant](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chayan_pant/32/48872_2.png) [@Chayan\_Pant](https://discourse.threejs.org/u/Chayan_Pant)\
**Post date:** [August 31, 2024, 5:44pm UTC](https://discourse.threejs.org/t/raycaster-is-detecting-the-intersection-at-an-offset/70123/5 "2024-08-31T17:44:48Z")

</div>

```javascript

const mouse = new THREE.Vector2()

window.addEventListener('mousemove', (event) => {
  var canvasBounds = renderer.domElement.getBoundingClientRect();

  mouse.x = ((event.clientX - canvasBounds.left) / (canvasBounds.width)) * 2 - 1;
  mouse.y = - ((event.clientY - canvasBounds.top) / (canvasBounds.height)) * 2 + 1;
})

```

Updated, still same result.

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [August 31, 2024, 6:08pm UTC](https://discourse.threejs.org/t/raycaster-is-detecting-the-intersection-at-an-offset/70123/6 "2024-08-31T18:08:04Z")

</div>

> [@Chayan\_Pant](#):
>
> `sizes.width, sizes.height`

Where does “sizes” come from?  
Does your app have a resize handler?  
Can you paste that?

---

<div class="post-metadata">

**Author:** ![Chayan\_Pant](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chayan_pant/32/48872_2.png) [@Chayan\_Pant](https://discourse.threejs.org/u/Chayan_Pant)\
**Post date:** [August 31, 2024, 6:15pm UTC](https://discourse.threejs.org/t/raycaster-is-detecting-the-intersection-at-an-offset/70123/7 "2024-08-31T18:15:56Z")

</div>

Yes, I am handling resize.

```javascript

const sizes = { width: window.innerWidth, height: window.innerHeight };

window.addEventListener("resize", () => {
  sizes.width = window.innerWidth;
  sizes.height = window.innerHeight;

  camera.aspect = sizes.width / sizes.height;
  camera.updateProjectionMatrix();

  renderer.setSize(sizes.width, sizes.height);
  renderer.render(scene, camera);
});

```

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [August 31, 2024, 6:17pm UTC](https://discourse.threejs.org/t/raycaster-is-detecting-the-intersection-at-an-offset/70123/8 "2024-08-31T18:17:33Z")

</div>

OK and one last thing to check before I just ask to see it running somewhere because otherwise I’m out of ideas…

Is your browser zoom set to 100% ?

---

<div class="post-metadata">

**Author:** ![Chayan\_Pant](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chayan_pant/32/48872_2.png) [@Chayan\_Pant](https://discourse.threejs.org/u/Chayan_Pant)\
**Post date:** [August 31, 2024, 6:48pm UTC](https://discourse.threejs.org/t/raycaster-is-detecting-the-intersection-at-an-offset/70123/9 "2024-08-31T18:48:57Z")

</div>

Yes, the browser is set to 100% zoom.

I have deployed it here for you to check out. Apologies for it not being optimized as of now.  
[Netlify Deployed link](https://66d364cc75f6ce61525b822b--transcendent-genie-42d602.netlify.app/)

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [August 31, 2024, 6:58pm UTC](https://discourse.threejs.org/t/raycaster-is-detecting-the-intersection-at-an-offset/70123/10 "2024-08-31T18:58:07Z")

</div>

There are a couple calls to .lookAt in the main loop. These are changing the camera transform, but not updating the cameras matrices. normally this isn’t a big deal since the renderer.render call updates them… but you happen to be doing your raycast after those .lookAts, but before renderer.render so the camera matrix the raycaster is using is stale.

Try this right before your setFromCamera:

```javascript
camera.updateMatrix():
camera.updateMatrixWorld();
raycaster.setFromCamera(mouse, camera)

```

Or… move the raycasting down after renderer.render

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [August 31, 2024, 6:59pm UTC](https://discourse.threejs.org/t/raycaster-is-detecting-the-intersection-at-an-offset/70123/11 "2024-08-31T18:59:38Z")

</div>

Here’s how I checked it:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/3/83bfde82aefa2fc1be3edc1809426d3d9a3ce518.png)

(abused a conditional breakpoint to inject the updateMatrix+updateMatrixWorld before the call)

---

<div class="post-metadata">

**Author:** ![Chayan\_Pant](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chayan_pant/32/48872_2.png) [@Chayan\_Pant](https://discourse.threejs.org/u/Chayan_Pant)\
**Post date:** [August 31, 2024, 7:06pm UTC](https://discourse.threejs.org/t/raycaster-is-detecting-the-intersection-at-an-offset/70123/12 "2024-08-31T19:06:12Z")

</div>

Damn, didn’t know that.  
Thank you so much. Works like a charm now.

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [August 31, 2024, 7:08pm UTC](https://discourse.threejs.org/t/raycaster-is-detecting-the-intersection-at-an-offset/70123/13 "2024-08-31T19:08:25Z")

</div>

you’re welcome! raycasting is often very fiddly to get right.  
Throwing some:  
.updateMatrix()  
.updateMatrixWorld()  
and scene.updateMatrixWorld( true )  
before key operations can be a good sanity check when things are acting weird.