In this article we would like to introduce you to 3D methods of integrating Blend4Web (well-suited to create 3D configurators) content into web pages.
Method No. 1: Standalone HTML file.
The ability of export scenes from Blender into a single HTML file is one of the most interesting features of Blend4Web. Such a file is in itself a complete web page that can be opened with any standard browser and shared with all common means such as email, USB drive/memory card etc. Of course you can alos share the site online with other people. You can embed your three-dimensional web content using an iFrame, for which you can specify dimensions and other properties such as allowfullscreen.
<iframe allowfullscreen src=“path/to/apple.html“ width=“800“ height=“500“></iframe>
The biggest advantage of this method is its easy handling. Blend4Web novices must follow the following steps:
Of course you can also use HTML files as standalone web pages without embedding.
Method #2: Web Player + JSON
The second method is an alternative to the first and the result seems to be identical: 3D content with controls is embedded into a web page.
However, this method of embedding is different: instead of a single HTML file, a combination of the Web Player and a separate JSON file is used.
<iframe allowscreen src=“path/to/webplayer.html?load=path/to/apple.json“ width=“800“ height=“500“></iframe>
To access the Web Player, you need to copy the entire blend4web/deploy/apps/webplayer directory with the Web Player files from your Blend4Web SDK and make them available 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 to your website and specify the path with the load attribute. Both absolute and relative URLs are supported.
For more information about the features of the Web Player, see the corresponding section of the User Guide.
Note: If you try to launch this application locally, it will not run due to the Same-Origin Policy. You should use the Project Manager to load and view exported .json files. You can also use the Project Manager to create production-ready applications based on the Web Player without having to copy files manually.
This method may look a litte more complicated, but it has several advantages. Exported scenes are:
Method #3: Interactive 3D Web.
The third method allows us to convert the web page itself into an interactive 3D application. The interactive content is embedded directly into the corresponding website.
Note: Use the Project Manager in this step to create a complete set of application files and change them instead of creating everything from scratch.
Will deliberately omit a deepening of the last method. After clicking on the following link, you can view a concrete application example.