[{"data":1,"prerenderedAt":2644},["ShallowReactive",2],{"navigation":3,"/cli/gltf":256,"/cli/gltf-surround":2639},[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":186,"body":258,"description":2632,"extension":2633,"links":2634,"meta":2635,"navigation":2636,"path":187,"seo":2637,"stem":188,"__hash__":2638},"docs/4.cli/2.gltf.md",{"type":259,"value":260,"toc":2621},"minimark",[261,272,310,313,539,544,551,1338,1341,1413,1417,1420,1600,1613,1641,1645,1655,1853,1857,1874,1926,2109,2113,2135,2178,2199,2209,2213,2234,2254,2258,2264,2306,2316,2320,2553,2557,2576,2604,2617],[262,263,264,267,268,271],"p",{},[265,266,186],"code",{}," turns a model into a Vue component you can read, diff and type-check, instead of a\n",[265,269,270],{},"\u003Cprimitive :object=\"scene\" />"," black box.",[273,274,279],"pre",{"className":275,"code":276,"language":277,"meta":278,"style":278},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","tres gltf public/models/robot.glb\n# ✔ src/models/Robot.gen.vue\n#   3 slots: Head, Body, Base\n","bash","",[265,280,281,297,304],{"__ignoreMap":278},[282,283,286,290,294],"span",{"class":284,"line":285},"line",1,[282,287,289],{"class":288},"sBMFI","tres",[282,291,293],{"class":292},"sfazB"," gltf",[282,295,296],{"class":292}," public/models/robot.glb\n",[282,298,300],{"class":284,"line":299},2,[282,301,303],{"class":302},"sHwdD","# ✔ src/models/Robot.gen.vue\n",[282,305,307],{"class":284,"line":306},3,[282,308,309],{"class":302},"#   3 slots: Head, Body, Base\n",[262,311,312],{},"Then use it like any other component:",[273,314,319],{"className":315,"code":316,"filename":317,"language":318,"meta":278,"style":278},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport Robot from '@/models/Robot.gen.vue'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[3, 2, 5]\" />\n    \u003COrbitControls />\n    \u003CRobot />\n    \u003CTresAmbientLight :intensity=\"1\" />\n  \u003C/TresCanvas>\n\u003C/template>\n","App.vue","vue",[265,320,321,352,380,400,418,428,434,444,455,479,488,498,520,530],{"__ignoreMap":278},[282,322,323,327,331,335,338,341,344,347,349],{"class":284,"line":285},[282,324,326],{"class":325},"sMK4o","\u003C",[282,328,330],{"class":329},"swJcz","script",[282,332,334],{"class":333},"spNyl"," setup",[282,336,337],{"class":333}," lang",[282,339,340],{"class":325},"=",[282,342,343],{"class":325},"\"",[282,345,346],{"class":292},"ts",[282,348,343],{"class":325},[282,350,351],{"class":325},">\n",[282,353,354,358,361,365,368,371,374,377],{"class":284,"line":299},[282,355,357],{"class":356},"s7zQu","import",[282,359,360],{"class":325}," {",[282,362,364],{"class":363},"sTEyZ"," OrbitControls",[282,366,367],{"class":325}," }",[282,369,370],{"class":356}," from",[282,372,373],{"class":325}," '",[282,375,376],{"class":292},"@tresjs/cientos",[282,378,379],{"class":325},"'\n",[282,381,382,384,386,389,391,393,395,398],{"class":284,"line":306},[282,383,357],{"class":356},[282,385,360],{"class":325},[282,387,388],{"class":363}," TresCanvas",[282,390,367],{"class":325},[282,392,370],{"class":356},[282,394,373],{"class":325},[282,396,397],{"class":292},"@tresjs/core",[282,399,379],{"class":325},[282,401,403,405,408,411,413,416],{"class":284,"line":402},4,[282,404,357],{"class":356},[282,406,407],{"class":363}," Robot ",[282,409,410],{"class":356},"from",[282,412,373],{"class":325},[282,414,415],{"class":292},"@/models/Robot.gen.vue",[282,417,379],{"class":325},[282,419,421,424,426],{"class":284,"line":420},5,[282,422,423],{"class":325},"\u003C/",[282,425,330],{"class":329},[282,427,351],{"class":325},[282,429,431],{"class":284,"line":430},6,[282,432,433],{"emptyLinePlaceholder":39},"\n",[282,435,437,439,442],{"class":284,"line":436},7,[282,438,326],{"class":325},[282,440,441],{"class":329},"template",[282,443,351],{"class":325},[282,445,447,450,453],{"class":284,"line":446},8,[282,448,449],{"class":325},"  \u003C",[282,451,452],{"class":329},"TresCanvas",[282,454,351],{"class":325},[282,456,458,461,464,467,469,471,474,476],{"class":284,"line":457},9,[282,459,460],{"class":325},"    \u003C",[282,462,463],{"class":329},"TresPerspectiveCamera",[282,465,466],{"class":333}," :position",[282,468,340],{"class":325},[282,470,343],{"class":325},[282,472,473],{"class":292},"[3, 2, 5]",[282,475,343],{"class":325},[282,477,478],{"class":325}," />\n",[282,480,482,484,486],{"class":284,"line":481},10,[282,483,460],{"class":325},[282,485,199],{"class":329},[282,487,478],{"class":325},[282,489,491,493,496],{"class":284,"line":490},11,[282,492,460],{"class":325},[282,494,495],{"class":329},"Robot",[282,497,478],{"class":325},[282,499,501,503,506,509,511,513,516,518],{"class":284,"line":500},12,[282,502,460],{"class":325},[282,504,505],{"class":329},"TresAmbientLight",[282,507,508],{"class":333}," :intensity",[282,510,340],{"class":325},[282,512,343],{"class":325},[282,514,515],{"class":292},"1",[282,517,343],{"class":325},[282,519,478],{"class":325},[282,521,523,526,528],{"class":284,"line":522},13,[282,524,525],{"class":325},"  \u003C/",[282,527,452],{"class":329},[282,529,351],{"class":325},[282,531,533,535,537],{"class":284,"line":532},14,[282,534,423],{"class":325},[282,536,441],{"class":329},[282,538,351],{"class":325},[540,541,543],"h2",{"id":542},"what-gets-generated","What gets generated",[262,545,546,547,550],{},"Every node in the model becomes a real element, and every node the artist named becomes a\n",[265,548,549],{},"\u003Cslot>"," whose fallback is the generated markup:",[273,552,555],{"className":315,"code":553,"filename":554,"language":318,"meta":278,"style":278},"\u003Cscript setup lang=\"ts\">\n/*\nAuto-generated by @tresjs/cli. Do not edit.\nCommand: tres gltf public/models/Mug.glb --slots all\nOverride the named slots from the parent instead; regenerating keeps your overrides.\n*/\nimport type { Group, Mesh, MeshStandardMaterial } from 'three'\nimport { useGLTF } from '@tresjs/cientos'\n\ninterface ModelNodes {\n  Scene: Group\n  Mug: Group\n  Mesh: Mesh\n  Mesh_1: Mesh\n}\n\ninterface ModelMaterials {\n  '4k-Metal-Worn': MeshStandardMaterial\n  'coat': MeshStandardMaterial\n}\n\ndefineSlots\u003C{\n  Mesh?: (props: { node: Mesh, material: MeshStandardMaterial }) => any\n  Mesh_1?: (props: { node: Mesh, material: MeshStandardMaterial }) => any\n  Mug?: (props: { node: Group }) => any\n}>()\n\nconst { nodes, materials, isLoading } = useGLTF\u003CModelNodes, ModelMaterials>('/models/Mug.glb', { draco: true })\n\ndefineExpose({ nodes, materials })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresGroup :dispose=\"null\">\n    \u003Ctemplate v-if=\"!isLoading\">\n      \u003Cslot name=\"Mug\" :node=\"nodes.Mug\">\n        \u003CTresGroup :position=\"[0, 1, 0]\">\n          \u003Cslot name=\"Mesh\" :node=\"nodes.Mesh\" :material=\"materials['4k-Metal-Worn']\">\n            \u003CTresMesh :geometry=\"nodes.Mesh.geometry\" :material=\"materials['4k-Metal-Worn']\" />\n          \u003C/slot>\n          \u003Cslot name=\"Mesh_1\" :node=\"nodes.Mesh_1\" :material=\"materials.coat\">\n            \u003CTresMesh :geometry=\"nodes.Mesh_1.geometry\" :material=\"materials.coat\" />\n          \u003C/slot>\n        \u003C/TresGroup>\n      \u003C/slot>\n    \u003C/template>\n  \u003C/TresGroup>\n\u003C/template>\n","src/models/Mug.gen.vue",[265,556,557,577,582,587,592,597,602,636,655,659,670,681,690,700,709,715,720,730,747,761,766,771,781,825,860,887,896,901,970,975,997,1006,1011,1020,1042,1066,1101,1122,1166,1199,1209,1251,1281,1290,1300,1310,1320,1329],{"__ignoreMap":278},[282,558,559,561,563,565,567,569,571,573,575],{"class":284,"line":285},[282,560,326],{"class":325},[282,562,330],{"class":329},[282,564,334],{"class":333},[282,566,337],{"class":333},[282,568,340],{"class":325},[282,570,343],{"class":325},[282,572,346],{"class":292},[282,574,343],{"class":325},[282,576,351],{"class":325},[282,578,579],{"class":284,"line":299},[282,580,581],{"class":302},"/*\n",[282,583,584],{"class":284,"line":306},[282,585,586],{"class":302},"Auto-generated by @tresjs/cli. Do not edit.\n",[282,588,589],{"class":284,"line":402},[282,590,591],{"class":302},"Command: tres gltf public/models/Mug.glb --slots all\n",[282,593,594],{"class":284,"line":420},[282,595,596],{"class":302},"Override the named slots from the parent instead; regenerating keeps your overrides.\n",[282,598,599],{"class":284,"line":430},[282,600,601],{"class":302},"*/\n",[282,603,604,606,609,611,614,617,620,622,625,627,629,631,634],{"class":284,"line":436},[282,605,357],{"class":356},[282,607,608],{"class":356}," type",[282,610,360],{"class":325},[282,612,613],{"class":363}," Group",[282,615,616],{"class":325},",",[282,618,619],{"class":363}," Mesh",[282,621,616],{"class":325},[282,623,624],{"class":363}," MeshStandardMaterial",[282,626,367],{"class":325},[282,628,370],{"class":356},[282,630,373],{"class":325},[282,632,633],{"class":292},"three",[282,635,379],{"class":325},[282,637,638,640,642,645,647,649,651,653],{"class":284,"line":446},[282,639,357],{"class":356},[282,641,360],{"class":325},[282,643,644],{"class":363}," useGLTF",[282,646,367],{"class":325},[282,648,370],{"class":356},[282,650,373],{"class":325},[282,652,376],{"class":292},[282,654,379],{"class":325},[282,656,657],{"class":284,"line":457},[282,658,433],{"emptyLinePlaceholder":39},[282,660,661,664,667],{"class":284,"line":481},[282,662,663],{"class":333},"interface",[282,665,666],{"class":288}," ModelNodes",[282,668,669],{"class":325}," {\n",[282,671,672,675,678],{"class":284,"line":490},[282,673,674],{"class":329},"  Scene",[282,676,677],{"class":325},":",[282,679,680],{"class":288}," Group\n",[282,682,683,686,688],{"class":284,"line":500},[282,684,685],{"class":329},"  Mug",[282,687,677],{"class":325},[282,689,680],{"class":288},[282,691,692,695,697],{"class":284,"line":522},[282,693,694],{"class":329},"  Mesh",[282,696,677],{"class":325},[282,698,699],{"class":288}," Mesh\n",[282,701,702,705,707],{"class":284,"line":532},[282,703,704],{"class":329},"  Mesh_1",[282,706,677],{"class":325},[282,708,699],{"class":288},[282,710,712],{"class":284,"line":711},15,[282,713,714],{"class":325},"}\n",[282,716,718],{"class":284,"line":717},16,[282,719,433],{"emptyLinePlaceholder":39},[282,721,723,725,728],{"class":284,"line":722},17,[282,724,663],{"class":333},[282,726,727],{"class":288}," ModelMaterials",[282,729,669],{"class":325},[282,731,733,736,739,742,744],{"class":284,"line":732},18,[282,734,735],{"class":325},"  '",[282,737,738],{"class":292},"4k-Metal-Worn",[282,740,741],{"class":325},"'",[282,743,677],{"class":325},[282,745,746],{"class":288}," MeshStandardMaterial\n",[282,748,750,752,755,757,759],{"class":284,"line":749},19,[282,751,735],{"class":325},[282,753,754],{"class":292},"coat",[282,756,741],{"class":325},[282,758,677],{"class":325},[282,760,746],{"class":288},[282,762,764],{"class":284,"line":763},20,[282,765,714],{"class":325},[282,767,769],{"class":284,"line":768},21,[282,770,433],{"emptyLinePlaceholder":39},[282,772,774,778],{"class":284,"line":773},22,[282,775,777],{"class":776},"s2Zo4","defineSlots",[282,779,780],{"class":325},"\u003C{\n",[282,782,784,786,789,792,796,798,800,803,805,807,809,812,814,816,819,822],{"class":284,"line":783},23,[282,785,694],{"class":329},[282,787,788],{"class":325},"?:",[282,790,791],{"class":325}," (",[282,793,795],{"class":794},"sHdIc","props",[282,797,677],{"class":325},[282,799,360],{"class":325},[282,801,802],{"class":329}," node",[282,804,677],{"class":325},[282,806,619],{"class":288},[282,808,616],{"class":325},[282,810,811],{"class":329}," material",[282,813,677],{"class":325},[282,815,624],{"class":288},[282,817,818],{"class":325}," })",[282,820,821],{"class":333}," =>",[282,823,824],{"class":288}," any\n",[282,826,828,830,832,834,836,838,840,842,844,846,848,850,852,854,856,858],{"class":284,"line":827},24,[282,829,704],{"class":329},[282,831,788],{"class":325},[282,833,791],{"class":325},[282,835,795],{"class":794},[282,837,677],{"class":325},[282,839,360],{"class":325},[282,841,802],{"class":329},[282,843,677],{"class":325},[282,845,619],{"class":288},[282,847,616],{"class":325},[282,849,811],{"class":329},[282,851,677],{"class":325},[282,853,624],{"class":288},[282,855,818],{"class":325},[282,857,821],{"class":333},[282,859,824],{"class":288},[282,861,863,865,867,869,871,873,875,877,879,881,883,885],{"class":284,"line":862},25,[282,864,685],{"class":329},[282,866,788],{"class":325},[282,868,791],{"class":325},[282,870,795],{"class":794},[282,872,677],{"class":325},[282,874,360],{"class":325},[282,876,802],{"class":329},[282,878,677],{"class":325},[282,880,613],{"class":288},[282,882,818],{"class":325},[282,884,821],{"class":333},[282,886,824],{"class":288},[282,888,890,893],{"class":284,"line":889},26,[282,891,892],{"class":325},"}>",[282,894,895],{"class":363},"()\n",[282,897,899],{"class":284,"line":898},27,[282,900,433],{"emptyLinePlaceholder":39},[282,902,904,907,909,912,914,917,919,922,925,928,930,932,935,937,939,942,945,947,950,952,954,956,959,961,965,967],{"class":284,"line":903},28,[282,905,906],{"class":333},"const",[282,908,360],{"class":325},[282,910,911],{"class":363}," nodes",[282,913,616],{"class":325},[282,915,916],{"class":363}," materials",[282,918,616],{"class":325},[282,920,921],{"class":363}," isLoading ",[282,923,924],{"class":325},"}",[282,926,927],{"class":325}," =",[282,929,644],{"class":776},[282,931,326],{"class":325},[282,933,934],{"class":288},"ModelNodes",[282,936,616],{"class":325},[282,938,727],{"class":288},[282,940,941],{"class":325},">",[282,943,944],{"class":363},"(",[282,946,741],{"class":325},[282,948,949],{"class":292},"/models/Mug.glb",[282,951,741],{"class":325},[282,953,616],{"class":325},[282,955,360],{"class":325},[282,957,958],{"class":329}," draco",[282,960,677],{"class":325},[282,962,964],{"class":963},"sfNiH"," true",[282,966,367],{"class":325},[282,968,969],{"class":363},")\n",[282,971,973],{"class":284,"line":972},29,[282,974,433],{"emptyLinePlaceholder":39},[282,976,978,981,983,986,988,990,993,995],{"class":284,"line":977},30,[282,979,980],{"class":776},"defineExpose",[282,982,944],{"class":363},[282,984,985],{"class":325},"{",[282,987,911],{"class":363},[282,989,616],{"class":325},[282,991,992],{"class":363}," materials ",[282,994,924],{"class":325},[282,996,969],{"class":363},[282,998,1000,1002,1004],{"class":284,"line":999},31,[282,1001,423],{"class":325},[282,1003,330],{"class":329},[282,1005,351],{"class":325},[282,1007,1009],{"class":284,"line":1008},32,[282,1010,433],{"emptyLinePlaceholder":39},[282,1012,1014,1016,1018],{"class":284,"line":1013},33,[282,1015,326],{"class":325},[282,1017,441],{"class":329},[282,1019,351],{"class":325},[282,1021,1023,1025,1028,1031,1033,1035,1038,1040],{"class":284,"line":1022},34,[282,1024,449],{"class":325},[282,1026,1027],{"class":329},"TresGroup",[282,1029,1030],{"class":333}," :dispose",[282,1032,340],{"class":325},[282,1034,343],{"class":325},[282,1036,1037],{"class":292},"null",[282,1039,343],{"class":325},[282,1041,351],{"class":325},[282,1043,1045,1047,1049,1052,1054,1056,1059,1062,1064],{"class":284,"line":1044},35,[282,1046,460],{"class":325},[282,1048,441],{"class":329},[282,1050,1051],{"class":356}," v-if",[282,1053,340],{"class":325},[282,1055,343],{"class":325},[282,1057,1058],{"class":325},"!",[282,1060,1061],{"class":363},"isLoading",[282,1063,343],{"class":325},[282,1065,351],{"class":325},[282,1067,1069,1072,1075,1078,1080,1082,1085,1087,1090,1092,1094,1097,1099],{"class":284,"line":1068},36,[282,1070,1071],{"class":325},"      \u003C",[282,1073,1074],{"class":329},"slot",[282,1076,1077],{"class":333}," name",[282,1079,340],{"class":325},[282,1081,343],{"class":325},[282,1083,1084],{"class":292},"Mug",[282,1086,343],{"class":325},[282,1088,1089],{"class":333}," :node",[282,1091,340],{"class":325},[282,1093,343],{"class":325},[282,1095,1096],{"class":292},"nodes.Mug",[282,1098,343],{"class":325},[282,1100,351],{"class":325},[282,1102,1104,1107,1109,1111,1113,1115,1118,1120],{"class":284,"line":1103},37,[282,1105,1106],{"class":325},"        \u003C",[282,1108,1027],{"class":329},[282,1110,466],{"class":333},[282,1112,340],{"class":325},[282,1114,343],{"class":325},[282,1116,1117],{"class":292},"[0, 1, 0]",[282,1119,343],{"class":325},[282,1121,351],{"class":325},[282,1123,1125,1128,1130,1132,1134,1136,1139,1141,1143,1145,1147,1150,1152,1155,1157,1159,1162,1164],{"class":284,"line":1124},38,[282,1126,1127],{"class":325},"          \u003C",[282,1129,1074],{"class":329},[282,1131,1077],{"class":333},[282,1133,340],{"class":325},[282,1135,343],{"class":325},[282,1137,1138],{"class":292},"Mesh",[282,1140,343],{"class":325},[282,1142,1089],{"class":333},[282,1144,340],{"class":325},[282,1146,343],{"class":325},[282,1148,1149],{"class":292},"nodes.Mesh",[282,1151,343],{"class":325},[282,1153,1154],{"class":333}," :material",[282,1156,340],{"class":325},[282,1158,343],{"class":325},[282,1160,1161],{"class":292},"materials['4k-Metal-Worn']",[282,1163,343],{"class":325},[282,1165,351],{"class":325},[282,1167,1169,1172,1175,1178,1180,1182,1185,1187,1189,1191,1193,1195,1197],{"class":284,"line":1168},39,[282,1170,1171],{"class":325},"            \u003C",[282,1173,1174],{"class":329},"TresMesh",[282,1176,1177],{"class":333}," :geometry",[282,1179,340],{"class":325},[282,1181,343],{"class":325},[282,1183,1184],{"class":292},"nodes.Mesh.geometry",[282,1186,343],{"class":325},[282,1188,1154],{"class":333},[282,1190,340],{"class":325},[282,1192,343],{"class":325},[282,1194,1161],{"class":292},[282,1196,343],{"class":325},[282,1198,478],{"class":325},[282,1200,1202,1205,1207],{"class":284,"line":1201},40,[282,1203,1204],{"class":325},"          \u003C/",[282,1206,1074],{"class":329},[282,1208,351],{"class":325},[282,1210,1212,1214,1216,1218,1220,1222,1225,1227,1229,1231,1233,1236,1238,1240,1242,1244,1247,1249],{"class":284,"line":1211},41,[282,1213,1127],{"class":325},[282,1215,1074],{"class":329},[282,1217,1077],{"class":333},[282,1219,340],{"class":325},[282,1221,343],{"class":325},[282,1223,1224],{"class":292},"Mesh_1",[282,1226,343],{"class":325},[282,1228,1089],{"class":333},[282,1230,340],{"class":325},[282,1232,343],{"class":325},[282,1234,1235],{"class":292},"nodes.Mesh_1",[282,1237,343],{"class":325},[282,1239,1154],{"class":333},[282,1241,340],{"class":325},[282,1243,343],{"class":325},[282,1245,1246],{"class":292},"materials.coat",[282,1248,343],{"class":325},[282,1250,351],{"class":325},[282,1252,1254,1256,1258,1260,1262,1264,1267,1269,1271,1273,1275,1277,1279],{"class":284,"line":1253},42,[282,1255,1171],{"class":325},[282,1257,1174],{"class":329},[282,1259,1177],{"class":333},[282,1261,340],{"class":325},[282,1263,343],{"class":325},[282,1265,1266],{"class":292},"nodes.Mesh_1.geometry",[282,1268,343],{"class":325},[282,1270,1154],{"class":333},[282,1272,340],{"class":325},[282,1274,343],{"class":325},[282,1276,1246],{"class":292},[282,1278,343],{"class":325},[282,1280,478],{"class":325},[282,1282,1284,1286,1288],{"class":284,"line":1283},43,[282,1285,1204],{"class":325},[282,1287,1074],{"class":329},[282,1289,351],{"class":325},[282,1291,1293,1296,1298],{"class":284,"line":1292},44,[282,1294,1295],{"class":325},"        \u003C/",[282,1297,1027],{"class":329},[282,1299,351],{"class":325},[282,1301,1303,1306,1308],{"class":284,"line":1302},45,[282,1304,1305],{"class":325},"      \u003C/",[282,1307,1074],{"class":329},[282,1309,351],{"class":325},[282,1311,1313,1316,1318],{"class":284,"line":1312},46,[282,1314,1315],{"class":325},"    \u003C/",[282,1317,441],{"class":329},[282,1319,351],{"class":325},[282,1321,1323,1325,1327],{"class":284,"line":1322},47,[282,1324,525],{"class":325},[282,1326,1027],{"class":329},[282,1328,351],{"class":325},[282,1330,1332,1334,1336],{"class":284,"line":1331},48,[282,1333,423],{"class":325},[282,1335,441],{"class":329},[282,1337,351],{"class":325},[262,1339,1340],{},"A few things are worth pointing out:",[1342,1343,1344],"prose-list",{},[1345,1346,1347,1376,1386,1400],"ul",{},[1348,1349,1350,1359,1360,1364,1365,1367,1368,1371,1372,1375],"li",{},[1351,1352,1353,1355,1356],"strong",{},[265,1354,934],{}," and ",[265,1357,1358],{},"ModelMaterials"," describe ",[1361,1362,1363],"em",{},"this"," export, so ",[265,1366,1096],{}," is a ",[265,1369,1370],{},"Group"," and not an ",[265,1373,1374],{},"any",".",[1348,1377,1378,1381,1382,1385],{},[1351,1379,1380],{},"Draco is detected",", and ",[265,1383,1384],{},"{ draco: true }"," is passed automatically. A Draco model renders nothing without it.",[1348,1387,1388,1391,1392,1395,1396,1399],{},[1351,1389,1390],{},"Lights, cameras and bones"," are emitted as ",[265,1393,1394],{},"\u003Cprimitive :object=\"...\" />",": their props live on the parsed object, and a bone must ",[1361,1397,1398],{},"be"," the parsed object for skinning to work.",[1348,1401,1402,1408,1409,1412],{},[1351,1403,1404,1405,1407],{},"The root ",[265,1406,1027],{}," stays mounted"," and gates its children with ",[265,1410,1411],{},"v-if=\"!isLoading\"",", so refs on it are stable.",[540,1414,1416],{"id":1415},"overriding-a-node","Overriding a node",[262,1418,1419],{},"The generated file is disposable. Anything you want to change lives in the parent, as a slot\noverride:",[273,1421,1423],{"className":315,"code":1422,"filename":317,"language":318,"meta":278,"style":278},"\u003Cscript setup lang=\"ts\">\nimport Robot from '@/models/Robot.gen.vue'\nimport { hologram } from './materials'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CRobot>\n    \u003Ctemplate #Head=\"{ node }\">\n      \u003CTresMesh :geometry=\"node.geometry\" :material=\"hologram\" @click=\"explode\" />\n    \u003C/template>\n  \u003C/Robot>\n\u003C/template>\n",[265,1424,1425,1445,1459,1479,1487,1491,1499,1507,1534,1576,1584,1592],{"__ignoreMap":278},[282,1426,1427,1429,1431,1433,1435,1437,1439,1441,1443],{"class":284,"line":285},[282,1428,326],{"class":325},[282,1430,330],{"class":329},[282,1432,334],{"class":333},[282,1434,337],{"class":333},[282,1436,340],{"class":325},[282,1438,343],{"class":325},[282,1440,346],{"class":292},[282,1442,343],{"class":325},[282,1444,351],{"class":325},[282,1446,1447,1449,1451,1453,1455,1457],{"class":284,"line":299},[282,1448,357],{"class":356},[282,1450,407],{"class":363},[282,1452,410],{"class":356},[282,1454,373],{"class":325},[282,1456,415],{"class":292},[282,1458,379],{"class":325},[282,1460,1461,1463,1465,1468,1470,1472,1474,1477],{"class":284,"line":306},[282,1462,357],{"class":356},[282,1464,360],{"class":325},[282,1466,1467],{"class":363}," hologram",[282,1469,367],{"class":325},[282,1471,370],{"class":356},[282,1473,373],{"class":325},[282,1475,1476],{"class":292},"./materials",[282,1478,379],{"class":325},[282,1480,1481,1483,1485],{"class":284,"line":402},[282,1482,423],{"class":325},[282,1484,330],{"class":329},[282,1486,351],{"class":325},[282,1488,1489],{"class":284,"line":420},[282,1490,433],{"emptyLinePlaceholder":39},[282,1492,1493,1495,1497],{"class":284,"line":430},[282,1494,326],{"class":325},[282,1496,441],{"class":329},[282,1498,351],{"class":325},[282,1500,1501,1503,1505],{"class":284,"line":436},[282,1502,449],{"class":325},[282,1504,495],{"class":329},[282,1506,351],{"class":325},[282,1508,1509,1511,1513,1516,1519,1521,1523,1525,1528,1530,1532],{"class":284,"line":446},[282,1510,460],{"class":325},[282,1512,441],{"class":329},[282,1514,1515],{"class":325}," #",[282,1517,1518],{"class":333},"Head",[282,1520,340],{"class":325},[282,1522,343],{"class":325},[282,1524,985],{"class":325},[282,1526,1527],{"class":363}," node ",[282,1529,924],{"class":325},[282,1531,343],{"class":325},[282,1533,351],{"class":325},[282,1535,1536,1538,1540,1542,1544,1546,1549,1551,1553,1555,1557,1560,1562,1565,1567,1569,1572,1574],{"class":284,"line":457},[282,1537,1071],{"class":325},[282,1539,1174],{"class":329},[282,1541,1177],{"class":333},[282,1543,340],{"class":325},[282,1545,343],{"class":325},[282,1547,1548],{"class":292},"node.geometry",[282,1550,343],{"class":325},[282,1552,1154],{"class":333},[282,1554,340],{"class":325},[282,1556,343],{"class":325},[282,1558,1559],{"class":292},"hologram",[282,1561,343],{"class":325},[282,1563,1564],{"class":333}," @click",[282,1566,340],{"class":325},[282,1568,343],{"class":325},[282,1570,1571],{"class":292},"explode",[282,1573,343],{"class":325},[282,1575,478],{"class":325},[282,1577,1578,1580,1582],{"class":284,"line":481},[282,1579,1315],{"class":325},[282,1581,441],{"class":329},[282,1583,351],{"class":325},[282,1585,1586,1588,1590],{"class":284,"line":490},[282,1587,525],{"class":325},[282,1589,495],{"class":329},[282,1591,351],{"class":325},[282,1593,1594,1596,1598],{"class":284,"line":500},[282,1595,423],{"class":325},[282,1597,441],{"class":329},[282,1599,351],{"class":325},[262,1601,1602,1603,1605,1606,1609,1610,1612],{},"Re-run ",[265,1604,186],{}," after the artist re-exports and the override survives, because it never lived\nin the generated file. If the artist ",[1361,1607,1608],{},"renames"," ",[265,1611,1518],{},", the override becomes a type error instead\nof silently disappearing at runtime.",[1614,1615,1616],"prose-note",{},[262,1617,1618,1621,1622,1625,1626,1629,1630,1633,1634,1637,1638,1375],{},[265,1619,1620],{},"--slots named"," (the default) skips exporter noise like ",[265,1623,1624],{},"Object_12",", ",[265,1627,1628],{},"Sketchfab_model"," or\n",[265,1631,1632],{},"Armature",", since overriding those means nothing. On marketplace assets where ",[1351,1635,1636],{},"every"," mesh is\nexporter-named, the CLI says so and points you at ",[265,1639,1640],{},"--slots all",[540,1642,1644],{"id":1643},"nodes-and-materials-from-the-parent","Nodes and materials from the parent",[262,1646,1647,1648,1355,1651,1654],{},"The component exposes ",[265,1649,1650],{},"nodes",[265,1652,1653],{},"materials",", so a parent can reach into the model without\nre-loading it:",[273,1656,1658],{"className":315,"code":1657,"language":318,"meta":278,"style":278},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport Robot from '@/models/Robot.gen.vue'\n\nconst robot = ref\u003CInstanceType\u003Ctypeof Robot>>()\n\nfunction paintItRed() {\n  robot.value?.materials.Body.color.set('#ff0055')\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CRobot ref=\"robot\" />\n\u003C/template>\n",[265,1659,1660,1680,1699,1713,1717,1744,1748,1761,1802,1806,1814,1818,1826,1845],{"__ignoreMap":278},[282,1661,1662,1664,1666,1668,1670,1672,1674,1676,1678],{"class":284,"line":285},[282,1663,326],{"class":325},[282,1665,330],{"class":329},[282,1667,334],{"class":333},[282,1669,337],{"class":333},[282,1671,340],{"class":325},[282,1673,343],{"class":325},[282,1675,346],{"class":292},[282,1677,343],{"class":325},[282,1679,351],{"class":325},[282,1681,1682,1684,1686,1689,1691,1693,1695,1697],{"class":284,"line":299},[282,1683,357],{"class":356},[282,1685,360],{"class":325},[282,1687,1688],{"class":363}," ref",[282,1690,367],{"class":325},[282,1692,370],{"class":356},[282,1694,373],{"class":325},[282,1696,318],{"class":292},[282,1698,379],{"class":325},[282,1700,1701,1703,1705,1707,1709,1711],{"class":284,"line":306},[282,1702,357],{"class":356},[282,1704,407],{"class":363},[282,1706,410],{"class":356},[282,1708,373],{"class":325},[282,1710,415],{"class":292},[282,1712,379],{"class":325},[282,1714,1715],{"class":284,"line":402},[282,1716,433],{"emptyLinePlaceholder":39},[282,1718,1719,1721,1724,1726,1728,1730,1733,1736,1739,1742],{"class":284,"line":420},[282,1720,906],{"class":333},[282,1722,1723],{"class":363}," robot ",[282,1725,340],{"class":325},[282,1727,1688],{"class":776},[282,1729,326],{"class":325},[282,1731,1732],{"class":288},"InstanceType",[282,1734,1735],{"class":325},"\u003Ctypeof",[282,1737,1738],{"class":363}," Robot",[282,1740,1741],{"class":325},">>",[282,1743,895],{"class":363},[282,1745,1746],{"class":284,"line":430},[282,1747,433],{"emptyLinePlaceholder":39},[282,1749,1750,1753,1756,1759],{"class":284,"line":436},[282,1751,1752],{"class":333},"function",[282,1754,1755],{"class":776}," paintItRed",[282,1757,1758],{"class":325},"()",[282,1760,669],{"class":325},[282,1762,1763,1766,1768,1771,1774,1776,1778,1781,1783,1786,1788,1791,1793,1795,1798,1800],{"class":284,"line":446},[282,1764,1765],{"class":363},"  robot",[282,1767,1375],{"class":325},[282,1769,1770],{"class":363},"value",[282,1772,1773],{"class":325},"?.",[282,1775,1653],{"class":363},[282,1777,1375],{"class":325},[282,1779,1780],{"class":363},"Body",[282,1782,1375],{"class":325},[282,1784,1785],{"class":363},"color",[282,1787,1375],{"class":325},[282,1789,1790],{"class":776},"set",[282,1792,944],{"class":329},[282,1794,741],{"class":325},[282,1796,1797],{"class":292},"#ff0055",[282,1799,741],{"class":325},[282,1801,969],{"class":329},[282,1803,1804],{"class":284,"line":457},[282,1805,714],{"class":325},[282,1807,1808,1810,1812],{"class":284,"line":481},[282,1809,423],{"class":325},[282,1811,330],{"class":329},[282,1813,351],{"class":325},[282,1815,1816],{"class":284,"line":490},[282,1817,433],{"emptyLinePlaceholder":39},[282,1819,1820,1822,1824],{"class":284,"line":500},[282,1821,326],{"class":325},[282,1823,441],{"class":329},[282,1825,351],{"class":325},[282,1827,1828,1830,1832,1834,1836,1838,1841,1843],{"class":284,"line":522},[282,1829,449],{"class":325},[282,1831,495],{"class":329},[282,1833,1688],{"class":333},[282,1835,340],{"class":325},[282,1837,343],{"class":325},[282,1839,1840],{"class":292},"robot",[282,1842,343],{"class":325},[282,1844,478],{"class":325},[282,1846,1847,1849,1851],{"class":284,"line":532},[282,1848,423],{"class":325},[282,1850,441],{"class":329},[282,1852,351],{"class":325},[540,1854,1856],{"id":1855},"animated-models","Animated models",[262,1858,1859,1860,1869,1870,1873],{},"When the model ships animation clips, the generated component also wires up\n",[1861,1862,1866],"a",{"href":1863,"rel":1864},"https://cientos.tresjs.org/api/miscellaneous/use-animations",[1865],"nofollow",[265,1867,1868],{},"useAnimations"," and exposes\n",[265,1871,1872],{},"actions",", keyed by a union of the clip names:",[273,1875,1878],{"className":1876,"code":1877,"language":346,"meta":278,"style":278},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","type ActionName\n  = | 'Idle'\n    | 'Walk'\n    | 'Death_A'\n",[265,1879,1880,1888,1903,1915],{"__ignoreMap":278},[282,1881,1882,1885],{"class":284,"line":285},[282,1883,1884],{"class":333},"type",[282,1886,1887],{"class":288}," ActionName\n",[282,1889,1890,1893,1896,1898,1901],{"class":284,"line":299},[282,1891,1892],{"class":325},"  =",[282,1894,1895],{"class":325}," |",[282,1897,373],{"class":325},[282,1899,1900],{"class":292},"Idle",[282,1902,379],{"class":325},[282,1904,1905,1908,1910,1913],{"class":284,"line":306},[282,1906,1907],{"class":325},"    |",[282,1909,373],{"class":325},[282,1911,1912],{"class":292},"Walk",[282,1914,379],{"class":325},[282,1916,1917,1919,1921,1924],{"class":284,"line":402},[282,1918,1907],{"class":325},[282,1920,373],{"class":325},[282,1922,1923],{"class":292},"Death_A",[282,1925,379],{"class":325},[273,1927,1929],{"className":315,"code":1928,"filename":317,"language":318,"meta":278,"style":278},"\u003Cscript setup lang=\"ts\">\nimport { onMounted, ref } from 'vue'\nimport Knight from '@/models/Knight.gen.vue'\n\nconst knight = ref\u003CInstanceType\u003Ctypeof Knight>>()\n\n// actions.Idle, not actions['Idle'] — and a typo is a compile error\nonMounted(() => knight.value?.actions.Idle?.play())\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CKnight ref=\"knight\" />\n\u003C/template>\n",[265,1930,1931,1951,1974,1990,1994,2018,2022,2027,2061,2069,2073,2081,2101],{"__ignoreMap":278},[282,1932,1933,1935,1937,1939,1941,1943,1945,1947,1949],{"class":284,"line":285},[282,1934,326],{"class":325},[282,1936,330],{"class":329},[282,1938,334],{"class":333},[282,1940,337],{"class":333},[282,1942,340],{"class":325},[282,1944,343],{"class":325},[282,1946,346],{"class":292},[282,1948,343],{"class":325},[282,1950,351],{"class":325},[282,1952,1953,1955,1957,1960,1962,1964,1966,1968,1970,1972],{"class":284,"line":299},[282,1954,357],{"class":356},[282,1956,360],{"class":325},[282,1958,1959],{"class":363}," onMounted",[282,1961,616],{"class":325},[282,1963,1688],{"class":363},[282,1965,367],{"class":325},[282,1967,370],{"class":356},[282,1969,373],{"class":325},[282,1971,318],{"class":292},[282,1973,379],{"class":325},[282,1975,1976,1978,1981,1983,1985,1988],{"class":284,"line":306},[282,1977,357],{"class":356},[282,1979,1980],{"class":363}," Knight ",[282,1982,410],{"class":356},[282,1984,373],{"class":325},[282,1986,1987],{"class":292},"@/models/Knight.gen.vue",[282,1989,379],{"class":325},[282,1991,1992],{"class":284,"line":402},[282,1993,433],{"emptyLinePlaceholder":39},[282,1995,1996,1998,2001,2003,2005,2007,2009,2011,2014,2016],{"class":284,"line":420},[282,1997,906],{"class":333},[282,1999,2000],{"class":363}," knight ",[282,2002,340],{"class":325},[282,2004,1688],{"class":776},[282,2006,326],{"class":325},[282,2008,1732],{"class":288},[282,2010,1735],{"class":325},[282,2012,2013],{"class":363}," Knight",[282,2015,1741],{"class":325},[282,2017,895],{"class":363},[282,2019,2020],{"class":284,"line":430},[282,2021,433],{"emptyLinePlaceholder":39},[282,2023,2024],{"class":284,"line":436},[282,2025,2026],{"class":302},"// actions.Idle, not actions['Idle'] — and a typo is a compile error\n",[282,2028,2029,2032,2034,2036,2038,2041,2043,2045,2047,2049,2051,2053,2055,2058],{"class":284,"line":446},[282,2030,2031],{"class":776},"onMounted",[282,2033,944],{"class":363},[282,2035,1758],{"class":325},[282,2037,821],{"class":333},[282,2039,2040],{"class":363}," knight",[282,2042,1375],{"class":325},[282,2044,1770],{"class":363},[282,2046,1773],{"class":325},[282,2048,1872],{"class":363},[282,2050,1375],{"class":325},[282,2052,1900],{"class":363},[282,2054,1773],{"class":325},[282,2056,2057],{"class":776},"play",[282,2059,2060],{"class":363},"())\n",[282,2062,2063,2065,2067],{"class":284,"line":457},[282,2064,423],{"class":325},[282,2066,330],{"class":329},[282,2068,351],{"class":325},[282,2070,2071],{"class":284,"line":481},[282,2072,433],{"emptyLinePlaceholder":39},[282,2074,2075,2077,2079],{"class":284,"line":490},[282,2076,326],{"class":325},[282,2078,441],{"class":329},[282,2080,351],{"class":325},[282,2082,2083,2085,2088,2090,2092,2094,2097,2099],{"class":284,"line":500},[282,2084,449],{"class":325},[282,2086,2087],{"class":329},"Knight",[282,2089,1688],{"class":333},[282,2091,340],{"class":325},[282,2093,343],{"class":325},[282,2095,2096],{"class":292},"knight",[282,2098,343],{"class":325},[282,2100,478],{"class":325},[282,2102,2103,2105,2107],{"class":284,"line":522},[282,2104,423],{"class":325},[282,2106,441],{"class":329},[282,2108,351],{"class":325},[540,2110,2112],{"id":2111},"where-the-file-is-written","Where the file is written",[262,2114,2115,2116,2119,2120,2123,2124,2127,2128,2131,2132,2134],{},"By default the component is written next to the model as ",[265,2117,2118],{},"\u003CModel>.gen.vue",", with one exception:\nif the model lives under ",[265,2121,2122],{},"public/",", the component goes to ",[265,2125,2126],{},"src/models/"," (or ",[265,2129,2130],{},"app/models/"," on\nNuxt) instead. A bundler copies ",[265,2133,2122],{}," verbatim and never compiles it, so a component written\nthere could never be imported.",[273,2136,2138],{"className":275,"code":2137,"language":277,"meta":278,"style":278},"tres gltf public/models/robot.glb        # → src/models/Robot.gen.vue\ntres gltf src/assets/robot.glb           # → src/assets/Robot.gen.vue\ntres gltf public/models/robot.glb -o src/components/Robot.vue\n",[265,2139,2140,2152,2164],{"__ignoreMap":278},[282,2141,2142,2144,2146,2149],{"class":284,"line":285},[282,2143,289],{"class":288},[282,2145,293],{"class":292},[282,2147,2148],{"class":292}," public/models/robot.glb",[282,2150,2151],{"class":302},"        # → src/models/Robot.gen.vue\n",[282,2153,2154,2156,2158,2161],{"class":284,"line":299},[282,2155,289],{"class":288},[282,2157,293],{"class":292},[282,2159,2160],{"class":292}," src/assets/robot.glb",[282,2162,2163],{"class":302},"           # → src/assets/Robot.gen.vue\n",[282,2165,2166,2168,2170,2172,2175],{"class":284,"line":306},[282,2167,289],{"class":288},[282,2169,293],{"class":292},[282,2171,2148],{"class":292},[282,2173,2174],{"class":292}," -o",[282,2176,2177],{"class":292}," src/components/Robot.vue\n",[262,2179,2180,2183,2184,2187,2188,2191,2192,2195,2196,1375],{},[265,2181,2182],{},"models/"," rather than ",[265,2185,2186],{},"components/"," is deliberate: component directories are auto-scanned by\n",[265,2189,2190],{},"unplugin-vue-components"," and Nuxt, and the dot in ",[265,2193,2194],{},".gen.vue"," produces an invalid identifier in\nthe generated ",[265,2197,2198],{},"components.d.ts",[2200,2201,2202],"prose-warning",{},[262,2203,2204,2205,2208],{},"The CLI refuses to overwrite a file it did not generate. Pass ",[265,2206,2207],{},"--force"," to replace a\nhand-written file anyway.",[540,2210,2212],{"id":2211},"the-model-url","The model url",[262,2214,2215,2216,2219,2220,2222,2223,2226,2227,2230,2231,2233],{},"The url baked into ",[265,2217,2218],{},"useGLTF"," is inferred from the nearest ",[265,2221,2122],{}," directory above the model:\n",[265,2224,2225],{},"public/models/robot.glb"," becomes ",[265,2228,2229],{},"/models/robot.glb",". With no ",[265,2232,2122],{}," in sight the CLI warns\nand guesses, so set it yourself:",[273,2235,2237],{"className":275,"code":2236,"language":277,"meta":278,"style":278},"tres gltf assets/robot.glb --url https://cdn.example.com/robot.glb\n",[265,2238,2239],{"__ignoreMap":278},[282,2240,2241,2243,2245,2248,2251],{"class":284,"line":285},[282,2242,289],{"class":288},[282,2244,293],{"class":292},[282,2246,2247],{"class":292}," assets/robot.glb",[282,2249,2250],{"class":292}," --url",[282,2252,2253],{"class":292}," https://cdn.example.com/robot.glb\n",[540,2255,2257],{"id":2256},"inspecting-a-model","Inspecting a model",[262,2259,2260,2263],{},[265,2261,2262],{},"--dry-run"," reports what the parser sees and writes nothing:",[273,2265,2267],{"className":275,"code":2266,"language":277,"meta":278,"style":278},"tres gltf public/models/artificer.glb --dry-run\n# public/models/artificer.glb\n#   51 named nodes (8 meshes)\n#   1 material\n#   76 animation clips\n#   run without --dry-run to generate a component\n",[265,2268,2269,2281,2286,2291,2296,2301],{"__ignoreMap":278},[282,2270,2271,2273,2275,2278],{"class":284,"line":285},[282,2272,289],{"class":288},[282,2274,293],{"class":292},[282,2276,2277],{"class":292}," public/models/artificer.glb",[282,2279,2280],{"class":292}," --dry-run\n",[282,2282,2283],{"class":284,"line":299},[282,2284,2285],{"class":302},"# public/models/artificer.glb\n",[282,2287,2288],{"class":284,"line":306},[282,2289,2290],{"class":302},"#   51 named nodes (8 meshes)\n",[282,2292,2293],{"class":284,"line":402},[282,2294,2295],{"class":302},"#   1 material\n",[282,2297,2298],{"class":284,"line":420},[282,2299,2300],{"class":302},"#   76 animation clips\n",[282,2302,2303],{"class":284,"line":430},[282,2304,2305],{"class":302},"#   run without --dry-run to generate a component\n",[262,2307,2308,2311,2312,2315],{},[265,2309,2310],{},"--json"," dumps the full parse, and ",[265,2313,2314],{},"--console"," prints the component to stdout instead of writing\nit, which is handy for piping or for a quick look before committing.",[540,2317,2319],{"id":2318},"options","Options",[2321,2322,2323,2340],"table",{},[2324,2325,2326],"thead",{},[2327,2328,2329,2334,2337],"tr",{},[2330,2331,2333],"th",{"align":2332},"left","Flag",[2330,2335,2336],{"align":2332},"Default",[2330,2338,2339],{"align":2332},"Description",[2341,2342,2343,2358,2373,2396,2418,2432,2450,2463,2478,2499,2513,2527,2540],"tbody",{},[2327,2344,2345,2351,2355],{},[2346,2347,2348],"td",{"align":2332},[265,2349,2350],{},"-o, --output \u003Cpath>",[2346,2352,2353],{"align":2332},[265,2354,2118],{},[2346,2356,2357],{"align":2332},"Where to write the component.",[2327,2359,2360,2365,2370],{},[2346,2361,2362],{"align":2332},[265,2363,2364],{},"-u, --url \u003Curl>",[2346,2366,2367,2368],{"align":2332},"inferred from ",[265,2369,2122],{},[2346,2371,2372],{"align":2332},"The url the model is served from at runtime.",[2327,2374,2375,2380,2385],{},[2346,2376,2377],{"align":2332},[265,2378,2379],{},"-s, --slots \u003Cmode>",[2346,2381,2382],{"align":2332},[265,2383,2384],{},"named",[2346,2386,2387,1625,2389,2392,2393,1375],{"align":2332},[265,2388,2384],{},[265,2390,2391],{},"all"," or ",[265,2394,2395],{},"none",[2327,2397,2398,2403,2408],{},[2346,2399,2400],{"align":2332},[265,2401,2402],{},"--shadows",[2346,2404,2405],{"align":2332},[265,2406,2407],{},"false",[2346,2409,2410,2411,1355,2414,2417],{"align":2332},"Add ",[265,2412,2413],{},"cast-shadow",[265,2415,2416],{},"receive-shadow"," to every mesh.",[2327,2419,2420,2425,2429],{},[2346,2421,2422],{"align":2332},[265,2423,2424],{},"-K, --keepgroups",[2346,2426,2427],{"align":2332},[265,2428,2407],{},[2346,2430,2431],{"align":2332},"Keep pass-through groups that carry nothing but nesting.",[2327,2433,2434,2439,2443],{},[2346,2435,2436],{"align":2332},[265,2437,2438],{},"-k, --keepnames",[2346,2440,2441],{"align":2332},[265,2442,2407],{},[2346,2444,2445,2446,2449],{"align":2332},"Keep ",[265,2447,2448],{},"name"," attributes on the emitted elements.",[2327,2451,2452,2457,2460],{},[2346,2453,2454],{"align":2332},[265,2455,2456],{},"-r, --root \u003Cname>",[2346,2458,2459],{"align":2332},"scene root",[2346,2461,2462],{"align":2332},"Generate from this subtree only.",[2327,2464,2465,2470,2475],{},[2346,2466,2467],{"align":2332},[265,2468,2469],{},"-p, --precision \u003Cdigits>",[2346,2471,2472],{"align":2332},[265,2473,2474],{},"2",[2346,2476,2477],{"align":2332},"Fractional digits kept on transforms.",[2327,2479,2480,2485,2489],{},[2346,2481,2482],{"align":2332},[265,2483,2484],{},"-m, --meta",[2346,2486,2487],{"align":2332},[265,2488,2407],{},[2346,2490,2491,2492,2495,2496,1375],{"align":2332},"Emit glTF ",[265,2493,2494],{},"extras"," as ",[265,2497,2498],{},":user-data",[2327,2500,2501,2506,2510],{},[2346,2502,2503],{"align":2332},[265,2504,2505],{},"-c, --console",[2346,2507,2508],{"align":2332},[265,2509,2407],{},[2346,2511,2512],{"align":2332},"Print the component instead of writing it.",[2327,2514,2515,2520,2524],{},[2346,2516,2517],{"align":2332},[265,2518,2519],{},"-f, --force",[2346,2521,2522],{"align":2332},[265,2523,2407],{},[2346,2525,2526],{"align":2332},"Overwrite a file this tool did not generate.",[2327,2528,2529,2533,2537],{},[2346,2530,2531],{"align":2332},[265,2532,2262],{},[2346,2534,2535],{"align":2332},[265,2536,2407],{},[2346,2538,2539],{"align":2332},"Report what the parser sees, generate nothing.",[2327,2541,2542,2546,2550],{},[2346,2543,2544],{"align":2332},[265,2545,2310],{},[2346,2547,2548],{"align":2332},[265,2549,2407],{},[2346,2551,2552],{"align":2332},"Print the full parse as JSON.",[540,2554,2556],{"id":2555},"supported-models","Supported models",[262,2558,2559,2560,2563,2564,2567,2568,2571,2572,2575],{},"Both ",[265,2561,2562],{},".glb"," and unpacked ",[265,2565,2566],{},".gltf"," + ",[265,2569,2570],{},".bin"," + textures work, as do Draco-compressed models. Pass\nthe ",[1351,2573,2574],{},"path to the file",", not the url it is served from:",[273,2577,2579],{"className":275,"code":2578,"language":277,"meta":278,"style":278},"tres gltf /models/robot.glb        # ✗ that is the url\ntres gltf public/models/robot.glb  # ✓ that is the file\n",[265,2580,2581,2593],{"__ignoreMap":278},[282,2582,2583,2585,2587,2590],{"class":284,"line":285},[282,2584,289],{"class":288},[282,2586,293],{"class":292},[282,2588,2589],{"class":292}," /models/robot.glb",[282,2591,2592],{"class":302},"        # ✗ that is the url\n",[282,2594,2595,2597,2599,2601],{"class":284,"line":299},[282,2596,289],{"class":288},[282,2598,293],{"class":292},[282,2600,2148],{"class":292},[282,2602,2603],{"class":302},"  # ✓ that is the file\n",[2605,2606,2608],"read-more",{"to":2607},"https://cientos.tresjs.org/getting-started/loading-models",[262,2609,2610,2611,1355,2613,2616],{},"Compare this workflow with ",[265,2612,2218],{},[265,2614,2615],{},"GLTFModel"," in the cientos docs.",[2618,2619,2620],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .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 .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 .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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":278,"searchDepth":285,"depth":299,"links":2622},[2623,2624,2625,2626,2627,2628,2629,2630,2631],{"id":542,"depth":299,"text":543},{"id":1415,"depth":299,"text":1416},{"id":1643,"depth":299,"text":1644},{"id":1855,"depth":299,"text":1856},{"id":2111,"depth":299,"text":2112},{"id":2211,"depth":299,"text":2212},{"id":2256,"depth":299,"text":2257},{"id":2318,"depth":299,"text":2319},{"id":2555,"depth":299,"text":2556},"Generate a typed Vue component from a .glb/.gltf model, with a slot for every node.","md",null,{},{"icon":88},{"title":186,"description":2632},"pVZv6WYiV9PmDcghDukT7ZCS25259swzkas_8oURWhw",[2640,2642],{"title":183,"path":179,"stem":180,"description":2641,"icon":184,"children":-1},"The tres command line tool for TresJS projects.",{"title":196,"path":192,"stem":197,"description":2643,"children":-1},"Discover guided recipes to help you get started with the basics of using Tres. Each recipe is designed to help you understand the core concepts of Tres and how to use them in your projects.",1785400182460]