How to add a Zoom In - Zoom Out button to a scene

I am trying to build simple controls buttons to view a 3D shape like “Zoom In”, “Zoom Out”.

It doesn’t seem possible to do it using orbitcontrols, unless I generate a mouse event programmatically to trick it.

Is there a better way ?

Just fiddle around with the orbitcontrols.JS, you can customize it to your liking quite easily

I was trying to avoid not being able to seamlessly update the library. Too bad it is not available straight out of the box within the Three.js project, it is a basic functionality

You’re talking about having to compile three.js?

It’s intended that the code from the examples should be adjusted according to project-specific requirements. It’s actually not complicated to enhance the public interface of OrbitControls with an API for your use case:

Demo: https://jsfiddle.net/5aLhoypj/1/

In this example, we introduce two new public methods zoomIn() and zoomOut(). They use existing logic in OrbitControls and can be easily invocated by your app’s event listeners.

1 Like

Yea, that’s exactly what I was about to suggest Mugen :blush: