robwu01

Hi Ivan,

A iframe version can be found here as a zipped project:
….

Project’s made in Blender, and a regular Verge export.
The artist popup (div id= artist_main_list) is opened/unhidden by clicking on the topleft corner icon on the main page.
This popup contains a div (id= framelist) with a iframe containing artist_names.hmtl

Now within the html names page, when a button is clicked, the click action should hide/close the popup (artist_main_list), and tween to the camera position set in the puzzle.
See the attached screendump for the puzzle, all other code is in the puzzle as well.
If we can get the button click in the iframe html page to register, we can then add it into the rest of the puzzle logic.

I hope this makes any sense ;)

rob

p.s. A working prototype with the names list inside the index.html can be found here:
….

Ah… That simple.
Will test it asap, thanks a lot for the reply :)

Hi Marcus,

Animation for this is no different in Blender really, than in any other 3d application…
There’s the static parts, and the things you want to animate.
Just create keyframes for those things in your timeline you want to show when the model is in ‘exploded view’.
Animate in ascending blocks, so it’s a bit easier to work with in Puzzels later.
e.g. set1 = fr. 0-50, set2 = fr. 60-110, set3 = fr. 120-170 etc., these numbers are easier to remember and bug check.

Be sure to make Collections in Blender for all the areas you want ‘trigger’ in WebGL.
For our project we had the following:
– a base Collection for the static parts
– a Collection for all parts that needed to receive a material swap
– 3 Collections for each animated parts hierarchy. This way you can trigger all those elements in a Collection at the same time with puzzles.

In Puzzles you have to set up variables for all possibilities regarding animation or materials changes, and use these in the puzzle logic.
e.g. anim1_start, anim1_stop, anim2_start, anim2_stop, material1, material2 etc.

This way you can check if a variable is ‘set’ by a puzzle, and that way you can trigger something else based on that variable.
e.g. the ‘anim1_start’ variable is checked on button anim2. If set, rewind anim1 first, before starting anim2. When that is done, set the variable to ‘anim2_start’.
And same for the other animations, or the material swap.
So check is something is set, if so – do X first. If not, run immediately. Lot’s of ‘if:do’ and ‘else if:do’ statements in a puzzle piece. ;)

We linked all puzzles to HTML buttons, but you can easily use parts of the model to trigger them.

A watermarked test I did with two exploding sets can be seen here:
https://www.rowumedia.nl/clients/schroeder/index.html
Same workflow as explained above.

wow.. long post

Hope it helps,

Rob

Hi Marcus,

Forgot about this thread tbh, as we finished the project already.

You don’t have to bake anything. Just animate the ‘exploding’ on the elements hierarchy, and be sure to put all the animated connecting parts in a Collection, or Collections.

I had three in the end, one for the top part, one for the side and one for the bottom hierarchy.
In Verge puzzles you can then select each Collection and trigger the animation as a whole on all separate elements inside. Works just fine.

For the Cut/Detail inside, we had a separate non-animated model in the same scene, which is hidden on startup. A menu button would hide the animated version and show the cut through model. And vice versa.
We also had see-through material options and some more things.

Hope this helps.
And unfortunately I cannot share any models delivered by clients.

rob

Hi,

Thanks for confirming our thoughts on this, but find it hard to wrap my head around this. Not really that JavaScript savvy tbh.

This is the js script code that will trigger the modal to pop up inside our webpage when clicked on a href:

$(document).ready(function(){
    /* Get iframe video url variable */
    var url = $("#vid_id1").attr('src');
        /* Assign empty url value to stop the video playing on hide */
    $("#video01").on('hide.bs.modal', function(){
        $("#vid_id1").attr('src', '');
    });
        /* Assign the initially stored url back when modal is displayed again */
    $("#video01").on('show.bs.modal', function(){
        $("#vid_id1").attr('src', url);
    });
});

If I could just use the above somehow in my appname.js with the
function prepareExternalInterface(app) {} setup, to trigger the modal popup when clicked on the object inside Verge.

I can get the object click to work on a console log message, like in the example on that page, but am stuck atm how to add the code above with the function.

Or a way how to link a click event to the href from the object, so the javascript will be triggered from the index.hmtl page. As it would like clicking on the weblink manually.

Really would appreciate some more info on this, as I am completely stuck here.

rob