[{"data":1,"prerenderedAt":1301},["ShallowReactive",2],{"navigation":3,"\u002Fapi\u002Fmaterials\u002Fmesh-portal-material":498,"\u002Fapi\u002Fmaterials\u002Fmesh-portal-material-surround":1296},[4,26],{"title":5,"path":6,"stem":7,"children":8},"Getting Started","\u002Fgetting-started","1.getting-started\u002F1.index",[9,10,14,18,22],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"Installation Guide","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation",{"title":15,"path":16,"stem":17},"Usage","\u002Fgetting-started\u002Fusage","1.getting-started\u002F3.usage",{"title":19,"path":20,"stem":21},"Loading Models","\u002Fgetting-started\u002Floading-models","1.getting-started\u002F4.loading-models",{"title":23,"path":24,"stem":25},"Upgrade Guide","\u002Fgetting-started\u002Fupgrade-guide","1.getting-started\u002F5.upgrade-guide",{"title":27,"path":28,"stem":29,"children":30},"Api","\u002Fapi","2.api",[31,34,96,126,168,210,308,334,368,418,464],{"title":32,"path":28,"stem":33},"All","2.api\u002Findex",{"title":35,"path":36,"stem":37,"children":38},"Abstractions","\u002Fapi\u002Fabstractions","2.api\u002F1.abstractions\u002Findex",[39,40,44,48,52,56,60,64,68,72,76,80,84,88,92],{"title":35,"path":36,"stem":37},{"title":41,"path":42,"stem":43},"Align","\u002Fapi\u002Fabstractions\u002Falign","2.api\u002F1.abstractions\u002Falign",{"title":45,"path":46,"stem":47},"Billboard","\u002Fapi\u002Fabstractions\u002Fbillboard","2.api\u002F1.abstractions\u002Fbillboard",{"title":49,"path":50,"stem":51},"Camera Shake","\u002Fapi\u002Fabstractions\u002Fcamera-shake","2.api\u002F1.abstractions\u002Fcamera-shake",{"title":53,"path":54,"stem":55},"Decal","\u002Fapi\u002Fabstractions\u002Fdecal","2.api\u002F1.abstractions\u002Fdecal",{"title":57,"path":58,"stem":59},"Edges","\u002Fapi\u002Fabstractions\u002Fedges","2.api\u002F1.abstractions\u002Fedges",{"title":61,"path":62,"stem":63},"Fit","\u002Fapi\u002Fabstractions\u002Ffit","2.api\u002F1.abstractions\u002Ffit",{"title":65,"path":66,"stem":67},"Instances","\u002Fapi\u002Fabstractions\u002Finstances","2.api\u002F1.abstractions\u002Finstances",{"title":69,"path":70,"stem":71},"Levioso (Float)","\u002Fapi\u002Fabstractions\u002Flevioso","2.api\u002F1.abstractions\u002Flevioso",{"title":73,"path":74,"stem":75},"Mask","\u002Fapi\u002Fabstractions\u002Fmask","2.api\u002F1.abstractions\u002Fmask",{"title":77,"path":78,"stem":79},"Merged","\u002Fapi\u002Fabstractions\u002Fmerged","2.api\u002F1.abstractions\u002Fmerged",{"title":81,"path":82,"stem":83},"Outline","\u002Fapi\u002Fabstractions\u002Foutline","2.api\u002F1.abstractions\u002Foutline",{"title":85,"path":86,"stem":87},"Sampler","\u002Fapi\u002Fabstractions\u002Fsampler","2.api\u002F1.abstractions\u002Fsampler",{"title":89,"path":90,"stem":91},"ScreenSizer","\u002Fapi\u002Fabstractions\u002Fscreen-sizer","2.api\u002F1.abstractions\u002Fscreen-sizer",{"title":93,"path":94,"stem":95},"ScreenSpace","\u002Fapi\u002Fabstractions\u002Fscreen-space","2.api\u002F1.abstractions\u002Fscreen-space",{"title":97,"path":98,"stem":99,"children":100},"Controls","\u002Fapi\u002Fcontrols","2.api\u002F2.controls\u002Findex",[101,102,106,110,114,118,122],{"title":97,"path":98,"stem":99},{"title":103,"path":104,"stem":105},"Camera Controls","\u002Fapi\u002Fcontrols\u002Fcamera-controls","2.api\u002F2.controls\u002Fcamera-controls",{"title":107,"path":108,"stem":109},"Keyboard Controls","\u002Fapi\u002Fcontrols\u002Fkeyboard-controls","2.api\u002F2.controls\u002Fkeyboard-controls",{"title":111,"path":112,"stem":113},"Map Controls","\u002Fapi\u002Fcontrols\u002Fmap-controls","2.api\u002F2.controls\u002Fmap-controls",{"title":115,"path":116,"stem":117},"Orbit Controls","\u002Fapi\u002Fcontrols\u002Forbit-controls","2.api\u002F2.controls\u002Forbit-controls",{"title":119,"path":120,"stem":121},"PointerLock Controls","\u002Fapi\u002Fcontrols\u002Fpointer-lock-controls","2.api\u002F2.controls\u002Fpointer-lock-controls",{"title":123,"path":124,"stem":125},"Transform Controls","\u002Fapi\u002Fcontrols\u002Ftransform-controls","2.api\u002F2.controls\u002Ftransform-controls",{"title":127,"path":128,"stem":129,"children":130},"Loaders","\u002Fapi\u002Floaders","2.api\u002F3.loaders\u002Findex",[131,132,136,140,144,148,152,156,160,164],{"title":127,"path":128,"stem":129},{"title":133,"path":134,"stem":135},"useGLTF","\u002Fapi\u002Floaders\u002Fuse-gltf","2.api\u002F3.loaders\u002F1.use-gltf",{"title":137,"path":138,"stem":139},"GLTFModel","\u002Fapi\u002Floaders\u002Fgltf-model","2.api\u002F3.loaders\u002F2.gltf-model",{"title":141,"path":142,"stem":143},"useFBX","\u002Fapi\u002Floaders\u002Fuse-fbx","2.api\u002F3.loaders\u002F3.use-fbx",{"title":145,"path":146,"stem":147},"FBXModel","\u002Fapi\u002Floaders\u002Ffbx-model","2.api\u002F3.loaders\u002F4.fbx-model",{"title":149,"path":150,"stem":151},"useTexture","\u002Fapi\u002Floaders\u002Fuse-texture","2.api\u002F3.loaders\u002F5.use-texture",{"title":153,"path":154,"stem":155},"useTextures","\u002Fapi\u002Floaders\u002Fuse-textures","2.api\u002F3.loaders\u002F6.use-textures",{"title":157,"path":158,"stem":159},"useSVG","\u002Fapi\u002Floaders\u002Fuse-svg","2.api\u002F3.loaders\u002F7.use-svg",{"title":161,"path":162,"stem":163},"useProgress","\u002Fapi\u002Floaders\u002Fuse-progress","2.api\u002F3.loaders\u002Fuse-progress",{"title":165,"path":166,"stem":167},"useVideoTexture","\u002Fapi\u002Floaders\u002Fuse-video-texture","2.api\u002F3.loaders\u002Fuse-video-texture",{"title":169,"path":170,"stem":171,"children":172},"Materials","\u002Fapi\u002Fmaterials","2.api\u002F4.materials\u002Findex",[173,174,178,182,186,190,194,198,202,206],{"title":169,"path":170,"stem":171},{"title":175,"path":176,"stem":177},"Custom Shader Material","\u002Fapi\u002Fmaterials\u002Fcustom-shader-material","2.api\u002F4.materials\u002Fcustom-shader-material",{"title":179,"path":180,"stem":181},"Mesh Glass Material","\u002Fapi\u002Fmaterials\u002Fglass-material","2.api\u002F4.materials\u002Fglass-material",{"title":183,"path":184,"stem":185},"Holographic Material","\u002Fapi\u002Fmaterials\u002Fholographic-material","2.api\u002F4.materials\u002Fholographic-material",{"title":187,"path":188,"stem":189},"Mesh Discard Material","\u002Fapi\u002Fmaterials\u002Fmesh-discard-material","2.api\u002F4.materials\u002Fmesh-discard-material",{"title":191,"path":192,"stem":193},"Mesh Portal Material","\u002Fapi\u002Fmaterials\u002Fmesh-portal-material","2.api\u002F4.materials\u002Fmesh-portal-material",{"title":195,"path":196,"stem":197},"Mesh Reflection Material","\u002Fapi\u002Fmaterials\u002Fmesh-reflection-material","2.api\u002F4.materials\u002Fmesh-reflection-material",{"title":199,"path":200,"stem":201},"Mesh Transmission Material","\u002Fapi\u002Fmaterials\u002Fmesh-transmission-material","2.api\u002F4.materials\u002Fmesh-transmission-material",{"title":203,"path":204,"stem":205},"Point Material","\u002Fapi\u002Fmaterials\u002Fpoint-material","2.api\u002F4.materials\u002Fpoint-material",{"title":207,"path":208,"stem":209},"Wobble Material","\u002Fapi\u002Fmaterials\u002Fwobble-material","2.api\u002F4.materials\u002Fwobble-material",{"title":211,"path":212,"stem":213,"children":214},"Shapes","\u002Fapi\u002Fshapes","2.api\u002F5.shapes\u002Findex",[215,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296,300,304],{"title":211,"path":212,"stem":213},{"title":217,"path":218,"stem":219},"Box","\u002Fapi\u002Fshapes\u002Fbox","2.api\u002F5.shapes\u002Fbox",{"title":221,"path":222,"stem":223},"CatmullRomCurve3","\u002Fapi\u002Fshapes\u002Fcatmullromcurve3","2.api\u002F5.shapes\u002Fcatmullromcurve3",{"title":225,"path":226,"stem":227},"Circle","\u002Fapi\u002Fshapes\u002Fcircle","2.api\u002F5.shapes\u002Fcircle",{"title":229,"path":230,"stem":231},"Cone","\u002Fapi\u002Fshapes\u002Fcone","2.api\u002F5.shapes\u002Fcone",{"title":233,"path":234,"stem":235},"Cubic Bezier Line","\u002Fapi\u002Fshapes\u002Fcubic-bezier-line","2.api\u002F5.shapes\u002Fcubic-bezier-line",{"title":237,"path":238,"stem":239},"Cylinder","\u002Fapi\u002Fshapes\u002Fcylinder","2.api\u002F5.shapes\u002Fcylinder",{"title":241,"path":242,"stem":243},"Dodecahedron","\u002Fapi\u002Fshapes\u002Fdodecahedron","2.api\u002F5.shapes\u002Fdodecahedron",{"title":245,"path":246,"stem":247},"Grid","\u002Fapi\u002Fshapes\u002Fgrid","2.api\u002F5.shapes\u002Fgrid",{"title":249,"path":250,"stem":251},"Icosahedron","\u002Fapi\u002Fshapes\u002Ficosahedron","2.api\u002F5.shapes\u002Ficosahedron",{"title":253,"path":254,"stem":255},"Line2","\u002Fapi\u002Fshapes\u002Fline2","2.api\u002F5.shapes\u002Fline2",{"title":257,"path":258,"stem":259},"Octahedron","\u002Fapi\u002Fshapes\u002Foctahedron","2.api\u002F5.shapes\u002Foctahedron",{"title":261,"path":262,"stem":263},"Plane","\u002Fapi\u002Fshapes\u002Fplane","2.api\u002F5.shapes\u002Fplane",{"title":265,"path":266,"stem":267},"Quadratic Bezier Line","\u002Fapi\u002Fshapes\u002Fquadratic-bezier-line","2.api\u002F5.shapes\u002Fquadratic-bezier-line",{"title":269,"path":270,"stem":271},"Ring","\u002Fapi\u002Fshapes\u002Fring","2.api\u002F5.shapes\u002Fring",{"title":273,"path":274,"stem":275},"Rounded Box","\u002Fapi\u002Fshapes\u002Frounded-box","2.api\u002F5.shapes\u002Frounded-box",{"title":277,"path":278,"stem":279},"Rounded Plane","\u002Fapi\u002Fshapes\u002Frounded-plane","2.api\u002F5.shapes\u002Frounded-plane",{"title":281,"path":282,"stem":283},"Screen Quad","\u002Fapi\u002Fshapes\u002Fscreen-quad","2.api\u002F5.shapes\u002Fscreen-quad",{"title":285,"path":286,"stem":287},"Sphere","\u002Fapi\u002Fshapes\u002Fsphere","2.api\u002F5.shapes\u002Fsphere",{"title":289,"path":290,"stem":291},"Superformula","\u002Fapi\u002Fshapes\u002Fsuperformula","2.api\u002F5.shapes\u002Fsuperformula",{"title":293,"path":294,"stem":295},"Tetrahedron","\u002Fapi\u002Fshapes\u002Ftetrahedron","2.api\u002F5.shapes\u002Ftetrahedron",{"title":297,"path":298,"stem":299},"Torus","\u002Fapi\u002Fshapes\u002Ftorus","2.api\u002F5.shapes\u002Ftorus",{"title":301,"path":302,"stem":303},"Torus Knot","\u002Fapi\u002Fshapes\u002Ftorus-knot","2.api\u002F5.shapes\u002Ftorus-knot",{"title":305,"path":306,"stem":307},"Tube","\u002Fapi\u002Fshapes\u002Ftube","2.api\u002F5.shapes\u002Ftube",{"title":309,"path":310,"stem":311,"children":312},"Debug\u002FPerformance","\u002Fapi\u002Fdebug-performance","2.api\u002F6.debug-performance\u002Findex",[313,314,318,322,326,330],{"title":309,"path":310,"stem":311},{"title":315,"path":316,"stem":317},"Helper","\u002Fapi\u002Fdebug-performance\u002Fhelper","2.api\u002F6.debug-performance\u002Fhelper",{"title":319,"path":320,"stem":321},"LOD","\u002Fapi\u002Fdebug-performance\u002Flod","2.api\u002F6.debug-performance\u002Flod",{"title":323,"path":324,"stem":325},"Stats","\u002Fapi\u002Fdebug-performance\u002Fstats","2.api\u002F6.debug-performance\u002Fstats",{"title":327,"path":328,"stem":329},"StatsGl","\u002Fapi\u002Fdebug-performance\u002Fstats-gl","2.api\u002F6.debug-performance\u002Fstats-gl",{"title":331,"path":332,"stem":333},"useBVH","\u002Fapi\u002Fdebug-performance\u002Fuse-bvh","2.api\u002F6.debug-performance\u002Fuse-bvh",{"title":335,"path":336,"stem":337,"children":338},"Light\u002FShadow","\u002Fapi\u002Flight-shadow","2.api\u002F7.light-shadow\u002Findex",[339,340,344,348,352,356,360,364],{"title":335,"path":336,"stem":337},{"title":341,"path":342,"stem":343},"Accumulative Shadows","\u002Fapi\u002Flight-shadow\u002Faccumulative-shadows","2.api\u002F7.light-shadow\u002Faccumulative-shadows",{"title":345,"path":346,"stem":347},"Bake Shadows","\u002Fapi\u002Flight-shadow\u002Fbake-shadows","2.api\u002F7.light-shadow\u002Fbake-shadows",{"title":349,"path":350,"stem":351},"Circle Shadow","\u002Fapi\u002Flight-shadow\u002Fcircle-shadow","2.api\u002F7.light-shadow\u002Fcircle-shadow",{"title":353,"path":354,"stem":355},"Contact Shadows","\u002Fapi\u002Flight-shadow\u002Fcontact-shadows","2.api\u002F7.light-shadow\u002Fcontact-shadows",{"title":357,"path":358,"stem":359},"Lensflare","\u002Fapi\u002Flight-shadow\u002Flensflare","2.api\u002F7.light-shadow\u002Flensflare",{"title":361,"path":362,"stem":363},"Randomized Lights","\u002Fapi\u002Flight-shadow\u002Frandomized-lights","2.api\u002F7.light-shadow\u002Frandomized-lights",{"title":365,"path":366,"stem":367},"Soft Shadows","\u002Fapi\u002Flight-shadow\u002Fsoft-shadows","2.api\u002F7.light-shadow\u002Fsoft-shadows",{"title":369,"path":370,"stem":371,"children":372},"Staging","\u002Fapi\u002Fstaging","2.api\u002F8.staging\u002Findex",[373,374,378,382,386,390,394,398,402,406,410,414],{"title":369,"path":370,"stem":371},{"title":375,"path":376,"stem":377},"Environment","\u002Fapi\u002Fstaging\u002Fenvironment","2.api\u002F8.staging\u002F1.environment",{"title":379,"path":380,"stem":381},"useEnvironment","\u002Fapi\u002Fstaging\u002Fuse-environment","2.api\u002F8.staging\u002F2.use-environment",{"title":383,"path":384,"stem":385},"Lightformer","\u002Fapi\u002Fstaging\u002Flightformer","2.api\u002F8.staging\u002F3.lightformer",{"title":387,"path":388,"stem":389},"Backdrop","\u002Fapi\u002Fstaging\u002Fbackdrop","2.api\u002F8.staging\u002Fbackdrop",{"title":391,"path":392,"stem":393},"Ocean","\u002Fapi\u002Fstaging\u002Focean","2.api\u002F8.staging\u002Focean",{"title":395,"path":396,"stem":397},"Precipitation","\u002Fapi\u002Fstaging\u002Fprecipitation","2.api\u002F8.staging\u002Fprecipitation",{"title":399,"path":400,"stem":401},"Sky","\u002Fapi\u002Fstaging\u002Fsky","2.api\u002F8.staging\u002Fsky",{"title":403,"path":404,"stem":405},"Smoke","\u002Fapi\u002Fstaging\u002Fsmoke","2.api\u002F8.staging\u002Fsmoke",{"title":407,"path":408,"stem":409},"Sparkles","\u002Fapi\u002Fstaging\u002Fsparkles","2.api\u002F8.staging\u002Fsparkles",{"title":411,"path":412,"stem":413},"Stage","\u002Fapi\u002Fstaging\u002Fstage","2.api\u002F8.staging\u002Fstage",{"title":415,"path":416,"stem":417},"Stars","\u002Fapi\u002Fstaging\u002Fstars","2.api\u002F8.staging\u002Fstars",{"title":419,"path":420,"stem":421,"children":422},"Objects","\u002Fapi\u002Fobjects","2.api\u002F9.objects\u002Findex",[423,424,428,432,436,440,444,448,452,456,460],{"title":419,"path":420,"stem":421},{"title":425,"path":426,"stem":427},"AnimatedSprite","\u002Fapi\u002Fobjects\u002Fanimated-sprite","2.api\u002F9.objects\u002Fanimated-sprite",{"title":429,"path":430,"stem":431},"CubeCamera","\u002Fapi\u002Fobjects\u002Fcube-camera","2.api\u002F9.objects\u002Fcube-camera",{"title":433,"path":434,"stem":435},"Fbo","\u002Fapi\u002Fobjects\u002Ffbo","2.api\u002F9.objects\u002Ffbo",{"title":437,"path":438,"stem":439},"GradientTexture","\u002Fapi\u002Fobjects\u002Fgradient-texture","2.api\u002F9.objects\u002Fgradient-texture",{"title":441,"path":442,"stem":443},"HTML","\u002Fapi\u002Fobjects\u002Fhtml","2.api\u002F9.objects\u002Fhtml",{"title":445,"path":446,"stem":447},"Image","\u002Fapi\u002Fobjects\u002Fimage","2.api\u002F9.objects\u002Fimage",{"title":449,"path":450,"stem":451},"MarchingCubes","\u002Fapi\u002Fobjects\u002Fmarching-cubes","2.api\u002F9.objects\u002Fmarching-cubes",{"title":453,"path":454,"stem":455},"Reflector","\u002Fapi\u002Fobjects\u002Freflector","2.api\u002F9.objects\u002Freflector",{"title":457,"path":458,"stem":459},"Refractor","\u002Fapi\u002Fobjects\u002Frefractor","2.api\u002F9.objects\u002Frefractor",{"title":461,"path":462,"stem":463},"Text3D","\u002Fapi\u002Fobjects\u002Ftext-3d","2.api\u002F9.objects\u002Ftext-3d",{"title":465,"path":466,"stem":467,"children":468},"Miscellaneous","\u002Fapi\u002Fmiscellaneous","2.api\u002Fmiscellaneous\u002Findex",[469,470,474,478,482,486,490,494],{"title":465,"path":466,"stem":467},{"title":471,"path":472,"stem":473},"Bounds","\u002Fapi\u002Fmiscellaneous\u002Fbounds","2.api\u002Fmiscellaneous\u002Fbounds",{"title":475,"path":476,"stem":477},"GlobalAudio","\u002Fapi\u002Fmiscellaneous\u002Fglobal-audio","2.api\u002Fmiscellaneous\u002Fglobal-audio",{"title":479,"path":480,"stem":481},"MouseParallax","\u002Fapi\u002Fmiscellaneous\u002Fmouse-parallax","2.api\u002Fmiscellaneous\u002Fmouse-parallax",{"title":483,"path":484,"stem":485},"PositionalAudio","\u002Fapi\u002Fmiscellaneous\u002Fpositional-audio","2.api\u002Fmiscellaneous\u002Fpositional-audio",{"title":487,"path":488,"stem":489},"useAnimations","\u002Fapi\u002Fmiscellaneous\u002Fuse-animations","2.api\u002Fmiscellaneous\u002Fuse-animations",{"title":491,"path":492,"stem":493},"useGLTFExporter","\u002Fapi\u002Fmiscellaneous\u002Fuse-gltf-exporter","2.api\u002Fmiscellaneous\u002Fuse-gltf-exporter",{"title":495,"path":496,"stem":497},"useIntersect","\u002Fapi\u002Fmiscellaneous\u002Fuse-intersect","2.api\u002Fmiscellaneous\u002Fuse-intersect",{"id":499,"title":191,"body":500,"description":1290,"extension":1291,"links":1292,"meta":1293,"navigation":676,"path":192,"seo":1294,"stem":193,"__hash__":1295},"docs\u002F2.api\u002F4.materials\u002Fmesh-portal-material.md",{"type":501,"value":502,"toc":1285},"minimark",[503,509,522,542,557,561,998,1002,1108,1112,1122,1198,1244,1269,1281],[504,505,506],"scene-controls-wrapper",{},[507,508],"materials-mesh-portal-material",{},[510,511,512,513,517,518,521],"p",{},"The ",[514,515,516],"code",{},"cientos"," package provides a ",[514,519,520],{},"\u003CMeshPortalMaterial \u002F>"," component that renders its\ndeclarative children into a private off-main scene and projects that scene onto the\nhost mesh as a perspective-correct window.",[510,523,524,525,529,530,533,534,537,538,541],{},"Children declared inside the component render into the ",[526,527,528],"strong",{},"portal scene",", not the main\nscene. The portal scene is rendered to a frame buffer each frame using the active\ncamera, so contents sit in world-space (move the camera and you get parallax through\nthe surface, not a flat decal). The mesh geometry masks the result, and ",[514,531,532],{},"blend","\ncross-fades between the world (",[514,535,536],{},"0",") and the portal (",[514,539,540],{},"1",").",[543,544,545],"prose-note",{},[510,546,547,548,556],{},"This component is a port of the ",[549,550,555],"a",{"href":551,"rel":552,"target":554},"https:\u002F\u002Fdrei.docs.pmnd.rs\u002Fportals\u002Fmesh-portal-material",[553],"nofollow","_blank","drei MeshPortalMaterial",". All credit goes to the original authors.",[558,559,15],"h2",{"id":560},"usage",[562,563,568],"pre",{"className":564,"code":565,"language":566,"meta":567,"style":567},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { MeshPortalMaterial, OrbitControls } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 0, 6]\" \u002F>\n    \u003COrbitControls \u002F>\n    \u003CTresMesh>\n      \u003CTresPlaneGeometry :args=\"[3, 4]\" \u002F>\n      \u003CMeshPortalMaterial :blend=\"0\">\n        \u003C!-- children render INTO the portal scene -->\n        \u003CTresAmbientLight :intensity=\"0.5\" \u002F>\n        \u003CTresMesh :position=\"[0, 0, -1]\">\n          \u003CTresTorusKnotGeometry :args=\"[0.6, 0.25, 128, 32]\" \u002F>\n          \u003CTresMeshStandardMaterial color=\"#fbb03b\" \u002F>\n        \u003C\u002FTresMesh>\n      \u003C\u002FMeshPortalMaterial>\n    \u003C\u002FTresMesh>\n  \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n","vue","",[514,569,570,605,634,661,671,678,688,699,742,752,762,796,818,825,850,884,927,949,959,969,979,989],{"__ignoreMap":567},[571,572,575,579,583,587,590,593,596,600,602],"span",{"class":573,"line":574},"line",1,[571,576,578],{"class":577},"sMK4o","\u003C",[571,580,582],{"class":581},"swJcz","script",[571,584,586],{"class":585},"spNyl"," setup",[571,588,589],{"class":585}," lang",[571,591,592],{"class":577},"=",[571,594,595],{"class":577},"\"",[571,597,599],{"class":598},"sfazB","ts",[571,601,595],{"class":577},[571,603,604],{"class":577},">\n",[571,606,608,612,615,619,622,625,628,631],{"class":573,"line":607},2,[571,609,611],{"class":610},"s7zQu","import",[571,613,614],{"class":577}," {",[571,616,618],{"class":617},"sTEyZ"," TresCanvas",[571,620,621],{"class":577}," }",[571,623,624],{"class":610}," from",[571,626,627],{"class":577}," '",[571,629,630],{"class":598},"@tresjs\u002Fcore",[571,632,633],{"class":577},"'\n",[571,635,637,639,641,644,647,650,652,654,656,659],{"class":573,"line":636},3,[571,638,611],{"class":610},[571,640,614],{"class":577},[571,642,643],{"class":617}," MeshPortalMaterial",[571,645,646],{"class":577},",",[571,648,649],{"class":617}," OrbitControls",[571,651,621],{"class":577},[571,653,624],{"class":610},[571,655,627],{"class":577},[571,657,658],{"class":598},"@tresjs\u002Fcientos",[571,660,633],{"class":577},[571,662,664,667,669],{"class":573,"line":663},4,[571,665,666],{"class":577},"\u003C\u002F",[571,668,582],{"class":581},[571,670,604],{"class":577},[571,672,674],{"class":573,"line":673},5,[571,675,677],{"emptyLinePlaceholder":676},true,"\n",[571,679,681,683,686],{"class":573,"line":680},6,[571,682,578],{"class":577},[571,684,685],{"class":581},"template",[571,687,604],{"class":577},[571,689,691,694,697],{"class":573,"line":690},7,[571,692,693],{"class":577},"  \u003C",[571,695,696],{"class":581},"TresCanvas",[571,698,604],{"class":577},[571,700,702,705,708,711,714,716,718,721,724,727,729,731,734,737,739],{"class":573,"line":701},8,[571,703,704],{"class":577},"    \u003C",[571,706,707],{"class":581},"TresPerspectiveCamera",[571,709,710],{"class":577}," :",[571,712,713],{"class":585},"position",[571,715,592],{"class":577},[571,717,595],{"class":577},[571,719,720],{"class":577},"[",[571,722,536],{"class":723},"sbssI",[571,725,726],{"class":577},", ",[571,728,536],{"class":723},[571,730,726],{"class":577},[571,732,733],{"class":723},"6",[571,735,736],{"class":577},"]",[571,738,595],{"class":577},[571,740,741],{"class":577}," \u002F>\n",[571,743,745,747,750],{"class":573,"line":744},9,[571,746,704],{"class":577},[571,748,749],{"class":581},"OrbitControls",[571,751,741],{"class":577},[571,753,755,757,760],{"class":573,"line":754},10,[571,756,704],{"class":577},[571,758,759],{"class":581},"TresMesh",[571,761,604],{"class":577},[571,763,765,768,771,773,776,778,780,782,785,787,790,792,794],{"class":573,"line":764},11,[571,766,767],{"class":577},"      \u003C",[571,769,770],{"class":581},"TresPlaneGeometry",[571,772,710],{"class":577},[571,774,775],{"class":585},"args",[571,777,592],{"class":577},[571,779,595],{"class":577},[571,781,720],{"class":577},[571,783,784],{"class":723},"3",[571,786,726],{"class":577},[571,788,789],{"class":723},"4",[571,791,736],{"class":577},[571,793,595],{"class":577},[571,795,741],{"class":577},[571,797,799,801,804,806,808,810,812,814,816],{"class":573,"line":798},12,[571,800,767],{"class":577},[571,802,803],{"class":581},"MeshPortalMaterial",[571,805,710],{"class":577},[571,807,532],{"class":585},[571,809,592],{"class":577},[571,811,595],{"class":577},[571,813,536],{"class":723},[571,815,595],{"class":577},[571,817,604],{"class":577},[571,819,821],{"class":573,"line":820},13,[571,822,824],{"class":823},"sHwdD","        \u003C!-- children render INTO the portal scene -->\n",[571,826,828,831,834,836,839,841,843,846,848],{"class":573,"line":827},14,[571,829,830],{"class":577},"        \u003C",[571,832,833],{"class":581},"TresAmbientLight",[571,835,710],{"class":577},[571,837,838],{"class":585},"intensity",[571,840,592],{"class":577},[571,842,595],{"class":577},[571,844,845],{"class":723},"0.5",[571,847,595],{"class":577},[571,849,741],{"class":577},[571,851,853,855,857,859,861,863,865,867,869,871,873,876,878,880,882],{"class":573,"line":852},15,[571,854,830],{"class":577},[571,856,759],{"class":581},[571,858,710],{"class":577},[571,860,713],{"class":585},[571,862,592],{"class":577},[571,864,595],{"class":577},[571,866,720],{"class":577},[571,868,536],{"class":723},[571,870,726],{"class":577},[571,872,536],{"class":723},[571,874,875],{"class":577},", -",[571,877,540],{"class":723},[571,879,736],{"class":577},[571,881,595],{"class":577},[571,883,604],{"class":577},[571,885,887,890,893,895,897,899,901,903,906,908,911,913,916,918,921,923,925],{"class":573,"line":886},16,[571,888,889],{"class":577},"          \u003C",[571,891,892],{"class":581},"TresTorusKnotGeometry",[571,894,710],{"class":577},[571,896,775],{"class":585},[571,898,592],{"class":577},[571,900,595],{"class":577},[571,902,720],{"class":577},[571,904,905],{"class":723},"0.6",[571,907,726],{"class":577},[571,909,910],{"class":723},"0.25",[571,912,726],{"class":577},[571,914,915],{"class":723},"128",[571,917,726],{"class":577},[571,919,920],{"class":723},"32",[571,922,736],{"class":577},[571,924,595],{"class":577},[571,926,741],{"class":577},[571,928,930,932,935,938,940,942,945,947],{"class":573,"line":929},17,[571,931,889],{"class":577},[571,933,934],{"class":581},"TresMeshStandardMaterial",[571,936,937],{"class":585}," color",[571,939,592],{"class":577},[571,941,595],{"class":577},[571,943,944],{"class":598},"#fbb03b",[571,946,595],{"class":577},[571,948,741],{"class":577},[571,950,952,955,957],{"class":573,"line":951},18,[571,953,954],{"class":577},"        \u003C\u002F",[571,956,759],{"class":581},[571,958,604],{"class":577},[571,960,962,965,967],{"class":573,"line":961},19,[571,963,964],{"class":577},"      \u003C\u002F",[571,966,803],{"class":581},[571,968,604],{"class":577},[571,970,972,975,977],{"class":573,"line":971},20,[571,973,974],{"class":577},"    \u003C\u002F",[571,976,759],{"class":581},[571,978,604],{"class":577},[571,980,982,985,987],{"class":573,"line":981},21,[571,983,984],{"class":577},"  \u003C\u002F",[571,986,696],{"class":581},[571,988,604],{"class":577},[571,990,992,994,996],{"class":573,"line":991},22,[571,993,666],{"class":577},[571,995,685],{"class":581},[571,997,604],{"class":577},[558,999,1001],{"id":1000},"props","Props",[1003,1004,1005,1024],"table",{},[1006,1007,1008],"thead",{},[1009,1010,1011,1015,1018,1021],"tr",{},[1012,1013,1014],"th",{},"Prop",[1012,1016,1017],{},"Type",[1012,1019,1020],{},"Default",[1012,1022,1023],{},"Description",[1025,1026,1027,1051,1070,1090],"tbody",{},[1009,1028,1029,1034,1039,1043],{},[1030,1031,1032],"td",{},[514,1033,532],{},[1030,1035,1036],{},[514,1037,1038],{},"number",[1030,1040,1041],{},[514,1042,536],{},[1030,1044,1045,1047,1048,1050],{},[514,1046,536],{}," = world only, ",[514,1049,540],{}," = portal only; cross-fades between.",[1009,1052,1053,1058,1062,1067],{},[1030,1054,1055],{},[514,1056,1057],{},"resolution",[1030,1059,1060],{},[514,1061,1038],{},[1030,1063,1064],{},[514,1065,1066],{},"512",[1030,1068,1069],{},"Frame buffer resolution for the portal render.",[1009,1071,1072,1077,1082,1087],{},[1030,1073,1074],{},[514,1075,1076],{},"worldUnits",[1030,1078,1079],{},[514,1080,1081],{},"boolean",[1030,1083,1084],{},[514,1085,1086],{},"false",[1030,1088,1089],{},"Keep portal contents in world units instead of host-relative.",[1009,1091,1092,1097,1101,1105],{},[1030,1093,1094],{},[514,1095,1096],{},"renderPriority",[1030,1098,1099],{},[514,1100,1038],{},[1030,1102,1103],{},[514,1104,536],{},[1030,1106,1107],{},"Render-loop priority for the blend takeover. Applied at mount — changing it later requires a remount.",[558,1109,1111],{"id":1110},"setting-the-portals-background-or-environment","Setting the portal's background or environment",[510,1113,1114,1117,1118,1121],{},[514,1115,1116],{},"\u003CMeshPortalMaterial>"," overrides the injected scene context for its children, so\nhelpers that target \"the scene\" affect the ",[526,1119,1120],{},"portal"," scene, not the world. Both of\nthese give the portal its own look, independent of the main scene:",[562,1123,1125],{"className":564,"code":1124,"language":566,"meta":567,"style":567},"\u003CMeshPortalMaterial :blend=\"blend\">\n  \u003C!-- Imperative helper — works because the injected scene is the portal scene -->\n  \u003CSuspense>\n    \u003CEnvironment preset=\"dawn\" :background=\"true\" \u002F>\n  \u003C\u002FSuspense>\n\n  \u003C!-- Or declarative attach (also lands on the portal scene) -->\n  \u003CTresColor attach=\"background\" :args=\"[0.1, 0.1, 0.18]\" \u002F>\n\n  \u003C!-- ...portal scene contents... -->\n\u003C\u002FMeshPortalMaterial>\n",[514,1126,1127,1147,1152,1157,1162,1167,1171,1176,1181,1185,1190],{"__ignoreMap":567},[571,1128,1129,1131,1133,1135,1137,1139,1141,1143,1145],{"class":573,"line":574},[571,1130,578],{"class":577},[571,1132,803],{"class":581},[571,1134,710],{"class":577},[571,1136,532],{"class":585},[571,1138,592],{"class":577},[571,1140,595],{"class":577},[571,1142,532],{"class":617},[571,1144,595],{"class":577},[571,1146,604],{"class":577},[571,1148,1149],{"class":573,"line":607},[571,1150,1151],{"class":617},"  \u003C!-- Imperative helper — works because the injected scene is the portal scene -->\n",[571,1153,1154],{"class":573,"line":636},[571,1155,1156],{"class":617},"  \u003CSuspense>\n",[571,1158,1159],{"class":573,"line":663},[571,1160,1161],{"class":617},"    \u003CEnvironment preset=\"dawn\" :background=\"true\" \u002F>\n",[571,1163,1164],{"class":573,"line":673},[571,1165,1166],{"class":617},"  \u003C\u002FSuspense>\n",[571,1168,1169],{"class":573,"line":680},[571,1170,677],{"emptyLinePlaceholder":676},[571,1172,1173],{"class":573,"line":690},[571,1174,1175],{"class":617},"  \u003C!-- Or declarative attach (also lands on the portal scene) -->\n",[571,1177,1178],{"class":573,"line":701},[571,1179,1180],{"class":617},"  \u003CTresColor attach=\"background\" :args=\"[0.1, 0.1, 0.18]\" \u002F>\n",[571,1182,1183],{"class":573,"line":744},[571,1184,677],{"emptyLinePlaceholder":676},[571,1186,1187],{"class":573,"line":754},[571,1188,1189],{"class":617},"  \u003C!-- ...portal scene contents... -->\n",[571,1191,1192,1194,1196],{"class":573,"line":764},[571,1193,666],{"class":577},[571,1195,803],{"class":581},[571,1197,604],{"class":577},[543,1199,1200],{},[510,1201,1202,1205,1206,1209,1210,1213,1214,1217,1218,1221,1222,1217,1225,1228,1229,1232,1233,1236,1237,1240,1241,1243],{},[526,1203,1204],{},"How it works:"," the component ",[514,1207,1208],{},"provide()","s a context whose ",[514,1211,1212],{},"scene"," points at the\nprivate portal scene. Vue's ",[514,1215,1216],{},"provide","\u002F",[514,1219,1220],{},"inject"," follows the mounted tree (it reaches\nslot content through the internal ",[514,1223,1224],{},"\u003CTresPortal>",[514,1226,1227],{},"\u003CTeleport>","), so both imperative\nhelpers (",[514,1230,1231],{},"useTres().scene",", e.g. ",[514,1234,1235],{},"\u003CEnvironment>",") and declarative ",[514,1238,1239],{},"attach"," configure\nthe portal scene. Only the ",[514,1242,1212],{}," is swapped — renderer, camera and sizes are shared.",[1245,1246,1247],"prose-warning",{},[510,1248,1249,1252,1253,1255,1256,1259,1260,1262,1263,1268],{},[526,1250,1251],{},"On-demand rendering:"," the portal renders its scene to a frame buffer on every\nframe so the window keeps tracking animated contents and the ",[514,1254,532],{}," takeover stays\nin sync. To do this it calls ",[514,1257,1258],{},"invalidate()"," each frame, which keeps the render loop\nrunning continuously — a mesh using ",[514,1261,1116],{}," effectively opts out of\n",[549,1264,1267],{"href":1265,"rel":1266,"target":554},"https:\u002F\u002Fdocs.tresjs.org\u002Fapi\u002Fadvanced\u002Fperformance#mode-on-demand",[553],"on-demand rendering"," while mounted.",[543,1270,1271],{},[510,1272,1273,1276,1277,1280],{},[526,1274,1275],{},"Limitations (MVP):"," ",[514,1278,1279],{},"blur"," (edge fade) and pointer-event forwarding into the\nportal scene are not yet implemented. WebGPU is not yet supported.",[1282,1283,1284],"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 .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":567,"searchDepth":574,"depth":607,"links":1286},[1287,1288,1289],{"id":560,"depth":607,"text":15},{"id":1000,"depth":607,"text":1001},{"id":1110,"depth":607,"text":1111},"Render a separate child scene into a portal surface, perspective-correct and masked by the mesh. Ported from drei.","md",null,{},{"title":191,"description":1290},"7zD0xygyddUlqsFxPuRB8bQ94GVfdpStKa3D_zel7Fo",[1297,1299],{"title":187,"path":188,"stem":189,"description":1298,"children":-1},"Hides the object it's attached to while keeping shadows and children visible.",{"title":195,"path":196,"stem":197,"description":1300,"children":-1},"Makes floors or walls that reflect the objects in your Scene.",1791549573624]