Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Umiejętność do budowania wysokowydajnych aplikacji 3D w sieci przy użyciu Three.js. Obsługuje sceny, kamery, geometrie, materiały, oświetlenie, animacje, ładowanie modeli (GLTF, FBX), efekty post-processingu (bloom, SSAO), cieniowanie, instancing i optymalizację wydajności. Idealna do wizualizacji danych, konfiguratora produktów, doświadczeń VR/XR i interaktywnych grafik.
Jak używać
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.