Forum

Create buttons and interactivity in HTML

01 February 2017 10:59
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!
01 February 2017 16:12
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.
Blend4web and that kind of thing.
01 February 2017 17:36
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!
01 February 2017 18:24
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.
Blend4web and that kind of thing.
02 February 2017 04:13
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.
02 February 2017 04:44
I figured "anchor" only works for empty axis… I see why it was not showing.
02 February 2017 10:35
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.
Blend4web and that kind of thing.
02 February 2017 13:02
Got it! Thank you very much. This is really helpful
 
Please register or log in to leave a reply.