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