Szenenrichtung
Wenn nach "einer immersiven 3D-Site" gefragt wird, baut ein Modell den Durchschnitt aller 3D-Demos, die es gesehen hat: eine atmende Kugel in einer violetten Nacht, ein gepunkteter Globus mit Bögen, ein graues Produkt auf einem grauen Boden oder das gleiche saubere Split-Layout in jedem Abschnitt. Die Sites, die Auszeichnungen gewinnen, machen etwas anderes: eine Idee aus dem Motiv, eine Welt um ihr eigenes Objekt, eine Kamera, die mit jedem erzählerischen Schlag die Einstellung wechselt, Licht mit einer Quelle und einer abgestuften Verarbeitung, Typografie mit einer Stimme, eine Sache zum Spielen und das Chrome einer echten Site. Und sie laufen flüssig auf einem Handy.
Diese Fertigkeit gibt Ihnen eine ausgewürfelte Richtung, eine Asset-Bibliothek, einen Starter mit der vollständigen Verarbeitungspipeline und einen Check, der Ihre Seite so rendert, wie sie ein Besucher und eine Jury sehen. Sie übernimmt die 3D-Richtung. Wenn Page-Design-Fertigkeiten (taste-skill, impeccable, hallmark), three.js-API-Fertigkeiten (cloudai-x/threejs-skills) oder die offiziellen GSAP-Fertigkeiten installiert sind, verwenden Sie diese für die entsprechenden Teile.
<skill> unten ist der Ordner dieser Fertigkeit. Führen Sie die Skripte aus dem Projektordner aus.
Der Ablauf
- Inventar. Listen Sie auf, was real ist: der Name des Motivs, was es herstellt oder verkauft, sein Ort, seine Zahlen, seine Artefakte und jedes mitgelieferte Modell oder Bild. Ein mitgeliefertes Modell ist der Held (references/object.md).
- Richtung auswürfeln. Wenn Sie allein gelassen werden, wählen Sie die Kategorievorgabe aus. Lassen Sie daher das Skript auswürfeln:
node <skill>/scripts/draw.mjs --kind <person|maker|product|place|brand|event|...> --brief "<eine Zeile>" node <skill>/scripts/draw.mjs --direction <gewählte id> --brief "<eine Zeile>" --scenes <n>.scene-direction/sheet.mdin das Projekt: die Stimmung, die Welt, das Licht, die Verarbeitung, die zu suchenden Assets, die Hintergründe, die Schriftarten und eine Einstellungs- und Platzierung des Texts für jede Szene. Übernehmen Sie es. Würfeln Sie nur aus einem Grund neu aus, den Sie angeben können, und nennen Sie ihn im Bericht. - Idee und Live-Ding (references/idea-and-devices.md). Auf dieser Site wird [ein Ding, das zum Motiv gehört] zur [Welt oder zum Gerät der Richtung]. Es muss den Wettbewerber-Test nicht bestehen. Fügen Sie das eine Live-Ding hinzu. Lesen Sie references/tells.md.
- Assets beschaffen (references/assets.md). Führen Sie die
assets.mjs-Befehle des Sheets aus: das HDRI und, entsprechend der Wiedergabetreue des Sheets, die Requisiten und Oberflächen für die Welt um das Motiv herum. Schauen Sie sich die Kontaktbögen an, bevor Sie wählen, holen Sie sie dann mitgetinassets/. - Aufbau aus
<skill>/assets/starter.html. Es ist Infrastruktur, kein Layout: randloser Canvas, dessen Hintergrund der CSS-Grund ist, die Verarbeitungskette (HDRI, AO, Bloom, Vignette, Tonemapping, SMAA),SHOTSfür die Kamera, Textplatzierung pro Szene mit Scrims, eine Uhr (gsap.ticker + Lenis), Zeileneinblendungen, ein kurzes Intro, der Header, Index und Footer, Mauszeiger-Driftschwebe, reduzierte Bewegung und Qualitätsstufen. Füllen Sie dessenFINISHaus dem Sheet und diedata-ground,data-shot,data-copyunddata-chapterjedes Abschnitts. Ersetzen Sie den Platzhaltertext, Titel und Beschreibung. Portieren Sie die Teile in Vite oder Next.js. - Welt und Objekt erschaffen (references/object.md, colour-world.md, finish.md). Modellieren Sie das eigene Ding des Motivs gemäß den Vorgaben in object.md, und setzen Sie es dann irgendwo hinein: die Requisiten und Oberflächen, die Sie geholt haben, einen Raum, ein Tal, die Sammlung. Beleuchten Sie es mit der Anordnung des Sheets und einer Quelle innerhalb des Bildrahmens.
- Geschichte, Einstellungen und Bewegung (references/scenes-and-motion.md, motion-and-type.md). Jede Szene erhält einen Schlag, die Einstellung des Sheets und eine Aussage in der Auszeichnungsschrift. Für einen Ort reist die Kamera durch die Welt entlang einer Route (
path-Szenen), niemals um ein Diorama herum. Planen Sie die Kamerafahrt, die Telefonversion und die reduzierte Bewegung. Kleiden Sie das Chrome in der Sprache des Motivs (references/chrome.md). - Check.
node <skill>/scripts/check.mjs <ordner-oder-url> --out scene-check # füge --click "Enter" für ein Intro-Gate hinzunpm i -D playwright && npx playwright install chromium, in einem Scratch-Ordner, falls das Projekt die Abhängigkeit nicht bekommen soll). Es filmt jede Szene an ihrem Ruhepunkt auf Desktop und Handy (scene-check/film-desktop.png,film-phone.png), lädt die Seite erneut mit reduzierter Bewegung und meldet Bildzeit, Seitengewicht und Dauer des Intros. Lesen Sie jedes Bild, das es schreibt. - Anschauen und beheben: die Top drei, bis zu drei Runden (references/critique.md). Bewerten Sie die Rubrik anhand der Bilder, beheben Sie die drei schwächsten Punkte, prüfen und schauen Sie erneut. Beheben Sie Befunde mit der kleinsten Änderung, die das Design bewahrt. Wenn ein Befund beabsichtigt ist (geschichtete Schrift, ein bewusster Beschnitt, ein Objekt, das von unterhalb des Falzes aufsteigt), behalten Sie ihn und benennen Sie ihn.
- Bericht. Geben Sie die Richtung, den Ideensatz, das Live-Ding, die verwendeten Assets, das Check-Ergebnis, Ihre Bewertungen und was Sie absichtlich beibehalten haben, an.
Ehrgeiz, nicht Zurückhaltung
In Blindtests bevorzugte ein Juror die reichhaltige, atmosphärische Seite mit einem kleinen Fehler gegenüber der sauberen, sicheren Seite ohne Fehler, jedes Mal, wenn die Wahl zwischen ihnen bestand. Fehler zu beseitigen ist die eine Hälfte der Arbeit. Die andere Hälfte ist Substanz:
- Randlos. Die 3D-Welt beherrscht den Bildschirm. Der Text sitzt darauf mit einem Scrim oder neben dem Objekt, während sich der Render davon wegbewegt.
- Eine andere Einstellung pro Szene. Verwenden Sie nicht die gleiche Kamera mit ausgetauschtem Text. Der Check kennzeichnet eine Seite, die nur eine oder zwei Einstellungen über das gesamte Scrollen zeigt.
- Ein großer Held. Auf dem ersten Bildschirm füllt das Objekt oder die Welt den größten Teil des Bildrahmens, neben dem Namen, der riesig gesetzt ist.
- Eine Welt, kein Objekt in der Leere. Der Raum, der Tisch, das Land, die Sammlung, die Requisiten, die zum Motiv gehören, in echtem Maßstab.
- Atmosphäre und Verarbeitung. Licht mit einer Tageszeit und einer Richtung, eine Quelle innerhalb der Szene, die leuchtet, Kontaktschatten, ein abgestufter Rahmen. Reichhaltig, nicht milchig: Jeder Rahmen hat ein echtes Dunkel und eine gesättigte Farbe; Nebel nur für Distanz in einer Welt, niemals über dem Motiv.
- Typografie mit einer Stimme. Die Auszeichnungsschrift des Sheets in Auszeichnungsgrößen, mit echten Wörtern und Zahlen aus dem Inventar, die Zeile für Zeile eintreffen.
- Eine Site, keine Demo. Ein Header, ein Index, ein Footer mit einem echten Kontakt, ein Intro von etwa 2 Sekunden.
Das Minimum: Nie dies ausliefern
- Ein FEHLER vom Check: ein Absturz, ein leerer Canvas, ein fehlgeschlagener Ladevorgang (auch mit reduzierter Bewegung).
- Das Motiv aus Versehen beschnitten oder winzig auf dem ersten Bildschirm des Telefons.
- Eine Aussage, die Sie am Ruhepunkt ihrer Szene nicht lesen können, oder Abschnitte des Scrollens ohne Worte.
- Ein Layout, das breiter als das Telefon ist.
- Ein versteckter nativer Mauszeiger, ein fehlender Titel, eine fehlende Beschreibung oder
h1, oder Platzhaltertext. - Ein Intro, das den Besucher länger als ein paar Sekunden warten lässt, oder Bilder, die auf der GPU des Checks langsamer als 40 fps sind.
- Eine veraltete oder nicht passende three.js-Version. Verwenden Sie die Version des Projekts oder die untenstehenden.
Behebung nach Tag
- [errors]: Beheben Sie den ersten Fehler vor allem anderen. Häufige Ursachen sind vertauschte Konstruktorargumente, ein
let/const, das vor seiner Deklaration verwendet wird, Addon-URLs auf einer anderen Version, ein fehlender Import-Map-Eintrag, 404er und durch CORS blockierte Texturen. - [framing]: Bildausschnitt pro Einstellung für das aktuelle Seitenverhältnis (references/framing.md).
- [ambition]: Geben Sie jeder Szene ihre eigene Einstellung aus dem Sheet (references/scenes-and-motion.md).
- [story]: Bilder ohne Aussage. Halten Sie die Wörter jeder Szene auf dem Bildschirm, während ihre Szene auf dem Bildschirm ist, und blenden Sie sie nur bei der Übergabe aus (die Schleife des Starters erledigt dies).
- [labels]: Überlappender oder abgeschnittener Text und Labels; Symbolleisten auf Telefonen (references/labels.md).
- [legibility]: Beruhigen Sie die Szene hinter dem Text oder verstärken Sie den Scrim, bevor Sie etwas verschieben (references/legibility.md). Helle Oberflächen, die bloomartig leuchten, sind zu hell: Senken Sie die Lichter, nicht die Schwelle.
- [usability]: Die Grundlagen der Jury: nativer Mauszeiger, Titel, Beschreibung, Sprache, eine
h1, Alternativtext, reduzierte Bewegung (references/chrome.md). - [performance]: Pixelverhältnis, Schattenkartengröße, AO-Qualität, weniger Requisiten, kleinere Texturen (references/finish.md §7).
Fixierte Versionen
Geprüft auf npm und jsDelivr am 03.11.2026 (die Import-Map des Starters):
{ "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/",
"three/examples/jsm/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/",
"postprocessing": "https://cdn.jsdelivr.net/npm/[email protected]/build/index.js",
"n8ao": "https://cdn.jsdelivr.net/npm/[email protected]/dist/N8AO.js",
"gsap": "https://cdn.jsdelivr.net/npm/[email protected]/index.js",
"gsap/": "https://cdn.jsdelivr.net/npm/[email protected]/",
"lenis": "https://cdn.jsdelivr.net/npm/[email protected]/dist/lenis.mjs" }
n8ao importiert three/examples/jsm/…, behalten Sie daher diesen Eintrag. postprocessing 6.39 unterstützt three bis r187. r187 Hinweise: PCFSoftShadowMap ist weg (verwenden Sie PCFShadowMap mit shadow.radius); HDRLoader ersetzt RGBELoader; outputEncoding/sRGBEncoding sind weg. GSAP 3.13+ enthält SplitText (gsap/SplitText.js).
Referenzen
| Datei | Lesen, wenn … |
|---|---|
| references/idea-and-devices.md | Schritt 3: der Ideensatz, Geräte, das Live-Ding |
| references/tells.md | Schritt 3, und erneut vor dem Bericht |
| references/assets.md | Schritt 4: Wiedergabetreue, Finden und Platzieren von Requisiten, Oberflächen, Budget |
| references/object.md | Schritt 6: mitgelieferte Modelle (einschließlich Farbweg-Varianten), die Messlatte für code-erstellte Objekte, Details, Materialien |
| references/colour-world.md | Schritt 6: Palette zu Hintergrund, Lichtern und Materialien; Tonemapping; Nebel; Korn |
| references/finish.md | Schritt 6: Lichtanordnungen, das HDRI, Kontaktschatten und AO, die Post-Kette, Performance |
| references/scenes-and-motion.md | Schritt 7: Schläge, das Einstellungsvokabular, Kamerafahrt, Pfade, das Telefon |
| references/motion-and-type.md | Schritt 7: eine Uhr, Easing-Funktionen und Dauern, Einblendungen, das Intro, Schriftgröße, reduzierte Bewegung |
| references/chrome.md | Schritt 7: Header, Index, Footer, Mauszeiger, Auszeichnung, Ton |
| references/critique.md | Schritt 9: die Rubrik und die Ansichts-Korrektur-Schleife |
| references/framing.md, labels.md, legibility.md | Behebung eines Befunds mit diesem Tag |
| references/example-furkanboran.md | Um die Messlatte zu sehen: eine echte Site, auseinandergenommen |
| library/directions.json | Die zwölf Richtungen, aus denen das Skript würfelt |
Danksagungen
Die ausgewürfelten Richtungen, der Ideensatz, der Wettbewerber-Test, "ein Live-Ding", die Ansichts-Korrektur-Schleife und die Warnung, dass Zurückhaltung allein dünn wirkt, sind adaptiert von taste-skill (MIT). Die Signatur und die Rotation der Richtungen stammen von hallmark (MIT), der Experience-Modus von impeccable (Apache-2.0) und das Archetyp-Vokabular von awwwards-3d (MIT). Modelle, Texturen und HDRIs stammen von Poly Haven (CC0). Das ausgearbeitete Beispiel und die daraus adaptierten Muster stammen von furkanboran.info von Furkan Boran. Siehe README.md.