Planen Sie, einen 3D-Anatomiemodell-Viewer zu Ihrer Website, App oder LMS hinzuzufügen? Dann fragen Sie sich wahrscheinlich, wie schwierig der Integrationsprozess sein wird.

Viele Teams gehen davon aus, dass die Einbettung interaktiver 3D-Inhalte lange Zeiträume und die Umgestaltung bestehender Seiten erfordert. In Wirklichkeit kann ein professioneller 3D-Viewer durch einfache iframe-Integration mit minimalem technischen Aufwand bereitgestellt werden.

In diesem Leitfaden erfahren Sie, wie ein 3D-Viewer funktioniert, was er enthält und warum er bei den Benutzern so beliebt ist.

Was ist ein einbettbarer 3D-Viewer?

Eine einbettbarer 3D-Viewer ist eine interaktive 3D-Anwendung, die über einen iframe direkt in Ihre Website oder Anwendung integriert werden kann.

Es ermöglicht Nutzern, 3D-Modelle innerhalb Ihrer bestehenden Plattform zu erkunden. Das bedeutet, dass Sie die Nutzer nicht auf eine andere Website oder App umleiten müssen.

Im Gegensatz zu Bildern oder Videos bieten iframe-Module einen 360-Grad-Überblick über eine Struktur oder einen Prozess, der vollständig vom Benutzer gesteuert wird und es ihm ermöglicht, den Inhalt in seinem eigenen Tempo zu erforschen.

Mark K., Leiter der Geschäftsentwicklung bei VOKA

Für medizinische und pädagogische Plattformen ist dies eine einfache Möglichkeit, interaktive Anatomie- und Pathologieinhalte ohne komplexe Entwicklung hinzuzufügen. So können die Nutzer in Echtzeit mit dem Modell interagieren: es drehen, heranzoomen und Strukturen direkt auf der Seite untersuchen.

So funktioniert der iframe von VOKA

Mit unserer iframe-Lösung lassen sich fortschrittliche medizinische 3D-Inhalte einfach bereitstellen, während Kunden die volle Kontrolle über Hosting und Leistung haben.

Im Gegensatz zu vielen konkurrierenden Lösungen, die auf kontinuierlichen API-Zugang oder externes Streaming angewiesen sind, bietet VOKA ein komplettes, eigenständiges Paket, bei dem der Kunde alle erforderlichen Dateien erhält und sie auf seiner eigenen Infrastruktur hostet.

In der Praxis fungiert der iframe als einfaches Anzeigefenster auf Ihrer Website, während der interaktive 3D-Viewer selbst aus den auf Ihrem Server gespeicherten Dateien läuft.

Warum ist es effizient? Weil es keine Anbieterbindung oder Abhängigkeit von externen Diensten nach der Lieferung gibt.

Hier sehen Sie, wie der Integrationsprozess mit VOKA aussieht.

Schritt 1. Wir bauen die interaktive 3D-Szene

Bevor ein 3D-Viewer in Betrieb gehen kann, braucht man die 3D-Inhalte selbst.

Es gibt zwei Möglichkeiten: Sie können ein einzelnes Modell oder ein Themenpaket mit mehreren Modellen wählen.

Wir empfehlen Ihnen, die umfangreiche Bibliothek von VOKA mit vorgefertigten 3D-Modellen zu durchstöbern oder, falls nötig, diese zu nutzen, Anfordern eines benutzerdefinierten Assets zugeschnitten auf Ihre Bedürfnisse.

Sobald der 3D-Inhalt ausgewählt ist, bereiten wir eine Szene (z. B. ein Modell des menschlichen Herzens oder ein chirurgisches Werkzeug) mit Unity für die reibungslose webbasierte Nutzung vor.

Der Viewer verfügt über integrierte Werkzeuge, mit denen der Benutzer sofort mit dem Modell interagieren kann:

  • Interaktive Steuerung: 360° drehen, ein- und auszoomen, Strukturen isolieren oder ausblenden

  • 2D- und 3D-Stiftwerkzeuge zum direkten Zeichnen auf dem Modell

  • Sezieren zur Darstellung der inneren Anatomie und Pathologie

  • Farbliche Hervorhebung, um die Aufmerksamkeit auf ausgewählte Teile zu lenken

Wenn Sie möchten, dass der Viewer an den Stil Ihrer Plattform angepasst wird, ist auch eine zusätzliche Anpassung möglich:

  • Benutzerdefinierte Hintergründe

  • Markenfarben und Schriftarten

  • Heller oder dunkler Modus

So können Sie die Markenidentität über alle Plattformen hinweg aufrechterhalten.

Schritt 2. Wir exportieren es als WebGL-Paket

Sobald die Szene fertig ist, wird sie als WebGL-Build exportiert.

WebGL ist eine Browsertechnologie, mit der hochleistungsfähige 3D-Grafiken direkt in modernen Browsern ausgeführt werden können, ohne dass die Benutzer Software oder Plugins installieren müssen.

Das endgültige Paket umfasst in der Regel Folgendes:

  • Optimierte 3D-Modelle

  • Materialien und Texturen

  • JSON-Konfigurationsdateien

  • Browser-kompatible Build-Dateien

  • HTML-Startseite

Alle Dateien sind für reibungsloses Laden und plattformübergreifende Kompatibilität vorbereitet.

Schritt 3. Sie hosten die Dateien auf Ihrem Server

Wir senden das fertige Paket dann an Ihr Team.

Je nach Plattform kann die Lieferung Web-, Desktop- oder mobilfähige Dateien umfassen.

  • Web: läuft in Chrome, Safari, Firefox und Edge

  • Desktop: Windows (.exe, .dll) und macOS (.app, .dylib, Xcode-Projekt)

  • Mobil:iOS (Xcode-Projekt) und Android (.apk, .aab, Android Studio-Projekt mit .so-Bibliotheken)

Ihre Entwickler erhalten die Dateien und laden sie auf Ihre eigene Hosting-Umgebung, Ihren Cloud-Speicher oder Ihre interne Infrastruktur hoch. So haben Sie die volle Kontrolle über Bereitstellung, Betriebszeit und Zugriffsmanagement.

Im Gegensatz zu vielen Viewer-Plattformen von Drittanbietern sind Ihre Inhalte nicht von einem externen Server eines Anbieters abhängig.

Schritt 4. Sie fügen einen iframe zu Ihrer Seite hinzu

Nachdem Sie die Dateien gehostet haben, können Sie den Viewer über einen Standard-iframe in jede Website, Anwendung, jedes LMS oder Portal einbetten.

Das HTML-Snippet verweist auf die gehostete Viewer-Seite, so dass sie innerhalb Ihrer Plattform angezeigt werden kann.

Ein einfaches Beispiel sieht wie folgt aus:

Ein Codeschnipsel, der ein HTML-iframe-Element mit folgenden Attributen zeigt: src ist auf eine Platzhalter-URL gesetzt, die Breite beträgt 100%, die Höhe 700, der Rahmen ist auf 0 gesetzt und die Eigenschaften allowfullscreen und lazy loading sind enthalten.

Falls erforderlich, kann das VOKA-Team eine schrittweise Anleitung geben, damit alles richtig funktioniert.

Schritt 5. Nutzer interagieren direkt auf Ihrer Plattform

Einmal eingebettet, können die Nutzer auf das interaktive 3D-Erlebnis zugreifen, ohne Ihre Plattform zu verlassen.

Es ist nicht nötig, Software herunterzuladen, eine separate Anwendung zu öffnen oder die Registerkarten zu wechseln. Der 3D-Viewer erscheint als nahtloser Teil Ihrer digitalen Umgebung.

Sind Sie bereit, einen 3D-Viewer auf Ihrer Plattform einzuführen?

Sprechen wir

Wie schwierig ist die Integration von iframe?

Es ist viel einfacher, als die Unternehmen erwarten.

Der 3D-Viewer funktioniert als eigenständiges Modul, das direkt in Ihre Plattform integriert werden kann. Ihre aktuelle Website- oder App-Struktur bleibt intakt, während der 3D-Inhalt als neuer Abschnitt hinzugefügt wird.

Was wird benötigt?

Um loszulegen, brauchen die Teams nur ein paar grundlegende Elemente:

  • Eine Stelle auf der Seite, an der der Betrachter erscheinen soll

  • Der von VOKA bereitgestellte iframe-Einbettungscode

  • Bevorzugte Abmessungen des Betrachters (Breite und Höhe)

  • Grundlegendes Seitenstyling zur Anpassung an Ihr Layout und responsives Design

Bei vielen Websites kann dies als Teil einer normalen Inhaltsaktualisierung gehandhabt werden.

Was nicht gebraucht wird

Ein weit verbreiteter Irrglaube ist, dass das Hinzufügen von 3D-Funktionen ein großes technisches Projekt erfordert. In der Praxis sind die meisten Iframe-Integrationen nicht erforderlich:

  • Erstellen eines benutzerdefinierten 3D-Viewers von Grund auf

  • Entwicklung einer Rendering-Engine oder eines Grafiksystems

  • Neuaufbau der Struktur Ihrer Website

  • Start eines umfangreichen Backend-Entwicklungsprojekts

  • Erstellung spezifischer mobiler oder Desktop-Anwendungen

Da der Viewer bereits erstellt und optimiert ist, entfällt für Ihr Team der zeitaufwändigste Teil der individuellen Entwicklung.

Anstatt die Technologie zu entwickeln, integrieren Sie einfach eine bestehende Lösung in Ihre Plattform.

Warum Sie die iframe-Integration in Betracht ziehen sollten

Die Iframe-Integration beseitigt viele häufige Hindernisse, die Projekte verlangsamen. Hier sind einige der Hauptgründe, warum sich Teams für diesen Ansatz entscheiden.

Schnellste Startoption

Die Einbindung eines 3D-Viewers über iframe verkürzt die Zeitspanne und hilft den Teams, schneller voranzukommen.

Es besteht keine Notwendigkeit, ein benutzerdefiniertes Frontend zu erstellen oder einen neuen Produktfluss von Grund auf zu entwickeln. Sobald die Dateien gehostet sind, kann der Viewer mit einem einfachen Einbettungscode hinzugefügt werden.

Wenn es also auf Geschwindigkeit ankommt, ist der iframe der beste erste Schritt.

Geringster Entwicklungsaufwand

Der größte Teil der technischen Arbeit ist bereits vor der Auslieferung erledigt.

Ihr Team muss keine 3D-Engine erstellen, keine Viewer-Steuerung entwickeln und keine Rendering-Probleme lösen.

Zur Implementierung muss der Viewer lediglich auf einer Seite platziert und die Layout-Einstellungen angepasst werden. Dies verringert den Druck auf die internen Entwickler.

Integration mit Ihrer bestehenden Plattform

Eine Hand hält ein Mobiltelefon, auf dem ein Lehrartikel mit einem interaktiven 3D-Viewer angezeigt wird, der ein detailliertes Zellmodell mit Steuerelementen für Farben, Teile und Werkzeuge zeigt.

Iframe ist so konzipiert, dass es sich in die Systeme einfügt, die Sie bereits verwenden. Er kann zu Websites, Apps, Lernplattformen, internen Portalen und Produktseiten hinzugefügt werden.

Sie müssen Ihre aktuelle Plattform nicht umbauen, um Platz für 3D-Inhalte zu schaffen. Der Betrachter erscheint als Teil der Seite und bleibt technisch getrennt im Hintergrund.

Später skalierbar

Wenn Sie mit einem iframe beginnen, schränken Sie Ihre zukünftigen Möglichkeiten nicht ein.

Viele Unternehmen beginnen mit einem einfachen eingebetteten Viewer und erweitern ihn später auf der Grundlage von Nutzerfeedback und Unternehmenszielen. Sie können im Laufe der Zeit weitere Modelle hinzufügen und neue Seiten erstellen.

Auf diese Weise können Sie klein anfangen und bei Bedarf skalieren. Das ist ein flexibler Weg nach vorn.

Ideal vor einer tieferen kundenspezifischen Integration

Nicht jedes Unternehmen benötigt von Anfang an eine vollständig maßgeschneiderte Lösung.

Die Iframe-Integration bietet Ihnen eine schnelle Möglichkeit, zunächst zu starten, zu lernen, wie Benutzer mit den Inhalten interagieren, und zu verstehen, welche Funktionen am wichtigsten sind. Sie senkt das Risiko, bevor Sie in tiefere technische Arbeiten investieren.

Wie verschiedene Teams 3D-Viewer verwenden

Interaktive 3D-Inhalte können in vielen Bereichen nützlich sein, in denen komplexe Informationen klar erklärt werden müssen. Im Folgenden finden Sie einige der häufigsten Verwendungszwecke unseres einbettbaren 3D-Viewers für Entwickler in der Medizintechnik.

Bildungsplattformen (LMS)

Universitäten, Schulungszentren und eLearning-Plattformen binden unseren 3D-Anatomie-Viewer ein, um den Unterricht anschaulicher und interessanter zu gestalten.

Die Schüler können die Modelle drehen, die Anatomie Schicht für Schicht erkunden und in ihrem eigenen Tempo lernen. Im Vergleich zu statischen Diagrammen oder Lehrbüchern verbessert dieses Format Anatomie lernen.

Kliniken und Gesundheitsdienstleister

Kliniken fügen unseren 3D-Viewer in Websites oder Patientenportale ein, um Diagnosen und Behandlungen anschaulicher zu erklären.

Menschen verstehen visuelle Erklärungen oft schneller als schriftliche Beschreibungen allein. Dies kann die Patientenkommunikation und vor der Konsultation oder Behandlung Vertrauen aufbauen.

Marketing und Kommunikation

Interaktive 3D-Inhalte helfen Marketingteams bei der Erstellung aussagekräftiger Landing Pages und Produktpräsentationen.

Anstelle einfacher Bilder können Unternehmen Geräte, Anatomie oder Pathologien dreidimensional darstellen. Interaktive Elemente regen die Besucher dazu an, mehr Zeit auf den Seiten zu verbringen, was die Kampagnenleistung und die Verweildauer verbessert.

Außerdem können Teams den 3D-Viewer in Plattformen einbetten und Präsentationsmaterial für Werbeveranstaltungen um Aufmerksamkeit zu erregen und Produkte ohne physische Prototypen zu demonstrieren.

Medizinische Blogger und Verleger

Ersteller von Inhalten können unseren 3D-Viewer nutzen, um Artikel informativer und einprägsamer zu gestalten.

Die Leser können das Thema in 3D innerhalb der Seite erkunden. Dies eignet sich besonders gut für Erklärungen zur Anatomie, zur Gesundheitserziehung und für medizinische Nachrichten.

Und seien wir ehrlich, nicht jeder Artikel hat einen eingebetteten Iframe, so dass dies auch eine großartige Möglichkeit ist, sich online abzuheben.

Schlussfolgerung

Die Einbettung eines 3D-Modellbetrachters ist kein komplexes technisches Projekt mehr. Mit einem iframe können Sie interaktive medizinische Inhalte hinzufügen, ohne Ihre bestehende Plattform umzubauen.

Dies ist ein praktischer Weg, um komplexe Informationen leichter verständlich zu machen, die Benutzerinteraktion zu verbessern und das Gesamterlebnis Ihres digitalen Produkts zu steigern.

Wenn Sie Ihren nächsten Schritt planen, ist die entscheidende Frage nicht, ob“ Sie 3D einsetzen sollten, sondern wie schnell Sie es in Ihre Plattform einführen wollen. Sind Sie bereit für den nächsten Schritt? Kontaktieren Sie das VOKA-Team, und wir werden Ihnen helfen, sofort loszulegen!

FAQ

1. Wie bindet man einen 3D-Modellbetrachter in eine Website ein?

Normalerweise betten Sie einen 3D-Modellbetrachter mit einem einfachen Iframe-Code ein. Sobald der Viewer gehostet wird, fügen Sie den Iframe-Code einfach in die Seite ein, auf der das 3D-Modell erscheinen soll. Sie müssen Ihre Website nicht neu aufbauen.

2. Kann ich einen 3D-Modellbetrachter in jedem Browser verwenden?

Ja, unser 3D-Viewer basiert auf WebGL und funktioniert in allen gängigen Browsern wie Chrome, Safari, Firefox und Edge. Sie laufen auch auf mobilen Geräten, solange der Browser auf dem neuesten Stand ist.

3. Brauche ich Programmierkenntnisse, um einen 3D-Modellbetrachter einzubinden?

Einfache HTML-Kenntnisse reichen in der Regel aus. In den meisten Fällen müssen Sie nur ein Iframe-Snippet kopieren und in Ihre Website oder Ihr CMS einfügen. Es ist keine fortgeschrittene Entwicklung erforderlich.

4. Bieten Sie laufenden Support für den 3D-Viewer an?

Wir stellen dem Kunden das komplette Viewer-Paket zur Verfügung, d. h. es gibt kein Abonnement und keine Bindung an einen bestimmten Anbieter. Sobald die Dateien geliefert und implementiert sind, läuft die Lösung unabhängig auf Ihrer Seite. Gleichzeitig unterstützen wir die Ersteinrichtung durch klare Installations- und Integrationsanweisungen.

5. Kann ich einen 3D-Viewer zu WordPress oder Squarespace hinzufügen?

Ja. Wenn Ihre Plattform benutzerdefinierte HTML- oder Einbettungsblöcke zulässt, kann der Viewer normalerweise mit einem Standard-iframe-Code hinzugefügt werden. Beliebte Website-Baukästen wie WordPress und Squarespace unterstützen diese Einrichtung in der Regel.