[{"data":1,"prerenderedAt":1428},["ShallowReactive",2],{"navigation":3,"/api/loaders/gltf-model":498,"/api/loaders/gltf-model-surround":1423},[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":137,"body":500,"description":1417,"extension":1418,"links":1419,"meta":1420,"navigation":614,"path":138,"seo":1421,"stem":139,"__hash__":1422},"docs/2.api/3.loaders/2.gltf-model.md",{"type":501,"value":502,"toc":1411},"minimark",[503,509,524,528,942,946,953,1222,1226,1339,1356,1360,1380,1401,1407],[504,505,506],"scene-wrapper",{},[507,508],"loaders-gltf",{},[510,511,512,513,516,517,523],"p",{},"The ",[514,515,137],"code",{}," component is a wrapper around ",[518,519,521],"a",{"href":520},"./use-gltf",[514,522,133],{}," composable and accepts the same options as props.",[525,526,15],"h2",{"id":527},"usage",[529,530,531,691],"code-group",{},[532,533,542],"pre",{"className":534,"code":535,"filename":536,"highlights":537,"language":540,"meta":541,"style":541},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { GLTFModel } from '@tresjs/cientos'\n\nconst path = './blender-cube.glb'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CGLTFModel :path=\"path\" />\n\u003C/template>\n","TheModel.vue",[538,539],2,8,"vue","",[514,543,544,579,609,616,634,644,649,659,682],{"__ignoreMap":541},[545,546,549,553,557,561,564,567,570,574,576],"span",{"class":547,"line":548},"line",1,[545,550,552],{"class":551},"sMK4o","\u003C",[545,554,556],{"class":555},"swJcz","script",[545,558,560],{"class":559},"spNyl"," setup",[545,562,563],{"class":559}," lang",[545,565,566],{"class":551},"=",[545,568,569],{"class":551},"\"",[545,571,573],{"class":572},"sfazB","ts",[545,575,569],{"class":551},[545,577,578],{"class":551},">\n",[545,580,583,587,590,594,597,600,603,606],{"class":581,"line":538},[547,582],"highlight",[545,584,586],{"class":585},"s7zQu","import",[545,588,589],{"class":551}," {",[545,591,593],{"class":592},"sTEyZ"," GLTFModel",[545,595,596],{"class":551}," }",[545,598,599],{"class":585}," from",[545,601,602],{"class":551}," '",[545,604,605],{"class":572},"@tresjs/cientos",[545,607,608],{"class":551},"'\n",[545,610,612],{"class":547,"line":611},3,[545,613,615],{"emptyLinePlaceholder":614},true,"\n",[545,617,619,622,625,627,629,632],{"class":547,"line":618},4,[545,620,621],{"class":559},"const",[545,623,624],{"class":592}," path ",[545,626,566],{"class":551},[545,628,602],{"class":551},[545,630,631],{"class":572},"./blender-cube.glb",[545,633,608],{"class":551},[545,635,637,640,642],{"class":547,"line":636},5,[545,638,639],{"class":551},"\u003C/",[545,641,556],{"class":555},[545,643,578],{"class":551},[545,645,647],{"class":547,"line":646},6,[545,648,615],{"emptyLinePlaceholder":614},[545,650,652,654,657],{"class":547,"line":651},7,[545,653,552],{"class":551},[545,655,656],{"class":555},"template",[545,658,578],{"class":551},[545,660,662,665,667,670,672,674,677,679],{"class":661,"line":539},[547,582],[545,663,664],{"class":551},"  \u003C",[545,666,137],{"class":555},[545,668,669],{"class":559}," :path",[545,671,566],{"class":551},[545,673,569],{"class":551},[545,675,676],{"class":572},"path",[545,678,569],{"class":551},[545,680,681],{"class":551}," />\n",[545,683,685,687,689],{"class":547,"line":684},9,[545,686,639],{"class":551},[545,688,656],{"class":555},[545,690,578],{"class":551},[532,692,695],{"className":534,"code":693,"filename":694,"language":540,"meta":541,"style":541},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport TheModel from './TheModel.vue'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#F78B3D\">\n    \u003CTresPerspectiveCamera :position=\"[3, 2, 5]\" />\n    \u003COrbitControls />\n    \u003CTheModel />\n    \u003CTresDirectionalLight\n      :intensity=\"2\"\n      :position=\"[3, 3, 3]\"\n    />\n    \u003CTresAmbientLight :intensity=\"1\" />\n  \u003C/TresCanvas>\n\u003C/template>\n","app.vue",[514,696,697,717,736,756,773,781,785,793,814,836,846,856,864,880,895,901,923,933],{"__ignoreMap":541},[545,698,699,701,703,705,707,709,711,713,715],{"class":547,"line":548},[545,700,552],{"class":551},[545,702,556],{"class":555},[545,704,560],{"class":559},[545,706,563],{"class":559},[545,708,566],{"class":551},[545,710,569],{"class":551},[545,712,573],{"class":572},[545,714,569],{"class":551},[545,716,578],{"class":551},[545,718,719,721,723,726,728,730,732,734],{"class":547,"line":538},[545,720,586],{"class":585},[545,722,589],{"class":551},[545,724,725],{"class":592}," OrbitControls",[545,727,596],{"class":551},[545,729,599],{"class":585},[545,731,602],{"class":551},[545,733,605],{"class":572},[545,735,608],{"class":551},[545,737,738,740,742,745,747,749,751,754],{"class":547,"line":611},[545,739,586],{"class":585},[545,741,589],{"class":551},[545,743,744],{"class":592}," TresCanvas",[545,746,596],{"class":551},[545,748,599],{"class":585},[545,750,602],{"class":551},[545,752,753],{"class":572},"@tresjs/core",[545,755,608],{"class":551},[545,757,758,760,763,766,768,771],{"class":547,"line":618},[545,759,586],{"class":585},[545,761,762],{"class":592}," TheModel ",[545,764,765],{"class":585},"from",[545,767,602],{"class":551},[545,769,770],{"class":572},"./TheModel.vue",[545,772,608],{"class":551},[545,774,775,777,779],{"class":547,"line":636},[545,776,639],{"class":551},[545,778,556],{"class":555},[545,780,578],{"class":551},[545,782,783],{"class":547,"line":646},[545,784,615],{"emptyLinePlaceholder":614},[545,786,787,789,791],{"class":547,"line":651},[545,788,552],{"class":551},[545,790,656],{"class":555},[545,792,578],{"class":551},[545,794,795,797,800,803,805,807,810,812],{"class":547,"line":539},[545,796,664],{"class":551},[545,798,799],{"class":555},"TresCanvas",[545,801,802],{"class":559}," clear-color",[545,804,566],{"class":551},[545,806,569],{"class":551},[545,808,809],{"class":572},"#F78B3D",[545,811,569],{"class":551},[545,813,578],{"class":551},[545,815,816,819,822,825,827,829,832,834],{"class":547,"line":684},[545,817,818],{"class":551},"    \u003C",[545,820,821],{"class":555},"TresPerspectiveCamera",[545,823,824],{"class":559}," :position",[545,826,566],{"class":551},[545,828,569],{"class":551},[545,830,831],{"class":572},"[3, 2, 5]",[545,833,569],{"class":551},[545,835,681],{"class":551},[545,837,839,841,844],{"class":547,"line":838},10,[545,840,818],{"class":551},[545,842,843],{"class":555},"OrbitControls",[545,845,681],{"class":551},[545,847,849,851,854],{"class":547,"line":848},11,[545,850,818],{"class":551},[545,852,853],{"class":555},"TheModel",[545,855,681],{"class":551},[545,857,859,861],{"class":547,"line":858},12,[545,860,818],{"class":551},[545,862,863],{"class":555},"TresDirectionalLight\n",[545,865,867,870,872,874,877],{"class":547,"line":866},13,[545,868,869],{"class":559},"      :intensity",[545,871,566],{"class":551},[545,873,569],{"class":551},[545,875,876],{"class":572},"2",[545,878,879],{"class":551},"\"\n",[545,881,883,886,888,890,893],{"class":547,"line":882},14,[545,884,885],{"class":559},"      :position",[545,887,566],{"class":551},[545,889,569],{"class":551},[545,891,892],{"class":572},"[3, 3, 3]",[545,894,879],{"class":551},[545,896,898],{"class":547,"line":897},15,[545,899,900],{"class":551},"    />\n",[545,902,904,906,909,912,914,916,919,921],{"class":547,"line":903},16,[545,905,818],{"class":551},[545,907,908],{"class":555},"TresAmbientLight",[545,910,911],{"class":559}," :intensity",[545,913,566],{"class":551},[545,915,569],{"class":551},[545,917,918],{"class":572},"1",[545,920,569],{"class":551},[545,922,681],{"class":551},[545,924,926,929,931],{"class":547,"line":925},17,[545,927,928],{"class":551},"  \u003C/",[545,930,799],{"class":555},[545,932,578],{"class":551},[545,934,936,938,940],{"class":547,"line":935},18,[545,937,639],{"class":551},[545,939,656],{"class":555},[545,941,578],{"class":551},[525,943,945],{"id":944},"model-reference","Model reference",[510,947,948,949,952],{},"The component exposes the loaded GLTF as ",[514,950,951],{},"instance",", so a template ref gets you the parsed model:",[532,954,956],{"className":534,"code":955,"language":540,"meta":541,"style":541},"\u003Cscript setup lang=\"ts\">\nimport { GLTFModel } from '@tresjs/cientos'\nimport { ref, watch } from 'vue'\n\nconst modelRef = ref\u003CInstanceType\u003Ctypeof GLTFModel>>()\n\n// `instance` is null until the file lands, so watch it rather than the ref\nwatch(() => modelRef.value?.instance, (gltf) => {\n  gltf?.scene.position.set(0, 0, 0)\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CGLTFModel\n    ref=\"modelRef\"\n    path=\"https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb\"\n  />\n\u003C/template>\n",[514,957,958,978,996,1021,1025,1054,1058,1064,1109,1147,1154,1162,1166,1174,1181,1195,1209,1214],{"__ignoreMap":541},[545,959,960,962,964,966,968,970,972,974,976],{"class":547,"line":548},[545,961,552],{"class":551},[545,963,556],{"class":555},[545,965,560],{"class":559},[545,967,563],{"class":559},[545,969,566],{"class":551},[545,971,569],{"class":551},[545,973,573],{"class":572},[545,975,569],{"class":551},[545,977,578],{"class":551},[545,979,980,982,984,986,988,990,992,994],{"class":547,"line":538},[545,981,586],{"class":585},[545,983,589],{"class":551},[545,985,593],{"class":592},[545,987,596],{"class":551},[545,989,599],{"class":585},[545,991,602],{"class":551},[545,993,605],{"class":572},[545,995,608],{"class":551},[545,997,998,1000,1002,1005,1008,1011,1013,1015,1017,1019],{"class":547,"line":611},[545,999,586],{"class":585},[545,1001,589],{"class":551},[545,1003,1004],{"class":592}," ref",[545,1006,1007],{"class":551},",",[545,1009,1010],{"class":592}," watch",[545,1012,596],{"class":551},[545,1014,599],{"class":585},[545,1016,602],{"class":551},[545,1018,540],{"class":572},[545,1020,608],{"class":551},[545,1022,1023],{"class":547,"line":618},[545,1024,615],{"emptyLinePlaceholder":614},[545,1026,1027,1029,1032,1034,1037,1039,1043,1046,1048,1051],{"class":547,"line":636},[545,1028,621],{"class":559},[545,1030,1031],{"class":592}," modelRef ",[545,1033,566],{"class":551},[545,1035,1004],{"class":1036},"s2Zo4",[545,1038,552],{"class":551},[545,1040,1042],{"class":1041},"sBMFI","InstanceType",[545,1044,1045],{"class":551},"\u003Ctypeof",[545,1047,593],{"class":592},[545,1049,1050],{"class":551},">>",[545,1052,1053],{"class":592},"()\n",[545,1055,1056],{"class":547,"line":646},[545,1057,615],{"emptyLinePlaceholder":614},[545,1059,1060],{"class":547,"line":651},[545,1061,1063],{"class":1062},"sHwdD","// `instance` is null until the file lands, so watch it rather than the ref\n",[545,1065,1066,1069,1072,1075,1078,1081,1084,1087,1090,1092,1094,1097,1101,1104,1106],{"class":547,"line":539},[545,1067,1068],{"class":1036},"watch",[545,1070,1071],{"class":592},"(",[545,1073,1074],{"class":551},"()",[545,1076,1077],{"class":559}," =>",[545,1079,1080],{"class":592}," modelRef",[545,1082,1083],{"class":551},".",[545,1085,1086],{"class":592},"value",[545,1088,1089],{"class":551},"?.",[545,1091,951],{"class":592},[545,1093,1007],{"class":551},[545,1095,1096],{"class":551}," (",[545,1098,1100],{"class":1099},"sHdIc","gltf",[545,1102,1103],{"class":551},")",[545,1105,1077],{"class":559},[545,1107,1108],{"class":551}," {\n",[545,1110,1111,1114,1116,1119,1121,1124,1126,1129,1131,1135,1137,1140,1142,1144],{"class":547,"line":684},[545,1112,1113],{"class":592},"  gltf",[545,1115,1089],{"class":551},[545,1117,1118],{"class":592},"scene",[545,1120,1083],{"class":551},[545,1122,1123],{"class":592},"position",[545,1125,1083],{"class":551},[545,1127,1128],{"class":1036},"set",[545,1130,1071],{"class":555},[545,1132,1134],{"class":1133},"sbssI","0",[545,1136,1007],{"class":551},[545,1138,1139],{"class":1133}," 0",[545,1141,1007],{"class":551},[545,1143,1139],{"class":1133},[545,1145,1146],{"class":555},")\n",[545,1148,1149,1152],{"class":547,"line":838},[545,1150,1151],{"class":551},"}",[545,1153,1146],{"class":592},[545,1155,1156,1158,1160],{"class":547,"line":848},[545,1157,639],{"class":551},[545,1159,556],{"class":555},[545,1161,578],{"class":551},[545,1163,1164],{"class":547,"line":858},[545,1165,615],{"emptyLinePlaceholder":614},[545,1167,1168,1170,1172],{"class":547,"line":866},[545,1169,552],{"class":551},[545,1171,656],{"class":555},[545,1173,578],{"class":551},[545,1175,1176,1178],{"class":547,"line":882},[545,1177,664],{"class":551},[545,1179,1180],{"class":555},"GLTFModel\n",[545,1182,1183,1186,1188,1190,1193],{"class":547,"line":897},[545,1184,1185],{"class":559},"    ref",[545,1187,566],{"class":551},[545,1189,569],{"class":551},[545,1191,1192],{"class":572},"modelRef",[545,1194,879],{"class":551},[545,1196,1197,1200,1202,1204,1207],{"class":547,"line":903},[545,1198,1199],{"class":559},"    path",[545,1201,566],{"class":551},[545,1203,569],{"class":551},[545,1205,1206],{"class":572},"https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb",[545,1208,879],{"class":551},[545,1210,1211],{"class":547,"line":925},[545,1212,1213],{"class":551},"  />\n",[545,1215,1216,1218,1220],{"class":547,"line":935},[545,1217,639],{"class":551},[545,1219,656],{"class":555},[545,1221,578],{"class":551},[525,1223,1225],{"id":1224},"props","Props",[1227,1228,1229,1246],"table",{},[1230,1231,1232],"thead",{},[1233,1234,1235,1240,1243],"tr",{},[1236,1237,1239],"th",{"align":1238},"left","Prop",[1236,1241,1242],{"align":1238},"Description",[1236,1244,1245],{},"Default",[1247,1248,1249,1268,1290,1305,1323],"tbody",{},[1233,1250,1251,1256,1263],{},[1252,1253,1254],"td",{"align":1238},[514,1255,676],{},[1252,1257,1258,1259,1083],{"align":1238},"Path to the model file. ",[1260,1261,1262],"strong",{},"Required",[1252,1264,1265],{},[514,1266,1267],{},"undefined",[1233,1269,1270,1275,1285],{},[1252,1271,1272],{"align":1238},[514,1273,1274],{},"draco",[1252,1276,1277,1278,1284],{"align":1238},"Enable ",[518,1279,1283],{"href":1280,"rel":1281},"https://threejs.org/docs/index.html?q=drac#examples/en/loaders/DRACOLoader",[1282],"nofollow","Draco compression"," for the model.",[1252,1286,1287],{},[514,1288,1289],{},"false",[1233,1291,1292,1297,1300],{},[1252,1293,1294],{"align":1238},[514,1295,1296],{},"decoderPath",[1252,1298,1299],{"align":1238},"Path to a Draco decoder.",[1252,1301,1302],{},[514,1303,1304],{},"'https://www.gstatic.com/draco/versioned/decoders/1.4.1/'",[1233,1306,1307,1312,1319],{},[1252,1308,1309],{"align":1238},[514,1310,1311],{},"castShadow",[1252,1313,1314,1315,1318],{"align":1238},"Apply ",[514,1316,1317],{},"cast-shadow"," to all meshes inside your model.",[1252,1320,1321],{},[514,1322,1289],{},[1233,1324,1325,1330,1335],{},[1252,1326,1327],{"align":1238},[514,1328,1329],{},"receiveShadow",[1252,1331,1314,1332,1318],{"align":1238},[514,1333,1334],{},"receive-shadow",[1252,1336,1337],{},[514,1338,1289],{},[1340,1341,1342],"prose-note",{},[510,1343,1344,1346,1347,1351,1352,1355],{},[514,1345,676],{}," is not reactive: the component reads it once on setup. Use\n",[518,1348,1349],{"href":520},[514,1350,133],{}," with a ",[514,1353,1354],{},"ref"," path if you need to swap models at runtime.",[525,1357,1359],{"id":1358},"when-to-reach-for-something-else","When to reach for something else",[510,1361,1362,1364,1365,1368,1369,1373,1374,1379],{},[514,1363,137],{}," renders the model's scene graph as-is, which means there is no element to hang a\nmaterial swap, a click handler or a ",[514,1366,1367],{},"v-if"," on. When you need that, use\n",[518,1370,1371],{"href":520},[514,1372,133],{}," to compose the parts yourself, or let the\n",[518,1375,1378],{"href":1376,"rel":1377},"https://docs.tresjs.org/cli/gltf",[1282],"TresJS CLI"," generate a typed component with a slot per node:",[532,1381,1385],{"className":1382,"code":1383,"language":1384,"meta":541,"style":541},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx @tresjs/cli gltf public/models/robot.glb\n","bash",[514,1386,1387],{"__ignoreMap":541},[545,1388,1389,1392,1395,1398],{"class":547,"line":548},[545,1390,1391],{"class":1041},"npx",[545,1393,1394],{"class":572}," @tresjs/cli",[545,1396,1397],{"class":572}," gltf",[545,1399,1400],{"class":572}," public/models/robot.glb\n",[1402,1403,1404],"read-more",{"to":20},[510,1405,1406],{},"The three ways to load a model, and when to reach for each one.",[1408,1409,1410],"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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":541,"searchDepth":548,"depth":538,"links":1412},[1413,1414,1415,1416],{"id":527,"depth":538,"text":15},{"id":944,"depth":538,"text":945},{"id":1224,"depth":538,"text":1225},{"id":1358,"depth":538,"text":1359},"A component based on useGLTF to load models in TresJS scenes.","md",null,{},{"title":137,"description":1417},"VQ_YsNV94FVy6HCRAYN67RLxTmb-4Gfn8UDFrpHDFcQ",[1424,1426],{"title":133,"path":134,"stem":135,"description":1425,"children":-1},"A composable to load GLTF models in TresJS scenes.",{"title":141,"path":142,"stem":143,"description":1427,"children":-1},"A composable to load FBX models in TresJS scenes.",1786474290906]