[{"data":1,"prerenderedAt":753},["ShallowReactive",2],{"navigation":3,"/getting-started":239,"/getting-started-surround":750},[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":10,"body":241,"description":743,"extension":744,"links":745,"meta":746,"navigation":747,"path":6,"seo":748,"stem":7,"__hash__":749},"docs/1.getting-started/1.index.md",{"type":242,"value":243,"toc":738},"minimark",[244,260,268,274,279,284,327,331,334,565,568,709,716,720,723,727,734],[245,246,247,251,252,255,256,259],"p",{},[248,249,250],"strong",{},"TresJS"," is an open-source library that provides a declarative way of using ",[248,253,254],{},"Three.js"," in Vue. Build your scenes using ",[248,257,258],{},"Vue components"," in a declarative way with all the power of Vue's reactivity.",[245,261,262,263,267],{},"TresJS (pronounced ",[264,265,266],"code",{},"\"/tres/\"",", Spanish for \"three\") builds upon Three.js by creating a Vue 3 custom renderer that transforms Vue components into Three.js objects. The library aims to make 3D web development more accessible by leveraging Vue's reactivity system and component-based architecture, while maintaining compatibility with the latest Three.js features.",[269,270,271],"scene-wrapper",{},[272,273],"intro-scene",{},[275,276,278],"h3",{"id":277},"why-tresjs","Why TresJS?",[245,280,281,283],{},[248,282,254],{}," is an incredibly powerful 3D library, but it can have a steep learning curve, especially for developers coming from component-based frameworks like Vue. TresJS bridges this gap by:",[285,286,287,294,300,306,321],"ul",{},[288,289,290,293],"li",{},[248,291,292],{},"🧩 Familiar Components",": Use Vue components to build your 3D scenes instead of imperative Three.js code.",[288,295,296,299],{},[248,297,298],{},"⚡ Reactive by Default",": Leverage Vue's reactivity system to create dynamic 3D experiences.",[288,301,302,305],{},[248,303,304],{},"📦 Composables",": Access powerful composables that encapsulate common 3D patterns and functionality.",[288,307,308,311,312,316,317,320],{},[248,309,310],{},"🎯 Declarative",": Describe ",[313,314,315],"em",{},"what"," your scene should look like, not ",[313,318,319],{},"how"," to build it step by step.",[288,322,323,326],{},[248,324,325],{},"🔧 Developer Experience",": Get the full Vue developer experience with hot module replacement, TypeScript support, and Vue DevTools integration.",[275,328,330],{"id":329},"from-imperative-to-declarative","From Imperative to Declarative",[245,332,333],{},"Instead of writing imperative Three.js code like this:",[335,336,342],"pre",{"className":337,"code":338,"filename":339,"language":340,"meta":341,"style":341},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const scene = new THREE.Scene()\nconst camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)\nconst renderer = new THREE.WebGLRenderer()\n\nconst geometry = new THREE.BoxGeometry()\nconst material = new THREE.MeshBasicMaterial({ color: 0x00FF00 })\nconst cube = new THREE.Mesh(geometry, material)\nscene.add(cube)\n","scene.ts","ts","",[264,343,344,377,437,458,464,485,524,551],{"__ignoreMap":341},[345,346,349,353,357,361,364,367,370,374],"span",{"class":347,"line":348},"line",1,[345,350,352],{"class":351},"spNyl","const",[345,354,356],{"class":355},"sTEyZ"," scene ",[345,358,360],{"class":359},"sMK4o","=",[345,362,363],{"class":359}," new",[345,365,366],{"class":355}," THREE",[345,368,369],{"class":359},".",[345,371,373],{"class":372},"s2Zo4","Scene",[345,375,376],{"class":355},"()\n",[345,378,380,382,385,387,389,391,393,396,399,403,406,409,411,414,417,419,421,424,426,429,431,434],{"class":347,"line":379},2,[345,381,352],{"class":351},[345,383,384],{"class":355}," camera ",[345,386,360],{"class":359},[345,388,363],{"class":359},[345,390,366],{"class":355},[345,392,369],{"class":359},[345,394,395],{"class":372},"PerspectiveCamera",[345,397,398],{"class":355},"(",[345,400,402],{"class":401},"sbssI","75",[345,404,405],{"class":359},",",[345,407,408],{"class":355}," window",[345,410,369],{"class":359},[345,412,413],{"class":355},"innerWidth ",[345,415,416],{"class":359},"/",[345,418,408],{"class":355},[345,420,369],{"class":359},[345,422,423],{"class":355},"innerHeight",[345,425,405],{"class":359},[345,427,428],{"class":401}," 0.1",[345,430,405],{"class":359},[345,432,433],{"class":401}," 1000",[345,435,436],{"class":355},")\n",[345,438,440,442,445,447,449,451,453,456],{"class":347,"line":439},3,[345,441,352],{"class":351},[345,443,444],{"class":355}," renderer ",[345,446,360],{"class":359},[345,448,363],{"class":359},[345,450,366],{"class":355},[345,452,369],{"class":359},[345,454,455],{"class":372},"WebGLRenderer",[345,457,376],{"class":355},[345,459,461],{"class":347,"line":460},4,[345,462,463],{"emptyLinePlaceholder":39},"\n",[345,465,467,469,472,474,476,478,480,483],{"class":347,"line":466},5,[345,468,352],{"class":351},[345,470,471],{"class":355}," geometry ",[345,473,360],{"class":359},[345,475,363],{"class":359},[345,477,366],{"class":355},[345,479,369],{"class":359},[345,481,482],{"class":372},"BoxGeometry",[345,484,376],{"class":355},[345,486,488,490,493,495,497,499,501,504,506,509,513,516,519,522],{"class":347,"line":487},6,[345,489,352],{"class":351},[345,491,492],{"class":355}," material ",[345,494,360],{"class":359},[345,496,363],{"class":359},[345,498,366],{"class":355},[345,500,369],{"class":359},[345,502,503],{"class":372},"MeshBasicMaterial",[345,505,398],{"class":355},[345,507,508],{"class":359},"{",[345,510,512],{"class":511},"swJcz"," color",[345,514,515],{"class":359},":",[345,517,518],{"class":401}," 0x00FF00",[345,520,521],{"class":359}," }",[345,523,436],{"class":355},[345,525,527,529,532,534,536,538,540,543,546,548],{"class":347,"line":526},7,[345,528,352],{"class":351},[345,530,531],{"class":355}," cube ",[345,533,360],{"class":359},[345,535,363],{"class":359},[345,537,366],{"class":355},[345,539,369],{"class":359},[345,541,542],{"class":372},"Mesh",[345,544,545],{"class":355},"(geometry",[345,547,405],{"class":359},[345,549,550],{"class":355}," material)\n",[345,552,554,557,559,562],{"class":347,"line":553},8,[345,555,556],{"class":355},"scene",[345,558,369],{"class":359},[345,560,561],{"class":372},"add",[345,563,564],{"class":355},"(cube)\n",[245,566,567],{},"You can write declarative Vue components:",[335,569,573],{"className":570,"code":571,"language":572,"meta":341,"style":341},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 0, 5]\" />\n    \u003CTresMesh>\n      \u003CTresBoxGeometry />\n      \u003CTresMeshBasicMaterial :color=\"0x00FF00\" />\n    \u003C/TresMesh>\n  \u003C/TresCanvas>\n\u003C/template>\n","vue",[264,574,575,586,596,639,648,658,681,690,699],{"__ignoreMap":341},[345,576,577,580,583],{"class":347,"line":348},[345,578,579],{"class":359},"\u003C",[345,581,582],{"class":511},"template",[345,584,585],{"class":359},">\n",[345,587,588,591,594],{"class":347,"line":379},[345,589,590],{"class":359},"  \u003C",[345,592,593],{"class":511},"TresCanvas",[345,595,585],{"class":359},[345,597,598,601,604,607,610,612,615,618,621,624,626,628,631,634,636],{"class":347,"line":439},[345,599,600],{"class":359},"    \u003C",[345,602,603],{"class":511},"TresPerspectiveCamera",[345,605,606],{"class":359}," :",[345,608,609],{"class":351},"position",[345,611,360],{"class":359},[345,613,614],{"class":359},"\"",[345,616,617],{"class":359},"[",[345,619,620],{"class":401},"0",[345,622,623],{"class":359},", ",[345,625,620],{"class":401},[345,627,623],{"class":359},[345,629,630],{"class":401},"5",[345,632,633],{"class":359},"]",[345,635,614],{"class":359},[345,637,638],{"class":359}," />\n",[345,640,641,643,646],{"class":347,"line":460},[345,642,600],{"class":359},[345,644,645],{"class":511},"TresMesh",[345,647,585],{"class":359},[345,649,650,653,656],{"class":347,"line":466},[345,651,652],{"class":359},"      \u003C",[345,654,655],{"class":511},"TresBoxGeometry",[345,657,638],{"class":359},[345,659,660,662,665,667,670,672,674,677,679],{"class":347,"line":487},[345,661,652],{"class":359},[345,663,664],{"class":511},"TresMeshBasicMaterial",[345,666,606],{"class":359},[345,668,669],{"class":351},"color",[345,671,360],{"class":359},[345,673,614],{"class":359},[345,675,676],{"class":401},"0x00FF00",[345,678,614],{"class":359},[345,680,638],{"class":359},[345,682,683,686,688],{"class":347,"line":526},[345,684,685],{"class":359},"    \u003C/",[345,687,645],{"class":511},[345,689,585],{"class":359},[345,691,692,695,697],{"class":347,"line":553},[345,693,694],{"class":359},"  \u003C/",[345,696,593],{"class":511},[345,698,585],{"class":359},[345,700,702,705,707],{"class":347,"line":701},9,[345,703,704],{"class":359},"\u003C/",[345,706,582],{"class":511},[345,708,585],{"class":359},[245,710,711,712,715],{},"This approach ",[248,713,714],{},"reduces the learning curve"," significantly while preserving all the power and flexibility of Three.js.",[275,717,719],{"id":718},"component-name-casing","Component Name Casing",[245,721,722],{},"Throughout the guide, we are using PascalCase names when registering components.",[724,725],"read-more",{"to":726},"https://vuejs.org/guide/components/registration.html#component-name-casing",[245,728,729,730,733],{},"Tres also supports the usage of kebab-case for its components. If you want to use the kebab-case notation in combination with the TresJS eslint config, you should deactivate the rule\n",[264,731,732],{},"vue/component-name-in-template-casing"," in your eslint configuration.",[735,736,737],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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);}",{"title":341,"searchDepth":348,"depth":379,"links":739},[740,741,742],{"id":277,"depth":439,"text":278},{"id":329,"depth":439,"text":330},{"id":718,"depth":439,"text":719},"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.","md",null,{},{"icon":11},{"title":10,"description":743},"NyuUdIodT0pT6CFNUQqDCXtLwQISGhlogMVgJ-_8TvI",[745,751],{"title":13,"path":14,"stem":15,"description":752,"icon":16,"children":-1},"Get started with TresJS.",1774953656879]