# Adding zoom in and zoom out functionality?

**URL:** <https://forum.techsoft3d.com/t/adding-zoom-in-and-zoom-out-functionality/703>\
**Category:** HOOPS Visualize Web\
**Created:** [March 21, 2022, 11:41am UTC](https://forum.techsoft3d.com/t/adding-zoom-in-and-zoom-out-functionality/703 "2022-03-21T11:41:21Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![yashwant.raut](https://avatars.discourse-cdn.com/v4/letter/y/c89c15/32.png) [@yashwant.raut](https://forum.techsoft3d.com/u/yashwant.raut)\
**Post date:** [March 21, 2022, 11:41am UTC](https://forum.techsoft3d.com/t/adding-zoom-in-and-zoom-out-functionality/703/1 "2022-03-21T11:41:21Z")

</div>

I want add camera zoom in and zoom out on respective buttons in my application by default we can zoom in and zoom out of the viewer with mouse scroll how I can implement functionality where user can click on html button and camera gets zoom in and zoom out.

What I’ve tried is push OperatorManager.OperatorID.Zoom to stack but That does not work.  
How can I invoke viewer zoom in and zoom out method from button.

---

<div class="post-metadata">

**Author:** ![guido](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.techsoft3d.com/guido/32/115_2.png) [@guido](https://forum.techsoft3d.com/u/guido)\
**Post date:** [March 21, 2022, 12:10pm UTC](https://forum.techsoft3d.com/t/adding-zoom-in-and-zoom-out-functionality/703/2 "2022-03-21T12:10:05Z")

</div>

Hi!

see below for a simple zoom function that performs a single zoom step. Its derived from the source code of our zoom operator which you can find in the HOOPS Communicator package at web\_viewer/typescript/operators/camera).

Here is a usage examples

`doZoom(-0.1,true,hwv)`

A negative value for delta zooms in while a positive value for delta zoom out. The value of delta should be between 0 and 0.9.

Let me know if you have additional questions.

```auto
  function doZoom(delta,preserveViewAngle, viewer)
    {
        let camera = viewer.view.getCamera();
        const view = viewer.view;
        const zoom = 1.0 / (1.0 - delta);

        camera.setWidth(camera.getWidth() * zoom);
        camera.setHeight(camera.getHeight() * zoom);

        if (preserveViewAngle) {
            const position = camera.getPosition();
            const target = camera.getTarget();

            const newDelta = Communicator.Point3.subtract(target, position).scale(zoom);
            camera.setPosition(Communicator.Point3.subtract(target, newDelta));
        }

        view.setCamera(camera);
    }

```

---

<div class="post-metadata">

**Author:** ![yashwant.raut](https://avatars.discourse-cdn.com/v4/letter/y/c89c15/32.png) [@yashwant.raut](https://forum.techsoft3d.com/u/yashwant.raut)\
**Post date:** [March 22, 2022, 7:13am UTC](https://forum.techsoft3d.com/t/adding-zoom-in-and-zoom-out-functionality/703/3 "2022-03-22T07:13:34Z")

</div>

first of all thanks for reply I implemented the same and it is working.  
and the range you mentioned it is for zoom out right? because we have near plane right?

---

<div class="post-metadata">

**Author:** ![guido](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.techsoft3d.com/guido/32/115_2.png) [@guido](https://forum.techsoft3d.com/u/guido)\
**Post date:** [March 22, 2022, 11:53am UTC](https://forum.techsoft3d.com/t/adding-zoom-in-and-zoom-out-functionality/703/4 "2022-03-22T11:53:43Z")

</div>

Hi.

no, this has nothing to do with the near plane because the zoom that this function does is relative to the current camera, its just how this function is implemented.