Sign in

Zooming

3D Wayfinder has built in mouse scroll wheel and multitouch pinch zooming. But if You want to add your own buttons for zooming then follow these instructions.

First, we add the buttons to the body of the document.

Then we create the javascript functions that are called by the callback functions. We use Wayfinder’s zoomIn and zoomOut functions.

The zoom in button

The zoom out button

We also add a slider control to set the zoom.
First, we add the slider input into the body.

Then we add the following into the main function. This calls the changeZoom function we will create when the slider value is changed.

And finally we will create the changeZoom function. This will use the setZoom function of Wayfinder, which takes a value between 0 and 1 to set the zoom between fully zoomed out and fully zoomed in.

To capture the current zoom level attach a callback function:

Full source