3d-graphics
3D web graphics with Three.js (WebGL/WebGPU). Capabilities: scenes, cameras, geometries, materials, lights, animations, model loading (GLTF/FBX), PBR materials, shadows, post-processing (bloom, SSAO, SSR), custom shaders, instancing, LOD, physics, VR/XR. Actions: create, build,
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
3D web graphics with Three.js (WebGL/WebGPU). Capabilities: scenes, cameras, geometries, materials, lights, animations, model loading (GLTF/FBX), PBR materials, shadows, post-processing (bloom, SSAO, SSR), custom shaders, instancing, LOD, physics, VR/XR. Actions: create, build, animate, render 3D scenes/models. Keywords: Three.js, WebGL, WebGPU, 3D graphics, scene, camera, geometry, material, light, animation, GLTF, FBX, OrbitControls, PBR, shadow mapping, post-processing, bloom, SSAO, shader, instancing, LOD, WebXR, VR, AR, product configurator, data visualization, architectural walkthrough, interactive 3D, canvas. Use when: creating 3D visualizations, building WebGL/WebGPU apps, loading 3D models, adding animations, implementing VR/XR, creating interactive graphics, building product configurators.
How to use
Załaduj umiejętność 3d-graphics w swoim projekcie Claude/Copilot. Skill zawiera strukturę referencji podzieloną na poziomy nauki — zacznij od poziomu 1 (Getting Started) w pliku references/01-getting-started.md, aby poznać podstawy: setup sceny, geometrie, materiały, oświetlenie i pętlę renderowania.
Dla konkretnego zadania wybierz odpowiednią referencję z poziomu 2: jeśli ładujesz modele 3D, przejrzyj references/02-loaders.md (GLTF, FBX, OBJ); do pracy z teksturami użyj references/03-textures.md; do kontroli kamery — references/04-cameras.md; do oświetlenia i cieni — references/05-lights.md.
Zdefiniuj swoją scenę: określ wymiary canvas, utwórz scenę Three.js, dodaj kamerę (perspektywiczną lub ortograficzną) i renderer WebGL/WebGPU. Umiejętność wspiera zarówno WebGL jak i WebGPU.
Dodaj elementy wizualne: geometrie (kostki, sfery, niestandardowe), materiały (standardowe, metaliczne, custom shadery), oświetlenie (światła kierunkowe, punktowe, reflektory) i tekstury. Dla zaawansowanych efektów zastosuj post-processing (bloom, SSAO, SSR).
Załaduj i animuj modele: użyj loaderów do importu plików GLTF/FBX, zastosuj materiały PBR, dodaj animacje kluczowych klatek. Do optymalizacji wydajności w dużych scenach użyj instancing, LOD (Level of Detail) i culling.
Dla doświadczeń interaktywnych dodaj OrbitControls do manipulacji kamerą, zaimplementuj fizykę jeśli potrzebna, lub rozszerz na VR/XR używając WebXR API. Testuj wydajność i iteruj efekty post-processingu.