Layer switching

12 July 2018 16:45
Hei, im new to this forum, so sorry if this is wrong forum tab:)

I am making an website and want too switch between layers with a button within the website, but can't see to find the way to do it in nodes editor. Im using logic tab in node editor, and the button is an object. So i want: Start-> hide layer 2 -> if button is pressed > show layer 2 + hide layer 1

Is there an easy way to do this? Thanks for help
12 July 2018 18:42
Hello and welcome!

Do you mean switching between Blender Layers, or do you mean switching between "layers" (such as two separate 3D canvases) on a website?
12 July 2018 20:48
I have a 3D scene showing on website and when i press a button a layer on that scene will be visible.
12 July 2018 21:13
Oh, okay.

If you want to control the visibility of divs that are not part of the 3D canvas itself, you can only do that with the JS_callback Logic Node (i.e. custom scripting) because Logic Nodes can only control the visibility of objects within the scene, i.e. within the 3D canvas on the website, with Show/Hide Object.

So, even if your button itself is a 3D object in the scene, and is accessible with Logic Nodes, you cannot program that button to do things outside of the 3D scene with Nodes - but you can do it by calling a self-made javascript function that does it. The alternative would be to move the content of your "layer" inside the 3D scene itself - then you can manipulate it with simple Logic Nodes.
14 July 2018 00:17
Here's a simple demo project to show you how to control divs on your webpage with Nodes:


As you can see, this is simply the Blend4Web Project default scene. I only added the functionality you want (hopefully ): Clicking on the Cube (which is a 3D object and serves as the "button") will switch the visibility of two divs.


This is the .blend file of the project (it contains the Logic Node Tree): div_switch.blend
This is the .html file of the project (it contains the HTML divs): div_switch.html
This is the .js file of the project (it contains the JS_callback that does the actual switching): div_switch.js

The project was created with the B4W Project Manager ("Create New Project"). I've attached the which you can import directly ("Import Projects") in your Project Manager.

Or, if you want to recreate the project for yourself, create a new project div_switch; set the project type to "Application Type: Custom Type -> COMPILE" (because you need a .js file to work with for the callback); also, choose "Create Application Starter Files: YES", "Create Scene Starter Files: YES". You'll get a new folder "div_switch" with subfolders "assets", "blender" in your Blend4Web projects folder, so you can copy the above-linked sources into your respective folders and should end up with a working project as well.

If you need further help, let me know.
31 August 2018 03:39
I will advise you to not to give many switches as it will make the site more rigorous and it will look that the developer in need of a hurry and did not do more work on the relatability of the site. A site has to be a mix of switches and buttons and main thing is that to make user-friendly. Just look at the Avast customer support website and you will have an idea that how it can be done.
Please register or log in to leave a reply.