Something kinda like the Google Maps Measure Distance Tool

Hi guys - I have tried with no luck so far to find something made with threejs that is kinda similar to Google Maps Measure Distance Tool. I want to be able to plunk down (movable on X & Z only, once laid) an array of objects (node balls I guess) onto a plane/grid that would have connecting lines between them, and be calculating the length (meters, not array length) of the entire thing as nodes are added or existing ones moved/tweaked or deleted, very much like the Measure Distance tool. I’d hate to reinvent the wheel here, and would really love to have something similar for reference so I would not be starting from scratch. Anyone know of anything like this in existence? Even if it does not calculate but does some or all of the other stuff, that would be wonderful too. Here is something I whipped up in Blender to help illustrate a wee bit (no UI or controls present, obviously). Please help. msr

1 Like

Bump. Added a little sumpin to help illustrate.

Not sure if something like this exists already, but it’s pretty simple to make! You can raycast onto a plane and on click, spawn a node. The lines can be a Cylinder mesh placed at the middle of the two nodes (You can get the halfway point of two vectors by adding them together and halving them) and scale one axis to the distance between them.

For each node, just calculate the euclidean distance between them (really simple math!, and THREE.Vector3 actually has a distanceTo method).

That’s how I would do it, anyway! If anyone has better ideas, I’d love to hear :smiley:


Make an array, keep adding points to it, write a loop to compute the distances between successive points if the array has more than 2 points.



ohmygosh… I wasn’t expecting anyone to whip up a bunch of code for me! I will play with this right now. I should have stated that I had a good idea which things I needed, like raycasting etc, but wanted to see an app with everything coming together… and figured I’d be learning a bunch of new crap along the way, since the ton of threejs stuff I have done did not really use any of these, like raycasting, drawing lines between stuff, measurements, etc… But this is a HUGE help, and will get me there much faster, I am sure… In any event, thank you so much guys! Be back in a while. :wink:

Edit: Scratch that…

sir how to create measurement tape tool same as sketch_up measurement tape tool
please provide example