[{"data":1,"prerenderedAt":1499},["ShallowReactive",2],{"navigation":3,"/api/composables/use-loader":211,"/api/composables/use-loader-surround":1494},[4,29,62,149,177,187,191,195,199,203,207],{"title":5,"path":6,"stem":7,"children":8,"icon":27,"titleTemplate":28},"Getting Started","/getting-started","1.getting-started/1.index",[9,12,17,22],{"title":10,"path":6,"stem":7,"icon":11},"Introduction","i-lucide-house",{"title":13,"path":14,"stem":15,"icon":16},"Installation","/getting-started/installation","1.getting-started/2.installation","i-lucide-download",{"title":18,"path":19,"stem":20,"icon":21},"Your First Scene","/getting-started/your-first-scene","1.getting-started/3.your-first-scene","i-lucide-donut",{"title":23,"path":24,"stem":25,"icon":26},"Upgrade Guide","/getting-started/upgrade-guide","1.getting-started/4.upgrade-guide","i-lucide-circle-arrow-up","i-lucide-rocket","%s · Get Started with TresJS",{"title":30,"path":31,"stem":32,"children":33},"Essentials","/essentials","2.essentials",[34,36,48],{"title":30,"path":31,"stem":35},"2.essentials/index",{"title":37,"icon":38,"open":39,"path":40,"stem":41,"children":42,"page":47},"Core Architecture","i-lucide-cpu",true,"/essentials/core-architecture","2.essentials/1.core-architecture",[43],{"title":44,"path":45,"stem":46},"Custom Vue Renderer","/essentials/core-architecture/custom-vue-renderer","2.essentials/1.core-architecture/2.custom-vue-renderer",false,{"title":49,"icon":50,"open":39,"path":51,"stem":52,"children":53,"page":47},"Key Concepts","i-lucide-medal","/essentials/concepts","2.essentials/2.concepts",[54,58],{"title":55,"path":56,"stem":57},"Declarative vs Imperative","/essentials/concepts/declarative-vs-imperative","2.essentials/2.concepts/1.declarative-vs-imperative",{"title":59,"path":60,"stem":61},"Reactivity","/essentials/concepts/reactivity","2.essentials/2.concepts/2.reactivity",{"title":63,"path":64,"stem":65,"children":66},"API","/api","3.api",[67,70,84,111,121,131],{"title":68,"path":64,"stem":69},"TresJS API Reference","3.api/1.index",{"title":71,"icon":72,"open":39,"path":73,"stem":74,"children":75,"page":47},"Components","i-lucide-box","/api/components","3.api/1.components",[76,80],{"title":77,"path":78,"stem":79},"\u003CTresCanvas />","/api/components/tres-canvas","3.api/1.components/tres-canvas",{"title":81,"path":82,"stem":83},"Tres Components","/api/components/tres-objects","3.api/1.components/tres-objects",{"title":85,"titleTemplate":86,"icon":87,"path":88,"stem":89,"children":90,"page":47},"Composables","%s · TresJS Composables","i-lucide-arrow-right-left","/api/composables","3.api/2.composables",[91,95,99,103,107],{"title":92,"path":93,"stem":94},"useTres","/api/composables/use-tres","3.api/2.composables/1.use-tres",{"title":96,"path":97,"stem":98},"useTresContext","/api/composables/use-tres-context","3.api/2.composables/2.use-tres-context",{"title":100,"path":101,"stem":102},"useLoop","/api/composables/use-loop","3.api/2.composables/3.use-loop",{"title":104,"path":105,"stem":106},"useGraph","/api/composables/use-graph","3.api/2.composables/4.use-graph",{"title":108,"path":109,"stem":110},"useLoader","/api/composables/use-loader","3.api/2.composables/5.use-loader",{"title":112,"icon":113,"path":114,"stem":115,"children":116,"page":47},"Event handling","i-lucide-mouse-pointer-2","/api/events","3.api/3.events",[117],{"title":118,"path":119,"stem":120},"Pointer Events","/api/events/pointer-events","3.api/3.events/1.pointer-events",{"title":122,"icon":123,"path":124,"stem":125,"children":126,"page":47},"Utils","i-lucide-wrench","/api/utils","3.api/4.utils",[127],{"title":128,"path":129,"stem":130},"Type Guards","/api/utils/type-guards","3.api/4.utils/1.type-guards",{"title":132,"icon":133,"path":134,"stem":135,"children":136,"page":47},"Advanced","i-lucide-brain-circuit","/api/advanced","3.api/5.advanced",[137,141,145],{"title":138,"path":139,"stem":140},"Scaling Performance 🚀","/api/advanced/performance","3.api/5.advanced/performance",{"title":142,"path":143,"stem":144},"Primitives","/api/advanced/primitives","3.api/5.advanced/primitives",{"title":146,"path":147,"stem":148},"WebGPU","/api/advanced/web-gpu","3.api/5.advanced/web-gpu",{"title":150,"path":151,"stem":152,"children":153},"Cookbook","/cookbook","4.cookbook",[154,157,161,165,169,173],{"title":155,"path":151,"stem":156},"Cookbook 🍳🧑‍🍳","4.cookbook/index",{"title":158,"path":159,"stem":160},"OrbitControls","/cookbook/orbit-controls","4.cookbook/1.orbit-controls",{"title":162,"path":163,"stem":164},"Basic Animations","/cookbook/basic-animations","4.cookbook/2.basic-animations",{"title":166,"path":167,"stem":168},"Model Animation","/cookbook/model-animation","4.cookbook/3.model-animation",{"title":170,"path":171,"stem":172},"Advanced GSAP Animations","/cookbook/advanced-gsap-animations","4.cookbook/4.advanced-gsap-animations",{"title":174,"path":175,"stem":176},"Tweakpane","/cookbook/tweakpane","4.cookbook/5.tweakpane",{"title":178,"path":179,"stem":180,"children":181},"Community","/community","5.community/1.index",[182,183],{"title":178,"path":179,"stem":180},{"title":184,"path":185,"stem":186},"Awesome Resources","/community/awesome-resources","5.community/awesome-resources",{"title":188,"path":189,"stem":190},"German Translation","/de","de",{"title":192,"path":193,"stem":194},"Spanish Translation","/es","es",{"title":196,"path":197,"stem":198},"French Translation","/fr","fr",{"title":200,"path":201,"stem":202},"Italian Translation","/it","it",{"title":204,"path":205,"stem":206},"Japanese Translation","/jp","jp",{"title":208,"path":209,"stem":210},"Chinese Translation","/zh","zh",{"id":212,"title":108,"body":213,"description":1488,"extension":1489,"links":1490,"meta":1491,"navigation":39,"path":109,"seo":1492,"stem":110,"__hash__":1493},"docs/3.api/2.composables/5.use-loader.md",{"type":214,"value":215,"toc":1477},"minimark",[216,224,229,234,237,523,527,530,1018,1022,1225,1228,1233,1276,1280,1391,1395,1461,1473],[217,218,219,220,223],"p",{},"The ",[221,222,108],"code",{}," composable provides a reactive and easy-to-use method for loading 3D models and textures with any Three.js loader. It supports progress tracking, error handling, and works seamlessly with Vue's reactivity system. This makes it ideal for loading assets in TresJS scenes, including GLTF, FBX, textures, and more.",[225,226,228],"h2",{"id":227},"usage","Usage",[230,231,233],"h3",{"id":232},"loading-a-texture-and-applying-to-a-mesh","Loading a Texture and Applying to a Mesh",[235,236],"examples-use-loader-texture",{},[238,239,245],"pre",{"className":240,"code":241,"filename":242,"language":243,"meta":244,"style":244},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { useLoader } from '@tresjs/core'\nimport { TextureLoader } from 'three'\n\n// Load a texture from a remote URL\nconst { state: texture, isLoading, error } = useLoader(\n  TextureLoader,\n  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Color.jpg',\n)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresMesh>\n    \u003CTresBoxGeometry />\n    \u003C!-- Use the loaded texture as the material map -->\n    \u003CTresMeshStandardMaterial v-if=\"texture\" :map=\"texture\" />\n  \u003C/TresMesh>\n\u003C/template>\n","TextureExample.vue","vue","",[221,246,247,282,311,332,338,345,385,394,408,414,424,429,439,450,462,468,504,514],{"__ignoreMap":244},[248,249,252,256,260,264,267,270,273,277,279],"span",{"class":250,"line":251},"line",1,[248,253,255],{"class":254},"sMK4o","\u003C",[248,257,259],{"class":258},"swJcz","script",[248,261,263],{"class":262},"spNyl"," setup",[248,265,266],{"class":262}," lang",[248,268,269],{"class":254},"=",[248,271,272],{"class":254},"\"",[248,274,276],{"class":275},"sfazB","ts",[248,278,272],{"class":254},[248,280,281],{"class":254},">\n",[248,283,285,289,292,296,299,302,305,308],{"class":250,"line":284},2,[248,286,288],{"class":287},"s7zQu","import",[248,290,291],{"class":254}," {",[248,293,295],{"class":294},"sTEyZ"," useLoader",[248,297,298],{"class":254}," }",[248,300,301],{"class":287}," from",[248,303,304],{"class":254}," '",[248,306,307],{"class":275},"@tresjs/core",[248,309,310],{"class":254},"'\n",[248,312,314,316,318,321,323,325,327,330],{"class":250,"line":313},3,[248,315,288],{"class":287},[248,317,291],{"class":254},[248,319,320],{"class":294}," TextureLoader",[248,322,298],{"class":254},[248,324,301],{"class":287},[248,326,304],{"class":254},[248,328,329],{"class":275},"three",[248,331,310],{"class":254},[248,333,335],{"class":250,"line":334},4,[248,336,337],{"emptyLinePlaceholder":39},"\n",[248,339,341],{"class":250,"line":340},5,[248,342,344],{"class":343},"sHwdD","// Load a texture from a remote URL\n",[248,346,348,351,353,356,359,362,365,368,370,373,376,379,382],{"class":250,"line":347},6,[248,349,350],{"class":262},"const",[248,352,291],{"class":254},[248,354,355],{"class":258}," state",[248,357,358],{"class":254},":",[248,360,361],{"class":294}," texture",[248,363,364],{"class":254},",",[248,366,367],{"class":294}," isLoading",[248,369,364],{"class":254},[248,371,372],{"class":294}," error ",[248,374,375],{"class":254},"}",[248,377,378],{"class":254}," =",[248,380,295],{"class":381},"s2Zo4",[248,383,384],{"class":294},"(\n",[248,386,388,391],{"class":250,"line":387},7,[248,389,390],{"class":294},"  TextureLoader",[248,392,393],{"class":254},",\n",[248,395,397,400,403,406],{"class":250,"line":396},8,[248,398,399],{"class":254},"  '",[248,401,402],{"class":275},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Color.jpg",[248,404,405],{"class":254},"'",[248,407,393],{"class":254},[248,409,411],{"class":250,"line":410},9,[248,412,413],{"class":294},")\n",[248,415,417,420,422],{"class":250,"line":416},10,[248,418,419],{"class":254},"\u003C/",[248,421,259],{"class":258},[248,423,281],{"class":254},[248,425,427],{"class":250,"line":426},11,[248,428,337],{"emptyLinePlaceholder":39},[248,430,432,434,437],{"class":250,"line":431},12,[248,433,255],{"class":254},[248,435,436],{"class":258},"template",[248,438,281],{"class":254},[248,440,442,445,448],{"class":250,"line":441},13,[248,443,444],{"class":254},"  \u003C",[248,446,447],{"class":258},"TresMesh",[248,449,281],{"class":254},[248,451,453,456,459],{"class":250,"line":452},14,[248,454,455],{"class":254},"    \u003C",[248,457,458],{"class":258},"TresBoxGeometry",[248,460,461],{"class":254}," />\n",[248,463,465],{"class":250,"line":464},15,[248,466,467],{"class":343},"    \u003C!-- Use the loaded texture as the material map -->\n",[248,469,471,473,476,479,481,483,486,488,491,494,496,498,500,502],{"class":250,"line":470},16,[248,472,455],{"class":254},[248,474,475],{"class":258},"TresMeshStandardMaterial",[248,477,478],{"class":287}," v-if",[248,480,269],{"class":254},[248,482,272],{"class":254},[248,484,485],{"class":294},"texture",[248,487,272],{"class":254},[248,489,490],{"class":254}," :",[248,492,493],{"class":262},"map",[248,495,269],{"class":254},[248,497,272],{"class":254},[248,499,485],{"class":294},[248,501,272],{"class":254},[248,503,461],{"class":254},[248,505,507,510,512],{"class":250,"line":506},17,[248,508,509],{"class":254},"  \u003C/",[248,511,447],{"class":258},[248,513,281],{"class":254},[248,515,517,519,521],{"class":250,"line":516},18,[248,518,419],{"class":254},[248,520,436],{"class":258},[248,522,281],{"class":254},[230,524,526],{"id":525},"loading-a-gltf-model-and-rendering-a-named-node","Loading a GLTF Model and Rendering a Named Node",[528,529],"examples-use-loader-gltf",{},[238,531,534],{"className":240,"code":532,"filename":533,"language":243,"meta":244,"style":244},"\u003Cscript setup lang=\"ts\">\nimport { useGraph, useLoader } from '@tresjs/core'\nimport { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'\nimport { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'\nimport { computed } from 'vue'\n\n// Setup DRACO loader for compressed GLTFs\nconst dracoLoader = new DRACOLoader()\ndracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.6/')\n\n// Load a GLTF model\nconst { state: model, isLoading, error } = useLoader(\n  GLTFLoader,\n  'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb',\n  {\n    extensions: (loader) => {\n      if (loader instanceof GLTFLoader) {\n        loader.setDRACOLoader(dracoLoader)\n      }\n    },\n  },\n)\n\n// Extract the scene and graph\nconst scene = computed(() => model.value?.scene)\nconst graph = useGraph(scene)\n\nconst nodes = computed(() => graph.value.nodes)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003C!-- Render the Cube node if it exists -->\n  \u003Cprimitive\n    v-if=\"nodes?.BlenderCube\"\n    :object=\"nodes?.BlenderCube\"\n  />\n\u003C/template>\n","GLTFExample.vue",[221,535,536,556,579,599,619,638,642,647,664,687,691,696,725,732,743,748,771,792,808,814,820,826,831,836,842,874,889,894,924,933,938,947,953,961,982,1003,1009],{"__ignoreMap":244},[248,537,538,540,542,544,546,548,550,552,554],{"class":250,"line":251},[248,539,255],{"class":254},[248,541,259],{"class":258},[248,543,263],{"class":262},[248,545,266],{"class":262},[248,547,269],{"class":254},[248,549,272],{"class":254},[248,551,276],{"class":275},[248,553,272],{"class":254},[248,555,281],{"class":254},[248,557,558,560,562,565,567,569,571,573,575,577],{"class":250,"line":284},[248,559,288],{"class":287},[248,561,291],{"class":254},[248,563,564],{"class":294}," useGraph",[248,566,364],{"class":254},[248,568,295],{"class":294},[248,570,298],{"class":254},[248,572,301],{"class":287},[248,574,304],{"class":254},[248,576,307],{"class":275},[248,578,310],{"class":254},[248,580,581,583,585,588,590,592,594,597],{"class":250,"line":313},[248,582,288],{"class":287},[248,584,291],{"class":254},[248,586,587],{"class":294}," GLTFLoader",[248,589,298],{"class":254},[248,591,301],{"class":287},[248,593,304],{"class":254},[248,595,596],{"class":275},"three/examples/jsm/loaders/GLTFLoader.js",[248,598,310],{"class":254},[248,600,601,603,605,608,610,612,614,617],{"class":250,"line":334},[248,602,288],{"class":287},[248,604,291],{"class":254},[248,606,607],{"class":294}," DRACOLoader",[248,609,298],{"class":254},[248,611,301],{"class":287},[248,613,304],{"class":254},[248,615,616],{"class":275},"three/examples/jsm/loaders/DRACOLoader.js",[248,618,310],{"class":254},[248,620,621,623,625,628,630,632,634,636],{"class":250,"line":340},[248,622,288],{"class":287},[248,624,291],{"class":254},[248,626,627],{"class":294}," computed",[248,629,298],{"class":254},[248,631,301],{"class":287},[248,633,304],{"class":254},[248,635,243],{"class":275},[248,637,310],{"class":254},[248,639,640],{"class":250,"line":347},[248,641,337],{"emptyLinePlaceholder":39},[248,643,644],{"class":250,"line":387},[248,645,646],{"class":343},"// Setup DRACO loader for compressed GLTFs\n",[248,648,649,651,654,656,659,661],{"class":250,"line":396},[248,650,350],{"class":262},[248,652,653],{"class":294}," dracoLoader ",[248,655,269],{"class":254},[248,657,658],{"class":254}," new",[248,660,607],{"class":381},[248,662,663],{"class":294},"()\n",[248,665,666,669,672,675,678,680,683,685],{"class":250,"line":410},[248,667,668],{"class":294},"dracoLoader",[248,670,671],{"class":254},".",[248,673,674],{"class":381},"setDecoderPath",[248,676,677],{"class":294},"(",[248,679,405],{"class":254},[248,681,682],{"class":275},"https://www.gstatic.com/draco/versioned/decoders/1.5.6/",[248,684,405],{"class":254},[248,686,413],{"class":294},[248,688,689],{"class":250,"line":416},[248,690,337],{"emptyLinePlaceholder":39},[248,692,693],{"class":250,"line":426},[248,694,695],{"class":343},"// Load a GLTF model\n",[248,697,698,700,702,704,706,709,711,713,715,717,719,721,723],{"class":250,"line":431},[248,699,350],{"class":262},[248,701,291],{"class":254},[248,703,355],{"class":258},[248,705,358],{"class":254},[248,707,708],{"class":294}," model",[248,710,364],{"class":254},[248,712,367],{"class":294},[248,714,364],{"class":254},[248,716,372],{"class":294},[248,718,375],{"class":254},[248,720,378],{"class":254},[248,722,295],{"class":381},[248,724,384],{"class":294},[248,726,727,730],{"class":250,"line":441},[248,728,729],{"class":294},"  GLTFLoader",[248,731,393],{"class":254},[248,733,734,736,739,741],{"class":250,"line":452},[248,735,399],{"class":254},[248,737,738],{"class":275},"https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb",[248,740,405],{"class":254},[248,742,393],{"class":254},[248,744,745],{"class":250,"line":464},[248,746,747],{"class":254},"  {\n",[248,749,750,753,755,758,762,765,768],{"class":250,"line":470},[248,751,752],{"class":381},"    extensions",[248,754,358],{"class":254},[248,756,757],{"class":254}," (",[248,759,761],{"class":760},"sHdIc","loader",[248,763,764],{"class":254},")",[248,766,767],{"class":262}," =>",[248,769,770],{"class":254}," {\n",[248,772,773,776,778,780,783,786,789],{"class":250,"line":506},[248,774,775],{"class":287},"      if",[248,777,757],{"class":258},[248,779,761],{"class":294},[248,781,782],{"class":254}," instanceof",[248,784,587],{"class":785},"sBMFI",[248,787,788],{"class":258},") ",[248,790,791],{"class":254},"{\n",[248,793,794,797,799,802,804,806],{"class":250,"line":516},[248,795,796],{"class":294},"        loader",[248,798,671],{"class":254},[248,800,801],{"class":381},"setDRACOLoader",[248,803,677],{"class":258},[248,805,668],{"class":294},[248,807,413],{"class":258},[248,809,811],{"class":250,"line":810},19,[248,812,813],{"class":254},"      }\n",[248,815,817],{"class":250,"line":816},20,[248,818,819],{"class":254},"    },\n",[248,821,823],{"class":250,"line":822},21,[248,824,825],{"class":254},"  },\n",[248,827,829],{"class":250,"line":828},22,[248,830,413],{"class":294},[248,832,834],{"class":250,"line":833},23,[248,835,337],{"emptyLinePlaceholder":39},[248,837,839],{"class":250,"line":838},24,[248,840,841],{"class":343},"// Extract the scene and graph\n",[248,843,845,847,850,852,854,856,859,861,863,865,868,871],{"class":250,"line":844},25,[248,846,350],{"class":262},[248,848,849],{"class":294}," scene ",[248,851,269],{"class":254},[248,853,627],{"class":381},[248,855,677],{"class":294},[248,857,858],{"class":254},"()",[248,860,767],{"class":262},[248,862,708],{"class":294},[248,864,671],{"class":254},[248,866,867],{"class":294},"value",[248,869,870],{"class":254},"?.",[248,872,873],{"class":294},"scene)\n",[248,875,877,879,882,884,886],{"class":250,"line":876},26,[248,878,350],{"class":262},[248,880,881],{"class":294}," graph ",[248,883,269],{"class":254},[248,885,564],{"class":381},[248,887,888],{"class":294},"(scene)\n",[248,890,892],{"class":250,"line":891},27,[248,893,337],{"emptyLinePlaceholder":39},[248,895,897,899,902,904,906,908,910,912,915,917,919,921],{"class":250,"line":896},28,[248,898,350],{"class":262},[248,900,901],{"class":294}," nodes ",[248,903,269],{"class":254},[248,905,627],{"class":381},[248,907,677],{"class":294},[248,909,858],{"class":254},[248,911,767],{"class":262},[248,913,914],{"class":294}," graph",[248,916,671],{"class":254},[248,918,867],{"class":294},[248,920,671],{"class":254},[248,922,923],{"class":294},"nodes)\n",[248,925,927,929,931],{"class":250,"line":926},29,[248,928,419],{"class":254},[248,930,259],{"class":258},[248,932,281],{"class":254},[248,934,936],{"class":250,"line":935},30,[248,937,337],{"emptyLinePlaceholder":39},[248,939,941,943,945],{"class":250,"line":940},31,[248,942,255],{"class":254},[248,944,436],{"class":258},[248,946,281],{"class":254},[248,948,950],{"class":250,"line":949},32,[248,951,952],{"class":343},"  \u003C!-- Render the Cube node if it exists -->\n",[248,954,956,958],{"class":250,"line":955},33,[248,957,444],{"class":254},[248,959,960],{"class":258},"primitive\n",[248,962,964,967,969,971,974,976,979],{"class":250,"line":963},34,[248,965,966],{"class":287},"    v-if",[248,968,269],{"class":254},[248,970,272],{"class":254},[248,972,973],{"class":294},"nodes",[248,975,870],{"class":254},[248,977,978],{"class":294},"BlenderCube",[248,980,981],{"class":254},"\"\n",[248,983,985,988,991,993,995,997,999,1001],{"class":250,"line":984},35,[248,986,987],{"class":254},"    :",[248,989,990],{"class":262},"object",[248,992,269],{"class":254},[248,994,272],{"class":254},[248,996,973],{"class":294},[248,998,870],{"class":254},[248,1000,978],{"class":294},[248,1002,981],{"class":254},[248,1004,1006],{"class":250,"line":1005},36,[248,1007,1008],{"class":254},"  />\n",[248,1010,1012,1014,1016],{"class":250,"line":1011},37,[248,1013,419],{"class":254},[248,1015,436],{"class":258},[248,1017,281],{"class":254},[230,1019,1021],{"id":1020},"loading-an-fbx-model-and-rendering-it","Loading an FBX Model and Rendering It",[238,1023,1026],{"className":240,"code":1024,"filename":1025,"language":243,"meta":244,"style":244},"\u003Cscript setup lang=\"ts\">\nimport { useLoader } from '@tresjs/core'\nimport { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'\n\n// Load an FBX model\nconst { state: model, isLoading, error } = useLoader(\n  FBXLoader,\n  'https://raw.githubusercontent.com/Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx',\n)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003C!-- Render the loaded FBX model -->\n  \u003Cprimitive v-if=\"model\" :object=\"model\" :scale=\"0.01\" />\n\u003C/template>\n","FBXExample.vue",[221,1027,1028,1048,1066,1086,1090,1095,1123,1130,1141,1145,1153,1157,1165,1170,1217],{"__ignoreMap":244},[248,1029,1030,1032,1034,1036,1038,1040,1042,1044,1046],{"class":250,"line":251},[248,1031,255],{"class":254},[248,1033,259],{"class":258},[248,1035,263],{"class":262},[248,1037,266],{"class":262},[248,1039,269],{"class":254},[248,1041,272],{"class":254},[248,1043,276],{"class":275},[248,1045,272],{"class":254},[248,1047,281],{"class":254},[248,1049,1050,1052,1054,1056,1058,1060,1062,1064],{"class":250,"line":284},[248,1051,288],{"class":287},[248,1053,291],{"class":254},[248,1055,295],{"class":294},[248,1057,298],{"class":254},[248,1059,301],{"class":287},[248,1061,304],{"class":254},[248,1063,307],{"class":275},[248,1065,310],{"class":254},[248,1067,1068,1070,1072,1075,1077,1079,1081,1084],{"class":250,"line":313},[248,1069,288],{"class":287},[248,1071,291],{"class":254},[248,1073,1074],{"class":294}," FBXLoader",[248,1076,298],{"class":254},[248,1078,301],{"class":287},[248,1080,304],{"class":254},[248,1082,1083],{"class":275},"three/examples/jsm/loaders/FBXLoader.js",[248,1085,310],{"class":254},[248,1087,1088],{"class":250,"line":334},[248,1089,337],{"emptyLinePlaceholder":39},[248,1091,1092],{"class":250,"line":340},[248,1093,1094],{"class":343},"// Load an FBX model\n",[248,1096,1097,1099,1101,1103,1105,1107,1109,1111,1113,1115,1117,1119,1121],{"class":250,"line":347},[248,1098,350],{"class":262},[248,1100,291],{"class":254},[248,1102,355],{"class":258},[248,1104,358],{"class":254},[248,1106,708],{"class":294},[248,1108,364],{"class":254},[248,1110,367],{"class":294},[248,1112,364],{"class":254},[248,1114,372],{"class":294},[248,1116,375],{"class":254},[248,1118,378],{"class":254},[248,1120,295],{"class":381},[248,1122,384],{"class":294},[248,1124,1125,1128],{"class":250,"line":387},[248,1126,1127],{"class":294},"  FBXLoader",[248,1129,393],{"class":254},[248,1131,1132,1134,1137,1139],{"class":250,"line":396},[248,1133,399],{"class":254},[248,1135,1136],{"class":275},"https://raw.githubusercontent.com/Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx",[248,1138,405],{"class":254},[248,1140,393],{"class":254},[248,1142,1143],{"class":250,"line":410},[248,1144,413],{"class":294},[248,1146,1147,1149,1151],{"class":250,"line":416},[248,1148,419],{"class":254},[248,1150,259],{"class":258},[248,1152,281],{"class":254},[248,1154,1155],{"class":250,"line":426},[248,1156,337],{"emptyLinePlaceholder":39},[248,1158,1159,1161,1163],{"class":250,"line":431},[248,1160,255],{"class":254},[248,1162,436],{"class":258},[248,1164,281],{"class":254},[248,1166,1167],{"class":250,"line":441},[248,1168,1169],{"class":343},"  \u003C!-- Render the loaded FBX model -->\n",[248,1171,1172,1174,1177,1179,1181,1183,1186,1188,1190,1192,1194,1196,1198,1200,1202,1205,1207,1209,1213,1215],{"class":250,"line":452},[248,1173,444],{"class":254},[248,1175,1176],{"class":258},"primitive",[248,1178,478],{"class":287},[248,1180,269],{"class":254},[248,1182,272],{"class":254},[248,1184,1185],{"class":294},"model",[248,1187,272],{"class":254},[248,1189,490],{"class":254},[248,1191,990],{"class":262},[248,1193,269],{"class":254},[248,1195,272],{"class":254},[248,1197,1185],{"class":294},[248,1199,272],{"class":254},[248,1201,490],{"class":254},[248,1203,1204],{"class":262},"scale",[248,1206,269],{"class":254},[248,1208,272],{"class":254},[248,1210,1212],{"class":1211},"sbssI","0.01",[248,1214,272],{"class":254},[248,1216,461],{"class":254},[248,1218,1219,1221,1223],{"class":250,"line":464},[248,1220,419],{"class":254},[248,1222,436],{"class":258},[248,1224,281],{"class":254},[225,1226,63],{"id":1227},"api",[217,1229,219,1230,1232],{},[221,1231,108],{}," composable returns a reactive object with the following properties:",[1234,1235,1236,1248,1255,1262,1269],"field-group",{},[1237,1238,1241],"field",{"name":1239,"type":1240},"state","Ref\u003CT | null>",[217,1242,1243,1244,1247],{},"The loaded asset (model, texture, etc.), or ",[221,1245,1246],{},"null"," if not loaded yet.",[1237,1249,1252],{"name":1250,"type":1251},"isLoading","Ref\u003Cboolean>",[217,1253,1254],{},"Indicates if the asset is currently loading.",[1237,1256,1259],{"name":1257,"type":1258},"error","Ref\u003Cunknown>",[217,1260,1261],{},"Any error encountered during loading.",[1237,1263,1266],{"name":1264,"type":1265},"progress","{ loaded: number; total: number; percentage: number }",[217,1267,1268],{},"Progress information for the current load operation.",[1237,1270,1273],{"name":1271,"type":1272},"load","(path: string) => void",[217,1274,1275],{},"Method to load a new asset from a different path.",[230,1277,1279],{"id":1278},"type-signature","Type Signature",[238,1281,1285],{"className":1282,"code":1283,"filename":1284,"language":276,"meta":244,"style":244},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","function useLoader\u003CT, Shallow extends boolean = false>(\n  Loader: LoaderProto\u003CT>,\n  path: MaybeRef\u003Cstring>,\n  options?: TresLoaderOptions\u003CT, Shallow>,\n): UseLoaderReturn\u003CT, Shallow>\n","Signature",[221,1286,1287,1318,1335,1352,1373],{"__ignoreMap":244},[248,1288,1289,1292,1294,1296,1299,1301,1304,1307,1310,1312,1315],{"class":250,"line":251},[248,1290,1291],{"class":262},"function",[248,1293,295],{"class":381},[248,1295,255],{"class":254},[248,1297,1298],{"class":785},"T",[248,1300,364],{"class":254},[248,1302,1303],{"class":785}," Shallow",[248,1305,1306],{"class":262}," extends",[248,1308,1309],{"class":785}," boolean",[248,1311,378],{"class":254},[248,1313,1314],{"class":785}," false",[248,1316,1317],{"class":254},">(\n",[248,1319,1320,1323,1325,1328,1330,1332],{"class":250,"line":284},[248,1321,1322],{"class":760},"  Loader",[248,1324,358],{"class":254},[248,1326,1327],{"class":785}," LoaderProto",[248,1329,255],{"class":254},[248,1331,1298],{"class":785},[248,1333,1334],{"class":254},">,\n",[248,1336,1337,1340,1342,1345,1347,1350],{"class":250,"line":313},[248,1338,1339],{"class":760},"  path",[248,1341,358],{"class":254},[248,1343,1344],{"class":785}," MaybeRef",[248,1346,255],{"class":254},[248,1348,1349],{"class":785},"string",[248,1351,1334],{"class":254},[248,1353,1354,1357,1360,1363,1365,1367,1369,1371],{"class":250,"line":334},[248,1355,1356],{"class":760},"  options",[248,1358,1359],{"class":254},"?:",[248,1361,1362],{"class":785}," TresLoaderOptions",[248,1364,255],{"class":254},[248,1366,1298],{"class":785},[248,1368,364],{"class":254},[248,1370,1303],{"class":785},[248,1372,1334],{"class":254},[248,1374,1375,1378,1381,1383,1385,1387,1389],{"class":250,"line":340},[248,1376,1377],{"class":254},"):",[248,1379,1380],{"class":785}," UseLoaderReturn",[248,1382,255],{"class":254},[248,1384,1298],{"class":785},[248,1386,364],{"class":254},[248,1388,1303],{"class":785},[248,1390,281],{"class":254},[225,1392,1394],{"id":1393},"tips-best-practices","Tips & Best Practices",[1396,1397,1398,1424,1433,1442,1451],"ul",{},[1399,1400,1401,1405,1406,1409,1410,1413,1414,1409,1417,1413,1420,1423],"li",{},[1402,1403,1404],"strong",{},"Always use the correct loader for your asset type"," (e.g., ",[221,1407,1408],{},"GLTFLoader"," for ",[221,1411,1412],{},".glb/.gltf",", ",[221,1415,1416],{},"FBXLoader",[221,1418,1419],{},".fbx",[221,1421,1422],{},"TextureLoader"," for images).",[1399,1425,1426,1429,1430,1432],{},[1402,1427,1428],{},"Track loading progress"," using the ",[221,1431,1264],{}," object to show user feedback.",[1399,1434,1435,1441],{},[1402,1436,1437,1438],{},"Use a ",[221,1439,1440],{},"LoadingManager"," for global progress tracking across multiple assets.",[1399,1443,1444,1447,1448,1450],{},[1402,1445,1446],{},"Handle errors"," by watching the ",[221,1449,1257],{}," ref and providing fallback UI.",[1399,1452,1453,1456,1457,1460],{},[1402,1454,1455],{},"Reactive paths:"," You can pass a ",[221,1458,1459],{},"ref"," as the path to automatically reload when the path changes.",[1462,1463,1464],"note",{},[217,1465,1466,1467,1469,1470,1472],{},"If you need to load multiple assets at once, create multiple ",[221,1468,108],{}," instances or use a ",[221,1471,1440],{}," to coordinate progress.",[1474,1475,1476],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":244,"searchDepth":251,"depth":284,"links":1478},[1479,1484,1487],{"id":227,"depth":284,"text":228,"children":1480},[1481,1482,1483],{"id":232,"depth":313,"text":233},{"id":525,"depth":313,"text":526},{"id":1020,"depth":313,"text":1021},{"id":1227,"depth":284,"text":63,"children":1485},[1486],{"id":1278,"depth":313,"text":1279},{"id":1393,"depth":284,"text":1394},"useLoader is a composable for loading 3D assets and textures with Three.js loaders, supporting progress tracking and reactivity.","md",null,{},{"title":108,"description":1488},"q2AKBeuEMsoGLm2REBRx6sOitFzF8UC9dTARPXP4NMk",[1495,1497],{"title":104,"path":105,"stem":106,"description":1496,"children":-1},"useGraph generates a reactive map of named nodes, materials, and meshes from a Three.js object hierarchy.",{"title":118,"path":119,"stem":120,"description":1498,"children":-1},"Explore the TresJS pointer events system powered by @pmndrs/pointer-events.",1768600246919]