The Spline component

The Spline component allows you to add stunning 3D visualizations and interactive experiences directly within your applications. 

This tutorial will guide you through the key features of the Spline component, how to integrate it into your project, and the steps to customize and interact with 3D models. Whether you're looking to create immersive product showcases, dynamic interactive scenes, or engaging animations, Spline offers a powerful tool to bring your designs to life.

What is Spline?

Spline is a 3D design and collaboration tool that allows you to create interactive 3D elements, scenes, and animations. By integrating it with PandaSuite, you can embed these 3D designs into your projects and add interactive layers, making your app or project visually captivating and highly engaging.

• Real-time 3D interaction: You can import fully interactive 3D models into your PandaSuite project, providing users with dynamic, hands-on experiences.
• Seamless integration: By using the Spline component, you can create smooth, responsive animations that blend perfectly with other elements in your app.
• Creative control: Spline offers an extensive set of tools for designing 3D objects, controlling animations, and adding interactivity — and all of this can be brought into PandaSuite.

How to Integrate Spline into Your PandaSuite Project

1. Prepare Your 3D Design in Spline

Before importing into PandaSuite, you need to create or edit your 3D scene in Spline.

• Go to Spline and either create a new 3D project or use an existing one.
• Use the tools available in Spline to model, add textures, and animate your scene. You can also import 3D models from other software if needed.
• Once your design is ready, click on the Export button and in the Overview tab, click on the Download icon next to the file name with a “.splinecode” extension
• Compress this file in a ZIP folder (the file must be at the root)

2. Add the Spline Component in PandaSuite

1. Open PandaSuite Studio and navigate to your project.
2. In the Components menu, choose the Spline component from the list.
3. In the Source, click on Select and add a new ZIP file.
4. Choose the ZIP file of the Spline project
5. As the File name, enter the name with the .splinecode extension

Using Variables

In Spline, variables allow you to create reusable values/parameters. They can be applied to many object properties (like Position, Scale, Rotation, etc.) and can be combined with events and actions. This enables you to create highly customized interactions that understand logic. Learn more : Making variables in 3D

In PandaSuite, the variables you create in Spline are automatically exposed for use in the Properties panel. You can change them dynamically using data binding.

Using Markers, Triggering Events and Synchronisation

If you create events in Spline, they will be converted into markers within PandaSuite, allowing you to trigger actions when those markers are reached in your 3D scene.

Other triggering events available include:

• Scene Loaded: This event triggers once the 3D scene has fully loaded in the PandaSuite app. You can use this to start animations, display instructions, or initiate other interactive elements. For instance, you could have a button appear once the 3D model is ready for interaction.
• Scene Error: This event triggers when there’s an issue with loading the scene (such as a network failure or missing assets). You can use this trigger to display a fallback message or redirect the user to another part of the app.

PandaSuite also creates 3 special variables (__ps_sync_first, __ps_sync_second, __ps_sync_third) that will be used for synchronization. These are numbers between 0 and 1.

Use Cases for the Spline Component

• Product Demos: Show off your products in full 3D, allowing users to rotate, zoom in, and explore every detail.
• Interactive Storytelling: Bring narratives to life with interactive 3D elements that enhance the storytelling experience.
• Immersive Learning: Use 3D models in educational apps to give students hands-on interaction with the content.
• Games and Gamification: Add a layer of 3D interactivity to your game mechanics or create engaging mini-games using 3D assets.