Categories: 3D Software

Wie Sie mit Blend4Web 3D Inhalte in ihre Webseite integrieren.

In diesem Artikel möchten wir ihnen 3 Methoden vorstellen, mit denen Sie Blend4Web-Inhalte in Webseiten integrieren können.

Methode Nr. 1: Eigenständige HTML-Datei

Die Möglichkeit Szenen aus Blender in eine einzelne HTML-Datei zu exportieren, gehört zu eines der interessantesten Features von Blend4Web. Eine solche Datei ist ansich eine vollständige Webseite, die mit jedem Standardbrowser geöffnet und mit allen gängigen Mitteln wie E-Mail, USB-Laufwerk/Speicherkarte etc. gemeinsam genutzt werden kann. Sie können die Seite natürlich auch online mit anderen Personen teilen. Sie können ihre dreidimensionalen Webinhalte mithilfe eines iFrames einbetten, für die Sie die Abmessungen und andere Eigenschaften wie allowfullscreen angeben können:

<iframe allowfullscreen src=“path/to/apple.html“ width=“800“ height=“500“></iframe>

Der größte Vorteil dieser Methode ist die einfache Handhabung. Blend4Web-Neulinge müssen den folgenden Schritten folgen:

Laden Sie Blend4Web von der folgenden Webseite herunter.
Exportieren Sie eine vordefinierte Szene über das Blender-Menü: Datei > Exportieren > Blend4Web.
Laden Sie die HTML-Datei auf ihrer Website hoch und betten Sie es mit einem iFrame ein.

Natürlich können Sie HTML-Dateien auch ohne Einbetten als eigenständige Webseiten verwenden.

Methode Nr. 2: Web Player + JSON

Die zweite Methode ist eine Alternative zu ersten und das Ergebnis sieht scheinbar identisch aus: 3D-Inhalte mit Steuerelementen werden in eine Webseite eingebettet.

Diese Methode zum Einbetten ist jedoch anders: Statt einer einzelnen HTML-Datei wird eine Kombination aus dem Web Player und einer separaten JSON-Datei verwendet.

<iframe allowscreen src=“path/to/webplayer.html?load=path/to/apple.json“ width=“800“ height=“500“></iframe>

Um an den Web Player zu kommen, müssen Sie das gesamte Verzeichnis blend4web/deploy/apps/webplayer mit den Web Player Dateien aus ihrem Blend4Web SDK kopieren und auf ihrer Webseite bereitstellen.

JSON-Dateien können auf die selbe Weise exportiert werden wie die HTML-Dateien Datei > Export > Blend4Web (.json). Laden Sie ihre exportierte .json-Datei auf ihre Website hoch und geben Sie den Pfad dazu mit dem Load-Attribut an. Es werden sowohl absolute als auch relative URLs unterstützt.

Weitere Informationen zu den Funktionen des Web Players finden Sie im entsprechenden Abschnitt des Benutzerhandbuchs.

Achtung: Wenn Sie versuchen, diese Anwendung lokal zu starten, wird Sie aufgrund der Same-Origin Policy nicht ausgeführt. Für das Laden und Betrachten von exportierten .json-Dateien sollten Sie den Projektmanager verwenden. Mit dem Project Manager können Sie auch produktionsreife Anwendungen auf Basis des Web Players erstellen, ohne Dateien manuell kopieren zu müssen.

Diese Methode sieht zwar etwas komplizierter aus, bietet aber mehrere Vorteile. Exportierte Szenen sind:

kleiner und können schneller geladen werden,
können auch von anderen Anwendungen als dem Standard-Web-Player verwendet werden,
ermöglichen die Nutzung der physics engine von Blend4Web,
sind vom Code des Web Players entkoppelt und unterliegen nicht der Lizenzierung, wie dies bei HTML-Dateien der Fall ist.

Methode Nr. 3: Interaktives 3D Web.

Mit der dritten Methode können wir die Webseite selber in eine interaktive 3D-Anwendung umwandeln. Der interaktive Content wird direkt in die entsprechende Website eingebettet.

Achtung: Nutzen Sie auch in diesem Arbeitschritt den Projektmanager, um einen vollständigen Satz von Anwendungsdateien zu erstellen und Sie zu ändern, anstatt alles von Grund auf neu zu erstellen.

Eine Vertiefung der letzten Methode unterlassen wir bewusst. Nach einem Klick auf den folgenden Link können Sie sich ein konkretes Anwendungsbeispiel anzeigen lassen.

3DMaster