RayCasting

[bser]

Hello. We are trying to figure out how to do a Raycast from the camera, in order for a user to look at a mesh and be able to modify it. For example if we want a wall mesh to change into a heart mesh, we would want the user to look at the wall and it will change it to a heart mesh. How are you able to create this functionality? 

[JLHolmes]

Hi there... one quick way to do this is using observables... like so:

scene.onPointerObservable.add (function(evt) {
        var pi = evt.pickInfo;
    },BABYLON.PointerEventTypes.POINTERDOWN);

The pickInfo of the event contains a lot of information about the event (PickInfo)

You could also use scene.pick(), which takes X,Y coords you can grab from a standard mousedown event from addEventListener.

 

[bser]

Thank you for your response. It does work when you click on something, but how can you do it when you just move the mouse on top of a mesh without clicking. I tried POINTERMOVE, but I just get null for most things.

[Raggar]

Have you tried using 'onmousemove'?

 

[sable]

To get it to pick with pointerMove, you need to set constantlyUpdateMeshUnderPointer to true for the scene.

http://www.babylonjs-playground.com/#1A7ZCT#0

[Eric McG]

@bser I wanted to do the same thing, and came up with this demo.

http://www.babylonjs-playground.com/#1A7ZCT#4

The scene displays 4 spheres and continually creates rays using Ray.CreateNewFromTo()  from the camera's current position to a target (0,0,0).  If a ray intersects a sphere, a decal is drawn on the sphere.  We detect the intersection using scene.multiPickWithRay().  If multiple meshes are found, we choose the one that is closest to the camera.