Développement Web
Poussez les limites du web
avec une application sur mesure
Prendre rendez-vous
12/20/2024
De la 3D sur votre site ?
Vous souhaitez passer votre site au niveau supérieur avec des effets complètement différents des autres sites, ajoutez-y de la 3D.
Si vous voulez mettre l’accent sur le fait de proposer des expériences interactives et immersives, alors rajouter de la 3D sur votre site peut être une des solutions que nous pouvons vous proposer !
Présentation
Vous en avez sûrement déjà vu ? Il en existe sous plusieurs formes. Ici nous ne parlons pas de simples images d’émoticônes en 3D qui sont souvent de simples PNG. Non, ici on parle de créer un site avec une immersion et de l’interactivité.
Comment ça marche
Mais alors comment ça marche ? Si vous connaissez un peu des logiciels de 3D comme (Blender, Cinema4D ou encore Google Sketchup), c’est le même principe. Si cependant ces logiciels sont inconnus pour vous, imaginez simplement une feuille blanche (qu’on appelle Canvas) où il est possible de dessiner en 2D et 3D dimensions, c’est-à-dire à l’aide de 3 axes (x, y, z). Je suis sûr que vous avez déjà vu cela en maths, c’est la même chose.
Ensuite, il nous suffit de rajouter à ce canvas votre scène (comme une scène de cinéma), vos objets, votre caméra, vos lumières. À ce niveau-là, on est les petites mains du cinéma qui ajoutent des petits éléments pour donner vie à la scène, comme par exemple rajouter de l’interactivité avec la souris.
Exemple: https://superlist.craftedbygc.com/
Pour réaliser cela, notre équipe utilise ThreeJs, une librairie JavaScript qui nous permet de faire plus simplement de la 3D sur un navigateur web. Il en existe d’autres et d’autres émergent de plus en plus, plus différents les uns que les autres, comme Spline par exemple. Dans notre cas, on va utiliser Threejs pour plusieurs raisons :
- C’est la librairie la plus complète
- Elle est encore mise à jour
- Elle est utilisée par un grand nombre
Mais alors comment ça marche sur le web ? Vous vous rappelez, j’ai utilisé le terme canvas plus haut, c’est ce qui va nous servir. Dans le développement, une balise canvas existe et, comme je l’ai décrite, c’est comme une feuille de dessin et c’est ce qu’on utilise pour faire de la 3D.
Sachez cependant que de votre point de vue vous ne verrez qu’un carré, cependant cela marche comme tous les logiciels de 3D, ce carré est composé de vertex (des petits triangles, interagissez avec l'exemple pour mieux comprendre. Restez appuyé et faites bouger votre souris, ou alors activez le "wireframe" ou non pour voir les vertex dans le menu en haut à droite).
Selon la complexité de la forme et des textures, ces vertex peuvent augmenter ou diminuer. C’est l’une des choses auxquelles il nous faut faire attention et optimiser pour ne pas diminuer les performances du site internet.
On va éviter de rentrer dans la complexité, mais dites-vous qu’il est possible de tout personnaliser, par exemple si un objet va recevoir les ombres, la focale de la caméra ou bien la forme des objets.
Pour plus d’effets visuels, il est possible de rajouter des shaders. C’est un peu plus compliqué à expliquer, mais ça va permettre de créer des textures, reflets et distorsions des matériaux 3D que nous avons réalisés.
Je vous mets ici une liste d’exemples de shaders ou de sites utilisant des shaders pour vous en rendre compte.
La 3D du site va s’exécuter sur l’ordinateur de l’utilisateur, souvent sur son processeur (CPU), le cerveau de son ordinateur. Donc rajouter beaucoup d’éléments ou d’effets va faire exécuter plus de calculs à ce processeur que sur d’autres sites. Des effets trop importants ou mal optimisés peuvent donc réduire la fluidité et les performances de votre site.
Heureusement, il existe des techniques pour réduire ces calculs et optimiser au maximum les performances du site, mais il est important de le savoir si vous souhaitez créer plein d’effets de partout sur votre site. Pensez à votre utilisateur qui naviguera sûrement sur téléphone et n’aura pas forcément les mêmes performances que votre super ordinateur 😉.
En 2024, la répartition du trafic web en France selon les appareils était la suivante :
- Appareils mobiles : 64,97 %
- Ordinateurs de bureau : 32,86 %
- Tablettes : 2,16 %
Contre environ 50 % sur mobile et environ 50 % sur ordinateur en 2021, les moyens de navigation des personnes évoluent, il est donc important d’en prendre compte.
Les bénéfices
Qu’est-ce que vous y gagnez dans tout ça ?
Premièrement, le plus facile : un site pas comme les autres. Et vous savez comme moi à quel point un site internet représente une entreprise ou une marque. Dès qu’on cherche quelque chose, on va directement sur internet pour chercher notre information. Et créer un site qui donne un effet wow permet de retenir l’attention de l’utilisateur plus longtemps et donc de le faire rester plus longtemps sur votre site et même de l’explorer encore plus. Il va se sentir davantage impliqué et donc il a plus de chances de rester pour explorer tout le contenu.
De plus, un site différent, qui procure une sensation de plaisir à l’utilisateur, reste dans l’esprit, ce qui est un atout précieux pour la fidélisation. Sans parler du bouche-à-oreille qu’aura l’utilisateur quand il voudra montrer et partager l’expérience qu’il a eue en explorant votre site.
Deuxièmement, des éléments interactifs en 3D peuvent permettre d’augmenter l’intérêt de l’utilisateur pour un produit ou un service, ce qui par conséquent augmente le taux de conversion. Par exemple, une présentation 3D d’un produit peut permettre à l’utilisateur de l’explorer sous tous ses angles, augmentant ainsi sa confiance envers le produit et son envie de l’acheter.
Votre entreprise/marque représente la modernité, l’innovation ou la créativité ? Créer un site innovant en y ajoutant de la 3D renforce ces aspects. L’utilisateur entrera dans un site où il ne connaît pas tous les codes, ce qui éveillera sa curiosité et le poussera à explorer votre site tout en renforçant l’image qu’il a de votre entreprise/marque : une entreprise/marque à jour, innovante et créative.
La 3D permet de raconter une histoire d’une manière différente, plus captivante. Elle peut être utilisée pour représenter un produit, un service ou bien la mission de votre entreprise.
Sources
https://superlist.craftedbygc.com/
https://www.weareuprising.com/
Discutons ensemble de votre projet !
