Freemius

deosebIT Soft

<a href="https://web-support.eu/showcase/?utm_source=wporg&utm_medium=plugin_listing&utm_campaign=demo" rel="nofollow ugc">DEMO</a>
Let customers build their perfect product in 3D — swap materials, hide parts, and share their design. Powered by Three.js, built for WooCommerce.
Key features:
<ul>
<li>Real-time 3D model viewer powered by Three.js (WebGL)</li>
<li>PBR (Physically Based Rendering) material support — base color, roughness, normal, AO, metalness, and displacement maps</li>
<li>Per-step customization: define multiple configuration steps (e.g. Upper, Sole, Logo), each targeting specific model meshes</li>
<li>Bulk material assignment in the admin</li>
<li>Geometry visibility toggles — show or hide mesh groups per option</li>
<li>Undo / redo history</li>
<li>URL-based configuration sharing — customers can share their exact design via a link</li>
<li>Download a PDF preview</li>
<li>AR view on supported mobile devices</li>
<li>HDR environment map for realistic lighting</li>
<li>Background color switcher</li>
<li>Customization data saved to the WooCommerce order as line-item meta</li>
<li>Reusable texture library via a dedicated Custom Post Type</li>
</ul>
Free vs Premium:
The free version is fully functional for single-material customization. Premium unlocks advanced PBR workflows and productivity features for studios managing large product catalogs.
<h4>Free</h4>
<ul>
<li>Upload & display a 3D model</li>
<li>Base color texture or color picker per option</li>
<li>Roughness & metalness sliders</li>
<li>Customization steps</li>
<li>Viewer Only Mode</li>
<li>Camera, zoom & background settings</li>
<li>HDR environment map</li>
<li>Undo / redo, PDF, AR view</li>
<li>Set custom icons (images) for every step / options of a step</li>
</ul>
<h4>Premium (everything in Free, plus)</h4>
<ul>
<li>Material Preview</li>
<li>Multiple textures per option</li>
<li>Bulk Add Materials to a step</li>
<li>Show / Hide mesh controls per option</li>
<li>Normal, AO, metalness & displacement maps</li>
<li>Reflection intensity & displacement scale</li>
<li>Hotspots/Annotations</li>
</ul>
<h3>Upgrade to Premium</h3>
<ol>
<li>Inside WordPress admin, go to 3D Customizer → Account (added after activation).</li>
<li>Click Upgrade to Premium and complete the purchase on the checkout page.</li>
<li>Return to 3D Customizer → Account/Upgrade and enter your license key to activate.</li>
<li>Then in the same page download and activate the Premium version.</li>
</ol>
Alternatively, click the Upgrade to Premium button that appears inside any locked premium feature panel.
<h3>Source Code & Build Instructions</h3>
All source code is human-readable and included in this plugin.
The <code>/js/</code> folder contains the original, uncompiled JavaScript source files:
<ul>
<li><code>customizer.js</code> — Main 3D configurator frontend logic</li>
<li><code>model-scanner.js</code> — 3D model mesh detection and analysis</li>
<li><code>material-preview.js</code> — Material preview rendering</li>
<li><code>ui.js</code> — UI state management and interactions</li>
<li>Admin scripts in <code>/admin/js/</code> — Dashboard-specific functionality</li>
</ul>
The <code>/dist/</code> folder contains pre-compiled, production-ready bundles. These are generated by bundling the source files with their dependencies (three.js, pdf-lib, lucide) using Webpack. The <code>/dist/</code> folder is auto-generated output and not part of the source code.
Rebuilding from Source:
This plugin uses Webpack to compile and minify JavaScript, bundling dependencies to keep the plugin size manageable (avoiding the need to distribute <code>node_modules</code>).
Requirements:
<ul>
<li>Node.js (v14 or newer)</li>
<li>npm (included with Node.js)</li>
</ul>
Build commands: 
 <code>npm install # Install dependencies from package.json 
npm run dev # Development build with watch mode (rebuilds on file changes) 
npm run build # Production build (minified and optimized)</code>
Dependencies:
<ul>
<li>three.js — WebGL 3D rendering library (licensed under MIT)</li>
<li>jspdf — PDF generation for preview downloads (licensed under MIT)</li>
<li>lucide — Icon library (licensed under MIT)</li>
<li>webpack — Module bundler (licensed under MIT)</li>
</ul>
All original code is GPLv2 or later. Third-party dependencies follow their respective open-source licenses, listed in <code>package.json</code>.
<h3>External Services</h3>
This plugin integrates with Freemius for license management, automatic updates, and premium feature delivery:
<ul>
<li>Service: Freemius License Management</li>
<li>Server: https://freemius.com</li>
<li>Purpose: Validates premium licenses, manages plugin updates, delivers premium features, and provides usage analytics</li>
<li>Data Sent: Plugin activation events, license key validation, and anonymized usage analytics</li>
<li>Account Required: Optional — only if upgrading to Premium</li>
<li>Terms: https://freemius.com/terms/</li>
</ul>
All other assets (JavaScript, CSS, images) are included locally within the plugin package. No other external services are used.
<h3>Authors & Credits</h3>
Development: <a href="https://deosebitsoft.ro/" rel="nofollow ugc">deosebIT Soft</a>
This plugin was developed with attention to WordPress.org standards and is maintained by the deosebIT Soft team. For support, updates, and premium features, visit our website.
<h3>Display Methods & Hooks</h3>
The 3D Customizer provides three flexible ways to display the customizer on your product pages:
1. Automatic Display (Default) 
The customizer is automatically displayed before the product summary.
Setting: 3D Customizer → Global Settings → Display Method → “Automatic (before product summary)”
No code required — it just works!
2. Block (Gutenberg)
Setting: 3D Customizer → Global Settings → Display Method → “Manual Placement” 
In FSE themes (Gutenberg) you can use the block <code>3D Product Customizer</code>
3. Shortcode Display 
Display the customizer anywhere using the <code>[dprcu-customizer]</code> shortcode.
Setting: 3D Customizer → Global Settings → Display Method → “Manual Placement”
Usage: 
 <code>[dprcu-customizer] — uses the current product 
[dprcu-customizer id="123"] — uses a specific product ID</code>
Perfect for custom layouts and page builders (Elementor, Divi, etc.)
4. Manual Hook Display 
Display the customizer using the <code>dprcu_display_customizer</code> action hook.
Setting: 3D Customizer → Global Settings → Display Method → “Manual Hook”
Usage in your theme template: 
 <code>php 
<?php do_action( 'dprcu_display_customizer' ); ?>  
<?php do_action( 'dprcu_display_customizer', 123 ); ?> </code>
Developer Hooks
The plugin provides 18+ action hooks for extending functionality. Common hooks include:
<ul>
<li><code>dprcu_before_customizer_output</code> — Before the customizer renders</li>
<li><code>dprcu_before_canvas_container</code> — Before the 3D canvas</li>
<li><code>dprcu_before_sidebar_container</code> — Before the sidebar</li>
<li><code>dprcu_display_customizer</code> — Manual display hook (see Display Methods above)</li>
</ul>
For the complete list of hooks, see the <a href="https://web-support.eu/documentation/#hooks" rel="nofollow ugc">Documentation</a>

3D Product Customizer & Configurator for WooCommerce

An interactive Three.js-powered 3D product configurator for WooCommerce — let customers customize materials, textures, and geometry in real time.

Kauri Beguely

Code 3 lets you embed multi-object, interactive 3D scenes into your WordPress site using a simple shortcode.
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/fJ0IEpl0zS4?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
<a href="https://c33d.kaurib.com/" rel="nofollow ugc">Live Demo – Multiple Scenes</a>
Ideal for developers, designers, and digital creatives who want to create engaging 3D web experiences — without hardcoding them into templates.
<h4>Features</h4>
<ul>
<li>Upload multiple GLB models to a scene and change their transforms (position, rotation, scale)</li>
<li>Add images from media library as objects in the scene (fully transformable)</li>
<li>Embed 3D scenes via shortcode</li>
<li>Mousemove and scroll interaction</li>
<li>Switch between Orthographic and Isometric camera</li>
<li>Build a seperate composition for a defined breakpoint</li>
</ul>
<h4>How It Works</h4>
<ol>
<li>After clicking Add New Scene, you can add models by uploading GLB to the media library</li>
<li>You can change all objects position/rotation/scale in the scene editor</li>
<li>You change global settings like light intensity and scroll/mouse interaction</li>
<li>Place the shortcode anywhere you want it to display</li>
</ol>
<h4>Shortcode Examples</h4>
<pre><code>[codes_scene id="39"]
</code></pre>
By default the width will be 100% of the container the shortcode is placed and the height will be 500px
<pre><code>[codes_scene id="39" width="500px" height="30vh"]
</code></pre>
Set custom height and width of the shortcode, accepts all CSS measurements.

Code Three 3D Interactive

Easily build animated/interactive 3D scenes and embed using a shortcode. Take your site to the next dimension. Powered by Three.js

3D Product Customizer & Configurator for WooCommerce vs Code Three 3D Interactive