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