How to enable only one model at a time, when you have a different button for each model

22 June 2018 15:49

I have made this scene for a configuration, using only a node tree.
I would like to have the possibility to see only one model when I click on the miniature. Is this possible? I have a select button that shows and hides the model for each size, but you can see all of them in the same time.
I also see that if I move the mouse around, the configuration is no longer active. How can I stabilize it?

Best regards,
22 June 2018 22:37
Well, since you only want ONE model to show at a time anyway, you could simplify things by putting only ONE model in the scene and change its size/colors etc. Then you won't need to bother with Show/Hide Nodes. This also looks better because (A) the model stays in place regardless of which button you press, and (B) you can even make the size change look animated by giving the Transform Node a duration:

This is the node setup (made for THREE options, but you can easily expand it to six or more):

Since your configurator only has simple colors to switch, the colors in this example are changed with Set Shader Node Param nodes, with the params being the R/G/B values. If you would like to switch more complex materials (like metal/wood/glass), it would require a slightly different node setup with Inherit Material nodes. Ask me if you're interested.

This setup expects objects with the following names:

cube (your target model - the object that receives the size/color changes)

size_3 (the three buttons that control the size)

color_inner_3 (the three buttons that control the inner color)

color_outer_3 (the three buttons that control the outer color)

The cube must have two materials and they must be named:

cube inner color
cube outer color

They must be Node Materials with the following setup each (image shows "outer" material - to make the other one, replace "outer" with "inner"):

You MUST set the name of the RGB node correctly or the logic nodes will fail. To do this, select the RGB node, bring up the Node Panel (N) and fill in the name (as you see on the right).

(I used a Cycles Material, but you can use a B4W Material as well. It must be a node material though, so it can be switched by the engine.)
25 June 2018 11:15
Thank you very much. I am making it now using this method. It is nicer like this, indeed it was what I was trying to obtain as well, having only one model show. However the number of outside elements varied from structure to structure. Would there be a way to do it with the show/hide nodes?
25 June 2018 11:51
I have made it, I added hide object for each show action on the object. The problem with the scale was that it scaled on all axes and my model was just scaled on the x axis. I will show you the final configuration when I finish it.
25 June 2018 21:06
The problem with the scale was that it scaled on all axes and my model was just scaled on the x axis.
Wow, you just made a good point I hadn't notice before. Single axis scaling was actually added in Blend4Web 18.05, but it does not seem to be available in the Logic Nodes:

I'll add a request for this. For now, you could work around this by adding a JS_Callback that does the X scaling via API.

I'm looking forward to seeing your finished presentation!
28 June 2018 17:53
This is how I've made it. I have put it online, the site is still under construction. My problem now is that the webplayer window is not responsive for small screens. Do you happen to know a way to adapt it?
28 June 2018 21:59
My problem now is that the webplayer window is not responsive for small screens. Do you happen to know a way to adapt it?
Yes, and you have logic errors in your node tree. If you just switch through the size buttons, you will realize that button 2 and 4 are not working properly.

For the scale problem, look at your script, you start the player in an iframe with a fixed height of 900px! I found a fiddle that seems to do the job. Try this:

Put the following CSS into the head of the HMTL:
/* This element defines the size the iframe will take.
   In this example we want to have a ratio of 25:14 */
.aspect-ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56%; /* The height of the item will now be 56% of the width. */

/* Adjust the iframe so it's rendered in the outer-width and outer-height of it's parent */
.aspect-ratio iframe {
  position: absolute;
  width: 90%;
  height: 90%;
  left: 0;
  top: 0;

In the body, replace your div->iframe->/div section with the following:
<div class="aspect-ratio">
<iframe width="100%"  src="./webplayer/build/webplayer.html?load=../../../my_configurator/assets/my_configurator.json&no_social" ></iframe>

You can now tune the size with the two values that I set to 90%.

Also, something very odd about your configurator is that it starts with an empty screen! This is no good IMHO. You should definitely try to set it up so that it starts with a default configuration (like size1, color1, color1).
Please register or log in to leave a reply.