[{"data":1,"prerenderedAt":6739},["ShallowReactive",2],{"navigation":3,"\u002Fapi\u002Fobjects\u002Fhtml":498,"\u002Fapi\u002Fobjects\u002Fhtml-surround":6734},[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":441,"body":500,"description":6728,"extension":6729,"links":6730,"meta":6731,"navigation":658,"path":442,"seo":6732,"stem":443,"__hash__":6733},"docs\u002F2.api\u002F9.objects\u002Fhtml.md",{"type":501,"value":502,"toc":6707},"minimark",[503,507,524,530,534,1112,1116,1123,1129,1145,1154,1159,1304,1310,1315,1339,1344,1474,1478,1502,1505,1529,1547,1568,1573,1738,1742,1747,1771,1785,1790,3747,3751,3775,3798,3841,3845,3860,3874,3915,3922,3946,3966,3972,5571,5577,5583,5588,5790,5807,5811,6185,6188,6209,6213,6295,6299,6478,6683,6686,6704],[504,505,506],"p",{},"This component allows you to project HTML content to any object in your scene. TresJS will automatically update the position of the HTML content to match the position of the object in the scene.",[504,508,509,510,514,515,518,519,523],{},"🚀 Works seamlessly with both ",[511,512,513],"strong",{},"PerspectiveCamera"," and ",[511,516,517],{},"OrthographicCamera"," — the active camera is automatically detected by the ",[520,521,522],"code",{},"\u003CHtml>"," component.",[525,526,527],"scene-wrapper",{},[528,529],"objects-html",{},[531,532,15],"h2",{"id":533},"usage",[535,536,549],"pre",{"className":537,"code":538,"highlights":539,"language":547,"meta":548,"style":548},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { Html, OrbitControls } from '@tresjs\u002Fcientos'\nimport { TresCanvas } from '@tresjs\u002Fcore'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#82DBC5\">\n    \u003CTresPerspectiveCamera :position=\"[2, 2, 5]\" \u002F>\n    \u003COrbitControls \u002F>\n    \u003CTresMesh :position=\"[1, 1, 1]\">\n      \u003CTresBoxGeometry \u002F>\n      \u003CTresMeshNormalMaterial \u002F>\n      \u003CHtml\n        center\n        transform\n        :distance-factor=\"4\"\n        :position=\"[0, 0, 0.65]\"\n        :scale=\"[0.75, 0.75, 0.75]\"\n      >\n        \u003Ch1 class=\"title\">I'm a Box 📦\u003C\u002Fh1>\n      \u003C\u002FHtml>\n    \u003C\u002FTresMesh>\n    \u003CTresGridHelper \u002F>\n    \u003CTresAmbientLight \u002F>\n  \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n\u003Cstyle scoped>\n.title {\n  background-color: #1e1e1e;\n  color: #ffffff;\n  font-size: 0.75rem;\n  padding: 0.25rem;\n  border-radius: 0.375rem;\n}\n\u003C\u002Fstyle>\n",[540,541,542,543,544,545,546],2,13,14,15,16,17,18,"vue","",[520,550,551,586,622,643,653,660,670,693,737,747,782,793,803,811,817,823,842,871,900,906,939,950,960,970,980,990,999,1012,1024,1043,1058,1071,1084,1097,1103],{"__ignoreMap":548},[552,553,556,560,564,568,571,574,577,581,583],"span",{"class":554,"line":555},"line",1,[552,557,559],{"class":558},"sMK4o","\u003C",[552,561,563],{"class":562},"swJcz","script",[552,565,567],{"class":566},"spNyl"," setup",[552,569,570],{"class":566}," lang",[552,572,573],{"class":558},"=",[552,575,576],{"class":558},"\"",[552,578,580],{"class":579},"sfazB","ts",[552,582,576],{"class":558},[552,584,585],{"class":558},">\n",[552,587,590,594,597,601,604,607,610,613,616,619],{"class":588,"line":540},[554,589],"highlight",[552,591,593],{"class":592},"s7zQu","import",[552,595,596],{"class":558}," {",[552,598,600],{"class":599},"sTEyZ"," Html",[552,602,603],{"class":558},",",[552,605,606],{"class":599}," OrbitControls",[552,608,609],{"class":558}," }",[552,611,612],{"class":592}," from",[552,614,615],{"class":558}," '",[552,617,618],{"class":579},"@tresjs\u002Fcientos",[552,620,621],{"class":558},"'\n",[552,623,625,627,629,632,634,636,638,641],{"class":554,"line":624},3,[552,626,593],{"class":592},[552,628,596],{"class":558},[552,630,631],{"class":599}," TresCanvas",[552,633,609],{"class":558},[552,635,612],{"class":592},[552,637,615],{"class":558},[552,639,640],{"class":579},"@tresjs\u002Fcore",[552,642,621],{"class":558},[552,644,646,649,651],{"class":554,"line":645},4,[552,647,648],{"class":558},"\u003C\u002F",[552,650,563],{"class":562},[552,652,585],{"class":558},[552,654,656],{"class":554,"line":655},5,[552,657,659],{"emptyLinePlaceholder":658},true,"\n",[552,661,663,665,668],{"class":554,"line":662},6,[552,664,559],{"class":558},[552,666,667],{"class":562},"template",[552,669,585],{"class":558},[552,671,673,676,679,682,684,686,689,691],{"class":554,"line":672},7,[552,674,675],{"class":558},"  \u003C",[552,677,678],{"class":562},"TresCanvas",[552,680,681],{"class":566}," clear-color",[552,683,573],{"class":558},[552,685,576],{"class":558},[552,687,688],{"class":579},"#82DBC5",[552,690,576],{"class":558},[552,692,585],{"class":558},[552,694,696,699,702,705,708,710,712,715,719,722,724,726,729,732,734],{"class":554,"line":695},8,[552,697,698],{"class":558},"    \u003C",[552,700,701],{"class":562},"TresPerspectiveCamera",[552,703,704],{"class":558}," :",[552,706,707],{"class":566},"position",[552,709,573],{"class":558},[552,711,576],{"class":558},[552,713,714],{"class":558},"[",[552,716,718],{"class":717},"sbssI","2",[552,720,721],{"class":558},", ",[552,723,718],{"class":717},[552,725,721],{"class":558},[552,727,728],{"class":717},"5",[552,730,731],{"class":558},"]",[552,733,576],{"class":558},[552,735,736],{"class":558}," \u002F>\n",[552,738,740,742,745],{"class":554,"line":739},9,[552,741,698],{"class":558},[552,743,744],{"class":562},"OrbitControls",[552,746,736],{"class":558},[552,748,750,752,755,757,759,761,763,765,768,770,772,774,776,778,780],{"class":554,"line":749},10,[552,751,698],{"class":558},[552,753,754],{"class":562},"TresMesh",[552,756,704],{"class":558},[552,758,707],{"class":566},[552,760,573],{"class":558},[552,762,576],{"class":558},[552,764,714],{"class":558},[552,766,767],{"class":717},"1",[552,769,721],{"class":558},[552,771,767],{"class":717},[552,773,721],{"class":558},[552,775,767],{"class":717},[552,777,731],{"class":558},[552,779,576],{"class":558},[552,781,585],{"class":558},[552,783,785,788,791],{"class":554,"line":784},11,[552,786,787],{"class":558},"      \u003C",[552,789,790],{"class":562},"TresBoxGeometry",[552,792,736],{"class":558},[552,794,796,798,801],{"class":554,"line":795},12,[552,797,787],{"class":558},[552,799,800],{"class":562},"TresMeshNormalMaterial",[552,802,736],{"class":558},[552,804,806,808],{"class":805,"line":541},[554,589],[552,807,787],{"class":558},[552,809,810],{"class":562},"Html\n",[552,812,814],{"class":813,"line":542},[554,589],[552,815,816],{"class":566},"        center\n",[552,818,820],{"class":819,"line":543},[554,589],[552,821,822],{"class":566},"        transform\n",[552,824,826,829,832,834,836,839],{"class":825,"line":544},[554,589],[552,827,828],{"class":558},"        :",[552,830,831],{"class":566},"distance-factor",[552,833,573],{"class":558},[552,835,576],{"class":558},[552,837,838],{"class":717},"4",[552,840,841],{"class":558},"\"\n",[552,843,845,847,849,851,853,855,858,860,862,864,867,869],{"class":844,"line":545},[554,589],[552,846,828],{"class":558},[552,848,707],{"class":566},[552,850,573],{"class":558},[552,852,576],{"class":558},[552,854,714],{"class":558},[552,856,857],{"class":717},"0",[552,859,721],{"class":558},[552,861,857],{"class":717},[552,863,721],{"class":558},[552,865,866],{"class":717},"0.65",[552,868,731],{"class":558},[552,870,841],{"class":558},[552,872,874,876,879,881,883,885,888,890,892,894,896,898],{"class":873,"line":546},[554,589],[552,875,828],{"class":558},[552,877,878],{"class":566},"scale",[552,880,573],{"class":558},[552,882,576],{"class":558},[552,884,714],{"class":558},[552,886,887],{"class":717},"0.75",[552,889,721],{"class":558},[552,891,887],{"class":717},[552,893,721],{"class":558},[552,895,887],{"class":717},[552,897,731],{"class":558},[552,899,841],{"class":558},[552,901,903],{"class":554,"line":902},19,[552,904,905],{"class":558},"      >\n",[552,907,909,912,915,918,920,922,925,927,930,933,935,937],{"class":554,"line":908},20,[552,910,911],{"class":558},"        \u003C",[552,913,914],{"class":562},"h1",[552,916,917],{"class":566}," class",[552,919,573],{"class":558},[552,921,576],{"class":558},[552,923,924],{"class":579},"title",[552,926,576],{"class":558},[552,928,929],{"class":558},">",[552,931,932],{"class":599},"I'm a Box 📦",[552,934,648],{"class":558},[552,936,914],{"class":562},[552,938,585],{"class":558},[552,940,942,945,948],{"class":554,"line":941},21,[552,943,944],{"class":558},"      \u003C\u002F",[552,946,947],{"class":562},"Html",[552,949,585],{"class":558},[552,951,953,956,958],{"class":554,"line":952},22,[552,954,955],{"class":558},"    \u003C\u002F",[552,957,754],{"class":562},[552,959,585],{"class":558},[552,961,963,965,968],{"class":554,"line":962},23,[552,964,698],{"class":558},[552,966,967],{"class":562},"TresGridHelper",[552,969,736],{"class":558},[552,971,973,975,978],{"class":554,"line":972},24,[552,974,698],{"class":558},[552,976,977],{"class":562},"TresAmbientLight",[552,979,736],{"class":558},[552,981,983,986,988],{"class":554,"line":982},25,[552,984,985],{"class":558},"  \u003C\u002F",[552,987,678],{"class":562},[552,989,585],{"class":558},[552,991,993,995,997],{"class":554,"line":992},26,[552,994,648],{"class":558},[552,996,667],{"class":562},[552,998,585],{"class":558},[552,1000,1002,1004,1007,1010],{"class":554,"line":1001},27,[552,1003,559],{"class":558},[552,1005,1006],{"class":562},"style",[552,1008,1009],{"class":566}," scoped",[552,1011,585],{"class":558},[552,1013,1015,1018,1021],{"class":554,"line":1014},28,[552,1016,1017],{"class":558},".",[552,1019,924],{"class":1020},"sBMFI",[552,1022,1023],{"class":558}," {\n",[552,1025,1027,1031,1034,1037,1040],{"class":554,"line":1026},29,[552,1028,1030],{"class":1029},"sqsOY","  background-color",[552,1032,1033],{"class":558},":",[552,1035,1036],{"class":558}," #",[552,1038,1039],{"class":599},"1e1e1e",[552,1041,1042],{"class":558},";\n",[552,1044,1046,1049,1051,1053,1056],{"class":554,"line":1045},30,[552,1047,1048],{"class":1029},"  color",[552,1050,1033],{"class":558},[552,1052,1036],{"class":558},[552,1054,1055],{"class":599},"ffffff",[552,1057,1042],{"class":558},[552,1059,1061,1064,1066,1069],{"class":554,"line":1060},31,[552,1062,1063],{"class":1029},"  font-size",[552,1065,1033],{"class":558},[552,1067,1068],{"class":717}," 0.75rem",[552,1070,1042],{"class":558},[552,1072,1074,1077,1079,1082],{"class":554,"line":1073},32,[552,1075,1076],{"class":1029},"  padding",[552,1078,1033],{"class":558},[552,1080,1081],{"class":717}," 0.25rem",[552,1083,1042],{"class":558},[552,1085,1087,1090,1092,1095],{"class":554,"line":1086},33,[552,1088,1089],{"class":1029},"  border-radius",[552,1091,1033],{"class":558},[552,1093,1094],{"class":717}," 0.375rem",[552,1096,1042],{"class":558},[552,1098,1100],{"class":554,"line":1099},34,[552,1101,1102],{"class":558},"}\n",[552,1104,1106,1108,1110],{"class":554,"line":1105},35,[552,1107,648],{"class":558},[552,1109,1006],{"class":562},[552,1111,585],{"class":558},[531,1113,1115],{"id":1114},"occlusion","Occlusion",[504,1117,1118,1119,1122],{},"By default, the HTML content will be visible through other objects in the scene. You can use the ",[520,1120,1121],{},"occlude"," prop to make the HTML content occlude other objects in the scene.",[504,1124,1125,1126,1128],{},"Html can be hidden behind one or more objects in your scene using the ",[520,1127,1121],{}," prop.",[535,1130,1132],{"className":537,"code":1131,"language":547,"meta":548,"style":548},"\u003CHtml occlude>\n",[520,1133,1134],{"__ignoreMap":548},[552,1135,1136,1138,1140,1143],{"class":554,"line":555},[552,1137,559],{"class":558},[552,1139,947],{"class":562},[552,1141,1142],{"class":566}," occlude",[552,1144,585],{"class":558},[504,1146,1147,1148,1150,1151,1153],{},"If ",[520,1149,1121],{},", then ",[520,1152,522],{}," will be hidden by any objects that pass in front of its position.",[525,1155,1156],{},[1157,1158],"objects-html-occlusion",{},[1160,1161,1162,1163,1167],"details",{},"\n  ",[1164,1165,1166],"summary",{},"Demo code",[535,1168,1172],{"className":1169,"code":1170,"language":1171,"meta":548,"style":548},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CTresMesh :position=\"[0, 1, -2]\">\n  \u003CTresBoxGeometry \u002F>\n  \u003CTresMeshNormalMaterial \u002F>\n  \u003Chtml center transform occlude :distance-factor=\"4\" :position=\"[0, 0, 2]\" :z-index-range=\"[28, 0]\">\n    \u003Ch1 class=\"bg-white dark:bg-dark text-xs p-1 rounded\">Move camera\u003C\u002Fh1>\n  \u003C\u002Fhtml>\n\u003C\u002FTresMesh>\n","html",[520,1173,1174,1194,1202,1210,1260,1288,1296],{"__ignoreMap":548},[552,1175,1176,1178,1180,1183,1185,1187,1190,1192],{"class":554,"line":555},[552,1177,559],{"class":558},[552,1179,754],{"class":562},[552,1181,1182],{"class":566}," :position",[552,1184,573],{"class":558},[552,1186,576],{"class":558},[552,1188,1189],{"class":579},"[0, 1, -2]",[552,1191,576],{"class":558},[552,1193,585],{"class":558},[552,1195,1196,1198,1200],{"class":554,"line":540},[552,1197,675],{"class":558},[552,1199,790],{"class":562},[552,1201,736],{"class":558},[552,1203,1204,1206,1208],{"class":554,"line":624},[552,1205,675],{"class":558},[552,1207,800],{"class":562},[552,1209,736],{"class":558},[552,1211,1212,1214,1216,1219,1222,1224,1227,1229,1231,1233,1235,1237,1239,1241,1244,1246,1249,1251,1253,1256,1258],{"class":554,"line":645},[552,1213,675],{"class":558},[552,1215,1171],{"class":562},[552,1217,1218],{"class":566}," center",[552,1220,1221],{"class":566}," transform",[552,1223,1142],{"class":566},[552,1225,1226],{"class":566}," :distance-factor",[552,1228,573],{"class":558},[552,1230,576],{"class":558},[552,1232,838],{"class":579},[552,1234,576],{"class":558},[552,1236,1182],{"class":566},[552,1238,573],{"class":558},[552,1240,576],{"class":558},[552,1242,1243],{"class":579},"[0, 0, 2]",[552,1245,576],{"class":558},[552,1247,1248],{"class":566}," :z-index-range",[552,1250,573],{"class":558},[552,1252,576],{"class":558},[552,1254,1255],{"class":579},"[28, 0]",[552,1257,576],{"class":558},[552,1259,585],{"class":558},[552,1261,1262,1264,1266,1268,1270,1272,1275,1277,1279,1282,1284,1286],{"class":554,"line":655},[552,1263,698],{"class":558},[552,1265,914],{"class":562},[552,1267,917],{"class":566},[552,1269,573],{"class":558},[552,1271,576],{"class":558},[552,1273,1274],{"class":579},"bg-white dark:bg-dark text-xs p-1 rounded",[552,1276,576],{"class":558},[552,1278,929],{"class":558},[552,1280,1281],{"class":599},"Move camera",[552,1283,648],{"class":558},[552,1285,914],{"class":562},[552,1287,585],{"class":558},[552,1289,1290,1292,1294],{"class":554,"line":662},[552,1291,985],{"class":558},[552,1293,1171],{"class":562},[552,1295,585],{"class":558},[552,1297,1298,1300,1302],{"class":554,"line":672},[552,1299,648],{"class":558},[552,1301,754],{"class":562},[552,1303,585],{"class":558},[504,1305,1306,1307,1309],{},"You can also choose which object or objects should occlude the HTML content by passing either a single object ref or an array of object refs to the ",[520,1308,1121],{}," prop:",[1311,1312,1314],"h3",{"id":1313},"single-occluder","Single occluder",[535,1316,1318],{"className":537,"code":1317,"language":547,"meta":548,"style":548},"\u003CHtml occlude=\"[mesh]\">\n",[520,1319,1320],{"__ignoreMap":548},[552,1321,1322,1324,1326,1328,1330,1332,1335,1337],{"class":554,"line":555},[552,1323,559],{"class":558},[552,1325,947],{"class":562},[552,1327,1142],{"class":566},[552,1329,573],{"class":558},[552,1331,576],{"class":558},[552,1333,1334],{"class":579},"[mesh]",[552,1336,576],{"class":558},[552,1338,585],{"class":558},[525,1340,1341],{},[1342,1343],"objects-html-single-occluder",{},[1160,1345,1162,1346,1348],{},[1164,1347,1166],{},[535,1349,1351],{"className":1169,"code":1350,"language":1171,"meta":548,"style":548},"\u003CTresMesh :position=\"[0, 1, 0]\">\n  \u003CTresBoxGeometry \u002F>\n  \u003CTresMeshNormalMaterial \u002F>\n  \u003Chtml center transform :occlude=\"[sphereRef]\" :distance-factor=\"4\" :z-index-range=\"[28, 0]\">\n    \u003Ch1 class=\"bg-white dark:bg-dark text-xs p-1 rounded\">Move camera\u003C\u002Fh1>\n  \u003C\u002Fhtml>\n\u003C\u002FTresMesh>\n",[520,1352,1353,1372,1380,1388,1432,1458,1466],{"__ignoreMap":548},[552,1354,1355,1357,1359,1361,1363,1365,1368,1370],{"class":554,"line":555},[552,1356,559],{"class":558},[552,1358,754],{"class":562},[552,1360,1182],{"class":566},[552,1362,573],{"class":558},[552,1364,576],{"class":558},[552,1366,1367],{"class":579},"[0, 1, 0]",[552,1369,576],{"class":558},[552,1371,585],{"class":558},[552,1373,1374,1376,1378],{"class":554,"line":540},[552,1375,675],{"class":558},[552,1377,790],{"class":562},[552,1379,736],{"class":558},[552,1381,1382,1384,1386],{"class":554,"line":624},[552,1383,675],{"class":558},[552,1385,800],{"class":562},[552,1387,736],{"class":558},[552,1389,1390,1392,1394,1396,1398,1401,1403,1405,1408,1410,1412,1414,1416,1418,1420,1422,1424,1426,1428,1430],{"class":554,"line":645},[552,1391,675],{"class":558},[552,1393,1171],{"class":562},[552,1395,1218],{"class":566},[552,1397,1221],{"class":566},[552,1399,1400],{"class":566}," :occlude",[552,1402,573],{"class":558},[552,1404,576],{"class":558},[552,1406,1407],{"class":579},"[sphereRef]",[552,1409,576],{"class":558},[552,1411,1226],{"class":566},[552,1413,573],{"class":558},[552,1415,576],{"class":558},[552,1417,838],{"class":579},[552,1419,576],{"class":558},[552,1421,1248],{"class":566},[552,1423,573],{"class":558},[552,1425,576],{"class":558},[552,1427,1255],{"class":579},[552,1429,576],{"class":558},[552,1431,585],{"class":558},[552,1433,1434,1436,1438,1440,1442,1444,1446,1448,1450,1452,1454,1456],{"class":554,"line":655},[552,1435,698],{"class":558},[552,1437,914],{"class":562},[552,1439,917],{"class":566},[552,1441,573],{"class":558},[552,1443,576],{"class":558},[552,1445,1274],{"class":579},[552,1447,576],{"class":558},[552,1449,929],{"class":558},[552,1451,1281],{"class":599},[552,1453,648],{"class":558},[552,1455,914],{"class":562},[552,1457,585],{"class":558},[552,1459,1460,1462,1464],{"class":554,"line":662},[552,1461,985],{"class":558},[552,1463,1171],{"class":562},[552,1465,585],{"class":558},[552,1467,1468,1470,1472],{"class":554,"line":672},[552,1469,648],{"class":558},[552,1471,754],{"class":562},[552,1473,585],{"class":558},[1311,1475,1477],{"id":1476},"multiple-occluders","Multiple occluders",[535,1479,1481],{"className":537,"code":1480,"language":547,"meta":548,"style":548},"\u003CHtml occlude=\"[mesh1, mesh2, mesh3, ...]\" \u002F>\n",[520,1482,1483],{"__ignoreMap":548},[552,1484,1485,1487,1489,1491,1493,1495,1498,1500],{"class":554,"line":555},[552,1486,559],{"class":558},[552,1488,947],{"class":562},[552,1490,1142],{"class":566},[552,1492,573],{"class":558},[552,1494,576],{"class":558},[552,1496,1497],{"class":579},"[mesh1, mesh2, mesh3, ...]",[552,1499,576],{"class":558},[552,1501,736],{"class":558},[504,1503,1504],{},"OR",[535,1506,1508],{"className":537,"code":1507,"language":547,"meta":548,"style":548},"\u003CHtml occlude=\"meshesArray\" \u002F>\n",[520,1509,1510],{"__ignoreMap":548},[552,1511,1512,1514,1516,1518,1520,1522,1525,1527],{"class":554,"line":555},[552,1513,559],{"class":558},[552,1515,947],{"class":562},[552,1517,1142],{"class":566},[552,1519,573],{"class":558},[552,1521,576],{"class":558},[552,1523,1524],{"class":579},"meshesArray",[552,1526,576],{"class":558},[552,1528,736],{"class":558},[504,1530,1531,1532,1535,1536,1541,1542,1546],{},"In the demo below, a ",[520,1533,1534],{},"v-for"," loop generates multiple spheres around the cube.\nAll resulting ",[511,1537,1538],{},[520,1539,1540],{},"Mesh"," instances are collected into an array and passed to the ",[511,1543,1544],{},[520,1545,1121],{}," prop, allowing each sphere to occlude the HTML content.",[504,1548,1549,1550,1555,1556,1559,1560,514,1564,1567],{},"This demo also uses the ",[511,1551,1552],{},[520,1553,1554],{},"on-occlude"," event, which is triggered whenever the occlusion state changes.\nHere, the event updates a ",[511,1557,1558],{},"reactive value"," to control element styles — for example, toggling between ",[1561,1562,1563],"em",{},"light",[1561,1565,1566],{},"dark"," themes.",[525,1569,1570],{},[1571,1572],"objects-html-occlude-complex-demo",{},[1160,1574,1162,1575,1577],{},[1164,1576,1166],{},[535,1578,1580],{"className":1169,"code":1579,"language":1171,"meta":548,"style":548},"\u003CTresMesh :position=\"[0, 1, 0]\">\n  \u003CTresBoxGeometry \u002F>\n  \u003CTresMeshNormalMaterial \u002F>\n  \u003Chtml\n    v-bind=\"htmlProps\"\n    :occlude=\"occluderRefs\"\n    :distance-factor=\"4\"\n    :z-index-range=\"[28, 0]\"\n    @on-occlude=\"(event: boolean) => isOccluded = event\"\n  >\n    \u003Ch1 class=\"bg-white dark:bg-dark text-xs p-1 rounded\">Move camera\u003C\u002Fh1>\n  \u003C\u002Fhtml>\n\u003C\u002FTresMesh>\n",[520,1581,1582,1600,1608,1616,1623,1637,1651,1664,1677,1691,1696,1722,1730],{"__ignoreMap":548},[552,1583,1584,1586,1588,1590,1592,1594,1596,1598],{"class":554,"line":555},[552,1585,559],{"class":558},[552,1587,754],{"class":562},[552,1589,1182],{"class":566},[552,1591,573],{"class":558},[552,1593,576],{"class":558},[552,1595,1367],{"class":579},[552,1597,576],{"class":558},[552,1599,585],{"class":558},[552,1601,1602,1604,1606],{"class":554,"line":540},[552,1603,675],{"class":558},[552,1605,790],{"class":562},[552,1607,736],{"class":558},[552,1609,1610,1612,1614],{"class":554,"line":624},[552,1611,675],{"class":558},[552,1613,800],{"class":562},[552,1615,736],{"class":558},[552,1617,1618,1620],{"class":554,"line":645},[552,1619,675],{"class":558},[552,1621,1622],{"class":562},"html\n",[552,1624,1625,1628,1630,1632,1635],{"class":554,"line":655},[552,1626,1627],{"class":566},"    v-bind",[552,1629,573],{"class":558},[552,1631,576],{"class":558},[552,1633,1634],{"class":579},"htmlProps",[552,1636,841],{"class":558},[552,1638,1639,1642,1644,1646,1649],{"class":554,"line":662},[552,1640,1641],{"class":566},"    :occlude",[552,1643,573],{"class":558},[552,1645,576],{"class":558},[552,1647,1648],{"class":579},"occluderRefs",[552,1650,841],{"class":558},[552,1652,1653,1656,1658,1660,1662],{"class":554,"line":672},[552,1654,1655],{"class":566},"    :distance-factor",[552,1657,573],{"class":558},[552,1659,576],{"class":558},[552,1661,838],{"class":579},[552,1663,841],{"class":558},[552,1665,1666,1669,1671,1673,1675],{"class":554,"line":695},[552,1667,1668],{"class":566},"    :z-index-range",[552,1670,573],{"class":558},[552,1672,576],{"class":558},[552,1674,1255],{"class":579},[552,1676,841],{"class":558},[552,1678,1679,1682,1684,1686,1689],{"class":554,"line":739},[552,1680,1681],{"class":566},"    @on-occlude",[552,1683,573],{"class":558},[552,1685,576],{"class":558},[552,1687,1688],{"class":579},"(event: boolean) => isOccluded = event",[552,1690,841],{"class":558},[552,1692,1693],{"class":554,"line":749},[552,1694,1695],{"class":558},"  >\n",[552,1697,1698,1700,1702,1704,1706,1708,1710,1712,1714,1716,1718,1720],{"class":554,"line":784},[552,1699,698],{"class":558},[552,1701,914],{"class":562},[552,1703,917],{"class":566},[552,1705,573],{"class":558},[552,1707,576],{"class":558},[552,1709,1274],{"class":579},[552,1711,576],{"class":558},[552,1713,929],{"class":558},[552,1715,1281],{"class":599},[552,1717,648],{"class":558},[552,1719,914],{"class":562},[552,1721,585],{"class":558},[552,1723,1724,1726,1728],{"class":554,"line":795},[552,1725,985],{"class":558},[552,1727,1171],{"class":562},[552,1729,585],{"class":558},[552,1731,1732,1734,1736],{"class":554,"line":541},[552,1733,648],{"class":558},[552,1735,754],{"class":562},[552,1737,585],{"class":558},[1311,1739,1741],{"id":1740},"blending-occlusion","Blending Occlusion",[504,1743,1744,1746],{},[520,1745,522],{}," can hide behind geometry as if it was part of the 3D scene using this mode. It can be enabled by using \"blending\" as the occlude prop.",[535,1748,1750],{"className":537,"code":1749,"language":547,"meta":548,"style":548},"\u003CHtml occlude=\"blending\">\n",[520,1751,1752],{"__ignoreMap":548},[552,1753,1754,1756,1758,1760,1762,1764,1767,1769],{"class":554,"line":555},[552,1755,559],{"class":558},[552,1757,947],{"class":562},[552,1759,1142],{"class":566},[552,1761,573],{"class":558},[552,1763,576],{"class":558},[552,1765,1766],{"class":579},"blending",[552,1768,576],{"class":558},[552,1770,585],{"class":558},[504,1772,1773,1774,1777,1778,1781,1782,1017],{},"The ",[511,1775,1776],{},"demo below ⬇️"," ",[1561,1779,1780],{},"(left black example)"," shows a ",[511,1783,1784],{},"basic usage example",[525,1786,1787],{},[1788,1789],"objects-html-occlude-blending-demo",{},[1160,1791,1162,1792,1794],{},[1164,1793,1166],{},[535,1795,1846],{"className":537,"code":1796,"highlights":1797,"language":547,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { Html, Levioso, OrbitControls } from '@tresjs\u002Fcientos'\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { shallowRef } from 'vue'\nimport { CircleGeometry, MeshStandardMaterial } from 'three'\n\nconst gl = {\n  clearColor: '#82DBC5',\n  clearAlpha: 1,\n  shadows: true,\n  alpha: true,\n}\n\nconst targetDirectionLightRef = shallowRef(null)\n\nconst geometries = [\n  {\n    component: 'TresBoxGeometry',\n    args: [1, 1, 1],\n  },\n  {\n    component: 'TresSphereGeometry',\n    args: [0.7, 32, 32],\n  },\n  {\n    component: 'TresTorusGeometry',\n    args: [0.5, 0.2, 16, 100],\n    bind: { castShadow: true, receiveShadow: true },\n  },\n]\n\nconst customGeometry = shallowRef(new CircleGeometry(1.25, 32))\n\nconst customMaterial = shallowRef(new MeshStandardMaterial({\n  color: 'red',\n  side: 2,\n  opacity: 1,\n  transparent: true,\n}))\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"html-demo-wrapper aspect-video\">\n    \u003CTresCanvas v-bind=\"gl\">\n      \u003CTresPerspectiveCamera :position=\"[0, 1.5, 7.5]\" \u002F>\n      \u003COrbitControls \u002F>\n\n      \u003CLevioso\n        v-for=\"(geometry, index) in geometries\"\n        :key=\"`html-occlude-blending-demo-${index}`\"\n        :speed=\"3\"\n        :float-factor=\"3.5\"\n        :rotation-factor=\"1\"\n        :range=\"[-0.35, 0.35]\"\n      >\n        \u003CTresMesh :position=\"[index * 3.5 - 3.5, 1, 0]\" v-bind=\"geometry.bind\">\n          \u003Ccomponent :is=\"geometry.component\" :args=\"geometry.args\" \u002F>\n          \u003CTresMeshNormalMaterial \u002F>\n        \u003C\u002FTresMesh>\n      \u003C\u002FLevioso>\n\n      \u003CHtml\n        center\n        transform\n        occlude=\"blending\"\n        :position=\"[-4, .75, -2]\"\n        :z-index-range=\"[28, 0]\"\n      >\n        \u003Cdiv class=\"text-center text-s p-2 bg-[#1B1C1E] text-light\">\n          BASIC 💛 \u003Cbr \u002F>\n          \u003Cem>occlude=blending\u003C\u002Fem>\n        \u003C\u002Fdiv>\n      \u003C\u002FHtml>\n\n      \u003CHtml\n        center\n        transform\n        occlude=\"blending\"\n        :position=\"[0, .85, -2]\"\n        :geometry=\"customGeometry\"\n        :z-index-range=\"[28, 0]\"\n      >\n        \u003Cdiv class=\"text-xs p-8 text-center bg-[#F6B03B] text-dark\">\n          CUSTOM \u003Cbr \u002F> \u003Cstrong>CIRCLE \u003Cbr \u002F> GEOMETRY\u003C\u002Fstrong>\n        \u003C\u002Fdiv>\n      \u003C\u002FHtml>\n\n      \u003CHtml\n        ref=\"targetDirectionLightRef\"\n        center\n        transform\n        occlude=\"blending\"\n        :position=\"[4, .5, -2]\"\n        :material=\"customMaterial\"\n        receive-shadow\n        :z-index-range=\"[28, 0]\"\n      >\n        \u003Cdiv style=\"width: 100px; height: auto; aspect-ratio: 250\u002F250;\">\u003C\u002Fdiv>\n      \u003C\u002FHtml>\n\n      \u003CHtml\n        center\n        transform\n        occlude=\"blending\"\n        :position=\"[4, 2.5, -2]\"\n        :z-index-range=\"[28, 0]\"\n      >\n        \u003Cdiv class=\"text-center text-xs p-2 text-dark bg-[#FF0000]\">\n          \u003Cstrong>HTML + Custom material \u003C\u002Fstrong> \u003Cbr \u002F>\n          \u003Cem>+ receive-shadow \u003C\u002Fem> ⬇️\n        \u003C\u002Fdiv>\n      \u003C\u002FHtml>\n\n      \u003CTresDirectionalLight\n        v-if=\"targetDirectionLightRef?.instance\"\n        :target=\"targetDirectionLightRef?.instance\"\n        :shadow-normalBias=\"0.075\"\n        :position=\"[5, 0, 5]\"\n        :intensity=\"2\"\n        cast-shadow\n      \u002F>\n\n      \u003CTresGridHelper :position-y=\"-1\" \u002F>\n      \u003CTresAmbientLight :intensity=\"1\" \u002F>\n    \u003C\u002FTresCanvas>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.html-demo-wrapper {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n  background-color: #82dbc5;\n}\n\u003C\u002Fstyle>\n\n",[540,1073,1099,1105,1798,1799,1800,1801,1802,1803,1804,1805,1806,1807,1808,1809,1810,1811,1812,1803,1804,1805,1806,1807,1808,1809,1810,1811,1812,1813,1814,1815,1816,1817,1818,1819,1820,1821,1822,1823,1824,1825,1826,1827,1828,1829,1830,1831,1832,1833,1834,1835,1836,1837,1838,1839,1840,1841,1842,1843,1844,1845],36,37,38,39,62,63,64,65,66,67,68,69,70,71,72,74,75,76,77,78,79,80,81,82,83,84,86,87,88,89,90,91,92,93,94,95,96,98,99,100,101,102,103,104,105,106,107,108,[520,1847,1848,1868,1896,1914,1933,1958,1962,1974,1991,2003,2016,2027,2031,2035,2056,2060,2072,2077,2092,2116,2121,2125,2140,2164,2168,2172,2187,2217,2245,2249,2254,2258,2289,2293,2316,2332,2345,2357,2369,2377,2386,2391,2400,2421,2442,2477,2486,2491,2499,2527,2551,2568,2585,2601,2627,2632,2690,2725,2734,2744,2754,2759,2766,2771,2776,2790,2819,2844,2849,2869,2882,2900,2909,2918,2923,2930,2935,2940,2953,2981,2997,3020,3025,3045,3083,3092,3101,3106,3113,3128,3133,3138,3151,3179,3196,3202,3225,3230,3256,3265,3270,3277,3282,3287,3300,3328,3351,3356,3376,3400,3421,3430,3439,3444,3452,3472,3492,3509,3536,3552,3558,3564,3569,3594,3615,3624,3633,3642,3647,3658,3668,3681,3693,3706,3719,3733,3738],{"__ignoreMap":548},[552,1849,1850,1852,1854,1856,1858,1860,1862,1864,1866],{"class":554,"line":555},[552,1851,559],{"class":558},[552,1853,563],{"class":562},[552,1855,567],{"class":566},[552,1857,570],{"class":566},[552,1859,573],{"class":558},[552,1861,576],{"class":558},[552,1863,580],{"class":579},[552,1865,576],{"class":558},[552,1867,585],{"class":558},[552,1869,1871,1873,1875,1877,1879,1882,1884,1886,1888,1890,1892,1894],{"class":1870,"line":540},[554,589],[552,1872,593],{"class":592},[552,1874,596],{"class":558},[552,1876,600],{"class":599},[552,1878,603],{"class":558},[552,1880,1881],{"class":599}," Levioso",[552,1883,603],{"class":558},[552,1885,606],{"class":599},[552,1887,609],{"class":558},[552,1889,612],{"class":592},[552,1891,615],{"class":558},[552,1893,618],{"class":579},[552,1895,621],{"class":558},[552,1897,1898,1900,1902,1904,1906,1908,1910,1912],{"class":554,"line":624},[552,1899,593],{"class":592},[552,1901,596],{"class":558},[552,1903,631],{"class":599},[552,1905,609],{"class":558},[552,1907,612],{"class":592},[552,1909,615],{"class":558},[552,1911,640],{"class":579},[552,1913,621],{"class":558},[552,1915,1916,1918,1920,1923,1925,1927,1929,1931],{"class":554,"line":645},[552,1917,593],{"class":592},[552,1919,596],{"class":558},[552,1921,1922],{"class":599}," shallowRef",[552,1924,609],{"class":558},[552,1926,612],{"class":592},[552,1928,615],{"class":558},[552,1930,547],{"class":579},[552,1932,621],{"class":558},[552,1934,1935,1937,1939,1942,1944,1947,1949,1951,1953,1956],{"class":554,"line":655},[552,1936,593],{"class":592},[552,1938,596],{"class":558},[552,1940,1941],{"class":599}," CircleGeometry",[552,1943,603],{"class":558},[552,1945,1946],{"class":599}," MeshStandardMaterial",[552,1948,609],{"class":558},[552,1950,612],{"class":592},[552,1952,615],{"class":558},[552,1954,1955],{"class":579},"three",[552,1957,621],{"class":558},[552,1959,1960],{"class":554,"line":662},[552,1961,659],{"emptyLinePlaceholder":658},[552,1963,1964,1967,1970,1972],{"class":554,"line":672},[552,1965,1966],{"class":566},"const",[552,1968,1969],{"class":599}," gl ",[552,1971,573],{"class":558},[552,1973,1023],{"class":558},[552,1975,1976,1979,1981,1983,1985,1988],{"class":554,"line":695},[552,1977,1978],{"class":562},"  clearColor",[552,1980,1033],{"class":558},[552,1982,615],{"class":558},[552,1984,688],{"class":579},[552,1986,1987],{"class":558},"'",[552,1989,1990],{"class":558},",\n",[552,1992,1993,1996,1998,2001],{"class":554,"line":739},[552,1994,1995],{"class":562},"  clearAlpha",[552,1997,1033],{"class":558},[552,1999,2000],{"class":717}," 1",[552,2002,1990],{"class":558},[552,2004,2005,2008,2010,2014],{"class":554,"line":749},[552,2006,2007],{"class":562},"  shadows",[552,2009,1033],{"class":558},[552,2011,2013],{"class":2012},"sfNiH"," true",[552,2015,1990],{"class":558},[552,2017,2018,2021,2023,2025],{"class":554,"line":784},[552,2019,2020],{"class":562},"  alpha",[552,2022,1033],{"class":558},[552,2024,2013],{"class":2012},[552,2026,1990],{"class":558},[552,2028,2029],{"class":554,"line":795},[552,2030,1102],{"class":558},[552,2032,2033],{"class":554,"line":541},[552,2034,659],{"emptyLinePlaceholder":658},[552,2036,2037,2039,2042,2044,2047,2050,2053],{"class":554,"line":542},[552,2038,1966],{"class":566},[552,2040,2041],{"class":599}," targetDirectionLightRef ",[552,2043,573],{"class":558},[552,2045,1922],{"class":2046},"s2Zo4",[552,2048,2049],{"class":599},"(",[552,2051,2052],{"class":558},"null",[552,2054,2055],{"class":599},")\n",[552,2057,2058],{"class":554,"line":543},[552,2059,659],{"emptyLinePlaceholder":658},[552,2061,2062,2064,2067,2069],{"class":554,"line":544},[552,2063,1966],{"class":566},[552,2065,2066],{"class":599}," geometries ",[552,2068,573],{"class":558},[552,2070,2071],{"class":599}," [\n",[552,2073,2074],{"class":554,"line":545},[552,2075,2076],{"class":558},"  {\n",[552,2078,2079,2082,2084,2086,2088,2090],{"class":554,"line":546},[552,2080,2081],{"class":562},"    component",[552,2083,1033],{"class":558},[552,2085,615],{"class":558},[552,2087,790],{"class":579},[552,2089,1987],{"class":558},[552,2091,1990],{"class":558},[552,2093,2094,2097,2099,2102,2104,2106,2108,2110,2112,2114],{"class":554,"line":902},[552,2095,2096],{"class":562},"    args",[552,2098,1033],{"class":558},[552,2100,2101],{"class":599}," [",[552,2103,767],{"class":717},[552,2105,603],{"class":558},[552,2107,2000],{"class":717},[552,2109,603],{"class":558},[552,2111,2000],{"class":717},[552,2113,731],{"class":599},[552,2115,1990],{"class":558},[552,2117,2118],{"class":554,"line":908},[552,2119,2120],{"class":558},"  },\n",[552,2122,2123],{"class":554,"line":941},[552,2124,2076],{"class":558},[552,2126,2127,2129,2131,2133,2136,2138],{"class":554,"line":952},[552,2128,2081],{"class":562},[552,2130,1033],{"class":558},[552,2132,615],{"class":558},[552,2134,2135],{"class":579},"TresSphereGeometry",[552,2137,1987],{"class":558},[552,2139,1990],{"class":558},[552,2141,2142,2144,2146,2148,2151,2153,2156,2158,2160,2162],{"class":554,"line":962},[552,2143,2096],{"class":562},[552,2145,1033],{"class":558},[552,2147,2101],{"class":599},[552,2149,2150],{"class":717},"0.7",[552,2152,603],{"class":558},[552,2154,2155],{"class":717}," 32",[552,2157,603],{"class":558},[552,2159,2155],{"class":717},[552,2161,731],{"class":599},[552,2163,1990],{"class":558},[552,2165,2166],{"class":554,"line":972},[552,2167,2120],{"class":558},[552,2169,2170],{"class":554,"line":982},[552,2171,2076],{"class":558},[552,2173,2174,2176,2178,2180,2183,2185],{"class":554,"line":992},[552,2175,2081],{"class":562},[552,2177,1033],{"class":558},[552,2179,615],{"class":558},[552,2181,2182],{"class":579},"TresTorusGeometry",[552,2184,1987],{"class":558},[552,2186,1990],{"class":558},[552,2188,2189,2191,2193,2195,2198,2200,2203,2205,2208,2210,2213,2215],{"class":554,"line":1001},[552,2190,2096],{"class":562},[552,2192,1033],{"class":558},[552,2194,2101],{"class":599},[552,2196,2197],{"class":717},"0.5",[552,2199,603],{"class":558},[552,2201,2202],{"class":717}," 0.2",[552,2204,603],{"class":558},[552,2206,2207],{"class":717}," 16",[552,2209,603],{"class":558},[552,2211,2212],{"class":717}," 100",[552,2214,731],{"class":599},[552,2216,1990],{"class":558},[552,2218,2219,2222,2224,2226,2229,2231,2233,2235,2238,2240,2242],{"class":554,"line":1014},[552,2220,2221],{"class":562},"    bind",[552,2223,1033],{"class":558},[552,2225,596],{"class":558},[552,2227,2228],{"class":562}," castShadow",[552,2230,1033],{"class":558},[552,2232,2013],{"class":2012},[552,2234,603],{"class":558},[552,2236,2237],{"class":562}," receiveShadow",[552,2239,1033],{"class":558},[552,2241,2013],{"class":2012},[552,2243,2244],{"class":558}," },\n",[552,2246,2247],{"class":554,"line":1026},[552,2248,2120],{"class":558},[552,2250,2251],{"class":554,"line":1045},[552,2252,2253],{"class":599},"]\n",[552,2255,2256],{"class":554,"line":1060},[552,2257,659],{"emptyLinePlaceholder":658},[552,2259,2261,2263,2266,2268,2270,2272,2275,2277,2279,2282,2284,2286],{"class":2260,"line":1073},[554,589],[552,2262,1966],{"class":566},[552,2264,2265],{"class":599}," customGeometry ",[552,2267,573],{"class":558},[552,2269,1922],{"class":2046},[552,2271,2049],{"class":599},[552,2273,2274],{"class":558},"new",[552,2276,1941],{"class":2046},[552,2278,2049],{"class":599},[552,2280,2281],{"class":717},"1.25",[552,2283,603],{"class":558},[552,2285,2155],{"class":717},[552,2287,2288],{"class":599},"))\n",[552,2290,2291],{"class":554,"line":1086},[552,2292,659],{"emptyLinePlaceholder":658},[552,2294,2296,2298,2301,2303,2305,2307,2309,2311,2313],{"class":2295,"line":1099},[554,589],[552,2297,1966],{"class":566},[552,2299,2300],{"class":599}," customMaterial ",[552,2302,573],{"class":558},[552,2304,1922],{"class":2046},[552,2306,2049],{"class":599},[552,2308,2274],{"class":558},[552,2310,1946],{"class":2046},[552,2312,2049],{"class":599},[552,2314,2315],{"class":558},"{\n",[552,2317,2319,2321,2323,2325,2328,2330],{"class":2318,"line":1105},[554,589],[552,2320,1048],{"class":562},[552,2322,1033],{"class":558},[552,2324,615],{"class":558},[552,2326,2327],{"class":579},"red",[552,2329,1987],{"class":558},[552,2331,1990],{"class":558},[552,2333,2335,2338,2340,2343],{"class":2334,"line":1798},[554,589],[552,2336,2337],{"class":562},"  side",[552,2339,1033],{"class":558},[552,2341,2342],{"class":717}," 2",[552,2344,1990],{"class":558},[552,2346,2348,2351,2353,2355],{"class":2347,"line":1799},[554,589],[552,2349,2350],{"class":562},"  opacity",[552,2352,1033],{"class":558},[552,2354,2000],{"class":717},[552,2356,1990],{"class":558},[552,2358,2360,2363,2365,2367],{"class":2359,"line":1800},[554,589],[552,2361,2362],{"class":562},"  transparent",[552,2364,1033],{"class":558},[552,2366,2013],{"class":2012},[552,2368,1990],{"class":558},[552,2370,2372,2375],{"class":2371,"line":1801},[554,589],[552,2373,2374],{"class":558},"}",[552,2376,2288],{"class":599},[552,2378,2380,2382,2384],{"class":554,"line":2379},40,[552,2381,648],{"class":558},[552,2383,563],{"class":562},[552,2385,585],{"class":558},[552,2387,2389],{"class":554,"line":2388},41,[552,2390,659],{"emptyLinePlaceholder":658},[552,2392,2394,2396,2398],{"class":554,"line":2393},42,[552,2395,559],{"class":558},[552,2397,667],{"class":562},[552,2399,585],{"class":558},[552,2401,2403,2405,2408,2410,2412,2414,2417,2419],{"class":554,"line":2402},43,[552,2404,675],{"class":558},[552,2406,2407],{"class":562},"div",[552,2409,917],{"class":566},[552,2411,573],{"class":558},[552,2413,576],{"class":558},[552,2415,2416],{"class":579},"html-demo-wrapper aspect-video",[552,2418,576],{"class":558},[552,2420,585],{"class":558},[552,2422,2424,2426,2428,2431,2433,2435,2438,2440],{"class":554,"line":2423},44,[552,2425,698],{"class":558},[552,2427,678],{"class":562},[552,2429,2430],{"class":566}," v-bind",[552,2432,573],{"class":558},[552,2434,576],{"class":558},[552,2436,2437],{"class":599},"gl",[552,2439,576],{"class":558},[552,2441,585],{"class":558},[552,2443,2445,2447,2449,2451,2453,2455,2457,2459,2461,2463,2466,2468,2471,2473,2475],{"class":554,"line":2444},45,[552,2446,787],{"class":558},[552,2448,701],{"class":562},[552,2450,704],{"class":558},[552,2452,707],{"class":566},[552,2454,573],{"class":558},[552,2456,576],{"class":558},[552,2458,714],{"class":558},[552,2460,857],{"class":717},[552,2462,721],{"class":558},[552,2464,2465],{"class":717},"1.5",[552,2467,721],{"class":558},[552,2469,2470],{"class":717},"7.5",[552,2472,731],{"class":558},[552,2474,576],{"class":558},[552,2476,736],{"class":558},[552,2478,2480,2482,2484],{"class":554,"line":2479},46,[552,2481,787],{"class":558},[552,2483,744],{"class":562},[552,2485,736],{"class":558},[552,2487,2489],{"class":554,"line":2488},47,[552,2490,659],{"emptyLinePlaceholder":658},[552,2492,2494,2496],{"class":554,"line":2493},48,[552,2495,787],{"class":558},[552,2497,2498],{"class":562},"Levioso\n",[552,2500,2502,2505,2507,2509,2511,2514,2516,2519,2522,2525],{"class":554,"line":2501},49,[552,2503,2504],{"class":592},"        v-for",[552,2506,573],{"class":558},[552,2508,576],{"class":558},[552,2510,2049],{"class":558},[552,2512,2513],{"class":599},"geometry",[552,2515,721],{"class":558},[552,2517,2518],{"class":599},"index",[552,2520,2521],{"class":558},") in ",[552,2523,2524],{"class":599},"geometries",[552,2526,841],{"class":558},[552,2528,2530,2532,2535,2537,2540,2543,2546,2548],{"class":554,"line":2529},50,[552,2531,828],{"class":558},[552,2533,2534],{"class":566},"key",[552,2536,573],{"class":558},[552,2538,2539],{"class":558},"\"`",[552,2541,2542],{"class":579},"html-occlude-blending-demo-",[552,2544,2545],{"class":558},"${",[552,2547,2518],{"class":599},[552,2549,2550],{"class":558},"}`\"\n",[552,2552,2554,2556,2559,2561,2563,2566],{"class":554,"line":2553},51,[552,2555,828],{"class":558},[552,2557,2558],{"class":566},"speed",[552,2560,573],{"class":558},[552,2562,576],{"class":558},[552,2564,2565],{"class":717},"3",[552,2567,841],{"class":558},[552,2569,2571,2573,2576,2578,2580,2583],{"class":554,"line":2570},52,[552,2572,828],{"class":558},[552,2574,2575],{"class":566},"float-factor",[552,2577,573],{"class":558},[552,2579,576],{"class":558},[552,2581,2582],{"class":717},"3.5",[552,2584,841],{"class":558},[552,2586,2588,2590,2593,2595,2597,2599],{"class":554,"line":2587},53,[552,2589,828],{"class":558},[552,2591,2592],{"class":566},"rotation-factor",[552,2594,573],{"class":558},[552,2596,576],{"class":558},[552,2598,767],{"class":717},[552,2600,841],{"class":558},[552,2602,2604,2606,2609,2611,2613,2616,2619,2621,2623,2625],{"class":554,"line":2603},54,[552,2605,828],{"class":558},[552,2607,2608],{"class":566},"range",[552,2610,573],{"class":558},[552,2612,576],{"class":558},[552,2614,2615],{"class":558},"[-",[552,2617,2618],{"class":717},"0.35",[552,2620,721],{"class":558},[552,2622,2618],{"class":717},[552,2624,731],{"class":558},[552,2626,841],{"class":558},[552,2628,2630],{"class":554,"line":2629},55,[552,2631,905],{"class":558},[552,2633,2635,2637,2639,2641,2643,2645,2647,2649,2651,2654,2656,2659,2661,2663,2665,2667,2669,2671,2673,2675,2677,2679,2681,2683,2686,2688],{"class":554,"line":2634},56,[552,2636,911],{"class":558},[552,2638,754],{"class":562},[552,2640,704],{"class":558},[552,2642,707],{"class":566},[552,2644,573],{"class":558},[552,2646,576],{"class":558},[552,2648,714],{"class":558},[552,2650,2518],{"class":599},[552,2652,2653],{"class":558}," * ",[552,2655,2582],{"class":717},[552,2657,2658],{"class":558}," - ",[552,2660,2582],{"class":717},[552,2662,721],{"class":558},[552,2664,767],{"class":717},[552,2666,721],{"class":558},[552,2668,857],{"class":717},[552,2670,731],{"class":558},[552,2672,576],{"class":558},[552,2674,2430],{"class":566},[552,2676,573],{"class":558},[552,2678,576],{"class":558},[552,2680,2513],{"class":599},[552,2682,1017],{"class":558},[552,2684,2685],{"class":599},"bind",[552,2687,576],{"class":558},[552,2689,585],{"class":558},[552,2691,2693,2696,2699,2702,2704,2706,2709,2711,2714,2716,2718,2721,2723],{"class":554,"line":2692},57,[552,2694,2695],{"class":558},"          \u003C",[552,2697,2698],{"class":562},"component",[552,2700,2701],{"class":566}," :is",[552,2703,573],{"class":558},[552,2705,576],{"class":558},[552,2707,2708],{"class":579},"geometry.component",[552,2710,576],{"class":558},[552,2712,2713],{"class":566}," :args",[552,2715,573],{"class":558},[552,2717,576],{"class":558},[552,2719,2720],{"class":579},"geometry.args",[552,2722,576],{"class":558},[552,2724,736],{"class":558},[552,2726,2728,2730,2732],{"class":554,"line":2727},58,[552,2729,2695],{"class":558},[552,2731,800],{"class":562},[552,2733,736],{"class":558},[552,2735,2737,2740,2742],{"class":554,"line":2736},59,[552,2738,2739],{"class":558},"        \u003C\u002F",[552,2741,754],{"class":562},[552,2743,585],{"class":558},[552,2745,2747,2749,2752],{"class":554,"line":2746},60,[552,2748,944],{"class":558},[552,2750,2751],{"class":562},"Levioso",[552,2753,585],{"class":558},[552,2755,2757],{"class":554,"line":2756},61,[552,2758,659],{"emptyLinePlaceholder":658},[552,2760,2762,2764],{"class":2761,"line":1802},[554,589],[552,2763,787],{"class":558},[552,2765,810],{"class":562},[552,2767,2769],{"class":2768,"line":1803},[554,589],[552,2770,816],{"class":566},[552,2772,2774],{"class":2773,"line":1804},[554,589],[552,2775,822],{"class":566},[552,2777,2779,2782,2784,2786,2788],{"class":2778,"line":1805},[554,589],[552,2780,2781],{"class":566},"        occlude",[552,2783,573],{"class":558},[552,2785,576],{"class":558},[552,2787,1766],{"class":579},[552,2789,841],{"class":558},[552,2791,2793,2795,2797,2799,2801,2803,2805,2807,2810,2813,2815,2817],{"class":2792,"line":1806},[554,589],[552,2794,828],{"class":558},[552,2796,707],{"class":566},[552,2798,573],{"class":558},[552,2800,576],{"class":558},[552,2802,2615],{"class":558},[552,2804,838],{"class":717},[552,2806,721],{"class":558},[552,2808,2809],{"class":717},".75",[552,2811,2812],{"class":558},", -",[552,2814,718],{"class":717},[552,2816,731],{"class":558},[552,2818,841],{"class":558},[552,2820,2822,2824,2827,2829,2831,2833,2836,2838,2840,2842],{"class":2821,"line":1807},[554,589],[552,2823,828],{"class":558},[552,2825,2826],{"class":566},"z-index-range",[552,2828,573],{"class":558},[552,2830,576],{"class":558},[552,2832,714],{"class":558},[552,2834,2835],{"class":717},"28",[552,2837,721],{"class":558},[552,2839,857],{"class":717},[552,2841,731],{"class":558},[552,2843,841],{"class":558},[552,2845,2847],{"class":2846,"line":1808},[554,589],[552,2848,905],{"class":558},[552,2850,2852,2854,2856,2858,2860,2862,2865,2867],{"class":2851,"line":1809},[554,589],[552,2853,911],{"class":558},[552,2855,2407],{"class":562},[552,2857,917],{"class":566},[552,2859,573],{"class":558},[552,2861,576],{"class":558},[552,2863,2864],{"class":579},"text-center text-s p-2 bg-[#1B1C1E] text-light",[552,2866,576],{"class":558},[552,2868,585],{"class":558},[552,2870,2872,2875,2877,2880],{"class":2871,"line":1810},[554,589],[552,2873,2874],{"class":599},"          BASIC 💛 ",[552,2876,559],{"class":558},[552,2878,2879],{"class":562},"br",[552,2881,736],{"class":558},[552,2883,2885,2887,2889,2891,2894,2896,2898],{"class":2884,"line":1811},[554,589],[552,2886,2695],{"class":558},[552,2888,1561],{"class":562},[552,2890,929],{"class":558},[552,2892,2893],{"class":599},"occlude=blending",[552,2895,648],{"class":558},[552,2897,1561],{"class":562},[552,2899,585],{"class":558},[552,2901,2903,2905,2907],{"class":2902,"line":1812},[554,589],[552,2904,2739],{"class":558},[552,2906,2407],{"class":562},[552,2908,585],{"class":558},[552,2910,2912,2914,2916],{"class":554,"line":2911},73,[552,2913,944],{"class":558},[552,2915,947],{"class":562},[552,2917,585],{"class":558},[552,2919,2921],{"class":2920,"line":1813},[554,589],[552,2922,659],{"emptyLinePlaceholder":658},[552,2924,2926,2928],{"class":2925,"line":1814},[554,589],[552,2927,787],{"class":558},[552,2929,810],{"class":562},[552,2931,2933],{"class":2932,"line":1815},[554,589],[552,2934,816],{"class":566},[552,2936,2938],{"class":2937,"line":1816},[554,589],[552,2939,822],{"class":566},[552,2941,2943,2945,2947,2949,2951],{"class":2942,"line":1817},[554,589],[552,2944,2781],{"class":566},[552,2946,573],{"class":558},[552,2948,576],{"class":558},[552,2950,1766],{"class":579},[552,2952,841],{"class":558},[552,2954,2956,2958,2960,2962,2964,2966,2968,2970,2973,2975,2977,2979],{"class":2955,"line":1818},[554,589],[552,2957,828],{"class":558},[552,2959,707],{"class":566},[552,2961,573],{"class":558},[552,2963,576],{"class":558},[552,2965,714],{"class":558},[552,2967,857],{"class":717},[552,2969,721],{"class":558},[552,2971,2972],{"class":717},".85",[552,2974,2812],{"class":558},[552,2976,718],{"class":717},[552,2978,731],{"class":558},[552,2980,841],{"class":558},[552,2982,2984,2986,2988,2990,2992,2995],{"class":2983,"line":1819},[554,589],[552,2985,828],{"class":558},[552,2987,2513],{"class":566},[552,2989,573],{"class":558},[552,2991,576],{"class":558},[552,2993,2994],{"class":599},"customGeometry",[552,2996,841],{"class":558},[552,2998,3000,3002,3004,3006,3008,3010,3012,3014,3016,3018],{"class":2999,"line":1820},[554,589],[552,3001,828],{"class":558},[552,3003,2826],{"class":566},[552,3005,573],{"class":558},[552,3007,576],{"class":558},[552,3009,714],{"class":558},[552,3011,2835],{"class":717},[552,3013,721],{"class":558},[552,3015,857],{"class":717},[552,3017,731],{"class":558},[552,3019,841],{"class":558},[552,3021,3023],{"class":3022,"line":1821},[554,589],[552,3024,905],{"class":558},[552,3026,3028,3030,3032,3034,3036,3038,3041,3043],{"class":3027,"line":1822},[554,589],[552,3029,911],{"class":558},[552,3031,2407],{"class":562},[552,3033,917],{"class":566},[552,3035,573],{"class":558},[552,3037,576],{"class":558},[552,3039,3040],{"class":579},"text-xs p-8 text-center bg-[#F6B03B] text-dark",[552,3042,576],{"class":558},[552,3044,585],{"class":558},[552,3046,3048,3051,3053,3055,3058,3061,3063,3065,3068,3070,3072,3074,3077,3079,3081],{"class":3047,"line":1823},[554,589],[552,3049,3050],{"class":599},"          CUSTOM ",[552,3052,559],{"class":558},[552,3054,2879],{"class":562},[552,3056,3057],{"class":558}," \u002F>",[552,3059,3060],{"class":558}," \u003C",[552,3062,511],{"class":562},[552,3064,929],{"class":558},[552,3066,3067],{"class":599},"CIRCLE ",[552,3069,559],{"class":558},[552,3071,2879],{"class":562},[552,3073,3057],{"class":558},[552,3075,3076],{"class":599}," GEOMETRY",[552,3078,648],{"class":558},[552,3080,511],{"class":562},[552,3082,585],{"class":558},[552,3084,3086,3088,3090],{"class":554,"line":3085},85,[552,3087,2739],{"class":558},[552,3089,2407],{"class":562},[552,3091,585],{"class":558},[552,3093,3095,3097,3099],{"class":3094,"line":1824},[554,589],[552,3096,944],{"class":558},[552,3098,947],{"class":562},[552,3100,585],{"class":558},[552,3102,3104],{"class":3103,"line":1825},[554,589],[552,3105,659],{"emptyLinePlaceholder":658},[552,3107,3109,3111],{"class":3108,"line":1826},[554,589],[552,3110,787],{"class":558},[552,3112,810],{"class":562},[552,3114,3116,3119,3121,3123,3126],{"class":3115,"line":1827},[554,589],[552,3117,3118],{"class":566},"        ref",[552,3120,573],{"class":558},[552,3122,576],{"class":558},[552,3124,3125],{"class":579},"targetDirectionLightRef",[552,3127,841],{"class":558},[552,3129,3131],{"class":3130,"line":1828},[554,589],[552,3132,816],{"class":566},[552,3134,3136],{"class":3135,"line":1829},[554,589],[552,3137,822],{"class":566},[552,3139,3141,3143,3145,3147,3149],{"class":3140,"line":1830},[554,589],[552,3142,2781],{"class":566},[552,3144,573],{"class":558},[552,3146,576],{"class":558},[552,3148,1766],{"class":579},[552,3150,841],{"class":558},[552,3152,3154,3156,3158,3160,3162,3164,3166,3168,3171,3173,3175,3177],{"class":3153,"line":1831},[554,589],[552,3155,828],{"class":558},[552,3157,707],{"class":566},[552,3159,573],{"class":558},[552,3161,576],{"class":558},[552,3163,714],{"class":558},[552,3165,838],{"class":717},[552,3167,721],{"class":558},[552,3169,3170],{"class":717},".5",[552,3172,2812],{"class":558},[552,3174,718],{"class":717},[552,3176,731],{"class":558},[552,3178,841],{"class":558},[552,3180,3182,3184,3187,3189,3191,3194],{"class":3181,"line":1832},[554,589],[552,3183,828],{"class":558},[552,3185,3186],{"class":566},"material",[552,3188,573],{"class":558},[552,3190,576],{"class":558},[552,3192,3193],{"class":599},"customMaterial",[552,3195,841],{"class":558},[552,3197,3199],{"class":3198,"line":1833},[554,589],[552,3200,3201],{"class":566},"        receive-shadow\n",[552,3203,3205,3207,3209,3211,3213,3215,3217,3219,3221,3223],{"class":3204,"line":1834},[554,589],[552,3206,828],{"class":558},[552,3208,2826],{"class":566},[552,3210,573],{"class":558},[552,3212,576],{"class":558},[552,3214,714],{"class":558},[552,3216,2835],{"class":717},[552,3218,721],{"class":558},[552,3220,857],{"class":717},[552,3222,731],{"class":558},[552,3224,841],{"class":558},[552,3226,3228],{"class":554,"line":3227},97,[552,3229,905],{"class":558},[552,3231,3233,3235,3237,3240,3242,3244,3247,3249,3252,3254],{"class":3232,"line":1835},[554,589],[552,3234,911],{"class":558},[552,3236,2407],{"class":562},[552,3238,3239],{"class":566}," style",[552,3241,573],{"class":558},[552,3243,576],{"class":558},[552,3245,3246],{"class":579},"width: 100px; height: auto; aspect-ratio: 250\u002F250;",[552,3248,576],{"class":558},[552,3250,3251],{"class":558},">\u003C\u002F",[552,3253,2407],{"class":562},[552,3255,585],{"class":558},[552,3257,3259,3261,3263],{"class":3258,"line":1836},[554,589],[552,3260,944],{"class":558},[552,3262,947],{"class":562},[552,3264,585],{"class":558},[552,3266,3268],{"class":3267,"line":1837},[554,589],[552,3269,659],{"emptyLinePlaceholder":658},[552,3271,3273,3275],{"class":3272,"line":1838},[554,589],[552,3274,787],{"class":558},[552,3276,810],{"class":562},[552,3278,3280],{"class":3279,"line":1839},[554,589],[552,3281,816],{"class":566},[552,3283,3285],{"class":3284,"line":1840},[554,589],[552,3286,822],{"class":566},[552,3288,3290,3292,3294,3296,3298],{"class":3289,"line":1841},[554,589],[552,3291,2781],{"class":566},[552,3293,573],{"class":558},[552,3295,576],{"class":558},[552,3297,1766],{"class":579},[552,3299,841],{"class":558},[552,3301,3303,3305,3307,3309,3311,3313,3315,3317,3320,3322,3324,3326],{"class":3302,"line":1842},[554,589],[552,3304,828],{"class":558},[552,3306,707],{"class":566},[552,3308,573],{"class":558},[552,3310,576],{"class":558},[552,3312,714],{"class":558},[552,3314,838],{"class":717},[552,3316,721],{"class":558},[552,3318,3319],{"class":717},"2.5",[552,3321,2812],{"class":558},[552,3323,718],{"class":717},[552,3325,731],{"class":558},[552,3327,841],{"class":558},[552,3329,3331,3333,3335,3337,3339,3341,3343,3345,3347,3349],{"class":3330,"line":1843},[554,589],[552,3332,828],{"class":558},[552,3334,2826],{"class":566},[552,3336,573],{"class":558},[552,3338,576],{"class":558},[552,3340,714],{"class":558},[552,3342,2835],{"class":717},[552,3344,721],{"class":558},[552,3346,857],{"class":717},[552,3348,731],{"class":558},[552,3350,841],{"class":558},[552,3352,3354],{"class":3353,"line":1844},[554,589],[552,3355,905],{"class":558},[552,3357,3359,3361,3363,3365,3367,3369,3372,3374],{"class":3358,"line":1845},[554,589],[552,3360,911],{"class":558},[552,3362,2407],{"class":562},[552,3364,917],{"class":566},[552,3366,573],{"class":558},[552,3368,576],{"class":558},[552,3370,3371],{"class":579},"text-center text-xs p-2 text-dark bg-[#FF0000]",[552,3373,576],{"class":558},[552,3375,585],{"class":558},[552,3377,3379,3381,3383,3385,3388,3390,3392,3394,3396,3398],{"class":554,"line":3378},109,[552,3380,2695],{"class":558},[552,3382,511],{"class":562},[552,3384,929],{"class":558},[552,3386,3387],{"class":599},"HTML + Custom material ",[552,3389,648],{"class":558},[552,3391,511],{"class":562},[552,3393,929],{"class":558},[552,3395,3060],{"class":558},[552,3397,2879],{"class":562},[552,3399,736],{"class":558},[552,3401,3403,3405,3407,3409,3412,3414,3416,3418],{"class":554,"line":3402},110,[552,3404,2695],{"class":558},[552,3406,1561],{"class":562},[552,3408,929],{"class":558},[552,3410,3411],{"class":599},"+ receive-shadow ",[552,3413,648],{"class":558},[552,3415,1561],{"class":562},[552,3417,929],{"class":558},[552,3419,3420],{"class":599}," ⬇️\n",[552,3422,3424,3426,3428],{"class":554,"line":3423},111,[552,3425,2739],{"class":558},[552,3427,2407],{"class":562},[552,3429,585],{"class":558},[552,3431,3433,3435,3437],{"class":554,"line":3432},112,[552,3434,944],{"class":558},[552,3436,947],{"class":562},[552,3438,585],{"class":558},[552,3440,3442],{"class":554,"line":3441},113,[552,3443,659],{"emptyLinePlaceholder":658},[552,3445,3447,3449],{"class":554,"line":3446},114,[552,3448,787],{"class":558},[552,3450,3451],{"class":562},"TresDirectionalLight\n",[552,3453,3455,3458,3460,3462,3464,3467,3470],{"class":554,"line":3454},115,[552,3456,3457],{"class":592},"        v-if",[552,3459,573],{"class":558},[552,3461,576],{"class":558},[552,3463,3125],{"class":599},[552,3465,3466],{"class":558},"?.",[552,3468,3469],{"class":599},"instance",[552,3471,841],{"class":558},[552,3473,3475,3477,3480,3482,3484,3486,3488,3490],{"class":554,"line":3474},116,[552,3476,828],{"class":558},[552,3478,3479],{"class":566},"target",[552,3481,573],{"class":558},[552,3483,576],{"class":558},[552,3485,3125],{"class":599},[552,3487,3466],{"class":558},[552,3489,3469],{"class":599},[552,3491,841],{"class":558},[552,3493,3495,3497,3500,3502,3504,3507],{"class":554,"line":3494},117,[552,3496,828],{"class":558},[552,3498,3499],{"class":566},"shadow-normalBias",[552,3501,573],{"class":558},[552,3503,576],{"class":558},[552,3505,3506],{"class":717},"0.075",[552,3508,841],{"class":558},[552,3510,3512,3514,3516,3518,3520,3522,3524,3526,3528,3530,3532,3534],{"class":554,"line":3511},118,[552,3513,828],{"class":558},[552,3515,707],{"class":566},[552,3517,573],{"class":558},[552,3519,576],{"class":558},[552,3521,714],{"class":558},[552,3523,728],{"class":717},[552,3525,721],{"class":558},[552,3527,857],{"class":717},[552,3529,721],{"class":558},[552,3531,728],{"class":717},[552,3533,731],{"class":558},[552,3535,841],{"class":558},[552,3537,3539,3541,3544,3546,3548,3550],{"class":554,"line":3538},119,[552,3540,828],{"class":558},[552,3542,3543],{"class":566},"intensity",[552,3545,573],{"class":558},[552,3547,576],{"class":558},[552,3549,718],{"class":717},[552,3551,841],{"class":558},[552,3553,3555],{"class":554,"line":3554},120,[552,3556,3557],{"class":566},"        cast-shadow\n",[552,3559,3561],{"class":554,"line":3560},121,[552,3562,3563],{"class":558},"      \u002F>\n",[552,3565,3567],{"class":554,"line":3566},122,[552,3568,659],{"emptyLinePlaceholder":658},[552,3570,3572,3574,3576,3578,3581,3583,3585,3588,3590,3592],{"class":554,"line":3571},123,[552,3573,787],{"class":558},[552,3575,967],{"class":562},[552,3577,704],{"class":558},[552,3579,3580],{"class":566},"position-y",[552,3582,573],{"class":558},[552,3584,576],{"class":558},[552,3586,3587],{"class":558},"-",[552,3589,767],{"class":717},[552,3591,576],{"class":558},[552,3593,736],{"class":558},[552,3595,3597,3599,3601,3603,3605,3607,3609,3611,3613],{"class":554,"line":3596},124,[552,3598,787],{"class":558},[552,3600,977],{"class":562},[552,3602,704],{"class":558},[552,3604,3543],{"class":566},[552,3606,573],{"class":558},[552,3608,576],{"class":558},[552,3610,767],{"class":717},[552,3612,576],{"class":558},[552,3614,736],{"class":558},[552,3616,3618,3620,3622],{"class":554,"line":3617},125,[552,3619,955],{"class":558},[552,3621,678],{"class":562},[552,3623,585],{"class":558},[552,3625,3627,3629,3631],{"class":554,"line":3626},126,[552,3628,985],{"class":558},[552,3630,2407],{"class":562},[552,3632,585],{"class":558},[552,3634,3636,3638,3640],{"class":554,"line":3635},127,[552,3637,648],{"class":558},[552,3639,667],{"class":562},[552,3641,585],{"class":558},[552,3643,3645],{"class":554,"line":3644},128,[552,3646,659],{"emptyLinePlaceholder":658},[552,3648,3650,3652,3654,3656],{"class":554,"line":3649},129,[552,3651,559],{"class":558},[552,3653,1006],{"class":562},[552,3655,1009],{"class":566},[552,3657,585],{"class":558},[552,3659,3661,3663,3666],{"class":554,"line":3660},130,[552,3662,1017],{"class":558},[552,3664,3665],{"class":1020},"html-demo-wrapper",[552,3667,1023],{"class":558},[552,3669,3671,3674,3676,3679],{"class":554,"line":3670},131,[552,3672,3673],{"class":1029},"  width",[552,3675,1033],{"class":558},[552,3677,3678],{"class":717}," 100%",[552,3680,1042],{"class":558},[552,3682,3684,3687,3689,3691],{"class":554,"line":3683},132,[552,3685,3686],{"class":1029},"  height",[552,3688,1033],{"class":558},[552,3690,3678],{"class":717},[552,3692,1042],{"class":558},[552,3694,3696,3699,3701,3704],{"class":554,"line":3695},133,[552,3697,3698],{"class":1029},"  position",[552,3700,1033],{"class":558},[552,3702,3703],{"class":599}," relative",[552,3705,1042],{"class":558},[552,3707,3709,3712,3714,3717],{"class":554,"line":3708},134,[552,3710,3711],{"class":1029},"  overflow",[552,3713,1033],{"class":558},[552,3715,3716],{"class":599}," hidden",[552,3718,1042],{"class":558},[552,3720,3722,3724,3726,3728,3731],{"class":554,"line":3721},135,[552,3723,1030],{"class":1029},[552,3725,1033],{"class":558},[552,3727,1036],{"class":558},[552,3729,3730],{"class":599},"82dbc5",[552,3732,1042],{"class":558},[552,3734,3736],{"class":554,"line":3735},136,[552,3737,1102],{"class":558},[552,3739,3741,3743,3745],{"class":554,"line":3740},137,[552,3742,648],{"class":558},[552,3744,1006],{"class":562},[552,3746,585],{"class":558},[531,3748,3750],{"id":3749},"custom-geometry","Custom Geometry",[504,3752,3753,3754,3757,3758,3761,3762,3765,3766,3769,3770,3774],{},"By default, when using ",[520,3755,3756],{},"occlude=\"blending\"",", occlusion works correctly only with ",[511,3759,3760],{},"rectangular HTML elements"," (using a ",[520,3763,3764],{},"PlaneGeometry",").\nFor ",[1561,3767,3768],{},"non-rectangular content",", you can use the ",[511,3771,3772],{},[520,3773,2513],{}," prop to provide a matching custom geometry.",[504,3776,3777,3778,1777,3781,3784,3785,3794,3795,1017],{},"In the ",[511,3779,3780],{},"demo above ⬆️",[1561,3782,3783],{},"(middle yellow example)",", a ",[3786,3787,3791],"a",{"href":3788,"rel":3789},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#api\u002Fen\u002Fgeometries\u002FCircleGeometry",[3790],"nofollow",[520,3792,3793],{},"CircleGeometry"," is used as a ",[511,3796,3797],{},"custom geometry",[3799,3800,3801],"prose-list",{},[3802,3803,3804,3814],"ul",{},[3805,3806,1773,3807,3809,3810,3813],"li",{},[520,3808,2513],{}," prop only defines the ",[511,3811,3812],{},"occlusion shape"," in 3D and does not modify your HTML content.",[3805,3815,3816,3817,3824,3825,3828,3829,3832,3833,3840],{},"You can provide any ",[3786,3818,3821],{"href":3819,"rel":3820},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#api\u002Fen\u002Fcore\u002FBufferGeometry",[3790],[520,3822,3823],{},"BufferGeometry",", for example to simulate ",[511,3826,3827],{},"CSS-like styles"," such as ",[520,3830,3831],{},"border-radius"," using a rounded rectangle or squircle geometry (see ",[3786,3834,3837],{"href":3835,"rel":3836},"https:\u002F\u002Fdiscourse.threejs.org\u002Ft\u002Froundedrectangle-squircle\u002F28645",[3790],[520,3838,3839],{},"RoundedRectangle \u002F Squircle geometry"," for example).",[1311,3842,3844],{"id":3843},"custom-material","Custom Material",[504,3846,3847,3848,3850,3851,1777,3853,3784,3856,3859],{},"You can also assign material properties to the HTML content using the ",[520,3849,3186],{}," prop.\nIn the ",[511,3852,3780],{},[1561,3854,3855],{},"(right red example)",[511,3857,3858],{},"custom material"," is used with shadow.",[3861,3862,3863],"prose-note",{},[504,3864,1773,3865,3867,3868,3870,3871,1017],{},[520,3866,3186],{}," prop is only available when ",[520,3869,3756],{}," is ",[511,3872,3873],{},"enabled",[3861,3875,3876],{},[504,3877,3878,3879,514,3884,3889,3890,3893,3894,3896,3897,3900,3901,3906,3907,3912,3913],{},"Enable shadows using the ",[511,3880,3881],{},[520,3882,3883],{},"castShadow",[511,3885,3886],{},[520,3887,3888],{},"receiveShadow"," props.\nShadows are supported ",[511,3891,3892],{},"only"," when using a ",[511,3895,3858],{},". By default, shadows do ",[511,3898,3899],{},"not"," work with ",[1561,3902,3903],{},[520,3904,3905],{},"MeshBasicMaterial"," or ",[1561,3908,3909],{},[520,3910,3911],{},"ShaderMaterial",". ",[2879,3914],{},[531,3916,3918,3919],{"id":3917},"using-transition","Using ",[520,3920,3921],{},"\u003CTransition>",[504,3923,3924,3925,3931,3932,3934,3935,3938,3939,514,3942,3945],{},"The native Vue ",[3786,3926,3929],{"href":3927,"rel":3928},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fbuilt-ins\u002Ftransition",[3790],[520,3930,3921],{}," component works seamlessly with ",[520,3933,522],{},".\nThis means you can ",[511,3936,3937],{},"animate"," how your projected HTML content ",[1561,3940,3941],{},"enters",[1561,3943,3944],{},"leaves"," the scene, exactly as you would in a regular Vue application.",[3861,3947,3948],{},[504,3949,3950,3951,3954,3955,721,3958,3961,3962,3965],{},"All ",[511,3952,3953],{},"standard interactions"," are supported just like on a regular HTML element — ",[511,3956,3957],{},"hover effects",[511,3959,3960],{},"events",", and ",[1561,3963,3964],{},"any kind of DOM interaction"," are fully possible.",[3967,3968,3969],"scene-controls-wrapper",{},[3970,3971],"objects-html-transition-demo",{},[1160,3973,1162,3974,3976],{},[1164,3975,1166],{},[535,3977,3980],{"className":537,"code":3978,"highlights":3979,"language":547,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { Html, Levioso, OrbitControls } from '@tresjs\u002Fcientos'\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { ref } from 'vue'\n\nconst gl = {\n  clearColor: '#82DBC5',\n  clearAlpha: 0,\n  shadows: true,\n  alpha: true,\n  antialias: true,\n}\n\nconst rootRef = ref\u003CHTMLElement>()\n\nconst bgColor = ref('#F6B03B')\n\nconst geometries = [\n  {\n    component: 'TresBoxGeometry',\n    args: [1, 1, 1],\n  },\n  {\n    component: 'TresSphereGeometry',\n    args: [0.7, 32, 32],\n  },\n  {\n    component: 'TresTorusGeometry',\n    args: [0.5, 0.2, 16, 100],\n  },\n  {\n    component: 'TresConeGeometry',\n    args: [0.7, 1.4, 32],\n  },\n]\n\nconst getRandomBackgroundColor = (): string => {\n  const colors = ['#F6B03B', '#82DBC5', '#FF5733', '#33FF57', '#3357FF', '#F333FF', '#33FFF5']\n  const idx = Math.floor(Math.random() * colors.length)\n  return colors[idx] ?? '#F6B03B'\n}\n\nconst updateBackgroundColor = () => {\n  bgColor.value = getRandomBackgroundColor()\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv ref=\"rootRef\" class=\"html-demo-wrapper\">\n    \u003CTresCanvas v-bind=\"gl\" class=\"!pointer-events-none\">\n      \u003CTresPerspectiveCamera :position=\"[0, 1.5, 7.5]\" \u002F>\n      \u003COrbitControls :dom-element=\"rootRef\" \u002F>\n\n      \u003CLevioso\n        v-for=\"(geometry, index) in geometries\"\n        :key=\"`html-occlude-blending-demo-${index}`\"\n        :speed=\"3\"\n        :float-factor=\"3.5\"\n        :rotation-factor=\"1\"\n        :range=\"[-0.4, 0.4]\"\n      >\n        \u003CTresMesh :position=\"[(index - (geometries.length - 1) \u002F 2) * 2, 1, 0]\">\n          \u003Ccomponent :is=\"geometry.component\" :args=\"geometry.args\" \u002F>\n          \u003CTresMeshNormalMaterial \u002F>\n        \u003C\u002FTresMesh>\n      \u003C\u002FLevioso>\n\n      \u003CHtml\n        center\n        transform\n        occlude=\"blending\"\n        :position=\"[0, .75, -2]\"\n        :scale=\"1.15\"\n        :z-index-range=\"[28, 0]\"\n      >\n        \u003CTransition name=\"transition-basic\">\n          \u003Ch1\n            v-if=\"showTransition\"\n            :style=\"{ backgroundColor: bgColor }\"\n            class=\"html-demo-transition-heading will-change-transform transition-transform,background-color cursor-pointer duration-500 text-center p-2 text-light shadow-lg\"\n            @click=\"updateBackgroundColor\"\n          >\n            \u003Cstrong>TRANSITION + \u003C\u002Fstrong>\u003Cbr \u002F>\n            \u003Cem>occlude=blending 💛\u003C\u002Fem>\n          \u003C\u002Fh1>\n        \u003C\u002FTransition>\n      \u003C\u002FHtml>\n\n      \u003CTresGridHelper :position-y=\"-1.25\" \u002F>\n      \u003CTresAmbientLight :intensity=\"1\" \u002F>\n    \u003C\u002FTresCanvas>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.html-demo-wrapper {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n  background-color: #82dbc5;\n}\n\n.html-demo-transition-heading:hover {\n  transform: scale(1.05);\n}\n\n.transition-basic-enter-from,\n.transition-basic-leave-to {\n  opacity: 0;\n  transform: translateY(-20px);\n}\n\n.transition-basic-enter-active,\n.transition-basic-leave-active {\n  transition: all 0.5s ease;\n}\n\n.transition-basic-enter-to,\n.transition-basic-leave-from {\n  opacity: 1;\n  transform: translateY(0);\n}\n\u003C\u002Fstyle>\n",[540,2911,1813,1814,1815,1816,1817,1818,1819,1820,1821,1822,1823,3085,1824,1825,1826,1827,1828,1829,1830],[520,3981,3982,4002,4029,4047,4066,4070,4080,4094,4105,4115,4125,4136,4140,4144,4165,4169,4191,4195,4205,4209,4223,4245,4249,4253,4267,4289,4293,4297,4311,4337,4341,4345,4360,4383,4387,4391,4395,4415,4489,4531,4555,4559,4563,4579,4596,4600,4608,4612,4620,4649,4678,4710,4731,4735,4741,4763,4781,4795,4809,4823,4846,4850,4906,4934,4942,4950,4958,4962,4968,4972,4976,4988,5014,5030,5053,5058,5080,5088,5103,5118,5133,5148,5154,5178,5196,5206,5215,5224,5229,5252,5273,5282,5291,5299,5303,5313,5321,5331,5341,5351,5361,5373,5377,5381,5395,5413,5417,5421,5430,5439,5449,5465,5469,5473,5482,5491,5509,5513,5517,5526,5535,5545,5559,5563],{"__ignoreMap":548},[552,3983,3984,3986,3988,3990,3992,3994,3996,3998,4000],{"class":554,"line":555},[552,3985,559],{"class":558},[552,3987,563],{"class":562},[552,3989,567],{"class":566},[552,3991,570],{"class":566},[552,3993,573],{"class":558},[552,3995,576],{"class":558},[552,3997,580],{"class":579},[552,3999,576],{"class":558},[552,4001,585],{"class":558},[552,4003,4005,4007,4009,4011,4013,4015,4017,4019,4021,4023,4025,4027],{"class":4004,"line":540},[554,589],[552,4006,593],{"class":592},[552,4008,596],{"class":558},[552,4010,600],{"class":599},[552,4012,603],{"class":558},[552,4014,1881],{"class":599},[552,4016,603],{"class":558},[552,4018,606],{"class":599},[552,4020,609],{"class":558},[552,4022,612],{"class":592},[552,4024,615],{"class":558},[552,4026,618],{"class":579},[552,4028,621],{"class":558},[552,4030,4031,4033,4035,4037,4039,4041,4043,4045],{"class":554,"line":624},[552,4032,593],{"class":592},[552,4034,596],{"class":558},[552,4036,631],{"class":599},[552,4038,609],{"class":558},[552,4040,612],{"class":592},[552,4042,615],{"class":558},[552,4044,640],{"class":579},[552,4046,621],{"class":558},[552,4048,4049,4051,4053,4056,4058,4060,4062,4064],{"class":554,"line":645},[552,4050,593],{"class":592},[552,4052,596],{"class":558},[552,4054,4055],{"class":599}," ref",[552,4057,609],{"class":558},[552,4059,612],{"class":592},[552,4061,615],{"class":558},[552,4063,547],{"class":579},[552,4065,621],{"class":558},[552,4067,4068],{"class":554,"line":655},[552,4069,659],{"emptyLinePlaceholder":658},[552,4071,4072,4074,4076,4078],{"class":554,"line":662},[552,4073,1966],{"class":566},[552,4075,1969],{"class":599},[552,4077,573],{"class":558},[552,4079,1023],{"class":558},[552,4081,4082,4084,4086,4088,4090,4092],{"class":554,"line":672},[552,4083,1978],{"class":562},[552,4085,1033],{"class":558},[552,4087,615],{"class":558},[552,4089,688],{"class":579},[552,4091,1987],{"class":558},[552,4093,1990],{"class":558},[552,4095,4096,4098,4100,4103],{"class":554,"line":695},[552,4097,1995],{"class":562},[552,4099,1033],{"class":558},[552,4101,4102],{"class":717}," 0",[552,4104,1990],{"class":558},[552,4106,4107,4109,4111,4113],{"class":554,"line":739},[552,4108,2007],{"class":562},[552,4110,1033],{"class":558},[552,4112,2013],{"class":2012},[552,4114,1990],{"class":558},[552,4116,4117,4119,4121,4123],{"class":554,"line":749},[552,4118,2020],{"class":562},[552,4120,1033],{"class":558},[552,4122,2013],{"class":2012},[552,4124,1990],{"class":558},[552,4126,4127,4130,4132,4134],{"class":554,"line":784},[552,4128,4129],{"class":562},"  antialias",[552,4131,1033],{"class":558},[552,4133,2013],{"class":2012},[552,4135,1990],{"class":558},[552,4137,4138],{"class":554,"line":795},[552,4139,1102],{"class":558},[552,4141,4142],{"class":554,"line":541},[552,4143,659],{"emptyLinePlaceholder":658},[552,4145,4146,4148,4151,4153,4155,4157,4160,4162],{"class":554,"line":542},[552,4147,1966],{"class":566},[552,4149,4150],{"class":599}," rootRef ",[552,4152,573],{"class":558},[552,4154,4055],{"class":2046},[552,4156,559],{"class":558},[552,4158,4159],{"class":1020},"HTMLElement",[552,4161,929],{"class":558},[552,4163,4164],{"class":599},"()\n",[552,4166,4167],{"class":554,"line":543},[552,4168,659],{"emptyLinePlaceholder":658},[552,4170,4171,4173,4176,4178,4180,4182,4184,4187,4189],{"class":554,"line":544},[552,4172,1966],{"class":566},[552,4174,4175],{"class":599}," bgColor ",[552,4177,573],{"class":558},[552,4179,4055],{"class":2046},[552,4181,2049],{"class":599},[552,4183,1987],{"class":558},[552,4185,4186],{"class":579},"#F6B03B",[552,4188,1987],{"class":558},[552,4190,2055],{"class":599},[552,4192,4193],{"class":554,"line":545},[552,4194,659],{"emptyLinePlaceholder":658},[552,4196,4197,4199,4201,4203],{"class":554,"line":546},[552,4198,1966],{"class":566},[552,4200,2066],{"class":599},[552,4202,573],{"class":558},[552,4204,2071],{"class":599},[552,4206,4207],{"class":554,"line":902},[552,4208,2076],{"class":558},[552,4210,4211,4213,4215,4217,4219,4221],{"class":554,"line":908},[552,4212,2081],{"class":562},[552,4214,1033],{"class":558},[552,4216,615],{"class":558},[552,4218,790],{"class":579},[552,4220,1987],{"class":558},[552,4222,1990],{"class":558},[552,4224,4225,4227,4229,4231,4233,4235,4237,4239,4241,4243],{"class":554,"line":941},[552,4226,2096],{"class":562},[552,4228,1033],{"class":558},[552,4230,2101],{"class":599},[552,4232,767],{"class":717},[552,4234,603],{"class":558},[552,4236,2000],{"class":717},[552,4238,603],{"class":558},[552,4240,2000],{"class":717},[552,4242,731],{"class":599},[552,4244,1990],{"class":558},[552,4246,4247],{"class":554,"line":952},[552,4248,2120],{"class":558},[552,4250,4251],{"class":554,"line":962},[552,4252,2076],{"class":558},[552,4254,4255,4257,4259,4261,4263,4265],{"class":554,"line":972},[552,4256,2081],{"class":562},[552,4258,1033],{"class":558},[552,4260,615],{"class":558},[552,4262,2135],{"class":579},[552,4264,1987],{"class":558},[552,4266,1990],{"class":558},[552,4268,4269,4271,4273,4275,4277,4279,4281,4283,4285,4287],{"class":554,"line":982},[552,4270,2096],{"class":562},[552,4272,1033],{"class":558},[552,4274,2101],{"class":599},[552,4276,2150],{"class":717},[552,4278,603],{"class":558},[552,4280,2155],{"class":717},[552,4282,603],{"class":558},[552,4284,2155],{"class":717},[552,4286,731],{"class":599},[552,4288,1990],{"class":558},[552,4290,4291],{"class":554,"line":992},[552,4292,2120],{"class":558},[552,4294,4295],{"class":554,"line":1001},[552,4296,2076],{"class":558},[552,4298,4299,4301,4303,4305,4307,4309],{"class":554,"line":1014},[552,4300,2081],{"class":562},[552,4302,1033],{"class":558},[552,4304,615],{"class":558},[552,4306,2182],{"class":579},[552,4308,1987],{"class":558},[552,4310,1990],{"class":558},[552,4312,4313,4315,4317,4319,4321,4323,4325,4327,4329,4331,4333,4335],{"class":554,"line":1026},[552,4314,2096],{"class":562},[552,4316,1033],{"class":558},[552,4318,2101],{"class":599},[552,4320,2197],{"class":717},[552,4322,603],{"class":558},[552,4324,2202],{"class":717},[552,4326,603],{"class":558},[552,4328,2207],{"class":717},[552,4330,603],{"class":558},[552,4332,2212],{"class":717},[552,4334,731],{"class":599},[552,4336,1990],{"class":558},[552,4338,4339],{"class":554,"line":1045},[552,4340,2120],{"class":558},[552,4342,4343],{"class":554,"line":1060},[552,4344,2076],{"class":558},[552,4346,4347,4349,4351,4353,4356,4358],{"class":554,"line":1073},[552,4348,2081],{"class":562},[552,4350,1033],{"class":558},[552,4352,615],{"class":558},[552,4354,4355],{"class":579},"TresConeGeometry",[552,4357,1987],{"class":558},[552,4359,1990],{"class":558},[552,4361,4362,4364,4366,4368,4370,4372,4375,4377,4379,4381],{"class":554,"line":1086},[552,4363,2096],{"class":562},[552,4365,1033],{"class":558},[552,4367,2101],{"class":599},[552,4369,2150],{"class":717},[552,4371,603],{"class":558},[552,4373,4374],{"class":717}," 1.4",[552,4376,603],{"class":558},[552,4378,2155],{"class":717},[552,4380,731],{"class":599},[552,4382,1990],{"class":558},[552,4384,4385],{"class":554,"line":1099},[552,4386,2120],{"class":558},[552,4388,4389],{"class":554,"line":1105},[552,4390,2253],{"class":599},[552,4392,4393],{"class":554,"line":1798},[552,4394,659],{"emptyLinePlaceholder":658},[552,4396,4397,4399,4402,4404,4407,4410,4413],{"class":554,"line":1799},[552,4398,1966],{"class":566},[552,4400,4401],{"class":599}," getRandomBackgroundColor ",[552,4403,573],{"class":558},[552,4405,4406],{"class":558}," ():",[552,4408,4409],{"class":1020}," string",[552,4411,4412],{"class":566}," =>",[552,4414,1023],{"class":558},[552,4416,4417,4420,4423,4426,4428,4430,4432,4434,4436,4438,4440,4442,4444,4446,4449,4451,4453,4455,4458,4460,4462,4464,4467,4469,4471,4473,4476,4478,4480,4482,4485,4487],{"class":554,"line":1800},[552,4418,4419],{"class":566},"  const",[552,4421,4422],{"class":599}," colors",[552,4424,4425],{"class":558}," =",[552,4427,2101],{"class":562},[552,4429,1987],{"class":558},[552,4431,4186],{"class":579},[552,4433,1987],{"class":558},[552,4435,603],{"class":558},[552,4437,615],{"class":558},[552,4439,688],{"class":579},[552,4441,1987],{"class":558},[552,4443,603],{"class":558},[552,4445,615],{"class":558},[552,4447,4448],{"class":579},"#FF5733",[552,4450,1987],{"class":558},[552,4452,603],{"class":558},[552,4454,615],{"class":558},[552,4456,4457],{"class":579},"#33FF57",[552,4459,1987],{"class":558},[552,4461,603],{"class":558},[552,4463,615],{"class":558},[552,4465,4466],{"class":579},"#3357FF",[552,4468,1987],{"class":558},[552,4470,603],{"class":558},[552,4472,615],{"class":558},[552,4474,4475],{"class":579},"#F333FF",[552,4477,1987],{"class":558},[552,4479,603],{"class":558},[552,4481,615],{"class":558},[552,4483,4484],{"class":579},"#33FFF5",[552,4486,1987],{"class":558},[552,4488,2253],{"class":562},[552,4490,4491,4493,4496,4498,4501,4503,4506,4508,4511,4513,4516,4519,4522,4524,4526,4529],{"class":554,"line":1801},[552,4492,4419],{"class":566},[552,4494,4495],{"class":599}," idx",[552,4497,4425],{"class":558},[552,4499,4500],{"class":599}," Math",[552,4502,1017],{"class":558},[552,4504,4505],{"class":2046},"floor",[552,4507,2049],{"class":562},[552,4509,4510],{"class":599},"Math",[552,4512,1017],{"class":558},[552,4514,4515],{"class":2046},"random",[552,4517,4518],{"class":562},"() ",[552,4520,4521],{"class":558},"*",[552,4523,4422],{"class":599},[552,4525,1017],{"class":558},[552,4527,4528],{"class":599},"length",[552,4530,2055],{"class":562},[552,4532,4533,4536,4538,4540,4543,4546,4549,4551,4553],{"class":554,"line":2379},[552,4534,4535],{"class":592},"  return",[552,4537,4422],{"class":599},[552,4539,714],{"class":562},[552,4541,4542],{"class":599},"idx",[552,4544,4545],{"class":562},"] ",[552,4547,4548],{"class":558},"??",[552,4550,615],{"class":558},[552,4552,4186],{"class":579},[552,4554,621],{"class":558},[552,4556,4557],{"class":554,"line":2388},[552,4558,1102],{"class":558},[552,4560,4561],{"class":554,"line":2393},[552,4562,659],{"emptyLinePlaceholder":658},[552,4564,4565,4567,4570,4572,4575,4577],{"class":554,"line":2402},[552,4566,1966],{"class":566},[552,4568,4569],{"class":599}," updateBackgroundColor ",[552,4571,573],{"class":558},[552,4573,4574],{"class":558}," ()",[552,4576,4412],{"class":566},[552,4578,1023],{"class":558},[552,4580,4581,4584,4586,4589,4591,4594],{"class":554,"line":2423},[552,4582,4583],{"class":599},"  bgColor",[552,4585,1017],{"class":558},[552,4587,4588],{"class":599},"value",[552,4590,4425],{"class":558},[552,4592,4593],{"class":2046}," getRandomBackgroundColor",[552,4595,4164],{"class":562},[552,4597,4598],{"class":554,"line":2444},[552,4599,1102],{"class":558},[552,4601,4602,4604,4606],{"class":554,"line":2479},[552,4603,648],{"class":558},[552,4605,563],{"class":562},[552,4607,585],{"class":558},[552,4609,4610],{"class":554,"line":2488},[552,4611,659],{"emptyLinePlaceholder":658},[552,4613,4614,4616,4618],{"class":554,"line":2493},[552,4615,559],{"class":558},[552,4617,667],{"class":562},[552,4619,585],{"class":558},[552,4621,4622,4624,4626,4628,4630,4632,4635,4637,4639,4641,4643,4645,4647],{"class":554,"line":2501},[552,4623,675],{"class":558},[552,4625,2407],{"class":562},[552,4627,4055],{"class":566},[552,4629,573],{"class":558},[552,4631,576],{"class":558},[552,4633,4634],{"class":579},"rootRef",[552,4636,576],{"class":558},[552,4638,917],{"class":566},[552,4640,573],{"class":558},[552,4642,576],{"class":558},[552,4644,3665],{"class":579},[552,4646,576],{"class":558},[552,4648,585],{"class":558},[552,4650,4651,4653,4655,4657,4659,4661,4663,4665,4667,4669,4671,4674,4676],{"class":554,"line":2529},[552,4652,698],{"class":558},[552,4654,678],{"class":562},[552,4656,2430],{"class":566},[552,4658,573],{"class":558},[552,4660,576],{"class":558},[552,4662,2437],{"class":599},[552,4664,576],{"class":558},[552,4666,917],{"class":566},[552,4668,573],{"class":558},[552,4670,576],{"class":558},[552,4672,4673],{"class":579},"!pointer-events-none",[552,4675,576],{"class":558},[552,4677,585],{"class":558},[552,4679,4680,4682,4684,4686,4688,4690,4692,4694,4696,4698,4700,4702,4704,4706,4708],{"class":554,"line":2553},[552,4681,787],{"class":558},[552,4683,701],{"class":562},[552,4685,704],{"class":558},[552,4687,707],{"class":566},[552,4689,573],{"class":558},[552,4691,576],{"class":558},[552,4693,714],{"class":558},[552,4695,857],{"class":717},[552,4697,721],{"class":558},[552,4699,2465],{"class":717},[552,4701,721],{"class":558},[552,4703,2470],{"class":717},[552,4705,731],{"class":558},[552,4707,576],{"class":558},[552,4709,736],{"class":558},[552,4711,4712,4714,4716,4718,4721,4723,4725,4727,4729],{"class":554,"line":2570},[552,4713,787],{"class":558},[552,4715,744],{"class":562},[552,4717,704],{"class":558},[552,4719,4720],{"class":566},"dom-element",[552,4722,573],{"class":558},[552,4724,576],{"class":558},[552,4726,4634],{"class":599},[552,4728,576],{"class":558},[552,4730,736],{"class":558},[552,4732,4733],{"class":554,"line":2587},[552,4734,659],{"emptyLinePlaceholder":658},[552,4736,4737,4739],{"class":554,"line":2603},[552,4738,787],{"class":558},[552,4740,2498],{"class":562},[552,4742,4743,4745,4747,4749,4751,4753,4755,4757,4759,4761],{"class":554,"line":2629},[552,4744,2504],{"class":592},[552,4746,573],{"class":558},[552,4748,576],{"class":558},[552,4750,2049],{"class":558},[552,4752,2513],{"class":599},[552,4754,721],{"class":558},[552,4756,2518],{"class":599},[552,4758,2521],{"class":558},[552,4760,2524],{"class":599},[552,4762,841],{"class":558},[552,4764,4765,4767,4769,4771,4773,4775,4777,4779],{"class":554,"line":2634},[552,4766,828],{"class":558},[552,4768,2534],{"class":566},[552,4770,573],{"class":558},[552,4772,2539],{"class":558},[552,4774,2542],{"class":579},[552,4776,2545],{"class":558},[552,4778,2518],{"class":599},[552,4780,2550],{"class":558},[552,4782,4783,4785,4787,4789,4791,4793],{"class":554,"line":2692},[552,4784,828],{"class":558},[552,4786,2558],{"class":566},[552,4788,573],{"class":558},[552,4790,576],{"class":558},[552,4792,2565],{"class":717},[552,4794,841],{"class":558},[552,4796,4797,4799,4801,4803,4805,4807],{"class":554,"line":2727},[552,4798,828],{"class":558},[552,4800,2575],{"class":566},[552,4802,573],{"class":558},[552,4804,576],{"class":558},[552,4806,2582],{"class":717},[552,4808,841],{"class":558},[552,4810,4811,4813,4815,4817,4819,4821],{"class":554,"line":2736},[552,4812,828],{"class":558},[552,4814,2592],{"class":566},[552,4816,573],{"class":558},[552,4818,576],{"class":558},[552,4820,767],{"class":717},[552,4822,841],{"class":558},[552,4824,4825,4827,4829,4831,4833,4835,4838,4840,4842,4844],{"class":554,"line":2746},[552,4826,828],{"class":558},[552,4828,2608],{"class":566},[552,4830,573],{"class":558},[552,4832,576],{"class":558},[552,4834,2615],{"class":558},[552,4836,4837],{"class":717},"0.4",[552,4839,721],{"class":558},[552,4841,4837],{"class":717},[552,4843,731],{"class":558},[552,4845,841],{"class":558},[552,4847,4848],{"class":554,"line":2756},[552,4849,905],{"class":558},[552,4851,4852,4854,4856,4858,4860,4862,4864,4867,4869,4872,4874,4876,4878,4880,4882,4885,4887,4890,4892,4894,4896,4898,4900,4902,4904],{"class":554,"line":1802},[552,4853,911],{"class":558},[552,4855,754],{"class":562},[552,4857,704],{"class":558},[552,4859,707],{"class":566},[552,4861,573],{"class":558},[552,4863,576],{"class":558},[552,4865,4866],{"class":558},"[(",[552,4868,2518],{"class":599},[552,4870,4871],{"class":558}," - (",[552,4873,2524],{"class":599},[552,4875,1017],{"class":558},[552,4877,4528],{"class":599},[552,4879,2658],{"class":558},[552,4881,767],{"class":717},[552,4883,4884],{"class":558},") \u002F ",[552,4886,718],{"class":717},[552,4888,4889],{"class":558},") * ",[552,4891,718],{"class":717},[552,4893,721],{"class":558},[552,4895,767],{"class":717},[552,4897,721],{"class":558},[552,4899,857],{"class":717},[552,4901,731],{"class":558},[552,4903,576],{"class":558},[552,4905,585],{"class":558},[552,4907,4908,4910,4912,4914,4916,4918,4920,4922,4924,4926,4928,4930,4932],{"class":554,"line":1803},[552,4909,2695],{"class":558},[552,4911,2698],{"class":562},[552,4913,2701],{"class":566},[552,4915,573],{"class":558},[552,4917,576],{"class":558},[552,4919,2708],{"class":579},[552,4921,576],{"class":558},[552,4923,2713],{"class":566},[552,4925,573],{"class":558},[552,4927,576],{"class":558},[552,4929,2720],{"class":579},[552,4931,576],{"class":558},[552,4933,736],{"class":558},[552,4935,4936,4938,4940],{"class":554,"line":1804},[552,4937,2695],{"class":558},[552,4939,800],{"class":562},[552,4941,736],{"class":558},[552,4943,4944,4946,4948],{"class":554,"line":1805},[552,4945,2739],{"class":558},[552,4947,754],{"class":562},[552,4949,585],{"class":558},[552,4951,4952,4954,4956],{"class":554,"line":1806},[552,4953,944],{"class":558},[552,4955,2751],{"class":562},[552,4957,585],{"class":558},[552,4959,4960],{"class":554,"line":1807},[552,4961,659],{"emptyLinePlaceholder":658},[552,4963,4964,4966],{"class":554,"line":1808},[552,4965,787],{"class":558},[552,4967,810],{"class":562},[552,4969,4970],{"class":554,"line":1809},[552,4971,816],{"class":566},[552,4973,4974],{"class":554,"line":1810},[552,4975,822],{"class":566},[552,4977,4978,4980,4982,4984,4986],{"class":554,"line":1811},[552,4979,2781],{"class":566},[552,4981,573],{"class":558},[552,4983,576],{"class":558},[552,4985,1766],{"class":579},[552,4987,841],{"class":558},[552,4989,4990,4992,4994,4996,4998,5000,5002,5004,5006,5008,5010,5012],{"class":554,"line":1812},[552,4991,828],{"class":558},[552,4993,707],{"class":566},[552,4995,573],{"class":558},[552,4997,576],{"class":558},[552,4999,714],{"class":558},[552,5001,857],{"class":717},[552,5003,721],{"class":558},[552,5005,2809],{"class":717},[552,5007,2812],{"class":558},[552,5009,718],{"class":717},[552,5011,731],{"class":558},[552,5013,841],{"class":558},[552,5015,5017,5019,5021,5023,5025,5028],{"class":5016,"line":2911},[554,589],[552,5018,828],{"class":558},[552,5020,878],{"class":566},[552,5022,573],{"class":558},[552,5024,576],{"class":558},[552,5026,5027],{"class":717},"1.15",[552,5029,841],{"class":558},[552,5031,5033,5035,5037,5039,5041,5043,5045,5047,5049,5051],{"class":5032,"line":1813},[554,589],[552,5034,828],{"class":558},[552,5036,2826],{"class":566},[552,5038,573],{"class":558},[552,5040,576],{"class":558},[552,5042,714],{"class":558},[552,5044,2835],{"class":717},[552,5046,721],{"class":558},[552,5048,857],{"class":717},[552,5050,731],{"class":558},[552,5052,841],{"class":558},[552,5054,5056],{"class":5055,"line":1814},[554,589],[552,5057,905],{"class":558},[552,5059,5061,5063,5066,5069,5071,5073,5076,5078],{"class":5060,"line":1815},[554,589],[552,5062,911],{"class":558},[552,5064,5065],{"class":562},"Transition",[552,5067,5068],{"class":566}," name",[552,5070,573],{"class":558},[552,5072,576],{"class":558},[552,5074,5075],{"class":579},"transition-basic",[552,5077,576],{"class":558},[552,5079,585],{"class":558},[552,5081,5083,5085],{"class":5082,"line":1816},[554,589],[552,5084,2695],{"class":558},[552,5086,5087],{"class":562},"h1\n",[552,5089,5091,5094,5096,5098,5101],{"class":5090,"line":1817},[554,589],[552,5092,5093],{"class":566},"            v-if",[552,5095,573],{"class":558},[552,5097,576],{"class":558},[552,5099,5100],{"class":579},"showTransition",[552,5102,841],{"class":558},[552,5104,5106,5109,5111,5113,5116],{"class":5105,"line":1818},[554,589],[552,5107,5108],{"class":566},"            :style",[552,5110,573],{"class":558},[552,5112,576],{"class":558},[552,5114,5115],{"class":579},"{ backgroundColor: bgColor }",[552,5117,841],{"class":558},[552,5119,5121,5124,5126,5128,5131],{"class":5120,"line":1819},[554,589],[552,5122,5123],{"class":566},"            class",[552,5125,573],{"class":558},[552,5127,576],{"class":558},[552,5129,5130],{"class":579},"html-demo-transition-heading will-change-transform transition-transform,background-color cursor-pointer duration-500 text-center p-2 text-light shadow-lg",[552,5132,841],{"class":558},[552,5134,5136,5139,5141,5143,5146],{"class":5135,"line":1820},[554,589],[552,5137,5138],{"class":566},"            @click",[552,5140,573],{"class":558},[552,5142,576],{"class":558},[552,5144,5145],{"class":579},"updateBackgroundColor",[552,5147,841],{"class":558},[552,5149,5151],{"class":5150,"line":1821},[554,589],[552,5152,5153],{"class":558},"          >\n",[552,5155,5157,5160,5162,5164,5167,5169,5171,5174,5176],{"class":5156,"line":1822},[554,589],[552,5158,5159],{"class":558},"            \u003C",[552,5161,511],{"class":562},[552,5163,929],{"class":558},[552,5165,5166],{"class":599},"TRANSITION + ",[552,5168,648],{"class":558},[552,5170,511],{"class":562},[552,5172,5173],{"class":558},">\u003C",[552,5175,2879],{"class":562},[552,5177,736],{"class":558},[552,5179,5181,5183,5185,5187,5190,5192,5194],{"class":5180,"line":1823},[554,589],[552,5182,5159],{"class":558},[552,5184,1561],{"class":562},[552,5186,929],{"class":558},[552,5188,5189],{"class":599},"occlude=blending 💛",[552,5191,648],{"class":558},[552,5193,1561],{"class":562},[552,5195,585],{"class":558},[552,5197,5199,5202,5204],{"class":5198,"line":3085},[554,589],[552,5200,5201],{"class":558},"          \u003C\u002F",[552,5203,914],{"class":562},[552,5205,585],{"class":558},[552,5207,5209,5211,5213],{"class":5208,"line":1824},[554,589],[552,5210,2739],{"class":558},[552,5212,5065],{"class":562},[552,5214,585],{"class":558},[552,5216,5218,5220,5222],{"class":5217,"line":1825},[554,589],[552,5219,944],{"class":558},[552,5221,947],{"class":562},[552,5223,585],{"class":558},[552,5225,5227],{"class":5226,"line":1826},[554,589],[552,5228,659],{"emptyLinePlaceholder":658},[552,5230,5232,5234,5236,5238,5240,5242,5244,5246,5248,5250],{"class":5231,"line":1827},[554,589],[552,5233,787],{"class":558},[552,5235,967],{"class":562},[552,5237,704],{"class":558},[552,5239,3580],{"class":566},[552,5241,573],{"class":558},[552,5243,576],{"class":558},[552,5245,3587],{"class":558},[552,5247,2281],{"class":717},[552,5249,576],{"class":558},[552,5251,736],{"class":558},[552,5253,5255,5257,5259,5261,5263,5265,5267,5269,5271],{"class":5254,"line":1828},[554,589],[552,5256,787],{"class":558},[552,5258,977],{"class":562},[552,5260,704],{"class":558},[552,5262,3543],{"class":566},[552,5264,573],{"class":558},[552,5266,576],{"class":558},[552,5268,767],{"class":717},[552,5270,576],{"class":558},[552,5272,736],{"class":558},[552,5274,5276,5278,5280],{"class":5275,"line":1829},[554,589],[552,5277,955],{"class":558},[552,5279,678],{"class":562},[552,5281,585],{"class":558},[552,5283,5285,5287,5289],{"class":5284,"line":1830},[554,589],[552,5286,985],{"class":558},[552,5288,2407],{"class":562},[552,5290,585],{"class":558},[552,5292,5293,5295,5297],{"class":554,"line":1831},[552,5294,648],{"class":558},[552,5296,667],{"class":562},[552,5298,585],{"class":558},[552,5300,5301],{"class":554,"line":1832},[552,5302,659],{"emptyLinePlaceholder":658},[552,5304,5305,5307,5309,5311],{"class":554,"line":1833},[552,5306,559],{"class":558},[552,5308,1006],{"class":562},[552,5310,1009],{"class":566},[552,5312,585],{"class":558},[552,5314,5315,5317,5319],{"class":554,"line":1834},[552,5316,1017],{"class":558},[552,5318,3665],{"class":1020},[552,5320,1023],{"class":558},[552,5322,5323,5325,5327,5329],{"class":554,"line":3227},[552,5324,3673],{"class":1029},[552,5326,1033],{"class":558},[552,5328,3678],{"class":717},[552,5330,1042],{"class":558},[552,5332,5333,5335,5337,5339],{"class":554,"line":1835},[552,5334,3686],{"class":1029},[552,5336,1033],{"class":558},[552,5338,3678],{"class":717},[552,5340,1042],{"class":558},[552,5342,5343,5345,5347,5349],{"class":554,"line":1836},[552,5344,3698],{"class":1029},[552,5346,1033],{"class":558},[552,5348,3703],{"class":599},[552,5350,1042],{"class":558},[552,5352,5353,5355,5357,5359],{"class":554,"line":1837},[552,5354,3711],{"class":1029},[552,5356,1033],{"class":558},[552,5358,3716],{"class":599},[552,5360,1042],{"class":558},[552,5362,5363,5365,5367,5369,5371],{"class":554,"line":1838},[552,5364,1030],{"class":1029},[552,5366,1033],{"class":558},[552,5368,1036],{"class":558},[552,5370,3730],{"class":599},[552,5372,1042],{"class":558},[552,5374,5375],{"class":554,"line":1839},[552,5376,1102],{"class":558},[552,5378,5379],{"class":554,"line":1840},[552,5380,659],{"emptyLinePlaceholder":658},[552,5382,5383,5385,5388,5390,5393],{"class":554,"line":1841},[552,5384,1017],{"class":558},[552,5386,5387],{"class":1020},"html-demo-transition-heading",[552,5389,1033],{"class":558},[552,5391,5392],{"class":566},"hover",[552,5394,1023],{"class":558},[552,5396,5397,5400,5402,5405,5407,5410],{"class":554,"line":1842},[552,5398,5399],{"class":1029},"  transform",[552,5401,1033],{"class":558},[552,5403,5404],{"class":2046}," scale",[552,5406,2049],{"class":558},[552,5408,5409],{"class":717},"1.05",[552,5411,5412],{"class":558},");\n",[552,5414,5415],{"class":554,"line":1843},[552,5416,1102],{"class":558},[552,5418,5419],{"class":554,"line":1844},[552,5420,659],{"emptyLinePlaceholder":658},[552,5422,5423,5425,5428],{"class":554,"line":1845},[552,5424,1017],{"class":558},[552,5426,5427],{"class":1020},"transition-basic-enter-from",[552,5429,1990],{"class":558},[552,5431,5432,5434,5437],{"class":554,"line":3378},[552,5433,1017],{"class":558},[552,5435,5436],{"class":1020},"transition-basic-leave-to",[552,5438,1023],{"class":558},[552,5440,5441,5443,5445,5447],{"class":554,"line":3402},[552,5442,2350],{"class":1029},[552,5444,1033],{"class":558},[552,5446,4102],{"class":717},[552,5448,1042],{"class":558},[552,5450,5451,5453,5455,5458,5460,5463],{"class":554,"line":3423},[552,5452,5399],{"class":1029},[552,5454,1033],{"class":558},[552,5456,5457],{"class":2046}," translateY",[552,5459,2049],{"class":558},[552,5461,5462],{"class":717},"-20px",[552,5464,5412],{"class":558},[552,5466,5467],{"class":554,"line":3432},[552,5468,1102],{"class":558},[552,5470,5471],{"class":554,"line":3441},[552,5472,659],{"emptyLinePlaceholder":658},[552,5474,5475,5477,5480],{"class":554,"line":3446},[552,5476,1017],{"class":558},[552,5478,5479],{"class":1020},"transition-basic-enter-active",[552,5481,1990],{"class":558},[552,5483,5484,5486,5489],{"class":554,"line":3454},[552,5485,1017],{"class":558},[552,5487,5488],{"class":1020},"transition-basic-leave-active",[552,5490,1023],{"class":558},[552,5492,5493,5496,5498,5501,5504,5507],{"class":554,"line":3474},[552,5494,5495],{"class":1029},"  transition",[552,5497,1033],{"class":558},[552,5499,5500],{"class":599}," all ",[552,5502,5503],{"class":717},"0.5s",[552,5505,5506],{"class":599}," ease",[552,5508,1042],{"class":558},[552,5510,5511],{"class":554,"line":3494},[552,5512,1102],{"class":558},[552,5514,5515],{"class":554,"line":3511},[552,5516,659],{"emptyLinePlaceholder":658},[552,5518,5519,5521,5524],{"class":554,"line":3538},[552,5520,1017],{"class":558},[552,5522,5523],{"class":1020},"transition-basic-enter-to",[552,5525,1990],{"class":558},[552,5527,5528,5530,5533],{"class":554,"line":3554},[552,5529,1017],{"class":558},[552,5531,5532],{"class":1020},"transition-basic-leave-from",[552,5534,1023],{"class":558},[552,5536,5537,5539,5541,5543],{"class":554,"line":3560},[552,5538,2350],{"class":1029},[552,5540,1033],{"class":558},[552,5542,2000],{"class":717},[552,5544,1042],{"class":558},[552,5546,5547,5549,5551,5553,5555,5557],{"class":554,"line":3566},[552,5548,5399],{"class":1029},[552,5550,1033],{"class":558},[552,5552,5457],{"class":2046},[552,5554,2049],{"class":558},[552,5556,857],{"class":717},[552,5558,5412],{"class":558},[552,5560,5561],{"class":554,"line":3571},[552,5562,1102],{"class":558},[552,5564,5565,5567,5569],{"class":554,"line":3596},[552,5566,648],{"class":558},[552,5568,1006],{"class":562},[552,5570,585],{"class":558},[1311,5572,3918,5574],{"id":5573},"using-iframes",[520,5575,5576],{},"iframes",[504,5578,5579,5580,5582],{},"You can achieve pretty cool results with the ",[520,5581,947],{}," component by using iframes. For example, you can use an iframe to display a YouTube video in your scene or a webpage with a 3D model.",[525,5584,5585],{},[5586,5587],"objects-html-iframe-demo",{},[1160,5589,1162,5590,5592],{},[1164,5591,1166],{},[535,5593,5595],{"className":1169,"code":5594,"language":1171,"meta":548,"style":548},"\u003Chtml\n  transform\n  center\n  :cast-shadow=\"true\"\n  :receive-shadow=\"true\"\n  occlude=\"blending\"\n  :z-index-range=\"[28, 0]\"\n  :position-y=\"2.5\"\n  :portal=\"portalRef\"\n  :style=\"{ userSelect: 'none' }\"\n>\n  \u003Ciframe class=\"w-[700px] h-[500px]\" src=\"https:\u002F\u002Ftresjs.org\" frameborder=\"0\" :width=\"700\" :height=\"500\">\u003C\u002Fiframe>\n\u003C\u002Fhtml>\n",[520,5596,5597,5603,5608,5613,5627,5640,5653,5666,5679,5693,5707,5711,5782],{"__ignoreMap":548},[552,5598,5599,5601],{"class":554,"line":555},[552,5600,559],{"class":558},[552,5602,1622],{"class":562},[552,5604,5605],{"class":554,"line":540},[552,5606,5607],{"class":566},"  transform\n",[552,5609,5610],{"class":554,"line":624},[552,5611,5612],{"class":566},"  center\n",[552,5614,5615,5618,5620,5622,5625],{"class":554,"line":645},[552,5616,5617],{"class":566},"  :cast-shadow",[552,5619,573],{"class":558},[552,5621,576],{"class":558},[552,5623,5624],{"class":579},"true",[552,5626,841],{"class":558},[552,5628,5629,5632,5634,5636,5638],{"class":554,"line":655},[552,5630,5631],{"class":566},"  :receive-shadow",[552,5633,573],{"class":558},[552,5635,576],{"class":558},[552,5637,5624],{"class":579},[552,5639,841],{"class":558},[552,5641,5642,5645,5647,5649,5651],{"class":554,"line":662},[552,5643,5644],{"class":566},"  occlude",[552,5646,573],{"class":558},[552,5648,576],{"class":558},[552,5650,1766],{"class":579},[552,5652,841],{"class":558},[552,5654,5655,5658,5660,5662,5664],{"class":554,"line":672},[552,5656,5657],{"class":566},"  :z-index-range",[552,5659,573],{"class":558},[552,5661,576],{"class":558},[552,5663,1255],{"class":579},[552,5665,841],{"class":558},[552,5667,5668,5671,5673,5675,5677],{"class":554,"line":695},[552,5669,5670],{"class":566},"  :position-y",[552,5672,573],{"class":558},[552,5674,576],{"class":558},[552,5676,3319],{"class":579},[552,5678,841],{"class":558},[552,5680,5681,5684,5686,5688,5691],{"class":554,"line":739},[552,5682,5683],{"class":566},"  :portal",[552,5685,573],{"class":558},[552,5687,576],{"class":558},[552,5689,5690],{"class":579},"portalRef",[552,5692,841],{"class":558},[552,5694,5695,5698,5700,5702,5705],{"class":554,"line":749},[552,5696,5697],{"class":566},"  :style",[552,5699,573],{"class":558},[552,5701,576],{"class":558},[552,5703,5704],{"class":579},"{ userSelect: 'none' }",[552,5706,841],{"class":558},[552,5708,5709],{"class":554,"line":784},[552,5710,585],{"class":558},[552,5712,5713,5715,5718,5720,5722,5724,5727,5729,5732,5734,5736,5739,5741,5744,5746,5748,5750,5752,5755,5757,5759,5762,5764,5767,5769,5771,5774,5776,5778,5780],{"class":554,"line":795},[552,5714,675],{"class":558},[552,5716,5717],{"class":562},"iframe",[552,5719,917],{"class":566},[552,5721,573],{"class":558},[552,5723,576],{"class":558},[552,5725,5726],{"class":579},"w-[700px] h-[500px]",[552,5728,576],{"class":558},[552,5730,5731],{"class":566}," src",[552,5733,573],{"class":558},[552,5735,576],{"class":558},[552,5737,5738],{"class":579},"https:\u002F\u002Ftresjs.org",[552,5740,576],{"class":558},[552,5742,5743],{"class":566}," frameborder",[552,5745,573],{"class":558},[552,5747,576],{"class":558},[552,5749,857],{"class":579},[552,5751,576],{"class":558},[552,5753,5754],{"class":566}," :width",[552,5756,573],{"class":558},[552,5758,576],{"class":558},[552,5760,5761],{"class":579},"700",[552,5763,576],{"class":558},[552,5765,5766],{"class":566}," :height",[552,5768,573],{"class":558},[552,5770,576],{"class":558},[552,5772,5773],{"class":579},"500",[552,5775,576],{"class":558},[552,5777,3251],{"class":558},[552,5779,5717],{"class":562},[552,5781,585],{"class":558},[552,5783,5784,5786,5788],{"class":554,"line":541},[552,5785,648],{"class":558},[552,5787,1171],{"class":562},[552,5789,585],{"class":558},[5791,5792,5793],"info",{},[504,5794,5795,5796,5799,5800,5803,5804],{},"The demos use ",[520,5797,5798],{},":z-index-range=\"[28, 0]\""," simply to ensure the HTML elements stay below the documentation header (which uses ",[520,5801,5802],{},"z-index: 30",").\n",[511,5805,5806],{},"This value is for the docs only — you can ignore it or adjust it as needed.",[531,5808,5810],{"id":5809},"props","Props",[5812,5813,5814,5830],"table",{},[5815,5816,5817],"thead",{},[5818,5819,5820,5824,5827],"tr",{},[5821,5822,5823],"th",{},"Prop",[5821,5825,5826],{},"Description",[5821,5828,5829],{},"Default",[5831,5832,5833,5852,5867,5886,5913,5933,5950,5968,5980,5999,6022,6062,6099,6119,6152],"tbody",{},[5818,5834,5835,5841,5847],{},[5836,5837,5838],"td",{},[511,5839,5840],{},"as",[5836,5842,5843,5844,1017],{},"Wrapping ",[1561,5845,5846],{},"HTML element",[5836,5848,5849],{},[520,5850,5851],{},"'div'",[5818,5853,5854,5859,5865],{},[5836,5855,5856],{},[511,5857,5858],{},"wrapperClass",[5836,5860,1773,5861,5864],{},[520,5862,5863],{},"className"," of the wrapping element. element.",[5836,5866],{},[5818,5868,5869,5874,5881],{},[5836,5870,5871],{},[511,5872,5873],{},"prepend",[5836,5875,5876,5877,5880],{},"Projects content ",[1561,5878,5879],{},"behind"," the canvas.",[5836,5882,5883],{},[520,5884,5885],{},"false",[5818,5887,5888,5893,5909],{},[5836,5889,5890],{},[511,5891,5892],{},"center",[5836,5894,5895,5896,3912,5899,5901,5902],{},"Adds a ",[520,5897,5898],{},"transform: translate(-50%, -50%)",[2879,5900],{},"➡️ ",[1561,5903,5904,5905,5908],{},"Ignored in ",[511,5906,5907],{},"transform"," mode.",[5836,5910,5911],{},[520,5912,5885],{},[5818,5914,5915,5920,5929],{},[5836,5916,5917],{},[511,5918,5919],{},"fullscreen",[5836,5921,5922,5923,5901,5925],{},"Aligns to the upper-left corner and fills the screen. ",[2879,5924],{},[1561,5926,5904,5927,5908],{},[511,5928,5907],{},[5836,5930,5931],{},[520,5932,5885],{},[5818,5934,5935,5940,5948],{},[5836,5936,5937],{},[511,5938,5939],{},"distanceFactor",[5836,5941,5942,5943,5945,5946,1017],{},"Children are scaled by this factor and also by distance to a ",[520,5944,513],{},", or zoom when using an ",[520,5947,517],{},[5836,5949],{},[5818,5951,5952,5957,5963],{},[5836,5953,5954],{},[511,5955,5956],{},"zIndexRange",[5836,5958,5959,5960,1017],{},"Defines the ",[1561,5961,5962],{},"Z-order range",[5836,5964,5965],{},[520,5966,5967],{},"[16777271, 0]",[5818,5969,5970,5975,5978],{},[5836,5971,5972],{},[511,5973,5974],{},"portal",[5836,5976,5977],{},"Reference to a target container (for rendering into a different DOM node). container.",[5836,5979],{},[5818,5981,5982,5986,5995],{},[5836,5983,5984],{},[511,5985,5907],{},[5836,5987,1147,5988,5990,5991,5994],{},[520,5989,5624],{},", applies ",[520,5992,5993],{},"matrix3d"," transformations — the element appears as if it is inside the 3D scene.",[5836,5996,5997],{},[520,5998,5885],{},[5818,6000,6001,6006,6018],{},[5836,6002,6003],{},[511,6004,6005],{},"sprite",[5836,6007,6008,6009,3912,6011,5901,6013],{},"Renders as a ",[1561,6010,6005],{},[2879,6012],{},[1561,6014,6015,6016,5908],{},"Only in ",[511,6017,5907],{},[5836,6019,6020],{},[520,6021,5885],{},[5818,6023,6024,6029,6053],{},[5836,6025,6026],{},[511,6027,6028],{},"calculatePosition",[5836,6030,6031,6032,6034,1777,6037,1777,6040,6042,6043,6046,6047,5901,6049],{},"Callback function to override the default positioning logic. ",[2879,6033],{},[511,6035,6036],{},"Type:",[520,6038,6039],{},"(object: Object3D, camera: Camera, size: { width: number; height: number }) => [number, number, number]",[2879,6041],{},"Receives the related 3D object, the active camera, and the current viewport size, and must return ",[520,6044,6045],{},"[x, y, z]"," pixel coordinates for placing the HTML element. ",[2879,6048],{},[1561,6050,5904,6051,5908],{},[511,6052,5907],{},[5836,6054,6055],{},[3786,6056,6059,6060],{"href":6057,"rel":6058},"https:\u002F\u002Fgithub.com\u002FTresjs\u002Fcientos\u002Fblob\u002Fmain\u002Fsrc\u002Fcore\u002Fmisc\u002Fhtml\u002Futils.ts#L9-L19",[3790],"Default ",[520,6061,6028],{},[5818,6063,6064,6068,6097],{},[5836,6065,6066],{},[511,6067,1121],{},[5836,6069,6070,6071,6073,6074,6076,6077,6080,6081,2658,6083,6086,6087,6073,6089,6092,6093,6096],{},"Enables occlusion. Possible values: ",[2879,6072],{},"- ",[520,6075,5624],{}," → Occlusion against ",[1561,6078,6079],{},"all"," scene objects ",[2879,6082],{},[520,6084,6085],{},"Ref\u003CTresObject3D>[]"," → Occlusion is enabled only against the specified objects. ",[2879,6088],{},[520,6090,6091],{},"'blending'"," → Uses a ",[1561,6094,6095],{},"blending-based"," occlusion method (CSS-like depth blending).",[5836,6098],{},[5818,6100,6101,6105,6111],{},[5836,6102,6103],{},[511,6104,2513],{},[5836,6106,6107,6108,6110],{},"Custom ",[520,6109,2513],{}," to be used.",[5836,6112,6113],{},[3786,6114,6117],{"href":6115,"rel":6116},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F?q=geometry#api\u002Fen\u002Fgeometries\u002FPlaneGeometry",[3790],[520,6118,3764],{},[5818,6120,6121,6125,6150],{},[5836,6122,6123],{},[511,6124,3186],{},[5836,6126,6127,1777,6133,1777,6135,6141,6142,1777,6144],{},[511,6128,6129,6130,6132],{},"Custom shader ",[1561,6131,3186],{}," used for the occlusion mesh.",[2879,6134],{},[511,6136,6137,6138,6140],{},"Only applies when ",[520,6139,3756],{}," is enabled"," (an occlusion mesh is created). ",[2879,6143],{},[1561,6145,6146,6147,6149],{},"Ignored in raycast occlusion modes (",[520,6148,5624],{},", object refs).",[5836,6151],{},[5818,6153,6154,6159,6181],{},[5836,6155,6156],{},[511,6157,6158],{},"transparentMaterial",[5836,6160,6161,1777,6168,1777,6170,1777,6175,1777,6177],{},[511,6162,6163,6164,6167],{},"Enables ",[1561,6165,6166],{},"transparent"," rendering for the occlusion material.",[2879,6169],{},[511,6171,6137,6172,6174],{},[520,6173,3756],{}," creates an occlusion mesh.",[2879,6176],{},[1561,6178,6146,6179,6149],{},[520,6180,5624],{},[5836,6182,6183],{},[520,6184,5885],{},[531,6186,6187],{"id":3960},"Events",[5812,6189,6190,6199],{},[5815,6191,6192],{},[5818,6193,6194,6197],{},[5821,6195,6196],{},"Event",[5821,6198,5826],{},[5831,6200,6201],{},[5818,6202,6203,6206],{},[5836,6204,6205],{},"onOcclude",[5836,6207,6208],{},"Called when the occlusion state changes.",[531,6210,6212],{"id":6211},"exposed-properties","Exposed properties",[5812,6214,6215,6227],{},[5815,6216,6217],{},[5818,6218,6219,6222,6225],{},[5821,6220,6221],{},"Property",[5821,6223,6224],{},"Type",[5821,6226,5826],{},[5831,6228,6229,6251,6272],{},[5818,6230,6231,6235,6240],{},[5836,6232,6233],{},[511,6234,3469],{},[5836,6236,6237],{},[520,6238,6239],{},"Ref\u003CTresObject3D | null>",[5836,6241,6242,6243,6248,6249,1017],{},"Reference to the root ",[511,6244,6245],{},[520,6246,6247],{},"\u003CTresGroup>"," used by ",[520,6250,522],{},[5818,6252,6253,6258,6263],{},[5836,6254,6255],{},[511,6256,6257],{},"isVisible",[5836,6259,6260],{},[520,6261,6262],{},"Ref\u003Cboolean>",[5836,6264,6265,6266,3906,6269,1017],{},"Reactive value that indicates whether the HTML content is ",[511,6267,6268],{},"currently visible",[511,6270,6271],{},"occluded",[5818,6273,6274,6279,6283],{},[5836,6275,6276],{},[511,6277,6278],{},"occlusionMesh",[5836,6280,6281],{},[520,6282,6239],{},[5836,6284,6285,6286,6289,6290,3870,6292,6294],{},"Reference to the ",[511,6287,6288],{},"occlusion mesh"," created when ",[520,6291,3756],{},[511,6293,3873],{},". Used internally for geometry-based occlusion.",[531,6296,6298],{"id":6297},"caveats","Caveats",[3802,6300,6301,6334,6351,6411,6429],{},[3805,6302,6303,6304,6309,6310,6312,6313,3906,6316,6319,6320,6322,6323,6326,6327,6330,6331,6333],{},"✨ When using ",[511,6305,6306],{},[520,6307,6308],{},"\u003CHtml occlude>",", if the ",[520,6311,522],{}," component is ",[511,6314,6315],{},"overlapping",[511,6317,6318],{},"inside a 3D object",", it will be considered ",[511,6321,6271],{}," and therefore ",[511,6324,6325],{},"hidden",". To avoid this, ",[511,6328,6329],{},"adjust the position"," of the ",[520,6332,522],{}," component in your scene.",[3805,6335,6336,6337,6342,6343,6346,6347,6350],{},"🎨 When using ",[511,6338,6339],{},[520,6340,6341],{},"\u003CHtml occlude=\"blending\">",", the HTML content is no longer ",[511,6344,6345],{},"selectable"," because it is rendered ",[511,6348,6349],{},"behind the canvas",". This is required to achieve the blending effect.",[3805,6352,6353,6354,6356,6357,6359,6360],{},"⚙️ When using a ",[511,6355,3858],{}," with occlusion in ",[520,6358,1766],{}," mode, there are a few important requirements to ensure the HTML content renders correctly ⬇️",[1160,6361,1162,6362,6365],{},[1164,6363,6364],{},"See more information",[6366,6367,6368,6381,6389,6396],"ol",{},[3805,6369,6370,6371,6373,6374,6377,6378,1017],{},"If you provide your own material, it must be ",[511,6372,6166],{}," (",[520,6375,6376],{},"transparent: true",") with an ",[511,6379,6380],{},"opacity \u003C 1",[3805,6382,6383,6384,6388],{},"If you are not providing a custom material, enable ",[511,6385,6386],{},[520,6387,6158],{}," so the internal shader becomes transparent.",[3805,6390,6391,6392,6395],{},"The occlusion mesh requires a ",[511,6393,6394],{},"fully transparent canvas background","; otherwise, thin borders or halo artifacts may appear.",[3805,6397,6398,6399,6402,6403,721,6405,6408,6409,1017],{},"To compensate for the transparent canvas, you may ",[511,6400,6401],{},"reapply your previous clear-color as a CSS background"," on the ",[520,6404,1171],{},[520,6406,6407],{},"body",", or a wrapper ",[520,6410,2407],{},[3805,6412,6413,6414,6418,6419,6421,6422,6424,6425,6428],{},"🔶 When using ",[511,6415,6416],{},[520,6417,6158],{},", overlapping ",[520,6420,522],{}," elements (especially multiple ",[520,6423,3756],{}," instances) may cause ",[511,6426,6427],{},"z-index or depth-order artifacts",".\nThis happens because the occlusion mesh uses transparency in the WebGL layer while the DOM element uses CSS stacking order.",[3805,6430,6431,6432,6434,6435,6438,6439],{},"🔵 To avoid thin border artifacts when using ",[520,6433,3756],{},", make sure your ",[520,6436,6437],{},"\u003CTresCanvas>"," is fully transparent:",[535,6440,6442],{"className":537,"code":6441,"language":547,"meta":548,"style":548},"\u003CTresCanvas :alpha=\"true\" :clearAlpha=\"0\" \u002F>\n",[520,6443,6444],{"__ignoreMap":548},[552,6445,6446,6448,6450,6452,6455,6457,6459,6461,6463,6465,6468,6470,6472,6474,6476],{"class":554,"line":555},[552,6447,559],{"class":558},[552,6449,678],{"class":562},[552,6451,704],{"class":558},[552,6453,6454],{"class":566},"alpha",[552,6456,573],{"class":558},[552,6458,576],{"class":558},[552,6460,5624],{"class":2012},[552,6462,576],{"class":558},[552,6464,704],{"class":558},[552,6466,6467],{"class":566},"clearAlpha",[552,6469,573],{"class":558},[552,6471,576],{"class":558},[552,6473,857],{"class":717},[552,6475,576],{"class":558},[552,6477,736],{"class":558},[5812,6479,6480,6490],{},[5815,6481,6482],{},[5818,6483,6484,6486,6488],{},[5821,6485,5823],{},[5821,6487,5826],{},[5821,6489,5829],{},[5831,6491,6492,6505,6516,6529,6545,6560,6571,6584,6595,6608,6621,6634,6656,6671],{},[5818,6493,6494,6498,6501],{},[5836,6495,6496],{},[511,6497,5840],{},[5836,6499,6500],{},"Wrapping html element.",[5836,6502,6503],{},[520,6504,5851],{},[5818,6506,6507,6511,6514],{},[5836,6508,6509],{},[511,6510,5858],{},[5836,6512,6513],{},"The className of the wrapping element.",[5836,6515],{},[5818,6517,6518,6522,6525],{},[5836,6519,6520],{},[511,6521,5873],{},[5836,6523,6524],{},"Project content behind the canvas.",[5836,6526,6527],{},[520,6528,5885],{},[5818,6530,6531,6535,6541],{},[5836,6532,6533],{},[511,6534,5892],{},[5836,6536,6537,6538],{},"Adds a -50%\u002F-50% CSS transform. ",[552,6539,6540],{},"Ignored in transform mode",[5836,6542,6543],{},[520,6544,5885],{},[5818,6546,6547,6551,6556],{},[5836,6548,6549],{},[511,6550,5919],{},[5836,6552,6553,6554],{},"Aligns to the upper-left corner, fills the screen. ",[552,6555,6540],{},[5836,6557,6558],{},[520,6559,5885],{},[5818,6561,6562,6566,6569],{},[5836,6563,6564],{},[511,6565,5939],{},[5836,6567,6568],{},"Children will be scaled by this factor, and also by distance to a PerspectiveCamera \u002F zoom by an OrthographicCamera.",[5836,6570],{},[5818,6572,6573,6577,6580],{},[5836,6574,6575],{},[511,6576,5956],{},[5836,6578,6579],{},"Z-order range.",[5836,6581,6582],{},[520,6583,5967],{},[5818,6585,6586,6590,6593],{},[5836,6587,6588],{},[511,6589,5974],{},[5836,6591,6592],{},"Reference to target container.",[5836,6594],{},[5818,6596,6597,6601,6604],{},[5836,6598,6599],{},[511,6600,5907],{},[5836,6602,6603],{},"If true, applies matrix3d transformations.",[5836,6605,6606],{},[520,6607,5885],{},[5818,6609,6610,6614,6617],{},[5836,6611,6612],{},[511,6613,6005],{},[5836,6615,6616],{},"Renders as sprite, but only in transform mode.",[5836,6618,6619],{},[520,6620,5885],{},[5818,6622,6623,6627,6632],{},[5836,6624,6625],{},[511,6626,6028],{},[5836,6628,6629,6630],{},"Override default positioning function. ",[552,6631,6540],{},[5836,6633],{},[5818,6635,6636,6640,6654],{},[5836,6637,6638],{},[511,6639,1121],{},[5836,6641,6642,6643,721,6645,721,6647,6650,6651,6653],{},"Can be ",[520,6644,5624],{},[520,6646,6085],{},[520,6648,6649],{},"'raycast'",", or ",[520,6652,6091],{},". True occludes the entire scene.",[5836,6655],{},[5818,6657,6658,6662,6667],{},[5836,6659,6660],{},[511,6661,2513],{},[5836,6663,6107,6664,6666],{},[520,6665,2513],{}," to be use",[5836,6668,6669],{},[520,6670,3764],{},[5818,6672,6673,6677,6681],{},[5836,6674,6675],{},[511,6676,3186],{},[5836,6678,6129,6679,6666],{},[520,6680,3186],{},[5836,6682],{},[531,6684,6187],{"id":6685},"events-1",[5812,6687,6688,6696],{},[5815,6689,6690],{},[5818,6691,6692,6694],{},[5821,6693,6196],{},[5821,6695,5826],{},[5831,6697,6698],{},[5818,6699,6700,6702],{},[5836,6701,6205],{},[5836,6703,6208],{},[1006,6705,6706],{},"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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}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);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":548,"searchDepth":555,"depth":540,"links":6708},[6709,6710,6715,6718,6723,6724,6725,6726,6727],{"id":533,"depth":540,"text":15},{"id":1114,"depth":540,"text":1115,"children":6711},[6712,6713,6714],{"id":1313,"depth":624,"text":1314},{"id":1476,"depth":624,"text":1477},{"id":1740,"depth":624,"text":1741},{"id":3749,"depth":540,"text":3750,"children":6716},[6717],{"id":3843,"depth":624,"text":3844},{"id":3917,"depth":540,"text":6719,"children":6720},"Using \u003CTransition>",[6721],{"id":5573,"depth":624,"text":6722},"Using iframes",{"id":5809,"depth":540,"text":5810},{"id":3960,"depth":540,"text":6187},{"id":6211,"depth":540,"text":6212},{"id":6297,"depth":540,"text":6298},{"id":6685,"depth":540,"text":6187},"Allows you put DOM elements in your Tres.js scene.","md",null,{},{"title":441,"description":6728},"bmQxq5ycvwwoOaNRdE5rmWFB-PGm7ptZpQsjJyfxYsw",[6735,6737],{"title":437,"path":438,"stem":439,"description":6736,"children":-1},"Create gradient textures for materials.",{"title":445,"path":446,"stem":447,"description":6738,"children":-1},"Display image textures with shader-based effects.",1791549575955]