webglearth / webglearth2

[UNMAINTAINED] WebGL Earth 2 - the source code of the project
Apache License 2.0
888 stars 212 forks source link

Panning without resetting the tilt #85

Open jonathandlynch opened 7 years ago

jonathandlynch commented 7 years ago

Hello.

First, thanks for creating your wonderful 3D globe software. As I improve in my skills at using it, I hope I can add back to your project.

I am trying to find a way to set the tilt, then use the panTo method while keeping the tilt at the angle it started at. Right now, it seems to shift the tilt back up to 0 degrees when using panTo. Is this possible? If not, can it be added?

Also, would you consider adding a tiltTo method, so that the tilt can be changed without reloading the map?

thanks,

Jonathan

jonathandlynch commented 7 years ago

Actually, I think I see a way to do this. Apparently, it is possible to create an animation by steadily making small changes to the view and tilt. If you set the view to a new location, very close to the first location, it immediately loads the image, rather than having a delay for a new map image to load from the server. If you set the view and then immediately set the tilt, it just changes the view with the tilt that you set, rather than loading the view then loading again for the tilt. This is good. I believe I should be able to create an animated move as if traveling across the surface of the Earth this way.

jonathandlynch commented 7 years ago

I figured out how to do this, so no need to add any functionality. However, this did reveal a bug. Here is the code:function moveStraight() {

var tCenter = earth.getCenter();

var tLat = tCenter[0];

var tLon = tCenter[1];

var tBearing = earth.getHeading();

var tAlt = earth.getAltitude();

var tDistance = tAlt/2;

if (tDistance < 1) {

tDistance = 1;

}

tNewPoint = getNewPoint(tLat,tLon,tBearing,tDistance);

var tTilt = earth.getTilt();

earth.setCenter(tNewPoint);

earth.setTilt(tTilt);

}

function moveBack() {

var tCenter = earth.getCenter();

var tLat = tCenter[0];

var tLon = tCenter[1];

var tBearing = earth.getHeading();

var tAlt = earth.getAltitude();

var tDistance = tAlt/2;

if (tDistance < 1) {

tDistance = 1;

}

tDistance = 0-tDistance;

tNewPoint = getNewPoint(tLat,tLon,tBearing,tDistance);

var tTilt = earth.getTilt();

earth.setCenter(tNewPoint);

earth.setTilt(tTilt);

}

function twistLeft(){

var tBearing = earth.getHeading();

tBearing = tBearing+5;

if (tBearing<-180) {

tBearing = tBearing + 360;

} else if (tBearing > 180) {

tBearing = tBearing - 360;

}

earth.setHeading(tBearing);

}

function twistRight(){

var tBearing = earth.getHeading();

tBearing = tBearing-5;

if (tBearing<-180) {

tBearing = tBearing + 360;

} else if (tBearing > 180) {

tBearing = tBearing - 360;

}

earth.setHeading(tBearing);

}

function riseUp() {

var tAlt = earth.getAltitude();

tAlt = tAlt+1;

if (tAlt>10000) {

tAlt = 10000;

}

earth.setAltitude(tAlt);

}

function lowerDown() {

var tAlt = earth.getAltitude();

tAlt = tAlt-1;

if (tAlt<10) { tAlt = 10;

}

earth.setAltitude(tAlt); }

window.onkeydown = function(event) {

var mykey = event.which;

if (mykey == 38) {

moveStraight();

} else if (mykey == 40){

moveBack();

} else if (mykey == 37) {

twistLeft();

} else if (mykey==39) {

twistRight();

} else if (mykey==33){

riseUp();

} else if (mykey==34) { lowerDown();

}

////////////////////////// function toRad(tDeg){

return tDeg*(Math.PI/180);

}

function toDeg(tRad){

return tRad*(180/Math.PI);

}

function getNewPoint(tLat1,tLon1,B,D){

DR = D/6371000;

if (B<0) {

B=B+360;

}

B=360-B;

B = toRad(B);

tLat1 = toRad(tLat1);

tLon1 = toRad(tLon1); var tLat2 = Math.asin(Math.sin(tLat1) Math.cos(DR) + Math.cos(tLat1) Math.sin(DR) * Math.cos(B));

var tLon2 = tLon1 + Math.atan2(Math.sin(B)Math.sin(DR)Math.cos(tLat1),Math.cos(DR)-Math.sin(tLat1)*Math.sin(tLat2));

tLat2 = toDeg(tLat2);

tLon2 = toDeg(tLon2);

return [tLat2,tLon2];

}

When the tilt is at 80-degrees and you zoom along past a marker, the marker then reappears in the sky as you keep moving. I am going to write a script to replace the sky with my own sky, so that this won't be an issue, but it seems like something that is probably easy to fix in the source code.

Thanks again for providing this code for the world.

Jonathan