[{"data":1,"prerenderedAt":2773},["ShallowReactive",2],{"navigation":3,"/getting-started/loading-models":490,"/getting-started/loading-models-surround":2768},[4,26],{"title":5,"path":6,"stem":7,"children":8},"Getting Started","/getting-started","1.getting-started/1.index",[9,10,14,18,22],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"Installation Guide","/getting-started/installation","1.getting-started/2.installation",{"title":15,"path":16,"stem":17},"Usage","/getting-started/usage","1.getting-started/3.usage",{"title":19,"path":20,"stem":21},"Loading Models","/getting-started/loading-models","1.getting-started/4.loading-models",{"title":23,"path":24,"stem":25},"Upgrade Guide","/getting-started/upgrade-guide","1.getting-started/5.upgrade-guide",{"title":27,"path":28,"stem":29,"children":30},"Api","/api","2.api",[31,34,88,118,160,202,300,326,360,410,456],{"title":32,"path":28,"stem":33},"All","2.api/index",{"title":35,"path":36,"stem":37,"children":38},"Abstractions","/api/abstractions","2.api/1.abstractions/index",[39,40,44,48,52,56,60,64,68,72,76,80,84],{"title":35,"path":36,"stem":37},{"title":41,"path":42,"stem":43},"Align","/api/abstractions/align","2.api/1.abstractions/align",{"title":45,"path":46,"stem":47},"Billboard","/api/abstractions/billboard","2.api/1.abstractions/billboard",{"title":49,"path":50,"stem":51},"Camera Shake","/api/abstractions/camera-shake","2.api/1.abstractions/camera-shake",{"title":53,"path":54,"stem":55},"Decal","/api/abstractions/decal","2.api/1.abstractions/decal",{"title":57,"path":58,"stem":59},"Edges","/api/abstractions/edges","2.api/1.abstractions/edges",{"title":61,"path":62,"stem":63},"Fit","/api/abstractions/fit","2.api/1.abstractions/fit",{"title":65,"path":66,"stem":67},"Levioso (Float)","/api/abstractions/levioso","2.api/1.abstractions/levioso",{"title":69,"path":70,"stem":71},"Mask","/api/abstractions/mask","2.api/1.abstractions/mask",{"title":73,"path":74,"stem":75},"Outline","/api/abstractions/outline","2.api/1.abstractions/outline",{"title":77,"path":78,"stem":79},"Sampler","/api/abstractions/sampler","2.api/1.abstractions/sampler",{"title":81,"path":82,"stem":83},"ScreenSizer","/api/abstractions/screen-sizer","2.api/1.abstractions/screen-sizer",{"title":85,"path":86,"stem":87},"ScreenSpace","/api/abstractions/screen-space","2.api/1.abstractions/screen-space",{"title":89,"path":90,"stem":91,"children":92},"Controls","/api/controls","2.api/2.controls/index",[93,94,98,102,106,110,114],{"title":89,"path":90,"stem":91},{"title":95,"path":96,"stem":97},"Camera Controls","/api/controls/camera-controls","2.api/2.controls/camera-controls",{"title":99,"path":100,"stem":101},"Keyboard Controls","/api/controls/keyboard-controls","2.api/2.controls/keyboard-controls",{"title":103,"path":104,"stem":105},"Map Controls","/api/controls/map-controls","2.api/2.controls/map-controls",{"title":107,"path":108,"stem":109},"Orbit Controls","/api/controls/orbit-controls","2.api/2.controls/orbit-controls",{"title":111,"path":112,"stem":113},"PointerLock Controls","/api/controls/pointer-lock-controls","2.api/2.controls/pointer-lock-controls",{"title":115,"path":116,"stem":117},"Transform Controls","/api/controls/transform-controls","2.api/2.controls/transform-controls",{"title":119,"path":120,"stem":121,"children":122},"Loaders","/api/loaders","2.api/3.loaders/index",[123,124,128,132,136,140,144,148,152,156],{"title":119,"path":120,"stem":121},{"title":125,"path":126,"stem":127},"useGLTF","/api/loaders/use-gltf","2.api/3.loaders/1.use-gltf",{"title":129,"path":130,"stem":131},"GLTFModel","/api/loaders/gltf-model","2.api/3.loaders/2.gltf-model",{"title":133,"path":134,"stem":135},"useFBX","/api/loaders/use-fbx","2.api/3.loaders/3.use-fbx",{"title":137,"path":138,"stem":139},"FBXModel","/api/loaders/fbx-model","2.api/3.loaders/4.fbx-model",{"title":141,"path":142,"stem":143},"useTexture","/api/loaders/use-texture","2.api/3.loaders/5.use-texture",{"title":145,"path":146,"stem":147},"useTextures","/api/loaders/use-textures","2.api/3.loaders/6.use-textures",{"title":149,"path":150,"stem":151},"useSVG","/api/loaders/use-svg","2.api/3.loaders/7.use-svg",{"title":153,"path":154,"stem":155},"useProgress","/api/loaders/use-progress","2.api/3.loaders/use-progress",{"title":157,"path":158,"stem":159},"useVideoTexture","/api/loaders/use-video-texture","2.api/3.loaders/use-video-texture",{"title":161,"path":162,"stem":163,"children":164},"Materials","/api/materials","2.api/4.materials/index",[165,166,170,174,178,182,186,190,194,198],{"title":161,"path":162,"stem":163},{"title":167,"path":168,"stem":169},"Custom Shader Material","/api/materials/custom-shader-material","2.api/4.materials/custom-shader-material",{"title":171,"path":172,"stem":173},"Mesh Glass Material","/api/materials/glass-material","2.api/4.materials/glass-material",{"title":175,"path":176,"stem":177},"Holographic Material","/api/materials/holographic-material","2.api/4.materials/holographic-material",{"title":179,"path":180,"stem":181},"Mesh Discard Material","/api/materials/mesh-discard-material","2.api/4.materials/mesh-discard-material",{"title":183,"path":184,"stem":185},"Mesh Portal Material","/api/materials/mesh-portal-material","2.api/4.materials/mesh-portal-material",{"title":187,"path":188,"stem":189},"Mesh Reflection Material","/api/materials/mesh-reflection-material","2.api/4.materials/mesh-reflection-material",{"title":191,"path":192,"stem":193},"Mesh Transmission Material","/api/materials/mesh-transmission-material","2.api/4.materials/mesh-transmission-material",{"title":195,"path":196,"stem":197},"Point Material","/api/materials/point-material","2.api/4.materials/point-material",{"title":199,"path":200,"stem":201},"Wobble Material","/api/materials/wobble-material","2.api/4.materials/wobble-material",{"title":203,"path":204,"stem":205,"children":206},"Shapes","/api/shapes","2.api/5.shapes/index",[207,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296],{"title":203,"path":204,"stem":205},{"title":209,"path":210,"stem":211},"Box","/api/shapes/box","2.api/5.shapes/box",{"title":213,"path":214,"stem":215},"CatmullRomCurve3","/api/shapes/catmullromcurve3","2.api/5.shapes/catmullromcurve3",{"title":217,"path":218,"stem":219},"Circle","/api/shapes/circle","2.api/5.shapes/circle",{"title":221,"path":222,"stem":223},"Cone","/api/shapes/cone","2.api/5.shapes/cone",{"title":225,"path":226,"stem":227},"Cubic Bezier Line","/api/shapes/cubic-bezier-line","2.api/5.shapes/cubic-bezier-line",{"title":229,"path":230,"stem":231},"Cylinder","/api/shapes/cylinder","2.api/5.shapes/cylinder",{"title":233,"path":234,"stem":235},"Dodecahedron","/api/shapes/dodecahedron","2.api/5.shapes/dodecahedron",{"title":237,"path":238,"stem":239},"Grid","/api/shapes/grid","2.api/5.shapes/grid",{"title":241,"path":242,"stem":243},"Icosahedron","/api/shapes/icosahedron","2.api/5.shapes/icosahedron",{"title":245,"path":246,"stem":247},"Line2","/api/shapes/line2","2.api/5.shapes/line2",{"title":249,"path":250,"stem":251},"Octahedron","/api/shapes/octahedron","2.api/5.shapes/octahedron",{"title":253,"path":254,"stem":255},"Plane","/api/shapes/plane","2.api/5.shapes/plane",{"title":257,"path":258,"stem":259},"Quadratic Bezier Line","/api/shapes/quadratic-bezier-line","2.api/5.shapes/quadratic-bezier-line",{"title":261,"path":262,"stem":263},"Ring","/api/shapes/ring","2.api/5.shapes/ring",{"title":265,"path":266,"stem":267},"Rounded Box","/api/shapes/rounded-box","2.api/5.shapes/rounded-box",{"title":269,"path":270,"stem":271},"Rounded Plane","/api/shapes/rounded-plane","2.api/5.shapes/rounded-plane",{"title":273,"path":274,"stem":275},"Screen Quad","/api/shapes/screen-quad","2.api/5.shapes/screen-quad",{"title":277,"path":278,"stem":279},"Sphere","/api/shapes/sphere","2.api/5.shapes/sphere",{"title":281,"path":282,"stem":283},"Superformula","/api/shapes/superformula","2.api/5.shapes/superformula",{"title":285,"path":286,"stem":287},"Tetrahedron","/api/shapes/tetrahedron","2.api/5.shapes/tetrahedron",{"title":289,"path":290,"stem":291},"Torus","/api/shapes/torus","2.api/5.shapes/torus",{"title":293,"path":294,"stem":295},"Torus Knot","/api/shapes/torus-knot","2.api/5.shapes/torus-knot",{"title":297,"path":298,"stem":299},"Tube","/api/shapes/tube","2.api/5.shapes/tube",{"title":301,"path":302,"stem":303,"children":304},"Debug/Performance","/api/debug-performance","2.api/6.debug-performance/index",[305,306,310,314,318,322],{"title":301,"path":302,"stem":303},{"title":307,"path":308,"stem":309},"Helper","/api/debug-performance/helper","2.api/6.debug-performance/helper",{"title":311,"path":312,"stem":313},"LOD","/api/debug-performance/lod","2.api/6.debug-performance/lod",{"title":315,"path":316,"stem":317},"Stats","/api/debug-performance/stats","2.api/6.debug-performance/stats",{"title":319,"path":320,"stem":321},"StatsGl","/api/debug-performance/stats-gl","2.api/6.debug-performance/stats-gl",{"title":323,"path":324,"stem":325},"useBVH","/api/debug-performance/use-bvh","2.api/6.debug-performance/use-bvh",{"title":327,"path":328,"stem":329,"children":330},"Light/Shadow","/api/light-shadow","2.api/7.light-shadow/index",[331,332,336,340,344,348,352,356],{"title":327,"path":328,"stem":329},{"title":333,"path":334,"stem":335},"Accumulative Shadows","/api/light-shadow/accumulative-shadows","2.api/7.light-shadow/accumulative-shadows",{"title":337,"path":338,"stem":339},"Bake Shadows","/api/light-shadow/bake-shadows","2.api/7.light-shadow/bake-shadows",{"title":341,"path":342,"stem":343},"Circle Shadow","/api/light-shadow/circle-shadow","2.api/7.light-shadow/circle-shadow",{"title":345,"path":346,"stem":347},"Contact Shadows","/api/light-shadow/contact-shadows","2.api/7.light-shadow/contact-shadows",{"title":349,"path":350,"stem":351},"Lensflare","/api/light-shadow/lensflare","2.api/7.light-shadow/lensflare",{"title":353,"path":354,"stem":355},"Randomized Lights","/api/light-shadow/randomized-lights","2.api/7.light-shadow/randomized-lights",{"title":357,"path":358,"stem":359},"Soft Shadows","/api/light-shadow/soft-shadows","2.api/7.light-shadow/soft-shadows",{"title":361,"path":362,"stem":363,"children":364},"Staging","/api/staging","2.api/8.staging/index",[365,366,370,374,378,382,386,390,394,398,402,406],{"title":361,"path":362,"stem":363},{"title":367,"path":368,"stem":369},"Environment","/api/staging/environment","2.api/8.staging/1.environment",{"title":371,"path":372,"stem":373},"useEnvironment","/api/staging/use-environment","2.api/8.staging/2.use-environment",{"title":375,"path":376,"stem":377},"Lightformer","/api/staging/lightformer","2.api/8.staging/3.lightformer",{"title":379,"path":380,"stem":381},"Backdrop","/api/staging/backdrop","2.api/8.staging/backdrop",{"title":383,"path":384,"stem":385},"Ocean","/api/staging/ocean","2.api/8.staging/ocean",{"title":387,"path":388,"stem":389},"Precipitation","/api/staging/precipitation","2.api/8.staging/precipitation",{"title":391,"path":392,"stem":393},"Sky","/api/staging/sky","2.api/8.staging/sky",{"title":395,"path":396,"stem":397},"Smoke","/api/staging/smoke","2.api/8.staging/smoke",{"title":399,"path":400,"stem":401},"Sparkles","/api/staging/sparkles","2.api/8.staging/sparkles",{"title":403,"path":404,"stem":405},"Stage","/api/staging/stage","2.api/8.staging/stage",{"title":407,"path":408,"stem":409},"Stars","/api/staging/stars","2.api/8.staging/stars",{"title":411,"path":412,"stem":413,"children":414},"Objects","/api/objects","2.api/9.objects/index",[415,416,420,424,428,432,436,440,444,448,452],{"title":411,"path":412,"stem":413},{"title":417,"path":418,"stem":419},"AnimatedSprite","/api/objects/animated-sprite","2.api/9.objects/animated-sprite",{"title":421,"path":422,"stem":423},"CubeCamera","/api/objects/cube-camera","2.api/9.objects/cube-camera",{"title":425,"path":426,"stem":427},"Fbo","/api/objects/fbo","2.api/9.objects/fbo",{"title":429,"path":430,"stem":431},"GradientTexture","/api/objects/gradient-texture","2.api/9.objects/gradient-texture",{"title":433,"path":434,"stem":435},"HTML","/api/objects/html","2.api/9.objects/html",{"title":437,"path":438,"stem":439},"Image","/api/objects/image","2.api/9.objects/image",{"title":441,"path":442,"stem":443},"MarchingCubes","/api/objects/marching-cubes","2.api/9.objects/marching-cubes",{"title":445,"path":446,"stem":447},"Reflector","/api/objects/reflector","2.api/9.objects/reflector",{"title":449,"path":450,"stem":451},"Refractor","/api/objects/refractor","2.api/9.objects/refractor",{"title":453,"path":454,"stem":455},"Text3D","/api/objects/text-3d","2.api/9.objects/text-3d",{"title":457,"path":458,"stem":459,"children":460},"Miscellaneous","/api/miscellaneous","2.api/miscellaneous/index",[461,462,466,470,474,478,482,486],{"title":457,"path":458,"stem":459},{"title":463,"path":464,"stem":465},"Bounds","/api/miscellaneous/bounds","2.api/miscellaneous/bounds",{"title":467,"path":468,"stem":469},"GlobalAudio","/api/miscellaneous/global-audio","2.api/miscellaneous/global-audio",{"title":471,"path":472,"stem":473},"MouseParallax","/api/miscellaneous/mouse-parallax","2.api/miscellaneous/mouse-parallax",{"title":475,"path":476,"stem":477},"PositionalAudio","/api/miscellaneous/positional-audio","2.api/miscellaneous/positional-audio",{"title":479,"path":480,"stem":481},"useAnimations","/api/miscellaneous/use-animations","2.api/miscellaneous/use-animations",{"title":483,"path":484,"stem":485},"useGLTFExporter","/api/miscellaneous/use-gltf-exporter","2.api/miscellaneous/use-gltf-exporter",{"title":487,"path":488,"stem":489},"useIntersect","/api/miscellaneous/use-intersect","2.api/miscellaneous/use-intersect",{"id":491,"title":19,"body":492,"description":2762,"extension":2763,"links":2764,"meta":2765,"navigation":691,"path":20,"seo":2766,"stem":21,"__hash__":2767},"docs/1.getting-started/4.loading-models.md",{"type":493,"value":494,"toc":2751},"minimark",[495,508,591,596,602,735,738,742,755,950,953,968,972,978,1011,1613,1616,1773,1778,1785,1897,1905,1919,1929,1932,1942,2099,2104,2108,2120,2432,2447,2626,2650,2654,2665,2707,2714,2718,2747],[496,497,498,499,503,504,507],"p",{},"Cientos gives you three ways to get a ",[500,501,502],"code",{},".glb","/",[500,505,506],{},".gltf"," model on screen. They are not alternatives to\neach other so much as three points on the same line: the further down this page you go, the more\ncontrol you get over the model's tree.",[509,510,511,531],"table",{},[512,513,514],"thead",{},[515,516,517,522,525,528],"tr",{},[518,519,521],"th",{"align":520},"left","Approach",[518,523,524],{"align":520},"Control",[518,526,527],{"align":520},"Typed",[518,529,530],{"align":520},"Best for",[532,533,534,554,571],"tbody",{},[515,535,536,545,548,551],{},[537,538,539],"td",{"align":520},[540,541,542],"a",{"href":130},[500,543,544],{},"\u003CGLTFModel />",[537,546,547],{"align":520},"Whole scene, as-is",[537,549,550],{"align":520},"No",[537,552,553],{"align":520},"Dropping a model in as-is",[515,555,556,562,565,568],{},[537,557,558],{"align":520},[540,559,560],{"href":126},[500,561,125],{},[537,563,564],{"align":520},"Pick nodes and materials by hand",[537,566,567],{"align":520},"Optional",[537,569,570],{"align":520},"Reusing parts of a model",[515,572,573,582,585,588],{},[537,574,575],{"align":520},[540,576,578,581],{"href":577},"#generate-a-component-with-the-cli",[500,579,580],{},"tres gltf"," codegen",[537,583,584],{"align":520},"Every node is an element",[537,586,587],{"align":520},"Yes",[537,589,590],{"align":520},"Production scenes, interaction, per-node overrides",[592,593,595],"h2",{"id":594},"drop-the-model-in","Drop the model in",[496,597,598,599,601],{},"The fastest path. ",[500,600,129],{}," loads the file and renders its scene graph untouched:",[603,604,610],"pre",{"className":605,"code":606,"filename":607,"language":608,"meta":609,"style":609},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { GLTFModel } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CGLTFModel path=\"/models/mug.glb\" />\n\u003C/template>\n","TheModel.vue","vue","",[500,611,612,647,676,686,693,703,726],{"__ignoreMap":609},[613,614,617,621,625,629,632,635,638,642,644],"span",{"class":615,"line":616},"line",1,[613,618,620],{"class":619},"sMK4o","\u003C",[613,622,624],{"class":623},"swJcz","script",[613,626,628],{"class":627},"spNyl"," setup",[613,630,631],{"class":627}," lang",[613,633,634],{"class":619},"=",[613,636,637],{"class":619},"\"",[613,639,641],{"class":640},"sfazB","ts",[613,643,637],{"class":619},[613,645,646],{"class":619},">\n",[613,648,650,654,657,661,664,667,670,673],{"class":615,"line":649},2,[613,651,653],{"class":652},"s7zQu","import",[613,655,656],{"class":619}," {",[613,658,660],{"class":659},"sTEyZ"," GLTFModel",[613,662,663],{"class":619}," }",[613,665,666],{"class":652}," from",[613,668,669],{"class":619}," '",[613,671,672],{"class":640},"@tresjs/cientos",[613,674,675],{"class":619},"'\n",[613,677,679,682,684],{"class":615,"line":678},3,[613,680,681],{"class":619},"\u003C/",[613,683,624],{"class":623},[613,685,646],{"class":619},[613,687,689],{"class":615,"line":688},4,[613,690,692],{"emptyLinePlaceholder":691},true,"\n",[613,694,696,698,701],{"class":615,"line":695},5,[613,697,620],{"class":619},[613,699,700],{"class":623},"template",[613,702,646],{"class":619},[613,704,706,709,711,714,716,718,721,723],{"class":615,"line":705},6,[613,707,708],{"class":619},"  \u003C",[613,710,129],{"class":623},[613,712,713],{"class":627}," path",[613,715,634],{"class":619},[613,717,637],{"class":619},[613,719,720],{"class":640},"/models/mug.glb",[613,722,637],{"class":619},[613,724,725],{"class":619}," />\n",[613,727,729,731,733],{"class":615,"line":728},7,[613,730,681],{"class":619},[613,732,700],{"class":623},[613,734,646],{"class":619},[496,736,737],{},"You get the whole model or nothing. There is no way to swap one mesh's material, attach a click\nhandler to a door, or hide a node, because none of them exist as elements in your template.",[592,739,741],{"id":740},"pick-the-parts-you-need","Pick the parts you need",[496,743,744,746,747,750,751,754],{},[500,745,125],{}," hands you the parsed ",[500,748,749],{},"nodes"," and ",[500,752,753],{},"materials",", so you compose the scene yourself:",[603,756,758],{"className":605,"code":757,"filename":607,"language":608,"meta":609,"style":609},"\u003Cscript setup lang=\"ts\">\nimport { useGLTF } from '@tresjs/cientos'\n\nconst { nodes, materials, isLoading } = useGLTF('/models/mug.glb')\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresMesh\n    v-if=\"!isLoading\"\n    :geometry=\"nodes.Mesh.geometry\"\n    :material=\"materials.coat\"\n    @click=\"onClick\"\n  />\n\u003C/template>\n",[500,759,760,780,799,803,846,854,858,866,874,890,905,920,935,941],{"__ignoreMap":609},[613,761,762,764,766,768,770,772,774,776,778],{"class":615,"line":616},[613,763,620],{"class":619},[613,765,624],{"class":623},[613,767,628],{"class":627},[613,769,631],{"class":627},[613,771,634],{"class":619},[613,773,637],{"class":619},[613,775,641],{"class":640},[613,777,637],{"class":619},[613,779,646],{"class":619},[613,781,782,784,786,789,791,793,795,797],{"class":615,"line":649},[613,783,653],{"class":652},[613,785,656],{"class":619},[613,787,788],{"class":659}," useGLTF",[613,790,663],{"class":619},[613,792,666],{"class":652},[613,794,669],{"class":619},[613,796,672],{"class":640},[613,798,675],{"class":619},[613,800,801],{"class":615,"line":678},[613,802,692],{"emptyLinePlaceholder":691},[613,804,805,808,810,813,816,819,821,824,827,830,833,836,839,841,843],{"class":615,"line":688},[613,806,807],{"class":627},"const",[613,809,656],{"class":619},[613,811,812],{"class":659}," nodes",[613,814,815],{"class":619},",",[613,817,818],{"class":659}," materials",[613,820,815],{"class":619},[613,822,823],{"class":659}," isLoading ",[613,825,826],{"class":619},"}",[613,828,829],{"class":619}," =",[613,831,788],{"class":832},"s2Zo4",[613,834,835],{"class":659},"(",[613,837,838],{"class":619},"'",[613,840,720],{"class":640},[613,842,838],{"class":619},[613,844,845],{"class":659},")\n",[613,847,848,850,852],{"class":615,"line":695},[613,849,681],{"class":619},[613,851,624],{"class":623},[613,853,646],{"class":619},[613,855,856],{"class":615,"line":705},[613,857,692],{"emptyLinePlaceholder":691},[613,859,860,862,864],{"class":615,"line":728},[613,861,620],{"class":619},[613,863,700],{"class":623},[613,865,646],{"class":619},[613,867,869,871],{"class":615,"line":868},8,[613,870,708],{"class":619},[613,872,873],{"class":623},"TresMesh\n",[613,875,877,880,882,884,887],{"class":615,"line":876},9,[613,878,879],{"class":627},"    v-if",[613,881,634],{"class":619},[613,883,637],{"class":619},[613,885,886],{"class":640},"!isLoading",[613,888,889],{"class":619},"\"\n",[613,891,893,896,898,900,903],{"class":615,"line":892},10,[613,894,895],{"class":627},"    :geometry",[613,897,634],{"class":619},[613,899,637],{"class":619},[613,901,902],{"class":640},"nodes.Mesh.geometry",[613,904,889],{"class":619},[613,906,908,911,913,915,918],{"class":615,"line":907},11,[613,909,910],{"class":627},"    :material",[613,912,634],{"class":619},[613,914,637],{"class":619},[613,916,917],{"class":640},"materials.coat",[613,919,889],{"class":619},[613,921,923,926,928,930,933],{"class":615,"line":922},12,[613,924,925],{"class":627},"    @click",[613,927,634],{"class":619},[613,929,637],{"class":619},[613,931,932],{"class":640},"onClick",[613,934,889],{"class":619},[613,936,938],{"class":615,"line":937},13,[613,939,940],{"class":619},"  />\n",[613,942,944,946,948],{"class":615,"line":943},14,[613,945,681],{"class":619},[613,947,700],{"class":623},[613,949,646],{"class":619},[496,951,952],{},"This is the right tool when you only want a couple of nodes out of a bigger file. For a whole\nmodel it stops scaling: you are hand-writing an element per node, re-reading the tree in Blender\nto find the names, and re-writing all of it when the artist re-exports.",[954,955,956],"prose-note",{},[496,957,958,750,960,962,963,967],{},[500,959,749],{},[500,961,753],{}," are keyed by the names in the file, so their shape is only known at\nruntime. Pass the shape as generics to get them typed, see ",[540,964,966],{"href":965},"#typed-nodes-and-materials","Typed nodes and materials"," below.",[592,969,971],{"id":970},"generate-a-component-with-the-cli","Generate a component with the CLI",[496,973,974,977],{},[500,975,976],{},"@tresjs/cli"," writes that element-per-node component for you, typed, from the model itself:",[603,979,983],{"className":980,"code":981,"language":982,"meta":609,"style":609},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx @tresjs/cli gltf public/models/mug.glb\n# ✔ src/models/Mug.gen.vue\n#   1 slot: Mug\n","bash",[500,984,985,1000,1006],{"__ignoreMap":609},[613,986,987,991,994,997],{"class":615,"line":616},[613,988,990],{"class":989},"sBMFI","npx",[613,992,993],{"class":640}," @tresjs/cli",[613,995,996],{"class":640}," gltf",[613,998,999],{"class":640}," public/models/mug.glb\n",[613,1001,1002],{"class":615,"line":649},[613,1003,1005],{"class":1004},"sHwdD","# ✔ src/models/Mug.gen.vue\n",[613,1007,1008],{"class":615,"line":678},[613,1009,1010],{"class":1004},"#   1 slot: Mug\n",[603,1012,1015],{"className":605,"code":1013,"filename":1014,"language":608,"meta":609,"style":609},"\u003Cscript setup lang=\"ts\">\n/*\nAuto-generated by @tresjs/cli. Do not edit.\nCommand: tres gltf public/models/mug.glb\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  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          \u003CTresMesh :geometry=\"nodes.Mesh.geometry\" :material=\"materials['4k-Metal-Worn']\" />\n          \u003CTresMesh :geometry=\"nodes.Mesh_1.geometry\" :material=\"materials.coat\" />\n        \u003C/TresGroup>\n      \u003C/slot>\n    \u003C/template>\n  \u003C/TresGroup>\n\u003C/template>\n","src/models/Mug.gen.vue",[500,1016,1017,1037,1042,1047,1052,1057,1062,1095,1113,1117,1128,1139,1148,1158,1167,1173,1178,1188,1204,1218,1223,1228,1237,1272,1281,1286,1346,1351,1373,1382,1387,1396,1418,1443,1478,1500,1534,1564,1574,1584,1594,1604],{"__ignoreMap":609},[613,1018,1019,1021,1023,1025,1027,1029,1031,1033,1035],{"class":615,"line":616},[613,1020,620],{"class":619},[613,1022,624],{"class":623},[613,1024,628],{"class":627},[613,1026,631],{"class":627},[613,1028,634],{"class":619},[613,1030,637],{"class":619},[613,1032,641],{"class":640},[613,1034,637],{"class":619},[613,1036,646],{"class":619},[613,1038,1039],{"class":615,"line":649},[613,1040,1041],{"class":1004},"/*\n",[613,1043,1044],{"class":615,"line":678},[613,1045,1046],{"class":1004},"Auto-generated by @tresjs/cli. Do not edit.\n",[613,1048,1049],{"class":615,"line":688},[613,1050,1051],{"class":1004},"Command: tres gltf public/models/mug.glb\n",[613,1053,1054],{"class":615,"line":695},[613,1055,1056],{"class":1004},"Override the named slots from the parent instead; regenerating keeps your overrides.\n",[613,1058,1059],{"class":615,"line":705},[613,1060,1061],{"class":1004},"*/\n",[613,1063,1064,1066,1069,1071,1074,1076,1079,1081,1084,1086,1088,1090,1093],{"class":615,"line":728},[613,1065,653],{"class":652},[613,1067,1068],{"class":652}," type",[613,1070,656],{"class":619},[613,1072,1073],{"class":659}," Group",[613,1075,815],{"class":619},[613,1077,1078],{"class":659}," Mesh",[613,1080,815],{"class":619},[613,1082,1083],{"class":659}," MeshStandardMaterial",[613,1085,663],{"class":619},[613,1087,666],{"class":652},[613,1089,669],{"class":619},[613,1091,1092],{"class":640},"three",[613,1094,675],{"class":619},[613,1096,1097,1099,1101,1103,1105,1107,1109,1111],{"class":615,"line":868},[613,1098,653],{"class":652},[613,1100,656],{"class":619},[613,1102,788],{"class":659},[613,1104,663],{"class":619},[613,1106,666],{"class":652},[613,1108,669],{"class":619},[613,1110,672],{"class":640},[613,1112,675],{"class":619},[613,1114,1115],{"class":615,"line":876},[613,1116,692],{"emptyLinePlaceholder":691},[613,1118,1119,1122,1125],{"class":615,"line":892},[613,1120,1121],{"class":627},"interface",[613,1123,1124],{"class":989}," ModelNodes",[613,1126,1127],{"class":619}," {\n",[613,1129,1130,1133,1136],{"class":615,"line":907},[613,1131,1132],{"class":623},"  Scene",[613,1134,1135],{"class":619},":",[613,1137,1138],{"class":989}," Group\n",[613,1140,1141,1144,1146],{"class":615,"line":922},[613,1142,1143],{"class":623},"  Mug",[613,1145,1135],{"class":619},[613,1147,1138],{"class":989},[613,1149,1150,1153,1155],{"class":615,"line":937},[613,1151,1152],{"class":623},"  Mesh",[613,1154,1135],{"class":619},[613,1156,1157],{"class":989}," Mesh\n",[613,1159,1160,1163,1165],{"class":615,"line":943},[613,1161,1162],{"class":623},"  Mesh_1",[613,1164,1135],{"class":619},[613,1166,1157],{"class":989},[613,1168,1170],{"class":615,"line":1169},15,[613,1171,1172],{"class":619},"}\n",[613,1174,1176],{"class":615,"line":1175},16,[613,1177,692],{"emptyLinePlaceholder":691},[613,1179,1181,1183,1186],{"class":615,"line":1180},17,[613,1182,1121],{"class":627},[613,1184,1185],{"class":989}," ModelMaterials",[613,1187,1127],{"class":619},[613,1189,1191,1194,1197,1199,1201],{"class":615,"line":1190},18,[613,1192,1193],{"class":619},"  '",[613,1195,1196],{"class":640},"4k-Metal-Worn",[613,1198,838],{"class":619},[613,1200,1135],{"class":619},[613,1202,1203],{"class":989}," MeshStandardMaterial\n",[613,1205,1207,1209,1212,1214,1216],{"class":615,"line":1206},19,[613,1208,1193],{"class":619},[613,1210,1211],{"class":640},"coat",[613,1213,838],{"class":619},[613,1215,1135],{"class":619},[613,1217,1203],{"class":989},[613,1219,1221],{"class":615,"line":1220},20,[613,1222,1172],{"class":619},[613,1224,1226],{"class":615,"line":1225},21,[613,1227,692],{"emptyLinePlaceholder":691},[613,1229,1231,1234],{"class":615,"line":1230},22,[613,1232,1233],{"class":832},"defineSlots",[613,1235,1236],{"class":619},"\u003C{\n",[613,1238,1240,1242,1245,1248,1252,1254,1256,1259,1261,1263,1266,1269],{"class":615,"line":1239},23,[613,1241,1143],{"class":623},[613,1243,1244],{"class":619},"?:",[613,1246,1247],{"class":619}," (",[613,1249,1251],{"class":1250},"sHdIc","props",[613,1253,1135],{"class":619},[613,1255,656],{"class":619},[613,1257,1258],{"class":623}," node",[613,1260,1135],{"class":619},[613,1262,1073],{"class":989},[613,1264,1265],{"class":619}," })",[613,1267,1268],{"class":627}," =>",[613,1270,1271],{"class":989}," any\n",[613,1273,1275,1278],{"class":615,"line":1274},24,[613,1276,1277],{"class":619},"}>",[613,1279,1280],{"class":659},"()\n",[613,1282,1284],{"class":615,"line":1283},25,[613,1285,692],{"emptyLinePlaceholder":691},[613,1287,1289,1291,1293,1295,1297,1299,1301,1303,1305,1307,1309,1311,1314,1316,1318,1321,1323,1325,1327,1329,1331,1333,1336,1338,1342,1344],{"class":615,"line":1288},26,[613,1290,807],{"class":627},[613,1292,656],{"class":619},[613,1294,812],{"class":659},[613,1296,815],{"class":619},[613,1298,818],{"class":659},[613,1300,815],{"class":619},[613,1302,823],{"class":659},[613,1304,826],{"class":619},[613,1306,829],{"class":619},[613,1308,788],{"class":832},[613,1310,620],{"class":619},[613,1312,1313],{"class":989},"ModelNodes",[613,1315,815],{"class":619},[613,1317,1185],{"class":989},[613,1319,1320],{"class":619},">",[613,1322,835],{"class":659},[613,1324,838],{"class":619},[613,1326,720],{"class":640},[613,1328,838],{"class":619},[613,1330,815],{"class":619},[613,1332,656],{"class":619},[613,1334,1335],{"class":623}," draco",[613,1337,1135],{"class":619},[613,1339,1341],{"class":1340},"sfNiH"," true",[613,1343,663],{"class":619},[613,1345,845],{"class":659},[613,1347,1349],{"class":615,"line":1348},27,[613,1350,692],{"emptyLinePlaceholder":691},[613,1352,1354,1357,1359,1362,1364,1366,1369,1371],{"class":615,"line":1353},28,[613,1355,1356],{"class":832},"defineExpose",[613,1358,835],{"class":659},[613,1360,1361],{"class":619},"{",[613,1363,812],{"class":659},[613,1365,815],{"class":619},[613,1367,1368],{"class":659}," materials ",[613,1370,826],{"class":619},[613,1372,845],{"class":659},[613,1374,1376,1378,1380],{"class":615,"line":1375},29,[613,1377,681],{"class":619},[613,1379,624],{"class":623},[613,1381,646],{"class":619},[613,1383,1385],{"class":615,"line":1384},30,[613,1386,692],{"emptyLinePlaceholder":691},[613,1388,1390,1392,1394],{"class":615,"line":1389},31,[613,1391,620],{"class":619},[613,1393,700],{"class":623},[613,1395,646],{"class":619},[613,1397,1399,1401,1404,1407,1409,1411,1414,1416],{"class":615,"line":1398},32,[613,1400,708],{"class":619},[613,1402,1403],{"class":623},"TresGroup",[613,1405,1406],{"class":627}," :dispose",[613,1408,634],{"class":619},[613,1410,637],{"class":619},[613,1412,1413],{"class":640},"null",[613,1415,637],{"class":619},[613,1417,646],{"class":619},[613,1419,1421,1424,1426,1429,1431,1433,1436,1439,1441],{"class":615,"line":1420},33,[613,1422,1423],{"class":619},"    \u003C",[613,1425,700],{"class":623},[613,1427,1428],{"class":652}," v-if",[613,1430,634],{"class":619},[613,1432,637],{"class":619},[613,1434,1435],{"class":619},"!",[613,1437,1438],{"class":659},"isLoading",[613,1440,637],{"class":619},[613,1442,646],{"class":619},[613,1444,1446,1449,1452,1455,1457,1459,1462,1464,1467,1469,1471,1474,1476],{"class":615,"line":1445},34,[613,1447,1448],{"class":619},"      \u003C",[613,1450,1451],{"class":623},"slot",[613,1453,1454],{"class":627}," name",[613,1456,634],{"class":619},[613,1458,637],{"class":619},[613,1460,1461],{"class":640},"Mug",[613,1463,637],{"class":619},[613,1465,1466],{"class":627}," :node",[613,1468,634],{"class":619},[613,1470,637],{"class":619},[613,1472,1473],{"class":640},"nodes.Mug",[613,1475,637],{"class":619},[613,1477,646],{"class":619},[613,1479,1481,1484,1486,1489,1491,1493,1496,1498],{"class":615,"line":1480},35,[613,1482,1483],{"class":619},"        \u003C",[613,1485,1403],{"class":623},[613,1487,1488],{"class":627}," :position",[613,1490,634],{"class":619},[613,1492,637],{"class":619},[613,1494,1495],{"class":640},"[0, 1, 0]",[613,1497,637],{"class":619},[613,1499,646],{"class":619},[613,1501,1503,1506,1509,1512,1514,1516,1518,1520,1523,1525,1527,1530,1532],{"class":615,"line":1502},36,[613,1504,1505],{"class":619},"          \u003C",[613,1507,1508],{"class":623},"TresMesh",[613,1510,1511],{"class":627}," :geometry",[613,1513,634],{"class":619},[613,1515,637],{"class":619},[613,1517,902],{"class":640},[613,1519,637],{"class":619},[613,1521,1522],{"class":627}," :material",[613,1524,634],{"class":619},[613,1526,637],{"class":619},[613,1528,1529],{"class":640},"materials['4k-Metal-Worn']",[613,1531,637],{"class":619},[613,1533,725],{"class":619},[613,1535,1537,1539,1541,1543,1545,1547,1550,1552,1554,1556,1558,1560,1562],{"class":615,"line":1536},37,[613,1538,1505],{"class":619},[613,1540,1508],{"class":623},[613,1542,1511],{"class":627},[613,1544,634],{"class":619},[613,1546,637],{"class":619},[613,1548,1549],{"class":640},"nodes.Mesh_1.geometry",[613,1551,637],{"class":619},[613,1553,1522],{"class":627},[613,1555,634],{"class":619},[613,1557,637],{"class":619},[613,1559,917],{"class":640},[613,1561,637],{"class":619},[613,1563,725],{"class":619},[613,1565,1567,1570,1572],{"class":615,"line":1566},38,[613,1568,1569],{"class":619},"        \u003C/",[613,1571,1403],{"class":623},[613,1573,646],{"class":619},[613,1575,1577,1580,1582],{"class":615,"line":1576},39,[613,1578,1579],{"class":619},"      \u003C/",[613,1581,1451],{"class":623},[613,1583,646],{"class":619},[613,1585,1587,1590,1592],{"class":615,"line":1586},40,[613,1588,1589],{"class":619},"    \u003C/",[613,1591,700],{"class":623},[613,1593,646],{"class":619},[613,1595,1597,1600,1602],{"class":615,"line":1596},41,[613,1598,1599],{"class":619},"  \u003C/",[613,1601,1403],{"class":623},[613,1603,646],{"class":619},[613,1605,1607,1609,1611],{"class":615,"line":1606},42,[613,1608,681],{"class":619},[613,1610,700],{"class":623},[613,1612,646],{"class":619},[496,1614,1615],{},"Import it like any other component:",[603,1617,1620],{"className":605,"code":1618,"filename":1619,"language":608,"meta":609,"style":609},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport Mug from '@/models/Mug.gen.vue'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[3, 2, 5]\" />\n    \u003CMug />\n    \u003CTresAmbientLight :intensity=\"1\" />\n  \u003C/TresCanvas>\n\u003C/template>\n","App.vue",[500,1621,1622,1642,1662,1679,1687,1691,1699,1708,1728,1736,1757,1765],{"__ignoreMap":609},[613,1623,1624,1626,1628,1630,1632,1634,1636,1638,1640],{"class":615,"line":616},[613,1625,620],{"class":619},[613,1627,624],{"class":623},[613,1629,628],{"class":627},[613,1631,631],{"class":627},[613,1633,634],{"class":619},[613,1635,637],{"class":619},[613,1637,641],{"class":640},[613,1639,637],{"class":619},[613,1641,646],{"class":619},[613,1643,1644,1646,1648,1651,1653,1655,1657,1660],{"class":615,"line":649},[613,1645,653],{"class":652},[613,1647,656],{"class":619},[613,1649,1650],{"class":659}," TresCanvas",[613,1652,663],{"class":619},[613,1654,666],{"class":652},[613,1656,669],{"class":619},[613,1658,1659],{"class":640},"@tresjs/core",[613,1661,675],{"class":619},[613,1663,1664,1666,1669,1672,1674,1677],{"class":615,"line":678},[613,1665,653],{"class":652},[613,1667,1668],{"class":659}," Mug ",[613,1670,1671],{"class":652},"from",[613,1673,669],{"class":619},[613,1675,1676],{"class":640},"@/models/Mug.gen.vue",[613,1678,675],{"class":619},[613,1680,1681,1683,1685],{"class":615,"line":688},[613,1682,681],{"class":619},[613,1684,624],{"class":623},[613,1686,646],{"class":619},[613,1688,1689],{"class":615,"line":695},[613,1690,692],{"emptyLinePlaceholder":691},[613,1692,1693,1695,1697],{"class":615,"line":705},[613,1694,620],{"class":619},[613,1696,700],{"class":623},[613,1698,646],{"class":619},[613,1700,1701,1703,1706],{"class":615,"line":728},[613,1702,708],{"class":619},[613,1704,1705],{"class":623},"TresCanvas",[613,1707,646],{"class":619},[613,1709,1710,1712,1715,1717,1719,1721,1724,1726],{"class":615,"line":868},[613,1711,1423],{"class":619},[613,1713,1714],{"class":623},"TresPerspectiveCamera",[613,1716,1488],{"class":627},[613,1718,634],{"class":619},[613,1720,637],{"class":619},[613,1722,1723],{"class":640},"[3, 2, 5]",[613,1725,637],{"class":619},[613,1727,725],{"class":619},[613,1729,1730,1732,1734],{"class":615,"line":876},[613,1731,1423],{"class":619},[613,1733,1461],{"class":623},[613,1735,725],{"class":619},[613,1737,1738,1740,1743,1746,1748,1750,1753,1755],{"class":615,"line":892},[613,1739,1423],{"class":619},[613,1741,1742],{"class":623},"TresAmbientLight",[613,1744,1745],{"class":627}," :intensity",[613,1747,634],{"class":619},[613,1749,637],{"class":619},[613,1751,1752],{"class":640},"1",[613,1754,637],{"class":619},[613,1756,725],{"class":619},[613,1758,1759,1761,1763],{"class":615,"line":907},[613,1760,1599],{"class":619},[613,1762,1705],{"class":623},[613,1764,646],{"class":619},[613,1766,1767,1769,1771],{"class":615,"line":922},[613,1768,681],{"class":619},[613,1770,700],{"class":623},[613,1772,646],{"class":619},[1774,1775,1777],"h3",{"id":1776},"overriding-a-node","Overriding a node",[496,1779,1780,1781,1784],{},"Every named node is a ",[500,1782,1783],{},"\u003Cslot>"," whose fallback is the generated markup, so you change one mesh\nfrom the parent without touching the generated file:",[603,1786,1788],{"className":605,"code":1787,"filename":1619,"language":608,"meta":609,"style":609},"\u003Ctemplate>\n  \u003CMug>\n    \u003Ctemplate #Mug=\"{ node }\">\n      \u003CTresMesh :geometry=\"node.geometry\" :material=\"hologram\" @click=\"onClick\" />\n    \u003C/template>\n  \u003C/Mug>\n\u003C/template>\n",[500,1789,1790,1798,1806,1832,1873,1881,1889],{"__ignoreMap":609},[613,1791,1792,1794,1796],{"class":615,"line":616},[613,1793,620],{"class":619},[613,1795,700],{"class":623},[613,1797,646],{"class":619},[613,1799,1800,1802,1804],{"class":615,"line":649},[613,1801,708],{"class":619},[613,1803,1461],{"class":623},[613,1805,646],{"class":619},[613,1807,1808,1810,1812,1815,1817,1819,1821,1823,1826,1828,1830],{"class":615,"line":678},[613,1809,1423],{"class":619},[613,1811,700],{"class":623},[613,1813,1814],{"class":619}," #",[613,1816,1461],{"class":627},[613,1818,634],{"class":619},[613,1820,637],{"class":619},[613,1822,1361],{"class":619},[613,1824,1825],{"class":659}," node ",[613,1827,826],{"class":619},[613,1829,637],{"class":619},[613,1831,646],{"class":619},[613,1833,1834,1836,1838,1840,1842,1844,1847,1849,1851,1853,1855,1858,1860,1863,1865,1867,1869,1871],{"class":615,"line":688},[613,1835,1448],{"class":619},[613,1837,1508],{"class":623},[613,1839,1511],{"class":627},[613,1841,634],{"class":619},[613,1843,637],{"class":619},[613,1845,1846],{"class":640},"node.geometry",[613,1848,637],{"class":619},[613,1850,1522],{"class":627},[613,1852,634],{"class":619},[613,1854,637],{"class":619},[613,1856,1857],{"class":640},"hologram",[613,1859,637],{"class":619},[613,1861,1862],{"class":627}," @click",[613,1864,634],{"class":619},[613,1866,637],{"class":619},[613,1868,932],{"class":640},[613,1870,637],{"class":619},[613,1872,725],{"class":619},[613,1874,1875,1877,1879],{"class":615,"line":695},[613,1876,1589],{"class":619},[613,1878,700],{"class":623},[613,1880,646],{"class":619},[613,1882,1883,1885,1887],{"class":615,"line":705},[613,1884,1599],{"class":619},[613,1886,1461],{"class":623},[613,1888,646],{"class":619},[613,1890,1891,1893,1895],{"class":615,"line":728},[613,1892,681],{"class":619},[613,1894,700],{"class":623},[613,1896,646],{"class":619},[496,1898,1899,1900,1904],{},"Regenerate after the artist re-exports and the override survives, because it never lived in the\ngenerated file. If the node is renamed, the override becomes a ",[1901,1902,1903],"strong",{},"type error"," instead of quietly\ndoing nothing at runtime.",[1906,1907,1908],"prose-warning",{},[496,1909,1910,1911,1914,1915,1918],{},"Treat ",[500,1912,1913],{},"*.gen.vue"," files as build output: edit the parent, not the generated file. The CLI refuses\nto overwrite a file it did not generate, so a hand-edited one needs ",[500,1916,1917],{},"--force"," to regenerate.",[1920,1921,1923],"read-more",{"to":1922},"https://docs.tresjs.org/cli/gltf",[496,1924,1925,1926,1928],{},"Full ",[500,1927,580],{}," reference: slots, animations, shadows, Draco and every flag.",[592,1930,966],{"id":1931},"typed-nodes-and-materials",[496,1933,1934,1936,1937,750,1939,1941],{},[500,1935,125],{}," takes two generics that type ",[500,1938,749],{},[500,1940,753],{},". The CLI writes them for you, but\nyou can also declare them by hand:",[603,1943,1946],{"className":1944,"code":1945,"language":641,"meta":609,"style":609},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import type { Mesh, MeshStandardMaterial } from 'three'\nimport { useGLTF } from '@tresjs/cientos'\n\ninterface ModelNodes { Body: Mesh }\ninterface ModelMaterials { Skin: MeshStandardMaterial }\n\nconst { nodes, materials } = useGLTF\u003CModelNodes, ModelMaterials>('/models/robot.glb')\n\nnodes.value.Body.geometry // Mesh, not any\n",[500,1947,1948,1972,1990,1994,2012,2029,2033,2072,2076],{"__ignoreMap":609},[613,1949,1950,1952,1954,1956,1958,1960,1962,1964,1966,1968,1970],{"class":615,"line":616},[613,1951,653],{"class":652},[613,1953,1068],{"class":652},[613,1955,656],{"class":619},[613,1957,1078],{"class":659},[613,1959,815],{"class":619},[613,1961,1083],{"class":659},[613,1963,663],{"class":619},[613,1965,666],{"class":652},[613,1967,669],{"class":619},[613,1969,1092],{"class":640},[613,1971,675],{"class":619},[613,1973,1974,1976,1978,1980,1982,1984,1986,1988],{"class":615,"line":649},[613,1975,653],{"class":652},[613,1977,656],{"class":619},[613,1979,788],{"class":659},[613,1981,663],{"class":619},[613,1983,666],{"class":652},[613,1985,669],{"class":619},[613,1987,672],{"class":640},[613,1989,675],{"class":619},[613,1991,1992],{"class":615,"line":678},[613,1993,692],{"emptyLinePlaceholder":691},[613,1995,1996,1998,2000,2002,2005,2007,2009],{"class":615,"line":688},[613,1997,1121],{"class":627},[613,1999,1124],{"class":989},[613,2001,656],{"class":619},[613,2003,2004],{"class":623}," Body",[613,2006,1135],{"class":619},[613,2008,1078],{"class":989},[613,2010,2011],{"class":619}," }\n",[613,2013,2014,2016,2018,2020,2023,2025,2027],{"class":615,"line":695},[613,2015,1121],{"class":627},[613,2017,1185],{"class":989},[613,2019,656],{"class":619},[613,2021,2022],{"class":623}," Skin",[613,2024,1135],{"class":619},[613,2026,1083],{"class":989},[613,2028,2011],{"class":619},[613,2030,2031],{"class":615,"line":705},[613,2032,692],{"emptyLinePlaceholder":691},[613,2034,2035,2037,2039,2041,2043,2045,2047,2049,2051,2053,2055,2057,2059,2061,2063,2065,2068,2070],{"class":615,"line":728},[613,2036,807],{"class":627},[613,2038,656],{"class":619},[613,2040,812],{"class":659},[613,2042,815],{"class":619},[613,2044,1368],{"class":659},[613,2046,826],{"class":619},[613,2048,829],{"class":619},[613,2050,788],{"class":832},[613,2052,620],{"class":619},[613,2054,1313],{"class":989},[613,2056,815],{"class":619},[613,2058,1185],{"class":989},[613,2060,1320],{"class":619},[613,2062,835],{"class":659},[613,2064,838],{"class":619},[613,2066,2067],{"class":640},"/models/robot.glb",[613,2069,838],{"class":619},[613,2071,845],{"class":659},[613,2073,2074],{"class":615,"line":868},[613,2075,692],{"emptyLinePlaceholder":691},[613,2077,2078,2080,2083,2086,2088,2091,2093,2096],{"class":615,"line":876},[613,2079,749],{"class":659},[613,2081,2082],{"class":619},".",[613,2084,2085],{"class":659},"value",[613,2087,2082],{"class":619},[613,2089,2090],{"class":659},"Body",[613,2092,2082],{"class":619},[613,2094,2095],{"class":659},"geometry ",[613,2097,2098],{"class":1004},"// Mesh, not any\n",[954,2100,2101],{},[496,2102,2103],{},"The names come from the file at runtime, so these interfaces are a claim about the model, not a\nproof. That is exactly why generating them from the model is worth it.",[592,2105,2107],{"id":2106},"animated-models","Animated models",[496,2109,2110,2111,2114,2115,2119],{},"Clips live on the loaded ",[500,2112,2113],{},"state",", and ",[540,2116,2117],{"href":480},[500,2118,479],{}," turns\nthem into actions:",[603,2121,2124],{"className":605,"code":2122,"filename":2123,"language":608,"meta":609,"style":609},"\u003Cscript setup lang=\"ts\">\nimport { useAnimations, useGLTF } from '@tresjs/cientos'\nimport { computed, ref, watch } from 'vue'\n\nconst { state, nodes, isLoading } = useGLTF('/models/knight.glb')\n\nconst modelRef = ref()\nconst animations = computed(() => state.value?.animations ?? [])\nconst { actions } = useAnimations(animations, modelRef)\n\nwatch(actions, current => current.Idle?.play())\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresGroup ref=\"modelRef\">\n    \u003Cprimitive v-if=\"!isLoading\" :object=\"nodes.Rig\" />\n  \u003C/TresGroup>\n\u003C/template>\n","Knight.vue",[500,2125,2126,2146,2169,2198,2202,2236,2240,2253,2289,2312,2316,2346,2354,2358,2366,2385,2416,2424],{"__ignoreMap":609},[613,2127,2128,2130,2132,2134,2136,2138,2140,2142,2144],{"class":615,"line":616},[613,2129,620],{"class":619},[613,2131,624],{"class":623},[613,2133,628],{"class":627},[613,2135,631],{"class":627},[613,2137,634],{"class":619},[613,2139,637],{"class":619},[613,2141,641],{"class":640},[613,2143,637],{"class":619},[613,2145,646],{"class":619},[613,2147,2148,2150,2152,2155,2157,2159,2161,2163,2165,2167],{"class":615,"line":649},[613,2149,653],{"class":652},[613,2151,656],{"class":619},[613,2153,2154],{"class":659}," useAnimations",[613,2156,815],{"class":619},[613,2158,788],{"class":659},[613,2160,663],{"class":619},[613,2162,666],{"class":652},[613,2164,669],{"class":619},[613,2166,672],{"class":640},[613,2168,675],{"class":619},[613,2170,2171,2173,2175,2178,2180,2183,2185,2188,2190,2192,2194,2196],{"class":615,"line":678},[613,2172,653],{"class":652},[613,2174,656],{"class":619},[613,2176,2177],{"class":659}," computed",[613,2179,815],{"class":619},[613,2181,2182],{"class":659}," ref",[613,2184,815],{"class":619},[613,2186,2187],{"class":659}," watch",[613,2189,663],{"class":619},[613,2191,666],{"class":652},[613,2193,669],{"class":619},[613,2195,608],{"class":640},[613,2197,675],{"class":619},[613,2199,2200],{"class":615,"line":688},[613,2201,692],{"emptyLinePlaceholder":691},[613,2203,2204,2206,2208,2211,2213,2215,2217,2219,2221,2223,2225,2227,2229,2232,2234],{"class":615,"line":695},[613,2205,807],{"class":627},[613,2207,656],{"class":619},[613,2209,2210],{"class":659}," state",[613,2212,815],{"class":619},[613,2214,812],{"class":659},[613,2216,815],{"class":619},[613,2218,823],{"class":659},[613,2220,826],{"class":619},[613,2222,829],{"class":619},[613,2224,788],{"class":832},[613,2226,835],{"class":659},[613,2228,838],{"class":619},[613,2230,2231],{"class":640},"/models/knight.glb",[613,2233,838],{"class":619},[613,2235,845],{"class":659},[613,2237,2238],{"class":615,"line":705},[613,2239,692],{"emptyLinePlaceholder":691},[613,2241,2242,2244,2247,2249,2251],{"class":615,"line":728},[613,2243,807],{"class":627},[613,2245,2246],{"class":659}," modelRef ",[613,2248,634],{"class":619},[613,2250,2182],{"class":832},[613,2252,1280],{"class":659},[613,2254,2255,2257,2260,2262,2264,2266,2269,2271,2273,2275,2277,2280,2283,2286],{"class":615,"line":868},[613,2256,807],{"class":627},[613,2258,2259],{"class":659}," animations ",[613,2261,634],{"class":619},[613,2263,2177],{"class":832},[613,2265,835],{"class":659},[613,2267,2268],{"class":619},"()",[613,2270,1268],{"class":627},[613,2272,2210],{"class":659},[613,2274,2082],{"class":619},[613,2276,2085],{"class":659},[613,2278,2279],{"class":619},"?.",[613,2281,2282],{"class":659},"animations ",[613,2284,2285],{"class":619},"??",[613,2287,2288],{"class":659}," [])\n",[613,2290,2291,2293,2295,2298,2300,2302,2304,2307,2309],{"class":615,"line":876},[613,2292,807],{"class":627},[613,2294,656],{"class":619},[613,2296,2297],{"class":659}," actions ",[613,2299,826],{"class":619},[613,2301,829],{"class":619},[613,2303,2154],{"class":832},[613,2305,2306],{"class":659},"(animations",[613,2308,815],{"class":619},[613,2310,2311],{"class":659}," modelRef)\n",[613,2313,2314],{"class":615,"line":892},[613,2315,692],{"emptyLinePlaceholder":691},[613,2317,2318,2321,2324,2326,2329,2331,2333,2335,2338,2340,2343],{"class":615,"line":907},[613,2319,2320],{"class":832},"watch",[613,2322,2323],{"class":659},"(actions",[613,2325,815],{"class":619},[613,2327,2328],{"class":1250}," current",[613,2330,1268],{"class":627},[613,2332,2328],{"class":659},[613,2334,2082],{"class":619},[613,2336,2337],{"class":659},"Idle",[613,2339,2279],{"class":619},[613,2341,2342],{"class":832},"play",[613,2344,2345],{"class":659},"())\n",[613,2347,2348,2350,2352],{"class":615,"line":922},[613,2349,681],{"class":619},[613,2351,624],{"class":623},[613,2353,646],{"class":619},[613,2355,2356],{"class":615,"line":937},[613,2357,692],{"emptyLinePlaceholder":691},[613,2359,2360,2362,2364],{"class":615,"line":943},[613,2361,620],{"class":619},[613,2363,700],{"class":623},[613,2365,646],{"class":619},[613,2367,2368,2370,2372,2374,2376,2378,2381,2383],{"class":615,"line":1169},[613,2369,708],{"class":619},[613,2371,1403],{"class":623},[613,2373,2182],{"class":627},[613,2375,634],{"class":619},[613,2377,637],{"class":619},[613,2379,2380],{"class":640},"modelRef",[613,2382,637],{"class":619},[613,2384,646],{"class":619},[613,2386,2387,2389,2392,2394,2396,2398,2400,2402,2405,2407,2409,2412,2414],{"class":615,"line":1175},[613,2388,1423],{"class":619},[613,2390,2391],{"class":623},"primitive",[613,2393,1428],{"class":627},[613,2395,634],{"class":619},[613,2397,637],{"class":619},[613,2399,886],{"class":640},[613,2401,637],{"class":619},[613,2403,2404],{"class":627}," :object",[613,2406,634],{"class":619},[613,2408,637],{"class":619},[613,2410,2411],{"class":640},"nodes.Rig",[613,2413,637],{"class":619},[613,2415,725],{"class":619},[613,2417,2418,2420,2422],{"class":615,"line":1180},[613,2419,1599],{"class":619},[613,2421,1403],{"class":623},[613,2423,646],{"class":619},[613,2425,2426,2428,2430],{"class":615,"line":1190},[613,2427,681],{"class":619},[613,2429,700],{"class":623},[613,2431,646],{"class":619},[496,2433,2434,2435,2438,2439,2442,2443,2446],{},"A generated component wires all of that up and exposes ",[500,2436,2437],{},"actions"," keyed by a union of the model's\nclip names, so ",[500,2440,2441],{},"actions.Idle"," type-checks and ",[500,2444,2445],{},"actions.Idl"," does not:",[603,2448,2450],{"className":605,"code":2449,"filename":1619,"language":608,"meta":609,"style":609},"\u003Cscript setup lang=\"ts\">\nimport { onMounted, ref } from 'vue'\nimport Knight from '@/models/Knight.gen.vue'\n\nconst knight = ref\u003CInstanceType\u003Ctypeof Knight>>()\n\nonMounted(() => knight.value?.actions.Idle?.play())\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CKnight ref=\"knight\" />\n\u003C/template>\n",[500,2451,2452,2472,2495,2511,2515,2542,2546,2578,2586,2590,2598,2618],{"__ignoreMap":609},[613,2453,2454,2456,2458,2460,2462,2464,2466,2468,2470],{"class":615,"line":616},[613,2455,620],{"class":619},[613,2457,624],{"class":623},[613,2459,628],{"class":627},[613,2461,631],{"class":627},[613,2463,634],{"class":619},[613,2465,637],{"class":619},[613,2467,641],{"class":640},[613,2469,637],{"class":619},[613,2471,646],{"class":619},[613,2473,2474,2476,2478,2481,2483,2485,2487,2489,2491,2493],{"class":615,"line":649},[613,2475,653],{"class":652},[613,2477,656],{"class":619},[613,2479,2480],{"class":659}," onMounted",[613,2482,815],{"class":619},[613,2484,2182],{"class":659},[613,2486,663],{"class":619},[613,2488,666],{"class":652},[613,2490,669],{"class":619},[613,2492,608],{"class":640},[613,2494,675],{"class":619},[613,2496,2497,2499,2502,2504,2506,2509],{"class":615,"line":678},[613,2498,653],{"class":652},[613,2500,2501],{"class":659}," Knight ",[613,2503,1671],{"class":652},[613,2505,669],{"class":619},[613,2507,2508],{"class":640},"@/models/Knight.gen.vue",[613,2510,675],{"class":619},[613,2512,2513],{"class":615,"line":688},[613,2514,692],{"emptyLinePlaceholder":691},[613,2516,2517,2519,2522,2524,2526,2528,2531,2534,2537,2540],{"class":615,"line":695},[613,2518,807],{"class":627},[613,2520,2521],{"class":659}," knight ",[613,2523,634],{"class":619},[613,2525,2182],{"class":832},[613,2527,620],{"class":619},[613,2529,2530],{"class":989},"InstanceType",[613,2532,2533],{"class":619},"\u003Ctypeof",[613,2535,2536],{"class":659}," Knight",[613,2538,2539],{"class":619},">>",[613,2541,1280],{"class":659},[613,2543,2544],{"class":615,"line":705},[613,2545,692],{"emptyLinePlaceholder":691},[613,2547,2548,2551,2553,2555,2557,2560,2562,2564,2566,2568,2570,2572,2574,2576],{"class":615,"line":728},[613,2549,2550],{"class":832},"onMounted",[613,2552,835],{"class":659},[613,2554,2268],{"class":619},[613,2556,1268],{"class":627},[613,2558,2559],{"class":659}," knight",[613,2561,2082],{"class":619},[613,2563,2085],{"class":659},[613,2565,2279],{"class":619},[613,2567,2437],{"class":659},[613,2569,2082],{"class":619},[613,2571,2337],{"class":659},[613,2573,2279],{"class":619},[613,2575,2342],{"class":832},[613,2577,2345],{"class":659},[613,2579,2580,2582,2584],{"class":615,"line":868},[613,2581,681],{"class":619},[613,2583,624],{"class":623},[613,2585,646],{"class":619},[613,2587,2588],{"class":615,"line":876},[613,2589,692],{"emptyLinePlaceholder":691},[613,2591,2592,2594,2596],{"class":615,"line":892},[613,2593,620],{"class":619},[613,2595,700],{"class":623},[613,2597,646],{"class":619},[613,2599,2600,2602,2605,2607,2609,2611,2614,2616],{"class":615,"line":907},[613,2601,708],{"class":619},[613,2603,2604],{"class":623},"Knight",[613,2606,2182],{"class":627},[613,2608,634],{"class":619},[613,2610,637],{"class":619},[613,2612,2613],{"class":640},"knight",[613,2615,637],{"class":619},[613,2617,725],{"class":619},[613,2619,2620,2622,2624],{"class":615,"line":922},[613,2621,681],{"class":619},[613,2623,700],{"class":623},[613,2625,646],{"class":619},[954,2627,2628],{},[496,2629,2630,2631,2634,2635,2638,2639,2641,2642,2645,2646,2649],{},"Keep the element carrying the animation ",[500,2632,2633],{},"ref"," mounted and gate its ",[1901,2636,2637],{},"children"," on loading. A\n",[500,2640,2633],{}," on a ",[500,2643,2644],{},"v-if","ed element is still ",[500,2647,2648],{},"undefined"," one flush after the clips land, and the mixer\nwould then be built with no root to bind against.",[592,2651,2653],{"id":2652},"draco-compressed-models","Draco-compressed models",[496,2655,2656,2657,2660,2661,2664],{},"Pass ",[500,2658,2659],{},"draco: true"," and the loader pulls the decoder from Google's CDN, or point ",[500,2662,2663],{},"decoderPath"," at\na local copy:",[603,2666,2668],{"className":1944,"code":2667,"language":641,"meta":609,"style":609},"const { state } = useGLTF('/models/mug.glb', { draco: true })\n",[500,2669,2670],{"__ignoreMap":609},[613,2671,2672,2674,2676,2679,2681,2683,2685,2687,2689,2691,2693,2695,2697,2699,2701,2703,2705],{"class":615,"line":616},[613,2673,807],{"class":627},[613,2675,656],{"class":619},[613,2677,2678],{"class":659}," state ",[613,2680,826],{"class":619},[613,2682,829],{"class":619},[613,2684,788],{"class":832},[613,2686,835],{"class":659},[613,2688,838],{"class":619},[613,2690,720],{"class":640},[613,2692,838],{"class":619},[613,2694,815],{"class":619},[613,2696,656],{"class":619},[613,2698,1335],{"class":623},[613,2700,1135],{"class":619},[613,2702,1341],{"class":1340},[613,2704,663],{"class":619},[613,2706,845],{"class":659},[496,2708,2709,2710,2713],{},"A Draco model renders nothing without it. The CLI detects compression while parsing and writes\n",[500,2711,2712],{},"{ draco: true }"," into the generated component for you.",[592,2715,2717],{"id":2716},"where-to-find-models","Where to find models",[2719,2720,2721,2731,2739],"ul",{},[2722,2723,2724,2730],"li",{},[540,2725,2729],{"href":2726,"rel":2727},"https://poly.pizza/",[2728],"nofollow","poly.pizza"," — free 3D models",[2722,2732,2733,2738],{},[540,2734,2737],{"href":2735,"rel":2736},"https://market.pmnd.rs/",[2728],"Pmndrs Market"," — free assets, curated",[2722,2740,2741,2746],{},[540,2742,2745],{"href":2743,"rel":2744},"https://kaylousberg.itch.io/",[2728],"KayKit"," — animated CC0 character packs",[2748,2749,2750],"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 .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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .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":609,"searchDepth":616,"depth":649,"links":2752},[2753,2754,2755,2758,2759,2760,2761],{"id":594,"depth":649,"text":595},{"id":740,"depth":649,"text":741},{"id":970,"depth":649,"text":971,"children":2756},[2757],{"id":1776,"depth":678,"text":1777},{"id":1931,"depth":649,"text":966},{"id":2106,"depth":649,"text":2107},{"id":2652,"depth":649,"text":2653},{"id":2716,"depth":649,"text":2717},"The three ways to bring a glTF model into a TresJS scene, and when to use each one.","md",null,{},{"title":19,"description":2762},"pvsscV-9of_TNqNpeb2TqdQDoeC8WHUrbK81vv_N_pE",[2769,2771],{"title":15,"path":16,"stem":17,"description":2770,"children":-1},"Learn how you can start to use cientos in your projects",{"title":23,"path":24,"stem":25,"description":2772,"children":-1},"Migration guide for cientos",1785400186655]