svo, 15. July 2022

Integrate 3D without technical hurdles

3D content on websites is definitely an eye-catcher. Even better if 3D objects of products can even be used interactively - either controlled or viewed in AR or VR. The way to do this today is sometimes quite simple - in case you already have 3D objects of your products.

Web services bring 3D content to the website without detours

The advantage of 3D product views on the web is obvious: In addition to the feeling of having control over the content of the site, models can also be animated and supplemented with information. In this way, a product tour can be created over which the user ultimately has control. This turns viewers into users - and in terms of marketing, a deeper activation takes place.

3D seems to be an unattainable luxury for many smaller companies - a book with seven seals that only opens to the initiated. But a lot has happened here recently: simple 3D services have grown into offerings that can get a lot out of your 3D model.

On the one hand, importing and preparing models has become very easy compared to all other means available on the market. On the other hand, models can very easily be supplemented with additional functions and information. The result is finally a model embedded in a player that can be viewed in the browser - but at the same time offers the possibility to be viewed via augmented and virtual reality suitable devices.

The basis: How do I get to the 3D model

Most providers offer different options here. It is always essential that the data is no longer parametric (especially with data from CAD applications). The web viewers each use polygon-based formats.

The most common here are certainly .fbx or .obj. These formats work in most 3D applications - and can often be exported directly from development software. Another typical format is the .stl format, mainly used in scanning applications or 3D printing.

At least the first attempts can be made quickly.

Model becomes experience

The choice of providers is constantly growing. Depending on your starting point (which tools you work with - and what kind of models you have), there are specialized providers. For example, some solutions process models directly from popular, free 3D applications such as Blender. Or solutions that can even be used to represent and simulate textile products. These, in turn, are usually expensive and also more complex solutions.

We have good experience with sketchfab. This is an established service that has a broad user base. Here, objects of all kinds can be imported, slightly optimized (for example, their materials, and lighting), and finally provided with effects or interactive hotspots.

Part of the solution also lies in the player for the content. This is the essential part of the offer. If the player is integrated on the site, all functions for controlling and viewing the model are already included. This usually includes viewing in augmented or virtual reality.

Integrating usually only means copying a small piece of HTML code into the site (barware CMS such as Wordpress templates usually even offer corresponding "containers" for this). Alternatively, iFrame integrations are generally available but often have disadvantages in responsive web design.

A typical process

The typical process from your model to integration on the website looks like this:

  • Creation of a model with corresponding PBR materials (physical based rendering materials - i.e. corresponding surfaces of your models).
  • Alternatively export of your model from your development software - with different materials assigned to the object parts
  • Import of the data in the respective web service
  • Adjustment/reassignment of materials if necessary
  • Exchange of materials from the model export (in case of exports from development software - the web services usually offer a selection of typical materials here)
  • Adding information or functions to the model (usually cameras can be set up, light sources can be set or existing animations can be linked to controls)
  • Output embed code (HTML or iFrame)
  • Integration on website or webshop (via prepared HTML or iFrame element/object)

Advantages and disadvantages of web services for 3D models

It is precisely in the "simple" that the greatest advantage lies. While modern 3D formats such as GLTF or UDSZ are obvious for web and AR purposes, their integration usually requires a somewhat deeper dive into the programming box.

We have outlined the advantages and disadvantages compared to individual integration.

3D Web Services Advantages

  • Easy way to integrate 3D content into your website
  • Good handling of 3D data - WYSIWYG during preparation
  • Easy enrichment with interaction possibilities
  • Easy access to AR and VR functionalities
  • Usually works on all platforms

3D web services' disadvantages

  • Free use is mostly minimal
  • Relatively high costs for large numbers of models
  • Data sovereignty lies with the provider
  • Performance and ease of use depend on the provider

For example...

An example of how a corresponding integration can look: Our model of OfficeLoft via the provider sketchfab.

Do you have VR glasses? Then navigate to this page in your browser to explore the model in your room.

AWE Schaffhausen - 3D content provider

AWE Schaffhausen has been creating 3D content through product visualizations, animations, models, and interactive 3D tools for web, AR, and VR for more than ten years.

As a communication agency, we work out for you the advantages of different 3D tools with which content around products and services can be transported in a very target group-oriented and convincing way.

Do you have any questions - or would you like to know more about 3D and the web? We are at your disposal.

How are 3D visualizations and animations created?
More 3D fairy dust