ArcRotateCamera zoom to mouse position

[Dreik]

Did anyone mabey try to make ArcRotateCamera zoom to mouse position instead of middle of the screen?

If not is that doable with that camera or should I work with another one?

[dbawel]

@Dreik

You can do this many ways, however, the method you're using can work. First, how does your canvas know the XYZ position of an XY canvas? but if you're trying to zoom into an object, pick the object and change it's target to be the pick point.

DB

[Dreik]

I'm doing line-plane intersection to pick a point on a plane I need. but if I just change the target of the camera to it camera will rotate right? So it won't look smooth. What I need is to make it look like you are constantly watching from the top or the angle you set by rotating camera. I don't want extra rotation from zooming.

[The Leftover]

http://www.illuminated.city/mp4/DistrictZoom.mp4

I do this.  It looks good.  Code is below.  At first glance it looks readable.  No warranty.

       function animateCameraToTargetAndPosition(camera,newPosX,newPosY,newPosZ,zoom,newAlpha,newBeta){
        var radiusAnimation      = new BABYLON.Animation("camRadius", "radius", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT),
            alphaAnimation       = new BABYLON.Animation("camAlpha", "alpha", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT),
            betaAnimation        = new BABYLON.Animation("camBeta", "beta", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT),
            targetAnimation      = new BABYLON.Animation("camTarget", "target", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT),
            newTarget            = new BABYLON.Vector3(newPosX,(Ø.tyN(newPosY)?newPosY:ψ(0)),newPosZ),
            thenStopCA           = ()=>setTimeout(stopCA,150),
            newRadius            = Ø.PN(zoomLevel[zoom])?zoomLevel[zoom]:zoomLevel[0],alpha,beta,radiusKeys,alphaKeys,betaKeys,targetKeys,twoPI=pi+pi;

        startCA();

        newAlpha                 = Ø.tyN(newAlpha)?newAlpha:standardAlpha;
        newBeta                  = Ø.tyN(newBeta)?newBeta:standardBeta;

        alpha                    = (camera.alpha+twoPI) % twoPI;
        beta                     = (camera.beta+twoPI) % twoPI;

        targetKeys = [{
          frame    : 0,
          value    : camera.target
        }, {
          frame    : 100,
          value    : newTarget
        }];
        radiusKeys = [{
          frame    : 0,
          value    : camera.radius
        }, {
          frame    : 100,
          value    : newRadius
        }];
        alphaKeys  = [{
          frame    : 0,
          value    : alpha
        }, {
          frame    : 100,
          value    : newAlpha
        }];
        betaKeys   = [{
          frame    : 0,
          value    : beta
        }, {
          frame    : 100,
          value    : newBeta
        }];

        targetAnimation.setKeys(targetKeys);
        radiusAnimation.setKeys(radiusKeys);
        alphaAnimation.setKeys(alphaKeys);
        betaAnimation.setKeys(betaKeys);
        camera.animations.push(targetAnimation);
        camera.animations.push(radiusAnimation);
        camera.animations.push(alphaAnimation);
        camera.animations.push(betaAnimation);
        scene.beginAnimation(camera,0,100,false,5,thenStopCA);
      };

[sable]

https://www.babylonjs-playground.com/#DD2IDJ

The above pg implements controls that are similar to most mapping solutions (panning keeps mouse in same position, as does zooming), and is basically a stripped down version of the control system I used here (though there the camera was also heavily modified so as to allow both rotation around the globe and about the surface target. The 2d mode available through the tools menu could have been done using the control scene from the pg and the standard camera however. Touch controls are also implemented there but not in the above pg). There may be a more idiomatic way of implementing custom controls though.

I'm not sure if this is entirely what you're looking for (2d plane navigation), though I think it could be extended to work in 3d zooming in to a plane parallel to the viewport. Let me know if anything in there is unclear.

[Dreik]

@sable

That was just perfect for my usage Now I only need to understand it and everything will be fine.