🎯 How to Set Up the NexPoint 3D Viewer

Configure a 3D model on a WooCommerce product, adjust viewer settings, and display the interactive viewer on the product page.

Open the NP 3D Viewer Admin Page

In your WordPress dashboard, navigate to NP 3D Viewer in the left sidebar. This opens the standalone admin interface with three tabs: Model Assignments, Settings, and NP Matrix.

[ Screenshot: NP 3D Viewer admin page — Model Assignments tab ]

Assign a 3D Model to a Product

On the Model Assignments tab, click Add Model and fill in:

Field	Description
Product ID	The WooCommerce product ID (find it in Products → hover the product name)
Model URL	Full URL to your `.glb` file (hosted externally or in the Media Library)
Scale	Numeric multiplier. Default 1.0. Increase to make the model larger in the viewer.
Type	Generic / Glove / Bat / Jersey — used for categorization.

Click Save. The model is now linked to this product.

Open the Product in WP Admin

Go to Products → All Products and click the product name to open its edit page in Gutenberg. Scroll down past the product description to find the Meta Boxes section.

Enable the 3D Viewer in the NexPoint 3D Configurator Metabox

Find the NexPoint 3D Configurator metabox. Toggle 3D Viewer Enabled on. When disabled, the standard WooCommerce product page is shown.

[ Screenshot: NexPoint 3D Configurator metabox with Enabled toggle ]

The 3D Model File field is automatically filled from the Model Assignment you created in Step 2. You can override it here per-product if needed.

Configure Per-Product Viewer Settings

Adjust the following fields in the metabox:

Field	Default	Notes
Product Mode	Simple 3D	Choose Simple 3D (standard add-to-cart) or Full Wizard (activates the Variation Wizard configurator)
Background Color	#1a1a1a	Hex color for the 3D viewer canvas background
Auto-Rotate	Enabled	Model slowly rotates when idle
Camera Distance	3.0	Initial zoom level (range 0.5–20)
Environment Preset	None	None, Studio, Sunset, Warehouse, or Forest — sets ambient lighting
Viewer Placement	Before summary	Where on the product page the 3D viewer appears

💡 Tip: The Material Slots section below the metabox shows an interactive 3D preview. Click any mesh on the model to identify its material slot name — you’ll need these slot names when configuring Wizard color slides.

Save and View the Product

Click Save in the top-right corner, then click View product in the admin bar to see the 3D viewer live on the product page. The viewer supports drag-to-rotate and scroll-to-zoom.

[ Screenshot: Custom Cap frontend with 3D viewer ]

→ Next: Back to Documentation | How to Configure the Variation Wizard →