Questa abilità dovrebbe essere utilizzata quando l'utente chiede di "creare una scena 3D", "aggiungere una mesh", "implementa OrbitControls", "carica un modello GLTF", "aggiungi la post-elaborazione Bloom", "scrivi uno shader personalizzato", "crea effetti particellari", "ottimizza le prestazioni di Three.js", "usa WebGPU", "aggiungi ombre", "anima un modello" o menziona Three.js, threejs, WebGL, WebGPU, GLTF, raycaster, materiale shader, materiale PBR o effetti di post-elaborazione. IMPORTANTE: questa abilità è per VANILLA Three.js (JavaScript imperativo). Per la reazione tre Fiber (@react-tre/fiber, R3F, drei), controlla l'abilità `r3f-best-practices`, anche se le abilità three-js aiutano quando si lavora con R3F poiché R3F è un renderer React per Three.js. Fornisce un riferimento completo a Three.js per la grafica Web 3D, inclusa l'impostazione della scena, geometria, materiali, texture, illuminazione, telecamere, caricatori, animazione, controlli, interazione, shader, post-elaborazione, ottimizzazione delle prestazioni, materiali TSL/nodo, WebGPU, fisica e integrazione VR/XR.
Installa rapidamente la skill AI three-js nel tuo ambiente di sviluppo tramite riga di comando
Apri il terminale: Apri il tuo terminale o strumento da riga di comando (Terminal, iTerm, Windows Terminal, ecc.)
Esegui il comando di installazione: Copia ed esegui questo comando: npx skills add https://github.com/noklip-io/agent-skills --skill three-js
Verifica l'installazione: Dopo l'installazione, la skill verrà configurata automaticamente nel tuo ambiente AI di coding e sarà pronta all'uso in Claude Code, Cursor o OpenClaw
React Three Fiber users: This reference is for vanilla Three.js. For R3F/Drei patterns, use the r3f-best-practices skill. However, understanding Three.js concepts here helps when working with R3F since R3F is a React renderer for Three.js.
Questa abilità dovrebbe essere utilizzata quando l'utente chiede di "creare una scena 3D", "aggiungere una mesh", "implementa OrbitControls", "carica un modello GLTF", "aggiungi la post-elaborazione Bloom", "scrivi uno shader personalizzato", "crea effetti particellari", "ottimizza le prestazioni di Three.js", "usa WebGPU", "aggiungi ombre", "anima un modello" o menziona Three.js, threejs, WebGL, WebGPU, GLTF, raycaster, materiale shader, materiale PBR o effetti di post-elaborazione. IMPORTANTE: questa abilità è per VANILLA Three.js (JavaScript imperativo). Per la reazione tre Fiber (@react-tre/fiber, R3F, drei), controlla l'abilità `r3f-best-practices`, anche se le abilità three-js aiutano quando si lavora con R3F poiché R3F è un renderer React per Three.js. Fornisce un riferimento completo a Three.js per la grafica Web 3D, inclusa l'impostazione della scena, geometria, materiali, texture, illuminazione, telecamere, caricatori, animazione, controlli, interazione, shader, post-elaborazione, ottimizzazione delle prestazioni, materiali TSL/nodo, WebGPU, fisica e integrazione VR/XR. Fonte: noklip-io/agent-skills.
Come installo three-js?
Apri il tuo terminale o strumento da riga di comando (Terminal, iTerm, Windows Terminal, ecc.) Copia ed esegui questo comando: npx skills add https://github.com/noklip-io/agent-skills --skill three-js Dopo l'installazione, la skill verrà configurata automaticamente nel tuo ambiente AI di coding e sarà pronta all'uso in Claude Code, Cursor o OpenClaw