Skip to main content

360° / Foto Hotspot-Editor

Pano360

PlatzhalterMit dem Hotspot-Editor platzierst du klickbare Punkte direkt in einem 360°-Panorama oder normalen Foto. Hotspots können Szenen öffnen, Infos zeigen oder eigenes JS ausführen.

grafik.png

Bild & View

  • Bild-URL / Bild wählen
    Wähle ein 360°-Bild (equirectangular) oder ein normales Foto. Upload über die Medienauswahl ist möglich.
  • HFOV
    „Horizontal Field of View“ – InhalteZoomstufe folgen.der Startansicht (z. B. 100).
  • Kompass (Ja/Nein)
    Blendet einen Kompass/Heading-Indikator ein.

Tipp: Das Kreuz „Hier Hotspot erstellen“ setzt einen neuen Hotspot an der angeklickten Stelle.

grafik.png

Hotspot bearbeiten

Label
Beschriftung (z. B. „Weiter“, „Info“).

Typ

  • Button – Rechteckiger Button mit Text.
  • (Weitere Typen – z. B. Icon/Point – falls in deinem Projekt aktiv – verhalten sich entsprechend.)

CSS-Klasse
Optionale Klasse zur Feinstilierung (z. B. hs-primary, eigenes Theme).

Yaw / Pitch
Exakte Ausrichtung des Hotspots (horizontale/vertikale Winkel). Diese Werte werden beim Platzieren automatisch gesetzt und können feinjustiert werden.

Zielszene (optional)
Szene, die beim Klick geöffnet wird. Leer lassen = keine Navigation (nur Popup/JS).

Farben & Stil

  • Text/Icon-Farbe
  • Hintergrund (z. B. rgba(0,0,0,.5) für halbtransparent)
  • Border-Farbe
  • Schriftgröße, Radius, Padding

Popup verwenden
Zeigt beim Klick ein kleines Popup (Titel/Label). In der Vorschau mit Shift-Klick testen.

onClick JS (optional)
Eigener JavaScript-Code, der beim Klick ausgeführt wird
(z. B. console.log('clicked'), Tracking, komplexe Logik).

Für Standard-Navigation nicht nötig – dafür reicht die Zielszene.

Editor-Shortcuts

  • Alt-Klick: onClick-JS sofort testen (im Editor).
  • Shift-Klick: Popup-Vorschau öffnen.

Verhalten in der App

  • Hotspots liegen über dem 360°/Foto und folgen der Perspektive.
  • Klick/Tap auf den Hotspot:
    1. führt onClick JS aus (falls vorhanden),
    2. öffnet optional das Popup,
    3. navigiert – wenn gesetzt – in die Zielszene.
  • Kompass und Start-HFOV werden aus den Einstellungen übernommen.

Praxis-Tipps

  • Assets: 360° equirectangular 2:1 (z. B. 4096×2048). Normale Fotos gern 1920 px Breite+.
  • Lesbarkeit: Halbtransparente Hintergründe (rgba) und ausreichender Kontrast.
  • Fokus: Wichtige Hotspots nicht zu nah am Zenith/Nadir (starke Verzerrung).
  • Mobile UX: Wenige, klare Hotspots; Abstand zwischen Hotspots für Touch-Ziele.
  • Navigation: Für „Weiter“-Ketten reicht Zielszene – JS nur bei Sonderfällen.
  • Testing: HFOV & Startblick einmal am Gerät prüfen; ggf. Yaw/Pitch leicht nachstellen.

Kurz-Workflow

  1. Bild wählen → HFOV/Kompass setzen.
  2. Im Viewer „Hier Hotspot erstellen“ klicken.
  3. Label, Typ, Zielszene (optional) und Stil einstellen.
  4. (Optional) Popup aktivieren oder onClick JS hinterlegen.
  5. Übernehmen → weitere Hotspots hinzufügen → Speichern.
Back to top