[{"data":1,"prerenderedAt":629},["ShallowReactive",2],{"navigation":3,"/api/components/tres-context":235,"/api/components/tres-context-surround":624},[4,29,74,169,201,211,215,219,223,227,231],{"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],{"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,"children":78},"API","/api","3.api",[79,82,100,127,137,151],{"title":80,"path":76,"stem":81},"TresJS API Reference","3.api/1.index",{"title":83,"icon":84,"open":39,"path":85,"stem":86,"children":87,"page":47},"Components","i-lucide-box","/api/components","3.api/1.components",[88,92,96],{"title":89,"path":90,"stem":91},"\u003CTresCanvas />","/api/components/tres-canvas","3.api/1.components/tres-canvas",{"title":93,"path":94,"stem":95},"\u003CTresCanvasContext />","/api/components/tres-context","3.api/1.components/tres-context",{"title":97,"path":98,"stem":99},"Tres Components","/api/components/tres-objects","3.api/1.components/tres-objects",{"title":101,"titleTemplate":102,"icon":103,"path":104,"stem":105,"children":106,"page":47},"Composables","%s · TresJS Composables","i-lucide-arrow-right-left","/api/composables","3.api/2.composables",[107,111,115,119,123],{"title":108,"path":109,"stem":110},"useTres","/api/composables/use-tres","3.api/2.composables/1.use-tres",{"title":112,"path":113,"stem":114},"useTresContext","/api/composables/use-tres-context","3.api/2.composables/2.use-tres-context",{"title":116,"path":117,"stem":118},"useLoop","/api/composables/use-loop","3.api/2.composables/3.use-loop",{"title":120,"path":121,"stem":122},"useGraph","/api/composables/use-graph","3.api/2.composables/4.use-graph",{"title":124,"path":125,"stem":126},"useLoader","/api/composables/use-loader","3.api/2.composables/5.use-loader",{"title":128,"icon":129,"path":130,"stem":131,"children":132,"page":47},"Event handling","i-lucide-mouse-pointer-2","/api/events","3.api/3.events",[133],{"title":134,"path":135,"stem":136},"Pointer Events","/api/events/pointer-events","3.api/3.events/1.pointer-events",{"title":138,"icon":139,"path":140,"stem":141,"children":142,"page":47},"Utils","i-lucide-wrench","/api/utils","3.api/4.utils",[143,147],{"title":144,"path":145,"stem":146},"Type Guards","/api/utils/type-guards","3.api/4.utils/1.type-guards",{"title":148,"path":149,"stem":150},"Directives","/api/utils/directives","3.api/4.utils/2.directives",{"title":152,"icon":153,"path":154,"stem":155,"children":156,"page":47},"Advanced","i-lucide-brain-circuit","/api/advanced","3.api/5.advanced",[157,161,165],{"title":158,"path":159,"stem":160},"Scaling Performance 🚀","/api/advanced/performance","3.api/5.advanced/performance",{"title":162,"path":163,"stem":164},"Primitives","/api/advanced/primitives","3.api/5.advanced/primitives",{"title":166,"path":167,"stem":168},"WebGPU","/api/advanced/web-gpu","3.api/5.advanced/web-gpu",{"title":170,"path":171,"stem":172,"children":173},"Cookbook","/cookbook","4.cookbook",[174,177,181,185,189,193,197],{"title":175,"path":171,"stem":176},"Cookbook 🍳🧑‍🍳","4.cookbook/index",{"title":178,"path":179,"stem":180},"OrbitControls","/cookbook/orbit-controls","4.cookbook/1.orbit-controls",{"title":182,"path":183,"stem":184},"Basic Animations","/cookbook/basic-animations","4.cookbook/2.basic-animations",{"title":186,"path":187,"stem":188},"Model Animation","/cookbook/model-animation","4.cookbook/3.model-animation",{"title":190,"path":191,"stem":192},"Advanced GSAP Animations","/cookbook/advanced-gsap-animations","4.cookbook/4.advanced-gsap-animations",{"title":194,"path":195,"stem":196},"Tweakpane","/cookbook/tweakpane","4.cookbook/5.tweakpane",{"title":198,"path":199,"stem":200},"Dynamic components","/cookbook/transition-dynamic","4.cookbook/6.transition-dynamic",{"title":202,"path":203,"stem":204,"children":205},"Community","/community","5.community/1.index",[206,207],{"title":202,"path":203,"stem":204},{"title":208,"path":209,"stem":210},"Awesome Resources","/community/awesome-resources","5.community/awesome-resources",{"title":212,"path":213,"stem":214},"German Translation","/de","de",{"title":216,"path":217,"stem":218},"Spanish Translation","/es","es",{"title":220,"path":221,"stem":222},"French Translation","/fr","fr",{"title":224,"path":225,"stem":226},"Italian Translation","/it","it",{"title":228,"path":229,"stem":230},"Japanese Translation","/jp","jp",{"title":232,"path":233,"stem":234},"Chinese Translation","/zh","zh",{"id":236,"title":93,"body":237,"description":618,"extension":619,"links":620,"meta":621,"navigation":39,"path":94,"seo":622,"stem":95,"__hash__":623},"docs/3.api/1.components/tres-context.md",{"type":238,"value":239,"toc":612},"minimark",[240,245,260,269,273,279,283,581,585,608],[241,242,244],"h2",{"id":243},"component-overview","Component Overview",[246,247,248,251,252,254,255,259],"p",{},[249,250,93],"code",{}," is the internal component that powers ",[249,253,89],{},". It mounts the TresJS renderer and scene using a ",[256,257,258],"strong",{},"provided canvas element"," instead of creating one for you.",[261,262,263],"note",{},[246,264,265,266,268],{},"This component is exported for advanced use cases only. In most apps you should keep using ",[249,267,89],{},".",[241,270,272],{"id":271},"when-to-use-it","When to Use It",[246,274,275,276,278],{},"Use ",[249,277,93],{}," 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.",[241,280,282],{"id":281},"usage","Usage",[284,285,291],"pre",{"className":286,"code":287,"filename":288,"language":289,"meta":290,"style":290},"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","",[249,292,293,328,356,377,383,409,419,424,434,468,503,545,552,562,572],{"__ignoreMap":290},[294,295,298,302,306,310,313,316,319,323,325],"span",{"class":296,"line":297},"line",1,[294,299,301],{"class":300},"sMK4o","\u003C",[294,303,305],{"class":304},"swJcz","script",[294,307,309],{"class":308},"spNyl"," setup",[294,311,312],{"class":308}," lang",[294,314,315],{"class":300},"=",[294,317,318],{"class":300},"\"",[294,320,322],{"class":321},"sfazB","ts",[294,324,318],{"class":300},[294,326,327],{"class":300},">\n",[294,329,331,335,338,342,345,348,351,353],{"class":296,"line":330},2,[294,332,334],{"class":333},"s7zQu","import",[294,336,337],{"class":300}," {",[294,339,341],{"class":340},"sTEyZ"," ref",[294,343,344],{"class":300}," }",[294,346,347],{"class":333}," from",[294,349,350],{"class":300}," '",[294,352,289],{"class":321},[294,354,355],{"class":300},"'\n",[294,357,359,361,363,366,368,370,372,375],{"class":296,"line":358},3,[294,360,334],{"class":333},[294,362,337],{"class":300},[294,364,365],{"class":340}," TresCanvasContext",[294,367,344],{"class":300},[294,369,347],{"class":333},[294,371,350],{"class":300},[294,373,374],{"class":321},"@tresjs/core",[294,376,355],{"class":300},[294,378,380],{"class":296,"line":379},4,[294,381,382],{"emptyLinePlaceholder":39},"\n",[294,384,386,389,392,394,397,399,403,406],{"class":296,"line":385},5,[294,387,388],{"class":308},"const",[294,390,391],{"class":340}," canvasRef ",[294,393,315],{"class":300},[294,395,341],{"class":396},"s2Zo4",[294,398,301],{"class":300},[294,400,402],{"class":401},"sBMFI","HTMLCanvasElement",[294,404,405],{"class":300},">",[294,407,408],{"class":340},"()\n",[294,410,412,415,417],{"class":296,"line":411},6,[294,413,414],{"class":300},"\u003C/",[294,416,305],{"class":304},[294,418,327],{"class":300},[294,420,422],{"class":296,"line":421},7,[294,423,382],{"emptyLinePlaceholder":39},[294,425,427,429,432],{"class":296,"line":426},8,[294,428,301],{"class":300},[294,430,431],{"class":304},"template",[294,433,327],{"class":300},[294,435,437,440,443,445,447,449,452,454,457,459,461,464,466],{"class":296,"line":436},9,[294,438,439],{"class":300},"  \u003C",[294,441,442],{"class":304},"canvas",[294,444,341],{"class":308},[294,446,315],{"class":300},[294,448,318],{"class":300},[294,450,451],{"class":321},"canvasRef",[294,453,318],{"class":300},[294,455,456],{"class":308}," class",[294,458,315],{"class":300},[294,460,318],{"class":300},[294,462,463],{"class":321},"w-full h-full",[294,465,318],{"class":300},[294,467,327],{"class":300},[294,469,471,474,477,480,482,484,486,488,491,493,495,497,499,501],{"class":296,"line":470},10,[294,472,473],{"class":300},"    \u003C",[294,475,476],{"class":304},"TresCanvasContext",[294,478,479],{"class":333}," v-if",[294,481,315],{"class":300},[294,483,318],{"class":300},[294,485,451],{"class":340},[294,487,318],{"class":300},[294,489,490],{"class":300}," :",[294,492,442],{"class":308},[294,494,315],{"class":300},[294,496,318],{"class":300},[294,498,451],{"class":340},[294,500,318],{"class":300},[294,502,327],{"class":300},[294,504,506,509,512,514,517,519,521,524,528,531,533,535,537,540,542],{"class":296,"line":505},11,[294,507,508],{"class":300},"      \u003C",[294,510,511],{"class":304},"TresPerspectiveCamera",[294,513,490],{"class":300},[294,515,516],{"class":308},"position",[294,518,315],{"class":300},[294,520,318],{"class":300},[294,522,523],{"class":300},"[",[294,525,527],{"class":526},"sbssI","3",[294,529,530],{"class":300},", ",[294,532,527],{"class":526},[294,534,530],{"class":300},[294,536,527],{"class":526},[294,538,539],{"class":300},"]",[294,541,318],{"class":300},[294,543,544],{"class":300}," />\n",[294,546,548],{"class":296,"line":547},12,[294,549,551],{"class":550},"sHwdD","      \u003C!-- Your scene content here -->\n",[294,553,555,558,560],{"class":296,"line":554},13,[294,556,557],{"class":300},"    \u003C/",[294,559,476],{"class":304},[294,561,327],{"class":300},[294,563,565,568,570],{"class":296,"line":564},14,[294,566,567],{"class":300},"  \u003C/",[294,569,442],{"class":304},[294,571,327],{"class":300},[294,573,575,577,579],{"class":296,"line":574},15,[294,576,414],{"class":300},[294,578,431],{"class":304},[294,580,327],{"class":300},[241,582,584],{"id":583},"notes","Notes",[586,587,588,595,602],"ul",{},[589,590,591,592,594],"li",{},"You must pass a valid ",[249,593,442],{}," element.",[589,596,597,598,601],{},"Canvas sizing and styling are ",[256,599,600],{},"your"," responsibility.",[589,603,604,605,607],{},"Props and events match ",[249,606,89],{},", so you can reuse the same API surface.",[609,610,611],"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":290,"searchDepth":297,"depth":330,"links":613},[614,615,616,617],{"id":243,"depth":330,"text":244},{"id":271,"depth":330,"text":272},{"id":281,"depth":330,"text":282},{"id":583,"depth":330,"text":584},"Internal context component used by TresCanvas for advanced setups.","md",null,{},{"title":93,"description":618},"EOhPvDEJSomPqpjuXtFcCXxIuzIX1joBcBOvt4v9q48",[625,627],{"title":89,"path":90,"stem":91,"description":626,"children":-1},"The TresCanvas component is the main component for rendering 3D scenes.",{"title":97,"path":98,"stem":99,"description":628,"children":-1},"Learn how TresJS automatically maps Vue components to Three.js objects using a custom renderer and autogenerated catalogue.",1771328671060]