[{"data":1,"prerenderedAt":566},["ShallowReactive",2],{"navigation":3,"/cli":256,"/cli-surround":561},[4,29,78,177,190,222,232,236,240,244,248,252],{"title":5,"path":6,"stem":7,"children":8,"icon":27,"titleTemplate":28},"Getting Started","/getting-started","1.getting-started/1.index",[9,12,17,22],{"title":10,"path":6,"stem":7,"icon":11},"Introduction","i-lucide-house",{"title":13,"path":14,"stem":15,"icon":16},"Installation","/getting-started/installation","1.getting-started/2.installation","i-lucide-download",{"title":18,"path":19,"stem":20,"icon":21},"Your First Scene","/getting-started/your-first-scene","1.getting-started/3.your-first-scene","i-lucide-donut",{"title":23,"path":24,"stem":25,"icon":26},"Upgrade Guide","/getting-started/upgrade-guide","1.getting-started/4.upgrade-guide","i-lucide-circle-arrow-up","i-lucide-rocket","%s · Get Started with TresJS",{"title":30,"path":31,"stem":32,"children":33},"Essentials","/essentials","2.essentials",[34,36,48],{"title":30,"path":31,"stem":35},"2.essentials/index",{"title":37,"icon":38,"open":39,"path":40,"stem":41,"children":42,"page":47},"Core Architecture","i-lucide-cpu",true,"/essentials/core-architecture","2.essentials/1.core-architecture",[43],{"title":44,"path":45,"stem":46},"Custom Vue Renderer","/essentials/core-architecture/custom-vue-renderer","2.essentials/1.core-architecture/2.custom-vue-renderer",false,{"title":49,"icon":50,"open":39,"path":51,"stem":52,"children":53,"page":47},"Key Concepts","i-lucide-medal","/essentials/concepts","2.essentials/2.concepts",[54,58,62,66,70,74],{"title":55,"path":56,"stem":57},"Declarative vs Imperative","/essentials/concepts/declarative-vs-imperative","2.essentials/2.concepts/1.declarative-vs-imperative",{"title":59,"path":60,"stem":61},"Reactivity","/essentials/concepts/reactivity","2.essentials/2.concepts/2.reactivity",{"title":63,"path":64,"stem":65},"Constructor Arguments","/essentials/concepts/constructor-arguments","2.essentials/2.concepts/3.constructor-arguments",{"title":67,"path":68,"stem":69},"Declarative Properties","/essentials/concepts/declarative-properties","2.essentials/2.concepts/4.declarative-properties",{"title":71,"path":72,"stem":73},"Extending the Catalogue","/essentials/concepts/extending-catalogue","2.essentials/2.concepts/5.extending-catalogue",{"title":75,"path":76,"stem":77},"Child Attachments","/essentials/concepts/child-attachments","2.essentials/2.concepts/6.child-attachments",{"title":79,"path":80,"stem":81,"children":82},"API","/api","3.api",[83,86,108,135,145,159],{"title":84,"path":80,"stem":85},"TresJS API Reference","3.api/1.index",{"title":87,"icon":88,"open":39,"path":89,"stem":90,"children":91,"page":47},"Components","i-lucide-box","/api/components","3.api/1.components",[92,96,100,104],{"title":93,"path":94,"stem":95},"\u003CTresCanvas />","/api/components/tres-canvas","3.api/1.components/tres-canvas",{"title":97,"path":98,"stem":99},"\u003CTresCanvasContext />","/api/components/tres-context","3.api/1.components/tres-context",{"title":101,"path":102,"stem":103},"Tres Components","/api/components/tres-objects","3.api/1.components/tres-objects",{"title":105,"path":106,"stem":107},"TresPortal","/api/components/tres-portal","3.api/1.components/tres-portal",{"title":109,"titleTemplate":110,"icon":111,"path":112,"stem":113,"children":114,"page":47},"Composables","%s · TresJS Composables","i-lucide-arrow-right-left","/api/composables","3.api/2.composables",[115,119,123,127,131],{"title":116,"path":117,"stem":118},"useTres","/api/composables/use-tres","3.api/2.composables/1.use-tres",{"title":120,"path":121,"stem":122},"useTresContext","/api/composables/use-tres-context","3.api/2.composables/2.use-tres-context",{"title":124,"path":125,"stem":126},"useLoop","/api/composables/use-loop","3.api/2.composables/3.use-loop",{"title":128,"path":129,"stem":130},"useGraph","/api/composables/use-graph","3.api/2.composables/4.use-graph",{"title":132,"path":133,"stem":134},"useLoader","/api/composables/use-loader","3.api/2.composables/5.use-loader",{"title":136,"icon":137,"path":138,"stem":139,"children":140,"page":47},"Event handling","i-lucide-mouse-pointer-2","/api/events","3.api/3.events",[141],{"title":142,"path":143,"stem":144},"Pointer Events","/api/events/pointer-events","3.api/3.events/1.pointer-events",{"title":146,"icon":147,"path":148,"stem":149,"children":150,"page":47},"Utils","i-lucide-wrench","/api/utils","3.api/4.utils",[151,155],{"title":152,"path":153,"stem":154},"Type Guards","/api/utils/type-guards","3.api/4.utils/1.type-guards",{"title":156,"path":157,"stem":158},"Directives","/api/utils/directives","3.api/4.utils/2.directives",{"title":160,"icon":161,"path":162,"stem":163,"children":164,"page":47},"Advanced","i-lucide-brain-circuit","/api/advanced","3.api/5.advanced",[165,169,173],{"title":166,"path":167,"stem":168},"Scaling Performance 🚀","/api/advanced/performance","3.api/5.advanced/performance",{"title":170,"path":171,"stem":172},"Primitives","/api/advanced/primitives","3.api/5.advanced/primitives",{"title":174,"path":175,"stem":176},"WebGPU","/api/advanced/web-gpu","3.api/5.advanced/web-gpu",{"title":178,"path":179,"stem":180,"children":181,"icon":184,"titleTemplate":189},"CLI","/cli","4.cli/1.index",[182,185],{"title":183,"path":179,"stem":180,"icon":184},"TresJS CLI","i-lucide-terminal",{"title":186,"path":187,"stem":188,"icon":88},"tres gltf","/cli/gltf","4.cli/2.gltf","%s · TresJS CLI",{"title":191,"path":192,"stem":193,"children":194},"Cookbook","/cookbook","5.cookbook",[195,198,202,206,210,214,218],{"title":196,"path":192,"stem":197},"Cookbook 🍳🧑‍🍳","5.cookbook/index",{"title":199,"path":200,"stem":201},"OrbitControls","/cookbook/orbit-controls","5.cookbook/1.orbit-controls",{"title":203,"path":204,"stem":205},"Basic Animations","/cookbook/basic-animations","5.cookbook/2.basic-animations",{"title":207,"path":208,"stem":209},"Model Animation","/cookbook/model-animation","5.cookbook/3.model-animation",{"title":211,"path":212,"stem":213},"Advanced GSAP Animations","/cookbook/advanced-gsap-animations","5.cookbook/4.advanced-gsap-animations",{"title":215,"path":216,"stem":217},"Tweakpane","/cookbook/tweakpane","5.cookbook/5.tweakpane",{"title":219,"path":220,"stem":221},"Dynamic components","/cookbook/transition-dynamic","5.cookbook/6.transition-dynamic",{"title":223,"path":224,"stem":225,"children":226},"Community","/community","6.community/1.index",[227,228],{"title":223,"path":224,"stem":225},{"title":229,"path":230,"stem":231},"Awesome Resources","/community/awesome-resources","6.community/awesome-resources",{"title":233,"path":234,"stem":235},"German Translation","/de","de",{"title":237,"path":238,"stem":239},"Spanish Translation","/es","es",{"title":241,"path":242,"stem":243},"French Translation","/fr","fr",{"title":245,"path":246,"stem":247},"Italian Translation","/it","it",{"title":249,"path":250,"stem":251},"Japanese Translation","/jp","jp",{"title":253,"path":254,"stem":255},"Chinese Translation","/zh","zh",{"id":257,"title":183,"body":258,"description":554,"extension":555,"links":556,"meta":557,"navigation":558,"path":179,"seo":559,"stem":180,"__hash__":560},"docs/4.cli/1.index.md",{"type":259,"value":260,"toc":549},"minimark",[261,281,285,288,350,353,404,410,421,432,436,451,479,483,528,545],[262,263,264,268,269,272,273,276,277,280],"p",{},[265,266,267],"code",{},"@tresjs/cli"," is the command line companion for TresJS projects. It exposes a single ",[265,270,271],{},"tres","\nbinary that automates the parts of a 3D project that are tedious to write by hand, starting\nwith turning a ",[265,274,275],{},".glb","/",[265,278,279],{},".gltf"," model into a real Vue component.",[282,283,13],"h2",{"id":284},"installation",[262,286,287],{},"Run it without installing anything:",[289,290,291,317,334],"code-group",{},[292,293,299],"pre",{"className":294,"code":295,"filename":296,"language":297,"meta":298,"style":298},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx @tresjs/cli --help\n","npm","bash","",[265,300,301],{"__ignoreMap":298},[302,303,306,310,314],"span",{"class":304,"line":305},"line",1,[302,307,309],{"class":308},"sBMFI","npx",[302,311,313],{"class":312},"sfazB"," @tresjs/cli",[302,315,316],{"class":312}," --help\n",[292,318,321],{"className":294,"code":319,"filename":320,"language":297,"meta":298,"style":298},"yarn dlx @tresjs/cli --help\n","yarn",[265,322,323],{"__ignoreMap":298},[302,324,325,327,330,332],{"class":304,"line":305},[302,326,320],{"class":308},[302,328,329],{"class":312}," dlx",[302,331,313],{"class":312},[302,333,316],{"class":312},[292,335,338],{"className":294,"code":336,"filename":337,"language":297,"meta":298,"style":298},"pnpm dlx @tresjs/cli --help\n","pnpm",[265,339,340],{"__ignoreMap":298},[302,341,342,344,346,348],{"class":304,"line":305},[302,343,337],{"class":308},[302,345,329],{"class":312},[302,347,313],{"class":312},[302,349,316],{"class":312},[262,351,352],{},"Or add it to the project so everyone on the team runs the same version:",[289,354,355,373,389],{},[292,356,358],{"className":294,"code":357,"filename":296,"language":297,"meta":298,"style":298},"npm install -D @tresjs/cli\n",[265,359,360],{"__ignoreMap":298},[302,361,362,364,367,370],{"class":304,"line":305},[302,363,296],{"class":308},[302,365,366],{"class":312}," install",[302,368,369],{"class":312}," -D",[302,371,372],{"class":312}," @tresjs/cli\n",[292,374,376],{"className":294,"code":375,"filename":320,"language":297,"meta":298,"style":298},"yarn add -D @tresjs/cli\n",[265,377,378],{"__ignoreMap":298},[302,379,380,382,385,387],{"class":304,"line":305},[302,381,320],{"class":308},[302,383,384],{"class":312}," add",[302,386,369],{"class":312},[302,388,372],{"class":312},[292,390,392],{"className":294,"code":391,"filename":337,"language":297,"meta":298,"style":298},"pnpm add -D @tresjs/cli\n",[265,393,394],{"__ignoreMap":298},[302,395,396,398,400,402],{"class":304,"line":305},[302,397,337],{"class":308},[302,399,384],{"class":312},[302,401,369],{"class":312},[302,403,372],{"class":312},[262,405,406,407,409],{},"Once installed, the binary is available as ",[265,408,271],{},":",[292,411,413],{"className":294,"code":412,"language":297,"meta":298,"style":298},"tres --help\n",[265,414,415],{"__ignoreMap":298},[302,416,417,419],{"class":304,"line":305},[302,418,271],{"class":308},[302,420,316],{"class":312},[422,423,424],"prose-note",{},[262,425,426,427,431],{},"The CLI requires ",[428,429,430],"strong",{},"Node.js 20 or later",".",[282,433,435],{"id":434},"commands","Commands",[437,438,439],"card-group",{},[440,441,443],"card",{":spotlight":442,"icon":88,"title":186,"to":187},"true",[262,444,445,446,276,448,450],{},"Generate a typed Vue component from a ",[265,447,275],{},[265,449,279],{}," model, with a slot per node so your\noverrides survive the next export.",[292,452,454],{"className":294,"code":453,"language":297,"meta":298,"style":298},"tres gltf public/models/robot.glb\n# ✔ src/models/Robot.gen.vue\n#   3 slots: Head, Body, Base\n",[265,455,456,466,473],{"__ignoreMap":298},[302,457,458,460,463],{"class":304,"line":305},[302,459,271],{"class":308},[302,461,462],{"class":312}," gltf",[302,464,465],{"class":312}," public/models/robot.glb\n",[302,467,469],{"class":304,"line":468},2,[302,470,472],{"class":471},"sHwdD","# ✔ src/models/Robot.gen.vue\n",[302,474,476],{"class":304,"line":475},3,[302,477,478],{"class":471},"#   3 slots: Head, Body, Base\n",[282,480,482],{"id":481},"global-options","Global options",[484,485,486,500],"table",{},[487,488,489],"thead",{},[490,491,492,497],"tr",{},[493,494,496],"th",{"align":495},"left","Option",[493,498,499],{"align":495},"Description",[501,502,503,514],"tbody",{},[490,504,505,511],{},[506,507,508],"td",{"align":495},[265,509,510],{},"-V, --version",[506,512,513],{"align":495},"Print the CLI version.",[490,515,516,521],{},[506,517,518],{"align":495},[265,519,520],{},"-h, --help",[506,522,523,524,527],{"align":495},"Print help for the CLI or for a specific command (",[265,525,526],{},"tres gltf --help",").",[422,529,530],{},[262,531,532,533,536,537,540,541,431],{},"Looking for a way to ",[428,534,535],{},"scaffold a new project","? That is a different tool: ",[265,538,539],{},"npm create tres@latest",".\nSee the ",[542,543,544],"a",{"href":14},"installation guide",[546,547,548],"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 .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 .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}",{"title":298,"searchDepth":305,"depth":468,"links":550},[551,552,553],{"id":284,"depth":468,"text":13},{"id":434,"depth":468,"text":435},{"id":481,"depth":468,"text":482},"The tres command line tool for TresJS projects.","md",null,{},{"icon":184},{"title":183,"description":554},"SyTzYlDJdLFErbV1aVhMVmBgr2wtR8jL2WP1fuysv8w",[562,564],{"title":174,"path":175,"stem":176,"description":563,"children":-1},"Explore experimental WebGPU rendering capabilities in TresJS.",{"title":186,"path":187,"stem":188,"description":565,"icon":88,"children":-1},"Generate a typed Vue component from a .glb/.gltf model, with a slot for every node.",1785400176480]