Babylon.js разместить плоскость, перпендикулярную к поверхности щелчка

Question

Только что закончил учебник babylon.js о том, как обнаружить столкновение click. Моя установка сцены похожа на this, только у меня больше объектов и движущейся камеры.

Этот сценарий перемещает плоскость туда, где произошел щелчок. Но он не вращает плоскость так, что она копланарна к поверхности, на которую вы нажали.

Мне интересно, как ориентировать плоскость на поверхность, на которую была нажата кнопка.

Вот моя установка сцены:

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

Я знаю, что это старый вопрос, он может, однако, пригодится для других, которые ищут что-то подобное.

1. Проверьте pickResult имеют удар (вы уже делаете это)

2. Получить нормальные точки (или лиц), вы щелкнули -

   var pickNormal = pickResult.getNormal(); 
   

3. Calculate вращение между самолетом нормальный и pickResult нормального использования Креста и продукт Dot (если у вас есть плоскость нормаль):

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

4. вращают плоскость:

   decal.rotate(rotationAxis,angle); 
   

5. (необязательно) задать новое положение для самолета

   decal.position = pickResult.pickedPoint;