In letzter Zeit habe ich sehr viel mit Three.js herumexperimentiert, aber ich habe es nie geschafft zumindest mal einen Teil der Experimente hier zu veröffentlichen.
Das wollte ich ändern und herausgekommen ist dabei „Where am i“. Im Prinzip eine sehr primitive Variante von Google Earth, umgesetzt mit Threejs und OpenStreetMap.
Mit Hilfe von „Where am i“ könnt ihr euch anzeigen lassen wo ihr gerade auf der Erde seid. Dazu stehen euch drei Methoden zur Auswahl.
Bei der ersten Methode („position“) liefert euch der Browser (ihr müsst ggf. zustimmen das der Browser euren Standort abfragen darf) automatisch die Daten um zu bestimmen wo ihr euch befindet.
Bei der zweiten Methode („name“) könnt ihr eine Stadt oder einen Ort angeben und OpenStreetMap liefert dann die entsprechenden Daten.
Und bei der dritten Methode („latitude & longitude“) könnt ihr euch per Eingabe von Breiten- und Längengrad eure Position auf der Erde anzeigen lassen.
Ihr könnt die Anwendung direkt hier starten, oder ihr öffnet „Where am i“ in einem neuen Browser-Fenster. Besonders zu empfehlen für Mobile User/Touch Devices!
Und hier noch ein paar kurze Infos zur Umsetzung.
Die meisten der hier eingesetzten Texturen bekommt ihr auf „Planet Texture Map Collection“. Eine kleine aber feine und vor allem kostenlose Kollektion an guten Texturen für Planeten. Neben der üblichen ColorMap bekommt ihr hier auch noch BumpMap und SpecularMap mit dazu. Perfekt also für den Einsatz mit Three.js.
An die Daten von OpenStreetMap gelangt ihr wie folgt.
Um an Latitude und Longitude zu kommen per z.B. Städtename benutze ich diese Funktion hier:
function geocode( location ) {
var geocode = 'http://nominatim.openstreetmap.org/search/' + encodeURI( location ) + '?format=json&polygon=1&addressdetails=1';
$.getJSON( geocode, function( data ) {
var lat = parseFloat( data[ 0 ].lat );
var lon = parseFloat( data[ 0 ].lon );
console.log( lat, lon );
} );
};
Und umgekehrt funktioniert das auch. Nämlich mit dieser kleinen Funktion:
function geocodeReverse( lat, lon ) {
var geocode = 'http://nominatim.openstreetmap.org/reverse?format=json&lat=' + lat + '&lon=' + lon + '&zoom=18&addressdetails=1';
$.getJSON( geocode, function( data ) {
var city = data.address.city;
console.log( city );
} );
};
Details dazu kann man sich hier durchlesen. Eine wirklich sehr gute Anleitung mit vielen Beispielen.
Wie ihr am Dollarzeichen sicher schon erkannt habt braucht ihr hierfür jQuery. Mit jQuery ist es einfach super komfortabel um an das JSON mit den Daten zu gelangen.
Und hier gibt es die Anleitung (mit Beispiel) wie ihr mit getCurrentPosition an die Positionsdaten des Clients/Device gelangt.
Die Umrechnung der Koordinaten von Breiten- und Längengrad in ein Sphärisches Koordinaten System erfolgt mit dieser Funktion hier:
function cartesianToSpherical( radius, lat, lon ) {
var phi = deg2rad( 90 - lat );
var theta = deg2rad( lon + 180 );
var x = -( radius * Math.sin( phi ) * Math.cos( theta ) );
var z = ( radius * Math.sin( phi ) * Math.sin( theta ) );
var y = ( radius * Math.cos( phi ) );
return new THREE.Vector3( x, y, z );
};
function deg2rad( degAngle ) {
return ( degAngle * Math.PI ) / 180;
};
Mehr dazu erfahrt ihr hier.
Und hier noch ein paar weitere sehr nützliche Links.
Wenn ihr euch für den Glow-Effekt um die Erde interessiert, dann schaut mal hier vorbei.
Und hier gibt es noch ein sehr gutes Beispiel wie ihr eine Sphere so drehen könnt, dass eine ausgewählte Koordinate auf der Sphere in Richtung der Kamera zeigt.
Die Animationen sind mit TwennLite von GreenSock umgesetzt.
