chicagobob123

Google Earth shift drag controls

Recommended Posts

I have been tasked to create a add to a camera some functionality thats in Google Earth(link below). 

The basics is you and shift drag  to Yaw around the point you clicked on. Then there is pitch as you move up and down which can be offset from the center. 

I am using FreeCamera control as was able to get the offcenter yaw but the pitch is kicking my butt.  Hoping one of you math wizards can give me an idea on how to get this to work. 

https://earth.google.com/web/@38.23556007,-86.14125787,207.84151084a,1446.24993683d,35y,-51.2030513h,4.07157441t,0r

Click 3D then hit shift on your keyboard and left mouse drag and you can see how the pitch and yaw work.  Thanks for any ideas. 

Share this post


Link to post
Share on other sites

I implemented google map style controls in a pg linked above, and also provided a link to where this (something similar anyway) was used in production (which will give you a better idea as to whether this is the sort control style you're wanting to do).

I modified the ArcRotate camera though, not the Free Camera.

Share this post


Link to post
Share on other sites

The Arcrotatecamera is close but the people I work with want that pivot and rotate at the point you click on. Basically off center.

I am going to look at the Arcrotatecamera code to see what it does. I am currently at a loss because even though all the math seems right the result is wrong. 

I took the camera created and offset rotation and simultaneously rotated the view port. That should have worked but alas it does not. 

Thanks for the look see. 

 

Share this post


Link to post
Share on other sites

OK in a finally got this placed into Playground.  

https://www.babylonjs-playground.com/#NU4F6Y#89

Had to learn to program this again. You hit the shift key click and drag the to the right. Whats supposed to happen is in the image below. Like Google Earths shift drag. 

What happens is the point does not stay stationary. I just can't figure out why. 

 

 

rotating viewpoint.png

Share this post


Link to post
Share on other sites

Why did you remove the check to  offsetX != 0 ?  and I love your 360 fix. 

But that seems to have fixed it here yet in the app its not the same.

Now have some more digging to do.  

NOTE Don't use coordinateSystem.screenCoordinatesToWorldCoordinates(this.scene, evt.clientX, evt.clientY); to deliver your pivot point. 

Now I can move on.  Will add the pivot around the top. 

Share this post


Link to post
Share on other sites

I removed the offsetX check as I was finding it jarring for the camera to pan a little sometimes while rotating if the x offset happened to be zero (while the y offset was not).

Where's the screenCoordinatesToWorldCoordinates function from? It sounds like the start of firing a ray from the camera and then using it to pick a point.

Regarding picking a pivot point, if you're just dealing with a flat 2d plane, then doing an intersection test against that (BABYLON.Plane) will be a bit cheaper than doing one against a mesh (especially if you're wanting to test on mouse move when dragging to maintain position under the cursor).

Edit: Just stumbled across https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/shiftKey which you might also find of use

Edited by sable

Share this post


Link to post
Share on other sites

Hi, just wanted to reply real quick.. 

Thanks for everything.  I thought I had a completed this control today but alas its still not right.

I have a babylon playgorund for it but don't really want to share until I am ready to ask for specific help or just share the code.

Either way..   Anyway head down working and its close to what they asked for but still a bit broken. 

 

 

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.