home icon

Retournez

Développement Web

Hummingbird 3D

Un website d'un colibri 3D animé en utilisant Three.js pour le rendu 3D et GSAP pour les animations de la modèle, en jouant avec les textures et les mouvements

client icon
Personnel
tools icon
Three js ◦ GSAP ◦ JavaScript ◦ WebGL
duration icon
2 jours

Produits Rendus

Une expérience visuelle animée

J’ai développé un site en utilisant un colibri 3D entièrement animé pour explorer les possibilités du rendu 3D temps réel dans le navigateur. Le projet combine Three.js pour la modélisation et le rendu WebGL, et GSAP pour les animations fluides de la modèle autour de l'écran, de la caméra et des trajectoires de vol.

L’objectif : créer une expérience web légère, immersive et esthétique, tout en optimisant les performances pour une navigation fluide.

Cliquez ici pour le acceder

‍

Problèmes

challenge icon

Défi

Approche

Des interactions 3D en temps réel.

Pourquoi

Je voulais explorer le potentiel du WebGL pour des projets artistiques et interactifs et ainsi améliorer ma maîtrise de Three.js et GSAP.

Quoi

Un colibri 3D animé en temps réel, développé pour le web. Le projet illustre comment combiner Three.js (rendu 3D) et GSAP (animations fluides) pour créer une expérience interactive immersive.

Comment

Import et optimisation du colibri pour le web et configuration des lumières, caméra et textures avec Three.js.

Moodboard

Wireframe

Principes de Design

shapes icon

inclusiveness icon

chemistry glass icon

information icon

Galerie

Modèle 3D utilisé (licence Creative Commons Attribution)

Transition fluide dans la page

Preview complet du site

Points à retenir du projet

star icon

Ce projet m’a permis de combiner créativité et technique en explorant l’animation 3D pour le web.

megaphone icon

J’ai appris à optimiser un rendu 3D temps réel, à travailler avec des animations via GSAP.

check_mark icon

J'ai pu explorer l’expérience utilisateur même dans un environnement différent.

Notes finales