Custom Anchors and Webplayer

24 November 2016 17:41

I just followed this tutorial and also asked a question to ianscott888.

What I want to do is to add the web player in the custom anchors. So to clarify, I want to load the loading page and then the 3D with my custom anchors.
Load this:
Before this:

Any help would be appreciated.

24 November 2016 18:45

you can try to use iframe as a custom anchor element and set its src parameter as path to your webplayer html page.
Something like this (modified function from the code snippet):
function init_cb(canvas_elem, success) {
    if (!success) {
        console.log("b4w init failure");

    // "Custom Element" anchor requires predefined HTML element
    // which need to be created before data load
    var custom_anc = document.createElement("iframe"); = "id_predefined_in_blender";

   // setting style etc
   // ...

    custom_anc.src = "path_to_your_webplayer/webplayer.html?load=path/to/json/anchor_scene.json";

    m_data.load(m_cfg.get_std_assets_path() + 
            "path_to_your_main_scene/custom_anchors.json", load_cb);

Besides you can pass different attributes to the webplayer ( Alpha attribute may be useful in your case to enable transparent background

Anyway using weplayer in custom anchor seems to be not the optimal solution. Could you please specify a little bit your task? Maybe it can be solved simpler way (via parenting or something like that).
Blend4Web Team - developer
24 November 2016 19:01
Thank you Konstantin for the quick reply.

So the issue is that our standard annotation requires us to create unified callous/annotations across all our graphic. So I managed to apply the same look and feel in our 3D model demo I am working on. See Custom Anchors1.png

However, this is accomplished with manual coding. So if I export the page from Blender as an HTML file, I will get the Webplayer loading page as well as the control panel but not the custom annotations and anchors. See Custom Anchors2.png

So to sum up, I want to export the .JSON file from Blender and add the loading and the control panel at the bottom of the page and add in my custom anchors JS file.

I know it is a simple thing to do, but I can't get it to work.
24 November 2016 19:31
As I understand you correctly you want to employ the standard Web Player app and create Custom Anchors inside it. To do so you should modify Web Player HTML file (apps_dev/webplayer/webplayer.html) and add your custom HTML elements inside it. Alternatively, you can modify Web Player's JS file (apps_dev/webplayer/webplayer.js), as stated in the tutorial.

After that you should build your modified Web Player App using the Project Manager and create a new Web Player-based application. This way, this new application will use Custom Anchors which you've provided on the previous phase.
Please register or log in to leave a reply.