How to embed an interactive 3D model on a web page

HTML5 standard makes it possible to visualize 2D and 3D vector graphics in any web browser and in any device without the need of plugins for free. (upd. 2024)

Example of a LAI4D drawing embedded into an HTML

In this tutorial we are going to learn several methods for embedding an interactive 3D model on a web page, all of them for free, not requiring user registration and simple to configure. A basic understanding of web development is convenient but not essential.

Example of a generative 3D artwork from REIVGEN

The method to choose will depend on your expectations. This is a summary:

1. Model Viewer: General method for displaying a 3D model in glTF/GLB format. You have to provide the model file. Allows basic interactive navigation, but has many interesting options.
2. REIVGEN evolutionary configurator: Intended for displaying algorithmically generated models with an artistic purpose. The algorithms are those provided by REIVGEN so you only have to customize them which is very easy. Allows basic interactive navigation and the possibility to evolve the model.
3. LAI4D viewer/designer: It actually is an online CAD application. You can use it to create your own model or import it from different formats. Offers advanced interactive navigation and many other functions such as measuring, editing or sketch recognition.

Let’s see them in more detail.

Model Viewer

If you have purchased or created by yourself a 3D model and simply want to show it through a web page then this application is what you need. It is maintained by Google and is easy to use. It only works with a file in GLB format which is well suited for web environments. Many modern design applications are able to handle GLB files. But if your file is in another format and don’t want to install a new application for the conversion, you can also resource to an online conversion tool like Aspose that is free and works fine.

Model Viewer editor front page

Once you have your GLB file follow these steps:

1. Open https://modelviewer.dev/editor/ in your browser. It should look something like the image above.
2. Drag and drop your GLB file onto the viewer area. A progress bar will be displayed during the loading process. Once it is loaded you can orbit the model with the mouse and perform a zoom with the mouse wheel.
3. Within the application’s sidebar (at the right) click the blue button “DOWNLOAD SCENE”. The application will generate a ZIP file containing all the elements of a test website. It takes some seconds and the file should be dropped to your downloads folder.
4. Uncompress the ZIP file into a new folder to see the generated files. Among them you should find a copy of your original GLB file and an index.html file.
5. Since the index.html file makes reference to online JS libraries, and the browser, due to security constraints, cannot directly load the GLB file from your local drive, in order to run the test website you must upload it to your hosting (or Github for instance) and access to it as a normal online web page.
6. Now you can manipulate the source code of the test website or embed it into your own project through an IFRAME element. If the destination media doesn’t allow embeds you can always use an image linked to the drawing as the picture at the beginning of this article.

Model Viewer rendering of an abstract 3D model

This is a simplified tutorial but Model Viewer offers many more capabilities for configuring lights, materials, camera auto-rotation, etc. Explore the application interface and visit the documentation https://modelviewer.dev/docs/index.html to learn more.

REIVGEN evolutionary configurator

Artistic 3D models are a modern alternative to images when decorating your web content giving it a personal and sophisticated style. If your goal is to provide an aesthetic experience to your visitors with an interactive piece of generative art, but investing a minimum effort, this application clearly is an option to consider.

Page of the REIVGEN artwork Lyra

REIVGEN Studio creates the generative algorithms so you only have to customize them. The customization can take time but is extremely simple. The user only has to touch a button to indicate whether he likes the changes or not while the 3D model evolves automatically.

A configuration of the generative algorithm REEF

To prepare a customized 3D model follow these steps:

1. Open the gallery at www.reivgen.com and click on the product you like the most.
2. On the product’s page click the golden button CUSTOMIZE, what will open the product in the evolutionary configurator.
3. Touch the evolution bar within the positive half (∞) to evolve the model. If you don’t like a change then simply touch the bar within the negative half (○) to undo the evolution history.
4. When you reach a configuration you like, click on the menu button at the top-left corner.
5. Click the button “Generate link” to save your customized configuration to the REIVGEN server and get a URL pointing to it. It’s convenient to save your customized configuration to your local drive with the “Save file” menu function.
6. In order to hide the user interface controls include the URL parameter “uim=0”. The final URL should look something like this: https://reivgen.com/configurator.html?uim=0&fid=u1aacrpy
7. Now with the URL you can embed the customized 3D model through an IFRAME element.

The REIVGEN evolutionary configurator offers other interesting capabilities such as merging different configuration files or setting the visibility of UI controls, consult its manual to learn more. Although the tool can only be used for non-commercial purposes, according to their terms of services you are the owner of your customized configuration file so you could sell it.

LAI4D viewer/designer

As a CAD application, LAI4D allows to design your own 3D model based on lines, surfaces or even algorithms, as well as to save it in the cloud. How to do this is a matter of the design tutorial. For this tutorial we can use one of the examples available at the “CAD EXAMPLES” section of LAI4D.

A screen-shot of the LAI4D viewer with the menu expanded

Follow these steps to embed a drawing in a HTML page:

1. Choose one of the example drawings and click on the corresponding image link to open it. The first sample drawing is a paper airplane which is very simple and light.
2. What you see in the new browser window is the LAI4D viewer showing the opened 3D model. If you drag the mouse over the screen (or the finger over the touch-screen) the camera orientation changes. How that orientation changes depends on the “Camera mode” button at the top-right corner. The “⊕” and “⊖” buttons also at the top-right corner control the zoom. You can click them for a stepped zooming or maintain them pressed for a continuous zoom change. Use these functions until the view configuration is the desired one.
3. At the top-left corner click on the Share button. This will open a small window whose purpose is facilitating the generation of the URL for sharing the drawing using a simple HTML link that can be mailed, or an IFRAME element that can be embedded into a web page.
4. The source code shown by default is valid but we want to share the drawing with our customized view configuration so mark the “Use options” checkbox. Then mark the “Include current view definition” checkbox. The application automatically adds the IFRAME’s attributes of “width” and “height” that you can customize or remove. Now the IFRAME code is the one we want and can be copy-pasted into the source code of our HTML page.

Many much things can be done with the LAI4D viewer/designer. Find all the information you need in the LAI4D´s Reference manual.

Keep informed of LAI4D news