(element in front of object): issue js button in front of scene

03 April 2018 02:31
Now for the tricky part….i will have to put it all together and make it all work….
For now, thank you so much!

So…now…how do i add modules in this format
"use strict"

import b4w from "blend4web";

var m_app =;
var m_data =;
var m_scenes = b4w.scenes;
var m_geom = b4w.geometry;
var m_cfg = b4w.config;
var m_obj = b4w.objects;
var m_version = b4w.version;

to this format?
"use strict"

// register the application module
b4w.register("001-03-21_main", function(exports, require) {

// import modules used by the app
var m_app = require("app");
var m_cfg = require("config");
var m_data = require("data");
var m_preloader = require("preloader");
var m_ver = require("version");
var m_scrn = require("screenshooter");

I have to pull the code from the one with the cube project to the one that should work. The cube project has the "require" type of format. Im worried about this…
03 April 2018 11:00
I have to pull the code from the one with the cube project to the one that should work. The cube project has the "require" type of format. Im worried about this…
Better is to rewrite all modules to the first format. This is not hard, just compare two versions of simple_app in project/simple_app. Here is diff:
for js
< b4w.register("simple_app_es5", function(exports, require) {
< // import modules used by the app

> import b4w from "blend4web";
< var m_app = b4w.require("app");
< var m_cfg = b4w.require("config");
< var m_data = b4w.require("data");
< var m_preloader = b4w.require("preloader");
< var m_ver = b4w.require("version");
< var m_anim = b4w.require("animation");
< var m_cont = b4w.require("container");
< var m_mouse = b4w.require("mouse");
< var m_scenes = b4w.require("scenes");

> // import modules used by the app
> var m_app =;
> var m_cfg = b4w.config;
> var m_data =;
> var m_preloader = b4w.preloader;
> var m_ver = b4w.version;
> var m_anim = b4w.animation;
> var m_cont = b4w.container;
> var m_mouse = b4w.mouse;
> var m_scenes = b4w.scenes;
< exports.init = init;
< })
< b4w.require("simple_app_es5").init();

> init();

And for html:
< <script type="text/javascript" src="../../dist/b4w.js" b4w-offset="../projects/"></script>
< <script type="text/javascript" src="simple_app-es5.js"></script>

> <script type="module" src="simple_app.js" b4w-offset="../../.."></script>
Alexander (Blend4Web Team)
04 April 2018 07:25
Ok…..this should be the last time i need your help….promise!!! I hope not to bug you any longer!! I worked really hard yesterday and didnt get no where, so I need your magic hands one last time!

Here is the thing….
1) Im sending two projects attached here:
a) one called "sent for help" (the one with the sliders and the logic nodes);
b) and the other called 001-03-21 "the one with the file browser and the screen shooter";

2) I need help adding the file browser as is and the screen shooter to the "sent for help";
everything going ok, the file browser square (transparent because of the tip you gave me) should be on the very center behind the skeleton (I was careful trying to get right in the center…if not, i can fix it later)…

Alex….what really confused me was the jquery…i wasnt sure if thats what was preventing from everything else loading.
But i tested 001-03-21 and it loads the file browser button in a black background and also loads the screenshooter button which is red. I did that.
OH..almost forgot…when sent for help loads(it loads buttons on the right and the sliders), I think the camera closed up too much and buttons on the left dont show. The buttons show when wheeling the mouse wheel backwards. And the click to rotate doesnt work because i left as worry about that too.

3) I need the buttons on the left to load, the sliders on the right, and then the file browser button and the screenshooter button. I will finish the rest.

4) What is the easy way to frame the scene? i am still not sure where is the setting to make the camera closer or further is..

A billion thank you for everything you do for all of us over in this forum!!! Im always impressed!!! I am Brazilian and I hope you like soccer and go watch Brazil in June!! I will …in my living room!! I will be on the lookout!! Thank you!

project 1 i was able to attach. The other was big so here is a gdrive link

I hope you dont mind to get it in my drive. Thank you again.
You can upload back thru this:
04 April 2018 14:26
Hm … I did not expect such result.. I like it
Will help you today or tomorrow
Alexander (Blend4Web Team)
04 April 2018 19:15
Ok. I will be here. Thank you so much.
05 April 2018 05:45
I will be on the lookout..thank you
05 April 2018 12:17
I've just compilled two projects together. You should do your tweaks for css styles and usability.
Here is corrected project


commit f7ce13d7aa505e8bf37d58742723030e772951ea
Author: Alexander Romanov <>
Date: Thu Apr 5 12:08:46 2018 +0300


diff –git a/projects/morph_and_node_logic/morph_and_node_logic.html b/projects/morph_and_node_logic/morph_and_node_logic.html
index cd4b82c..881cb53 100644
— a/projects/morph_and_node_logic/morph_and_node_logic.html
+++ b/projects/morph_and_node_logic/morph_and_node_logic.html
@@ -18,6 +18,13 @@

<div id="main_canvas_container"></div>
+ <input id="open_btn" type='file'/>
+ <img id="blah" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAASsJTYQAAAAASUVORK5CYII=" alt="your image" />
+ <div style="position:absolute; left:800px; bottom:90px; width:135px; z-index:4;">
+ <div id="btnScreenshot" class="Button" style="position:absolute; width:600px; height:85px; right:30px;" align="center"> <img src="assets/screenshot.png" style="position:relative; top:2px; width:75px; height:75px; z-index:3;"> </div>
+ <h id="text-menu" style="top:34px;"></h>
+ </div>



commit f7ce13d7aa505e8bf37d58742723030e772951ea
Author: Alexander Romanov <>
Date: Thu Apr 5 12:08:46 2018 +0300


diff –git a/projects/morph_and_node_logic/morph_and_node_logic.js b/projects/morph_and_node_logic/morph_and_node_logic.js
index c862bcd..81713aa 100644
— a/projects/morph_and_node_logic/morph_and_node_logic.js
+++ b/projects/morph_and_node_logic/morph_and_node_logic.js
@@ -9,6 +9,7 @@ var m_geom = b4w.geometry;
var m_cfg = b4w.config;
var m_obj = b4w.objects;
var m_version = b4w.version;
+var m_scrn = b4w.screenshooter;

var DEBUG = (m_version.type() === "DEBUG");

@@ -22,7 +23,7 @@ export function init() {
autoresize: true,
assets_dds_available: !DEBUG,
assets_min50_available: !DEBUG,
- console_verbose: true
+ console_verbose: true,

@@ -48,6 +49,26 @@ function load_cb(data_id) {
var obj = m_scenes.get_object_by_name("JUST-HEAD-SPINE.001");
if (obj)
+ var open_btn = document.getElementById("open_btn");
+ open_btn.onchange = function(input) {
+ var btn =;
+ if (btn.files && btn.files[0]) {
+ var reader = new FileReader();
+ reader.onload = function (e) {
+ document.getElementById('blah')
+ .setAttribute('src',;
+ };
+ reader.readAsDataURL(btn.files[0]);
+ }
+ }
+ function takeScreenshot() {
+ m_scrn.shot("image/png",1);
+ }
+ document.getElementById("btnScreenshot").addEventListener("click", takeScreenshot);

function create_interface(obj) {


commit f7ce13d7aa505e8bf37d58742723030e772951ea
Author: Alexander Romanov <>
Date: Thu Apr 5 12:08:46 2018 +0300


diff –git a/projects/morph_and_node_logic/morph_and_node_logic.css b/projects/morph_and_node_logic/morph_and_node_logic.css
index 89ffd44..9fde9d6 100644
— a/projects/morph_and_node_logic/morph_and_node_logic.css
+++ b/projects/morph_and_node_logic/morph_and_node_logic.css
@@ -186,3 +186,21 @@ input[type=range]:focus::-moz-range-track {
input[type=range]:focus::-moz-range-thumb {
box-shadow: 0px 0px 6px 0px rgba(98, 98, 98, 1);
+ font-family: "Impact", Impact, Charcoal, sans-serif;
+ padding:10px;
+ background:#575d4d;
+ position: relative;
+ top:110px;
+ left: 650px;
+img[id="blah"] {
+ position: absolute;
+ top:110px;
+ left: 650px;
+ width: 525px;
+ height: 700px;
+ z-index: -1;
+ background-image: url("paper.gif");
\ No newline at end of file

Disabled "Render Sky" to make transparent background
Set Clipping Start to 0 for Camera
Alexander (Blend4Web Team)
15 April 2018 00:28
Thank you so much Alex…just yesterday I was able to put my hands in my system again, as I was out of the country.


It seems now I have an issue with the textures that I have to solve. Right I have textures, but before I only had materials as colors. But the problem kept happening. What i need to do is to find a way to replace the little red spots with ANYTHING, any kind of visual way of noticing…it does not have to be the red….
You see, i only need red and white. Basic colors. I dont need mix, special textures or fancy effects. Just red and white for the object, bu this keeps happening. Tell me there is a way to fix this or any ideas you may have…I have been looking all over this forum for someone with a problem similar to mine and I cant find. I have followed so many tutorials of textures and so far I cant solve this problem. I have to seek your help again…sorry.
Funny thing, if I try on "fast preview" and it doesnt happen. It only happens when I export to browser. Could you look at it please?
Color smears.PNG
I hope you still have the you sent me.

So you know what i did: i just replace the white material with a red material on those faces.
15 April 2018 12:16
I can't understand what "keeps happening" and what you want. I see that this red balls participate in shape keys. Do you want the material for that balls to be pure red? For such effect you can turn on shadeless flag for theirs material.
Alexander (Blend4Web Team)
16 April 2018 05:49
I took care of it. Thank you so much for replying. Soon i will be done with it. Thank you.
Please register or log in to leave a reply.