Move camera with collisions using virtual joystick

Questions
1

i m trying to move camera using virtual joysticks but the collision doesn’t work, how to fix this.

const leftJoystick = new VirtualJoystick(true);
    const rightJoystick = new VirtualJoystick(false);
    VirtualJoystick.Canvas!.style.zIndex = '4';

    const movespeed = 5;
    scene!.onBeforeRenderObservable.add(() => {
      if (leftJoystick.pressed) {
        const moveX =
          leftJoystick.deltaPosition.x *
          (scene!.getEngine()!.getDeltaTime() / 1000) *
          movespeed;
        const moveZ =
          leftJoystick.deltaPosition.y *
          (scene!.getEngine()!.getDeltaTime() / 1000) *
          movespeed;
        scene!.activeCamera!.position.x += moveX;
        scene!.activeCamera!.position.z += moveZ;
      }
2

Collision will work only if you use moveWithCollision, otherwise the camera will only move from one point to the other:

3

My camera already has ellipsoid added and collision set to true.

Do I need to add a parent mesh and camera as child of it to move using this method as moveWithCollision is only available on mesh types?

4

Oh! Sorry :slight_smile: I automatically moved to mesh collision.

Are you using the virtual joystick as a camera input? Instead of using the virtual keyboard directly, use the FreeCameraVirtualJoystickInput and add it to your camera inputs array. This way the virtual keyboard will change the camera’s position for you and will include collisions as well.

1 Like
5

Thanks! @RaananW , FreeCameraVirtualJoystickInput worked like charm.

Is there a way reverse the joystick functionality i.e., move with right and look with left.

6

pinging @PolygonalSun for this one :slight_smile:

7

As far as I know, there is no way to reverse the joystick behaviors with the FreeCameraVirtualJoystickInput. You might have to create a custom camera input for that one.

8

Thanks @PolygonalSun, where can i find the default code for FreeCameraVirtualJoystickInput, so that i can take reference from it

9

Babylon.js/freeCameraVirtualJoystickInput.ts at master · BabylonJS/Babylon.js (github.com)

1 Like