Building HTML-Based User Interfaces for 3D Web Apps
Learn how you can leverage standard web technologies to create rich mobile-friendly user interfaces and website integrations.
Introduction
The template Verge3D application offers a single-page widescreen layout with a full-screen button and a preloader. Interactive elements such as buttons can be implemented as 3D objects pinned to the camera - the same applies to text boxes.
A more flexible and effective approach, however, would be to leverage the established web standards for creating user interfaces. With HTML and CSS you can build any layout for your app, making it responsive and SEO-friendly. The UI and especially text created with HTML and CSS look usually sharper than their 3D counterparts thanks to the specialized rasterisation engines of the modern web browsers. This approach will also allow you to easily mix 2D media such as images, videos and web links with WebGL content, and style your app to match the design of a website on which it will be deployed.
There are plenty of web design tools ranging from the plain text editor to full-blown what-you-see-is-what-you-get website builders. The latter can produce complete sets of HTML/CSS/JavaScript ready-to-use web pages thus allowing you to never touch any code.
Where to Add HTML and CSS
Suppose you created your application using the App Manager (with default configuration options), and named it my_awesome_app. If you look inside the my_awesome_app folder of your applications folder you'll find there my_awesome_app.html and my_awesome_app.css files that seem to be natural to start edit — but they only seem so!
In practice, you might never want to edit these files as they are auto-generated by the App Manager and may get overridden as a result of an update. A more robust way to add your own HTML/CSS to a Verge3D app would be creating a new .html file, in which the Verge3D app .html is embedded, matryoshka-style.
Quick Overview: Teapot Heater
Check out the following example in Verge3D Asset Store — Teapot Heater. All the interface is built using third-party web design software and saved as index.html (this name is not obligatory). Besides interface HTML elements, the index.html file also contains an iframe element via which the Verge3D project, teapot_heater.html, is embedded.
In Verge3D App Manager such a composite project has two launching icons that you can use to independently run either the pure Verge3D project or the assembled app:
Finally, the 2D and 3D parts are logically interconnected with HTML puzzles to handle user events.
Tutorial
In the following tutorial we'll show how to create a simple app with HTML-based UI. This app will have only 2 buttons for hiding and revealing the default cube.
We begin by creating a new project named my_awesome_app with the App Manager. Then, we will demonstrate you 3 ways of creating an additional .html file for the UI: a visual approach using a third-party webpage builder, Puzzles, and a code-based approach. Once the UI is ready, we'll make the HTML buttons operable with Puzzles.
Designer Approach
Out of several free and paid website builders we experimented with for the purpose of using in Verge3D pipeline, we recommend Webflow — an online editor that allows even an absolute no-coder to create UI for Verge3D apps with ease. Still, you might try other tools instead, such as Adobe Dreamweaver, Google Web Designer, Tumult Hype, or Pinegrow, even though they may require some knowledge of HTML/CSS from the user.
Set up a Webflow account by clicking "Get started" on their website. The required "Embed" component and the "Export Code" feature are only available to paid "Workspace plans", so you need to acquire a subscription before proceeding with this tutorial.
Log in your Webflow account, go to Dashboard and click New Project.
Select Blank Site from the templates. Fill out the name of your project and click Create project:
Now we embed our Verge3D app in this web page. On the left panel, click the upmost button with the "plus" icon (Add Elements). Locate the Embed component, and click on it (or drag it out):
Copy the following line and paste it to the editor window:
<iframe width="100%" height="100%" frameborder="0" src="my_awesome_app.html"></iframe>
This line of code assumes that we will copy the web page generated by Webflow to our application folder, so that the <iframe> element will pick up Verge3D application's main HTML file called my_awesome_app.html.
Click Save & Close. Now the Embed component is placed on the page. Ignore the 404 error notation - it'll be gone after exporting the project.
Lets make the Embed component occupy the entire page. Click on the Style button on the top right. On the Size panel, specify 100% for Width and Height (you'll have to click on the small PX buttons to switch from pixels to percentages). Also select Fixed for Position.
Let's add those two buttons. Click again the Add Elements button on the most left panel, locate the Button element and drag it out to the page.
Notice that the button won't be visible right away, due to being completely covered by the previously added Embed component. To make things right, select the newly added element in the Navigator (revealed with a button on the left panel)...
...and on the Style tab, select Fixed for element Position as we did for the Embed component. Also provide it with some spacing by setting top and left margins to 10 pixels each.
Now the button should get visible in the top left corner of the page. Double-click on it to edit its caption and change it to "Hide".
Add another button with the same procedure. Set its left margin to 80 pixels to make it appear near the "Hide" button and change its caption to "Show".
Now we need to set unique IDs for both buttons - we will be using them in Puzzles. To do it, select a button, go to the Element Settings tab and type "hide_button" in the ID field. Repeat this for the second button by assigning "show_button" to its ID.
At this stage we can generate our UI .html file and try it with the Verge3D app. Click the angle brackets button (Export Code) on the top...
...then click Prepare ZIP and finally, Download ZIP:
Locate the downloaded ZIP file and unpack its contents to the application folder, my_awesome_app.
Run/reload Verge3D App Manager - the new .html file should be displayed as an extra blue icon.
More clearly the file structure can be seen from the application page, which you can open by clicking on your application name.
Now run the assembled app by clicking on the index.html icon. You should see something like this:
Let's make the HTML buttons clickable, so that the user can hide and reveal the cube. This can easily be achieved by leveraging the HTML event puzzle used in connection with the elements IDs that we assigned in Webflow. Run the Puzzles editor and add these blocks:
Since the buttons are located in the parent .html file in which the Verge3D application is embedded, we must check the in parent doc checkbox to make them work.
That's it! Save your Puzzles and run/reload the assembled app again to check if the buttons work on the cube!
Puzzles Approach
Check out the following tutorial series:
Developer Approach
The plain text editor is still considered by many web designers to be the most powerful and flexible tool for building web pages. Even if you are not going to dive in coding, this guide may help you understand the internal structure of a web page generated by more artist-friendly tools.
You can use any text editor for editing HTML/CSS code, but it is more convenient to work if your editor supports syntax highlighting and line numbering, like Notepad++ or VS Code.
A basic HTML document we can start from can look as follows. You can just copy these contents to a new text document and save as index.html in the verge3d/applications/my_awesome_app folder. Again, the name of the file is not obligatory and we only use it everywhere for the sake of consistency.
<!DOCTYPE html>
<html>
<head>
<title>Index of My Awesome App</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta name="description" content="Put some description here - remember about SEO!">
</head>
<body>
</body>
</html>
Run/reload Verge3D App Manager - the new .html file should be displayed as an extra blue icon.
More clearly the file structure can be seen from the application page, which you can open by clicking on your application name.
Now we can add an iframe element to the document's body to embed our Verge3D app's main launching file, my_awesome_app.html:
<body>
<iframe id="my_iframe" src="my_awesome_app.html"></iframe>
</body>
If you run the assembled app from the App Manager now, it will display a small embedding of the default cube application in the top-left corner. We can make it wide-screen and border-less by in-lining some CSS:
<style>
#my_iframe {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border: 0;
}
</style>
Now let's create 2 buttons by adding 2 div elements to the body, supplied with unique id attributes for referencing in CSS and in Puzzles:
<div id="hide_button">Hide</div>
<div id="show_button">Show</div>
You won't notice them in the app though, until you make them absolutely positioned and styled with some CSS:
#hide_button, #show_button {
position: absolute;
width: 100px;
height: 30px;
background-color: DodgerBlue;
color: white;
text-align: center;
line-height: 30px;
cursor: pointer;
}
#hide_button {
left: 10px;
}
#show_button {
left: 120px;
}
That's it - now you have two HTML buttons in your app! Here is the full listing of the index.html:
<!DOCTYPE html>
<html>
<head>
<title>Index of My Awesome App</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta name="description" content="Put some description here - remember about SEO!">
<style>
#my_iframe {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border: 0;
}
#hide_button, #show_button {
position: absolute;
width: 100px;
height: 30px;
background-color: DodgerBlue;
color: white;
text-align: center;
line-height: 30px;
cursor: pointer;
}
#hide_button {
left: 10px;
}
#show_button {
left: 120px;
}
</style>
</head>
<body>
<iframe id="my_iframe" src="my_awesome_app.html"></iframe>
<div id="hide_button">Hide</div>
<div id="show_button">Show</div>
</body>
</html>
When running the assembled app from the App Manager you should see something like this:
Let's make the HTML buttons clickable, so that the user can hide and reveal the cube. This can easily be achieved by leveraging the HTML event puzzle used in connection with the elements IDs that we assigned in Webflow. Run the Puzzles editor and add these blocks:
Since the buttons are located in the parent .html file in which the Verge3D application is embedded, we must check the in parent doc checkbox to make them work.
That's it! Save your Puzzles and run/reload the assembled app again to check if the buttons work on the cube!
Annotations
Verge3D annotations are easiest way to draw informational popup elements above your 3D content. You dont need to know HTML to add them to your app. Simply use the add annotation puzzle.
You can change styling of your annotations by modifying font, shape, color, or size. See here for more info.
See Also
Check out the following video tutorial explaining how to create HTML-based user interfaces for our 3D web apps.
Got Questions?
Feel free to ask on the forums!