Create buttons and interactivity in HTML

Hi,
This might be a dumb question since I am not very experienced with blend4web or coding.

1. I am trying to customize the html page. I want to add buttons that allow me to turn on and off objects, play animations, or switch scenes. I assume that I would have to code in HTML after it is exported form Blend4Web. In this project: https://www.blend4web.com/en/demo/oled_display/
It says that no coding was done. Then how were the buttons and logo added to the scene in blend4web?

2. If I code all the buttons in html, how should I add interactivity to the buttons to manipulate the models? Is there any good examples that I can look at?

Thank you in advance!

2. If I code all the buttons in html, how should I add interactivity to the buttons to manipulate the models? Is there any good examples that I can look at?

It was made using Blend4Web logic node system that allows to create a simple interactivity in a scene by combination of differet logic nodes. You can read about logic nodes in our documentation and find some tutorials on our youtube chanel. Buttons was created directly in Blender and then paranted to the camera.

Reply to post of user Mikhail Luzyanin
It was made using Blend4Web logic node system that allows to create a simple interactivity in a scene by combination of differet logic nodes. You can read about logic nodes in our documentation and find some tutorials on our youtube chanel. Buttons was created directly in Blender and then paranted to the camera.

Thank you for your reply, Mikhail.
Yes, I have watch several tutorials about making the button. But it seems like if I parent the button it to the camera, it will get behind the models if I zoom in and get too close to the models. But this doesn't happen in the OLED display scene. Is there any tricks to avoid that? Thank you!

Yes, I have watch several tutorials about making the button. But it seems like if I parent the button it to the camera, it will get behind the models if I zoom in and get too close to the models. But this doesn't happen in the OLED display scene. Is there any tricks to avoid that? Thank you!

There's a little trick. On the material you can find a special checkbox with name "Render Above All", so as you can see by the name this material will be rendered above all other objects. So, you can set this checkbox on your button's material and it will be always visible. You can read about it here.

Reply to post of user Mikhail Luzyanin
There's a little trick. On the material you can find a special checkbox with name "Render Above All", so as you can see by the name this material will be rendered above all other objects. So, you can set this checkbox on your button's material and it will be always visible. You can read about it here.

Wow. That's so straightforward. I'm so glad I asked you. That would have taken me forever to figure it out.

I have two more question:
1. In the helicopter scene (here), all the numbers(1,2,3,4,5) on the markers and the two expanded insets (x2 and x3) are always facing the camera when I rotate the camera. How is this achieved? I looked at the blender file and they are not anchored or meta-taged (it's weird that the anchor option is not even shown on the property panel)

2. It looks like that materials and lights are rendered differently in Cycles Render and Blend4web/browsers(Maybe I am doing something wrong). I guess it makes sense cause the engines are different. So should I just do modeling and animation in blender, and do materials and lighting solely in blend4web? I feel that it would be waste of time trying to tweak the materials in Cycles Render since it doesn't entirely carry over to blend4web.

I figured "anchor" only works for empty axis… I see why it was not showing.

Wow. That's so straightforward. I'm so glad I asked you. That would have taken me forever to figure it out.

Glad that pointed you to the right way.

I have two more question:
1. In the helicopter scene (here), all the numbers(1,2,3,4,5) on the markers and the two expanded insets (x2 and x3) are always facing the camera when I rotate the camera. How is this achieved? I looked at the blender file and they are not anchored or meta-taged (it's weird that the anchor option is not even shown on the property panel)

There's a special option on the object called Billboaring. You can enable this option on any object and this object always stay in front of you with -Y-axis.

2. It looks like that materials and lights are rendered differently in Cycles Render and Blend4web/browsers(Maybe I am doing something wrong). I guess it makes sense cause the engines are different. So should I just do modeling and animation in blender, and do materials and lighting solely in blend4web? I feel that it would be waste of time trying to tweak the materials in Cycles Render since it doesn't entirely carry over to blend4web.

To avoid errors it better for you to use nodes that showed only in Blend4Web engine mode. Some of Cycles Node Material already supported but they still in development mode, so they not recommended to use in production.

Got it! Thank you very much. This is really helpful

<a href=http://xn–h1adblgy0b9d.xn–p1ai/%D0%BF%D0%BE%D0%B4%D1%81%D1%82%D1%80%D0%B5%D0%BA%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D1%81%D1%82%D0%B2%D0%BE>отзывы на сайте</a>