You can embed a 3D model viewer in a website with a single line of HTML, an iframe, or a JavaScript library. The embed code is the easy part. The hard part is getting a real product model; often a heavy CAD file to load fast, look right on a phone, and stay current across every page where it appears.
This guide starts from zero. It explains what a 3D viewer actually is, walks through the three ways to embed one, and shows you how to prepare a file, add augmented reality, and fix the problems that trip most people up.
By the end, you will know how to embed a 3D model viewer in a website and how to keep it working once you have more than one model to manage.
Key Takeaways (TL;DR)
- Three ways to embed: A hosted viewer plus an iframe, Google’s model-viewer HTML tag, or a JavaScript library like Three.js. The first two need little or no code; the third is full custom development.
- Prep beats everything: A model that is not optimized will load slowly or fail on mobile. Convert to GLB, compress it to 1 to 3 MB, and add a USDZ file if you want AR on iPhones.
- AR is two files, not magic: Android reads your GLB through Scene Viewer, and iOS reads a USDZ through Quick Look. Supply both and the viewer handles the rest.
- CAD is the real challenge: Engineering files such as STEP or SolidWorks cannot be embedded directly. They have to be converted and optimized first, which is where most manufacturer projects stall.
- Scale changes the tool: One model is a five-minute job. A full catalog needs CAD ingestion, governance, security, and a way to keep every embed in sync, which free viewers do not provide.
Table of Contents
How to Embed a 3D Model Viewer in a Website: at a Glance
There are three ways to embed a 3D model viewer in a website. They all render the same kind of model in the browser; they differ in how much code you write and how much control you get. Use this table to find your starting point, then read the full method section below.
| Method | What it is | Skill needed | Control | Best for |
| Hosted viewer + iframe | A tool hosts your model and viewer; you paste a link in an iframe | Copy and paste | Low | No-code sites, quick tests, content teams |
| model-viewer web component | One HTML tag from Google renders a GLB you host yourself | Basic HTML | Medium | Product pages and marketing sites |
| JavaScript library (Three.js) | You build a viewer in code with Three.js or Babylon.js | Front-end development | Full | Custom apps, configurators, bespoke UI |
VNTANA supports all three. It is an enterprise 3D digital asset management platform, and the viewer it publishes through is Khronos-certified, built on Three.js, and embeds as an HTML web component, an iframe, or an NPM React package, so the same model works whichever route you pick.
What It Means to Embed a 3D Model Viewer in a Website
To embed a 3D model viewer in a website means to place interactive 3D content directly on a web page so a visitor can rotate, zoom, and inspect a product in the browser. There is no plug-in, no download, and no CAD software required on the visitor’s end.
Three pieces make it work. First is the 3D model file itself, which holds the shape (the mesh), the surface detail (textures), and how light reacts to it (materials). Second is a host, usually a viewer tool or a content delivery network, that serves that file to the browser. Third is the viewer, the code that draws the model on screen and lets the visitor control the camera.
The viewer renders using WebGL, the browser standard that made in-page 3D possible without plug-ins. Every modern browser supports it. That is why a 3D model in a website now behaves like any other web element instead of needing separate software.
The 3D model embed is the snippet that ties those pieces together. It tells the browser which model to load and which viewer to draw it with. Everything that makes the result feel good, fast loading, correct scale, clean lighting, working AR, all depends on the file behind that snippet, which is why most of this guide is about preparing the file, not pasting the code.
Why Embed a 3D Model in a Website?
Static photos answer fewer questions than buyers ask. On complex products such as industrial equipment, machinery, engineered components, and configurable goods, a flat image cannot show scale, depth, material finish, or how parts fit together. Buyers who cannot evaluate a product online stall, call for a rep, or leave for a competitor whose page answered first.
That matters because buying has moved online. Most business buyers now research and purchase without talking to a salesperson, and they abandon an evaluation when the product information is incomplete. An embedded 3D model lets them turn the product over, look inside it, and see it at true scale, at any hour, without a call.
The commerce numbers back this up. Shopify reports that “merchants who add 3D content to their stores see a 94% conversion lift, on average” (Shopify). The gain is even clearer for products that are hard to judge from a photo, which is most of what manufacturers sell.
The clearest way to see why teams embed 3D is to look at what they use it for. Four use cases cover most of it:
- B2B sales demos: A rep pulls up any machine from a link on a video call and walks a buyer through its internal mechanisms in real time, with no engineer present.
- eCommerce and dealer portals: Interactive 3D and AR sit on product pages so buyers self-serve an evaluation that used to require a sales rep.
- 3D parts catalogues: A technician spins an assembly on a phone, finds the exact part visually, and orders it correctly the first time.
- Channel syndication: One embedded model feeds a website, a dealer portal, a parts catalogue, and eCommerce from a single source.
These are not hypotheticals. Astec Industries reached a “90% reduction in time required to prepare CAD models for visualization and XR” and closed a “$50M deal” using interactive 3D demonstrations (VNTANA). Doosan Bobcat put interactive 3D and AR on product pages and saw higher conversion, with buyers self-serving evaluations leading to more inbound qualified sales calls.
3 Ways to Embed a 3D Model in a Website
There are three practical ways to embed a 3D model in a website. Each renders the model with WebGL, so the visible result is similar; what changes is how much you build and how much you can customize. Here is what each one is, when to use it, and what it looks like in code.
1. Hosted Viewer Plus an iFrame
This is the no-code route. You upload your model to a viewer tool, the tool hosts both the model and the viewer, and it gives you a share URL. You drop that URL into a standard iframe, which loads the viewer inside a box on your page.
<iframe
src=”https://viewer.example.com/model/pump?embed”
width=”100%” height=”480″
frameborder=”0″ allow=”xr-spatial-tracking”>
</iframe>
Use it when you want the fastest path, or you are working in a CMS that only accepts pasted HTML. The trade-off is control: the iframe is walled off from the rest of your page, so it cannot easily talk to a cart or a configurator, and you depend on the host for uptime and performance.
2. Google model-viewer Web Component
The model-viewer web component is Google’s free, open-source tag for putting 3D on a page. It “displays interactive 3D models on the web and in AR” (modelviewer.dev) from a single HTML element, with no JavaScript framework to wire up. You host your own GLB file and point the tag at it.
<script type=”module”
src=”https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js”>
</script>
<model-viewer
src=”pump.glb”
ios-src=”pump.usdz”
camera-controls
auto-rotate
ar>
</model-viewer>
Use it when you want more control than an iframe without writing a renderer. You add the script once, then reuse the tag on any page. The catch is that hosting, optimizing, and keeping the models current are now your job, which is manageable for a few models and painful across a catalog.
3. JavaScript Library: Three.js or Babylon.js
This is the full-custom route. Libraries like Three.js and Babylon.js give you direct control of the WebGL scene, so you build the camera, lighting, and controls yourself. The result can be anything, but you are writing and maintaining a viewer from scratch.
import * as THREE from “three”;
import { GLTFLoader } from “three/addons/loaders/GLTFLoader.js”;
const loader = new GLTFLoader();
loader.load(“pump.glb”, (gltf) => {
scene.add(gltf.scene);
});
Use it when the viewer has to do something a packaged tool will not, such as drive a live pricing engine or a parts lookup. Most teams do not need this level of effort. VNTANA publishes through a Khronos-certified viewer built on Three.js, shipping as a web component, an iframe, and an NPM React package. You get the power of the library without building or maintaining one, and every model reaching it has already been optimized by the 3D DAM upstream.
How to Get a 3D Model to Embed
Before you can embed anything, you need a 3D model of the product. If you already have one, skip to the next section. If you do not, there are four ways to get one, from most to least control over the result.
- Use the CAD you already have: For manufacturers, the model already exists. Engineering built an exact 3D file of the product in a tool like SolidWorks, SiemensNX, or Creo. This is the fastest and most accurate source, because the geometry is already correct; it just has to be made web-ready.
- Model it from scratch: A 3D artist builds the model in software such as Blender, Maya, or 3ds Max. This suits products that were never engineered in CAD, but it takes time and skill.
- 3D scan or photograph it: A 3D scanner, or photogrammetry from a set of phone photos, captures a physical object into a digital model. It is quick for real, existing products, though scans usually need cleanup before they are web-ready.
- Buy or generate one: 3D marketplaces sell ready-made GLB files for generic props and staging, and newer AI tools generate a rough model from images or text. Both are useful for filler, less so for an accurate, specific product.
For most manufacturers, the answer is the first one. The exact model of every product is already sitting in engineering’s CAD files, unused outside the design team.
VNTANA turns that idle CAD into web-ready 3D automatically, so you activate an asset you already own instead of paying to recreate it. Whichever source you use, the model then has to be in the right format, which is next.
3D Model File Formats: GLB, glTF, USDZ, and Native CAD
Format is the decision that quietly determines whether your embed works. A viewer can only render web formats, so the file you start with is rarely the file you embed. Here is what each format is for.
| Format | What it is | Use it for | Web-ready? |
| GLB | A single file holding geometry, textures, and materials together | The model you actually embed | Yes |
| glTF | The same standard as GLB, but split across several files | Editing pipelines | Yes |
| USDZ | Apple’s AR format | AR on iPhones and iPads (Quick Look) | AR only |
| OBJ, FBX | Common exports from design tools | An intermediate step; convert to GLB | Convert first |
| STEP, IGES, JT, SolidWorks, CATIA | Native CAD from engineering | The source of most real product 3D | No, must convert |
GLB is the format to embed. It packs everything into one file, so there is nothing to link separately, and every web viewer reads it. Pair it with a USDZ when you want AR on Apple devices, since iOS requires that format while Android reads your GLB.
The last row is where most guides stop, and most real projects begin. Native CAD files carry millions of polygons and proprietary design data, so they cannot be embedded directly. They have to be converted and optimized to GLB first, which is the subject of the next section.
How to Optimize a 3D Model Before You Embed It
A browser downloads the entire model file before it can render it, so file size decides whether your page feels instant or broken. A raw CAD file or 3D scan can run to hundreds of megabytes. The practical target for a web model is 1 to 3 MB and roughly 150,000 triangles or fewer, which loads in a second or two even on a phone.
Getting there means removing weight the web does not need, without changing how the model looks. These are the steps that do the work:
- Reduce the polygons: Engineering meshes have far more detail than a screen can show. Decimation cuts polygon count while keeping the silhouette, which is the single biggest size saving.
- Compress the geometry: Draco compression shrinks the mesh data itself so it downloads far smaller, and the viewer decompresses it on load.
- Compress the textures: KTX2 and Basis compress image maps so a phone loads and stores them efficiently instead of choking on full-resolution photos.
- Remove hidden internals: Buyers never see the parts inside a sealed housing, so stripping them cuts size dramatically on complex assemblies.
- Add a poster and lazy-load: A still image (a poster) shows immediately, and the model loads only when the visitor scrolls to it, so the rest of the page is never blocked.
You can do this by hand in a tool like Blender for a single model. It stops scaling the moment you have hundreds of products, and it breaks entirely on native CATIA or SiemensNX files that Blender cannot open.
This is the step VNTANA automates. Its patented Intelligent Optimization™ ingests native CAD, reduces file size up to 99% while keeping visual fidelity, easily customizable per client based on their unique needs, and standardizes orientation and scale. In one enterprise case, a 221 MB STEP file came out at 1.3 MB with internals removed, and the model prep that took Astec’s engineers weeks now runs automatically.
How to Embed 3D Viewers on a Website: Step-by-Step
Here is how to embed 3D viewers on a website from raw file to live page, followed the whole way through with one example: an industrial pump exported from SolidWorks as a STEP file, headed for a product page with AR.
- Start with your source file. The pump lives in engineering as a STEP file, around 180 MB. That is the master; you never embed it directly; you derive a web version from it.
- Optimize and convert to GLB. Decimate the mesh, apply Draco and KTX2 compression, remove the internal parts a buyer will not see, and export a GLB of about 2 MB. Export a USDZ copy at the same time for iOS AR. (See the optimization steps above.)
- Host the files. The files have to live somewhere the browser can fetch them. That means uploading pump.glb and pump.usdz to your viewer tool, or to a content delivery network (a CDN, which serves files fast from a server near each visitor). A hosted viewer handles this for you; if you host the files yourself, put them on a CDN rather than a slow web server, because the browser downloads the file before it renders.
- Choose a method and get the 3D model embed code. For a product page, the model-viewer web component is the sweet spot. Add its script once, then use the tag. This snippet is the “3D model embed code” you place on the page:
<model-viewer
src=”pump.glb”
ios-src=”pump.usdz”
camera-controls
auto-rotate
shadow-intensity=”1″
ar>
</model-viewer>
- Paste it into your page. Drop the tag into your HTML, a CMS custom-HTML block, or a product template where you want the viewer to appear.
- Configure how it opens. Set the starting camera angle, turn on auto-rotate, and adjust exposure and shadow so the pump reads clearly. A good opening view does more for perceived quality than any other setting.
- Turn on AR. The ar attribute plus the ios-src USDZ is all it takes; the next section covers how AR behaves on each device.
- Test on a real phone. Load the page on a mid-range Android device over cellular, not just your desktop. This is where an unoptimized file fails, and where step 2 pays off.
- Keep the source current. When the pump is revised, update the source model, so every page that embeds it reflects the change. A snapshot embed that drifts out of date is worse than no 3D at all.
Step 6 is where most of the visible quality comes from, so it helps to know what you can actually control. With the model-viewer tag, these are the settings you will reach for most; hosted viewers and enterprise tools expose the same controls through a settings panel.
| Setting | What it controls |
| camera-controls | Whether the visitor can rotate, zoom, and pan the model |
| camera-orbit | The starting angle and distance the model opens at |
| auto-rotate | Slowly spins the model until the visitor interacts with it |
| exposure | Overall brightness of the scene |
| environment-image | An image used for realistic lighting and reflections |
| shadow-intensity | How strong the ground shadow is, which grounds the model |
| poster | A still image shown while the model loads |
| ar, ios-src | Turns on AR and points iOS to the USDZ file |
How to Add AR to an Embedded 3D Model
Augmented reality lets a visitor place your product in their own space at true scale, straight from the web page and with no app to install. It is the feature that turns a 3D model on a website from a nice detail into a buying tool, especially for equipment someone needs to picture in a facility or on a job site.
AR comes down to two files. iPhones and iPads run Apple’s Quick Look, which needs a USDZ file. Android phones run Google’s Scene Viewer, which reads your GLB. Supply both and the viewer sends each device to the right one automatically.
With the model-viewer tag, that is the ar attribute plus an ios-src pointing at the USDZ:
<model-viewer
src=”pump.glb”
ios-src=”pump.usdz”
ar
ar-modes=”webxr scene-viewer quick-look”>
</model-viewer>
On a desktop, where AR cannot run, a good viewer shows a QR code the visitor scans to open the model on their phone. Two rules keep AR working: the page has to be served over HTTPS, because AR needs a secure origin, and the model has to be built at real-world scale, or it will appear the wrong size when placed.
For headsets, the standard is WebXR, which runs the same model on Apple Vision Pro, Meta Quest, and similar devices. Models published through VNTANA carry app-less AR on iOS and Android and built-in WebXR with no extra development, so one source model covers desktop, mobile, tablet, and XR headset.
How to Embed a 3D Model on Shopify, WordPress, and Other Builders
The embedding step is the same on every builder: you take an iframe or a model-viewer tag and paste it into a block that accepts HTML. What differs is where that block lives. Here is where to put it on the common ones.
Shopify
Shopify has two routes. The simplest is native: upload a .glb as product media and Shopify renders it in the product gallery with an AR badge.
For more control, paste a model-viewer tag or an iframe into a custom Liquid section or a custom-HTML block, which lets you place the viewer exactly where you want it and style the page around it.
WordPress
Add the model-viewer script once in the theme header (or through a header-scripts plugin), then drop the tag into a Custom HTML block in the Gutenberg editor.
An iframe works the same way and needs no script at all, which is the quickest option for a single model.
Webflow, Wix, and Squarespace
Each of these no-code builders has an embed element: an Embed component in Webflow, an HTML iframe element in Wix, and a Code Block in Squarespace.
Paste your iframe or web component into it, publish, and the viewer renders. The iframe route is usually the safest here because it needs no separate script.
BigCommerce and Magento
On larger commerce platforms, add the embed to the product-page template or a content block so it appears across products.
The pattern is identical: generate the code from your viewer, paste it into the template, and let the theme handle placement.
Common Problems When Embedding a 3D Model (and How to Fix Them)
Most embedding problems trace back to the file or the hosting, not the code. When a viewer misbehaves, work through these before rewriting anything. The fix is usually upstream.
| Problem | Likely cause | Fix |
| Model loads slowly or stalls on mobile | File is too large | Optimize to 1 to 3 MB with Draco and KTX2; add a poster and lazy-load |
| Viewer box is blank | Wrong file path, unsupported format, or blocked cross-origin request | Check the src path, confirm the file is GLB, and allow CORS on the host |
| Model looks dark, or the colors are off | No environment lighting or wrong color space | Set exposure and an environment image; make sure textures are sRGB |
| AR button never appears | Missing USDZ, or the page is not on HTTPS | Add an iOS-src USDZ and serve the page over a secure connection |
| Product is the wrong size in AR | Model not built to real-world scale | Set true scale in the source file before export |
| Model opens upside down or off-center | Orientation was never standardized | Fix orientation in the source, or use an optimizer that standardizes it automatically |
The SAP 3D Viewer and Other CAD Files: Getting Engineering 3D Onto the Web
If your models come from engineering, you will run into tools like the SAP 3D Viewer, properly the SAP 3D Visual Enterprise Viewer. It is a free desktop tool for viewing and marking up 3D CAD content inside the SAP environment, with an SDK and Office add-ins that let developers place 3D into internal applications, Word, and PowerPoint.
That is a different job from embedding a 3D model viewer in a website for customers. The SAP 3D viewer is built for engineers and internal documents, not for a public product page that has to load on a phone in under three seconds. It views CAD; it does not turn CAD into a fast, AR-ready web experience.
Getting engineering 3D onto the web is a pipeline, not a single viewer. The CAD file has to be ingested, optimized to a web format, stripped of proprietary geometry before it goes public, and then embedded.
VNTANA handles native CAD across more than 40 formats, converts it automatically, strips proprietary geometry and metadata before content reaches an external destination, and outputs a web-ready model you embed with the same web component, iframe, or React package.
It connects to the PLM, ERP, PIM, and eCommerce systems manufacturers already run through open APIs, so the source model stays the source of truth.
Embed a 3D Model Viewer in a Website Without It Breaking at Scale
One model is easy. A catalog is where 3D programs fall apart, because the problems that a single embed hides all show up at volume. Four things separate an embed that survives from one that does not.
- Performance across many models: A page with several viewers can stall if each one spins up its own GPU context. A shared, singleton renderer avoids that; models delivered through VNTANA load 5 to 10x faster than common alternatives, because they are optimized before they ever reach the page.
- Security and IP: Public 3D of a proprietary product exposes design data. An enterprise viewer strips proprietary geometry and metadata automatically before anything reaches an external page, and it should pass a security review. VNTANA is SOC2 Type II certified, which most free viewers are not.
- Governance: Setting lighting and camera angles by hand across thousands of models does not scale. Org-wide admin templates push viewer settings across the whole catalog at once, so every embed looks consistent.
- Staying in sync: A pasted embed is a snapshot frozen at the moment you copied it. When every model is managed from one system, an update to the source pushes to every embedded page automatically through webhooks and APIs. This is the role of 3D digital asset management: one governed home for every model, feeding every website, dealer portal, parts catalogue, and eCommerce channel it appears on.
Everything You Need to Know About Embedding a 3D Model Viewer in a Website
This table recaps the whole guide, so you can scan the decisions in one place before you start.
| Topic | What to know |
| What it is | Placing interactive, rotatable 3D on a web page via WebGL, with no plug-in required |
| Getting a model | Use existing CAD, model it, 3D scan it, or buy one; manufacturers already own the CAD |
| Three embed methods | Hosted viewer plus iframe (no code), model-viewer web component (basic HTML), or Three.js and Babylon.js (custom code) |
| Format to embed | GLB for the web, plus a USDZ file for AR on iOS |
| File size target | 1 to 3 MB and roughly 150,000 triangles or fewer, using Draco and KTX2 compression |
| AR support | Quick Look on iOS (USDZ), Scene Viewer on Android, and WebXR for headsets |
| CAD files | STEP, SolidWorks, SiemensNX, and others must be converted and optimized before embedding |
| Where to paste it | A custom HTML block or product template on Shopify, WordPress, Webflow, Wix, Squarespace, and others |
| Keeping models current | Manage from one source, so updates push to every embedded page |
| Best fit for a full catalog | A 3D DAM with CAD ingestion, governance, security, and channel syndication |
Get Started with VNTANA
Embedding one 3D model is a five-minute job. Embedding hundreds built from CAD, fast on mobile, safe to publish, and current across every page and dealer channel is where teams get stuck, stall on file weight, or fail a security review.
VNTANA is the enterprise 3D digital asset management system built for exactly that. It ingests native CAD across 40+ formats, optimizes it automatically, and delivers a web-ready viewer you embed three ways, with SOC2 Type II security and automatic IP protection built in.
It is made for manufacturers and brands turning existing CAD and 3D assets into content that sells across websites, dealer portals, and parts catalogues.
See your own files go through the pipeline: your assets, your workflow, your proof. Book a demo with VNTANA →
FAQs About Embedding a 3D Model Viewer in a Website
How do I embed a 3D model viewer in a website?
To embed a 3D model viewer in a website, add an HTML web component tag, an iframe, or a JavaScript library that points at a hosted model file. The model-viewer tag is the fastest for most sites: you add one tag, set its source to a GLB file, and the browser renders interactive 3D with no plug-in. First optimize and convert the model to GLB, host it, then paste the generated embed code into your page. For AR, add a USDZ version so it works on iPhones. Test the page on a mid-range phone, since load time under three seconds is the practical benchmark.
What is the difference between Three.js and model-viewer?
The difference between Three.js and model-viewer is that model-viewer is a ready-made HTML tag, while Three.js is a library you build a viewer with. model-viewer renders a GLB from a single element with no framework, which suits product pages in minutes. Three.js gives you full control of the scene, camera, and lighting, but you write and maintain the viewer yourself. Most teams should start with model-viewer and move to Three.js only when they need fully custom behavior. VNTANA’s viewer is built on Three.js and also ships as a web component, so you get that power without the build.
What is the best file format to embed a 3D model in a website?
The best file format to embed a 3D model in a website is GLB, the web standard that packs geometry, textures, and materials into one file. Add a USDZ version for AR on iOS, since Apple’s Quick Look requires it while Android uses Scene Viewer. OBJ and FBX work but are better converted to GLB for delivery. Native CAD formats such as STEP, SolidWorks, and SiemensNX cannot be embedded directly and must be optimized and converted first. Starting in GLB avoids most loading and compatibility problems.
How big should an embedded 3D model file be?
An embedded 3D model file should be about 1 to 3 MB, with roughly 150,000 triangles or fewer, so it loads in a second or two on a phone. Raw CAD files and 3D scans are often hundreds of megabytes, far too large for the web. Bring the size down with mesh decimation, Draco geometry compression, and KTX2 texture compression, and remove internal parts a buyer never sees. Automated optimization can cut a 221 MB CAD file to under 2 MB. Always confirm the load time on a real mobile device.
How do I embed a 3D model in a website for free?
You can embed a 3D model in a website for free using Google’s open-source model-viewer web component, which renders 3D and AR from a single HTML tag at no cost. Free hosted tools also generate copy-and-paste embed codes for basic models. Free options stop working sooner than teams expect. They require ongoing engineering maintenance, cannot ingest native CAD, include no bulk viewer governance, and often fail on mobile once a model gets large, so quality drifts across a catalog with no way to control it centrally. For one or two lightweight models, free is the right call. Past that, the maintenance cost lands on engineering, which is the bottleneck the project was meant to remove.
Can I embed a 3D model on Shopify or WordPress?
Yes, you can embed a 3D model on Shopify or WordPress, along with Webflow, Wix, Squarespace, and custom HTML sites. Shopify can render a .glb natively as product media, or you can paste a model-viewer tag or iframe into a custom section for more control. On WordPress, you add the model-viewer script once and drop the tag into a Custom HTML block. The embedding step is the same everywhere: generate the code from your viewer, then paste it into the page. The work that varies is preparing and optimizing the model itself.
How do I make an embedded 3D model work in AR?
To make an embedded 3D model work in AR, supply two files: a GLB for Android’s Scene Viewer and a USDZ for Apple’s Quick Look. With the model-viewer tag, add the ar attribute and an ios-src pointing at the USDZ, and the viewer routes each device to the right format. Serve the page over HTTPS, because AR needs a secure origin, and build the model at real-world scale so it appears the right size when placed. On desktop, the viewer shows a QR code so the visitor can open AR on a phone. For headsets, WebXR runs the same model on devices like Apple Vision Pro and Meta Quest.
What is the SAP 3D viewer and can it embed models on a website?
The SAP 3D viewer, or SAP 3D Visual Enterprise Viewer, is a free desktop tool for viewing 3D CAD content inside the SAP environment, with an SDK and Office add-ins for internal applications and documents. It is not built to embed models on a public website for customers, since it targets engineers and internal use rather than fast, AR-ready product pages. To put that same CAD on the web, the file must be optimized and converted to a web format such as GLB first. Tools like VNTANA ingest native CAD directly and output a web-ready model you can embed. The SAP viewer views CAD; it does not deliver it to a product page.
Do I need to convert CAD files to embed a 3D model?
Yes, you need to convert CAD files to embed a 3D model, because formats like STEP, SolidWorks, SiemensNX, and CATIA cannot be rendered directly in a browser. CAD files carry millions of polygons and proprietary data, so they must be optimized, converted to a web format such as GLB, and stripped of sensitive geometry before publishing. Doing this by hand for every model is the bottleneck that stalls most manufacturer 3D projects. Automated pipelines handle it in minutes: VNTANA reports a 90% reduction in the time required to prepare CAD models. Once converted, the web-ready file embeds like any other GLB.
Is a free 3D viewer good enough for enterprise product pages?
A free 3D viewer is not good enough for enterprise product pages once you move past a handful of models. Free viewers lack native CAD ingestion, bulk governance, SOC2 Type II certification, IP stripping, and reliable mobile performance at volume, all of which become hard requirements across a real catalog. They also need ongoing engineering time to maintain, which most teams do not have. A 2% conversion lift on a $200M digital channel is $4M, so the cost of a governed viewer is small against the upside. Many teams start free and migrate to an enterprise viewer within 12 to 24 months.
