Adding interactive 3D elements to your WordPress site gives visitors a hands-on experience that increases time on page and keeps them engaged with your content.
The Spline 3D Viewer block in Nexter Blocks lets you embed interactive 3D objects created in Spline directly into the WordPress block editor. You can control mouse and touch events, display a loading icon while the scene initializes, and add a drag hint to guide visitors on how to interact.
Best Used For:
- Product pages that need an interactive 3D model viewer instead of static product images
- Agency and portfolio landing pages with animated 3D hero sections
- SaaS websites presenting interactive product demos or 3D UI walkthroughs
Required Setup
- Make sure the default WordPress Block editor is active.
- You need to have the Nexter Blocks plugin installed and activated.
- This is a Premium block, and you need the PRO version of Nexter Blocks.
- Make sure the Spline 3D Viewer block is activated, to verify this visit Nexter → Blocks → and Search for Spline 3D Viewer and activate.
Learn via Video Tutorial:
How to Activate the Spline 3D Viewer Block?
Go to
- Nexter → Blocks
- Search the block name and turn on the toggle.
Key Features
- Backend Visibility – Preview the Spline 3D viewer directly in the WordPress block editor without switching to the frontend. Use this when you need to verify the canvas size and position before publishing.
- File URL – Connect your Spline design to the block by pasting the Integrated Embed URL from Spline’s export settings. This is the only input that links your scene to the WordPress page.
- Loading Icon – Display a loading indicator while the Spline scene initializes. Use this when your 3D design is large and takes a moment to load, so visitors see a smooth transition instead of a blank canvas.
- Hint Icon – Show an animated drag hint inside the viewer to guide visitors on how to interact with the design. Use this when your Spline scene uses a drag-to-rotate event and visitors may not know to interact with it.
- Target Area – Control whether mouse and touch events respond within the Spline canvas only or across the entire page. Use the Global option when your design follows the mouse cursor across the full page.
If you want to add lightweight vector animations without a 3D tool, How to Add Lottie Animation in WordPress? covers the Lottie Animation block in Nexter Blocks, which supports scroll-triggered and click-triggered animations.
How to Use the Spline 3D Viewer Block?
Create Spline 3D Object and Export as Spline Viewer
First, create your 3D object in Spline.
Then export your design as Spline Viewer and copy the Integrated Embed URL of your design.
Use Spline 3D Viewer Block
Add the Spline 3D Viewer block to the page.
Enable the Backend Visibility toggle to preview the viewer in the block editor. This lets you confirm the canvas size and position without switching to the frontend.
When enabled, click the Reinitialize button to re-render the animation in the block editor.
In the File URL field, paste the Integrated Embed URL you copied from Spline. This links your 3D scene to the block and renders it on the page.
Enable the Loading Icon toggle to display a loader while the Spline scene initializes. Use this when your 3D design takes a moment to load, so visitors see a spinner instead of a blank canvas.
If your design requires visitors to drag to interact, enable the Hint Icon toggle. This displays an animated icon inside the viewer showing visitors how to drag and start interacting with your design.
If your design uses a follow-mouse event, go to the Target Area section to set how the mouse event responds. You have three options:
- Unset – The mouse and touch events respond across the entire web page.
- Local – The mouse and touch events respond only within the Spline canvas.
- Global – The mouse and touch events respond across the entire web page, including outside the canvas.
Select the option that matches how your Spline scene is configured.
For another interactive element that responds to visitor input, see How to Add an Interactive Circle in WordPress?
Here is how local and global target areas work.
How to Style the Spline 3D Viewer Block?
To style the Spline 3D Viewer block, go to the Style tab.
Content – Set the canvas width and height here. Use this to match the viewer dimensions to your page layout, especially on mobile where a narrower canvas improves readability.
Loader – Style the loading indicator that appears while the Spline scene loads.
Advanced options are common to all Nexter Blocks. For details on positioning, visibility, custom CSS, and motion settings, see How to Use Advanced Tab in Nexter Blocks?
