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