Adding zoom in and zoom out functionality?

HOOPS Communicator
1

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.

2

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.

  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);
    }
2 Likes
3

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?

4

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.

2 Likes