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