Le composant Spline

Le composant Spline vous permet d'ajouter des visualisations 3D époustouflantes et des expériences interactives directement dans vos applications.

Ce tutoriel vous guidera à travers les principales fonctionnalités du composant Spline, comment l'intégrer à votre projet et les étapes pour personnaliser et interagir avec des modèles 3D. Que vous souhaitiez créer des présentations de produits immersives, des scènes interactives dynamiques ou des animations captivantes, Spline offre un outil puissant pour donner vie à vos designs.

Qu'est-ce que Spline ?

Spline est un outil de conception et de collaboration 3D qui vous permet de créer des éléments, des scènes et des animations 3D interactifs. En l'intégrant à PandaSuite, vous pouvez incorporer ces designs 3D dans vos projets et ajouter des couches interactives, rendant votre application ou projet visuellement captivant et très engageant.

Interaction 3D en temps réel : Vous pouvez importer des modèles 3D entièrement interactifs dans votre projet PandaSuite, offrant aux utilisateurs des expériences dynamiques et engageantes.
Intégration transparente : En utilisant le composant Spline, vous pouvez créer des animations fluides et réactives qui se fondent parfaitement avec d'autres éléments de votre application.
Personnalisation : Spline offre un ensemble complet d'outils pour concevoir des objets 3D, contrôler les animations et ajouter de l'interactivité — et tout cela peut être intégré dans PandaSuite.

Comment intégrer Spline dans votre projet PandaSuite

1. Préparez votre design 3D dans Spline

Avant l'importation dans PandaSuite, vous devez créer ou modifier votre scène 3D dans Spline.

Allez sur Spline et créez un nouveau projet 3D ou utilisez-en un existant.
Utilisez les outils disponibles dans Spline pour modéliser, ajouter des textures et animer votre scène. Vous pouvez également importer des modèles 3D d'autres logiciels si nécessaire.
Une fois votre design prêt, cliquez sur le bouton Exporter et dans l'onglet Vue d'ensemble, cliquez sur l'icône de téléchargement à côté du nom du fichier avec l'extension “.splinecode”
Compressez ce fichier dans un dossier ZIP (le fichier doit être à la racine).

2. Ajouter le composant Spline dans PandaSuite

Ouvrez PandaSuite Studio et naviguez jusqu'à votre projet.
Dans le menu Composants, choisissez le composant Spline dans la liste.
Dans la section Source, cliquez sur Sélectionner et ajoutez un nouveau fichier ZIP.
Choisissez le fichier ZIP du projet Spline.
En tant que nom de fichier, entrez le nom avec l'extension .splinecode.

Utilisation des variables

Dans Spline, les variables vous permettent de créer des valeurs/paramètres réutilisables. Elles peuvent être appliquées à de nombreuses propriétés d'objet (comme Position, Échelle, Rotation, etc.) et peuvent être combinées avec des événements et des actions. Cela vous permet de créer des interactions très personnalisées qui comprennent la logique. En savoir plus : Création de variables en 3D

Dans PandaSuite, les variables que vous créez dans Spline sont automatiquement exposées pour être utilisées dans le panneau Propriétés. Vous pouvez les modifier dynamiquement en utilisant la liaison de données.

Utilisation des marqueurs, déclenchement d'événements et synchronisation

Si vous créez des événements dans Spline, ils seront convertis en marqueurs dans PandaSuite, vous permettant de déclencher des actions lorsque ces marqueurs sont atteints dans votre scène 3D.

Autres événements déclencheurs disponibles :

Scène chargée : Cet événement se déclenche une fois que la scène 3D est entièrement chargée dans l'application PandaSuite. Vous pouvez utiliser cela pour démarrer des animations, afficher des instructions ou initier d'autres éléments interactifs. Par exemple, vous pourriez faire apparaître un bouton une fois que le modèle 3D est prêt à être manipulé.
Erreur de scène : Cet événement se déclenche lorsqu'il y a un problème de chargement de la scène (comme une panne de réseau ou des ressources manquantes). Vous pouvez utiliser ce déclencheur pour afficher un message de secours ou rediriger l'utilisateur vers une autre partie de l'application.

PandaSuite crée également 3 variables spéciales (__ps_sync_first, __ps_sync_second, __ps_sync_third) qui seront utilisées pour la synchronisation. Ce sont des nombres entre 0 et 1.

Cas d'utilisation pour le composant Spline

Démonstrations de produits : Présentez vos produits en 3D, permettant aux utilisateurs de les faire pivoter, zoomer et explorer chaque détail.
Récits interactifs : Donnez vie aux récits avec des éléments 3D interactifs qui enrichissent l'expérience narrative.
Apprentissage immersif : Utilisez des modèles 3D dans des applications éducatives pour offrir aux étudiants une interaction concrète avec le contenu.
Jeux et gamification : Ajoutez une couche d'interactivité 3D à vos mécanismes de jeu ou créez des mini-jeux captivants en utilisant des actifs 3D.