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