Zoom In and Out using Mouse Scroll

Help & Support
1

Hello Everyone,
I am working on my first project in PlayCanvas and Writing my first JS script.
The Target of my project that I am trying to achieve is to Zoom In/out using Mouse Scroll by controlling a Camera 'Field of View ’ property.
Anyone Please can help me to achieve my target.

2

Hi @mjmihir0106 and welcome,

Here is a sample script that can do that, save/parse it and then attach it to your camera entity:

var MouseZoom = pc.createScript('mouseZoom');

// initialize code called once per entity
MouseZoom.prototype.initialize = function() {

   this.app.mouse.on(pc.EVENT_MOUSEWHEEL, this.onMouseWheel, this); 
};

MouseZoom.prototype.onMouseWheel = function (event) {
   const currentFov = this.entity.camera.fov;
   const newFov = pc.math.clamp(currentFov + event.wheel, 0, 90); // min/max sample values
   this.entity.camera.fov = newFov;
};
3 Likes
3

@Leonidas Thanks
This Script is very useful for me.
can you please guide me to add another feature that is Zoom in/out using Touch?

4

Hi @mjmihir0106! Have you seen the demo project below? In that project is ‘pinch to zoom’ used for touch.

https://developer.playcanvas.com/en/tutorials/orbit-camera/

1 Like