Orbit Controls - Simple Zoom in and Zoom out

Questions
1

Hi I am having some problems trying to get orbit controls to zoom in
I have tried a few solutions but non seem to work
what I have tried:

Adding
this.dIn = dollyIn; in OrbitControls.js to make global scope and calling it - didn’t work.

Adding this to OrbitControls.js:

          this.dollyIn = function () {
            dollyIn( getZoomScale() );
            scope.update();
        };

    this.dollyOut = function () {
        dollyOut( getZoomScale() );
        scope.update();
    };

and calling it with: controls.dollyIn(4);

this kind of worked it did zoom but when changing (4) to for example (15) the zoom remained the same and it was more of a zoom out rather than a zoom in

I’ve tried a couple other things they all didn’t work either is there a reliable way of creating a zoom with orbital controls?
Thanks in Advance

2

It seems other devs perciously exposed internal methods in the same way, see:

I’ve never done this myself so I can’t tell you how the arguments of the exposed methods have to look like. However, I suggest you add console.log() statements to dollyIn() and dollyOut() and observe the arguments when using OrbitControls without modifications. That should help to better understand how to manually invoce the exposed API in the correct way.

1 Like
3

So I ended up doing this after hours of reking my brain:

Zoom Out:

  ////Original Controls.target Position: controls.target.set(0, 0, 0);
  //Original Camera Position: camera.position.set(0, 0, 0);
   var tweenDuration=2000;
    function panCam(xTarget,yTarget,zTarget,tweenDuration){
    controls.enabled = false;
     
     var camNewPosition= { x : 0, y : 0, z : 0};
      var targetNewPos = {x : 0, y : 0, z : 0};

      var camTween = new TWEEN.Tween(camera.position).to(camNewPosition, tweenDuration).easing(TWEEN.Easing.Quadratic.In)
       .onComplete(function() {
           camera.position.copy(camNewPosition);
        })
      .start();
      var targetTween = new TWEEN.Tween(controls.target).to(targetNewPos, tweenDuration).easing(TWEEN.Easing.Quadratic.In)
        .onComplete(function() {
            controls.target.copy(targetNewPos);
            })
      .start();
        }
 panCam(0,0,0,1000);

Zoom In:

controls.enabled = false;
        var xTarget=0;
        var yTarget=-0.7;
        var zTarget=-1.65;
        var tweenDuration=2000;

        function panCam(xTarget,yTarget,zTarget,tweenDuration){

          var camNewPosition= { x : xTarget, y : yTarget, z : zTarget};
          var targetNewPos = {x : xTarget, y : yTarget, z : -1.65};

          var camTween = new TWEEN.Tween(camera.position).to(camNewPosition, tweenDuration).easing(TWEEN.Easing.Quadratic.Out)
           .onComplete(function() {
               camera.position.copy(camNewPosition);
           
            })
          .start();
          var targetTween = new TWEEN.Tween(controls.target).to(targetNewPos, tweenDuration).easing(TWEEN.Easing.Quadratic.Out)
            .onComplete(function() {
                controls.target.copy(targetNewPos);
                })
          .start();
          }
    panCam(0,-0.7,-1.65,800);

Hope this helps someone as it seems to be the only solution that worked for me

4

I encountered same problem and this solution worked for me

there is private variable named ’ scale " make it global also make dollyIn dollyOut public functions
and update it on each call. this works for me.