Jump to content

DOM Buttons to Control Character move w ArcRotate Camera target


Recommended Posts

Hello all, BJS is great.

   Question: What is the best way to add DOM buttons, for tablet touch, to mimic the left and right arrow keys that control arc rotate camera following a target?

   Or, how can dom buttons control arc rotate camera (left/right)? Is there an Action Manager action event or something?

   Digging around, not finding it, hopefully this will help others, looking for the best solution.


   Here is the context:

                    cameraFollowTarget(simpleMesh); //camera positioning call.

    cameraFollowTarget = function(target){       
        var rotationControl = -45.5  // -45.5 is backfacing,   
        target.rotation.y = rotationControl - sceneFollowCamera.alpha;       
        sceneFollowCamera.target.x = parseFloat(target.position.x);      
        sceneFollowCamera.target.z = parseFloat(target.position.z);      
        sceneFollowCamera.target.y = parseFloat(target.position.y+2);   

    //init of sceneFollowCamera ArcRotateCamera...
    createCameraSets = function (){
        //CameraParams: name, alpha, beta, radius, target, scene.
        sceneFollowCamera = new BABYLON.ArcRotateCamera("CameraBaseRotate", -Math.PI/2, (Math.PI/2.2) - 0.4, 50, new BABYLON.Vector3(0, 5.0, 0), scene); // <------
        sceneFollowCamera.wheelPrecision = 15;   
        sceneFollowCamera.lowerRadiusLimit = 2;      //zoominandout
        sceneFollowCamera.upperRadiusLimit = 2222; 
        sceneFollowCamera.upperBetaLimit = 1.3;//1;
        sceneFollowCamera.beta = 1.5;
        sceneFollowCamera.radius = 15; //distance camera is from target.   
        scene.activeCamera = sceneFollowCamera;  <---- 
        sceneFollowCamera.attachControl(canvas);  <----


   //Connected DOM button to onKey handler, which animates Mesh, but it does not mimic arrow key rotation of mesh and camera:

    keyDown = function(e) {  
        switch (e) {
            case 37: //'leftarrow':
                simpleMesh.rotation.z = -0.2; <--airplane banking animation. but does not pan because it is handled within arc rotate camera.
            case 39: //'rightarrow':
                simpleMesh.rotation.z = 0.2;

    Is there an event to mimic arc rotate arrow keys from dom buttons?

    <a class='btn btn1' href='#'><i id="btnTurnLeft" title="look left" class="fa fa-repeat"></i></a>
    <a class='btn btn2' href='#'><i id="btnTurnRight" title="look right" class="fa fa-undo"></i></a>

    document.getElementById('btnTurnLeft').onclick = function(e){ 
          ... action manager event to turn camera?
    document.getElementById('btnTurnRight').onclick = function(e){ 

     I did a source code dive and saw that it is the camera alpha that needs the behavior,

     So I added it to the button click handler:

            case 'touchLeft':
                sceneFollowCamera.alpha -= 0.2 ;

      But... that jumps the camera rotation to that point, and not a smooth tween like the arrow key.

      So getting closer, but still digging deeper...

     Is there a better (simple) way to get the arrow key behavior for DOM button?



Link to comment
Share on other sites

You're welcome :) 

for smoother movement you can use booleans instead together with (mouse / pointer)down & up events.

e.g; while pointer is down on rorate_right_btn; scene.activeCamera.__rotate_Right = true;

and in scene.registerBeforeRender, something like;

if(scene.activeCamera.__rotate_Right) scene.activeCamera.alpha -= 0.05; 


http://www.babylonjs-playground.com/#2DMPBD#4 (uses pointerdown, won't work with browsers that only support mousedown)

Link to comment
Share on other sites

Yep that worked. Piece of cake. Here was the solution:

    onKeyDown = function(e) {  
        switch (e) {
            case 'touchLeft':


    function animateMovement(){
            sceneFollowCamera.alpha -= 0.05 ;


        scene.beforeRender = function () {

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...