3D-Hotspots und Annotationen — das Modell erklärt sich selbst.
Ein 3D-Modell zu drehen, ist schön. Aber verstanden wird ein Produkt erst, wenn es sich erklärt: ein Punkt am Motor, ein Klick, und eine Karte erzählt, was dort passiert. Hotspots machen aus einer Ansicht eine Präsentation. Hier steht, wie sie technisch funktionieren und was sie gut macht.
Ein Hotspot ist ein Punkt im 3D-Raum, der bei jedem Bild auf den Bildschirm umgerechnet wird. Darauf sitzt ein normales HTML-Element — klickbar, gestaltbar, lesbar für Suchmaschinen und Screenreader. Gute Hotspots verschwinden hinter dem Modell, wenn der Punkt verdeckt ist, sind auf dem Handy groß genug zum Tippen und führen den Blick, statt das Modell zu überladen.
Wofür Hotspots.
- Maschinen und Anlagen: Baugruppen benennen, Funktionen erklären, Wartungspunkte zeigen (3D im Maschinenbau).
- Produkte im Shop: Materialien, Details und Besonderheiten, die ein Foto nicht zeigt.
- Medizintechnik: Aufbau eines Implantats oder Geräts Schritt für Schritt (3D für Medizintechnik).
- Immobilien: Räume, Ausstattung und Maße im Grundriss oder Modell.
- Schulung: Bedienelemente und Abläufe, die man sonst nur am echten Gerät lernt.
Wie Hotspots technisch funktionieren.
Jeder Hotspot hat eine Position im 3D-Raum, etwa „oben links am Gehäuse“. Bei jedem Bild — also etwa 60-mal pro Sekunde — wird diese Position mit der aktuellen Kamera auf Bildschirmkoordinaten umgerechnet. Das HTML-Element wird genau dorthin verschoben. Weil der Hotspot ein echtes HTML-Element ist und kein Teil der 3D-Grafik, bleibt Text scharf, lässt sich per CSS gestalten, ist anklickbar und für Suchmaschinen lesbar. Three.js bietet dafür den CSS2DRenderer, oder man rechnet selbst — das ist nur ein paar Zeilen Code.
Umsetzung in Three.js.
// HTML: <button class="hotspot" id="hs-motor" aria-label="Antrieb">1</button>
const hotspots = [
{ el: document.getElementById('hs-motor'), pos: new THREE.Vector3(0.42, 0.31, 0.10) },
];
const v = new THREE.Vector3();
function updateHotspots() {
const rect = renderer.domElement.getBoundingClientRect();
for (const h of hotspots) {
v.copy(h.pos).project(camera); // 3D -> -1..1
const x = (v.x * 0.5 + 0.5) * rect.width;
const y = (v.y * -0.5 + 0.5) * rect.height;
h.el.style.transform = `translate(-50%, -50%) translate(${x}px, ${y}px)`;
h.el.hidden = v.z > 1; // hinter der Kamera
}
}
renderer.setAnimationLoop(() => {
controls.update();
renderer.render(scene, camera);
updateHotspots();
});Die Hotspots liegen in einem Container über dem Canvas mit position:absolute; top:0; left:0. Die 3D-Positionen lassen sich in Blender mit einem leeren Objekt markieren und beim Laden aus dem Modell auslesen.
Verdeckte Punkte ausblenden.
Dreht der Besucher das Modell, wandert ein Hotspot auf die Rückseite — bleibt er sichtbar, schwebt er verwirrend vor dem Modell. Zwei Wege: Ein Raycast von der Kamera zum Hotspot prüft, ob ein Teil des Modells dazwischen liegt. Das ist genau, kostet bei vielen Hotspots aber Rechenzeit — deshalb nicht bei jedem Bild, sondern nur, wenn sich die Kamera bewegt hat. Einfacher ist ein Normalenvektor je Hotspot: Zeigt die Fläche von der Kamera weg, wird der Hotspot ausgeblendet. Für die meisten Produkte reicht das.
const ray = new THREE.Raycaster();
function isVisible(pos) {
const dir = pos.clone().sub(camera.position).normalize();
ray.set(camera.position, dir);
const hit = ray.intersectObject(model, true)[0];
return !hit || hit.distance >= camera.position.distanceTo(pos) - 0.01;
}
// nur aufrufen, wenn die Kamera sich bewegt hat (z. B. im 'change'-Event der Controls)Kamerafahrt zum Hotspot.
Ein Klick auf den Hotspot kann die Kamera sanft an die passende Stelle fahren, das Teil hervorheben und eine Infokarte öffnen. Kombiniert mit einer Explosionsansicht oder einer Scroll-Animation entsteht eine geführte Tour: Der Besucher scrollt oder klickt von Punkt zu Punkt, und das Modell zeigt jeweils das Richtige. Für die weichen Übergänge eignen sich Animationsbibliotheken wie GSAP, die Kamera-Position und Blickziel gleichzeitig animieren.
Gestaltung und Anzahl.
- Wenige, gute Punkte: Fünf bis acht Hotspots reichen fast immer. Zwanzig Punkte machen aus dem Modell ein Wimmelbild.
- Nummeriert oder mit Symbol, damit sie in einer Liste neben dem Modell wiedererkannt werden.
- Kontrast: Hotspots müssen auf hellem und dunklem Untergrund sichtbar sein — ein weißer Ring mit Schatten funktioniert fast überall.
- Kurze Texte: Überschrift und zwei Sätze. Mehr gehört auf eine Unterseite.
- Dezente Bewegung: Ein leichtes Pulsieren zeigt, dass man klicken kann — bei aktivierter Einstellung „Bewegung reduzieren“ abschalten.
Handy und Barrierefreiheit.
Auf dem Handy sind Finger größer als Mauszeiger: Die Tippfläche sollte mindestens 44 × 44 Pixel groß sein, auch wenn der sichtbare Punkt kleiner ist. Infokarten öffnen sich besser als Leiste am unteren Rand statt als Blase direkt am Punkt. Weil Hotspots echte Buttons sind, lassen sie sich mit der Tastatur erreichen und haben einen lesbaren Namen für Screenreader. Zusätzlich sollte der Inhalt aller Hotspots als normale Liste neben oder unter dem Modell stehen — für alle, die das 3D-Modell nicht bedienen können oder wollen. Mehr dazu: 3D-Websites barrierefrei.
Die einfache Alternative.
Für einfache Produktansichten ohne eigene Programmierung bietet die Web-Komponente model-viewer von Google eingebaute Hotspots: Ein Button mit Position und Blickrichtung als Attribut, fertig. Das reicht für viele Shops. Für geführte Touren, Explosionsansichten, eigene Kamerafahrten und Verknüpfungen mit Konfiguratoren ist eine eigene Umsetzung in Three.js flexibler. Vergleich der Wege: 3D-Modell auf Website einbinden.
Wenn du Unterstützung brauchst.
Ich baue interaktive Produkt- und Maschinenansichten mit Hotspots, Kamerafahrten und Explosionsansicht — die Live-Demos unten zeigen, wie das aussehen kann. Einen Überblick über alle Themen gibt die Seite 3D-Webentwicklung, Preisrahmen stehen unter 3D-Konfigurator: Kosten.
Wer das schreibt.
Ich bin Manuel Killert, Web- und 3D-Entwickler aus Quakenbrück. Ich baue interaktive 3D-Anwendungen mit Three.js und Blender — Produktkonfiguratoren, Explosionsansichten, digitale Zwillinge und Scroll-Storys — und bringe sie in WordPress und WooCommerce. Die Live-Demos unten habe ich selbst gebaut, vom Blender-Modell bis zum fertigen Viewer im Browser. Die Probleme in diesem Ratgeber kenne ich deshalb nicht aus der Theorie, sondern aus eigenen Projekten.
Nicht glauben — ausprobieren.
Alle Demos laufen live im Browser, auch auf dem Smartphone.
FAQ — 3D-Hotspots und Annotationen.
Was sind Hotspots in einem 3D-Modell?
Klickbare Punkte, die an einer Stelle des 3D-Modells haften und beim Drehen mitwandern. Ein Klick öffnet eine Erklärung, fährt die Kamera an die Stelle oder hebt ein Bauteil hervor.
Wie funktionieren Hotspots in Three.js?
Jeder Hotspot hat eine 3D-Position, die bei jedem Bild mit der Kamera auf Bildschirmkoordinaten umgerechnet wird. Ein HTML-Element wird an diese Stelle verschoben. Alternativ bietet Three.js dafür den CSS2DRenderer.
Wie blende ich Hotspots aus, die hinter dem Modell liegen?
Mit einem Raycast von der Kamera zum Hotspot, der prüft, ob ein Teil des Modells dazwischen liegt, oder einfacher mit einem Normalenvektor, der zeigt, ob die Fläche von der Kamera wegzeigt.
Wie viele Hotspots sind sinnvoll?
Fünf bis acht reichen fast immer. Mehr Punkte überladen das Modell. Ausführliche Informationen gehören auf eine eigene Seite.
Sind 3D-Hotspots barrierefrei?
Wenn sie als echte Buttons mit Namen umgesetzt sind, lassen sie sich per Tastatur und Screenreader bedienen. Zusätzlich sollte der Inhalt als normale Liste neben dem Modell stehen.
Geht das auch ohne Programmierung?
Für einfache Fälle ja, mit der Web-Komponente model-viewer von Google, die Hotspots als Attribut unterstützt. Für geführte Touren und Explosionsansichten ist Three.js flexibler.
Das bin ich – rechts im BildErzähl mir, was du zeigen willst.
Ich sage dir ehrlich, ob sich 3D für dein Vorhaben lohnt — und wenn nicht, was stattdessen mehr bringt.
Antwort meist innerhalb von 24 Stunden · hallo@manuelkillert.de