Spline, un outil simple de conception 3D pour le web
Teddy Loiseau 27 avril 2021

Après vous avoir présenté Principle et Flinto, deux logiciels pour animer vos prototypes, j’avais envie de vous parler d’un sujet joyeux, coloré, acidulé et pop ✨🍬

Nous avons justement découvert un logiciel qui nous a beaucoup enthousiasmés et qui, je trouve, tombe à point nommé pour nous redonner du baume au cœur pendant cette période un peu difficile.

Spline - Logo Akiani avec des platines et des éléments rappelant l'univers musical

Qu’est-ce que Spline ?


Spline est un outil de création 3D gratuit, disponible sur Windows et Mac. Le fondateur Alejandro León explique qu’il a souhaité, avec ses équipes :
« rendre la création 3D simple, peu coûteuse et rapide« .

Il permet de créer des expériences web en 3D, même pour des designers qui comme moi ont toujours eu des boutons à l’approche des softs 3D un peu « usine à gaz ».

L’outil est ambitieux : il permet de créer, animer, exporter avec une prise en main très simple … bref, le pied ! 🦶

Cet outil va peut-être me réconcilier avec la 3D 😃, il offre la possibilité de créer des objets en utilisant une palette de formes que l’on peut assembler et modifier, ajouter des textures, gérer la lumière et la caméra
et enfin, animer le tout.

Logo Akiani en 3D


Présentation de l’interface

Spline dispose d’une interface très facile à utiliser, qui est assez similaire aux logiciels que l’on a l’habitude d’utiliser comme Sketch, Adobe XD, Photoshop ou Illustrator. 

Interface de Spline

Le dark mode de l’outil se veut classique, simple et épuré. On retrouve la zone de travail au centre. Puis, un volet à gauche avec les calques et un volet à droite avec les paramètres de la scène ou des objets sélectionnés. En haut, la palette d’outils et en bas l’accès direct aux différentes vues.

La prise en main est assez rapide, ce qui permet de se familiariser avec les raccourcis clavier pour déplacer la scène. L’outil permet de faire pivoter à n’importe quel moment les créations pour voir le rendu en 3D.


Construire votre illustration

Interface de construction dans Spline

Des palettes de formes 3D et 2D sont à notre disposition pour composer nos créations. Chaque objet est modifiable dans le panneau paramètres à droite de l’écran : couleur/lumière, forme, rendu, texture.

Finalement, on se prend vite au jeu pour assembler les formes et les imbriquer les unes avec les autres. L’approche est très ludique.

Au début, le résultat peut faire penser à Mr Patate, mais avec un peu de pratique on peut vraiment faire des choses intéressantes. Cela nous oblige à penser nos créations de manière plus géométrique et structurelle, ce qui ouvre ainsi le champ des expérimentations créatives.


Utiliser la lumière

Vous pouvez jouer sur la lumière de plusieurs manières. En modifiant les paramètres de la scène directement dans le panneau de droite, ou en ajoutant une ou plusieurs nouvelles sources de lumière depuis le menu sur votre scène.


Animer vos créations

Il est possible d’animer les objets, la caméra, le zoom et de créer des éléments interactifs sans avoir à mettre les mains dans le code 😊

Animation d'une scène dans Spline

Exporter

Pour exporter vos créations, plusieurs options s’offrent à vous avec la version gratuite :

  • un format image .jpg ou .png,
  • un format web pour générer une URL publique et voir vos créations dans n’importe quel navigateur,
  • les formats JavaScript, HTML et CSS pour l’intégration dans un site web

Concernant l’export au format vidéo, il faudra mettre la main au portefeuille et vous offrir la version pro.

Conclusion

L’intérêt de Spline se trouve dans la possibilité offerte aux designers 2D de concevoir des illustrations 3D pour alimenter des sites web de manière simple et rapide. Contrairement aux logiciels 3D plus classiques, Spline ne nécessite pas de connaissances pointues dans le domaine de la 3D.

Vous pouvez créer un contenu attrayant pour votre site et faire interagir les utilisateurs avec ces éléments mélangeants vectoriels et 3D.

A noter que le logiciel est toujours en cours d’amélioration et des mises à jour régulières sont accessibles sur leur site.

Maintenant à vous de jouer en testant Spline 🙌

Et si vous souhaitez parcourir la documentation c’est ici

Teddy Loiseau

Diplômé des beaux Beaux-Arts, Teddy a été directeur artistique au sein de plusieurs agences de communication. Il apporte aujourd’hui son expertise, sa vision créative et artistique dans les projets impliquant l’identité visuelle, l’image de marque, la conception, l’interface utilisateur, les sites Web ou les applications mobiles.