Freemius

deosebIT Soft

<p><a href="https://web-support.eu/showcase/?utm_source=wporg&utm_medium=plugin_listing&utm_campaign=demo" rel="nofollow ugc">DEMO</a></p>
<p>Let customers build their perfect product in 3D — swap materials, hide parts, and share their design. Powered by Three.js, built for WooCommerce.</p>
<p><strong>Key features:</strong></p>
<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>
<p><strong>Free vs Premium:</strong></p>
<p>The free version is fully functional for single-material customization. Premium unlocks advanced PBR workflows and productivity features for studios managing large product catalogs.</p>
<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 <strong>3D Customizer <span aria-hidden="true" class="wp-exclude-emoji">→</span> Account</strong> (added after activation).</li>
<li>Click <strong>Upgrade to Premium</strong> and complete the purchase on the checkout page.</li>
<li>Return to <strong>3D Customizer <span aria-hidden="true" class="wp-exclude-emoji">→</span> Account/Upgrade</strong> and enter your license key to activate.</li>
<li>Then in the same page download and activate the Premium version.</li>
</ol>
<p>Alternatively, click the <strong>Upgrade to Premium</strong> button that appears inside any locked premium feature panel.</p>
<h3>Source Code & Build Instructions</h3>
<p><strong>All source code is human-readable and included in this plugin.</strong></p>
<p>The <code>/js/</code> folder contains the original, uncompiled JavaScript source files:</p>
<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>
<p>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. <strong>The <code>/dist/</code> folder is auto-generated output and not part of the source code.</strong></p>
<p><strong>Rebuilding from Source:</strong></p>
<p>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>).</p>
<p>Requirements:</p>
<ul>
<li>Node.js (v14 or newer)</li>
<li>npm (included with Node.js)</li>
</ul>
<p>Build commands:<br />
    <code>npm install              # Install dependencies from package.json<br />
npm run dev             # Development build with watch mode (rebuilds on file changes)<br />
npm run build           # Production build (minified and optimized)</code></p>
<p><strong>Dependencies:</strong></p>
<ul>
<li><strong>three.js</strong> — WebGL 3D rendering library (licensed under MIT)</li>
<li><strong>jspdf</strong> — PDF generation for preview downloads (licensed under MIT)</li>
<li><strong>lucide</strong> — Icon library (licensed under MIT)</li>
<li><strong>webpack</strong> — Module bundler (licensed under MIT)</li>
</ul>
<p>All original code is GPLv2 or later. Third-party dependencies follow their respective open-source licenses, listed in <code>package.json</code>.</p>
<h3>External Services</h3>
<p>This plugin integrates with <strong>Freemius</strong> for license management, automatic updates, and premium feature delivery:</p>
<ul>
<li><strong>Service:</strong> Freemius License Management</li>
<li><strong>Server:</strong> https://freemius.com</li>
<li><strong>Purpose:</strong> Validates premium licenses, manages plugin updates, delivers premium features, and provides usage analytics</li>
<li><strong>Data Sent:</strong> Plugin activation events, license key validation, and anonymized usage analytics</li>
<li><strong>Account Required:</strong> Optional — only if upgrading to Premium</li>
<li><strong>Terms:</strong> https://freemius.com/terms/</li>
</ul>
<p>All other assets (JavaScript, CSS, images) are included locally within the plugin package. No other external services are used.</p>
<h3>Authors & Credits</h3>
<p><strong>Development</strong>: <a href="https://deosebitsoft.ro/" rel="nofollow ugc">deosebIT Soft</a></p>
<p>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.</p>
<h3>Display Methods & Hooks</h3>
<p>The 3D Customizer provides three flexible ways to display the customizer on your product pages:</p>
<p><strong>1. Automatic Display (Default)</strong><br />
The customizer is automatically displayed before the product summary.</p>
<p><strong>Setting:</strong> 3D Customizer <span aria-hidden="true" class="wp-exclude-emoji">→</span> Global Settings <span aria-hidden="true" class="wp-exclude-emoji">→</span> Display Method <span aria-hidden="true" class="wp-exclude-emoji">→</span> “Automatic (before product summary)”</p>
<p>No code required — it just works!</p>
<p><strong>2. Block (Gutenberg)</strong></p>
<p><strong>Setting:</strong> 3D Customizer <span aria-hidden="true" class="wp-exclude-emoji">→</span> Global Settings <span aria-hidden="true" class="wp-exclude-emoji">→</span> Display Method <span aria-hidden="true" class="wp-exclude-emoji">→</span> “Manual Placement”<br />
In FSE themes (Gutenberg) you can use the block <code>3D Product Customizer</code></p>
<p><strong>3. Shortcode Display</strong><br />
Display the customizer anywhere using the <code>[dprcu-customizer]</code> shortcode.</p>
<p><strong>Setting:</strong> 3D Customizer <span aria-hidden="true" class="wp-exclude-emoji">→</span> Global Settings <span aria-hidden="true" class="wp-exclude-emoji">→</span> Display Method <span aria-hidden="true" class="wp-exclude-emoji">→</span> “Manual Placement”</p>
<p>Usage:<br />
    <code>[dprcu-customizer]               — uses the current product<br />
[dprcu-customizer id="123"]      — uses a specific product ID</code></p>
<p>Perfect for custom layouts and page builders (Elementor, Divi, etc.)</p>
<p><strong>4. Manual Hook Display</strong><br />
Display the customizer using the <code>dprcu_display_customizer</code> action hook.</p>
<p><strong>Setting:</strong> 3D Customizer <span aria-hidden="true" class="wp-exclude-emoji">→</span> Global Settings <span aria-hidden="true" class="wp-exclude-emoji">→</span> Display Method <span aria-hidden="true" class="wp-exclude-emoji">→</span> “Manual Hook”</p>
<p>Usage in your theme template:<br />
    <code>php<br />
<?php do_action( 'dprcu_display_customizer' ); ?>          <br />
<?php do_action( 'dprcu_display_customizer', 123 ); ?>     </code></p>
<p><strong>Developer Hooks</strong></p>
<p>The plugin provides 18+ action hooks for extending functionality. Common hooks include:</p>
<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>
<p>For the complete list of hooks, see the <a href="https://web-support.eu/documentation/#hooks" rel="nofollow ugc">Documentation</a></p>

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.

Rownok Bosunia

<p>ThreeWP is a WordPress plugin that integrates the Three.js library and its addons into your WordPress site using a custom bundle file. This setup allows you to create and manage custom 3D models, animations, and interactive graphics directly within your WordPress theme or custom JavaScript code.</p>
<h3>Features</h3>
<ul>
<li>Custom Bundle Integration: Enqueues the Three.js library and essential addons using a custom bundle file, avoiding reliance on a CDN.</li>
<li>Easy Setup: Straightforward installation and activation process.</li>
<li>Custom Integration: No built-in shortcodes or settings; users add their own Three.js code for full customization.</li>
</ul>
<h3>Source Code</h3>
<p>The source code for the minified JavaScript bundle file used in this plugin is publicly available at the following URL: https://github.com/rondevs/threejs-custom-bundler</p>
<h3>Usage</h3>
<p>After activating the plugin, Use the <code>[use_threewp]</code> shortcode to enable Three.js for specific pages. Three.js and its addons will be available for use in your theme or custom JavaScript files. You need to manually add your Three.js code to create and manage 3D content.</p>
<h3>Example Usage</h3>
<p>Add Custom JavaScript:<br />
– Add your Three.js initialization and rendering code to your theme’s JavaScript file or use a custom script. Here’s a basic example:</p>
<pre><code>document.addEventListener('DOMContentLoaded', function () {
    if (typeof ThreeWP !== 'undefined') {
        // Destructure THREE and THREE_ADDONS from ThreeWP
        const { THREE, OrbitControls } = ThreeWP;
        // Create a scene
        const scene = new THREE.Scene();
        // Setup a camera
        const camera = new THREE.PerspectiveCamera(
            75,
            window.innerWidth / window.innerHeight,
            0.1,
            1000,
        );
        // Setup a renderer
        const renderer = new THREE.WebGLRenderer();
        // Give the renderer a width and height
        renderer.setSize(window.innerWidth, window.innerHeight);
        // Append the renderer into the html body
        document.body.appendChild(renderer.domElement);
        // Set camera position
        camera.position.z = 2;
        // Load a texture
        const textureLoader = new THREE.TextureLoader();
        const texture = textureLoader.load(
            'https://threejsfundamentals.org/threejs/resources/images/wall.jpg',
        ); // Replace with your image URL
        // Create geometry
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        // Create material
        const material = new THREE.MeshStandardMaterial({ map: texture });
        // Combine into mesh
        const sphere = new THREE.Mesh(geometry, material);
        scene.add(sphere);
        const light = new THREE.AmbientLight(0xffffff);
        scene.add(light);
        // Set up OrbitControls
        const controls = new OrbitControls(
            camera,
            renderer.domElement,
        );
        // Optional: Adjust controls settings (e.g., damping, auto-rotation)
        controls.enableDamping = true; // Adds smoothness when dragging
        controls.dampingFactor = 0.03;
        controls.autoRotate = true;
        controls.autoRotateSpeed = 2;
        function animate(t = 0) {
            requestAnimationFrame(animate);
            controls.update();
            renderer.render(scene, camera);
        }
        animate();
        // Responsive
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
    } else {
        console.error('Three.js could not be loaded.');
    }
});
</code></pre>
<p>NOTE: Destructure THREE and the addons to access from ThreeWP bundle.</p>
<h3>Tips</h3>
<p>Responsive Design: Adjust the size of the Three.js container or renderer according to your design requirements. Handle window resizing events to keep the 3D content responsive.<br />
Documentation: Refer to the Three.js documentation for detailed information on creating more complex scenes, objects, and animations.</p>
<h3>Available Tools in This Plugin</h3>
<ul>
<li><strong>THREE</strong></li>
<li><strong>Addons:</strong>
<ul>
<li>ArcballControls</li>
<li>BufferGeometryUtils</li>
<li>CameraUtils</li>
<li>CCDIKSolver</li>
<li>ConvexGeometry</li>
<li>ConvexH</li>
<li>CSS2DRenderer</li>
<li>CSS3DRenderer</li>
<li>DecalGeometry</li>
<li>DRACOLoader</li>
<li>DragControls</li>
<li>EdgeSplitModifier</li>
<li>EffectComposer</li>
<li>FirstPersonControls</li>
<li>FlyControls</li>
<li>FontLoader</li>
<li>GLTFLoader</li>
<li>KTX2Loader</li>
<li>LDrawLoader</li>
<li>Lensflare</li>
<li>LensflareElement</li>
<li>LightProbeGenerator</li>
<li>LightProbeHelper</li>
<li>Lut</li>
<li>LUT3dlLoader</li>
<li>LUTCubeLoader</li>
<li>MapControls</li>
<li>MeshSurfaceSampler</li>
<li>MMDAnimationHelper</li>
<li>MMDLoader</li>
<li>MMDPhysics</li>
<li>MTLLoader</li>
<li>OBB</li>
<li>OBJLoader</li>
<li>OrbitControls</li>
<li>ParametricGeometry</li>
<li>PCDLoader</li>
<li>PDBLoader</li>
<li>PointerLockControls</li>
<li>PositionalAudioHelper</li>
<li>RectAreaLightHelper</li>
<li>Rhino3dmLoader</li>
<li>SceneUtils</li>
<li>SDFGeometryGenerator</li>
<li>SkeletonUtils</li>
<li>Sky</li>
<li>SVGLoader</li>
<li>SVGRenderer</li>
<li>TeapotGeometry</li>
<li>TextGeometry</li>
<li>TGALoader</li>
<li>Timer</li>
<li>TrackballControls</li>
<li>TransformControls</li>
<li>VertexNormalsHelper</li>
<li>VertexTangentsHelper</li>
<li>XREstimatedLight</li>
</ul>
</li>
</ul>
<h3>v2.0.2</h3>
<ul>
<li>Updated custom bundle file.</li>
<li>Removed external dependencies from the bundle.</li>
<li>Introduced shortcode [use_threewp] to load the Three.js bundle script only on pages that contain the shortcode.</li>
</ul>
<h4>2.0.1</h4>
<ul>
<li>Added <code>defer</code> attribute to the Three.js script for improved performance and load times.</li>
<li>Updated plugin code for better compatibility with modern browsers.</li>
</ul>
<h4>2.0.0</h4>
<p>*Introduced custom bundle file integration for Three.js and essential addons like OrbitControls, GLTFLoader, EffectComposer, and BloomPass etc.<br />
*This version enhances the plugin’s capabilities and provides a more comprehensive setup for integrating Three.js with WordPress.</p>
<h4>1.1.0</h4>
<ul>
<li>Added Three.js Addons Support with CDN</li>
</ul>
<h4>1.0.0</h4>
<ul>
<li>Initial release of the Three.js CDN Integration plugin.</li>
</ul>
<h3>Contributing</h3>
<p>We welcome contributions to improve this plugin. If you have suggestions, bug reports, or feature requests, please open an issue on https://github.com/rondevs/threewp/issues.</p>
<h3>License</h3>
<p>This plugin is licensed under the GPLv2 or later. See the LICENSE file for details.</p>
<h3>Support</h3>
<p>If you encounter any issues or need assistance, please reach out via https://github.com/rondevs/threewp/issues.</p>
<p>Thank you for using ThreeWP! We hope it enhances your WordPress site with exciting 3D content.</p>


ThreeWP

Easily integrate Three.js with WordPress to create and display 3D models and animations.

3D Product Customizer & Configurator for WooCommerce vs ThreeWP