=== 3D Product Customizer & Configurator for WooCommerce === Contributors: deosebitsoft, freemius Tags: woocommerce, 3d, product customizer, configurator, 3d viewer Requires at least: 6.0 Tested up to: 7.0 Requires PHP: 7.4 Stable tag: 3.7.4 License: GPLv2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Let customers build and visualize their perfect product in interactive 3D — every customization choice saves to the WooCommerce order automatically. == Description == [DEMO](https://web-support.eu/showcase/?utm_source=wporg&utm_medium=plugin_listing&utm_campaign=demo) Let your customers design their perfect product in interactive 3D — pick materials, colors, and components, see every change instantly, and order exactly what they built. Every selection is saved to the WooCommerce order automatically, so your team always knows what to make. **Perfect for:** furniture & upholstery, jewelry, footwear, apparel, signage, engraving, sports gear, packaging, and any product that comes in multiple finishes or configurations. **What it does for your store:** * Customers stop asking "can I get it in blue?" — they configure it themselves and see the result live * Every option selection is stored on the order as a line item — your workshop or fulfillment team sees exactly what was chosen * Per-option pricing — add a surcharge to premium finishes and watch the total update in real time as the customer selects * Customers can share their exact configuration via a link, perfect for review-before-you-order workflows * PDF download gives customers a record of what they ordered **Features:** * Real-time 3D product viewer — rotate, zoom, and see changes instantly * Customization steps — organize options into labeled groups (e.g. Frame, Fabric, Legs) each targeting specific parts of the model * Material swapping — assign a texture or base color to each option * Geometry toggles — show or hide parts of the model based on selections (e.g. add a badge, swap a component) * Step visibility — show or hide entire configuration steps based on what the customer has already selected * Per-option price surcharge with live price display * Undo / redo history * Shareable configuration URL * PDF preview download * AR view on supported mobile devices * HDR environment lighting and background color switcher * Custom icons per step and per option * Reusable texture library (Custom Post Type) * Automatic step thumbnail generation (EXPERIMENTAL) **Technical:** * GLB / GLTF model format support * PBR (Physically Based Rendering) material support — base color, roughness, normal, AO, metalness, and displacement maps * Powered by Three.js (WebGL), bundled — no external CDN dependency * Shortcode, Gutenberg block, action hook, and automatic placement support * 18+ WordPress action hooks for developer extensibility **Free vs Premium:** The free version is fully functional for single-material customization. Premium unlocks advanced 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 * Set additional prices per option = 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 * NEW — Usage Analytics — track customizer opens, option selections, and add-to-cart clicks per product (GDPR-friendly aggregate data, no personal information stored) * NEW - Show / Hide steps based on the selected option == 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. == Installation == 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. == Frequently Asked Questions == = Do I need 3D design experience to use this? = No. Once you have a 3D model of your product, everything else is done inside the WordPress admin — upload the model, add steps, assign textures, save. No coding or 3D software required. = Where do I get a 3D model of my product? = This is the most common question and there are several practical options: * **Commission one** — freelance 3D artists on Fiverr, Upwork, or CGTrader can model your product from reference photos for $50–$500 depending on complexity. Specify GLB format when you order. * **Export from existing tools** — if you already use CAD software (Fusion 360, SolidWorks, Blender, Cinema 4D), you can export directly to GLB. * **Scan it** — smartphone photogrammetry apps (Polycam, Luma AI) can generate a mesh from photos of a physical product. * **Download** — for common product shapes (bottles, boxes, chairs) stock model sites like CGTrader, Sketchfab, and TurboSquid have ready-made GLB files. The plugin uses the GLB format (binary GLTF). If your file is in another format, [Blender](https://www.blender.org/) can convert most 3D formats to GLB for free. = Does it work with Elementor, Divi, or other page builders? = Yes. Use the `[dprcu-customizer]` shortcode — it works anywhere shortcodes are supported, including Elementor widgets, Divi modules, Beaver Builder, Bricks, and custom page templates. For block-based (FSE) themes there is also a native Gutenberg block. = Can I charge extra for certain options? = Yes. Every option can have an additional price (surcharge) set in the admin. The live price on the product page updates in real time as the customer makes selections, and the surcharge is applied securely server-side when the item is added to cart — it cannot be manipulated by the customer. = Will it slow down my site? = The 3D viewer only loads on product pages where it is configured. The JavaScript bundle (~2 MB including Three.js) is loaded once and cached by the browser. The 3D model itself (GLB file) is the main load-time factor — a well-optimized model is typically 1–5 MB. The plugin does not load anything on pages where it is not used. = How is the customization saved to the order? = When a customer clicks **Add to Cart**, each selected option (step name → option name) is stored as a WooCommerce line-item meta entry. It appears on the order detail page, in admin order emails, and in customer confirmation emails — so your workshop always knows what was chosen without any manual follow-up. = 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. = Does it work with WooCommerce variable products? = Yes, via the **Variations Support for 3D Product Customizer** addon. Install and activate the addon alongside this plugin, then map each WooCommerce variation to a set of 3D configurator defaults directly inside the variation panel on the product editor. = 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. = 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. = Are the bundled JavaScript files minified? = Yes. The unminified source files are included in the `js/` directory alongside the `webpack.config.js` build configuration. == Screenshots == 1. Front-end 3D configurator on a WooCommerce product page — rotate the model and switch materials in real time. 2. Product metabox in the WordPress admin — add steps, assign texture options, and target specific meshes. 3. Texture modal — browse the reusable texture library and assign materials to a step option. 4. Model Texture editor — upload base color and PBR maps (roughness, normal, AO, metalness), set roughness and metalness sliders. 5. Global Settings page — configure initial camera position, zoom range, background colors, and HDR environment map. == 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. Block (Gutenberg)** **Setting:** 3D Customizer → Global Settings → Display Method → "Manual Placement" In FSE themes (Gutenberg) you can use the block `3D Product Customizer` **3. Shortcode Display** Display the customizer anywhere using the `[dprcu-customizer]` shortcode. **Setting:** 3D Customizer → Global Settings → Display Method → "Manual Placement" Usage: ``` [dprcu-customizer] — uses the current product [dprcu-customizer id="123"] — uses a specific product ID ``` Perfect for custom layouts and page builders (Elementor, Divi, etc.) **4. Manual Hook Display** Display the customizer using the `dprcu_display_customizer` action hook. **Setting:** 3D Customizer → Global Settings → Display Method → "Manual Hook" 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/documentation/#hooks) == Changelog == = 3.7.4 = Improved light when no HDR map is set in the settings Renamed first sub item to Settings = 3.7.3 = * Added addon support — introduced `dprcu:cartUpdated` DOM event and `dprcu_customizer_config` filter so third-party addons can extend the customizer without modifying the core bundle * Fixed surcharge prices not being applied when a variation is added to cart — price lookup now uses internal option IDs instead of display names * Fixed price display not appearing on simple products when the base product price is zero * Enabled Freemius addon listings in the plugin dashboard = 3.7.1 = * (Premium) Add the ability to show / hide steps based on the user selection * Fixed tracking events if the value did not change (for duplicate events) * Added rate limit for tracking * Added server side check if the analytics are disabled * Fixed clear analytics data form * Replaced checkbox array with Select2 input = 3.7.0 = * Auto-generated thumbnails for mobile step navigation buttons — each step icon is rendered directly from the 3D model, orbited to face the part with the rest of the model ghosted for context * Fixed saving one settings tab resetting values from other tabs * Display method option simplified to Automatic / Manual (removed redundant separate options) = 3.6.9 = * Restructured admin settings page using tabs * Moved share and download PDF button to the customizer sidebar * Added support for Express payment buttons (Apple Pay, Google Pay, PayPal, etc) * Added help tab with usefull links = 3.6.8 = * (Premium) Added Usage Analytics — see how users interact with each product's 3D customizer * Tracks customizer opens, option selections per step, and add-to-cart clicks * GDPR-friendly by design: only aggregate counts stored, no personal data, no IP addresses, no cookies * Per-product analytics metabox on the product edit screen with step breakdown tables and popularity bars * Total analytics overview page under 3D Customizer → Analytics (opens, selections, cart rate across all products) * Analytics toggle in Settings — disabling it hides the analytics page content and product metabox automatically * Built-in consent manager integration: Cookiebot, CookieYes, or custom `window.dprcu_analytics_enabled = false` override * "Clear All Analytics Data" button added to the Settings page = 3.6.7 = * Improved parsing of texture array * Improved mobile customizer style = 3.6.6 = * Code quality = 3.6.5 = * Updated presentation site url in the codebase * Added guard to manual placement setting * Fixed support notice not staying dismissed = 3.6.4 = * Fixed `customizerData` already declared error on product pages when shortcode or FSE block is used * Manual hook `dprcu_display_customizer` now accepts an optional product ID argument = 3.6.3 = * Added product ID attribute to shortcode — use `[dprcu-customizer id="123"]` on any page * Added product search/select to the FSE block — pick any WooCommerce product from the sidebar * Fixed FSE block not being clickable in the editor (added `useBlockProps`) = 3.6.2 = * Fixed dismisable support notice * Fixed encoding of special chars = 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 `