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