{"id":"7b937c2a-a338-4840-9c3f-2e4ba082c3f5","shortId":"J4D2hF","kind":"skill","title":"threejs-loaders","tagline":"Three.js asset loading - GLTF, textures, images, models, async patterns. Use when loading 3D models, textures, HDR environments, or managing loading progress.","description":"# Three.js Loaders\n\n## When to Use\n- You need to load models, textures, HDR assets, or other external resources in Three.js.\n- The task involves `GLTFLoader`, `TextureLoader`, loading progress, or async asset orchestration.\n- You are managing scene assets rather than authoring geometry or shaders directly.\n\n## Quick Start\n\n```javascript\nimport * as THREE from \"three\";\nimport { GLTFLoader } from \"three/addons/loaders/GLTFLoader.js\";\n\n// Load GLTF model\nconst loader = new GLTFLoader();\nloader.load(\"model.glb\", (gltf) => {\n  scene.add(gltf.scene);\n});\n\n// Load texture\nconst textureLoader = new THREE.TextureLoader();\nconst texture = textureLoader.load(\"texture.jpg\");\n```\n\n## LoadingManager\n\nCoordinate multiple loaders and track progress.\n\n```javascript\nconst manager = new THREE.LoadingManager();\n\n// Callbacks\nmanager.onStart = (url, loaded, total) => {\n  console.log(`Started loading: ${url}`);\n};\n\nmanager.onLoad = () => {\n  console.log(\"All assets loaded!\");\n  startGame();\n};\n\nmanager.onProgress = (url, loaded, total) => {\n  const progress = (loaded / total) * 100;\n  console.log(`Loading: ${progress.toFixed(1)}%`);\n  updateProgressBar(progress);\n};\n\nmanager.onError = (url) => {\n  console.error(`Error loading: ${url}`);\n};\n\n// Use manager with loaders\nconst textureLoader = new THREE.TextureLoader(manager);\nconst gltfLoader = new GLTFLoader(manager);\n\n// Load assets\ntextureLoader.load(\"texture1.jpg\");\ntextureLoader.load(\"texture2.jpg\");\ngltfLoader.load(\"model.glb\");\n// onLoad fires when ALL are complete\n```\n\n## Texture Loading\n\n### TextureLoader\n\n```javascript\nconst loader = new THREE.TextureLoader();\n\n// Callback style\nloader.load(\n  \"texture.jpg\",\n  (texture) => {\n    // onLoad\n    material.map = texture;\n    material.needsUpdate = true;\n  },\n  undefined, // onProgress - not supported for image loading\n  (error) => {\n    // onError\n    console.error(\"Error loading texture\", error);\n  },\n);\n\n// Synchronous (returns texture, loads async)\nconst texture = loader.load(\"texture.jpg\");\nmaterial.map = texture;\n```\n\n### Texture Configuration\n\n```javascript\nconst texture = loader.load(\"texture.jpg\", (tex) => {\n  // Color space (important for color accuracy)\n  tex.colorSpace = THREE.SRGBColorSpace; // For color/albedo maps\n  // tex.colorSpace = THREE.LinearSRGBColorSpace;  // For data maps (normal, roughness)\n\n  // Wrapping\n  tex.wrapS = THREE.RepeatWrapping;\n  tex.wrapT = THREE.RepeatWrapping;\n  // ClampToEdgeWrapping, RepeatWrapping, MirroredRepeatWrapping\n\n  // Repeat/offset\n  tex.repeat.set(2, 2);\n  tex.offset.set(0.5, 0.5);\n  tex.rotation = Math.PI / 4;\n  tex.center.set(0.5, 0.5);\n\n  // Filtering\n  tex.minFilter = THREE.LinearMipmapLinearFilter; // Default\n  tex.magFilter = THREE.LinearFilter; // Default\n  // NearestFilter - pixelated\n  // LinearFilter - smooth\n  // LinearMipmapLinearFilter - smooth with mipmaps\n\n  // Anisotropic filtering (sharper at angles)\n  tex.anisotropy = renderer.capabilities.getMaxAnisotropy();\n\n  // Flip Y (usually true for standard textures)\n  tex.flipY = true;\n\n  tex.needsUpdate = true;\n});\n```\n\n### CubeTextureLoader\n\nFor environment maps and skyboxes.\n\n```javascript\nconst loader = new THREE.CubeTextureLoader();\n\n// Load 6 faces\nconst cubeTexture = loader.load([\n  \"px.jpg\",\n  \"nx.jpg\", // positive/negative X\n  \"py.jpg\",\n  \"ny.jpg\", // positive/negative Y\n  \"pz.jpg\",\n  \"nz.jpg\", // positive/negative Z\n]);\n\n// Use as background\nscene.background = cubeTexture;\n\n// Use as environment map\nscene.environment = cubeTexture;\nmaterial.envMap = cubeTexture;\n```\n\n### HDR/EXR Loading\n\n```javascript\nimport { RGBELoader } from \"three/addons/loaders/RGBELoader.js\";\nimport { EXRLoader } from \"three/addons/loaders/EXRLoader.js\";\n\n// HDR\nconst rgbeLoader = new RGBELoader();\nrgbeLoader.load(\"environment.hdr\", (texture) => {\n  texture.mapping = THREE.EquirectangularReflectionMapping;\n  scene.environment = texture;\n  scene.background = texture;\n});\n\n// EXR\nconst exrLoader = new EXRLoader();\nexrLoader.load(\"environment.exr\", (texture) => {\n  texture.mapping = THREE.EquirectangularReflectionMapping;\n  scene.environment = texture;\n});\n```\n\n### PMREMGenerator\n\nGenerate prefiltered environment maps for PBR.\n\n```javascript\nimport { RGBELoader } from \"three/addons/loaders/RGBELoader.js\";\n\nconst pmremGenerator = new THREE.PMREMGenerator(renderer);\npmremGenerator.compileEquirectangularShader();\n\nnew RGBELoader().load(\"environment.hdr\", (texture) => {\n  const envMap = pmremGenerator.fromEquirectangular(texture).texture;\n\n  scene.environment = envMap;\n  scene.background = envMap;\n\n  texture.dispose();\n  pmremGenerator.dispose();\n});\n```\n\n## GLTF/GLB Loading\n\nThe most common 3D format for web.\n\n```javascript\nimport { GLTFLoader } from \"three/addons/loaders/GLTFLoader.js\";\n\nconst loader = new GLTFLoader();\n\nloader.load(\"model.glb\", (gltf) => {\n  // The loaded scene\n  const model = gltf.scene;\n  scene.add(model);\n\n  // Animations\n  const animations = gltf.animations;\n  if (animations.length > 0) {\n    const mixer = new THREE.AnimationMixer(model);\n    animations.forEach((clip) => {\n      mixer.clipAction(clip).play();\n    });\n  }\n\n  // Cameras (if any)\n  const cameras = gltf.cameras;\n\n  // Asset info\n  console.log(gltf.asset); // Version, generator, etc.\n\n  // User data from Blender/etc\n  console.log(gltf.userData);\n});\n```\n\n### GLTF with Draco Compression\n\n```javascript\nimport { GLTFLoader } from \"three/addons/loaders/GLTFLoader.js\";\nimport { DRACOLoader } from \"three/addons/loaders/DRACOLoader.js\";\n\nconst dracoLoader = new DRACOLoader();\ndracoLoader.setDecoderPath(\n  \"https://www.gstatic.com/draco/versioned/decoders/1.5.6/\",\n);\ndracoLoader.preload();\n\nconst gltfLoader = new GLTFLoader();\ngltfLoader.setDRACOLoader(dracoLoader);\n\ngltfLoader.load(\"compressed-model.glb\", (gltf) => {\n  scene.add(gltf.scene);\n});\n```\n\n### GLTF with KTX2 Textures\n\n```javascript\nimport { GLTFLoader } from \"three/addons/loaders/GLTFLoader.js\";\nimport { KTX2Loader } from \"three/addons/loaders/KTX2Loader.js\";\n\nconst ktx2Loader = new KTX2Loader();\nktx2Loader.setTranscoderPath(\n  \"https://cdn.jsdelivr.net/npm/three@0.183.0/examples/jsm/libs/basis/\",\n);\nktx2Loader.detectSupport(renderer);\n\nconst gltfLoader = new GLTFLoader();\ngltfLoader.setKTX2Loader(ktx2Loader);\n\ngltfLoader.load(\"model-with-ktx2.glb\", (gltf) => {\n  scene.add(gltf.scene);\n});\n```\n\n### GLTF with Meshopt Compression (r183)\n\n```javascript\nimport { GLTFLoader } from \"three/addons/loaders/GLTFLoader.js\";\nimport { MeshoptDecoder } from \"three/addons/libs/meshopt_decoder.module.js\";\n\nconst gltfLoader = new GLTFLoader();\ngltfLoader.setMeshoptDecoder(MeshoptDecoder);\n\ngltfLoader.load(\"compressed-model.glb\", (gltf) => {\n  scene.add(gltf.scene);\n});\n```\n\n**KHR_meshopt_compression** is an alternative to Draco that often provides better compression for animated meshes and preserves mesh topology.\n\n### Process GLTF Content\n\n```javascript\nloader.load(\"model.glb\", (gltf) => {\n  const model = gltf.scene;\n\n  // Enable shadows\n  model.traverse((child) => {\n    if (child.isMesh) {\n      child.castShadow = true;\n      child.receiveShadow = true;\n    }\n  });\n\n  // Find specific mesh\n  const head = model.getObjectByName(\"Head\");\n\n  // Adjust materials\n  model.traverse((child) => {\n    if (child.isMesh && child.material) {\n      child.material.envMapIntensity = 0.5;\n    }\n  });\n\n  // Center and scale\n  const box = new THREE.Box3().setFromObject(model);\n  const center = box.getCenter(new THREE.Vector3());\n  const size = box.getSize(new THREE.Vector3());\n\n  model.position.sub(center);\n  const maxDim = Math.max(size.x, size.y, size.z);\n  model.scale.setScalar(1 / maxDim);\n\n  scene.add(model);\n});\n```\n\n## Other Model Formats\n\n### OBJ + MTL\n\n```javascript\nimport { OBJLoader } from \"three/addons/loaders/OBJLoader.js\";\nimport { MTLLoader } from \"three/addons/loaders/MTLLoader.js\";\n\nconst mtlLoader = new MTLLoader();\nmtlLoader.load(\"model.mtl\", (materials) => {\n  materials.preload();\n\n  const objLoader = new OBJLoader();\n  objLoader.setMaterials(materials);\n  objLoader.load(\"model.obj\", (object) => {\n    scene.add(object);\n  });\n});\n```\n\n### FBX\n\n```javascript\nimport { FBXLoader } from \"three/addons/loaders/FBXLoader.js\";\n\nconst loader = new FBXLoader();\nloader.load(\"model.fbx\", (object) => {\n  // FBX often has large scale\n  object.scale.setScalar(0.01);\n\n  // Animations\n  const mixer = new THREE.AnimationMixer(object);\n  object.animations.forEach((clip) => {\n    mixer.clipAction(clip).play();\n  });\n\n  scene.add(object);\n});\n```\n\n### STL\n\n```javascript\nimport { STLLoader } from \"three/addons/loaders/STLLoader.js\";\n\nconst loader = new STLLoader();\nloader.load(\"model.stl\", (geometry) => {\n  const material = new THREE.MeshStandardMaterial({ color: 0x888888 });\n  const mesh = new THREE.Mesh(geometry, material);\n  scene.add(mesh);\n});\n```\n\n### PLY\n\n```javascript\nimport { PLYLoader } from \"three/addons/loaders/PLYLoader.js\";\n\nconst loader = new PLYLoader();\nloader.load(\"model.ply\", (geometry) => {\n  geometry.computeVertexNormals();\n  const material = new THREE.MeshStandardMaterial({ vertexColors: true });\n  const mesh = new THREE.Mesh(geometry, material);\n  scene.add(mesh);\n});\n```\n\n## Async/Promise Loading\n\n### Promisified Loader\n\n```javascript\nfunction loadModel(url) {\n  return new Promise((resolve, reject) => {\n    loader.load(url, resolve, undefined, reject);\n  });\n}\n\n// Usage\nasync function init() {\n  try {\n    const gltf = await loadModel(\"model.glb\");\n    scene.add(gltf.scene);\n  } catch (error) {\n    console.error(\"Failed to load model:\", error);\n  }\n}\n```\n\n### Load Multiple Assets\n\n```javascript\nasync function loadAssets() {\n  const [modelGltf, envTexture, colorTexture] = await Promise.all([\n    loadGLTF(\"model.glb\"),\n    loadRGBE(\"environment.hdr\"),\n    loadTexture(\"color.jpg\"),\n  ]);\n\n  scene.add(modelGltf.scene);\n  scene.environment = envTexture;\n  material.map = colorTexture;\n}\n\n// Helper functions\nfunction loadGLTF(url) {\n  return new Promise((resolve, reject) => {\n    new GLTFLoader().load(url, resolve, undefined, reject);\n  });\n}\n\nfunction loadRGBE(url) {\n  return new Promise((resolve, reject) => {\n    new RGBELoader().load(\n      url,\n      (texture) => {\n        texture.mapping = THREE.EquirectangularReflectionMapping;\n        resolve(texture);\n      },\n      undefined,\n      reject,\n    );\n  });\n}\n\nfunction loadTexture(url) {\n  return new Promise((resolve, reject) => {\n    new THREE.TextureLoader().load(url, resolve, undefined, reject);\n  });\n}\n```\n\n## Caching\n\n### Built-in Cache\n\n```javascript\n// Enable cache\nTHREE.Cache.enabled = true;\n\n// Clear cache\nTHREE.Cache.clear();\n\n// Manual cache management\nTHREE.Cache.add(\"key\", data);\nTHREE.Cache.get(\"key\");\nTHREE.Cache.remove(\"key\");\n```\n\n### Custom Asset Manager\n\n```javascript\nclass AssetManager {\n  constructor() {\n    this.textures = new Map();\n    this.models = new Map();\n    this.gltfLoader = new GLTFLoader();\n    this.textureLoader = new THREE.TextureLoader();\n  }\n\n  async loadTexture(key, url) {\n    if (this.textures.has(key)) {\n      return this.textures.get(key);\n    }\n\n    const texture = await new Promise((resolve, reject) => {\n      this.textureLoader.load(url, resolve, undefined, reject);\n    });\n\n    this.textures.set(key, texture);\n    return texture;\n  }\n\n  async loadModel(key, url) {\n    if (this.models.has(key)) {\n      return this.models.get(key).clone();\n    }\n\n    const gltf = await new Promise((resolve, reject) => {\n      this.gltfLoader.load(url, resolve, undefined, reject);\n    });\n\n    this.models.set(key, gltf.scene);\n    return gltf.scene.clone();\n  }\n\n  dispose() {\n    this.textures.forEach((t) => t.dispose());\n    this.textures.clear();\n    this.models.clear();\n  }\n}\n\n// Usage\nconst assets = new AssetManager();\nconst texture = await assets.loadTexture(\"brick\", \"brick.jpg\");\nconst model = await assets.loadModel(\"tree\", \"tree.glb\");\n```\n\n## Loading from Different Sources\n\n### Data URL / Base64\n\n```javascript\nconst loader = new THREE.TextureLoader();\nconst texture = loader.load(\"data:image/png;base64,iVBORw0KGgo...\");\n```\n\n### Blob URL\n\n```javascript\nasync function loadFromBlob(blob) {\n  const url = URL.createObjectURL(blob);\n  const texture = await loadTexture(url);\n  URL.revokeObjectURL(url);\n  return texture;\n}\n```\n\n### ArrayBuffer\n\n```javascript\n// From fetch\nconst response = await fetch(\"model.glb\");\nconst buffer = await response.arrayBuffer();\n\n// Parse with loader\nconst loader = new GLTFLoader();\nloader.parse(buffer, \"\", (gltf) => {\n  scene.add(gltf.scene);\n});\n```\n\n### Custom Path/URL\n\n```javascript\n// Set base path\nloader.setPath(\"assets/models/\");\nloader.load(\"model.glb\"); // Loads from assets/models/model.glb\n\n// Set resource path (for textures referenced in model)\nloader.setResourcePath(\"assets/textures/\");\n\n// Custom URL modifier\nmanager.setURLModifier((url) => {\n  return `https://cdn.example.com/${url}`;\n});\n```\n\n## Error Handling\n\n```javascript\n// Graceful fallback\nasync function loadWithFallback(primaryUrl, fallbackUrl) {\n  try {\n    return await loadModel(primaryUrl);\n  } catch (error) {\n    console.warn(`Primary failed, trying fallback: ${error}`);\n    return await loadModel(fallbackUrl);\n  }\n}\n\n// Retry logic\nasync function loadWithRetry(url, maxRetries = 3) {\n  for (let i = 0; i < maxRetries; i++) {\n    try {\n      return await loadModel(url);\n    } catch (error) {\n      if (i === maxRetries - 1) throw error;\n      await new Promise((r) => setTimeout(r, 1000 * (i + 1)));\n    }\n  }\n}\n\n// Timeout\nasync function loadWithTimeout(url, timeout = 30000) {\n  const controller = new AbortController();\n  const timeoutId = setTimeout(() => controller.abort(), timeout);\n\n  try {\n    const response = await fetch(url, { signal: controller.signal });\n    clearTimeout(timeoutId);\n    return response;\n  } catch (error) {\n    if (error.name === \"AbortError\") {\n      throw new Error(\"Loading timed out\");\n    }\n    throw error;\n  }\n}\n```\n\n## Performance Tips\n\n1. **Use compressed formats**: DRACO for geometry, KTX2/Basis for textures\n2. **Load progressively**: Show placeholders while loading\n3. **Lazy load**: Only load what's needed\n4. **Use CDN**: Faster asset delivery\n5. **Enable cache**: `THREE.Cache.enabled = true`\n\n```javascript\n// Progressive loading with placeholder\nconst placeholder = new THREE.Mesh(\n  new THREE.BoxGeometry(1, 1, 1),\n  new THREE.MeshBasicMaterial({ wireframe: true }),\n);\nscene.add(placeholder);\n\nloadModel(\"model.glb\").then((gltf) => {\n  scene.remove(placeholder);\n  scene.add(gltf.scene);\n});\n```\n\n## VRMLLoader Camera Support (r183)\n\nAs of r183, `VRMLLoader` supports loading cameras defined in VRML files.\n\n## See Also\n\n- `threejs-textures` - Texture configuration\n- `threejs-animation` - Playing loaded animations\n- `threejs-materials` - Material from loaded models\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.","tags":["threejs","loaders","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows"],"capabilities":["skill","source-sickn33","skill-threejs-loaders","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/threejs-loaders","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34460 github stars · SKILL.md body (15,061 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T06:52:01.531Z","embedding":null,"createdAt":"2026-04-18T21:46:19.908Z","updatedAt":"2026-04-22T06:52:01.531Z","lastSeenAt":"2026-04-22T06:52:01.531Z","tsv":"'/$':1108 '/draco/versioned/decoders/1.5.6/':498 '/npm/three@0.183.0/examples/jsm/libs/basis/':531 '0':448,1148 '0.01':710 '0.5':259,260,265,266,625 '0x888888':742 '1':140,654,1162,1173,1217,1264,1265,1266 '100':136 '1000':1171 '2':256,257,1227 '3':1144,1234 '30000':1180 '3d':16,418 '4':263,1242 '5':1248 '6':312 'abortcontrol':1184 'aborterror':1206 'accuraci':233 'adjust':617 'also':1297 'altern':575 'angl':286 'anim':442,444,584,711,1305,1308 'animations.foreach':454 'animations.length':447 'anisotrop':282 'arraybuff':1052 'ask':1349 'asset':5,37,53,59,125,164,465,819,917,998,1246 'assetmanag':921,1000 'assets.loadmodel':1010 'assets.loadtexture':1004 'assets/models':1084 'assets/models/model.glb':1089 'assets/textures':1099 'async':11,52,213,798,821,935,962,1035,1115,1139,1175 'async/promise':779 'author':62 'await':804,828,947,975,1003,1009,1045,1058,1063,1122,1134,1154,1165,1193 'background':331 'base':1081 'base64':1019,1030 'better':581 'blender/etc':475 'blob':1032,1038,1042 'boundari':1357 'box':630 'box.getcenter':637 'box.getsize':642 'brick':1005 'brick.jpg':1006 'buffer':1062,1073 'built':895 'built-in':894 'cach':893,897,900,904,907,1250 'callback':113,185 'camera':459,463,1282,1291 'catch':809,1125,1157,1202 'cdn':1244 'cdn.example.com':1107 'cdn.example.com/$':1106 'cdn.jsdelivr.net':530 'cdn.jsdelivr.net/npm/three@0.183.0/examples/jsm/libs/basis/':529 'center':626,636,646 'child':603,620 'child.castshadow':606 'child.ismesh':605,622 'child.material':623 'child.material.envmapintensity':624 'child.receiveshadow':608 'clamptoedgewrap':251 'clarif':1351 'class':920 'clear':903,1324 'cleartimeout':1198 'clip':455,457,718,720 'clone':972 'color':228,232,741 'color.jpg':835 'color/albedo':237 'colortextur':827,841 'common':417 'complet':176 'compress':481,548,572,582,1219 'compressed-model.glb':507,566 'configur':221,1302 'console.error':145,204,811 'console.log':118,123,137,467,476 'console.warn':1127 'const':82,93,97,109,132,153,158,181,214,223,307,314,354,368,391,402,427,437,443,449,462,491,500,524,534,559,597,613,629,635,640,647,672,680,697,712,730,737,743,757,765,771,802,824,945,973,997,1001,1007,1021,1025,1039,1043,1056,1061,1068,1181,1185,1191,1258 'constructor':922 'content':592 'control':1182 'controller.abort':1188 'controller.signal':1197 'coordin':102 'criteria':1360 'cubetextur':315,333,339,341 'cubetextureload':300 'custom':916,1077,1100 'data':242,473,911,1017,1028 'default':270,273 'defin':1292 'deliveri':1247 'describ':1328 'differ':1015 'direct':66 'dispos':990 'draco':480,577,1221 'dracoload':488,492,494,505 'dracoloader.preload':499 'dracoloader.setdecoderpath':495 'enabl':600,899,1249 'environ':20,302,336,382,1340 'environment-specif':1339 'environment.exr':373 'environment.hdr':359,400,833 'envmap':403,408,410 'envtextur':826,839 'error':146,202,205,208,810,816,1110,1126,1132,1158,1164,1203,1209,1214 'error.name':1205 'etc':471 'expert':1345 'exr':367 'exrload':350,369,371 'exrloader.load':372 'extern':40 'face':313 'fail':812,1129 'fallback':1114,1131 'fallbackurl':1119,1136 'faster':1245 'fbx':691,704 'fbxloader':694,700 'fetch':1055,1059,1194 'file':1295 'filter':267,283 'find':610 'fire':172 'flip':289 'format':419,660,1220 'function':784,799,822,843,844,859,878,1036,1116,1140,1176 'generat':380,470 'geometri':63,736,747,763,775,1223 'geometry.computevertexnormals':764 'gltf':7,80,88,433,478,508,511,542,545,567,591,596,803,974,1074,1276 'gltf.animations':445 'gltf.asset':468 'gltf.cameras':464 'gltf.scene':90,439,510,544,569,599,808,987,1076,1280 'gltf.scene.clone':989 'gltf.userdata':477 'gltf/glb':413 'gltfloader':47,76,85,159,161,424,430,484,501,503,517,535,537,552,560,562,853,931,1071 'gltfloader.load':169,506,540,565 'gltfloader.setdracoloader':504 'gltfloader.setktx2loader':538 'gltfloader.setmeshoptdecoder':563 'grace':1113 'handl':1111 'hdr':19,36,353 'hdr/exr':342 'head':614,616 'helper':842 'imag':9,200 'image/png':1029 'import':70,75,230,345,349,387,423,483,487,516,520,551,555,664,668,693,726,753 'info':466 'init':800 'input':1354 'involv':46 'ivborw0kggo':1031 'javascript':69,108,180,222,306,344,386,422,482,515,550,593,663,692,725,752,783,820,898,919,1020,1034,1053,1079,1112,1253 'key':910,913,915,937,941,944,958,964,968,971,986 'khr':570 'ktx2':513 'ktx2/basis':1224 'ktx2loader':521,525,527,539 'ktx2loader.detectsupport':532 'ktx2loader.settranscoderpath':528 'larg':707 'lazi':1235 'let':1146 'limit':1316 'linearfilt':276 'linearmipmaplinearfilt':278 'load':6,15,23,33,49,79,91,116,120,126,130,134,138,147,163,178,201,206,212,311,343,399,414,435,780,814,817,854,869,888,1013,1087,1210,1228,1233,1236,1238,1255,1290,1307,1314 'loadasset':823 'loader':3,26,83,104,152,182,308,428,698,731,758,782,1022,1067,1069 'loader.load':86,187,216,225,316,431,594,701,734,761,792,1027,1085 'loader.parse':1072 'loader.setpath':1083 'loader.setresourcepath':1098 'loadfromblob':1037 'loadgltf':830,845 'loadingmanag':101 'loadmodel':785,805,963,1123,1135,1155,1273 'loadrgb':832,860 'loadtextur':834,879,936,1046 'loadwithfallback':1117 'loadwithretri':1141 'loadwithtimeout':1177 'logic':1138 'manag':22,57,110,150,157,162,908,918 'manager.onerror':143 'manager.onload':122 'manager.onprogress':128 'manager.onstart':114 'manager.seturlmodifier':1103 'manual':906 'map':238,243,303,337,383,925,928 'match':1325 'materi':618,678,685,738,748,766,776,1311,1312 'material.envmap':340 'material.map':191,218,840 'material.needsupdate':193 'materials.preload':679 'math.max':649 'math.pi':262 'maxdim':648,655 'maxretri':1143,1150,1161 'mesh':585,588,612,744,750,772,778 'meshopt':547,571 'meshoptdecod':556,564 'mipmap':281 'mirroredrepeatwrap':253 'miss':1362 'mixer':450,713 'mixer.clipaction':456,719 'model':10,17,34,81,438,441,453,598,634,657,659,815,1008,1097,1315 'model-with-ktx2.glb':541 'model.fbx':702 'model.getobjectbyname':615 'model.glb':87,170,432,595,806,831,1060,1086,1274 'model.mtl':677 'model.obj':687 'model.ply':762 'model.position.sub':645 'model.scale.setscalar':653 'model.stl':735 'model.traverse':602,619 'modelgltf':825 'modelgltf.scene':837 'modifi':1102 'mtl':662 'mtlloader':669,673,675 'mtlloader.load':676 'multipl':103,818 'nearestfilt':274 'need':31,1241 'new':84,95,111,155,160,183,309,356,370,393,397,429,451,493,502,526,536,561,631,638,643,674,682,699,714,732,739,745,759,767,773,788,848,852,863,867,882,886,924,927,930,933,948,976,999,1023,1070,1166,1183,1208,1260,1262,1267 'normal':244 'nx.jpg':318 'ny.jpg':322 'nz.jpg':326 'obj':661 'object':688,690,703,716,723 'object.animations.foreach':717 'object.scale.setscalar':709 'objload':665,681,683 'objloader.load':686 'objloader.setmaterials':684 'often':579,705 'onerror':203 'onload':171,190 'onprogress':196 'orchestr':54 'output':1334 'pars':1065 'path':1082,1092 'path/url':1078 'pattern':12 'pbr':385 'perform':1215 'permiss':1355 'pixel':275 'placehold':1231,1257,1259,1272,1278 'play':458,721,1306 'pli':751 'plyload':754,760 'pmremgener':379,392 'pmremgenerator.compileequirectangularshader':396 'pmremgenerator.dispose':412 'pmremgenerator.fromequirectangular':404 'positive/negative':319,323,327 'prefilt':381 'preserv':587 'primari':1128 'primaryurl':1118,1124 'process':590 'progress':24,50,107,133,142,1229,1254 'progress.tofixed':139 'promis':789,849,864,883,949,977,1167 'promise.all':829 'promisifi':781 'provid':580 'px.jpg':317 'py.jpg':321 'pz.jpg':325 'quick':67 'r':1168,1170 'r183':549,1284,1287 'rather':60 'referenc':1095 'reject':791,796,851,858,866,877,885,892,951,956,979,984 'render':395,533 'renderer.capabilities.getmaxanisotropy':288 'repeat/offset':254 'repeatwrap':252 'requir':1353 'resolv':790,794,850,856,865,874,884,890,950,954,978,982 'resourc':41,1091 'respons':1057,1192,1201 'response.arraybuffer':1064 'retri':1137 'return':210,787,847,862,881,942,960,969,988,1050,1105,1121,1133,1153,1200 'review':1346 'rgbeload':346,355,357,388,398,868 'rgbeloader.load':358 'rough':245 'safeti':1356 'scale':628,708 'scene':58,436 'scene.add':89,440,509,543,568,656,689,722,749,777,807,836,1075,1271,1279 'scene.background':332,365,409 'scene.environment':338,363,377,407,838 'scene.remove':1277 'scope':1327 'see':1296 'set':1080,1090 'setfromobject':633 'settimeout':1169,1187 'shader':65 'shadow':601 'sharper':284 'show':1230 'signal':1196 'size':641 'size.x':650 'size.y':651 'size.z':652 'skill':1319 'skill-threejs-loaders' 'skybox':305 'smooth':277,279 'sourc':1016 'source-sickn33' 'space':229 'specif':611,1341 'standard':294 'start':68,119 'startgam':127 'stl':724 'stlloader':727,733 'stop':1347 'style':186 'substitut':1337 'success':1359 'support':198,1283,1289 'synchron':209 't.dispose':993 'task':45,1323 'test':1343 'tex':227 'tex.anisotropy':287 'tex.center.set':264 'tex.colorspace':234,239 'tex.flipy':296 'tex.magfilter':271 'tex.minfilter':268 'tex.needsupdate':298 'tex.offset.set':258 'tex.repeat.set':255 'tex.rotation':261 'tex.wraps':247 'tex.wrapt':249 'textur':8,18,35,92,98,177,189,192,207,211,215,219,220,224,295,360,364,366,374,378,401,405,406,514,871,875,946,959,961,1002,1026,1044,1051,1094,1226,1300,1301 'texture.dispose':411 'texture.jpg':100,188,217,226 'texture.mapping':361,375,872 'texture1.jpg':166 'texture2.jpg':168 'textureload':48,94,154,179 'textureloader.load':99,165,167 'this.gltfloader':929 'this.gltfloader.load':980 'this.models':926 'this.models.clear':995 'this.models.get':970 'this.models.has':967 'this.models.set':985 'this.textureloader':932 'this.textureloader.load':952 'this.textures':923 'this.textures.clear':994 'this.textures.foreach':991 'this.textures.get':943 'this.textures.has':940 'this.textures.set':957 'three':72,74 'three.animationmixer':452,715 'three.box3':632 'three.boxgeometry':1263 'three.cache.add':909 'three.cache.clear':905 'three.cache.enabled':901,1251 'three.cache.get':912 'three.cache.remove':914 'three.cubetextureloader':310 'three.equirectangularreflectionmapping':362,376,873 'three.js':4,25,43 'three.linearfilter':272 'three.linearmipmaplinearfilter':269 'three.linearsrgbcolorspace':240 'three.loadingmanager':112 'three.mesh':746,774,1261 'three.meshbasicmaterial':1268 'three.meshstandardmaterial':740,768 'three.pmremgenerator':394 'three.repeatwrapping':248,250 'three.srgbcolorspace':235 'three.textureloader':96,156,184,887,934,1024 'three.vector3':639,644 'three/addons/libs/meshopt_decoder.module.js':558 'three/addons/loaders/dracoloader.js':490 'three/addons/loaders/exrloader.js':352 'three/addons/loaders/fbxloader.js':696 'three/addons/loaders/gltfloader.js':78,426,486,519,554 'three/addons/loaders/ktx2loader.js':523 'three/addons/loaders/mtlloader.js':671 'three/addons/loaders/objloader.js':667 'three/addons/loaders/plyloader.js':756 'three/addons/loaders/rgbeloader.js':348,390 'three/addons/loaders/stlloader.js':729 'threej':2,1299,1304,1310 'threejs-anim':1303 'threejs-load':1 'threejs-materi':1309 'threejs-textur':1298 'throw':1163,1207,1213 'time':1211 'timeout':1174,1179,1189 'timeoutid':1186,1199 'tip':1216 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'topolog':589 'total':117,131,135 'track':106 'treat':1332 'tree':1011 'tree.glb':1012 'tri':801,1120,1130,1152,1190 'true':194,292,297,299,607,609,770,902,1252,1270 'undefin':195,795,857,876,891,955,983 'updateprogressbar':141 'url':115,121,129,144,148,786,793,846,855,861,870,880,889,938,953,965,981,1018,1033,1040,1047,1049,1101,1104,1109,1142,1156,1178,1195 'url.createobjecturl':1041 'url.revokeobjecturl':1048 'usag':797,996 'use':13,29,149,329,334,1218,1243,1317 'user':472 'usual':291 'valid':1342 'version':469 'vertexcolor':769 'vrml':1294 'vrmlloader':1281,1288 'web':421 'wirefram':1269 'wrap':246 'www.gstatic.com':497 'www.gstatic.com/draco/versioned/decoders/1.5.6/':496 'x':320 'y':290,324 'z':328","prices":[{"id":"27cf5dad-e307-42f3-a9e4-0312d539e176","listingId":"7b937c2a-a338-4840-9c3f-2e4ba082c3f5","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:46:19.908Z"}],"sources":[{"listingId":"7b937c2a-a338-4840-9c3f-2e4ba082c3f5","source":"github","sourceId":"sickn33/antigravity-awesome-skills/threejs-loaders","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/threejs-loaders","isPrimary":false,"firstSeenAt":"2026-04-18T21:46:19.908Z","lastSeenAt":"2026-04-22T06:52:01.531Z"}],"details":{"listingId":"7b937c2a-a338-4840-9c3f-2e4ba082c3f5","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"threejs-loaders","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34460,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-22T06:40:00Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"7e74b7b7ad83ab5c4c335a8e1c84e78b06cf6aba","skill_md_path":"skills/threejs-loaders/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/threejs-loaders"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"threejs-loaders","description":"Three.js asset loading - GLTF, textures, images, models, async patterns. Use when loading 3D models, textures, HDR environments, or managing loading progress."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/threejs-loaders"},"updatedAt":"2026-04-22T06:52:01.531Z"}}