Custom Anchors and Webplayer
24 November 2016 17:41
Hello,
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:
https://www.blend4web.com/apps/webplayer/webplayer.html
Before this:
https://www.blend4web.com/apps/code_snippets/code_snippets.html?scene=custom_anchors_main
Any help would be appreciated.
Thanks
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:
https://www.blend4web.com/apps/webplayer/webplayer.html
Before this:
https://www.blend4web.com/apps/code_snippets/code_snippets.html?scene=custom_anchors_main
Any help would be appreciated.
Thanks
24 November 2016 18:45
Hello,
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):
Besides you can pass different attributes to the webplayer (https://www.blend4web.com/doc/en/web_player.html#attributes). Alpha attribute may be useful in your case to enable transparent background![]( "smiling")
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).
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");
return;
}
// "Custom Element" anchor requires predefined HTML element
// which need to be created before data load
var custom_anc = document.createElement("iframe");
custom_anc.id = "id_predefined_in_blender";
// setting style etc
// ...
custom_anc.src = "path_to_your_webplayer/webplayer.html?load=path/to/json/anchor_scene.json";
document.body.appendChild(custom_anc);
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 (https://www.blend4web.com/doc/en/web_player.html#attributes). 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).
24 November 2016 19:01
Thank you Konstantin for the quick reply. ![]( "smiling-open-mouth")
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.![]( "confounded")
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.
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.
Blend4Web Team
https://twitter.com/AlexKowel
https://twitter.com/AlexKowel
10 August 2017 16:21
I have a similar problem.
I have followed the tutorial 'Anchors Explained. How to Set Up Annotations', but when it gets to the part where you say about modifying the HTML file, which file are you referring to exactly?
Also having successfully modified Ian Scott's excellent tutorial 'Mixing 2D HTML with a 3D Web Scene'. I have it working locally, but when it comes to deploying the result on a web page I am lost. I just cannot get my Custom Elements, which are working fine locally, to show up on-line. I think I need to call the modified java script, but I cannot figure out how. You talk about modifying the Web Player HTML file, but for us with a limited knowledge of HTML how exactly should this be done?
Assuming I have Ian Scott's example, with all the files, how can I deploy this using the wepplayer.HTML?
I have followed the tutorial 'Anchors Explained. How to Set Up Annotations', but when it gets to the part where you say about modifying the HTML file, which file are you referring to exactly?
Also having successfully modified Ian Scott's excellent tutorial 'Mixing 2D HTML with a 3D Web Scene'. I have it working locally, but when it comes to deploying the result on a web page I am lost. I just cannot get my Custom Elements, which are working fine locally, to show up on-line. I think I need to call the modified java script, but I cannot figure out how. You talk about modifying the Web Player HTML file, but for us with a limited knowledge of HTML how exactly should this be done?
Assuming I have Ian Scott's example, with all the files, how can I deploy this using the wepplayer.HTML?