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