immersive-3d-site

Was macht immersive-3d-site?

Eine Seite, auf der das 3D live ist, nicht ein Video von 3D. Der Scroll des Besuchers ist die Zeitachse und sein Cursor eine zweite Kamera. Echter Text liegt oben auf, lesbar und auswählbar; die WebGL-Leinwand liegt dahinter.

Was Sie zurückgeben: einen Build-Ordner mit BRIEF.md, einer echten index.html, den Engine-Dateien daneben und einem Streifen von Screenshots von Desktop, Telefon und reduzierter Bewegung, plus einem kurzen Bericht darüber, was Sie geprüft haben und was nicht.

Warum diese Seiten scheitern

Die meisten "3D-Websites" sind ein einziger Trick für die ganze Seite: ein sich drehendes Modell mit Text, der darüber einblendet. Spätestens im dritten Abschnitt hat der Besucher alles gesehen und hört auf zu scrollen. Vier Regeln verhindern das:

1. Jeder Akt macht etwas anderes. Verwenden Sie mindestens vier verschiedene Szenengeräte aus references/scene-kit.md, niemals zweimal dasselbe hintereinander.
2. Ein Höhepunkt. Ein Akt ist der Moment, den jemand einem Freund beschreibt. Er bekommt den meisten Scroll-Raum, die beste Szene und einen ruhigeren Akt davor, damit er wirkt.
3. Das 3D dient der Botschaft. Jede Szene zeigt etwas Wahres über das Thema: woraus es besteht, wie es funktioniert, wie es sich anfühlt. Eine Szene, die nur Dekoration ist, wird gestrichen.
4. Text bleibt bei jeder Scroll-Position lesbar. Wenn eine Zeile an irgendeinem Frame über der Szene schwer lesbar ist, bewegt sich die Szene, nicht der Text.

Schritt 0: Das Briefing

Verwenden Sie, was der Benutzer Ihnen bereits gegeben hat. Wenn er ein vollständiges Briefing gegeben oder gesagt hat "Verwenden Sie Ihr Urteilsvermögen", schreiben Sie selbst BRIEF.md, markieren Sie es mit Verfasst unter kreativer Delegation, beantworten Sie jede der folgenden Fragen selbst in der Sprache der Marke und legen Sie los. Andernfalls stellen Sie alle acht in einer einzigen Nachricht, als echte Fragen, niemals als ein von Ihnen erstelltes Menü:

1. Was ist es, für wen ist es und was sollen sie am Ende tun? Eine Aktion, ein überall verwendetes Label.
2. Das Gefühl in drei bis fünf Wörtern, plus bis zu drei Referenzen von allem außer Websites: einem Film, einem Spiel, einem Albumcover, einem Geschäft. Das Nennen von Websites führt dazu, dass eine Seite eine kopiert.
3. Die Reise in ihren Worten: worauf der Besucher zuerst, als nächstes, zuletzt trifft.
4. Wo es ruhig und wo es intensiv sein soll.
5. Wie sich jemand in jeder Phase fühlen soll, und der eine Moment, den sie sich merken sollen. Siehe references/feel.md.
6. Eine Sache, die diese Seite tun soll, die keine Seite, die sie gesehen haben, tut. Der Keim des Signature-Moves. Drängen Sie auf eine echte Antwort; "denkwürdig sein" ist keine.
7. Wie weit von Premium-Minimal entfernt: bieten Sie die Spanne aus references/structures.md.
8. Eine kontinuierliche Welt oder separate Szenen? Der größte strukturelle Gabelpunkt, und ihre Entscheidung. Plus: was sie bereits haben (Logo, Farben, Schriftarten, Produktfotos, 3D-Modelle als .glb).

Schreiben Sie BRIEF.md im Build-Ordner mit ihren Antworten in ihren Worten, dann fügen Sie hinzu:

• Die Reise: vier bis sieben Beats, jeder eine Änderung dessen, was der Besucher weiß oder fühlt.
• Die Gefühlskurve: eine Zeile pro Beat, das Gefühl und was auf dem Bildschirm es verursacht. Keine zwei benachbarten gleich.
• Der Höhepunkt: der Satz, den ein Besucher darüber sagen würde, und in welchem Akt er lebt.
• Es ist die Seite, wo ___: gefüllt mit einem Erlebnis, nicht einer Technik.
• Der Signature-Move: eine Interaktion, die nur auf dieser Seite existiert, in die Seite codiert. Ein Kit-Gerät mit neuen Zahlen zählt nicht.
• Jede bewusste Stille, markiert, damit die Prüfungen sie von toten Scroll unterscheiden können.

Schritt 1: Struktur, Log, dann Bewertung

Drei Dinge, in dieser Reihenfolge. Alle drei vor jeglichem Code.

Wählen Sie eine Struktur aus references/structures.md: eine Welt, Kapitel, Produktbühne, Ausstellung, Spielplatz, Editorial mit Einschüben, Broadcast. Die Navigation, die Eröffnung und der Schluss ergeben sich daraus. Schreiben Sie in BRIEF.md, warum diese und nicht die anderen.

Führen Sie den Fingerabdruck-Log durch. Lesen Sie FINGERPRINTS.md in dem Ordner, der Ihre Builds enthält (erstellen Sie ihn, wenn er fehlt; er beginnt leer). Der Plan muss sich von jeder vorhandenen Zeile in mindestens vier der folgenden Punkte unterscheiden: Struktur, Navigation, Hero-Gerät, Akt-Abfolge, Schluss, Signature-Move. Wenn es scheitert, ändern Sie den Plan, nicht den Log.

Bewerten Sie es. Zuerst die Gefühlskurve, dann ein Gerät pro Beat, als Tabelle in BRIEF.md:

Beat	Akt	Gefühl	Gerät	Spanne	Warum dieses Gerät
Erkennung	Hero	Neugier	Glasobjekt + Dolly	2	Das Produkt, lebendig, bevor ein Wort gelesen wird
Wende	Morph	Erwartung	Partikel-Morph	3	Rauschen wird zu einer Form, wird zum Namen
Höhepunkt	Schiene	Ehrfurcht	Kamera-Schiene	3,5	Dadurch hindurchzureisen sagt, dass hier viel drin ist
Beweis	Explosion	Vertrauen	Explosionsansicht	2,5	Zeigt die Teile, was die Behauptung ist
Engagement	Schluss	Ruhe	Ruhehalt	1,5	Die Seite stoppt und wartet auf den Klick

Prüfungen vor dem Bau:

• Die Verbote der Struktur halten.
• Vier oder mehr Gerätefamilien aus references/scene-kit.md, keine zweimal hintereinander.
• Keine zwei benachbarten Akte teilen ein Gefühl.
• Der Höhepunkt hat die größte Spanne mit deutlichem Abstand, und der Akt davor ist ruhiger.
• Der Schluss löst auf und hält, anstatt in einer Fußzeile zu verblassen.
• Spannen sind in Bildschirmhöhen. Eine kinematografische Seite kommt auf etwa 8 bis 14; redaktionelle und Spielplatz-Seiten können kürzer sein. Niemals auffüllen, um eine Zahl zu erreichen.

Schritt 2: Bauen

mkdir -p <build> && cp <skill>/engine/stage.js <skill>/engine/stage.css <build>/

Starten Sie von templates/starter/index.html für die Struktur (Import-Map, Leinwand, Abschnitte, ein Modul-Skript) und übernehmen Sie die Akt-Muster, die Sie bewertet haben. Liefern Sie niemals den Starter oder seine Orbis-Kopie aus. Jede Seite wird aus ihrem eigenen Briefing geschrieben.

So funktioniert die Engine (engine/stage.js, lesen Sie den Header-Kommentar):

• Die Seite ist ein Stapel von <section data-act="name" data-span="2">. Jeder hält einen .frame, der für die Länge des Abschnitts klebt.
• stage.act(name, { scene, camera, update(p, s), render(renderer, s), resize(w, h) }) registriert eine Szene. p läuft von 0 bis 1 über den Akt. s trägt time, dt, pointer (geglättet, -1 bis 1), velocity (Scroll-Geschwindigkeit), width, height, reduced, coarse.
• Der Akt, der die Mitte des Bildschirms hält, rendert. Akte, die ein scene-Objekt teilen, aktualisieren alle zusammen, sodass eine einzige kontinuierliche Welt einfach mehrere Akte sind, die auf dieselbe Szene zeigen.
• Ein Akt braucht eine Spanne über 1, damit sich p bewegt. p wird über die Distanz gemessen, die der Frame klebt, also hat eine Spanne von exakt 1 keine: p springt von 0 auf 1 und alles daran Gebundene wird nie angezeigt. Verwenden Sie 1,25 oder mehr.
• Jeder Abschnitt erhält --p als CSS-Variable, sodass Überschriften sich auf derselben Zeitachse wie das 3D bewegen können.
• data-reveal an einem Element blendet es beim Eintreten ein; staffeln Sie mit style="--i:2".
• Verwenden Sie seg(p, a, b), um einen Akt in Beats aufzuteilen, und ease.inOut und Verwandte, um sie zu formen.
• Kein WebGL: html.no-webgl zeigt das .poster jedes Akts. Geben Sie jedem Akt ein Poster (ein Bild oder einen Farbverlauf).

Gestalten Sie mit den Token am Anfang von stage.css (Leinwand, Oberfläche, Tinte, weiche Tinte, Akzent, Akzent-Tinte, zwei Schriftarten). Bearbeiten Sie niemals die Engine für ein einzelnes Projekt; maßgeschneidertes Verhalten kommt in das eigene Skript der Seite.

Three.js kommt von einer gepinnten CDN-Version in der Import-Map ([email protected] auf jsdelivr). Behalten Sie die Pin. Wenn Sie eine neuere Version benötigen, wählen Sie eine, die mindestens zwei Wochen alt ist, und führen Sie die Prüfungen erneut durch.

Lesen Sie references/design.md vor dem Schreiben des Markups und references/performance.md vor dem Hinzufügen der zweiten Szene.

Schritt 3: Nachweisen

cd <build> && npm i playwright-core          # einmal pro Build-Ordner; benötigt installierten Google Chrome
node <skill>/scripts/serve.mjs --root . --port 4600 &
node <skill>/scripts/shoot.mjs --url http://localhost:4600 --out shots/desktop
node <skill>/scripts/shoot.mjs --url http://localhost:4600 --out shots/phone --width 390 --height 844 --touch
node <skill>/scripts/shoot.mjs --url http://localhost:4600 --out shots/reduced --reduced-motion --positions 0,1

Das Skript scrollt jeden Akt zu fünf Positionen, wartet, bis die Glättung abgeklungen ist, macht Screenshots von jedem und schreibt sheet.png. Es schlägt fehl bei: Seitenfehlern, fehlgeschlagenen Anfragen, keinem WebGL, einem Akt, der nichts zeichnet, und seitlichem Scroll. Ein bestandener Test bedeutet, dass es läuft, nicht dass es gut ist.

Dann öffnen Sie jedes sheet.png und sehen nach. Für jeden Akt an jeder Position: Kann jede Zeile gelesen werden? Zeigt die Szene, was der Beat sagt? Ist auf dem Telefon etwas beschnitten, verdeckt oder winzig? Sieht der Höhepunkt wie ein Höhepunkt aus? Löst der Schluss auf? Beheben, erneut schießen, erneut nachsehen.

Dann die Gefühlsprüfung (references/feel.md): Scrollen Sie es kalt, ein Wort pro Akt für das, was Sie gefühlt haben, dann vergleichen Sie mit der Kurve in BRIEF.md. Wo sie nicht übereinstimmen, korrigieren Sie die Seite.

Sagen Sie klar, was nicht abgedeckt wurde: Headless Chrome zeichnet WebGL softwaremäßig, daher ist die gemeldete Bildrate nicht die eines echten Geräts, und es kann Ihnen nicht sagen, wie sich das Scrollen auf einem echten Telefon anfühlt. Bitten Sie den Benutzer, es auf seinem Telefon zu öffnen, bevor Sie es als fertig bezeichnen.

Harte Regeln

Niemals	Stattdessen
Ein Szenengerät für die ganze Seite	Vier oder mehr Familien, keine zweimal hintereinander
Text, der in eine Textur oder ein Bild eingebrannt ist	Echtes HTML über der Leinwand
Ein Scroll-Pfeil, Maussymbol oder "Scrollen, um zu entdecken"	Nichts. Der Hero ist genug
Abschnittszähler wie 01 / 05	Löschen Sie sie
Zentrierter Text in jedem Akt	Variieren Sie ihn: links, rechts, zentriert, geteilt, oben, unten
Ein vollflächiger dunkler Overlay für Kontrast	.scrim nur hinter dem Textblock
Farbverlaufstext, Neon-Leuchten auf Schrift	Gewicht und Größe betonen
Erfundene Zahlen oder Statistiken	Nur echte Zahlen vom Benutzer
Gedankenstriche in sichtbarem Text	Punkt, Komma, Doppelpunkt
Dinge, die sich drehen und nie aufhören	Bewegung folgt Scroll oder Zeiger; Leerlauf-Bewegung ist langsam und klein
Ein frischer WebGL-Renderer pro Abschnitt	Eine Leinwand, ein Renderer, viele Szenen (die Engine macht das)
Ausliefern der Starter-Seite	Schreiben Sie die Seite aus ihrem eigenen Briefing
Bauen vor Struktur, Log und Bewertung	Schritt 1, alle drei
Zwei Höhepunkte oder keiner	Einer, mit dem meisten Raum und einem ruhigen Akt davor
Ein Plan, der mit einem früheren Build in drei oder mehr Log-Spalten übereinstimmt	Ändern Sie den Plan, niemals den Log
Es ohne Schritt 3 als fertig bezeichnen	Führen Sie Schritt 3 aus, sehen Sie die Blätter an, machen Sie die Gefühlsprüfung

Ausgabe

Der Build-Ordner, dann ein kurzer Bericht: die Struktur und warum, das Fingerabdruck-Ergebnis gegen jede Zeile, die Reise, die Gefühlskurve und der Höhepunkt, die Bewertungstabelle, der Signature-Move, was shoot.mjs bei allen drei Läufen gemeldet hat, was Sie auf den Blättern gesehen und behoben haben, die Gefühlsprüfung (beabsichtigt gegen gefühlt) und was Sie nicht prüfen konnten. Geben Sie die lokale URL an. Dann fügen Sie die Zeile des Builds zu FINGERPRINTS.md hinzu.