Cette page nécessite le confort d'un écran de bureau, d'une bonne connexion internet, elle n'est donc pas adaptée à un affichage sur mobile.
Cette page nécessite le confort d'un écran de bureau, d'une bonne connexion internet, elle n'est donc pas adaptée à un affichage sur mobile.
Au delà du cinéma d'animation qui nécessite de nombreuses heures de travail et de nombreux intervenants, le design 3D s'adapte aujourd'hui aux contraintes du web. S'il tire un avantage certain de la démocratisation de l'impression 3D, il peut enrichir très avantageusement une communication digitale, sous réserve d'optimisation. C'est sur ce dernier point que les outils récents permettent de composer avec les attentes d'une équipe marketing, le parcours client et les algorithmes des moteurs de recherche. Vous trouverez donc ci-dessous de petites expérimentations, dont les développements n'ont de limite que l'imagination, associant une réalisation 3D personnelle et des éléments de langages web (html/css, javascript, php) reformulés pour les besoins des projets.
Certaines API nécessaires à la 3D avancée sont en cours d'implémentation sur les navigateurs.
Les apparences peuvent varier.
L'élément interactif présenté ci-dessous sollicite la participation de l'utilisateur lors de sa visite potentielle d'une landing page (une infinité de variations est possible selon le besoin et l'objectif marketing). La création de l'interactivité et l'assemblage des éléments ont été réalisés sur Visual Studio Code. Les variateurs sont fonctionnels.
Gardiens des abysses (V.1)
Variateurs en javascript/CSS (👆) permettant de manipuler une modélisation 3D réalisée entièrement sur Blender. Illustrations réalisées par IA.
Vous trouverez ci-dessous une proposition d'intégration d'un élément 3D interactif en tant que menu de navigation sur une page web. Elle a été réalisée directement sur Visual Studio Code, dans la mesure où le fonctionnement du CMS google dépasse largement les possibilités de Figma, par exemple.
Ci-dessus, une page d'accueil permettant à l'utilisateur d'intervenir sur l'élément central et produire des effets spécifiques : Il est possible de manipuler la sphère dans ses trois dimensions. Des zones réactives transforment les composants textes en liens cliquables. Leur survol simple affiche le nom de la page de destination. L'image en background est réalisée par IA pour ce projet selon un prompt personnel.
Vous voyez ci-contre la version mobile responsive de la page d'accueil ci-dessus réalisée en html/css et javascript. L'usage de la 3D et de l'interactivité sur mobile nécessite un terminal relativement puissant et une bonne connexion, mais de très nombreuses possibilités techniques nous sont offertes pour engager l'utilisateur à parcourir notre offre.
Les boutons flottant dans le bas de l'écran permettent de naviguer dans le site via un clic. L'existence matériel du survol sur mobile permettrait de figer le défilement des mots, qu'il est possible d'expérimenter à partir d'un terminal de bureau.
Il s'agit d'un exemple plus que d'un modèle. Un exercice ludique.