360° (Vollsphären) Bilder auf der eigenen Webseite

Im letzten Beitrag habe ich kurz meinen ersten Eindruck der Ricoh Theta SC geschildert. Mir selbst gefällt weder die Abhängigkeit von theta360.com noch Facebook. Selbst wenn beide Dienste die Bilder sehr schön anzeigen, gibt es mir dennoch ein ungutes Gefühl, von externen Anbietern abhängig zu sein. Wie kann man die Bilder also selbst hosten?

Nach einigem Experimentieren hab ich mich für Photo-Sphere-Viewer entschieden. Das JS ist populär und gut unterstützt, hat jedoch eine lange Liste der Abhängigkeiten. Wie das aussieht könnt Ihr auf dieser Testseite sehen.

Die Anwendung, bzw. Einbindung, in eigene Projekte ist jedoch sehr einfach. Nachdem man die Abhängigkeiten (three.js >= 0.85 | doT.js | uEvent | D.js) heruntergeladen und auf dem eigenen Webserver abgelegt hat, baut man sich eine einfache HTML-Webseite, mit folgendem Grundgerippe:

<link rel="stylesheet" href="Photo-Sphere-Viewer/dist/photo-sphere-viewer.min.css">

<script src="three.js/three.min.js"></script>
<script src="D.js/lib/D.min.js"></script>
<script src="uevent/uevent.min.js"></script>
<script src="doT/doT.min.js"></script>
<script src="Photo-Sphere-Viewer/dist/photo-sphere-viewer.min.js"></script>

<script>
  var viewer = PhotoSphereViewer({
    container: 'container-id',
    panorama: 'pfad/zum/panorama.jpg'
  });
</script>

Alles was dann noch fehlt ist im <body> ein Divider, mit der im obigen Quelltext hinterlegten id. So einfach kann es sein und die Ergebnisse sehen gut aus und haben alle Funktionen, die man sich so wünschen kann :) Vielen Dank an die Community!

 

Claus Wolf

Seit 1994 im Netz unterwegs und seit 2004 eingefleischter Mac-Nutzer. 21.5" iMac - 2.9GHz Intel Core i5, 16GB RAM, 1TB Fusion Drive HDD / 128GB iPhone 7 / 128GB iPad 9,7" (2017) / 15" MacBook Pro (Mitte 2014) in der Firma...

Das könnte Dich auch interessieren …

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.