---
title: "How to Add Interactive 3D Objects in WordPress?"
url: https://nexterwp.com/docs/add-interactive-3d-objects-in-wordpress/
date: 2024-12-17
modified: 2026-05-20
author: "Aditya Sharma"
description: "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..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-Interactive-3D-Objects-in-WordPress_-1024x519.jpg
word_count: 794
---

# How to Add Interactive 3D Objects in WordPress?

## Key Takeaways

- Spline 3D Viewer block in Nexter Blocks allows embedding interactive 3D objects created in Spline directly into the WordPress block editor.
- Nexter Blocks requires the PRO version to access the Spline 3D Viewer block and must be activated in the WordPress dashboard.
- Backend Visibility feature lets users preview the Spline 3D viewer directly in the WordPress block editor without switching to the frontend.
- Loading Icon displays a loading indicator while the Spline scene initializes, ensuring a smooth transition for large 3D designs.

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](https://nexterwp.com/) lets you embed interactive 3D objects created in [Spline](https://spline.design/) 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

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-spline-3d-viewer/)

## Required Setup

- Make sure the default WordPress Block editor is active. 

- You need to have the [Nexter Blocks](https://wordpress.org/plugins/the-plus-addons-for-block-editor/) plugin installed and activated.

- This is a Premium block, and you need the [PRO version of Nexter Blocks](https://nexterwp.com/pricing/?utm_source=tpag&utm_medium=docs&utm_campaign=text).

- 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:

https://www.youtube.com/watch?v=3uzlvbROM-8

## How to Activate the Spline 3D Viewer Block?

Go to 

- **Nexter **→ **Blocks **

- **Search **the block name and **turn on the toggle**.

![Spline 3D Viewer block activation in Nexter Blocks](https://nexterwp.com/wp-content/uploads/2024/12/spline-3d-viewer-activation-new.png)

## 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?](https://nexterwp.com/docs/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](https://spline.design/).

Then [export your design as Spline Viewer](https://docs.spline.design/doc/exporting-as-spline-viewer/docoQp6On9ht) and copy the Integrated Embed URL of your design.

![Exporting a 3D object from Spline for the WordPress Spline 3D Viewer block](https://nexterwp.com/wp-content/uploads/2024/12/spline-3d-viewer-object.png)

### 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.

![Spline 3D Viewer backend visibility toggle in Nexter Blocks](https://nexterwp.com/wp-content/uploads/2024/12/spline-3d-viewer-backend-visibility.gif)

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?](https://nexterwp.com/docs/add-an-interactive-circle-in-wordpress/)

Here is how local and global target areas work.

![Spline 3D Viewer local and global target area demo in Nexter Blocks](https://nexterwp.com/wp-content/uploads/2024/12/spline-3d-viewer-demo.gif)

## 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.

![Spline 3D Viewer style settings in Nexter Blocks](https://nexterwp.com/wp-content/uploads/2024/12/spline-3d-viewer-style-1.png)

**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?](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/)

## Frequently Asked Questions

**Q: What should I do if the Spline 3D Viewer block is not showing up?**
A: If the Spline 3D Viewer block isn't visible, ensure that the Nexter Blocks plugin is installed and activated. This block is part of the PRO version of Nexter Blocks, so you need to verify that you have the correct version. Go to Nexter u2192 Blocks, search for 'Spline 3D Viewer', and turn on the toggle to activate it.

**Q: What are the best settings for the Spline 3D Viewer block?**
A: For optimal use of the Spline 3D Viewer block, consider enabling the Backend Visibility toggle to preview the viewer in the backend. Additionally, if your design requires interaction, enable the Hint Icon toggle to guide users on how to drag and interact with the 3D model. Adjust the Target Area settings based on your needsu2014'Global' allows interaction across the entire page, while 'Local' restricts it to the canvas.

**Q: Does the Spline 3D Viewer block support mobile devices?**
A: The Spline 3D Viewer block is designed to work on mobile devices, allowing users to interact with 3D models on smartphones and tablets. However, always test your implementation on various devices to ensure the user experience is smooth and responsive.