Hallo lieber KI-Chatbot,

Ich habe eine Frage zu babylon.js und Typescript.
Bei einer ArcRotateCamera gibt es camera.zoomToMouseLocation.
Ich möchte das jetzt auch mit Pinch-Gesten erreichen.

Ich habe es wie folgt versucht.
Das funktioniert leider sehr unzuverlässig
Kannst du helfen ?


    private activePointers: Map<number, BABYLON.Vector2> = new Map();
    private lastPinchDistance: number = 0;
    private initialRadius: number | null = null;
    private pointerObserver: BABYLON.Nullable<BABYLON.Observer<BABYLON.PointerInfo>> = null;

    public enablePinchZoom(): void {
        const camera = this.camera.babylonCamera;
        const scene = this._babylon.scene;

        const pointersInput = camera.inputs.attached.pointers as BABYLON.ArcRotateCameraPointersInput;
        if (pointersInput) {
            pointersInput.pinchZoom = false; // Standard-Pinch-Zoom deaktivieren
        } else {
            console.warn("no cam-controls");
            return;
        }

        if (this.pointerObserver) {
            scene.onPointerObservable.remove(this.pointerObserver);
        }

        this.pointerObserver = scene.onPointerObservable.add((pointerInfo: BABYLON.PointerInfo) => {
            const event = pointerInfo.event as PointerEvent;

            switch (pointerInfo.type) {
                case BABYLON.PointerEventTypes.POINTERDOWN:
                    this.activePointers.set(event.pointerId, new BABYLON.Vector2(event.clientX, event.clientY));

                    if (this.activePointers.size === 2) {
                        const pointerPositions = Array.from(this.activePointers.values());
                        this.lastPinchDistance = BABYLON.Vector2.Distance(pointerPositions[0], pointerPositions[1]);
                        this.initialRadius = camera.radius;
                    }
                    break;

                case BABYLON.PointerEventTypes.POINTERUP:
                    this.activePointers.delete(event.pointerId);

                    if (this.activePointers.size < 2) {
                        this.lastPinchDistance = 0;
                        this.initialRadius = null;
                    }
                    break;

                case BABYLON.PointerEventTypes.POINTERMOVE:
                    if (this.activePointers.size === 2 && this.initialRadius !== null) {
                        const pointerPosition = this.activePointers.get(event.pointerId);
                        if (!pointerPosition) return;
                        pointerPosition.set(event.clientX, event.clientY);
                        const pointerPositions = Array.from(this.activePointers.values());
                        const newPinchDistance = BABYLON.Vector2.Distance(pointerPositions[0], pointerPositions[1]);
                        if (this.lastPinchDistance === 0 || newPinchDistance === 0) {
                            this.lastPinchDistance = newPinchDistance;
                            return;
                        }
                        const zoomFactor = newPinchDistance / this.lastPinchDistance;
                        const newRadius = this.initialRadius / zoomFactor;
                        camera.radius = newRadius;
                        this.lastPinchDistance = newPinchDistance;
                    }
                    break;
            }
        });
    }