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!
0 Kommentare