embed

Übersicht: Blend4Web


Lernziel

Nach der Installation kann über den Export, eine Szene in eine HTML-Seite konvertiert werden. Die zweite Möglichkeit ist ein json-Export. Damit hat man die Möglichkeit, eine exportierte Szene in eine bestehende Website einzubinden, wie es mit Videos oft praktiziert wird. Was dabei zu beachten ist, wird hier erörtert.

Handlungsanweisungen

Aufgaben:
  1. Öffne eine Blenderdatei mit einer Szene, die Du exportieren willst.
  2. Exportiere die Szene im json-Format.
  3. Füge die notwendigen HTML-Elemente und Skripte in eine HTML-Seite ein.
  4. Führe alle benötigten Dateien in einem Test-Ordner zusammen
  5. Starte einen Web-Server und schau Dir das Ergebnis an.

Vorbedingungen

Was benötigt wird:

  1. der Export als json-Datei
  2. eine HTML-Seite
  3. alle Dateien es Webplayers
  4. einen Webserver

Szene-Export

Erster Schritt:

Arbeiten mit dem Renderer: Blender

Ich habe dafür ein Script aus der Serie "Low Poly" - Serie verwendet. Siehe auch:

Script zum generieren eines Baumes

Weiter Vorarbeiten:
 
  • Damit die Bäume nicht in der Luft hängen, habe ich aus einem Zylinder eine Bodenplatte erstellt.
  • Die vorhandene Lampe auf Sonne umgestellt.
  • Eine zweite Lampe vom Typ Hemisphäre hinzugefügt.
  • Für die Welt habe ich die Checkboxen für Render Sky und Real Sky gesetzt und eine Farbe für den Horizont ausgewählt.

Ein Test-Bild sieht gerendert vielleicht so aus:

/blend4web//embed-testrender.png
Abschluss:
  • umschalten auf den Renderer: Blend4Web
  • der Export erfogt wie bei der html-Version...
*File >> Export >> Blend4Web (.json)*

Speichere die Datei z.B. unter den Namen trees.json

Eine HTMl-Seite

Die json-Datei kann nun in eine beliebige HTML-Seite eingebettet werden. Hier ist eine einfache HTML-Seite, die für unsere Demonstration ausreichen sollte:

<!DOCTYPE html>
<html lang="de">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Eingebetteter Blend4Web-Player</title>
</head>
<body>

</body>
</html>

Speichere die Datei unter einem Namen und wenn es die Startdatei ist, dann verwende index.html als Namen.

HTML erweitert

Nun wird der Webplayer mit einem iframe in die HTML-Seite eingebunden. Als Parameter load erhält der webplayer Pfad und Namen der json-Datei (trees.json):

<!DOCTYPE html>
<html lang="de">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Eingebetteter Blend4Web-Player</title>
</head>
<body>

<h1>Meine tolle 3D-Welt</h1>
<!-- Einbinden des Webplayers -->
<iframe
  allowfullscreen
  src="/webplayer/webplayer.html?load=../trees.json"
  width="560" height="315">
</iframe>

  </body>
</html>

Webplayer ins Projekt einbinden

Den Webplayer findet man im Projektordner des SDK (Du weißt noch wo Du ihn entpackt hast?) und dort im Unterordner deploy/apps/. Kopiere den kompletten Ordner in den Projekt(Test)-Ordner.

Hinweis: Nicht den Webplayer-Ordner im SDK-Root verwenden! Dort fehlen einige wichtige Dateien!

Wir haben in dem Test-Ordner nun folgend Dateien und Ordner:

projekt-ordner
      |
      o-- index.html
      |
      o-- trees.json
      |
      o-- trees.bin
      |
      o-- trees.blend
      |
      o-- webplayer
             |
             o-- template
             |      |
             |      o-- webplayer_template.html
             |
             o-- uranium.js
             |
             o-- uranium.js.mem
             |
             o-- webplayer.html
             |
             o-- webplayer.min.css
             |
             o-- webplayer.min.js

Webserver Starten

Wenn Du ein Python auf Deinem System installiert hast, öffne eine Shell und wechsle in den Projekt-Ordner. Dort kannst Du dann einen einfachen Webserver starten:

python -m http.server

Im Browser kannst Du dann eingeben:

http://localhost:8000

Wenn der Port 8000 schon belegt ist, sieht der Aufruf mit einem alternativen Port wie folgt aus:

python -m http.server 7000

Der Aufruf im Browser dann...

http://localhost:7000

Wer kein System-Python installiert hat, kann das im Blender integrierte Python verwenden. Dazu muss der Pfad zum Interpreter gefunden werden. Wie man den herausbekommt ist im Anhang beschrieben.

Das Ergebnis...

Die Scheibe dreht sich bei Dir nicht?

Lösung:

Hänge in der HTML-Seite an den Namen der json-Datei noch den Parameter autorotate an. Vergleiche die Zeile weiter oben...

<iframe
  allowfullscreen
  src="/webplayer/webplayer.html?load=../blend4web/embed/trees.json&autorotate"
  width="560" height="315">
</iframe>

Kommentare