Frontend & UI
WebGL 3D Object
Un mesh hero Three.js éclairé, matériau PBR et vraies ombres.
De quoi il s’agit
Une recette Three.js pour un objet hero à facettes : géométrie d’icosaèdre, MeshStandardMaterial, caméra en perspective, lumières principale et de contour, plan d’ombre, lente rotation flottante.
Create a real 3D WebGL object with geometric mesh depth, physically based material, directional and ambient lighting, perspective camera, subtle rotation, and floating motion. Use when a page needs a faceted 3D hero obje
Pourquoi ça compte pour le design
- Une vraie géométrie et un vrai éclairage produisent arêtes, reflets et ombres que les transforms CSS ne savent pas simuler.
- Des presets de matériau couvrent le métal premium, la céramique douce et les looks tech teintés de lueur.
- Le mouvement se limite à une rotation lente et un léger balancement : le texte reste prioritaire.
Ce que ça couvre
- Rules
- HTML and CSS
- Three.js object recipe
- Material defaults
- Lighting defaults
- Quick checks
Comment l’installer
WebGL 3D Object
-
Clonez le dépôt.
git clone https://github.com/MengTo/Skills -
Pointez Codex sur le fichier du skill.
agent-skills/web-design/webgl-3d-object/SKILL.md -
Décrivez ensuite l’interface voulue. Codex suit le skill.
Comment le faire tourner avec Codex
-
Ajoutez la coque de canvas carrée, puis lancez l’initialiseur Three.js dessus.
-
Réglez color, metalness, roughness et emissive pour coller à l’ambiance de la marque.
-
Confirmez la gestion du redimensionnement et la libération de la géométrie, du matériau et du renderer.
Chaque plugin présenté ici est gratuit, open source, et renvoie à sa vraie source amont.
En savoir plus sur la liste codex-design ↗Autres plugins design pour Codex
Frontend & UI Ce qu’il fait gpt-taste Construit des pages primables avec du scroll GSAP et des grilles bento sans trous. 
Design systems Ce qu’il fait Stitch Design Taste Rédige un DESIGN.md qui oriente Google Stitch vers des écrans non génériques. 
Frontend & UI Ce qu’il fait image-to-code Génère d’abord des images de design, les analyse, puis construit le code frontend correspondant. 
Frontend & UI Ce qu’il fait imagegen-frontend-mobile Génère des parcours d’écrans d’app mobile premium en images, pas en code. Prochaine étape
Designez avec Open Design, sans la config
Installez ce plugin vous-même, ou faites tourner toute une couche design sélectionnée autour de Codex avec Open Design. Apportez votre clé, gardez la main sur ce que vous produisez.