[{"data":1,"prerenderedAt":982},["ShallowReactive",2],{"navigation":3,"/getting-started/installation":239,"/getting-started/installation-surround":977},[4,29,78,173,205,215,219,223,227,231,235],{"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,104,131,141,155],{"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],{"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,"titleTemplate":106,"icon":107,"path":108,"stem":109,"children":110,"page":47},"Composables","%s · TresJS Composables","i-lucide-arrow-right-left","/api/composables","3.api/2.composables",[111,115,119,123,127],{"title":112,"path":113,"stem":114},"useTres","/api/composables/use-tres","3.api/2.composables/1.use-tres",{"title":116,"path":117,"stem":118},"useTresContext","/api/composables/use-tres-context","3.api/2.composables/2.use-tres-context",{"title":120,"path":121,"stem":122},"useLoop","/api/composables/use-loop","3.api/2.composables/3.use-loop",{"title":124,"path":125,"stem":126},"useGraph","/api/composables/use-graph","3.api/2.composables/4.use-graph",{"title":128,"path":129,"stem":130},"useLoader","/api/composables/use-loader","3.api/2.composables/5.use-loader",{"title":132,"icon":133,"path":134,"stem":135,"children":136,"page":47},"Event handling","i-lucide-mouse-pointer-2","/api/events","3.api/3.events",[137],{"title":138,"path":139,"stem":140},"Pointer Events","/api/events/pointer-events","3.api/3.events/1.pointer-events",{"title":142,"icon":143,"path":144,"stem":145,"children":146,"page":47},"Utils","i-lucide-wrench","/api/utils","3.api/4.utils",[147,151],{"title":148,"path":149,"stem":150},"Type Guards","/api/utils/type-guards","3.api/4.utils/1.type-guards",{"title":152,"path":153,"stem":154},"Directives","/api/utils/directives","3.api/4.utils/2.directives",{"title":156,"icon":157,"path":158,"stem":159,"children":160,"page":47},"Advanced","i-lucide-brain-circuit","/api/advanced","3.api/5.advanced",[161,165,169],{"title":162,"path":163,"stem":164},"Scaling Performance 🚀","/api/advanced/performance","3.api/5.advanced/performance",{"title":166,"path":167,"stem":168},"Primitives","/api/advanced/primitives","3.api/5.advanced/primitives",{"title":170,"path":171,"stem":172},"WebGPU","/api/advanced/web-gpu","3.api/5.advanced/web-gpu",{"title":174,"path":175,"stem":176,"children":177},"Cookbook","/cookbook","4.cookbook",[178,181,185,189,193,197,201],{"title":179,"path":175,"stem":180},"Cookbook 🍳🧑‍🍳","4.cookbook/index",{"title":182,"path":183,"stem":184},"OrbitControls","/cookbook/orbit-controls","4.cookbook/1.orbit-controls",{"title":186,"path":187,"stem":188},"Basic Animations","/cookbook/basic-animations","4.cookbook/2.basic-animations",{"title":190,"path":191,"stem":192},"Model Animation","/cookbook/model-animation","4.cookbook/3.model-animation",{"title":194,"path":195,"stem":196},"Advanced GSAP Animations","/cookbook/advanced-gsap-animations","4.cookbook/4.advanced-gsap-animations",{"title":198,"path":199,"stem":200},"Tweakpane","/cookbook/tweakpane","4.cookbook/5.tweakpane",{"title":202,"path":203,"stem":204},"Dynamic components","/cookbook/transition-dynamic","4.cookbook/6.transition-dynamic",{"title":206,"path":207,"stem":208,"children":209},"Community","/community","5.community/1.index",[210,211],{"title":206,"path":207,"stem":208},{"title":212,"path":213,"stem":214},"Awesome Resources","/community/awesome-resources","5.community/awesome-resources",{"title":216,"path":217,"stem":218},"German Translation","/de","de",{"title":220,"path":221,"stem":222},"Spanish Translation","/es","es",{"title":224,"path":225,"stem":226},"French Translation","/fr","fr",{"title":228,"path":229,"stem":230},"Italian Translation","/it","it",{"title":232,"path":233,"stem":234},"Japanese Translation","/jp","jp",{"title":236,"path":237,"stem":238},"Chinese Translation","/zh","zh",{"id":240,"title":13,"body":241,"description":969,"extension":970,"links":971,"meta":972,"navigation":973,"path":14,"seo":974,"stem":15,"__hash__":976},"docs/1.getting-started/2.installation.md",{"type":242,"value":243,"toc":961},"minimark",[244,253,257,321,329,364,370,380,383,387,390,394,695,699,702,751,775,782,785,957],[245,246,248,249],"h2",{"id":247},"quick-start-recommended","Quick Start (Recommended) ",[250,251],"u-icon",{"name":252},"i-heroicons-rocket-launch",[254,255,256],"p",{},"The fastest way to get started with TresJS is using our interactive CLI wizard:",[258,259,260,287,305],"code-group",{},[261,262,268],"pre",{"className":263,"code":264,"filename":265,"language":266,"meta":267,"style":267},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx create-tres my-tres-project\n","npm","bash","",[269,270,271],"code",{"__ignoreMap":267},[272,273,276,280,284],"span",{"class":274,"line":275},"line",1,[272,277,279],{"class":278},"sBMFI","npx",[272,281,283],{"class":282},"sfazB"," create-tres",[272,285,286],{"class":282}," my-tres-project\n",[261,288,291],{"className":263,"code":289,"filename":290,"language":266,"meta":267,"style":267},"yarn create tres my-tres-project\n","yarn",[269,292,293],{"__ignoreMap":267},[272,294,295,297,300,303],{"class":274,"line":275},[272,296,290],{"class":278},[272,298,299],{"class":282}," create",[272,301,302],{"class":282}," tres",[272,304,286],{"class":282},[261,306,309],{"className":263,"code":307,"filename":308,"language":266,"meta":267,"style":267},"pnpm create tres my-tres-project\n","pnpm",[269,310,311],{"__ignoreMap":267},[272,312,313,315,317,319],{"class":274,"line":275},[272,314,308],{"class":278},[272,316,299],{"class":282},[272,318,302],{"class":282},[272,320,286],{"class":282},[254,322,323,324,328],{},"The CLI provides an ",[325,326,327],"strong",{},"interactive wizard"," that guides you through:",[330,331,332],"prose-list",{},[333,334,335,343,350,357],"ul",{},[336,337,338,339,342],"li",{},"🎯 ",[325,340,341],{},"Template selection",": Choose between Vue + Vite or Nuxt",[336,344,345,346,349],{},"📦 ",[325,347,348],{},"Ecosystem packages",": Select from TresJS ecosystem packages (Cientos, Post-processing, Leches)",[336,351,352,353,356],{},"🔧 ",[325,354,355],{},"TypeScript support",": Type safe development with TypeScript",[336,358,359,360,363],{},"📏 ",[325,361,362],{},"ESLint integration",": Code quality with TresJS ESLint config",[365,366],"video-accordion",{"start-time":367,"title":368,"video-id":369},"29","Watch this video from Alvarosabu about the TresJS CLI","XsXfF9-qe60",[371,372,373],"prose-note",{},[254,374,375,376,379],{},"This is the ",[325,377,378],{},"recommended approach"," for new projects as it handles all the configuration automatically and lets you choose exactly what you need.",[381,382],"hr",{},[245,384,386],{"id":385},"manual-installation","Manual Installation",[254,388,389],{},"If you prefer to set up TresJS manually or add it to an existing project, follow the instructions below:",[245,391,393],{"id":392},"vue-project","Vue project",[395,396,397,402,405,456,460,463,512,516,523,689],"steps",{},[398,399,401],"h3",{"id":400},"install-tresjs-and-threejs","Install TresJS and Three.js",[254,403,404],{},"Install the core TresJS package and the Three.js dependency:",[258,406,407,425,441],{},[261,408,410],{"className":263,"code":409,"filename":265,"language":266,"meta":267,"style":267},"npm install @tresjs/core three\n",[269,411,412],{"__ignoreMap":267},[272,413,414,416,419,422],{"class":274,"line":275},[272,415,265],{"class":278},[272,417,418],{"class":282}," install",[272,420,421],{"class":282}," @tresjs/core",[272,423,424],{"class":282}," three\n",[261,426,428],{"className":263,"code":427,"filename":290,"language":266,"meta":267,"style":267},"yarn add @tresjs/core three\n",[269,429,430],{"__ignoreMap":267},[272,431,432,434,437,439],{"class":274,"line":275},[272,433,290],{"class":278},[272,435,436],{"class":282}," add",[272,438,421],{"class":282},[272,440,424],{"class":282},[261,442,444],{"className":263,"code":443,"filename":308,"language":266,"meta":267,"style":267},"pnpm add @tresjs/core three\n",[269,445,446],{"__ignoreMap":267},[272,447,448,450,452,454],{"class":274,"line":275},[272,449,308],{"class":278},[272,451,436],{"class":282},[272,453,421],{"class":282},[272,455,424],{"class":282},[398,457,459],{"id":458},"install-typescript-types-optional","Install TypeScript types (Optional)",[254,461,462],{},"If you're using TypeScript, install the Three.js type definitions:",[258,464,465,482,497],{},[261,466,468],{"className":263,"code":467,"filename":265,"language":266,"meta":267,"style":267},"npm install @types/three -D\n",[269,469,470],{"__ignoreMap":267},[272,471,472,474,476,479],{"class":274,"line":275},[272,473,265],{"class":278},[272,475,418],{"class":282},[272,477,478],{"class":282}," @types/three",[272,480,481],{"class":282}," -D\n",[261,483,485],{"className":263,"code":484,"filename":290,"language":266,"meta":267,"style":267},"yarn add @types/three -D\n",[269,486,487],{"__ignoreMap":267},[272,488,489,491,493,495],{"class":274,"line":275},[272,490,290],{"class":278},[272,492,436],{"class":282},[272,494,478],{"class":282},[272,496,481],{"class":282},[261,498,500],{"className":263,"code":499,"filename":308,"language":266,"meta":267,"style":267},"pnpm add @types/three -D\n",[269,501,502],{"__ignoreMap":267},[272,503,504,506,508,510],{"class":274,"line":275},[272,505,308],{"class":278},[272,507,436],{"class":282},[272,509,478],{"class":282},[272,511,481],{"class":282},[398,513,515],{"id":514},"configure-vite","Configure Vite",[254,517,518,519,522],{},"Add the TresJS template compiler options to your ",[269,520,521],{},"vite.config.ts",":",[261,524,528],{"className":525,"code":526,"filename":521,"language":527,"meta":267,"style":267},"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",[269,529,530,559,580,598,604,622,634,644,651,660,672,680],{"__ignoreMap":267},[272,531,532,536,540,544,547,550,553,556],{"class":274,"line":275},[272,533,535],{"class":534},"s7zQu","import",[272,537,539],{"class":538},"sMK4o"," {",[272,541,543],{"class":542},"sTEyZ"," templateCompilerOptions",[272,545,546],{"class":538}," }",[272,548,549],{"class":534}," from",[272,551,552],{"class":538}," '",[272,554,555],{"class":282},"@tresjs/core",[272,557,558],{"class":538},"'\n",[272,560,562,564,566,569,571,573,575,578],{"class":274,"line":561},2,[272,563,535],{"class":534},[272,565,539],{"class":538},[272,567,568],{"class":542}," defineConfig",[272,570,546],{"class":538},[272,572,549],{"class":534},[272,574,552],{"class":538},[272,576,577],{"class":282},"vite",[272,579,558],{"class":538},[272,581,583,585,588,591,593,596],{"class":274,"line":582},3,[272,584,535],{"class":534},[272,586,587],{"class":542}," vue ",[272,589,590],{"class":534},"from",[272,592,552],{"class":538},[272,594,595],{"class":282},"@vitejs/plugin-vue",[272,597,558],{"class":538},[272,599,601],{"class":274,"line":600},4,[272,602,603],{"emptyLinePlaceholder":39},"\n",[272,605,607,610,613,616,619],{"class":274,"line":606},5,[272,608,609],{"class":534},"export",[272,611,612],{"class":534}," default",[272,614,568],{"class":615},"s2Zo4",[272,617,618],{"class":542},"(",[272,620,621],{"class":538},"{\n",[272,623,625,629,631],{"class":274,"line":624},6,[272,626,628],{"class":627},"swJcz","  plugins",[272,630,522],{"class":538},[272,632,633],{"class":542}," [\n",[272,635,637,640,642],{"class":274,"line":636},7,[272,638,639],{"class":615},"    vue",[272,641,618],{"class":542},[272,643,621],{"class":538},[272,645,647],{"class":274,"line":646},8,[272,648,650],{"class":649},"sHwdD","      // Other config\n",[272,652,654,657],{"class":274,"line":653},9,[272,655,656],{"class":538},"      ...",[272,658,659],{"class":542},"templateCompilerOptions\n",[272,661,663,666,669],{"class":274,"line":662},10,[272,664,665],{"class":538},"    }",[272,667,668],{"class":542},")",[272,670,671],{"class":538},",\n",[272,673,675,678],{"class":274,"line":674},11,[272,676,677],{"class":542},"  ]",[272,679,671],{"class":538},[272,681,683,686],{"class":274,"line":682},12,[272,684,685],{"class":538},"}",[272,687,688],{"class":542},")\n",[690,691,692],"prose-warning",{},[254,693,694],{},"This configuration is required to make the template compiler work with the TresJS custom renderer and prevent console warnings.",[398,696,698],{"id":697},"ecosystem-packages-optional","Ecosystem packages (Optional)",[254,700,701],{},"Install additional TresJS ecosystem packages for extended functionality:",[258,703,704,721,736],{},[261,705,707],{"className":263,"code":706,"filename":265,"language":266,"meta":267,"style":267},"npm install @tresjs/cientos @tresjs/post-processing\n",[269,708,709],{"__ignoreMap":267},[272,710,711,713,715,718],{"class":274,"line":275},[272,712,265],{"class":278},[272,714,418],{"class":282},[272,716,717],{"class":282}," @tresjs/cientos",[272,719,720],{"class":282}," @tresjs/post-processing\n",[261,722,724],{"className":263,"code":723,"filename":290,"language":266,"meta":267,"style":267},"yarn add @tresjs/cientos @tresjs/post-processing\n",[269,725,726],{"__ignoreMap":267},[272,727,728,730,732,734],{"class":274,"line":275},[272,729,290],{"class":278},[272,731,436],{"class":282},[272,733,717],{"class":282},[272,735,720],{"class":282},[261,737,739],{"className":263,"code":738,"filename":308,"language":266,"meta":267,"style":267},"pnpm add @tresjs/cientos @tresjs/post-processing\n",[269,740,741],{"__ignoreMap":267},[272,742,743,745,747,749],{"class":274,"line":275},[272,744,308],{"class":278},[272,746,436],{"class":282},[272,748,717],{"class":282},[272,750,720],{"class":282},[371,752,753,761],{},[254,754,755,756,522],{},"These packages will be automatically imported by the ",[757,758,760],"a",{"href":759},"/getting-started/installation#nuxt-project","Nuxt module",[333,762,763,769],{},[336,764,765,768],{},[325,766,767],{},"Cientos",": A collection of useful helpers and components",[336,770,771,774],{},[325,772,773],{},"Post-processing",": Post-processing effects for enhanced visuals",[245,776,778,779],{"id":777},"nuxt-project","Nuxt project ",[250,780],{"name":781},"i-simple-icons-nuxt",[254,783,784],{},"If you're using Nuxt, you can use the official TresJS Nuxt module for a seamless integration experience.",[395,786,787,791,794,843,847,861,907,911,914],{},[398,788,790],{"id":789},"install-the-nuxt-module","Install the Nuxt module",[254,792,793],{},"Install the TresJS Nuxt module and Three.js:",[258,795,796,813,828],{},[261,797,799],{"className":263,"code":798,"filename":265,"language":266,"meta":267,"style":267},"npm install three @tresjs/nuxt\n",[269,800,801],{"__ignoreMap":267},[272,802,803,805,807,810],{"class":274,"line":275},[272,804,265],{"class":278},[272,806,418],{"class":282},[272,808,809],{"class":282}," three",[272,811,812],{"class":282}," @tresjs/nuxt\n",[261,814,816],{"className":263,"code":815,"filename":290,"language":266,"meta":267,"style":267},"yarn add three @tresjs/nuxt\n",[269,817,818],{"__ignoreMap":267},[272,819,820,822,824,826],{"class":274,"line":275},[272,821,290],{"class":278},[272,823,436],{"class":282},[272,825,809],{"class":282},[272,827,812],{"class":282},[261,829,831],{"className":263,"code":830,"filename":308,"language":266,"meta":267,"style":267},"pnpm add three @tresjs/nuxt\n",[269,832,833],{"__ignoreMap":267},[272,834,835,837,839,841],{"class":274,"line":275},[272,836,308],{"class":278},[272,838,436],{"class":282},[272,840,809],{"class":282},[272,842,812],{"class":282},[398,844,846],{"id":845},"configure-the-module","Configure the module",[254,848,849,850,853,854,857,858,522],{},"Add ",[269,851,852],{},"@tresjs/nuxt"," to the ",[269,855,856],{},"modules"," section of your ",[269,859,860],{},"nuxt.config.ts",[261,862,864],{"className":525,"code":863,"filename":860,"language":527,"meta":267,"style":267},"export default defineNuxtConfig({\n  modules: ['@tresjs/nuxt'],\n})\n",[269,865,866,879,901],{"__ignoreMap":267},[272,867,868,870,872,875,877],{"class":274,"line":275},[272,869,609],{"class":534},[272,871,612],{"class":534},[272,873,874],{"class":615}," defineNuxtConfig",[272,876,618],{"class":542},[272,878,621],{"class":538},[272,880,881,884,886,889,892,894,896,899],{"class":274,"line":561},[272,882,883],{"class":627},"  modules",[272,885,522],{"class":538},[272,887,888],{"class":542}," [",[272,890,891],{"class":538},"'",[272,893,852],{"class":282},[272,895,891],{"class":538},[272,897,898],{"class":542},"]",[272,900,671],{"class":538},[272,902,903,905],{"class":274,"line":582},[272,904,685],{"class":538},[272,906,688],{"class":542},[398,908,910],{"id":909},"start-using-tresjs","Start using TresJS",[254,912,913],{},"That's it! The module provides several benefits:",[330,915,916],{},[333,917,918,925,943,950],{},[336,919,920,921,924],{},"🤓 ",[325,922,923],{},"Auto-import"," components and composables from the TresJS ecosystem",[336,926,927,928,931,932,935,936,939,940,668],{},"🖥️ ",[325,929,930],{},"Client-only rendering"," for ",[269,933,934],{},"TresCanvas"," (no need for ",[269,937,938],{},".client"," suffix or ",[269,941,942],{},"\u003CClientOnly />",[336,944,945,946,949],{},"⚙️ ",[325,947,948],{},"Automatic configuration"," of the Vue compiler for TresJS components",[336,951,952,953,956],{},"✨ ",[325,954,955],{},"DX Magic"," that comes with Nuxt",[958,959,960],"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":267,"searchDepth":275,"depth":561,"links":962},[963,964,965,968],{"id":247,"depth":561,"text":248},{"id":385,"depth":561,"text":386},{"id":392,"depth":561,"text":393,"children":966},[967],{"id":697,"depth":582,"text":698},{"id":777,"depth":561,"text":778},"Get started with TresJS.","md",null,{},{"icon":16},{"description":975,"title":13},"Learn how to install and set up TresJS in your Vue project.","SlTOyrCfZRUgFIvEuWVa0JLVbJzaaSJZhyXpJsHCsb0",[978,980],{"title":10,"path":6,"stem":7,"description":979,"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":981,"icon":21,"children":-1},"Learn how to create your first 3D scene with TresJS with this step-by-step guide.",1774953656400]