Canvas 3D Block

The Canvas 3D block brings interactive 3D experiences to your Scrollsequence projects. Powered by Spline , this block allows you to embed, animate, and control 3D scenes directly in the WordPress block editor.

The Canvas 3D block is designed to display and animate 3D scenes using Spline’s .splinecode files. It supports advanced animation triggers, pinning, and variable controls, making it ideal for immersive storytelling, product showcases, and interactive web experiences.

Key Features

• Spline 3D Integration: Embed Spline .splinecode scenes.
• Custom Sizing: Set width and height with flexible units (%, vh, px, etc.).
• Variable Controls: Dynamically update Spline scene variables from the editor.
• Markers & Debugging: Enable markers and debug panels for development.
• Performance Controls: Option to stop animation in the editor for better performance.

Usage

1. Add the Canvas 3D Block:
   Insert the block into your page or inside a Scrollsequence Container.

2. Paste the Spline URL:
   In the sidebar, paste the URL to your .splinecode file.
   Example: https://prod.spline.design/{your_hash}/scene.splinecode 

3. Adjust Size:
   Set the width and height using the sidebar controls.

4. Control Variables:
   If your Spline scene has variables, they will appear in the sidebar for live editing.

5. Pinning & Animation:
   Place the block inside a Scrollsequence Viewport block to pin it to the viewport

6. Debugging:
   Enable markers and debug panels for development and troubleshooting.

Example Use Cases

• Product Demos: Show interactive 3D models that animate as users scroll.
• Storytelling: Create immersive scroll-driven 3D scenes.
• Landing Pages: Add eye-catching 3D hero sections or backgrounds.

Tips

• Use Spline’s editor to create and export .splinecode files.
• Variables in your Spline scene can be controlled from the WordPress editor for dynamic effects.
• For best performance, use the “Stop in Editor” option when editing large or complex scenes.