Dreik

ArcRotateCamera zoom to mouse position

Recommended Posts

@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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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);
      };

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.