201325Mär

ThreeSixty: jQuery-Plugin für 360°-Ansichten

Fotografische Abbildungen von Objekten auf einer Website sind in der Regel zweidimensional und wenig interaktiv. Soll das Objekt von mehreren Perspektiven aus betrachtet werden können, bieten sich inzwischen verschiedene Methoden an: Neben dem Erstellen und Einbinden eines 3D-Modells per WebGL oder Flash kann in manchen Fällen auch die klassische Methode ausreichend sein. Hierbei werden die unterschiedlichen Ansichten des Objekts als Grafiken hinterlegt und dann je nach Mausinteraktionen angezeigt. Diese Pseudo-3D-Methode bewährt sich immer noch, da fotorealistische Abbildungen möglich sind und eine Rundum-Ansicht auf Basis der hinterlegten Bilder oft ausreichend ist.
Das jQuery-Plugin ThreeSixty kann in diesem Fall für die Interaktivität sorgen.

ThreeSixty - A jQuery plugin for creating draggable 360s

Das Plugin benötigt lediglich ein data-Attribut mit dem Dateipfad und einen Aufruf, in dem die Mausrichtung angegeben wird:

  • HTML:
  • <div class="threesixty" data-path="assets/img/src/gem{index}.JPG" data-count="61"></div>
  •  
  • jQuery:
  • $('.threesixty').threeSixty({
  • dragDirection: 'horizontal'
  • });

Anschließend lässt sich das Pseudo-3D-Objekt virtuell rotieren. Das Beispiel auf der Website dürfte die Funktionalität verdeutlichen.