Three.js transforme une page web en scène 3D interactive.
Three.js
chez BYC
Explorer comment la 3D temps réel peut enrichir nos expériences numériques.
C'est quoi?
Three.js fait entrer la 3D dans le navigateur.
WebGL est la technologie qui rend la 3D possible dans une page. Three.js en rend la construction beaucoup plus directe : scènes, lumières, matières, mouvements et interactions.
Pour BYC, il ne s'agit pas d'en mettre partout. C'est une option de plus quand une idée demande plus qu'un écran statique.
Inspirations
Où regarder?
Ce que nous avons fait
Des bases aux premiers prototypes.
On a commencé par consolider les bases avec le tutoriel Three.js Journey : scènes, caméras, animation, interaction, matériaux, modèles importés et performance.
Puis, on les a mises à l'épreuve dans des tests concrets : une page 404 BYC avec des posters manipulables, et une étude de matière en rendu dithered/halftone.
À consulter
Autres expérimentations
Comment ça s'applique?
Du presque invisible au très assumé.
Three.js n'a pas besoin de prendre toute la place. Ça peut être un détail qui rend une page plus vivante, ou le coeur d'une expérience plus immersive.
On a préparé un exemple de chaque côté. Même outil, deux intentions.
Pas de gros asset ni de mise en scène. Une carte, des points, du mouvement : juste ce qu'il faut pour donner du relief à la page sans alourdir l'expérience.
La 3D soutient le design au lieu de le mener.
Pôle expressif
Quand le produit devient la scène.
Ici, le téléphone n'illustre pas le message : il le porte.
Faire voir, sans tout expliquer.
La matière, les proportions, les détails : l'objet se découvre comme un vrai produit.
Le scroll donne le rythme.
Chaque mouvement révèle une intention, une fonctionnalité ou simplement un moment à regarder.