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: führt onClick JS aus (falls vorhanden), öffnet optional das Popup , 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 

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