DOM Buttons like Keyboard inputs

Questions
#1

Hi there

$ (function() {
    $("#camBtnTop").mousedown( function()
       {scene.activeCamera.beta -= 0.2;}
       );});

I’m turning the camera by DOM buttons. There would be a way to make it more smooth:
https://www.babylonjs-playground.com/#2DMPBD#4

But before i start doing that: Question: Is it possible to define a mousedown as a keydown action. something like:

 scene.activeCamera.keysup.mousedown($("#camBtnTop"))

I’m loving the way the arc rotate camera is turning on keysup, would it be possible to trigger this by a DOM button?

Thanks!

#2

Hey!

just update camera.inertialAlphaOffset or camera.inertialBetaOffset

See how the arc rotate camera works: Babylon.js/arcRotateCameraKeyboardMoveInput.ts at master · BabylonJS/Babylon.js · GitHub

1 Like
#3

Great thank you! works fine:

  $(function() {
    $("#camBtnTop").mousedown( function()
       {scene.activeCamera.inertialBetaOffset -= 0.02;}
       ); 
  });

I will try to implement a “onmousedown” that works like “onkeysdown” to keep the movement going while you press the button - if it works, i’ll post it here

#4

here’s how it keeps on moving while you press the DOM button as if you would press a keyboard key:

    var intervalBtnTop;
    $("#camBtnTop").mousedown(function() {
      actionBtnTop();
      intervalBtnTop = setInterval(actionBtnTop, 150);
    }).mouseup(function() {clearInterval(intervalBtnTop);
    }).mouseout(function() {clearInterval(intervalBtnTop);
    });
    function actionBtnTop() {
    scene.activeCamera.inertialAlphaOffset += 0.01;
    }
1 Like
#5

Button like this for the freecamera/universalcamera:

var intervalmoveBtnBott;
$("#moveBtnBott").mousedown(function() {
var axis = new BABYLON.Vector3(0, 0, 1)
console.log(“mousedown”);
actionmoveBtn(axis);
intervalmoveBtnBott = setInterval(actionmoveBtn, 250);
}).mouseup(function() {clearInterval(intervalmoveBtnBott);
}).mouseout(function() {clearInterval(intervalmoveBtnBott);
});
function actionmoveBtn(axis) {
console.log(axis);
var move_direction = BABYLON.Vector3.TransformNormal(axis, scene.activeCamera.getWorldMatrix());
scene.activeCamera.cameraDirection = move_direction;
};

#6

The only thing is: I just realized it’s kind of stupid to do it with DOM buttons. If you click a DOM button, you loose control over the canvas. so you have to click again the canvas if you want to move with the keyboards…

I would have been better of doing all in BABYLON GUI… /: