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