--- 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-04-14 author: "Aditya Sharma" description: "Adding interactive 3D elements in WordPress not only adds visual appeal but also provides users with a unique opportunity to interact with content, leading to increased engagement and longer visit..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-Interactive-3D-Objects-in-WordPress_-1024x519.jpg word_count: 486 --- # How to Add Interactive 3D Objects in WordPress? ## Key Takeaways - Spline 3D Viewer block from Nexter Blocks allows users to add interactive 3D elements created in Spline on their WordPress website. - Nexter Blocks requires the PRO version to access the Spline 3D Viewer block, which must be activated in the WordPress Block editor. - The Spline 3D Viewer block offers a Global Target Area feature, enabling mouse/touch events to work on the entire web page. Adding interactive 3D elements in WordPress not only adds visual appeal but also provides users with a unique opportunity to interact with content, leading to increased engagement and longer visit durations. With the Spline 3D Viewer block from Nexter Blocks, you easily add interactive 3D elements created in [Spline](https://spline.design/) on your WordPress website. [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 nameand**turn on the toggle**. ![](https://nexterwp.com/wp-content/uploads/2024/12/spline-3d-viewer-activation-new.png) ## Key Features - **Global Target Area** - You interact with your design for the entire page. ## How to Use the Spline 3D Viewer Block? Create Spline 3D Object and Export as Spline Viewer First, you have to create your 3D object in [Spline](https://spline.design/). Then you have to [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. ![](https://nexterwp.com/wp-content/uploads/2024/12/spline-3d-viewer-object.png) ### Use Spline 3D Viewer Block  Then add the Spline 3D Viewer block to the page. By enabling the **Backend Visibility** toggle, you can see the viewer in the backend.  ![](https://nexterwp.com/wp-content/uploads/2024/12/spline-3d-viewer-backend-visibility.gif) When enabled, you can click on the **Reinitialize** button to re-render the animation in the backend. Then in the **File URL** field, you have to add your copied Spline design Integrated Embed URL. By enabling the **Loading Icon** toggle, you can add a loader in the Spline Viewer. If your design requires users to drag to interact with your design, you can add a hint to the Spline Viewer by enabling the **Hint Icon** toggle. This will show an animated icon in the Spline Viewer hinting how to drag to start interacting with your design. If your design has a mouse follow mouse event, then from the **Target Area** section, you can set the mouse event of your design. Here you’ll find three options -  - **Unset** - With this option, the mouse/touch events will work on the entire web page. - **Local** - With this option, the mouse/touch events will work only in the container or canvas. - **Global** - With this option, the mouse/touch events will work on the entire web page.  Select the option as per your requirements. Here is how local and global target areas will work. ![](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, you’ll find all the options in the Style tab.  **Content** - From here you can set the canvas width and height. ![](https://nexterwp.com/wp-content/uploads/2024/12/spline-3d-viewer-style-1.png) **Loader** - From here, you can style the Spline Viewer loader. Advanced options remain common for all our blocks, you can explore all it options from here. [View Advanced tab tutorial.](https://nexterwp.com/docs/add-advanced-tab-in-wordpress/) ## 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.