I created a basic html page, that loads the project file in a iframe as in numerous examples from verge3D.
As in the examples, I also have some HTML code that sets the preloader image & loader bar.
My tweaks on the logo & loader bar colors are all in the project .css file, and is working fine. This according to the Çustomizing Preloader’ section in the documentation.
What I don’t seem to get working this way, is how te hide the UI buttons etc. at start. When I load the index.html, I see the loader -and- the UI buttons etc. at the same time, before the project page is loaded.
It’s very distracting, and I looked at the examples html/code & puzzles, but cannot figure it out for now. In the examples there’s a distinct separation between the two pages while loading.
In the starter html page, add a display tag to the button div, so it won’t show on the initial load of the page: <div id="button_home" class="btn_color" style="display:none;">Home</div>
Then create a puzzle that will ‘flip’ the ‘none’ tag to ‘block’ for the div id, on loading the webgl data.
This can be done with the HTML ‘set style’ puzzle piece.
set style “display” – to “block” – for elem “button_home” – in parent doc:”checked”.