[{"data":1,"prerenderedAt":999},["ShallowReactive",2],{"navigation":3,"/getting-started/installation":256,"/getting-started/installation-surround":994},[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":13,"body":258,"description":986,"extension":987,"links":988,"meta":989,"navigation":990,"path":14,"seo":991,"stem":15,"__hash__":993},"docs/1.getting-started/2.installation.md",{"type":259,"value":260,"toc":978},"minimark",[261,270,274,338,346,381,387,397,400,404,407,411,712,716,719,768,792,799,802,974],[262,263,265,266],"h2",{"id":264},"quick-start-recommended","Quick Start (Recommended) ",[267,268],"u-icon",{"name":269},"i-heroicons-rocket-launch",[271,272,273],"p",{},"The fastest way to get started with TresJS is using our interactive CLI wizard:",[275,276,277,304,322],"code-group",{},[278,279,285],"pre",{"className":280,"code":281,"filename":282,"language":283,"meta":284,"style":284},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx create-tres my-tres-project\n","npm","bash","",[286,287,288],"code",{"__ignoreMap":284},[289,290,293,297,301],"span",{"class":291,"line":292},"line",1,[289,294,296],{"class":295},"sBMFI","npx",[289,298,300],{"class":299},"sfazB"," create-tres",[289,302,303],{"class":299}," my-tres-project\n",[278,305,308],{"className":280,"code":306,"filename":307,"language":283,"meta":284,"style":284},"yarn create tres my-tres-project\n","yarn",[286,309,310],{"__ignoreMap":284},[289,311,312,314,317,320],{"class":291,"line":292},[289,313,307],{"class":295},[289,315,316],{"class":299}," create",[289,318,319],{"class":299}," tres",[289,321,303],{"class":299},[278,323,326],{"className":280,"code":324,"filename":325,"language":283,"meta":284,"style":284},"pnpm create tres my-tres-project\n","pnpm",[286,327,328],{"__ignoreMap":284},[289,329,330,332,334,336],{"class":291,"line":292},[289,331,325],{"class":295},[289,333,316],{"class":299},[289,335,319],{"class":299},[289,337,303],{"class":299},[271,339,340,341,345],{},"The CLI provides an ",[342,343,344],"strong",{},"interactive wizard"," that guides you through:",[347,348,349],"prose-list",{},[350,351,352,360,367,374],"ul",{},[353,354,355,356,359],"li",{},"🎯 ",[342,357,358],{},"Template selection",": Choose between Vue + Vite or Nuxt",[353,361,362,363,366],{},"📦 ",[342,364,365],{},"Ecosystem packages",": Select from TresJS ecosystem packages (Cientos, Post-processing, Leches)",[353,368,369,370,373],{},"🔧 ",[342,371,372],{},"TypeScript support",": Type safe development with TypeScript",[353,375,376,377,380],{},"📏 ",[342,378,379],{},"ESLint integration",": Code quality with TresJS ESLint config",[382,383],"video-accordion",{"start-time":384,"title":385,"video-id":386},"29","Watch this video from Alvarosabu about the TresJS CLI","XsXfF9-qe60",[388,389,390],"prose-note",{},[271,391,392,393,396],{},"This is the ",[342,394,395],{},"recommended approach"," for new projects as it handles all the configuration automatically and lets you choose exactly what you need.",[398,399],"hr",{},[262,401,403],{"id":402},"manual-installation","Manual Installation",[271,405,406],{},"If you prefer to set up TresJS manually or add it to an existing project, follow the instructions below:",[262,408,410],{"id":409},"vue-project","Vue project",[412,413,414,419,422,473,477,480,529,533,540,706],"steps",{},[415,416,418],"h3",{"id":417},"install-tresjs-and-threejs","Install TresJS and Three.js",[271,420,421],{},"Install the core TresJS package and the Three.js dependency:",[275,423,424,442,458],{},[278,425,427],{"className":280,"code":426,"filename":282,"language":283,"meta":284,"style":284},"npm install @tresjs/core three\n",[286,428,429],{"__ignoreMap":284},[289,430,431,433,436,439],{"class":291,"line":292},[289,432,282],{"class":295},[289,434,435],{"class":299}," install",[289,437,438],{"class":299}," @tresjs/core",[289,440,441],{"class":299}," three\n",[278,443,445],{"className":280,"code":444,"filename":307,"language":283,"meta":284,"style":284},"yarn add @tresjs/core three\n",[286,446,447],{"__ignoreMap":284},[289,448,449,451,454,456],{"class":291,"line":292},[289,450,307],{"class":295},[289,452,453],{"class":299}," add",[289,455,438],{"class":299},[289,457,441],{"class":299},[278,459,461],{"className":280,"code":460,"filename":325,"language":283,"meta":284,"style":284},"pnpm add @tresjs/core three\n",[286,462,463],{"__ignoreMap":284},[289,464,465,467,469,471],{"class":291,"line":292},[289,466,325],{"class":295},[289,468,453],{"class":299},[289,470,438],{"class":299},[289,472,441],{"class":299},[415,474,476],{"id":475},"install-typescript-types-optional","Install TypeScript types (Optional)",[271,478,479],{},"If you're using TypeScript, install the Three.js type definitions:",[275,481,482,499,514],{},[278,483,485],{"className":280,"code":484,"filename":282,"language":283,"meta":284,"style":284},"npm install @types/three -D\n",[286,486,487],{"__ignoreMap":284},[289,488,489,491,493,496],{"class":291,"line":292},[289,490,282],{"class":295},[289,492,435],{"class":299},[289,494,495],{"class":299}," @types/three",[289,497,498],{"class":299}," -D\n",[278,500,502],{"className":280,"code":501,"filename":307,"language":283,"meta":284,"style":284},"yarn add @types/three -D\n",[286,503,504],{"__ignoreMap":284},[289,505,506,508,510,512],{"class":291,"line":292},[289,507,307],{"class":295},[289,509,453],{"class":299},[289,511,495],{"class":299},[289,513,498],{"class":299},[278,515,517],{"className":280,"code":516,"filename":325,"language":283,"meta":284,"style":284},"pnpm add @types/three -D\n",[286,518,519],{"__ignoreMap":284},[289,520,521,523,525,527],{"class":291,"line":292},[289,522,325],{"class":295},[289,524,453],{"class":299},[289,526,495],{"class":299},[289,528,498],{"class":299},[415,530,532],{"id":531},"configure-vite","Configure Vite",[271,534,535,536,539],{},"Add the TresJS template compiler options to your ",[286,537,538],{},"vite.config.ts",":",[278,541,545],{"className":542,"code":543,"filename":538,"language":544,"meta":284,"style":284},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { templateCompilerOptions } from '@tresjs/core'\nimport { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\n\nexport default defineConfig({\n  plugins: [\n    vue({\n      // Other config\n      ...templateCompilerOptions\n    }),\n  ],\n})\n","typescript",[286,546,547,576,597,615,621,639,651,661,668,677,689,697],{"__ignoreMap":284},[289,548,549,553,557,561,564,567,570,573],{"class":291,"line":292},[289,550,552],{"class":551},"s7zQu","import",[289,554,556],{"class":555},"sMK4o"," {",[289,558,560],{"class":559},"sTEyZ"," templateCompilerOptions",[289,562,563],{"class":555}," }",[289,565,566],{"class":551}," from",[289,568,569],{"class":555}," '",[289,571,572],{"class":299},"@tresjs/core",[289,574,575],{"class":555},"'\n",[289,577,579,581,583,586,588,590,592,595],{"class":291,"line":578},2,[289,580,552],{"class":551},[289,582,556],{"class":555},[289,584,585],{"class":559}," defineConfig",[289,587,563],{"class":555},[289,589,566],{"class":551},[289,591,569],{"class":555},[289,593,594],{"class":299},"vite",[289,596,575],{"class":555},[289,598,600,602,605,608,610,613],{"class":291,"line":599},3,[289,601,552],{"class":551},[289,603,604],{"class":559}," vue ",[289,606,607],{"class":551},"from",[289,609,569],{"class":555},[289,611,612],{"class":299},"@vitejs/plugin-vue",[289,614,575],{"class":555},[289,616,618],{"class":291,"line":617},4,[289,619,620],{"emptyLinePlaceholder":39},"\n",[289,622,624,627,630,633,636],{"class":291,"line":623},5,[289,625,626],{"class":551},"export",[289,628,629],{"class":551}," default",[289,631,585],{"class":632},"s2Zo4",[289,634,635],{"class":559},"(",[289,637,638],{"class":555},"{\n",[289,640,642,646,648],{"class":291,"line":641},6,[289,643,645],{"class":644},"swJcz","  plugins",[289,647,539],{"class":555},[289,649,650],{"class":559}," [\n",[289,652,654,657,659],{"class":291,"line":653},7,[289,655,656],{"class":632},"    vue",[289,658,635],{"class":559},[289,660,638],{"class":555},[289,662,664],{"class":291,"line":663},8,[289,665,667],{"class":666},"sHwdD","      // Other config\n",[289,669,671,674],{"class":291,"line":670},9,[289,672,673],{"class":555},"      ...",[289,675,676],{"class":559},"templateCompilerOptions\n",[289,678,680,683,686],{"class":291,"line":679},10,[289,681,682],{"class":555},"    }",[289,684,685],{"class":559},")",[289,687,688],{"class":555},",\n",[289,690,692,695],{"class":291,"line":691},11,[289,693,694],{"class":559},"  ]",[289,696,688],{"class":555},[289,698,700,703],{"class":291,"line":699},12,[289,701,702],{"class":555},"}",[289,704,705],{"class":559},")\n",[707,708,709],"prose-warning",{},[271,710,711],{},"This configuration is required to make the template compiler work with the TresJS custom renderer and prevent console warnings.",[415,713,715],{"id":714},"ecosystem-packages-optional","Ecosystem packages (Optional)",[271,717,718],{},"Install additional TresJS ecosystem packages for extended functionality:",[275,720,721,738,753],{},[278,722,724],{"className":280,"code":723,"filename":282,"language":283,"meta":284,"style":284},"npm install @tresjs/cientos @tresjs/post-processing\n",[286,725,726],{"__ignoreMap":284},[289,727,728,730,732,735],{"class":291,"line":292},[289,729,282],{"class":295},[289,731,435],{"class":299},[289,733,734],{"class":299}," @tresjs/cientos",[289,736,737],{"class":299}," @tresjs/post-processing\n",[278,739,741],{"className":280,"code":740,"filename":307,"language":283,"meta":284,"style":284},"yarn add @tresjs/cientos @tresjs/post-processing\n",[286,742,743],{"__ignoreMap":284},[289,744,745,747,749,751],{"class":291,"line":292},[289,746,307],{"class":295},[289,748,453],{"class":299},[289,750,734],{"class":299},[289,752,737],{"class":299},[278,754,756],{"className":280,"code":755,"filename":325,"language":283,"meta":284,"style":284},"pnpm add @tresjs/cientos @tresjs/post-processing\n",[286,757,758],{"__ignoreMap":284},[289,759,760,762,764,766],{"class":291,"line":292},[289,761,325],{"class":295},[289,763,453],{"class":299},[289,765,734],{"class":299},[289,767,737],{"class":299},[388,769,770,778],{},[271,771,772,773,539],{},"These packages will be automatically imported by the ",[774,775,777],"a",{"href":776},"/getting-started/installation#nuxt-project","Nuxt module",[350,779,780,786],{},[353,781,782,785],{},[342,783,784],{},"Cientos",": A collection of useful helpers and components",[353,787,788,791],{},[342,789,790],{},"Post-processing",": Post-processing effects for enhanced visuals",[262,793,795,796],{"id":794},"nuxt-project","Nuxt project ",[267,797],{"name":798},"i-simple-icons-nuxt",[271,800,801],{},"If you're using Nuxt, you can use the official TresJS Nuxt module for a seamless integration experience.",[412,803,804,808,811,860,864,878,924,928,931],{},[415,805,807],{"id":806},"install-the-nuxt-module","Install the Nuxt module",[271,809,810],{},"Install the TresJS Nuxt module and Three.js:",[275,812,813,830,845],{},[278,814,816],{"className":280,"code":815,"filename":282,"language":283,"meta":284,"style":284},"npm install three @tresjs/nuxt\n",[286,817,818],{"__ignoreMap":284},[289,819,820,822,824,827],{"class":291,"line":292},[289,821,282],{"class":295},[289,823,435],{"class":299},[289,825,826],{"class":299}," three",[289,828,829],{"class":299}," @tresjs/nuxt\n",[278,831,833],{"className":280,"code":832,"filename":307,"language":283,"meta":284,"style":284},"yarn add three @tresjs/nuxt\n",[286,834,835],{"__ignoreMap":284},[289,836,837,839,841,843],{"class":291,"line":292},[289,838,307],{"class":295},[289,840,453],{"class":299},[289,842,826],{"class":299},[289,844,829],{"class":299},[278,846,848],{"className":280,"code":847,"filename":325,"language":283,"meta":284,"style":284},"pnpm add three @tresjs/nuxt\n",[286,849,850],{"__ignoreMap":284},[289,851,852,854,856,858],{"class":291,"line":292},[289,853,325],{"class":295},[289,855,453],{"class":299},[289,857,826],{"class":299},[289,859,829],{"class":299},[415,861,863],{"id":862},"configure-the-module","Configure the module",[271,865,866,867,870,871,874,875,539],{},"Add ",[286,868,869],{},"@tresjs/nuxt"," to the ",[286,872,873],{},"modules"," section of your ",[286,876,877],{},"nuxt.config.ts",[278,879,881],{"className":542,"code":880,"filename":877,"language":544,"meta":284,"style":284},"export default defineNuxtConfig({\n  modules: ['@tresjs/nuxt'],\n})\n",[286,882,883,896,918],{"__ignoreMap":284},[289,884,885,887,889,892,894],{"class":291,"line":292},[289,886,626],{"class":551},[289,888,629],{"class":551},[289,890,891],{"class":632}," defineNuxtConfig",[289,893,635],{"class":559},[289,895,638],{"class":555},[289,897,898,901,903,906,909,911,913,916],{"class":291,"line":578},[289,899,900],{"class":644},"  modules",[289,902,539],{"class":555},[289,904,905],{"class":559}," [",[289,907,908],{"class":555},"'",[289,910,869],{"class":299},[289,912,908],{"class":555},[289,914,915],{"class":559},"]",[289,917,688],{"class":555},[289,919,920,922],{"class":291,"line":599},[289,921,702],{"class":555},[289,923,705],{"class":559},[415,925,927],{"id":926},"start-using-tresjs","Start using TresJS",[271,929,930],{},"That's it! The module provides several benefits:",[347,932,933],{},[350,934,935,942,960,967],{},[353,936,937,938,941],{},"🤓 ",[342,939,940],{},"Auto-import"," components and composables from the TresJS ecosystem",[353,943,944,945,948,949,952,953,956,957,685],{},"🖥️ ",[342,946,947],{},"Client-only rendering"," for ",[286,950,951],{},"TresCanvas"," (no need for ",[286,954,955],{},".client"," suffix or ",[286,958,959],{},"\u003CClientOnly />",[353,961,962,963,966],{},"⚙️ ",[342,964,965],{},"Automatic configuration"," of the Vue compiler for TresJS components",[353,968,969,970,973],{},"✨ ",[342,971,972],{},"DX Magic"," that comes with Nuxt",[975,976,977],"style",{},"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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":284,"searchDepth":292,"depth":578,"links":979},[980,981,982,985],{"id":264,"depth":578,"text":265},{"id":402,"depth":578,"text":403},{"id":409,"depth":578,"text":410,"children":983},[984],{"id":714,"depth":599,"text":715},{"id":794,"depth":578,"text":795},"Get started with TresJS.","md",null,{},{"icon":16},{"description":992,"title":13},"Learn how to install and set up TresJS in your Vue project.","SlTOyrCfZRUgFIvEuWVa0JLVbJzaaSJZhyXpJsHCsb0",[995,997],{"title":10,"path":6,"stem":7,"description":996,"icon":11,"children":-1},"TresJS's goal is to make 3D development approachable for Vue developers by using familiar concepts, such as components and composables, thereby reducing the Three.js learning curve.",{"title":18,"path":19,"stem":20,"description":998,"icon":21,"children":-1},"Learn how to create your first 3D scene with TresJS with this step-by-step guide.",1785417167056]