How to add touch zoom (two fingers) to zoom script

I have a project that uses camera zoom script that uses the mouse wheel to zoom and a rotate script on an object environment to rotate the environment. Works find using the mouse buttons and wheel. On touch I can rotate the environment but not zoom. I do have the touchinput script attached to the camera.
I am new to coding

How can I modify the zoom2 script to work on touch using two fingers to zoom. Here is the zoom2 script I am using:

var Zoom2 = pc.createScript('zoom2');

Zoom2.attributes.add('zoomSensitivity', {
    type: 'number', 
    default: 1, 
    title: 'Distance Sensitivity', 
    description: 'How fast the camera zooms. Larger is faster'
});
/*Zoom.attributes.add('targetFov', {
    type: 'number', 
    default: 40, 
    title: 'Initial Camera FOV', 
    description: 'Initial Camera Field of View '
});*/

Zoom2.attributes.add('maxFov', {
    type: 'number', 
    default:90, 
    title: 'Maximum FOV', 
    description: 'Largest (widest) allowed camera field of view'
});

Zoom2.attributes.add('minFov', {
    type: 'number', 
    default: 22.5, 
    title: 'Minimum FOV', 
    description: 'Smallest (narrowest) allowed camera field of view'
});


// initialize code called once per entity
Zoom2.prototype.initialize = function() {
    //this.targetFov = 40;
    this.targetFov = this.entity.camera.fov;
        
    this.app.mouse.on(pc.EVENT_MOUSEWHEEL, this.onMouseWheel, this);
    var camera = this.entity.camera;

   

};

Zoom2.prototype.onMouseWheel = function (event) {

    //console.log ('event wheel value =', event.wheel);
    var fov = this.entity.camera.fov;
    
    this.targetFov += event.wheel * this.zoomSensitivity * -0.666667;  // incrementents the camera FOV by 3 for each mouse wheel detent
    event.event.preventDefault();
   
    
    
};

// update code called every frame
// Use this code if you want to camera zoom to smoothly update
// 
Zoom2.prototype.update = function(dt) {

    var fov = this.entity.camera.fov;
    
    // If this.targetFov is larger than the current FOV, then increment the current FOV 
    // in steps until that is no longer the case
    if (fov < this.targetFov) {
        fov += (45 * dt);
        if (fov > this.targetFov) {
            fov = this.targetFov;
        }
    }
    // If this.targetFov is smaller than the current FOV, then decrease the current FOV 
    // in steps until that is no longer the case
    if (fov > this.targetFov) {
        fov -= (45 * dt);
        if (fov < this.targetFov) {
            fov = this.targetFov;
        }
    }
     // Limits the camera FOV to between 90 and 22.5 degrees   
        if (fov > this.maxFov){
        fov = this.maxFov; 
        this.targetFov = this.maxFov;
    }
        if (fov < this.minFov){
        fov = this.minFov;
        this.targetFov = this.minFov;            
    }
    this.entity.camera.fov = fov;
    //console.log ('New Camera FOV', fov);
};

Thanks

1 Like

What is your touch zoom gesture? Pinch or two finger scroll?

would like pinch

thanks

You can see an example here with the orbit camera: https://playcanvas.com/editor/code/438243?tabs=6861119

https://playcanvas.com/editor/scene/475886