Hide/Show Html Div by clicking an Object in 3D Scene

22 February 2017 18:44

#15692

ktk

posts: 18

Hi there

i have 5 years of three.js/blender experience mainly targeting interactive mobile webgl sites.
i'm testing blend4web because i'm interested to simplify my workflow & so far blend4web seems
very interesting.

one of the basics things is having bidirectional communication between 2d & 3d canvas.

i'm looking for a simple demo that does the following :

- create a cube within blender/blend4web that is clickable
- on click a <div> shows up. obviously the <div> would have an ID (no annotations/anchors/positional matching etc.)
- this <div> would be completely made outside of blender/blend4web with standard html/css

that's it. i've read trough several forum post, and checked all the examples coming with blend4web
without success. i wonder why there isn't such a basic demo in the blend4web repo?

thank you in advance
kay

22 February 2017 19:46

#15695

Evgeny Rodygin

posts: 644

Hi and welcome to the forum,

Really, there is no exact example like this. But you can easily construct it from this example.

Lets assume the id of the div element is "my_div". Then the main_canvas_click callback from the mentioned tutorial can be changed in the following way.

function main_canvas_click(e) {
    var x = e.clientX;
    var y = e.clientY;

    var obj = m_scenes.pick_object(x, y);

    if (obj) {
        var elem = document.getElementById("my_div");
        elem.style.visibility = "hidden";
    }
}

The example with stones can be found inside SDK under apps_dev/tutorials/interactive_web_application

22 February 2017 21:05

#15699

ktk

posts: 18

hi evgeny

thank you very much for your fast feedback!
i'll give your version a try asap.

i just found out my own version using logic nodes with a JS callback:

1. create a new project with project manager (obviously this is important)
2. just took the basic scene an added this logic node :

3. go to project manager's edit window (where you can edit js/html/css of your project)
4. in css file add your div like

#OverlayOne {
    position:absolute;
    z-index:999;
    top: 0px;
    left:0px;
    width:800px;
    height:600px;
    background:green; 
    display:none;
}

5. in html include the div within the <body> with the generated/styled ID simply by

<div id="OverlayOne">Hello World!</div>

6. then within .js file i included :
-

var m_logic_n   = require("logic_nodes");

// importing modules
- in init_cb before load(); :

m_logic_n.append_custom_callback("showDiv", showDiv_cb);

- then added the custom function in after function load_cb:

function showDiv_cb(in_params, out_params) {
        document.getElementById("OverlayOne").style.display = "block";
    }

i think handling interaction & functions like you suggested is a little bit smarter & scaleable :)

but if we could integrate small code snippets directly within the logic node editor that would be great!
because what i like the most about blend4web - everything happens in the same environment, there is no export, dependency hell like three.js/blender workflow. allthough stuff like 2D/3D interaction is so much simpler with three.js

thank you!

22 February 2017 21:10

#15700

ktk

posts: 18

i've my myJSCallback.zip attached incl. a short demo video 3Dto2D.mp4 - have fun!

24 February 2017 20:25

#15711

ktk

posts: 18

#v2

hi evgeny

i just tested your suggestion - yes it's a lot more efficient smiling

i just have to wrap around the blend4web api & js coding/fw

here is my code to parse the scene for (3d/blender) objects & route them uniquely to specific div's.

so like this you can very easy mix the best of both worlds!

thank you for your support!

function main_canvas_click(e) {
    
    var x = e.clientX;
    var y = e.clientY;

    var obj = m_scenes.pick_object(x, y);
    
    if (obj && obj.name == "Object-1") {
        var red = document.getElementById("red");
        red.style.display = red.style.display == "block" ? "none" : "block";
    }
    
    if (obj && obj.name == "Object-2") {
        var green = document.getElementById("green");
        green.style.display = green.style.display == "block" ? "none" : "block";
    }
    
    if (obj && obj.name == "Object-3") {
        var blue = document.getElementById("blue");
        blue.style.display = blue.style.display == "block" ? "none" : "block";
    }
}

25 February 2017 16:53

#15721

Evgeny Rodygin

posts: 644

Glad it helped you.

You've almost written a tutorial on html-3d objects interaction in this thread smiling

Need to keep this link in order to provide to other users later.

09 March 2017 19:52

#15999

ktk

posts: 18

just wanted to share this post: https://www.blend4web.com/en/forums/topic/3118/ it's more or less about to go the other way round - controlling 3D space from 2D space.

07 May 2020 22:04

#21904

HD

posts: 2

Hi everyone,

I'm quiet new to Blender/Blend4Web and not a html/css/js pro.
I tried to use the tutorial on html-3d objects interaction by ktk (thanks for that!!) for my project - but it does not work yet.

I don't understand where to put the div-element. I also used the project manager and my question is: when does the 3D-Export-(blend4web)-html- file come into play? Do i put the div-element in this 3D-file or in an extra html-file? And where do I link to the css- and js-files? When I link to the css- and js-files in the 3D-hmtl-file, there only appears a gray background and a loading bar (not the 3D-model).

I hope you can help me and save my project! smiling

Forum

Hide/Show Html Div by clicking an Object in 3D Scene

Please register or log in to leave a reply.