Measuring Distance Between Two Points in R3F/Three.js – Ready-Made Tools or Custom Implementation?

Questions
,
1

Hi all,

I’ve been researching similar discussions about measuring distances in 3D scenes using Three.js and React Three Fiber (R3F).It’s similar to This question however, my current requirement is a bit more simple.

My goal:
I want to create a feature where, based on two selected points on a model, a straight line(mb connected lines) are rendered connecting these points on model surface, and the distance between them is calculated. Essentially, I’m looking for functionality similar to the measurement tool in 3dviewer

image
image1291×860 110 KB

, where you can simply pick two points on a model, a line appears, and the distance is displayed.
My questions are as follows:

  1. Ready-Made Implementations:
    Has anyone encountered or developed a ready-made or simplified implementation of this measurement functionality in R3F/Three.js? Any existing libraries or examples would be greatly appreciated.
  2. Custom Implementation Nuances:
    If a custom solution is required, what are the best practices or nuances in measuring the distance between two 3D points? Specifically, I’d like to know:
  • How is the distance typically calculated (e.g., using world coordinates)?
  • Are there any considerations for unit conversion or normalization, so that the measurement can be consistently presented in standard units (meters, feet, etc.)?

Thank you in advance!

2

I’m not an r3f pro so I can’t speak to 1. of your question..

  1. You would typically calculate this in worldspace. (the raycaster itself returns a position in worldspace, so you should be set if that is how you are getting your points.. then its just meters = point1.distanceTo( point2 )
    r.e. unit conversion, it depends on whether you are doing any initial resizing.. but generally.. it will be a simple conversion from world space (usually meters) to whatever unit you wish to display.. times whatever additional scaling factors you have in place for your scene.
1 Like
3

Thank you for such a timely reply.
I would like to clarify
When implementing a distance measurement tool in Three.js and React Three Fiber, what pitfalls can arise when positioning measurement points relative to the surface of a 3D model? Are there features that can affect the measurement accuracy depending on the source and model presetting (e.g., scaling, normalization, source model coordinate system)?

I would like to understand how dynamically their position relative to the normal changes during the selection of points, but I understand that it is better to look in the code of this technology.
Git_Hub_measure_tool

4

As far as I know.. the raycaster will give you the most mathematically accurate ray collision point. it doesn’t do any adjustments like offsetting the point or anything. I think you will find the relative distances to be quite precise.. since they are calculated in 64bit float on the CPU.

5

Okay, thanks again for your explanation, I realized that I still need to properly understand this topic, and analyze at least the code of 3d Viewer itself as it is done there.

:handshake:

6

You can obtain a points with Reycasrer.intersectObject. It returns intersections in world coordinates, so yuo can simply get a distance like point1.distanceTo(point2)

2 Likes