Babylon.js place a plane normal to the clicked surface

Question

Just completed a babylon.js tutorial on how to detect a click collision. My scene setup is similar to this, only I have more objects and a moving camera.

This script moves the plane to where the click has occured. But it does not rotate the plane so that it is coplanar to the surface you clicked on.

I'm curious about how to orient a plane normal to the surface which was clicked on.

Here's my scene setup:

var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);

var createScene = function () {
    var scene = new BABYLON.Scene(engine);      
    scene.clearColor = new BABYLON.Color3(0.5, 0.5, 0.5);

    var camera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 1, -15), scene);
    scene.activeCamera = camera;
    scene.activeCamera.attachControl(canvas);
    camera.inertia = 0;
    camera.speed = 50;

    var light3 = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 1, 0), scene);
    light3.diffuse = new BABYLON.Color3(1, 1, 1);
    light3.specular = new BABYLON.Color3(1, 1, 1);
    light3.groundColor = new BABYLON.Color3(0, 0, 0);
    light3.intensity = .7;

        var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);        
        var box = BABYLON.Mesh.CreateBox("box", 6.0, scene);        
        var ground = BABYLON.Mesh.CreateGround("ground1", 32, 32, 2, scene);
      // a plane that is moved when click hits a surface
        var decal = BABYLON.Mesh.CreatePlane("plane", 3.0, scene);

        box.position = new BABYLON.Vector3(0, 0.1, 0);
        box.scaling.x = (1); box.scaling.y = (0.05); box.scaling.z = (1);
        box.rotation.z = (Math.PI/4);
        sphere.position.y = 8;
        ground.position.y = -2; 

        var matGnd = new BABYLON.StandardMaterial("gnd", scene);
        ground.material = matGnd;
        matGnd.diffuseColor = new BABYLON.Color3(1.0, 0.2, 0.7);

        var matDecal = new BABYLON.StandardMaterial("decalM", scene);
        decal.material = matDecal;
        matDecal.diffuseColor = new BABYLON.Color3(1.0, 0, 0);

scene.registerBeforeRender(function () {
window.addEventListener("click", function (evt) {
   var pickResult = scene.pick(evt.clientX, evt.clientY);    
            if (pickResult.hit) {
                        decal.position.x = pickResult.pickedPoint.x;
                        decal.position.y = pickResult.pickedPoint.y;
            }
        });

    });

        return scene;
  };             

Answer 1

I know it's an old question, it might however come in handy for others that look for something similar.

1. Check if pickResult has a hit (you are already doing that)

2. Get the normal of the point (or face) you clicked on -

   var pickNormal = pickResult.getNormal();
   

3. Calculate rotation between the plane's normal and the pickResult normal using Cross and Dot product (assuming you have the plane's normal):

   var rotationAxis = BABYLON.Vector3.Cross(pickNormal, planeNormal).normalize();
   var angle = Math.acos(BABYLON.Vector3.Dot(pickNormal, planeNormal)); 
   

4. Rotate the plane:

   decal.rotate(rotationAxis,angle);
   

5. (Optional) set a new position for the plane

   decal.position = pickResult.pickedPoint;