BSS 3D Product Viewer & AR for WooCommerce

Descripció

Bring your WooCommerce products to life with an interactive 3D viewer and mobile AR. Upload GLB/GLTF models, configure camera, lighting, hotspots, dimensions, and material variants, then let customers spin and explore products on the product page or place them in their room with augmented reality.

Features

  • Interactive 3D viewer on product pages, powered by Google’s <model-viewer> web component
  • Mobile AR via QR code (ARCore on Android, ARKit on iOS)
  • GLB / GLTF model upload through the standard WordPress media library
  • Fullscreen editor with tabs for Lighting, Camera, Materials, Animations, Hotspots, Camera Views, Dimensions, AR, Attribute Mapping, and Presentation
  • Per-material color / metallic / roughness overrides
  • Map WooCommerce product attributes (e.g. Color Red) to material changes for instant variant previews
  • Dimension overlay with cm / m / inches / feet units
  • Signed proxy URLs so the raw GLB attachment URL is never exposed — cache-friendly, and revocable at any time from the settings page
  • Show the 3D viewer inside the WooCommerce product gallery (as the first image) or as a button that opens a pop-up — your choice
  • [bss3dv_viewer id="123"] shortcode and a «BSS 3D Viewer» block to embed a model on any page or post
  • Translation-ready, RTL-ready, HPOS-compatible, no external CDN runtime dependencies

Privacy / Data

This plugin does not call any external services at runtime. All assets (model-viewer, QR generator) are bundled locally.

Bundled third-party libraries

This plugin bundles two open-source libraries. Both are GPL-compatible and their unminified/source distributions are publicly available:

  • Google <model-viewer> 4.0.0 (Apache-2.0) — source: https://github.com/google/model-viewer
  • QR code generator (MIT) — source: https://github.com/davidshimjs/qrcodejs

Captures

Blocs

Aquesta extensió proporciona 1 bloc.

  • BSS 3D Viewer Embed an interactive 3D product viewer on any page or post.

Instal·lació

  1. Upload the bss-3d-viewer folder to /wp-content/plugins/, or install the ZIP via Plugins Add New Upload Plugin.
  2. Activate the plugin through the Plugins screen.
  3. Make sure WooCommerce is installed and active.
  4. Visit WooCommerce 3D Viewer to configure global defaults.
  5. Edit any product, switch to the 3D Model tab, upload a .glb file, and configure.

PMF

What 3D file formats are supported?

GLB (binary glTF) and GLTF. GLB is recommended because it bundles geometry, materials, and textures into a single file.

Where can I get GLB models from?

You can scan real products with Polycam, Scaniverse, or KIRI Engine on a phone. Designers can export from Blender, Maya, 3ds Max, SketchUp, or any GLB-capable tool.

Does AR work on iPhone and Android?

Yes. The plugin uses standard <model-viewer> AR modes: WebXR and Scene Viewer on Android (ARCore), Quick Look on iOS (ARKit). On unsupported devices the customer sees the regular 3D viewer instead.

Is the 3D model file protected from direct download?

The plugin applies several layers to make casual download and reuse hard:

  • Models are served only through a signed proxy URL (HMAC token) — the ID cannot be guessed or enumerated. The real /wp-content/uploads/…glb path is blocked from direct web access (an Apache .htaccess / IIS web.config rule is added automatically on activation).
  • Cross-site hotlinking is blocked — the proxy only serves the model when the request comes from your own site.
  • Opening a model URL directly in the address bar is blocked; only the viewer can fetch it.
  • Right-click «save» and drag-save are disabled on the viewer.
  • If a link ever leaks, WooCommerce 3D Viewer Settings Rotate model links invalidates every URL issued so far in one click.

Please note: any 3D model rendered in a browser must send its data to the visitor’s device, so a determined user with developer tools can still capture it. This is friction against casual copying, not unbreakable DRM.

I use Nginx — how do I block direct model downloads?

The automatic .htaccess / web.config rules only apply to Apache and IIS. On Nginx, add this to your server block and reload:

location ~* /wp-content/uploads/.*\.(glb|gltf)$ { deny all; }

The plugin shows an admin notice with this snippet when it detects Nginx.

Does it support HPOS (High-Performance Order Storage)?

Yes. The plugin only touches product post meta and options, and declares HPOS compatibility.

Does it support the new block-based product editor?

Not in v1.0.0. The classic product data tab is supported. Block-editor support is planned for a future release.

Can I turn the AR button off for the whole store?

Yes. WooCommerce 3D Viewer Settings General AR Button Disabled for all models. That hides AR everywhere: the «View in Your Room» button, the AR button inside the gallery / shortcode / block viewer, the QR pop-up, and the mobile AR link.

An individual model can override it in either direction. Open the model’s 3D editor, go to Presentation AR Button, and choose «Always on» to keep AR for that one model even while the store-wide switch is off, or «Always off» to hide it for that model only. The default, «Use global setting», follows the store-wide switch. The per-model choice always wins over the global one.

Can I show the 3D viewer inside the product gallery instead of a button?

Yes. Go to WooCommerce 3D Viewer Display Mode and choose «Product gallery» — the model becomes the first gallery image and the «View in 3D» button is hidden. This uses the standard WooCommerce gallery; some themes or page builders that replace the gallery may not support it, in which case use Modal mode or the shortcode/block instead.

Can I embed a 3D model on any page or post?

Yes. Use the shortcode [bss3dv_viewer id="123"] (the product ID is shown in the product’s 3D editor, on the Output tab), or add the «BSS 3D Viewer» block and enter the product ID. Both accept width, height, and ar options, e.g. [bss3dv_viewer id="123" width="100%" height="480px" ar="yes"].

Does it work with caching and speed-optimization plugins?

Yes, out of the box — no exclusions to configure. Tested against SiteGround Optimizer, WP Rocket, LiteSpeed Cache, W3 Total Cache, Autoptimize, Perfmatters, and Cloudflare.

Two things make this work. Signed model URLs are stable, so they keep working no matter how long a page sits in a full-page cache. And the plugin marks its own scripts as «do not optimize», because the <model-viewer> library is an ES module: combining or minifying it into a regular script breaks it. The plugin registers the official exclusion filters for the major optimization plugins and adds the standard opt-out attributes (data-no-optimize, data-noptimize, data-no-minify, data-no-defer, data-cfasync, data-wpfc-render, data-pagespeed-no-defer, nowprocket) to every script it loads.

If a viewer still fails to load, open your browser console and look for a [BSS 3D Viewer] message — it names the cause. The plugin also tries to reload the library by itself when it detects that something stripped it. As a manual fix, exclude model-viewer.min.js from your optimizer’s JavaScript combine, minify and defer settings.

I rotated the model links and now the viewer is broken.

Rotating invalidates every model URL issued so far, but pages already sitting in a full-page cache still contain the old ones. Clear your page cache and the new links go out with the next page view.

Ressenyes

23 de agost de 2026
This plugin is an exceptional addition to any WooCommerce store. The 360-degree product rotation and seamless rendering create a highly interactive visual experience for shoppers. It performs reliably on mobile devices and features a user-friendly setup. The most impressive capability is the integrated 3D viewer editor within the admin dashboard, which makes customization effortless.
Llegiu totes les 2 ressenyes

Col·laboradors i desenvolupadors

«BSS 3D Product Viewer & AR for WooCommerce» és programari de codi obert. La següent gent ha col·laborat en aquesta extensió.

Col·laboradors

Registre de canvis

1.0.1

  • Added: a store-wide AR Button setting (Settings General) that turns the AR button off across every model at once. An individual model can still override it from its 3D editor (Presentation AR Button) with «Always on» or «Always off» — the per-model choice wins.
  • Fixed: the AR setting was ignored by the gallery viewer, the [bss3dv_viewer] shortcode, the block, and the standalone AR page — turning AR off left an AR button in the gallery and a working mobile AR link. All AR surfaces now share one setting.
  • Fixed: the 3D viewer failed to load on sites with full-page caching enabled. Signed model URLs expired after five minutes, so any page served from a cache handed the browser a dead link. Model URLs are now stable and survive caching.
  • Fixed: the viewer also failed after five minutes on the first page view without any cache — opening the pop-up later than that returned an expired link.
  • Fixed: JavaScript optimization plugins broke the viewer by combining, minifying or deferring the <model-viewer> library, which is an ES module. The plugin now marks its scripts as «do not optimize» and registers the official exclusion filters for SiteGround Optimizer, WP Rocket, LiteSpeed Cache, Autoptimize, Perfmatters and Cloudflare Rocket Loader.
  • Fixed: a delay-JavaScript plugin’s type marker was being stripped from our script tag, making the two features fight each other.
  • Added: the viewer now detects when the library was stripped, reloads it by itself, and logs a [BSS 3D Viewer] message explaining the cause. Failures used to be completely silent.
  • Added: Rotate model links on the settings page, invalidating every signed model URL issued so far.
  • Fixed: in gallery display mode, dragging to rotate the model on a phone or tablet also swiped the product gallery to the next image, making the model impossible to turn. Drag gestures that start on the viewer now stay in the viewer. Vertical page scrolling and the AR button are unaffected, and swiping the gallery’s other slides still works.
  • Fixed: in gallery display mode a phone showed two AR buttons — one inside the gallery viewer and one next to Add to Cart. Desktop only showed one, because the in-viewer button appears solely where AR is native. The gallery slide no longer carries its own AR button; the one next to Add to Cart is used in both modes and works everywhere (QR pop-up on desktop, AR deep link on mobile).
  • Fixed: the «View in Your Room» label flashed up as plain text over the gallery image while the 3D viewer was still loading. The viewer’s slotted controls are now hidden until the <model-viewer> element is ready.
  • Fixed: on phones and tablets, where AR is supported, that AR button then stayed on the model as an unstyled browser button — it had only ever been styled on the standalone AR page. It now uses the plugin’s accent colour and sits at the bottom of the viewer.
  • Fixed: Uncaught ReferenceError: jQuery is not defined. Because the viewer’s scripts are excluded from JS optimisation (they have to be — model-viewer is an ES module), an optimiser was free to defer or delay jQuery past them. Cloudflare Rocket Loader does exactly this. The viewer now waits for jQuery instead of assuming it, and reports a clear console message if it never arrives.
  • Fixed: the localized product data is now read defensively, so an optimiser that moves or delays inline scripts degrades to a console message rather than an uncaught error that disabled every button.
  • Fixed: unpublishing, trashing or making a product private did not stop its 3D model from being served to anyone holding an older link. The model stream now applies the same visibility rule as the AR page; editors can still preview drafts.
  • Improved: models are now cached by the visitor’s browser instead of being re-downloaded on every product page view.
  • Removed: the editor’s «Best Practices» tab. Its three toggles («Hide bottom progress bar», «Use custom AR button», «Use custom AR prompt») were never wired to anything — they saved a value that no code read. Removed rather than left as controls that appear to do something. Nothing else changes; the viewer already uses a custom AR button everywhere.

1.0.0

  • Initial public release.