javascript - Babylon.js place a plane normal to the clicked surface -

just completed babylon.js tutorial on how detect click collision. scene setup similar this, have more objects , moving camera.

this script moves plane click has occured. not rotate plane coplanar surface clicked on.

i'm curious how orient plane normal surface clicked on.

here's 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);       // plane moved when click hits 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;   };              

i know it's old question, might come in handy others similar.

1. check if pickresult has hit (you doing that)

2. get normal of point (or face) clicked on -

   var picknormal = pickresult.getnormal(); 

3. calculate rotation between plane's normal , pickresult normal using cross , dot product (assuming have plane's normal):

   var rotationaxis = babylon.vector3.cross(picknormal, planenormal).normalize(); var angle = math.acos(babylon.vector3.dot(picknormal, planenormal));  

4. rotate plane:

   decal.rotate(rotationaxis,angle); 

5. (optional) set new position plane

   decal.position = pickresult.pickedpoint;