Beginner question: Camera control

Questions
1

Hello all,

I’m still new with Babylon.js and with JavaScript in general, so forgive me if I ask some silly beginner questions. My compliments to the developers for making the engine rather accessible even for newbies.

I’m working on a cultural web project that uses Babylon.js as its 3d rendering engine. I’m using a FreeCamera and want to control its movement with the four arrow keys and the page up/page down keys. However, it does not work exactly as intended. Here’s my code:

mainCamera.keysUp = [38];
mainCamera.keysDown = [40];
mainCamera.keysRotateLeft = [37];
mainCamera.keysRotateRight = [39];
mainCamera.keysUpward = [33];
mainCamera.keysDownward = [34];

The left and right keys do not, as I want it, rotate the camera but simply move it sidewise left and right (like the defauilt setting of the FreeCamera). It seems that I’m missing something here. Do I maybe have to deactivate rotating the camera with the mouse first?

Maybe somebody has a hint for me.

Many thanks in advance
Hayden

2

Hello and welcome to the Babylon community!

You were on track, the only thing that was missing was to unset the keysLeft and keysRight properties on the camera, since they were already using those keys and seem to be considered over the rotateLeft/Right property :smiley:

Here’s a playground with your code and the update: Camera | Babylon.js Playground (babylonjs.com)
(Usually, when posting questions on the forum, it’s better to provide a playground example from the get go so anyone who wants to help can jump right into your code - but since that’s a simple question I just copied your code here)

We’d love to see your project when/if you are able to! :smiley:

3 Likes
3

Hi Carol,

many thanks for your kind welcome.

It’s still not working as I intended. The difference is that you have set a camera target in your code example on the playground. I don’t. The camera is intended to be moved around freely and the left/arrow keys to set the direction of the movement.

I assume that without a target the camera rotation is fixed to dragging the mouse and I would have to unset it from the mouse first. If there’s no easy way to do it, i may consider a different concept for the camera control.

We’d love to see your project when/if you are able to! :smiley:

I will post a link to the prototype when there’s something noteworthy to see. I’m going tiny step by tiny step. It’s a great way to learn stuff by solving practical problems for a goal you have in mind. Right now I’m building the first meshes and I’m really proud of myself that after fumbling around for months I’ve finally realized how to do precise unwrapping and using PBR materials in Blender. For some time I thought I would never get that into my brain, haha.

Yours
Hayden

5 Likes
4

What about like this? I made a constant HEIGHT that sets the initial camera height and target to the same value and added a grid to the ground so that you can see the movement better. :slight_smile:

3 Likes
5

Hello Blake,

thanks for the hint.

Your playground example works exactly the way I want it. But when I adapt it to my code, it doesn’t work. The left and right arrows have no effect at all. The only way to rotate the camera is to drag the mouse pointer left and right with the left mouse button pressed.

I have no idea what I’m missing here. My only idea is that I have to detach the camera from the mouse control first. (Maybe there’s a difference between the mouse control setup of the playground and the mouse control when I start a project from scratch.)

Maybe someone of the community could be so kind to have a look at the main file of my project?

All the best & many thanks
Hayden

1 Like
6

It should be the same I think. I can take a look at the file if it’s not too big, maybe something will jump out… But prob would need a small reproduction to help troubleshoot it, maybe you can reproduce it not working on a CodePen instead of playground? :slight_smile:

EDIT: I made a quick CodePen version of the demo and the keyboard controls are working there too for reference. Hmm, I wonder if you have other keyboard event handlers in your project maybe? :thinking:

1 Like
7

Hmm, I wonder if you have other keyboard event handlers in your project maybe? :thinking:

Not that I’m aware of. Here’s the whole camera configuration as I have coded it (please note that I have moved the control to the WASD keys, but apart from that it’s the same):

        var mainCamera = new BABYLON.FreeCamera("mainCamera", new 
        BABYLON.Vector3(0,2.2,-40) , mainScene);
        mainCamera.attachControl(renderCanvas, true);
                
        mainCamera.keysUp = [87]; 
        mainCamera.keysDown = [83]; 
        mainCamera.keysLeft = []; 
        mainCamera.keysRight = []; 
        mainCamera.keysRotateLeft = [65]; 
        mainCamera.keysRotateRight = [68]; 
        mainCamera.keysUpward = [33]; 
        mainCamera.keysDownward = [34]; 
         
        mainCamera.ellipsoid = new BABYLON.Vector3(1, 1, 3);
        mainCamera.ellipsoidOffset = new BABYLON.Vector3(0, 0, 2);
        mainCamera.applyGravity = true; 
        mainCamera.checkCollisions = true;
        mainCamera.speed = 0.2;

Everything works as intended, except the rotation.

The main file is just 150 lines. I could send it. I only have to figure out how to send personal messages in this forum :wink:

8

I copied your code onto the playground and the ASWD controls are working so that part is good I think.

EDIT: I tried it on version 4 and the custom camera-rotating keyboard controls don’t work… So I’m guessing that you’re using V4 and if you upgrade to V5 it will fix the issue for you.

Can you try using the latest release if you aren’t and see if that works for your project? :slight_smile:

<script src="https://preview.babylonjs.com/babylon.js"></script>
3 Likes
9

Hi Blake,

sorry for not responding earlier. I was some days busy with my main job, now I’m back at the project.

EDIT: I tried it on version 4 and the custom camera-rotating keyboard controls don’t work… So I’m guessing that you’re using V4 and if you upgrade to V5 it will fix the issue for you.

I already had the same suspicion that I did something wrong here. I’ve inserted your code line and checked and now it’s all working as intended. Thank you so much for your help!

BTW I’m not sure if I have to include the file babylonjs.loaders.min.js. It’s recommened in some tutorials. Do I need it and is the current version on the same location?

(In case the loader filer has something to do with importing: I intend to import meshes from Blender as glTF files [binary]. I tried on the sandbox and it works perfectly.)

Yours
Hayden

1 Like
10

Hey there, glad to here it’s working for you. :slight_smile: For loading glTF you’ll need a loader file, here’s the CDN link for the latest release, the same version used above.

<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>

The CDN link includes all the loaders, but you can also copy the file for just the one(s) that you need from the GitHub repo here. EG for your blender-exported models, here’s the glTF version 2 file loader. :slight_smile:

1 Like
11

Hello @Hayden just checking in, do you need any further help? :smiley:

12

Hi Carol,
sorry that I overlooked this.
You can regard the topic as closed. You folks were very helpful. Many thanks!
Hayden

1 Like