Auteur: 桌子
Essayer en direct À propos de ce projet
Maya Bennett est un CV 3D en six chapitres consacré à une graphiste fictive. Quatre modèles de fruits Tripo flottent entre les panneaux biographie, formation, parcours et expertise, tandis que le défilement fait avancer ou reculer une animation de caméra importée.
La couche WebGL reste séparée du CV HTML, afin que le récit demeure lisible et puisse être ignoré même sans la scène 3D. En dessous, six projets d’identité visuelle, de packaging et d’édition s’ouvrent dans des vues détaillées dédiées, tandis que Color Lab donne accès aux réglages d’éclairage, de mise au point et de matériaux qui façonnent le rendu final.
Points forts
- Parcourez six chapitres du CV pendant que l’animation de caméra importée vous accompagne — revenez en arrière et le même trajet s’inverse naturellement.
- Faites glisser l’un des quatre modèles de fruits flottants pour le faire tourner avec inertie, puis regardez-le reprendre sa place dans la scène.
- Ouvrez Color Lab pour régler en temps réel l’exposition, la profondeur de champ, l’éclairage EXR et le matériau de chaque fruit.
- Poursuivez avec six projets sélectionnés d’identité visuelle, de packaging et d’édition, chacun s’ouvrant dans sa propre vue détaillée.
Analyse technique
Assets 3D · modèles de fruits Tripo
Banane, tomate, fraise et pomme sont livrées sous forme de quatre assets GLB dont les nœuds de scène et les matériaux portent des identifiants Tripo. React Three Fiber charge chaque asset via un composant partagé unique, tandis que la configuration de la scène gère l’échelle, la position, le flottement et les décalages de mise au point.
Chorégraphie du défilement · GSAP + caméra animée
GSAP ScrollTrigger associe la progression du défilement du CV à une unique timeline de 0 à 1. Le GLB de caméra importé est normalisé sur cinq secondes et échantillonné aux images 0, 60, 120, 180, 240 et 300, afin que chaque chapitre atteigne un point prévisible et s’inverse lors du défilement vers le haut.
Interaction des fruits · glisser par quaternions et retour
Le mouvement du pointeur commande la rotation par quaternions et une vitesse angulaire plafonnée. Après le relâchement, chaque fruit conserve brièvement sa rotation inertielle, puis l’amortissement le ramène à sa pose définie et rétablit progressivement le mouvement automatique ; le même parcours du pointeur fonctionne à la souris comme au tactile.
Finition cinématographique · éclairage EXR, autofocus et Color Lab
Un ciel EXR éclaire les matériaux PBR via PMREM, tandis qu’une caméra fixe de 25 mm déplace la mise au point entre le groupe de quatre fruits et le sujet actif. BokehPass, le bloom et l’étalonnage finalisent l’image, et Color Lab donne accès à ces réglages en direct.
