3D model viewer with WooCommerce AR and webcam virtual try-on for glasses &amp; caps — view in 3D, place in AR on iOS &amp; Android, no app needed.

3D Viewer – 3D Model Viewer – Augmented Reality – Virtual Try On

A complete 3D model viewer for WordPress and WooCommerce with built-in augmented reality and webcam virtual try-on — no apps, no coding. Let shoppers rotate, zoom and pan your <code>.glb</code>/<code>.gltf</code> models, place products in their real-world space on Android and iOS, or try on glasses and caps with the built-in AtlasTryOn viewer. Everything runs in the browser: the camera feed never leaves the shopper&#8217;s device, there&#8217;s no app to install and no account to create. All free, with unlimited model uploads.
🚀 AtlasTryOn — virtual try-on for glasses &amp; caps, built into the free plugin. Shoppers can try on glasses, sunglasses and hats online right from the product page using their webcam — no app downloads, no extra setup, and the camera never leaves their device.
🎁 14-day Pro free trial included for the full AtlasTryOn Pro experience — head-pose tracking, HD watermark-free snapshots, multi-face detection, live calibration. <a href="https://wpaugmentedreality.com/pricing/?utm_source=wordpress.org&amp;utm_medium=readme&amp;utm_campaign=atlastryon_launch&amp;utm_content=trial_cta" rel="nofollow ugc">Start your free trial →</a>
<h4>Core features (Free):</h4>
<ul>
<li>Rotate, zoom and pan 3D models on every product page (Google <code>&lt;model-viewer&gt;</code> engine)</li>
<li>Mobile AR: floor + wall placement via Scene Viewer (Android) and AR Quick Look (iOS, <code>.usdz</code>)</li>
<li>Unlimited model uploads — no caps on file count or size</li>
<li>WooCommerce native: automatic &#8220;View in AR&#8221; button, simple + variable products</li>
<li>Shortcode <code>[atlas_ar]</code> + Gutenberg block for posts/pages</li>
<li>QR code card for cross-device scanning</li>
<li>AtlasTryOn webcam try-on for glasses, sunglasses, caps — unlimited products</li>
<li>AI 3D model generator (text-to-model) — turn a text prompt into a 3D model using either Tripo3D or Meshy AI (admin-only; bring your own API key)</li>
<li>Privacy by design — the camera feed stays on the shopper&#8217;s device; nothing is uploaded</li>
</ul>
<h4>Pro adds (separately installed plugin):</h4>
<ul>
<li>Server-side compression for large model files (~80% size reduction)</li>
<li>Interactive hotspots, real-world dimensions, image/model sliders in the metabox</li>
<li>HD watermark-free try-on snapshots, head-pose tracking, multi-face detection, live calibration</li>
<li>Bulk compression, analytics dashboard, multi-post-type AR, format conversion (FBX/OBJ/USDZ)</li>
<li>AI image-to-model generation — turn a product photo into a 3D model with Tripo3D or Meshy AI</li>
</ul>
<a href="https://wpaugmentedreality.com/pricing/?utm_source=wordpress.org&amp;utm_medium=readme&amp;utm_campaign=atlastryon_launch&amp;utm_content=pricing_link" rel="nofollow ugc">Pro pricing →</a> · <a href="https://wpaugmentedreality.com/shop/?utm_source=wordpress.org&amp;utm_medium=readme&amp;utm_campaign=atlastryon_launch&amp;utm_content=demo_shop" rel="nofollow ugc">Live demos →</a> · <a href="https://www.youtube.com/playlist?list=PLGdmFn36qCRKp58yEtIh747lhw3EM6m8K" rel="nofollow ugc">Video tutorials →</a>
<h3>3D Model Generation</h3>
<h4>How to Generate 3D Models with Tripo3D API</h4>
<ol>
<li>Generate your API key from the <a href="https://www.tripo3d.ai/api" rel="nofollow ugc">Tripo3D API</a>.</li>
<li>Copy the API key.</li>
<li>Go to the AtlasAR metabox in the post edit screen.</li>
<li>Click on the Integration tab.</li>
<li>Paste your API key in the Integration settings and save.</li>
<li>Now, go back to the Edit Post page.</li>
<li>In the AtlasAR metabox, enter your prompt for the 3D model.</li>
<li>Click on the Generate Model button.
<ul>
<li>A <code>task_id</code> will be generated.</li>
<li>Wait a few seconds while the model is being processed.</li>
</ul>
</li>
<li>Once the model is generated, a 3D preview will appear on the right side.</li>
<li>Click on the Save This Model button to save the generated model and update the post data.</li>
<li>After saving, you can view the generated 3D model on the front end of your site.</li>
</ol>
<h4>How to Generate 3D Models with Meshy AI API</h4>
<ol>
<li>Generate your API key from the <a href="https://www.meshy.ai/settings/api" rel="nofollow ugc">Meshy AI API</a>.</li>
<li>Copy the API key.</li>
<li>Go to the AtlasAR metabox in the post edit screen.</li>
<li>Click on the Integration tab.</li>
<li>Choose Meshy AI 3D as the API, paste your API key, and save.</li>
<li>Now, go back to the Edit Post page and open the AtlasAR metabox.</li>
<li>Pick a model type — text_to_model (write a text prompt) or image_to_model (paste a public image URL, or pick a product image).</li>
<li>Click on the Generate Model button.
<ul>
<li>A <code>task_id</code> will be generated.</li>
<li>Wait a few seconds while the model is being processed.</li>
</ul>
</li>
<li>Once the model is generated, a 3D preview will appear on the right side.</li>
<li>Click on the Save This Model button to save the generated model and update the post data.</li>
<li>After saving, you can view the generated 3D model on the front end of your site.</li>
</ol>
<h3>How It Works &#8211; 3 Simple Steps</h3>
<ol>
<li>Install &amp; Activate:
<ul>
<li>In your WordPress admin panel, go to Plugins → Add New.</li>
<li>Search for &#8220;AR VR 3D Model Try On&#8221;.</li>
<li>Click &#8220;Install Now&#8221; and then &#8220;Activate.&#8221;</li>
<li>Find the &#8220;AtlasAR&#8221; menu.</li>
<li>Setup you basic settings.</li>
</ul>
</li>
<li>Upload Models:
<ul>
<li>Navigate to a WordPress post eiditing screen</li>
<li>Find the &#8220;AtlasAR&#8221; Metabox.</li>
<li>Select the place where you want to display the 3D Model like Floor/Wall etc.</li>
<li>Upload your Android Model: <code>.glb/.gltf</code> file.</li>
<li>Upload your iOS Model: <code>.usdz</code> file.</li>
<li>Optionally, add a Poster Image (thumbnail) for the 3D model viewer.</li>
<li>If your site is WooCommerce Store then first go to settings page of the plugin. And Look &#8220;Enable AR For Post Types&#8221; by default If would be <code>post' change it to</code>product&#8217; and save.</li>
</ul>
</li>
<li>Display 3D Model Viewer:
<ul>
<li>The &#8220;View in AR &#8221; button is automatically placed on your WordPress Posts/WooCommerce product pages.</li>
<li>For manual placement in other locations, you can use the shortcode: <code>[atlas_ar]</code>.</li>
<li>Pro Users: Enable dimensions, hotspots, and sliders from the AtlasAR metabox settings.</li>
</ul>
</li>
</ol>
<h3>Real-World 3D Viewer Applications</h3>
<ul>
<li>🪑 Furniture Stores: &#8220;Customers visualize sofas in their living rooms before buying.&#8221; <a href="https://wpaugmentedreality.com/product/office-chair-view-in-augmented-reality-3d/?utm_source=wordpress.org&amp;utm_medium=readme&amp;utm_campaign=atlastryon_launch&amp;utm_content=demo_office_chair" rel="nofollow ugc">Office Chair Demo</a></li>
<li>🖼️ Home Decor: &#8220;Preview wall art placement through phone camera.&#8221; <a href="https://wpaugmentedreality.com/product/office-chair-view-in-augmented-reality-3d/?utm_source=wordpress.org&amp;utm_medium=readme&amp;utm_campaign=atlastryon_launch&amp;utm_content=demo_office_chair" rel="nofollow ugc">Dining Armchair Demo</a></li>
<li>🛋️ Pro Feature &#8211; Dimensions: Show exact measurements in AR to answer &#8220;will it fit?&#8221; questions</li>
<li>🎨 Pro Feature &#8211; Configurators: Let customers customize furniture colors and materials before purchase</li>
</ul>
<h3>Competitive Advantages</h3>
Free Model Limits 
&#8211; Our Plugin: Unlimited ⭐ 
&#8211; Others: Often 1–10 models
iOS AR Support 
&#8211; Our Plugin: Full native .USDZ compatibility ⭐ 
&#8211; Others: Android-only or limited iOS support
WooCommerce Integration 
&#8211; Our Plugin: Native, seamless implementation ⭐ 
&#8211; Others: May require add-ons or hacks
Model Compression 
&#8211; Our Plugin: Automatic compression up to 70% savings ⭐ 
&#8211; Others: Manual compression required
Product Dimensions 
&#8211; Our Plugin: Real-world size display in AR (Pro) ⭐ 
&#8211; Others: No dimension features
<h3>Pro Version Features</h3>
🎯 Upgrade to Pro and unlock powerful features that boost conversions and reduce returns! 
👉 <a href="https://wpaugmentedreality.com/pricing/?utm_source=wordpress.org&amp;utm_medium=readme&amp;utm_campaign=atlastryon_launch&amp;utm_content=pricing_link" rel="nofollow ugc">See Pro Pricing Plans</a>
<h3>Available Now in Pro:</h3>
⭐ Dimensions Display: 
* Show product measurements (length, width, height) directly in AR view 
* Help customers answer &#8220;will it fit?&#8221; before buying 
* Reduce returns caused by size mismatches 
* Perfect for furniture, appliances, home decor
⭐ Interactive Hotspots: 
* Add clickable information points on your 3D models 
* Educate customers about product features, materials, care instructions 
* Increase customer confidence and reduce support questions 
* Perfect for complex products like furniture, electronics, jewelry
⭐ Product Configurators (Sliders): 
* Let customers customize colors, materials, finishes, and options 
* Increase engagement and time spent viewing products 
* Higher average order value through personalization 
* Perfect for furniture, fashion, custom products
⭐ Automatic Model Compression: 
* Reduce 3D file sizes by up to 70% automatically 
* Faster loading times = better user experience 
* Uses industry-standard Draco geometry compression 
* Basis Universal texture compression for optimal quality 
* Keeps original files for backup
⭐ Per-Variation 3D Models: 
* Upload different 3D models for each product variation (color, size, style) 
* Critical for WooCommerce stores with variable products 
* Automatic model switching when customers select variations
⭐ Glass Mode Virtual Try-On: 
* Enable realistic virtual try-ons for eyewear and jewelry 
* Face tracking for accurate placement 
* Unique feature &#8211; no other AR plugin has this!
⭐ Multi-Model Scenes: 
* Display multiple products together in AR 
* Room planning and outfit builders 
* Advanced configurators
⭐ AI Image-to-3D Generation: 
* Turn a product photo directly into a 3D model — no prompt writing needed 
* Works with both Tripo3D and Meshy AI (bring your own API key) 
* Complements the free text-to-model generation available in the free version
<h3>Coming Soon in Pro:</h3>
🚀 Advanced Analytics Dashboard (Q1 2026): 
* Track AR engagement, device types, placement attempts 
* See which products perform best in AR 
* Prove ROI with conversion tracking 
* Integration with Google Analytics
🚀 Background Processing &amp; Bulk Compression (Q2 2026): 
* Compress large files in background (no upload delays) 
* Bulk compress your entire product catalog with one click 
* Queue system for processing multiple models
🚀 Desktop WebAR (Q3 2026): 
* AR experiences on desktop browsers (no phone needed) 
* Broader accessibility for all users
<h3>Pro Support &amp; Updates:</h3>
<ul>
<li>Priority email support (24-hour response time)</li>
<li>Regular feature updates</li>
<li>Early access to beta features</li>
<li>Dedicated documentation</li>
</ul>
👉 <a href="https://wpaugmentedreality.com/pricing/?utm_source=wordpress.org&amp;utm_medium=readme&amp;utm_campaign=atlastryon_launch&amp;utm_content=pricing_link" rel="nofollow ugc">Upgrade to Pro Now</a> 
💰 Starter Plan: Only $49.99/year &#8211; All Pro features for 1 site
<h3>Technical Specifications</h3>
<ul>
<li>Supported 3D Formats: <code>.glb</code>, <code>.gltf</code> (for Android/Web 3D), <code>.usdz</code> (for iOS AR Quick Look).</li>
<li>Mobile Device Requirements: Android 9.0+ with ARCore support, iOS 12+ with ARKit support.</li>
<li>WooCommerce Compatibility: Version 3.0 and above.</li>
<li>WordPress Compatibility: Version 5.0 and above.</li>
<li>Performance: Models load asynchronously. Lazy loading implemented for archive pages to minimize performance impact. Optimized for mobile 3D rendering.</li>
<li>Pro Compression: Draco geometry compression + Basis Universal texture compression for up to 70% file size reduction.</li>
</ul>
<h3>Start Your AR Journey Today</h3>
<ol>
<li>Install the Free Version: Get started with unlimited 3D model uploads, no credit card needed.</li>
<li>Upload Your First Model: Add a <code>.glb/.gltf</code> file for Android/Web and a <code>.usdz</code> file for iOS to a product.</li>
<li>Watch Engagement Soar: Provide interactive AR experiences.</li>
<li>Upgrade to Pro: Unlock dimensions, hotspots, compression, and configurators to maximize conversions.</li>
</ol>
👉 <a href="https://wpaugmentedreality.com/pricing/?utm_source=wordpress.org&amp;utm_medium=readme&amp;utm_campaign=atlastryon_launch&amp;utm_content=pricing_link" rel="nofollow ugc">See What Pro Can Do For You</a>
<h3>CHECK OUT OUR OTHER ADDONS 👑:</h3>
🔥 <a href="https://wordpress.org/plugins/text-to-audio/" rel="ugc">Text To Speech TTS Accessibility</a> – Text To Speech TTS Accessibility is the most user-friendly Text-to-Speech tts plugin. Just install and automatically add a text to audio player to your WordPress site!. 
🔥 <a href="https://wordpress.org/plugins/smart-local-ai/" rel="ugc">Smart Local AI</a> 
🔥 <a href="https://wordpress.org/plugins/ai-workflow-automation-ai-agent-hub/" rel="ugc">Atlas AI Connector</a>
<h3>External services</h3>
The third-party services below may be contacted. Each is used only when its feature is used. No visitor or product data is sent unless noted.
<h4>MediaPipe face tracking (Google / jsDelivr)</h4>
Powers the webcam Try-On feature. Only after a visitor clicks &#8220;Try It On&#8221;, the browser downloads the MediaPipe WASM runtime from <code>cdn.jsdelivr.net</code> and the face-landmark model from <code>storage.googleapis.com</code>, then caches them. A plain HTTPS GET for static assets — no site, user, or visitor data is sent. The camera feed stays on the visitor&#8217;s device. 
jsDelivr — Terms: https://www.jsdelivr.com/terms Privacy: https://www.jsdelivr.com/terms/privacy-policy-jsdelivr-net 
Google — Terms: https://policies.google.com/terms Privacy: https://policies.google.com/privacy
<h4>3D model generation (Tripo3D / Meshy AI)</h4>
Admin-only. Only after an administrator enters their own API key and clicks &#8220;Generate 3D Model&#8221; is a request sent — to <code>api.tripo3d.ai</code> or <code>api.meshy.ai</code> — containing the admin&#8217;s text prompt or image plus their API key. No site visitor data is sent. 
&#8211; Tripo3D — API keys: https://platform.tripo3d.ai/api-keys, Terms: https://www.tripo3d.ai/terms, Privacy: https://www.tripo3d.ai/privacy 
&#8211; Meshy AI — API keys: https://www.meshy.ai/settings/api, Terms: https://www.meshy.ai/terms-of-use, Privacy: https://www.meshy.ai/privacy-policy
<h4>AtlasAiDev tracker (track.atlasaidev.com, icanhazip.com)</h4>
Opt-in, off by default (revocable anytime). When enabled, sends usage telemetry — plugin/WordPress/PHP versions, site URL/name/language, active+inactive plugin counts, admin name and email, and the site&#8217;s outbound public IP (resolved via icanhazip.com) — so AtlasAiDev can prioritise improvements. No visitor or product data is sent. 
AtlasAiDev — Terms: https://atlasaidev.com/terms-and-conditions/ Privacy: https://atlasaidev.com/privacy-policy/ 
icanhazip.com (Cloudflare) — Privacy: https://www.cloudflare.com/privacypolicy/
<h4>AtlasAiDev plugin catalog (raw.githubusercontent.com)</h4>
Fetches <code>https://raw.githubusercontent.com/atlasaidev/plugins/main/plugins.json</code> only when an admin opens the &#8220;Other AtlasAiDev Plugins&#8221; screen (cached 24h). No site or user data is sent beyond standard HTTP headers. 
GitHub, Inc. — Terms: https://docs.github.com/en/site-policy/github-terms/github-terms-of-service Privacy: https://docs.github.com/en/site-policy/privacy-policies/github-general-privacy-statement
<h4>Bundled decoders (not an external service)</h4>
The DRACO, KTX2/Basis, and three.js Lottie decoders that <code>&lt;model-viewer&gt;</code> needs are bundled under <code>public/js/vendor/decoders/</code> and served from your own site, so the plugin never fetches them from <code>gstatic.com</code> or <code>cdn.jsdelivr.net</code>.
<h3>Source code</h3>
The complete, unminified source (GPLv3) is on GitHub: https://github.com/azizulhasan/ar-vr-3d-model-try-on. The git tag matching each wp.org version is the exact source used for that release ZIP. Rebuild from a clean clone with <code>composer install &amp;&amp; npm install &amp;&amp; npm run production</code>.

Alternative Plugins for

Discover the Lists with 3D Viewer – 3D Model Viewer – Augmented Reality – Virtual Try On