Blog

Method #1 (Simplest): Self-Contained HTML File

The possibility to export scenes from Blender to a single HTML file is one the most exciting features of Blend4Web. Such a file is an all-sufficient web page that can be opened with any standard browser and shared through any means (via email, USB drive/memory card, cloud storage, etc). You can, of course, share it online too. Particularly, you can upload and embed it in a website using iframe for which you can set the dimensions and specify other properties such as allowfullscreen:

Where do you get the Web Player? You can copy the whole directory blend4web/deploy/apps/webplayer/ with the Web Player files from your Blend4Web SDK and deploy it on your website.

JSON files can be exported in the same way as the HTML files File > Export > Blend4Web (.json). Upload your exported .json file (with the accompanying .bin file and possible textures) to your website and specify the path to it with the load attribute. Both absolute and relative URLs are supported.

Learn more about features of the Web Player in the corresponding section of the User Manual.

Note

If you try to launch this app locally (not from a remote web server), it won't run due to the same-origin policy. For loading and viewing exported .json files we recommend using the Project Manager. With the Project Manager you can also create production-ready apps based on the Web Player without the need to copy files manually.

While this method looks a bit more complicated, it offers several benefits. Exported scenes are:

1. smaller and can be loaded faster;

2. capable to be used by programmed apps other than the standard Web Player;

3. designed to allow you to use Blend4Web's physics engine;

4. decoupled from the Web Player's code and are not subject to the licensing as it is with HTML files.

Method #3 (Customizable): Interactive 3D Web App

Finally, we can convert the web page itself into an interactive 3D application! Let's demonstrate this with a simple example: we'll place a button on this page to trigger interesting animation.

Check it out: the page content can be viewed through translucent animated balloons with volumetric highlights. Plus, there is a magical sound!

How this animation effect was created is described in this article. Now, let's look at how it was integrated with this page. This isn't any more difficult than making something similar with jQuery or the fading Flash.

Note

Once again, it is very convenient to use the Project Manager to create a full set of application files (HTML, CSS, JS) and modify them instead of creating everything from scratch.

First of all, you should link the Blend4Web JavaScript library b4w.min.js that you can copy from your SDK. The logic is coded in separate script file called example.js:

The script for this small app is very short. It starts with a module declaration and then it imports required Blend4Web modules. The app initializes a WebGL context first. Pay attention to the init parameters: div element id is supplied to canvas_container_id yet transparency is enabled with alpha:

After the loading is complete, the load_cb() callback is fired. Inside this function, we can start manipulating our 3D scene. First, we stop the armature animation because it was set to auto-play in Blender settings (our 3D artist used skeletal animation for balloons and it was convenient for him to tweak the animation outside the app).

In Closing

WebGL gives the unique opportunity to seamlessly integrate interactive 3D content with other web technologies. With Blend4Web, you can easily create such content with Blender, deploy it on web pages and combine it with any HTML elements.

I'm using <iframe allowfullscreen src="path/to/apple.html" width="800" height="500"></iframe> or method #1, how can I adjust the 3D content inside ? and how can I remove or hide the Control Panel button??

I'm using <iframe allowfullscreen src="path/to/apple.html" width="800" height="500"></iframe> or method #1, how can I adjust the 3D content inside ?

You can adjust the 3D view by placing the camera in your website in the desired position. Or may be I didn't understand your question?

and how can I remove or hide the Control Panel button??

You can do it by writing a custom application instead of using the standard Web Player. See programming tutorials on this website and the source files of the demos in your SDK to get an idea how to use the Blend4Web API.