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