ThreeUI 3D-Seiten

Was macht ThreeUI 3D-Seiten?

Verwenden Sie ThreeUI als kuratierte visuelle Quelle, nicht als Sammlung von Anweisungen zum blinden Einfügen. Das Ziel ist eine kohärente, produktionsreife Oberfläche, bei der Hero-Effekt, Typografie, Abstände, Bewegung und Inhalt eine gemeinsame künstlerische Richtung unterstützen.

Arbeitsablauf

1. Erstellen Sie das Design-Brief aus der Anfrage des Benutzers: Produkt, Zielgruppe, gewünschte Stimmung, primärer Inhalt und etwaige Markenvorgaben. Erfinden Sie keine Produktbehauptungen und ersetzen Sie keinen bereitgestellten Text durch Demo-Text.

2. Durchsuchen Sie den gebündelten Katalog:

   node scripts/threeui.mjs search "liquid metal launch button"
   node scripts/threeui.mjs search "奢侈品香水 落地页 烟雾"
   

3. Wählen Sie zwei oder drei kompatible Kandidaten aus und prüfen Sie dann den vielversprechendsten:

   node scripts/threeui.mjs show <item-id>
   node scripts/threeui.mjs guide <item-id>
   

4. Wählen Sie einen Ankereffekt. Fügen Sie höchstens ein unterstützendes ThreeUI-Element hinzu, und nur dann, wenn es einer eindeutigen Hierarchie oder Interaktionsrolle dient. Stapeln Sie keine nicht verwandten Shader, nur um die Seite voller wirken zu lassen.

5. Lesen Sie references/integration.md, bevor Sie Anwendungscode ändern. Es enthält die Quell-, Asset-, Kompositions-, Leistungs- und Überprüfungsregeln.

Entscheidungsregeln

• Passen Sie den Effekt an den Inhalt an. Eine ruhige Produktseite sollte nicht automatisch ein energiereiches Partikelfeld erhalten, und ein Dashboard sollte keinen filmreifen Fullpage-Shader als primäre Oberfläche verwenden.
• Bevorzugen Sie eine ganze Seite oder einen Hero aus den Kategorien Landing Pages und Hero, wenn es sich um eine neue Website handelt. Bevorzugen Sie eine Hintergrundkomponente, wenn eine vorhandene Benutzeroberfläche Tiefe benötigt, und einen Button oder ein UI-Element, wenn der angeforderte Umfang kleiner ist.
• Verwenden Sie die Metadaten runtime, interaction, asset und variants des Katalogs, um Kandidaten abzulehnen, die mit dem Ziel-Stack oder dem Leistungsbudget in Konflikt stehen.
• Behandeln Sie das Bild und den Bewegungseffekt als eine Ebene des Designs. Das umgebende Layout, der Schriftgrad, der Weißraum, der Kontrast und die Handlungsaufforderungen bestimmen immer noch, ob das Ergebnis fertig aussieht.
• Wenn der Katalog keine geeignete Community-Komponente enthält, geben Sie dies klar an und erstellen Sie die nächstbeste geeignete Lösung aus dem vorhandenen Stack des Projekts. Behaupten Sie nicht, dass ein Pro- oder nicht verfügbares ThreeUI-Asset verwendet wurde.

Quellregeln

• Community-Quellcode ist unter MIT-Lizenz lizenziert. Bewahren Sie die Namensnennung und die gebündelten Lizenzhinweise; siehe references/THIRD_PARTY_NOTICES.md. Verteilen Sie keine Remote-ThreeUI-Thumbnails oder -Vorschauen weiter.
• Bevorzugen Sie das npm-Paket @designcodeio/threeui und seine dokumentierten Importnamen. Kopieren Sie keinen vollständigen Vorlagenkatalog in das Zielprojekt.
• Wenn eine Implementierungsanleitung existiert, folgen Sie ihr, bevor Sie improvisieren. Die Anleitung identifiziert die kanonischen Quelldateien, Assets, Laufzeitversionen und das Verhalten.
• Ersetzen Sie niemals einen verfassten Shader, eine Geometrie oder ein Asset durch eine grobe visuelle Annäherung, wenn die exakte Quelle verfügbar ist.
• Verwenden Sie das Pro-MCP oder CLI nur, wenn der Benutzer über einen eigenen autorisierten Zugriff verfügt. Fordern Sie niemals Anmeldeinformationen an, speichern Sie sie nicht und betten Sie sie nicht in das generierte Projekt ein.

Abschlussbalken

Bevor Sie fertig sind, führen Sie die Build-, Test- und Lint-Befehle des Zielprojekts aus, die vorhanden sind. Überprüfen Sie Desktop- und Mobildarstellungen, die Browserkonsole, das Verhalten bei reduzierter Bewegung und ggf. den WebGL-Fallback-Pfad. Melden Sie die exakt durchgeführten Prüfungen und alle Validierungen, die nicht abgeschlossen werden konnten.