# How to measure distances in threejs?

**URL:** <https://discourse.threejs.org/t/how-to-measure-distances-in-threejs/55691>\
**Category:** Questions\
**Tags:** distance, geometry\
**Created:** [September 5, 2023, 8:37am UTC](https://discourse.threejs.org/t/how-to-measure-distances-in-threejs/55691 "2023-09-05T08:37:23Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![winnip\_fr](https://avatars.discourse-cdn.com/v4/letter/w/c67d28/32.png) [@winnip\_fr](https://discourse.threejs.org/u/winnip_fr)\
**Post date:** [September 5, 2023, 8:37am UTC](https://discourse.threejs.org/t/how-to-measure-distances-in-threejs/55691/1 "2023-09-05T08:37:23Z")

</div>

Hello,

In my application, I have a 3D scene displayed from 2 points of views, one an usual camera where all the objects are displayed in 3D, and one orthographic camera where the scene is displayed from above.  
My 3D object are lying on a plane perpendicular to the axis of the orthographic camera. In my application a cube of size 30 describe in the real world a cube of size 30 mm.  
In my view from above, I’d like that the user can measure some distances between the 3D object.  
Has anyone had an idea or have a sample of code that can do that?  
In particular, I can’t find a way to draw a point on the 3D scene.  
Thanks,

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [September 5, 2023, 8:41am UTC](https://discourse.threejs.org/t/how-to-measure-distances-in-threejs/55691/2 "2023-09-05T08:41:07Z")

</div>

Hi!  
Maybe this topic will be helpful: [[SOLVED]Mesure distance between two points on a object by clicking - #10 by prisoner849](https://discourse.threejs.org/t/solved-mesure-distance-between-two-points-on-a-object-by-clicking/6082/10)

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [September 5, 2023, 9:27am UTC](https://discourse.threejs.org/t/how-to-measure-distances-in-threejs/55691/3 "2023-09-05T09:27:10Z")

</div>

there is a library for the react eco system for threejs that does this

> <https://twitter.com/lnpepper/status/1499472180291125254>

generally, this stuff requires a pointer event system, hover, pointer over/out, clicks, possibly event bubbling and pointer capture. im not sure how feasible this will be in vanilla to rewrite this stuff from scratch over and over again. but other than that, once you have the objects the math should be relatively simple. you can consult the source code of the library maybe.

---

<div class="post-metadata">

**Author:** ![winnip\_fr](https://avatars.discourse-cdn.com/v4/letter/w/c67d28/32.png) [@winnip\_fr](https://discourse.threejs.org/u/winnip_fr)\
**Post date:** [September 5, 2023, 9:43am UTC](https://discourse.threejs.org/t/how-to-measure-distances-in-threejs/55691/4 "2023-09-05T09:43:24Z")

</div>

That what exactly what I’m looking for, thanks !

---

<div class="post-metadata">

**Author:** ![winnip\_fr](https://avatars.discourse-cdn.com/v4/letter/w/c67d28/32.png) [@winnip\_fr](https://discourse.threejs.org/u/winnip_fr)\
**Post date:** [September 7, 2023, 10:32am UTC](https://discourse.threejs.org/t/how-to-measure-distances-in-threejs/55691/5 "2023-09-07T10:32:37Z")

</div>

Hi,

Your solution is working if the Three.js scene is displayed alone in the page.  
Unfortunately, my web page is composed of 2 vertical div,  
the left one is a text explaining what going on the right one where I display my three.Js scene.

In your fonction getIntersections below, I can’t figure out what the vector “vector” is.  
Do I need to compute it by an another way to my specific layout?

```javascript
function getIntersections(event) {
  var vector = new THREE.Vector2();

  vector.set(
    event.clientX / window.innerWidth * 2 - 1,
    -(event.clientY / window.innerHeight) * 2 + 1
  );

  var raycaster = new THREE.Raycaster();
  raycaster.setFromCamera(vector, camera);

  var intersects = raycaster.intersectObjects(scene.children);

  return intersects;
}

```

thanks.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [September 7, 2023, 10:47am UTC](https://discourse.threejs.org/t/how-to-measure-distances-in-threejs/55691/6 "2023-09-07T10:47:03Z")

</div>

This may help:

- [Clientx and window.innerWidth Question: - #16 by looeee](https://discourse.threejs.org/t/clientx-and-window-innerwidth-question/33271/16)
- [[SOLVED] Raycaster on mouse click laggs an action behind - #2 by looeee](https://discourse.threejs.org/t/solved-raycaster-on-mouse-click-laggs-an-action-behind/3184/2)

---

<div class="post-metadata">

**Author:** ![winnip\_fr](https://avatars.discourse-cdn.com/v4/letter/w/c67d28/32.png) [@winnip\_fr](https://discourse.threejs.org/u/winnip_fr)\
**Post date:** [September 7, 2023, 1:03pm UTC](https://discourse.threejs.org/t/how-to-measure-distances-in-threejs/55691/7 "2023-09-07T13:03:27Z")

</div>

thanks again ! Despite my searches, I didn’t find these posts…