[{"data":1,"prerenderedAt":1508},["ShallowReactive",2],{"navigation":3,"/api/composables/use-loader":239,"/api/composables/use-loader-surround":1503},[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":1497,"extension":1498,"links":1499,"meta":1500,"navigation":39,"path":129,"seo":1501,"stem":130,"__hash__":1502},"docs/3.api/2.composables/5.use-loader.md",{"type":242,"value":243,"toc":1486},"minimark",[244,252,257,262,265,548,552,555,1031,1035,1234,1237,1242,1285,1289,1400,1404,1470,1482],[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,529,539],{"__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,521,523,525,527],{"class":278,"line":498},16,[276,500,483],{"class":282},[276,502,503],{"class":286},"TresMeshStandardMaterial",[276,505,506],{"class":290}," v-if",[276,508,297],{"class":282},[276,510,300],{"class":282},[276,512,513],{"class":303},"texture",[276,515,300],{"class":282},[276,517,518],{"class":290}," :map",[276,520,297],{"class":282},[276,522,300],{"class":282},[276,524,513],{"class":303},[276,526,300],{"class":282},[276,528,489],{"class":282},[276,530,532,535,537],{"class":278,"line":531},17,[276,533,534],{"class":282},"  \u003C/",[276,536,475],{"class":286},[276,538,309],{"class":282},[276,540,542,544,546],{"class":278,"line":541},18,[276,543,447],{"class":282},[276,545,464],{"class":286},[276,547,309],{"class":282},[258,549,551],{"id":550},"loading-a-gltf-model-and-rendering-a-named-node","Loading a GLTF Model and Rendering a Named Node",[553,554],"examples-use-loader-gltf",{},[266,556,559],{"className":268,"code":557,"filename":558,"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,560,561,581,604,624,644,663,667,672,689,712,716,721,750,757,768,773,796,817,833,839,845,851,856,861,867,899,914,919,949,958,963,972,978,986,1002,1016,1022],{"__ignoreMap":272},[276,562,563,565,567,569,571,573,575,577,579],{"class":278,"line":279},[276,564,283],{"class":282},[276,566,287],{"class":286},[276,568,291],{"class":290},[276,570,294],{"class":290},[276,572,297],{"class":282},[276,574,300],{"class":282},[276,576,304],{"class":303},[276,578,300],{"class":282},[276,580,309],{"class":282},[276,582,583,585,587,590,592,594,596,598,600,602],{"class":278,"line":312},[276,584,316],{"class":315},[276,586,319],{"class":282},[276,588,589],{"class":322}," useGraph",[276,591,392],{"class":282},[276,593,323],{"class":322},[276,595,326],{"class":282},[276,597,329],{"class":315},[276,599,332],{"class":282},[276,601,335],{"class":303},[276,603,338],{"class":282},[276,605,606,608,610,613,615,617,619,622],{"class":278,"line":341},[276,607,316],{"class":315},[276,609,319],{"class":282},[276,611,612],{"class":322}," GLTFLoader",[276,614,326],{"class":282},[276,616,329],{"class":315},[276,618,332],{"class":282},[276,620,621],{"class":303},"three/examples/jsm/loaders/GLTFLoader.js",[276,623,338],{"class":282},[276,625,626,628,630,633,635,637,639,642],{"class":278,"line":362},[276,627,316],{"class":315},[276,629,319],{"class":282},[276,631,632],{"class":322}," DRACOLoader",[276,634,326],{"class":282},[276,636,329],{"class":315},[276,638,332],{"class":282},[276,640,641],{"class":303},"three/examples/jsm/loaders/DRACOLoader.js",[276,643,338],{"class":282},[276,645,646,648,650,653,655,657,659,661],{"class":278,"line":368},[276,647,316],{"class":315},[276,649,319],{"class":282},[276,651,652],{"class":322}," computed",[276,654,326],{"class":282},[276,656,329],{"class":315},[276,658,332],{"class":282},[276,660,271],{"class":303},[276,662,338],{"class":282},[276,664,665],{"class":278,"line":375},[276,666,365],{"emptyLinePlaceholder":39},[276,668,669],{"class":278,"line":415},[276,670,671],{"class":371},"// Setup DRACO loader for compressed GLTFs\n",[276,673,674,676,679,681,684,686],{"class":278,"line":424},[276,675,378],{"class":290},[276,677,678],{"class":322}," dracoLoader ",[276,680,297],{"class":282},[276,682,683],{"class":282}," new",[276,685,632],{"class":409},[276,687,688],{"class":322},"()\n",[276,690,691,694,697,700,703,705,708,710],{"class":278,"line":438},[276,692,693],{"class":322},"dracoLoader",[276,695,696],{"class":282},".",[276,698,699],{"class":409},"setDecoderPath",[276,701,702],{"class":322},"(",[276,704,433],{"class":282},[276,706,707],{"class":303},"https://www.gstatic.com/draco/versioned/decoders/1.5.6/",[276,709,433],{"class":282},[276,711,441],{"class":322},[276,713,714],{"class":278,"line":444},[276,715,365],{"emptyLinePlaceholder":39},[276,717,718],{"class":278,"line":454},[276,719,720],{"class":371},"// Load a GLTF model\n",[276,722,723,725,727,729,731,734,736,738,740,742,744,746,748],{"class":278,"line":459},[276,724,378],{"class":290},[276,726,319],{"class":282},[276,728,383],{"class":286},[276,730,386],{"class":282},[276,732,733],{"class":322}," model",[276,735,392],{"class":282},[276,737,395],{"class":322},[276,739,392],{"class":282},[276,741,400],{"class":322},[276,743,403],{"class":282},[276,745,406],{"class":282},[276,747,323],{"class":409},[276,749,412],{"class":322},[276,751,752,755],{"class":278,"line":469},[276,753,754],{"class":322},"  GLTFLoader",[276,756,421],{"class":282},[276,758,759,761,764,766],{"class":278,"line":480},[276,760,427],{"class":282},[276,762,763],{"class":303},"https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb",[276,765,433],{"class":282},[276,767,421],{"class":282},[276,769,770],{"class":278,"line":492},[276,771,772],{"class":282},"  {\n",[276,774,775,778,780,783,787,790,793],{"class":278,"line":498},[276,776,777],{"class":409},"    extensions",[276,779,386],{"class":282},[276,781,782],{"class":282}," (",[276,784,786],{"class":785},"sHdIc","loader",[276,788,789],{"class":282},")",[276,791,792],{"class":290}," =>",[276,794,795],{"class":282}," {\n",[276,797,798,801,803,805,808,811,814],{"class":278,"line":531},[276,799,800],{"class":315},"      if",[276,802,782],{"class":286},[276,804,786],{"class":322},[276,806,807],{"class":282}," instanceof",[276,809,612],{"class":810},"sBMFI",[276,812,813],{"class":286},") ",[276,815,816],{"class":282},"{\n",[276,818,819,822,824,827,829,831],{"class":278,"line":541},[276,820,821],{"class":322},"        loader",[276,823,696],{"class":282},[276,825,826],{"class":409},"setDRACOLoader",[276,828,702],{"class":286},[276,830,693],{"class":322},[276,832,441],{"class":286},[276,834,836],{"class":278,"line":835},19,[276,837,838],{"class":282},"      }\n",[276,840,842],{"class":278,"line":841},20,[276,843,844],{"class":282},"    },\n",[276,846,848],{"class":278,"line":847},21,[276,849,850],{"class":282},"  },\n",[276,852,854],{"class":278,"line":853},22,[276,855,441],{"class":322},[276,857,859],{"class":278,"line":858},23,[276,860,365],{"emptyLinePlaceholder":39},[276,862,864],{"class":278,"line":863},24,[276,865,866],{"class":371},"// Extract the scene and graph\n",[276,868,870,872,875,877,879,881,884,886,888,890,893,896],{"class":278,"line":869},25,[276,871,378],{"class":290},[276,873,874],{"class":322}," scene ",[276,876,297],{"class":282},[276,878,652],{"class":409},[276,880,702],{"class":322},[276,882,883],{"class":282},"()",[276,885,792],{"class":290},[276,887,733],{"class":322},[276,889,696],{"class":282},[276,891,892],{"class":322},"value",[276,894,895],{"class":282},"?.",[276,897,898],{"class":322},"scene)\n",[276,900,902,904,907,909,911],{"class":278,"line":901},26,[276,903,378],{"class":290},[276,905,906],{"class":322}," graph ",[276,908,297],{"class":282},[276,910,589],{"class":409},[276,912,913],{"class":322},"(scene)\n",[276,915,917],{"class":278,"line":916},27,[276,918,365],{"emptyLinePlaceholder":39},[276,920,922,924,927,929,931,933,935,937,940,942,944,946],{"class":278,"line":921},28,[276,923,378],{"class":290},[276,925,926],{"class":322}," nodes ",[276,928,297],{"class":282},[276,930,652],{"class":409},[276,932,702],{"class":322},[276,934,883],{"class":282},[276,936,792],{"class":290},[276,938,939],{"class":322}," graph",[276,941,696],{"class":282},[276,943,892],{"class":322},[276,945,696],{"class":282},[276,947,948],{"class":322},"nodes)\n",[276,950,952,954,956],{"class":278,"line":951},29,[276,953,447],{"class":282},[276,955,287],{"class":286},[276,957,309],{"class":282},[276,959,961],{"class":278,"line":960},30,[276,962,365],{"emptyLinePlaceholder":39},[276,964,966,968,970],{"class":278,"line":965},31,[276,967,283],{"class":282},[276,969,464],{"class":286},[276,971,309],{"class":282},[276,973,975],{"class":278,"line":974},32,[276,976,977],{"class":371},"  \u003C!-- Render the Cube node if it exists -->\n",[276,979,981,983],{"class":278,"line":980},33,[276,982,472],{"class":282},[276,984,985],{"class":286},"primitive\n",[276,987,989,992,994,996,999],{"class":278,"line":988},34,[276,990,991],{"class":290},"    v-if",[276,993,297],{"class":282},[276,995,300],{"class":282},[276,997,998],{"class":303},"nodes?.BlenderCube",[276,1000,1001],{"class":282},"\"\n",[276,1003,1005,1008,1010,1012,1014],{"class":278,"line":1004},35,[276,1006,1007],{"class":290},"    :object",[276,1009,297],{"class":282},[276,1011,300],{"class":282},[276,1013,998],{"class":303},[276,1015,1001],{"class":282},[276,1017,1019],{"class":278,"line":1018},36,[276,1020,1021],{"class":282},"  />\n",[276,1023,1025,1027,1029],{"class":278,"line":1024},37,[276,1026,447],{"class":282},[276,1028,464],{"class":286},[276,1030,309],{"class":282},[258,1032,1034],{"id":1033},"loading-an-fbx-model-and-rendering-it","Loading an FBX Model and Rendering It",[266,1036,1039],{"className":268,"code":1037,"filename":1038,"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,1040,1041,1061,1079,1099,1103,1108,1136,1143,1154,1158,1166,1170,1178,1183,1226],{"__ignoreMap":272},[276,1042,1043,1045,1047,1049,1051,1053,1055,1057,1059],{"class":278,"line":279},[276,1044,283],{"class":282},[276,1046,287],{"class":286},[276,1048,291],{"class":290},[276,1050,294],{"class":290},[276,1052,297],{"class":282},[276,1054,300],{"class":282},[276,1056,304],{"class":303},[276,1058,300],{"class":282},[276,1060,309],{"class":282},[276,1062,1063,1065,1067,1069,1071,1073,1075,1077],{"class":278,"line":312},[276,1064,316],{"class":315},[276,1066,319],{"class":282},[276,1068,323],{"class":322},[276,1070,326],{"class":282},[276,1072,329],{"class":315},[276,1074,332],{"class":282},[276,1076,335],{"class":303},[276,1078,338],{"class":282},[276,1080,1081,1083,1085,1088,1090,1092,1094,1097],{"class":278,"line":341},[276,1082,316],{"class":315},[276,1084,319],{"class":282},[276,1086,1087],{"class":322}," FBXLoader",[276,1089,326],{"class":282},[276,1091,329],{"class":315},[276,1093,332],{"class":282},[276,1095,1096],{"class":303},"three/examples/jsm/loaders/FBXLoader.js",[276,1098,338],{"class":282},[276,1100,1101],{"class":278,"line":362},[276,1102,365],{"emptyLinePlaceholder":39},[276,1104,1105],{"class":278,"line":368},[276,1106,1107],{"class":371},"// Load an FBX model\n",[276,1109,1110,1112,1114,1116,1118,1120,1122,1124,1126,1128,1130,1132,1134],{"class":278,"line":375},[276,1111,378],{"class":290},[276,1113,319],{"class":282},[276,1115,383],{"class":286},[276,1117,386],{"class":282},[276,1119,733],{"class":322},[276,1121,392],{"class":282},[276,1123,395],{"class":322},[276,1125,392],{"class":282},[276,1127,400],{"class":322},[276,1129,403],{"class":282},[276,1131,406],{"class":282},[276,1133,323],{"class":409},[276,1135,412],{"class":322},[276,1137,1138,1141],{"class":278,"line":415},[276,1139,1140],{"class":322},"  FBXLoader",[276,1142,421],{"class":282},[276,1144,1145,1147,1150,1152],{"class":278,"line":424},[276,1146,427],{"class":282},[276,1148,1149],{"class":303},"https://raw.githubusercontent.com/Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx",[276,1151,433],{"class":282},[276,1153,421],{"class":282},[276,1155,1156],{"class":278,"line":438},[276,1157,441],{"class":322},[276,1159,1160,1162,1164],{"class":278,"line":444},[276,1161,447],{"class":282},[276,1163,287],{"class":286},[276,1165,309],{"class":282},[276,1167,1168],{"class":278,"line":454},[276,1169,365],{"emptyLinePlaceholder":39},[276,1171,1172,1174,1176],{"class":278,"line":459},[276,1173,283],{"class":282},[276,1175,464],{"class":286},[276,1177,309],{"class":282},[276,1179,1180],{"class":278,"line":469},[276,1181,1182],{"class":371},"  \u003C!-- Render the loaded FBX model -->\n",[276,1184,1185,1187,1190,1192,1194,1196,1199,1201,1204,1206,1208,1210,1212,1215,1217,1219,1222,1224],{"class":278,"line":480},[276,1186,472],{"class":282},[276,1188,1189],{"class":286},"primitive",[276,1191,506],{"class":290},[276,1193,297],{"class":282},[276,1195,300],{"class":282},[276,1197,1198],{"class":303},"model",[276,1200,300],{"class":282},[276,1202,1203],{"class":290}," :object",[276,1205,297],{"class":282},[276,1207,300],{"class":282},[276,1209,1198],{"class":303},[276,1211,300],{"class":282},[276,1213,1214],{"class":290}," :scale",[276,1216,297],{"class":282},[276,1218,300],{"class":282},[276,1220,1221],{"class":303},"0.01",[276,1223,300],{"class":282},[276,1225,489],{"class":282},[276,1227,1228,1230,1232],{"class":278,"line":492},[276,1229,447],{"class":282},[276,1231,464],{"class":286},[276,1233,309],{"class":282},[253,1235,79],{"id":1236},"api",[245,1238,247,1239,1241],{},[249,1240,128],{}," composable returns a reactive object with the following properties:",[1243,1244,1245,1257,1264,1271,1278],"field-group",{},[1246,1247,1250],"field",{"name":1248,"type":1249},"state","Ref\u003CT | null>",[245,1251,1252,1253,1256],{},"The loaded asset (model, texture, etc.), or ",[249,1254,1255],{},"null"," if not loaded yet.",[1246,1258,1261],{"name":1259,"type":1260},"isLoading","Ref\u003Cboolean>",[245,1262,1263],{},"Indicates if the asset is currently loading.",[1246,1265,1268],{"name":1266,"type":1267},"error","Ref\u003Cunknown>",[245,1269,1270],{},"Any error encountered during loading.",[1246,1272,1275],{"name":1273,"type":1274},"progress","{ loaded: number; total: number; percentage: number }",[245,1276,1277],{},"Progress information for the current load operation.",[1246,1279,1282],{"name":1280,"type":1281},"load","(path: string) => void",[245,1283,1284],{},"Method to load a new asset from a different path.",[258,1286,1288],{"id":1287},"type-signature","Type Signature",[266,1290,1294],{"className":1291,"code":1292,"filename":1293,"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,1295,1296,1327,1344,1361,1382],{"__ignoreMap":272},[276,1297,1298,1301,1303,1305,1308,1310,1313,1316,1319,1321,1324],{"class":278,"line":279},[276,1299,1300],{"class":290},"function",[276,1302,323],{"class":409},[276,1304,283],{"class":282},[276,1306,1307],{"class":810},"T",[276,1309,392],{"class":282},[276,1311,1312],{"class":810}," Shallow",[276,1314,1315],{"class":290}," extends",[276,1317,1318],{"class":810}," boolean",[276,1320,406],{"class":282},[276,1322,1323],{"class":810}," false",[276,1325,1326],{"class":282},">(\n",[276,1328,1329,1332,1334,1337,1339,1341],{"class":278,"line":312},[276,1330,1331],{"class":785},"  Loader",[276,1333,386],{"class":282},[276,1335,1336],{"class":810}," LoaderProto",[276,1338,283],{"class":282},[276,1340,1307],{"class":810},[276,1342,1343],{"class":282},">,\n",[276,1345,1346,1349,1351,1354,1356,1359],{"class":278,"line":341},[276,1347,1348],{"class":785},"  path",[276,1350,386],{"class":282},[276,1352,1353],{"class":810}," MaybeRef",[276,1355,283],{"class":282},[276,1357,1358],{"class":810},"string",[276,1360,1343],{"class":282},[276,1362,1363,1366,1369,1372,1374,1376,1378,1380],{"class":278,"line":362},[276,1364,1365],{"class":785},"  options",[276,1367,1368],{"class":282},"?:",[276,1370,1371],{"class":810}," TresLoaderOptions",[276,1373,283],{"class":282},[276,1375,1307],{"class":810},[276,1377,392],{"class":282},[276,1379,1312],{"class":810},[276,1381,1343],{"class":282},[276,1383,1384,1387,1390,1392,1394,1396,1398],{"class":278,"line":368},[276,1385,1386],{"class":282},"):",[276,1388,1389],{"class":810}," UseLoaderReturn",[276,1391,283],{"class":282},[276,1393,1307],{"class":810},[276,1395,392],{"class":282},[276,1397,1312],{"class":810},[276,1399,309],{"class":282},[253,1401,1403],{"id":1402},"tips-best-practices","Tips & Best Practices",[1405,1406,1407,1433,1442,1451,1460],"ul",{},[1408,1409,1410,1414,1415,1418,1419,1422,1423,1418,1426,1422,1429,1432],"li",{},[1411,1412,1413],"strong",{},"Always use the correct loader for your asset type"," (e.g., ",[249,1416,1417],{},"GLTFLoader"," for ",[249,1420,1421],{},".glb/.gltf",", ",[249,1424,1425],{},"FBXLoader",[249,1427,1428],{},".fbx",[249,1430,1431],{},"TextureLoader"," for images).",[1408,1434,1435,1438,1439,1441],{},[1411,1436,1437],{},"Track loading progress"," using the ",[249,1440,1273],{}," object to show user feedback.",[1408,1443,1444,1450],{},[1411,1445,1446,1447],{},"Use a ",[249,1448,1449],{},"LoadingManager"," for global progress tracking across multiple assets.",[1408,1452,1453,1456,1457,1459],{},[1411,1454,1455],{},"Handle errors"," by watching the ",[249,1458,1266],{}," ref and providing fallback UI.",[1408,1461,1462,1465,1466,1469],{},[1411,1463,1464],{},"Reactive paths:"," You can pass a ",[249,1467,1468],{},"ref"," as the path to automatically reload when the path changes.",[1471,1472,1473],"note",{},[245,1474,1475,1476,1478,1479,1481],{},"If you need to load multiple assets at once, create multiple ",[249,1477,128],{}," instances or use a ",[249,1480,1449],{}," to coordinate progress.",[1483,1484,1485],"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":272,"searchDepth":279,"depth":312,"links":1487},[1488,1493,1496],{"id":255,"depth":312,"text":256,"children":1489},[1490,1491,1492],{"id":260,"depth":341,"text":261},{"id":550,"depth":341,"text":551},{"id":1033,"depth":341,"text":1034},{"id":1236,"depth":312,"text":79,"children":1494},[1495],{"id":1287,"depth":341,"text":1288},{"id":1402,"depth":312,"text":1403},"useLoader is a composable for loading 3D assets and textures with Three.js loaders, supporting progress tracking and reactivity.","md",null,{},{"title":128,"description":1497},"sE2U100tl3fPnUX4nS6ivd7cJ4iZn3ON1BHdOafmjRU",[1504,1506],{"title":124,"path":125,"stem":126,"description":1505,"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":1507,"children":-1},"Explore the TresJS pointer events system powered by @pmndrs/pointer-events.",1782052332836]