Hi buddies!

Do we have something like this in BabylonJS as well? If not, any chance to get all the helper functions into the `Ray`

class?

Thank you!

R.

Hi buddies!

Do we have something like this in BabylonJS as well? If not, any chance to get all the helper functions into the `Ray`

class?

Thank you!

R.

I already rewrote it for BabylonJS. If you are willing to add just let me know.

The list of functions:

```
at(t: number, target: Vector3);
lookAt(v: Vector3);
recast(t: number);
closestPointToPoint(point: Vector3, target: Vector3);
distanceToPoint(point: Vector3);
distanceSquaredToPoint(point: Vector3);
distanceSquaredToSegment(v0: Vector3, v1: Vector3, optionalPointOnRay?: Vector3, optionalPointOnSegment?: Vector3)
```

R.

We have intersectsSegment but that doesn’t return the closest point Let me bring @sebavan @RaananW to see what they think of adding more functions. We always have to consider code size too, so we could add only one of distance/distanceSquared (I’d say distanceSquared is better) options.

1 Like

@carolhmj I started to implement raycasting for the `GreasedLine`

. It’s a ThreeJS port so it was easier for me to verify the raycast algorithm by implementing all the underlying ThreeJS methods I couldn’t find in BabylonJS If someone can give me hints how to do all the math using already available BabylonJS methods, it would be damn cool!

Thanks!

R.

1 Like

You can already check the distance between two vectors (distance and distance squared) -

but this is for the Ray class.

If I understand from the documentation, this is the distance from the nearest point on the ray itself? Are we taking the length of the ray into account?

`distanceSquaredToSegment`

is the really questionable one…

Hi!

I managed to do everything I needed using BabylonJS functions

There is actually a similar function like `distanceSquaredToSegment`

, it’s called `intersectionSegment`

```
distance = raycaster.intersectionSegment(vStart, vEnd, threshold)
```

It returns the distance to the segment and using then it’s easy to get the point of intersection

```
raycaster.direction.normalize().multiplyByFloats(distance, distance, distance).add(raycaster.origin)
```

Thanks!

R.

2 Likes

hello, I want to get closest point of mesh and ray.

I noticed that there is pickedPoint in PickingInfo, but it doesn’t seem to be what I wanted

Hello and welcome!

Can you describe your issue more precisely please? What do you want to achieve? What’s wrong with the `pickedPoint`

? Do you have a Playground example?

Babylon.js Playground (babylonjs.com)

I set the `intersectionThreshold`

of red line to 10，`pickedPoint`

is not on the line.

I want a point like the three.js（ on the line ）

THREE.Line:

I’m actually doing magnetic attraction, which allows objects (grabbed by the mouse) to snap onto the line within a threshold.

Implementing on the three.js is simple, what should I do in the babylon.js

Displays a sphere marker where the intersection occurs:

You can click on the meshes (groud, line) to add more markers at the picked point:

Ok so this gives you the position if you click on a pickable mesh.

```
const pickResult = scene.pick(scene.pointerX, scene.pointerY);
if (pickResult.pickedPoint) {
console.log(pickResult.pickedMesh?.name, pickResult.pickedPoint)
addMarker(pickResult.pickedPoint)
}
```

If you want to know where your line intersects the ground or another mesh create a `Ray`

with the same origin and direction as your line and check for mesh intersection like this:

```
// origin = lineStart, direction = lineEnd - lineStart
const ray1 = new BABYLON.Ray(points[0], points[1].subtract(points[0]))
const pi1 = ground.intersects(ray1)
```

Now you have the `PickingInfo`

object in `pi1`

.

There are multiple methods for intersections on both `Mesh`

and `Ray`

so check them out. For example if you are interested in all intersection points on multiple meshes you can use:

```
const pickingInfos = ray1.intersectsMeshes([sphere, ground, mesh1, mesh2, etc...]) // return an array
```

r.

2 Likes

thank you!

`intersectionThreshold`

is important for me

Click the mouse far away from the line, `pickedPoint`

is indeed the location of my mouse, but I want the point on the line that is closest to the ray(ray from mouse), just like three.js

I hope you understand what I mean.

The point given by the three.js is on the line(curve), although the threshold is set very large

I’ll give an example to explain：

The black cross is the mouse position.

The blue cross is what I want.

Three.js return the coordinates of the blue cross in `line.raycast`

function

Yes I understand. So here you go:

If you click and pick the redLine named mesh it will find the nearest point on the it and add a marker.

`intersectionTreshold`

is taken into account.

Picking rays and nearest points visualized:

1 Like

absolutely perfect!

but how to calculate a curve?

divide the curve into segments, and call your function with every divided segment?

Is there a better way?

If you are drawing a curve using lines you already need to have segments. There is the `Curve3`

class in BabylonJS for calculating positions for a variety types of curves. You can feed these positions directly to the line drawing function and you get your **line segments** as well.

Hello, I find a class

Path3D | Babylon.js Documentation (babylonjs.com)

`Path3d.getClosestPositionTo`

is great

1 Like