DOM Buttons to Control Character move w ArcRotate Camera target

[JackFalcon]

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:

            engine.runRenderLoop(function(){
                scene.render();
                if(scene.isReady()){              
                    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.
            break;
            case 39: //'rightarrow':
                simpleMesh.rotation.z = 0.2;
            break;
        }    
    }

    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>

    <script>
    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?

Thanks,

 

[aWeirdo]

Hi @Jack Morris 
For mesh targeting with arcRotate,
simply do;

camera.setTarget(targetMesh);

to manipulate the camera alpha & beta values via DOM elements;

Here's a simple PG; http://www.babylonjs-playground.com/#2DMPBD#3

[JackFalcon]

Nice @aWeirdo, exactly what I was looking for. That should do the trick. Thanks.

[aWeirdo]

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)

[JackFalcon]

@Weirdo Nice1.

Yes smoothing is needed. It is like an airplane so the jump was visible.... I'll put it under a key flag and drop into beforeRender and post back results for others.

Thanks for the tip.

 

[JackFalcon]

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

    onKeyDown = function(e) {  
        switch (e) {
            case 'touchLeft':
                movekeys.left=1;

                     ...

    function animateMovement(){
        if(movekeys.left){
            sceneFollowCamera.alpha -= 0.05 ;
        } 

       ...
    }

        scene.beforeRender = function () {
              animateMovement();  
        }