button for zoom in three.js - button

Question

I use three.js and THREE.OrbitControls for animation
I dont know how change zoom with button click
How I understand ..for zooming answer this functions
this.dollyIn = function ( dollyScale ) {
if ( dollyScale === undefined ) {
dollyScale = getZoomScale();
}
scale /= dollyScale;
};
this.dollyOut = function ( dollyScale ) {
if ( dollyScale === undefined ) {
dollyScale = getZoomScale();
}
scale *= dollyScale;
};
what I need send to increment or decrement zoom
I how do it for this button form ??
<input id="clickMe" type="button" value="+" onclick="..." />

Answer 1

I've done this in one of my project.
You are right, you can use dollyIn() and dollyOut() functions from OrbitControls to do the zooming in or out.
Here is the steps and snippet code :
You need to initialize the OrbitControls along with your camera and renderer domElement :
var controls = new THREE.OrbitControls(camera, renderer.domElement);
Create function for zooming in and out :
function zoomModel(isZoomOut, scale) {
if(isZoomOut){
controls.dollyIn(scale);
}else{
controls.dollyOut(scale);
}
}
Add event listener into your button to call the zoomModel function :
$("#clickMe").on("click", function(){
// call this to make the model larger/ zoom in
zoomModel(true, 4);
// call this to make it smaller / zoom out
//zoomModel(false, 4);
});

Answer 2

For newer THREEjs versions (tried on r74 and r75) you can call these on button click events:
controls.constraint.dollyOut(/*Add your desired scale here*/) //Zoom in
or
controls.constraint.dollyIn(/*Add your desired scale here*/) //Zoom out

Answer 3

Look in OrbitControls.js how the scale-value is applied to the radius of the camera around its target in the update()-function and how getZoomScale() is implemented.
The scale is multiplied with the overall radius. So to zoom out, the scale value has to larger than 1 and to zoom in, scale has to be smaller than 1. Also, scale will be reset to 1.0 at the end of the OrbitControls update function.
getZoomScale() on the other hand always returns 0.95 if zoomSpeed is set to 1.0.
To put it in a nutshell, if you only call controls.dollyOut() or controls.dollyIn() on button-click-event, your zoom will change like what you would experience with one tick of your mouse wheel, as this uses the same function call.