Cast ray from camera to a mesh

Questions
1

How can I cast a ray from camera to a mesh?

This is the playground I made, think something is wrong here?
Sphere Examples | Babylon.js Playground (babylonjs.com)

2

Hey!

You can use scene.pick: Mesh Picking | Babylon.js Documentation (babylonjs.com)

1 Like
3

Do you mean something like this? Sphere Examples | Babylon.js Playground (babylonjs.com)
Can I visualize the ray? trying to use RayHelper, but looks like not working

4

Hi again pigga o/

On that doc page. There is a cool example that shows the visualization. Take a look at the cast ray function in line 56.

var direction = forward.subtract(origin);
direction = BABYLON.Vector3.Normalize(direction);
var length = 100;
var ray = new BABYLON.Ray(origin, direction, length);
let rayHelper = new BABYLON.RayHelper(ray);     
rayHelper.show(scene);
1 Like
5

A second example I will provide is specifically also from the camera trying to click on an object (this demo is a little lower on the page)

I modified it an extra line to show the ray! (line 25)

Think of that ray direction from your mouse shooting out into space. So inorder to really see forward where you when you’ll need to rotate the camera to see the full trajectory.

Your scene is having some issues because it is not updating. You create the ray one time when the scene is created and that is the mouseX and mouseY it will use. You will either need to use

scene.registerBeforeRender(function () {
        //update here
 });

to update your ray or call the update ray maybe only when you click the mouse.

I hope this can help visualize it more and let me know if you have any follow ups. :slight_smile:

1 Like
6

This is the example I made, so I want to cast a ray from camera to the mesh which is sphere here, if there is any mesh hit by the ray except the sphere, the sphere should disappear
Sphere Examples | Babylon.js Playground (babylonjs.com)

but looks like it’s not working as expected

7

Do you want to cast the ray from the camera’s look at vector. So if I’m just directly looking at the sphere it disappears. Or from where you click with the mouse?

Edit: I see your updated demo. Let me get a solution and explanation :slight_smile:

8

Update playground: Sphere Examples | Babylon.js Playground (babylonjs.com)

Yes, is that the right way to cast the ray from camera to the yellow sphere in my demo?
image

I also console.log(hit.pickedMesh), but looks like only the yellow mesh get hit? I think all three is hit by the ray?

image
image1858×858 127 KB

9

Yep! You are on your way.

Let’s clean it up a bit more! First, if you want to be able to hit only the middle one for example. You can create a predicate function that excludes the other two spheres. OR if you want to be able to hit all of the spheres we can use multiPickWithRay and then iterate over all of them

Here is the predicate: https://playground.babylonjs.com/#WIR77Z#754 (line 26-33)

function predicate(mesh){
        if (mesh == sphere || mesh == sphere3){
            return false
        }
        return true;
}

var hit = scene.pickWithRay(ray,predicate);

Here is the multiPick: https://playground.babylonjs.com/#KNE0O#19 (line 67-73)

var hits = scene.multiPickWithRay(ray);
if (hits){
           for (var i=0; i<hits.length; i++){
               hits[i].pickedMesh.scaling.y += 0.01;
           }
}
1 Like
10

Thank you @msDestiny14 for the playground ! The predicate is really helpful. I also tried use the multiPick, but the hits is undefined Sphere Examples | Babylon.js Playground (babylonjs.com)

image
image1843×716 82.2 KB

11

I made a couple of changes. :wink:

First you had a tiny typo. It either needs to be console.log(hits); or console.log(hits[0].pickedMesh);
(the latter will return the first one hit)

Hits is an array of all the hits we made.

The second thing I did was put the ray in an update loop (line 36) so you can see what happens if you keep firing the ray. :slight_smile:

12

Got it, thanks for the good lesson for ray, learned a lot

1 Like