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