Direction de scène
Quand on demande "un site 3D immersif", un modèle construit la moyenne de toutes les démos 3D qu'il a vues : une orbe qui respire dans une nuit violette, un globe pointillé avec des arcs, un produit gris sur un sol gris, ou la même mise en page divisée et nette dans chaque section. Les sites qui gagnent des prix font autre chose : une idée tirée du sujet, un monde autour de son propre objet, une caméra qui change de plan à chaque battement de l'histoire, une lumière avec une source et une finition gradée, une typographie avec une voix, une chose avec laquelle jouer, et le chrome d'un vrai site. Et ils fonctionnent parfaitement sur un téléphone.
Cette compétence vous donne une direction tirée, une bibliothèque d'assets, un kit de démarrage avec le pipeline de finition complet, et une vérification qui rend votre page telle que la voit un visiteur et un jury. Elle prend en charge la direction 3D. Si des compétences en design de page (taste-skill, impeccable, hallmark), des compétences three.js (cloudai-x/threejs-skills) ou les compétences officielles GSAP sont installées, utilisez-les pour ces parties.
<skill> ci-dessous est le dossier de cette compétence. Exécutez les scripts depuis le dossier du projet.
Le déroulement
- Inventaire. Listez ce qui est réel : le nom du sujet, ce qu'il fabrique ou vend, son lieu, ses chiffres, ses artefacts, et tout modèle ou image fourni. Un modèle fourni est le héros (references/object.md).
- Tirez la direction. Si vous laissez faire, vous choisirez la catégorie par défaut, alors laissez le script tirer :
node <skill>/scripts/draw.mjs --kind <personne|fabricant|produit|lieu|marque|événement|...> --brief "<une ligne>" node <skill>/scripts/draw.mjs --direction <id choisi> --brief "<une ligne>" --scenes <n>.scene-direction/sheet.mddans le projet : l'ambiance, le monde, la lumière, la finition, les assets à chercher, les sols, les polices, et un placement de plan et de copie pour chaque scène. Adoptez-la. Ne retirez que pour une raison que vous pouvez énoncer, et dites-le dans le rapport. - Idée et chose vivante (references/idea-and-devices.md). Sur ce site, [une chose qui appartient au sujet] devient [le monde ou le dispositif de la direction]. Elle doit échouer au test du concurrent. Ajoutez la chose vivante. Lisez references/tells.md.
- Obtenez les assets (references/assets.md). Exécutez les commandes
assets.mjsde la fiche : l'HDRI, et à la fidélité de la fiche les accessoires et surfaces pour le monde autour du sujet. Regardez les planches de contact avant de choisir, puisget-les dansassets/. - Construisez à partir de
<skill>/assets/starter.html. C'est une infrastructure, pas une mise en page : canvas plein-écran dont l'arrière-plan est le sol CSS, la chaîne de finition (HDRI, AO, bloom, vignette, tone mapping, SMAA),SHOTSpour la caméra, placement de la copie par scène avec des caches, une horloge (gsap.ticker + Lenis), révélations de lignes, une courte intro, l'en-tête, l'index et le pied de page, dérive du pointeur, mouvement réduit et paliers de qualité. Remplissez sonFINISHà partir de la fiche et lesdata-ground,data-shot,data-copyetdata-chapterde chaque section. Remplacez le texte, le titre et la description fictifs. Dans Vite ou Next.js, portez ses morceaux. - Créez le monde et l'objet (references/object.md, colour-world.md, finish.md). Modélisez la propre chose du sujet selon le barème dans object.md, puis placez-la quelque part : les accessoires et surfaces que vous avez récupérés, une pièce, une vallée, la collection. Éclairez-la avec le rig de la fiche et une source dans le cadre.
- Histoire, plans et mouvement (references/scenes-and-motion.md, motion-and-type.md). Chaque scène reçoit un battement, le plan de la fiche et une déclaration dans la police d'affichage. Pour un lieu, la caméra traverse le monde le long d'un itinéraire (scènes
path), jamais autour d'un diorama. Planifiez le voyage de la caméra, la version téléphone et le mouvement réduit. Habillez le chrome dans le langage du sujet (references/chrome.md). - Vérifiez.
node <skill>/scripts/check.mjs <dossier-ou-url> --out scene-check # ajoutez --click "Entrée" pour une porte d'intronpm i -D playwright && npx playwright install chromium, dans un dossier temporaire si le projet ne doit pas avoir la dépendance). Il filme chaque scène à son point de repos sur desktop et téléphone (scene-check/film-desktop.png,film-phone.png), charge la page à nouveau avec mouvement réduit, et rapporte le temps par image, le poids de la page et la durée de l'intro. Lisez chaque image qu'il écrit. - Regardez et corrigez : les trois premiers, jusqu'à trois tours (references/critique.md). Notez la rubrique à partir des images, corrigez les trois choses les plus faibles, vérifiez et regardez à nouveau. Corrigez les constats avec le plus petit changement qui préserve le design. Si un constat est délibéré (typographie superposée, un cadrage délibéré, un objet qui monte depuis le bas du pli), gardez-le et nommez-le.
- Rapport. Donnez la direction, la phrase d'idée, la chose vivante, les assets utilisés, le résultat de la vérification, vos notes, et ce que vous avez gardé intentionnellement.
Ambition, pas retenue
Dans des tests en aveugle, un juge a préféré la page riche et atmosphérique avec un petit défaut à la page nette et sûre sans aucun, chaque fois qu'il y avait un choix entre les deux. Enlever les défauts est la moitié du travail. L'autre moitié est la substance :
- Plein-écran. Le 3D possède l'écran. La copie est posée dessus avec un cache, ou à côté de l'objet pendant que le rendu s'en éloigne.
- Un plan différent à chaque scène. N'utilisez pas la même caméra avec la copie échangée. La vérification signale une page qui montre un ou deux plans sur tout le défilement.
- Un grand héros. Sur le premier écran, l'objet ou le monde remplit la majeure partie du cadre, à côté du nom en très gros.
- Un monde, pas un objet sur un vide. La pièce, la table, le pays, la collection, les accessoires qui appartiennent au sujet, à l'échelle réelle.
- Atmosphère et finition. Lumière avec une heure du jour et une direction, une source dans la scène qui brille, ombres de contact, un cadre gradé. Riche, pas laiteux : chaque image a un vrai sombre et une couleur saturée ; le brouillard uniquement pour la distance dans un monde, jamais sur le sujet.
- Typographie avec une voix. La police d'affichage de la fiche aux tailles d'affichage, avec de vrais mots et chiffres de l'inventaire, arrivant ligne par ligne.
- Un site, pas une démo. Un en-tête, un index, un pied de page avec un vrai contact, une intro d'environ 2 secondes.
Le minimum : ne jamais livrer ces éléments
- Une ERREUR de la vérification : un plantage, un canvas vide, un chargement échoué (y compris avec mouvement réduit).
- Le sujet coupé par accident ou minuscule sur le premier écran du téléphone.
- Une déclaration que vous ne pouvez pas lire au point de repos de sa scène, ou des étendues du défilement sans mots.
- Une mise en page plus large que le téléphone.
- Un curseur natif caché, un titre, une description ou un
h1manquant, ou une copie fictive. - Une intro qui fait attendre le visiteur plus de quelques secondes, ou des images plus lentes que 40 ips sur le GPU de la vérification.
- Une version three.js obsolète ou incompatible. Utilisez la version du projet, ou celles ci-dessous.
Correction par étiquette
- [erreurs] : corrigez la première erreur avant toute chose. Les causes courantes sont des arguments de constructeur échangés, un
let/constutilisé avant sa déclaration, des URL d'addon sur une autre version, une entrée de carte d'import manquante, des 404, et des textures bloquées par CORS. - [cadrage] : cadrez par plan pour le rapport d'aspect actuel (references/framing.md).
- [ambition] : donnez à chaque scène son propre plan de la fiche (references/scenes-and-motion.md).
- [histoire] : images sans déclaration. Gardez les mots de chaque scène à l'écran pendant que sa scène est à l'écran, et estompez-les uniquement lors du passage (la boucle du kit de démarrage fait cela).
- [étiquettes] : texte et étiquettes qui se chevauchent ou sont coupés ; barres d'outils sur les téléphones (references/labels.md).
- [lisibilité] : calmez la scène derrière le texte ou renforcez le cache avant de déplacer quoi que ce soit (references/legibility.md). Les surfaces claires qui blooment sont trop lumineuses : baissez les lumières, pas le seuil.
- [utilisabilité] : les bases du jury : curseur natif, titre, description, langue, un
h1, texte alternatif, mouvement réduit (references/chrome.md). - [performance] : ratio de pixels, taille de la carte d'ombre, qualité AO, moins d'accessoires, textures plus petites (references/finish.md §7).
Versions épinglées
Vérifiées sur npm et jsDelivr le 2026-11-03 (la carte d'import du kit de démarrage) :
{ "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 importe three/examples/jsm/…, donc gardez cette entrée. postprocessing 6.39 supporte three jusqu'à r187. Notes r187 : PCFSoftShadowMap a disparu (utilisez PCFShadowMap avec shadow.radius) ; HDRLoader remplace RGBELoader ; outputEncoding/sRGBEncoding ont disparu. GSAP 3.13+ inclut SplitText (gsap/SplitText.js).
Références
| Fichier | Lisez-le quand |
|---|---|
| references/idea-and-devices.md | étape 3 : la phrase d'idée, les dispositifs, la chose vivante |
| references/tells.md | étape 3, et à nouveau avant de faire le rapport |
| references/assets.md | étape 4 : fidélité, recherche et placement des accessoires, surfaces, budget |
| references/object.md | étape 6 : modèles fournis (y compris variantes de coloris), le barème pour les objets construits en code, détails, matériaux |
| references/colour-world.md | étape 6 : palette pour l'arrière-plan, lumières et matériaux ; tone mapping ; brouillard ; grain |
| references/finish.md | étape 6 : rigs d'éclairage, l'HDRI, ombres de contact et AO, la chaîne de post-traitement, performance |
| references/scenes-and-motion.md | étape 7 : battements, le vocabulaire des plans, voyage de la caméra, chemins, le téléphone |
| references/motion-and-type.md | étape 7 : une horloge, easings et durées, révélations, l'intro, échelle typographique, mouvement réduit |
| references/chrome.md | étape 7 : en-tête, index, pied de page, curseur, balisage, son |
| references/critique.md | étape 9 : la rubrique et la boucle de regarder-et-corriger |
| references/framing.md, labels.md, legibility.md | corriger un constat avec cette étiquette |
| references/example-furkanboran.md | pour voir le barème : un vrai site déconstruit |
| library/directions.json | les douze directions que le script tire |
Crédits
Les directions tirées, la phrase d'idée, le test du concurrent, "une chose vivante", la boucle de regarder-et-corriger et l'avertissement que la retenue seule semble maigre sont adaptés de taste-skill (MIT). La signature et la rotation des directions proviennent de hallmark (MIT), le mode Expérience de impeccable (Apache-2.0), et le vocabulaire des archétypes de awwwards-3d (MIT). Les modèles, textures et HDRIs proviennent de Poly Haven (CC0). L'exemple travaillé, et les motifs qui en sont adaptés, proviennent de furkanboran.info par Furkan Boran. Voir README.md.