[{"data":1,"prerenderedAt":2886},["ShallowReactive",2],{"navigation":3,"\u002Fgetting-started\u002Floading-models":498,"\u002Fgetting-started\u002Floading-models-surround":2881},[4,26],{"title":5,"path":6,"stem":7,"children":8},"Getting Started","\u002Fgetting-started","1.getting-started\u002F1.index",[9,10,14,18,22],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"Installation Guide","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation",{"title":15,"path":16,"stem":17},"Usage","\u002Fgetting-started\u002Fusage","1.getting-started\u002F3.usage",{"title":19,"path":20,"stem":21},"Loading Models","\u002Fgetting-started\u002Floading-models","1.getting-started\u002F4.loading-models",{"title":23,"path":24,"stem":25},"Upgrade Guide","\u002Fgetting-started\u002Fupgrade-guide","1.getting-started\u002F5.upgrade-guide",{"title":27,"path":28,"stem":29,"children":30},"Api","\u002Fapi","2.api",[31,34,96,126,168,210,308,334,368,418,464],{"title":32,"path":28,"stem":33},"All","2.api\u002Findex",{"title":35,"path":36,"stem":37,"children":38},"Abstractions","\u002Fapi\u002Fabstractions","2.api\u002F1.abstractions\u002Findex",[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","\u002Fapi\u002Fabstractions\u002Falign","2.api\u002F1.abstractions\u002Falign",{"title":45,"path":46,"stem":47},"Billboard","\u002Fapi\u002Fabstractions\u002Fbillboard","2.api\u002F1.abstractions\u002Fbillboard",{"title":49,"path":50,"stem":51},"Camera Shake","\u002Fapi\u002Fabstractions\u002Fcamera-shake","2.api\u002F1.abstractions\u002Fcamera-shake",{"title":53,"path":54,"stem":55},"Decal","\u002Fapi\u002Fabstractions\u002Fdecal","2.api\u002F1.abstractions\u002Fdecal",{"title":57,"path":58,"stem":59},"Edges","\u002Fapi\u002Fabstractions\u002Fedges","2.api\u002F1.abstractions\u002Fedges",{"title":61,"path":62,"stem":63},"Fit","\u002Fapi\u002Fabstractions\u002Ffit","2.api\u002F1.abstractions\u002Ffit",{"title":65,"path":66,"stem":67},"Instances","\u002Fapi\u002Fabstractions\u002Finstances","2.api\u002F1.abstractions\u002Finstances",{"title":69,"path":70,"stem":71},"Levioso (Float)","\u002Fapi\u002Fabstractions\u002Flevioso","2.api\u002F1.abstractions\u002Flevioso",{"title":73,"path":74,"stem":75},"Mask","\u002Fapi\u002Fabstractions\u002Fmask","2.api\u002F1.abstractions\u002Fmask",{"title":77,"path":78,"stem":79},"Merged","\u002Fapi\u002Fabstractions\u002Fmerged","2.api\u002F1.abstractions\u002Fmerged",{"title":81,"path":82,"stem":83},"Outline","\u002Fapi\u002Fabstractions\u002Foutline","2.api\u002F1.abstractions\u002Foutline",{"title":85,"path":86,"stem":87},"Sampler","\u002Fapi\u002Fabstractions\u002Fsampler","2.api\u002F1.abstractions\u002Fsampler",{"title":89,"path":90,"stem":91},"ScreenSizer","\u002Fapi\u002Fabstractions\u002Fscreen-sizer","2.api\u002F1.abstractions\u002Fscreen-sizer",{"title":93,"path":94,"stem":95},"ScreenSpace","\u002Fapi\u002Fabstractions\u002Fscreen-space","2.api\u002F1.abstractions\u002Fscreen-space",{"title":97,"path":98,"stem":99,"children":100},"Controls","\u002Fapi\u002Fcontrols","2.api\u002F2.controls\u002Findex",[101,102,106,110,114,118,122],{"title":97,"path":98,"stem":99},{"title":103,"path":104,"stem":105},"Camera Controls","\u002Fapi\u002Fcontrols\u002Fcamera-controls","2.api\u002F2.controls\u002Fcamera-controls",{"title":107,"path":108,"stem":109},"Keyboard Controls","\u002Fapi\u002Fcontrols\u002Fkeyboard-controls","2.api\u002F2.controls\u002Fkeyboard-controls",{"title":111,"path":112,"stem":113},"Map Controls","\u002Fapi\u002Fcontrols\u002Fmap-controls","2.api\u002F2.controls\u002Fmap-controls",{"title":115,"path":116,"stem":117},"Orbit Controls","\u002Fapi\u002Fcontrols\u002Forbit-controls","2.api\u002F2.controls\u002Forbit-controls",{"title":119,"path":120,"stem":121},"PointerLock Controls","\u002Fapi\u002Fcontrols\u002Fpointer-lock-controls","2.api\u002F2.controls\u002Fpointer-lock-controls",{"title":123,"path":124,"stem":125},"Transform Controls","\u002Fapi\u002Fcontrols\u002Ftransform-controls","2.api\u002F2.controls\u002Ftransform-controls",{"title":127,"path":128,"stem":129,"children":130},"Loaders","\u002Fapi\u002Floaders","2.api\u002F3.loaders\u002Findex",[131,132,136,140,144,148,152,156,160,164],{"title":127,"path":128,"stem":129},{"title":133,"path":134,"stem":135},"useGLTF","\u002Fapi\u002Floaders\u002Fuse-gltf","2.api\u002F3.loaders\u002F1.use-gltf",{"title":137,"path":138,"stem":139},"GLTFModel","\u002Fapi\u002Floaders\u002Fgltf-model","2.api\u002F3.loaders\u002F2.gltf-model",{"title":141,"path":142,"stem":143},"useFBX","\u002Fapi\u002Floaders\u002Fuse-fbx","2.api\u002F3.loaders\u002F3.use-fbx",{"title":145,"path":146,"stem":147},"FBXModel","\u002Fapi\u002Floaders\u002Ffbx-model","2.api\u002F3.loaders\u002F4.fbx-model",{"title":149,"path":150,"stem":151},"useTexture","\u002Fapi\u002Floaders\u002Fuse-texture","2.api\u002F3.loaders\u002F5.use-texture",{"title":153,"path":154,"stem":155},"useTextures","\u002Fapi\u002Floaders\u002Fuse-textures","2.api\u002F3.loaders\u002F6.use-textures",{"title":157,"path":158,"stem":159},"useSVG","\u002Fapi\u002Floaders\u002Fuse-svg","2.api\u002F3.loaders\u002F7.use-svg",{"title":161,"path":162,"stem":163},"useProgress","\u002Fapi\u002Floaders\u002Fuse-progress","2.api\u002F3.loaders\u002Fuse-progress",{"title":165,"path":166,"stem":167},"useVideoTexture","\u002Fapi\u002Floaders\u002Fuse-video-texture","2.api\u002F3.loaders\u002Fuse-video-texture",{"title":169,"path":170,"stem":171,"children":172},"Materials","\u002Fapi\u002Fmaterials","2.api\u002F4.materials\u002Findex",[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","\u002Fapi\u002Fmaterials\u002Fcustom-shader-material","2.api\u002F4.materials\u002Fcustom-shader-material",{"title":179,"path":180,"stem":181},"Mesh Glass Material","\u002Fapi\u002Fmaterials\u002Fglass-material","2.api\u002F4.materials\u002Fglass-material",{"title":183,"path":184,"stem":185},"Holographic Material","\u002Fapi\u002Fmaterials\u002Fholographic-material","2.api\u002F4.materials\u002Fholographic-material",{"title":187,"path":188,"stem":189},"Mesh Discard Material","\u002Fapi\u002Fmaterials\u002Fmesh-discard-material","2.api\u002F4.materials\u002Fmesh-discard-material",{"title":191,"path":192,"stem":193},"Mesh Portal Material","\u002Fapi\u002Fmaterials\u002Fmesh-portal-material","2.api\u002F4.materials\u002Fmesh-portal-material",{"title":195,"path":196,"stem":197},"Mesh Reflection Material","\u002Fapi\u002Fmaterials\u002Fmesh-reflection-material","2.api\u002F4.materials\u002Fmesh-reflection-material",{"title":199,"path":200,"stem":201},"Mesh Transmission Material","\u002Fapi\u002Fmaterials\u002Fmesh-transmission-material","2.api\u002F4.materials\u002Fmesh-transmission-material",{"title":203,"path":204,"stem":205},"Point Material","\u002Fapi\u002Fmaterials\u002Fpoint-material","2.api\u002F4.materials\u002Fpoint-material",{"title":207,"path":208,"stem":209},"Wobble Material","\u002Fapi\u002Fmaterials\u002Fwobble-material","2.api\u002F4.materials\u002Fwobble-material",{"title":211,"path":212,"stem":213,"children":214},"Shapes","\u002Fapi\u002Fshapes","2.api\u002F5.shapes\u002Findex",[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","\u002Fapi\u002Fshapes\u002Fbox","2.api\u002F5.shapes\u002Fbox",{"title":221,"path":222,"stem":223},"CatmullRomCurve3","\u002Fapi\u002Fshapes\u002Fcatmullromcurve3","2.api\u002F5.shapes\u002Fcatmullromcurve3",{"title":225,"path":226,"stem":227},"Circle","\u002Fapi\u002Fshapes\u002Fcircle","2.api\u002F5.shapes\u002Fcircle",{"title":229,"path":230,"stem":231},"Cone","\u002Fapi\u002Fshapes\u002Fcone","2.api\u002F5.shapes\u002Fcone",{"title":233,"path":234,"stem":235},"Cubic Bezier Line","\u002Fapi\u002Fshapes\u002Fcubic-bezier-line","2.api\u002F5.shapes\u002Fcubic-bezier-line",{"title":237,"path":238,"stem":239},"Cylinder","\u002Fapi\u002Fshapes\u002Fcylinder","2.api\u002F5.shapes\u002Fcylinder",{"title":241,"path":242,"stem":243},"Dodecahedron","\u002Fapi\u002Fshapes\u002Fdodecahedron","2.api\u002F5.shapes\u002Fdodecahedron",{"title":245,"path":246,"stem":247},"Grid","\u002Fapi\u002Fshapes\u002Fgrid","2.api\u002F5.shapes\u002Fgrid",{"title":249,"path":250,"stem":251},"Icosahedron","\u002Fapi\u002Fshapes\u002Ficosahedron","2.api\u002F5.shapes\u002Ficosahedron",{"title":253,"path":254,"stem":255},"Line2","\u002Fapi\u002Fshapes\u002Fline2","2.api\u002F5.shapes\u002Fline2",{"title":257,"path":258,"stem":259},"Octahedron","\u002Fapi\u002Fshapes\u002Foctahedron","2.api\u002F5.shapes\u002Foctahedron",{"title":261,"path":262,"stem":263},"Plane","\u002Fapi\u002Fshapes\u002Fplane","2.api\u002F5.shapes\u002Fplane",{"title":265,"path":266,"stem":267},"Quadratic Bezier Line","\u002Fapi\u002Fshapes\u002Fquadratic-bezier-line","2.api\u002F5.shapes\u002Fquadratic-bezier-line",{"title":269,"path":270,"stem":271},"Ring","\u002Fapi\u002Fshapes\u002Fring","2.api\u002F5.shapes\u002Fring",{"title":273,"path":274,"stem":275},"Rounded Box","\u002Fapi\u002Fshapes\u002Frounded-box","2.api\u002F5.shapes\u002Frounded-box",{"title":277,"path":278,"stem":279},"Rounded Plane","\u002Fapi\u002Fshapes\u002Frounded-plane","2.api\u002F5.shapes\u002Frounded-plane",{"title":281,"path":282,"stem":283},"Screen Quad","\u002Fapi\u002Fshapes\u002Fscreen-quad","2.api\u002F5.shapes\u002Fscreen-quad",{"title":285,"path":286,"stem":287},"Sphere","\u002Fapi\u002Fshapes\u002Fsphere","2.api\u002F5.shapes\u002Fsphere",{"title":289,"path":290,"stem":291},"Superformula","\u002Fapi\u002Fshapes\u002Fsuperformula","2.api\u002F5.shapes\u002Fsuperformula",{"title":293,"path":294,"stem":295},"Tetrahedron","\u002Fapi\u002Fshapes\u002Ftetrahedron","2.api\u002F5.shapes\u002Ftetrahedron",{"title":297,"path":298,"stem":299},"Torus","\u002Fapi\u002Fshapes\u002Ftorus","2.api\u002F5.shapes\u002Ftorus",{"title":301,"path":302,"stem":303},"Torus Knot","\u002Fapi\u002Fshapes\u002Ftorus-knot","2.api\u002F5.shapes\u002Ftorus-knot",{"title":305,"path":306,"stem":307},"Tube","\u002Fapi\u002Fshapes\u002Ftube","2.api\u002F5.shapes\u002Ftube",{"title":309,"path":310,"stem":311,"children":312},"Debug\u002FPerformance","\u002Fapi\u002Fdebug-performance","2.api\u002F6.debug-performance\u002Findex",[313,314,318,322,326,330],{"title":309,"path":310,"stem":311},{"title":315,"path":316,"stem":317},"Helper","\u002Fapi\u002Fdebug-performance\u002Fhelper","2.api\u002F6.debug-performance\u002Fhelper",{"title":319,"path":320,"stem":321},"LOD","\u002Fapi\u002Fdebug-performance\u002Flod","2.api\u002F6.debug-performance\u002Flod",{"title":323,"path":324,"stem":325},"Stats","\u002Fapi\u002Fdebug-performance\u002Fstats","2.api\u002F6.debug-performance\u002Fstats",{"title":327,"path":328,"stem":329},"StatsGl","\u002Fapi\u002Fdebug-performance\u002Fstats-gl","2.api\u002F6.debug-performance\u002Fstats-gl",{"title":331,"path":332,"stem":333},"useBVH","\u002Fapi\u002Fdebug-performance\u002Fuse-bvh","2.api\u002F6.debug-performance\u002Fuse-bvh",{"title":335,"path":336,"stem":337,"children":338},"Light\u002FShadow","\u002Fapi\u002Flight-shadow","2.api\u002F7.light-shadow\u002Findex",[339,340,344,348,352,356,360,364],{"title":335,"path":336,"stem":337},{"title":341,"path":342,"stem":343},"Accumulative Shadows","\u002Fapi\u002Flight-shadow\u002Faccumulative-shadows","2.api\u002F7.light-shadow\u002Faccumulative-shadows",{"title":345,"path":346,"stem":347},"Bake Shadows","\u002Fapi\u002Flight-shadow\u002Fbake-shadows","2.api\u002F7.light-shadow\u002Fbake-shadows",{"title":349,"path":350,"stem":351},"Circle Shadow","\u002Fapi\u002Flight-shadow\u002Fcircle-shadow","2.api\u002F7.light-shadow\u002Fcircle-shadow",{"title":353,"path":354,"stem":355},"Contact Shadows","\u002Fapi\u002Flight-shadow\u002Fcontact-shadows","2.api\u002F7.light-shadow\u002Fcontact-shadows",{"title":357,"path":358,"stem":359},"Lensflare","\u002Fapi\u002Flight-shadow\u002Flensflare","2.api\u002F7.light-shadow\u002Flensflare",{"title":361,"path":362,"stem":363},"Randomized Lights","\u002Fapi\u002Flight-shadow\u002Frandomized-lights","2.api\u002F7.light-shadow\u002Frandomized-lights",{"title":365,"path":366,"stem":367},"Soft Shadows","\u002Fapi\u002Flight-shadow\u002Fsoft-shadows","2.api\u002F7.light-shadow\u002Fsoft-shadows",{"title":369,"path":370,"stem":371,"children":372},"Staging","\u002Fapi\u002Fstaging","2.api\u002F8.staging\u002Findex",[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","\u002Fapi\u002Fstaging\u002Fenvironment","2.api\u002F8.staging\u002F1.environment",{"title":379,"path":380,"stem":381},"useEnvironment","\u002Fapi\u002Fstaging\u002Fuse-environment","2.api\u002F8.staging\u002F2.use-environment",{"title":383,"path":384,"stem":385},"Lightformer","\u002Fapi\u002Fstaging\u002Flightformer","2.api\u002F8.staging\u002F3.lightformer",{"title":387,"path":388,"stem":389},"Backdrop","\u002Fapi\u002Fstaging\u002Fbackdrop","2.api\u002F8.staging\u002Fbackdrop",{"title":391,"path":392,"stem":393},"Ocean","\u002Fapi\u002Fstaging\u002Focean","2.api\u002F8.staging\u002Focean",{"title":395,"path":396,"stem":397},"Precipitation","\u002Fapi\u002Fstaging\u002Fprecipitation","2.api\u002F8.staging\u002Fprecipitation",{"title":399,"path":400,"stem":401},"Sky","\u002Fapi\u002Fstaging\u002Fsky","2.api\u002F8.staging\u002Fsky",{"title":403,"path":404,"stem":405},"Smoke","\u002Fapi\u002Fstaging\u002Fsmoke","2.api\u002F8.staging\u002Fsmoke",{"title":407,"path":408,"stem":409},"Sparkles","\u002Fapi\u002Fstaging\u002Fsparkles","2.api\u002F8.staging\u002Fsparkles",{"title":411,"path":412,"stem":413},"Stage","\u002Fapi\u002Fstaging\u002Fstage","2.api\u002F8.staging\u002Fstage",{"title":415,"path":416,"stem":417},"Stars","\u002Fapi\u002Fstaging\u002Fstars","2.api\u002F8.staging\u002Fstars",{"title":419,"path":420,"stem":421,"children":422},"Objects","\u002Fapi\u002Fobjects","2.api\u002F9.objects\u002Findex",[423,424,428,432,436,440,444,448,452,456,460],{"title":419,"path":420,"stem":421},{"title":425,"path":426,"stem":427},"AnimatedSprite","\u002Fapi\u002Fobjects\u002Fanimated-sprite","2.api\u002F9.objects\u002Fanimated-sprite",{"title":429,"path":430,"stem":431},"CubeCamera","\u002Fapi\u002Fobjects\u002Fcube-camera","2.api\u002F9.objects\u002Fcube-camera",{"title":433,"path":434,"stem":435},"Fbo","\u002Fapi\u002Fobjects\u002Ffbo","2.api\u002F9.objects\u002Ffbo",{"title":437,"path":438,"stem":439},"GradientTexture","\u002Fapi\u002Fobjects\u002Fgradient-texture","2.api\u002F9.objects\u002Fgradient-texture",{"title":441,"path":442,"stem":443},"HTML","\u002Fapi\u002Fobjects\u002Fhtml","2.api\u002F9.objects\u002Fhtml",{"title":445,"path":446,"stem":447},"Image","\u002Fapi\u002Fobjects\u002Fimage","2.api\u002F9.objects\u002Fimage",{"title":449,"path":450,"stem":451},"MarchingCubes","\u002Fapi\u002Fobjects\u002Fmarching-cubes","2.api\u002F9.objects\u002Fmarching-cubes",{"title":453,"path":454,"stem":455},"Reflector","\u002Fapi\u002Fobjects\u002Freflector","2.api\u002F9.objects\u002Freflector",{"title":457,"path":458,"stem":459},"Refractor","\u002Fapi\u002Fobjects\u002Frefractor","2.api\u002F9.objects\u002Frefractor",{"title":461,"path":462,"stem":463},"Text3D","\u002Fapi\u002Fobjects\u002Ftext-3d","2.api\u002F9.objects\u002Ftext-3d",{"title":465,"path":466,"stem":467,"children":468},"Miscellaneous","\u002Fapi\u002Fmiscellaneous","2.api\u002Fmiscellaneous\u002Findex",[469,470,474,478,482,486,490,494],{"title":465,"path":466,"stem":467},{"title":471,"path":472,"stem":473},"Bounds","\u002Fapi\u002Fmiscellaneous\u002Fbounds","2.api\u002Fmiscellaneous\u002Fbounds",{"title":475,"path":476,"stem":477},"GlobalAudio","\u002Fapi\u002Fmiscellaneous\u002Fglobal-audio","2.api\u002Fmiscellaneous\u002Fglobal-audio",{"title":479,"path":480,"stem":481},"MouseParallax","\u002Fapi\u002Fmiscellaneous\u002Fmouse-parallax","2.api\u002Fmiscellaneous\u002Fmouse-parallax",{"title":483,"path":484,"stem":485},"PositionalAudio","\u002Fapi\u002Fmiscellaneous\u002Fpositional-audio","2.api\u002Fmiscellaneous\u002Fpositional-audio",{"title":487,"path":488,"stem":489},"useAnimations","\u002Fapi\u002Fmiscellaneous\u002Fuse-animations","2.api\u002Fmiscellaneous\u002Fuse-animations",{"title":491,"path":492,"stem":493},"useGLTFExporter","\u002Fapi\u002Fmiscellaneous\u002Fuse-gltf-exporter","2.api\u002Fmiscellaneous\u002Fuse-gltf-exporter",{"title":495,"path":496,"stem":497},"useIntersect","\u002Fapi\u002Fmiscellaneous\u002Fuse-intersect","2.api\u002Fmiscellaneous\u002Fuse-intersect",{"id":499,"title":19,"body":500,"description":2875,"extension":2876,"links":2877,"meta":2878,"navigation":699,"path":20,"seo":2879,"stem":21,"__hash__":2880},"docs\u002F1.getting-started\u002F4.loading-models.md",{"type":501,"value":502,"toc":2864},"minimark",[503,516,599,604,610,743,746,750,763,982,985,1000,1004,1010,1043,1699,1702,1876,1881,1888,2010,2018,2032,2042,2045,2055,2211,2216,2220,2232,2545,2560,2739,2763,2767,2778,2820,2827,2831,2860],[504,505,506,507,511,512,515],"p",{},"Cientos gives you three ways to get a ",[508,509,510],"code",{},".glb","\u002F",[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 \u002F>",[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\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGLTFModel path=\"\u002Fmodels\u002Fmug.glb\" \u002F>\n\u003C\u002Ftemplate>\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\u002Fcientos",[621,682,683],{"class":627},"'\n",[621,685,687,690,692],{"class":623,"line":686},3,[621,688,689],{"class":627},"\u003C\u002F",[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},"\u002Fmodels\u002Fmug.glb",[621,730,645],{"class":627},[621,732,733],{"class":627}," \u002F>\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\u002Fcientos'\n\nconst { nodes, materials, isLoading } = useGLTF('\u002Fmodels\u002Fmug.glb')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTresMesh\n    v-if=\"!isLoading\"\n    :geometry=\"nodes.Mesh.geometry\"\n    :material=\"materials.coat\"\n    @click=\"onClick\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[508,767,768,788,807,811,854,862,866,874,882,901,928,949,967,973],{"__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,898],{"class":623,"line":884},9,[621,886,887],{"class":660},"    v-if",[621,889,642],{"class":627},[621,891,645],{"class":627},[621,893,894],{"class":627},"!",[621,896,897],{"class":667},"isLoading",[621,899,900],{"class":627},"\"\n",[621,902,904,907,910,912,914,916,919,922,924,926],{"class":623,"line":903},10,[621,905,906],{"class":627},"    :",[621,908,909],{"class":635},"geometry",[621,911,642],{"class":627},[621,913,645],{"class":627},[621,915,757],{"class":667},[621,917,918],{"class":627},".",[621,920,921],{"class":667},"Mesh",[621,923,918],{"class":627},[621,925,909],{"class":667},[621,927,900],{"class":627},[621,929,931,933,936,938,940,942,944,947],{"class":623,"line":930},11,[621,932,906],{"class":627},[621,934,935],{"class":635},"material",[621,937,642],{"class":627},[621,939,645],{"class":627},[621,941,761],{"class":667},[621,943,918],{"class":627},[621,945,946],{"class":667},"coat",[621,948,900],{"class":627},[621,950,952,955,958,960,962,965],{"class":623,"line":951},12,[621,953,954],{"class":627},"    @",[621,956,957],{"class":635},"click",[621,959,642],{"class":627},[621,961,645],{"class":627},[621,963,964],{"class":667},"onClick",[621,966,900],{"class":627},[621,968,970],{"class":623,"line":969},13,[621,971,972],{"class":627},"  \u002F>\n",[621,974,976,978,980],{"class":623,"line":975},14,[621,977,689],{"class":627},[621,979,708],{"class":631},[621,981,654],{"class":627},[504,983,984],{},"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.",[986,987,988],"prose-note",{},[504,989,990,758,992,994,995,999],{},[508,991,757],{},[508,993,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,996,998],{"href":997},"#typed-nodes-and-materials","Typed nodes and materials"," below.",[600,1001,1003],{"id":1002},"generate-a-component-with-the-cli","Generate a component with the CLI",[504,1005,1006,1009],{},[508,1007,1008],{},"@tresjs\u002Fcli"," writes that element-per-node component for you, typed, from the model itself:",[611,1011,1015],{"className":1012,"code":1013,"language":1014,"meta":617,"style":617},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx @tresjs\u002Fcli gltf public\u002Fmodels\u002Fmug.glb\n# ✔ src\u002Fmodels\u002FMug.gen.vue\n#   1 slot: Mug\n","bash",[508,1016,1017,1032,1038],{"__ignoreMap":617},[621,1018,1019,1023,1026,1029],{"class":623,"line":624},[621,1020,1022],{"class":1021},"sBMFI","npx",[621,1024,1025],{"class":648}," @tresjs\u002Fcli",[621,1027,1028],{"class":648}," gltf",[621,1030,1031],{"class":648}," public\u002Fmodels\u002Fmug.glb\n",[621,1033,1034],{"class":623,"line":657},[621,1035,1037],{"class":1036},"sHwdD","# ✔ src\u002Fmodels\u002FMug.gen.vue\n",[621,1039,1040],{"class":623,"line":686},[621,1041,1042],{"class":1036},"#   1 slot: Mug\n",[611,1044,1047],{"className":613,"code":1045,"filename":1046,"language":616,"meta":617,"style":617},"\u003Cscript setup lang=\"ts\">\n\u002F*\nAuto-generated by @tresjs\u002Fcli. Do not edit.\nCommand: tres gltf public\u002Fmodels\u002Fmug.glb\nOverride the named slots from the parent instead; regenerating keeps your overrides.\n*\u002F\nimport type { Group, Mesh, MeshStandardMaterial } from 'three'\nimport { useGLTF } from '@tresjs\u002Fcientos'\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>('\u002Fmodels\u002Fmug.glb', { draco: true })\n\ndefineExpose({ nodes, materials })\n\u003C\u002Fscript>\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']\" \u002F>\n          \u003CTresMesh :geometry=\"nodes.Mesh_1.geometry\" :material=\"materials.coat\" \u002F>\n        \u003C\u002FTresGroup>\n      \u003C\u002Fslot>\n    \u003C\u002Ftemplate>\n  \u003C\u002FTresGroup>\n\u003C\u002Ftemplate>\n","src\u002Fmodels\u002FMug.gen.vue",[508,1048,1049,1069,1074,1079,1084,1089,1094,1127,1145,1149,1160,1171,1180,1190,1199,1205,1210,1220,1236,1249,1254,1259,1268,1303,1312,1317,1377,1382,1404,1413,1418,1427,1452,1475,1510,1551,1604,1650,1660,1670,1680,1690],{"__ignoreMap":617},[621,1050,1051,1053,1055,1057,1059,1061,1063,1065,1067],{"class":623,"line":624},[621,1052,628],{"class":627},[621,1054,632],{"class":631},[621,1056,636],{"class":635},[621,1058,639],{"class":635},[621,1060,642],{"class":627},[621,1062,645],{"class":627},[621,1064,649],{"class":648},[621,1066,645],{"class":627},[621,1068,654],{"class":627},[621,1070,1071],{"class":623,"line":657},[621,1072,1073],{"class":1036},"\u002F*\n",[621,1075,1076],{"class":623,"line":686},[621,1077,1078],{"class":1036},"Auto-generated by @tresjs\u002Fcli. Do not edit.\n",[621,1080,1081],{"class":623,"line":696},[621,1082,1083],{"class":1036},"Command: tres gltf public\u002Fmodels\u002Fmug.glb\n",[621,1085,1086],{"class":623,"line":703},[621,1087,1088],{"class":1036},"Override the named slots from the parent instead; regenerating keeps your overrides.\n",[621,1090,1091],{"class":623,"line":713},[621,1092,1093],{"class":1036},"*\u002F\n",[621,1095,1096,1098,1101,1103,1106,1108,1111,1113,1116,1118,1120,1122,1125],{"class":623,"line":736},[621,1097,661],{"class":660},[621,1099,1100],{"class":660}," type",[621,1102,664],{"class":627},[621,1104,1105],{"class":667}," Group",[621,1107,823],{"class":627},[621,1109,1110],{"class":667}," Mesh",[621,1112,823],{"class":627},[621,1114,1115],{"class":667}," MeshStandardMaterial",[621,1117,671],{"class":627},[621,1119,674],{"class":660},[621,1121,677],{"class":627},[621,1123,1124],{"class":648},"three",[621,1126,683],{"class":627},[621,1128,1129,1131,1133,1135,1137,1139,1141,1143],{"class":623,"line":876},[621,1130,661],{"class":660},[621,1132,664],{"class":627},[621,1134,796],{"class":667},[621,1136,671],{"class":627},[621,1138,674],{"class":660},[621,1140,677],{"class":627},[621,1142,680],{"class":648},[621,1144,683],{"class":627},[621,1146,1147],{"class":623,"line":884},[621,1148,700],{"emptyLinePlaceholder":699},[621,1150,1151,1154,1157],{"class":623,"line":903},[621,1152,1153],{"class":635},"interface",[621,1155,1156],{"class":1021}," ModelNodes",[621,1158,1159],{"class":627}," {\n",[621,1161,1162,1165,1168],{"class":623,"line":930},[621,1163,1164],{"class":631},"  Scene",[621,1166,1167],{"class":627},":",[621,1169,1170],{"class":1021}," Group\n",[621,1172,1173,1176,1178],{"class":623,"line":951},[621,1174,1175],{"class":631},"  Mug",[621,1177,1167],{"class":627},[621,1179,1170],{"class":1021},[621,1181,1182,1185,1187],{"class":623,"line":969},[621,1183,1184],{"class":631},"  Mesh",[621,1186,1167],{"class":627},[621,1188,1189],{"class":1021}," Mesh\n",[621,1191,1192,1195,1197],{"class":623,"line":975},[621,1193,1194],{"class":631},"  Mesh_1",[621,1196,1167],{"class":627},[621,1198,1189],{"class":1021},[621,1200,1202],{"class":623,"line":1201},15,[621,1203,1204],{"class":627},"}\n",[621,1206,1208],{"class":623,"line":1207},16,[621,1209,700],{"emptyLinePlaceholder":699},[621,1211,1213,1215,1218],{"class":623,"line":1212},17,[621,1214,1153],{"class":635},[621,1216,1217],{"class":1021}," ModelMaterials",[621,1219,1159],{"class":627},[621,1221,1223,1226,1229,1231,1233],{"class":623,"line":1222},18,[621,1224,1225],{"class":627},"  '",[621,1227,1228],{"class":648},"4k-Metal-Worn",[621,1230,846],{"class":627},[621,1232,1167],{"class":627},[621,1234,1235],{"class":1021}," MeshStandardMaterial\n",[621,1237,1239,1241,1243,1245,1247],{"class":623,"line":1238},19,[621,1240,1225],{"class":627},[621,1242,946],{"class":648},[621,1244,846],{"class":627},[621,1246,1167],{"class":627},[621,1248,1235],{"class":1021},[621,1250,1252],{"class":623,"line":1251},20,[621,1253,1204],{"class":627},[621,1255,1257],{"class":623,"line":1256},21,[621,1258,700],{"emptyLinePlaceholder":699},[621,1260,1262,1265],{"class":623,"line":1261},22,[621,1263,1264],{"class":840},"defineSlots",[621,1266,1267],{"class":627},"\u003C{\n",[621,1269,1271,1273,1276,1279,1283,1285,1287,1290,1292,1294,1297,1300],{"class":623,"line":1270},23,[621,1272,1175],{"class":631},[621,1274,1275],{"class":627},"?:",[621,1277,1278],{"class":627}," (",[621,1280,1282],{"class":1281},"sHdIc","props",[621,1284,1167],{"class":627},[621,1286,664],{"class":627},[621,1288,1289],{"class":631}," node",[621,1291,1167],{"class":627},[621,1293,1105],{"class":1021},[621,1295,1296],{"class":627}," })",[621,1298,1299],{"class":635}," =>",[621,1301,1302],{"class":1021}," any\n",[621,1304,1306,1309],{"class":623,"line":1305},24,[621,1307,1308],{"class":627},"}>",[621,1310,1311],{"class":667},"()\n",[621,1313,1315],{"class":623,"line":1314},25,[621,1316,700],{"emptyLinePlaceholder":699},[621,1318,1320,1322,1324,1326,1328,1330,1332,1334,1336,1338,1340,1342,1345,1347,1349,1352,1354,1356,1358,1360,1362,1364,1367,1369,1373,1375],{"class":623,"line":1319},26,[621,1321,815],{"class":635},[621,1323,664],{"class":627},[621,1325,820],{"class":667},[621,1327,823],{"class":627},[621,1329,826],{"class":667},[621,1331,823],{"class":627},[621,1333,831],{"class":667},[621,1335,834],{"class":627},[621,1337,837],{"class":627},[621,1339,796],{"class":840},[621,1341,628],{"class":627},[621,1343,1344],{"class":1021},"ModelNodes",[621,1346,823],{"class":627},[621,1348,1217],{"class":1021},[621,1350,1351],{"class":627},">",[621,1353,843],{"class":667},[621,1355,846],{"class":627},[621,1357,728],{"class":648},[621,1359,846],{"class":627},[621,1361,823],{"class":627},[621,1363,664],{"class":627},[621,1365,1366],{"class":631}," draco",[621,1368,1167],{"class":627},[621,1370,1372],{"class":1371},"sfNiH"," true",[621,1374,671],{"class":627},[621,1376,853],{"class":667},[621,1378,1380],{"class":623,"line":1379},27,[621,1381,700],{"emptyLinePlaceholder":699},[621,1383,1385,1388,1390,1393,1395,1397,1400,1402],{"class":623,"line":1384},28,[621,1386,1387],{"class":840},"defineExpose",[621,1389,843],{"class":667},[621,1391,1392],{"class":627},"{",[621,1394,820],{"class":667},[621,1396,823],{"class":627},[621,1398,1399],{"class":667}," materials ",[621,1401,834],{"class":627},[621,1403,853],{"class":667},[621,1405,1407,1409,1411],{"class":623,"line":1406},29,[621,1408,689],{"class":627},[621,1410,632],{"class":631},[621,1412,654],{"class":627},[621,1414,1416],{"class":623,"line":1415},30,[621,1417,700],{"emptyLinePlaceholder":699},[621,1419,1421,1423,1425],{"class":623,"line":1420},31,[621,1422,628],{"class":627},[621,1424,708],{"class":631},[621,1426,654],{"class":627},[621,1428,1430,1432,1435,1438,1441,1443,1445,1448,1450],{"class":623,"line":1429},32,[621,1431,716],{"class":627},[621,1433,1434],{"class":631},"TresGroup",[621,1436,1437],{"class":627}," :",[621,1439,1440],{"class":635},"dispose",[621,1442,642],{"class":627},[621,1444,645],{"class":627},[621,1446,1447],{"class":627},"null",[621,1449,645],{"class":627},[621,1451,654],{"class":627},[621,1453,1455,1458,1460,1463,1465,1467,1469,1471,1473],{"class":623,"line":1454},33,[621,1456,1457],{"class":627},"    \u003C",[621,1459,708],{"class":631},[621,1461,1462],{"class":660}," v-if",[621,1464,642],{"class":627},[621,1466,645],{"class":627},[621,1468,894],{"class":627},[621,1470,897],{"class":667},[621,1472,645],{"class":627},[621,1474,654],{"class":627},[621,1476,1478,1481,1484,1487,1489,1491,1494,1496,1499,1501,1503,1506,1508],{"class":623,"line":1477},34,[621,1479,1480],{"class":627},"      \u003C",[621,1482,1483],{"class":631},"slot",[621,1485,1486],{"class":635}," name",[621,1488,642],{"class":627},[621,1490,645],{"class":627},[621,1492,1493],{"class":648},"Mug",[621,1495,645],{"class":627},[621,1497,1498],{"class":635}," :node",[621,1500,642],{"class":627},[621,1502,645],{"class":627},[621,1504,1505],{"class":648},"nodes.Mug",[621,1507,645],{"class":627},[621,1509,654],{"class":627},[621,1511,1513,1516,1518,1520,1523,1525,1527,1530,1534,1537,1540,1542,1544,1547,1549],{"class":623,"line":1512},35,[621,1514,1515],{"class":627},"        \u003C",[621,1517,1434],{"class":631},[621,1519,1437],{"class":627},[621,1521,1522],{"class":635},"position",[621,1524,642],{"class":627},[621,1526,645],{"class":627},[621,1528,1529],{"class":627},"[",[621,1531,1533],{"class":1532},"sbssI","0",[621,1535,1536],{"class":627},", ",[621,1538,1539],{"class":1532},"1",[621,1541,1536],{"class":627},[621,1543,1533],{"class":1532},[621,1545,1546],{"class":627},"]",[621,1548,645],{"class":627},[621,1550,654],{"class":627},[621,1552,1554,1557,1560,1562,1564,1566,1568,1570,1572,1574,1576,1578,1580,1582,1584,1586,1588,1590,1592,1594,1596,1598,1600,1602],{"class":623,"line":1553},36,[621,1555,1556],{"class":627},"          \u003C",[621,1558,1559],{"class":631},"TresMesh",[621,1561,1437],{"class":627},[621,1563,909],{"class":635},[621,1565,642],{"class":627},[621,1567,645],{"class":627},[621,1569,757],{"class":667},[621,1571,918],{"class":627},[621,1573,921],{"class":667},[621,1575,918],{"class":627},[621,1577,909],{"class":667},[621,1579,645],{"class":627},[621,1581,1437],{"class":627},[621,1583,935],{"class":635},[621,1585,642],{"class":627},[621,1587,645],{"class":627},[621,1589,761],{"class":667},[621,1591,1529],{"class":627},[621,1593,846],{"class":627},[621,1595,1228],{"class":648},[621,1597,846],{"class":627},[621,1599,1546],{"class":627},[621,1601,645],{"class":627},[621,1603,733],{"class":627},[621,1605,1607,1609,1611,1613,1615,1617,1619,1621,1623,1626,1628,1630,1632,1634,1636,1638,1640,1642,1644,1646,1648],{"class":623,"line":1606},37,[621,1608,1556],{"class":627},[621,1610,1559],{"class":631},[621,1612,1437],{"class":627},[621,1614,909],{"class":635},[621,1616,642],{"class":627},[621,1618,645],{"class":627},[621,1620,757],{"class":667},[621,1622,918],{"class":627},[621,1624,1625],{"class":667},"Mesh_1",[621,1627,918],{"class":627},[621,1629,909],{"class":667},[621,1631,645],{"class":627},[621,1633,1437],{"class":627},[621,1635,935],{"class":635},[621,1637,642],{"class":627},[621,1639,645],{"class":627},[621,1641,761],{"class":667},[621,1643,918],{"class":627},[621,1645,946],{"class":667},[621,1647,645],{"class":627},[621,1649,733],{"class":627},[621,1651,1653,1656,1658],{"class":623,"line":1652},38,[621,1654,1655],{"class":627},"        \u003C\u002F",[621,1657,1434],{"class":631},[621,1659,654],{"class":627},[621,1661,1663,1666,1668],{"class":623,"line":1662},39,[621,1664,1665],{"class":627},"      \u003C\u002F",[621,1667,1483],{"class":631},[621,1669,654],{"class":627},[621,1671,1673,1676,1678],{"class":623,"line":1672},40,[621,1674,1675],{"class":627},"    \u003C\u002F",[621,1677,708],{"class":631},[621,1679,654],{"class":627},[621,1681,1683,1686,1688],{"class":623,"line":1682},41,[621,1684,1685],{"class":627},"  \u003C\u002F",[621,1687,1434],{"class":631},[621,1689,654],{"class":627},[621,1691,1693,1695,1697],{"class":623,"line":1692},42,[621,1694,689],{"class":627},[621,1696,708],{"class":631},[621,1698,654],{"class":627},[504,1700,1701],{},"Import it like any other component:",[611,1703,1706],{"className":613,"code":1704,"filename":1705,"language":616,"meta":617,"style":617},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport Mug from '@\u002Fmodels\u002FMug.gen.vue'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[3, 2, 5]\" \u002F>\n    \u003CMug \u002F>\n    \u003CTresAmbientLight :intensity=\"1\" \u002F>\n  \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n","App.vue",[508,1707,1708,1728,1748,1765,1773,1777,1785,1794,1830,1838,1860,1868],{"__ignoreMap":617},[621,1709,1710,1712,1714,1716,1718,1720,1722,1724,1726],{"class":623,"line":624},[621,1711,628],{"class":627},[621,1713,632],{"class":631},[621,1715,636],{"class":635},[621,1717,639],{"class":635},[621,1719,642],{"class":627},[621,1721,645],{"class":627},[621,1723,649],{"class":648},[621,1725,645],{"class":627},[621,1727,654],{"class":627},[621,1729,1730,1732,1734,1737,1739,1741,1743,1746],{"class":623,"line":657},[621,1731,661],{"class":660},[621,1733,664],{"class":627},[621,1735,1736],{"class":667}," TresCanvas",[621,1738,671],{"class":627},[621,1740,674],{"class":660},[621,1742,677],{"class":627},[621,1744,1745],{"class":648},"@tresjs\u002Fcore",[621,1747,683],{"class":627},[621,1749,1750,1752,1755,1758,1760,1763],{"class":623,"line":686},[621,1751,661],{"class":660},[621,1753,1754],{"class":667}," Mug ",[621,1756,1757],{"class":660},"from",[621,1759,677],{"class":627},[621,1761,1762],{"class":648},"@\u002Fmodels\u002FMug.gen.vue",[621,1764,683],{"class":627},[621,1766,1767,1769,1771],{"class":623,"line":696},[621,1768,689],{"class":627},[621,1770,632],{"class":631},[621,1772,654],{"class":627},[621,1774,1775],{"class":623,"line":703},[621,1776,700],{"emptyLinePlaceholder":699},[621,1778,1779,1781,1783],{"class":623,"line":713},[621,1780,628],{"class":627},[621,1782,708],{"class":631},[621,1784,654],{"class":627},[621,1786,1787,1789,1792],{"class":623,"line":736},[621,1788,716],{"class":627},[621,1790,1791],{"class":631},"TresCanvas",[621,1793,654],{"class":627},[621,1795,1796,1798,1801,1803,1805,1807,1809,1811,1814,1816,1819,1821,1824,1826,1828],{"class":623,"line":876},[621,1797,1457],{"class":627},[621,1799,1800],{"class":631},"TresPerspectiveCamera",[621,1802,1437],{"class":627},[621,1804,1522],{"class":635},[621,1806,642],{"class":627},[621,1808,645],{"class":627},[621,1810,1529],{"class":627},[621,1812,1813],{"class":1532},"3",[621,1815,1536],{"class":627},[621,1817,1818],{"class":1532},"2",[621,1820,1536],{"class":627},[621,1822,1823],{"class":1532},"5",[621,1825,1546],{"class":627},[621,1827,645],{"class":627},[621,1829,733],{"class":627},[621,1831,1832,1834,1836],{"class":623,"line":884},[621,1833,1457],{"class":627},[621,1835,1493],{"class":631},[621,1837,733],{"class":627},[621,1839,1840,1842,1845,1847,1850,1852,1854,1856,1858],{"class":623,"line":903},[621,1841,1457],{"class":627},[621,1843,1844],{"class":631},"TresAmbientLight",[621,1846,1437],{"class":627},[621,1848,1849],{"class":635},"intensity",[621,1851,642],{"class":627},[621,1853,645],{"class":627},[621,1855,1539],{"class":1532},[621,1857,645],{"class":627},[621,1859,733],{"class":627},[621,1861,1862,1864,1866],{"class":623,"line":930},[621,1863,1685],{"class":627},[621,1865,1791],{"class":631},[621,1867,654],{"class":627},[621,1869,1870,1872,1874],{"class":623,"line":951},[621,1871,689],{"class":627},[621,1873,708],{"class":631},[621,1875,654],{"class":627},[1877,1878,1880],"h3",{"id":1879},"overriding-a-node","Overriding a node",[504,1882,1883,1884,1887],{},"Every named node is a ",[508,1885,1886],{},"\u003Cslot>"," whose fallback is the generated markup, so you change one mesh\nfrom the parent without touching the generated file:",[611,1889,1891],{"className":613,"code":1890,"filename":1705,"language":616,"meta":617,"style":617},"\u003Ctemplate>\n  \u003CMug>\n    \u003Ctemplate #Mug=\"{ node }\">\n      \u003CTresMesh :geometry=\"node.geometry\" :material=\"hologram\" @click=\"onClick\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FMug>\n\u003C\u002Ftemplate>\n",[508,1892,1893,1901,1909,1935,1986,1994,2002],{"__ignoreMap":617},[621,1894,1895,1897,1899],{"class":623,"line":624},[621,1896,628],{"class":627},[621,1898,708],{"class":631},[621,1900,654],{"class":627},[621,1902,1903,1905,1907],{"class":623,"line":657},[621,1904,716],{"class":627},[621,1906,1493],{"class":631},[621,1908,654],{"class":627},[621,1910,1911,1913,1915,1918,1920,1922,1924,1926,1929,1931,1933],{"class":623,"line":686},[621,1912,1457],{"class":627},[621,1914,708],{"class":631},[621,1916,1917],{"class":627}," #",[621,1919,1493],{"class":635},[621,1921,642],{"class":627},[621,1923,645],{"class":627},[621,1925,1392],{"class":627},[621,1927,1928],{"class":667}," node ",[621,1930,834],{"class":627},[621,1932,645],{"class":627},[621,1934,654],{"class":627},[621,1936,1937,1939,1941,1943,1945,1947,1949,1952,1954,1956,1958,1960,1962,1964,1966,1969,1971,1974,1976,1978,1980,1982,1984],{"class":623,"line":696},[621,1938,1480],{"class":627},[621,1940,1559],{"class":631},[621,1942,1437],{"class":627},[621,1944,909],{"class":635},[621,1946,642],{"class":627},[621,1948,645],{"class":627},[621,1950,1951],{"class":667},"node",[621,1953,918],{"class":627},[621,1955,909],{"class":667},[621,1957,645],{"class":627},[621,1959,1437],{"class":627},[621,1961,935],{"class":635},[621,1963,642],{"class":627},[621,1965,645],{"class":627},[621,1967,1968],{"class":667},"hologram",[621,1970,645],{"class":627},[621,1972,1973],{"class":627}," @",[621,1975,957],{"class":635},[621,1977,642],{"class":627},[621,1979,645],{"class":627},[621,1981,964],{"class":667},[621,1983,645],{"class":627},[621,1985,733],{"class":627},[621,1987,1988,1990,1992],{"class":623,"line":703},[621,1989,1675],{"class":627},[621,1991,708],{"class":631},[621,1993,654],{"class":627},[621,1995,1996,1998,2000],{"class":623,"line":713},[621,1997,1685],{"class":627},[621,1999,1493],{"class":631},[621,2001,654],{"class":627},[621,2003,2004,2006,2008],{"class":623,"line":736},[621,2005,689],{"class":627},[621,2007,708],{"class":631},[621,2009,654],{"class":627},[504,2011,2012,2013,2017],{},"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 ",[2014,2015,2016],"strong",{},"type error"," instead of quietly\ndoing nothing at runtime.",[2019,2020,2021],"prose-warning",{},[504,2022,2023,2024,2027,2028,2031],{},"Treat ",[508,2025,2026],{},"*.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,2029,2030],{},"--force"," to regenerate.",[2033,2034,2036],"read-more",{"to":2035},"https:\u002F\u002Fdocs.tresjs.org\u002Fcli\u002Fgltf",[504,2037,2038,2039,2041],{},"Full ",[508,2040,588],{}," reference: slots, animations, shadows, Draco and every flag.",[600,2043,998],{"id":2044},"typed-nodes-and-materials",[504,2046,2047,2049,2050,758,2052,2054],{},[508,2048,133],{}," takes two generics that type ",[508,2051,757],{},[508,2053,761],{},". The CLI writes them for you, but\nyou can also declare them by hand:",[611,2056,2059],{"className":2057,"code":2058,"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\u002Fcientos'\n\ninterface ModelNodes { Body: Mesh }\ninterface ModelMaterials { Skin: MeshStandardMaterial }\n\nconst { nodes, materials } = useGLTF\u003CModelNodes, ModelMaterials>('\u002Fmodels\u002Frobot.glb')\n\nnodes.value.Body.geometry \u002F\u002F Mesh, not any\n",[508,2060,2061,2085,2103,2107,2125,2142,2146,2185,2189],{"__ignoreMap":617},[621,2062,2063,2065,2067,2069,2071,2073,2075,2077,2079,2081,2083],{"class":623,"line":624},[621,2064,661],{"class":660},[621,2066,1100],{"class":660},[621,2068,664],{"class":627},[621,2070,1110],{"class":667},[621,2072,823],{"class":627},[621,2074,1115],{"class":667},[621,2076,671],{"class":627},[621,2078,674],{"class":660},[621,2080,677],{"class":627},[621,2082,1124],{"class":648},[621,2084,683],{"class":627},[621,2086,2087,2089,2091,2093,2095,2097,2099,2101],{"class":623,"line":657},[621,2088,661],{"class":660},[621,2090,664],{"class":627},[621,2092,796],{"class":667},[621,2094,671],{"class":627},[621,2096,674],{"class":660},[621,2098,677],{"class":627},[621,2100,680],{"class":648},[621,2102,683],{"class":627},[621,2104,2105],{"class":623,"line":686},[621,2106,700],{"emptyLinePlaceholder":699},[621,2108,2109,2111,2113,2115,2118,2120,2122],{"class":623,"line":696},[621,2110,1153],{"class":635},[621,2112,1156],{"class":1021},[621,2114,664],{"class":627},[621,2116,2117],{"class":631}," Body",[621,2119,1167],{"class":627},[621,2121,1110],{"class":1021},[621,2123,2124],{"class":627}," }\n",[621,2126,2127,2129,2131,2133,2136,2138,2140],{"class":623,"line":703},[621,2128,1153],{"class":635},[621,2130,1217],{"class":1021},[621,2132,664],{"class":627},[621,2134,2135],{"class":631}," Skin",[621,2137,1167],{"class":627},[621,2139,1115],{"class":1021},[621,2141,2124],{"class":627},[621,2143,2144],{"class":623,"line":713},[621,2145,700],{"emptyLinePlaceholder":699},[621,2147,2148,2150,2152,2154,2156,2158,2160,2162,2164,2166,2168,2170,2172,2174,2176,2178,2181,2183],{"class":623,"line":736},[621,2149,815],{"class":635},[621,2151,664],{"class":627},[621,2153,820],{"class":667},[621,2155,823],{"class":627},[621,2157,1399],{"class":667},[621,2159,834],{"class":627},[621,2161,837],{"class":627},[621,2163,796],{"class":840},[621,2165,628],{"class":627},[621,2167,1344],{"class":1021},[621,2169,823],{"class":627},[621,2171,1217],{"class":1021},[621,2173,1351],{"class":627},[621,2175,843],{"class":667},[621,2177,846],{"class":627},[621,2179,2180],{"class":648},"\u002Fmodels\u002Frobot.glb",[621,2182,846],{"class":627},[621,2184,853],{"class":667},[621,2186,2187],{"class":623,"line":876},[621,2188,700],{"emptyLinePlaceholder":699},[621,2190,2191,2193,2195,2198,2200,2203,2205,2208],{"class":623,"line":884},[621,2192,757],{"class":667},[621,2194,918],{"class":627},[621,2196,2197],{"class":667},"value",[621,2199,918],{"class":627},[621,2201,2202],{"class":667},"Body",[621,2204,918],{"class":627},[621,2206,2207],{"class":667},"geometry ",[621,2209,2210],{"class":1036},"\u002F\u002F Mesh, not any\n",[986,2212,2213],{},[504,2214,2215],{},"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,2217,2219],{"id":2218},"animated-models","Animated models",[504,2221,2222,2223,2226,2227,2231],{},"Clips live on the loaded ",[508,2224,2225],{},"state",", and ",[548,2228,2229],{"href":488},[508,2230,487],{}," turns\nthem into actions:",[611,2233,2236],{"className":613,"code":2234,"filename":2235,"language":616,"meta":617,"style":617},"\u003Cscript setup lang=\"ts\">\nimport { useAnimations, useGLTF } from '@tresjs\u002Fcientos'\nimport { computed, ref, watch } from 'vue'\n\nconst { state, nodes, isLoading } = useGLTF('\u002Fmodels\u002Fknight.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\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTresGroup ref=\"modelRef\">\n    \u003Cprimitive v-if=\"!isLoading\" :object=\"nodes.Rig\" \u002F>\n  \u003C\u002FTresGroup>\n\u003C\u002Ftemplate>\n","Knight.vue",[508,2237,2238,2258,2281,2310,2314,2348,2352,2365,2401,2424,2428,2458,2466,2470,2478,2497,2529,2537],{"__ignoreMap":617},[621,2239,2240,2242,2244,2246,2248,2250,2252,2254,2256],{"class":623,"line":624},[621,2241,628],{"class":627},[621,2243,632],{"class":631},[621,2245,636],{"class":635},[621,2247,639],{"class":635},[621,2249,642],{"class":627},[621,2251,645],{"class":627},[621,2253,649],{"class":648},[621,2255,645],{"class":627},[621,2257,654],{"class":627},[621,2259,2260,2262,2264,2267,2269,2271,2273,2275,2277,2279],{"class":623,"line":657},[621,2261,661],{"class":660},[621,2263,664],{"class":627},[621,2265,2266],{"class":667}," useAnimations",[621,2268,823],{"class":627},[621,2270,796],{"class":667},[621,2272,671],{"class":627},[621,2274,674],{"class":660},[621,2276,677],{"class":627},[621,2278,680],{"class":648},[621,2280,683],{"class":627},[621,2282,2283,2285,2287,2290,2292,2295,2297,2300,2302,2304,2306,2308],{"class":623,"line":686},[621,2284,661],{"class":660},[621,2286,664],{"class":627},[621,2288,2289],{"class":667}," computed",[621,2291,823],{"class":627},[621,2293,2294],{"class":667}," ref",[621,2296,823],{"class":627},[621,2298,2299],{"class":667}," watch",[621,2301,671],{"class":627},[621,2303,674],{"class":660},[621,2305,677],{"class":627},[621,2307,616],{"class":648},[621,2309,683],{"class":627},[621,2311,2312],{"class":623,"line":696},[621,2313,700],{"emptyLinePlaceholder":699},[621,2315,2316,2318,2320,2323,2325,2327,2329,2331,2333,2335,2337,2339,2341,2344,2346],{"class":623,"line":703},[621,2317,815],{"class":635},[621,2319,664],{"class":627},[621,2321,2322],{"class":667}," state",[621,2324,823],{"class":627},[621,2326,820],{"class":667},[621,2328,823],{"class":627},[621,2330,831],{"class":667},[621,2332,834],{"class":627},[621,2334,837],{"class":627},[621,2336,796],{"class":840},[621,2338,843],{"class":667},[621,2340,846],{"class":627},[621,2342,2343],{"class":648},"\u002Fmodels\u002Fknight.glb",[621,2345,846],{"class":627},[621,2347,853],{"class":667},[621,2349,2350],{"class":623,"line":713},[621,2351,700],{"emptyLinePlaceholder":699},[621,2353,2354,2356,2359,2361,2363],{"class":623,"line":736},[621,2355,815],{"class":635},[621,2357,2358],{"class":667}," modelRef ",[621,2360,642],{"class":627},[621,2362,2294],{"class":840},[621,2364,1311],{"class":667},[621,2366,2367,2369,2372,2374,2376,2378,2381,2383,2385,2387,2389,2392,2395,2398],{"class":623,"line":876},[621,2368,815],{"class":635},[621,2370,2371],{"class":667}," animations ",[621,2373,642],{"class":627},[621,2375,2289],{"class":840},[621,2377,843],{"class":667},[621,2379,2380],{"class":627},"()",[621,2382,1299],{"class":635},[621,2384,2322],{"class":667},[621,2386,918],{"class":627},[621,2388,2197],{"class":667},[621,2390,2391],{"class":627},"?.",[621,2393,2394],{"class":667},"animations ",[621,2396,2397],{"class":627},"??",[621,2399,2400],{"class":667}," [])\n",[621,2402,2403,2405,2407,2410,2412,2414,2416,2419,2421],{"class":623,"line":884},[621,2404,815],{"class":635},[621,2406,664],{"class":627},[621,2408,2409],{"class":667}," actions ",[621,2411,834],{"class":627},[621,2413,837],{"class":627},[621,2415,2266],{"class":840},[621,2417,2418],{"class":667},"(animations",[621,2420,823],{"class":627},[621,2422,2423],{"class":667}," modelRef)\n",[621,2425,2426],{"class":623,"line":903},[621,2427,700],{"emptyLinePlaceholder":699},[621,2429,2430,2433,2436,2438,2441,2443,2445,2447,2450,2452,2455],{"class":623,"line":930},[621,2431,2432],{"class":840},"watch",[621,2434,2435],{"class":667},"(actions",[621,2437,823],{"class":627},[621,2439,2440],{"class":1281}," current",[621,2442,1299],{"class":635},[621,2444,2440],{"class":667},[621,2446,918],{"class":627},[621,2448,2449],{"class":667},"Idle",[621,2451,2391],{"class":627},[621,2453,2454],{"class":840},"play",[621,2456,2457],{"class":667},"())\n",[621,2459,2460,2462,2464],{"class":623,"line":951},[621,2461,689],{"class":627},[621,2463,632],{"class":631},[621,2465,654],{"class":627},[621,2467,2468],{"class":623,"line":969},[621,2469,700],{"emptyLinePlaceholder":699},[621,2471,2472,2474,2476],{"class":623,"line":975},[621,2473,628],{"class":627},[621,2475,708],{"class":631},[621,2477,654],{"class":627},[621,2479,2480,2482,2484,2486,2488,2490,2493,2495],{"class":623,"line":1201},[621,2481,716],{"class":627},[621,2483,1434],{"class":631},[621,2485,2294],{"class":635},[621,2487,642],{"class":627},[621,2489,645],{"class":627},[621,2491,2492],{"class":648},"modelRef",[621,2494,645],{"class":627},[621,2496,654],{"class":627},[621,2498,2499,2501,2504,2506,2508,2510,2513,2515,2518,2520,2522,2525,2527],{"class":623,"line":1207},[621,2500,1457],{"class":627},[621,2502,2503],{"class":631},"primitive",[621,2505,1462],{"class":635},[621,2507,642],{"class":627},[621,2509,645],{"class":627},[621,2511,2512],{"class":648},"!isLoading",[621,2514,645],{"class":627},[621,2516,2517],{"class":635}," :object",[621,2519,642],{"class":627},[621,2521,645],{"class":627},[621,2523,2524],{"class":648},"nodes.Rig",[621,2526,645],{"class":627},[621,2528,733],{"class":627},[621,2530,2531,2533,2535],{"class":623,"line":1212},[621,2532,1685],{"class":627},[621,2534,1434],{"class":631},[621,2536,654],{"class":627},[621,2538,2539,2541,2543],{"class":623,"line":1222},[621,2540,689],{"class":627},[621,2542,708],{"class":631},[621,2544,654],{"class":627},[504,2546,2547,2548,2551,2552,2555,2556,2559],{},"A generated component wires all of that up and exposes ",[508,2549,2550],{},"actions"," keyed by a union of the model's\nclip names, so ",[508,2553,2554],{},"actions.Idle"," type-checks and ",[508,2557,2558],{},"actions.Idl"," does not:",[611,2561,2563],{"className":613,"code":2562,"filename":1705,"language":616,"meta":617,"style":617},"\u003Cscript setup lang=\"ts\">\nimport { onMounted, ref } from 'vue'\nimport Knight from '@\u002Fmodels\u002FKnight.gen.vue'\n\nconst knight = ref\u003CInstanceType\u003Ctypeof Knight>>()\n\nonMounted(() => knight.value?.actions.Idle?.play())\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CKnight ref=\"knight\" \u002F>\n\u003C\u002Ftemplate>\n",[508,2564,2565,2585,2608,2624,2628,2655,2659,2691,2699,2703,2711,2731],{"__ignoreMap":617},[621,2566,2567,2569,2571,2573,2575,2577,2579,2581,2583],{"class":623,"line":624},[621,2568,628],{"class":627},[621,2570,632],{"class":631},[621,2572,636],{"class":635},[621,2574,639],{"class":635},[621,2576,642],{"class":627},[621,2578,645],{"class":627},[621,2580,649],{"class":648},[621,2582,645],{"class":627},[621,2584,654],{"class":627},[621,2586,2587,2589,2591,2594,2596,2598,2600,2602,2604,2606],{"class":623,"line":657},[621,2588,661],{"class":660},[621,2590,664],{"class":627},[621,2592,2593],{"class":667}," onMounted",[621,2595,823],{"class":627},[621,2597,2294],{"class":667},[621,2599,671],{"class":627},[621,2601,674],{"class":660},[621,2603,677],{"class":627},[621,2605,616],{"class":648},[621,2607,683],{"class":627},[621,2609,2610,2612,2615,2617,2619,2622],{"class":623,"line":686},[621,2611,661],{"class":660},[621,2613,2614],{"class":667}," Knight ",[621,2616,1757],{"class":660},[621,2618,677],{"class":627},[621,2620,2621],{"class":648},"@\u002Fmodels\u002FKnight.gen.vue",[621,2623,683],{"class":627},[621,2625,2626],{"class":623,"line":696},[621,2627,700],{"emptyLinePlaceholder":699},[621,2629,2630,2632,2635,2637,2639,2641,2644,2647,2650,2653],{"class":623,"line":703},[621,2631,815],{"class":635},[621,2633,2634],{"class":667}," knight ",[621,2636,642],{"class":627},[621,2638,2294],{"class":840},[621,2640,628],{"class":627},[621,2642,2643],{"class":1021},"InstanceType",[621,2645,2646],{"class":627},"\u003Ctypeof",[621,2648,2649],{"class":667}," Knight",[621,2651,2652],{"class":627},">>",[621,2654,1311],{"class":667},[621,2656,2657],{"class":623,"line":713},[621,2658,700],{"emptyLinePlaceholder":699},[621,2660,2661,2664,2666,2668,2670,2673,2675,2677,2679,2681,2683,2685,2687,2689],{"class":623,"line":736},[621,2662,2663],{"class":840},"onMounted",[621,2665,843],{"class":667},[621,2667,2380],{"class":627},[621,2669,1299],{"class":635},[621,2671,2672],{"class":667}," knight",[621,2674,918],{"class":627},[621,2676,2197],{"class":667},[621,2678,2391],{"class":627},[621,2680,2550],{"class":667},[621,2682,918],{"class":627},[621,2684,2449],{"class":667},[621,2686,2391],{"class":627},[621,2688,2454],{"class":840},[621,2690,2457],{"class":667},[621,2692,2693,2695,2697],{"class":623,"line":876},[621,2694,689],{"class":627},[621,2696,632],{"class":631},[621,2698,654],{"class":627},[621,2700,2701],{"class":623,"line":884},[621,2702,700],{"emptyLinePlaceholder":699},[621,2704,2705,2707,2709],{"class":623,"line":903},[621,2706,628],{"class":627},[621,2708,708],{"class":631},[621,2710,654],{"class":627},[621,2712,2713,2715,2718,2720,2722,2724,2727,2729],{"class":623,"line":930},[621,2714,716],{"class":627},[621,2716,2717],{"class":631},"Knight",[621,2719,2294],{"class":635},[621,2721,642],{"class":627},[621,2723,645],{"class":627},[621,2725,2726],{"class":648},"knight",[621,2728,645],{"class":627},[621,2730,733],{"class":627},[621,2732,2733,2735,2737],{"class":623,"line":951},[621,2734,689],{"class":627},[621,2736,708],{"class":631},[621,2738,654],{"class":627},[986,2740,2741],{},[504,2742,2743,2744,2747,2748,2751,2752,2754,2755,2758,2759,2762],{},"Keep the element carrying the animation ",[508,2745,2746],{},"ref"," mounted and gate its ",[2014,2749,2750],{},"children"," on loading. A\n",[508,2753,2746],{}," on a ",[508,2756,2757],{},"v-if","ed element is still ",[508,2760,2761],{},"undefined"," one flush after the clips land, and the mixer\nwould then be built with no root to bind against.",[600,2764,2766],{"id":2765},"draco-compressed-models","Draco-compressed models",[504,2768,2769,2770,2773,2774,2777],{},"Pass ",[508,2771,2772],{},"draco: true"," and the loader pulls the decoder from Google's CDN, or point ",[508,2775,2776],{},"decoderPath"," at\na local copy:",[611,2779,2781],{"className":2057,"code":2780,"language":649,"meta":617,"style":617},"const { state } = useGLTF('\u002Fmodels\u002Fmug.glb', { draco: true })\n",[508,2782,2783],{"__ignoreMap":617},[621,2784,2785,2787,2789,2792,2794,2796,2798,2800,2802,2804,2806,2808,2810,2812,2814,2816,2818],{"class":623,"line":624},[621,2786,815],{"class":635},[621,2788,664],{"class":627},[621,2790,2791],{"class":667}," state ",[621,2793,834],{"class":627},[621,2795,837],{"class":627},[621,2797,796],{"class":840},[621,2799,843],{"class":667},[621,2801,846],{"class":627},[621,2803,728],{"class":648},[621,2805,846],{"class":627},[621,2807,823],{"class":627},[621,2809,664],{"class":627},[621,2811,1366],{"class":631},[621,2813,1167],{"class":627},[621,2815,1372],{"class":1371},[621,2817,671],{"class":627},[621,2819,853],{"class":667},[504,2821,2822,2823,2826],{},"A Draco model renders nothing without it. The CLI detects compression while parsing and writes\n",[508,2824,2825],{},"{ draco: true }"," into the generated component for you.",[600,2828,2830],{"id":2829},"where-to-find-models","Where to find models",[2832,2833,2834,2844,2852],"ul",{},[2835,2836,2837,2843],"li",{},[548,2838,2842],{"href":2839,"rel":2840},"https:\u002F\u002Fpoly.pizza\u002F",[2841],"nofollow","poly.pizza"," — free 3D models",[2835,2845,2846,2851],{},[548,2847,2850],{"href":2848,"rel":2849},"https:\u002F\u002Fmarket.pmnd.rs\u002F",[2841],"Pmndrs Market"," — free assets, curated",[2835,2853,2854,2859],{},[548,2855,2858],{"href":2856,"rel":2857},"https:\u002F\u002Fkaylousberg.itch.io\u002F",[2841],"KayKit"," — animated CC0 character packs",[2861,2862,2863],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":617,"searchDepth":624,"depth":657,"links":2865},[2866,2867,2868,2871,2872,2873,2874],{"id":602,"depth":657,"text":603},{"id":748,"depth":657,"text":749},{"id":1002,"depth":657,"text":1003,"children":2869},[2870],{"id":1879,"depth":686,"text":1880},{"id":2044,"depth":657,"text":998},{"id":2218,"depth":657,"text":2219},{"id":2765,"depth":657,"text":2766},{"id":2829,"depth":657,"text":2830},"The three ways to bring a glTF model into a TresJS scene, and when to use each one.","md",null,{},{"title":19,"description":2875},"K1FluY3TFg7H1petkHNP0BA-EE_9JvN9_myy6gV5Z2Y",[2882,2884],{"title":15,"path":16,"stem":17,"description":2883,"children":-1},"Learn how you can start to use cientos in your projects",{"title":23,"path":24,"stem":25,"description":2885,"children":-1},"Migration guide for cientos",1791549571398]