threejs-loaders
Three.js asset loading - GLTF, textures, images, models, async patterns. Use when loading 3D models, textures, HDR environments, or managing loading progress.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Three.js asset loading - GLTF, textures, images, models, async patterns. Use when loading 3D models, textures, HDR environments, or managing loading progress.
How to use
Zaimportuj niezbędne moduły Three.js — GLTFLoader do modeli, TextureLoader do tekstur i LoadingManager do koordynacji ładowania wielu zasobów naraz.
Utwórz instancję LoadingManager, aby śledzić postęp wszystkich ładowanych plików. Przypisz funkcje zwrotne do zdarzeń onStart, onProgress, onLoad i onError — dzięki temu będziesz wiedzieć, kiedy ładowanie się zaczyna, postępuje, kończy lub napotyka błąd.
Przekaż LoadingManager do każdego loadera (GLTFLoader, TextureLoader), aby wszystkie operacje były koordynowane. Callback onLoad wywoła się dopiero, gdy wszystkie zasoby będą w pełni załadowane.
Załaduj modele GLTF za pomocą GLTFLoader — przekaż ścieżkę do pliku .glb lub .gltf, a w callbacku onLoad dodaj scenę modelu do sceny Three.js za pomocą scene.add(gltf.scene).
Załaduj tekstury za pomocą TextureLoader — przypisz załadowaną teksturę do właściwości material.map i ustaw material.needsUpdate na true, aby materiał się odświeżył.
Obsługuj błędy i postęp — w callbacku onProgress aktualizuj pasek postępu na podstawie stosunku loaded do total, a w onError wyświetl komunikat o problemie użytkownikowi.