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