Créer un instrument de marque : Déformateur de logo SVG 3D avec Three.js

/goal Construire l'instrument de marque : un instrument créatif 3D raffiné basé sur le navigateur, correspondant étroitement à l'image de référence jointe. Travailler de manière autonome à travers l'implémentation, l'inspection dans un vrai navigateur, la critique et les corrections. Viser un résultat révisable dans les 3,5 heures, avec un budget de temps maximal demandé de 4 heures. Enregistrer l'heure de début et vérifier le temps écoulé entre les itérations. Terminer plus tôt si les critères d'acceptation sont remplis. D'ABORD Inspecter la référence et lire les instructions du projet. Vérifier que vous pouvez lancer l'application, interagir avec son navigateur et inspecter les captures d'écran réelles. Enregistrer la référence disponible dans le projet pour une comparaison répétée. Si la référence ou l'inspection du navigateur est indisponible, le signaler immédiatement. Ne jamais inventer de vérification visuelle. PORTÉE Une sculpture M excellente, matériau chrome et interaction raffinée. Utiliser TypeScript, React, Vite et Three.js. Privilégier WebGPURenderer avec TSL et un repli WebGL2 testé. Adapter l'implémentation si nécessaire tout en préservant la 3D réelle. Séparer la géométrie, le mouvement, le rendu et l'interface utilisateur. Aucune API de modèle n'est nécessaire à l'exécution. CIBLE VISUELLE Préserver le M fluide de la référence, les plaques d'argent parallèles denses, le volume substantiel, les biseaux nets, les espaces étroits, les larges réflexions blanches de studio, les bandes réfléchissantes sombres, l'ombre douce au sol, le fond blanc et la typographie Manrope noire sobre. La sculpture domine la fenêtre d'affichage. Améliorer la cohérence physique et l'utilisabilité sans redessiner la direction artistique. La référence est une cible artistique, jamais une texture utilisée pour simuler le produit. GÉOMÉTRIE ET MOUVEMENT Construire des plaques volumétriques avec une topologie suffisante pour une flexion locale, pilotées par un rig contrôlable ou des courbes de guidage. Faire glisser le bras droit crée un éventail/une onde locale fluide avec des régions ancrées et une influence cohérente sur les plaques voisines. Le relâchement restaure la configuration de repos avec une dynamique amortie stable et indépendante de la fréquence d'images. Préserver une épaisseur crédible et limiter la déformation extrême. Garder les normales, les ombres et la sélection par pointeur cohérentes avec la surface déformée. Aucun déplacement en espace écran, aucune distorsion d'image plate, aucune vidéo héro préenregistrée ni substitut de capture d'écran. FONCTIONS Glisser/relâcher fonctionnel, orbite de caméra pour inspecter la profondeur, réglage de l'étalement, contrôles de rigidité/amortissement, Réinitialiser et export PNG. Prioriser ce cœur. L'import SVG arbitraire, l'audio et les modes supplémentaires sont un travail ultérieur. N'afficher que les contrôles fonctionnels. BOUCLE D'ITÉRATION Implémenter un changement utile. Exécuter l'application et inspecter les captures d'écran réelles à des réglages de fenêtre/caméra cohérents. Exercer glisser, relâcher, réinitialiser et exporter. Identifier les trois plus grands défauts visuels ou fonctionnels restants. Corriger le défaut le plus important et répéter. Enregistrer des points de contrôle et des images de comparaison utiles. Préserver la meilleure version fonctionnelle. Si des changements répétés échouent, changer d'approche. Une construction réussie seule ne signifie pas l'achèvement. ACCEPTATION M sculptural reconnaissable ; plaques séparées nettes ; chrome convaincant ; composition proche de la référence. Déformation locale fluide et récupération stable sans déchirures visibles ni intersections sévères. Volume réel confirmé depuis un autre angle de caméra. Contrôles/export fonctionnels, aucune erreur de console bloquante et construction réussie. Inspecter le mouvement via une vidéo ou des séquences d'images chronométrées. Mesurer la performance dans le navigateur disponible ; signaler les limitations du backend et du matériel. Viser 60fps sur bureau sans prétendre des résultats non testés. Ne pas affaiblir les critères ni se fier uniquement à un score de qualité auto-attribué. TRANSFERT Réserver les 15 dernières minutes pour la validation et le transfert. Préserver la source, le fichier de verrouillage, les instructions de démarrage, la meilleure capture d'écran, les états déformés/restaurés, un autre angle de caméra et les preuves de mouvement. Écrire REVIEW.md avec les vérifications effectuées, les lacunes visuelles restantes et les prochaines étapes. Au budget de temps ou face à un blocage réel, enregistrer le meilleur résultat et signaler honnêtement les critères non remplis. Ne pas rester inactif pour consommer du temps. Prendre des décisions courantes de manière indépendante dans les permissions du projet. Ne pas publier publiquement, acheter des services ou modifier des projets non liés.