Zoom In & Zoom Out button in Threejs

In this tutorial, we are going to learn how to implement the Zoom in and Zoom out functionality with the click of buttons in Threejs.

Overview of what we are going to achieve in this tutorial

Image-1. Without zoom-in or zoom-out, Image-2. With zoom-in

Image-3. With zoom-out

This tutorial expects the basic knowledge of three things from you:

1. Three js fundamentals — Scene, Camera, Renderer, Mesh (for basic knowledge of Threejs fundamentals you can refer Threejs Fundamentals)
2. How ProjectionMatrix of Threejs Camera works (for reference Camera ProjectionMatzix)
3. Javascript Basics — Mouse events, event listeners and it’s fundamentals

Steps to achieve the Zoom-in, Zoom-out functionality in Threejs:

1. Create a basic mesh with an image as a texture and load it to the scene:

2. Create two buttons for zoom-in and zoom-out:

3. This is the last step to get the zoom-in and zoom-out functionality on the click of buttons we have created above.

Points to highlight before showing you the end code:

• When I was trying to achieve this functionality what the major issue I have encountered is, what is going to change in threejs which will let me zoom in the image. And the answer is pretty obvious if we will update the camera position to the near place we can see the zoomed-in scene.
  Now, the problem was that how to shift the position on which coordinates I have to place the camera now.
  Solution — So, this is what the solution is. One does not have to update the camera position. We can achieve this only by updating the fov parameter of the PerspectiveCamera in the Threejs.(To know more about what are the parameters of PerspectiveCamera, you can refer Threejs Camera)
  PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number)
where, fov — Camera frustum vertical field of view.
aspect — Camera frustum aspect ratio.
near — Camera frustum near plane.
far — Camera frustum far plane.

Fig. The frustum we create of PerspectiveCamera by through it’s different parameters

• How can I get the current value fov so accordingly I can minus or plus the value:

• Now, how can I update the fov of the camera in this scene:

So these 3 were the major questions I came across while implementing the functionality. And, honestly, I have searched a lot on google and didn’t get all this in one place. So, I decided to write this blog to help those out there like me who are not able to show their manager the desired zoom-in & zoom-out functionality. And as now I have elaborated what are the basic things for the zoom in zoom out, you can achieve this without click or with click wherever your project requires.

The Final output is here with the React and Threejs Code:

Sandbox for threejs zoom-in & zoom-out in reactjs

Thank you for reading!

Please leave comments if you have any suggestion(s) or would like to add a point(s) or if you noticed any mistakes or typos!

P.S. If you found this article helpful, clap! 👏👏👏 [feels rewarding and gives the motivation to continue my writing].