Camera direction and position

Questions
1

Playing with camera, trying to figured out on how to:

  1. Force UniversalCamera to walk in only X direction? so for example If current camera position is at the sky, I want camera to walk on the x direction rather than toward sky

  2. Based on location, I want to restrict maximum camera X rotation/position.

How can I achieve those?

Thanks

2

Regarding 1., you may use camera.cameraDirection to set the direction the camera is moving to.

For 2., I think you will have to code your custom logic as I don’t think the UniversalCamera supports constraints.

3 Likes
3

Thanks

  1. Do I need to add cameraDirection on some event? cause if I simply add camera.cameraDirection.y = 0; and move position with mouse/keyword, it doesn’t works. Babylon.js Playground

  2. :roll_eyes:

4

You can use the onAfterCheckInputsObservable observable:

https://www.babylonjs-playground.com/#DRACS2#1

1 Like
5

Thank you so much, that worked for 1.

Also for second I am thinking another solution, I want to be able to control camera movements with buttons.

After reading a lot I found about Babylon GUI, and was able to create a GUI with 4 buttons, now I wants to learn on how to control the camera movement with those buttons, just like we click arrows on keyboard or mouse pointer movements to move forward/back,left/right etc.

PG of GUI with buttons https://www.babylonjs-playground.com/#IA7LXQ#1
not sure which events needs to be attached on onPointerUpObservable to move camera

6

You can use the camera.getDirection() function:

https://www.babylonjs-playground.com/#IA7LXQ#2

1 Like
7

Thank you @Evgeni_Popov, It was almost near on how I was thinking, But it doesn’t animate /go smoothly like when we do with mouse forward. so to overcome this here is my finding:

https://www.babylonjs-playground.com/#IA7LXQ#3

PG will not do anything when clicking button, since I don’t know how I can call engine.runRenderLoop on PG.

basically what I did, I am saving the state of button up/down, and than in engine.runRenderLoop I process that

var isbtnFwdDown = false; // save state of forward button

buttonFwd.onPointerDownObservable.add(function() {
 isbtnFwdDown = true;
});

buttonFwd.onPointerUpObservable.add(function() {
 isbtnFwdDown = false;
});

and than in:

        engine.runRenderLoop(function () {
            if(isbtnFwdDown) {
                   camera.position.addInPlace(camera.getDirection(BABYLON.Vector3.Forward()));
                }
            });

this animates it smoothly , is that correct way to animate camera?

ps. I noticed camera speed is very slow when processing in engine.runRenderLoop
to overcome the speed issue: I am calling camera position multiple times, like this:

            if (isForwardBtnDwn) {
                camera.position.addInPlace(camera.getDirection(BABYLON.Vector3.Forward()));
                camera.position.addInPlace(camera.getDirection(BABYLON.Vector3.Forward()));
                camera.position.addInPlace(camera.getDirection(BABYLON.Vector3.Forward()));
            }
8

There are couple of issues in above method of engine.runRenderLoop:

  1. camera.cameraDirection.y = 0; // doesn’t works
  2. collision is not also working
9

You can use the scene.onBeforeRenderObservable to execute some code every frame:

https://www.babylonjs-playground.com/#IA7LXQ#4

1 Like
10

cameraDirection and collision also doesn’t work for scene.onBeforeRenderObservable when clicking buttons:

https://www.babylonjs-playground.com/#IA7LXQ#5

12

You need to change camera.cameraDirection and not position:
https://www.babylonjs-playground.com/#IA7LXQ#6

cameraDirection is used by the collision engine to evaluate the camera position

4 Likes
13

Thank you sooOooO00oo much, all is working now … Not only I fell in love with Babylon.js library but all of you guys are so wonderful, <3

1 Like
14

sorry got stuck here, how can I also rotate camera without walking / and with walking also will be good to know.
I included two new buttons buttonRotateLeft and buttonRotateRight
https://www.babylonjs-playground.com/#IA7LXQ#7

    if (isRotateLeftBtnDwn) {
        // what value?
    }
    if (isRotateRightBtnDwn) {
        // what value?
    }
15

You want to change cameraRotation in that case

16

I tried that, but if I click buttonRotateLeft , camera moves to Left-Top instead rotating to Left only
https://www.babylonjs-playground.com/#IA7LXQ#8

    if (isRotateLeftBtnDwn) {
          camera.cameraRotation.addInPlace(camera.getDirection(BABYLON.Vector3.Left()).scale(0.1));
    }
    if (isRotateRightBtnDwn) {
          camera.cameraRotation.addInPlace(camera.getDirection(BABYLON.Vector3.Right()).scale(0.1));
    }
17

because it is an angle: https://www.babylonjs-playground.com/#IA7LXQ#9

2 Likes
18

Lovely, Thank you, finally I think I am done with camera movements, time to continue environment tuts <3

1 Like
19

is something has changed cause onAfterCheckInputsObservable has stopped working?

I am not able to keep camera direction y to 0

camera.onAfterCheckInputsObservable.add(() => {
    camera.cameraDirection.y = 0;
});

https://www.babylonjs-playground.com/#DRACS2#2

20

Indeed it does not work, but I can’t see any change in the past month in the source code of the camera related classes that could explain it…

Are you sure it did work before?

It does not work in 4.1 either.

21

confused, last time when I created above PG it was working.

p.s I did report a bug report related with camera, a PR was submitted by @Cedric