外掛標籤
開發者團隊
原文外掛簡介
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
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
Inside WordPress admin, go to 3D Customizer → Account (added after activation).
Click Upgrade to Premium and complete the purchase on the checkout page.
Return to 3D Customizer → Account/Upgrade and enter your license key to activate.
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)
* pdf-lib — PDF generation for preview downloads (licensed under Apache 2.0)
* 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
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
