3D-SVG-Logo-Verformer mit Three.js erstellen

/goal Markeninstrument bauen: ein poliertes, browserbasiertes 3D-Kreativinstrument, das dem beigefügten Referenzbild sehr nahe kommt. Arbeiten Sie autonom durch Implementierung, Inspektion im echten Browser, Kritik und Korrekturen. Streben Sie ein überprüfbares Ergebnis innerhalb von 3,5 Stunden an, mit einem angeforderten oberen Zeitbudget von 4 Stunden. Notieren Sie die Startzeit und prüfen Sie die verstrichene Zeit zwischen den Iterationen. Beenden Sie früher, wenn die Akzeptanzkriterien erfüllt sind. ZUERST Inspizieren Sie die Referenz und lesen Sie die Projektanweisungen. Stellen Sie sicher, dass Sie die App starten, mit ihrem Browser interagieren und tatsächliche Screenshots inspizieren können. Speichern Sie die verfügbare Referenz im Projekt für den wiederholten Vergleich. Wenn die Referenz oder die Browser-Inspektion nicht verfügbar ist, melden Sie das sofort. Erfinden Sie niemals eine visuelle Verifikation. UMFANG Eine herausragende M-Skulptur, Chrommaterial und verfeinerte Interaktion. Verwenden Sie TypeScript, React, Vite und Three.js. Bevorzugen Sie den WebGPURenderer mit TSL und getestetem WebGL2-Fallback. Passen Sie die Implementierung bei Bedarf an, während Sie echtes 3D beibehalten. Trennen Sie Geometrie, Bewegung, Rendering und UI. Zur Laufzeit ist keine Modell-API erforderlich. VISUELLES ZIEL Bewahren Sie das fließende M der Referenz, die dichten parallelen Silberplatten, das substanzielle Volumen, die sauberen Fasen, die schmalen Lücken, die breiten weißen Studio-Reflexionen, die dunklen reflektierten Bänder, den weichen Bodenschatten, den weißen Hintergrund und die zurückhaltende schwarze Manrope-Typografie. Die Skulptur dominiert den Viewport. Verbessern Sie die physische Kohärenz und Benutzerfreundlichkeit, ohne die künstlerische Richtung neu zu gestalten. Die Referenz ist ein künstlerisches Ziel, niemals eine Textur, um das Produkt zu fälschen. GEOMETRIE UND BEWEGUNG Bauen Sie volumetrische Platten mit ausreichender Topologie für lokale Biegung, gesteuert durch ein kontrollierbares Rig oder Führungskurven. Das Ziehen des rechten Arms erzeugt einen sanften lokalen Fächer/Welleneffekt mit verankerten Regionen und kohärentem Einfluss auf benachbarte Platten. Das Loslassen stellt die Ruhekonfiguration mit stabiler, bildratenunabhängiger gedämpfter Dynamik wieder her. Bewahren Sie glaubwürdige Dicke und begrenzen Sie extreme Verformungen. Halten Sie Normalen, Schatten und Zeigerauswahl konsistent mit der verformten Oberfläche. Keine Bildschirmraum-Verschiebung, flache Bildverzerrung, vorab aufgezeichnetes Heldenvideo oder Screenshot-Ersatz. FUNKTIONEN Funktionierendes Ziehen/Loslassen, Kamera-Orbit zur Tiefeninspektion, Spreizungsanpassung, Steifigkeits-/Dämpfungsregler, Zurücksetzen und PNG-Export. Priorisieren Sie diesen Kern. Beliebiger SVG-Import, Audio und zusätzliche Modi sind spätere Arbeiten. Zeigen Sie nur funktionale Bedienelemente. ITERATIONSSCHLEIFE Implementieren Sie eine wertvolle Änderung. Führen Sie die App aus und inspizieren Sie echte Screenshots bei konsistenten Viewport-/Kameraeinstellungen. Üben Sie Ziehen, Loslassen, Zurücksetzen und Export. Identifizieren Sie die drei größten verbleibenden visuellen oder funktionalen Mängel. Beheben Sie den wichtigsten Mangel und wiederholen Sie. Speichern Sie nützliche Checkpoints und Vergleichsbilder. Bewahren Sie die beste funktionierende Version auf. Wenn wiederholte Änderungen fehlschlagen, ändern Sie den Ansatz. Ein erfolgreicher Build allein bedeutet nicht den Abschluss. AKZEPTANZ Wiedererkennbare skulpturale M; klar getrennte Platten; überzeugendes Chrom; enge Referenzkomposition. Sanfte lokale Verformung und stabile Erholung ohne sichtbares Zerreißen oder schwere Überschneidungen. Tatsächliches Volumen, bestätigt aus einem anderen Kamerawinkel. Funktionierende Bedienelemente/Export, keine blockierenden Konsolenfehler und erfolgreicher Build. Inspizieren Sie Bewegung durch Video oder zeitgesteuerte Bildsequenzen. Messen Sie die Leistung im verfügbaren Browser; melden Sie Backend- und Hardware-Einschränkungen. Streben Sie 60fps auf dem Desktop an, ohne ungetestete Ergebnisse zu behaupten. Schwächen Sie die Kriterien nicht ab und verlassen Sie sich nicht nur auf eine selbst vergebene Qualitätsbewertung. ÜBERGABE Reservieren Sie die letzten 15 Minuten für Validierung und Übergabe. Bewahren Sie Quelle, Lockfile, Startanweisungen, besten Screenshot, verformte/wiederhergestellte Zustände, einen anderen Kamerawinkel und Bewegungsnachweis auf. Schreiben Sie REVIEW.md mit abgeschlossenen Prüfungen, verbleibenden visuellen Lücken und nächsten Schritten. Beim Zeitbudget oder einem echten Blocker speichern Sie das beste Ergebnis und melden Sie nicht erfüllte Kriterien ehrlich. Leerlauf, um Zeit zu verbrauchen, ist nicht erlaubt. Treffen Sie Routineentscheidungen unabhängig innerhalb der Projektberechtigungen. Veröffentlichen Sie nicht öffentlich, kaufen Sie keine Dienste und ändern Sie keine unabhängigen Projekte.