# \[SOLVED\]Mesure distance between two points on a object by clicking

**URL:** <https://discourse.threejs.org/t/solved-mesure-distance-between-two-points-on-a-object-by-clicking/6082>\
**Category:** Questions\
**Tags:** loaders, geometry\
**Created:** [February 12, 2019, 4:47am UTC](https://discourse.threejs.org/t/solved-mesure-distance-between-two-points-on-a-object-by-clicking/6082 "2019-02-12T04:47:11Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Brabbit\_640](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/brabbit_640/32/4158_2.png) [@Brabbit\_640](https://discourse.threejs.org/u/Brabbit_640)\
**Post date:** [February 12, 2019, 4:47am UTC](https://discourse.threejs.org/t/solved-mesure-distance-between-two-points-on-a-object-by-clicking/6082/1 "2019-02-12T04:47:11Z")

</div>

Hi,  
I’m trying to develop an application with Three.js where I can measure the distance between two points on an object by clicking. Like [here](http://3dhop.net/examples/demos/8.0_measurement_tool.php?title=Measurement%20Tool) You can select the distance measurement from selecting the 5th button (ruler) from the top left.  
I’ve tried for hours with [these](https://stackoverflow.com/questions/34698393/get-mouse-clicked-points-3d-coordinate-in-three-js?rq=1) answers but got no where because there aren’t any complete answers, only pieces. So could you please help me add this functionality to this [pen](https://codepen.io/brabbit640/pen/daeraq?editors=0010) ?  
Thanks so much

---

<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:** [February 12, 2019, 7:21am UTC](https://discourse.threejs.org/t/solved-mesure-distance-between-two-points-on-a-object-by-clicking/6082/2 "2019-02-12T07:21:08Z")

</div>

Hi!  
What point did you stuck at?  
Use [`THREE.Raycaster()`](https://threejs.org/docs/index.html#api/en/core/Raycaster) for clicking.

1. Click on the model, get the [point of intersection](https://threejs.org/docs/index.html#api/en/core/Raycaster.intersectObject), save it in a variable.
2. Click on the model, get the point of intersection, call [`.distanceTo()`](https://threejs.org/docs/index.html#api/en/math/Vector3.distanceTo) method to get the distance between the curren point and the previously saved one.

---

<div class="post-metadata">

**Author:** ![Brabbit\_640](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/brabbit_640/32/4158_2.png) [@Brabbit\_640](https://discourse.threejs.org/u/Brabbit_640)\
**Post date:** [February 12, 2019, 7:38am UTC](https://discourse.threejs.org/t/solved-mesure-distance-between-two-points-on-a-object-by-clicking/6082/4 "2019-02-12T07:38:27Z")

</div>

Hi,  
I’m stuck at the first step. I can’t figure out how to save 2 points as variable by getting the point of intersection.  
Thank you

---

<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:** [February 12, 2019, 7:42am UTC](https://discourse.threejs.org/t/solved-mesure-distance-between-two-points-on-a-object-by-clicking/6082/5 "2019-02-12T07:42:05Z")

</div>

Could you add that functionality in your codepen: when you click on the model, you set a visual marker (a sphere, for example) at the point of intersection?

---

<div class="post-metadata">

**Author:** ![Brabbit\_640](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/brabbit_640/32/4158_2.png) [@Brabbit\_640](https://discourse.threejs.org/u/Brabbit_640)\
**Post date:** [February 12, 2019, 7:47am UTC](https://discourse.threejs.org/t/solved-mesure-distance-between-two-points-on-a-object-by-clicking/6082/6 "2019-02-12T07:47:36Z")

</div>

I was working on local file. So didn’t have codepen for it. I just copied code from it to [codepen](https://codepen.io/brabbit640/pen/daeraq?editors=0010) just to show you what I’m trying to do.  
Thank you

---

<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:** [February 12, 2019, 7:52am UTC](https://discourse.threejs.org/t/solved-mesure-distance-between-two-points-on-a-object-by-clicking/6082/7 "2019-02-12T07:52:36Z")

</div>

Any chance to make that codepen working?  
Or do you offer me to do it for you? 🙂

---

<div class="post-metadata">

**Author:** ![Brabbit\_640](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/brabbit_640/32/4158_2.png) [@Brabbit\_640](https://discourse.threejs.org/u/Brabbit_640)\
**Post date:** [February 12, 2019, 7:53am UTC](https://discourse.threejs.org/t/solved-mesure-distance-between-two-points-on-a-object-by-clicking/6082/8 "2019-02-12T07:53:43Z")

</div>

Trying 😅😅😅

---

<div class="post-metadata">

**Author:** ![Brabbit\_640](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/brabbit_640/32/4158_2.png) [@Brabbit\_640](https://discourse.threejs.org/u/Brabbit_640)\
**Post date:** [February 12, 2019, 7:54am UTC](https://discourse.threejs.org/t/solved-mesure-distance-between-two-points-on-a-object-by-clicking/6082/9 "2019-02-12T07:54:31Z")

</div>

It’s working now. 😅😁  
I mean the pen. Not the distance measurement 🙃😢😢

---

<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:** [February 12, 2019, 8:40am UTC](https://discourse.threejs.org/t/solved-mesure-distance-between-two-points-on-a-object-by-clicking/6082/10 "2019-02-12T08:40:29Z")

</div>

Check this codepen with a very rough concept:  
https://codepen.io/prisoner849/embed/preview/NozKOL?height=300&slug-hash=NozKOL&default-tabs=js,result&host=https://codepen.io

---

<div class="post-metadata">

**Author:** ![Brabbit\_640](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/brabbit_640/32/4158_2.png) [@Brabbit\_640](https://discourse.threejs.org/u/Brabbit_640)\
**Post date:** [February 12, 2019, 10:29am UTC](https://discourse.threejs.org/t/solved-mesure-distance-between-two-points-on-a-object-by-clicking/6082/11 "2019-02-12T10:29:41Z")

</div>

You’re such a wonderful person. Can’t thank you enough for times you helped me out. Thank you so much again for the help. I really appreciate it.  
Cheers  
👍👌🙏🙌

---

<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:** [February 12, 2019, 10:35am UTC](https://discourse.threejs.org/t/solved-mesure-distance-between-two-points-on-a-object-by-clicking/6082/12 "2019-02-12T10:35:15Z")

</div>

You’re welcome 🙂 🍻

---

<div class="post-metadata">

**Author:** ![7star](https://avatars.discourse-cdn.com/v4/letter/7/c89c15/32.png) [@7star](https://discourse.threejs.org/u/7star)\
**Post date:** [November 30, 2019, 7:30pm UTC](https://discourse.threejs.org/t/solved-mesure-distance-between-two-points-on-a-object-by-clicking/6082/15 "2019-11-30T19:30:48Z")

</div>

can we apply raycasting on instancedBufferGometry object and how to do it

---

<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:** [November 30, 2019, 7:45pm UTC](https://discourse.threejs.org/t/solved-mesure-distance-between-two-points-on-a-object-by-clicking/6082/16 "2019-11-30T19:45:41Z")

</div>

There is no raycasting for instanced buffer geometries, but `THREE.InstancedMesh()` has implementation of raycast in the latest release (`r111`). [https://threejs.org/examples/?q=instancing#webgl\_instancing\_raycast](https://threejs.org/examples/?q=instancing#webgl_instancing_raycast)

---

<div class="post-metadata">

**Author:** ![7star](https://avatars.discourse-cdn.com/v4/letter/7/c89c15/32.png) [@7star](https://discourse.threejs.org/u/7star)\
**Post date:** [November 30, 2019, 7:54pm UTC](https://discourse.threejs.org/t/solved-mesure-distance-between-two-points-on-a-object-by-clicking/6082/17 "2019-11-30T19:54:54Z")

</div>

thank you for this second thing is can we apply vertex point snapping on instanced buffer geometry object and how to do it please provide example

sir when is use new THREE.InstancedMesh in place of new THREE.mesh then show error

```auto
"Attempted import error: 'InstancedMesh' is not exported from 'three' (imported as 'THREE')"

what can i do
```

---

<div class="post-metadata">

**Author:** ![sonali\_funde1](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sonali_funde1/32/3826_2.png) [@sonali\_funde1](https://discourse.threejs.org/u/sonali_funde1)\
**Post date:** [June 4, 2020, 6:24am UTC](https://discourse.threejs.org/t/solved-mesure-distance-between-two-points-on-a-object-by-clicking/6082/18 "2020-06-04T06:24:30Z")

</div>

Hi ,  
I got your logic  
Here we can click any two point on the model.  
But I want two point will be opposite to each other ,which is selectable  
other than that two point we cannot select any point on the model  
Is it possible ?  
Can you give me suggestion for it  
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:** [June 6, 2020, 9:40am UTC](https://discourse.threejs.org/t/solved-mesure-distance-between-two-points-on-a-object-by-clicking/6082/19 "2020-06-06T09:40:11Z")

</div>

@sonali_funde1  
I didn’t get what you want to achieve. Any explanatory pictures?

---

<div class="post-metadata">

**Author:** ![sonali\_funde1](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sonali_funde1/32/3826_2.png) [@sonali\_funde1](https://discourse.threejs.org/u/sonali_funde1)\
**Post date:** [June 16, 2020, 5:49am UTC](https://discourse.threejs.org/t/solved-mesure-distance-between-two-points-on-a-object-by-clicking/6082/20 "2020-06-16T05:49:10Z")

</div>

As per discussion we can click any two points on the model.  
if i click on epoint on the model  
then 2nd clickable point must be opposite to that first point  
in short that two clickable point must be opposite to each other.

---

<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:** [June 16, 2020, 7:03am UTC](https://discourse.threejs.org/t/solved-mesure-distance-between-two-points-on-a-object-by-clicking/6082/21 "2020-06-16T07:03:47Z")

</div>

@sonali_funde1  
I still have no idea what you mean. The second clickable point is the point of intersection of a ray, casted from the first point into direction of negated normal of intersected face for the first point, with the model itself. Is it correct? Would you mind to provide an explanatory picture for better understanding?

---

<div class="post-metadata">

**Author:** ![sonali\_funde1](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sonali_funde1/32/3826_2.png) [@sonali\_funde1](https://discourse.threejs.org/u/sonali_funde1)\
**Post date:** [June 18, 2020, 5:45am UTC](https://discourse.threejs.org/t/solved-mesure-distance-between-two-points-on-a-object-by-clicking/6082/22 "2020-06-18T05:45:58Z")

</div>

yes correct  
Actully i wnat to find hole diameter for uplaoded stl file  
can you see this link

> [@Finding Hole Diameter](https://discourse.threejs.org/t/finding-hole-diameter/16260):
>
> Hello, I am new to Three Js I want to identify there is hole in uploaded stl file Not able to find out this solution Can you give me suggestion for it? Thanks

---

<div class="post-metadata">

**Author:** ![Sathish\_Uthayasuriyan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sathish_uthayasuriyan/32/7240_2.png) [@Sathish\_Uthayasuriyan](https://discourse.threejs.org/u/Sathish_Uthayasuriyan)\
**Post date:** [August 4, 2020, 5:49am UTC](https://discourse.threejs.org/t/solved-mesure-distance-between-two-points-on-a-object-by-clicking/6082/23 "2020-08-04T05:49:53Z")

</div>

Hi this works fine. I want that line between two points to be visible.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/1/153c9ef7c46dd9461e90e8f7023027096418d18e.png)

Here line is hidden inside dolphin. How to make this line visible alaways even if it is inside another object like in this image?

Thanks in advance

[Next page](https://discourse.threejs.org/t/solved-mesure-distance-between-two-points-on-a-object-by-clicking/6082.md?page=2)