[{"data":1,"prerenderedAt":718},["ShallowReactive",2],{"navigation":3,"/api/components/tres-portal":243,"/api/components/tres-portal-surround":713},[4,29,78,177,209,219,223,227,231,235,239],{"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},"Cookbook","/cookbook","4.cookbook",[182,185,189,193,197,201,205],{"title":183,"path":179,"stem":184},"Cookbook 🍳🧑‍🍳","4.cookbook/index",{"title":186,"path":187,"stem":188},"OrbitControls","/cookbook/orbit-controls","4.cookbook/1.orbit-controls",{"title":190,"path":191,"stem":192},"Basic Animations","/cookbook/basic-animations","4.cookbook/2.basic-animations",{"title":194,"path":195,"stem":196},"Model Animation","/cookbook/model-animation","4.cookbook/3.model-animation",{"title":198,"path":199,"stem":200},"Advanced GSAP Animations","/cookbook/advanced-gsap-animations","4.cookbook/4.advanced-gsap-animations",{"title":202,"path":203,"stem":204},"Tweakpane","/cookbook/tweakpane","4.cookbook/5.tweakpane",{"title":206,"path":207,"stem":208},"Dynamic components","/cookbook/transition-dynamic","4.cookbook/6.transition-dynamic",{"title":210,"path":211,"stem":212,"children":213},"Community","/community","5.community/1.index",[214,215],{"title":210,"path":211,"stem":212},{"title":216,"path":217,"stem":218},"Awesome Resources","/community/awesome-resources","5.community/awesome-resources",{"title":220,"path":221,"stem":222},"German Translation","/de","de",{"title":224,"path":225,"stem":226},"Spanish Translation","/es","es",{"title":228,"path":229,"stem":230},"French Translation","/fr","fr",{"title":232,"path":233,"stem":234},"Italian Translation","/it","it",{"title":236,"path":237,"stem":238},"Japanese Translation","/jp","jp",{"title":240,"path":241,"stem":242},"Chinese Translation","/zh","zh",{"id":244,"title":105,"body":245,"description":707,"extension":708,"links":709,"meta":710,"navigation":39,"path":106,"seo":711,"stem":107,"__hash__":712},"docs/3.api/1.components/tres-portal.md",{"type":246,"value":247,"toc":703},"minimark",[248,252,272,289,292,297,553,557,624,699],[249,250,105],"h1",{"id":251},"tresportal",[253,254,255,259,260,263,264,267,268,271],"p",{},[256,257,258],"code",{},"\u003CTresPortal>"," reparents its declarative children into a target ",[256,261,262],{},"Object3D"," (often a separate ",[256,265,266],{},"Scene",") instead of the surrounding scene graph. It is a thin wrapper over Vue's built-in ",[256,269,270],{},"\u003CTeleport>",", so children remain fully reactive — adding, removing, or updating them works as usual.",[253,273,274,275,284,285,288],{},"It is the building block behind ",[276,277,281],"a",{"href":278,"rel":279},"https://cientos.tresjs.org/api/materials/mesh-portal-material",[280],"nofollow",[256,282,283],{},"MeshPortalMaterial"," in ",[256,286,287],{},"@tresjs/cientos",".",[290,291],"examples-portal",{},[293,294,296],"h2",{"id":295},"usage","Usage",[298,299,304],"pre",{"className":300,"code":301,"language":302,"meta":303,"style":303},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { TresCanvas, TresPortal } from '@tresjs/core'\nimport { Scene } from 'three'\n\nconst target = new Scene()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPortal :to=\"target\">\n      \u003CTresMesh>\n        \u003CTresBoxGeometry />\n        \u003CTresMeshNormalMaterial />\n      \u003C/TresMesh>\n    \u003C/TresPortal>\n  \u003C/TresCanvas>\n\u003C/template>\n","vue","",[256,305,306,341,376,397,403,423,433,438,448,459,481,492,504,514,524,534,544],{"__ignoreMap":303},[307,308,311,315,319,323,326,329,332,336,338],"span",{"class":309,"line":310},"line",1,[307,312,314],{"class":313},"sMK4o","\u003C",[307,316,318],{"class":317},"swJcz","script",[307,320,322],{"class":321},"spNyl"," setup",[307,324,325],{"class":321}," lang",[307,327,328],{"class":313},"=",[307,330,331],{"class":313},"\"",[307,333,335],{"class":334},"sfazB","ts",[307,337,331],{"class":313},[307,339,340],{"class":313},">\n",[307,342,344,348,351,355,358,361,364,367,370,373],{"class":309,"line":343},2,[307,345,347],{"class":346},"s7zQu","import",[307,349,350],{"class":313}," {",[307,352,354],{"class":353},"sTEyZ"," TresCanvas",[307,356,357],{"class":313},",",[307,359,360],{"class":353}," TresPortal",[307,362,363],{"class":313}," }",[307,365,366],{"class":346}," from",[307,368,369],{"class":313}," '",[307,371,372],{"class":334},"@tresjs/core",[307,374,375],{"class":313},"'\n",[307,377,379,381,383,386,388,390,392,395],{"class":309,"line":378},3,[307,380,347],{"class":346},[307,382,350],{"class":313},[307,384,385],{"class":353}," Scene",[307,387,363],{"class":313},[307,389,366],{"class":346},[307,391,369],{"class":313},[307,393,394],{"class":334},"three",[307,396,375],{"class":313},[307,398,400],{"class":309,"line":399},4,[307,401,402],{"emptyLinePlaceholder":39},"\n",[307,404,406,409,412,414,417,420],{"class":309,"line":405},5,[307,407,408],{"class":321},"const",[307,410,411],{"class":353}," target ",[307,413,328],{"class":313},[307,415,416],{"class":313}," new",[307,418,385],{"class":419},"s2Zo4",[307,421,422],{"class":353},"()\n",[307,424,426,429,431],{"class":309,"line":425},6,[307,427,428],{"class":313},"\u003C/",[307,430,318],{"class":317},[307,432,340],{"class":313},[307,434,436],{"class":309,"line":435},7,[307,437,402],{"emptyLinePlaceholder":39},[307,439,441,443,446],{"class":309,"line":440},8,[307,442,314],{"class":313},[307,444,445],{"class":317},"template",[307,447,340],{"class":313},[307,449,451,454,457],{"class":309,"line":450},9,[307,452,453],{"class":313},"  \u003C",[307,455,456],{"class":317},"TresCanvas",[307,458,340],{"class":313},[307,460,462,465,467,470,472,474,477,479],{"class":309,"line":461},10,[307,463,464],{"class":313},"    \u003C",[307,466,105],{"class":317},[307,468,469],{"class":321}," :to",[307,471,328],{"class":313},[307,473,331],{"class":313},[307,475,476],{"class":334},"target",[307,478,331],{"class":313},[307,480,340],{"class":313},[307,482,484,487,490],{"class":309,"line":483},11,[307,485,486],{"class":313},"      \u003C",[307,488,489],{"class":317},"TresMesh",[307,491,340],{"class":313},[307,493,495,498,501],{"class":309,"line":494},12,[307,496,497],{"class":313},"        \u003C",[307,499,500],{"class":317},"TresBoxGeometry",[307,502,503],{"class":313}," />\n",[307,505,507,509,512],{"class":309,"line":506},13,[307,508,497],{"class":313},[307,510,511],{"class":317},"TresMeshNormalMaterial",[307,513,503],{"class":313},[307,515,517,520,522],{"class":309,"line":516},14,[307,518,519],{"class":313},"      \u003C/",[307,521,489],{"class":317},[307,523,340],{"class":313},[307,525,527,530,532],{"class":309,"line":526},15,[307,528,529],{"class":313},"    \u003C/",[307,531,105],{"class":317},[307,533,340],{"class":313},[307,535,537,540,542],{"class":309,"line":536},16,[307,538,539],{"class":313},"  \u003C/",[307,541,456],{"class":317},[307,543,340],{"class":313},[307,545,547,549,551],{"class":309,"line":546},17,[307,548,428],{"class":313},[307,550,445],{"class":317},[307,552,340],{"class":313},[293,554,556],{"id":555},"props","Props",[558,559,560,579],"table",{},[561,562,563],"thead",{},[564,565,566,570,573,576],"tr",{},[567,568,569],"th",{},"Prop",[567,571,572],{},"Type",[567,574,575],{},"Default",[567,577,578],{},"Description",[580,581,582,600],"tbody",{},[564,583,584,590,594,597],{},[585,586,587],"td",{},[256,588,589],{},"to",[585,591,592],{},[256,593,262],{},[585,595,596],{},"—",[585,598,599],{},"Target object/scene to reparent children into. Required.",[564,601,602,607,612,617],{},[585,603,604],{},[256,605,606],{},"disabled",[585,608,609],{},[256,610,611],{},"boolean",[585,613,614],{},[256,615,616],{},"false",[585,618,619,620,623],{},"When ",[256,621,622],{},"true",", children render in place (main scene).",[625,626,627,656],"note",{},[253,628,629,631,632,636,637,640,641,644,645,648,649,652,653,655],{},[256,630,258],{}," only handles ",[633,634,635],"strong",{},"structural"," reparenting — children are added to the target via ",[256,638,639],{},"nodeOps",", and the target is also where ",[256,642,643],{},"attach"," resolves. So ",[256,646,647],{},"\u003CTresColor attach=\"background\" />"," or ",[256,650,651],{},"\u003Cprimitive :object=\"tex\" attach=\"environment\" />"," inside a portal set the ",[633,654,476],{}," scene's properties.",[253,657,658,659,662,663,666,667,670,671,674,675,678,679,682,683,686,687,689,690,692,693,695,696,698],{},"By itself it does ",[633,660,661],{},"not"," override the injected scene context: children's ",[256,664,665],{},"useTres().scene"," still returns the main scene, so imperative helpers like the cientos ",[256,668,669],{},"\u003CEnvironment>"," component would target the main scene. A consumer can add this by ",[256,672,673],{},"provide()","-ing a context whose ",[256,676,677],{},"scene"," is the target — ",[256,680,681],{},"provide","/",[256,684,685],{},"inject"," follows the mounted tree, so it reaches the portal's slot children through the ",[256,688,270],{},". ",[256,691,283],{}," does exactly this, which is why ",[256,694,669],{}," works inside it. Rendering the target scene (e.g. to a texture) is also the consumer's responsibility — ",[256,697,283],{}," does that via an FBO.",[700,701,702],"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 .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":303,"searchDepth":310,"depth":343,"links":704},[705,706],{"id":295,"depth":343,"text":296},{"id":555,"depth":343,"text":556},"Reparent declarative children into any Object3D or Scene target.","md",null,{},{"title":105,"description":707},"1Aoldu9ZHjPhWdnZSaB9p8HlHvCuPLbm-N4MsWciLwQ",[714,716],{"title":101,"path":102,"stem":103,"description":715,"children":-1},"Learn how TresJS automatically maps Vue components to Three.js objects using a custom renderer and autogenerated catalogue.",{"title":116,"path":117,"stem":118,"description":717,"children":-1},"useTres provides a convenient access to a simplified TresJS context.",1782892868272]