Interaktive Web-Visualisierung mit Auto-Tour -- 2

Job ID: 40461730

Budget: €250 – €750 EUR

Entwicklung einer interaktiven Web-Visualisierung, die das Modell ausschließlich in Kanten-/Drahtgitterdarstellung (vergleichbar mit der CREO- bzw. SolidWorks-Edge-View) auf schwarzem Hintergrund zeigt. In einer automatisch ablaufenden Kameratour werden nacheinander einzelne Baugruppen isoliert, optisch hervorgehoben (Glow) und mit einer Textbeschreibung erklärt. Der Nutzer kann jederzeit pausieren und einzelne Baugruppen per Klick selbst ansteuern.
2. Funktionale Anforderungen
2.1 Darstellung des Modells
• Das gesamte Modell wird durchgängig als Kantenmodell dargestellt: nur Konturlinien und scharfe Kanten, keine Flächen, keine Texturen, keine Schattierung.
• Hintergrund vollflächig schwarz (z. B. #000000 oder #0A0A0A).
• Linienfarbe: weiß (#FFFFFF), Linienstärke konstant und auflösungsunabhängig.
• Frei rotierbar per Maus / Touch (Orbit-Controls), Zoom über Mausrad / Pinch.
2.2 Auto-Tour-Modus (Default beim Seitenaufruf)
• Beim Laden startet automatisch eine vorgefertigte Kamerafahrt.
• Die Tour bewegt sich nacheinander von Baugruppe zu Baugruppe, hält an jeder Station für eine definierbare Dauer (Default: 5–8 Sekunden) und blendet die zugehörige Beschreibung ein.
• Beim Erreichen einer Baugruppe wird diese isoliert hervorgehoben (siehe 2.4); die übrigen Kanten werden gedimmt (z. B. 15 % Opazität).
• Sanfte Kamera-Easings (kein hartes Schneiden); empfohlen sind kubische Bézier-Pfade oder ease-in-out-Splines.
• Nach Durchlauf aller Baugruppen kehrt die Kamera zur Gesamtansicht zurück; die Tour startet (konfigurierbar) automatisch erneut oder wartet auf Nutzerinteraktion.
2.3 Interaktiver Modus (Nutzer übernimmt)
• Pausieren der Auto-Tour per Klick auf einen Pause-Button oder per Klick ins 3D-Fenster.
• Klick auf eine Baugruppe (oder Auswahl per Sidebar-Menü) zoomt direkt zu dieser Baugruppe und zeigt deren Beschreibung.
• Klick auf einen "Übersicht"-Button setzt die Kamera auf die Startansicht zurück.
• Klick auf "Tour fortsetzen" nimmt die Auto-Tour an passender Stelle wieder auf.
• Beim Hover über eine Baugruppe (Desktop) erscheint ein Tooltip mit dem Namen der Baugruppe.
2.4 Baugruppen-Highlight
• Aktive Baugruppe: Kanten in Akzentfarbe (vom Auftraggeber definiert, Default: warmes Gold #B8860B oder Petrol #0F3875) plus dezenter Glow-Effekt (Bloom-Postprocessing).
• Inaktive Baugruppen: stark reduzierte Opazität (ca. 10–20 %), weiterhin als Kontextrahmen sichtbar.
• Übergänge zwischen Zuständen weich animiert (200–400 ms).
2.5 Informations-Panel
• Festes Panel auf der rechten Seite (Desktop) bzw. unten (Mobile).
• Inhalt pro Baugruppe: Überschrift, Kurzbeschreibung (2–5 Sätze), optional 2–4 Spec-Bullets (z. B. Material, Gewicht, Funktion).
• Smooth Crossfade beim Wechsel des Inhalts.
• Inhalte werden aus einer zentralen Konfigurationsdatei (JSON oder YAML) gelesen, ohne Code-Änderung pflegbar.
2.6 Bedienelemente / UI
• Play / Pause / Skip-Forward / Skip-Backward für die Tour.
• Fortschrittsanzeige (z. B. dünne Linie am unteren Rand oder Punkte pro Baugruppe).
• Optional: Sprachumschalter DE/EN (falls Inhalte mehrsprachig gepflegt werden).
• UI in unaufdringlichem, technischem Look (Editorial / CAD-inspiriert), kein "Game-Style".
2.7 Video-Fallback
• Pre-rendered MP4 (H.264, 1080p oder 1440p, max. 30 MB) der vollständigen Auto-Tour.
• Wird automatisch ausgespielt, wenn WebGL2 nicht verfügbar ist oder das Endgerät als zu schwach erkannt wird (User-Agent + Capability-Check).
• Das Video enthält dieselben Baugruppen-Highlights und Textüberblendungen wie die interaktive Version.