Note: This article has been updated for 2023.
It’s Easier Than You Think
Wondering how to embed a 3D model in your website? With augmented reality (AR) becoming more mainstream every year, consumers and B2B buyers increasingly expect sites to provide 3D product previews. If you want your eCommerce or B2B site to stand out from the competition, it’s no longer enough to provide beautiful graphics.
You need to engage visitors with immersive visuals that help them experience your product and make informed buying decisions. This is where 3D and augmented reality can help. While these may sound like advanced technologies that are difficult to implement, the truth is they’re actually pretty accessible. To meet the growing demand for AR, VNTANA has simplified the process of adding 3D models to websites to make it as easy as possible for B2C and B2B sellers to engage in visual commerce.
In this blog, we’ll show you the easy way to embed 3D models in website designs. After reviewing 3D and AR and their benefits to give you a basic understanding, we’ll walk you through how to embed a 3D model in a website in four simple steps. We’ll follow up by answering some of the most common frequently asked questions about using 3D models on websites and platforms such as Shopify and Wix.
- 3D models and augmented reality (AR) enable a more engaging and informative shopping experience for customers. They offer realistic product previews from various perspectives, showcasing detailed features and facilitating visualization in personal environments. This immersive experience enhances customer understanding of products, boosting sales and reducing return rates.
- The process of embedding 3D models on websites is streamlined and accessible. It entails creating and optimizing the 3D files, embedding them using methods such as iFrame code, API integrations, or direct uploads, and customizing them for the optimal user experience. Platforms like VNTANA offer automated solutions to facilitate this process.
- To ensure a user-friendly experience, it’s crucial to select the appropriate 3D file format and ensure optimized loading times. Platforms like VNTANA provide automatic optimization that preserves visual quality while reducing file sizes and loading times.
- Advanced features such as hotspots and custom adjustments can enhance the user experience, making 3D models more informative and engaging. These allow highlighting of product features, illustration of product uses, and fine-tuning of visual parameters.
- Utilizing platforms like VNTANA significantly simplifies the integration of 3D models into websites. From creating digital twins, managing file optimizations, embedding models, to sharing published files on leading platforms, these platforms provide comprehensive solutions to accelerate digital transformation in e-commerce.
Understanding 3D Models and Augmented Reality
3D and AR often work together on eCommerce sites, but they represent two different technologies that should be understood distinctly. 3D product images allow customers to see products from multiple angles, zoom in for more detail, rotate views, and choose colors, models, and other specs. This provides a more realistic view than 2D images and invites greater interaction.
Augmented reality further enhances 3D models by adding digital overlays or underlays to product images. For example, customers can see products against different backgrounds or read captions that provide product information. One important eCommerce application of AR is letting customers see 3D models over images of themselves or their physical environments, providing a preview of how it would look to wear, hold, or own a product.
Common 3D File Formats
3D files require special formats, just as their 2D counterparts do. Some of the most common 3D file formats include:
- OBJ: An open-source format that represents the 3D geometry of objects by using shapes such as triangles (known as polygon mesh), often used for exporting mesh models, computer-aided design (CAD), or 3D printing, but not suitable for animation.
- glTF/GLB (GL Transmission Format/GL Transmission Format Binary): An open-source 3D modeling format developed by the Khronos Group that uses ASCII/JSON and binary variations, designed to support animation and often embedded in native web applications.
- COLLADA (Collaborative Design Activity): An older open-source format developed by the Khronos Group that uses XML, superseded by glTF.
- USD/USDZ (Universal Scene Description): a proprietary AR format developed by Pixar and Apple, often used for AR on iOS devices.
- FBX (Filmbox): A proprietary format that supports 3D modeling and animation, often used for animation and for exporting files between different formats.
- STL (Stereolithography): A proprietary format that uses triangle mesh models, popular for 3D printing.
- STEP (ISO 10303-21): An open-source format that uses ASCII for 3D modeling, compliant with International Organization for Standardization requirements, used for CAD in the engineering and defense industries.
Proprietary formats can present challenges when exporting files from one program to another. This obstacle can be overcome by using open-source formats or formats that serve as intermediaries between proprietary formats (neutral formats). Platforms like VNTANA can automatically convert many standard file formats to GLB and USDZ, the two formats you need for 3D on the web and AR on iOS and Android.
The Benefits of 3D and AR Web
So how do 3D models benefit businesses? 3D and AR help B2C and B2B businesses deliver customers more realistic, engaging, and informative experiences that promote higher sales and lower return rates, increasing your profit margins. Here’s how using 3D models can help your company grow your revenue:
Give Customers a Better Understanding of Your Products
3D allows customers to see products from all angles, zoom in and out, rotate perspectives, and visually walk around objects. This can help them understand the features and applications of complicated or detailed products.
For example, a customer shopping for a consumer electronics product such as a connected TV can zoom in for a side view to see how many connectors are available, what type of connectors are used, how thick the set looks, and how much space the stand takes up. They can click for a close-up view of accessories such as TV legs, power cords, and remotes. They can see a captioned display of the screen’s size dimensions.
B2B sellers can use these same techniques to communicate product details. For example, a company that sells oil drilling equipment could use 3D images to let customers see detailed views of products such as casing pipe connectors.
Let Your Customers Experience Your Products in Their Environment
AR lets consumers view products in their current location, allowing them to see products in their environment true-to-size. This can help consumers evaluate products where sizing or color matching is important, such as furniture, suitcases, and bags. For example, a homeowner could see how a couch would look in their living room at its actual size and against the backdrop of the room’s paint color and décor.
AR can serve a similar purpose for B2B sales. For example, a procurement manager considering a piece of industrial equipment could see how the item would fit in an environment such as a factory, assembly line, or lab.
Engage Your Customers With Immersive Experiences
3D and AR increase customer engagement rates by enabling features that invite interaction. Customers can perform actions such as zooming in, changing viewing angles, selecting product specs, or displaying items against background images. These features make 3D and AR browsing a more hands-on and personalized experience, promoting higher engagement.
Increase Conversion Rates
By promoting higher engagement rates and providing better product previews, 3D models make it more likely that customers will purchase items. 3D and AR views give customers a better understanding and appreciation of a product’s practical value, increasing their confidence in making a purchasing decision. Implementing 3D and AR can double your conversion rates. In some industries, the effect can be even greater. Home decorating retailer Houzz found that consumers were 11 times more likely to purchase items after viewing them with AR.
By imparting higher pre-purchase confidence to buyers, 3D models reduce the likelihood of returns. When customers know what they’re buying, they’re less likely to become dissatisfied with their purchase. 3D models reduce return rates by 40%. This reduces shipping and inventory costs while increasing sales rates and profit margins.
OK, so you understand what AR is and how it can help you. The next question is, how do you get started?
How To Embed a 3D Model in a Website (Step-By-Step)
Embedding 3D models into your website can be fairly easy when you use the right platform. The process breaks down into four major steps:
- Designing 3D models of your products
- Optimizing your models for web and AR viewing
- Embedding your models via a 3D viewer
- Customizing your models
The VNTANA platform simplifies these steps to make 3D web development easy for you. Here we’ll walk you through how to do it:
Step 1: Design 3D Models of Your Products
Creating 3D models of your products can be done in one of three ways:
- Leveraging existing assets
- 3D Scanning
- Creating digital twins
Your company may already design models in 3D using programs like Browzwear, CLO, SolidWorks, Rhinoceros 3D (Rhino), Autodesk 3ds Max, KeyShot, or Modo. In this case, you can leverage those existing assets. Platforms like VNTANA can automatically optimize and convert existing 3D assets so they are ready for web, mobile, and AR.
If you don’t already have your own model designs, don’t worry. You can scan your products using processes such as photogrammetry or have a team of 3D artists create a digital twin from scratch. Scanning often works better when the products are smaller and not shiny or transparent, like a shoe. For large products like furniture, creating a digital twin with 3D artists is probably a better option.
The process of finding the right vendor for scanning or modeling can be cumbersome if you don’t know much about 3D. This is why VNTANA offers to create digital twins for you to get started quickly. Our network of trusted partners can 3D scan your products or build a 3D model from scratch and upload them to the VNTANA platform to instantly share on your website.
To get started with VNTANA, you must first sign up for an account by providing names for your organization, workspace, and user, along with an email and password. You’ll then be prompted to choose a free or premium plan. If you choose a premium plan, you’ll be asked to provide payment information. At this point, you’ll have completed the sign-up process. You then can begin creating projects and uploading 3D models.
Before creating and uploading files, you should determine what type of 3D file format you need. Consider factors such as:
- What features your 3D model should have (for instance, static vs. animated).
- What software you will use to create your files.
- What software your collaborators use.
- How your file will be used (for example, will your customers view the file with a 3D web viewer or experience it in 3D AR on a mobile phone).
In light of your answers to these questions, select the appropriate file type. Use the list of common file types in the previous section to help you. File types VNTANA supports include:
Note that VNTANA does not support GLB or GLTF files with Draco Compression as inputs, however we can apply Draco Compression to the output GLB.
After a 3D model is uploaded to VNTANA, the patented algorithms automatically optimize and convert the file to be web-ready. This process includes creating a simplified (low poly) GLB and USDZ file so that your AR model works on Android and iOS.
After the 3D model is done processing, you can click on the product to view the product page. Here you can adjust the lighting and background color or add a 360-spin to match your brand guidelines.
You also have the option to add a hotspot to provide a guided tour of the product for the user. Simply drop a pin on the 3D model by clicking and add text, an image, or a video in the dialogue box. No coding is required.
Step 2: Make Sure Your 3D Model Files Are Optimized Correctly for Web and AR
Now that you have your 3D models, you must ensure they can be used on your website or in an AR experience on a mobile app. In order to deliver your customers an engaging 3D experience, it’s critical to preview your files with colleagues or clients before embedding and publishing them. If you skip this step, you may be wasting your time publishing files your customers can’t view, driving visitors away instead of engaging them.
Optimization is a critical step because of the way load time impacts user experience. If your 3D model takes too long to load for mobile or desktop users, your visitors may leave in frustration before even giving your site a chance. This will give pages on your site a high bounce rate. It also can hurt your SEO. Google treats page speed as a ranking factor when deciding how websites will be displayed in search results.
The issue of loading time intersects with the related issues of file size and image quality. Graphics files require larger file sizes than text files to encode all the visual information that must be included. Animated files require multiple images per sequence, making them even larger than static files. If your files include other information, such as audio or callouts, this adds to their size.
There are ways to reduce file size, but this must be done without sacrificing image quality. To avoid losing image quality when you reduce file size, you must strike a delicate balance.
Think of it the same way you would when using 2D photography images on your website. You want to ensure that any product images on your site are in the right format and compressed but still high in quality. The goal is to make your images load quickly while still looking great.
For 3D, file-size reduction is usually done manually by a 3D artist. The artist reviews the original model and makes adjustments to optimize it and convert the format so it’s ready to be used on the web, mobile, and AR. For example, the artist may remove duplicate components of files that don’t need to be included to render essential visual information, or they may reduce the number of geometric faces in 3D polygon mesh designs.
While this is usually done manually, more automated solutions like VNTANA can handle this process automatically, saving you a lot of time and money. VNTANA uses Intelligent Optimization algorithms that automatically reduce your file size by as much as 99% while maintaining superlative visual quality. The process includes automatically creating a low poly USDZ and GLB file so that your files will deliver user-friendly AR experiences on both iOS and Android devices. The VNTANA optimization engine lets you adjust over 40 different parameters to give your file the perfect fit for your website’s needs. If that sounds overwhelming, VNTANA also provides presets so you can simply select “eCommerce” as the desired output and the algorithm will automatically optimize the 3D models to the most ideal eCommerce specifications.
Step 3: How to Embed a 3D Model in a Website
You have your 3D models, and they’re optimized for web and AR. Now what? The next step is to embed your models on your website. There are a few different ways to embed a model on a web page:
- iFrame embedding
- API integration
Here’s how each method works:
You can use a platform like VNTANA that allows you to simply copy the iFrame embed code and paste a 3D viewer into your website. This works the same way you would cut and paste the html code from YouTube to embed a video from that platform. You can see here just how easy it is to embed a 3D model viewer on platforms like WordPress, a Wix website, or a Squarespace website.
Alternatively, you can use VNTANA’s application programming interface (API) to embed the 3D and AR web viewer and build deeper integrations with more customization. An API is a software code that connects two or more other applications into a single workflow that can share data between apps. The VNTANA API uses a headless architecture, meaning that the backend management of your site “under the hood” is handled separately from the front end of your site displayed to visitors. This gives you the flexibility to integrate your favorite apps into your workflow without relying on plug-ins. This means you can add 3D capability to almost any tool in your existing tech stack, including product lifecycle management (PLM) software, product information management (PIM) software, digital asset management (DAM) software, or other apps. The VNTANA API uses a 3D Webviewer JS Component that can be loaded dynamically for inclusion in web components and apps.
Viewing Embedded 3D Files in AR
Now that your model is hosted on your website, how do you make it AR-enabled? If you’re using a 3D model viewer like VNTANA, AR is automatically built in.
The 3D web viewer contains a “View in AR” button the customer can click. If the customer is viewing your website from a mobile device, clicking on this button immediately takes them to an AR experience where your 3D model appears against a live view of their environment. They don’t need to download any additional apps to see your 3D model in AR.
If the customer is viewing your site on a desktop, clicking on the View in AR button triggers a popup that displays a QR code. The viewer can use a mobile phone to scan the code and view the 3D model of your product against the backdrop of their own environment.
Step 4: Customize Your 3D Model Embed on Your Website
Once your 3D model is embedded on your website, you can see how it looks in real-time and make customized adjustments to optimize the display of your final results. If you use an iFrame code to embed your model, you can adjust the width and height of the frame by editing the code. Additionally, VNTANA’s 3D Viewer Settings allow you to adjust many different variables that affect the appearance of your 3D model, including:
- The initial position defining the angle on your product your customer sees when they first start viewing your model.
- The target point used to center the view of your product.
- Whether your product rotates automatically.
- The speed your product moves when rotated.
- The minimum and maximum zoom level customers can use to view your product.
- Whether zoom is disabled.
- The brightness of the lighting surrounding your product.
- The look of the environment behind your product.
- The background color of your product environment.
- Whether the shading on your product is diffuse or metallic.
- The intensity and color of the lighting illuminating your product.
- Whether your product is highlighted by soft shadows set by an ambient occlusion map (AO map).
- The intensity, softness, and location of shadows cast by your product.
- The spatial orientation of your product model.
- Post-processing special effects, such as adjusting the sharpness of your model.
These customizations can help your product look better on your website.
VNTANA also provides a debugging tool to help you refine the look of your model. You can debug elements such as the geometry of your model, colors, and specific effects.
To help your team edit 3D models, the VNTANA 3D viewer lets you add annotations, comments, and attachments to quickly give feedback or request changes. Annotations let you place pins on different parts of your model that can be clicked to display text. Comments let you add text to your model as a whole. Attachments let you attach files, such as image files.
To make your 3D model more informative and engaging for customers, you can add hotspots. These let you pin text, images, or videos to different parts of your model. Viewers can click the pins to read the text, see the image, or watch the video. This can be useful for highlighting product features or illustrating product uses and benefits.
The VNTANA platform includes bulk editing features. This can be useful if you want to make global changes to product models instead of editing them individually.
Why Use VNTANA for Your 3D Augmented Reality Web Page Needs?
Performing all the steps described here might seem daunting if you had to do it manually. Fortunately, VNTANA simplifies the process, handling details so you and your customers don’t have to. We make it easy for you to upload your existing 3D files or product scans, or work with our team to create digital twins. Our Intelligent Optimization tool does the heavy lifting to adjust your files for fast loading and easy sharing. Easily embed your 3D models using iFrame codes or our API. Once your files are embedded, our optimization settings make it easy for you to fine-tune adjustments such as centering the camera, setting viewing angles, and adjusting the look of your product environment. To help you share your published files, VNTANA partners and integrates with leading platforms such as Google, Meta, Amazon, and PTC, allowing you to share your optimized product models with a click of a button.
We hope this guide was useful for getting started with 3D and AR in eCommerce and B2B sales. If you’d like to learn more about adding 3D and AR capabilities to your eCommerce site, you can contact us here. Book a call with our team to see a demo and see how easy it can be to accelerate your 3D digital transformation.
3D Model Embedding FAQs
How Do I Show 3D Models on My Website?
To show 3D models on your website, you first must create and optimize your 3D files. You can then use several different methods to display your files on your site. If you’re using VNTANA, you can copy and paste an iFrame code to embed a 3D file on your site, much as you would do when embedding a YouTube video. VNTANA also provides an API you can use to integrate 3D models with your existing software stack, adding 3D viewing functionality to your favorite apps.
How Do I Embed a 3D Model in Wix?
With VNTANA, you can embed a 3D model on a Wix website by cutting and pasting an iFrame embed code. Simply copy the code from VNTANA and paste it on your Wix page. You can then make adjustments on your Wix page to control how the iFrame is displayed.
How Do I Embed a 3D Model in WordPress?
With VNTANA, you can embed a 3D model on a WordPress website by cutting and pasting an iFrame embed code. Simply copy the code from VNTANA and paste it on your WordPress page. You can then make adjustments on your WordPress page to control how the iFrame is displayed.
How Do I Embed a 3D Model in Shopify
You can use the VNTANA Shopify App to embed the VNTANA 3D and AR viewer on any Shopify website. First Install the VNTANA Shopify App here: VNTANA 3D Optimizer & Viewer – Quickly add 3D and AR versions of your products to… | Shopify App Store
After installing the app, log in to your VNTANA account through the Shopify App interface. Follow the instructions in the app to pull VNTANA product information and thumbnails directly into your Shopify products.