solved Google Earth shift drag controls

[chicagobob123]

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. 

[Guest]

Hello, can you offer a repro in the PG of your current work? It will be easier for the community to help

[chicagobob123]

I thought that would the case. I will give it a try. Thanks

[sable]

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.

[chicagobob123]

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. 

 

[chicagobob123]

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. 

 

 

[sable]

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

Was just a minor error, assigning the dragPoint.y the pickpoint.y instead of z on line 47.

I added a //change comment to each line I modified from the original pg.

Made this pg from scratch while checking, but prob not too much use to you.

[chicagobob123]

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. 

[sable]

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 November 8, 2018 by sable

[chicagobob123]

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.