Einführung
Mit RealityConnect Embed platzieren Sie einen live-interaktiven RealityTwin-Viewer direkt in Ihrer eigenen Webanwendung. Der Zwilling wird in einem iframe gerendert, und ein schlankes JavaScript-SDK (@prevu3d/realityconnect-embed) gibt Ihrer Seite die programmatische Kontrolle darüber – so erhalten Ihre Nutzer immersiven 3D-Kontext, ohne die bereits genutzten Werkzeuge jemals verlassen zu müssen.
Wie der Embed aufgebaut ist
Abschnitt betitelt „Wie der Embed aufgebaut ist“Einige Designentscheidungen sollten Sie kennen, bevor Sie mit der Entwicklung beginnen:
- Ein nackter Viewer, den Ihre Seite steuert. Der eingebettete Zwilling ist ein 3D-Viewer ohne integrierte Oberfläche – keine Kopfzeile, Seitenleiste, Menüs oder Symbolleisten. Ihre Anwendung besitzt den gesamten umgebenden Rahmen und steuert den Zwilling über das SDK.
- Autorisiert über die RealityConnect API. Jede Embed-Sitzung wird mit den OAuth-Anmeldedaten Ihrer Organisation autorisiert – anonymes Einbetten gibt es nicht. Ihr Backend fordert eine signierte, kurzlebige Embed-URL für einen bestimmten Zwilling an.
- Das SDK lädt und instrumentiert den Viewer. Ihre Seite übergibt diese URL an das SDK, das den iframe einfügt und einen sicheren bidirektionalen Kanal mit dem Zwilling herstellt.
- Ihre Seite steuert den Zwilling. Sobald der Viewer die Bereitschaft meldet, stehen SDK-Befehle zur Steuerung des Zwillings zur Verfügung (Navigation, Interessenpunkte, Teleportieren zu einem Objekt, Erfassen einer teilbaren Ansicht) sowie das Abonnieren des Live-Zustands der eingebetteten Szene.
- Es ist die visuelle Ebene von RealityConnect. Die RealityConnect API verbindet Ihre Systeme und autorisiert den Zugriff, während RealityConnect Embed den Zwilling rendert und ihn Ihrem Frontend-Code zur Verfügung stellt.
Wie die Teile zusammenpassen
Abschnitt betitelt „Wie die Teile zusammenpassen“Drei Komponenten arbeiten zusammen, damit eine Embed-Sitzung funktioniert:
- Ihr Backend authentifiziert sich bei der RealityConnect API mit dem Client-Credentials-Flow und fordert die API dann auf, eine kurzlebige Embed-Sitzung für einen bestimmten Zwilling zu erstellen. Dies ist der einzige Ort, an dem sich Ihr OAuth-Client-Secret befindet.
- Ihr Frontend erhält die Sitzungswerte von Ihrem Backend und übergibt sie an das SDK. Das SDK fügt einen iframe ein, der auf die signierte Embed-URL verweist, und öffnet einen sicheren
postMessage-Kanal mit ihm. - Der eingebettete Zwilling rendert die 3D-Szene, führt die von Ihrer Seite gesendeten Befehle aus und streamt den Live-Zustand zurück (ausgewähltes Objekt, aktueller Kameramodus, kodierte Ansichten und mehr).
Was der Embed bereitstellt
Abschnitt betitelt „Was der Embed bereitstellt“Das SDK bietet Ihrer Seite eine typisierte API zur Steuerung der Szene (Kameranavigation, Interessenpunkte, Objekt-Teleport, Ansichtsfreigabe, Screenshots) und zum Abonnieren des vom Zwilling zurückkommenden Live-Zustands. Die vollständige Oberfläche – Namespaces, Aktionen, Observables und Fehlercodes – ist im SDK-README dokumentiert.
Die folgende Tabelle fasst zusammen, was der Embed heute abdeckt und was nicht. Es werden regelmäßig neue Funktionen hinzugefügt; betrachten Sie dies daher als Momentaufnahme.
| Funktion | Im Embed? | Notizen |
|---|---|---|
| 3D-Szenen-Rendering | Ja | Das vollständige RealityTwin-Betrachtungserlebnis. |
| Kameranavigationsmodi | Ja | Perspektivisch, orthografisch, Photosphäre, Third-Person. |
| Interessenpunkte (ansehen, erstellen, bearbeiten) | Ja | Erstellung, Bearbeitung und Platzierung von Interessenpunkten. |
| Objektauswahl und „Teleportieren zu” | Ja | Bewegt die Kamera zu einem bestimmten Geschäftsobjekt. |
| Teilbare Ansichtslinks | Ja | Kodiert die aktuelle Kamera als kompakte Zeichenfolge und stellt sie später bei jedem Seitenaufruf wieder her. |
| Screenshots | Ja | Erfasst die aktuelle Ansicht als PNG-Bytes. |
| Live-Zustands-Abonnements | Ja | Beobachtet Auswahl, Hover, Kameramodus, Zustand des Interessenpunkt-Werkzeugs und mehr. |
| Integrierte Zwilling-Oberfläche (Menüs, Panels, Modale) | Nein | Ihre Host-Seite stellt alle Oberflächenelemente bereit. |
| Bearbeitungsfunktionen (Entwürfe, Messungen, Zonen, RealityPlan Projects, CAD-Inspektion) | Nein | Diese verbleiben in der vollständigen RealityTwin-Anwendung. |
Häufige Anwendungsfälle
Abschnitt betitelt „Häufige Anwendungsfälle“- Asset-Management- und Inspektionsplattformen, die 3D-Kontext neben ihren Datensätzen wünschen
- Virtuelle Rundgänge und eLearning-Erlebnisse
- Jedes Webprodukt, das von einem eingebetteten, navigierbaren digitalen Zwilling profitiert
Nächste Schritte
Abschnitt betitelt „Nächste Schritte“- Erste Schritte – authentifizieren, das SDK installieren und Ihren ersten eingebetteten Zwilling laden.
- RealityConnect API – die Authentifizierungs- und Datenebene hinter dem Embed.
- Live-Beispiel – eine funktionierende Vue.js-Integration, die Sie durchgängig inspizieren können.
@prevu3d/realityconnect-embed– Quellcode-Repository