Tutorial with button function

27 November 2018 16:01
Hi at all,

It's a first time that i want to create something with Blender + Blender4web.

To start I'd like to change a color to something ( cube , sphere, etc ) about a function button.

Ex. cube green —> press button ( in menu ) –> cube red.

I hope that's clear

( yes, i'm super newbie)
Emma ;)
27 November 2018 21:44
What kind of buttons would you like for your project?

* Buttons that are objects in the 3D scene themselves; these can be programmed with Logic Nodes, which is simpler for newbies.

* Buttons that are objects in the 3D scene themselves and parented to the camera; same as above, but look like outside buttons because they don't move with the scene. (In the examples, if you pan the camera, the button objects always stay in place.)

* Buttons that are outside the 3D scene and influence objects in the scene, such as an options panel on the side; javascript is required for these buttons.
EXAMPLE (simple, left side panel)
EXAMPLE (advanced, bottom panel)
EXAMPLE (advanced, left side panel)
28 November 2018 12:19
I'd like to focus on your 2 examples:


Is't possible to work on it ? so I'd learn what I've to do?

Emma ;)
28 November 2018 20:09
Yes, if you downloaded and extracted the CE version, you have access to most Blend4Web examples, such as the jewelry demo.

Its .blend file is "/blender/interactivity/material_change.blend" of your B4W folder.

You can also browse through all the examples conveniently by opening Blender and starting the Project Manager. Scroll down to "demos_interactivity", there is the jewelry demo: "player: material_change.json" You can start it directly by clicking the link, or open its .blend file by going to the 4th column of the table where it says "blender/interactivity/ [show] "; click on "show" to list the blend files, and then "material_change.blend".

So, now you have the jewelry demo in Blender and can do whatever you want with it and test-run it anytime with the Fast Preview button.

The things you want to do (programming buttons to change colors etc.) are done with Logic Nodes. Press SHIFT+F3 to open a Node Editor window, then the Blend4Web Logic Nodes button, then the list of Logic Node pages - there is only one, "B4WLogicNodeTree" - select it:

Now you see the Logic Tree. It is very simple:

What happens here is that the material of the three ring buttons which are parented to the camera is copied to the ring on the hand if you click on them. This is done with an "Inherit Material" node, which is one of the principal methods to change materials/colors etc.

As for the other example you're interested in, by Viscircle GmbH, of course you don't have the .blend/sources, and it's also pretty advanced. Maybe you should start with the simple things.

Since you're a total newbie and just want to change colors or move objects, let me point you to a very basic Youtube tutorial by Ian Scott which explains how to program simple object actions with Logic Nodes:

How to Move an Object Up and Down in a 3D Scene in a Web Page Using blend4web
Note: In this 2016 tutorial, the Node for selectable objects is called "Switch Select". This name has changed to just "Select", but it's the same node.

Maybe I'll add a tutorial later for changing colors via a button, step by step from the default scene.
28 November 2018 20:35
Thanks ,
I'll watch the demos right away.
Question only for curiosity.
Would you be able to do a project like the pen?
In your opinion, how much would it cost? obviously without rendering objects.
Emma ;)
28 November 2018 21:36
Would you be able to do a project like the pen?
I think so. (Although re-creating some of the effects like the rotating loop would be really difficult.) But you'll be able to do it yourself, all you need is the stubbornness to learn.

In your opinion, how much would it cost?
You'd have to ask them. IMO, probably expensive (German company). Would be cheaper to have it made by Russians - check out this thread (new software "Verge" of the ex-B4W team).

In all fairness, it appears that B4W is not being updated anymore (look around this spammy forum) and if that is the case, it will likely become obsolete when Blender 2.8 comes out because 2.8 will toss out Blender Internal render and many other things. Of course, I can't say for sure what's going on or what the future holds for this project, if any…
Please register or log in to leave a reply.