[{"data":1,"prerenderedAt":725},["ShallowReactive",2],{"navigation":3,"/getting-started":211,"/getting-started-surround":722},[4,29,62,149,177,187,191,195,199,203,207],{"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],{"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,"children":66},"API","/api","3.api",[67,70,84,111,121,131],{"title":68,"path":64,"stem":69},"TresJS API Reference","3.api/1.index",{"title":71,"icon":72,"open":39,"path":73,"stem":74,"children":75,"page":47},"Components","i-lucide-box","/api/components","3.api/1.components",[76,80],{"title":77,"path":78,"stem":79},"\u003CTresCanvas />","/api/components/tres-canvas","3.api/1.components/tres-canvas",{"title":81,"path":82,"stem":83},"Tres Components","/api/components/tres-objects","3.api/1.components/tres-objects",{"title":85,"titleTemplate":86,"icon":87,"path":88,"stem":89,"children":90,"page":47},"Composables","%s · TresJS Composables","i-lucide-arrow-right-left","/api/composables","3.api/2.composables",[91,95,99,103,107],{"title":92,"path":93,"stem":94},"useTres","/api/composables/use-tres","3.api/2.composables/1.use-tres",{"title":96,"path":97,"stem":98},"useTresContext","/api/composables/use-tres-context","3.api/2.composables/2.use-tres-context",{"title":100,"path":101,"stem":102},"useLoop","/api/composables/use-loop","3.api/2.composables/3.use-loop",{"title":104,"path":105,"stem":106},"useGraph","/api/composables/use-graph","3.api/2.composables/4.use-graph",{"title":108,"path":109,"stem":110},"useLoader","/api/composables/use-loader","3.api/2.composables/5.use-loader",{"title":112,"icon":113,"path":114,"stem":115,"children":116,"page":47},"Event handling","i-lucide-mouse-pointer-2","/api/events","3.api/3.events",[117],{"title":118,"path":119,"stem":120},"Pointer Events","/api/events/pointer-events","3.api/3.events/1.pointer-events",{"title":122,"icon":123,"path":124,"stem":125,"children":126,"page":47},"Utils","i-lucide-wrench","/api/utils","3.api/4.utils",[127],{"title":128,"path":129,"stem":130},"Type Guards","/api/utils/type-guards","3.api/4.utils/1.type-guards",{"title":132,"icon":133,"path":134,"stem":135,"children":136,"page":47},"Advanced","i-lucide-brain-circuit","/api/advanced","3.api/5.advanced",[137,141,145],{"title":138,"path":139,"stem":140},"Scaling Performance 🚀","/api/advanced/performance","3.api/5.advanced/performance",{"title":142,"path":143,"stem":144},"Primitives","/api/advanced/primitives","3.api/5.advanced/primitives",{"title":146,"path":147,"stem":148},"WebGPU","/api/advanced/web-gpu","3.api/5.advanced/web-gpu",{"title":150,"path":151,"stem":152,"children":153},"Cookbook","/cookbook","4.cookbook",[154,157,161,165,169,173],{"title":155,"path":151,"stem":156},"Cookbook 🍳🧑‍🍳","4.cookbook/index",{"title":158,"path":159,"stem":160},"OrbitControls","/cookbook/orbit-controls","4.cookbook/1.orbit-controls",{"title":162,"path":163,"stem":164},"Basic Animations","/cookbook/basic-animations","4.cookbook/2.basic-animations",{"title":166,"path":167,"stem":168},"Model Animation","/cookbook/model-animation","4.cookbook/3.model-animation",{"title":170,"path":171,"stem":172},"Advanced GSAP Animations","/cookbook/advanced-gsap-animations","4.cookbook/4.advanced-gsap-animations",{"title":174,"path":175,"stem":176},"Tweakpane","/cookbook/tweakpane","4.cookbook/5.tweakpane",{"title":178,"path":179,"stem":180,"children":181},"Community","/community","5.community/1.index",[182,183],{"title":178,"path":179,"stem":180},{"title":184,"path":185,"stem":186},"Awesome Resources","/community/awesome-resources","5.community/awesome-resources",{"title":188,"path":189,"stem":190},"German Translation","/de","de",{"title":192,"path":193,"stem":194},"Spanish Translation","/es","es",{"title":196,"path":197,"stem":198},"French Translation","/fr","fr",{"title":200,"path":201,"stem":202},"Italian Translation","/it","it",{"title":204,"path":205,"stem":206},"Japanese Translation","/jp","jp",{"title":208,"path":209,"stem":210},"Chinese Translation","/zh","zh",{"id":212,"title":10,"body":213,"description":715,"extension":716,"links":717,"meta":718,"navigation":719,"path":6,"seo":720,"stem":7,"__hash__":721},"docs/1.getting-started/1.index.md",{"type":214,"value":215,"toc":710},"minimark",[216,232,240,246,251,256,299,303,306,537,540,681,688,692,695,699,706],[217,218,219,223,224,227,228,231],"p",{},[220,221,222],"strong",{},"TresJS"," is an open-source library that provides a declarative way of using ",[220,225,226],{},"Three.js"," in Vue. Build your scenes using ",[220,229,230],{},"Vue components"," in a declarative way with all the power of Vue's reactivity.",[217,233,234,235,239],{},"TresJS (pronounced ",[236,237,238],"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.",[241,242,243],"scene-wrapper",{},[244,245],"intro-scene",{},[247,248,250],"h3",{"id":249},"why-tresjs","Why TresJS?",[217,252,253,255],{},[220,254,226],{}," 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:",[257,258,259,266,272,278,293],"ul",{},[260,261,262,265],"li",{},[220,263,264],{},"🧩 Familiar Components",": Use Vue components to build your 3D scenes instead of imperative Three.js code.",[260,267,268,271],{},[220,269,270],{},"⚡ Reactive by Default",": Leverage Vue's reactivity system to create dynamic 3D experiences.",[260,273,274,277],{},[220,275,276],{},"📦 Composables",": Access powerful composables that encapsulate common 3D patterns and functionality.",[260,279,280,283,284,288,289,292],{},[220,281,282],{},"🎯 Declarative",": Describe ",[285,286,287],"em",{},"what"," your scene should look like, not ",[285,290,291],{},"how"," to build it step by step.",[260,294,295,298],{},[220,296,297],{},"🔧 Developer Experience",": Get the full Vue developer experience with hot module replacement, TypeScript support, and Vue DevTools integration.",[247,300,302],{"id":301},"from-imperative-to-declarative","From Imperative to Declarative",[217,304,305],{},"Instead of writing imperative Three.js code like this:",[307,308,314],"pre",{"className":309,"code":310,"filename":311,"language":312,"meta":313,"style":313},"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","",[236,315,316,349,409,430,436,457,496,523],{"__ignoreMap":313},[317,318,321,325,329,333,336,339,342,346],"span",{"class":319,"line":320},"line",1,[317,322,324],{"class":323},"spNyl","const",[317,326,328],{"class":327},"sTEyZ"," scene ",[317,330,332],{"class":331},"sMK4o","=",[317,334,335],{"class":331}," new",[317,337,338],{"class":327}," THREE",[317,340,341],{"class":331},".",[317,343,345],{"class":344},"s2Zo4","Scene",[317,347,348],{"class":327},"()\n",[317,350,352,354,357,359,361,363,365,368,371,375,378,381,383,386,389,391,393,396,398,401,403,406],{"class":319,"line":351},2,[317,353,324],{"class":323},[317,355,356],{"class":327}," camera ",[317,358,332],{"class":331},[317,360,335],{"class":331},[317,362,338],{"class":327},[317,364,341],{"class":331},[317,366,367],{"class":344},"PerspectiveCamera",[317,369,370],{"class":327},"(",[317,372,374],{"class":373},"sbssI","75",[317,376,377],{"class":331},",",[317,379,380],{"class":327}," window",[317,382,341],{"class":331},[317,384,385],{"class":327},"innerWidth ",[317,387,388],{"class":331},"/",[317,390,380],{"class":327},[317,392,341],{"class":331},[317,394,395],{"class":327},"innerHeight",[317,397,377],{"class":331},[317,399,400],{"class":373}," 0.1",[317,402,377],{"class":331},[317,404,405],{"class":373}," 1000",[317,407,408],{"class":327},")\n",[317,410,412,414,417,419,421,423,425,428],{"class":319,"line":411},3,[317,413,324],{"class":323},[317,415,416],{"class":327}," renderer ",[317,418,332],{"class":331},[317,420,335],{"class":331},[317,422,338],{"class":327},[317,424,341],{"class":331},[317,426,427],{"class":344},"WebGLRenderer",[317,429,348],{"class":327},[317,431,433],{"class":319,"line":432},4,[317,434,435],{"emptyLinePlaceholder":39},"\n",[317,437,439,441,444,446,448,450,452,455],{"class":319,"line":438},5,[317,440,324],{"class":323},[317,442,443],{"class":327}," geometry ",[317,445,332],{"class":331},[317,447,335],{"class":331},[317,449,338],{"class":327},[317,451,341],{"class":331},[317,453,454],{"class":344},"BoxGeometry",[317,456,348],{"class":327},[317,458,460,462,465,467,469,471,473,476,478,481,485,488,491,494],{"class":319,"line":459},6,[317,461,324],{"class":323},[317,463,464],{"class":327}," material ",[317,466,332],{"class":331},[317,468,335],{"class":331},[317,470,338],{"class":327},[317,472,341],{"class":331},[317,474,475],{"class":344},"MeshBasicMaterial",[317,477,370],{"class":327},[317,479,480],{"class":331},"{",[317,482,484],{"class":483},"swJcz"," color",[317,486,487],{"class":331},":",[317,489,490],{"class":373}," 0x00FF00",[317,492,493],{"class":331}," }",[317,495,408],{"class":327},[317,497,499,501,504,506,508,510,512,515,518,520],{"class":319,"line":498},7,[317,500,324],{"class":323},[317,502,503],{"class":327}," cube ",[317,505,332],{"class":331},[317,507,335],{"class":331},[317,509,338],{"class":327},[317,511,341],{"class":331},[317,513,514],{"class":344},"Mesh",[317,516,517],{"class":327},"(geometry",[317,519,377],{"class":331},[317,521,522],{"class":327}," material)\n",[317,524,526,529,531,534],{"class":319,"line":525},8,[317,527,528],{"class":327},"scene",[317,530,341],{"class":331},[317,532,533],{"class":344},"add",[317,535,536],{"class":327},"(cube)\n",[217,538,539],{},"You can write declarative Vue components:",[307,541,545],{"className":542,"code":543,"language":544,"meta":313,"style":313},"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",[236,546,547,558,568,611,620,630,653,662,671],{"__ignoreMap":313},[317,548,549,552,555],{"class":319,"line":320},[317,550,551],{"class":331},"\u003C",[317,553,554],{"class":483},"template",[317,556,557],{"class":331},">\n",[317,559,560,563,566],{"class":319,"line":351},[317,561,562],{"class":331},"  \u003C",[317,564,565],{"class":483},"TresCanvas",[317,567,557],{"class":331},[317,569,570,573,576,579,582,584,587,590,593,596,598,600,603,606,608],{"class":319,"line":411},[317,571,572],{"class":331},"    \u003C",[317,574,575],{"class":483},"TresPerspectiveCamera",[317,577,578],{"class":331}," :",[317,580,581],{"class":323},"position",[317,583,332],{"class":331},[317,585,586],{"class":331},"\"",[317,588,589],{"class":331},"[",[317,591,592],{"class":373},"0",[317,594,595],{"class":331},", ",[317,597,592],{"class":373},[317,599,595],{"class":331},[317,601,602],{"class":373},"5",[317,604,605],{"class":331},"]",[317,607,586],{"class":331},[317,609,610],{"class":331}," />\n",[317,612,613,615,618],{"class":319,"line":432},[317,614,572],{"class":331},[317,616,617],{"class":483},"TresMesh",[317,619,557],{"class":331},[317,621,622,625,628],{"class":319,"line":438},[317,623,624],{"class":331},"      \u003C",[317,626,627],{"class":483},"TresBoxGeometry",[317,629,610],{"class":331},[317,631,632,634,637,639,642,644,646,649,651],{"class":319,"line":459},[317,633,624],{"class":331},[317,635,636],{"class":483},"TresMeshBasicMaterial",[317,638,578],{"class":331},[317,640,641],{"class":323},"color",[317,643,332],{"class":331},[317,645,586],{"class":331},[317,647,648],{"class":373},"0x00FF00",[317,650,586],{"class":331},[317,652,610],{"class":331},[317,654,655,658,660],{"class":319,"line":498},[317,656,657],{"class":331},"    \u003C/",[317,659,617],{"class":483},[317,661,557],{"class":331},[317,663,664,667,669],{"class":319,"line":525},[317,665,666],{"class":331},"  \u003C/",[317,668,565],{"class":483},[317,670,557],{"class":331},[317,672,674,677,679],{"class":319,"line":673},9,[317,675,676],{"class":331},"\u003C/",[317,678,554],{"class":483},[317,680,557],{"class":331},[217,682,683,684,687],{},"This approach ",[220,685,686],{},"reduces the learning curve"," significantly while preserving all the power and flexibility of Three.js.",[247,689,691],{"id":690},"component-name-casing","Component Name Casing",[217,693,694],{},"Throughout the guide, we are using PascalCase names when registering components.",[696,697],"read-more",{"to":698},"https://vuejs.org/guide/components/registration.html#component-name-casing",[217,700,701,702,705],{},"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",[236,703,704],{},"vue/component-name-in-template-casing"," in your eslint configuration.",[707,708,709],"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":313,"searchDepth":320,"depth":351,"links":711},[712,713,714],{"id":249,"depth":411,"text":250},{"id":301,"depth":411,"text":302},{"id":690,"depth":411,"text":691},"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":715},"NyuUdIodT0pT6CFNUQqDCXtLwQISGhlogMVgJ-_8TvI",[717,723],{"title":13,"path":14,"stem":15,"description":724,"icon":16,"children":-1},"Get started with TresJS.",1768600243731]