Frontend e UI
WebGL 3D Object
Una mesh hero Three.js illuminata con materiale PBR e ombre reali.
Che cos’è
Una ricetta Three.js per un oggetto hero sfaccettato: geometria a icosaedro, MeshStandardMaterial, camera prospettica, luci key e rim, piano d’ombra, lenta rotazione fluttuante.
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
Perché conta per il design
- Geometria e illuminazione reali producono bordi, riflessi e ombre che le transform CSS non possono simulare.
- I preset di materiale coprono look metallo premium, ceramica morbida e tech tinto di glow.
- Il movimento si limita a lenta rotazione e piccola oscillazione, così il testo resta primario.
Cosa copre
- Rules
- HTML and CSS
- Three.js object recipe
- Material defaults
- Lighting defaults
- Quick checks
Come installarlo
WebGL 3D Object
-
Clona il repository.
git clone https://github.com/MengTo/Skills -
Punta Codex sul file della skill.
agent-skills/web-design/webgl-3d-object/SKILL.md -
Poi descrivi la UI che vuoi. Codex segue la skill.
Come usarlo con Codex
-
Aggiungi il guscio canvas quadrato, poi eseguici sopra l’inizializzatore Three.js.
-
Imposta color, metalness, roughness ed emissive per intonarti all’atmosfera del brand.
-
Conferma la gestione del resize e lo smontaggio di geometria, materiale e renderer.
Ogni plugin qui è gratuito, open source e rimanda alla sua vera fonte upstream.
Altro sulla lista codex-design ↗Altri plugin di design per Codex
Frontend e UI Cosa fa gpt-taste Costruisce landing page da premio con motion GSAP legato allo scroll e griglie bento senza vuoti. 
Design system Cosa fa Stitch Design Taste Scrive un DESIGN.md che guida Google Stitch verso schermate non generiche. 
Frontend e UI Cosa fa image-to-code Genera prima immagini di design, le analizza, poi costruisce il codice frontend corrispondente. 
Frontend e UI Cosa fa imagegen-frontend-mobile Genera flussi di schermate per app mobile di livello premium come immagini, non come codice. Prossimo passo
Progetta con Open Design, senza il setup
Installa questo plugin da solo, oppure porta attorno a Codex un intero strato di design curato con Open Design. Usa la tua chiave, resta padrone dell’output.