[{"data":1,"prerenderedAt":633},["ShallowReactive",2],{"navigation":3,"/api/components/tres-context":239,"/api/components/tres-context-surround":628},[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":97,"body":241,"description":622,"extension":623,"links":624,"meta":625,"navigation":39,"path":98,"seo":626,"stem":99,"__hash__":627},"docs/3.api/1.components/tres-context.md",{"type":242,"value":243,"toc":616},"minimark",[244,249,264,273,277,283,287,585,589,612],[245,246,248],"h2",{"id":247},"component-overview","Component Overview",[250,251,252,255,256,258,259,263],"p",{},[253,254,97],"code",{}," is the internal component that powers ",[253,257,93],{},". It mounts the TresJS renderer and scene using a ",[260,261,262],"strong",{},"provided canvas element"," instead of creating one for you.",[265,266,267],"note",{},[250,268,269,270,272],{},"This component is exported for advanced use cases only. In most apps you should keep using ",[253,271,93],{},".",[245,274,276],{"id":275},"when-to-use-it","When to Use It",[250,278,279,280,282],{},"Use ",[253,281,97],{}," only if you already own the WebGL canvas (or must integrate with a host framework that provides one) and you still want TresJS to manage the Three.js scene, render loop, and events.",[245,284,286],{"id":285},"usage","Usage",[288,289,295],"pre",{"className":290,"code":291,"filename":292,"language":293,"meta":294,"style":294},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { TresCanvasContext } from '@tresjs/core'\n\nconst canvasRef = ref\u003CHTMLCanvasElement>()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Ccanvas ref=\"canvasRef\" class=\"w-full h-full\">\n    \u003CTresCanvasContext v-if=\"canvasRef\" :canvas=\"canvasRef\">\n      \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n      \u003C!-- Your scene content here -->\n    \u003C/TresCanvasContext>\n  \u003C/canvas>\n\u003C/template>\n","app.vue","vue","",[253,296,297,332,360,381,387,413,423,428,438,472,507,549,556,566,576],{"__ignoreMap":294},[298,299,302,306,310,314,317,320,323,327,329],"span",{"class":300,"line":301},"line",1,[298,303,305],{"class":304},"sMK4o","\u003C",[298,307,309],{"class":308},"swJcz","script",[298,311,313],{"class":312},"spNyl"," setup",[298,315,316],{"class":312}," lang",[298,318,319],{"class":304},"=",[298,321,322],{"class":304},"\"",[298,324,326],{"class":325},"sfazB","ts",[298,328,322],{"class":304},[298,330,331],{"class":304},">\n",[298,333,335,339,342,346,349,352,355,357],{"class":300,"line":334},2,[298,336,338],{"class":337},"s7zQu","import",[298,340,341],{"class":304}," {",[298,343,345],{"class":344},"sTEyZ"," ref",[298,347,348],{"class":304}," }",[298,350,351],{"class":337}," from",[298,353,354],{"class":304}," '",[298,356,293],{"class":325},[298,358,359],{"class":304},"'\n",[298,361,363,365,367,370,372,374,376,379],{"class":300,"line":362},3,[298,364,338],{"class":337},[298,366,341],{"class":304},[298,368,369],{"class":344}," TresCanvasContext",[298,371,348],{"class":304},[298,373,351],{"class":337},[298,375,354],{"class":304},[298,377,378],{"class":325},"@tresjs/core",[298,380,359],{"class":304},[298,382,384],{"class":300,"line":383},4,[298,385,386],{"emptyLinePlaceholder":39},"\n",[298,388,390,393,396,398,401,403,407,410],{"class":300,"line":389},5,[298,391,392],{"class":312},"const",[298,394,395],{"class":344}," canvasRef ",[298,397,319],{"class":304},[298,399,345],{"class":400},"s2Zo4",[298,402,305],{"class":304},[298,404,406],{"class":405},"sBMFI","HTMLCanvasElement",[298,408,409],{"class":304},">",[298,411,412],{"class":344},"()\n",[298,414,416,419,421],{"class":300,"line":415},6,[298,417,418],{"class":304},"\u003C/",[298,420,309],{"class":308},[298,422,331],{"class":304},[298,424,426],{"class":300,"line":425},7,[298,427,386],{"emptyLinePlaceholder":39},[298,429,431,433,436],{"class":300,"line":430},8,[298,432,305],{"class":304},[298,434,435],{"class":308},"template",[298,437,331],{"class":304},[298,439,441,444,447,449,451,453,456,458,461,463,465,468,470],{"class":300,"line":440},9,[298,442,443],{"class":304},"  \u003C",[298,445,446],{"class":308},"canvas",[298,448,345],{"class":312},[298,450,319],{"class":304},[298,452,322],{"class":304},[298,454,455],{"class":325},"canvasRef",[298,457,322],{"class":304},[298,459,460],{"class":312}," class",[298,462,319],{"class":304},[298,464,322],{"class":304},[298,466,467],{"class":325},"w-full h-full",[298,469,322],{"class":304},[298,471,331],{"class":304},[298,473,475,478,481,484,486,488,490,492,495,497,499,501,503,505],{"class":300,"line":474},10,[298,476,477],{"class":304},"    \u003C",[298,479,480],{"class":308},"TresCanvasContext",[298,482,483],{"class":337}," v-if",[298,485,319],{"class":304},[298,487,322],{"class":304},[298,489,455],{"class":344},[298,491,322],{"class":304},[298,493,494],{"class":304}," :",[298,496,446],{"class":312},[298,498,319],{"class":304},[298,500,322],{"class":304},[298,502,455],{"class":344},[298,504,322],{"class":304},[298,506,331],{"class":304},[298,508,510,513,516,518,521,523,525,528,532,535,537,539,541,544,546],{"class":300,"line":509},11,[298,511,512],{"class":304},"      \u003C",[298,514,515],{"class":308},"TresPerspectiveCamera",[298,517,494],{"class":304},[298,519,520],{"class":312},"position",[298,522,319],{"class":304},[298,524,322],{"class":304},[298,526,527],{"class":304},"[",[298,529,531],{"class":530},"sbssI","3",[298,533,534],{"class":304},", ",[298,536,531],{"class":530},[298,538,534],{"class":304},[298,540,531],{"class":530},[298,542,543],{"class":304},"]",[298,545,322],{"class":304},[298,547,548],{"class":304}," />\n",[298,550,552],{"class":300,"line":551},12,[298,553,555],{"class":554},"sHwdD","      \u003C!-- Your scene content here -->\n",[298,557,559,562,564],{"class":300,"line":558},13,[298,560,561],{"class":304},"    \u003C/",[298,563,480],{"class":308},[298,565,331],{"class":304},[298,567,569,572,574],{"class":300,"line":568},14,[298,570,571],{"class":304},"  \u003C/",[298,573,446],{"class":308},[298,575,331],{"class":304},[298,577,579,581,583],{"class":300,"line":578},15,[298,580,418],{"class":304},[298,582,435],{"class":308},[298,584,331],{"class":304},[245,586,588],{"id":587},"notes","Notes",[590,591,592,599,606],"ul",{},[593,594,595,596,598],"li",{},"You must pass a valid ",[253,597,446],{}," element.",[593,600,601,602,605],{},"Canvas sizing and styling are ",[260,603,604],{},"your"," responsibility.",[593,607,608,609,611],{},"Props and events match ",[253,610,93],{},", so you can reuse the same API surface.",[613,614,615],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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);}",{"title":294,"searchDepth":301,"depth":334,"links":617},[618,619,620,621],{"id":247,"depth":334,"text":248},{"id":275,"depth":334,"text":276},{"id":285,"depth":334,"text":286},{"id":587,"depth":334,"text":588},"Internal context component used by TresCanvas for advanced setups.","md",null,{},{"title":97,"description":622},"EOhPvDEJSomPqpjuXtFcCXxIuzIX1joBcBOvt4v9q48",[629,631],{"title":93,"path":94,"stem":95,"description":630,"children":-1},"The TresCanvas component is the main component for rendering 3D scenes.",{"title":101,"path":102,"stem":103,"description":632,"children":-1},"Learn how TresJS automatically maps Vue components to Three.js objects using a custom renderer and autogenerated catalogue.",1774953658883]