Vectary 3D & AR

Webflow renders images and video natively, but a page cannot spin an object, swap its finish, or place it in a room at real scale. Anything past a flat asset needs a 3D viewer that loads in the browser and degrades cleanly on devices that cannot run augmented reality.

Vectary covers that gap with a browser-based 3D editor and a viewer you drop onto a page as an iframe. Once a project is shared to the web, the same embed serves an interactive scene on desktop and hands off to the phone's built-in AR viewer on mobile.

The combination fits e-commerce teams showing configurable products, and design or engineering teams publishing CAD-derived models onto marketing pages.

How to integrate Vectary 3D & AR with Webflow

Two methods carry nearly every Vectary build on Webflow: the web embed, and the Model API for scripted control of a scene already on the page. Vectary has no Webflow Marketplace app, so both start from a shared Vectary project rather than an install.

What is Vectary 3D & AR? Vectary is a browser-based platform for interactive 3D and AR content. You build or import geometry in Vectary Studio, then publish the project as a shareable link or an embed. It reads files from common CAD and design tools, and it generates the mobile AR files for you when you publish.

The web embed handles most cases: Vectary's sharing flow generates iframe markup that you paste into a Code Embed element, and it carries the viewer controls and the AR trigger without any scripting. The Model API is for scenes that have to react to the page, such as changing a material when a shopper picks a variant, and it runs on Vectary Business plans only. Most sites ship the embed first and reach for the API when a configurator or a product mapping needs it.

Embed 3D and AR models

The embed is the fastest route to a working 3D scene on a Webflow page, and it is the one to start with unless you already know the model has to respond to page state. Vectary's share flow gives you the markup, and the rest is placement. These are the parts of that flow worth knowing before you paste anything:

• Share to web: Sharing a project generates the iframe markup, which goes into a Code Embed element wherever you want the model to sit on the page.

• Native mobile AR: Switching AR on generates a GLB file for Android and a USDZ file for iOS, so the model opens in the device's built-in AR viewer with no app download.

• Texture quality per material: You can lower quality texture by texture in the sharing settings, which matters because heavier textures take longer to generate and to download.

• Live updates: Editing the project in Vectary changes what the existing embed shows after a refresh, so the markup on your page stays untouched.

• Ordinary iframe sizing: The embed behaves like any other iframe, so percentage width and height let it fit a fluid Webflow layout.

Publishing custom code embeds needs a paid Webflow site plan, which Vectary's own setup guide also lists as a prerequisite, so budget for that before you promise a client a 3D product page. One practical habit: keep a single embed per view. Several viewers on one page each pull their own geometry and textures, and that shows up in load time long before it shows up in a design review.

AR support and its limits

AR here means the phone's native AR stack, not a custom viewer, and that boundary explains most of what does and does not survive the handoff from the browser. Vectary's AR documentation spells out the constraints, and they are worth reading before you design an AR-first page:

• Animation is limited: Only the first animation tab plays in AR, and it always loops, so anything choreographed across several animations will not carry over.

• No interaction in AR: Interactions and UI elements you set up in the 3D scene do not work inside the AR view, which rules out configurators that expect taps on the model.

• Materials render differently: Not every material looks the same across iOS and Android, and double-sided materials are unsupported on iOS, so thin geometry needs checking on both.

• WebXR is still beta: Vectary's WebXR support covers Android today, while iOS needs a WebXR-capable browser such as XR Browser, and the viewer shows the WebXR trigger only where the device supports it.

Where WebXR is unavailable the viewer falls back to the standard AR trigger, and on a desktop or an older phone the visitor simply gets the interactive 3D scene. Treat AR as the bonus layer and make the 3D view carry the page on its own, because that is what most of your traffic will actually see.

Build with Webflow and the Vectary Model API

Use the Model API when the page has to drive the scene, and expect to write JavaScript. The Vectary Model API loads as a script that gives you a VctrModelApi instance wrapping postMessage calls into the embedded iframe, since the iframe otherwise isolates the scene from your page. It covers initialization and events, materials and textures, camera and animation playback, object visibility and placement, plus import and export, and it is available on Vectary Business plans only.

E-commerce product integration

Vectary documents a specific path for Webflow e-commerce that maps a folder of models to your products by name, so a product page loads its own model without per-page wiring. The Webflow e-commerce guide walks through it:

1. Create a folder in Vectary and copy its ID from the dashboard URL, the value after &folderId=.

2. Build the 3D model in that folder and name it to match the Webflow product name.

3. Share the model so the hosted viewer exists.

4. Add the product and its variants in Webflow, keeping the option and material names matched.

5. Add the embed, load Vectary's api.js as a module, and call setWebflowEcommerce("{folder_id}", "product_name").

The naming match is the whole mechanism, so a renamed variant in Webflow or a renamed material in Vectary breaks the mapping quietly: the page still loads, the model just stops changing. Agree on naming with whoever edits products before you hand the site over.

Dynamic galleries and Collection Lists

For galleries, store each project's embed URL in a Webflow CMS field and bind it inside a Collection List so every item renders its own viewer. Content editors then add models by pasting a URL rather than touching code. If the models are generated or updated in bulk, the Webflow API can write those URL fields for you, and Spline pages work the same way for teams already using that editor instead.

What you can build with Vectary 3D & AR Webflow integration

Most of what teams ship with this pairing comes down to letting a visitor turn an object over before they commit to it. The builds below all run on the same embed, with the API added only where the page has to change the model:

• Product configurators: Swap materials and colors from Webflow variant options through the Model API, and let mobile shoppers place the configured result in their own room.

• Portfolio and case-study pages: Show industrial design or architectural work as a rotatable model instead of a render, which removes the guesswork about form and scale.

• Instructional and training pages: Publish assembly steps or machinery walkthroughs as a scene a reader can orbit, with animation carrying the sequence on desktop.

• CMS-driven catalogs: Store one embed URL per Collection item so a catalog of dozens of models stays editable by the content team rather than by a developer.

For the CMS-driven version, start with our CMS API walkthrough and add the embed URL as a field on the Collection you already publish.

If you are rolling 3D embeds across a large catalog, connect the Webflow MCP server to your AI client and have it create the fields and populate the URLs, then audit which Collection items are still missing a model.