Dieter Petereit 9. März 2013

HTML5: Threesixty.js generiert 360-Grad-Ansichten aus Bild-Strecken

360 Grad und es wird noch heißer. Nee, ich glaube, da verwechsele ich gerade was. Was das jQuery-Plugin Threesixty.js leistet, hat nur dann etwas mit Temperatur zu tun, wenn man entsprechendes Bildmaterial verwendet. Ansonsten leistet Threesixty.js schlicht die Erstellung von 360-Grad-Ansichten, wie man sie etwa typischerweise auf den Websites der internationalen Auto-Marken vorfindet. Der Charme des Plugins liegt in seiner einfachen Handhabung.

threesixtyjs-homepage

Threesixty.js: Data-Attribute und eine Bilderstrecke

Alles, was Threesixty.js benötigt, ist jQuery und der Pfad zu einer Bilderstrecke. Im folgenden Beispiel sind es 61 Bilder, die für die Darstellung des Vexel-Juwels heran gezogen werden. Die Bilder sind entsprechend von 0 bis 61 so benannt: gem0.jpg, gem1.jpg,…, gem61.jpg. Das Bild mit dem Nullwert wird als Startpunkt genommen.

Das Div-Element platziert man an die Stelle im HTML-Dokument, an der die 360-Grad-Ansicht erscheinen soll. Unter Verwendung der Data-Attribute path und count werden die für die Darstellung wichtigen Werte direkt im HTML-Quelltext an die JavaScript-Funktion übergeben.

An JavaScript wurde für das Vexel-Juwel folgender Code benötigt:

$(document).ready(function(){
    $('.threesixty').threeSixty({
        dragDirection: 'horizontal'
    });
});

Der Function-Call kann um verschiedene Parameter erweitert werden. Im Beispiel findet lediglich dragDirection Verwendung. Dieser Parameter gibt an, auf welcher Ebene sich das Objekt drehen soll. Im Standard, so auch im Beispiels, handelt es sich um die horizontale Ebene, vertikale Drehungen sind mit dem Wert vertical einzustellen. Sowohl vertikal, wie horizontal zu drehen ist (noch) nicht möglich.

Die Bewegung wird über Vor- und Zurück-Links unter Verwendung von

$('.threesixty').nextFrame();

und

$('.threesixty').prevFrame();

gesteuert. Die Parameter draggable und useKeys fügen die Steuerung der Bewegung mittels der Pfeiltasten und mittels Ziehen und Bewegens mit der Maus hinzu. Die zunächst vorgesehene Unterstützung des Mausrades hat Entwickler Nick-Jonas wieder fallengelassen.

Threesixty.js ist ein ganz junges Projekt, liegt derzeit in Version 0.1.2 vor und kann kostenlos auf Github heruntergeladen werden. Empfehlenswert ist es natürlich, einen Preloader einzusetzen und die 3D-Ansicht nicht das erste sein zu lassen, was der Besucher auf der Website zu Gesicht bekommen soll. Man kann sich vorstellen, dass mehrere Dutzend Grafiken, speziell dann, wenn es sich nicht um so einfache, wie das Vexel-Juwel des Beispiels handelt, einige Zeit zum Laden benötigen.

Links zum Beitrag

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

4 Kommentare

  1. Die Erstellung solcher 360 Grad Bilder kann und sollte man am besten von entsprechenden Dienstleistern machen lassen. Die liefern dann auch gleich gute HTML5 Player mit. Scanmotion aus Deutschland ist z B so einer.

  2. Das ist natürlich eine gute Sache für Cross-Browsing. Die Visualisierung muss ich ja trotzdem machen um die Bilder zu haben.

  3. der hier schaut zwar nicht so schwungvoll aus hat aber eine Menge Optionen…
    https://github.com/pisi/Reel

  4. Dieses PlugIn hier hat irgendwie mehr Schwung… ^^
    http://creativeaura.github.com/threesixty-slider/

Schreibe einen Kommentar

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

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.