[{"data":1,"prerenderedAt":14563},["ShallowReactive",2],{"navigation":3,"/api/objects":474,"/api/objects-surround":499,"objects-list":504},[4,22],{"title":5,"path":6,"stem":7,"children":8},"Getting Started","/getting-started","1.getting-started/1.index",[9,10,14,18],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"Installation Guide","/getting-started/installation","1.getting-started/2.installation",{"title":15,"path":16,"stem":17},"Usage","/getting-started/usage","1.getting-started/3.usage",{"title":19,"path":20,"stem":21},"Upgrade Guide","/getting-started/upgrade-guide","1.getting-started/4.upgrade-guide",{"title":23,"path":24,"stem":25,"children":26},"Api","/api","2.api",[27,30,84,114,156,190,284,310,344,394,440],{"title":28,"path":24,"stem":29},"All","2.api/index",{"title":31,"path":32,"stem":33,"children":34},"Abstractions","/api/abstractions","2.api/1.abstractions/index",[35,36,40,44,48,52,56,60,64,68,72,76,80],{"title":31,"path":32,"stem":33},{"title":37,"path":38,"stem":39},"Align","/api/abstractions/align","2.api/1.abstractions/align",{"title":41,"path":42,"stem":43},"Billboard","/api/abstractions/billboard","2.api/1.abstractions/billboard",{"title":45,"path":46,"stem":47},"Camera Shake","/api/abstractions/camera-shake","2.api/1.abstractions/camera-shake",{"title":49,"path":50,"stem":51},"Decal","/api/abstractions/decal","2.api/1.abstractions/decal",{"title":53,"path":54,"stem":55},"Edges","/api/abstractions/edges","2.api/1.abstractions/edges",{"title":57,"path":58,"stem":59},"Fit","/api/abstractions/fit","2.api/1.abstractions/fit",{"title":61,"path":62,"stem":63},"Levioso (Float)","/api/abstractions/levioso","2.api/1.abstractions/levioso",{"title":65,"path":66,"stem":67},"Mask","/api/abstractions/mask","2.api/1.abstractions/mask",{"title":69,"path":70,"stem":71},"Outline","/api/abstractions/outline","2.api/1.abstractions/outline",{"title":73,"path":74,"stem":75},"Sampler","/api/abstractions/sampler","2.api/1.abstractions/sampler",{"title":77,"path":78,"stem":79},"ScreenSizer","/api/abstractions/screen-sizer","2.api/1.abstractions/screen-sizer",{"title":81,"path":82,"stem":83},"ScreenSpace","/api/abstractions/screen-space","2.api/1.abstractions/screen-space",{"title":85,"path":86,"stem":87,"children":88},"Controls","/api/controls","2.api/2.controls/index",[89,90,94,98,102,106,110],{"title":85,"path":86,"stem":87},{"title":91,"path":92,"stem":93},"Camera Controls","/api/controls/camera-controls","2.api/2.controls/camera-controls",{"title":95,"path":96,"stem":97},"Keyboard Controls","/api/controls/keyboard-controls","2.api/2.controls/keyboard-controls",{"title":99,"path":100,"stem":101},"Map Controls","/api/controls/map-controls","2.api/2.controls/map-controls",{"title":103,"path":104,"stem":105},"Orbit Controls","/api/controls/orbit-controls","2.api/2.controls/orbit-controls",{"title":107,"path":108,"stem":109},"PointerLock Controls","/api/controls/pointer-lock-controls","2.api/2.controls/pointer-lock-controls",{"title":111,"path":112,"stem":113},"Transform Controls","/api/controls/transform-controls","2.api/2.controls/transform-controls",{"title":115,"path":116,"stem":117,"children":118},"Loaders","/api/loaders","2.api/3.loaders/index",[119,120,124,128,132,136,140,144,148,152],{"title":115,"path":116,"stem":117},{"title":121,"path":122,"stem":123},"useGLTF","/api/loaders/use-gltf","2.api/3.loaders/1.use-gltf",{"title":125,"path":126,"stem":127},"GLTFModel","/api/loaders/gltf-model","2.api/3.loaders/2.gltf-model",{"title":129,"path":130,"stem":131},"useFBX","/api/loaders/use-fbx","2.api/3.loaders/3.use-fbx",{"title":133,"path":134,"stem":135},"FBXModel","/api/loaders/fbx-model","2.api/3.loaders/4.fbx-model",{"title":137,"path":138,"stem":139},"useTexture","/api/loaders/use-texture","2.api/3.loaders/5.use-texture",{"title":141,"path":142,"stem":143},"useTextures","/api/loaders/use-textures","2.api/3.loaders/6.use-textures",{"title":145,"path":146,"stem":147},"useSVG","/api/loaders/use-svg","2.api/3.loaders/7.use-svg",{"title":149,"path":150,"stem":151},"useProgress","/api/loaders/use-progress","2.api/3.loaders/use-progress",{"title":153,"path":154,"stem":155},"useVideoTexture","/api/loaders/use-video-texture","2.api/3.loaders/use-video-texture",{"title":157,"path":158,"stem":159,"children":160},"Materials","/api/materials","2.api/4.materials/index",[161,162,166,170,174,178,182,186],{"title":157,"path":158,"stem":159},{"title":163,"path":164,"stem":165},"Custom Shader Material","/api/materials/custom-shader-material","2.api/4.materials/custom-shader-material",{"title":167,"path":168,"stem":169},"Mesh Glass Material","/api/materials/glass-material","2.api/4.materials/glass-material",{"title":171,"path":172,"stem":173},"Holographic Material","/api/materials/holographic-material","2.api/4.materials/holographic-material",{"title":175,"path":176,"stem":177},"Mesh Discard Material","/api/materials/mesh-discard-material","2.api/4.materials/mesh-discard-material",{"title":179,"path":180,"stem":181},"Mesh Reflection Material","/api/materials/mesh-reflection-material","2.api/4.materials/mesh-reflection-material",{"title":183,"path":184,"stem":185},"Point Material","/api/materials/point-material","2.api/4.materials/point-material",{"title":187,"path":188,"stem":189},"Wobble Material","/api/materials/wobble-material","2.api/4.materials/wobble-material",{"title":191,"path":192,"stem":193,"children":194},"Shapes","/api/shapes","2.api/5.shapes/index",[195,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280],{"title":191,"path":192,"stem":193},{"title":197,"path":198,"stem":199},"Box","/api/shapes/box","2.api/5.shapes/box",{"title":201,"path":202,"stem":203},"CatmullRomCurve3","/api/shapes/catmullromcurve3","2.api/5.shapes/catmullromcurve3",{"title":205,"path":206,"stem":207},"Circle","/api/shapes/circle","2.api/5.shapes/circle",{"title":209,"path":210,"stem":211},"Cone","/api/shapes/cone","2.api/5.shapes/cone",{"title":213,"path":214,"stem":215},"Cubic Bezier Line","/api/shapes/cubic-bezier-line","2.api/5.shapes/cubic-bezier-line",{"title":217,"path":218,"stem":219},"Cylinder","/api/shapes/cylinder","2.api/5.shapes/cylinder",{"title":221,"path":222,"stem":223},"Dodecahedron","/api/shapes/dodecahedron","2.api/5.shapes/dodecahedron",{"title":225,"path":226,"stem":227},"Grid","/api/shapes/grid","2.api/5.shapes/grid",{"title":229,"path":230,"stem":231},"Icosahedron","/api/shapes/icosahedron","2.api/5.shapes/icosahedron",{"title":233,"path":234,"stem":235},"Line2","/api/shapes/line2","2.api/5.shapes/line2",{"title":237,"path":238,"stem":239},"Octahedron","/api/shapes/octahedron","2.api/5.shapes/octahedron",{"title":241,"path":242,"stem":243},"Plane","/api/shapes/plane","2.api/5.shapes/plane",{"title":245,"path":246,"stem":247},"Quadratic Bezier Line","/api/shapes/quadratic-bezier-line","2.api/5.shapes/quadratic-bezier-line",{"title":249,"path":250,"stem":251},"Ring","/api/shapes/ring","2.api/5.shapes/ring",{"title":253,"path":254,"stem":255},"Rounded Box","/api/shapes/rounded-box","2.api/5.shapes/rounded-box",{"title":257,"path":258,"stem":259},"Screen Quad","/api/shapes/screen-quad","2.api/5.shapes/screen-quad",{"title":261,"path":262,"stem":263},"Sphere","/api/shapes/sphere","2.api/5.shapes/sphere",{"title":265,"path":266,"stem":267},"Superformula","/api/shapes/superformula","2.api/5.shapes/superformula",{"title":269,"path":270,"stem":271},"Tetrahedron","/api/shapes/tetrahedron","2.api/5.shapes/tetrahedron",{"title":273,"path":274,"stem":275},"Torus","/api/shapes/torus","2.api/5.shapes/torus",{"title":277,"path":278,"stem":279},"Torus Knot","/api/shapes/torus-knot","2.api/5.shapes/torus-knot",{"title":281,"path":282,"stem":283},"Tube","/api/shapes/tube","2.api/5.shapes/tube",{"title":285,"path":286,"stem":287,"children":288},"Debug/Performance","/api/debug-performance","2.api/6.debug-performance/index",[289,290,294,298,302,306],{"title":285,"path":286,"stem":287},{"title":291,"path":292,"stem":293},"Helper","/api/debug-performance/helper","2.api/6.debug-performance/helper",{"title":295,"path":296,"stem":297},"LOD","/api/debug-performance/lod","2.api/6.debug-performance/lod",{"title":299,"path":300,"stem":301},"Stats","/api/debug-performance/stats","2.api/6.debug-performance/stats",{"title":303,"path":304,"stem":305},"StatsGl","/api/debug-performance/stats-gl","2.api/6.debug-performance/stats-gl",{"title":307,"path":308,"stem":309},"useBVH","/api/debug-performance/use-bvh","2.api/6.debug-performance/use-bvh",{"title":311,"path":312,"stem":313,"children":314},"Light/Shadow","/api/light-shadow","2.api/7.light-shadow/index",[315,316,320,324,328,332,336,340],{"title":311,"path":312,"stem":313},{"title":317,"path":318,"stem":319},"Accumulative Shadows","/api/light-shadow/accumulative-shadows","2.api/7.light-shadow/accumulative-shadows",{"title":321,"path":322,"stem":323},"Bake Shadows","/api/light-shadow/bake-shadows","2.api/7.light-shadow/bake-shadows",{"title":325,"path":326,"stem":327},"Circle Shadow","/api/light-shadow/circle-shadow","2.api/7.light-shadow/circle-shadow",{"title":329,"path":330,"stem":331},"Contact Shadows","/api/light-shadow/contact-shadows","2.api/7.light-shadow/contact-shadows",{"title":333,"path":334,"stem":335},"Lensflare","/api/light-shadow/lensflare","2.api/7.light-shadow/lensflare",{"title":337,"path":338,"stem":339},"Randomized Lights","/api/light-shadow/randomized-lights","2.api/7.light-shadow/randomized-lights",{"title":341,"path":342,"stem":343},"Soft Shadows","/api/light-shadow/soft-shadows","2.api/7.light-shadow/soft-shadows",{"title":345,"path":346,"stem":347,"children":348},"Staging","/api/staging","2.api/8.staging/index",[349,350,354,358,362,366,370,374,378,382,386,390],{"title":345,"path":346,"stem":347},{"title":351,"path":352,"stem":353},"Environment","/api/staging/environment","2.api/8.staging/1.environment",{"title":355,"path":356,"stem":357},"useEnvironment","/api/staging/use-environment","2.api/8.staging/2.use-environment",{"title":359,"path":360,"stem":361},"Lightformer","/api/staging/lightformer","2.api/8.staging/3.lightformer",{"title":363,"path":364,"stem":365},"Backdrop","/api/staging/backdrop","2.api/8.staging/backdrop",{"title":367,"path":368,"stem":369},"Ocean","/api/staging/ocean","2.api/8.staging/ocean",{"title":371,"path":372,"stem":373},"Precipitation","/api/staging/precipitation","2.api/8.staging/precipitation",{"title":375,"path":376,"stem":377},"Sky","/api/staging/sky","2.api/8.staging/sky",{"title":379,"path":380,"stem":381},"Smoke","/api/staging/smoke","2.api/8.staging/smoke",{"title":383,"path":384,"stem":385},"Sparkles","/api/staging/sparkles","2.api/8.staging/sparkles",{"title":387,"path":388,"stem":389},"Stage","/api/staging/stage","2.api/8.staging/stage",{"title":391,"path":392,"stem":393},"Stars","/api/staging/stars","2.api/8.staging/stars",{"title":395,"path":396,"stem":397,"children":398},"Objects","/api/objects","2.api/9.objects/index",[399,400,404,408,412,416,420,424,428,432,436],{"title":395,"path":396,"stem":397},{"title":401,"path":402,"stem":403},"AnimatedSprite","/api/objects/animated-sprite","2.api/9.objects/animated-sprite",{"title":405,"path":406,"stem":407},"CubeCamera","/api/objects/cube-camera","2.api/9.objects/cube-camera",{"title":409,"path":410,"stem":411},"Fbo","/api/objects/fbo","2.api/9.objects/fbo",{"title":413,"path":414,"stem":415},"GradientTexture","/api/objects/gradient-texture","2.api/9.objects/gradient-texture",{"title":417,"path":418,"stem":419},"HTML","/api/objects/html","2.api/9.objects/html",{"title":421,"path":422,"stem":423},"Image","/api/objects/image","2.api/9.objects/image",{"title":425,"path":426,"stem":427},"MarchingCubes","/api/objects/marching-cubes","2.api/9.objects/marching-cubes",{"title":429,"path":430,"stem":431},"Reflector","/api/objects/reflector","2.api/9.objects/reflector",{"title":433,"path":434,"stem":435},"Refractor","/api/objects/refractor","2.api/9.objects/refractor",{"title":437,"path":438,"stem":439},"Text3D","/api/objects/text-3d","2.api/9.objects/text-3d",{"title":441,"path":442,"stem":443,"children":444},"Miscellaneous","/api/miscellaneous","2.api/miscellaneous/index",[445,446,450,454,458,462,466,470],{"title":441,"path":442,"stem":443},{"title":447,"path":448,"stem":449},"Bounds","/api/miscellaneous/bounds","2.api/miscellaneous/bounds",{"title":451,"path":452,"stem":453},"GlobalAudio","/api/miscellaneous/global-audio","2.api/miscellaneous/global-audio",{"title":455,"path":456,"stem":457},"MouseParallax","/api/miscellaneous/mouse-parallax","2.api/miscellaneous/mouse-parallax",{"title":459,"path":460,"stem":461},"PositionalAudio","/api/miscellaneous/positional-audio","2.api/miscellaneous/positional-audio",{"title":463,"path":464,"stem":465},"useAnimations","/api/miscellaneous/use-animations","2.api/miscellaneous/use-animations",{"title":467,"path":468,"stem":469},"useGLTFExporter","/api/miscellaneous/use-gltf-exporter","2.api/miscellaneous/use-gltf-exporter",{"title":471,"path":472,"stem":473},"useIntersect","/api/miscellaneous/use-intersect","2.api/miscellaneous/use-intersect",{"id":475,"title":395,"body":476,"description":492,"extension":493,"links":494,"meta":495,"navigation":496,"path":396,"seo":497,"stem":397,"__hash__":498},"docs/2.api/9.objects/index.md",{"type":477,"value":478,"toc":487},"minimark",[479,483],[480,481,482],"p",{},"Components for creating 3D objects, sprites, text, and textures in your scene.",[484,485],"api-list",{"list-name":486},"objects-list",{"title":488,"searchDepth":489,"depth":490,"links":491},"",1,2,[],"3D objects and texture components","md",null,{},true,{"title":395,"description":492},"PJRjQ8U1I99ephC4xbsR6qDF0Wsdp6iYandnX5ya-lQ",[500,502],{"title":391,"path":392,"stem":393,"description":501,"children":-1},"Renders beautiful stars in the sky using Points and BufferGeometry.",{"title":401,"path":402,"stem":403,"description":503,"children":-1},"Display 2D animations defined in a texture atlas.",[505,1560,2052,3365,3797,9915,10550,11406,12790,14012],{"id":506,"title":401,"body":507,"description":503,"extension":493,"links":494,"meta":1557,"navigation":496,"path":402,"seo":1558,"stem":403,"__hash__":1559},"docs/2.api/9.objects/animated-sprite.md",{"type":477,"value":508,"toc":1539},[509,515,533,543,547,800,812,816,822,836,845,849,856,876,880,888,893,920,924,1274,1278,1348,1351,1358,1362,1365,1370,1373,1385,1401,1405,1408,1445,1448,1460,1464,1473,1483,1491,1494,1525,1528,1535],[510,511,512],"scene-controls-wrapper",{},[513,514],"objects-animated-sprite",{},[480,516,517,521,522,529,530,532],{},[518,519,520],"code",{},"\u003CAnimatedSprite />"," displays 2D animations defined in a ",[523,524,528],"a",{"href":525,"rel":526},"https://en.wikipedia.org/wiki/Texture_atlas",[527],"nofollow","texture atlas",". A typical ",[518,531,520],{}," will use:",[534,535,536,540],"ul",{},[537,538,539],"li",{},"An image containing multiple sprites",[537,541,542],{},"A JSON atlas containing the individual sprite coordinates in the image",[544,545,15],"h2",{"id":546},"usage",[548,549,559],"pre",{"className":550,"code":551,"highlights":552,"language":558,"meta":488,"style":488},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { AnimatedSprite } from '@tresjs/cientos'\n\nconst currentAnimation = ref('cientosIdle')\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CSuspense>\n      \u003CAnimatedSprite\n        image=\"https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosTexture.png\"\n        atlas=\"https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosAtlas.json\"\n        :animation=\"currentAnimation\"\n      />\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n",[490,553,554,555,556,557],10,11,12,13,14,"vue",[518,560,561,595,625,631,660,670,675,685,696,707,716,732,747,765,771,781,791],{"__ignoreMap":488},[562,563,565,569,573,577,580,583,586,590,592],"span",{"class":564,"line":489},"line",[562,566,568],{"class":567},"sMK4o","\u003C",[562,570,572],{"class":571},"swJcz","script",[562,574,576],{"class":575},"spNyl"," setup",[562,578,579],{"class":575}," lang",[562,581,582],{"class":567},"=",[562,584,585],{"class":567},"\"",[562,587,589],{"class":588},"sfazB","ts",[562,591,585],{"class":567},[562,593,594],{"class":567},">\n",[562,596,599,603,606,610,613,616,619,622],{"class":597,"line":490},[564,598],"highlight",[562,600,602],{"class":601},"s7zQu","import",[562,604,605],{"class":567}," {",[562,607,609],{"class":608},"sTEyZ"," AnimatedSprite",[562,611,612],{"class":567}," }",[562,614,615],{"class":601}," from",[562,617,618],{"class":567}," '",[562,620,621],{"class":588},"@tresjs/cientos",[562,623,624],{"class":567},"'\n",[562,626,628],{"class":564,"line":627},3,[562,629,630],{"emptyLinePlaceholder":496},"\n",[562,632,634,637,640,642,646,649,652,655,657],{"class":564,"line":633},4,[562,635,636],{"class":575},"const",[562,638,639],{"class":608}," currentAnimation ",[562,641,582],{"class":567},[562,643,645],{"class":644},"s2Zo4"," ref",[562,647,648],{"class":608},"(",[562,650,651],{"class":567},"'",[562,653,654],{"class":588},"cientosIdle",[562,656,651],{"class":567},[562,658,659],{"class":608},")\n",[562,661,663,666,668],{"class":564,"line":662},5,[562,664,665],{"class":567},"\u003C/",[562,667,572],{"class":571},[562,669,594],{"class":567},[562,671,673],{"class":564,"line":672},6,[562,674,630],{"emptyLinePlaceholder":496},[562,676,678,680,683],{"class":564,"line":677},7,[562,679,568],{"class":567},[562,681,682],{"class":571},"template",[562,684,594],{"class":567},[562,686,688,691,694],{"class":564,"line":687},8,[562,689,690],{"class":567},"  \u003C",[562,692,693],{"class":571},"TresCanvas",[562,695,594],{"class":567},[562,697,699,702,705],{"class":564,"line":698},9,[562,700,701],{"class":567},"    \u003C",[562,703,704],{"class":571},"Suspense",[562,706,594],{"class":567},[562,708,710,713],{"class":709,"line":553},[564,598],[562,711,712],{"class":567},"      \u003C",[562,714,715],{"class":571},"AnimatedSprite\n",[562,717,719,722,724,726,729],{"class":718,"line":554},[564,598],[562,720,721],{"class":575},"        image",[562,723,582],{"class":567},[562,725,585],{"class":567},[562,727,728],{"class":588},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosTexture.png",[562,730,731],{"class":567},"\"\n",[562,733,735,738,740,742,745],{"class":734,"line":555},[564,598],[562,736,737],{"class":575},"        atlas",[562,739,582],{"class":567},[562,741,585],{"class":567},[562,743,744],{"class":588},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosAtlas.json",[562,746,731],{"class":567},[562,748,750,753,756,758,760,763],{"class":749,"line":556},[564,598],[562,751,752],{"class":567},"        :",[562,754,755],{"class":575},"animation",[562,757,582],{"class":567},[562,759,585],{"class":567},[562,761,762],{"class":608},"currentAnimation",[562,764,731],{"class":567},[562,766,768],{"class":767,"line":557},[564,598],[562,769,770],{"class":567},"      />\n",[562,772,774,777,779],{"class":564,"line":773},15,[562,775,776],{"class":567},"    \u003C/",[562,778,704],{"class":571},[562,780,594],{"class":567},[562,782,784,787,789],{"class":564,"line":783},16,[562,785,786],{"class":567},"  \u003C/",[562,788,693],{"class":571},[562,790,594],{"class":567},[562,792,794,796,798],{"class":564,"line":793},17,[562,795,665],{"class":567},[562,797,682],{"class":571},[562,799,594],{"class":567},[801,802,803],"prose-warning",{},[480,804,805,807,808,811],{},[518,806,520],{}," loads resources asynchronously, so it must be wrapped in a ",[518,809,810],{},"\u003CSuspense />",".",[544,813,815],{"id":814},"compiling-an-atlas","Compiling an atlas",[480,817,818,819,821],{},"In typical usage, ",[518,820,520],{}," requires both the URL to a texture of compiled sprite images and a JSON atlas containing information about the sprites in the texture.",[534,823,824,830],{},[537,825,826],{},[523,827,829],{"href":728,"rel":828},[527],"example compiled texture",[537,831,832],{},[523,833,835],{"href":744,"rel":834},[527],"example JSON atlas",[480,837,838,839,844],{},"Compiling source images into a texture atlas is usually handled by third-party software. You may find ",[523,840,843],{"href":841,"rel":842},"https://www.codeandweb.com/texturepacker",[527],"TexturePacker"," useful.",[544,846,848],{"id":847},"without-an-atlas","Without an atlas",[480,850,851,852,855],{},"There may be cases where you don't want to supply an atlas to the ",[518,853,854],{},"atlas"," prop. To do so:",[534,857,858,861,864,867],{},[537,859,860],{},"Compile your source images into a single image texture.",[537,862,863],{},"Space each sprite into equally sized columns and rows in the compiled image texture.",[537,865,866],{},"Ensure no extra padding has been added to the compiled image texture.",[537,868,869,870,872,873,811],{},"Set the ",[518,871,854],{}," prop to number of columns, number of rows as ",[518,874,875],{},"[number, number]",[544,877,879],{"id":878},"spritesheets-in-the-wild","Spritesheets in the wild",[801,881,882],{},[480,883,884,885,887],{},"In the wild, spritesheets are often distributed without atlases and the images are often compiled by hand. It can be difficult or impossible to use these resources directly with ",[518,886,520],{},". In many cases, it's advisable to recompile the spritesheet.",[889,890,892],"h3",{"id":891},"how-to-recompile-an-existing-spritesheet-image","How to recompile an existing spritesheet image",[534,894,895,898,901,904,917],{},[537,896,897],{},"Cut individual sprites from the spritesheet and paste them into separate layers in an image editing application, e.g., GIMP.",[537,899,900],{},"Align the layers for animation. Toggling layer visibility on/off will show you how the animation will display, frame to frame.",[537,902,903],{},"Export layers as individual images.",[537,905,906,907,910,913,914,916],{},"Name the individual images according to the following pattern: ",[908,909],"br",{},[518,911,912],{},"[animation name][frame number].[extension]"," ",[908,915],{},"E.g., walk000.png, walk001.png, idle000.png, idle001.png",[537,918,919],{},"Compile individual images into an image texture and atlas using a texture packing application, like TexturePacker.",[544,921,923],{"id":922},"props","Props",[925,926,927,944],"table",{},[928,929,930],"thead",{},[931,932,933,938,941],"tr",{},[934,935,937],"th",{"align":936},"left","Name",[934,939,940],{"align":936},"Description",[934,942,943],{"align":936},"Default",[945,946,947,961,1001,1061,1076,1092,1116,1131,1145,1159,1173,1192,1216,1236,1255],"tbody",{},[931,948,949,953,959],{},[950,951,952],"td",{"align":936},"image",[950,954,955,958],{"align":936},[518,956,957],{},"string"," – URL of the image texture or an image dataURL. This prop is not reactive.",[950,960],{"align":936},[931,962,963,965,999],{},[950,964,854],{"align":936},[950,966,967,970,971,996,998],{"align":936},[518,968,969],{},"string | Atlasish"," – ",[534,972,973,979,985,990],{},[537,974,975,976,978],{},"If ",[518,977,957],{},", the URL of the JSON atlas.",[537,980,975,981,984],{},[518,982,983],{},"number",", the number of columns in the texture.",[537,986,975,987,989],{},[518,988,875],{},", the number of columns/rows in the texture.",[537,991,975,992,995],{},[518,993,994],{},"AtlasData",", the atlas as a JS object.",[908,997],{},"This prop is not reactive.",[950,1000],{"align":936},[931,1002,1003,1006,1059],{},[950,1004,1005],{"align":936},"definitions",[950,1007,1008,1011,1012,1014,1015,1017,1019,1020,1022,1024,1025],{"align":936},[518,1009,1010],{},"Record\u003Cstring, string>"," – Specify playback frame order and repeated frames (delays). ",[518,1013,1005],{}," is a record where keys are atlas animation names and values are strings containing an animation definition.",[908,1016],{},[908,1018],{},"A \"animation definition\" comma-separated string of frame numbers with optional parentheses-surrounded durations.",[908,1021],{},[908,1023],{},"Here is how various definition strings convert to arrays of frames for playback:",[534,1026,1027,1034,1041,1047,1053],{},[537,1028,1029,1030,1033],{},"\"0,2,1\" - ",[562,1031,1032],{},"0,2,1",", i.e., play frame 0, 2, then 1.",[537,1035,1036,1037,1040],{},"\"2(10)\" - ",[562,1038,1039],{},"2,2,2,2,2,2,2,2,2,2",", i.e., play from 2 10 times.",[537,1042,1043,1044],{},"\"1-4\" - ",[562,1045,1046],{},"1,2,3,4",[537,1048,1049,1050],{},"\"10-5(2)\" - ",[562,1051,1052],{},"10,10,9,9,8,8,7,7,6,6,5,5",[537,1054,1055,1056],{},"\"1-4(3),10(2)\" - ",[562,1057,1058],{},"1,1,1,2,2,2,3,3,3,4,4,4,10,10",[950,1060],{"align":936},[931,1062,1063,1066,1071],{},[950,1064,1065],{"align":936},"fps",[950,1067,1068,1070],{"align":936},[518,1069,983],{}," – Desired frames per second of the animation.",[950,1072,1073],{"align":936},[518,1074,1075],{},"30",[931,1077,1078,1081,1087],{},[950,1079,1080],{"align":936},"loop",[950,1082,1083,1086],{"align":936},[518,1084,1085],{},"boolean"," – Whether or not the animation should loop.",[950,1088,1089],{"align":936},[518,1090,1091],{},"true",[931,1093,1094,1096,1111],{},[950,1095,755],{"align":936},[950,1097,1098,1101,1102,1104,1105,1107,1108,1110],{"align":936},[518,1099,1100],{},"string | [number, number] | number"," – If ",[518,1103,957],{},", name of the animation to play. If ",[518,1106,875],{},", start and end frames of the animation. If ",[518,1109,983],{},", frame number to display.",[950,1112,1113],{"align":936},[518,1114,1115],{},"0",[931,1117,1118,1121,1126],{},[950,1119,1120],{"align":936},"paused",[950,1122,1123,1125],{"align":936},[518,1124,1085],{}," – Whether the animation is paused.",[950,1127,1128],{"align":936},[518,1129,1130],{},"false",[931,1132,1133,1136,1141],{},[950,1134,1135],{"align":936},"reversed",[950,1137,1138,1140],{"align":936},[518,1139,1085],{}," – Whether to play the animation in reverse.",[950,1142,1143],{"align":936},[518,1144,1130],{},[931,1146,1147,1150,1155],{},[950,1148,1149],{"align":936},"flipX",[950,1151,1152,1154],{"align":936},[518,1153,1085],{}," – Whether the sprite should be flipped, left to right.",[950,1156,1157],{"align":936},[518,1158,1130],{},[931,1160,1161,1164,1169],{},[950,1162,1163],{"align":936},"resetOnEnd",[950,1165,1166,1168],{"align":936},[518,1167,1085],{}," – For a non-looping animation, when the animation ends, whether to display the zeroth frame.",[950,1170,1171],{"align":936},[518,1172,1130],{},[931,1174,1175,1178,1188],{},[950,1176,1177],{"align":936},"asSprite",[950,1179,1180,1182,1183],{"align":936},[518,1181,1085],{}," – Whether to display the object as a THREE.Sprite. ",[523,1184,1187],{"href":1185,"rel":1186},"https://threejs.org/docs/?q=sprite#api/en/objects/Sprite",[527],"See THREE.Sprite",[950,1189,1190],{"align":936},[518,1191,1091],{},[931,1193,1194,1197,1211],{},[950,1195,1196],{"align":936},"center",[950,1198,1199,1202,1203,1206,1207,1210],{"align":936},[518,1200,1201],{},"TresVector2"," – Anchor point of the object. A value of ",[562,1204,1205],{},"0.5, 0.5"," corresponds to the center. ",[562,1208,1209],{},"0, 0"," is left, bottom.",[950,1212,1213],{"align":936},[518,1214,1215],{},"[0.5, 0.5]",[931,1217,1218,1221,1231],{},[950,1219,1220],{"align":936},"alphaTest",[950,1222,1223,1225,1226],{"align":936},[518,1224,983],{}," – Alpha test value for the material. ",[523,1227,1230],{"href":1228,"rel":1229},"https://threejs.org/docs/#api/en/materials/Material.alphaTest",[527],"See THREE.Material.alphaTest",[950,1232,1233],{"align":936},[518,1234,1235],{},"0.0",[931,1237,1238,1241,1251],{},[950,1239,1240],{"align":936},"depthTest",[950,1242,1243,1245,1246],{"align":936},[518,1244,1085],{}," – Depth test value for the material. ",[523,1247,1250],{"href":1248,"rel":1249},"https://threejs.org/docs/#api/en/materials/Material.depthTest",[527],"See THREE.Material.depthTest",[950,1252,1253],{"align":936},[518,1254,1091],{},[931,1256,1257,1260,1270],{},[950,1258,1259],{"align":936},"depthWrite",[950,1261,1262,1264,1265],{"align":936},[518,1263,1085],{}," – Depth write value for the material. ",[523,1266,1269],{"href":1267,"rel":1268},"https://threejs.org/docs/#api/en/materials/Material.depthWrite",[527],"See THREE.Material.depthWrite",[950,1271,1272],{"align":936},[518,1273,1091],{},[544,1275,1277],{"id":1276},"events","Events",[925,1279,1280,1292],{},[928,1281,1282],{},[931,1283,1284,1287,1289],{},[934,1285,1286],{},"Event",[934,1288,940],{},[934,1290,1291],{},"Argument",[945,1293,1294,1309,1330],{},[931,1295,1296,1301,1304],{},[950,1297,1298],{},[518,1299,1300],{},"frame",[950,1302,1303],{},"Emitted when the displayed animation frame changes – at most once per tick, frames may be dropped",[950,1305,1306,1308],{},[518,1307,957],{}," – Name of the newly displayed frame",[931,1310,1311,1316,1325],{},[950,1312,1313],{},[518,1314,1315],{},"end",[950,1317,1318,1319,1322,1323],{},"Emitted when the animation ends – ",[518,1320,1321],{},"props.loop"," must be set to ",[518,1324,1130],{},[950,1326,1327,1329],{},[518,1328,957],{}," – Name of the ending frame",[931,1331,1332,1336,1343],{},[950,1333,1334],{},[518,1335,1080],{},[950,1337,1338,1339,1322,1341],{},"Emitted when the animation loops – ",[518,1340,1321],{},[518,1342,1091],{},[950,1344,1345,1347],{},[518,1346,957],{}," – Name of the frame at the end of the loop",[544,1349,1350],{"id":755},"Animation",[480,1352,1353,1354,1357],{},"The ",[518,1355,1356],{},":animation"," prop holds either the name of the currently playing animation or a range of frames to play, or a frame number to display.",[889,1359,1361],{"id":1360},"using-named-animations-as-animation","Using named animations as animation",[480,1363,1364],{},"When individual files are converted to a spritesheet/atlas, typically the original images' filenames will be included in the atlas.",[480,1366,1367,1369],{},[518,1368,520],{}," uses those filenames to automatically group images into animations.",[480,1371,1372],{},"Use either of the following naming conventions for your source images ...",[534,1374,1375,1380],{},[537,1376,1377],{},[518,1378,1379],{},"[animation name][frame number].[file_extension]",[537,1381,1382],{},[518,1383,1384],{},"[animation name]_[frame number].[file_extension]",[480,1386,1387,1388,1390,1391,1394,1395,1397,1398,1400],{},"... then ",[518,1389,520],{}," will automatically make all ",[518,1392,1393],{},"[animation name]"," available for playback. Just pass ",[518,1396,1393],{}," to the component's ",[518,1399,1356],{}," prop.",[889,1402,1404],{"id":1403},"example","Example",[480,1406,1407],{},"For our Cientos heart cartoon character animation, here's how the filenames map to animation names.",[925,1409,1410,1420],{},[928,1411,1412],{},[931,1413,1414,1417],{},[934,1415,1416],{},"Filenames",[934,1418,1419],{},"Animation name",[945,1421,1422,1429,1437],{},[931,1423,1424,1427],{},[950,1425,1426],{},"cientosIdle0000.png, cientosIdle0001.png, ...",[950,1428,654],{},[931,1430,1431,1434],{},[950,1432,1433],{},"cientosIdleToWalkTransition0000.png",[950,1435,1436],{},"cientosIdleToWalkTransition",[931,1438,1439,1442],{},[950,1440,1441],{},"cientosWalk0000.png, cientosWalk0001.png, ...",[950,1443,1444],{},"cientosWalk",[544,1446,1447],{"id":1005},"Definitions",[480,1449,1450,1451,1454,1455,1459],{},"You can supply an object to the ",[518,1452,1453],{},":definitions"," prop. Any ",[523,1456,1458],{"href":1457},"#animation","named animation"," can be a key. The value is a string that specifies frame order and delays.",[889,1461,1463],{"id":1462},"demo","Demo",[480,1465,1466,1467,1469,1470,811],{},"In this demo, the 'idle' animation is comprised of six different images. By default, those images will play sequentially when the ",[518,1468,1356],{}," prop is ",[518,1471,1472],{},"'idle'",[480,1474,1475,1476,1478,1479,1482],{},"But below, we've added a ",[518,1477,1453],{}," prop with this value for the ",[518,1480,1481],{},"idle"," key:",[548,1484,1489],{"className":1485,"code":1487,"language":1488},[1486],"language-text","'0-5, 0(10), 1-2, 3(20), 4-5, 0-5(3)'\n","text",[518,1490,1487],{"__ignoreMap":488},[480,1492,1493],{},"So, instead of playing images 0-5 sequentially, this animation will play instead:",[534,1495,1496,1505,1519],{},[537,1497,1498,1501,1502,1504],{},[518,1499,1500],{},"0-5"," – Play all six images (",[518,1503,1500],{},") of the animation normally.",[537,1506,1507,1510,1511,1514,1515,1518],{},[518,1508,1509],{},"0(10), 1-2, 3(20), 4-5"," – Play all six images again with a delay of ten frames at the bottom of the bounce (",[518,1512,1513],{},"0(10)",") and a delay of twenty frames at the top of the bounce (",[518,1516,1517],{},"3(20)",").",[537,1520,1521,1524],{},[518,1522,1523],{},"0-5(3)"," – Finally, play all six images of the animation with a delay of three frames each.",[544,1526,1527],{"id":1196},"Center",[480,1529,1530,1531,1534],{},"In addition to being the sprite's anchor point, the ",[518,1532,1533],{},":center"," prop also controls how differently sized source images will \"grow\" and \"shrink\". Namely, they \"grow out from\" and \"shrink towards\" the center.",[1536,1537,1538],"style",{},"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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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);}",{"title":488,"searchDepth":489,"depth":490,"links":1540},[1541,1542,1543,1544,1547,1548,1549,1553,1556],{"id":546,"depth":490,"text":15},{"id":814,"depth":490,"text":815},{"id":847,"depth":490,"text":848},{"id":878,"depth":490,"text":879,"children":1545},[1546],{"id":891,"depth":627,"text":892},{"id":922,"depth":490,"text":923},{"id":1276,"depth":490,"text":1277},{"id":755,"depth":490,"text":1350,"children":1550},[1551,1552],{"id":1360,"depth":627,"text":1361},{"id":1403,"depth":627,"text":1404},{"id":1005,"depth":490,"text":1447,"children":1554},[1555],{"id":1462,"depth":627,"text":1463},{"id":1196,"depth":490,"text":1527},{},{"title":401,"description":503},"TOx2TSEHnQeUR_DoVqP-W-cCHOVI1DisvWaE29LwWYA",{"id":1561,"title":405,"body":1562,"description":2048,"extension":493,"links":494,"meta":2049,"navigation":496,"path":406,"seo":2050,"stem":407,"__hash__":2051},"docs/2.api/9.objects/cube-camera.md",{"type":477,"value":1563,"toc":2044},[1564,1569,1579,1584,1586,1937,1939,2041],[510,1565,1566],{},[1567,1568],"objects-cube-camera",{},[480,1570,1571,1574,1575,1578],{},[518,1572,1573],{},"\u003CCubeCamera />"," creates a ",[518,1576,1577],{},"THREE.CubeCamera"," and uses it to render an environment map of your scene. The environment map is then applied to component's children.",[480,1580,1581,1583],{},[518,1582,1573],{}," makes its children invisible while rendering to the internal buffer so that they are not included in the reflection.",[544,1585,15],{"id":546},[548,1587,1590],{"className":550,"code":1588,"highlights":1589,"language":558,"meta":488,"style":488},"\u003Cscript setup lang=\"ts\">\nimport { CubeCamera, OrbitControls } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 2, 5]\" />\n    \u003COrbitControls />\n\n    \u003CCubeCamera :resolution=\"256\" :frames=\"Infinity\">\n      \u003CTresMesh>\n        \u003CTresSphereGeometry :args=\"[1, 32, 32]\" />\n        \u003CTresMeshStandardMaterial :metalness=\"1\" :roughness=\"0\" />\n      \u003C/TresMesh>\n    \u003C/CubeCamera>\n\n    \u003CTresAmbientLight :intensity=\"0.5\" />\n    \u003CTresDirectionalLight :position=\"[0, 2, 4]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n",[490,553,773],[518,1591,1592,1612,1638,1646,1650,1658,1666,1708,1717,1721,1758,1767,1804,1839,1848,1857,1861,1884,1919,1928],{"__ignoreMap":488},[562,1593,1594,1596,1598,1600,1602,1604,1606,1608,1610],{"class":564,"line":489},[562,1595,568],{"class":567},[562,1597,572],{"class":571},[562,1599,576],{"class":575},[562,1601,579],{"class":575},[562,1603,582],{"class":567},[562,1605,585],{"class":567},[562,1607,589],{"class":588},[562,1609,585],{"class":567},[562,1611,594],{"class":567},[562,1613,1615,1617,1619,1622,1625,1628,1630,1632,1634,1636],{"class":1614,"line":490},[564,598],[562,1616,602],{"class":601},[562,1618,605],{"class":567},[562,1620,1621],{"class":608}," CubeCamera",[562,1623,1624],{"class":567},",",[562,1626,1627],{"class":608}," OrbitControls",[562,1629,612],{"class":567},[562,1631,615],{"class":601},[562,1633,618],{"class":567},[562,1635,621],{"class":588},[562,1637,624],{"class":567},[562,1639,1640,1642,1644],{"class":564,"line":627},[562,1641,665],{"class":567},[562,1643,572],{"class":571},[562,1645,594],{"class":567},[562,1647,1648],{"class":564,"line":633},[562,1649,630],{"emptyLinePlaceholder":496},[562,1651,1652,1654,1656],{"class":564,"line":662},[562,1653,568],{"class":567},[562,1655,682],{"class":571},[562,1657,594],{"class":567},[562,1659,1660,1662,1664],{"class":564,"line":672},[562,1661,690],{"class":567},[562,1663,693],{"class":571},[562,1665,594],{"class":567},[562,1667,1668,1670,1673,1676,1679,1681,1683,1686,1689,1692,1695,1697,1700,1703,1705],{"class":564,"line":677},[562,1669,701],{"class":567},[562,1671,1672],{"class":571},"TresPerspectiveCamera",[562,1674,1675],{"class":567}," :",[562,1677,1678],{"class":575},"position",[562,1680,582],{"class":567},[562,1682,585],{"class":567},[562,1684,1685],{"class":567},"[",[562,1687,1115],{"class":1688},"sbssI",[562,1690,1691],{"class":567},", ",[562,1693,1694],{"class":1688},"2",[562,1696,1691],{"class":567},[562,1698,1699],{"class":1688},"5",[562,1701,1702],{"class":567},"]",[562,1704,585],{"class":567},[562,1706,1707],{"class":567}," />\n",[562,1709,1710,1712,1715],{"class":564,"line":687},[562,1711,701],{"class":567},[562,1713,1714],{"class":571},"OrbitControls",[562,1716,1707],{"class":567},[562,1718,1719],{"class":564,"line":698},[562,1720,630],{"emptyLinePlaceholder":496},[562,1722,1724,1726,1728,1730,1733,1735,1737,1740,1742,1744,1747,1749,1751,1754,1756],{"class":1723,"line":553},[564,598],[562,1725,701],{"class":567},[562,1727,405],{"class":571},[562,1729,1675],{"class":567},[562,1731,1732],{"class":575},"resolution",[562,1734,582],{"class":567},[562,1736,585],{"class":567},[562,1738,1739],{"class":1688},"256",[562,1741,585],{"class":567},[562,1743,1675],{"class":567},[562,1745,1746],{"class":575},"frames",[562,1748,582],{"class":567},[562,1750,585],{"class":567},[562,1752,1753],{"class":567},"Infinity",[562,1755,585],{"class":567},[562,1757,594],{"class":567},[562,1759,1760,1762,1765],{"class":564,"line":554},[562,1761,712],{"class":567},[562,1763,1764],{"class":571},"TresMesh",[562,1766,594],{"class":567},[562,1768,1769,1772,1775,1777,1780,1782,1784,1786,1789,1791,1794,1796,1798,1800,1802],{"class":564,"line":555},[562,1770,1771],{"class":567},"        \u003C",[562,1773,1774],{"class":571},"TresSphereGeometry",[562,1776,1675],{"class":567},[562,1778,1779],{"class":575},"args",[562,1781,582],{"class":567},[562,1783,585],{"class":567},[562,1785,1685],{"class":567},[562,1787,1788],{"class":1688},"1",[562,1790,1691],{"class":567},[562,1792,1793],{"class":1688},"32",[562,1795,1691],{"class":567},[562,1797,1793],{"class":1688},[562,1799,1702],{"class":567},[562,1801,585],{"class":567},[562,1803,1707],{"class":567},[562,1805,1806,1808,1811,1813,1816,1818,1820,1822,1824,1826,1829,1831,1833,1835,1837],{"class":564,"line":556},[562,1807,1771],{"class":567},[562,1809,1810],{"class":571},"TresMeshStandardMaterial",[562,1812,1675],{"class":567},[562,1814,1815],{"class":575},"metalness",[562,1817,582],{"class":567},[562,1819,585],{"class":567},[562,1821,1788],{"class":1688},[562,1823,585],{"class":567},[562,1825,1675],{"class":567},[562,1827,1828],{"class":575},"roughness",[562,1830,582],{"class":567},[562,1832,585],{"class":567},[562,1834,1115],{"class":1688},[562,1836,585],{"class":567},[562,1838,1707],{"class":567},[562,1840,1841,1844,1846],{"class":564,"line":557},[562,1842,1843],{"class":567},"      \u003C/",[562,1845,1764],{"class":571},[562,1847,594],{"class":567},[562,1849,1851,1853,1855],{"class":1850,"line":773},[564,598],[562,1852,776],{"class":567},[562,1854,405],{"class":571},[562,1856,594],{"class":567},[562,1858,1859],{"class":564,"line":783},[562,1860,630],{"emptyLinePlaceholder":496},[562,1862,1863,1865,1868,1870,1873,1875,1877,1880,1882],{"class":564,"line":793},[562,1864,701],{"class":567},[562,1866,1867],{"class":571},"TresAmbientLight",[562,1869,1675],{"class":567},[562,1871,1872],{"class":575},"intensity",[562,1874,582],{"class":567},[562,1876,585],{"class":567},[562,1878,1879],{"class":1688},"0.5",[562,1881,585],{"class":567},[562,1883,1707],{"class":567},[562,1885,1887,1889,1892,1894,1896,1898,1900,1902,1904,1906,1908,1910,1913,1915,1917],{"class":564,"line":1886},18,[562,1888,701],{"class":567},[562,1890,1891],{"class":571},"TresDirectionalLight",[562,1893,1675],{"class":567},[562,1895,1678],{"class":575},[562,1897,582],{"class":567},[562,1899,585],{"class":567},[562,1901,1685],{"class":567},[562,1903,1115],{"class":1688},[562,1905,1691],{"class":567},[562,1907,1694],{"class":1688},[562,1909,1691],{"class":567},[562,1911,1912],{"class":1688},"4",[562,1914,1702],{"class":567},[562,1916,585],{"class":567},[562,1918,1707],{"class":567},[562,1920,1922,1924,1926],{"class":564,"line":1921},19,[562,1923,786],{"class":567},[562,1925,693],{"class":571},[562,1927,594],{"class":567},[562,1929,1931,1933,1935],{"class":564,"line":1930},20,[562,1932,665],{"class":567},[562,1934,682],{"class":571},[562,1936,594],{"class":567},[544,1938,923],{"id":922},[925,1940,1941,1952],{},[928,1942,1943],{},[931,1944,1945,1948,1950],{},[934,1946,1947],{"align":936},"Prop",[934,1949,940],{"align":936},[934,1951,943],{},[945,1953,1954,1973,1987,2002,2017,2029],{},[931,1955,1956,1960,1969],{},[950,1957,1958],{"align":936},[518,1959,1746],{},[950,1961,1962,1963,1965,1966,1968],{"align":936},"Number of frames to render. Set to ",[518,1964,1788],{}," for a static scene. ",[518,1967,1753],{}," to update continuously.",[950,1970,1971],{},[518,1972,1753],{},[931,1974,1975,1979,1982],{},[950,1976,1977],{"align":936},[518,1978,1732],{},[950,1980,1981],{"align":936},"Resolution of the FBO",[950,1983,1984],{},[518,1985,1986],{},"255",[931,1988,1989,1994,1997],{},[950,1990,1991],{"align":936},[518,1992,1993],{},"near",[950,1995,1996],{"align":936},"Camera near",[950,1998,1999],{},[518,2000,2001],{},"0.1",[931,2003,2004,2009,2012],{},[950,2005,2006],{"align":936},[518,2007,2008],{},"far",[950,2010,2011],{"align":936},"Camera far",[950,2013,2014],{},[518,2015,2016],{},"1000",[931,2018,2019,2024,2027],{},[950,2020,2021],{"align":936},[518,2022,2023],{},"envMap",[950,2025,2026],{"align":936},"Custom environment map that is temporarily set as the scene's background",[950,2028],{},[931,2030,2031,2036,2039],{},[950,2032,2033],{"align":936},[518,2034,2035],{},"fog",[950,2037,2038],{"align":936},"Custom fog that is temporarily set as the scene's fog",[950,2040],{},[1536,2042,2043],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .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);}",{"title":488,"searchDepth":489,"depth":490,"links":2045},[2046,2047],{"id":546,"depth":490,"text":15},{"id":922,"depth":490,"text":923},"Render environment maps for reflective objects.",{},{"title":405,"description":2048},"guPReQbllwq5wU5oLp9_7X7yFZih0xBoLQvebR42uzE",{"id":2053,"title":409,"body":2054,"description":3361,"extension":493,"links":494,"meta":3362,"navigation":496,"path":410,"seo":3363,"stem":411,"__hash__":3364},"docs/2.api/9.objects/fbo.md",{"type":477,"value":2055,"toc":3353},[2056,2062,2065,2072,2074,2851,2853,2971,2975,2977,2983,2990,2993,3262,3266,3350],[2057,2058,2059],"scene-wrapper",{},[2060,2061],"objects-fbo",{},[480,2063,2064],{},"An FBO (or Frame Buffer Object) is generally used to render to a texture. This is useful for post-processing effects like blurring, or for rendering to a texture that will be used as a texture in a later draw call.",[480,2066,2067,2068,2071],{},"Cientos provides an ",[518,2069,2070],{},"\u003CFbo />"," component make it easy to use FBOs in your application.",[544,2073,15],{"id":546},[548,2075,2082],{"className":550,"code":2076,"highlights":2077,"language":558,"meta":488,"style":488},"\u003Cscript setup lang=\"ts\">\nimport { Fbo, OrbitControls } from '@tresjs/cientos'\nimport type { TresObject } from '@tresjs/core'\nimport { TresCanvas } from '@tresjs/core'\nimport { shallowRef } from 'vue'\n\nconst fboRef = shallowRef\u003CInstanceType\u003Ctypeof Fbo> | null>(null)\nconst torusRef = shallowRef\u003CTresObject | null>(null)\n\nfunction onLoop({ elapsed }: { elapsed: number }) {\n  if (!torusRef.value) { return }\n  torusRef.value.rotation.x = elapsed * 0.745\n  torusRef.value.rotation.y = elapsed * 0.361\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas :clear-color=\"0x222\" @loop=\"onLoop\">\n    \u003CTresPerspectiveCamera :position=\"[0, 0.5, 5]\" />\n    \u003COrbitControls />\n\n    \u003CTresGridHelper :args=\"[10, 10]\" />\n    \u003CFbo\n      ref=\"fboRef\"\n      :depth=\"false\"\n      :settings=\"{ samples: 1 }\"\n    />\n    \u003CTresMesh>\n      \u003CTresBoxGeometry :args=\"[1, 1, 1]\" />\n\n      \u003CTresMeshBasicMaterial\n        :color=\"0xFFFFFF\"\n        :map=\"fboRef?.instance?.texture ?? null\"\n      />\n    \u003C/TresMesh>\n\n    \u003CTresMesh\n      ref=\"torusRef\"\n      :position=\"[3, 0, 0]\"\n    >\n      \u003CTresTorusGeometry :args=\"[1, 0.5, 16, 100]\" />\n      \u003CTresMeshNormalMaterial />\n    \u003C/TresMesh>\n  \u003C/TresCanvas>\n\u003C/template>\n",[490,2078,2079,2080,2081],23,24,25,26,[518,2083,2084,2104,2128,2151,2170,2189,2193,2233,2261,2265,2299,2330,2360,2386,2391,2399,2403,2411,2447,2479,2487,2492,2523,2531,2546,2564,2591,2597,2606,2640,2645,2653,2670,2700,2705,2714,2719,2727,2740,2768,2774,2814,2824,2833,2842],{"__ignoreMap":488},[562,2085,2086,2088,2090,2092,2094,2096,2098,2100,2102],{"class":564,"line":489},[562,2087,568],{"class":567},[562,2089,572],{"class":571},[562,2091,576],{"class":575},[562,2093,579],{"class":575},[562,2095,582],{"class":567},[562,2097,585],{"class":567},[562,2099,589],{"class":588},[562,2101,585],{"class":567},[562,2103,594],{"class":567},[562,2105,2107,2109,2111,2114,2116,2118,2120,2122,2124,2126],{"class":2106,"line":490},[564,598],[562,2108,602],{"class":601},[562,2110,605],{"class":567},[562,2112,2113],{"class":608}," Fbo",[562,2115,1624],{"class":567},[562,2117,1627],{"class":608},[562,2119,612],{"class":567},[562,2121,615],{"class":601},[562,2123,618],{"class":567},[562,2125,621],{"class":588},[562,2127,624],{"class":567},[562,2129,2130,2132,2135,2137,2140,2142,2144,2146,2149],{"class":564,"line":627},[562,2131,602],{"class":601},[562,2133,2134],{"class":601}," type",[562,2136,605],{"class":567},[562,2138,2139],{"class":608}," TresObject",[562,2141,612],{"class":567},[562,2143,615],{"class":601},[562,2145,618],{"class":567},[562,2147,2148],{"class":588},"@tresjs/core",[562,2150,624],{"class":567},[562,2152,2153,2155,2157,2160,2162,2164,2166,2168],{"class":564,"line":633},[562,2154,602],{"class":601},[562,2156,605],{"class":567},[562,2158,2159],{"class":608}," TresCanvas",[562,2161,612],{"class":567},[562,2163,615],{"class":601},[562,2165,618],{"class":567},[562,2167,2148],{"class":588},[562,2169,624],{"class":567},[562,2171,2172,2174,2176,2179,2181,2183,2185,2187],{"class":564,"line":662},[562,2173,602],{"class":601},[562,2175,605],{"class":567},[562,2177,2178],{"class":608}," shallowRef",[562,2180,612],{"class":567},[562,2182,615],{"class":601},[562,2184,618],{"class":567},[562,2186,558],{"class":588},[562,2188,624],{"class":567},[562,2190,2191],{"class":564,"line":672},[562,2192,630],{"emptyLinePlaceholder":496},[562,2194,2195,2197,2200,2202,2204,2206,2210,2213,2215,2218,2221,2224,2226,2228,2231],{"class":564,"line":677},[562,2196,636],{"class":575},[562,2198,2199],{"class":608}," fboRef ",[562,2201,582],{"class":567},[562,2203,2178],{"class":644},[562,2205,568],{"class":567},[562,2207,2209],{"class":2208},"sBMFI","InstanceType",[562,2211,2212],{"class":567},"\u003Ctypeof",[562,2214,2113],{"class":608},[562,2216,2217],{"class":567},">",[562,2219,2220],{"class":567}," |",[562,2222,2223],{"class":2208}," null",[562,2225,2217],{"class":567},[562,2227,648],{"class":608},[562,2229,2230],{"class":567},"null",[562,2232,659],{"class":608},[562,2234,2235,2237,2240,2242,2244,2246,2249,2251,2253,2255,2257,2259],{"class":564,"line":687},[562,2236,636],{"class":575},[562,2238,2239],{"class":608}," torusRef ",[562,2241,582],{"class":567},[562,2243,2178],{"class":644},[562,2245,568],{"class":567},[562,2247,2248],{"class":2208},"TresObject",[562,2250,2220],{"class":567},[562,2252,2223],{"class":2208},[562,2254,2217],{"class":567},[562,2256,648],{"class":608},[562,2258,2230],{"class":567},[562,2260,659],{"class":608},[562,2262,2263],{"class":564,"line":698},[562,2264,630],{"emptyLinePlaceholder":496},[562,2266,2267,2270,2273,2276,2280,2283,2285,2287,2290,2293,2296],{"class":564,"line":553},[562,2268,2269],{"class":575},"function",[562,2271,2272],{"class":644}," onLoop",[562,2274,2275],{"class":567},"({",[562,2277,2279],{"class":2278},"sHdIc"," elapsed",[562,2281,2282],{"class":567}," }:",[562,2284,605],{"class":567},[562,2286,2279],{"class":571},[562,2288,2289],{"class":567},":",[562,2291,2292],{"class":2208}," number",[562,2294,2295],{"class":567}," })",[562,2297,2298],{"class":567}," {\n",[562,2300,2301,2304,2307,2310,2313,2315,2318,2321,2324,2327],{"class":564,"line":554},[562,2302,2303],{"class":601},"  if",[562,2305,2306],{"class":571}," (",[562,2308,2309],{"class":567},"!",[562,2311,2312],{"class":608},"torusRef",[562,2314,811],{"class":567},[562,2316,2317],{"class":608},"value",[562,2319,2320],{"class":571},") ",[562,2322,2323],{"class":567},"{",[562,2325,2326],{"class":601}," return",[562,2328,2329],{"class":567}," }\n",[562,2331,2332,2335,2337,2339,2341,2344,2346,2349,2352,2354,2357],{"class":564,"line":555},[562,2333,2334],{"class":608},"  torusRef",[562,2336,811],{"class":567},[562,2338,2317],{"class":608},[562,2340,811],{"class":567},[562,2342,2343],{"class":608},"rotation",[562,2345,811],{"class":567},[562,2347,2348],{"class":608},"x",[562,2350,2351],{"class":567}," =",[562,2353,2279],{"class":608},[562,2355,2356],{"class":567}," *",[562,2358,2359],{"class":1688}," 0.745\n",[562,2361,2362,2364,2366,2368,2370,2372,2374,2377,2379,2381,2383],{"class":564,"line":556},[562,2363,2334],{"class":608},[562,2365,811],{"class":567},[562,2367,2317],{"class":608},[562,2369,811],{"class":567},[562,2371,2343],{"class":608},[562,2373,811],{"class":567},[562,2375,2376],{"class":608},"y",[562,2378,2351],{"class":567},[562,2380,2279],{"class":608},[562,2382,2356],{"class":567},[562,2384,2385],{"class":1688}," 0.361\n",[562,2387,2388],{"class":564,"line":557},[562,2389,2390],{"class":567},"}\n",[562,2392,2393,2395,2397],{"class":564,"line":773},[562,2394,665],{"class":567},[562,2396,572],{"class":571},[562,2398,594],{"class":567},[562,2400,2401],{"class":564,"line":783},[562,2402,630],{"emptyLinePlaceholder":496},[562,2404,2405,2407,2409],{"class":564,"line":793},[562,2406,568],{"class":567},[562,2408,682],{"class":571},[562,2410,594],{"class":567},[562,2412,2413,2415,2417,2419,2422,2424,2426,2429,2431,2434,2436,2438,2440,2443,2445],{"class":564,"line":1886},[562,2414,690],{"class":567},[562,2416,693],{"class":571},[562,2418,1675],{"class":567},[562,2420,2421],{"class":575},"clear-color",[562,2423,582],{"class":567},[562,2425,585],{"class":567},[562,2427,2428],{"class":1688},"0x222",[562,2430,585],{"class":567},[562,2432,2433],{"class":567}," @",[562,2435,1080],{"class":575},[562,2437,582],{"class":567},[562,2439,585],{"class":567},[562,2441,2442],{"class":608},"onLoop",[562,2444,585],{"class":567},[562,2446,594],{"class":567},[562,2448,2449,2451,2453,2455,2457,2459,2461,2463,2465,2467,2469,2471,2473,2475,2477],{"class":564,"line":1921},[562,2450,701],{"class":567},[562,2452,1672],{"class":571},[562,2454,1675],{"class":567},[562,2456,1678],{"class":575},[562,2458,582],{"class":567},[562,2460,585],{"class":567},[562,2462,1685],{"class":567},[562,2464,1115],{"class":1688},[562,2466,1691],{"class":567},[562,2468,1879],{"class":1688},[562,2470,1691],{"class":567},[562,2472,1699],{"class":1688},[562,2474,1702],{"class":567},[562,2476,585],{"class":567},[562,2478,1707],{"class":567},[562,2480,2481,2483,2485],{"class":564,"line":1930},[562,2482,701],{"class":567},[562,2484,1714],{"class":571},[562,2486,1707],{"class":567},[562,2488,2490],{"class":564,"line":2489},21,[562,2491,630],{"emptyLinePlaceholder":496},[562,2493,2495,2497,2500,2502,2504,2506,2508,2510,2513,2515,2517,2519,2521],{"class":564,"line":2494},22,[562,2496,701],{"class":567},[562,2498,2499],{"class":571},"TresGridHelper",[562,2501,1675],{"class":567},[562,2503,1779],{"class":575},[562,2505,582],{"class":567},[562,2507,585],{"class":567},[562,2509,1685],{"class":567},[562,2511,2512],{"class":1688},"10",[562,2514,1691],{"class":567},[562,2516,2512],{"class":1688},[562,2518,1702],{"class":567},[562,2520,585],{"class":567},[562,2522,1707],{"class":567},[562,2524,2526,2528],{"class":2525,"line":2078},[564,598],[562,2527,701],{"class":567},[562,2529,2530],{"class":571},"Fbo\n",[562,2532,2534,2537,2539,2541,2544],{"class":2533,"line":2079},[564,598],[562,2535,2536],{"class":575},"      ref",[562,2538,582],{"class":567},[562,2540,585],{"class":567},[562,2542,2543],{"class":588},"fboRef",[562,2545,731],{"class":567},[562,2547,2549,2552,2555,2557,2559,2562],{"class":2548,"line":2080},[564,598],[562,2550,2551],{"class":567},"      :",[562,2553,2554],{"class":575},"depth",[562,2556,582],{"class":567},[562,2558,585],{"class":567},[562,2560,1130],{"class":2561},"sfNiH",[562,2563,731],{"class":567},[562,2565,2567,2569,2572,2574,2576,2579,2582,2585,2587,2589],{"class":2566,"line":2081},[564,598],[562,2568,2551],{"class":567},[562,2570,2571],{"class":575},"settings",[562,2573,582],{"class":567},[562,2575,585],{"class":567},[562,2577,2578],{"class":567},"{ ",[562,2580,2581],{"class":571},"samples",[562,2583,2584],{"class":567},": ",[562,2586,1788],{"class":1688},[562,2588,612],{"class":567},[562,2590,731],{"class":567},[562,2592,2594],{"class":564,"line":2593},27,[562,2595,2596],{"class":567},"    />\n",[562,2598,2600,2602,2604],{"class":564,"line":2599},28,[562,2601,701],{"class":567},[562,2603,1764],{"class":571},[562,2605,594],{"class":567},[562,2607,2609,2611,2614,2616,2618,2620,2622,2624,2626,2628,2630,2632,2634,2636,2638],{"class":564,"line":2608},29,[562,2610,712],{"class":567},[562,2612,2613],{"class":571},"TresBoxGeometry",[562,2615,1675],{"class":567},[562,2617,1779],{"class":575},[562,2619,582],{"class":567},[562,2621,585],{"class":567},[562,2623,1685],{"class":567},[562,2625,1788],{"class":1688},[562,2627,1691],{"class":567},[562,2629,1788],{"class":1688},[562,2631,1691],{"class":567},[562,2633,1788],{"class":1688},[562,2635,1702],{"class":567},[562,2637,585],{"class":567},[562,2639,1707],{"class":567},[562,2641,2643],{"class":564,"line":2642},30,[562,2644,630],{"emptyLinePlaceholder":496},[562,2646,2648,2650],{"class":564,"line":2647},31,[562,2649,712],{"class":567},[562,2651,2652],{"class":571},"TresMeshBasicMaterial\n",[562,2654,2656,2658,2661,2663,2665,2668],{"class":564,"line":2655},32,[562,2657,752],{"class":567},[562,2659,2660],{"class":575},"color",[562,2662,582],{"class":567},[562,2664,585],{"class":567},[562,2666,2667],{"class":1688},"0xFFFFFF",[562,2669,731],{"class":567},[562,2671,2673,2675,2678,2680,2682,2684,2687,2690,2692,2695,2698],{"class":564,"line":2672},33,[562,2674,752],{"class":567},[562,2676,2677],{"class":575},"map",[562,2679,582],{"class":567},[562,2681,585],{"class":567},[562,2683,2543],{"class":608},[562,2685,2686],{"class":567},"?.",[562,2688,2689],{"class":608},"instance",[562,2691,2686],{"class":567},[562,2693,2694],{"class":608},"texture",[562,2696,2697],{"class":567}," ?? null",[562,2699,731],{"class":567},[562,2701,2703],{"class":564,"line":2702},34,[562,2704,770],{"class":567},[562,2706,2708,2710,2712],{"class":564,"line":2707},35,[562,2709,776],{"class":567},[562,2711,1764],{"class":571},[562,2713,594],{"class":567},[562,2715,2717],{"class":564,"line":2716},36,[562,2718,630],{"emptyLinePlaceholder":496},[562,2720,2722,2724],{"class":564,"line":2721},37,[562,2723,701],{"class":567},[562,2725,2726],{"class":571},"TresMesh\n",[562,2728,2730,2732,2734,2736,2738],{"class":564,"line":2729},38,[562,2731,2536],{"class":575},[562,2733,582],{"class":567},[562,2735,585],{"class":567},[562,2737,2312],{"class":588},[562,2739,731],{"class":567},[562,2741,2743,2745,2747,2749,2751,2753,2756,2758,2760,2762,2764,2766],{"class":564,"line":2742},39,[562,2744,2551],{"class":567},[562,2746,1678],{"class":575},[562,2748,582],{"class":567},[562,2750,585],{"class":567},[562,2752,1685],{"class":567},[562,2754,2755],{"class":1688},"3",[562,2757,1691],{"class":567},[562,2759,1115],{"class":1688},[562,2761,1691],{"class":567},[562,2763,1115],{"class":1688},[562,2765,1702],{"class":567},[562,2767,731],{"class":567},[562,2769,2771],{"class":564,"line":2770},40,[562,2772,2773],{"class":567},"    >\n",[562,2775,2777,2779,2782,2784,2786,2788,2790,2792,2794,2796,2798,2800,2803,2805,2808,2810,2812],{"class":564,"line":2776},41,[562,2778,712],{"class":567},[562,2780,2781],{"class":571},"TresTorusGeometry",[562,2783,1675],{"class":567},[562,2785,1779],{"class":575},[562,2787,582],{"class":567},[562,2789,585],{"class":567},[562,2791,1685],{"class":567},[562,2793,1788],{"class":1688},[562,2795,1691],{"class":567},[562,2797,1879],{"class":1688},[562,2799,1691],{"class":567},[562,2801,2802],{"class":1688},"16",[562,2804,1691],{"class":567},[562,2806,2807],{"class":1688},"100",[562,2809,1702],{"class":567},[562,2811,585],{"class":567},[562,2813,1707],{"class":567},[562,2815,2817,2819,2822],{"class":564,"line":2816},42,[562,2818,712],{"class":567},[562,2820,2821],{"class":571},"TresMeshNormalMaterial",[562,2823,1707],{"class":567},[562,2825,2827,2829,2831],{"class":564,"line":2826},43,[562,2828,776],{"class":567},[562,2830,1764],{"class":571},[562,2832,594],{"class":567},[562,2834,2836,2838,2840],{"class":564,"line":2835},44,[562,2837,786],{"class":567},[562,2839,693],{"class":571},[562,2841,594],{"class":567},[562,2843,2845,2847,2849],{"class":564,"line":2844},45,[562,2846,665],{"class":567},[562,2848,682],{"class":571},[562,2850,594],{"class":567},[544,2852,923],{"id":922},[925,2854,2855,2865],{},[928,2856,2857],{},[931,2858,2859,2861,2863],{},[934,2860,1947],{"align":936},[934,2862,940],{"align":936},[934,2864,943],{},[945,2866,2867,2885,2902,2926,2953],{},[931,2868,2869,2877,2882],{},[950,2870,2871],{"align":936},[2872,2873,2874],"strong",{},[518,2875,2876],{},"width",[950,2878,2879,2881],{"align":936},[518,2880,983],{}," - The width of the FBO.",[950,2883,2884],{},"Width of the canvas",[931,2886,2887,2894,2899],{},[950,2888,2889],{"align":936},[2872,2890,2891],{},[518,2892,2893],{},"height",[950,2895,2896,2898],{"align":936},[518,2897,983],{}," - the height of the FBO",[950,2900,2901],{},"Height of the canvas",[931,2903,2904,2910,2922],{},[950,2905,2906],{"align":936},[2872,2907,2908],{},[518,2909,2554],{},[950,2911,2912,2914,2915,811],{"align":936},[518,2913,1085],{}," - Whether or not the FBO should render the depth to a ",[523,2916,2919],{"href":2917,"rel":2918},"https://threejs.org/docs/?q=webglre#api/en/renderers/WebGLRenderTarget.depthTexture",[527],[518,2920,2921],{},"depthTexture",[950,2923,2924],{},[518,2925,1130],{},[931,2927,2928,2934,2948],{},[950,2929,2930],{"align":936},[2872,2931,2932],{},[518,2933,2571],{},[950,2935,2936,2939,2940],{"align":936},[518,2937,2938],{},"WebGLRenderTargetOptions"," - Every other configuration property for the ",[523,2941,2944,2947],{"href":2942,"rel":2943},"https://threejs.org/docs/#api/en/renderers/WebGLRenderTarget",[527],[518,2945,2946],{},"WebGLRenderTarget"," class",[950,2949,2950],{},[518,2951,2952],{},"{}",[931,2954,2955,2962,2967],{},[950,2956,2957],{"align":936},[2872,2958,2959],{},[518,2960,2961],{},"autoRender",[950,2963,2964,2966],{"align":936},[518,2965,1085],{}," - Whether to automatically render the FBO on the default scene.",[950,2968,2969],{},[518,2970,1091],{},[544,2972,2974],{"id":2973},"usefbo","useFBO",[480,2976,2064],{},[480,2978,2979,2980,2982],{},"Cientos provides a ",[518,2981,2974],{}," composable to make it easy to use FBOs in your application.",[801,2984,2985],{},[480,2986,1353,2987,2989],{},[518,2988,2974],{}," composable must be used inside of a child component since it needs the context of TresCanvas.",[889,2991,15],{"id":2992},"usage-1",[548,2994,2997],{"className":550,"code":2995,"highlights":2996,"language":558,"meta":488,"style":488},"\u003Cscript setup lang=\"ts\">\nimport { useFBO } from '@tresjs/cientos'\n\nconst fboTarget = useFBO({\n  depth: true,\n  width: 512,\n  height: 512,\n  settings: {\n    samples: 1,\n  },\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresMesh>\n    \u003CTresBoxGeometry :args=\"[1, 1, 1]\" />\n\n    \u003CTresMeshBasicMaterial\n      :color=\"0xFFFFFF\"\n      :map=\"fboTarget?.texture ?? null\"\n    />\n  \u003C/TresMesh>\n\u003C/template>\n\n",[490,633,662,672,677,687,698,553,554,1930],[518,2998,2999,3019,3039,3043,3060,3074,3087,3099,3109,3122,3128,3136,3144,3148,3156,3164,3196,3200,3206,3220,3242,3246,3254],{"__ignoreMap":488},[562,3000,3001,3003,3005,3007,3009,3011,3013,3015,3017],{"class":564,"line":489},[562,3002,568],{"class":567},[562,3004,572],{"class":571},[562,3006,576],{"class":575},[562,3008,579],{"class":575},[562,3010,582],{"class":567},[562,3012,585],{"class":567},[562,3014,589],{"class":588},[562,3016,585],{"class":567},[562,3018,594],{"class":567},[562,3020,3022,3024,3026,3029,3031,3033,3035,3037],{"class":3021,"line":490},[564,598],[562,3023,602],{"class":601},[562,3025,605],{"class":567},[562,3027,3028],{"class":608}," useFBO",[562,3030,612],{"class":567},[562,3032,615],{"class":601},[562,3034,618],{"class":567},[562,3036,621],{"class":588},[562,3038,624],{"class":567},[562,3040,3041],{"class":564,"line":627},[562,3042,630],{"emptyLinePlaceholder":496},[562,3044,3046,3048,3051,3053,3055,3057],{"class":3045,"line":633},[564,598],[562,3047,636],{"class":575},[562,3049,3050],{"class":608}," fboTarget ",[562,3052,582],{"class":567},[562,3054,3028],{"class":644},[562,3056,648],{"class":608},[562,3058,3059],{"class":567},"{\n",[562,3061,3063,3066,3068,3071],{"class":3062,"line":662},[564,598],[562,3064,3065],{"class":571},"  depth",[562,3067,2289],{"class":567},[562,3069,3070],{"class":2561}," true",[562,3072,3073],{"class":567},",\n",[562,3075,3077,3080,3082,3085],{"class":3076,"line":672},[564,598],[562,3078,3079],{"class":571},"  width",[562,3081,2289],{"class":567},[562,3083,3084],{"class":1688}," 512",[562,3086,3073],{"class":567},[562,3088,3090,3093,3095,3097],{"class":3089,"line":677},[564,598],[562,3091,3092],{"class":571},"  height",[562,3094,2289],{"class":567},[562,3096,3084],{"class":1688},[562,3098,3073],{"class":567},[562,3100,3102,3105,3107],{"class":3101,"line":687},[564,598],[562,3103,3104],{"class":571},"  settings",[562,3106,2289],{"class":567},[562,3108,2298],{"class":567},[562,3110,3112,3115,3117,3120],{"class":3111,"line":698},[564,598],[562,3113,3114],{"class":571},"    samples",[562,3116,2289],{"class":567},[562,3118,3119],{"class":1688}," 1",[562,3121,3073],{"class":567},[562,3123,3125],{"class":3124,"line":553},[564,598],[562,3126,3127],{"class":567},"  },\n",[562,3129,3131,3134],{"class":3130,"line":554},[564,598],[562,3132,3133],{"class":567},"}",[562,3135,659],{"class":608},[562,3137,3138,3140,3142],{"class":564,"line":555},[562,3139,665],{"class":567},[562,3141,572],{"class":571},[562,3143,594],{"class":567},[562,3145,3146],{"class":564,"line":556},[562,3147,630],{"emptyLinePlaceholder":496},[562,3149,3150,3152,3154],{"class":564,"line":557},[562,3151,568],{"class":567},[562,3153,682],{"class":571},[562,3155,594],{"class":567},[562,3157,3158,3160,3162],{"class":564,"line":773},[562,3159,690],{"class":567},[562,3161,1764],{"class":571},[562,3163,594],{"class":567},[562,3165,3166,3168,3170,3172,3174,3176,3178,3180,3182,3184,3186,3188,3190,3192,3194],{"class":564,"line":783},[562,3167,701],{"class":567},[562,3169,2613],{"class":571},[562,3171,1675],{"class":567},[562,3173,1779],{"class":575},[562,3175,582],{"class":567},[562,3177,585],{"class":567},[562,3179,1685],{"class":567},[562,3181,1788],{"class":1688},[562,3183,1691],{"class":567},[562,3185,1788],{"class":1688},[562,3187,1691],{"class":567},[562,3189,1788],{"class":1688},[562,3191,1702],{"class":567},[562,3193,585],{"class":567},[562,3195,1707],{"class":567},[562,3197,3198],{"class":564,"line":793},[562,3199,630],{"emptyLinePlaceholder":496},[562,3201,3202,3204],{"class":564,"line":1886},[562,3203,701],{"class":567},[562,3205,2652],{"class":571},[562,3207,3208,3210,3212,3214,3216,3218],{"class":564,"line":1921},[562,3209,2551],{"class":567},[562,3211,2660],{"class":575},[562,3213,582],{"class":567},[562,3215,585],{"class":567},[562,3217,2667],{"class":1688},[562,3219,731],{"class":567},[562,3221,3223,3225,3227,3229,3231,3234,3236,3238,3240],{"class":3222,"line":1930},[564,598],[562,3224,2551],{"class":567},[562,3226,2677],{"class":575},[562,3228,582],{"class":567},[562,3230,585],{"class":567},[562,3232,3233],{"class":608},"fboTarget",[562,3235,2686],{"class":567},[562,3237,2694],{"class":608},[562,3239,2697],{"class":567},[562,3241,731],{"class":567},[562,3243,3244],{"class":564,"line":2489},[562,3245,2596],{"class":567},[562,3247,3248,3250,3252],{"class":564,"line":2494},[562,3249,786],{"class":567},[562,3251,1764],{"class":571},[562,3253,594],{"class":567},[562,3255,3256,3258,3260],{"class":564,"line":2078},[562,3257,665],{"class":567},[562,3259,682],{"class":571},[562,3261,594],{"class":567},[889,3263,3265],{"id":3264},"options","Options",[925,3267,3268,3278],{},[928,3269,3270],{},[931,3271,3272,3274,3276],{},[934,3273,1947],{"align":936},[934,3275,940],{"align":936},[934,3277,943],{},[945,3279,3280,3294,3308,3329],{},[931,3281,3282,3288,3292],{},[950,3283,3284],{"align":936},[2872,3285,3286],{},[518,3287,2876],{},[950,3289,3290,2881],{"align":936},[518,3291,983],{},[950,3293,2884],{},[931,3295,3296,3302,3306],{},[950,3297,3298],{"align":936},[2872,3299,3300],{},[518,3301,2893],{},[950,3303,3304,2898],{"align":936},[518,3305,983],{},[950,3307,2901],{},[931,3309,3310,3316,3325],{},[950,3311,3312],{"align":936},[2872,3313,3314],{},[518,3315,2554],{},[950,3317,3318,2914,3320,811],{"align":936},[518,3319,1085],{},[523,3321,3323],{"href":2917,"rel":3322},[527],[518,3324,2921],{},[950,3326,3327],{},[518,3328,1130],{},[931,3330,3331,3337,3346],{},[950,3332,3333],{"align":936},[2872,3334,3335],{},[518,3336,2571],{},[950,3338,3339,2939,3341],{"align":936},[518,3340,2938],{},[523,3342,3344,2947],{"href":2942,"rel":3343},[527],[518,3345,2946],{},[950,3347,3348],{},[518,3349,2952],{},[1536,3351,3352],{},"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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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);}",{"title":488,"searchDepth":489,"depth":490,"links":3354},[3355,3356,3357],{"id":546,"depth":490,"text":15},{"id":922,"depth":490,"text":923},{"id":2973,"depth":490,"text":2974,"children":3358},[3359,3360],{"id":2992,"depth":627,"text":15},{"id":3264,"depth":627,"text":3265},"Render to texture using Frame Buffer Objects.",{},{"title":409,"description":3361},"ch0ffhPITGouVRylpEdp2CmD8Fl-JOZCHt9eio9zKpc",{"id":3366,"title":413,"body":3367,"description":3793,"extension":493,"links":494,"meta":3794,"navigation":496,"path":414,"seo":3795,"stem":415,"__hash__":3796},"docs/2.api/9.objects/gradient-texture.md",{"type":477,"value":3368,"toc":3789},[3369,3374,3383,3385,3640,3642,3787],[2057,3370,3371],{},[3372,3373],"objects-gradient-texture",{},[480,3375,3376,3379,3380,3382],{},[518,3377,3378],{},"\u003CGradientTexture />"," creates a gradient in a THREE.Texture and attaches it to its parent THREE.Material's ",[518,3381,2677],{}," by default.",[544,3384,15],{"id":546},[548,3386,3388],{"className":550,"code":3387,"language":558,"meta":488,"style":488},"\u003Cscript setup lang=\"ts\">\nimport { GradientTexture } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 0, 5]\" />\n\n    \u003CTresMesh>\n      \u003CTresPlaneGeometry :args=\"[2, 2]\" />\n      \u003CTresMeshBasicMaterial>\n        \u003CGradientTexture\n          :stops=\"[0, 1]\"\n          :colors=\"['#ff0000', '#0000ff']\"\n        />\n      \u003C/TresMeshBasicMaterial>\n    \u003C/TresMesh>\n  \u003C/TresCanvas>\n\u003C/template>\n",[518,3389,3390,3410,3429,3437,3441,3449,3457,3489,3493,3501,3530,3539,3546,3570,3603,3608,3616,3624,3632],{"__ignoreMap":488},[562,3391,3392,3394,3396,3398,3400,3402,3404,3406,3408],{"class":564,"line":489},[562,3393,568],{"class":567},[562,3395,572],{"class":571},[562,3397,576],{"class":575},[562,3399,579],{"class":575},[562,3401,582],{"class":567},[562,3403,585],{"class":567},[562,3405,589],{"class":588},[562,3407,585],{"class":567},[562,3409,594],{"class":567},[562,3411,3412,3414,3416,3419,3421,3423,3425,3427],{"class":564,"line":490},[562,3413,602],{"class":601},[562,3415,605],{"class":567},[562,3417,3418],{"class":608}," GradientTexture",[562,3420,612],{"class":567},[562,3422,615],{"class":601},[562,3424,618],{"class":567},[562,3426,621],{"class":588},[562,3428,624],{"class":567},[562,3430,3431,3433,3435],{"class":564,"line":627},[562,3432,665],{"class":567},[562,3434,572],{"class":571},[562,3436,594],{"class":567},[562,3438,3439],{"class":564,"line":633},[562,3440,630],{"emptyLinePlaceholder":496},[562,3442,3443,3445,3447],{"class":564,"line":662},[562,3444,568],{"class":567},[562,3446,682],{"class":571},[562,3448,594],{"class":567},[562,3450,3451,3453,3455],{"class":564,"line":672},[562,3452,690],{"class":567},[562,3454,693],{"class":571},[562,3456,594],{"class":567},[562,3458,3459,3461,3463,3465,3467,3469,3471,3473,3475,3477,3479,3481,3483,3485,3487],{"class":564,"line":677},[562,3460,701],{"class":567},[562,3462,1672],{"class":571},[562,3464,1675],{"class":567},[562,3466,1678],{"class":575},[562,3468,582],{"class":567},[562,3470,585],{"class":567},[562,3472,1685],{"class":567},[562,3474,1115],{"class":1688},[562,3476,1691],{"class":567},[562,3478,1115],{"class":1688},[562,3480,1691],{"class":567},[562,3482,1699],{"class":1688},[562,3484,1702],{"class":567},[562,3486,585],{"class":567},[562,3488,1707],{"class":567},[562,3490,3491],{"class":564,"line":687},[562,3492,630],{"emptyLinePlaceholder":496},[562,3494,3495,3497,3499],{"class":564,"line":698},[562,3496,701],{"class":567},[562,3498,1764],{"class":571},[562,3500,594],{"class":567},[562,3502,3503,3505,3508,3510,3512,3514,3516,3518,3520,3522,3524,3526,3528],{"class":564,"line":553},[562,3504,712],{"class":567},[562,3506,3507],{"class":571},"TresPlaneGeometry",[562,3509,1675],{"class":567},[562,3511,1779],{"class":575},[562,3513,582],{"class":567},[562,3515,585],{"class":567},[562,3517,1685],{"class":567},[562,3519,1694],{"class":1688},[562,3521,1691],{"class":567},[562,3523,1694],{"class":1688},[562,3525,1702],{"class":567},[562,3527,585],{"class":567},[562,3529,1707],{"class":567},[562,3531,3532,3534,3537],{"class":564,"line":554},[562,3533,712],{"class":567},[562,3535,3536],{"class":571},"TresMeshBasicMaterial",[562,3538,594],{"class":567},[562,3540,3541,3543],{"class":564,"line":555},[562,3542,1771],{"class":567},[562,3544,3545],{"class":571},"GradientTexture\n",[562,3547,3548,3551,3554,3556,3558,3560,3562,3564,3566,3568],{"class":564,"line":556},[562,3549,3550],{"class":567},"          :",[562,3552,3553],{"class":575},"stops",[562,3555,582],{"class":567},[562,3557,585],{"class":567},[562,3559,1685],{"class":567},[562,3561,1115],{"class":1688},[562,3563,1691],{"class":567},[562,3565,1788],{"class":1688},[562,3567,1702],{"class":567},[562,3569,731],{"class":567},[562,3571,3572,3574,3577,3579,3581,3583,3585,3588,3590,3592,3594,3597,3599,3601],{"class":564,"line":557},[562,3573,3550],{"class":567},[562,3575,3576],{"class":575},"colors",[562,3578,582],{"class":567},[562,3580,585],{"class":567},[562,3582,1685],{"class":567},[562,3584,651],{"class":567},[562,3586,3587],{"class":588},"#ff0000",[562,3589,651],{"class":567},[562,3591,1691],{"class":567},[562,3593,651],{"class":567},[562,3595,3596],{"class":588},"#0000ff",[562,3598,651],{"class":567},[562,3600,1702],{"class":567},[562,3602,731],{"class":567},[562,3604,3605],{"class":564,"line":773},[562,3606,3607],{"class":567},"        />\n",[562,3609,3610,3612,3614],{"class":564,"line":783},[562,3611,1843],{"class":567},[562,3613,3536],{"class":571},[562,3615,594],{"class":567},[562,3617,3618,3620,3622],{"class":564,"line":793},[562,3619,776],{"class":567},[562,3621,1764],{"class":571},[562,3623,594],{"class":567},[562,3625,3626,3628,3630],{"class":564,"line":1886},[562,3627,786],{"class":567},[562,3629,693],{"class":571},[562,3631,594],{"class":567},[562,3633,3634,3636,3638],{"class":564,"line":1921},[562,3635,665],{"class":567},[562,3637,682],{"class":571},[562,3639,594],{"class":567},[544,3641,923],{"id":922},[925,3643,3644,3654],{},[928,3645,3646],{},[931,3647,3648,3650,3652],{},[934,3649,1947],{"align":936},[934,3651,940],{"align":936},[934,3653,943],{},[945,3655,3656,3684,3698,3713,3727,3740,3758,3772],{},[931,3657,3658,3662,3682],{},[950,3659,3660],{"align":936},[518,3661,3553],{},[950,3663,3664,3665,3668,3669,3671,3672,3674,3675,3678,3679,811],{"align":936},"A ",[518,3666,3667],{},"number[]"," of values between ",[518,3670,1115],{}," and ",[518,3673,1788],{}," representing the color positions in the gradient. ",[518,3676,3677],{},"stops.length"," should match ",[518,3680,3681],{},"color.length",[950,3683],{},[931,3685,3686,3690,3696],{},[950,3687,3688],{"align":936},[518,3689,3576],{},[950,3691,3664,3692,3695],{"align":936},[518,3693,3694],{},"THREE.ColorRepresentation[]"," representing the colors in the gradient.",[950,3697],{},[931,3699,3700,3705,3708],{},[950,3701,3702],{"align":936},[518,3703,3704],{},"attach",[950,3706,3707],{"align":936},"Where the component should be attached within its parent.",[950,3709,3710],{},[518,3711,3712],{},"'map'",[931,3714,3715,3719,3722],{},[950,3716,3717],{"align":936},[518,3718,2893],{},[950,3720,3721],{"align":936},"Height of the canvas used to draw the gradient.",[950,3723,3724],{},[518,3725,3726],{},"1024",[931,3728,3729,3733,3736],{},[950,3730,3731],{"align":936},[518,3732,2876],{},[950,3734,3735],{"align":936},"Width of the canvas used to draw the gradient.",[950,3737,3738],{},[518,3739,2802],{},[931,3741,3742,3747,3753],{},[950,3743,3744],{"align":936},[518,3745,3746],{},"type",[950,3748,3749,3752],{"align":936},[518,3750,3751],{},"'linear' | 'radial'"," Type of gradient to draw.",[950,3754,3755],{},[518,3756,3757],{},"'linear'",[931,3759,3760,3765,3768],{},[950,3761,3762],{"align":936},[518,3763,3764],{},"innerCircleRadius",[950,3766,3767],{"align":936},"Radius of the inner circle of a radial gradient.",[950,3769,3770],{},[518,3771,1115],{},[931,3773,3774,3779,3782],{},[950,3775,3776],{"align":936},[518,3777,3778],{},"outerCircleRadius",[950,3780,3781],{"align":936},"Radius of the outer circle of a radial gradient.",[950,3783,3784],{},[518,3785,3786],{},"'auto'",[1536,3788,2043],{},{"title":488,"searchDepth":489,"depth":490,"links":3790},[3791,3792],{"id":546,"depth":490,"text":15},{"id":922,"depth":490,"text":923},"Create gradient textures for materials.",{},{"title":413,"description":3793},"vYfm15fEwNZgRGLtXSYlU49KPYrI7wEBqbJQsM4JeNo",{"id":3798,"title":417,"body":3799,"description":9911,"extension":493,"links":494,"meta":9912,"navigation":496,"path":418,"seo":9913,"stem":419,"__hash__":9914},"docs/2.api/9.objects/html.md",{"type":477,"value":3800,"toc":9892},[3801,3804,3818,3823,3825,4295,4299,4306,4311,4327,4335,4340,4485,4491,4495,4519,4524,4654,4658,4682,4685,4709,4727,4748,4753,4918,4922,4927,4951,4963,4968,6931,6935,6959,6980,7021,7026,7041,7055,7096,7103,7127,7146,7151,8773,8779,8785,8790,8991,9008,9010,9373,9375,9395,9399,9481,9485,9663,9868,9871,9889],[480,3802,3803],{},"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.",[480,3805,3806,3807,3671,3810,3813,3814,3817],{},"🚀 Works seamlessly with both ",[2872,3808,3809],{},"PerspectiveCamera",[2872,3811,3812],{},"OrthographicCamera"," — the active camera is automatically detected by the ",[518,3815,3816],{},"\u003CHtml>"," component.",[2057,3819,3820],{},[3821,3822],"objects-html",{},[544,3824,15],{"id":546},[548,3826,3829],{"className":550,"code":3827,"highlights":3828,"language":558,"meta":488,"style":488},"\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",[490,556,557,773,783,793,1886],[518,3830,3831,3851,3875,3893,3901,3905,3913,3933,3965,3973,4005,4013,4021,4029,4035,4041,4057,4085,4114,4119,4148,4157,4165,4173,4181,4189,4197,4208,4216,4233,4247,4259,4271,4283,4287],{"__ignoreMap":488},[562,3832,3833,3835,3837,3839,3841,3843,3845,3847,3849],{"class":564,"line":489},[562,3834,568],{"class":567},[562,3836,572],{"class":571},[562,3838,576],{"class":575},[562,3840,579],{"class":575},[562,3842,582],{"class":567},[562,3844,585],{"class":567},[562,3846,589],{"class":588},[562,3848,585],{"class":567},[562,3850,594],{"class":567},[562,3852,3854,3856,3858,3861,3863,3865,3867,3869,3871,3873],{"class":3853,"line":490},[564,598],[562,3855,602],{"class":601},[562,3857,605],{"class":567},[562,3859,3860],{"class":608}," Html",[562,3862,1624],{"class":567},[562,3864,1627],{"class":608},[562,3866,612],{"class":567},[562,3868,615],{"class":601},[562,3870,618],{"class":567},[562,3872,621],{"class":588},[562,3874,624],{"class":567},[562,3876,3877,3879,3881,3883,3885,3887,3889,3891],{"class":564,"line":627},[562,3878,602],{"class":601},[562,3880,605],{"class":567},[562,3882,2159],{"class":608},[562,3884,612],{"class":567},[562,3886,615],{"class":601},[562,3888,618],{"class":567},[562,3890,2148],{"class":588},[562,3892,624],{"class":567},[562,3894,3895,3897,3899],{"class":564,"line":633},[562,3896,665],{"class":567},[562,3898,572],{"class":571},[562,3900,594],{"class":567},[562,3902,3903],{"class":564,"line":662},[562,3904,630],{"emptyLinePlaceholder":496},[562,3906,3907,3909,3911],{"class":564,"line":672},[562,3908,568],{"class":567},[562,3910,682],{"class":571},[562,3912,594],{"class":567},[562,3914,3915,3917,3919,3922,3924,3926,3929,3931],{"class":564,"line":677},[562,3916,690],{"class":567},[562,3918,693],{"class":571},[562,3920,3921],{"class":575}," clear-color",[562,3923,582],{"class":567},[562,3925,585],{"class":567},[562,3927,3928],{"class":588},"#82DBC5",[562,3930,585],{"class":567},[562,3932,594],{"class":567},[562,3934,3935,3937,3939,3941,3943,3945,3947,3949,3951,3953,3955,3957,3959,3961,3963],{"class":564,"line":687},[562,3936,701],{"class":567},[562,3938,1672],{"class":571},[562,3940,1675],{"class":567},[562,3942,1678],{"class":575},[562,3944,582],{"class":567},[562,3946,585],{"class":567},[562,3948,1685],{"class":567},[562,3950,1694],{"class":1688},[562,3952,1691],{"class":567},[562,3954,1694],{"class":1688},[562,3956,1691],{"class":567},[562,3958,1699],{"class":1688},[562,3960,1702],{"class":567},[562,3962,585],{"class":567},[562,3964,1707],{"class":567},[562,3966,3967,3969,3971],{"class":564,"line":698},[562,3968,701],{"class":567},[562,3970,1714],{"class":571},[562,3972,1707],{"class":567},[562,3974,3975,3977,3979,3981,3983,3985,3987,3989,3991,3993,3995,3997,3999,4001,4003],{"class":564,"line":553},[562,3976,701],{"class":567},[562,3978,1764],{"class":571},[562,3980,1675],{"class":567},[562,3982,1678],{"class":575},[562,3984,582],{"class":567},[562,3986,585],{"class":567},[562,3988,1685],{"class":567},[562,3990,1788],{"class":1688},[562,3992,1691],{"class":567},[562,3994,1788],{"class":1688},[562,3996,1691],{"class":567},[562,3998,1788],{"class":1688},[562,4000,1702],{"class":567},[562,4002,585],{"class":567},[562,4004,594],{"class":567},[562,4006,4007,4009,4011],{"class":564,"line":554},[562,4008,712],{"class":567},[562,4010,2613],{"class":571},[562,4012,1707],{"class":567},[562,4014,4015,4017,4019],{"class":564,"line":555},[562,4016,712],{"class":567},[562,4018,2821],{"class":571},[562,4020,1707],{"class":567},[562,4022,4024,4026],{"class":4023,"line":556},[564,598],[562,4025,712],{"class":567},[562,4027,4028],{"class":571},"Html\n",[562,4030,4032],{"class":4031,"line":557},[564,598],[562,4033,4034],{"class":575},"        center\n",[562,4036,4038],{"class":4037,"line":773},[564,598],[562,4039,4040],{"class":575},"        transform\n",[562,4042,4044,4046,4049,4051,4053,4055],{"class":4043,"line":783},[564,598],[562,4045,752],{"class":567},[562,4047,4048],{"class":575},"distance-factor",[562,4050,582],{"class":567},[562,4052,585],{"class":567},[562,4054,1912],{"class":1688},[562,4056,731],{"class":567},[562,4058,4060,4062,4064,4066,4068,4070,4072,4074,4076,4078,4081,4083],{"class":4059,"line":793},[564,598],[562,4061,752],{"class":567},[562,4063,1678],{"class":575},[562,4065,582],{"class":567},[562,4067,585],{"class":567},[562,4069,1685],{"class":567},[562,4071,1115],{"class":1688},[562,4073,1691],{"class":567},[562,4075,1115],{"class":1688},[562,4077,1691],{"class":567},[562,4079,4080],{"class":1688},"0.65",[562,4082,1702],{"class":567},[562,4084,731],{"class":567},[562,4086,4088,4090,4093,4095,4097,4099,4102,4104,4106,4108,4110,4112],{"class":4087,"line":1886},[564,598],[562,4089,752],{"class":567},[562,4091,4092],{"class":575},"scale",[562,4094,582],{"class":567},[562,4096,585],{"class":567},[562,4098,1685],{"class":567},[562,4100,4101],{"class":1688},"0.75",[562,4103,1691],{"class":567},[562,4105,4101],{"class":1688},[562,4107,1691],{"class":567},[562,4109,4101],{"class":1688},[562,4111,1702],{"class":567},[562,4113,731],{"class":567},[562,4115,4116],{"class":564,"line":1921},[562,4117,4118],{"class":567},"      >\n",[562,4120,4121,4123,4126,4128,4130,4132,4135,4137,4139,4142,4144,4146],{"class":564,"line":1930},[562,4122,1771],{"class":567},[562,4124,4125],{"class":571},"h1",[562,4127,2947],{"class":575},[562,4129,582],{"class":567},[562,4131,585],{"class":567},[562,4133,4134],{"class":588},"title",[562,4136,585],{"class":567},[562,4138,2217],{"class":567},[562,4140,4141],{"class":608},"I'm a Box 📦",[562,4143,665],{"class":567},[562,4145,4125],{"class":571},[562,4147,594],{"class":567},[562,4149,4150,4152,4155],{"class":564,"line":2489},[562,4151,1843],{"class":567},[562,4153,4154],{"class":571},"Html",[562,4156,594],{"class":567},[562,4158,4159,4161,4163],{"class":564,"line":2494},[562,4160,776],{"class":567},[562,4162,1764],{"class":571},[562,4164,594],{"class":567},[562,4166,4167,4169,4171],{"class":564,"line":2078},[562,4168,701],{"class":567},[562,4170,2499],{"class":571},[562,4172,1707],{"class":567},[562,4174,4175,4177,4179],{"class":564,"line":2079},[562,4176,701],{"class":567},[562,4178,1867],{"class":571},[562,4180,1707],{"class":567},[562,4182,4183,4185,4187],{"class":564,"line":2080},[562,4184,786],{"class":567},[562,4186,693],{"class":571},[562,4188,594],{"class":567},[562,4190,4191,4193,4195],{"class":564,"line":2081},[562,4192,665],{"class":567},[562,4194,682],{"class":571},[562,4196,594],{"class":567},[562,4198,4199,4201,4203,4206],{"class":564,"line":2593},[562,4200,568],{"class":567},[562,4202,1536],{"class":571},[562,4204,4205],{"class":575}," scoped",[562,4207,594],{"class":567},[562,4209,4210,4212,4214],{"class":564,"line":2599},[562,4211,811],{"class":567},[562,4213,4134],{"class":2208},[562,4215,2298],{"class":567},[562,4217,4218,4222,4224,4227,4230],{"class":564,"line":2608},[562,4219,4221],{"class":4220},"sqsOY","  background-color",[562,4223,2289],{"class":567},[562,4225,4226],{"class":567}," #",[562,4228,4229],{"class":608},"1e1e1e",[562,4231,4232],{"class":567},";\n",[562,4234,4235,4238,4240,4242,4245],{"class":564,"line":2642},[562,4236,4237],{"class":4220},"  color",[562,4239,2289],{"class":567},[562,4241,4226],{"class":567},[562,4243,4244],{"class":608},"ffffff",[562,4246,4232],{"class":567},[562,4248,4249,4252,4254,4257],{"class":564,"line":2647},[562,4250,4251],{"class":4220},"  font-size",[562,4253,2289],{"class":567},[562,4255,4256],{"class":1688}," 0.75rem",[562,4258,4232],{"class":567},[562,4260,4261,4264,4266,4269],{"class":564,"line":2655},[562,4262,4263],{"class":4220},"  padding",[562,4265,2289],{"class":567},[562,4267,4268],{"class":1688}," 0.25rem",[562,4270,4232],{"class":567},[562,4272,4273,4276,4278,4281],{"class":564,"line":2672},[562,4274,4275],{"class":4220},"  border-radius",[562,4277,2289],{"class":567},[562,4279,4280],{"class":1688}," 0.375rem",[562,4282,4232],{"class":567},[562,4284,4285],{"class":564,"line":2702},[562,4286,2390],{"class":567},[562,4288,4289,4291,4293],{"class":564,"line":2707},[562,4290,665],{"class":567},[562,4292,1536],{"class":571},[562,4294,594],{"class":567},[544,4296,4298],{"id":4297},"occlusion","Occlusion",[480,4300,4301,4302,4305],{},"By default, the HTML content will be visible through other objects in the scene. You can use the ",[518,4303,4304],{},"occlude"," prop to make the HTML content occlude other objects in the scene.",[480,4307,4308,4309,1400],{},"Html can be hidden behind one or more objects in your scene using the ",[518,4310,4304],{},[548,4312,4314],{"className":550,"code":4313,"language":558,"meta":488,"style":488},"\u003CHtml occlude>\n",[518,4315,4316],{"__ignoreMap":488},[562,4317,4318,4320,4322,4325],{"class":564,"line":489},[562,4319,568],{"class":567},[562,4321,4154],{"class":571},[562,4323,4324],{"class":575}," occlude",[562,4326,594],{"class":567},[480,4328,975,4329,4331,4332,4334],{},[518,4330,4304],{},", then ",[518,4333,3816],{}," will be hidden by any objects that pass in front of its position.",[2057,4336,4337],{},[4338,4339],"objects-html-occlusion",{},[4341,4342,4343,4344,4348],"details",{},"\n  ",[4345,4346,4347],"summary",{},"Demo code",[548,4349,4353],{"className":4350,"code":4351,"language":4352,"meta":488,"style":488},"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",[518,4354,4355,4375,4383,4391,4441,4469,4477],{"__ignoreMap":488},[562,4356,4357,4359,4361,4364,4366,4368,4371,4373],{"class":564,"line":489},[562,4358,568],{"class":567},[562,4360,1764],{"class":571},[562,4362,4363],{"class":575}," :position",[562,4365,582],{"class":567},[562,4367,585],{"class":567},[562,4369,4370],{"class":588},"[0, 1, -2]",[562,4372,585],{"class":567},[562,4374,594],{"class":567},[562,4376,4377,4379,4381],{"class":564,"line":490},[562,4378,690],{"class":567},[562,4380,2613],{"class":571},[562,4382,1707],{"class":567},[562,4384,4385,4387,4389],{"class":564,"line":627},[562,4386,690],{"class":567},[562,4388,2821],{"class":571},[562,4390,1707],{"class":567},[562,4392,4393,4395,4397,4400,4403,4405,4408,4410,4412,4414,4416,4418,4420,4422,4425,4427,4430,4432,4434,4437,4439],{"class":564,"line":633},[562,4394,690],{"class":567},[562,4396,4352],{"class":571},[562,4398,4399],{"class":575}," center",[562,4401,4402],{"class":575}," transform",[562,4404,4324],{"class":575},[562,4406,4407],{"class":575}," :distance-factor",[562,4409,582],{"class":567},[562,4411,585],{"class":567},[562,4413,1912],{"class":588},[562,4415,585],{"class":567},[562,4417,4363],{"class":575},[562,4419,582],{"class":567},[562,4421,585],{"class":567},[562,4423,4424],{"class":588},"[0, 0, 2]",[562,4426,585],{"class":567},[562,4428,4429],{"class":575}," :z-index-range",[562,4431,582],{"class":567},[562,4433,585],{"class":567},[562,4435,4436],{"class":588},"[28, 0]",[562,4438,585],{"class":567},[562,4440,594],{"class":567},[562,4442,4443,4445,4447,4449,4451,4453,4456,4458,4460,4463,4465,4467],{"class":564,"line":662},[562,4444,701],{"class":567},[562,4446,4125],{"class":571},[562,4448,2947],{"class":575},[562,4450,582],{"class":567},[562,4452,585],{"class":567},[562,4454,4455],{"class":588},"bg-white dark:bg-dark text-xs p-1 rounded",[562,4457,585],{"class":567},[562,4459,2217],{"class":567},[562,4461,4462],{"class":608},"Move camera",[562,4464,665],{"class":567},[562,4466,4125],{"class":571},[562,4468,594],{"class":567},[562,4470,4471,4473,4475],{"class":564,"line":672},[562,4472,786],{"class":567},[562,4474,4352],{"class":571},[562,4476,594],{"class":567},[562,4478,4479,4481,4483],{"class":564,"line":677},[562,4480,665],{"class":567},[562,4482,1764],{"class":571},[562,4484,594],{"class":567},[480,4486,4487,4488,4490],{},"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 ",[518,4489,4304],{}," prop:",[889,4492,4494],{"id":4493},"single-occluder","Single occluder",[548,4496,4498],{"className":550,"code":4497,"language":558,"meta":488,"style":488},"\u003CHtml occlude=\"[mesh]\">\n",[518,4499,4500],{"__ignoreMap":488},[562,4501,4502,4504,4506,4508,4510,4512,4515,4517],{"class":564,"line":489},[562,4503,568],{"class":567},[562,4505,4154],{"class":571},[562,4507,4324],{"class":575},[562,4509,582],{"class":567},[562,4511,585],{"class":567},[562,4513,4514],{"class":588},"[mesh]",[562,4516,585],{"class":567},[562,4518,594],{"class":567},[2057,4520,4521],{},[4522,4523],"objects-html-single-occluder",{},[4341,4525,4343,4526,4528],{},[4345,4527,4347],{},[548,4529,4531],{"className":4350,"code":4530,"language":4352,"meta":488,"style":488},"\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",[518,4532,4533,4552,4560,4568,4612,4638,4646],{"__ignoreMap":488},[562,4534,4535,4537,4539,4541,4543,4545,4548,4550],{"class":564,"line":489},[562,4536,568],{"class":567},[562,4538,1764],{"class":571},[562,4540,4363],{"class":575},[562,4542,582],{"class":567},[562,4544,585],{"class":567},[562,4546,4547],{"class":588},"[0, 1, 0]",[562,4549,585],{"class":567},[562,4551,594],{"class":567},[562,4553,4554,4556,4558],{"class":564,"line":490},[562,4555,690],{"class":567},[562,4557,2613],{"class":571},[562,4559,1707],{"class":567},[562,4561,4562,4564,4566],{"class":564,"line":627},[562,4563,690],{"class":567},[562,4565,2821],{"class":571},[562,4567,1707],{"class":567},[562,4569,4570,4572,4574,4576,4578,4581,4583,4585,4588,4590,4592,4594,4596,4598,4600,4602,4604,4606,4608,4610],{"class":564,"line":633},[562,4571,690],{"class":567},[562,4573,4352],{"class":571},[562,4575,4399],{"class":575},[562,4577,4402],{"class":575},[562,4579,4580],{"class":575}," :occlude",[562,4582,582],{"class":567},[562,4584,585],{"class":567},[562,4586,4587],{"class":588},"[sphereRef]",[562,4589,585],{"class":567},[562,4591,4407],{"class":575},[562,4593,582],{"class":567},[562,4595,585],{"class":567},[562,4597,1912],{"class":588},[562,4599,585],{"class":567},[562,4601,4429],{"class":575},[562,4603,582],{"class":567},[562,4605,585],{"class":567},[562,4607,4436],{"class":588},[562,4609,585],{"class":567},[562,4611,594],{"class":567},[562,4613,4614,4616,4618,4620,4622,4624,4626,4628,4630,4632,4634,4636],{"class":564,"line":662},[562,4615,701],{"class":567},[562,4617,4125],{"class":571},[562,4619,2947],{"class":575},[562,4621,582],{"class":567},[562,4623,585],{"class":567},[562,4625,4455],{"class":588},[562,4627,585],{"class":567},[562,4629,2217],{"class":567},[562,4631,4462],{"class":608},[562,4633,665],{"class":567},[562,4635,4125],{"class":571},[562,4637,594],{"class":567},[562,4639,4640,4642,4644],{"class":564,"line":672},[562,4641,786],{"class":567},[562,4643,4352],{"class":571},[562,4645,594],{"class":567},[562,4647,4648,4650,4652],{"class":564,"line":677},[562,4649,665],{"class":567},[562,4651,1764],{"class":571},[562,4653,594],{"class":567},[889,4655,4657],{"id":4656},"multiple-occluders","Multiple occluders",[548,4659,4661],{"className":550,"code":4660,"language":558,"meta":488,"style":488},"\u003CHtml occlude=\"[mesh1, mesh2, mesh3, ...]\" />\n",[518,4662,4663],{"__ignoreMap":488},[562,4664,4665,4667,4669,4671,4673,4675,4678,4680],{"class":564,"line":489},[562,4666,568],{"class":567},[562,4668,4154],{"class":571},[562,4670,4324],{"class":575},[562,4672,582],{"class":567},[562,4674,585],{"class":567},[562,4676,4677],{"class":588},"[mesh1, mesh2, mesh3, ...]",[562,4679,585],{"class":567},[562,4681,1707],{"class":567},[480,4683,4684],{},"OR",[548,4686,4688],{"className":550,"code":4687,"language":558,"meta":488,"style":488},"\u003CHtml occlude=\"meshesArray\" />\n",[518,4689,4690],{"__ignoreMap":488},[562,4691,4692,4694,4696,4698,4700,4702,4705,4707],{"class":564,"line":489},[562,4693,568],{"class":567},[562,4695,4154],{"class":571},[562,4697,4324],{"class":575},[562,4699,582],{"class":567},[562,4701,585],{"class":567},[562,4703,4704],{"class":588},"meshesArray",[562,4706,585],{"class":567},[562,4708,1707],{"class":567},[480,4710,4711,4712,4715,4716,4721,4722,4726],{},"In the demo below, a ",[518,4713,4714],{},"v-for"," loop generates multiple spheres around the cube.\nAll resulting ",[2872,4717,4718],{},[518,4719,4720],{},"Mesh"," instances are collected into an array and passed to the ",[2872,4723,4724],{},[518,4725,4304],{}," prop, allowing each sphere to occlude the HTML content.",[480,4728,4729,4730,4735,4736,4739,4740,3671,4744,4747],{},"This demo also uses the ",[2872,4731,4732],{},[518,4733,4734],{},"on-occlude"," event, which is triggered whenever the occlusion state changes.\nHere, the event updates a ",[2872,4737,4738],{},"reactive value"," to control element styles — for example, toggling between ",[4741,4742,4743],"em",{},"light",[4741,4745,4746],{},"dark"," themes.",[2057,4749,4750],{},[4751,4752],"objects-html-occlude-complex-demo",{},[4341,4754,4343,4755,4757],{},[4345,4756,4347],{},[548,4758,4760],{"className":4350,"code":4759,"language":4352,"meta":488,"style":488},"\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",[518,4761,4762,4780,4788,4796,4803,4817,4831,4844,4857,4871,4876,4902,4910],{"__ignoreMap":488},[562,4763,4764,4766,4768,4770,4772,4774,4776,4778],{"class":564,"line":489},[562,4765,568],{"class":567},[562,4767,1764],{"class":571},[562,4769,4363],{"class":575},[562,4771,582],{"class":567},[562,4773,585],{"class":567},[562,4775,4547],{"class":588},[562,4777,585],{"class":567},[562,4779,594],{"class":567},[562,4781,4782,4784,4786],{"class":564,"line":490},[562,4783,690],{"class":567},[562,4785,2613],{"class":571},[562,4787,1707],{"class":567},[562,4789,4790,4792,4794],{"class":564,"line":627},[562,4791,690],{"class":567},[562,4793,2821],{"class":571},[562,4795,1707],{"class":567},[562,4797,4798,4800],{"class":564,"line":633},[562,4799,690],{"class":567},[562,4801,4802],{"class":571},"html\n",[562,4804,4805,4808,4810,4812,4815],{"class":564,"line":662},[562,4806,4807],{"class":575},"    v-bind",[562,4809,582],{"class":567},[562,4811,585],{"class":567},[562,4813,4814],{"class":588},"htmlProps",[562,4816,731],{"class":567},[562,4818,4819,4822,4824,4826,4829],{"class":564,"line":672},[562,4820,4821],{"class":575},"    :occlude",[562,4823,582],{"class":567},[562,4825,585],{"class":567},[562,4827,4828],{"class":588},"occluderRefs",[562,4830,731],{"class":567},[562,4832,4833,4836,4838,4840,4842],{"class":564,"line":677},[562,4834,4835],{"class":575},"    :distance-factor",[562,4837,582],{"class":567},[562,4839,585],{"class":567},[562,4841,1912],{"class":588},[562,4843,731],{"class":567},[562,4845,4846,4849,4851,4853,4855],{"class":564,"line":687},[562,4847,4848],{"class":575},"    :z-index-range",[562,4850,582],{"class":567},[562,4852,585],{"class":567},[562,4854,4436],{"class":588},[562,4856,731],{"class":567},[562,4858,4859,4862,4864,4866,4869],{"class":564,"line":698},[562,4860,4861],{"class":575},"    @on-occlude",[562,4863,582],{"class":567},[562,4865,585],{"class":567},[562,4867,4868],{"class":588},"(event: boolean) => isOccluded = event",[562,4870,731],{"class":567},[562,4872,4873],{"class":564,"line":553},[562,4874,4875],{"class":567},"  >\n",[562,4877,4878,4880,4882,4884,4886,4888,4890,4892,4894,4896,4898,4900],{"class":564,"line":554},[562,4879,701],{"class":567},[562,4881,4125],{"class":571},[562,4883,2947],{"class":575},[562,4885,582],{"class":567},[562,4887,585],{"class":567},[562,4889,4455],{"class":588},[562,4891,585],{"class":567},[562,4893,2217],{"class":567},[562,4895,4462],{"class":608},[562,4897,665],{"class":567},[562,4899,4125],{"class":571},[562,4901,594],{"class":567},[562,4903,4904,4906,4908],{"class":564,"line":555},[562,4905,786],{"class":567},[562,4907,4352],{"class":571},[562,4909,594],{"class":567},[562,4911,4912,4914,4916],{"class":564,"line":556},[562,4913,665],{"class":567},[562,4915,1764],{"class":571},[562,4917,594],{"class":567},[889,4919,4921],{"id":4920},"blending-occlusion","Blending Occlusion",[480,4923,4924,4926],{},[518,4925,3816],{}," 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.",[548,4928,4930],{"className":550,"code":4929,"language":558,"meta":488,"style":488},"\u003CHtml occlude=\"blending\">\n",[518,4931,4932],{"__ignoreMap":488},[562,4933,4934,4936,4938,4940,4942,4944,4947,4949],{"class":564,"line":489},[562,4935,568],{"class":567},[562,4937,4154],{"class":571},[562,4939,4324],{"class":575},[562,4941,582],{"class":567},[562,4943,585],{"class":567},[562,4945,4946],{"class":588},"blending",[562,4948,585],{"class":567},[562,4950,594],{"class":567},[480,4952,1353,4953,913,4956,4959,4960,811],{},[2872,4954,4955],{},"demo below ⬇️",[4741,4957,4958],{},"(left black example)"," shows a ",[2872,4961,4962],{},"basic usage example",[2057,4964,4965],{},[4966,4967],"objects-html-occlude-blending-demo",{},[4341,4969,4343,4970,4972],{},[4345,4971,4347],{},[548,4973,5020],{"className":550,"code":4974,"highlights":4975,"language":558,"meta":488,"style":488},"\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",[490,2655,2702,2707,2716,2721,2729,2742,4976,4977,4978,4979,4980,4981,4982,4983,4984,4985,4986,4977,4978,4979,4980,4981,4982,4983,4984,4985,4986,4987,4988,4989,4990,4991,4992,4993,4994,4995,4996,4997,4998,4999,5000,5001,5002,5003,5004,5005,5006,5007,5008,5009,5010,5011,5012,5013,5014,5015,5016,5017,5018,5019],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,[518,5021,5022,5042,5070,5088,5106,5131,5135,5146,5161,5172,5183,5194,5198,5202,5219,5223,5235,5240,5255,5279,5283,5287,5301,5325,5329,5333,5347,5376,5404,5408,5413,5417,5448,5452,5474,5490,5503,5515,5527,5534,5542,5546,5554,5574,5594,5628,5637,5642,5650,5678,5702,5718,5735,5751,5777,5782,5840,5884,5893,5903,5913,5918,5925,5930,5935,5949,5978,6003,6008,6028,6040,6058,6067,6076,6081,6088,6093,6098,6111,6139,6155,6178,6183,6203,6241,6250,6259,6264,6271,6286,6291,6296,6309,6337,6354,6360,6383,6388,6446,6455,6460,6467,6472,6477,6490,6518,6541,6546,6566,6590,6611,6620,6629,6634,6642,6660,6680,6697,6724,6739,6745,6750,6755,6780,6801,6810,6819,6828,6833,6844,6854,6866,6877,6890,6903,6917,6922],{"__ignoreMap":488},[562,5023,5024,5026,5028,5030,5032,5034,5036,5038,5040],{"class":564,"line":489},[562,5025,568],{"class":567},[562,5027,572],{"class":571},[562,5029,576],{"class":575},[562,5031,579],{"class":575},[562,5033,582],{"class":567},[562,5035,585],{"class":567},[562,5037,589],{"class":588},[562,5039,585],{"class":567},[562,5041,594],{"class":567},[562,5043,5045,5047,5049,5051,5053,5056,5058,5060,5062,5064,5066,5068],{"class":5044,"line":490},[564,598],[562,5046,602],{"class":601},[562,5048,605],{"class":567},[562,5050,3860],{"class":608},[562,5052,1624],{"class":567},[562,5054,5055],{"class":608}," Levioso",[562,5057,1624],{"class":567},[562,5059,1627],{"class":608},[562,5061,612],{"class":567},[562,5063,615],{"class":601},[562,5065,618],{"class":567},[562,5067,621],{"class":588},[562,5069,624],{"class":567},[562,5071,5072,5074,5076,5078,5080,5082,5084,5086],{"class":564,"line":627},[562,5073,602],{"class":601},[562,5075,605],{"class":567},[562,5077,2159],{"class":608},[562,5079,612],{"class":567},[562,5081,615],{"class":601},[562,5083,618],{"class":567},[562,5085,2148],{"class":588},[562,5087,624],{"class":567},[562,5089,5090,5092,5094,5096,5098,5100,5102,5104],{"class":564,"line":633},[562,5091,602],{"class":601},[562,5093,605],{"class":567},[562,5095,2178],{"class":608},[562,5097,612],{"class":567},[562,5099,615],{"class":601},[562,5101,618],{"class":567},[562,5103,558],{"class":588},[562,5105,624],{"class":567},[562,5107,5108,5110,5112,5115,5117,5120,5122,5124,5126,5129],{"class":564,"line":662},[562,5109,602],{"class":601},[562,5111,605],{"class":567},[562,5113,5114],{"class":608}," CircleGeometry",[562,5116,1624],{"class":567},[562,5118,5119],{"class":608}," MeshStandardMaterial",[562,5121,612],{"class":567},[562,5123,615],{"class":601},[562,5125,618],{"class":567},[562,5127,5128],{"class":588},"three",[562,5130,624],{"class":567},[562,5132,5133],{"class":564,"line":672},[562,5134,630],{"emptyLinePlaceholder":496},[562,5136,5137,5139,5142,5144],{"class":564,"line":677},[562,5138,636],{"class":575},[562,5140,5141],{"class":608}," gl ",[562,5143,582],{"class":567},[562,5145,2298],{"class":567},[562,5147,5148,5151,5153,5155,5157,5159],{"class":564,"line":687},[562,5149,5150],{"class":571},"  clearColor",[562,5152,2289],{"class":567},[562,5154,618],{"class":567},[562,5156,3928],{"class":588},[562,5158,651],{"class":567},[562,5160,3073],{"class":567},[562,5162,5163,5166,5168,5170],{"class":564,"line":698},[562,5164,5165],{"class":571},"  clearAlpha",[562,5167,2289],{"class":567},[562,5169,3119],{"class":1688},[562,5171,3073],{"class":567},[562,5173,5174,5177,5179,5181],{"class":564,"line":553},[562,5175,5176],{"class":571},"  shadows",[562,5178,2289],{"class":567},[562,5180,3070],{"class":2561},[562,5182,3073],{"class":567},[562,5184,5185,5188,5190,5192],{"class":564,"line":554},[562,5186,5187],{"class":571},"  alpha",[562,5189,2289],{"class":567},[562,5191,3070],{"class":2561},[562,5193,3073],{"class":567},[562,5195,5196],{"class":564,"line":555},[562,5197,2390],{"class":567},[562,5199,5200],{"class":564,"line":556},[562,5201,630],{"emptyLinePlaceholder":496},[562,5203,5204,5206,5209,5211,5213,5215,5217],{"class":564,"line":557},[562,5205,636],{"class":575},[562,5207,5208],{"class":608}," targetDirectionLightRef ",[562,5210,582],{"class":567},[562,5212,2178],{"class":644},[562,5214,648],{"class":608},[562,5216,2230],{"class":567},[562,5218,659],{"class":608},[562,5220,5221],{"class":564,"line":773},[562,5222,630],{"emptyLinePlaceholder":496},[562,5224,5225,5227,5230,5232],{"class":564,"line":783},[562,5226,636],{"class":575},[562,5228,5229],{"class":608}," geometries ",[562,5231,582],{"class":567},[562,5233,5234],{"class":608}," [\n",[562,5236,5237],{"class":564,"line":793},[562,5238,5239],{"class":567},"  {\n",[562,5241,5242,5245,5247,5249,5251,5253],{"class":564,"line":1886},[562,5243,5244],{"class":571},"    component",[562,5246,2289],{"class":567},[562,5248,618],{"class":567},[562,5250,2613],{"class":588},[562,5252,651],{"class":567},[562,5254,3073],{"class":567},[562,5256,5257,5260,5262,5265,5267,5269,5271,5273,5275,5277],{"class":564,"line":1921},[562,5258,5259],{"class":571},"    args",[562,5261,2289],{"class":567},[562,5263,5264],{"class":608}," [",[562,5266,1788],{"class":1688},[562,5268,1624],{"class":567},[562,5270,3119],{"class":1688},[562,5272,1624],{"class":567},[562,5274,3119],{"class":1688},[562,5276,1702],{"class":608},[562,5278,3073],{"class":567},[562,5280,5281],{"class":564,"line":1930},[562,5282,3127],{"class":567},[562,5284,5285],{"class":564,"line":2489},[562,5286,5239],{"class":567},[562,5288,5289,5291,5293,5295,5297,5299],{"class":564,"line":2494},[562,5290,5244],{"class":571},[562,5292,2289],{"class":567},[562,5294,618],{"class":567},[562,5296,1774],{"class":588},[562,5298,651],{"class":567},[562,5300,3073],{"class":567},[562,5302,5303,5305,5307,5309,5312,5314,5317,5319,5321,5323],{"class":564,"line":2078},[562,5304,5259],{"class":571},[562,5306,2289],{"class":567},[562,5308,5264],{"class":608},[562,5310,5311],{"class":1688},"0.7",[562,5313,1624],{"class":567},[562,5315,5316],{"class":1688}," 32",[562,5318,1624],{"class":567},[562,5320,5316],{"class":1688},[562,5322,1702],{"class":608},[562,5324,3073],{"class":567},[562,5326,5327],{"class":564,"line":2079},[562,5328,3127],{"class":567},[562,5330,5331],{"class":564,"line":2080},[562,5332,5239],{"class":567},[562,5334,5335,5337,5339,5341,5343,5345],{"class":564,"line":2081},[562,5336,5244],{"class":571},[562,5338,2289],{"class":567},[562,5340,618],{"class":567},[562,5342,2781],{"class":588},[562,5344,651],{"class":567},[562,5346,3073],{"class":567},[562,5348,5349,5351,5353,5355,5357,5359,5362,5364,5367,5369,5372,5374],{"class":564,"line":2593},[562,5350,5259],{"class":571},[562,5352,2289],{"class":567},[562,5354,5264],{"class":608},[562,5356,1879],{"class":1688},[562,5358,1624],{"class":567},[562,5360,5361],{"class":1688}," 0.2",[562,5363,1624],{"class":567},[562,5365,5366],{"class":1688}," 16",[562,5368,1624],{"class":567},[562,5370,5371],{"class":1688}," 100",[562,5373,1702],{"class":608},[562,5375,3073],{"class":567},[562,5377,5378,5381,5383,5385,5388,5390,5392,5394,5397,5399,5401],{"class":564,"line":2599},[562,5379,5380],{"class":571},"    bind",[562,5382,2289],{"class":567},[562,5384,605],{"class":567},[562,5386,5387],{"class":571}," castShadow",[562,5389,2289],{"class":567},[562,5391,3070],{"class":2561},[562,5393,1624],{"class":567},[562,5395,5396],{"class":571}," receiveShadow",[562,5398,2289],{"class":567},[562,5400,3070],{"class":2561},[562,5402,5403],{"class":567}," },\n",[562,5405,5406],{"class":564,"line":2608},[562,5407,3127],{"class":567},[562,5409,5410],{"class":564,"line":2642},[562,5411,5412],{"class":608},"]\n",[562,5414,5415],{"class":564,"line":2647},[562,5416,630],{"emptyLinePlaceholder":496},[562,5418,5420,5422,5425,5427,5429,5431,5434,5436,5438,5441,5443,5445],{"class":5419,"line":2655},[564,598],[562,5421,636],{"class":575},[562,5423,5424],{"class":608}," customGeometry ",[562,5426,582],{"class":567},[562,5428,2178],{"class":644},[562,5430,648],{"class":608},[562,5432,5433],{"class":567},"new",[562,5435,5114],{"class":644},[562,5437,648],{"class":608},[562,5439,5440],{"class":1688},"1.25",[562,5442,1624],{"class":567},[562,5444,5316],{"class":1688},[562,5446,5447],{"class":608},"))\n",[562,5449,5450],{"class":564,"line":2672},[562,5451,630],{"emptyLinePlaceholder":496},[562,5453,5455,5457,5460,5462,5464,5466,5468,5470,5472],{"class":5454,"line":2702},[564,598],[562,5456,636],{"class":575},[562,5458,5459],{"class":608}," customMaterial ",[562,5461,582],{"class":567},[562,5463,2178],{"class":644},[562,5465,648],{"class":608},[562,5467,5433],{"class":567},[562,5469,5119],{"class":644},[562,5471,648],{"class":608},[562,5473,3059],{"class":567},[562,5475,5477,5479,5481,5483,5486,5488],{"class":5476,"line":2707},[564,598],[562,5478,4237],{"class":571},[562,5480,2289],{"class":567},[562,5482,618],{"class":567},[562,5484,5485],{"class":588},"red",[562,5487,651],{"class":567},[562,5489,3073],{"class":567},[562,5491,5493,5496,5498,5501],{"class":5492,"line":2716},[564,598],[562,5494,5495],{"class":571},"  side",[562,5497,2289],{"class":567},[562,5499,5500],{"class":1688}," 2",[562,5502,3073],{"class":567},[562,5504,5506,5509,5511,5513],{"class":5505,"line":2721},[564,598],[562,5507,5508],{"class":571},"  opacity",[562,5510,2289],{"class":567},[562,5512,3119],{"class":1688},[562,5514,3073],{"class":567},[562,5516,5518,5521,5523,5525],{"class":5517,"line":2729},[564,598],[562,5519,5520],{"class":571},"  transparent",[562,5522,2289],{"class":567},[562,5524,3070],{"class":2561},[562,5526,3073],{"class":567},[562,5528,5530,5532],{"class":5529,"line":2742},[564,598],[562,5531,3133],{"class":567},[562,5533,5447],{"class":608},[562,5535,5536,5538,5540],{"class":564,"line":2770},[562,5537,665],{"class":567},[562,5539,572],{"class":571},[562,5541,594],{"class":567},[562,5543,5544],{"class":564,"line":2776},[562,5545,630],{"emptyLinePlaceholder":496},[562,5547,5548,5550,5552],{"class":564,"line":2816},[562,5549,568],{"class":567},[562,5551,682],{"class":571},[562,5553,594],{"class":567},[562,5555,5556,5558,5561,5563,5565,5567,5570,5572],{"class":564,"line":2826},[562,5557,690],{"class":567},[562,5559,5560],{"class":571},"div",[562,5562,2947],{"class":575},[562,5564,582],{"class":567},[562,5566,585],{"class":567},[562,5568,5569],{"class":588},"html-demo-wrapper aspect-video",[562,5571,585],{"class":567},[562,5573,594],{"class":567},[562,5575,5576,5578,5580,5583,5585,5587,5590,5592],{"class":564,"line":2835},[562,5577,701],{"class":567},[562,5579,693],{"class":571},[562,5581,5582],{"class":575}," v-bind",[562,5584,582],{"class":567},[562,5586,585],{"class":567},[562,5588,5589],{"class":608},"gl",[562,5591,585],{"class":567},[562,5593,594],{"class":567},[562,5595,5596,5598,5600,5602,5604,5606,5608,5610,5612,5614,5617,5619,5622,5624,5626],{"class":564,"line":2844},[562,5597,712],{"class":567},[562,5599,1672],{"class":571},[562,5601,1675],{"class":567},[562,5603,1678],{"class":575},[562,5605,582],{"class":567},[562,5607,585],{"class":567},[562,5609,1685],{"class":567},[562,5611,1115],{"class":1688},[562,5613,1691],{"class":567},[562,5615,5616],{"class":1688},"1.5",[562,5618,1691],{"class":567},[562,5620,5621],{"class":1688},"7.5",[562,5623,1702],{"class":567},[562,5625,585],{"class":567},[562,5627,1707],{"class":567},[562,5629,5631,5633,5635],{"class":564,"line":5630},46,[562,5632,712],{"class":567},[562,5634,1714],{"class":571},[562,5636,1707],{"class":567},[562,5638,5640],{"class":564,"line":5639},47,[562,5641,630],{"emptyLinePlaceholder":496},[562,5643,5645,5647],{"class":564,"line":5644},48,[562,5646,712],{"class":567},[562,5648,5649],{"class":571},"Levioso\n",[562,5651,5653,5656,5658,5660,5662,5665,5667,5670,5673,5676],{"class":564,"line":5652},49,[562,5654,5655],{"class":601},"        v-for",[562,5657,582],{"class":567},[562,5659,585],{"class":567},[562,5661,648],{"class":567},[562,5663,5664],{"class":608},"geometry",[562,5666,1691],{"class":567},[562,5668,5669],{"class":608},"index",[562,5671,5672],{"class":567},") in ",[562,5674,5675],{"class":608},"geometries",[562,5677,731],{"class":567},[562,5679,5681,5683,5686,5688,5691,5694,5697,5699],{"class":564,"line":5680},50,[562,5682,752],{"class":567},[562,5684,5685],{"class":575},"key",[562,5687,582],{"class":567},[562,5689,5690],{"class":567},"\"`",[562,5692,5693],{"class":588},"html-occlude-blending-demo-",[562,5695,5696],{"class":567},"${",[562,5698,5669],{"class":608},[562,5700,5701],{"class":567},"}`\"\n",[562,5703,5705,5707,5710,5712,5714,5716],{"class":564,"line":5704},51,[562,5706,752],{"class":567},[562,5708,5709],{"class":575},"speed",[562,5711,582],{"class":567},[562,5713,585],{"class":567},[562,5715,2755],{"class":1688},[562,5717,731],{"class":567},[562,5719,5721,5723,5726,5728,5730,5733],{"class":564,"line":5720},52,[562,5722,752],{"class":567},[562,5724,5725],{"class":575},"float-factor",[562,5727,582],{"class":567},[562,5729,585],{"class":567},[562,5731,5732],{"class":1688},"3.5",[562,5734,731],{"class":567},[562,5736,5738,5740,5743,5745,5747,5749],{"class":564,"line":5737},53,[562,5739,752],{"class":567},[562,5741,5742],{"class":575},"rotation-factor",[562,5744,582],{"class":567},[562,5746,585],{"class":567},[562,5748,1788],{"class":1688},[562,5750,731],{"class":567},[562,5752,5754,5756,5759,5761,5763,5766,5769,5771,5773,5775],{"class":564,"line":5753},54,[562,5755,752],{"class":567},[562,5757,5758],{"class":575},"range",[562,5760,582],{"class":567},[562,5762,585],{"class":567},[562,5764,5765],{"class":567},"[-",[562,5767,5768],{"class":1688},"0.35",[562,5770,1691],{"class":567},[562,5772,5768],{"class":1688},[562,5774,1702],{"class":567},[562,5776,731],{"class":567},[562,5778,5780],{"class":564,"line":5779},55,[562,5781,4118],{"class":567},[562,5783,5785,5787,5789,5791,5793,5795,5797,5799,5801,5804,5806,5809,5811,5813,5815,5817,5819,5821,5823,5825,5827,5829,5831,5833,5836,5838],{"class":564,"line":5784},56,[562,5786,1771],{"class":567},[562,5788,1764],{"class":571},[562,5790,1675],{"class":567},[562,5792,1678],{"class":575},[562,5794,582],{"class":567},[562,5796,585],{"class":567},[562,5798,1685],{"class":567},[562,5800,5669],{"class":608},[562,5802,5803],{"class":567}," * ",[562,5805,5732],{"class":1688},[562,5807,5808],{"class":567}," - ",[562,5810,5732],{"class":1688},[562,5812,1691],{"class":567},[562,5814,1788],{"class":1688},[562,5816,1691],{"class":567},[562,5818,1115],{"class":1688},[562,5820,1702],{"class":567},[562,5822,585],{"class":567},[562,5824,5582],{"class":575},[562,5826,582],{"class":567},[562,5828,585],{"class":567},[562,5830,5664],{"class":608},[562,5832,811],{"class":567},[562,5834,5835],{"class":608},"bind",[562,5837,585],{"class":567},[562,5839,594],{"class":567},[562,5841,5843,5846,5849,5851,5854,5856,5858,5860,5862,5864,5866,5868,5870,5872,5874,5876,5878,5880,5882],{"class":564,"line":5842},57,[562,5844,5845],{"class":567},"          \u003C",[562,5847,5848],{"class":571},"component",[562,5850,1675],{"class":567},[562,5852,5853],{"class":575},"is",[562,5855,582],{"class":567},[562,5857,585],{"class":567},[562,5859,5664],{"class":608},[562,5861,811],{"class":567},[562,5863,5848],{"class":608},[562,5865,585],{"class":567},[562,5867,1675],{"class":567},[562,5869,1779],{"class":575},[562,5871,582],{"class":567},[562,5873,585],{"class":567},[562,5875,5664],{"class":608},[562,5877,811],{"class":567},[562,5879,1779],{"class":608},[562,5881,585],{"class":567},[562,5883,1707],{"class":567},[562,5885,5887,5889,5891],{"class":564,"line":5886},58,[562,5888,5845],{"class":567},[562,5890,2821],{"class":571},[562,5892,1707],{"class":567},[562,5894,5896,5899,5901],{"class":564,"line":5895},59,[562,5897,5898],{"class":567},"        \u003C/",[562,5900,1764],{"class":571},[562,5902,594],{"class":567},[562,5904,5906,5908,5911],{"class":564,"line":5905},60,[562,5907,1843],{"class":567},[562,5909,5910],{"class":571},"Levioso",[562,5912,594],{"class":567},[562,5914,5916],{"class":564,"line":5915},61,[562,5917,630],{"emptyLinePlaceholder":496},[562,5919,5921,5923],{"class":5920,"line":4976},[564,598],[562,5922,712],{"class":567},[562,5924,4028],{"class":571},[562,5926,5928],{"class":5927,"line":4977},[564,598],[562,5929,4034],{"class":575},[562,5931,5933],{"class":5932,"line":4978},[564,598],[562,5934,4040],{"class":575},[562,5936,5938,5941,5943,5945,5947],{"class":5937,"line":4979},[564,598],[562,5939,5940],{"class":575},"        occlude",[562,5942,582],{"class":567},[562,5944,585],{"class":567},[562,5946,4946],{"class":588},[562,5948,731],{"class":567},[562,5950,5952,5954,5956,5958,5960,5962,5964,5966,5969,5972,5974,5976],{"class":5951,"line":4980},[564,598],[562,5953,752],{"class":567},[562,5955,1678],{"class":575},[562,5957,582],{"class":567},[562,5959,585],{"class":567},[562,5961,5765],{"class":567},[562,5963,1912],{"class":1688},[562,5965,1691],{"class":567},[562,5967,5968],{"class":1688},".75",[562,5970,5971],{"class":567},", -",[562,5973,1694],{"class":1688},[562,5975,1702],{"class":567},[562,5977,731],{"class":567},[562,5979,5981,5983,5986,5988,5990,5992,5995,5997,5999,6001],{"class":5980,"line":4981},[564,598],[562,5982,752],{"class":567},[562,5984,5985],{"class":575},"z-index-range",[562,5987,582],{"class":567},[562,5989,585],{"class":567},[562,5991,1685],{"class":567},[562,5993,5994],{"class":1688},"28",[562,5996,1691],{"class":567},[562,5998,1115],{"class":1688},[562,6000,1702],{"class":567},[562,6002,731],{"class":567},[562,6004,6006],{"class":6005,"line":4982},[564,598],[562,6007,4118],{"class":567},[562,6009,6011,6013,6015,6017,6019,6021,6024,6026],{"class":6010,"line":4983},[564,598],[562,6012,1771],{"class":567},[562,6014,5560],{"class":571},[562,6016,2947],{"class":575},[562,6018,582],{"class":567},[562,6020,585],{"class":567},[562,6022,6023],{"class":588},"text-center text-s p-2 bg-[#1B1C1E] text-light",[562,6025,585],{"class":567},[562,6027,594],{"class":567},[562,6029,6031,6034,6036,6038],{"class":6030,"line":4984},[564,598],[562,6032,6033],{"class":608},"          BASIC 💛 ",[562,6035,568],{"class":567},[562,6037,908],{"class":571},[562,6039,1707],{"class":567},[562,6041,6043,6045,6047,6049,6052,6054,6056],{"class":6042,"line":4985},[564,598],[562,6044,5845],{"class":567},[562,6046,4741],{"class":571},[562,6048,2217],{"class":567},[562,6050,6051],{"class":608},"occlude=blending",[562,6053,665],{"class":567},[562,6055,4741],{"class":571},[562,6057,594],{"class":567},[562,6059,6061,6063,6065],{"class":6060,"line":4986},[564,598],[562,6062,5898],{"class":567},[562,6064,5560],{"class":571},[562,6066,594],{"class":567},[562,6068,6070,6072,6074],{"class":564,"line":6069},73,[562,6071,1843],{"class":567},[562,6073,4154],{"class":571},[562,6075,594],{"class":567},[562,6077,6079],{"class":6078,"line":4987},[564,598],[562,6080,630],{"emptyLinePlaceholder":496},[562,6082,6084,6086],{"class":6083,"line":4988},[564,598],[562,6085,712],{"class":567},[562,6087,4028],{"class":571},[562,6089,6091],{"class":6090,"line":4989},[564,598],[562,6092,4034],{"class":575},[562,6094,6096],{"class":6095,"line":4990},[564,598],[562,6097,4040],{"class":575},[562,6099,6101,6103,6105,6107,6109],{"class":6100,"line":4991},[564,598],[562,6102,5940],{"class":575},[562,6104,582],{"class":567},[562,6106,585],{"class":567},[562,6108,4946],{"class":588},[562,6110,731],{"class":567},[562,6112,6114,6116,6118,6120,6122,6124,6126,6128,6131,6133,6135,6137],{"class":6113,"line":4992},[564,598],[562,6115,752],{"class":567},[562,6117,1678],{"class":575},[562,6119,582],{"class":567},[562,6121,585],{"class":567},[562,6123,1685],{"class":567},[562,6125,1115],{"class":1688},[562,6127,1691],{"class":567},[562,6129,6130],{"class":1688},".85",[562,6132,5971],{"class":567},[562,6134,1694],{"class":1688},[562,6136,1702],{"class":567},[562,6138,731],{"class":567},[562,6140,6142,6144,6146,6148,6150,6153],{"class":6141,"line":4993},[564,598],[562,6143,752],{"class":567},[562,6145,5664],{"class":575},[562,6147,582],{"class":567},[562,6149,585],{"class":567},[562,6151,6152],{"class":608},"customGeometry",[562,6154,731],{"class":567},[562,6156,6158,6160,6162,6164,6166,6168,6170,6172,6174,6176],{"class":6157,"line":4994},[564,598],[562,6159,752],{"class":567},[562,6161,5985],{"class":575},[562,6163,582],{"class":567},[562,6165,585],{"class":567},[562,6167,1685],{"class":567},[562,6169,5994],{"class":1688},[562,6171,1691],{"class":567},[562,6173,1115],{"class":1688},[562,6175,1702],{"class":567},[562,6177,731],{"class":567},[562,6179,6181],{"class":6180,"line":4995},[564,598],[562,6182,4118],{"class":567},[562,6184,6186,6188,6190,6192,6194,6196,6199,6201],{"class":6185,"line":4996},[564,598],[562,6187,1771],{"class":567},[562,6189,5560],{"class":571},[562,6191,2947],{"class":575},[562,6193,582],{"class":567},[562,6195,585],{"class":567},[562,6197,6198],{"class":588},"text-xs p-8 text-center bg-[#F6B03B] text-dark",[562,6200,585],{"class":567},[562,6202,594],{"class":567},[562,6204,6206,6209,6211,6213,6216,6219,6221,6223,6226,6228,6230,6232,6235,6237,6239],{"class":6205,"line":4997},[564,598],[562,6207,6208],{"class":608},"          CUSTOM ",[562,6210,568],{"class":567},[562,6212,908],{"class":571},[562,6214,6215],{"class":567}," />",[562,6217,6218],{"class":567}," \u003C",[562,6220,2872],{"class":571},[562,6222,2217],{"class":567},[562,6224,6225],{"class":608},"CIRCLE ",[562,6227,568],{"class":567},[562,6229,908],{"class":571},[562,6231,6215],{"class":567},[562,6233,6234],{"class":608}," GEOMETRY",[562,6236,665],{"class":567},[562,6238,2872],{"class":571},[562,6240,594],{"class":567},[562,6242,6244,6246,6248],{"class":564,"line":6243},85,[562,6245,5898],{"class":567},[562,6247,5560],{"class":571},[562,6249,594],{"class":567},[562,6251,6253,6255,6257],{"class":6252,"line":4998},[564,598],[562,6254,1843],{"class":567},[562,6256,4154],{"class":571},[562,6258,594],{"class":567},[562,6260,6262],{"class":6261,"line":4999},[564,598],[562,6263,630],{"emptyLinePlaceholder":496},[562,6265,6267,6269],{"class":6266,"line":5000},[564,598],[562,6268,712],{"class":567},[562,6270,4028],{"class":571},[562,6272,6274,6277,6279,6281,6284],{"class":6273,"line":5001},[564,598],[562,6275,6276],{"class":575},"        ref",[562,6278,582],{"class":567},[562,6280,585],{"class":567},[562,6282,6283],{"class":588},"targetDirectionLightRef",[562,6285,731],{"class":567},[562,6287,6289],{"class":6288,"line":5002},[564,598],[562,6290,4034],{"class":575},[562,6292,6294],{"class":6293,"line":5003},[564,598],[562,6295,4040],{"class":575},[562,6297,6299,6301,6303,6305,6307],{"class":6298,"line":5004},[564,598],[562,6300,5940],{"class":575},[562,6302,582],{"class":567},[562,6304,585],{"class":567},[562,6306,4946],{"class":588},[562,6308,731],{"class":567},[562,6310,6312,6314,6316,6318,6320,6322,6324,6326,6329,6331,6333,6335],{"class":6311,"line":5005},[564,598],[562,6313,752],{"class":567},[562,6315,1678],{"class":575},[562,6317,582],{"class":567},[562,6319,585],{"class":567},[562,6321,1685],{"class":567},[562,6323,1912],{"class":1688},[562,6325,1691],{"class":567},[562,6327,6328],{"class":1688},".5",[562,6330,5971],{"class":567},[562,6332,1694],{"class":1688},[562,6334,1702],{"class":567},[562,6336,731],{"class":567},[562,6338,6340,6342,6345,6347,6349,6352],{"class":6339,"line":5006},[564,598],[562,6341,752],{"class":567},[562,6343,6344],{"class":575},"material",[562,6346,582],{"class":567},[562,6348,585],{"class":567},[562,6350,6351],{"class":608},"customMaterial",[562,6353,731],{"class":567},[562,6355,6357],{"class":6356,"line":5007},[564,598],[562,6358,6359],{"class":575},"        receive-shadow\n",[562,6361,6363,6365,6367,6369,6371,6373,6375,6377,6379,6381],{"class":6362,"line":5008},[564,598],[562,6364,752],{"class":567},[562,6366,5985],{"class":575},[562,6368,582],{"class":567},[562,6370,585],{"class":567},[562,6372,1685],{"class":567},[562,6374,5994],{"class":1688},[562,6376,1691],{"class":567},[562,6378,1115],{"class":1688},[562,6380,1702],{"class":567},[562,6382,731],{"class":567},[562,6384,6386],{"class":564,"line":6385},97,[562,6387,4118],{"class":567},[562,6389,6391,6393,6395,6398,6400,6402,6404,6406,6409,6412,6414,6416,6419,6421,6424,6426,6429,6432,6434,6437,6439,6442,6444],{"class":6390,"line":5009},[564,598],[562,6392,1771],{"class":567},[562,6394,5560],{"class":571},[562,6396,6397],{"class":575}," style",[562,6399,582],{"class":567},[562,6401,585],{"class":567},[562,6403,2876],{"class":4220},[562,6405,2584],{"class":567},[562,6407,6408],{"class":1688},"100px",[562,6410,6411],{"class":567},"; ",[562,6413,2893],{"class":4220},[562,6415,2584],{"class":567},[562,6417,6418],{"class":608},"auto",[562,6420,6411],{"class":567},[562,6422,6423],{"class":4220},"aspect-ratio",[562,6425,2584],{"class":567},[562,6427,6428],{"class":1688},"250",[562,6430,6431],{"class":567},"/",[562,6433,6428],{"class":1688},[562,6435,6436],{"class":567},";",[562,6438,585],{"class":567},[562,6440,6441],{"class":567},">\u003C/",[562,6443,5560],{"class":571},[562,6445,594],{"class":567},[562,6447,6449,6451,6453],{"class":6448,"line":5010},[564,598],[562,6450,1843],{"class":567},[562,6452,4154],{"class":571},[562,6454,594],{"class":567},[562,6456,6458],{"class":6457,"line":5011},[564,598],[562,6459,630],{"emptyLinePlaceholder":496},[562,6461,6463,6465],{"class":6462,"line":5012},[564,598],[562,6464,712],{"class":567},[562,6466,4028],{"class":571},[562,6468,6470],{"class":6469,"line":5013},[564,598],[562,6471,4034],{"class":575},[562,6473,6475],{"class":6474,"line":5014},[564,598],[562,6476,4040],{"class":575},[562,6478,6480,6482,6484,6486,6488],{"class":6479,"line":5015},[564,598],[562,6481,5940],{"class":575},[562,6483,582],{"class":567},[562,6485,585],{"class":567},[562,6487,4946],{"class":588},[562,6489,731],{"class":567},[562,6491,6493,6495,6497,6499,6501,6503,6505,6507,6510,6512,6514,6516],{"class":6492,"line":5016},[564,598],[562,6494,752],{"class":567},[562,6496,1678],{"class":575},[562,6498,582],{"class":567},[562,6500,585],{"class":567},[562,6502,1685],{"class":567},[562,6504,1912],{"class":1688},[562,6506,1691],{"class":567},[562,6508,6509],{"class":1688},"2.5",[562,6511,5971],{"class":567},[562,6513,1694],{"class":1688},[562,6515,1702],{"class":567},[562,6517,731],{"class":567},[562,6519,6521,6523,6525,6527,6529,6531,6533,6535,6537,6539],{"class":6520,"line":5017},[564,598],[562,6522,752],{"class":567},[562,6524,5985],{"class":575},[562,6526,582],{"class":567},[562,6528,585],{"class":567},[562,6530,1685],{"class":567},[562,6532,5994],{"class":1688},[562,6534,1691],{"class":567},[562,6536,1115],{"class":1688},[562,6538,1702],{"class":567},[562,6540,731],{"class":567},[562,6542,6544],{"class":6543,"line":5018},[564,598],[562,6545,4118],{"class":567},[562,6547,6549,6551,6553,6555,6557,6559,6562,6564],{"class":6548,"line":5019},[564,598],[562,6550,1771],{"class":567},[562,6552,5560],{"class":571},[562,6554,2947],{"class":575},[562,6556,582],{"class":567},[562,6558,585],{"class":567},[562,6560,6561],{"class":588},"text-center text-xs p-2 text-dark bg-[#FF0000]",[562,6563,585],{"class":567},[562,6565,594],{"class":567},[562,6567,6569,6571,6573,6575,6578,6580,6582,6584,6586,6588],{"class":564,"line":6568},109,[562,6570,5845],{"class":567},[562,6572,2872],{"class":571},[562,6574,2217],{"class":567},[562,6576,6577],{"class":608},"HTML + Custom material ",[562,6579,665],{"class":567},[562,6581,2872],{"class":571},[562,6583,2217],{"class":567},[562,6585,6218],{"class":567},[562,6587,908],{"class":571},[562,6589,1707],{"class":567},[562,6591,6593,6595,6597,6599,6602,6604,6606,6608],{"class":564,"line":6592},110,[562,6594,5845],{"class":567},[562,6596,4741],{"class":571},[562,6598,2217],{"class":567},[562,6600,6601],{"class":608},"+ receive-shadow ",[562,6603,665],{"class":567},[562,6605,4741],{"class":571},[562,6607,2217],{"class":567},[562,6609,6610],{"class":608}," ⬇️\n",[562,6612,6614,6616,6618],{"class":564,"line":6613},111,[562,6615,5898],{"class":567},[562,6617,5560],{"class":571},[562,6619,594],{"class":567},[562,6621,6623,6625,6627],{"class":564,"line":6622},112,[562,6624,1843],{"class":567},[562,6626,4154],{"class":571},[562,6628,594],{"class":567},[562,6630,6632],{"class":564,"line":6631},113,[562,6633,630],{"emptyLinePlaceholder":496},[562,6635,6637,6639],{"class":564,"line":6636},114,[562,6638,712],{"class":567},[562,6640,6641],{"class":571},"TresDirectionalLight\n",[562,6643,6645,6648,6650,6652,6654,6656,6658],{"class":564,"line":6644},115,[562,6646,6647],{"class":601},"        v-if",[562,6649,582],{"class":567},[562,6651,585],{"class":567},[562,6653,6283],{"class":608},[562,6655,2686],{"class":567},[562,6657,2689],{"class":608},[562,6659,731],{"class":567},[562,6661,6663,6665,6668,6670,6672,6674,6676,6678],{"class":564,"line":6662},116,[562,6664,752],{"class":567},[562,6666,6667],{"class":575},"target",[562,6669,582],{"class":567},[562,6671,585],{"class":567},[562,6673,6283],{"class":608},[562,6675,2686],{"class":567},[562,6677,2689],{"class":608},[562,6679,731],{"class":567},[562,6681,6683,6685,6688,6690,6692,6695],{"class":564,"line":6682},117,[562,6684,752],{"class":567},[562,6686,6687],{"class":575},"shadow-normalBias",[562,6689,582],{"class":567},[562,6691,585],{"class":567},[562,6693,6694],{"class":1688},"0.075",[562,6696,731],{"class":567},[562,6698,6700,6702,6704,6706,6708,6710,6712,6714,6716,6718,6720,6722],{"class":564,"line":6699},118,[562,6701,752],{"class":567},[562,6703,1678],{"class":575},[562,6705,582],{"class":567},[562,6707,585],{"class":567},[562,6709,1685],{"class":567},[562,6711,1699],{"class":1688},[562,6713,1691],{"class":567},[562,6715,1115],{"class":1688},[562,6717,1691],{"class":567},[562,6719,1699],{"class":1688},[562,6721,1702],{"class":567},[562,6723,731],{"class":567},[562,6725,6727,6729,6731,6733,6735,6737],{"class":564,"line":6726},119,[562,6728,752],{"class":567},[562,6730,1872],{"class":575},[562,6732,582],{"class":567},[562,6734,585],{"class":567},[562,6736,1694],{"class":1688},[562,6738,731],{"class":567},[562,6740,6742],{"class":564,"line":6741},120,[562,6743,6744],{"class":575},"        cast-shadow\n",[562,6746,6748],{"class":564,"line":6747},121,[562,6749,770],{"class":567},[562,6751,6753],{"class":564,"line":6752},122,[562,6754,630],{"emptyLinePlaceholder":496},[562,6756,6758,6760,6762,6764,6767,6769,6771,6774,6776,6778],{"class":564,"line":6757},123,[562,6759,712],{"class":567},[562,6761,2499],{"class":571},[562,6763,1675],{"class":567},[562,6765,6766],{"class":575},"position-y",[562,6768,582],{"class":567},[562,6770,585],{"class":567},[562,6772,6773],{"class":567},"-",[562,6775,1788],{"class":1688},[562,6777,585],{"class":567},[562,6779,1707],{"class":567},[562,6781,6783,6785,6787,6789,6791,6793,6795,6797,6799],{"class":564,"line":6782},124,[562,6784,712],{"class":567},[562,6786,1867],{"class":571},[562,6788,1675],{"class":567},[562,6790,1872],{"class":575},[562,6792,582],{"class":567},[562,6794,585],{"class":567},[562,6796,1788],{"class":1688},[562,6798,585],{"class":567},[562,6800,1707],{"class":567},[562,6802,6804,6806,6808],{"class":564,"line":6803},125,[562,6805,776],{"class":567},[562,6807,693],{"class":571},[562,6809,594],{"class":567},[562,6811,6813,6815,6817],{"class":564,"line":6812},126,[562,6814,786],{"class":567},[562,6816,5560],{"class":571},[562,6818,594],{"class":567},[562,6820,6822,6824,6826],{"class":564,"line":6821},127,[562,6823,665],{"class":567},[562,6825,682],{"class":571},[562,6827,594],{"class":567},[562,6829,6831],{"class":564,"line":6830},128,[562,6832,630],{"emptyLinePlaceholder":496},[562,6834,6836,6838,6840,6842],{"class":564,"line":6835},129,[562,6837,568],{"class":567},[562,6839,1536],{"class":571},[562,6841,4205],{"class":575},[562,6843,594],{"class":567},[562,6845,6847,6849,6852],{"class":564,"line":6846},130,[562,6848,811],{"class":567},[562,6850,6851],{"class":2208},"html-demo-wrapper",[562,6853,2298],{"class":567},[562,6855,6857,6859,6861,6864],{"class":564,"line":6856},131,[562,6858,3079],{"class":4220},[562,6860,2289],{"class":567},[562,6862,6863],{"class":1688}," 100%",[562,6865,4232],{"class":567},[562,6867,6869,6871,6873,6875],{"class":564,"line":6868},132,[562,6870,3092],{"class":4220},[562,6872,2289],{"class":567},[562,6874,6863],{"class":1688},[562,6876,4232],{"class":567},[562,6878,6880,6883,6885,6888],{"class":564,"line":6879},133,[562,6881,6882],{"class":4220},"  position",[562,6884,2289],{"class":567},[562,6886,6887],{"class":608}," relative",[562,6889,4232],{"class":567},[562,6891,6893,6896,6898,6901],{"class":564,"line":6892},134,[562,6894,6895],{"class":4220},"  overflow",[562,6897,2289],{"class":567},[562,6899,6900],{"class":608}," hidden",[562,6902,4232],{"class":567},[562,6904,6906,6908,6910,6912,6915],{"class":564,"line":6905},135,[562,6907,4221],{"class":4220},[562,6909,2289],{"class":567},[562,6911,4226],{"class":567},[562,6913,6914],{"class":608},"82dbc5",[562,6916,4232],{"class":567},[562,6918,6920],{"class":564,"line":6919},136,[562,6921,2390],{"class":567},[562,6923,6925,6927,6929],{"class":564,"line":6924},137,[562,6926,665],{"class":567},[562,6928,1536],{"class":571},[562,6930,594],{"class":567},[544,6932,6934],{"id":6933},"custom-geometry","Custom Geometry",[480,6936,6937,6938,6941,6942,6945,6946,6949,6950,6953,6954,6958],{},"By default, when using ",[518,6939,6940],{},"occlude=\"blending\"",", occlusion works correctly only with ",[2872,6943,6944],{},"rectangular HTML elements"," (using a ",[518,6947,6948],{},"PlaneGeometry",").\nFor ",[4741,6951,6952],{},"non-rectangular content",", you can use the ",[2872,6955,6956],{},[518,6957,5664],{}," prop to provide a matching custom geometry.",[480,6960,6961,6962,913,6965,6968,6969,6976,6977,811],{},"In the ",[2872,6963,6964],{},"demo above ⬆️",[4741,6966,6967],{},"(middle yellow example)",", a ",[523,6970,6973],{"href":6971,"rel":6972},"https://threejs.org/docs/#api/en/geometries/CircleGeometry",[527],[518,6974,6975],{},"CircleGeometry"," is used as a ",[2872,6978,6979],{},"custom geometry",[6981,6982,6983],"prose-list",{},[534,6984,6985,6994],{},[537,6986,1353,6987,6989,6990,6993],{},[518,6988,5664],{}," prop only defines the ",[2872,6991,6992],{},"occlusion shape"," in 3D and does not modify your HTML content.",[537,6995,6996,6997,7004,7005,7008,7009,7012,7013,7020],{},"You can provide any ",[523,6998,7001],{"href":6999,"rel":7000},"https://threejs.org/docs/#api/en/core/BufferGeometry",[527],[518,7002,7003],{},"BufferGeometry",", for example to simulate ",[2872,7006,7007],{},"CSS-like styles"," such as ",[518,7010,7011],{},"border-radius"," using a rounded rectangle or squircle geometry (see ",[523,7014,7017],{"href":7015,"rel":7016},"https://discourse.threejs.org/t/roundedrectangle-squircle/28645",[527],[518,7018,7019],{},"RoundedRectangle / Squircle geometry"," for example).",[7022,7023,7025],"h4",{"id":7024},"custom-material","Custom Material",[480,7027,7028,7029,7031,7032,913,7034,6968,7037,7040],{},"You can also assign material properties to the HTML content using the ",[518,7030,6344],{}," prop.\nIn the ",[2872,7033,6964],{},[4741,7035,7036],{},"(right red example)",[2872,7038,7039],{},"custom material"," is used with shadow.",[7042,7043,7044],"prose-note",{},[480,7045,1353,7046,7048,7049,7051,7052,811],{},[518,7047,6344],{}," prop is only available when ",[518,7050,6940],{}," is ",[2872,7053,7054],{},"enabled",[7042,7056,7057],{},[480,7058,7059,7060,3671,7065,7070,7071,7074,7075,7077,7078,7081,7082,7087,7088,7093,7094],{},"Enable shadows using the ",[2872,7061,7062],{},[518,7063,7064],{},"castShadow",[2872,7066,7067],{},[518,7068,7069],{},"receiveShadow"," props.\nShadows are supported ",[2872,7072,7073],{},"only"," when using a ",[2872,7076,7039],{},". By default, shadows do ",[2872,7079,7080],{},"not"," work with ",[4741,7083,7084],{},[518,7085,7086],{},"MeshBasicMaterial"," or ",[4741,7089,7090],{},[518,7091,7092],{},"ShaderMaterial",". ",[908,7095],{},[544,7097,7099,7100],{"id":7098},"using-transition","Using ",[518,7101,7102],{},"\u003CTransition>",[480,7104,7105,7106,7112,7113,7115,7116,7119,7120,3671,7123,7126],{},"The native Vue ",[523,7107,7110],{"href":7108,"rel":7109},"https://vuejs.org/guide/built-ins/transition",[527],[518,7111,7102],{}," component works seamlessly with ",[518,7114,3816],{},".\nThis means you can ",[2872,7117,7118],{},"animate"," how your projected HTML content ",[4741,7121,7122],{},"enters",[4741,7124,7125],{},"leaves"," the scene, exactly as you would in a regular Vue application.",[7042,7128,7129],{},[480,7130,7131,7132,7135,7136,1691,7139,7141,7142,7145],{},"All ",[2872,7133,7134],{},"standard interactions"," are supported just like on a regular HTML element — ",[2872,7137,7138],{},"hover effects",[2872,7140,1276],{},", and ",[4741,7143,7144],{},"any kind of DOM interaction"," are fully possible.",[510,7147,7148],{},[7149,7150],"objects-html-transition-demo",{},[4341,7152,4343,7153,7155],{},[4345,7154,4347],{},[548,7156,7159],{"className":550,"code":7157,"highlights":7158,"language":558,"meta":488,"style":488},"\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",[490,6069,4987,4988,4989,4990,4991,4992,4993,4994,4995,4996,4997,6243,4998,4999,5000,5001,5002,5003,5004],[518,7160,7161,7181,7208,7226,7244,7248,7258,7272,7283,7293,7303,7314,7318,7322,7343,7347,7369,7373,7383,7387,7401,7423,7427,7431,7445,7467,7471,7475,7489,7515,7519,7523,7538,7561,7565,7569,7573,7593,7666,7708,7732,7736,7740,7756,7772,7776,7784,7788,7796,7825,7854,7886,7907,7911,7917,7939,7957,7971,7985,7999,8022,8026,8082,8122,8130,8138,8146,8150,8156,8160,8164,8176,8202,8218,8241,8246,8268,8276,8291,8317,8332,8350,8356,8380,8398,8408,8417,8426,8431,8454,8475,8484,8493,8501,8505,8515,8523,8533,8543,8553,8563,8575,8579,8583,8597,8615,8619,8623,8632,8641,8651,8667,8671,8675,8684,8693,8711,8715,8719,8728,8737,8747,8761,8765],{"__ignoreMap":488},[562,7162,7163,7165,7167,7169,7171,7173,7175,7177,7179],{"class":564,"line":489},[562,7164,568],{"class":567},[562,7166,572],{"class":571},[562,7168,576],{"class":575},[562,7170,579],{"class":575},[562,7172,582],{"class":567},[562,7174,585],{"class":567},[562,7176,589],{"class":588},[562,7178,585],{"class":567},[562,7180,594],{"class":567},[562,7182,7184,7186,7188,7190,7192,7194,7196,7198,7200,7202,7204,7206],{"class":7183,"line":490},[564,598],[562,7185,602],{"class":601},[562,7187,605],{"class":567},[562,7189,3860],{"class":608},[562,7191,1624],{"class":567},[562,7193,5055],{"class":608},[562,7195,1624],{"class":567},[562,7197,1627],{"class":608},[562,7199,612],{"class":567},[562,7201,615],{"class":601},[562,7203,618],{"class":567},[562,7205,621],{"class":588},[562,7207,624],{"class":567},[562,7209,7210,7212,7214,7216,7218,7220,7222,7224],{"class":564,"line":627},[562,7211,602],{"class":601},[562,7213,605],{"class":567},[562,7215,2159],{"class":608},[562,7217,612],{"class":567},[562,7219,615],{"class":601},[562,7221,618],{"class":567},[562,7223,2148],{"class":588},[562,7225,624],{"class":567},[562,7227,7228,7230,7232,7234,7236,7238,7240,7242],{"class":564,"line":633},[562,7229,602],{"class":601},[562,7231,605],{"class":567},[562,7233,645],{"class":608},[562,7235,612],{"class":567},[562,7237,615],{"class":601},[562,7239,618],{"class":567},[562,7241,558],{"class":588},[562,7243,624],{"class":567},[562,7245,7246],{"class":564,"line":662},[562,7247,630],{"emptyLinePlaceholder":496},[562,7249,7250,7252,7254,7256],{"class":564,"line":672},[562,7251,636],{"class":575},[562,7253,5141],{"class":608},[562,7255,582],{"class":567},[562,7257,2298],{"class":567},[562,7259,7260,7262,7264,7266,7268,7270],{"class":564,"line":677},[562,7261,5150],{"class":571},[562,7263,2289],{"class":567},[562,7265,618],{"class":567},[562,7267,3928],{"class":588},[562,7269,651],{"class":567},[562,7271,3073],{"class":567},[562,7273,7274,7276,7278,7281],{"class":564,"line":687},[562,7275,5165],{"class":571},[562,7277,2289],{"class":567},[562,7279,7280],{"class":1688}," 0",[562,7282,3073],{"class":567},[562,7284,7285,7287,7289,7291],{"class":564,"line":698},[562,7286,5176],{"class":571},[562,7288,2289],{"class":567},[562,7290,3070],{"class":2561},[562,7292,3073],{"class":567},[562,7294,7295,7297,7299,7301],{"class":564,"line":553},[562,7296,5187],{"class":571},[562,7298,2289],{"class":567},[562,7300,3070],{"class":2561},[562,7302,3073],{"class":567},[562,7304,7305,7308,7310,7312],{"class":564,"line":554},[562,7306,7307],{"class":571},"  antialias",[562,7309,2289],{"class":567},[562,7311,3070],{"class":2561},[562,7313,3073],{"class":567},[562,7315,7316],{"class":564,"line":555},[562,7317,2390],{"class":567},[562,7319,7320],{"class":564,"line":556},[562,7321,630],{"emptyLinePlaceholder":496},[562,7323,7324,7326,7329,7331,7333,7335,7338,7340],{"class":564,"line":557},[562,7325,636],{"class":575},[562,7327,7328],{"class":608}," rootRef ",[562,7330,582],{"class":567},[562,7332,645],{"class":644},[562,7334,568],{"class":567},[562,7336,7337],{"class":2208},"HTMLElement",[562,7339,2217],{"class":567},[562,7341,7342],{"class":608},"()\n",[562,7344,7345],{"class":564,"line":773},[562,7346,630],{"emptyLinePlaceholder":496},[562,7348,7349,7351,7354,7356,7358,7360,7362,7365,7367],{"class":564,"line":783},[562,7350,636],{"class":575},[562,7352,7353],{"class":608}," bgColor ",[562,7355,582],{"class":567},[562,7357,645],{"class":644},[562,7359,648],{"class":608},[562,7361,651],{"class":567},[562,7363,7364],{"class":588},"#F6B03B",[562,7366,651],{"class":567},[562,7368,659],{"class":608},[562,7370,7371],{"class":564,"line":793},[562,7372,630],{"emptyLinePlaceholder":496},[562,7374,7375,7377,7379,7381],{"class":564,"line":1886},[562,7376,636],{"class":575},[562,7378,5229],{"class":608},[562,7380,582],{"class":567},[562,7382,5234],{"class":608},[562,7384,7385],{"class":564,"line":1921},[562,7386,5239],{"class":567},[562,7388,7389,7391,7393,7395,7397,7399],{"class":564,"line":1930},[562,7390,5244],{"class":571},[562,7392,2289],{"class":567},[562,7394,618],{"class":567},[562,7396,2613],{"class":588},[562,7398,651],{"class":567},[562,7400,3073],{"class":567},[562,7402,7403,7405,7407,7409,7411,7413,7415,7417,7419,7421],{"class":564,"line":2489},[562,7404,5259],{"class":571},[562,7406,2289],{"class":567},[562,7408,5264],{"class":608},[562,7410,1788],{"class":1688},[562,7412,1624],{"class":567},[562,7414,3119],{"class":1688},[562,7416,1624],{"class":567},[562,7418,3119],{"class":1688},[562,7420,1702],{"class":608},[562,7422,3073],{"class":567},[562,7424,7425],{"class":564,"line":2494},[562,7426,3127],{"class":567},[562,7428,7429],{"class":564,"line":2078},[562,7430,5239],{"class":567},[562,7432,7433,7435,7437,7439,7441,7443],{"class":564,"line":2079},[562,7434,5244],{"class":571},[562,7436,2289],{"class":567},[562,7438,618],{"class":567},[562,7440,1774],{"class":588},[562,7442,651],{"class":567},[562,7444,3073],{"class":567},[562,7446,7447,7449,7451,7453,7455,7457,7459,7461,7463,7465],{"class":564,"line":2080},[562,7448,5259],{"class":571},[562,7450,2289],{"class":567},[562,7452,5264],{"class":608},[562,7454,5311],{"class":1688},[562,7456,1624],{"class":567},[562,7458,5316],{"class":1688},[562,7460,1624],{"class":567},[562,7462,5316],{"class":1688},[562,7464,1702],{"class":608},[562,7466,3073],{"class":567},[562,7468,7469],{"class":564,"line":2081},[562,7470,3127],{"class":567},[562,7472,7473],{"class":564,"line":2593},[562,7474,5239],{"class":567},[562,7476,7477,7479,7481,7483,7485,7487],{"class":564,"line":2599},[562,7478,5244],{"class":571},[562,7480,2289],{"class":567},[562,7482,618],{"class":567},[562,7484,2781],{"class":588},[562,7486,651],{"class":567},[562,7488,3073],{"class":567},[562,7490,7491,7493,7495,7497,7499,7501,7503,7505,7507,7509,7511,7513],{"class":564,"line":2608},[562,7492,5259],{"class":571},[562,7494,2289],{"class":567},[562,7496,5264],{"class":608},[562,7498,1879],{"class":1688},[562,7500,1624],{"class":567},[562,7502,5361],{"class":1688},[562,7504,1624],{"class":567},[562,7506,5366],{"class":1688},[562,7508,1624],{"class":567},[562,7510,5371],{"class":1688},[562,7512,1702],{"class":608},[562,7514,3073],{"class":567},[562,7516,7517],{"class":564,"line":2642},[562,7518,3127],{"class":567},[562,7520,7521],{"class":564,"line":2647},[562,7522,5239],{"class":567},[562,7524,7525,7527,7529,7531,7534,7536],{"class":564,"line":2655},[562,7526,5244],{"class":571},[562,7528,2289],{"class":567},[562,7530,618],{"class":567},[562,7532,7533],{"class":588},"TresConeGeometry",[562,7535,651],{"class":567},[562,7537,3073],{"class":567},[562,7539,7540,7542,7544,7546,7548,7550,7553,7555,7557,7559],{"class":564,"line":2672},[562,7541,5259],{"class":571},[562,7543,2289],{"class":567},[562,7545,5264],{"class":608},[562,7547,5311],{"class":1688},[562,7549,1624],{"class":567},[562,7551,7552],{"class":1688}," 1.4",[562,7554,1624],{"class":567},[562,7556,5316],{"class":1688},[562,7558,1702],{"class":608},[562,7560,3073],{"class":567},[562,7562,7563],{"class":564,"line":2702},[562,7564,3127],{"class":567},[562,7566,7567],{"class":564,"line":2707},[562,7568,5412],{"class":608},[562,7570,7571],{"class":564,"line":2716},[562,7572,630],{"emptyLinePlaceholder":496},[562,7574,7575,7577,7580,7582,7585,7588,7591],{"class":564,"line":2721},[562,7576,636],{"class":575},[562,7578,7579],{"class":608}," getRandomBackgroundColor ",[562,7581,582],{"class":567},[562,7583,7584],{"class":567}," ():",[562,7586,7587],{"class":2208}," string",[562,7589,7590],{"class":575}," =>",[562,7592,2298],{"class":567},[562,7594,7595,7598,7601,7603,7605,7607,7609,7611,7613,7615,7617,7619,7621,7623,7626,7628,7630,7632,7635,7637,7639,7641,7644,7646,7648,7650,7653,7655,7657,7659,7662,7664],{"class":564,"line":2729},[562,7596,7597],{"class":575},"  const",[562,7599,7600],{"class":608}," colors",[562,7602,2351],{"class":567},[562,7604,5264],{"class":571},[562,7606,651],{"class":567},[562,7608,7364],{"class":588},[562,7610,651],{"class":567},[562,7612,1624],{"class":567},[562,7614,618],{"class":567},[562,7616,3928],{"class":588},[562,7618,651],{"class":567},[562,7620,1624],{"class":567},[562,7622,618],{"class":567},[562,7624,7625],{"class":588},"#FF5733",[562,7627,651],{"class":567},[562,7629,1624],{"class":567},[562,7631,618],{"class":567},[562,7633,7634],{"class":588},"#33FF57",[562,7636,651],{"class":567},[562,7638,1624],{"class":567},[562,7640,618],{"class":567},[562,7642,7643],{"class":588},"#3357FF",[562,7645,651],{"class":567},[562,7647,1624],{"class":567},[562,7649,618],{"class":567},[562,7651,7652],{"class":588},"#F333FF",[562,7654,651],{"class":567},[562,7656,1624],{"class":567},[562,7658,618],{"class":567},[562,7660,7661],{"class":588},"#33FFF5",[562,7663,651],{"class":567},[562,7665,5412],{"class":571},[562,7667,7668,7670,7673,7675,7678,7680,7683,7685,7688,7690,7693,7696,7699,7701,7703,7706],{"class":564,"line":2742},[562,7669,7597],{"class":575},[562,7671,7672],{"class":608}," idx",[562,7674,2351],{"class":567},[562,7676,7677],{"class":608}," Math",[562,7679,811],{"class":567},[562,7681,7682],{"class":644},"floor",[562,7684,648],{"class":571},[562,7686,7687],{"class":608},"Math",[562,7689,811],{"class":567},[562,7691,7692],{"class":644},"random",[562,7694,7695],{"class":571},"() ",[562,7697,7698],{"class":567},"*",[562,7700,7600],{"class":608},[562,7702,811],{"class":567},[562,7704,7705],{"class":608},"length",[562,7707,659],{"class":571},[562,7709,7710,7713,7715,7717,7720,7723,7726,7728,7730],{"class":564,"line":2770},[562,7711,7712],{"class":601},"  return",[562,7714,7600],{"class":608},[562,7716,1685],{"class":571},[562,7718,7719],{"class":608},"idx",[562,7721,7722],{"class":571},"] ",[562,7724,7725],{"class":567},"??",[562,7727,618],{"class":567},[562,7729,7364],{"class":588},[562,7731,624],{"class":567},[562,7733,7734],{"class":564,"line":2776},[562,7735,2390],{"class":567},[562,7737,7738],{"class":564,"line":2816},[562,7739,630],{"emptyLinePlaceholder":496},[562,7741,7742,7744,7747,7749,7752,7754],{"class":564,"line":2826},[562,7743,636],{"class":575},[562,7745,7746],{"class":608}," updateBackgroundColor ",[562,7748,582],{"class":567},[562,7750,7751],{"class":567}," ()",[562,7753,7590],{"class":575},[562,7755,2298],{"class":567},[562,7757,7758,7761,7763,7765,7767,7770],{"class":564,"line":2835},[562,7759,7760],{"class":608},"  bgColor",[562,7762,811],{"class":567},[562,7764,2317],{"class":608},[562,7766,2351],{"class":567},[562,7768,7769],{"class":644}," getRandomBackgroundColor",[562,7771,7342],{"class":571},[562,7773,7774],{"class":564,"line":2844},[562,7775,2390],{"class":567},[562,7777,7778,7780,7782],{"class":564,"line":5630},[562,7779,665],{"class":567},[562,7781,572],{"class":571},[562,7783,594],{"class":567},[562,7785,7786],{"class":564,"line":5639},[562,7787,630],{"emptyLinePlaceholder":496},[562,7789,7790,7792,7794],{"class":564,"line":5644},[562,7791,568],{"class":567},[562,7793,682],{"class":571},[562,7795,594],{"class":567},[562,7797,7798,7800,7802,7804,7806,7808,7811,7813,7815,7817,7819,7821,7823],{"class":564,"line":5652},[562,7799,690],{"class":567},[562,7801,5560],{"class":571},[562,7803,645],{"class":575},[562,7805,582],{"class":567},[562,7807,585],{"class":567},[562,7809,7810],{"class":588},"rootRef",[562,7812,585],{"class":567},[562,7814,2947],{"class":575},[562,7816,582],{"class":567},[562,7818,585],{"class":567},[562,7820,6851],{"class":588},[562,7822,585],{"class":567},[562,7824,594],{"class":567},[562,7826,7827,7829,7831,7833,7835,7837,7839,7841,7843,7845,7847,7850,7852],{"class":564,"line":5680},[562,7828,701],{"class":567},[562,7830,693],{"class":571},[562,7832,5582],{"class":575},[562,7834,582],{"class":567},[562,7836,585],{"class":567},[562,7838,5589],{"class":608},[562,7840,585],{"class":567},[562,7842,2947],{"class":575},[562,7844,582],{"class":567},[562,7846,585],{"class":567},[562,7848,7849],{"class":588},"!pointer-events-none",[562,7851,585],{"class":567},[562,7853,594],{"class":567},[562,7855,7856,7858,7860,7862,7864,7866,7868,7870,7872,7874,7876,7878,7880,7882,7884],{"class":564,"line":5704},[562,7857,712],{"class":567},[562,7859,1672],{"class":571},[562,7861,1675],{"class":567},[562,7863,1678],{"class":575},[562,7865,582],{"class":567},[562,7867,585],{"class":567},[562,7869,1685],{"class":567},[562,7871,1115],{"class":1688},[562,7873,1691],{"class":567},[562,7875,5616],{"class":1688},[562,7877,1691],{"class":567},[562,7879,5621],{"class":1688},[562,7881,1702],{"class":567},[562,7883,585],{"class":567},[562,7885,1707],{"class":567},[562,7887,7888,7890,7892,7894,7897,7899,7901,7903,7905],{"class":564,"line":5720},[562,7889,712],{"class":567},[562,7891,1714],{"class":571},[562,7893,1675],{"class":567},[562,7895,7896],{"class":575},"dom-element",[562,7898,582],{"class":567},[562,7900,585],{"class":567},[562,7902,7810],{"class":608},[562,7904,585],{"class":567},[562,7906,1707],{"class":567},[562,7908,7909],{"class":564,"line":5737},[562,7910,630],{"emptyLinePlaceholder":496},[562,7912,7913,7915],{"class":564,"line":5753},[562,7914,712],{"class":567},[562,7916,5649],{"class":571},[562,7918,7919,7921,7923,7925,7927,7929,7931,7933,7935,7937],{"class":564,"line":5779},[562,7920,5655],{"class":601},[562,7922,582],{"class":567},[562,7924,585],{"class":567},[562,7926,648],{"class":567},[562,7928,5664],{"class":608},[562,7930,1691],{"class":567},[562,7932,5669],{"class":608},[562,7934,5672],{"class":567},[562,7936,5675],{"class":608},[562,7938,731],{"class":567},[562,7940,7941,7943,7945,7947,7949,7951,7953,7955],{"class":564,"line":5784},[562,7942,752],{"class":567},[562,7944,5685],{"class":575},[562,7946,582],{"class":567},[562,7948,5690],{"class":567},[562,7950,5693],{"class":588},[562,7952,5696],{"class":567},[562,7954,5669],{"class":608},[562,7956,5701],{"class":567},[562,7958,7959,7961,7963,7965,7967,7969],{"class":564,"line":5842},[562,7960,752],{"class":567},[562,7962,5709],{"class":575},[562,7964,582],{"class":567},[562,7966,585],{"class":567},[562,7968,2755],{"class":1688},[562,7970,731],{"class":567},[562,7972,7973,7975,7977,7979,7981,7983],{"class":564,"line":5886},[562,7974,752],{"class":567},[562,7976,5725],{"class":575},[562,7978,582],{"class":567},[562,7980,585],{"class":567},[562,7982,5732],{"class":1688},[562,7984,731],{"class":567},[562,7986,7987,7989,7991,7993,7995,7997],{"class":564,"line":5895},[562,7988,752],{"class":567},[562,7990,5742],{"class":575},[562,7992,582],{"class":567},[562,7994,585],{"class":567},[562,7996,1788],{"class":1688},[562,7998,731],{"class":567},[562,8000,8001,8003,8005,8007,8009,8011,8014,8016,8018,8020],{"class":564,"line":5905},[562,8002,752],{"class":567},[562,8004,5758],{"class":575},[562,8006,582],{"class":567},[562,8008,585],{"class":567},[562,8010,5765],{"class":567},[562,8012,8013],{"class":1688},"0.4",[562,8015,1691],{"class":567},[562,8017,8013],{"class":1688},[562,8019,1702],{"class":567},[562,8021,731],{"class":567},[562,8023,8024],{"class":564,"line":5915},[562,8025,4118],{"class":567},[562,8027,8028,8030,8032,8034,8036,8038,8040,8043,8045,8048,8050,8052,8054,8056,8058,8061,8063,8066,8068,8070,8072,8074,8076,8078,8080],{"class":564,"line":4976},[562,8029,1771],{"class":567},[562,8031,1764],{"class":571},[562,8033,1675],{"class":567},[562,8035,1678],{"class":575},[562,8037,582],{"class":567},[562,8039,585],{"class":567},[562,8041,8042],{"class":567},"[(",[562,8044,5669],{"class":608},[562,8046,8047],{"class":567}," - (",[562,8049,5675],{"class":608},[562,8051,811],{"class":567},[562,8053,7705],{"class":608},[562,8055,5808],{"class":567},[562,8057,1788],{"class":1688},[562,8059,8060],{"class":567},") / ",[562,8062,1694],{"class":1688},[562,8064,8065],{"class":567},") * ",[562,8067,1694],{"class":1688},[562,8069,1691],{"class":567},[562,8071,1788],{"class":1688},[562,8073,1691],{"class":567},[562,8075,1115],{"class":1688},[562,8077,1702],{"class":567},[562,8079,585],{"class":567},[562,8081,594],{"class":567},[562,8083,8084,8086,8088,8090,8092,8094,8096,8098,8100,8102,8104,8106,8108,8110,8112,8114,8116,8118,8120],{"class":564,"line":4977},[562,8085,5845],{"class":567},[562,8087,5848],{"class":571},[562,8089,1675],{"class":567},[562,8091,5853],{"class":575},[562,8093,582],{"class":567},[562,8095,585],{"class":567},[562,8097,5664],{"class":608},[562,8099,811],{"class":567},[562,8101,5848],{"class":608},[562,8103,585],{"class":567},[562,8105,1675],{"class":567},[562,8107,1779],{"class":575},[562,8109,582],{"class":567},[562,8111,585],{"class":567},[562,8113,5664],{"class":608},[562,8115,811],{"class":567},[562,8117,1779],{"class":608},[562,8119,585],{"class":567},[562,8121,1707],{"class":567},[562,8123,8124,8126,8128],{"class":564,"line":4978},[562,8125,5845],{"class":567},[562,8127,2821],{"class":571},[562,8129,1707],{"class":567},[562,8131,8132,8134,8136],{"class":564,"line":4979},[562,8133,5898],{"class":567},[562,8135,1764],{"class":571},[562,8137,594],{"class":567},[562,8139,8140,8142,8144],{"class":564,"line":4980},[562,8141,1843],{"class":567},[562,8143,5910],{"class":571},[562,8145,594],{"class":567},[562,8147,8148],{"class":564,"line":4981},[562,8149,630],{"emptyLinePlaceholder":496},[562,8151,8152,8154],{"class":564,"line":4982},[562,8153,712],{"class":567},[562,8155,4028],{"class":571},[562,8157,8158],{"class":564,"line":4983},[562,8159,4034],{"class":575},[562,8161,8162],{"class":564,"line":4984},[562,8163,4040],{"class":575},[562,8165,8166,8168,8170,8172,8174],{"class":564,"line":4985},[562,8167,5940],{"class":575},[562,8169,582],{"class":567},[562,8171,585],{"class":567},[562,8173,4946],{"class":588},[562,8175,731],{"class":567},[562,8177,8178,8180,8182,8184,8186,8188,8190,8192,8194,8196,8198,8200],{"class":564,"line":4986},[562,8179,752],{"class":567},[562,8181,1678],{"class":575},[562,8183,582],{"class":567},[562,8185,585],{"class":567},[562,8187,1685],{"class":567},[562,8189,1115],{"class":1688},[562,8191,1691],{"class":567},[562,8193,5968],{"class":1688},[562,8195,5971],{"class":567},[562,8197,1694],{"class":1688},[562,8199,1702],{"class":567},[562,8201,731],{"class":567},[562,8203,8205,8207,8209,8211,8213,8216],{"class":8204,"line":6069},[564,598],[562,8206,752],{"class":567},[562,8208,4092],{"class":575},[562,8210,582],{"class":567},[562,8212,585],{"class":567},[562,8214,8215],{"class":1688},"1.15",[562,8217,731],{"class":567},[562,8219,8221,8223,8225,8227,8229,8231,8233,8235,8237,8239],{"class":8220,"line":4987},[564,598],[562,8222,752],{"class":567},[562,8224,5985],{"class":575},[562,8226,582],{"class":567},[562,8228,585],{"class":567},[562,8230,1685],{"class":567},[562,8232,5994],{"class":1688},[562,8234,1691],{"class":567},[562,8236,1115],{"class":1688},[562,8238,1702],{"class":567},[562,8240,731],{"class":567},[562,8242,8244],{"class":8243,"line":4988},[564,598],[562,8245,4118],{"class":567},[562,8247,8249,8251,8254,8257,8259,8261,8264,8266],{"class":8248,"line":4989},[564,598],[562,8250,1771],{"class":567},[562,8252,8253],{"class":571},"Transition",[562,8255,8256],{"class":575}," name",[562,8258,582],{"class":567},[562,8260,585],{"class":567},[562,8262,8263],{"class":588},"transition-basic",[562,8265,585],{"class":567},[562,8267,594],{"class":567},[562,8269,8271,8273],{"class":8270,"line":4990},[564,598],[562,8272,5845],{"class":567},[562,8274,8275],{"class":571},"h1\n",[562,8277,8279,8282,8284,8286,8289],{"class":8278,"line":4991},[564,598],[562,8280,8281],{"class":601},"            v-if",[562,8283,582],{"class":567},[562,8285,585],{"class":567},[562,8287,8288],{"class":608},"showTransition",[562,8290,731],{"class":567},[562,8292,8294,8297,8299,8301,8303,8305,8308,8310,8313,8315],{"class":8293,"line":4992},[564,598],[562,8295,8296],{"class":567},"            :",[562,8298,1536],{"class":575},[562,8300,582],{"class":567},[562,8302,585],{"class":567},[562,8304,2578],{"class":567},[562,8306,8307],{"class":571},"backgroundColor",[562,8309,2584],{"class":567},[562,8311,8312],{"class":608},"bgColor",[562,8314,612],{"class":567},[562,8316,731],{"class":567},[562,8318,8320,8323,8325,8327,8330],{"class":8319,"line":4993},[564,598],[562,8321,8322],{"class":575},"            class",[562,8324,582],{"class":567},[562,8326,585],{"class":567},[562,8328,8329],{"class":588},"html-demo-transition-heading will-change-transform transition-transform,background-color cursor-pointer duration-500 text-center p-2 text-light shadow-lg",[562,8331,731],{"class":567},[562,8333,8335,8338,8341,8343,8345,8348],{"class":8334,"line":4994},[564,598],[562,8336,8337],{"class":567},"            @",[562,8339,8340],{"class":575},"click",[562,8342,582],{"class":567},[562,8344,585],{"class":567},[562,8346,8347],{"class":608},"updateBackgroundColor",[562,8349,731],{"class":567},[562,8351,8353],{"class":8352,"line":4995},[564,598],[562,8354,8355],{"class":567},"          >\n",[562,8357,8359,8362,8364,8366,8369,8371,8373,8376,8378],{"class":8358,"line":4996},[564,598],[562,8360,8361],{"class":567},"            \u003C",[562,8363,2872],{"class":571},[562,8365,2217],{"class":567},[562,8367,8368],{"class":608},"TRANSITION + ",[562,8370,665],{"class":567},[562,8372,2872],{"class":571},[562,8374,8375],{"class":567},">\u003C",[562,8377,908],{"class":571},[562,8379,1707],{"class":567},[562,8381,8383,8385,8387,8389,8392,8394,8396],{"class":8382,"line":4997},[564,598],[562,8384,8361],{"class":567},[562,8386,4741],{"class":571},[562,8388,2217],{"class":567},[562,8390,8391],{"class":608},"occlude=blending 💛",[562,8393,665],{"class":567},[562,8395,4741],{"class":571},[562,8397,594],{"class":567},[562,8399,8401,8404,8406],{"class":8400,"line":6243},[564,598],[562,8402,8403],{"class":567},"          \u003C/",[562,8405,4125],{"class":571},[562,8407,594],{"class":567},[562,8409,8411,8413,8415],{"class":8410,"line":4998},[564,598],[562,8412,5898],{"class":567},[562,8414,8253],{"class":571},[562,8416,594],{"class":567},[562,8418,8420,8422,8424],{"class":8419,"line":4999},[564,598],[562,8421,1843],{"class":567},[562,8423,4154],{"class":571},[562,8425,594],{"class":567},[562,8427,8429],{"class":8428,"line":5000},[564,598],[562,8430,630],{"emptyLinePlaceholder":496},[562,8432,8434,8436,8438,8440,8442,8444,8446,8448,8450,8452],{"class":8433,"line":5001},[564,598],[562,8435,712],{"class":567},[562,8437,2499],{"class":571},[562,8439,1675],{"class":567},[562,8441,6766],{"class":575},[562,8443,582],{"class":567},[562,8445,585],{"class":567},[562,8447,6773],{"class":567},[562,8449,5440],{"class":1688},[562,8451,585],{"class":567},[562,8453,1707],{"class":567},[562,8455,8457,8459,8461,8463,8465,8467,8469,8471,8473],{"class":8456,"line":5002},[564,598],[562,8458,712],{"class":567},[562,8460,1867],{"class":571},[562,8462,1675],{"class":567},[562,8464,1872],{"class":575},[562,8466,582],{"class":567},[562,8468,585],{"class":567},[562,8470,1788],{"class":1688},[562,8472,585],{"class":567},[562,8474,1707],{"class":567},[562,8476,8478,8480,8482],{"class":8477,"line":5003},[564,598],[562,8479,776],{"class":567},[562,8481,693],{"class":571},[562,8483,594],{"class":567},[562,8485,8487,8489,8491],{"class":8486,"line":5004},[564,598],[562,8488,786],{"class":567},[562,8490,5560],{"class":571},[562,8492,594],{"class":567},[562,8494,8495,8497,8499],{"class":564,"line":5005},[562,8496,665],{"class":567},[562,8498,682],{"class":571},[562,8500,594],{"class":567},[562,8502,8503],{"class":564,"line":5006},[562,8504,630],{"emptyLinePlaceholder":496},[562,8506,8507,8509,8511,8513],{"class":564,"line":5007},[562,8508,568],{"class":567},[562,8510,1536],{"class":571},[562,8512,4205],{"class":575},[562,8514,594],{"class":567},[562,8516,8517,8519,8521],{"class":564,"line":5008},[562,8518,811],{"class":567},[562,8520,6851],{"class":2208},[562,8522,2298],{"class":567},[562,8524,8525,8527,8529,8531],{"class":564,"line":6385},[562,8526,3079],{"class":4220},[562,8528,2289],{"class":567},[562,8530,6863],{"class":1688},[562,8532,4232],{"class":567},[562,8534,8535,8537,8539,8541],{"class":564,"line":5009},[562,8536,3092],{"class":4220},[562,8538,2289],{"class":567},[562,8540,6863],{"class":1688},[562,8542,4232],{"class":567},[562,8544,8545,8547,8549,8551],{"class":564,"line":5010},[562,8546,6882],{"class":4220},[562,8548,2289],{"class":567},[562,8550,6887],{"class":608},[562,8552,4232],{"class":567},[562,8554,8555,8557,8559,8561],{"class":564,"line":5011},[562,8556,6895],{"class":4220},[562,8558,2289],{"class":567},[562,8560,6900],{"class":608},[562,8562,4232],{"class":567},[562,8564,8565,8567,8569,8571,8573],{"class":564,"line":5012},[562,8566,4221],{"class":4220},[562,8568,2289],{"class":567},[562,8570,4226],{"class":567},[562,8572,6914],{"class":608},[562,8574,4232],{"class":567},[562,8576,8577],{"class":564,"line":5013},[562,8578,2390],{"class":567},[562,8580,8581],{"class":564,"line":5014},[562,8582,630],{"emptyLinePlaceholder":496},[562,8584,8585,8587,8590,8592,8595],{"class":564,"line":5015},[562,8586,811],{"class":567},[562,8588,8589],{"class":2208},"html-demo-transition-heading",[562,8591,2289],{"class":567},[562,8593,8594],{"class":575},"hover",[562,8596,2298],{"class":567},[562,8598,8599,8602,8604,8607,8609,8612],{"class":564,"line":5016},[562,8600,8601],{"class":4220},"  transform",[562,8603,2289],{"class":567},[562,8605,8606],{"class":644}," scale",[562,8608,648],{"class":567},[562,8610,8611],{"class":1688},"1.05",[562,8613,8614],{"class":567},");\n",[562,8616,8617],{"class":564,"line":5017},[562,8618,2390],{"class":567},[562,8620,8621],{"class":564,"line":5018},[562,8622,630],{"emptyLinePlaceholder":496},[562,8624,8625,8627,8630],{"class":564,"line":5019},[562,8626,811],{"class":567},[562,8628,8629],{"class":2208},"transition-basic-enter-from",[562,8631,3073],{"class":567},[562,8633,8634,8636,8639],{"class":564,"line":6568},[562,8635,811],{"class":567},[562,8637,8638],{"class":2208},"transition-basic-leave-to",[562,8640,2298],{"class":567},[562,8642,8643,8645,8647,8649],{"class":564,"line":6592},[562,8644,5508],{"class":4220},[562,8646,2289],{"class":567},[562,8648,7280],{"class":1688},[562,8650,4232],{"class":567},[562,8652,8653,8655,8657,8660,8662,8665],{"class":564,"line":6613},[562,8654,8601],{"class":4220},[562,8656,2289],{"class":567},[562,8658,8659],{"class":644}," translateY",[562,8661,648],{"class":567},[562,8663,8664],{"class":1688},"-20px",[562,8666,8614],{"class":567},[562,8668,8669],{"class":564,"line":6622},[562,8670,2390],{"class":567},[562,8672,8673],{"class":564,"line":6631},[562,8674,630],{"emptyLinePlaceholder":496},[562,8676,8677,8679,8682],{"class":564,"line":6636},[562,8678,811],{"class":567},[562,8680,8681],{"class":2208},"transition-basic-enter-active",[562,8683,3073],{"class":567},[562,8685,8686,8688,8691],{"class":564,"line":6644},[562,8687,811],{"class":567},[562,8689,8690],{"class":2208},"transition-basic-leave-active",[562,8692,2298],{"class":567},[562,8694,8695,8698,8700,8703,8706,8709],{"class":564,"line":6662},[562,8696,8697],{"class":4220},"  transition",[562,8699,2289],{"class":567},[562,8701,8702],{"class":608}," all ",[562,8704,8705],{"class":1688},"0.5s",[562,8707,8708],{"class":608}," ease",[562,8710,4232],{"class":567},[562,8712,8713],{"class":564,"line":6682},[562,8714,2390],{"class":567},[562,8716,8717],{"class":564,"line":6699},[562,8718,630],{"emptyLinePlaceholder":496},[562,8720,8721,8723,8726],{"class":564,"line":6726},[562,8722,811],{"class":567},[562,8724,8725],{"class":2208},"transition-basic-enter-to",[562,8727,3073],{"class":567},[562,8729,8730,8732,8735],{"class":564,"line":6741},[562,8731,811],{"class":567},[562,8733,8734],{"class":2208},"transition-basic-leave-from",[562,8736,2298],{"class":567},[562,8738,8739,8741,8743,8745],{"class":564,"line":6747},[562,8740,5508],{"class":4220},[562,8742,2289],{"class":567},[562,8744,3119],{"class":1688},[562,8746,4232],{"class":567},[562,8748,8749,8751,8753,8755,8757,8759],{"class":564,"line":6752},[562,8750,8601],{"class":4220},[562,8752,2289],{"class":567},[562,8754,8659],{"class":644},[562,8756,648],{"class":567},[562,8758,1115],{"class":1688},[562,8760,8614],{"class":567},[562,8762,8763],{"class":564,"line":6757},[562,8764,2390],{"class":567},[562,8766,8767,8769,8771],{"class":564,"line":6782},[562,8768,665],{"class":567},[562,8770,1536],{"class":571},[562,8772,594],{"class":567},[889,8774,7099,8776],{"id":8775},"using-iframes",[518,8777,8778],{},"iframes",[480,8780,8781,8782,8784],{},"You can achieve pretty cool results with the ",[518,8783,4154],{}," 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.",[2057,8786,8787],{},[8788,8789],"objects-html-iframe-demo",{},[4341,8791,4343,8792,8794],{},[4345,8793,4347],{},[548,8795,8797],{"className":4350,"code":8796,"language":4352,"meta":488,"style":488},"\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",[518,8798,8799,8805,8810,8815,8828,8841,8854,8867,8880,8894,8908,8912,8983],{"__ignoreMap":488},[562,8800,8801,8803],{"class":564,"line":489},[562,8802,568],{"class":567},[562,8804,4802],{"class":571},[562,8806,8807],{"class":564,"line":490},[562,8808,8809],{"class":575},"  transform\n",[562,8811,8812],{"class":564,"line":627},[562,8813,8814],{"class":575},"  center\n",[562,8816,8817,8820,8822,8824,8826],{"class":564,"line":633},[562,8818,8819],{"class":575},"  :cast-shadow",[562,8821,582],{"class":567},[562,8823,585],{"class":567},[562,8825,1091],{"class":588},[562,8827,731],{"class":567},[562,8829,8830,8833,8835,8837,8839],{"class":564,"line":662},[562,8831,8832],{"class":575},"  :receive-shadow",[562,8834,582],{"class":567},[562,8836,585],{"class":567},[562,8838,1091],{"class":588},[562,8840,731],{"class":567},[562,8842,8843,8846,8848,8850,8852],{"class":564,"line":672},[562,8844,8845],{"class":575},"  occlude",[562,8847,582],{"class":567},[562,8849,585],{"class":567},[562,8851,4946],{"class":588},[562,8853,731],{"class":567},[562,8855,8856,8859,8861,8863,8865],{"class":564,"line":677},[562,8857,8858],{"class":575},"  :z-index-range",[562,8860,582],{"class":567},[562,8862,585],{"class":567},[562,8864,4436],{"class":588},[562,8866,731],{"class":567},[562,8868,8869,8872,8874,8876,8878],{"class":564,"line":687},[562,8870,8871],{"class":575},"  :position-y",[562,8873,582],{"class":567},[562,8875,585],{"class":567},[562,8877,6509],{"class":588},[562,8879,731],{"class":567},[562,8881,8882,8885,8887,8889,8892],{"class":564,"line":698},[562,8883,8884],{"class":575},"  :portal",[562,8886,582],{"class":567},[562,8888,585],{"class":567},[562,8890,8891],{"class":588},"portalRef",[562,8893,731],{"class":567},[562,8895,8896,8899,8901,8903,8906],{"class":564,"line":553},[562,8897,8898],{"class":575},"  :style",[562,8900,582],{"class":567},[562,8902,585],{"class":567},[562,8904,8905],{"class":588},"{ userSelect: 'none' }",[562,8907,731],{"class":567},[562,8909,8910],{"class":564,"line":554},[562,8911,594],{"class":567},[562,8913,8914,8916,8919,8921,8923,8925,8928,8930,8933,8935,8937,8940,8942,8945,8947,8949,8951,8953,8956,8958,8960,8963,8965,8968,8970,8972,8975,8977,8979,8981],{"class":564,"line":555},[562,8915,690],{"class":567},[562,8917,8918],{"class":571},"iframe",[562,8920,2947],{"class":575},[562,8922,582],{"class":567},[562,8924,585],{"class":567},[562,8926,8927],{"class":588},"w-[700px] h-[500px]",[562,8929,585],{"class":567},[562,8931,8932],{"class":575}," src",[562,8934,582],{"class":567},[562,8936,585],{"class":567},[562,8938,8939],{"class":588},"https://tresjs.org",[562,8941,585],{"class":567},[562,8943,8944],{"class":575}," frameborder",[562,8946,582],{"class":567},[562,8948,585],{"class":567},[562,8950,1115],{"class":588},[562,8952,585],{"class":567},[562,8954,8955],{"class":575}," :width",[562,8957,582],{"class":567},[562,8959,585],{"class":567},[562,8961,8962],{"class":588},"700",[562,8964,585],{"class":567},[562,8966,8967],{"class":575}," :height",[562,8969,582],{"class":567},[562,8971,585],{"class":567},[562,8973,8974],{"class":588},"500",[562,8976,585],{"class":567},[562,8978,6441],{"class":567},[562,8980,8918],{"class":571},[562,8982,594],{"class":567},[562,8984,8985,8987,8989],{"class":564,"line":556},[562,8986,665],{"class":567},[562,8988,4352],{"class":571},[562,8990,594],{"class":567},[8992,8993,8994],"info",{},[480,8995,8996,8997,9000,9001,9004,9005],{},"The demos use ",[518,8998,8999],{},":z-index-range=\"[28, 0]\""," simply to ensure the HTML elements stay below the documentation header (which uses ",[518,9002,9003],{},"z-index: 30",").\n",[2872,9006,9007],{},"This value is for the docs only — you can ignore it or adjust it as needed.",[544,9009,923],{"id":922},[925,9011,9012,9022],{},[928,9013,9014],{},[931,9015,9016,9018,9020],{},[934,9017,1947],{},[934,9019,940],{},[934,9021,943],{},[945,9023,9024,9042,9057,9075,9101,9121,9138,9156,9168,9187,9210,9250,9287,9307,9340],{},[931,9025,9026,9031,9037],{},[950,9027,9028],{},[2872,9029,9030],{},"as",[950,9032,9033,9034,811],{},"Wrapping ",[4741,9035,9036],{},"HTML element",[950,9038,9039],{},[518,9040,9041],{},"'div'",[931,9043,9044,9049,9055],{},[950,9045,9046],{},[2872,9047,9048],{},"wrapperClass",[950,9050,1353,9051,9054],{},[518,9052,9053],{},"className"," of the wrapping element. element.",[950,9056],{},[931,9058,9059,9064,9071],{},[950,9060,9061],{},[2872,9062,9063],{},"prepend",[950,9065,9066,9067,9070],{},"Projects content ",[4741,9068,9069],{},"behind"," the canvas.",[950,9072,9073],{},[518,9074,1130],{},[931,9076,9077,9081,9097],{},[950,9078,9079],{},[2872,9080,1196],{},[950,9082,9083,9084,7093,9087,9089,9090],{},"Adds a ",[518,9085,9086],{},"transform: translate(-50%, -50%)",[908,9088],{},"➡️ ",[4741,9091,9092,9093,9096],{},"Ignored in ",[2872,9094,9095],{},"transform"," mode.",[950,9098,9099],{},[518,9100,1130],{},[931,9102,9103,9108,9117],{},[950,9104,9105],{},[2872,9106,9107],{},"fullscreen",[950,9109,9110,9111,9089,9113],{},"Aligns to the upper-left corner and fills the screen. ",[908,9112],{},[4741,9114,9092,9115,9096],{},[2872,9116,9095],{},[950,9118,9119],{},[518,9120,1130],{},[931,9122,9123,9128,9136],{},[950,9124,9125],{},[2872,9126,9127],{},"distanceFactor",[950,9129,9130,9131,9133,9134,811],{},"Children are scaled by this factor and also by distance to a ",[518,9132,3809],{},", or zoom when using an ",[518,9135,3812],{},[950,9137],{},[931,9139,9140,9145,9151],{},[950,9141,9142],{},[2872,9143,9144],{},"zIndexRange",[950,9146,9147,9148,811],{},"Defines the ",[4741,9149,9150],{},"Z-order range",[950,9152,9153],{},[518,9154,9155],{},"[16777271, 0]",[931,9157,9158,9163,9166],{},[950,9159,9160],{},[2872,9161,9162],{},"portal",[950,9164,9165],{},"Reference to a target container (for rendering into a different DOM node). container.",[950,9167],{},[931,9169,9170,9174,9183],{},[950,9171,9172],{},[2872,9173,9095],{},[950,9175,975,9176,9178,9179,9182],{},[518,9177,1091],{},", applies ",[518,9180,9181],{},"matrix3d"," transformations — the element appears as if it is inside the 3D scene.",[950,9184,9185],{},[518,9186,1130],{},[931,9188,9189,9194,9206],{},[950,9190,9191],{},[2872,9192,9193],{},"sprite",[950,9195,9196,9197,7093,9199,9089,9201],{},"Renders as a ",[4741,9198,9193],{},[908,9200],{},[4741,9202,9203,9204,9096],{},"Only in ",[2872,9205,9095],{},[950,9207,9208],{},[518,9209,1130],{},[931,9211,9212,9217,9241],{},[950,9213,9214],{},[2872,9215,9216],{},"calculatePosition",[950,9218,9219,9220,9222,913,9225,913,9228,9230,9231,9234,9235,9089,9237],{},"Callback function to override the default positioning logic. ",[908,9221],{},[2872,9223,9224],{},"Type:",[518,9226,9227],{},"(object: Object3D, camera: Camera, size: { width: number; height: number }) => [number, number, number]",[908,9229],{},"Receives the related 3D object, the active camera, and the current viewport size, and must return ",[518,9232,9233],{},"[x, y, z]"," pixel coordinates for placing the HTML element. ",[908,9236],{},[4741,9238,9092,9239,9096],{},[2872,9240,9095],{},[950,9242,9243],{},[523,9244,9247,9248],{"href":9245,"rel":9246},"https://github.com/Tresjs/cientos/blob/main/src/core/misc/html/utils.ts#L9-L19",[527],"Default ",[518,9249,9216],{},[931,9251,9252,9256,9285],{},[950,9253,9254],{},[2872,9255,4304],{},[950,9257,9258,9259,9261,9262,9264,9265,9268,9269,5808,9271,9274,9275,9261,9277,9280,9281,9284],{},"Enables occlusion. Possible values: ",[908,9260],{},"- ",[518,9263,1091],{}," → Occlusion against ",[4741,9266,9267],{},"all"," scene objects ",[908,9270],{},[518,9272,9273],{},"Ref\u003CTresObject3D>[]"," → Occlusion is enabled only against the specified objects. ",[908,9276],{},[518,9278,9279],{},"'blending'"," → Uses a ",[4741,9282,9283],{},"blending-based"," occlusion method (CSS-like depth blending).",[950,9286],{},[931,9288,9289,9293,9299],{},[950,9290,9291],{},[2872,9292,5664],{},[950,9294,9295,9296,9298],{},"Custom ",[518,9297,5664],{}," to be used.",[950,9300,9301],{},[523,9302,9305],{"href":9303,"rel":9304},"https://threejs.org/docs/?q=geometry#api/en/geometries/PlaneGeometry",[527],[518,9306,6948],{},[931,9308,9309,9313,9338],{},[950,9310,9311],{},[2872,9312,6344],{},[950,9314,9315,913,9321,913,9323,9329,9330,913,9332],{},[2872,9316,9317,9318,9320],{},"Custom shader ",[4741,9319,6344],{}," used for the occlusion mesh.",[908,9322],{},[2872,9324,9325,9326,9328],{},"Only applies when ",[518,9327,6940],{}," is enabled"," (an occlusion mesh is created). ",[908,9331],{},[4741,9333,9334,9335,9337],{},"Ignored in raycast occlusion modes (",[518,9336,1091],{},", object refs).",[950,9339],{},[931,9341,9342,9347,9369],{},[950,9343,9344],{},[2872,9345,9346],{},"transparentMaterial",[950,9348,9349,913,9356,913,9358,913,9363,913,9365],{},[2872,9350,9351,9352,9355],{},"Enables ",[4741,9353,9354],{},"transparent"," rendering for the occlusion material.",[908,9357],{},[2872,9359,9325,9360,9362],{},[518,9361,6940],{}," creates an occlusion mesh.",[908,9364],{},[4741,9366,9334,9367,9337],{},[518,9368,1091],{},[950,9370,9371],{},[518,9372,1130],{},[544,9374,1277],{"id":1276},[925,9376,9377,9385],{},[928,9378,9379],{},[931,9380,9381,9383],{},[934,9382,1286],{},[934,9384,940],{},[945,9386,9387],{},[931,9388,9389,9392],{},[950,9390,9391],{},"onOcclude",[950,9393,9394],{},"Called when the occlusion state changes.",[544,9396,9398],{"id":9397},"exposed-properties","Exposed properties",[925,9400,9401,9413],{},[928,9402,9403],{},[931,9404,9405,9408,9411],{},[934,9406,9407],{},"Property",[934,9409,9410],{},"Type",[934,9412,940],{},[945,9414,9415,9437,9458],{},[931,9416,9417,9421,9426],{},[950,9418,9419],{},[2872,9420,2689],{},[950,9422,9423],{},[518,9424,9425],{},"Ref\u003CTresObject3D | null>",[950,9427,9428,9429,9434,9435,811],{},"Reference to the root ",[2872,9430,9431],{},[518,9432,9433],{},"\u003CTresGroup>"," used by ",[518,9436,3816],{},[931,9438,9439,9444,9449],{},[950,9440,9441],{},[2872,9442,9443],{},"isVisible",[950,9445,9446],{},[518,9447,9448],{},"Ref\u003Cboolean>",[950,9450,9451,9452,7087,9455,811],{},"Reactive value that indicates whether the HTML content is ",[2872,9453,9454],{},"currently visible",[2872,9456,9457],{},"occluded",[931,9459,9460,9465,9469],{},[950,9461,9462],{},[2872,9463,9464],{},"occlusionMesh",[950,9466,9467],{},[518,9468,9425],{},[950,9470,9471,9472,9475,9476,7051,9478,9480],{},"Reference to the ",[2872,9473,9474],{},"occlusion mesh"," created when ",[518,9477,6940],{},[2872,9479,7054],{},". Used internally for geometry-based occlusion.",[544,9482,9484],{"id":9483},"caveats","Caveats",[534,9486,9487,9520,9537,9596,9614],{},[537,9488,9489,9490,9495,9496,9498,9499,7087,9502,9505,9506,9508,9509,9512,9513,9516,9517,9519],{},"✨ When using ",[2872,9491,9492],{},[518,9493,9494],{},"\u003CHtml occlude>",", if the ",[518,9497,3816],{}," component is ",[2872,9500,9501],{},"overlapping",[2872,9503,9504],{},"inside a 3D object",", it will be considered ",[2872,9507,9457],{}," and therefore ",[2872,9510,9511],{},"hidden",". To avoid this, ",[2872,9514,9515],{},"adjust the position"," of the ",[518,9518,3816],{}," component in your scene.",[537,9521,9522,9523,9528,9529,9532,9533,9536],{},"🎨 When using ",[2872,9524,9525],{},[518,9526,9527],{},"\u003CHtml occlude=\"blending\">",", the HTML content is no longer ",[2872,9530,9531],{},"selectable"," because it is rendered ",[2872,9534,9535],{},"behind the canvas",". This is required to achieve the blending effect.",[537,9538,9539,9540,9542,9543,9545,9546],{},"⚙️ When using a ",[2872,9541,7039],{}," with occlusion in ",[518,9544,4946],{}," mode, there are a few important requirements to ensure the HTML content renders correctly ⬇️",[4341,9547,4343,9548,9551],{},[4345,9549,9550],{},"See more information",[9552,9553,9554,9566,9574,9581],"ol",{},[537,9555,9556,9557,2306,9559,9562,9563,811],{},"If you provide your own material, it must be ",[2872,9558,9354],{},[518,9560,9561],{},"transparent: true",") with an ",[2872,9564,9565],{},"opacity \u003C 1",[537,9567,9568,9569,9573],{},"If you are not providing a custom material, enable ",[2872,9570,9571],{},[518,9572,9346],{}," so the internal shader becomes transparent.",[537,9575,9576,9577,9580],{},"The occlusion mesh requires a ",[2872,9578,9579],{},"fully transparent canvas background","; otherwise, thin borders or halo artifacts may appear.",[537,9582,9583,9584,9587,9588,1691,9590,9593,9594,811],{},"To compensate for the transparent canvas, you may ",[2872,9585,9586],{},"reapply your previous clear-color as a CSS background"," on the ",[518,9589,4352],{},[518,9591,9592],{},"body",", or a wrapper ",[518,9595,5560],{},[537,9597,9598,9599,9603,9604,9606,9607,9609,9610,9613],{},"🔶 When using ",[2872,9600,9601],{},[518,9602,9346],{},", overlapping ",[518,9605,3816],{}," elements (especially multiple ",[518,9608,6940],{}," instances) may cause ",[2872,9611,9612],{},"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.",[537,9615,9616,9617,9619,9620,9623,9624],{},"🔵 To avoid thin border artifacts when using ",[518,9618,6940],{},", make sure your ",[518,9621,9622],{},"\u003CTresCanvas>"," is fully transparent:",[548,9625,9627],{"className":550,"code":9626,"language":558,"meta":488,"style":488},"\u003CTresCanvas :alpha=\"true\" :clearAlpha=\"0\" />\n",[518,9628,9629],{"__ignoreMap":488},[562,9630,9631,9633,9635,9637,9640,9642,9644,9646,9648,9650,9653,9655,9657,9659,9661],{"class":564,"line":489},[562,9632,568],{"class":567},[562,9634,693],{"class":571},[562,9636,1675],{"class":567},[562,9638,9639],{"class":575},"alpha",[562,9641,582],{"class":567},[562,9643,585],{"class":567},[562,9645,1091],{"class":2561},[562,9647,585],{"class":567},[562,9649,1675],{"class":567},[562,9651,9652],{"class":575},"clearAlpha",[562,9654,582],{"class":567},[562,9656,585],{"class":567},[562,9658,1115],{"class":1688},[562,9660,585],{"class":567},[562,9662,1707],{"class":567},[925,9664,9665,9675],{},[928,9666,9667],{},[931,9668,9669,9671,9673],{},[934,9670,1947],{},[934,9672,940],{},[934,9674,943],{},[945,9676,9677,9690,9701,9714,9730,9745,9756,9769,9780,9793,9806,9819,9841,9856],{},[931,9678,9679,9683,9686],{},[950,9680,9681],{},[2872,9682,9030],{},[950,9684,9685],{},"Wrapping html element.",[950,9687,9688],{},[518,9689,9041],{},[931,9691,9692,9696,9699],{},[950,9693,9694],{},[2872,9695,9048],{},[950,9697,9698],{},"The className of the wrapping element.",[950,9700],{},[931,9702,9703,9707,9710],{},[950,9704,9705],{},[2872,9706,9063],{},[950,9708,9709],{},"Project content behind the canvas.",[950,9711,9712],{},[518,9713,1130],{},[931,9715,9716,9720,9726],{},[950,9717,9718],{},[2872,9719,1196],{},[950,9721,9722,9723],{},"Adds a -50%/-50% CSS transform. ",[562,9724,9725],{},"Ignored in transform mode",[950,9727,9728],{},[518,9729,1130],{},[931,9731,9732,9736,9741],{},[950,9733,9734],{},[2872,9735,9107],{},[950,9737,9738,9739],{},"Aligns to the upper-left corner, fills the screen. ",[562,9740,9725],{},[950,9742,9743],{},[518,9744,1130],{},[931,9746,9747,9751,9754],{},[950,9748,9749],{},[2872,9750,9127],{},[950,9752,9753],{},"Children will be scaled by this factor, and also by distance to a PerspectiveCamera / zoom by an OrthographicCamera.",[950,9755],{},[931,9757,9758,9762,9765],{},[950,9759,9760],{},[2872,9761,9144],{},[950,9763,9764],{},"Z-order range.",[950,9766,9767],{},[518,9768,9155],{},[931,9770,9771,9775,9778],{},[950,9772,9773],{},[2872,9774,9162],{},[950,9776,9777],{},"Reference to target container.",[950,9779],{},[931,9781,9782,9786,9789],{},[950,9783,9784],{},[2872,9785,9095],{},[950,9787,9788],{},"If true, applies matrix3d transformations.",[950,9790,9791],{},[518,9792,1130],{},[931,9794,9795,9799,9802],{},[950,9796,9797],{},[2872,9798,9193],{},[950,9800,9801],{},"Renders as sprite, but only in transform mode.",[950,9803,9804],{},[518,9805,1130],{},[931,9807,9808,9812,9817],{},[950,9809,9810],{},[2872,9811,9216],{},[950,9813,9814,9815],{},"Override default positioning function. ",[562,9816,9725],{},[950,9818],{},[931,9820,9821,9825,9839],{},[950,9822,9823],{},[2872,9824,4304],{},[950,9826,9827,9828,1691,9830,1691,9832,9835,9836,9838],{},"Can be ",[518,9829,1091],{},[518,9831,9273],{},[518,9833,9834],{},"'raycast'",", or ",[518,9837,9279],{},". True occludes the entire scene.",[950,9840],{},[931,9842,9843,9847,9852],{},[950,9844,9845],{},[2872,9846,5664],{},[950,9848,9295,9849,9851],{},[518,9850,5664],{}," to be use",[950,9853,9854],{},[518,9855,6948],{},[931,9857,9858,9862,9866],{},[950,9859,9860],{},[2872,9861,6344],{},[950,9863,9317,9864,9851],{},[518,9865,6344],{},[950,9867],{},[544,9869,1277],{"id":9870},"events-1",[925,9872,9873,9881],{},[928,9874,9875],{},[931,9876,9877,9879],{},[934,9878,1286],{},[934,9880,940],{},[945,9882,9883],{},[931,9884,9885,9887],{},[950,9886,9391],{},[950,9888,9394],{},[1536,9890,9891],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":488,"searchDepth":489,"depth":490,"links":9893},[9894,9895,9900,9901,9906,9907,9908,9909,9910],{"id":546,"depth":490,"text":15},{"id":4297,"depth":490,"text":4298,"children":9896},[9897,9898,9899],{"id":4493,"depth":627,"text":4494},{"id":4656,"depth":627,"text":4657},{"id":4920,"depth":627,"text":4921},{"id":6933,"depth":490,"text":6934},{"id":7098,"depth":490,"text":9902,"children":9903},"Using \u003CTransition>",[9904],{"id":8775,"depth":627,"text":9905},"Using iframes",{"id":922,"depth":490,"text":923},{"id":1276,"depth":490,"text":1277},{"id":9397,"depth":490,"text":9398},{"id":9483,"depth":490,"text":9484},{"id":9870,"depth":490,"text":1277},"Allows you put DOM elements in your Tres.js scene.",{},{"title":417,"description":9911},"ywp4dBumrlkuSeTPICaWKzd__5F5_TaWhwF0rVH0VWc",{"id":9916,"title":421,"body":9917,"description":10546,"extension":493,"links":494,"meta":10547,"navigation":496,"path":422,"seo":10548,"stem":423,"__hash__":10549},"docs/2.api/9.objects/image.md",{"type":477,"value":9918,"toc":10541},[9919,9924,9930,9932,10126,10128,10135,10350,10352,10375,10538],[510,9920,9921],{},[9922,9923],"objects-image",{},[480,9925,9926,9929],{},[518,9927,9928],{},"\u003CImage />"," is a shader-based component that optionally loads then displays an image texture on a default plane or on your custom geometry.",[544,9931,15],{"id":546},[548,9933,9936],{"className":550,"code":9934,"highlights":9935,"language":558,"meta":488,"style":488},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Image } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 0, 5]\" />\n\n    \u003CImage\n      url=\"https://upload.wikimedia.org/wikipedia/commons/f/f0/Cyanistes_caeruleus_Oulu_20150516.JPG\"\n      :scale=\"[2, 2]\"\n    />\n  \u003C/TresCanvas>\n\u003C/template>\n",[627,553,554,555],[518,9937,9938,9958,9976,9996,10004,10008,10016,10024,10056,10060,10068,10083,10106,10110,10118],{"__ignoreMap":488},[562,9939,9940,9942,9944,9946,9948,9950,9952,9954,9956],{"class":564,"line":489},[562,9941,568],{"class":567},[562,9943,572],{"class":571},[562,9945,576],{"class":575},[562,9947,579],{"class":575},[562,9949,582],{"class":567},[562,9951,585],{"class":567},[562,9953,589],{"class":588},[562,9955,585],{"class":567},[562,9957,594],{"class":567},[562,9959,9960,9962,9964,9966,9968,9970,9972,9974],{"class":564,"line":490},[562,9961,602],{"class":601},[562,9963,605],{"class":567},[562,9965,2159],{"class":608},[562,9967,612],{"class":567},[562,9969,615],{"class":601},[562,9971,618],{"class":567},[562,9973,2148],{"class":588},[562,9975,624],{"class":567},[562,9977,9979,9981,9983,9986,9988,9990,9992,9994],{"class":9978,"line":627},[564,598],[562,9980,602],{"class":601},[562,9982,605],{"class":567},[562,9984,9985],{"class":608}," Image",[562,9987,612],{"class":567},[562,9989,615],{"class":601},[562,9991,618],{"class":567},[562,9993,621],{"class":588},[562,9995,624],{"class":567},[562,9997,9998,10000,10002],{"class":564,"line":633},[562,9999,665],{"class":567},[562,10001,572],{"class":571},[562,10003,594],{"class":567},[562,10005,10006],{"class":564,"line":662},[562,10007,630],{"emptyLinePlaceholder":496},[562,10009,10010,10012,10014],{"class":564,"line":672},[562,10011,568],{"class":567},[562,10013,682],{"class":571},[562,10015,594],{"class":567},[562,10017,10018,10020,10022],{"class":564,"line":677},[562,10019,690],{"class":567},[562,10021,693],{"class":571},[562,10023,594],{"class":567},[562,10025,10026,10028,10030,10032,10034,10036,10038,10040,10042,10044,10046,10048,10050,10052,10054],{"class":564,"line":687},[562,10027,701],{"class":567},[562,10029,1672],{"class":571},[562,10031,1675],{"class":567},[562,10033,1678],{"class":575},[562,10035,582],{"class":567},[562,10037,585],{"class":567},[562,10039,1685],{"class":567},[562,10041,1115],{"class":1688},[562,10043,1691],{"class":567},[562,10045,1115],{"class":1688},[562,10047,1691],{"class":567},[562,10049,1699],{"class":1688},[562,10051,1702],{"class":567},[562,10053,585],{"class":567},[562,10055,1707],{"class":567},[562,10057,10058],{"class":564,"line":698},[562,10059,630],{"emptyLinePlaceholder":496},[562,10061,10063,10065],{"class":10062,"line":553},[564,598],[562,10064,701],{"class":567},[562,10066,10067],{"class":571},"Image\n",[562,10069,10071,10074,10076,10078,10081],{"class":10070,"line":554},[564,598],[562,10072,10073],{"class":575},"      url",[562,10075,582],{"class":567},[562,10077,585],{"class":567},[562,10079,10080],{"class":588},"https://upload.wikimedia.org/wikipedia/commons/f/f0/Cyanistes_caeruleus_Oulu_20150516.JPG",[562,10082,731],{"class":567},[562,10084,10086,10088,10090,10092,10094,10096,10098,10100,10102,10104],{"class":10085,"line":555},[564,598],[562,10087,2551],{"class":567},[562,10089,4092],{"class":575},[562,10091,582],{"class":567},[562,10093,585],{"class":567},[562,10095,1685],{"class":567},[562,10097,1694],{"class":1688},[562,10099,1691],{"class":567},[562,10101,1694],{"class":1688},[562,10103,1702],{"class":567},[562,10105,731],{"class":567},[562,10107,10108],{"class":564,"line":556},[562,10109,2596],{"class":567},[562,10111,10112,10114,10116],{"class":564,"line":557},[562,10113,786],{"class":567},[562,10115,693],{"class":571},[562,10117,594],{"class":567},[562,10119,10120,10122,10124],{"class":564,"line":773},[562,10121,665],{"class":567},[562,10123,682],{"class":571},[562,10125,594],{"class":567},[544,10127,923],{"id":922},[801,10129,10130],{},[480,10131,10132,10134],{},[518,10133,9928],{}," is a THREE.Mesh and most Mesh attributes can be used as props on the component.",[925,10136,10137,10147],{},[928,10138,10139],{},[931,10140,10141,10143,10145],{},[934,10142,1947],{"align":936},[934,10144,940],{"align":936},[934,10146,943],{},[945,10148,10149,10163,10179,10193,10207,10224,10238,10257,10275,10290,10307,10327,10338],{},[931,10150,10151,10156,10159],{},[950,10152,10153],{"align":936},[518,10154,10155],{},"segments",[950,10157,10158],{"align":936},"Number of divisions in the default geometry.",[950,10160,10161],{},[518,10162,1788],{},[931,10164,10165,10169,10175],{},[950,10166,10167],{"align":936},[518,10168,4092],{},[950,10170,10171,10172],{"align":936},"Scale of the geometry. ",[518,10173,10174],{},"number | [number, number]",[950,10176,10177],{},[518,10178,1788],{},[931,10180,10181,10185,10188],{},[950,10182,10183],{"align":936},[518,10184,2660],{},[950,10186,10187],{"align":936},"Color multiplied into the image texture.",[950,10189,10190],{},[518,10191,10192],{},"'white'",[931,10194,10195,10200,10203],{},[950,10196,10197],{"align":936},[518,10198,10199],{},"zoom",[950,10201,10202],{"align":936},"Shrinks or enlarges the image texture.",[950,10204,10205],{},[518,10206,1788],{},[931,10208,10209,10214,10220],{},[950,10210,10211],{"align":936},[518,10212,10213],{},"radius",[950,10215,10216,10217,10219],{"align":936},"Border radius applied to the image texture. (Intended for rectangular geometries. Use with ",[518,10218,9354],{},".)",[950,10221,10222],{},[518,10223,1115],{},[931,10225,10226,10231,10234],{},[950,10227,10228],{"align":936},[518,10229,10230],{},"grayscale",[950,10232,10233],{"align":936},"Power of grayscale effect. 0 is off. 1 is full grayscale.",[950,10235,10236],{},[518,10237,1115],{},[931,10239,10240,10245,10253],{},[950,10241,10242],{"align":936},[518,10243,10244],{},"toneMapped",[950,10246,10247,10248],{"align":936},"Whether this material is tone mapped according to the renderers toneMapping settings. ",[523,10249,10252],{"href":10250,"rel":10251},"https://threejs.org/docs/?q=material#api/en/materials/Material.toneMapped",[527],"See THREE.material.tonemapped",[950,10254,10255],{},[518,10256,1115],{},[931,10258,10259,10263,10271],{},[950,10260,10261],{"align":936},[518,10262,9354],{},[950,10264,10265,10266],{"align":936},"Whether the image material should be transparent. ",[523,10267,10270],{"href":10268,"rel":10269},"https://threejs.org/docs/?q=material#api/en/materials/Material.transparent",[527],"See THREE.material.transparent",[950,10272,10273],{},[518,10274,1130],{},[931,10276,10277,10281,10286],{},[950,10278,10279],{"align":936},[518,10280,9354],{},[950,10282,10265,10283],{"align":936},[523,10284,10270],{"href":10268,"rel":10285},[527],[950,10287,10288],{},[518,10289,1130],{},[931,10291,10292,10297,10303],{},[950,10293,10294],{"align":936},[518,10295,10296],{},"opacity",[950,10298,10299,10300],{"align":936},"Opacity of the image material. ",[523,10301,10270],{"href":10268,"rel":10302},[527],[950,10304,10305],{},[518,10306,1788],{},[931,10308,10309,10314,10322],{},[950,10310,10311],{"align":936},[518,10312,10313],{},"side",[950,10315,10316,10317],{"align":936},"THREE.Side of the image material. ",[523,10318,10321],{"href":10319,"rel":10320},"https://threejs.org/docs/?q=material#api/en/materials/Material.side",[527],"See THREE.material.side",[950,10323,10324],{},[518,10325,10326],{},"FrontSide",[931,10328,10329,10333,10336],{},[950,10330,10331],{"align":936},[518,10332,2694],{},[950,10334,10335],{"align":936},"Image texture to display on the geometry.",[950,10337],{},[931,10339,10340,10345,10348],{},[950,10341,10342],{"align":936},[518,10343,10344],{},"url",[950,10346,10347],{"align":936},"Image URL to load and display on the geometry.",[950,10349],{},[544,10351,9484],{"id":9483},[480,10353,10354,10355,10357,10358,10361,10362,10364,10365,10368,10369,7087,10372,1518],{},"By default, images loaded via the ",[518,10356,10344],{}," prop use the renderer’s output color space. For advanced control, pass a ",[518,10359,10360],{},"THREE.Texture"," via the ",[518,10363,2694],{}," prop and set its ",[518,10366,10367],{},"colorSpace"," (e.g., ",[518,10370,10371],{},"THREE.SRGBColorSpace",[518,10373,10374],{},"THREE.LinearSRGBColorSpace",[548,10376,10378],{"className":550,"code":10377,"language":558,"meta":488,"style":488},"\u003Cscript setup>\nimport { useTexture } from '@tresjs/cientos'\nimport { SRGBColorSpace } from 'three'\nconst { state } = useTexture(URL)\nwatch(state, (texture) => {\n  texture.colorSpace = SRGBColorSpace // assign a custom color space\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CImage :texture=\"texture\" />\n\u003C/template>\n",[518,10379,10380,10390,10409,10428,10446,10467,10484,10490,10498,10502,10510,10530],{"__ignoreMap":488},[562,10381,10382,10384,10386,10388],{"class":564,"line":489},[562,10383,568],{"class":567},[562,10385,572],{"class":571},[562,10387,576],{"class":575},[562,10389,594],{"class":567},[562,10391,10392,10394,10396,10399,10401,10403,10405,10407],{"class":564,"line":490},[562,10393,602],{"class":601},[562,10395,605],{"class":567},[562,10397,10398],{"class":608}," useTexture",[562,10400,612],{"class":567},[562,10402,615],{"class":601},[562,10404,618],{"class":567},[562,10406,621],{"class":588},[562,10408,624],{"class":567},[562,10410,10411,10413,10415,10418,10420,10422,10424,10426],{"class":564,"line":627},[562,10412,602],{"class":601},[562,10414,605],{"class":567},[562,10416,10417],{"class":608}," SRGBColorSpace",[562,10419,612],{"class":567},[562,10421,615],{"class":601},[562,10423,618],{"class":567},[562,10425,5128],{"class":588},[562,10427,624],{"class":567},[562,10429,10430,10432,10434,10437,10439,10441,10443],{"class":564,"line":633},[562,10431,636],{"class":575},[562,10433,605],{"class":567},[562,10435,10436],{"class":608}," state ",[562,10438,3133],{"class":567},[562,10440,2351],{"class":567},[562,10442,10398],{"class":644},[562,10444,10445],{"class":608},"(URL)\n",[562,10447,10448,10451,10454,10456,10458,10460,10463,10465],{"class":564,"line":662},[562,10449,10450],{"class":644},"watch",[562,10452,10453],{"class":608},"(state",[562,10455,1624],{"class":567},[562,10457,2306],{"class":567},[562,10459,2694],{"class":2278},[562,10461,10462],{"class":567},")",[562,10464,7590],{"class":575},[562,10466,2298],{"class":567},[562,10468,10469,10472,10474,10476,10478,10480],{"class":564,"line":672},[562,10470,10471],{"class":608},"  texture",[562,10473,811],{"class":567},[562,10475,10367],{"class":608},[562,10477,2351],{"class":567},[562,10479,10417],{"class":608},[562,10481,10483],{"class":10482},"sHwdD"," // assign a custom color space\n",[562,10485,10486,10488],{"class":564,"line":677},[562,10487,3133],{"class":567},[562,10489,659],{"class":608},[562,10491,10492,10494,10496],{"class":564,"line":687},[562,10493,665],{"class":567},[562,10495,572],{"class":571},[562,10497,594],{"class":567},[562,10499,10500],{"class":564,"line":698},[562,10501,630],{"emptyLinePlaceholder":496},[562,10503,10504,10506,10508],{"class":564,"line":553},[562,10505,568],{"class":567},[562,10507,682],{"class":571},[562,10509,594],{"class":567},[562,10511,10512,10514,10516,10518,10520,10522,10524,10526,10528],{"class":564,"line":554},[562,10513,690],{"class":567},[562,10515,421],{"class":571},[562,10517,1675],{"class":567},[562,10519,2694],{"class":575},[562,10521,582],{"class":567},[562,10523,585],{"class":567},[562,10525,2694],{"class":608},[562,10527,585],{"class":567},[562,10529,1707],{"class":567},[562,10531,10532,10534,10536],{"class":564,"line":555},[562,10533,665],{"class":567},[562,10535,682],{"class":571},[562,10537,594],{"class":567},[1536,10539,10540],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":488,"searchDepth":489,"depth":490,"links":10542},[10543,10544,10545],{"id":546,"depth":490,"text":15},{"id":922,"depth":490,"text":923},{"id":9483,"depth":490,"text":9484},"Display image textures with shader-based effects.",{},{"title":421,"description":10546},"jEAPHxilh9_Gg2oZg9-kp8JsJ1tSjkYRBYlGbuY9YbM",{"id":10551,"title":425,"body":10552,"description":11402,"extension":493,"links":494,"meta":11403,"navigation":496,"path":426,"seo":11404,"stem":427,"__hash__":11405},"docs/2.api/9.objects/marching-cubes.md",{"type":477,"value":10553,"toc":11396},[10554,10559,10570,10573,10598,10600,11208,11210,11280,11284,11330,11334,11393],[510,10555,10556],{},[10557,10558],"objects-marching-cubes",{},[480,10560,10561,10564,10565,811],{},[518,10562,10563],{},"\u003CMarchingCubes />"," is a wrapper around ",[523,10566,10569],{"href":10567,"rel":10568},"https://threejs.org/examples/#webgl_marchingcubes",[527],"THREE's Marching Cubes",[480,10571,10572],{},"It includes 3 components:",[534,10574,10575,10588,10593],{},[537,10576,10577,10579,10580,10583,10584,10587],{},[518,10578,10563],{}," – container element for ",[518,10581,10582],{},"\u003CMarchingCube />","s and ",[518,10585,10586],{},"\u003CMarchingPlane />","s",[537,10589,10590,10592],{},[518,10591,10582],{}," - an individual metaball",[537,10594,10595,10597],{},[518,10596,10586],{}," – optional bounding plane that interacts with the metaballs",[544,10599,15],{"id":546},[548,10601,10604],{"className":550,"code":10602,"highlights":10603,"language":558,"meta":488,"style":488},"\u003Cscript setup lang=\"ts\">\nimport { MarchingCube, MarchingCubes, MarchingPlane, OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport { NoToneMapping, Vector3 } from 'three'\n\nconst rand = () => (Math.random() - 0.5) * 1.25\nconst positions = Array.from({ length: 40 }, () => new Vector3(rand(), rand(), rand()))\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#222\" :tone-mapping=\"NoToneMapping\">\n    \u003CTresPerspectiveCamera />\n    \u003COrbitControls />\n\n    \u003CMarchingCubes :resolution=\"40\" :max-poly-count=\"40000\">\n      \u003CMarchingPlane plane-type=\"y\" />\n      \u003CMarchingCube\n        v-for=\"position, i of positions\"\n        :key=\"i\"\n        :position=\"position\"\n      />\n      \u003CTresMeshPhongMaterial specular=\"#111111\" :shininess=\"30\" color=\"#049ef4\" :reflectivity=\"1\" />\n    \u003C/MarchingCubes>\n\n    \u003CTresAxesHelper />\n    \u003CTresDirectionalLight color=\"#ffffff\" :intensity=\"3\" :position=\"[0, 200, 0]\" />\n    \u003CTresDirectionalLight color=\"#ffffff\" :intensity=\"3\" :position=\"[100, 200, 100]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n",[490,773,783,793,1886,1921,1930,2489,2494,2078],[518,10605,10606,10626,10660,10678,10702,10706,10740,10803,10811,10815,10823,10856,10864,10872,10876,10912,10933,10941,10965,10980,10995,11000,11060,11069,11073,11082,11138,11192,11200],{"__ignoreMap":488},[562,10607,10608,10610,10612,10614,10616,10618,10620,10622,10624],{"class":564,"line":489},[562,10609,568],{"class":567},[562,10611,572],{"class":571},[562,10613,576],{"class":575},[562,10615,579],{"class":575},[562,10617,582],{"class":567},[562,10619,585],{"class":567},[562,10621,589],{"class":588},[562,10623,585],{"class":567},[562,10625,594],{"class":567},[562,10627,10629,10631,10633,10636,10638,10641,10643,10646,10648,10650,10652,10654,10656,10658],{"class":10628,"line":490},[564,598],[562,10630,602],{"class":601},[562,10632,605],{"class":567},[562,10634,10635],{"class":608}," MarchingCube",[562,10637,1624],{"class":567},[562,10639,10640],{"class":608}," MarchingCubes",[562,10642,1624],{"class":567},[562,10644,10645],{"class":608}," MarchingPlane",[562,10647,1624],{"class":567},[562,10649,1627],{"class":608},[562,10651,612],{"class":567},[562,10653,615],{"class":601},[562,10655,618],{"class":567},[562,10657,621],{"class":588},[562,10659,624],{"class":567},[562,10661,10662,10664,10666,10668,10670,10672,10674,10676],{"class":564,"line":627},[562,10663,602],{"class":601},[562,10665,605],{"class":567},[562,10667,2159],{"class":608},[562,10669,612],{"class":567},[562,10671,615],{"class":601},[562,10673,618],{"class":567},[562,10675,2148],{"class":588},[562,10677,624],{"class":567},[562,10679,10680,10682,10684,10687,10689,10692,10694,10696,10698,10700],{"class":564,"line":633},[562,10681,602],{"class":601},[562,10683,605],{"class":567},[562,10685,10686],{"class":608}," NoToneMapping",[562,10688,1624],{"class":567},[562,10690,10691],{"class":608}," Vector3",[562,10693,612],{"class":567},[562,10695,615],{"class":601},[562,10697,618],{"class":567},[562,10699,5128],{"class":588},[562,10701,624],{"class":567},[562,10703,10704],{"class":564,"line":662},[562,10705,630],{"emptyLinePlaceholder":496},[562,10707,10708,10710,10713,10715,10717,10719,10722,10724,10726,10728,10730,10733,10735,10737],{"class":564,"line":672},[562,10709,636],{"class":575},[562,10711,10712],{"class":608}," rand ",[562,10714,582],{"class":567},[562,10716,7751],{"class":567},[562,10718,7590],{"class":575},[562,10720,10721],{"class":608}," (Math",[562,10723,811],{"class":567},[562,10725,7692],{"class":644},[562,10727,7695],{"class":608},[562,10729,6773],{"class":567},[562,10731,10732],{"class":1688}," 0.5",[562,10734,2320],{"class":608},[562,10736,7698],{"class":567},[562,10738,10739],{"class":1688}," 1.25\n",[562,10741,10742,10744,10747,10749,10752,10754,10757,10759,10761,10764,10766,10769,10772,10774,10776,10779,10781,10783,10786,10789,10791,10794,10796,10798,10800],{"class":564,"line":677},[562,10743,636],{"class":575},[562,10745,10746],{"class":608}," positions ",[562,10748,582],{"class":567},[562,10750,10751],{"class":608}," Array",[562,10753,811],{"class":567},[562,10755,10756],{"class":644},"from",[562,10758,648],{"class":608},[562,10760,2323],{"class":567},[562,10762,10763],{"class":571}," length",[562,10765,2289],{"class":567},[562,10767,10768],{"class":1688}," 40",[562,10770,10771],{"class":567}," },",[562,10773,7751],{"class":567},[562,10775,7590],{"class":575},[562,10777,10778],{"class":567}," new",[562,10780,10691],{"class":644},[562,10782,648],{"class":608},[562,10784,10785],{"class":644},"rand",[562,10787,10788],{"class":608},"()",[562,10790,1624],{"class":567},[562,10792,10793],{"class":644}," rand",[562,10795,10788],{"class":608},[562,10797,1624],{"class":567},[562,10799,10793],{"class":644},[562,10801,10802],{"class":608},"()))\n",[562,10804,10805,10807,10809],{"class":564,"line":687},[562,10806,665],{"class":567},[562,10808,572],{"class":571},[562,10810,594],{"class":567},[562,10812,10813],{"class":564,"line":698},[562,10814,630],{"emptyLinePlaceholder":496},[562,10816,10817,10819,10821],{"class":564,"line":553},[562,10818,568],{"class":567},[562,10820,682],{"class":571},[562,10822,594],{"class":567},[562,10824,10825,10827,10829,10831,10833,10835,10838,10840,10842,10845,10847,10849,10852,10854],{"class":564,"line":554},[562,10826,690],{"class":567},[562,10828,693],{"class":571},[562,10830,3921],{"class":575},[562,10832,582],{"class":567},[562,10834,585],{"class":567},[562,10836,10837],{"class":588},"#222",[562,10839,585],{"class":567},[562,10841,1675],{"class":567},[562,10843,10844],{"class":575},"tone-mapping",[562,10846,582],{"class":567},[562,10848,585],{"class":567},[562,10850,10851],{"class":608},"NoToneMapping",[562,10853,585],{"class":567},[562,10855,594],{"class":567},[562,10857,10858,10860,10862],{"class":564,"line":555},[562,10859,701],{"class":567},[562,10861,1672],{"class":571},[562,10863,1707],{"class":567},[562,10865,10866,10868,10870],{"class":564,"line":556},[562,10867,701],{"class":567},[562,10869,1714],{"class":571},[562,10871,1707],{"class":567},[562,10873,10874],{"class":564,"line":557},[562,10875,630],{"emptyLinePlaceholder":496},[562,10877,10879,10881,10883,10885,10887,10889,10891,10894,10896,10898,10901,10903,10905,10908,10910],{"class":10878,"line":773},[564,598],[562,10880,701],{"class":567},[562,10882,425],{"class":571},[562,10884,1675],{"class":567},[562,10886,1732],{"class":575},[562,10888,582],{"class":567},[562,10890,585],{"class":567},[562,10892,10893],{"class":1688},"40",[562,10895,585],{"class":567},[562,10897,1675],{"class":567},[562,10899,10900],{"class":575},"max-poly-count",[562,10902,582],{"class":567},[562,10904,585],{"class":567},[562,10906,10907],{"class":1688},"40000",[562,10909,585],{"class":567},[562,10911,594],{"class":567},[562,10913,10915,10917,10920,10923,10925,10927,10929,10931],{"class":10914,"line":783},[564,598],[562,10916,712],{"class":567},[562,10918,10919],{"class":571},"MarchingPlane",[562,10921,10922],{"class":575}," plane-type",[562,10924,582],{"class":567},[562,10926,585],{"class":567},[562,10928,2376],{"class":588},[562,10930,585],{"class":567},[562,10932,1707],{"class":567},[562,10934,10936,10938],{"class":10935,"line":793},[564,598],[562,10937,712],{"class":567},[562,10939,10940],{"class":571},"MarchingCube\n",[562,10942,10944,10946,10948,10950,10952,10954,10957,10960,10963],{"class":10943,"line":1886},[564,598],[562,10945,5655],{"class":601},[562,10947,582],{"class":567},[562,10949,585],{"class":567},[562,10951,1678],{"class":608},[562,10953,1691],{"class":567},[562,10955,10956],{"class":608},"i",[562,10958,10959],{"class":567}," of ",[562,10961,10962],{"class":608},"positions",[562,10964,731],{"class":567},[562,10966,10968,10970,10972,10974,10976,10978],{"class":10967,"line":1921},[564,598],[562,10969,752],{"class":567},[562,10971,5685],{"class":575},[562,10973,582],{"class":567},[562,10975,585],{"class":567},[562,10977,10956],{"class":608},[562,10979,731],{"class":567},[562,10981,10983,10985,10987,10989,10991,10993],{"class":10982,"line":1930},[564,598],[562,10984,752],{"class":567},[562,10986,1678],{"class":575},[562,10988,582],{"class":567},[562,10990,585],{"class":567},[562,10992,1678],{"class":608},[562,10994,731],{"class":567},[562,10996,10998],{"class":10997,"line":2489},[564,598],[562,10999,770],{"class":567},[562,11001,11003,11005,11008,11011,11013,11015,11018,11020,11022,11025,11027,11029,11031,11033,11036,11038,11040,11043,11045,11047,11050,11052,11054,11056,11058],{"class":11002,"line":2494},[564,598],[562,11004,712],{"class":567},[562,11006,11007],{"class":571},"TresMeshPhongMaterial",[562,11009,11010],{"class":575}," specular",[562,11012,582],{"class":567},[562,11014,585],{"class":567},[562,11016,11017],{"class":588},"#111111",[562,11019,585],{"class":567},[562,11021,1675],{"class":567},[562,11023,11024],{"class":575},"shininess",[562,11026,582],{"class":567},[562,11028,585],{"class":567},[562,11030,1075],{"class":1688},[562,11032,585],{"class":567},[562,11034,11035],{"class":575}," color",[562,11037,582],{"class":567},[562,11039,585],{"class":567},[562,11041,11042],{"class":588},"#049ef4",[562,11044,585],{"class":567},[562,11046,1675],{"class":567},[562,11048,11049],{"class":575},"reflectivity",[562,11051,582],{"class":567},[562,11053,585],{"class":567},[562,11055,1788],{"class":1688},[562,11057,585],{"class":567},[562,11059,1707],{"class":567},[562,11061,11063,11065,11067],{"class":11062,"line":2078},[564,598],[562,11064,776],{"class":567},[562,11066,425],{"class":571},[562,11068,594],{"class":567},[562,11070,11071],{"class":564,"line":2079},[562,11072,630],{"emptyLinePlaceholder":496},[562,11074,11075,11077,11080],{"class":564,"line":2080},[562,11076,701],{"class":567},[562,11078,11079],{"class":571},"TresAxesHelper",[562,11081,1707],{"class":567},[562,11083,11084,11086,11088,11090,11092,11094,11097,11099,11101,11103,11105,11107,11109,11111,11113,11115,11117,11119,11121,11123,11125,11128,11130,11132,11134,11136],{"class":564,"line":2081},[562,11085,701],{"class":567},[562,11087,1891],{"class":571},[562,11089,11035],{"class":575},[562,11091,582],{"class":567},[562,11093,585],{"class":567},[562,11095,11096],{"class":588},"#ffffff",[562,11098,585],{"class":567},[562,11100,1675],{"class":567},[562,11102,1872],{"class":575},[562,11104,582],{"class":567},[562,11106,585],{"class":567},[562,11108,2755],{"class":1688},[562,11110,585],{"class":567},[562,11112,1675],{"class":567},[562,11114,1678],{"class":575},[562,11116,582],{"class":567},[562,11118,585],{"class":567},[562,11120,1685],{"class":567},[562,11122,1115],{"class":1688},[562,11124,1691],{"class":567},[562,11126,11127],{"class":1688},"200",[562,11129,1691],{"class":567},[562,11131,1115],{"class":1688},[562,11133,1702],{"class":567},[562,11135,585],{"class":567},[562,11137,1707],{"class":567},[562,11139,11140,11142,11144,11146,11148,11150,11152,11154,11156,11158,11160,11162,11164,11166,11168,11170,11172,11174,11176,11178,11180,11182,11184,11186,11188,11190],{"class":564,"line":2593},[562,11141,701],{"class":567},[562,11143,1891],{"class":571},[562,11145,11035],{"class":575},[562,11147,582],{"class":567},[562,11149,585],{"class":567},[562,11151,11096],{"class":588},[562,11153,585],{"class":567},[562,11155,1675],{"class":567},[562,11157,1872],{"class":575},[562,11159,582],{"class":567},[562,11161,585],{"class":567},[562,11163,2755],{"class":1688},[562,11165,585],{"class":567},[562,11167,1675],{"class":567},[562,11169,1678],{"class":575},[562,11171,582],{"class":567},[562,11173,585],{"class":567},[562,11175,1685],{"class":567},[562,11177,2807],{"class":1688},[562,11179,1691],{"class":567},[562,11181,11127],{"class":1688},[562,11183,1691],{"class":567},[562,11185,2807],{"class":1688},[562,11187,1702],{"class":567},[562,11189,585],{"class":567},[562,11191,1707],{"class":567},[562,11193,11194,11196,11198],{"class":564,"line":2599},[562,11195,786],{"class":567},[562,11197,693],{"class":571},[562,11199,594],{"class":567},[562,11201,11202,11204,11206],{"class":564,"line":2608},[562,11203,665],{"class":567},[562,11205,682],{"class":571},[562,11207,594],{"class":567},[544,11209,923],{"id":922},[925,11211,11212,11222],{},[928,11213,11214],{},[931,11215,11216,11218,11220],{},[934,11217,1947],{"align":936},[934,11219,940],{"align":936},[934,11221,943],{},[945,11223,11224,11237,11252,11266],{},[931,11225,11226,11230,11233],{},[950,11227,11228],{"align":936},[518,11229,1732],{},[950,11231,11232],{"align":936},"Resolution of the marching cube field. Higher resolution produces smoother meshes at the cost of performance and memory.",[950,11234,11235],{},[518,11236,5994],{},[931,11238,11239,11244,11247],{},[950,11240,11241],{"align":936},[518,11242,11243],{},"maxPolyCount",[950,11245,11246],{"align":936},"Maximum number of polygons to generate.",[950,11248,11249],{},[518,11250,11251],{},"10000",[931,11253,11254,11259,11262],{},[950,11255,11256],{"align":936},[518,11257,11258],{},"enableUvs",[950,11260,11261],{"align":936},"Whether UVs are enabled.",[950,11263,11264],{},[518,11265,1130],{},[931,11267,11268,11273,11276],{},[950,11269,11270],{"align":936},[518,11271,11272],{},"enableColors",[950,11274,11275],{"align":936},"Whether vertex colors are enabled.",[950,11277,11278],{},[518,11279,1130],{},[544,11281,11283],{"id":11282},"marchingcube-props","MarchingCube Props",[925,11285,11286,11296],{},[928,11287,11288],{},[931,11289,11290,11292,11294],{},[934,11291,1947],{"align":936},[934,11293,940],{"align":936},[934,11295,943],{},[945,11297,11298,11312],{},[931,11299,11300,11305,11308],{},[950,11301,11302],{"align":936},[518,11303,11304],{},"strength",[950,11306,11307],{"align":936},"How strongly this cube affects the marching cube field.",[950,11309,11310],{},[518,11311,1879],{},[931,11313,11314,11319,11325],{},[950,11315,11316],{"align":936},[518,11317,11318],{},"subtract",[950,11320,11321,11322,11324],{"align":936},"How quickly strength moves to ",[518,11323,1115],{}," over distance.",[950,11326,11327],{},[518,11328,11329],{},"12",[544,11331,11333],{"id":11332},"marchingplane-props","MarchingPlane Props",[925,11335,11336,11346],{},[928,11337,11338],{},[931,11339,11340,11342,11344],{},[934,11341,1947],{"align":936},[934,11343,940],{"align":936},[934,11345,943],{},[945,11347,11348,11366,11379],{},[931,11349,11350,11355,11361],{},[950,11351,11352],{"align":936},[518,11353,11354],{},"planeType",[950,11356,11357,11358],{"align":936},"Which axis the plane appears on. ",[518,11359,11360],{},"'x' | 'y' | 'z'",[950,11362,11363],{},[518,11364,11365],{},"'x'",[931,11367,11368,11372,11375],{},[950,11369,11370],{"align":936},[518,11371,11304],{},[950,11373,11374],{"align":936},"How strongly this plane affects the marching cube field.",[950,11376,11377],{},[518,11378,1879],{},[931,11380,11381,11385,11389],{},[950,11382,11383],{"align":936},[518,11384,11318],{},[950,11386,11321,11387,11324],{"align":936},[518,11388,1115],{},[950,11390,11391],{},[518,11392,11329],{},[1536,11394,11395],{},"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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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);}",{"title":488,"searchDepth":489,"depth":490,"links":11397},[11398,11399,11400,11401],{"id":546,"depth":490,"text":15},{"id":922,"depth":490,"text":923},{"id":11282,"depth":490,"text":11283},{"id":11332,"depth":490,"text":11333},"Create organic blob-like shapes using metaballs.",{},{"title":425,"description":11402},"dt9UUvCiy--PP6CSMtwwdcksel8iajosft8nxTQtolk",{"id":11407,"title":429,"body":11408,"description":12786,"extension":493,"links":494,"meta":12787,"navigation":496,"path":430,"seo":12788,"stem":431,"__hash__":12789},"docs/2.api/9.objects/reflector.md",{"type":477,"value":11409,"toc":12779},[11410,11415,11430,11432,11699,11701,11789,11797,11801,11814,12457,12460,12463,12467,12776],[510,11411,11412],{},[11413,11414],"objects-reflector",{},[480,11416,1353,11417,11420,11421,11426,11427,11429],{},[518,11418,11419],{},"cientos"," package provides an abstraction of the ",[523,11422,11425],{"href":11423,"rel":11424},"https://github.com/mrdoob/three.js/blob/dev/examples/jsm/objects/Reflector.js",[527],"Reflector class",", which creates a Mesh showing a real-time reflection of your scene.  This Mesh extends from ",[518,11428,4720],{}," so all the default props can be passed as well:",[544,11431,15],{"id":546},[548,11433,11435],{"className":550,"code":11434,"language":558,"meta":488,"style":488},"\u003Cscript setup lang=\"ts\">\nimport { Reflector } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas shadows alpha>\n    \u003CTresPerspectiveCamera :position=\"[0, 0, 3]\" />\n    \u003COrbitControls />\n\n    \u003CSuspense>\n      \u003CReflector\n        :rotation=\"[-Math.PI * 0.5, 0, 0]\"\n        :position-y=\"-2\"\n        color=\"#fff\"\n      >\n        \u003CTresCircleGeometry :args=\"[10, 10]\" />\n      \u003C/Reflector>\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n",[518,11436,11437,11457,11476,11484,11488,11496,11510,11542,11550,11554,11562,11569,11604,11620,11634,11638,11667,11675,11683,11691],{"__ignoreMap":488},[562,11438,11439,11441,11443,11445,11447,11449,11451,11453,11455],{"class":564,"line":489},[562,11440,568],{"class":567},[562,11442,572],{"class":571},[562,11444,576],{"class":575},[562,11446,579],{"class":575},[562,11448,582],{"class":567},[562,11450,585],{"class":567},[562,11452,589],{"class":588},[562,11454,585],{"class":567},[562,11456,594],{"class":567},[562,11458,11459,11461,11463,11466,11468,11470,11472,11474],{"class":564,"line":490},[562,11460,602],{"class":601},[562,11462,605],{"class":567},[562,11464,11465],{"class":608}," Reflector",[562,11467,612],{"class":567},[562,11469,615],{"class":601},[562,11471,618],{"class":567},[562,11473,621],{"class":588},[562,11475,624],{"class":567},[562,11477,11478,11480,11482],{"class":564,"line":627},[562,11479,665],{"class":567},[562,11481,572],{"class":571},[562,11483,594],{"class":567},[562,11485,11486],{"class":564,"line":633},[562,11487,630],{"emptyLinePlaceholder":496},[562,11489,11490,11492,11494],{"class":564,"line":662},[562,11491,568],{"class":567},[562,11493,682],{"class":571},[562,11495,594],{"class":567},[562,11497,11498,11500,11502,11505,11508],{"class":564,"line":672},[562,11499,690],{"class":567},[562,11501,693],{"class":571},[562,11503,11504],{"class":575}," shadows",[562,11506,11507],{"class":575}," alpha",[562,11509,594],{"class":567},[562,11511,11512,11514,11516,11518,11520,11522,11524,11526,11528,11530,11532,11534,11536,11538,11540],{"class":564,"line":677},[562,11513,701],{"class":567},[562,11515,1672],{"class":571},[562,11517,1675],{"class":567},[562,11519,1678],{"class":575},[562,11521,582],{"class":567},[562,11523,585],{"class":567},[562,11525,1685],{"class":567},[562,11527,1115],{"class":1688},[562,11529,1691],{"class":567},[562,11531,1115],{"class":1688},[562,11533,1691],{"class":567},[562,11535,2755],{"class":1688},[562,11537,1702],{"class":567},[562,11539,585],{"class":567},[562,11541,1707],{"class":567},[562,11543,11544,11546,11548],{"class":564,"line":687},[562,11545,701],{"class":567},[562,11547,1714],{"class":571},[562,11549,1707],{"class":567},[562,11551,11552],{"class":564,"line":698},[562,11553,630],{"emptyLinePlaceholder":496},[562,11555,11556,11558,11560],{"class":564,"line":553},[562,11557,701],{"class":567},[562,11559,704],{"class":571},[562,11561,594],{"class":567},[562,11563,11564,11566],{"class":564,"line":554},[562,11565,712],{"class":567},[562,11567,11568],{"class":571},"Reflector\n",[562,11570,11571,11573,11575,11577,11579,11581,11583,11585,11588,11590,11592,11594,11596,11598,11600,11602],{"class":564,"line":555},[562,11572,752],{"class":567},[562,11574,2343],{"class":575},[562,11576,582],{"class":567},[562,11578,585],{"class":567},[562,11580,5765],{"class":567},[562,11582,7687],{"class":608},[562,11584,811],{"class":567},[562,11586,11587],{"class":608},"PI",[562,11589,5803],{"class":567},[562,11591,1879],{"class":1688},[562,11593,1691],{"class":567},[562,11595,1115],{"class":1688},[562,11597,1691],{"class":567},[562,11599,1115],{"class":1688},[562,11601,1702],{"class":567},[562,11603,731],{"class":567},[562,11605,11606,11608,11610,11612,11614,11616,11618],{"class":564,"line":556},[562,11607,752],{"class":567},[562,11609,6766],{"class":575},[562,11611,582],{"class":567},[562,11613,585],{"class":567},[562,11615,6773],{"class":567},[562,11617,1694],{"class":1688},[562,11619,731],{"class":567},[562,11621,11622,11625,11627,11629,11632],{"class":564,"line":557},[562,11623,11624],{"class":575},"        color",[562,11626,582],{"class":567},[562,11628,585],{"class":567},[562,11630,11631],{"class":588},"#fff",[562,11633,731],{"class":567},[562,11635,11636],{"class":564,"line":773},[562,11637,4118],{"class":567},[562,11639,11640,11642,11645,11647,11649,11651,11653,11655,11657,11659,11661,11663,11665],{"class":564,"line":783},[562,11641,1771],{"class":567},[562,11643,11644],{"class":571},"TresCircleGeometry",[562,11646,1675],{"class":567},[562,11648,1779],{"class":575},[562,11650,582],{"class":567},[562,11652,585],{"class":567},[562,11654,1685],{"class":567},[562,11656,2512],{"class":1688},[562,11658,1691],{"class":567},[562,11660,2512],{"class":1688},[562,11662,1702],{"class":567},[562,11664,585],{"class":567},[562,11666,1707],{"class":567},[562,11668,11669,11671,11673],{"class":564,"line":793},[562,11670,1843],{"class":567},[562,11672,429],{"class":571},[562,11674,594],{"class":567},[562,11676,11677,11679,11681],{"class":564,"line":1886},[562,11678,776],{"class":567},[562,11680,704],{"class":571},[562,11682,594],{"class":567},[562,11684,11685,11687,11689],{"class":564,"line":1921},[562,11686,786],{"class":567},[562,11688,693],{"class":571},[562,11690,594],{"class":567},[562,11692,11693,11695,11697],{"class":564,"line":1930},[562,11694,665],{"class":567},[562,11696,682],{"class":571},[562,11698,594],{"class":567},[544,11700,923],{"id":922},[925,11702,11703,11713],{},[928,11704,11705],{},[931,11706,11707,11709,11711],{},[934,11708,1947],{"align":936},[934,11710,940],{"align":936},[934,11712,943],{},[945,11714,11715,11727,11740,11752,11764,11776],{},[931,11716,11717,11721,11724],{},[950,11718,11719],{"align":936},[2872,11720,2660],{},[950,11722,11723],{"align":936},"The base color that's combine with the mirror effect",[950,11725,11726],{},"'#333'",[931,11728,11729,11734,11737],{},[950,11730,11731],{"align":936},[2872,11732,11733],{},"textureWidth",[950,11735,11736],{"align":936},"the width of the texture to render on the mirror",[950,11738,11739],{},"512",[931,11741,11742,11747,11750],{},[950,11743,11744],{"align":936},[2872,11745,11746],{},"textureHeight",[950,11748,11749],{"align":936},"the height of the texture to render on the mirror",[950,11751,11739],{},[931,11753,11754,11759,11762],{},[950,11755,11756],{"align":936},[2872,11757,11758],{},"clipBias",[950,11760,11761],{"align":936},"to use the clipBias property",[950,11763,1115],{},[931,11765,11766,11771,11774],{},[950,11767,11768],{"align":936},[2872,11769,11770],{},"multisample",[950,11772,11773],{"align":936},"how many samplers will be render",[950,11775,1912],{},[931,11777,11778,11783,11786],{},[950,11779,11780],{"align":936},[2872,11781,11782],{},"shader",[950,11784,11785],{"align":936},"The texture of the smoke.",[950,11787,11788],{},"Reflector.ReflectorShader",[801,11790,11791],{},[480,11792,11793,11794,11796],{},"All the props except the ",[518,11795,2660],{},", are not reactive",[544,11798,11800],{"id":11799},"custom-mirror-effect","Custom mirror effect",[480,11802,11803,11804,1691,11807,7141,11810,11813],{},"You can provide your own shader by passing a full shader object with ",[518,11805,11806],{},"uniforms",[518,11808,11809],{},"vertexShader",[518,11811,11812],{},"fragmentShader",". The example below adds animated circular ripples emanating from the center of the surface, while preserving the color tint:",[548,11815,11817],{"className":550,"code":11816,"language":558,"meta":488,"style":488},"\u003Cscript setup lang=\"ts\">\nimport { Reflector } from '@tresjs/cientos'\nimport { useLoop } from '@tresjs/core'\nimport { shallowRef } from 'vue'\n\nconst reflectorRef = shallowRef()\n\nconst customShader = {\n  uniforms: {\n    color: { value: null },\n    tDiffuse: { value: null },\n    textureMatrix: { value: null },\n    time: { value: 0 },\n  },\n  vertexShader: /* glsl */`\n    uniform mat4 textureMatrix;\n    varying vec4 vUv;\n    varying vec2 vPos;\n    void main() {\n      vUv = textureMatrix * vec4(position, 1.0);\n      vPos = position.xy;\n      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n    }`,\n  fragmentShader: /* glsl */`\n    uniform vec3 color;\n    uniform sampler2D tDiffuse;\n    uniform float time;\n    varying vec4 vUv;\n    varying vec2 vPos;\n    float blendOverlay(float base, float blend) {\n      return(base \u003C 0.5 ? (2.0 * base * blend) : (1.0 - 2.0 * (1.0 - base) * (1.0 - blend)));\n    }\n    vec3 blendOverlay(vec3 base, vec3 blend) {\n      return vec3(blendOverlay(base.r, blend.r), blendOverlay(base.g, blend.g), blendOverlay(base.b, blend.b));\n    }\n    void main() {\n      float dist = length(vPos);\n      float wave = sin(dist * 6.0 - time * 4.0) * 0.02;\n      vec2 dir = dist > 0.001 ? normalize(vPos) : vec2(0.0);\n      vec4 distortedUv = vUv + vec4(dir * wave, 0.0, 0.0);\n      vec4 base = texture2DProj(tDiffuse, distortedUv);\n      gl_FragColor = vec4(blendOverlay(base.rgb, color), 1.0);\n      #include \u003Ctonemapping_fragment>\n      #include \u003Ccolorspace_fragment>\n    }`,\n}\n\nconst { onBeforeRender } = useLoop()\nonBeforeRender(({ elapsed }) => {\n  const uniforms = reflectorRef.value?.instance?.material?.uniforms\n  if (uniforms?.time) { uniforms.time.value = elapsed }\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CReflector\n    ref=\"reflectorRef\"\n    :rotation=\"[-Math.PI * 0.5, 0, 0]\"\n    :position-y=\"-2\"\n    color=\"#fff\"\n    :shader=\"customShader\"\n  >\n    \u003CTresCircleGeometry :args=\"[10, 10]\" />\n  \u003C/Reflector>\n\u003C/template>\n",[518,11818,11819,11839,11857,11876,11894,11898,11911,11915,11926,11935,11953,11970,11987,12004,12008,12021,12026,12031,12036,12041,12046,12051,12056,12066,12077,12082,12087,12092,12096,12100,12105,12110,12115,12120,12125,12129,12133,12138,12143,12148,12153,12158,12163,12168,12173,12181,12185,12189,12206,12223,12252,12285,12291,12299,12303,12311,12317,12331,12366,12382,12394,12409,12413,12441,12449],{"__ignoreMap":488},[562,11820,11821,11823,11825,11827,11829,11831,11833,11835,11837],{"class":564,"line":489},[562,11822,568],{"class":567},[562,11824,572],{"class":571},[562,11826,576],{"class":575},[562,11828,579],{"class":575},[562,11830,582],{"class":567},[562,11832,585],{"class":567},[562,11834,589],{"class":588},[562,11836,585],{"class":567},[562,11838,594],{"class":567},[562,11840,11841,11843,11845,11847,11849,11851,11853,11855],{"class":564,"line":490},[562,11842,602],{"class":601},[562,11844,605],{"class":567},[562,11846,11465],{"class":608},[562,11848,612],{"class":567},[562,11850,615],{"class":601},[562,11852,618],{"class":567},[562,11854,621],{"class":588},[562,11856,624],{"class":567},[562,11858,11859,11861,11863,11866,11868,11870,11872,11874],{"class":564,"line":627},[562,11860,602],{"class":601},[562,11862,605],{"class":567},[562,11864,11865],{"class":608}," useLoop",[562,11867,612],{"class":567},[562,11869,615],{"class":601},[562,11871,618],{"class":567},[562,11873,2148],{"class":588},[562,11875,624],{"class":567},[562,11877,11878,11880,11882,11884,11886,11888,11890,11892],{"class":564,"line":633},[562,11879,602],{"class":601},[562,11881,605],{"class":567},[562,11883,2178],{"class":608},[562,11885,612],{"class":567},[562,11887,615],{"class":601},[562,11889,618],{"class":567},[562,11891,558],{"class":588},[562,11893,624],{"class":567},[562,11895,11896],{"class":564,"line":662},[562,11897,630],{"emptyLinePlaceholder":496},[562,11899,11900,11902,11905,11907,11909],{"class":564,"line":672},[562,11901,636],{"class":575},[562,11903,11904],{"class":608}," reflectorRef ",[562,11906,582],{"class":567},[562,11908,2178],{"class":644},[562,11910,7342],{"class":608},[562,11912,11913],{"class":564,"line":677},[562,11914,630],{"emptyLinePlaceholder":496},[562,11916,11917,11919,11922,11924],{"class":564,"line":687},[562,11918,636],{"class":575},[562,11920,11921],{"class":608}," customShader ",[562,11923,582],{"class":567},[562,11925,2298],{"class":567},[562,11927,11928,11931,11933],{"class":564,"line":698},[562,11929,11930],{"class":571},"  uniforms",[562,11932,2289],{"class":567},[562,11934,2298],{"class":567},[562,11936,11937,11940,11942,11944,11947,11949,11951],{"class":564,"line":553},[562,11938,11939],{"class":571},"    color",[562,11941,2289],{"class":567},[562,11943,605],{"class":567},[562,11945,11946],{"class":571}," value",[562,11948,2289],{"class":567},[562,11950,2223],{"class":567},[562,11952,5403],{"class":567},[562,11954,11955,11958,11960,11962,11964,11966,11968],{"class":564,"line":554},[562,11956,11957],{"class":571},"    tDiffuse",[562,11959,2289],{"class":567},[562,11961,605],{"class":567},[562,11963,11946],{"class":571},[562,11965,2289],{"class":567},[562,11967,2223],{"class":567},[562,11969,5403],{"class":567},[562,11971,11972,11975,11977,11979,11981,11983,11985],{"class":564,"line":555},[562,11973,11974],{"class":571},"    textureMatrix",[562,11976,2289],{"class":567},[562,11978,605],{"class":567},[562,11980,11946],{"class":571},[562,11982,2289],{"class":567},[562,11984,2223],{"class":567},[562,11986,5403],{"class":567},[562,11988,11989,11992,11994,11996,11998,12000,12002],{"class":564,"line":556},[562,11990,11991],{"class":571},"    time",[562,11993,2289],{"class":567},[562,11995,605],{"class":567},[562,11997,11946],{"class":571},[562,11999,2289],{"class":567},[562,12001,7280],{"class":1688},[562,12003,5403],{"class":567},[562,12005,12006],{"class":564,"line":557},[562,12007,3127],{"class":567},[562,12009,12010,12013,12015,12018],{"class":564,"line":773},[562,12011,12012],{"class":571},"  vertexShader",[562,12014,2289],{"class":567},[562,12016,12017],{"class":10482}," /* glsl */",[562,12019,12020],{"class":567},"`\n",[562,12022,12023],{"class":564,"line":783},[562,12024,12025],{"class":588},"    uniform mat4 textureMatrix;\n",[562,12027,12028],{"class":564,"line":793},[562,12029,12030],{"class":588},"    varying vec4 vUv;\n",[562,12032,12033],{"class":564,"line":1886},[562,12034,12035],{"class":588},"    varying vec2 vPos;\n",[562,12037,12038],{"class":564,"line":1921},[562,12039,12040],{"class":588},"    void main() {\n",[562,12042,12043],{"class":564,"line":1930},[562,12044,12045],{"class":588},"      vUv = textureMatrix * vec4(position, 1.0);\n",[562,12047,12048],{"class":564,"line":2489},[562,12049,12050],{"class":588},"      vPos = position.xy;\n",[562,12052,12053],{"class":564,"line":2494},[562,12054,12055],{"class":588},"      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n",[562,12057,12058,12061,12064],{"class":564,"line":2078},[562,12059,12060],{"class":588},"    }",[562,12062,12063],{"class":567},"`",[562,12065,3073],{"class":567},[562,12067,12068,12071,12073,12075],{"class":564,"line":2079},[562,12069,12070],{"class":571},"  fragmentShader",[562,12072,2289],{"class":567},[562,12074,12017],{"class":10482},[562,12076,12020],{"class":567},[562,12078,12079],{"class":564,"line":2080},[562,12080,12081],{"class":588},"    uniform vec3 color;\n",[562,12083,12084],{"class":564,"line":2081},[562,12085,12086],{"class":588},"    uniform sampler2D tDiffuse;\n",[562,12088,12089],{"class":564,"line":2593},[562,12090,12091],{"class":588},"    uniform float time;\n",[562,12093,12094],{"class":564,"line":2599},[562,12095,12030],{"class":588},[562,12097,12098],{"class":564,"line":2608},[562,12099,12035],{"class":588},[562,12101,12102],{"class":564,"line":2642},[562,12103,12104],{"class":588},"    float blendOverlay(float base, float blend) {\n",[562,12106,12107],{"class":564,"line":2647},[562,12108,12109],{"class":588},"      return(base \u003C 0.5 ? (2.0 * base * blend) : (1.0 - 2.0 * (1.0 - base) * (1.0 - blend)));\n",[562,12111,12112],{"class":564,"line":2655},[562,12113,12114],{"class":588},"    }\n",[562,12116,12117],{"class":564,"line":2672},[562,12118,12119],{"class":588},"    vec3 blendOverlay(vec3 base, vec3 blend) {\n",[562,12121,12122],{"class":564,"line":2702},[562,12123,12124],{"class":588},"      return vec3(blendOverlay(base.r, blend.r), blendOverlay(base.g, blend.g), blendOverlay(base.b, blend.b));\n",[562,12126,12127],{"class":564,"line":2707},[562,12128,12114],{"class":588},[562,12130,12131],{"class":564,"line":2716},[562,12132,12040],{"class":588},[562,12134,12135],{"class":564,"line":2721},[562,12136,12137],{"class":588},"      float dist = length(vPos);\n",[562,12139,12140],{"class":564,"line":2729},[562,12141,12142],{"class":588},"      float wave = sin(dist * 6.0 - time * 4.0) * 0.02;\n",[562,12144,12145],{"class":564,"line":2742},[562,12146,12147],{"class":588},"      vec2 dir = dist > 0.001 ? normalize(vPos) : vec2(0.0);\n",[562,12149,12150],{"class":564,"line":2770},[562,12151,12152],{"class":588},"      vec4 distortedUv = vUv + vec4(dir * wave, 0.0, 0.0);\n",[562,12154,12155],{"class":564,"line":2776},[562,12156,12157],{"class":588},"      vec4 base = texture2DProj(tDiffuse, distortedUv);\n",[562,12159,12160],{"class":564,"line":2816},[562,12161,12162],{"class":588},"      gl_FragColor = vec4(blendOverlay(base.rgb, color), 1.0);\n",[562,12164,12165],{"class":564,"line":2826},[562,12166,12167],{"class":588},"      #include \u003Ctonemapping_fragment>\n",[562,12169,12170],{"class":564,"line":2835},[562,12171,12172],{"class":588},"      #include \u003Ccolorspace_fragment>\n",[562,12174,12175,12177,12179],{"class":564,"line":2844},[562,12176,12060],{"class":588},[562,12178,12063],{"class":567},[562,12180,3073],{"class":567},[562,12182,12183],{"class":564,"line":5630},[562,12184,2390],{"class":567},[562,12186,12187],{"class":564,"line":5639},[562,12188,630],{"emptyLinePlaceholder":496},[562,12190,12191,12193,12195,12198,12200,12202,12204],{"class":564,"line":5644},[562,12192,636],{"class":575},[562,12194,605],{"class":567},[562,12196,12197],{"class":608}," onBeforeRender ",[562,12199,3133],{"class":567},[562,12201,2351],{"class":567},[562,12203,11865],{"class":644},[562,12205,7342],{"class":608},[562,12207,12208,12211,12213,12215,12217,12219,12221],{"class":564,"line":5652},[562,12209,12210],{"class":644},"onBeforeRender",[562,12212,648],{"class":608},[562,12214,2275],{"class":567},[562,12216,2279],{"class":2278},[562,12218,2295],{"class":567},[562,12220,7590],{"class":575},[562,12222,2298],{"class":567},[562,12224,12225,12227,12230,12232,12235,12237,12239,12241,12243,12245,12247,12249],{"class":564,"line":5680},[562,12226,7597],{"class":575},[562,12228,12229],{"class":608}," uniforms",[562,12231,2351],{"class":567},[562,12233,12234],{"class":608}," reflectorRef",[562,12236,811],{"class":567},[562,12238,2317],{"class":608},[562,12240,2686],{"class":567},[562,12242,2689],{"class":608},[562,12244,2686],{"class":567},[562,12246,6344],{"class":608},[562,12248,2686],{"class":567},[562,12250,12251],{"class":608},"uniforms\n",[562,12253,12254,12256,12258,12260,12262,12265,12267,12269,12271,12273,12275,12277,12279,12281,12283],{"class":564,"line":5704},[562,12255,2303],{"class":601},[562,12257,2306],{"class":571},[562,12259,11806],{"class":608},[562,12261,2686],{"class":567},[562,12263,12264],{"class":608},"time",[562,12266,2320],{"class":571},[562,12268,2323],{"class":567},[562,12270,12229],{"class":608},[562,12272,811],{"class":567},[562,12274,12264],{"class":608},[562,12276,811],{"class":567},[562,12278,2317],{"class":608},[562,12280,2351],{"class":567},[562,12282,2279],{"class":608},[562,12284,2329],{"class":567},[562,12286,12287,12289],{"class":564,"line":5720},[562,12288,3133],{"class":567},[562,12290,659],{"class":608},[562,12292,12293,12295,12297],{"class":564,"line":5737},[562,12294,665],{"class":567},[562,12296,572],{"class":571},[562,12298,594],{"class":567},[562,12300,12301],{"class":564,"line":5753},[562,12302,630],{"emptyLinePlaceholder":496},[562,12304,12305,12307,12309],{"class":564,"line":5779},[562,12306,568],{"class":567},[562,12308,682],{"class":571},[562,12310,594],{"class":567},[562,12312,12313,12315],{"class":564,"line":5784},[562,12314,690],{"class":567},[562,12316,11568],{"class":571},[562,12318,12319,12322,12324,12326,12329],{"class":564,"line":5842},[562,12320,12321],{"class":575},"    ref",[562,12323,582],{"class":567},[562,12325,585],{"class":567},[562,12327,12328],{"class":588},"reflectorRef",[562,12330,731],{"class":567},[562,12332,12333,12336,12338,12340,12342,12344,12346,12348,12350,12352,12354,12356,12358,12360,12362,12364],{"class":564,"line":5886},[562,12334,12335],{"class":567},"    :",[562,12337,2343],{"class":575},[562,12339,582],{"class":567},[562,12341,585],{"class":567},[562,12343,5765],{"class":567},[562,12345,7687],{"class":608},[562,12347,811],{"class":567},[562,12349,11587],{"class":608},[562,12351,5803],{"class":567},[562,12353,1879],{"class":1688},[562,12355,1691],{"class":567},[562,12357,1115],{"class":1688},[562,12359,1691],{"class":567},[562,12361,1115],{"class":1688},[562,12363,1702],{"class":567},[562,12365,731],{"class":567},[562,12367,12368,12370,12372,12374,12376,12378,12380],{"class":564,"line":5895},[562,12369,12335],{"class":567},[562,12371,6766],{"class":575},[562,12373,582],{"class":567},[562,12375,585],{"class":567},[562,12377,6773],{"class":567},[562,12379,1694],{"class":1688},[562,12381,731],{"class":567},[562,12383,12384,12386,12388,12390,12392],{"class":564,"line":5905},[562,12385,11939],{"class":575},[562,12387,582],{"class":567},[562,12389,585],{"class":567},[562,12391,11631],{"class":588},[562,12393,731],{"class":567},[562,12395,12396,12398,12400,12402,12404,12407],{"class":564,"line":5915},[562,12397,12335],{"class":567},[562,12399,11782],{"class":575},[562,12401,582],{"class":567},[562,12403,585],{"class":567},[562,12405,12406],{"class":608},"customShader",[562,12408,731],{"class":567},[562,12410,12411],{"class":564,"line":4976},[562,12412,4875],{"class":567},[562,12414,12415,12417,12419,12421,12423,12425,12427,12429,12431,12433,12435,12437,12439],{"class":564,"line":4977},[562,12416,701],{"class":567},[562,12418,11644],{"class":571},[562,12420,1675],{"class":567},[562,12422,1779],{"class":575},[562,12424,582],{"class":567},[562,12426,585],{"class":567},[562,12428,1685],{"class":567},[562,12430,2512],{"class":1688},[562,12432,1691],{"class":567},[562,12434,2512],{"class":1688},[562,12436,1702],{"class":567},[562,12438,585],{"class":567},[562,12440,1707],{"class":567},[562,12442,12443,12445,12447],{"class":564,"line":4978},[562,12444,786],{"class":567},[562,12446,429],{"class":571},[562,12448,594],{"class":567},[562,12450,12451,12453,12455],{"class":564,"line":4979},[562,12452,665],{"class":567},[562,12454,682],{"class":571},[562,12456,594],{"class":567},[480,12458,12459],{},"The Reflector shader use the following configuration by default:",[480,12461,12462],{},"You can extend, modify or just play with them",[889,12464,12466],{"id":12465},"default-shader","Default shader",[548,12468,12472],{"className":12469,"code":12470,"language":12471,"meta":488,"style":488},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const shader = {\n  name: 'ReflectorShader',\n  uniforms: {\n    color: {\n      value: null\n    },\n    tDiffuse: {\n      value: null\n    },\n    textureMatrix: {\n      value: null\n    }\n  },\n  vertexShader: /* glsl */`\n  uniform mat4 textureMatrix;\n  varying vec4 vUv;\n\n  #include \u003Ccommon>\n  #include \u003Clogdepthbuf_pars_vertex>\n\n  void main() {\n    vUv = textureMatrix * vec4( position, 1.0 );\n    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n\n    #include \u003Clogdepthbuf_vertex>\n\n  }`,\n  fragmentShader: /* glsl */`\n  uniform vec3 color;\n  uniform sampler2D tDiffuse;\n  varying vec4 vUv;\n\n  #include \u003Clogdepthbuf_pars_fragment>\n\n  float blendOverlay( float base, float blend ) {\n    return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n  }\n\n  vec3 blendOverlay( vec3 base, vec3 blend ) {\n    return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n  }\n\n  void main() {\n    #include \u003Clogdepthbuf_fragment>\n\n    vec4 base = texture2DProj( tDiffuse, vUv );\n    gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n\n    #include \u003Ctonemapping_fragment>\n    #include \u003Ccolorspace_fragment>\n  }`\n\n}\n","js",[518,12473,12474,12485,12501,12509,12517,12527,12532,12540,12548,12552,12560,12568,12572,12576,12586,12591,12596,12600,12605,12610,12614,12619,12624,12629,12633,12638,12642,12651,12661,12666,12671,12675,12679,12684,12688,12693,12698,12703,12707,12712,12717,12721,12725,12729,12734,12738,12743,12748,12752,12757,12762,12768,12772],{"__ignoreMap":488},[562,12475,12476,12478,12481,12483],{"class":564,"line":489},[562,12477,636],{"class":575},[562,12479,12480],{"class":608}," shader ",[562,12482,582],{"class":567},[562,12484,2298],{"class":567},[562,12486,12487,12490,12492,12494,12497,12499],{"class":564,"line":490},[562,12488,12489],{"class":571},"  name",[562,12491,2289],{"class":567},[562,12493,618],{"class":567},[562,12495,12496],{"class":588},"ReflectorShader",[562,12498,651],{"class":567},[562,12500,3073],{"class":567},[562,12502,12503,12505,12507],{"class":564,"line":627},[562,12504,11930],{"class":571},[562,12506,2289],{"class":567},[562,12508,2298],{"class":567},[562,12510,12511,12513,12515],{"class":564,"line":633},[562,12512,11939],{"class":571},[562,12514,2289],{"class":567},[562,12516,2298],{"class":567},[562,12518,12519,12522,12524],{"class":564,"line":662},[562,12520,12521],{"class":571},"      value",[562,12523,2289],{"class":567},[562,12525,12526],{"class":567}," null\n",[562,12528,12529],{"class":564,"line":672},[562,12530,12531],{"class":567},"    },\n",[562,12533,12534,12536,12538],{"class":564,"line":677},[562,12535,11957],{"class":571},[562,12537,2289],{"class":567},[562,12539,2298],{"class":567},[562,12541,12542,12544,12546],{"class":564,"line":687},[562,12543,12521],{"class":571},[562,12545,2289],{"class":567},[562,12547,12526],{"class":567},[562,12549,12550],{"class":564,"line":698},[562,12551,12531],{"class":567},[562,12553,12554,12556,12558],{"class":564,"line":553},[562,12555,11974],{"class":571},[562,12557,2289],{"class":567},[562,12559,2298],{"class":567},[562,12561,12562,12564,12566],{"class":564,"line":554},[562,12563,12521],{"class":571},[562,12565,2289],{"class":567},[562,12567,12526],{"class":567},[562,12569,12570],{"class":564,"line":555},[562,12571,12114],{"class":567},[562,12573,12574],{"class":564,"line":556},[562,12575,3127],{"class":567},[562,12577,12578,12580,12582,12584],{"class":564,"line":557},[562,12579,12012],{"class":571},[562,12581,2289],{"class":567},[562,12583,12017],{"class":10482},[562,12585,12020],{"class":567},[562,12587,12588],{"class":564,"line":773},[562,12589,12590],{"class":588},"  uniform mat4 textureMatrix;\n",[562,12592,12593],{"class":564,"line":783},[562,12594,12595],{"class":588},"  varying vec4 vUv;\n",[562,12597,12598],{"class":564,"line":793},[562,12599,630],{"emptyLinePlaceholder":496},[562,12601,12602],{"class":564,"line":1886},[562,12603,12604],{"class":588},"  #include \u003Ccommon>\n",[562,12606,12607],{"class":564,"line":1921},[562,12608,12609],{"class":588},"  #include \u003Clogdepthbuf_pars_vertex>\n",[562,12611,12612],{"class":564,"line":1930},[562,12613,630],{"emptyLinePlaceholder":496},[562,12615,12616],{"class":564,"line":2489},[562,12617,12618],{"class":588},"  void main() {\n",[562,12620,12621],{"class":564,"line":2494},[562,12622,12623],{"class":588},"    vUv = textureMatrix * vec4( position, 1.0 );\n",[562,12625,12626],{"class":564,"line":2078},[562,12627,12628],{"class":588},"    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n",[562,12630,12631],{"class":564,"line":2079},[562,12632,630],{"emptyLinePlaceholder":496},[562,12634,12635],{"class":564,"line":2080},[562,12636,12637],{"class":588},"    #include \u003Clogdepthbuf_vertex>\n",[562,12639,12640],{"class":564,"line":2081},[562,12641,630],{"emptyLinePlaceholder":496},[562,12643,12644,12647,12649],{"class":564,"line":2593},[562,12645,12646],{"class":588},"  }",[562,12648,12063],{"class":567},[562,12650,3073],{"class":567},[562,12652,12653,12655,12657,12659],{"class":564,"line":2599},[562,12654,12070],{"class":571},[562,12656,2289],{"class":567},[562,12658,12017],{"class":10482},[562,12660,12020],{"class":567},[562,12662,12663],{"class":564,"line":2608},[562,12664,12665],{"class":588},"  uniform vec3 color;\n",[562,12667,12668],{"class":564,"line":2642},[562,12669,12670],{"class":588},"  uniform sampler2D tDiffuse;\n",[562,12672,12673],{"class":564,"line":2647},[562,12674,12595],{"class":588},[562,12676,12677],{"class":564,"line":2655},[562,12678,630],{"emptyLinePlaceholder":496},[562,12680,12681],{"class":564,"line":2672},[562,12682,12683],{"class":588},"  #include \u003Clogdepthbuf_pars_fragment>\n",[562,12685,12686],{"class":564,"line":2702},[562,12687,630],{"emptyLinePlaceholder":496},[562,12689,12690],{"class":564,"line":2707},[562,12691,12692],{"class":588},"  float blendOverlay( float base, float blend ) {\n",[562,12694,12695],{"class":564,"line":2716},[562,12696,12697],{"class":588},"    return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n",[562,12699,12700],{"class":564,"line":2721},[562,12701,12702],{"class":588},"  }\n",[562,12704,12705],{"class":564,"line":2729},[562,12706,630],{"emptyLinePlaceholder":496},[562,12708,12709],{"class":564,"line":2742},[562,12710,12711],{"class":588},"  vec3 blendOverlay( vec3 base, vec3 blend ) {\n",[562,12713,12714],{"class":564,"line":2770},[562,12715,12716],{"class":588},"    return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n",[562,12718,12719],{"class":564,"line":2776},[562,12720,12702],{"class":588},[562,12722,12723],{"class":564,"line":2816},[562,12724,630],{"emptyLinePlaceholder":496},[562,12726,12727],{"class":564,"line":2826},[562,12728,12618],{"class":588},[562,12730,12731],{"class":564,"line":2835},[562,12732,12733],{"class":588},"    #include \u003Clogdepthbuf_fragment>\n",[562,12735,12736],{"class":564,"line":2844},[562,12737,630],{"emptyLinePlaceholder":496},[562,12739,12740],{"class":564,"line":5630},[562,12741,12742],{"class":588},"    vec4 base = texture2DProj( tDiffuse, vUv );\n",[562,12744,12745],{"class":564,"line":5639},[562,12746,12747],{"class":588},"    gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n",[562,12749,12750],{"class":564,"line":5644},[562,12751,630],{"emptyLinePlaceholder":496},[562,12753,12754],{"class":564,"line":5652},[562,12755,12756],{"class":588},"    #include \u003Ctonemapping_fragment>\n",[562,12758,12759],{"class":564,"line":5680},[562,12760,12761],{"class":588},"    #include \u003Ccolorspace_fragment>\n",[562,12763,12764,12766],{"class":564,"line":5704},[562,12765,12646],{"class":588},[562,12767,12020],{"class":567},[562,12769,12770],{"class":564,"line":5720},[562,12771,630],{"emptyLinePlaceholder":496},[562,12773,12774],{"class":564,"line":5737},[562,12775,2390],{"class":567},[1536,12777,12778],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":488,"searchDepth":489,"depth":490,"links":12780},[12781,12782,12783],{"id":546,"depth":490,"text":15},{"id":922,"depth":490,"text":923},{"id":11799,"depth":490,"text":11800,"children":12784},[12785],{"id":12465,"depth":627,"text":12466},"Create real-time reflections of your scene.",{},{"title":429,"description":12786},"hu0_cWNcLItstfep2oA3fWu44BIvehGORFbqaCgBRtM",{"id":12791,"title":433,"body":12792,"description":14008,"extension":493,"links":494,"meta":14009,"navigation":496,"path":434,"seo":14010,"stem":435,"__hash__":14011},"docs/2.api/9.objects/refractor.md",{"type":477,"value":12793,"toc":14001},[12794,12799,12812,12814,13099,13101,13195,13203,13207,13215,13764,13767,13769,13998],[510,12795,12796],{},[12797,12798],"objects-refractor",{},[480,12800,1353,12801,11420,12803,12808,12809,12811],{},[518,12802,11419],{},[523,12804,12807],{"href":12805,"rel":12806},"https://github.com/mrdoob/three.js/blob/dev/examples/jsm/objects/Refractor.js",[527],"Refractor class",", which creates a Mesh that renders what is behind it with a refractive distortion effect — useful for glass panels, water surfaces, and other transmissive materials. This Mesh extends from ",[518,12810,4720],{}," so all the default props can be passed as well.",[544,12813,15],{"id":546},[548,12815,12817],{"className":550,"code":12816,"language":558,"meta":488,"style":488},"\u003Cscript setup lang=\"ts\">\nimport { Refractor } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas shadows alpha>\n    \u003CTresPerspectiveCamera :position=\"[0, 2, 8]\" />\n    \u003COrbitControls />\n\n    \u003C!-- Place objects behind the refracting plane -->\n    \u003CTresMesh :position=\"[-2, 0, -2]\">\n      \u003CTresTorusKnotGeometry />\n      \u003CTresMeshStandardMaterial color=\"hotpink\" />\n    \u003C/TresMesh>\n\n    \u003CSuspense>\n      \u003CRefractor color=\"#9ec8d4\">\n        \u003CTresPlaneGeometry :args=\"[8, 5]\" />\n      \u003C/Refractor>\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n",[518,12818,12819,12839,12858,12866,12870,12878,12890,12923,12931,12935,12940,12972,12981,13000,13008,13012,13020,13039,13067,13075,13083,13091],{"__ignoreMap":488},[562,12820,12821,12823,12825,12827,12829,12831,12833,12835,12837],{"class":564,"line":489},[562,12822,568],{"class":567},[562,12824,572],{"class":571},[562,12826,576],{"class":575},[562,12828,579],{"class":575},[562,12830,582],{"class":567},[562,12832,585],{"class":567},[562,12834,589],{"class":588},[562,12836,585],{"class":567},[562,12838,594],{"class":567},[562,12840,12841,12843,12845,12848,12850,12852,12854,12856],{"class":564,"line":490},[562,12842,602],{"class":601},[562,12844,605],{"class":567},[562,12846,12847],{"class":608}," Refractor",[562,12849,612],{"class":567},[562,12851,615],{"class":601},[562,12853,618],{"class":567},[562,12855,621],{"class":588},[562,12857,624],{"class":567},[562,12859,12860,12862,12864],{"class":564,"line":627},[562,12861,665],{"class":567},[562,12863,572],{"class":571},[562,12865,594],{"class":567},[562,12867,12868],{"class":564,"line":633},[562,12869,630],{"emptyLinePlaceholder":496},[562,12871,12872,12874,12876],{"class":564,"line":662},[562,12873,568],{"class":567},[562,12875,682],{"class":571},[562,12877,594],{"class":567},[562,12879,12880,12882,12884,12886,12888],{"class":564,"line":672},[562,12881,690],{"class":567},[562,12883,693],{"class":571},[562,12885,11504],{"class":575},[562,12887,11507],{"class":575},[562,12889,594],{"class":567},[562,12891,12892,12894,12896,12898,12900,12902,12904,12906,12908,12910,12912,12914,12917,12919,12921],{"class":564,"line":677},[562,12893,701],{"class":567},[562,12895,1672],{"class":571},[562,12897,1675],{"class":567},[562,12899,1678],{"class":575},[562,12901,582],{"class":567},[562,12903,585],{"class":567},[562,12905,1685],{"class":567},[562,12907,1115],{"class":1688},[562,12909,1691],{"class":567},[562,12911,1694],{"class":1688},[562,12913,1691],{"class":567},[562,12915,12916],{"class":1688},"8",[562,12918,1702],{"class":567},[562,12920,585],{"class":567},[562,12922,1707],{"class":567},[562,12924,12925,12927,12929],{"class":564,"line":687},[562,12926,701],{"class":567},[562,12928,1714],{"class":571},[562,12930,1707],{"class":567},[562,12932,12933],{"class":564,"line":698},[562,12934,630],{"emptyLinePlaceholder":496},[562,12936,12937],{"class":564,"line":553},[562,12938,12939],{"class":10482},"    \u003C!-- Place objects behind the refracting plane -->\n",[562,12941,12942,12944,12946,12948,12950,12952,12954,12956,12958,12960,12962,12964,12966,12968,12970],{"class":564,"line":554},[562,12943,701],{"class":567},[562,12945,1764],{"class":571},[562,12947,1675],{"class":567},[562,12949,1678],{"class":575},[562,12951,582],{"class":567},[562,12953,585],{"class":567},[562,12955,5765],{"class":567},[562,12957,1694],{"class":1688},[562,12959,1691],{"class":567},[562,12961,1115],{"class":1688},[562,12963,5971],{"class":567},[562,12965,1694],{"class":1688},[562,12967,1702],{"class":567},[562,12969,585],{"class":567},[562,12971,594],{"class":567},[562,12973,12974,12976,12979],{"class":564,"line":555},[562,12975,712],{"class":567},[562,12977,12978],{"class":571},"TresTorusKnotGeometry",[562,12980,1707],{"class":567},[562,12982,12983,12985,12987,12989,12991,12993,12996,12998],{"class":564,"line":556},[562,12984,712],{"class":567},[562,12986,1810],{"class":571},[562,12988,11035],{"class":575},[562,12990,582],{"class":567},[562,12992,585],{"class":567},[562,12994,12995],{"class":588},"hotpink",[562,12997,585],{"class":567},[562,12999,1707],{"class":567},[562,13001,13002,13004,13006],{"class":564,"line":557},[562,13003,776],{"class":567},[562,13005,1764],{"class":571},[562,13007,594],{"class":567},[562,13009,13010],{"class":564,"line":773},[562,13011,630],{"emptyLinePlaceholder":496},[562,13013,13014,13016,13018],{"class":564,"line":783},[562,13015,701],{"class":567},[562,13017,704],{"class":571},[562,13019,594],{"class":567},[562,13021,13022,13024,13026,13028,13030,13032,13035,13037],{"class":564,"line":793},[562,13023,712],{"class":567},[562,13025,433],{"class":571},[562,13027,11035],{"class":575},[562,13029,582],{"class":567},[562,13031,585],{"class":567},[562,13033,13034],{"class":588},"#9ec8d4",[562,13036,585],{"class":567},[562,13038,594],{"class":567},[562,13040,13041,13043,13045,13047,13049,13051,13053,13055,13057,13059,13061,13063,13065],{"class":564,"line":1886},[562,13042,1771],{"class":567},[562,13044,3507],{"class":571},[562,13046,1675],{"class":567},[562,13048,1779],{"class":575},[562,13050,582],{"class":567},[562,13052,585],{"class":567},[562,13054,1685],{"class":567},[562,13056,12916],{"class":1688},[562,13058,1691],{"class":567},[562,13060,1699],{"class":1688},[562,13062,1702],{"class":567},[562,13064,585],{"class":567},[562,13066,1707],{"class":567},[562,13068,13069,13071,13073],{"class":564,"line":1921},[562,13070,1843],{"class":567},[562,13072,433],{"class":571},[562,13074,594],{"class":567},[562,13076,13077,13079,13081],{"class":564,"line":1930},[562,13078,776],{"class":567},[562,13080,704],{"class":571},[562,13082,594],{"class":567},[562,13084,13085,13087,13089],{"class":564,"line":2489},[562,13086,786],{"class":567},[562,13088,693],{"class":571},[562,13090,594],{"class":567},[562,13092,13093,13095,13097],{"class":564,"line":2494},[562,13094,665],{"class":567},[562,13096,682],{"class":571},[562,13098,594],{"class":567},[544,13100,923],{"id":922},[925,13102,13103,13113],{},[928,13104,13105],{},[931,13106,13107,13109,13111],{},[934,13108,1947],{"align":936},[934,13110,940],{"align":936},[934,13112,943],{},[945,13114,13115,13129,13142,13155,13168,13181],{},[931,13116,13117,13121,13124],{},[950,13118,13119],{"align":936},[2872,13120,2660],{},[950,13122,13123],{"align":936},"Color tint blended with the refracted image",[950,13125,13126],{},[518,13127,13128],{},"'#7f7f7f'",[931,13130,13131,13135,13138],{},[950,13132,13133],{"align":936},[2872,13134,11733],{},[950,13136,13137],{"align":936},"Width of the internal render target texture",[950,13139,13140],{},[518,13141,11739],{},[931,13143,13144,13148,13151],{},[950,13145,13146],{"align":936},[2872,13147,11746],{},[950,13149,13150],{"align":936},"Height of the internal render target texture",[950,13152,13153],{},[518,13154,11739],{},[931,13156,13157,13161,13164],{},[950,13158,13159],{"align":936},[2872,13160,11758],{},[950,13162,13163],{"align":936},"Clip bias for the virtual camera projection",[950,13165,13166],{},[518,13167,1115],{},[931,13169,13170,13174,13177],{},[950,13171,13172],{"align":936},[2872,13173,11770],{},[950,13175,13176],{"align":936},"Number of MSAA samples for the render target",[950,13178,13179],{},[518,13180,1912],{},[931,13182,13183,13187,13190],{},[950,13184,13185],{"align":936},[2872,13186,11782],{},[950,13188,13189],{"align":936},"Custom shader object to override the built-in shader",[950,13191,13192],{},[518,13193,13194],{},"Refractor.RefractorShader",[801,13196,13197],{},[480,13198,13199,13200,13202],{},"All the props except ",[518,13201,2660],{}," are not reactive",[544,13204,13206],{"id":13205},"custom-refraction-effect","Custom refraction effect",[480,13208,11803,13209,1691,13211,7141,13213,11813],{},[518,13210,11806],{},[518,13212,11809],{},[518,13214,11812],{},[548,13216,13218],{"className":550,"code":13217,"language":558,"meta":488,"style":488},"\u003Cscript setup lang=\"ts\">\nimport { Refractor } from '@tresjs/cientos'\nimport { useLoop } from '@tresjs/core'\nimport { shallowRef } from 'vue'\n\nconst refractorRef = shallowRef()\n\nconst customShader = {\n  uniforms: {\n    color: { value: null },\n    tDiffuse: { value: null },\n    textureMatrix: { value: null },\n    time: { value: 0 },\n  },\n  vertexShader: /* glsl */`\n    uniform mat4 textureMatrix;\n    varying vec4 vUv;\n    varying vec2 vPos;\n    void main() {\n      vUv = textureMatrix * vec4(position, 1.0);\n      vPos = position.xy;\n      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n    }`,\n  fragmentShader: /* glsl */`\n    uniform vec3 color;\n    uniform sampler2D tDiffuse;\n    uniform float time;\n    varying vec4 vUv;\n    varying vec2 vPos;\n    float blendOverlay(float base, float blend) {\n      return(base \u003C 0.5 ? (2.0 * base * blend) : (1.0 - 2.0 * (1.0 - base) * (1.0 - blend)));\n    }\n    vec3 blendOverlay(vec3 base, vec3 blend) {\n      return vec3(blendOverlay(base.r, blend.r), blendOverlay(base.g, blend.g), blendOverlay(base.b, blend.b));\n    }\n    void main() {\n      float dist = length(vPos);\n      float wave = sin(dist * 6.0 - time * 4.0) * 0.02;\n      vec2 dir = dist > 0.001 ? normalize(vPos) : vec2(0.0);\n      vec4 distortedUv = vUv + vec4(dir * wave, 0.0, 0.0);\n      vec4 base = texture2DProj(tDiffuse, distortedUv);\n      gl_FragColor = vec4(blendOverlay(base.rgb, color), 1.0);\n      #include \u003Ctonemapping_fragment>\n      #include \u003Ccolorspace_fragment>\n    }`,\n}\n\nconst { onBeforeRender } = useLoop()\nonBeforeRender(({ elapsed }) => {\n  const uniforms = refractorRef.value?.instance?.material?.uniforms\n  if (uniforms?.time) { uniforms.time.value = elapsed }\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CRefractor\n    ref=\"refractorRef\"\n    color=\"#9ec8d4\"\n    :shader=\"customShader\"\n  >\n    \u003CTresPlaneGeometry :args=\"[8, 5]\" />\n  \u003C/Refractor>\n\u003C/template>\n",[518,13219,13220,13240,13258,13276,13294,13298,13311,13315,13325,13333,13349,13365,13381,13397,13401,13411,13415,13419,13423,13427,13431,13435,13439,13447,13457,13461,13465,13469,13473,13477,13481,13485,13489,13493,13497,13501,13505,13509,13513,13517,13521,13525,13529,13533,13537,13545,13549,13553,13569,13585,13612,13644,13650,13658,13662,13670,13677,13690,13702,13716,13720,13748,13756],{"__ignoreMap":488},[562,13221,13222,13224,13226,13228,13230,13232,13234,13236,13238],{"class":564,"line":489},[562,13223,568],{"class":567},[562,13225,572],{"class":571},[562,13227,576],{"class":575},[562,13229,579],{"class":575},[562,13231,582],{"class":567},[562,13233,585],{"class":567},[562,13235,589],{"class":588},[562,13237,585],{"class":567},[562,13239,594],{"class":567},[562,13241,13242,13244,13246,13248,13250,13252,13254,13256],{"class":564,"line":490},[562,13243,602],{"class":601},[562,13245,605],{"class":567},[562,13247,12847],{"class":608},[562,13249,612],{"class":567},[562,13251,615],{"class":601},[562,13253,618],{"class":567},[562,13255,621],{"class":588},[562,13257,624],{"class":567},[562,13259,13260,13262,13264,13266,13268,13270,13272,13274],{"class":564,"line":627},[562,13261,602],{"class":601},[562,13263,605],{"class":567},[562,13265,11865],{"class":608},[562,13267,612],{"class":567},[562,13269,615],{"class":601},[562,13271,618],{"class":567},[562,13273,2148],{"class":588},[562,13275,624],{"class":567},[562,13277,13278,13280,13282,13284,13286,13288,13290,13292],{"class":564,"line":633},[562,13279,602],{"class":601},[562,13281,605],{"class":567},[562,13283,2178],{"class":608},[562,13285,612],{"class":567},[562,13287,615],{"class":601},[562,13289,618],{"class":567},[562,13291,558],{"class":588},[562,13293,624],{"class":567},[562,13295,13296],{"class":564,"line":662},[562,13297,630],{"emptyLinePlaceholder":496},[562,13299,13300,13302,13305,13307,13309],{"class":564,"line":672},[562,13301,636],{"class":575},[562,13303,13304],{"class":608}," refractorRef ",[562,13306,582],{"class":567},[562,13308,2178],{"class":644},[562,13310,7342],{"class":608},[562,13312,13313],{"class":564,"line":677},[562,13314,630],{"emptyLinePlaceholder":496},[562,13316,13317,13319,13321,13323],{"class":564,"line":687},[562,13318,636],{"class":575},[562,13320,11921],{"class":608},[562,13322,582],{"class":567},[562,13324,2298],{"class":567},[562,13326,13327,13329,13331],{"class":564,"line":698},[562,13328,11930],{"class":571},[562,13330,2289],{"class":567},[562,13332,2298],{"class":567},[562,13334,13335,13337,13339,13341,13343,13345,13347],{"class":564,"line":553},[562,13336,11939],{"class":571},[562,13338,2289],{"class":567},[562,13340,605],{"class":567},[562,13342,11946],{"class":571},[562,13344,2289],{"class":567},[562,13346,2223],{"class":567},[562,13348,5403],{"class":567},[562,13350,13351,13353,13355,13357,13359,13361,13363],{"class":564,"line":554},[562,13352,11957],{"class":571},[562,13354,2289],{"class":567},[562,13356,605],{"class":567},[562,13358,11946],{"class":571},[562,13360,2289],{"class":567},[562,13362,2223],{"class":567},[562,13364,5403],{"class":567},[562,13366,13367,13369,13371,13373,13375,13377,13379],{"class":564,"line":555},[562,13368,11974],{"class":571},[562,13370,2289],{"class":567},[562,13372,605],{"class":567},[562,13374,11946],{"class":571},[562,13376,2289],{"class":567},[562,13378,2223],{"class":567},[562,13380,5403],{"class":567},[562,13382,13383,13385,13387,13389,13391,13393,13395],{"class":564,"line":556},[562,13384,11991],{"class":571},[562,13386,2289],{"class":567},[562,13388,605],{"class":567},[562,13390,11946],{"class":571},[562,13392,2289],{"class":567},[562,13394,7280],{"class":1688},[562,13396,5403],{"class":567},[562,13398,13399],{"class":564,"line":557},[562,13400,3127],{"class":567},[562,13402,13403,13405,13407,13409],{"class":564,"line":773},[562,13404,12012],{"class":571},[562,13406,2289],{"class":567},[562,13408,12017],{"class":10482},[562,13410,12020],{"class":567},[562,13412,13413],{"class":564,"line":783},[562,13414,12025],{"class":588},[562,13416,13417],{"class":564,"line":793},[562,13418,12030],{"class":588},[562,13420,13421],{"class":564,"line":1886},[562,13422,12035],{"class":588},[562,13424,13425],{"class":564,"line":1921},[562,13426,12040],{"class":588},[562,13428,13429],{"class":564,"line":1930},[562,13430,12045],{"class":588},[562,13432,13433],{"class":564,"line":2489},[562,13434,12050],{"class":588},[562,13436,13437],{"class":564,"line":2494},[562,13438,12055],{"class":588},[562,13440,13441,13443,13445],{"class":564,"line":2078},[562,13442,12060],{"class":588},[562,13444,12063],{"class":567},[562,13446,3073],{"class":567},[562,13448,13449,13451,13453,13455],{"class":564,"line":2079},[562,13450,12070],{"class":571},[562,13452,2289],{"class":567},[562,13454,12017],{"class":10482},[562,13456,12020],{"class":567},[562,13458,13459],{"class":564,"line":2080},[562,13460,12081],{"class":588},[562,13462,13463],{"class":564,"line":2081},[562,13464,12086],{"class":588},[562,13466,13467],{"class":564,"line":2593},[562,13468,12091],{"class":588},[562,13470,13471],{"class":564,"line":2599},[562,13472,12030],{"class":588},[562,13474,13475],{"class":564,"line":2608},[562,13476,12035],{"class":588},[562,13478,13479],{"class":564,"line":2642},[562,13480,12104],{"class":588},[562,13482,13483],{"class":564,"line":2647},[562,13484,12109],{"class":588},[562,13486,13487],{"class":564,"line":2655},[562,13488,12114],{"class":588},[562,13490,13491],{"class":564,"line":2672},[562,13492,12119],{"class":588},[562,13494,13495],{"class":564,"line":2702},[562,13496,12124],{"class":588},[562,13498,13499],{"class":564,"line":2707},[562,13500,12114],{"class":588},[562,13502,13503],{"class":564,"line":2716},[562,13504,12040],{"class":588},[562,13506,13507],{"class":564,"line":2721},[562,13508,12137],{"class":588},[562,13510,13511],{"class":564,"line":2729},[562,13512,12142],{"class":588},[562,13514,13515],{"class":564,"line":2742},[562,13516,12147],{"class":588},[562,13518,13519],{"class":564,"line":2770},[562,13520,12152],{"class":588},[562,13522,13523],{"class":564,"line":2776},[562,13524,12157],{"class":588},[562,13526,13527],{"class":564,"line":2816},[562,13528,12162],{"class":588},[562,13530,13531],{"class":564,"line":2826},[562,13532,12167],{"class":588},[562,13534,13535],{"class":564,"line":2835},[562,13536,12172],{"class":588},[562,13538,13539,13541,13543],{"class":564,"line":2844},[562,13540,12060],{"class":588},[562,13542,12063],{"class":567},[562,13544,3073],{"class":567},[562,13546,13547],{"class":564,"line":5630},[562,13548,2390],{"class":567},[562,13550,13551],{"class":564,"line":5639},[562,13552,630],{"emptyLinePlaceholder":496},[562,13554,13555,13557,13559,13561,13563,13565,13567],{"class":564,"line":5644},[562,13556,636],{"class":575},[562,13558,605],{"class":567},[562,13560,12197],{"class":608},[562,13562,3133],{"class":567},[562,13564,2351],{"class":567},[562,13566,11865],{"class":644},[562,13568,7342],{"class":608},[562,13570,13571,13573,13575,13577,13579,13581,13583],{"class":564,"line":5652},[562,13572,12210],{"class":644},[562,13574,648],{"class":608},[562,13576,2275],{"class":567},[562,13578,2279],{"class":2278},[562,13580,2295],{"class":567},[562,13582,7590],{"class":575},[562,13584,2298],{"class":567},[562,13586,13587,13589,13591,13593,13596,13598,13600,13602,13604,13606,13608,13610],{"class":564,"line":5680},[562,13588,7597],{"class":575},[562,13590,12229],{"class":608},[562,13592,2351],{"class":567},[562,13594,13595],{"class":608}," refractorRef",[562,13597,811],{"class":567},[562,13599,2317],{"class":608},[562,13601,2686],{"class":567},[562,13603,2689],{"class":608},[562,13605,2686],{"class":567},[562,13607,6344],{"class":608},[562,13609,2686],{"class":567},[562,13611,12251],{"class":608},[562,13613,13614,13616,13618,13620,13622,13624,13626,13628,13630,13632,13634,13636,13638,13640,13642],{"class":564,"line":5704},[562,13615,2303],{"class":601},[562,13617,2306],{"class":571},[562,13619,11806],{"class":608},[562,13621,2686],{"class":567},[562,13623,12264],{"class":608},[562,13625,2320],{"class":571},[562,13627,2323],{"class":567},[562,13629,12229],{"class":608},[562,13631,811],{"class":567},[562,13633,12264],{"class":608},[562,13635,811],{"class":567},[562,13637,2317],{"class":608},[562,13639,2351],{"class":567},[562,13641,2279],{"class":608},[562,13643,2329],{"class":567},[562,13645,13646,13648],{"class":564,"line":5720},[562,13647,3133],{"class":567},[562,13649,659],{"class":608},[562,13651,13652,13654,13656],{"class":564,"line":5737},[562,13653,665],{"class":567},[562,13655,572],{"class":571},[562,13657,594],{"class":567},[562,13659,13660],{"class":564,"line":5753},[562,13661,630],{"emptyLinePlaceholder":496},[562,13663,13664,13666,13668],{"class":564,"line":5779},[562,13665,568],{"class":567},[562,13667,682],{"class":571},[562,13669,594],{"class":567},[562,13671,13672,13674],{"class":564,"line":5784},[562,13673,690],{"class":567},[562,13675,13676],{"class":571},"Refractor\n",[562,13678,13679,13681,13683,13685,13688],{"class":564,"line":5842},[562,13680,12321],{"class":575},[562,13682,582],{"class":567},[562,13684,585],{"class":567},[562,13686,13687],{"class":588},"refractorRef",[562,13689,731],{"class":567},[562,13691,13692,13694,13696,13698,13700],{"class":564,"line":5886},[562,13693,11939],{"class":575},[562,13695,582],{"class":567},[562,13697,585],{"class":567},[562,13699,13034],{"class":588},[562,13701,731],{"class":567},[562,13703,13704,13706,13708,13710,13712,13714],{"class":564,"line":5895},[562,13705,12335],{"class":567},[562,13707,11782],{"class":575},[562,13709,582],{"class":567},[562,13711,585],{"class":567},[562,13713,12406],{"class":608},[562,13715,731],{"class":567},[562,13717,13718],{"class":564,"line":5905},[562,13719,4875],{"class":567},[562,13721,13722,13724,13726,13728,13730,13732,13734,13736,13738,13740,13742,13744,13746],{"class":564,"line":5915},[562,13723,701],{"class":567},[562,13725,3507],{"class":571},[562,13727,1675],{"class":567},[562,13729,1779],{"class":575},[562,13731,582],{"class":567},[562,13733,585],{"class":567},[562,13735,1685],{"class":567},[562,13737,12916],{"class":1688},[562,13739,1691],{"class":567},[562,13741,1699],{"class":1688},[562,13743,1702],{"class":567},[562,13745,585],{"class":567},[562,13747,1707],{"class":567},[562,13749,13750,13752,13754],{"class":564,"line":4976},[562,13751,786],{"class":567},[562,13753,433],{"class":571},[562,13755,594],{"class":567},[562,13757,13758,13760,13762],{"class":564,"line":4977},[562,13759,665],{"class":567},[562,13761,682],{"class":571},[562,13763,594],{"class":567},[480,13765,13766],{},"The Refractor shader uses the following configuration by default:",[889,13768,12466],{"id":12465},[548,13770,13772],{"className":12469,"code":13771,"language":12471,"meta":488,"style":488},"const shader = {\n  uniforms: {\n    color: {\n      value: null\n    },\n    tDiffuse: {\n      value: null\n    },\n    textureMatrix: {\n      value: null\n    }\n  },\n  vertexShader: /* glsl */`\n    uniform mat4 textureMatrix;\n    varying vec4 vUv;\n\n    void main() {\n      vUv = textureMatrix * vec4( position, 1.0 );\n      gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n    }`,\n  fragmentShader: /* glsl */`\n    uniform vec3 color;\n    uniform sampler2D tDiffuse;\n    varying vec4 vUv;\n\n    float blendOverlay( float base, float blend ) {\n      return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n    }\n\n    vec3 blendOverlay( vec3 base, vec3 blend ) {\n      return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n    }\n\n    void main() {\n      vec4 base = texture2DProj( tDiffuse, vUv );\n      gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n\n      #include \u003Ctonemapping_fragment>\n      #include \u003Ccolorspace_fragment>\n    }`\n}\n",[518,13773,13774,13784,13792,13800,13808,13812,13820,13828,13832,13840,13848,13852,13856,13866,13870,13874,13878,13882,13887,13892,13900,13910,13914,13918,13922,13926,13931,13936,13940,13944,13949,13954,13958,13962,13966,13971,13976,13980,13984,13988,13994],{"__ignoreMap":488},[562,13775,13776,13778,13780,13782],{"class":564,"line":489},[562,13777,636],{"class":575},[562,13779,12480],{"class":608},[562,13781,582],{"class":567},[562,13783,2298],{"class":567},[562,13785,13786,13788,13790],{"class":564,"line":490},[562,13787,11930],{"class":571},[562,13789,2289],{"class":567},[562,13791,2298],{"class":567},[562,13793,13794,13796,13798],{"class":564,"line":627},[562,13795,11939],{"class":571},[562,13797,2289],{"class":567},[562,13799,2298],{"class":567},[562,13801,13802,13804,13806],{"class":564,"line":633},[562,13803,12521],{"class":571},[562,13805,2289],{"class":567},[562,13807,12526],{"class":567},[562,13809,13810],{"class":564,"line":662},[562,13811,12531],{"class":567},[562,13813,13814,13816,13818],{"class":564,"line":672},[562,13815,11957],{"class":571},[562,13817,2289],{"class":567},[562,13819,2298],{"class":567},[562,13821,13822,13824,13826],{"class":564,"line":677},[562,13823,12521],{"class":571},[562,13825,2289],{"class":567},[562,13827,12526],{"class":567},[562,13829,13830],{"class":564,"line":687},[562,13831,12531],{"class":567},[562,13833,13834,13836,13838],{"class":564,"line":698},[562,13835,11974],{"class":571},[562,13837,2289],{"class":567},[562,13839,2298],{"class":567},[562,13841,13842,13844,13846],{"class":564,"line":553},[562,13843,12521],{"class":571},[562,13845,2289],{"class":567},[562,13847,12526],{"class":567},[562,13849,13850],{"class":564,"line":554},[562,13851,12114],{"class":567},[562,13853,13854],{"class":564,"line":555},[562,13855,3127],{"class":567},[562,13857,13858,13860,13862,13864],{"class":564,"line":556},[562,13859,12012],{"class":571},[562,13861,2289],{"class":567},[562,13863,12017],{"class":10482},[562,13865,12020],{"class":567},[562,13867,13868],{"class":564,"line":557},[562,13869,12025],{"class":588},[562,13871,13872],{"class":564,"line":773},[562,13873,12030],{"class":588},[562,13875,13876],{"class":564,"line":783},[562,13877,630],{"emptyLinePlaceholder":496},[562,13879,13880],{"class":564,"line":793},[562,13881,12040],{"class":588},[562,13883,13884],{"class":564,"line":1886},[562,13885,13886],{"class":588},"      vUv = textureMatrix * vec4( position, 1.0 );\n",[562,13888,13889],{"class":564,"line":1921},[562,13890,13891],{"class":588},"      gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n",[562,13893,13894,13896,13898],{"class":564,"line":1930},[562,13895,12060],{"class":588},[562,13897,12063],{"class":567},[562,13899,3073],{"class":567},[562,13901,13902,13904,13906,13908],{"class":564,"line":2489},[562,13903,12070],{"class":571},[562,13905,2289],{"class":567},[562,13907,12017],{"class":10482},[562,13909,12020],{"class":567},[562,13911,13912],{"class":564,"line":2494},[562,13913,12081],{"class":588},[562,13915,13916],{"class":564,"line":2078},[562,13917,12086],{"class":588},[562,13919,13920],{"class":564,"line":2079},[562,13921,12030],{"class":588},[562,13923,13924],{"class":564,"line":2080},[562,13925,630],{"emptyLinePlaceholder":496},[562,13927,13928],{"class":564,"line":2081},[562,13929,13930],{"class":588},"    float blendOverlay( float base, float blend ) {\n",[562,13932,13933],{"class":564,"line":2593},[562,13934,13935],{"class":588},"      return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n",[562,13937,13938],{"class":564,"line":2599},[562,13939,12114],{"class":588},[562,13941,13942],{"class":564,"line":2608},[562,13943,630],{"emptyLinePlaceholder":496},[562,13945,13946],{"class":564,"line":2642},[562,13947,13948],{"class":588},"    vec3 blendOverlay( vec3 base, vec3 blend ) {\n",[562,13950,13951],{"class":564,"line":2647},[562,13952,13953],{"class":588},"      return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n",[562,13955,13956],{"class":564,"line":2655},[562,13957,12114],{"class":588},[562,13959,13960],{"class":564,"line":2672},[562,13961,630],{"emptyLinePlaceholder":496},[562,13963,13964],{"class":564,"line":2702},[562,13965,12040],{"class":588},[562,13967,13968],{"class":564,"line":2707},[562,13969,13970],{"class":588},"      vec4 base = texture2DProj( tDiffuse, vUv );\n",[562,13972,13973],{"class":564,"line":2716},[562,13974,13975],{"class":588},"      gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n",[562,13977,13978],{"class":564,"line":2721},[562,13979,630],{"emptyLinePlaceholder":496},[562,13981,13982],{"class":564,"line":2729},[562,13983,12167],{"class":588},[562,13985,13986],{"class":564,"line":2742},[562,13987,12172],{"class":588},[562,13989,13990,13992],{"class":564,"line":2770},[562,13991,12060],{"class":588},[562,13993,12020],{"class":567},[562,13995,13996],{"class":564,"line":2776},[562,13997,2390],{"class":567},[1536,13999,14000],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":488,"searchDepth":489,"depth":490,"links":14002},[14003,14004,14005],{"id":546,"depth":490,"text":15},{"id":922,"depth":490,"text":923},{"id":13205,"depth":490,"text":13206,"children":14006},[14007],{"id":12465,"depth":627,"text":12466},"Create real-time refractive (glass-like) surfaces in your scene.",{},{"title":433,"description":14008},"0S_zvDpr4VfCZrIb3n88oUTHkrLHsw7pJnIv_3ITHzM",{"id":14013,"title":437,"body":14014,"description":14559,"extension":493,"links":494,"meta":14560,"navigation":496,"path":438,"seo":14561,"stem":439,"__hash__":14562},"docs/2.api/9.objects/text-3d.md",{"type":477,"value":14015,"toc":14555},[14016,14021,14033,14035,14054,14162,14178,14271,14274,14393,14395,14552],[510,14017,14018],{},[14019,14020],"objects-text",{},[480,14022,14023,14026,14027,14032],{},[518,14024,14025],{},"\u003CText3D />"," is a component that renders text in 3D. It is a wrapper around the ",[523,14028,14031],{"href":14029,"rel":14030},"https://threejs.org/docs/#api/en/geometries/TextGeometry",[527],"TextGeometry"," class.",[544,14034,15],{"id":546},[480,14036,14037,14038,14040,14041,14044,14045,14048,14049],{},"To use the ",[518,14039,14025],{}," component you need to pass the ",[518,14042,14043],{},"font"," prop with the URL of the font JSON file you want to use. TextGeometry uses ",[518,14046,14047],{},"typeface",".json generated fonts, you can generate yours ",[523,14050,14053],{"href":14051,"rel":14052},"http://gero3.github.io/facetype.js/",[527],"here",[548,14055,14057],{"className":550,"code":14056,"language":558,"meta":488,"style":488},"\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CSuspense>\n      \u003CText3D\n        text=\"TresJS\"\n        font=\"/fonts/FiraCodeRegular.json\"\n      >\n        \u003CTresMeshNormalMaterial />\n      \u003C/Text3D>\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n",[518,14058,14059,14067,14075,14083,14090,14104,14118,14122,14130,14138,14146,14154],{"__ignoreMap":488},[562,14060,14061,14063,14065],{"class":564,"line":489},[562,14062,568],{"class":567},[562,14064,682],{"class":571},[562,14066,594],{"class":567},[562,14068,14069,14071,14073],{"class":564,"line":490},[562,14070,690],{"class":567},[562,14072,693],{"class":571},[562,14074,594],{"class":567},[562,14076,14077,14079,14081],{"class":564,"line":627},[562,14078,701],{"class":567},[562,14080,704],{"class":571},[562,14082,594],{"class":567},[562,14084,14085,14087],{"class":564,"line":633},[562,14086,712],{"class":567},[562,14088,14089],{"class":571},"Text3D\n",[562,14091,14092,14095,14097,14099,14102],{"class":564,"line":662},[562,14093,14094],{"class":575},"        text",[562,14096,582],{"class":567},[562,14098,585],{"class":567},[562,14100,14101],{"class":588},"TresJS",[562,14103,731],{"class":567},[562,14105,14106,14109,14111,14113,14116],{"class":564,"line":672},[562,14107,14108],{"class":575},"        font",[562,14110,582],{"class":567},[562,14112,585],{"class":567},[562,14114,14115],{"class":588},"/fonts/FiraCodeRegular.json",[562,14117,731],{"class":567},[562,14119,14120],{"class":564,"line":677},[562,14121,4118],{"class":567},[562,14123,14124,14126,14128],{"class":564,"line":687},[562,14125,1771],{"class":567},[562,14127,2821],{"class":571},[562,14129,1707],{"class":567},[562,14131,14132,14134,14136],{"class":564,"line":698},[562,14133,1843],{"class":567},[562,14135,437],{"class":571},[562,14137,594],{"class":567},[562,14139,14140,14142,14144],{"class":564,"line":553},[562,14141,776],{"class":567},[562,14143,704],{"class":571},[562,14145,594],{"class":567},[562,14147,14148,14150,14152],{"class":564,"line":554},[562,14149,786],{"class":567},[562,14151,693],{"class":571},[562,14153,594],{"class":567},[562,14155,14156,14158,14160],{"class":564,"line":555},[562,14157,665],{"class":567},[562,14159,682],{"class":571},[562,14161,594],{"class":567},[480,14163,14164,14165,14168,14169,14171,14172,14174,14175,14177],{},"Notice that you need to pass the ",[518,14166,14167],{},"\u003CTresMeshNormalMaterial />"," component as a child of the ",[518,14170,14025],{}," component. This is because ",[518,14173,14025],{}," is a ",[518,14176,4720],{}," component, so it needs a material. The geometry is created automatically. Also you can pass the text as a slot or as a prop like this:",[548,14179,14181],{"className":550,"code":14180,"language":558,"meta":488,"style":488},"\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CSuspense>\n      \u003CText3D font=\"/fonts/FiraCodeRegular.json\">\n        TresJS\n        \u003CTresMeshNormalMaterial />\n      \u003C/Text3D>\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n",[518,14182,14183,14191,14199,14207,14226,14231,14239,14247,14255,14263],{"__ignoreMap":488},[562,14184,14185,14187,14189],{"class":564,"line":489},[562,14186,568],{"class":567},[562,14188,682],{"class":571},[562,14190,594],{"class":567},[562,14192,14193,14195,14197],{"class":564,"line":490},[562,14194,690],{"class":567},[562,14196,693],{"class":571},[562,14198,594],{"class":567},[562,14200,14201,14203,14205],{"class":564,"line":627},[562,14202,701],{"class":567},[562,14204,704],{"class":571},[562,14206,594],{"class":567},[562,14208,14209,14211,14213,14216,14218,14220,14222,14224],{"class":564,"line":633},[562,14210,712],{"class":567},[562,14212,437],{"class":571},[562,14214,14215],{"class":575}," font",[562,14217,582],{"class":567},[562,14219,585],{"class":567},[562,14221,14115],{"class":588},[562,14223,585],{"class":567},[562,14225,594],{"class":567},[562,14227,14228],{"class":564,"line":662},[562,14229,14230],{"class":608},"        TresJS\n",[562,14232,14233,14235,14237],{"class":564,"line":672},[562,14234,1771],{"class":567},[562,14236,2821],{"class":571},[562,14238,1707],{"class":567},[562,14240,14241,14243,14245],{"class":564,"line":677},[562,14242,1843],{"class":567},[562,14244,437],{"class":571},[562,14246,594],{"class":567},[562,14248,14249,14251,14253],{"class":564,"line":687},[562,14250,776],{"class":567},[562,14252,704],{"class":571},[562,14254,594],{"class":567},[562,14256,14257,14259,14261],{"class":564,"line":698},[562,14258,786],{"class":567},[562,14260,693],{"class":571},[562,14262,594],{"class":567},[562,14264,14265,14267,14269],{"class":564,"line":553},[562,14266,665],{"class":567},[562,14268,682],{"class":571},[562,14270,594],{"class":567},[480,14272,14273],{},"In addition, you can use the power of Vue to add reactivity, but you need to apply the needUpdates prop, for example you can create a reactive value, apply a v-model and make the bound, the Text3D component will update",[548,14275,14277],{"className":550,"code":14276,"language":558,"meta":488,"style":488},"\u003Ctemplate>\n  \u003Cinput v-model=\"myReactiveText\" />\n  \u003CTresCanvas>\n    \u003CSuspense>\n      \u003CText3D\n        :text=\"myReactiveText\"\n        font=\"/fonts/FiraCodeRegular.json\"\n        center\n        need-updates\n      />\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n",[518,14278,14279,14287,14308,14316,14324,14330,14344,14356,14360,14365,14369,14377,14385],{"__ignoreMap":488},[562,14280,14281,14283,14285],{"class":564,"line":489},[562,14282,568],{"class":567},[562,14284,682],{"class":571},[562,14286,594],{"class":567},[562,14288,14289,14291,14294,14297,14299,14301,14304,14306],{"class":564,"line":490},[562,14290,690],{"class":567},[562,14292,14293],{"class":571},"input",[562,14295,14296],{"class":575}," v-model",[562,14298,582],{"class":567},[562,14300,585],{"class":567},[562,14302,14303],{"class":608},"myReactiveText",[562,14305,585],{"class":567},[562,14307,1707],{"class":567},[562,14309,14310,14312,14314],{"class":564,"line":627},[562,14311,690],{"class":567},[562,14313,693],{"class":571},[562,14315,594],{"class":567},[562,14317,14318,14320,14322],{"class":564,"line":633},[562,14319,701],{"class":567},[562,14321,704],{"class":571},[562,14323,594],{"class":567},[562,14325,14326,14328],{"class":564,"line":662},[562,14327,712],{"class":567},[562,14329,14089],{"class":571},[562,14331,14332,14334,14336,14338,14340,14342],{"class":564,"line":672},[562,14333,752],{"class":567},[562,14335,1488],{"class":575},[562,14337,582],{"class":567},[562,14339,585],{"class":567},[562,14341,14303],{"class":608},[562,14343,731],{"class":567},[562,14345,14346,14348,14350,14352,14354],{"class":564,"line":677},[562,14347,14108],{"class":575},[562,14349,582],{"class":567},[562,14351,585],{"class":567},[562,14353,14115],{"class":588},[562,14355,731],{"class":567},[562,14357,14358],{"class":564,"line":687},[562,14359,4034],{"class":575},[562,14361,14362],{"class":564,"line":698},[562,14363,14364],{"class":575},"        need-updates\n",[562,14366,14367],{"class":564,"line":553},[562,14368,770],{"class":567},[562,14370,14371,14373,14375],{"class":564,"line":554},[562,14372,776],{"class":567},[562,14374,704],{"class":571},[562,14376,594],{"class":567},[562,14378,14379,14381,14383],{"class":564,"line":555},[562,14380,786],{"class":567},[562,14382,693],{"class":571},[562,14384,594],{"class":567},[562,14386,14387,14389,14391],{"class":564,"line":556},[562,14388,665],{"class":567},[562,14390,682],{"class":571},[562,14392,594],{"class":567},[544,14394,923],{"id":922},[925,14396,14397,14407],{},[928,14398,14399],{},[931,14400,14401,14403,14405],{},[934,14402,1947],{"align":936},[934,14404,940],{"align":936},[934,14406,943],{},[945,14408,14409,14420,14431,14443,14455,14467,14479,14492,14505,14517,14529,14540],{},[931,14410,14411,14415,14418],{},[950,14412,14413],{"align":936},[2872,14414,14043],{},[950,14416,14417],{"align":936},"The font data or font name to use for the text.",[950,14419],{},[931,14421,14422,14426,14429],{},[950,14423,14424],{"align":936},[2872,14425,1488],{},[950,14427,14428],{"align":936},"The text to display.",[950,14430],{},[931,14432,14433,14438,14441],{},[950,14434,14435],{"align":936},[2872,14436,14437],{},"size",[950,14439,14440],{"align":936},"The size of the text.",[950,14442,1879],{},[931,14444,14445,14449,14452],{},[950,14446,14447],{"align":936},[2872,14448,2893],{},[950,14450,14451],{"align":936},"The height of the text.",[950,14453,14454],{},"0.2",[931,14456,14457,14462,14465],{},[950,14458,14459],{"align":936},[2872,14460,14461],{},"curveSegments",[950,14463,14464],{"align":936},"The number of curve segments to use when generating the text geometry.",[950,14466,1699],{},[931,14468,14469,14474,14477],{},[950,14470,14471],{"align":936},[2872,14472,14473],{},"bevelEnabled",[950,14475,14476],{"align":936},"A flag indicating whether beveling should be enabled for the text.",[950,14478,1091],{},[931,14480,14481,14486,14489],{},[950,14482,14483],{"align":936},[2872,14484,14485],{},"bevelThickness",[950,14487,14488],{"align":936},"The thickness of the beveled edge on the text.",[950,14490,14491],{},"0.05",[931,14493,14494,14499,14502],{},[950,14495,14496],{"align":936},[2872,14497,14498],{},"bevelSize",[950,14500,14501],{"align":936},"The size of the beveled edge on the text.",[950,14503,14504],{},"0.02",[931,14506,14507,14512,14515],{},[950,14508,14509],{"align":936},[2872,14510,14511],{},"bevelOffset",[950,14513,14514],{"align":936},"The offset of the beveled edge on the text.",[950,14516,1115],{},[931,14518,14519,14524,14527],{},[950,14520,14521],{"align":936},[2872,14522,14523],{},"bevelSegments",[950,14525,14526],{"align":936},"The number of bevel segments to use when generating the text geometry.",[950,14528,1912],{},[931,14530,14531,14535,14538],{},[950,14532,14533],{"align":936},[2872,14534,1196],{},[950,14536,14537],{"align":936},"To center the text",[950,14539,1130],{},[931,14541,14542,14547,14550],{},[950,14543,14544],{"align":936},[2872,14545,14546],{},"needUpdates",[950,14548,14549],{"align":936},"This props add reactivity",[950,14551,1130],{},[1536,14553,14554],{},"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 .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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}",{"title":488,"searchDepth":489,"depth":490,"links":14556},[14557,14558],{"id":546,"depth":490,"text":15},{"id":922,"depth":490,"text":923},"Render text in 3D using TextGeometry.",{},{"title":437,"description":14559},"t6bahOskD-ojOxftya8MrETrI6LWNTRBawqfzv7mouA",1781273441962]