want to use WASD keys to rotate the universal camera in my scene.
saw this example code:
Trying to convert this example to typescript, totally unsuccessful, if anyone can help.
Hey @cosmos,
If you want to use WASD to rotate, I could see two approaches. Both will require starting by removing the initial keyboard input code:
// Assuming camera is the name of your camera asset
camera.inputs.remove(camera.inputs.attached.keyboard);
First approach: Manually rotate
// Create an instance of the DeviceSourceManager and modify the cameraRotation with each rendered frame
const dsm = new BABYLON.DeviceSourceManager(scene.getEngine());
dsm.onDeviceConnectedObservable.add((eventData) => {
if (eventData.deviceType === BABYLON.DeviceType.Keyboard) {
const keyboard = dsm.getDeviceSource(BABYLON.DeviceType.Keyboard);
scene.beforeRender = () => {
const w = keyboard.getInput(87);
const a = keyboard.getInput(65);
const s = keyboard.getInput(83);
const d = keyboard.getInput(68);
const rotationalSpeed = 0.002;
if (w === 1) {
camera.cameraRotation.x -= rotationalSpeed;
}
if (a === 1) {
camera.cameraRotation.y -= rotationalSpeed;
}
if (s === 1) {
camera.cameraRotation.x += rotationalSpeed;
}
if (d === 1) {
camera.cameraRotation.y += rotationalSpeed;
}
};
}
});
There are many ways to do this but I’ve elected to use a DeviceSourceManager to grab the keyboard status and manually modify the camera’s rotation based on the active keys. Example PG: UniversalCamera Manual Rotation | Babylon.js Playground (babylonjs.com)
Second Approach: Custom Input (in Typescript):
Universal Camera Custom Keyboard Input | Babylon.js Playground (babylonjs.com)
I know that the UniversalCamera uses FreeCameraKeyboardInput for its camera movement and that it already has functionality to rotate right and left but not up and down. You might be able to extend this functionality and add the up/down rotation yourself. As I said, there are many ways to do this so hopefully this helps you to get started.
4 Likes
How would you make it move forward with W, backwards with S, left with A, and right with D? How would you lock the cursor to rotate the camera while moving the cursor without having to hold the pointer down? Basically, how would you make this behavior like FlyCamera (but without banking)?
Someone shared this example, that uses WASD for movement, which is waaaaaaay simpler than the above example:
Free Camera | Babylon.js Playground (babylonjs.com)
camera.keysUp = [87];
camera.keysDown = [83];
camera.keysLeft = [65];
camera.keysRight = [68];
camera.keysRotateLeft = [];
camera.keysRotateRight = [];
camera.keysUpward = [81];
camera.keysDownward = [69];
Now the question is how to lock the pointer and look like FlyCamera.
1 Like
NGL, I completely forgot about those. Great idea, @trusktr! Just out of curiosity, when you say you wanna lock the pointer, are you talking about adding a pointerlock where cursor is locked to the canvas? If so, you should be able to just use engine.enterPointerLock() and it should handle the rest.
Yeah, that did the trick.
However in cases without pointer lock, I need to also add custom multi-pointer functionality, so that when more than one pointer is down, I can do custom behavior.
But I discovered yet another issue: if we disable Babylon’s controls (detachControls()) when a second pointer goes down to handle multi-pointer behavior, Babylon’s controls break. After that, attachControls() will never bring it back, it stays broken indefinitely.
In the end, I abandoned trying to use Babylon’s controls, and rolled my own from scratch.