embed

Übersicht: Blend4Web


Objectives

After installation of Blend4Web it is possible to export and convert a scene into a HTML page. The second possibility is a *json* export. This gives you the opportunity to integrate the exported files into an existing website, like embedding a video. What should be noted, is discussed here.

Instructions

Tasks:
  1. Open a Blender file with a scene that you want to export.
  2. Export the scene as a json file.
  3. Add the necessary HTML elements and scripts in a HTML page.
  4. Save all the necessary files in a test folder.
  5. Start a Web server and check the result.

Preconditions

What do we need:

  1. scene exported as json file
  2. one HTML page
  3. all files from the webplayer
  4. one webserver

Scene-Export

first step:

Select the renderer: Blender

Create some objects, you can use a script from the "Low Poly" - Tutorial. For example:

Tree generator script

further processing:
 
  • In order that the trees do not hang in the air, starting with a cylinder a bottom plate can be modeled.
  • Change the existing lamp to a sun.
  • A second lamp with type Hemisphere can be added.
  • For the world, mark Render Sky and Real Sky and select a color for the horizon.

A rendered image might look like this:

/blend4web//embed-testrender.png
finally:
  • switch the renderer to: Blend4Web
  • export is similar to the html version ...
*File >> Export >> Blend4Web (.json)*

Save the file as trees.json

HTML page

Next step the json file can be embedded in any HTML page. Here is a sample page that our demonstration should suffice:

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

</body>
</html>

Save the file with a name and if it is the start-up file, then name it index.html.

Extend the HTML content

Now the webplayer will be included with an iframe. Path and name of the json file (trees.json) is given as value for the load parameter.

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

<h1>My own 3D-World</h1>
<!-- embeding the webplayer -->
<iframe
  allowfullscreen
  src="/webplayer/webplayer.html?load=../trees.json"
  width="560" height="315">
</iframe>

  </body>
</html>

Include the webplayer

The webplayer can be found in the project folder of the SDK (You still know where you have unpacked him?) and there in the subfolder deploy/apps/. Copy the entire folder to the project(test) folder.

Note: Do not use the webplayer folder in the SDK root! There are missing some important files!

We have in the Test folder now following files and folders:

project-folder
      |
      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

Start the Webserver

If you have a python installed on your system, open a shell in your project folder. There you can then start a simple webserver:

python -m http.server

In your browser, you can then enter:

http://localhost:8000

If the port 8000 is already occupied, you can start the server with an alternate port:

python -m http.server 7000

In your browser, you can then enter:

http://localhost:7000

If no system Python is available use the Python integrated in Blender. This requires that the path to the interpreter is known. How this is achieved is described in the appendix.

The result...

The disc does not rotate automaticaly?

solution:

In the HTML page append the parameter autorotate at the name of the json file. Compare with the lines above ...

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

Comments