[{"data":1,"prerenderedAt":683},["ShallowReactive",2],{"navigation":3,"/cli":256,"/cli-surround":678},[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":671,"extension":672,"links":673,"meta":674,"navigation":675,"path":179,"seo":676,"stem":180,"__hash__":677},"docs/4.cli/1.index.md",{"type":259,"value":260,"toc":665},"minimark",[261,281,285,288,350,353,404,410,421,432,436,451,519,523,568,585,589,608,649,661],[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# ▲ ■ ● Tres  gltf  robot.glb\n#\n# ✔ Parse       12 named nodes · 3 meshes · 2 materials    34ms\n# ✔ Emit        3 slots                                     1ms\n#\n# ✔ src/models/Robot.gen.vue\n#   slots  Head, Body, Base\n#\n# Done in 41ms\n",[265,455,456,466,473,479,485,491,496,502,508,513],{"__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","# ▲ ■ ● Tres  gltf  robot.glb\n",[302,474,476],{"class":304,"line":475},3,[302,477,478],{"class":471},"#\n",[302,480,482],{"class":304,"line":481},4,[302,483,484],{"class":471},"# ✔ Parse       12 named nodes · 3 meshes · 2 materials    34ms\n",[302,486,488],{"class":304,"line":487},5,[302,489,490],{"class":471},"# ✔ Emit        3 slots                                     1ms\n",[302,492,494],{"class":304,"line":493},6,[302,495,478],{"class":471},[302,497,499],{"class":304,"line":498},7,[302,500,501],{"class":471},"# ✔ src/models/Robot.gen.vue\n",[302,503,505],{"class":304,"line":504},8,[302,506,507],{"class":471},"#   slots  Head, Body, Base\n",[302,509,511],{"class":304,"line":510},9,[302,512,478],{"class":471},[302,514,516],{"class":304,"line":515},10,[302,517,518],{"class":471},"# Done in 41ms\n",[282,520,522],{"id":521},"global-options","Global options",[524,525,526,540],"table",{},[527,528,529],"thead",{},[530,531,532,537],"tr",{},[533,534,536],"th",{"align":535},"left","Option",[533,538,539],{"align":535},"Description",[541,542,543,554],"tbody",{},[530,544,545,551],{},[546,547,548],"td",{"align":535},[265,549,550],{},"-V, --version",[546,552,553],{"align":535},"Print the CLI version.",[530,555,556,561],{},[546,557,558],{"align":535},[265,559,560],{},"-h, --help",[546,562,563,564,567],{"align":535},"Print help for the CLI or for a specific command (",[265,565,566],{},"tres gltf --help",").",[422,569,570],{},[262,571,572,573,576,577,580,581,431],{},"Looking for a way to ",[428,574,575],{},"scaffold a new project","? That is a different tool: ",[265,578,579],{},"npm create tres@latest",".\nSee the ",[582,583,584],"a",{"href":14},"installation guide",[282,586,588],{"id":587},"piping","Piping",[262,590,591,592,595,596,599,600,603,604,607],{},"Progress (the header, the phases, warnings, the file list) goes to ",[428,593,594],{},"stderr",". ",[428,597,598],{},"stdout"," carries\nonly what a command produces: the JSON of ",[265,601,602],{},"--json",", the component of ",[265,605,606],{},"--console",". So redirecting\ngives you the payload alone, while you still watch the run on screen:",[292,609,611],{"className":294,"code":610,"language":297,"meta":298,"style":298},"tres gltf public/models/robot.glb --json > robot.json\ntres gltf public/models/robot.glb --console | pbcopy\n",[265,612,613,632],{"__ignoreMap":298},[302,614,615,617,619,622,625,629],{"class":304,"line":305},[302,616,271],{"class":308},[302,618,462],{"class":312},[302,620,621],{"class":312}," public/models/robot.glb",[302,623,624],{"class":312}," --json",[302,626,628],{"class":627},"sMK4o"," >",[302,630,631],{"class":312}," robot.json\n",[302,633,634,636,638,640,643,646],{"class":304,"line":468},[302,635,271],{"class":308},[302,637,462],{"class":312},[302,639,621],{"class":312},[302,641,642],{"class":312}," --console",[302,644,645],{"class":627}," |",[302,647,648],{"class":308}," pbcopy\n",[262,650,651,652,660],{},"Colour follows ",[582,653,657],{"href":654,"rel":655},"https://no-color.org/",[656],"nofollow",[265,658,659],{},"NO_COLOR",", and the spinner turns itself off when stderr\nis not a terminal, so CI logs get one line per phase instead of a repaint per frame.",[662,663,664],"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}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}",{"title":298,"searchDepth":305,"depth":468,"links":666},[667,668,669,670],{"id":284,"depth":468,"text":13},{"id":434,"depth":468,"text":435},{"id":521,"depth":468,"text":522},{"id":587,"depth":468,"text":588},"The tres command line tool for TresJS projects.","md",null,{},{"icon":184},{"title":183,"description":671},"qyMtrBQtXXA-qaT1JmvP-IsbU7_r_sb4Vui9UJcWCMM",[679,681],{"title":174,"path":175,"stem":176,"description":680,"children":-1},"Explore experimental WebGPU rendering capabilities in TresJS.",{"title":186,"path":187,"stem":188,"description":682,"icon":88,"children":-1},"Generate a typed Vue component from a .glb/.gltf model, with a slot for every node.",1789116503944]