# Raycasting problems using MapConstrols and OrthographicCamera

**URL:** <https://discourse.threejs.org/t/raycasting-problems-using-mapconstrols-and-orthographiccamera/48936>\
**Category:** Questions\
**Tags:** orthographic-camera, mapcontrols, controls, raycaster\
**Created:** [March 10, 2023, 9:45am UTC](https://discourse.threejs.org/t/raycasting-problems-using-mapconstrols-and-orthographiccamera/48936 "2023-03-10T09:45:45Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![cconsta1](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/cconsta1/32/14819_2.png) [@cconsta1](https://discourse.threejs.org/u/cconsta1)\
**Post date:** [March 10, 2023, 9:45am UTC](https://discourse.threejs.org/t/raycasting-problems-using-mapconstrols-and-orthographiccamera/48936/1 "2023-03-10T09:45:45Z")

</div>

Hi all,

I set up a `RayCaster` in my scene that contains multiple instances of `BoxGeometry` used to represent various properties. The `RayCaster` is supposed to point at the geometries, and their name shall be emitted to a little black box on the top left of the screen. I’m using an `OrthographicCamera` and `MapControls`. A live instance of the scene can be found [here](https://esprofiler3d.vercel.app/).

The problem is that the `RayCaster` doesn’t always work. If you pan the scene or tilt it, there are certain angles for which raycasting doesn’t work. Here is the code:

```javascript
import { Raycaster, Vector2 } from 'three'
export default class MakeRaycaster {
  /**
   * @type Raycaster
   */
  raycaster

  /**
   * @type Vector2
   */
  pointer

  /**
   * @type ThreeMatrix
   */
  ThreeMatrix

  INTERSECTED

  constructor (ThreeMatrix) {
    this.ThreeMatrix = ThreeMatrix
    this.pointer = new Vector2()
    this.raycaster = new Raycaster(undefined, undefined, 0, undefined)
  }

  init () {
    window.addEventListener('pointermove', this)
  }

  onAnimationFrame () {

  }

  /**
   * Called by window.addEventListener('pointermove', this)
   * @param event
   */
  handleEvent ( event ) {
    const viewport = this.ThreeMatrix.viewport

    this.pointer.x = ((event.clientX / viewport.width) * 2) - 1
    this.pointer.y = -(((event.clientY / viewport.height) * 2) - 1)

    console.log(this.pointer)

    this.raycaster.setFromCamera(this.pointer, this.ThreeMatrix.camera.instance)

    const intersects = this.raycaster.intersectObjects(this.ThreeMatrix.data.nodeMeshes, false)

    if (intersects.length > 0) {
      if (this.INTERSECTED !== intersects[0].object) {
        this.INTERSECTED = intersects[0].object

        this.ThreeMatrix.data.infoBox.style.backgroundColor = 'black'
        this.ThreeMatrix.data.infoBox.innerHTML = this.INTERSECTED.name
      }
    } else {
      this.ThreeMatrix.data.infoBox.style.backgroundColor = null
      this.ThreeMatrix.data.infoBox.innerHTML = ''
      this.INTERSECTED = null
    }
  }

  destroy () {
    window.removeEventListener('pointermove', this)
    this.raycaster = null
  }
}

```

The `RayCaster` is initialized in the `ThreeMatrix` class by simply calling this method:

```javascript
makeRaycaster () {
    if (this.raycaster != null) {
      return this
    }

    this.raycaster = new MakeRaycaster(this)
    this.raycaster.init()
  }

```

What is going wrong with it? I switched to `OrbitControls` to see if something will change but the problem was still there. Any help will be much appreciated!

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [March 11, 2023, 11:43am UTC](https://discourse.threejs.org/t/raycasting-problems-using-mapconstrols-and-orthographiccamera/48936/2 "2023-03-11T11:43:37Z")

</div>

FYI: I was not able to reproduce the problem. Tried different orientations, pans and scales, but all the times the raycaster picked the correct cuboid.

I see in the code you check only the closed found intersection. Is it possible that there is some object invisible to the user, but visible to the raycaster? Maybe in such cases this object is at index 0 and the cuboid is at index 1 (or 2, …)?

---

<div class="post-metadata">

**Author:** ![cconsta1](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/cconsta1/32/14819_2.png) [@cconsta1](https://discourse.threejs.org/u/cconsta1)\
**Post date:** [March 12, 2023, 9:40am UTC](https://discourse.threejs.org/t/raycasting-problems-using-mapconstrols-and-orthographiccamera/48936/3 "2023-03-12T09:40:31Z")

</div>

Hi, thanks for checking out. I’m attaching pictures of configurations that introduce the problem. The scene has to be close to the bottom. In the attached configurations the cubes close to the VR button are not detected.

> I see in the code you check only the closed found intersection. Is it possible that there is some object invisible to the user, but visible to the raycaster? Maybe in such cases, this object is at index 0 and the cuboid is at index 1 (or 2, …)?

What do you mean by a close found intersection? Are there other ones? Do you mean that there may be a problem with the cubes?

Thanks for looking into this again 🙂

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [March 12, 2023, 10:24am UTC](https://discourse.threejs.org/t/raycasting-problems-using-mapconstrols-and-orthographiccamera/48936/4 "2023-03-12T10:24:42Z")

</div>

I have the following hypothesis:

- You use orthographic camera with negative near plane, so you can see objects “behind” the camera
- When raycasting intersects the scene, it can only intersect forward objects, that’s why you cannot detect objects near the bottom of the screen (they are behind you).

Here is an illustration. The red buildings are visible and detectable. The two left gray buildings are only visible, but not detectable:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/9/2958d625caf787b5988dbe2022ec24bdde3698eb.png)

> [@cconsta1](#):
>
> What do you mean by a close found intersection? Are there other ones?

I mean that intersecting returns an array of all intersected objects, sorted from the closest intersection to the furthest. So, there might be `intersects[1]`, `intersects[2]` and so on. However, I think that the most probable cause of your problem is the raycaster being too close to the scene.

---

<div class="post-metadata">

**Author:** ![cconsta1](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/cconsta1/32/14819_2.png) [@cconsta1](https://discourse.threejs.org/u/cconsta1)\
**Post date:** [March 12, 2023, 10:49am UTC](https://discourse.threejs.org/t/raycasting-problems-using-mapconstrols-and-orthographiccamera/48936/5 "2023-03-12T10:49:23Z")

</div>

Hi! Thanks for the quick reply. I think your hypothesis about objects being behind the `Raycaster` is correct. After you mentioned the problem (and thank you very much for the nice diagram) I tried to print the distance parameter of the intersected objects and I found that the objects that are not captured have a distance of zero or less:

```js
if (intersects.length > 0) {
      console.log(intersects[0].distance)
    }

```

So how do I proceed? Is there a way to change the position of the Raycaster? Shall I pull the camera back? A combination?

Thank you very much again!

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [March 12, 2023, 10:54am UTC](https://discourse.threejs.org/t/raycasting-problems-using-mapconstrols-and-orthographiccamera/48936/6 "2023-03-12T10:54:54Z")

</div>

I have never done this, so most likely you can try:

- either move the camera further away – it may help to set the `near` of the camera to 0, so you can visually see what the raycaster sees;
- or move the origin of raycaster backwards, right after `setFromCamera` calculates the origin and the direction.

---

<div class="post-metadata">

**Author:** ![cconsta1](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/cconsta1/32/14819_2.png) [@cconsta1](https://discourse.threejs.org/u/cconsta1)\
**Post date:** [March 12, 2023, 1:37pm UTC](https://discourse.threejs.org/t/raycasting-problems-using-mapconstrols-and-orthographiccamera/48936/7 "2023-03-12T13:37:30Z")

</div>

After you mentioned this I saw that the camera’s near was set to -1000. After setting it to zero objects are now detected! However, when I zoom out the scene is clipped.

 ![Screenshot 2023-03-12 at 3.34.55 PM](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/4/f407ba535c867a4c5714cc37abd32964d36953c0.png)

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [March 12, 2023, 1:45pm UTC](https://discourse.threejs.org/t/raycasting-problems-using-mapconstrols-and-orthographiccamera/48936/8 "2023-03-12T13:45:20Z")

</div>

What does happen when you increase the camera’s `far` value?

---

<div class="post-metadata">

**Author:** ![cconsta1](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/cconsta1/32/14819_2.png) [@cconsta1](https://discourse.threejs.org/u/cconsta1)\
**Post date:** [March 12, 2023, 1:50pm UTC](https://discourse.threejs.org/t/raycasting-problems-using-mapconstrols-and-orthographiccamera/48936/9 "2023-03-12T13:50:21Z")

</div>

It was 1000 and setting it to 10000 seems to be doing the trick. I don’t understand why though

---

<div class="post-metadata">

**Author:** ![cconsta1](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/cconsta1/32/14819_2.png) [@cconsta1](https://discourse.threejs.org/u/cconsta1)\
**Post date:** [March 12, 2023, 1:51pm UTC](https://discourse.threejs.org/t/raycasting-problems-using-mapconstrols-and-orthographiccamera/48936/10 "2023-03-12T13:51:25Z")

</div>

No the problem is still there with the annoying clipping. I added a camera helper in case it helps

 ![Screenshot 2023-03-12 at 3.52.52 PM](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/8/a8d92b0f30b3078453289c30874c79da0f4e4fa2.png)

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [March 12, 2023, 1:54pm UTC](https://discourse.threejs.org/t/raycasting-problems-using-mapconstrols-and-orthographiccamera/48936/11 "2023-03-12T13:54:26Z")

</div>

Where is the clipping? If it is at the far side, the `far` parameter is responsible. If it is the near side, the `near` parameter is responsible.

The triangular black cuts of the front buildings (see the snapshot) are caused by the `near` value. Maybe you should try to move the camera further away from the scene?

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/5/65215cba8e61129c2384b2b9414c6d6a27869360.png)

---

<div class="post-metadata">

**Author:** ![cconsta1](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/cconsta1/32/14819_2.png) [@cconsta1](https://discourse.threejs.org/u/cconsta1)\
**Post date:** [March 12, 2023, 2:35pm UTC](https://discourse.threejs.org/t/raycasting-problems-using-mapconstrols-and-orthographiccamera/48936/12 "2023-03-12T14:35:40Z")

</div>

I pulled the camera back and I think the project is almost there if you like to [check](https://esprofiler3d.vercel.app/). Thanks again!

---

<div class="post-metadata">

**Author:** ![zhou\_yang](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/zhou_yang/32/47311_2.png) [@zhou\_yang](https://discourse.threejs.org/u/zhou_yang)\
**Post date:** [April 29, 2024, 9:16am UTC](https://discourse.threejs.org/t/raycasting-problems-using-mapconstrols-and-orthographiccamera/48936/13 "2024-04-29T09:16:20Z")

</div>

I occur to a problem, when I use wheel zoom-out or zoom-in, meshes are clipped. could you share your code?