360° / Foto Hotspot-Editor

Mit 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.

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“ – Zoomstufe 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.

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.