How to enable touch input for ArcRotateCamera on Babylon React Native

Questions
13

Sorry if i didn’t make it very clear. What i was looking for was a way to capture/process a pinch or pan touch input with DeviceSourceManager, like the example you posted above, so i can do something similar to the ArcRotateCamera zooming in and out functionality or to scale up and down. Without having to use React Native Gesture Handler to do so. I figured it out already, got it somewhat close, but not very accurate yet tho :

async function createInputHandling() {
      var numInputs = 0;
      var previousDiff = 0;

      deviceSourceManager?.onDeviceConnectedObservable.clear();
      deviceSourceManager?.onDeviceDisconnectedObservable.clear();

      deviceSourceManager?.onDeviceDisconnectedObservable.add((device) => {
        numInputs--;
      });

      deviceSourceManager?.onDeviceConnectedObservable.add((device) => {
        numInputs++;
        if (device.deviceType === DeviceType.Touch) {
          const touch: DeviceSource<DeviceType.Touch> =
            deviceSourceManager.getDeviceSource(
              device.deviceType,
              device.deviceSlot
            )!;
          touch.onInputChangedObservable.add((touchEvent) => {
            const diff = touchEvent.previousState - touchEvent.currentState;

            if (model?.isEnabled()) {
              if (numInputs === 1) {
                if (touchEvent.inputIndex === PointerInput.Horizontal) {
                  model.position.x -= diff / 1000;
                } else {
                  model.position.z += diff / 750;
                }
              }
              // Panning do rotation.
              else if (
                numInputs === 2 &&
                touchEvent.inputIndex === PointerInput.Horizontal &&
                touchEvent.deviceSlot === 0
              ) {
                model.rotate(Vector3.Up(), diff / 200);
              } else if (
                numInputs === 2 &&
                touchEvent.inputIndex === PointerInput.Vertical &&
                touchEvent.deviceSlot === 0
              ) {
                //pinch


                let input1 = device.getInput(0);
                let input2 = device.getInput(1);
                let upperTouch = 0;
                let downerTouch = 0;

                if (input1 < input2) {
                  upperTouch = input1;
                  downerTouch = input2;
                } else {
                  upperTouch = input2;
                  downerTouch = input1;
                }
                
                let diff = downerTouch - upperTouch;

                if (diff < previousDiff) {
                  //zoom out
                  model.scaling = new Vector3(
                    (model.scaling.x -= 0.03),
                    (model.scaling.y -= 0.03),
                    (model.scaling.z -= 0.03)
                  );
                }
                if (diff > previousDiff) {
                  //zoom in
                  model.scaling = new Vector3(
                    (model.scaling.x += 0.03),
                    (model.scaling.y += 0.03),
                    (model.scaling.z += 0.03)
                  );
                }
                previousDiff = diff;
              }
}})}})}