[{"data":1,"prerenderedAt":1332},["ShallowReactive",2],{"navigation":3,"\u002Fapi\u002Fabstractions\u002Fmask":498,"\u002Fapi\u002Fabstractions\u002Fmask-surround":1327},[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":73,"body":500,"description":1321,"extension":1322,"links":1323,"meta":1324,"navigation":686,"path":74,"seo":1325,"stem":75,"__hash__":1326},"docs\u002F2.api\u002F1.abstractions\u002Fmask.md",{"type":501,"value":502,"toc":1316},"minimark",[503,509,517,555,559,1172,1176,1251,1254,1261,1266,1283,1312],[504,505,506],"scene-controls-wrapper",{},[507,508],"abstractions-mask",{},[510,511,512,516],"p",{},[513,514,515],"code",{},"\u003CMask\u002F>"," uses the stencil buffer to cut out areas of the screen.",[518,519,520,540],"prose-warning",{},[510,521,522,523,526,527,531,532,535,536,539],{},"To use ",[513,524,525],{},"\u003CMask \u002F>"," you ",[528,529,530],"em",{},"must"," add ",[513,533,534],{},":stencil=\"true\""," to your ",[513,537,538],{},"\u003CTresCanvas \u002F>",".",[510,541,542,544,545,554],{},[513,543,525],{}," relies on the ",[546,547,551],"a",{"href":548,"rel":549},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#api\u002Fen\u002Frenderers\u002FWebGLRenderer",[550],"nofollow",[513,552,553],{},"stencil buffer",". In recent versions of THREE.js, by default, the stencil buffer is not created.",[556,557,15],"h2",{"id":558},"usage",[560,561,572],"pre",{"className":562,"code":563,"highlights":564,"language":570,"meta":571,"style":571},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { Mask, OrbitControls, useMask } from '@tresjs\u002Fcientos'\nimport { TresCanvas } from '@tresjs\u002Fcore'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTresCanvas :stencil=\"true\" clear-color=\"#4f4f4f\">\n    \u003CTresPerspectiveCamera \u002F>\n    \u003COrbitControls \u002F>\n\n    \u003CTresGroup :scale=\"2\">\n      \u003CTresMesh>\n        \u003CTresRingGeometry :args=\"[0.95, 1, 64]\" \u002F>\n        \u003CTresMeshBasicMaterial color=\"white\" \u002F>\n      \u003C\u002FTresMesh>\n      \u003CMask :id=\"1\">\n        \u003CTresCircleGeometry \u002F>\n        \u003CTresMeshBasicMaterial color=\"#fbb03b\" \u002F>\n      \u003C\u002FMask>\n    \u003C\u002FTresGroup>\n\n    \u003CTresMesh :position-z=\"-1\">\n      \u003CTresBoxGeometry \u002F>\n      \u003CTresMeshNormalMaterial v-bind=\"useMask(1)\" \u002F>\n    \u003C\u002FTresMesh>\n\n    \u003CTresMesh :position-z=\"-3\">\n      \u003CTresBoxGeometry \u002F>\n      \u003CTresMeshNormalMaterial v-bind=\"useMask(1)\" \u002F>\n    \u003C\u002FTresMesh>\n\n    \u003CTresMesh :position-z=\"-5\">\n      \u003CTresBoxGeometry \u002F>\n      \u003CTresMeshNormalMaterial \u002F>\n    \u003C\u002FTresMesh>\n  \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n\n",[565,566,567,568,569],2,16,17,18,19,"vue","",[513,573,574,609,650,671,681,688,698,737,749,759,764,789,800,842,864,874,896,906,926,935,945,950,975,985,1016,1025,1030,1054,1063,1088,1097,1102,1126,1135,1144,1153,1163],{"__ignoreMap":571},[575,576,579,583,587,591,594,597,600,604,606],"span",{"class":577,"line":578},"line",1,[575,580,582],{"class":581},"sMK4o","\u003C",[575,584,586],{"class":585},"swJcz","script",[575,588,590],{"class":589},"spNyl"," setup",[575,592,593],{"class":589}," lang",[575,595,596],{"class":581},"=",[575,598,599],{"class":581},"\"",[575,601,603],{"class":602},"sfazB","ts",[575,605,599],{"class":581},[575,607,608],{"class":581},">\n",[575,610,613,617,620,624,627,630,632,635,638,641,644,647],{"class":611,"line":565},[577,612],"highlight",[575,614,616],{"class":615},"s7zQu","import",[575,618,619],{"class":581}," {",[575,621,623],{"class":622},"sTEyZ"," Mask",[575,625,626],{"class":581},",",[575,628,629],{"class":622}," OrbitControls",[575,631,626],{"class":581},[575,633,634],{"class":622}," useMask",[575,636,637],{"class":581}," }",[575,639,640],{"class":615}," from",[575,642,643],{"class":581}," '",[575,645,646],{"class":602},"@tresjs\u002Fcientos",[575,648,649],{"class":581},"'\n",[575,651,653,655,657,660,662,664,666,669],{"class":577,"line":652},3,[575,654,616],{"class":615},[575,656,619],{"class":581},[575,658,659],{"class":622}," TresCanvas",[575,661,637],{"class":581},[575,663,640],{"class":615},[575,665,643],{"class":581},[575,667,668],{"class":602},"@tresjs\u002Fcore",[575,670,649],{"class":581},[575,672,674,677,679],{"class":577,"line":673},4,[575,675,676],{"class":581},"\u003C\u002F",[575,678,586],{"class":585},[575,680,608],{"class":581},[575,682,684],{"class":577,"line":683},5,[575,685,687],{"emptyLinePlaceholder":686},true,"\n",[575,689,691,693,696],{"class":577,"line":690},6,[575,692,582],{"class":581},[575,694,695],{"class":585},"template",[575,697,608],{"class":581},[575,699,701,704,707,710,713,715,717,721,723,726,728,730,733,735],{"class":577,"line":700},7,[575,702,703],{"class":581},"  \u003C",[575,705,706],{"class":585},"TresCanvas",[575,708,709],{"class":581}," :",[575,711,712],{"class":589},"stencil",[575,714,596],{"class":581},[575,716,599],{"class":581},[575,718,720],{"class":719},"sfNiH","true",[575,722,599],{"class":581},[575,724,725],{"class":589}," clear-color",[575,727,596],{"class":581},[575,729,599],{"class":581},[575,731,732],{"class":602},"#4f4f4f",[575,734,599],{"class":581},[575,736,608],{"class":581},[575,738,740,743,746],{"class":577,"line":739},8,[575,741,742],{"class":581},"    \u003C",[575,744,745],{"class":585},"TresPerspectiveCamera",[575,747,748],{"class":581}," \u002F>\n",[575,750,752,754,757],{"class":577,"line":751},9,[575,753,742],{"class":581},[575,755,756],{"class":585},"OrbitControls",[575,758,748],{"class":581},[575,760,762],{"class":577,"line":761},10,[575,763,687],{"emptyLinePlaceholder":686},[575,765,767,769,772,774,777,779,781,785,787],{"class":577,"line":766},11,[575,768,742],{"class":581},[575,770,771],{"class":585},"TresGroup",[575,773,709],{"class":581},[575,775,776],{"class":589},"scale",[575,778,596],{"class":581},[575,780,599],{"class":581},[575,782,784],{"class":783},"sbssI","2",[575,786,599],{"class":581},[575,788,608],{"class":581},[575,790,792,795,798],{"class":577,"line":791},12,[575,793,794],{"class":581},"      \u003C",[575,796,797],{"class":585},"TresMesh",[575,799,608],{"class":581},[575,801,803,806,809,811,814,816,818,821,824,827,830,832,835,838,840],{"class":577,"line":802},13,[575,804,805],{"class":581},"        \u003C",[575,807,808],{"class":585},"TresRingGeometry",[575,810,709],{"class":581},[575,812,813],{"class":589},"args",[575,815,596],{"class":581},[575,817,599],{"class":581},[575,819,820],{"class":581},"[",[575,822,823],{"class":783},"0.95",[575,825,826],{"class":581},", ",[575,828,829],{"class":783},"1",[575,831,826],{"class":581},[575,833,834],{"class":783},"64",[575,836,837],{"class":581},"]",[575,839,599],{"class":581},[575,841,748],{"class":581},[575,843,845,847,850,853,855,857,860,862],{"class":577,"line":844},14,[575,846,805],{"class":581},[575,848,849],{"class":585},"TresMeshBasicMaterial",[575,851,852],{"class":589}," color",[575,854,596],{"class":581},[575,856,599],{"class":581},[575,858,859],{"class":602},"white",[575,861,599],{"class":581},[575,863,748],{"class":581},[575,865,867,870,872],{"class":577,"line":866},15,[575,868,869],{"class":581},"      \u003C\u002F",[575,871,797],{"class":585},[575,873,608],{"class":581},[575,875,877,879,881,883,886,888,890,892,894],{"class":876,"line":566},[577,612],[575,878,794],{"class":581},[575,880,73],{"class":585},[575,882,709],{"class":581},[575,884,885],{"class":589},"id",[575,887,596],{"class":581},[575,889,599],{"class":581},[575,891,829],{"class":783},[575,893,599],{"class":581},[575,895,608],{"class":581},[575,897,899,901,904],{"class":898,"line":567},[577,612],[575,900,805],{"class":581},[575,902,903],{"class":585},"TresCircleGeometry",[575,905,748],{"class":581},[575,907,909,911,913,915,917,919,922,924],{"class":908,"line":568},[577,612],[575,910,805],{"class":581},[575,912,849],{"class":585},[575,914,852],{"class":589},[575,916,596],{"class":581},[575,918,599],{"class":581},[575,920,921],{"class":602},"#fbb03b",[575,923,599],{"class":581},[575,925,748],{"class":581},[575,927,929,931,933],{"class":928,"line":569},[577,612],[575,930,869],{"class":581},[575,932,73],{"class":585},[575,934,608],{"class":581},[575,936,938,941,943],{"class":577,"line":937},20,[575,939,940],{"class":581},"    \u003C\u002F",[575,942,771],{"class":585},[575,944,608],{"class":581},[575,946,948],{"class":577,"line":947},21,[575,949,687],{"emptyLinePlaceholder":686},[575,951,953,955,957,959,962,964,966,969,971,973],{"class":577,"line":952},22,[575,954,742],{"class":581},[575,956,797],{"class":585},[575,958,709],{"class":581},[575,960,961],{"class":589},"position-z",[575,963,596],{"class":581},[575,965,599],{"class":581},[575,967,968],{"class":581},"-",[575,970,829],{"class":783},[575,972,599],{"class":581},[575,974,608],{"class":581},[575,976,978,980,983],{"class":577,"line":977},23,[575,979,794],{"class":581},[575,981,982],{"class":585},"TresBoxGeometry",[575,984,748],{"class":581},[575,986,988,990,993,996,998,1000,1004,1007,1009,1012,1014],{"class":577,"line":987},24,[575,989,794],{"class":581},[575,991,992],{"class":585},"TresMeshNormalMaterial",[575,994,995],{"class":589}," v-bind",[575,997,596],{"class":581},[575,999,599],{"class":581},[575,1001,1003],{"class":1002},"s2Zo4","useMask",[575,1005,1006],{"class":581},"(",[575,1008,829],{"class":783},[575,1010,1011],{"class":581},")",[575,1013,599],{"class":581},[575,1015,748],{"class":581},[575,1017,1019,1021,1023],{"class":577,"line":1018},25,[575,1020,940],{"class":581},[575,1022,797],{"class":585},[575,1024,608],{"class":581},[575,1026,1028],{"class":577,"line":1027},26,[575,1029,687],{"emptyLinePlaceholder":686},[575,1031,1033,1035,1037,1039,1041,1043,1045,1047,1050,1052],{"class":577,"line":1032},27,[575,1034,742],{"class":581},[575,1036,797],{"class":585},[575,1038,709],{"class":581},[575,1040,961],{"class":589},[575,1042,596],{"class":581},[575,1044,599],{"class":581},[575,1046,968],{"class":581},[575,1048,1049],{"class":783},"3",[575,1051,599],{"class":581},[575,1053,608],{"class":581},[575,1055,1057,1059,1061],{"class":577,"line":1056},28,[575,1058,794],{"class":581},[575,1060,982],{"class":585},[575,1062,748],{"class":581},[575,1064,1066,1068,1070,1072,1074,1076,1078,1080,1082,1084,1086],{"class":577,"line":1065},29,[575,1067,794],{"class":581},[575,1069,992],{"class":585},[575,1071,995],{"class":589},[575,1073,596],{"class":581},[575,1075,599],{"class":581},[575,1077,1003],{"class":1002},[575,1079,1006],{"class":581},[575,1081,829],{"class":783},[575,1083,1011],{"class":581},[575,1085,599],{"class":581},[575,1087,748],{"class":581},[575,1089,1091,1093,1095],{"class":577,"line":1090},30,[575,1092,940],{"class":581},[575,1094,797],{"class":585},[575,1096,608],{"class":581},[575,1098,1100],{"class":577,"line":1099},31,[575,1101,687],{"emptyLinePlaceholder":686},[575,1103,1105,1107,1109,1111,1113,1115,1117,1119,1122,1124],{"class":577,"line":1104},32,[575,1106,742],{"class":581},[575,1108,797],{"class":585},[575,1110,709],{"class":581},[575,1112,961],{"class":589},[575,1114,596],{"class":581},[575,1116,599],{"class":581},[575,1118,968],{"class":581},[575,1120,1121],{"class":783},"5",[575,1123,599],{"class":581},[575,1125,608],{"class":581},[575,1127,1129,1131,1133],{"class":577,"line":1128},33,[575,1130,794],{"class":581},[575,1132,982],{"class":585},[575,1134,748],{"class":581},[575,1136,1138,1140,1142],{"class":577,"line":1137},34,[575,1139,794],{"class":581},[575,1141,992],{"class":585},[575,1143,748],{"class":581},[575,1145,1147,1149,1151],{"class":577,"line":1146},35,[575,1148,940],{"class":581},[575,1150,797],{"class":585},[575,1152,608],{"class":581},[575,1154,1156,1159,1161],{"class":577,"line":1155},36,[575,1157,1158],{"class":581},"  \u003C\u002F",[575,1160,706],{"class":585},[575,1162,608],{"class":581},[575,1164,1166,1168,1170],{"class":577,"line":1165},37,[575,1167,676],{"class":581},[575,1169,695],{"class":585},[575,1171,608],{"class":581},[556,1173,1175],{"id":1174},"props","Props",[1177,1178,1179,1196],"table",{},[1180,1181,1182],"thead",{},[1183,1184,1185,1190,1193],"tr",{},[1186,1187,1189],"th",{"align":1188},"left","Prop",[1186,1191,1192],{"align":1188},"Description",[1186,1194,1195],{},"Default",[1197,1198,1199,1218,1235],"tbody",{},[1183,1200,1201,1209,1216],{},[1202,1203,1204],"td",{"align":1188},[1205,1206,1207],"strong",{},[513,1208,885],{},[1202,1210,1211,1212,1215],{"align":1188},"Id of the stencil buffer to use. Each mask must have a ",[513,1213,1214],{},"number"," id. Multiple masks can refer to the same id.",[1202,1217],{},[1183,1219,1220,1227,1230],{},[1202,1221,1222],{"align":1188},[1205,1223,1224],{},[513,1225,1226],{},"colorWrite",[1202,1228,1229],{"align":1188},"Whether the colors of the mask's own material will leak through.",[1202,1231,1232],{},[513,1233,1234],{},"false",[1183,1236,1237,1244,1247],{},[1202,1238,1239],{"align":1188},[1205,1240,1241],{},[513,1242,1243],{},"depthWrite",[1202,1245,1246],{"align":1188},"Whether the depth of the mask's own material will leak through.",[1202,1248,1249],{},[513,1250,1234],{},[556,1252,1003],{"id":1253},"usemask",[510,1255,1256,1257,1260],{},"Composable that returns the stencil configuration to apply a mask to a material. Use it with ",[513,1258,1259],{},"v-bind"," on materials that should be affected by the mask.",[510,1262,1263],{},[1205,1264,1265],{},"Parameters:",[1267,1268,1269,1275],"ul",{},[1270,1271,1272,1274],"li",{},[513,1273,885],{}," - The mask id to use (number or Ref)",[1270,1276,1277,1280,1281],{},[513,1278,1279],{},"inverse"," - Whether to invert the mask (boolean or Ref), defaults to ",[513,1282,1234],{},[560,1284,1286],{"className":562,"code":1285,"language":570,"meta":571,"style":571},"\u003CTresMeshNormalMaterial v-bind=\"useMask(1)\" \u002F>\n",[513,1287,1288],{"__ignoreMap":571},[575,1289,1290,1292,1294,1296,1298,1300,1302,1304,1306,1308,1310],{"class":577,"line":578},[575,1291,582],{"class":581},[575,1293,992],{"class":585},[575,1295,995],{"class":589},[575,1297,596],{"class":581},[575,1299,599],{"class":581},[575,1301,1003],{"class":1002},[575,1303,1006],{"class":622},[575,1305,829],{"class":783},[575,1307,1011],{"class":622},[575,1309,599],{"class":581},[575,1311,748],{"class":581},[1313,1314,1315],"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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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":571,"searchDepth":578,"depth":565,"links":1317},[1318,1319,1320],{"id":558,"depth":565,"text":15},{"id":1174,"depth":565,"text":1175},{"id":1253,"depth":565,"text":1003},"Cut out areas of the screen using the stencil buffer.","md",null,{},{"title":73,"description":1321},"G7X7KSfvm9ZBJpENVvMjF0UaBORYjhBMGhf9hH7E7tw",[1328,1330],{"title":69,"path":70,"stem":71,"description":1329,"children":-1},"Make content float like magic with smooth animations.",{"title":77,"path":78,"stem":79,"description":1331,"children":-1},"One instanced batch per mesh, shared across your whole component tree.",1791549572227]