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

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 You can select the distance measurement from selecting the 5th button (ruler) from the top left.
I’ve tried for hours with these 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 ?
Thanks so much

What point did you stuck at?
Use THREE.Raycaster() for clicking.

  1. Click on the model, get the point of intersection, save it in a variable.
  2. Click on the model, get the point of intersection, call .distanceTo() method to get the distance between the curren point and the previously saved one.
1 Like

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

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?

I was working on local file. So didn’t have codepen for it. I just copied code from it to codepen just to show you what I’m trying to do.
Thank you

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

Trying :sweat_smile::sweat_smile::sweat_smile:

It’s working now. :sweat_smile::grin:
I mean the pen. Not the distance measurement :upside_down_face::cry::cry:

Check this codepen with a very rough concept:


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.

You’re welcome :slight_smile: :beers:

1 Like