online 3d model viewer

What is an online 3D model viewer?

Catégorie blogGlossary

An online 3D model viewer is a web-based tool that allows users to view 3D objects directly in a browser.

This tool creates customer value and provides a powerful, action-oriented demonstration with step-by-step annotations, animations and specific camera views. This tool is much more informative than static images or videos, as sales experts can add text, images, videos and links to data sheets to enhance them. This viewer does not require any software or download to use because it is integrated directly into the browser.

In addition, with this ideal tool, you can boost your ROI from selling your product online, especially in the B2B products business where it is often harder for the customer to completely understand the showcased products.

Click here for concrete use cases from companies using 3D model viewers


What is the purpose of an online 3D model viewer?

As producers of digital content, we are always searching for new and improved ways to engage with our audience and push the boundaries of what is possible with digital experiences that go beyond basic model viewing. In order to achieve the maximum possible level of customer satisfaction and engagement, it is our mission to design experiences that are unobtrusive, easy to use, and do not need an in-depth understanding of the underlying technology.

A model viewer’s primary purpose is to make it simple and quick to publish 3D content to the web by using only a few lines of HTML code. The feature, which was initially made available in Chrome 72 in July 2019, allows users to view 3D content in the browser as well as on mobile devices. This technology has developed to the point that it can now provide full augmented reality experiences on both mobile devices and desktop computers.

Here is an example of a 3D model viewer that shows how easy it is to navigate:

Click here to learn how to create your own 3D model viewer


Where and how you can use a 3D model viewer?

There are many ways to use a 3D model viewer. Of course, the main use is to show a 3D version of a product on a web page. Once on a web page, its usefulness is endless: virtual showroom, virtual demonstrations, product applications, landing pages, etc.

Here is how Fournier Industries integrated a 3D viewer of their Rotary press on their web platform:


An online 3D model viewer can also be useful for design services such as 3D printing and design, where it is possible to simulate and order industrial and automated equipment directly in your browser. In addition, a 3D model viewer can be useful for supply chain collaboration, where engineers and marketers can now both rely on a visualization to facilitate their work.


How can a 3D viewer be integrated into a browser?

The easiest way to view a 3D viewer on a web page is to embed it in an iFrame. An iFrame is a frame that displays an HTML page inside another page.

Here is a tutorial on how to embed your 3D viewer on your website with an iframe by following a few easy steps:

What are the features and utility of an online 3D viewer? 

There are a handful of features to help you better interact with the model. With Visao’s online 3D viewer, you can use arrows to access different positions of the product, you can scroll, zoom, use the annotation tool and the augmented reality feature, to name a few.

Here, you can use the right button for rotation, simultaneous left and right click for translation and the scrollwheel for zooming.

Also, with the one-click sharing function, you can get a unique web address URL of your design, and have the link send easily to anyone you want to share.

Learn how to integrate a 3D viewer on WordPress

All of the features mentioned above allow the user to have a much more interesting and interactive experience than with a photo or pdf brochure. This creates greater retention, so the consumer will spend more time using the platforms displaying your 3D model, thus creating a better understanding. That said, all of these features make them feel like they are in charge of the whole experience while providing a certain level of convenience, sometimes even better than buying in-store. This way, customers can study everything carefully before making their own choice and make a decision without any pressure or influence from a representative or salesperson, which is a plus.

What is a Web Component and can it be used to embed a 3D viewer?

A Web Component is a collection of markup languages known as HTML, JavaScript, and CSS that has been compressed into a file that has the capability of inserting itself into the Document Object Model (DOM). This gives the Web Component the ability to function in the same manner as if it were a native HTML tag. It can thus be used to embed a 3D viewer in a browser.

When the component is added, it makes use of something called the Shadow DOM, which can be thought of as an independent HTML document that is positioned within the context of a parent HTML document. This shadow DOM contains all of the essential references to the JS and CSS that are required for it to function correctly without any participation from the developer. Click here for more information on Web Components.


What type of file should I use to upload a 3D model online?

There are different types of files that support 3D models. The most common, and the one used at Visao for importing 3D models, is the Step file. The Step file can be exported from any CAD program, making it useful for cross-platform collaboration. Here is an article for more details on the Step file.

The OBJ file (.obj) can also be used to create an online 3D viewer, as it contains all the information about the geometry of the 3D object PLUS the textures and color data (unlike the Step file). In fact, the OBJ file can support an unlimited number of colors, and a single file can define multiple objects. This is why developers often use it for 3D printing applications. However, the OBJ file is much less common than the Step file, which means that fewer 3D design programs support it.


What about using the STL file? Is it like the OBJ file?

In STL files (.stl), objects are represented by groups of vertices connected by edges, in order to form triangular faces. Unlike STL files, which only support a list of vertices connected by edges, OBJ files support high-polygon models, allowing for a more accurate representation of the original geometry. This is why 3D experts at Visao do not recommend using the STL file for creating an online 3D viewer.

What is Scene Viewer?

Scene Viewer is a native application that is written by Google and ships with Android, that enables 3D and AR experiences outside of your browser. The iOS counterpart is called Quick Look. It is necessary to visualize any 3D viewer online.


What is WebXR?

WebXR is an augmented reality (AR) program that is built into browsers. This API enables the interactive user interface you can see just below. This program also enables the user to stay on the site while viewing an AR experience, as opposed to needing to load a separate application.

Here is an example of Genie Outdoors’ 3D hard cooler that can be viewed in augmented reality via your mobile device. It can be used on all mobile devices (iOS and Android) by simply clicking on the augmented reality logo on the bottom right:

How can Visao’s experts help you?

Visao provides a web-based platform that allows manufacturers to use their CAD files to create interactive visualizations of their products for marketing, sales processes, trade shows and production, the perfect tool for business users. We also provide services to accompany you in the process of creating your 3D product viewer or any Augmented reality project.

Ready to create your own 3D model viewer? Request a live demonstration of Visao’s 3D and augmented reality solutions.