vuframe.comDokuHilfe-Center
EnglishDeutsch

JavaScript Embed API

Offene Standards & APIs

Eingebettete Vuframe® 3D-Modelle und Smartvus mit JavaScript von Ihrer eigenen Seite aus steuern: Hotspots, Texturen, Objekte und mehr.

Mit der JavaScript Embed API spricht Ihre Webseite mit einem eingebetteten Vuframe®-Viewer. Sie senden Befehle über die Standard-Browser-Schnittstelle postMessage: Hotspots auslösen, Texturen ändern, Objekte ein- oder ausblenden, den Viewer pausieren. Sie brauchen keine Bibliothek; bauen Sie damit Ihren eigenen Konfigurator oder einen 3D-Hintergrund mit eigener Oberfläche.

Den Viewer mit JavaScript steuern ​

  1. Betten Sie Ihr 3D-Modell oder SmartVu® per iframe ein und geben Sie dem iframe eine id.
  2. Holen Sie das Fenster des iframes: const vf = document.getElementById('vuframe').contentWindow;.
  3. Senden Sie einen Befehl, zum Beispiel vf.postMessage({ method: 'vf.activate_trigger', id: 'door' }, 'https://embed.vuframe.com');.
  4. Die vollständige Liste der Methoden (vf.activate_trigger, vf.set_texture, vf.show_object, vf.hide_object, vf.pause, vf.unpause, vf.ui.list_triggers …) finden Sie in der Embed-API-Referenz.

Gut zu wissen: Die API funktioniert mit jedem Framework (React, Vue, reines HTML). Lauffähige Beispiele gibt es auf GitHub: 3D-Hintergrund und Konfigurator. Siehe auch Embed with custom HTML.