BlueGame Diversion

Immersive designer is Woocoomerce plugin to create a 3d configuration, including the following:
<ul>
<li>Create 3d configuration</li>
<li>Link 3d configuration to wc product</li>
</ul>
<h4>Presentation video</h4>
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/VU8l4goka9I?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>
<h3>Feedback</h3>
We are developing this plugin for you. 
If you discover a bug, you need a feature or have any idea to, let us know by <a href="mailto:bluegamediversion@gmail.com" title="Your Inspiration" rel="nofollow ugc">writing us</a>

Immersive designer

3D tool for WooCommerce which help you to configure and make your product customizable in 3D.

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.

Immersive designer vs 3D Product Customizer & Configurator for WooCommerce