[ 01 ]
Le contenu d'abord
Titre, texte et boutons sont dans le HTML. Sans 3D, sans réseau rapide, la page reste complète et lisible.
[ Kit Web3D · démonstration ]
Une sphère qui respire avec vous
Le texte s'affiche d'abord. La 3D arrive ensuite, et seulement si votre téléphone peut la porter.
Qualité choisie pour cet appareil : en cours…
[ 02 ]
La 3D en bonus
Quatre paliers de qualité. Un Android d'entrée de gamme reçoit une sphère légère ; un ordinateur reçoit le grain, la vignette et l'aberration.
[ 03 ]
Le son, si vous voulez
Le bouton « Son » en haut lance une ambiance douce, créée dans le navigateur (0 Ko). La sphère respire sur ses graves.
Ce que le kit corrige
Le modèle reçu était un bon plan de départ. Ces huit pièges ont été corrigés et vérifiés.
iPhone classés « bas de gamme »
deviceMemoryn'existe pas sur Safari : absent n'est plus égal à 2 Go.Deux boucles d'animation
Lenis, GSAP et la scène battent maintenant sur une seule horloge.
Courbe invalide
cubic-bezier()n'est pas une courbe GSAP : remplacée par CustomEase.Écouteurs jamais retirés
.bind(this)au retrait créait une nouvelle fonction : fuite corrigée.Normales fausses
La sphère déformée garde un éclairage juste : normales recalculées dans le shader.
Pixel noir au centre
Le post-traitement normalisait un vecteur nul : NaN supprimé.
Barre de chargement bloquée
Fichiers en cache et erreurs 404 font maintenant avancer la progression.
Micro demandé sans raison
Plus de
getUserMedia: le son est synthétisé, après un geste.