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