Title: 3D Product Customizer & Configurator for WooCommerce Author: deosebIT Soft Published: 17.4.2026 Last modified: 5.6.2026 --- Hae lisäosia ![](https://ps.w.org/3d-product-customizer/assets/banner-772x250.png?rev=3510736) ![](https://ps.w.org/3d-product-customizer/assets/icon-256x256.png?rev=3510736) # 3D Product Customizer & Configurator for WooCommerce [deosebIT Soft](https://profiles.wordpress.org/deosebitsoft/) [Lataa](https://downloads.wordpress.org/plugin/3d-product-customizer.3.6.1.zip) [Live Preview](https://fi.wordpress.org/plugins/3d-product-customizer/?preview=1) * [Tiedot](https://fi.wordpress.org/plugins/3d-product-customizer/#description) * [Arvostelut](https://fi.wordpress.org/plugins/3d-product-customizer/#reviews) * [Asennus](https://fi.wordpress.org/plugins/3d-product-customizer/#installation) * [Kehitys](https://fi.wordpress.org/plugins/3d-product-customizer/#developers) [Tuki](https://wordpress.org/support/plugin/3d-product-customizer/) ## Kuvaus [DEMO](https://web-support.eu/customizer/showcase/?utm_source=wporg&utm_medium=plugin_listing&utm_campaign=demo) 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:** * Real-time 3D model viewer powered by Three.js (WebGL) * PBR (Physically Based Rendering) material support — base color, roughness, normal, AO, metalness, and displacement maps * Per-step customization: define multiple configuration steps (e.g. Upper, Sole, Logo), each targeting specific model meshes * Bulk material assignment in the admin * Geometry visibility toggles — show or hide mesh groups per option * Undo / redo history * URL-based configuration sharing — customers can share their exact design via a link * Download a PDF preview * AR view on supported mobile devices * HDR environment map for realistic lighting * Background color switcher * Customization data saved to the WooCommerce order as line-item meta * Reusable texture library via a dedicated Custom Post Type **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. #### Free * Upload & display a 3D model * Base color texture or color picker per option * Roughness & metalness sliders * Customization steps * Viewer Only Mode * Camera, zoom & background settings * HDR environment map * Undo / redo, PDF, AR view * Set custom icons (images) for every step / options of a step #### Premium (everything in Free, plus) * Material Preview * Multiple textures per option * Bulk Add Materials to a step * Show / Hide mesh controls per option * Normal, AO, metalness & displacement maps * Reflection intensity & displacement scale * Hotspots/Annotations ### Upgrade to Premium 1. Inside WordPress admin, go to **3D Customizer Account** (added after activation). 2. Click **Upgrade to Premium** and complete the purchase on the checkout page. 3. Return to **3D Customizer Account/Upgrade** and enter your license key to activate. 4. Then in the same page download and activate the Premium version. Alternatively, click the **Upgrade to Premium** button that appears inside any locked premium feature panel. ### Source Code & Build Instructions **All source code is human-readable and included in this plugin.** The `/js/` folder contains the original, uncompiled JavaScript source files: * `customizer.js` — Main 3D configurator frontend logic * `model-scanner.js` — 3D model mesh detection and analysis * `material-preview.js` — Material preview rendering * `ui.js` — UI state management and interactions * Admin scripts in `/admin/js/` — Dashboard-specific functionality The `/dist/` 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 `/dist/` 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 `node_modules`). Requirements: * Node.js (v14 or newer) * npm (included with Node.js) Build commands: `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) **Dependencies:** * **three.js** — WebGL 3D rendering library (licensed under MIT) * **jspdf** — PDF generation for preview downloads (licensed under MIT) * **lucide** — Icon library (licensed under MIT) * **webpack** — Module bundler (licensed under MIT) All original code is GPLv2 or later. Third-party dependencies follow their respective open-source licenses, listed in `package.json`. ### External Services This plugin integrates with **Freemius** for license management, automatic updates, and premium feature delivery: * **Service:** Freemius License Management * **Server:** https://freemius.com * **Purpose:** Validates premium licenses, manages plugin updates, delivers premium features, and provides usage analytics * **Data Sent:** Plugin activation events, license key validation, and anonymized usage analytics * **Account Required:** Optional — only if upgrading to Premium * **Terms:** https://freemius.com/terms/ All other assets (JavaScript, CSS, images) are included locally within the plugin package. No other external services are used. ### Authors & Credits **Development**: [deosebIT Soft](https://deosebitsoft.ro/) 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. ### Display Methods & Hooks 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. Shortcode Display** Display the customizer anywhere using the `[dprcu-customizer]` shortcode. **Setting:** 3D Customizer Global Settings Display Method ”Shortcode Only” Usage: `[dprcu-customizer]` Perfect for custom layouts and page builders (Elementor, Divi, etc.) **3. Manual Hook Display** Display the customizer using the `dprcu_display_customizer` action hook. **Setting:** 3D Customizer Global Settings Display Method ”Manual Hook (do_action)” Usage in your theme template: `php **Developer Hooks** The plugin provides 18+ action hooks for extending functionality. Common hooks include: * `dprcu_before_customizer_output` — Before the customizer renders * `dprcu_before_canvas_container` — Before the 3D canvas * `dprcu_before_sidebar_container` — Before the sidebar * `dprcu_display_customizer` — Manual display hook (see Display Methods above) For the complete list of hooks, see the [Documentation](https://web-support.eu/customizer/documentation/#hooks) ## Kuvankaappaukset [⌊Front-end 3D configurator on a WooCommerce product page — rotate the model and switch materials in real time.⌉⌊Front-end 3D configurator on a WooCommerce product page — rotate the model and switch materials in real time.⌉[ Front-end 3D configurator on a WooCommerce product page — rotate the model and switch materials in real time. [⌊Product metabox in the WordPress admin — add steps, assign texture options, and target specific meshes.⌉⌊Product metabox in the WordPress admin — add steps, assign texture options, and target specific meshes.⌉[ Product metabox in the WordPress admin — add steps, assign texture options, and target specific meshes. [⌊Texture modal — browse the reusable texture library and assign materials to a step option.⌉⌊Texture modal — browse the reusable texture library and assign materials to a step option.⌉[ Texture modal — browse the reusable texture library and assign materials to a step option. [⌊Model Texture editor — upload base color and PBR maps (roughness, normal, AO, metalness), set roughness and metalness sliders.⌉⌊Model Texture editor — upload base color and PBR maps (roughness, normal, AO, metalness), set roughness and metalness sliders.⌉[ Model Texture editor — upload base color and PBR maps (roughness, normal, AO, metalness), set roughness and metalness sliders. [⌊Global Settings page — configure initial camera position, zoom range, background colors, and HDR environment map.⌉⌊Global Settings page — configure initial camera position, zoom range, background colors, and HDR environment map.⌉[ Global Settings page — configure initial camera position, zoom range, background colors, and HDR environment map. ## Blocks This plugin provides 1 block. * 3D Product Customizer Renders the 3D product customizer on WooCommerce product pages. ## Asennus 1. Upload the `product-customizer` folder to `/wp-content/plugins/`. 2. Activate the plugin through the **Plugins** menu in WordPress. 3. Ensure WooCommerce is installed and active. 4. Navigate to **Model Textures** in the WordPress admin and create texture entries. Each texture can include a base-color image (featured image) plus optional PBR maps and scalar material properties. 5. Open any WooCommerce product and locate the **3D Configurator** metabox. 6. Upload or select a `.glb` / `.gltf` model using the **Select Model** button. 7. Click **Scan Model** to auto-detect mesh names from the file. 8. Add one or more **Steps** and assign **Options** (textures or geometry toggles) to each step. 9. Save the product. The 3D configurator will now appear on the product’s front-end page. 10. Visit **Model Textures Global Settings** to configure camera position, zoom limits, background colors, and an optional HDR environment map. ## UKK ### What 3D file formats are supported? GLB (binary GLTF) is the recommended format. GLTF (JSON-based) is also supported. The plugin registers these MIME types with WordPress so they can be uploaded through the standard Media Library. ### Can I use multiple HDR environment maps per product? The HDR environment map is a global setting. All products share the same HDR file. Per-product HDR support is planned for a future release. ### Why does the 3D viewer not appear on a product page? The configurator only renders when the product has a valid `.glb` model URL AND at least one configured step with at least one option. Check the **3D Configurator** metabox on the product. ### How is the customization saved to the order? When a customer clicks **Add to cart**, the current configuration is sent as a JSON payload. Each selected option (part material name) is stored as a WooCommerce line- item meta entry and is visible on the order detail and in emails. ### Is this compatible with WooCommerce variable products? The plugin targets simple products. Variable product support is not officially tested. ### Are the bundled JavaScript files minified? Yes. The source files are included in the `js/` directory and the `webpack.config. js` build configuration is included in the plugin package. ## Arvostelut There are no reviews for this plugin. ## Avustajat & Kehittäjät “3D Product Customizer & Configurator for WooCommerce” perustuu avoimeen lähdekoodiin. Seuraavat henkilöt ovat osallistuneet tämän lisäosan kehittämiseen. Avustajat * [ deosebIT Soft ](https://profiles.wordpress.org/deosebitsoft/) * [ Freemius ](https://profiles.wordpress.org/freemius/) [Käännä “3D Product Customizer & Configurator for WooCommerce” omalle kielellesi.](https://translate.wordpress.org/projects/wp-plugins/3d-product-customizer) ### Oletko kiinnostunut kehitystyöstä? [Browse the code](https://plugins.trac.wordpress.org/browser/3d-product-customizer/), check out the [SVN repository](https://plugins.svn.wordpress.org/3d-product-customizer/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/3d-product-customizer/) by [RSS](https://plugins.trac.wordpress.org/log/3d-product-customizer/?limit=100&mode=stop_on_copy&format=rss). ## Muutosloki #### 3.6.1 * Added docs / support notice to admin #### 3.6.0 * Replaced Lucide icon picker with WordPress media library for step and option icon selection * Added per-option icon image field — each option can have its own icon shown in geometry swatches * Option icon now takes priority over texture thumbnail/color in material swatches when set * Cached icon images in IndexedDB to avoid re-fetching on every session load * Fixed Bulk Add Options not working — added missing bulk modal HTML and #tmpl- option template * UI refactor #### 3.5.10 * Fixed zoom keyboard shortcuts (+/-) ignoring admin-set zoom limits (minDistance/ maxDistance) * Fixed option selection forcing targeted meshes visible when no show/hide configured #### 3.5.9 * Added Demo, Docs, and Buy Premium links to the plugin row on the Plugins page * Regenerated pot file * Fixed position of the additional price input in the ajax response #### 3.5.8 * Added per-option additional pricing — set a surcharge on any option within a step * Live price display updates in real-time as the user selects different options * Price badges shown on option swatches when a surcharge applies * Option surcharge applied to cart total via WooCommerce before_calculate_totals * Uses WooCommerce currency symbol and position settings #### 3.5.7 * Bug fixes and maintenance #### 3.5.6 * Renamed plugin to ”3D Product Customizer & Configurator for WooCommerce” for better search visibility * Updated plugin name references in watermarks, notices, and readme.txt * Regenerated pot file * Updated docs URL in the PDF #### 3.5.5 * Added 12 new i18n strings (adding, loading, PDF labels, alerts) — now translatable via `__()` in PHP * Disabled OrbitControls damping for instant rotation stop on release * Removed stale CSS selectors from metabox-styles.css * Fixed deprecated `THREE.WebGLShadowMap` warning — switched to `PCFShadowMap` * Increased shadow map resolution to 4096 and tightened shadow camera frustum for sharper ground shadows #### 3.5.4 * Added camera position/angle controls in admin 3D editor — save and reset the default camera view per product * Fixed JSON corruption when saving camera position (`sanitize_text_field` no longer destroys JSON data) * Front-end 3D viewer now applies the saved per-product camera position on load * Fixed garbled character encoding in the help modal close button #### 3.5.3 * Fixed help modal rendering on mobile Safari — GPU compositing, dynamic viewport height, touch event handling * Removed nested `position: fixed` on mobile modal to prevent layout issues #### 3.5.2 * Fixed all `_e()` output to use proper escaping functions (`esc_html_e`, `esc_attr_e`) * Added ABSPATH guard to block render file * Removed UTF-8 BOM from main plugin file * Added nonce verification to review notice dismissal * Added nonce compliance annotations to add-to-cart handler * Fixed undefined variable warnings in PDF download and background toggle * Normalized IndexedDB config key across URL variants * Improved add-to-cart AJAX — applies WooCommerce fragments directly and fires proper events * Use WooCommerce `wc_ajax_url` for add-to-cart requests (handles subdirectory installs) * Replaced `filemtime()` fallback with `file_exists()` check to suppress PHP warnings * Fixed extra `>` in checkbox HTML markup #### 3.5.1 * Switched PDF generation from pdf-lib to jsPDF for better clickable link support * Renamed URL query parameter `cfg` to `dprcu_cfg` to avoid conflicts * Cleaned `dprcu_cfg` parameter from the URL after configuration load * Added multi-angle PDF captures with options summary page * Added site logo, product name, timestamp, and URL to PDF output * Added footer links (Plugin Page, Docs, Demo) to PDF pages * Added option thumbnails and color swatches to the PDF options table * Updated PDF column layout to full-width images proportional to canvas aspect ratio #### 3.5.0 * Fixed taxonomy slug in texture category filter dropdowns — categories now show up correctly in modals * Fixed valid zero values (roughness 0.0, metalness 0.0, env intensity 0.0) being silently ignored on the frontend * Fixed HTML validation: nonce field moved outside `