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