Introduction

Let people see your product from every side, and then in their own room.

Softicon Model Viewer adds one block, 3D Model Viewer, to the WordPress editor. Drop in a GLB or glTF file and your visitors can:

• Rotate the model and zoom into every detail.
• Watch it turn slowly on its own.
• Tap View in your room on a phone or tablet and place the model in their own space with augmented reality (Android Scene Viewer, iPhone and iPad Quick Look, and WebXR).

It is perfect for furniture, lighting, decor, fashion, art, products and anything people want to look at from every side.

Everything in one block

• Your model: upload a GLB or glTF file, pick one from the media library, or add one from a URL.
• Accessibility: alternative text, plus an optional poster image that shows while the model loads.
• Interaction: rotate and zoom, automatic rotation, and a small hint that invites visitors to drag.
• Augmented reality: turn the “View in your room” button on or off, and write your own button text.
• Appearance: height, brightness, shadow strength, and two lighting styles (soft studio or classic).
• Camera: choose the starting angle, or let the viewer pick one for you.
• Hotspots: click on the model to add numbered points, each with a label and a short text. They turn with the model, fade when they are behind it, and open their text on click.
• Design: caption, and wide or full width.

3D for your WooCommerce products

Running a shop? Give any product its own 3D model:

• A 3D model tab on the product screen: pick a GLB or glTF file, an optional poster image, and turn “View in your room” on or off.
• A View in 3D button appears under the product images. It opens the model in a popup where shoppers turn it, zoom in and, on a phone, place it in their own room.
• Hotspots on the product’s model: name its parts right on a preview in the 3D model tab, and shoppers see them in the popup.
• The model loads only when the button is clicked, so your product pages stay fast. Products without a model are not changed at all.
• Works with block themes (like Twenty Twenty-Five) and classic themes (like Storefront).

Why you’ll like it

• A dashboard that sets you up. Under Model Viewer in the admin menu: a checklist that ticks itself as you add models, pages, products and hotspots, your 3D content at a glance, and the video tutorials. No account to create. Sharing usage data is optional and off until you allow it.
• Everything is free. Augmented reality, posters, lighting and every other setting are included. There is no Pro version.
• Fast pages. The 3D viewer only loads on pages that use the block, and the model is lazy-loaded.
• Works with any theme, and with the block editor you already know.
• Readable code. The full, readable source ships with the plugin, so it is easy to review and extend.

Video tutorial

See every step in about 80 seconds: installing the plugin, adding a 3D model to a WooCommerce product, and showing one on any page with the block.

Privacy

The 3D viewer on your pages sets no cookies and contacts no external service: models are loaded from your own media library or from the URL you enter.

In the admin, after activation, the plugin asks once if you want to share basic data with us through Freemius (wp.freemius.com, api.freemius.com). It is optional, and nothing about you or your site is sent unless you click “Allow & Continue”. See “Does the plugin collect any data?” below. Freemius terms and privacy policy.

Support

Need help, found a bug, or have an idea for a new feature? We are happy to help.

• Email: softiconai@gmail.com
• Forum: open a topic in the support forum.
• Video tutorial: watch on YouTube

To help us answer faster, please include your WordPress version, your theme, and a link to the page (or the model file).

Third-party libraries

The block loads one bundled library, model-viewer by Google, from the plugin folder. Nothing is loaded from a CDN or another server.

• @google/model-viewer 4.4.0, Apache License 2.0. Source: https://github.com/google/model-viewer/tree/v4.4.0
• It includes three.js r183 (MIT, https://github.com/mrdoob/three.js), Lit (BSD-3-Clause, https://github.com/lit/lit) and @monogrid/gainmap-js (MIT, https://github.com/MONOGRID/gainmap-js).

The minified file vendor/model-viewer/model-viewer.min.js is the unmodified dist/model-viewer-umd.min.js from the npm package. The readable, non-minified build of the same version is included next to it as vendor/model-viewer/model-viewer.js, together with the Apache license and a list of all bundled projects in vendor/model-viewer/THIRD-PARTY-NOTICES.txt.

Models in the screenshots and videos

The screenshots, banner and videos use sample models from the Khronos glTF Sample Assets (https://github.com/KhronosGroup/glTF-Sample-Assets): Anisotropy Barn Lamp by Eric Chadwick, © 2023 Wayfair LLC (CC BY 4.0), Diffuse Transmission Plant by Eric Chadwick (CC BY 4.0) and Rico Cilliers (CC0), and Lantern (CC0). They are not included in the plugin.

Source code of this plugin

The plugin ships the readable source of the block next to the built files:

• src/ holds the source: src/index.js and src/Components/ (editor, in JSX), src/render.php (front end), src/block.json (block settings) and the SCSS files. src/vendor/softicon-tools/ holds the shared settings panel components and styles.
• build/ holds the files WordPress loads, made from src/ with @wordpress/scripts.

To build it yourself, run npm install and then npm run build in the plugin folder (see package.json).