Move camera by touch instead of rotation

Abolfazl_Miadian · February 5, 2019, 1:58pm

Hi, I want to move position by touch, like scrolling in scene, I have a wide scene and y position of camera is always static, but I want to change camera x and camera z by touch, to explore scene, how I can do that?
thank you

Deltakosh · February 5, 2019, 3:26pm

Hello!

The best option would be to not attachControl on your camera and then manually listen to events like pointermove.

You can get inspired by the code for the freecamera:

github.com

BabylonJS/Babylon.js/blob/master/src/Cameras/Inputs/freeCameraTouchInput.ts

import { serialize } from "../../Misc/decorators";
import { Observer, EventState } from "../../Misc/observable";
import { Nullable } from "../../types";
import { ICameraInput, CameraInputTypes } from "../../Cameras/cameraInputsManager";
import { FreeCamera } from "../../Cameras/freeCamera";
import { PointerInfo, PointerEventTypes } from "../../Events/pointerEvents";
import { Matrix, Vector3 } from "../../Maths/math";
/**
 * Manage the touch inputs to control the movement of a free camera.
 * @see http://doc.babylonjs.com/how_to/customizing_camera_inputs
 */
export class FreeCameraTouchInput implements ICameraInput<FreeCamera> {
    /**
     * Defines the camera the input is attached to.
     */
    public camera: FreeCamera;

    /**
     * Defines the touch sensibility for rotation.
     * The higher the faster.

This file has been truncated. show original

Which camera do you plan to use?

Abolfazl_Miadian · February 5, 2019, 3:57pm

Hi Deltakosh. Thank you for your answer. I want to see my ground like stronghold crusaders 1. I want to use FreeCamera.

Deltakosh · February 5, 2019, 4:14pm

Ok so for free camera you can either create your own camera input or just capture pointermove / pointerdown events and move camera.position.x / z

Abolfazl_Miadian · February 5, 2019, 6:37pm

below function is from Interact with a Scene - Babylon.js Documentation . it is grate, but doesn’t support touch events like multi touch for zoom in and zoom out in mobile, do you know how I can handle this events too?

scene.onPointerObservable.add((pointerInfo) => {
switch (pointerInfo.type) {
case BABYLON.PointerEventTypes.POINTERDOWN:
console.log(“POINTER DOWN”);
break;
case BABYLON.PointerEventTypes.POINTERUP:
console.log(“POINTER UP”);
break;
case BABYLON.PointerEventTypes.POINTERMOVE:
console.log(“POINTER MOVE”);
break;
case BABYLON.PointerEventTypes.POINTERWHEEL:
console.log(“POINTER WHEEL”);
break;
case BABYLON.PointerEventTypes.POINTERPICK:
console.log(“POINTER PICK”);
break;
case BABYLON.PointerEventTypes.POINTERTAP:
console.log(“POINTER TAP”);
break;
case BABYLON.PointerEventTypes.POINTERDOUBLETAP:
console.log(“POINTER DOUBLE-TAP”);
break;
}
});

Abolfazl_Miadian · February 5, 2019, 6:44pm

arcRotateCamera have this zoom behavior, How I can use it in my FreeCamera?

Abolfazl_Miadian · February 5, 2019, 10:36pm

Hi, I solve my problem with using Getting Started - Hammer.js , it’s awesome, hope be useful for other too.

Deltakosh · February 6, 2019, 3:34pm

I was about to suggest it
Unfortunately (due to some patents) the gestures are not part of the web starndards for pointer events. So you have to rely on external libs (like the fantastic Hammer.js)

kryzodoze · January 19, 2023, 8:20pm

Just noting the updated Camera Inputs link.

Topic		Replies	Views
How does the babylon control the rotation of FreeCamera? Questions	4	406	December 1, 2022
FreeCamera Panning Questions camera	3	673	May 24, 2022
Universal camera with mouse scroll wheel and touch pinch Feature requests	12	2131	October 15, 2020
Touch screen gestures Questions	3	616	December 22, 2021
Free camera with custom fov zoom control for pinch gesture Questions	7	3726	May 26, 2020

Move camera by touch instead of rotation

Related Topics