[{"data":1,"prerenderedAt":13114},["ShallowReactive",2],{"navigation":3,"/api/objects":478,"/api/objects-surround":503,"objects-list":508},[4,22],{"title":5,"path":6,"stem":7,"children":8},"Getting Started","/getting-started","1.getting-started/1.index",[9,10,14,18],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"Installation Guide","/getting-started/installation","1.getting-started/2.installation",{"title":15,"path":16,"stem":17},"Usage","/getting-started/usage","1.getting-started/3.usage",{"title":19,"path":20,"stem":21},"Upgrade Guide","/getting-started/upgrade-guide","1.getting-started/4.upgrade-guide",{"title":23,"path":24,"stem":25,"children":26},"Api","/api","2.api",[27,30,84,114,156,194,288,314,348,398,444],{"title":28,"path":24,"stem":29},"All","2.api/index",{"title":31,"path":32,"stem":33,"children":34},"Abstractions","/api/abstractions","2.api/1.abstractions/index",[35,36,40,44,48,52,56,60,64,68,72,76,80],{"title":31,"path":32,"stem":33},{"title":37,"path":38,"stem":39},"Align","/api/abstractions/align","2.api/1.abstractions/align",{"title":41,"path":42,"stem":43},"Billboard","/api/abstractions/billboard","2.api/1.abstractions/billboard",{"title":45,"path":46,"stem":47},"Camera Shake","/api/abstractions/camera-shake","2.api/1.abstractions/camera-shake",{"title":49,"path":50,"stem":51},"Decal","/api/abstractions/decal","2.api/1.abstractions/decal",{"title":53,"path":54,"stem":55},"Edges","/api/abstractions/edges","2.api/1.abstractions/edges",{"title":57,"path":58,"stem":59},"Fit","/api/abstractions/fit","2.api/1.abstractions/fit",{"title":61,"path":62,"stem":63},"Levioso (Float)","/api/abstractions/levioso","2.api/1.abstractions/levioso",{"title":65,"path":66,"stem":67},"Mask","/api/abstractions/mask","2.api/1.abstractions/mask",{"title":69,"path":70,"stem":71},"Outline","/api/abstractions/outline","2.api/1.abstractions/outline",{"title":73,"path":74,"stem":75},"Sampler","/api/abstractions/sampler","2.api/1.abstractions/sampler",{"title":77,"path":78,"stem":79},"ScreenSizer","/api/abstractions/screen-sizer","2.api/1.abstractions/screen-sizer",{"title":81,"path":82,"stem":83},"ScreenSpace","/api/abstractions/screen-space","2.api/1.abstractions/screen-space",{"title":85,"path":86,"stem":87,"children":88},"Controls","/api/controls","2.api/2.controls/index",[89,90,94,98,102,106,110],{"title":85,"path":86,"stem":87},{"title":91,"path":92,"stem":93},"Camera Controls","/api/controls/camera-controls","2.api/2.controls/camera-controls",{"title":95,"path":96,"stem":97},"Keyboard Controls","/api/controls/keyboard-controls","2.api/2.controls/keyboard-controls",{"title":99,"path":100,"stem":101},"Map Controls","/api/controls/map-controls","2.api/2.controls/map-controls",{"title":103,"path":104,"stem":105},"Orbit Controls","/api/controls/orbit-controls","2.api/2.controls/orbit-controls",{"title":107,"path":108,"stem":109},"PointerLock Controls","/api/controls/pointer-lock-controls","2.api/2.controls/pointer-lock-controls",{"title":111,"path":112,"stem":113},"Transform Controls","/api/controls/transform-controls","2.api/2.controls/transform-controls",{"title":115,"path":116,"stem":117,"children":118},"Loaders","/api/loaders","2.api/3.loaders/index",[119,120,124,128,132,136,140,144,148,152],{"title":115,"path":116,"stem":117},{"title":121,"path":122,"stem":123},"useGLTF","/api/loaders/use-gltf","2.api/3.loaders/1.use-gltf",{"title":125,"path":126,"stem":127},"GLTFModel","/api/loaders/gltf-model","2.api/3.loaders/2.gltf-model",{"title":129,"path":130,"stem":131},"useFBX","/api/loaders/use-fbx","2.api/3.loaders/3.use-fbx",{"title":133,"path":134,"stem":135},"FBXModel","/api/loaders/fbx-model","2.api/3.loaders/4.fbx-model",{"title":137,"path":138,"stem":139},"useTexture","/api/loaders/use-texture","2.api/3.loaders/5.use-texture",{"title":141,"path":142,"stem":143},"useTextures","/api/loaders/use-textures","2.api/3.loaders/6.use-textures",{"title":145,"path":146,"stem":147},"useSVG","/api/loaders/use-svg","2.api/3.loaders/7.use-svg",{"title":149,"path":150,"stem":151},"useProgress","/api/loaders/use-progress","2.api/3.loaders/use-progress",{"title":153,"path":154,"stem":155},"useVideoTexture","/api/loaders/use-video-texture","2.api/3.loaders/use-video-texture",{"title":157,"path":158,"stem":159,"children":160},"Materials","/api/materials","2.api/4.materials/index",[161,162,166,170,174,178,182,186,190],{"title":157,"path":158,"stem":159},{"title":163,"path":164,"stem":165},"Custom Shader Material","/api/materials/custom-shader-material","2.api/4.materials/custom-shader-material",{"title":167,"path":168,"stem":169},"Mesh Glass Material","/api/materials/glass-material","2.api/4.materials/glass-material",{"title":171,"path":172,"stem":173},"Holographic Material","/api/materials/holographic-material","2.api/4.materials/holographic-material",{"title":175,"path":176,"stem":177},"Mesh Discard Material","/api/materials/mesh-discard-material","2.api/4.materials/mesh-discard-material",{"title":179,"path":180,"stem":181},"Mesh Reflection Material","/api/materials/mesh-reflection-material","2.api/4.materials/mesh-reflection-material",{"title":183,"path":184,"stem":185},"Mesh Transmission Material","/api/materials/mesh-transmission-material","2.api/4.materials/mesh-transmission-material",{"title":187,"path":188,"stem":189},"Point Material","/api/materials/point-material","2.api/4.materials/point-material",{"title":191,"path":192,"stem":193},"Wobble Material","/api/materials/wobble-material","2.api/4.materials/wobble-material",{"title":195,"path":196,"stem":197,"children":198},"Shapes","/api/shapes","2.api/5.shapes/index",[199,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284],{"title":195,"path":196,"stem":197},{"title":201,"path":202,"stem":203},"Box","/api/shapes/box","2.api/5.shapes/box",{"title":205,"path":206,"stem":207},"CatmullRomCurve3","/api/shapes/catmullromcurve3","2.api/5.shapes/catmullromcurve3",{"title":209,"path":210,"stem":211},"Circle","/api/shapes/circle","2.api/5.shapes/circle",{"title":213,"path":214,"stem":215},"Cone","/api/shapes/cone","2.api/5.shapes/cone",{"title":217,"path":218,"stem":219},"Cubic Bezier Line","/api/shapes/cubic-bezier-line","2.api/5.shapes/cubic-bezier-line",{"title":221,"path":222,"stem":223},"Cylinder","/api/shapes/cylinder","2.api/5.shapes/cylinder",{"title":225,"path":226,"stem":227},"Dodecahedron","/api/shapes/dodecahedron","2.api/5.shapes/dodecahedron",{"title":229,"path":230,"stem":231},"Grid","/api/shapes/grid","2.api/5.shapes/grid",{"title":233,"path":234,"stem":235},"Icosahedron","/api/shapes/icosahedron","2.api/5.shapes/icosahedron",{"title":237,"path":238,"stem":239},"Line2","/api/shapes/line2","2.api/5.shapes/line2",{"title":241,"path":242,"stem":243},"Octahedron","/api/shapes/octahedron","2.api/5.shapes/octahedron",{"title":245,"path":246,"stem":247},"Plane","/api/shapes/plane","2.api/5.shapes/plane",{"title":249,"path":250,"stem":251},"Quadratic Bezier Line","/api/shapes/quadratic-bezier-line","2.api/5.shapes/quadratic-bezier-line",{"title":253,"path":254,"stem":255},"Ring","/api/shapes/ring","2.api/5.shapes/ring",{"title":257,"path":258,"stem":259},"Rounded Box","/api/shapes/rounded-box","2.api/5.shapes/rounded-box",{"title":261,"path":262,"stem":263},"Screen Quad","/api/shapes/screen-quad","2.api/5.shapes/screen-quad",{"title":265,"path":266,"stem":267},"Sphere","/api/shapes/sphere","2.api/5.shapes/sphere",{"title":269,"path":270,"stem":271},"Superformula","/api/shapes/superformula","2.api/5.shapes/superformula",{"title":273,"path":274,"stem":275},"Tetrahedron","/api/shapes/tetrahedron","2.api/5.shapes/tetrahedron",{"title":277,"path":278,"stem":279},"Torus","/api/shapes/torus","2.api/5.shapes/torus",{"title":281,"path":282,"stem":283},"Torus Knot","/api/shapes/torus-knot","2.api/5.shapes/torus-knot",{"title":285,"path":286,"stem":287},"Tube","/api/shapes/tube","2.api/5.shapes/tube",{"title":289,"path":290,"stem":291,"children":292},"Debug/Performance","/api/debug-performance","2.api/6.debug-performance/index",[293,294,298,302,306,310],{"title":289,"path":290,"stem":291},{"title":295,"path":296,"stem":297},"Helper","/api/debug-performance/helper","2.api/6.debug-performance/helper",{"title":299,"path":300,"stem":301},"LOD","/api/debug-performance/lod","2.api/6.debug-performance/lod",{"title":303,"path":304,"stem":305},"Stats","/api/debug-performance/stats","2.api/6.debug-performance/stats",{"title":307,"path":308,"stem":309},"StatsGl","/api/debug-performance/stats-gl","2.api/6.debug-performance/stats-gl",{"title":311,"path":312,"stem":313},"useBVH","/api/debug-performance/use-bvh","2.api/6.debug-performance/use-bvh",{"title":315,"path":316,"stem":317,"children":318},"Light/Shadow","/api/light-shadow","2.api/7.light-shadow/index",[319,320,324,328,332,336,340,344],{"title":315,"path":316,"stem":317},{"title":321,"path":322,"stem":323},"Accumulative Shadows","/api/light-shadow/accumulative-shadows","2.api/7.light-shadow/accumulative-shadows",{"title":325,"path":326,"stem":327},"Bake Shadows","/api/light-shadow/bake-shadows","2.api/7.light-shadow/bake-shadows",{"title":329,"path":330,"stem":331},"Circle Shadow","/api/light-shadow/circle-shadow","2.api/7.light-shadow/circle-shadow",{"title":333,"path":334,"stem":335},"Contact Shadows","/api/light-shadow/contact-shadows","2.api/7.light-shadow/contact-shadows",{"title":337,"path":338,"stem":339},"Lensflare","/api/light-shadow/lensflare","2.api/7.light-shadow/lensflare",{"title":341,"path":342,"stem":343},"Randomized Lights","/api/light-shadow/randomized-lights","2.api/7.light-shadow/randomized-lights",{"title":345,"path":346,"stem":347},"Soft Shadows","/api/light-shadow/soft-shadows","2.api/7.light-shadow/soft-shadows",{"title":349,"path":350,"stem":351,"children":352},"Staging","/api/staging","2.api/8.staging/index",[353,354,358,362,366,370,374,378,382,386,390,394],{"title":349,"path":350,"stem":351},{"title":355,"path":356,"stem":357},"Environment","/api/staging/environment","2.api/8.staging/1.environment",{"title":359,"path":360,"stem":361},"useEnvironment","/api/staging/use-environment","2.api/8.staging/2.use-environment",{"title":363,"path":364,"stem":365},"Lightformer","/api/staging/lightformer","2.api/8.staging/3.lightformer",{"title":367,"path":368,"stem":369},"Backdrop","/api/staging/backdrop","2.api/8.staging/backdrop",{"title":371,"path":372,"stem":373},"Ocean","/api/staging/ocean","2.api/8.staging/ocean",{"title":375,"path":376,"stem":377},"Precipitation","/api/staging/precipitation","2.api/8.staging/precipitation",{"title":379,"path":380,"stem":381},"Sky","/api/staging/sky","2.api/8.staging/sky",{"title":383,"path":384,"stem":385},"Smoke","/api/staging/smoke","2.api/8.staging/smoke",{"title":387,"path":388,"stem":389},"Sparkles","/api/staging/sparkles","2.api/8.staging/sparkles",{"title":391,"path":392,"stem":393},"Stage","/api/staging/stage","2.api/8.staging/stage",{"title":395,"path":396,"stem":397},"Stars","/api/staging/stars","2.api/8.staging/stars",{"title":399,"path":400,"stem":401,"children":402},"Objects","/api/objects","2.api/9.objects/index",[403,404,408,412,416,420,424,428,432,436,440],{"title":399,"path":400,"stem":401},{"title":405,"path":406,"stem":407},"AnimatedSprite","/api/objects/animated-sprite","2.api/9.objects/animated-sprite",{"title":409,"path":410,"stem":411},"CubeCamera","/api/objects/cube-camera","2.api/9.objects/cube-camera",{"title":413,"path":414,"stem":415},"Fbo","/api/objects/fbo","2.api/9.objects/fbo",{"title":417,"path":418,"stem":419},"GradientTexture","/api/objects/gradient-texture","2.api/9.objects/gradient-texture",{"title":421,"path":422,"stem":423},"HTML","/api/objects/html","2.api/9.objects/html",{"title":425,"path":426,"stem":427},"Image","/api/objects/image","2.api/9.objects/image",{"title":429,"path":430,"stem":431},"MarchingCubes","/api/objects/marching-cubes","2.api/9.objects/marching-cubes",{"title":433,"path":434,"stem":435},"Reflector","/api/objects/reflector","2.api/9.objects/reflector",{"title":437,"path":438,"stem":439},"Text","/api/objects/text","2.api/9.objects/text",{"title":441,"path":442,"stem":443},"Text3D","/api/objects/text-3d","2.api/9.objects/text-3d",{"title":445,"path":446,"stem":447,"children":448},"Miscellaneous","/api/miscellaneous","2.api/miscellaneous/index",[449,450,454,458,462,466,470,474],{"title":445,"path":446,"stem":447},{"title":451,"path":452,"stem":453},"Bounds","/api/miscellaneous/bounds","2.api/miscellaneous/bounds",{"title":455,"path":456,"stem":457},"GlobalAudio","/api/miscellaneous/global-audio","2.api/miscellaneous/global-audio",{"title":459,"path":460,"stem":461},"MouseParallax","/api/miscellaneous/mouse-parallax","2.api/miscellaneous/mouse-parallax",{"title":463,"path":464,"stem":465},"PositionalAudio","/api/miscellaneous/positional-audio","2.api/miscellaneous/positional-audio",{"title":467,"path":468,"stem":469},"useAnimations","/api/miscellaneous/use-animations","2.api/miscellaneous/use-animations",{"title":471,"path":472,"stem":473},"useGLTFExporter","/api/miscellaneous/use-gltf-exporter","2.api/miscellaneous/use-gltf-exporter",{"title":475,"path":476,"stem":477},"useIntersect","/api/miscellaneous/use-intersect","2.api/miscellaneous/use-intersect",{"id":479,"title":399,"body":480,"description":496,"extension":497,"links":498,"meta":499,"navigation":500,"path":400,"seo":501,"stem":401,"__hash__":502},"docs/2.api/9.objects/index.md",{"type":481,"value":482,"toc":491},"minimark",[483,487],[484,485,486],"p",{},"Components for creating 3D objects, sprites, text, and textures in your scene.",[488,489],"api-list",{"list-name":490},"objects-list",{"title":492,"searchDepth":493,"depth":494,"links":495},"",1,2,[],"3D objects and texture components","md",null,{},true,{"title":399,"description":496},"PJRjQ8U1I99ephC4xbsR6qDF0Wsdp6iYandnX5ya-lQ",[504,506],{"title":395,"path":396,"stem":397,"description":505,"children":-1},"Renders beautiful stars in the sky using Points and BufferGeometry.",{"title":405,"path":406,"stem":407,"description":507,"children":-1},"Display 2D animations defined in a texture atlas.",[509,1562,1998,3188,3573,9251,9869,10674,11598,12565],{"id":510,"title":405,"body":511,"description":507,"extension":497,"links":498,"meta":1559,"navigation":500,"path":406,"seo":1560,"stem":407,"__hash__":1561},"docs/2.api/9.objects/animated-sprite.md",{"type":481,"value":512,"toc":1541},[513,519,537,547,551,801,813,817,823,837,846,850,857,877,881,889,894,921,925,1276,1280,1350,1353,1360,1364,1367,1372,1375,1387,1403,1407,1410,1447,1450,1462,1466,1475,1485,1493,1496,1527,1530,1537],[514,515,516],"scene-controls-wrapper",{},[517,518],"objects-animated-sprite",{},[484,520,521,525,526,533,534,536],{},[522,523,524],"code",{},"\u003CAnimatedSprite />"," displays 2D animations defined in a ",[527,528,532],"a",{"href":529,"rel":530},"https://en.wikipedia.org/wiki/Texture_atlas",[531],"nofollow","texture atlas",". A typical ",[522,535,524],{}," will use:",[538,539,540,544],"ul",{},[541,542,543],"li",{},"An image containing multiple sprites",[541,545,546],{},"A JSON atlas containing the individual sprite coordinates in the image",[548,549,15],"h2",{"id":550},"usage",[552,553,563],"pre",{"className":554,"code":555,"highlights":556,"language":562,"meta":492,"style":492},"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",[494,557,558,559,560,561],10,11,12,13,14,"vue",[522,564,565,599,629,635,664,674,679,689,700,711,720,736,751,766,772,782,792],{"__ignoreMap":492},[566,567,569,573,577,581,584,587,590,594,596],"span",{"class":568,"line":493},"line",[566,570,572],{"class":571},"sMK4o","\u003C",[566,574,576],{"class":575},"swJcz","script",[566,578,580],{"class":579},"spNyl"," setup",[566,582,583],{"class":579}," lang",[566,585,586],{"class":571},"=",[566,588,589],{"class":571},"\"",[566,591,593],{"class":592},"sfazB","ts",[566,595,589],{"class":571},[566,597,598],{"class":571},">\n",[566,600,603,607,610,614,617,620,623,626],{"class":601,"line":494},[568,602],"highlight",[566,604,606],{"class":605},"s7zQu","import",[566,608,609],{"class":571}," {",[566,611,613],{"class":612},"sTEyZ"," AnimatedSprite",[566,615,616],{"class":571}," }",[566,618,619],{"class":605}," from",[566,621,622],{"class":571}," '",[566,624,625],{"class":592},"@tresjs/cientos",[566,627,628],{"class":571},"'\n",[566,630,632],{"class":568,"line":631},3,[566,633,634],{"emptyLinePlaceholder":500},"\n",[566,636,638,641,644,646,650,653,656,659,661],{"class":568,"line":637},4,[566,639,640],{"class":579},"const",[566,642,643],{"class":612}," currentAnimation ",[566,645,586],{"class":571},[566,647,649],{"class":648},"s2Zo4"," ref",[566,651,652],{"class":612},"(",[566,654,655],{"class":571},"'",[566,657,658],{"class":592},"cientosIdle",[566,660,655],{"class":571},[566,662,663],{"class":612},")\n",[566,665,667,670,672],{"class":568,"line":666},5,[566,668,669],{"class":571},"\u003C/",[566,671,576],{"class":575},[566,673,598],{"class":571},[566,675,677],{"class":568,"line":676},6,[566,678,634],{"emptyLinePlaceholder":500},[566,680,682,684,687],{"class":568,"line":681},7,[566,683,572],{"class":571},[566,685,686],{"class":575},"template",[566,688,598],{"class":571},[566,690,692,695,698],{"class":568,"line":691},8,[566,693,694],{"class":571},"  \u003C",[566,696,697],{"class":575},"TresCanvas",[566,699,598],{"class":571},[566,701,703,706,709],{"class":568,"line":702},9,[566,704,705],{"class":571},"    \u003C",[566,707,708],{"class":575},"Suspense",[566,710,598],{"class":571},[566,712,714,717],{"class":713,"line":557},[568,602],[566,715,716],{"class":571},"      \u003C",[566,718,719],{"class":575},"AnimatedSprite\n",[566,721,723,726,728,730,733],{"class":722,"line":558},[568,602],[566,724,725],{"class":579},"        image",[566,727,586],{"class":571},[566,729,589],{"class":571},[566,731,732],{"class":592},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosTexture.png",[566,734,735],{"class":571},"\"\n",[566,737,739,742,744,746,749],{"class":738,"line":559},[568,602],[566,740,741],{"class":579},"        atlas",[566,743,586],{"class":571},[566,745,589],{"class":571},[566,747,748],{"class":592},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosAtlas.json",[566,750,735],{"class":571},[566,752,754,757,759,761,764],{"class":753,"line":560},[568,602],[566,755,756],{"class":579},"        :animation",[566,758,586],{"class":571},[566,760,589],{"class":571},[566,762,763],{"class":592},"currentAnimation",[566,765,735],{"class":571},[566,767,769],{"class":768,"line":561},[568,602],[566,770,771],{"class":571},"      />\n",[566,773,775,778,780],{"class":568,"line":774},15,[566,776,777],{"class":571},"    \u003C/",[566,779,708],{"class":575},[566,781,598],{"class":571},[566,783,785,788,790],{"class":568,"line":784},16,[566,786,787],{"class":571},"  \u003C/",[566,789,697],{"class":575},[566,791,598],{"class":571},[566,793,795,797,799],{"class":568,"line":794},17,[566,796,669],{"class":571},[566,798,686],{"class":575},[566,800,598],{"class":571},[802,803,804],"prose-warning",{},[484,805,806,808,809,812],{},[522,807,524],{}," loads resources asynchronously, so it must be wrapped in a ",[522,810,811],{},"\u003CSuspense />",".",[548,814,816],{"id":815},"compiling-an-atlas","Compiling an atlas",[484,818,819,820,822],{},"In typical usage, ",[522,821,524],{}," requires both the URL to a texture of compiled sprite images and a JSON atlas containing information about the sprites in the texture.",[538,824,825,831],{},[541,826,827],{},[527,828,830],{"href":732,"rel":829},[531],"example compiled texture",[541,832,833],{},[527,834,836],{"href":748,"rel":835},[531],"example JSON atlas",[484,838,839,840,845],{},"Compiling source images into a texture atlas is usually handled by third-party software. You may find ",[527,841,844],{"href":842,"rel":843},"https://www.codeandweb.com/texturepacker",[531],"TexturePacker"," useful.",[548,847,849],{"id":848},"without-an-atlas","Without an atlas",[484,851,852,853,856],{},"There may be cases where you don't want to supply an atlas to the ",[522,854,855],{},"atlas"," prop. To do so:",[538,858,859,862,865,868],{},[541,860,861],{},"Compile your source images into a single image texture.",[541,863,864],{},"Space each sprite into equally sized columns and rows in the compiled image texture.",[541,866,867],{},"Ensure no extra padding has been added to the compiled image texture.",[541,869,870,871,873,874,812],{},"Set the ",[522,872,855],{}," prop to number of columns, number of rows as ",[522,875,876],{},"[number, number]",[548,878,880],{"id":879},"spritesheets-in-the-wild","Spritesheets in the wild",[802,882,883],{},[484,884,885,886,888],{},"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 ",[522,887,524],{},". In many cases, it's advisable to recompile the spritesheet.",[890,891,893],"h3",{"id":892},"how-to-recompile-an-existing-spritesheet-image","How to recompile an existing spritesheet image",[538,895,896,899,902,905,918],{},[541,897,898],{},"Cut individual sprites from the spritesheet and paste them into separate layers in an image editing application, e.g., GIMP.",[541,900,901],{},"Align the layers for animation. Toggling layer visibility on/off will show you how the animation will display, frame to frame.",[541,903,904],{},"Export layers as individual images.",[541,906,907,908,911,914,915,917],{},"Name the individual images according to the following pattern: ",[909,910],"br",{},[522,912,913],{},"[animation name][frame number].[extension]"," ",[909,916],{},"E.g., walk000.png, walk001.png, idle000.png, idle001.png",[541,919,920],{},"Compile individual images into an image texture and atlas using a texture packing application, like TexturePacker.",[548,922,924],{"id":923},"props","Props",[926,927,928,945],"table",{},[929,930,931],"thead",{},[932,933,934,939,942],"tr",{},[935,936,938],"th",{"align":937},"left","Name",[935,940,941],{"align":937},"Description",[935,943,944],{"align":937},"Default",[946,947,948,962,1002,1062,1077,1093,1118,1133,1147,1161,1175,1194,1218,1238,1257],"tbody",{},[932,949,950,954,960],{},[951,952,953],"td",{"align":937},"image",[951,955,956,959],{"align":937},[522,957,958],{},"string"," – URL of the image texture or an image dataURL. This prop is not reactive.",[951,961],{"align":937},[932,963,964,966,1000],{},[951,965,855],{"align":937},[951,967,968,971,972,997,999],{"align":937},[522,969,970],{},"string | Atlasish"," – ",[538,973,974,980,986,991],{},[541,975,976,977,979],{},"If ",[522,978,958],{},", the URL of the JSON atlas.",[541,981,976,982,985],{},[522,983,984],{},"number",", the number of columns in the texture.",[541,987,976,988,990],{},[522,989,876],{},", the number of columns/rows in the texture.",[541,992,976,993,996],{},[522,994,995],{},"AtlasData",", the atlas as a JS object.",[909,998],{},"This prop is not reactive.",[951,1001],{"align":937},[932,1003,1004,1007,1060],{},[951,1005,1006],{"align":937},"definitions",[951,1008,1009,1012,1013,1015,1016,1018,1020,1021,1023,1025,1026],{"align":937},[522,1010,1011],{},"Record\u003Cstring, string>"," – Specify playback frame order and repeated frames (delays). ",[522,1014,1006],{}," is a record where keys are atlas animation names and values are strings containing an animation definition.",[909,1017],{},[909,1019],{},"A \"animation definition\" comma-separated string of frame numbers with optional parentheses-surrounded durations.",[909,1022],{},[909,1024],{},"Here is how various definition strings convert to arrays of frames for playback:",[538,1027,1028,1035,1042,1048,1054],{},[541,1029,1030,1031,1034],{},"\"0,2,1\" - ",[566,1032,1033],{},"0,2,1",", i.e., play frame 0, 2, then 1.",[541,1036,1037,1038,1041],{},"\"2(10)\" - ",[566,1039,1040],{},"2,2,2,2,2,2,2,2,2,2",", i.e., play from 2 10 times.",[541,1043,1044,1045],{},"\"1-4\" - ",[566,1046,1047],{},"1,2,3,4",[541,1049,1050,1051],{},"\"10-5(2)\" - ",[566,1052,1053],{},"10,10,9,9,8,8,7,7,6,6,5,5",[541,1055,1056,1057],{},"\"1-4(3),10(2)\" - ",[566,1058,1059],{},"1,1,1,2,2,2,3,3,3,4,4,4,10,10",[951,1061],{"align":937},[932,1063,1064,1067,1072],{},[951,1065,1066],{"align":937},"fps",[951,1068,1069,1071],{"align":937},[522,1070,984],{}," – Desired frames per second of the animation.",[951,1073,1074],{"align":937},[522,1075,1076],{},"30",[932,1078,1079,1082,1088],{},[951,1080,1081],{"align":937},"loop",[951,1083,1084,1087],{"align":937},[522,1085,1086],{},"boolean"," – Whether or not the animation should loop.",[951,1089,1090],{"align":937},[522,1091,1092],{},"true",[932,1094,1095,1098,1113],{},[951,1096,1097],{"align":937},"animation",[951,1099,1100,1103,1104,1106,1107,1109,1110,1112],{"align":937},[522,1101,1102],{},"string | [number, number] | number"," – If ",[522,1105,958],{},", name of the animation to play. If ",[522,1108,876],{},", start and end frames of the animation. If ",[522,1111,984],{},", frame number to display.",[951,1114,1115],{"align":937},[522,1116,1117],{},"0",[932,1119,1120,1123,1128],{},[951,1121,1122],{"align":937},"paused",[951,1124,1125,1127],{"align":937},[522,1126,1086],{}," – Whether the animation is paused.",[951,1129,1130],{"align":937},[522,1131,1132],{},"false",[932,1134,1135,1138,1143],{},[951,1136,1137],{"align":937},"reversed",[951,1139,1140,1142],{"align":937},[522,1141,1086],{}," – Whether to play the animation in reverse.",[951,1144,1145],{"align":937},[522,1146,1132],{},[932,1148,1149,1152,1157],{},[951,1150,1151],{"align":937},"flipX",[951,1153,1154,1156],{"align":937},[522,1155,1086],{}," – Whether the sprite should be flipped, left to right.",[951,1158,1159],{"align":937},[522,1160,1132],{},[932,1162,1163,1166,1171],{},[951,1164,1165],{"align":937},"resetOnEnd",[951,1167,1168,1170],{"align":937},[522,1169,1086],{}," – For a non-looping animation, when the animation ends, whether to display the zeroth frame.",[951,1172,1173],{"align":937},[522,1174,1132],{},[932,1176,1177,1180,1190],{},[951,1178,1179],{"align":937},"asSprite",[951,1181,1182,1184,1185],{"align":937},[522,1183,1086],{}," – Whether to display the object as a THREE.Sprite. ",[527,1186,1189],{"href":1187,"rel":1188},"https://threejs.org/docs/?q=sprite#api/en/objects/Sprite",[531],"See THREE.Sprite",[951,1191,1192],{"align":937},[522,1193,1092],{},[932,1195,1196,1199,1213],{},[951,1197,1198],{"align":937},"center",[951,1200,1201,1204,1205,1208,1209,1212],{"align":937},[522,1202,1203],{},"TresVector2"," – Anchor point of the object. A value of ",[566,1206,1207],{},"0.5, 0.5"," corresponds to the center. ",[566,1210,1211],{},"0, 0"," is left, bottom.",[951,1214,1215],{"align":937},[522,1216,1217],{},"[0.5, 0.5]",[932,1219,1220,1223,1233],{},[951,1221,1222],{"align":937},"alphaTest",[951,1224,1225,1227,1228],{"align":937},[522,1226,984],{}," – Alpha test value for the material. ",[527,1229,1232],{"href":1230,"rel":1231},"https://threejs.org/docs/#api/en/materials/Material.alphaTest",[531],"See THREE.Material.alphaTest",[951,1234,1235],{"align":937},[522,1236,1237],{},"0.0",[932,1239,1240,1243,1253],{},[951,1241,1242],{"align":937},"depthTest",[951,1244,1245,1247,1248],{"align":937},[522,1246,1086],{}," – Depth test value for the material. ",[527,1249,1252],{"href":1250,"rel":1251},"https://threejs.org/docs/#api/en/materials/Material.depthTest",[531],"See THREE.Material.depthTest",[951,1254,1255],{"align":937},[522,1256,1092],{},[932,1258,1259,1262,1272],{},[951,1260,1261],{"align":937},"depthWrite",[951,1263,1264,1266,1267],{"align":937},[522,1265,1086],{}," – Depth write value for the material. ",[527,1268,1271],{"href":1269,"rel":1270},"https://threejs.org/docs/#api/en/materials/Material.depthWrite",[531],"See THREE.Material.depthWrite",[951,1273,1274],{"align":937},[522,1275,1092],{},[548,1277,1279],{"id":1278},"events","Events",[926,1281,1282,1294],{},[929,1283,1284],{},[932,1285,1286,1289,1291],{},[935,1287,1288],{},"Event",[935,1290,941],{},[935,1292,1293],{},"Argument",[946,1295,1296,1311,1332],{},[932,1297,1298,1303,1306],{},[951,1299,1300],{},[522,1301,1302],{},"frame",[951,1304,1305],{},"Emitted when the displayed animation frame changes – at most once per tick, frames may be dropped",[951,1307,1308,1310],{},[522,1309,958],{}," – Name of the newly displayed frame",[932,1312,1313,1318,1327],{},[951,1314,1315],{},[522,1316,1317],{},"end",[951,1319,1320,1321,1324,1325],{},"Emitted when the animation ends – ",[522,1322,1323],{},"props.loop"," must be set to ",[522,1326,1132],{},[951,1328,1329,1331],{},[522,1330,958],{}," – Name of the ending frame",[932,1333,1334,1338,1345],{},[951,1335,1336],{},[522,1337,1081],{},[951,1339,1340,1341,1324,1343],{},"Emitted when the animation loops – ",[522,1342,1323],{},[522,1344,1092],{},[951,1346,1347,1349],{},[522,1348,958],{}," – Name of the frame at the end of the loop",[548,1351,1352],{"id":1097},"Animation",[484,1354,1355,1356,1359],{},"The ",[522,1357,1358],{},":animation"," prop holds either the name of the currently playing animation or a range of frames to play, or a frame number to display.",[890,1361,1363],{"id":1362},"using-named-animations-as-animation","Using named animations as animation",[484,1365,1366],{},"When individual files are converted to a spritesheet/atlas, typically the original images' filenames will be included in the atlas.",[484,1368,1369,1371],{},[522,1370,524],{}," uses those filenames to automatically group images into animations.",[484,1373,1374],{},"Use either of the following naming conventions for your source images ...",[538,1376,1377,1382],{},[541,1378,1379],{},[522,1380,1381],{},"[animation name][frame number].[file_extension]",[541,1383,1384],{},[522,1385,1386],{},"[animation name]_[frame number].[file_extension]",[484,1388,1389,1390,1392,1393,1396,1397,1399,1400,1402],{},"... then ",[522,1391,524],{}," will automatically make all ",[522,1394,1395],{},"[animation name]"," available for playback. Just pass ",[522,1398,1395],{}," to the component's ",[522,1401,1358],{}," prop.",[890,1404,1406],{"id":1405},"example","Example",[484,1408,1409],{},"For our Cientos heart cartoon character animation, here's how the filenames map to animation names.",[926,1411,1412,1422],{},[929,1413,1414],{},[932,1415,1416,1419],{},[935,1417,1418],{},"Filenames",[935,1420,1421],{},"Animation name",[946,1423,1424,1431,1439],{},[932,1425,1426,1429],{},[951,1427,1428],{},"cientosIdle0000.png, cientosIdle0001.png, ...",[951,1430,658],{},[932,1432,1433,1436],{},[951,1434,1435],{},"cientosIdleToWalkTransition0000.png",[951,1437,1438],{},"cientosIdleToWalkTransition",[932,1440,1441,1444],{},[951,1442,1443],{},"cientosWalk0000.png, cientosWalk0001.png, ...",[951,1445,1446],{},"cientosWalk",[548,1448,1449],{"id":1006},"Definitions",[484,1451,1452,1453,1456,1457,1461],{},"You can supply an object to the ",[522,1454,1455],{},":definitions"," prop. Any ",[527,1458,1460],{"href":1459},"#animation","named animation"," can be a key. The value is a string that specifies frame order and delays.",[890,1463,1465],{"id":1464},"demo","Demo",[484,1467,1468,1469,1471,1472,812],{},"In this demo, the 'idle' animation is comprised of six different images. By default, those images will play sequentially when the ",[522,1470,1358],{}," prop is ",[522,1473,1474],{},"'idle'",[484,1476,1477,1478,1480,1481,1484],{},"But below, we've added a ",[522,1479,1455],{}," prop with this value for the ",[522,1482,1483],{},"idle"," key:",[552,1486,1491],{"className":1487,"code":1489,"language":1490},[1488],"language-text","'0-5, 0(10), 1-2, 3(20), 4-5, 0-5(3)'\n","text",[522,1492,1489],{"__ignoreMap":492},[484,1494,1495],{},"So, instead of playing images 0-5 sequentially, this animation will play instead:",[538,1497,1498,1507,1521],{},[541,1499,1500,1503,1504,1506],{},[522,1501,1502],{},"0-5"," – Play all six images (",[522,1505,1502],{},") of the animation normally.",[541,1508,1509,1512,1513,1516,1517,1520],{},[522,1510,1511],{},"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 (",[522,1514,1515],{},"0(10)",") and a delay of twenty frames at the top of the bounce (",[522,1518,1519],{},"3(20)",").",[541,1522,1523,1526],{},[522,1524,1525],{},"0-5(3)"," – Finally, play all six images of the animation with a delay of three frames each.",[548,1528,1529],{"id":1198},"Center",[484,1531,1532,1533,1536],{},"In addition to being the sprite's anchor point, the ",[522,1534,1535],{},":center"," prop also controls how differently sized source images will \"grow\" and \"shrink\". Namely, they \"grow out from\" and \"shrink towards\" the center.",[1538,1539,1540],"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":492,"searchDepth":493,"depth":494,"links":1542},[1543,1544,1545,1546,1549,1550,1551,1555,1558],{"id":550,"depth":494,"text":15},{"id":815,"depth":494,"text":816},{"id":848,"depth":494,"text":849},{"id":879,"depth":494,"text":880,"children":1547},[1548],{"id":892,"depth":631,"text":893},{"id":923,"depth":494,"text":924},{"id":1278,"depth":494,"text":1279},{"id":1097,"depth":494,"text":1352,"children":1552},[1553,1554],{"id":1362,"depth":631,"text":1363},{"id":1405,"depth":631,"text":1406},{"id":1006,"depth":494,"text":1449,"children":1556},[1557],{"id":1464,"depth":631,"text":1465},{"id":1198,"depth":494,"text":1529},{},{"title":405,"description":507},"1Fefoz-lCiLy_IhyyeC3jSJZXqD9LUr1drneDRIGstI",{"id":1563,"title":409,"body":1564,"description":1994,"extension":497,"links":498,"meta":1995,"navigation":500,"path":410,"seo":1996,"stem":411,"__hash__":1997},"docs/2.api/9.objects/cube-camera.md",{"type":481,"value":1565,"toc":1990},[1566,1571,1581,1586,1588,1881,1883,1987],[514,1567,1568],{},[1569,1570],"objects-cube-camera",{},[484,1572,1573,1576,1577,1580],{},[522,1574,1575],{},"\u003CCubeCamera />"," creates a ",[522,1578,1579],{},"THREE.CubeCamera"," and uses it to render an environment map of your scene. The environment map is then applied to component's children.",[484,1582,1583,1585],{},[522,1584,1575],{}," makes its children invisible while rendering to the internal buffer so that they are not included in the reflection.",[548,1587,15],{"id":550},[552,1589,1592],{"className":554,"code":1590,"highlights":1591,"language":562,"meta":492,"style":492},"\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",[494,557,774],[522,1593,1594,1614,1640,1648,1652,1660,1668,1690,1699,1703,1736,1745,1767,1799,1808,1817,1821,1842,1863,1872],{"__ignoreMap":492},[566,1595,1596,1598,1600,1602,1604,1606,1608,1610,1612],{"class":568,"line":493},[566,1597,572],{"class":571},[566,1599,576],{"class":575},[566,1601,580],{"class":579},[566,1603,583],{"class":579},[566,1605,586],{"class":571},[566,1607,589],{"class":571},[566,1609,593],{"class":592},[566,1611,589],{"class":571},[566,1613,598],{"class":571},[566,1615,1617,1619,1621,1624,1627,1630,1632,1634,1636,1638],{"class":1616,"line":494},[568,602],[566,1618,606],{"class":605},[566,1620,609],{"class":571},[566,1622,1623],{"class":612}," CubeCamera",[566,1625,1626],{"class":571},",",[566,1628,1629],{"class":612}," OrbitControls",[566,1631,616],{"class":571},[566,1633,619],{"class":605},[566,1635,622],{"class":571},[566,1637,625],{"class":592},[566,1639,628],{"class":571},[566,1641,1642,1644,1646],{"class":568,"line":631},[566,1643,669],{"class":571},[566,1645,576],{"class":575},[566,1647,598],{"class":571},[566,1649,1650],{"class":568,"line":637},[566,1651,634],{"emptyLinePlaceholder":500},[566,1653,1654,1656,1658],{"class":568,"line":666},[566,1655,572],{"class":571},[566,1657,686],{"class":575},[566,1659,598],{"class":571},[566,1661,1662,1664,1666],{"class":568,"line":676},[566,1663,694],{"class":571},[566,1665,697],{"class":575},[566,1667,598],{"class":571},[566,1669,1670,1672,1675,1678,1680,1682,1685,1687],{"class":568,"line":681},[566,1671,705],{"class":571},[566,1673,1674],{"class":575},"TresPerspectiveCamera",[566,1676,1677],{"class":579}," :position",[566,1679,586],{"class":571},[566,1681,589],{"class":571},[566,1683,1684],{"class":592},"[0, 2, 5]",[566,1686,589],{"class":571},[566,1688,1689],{"class":571}," />\n",[566,1691,1692,1694,1697],{"class":568,"line":691},[566,1693,705],{"class":571},[566,1695,1696],{"class":575},"OrbitControls",[566,1698,1689],{"class":571},[566,1700,1701],{"class":568,"line":702},[566,1702,634],{"emptyLinePlaceholder":500},[566,1704,1706,1708,1710,1713,1715,1717,1720,1722,1725,1727,1729,1732,1734],{"class":1705,"line":557},[568,602],[566,1707,705],{"class":571},[566,1709,409],{"class":575},[566,1711,1712],{"class":579}," :resolution",[566,1714,586],{"class":571},[566,1716,589],{"class":571},[566,1718,1719],{"class":592},"256",[566,1721,589],{"class":571},[566,1723,1724],{"class":579}," :frames",[566,1726,586],{"class":571},[566,1728,589],{"class":571},[566,1730,1731],{"class":592},"Infinity",[566,1733,589],{"class":571},[566,1735,598],{"class":571},[566,1737,1738,1740,1743],{"class":568,"line":558},[566,1739,716],{"class":571},[566,1741,1742],{"class":575},"TresMesh",[566,1744,598],{"class":571},[566,1746,1747,1750,1753,1756,1758,1760,1763,1765],{"class":568,"line":559},[566,1748,1749],{"class":571},"        \u003C",[566,1751,1752],{"class":575},"TresSphereGeometry",[566,1754,1755],{"class":579}," :args",[566,1757,586],{"class":571},[566,1759,589],{"class":571},[566,1761,1762],{"class":592},"[1, 32, 32]",[566,1764,589],{"class":571},[566,1766,1689],{"class":571},[566,1768,1769,1771,1774,1777,1779,1781,1784,1786,1789,1791,1793,1795,1797],{"class":568,"line":560},[566,1770,1749],{"class":571},[566,1772,1773],{"class":575},"TresMeshStandardMaterial",[566,1775,1776],{"class":579}," :metalness",[566,1778,586],{"class":571},[566,1780,589],{"class":571},[566,1782,1783],{"class":592},"1",[566,1785,589],{"class":571},[566,1787,1788],{"class":579}," :roughness",[566,1790,586],{"class":571},[566,1792,589],{"class":571},[566,1794,1117],{"class":592},[566,1796,589],{"class":571},[566,1798,1689],{"class":571},[566,1800,1801,1804,1806],{"class":568,"line":561},[566,1802,1803],{"class":571},"      \u003C/",[566,1805,1742],{"class":575},[566,1807,598],{"class":571},[566,1809,1811,1813,1815],{"class":1810,"line":774},[568,602],[566,1812,777],{"class":571},[566,1814,409],{"class":575},[566,1816,598],{"class":571},[566,1818,1819],{"class":568,"line":784},[566,1820,634],{"emptyLinePlaceholder":500},[566,1822,1823,1825,1828,1831,1833,1835,1838,1840],{"class":568,"line":794},[566,1824,705],{"class":571},[566,1826,1827],{"class":575},"TresAmbientLight",[566,1829,1830],{"class":579}," :intensity",[566,1832,586],{"class":571},[566,1834,589],{"class":571},[566,1836,1837],{"class":592},"0.5",[566,1839,589],{"class":571},[566,1841,1689],{"class":571},[566,1843,1845,1847,1850,1852,1854,1856,1859,1861],{"class":568,"line":1844},18,[566,1846,705],{"class":571},[566,1848,1849],{"class":575},"TresDirectionalLight",[566,1851,1677],{"class":579},[566,1853,586],{"class":571},[566,1855,589],{"class":571},[566,1857,1858],{"class":592},"[0, 2, 4]",[566,1860,589],{"class":571},[566,1862,1689],{"class":571},[566,1864,1866,1868,1870],{"class":568,"line":1865},19,[566,1867,787],{"class":571},[566,1869,697],{"class":575},[566,1871,598],{"class":571},[566,1873,1875,1877,1879],{"class":568,"line":1874},20,[566,1876,669],{"class":571},[566,1878,686],{"class":575},[566,1880,598],{"class":571},[548,1882,924],{"id":923},[926,1884,1885,1896],{},[929,1886,1887],{},[932,1888,1889,1892,1894],{},[935,1890,1891],{"align":937},"Prop",[935,1893,941],{"align":937},[935,1895,944],{},[946,1897,1898,1918,1933,1948,1963,1975],{},[932,1899,1900,1905,1914],{},[951,1901,1902],{"align":937},[522,1903,1904],{},"frames",[951,1906,1907,1908,1910,1911,1913],{"align":937},"Number of frames to render. Set to ",[522,1909,1783],{}," for a static scene. ",[522,1912,1731],{}," to update continuously.",[951,1915,1916],{},[522,1917,1731],{},[932,1919,1920,1925,1928],{},[951,1921,1922],{"align":937},[522,1923,1924],{},"resolution",[951,1926,1927],{"align":937},"Resolution of the FBO",[951,1929,1930],{},[522,1931,1932],{},"255",[932,1934,1935,1940,1943],{},[951,1936,1937],{"align":937},[522,1938,1939],{},"near",[951,1941,1942],{"align":937},"Camera near",[951,1944,1945],{},[522,1946,1947],{},"0.1",[932,1949,1950,1955,1958],{},[951,1951,1952],{"align":937},[522,1953,1954],{},"far",[951,1956,1957],{"align":937},"Camera far",[951,1959,1960],{},[522,1961,1962],{},"1000",[932,1964,1965,1970,1973],{},[951,1966,1967],{"align":937},[522,1968,1969],{},"envMap",[951,1971,1972],{"align":937},"Custom environment map that is temporarily set as the scene's background",[951,1974],{},[932,1976,1977,1982,1985],{},[951,1978,1979],{"align":937},[522,1980,1981],{},"fog",[951,1983,1984],{"align":937},"Custom fog that is temporarily set as the scene's fog",[951,1986],{},[1538,1988,1989],{},"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 .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":492,"searchDepth":493,"depth":494,"links":1991},[1992,1993],{"id":550,"depth":494,"text":15},{"id":923,"depth":494,"text":924},"Render environment maps for reflective objects.",{},{"title":409,"description":1994},"Q6v8KV8NG276AtuBPiwOGmcEikpDQU0Z6vAT9ILaU70",{"id":1999,"title":413,"body":2000,"description":3184,"extension":497,"links":498,"meta":3185,"navigation":500,"path":414,"seo":3186,"stem":415,"__hash__":3187},"docs/2.api/9.objects/fbo.md",{"type":481,"value":2001,"toc":3176},[2002,2008,2011,2018,2020,2693,2695,2815,2819,2821,2827,2834,2837,3085,3089,3173],[2003,2004,2005],"scene-wrapper",{},[2006,2007],"objects-fbo",{},[484,2009,2010],{},"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.",[484,2012,2013,2014,2017],{},"Cientos provides an ",[522,2015,2016],{},"\u003CFbo />"," component make it easy to use FBOs in your application.",[548,2019,15],{"id":550},[552,2021,2028],{"className":554,"code":2022,"highlights":2023,"language":562,"meta":492,"style":492},"\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",[494,2024,2025,2026,2027],23,24,25,26,[522,2029,2030,2050,2074,2097,2116,2135,2139,2179,2207,2211,2245,2276,2307,2333,2338,2346,2350,2358,2390,2409,2417,2422,2443,2451,2466,2480,2495,2501,2510,2531,2536,2544,2559,2574,2579,2588,2593,2601,2614,2629,2635,2656,2666,2675,2684],{"__ignoreMap":492},[566,2031,2032,2034,2036,2038,2040,2042,2044,2046,2048],{"class":568,"line":493},[566,2033,572],{"class":571},[566,2035,576],{"class":575},[566,2037,580],{"class":579},[566,2039,583],{"class":579},[566,2041,586],{"class":571},[566,2043,589],{"class":571},[566,2045,593],{"class":592},[566,2047,589],{"class":571},[566,2049,598],{"class":571},[566,2051,2053,2055,2057,2060,2062,2064,2066,2068,2070,2072],{"class":2052,"line":494},[568,602],[566,2054,606],{"class":605},[566,2056,609],{"class":571},[566,2058,2059],{"class":612}," Fbo",[566,2061,1626],{"class":571},[566,2063,1629],{"class":612},[566,2065,616],{"class":571},[566,2067,619],{"class":605},[566,2069,622],{"class":571},[566,2071,625],{"class":592},[566,2073,628],{"class":571},[566,2075,2076,2078,2081,2083,2086,2088,2090,2092,2095],{"class":568,"line":631},[566,2077,606],{"class":605},[566,2079,2080],{"class":605}," type",[566,2082,609],{"class":571},[566,2084,2085],{"class":612}," TresObject",[566,2087,616],{"class":571},[566,2089,619],{"class":605},[566,2091,622],{"class":571},[566,2093,2094],{"class":592},"@tresjs/core",[566,2096,628],{"class":571},[566,2098,2099,2101,2103,2106,2108,2110,2112,2114],{"class":568,"line":637},[566,2100,606],{"class":605},[566,2102,609],{"class":571},[566,2104,2105],{"class":612}," TresCanvas",[566,2107,616],{"class":571},[566,2109,619],{"class":605},[566,2111,622],{"class":571},[566,2113,2094],{"class":592},[566,2115,628],{"class":571},[566,2117,2118,2120,2122,2125,2127,2129,2131,2133],{"class":568,"line":666},[566,2119,606],{"class":605},[566,2121,609],{"class":571},[566,2123,2124],{"class":612}," shallowRef",[566,2126,616],{"class":571},[566,2128,619],{"class":605},[566,2130,622],{"class":571},[566,2132,562],{"class":592},[566,2134,628],{"class":571},[566,2136,2137],{"class":568,"line":676},[566,2138,634],{"emptyLinePlaceholder":500},[566,2140,2141,2143,2146,2148,2150,2152,2156,2159,2161,2164,2167,2170,2172,2174,2177],{"class":568,"line":681},[566,2142,640],{"class":579},[566,2144,2145],{"class":612}," fboRef ",[566,2147,586],{"class":571},[566,2149,2124],{"class":648},[566,2151,572],{"class":571},[566,2153,2155],{"class":2154},"sBMFI","InstanceType",[566,2157,2158],{"class":571},"\u003Ctypeof",[566,2160,2059],{"class":612},[566,2162,2163],{"class":571},">",[566,2165,2166],{"class":571}," |",[566,2168,2169],{"class":2154}," null",[566,2171,2163],{"class":571},[566,2173,652],{"class":612},[566,2175,2176],{"class":571},"null",[566,2178,663],{"class":612},[566,2180,2181,2183,2186,2188,2190,2192,2195,2197,2199,2201,2203,2205],{"class":568,"line":691},[566,2182,640],{"class":579},[566,2184,2185],{"class":612}," torusRef ",[566,2187,586],{"class":571},[566,2189,2124],{"class":648},[566,2191,572],{"class":571},[566,2193,2194],{"class":2154},"TresObject",[566,2196,2166],{"class":571},[566,2198,2169],{"class":2154},[566,2200,2163],{"class":571},[566,2202,652],{"class":612},[566,2204,2176],{"class":571},[566,2206,663],{"class":612},[566,2208,2209],{"class":568,"line":702},[566,2210,634],{"emptyLinePlaceholder":500},[566,2212,2213,2216,2219,2222,2226,2229,2231,2233,2236,2239,2242],{"class":568,"line":557},[566,2214,2215],{"class":579},"function",[566,2217,2218],{"class":648}," onLoop",[566,2220,2221],{"class":571},"({",[566,2223,2225],{"class":2224},"sHdIc"," elapsed",[566,2227,2228],{"class":571}," }:",[566,2230,609],{"class":571},[566,2232,2225],{"class":575},[566,2234,2235],{"class":571},":",[566,2237,2238],{"class":2154}," number",[566,2240,2241],{"class":571}," })",[566,2243,2244],{"class":571}," {\n",[566,2246,2247,2250,2253,2256,2259,2261,2264,2267,2270,2273],{"class":568,"line":558},[566,2248,2249],{"class":605},"  if",[566,2251,2252],{"class":575}," (",[566,2254,2255],{"class":571},"!",[566,2257,2258],{"class":612},"torusRef",[566,2260,812],{"class":571},[566,2262,2263],{"class":612},"value",[566,2265,2266],{"class":575},") ",[566,2268,2269],{"class":571},"{",[566,2271,2272],{"class":605}," return",[566,2274,2275],{"class":571}," }\n",[566,2277,2278,2281,2283,2285,2287,2290,2292,2295,2298,2300,2303],{"class":568,"line":559},[566,2279,2280],{"class":612},"  torusRef",[566,2282,812],{"class":571},[566,2284,2263],{"class":612},[566,2286,812],{"class":571},[566,2288,2289],{"class":612},"rotation",[566,2291,812],{"class":571},[566,2293,2294],{"class":612},"x",[566,2296,2297],{"class":571}," =",[566,2299,2225],{"class":612},[566,2301,2302],{"class":571}," *",[566,2304,2306],{"class":2305},"sbssI"," 0.745\n",[566,2308,2309,2311,2313,2315,2317,2319,2321,2324,2326,2328,2330],{"class":568,"line":560},[566,2310,2280],{"class":612},[566,2312,812],{"class":571},[566,2314,2263],{"class":612},[566,2316,812],{"class":571},[566,2318,2289],{"class":612},[566,2320,812],{"class":571},[566,2322,2323],{"class":612},"y",[566,2325,2297],{"class":571},[566,2327,2225],{"class":612},[566,2329,2302],{"class":571},[566,2331,2332],{"class":2305}," 0.361\n",[566,2334,2335],{"class":568,"line":561},[566,2336,2337],{"class":571},"}\n",[566,2339,2340,2342,2344],{"class":568,"line":774},[566,2341,669],{"class":571},[566,2343,576],{"class":575},[566,2345,598],{"class":571},[566,2347,2348],{"class":568,"line":784},[566,2349,634],{"emptyLinePlaceholder":500},[566,2351,2352,2354,2356],{"class":568,"line":794},[566,2353,572],{"class":571},[566,2355,686],{"class":575},[566,2357,598],{"class":571},[566,2359,2360,2362,2364,2367,2369,2371,2374,2376,2379,2381,2383,2386,2388],{"class":568,"line":1844},[566,2361,694],{"class":571},[566,2363,697],{"class":575},[566,2365,2366],{"class":579}," :clear-color",[566,2368,586],{"class":571},[566,2370,589],{"class":571},[566,2372,2373],{"class":592},"0x222",[566,2375,589],{"class":571},[566,2377,2378],{"class":579}," @loop",[566,2380,586],{"class":571},[566,2382,589],{"class":571},[566,2384,2385],{"class":592},"onLoop",[566,2387,589],{"class":571},[566,2389,598],{"class":571},[566,2391,2392,2394,2396,2398,2400,2402,2405,2407],{"class":568,"line":1865},[566,2393,705],{"class":571},[566,2395,1674],{"class":575},[566,2397,1677],{"class":579},[566,2399,586],{"class":571},[566,2401,589],{"class":571},[566,2403,2404],{"class":592},"[0, 0.5, 5]",[566,2406,589],{"class":571},[566,2408,1689],{"class":571},[566,2410,2411,2413,2415],{"class":568,"line":1874},[566,2412,705],{"class":571},[566,2414,1696],{"class":575},[566,2416,1689],{"class":571},[566,2418,2420],{"class":568,"line":2419},21,[566,2421,634],{"emptyLinePlaceholder":500},[566,2423,2425,2427,2430,2432,2434,2436,2439,2441],{"class":568,"line":2424},22,[566,2426,705],{"class":571},[566,2428,2429],{"class":575},"TresGridHelper",[566,2431,1755],{"class":579},[566,2433,586],{"class":571},[566,2435,589],{"class":571},[566,2437,2438],{"class":592},"[10, 10]",[566,2440,589],{"class":571},[566,2442,1689],{"class":571},[566,2444,2446,2448],{"class":2445,"line":2024},[568,602],[566,2447,705],{"class":571},[566,2449,2450],{"class":575},"Fbo\n",[566,2452,2454,2457,2459,2461,2464],{"class":2453,"line":2025},[568,602],[566,2455,2456],{"class":579},"      ref",[566,2458,586],{"class":571},[566,2460,589],{"class":571},[566,2462,2463],{"class":592},"fboRef",[566,2465,735],{"class":571},[566,2467,2469,2472,2474,2476,2478],{"class":2468,"line":2026},[568,602],[566,2470,2471],{"class":579},"      :depth",[566,2473,586],{"class":571},[566,2475,589],{"class":571},[566,2477,1132],{"class":592},[566,2479,735],{"class":571},[566,2481,2483,2486,2488,2490,2493],{"class":2482,"line":2027},[568,602],[566,2484,2485],{"class":579},"      :settings",[566,2487,586],{"class":571},[566,2489,589],{"class":571},[566,2491,2492],{"class":592},"{ samples: 1 }",[566,2494,735],{"class":571},[566,2496,2498],{"class":568,"line":2497},27,[566,2499,2500],{"class":571},"    />\n",[566,2502,2504,2506,2508],{"class":568,"line":2503},28,[566,2505,705],{"class":571},[566,2507,1742],{"class":575},[566,2509,598],{"class":571},[566,2511,2513,2515,2518,2520,2522,2524,2527,2529],{"class":568,"line":2512},29,[566,2514,716],{"class":571},[566,2516,2517],{"class":575},"TresBoxGeometry",[566,2519,1755],{"class":579},[566,2521,586],{"class":571},[566,2523,589],{"class":571},[566,2525,2526],{"class":592},"[1, 1, 1]",[566,2528,589],{"class":571},[566,2530,1689],{"class":571},[566,2532,2534],{"class":568,"line":2533},30,[566,2535,634],{"emptyLinePlaceholder":500},[566,2537,2539,2541],{"class":568,"line":2538},31,[566,2540,716],{"class":571},[566,2542,2543],{"class":575},"TresMeshBasicMaterial\n",[566,2545,2547,2550,2552,2554,2557],{"class":568,"line":2546},32,[566,2548,2549],{"class":579},"        :color",[566,2551,586],{"class":571},[566,2553,589],{"class":571},[566,2555,2556],{"class":592},"0xFFFFFF",[566,2558,735],{"class":571},[566,2560,2562,2565,2567,2569,2572],{"class":568,"line":2561},33,[566,2563,2564],{"class":579},"        :map",[566,2566,586],{"class":571},[566,2568,589],{"class":571},[566,2570,2571],{"class":592},"fboRef?.instance?.texture ?? null",[566,2573,735],{"class":571},[566,2575,2577],{"class":568,"line":2576},34,[566,2578,771],{"class":571},[566,2580,2582,2584,2586],{"class":568,"line":2581},35,[566,2583,777],{"class":571},[566,2585,1742],{"class":575},[566,2587,598],{"class":571},[566,2589,2591],{"class":568,"line":2590},36,[566,2592,634],{"emptyLinePlaceholder":500},[566,2594,2596,2598],{"class":568,"line":2595},37,[566,2597,705],{"class":571},[566,2599,2600],{"class":575},"TresMesh\n",[566,2602,2604,2606,2608,2610,2612],{"class":568,"line":2603},38,[566,2605,2456],{"class":579},[566,2607,586],{"class":571},[566,2609,589],{"class":571},[566,2611,2258],{"class":592},[566,2613,735],{"class":571},[566,2615,2617,2620,2622,2624,2627],{"class":568,"line":2616},39,[566,2618,2619],{"class":579},"      :position",[566,2621,586],{"class":571},[566,2623,589],{"class":571},[566,2625,2626],{"class":592},"[3, 0, 0]",[566,2628,735],{"class":571},[566,2630,2632],{"class":568,"line":2631},40,[566,2633,2634],{"class":571},"    >\n",[566,2636,2638,2640,2643,2645,2647,2649,2652,2654],{"class":568,"line":2637},41,[566,2639,716],{"class":571},[566,2641,2642],{"class":575},"TresTorusGeometry",[566,2644,1755],{"class":579},[566,2646,586],{"class":571},[566,2648,589],{"class":571},[566,2650,2651],{"class":592},"[1, 0.5, 16, 100]",[566,2653,589],{"class":571},[566,2655,1689],{"class":571},[566,2657,2659,2661,2664],{"class":568,"line":2658},42,[566,2660,716],{"class":571},[566,2662,2663],{"class":575},"TresMeshNormalMaterial",[566,2665,1689],{"class":571},[566,2667,2669,2671,2673],{"class":568,"line":2668},43,[566,2670,777],{"class":571},[566,2672,1742],{"class":575},[566,2674,598],{"class":571},[566,2676,2678,2680,2682],{"class":568,"line":2677},44,[566,2679,787],{"class":571},[566,2681,697],{"class":575},[566,2683,598],{"class":571},[566,2685,2687,2689,2691],{"class":568,"line":2686},45,[566,2688,669],{"class":571},[566,2690,686],{"class":575},[566,2692,598],{"class":571},[548,2694,924],{"id":923},[926,2696,2697,2707],{},[929,2698,2699],{},[932,2700,2701,2703,2705],{},[935,2702,1891],{"align":937},[935,2704,941],{"align":937},[935,2706,944],{},[946,2708,2709,2727,2744,2769,2797],{},[932,2710,2711,2719,2724],{},[951,2712,2713],{"align":937},[2714,2715,2716],"strong",{},[522,2717,2718],{},"width",[951,2720,2721,2723],{"align":937},[522,2722,984],{}," - The width of the FBO.",[951,2725,2726],{},"Width of the canvas",[932,2728,2729,2736,2741],{},[951,2730,2731],{"align":937},[2714,2732,2733],{},[522,2734,2735],{},"height",[951,2737,2738,2740],{"align":937},[522,2739,984],{}," - the height of the FBO",[951,2742,2743],{},"Height of the canvas",[932,2745,2746,2753,2765],{},[951,2747,2748],{"align":937},[2714,2749,2750],{},[522,2751,2752],{},"depth",[951,2754,2755,2757,2758,812],{"align":937},[522,2756,1086],{}," - Whether or not the FBO should render the depth to a ",[527,2759,2762],{"href":2760,"rel":2761},"https://threejs.org/docs/?q=webglre#api/en/renderers/WebGLRenderTarget.depthTexture",[531],[522,2763,2764],{},"depthTexture",[951,2766,2767],{},[522,2768,1132],{},[932,2770,2771,2778,2792],{},[951,2772,2773],{"align":937},[2714,2774,2775],{},[522,2776,2777],{},"settings",[951,2779,2780,2783,2784],{"align":937},[522,2781,2782],{},"WebGLRenderTargetOptions"," - Every other configuration property for the ",[527,2785,2788,2791],{"href":2786,"rel":2787},"https://threejs.org/docs/#api/en/renderers/WebGLRenderTarget",[531],[522,2789,2790],{},"WebGLRenderTarget"," class",[951,2793,2794],{},[522,2795,2796],{},"{}",[932,2798,2799,2806,2811],{},[951,2800,2801],{"align":937},[2714,2802,2803],{},[522,2804,2805],{},"autoRender",[951,2807,2808,2810],{"align":937},[522,2809,1086],{}," - Whether to automatically render the FBO on the default scene.",[951,2812,2813],{},[522,2814,1092],{},[548,2816,2818],{"id":2817},"usefbo","useFBO",[484,2820,2010],{},[484,2822,2823,2824,2826],{},"Cientos provides a ",[522,2825,2818],{}," composable to make it easy to use FBOs in your application.",[802,2828,2829],{},[484,2830,1355,2831,2833],{},[522,2832,2818],{}," composable must be used inside of a child component since it needs the context of TresCanvas.",[890,2835,15],{"id":2836},"usage-1",[552,2838,2841],{"className":554,"code":2839,"highlights":2840,"language":562,"meta":492,"style":492},"\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",[494,637,666,676,681,691,702,557,558,1874],[522,2842,2843,2863,2883,2887,2904,2919,2932,2944,2954,2967,2973,2981,2989,2993,3001,3009,3027,3031,3037,3050,3065,3069,3077],{"__ignoreMap":492},[566,2844,2845,2847,2849,2851,2853,2855,2857,2859,2861],{"class":568,"line":493},[566,2846,572],{"class":571},[566,2848,576],{"class":575},[566,2850,580],{"class":579},[566,2852,583],{"class":579},[566,2854,586],{"class":571},[566,2856,589],{"class":571},[566,2858,593],{"class":592},[566,2860,589],{"class":571},[566,2862,598],{"class":571},[566,2864,2866,2868,2870,2873,2875,2877,2879,2881],{"class":2865,"line":494},[568,602],[566,2867,606],{"class":605},[566,2869,609],{"class":571},[566,2871,2872],{"class":612}," useFBO",[566,2874,616],{"class":571},[566,2876,619],{"class":605},[566,2878,622],{"class":571},[566,2880,625],{"class":592},[566,2882,628],{"class":571},[566,2884,2885],{"class":568,"line":631},[566,2886,634],{"emptyLinePlaceholder":500},[566,2888,2890,2892,2895,2897,2899,2901],{"class":2889,"line":637},[568,602],[566,2891,640],{"class":579},[566,2893,2894],{"class":612}," fboTarget ",[566,2896,586],{"class":571},[566,2898,2872],{"class":648},[566,2900,652],{"class":612},[566,2902,2903],{"class":571},"{\n",[566,2905,2907,2910,2912,2916],{"class":2906,"line":666},[568,602],[566,2908,2909],{"class":575},"  depth",[566,2911,2235],{"class":571},[566,2913,2915],{"class":2914},"sfNiH"," true",[566,2917,2918],{"class":571},",\n",[566,2920,2922,2925,2927,2930],{"class":2921,"line":676},[568,602],[566,2923,2924],{"class":575},"  width",[566,2926,2235],{"class":571},[566,2928,2929],{"class":2305}," 512",[566,2931,2918],{"class":571},[566,2933,2935,2938,2940,2942],{"class":2934,"line":681},[568,602],[566,2936,2937],{"class":575},"  height",[566,2939,2235],{"class":571},[566,2941,2929],{"class":2305},[566,2943,2918],{"class":571},[566,2945,2947,2950,2952],{"class":2946,"line":691},[568,602],[566,2948,2949],{"class":575},"  settings",[566,2951,2235],{"class":571},[566,2953,2244],{"class":571},[566,2955,2957,2960,2962,2965],{"class":2956,"line":702},[568,602],[566,2958,2959],{"class":575},"    samples",[566,2961,2235],{"class":571},[566,2963,2964],{"class":2305}," 1",[566,2966,2918],{"class":571},[566,2968,2970],{"class":2969,"line":557},[568,602],[566,2971,2972],{"class":571},"  },\n",[566,2974,2976,2979],{"class":2975,"line":558},[568,602],[566,2977,2978],{"class":571},"}",[566,2980,663],{"class":612},[566,2982,2983,2985,2987],{"class":568,"line":559},[566,2984,669],{"class":571},[566,2986,576],{"class":575},[566,2988,598],{"class":571},[566,2990,2991],{"class":568,"line":560},[566,2992,634],{"emptyLinePlaceholder":500},[566,2994,2995,2997,2999],{"class":568,"line":561},[566,2996,572],{"class":571},[566,2998,686],{"class":575},[566,3000,598],{"class":571},[566,3002,3003,3005,3007],{"class":568,"line":774},[566,3004,694],{"class":571},[566,3006,1742],{"class":575},[566,3008,598],{"class":571},[566,3010,3011,3013,3015,3017,3019,3021,3023,3025],{"class":568,"line":784},[566,3012,705],{"class":571},[566,3014,2517],{"class":575},[566,3016,1755],{"class":579},[566,3018,586],{"class":571},[566,3020,589],{"class":571},[566,3022,2526],{"class":592},[566,3024,589],{"class":571},[566,3026,1689],{"class":571},[566,3028,3029],{"class":568,"line":794},[566,3030,634],{"emptyLinePlaceholder":500},[566,3032,3033,3035],{"class":568,"line":1844},[566,3034,705],{"class":571},[566,3036,2543],{"class":575},[566,3038,3039,3042,3044,3046,3048],{"class":568,"line":1865},[566,3040,3041],{"class":579},"      :color",[566,3043,586],{"class":571},[566,3045,589],{"class":571},[566,3047,2556],{"class":592},[566,3049,735],{"class":571},[566,3051,3053,3056,3058,3060,3063],{"class":3052,"line":1874},[568,602],[566,3054,3055],{"class":579},"      :map",[566,3057,586],{"class":571},[566,3059,589],{"class":571},[566,3061,3062],{"class":592},"fboTarget?.texture ?? null",[566,3064,735],{"class":571},[566,3066,3067],{"class":568,"line":2419},[566,3068,2500],{"class":571},[566,3070,3071,3073,3075],{"class":568,"line":2424},[566,3072,787],{"class":571},[566,3074,1742],{"class":575},[566,3076,598],{"class":571},[566,3078,3079,3081,3083],{"class":568,"line":2024},[566,3080,669],{"class":571},[566,3082,686],{"class":575},[566,3084,598],{"class":571},[890,3086,3088],{"id":3087},"options","Options",[926,3090,3091,3101],{},[929,3092,3093],{},[932,3094,3095,3097,3099],{},[935,3096,1891],{"align":937},[935,3098,941],{"align":937},[935,3100,944],{},[946,3102,3103,3117,3131,3152],{},[932,3104,3105,3111,3115],{},[951,3106,3107],{"align":937},[2714,3108,3109],{},[522,3110,2718],{},[951,3112,3113,2723],{"align":937},[522,3114,984],{},[951,3116,2726],{},[932,3118,3119,3125,3129],{},[951,3120,3121],{"align":937},[2714,3122,3123],{},[522,3124,2735],{},[951,3126,3127,2740],{"align":937},[522,3128,984],{},[951,3130,2743],{},[932,3132,3133,3139,3148],{},[951,3134,3135],{"align":937},[2714,3136,3137],{},[522,3138,2752],{},[951,3140,3141,2757,3143,812],{"align":937},[522,3142,1086],{},[527,3144,3146],{"href":2760,"rel":3145},[531],[522,3147,2764],{},[951,3149,3150],{},[522,3151,1132],{},[932,3153,3154,3160,3169],{},[951,3155,3156],{"align":937},[2714,3157,3158],{},[522,3159,2777],{},[951,3161,3162,2783,3164],{"align":937},[522,3163,2782],{},[527,3165,3167,2791],{"href":2786,"rel":3166},[531],[522,3168,2790],{},[951,3170,3171],{},[522,3172,2796],{},[1538,3174,3175],{},"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 .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}",{"title":492,"searchDepth":493,"depth":494,"links":3177},[3178,3179,3180],{"id":550,"depth":494,"text":15},{"id":923,"depth":494,"text":924},{"id":2817,"depth":494,"text":2818,"children":3181},[3182,3183],{"id":2836,"depth":631,"text":15},{"id":3087,"depth":631,"text":3088},"Render to texture using Frame Buffer Objects.",{},{"title":413,"description":3184},"zUF36nsNVRlMP7A5uu65IxZbcmtRV1okKCAlizt0dq4",{"id":3189,"title":417,"body":3190,"description":3569,"extension":497,"links":498,"meta":3570,"navigation":500,"path":418,"seo":3571,"stem":419,"__hash__":3572},"docs/2.api/9.objects/gradient-texture.md",{"type":481,"value":3191,"toc":3565},[3192,3197,3207,3209,3413,3415,3563],[2003,3193,3194],{},[3195,3196],"objects-gradient-texture",{},[484,3198,3199,3202,3203,3206],{},[522,3200,3201],{},"\u003CGradientTexture />"," creates a gradient in a THREE.Texture and attaches it to its parent THREE.Material's ",[522,3204,3205],{},"map"," by default.",[548,3208,15],{"id":550},[552,3210,3212],{"className":554,"code":3211,"language":562,"meta":492,"style":492},"\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",[522,3213,3214,3234,3253,3261,3265,3273,3281,3300,3304,3312,3332,3341,3348,3362,3376,3381,3389,3397,3405],{"__ignoreMap":492},[566,3215,3216,3218,3220,3222,3224,3226,3228,3230,3232],{"class":568,"line":493},[566,3217,572],{"class":571},[566,3219,576],{"class":575},[566,3221,580],{"class":579},[566,3223,583],{"class":579},[566,3225,586],{"class":571},[566,3227,589],{"class":571},[566,3229,593],{"class":592},[566,3231,589],{"class":571},[566,3233,598],{"class":571},[566,3235,3236,3238,3240,3243,3245,3247,3249,3251],{"class":568,"line":494},[566,3237,606],{"class":605},[566,3239,609],{"class":571},[566,3241,3242],{"class":612}," GradientTexture",[566,3244,616],{"class":571},[566,3246,619],{"class":605},[566,3248,622],{"class":571},[566,3250,625],{"class":592},[566,3252,628],{"class":571},[566,3254,3255,3257,3259],{"class":568,"line":631},[566,3256,669],{"class":571},[566,3258,576],{"class":575},[566,3260,598],{"class":571},[566,3262,3263],{"class":568,"line":637},[566,3264,634],{"emptyLinePlaceholder":500},[566,3266,3267,3269,3271],{"class":568,"line":666},[566,3268,572],{"class":571},[566,3270,686],{"class":575},[566,3272,598],{"class":571},[566,3274,3275,3277,3279],{"class":568,"line":676},[566,3276,694],{"class":571},[566,3278,697],{"class":575},[566,3280,598],{"class":571},[566,3282,3283,3285,3287,3289,3291,3293,3296,3298],{"class":568,"line":681},[566,3284,705],{"class":571},[566,3286,1674],{"class":575},[566,3288,1677],{"class":579},[566,3290,586],{"class":571},[566,3292,589],{"class":571},[566,3294,3295],{"class":592},"[0, 0, 5]",[566,3297,589],{"class":571},[566,3299,1689],{"class":571},[566,3301,3302],{"class":568,"line":691},[566,3303,634],{"emptyLinePlaceholder":500},[566,3305,3306,3308,3310],{"class":568,"line":702},[566,3307,705],{"class":571},[566,3309,1742],{"class":575},[566,3311,598],{"class":571},[566,3313,3314,3316,3319,3321,3323,3325,3328,3330],{"class":568,"line":557},[566,3315,716],{"class":571},[566,3317,3318],{"class":575},"TresPlaneGeometry",[566,3320,1755],{"class":579},[566,3322,586],{"class":571},[566,3324,589],{"class":571},[566,3326,3327],{"class":592},"[2, 2]",[566,3329,589],{"class":571},[566,3331,1689],{"class":571},[566,3333,3334,3336,3339],{"class":568,"line":558},[566,3335,716],{"class":571},[566,3337,3338],{"class":575},"TresMeshBasicMaterial",[566,3340,598],{"class":571},[566,3342,3343,3345],{"class":568,"line":559},[566,3344,1749],{"class":571},[566,3346,3347],{"class":575},"GradientTexture\n",[566,3349,3350,3353,3355,3357,3360],{"class":568,"line":560},[566,3351,3352],{"class":579},"          :stops",[566,3354,586],{"class":571},[566,3356,589],{"class":571},[566,3358,3359],{"class":592},"[0, 1]",[566,3361,735],{"class":571},[566,3363,3364,3367,3369,3371,3374],{"class":568,"line":561},[566,3365,3366],{"class":579},"          :colors",[566,3368,586],{"class":571},[566,3370,589],{"class":571},[566,3372,3373],{"class":592},"['#ff0000', '#0000ff']",[566,3375,735],{"class":571},[566,3377,3378],{"class":568,"line":774},[566,3379,3380],{"class":571},"        />\n",[566,3382,3383,3385,3387],{"class":568,"line":784},[566,3384,1803],{"class":571},[566,3386,3338],{"class":575},[566,3388,598],{"class":571},[566,3390,3391,3393,3395],{"class":568,"line":794},[566,3392,777],{"class":571},[566,3394,1742],{"class":575},[566,3396,598],{"class":571},[566,3398,3399,3401,3403],{"class":568,"line":1844},[566,3400,787],{"class":571},[566,3402,697],{"class":575},[566,3404,598],{"class":571},[566,3406,3407,3409,3411],{"class":568,"line":1865},[566,3408,669],{"class":571},[566,3410,686],{"class":575},[566,3412,598],{"class":571},[548,3414,924],{"id":923},[926,3416,3417,3427],{},[929,3418,3419],{},[932,3420,3421,3423,3425],{},[935,3422,1891],{"align":937},[935,3424,941],{"align":937},[935,3426,944],{},[946,3428,3429,3458,3473,3488,3502,3516,3534,3548],{},[932,3430,3431,3436,3456],{},[951,3432,3433],{"align":937},[522,3434,3435],{},"stops",[951,3437,3438,3439,3442,3443,3445,3446,3448,3449,3452,3453,812],{"align":937},"A ",[522,3440,3441],{},"number[]"," of values between ",[522,3444,1117],{}," and ",[522,3447,1783],{}," representing the color positions in the gradient. ",[522,3450,3451],{},"stops.length"," should match ",[522,3454,3455],{},"color.length",[951,3457],{},[932,3459,3460,3465,3471],{},[951,3461,3462],{"align":937},[522,3463,3464],{},"colors",[951,3466,3438,3467,3470],{"align":937},[522,3468,3469],{},"THREE.ColorRepresentation[]"," representing the colors in the gradient.",[951,3472],{},[932,3474,3475,3480,3483],{},[951,3476,3477],{"align":937},[522,3478,3479],{},"attach",[951,3481,3482],{"align":937},"Where the component should be attached within its parent.",[951,3484,3485],{},[522,3486,3487],{},"'map'",[932,3489,3490,3494,3497],{},[951,3491,3492],{"align":937},[522,3493,2735],{},[951,3495,3496],{"align":937},"Height of the canvas used to draw the gradient.",[951,3498,3499],{},[522,3500,3501],{},"1024",[932,3503,3504,3508,3511],{},[951,3505,3506],{"align":937},[522,3507,2718],{},[951,3509,3510],{"align":937},"Width of the canvas used to draw the gradient.",[951,3512,3513],{},[522,3514,3515],{},"16",[932,3517,3518,3523,3529],{},[951,3519,3520],{"align":937},[522,3521,3522],{},"type",[951,3524,3525,3528],{"align":937},[522,3526,3527],{},"'linear' | 'radial'"," Type of gradient to draw.",[951,3530,3531],{},[522,3532,3533],{},"'linear'",[932,3535,3536,3541,3544],{},[951,3537,3538],{"align":937},[522,3539,3540],{},"innerCircleRadius",[951,3542,3543],{"align":937},"Radius of the inner circle of a radial gradient.",[951,3545,3546],{},[522,3547,1117],{},[932,3549,3550,3555,3558],{},[951,3551,3552],{"align":937},[522,3553,3554],{},"outerCircleRadius",[951,3556,3557],{"align":937},"Radius of the outer circle of a radial gradient.",[951,3559,3560],{},[522,3561,3562],{},"'auto'",[1538,3564,1989],{},{"title":492,"searchDepth":493,"depth":494,"links":3566},[3567,3568],{"id":550,"depth":494,"text":15},{"id":923,"depth":494,"text":924},"Create gradient textures for materials.",{},{"title":417,"description":3569},"NUI7_e9BLX8HMymE1TjQDQS-QQXxuK5bdda9GdveJPw",{"id":3574,"title":421,"body":3575,"description":9247,"extension":497,"links":498,"meta":9248,"navigation":500,"path":422,"seo":9249,"stem":423,"__hash__":9250},"docs/2.api/9.objects/html.md",{"type":481,"value":3576,"toc":9226},[3577,3580,3594,3599,3601,4016,4020,4027,4032,4048,4056,4061,4205,4211,4215,4239,4244,4374,4378,4402,4405,4429,4447,4468,4473,4638,4642,4647,4671,4683,4688,6399,6403,6428,6449,6490,6494,6510,6524,6565,6572,6596,6616,6621,8103,8109,8115,8120,8322,8339,8341,8705,8707,8727,8731,8814,8818,8997,9202,9205,9223],[484,3578,3579],{},"This component allows you to project HTML content to any object in your scene. TresJS will automatically update the position of the HTML content to match the position of the object in the scene.",[484,3581,3582,3583,3445,3586,3589,3590,3593],{},"🚀 Works seamlessly with both ",[2714,3584,3585],{},"PerspectiveCamera",[2714,3587,3588],{},"OrthographicCamera"," — the active camera is automatically detected by the ",[522,3591,3592],{},"\u003CHtml>"," component.",[2003,3595,3596],{},[3597,3598],"objects-html",{},[548,3600,15],{"id":550},[552,3602,3605],{"className":554,"code":3603,"highlights":3604,"language":562,"meta":492,"style":492},"\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",[494,560,561,774,784,794,1844],[522,3606,3607,3627,3651,3669,3677,3681,3689,3709,3728,3736,3754,3762,3770,3778,3784,3790,3805,3820,3835,3840,3869,3878,3886,3894,3902,3910,3918,3929,3937,3954,3968,3980,3992,4004,4008],{"__ignoreMap":492},[566,3608,3609,3611,3613,3615,3617,3619,3621,3623,3625],{"class":568,"line":493},[566,3610,572],{"class":571},[566,3612,576],{"class":575},[566,3614,580],{"class":579},[566,3616,583],{"class":579},[566,3618,586],{"class":571},[566,3620,589],{"class":571},[566,3622,593],{"class":592},[566,3624,589],{"class":571},[566,3626,598],{"class":571},[566,3628,3630,3632,3634,3637,3639,3641,3643,3645,3647,3649],{"class":3629,"line":494},[568,602],[566,3631,606],{"class":605},[566,3633,609],{"class":571},[566,3635,3636],{"class":612}," Html",[566,3638,1626],{"class":571},[566,3640,1629],{"class":612},[566,3642,616],{"class":571},[566,3644,619],{"class":605},[566,3646,622],{"class":571},[566,3648,625],{"class":592},[566,3650,628],{"class":571},[566,3652,3653,3655,3657,3659,3661,3663,3665,3667],{"class":568,"line":631},[566,3654,606],{"class":605},[566,3656,609],{"class":571},[566,3658,2105],{"class":612},[566,3660,616],{"class":571},[566,3662,619],{"class":605},[566,3664,622],{"class":571},[566,3666,2094],{"class":592},[566,3668,628],{"class":571},[566,3670,3671,3673,3675],{"class":568,"line":637},[566,3672,669],{"class":571},[566,3674,576],{"class":575},[566,3676,598],{"class":571},[566,3678,3679],{"class":568,"line":666},[566,3680,634],{"emptyLinePlaceholder":500},[566,3682,3683,3685,3687],{"class":568,"line":676},[566,3684,572],{"class":571},[566,3686,686],{"class":575},[566,3688,598],{"class":571},[566,3690,3691,3693,3695,3698,3700,3702,3705,3707],{"class":568,"line":681},[566,3692,694],{"class":571},[566,3694,697],{"class":575},[566,3696,3697],{"class":579}," clear-color",[566,3699,586],{"class":571},[566,3701,589],{"class":571},[566,3703,3704],{"class":592},"#82DBC5",[566,3706,589],{"class":571},[566,3708,598],{"class":571},[566,3710,3711,3713,3715,3717,3719,3721,3724,3726],{"class":568,"line":691},[566,3712,705],{"class":571},[566,3714,1674],{"class":575},[566,3716,1677],{"class":579},[566,3718,586],{"class":571},[566,3720,589],{"class":571},[566,3722,3723],{"class":592},"[2, 2, 5]",[566,3725,589],{"class":571},[566,3727,1689],{"class":571},[566,3729,3730,3732,3734],{"class":568,"line":702},[566,3731,705],{"class":571},[566,3733,1696],{"class":575},[566,3735,1689],{"class":571},[566,3737,3738,3740,3742,3744,3746,3748,3750,3752],{"class":568,"line":557},[566,3739,705],{"class":571},[566,3741,1742],{"class":575},[566,3743,1677],{"class":579},[566,3745,586],{"class":571},[566,3747,589],{"class":571},[566,3749,2526],{"class":592},[566,3751,589],{"class":571},[566,3753,598],{"class":571},[566,3755,3756,3758,3760],{"class":568,"line":558},[566,3757,716],{"class":571},[566,3759,2517],{"class":575},[566,3761,1689],{"class":571},[566,3763,3764,3766,3768],{"class":568,"line":559},[566,3765,716],{"class":571},[566,3767,2663],{"class":575},[566,3769,1689],{"class":571},[566,3771,3773,3775],{"class":3772,"line":560},[568,602],[566,3774,716],{"class":571},[566,3776,3777],{"class":575},"Html\n",[566,3779,3781],{"class":3780,"line":561},[568,602],[566,3782,3783],{"class":579},"        center\n",[566,3785,3787],{"class":3786,"line":774},[568,602],[566,3788,3789],{"class":579},"        transform\n",[566,3791,3793,3796,3798,3800,3803],{"class":3792,"line":784},[568,602],[566,3794,3795],{"class":579},"        :distance-factor",[566,3797,586],{"class":571},[566,3799,589],{"class":571},[566,3801,3802],{"class":592},"4",[566,3804,735],{"class":571},[566,3806,3808,3811,3813,3815,3818],{"class":3807,"line":794},[568,602],[566,3809,3810],{"class":579},"        :position",[566,3812,586],{"class":571},[566,3814,589],{"class":571},[566,3816,3817],{"class":592},"[0, 0, 0.65]",[566,3819,735],{"class":571},[566,3821,3823,3826,3828,3830,3833],{"class":3822,"line":1844},[568,602],[566,3824,3825],{"class":579},"        :scale",[566,3827,586],{"class":571},[566,3829,589],{"class":571},[566,3831,3832],{"class":592},"[0.75, 0.75, 0.75]",[566,3834,735],{"class":571},[566,3836,3837],{"class":568,"line":1865},[566,3838,3839],{"class":571},"      >\n",[566,3841,3842,3844,3847,3849,3851,3853,3856,3858,3860,3863,3865,3867],{"class":568,"line":1874},[566,3843,1749],{"class":571},[566,3845,3846],{"class":575},"h1",[566,3848,2791],{"class":579},[566,3850,586],{"class":571},[566,3852,589],{"class":571},[566,3854,3855],{"class":592},"title",[566,3857,589],{"class":571},[566,3859,2163],{"class":571},[566,3861,3862],{"class":612},"I'm a Box 📦",[566,3864,669],{"class":571},[566,3866,3846],{"class":575},[566,3868,598],{"class":571},[566,3870,3871,3873,3876],{"class":568,"line":2419},[566,3872,1803],{"class":571},[566,3874,3875],{"class":575},"Html",[566,3877,598],{"class":571},[566,3879,3880,3882,3884],{"class":568,"line":2424},[566,3881,777],{"class":571},[566,3883,1742],{"class":575},[566,3885,598],{"class":571},[566,3887,3888,3890,3892],{"class":568,"line":2024},[566,3889,705],{"class":571},[566,3891,2429],{"class":575},[566,3893,1689],{"class":571},[566,3895,3896,3898,3900],{"class":568,"line":2025},[566,3897,705],{"class":571},[566,3899,1827],{"class":575},[566,3901,1689],{"class":571},[566,3903,3904,3906,3908],{"class":568,"line":2026},[566,3905,787],{"class":571},[566,3907,697],{"class":575},[566,3909,598],{"class":571},[566,3911,3912,3914,3916],{"class":568,"line":2027},[566,3913,669],{"class":571},[566,3915,686],{"class":575},[566,3917,598],{"class":571},[566,3919,3920,3922,3924,3927],{"class":568,"line":2497},[566,3921,572],{"class":571},[566,3923,1538],{"class":575},[566,3925,3926],{"class":579}," scoped",[566,3928,598],{"class":571},[566,3930,3931,3933,3935],{"class":568,"line":2503},[566,3932,812],{"class":571},[566,3934,3855],{"class":2154},[566,3936,2244],{"class":571},[566,3938,3939,3943,3945,3948,3951],{"class":568,"line":2512},[566,3940,3942],{"class":3941},"sqsOY","  background-color",[566,3944,2235],{"class":571},[566,3946,3947],{"class":571}," #",[566,3949,3950],{"class":612},"1e1e1e",[566,3952,3953],{"class":571},";\n",[566,3955,3956,3959,3961,3963,3966],{"class":568,"line":2533},[566,3957,3958],{"class":3941},"  color",[566,3960,2235],{"class":571},[566,3962,3947],{"class":571},[566,3964,3965],{"class":612},"ffffff",[566,3967,3953],{"class":571},[566,3969,3970,3973,3975,3978],{"class":568,"line":2538},[566,3971,3972],{"class":3941},"  font-size",[566,3974,2235],{"class":571},[566,3976,3977],{"class":2305}," 0.75rem",[566,3979,3953],{"class":571},[566,3981,3982,3985,3987,3990],{"class":568,"line":2546},[566,3983,3984],{"class":3941},"  padding",[566,3986,2235],{"class":571},[566,3988,3989],{"class":2305}," 0.25rem",[566,3991,3953],{"class":571},[566,3993,3994,3997,3999,4002],{"class":568,"line":2561},[566,3995,3996],{"class":3941},"  border-radius",[566,3998,2235],{"class":571},[566,4000,4001],{"class":2305}," 0.375rem",[566,4003,3953],{"class":571},[566,4005,4006],{"class":568,"line":2576},[566,4007,2337],{"class":571},[566,4009,4010,4012,4014],{"class":568,"line":2581},[566,4011,669],{"class":571},[566,4013,1538],{"class":575},[566,4015,598],{"class":571},[548,4017,4019],{"id":4018},"occlusion","Occlusion",[484,4021,4022,4023,4026],{},"By default, the HTML content will be visible through other objects in the scene. You can use the ",[522,4024,4025],{},"occlude"," prop to make the HTML content occlude other objects in the scene.",[484,4028,4029,4030,1402],{},"Html can be hidden behind one or more objects in your scene using the ",[522,4031,4025],{},[552,4033,4035],{"className":554,"code":4034,"language":562,"meta":492,"style":492},"\u003CHtml occlude>\n",[522,4036,4037],{"__ignoreMap":492},[566,4038,4039,4041,4043,4046],{"class":568,"line":493},[566,4040,572],{"class":571},[566,4042,3875],{"class":575},[566,4044,4045],{"class":579}," occlude",[566,4047,598],{"class":571},[484,4049,976,4050,4052,4053,4055],{},[522,4051,4025],{},", then ",[522,4054,3592],{}," will be hidden by any objects that pass in front of its position.",[2003,4057,4058],{},[4059,4060],"objects-html-occlusion",{},[4062,4063,4064,4065,4069],"details",{},"\n  ",[4066,4067,4068],"summary",{},"Demo code",[552,4070,4074],{"className":4071,"code":4072,"language":4073,"meta":492,"style":492},"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",[522,4075,4076,4095,4103,4111,4161,4189,4197],{"__ignoreMap":492},[566,4077,4078,4080,4082,4084,4086,4088,4091,4093],{"class":568,"line":493},[566,4079,572],{"class":571},[566,4081,1742],{"class":575},[566,4083,1677],{"class":579},[566,4085,586],{"class":571},[566,4087,589],{"class":571},[566,4089,4090],{"class":592},"[0, 1, -2]",[566,4092,589],{"class":571},[566,4094,598],{"class":571},[566,4096,4097,4099,4101],{"class":568,"line":494},[566,4098,694],{"class":571},[566,4100,2517],{"class":575},[566,4102,1689],{"class":571},[566,4104,4105,4107,4109],{"class":568,"line":631},[566,4106,694],{"class":571},[566,4108,2663],{"class":575},[566,4110,1689],{"class":571},[566,4112,4113,4115,4117,4120,4123,4125,4128,4130,4132,4134,4136,4138,4140,4142,4145,4147,4150,4152,4154,4157,4159],{"class":568,"line":637},[566,4114,694],{"class":571},[566,4116,4073],{"class":575},[566,4118,4119],{"class":579}," center",[566,4121,4122],{"class":579}," transform",[566,4124,4045],{"class":579},[566,4126,4127],{"class":579}," :distance-factor",[566,4129,586],{"class":571},[566,4131,589],{"class":571},[566,4133,3802],{"class":592},[566,4135,589],{"class":571},[566,4137,1677],{"class":579},[566,4139,586],{"class":571},[566,4141,589],{"class":571},[566,4143,4144],{"class":592},"[0, 0, 2]",[566,4146,589],{"class":571},[566,4148,4149],{"class":579}," :z-index-range",[566,4151,586],{"class":571},[566,4153,589],{"class":571},[566,4155,4156],{"class":592},"[28, 0]",[566,4158,589],{"class":571},[566,4160,598],{"class":571},[566,4162,4163,4165,4167,4169,4171,4173,4176,4178,4180,4183,4185,4187],{"class":568,"line":666},[566,4164,705],{"class":571},[566,4166,3846],{"class":575},[566,4168,2791],{"class":579},[566,4170,586],{"class":571},[566,4172,589],{"class":571},[566,4174,4175],{"class":592},"bg-white dark:bg-dark text-xs p-1 rounded",[566,4177,589],{"class":571},[566,4179,2163],{"class":571},[566,4181,4182],{"class":612},"Move camera",[566,4184,669],{"class":571},[566,4186,3846],{"class":575},[566,4188,598],{"class":571},[566,4190,4191,4193,4195],{"class":568,"line":676},[566,4192,787],{"class":571},[566,4194,4073],{"class":575},[566,4196,598],{"class":571},[566,4198,4199,4201,4203],{"class":568,"line":681},[566,4200,669],{"class":571},[566,4202,1742],{"class":575},[566,4204,598],{"class":571},[484,4206,4207,4208,4210],{},"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 ",[522,4209,4025],{}," prop:",[890,4212,4214],{"id":4213},"single-occluder","Single occluder",[552,4216,4218],{"className":554,"code":4217,"language":562,"meta":492,"style":492},"\u003CHtml occlude=\"[mesh]\">\n",[522,4219,4220],{"__ignoreMap":492},[566,4221,4222,4224,4226,4228,4230,4232,4235,4237],{"class":568,"line":493},[566,4223,572],{"class":571},[566,4225,3875],{"class":575},[566,4227,4045],{"class":579},[566,4229,586],{"class":571},[566,4231,589],{"class":571},[566,4233,4234],{"class":592},"[mesh]",[566,4236,589],{"class":571},[566,4238,598],{"class":571},[2003,4240,4241],{},[4242,4243],"objects-html-single-occluder",{},[4062,4245,4064,4246,4248],{},[4066,4247,4068],{},[552,4249,4251],{"className":4071,"code":4250,"language":4073,"meta":492,"style":492},"\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",[522,4252,4253,4272,4280,4288,4332,4358,4366],{"__ignoreMap":492},[566,4254,4255,4257,4259,4261,4263,4265,4268,4270],{"class":568,"line":493},[566,4256,572],{"class":571},[566,4258,1742],{"class":575},[566,4260,1677],{"class":579},[566,4262,586],{"class":571},[566,4264,589],{"class":571},[566,4266,4267],{"class":592},"[0, 1, 0]",[566,4269,589],{"class":571},[566,4271,598],{"class":571},[566,4273,4274,4276,4278],{"class":568,"line":494},[566,4275,694],{"class":571},[566,4277,2517],{"class":575},[566,4279,1689],{"class":571},[566,4281,4282,4284,4286],{"class":568,"line":631},[566,4283,694],{"class":571},[566,4285,2663],{"class":575},[566,4287,1689],{"class":571},[566,4289,4290,4292,4294,4296,4298,4301,4303,4305,4308,4310,4312,4314,4316,4318,4320,4322,4324,4326,4328,4330],{"class":568,"line":637},[566,4291,694],{"class":571},[566,4293,4073],{"class":575},[566,4295,4119],{"class":579},[566,4297,4122],{"class":579},[566,4299,4300],{"class":579}," :occlude",[566,4302,586],{"class":571},[566,4304,589],{"class":571},[566,4306,4307],{"class":592},"[sphereRef]",[566,4309,589],{"class":571},[566,4311,4127],{"class":579},[566,4313,586],{"class":571},[566,4315,589],{"class":571},[566,4317,3802],{"class":592},[566,4319,589],{"class":571},[566,4321,4149],{"class":579},[566,4323,586],{"class":571},[566,4325,589],{"class":571},[566,4327,4156],{"class":592},[566,4329,589],{"class":571},[566,4331,598],{"class":571},[566,4333,4334,4336,4338,4340,4342,4344,4346,4348,4350,4352,4354,4356],{"class":568,"line":666},[566,4335,705],{"class":571},[566,4337,3846],{"class":575},[566,4339,2791],{"class":579},[566,4341,586],{"class":571},[566,4343,589],{"class":571},[566,4345,4175],{"class":592},[566,4347,589],{"class":571},[566,4349,2163],{"class":571},[566,4351,4182],{"class":612},[566,4353,669],{"class":571},[566,4355,3846],{"class":575},[566,4357,598],{"class":571},[566,4359,4360,4362,4364],{"class":568,"line":676},[566,4361,787],{"class":571},[566,4363,4073],{"class":575},[566,4365,598],{"class":571},[566,4367,4368,4370,4372],{"class":568,"line":681},[566,4369,669],{"class":571},[566,4371,1742],{"class":575},[566,4373,598],{"class":571},[890,4375,4377],{"id":4376},"multiple-occluders","Multiple occluders",[552,4379,4381],{"className":554,"code":4380,"language":562,"meta":492,"style":492},"\u003CHtml occlude=\"[mesh1, mesh2, mesh3, ...]\" />\n",[522,4382,4383],{"__ignoreMap":492},[566,4384,4385,4387,4389,4391,4393,4395,4398,4400],{"class":568,"line":493},[566,4386,572],{"class":571},[566,4388,3875],{"class":575},[566,4390,4045],{"class":579},[566,4392,586],{"class":571},[566,4394,589],{"class":571},[566,4396,4397],{"class":592},"[mesh1, mesh2, mesh3, ...]",[566,4399,589],{"class":571},[566,4401,1689],{"class":571},[484,4403,4404],{},"OR",[552,4406,4408],{"className":554,"code":4407,"language":562,"meta":492,"style":492},"\u003CHtml occlude=\"meshesArray\" />\n",[522,4409,4410],{"__ignoreMap":492},[566,4411,4412,4414,4416,4418,4420,4422,4425,4427],{"class":568,"line":493},[566,4413,572],{"class":571},[566,4415,3875],{"class":575},[566,4417,4045],{"class":579},[566,4419,586],{"class":571},[566,4421,589],{"class":571},[566,4423,4424],{"class":592},"meshesArray",[566,4426,589],{"class":571},[566,4428,1689],{"class":571},[484,4430,4431,4432,4435,4436,4441,4442,4446],{},"In the demo below, a ",[522,4433,4434],{},"v-for"," loop generates multiple spheres around the cube.\nAll resulting ",[2714,4437,4438],{},[522,4439,4440],{},"Mesh"," instances are collected into an array and passed to the ",[2714,4443,4444],{},[522,4445,4025],{}," prop, allowing each sphere to occlude the HTML content.",[484,4448,4449,4450,4455,4456,4459,4460,3445,4464,4467],{},"This demo also uses the ",[2714,4451,4452],{},[522,4453,4454],{},"on-occlude"," event, which is triggered whenever the occlusion state changes.\nHere, the event updates a ",[2714,4457,4458],{},"reactive value"," to control element styles — for example, toggling between ",[4461,4462,4463],"em",{},"light",[4461,4465,4466],{},"dark"," themes.",[2003,4469,4470],{},[4471,4472],"objects-html-occlude-complex-demo",{},[4062,4474,4064,4475,4477],{},[4066,4476,4068],{},[552,4478,4480],{"className":4071,"code":4479,"language":4073,"meta":492,"style":492},"\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",[522,4481,4482,4500,4508,4516,4523,4537,4551,4564,4577,4591,4596,4622,4630],{"__ignoreMap":492},[566,4483,4484,4486,4488,4490,4492,4494,4496,4498],{"class":568,"line":493},[566,4485,572],{"class":571},[566,4487,1742],{"class":575},[566,4489,1677],{"class":579},[566,4491,586],{"class":571},[566,4493,589],{"class":571},[566,4495,4267],{"class":592},[566,4497,589],{"class":571},[566,4499,598],{"class":571},[566,4501,4502,4504,4506],{"class":568,"line":494},[566,4503,694],{"class":571},[566,4505,2517],{"class":575},[566,4507,1689],{"class":571},[566,4509,4510,4512,4514],{"class":568,"line":631},[566,4511,694],{"class":571},[566,4513,2663],{"class":575},[566,4515,1689],{"class":571},[566,4517,4518,4520],{"class":568,"line":637},[566,4519,694],{"class":571},[566,4521,4522],{"class":575},"html\n",[566,4524,4525,4528,4530,4532,4535],{"class":568,"line":666},[566,4526,4527],{"class":579},"    v-bind",[566,4529,586],{"class":571},[566,4531,589],{"class":571},[566,4533,4534],{"class":592},"htmlProps",[566,4536,735],{"class":571},[566,4538,4539,4542,4544,4546,4549],{"class":568,"line":676},[566,4540,4541],{"class":579},"    :occlude",[566,4543,586],{"class":571},[566,4545,589],{"class":571},[566,4547,4548],{"class":592},"occluderRefs",[566,4550,735],{"class":571},[566,4552,4553,4556,4558,4560,4562],{"class":568,"line":681},[566,4554,4555],{"class":579},"    :distance-factor",[566,4557,586],{"class":571},[566,4559,589],{"class":571},[566,4561,3802],{"class":592},[566,4563,735],{"class":571},[566,4565,4566,4569,4571,4573,4575],{"class":568,"line":691},[566,4567,4568],{"class":579},"    :z-index-range",[566,4570,586],{"class":571},[566,4572,589],{"class":571},[566,4574,4156],{"class":592},[566,4576,735],{"class":571},[566,4578,4579,4582,4584,4586,4589],{"class":568,"line":702},[566,4580,4581],{"class":579},"    @on-occlude",[566,4583,586],{"class":571},[566,4585,589],{"class":571},[566,4587,4588],{"class":592},"(event: boolean) => isOccluded = event",[566,4590,735],{"class":571},[566,4592,4593],{"class":568,"line":557},[566,4594,4595],{"class":571},"  >\n",[566,4597,4598,4600,4602,4604,4606,4608,4610,4612,4614,4616,4618,4620],{"class":568,"line":558},[566,4599,705],{"class":571},[566,4601,3846],{"class":575},[566,4603,2791],{"class":579},[566,4605,586],{"class":571},[566,4607,589],{"class":571},[566,4609,4175],{"class":592},[566,4611,589],{"class":571},[566,4613,2163],{"class":571},[566,4615,4182],{"class":612},[566,4617,669],{"class":571},[566,4619,3846],{"class":575},[566,4621,598],{"class":571},[566,4623,4624,4626,4628],{"class":568,"line":559},[566,4625,787],{"class":571},[566,4627,4073],{"class":575},[566,4629,598],{"class":571},[566,4631,4632,4634,4636],{"class":568,"line":560},[566,4633,669],{"class":571},[566,4635,1742],{"class":575},[566,4637,598],{"class":571},[890,4639,4641],{"id":4640},"blending-occlusion","Blending Occlusion",[484,4643,4644,4646],{},[522,4645,3592],{}," 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.",[552,4648,4650],{"className":554,"code":4649,"language":562,"meta":492,"style":492},"\u003CHtml occlude=\"blending\">\n",[522,4651,4652],{"__ignoreMap":492},[566,4653,4654,4656,4658,4660,4662,4664,4667,4669],{"class":568,"line":493},[566,4655,572],{"class":571},[566,4657,3875],{"class":575},[566,4659,4045],{"class":579},[566,4661,586],{"class":571},[566,4663,589],{"class":571},[566,4665,4666],{"class":592},"blending",[566,4668,589],{"class":571},[566,4670,598],{"class":571},[484,4672,1355,4673,914,4676,4679,4680,812],{},[2714,4674,4675],{},"demo below ⬇️",[4461,4677,4678],{},"(left black example)"," shows a ",[2714,4681,4682],{},"basic usage example",[2003,4684,4685],{},[4686,4687],"objects-html-occlude-blending-demo",{},[4062,4689,4064,4690,4692],{},[4066,4691,4068],{},[552,4693,4740],{"className":554,"code":4694,"highlights":4695,"language":562,"meta":492,"style":492},"\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",[494,2546,2576,2581,2590,2595,2603,2616,4696,4697,4698,4699,4700,4701,4702,4703,4704,4705,4706,4697,4698,4699,4700,4701,4702,4703,4704,4705,4706,4707,4708,4709,4710,4711,4712,4713,4714,4715,4716,4717,4718,4719,4720,4721,4722,4723,4724,4725,4726,4727,4728,4729,4730,4731,4732,4733,4734,4735,4736,4737,4738,4739],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,[522,4741,4742,4762,4790,4808,4826,4851,4855,4866,4881,4892,4903,4914,4918,4922,4939,4943,4955,4960,4975,5000,5004,5008,5022,5046,5050,5054,5068,5097,5125,5129,5134,5138,5169,5173,5195,5211,5224,5236,5248,5255,5263,5267,5275,5295,5315,5334,5343,5348,5356,5371,5386,5401,5416,5430,5445,5450,5481,5515,5524,5534,5544,5549,5556,5561,5566,5580,5594,5608,5613,5633,5645,5663,5672,5681,5686,5693,5698,5703,5716,5730,5745,5758,5763,5783,5821,5830,5839,5844,5851,5866,5871,5876,5889,5903,5918,5924,5937,5942,5968,5977,5982,5989,5994,5999,6012,6026,6039,6044,6064,6088,6109,6118,6127,6132,6140,6155,6169,6184,6198,6213,6219,6224,6229,6250,6269,6278,6287,6296,6301,6312,6322,6334,6345,6358,6371,6385,6390],{"__ignoreMap":492},[566,4743,4744,4746,4748,4750,4752,4754,4756,4758,4760],{"class":568,"line":493},[566,4745,572],{"class":571},[566,4747,576],{"class":575},[566,4749,580],{"class":579},[566,4751,583],{"class":579},[566,4753,586],{"class":571},[566,4755,589],{"class":571},[566,4757,593],{"class":592},[566,4759,589],{"class":571},[566,4761,598],{"class":571},[566,4763,4765,4767,4769,4771,4773,4776,4778,4780,4782,4784,4786,4788],{"class":4764,"line":494},[568,602],[566,4766,606],{"class":605},[566,4768,609],{"class":571},[566,4770,3636],{"class":612},[566,4772,1626],{"class":571},[566,4774,4775],{"class":612}," Levioso",[566,4777,1626],{"class":571},[566,4779,1629],{"class":612},[566,4781,616],{"class":571},[566,4783,619],{"class":605},[566,4785,622],{"class":571},[566,4787,625],{"class":592},[566,4789,628],{"class":571},[566,4791,4792,4794,4796,4798,4800,4802,4804,4806],{"class":568,"line":631},[566,4793,606],{"class":605},[566,4795,609],{"class":571},[566,4797,2105],{"class":612},[566,4799,616],{"class":571},[566,4801,619],{"class":605},[566,4803,622],{"class":571},[566,4805,2094],{"class":592},[566,4807,628],{"class":571},[566,4809,4810,4812,4814,4816,4818,4820,4822,4824],{"class":568,"line":637},[566,4811,606],{"class":605},[566,4813,609],{"class":571},[566,4815,2124],{"class":612},[566,4817,616],{"class":571},[566,4819,619],{"class":605},[566,4821,622],{"class":571},[566,4823,562],{"class":592},[566,4825,628],{"class":571},[566,4827,4828,4830,4832,4835,4837,4840,4842,4844,4846,4849],{"class":568,"line":666},[566,4829,606],{"class":605},[566,4831,609],{"class":571},[566,4833,4834],{"class":612}," CircleGeometry",[566,4836,1626],{"class":571},[566,4838,4839],{"class":612}," MeshStandardMaterial",[566,4841,616],{"class":571},[566,4843,619],{"class":605},[566,4845,622],{"class":571},[566,4847,4848],{"class":592},"three",[566,4850,628],{"class":571},[566,4852,4853],{"class":568,"line":676},[566,4854,634],{"emptyLinePlaceholder":500},[566,4856,4857,4859,4862,4864],{"class":568,"line":681},[566,4858,640],{"class":579},[566,4860,4861],{"class":612}," gl ",[566,4863,586],{"class":571},[566,4865,2244],{"class":571},[566,4867,4868,4871,4873,4875,4877,4879],{"class":568,"line":691},[566,4869,4870],{"class":575},"  clearColor",[566,4872,2235],{"class":571},[566,4874,622],{"class":571},[566,4876,3704],{"class":592},[566,4878,655],{"class":571},[566,4880,2918],{"class":571},[566,4882,4883,4886,4888,4890],{"class":568,"line":702},[566,4884,4885],{"class":575},"  clearAlpha",[566,4887,2235],{"class":571},[566,4889,2964],{"class":2305},[566,4891,2918],{"class":571},[566,4893,4894,4897,4899,4901],{"class":568,"line":557},[566,4895,4896],{"class":575},"  shadows",[566,4898,2235],{"class":571},[566,4900,2915],{"class":2914},[566,4902,2918],{"class":571},[566,4904,4905,4908,4910,4912],{"class":568,"line":558},[566,4906,4907],{"class":575},"  alpha",[566,4909,2235],{"class":571},[566,4911,2915],{"class":2914},[566,4913,2918],{"class":571},[566,4915,4916],{"class":568,"line":559},[566,4917,2337],{"class":571},[566,4919,4920],{"class":568,"line":560},[566,4921,634],{"emptyLinePlaceholder":500},[566,4923,4924,4926,4929,4931,4933,4935,4937],{"class":568,"line":561},[566,4925,640],{"class":579},[566,4927,4928],{"class":612}," targetDirectionLightRef ",[566,4930,586],{"class":571},[566,4932,2124],{"class":648},[566,4934,652],{"class":612},[566,4936,2176],{"class":571},[566,4938,663],{"class":612},[566,4940,4941],{"class":568,"line":774},[566,4942,634],{"emptyLinePlaceholder":500},[566,4944,4945,4947,4950,4952],{"class":568,"line":784},[566,4946,640],{"class":579},[566,4948,4949],{"class":612}," geometries ",[566,4951,586],{"class":571},[566,4953,4954],{"class":612}," [\n",[566,4956,4957],{"class":568,"line":794},[566,4958,4959],{"class":571},"  {\n",[566,4961,4962,4965,4967,4969,4971,4973],{"class":568,"line":1844},[566,4963,4964],{"class":575},"    component",[566,4966,2235],{"class":571},[566,4968,622],{"class":571},[566,4970,2517],{"class":592},[566,4972,655],{"class":571},[566,4974,2918],{"class":571},[566,4976,4977,4980,4982,4985,4987,4989,4991,4993,4995,4998],{"class":568,"line":1865},[566,4978,4979],{"class":575},"    args",[566,4981,2235],{"class":571},[566,4983,4984],{"class":612}," [",[566,4986,1783],{"class":2305},[566,4988,1626],{"class":571},[566,4990,2964],{"class":2305},[566,4992,1626],{"class":571},[566,4994,2964],{"class":2305},[566,4996,4997],{"class":612},"]",[566,4999,2918],{"class":571},[566,5001,5002],{"class":568,"line":1874},[566,5003,2972],{"class":571},[566,5005,5006],{"class":568,"line":2419},[566,5007,4959],{"class":571},[566,5009,5010,5012,5014,5016,5018,5020],{"class":568,"line":2424},[566,5011,4964],{"class":575},[566,5013,2235],{"class":571},[566,5015,622],{"class":571},[566,5017,1752],{"class":592},[566,5019,655],{"class":571},[566,5021,2918],{"class":571},[566,5023,5024,5026,5028,5030,5033,5035,5038,5040,5042,5044],{"class":568,"line":2024},[566,5025,4979],{"class":575},[566,5027,2235],{"class":571},[566,5029,4984],{"class":612},[566,5031,5032],{"class":2305},"0.7",[566,5034,1626],{"class":571},[566,5036,5037],{"class":2305}," 32",[566,5039,1626],{"class":571},[566,5041,5037],{"class":2305},[566,5043,4997],{"class":612},[566,5045,2918],{"class":571},[566,5047,5048],{"class":568,"line":2025},[566,5049,2972],{"class":571},[566,5051,5052],{"class":568,"line":2026},[566,5053,4959],{"class":571},[566,5055,5056,5058,5060,5062,5064,5066],{"class":568,"line":2027},[566,5057,4964],{"class":575},[566,5059,2235],{"class":571},[566,5061,622],{"class":571},[566,5063,2642],{"class":592},[566,5065,655],{"class":571},[566,5067,2918],{"class":571},[566,5069,5070,5072,5074,5076,5078,5080,5083,5085,5088,5090,5093,5095],{"class":568,"line":2497},[566,5071,4979],{"class":575},[566,5073,2235],{"class":571},[566,5075,4984],{"class":612},[566,5077,1837],{"class":2305},[566,5079,1626],{"class":571},[566,5081,5082],{"class":2305}," 0.2",[566,5084,1626],{"class":571},[566,5086,5087],{"class":2305}," 16",[566,5089,1626],{"class":571},[566,5091,5092],{"class":2305}," 100",[566,5094,4997],{"class":612},[566,5096,2918],{"class":571},[566,5098,5099,5102,5104,5106,5109,5111,5113,5115,5118,5120,5122],{"class":568,"line":2503},[566,5100,5101],{"class":575},"    bind",[566,5103,2235],{"class":571},[566,5105,609],{"class":571},[566,5107,5108],{"class":575}," castShadow",[566,5110,2235],{"class":571},[566,5112,2915],{"class":2914},[566,5114,1626],{"class":571},[566,5116,5117],{"class":575}," receiveShadow",[566,5119,2235],{"class":571},[566,5121,2915],{"class":2914},[566,5123,5124],{"class":571}," },\n",[566,5126,5127],{"class":568,"line":2512},[566,5128,2972],{"class":571},[566,5130,5131],{"class":568,"line":2533},[566,5132,5133],{"class":612},"]\n",[566,5135,5136],{"class":568,"line":2538},[566,5137,634],{"emptyLinePlaceholder":500},[566,5139,5141,5143,5146,5148,5150,5152,5155,5157,5159,5162,5164,5166],{"class":5140,"line":2546},[568,602],[566,5142,640],{"class":579},[566,5144,5145],{"class":612}," customGeometry ",[566,5147,586],{"class":571},[566,5149,2124],{"class":648},[566,5151,652],{"class":612},[566,5153,5154],{"class":571},"new",[566,5156,4834],{"class":648},[566,5158,652],{"class":612},[566,5160,5161],{"class":2305},"1.25",[566,5163,1626],{"class":571},[566,5165,5037],{"class":2305},[566,5167,5168],{"class":612},"))\n",[566,5170,5171],{"class":568,"line":2561},[566,5172,634],{"emptyLinePlaceholder":500},[566,5174,5176,5178,5181,5183,5185,5187,5189,5191,5193],{"class":5175,"line":2576},[568,602],[566,5177,640],{"class":579},[566,5179,5180],{"class":612}," customMaterial ",[566,5182,586],{"class":571},[566,5184,2124],{"class":648},[566,5186,652],{"class":612},[566,5188,5154],{"class":571},[566,5190,4839],{"class":648},[566,5192,652],{"class":612},[566,5194,2903],{"class":571},[566,5196,5198,5200,5202,5204,5207,5209],{"class":5197,"line":2581},[568,602],[566,5199,3958],{"class":575},[566,5201,2235],{"class":571},[566,5203,622],{"class":571},[566,5205,5206],{"class":592},"red",[566,5208,655],{"class":571},[566,5210,2918],{"class":571},[566,5212,5214,5217,5219,5222],{"class":5213,"line":2590},[568,602],[566,5215,5216],{"class":575},"  side",[566,5218,2235],{"class":571},[566,5220,5221],{"class":2305}," 2",[566,5223,2918],{"class":571},[566,5225,5227,5230,5232,5234],{"class":5226,"line":2595},[568,602],[566,5228,5229],{"class":575},"  opacity",[566,5231,2235],{"class":571},[566,5233,2964],{"class":2305},[566,5235,2918],{"class":571},[566,5237,5239,5242,5244,5246],{"class":5238,"line":2603},[568,602],[566,5240,5241],{"class":575},"  transparent",[566,5243,2235],{"class":571},[566,5245,2915],{"class":2914},[566,5247,2918],{"class":571},[566,5249,5251,5253],{"class":5250,"line":2616},[568,602],[566,5252,2978],{"class":571},[566,5254,5168],{"class":612},[566,5256,5257,5259,5261],{"class":568,"line":2631},[566,5258,669],{"class":571},[566,5260,576],{"class":575},[566,5262,598],{"class":571},[566,5264,5265],{"class":568,"line":2637},[566,5266,634],{"emptyLinePlaceholder":500},[566,5268,5269,5271,5273],{"class":568,"line":2658},[566,5270,572],{"class":571},[566,5272,686],{"class":575},[566,5274,598],{"class":571},[566,5276,5277,5279,5282,5284,5286,5288,5291,5293],{"class":568,"line":2668},[566,5278,694],{"class":571},[566,5280,5281],{"class":575},"div",[566,5283,2791],{"class":579},[566,5285,586],{"class":571},[566,5287,589],{"class":571},[566,5289,5290],{"class":592},"html-demo-wrapper aspect-video",[566,5292,589],{"class":571},[566,5294,598],{"class":571},[566,5296,5297,5299,5301,5304,5306,5308,5311,5313],{"class":568,"line":2677},[566,5298,705],{"class":571},[566,5300,697],{"class":575},[566,5302,5303],{"class":579}," v-bind",[566,5305,586],{"class":571},[566,5307,589],{"class":571},[566,5309,5310],{"class":592},"gl",[566,5312,589],{"class":571},[566,5314,598],{"class":571},[566,5316,5317,5319,5321,5323,5325,5327,5330,5332],{"class":568,"line":2686},[566,5318,716],{"class":571},[566,5320,1674],{"class":575},[566,5322,1677],{"class":579},[566,5324,586],{"class":571},[566,5326,589],{"class":571},[566,5328,5329],{"class":592},"[0, 1.5, 7.5]",[566,5331,589],{"class":571},[566,5333,1689],{"class":571},[566,5335,5337,5339,5341],{"class":568,"line":5336},46,[566,5338,716],{"class":571},[566,5340,1696],{"class":575},[566,5342,1689],{"class":571},[566,5344,5346],{"class":568,"line":5345},47,[566,5347,634],{"emptyLinePlaceholder":500},[566,5349,5351,5353],{"class":568,"line":5350},48,[566,5352,716],{"class":571},[566,5354,5355],{"class":575},"Levioso\n",[566,5357,5359,5362,5364,5366,5369],{"class":568,"line":5358},49,[566,5360,5361],{"class":579},"        v-for",[566,5363,586],{"class":571},[566,5365,589],{"class":571},[566,5367,5368],{"class":592},"(geometry, index) in geometries",[566,5370,735],{"class":571},[566,5372,5374,5377,5379,5381,5384],{"class":568,"line":5373},50,[566,5375,5376],{"class":579},"        :key",[566,5378,586],{"class":571},[566,5380,589],{"class":571},[566,5382,5383],{"class":592},"`html-occlude-blending-demo-${index}`",[566,5385,735],{"class":571},[566,5387,5389,5392,5394,5396,5399],{"class":568,"line":5388},51,[566,5390,5391],{"class":579},"        :speed",[566,5393,586],{"class":571},[566,5395,589],{"class":571},[566,5397,5398],{"class":592},"3",[566,5400,735],{"class":571},[566,5402,5404,5407,5409,5411,5414],{"class":568,"line":5403},52,[566,5405,5406],{"class":579},"        :float-factor",[566,5408,586],{"class":571},[566,5410,589],{"class":571},[566,5412,5413],{"class":592},"3.5",[566,5415,735],{"class":571},[566,5417,5419,5422,5424,5426,5428],{"class":568,"line":5418},53,[566,5420,5421],{"class":579},"        :rotation-factor",[566,5423,586],{"class":571},[566,5425,589],{"class":571},[566,5427,1783],{"class":592},[566,5429,735],{"class":571},[566,5431,5433,5436,5438,5440,5443],{"class":568,"line":5432},54,[566,5434,5435],{"class":579},"        :range",[566,5437,586],{"class":571},[566,5439,589],{"class":571},[566,5441,5442],{"class":592},"[-0.35, 0.35]",[566,5444,735],{"class":571},[566,5446,5448],{"class":568,"line":5447},55,[566,5449,3839],{"class":571},[566,5451,5453,5455,5457,5459,5461,5463,5466,5468,5470,5472,5474,5477,5479],{"class":568,"line":5452},56,[566,5454,1749],{"class":571},[566,5456,1742],{"class":575},[566,5458,1677],{"class":579},[566,5460,586],{"class":571},[566,5462,589],{"class":571},[566,5464,5465],{"class":592},"[index * 3.5 - 3.5, 1, 0]",[566,5467,589],{"class":571},[566,5469,5303],{"class":579},[566,5471,586],{"class":571},[566,5473,589],{"class":571},[566,5475,5476],{"class":592},"geometry.bind",[566,5478,589],{"class":571},[566,5480,598],{"class":571},[566,5482,5484,5487,5490,5493,5495,5497,5500,5502,5504,5506,5508,5511,5513],{"class":568,"line":5483},57,[566,5485,5486],{"class":571},"          \u003C",[566,5488,5489],{"class":575},"component",[566,5491,5492],{"class":579}," :is",[566,5494,586],{"class":571},[566,5496,589],{"class":571},[566,5498,5499],{"class":592},"geometry.component",[566,5501,589],{"class":571},[566,5503,1755],{"class":579},[566,5505,586],{"class":571},[566,5507,589],{"class":571},[566,5509,5510],{"class":592},"geometry.args",[566,5512,589],{"class":571},[566,5514,1689],{"class":571},[566,5516,5518,5520,5522],{"class":568,"line":5517},58,[566,5519,5486],{"class":571},[566,5521,2663],{"class":575},[566,5523,1689],{"class":571},[566,5525,5527,5530,5532],{"class":568,"line":5526},59,[566,5528,5529],{"class":571},"        \u003C/",[566,5531,1742],{"class":575},[566,5533,598],{"class":571},[566,5535,5537,5539,5542],{"class":568,"line":5536},60,[566,5538,1803],{"class":571},[566,5540,5541],{"class":575},"Levioso",[566,5543,598],{"class":571},[566,5545,5547],{"class":568,"line":5546},61,[566,5548,634],{"emptyLinePlaceholder":500},[566,5550,5552,5554],{"class":5551,"line":4696},[568,602],[566,5553,716],{"class":571},[566,5555,3777],{"class":575},[566,5557,5559],{"class":5558,"line":4697},[568,602],[566,5560,3783],{"class":579},[566,5562,5564],{"class":5563,"line":4698},[568,602],[566,5565,3789],{"class":579},[566,5567,5569,5572,5574,5576,5578],{"class":5568,"line":4699},[568,602],[566,5570,5571],{"class":579},"        occlude",[566,5573,586],{"class":571},[566,5575,589],{"class":571},[566,5577,4666],{"class":592},[566,5579,735],{"class":571},[566,5581,5583,5585,5587,5589,5592],{"class":5582,"line":4700},[568,602],[566,5584,3810],{"class":579},[566,5586,586],{"class":571},[566,5588,589],{"class":571},[566,5590,5591],{"class":592},"[-4, .75, -2]",[566,5593,735],{"class":571},[566,5595,5597,5600,5602,5604,5606],{"class":5596,"line":4701},[568,602],[566,5598,5599],{"class":579},"        :z-index-range",[566,5601,586],{"class":571},[566,5603,589],{"class":571},[566,5605,4156],{"class":592},[566,5607,735],{"class":571},[566,5609,5611],{"class":5610,"line":4702},[568,602],[566,5612,3839],{"class":571},[566,5614,5616,5618,5620,5622,5624,5626,5629,5631],{"class":5615,"line":4703},[568,602],[566,5617,1749],{"class":571},[566,5619,5281],{"class":575},[566,5621,2791],{"class":579},[566,5623,586],{"class":571},[566,5625,589],{"class":571},[566,5627,5628],{"class":592},"text-center text-s p-2 bg-[#1B1C1E] text-light",[566,5630,589],{"class":571},[566,5632,598],{"class":571},[566,5634,5636,5639,5641,5643],{"class":5635,"line":4704},[568,602],[566,5637,5638],{"class":612},"          BASIC 💛 ",[566,5640,572],{"class":571},[566,5642,909],{"class":575},[566,5644,1689],{"class":571},[566,5646,5648,5650,5652,5654,5657,5659,5661],{"class":5647,"line":4705},[568,602],[566,5649,5486],{"class":571},[566,5651,4461],{"class":575},[566,5653,2163],{"class":571},[566,5655,5656],{"class":612},"occlude=blending",[566,5658,669],{"class":571},[566,5660,4461],{"class":575},[566,5662,598],{"class":571},[566,5664,5666,5668,5670],{"class":5665,"line":4706},[568,602],[566,5667,5529],{"class":571},[566,5669,5281],{"class":575},[566,5671,598],{"class":571},[566,5673,5675,5677,5679],{"class":568,"line":5674},73,[566,5676,1803],{"class":571},[566,5678,3875],{"class":575},[566,5680,598],{"class":571},[566,5682,5684],{"class":5683,"line":4707},[568,602],[566,5685,634],{"emptyLinePlaceholder":500},[566,5687,5689,5691],{"class":5688,"line":4708},[568,602],[566,5690,716],{"class":571},[566,5692,3777],{"class":575},[566,5694,5696],{"class":5695,"line":4709},[568,602],[566,5697,3783],{"class":579},[566,5699,5701],{"class":5700,"line":4710},[568,602],[566,5702,3789],{"class":579},[566,5704,5706,5708,5710,5712,5714],{"class":5705,"line":4711},[568,602],[566,5707,5571],{"class":579},[566,5709,586],{"class":571},[566,5711,589],{"class":571},[566,5713,4666],{"class":592},[566,5715,735],{"class":571},[566,5717,5719,5721,5723,5725,5728],{"class":5718,"line":4712},[568,602],[566,5720,3810],{"class":579},[566,5722,586],{"class":571},[566,5724,589],{"class":571},[566,5726,5727],{"class":592},"[0, .85, -2]",[566,5729,735],{"class":571},[566,5731,5733,5736,5738,5740,5743],{"class":5732,"line":4713},[568,602],[566,5734,5735],{"class":579},"        :geometry",[566,5737,586],{"class":571},[566,5739,589],{"class":571},[566,5741,5742],{"class":592},"customGeometry",[566,5744,735],{"class":571},[566,5746,5748,5750,5752,5754,5756],{"class":5747,"line":4714},[568,602],[566,5749,5599],{"class":579},[566,5751,586],{"class":571},[566,5753,589],{"class":571},[566,5755,4156],{"class":592},[566,5757,735],{"class":571},[566,5759,5761],{"class":5760,"line":4715},[568,602],[566,5762,3839],{"class":571},[566,5764,5766,5768,5770,5772,5774,5776,5779,5781],{"class":5765,"line":4716},[568,602],[566,5767,1749],{"class":571},[566,5769,5281],{"class":575},[566,5771,2791],{"class":579},[566,5773,586],{"class":571},[566,5775,589],{"class":571},[566,5777,5778],{"class":592},"text-xs p-8 text-center bg-[#F6B03B] text-dark",[566,5780,589],{"class":571},[566,5782,598],{"class":571},[566,5784,5786,5789,5791,5793,5796,5799,5801,5803,5806,5808,5810,5812,5815,5817,5819],{"class":5785,"line":4717},[568,602],[566,5787,5788],{"class":612},"          CUSTOM ",[566,5790,572],{"class":571},[566,5792,909],{"class":575},[566,5794,5795],{"class":571}," />",[566,5797,5798],{"class":571}," \u003C",[566,5800,2714],{"class":575},[566,5802,2163],{"class":571},[566,5804,5805],{"class":612},"CIRCLE ",[566,5807,572],{"class":571},[566,5809,909],{"class":575},[566,5811,5795],{"class":571},[566,5813,5814],{"class":612}," GEOMETRY",[566,5816,669],{"class":571},[566,5818,2714],{"class":575},[566,5820,598],{"class":571},[566,5822,5824,5826,5828],{"class":568,"line":5823},85,[566,5825,5529],{"class":571},[566,5827,5281],{"class":575},[566,5829,598],{"class":571},[566,5831,5833,5835,5837],{"class":5832,"line":4718},[568,602],[566,5834,1803],{"class":571},[566,5836,3875],{"class":575},[566,5838,598],{"class":571},[566,5840,5842],{"class":5841,"line":4719},[568,602],[566,5843,634],{"emptyLinePlaceholder":500},[566,5845,5847,5849],{"class":5846,"line":4720},[568,602],[566,5848,716],{"class":571},[566,5850,3777],{"class":575},[566,5852,5854,5857,5859,5861,5864],{"class":5853,"line":4721},[568,602],[566,5855,5856],{"class":579},"        ref",[566,5858,586],{"class":571},[566,5860,589],{"class":571},[566,5862,5863],{"class":592},"targetDirectionLightRef",[566,5865,735],{"class":571},[566,5867,5869],{"class":5868,"line":4722},[568,602],[566,5870,3783],{"class":579},[566,5872,5874],{"class":5873,"line":4723},[568,602],[566,5875,3789],{"class":579},[566,5877,5879,5881,5883,5885,5887],{"class":5878,"line":4724},[568,602],[566,5880,5571],{"class":579},[566,5882,586],{"class":571},[566,5884,589],{"class":571},[566,5886,4666],{"class":592},[566,5888,735],{"class":571},[566,5890,5892,5894,5896,5898,5901],{"class":5891,"line":4725},[568,602],[566,5893,3810],{"class":579},[566,5895,586],{"class":571},[566,5897,589],{"class":571},[566,5899,5900],{"class":592},"[4, .5, -2]",[566,5902,735],{"class":571},[566,5904,5906,5909,5911,5913,5916],{"class":5905,"line":4726},[568,602],[566,5907,5908],{"class":579},"        :material",[566,5910,586],{"class":571},[566,5912,589],{"class":571},[566,5914,5915],{"class":592},"customMaterial",[566,5917,735],{"class":571},[566,5919,5921],{"class":5920,"line":4727},[568,602],[566,5922,5923],{"class":579},"        receive-shadow\n",[566,5925,5927,5929,5931,5933,5935],{"class":5926,"line":4728},[568,602],[566,5928,5599],{"class":579},[566,5930,586],{"class":571},[566,5932,589],{"class":571},[566,5934,4156],{"class":592},[566,5936,735],{"class":571},[566,5938,5940],{"class":568,"line":5939},97,[566,5941,3839],{"class":571},[566,5943,5945,5947,5949,5952,5954,5956,5959,5961,5964,5966],{"class":5944,"line":4729},[568,602],[566,5946,1749],{"class":571},[566,5948,5281],{"class":575},[566,5950,5951],{"class":579}," style",[566,5953,586],{"class":571},[566,5955,589],{"class":571},[566,5957,5958],{"class":592},"width: 100px; height: auto; aspect-ratio: 250/250;",[566,5960,589],{"class":571},[566,5962,5963],{"class":571},">\u003C/",[566,5965,5281],{"class":575},[566,5967,598],{"class":571},[566,5969,5971,5973,5975],{"class":5970,"line":4730},[568,602],[566,5972,1803],{"class":571},[566,5974,3875],{"class":575},[566,5976,598],{"class":571},[566,5978,5980],{"class":5979,"line":4731},[568,602],[566,5981,634],{"emptyLinePlaceholder":500},[566,5983,5985,5987],{"class":5984,"line":4732},[568,602],[566,5986,716],{"class":571},[566,5988,3777],{"class":575},[566,5990,5992],{"class":5991,"line":4733},[568,602],[566,5993,3783],{"class":579},[566,5995,5997],{"class":5996,"line":4734},[568,602],[566,5998,3789],{"class":579},[566,6000,6002,6004,6006,6008,6010],{"class":6001,"line":4735},[568,602],[566,6003,5571],{"class":579},[566,6005,586],{"class":571},[566,6007,589],{"class":571},[566,6009,4666],{"class":592},[566,6011,735],{"class":571},[566,6013,6015,6017,6019,6021,6024],{"class":6014,"line":4736},[568,602],[566,6016,3810],{"class":579},[566,6018,586],{"class":571},[566,6020,589],{"class":571},[566,6022,6023],{"class":592},"[4, 2.5, -2]",[566,6025,735],{"class":571},[566,6027,6029,6031,6033,6035,6037],{"class":6028,"line":4737},[568,602],[566,6030,5599],{"class":579},[566,6032,586],{"class":571},[566,6034,589],{"class":571},[566,6036,4156],{"class":592},[566,6038,735],{"class":571},[566,6040,6042],{"class":6041,"line":4738},[568,602],[566,6043,3839],{"class":571},[566,6045,6047,6049,6051,6053,6055,6057,6060,6062],{"class":6046,"line":4739},[568,602],[566,6048,1749],{"class":571},[566,6050,5281],{"class":575},[566,6052,2791],{"class":579},[566,6054,586],{"class":571},[566,6056,589],{"class":571},[566,6058,6059],{"class":592},"text-center text-xs p-2 text-dark bg-[#FF0000]",[566,6061,589],{"class":571},[566,6063,598],{"class":571},[566,6065,6067,6069,6071,6073,6076,6078,6080,6082,6084,6086],{"class":568,"line":6066},109,[566,6068,5486],{"class":571},[566,6070,2714],{"class":575},[566,6072,2163],{"class":571},[566,6074,6075],{"class":612},"HTML + Custom material ",[566,6077,669],{"class":571},[566,6079,2714],{"class":575},[566,6081,2163],{"class":571},[566,6083,5798],{"class":571},[566,6085,909],{"class":575},[566,6087,1689],{"class":571},[566,6089,6091,6093,6095,6097,6100,6102,6104,6106],{"class":568,"line":6090},110,[566,6092,5486],{"class":571},[566,6094,4461],{"class":575},[566,6096,2163],{"class":571},[566,6098,6099],{"class":612},"+ receive-shadow ",[566,6101,669],{"class":571},[566,6103,4461],{"class":575},[566,6105,2163],{"class":571},[566,6107,6108],{"class":612}," ⬇️\n",[566,6110,6112,6114,6116],{"class":568,"line":6111},111,[566,6113,5529],{"class":571},[566,6115,5281],{"class":575},[566,6117,598],{"class":571},[566,6119,6121,6123,6125],{"class":568,"line":6120},112,[566,6122,1803],{"class":571},[566,6124,3875],{"class":575},[566,6126,598],{"class":571},[566,6128,6130],{"class":568,"line":6129},113,[566,6131,634],{"emptyLinePlaceholder":500},[566,6133,6135,6137],{"class":568,"line":6134},114,[566,6136,716],{"class":571},[566,6138,6139],{"class":575},"TresDirectionalLight\n",[566,6141,6143,6146,6148,6150,6153],{"class":568,"line":6142},115,[566,6144,6145],{"class":579},"        v-if",[566,6147,586],{"class":571},[566,6149,589],{"class":571},[566,6151,6152],{"class":592},"targetDirectionLightRef?.instance",[566,6154,735],{"class":571},[566,6156,6158,6161,6163,6165,6167],{"class":568,"line":6157},116,[566,6159,6160],{"class":579},"        :target",[566,6162,586],{"class":571},[566,6164,589],{"class":571},[566,6166,6152],{"class":592},[566,6168,735],{"class":571},[566,6170,6172,6175,6177,6179,6182],{"class":568,"line":6171},117,[566,6173,6174],{"class":579},"        :shadow-normalBias",[566,6176,586],{"class":571},[566,6178,589],{"class":571},[566,6180,6181],{"class":592},"0.075",[566,6183,735],{"class":571},[566,6185,6187,6189,6191,6193,6196],{"class":568,"line":6186},118,[566,6188,3810],{"class":579},[566,6190,586],{"class":571},[566,6192,589],{"class":571},[566,6194,6195],{"class":592},"[5, 0, 5]",[566,6197,735],{"class":571},[566,6199,6201,6204,6206,6208,6211],{"class":568,"line":6200},119,[566,6202,6203],{"class":579},"        :intensity",[566,6205,586],{"class":571},[566,6207,589],{"class":571},[566,6209,6210],{"class":592},"2",[566,6212,735],{"class":571},[566,6214,6216],{"class":568,"line":6215},120,[566,6217,6218],{"class":579},"        cast-shadow\n",[566,6220,6222],{"class":568,"line":6221},121,[566,6223,771],{"class":571},[566,6225,6227],{"class":568,"line":6226},122,[566,6228,634],{"emptyLinePlaceholder":500},[566,6230,6232,6234,6236,6239,6241,6243,6246,6248],{"class":568,"line":6231},123,[566,6233,716],{"class":571},[566,6235,2429],{"class":575},[566,6237,6238],{"class":579}," :position-y",[566,6240,586],{"class":571},[566,6242,589],{"class":571},[566,6244,6245],{"class":592},"-1",[566,6247,589],{"class":571},[566,6249,1689],{"class":571},[566,6251,6253,6255,6257,6259,6261,6263,6265,6267],{"class":568,"line":6252},124,[566,6254,716],{"class":571},[566,6256,1827],{"class":575},[566,6258,1830],{"class":579},[566,6260,586],{"class":571},[566,6262,589],{"class":571},[566,6264,1783],{"class":592},[566,6266,589],{"class":571},[566,6268,1689],{"class":571},[566,6270,6272,6274,6276],{"class":568,"line":6271},125,[566,6273,777],{"class":571},[566,6275,697],{"class":575},[566,6277,598],{"class":571},[566,6279,6281,6283,6285],{"class":568,"line":6280},126,[566,6282,787],{"class":571},[566,6284,5281],{"class":575},[566,6286,598],{"class":571},[566,6288,6290,6292,6294],{"class":568,"line":6289},127,[566,6291,669],{"class":571},[566,6293,686],{"class":575},[566,6295,598],{"class":571},[566,6297,6299],{"class":568,"line":6298},128,[566,6300,634],{"emptyLinePlaceholder":500},[566,6302,6304,6306,6308,6310],{"class":568,"line":6303},129,[566,6305,572],{"class":571},[566,6307,1538],{"class":575},[566,6309,3926],{"class":579},[566,6311,598],{"class":571},[566,6313,6315,6317,6320],{"class":568,"line":6314},130,[566,6316,812],{"class":571},[566,6318,6319],{"class":2154},"html-demo-wrapper",[566,6321,2244],{"class":571},[566,6323,6325,6327,6329,6332],{"class":568,"line":6324},131,[566,6326,2924],{"class":3941},[566,6328,2235],{"class":571},[566,6330,6331],{"class":2305}," 100%",[566,6333,3953],{"class":571},[566,6335,6337,6339,6341,6343],{"class":568,"line":6336},132,[566,6338,2937],{"class":3941},[566,6340,2235],{"class":571},[566,6342,6331],{"class":2305},[566,6344,3953],{"class":571},[566,6346,6348,6351,6353,6356],{"class":568,"line":6347},133,[566,6349,6350],{"class":3941},"  position",[566,6352,2235],{"class":571},[566,6354,6355],{"class":612}," relative",[566,6357,3953],{"class":571},[566,6359,6361,6364,6366,6369],{"class":568,"line":6360},134,[566,6362,6363],{"class":3941},"  overflow",[566,6365,2235],{"class":571},[566,6367,6368],{"class":612}," hidden",[566,6370,3953],{"class":571},[566,6372,6374,6376,6378,6380,6383],{"class":568,"line":6373},135,[566,6375,3942],{"class":3941},[566,6377,2235],{"class":571},[566,6379,3947],{"class":571},[566,6381,6382],{"class":612},"82dbc5",[566,6384,3953],{"class":571},[566,6386,6388],{"class":568,"line":6387},136,[566,6389,2337],{"class":571},[566,6391,6393,6395,6397],{"class":568,"line":6392},137,[566,6394,669],{"class":571},[566,6396,1538],{"class":575},[566,6398,598],{"class":571},[548,6400,6402],{"id":6401},"custom-geometry","Custom Geometry",[484,6404,6405,6406,6409,6410,6413,6414,6417,6418,6421,6422,6427],{},"By default, when using ",[522,6407,6408],{},"occlude=\"blending\"",", occlusion works correctly only with ",[2714,6411,6412],{},"rectangular HTML elements"," (using a ",[522,6415,6416],{},"PlaneGeometry",").\nFor ",[4461,6419,6420],{},"non-rectangular content",", you can use the ",[2714,6423,6424],{},[522,6425,6426],{},"geometry"," prop to provide a matching custom geometry.",[484,6429,6430,6431,914,6434,6437,6438,6445,6446,812],{},"In the ",[2714,6432,6433],{},"demo above ⬆️",[4461,6435,6436],{},"(middle yellow example)",", a ",[527,6439,6442],{"href":6440,"rel":6441},"https://threejs.org/docs/#api/en/geometries/CircleGeometry",[531],[522,6443,6444],{},"CircleGeometry"," is used as a ",[2714,6447,6448],{},"custom geometry",[6450,6451,6452],"prose-list",{},[538,6453,6454,6463],{},[541,6455,1355,6456,6458,6459,6462],{},[522,6457,6426],{}," prop only defines the ",[2714,6460,6461],{},"occlusion shape"," in 3D and does not modify your HTML content.",[541,6464,6465,6466,6473,6474,6477,6478,6481,6482,6489],{},"You can provide any ",[527,6467,6470],{"href":6468,"rel":6469},"https://threejs.org/docs/#api/en/core/BufferGeometry",[531],[522,6471,6472],{},"BufferGeometry",", for example to simulate ",[2714,6475,6476],{},"CSS-like styles"," such as ",[522,6479,6480],{},"border-radius"," using a rounded rectangle or squircle geometry (see ",[527,6483,6486],{"href":6484,"rel":6485},"https://discourse.threejs.org/t/roundedrectangle-squircle/28645",[531],[522,6487,6488],{},"RoundedRectangle / Squircle geometry"," for example).",[890,6491,6493],{"id":6492},"custom-material","Custom Material",[484,6495,6496,6497,6500,6501,914,6503,6437,6506,6509],{},"You can also assign material properties to the HTML content using the ",[522,6498,6499],{},"material"," prop.\nIn the ",[2714,6502,6433],{},[4461,6504,6505],{},"(right red example)",[2714,6507,6508],{},"custom material"," is used with shadow.",[6511,6512,6513],"prose-note",{},[484,6514,1355,6515,6517,6518,6520,6521,812],{},[522,6516,6499],{}," prop is only available when ",[522,6519,6408],{}," is ",[2714,6522,6523],{},"enabled",[6511,6525,6526],{},[484,6527,6528,6529,3445,6534,6539,6540,6543,6544,6546,6547,6550,6551,6556,6557,6562,6563],{},"Enable shadows using the ",[2714,6530,6531],{},[522,6532,6533],{},"castShadow",[2714,6535,6536],{},[522,6537,6538],{},"receiveShadow"," props.\nShadows are supported ",[2714,6541,6542],{},"only"," when using a ",[2714,6545,6508],{},". By default, shadows do ",[2714,6548,6549],{},"not"," work with ",[4461,6552,6553],{},[522,6554,6555],{},"MeshBasicMaterial"," or ",[4461,6558,6559],{},[522,6560,6561],{},"ShaderMaterial",". ",[909,6564],{},[548,6566,6568,6569],{"id":6567},"using-transition","Using ",[522,6570,6571],{},"\u003CTransition>",[484,6573,6574,6575,6581,6582,6584,6585,6588,6589,3445,6592,6595],{},"The native Vue ",[527,6576,6579],{"href":6577,"rel":6578},"https://vuejs.org/guide/built-ins/transition",[531],[522,6580,6571],{}," component works seamlessly with ",[522,6583,3592],{},".\nThis means you can ",[2714,6586,6587],{},"animate"," how your projected HTML content ",[4461,6590,6591],{},"enters",[4461,6593,6594],{},"leaves"," the scene, exactly as you would in a regular Vue application.",[6511,6597,6598],{},[484,6599,6600,6601,6604,6605,6608,6609,6611,6612,6615],{},"All ",[2714,6602,6603],{},"standard interactions"," are supported just like on a regular HTML element — ",[2714,6606,6607],{},"hover effects",", ",[2714,6610,1278],{},", and ",[4461,6613,6614],{},"any kind of DOM interaction"," are fully possible.",[514,6617,6618],{},[6619,6620],"objects-html-transition-demo",{},[4062,6622,4064,6623,6625],{},[4066,6624,4068],{},[552,6626,6629],{"className":554,"code":6627,"highlights":6628,"language":562,"meta":492,"style":492},"\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",[494,5674,4707,4708,4709,4710,4711,4712,4713,4714,4715,4716,4717,5823,4718,4719,4720,4721,4722,4723,4724],[522,6630,6631,6651,6678,6696,6714,6718,6728,6742,6753,6763,6773,6784,6788,6792,6813,6817,6839,6843,6853,6857,6871,6893,6897,6901,6915,6937,6941,6945,6959,6985,6989,6993,7008,7031,7035,7039,7043,7063,7136,7178,7203,7207,7211,7227,7243,7247,7255,7259,7267,7296,7325,7343,7362,7366,7372,7384,7396,7408,7420,7432,7445,7449,7468,7496,7504,7512,7520,7524,7530,7534,7538,7550,7563,7577,7590,7595,7617,7625,7640,7655,7670,7685,7691,7715,7733,7743,7752,7761,7766,7786,7805,7814,7823,7831,7835,7845,7853,7863,7873,7883,7893,7905,7909,7913,7927,7945,7949,7953,7962,7971,7981,7997,8001,8005,8014,8023,8041,8045,8049,8058,8067,8077,8091,8095],{"__ignoreMap":492},[566,6632,6633,6635,6637,6639,6641,6643,6645,6647,6649],{"class":568,"line":493},[566,6634,572],{"class":571},[566,6636,576],{"class":575},[566,6638,580],{"class":579},[566,6640,583],{"class":579},[566,6642,586],{"class":571},[566,6644,589],{"class":571},[566,6646,593],{"class":592},[566,6648,589],{"class":571},[566,6650,598],{"class":571},[566,6652,6654,6656,6658,6660,6662,6664,6666,6668,6670,6672,6674,6676],{"class":6653,"line":494},[568,602],[566,6655,606],{"class":605},[566,6657,609],{"class":571},[566,6659,3636],{"class":612},[566,6661,1626],{"class":571},[566,6663,4775],{"class":612},[566,6665,1626],{"class":571},[566,6667,1629],{"class":612},[566,6669,616],{"class":571},[566,6671,619],{"class":605},[566,6673,622],{"class":571},[566,6675,625],{"class":592},[566,6677,628],{"class":571},[566,6679,6680,6682,6684,6686,6688,6690,6692,6694],{"class":568,"line":631},[566,6681,606],{"class":605},[566,6683,609],{"class":571},[566,6685,2105],{"class":612},[566,6687,616],{"class":571},[566,6689,619],{"class":605},[566,6691,622],{"class":571},[566,6693,2094],{"class":592},[566,6695,628],{"class":571},[566,6697,6698,6700,6702,6704,6706,6708,6710,6712],{"class":568,"line":637},[566,6699,606],{"class":605},[566,6701,609],{"class":571},[566,6703,649],{"class":612},[566,6705,616],{"class":571},[566,6707,619],{"class":605},[566,6709,622],{"class":571},[566,6711,562],{"class":592},[566,6713,628],{"class":571},[566,6715,6716],{"class":568,"line":666},[566,6717,634],{"emptyLinePlaceholder":500},[566,6719,6720,6722,6724,6726],{"class":568,"line":676},[566,6721,640],{"class":579},[566,6723,4861],{"class":612},[566,6725,586],{"class":571},[566,6727,2244],{"class":571},[566,6729,6730,6732,6734,6736,6738,6740],{"class":568,"line":681},[566,6731,4870],{"class":575},[566,6733,2235],{"class":571},[566,6735,622],{"class":571},[566,6737,3704],{"class":592},[566,6739,655],{"class":571},[566,6741,2918],{"class":571},[566,6743,6744,6746,6748,6751],{"class":568,"line":691},[566,6745,4885],{"class":575},[566,6747,2235],{"class":571},[566,6749,6750],{"class":2305}," 0",[566,6752,2918],{"class":571},[566,6754,6755,6757,6759,6761],{"class":568,"line":702},[566,6756,4896],{"class":575},[566,6758,2235],{"class":571},[566,6760,2915],{"class":2914},[566,6762,2918],{"class":571},[566,6764,6765,6767,6769,6771],{"class":568,"line":557},[566,6766,4907],{"class":575},[566,6768,2235],{"class":571},[566,6770,2915],{"class":2914},[566,6772,2918],{"class":571},[566,6774,6775,6778,6780,6782],{"class":568,"line":558},[566,6776,6777],{"class":575},"  antialias",[566,6779,2235],{"class":571},[566,6781,2915],{"class":2914},[566,6783,2918],{"class":571},[566,6785,6786],{"class":568,"line":559},[566,6787,2337],{"class":571},[566,6789,6790],{"class":568,"line":560},[566,6791,634],{"emptyLinePlaceholder":500},[566,6793,6794,6796,6799,6801,6803,6805,6808,6810],{"class":568,"line":561},[566,6795,640],{"class":579},[566,6797,6798],{"class":612}," rootRef ",[566,6800,586],{"class":571},[566,6802,649],{"class":648},[566,6804,572],{"class":571},[566,6806,6807],{"class":2154},"HTMLElement",[566,6809,2163],{"class":571},[566,6811,6812],{"class":612},"()\n",[566,6814,6815],{"class":568,"line":774},[566,6816,634],{"emptyLinePlaceholder":500},[566,6818,6819,6821,6824,6826,6828,6830,6832,6835,6837],{"class":568,"line":784},[566,6820,640],{"class":579},[566,6822,6823],{"class":612}," bgColor ",[566,6825,586],{"class":571},[566,6827,649],{"class":648},[566,6829,652],{"class":612},[566,6831,655],{"class":571},[566,6833,6834],{"class":592},"#F6B03B",[566,6836,655],{"class":571},[566,6838,663],{"class":612},[566,6840,6841],{"class":568,"line":794},[566,6842,634],{"emptyLinePlaceholder":500},[566,6844,6845,6847,6849,6851],{"class":568,"line":1844},[566,6846,640],{"class":579},[566,6848,4949],{"class":612},[566,6850,586],{"class":571},[566,6852,4954],{"class":612},[566,6854,6855],{"class":568,"line":1865},[566,6856,4959],{"class":571},[566,6858,6859,6861,6863,6865,6867,6869],{"class":568,"line":1874},[566,6860,4964],{"class":575},[566,6862,2235],{"class":571},[566,6864,622],{"class":571},[566,6866,2517],{"class":592},[566,6868,655],{"class":571},[566,6870,2918],{"class":571},[566,6872,6873,6875,6877,6879,6881,6883,6885,6887,6889,6891],{"class":568,"line":2419},[566,6874,4979],{"class":575},[566,6876,2235],{"class":571},[566,6878,4984],{"class":612},[566,6880,1783],{"class":2305},[566,6882,1626],{"class":571},[566,6884,2964],{"class":2305},[566,6886,1626],{"class":571},[566,6888,2964],{"class":2305},[566,6890,4997],{"class":612},[566,6892,2918],{"class":571},[566,6894,6895],{"class":568,"line":2424},[566,6896,2972],{"class":571},[566,6898,6899],{"class":568,"line":2024},[566,6900,4959],{"class":571},[566,6902,6903,6905,6907,6909,6911,6913],{"class":568,"line":2025},[566,6904,4964],{"class":575},[566,6906,2235],{"class":571},[566,6908,622],{"class":571},[566,6910,1752],{"class":592},[566,6912,655],{"class":571},[566,6914,2918],{"class":571},[566,6916,6917,6919,6921,6923,6925,6927,6929,6931,6933,6935],{"class":568,"line":2026},[566,6918,4979],{"class":575},[566,6920,2235],{"class":571},[566,6922,4984],{"class":612},[566,6924,5032],{"class":2305},[566,6926,1626],{"class":571},[566,6928,5037],{"class":2305},[566,6930,1626],{"class":571},[566,6932,5037],{"class":2305},[566,6934,4997],{"class":612},[566,6936,2918],{"class":571},[566,6938,6939],{"class":568,"line":2027},[566,6940,2972],{"class":571},[566,6942,6943],{"class":568,"line":2497},[566,6944,4959],{"class":571},[566,6946,6947,6949,6951,6953,6955,6957],{"class":568,"line":2503},[566,6948,4964],{"class":575},[566,6950,2235],{"class":571},[566,6952,622],{"class":571},[566,6954,2642],{"class":592},[566,6956,655],{"class":571},[566,6958,2918],{"class":571},[566,6960,6961,6963,6965,6967,6969,6971,6973,6975,6977,6979,6981,6983],{"class":568,"line":2512},[566,6962,4979],{"class":575},[566,6964,2235],{"class":571},[566,6966,4984],{"class":612},[566,6968,1837],{"class":2305},[566,6970,1626],{"class":571},[566,6972,5082],{"class":2305},[566,6974,1626],{"class":571},[566,6976,5087],{"class":2305},[566,6978,1626],{"class":571},[566,6980,5092],{"class":2305},[566,6982,4997],{"class":612},[566,6984,2918],{"class":571},[566,6986,6987],{"class":568,"line":2533},[566,6988,2972],{"class":571},[566,6990,6991],{"class":568,"line":2538},[566,6992,4959],{"class":571},[566,6994,6995,6997,6999,7001,7004,7006],{"class":568,"line":2546},[566,6996,4964],{"class":575},[566,6998,2235],{"class":571},[566,7000,622],{"class":571},[566,7002,7003],{"class":592},"TresConeGeometry",[566,7005,655],{"class":571},[566,7007,2918],{"class":571},[566,7009,7010,7012,7014,7016,7018,7020,7023,7025,7027,7029],{"class":568,"line":2561},[566,7011,4979],{"class":575},[566,7013,2235],{"class":571},[566,7015,4984],{"class":612},[566,7017,5032],{"class":2305},[566,7019,1626],{"class":571},[566,7021,7022],{"class":2305}," 1.4",[566,7024,1626],{"class":571},[566,7026,5037],{"class":2305},[566,7028,4997],{"class":612},[566,7030,2918],{"class":571},[566,7032,7033],{"class":568,"line":2576},[566,7034,2972],{"class":571},[566,7036,7037],{"class":568,"line":2581},[566,7038,5133],{"class":612},[566,7040,7041],{"class":568,"line":2590},[566,7042,634],{"emptyLinePlaceholder":500},[566,7044,7045,7047,7050,7052,7055,7058,7061],{"class":568,"line":2595},[566,7046,640],{"class":579},[566,7048,7049],{"class":612}," getRandomBackgroundColor ",[566,7051,586],{"class":571},[566,7053,7054],{"class":571}," ():",[566,7056,7057],{"class":2154}," string",[566,7059,7060],{"class":579}," =>",[566,7062,2244],{"class":571},[566,7064,7065,7068,7071,7073,7075,7077,7079,7081,7083,7085,7087,7089,7091,7093,7096,7098,7100,7102,7105,7107,7109,7111,7114,7116,7118,7120,7123,7125,7127,7129,7132,7134],{"class":568,"line":2603},[566,7066,7067],{"class":579},"  const",[566,7069,7070],{"class":612}," colors",[566,7072,2297],{"class":571},[566,7074,4984],{"class":575},[566,7076,655],{"class":571},[566,7078,6834],{"class":592},[566,7080,655],{"class":571},[566,7082,1626],{"class":571},[566,7084,622],{"class":571},[566,7086,3704],{"class":592},[566,7088,655],{"class":571},[566,7090,1626],{"class":571},[566,7092,622],{"class":571},[566,7094,7095],{"class":592},"#FF5733",[566,7097,655],{"class":571},[566,7099,1626],{"class":571},[566,7101,622],{"class":571},[566,7103,7104],{"class":592},"#33FF57",[566,7106,655],{"class":571},[566,7108,1626],{"class":571},[566,7110,622],{"class":571},[566,7112,7113],{"class":592},"#3357FF",[566,7115,655],{"class":571},[566,7117,1626],{"class":571},[566,7119,622],{"class":571},[566,7121,7122],{"class":592},"#F333FF",[566,7124,655],{"class":571},[566,7126,1626],{"class":571},[566,7128,622],{"class":571},[566,7130,7131],{"class":592},"#33FFF5",[566,7133,655],{"class":571},[566,7135,5133],{"class":575},[566,7137,7138,7140,7143,7145,7148,7150,7153,7155,7158,7160,7163,7166,7169,7171,7173,7176],{"class":568,"line":2616},[566,7139,7067],{"class":579},[566,7141,7142],{"class":612}," idx",[566,7144,2297],{"class":571},[566,7146,7147],{"class":612}," Math",[566,7149,812],{"class":571},[566,7151,7152],{"class":648},"floor",[566,7154,652],{"class":575},[566,7156,7157],{"class":612},"Math",[566,7159,812],{"class":571},[566,7161,7162],{"class":648},"random",[566,7164,7165],{"class":575},"() ",[566,7167,7168],{"class":571},"*",[566,7170,7070],{"class":612},[566,7172,812],{"class":571},[566,7174,7175],{"class":612},"length",[566,7177,663],{"class":575},[566,7179,7180,7183,7185,7188,7191,7194,7197,7199,7201],{"class":568,"line":2631},[566,7181,7182],{"class":605},"  return",[566,7184,7070],{"class":612},[566,7186,7187],{"class":575},"[",[566,7189,7190],{"class":612},"idx",[566,7192,7193],{"class":575},"] ",[566,7195,7196],{"class":571},"??",[566,7198,622],{"class":571},[566,7200,6834],{"class":592},[566,7202,628],{"class":571},[566,7204,7205],{"class":568,"line":2637},[566,7206,2337],{"class":571},[566,7208,7209],{"class":568,"line":2658},[566,7210,634],{"emptyLinePlaceholder":500},[566,7212,7213,7215,7218,7220,7223,7225],{"class":568,"line":2668},[566,7214,640],{"class":579},[566,7216,7217],{"class":612}," updateBackgroundColor ",[566,7219,586],{"class":571},[566,7221,7222],{"class":571}," ()",[566,7224,7060],{"class":579},[566,7226,2244],{"class":571},[566,7228,7229,7232,7234,7236,7238,7241],{"class":568,"line":2677},[566,7230,7231],{"class":612},"  bgColor",[566,7233,812],{"class":571},[566,7235,2263],{"class":612},[566,7237,2297],{"class":571},[566,7239,7240],{"class":648}," getRandomBackgroundColor",[566,7242,6812],{"class":575},[566,7244,7245],{"class":568,"line":2686},[566,7246,2337],{"class":571},[566,7248,7249,7251,7253],{"class":568,"line":5336},[566,7250,669],{"class":571},[566,7252,576],{"class":575},[566,7254,598],{"class":571},[566,7256,7257],{"class":568,"line":5345},[566,7258,634],{"emptyLinePlaceholder":500},[566,7260,7261,7263,7265],{"class":568,"line":5350},[566,7262,572],{"class":571},[566,7264,686],{"class":575},[566,7266,598],{"class":571},[566,7268,7269,7271,7273,7275,7277,7279,7282,7284,7286,7288,7290,7292,7294],{"class":568,"line":5358},[566,7270,694],{"class":571},[566,7272,5281],{"class":575},[566,7274,649],{"class":579},[566,7276,586],{"class":571},[566,7278,589],{"class":571},[566,7280,7281],{"class":592},"rootRef",[566,7283,589],{"class":571},[566,7285,2791],{"class":579},[566,7287,586],{"class":571},[566,7289,589],{"class":571},[566,7291,6319],{"class":592},[566,7293,589],{"class":571},[566,7295,598],{"class":571},[566,7297,7298,7300,7302,7304,7306,7308,7310,7312,7314,7316,7318,7321,7323],{"class":568,"line":5373},[566,7299,705],{"class":571},[566,7301,697],{"class":575},[566,7303,5303],{"class":579},[566,7305,586],{"class":571},[566,7307,589],{"class":571},[566,7309,5310],{"class":592},[566,7311,589],{"class":571},[566,7313,2791],{"class":579},[566,7315,586],{"class":571},[566,7317,589],{"class":571},[566,7319,7320],{"class":592},"!pointer-events-none",[566,7322,589],{"class":571},[566,7324,598],{"class":571},[566,7326,7327,7329,7331,7333,7335,7337,7339,7341],{"class":568,"line":5388},[566,7328,716],{"class":571},[566,7330,1674],{"class":575},[566,7332,1677],{"class":579},[566,7334,586],{"class":571},[566,7336,589],{"class":571},[566,7338,5329],{"class":592},[566,7340,589],{"class":571},[566,7342,1689],{"class":571},[566,7344,7345,7347,7349,7352,7354,7356,7358,7360],{"class":568,"line":5403},[566,7346,716],{"class":571},[566,7348,1696],{"class":575},[566,7350,7351],{"class":579}," :dom-element",[566,7353,586],{"class":571},[566,7355,589],{"class":571},[566,7357,7281],{"class":592},[566,7359,589],{"class":571},[566,7361,1689],{"class":571},[566,7363,7364],{"class":568,"line":5418},[566,7365,634],{"emptyLinePlaceholder":500},[566,7367,7368,7370],{"class":568,"line":5432},[566,7369,716],{"class":571},[566,7371,5355],{"class":575},[566,7373,7374,7376,7378,7380,7382],{"class":568,"line":5447},[566,7375,5361],{"class":579},[566,7377,586],{"class":571},[566,7379,589],{"class":571},[566,7381,5368],{"class":592},[566,7383,735],{"class":571},[566,7385,7386,7388,7390,7392,7394],{"class":568,"line":5452},[566,7387,5376],{"class":579},[566,7389,586],{"class":571},[566,7391,589],{"class":571},[566,7393,5383],{"class":592},[566,7395,735],{"class":571},[566,7397,7398,7400,7402,7404,7406],{"class":568,"line":5483},[566,7399,5391],{"class":579},[566,7401,586],{"class":571},[566,7403,589],{"class":571},[566,7405,5398],{"class":592},[566,7407,735],{"class":571},[566,7409,7410,7412,7414,7416,7418],{"class":568,"line":5517},[566,7411,5406],{"class":579},[566,7413,586],{"class":571},[566,7415,589],{"class":571},[566,7417,5413],{"class":592},[566,7419,735],{"class":571},[566,7421,7422,7424,7426,7428,7430],{"class":568,"line":5526},[566,7423,5421],{"class":579},[566,7425,586],{"class":571},[566,7427,589],{"class":571},[566,7429,1783],{"class":592},[566,7431,735],{"class":571},[566,7433,7434,7436,7438,7440,7443],{"class":568,"line":5536},[566,7435,5435],{"class":579},[566,7437,586],{"class":571},[566,7439,589],{"class":571},[566,7441,7442],{"class":592},"[-0.4, 0.4]",[566,7444,735],{"class":571},[566,7446,7447],{"class":568,"line":5546},[566,7448,3839],{"class":571},[566,7450,7451,7453,7455,7457,7459,7461,7464,7466],{"class":568,"line":4696},[566,7452,1749],{"class":571},[566,7454,1742],{"class":575},[566,7456,1677],{"class":579},[566,7458,586],{"class":571},[566,7460,589],{"class":571},[566,7462,7463],{"class":592},"[(index - (geometries.length - 1) / 2) * 2, 1, 0]",[566,7465,589],{"class":571},[566,7467,598],{"class":571},[566,7469,7470,7472,7474,7476,7478,7480,7482,7484,7486,7488,7490,7492,7494],{"class":568,"line":4697},[566,7471,5486],{"class":571},[566,7473,5489],{"class":575},[566,7475,5492],{"class":579},[566,7477,586],{"class":571},[566,7479,589],{"class":571},[566,7481,5499],{"class":592},[566,7483,589],{"class":571},[566,7485,1755],{"class":579},[566,7487,586],{"class":571},[566,7489,589],{"class":571},[566,7491,5510],{"class":592},[566,7493,589],{"class":571},[566,7495,1689],{"class":571},[566,7497,7498,7500,7502],{"class":568,"line":4698},[566,7499,5486],{"class":571},[566,7501,2663],{"class":575},[566,7503,1689],{"class":571},[566,7505,7506,7508,7510],{"class":568,"line":4699},[566,7507,5529],{"class":571},[566,7509,1742],{"class":575},[566,7511,598],{"class":571},[566,7513,7514,7516,7518],{"class":568,"line":4700},[566,7515,1803],{"class":571},[566,7517,5541],{"class":575},[566,7519,598],{"class":571},[566,7521,7522],{"class":568,"line":4701},[566,7523,634],{"emptyLinePlaceholder":500},[566,7525,7526,7528],{"class":568,"line":4702},[566,7527,716],{"class":571},[566,7529,3777],{"class":575},[566,7531,7532],{"class":568,"line":4703},[566,7533,3783],{"class":579},[566,7535,7536],{"class":568,"line":4704},[566,7537,3789],{"class":579},[566,7539,7540,7542,7544,7546,7548],{"class":568,"line":4705},[566,7541,5571],{"class":579},[566,7543,586],{"class":571},[566,7545,589],{"class":571},[566,7547,4666],{"class":592},[566,7549,735],{"class":571},[566,7551,7552,7554,7556,7558,7561],{"class":568,"line":4706},[566,7553,3810],{"class":579},[566,7555,586],{"class":571},[566,7557,589],{"class":571},[566,7559,7560],{"class":592},"[0, .75, -2]",[566,7562,735],{"class":571},[566,7564,7566,7568,7570,7572,7575],{"class":7565,"line":5674},[568,602],[566,7567,3825],{"class":579},[566,7569,586],{"class":571},[566,7571,589],{"class":571},[566,7573,7574],{"class":592},"1.15",[566,7576,735],{"class":571},[566,7578,7580,7582,7584,7586,7588],{"class":7579,"line":4707},[568,602],[566,7581,5599],{"class":579},[566,7583,586],{"class":571},[566,7585,589],{"class":571},[566,7587,4156],{"class":592},[566,7589,735],{"class":571},[566,7591,7593],{"class":7592,"line":4708},[568,602],[566,7594,3839],{"class":571},[566,7596,7598,7600,7603,7606,7608,7610,7613,7615],{"class":7597,"line":4709},[568,602],[566,7599,1749],{"class":571},[566,7601,7602],{"class":575},"Transition",[566,7604,7605],{"class":579}," name",[566,7607,586],{"class":571},[566,7609,589],{"class":571},[566,7611,7612],{"class":592},"transition-basic",[566,7614,589],{"class":571},[566,7616,598],{"class":571},[566,7618,7620,7622],{"class":7619,"line":4710},[568,602],[566,7621,5486],{"class":571},[566,7623,7624],{"class":575},"h1\n",[566,7626,7628,7631,7633,7635,7638],{"class":7627,"line":4711},[568,602],[566,7629,7630],{"class":579},"            v-if",[566,7632,586],{"class":571},[566,7634,589],{"class":571},[566,7636,7637],{"class":592},"showTransition",[566,7639,735],{"class":571},[566,7641,7643,7646,7648,7650,7653],{"class":7642,"line":4712},[568,602],[566,7644,7645],{"class":579},"            :style",[566,7647,586],{"class":571},[566,7649,589],{"class":571},[566,7651,7652],{"class":592},"{ backgroundColor: bgColor }",[566,7654,735],{"class":571},[566,7656,7658,7661,7663,7665,7668],{"class":7657,"line":4713},[568,602],[566,7659,7660],{"class":579},"            class",[566,7662,586],{"class":571},[566,7664,589],{"class":571},[566,7666,7667],{"class":592},"html-demo-transition-heading will-change-transform transition-transform,background-color cursor-pointer duration-500 text-center p-2 text-light shadow-lg",[566,7669,735],{"class":571},[566,7671,7673,7676,7678,7680,7683],{"class":7672,"line":4714},[568,602],[566,7674,7675],{"class":579},"            @click",[566,7677,586],{"class":571},[566,7679,589],{"class":571},[566,7681,7682],{"class":592},"updateBackgroundColor",[566,7684,735],{"class":571},[566,7686,7688],{"class":7687,"line":4715},[568,602],[566,7689,7690],{"class":571},"          >\n",[566,7692,7694,7697,7699,7701,7704,7706,7708,7711,7713],{"class":7693,"line":4716},[568,602],[566,7695,7696],{"class":571},"            \u003C",[566,7698,2714],{"class":575},[566,7700,2163],{"class":571},[566,7702,7703],{"class":612},"TRANSITION + ",[566,7705,669],{"class":571},[566,7707,2714],{"class":575},[566,7709,7710],{"class":571},">\u003C",[566,7712,909],{"class":575},[566,7714,1689],{"class":571},[566,7716,7718,7720,7722,7724,7727,7729,7731],{"class":7717,"line":4717},[568,602],[566,7719,7696],{"class":571},[566,7721,4461],{"class":575},[566,7723,2163],{"class":571},[566,7725,7726],{"class":612},"occlude=blending 💛",[566,7728,669],{"class":571},[566,7730,4461],{"class":575},[566,7732,598],{"class":571},[566,7734,7736,7739,7741],{"class":7735,"line":5823},[568,602],[566,7737,7738],{"class":571},"          \u003C/",[566,7740,3846],{"class":575},[566,7742,598],{"class":571},[566,7744,7746,7748,7750],{"class":7745,"line":4718},[568,602],[566,7747,5529],{"class":571},[566,7749,7602],{"class":575},[566,7751,598],{"class":571},[566,7753,7755,7757,7759],{"class":7754,"line":4719},[568,602],[566,7756,1803],{"class":571},[566,7758,3875],{"class":575},[566,7760,598],{"class":571},[566,7762,7764],{"class":7763,"line":4720},[568,602],[566,7765,634],{"emptyLinePlaceholder":500},[566,7767,7769,7771,7773,7775,7777,7779,7782,7784],{"class":7768,"line":4721},[568,602],[566,7770,716],{"class":571},[566,7772,2429],{"class":575},[566,7774,6238],{"class":579},[566,7776,586],{"class":571},[566,7778,589],{"class":571},[566,7780,7781],{"class":592},"-1.25",[566,7783,589],{"class":571},[566,7785,1689],{"class":571},[566,7787,7789,7791,7793,7795,7797,7799,7801,7803],{"class":7788,"line":4722},[568,602],[566,7790,716],{"class":571},[566,7792,1827],{"class":575},[566,7794,1830],{"class":579},[566,7796,586],{"class":571},[566,7798,589],{"class":571},[566,7800,1783],{"class":592},[566,7802,589],{"class":571},[566,7804,1689],{"class":571},[566,7806,7808,7810,7812],{"class":7807,"line":4723},[568,602],[566,7809,777],{"class":571},[566,7811,697],{"class":575},[566,7813,598],{"class":571},[566,7815,7817,7819,7821],{"class":7816,"line":4724},[568,602],[566,7818,787],{"class":571},[566,7820,5281],{"class":575},[566,7822,598],{"class":571},[566,7824,7825,7827,7829],{"class":568,"line":4725},[566,7826,669],{"class":571},[566,7828,686],{"class":575},[566,7830,598],{"class":571},[566,7832,7833],{"class":568,"line":4726},[566,7834,634],{"emptyLinePlaceholder":500},[566,7836,7837,7839,7841,7843],{"class":568,"line":4727},[566,7838,572],{"class":571},[566,7840,1538],{"class":575},[566,7842,3926],{"class":579},[566,7844,598],{"class":571},[566,7846,7847,7849,7851],{"class":568,"line":4728},[566,7848,812],{"class":571},[566,7850,6319],{"class":2154},[566,7852,2244],{"class":571},[566,7854,7855,7857,7859,7861],{"class":568,"line":5939},[566,7856,2924],{"class":3941},[566,7858,2235],{"class":571},[566,7860,6331],{"class":2305},[566,7862,3953],{"class":571},[566,7864,7865,7867,7869,7871],{"class":568,"line":4729},[566,7866,2937],{"class":3941},[566,7868,2235],{"class":571},[566,7870,6331],{"class":2305},[566,7872,3953],{"class":571},[566,7874,7875,7877,7879,7881],{"class":568,"line":4730},[566,7876,6350],{"class":3941},[566,7878,2235],{"class":571},[566,7880,6355],{"class":612},[566,7882,3953],{"class":571},[566,7884,7885,7887,7889,7891],{"class":568,"line":4731},[566,7886,6363],{"class":3941},[566,7888,2235],{"class":571},[566,7890,6368],{"class":612},[566,7892,3953],{"class":571},[566,7894,7895,7897,7899,7901,7903],{"class":568,"line":4732},[566,7896,3942],{"class":3941},[566,7898,2235],{"class":571},[566,7900,3947],{"class":571},[566,7902,6382],{"class":612},[566,7904,3953],{"class":571},[566,7906,7907],{"class":568,"line":4733},[566,7908,2337],{"class":571},[566,7910,7911],{"class":568,"line":4734},[566,7912,634],{"emptyLinePlaceholder":500},[566,7914,7915,7917,7920,7922,7925],{"class":568,"line":4735},[566,7916,812],{"class":571},[566,7918,7919],{"class":2154},"html-demo-transition-heading",[566,7921,2235],{"class":571},[566,7923,7924],{"class":579},"hover",[566,7926,2244],{"class":571},[566,7928,7929,7932,7934,7937,7939,7942],{"class":568,"line":4736},[566,7930,7931],{"class":3941},"  transform",[566,7933,2235],{"class":571},[566,7935,7936],{"class":648}," scale",[566,7938,652],{"class":571},[566,7940,7941],{"class":2305},"1.05",[566,7943,7944],{"class":571},");\n",[566,7946,7947],{"class":568,"line":4737},[566,7948,2337],{"class":571},[566,7950,7951],{"class":568,"line":4738},[566,7952,634],{"emptyLinePlaceholder":500},[566,7954,7955,7957,7960],{"class":568,"line":4739},[566,7956,812],{"class":571},[566,7958,7959],{"class":2154},"transition-basic-enter-from",[566,7961,2918],{"class":571},[566,7963,7964,7966,7969],{"class":568,"line":6066},[566,7965,812],{"class":571},[566,7967,7968],{"class":2154},"transition-basic-leave-to",[566,7970,2244],{"class":571},[566,7972,7973,7975,7977,7979],{"class":568,"line":6090},[566,7974,5229],{"class":3941},[566,7976,2235],{"class":571},[566,7978,6750],{"class":2305},[566,7980,3953],{"class":571},[566,7982,7983,7985,7987,7990,7992,7995],{"class":568,"line":6111},[566,7984,7931],{"class":3941},[566,7986,2235],{"class":571},[566,7988,7989],{"class":648}," translateY",[566,7991,652],{"class":571},[566,7993,7994],{"class":2305},"-20px",[566,7996,7944],{"class":571},[566,7998,7999],{"class":568,"line":6120},[566,8000,2337],{"class":571},[566,8002,8003],{"class":568,"line":6129},[566,8004,634],{"emptyLinePlaceholder":500},[566,8006,8007,8009,8012],{"class":568,"line":6134},[566,8008,812],{"class":571},[566,8010,8011],{"class":2154},"transition-basic-enter-active",[566,8013,2918],{"class":571},[566,8015,8016,8018,8021],{"class":568,"line":6142},[566,8017,812],{"class":571},[566,8019,8020],{"class":2154},"transition-basic-leave-active",[566,8022,2244],{"class":571},[566,8024,8025,8028,8030,8033,8036,8039],{"class":568,"line":6157},[566,8026,8027],{"class":3941},"  transition",[566,8029,2235],{"class":571},[566,8031,8032],{"class":612}," all ",[566,8034,8035],{"class":2305},"0.5s",[566,8037,8038],{"class":612}," ease",[566,8040,3953],{"class":571},[566,8042,8043],{"class":568,"line":6171},[566,8044,2337],{"class":571},[566,8046,8047],{"class":568,"line":6186},[566,8048,634],{"emptyLinePlaceholder":500},[566,8050,8051,8053,8056],{"class":568,"line":6200},[566,8052,812],{"class":571},[566,8054,8055],{"class":2154},"transition-basic-enter-to",[566,8057,2918],{"class":571},[566,8059,8060,8062,8065],{"class":568,"line":6215},[566,8061,812],{"class":571},[566,8063,8064],{"class":2154},"transition-basic-leave-from",[566,8066,2244],{"class":571},[566,8068,8069,8071,8073,8075],{"class":568,"line":6221},[566,8070,5229],{"class":3941},[566,8072,2235],{"class":571},[566,8074,2964],{"class":2305},[566,8076,3953],{"class":571},[566,8078,8079,8081,8083,8085,8087,8089],{"class":568,"line":6226},[566,8080,7931],{"class":3941},[566,8082,2235],{"class":571},[566,8084,7989],{"class":648},[566,8086,652],{"class":571},[566,8088,1117],{"class":2305},[566,8090,7944],{"class":571},[566,8092,8093],{"class":568,"line":6231},[566,8094,2337],{"class":571},[566,8096,8097,8099,8101],{"class":568,"line":6252},[566,8098,669],{"class":571},[566,8100,1538],{"class":575},[566,8102,598],{"class":571},[890,8104,6568,8106],{"id":8105},"using-iframes",[522,8107,8108],{},"iframes",[484,8110,8111,8112,8114],{},"You can achieve pretty cool results with the ",[522,8113,3875],{}," 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.",[2003,8116,8117],{},[8118,8119],"objects-html-iframe-demo",{},[4062,8121,4064,8122,8124],{},[4066,8123,4068],{},[552,8125,8127],{"className":4071,"code":8126,"language":4073,"meta":492,"style":492},"\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",[522,8128,8129,8135,8140,8145,8158,8171,8184,8197,8211,8225,8239,8243,8314],{"__ignoreMap":492},[566,8130,8131,8133],{"class":568,"line":493},[566,8132,572],{"class":571},[566,8134,4522],{"class":575},[566,8136,8137],{"class":568,"line":494},[566,8138,8139],{"class":579},"  transform\n",[566,8141,8142],{"class":568,"line":631},[566,8143,8144],{"class":579},"  center\n",[566,8146,8147,8150,8152,8154,8156],{"class":568,"line":637},[566,8148,8149],{"class":579},"  :cast-shadow",[566,8151,586],{"class":571},[566,8153,589],{"class":571},[566,8155,1092],{"class":592},[566,8157,735],{"class":571},[566,8159,8160,8163,8165,8167,8169],{"class":568,"line":666},[566,8161,8162],{"class":579},"  :receive-shadow",[566,8164,586],{"class":571},[566,8166,589],{"class":571},[566,8168,1092],{"class":592},[566,8170,735],{"class":571},[566,8172,8173,8176,8178,8180,8182],{"class":568,"line":676},[566,8174,8175],{"class":579},"  occlude",[566,8177,586],{"class":571},[566,8179,589],{"class":571},[566,8181,4666],{"class":592},[566,8183,735],{"class":571},[566,8185,8186,8189,8191,8193,8195],{"class":568,"line":681},[566,8187,8188],{"class":579},"  :z-index-range",[566,8190,586],{"class":571},[566,8192,589],{"class":571},[566,8194,4156],{"class":592},[566,8196,735],{"class":571},[566,8198,8199,8202,8204,8206,8209],{"class":568,"line":691},[566,8200,8201],{"class":579},"  :position-y",[566,8203,586],{"class":571},[566,8205,589],{"class":571},[566,8207,8208],{"class":592},"2.5",[566,8210,735],{"class":571},[566,8212,8213,8216,8218,8220,8223],{"class":568,"line":702},[566,8214,8215],{"class":579},"  :portal",[566,8217,586],{"class":571},[566,8219,589],{"class":571},[566,8221,8222],{"class":592},"portalRef",[566,8224,735],{"class":571},[566,8226,8227,8230,8232,8234,8237],{"class":568,"line":557},[566,8228,8229],{"class":579},"  :style",[566,8231,586],{"class":571},[566,8233,589],{"class":571},[566,8235,8236],{"class":592},"{ userSelect: 'none' }",[566,8238,735],{"class":571},[566,8240,8241],{"class":568,"line":558},[566,8242,598],{"class":571},[566,8244,8245,8247,8250,8252,8254,8256,8259,8261,8264,8266,8268,8271,8273,8276,8278,8280,8282,8284,8287,8289,8291,8294,8296,8299,8301,8303,8306,8308,8310,8312],{"class":568,"line":559},[566,8246,694],{"class":571},[566,8248,8249],{"class":575},"iframe",[566,8251,2791],{"class":579},[566,8253,586],{"class":571},[566,8255,589],{"class":571},[566,8257,8258],{"class":592},"w-[700px] h-[500px]",[566,8260,589],{"class":571},[566,8262,8263],{"class":579}," src",[566,8265,586],{"class":571},[566,8267,589],{"class":571},[566,8269,8270],{"class":592},"https://tresjs.org",[566,8272,589],{"class":571},[566,8274,8275],{"class":579}," frameborder",[566,8277,586],{"class":571},[566,8279,589],{"class":571},[566,8281,1117],{"class":592},[566,8283,589],{"class":571},[566,8285,8286],{"class":579}," :width",[566,8288,586],{"class":571},[566,8290,589],{"class":571},[566,8292,8293],{"class":592},"700",[566,8295,589],{"class":571},[566,8297,8298],{"class":579}," :height",[566,8300,586],{"class":571},[566,8302,589],{"class":571},[566,8304,8305],{"class":592},"500",[566,8307,589],{"class":571},[566,8309,5963],{"class":571},[566,8311,8249],{"class":575},[566,8313,598],{"class":571},[566,8315,8316,8318,8320],{"class":568,"line":560},[566,8317,669],{"class":571},[566,8319,4073],{"class":575},[566,8321,598],{"class":571},[8323,8324,8325],"info",{},[484,8326,8327,8328,8331,8332,8335,8336],{},"The demos use ",[522,8329,8330],{},":z-index-range=\"[28, 0]\""," simply to ensure the HTML elements stay below the documentation header (which uses ",[522,8333,8334],{},"z-index: 30",").\n",[2714,8337,8338],{},"This value is for the docs only — you can ignore it or adjust it as needed.",[548,8340,924],{"id":923},[926,8342,8343,8353],{},[929,8344,8345],{},[932,8346,8347,8349,8351],{},[935,8348,1891],{},[935,8350,941],{},[935,8352,944],{},[946,8354,8355,8373,8388,8406,8432,8452,8469,8487,8499,8518,8541,8581,8619,8639,8672],{},[932,8356,8357,8362,8368],{},[951,8358,8359],{},[2714,8360,8361],{},"as",[951,8363,8364,8365,812],{},"Wrapping ",[4461,8366,8367],{},"HTML element",[951,8369,8370],{},[522,8371,8372],{},"'div'",[932,8374,8375,8380,8386],{},[951,8376,8377],{},[2714,8378,8379],{},"wrapperClass",[951,8381,1355,8382,8385],{},[522,8383,8384],{},"className"," of the wrapping element. element.",[951,8387],{},[932,8389,8390,8395,8402],{},[951,8391,8392],{},[2714,8393,8394],{},"prepend",[951,8396,8397,8398,8401],{},"Projects content ",[4461,8399,8400],{},"behind"," the canvas.",[951,8403,8404],{},[522,8405,1132],{},[932,8407,8408,8412,8428],{},[951,8409,8410],{},[2714,8411,1198],{},[951,8413,8414,8415,6562,8418,8420,8421],{},"Adds a ",[522,8416,8417],{},"transform: translate(-50%, -50%)",[909,8419],{},"➡️ ",[4461,8422,8423,8424,8427],{},"Ignored in ",[2714,8425,8426],{},"transform"," mode.",[951,8429,8430],{},[522,8431,1132],{},[932,8433,8434,8439,8448],{},[951,8435,8436],{},[2714,8437,8438],{},"fullscreen",[951,8440,8441,8442,8420,8444],{},"Aligns to the upper-left corner and fills the screen. ",[909,8443],{},[4461,8445,8423,8446,8427],{},[2714,8447,8426],{},[951,8449,8450],{},[522,8451,1132],{},[932,8453,8454,8459,8467],{},[951,8455,8456],{},[2714,8457,8458],{},"distanceFactor",[951,8460,8461,8462,8464,8465,812],{},"Children are scaled by this factor and also by distance to a ",[522,8463,3585],{},", or zoom when using an ",[522,8466,3588],{},[951,8468],{},[932,8470,8471,8476,8482],{},[951,8472,8473],{},[2714,8474,8475],{},"zIndexRange",[951,8477,8478,8479,812],{},"Defines the ",[4461,8480,8481],{},"Z-order range",[951,8483,8484],{},[522,8485,8486],{},"[16777271, 0]",[932,8488,8489,8494,8497],{},[951,8490,8491],{},[2714,8492,8493],{},"portal",[951,8495,8496],{},"Reference to a target container (for rendering into a different DOM node). container.",[951,8498],{},[932,8500,8501,8505,8514],{},[951,8502,8503],{},[2714,8504,8426],{},[951,8506,976,8507,8509,8510,8513],{},[522,8508,1092],{},", applies ",[522,8511,8512],{},"matrix3d"," transformations — the element appears as if it is inside the 3D scene.",[951,8515,8516],{},[522,8517,1132],{},[932,8519,8520,8525,8537],{},[951,8521,8522],{},[2714,8523,8524],{},"sprite",[951,8526,8527,8528,6562,8530,8420,8532],{},"Renders as a ",[4461,8529,8524],{},[909,8531],{},[4461,8533,8534,8535,8427],{},"Only in ",[2714,8536,8426],{},[951,8538,8539],{},[522,8540,1132],{},[932,8542,8543,8548,8572],{},[951,8544,8545],{},[2714,8546,8547],{},"calculatePosition",[951,8549,8550,8551,8553,914,8556,914,8559,8561,8562,8565,8566,8420,8568],{},"Callback function to override the default positioning logic. ",[909,8552],{},[2714,8554,8555],{},"Type:",[522,8557,8558],{},"(object: Object3D, camera: Camera, size: { width: number; height: number }) => [number, number, number]",[909,8560],{},"Receives the related 3D object, the active camera, and the current viewport size, and must return ",[522,8563,8564],{},"[x, y, z]"," pixel coordinates for placing the HTML element. ",[909,8567],{},[4461,8569,8423,8570,8427],{},[2714,8571,8426],{},[951,8573,8574],{},[527,8575,8578,8579],{"href":8576,"rel":8577},"https://github.com/Tresjs/cientos/blob/main/src/core/misc/html/utils.ts#L9-L19",[531],"Default ",[522,8580,8547],{},[932,8582,8583,8587,8617],{},[951,8584,8585],{},[2714,8586,4025],{},[951,8588,8589,8590,8592,8593,8595,8596,8599,8600,8602,8603,8606,8607,8592,8609,8612,8613,8616],{},"Enables occlusion. Possible values: ",[909,8591],{},"- ",[522,8594,1092],{}," → Occlusion against ",[4461,8597,8598],{},"all"," scene objects ",[909,8601],{}," - ",[522,8604,8605],{},"Ref\u003CTresObject3D>[]"," → Occlusion is enabled only against the specified objects. ",[909,8608],{},[522,8610,8611],{},"'blending'"," → Uses a ",[4461,8614,8615],{},"blending-based"," occlusion method (CSS-like depth blending).",[951,8618],{},[932,8620,8621,8625,8631],{},[951,8622,8623],{},[2714,8624,6426],{},[951,8626,8627,8628,8630],{},"Custom ",[522,8629,6426],{}," to be used.",[951,8632,8633],{},[527,8634,8637],{"href":8635,"rel":8636},"https://threejs.org/docs/?q=geometry#api/en/geometries/PlaneGeometry",[531],[522,8638,6416],{},[932,8640,8641,8645,8670],{},[951,8642,8643],{},[2714,8644,6499],{},[951,8646,8647,914,8653,914,8655,8661,8662,914,8664],{},[2714,8648,8649,8650,8652],{},"Custom shader ",[4461,8651,6499],{}," used for the occlusion mesh.",[909,8654],{},[2714,8656,8657,8658,8660],{},"Only applies when ",[522,8659,6408],{}," is enabled"," (an occlusion mesh is created). ",[909,8663],{},[4461,8665,8666,8667,8669],{},"Ignored in raycast occlusion modes (",[522,8668,1092],{},", object refs).",[951,8671],{},[932,8673,8674,8679,8701],{},[951,8675,8676],{},[2714,8677,8678],{},"transparentMaterial",[951,8680,8681,914,8688,914,8690,914,8695,914,8697],{},[2714,8682,8683,8684,8687],{},"Enables ",[4461,8685,8686],{},"transparent"," rendering for the occlusion material.",[909,8689],{},[2714,8691,8657,8692,8694],{},[522,8693,6408],{}," creates an occlusion mesh.",[909,8696],{},[4461,8698,8666,8699,8669],{},[522,8700,1092],{},[951,8702,8703],{},[522,8704,1132],{},[548,8706,1279],{"id":1278},[926,8708,8709,8717],{},[929,8710,8711],{},[932,8712,8713,8715],{},[935,8714,1288],{},[935,8716,941],{},[946,8718,8719],{},[932,8720,8721,8724],{},[951,8722,8723],{},"onOcclude",[951,8725,8726],{},"Called when the occlusion state changes.",[548,8728,8730],{"id":8729},"exposed-properties","Exposed properties",[926,8732,8733,8745],{},[929,8734,8735],{},[932,8736,8737,8740,8743],{},[935,8738,8739],{},"Property",[935,8741,8742],{},"Type",[935,8744,941],{},[946,8746,8747,8770,8791],{},[932,8748,8749,8754,8759],{},[951,8750,8751],{},[2714,8752,8753],{},"instance",[951,8755,8756],{},[522,8757,8758],{},"Ref\u003CTresObject3D | null>",[951,8760,8761,8762,8767,8768,812],{},"Reference to the root ",[2714,8763,8764],{},[522,8765,8766],{},"\u003CTresGroup>"," used by ",[522,8769,3592],{},[932,8771,8772,8777,8782],{},[951,8773,8774],{},[2714,8775,8776],{},"isVisible",[951,8778,8779],{},[522,8780,8781],{},"Ref\u003Cboolean>",[951,8783,8784,8785,6556,8788,812],{},"Reactive value that indicates whether the HTML content is ",[2714,8786,8787],{},"currently visible",[2714,8789,8790],{},"occluded",[932,8792,8793,8798,8802],{},[951,8794,8795],{},[2714,8796,8797],{},"occlusionMesh",[951,8799,8800],{},[522,8801,8758],{},[951,8803,8804,8805,8808,8809,6520,8811,8813],{},"Reference to the ",[2714,8806,8807],{},"occlusion mesh"," created when ",[522,8810,6408],{},[2714,8812,6523],{},". Used internally for geometry-based occlusion.",[548,8815,8817],{"id":8816},"caveats","Caveats",[538,8819,8820,8853,8870,8929,8947],{},[541,8821,8822,8823,8828,8829,8831,8832,6556,8835,8838,8839,8841,8842,8845,8846,8849,8850,8852],{},"✨ When using ",[2714,8824,8825],{},[522,8826,8827],{},"\u003CHtml occlude>",", if the ",[522,8830,3592],{}," component is ",[2714,8833,8834],{},"overlapping",[2714,8836,8837],{},"inside a 3D object",", it will be considered ",[2714,8840,8790],{}," and therefore ",[2714,8843,8844],{},"hidden",". To avoid this, ",[2714,8847,8848],{},"adjust the position"," of the ",[522,8851,3592],{}," component in your scene.",[541,8854,8855,8856,8861,8862,8865,8866,8869],{},"🎨 When using ",[2714,8857,8858],{},[522,8859,8860],{},"\u003CHtml occlude=\"blending\">",", the HTML content is no longer ",[2714,8863,8864],{},"selectable"," because it is rendered ",[2714,8867,8868],{},"behind the canvas",". This is required to achieve the blending effect.",[541,8871,8872,8873,8875,8876,8878,8879],{},"⚙️ When using a ",[2714,8874,6508],{}," with occlusion in ",[522,8877,4666],{}," mode, there are a few important requirements to ensure the HTML content renders correctly ⬇️",[4062,8880,4064,8881,8884],{},[4066,8882,8883],{},"See more information",[8885,8886,8887,8899,8907,8914],"ol",{},[541,8888,8889,8890,2252,8892,8895,8896,812],{},"If you provide your own material, it must be ",[2714,8891,8686],{},[522,8893,8894],{},"transparent: true",") with an ",[2714,8897,8898],{},"opacity \u003C 1",[541,8900,8901,8902,8906],{},"If you are not providing a custom material, enable ",[2714,8903,8904],{},[522,8905,8678],{}," so the internal shader becomes transparent.",[541,8908,8909,8910,8913],{},"The occlusion mesh requires a ",[2714,8911,8912],{},"fully transparent canvas background","; otherwise, thin borders or halo artifacts may appear.",[541,8915,8916,8917,8920,8921,6608,8923,8926,8927,812],{},"To compensate for the transparent canvas, you may ",[2714,8918,8919],{},"reapply your previous clear-color as a CSS background"," on the ",[522,8922,4073],{},[522,8924,8925],{},"body",", or a wrapper ",[522,8928,5281],{},[541,8930,8931,8932,8936,8937,8939,8940,8942,8943,8946],{},"🔶 When using ",[2714,8933,8934],{},[522,8935,8678],{},", overlapping ",[522,8938,3592],{}," elements (especially multiple ",[522,8941,6408],{}," instances) may cause ",[2714,8944,8945],{},"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.",[541,8948,8949,8950,8952,8953,8956,8957],{},"🔵 To avoid thin border artifacts when using ",[522,8951,6408],{},", make sure your ",[522,8954,8955],{},"\u003CTresCanvas>"," is fully transparent:",[552,8958,8960],{"className":554,"code":8959,"language":562,"meta":492,"style":492},"\u003CTresCanvas :alpha=\"true\" :clearAlpha=\"0\" />\n",[522,8961,8962],{"__ignoreMap":492},[566,8963,8964,8966,8968,8971,8974,8976,8978,8980,8982,8984,8987,8989,8991,8993,8995],{"class":568,"line":493},[566,8965,572],{"class":571},[566,8967,697],{"class":575},[566,8969,8970],{"class":571}," :",[566,8972,8973],{"class":579},"alpha",[566,8975,586],{"class":571},[566,8977,589],{"class":571},[566,8979,1092],{"class":2914},[566,8981,589],{"class":571},[566,8983,8970],{"class":571},[566,8985,8986],{"class":579},"clearAlpha",[566,8988,586],{"class":571},[566,8990,589],{"class":571},[566,8992,1117],{"class":2305},[566,8994,589],{"class":571},[566,8996,1689],{"class":571},[926,8998,8999,9009],{},[929,9000,9001],{},[932,9002,9003,9005,9007],{},[935,9004,1891],{},[935,9006,941],{},[935,9008,944],{},[946,9010,9011,9024,9035,9048,9064,9079,9090,9103,9114,9127,9140,9153,9175,9190],{},[932,9012,9013,9017,9020],{},[951,9014,9015],{},[2714,9016,8361],{},[951,9018,9019],{},"Wrapping html element.",[951,9021,9022],{},[522,9023,8372],{},[932,9025,9026,9030,9033],{},[951,9027,9028],{},[2714,9029,8379],{},[951,9031,9032],{},"The className of the wrapping element.",[951,9034],{},[932,9036,9037,9041,9044],{},[951,9038,9039],{},[2714,9040,8394],{},[951,9042,9043],{},"Project content behind the canvas.",[951,9045,9046],{},[522,9047,1132],{},[932,9049,9050,9054,9060],{},[951,9051,9052],{},[2714,9053,1198],{},[951,9055,9056,9057],{},"Adds a -50%/-50% CSS transform. ",[566,9058,9059],{},"Ignored in transform mode",[951,9061,9062],{},[522,9063,1132],{},[932,9065,9066,9070,9075],{},[951,9067,9068],{},[2714,9069,8438],{},[951,9071,9072,9073],{},"Aligns to the upper-left corner, fills the screen. ",[566,9074,9059],{},[951,9076,9077],{},[522,9078,1132],{},[932,9080,9081,9085,9088],{},[951,9082,9083],{},[2714,9084,8458],{},[951,9086,9087],{},"Children will be scaled by this factor, and also by distance to a PerspectiveCamera / zoom by an OrthographicCamera.",[951,9089],{},[932,9091,9092,9096,9099],{},[951,9093,9094],{},[2714,9095,8475],{},[951,9097,9098],{},"Z-order range.",[951,9100,9101],{},[522,9102,8486],{},[932,9104,9105,9109,9112],{},[951,9106,9107],{},[2714,9108,8493],{},[951,9110,9111],{},"Reference to target container.",[951,9113],{},[932,9115,9116,9120,9123],{},[951,9117,9118],{},[2714,9119,8426],{},[951,9121,9122],{},"If true, applies matrix3d transformations.",[951,9124,9125],{},[522,9126,1132],{},[932,9128,9129,9133,9136],{},[951,9130,9131],{},[2714,9132,8524],{},[951,9134,9135],{},"Renders as sprite, but only in transform mode.",[951,9137,9138],{},[522,9139,1132],{},[932,9141,9142,9146,9151],{},[951,9143,9144],{},[2714,9145,8547],{},[951,9147,9148,9149],{},"Override default positioning function. ",[566,9150,9059],{},[951,9152],{},[932,9154,9155,9159,9173],{},[951,9156,9157],{},[2714,9158,4025],{},[951,9160,9161,9162,6608,9164,6608,9166,9169,9170,9172],{},"Can be ",[522,9163,1092],{},[522,9165,8605],{},[522,9167,9168],{},"'raycast'",", or ",[522,9171,8611],{},". True occludes the entire scene.",[951,9174],{},[932,9176,9177,9181,9186],{},[951,9178,9179],{},[2714,9180,6426],{},[951,9182,8627,9183,9185],{},[522,9184,6426],{}," to be use",[951,9187,9188],{},[522,9189,6416],{},[932,9191,9192,9196,9200],{},[951,9193,9194],{},[2714,9195,6499],{},[951,9197,8649,9198,9185],{},[522,9199,6499],{},[951,9201],{},[548,9203,1279],{"id":9204},"events-1",[926,9206,9207,9215],{},[929,9208,9209],{},[932,9210,9211,9213],{},[935,9212,1288],{},[935,9214,941],{},[946,9216,9217],{},[932,9218,9219,9221],{},[951,9220,8723],{},[951,9222,8726],{},[1538,9224,9225],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":492,"searchDepth":493,"depth":494,"links":9227},[9228,9229,9234,9237,9242,9243,9244,9245,9246],{"id":550,"depth":494,"text":15},{"id":4018,"depth":494,"text":4019,"children":9230},[9231,9232,9233],{"id":4213,"depth":631,"text":4214},{"id":4376,"depth":631,"text":4377},{"id":4640,"depth":631,"text":4641},{"id":6401,"depth":494,"text":6402,"children":9235},[9236],{"id":6492,"depth":631,"text":6493},{"id":6567,"depth":494,"text":9238,"children":9239},"Using \u003CTransition>",[9240],{"id":8105,"depth":631,"text":9241},"Using iframes",{"id":923,"depth":494,"text":924},{"id":1278,"depth":494,"text":1279},{"id":8729,"depth":494,"text":8730},{"id":8816,"depth":494,"text":8817},{"id":9204,"depth":494,"text":1279},"Allows you put DOM elements in your Tres.js scene.",{},{"title":421,"description":9247},"sCicSGhX9NlQz2qQXKQDRsp2N33eyO-s6DiY6dGH98s",{"id":9252,"title":425,"body":9253,"description":9865,"extension":497,"links":498,"meta":9866,"navigation":500,"path":426,"seo":9867,"stem":427,"__hash__":9868},"docs/2.api/9.objects/image.md",{"type":481,"value":9254,"toc":9860},[9255,9260,9266,9268,9439,9441,9448,9666,9668,9691,9857],[514,9256,9257],{},[9258,9259],"objects-image",{},[484,9261,9262,9265],{},[522,9263,9264],{},"\u003CImage />"," is a shader-based component that optionally loads then displays an image texture on a default plane or on your custom geometry.",[548,9267,15],{"id":550},[552,9269,9272],{"className":554,"code":9270,"highlights":9271,"language":562,"meta":492,"style":492},"\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",[631,557,558,559],[522,9273,9274,9294,9312,9332,9340,9344,9352,9360,9378,9382,9390,9405,9419,9423,9431],{"__ignoreMap":492},[566,9275,9276,9278,9280,9282,9284,9286,9288,9290,9292],{"class":568,"line":493},[566,9277,572],{"class":571},[566,9279,576],{"class":575},[566,9281,580],{"class":579},[566,9283,583],{"class":579},[566,9285,586],{"class":571},[566,9287,589],{"class":571},[566,9289,593],{"class":592},[566,9291,589],{"class":571},[566,9293,598],{"class":571},[566,9295,9296,9298,9300,9302,9304,9306,9308,9310],{"class":568,"line":494},[566,9297,606],{"class":605},[566,9299,609],{"class":571},[566,9301,2105],{"class":612},[566,9303,616],{"class":571},[566,9305,619],{"class":605},[566,9307,622],{"class":571},[566,9309,2094],{"class":592},[566,9311,628],{"class":571},[566,9313,9315,9317,9319,9322,9324,9326,9328,9330],{"class":9314,"line":631},[568,602],[566,9316,606],{"class":605},[566,9318,609],{"class":571},[566,9320,9321],{"class":612}," Image",[566,9323,616],{"class":571},[566,9325,619],{"class":605},[566,9327,622],{"class":571},[566,9329,625],{"class":592},[566,9331,628],{"class":571},[566,9333,9334,9336,9338],{"class":568,"line":637},[566,9335,669],{"class":571},[566,9337,576],{"class":575},[566,9339,598],{"class":571},[566,9341,9342],{"class":568,"line":666},[566,9343,634],{"emptyLinePlaceholder":500},[566,9345,9346,9348,9350],{"class":568,"line":676},[566,9347,572],{"class":571},[566,9349,686],{"class":575},[566,9351,598],{"class":571},[566,9353,9354,9356,9358],{"class":568,"line":681},[566,9355,694],{"class":571},[566,9357,697],{"class":575},[566,9359,598],{"class":571},[566,9361,9362,9364,9366,9368,9370,9372,9374,9376],{"class":568,"line":691},[566,9363,705],{"class":571},[566,9365,1674],{"class":575},[566,9367,1677],{"class":579},[566,9369,586],{"class":571},[566,9371,589],{"class":571},[566,9373,3295],{"class":592},[566,9375,589],{"class":571},[566,9377,1689],{"class":571},[566,9379,9380],{"class":568,"line":702},[566,9381,634],{"emptyLinePlaceholder":500},[566,9383,9385,9387],{"class":9384,"line":557},[568,602],[566,9386,705],{"class":571},[566,9388,9389],{"class":575},"Image\n",[566,9391,9393,9396,9398,9400,9403],{"class":9392,"line":558},[568,602],[566,9394,9395],{"class":579},"      url",[566,9397,586],{"class":571},[566,9399,589],{"class":571},[566,9401,9402],{"class":592},"https://upload.wikimedia.org/wikipedia/commons/f/f0/Cyanistes_caeruleus_Oulu_20150516.JPG",[566,9404,735],{"class":571},[566,9406,9408,9411,9413,9415,9417],{"class":9407,"line":559},[568,602],[566,9409,9410],{"class":579},"      :scale",[566,9412,586],{"class":571},[566,9414,589],{"class":571},[566,9416,3327],{"class":592},[566,9418,735],{"class":571},[566,9420,9421],{"class":568,"line":560},[566,9422,2500],{"class":571},[566,9424,9425,9427,9429],{"class":568,"line":561},[566,9426,787],{"class":571},[566,9428,697],{"class":575},[566,9430,598],{"class":571},[566,9432,9433,9435,9437],{"class":568,"line":774},[566,9434,669],{"class":571},[566,9436,686],{"class":575},[566,9438,598],{"class":571},[548,9440,924],{"id":923},[802,9442,9443],{},[484,9444,9445,9447],{},[522,9446,9264],{}," is a THREE.Mesh and most Mesh attributes can be used as props on the component.",[926,9449,9450,9460],{},[929,9451,9452],{},[932,9453,9454,9456,9458],{},[935,9455,1891],{"align":937},[935,9457,941],{"align":937},[935,9459,944],{},[946,9461,9462,9476,9493,9508,9522,9539,9553,9572,9590,9605,9622,9642,9654],{},[932,9463,9464,9469,9472],{},[951,9465,9466],{"align":937},[522,9467,9468],{},"segments",[951,9470,9471],{"align":937},"Number of divisions in the default geometry.",[951,9473,9474],{},[522,9475,1783],{},[932,9477,9478,9483,9489],{},[951,9479,9480],{"align":937},[522,9481,9482],{},"scale",[951,9484,9485,9486],{"align":937},"Scale of the geometry. ",[522,9487,9488],{},"number | [number, number]",[951,9490,9491],{},[522,9492,1783],{},[932,9494,9495,9500,9503],{},[951,9496,9497],{"align":937},[522,9498,9499],{},"color",[951,9501,9502],{"align":937},"Color multiplied into the image texture.",[951,9504,9505],{},[522,9506,9507],{},"'white'",[932,9509,9510,9515,9518],{},[951,9511,9512],{"align":937},[522,9513,9514],{},"zoom",[951,9516,9517],{"align":937},"Shrinks or enlarges the image texture.",[951,9519,9520],{},[522,9521,1783],{},[932,9523,9524,9529,9535],{},[951,9525,9526],{"align":937},[522,9527,9528],{},"radius",[951,9530,9531,9532,9534],{"align":937},"Border radius applied to the image texture. (Intended for rectangular geometries. Use with ",[522,9533,8686],{},".)",[951,9536,9537],{},[522,9538,1117],{},[932,9540,9541,9546,9549],{},[951,9542,9543],{"align":937},[522,9544,9545],{},"grayscale",[951,9547,9548],{"align":937},"Power of grayscale effect. 0 is off. 1 is full grayscale.",[951,9550,9551],{},[522,9552,1117],{},[932,9554,9555,9560,9568],{},[951,9556,9557],{"align":937},[522,9558,9559],{},"toneMapped",[951,9561,9562,9563],{"align":937},"Whether this material is tone mapped according to the renderers toneMapping settings. ",[527,9564,9567],{"href":9565,"rel":9566},"https://threejs.org/docs/?q=material#api/en/materials/Material.toneMapped",[531],"See THREE.material.tonemapped",[951,9569,9570],{},[522,9571,1117],{},[932,9573,9574,9578,9586],{},[951,9575,9576],{"align":937},[522,9577,8686],{},[951,9579,9580,9581],{"align":937},"Whether the image material should be transparent. ",[527,9582,9585],{"href":9583,"rel":9584},"https://threejs.org/docs/?q=material#api/en/materials/Material.transparent",[531],"See THREE.material.transparent",[951,9587,9588],{},[522,9589,1132],{},[932,9591,9592,9596,9601],{},[951,9593,9594],{"align":937},[522,9595,8686],{},[951,9597,9580,9598],{"align":937},[527,9599,9585],{"href":9583,"rel":9600},[531],[951,9602,9603],{},[522,9604,1132],{},[932,9606,9607,9612,9618],{},[951,9608,9609],{"align":937},[522,9610,9611],{},"opacity",[951,9613,9614,9615],{"align":937},"Opacity of the image material. ",[527,9616,9585],{"href":9583,"rel":9617},[531],[951,9619,9620],{},[522,9621,1783],{},[932,9623,9624,9629,9637],{},[951,9625,9626],{"align":937},[522,9627,9628],{},"side",[951,9630,9631,9632],{"align":937},"THREE.Side of the image material. ",[527,9633,9636],{"href":9634,"rel":9635},"https://threejs.org/docs/?q=material#api/en/materials/Material.side",[531],"See THREE.material.side",[951,9638,9639],{},[522,9640,9641],{},"FrontSide",[932,9643,9644,9649,9652],{},[951,9645,9646],{"align":937},[522,9647,9648],{},"texture",[951,9650,9651],{"align":937},"Image texture to display on the geometry.",[951,9653],{},[932,9655,9656,9661,9664],{},[951,9657,9658],{"align":937},[522,9659,9660],{},"url",[951,9662,9663],{"align":937},"Image URL to load and display on the geometry.",[951,9665],{},[548,9667,8817],{"id":8816},[484,9669,9670,9671,9673,9674,9677,9678,9680,9681,9684,9685,6556,9688,1520],{},"By default, images loaded via the ",[522,9672,9660],{}," prop use the renderer’s output color space. For advanced control, pass a ",[522,9675,9676],{},"THREE.Texture"," via the ",[522,9679,9648],{}," prop and set its ",[522,9682,9683],{},"colorSpace"," (e.g., ",[522,9686,9687],{},"THREE.SRGBColorSpace",[522,9689,9690],{},"THREE.LinearSRGBColorSpace",[552,9692,9694],{"className":554,"code":9693,"language":562,"meta":492,"style":492},"\u003Cscript setup>\nimport { useTexture } from '@tresjs/cientos'\nimport { SRGBColorSpace } from 'three'\n\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",[522,9695,9696,9706,9725,9744,9748,9766,9787,9804,9810,9818,9822,9830,9849],{"__ignoreMap":492},[566,9697,9698,9700,9702,9704],{"class":568,"line":493},[566,9699,572],{"class":571},[566,9701,576],{"class":575},[566,9703,580],{"class":579},[566,9705,598],{"class":571},[566,9707,9708,9710,9712,9715,9717,9719,9721,9723],{"class":568,"line":494},[566,9709,606],{"class":605},[566,9711,609],{"class":571},[566,9713,9714],{"class":612}," useTexture",[566,9716,616],{"class":571},[566,9718,619],{"class":605},[566,9720,622],{"class":571},[566,9722,625],{"class":592},[566,9724,628],{"class":571},[566,9726,9727,9729,9731,9734,9736,9738,9740,9742],{"class":568,"line":631},[566,9728,606],{"class":605},[566,9730,609],{"class":571},[566,9732,9733],{"class":612}," SRGBColorSpace",[566,9735,616],{"class":571},[566,9737,619],{"class":605},[566,9739,622],{"class":571},[566,9741,4848],{"class":592},[566,9743,628],{"class":571},[566,9745,9746],{"class":568,"line":637},[566,9747,634],{"emptyLinePlaceholder":500},[566,9749,9750,9752,9754,9757,9759,9761,9763],{"class":568,"line":666},[566,9751,640],{"class":579},[566,9753,609],{"class":571},[566,9755,9756],{"class":612}," state ",[566,9758,2978],{"class":571},[566,9760,2297],{"class":571},[566,9762,9714],{"class":648},[566,9764,9765],{"class":612},"(URL)\n",[566,9767,9768,9771,9774,9776,9778,9780,9783,9785],{"class":568,"line":676},[566,9769,9770],{"class":648},"watch",[566,9772,9773],{"class":612},"(state",[566,9775,1626],{"class":571},[566,9777,2252],{"class":571},[566,9779,9648],{"class":2224},[566,9781,9782],{"class":571},")",[566,9784,7060],{"class":579},[566,9786,2244],{"class":571},[566,9788,9789,9792,9794,9796,9798,9800],{"class":568,"line":681},[566,9790,9791],{"class":612},"  texture",[566,9793,812],{"class":571},[566,9795,9683],{"class":612},[566,9797,2297],{"class":571},[566,9799,9733],{"class":612},[566,9801,9803],{"class":9802},"sHwdD"," // assign a custom color space\n",[566,9805,9806,9808],{"class":568,"line":691},[566,9807,2978],{"class":571},[566,9809,663],{"class":612},[566,9811,9812,9814,9816],{"class":568,"line":702},[566,9813,669],{"class":571},[566,9815,576],{"class":575},[566,9817,598],{"class":571},[566,9819,9820],{"class":568,"line":557},[566,9821,634],{"emptyLinePlaceholder":500},[566,9823,9824,9826,9828],{"class":568,"line":558},[566,9825,572],{"class":571},[566,9827,686],{"class":575},[566,9829,598],{"class":571},[566,9831,9832,9834,9836,9839,9841,9843,9845,9847],{"class":568,"line":559},[566,9833,694],{"class":571},[566,9835,425],{"class":575},[566,9837,9838],{"class":579}," :texture",[566,9840,586],{"class":571},[566,9842,589],{"class":571},[566,9844,9648],{"class":592},[566,9846,589],{"class":571},[566,9848,1689],{"class":571},[566,9850,9851,9853,9855],{"class":568,"line":560},[566,9852,669],{"class":571},[566,9854,686],{"class":575},[566,9856,598],{"class":571},[1538,9858,9859],{},"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 .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":492,"searchDepth":493,"depth":494,"links":9861},[9862,9863,9864],{"id":550,"depth":494,"text":15},{"id":923,"depth":494,"text":924},{"id":8816,"depth":494,"text":8817},"Display image textures with shader-based effects.",{},{"title":425,"description":9865},"X-ToNyUMXQZlkTHUsm9OM76zK6fPjZKmSgrWtCQht4g",{"id":9870,"title":429,"body":9871,"description":10670,"extension":497,"links":498,"meta":10671,"navigation":500,"path":430,"seo":10672,"stem":431,"__hash__":10673},"docs/2.api/9.objects/marching-cubes.md",{"type":481,"value":9872,"toc":10664},[9873,9878,9889,9892,9917,9919,10475,10477,10548,10552,10598,10602,10661],[514,9874,9875],{},[9876,9877],"objects-marching-cubes",{},[484,9879,9880,9883,9884,812],{},[522,9881,9882],{},"\u003CMarchingCubes />"," is a wrapper around ",[527,9885,9888],{"href":9886,"rel":9887},"https://threejs.org/examples/#webgl_marchingcubes",[531],"THREE's Marching Cubes",[484,9890,9891],{},"It includes 3 components:",[538,9893,9894,9907,9912],{},[541,9895,9896,9898,9899,9902,9903,9906],{},[522,9897,9882],{}," – container element for ",[522,9900,9901],{},"\u003CMarchingCube />","s and ",[522,9904,9905],{},"\u003CMarchingPlane />","s",[541,9908,9909,9911],{},[522,9910,9901],{}," - an individual metaball",[541,9913,9914,9916],{},[522,9915,9905],{}," – optional bounding plane that interacts with the metaballs",[548,9918,15],{"id":550},[552,9920,9923],{"className":554,"code":9921,"highlights":9922,"language":562,"meta":492,"style":492},"\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",[494,774,784,794,1844,1865,1874,2419,2424,2024],[522,9924,9925,9945,9979,9997,10021,10025,10060,10123,10131,10135,10143,10174,10182,10190,10194,10226,10247,10255,10269,10283,10297,10302,10358,10367,10371,10380,10420,10459,10467],{"__ignoreMap":492},[566,9926,9927,9929,9931,9933,9935,9937,9939,9941,9943],{"class":568,"line":493},[566,9928,572],{"class":571},[566,9930,576],{"class":575},[566,9932,580],{"class":579},[566,9934,583],{"class":579},[566,9936,586],{"class":571},[566,9938,589],{"class":571},[566,9940,593],{"class":592},[566,9942,589],{"class":571},[566,9944,598],{"class":571},[566,9946,9948,9950,9952,9955,9957,9960,9962,9965,9967,9969,9971,9973,9975,9977],{"class":9947,"line":494},[568,602],[566,9949,606],{"class":605},[566,9951,609],{"class":571},[566,9953,9954],{"class":612}," MarchingCube",[566,9956,1626],{"class":571},[566,9958,9959],{"class":612}," MarchingCubes",[566,9961,1626],{"class":571},[566,9963,9964],{"class":612}," MarchingPlane",[566,9966,1626],{"class":571},[566,9968,1629],{"class":612},[566,9970,616],{"class":571},[566,9972,619],{"class":605},[566,9974,622],{"class":571},[566,9976,625],{"class":592},[566,9978,628],{"class":571},[566,9980,9981,9983,9985,9987,9989,9991,9993,9995],{"class":568,"line":631},[566,9982,606],{"class":605},[566,9984,609],{"class":571},[566,9986,2105],{"class":612},[566,9988,616],{"class":571},[566,9990,619],{"class":605},[566,9992,622],{"class":571},[566,9994,2094],{"class":592},[566,9996,628],{"class":571},[566,9998,9999,10001,10003,10006,10008,10011,10013,10015,10017,10019],{"class":568,"line":637},[566,10000,606],{"class":605},[566,10002,609],{"class":571},[566,10004,10005],{"class":612}," NoToneMapping",[566,10007,1626],{"class":571},[566,10009,10010],{"class":612}," Vector3",[566,10012,616],{"class":571},[566,10014,619],{"class":605},[566,10016,622],{"class":571},[566,10018,4848],{"class":592},[566,10020,628],{"class":571},[566,10022,10023],{"class":568,"line":666},[566,10024,634],{"emptyLinePlaceholder":500},[566,10026,10027,10029,10032,10034,10036,10038,10041,10043,10045,10047,10050,10053,10055,10057],{"class":568,"line":676},[566,10028,640],{"class":579},[566,10030,10031],{"class":612}," rand ",[566,10033,586],{"class":571},[566,10035,7222],{"class":571},[566,10037,7060],{"class":579},[566,10039,10040],{"class":612}," (Math",[566,10042,812],{"class":571},[566,10044,7162],{"class":648},[566,10046,7165],{"class":612},[566,10048,10049],{"class":571},"-",[566,10051,10052],{"class":2305}," 0.5",[566,10054,2266],{"class":612},[566,10056,7168],{"class":571},[566,10058,10059],{"class":2305}," 1.25\n",[566,10061,10062,10064,10067,10069,10072,10074,10077,10079,10081,10084,10086,10089,10092,10094,10096,10099,10101,10103,10106,10109,10111,10114,10116,10118,10120],{"class":568,"line":681},[566,10063,640],{"class":579},[566,10065,10066],{"class":612}," positions ",[566,10068,586],{"class":571},[566,10070,10071],{"class":612}," Array",[566,10073,812],{"class":571},[566,10075,10076],{"class":648},"from",[566,10078,652],{"class":612},[566,10080,2269],{"class":571},[566,10082,10083],{"class":575}," length",[566,10085,2235],{"class":571},[566,10087,10088],{"class":2305}," 40",[566,10090,10091],{"class":571}," },",[566,10093,7222],{"class":571},[566,10095,7060],{"class":579},[566,10097,10098],{"class":571}," new",[566,10100,10010],{"class":648},[566,10102,652],{"class":612},[566,10104,10105],{"class":648},"rand",[566,10107,10108],{"class":612},"()",[566,10110,1626],{"class":571},[566,10112,10113],{"class":648}," rand",[566,10115,10108],{"class":612},[566,10117,1626],{"class":571},[566,10119,10113],{"class":648},[566,10121,10122],{"class":612},"()))\n",[566,10124,10125,10127,10129],{"class":568,"line":691},[566,10126,669],{"class":571},[566,10128,576],{"class":575},[566,10130,598],{"class":571},[566,10132,10133],{"class":568,"line":702},[566,10134,634],{"emptyLinePlaceholder":500},[566,10136,10137,10139,10141],{"class":568,"line":557},[566,10138,572],{"class":571},[566,10140,686],{"class":575},[566,10142,598],{"class":571},[566,10144,10145,10147,10149,10151,10153,10155,10158,10160,10163,10165,10167,10170,10172],{"class":568,"line":558},[566,10146,694],{"class":571},[566,10148,697],{"class":575},[566,10150,3697],{"class":579},[566,10152,586],{"class":571},[566,10154,589],{"class":571},[566,10156,10157],{"class":592},"#222",[566,10159,589],{"class":571},[566,10161,10162],{"class":579}," :tone-mapping",[566,10164,586],{"class":571},[566,10166,589],{"class":571},[566,10168,10169],{"class":592},"NoToneMapping",[566,10171,589],{"class":571},[566,10173,598],{"class":571},[566,10175,10176,10178,10180],{"class":568,"line":559},[566,10177,705],{"class":571},[566,10179,1674],{"class":575},[566,10181,1689],{"class":571},[566,10183,10184,10186,10188],{"class":568,"line":560},[566,10185,705],{"class":571},[566,10187,1696],{"class":575},[566,10189,1689],{"class":571},[566,10191,10192],{"class":568,"line":561},[566,10193,634],{"emptyLinePlaceholder":500},[566,10195,10197,10199,10201,10203,10205,10207,10210,10212,10215,10217,10219,10222,10224],{"class":10196,"line":774},[568,602],[566,10198,705],{"class":571},[566,10200,429],{"class":575},[566,10202,1712],{"class":579},[566,10204,586],{"class":571},[566,10206,589],{"class":571},[566,10208,10209],{"class":592},"40",[566,10211,589],{"class":571},[566,10213,10214],{"class":579}," :max-poly-count",[566,10216,586],{"class":571},[566,10218,589],{"class":571},[566,10220,10221],{"class":592},"40000",[566,10223,589],{"class":571},[566,10225,598],{"class":571},[566,10227,10229,10231,10234,10237,10239,10241,10243,10245],{"class":10228,"line":784},[568,602],[566,10230,716],{"class":571},[566,10232,10233],{"class":575},"MarchingPlane",[566,10235,10236],{"class":579}," plane-type",[566,10238,586],{"class":571},[566,10240,589],{"class":571},[566,10242,2323],{"class":592},[566,10244,589],{"class":571},[566,10246,1689],{"class":571},[566,10248,10250,10252],{"class":10249,"line":794},[568,602],[566,10251,716],{"class":571},[566,10253,10254],{"class":575},"MarchingCube\n",[566,10256,10258,10260,10262,10264,10267],{"class":10257,"line":1844},[568,602],[566,10259,5361],{"class":579},[566,10261,586],{"class":571},[566,10263,589],{"class":571},[566,10265,10266],{"class":592},"position, i of positions",[566,10268,735],{"class":571},[566,10270,10272,10274,10276,10278,10281],{"class":10271,"line":1865},[568,602],[566,10273,5376],{"class":579},[566,10275,586],{"class":571},[566,10277,589],{"class":571},[566,10279,10280],{"class":592},"i",[566,10282,735],{"class":571},[566,10284,10286,10288,10290,10292,10295],{"class":10285,"line":1874},[568,602],[566,10287,3810],{"class":579},[566,10289,586],{"class":571},[566,10291,589],{"class":571},[566,10293,10294],{"class":592},"position",[566,10296,735],{"class":571},[566,10298,10300],{"class":10299,"line":2419},[568,602],[566,10301,771],{"class":571},[566,10303,10305,10307,10310,10313,10315,10317,10320,10322,10325,10327,10329,10331,10333,10336,10338,10340,10343,10345,10348,10350,10352,10354,10356],{"class":10304,"line":2424},[568,602],[566,10306,716],{"class":571},[566,10308,10309],{"class":575},"TresMeshPhongMaterial",[566,10311,10312],{"class":579}," specular",[566,10314,586],{"class":571},[566,10316,589],{"class":571},[566,10318,10319],{"class":592},"#111111",[566,10321,589],{"class":571},[566,10323,10324],{"class":579}," :shininess",[566,10326,586],{"class":571},[566,10328,589],{"class":571},[566,10330,1076],{"class":592},[566,10332,589],{"class":571},[566,10334,10335],{"class":579}," color",[566,10337,586],{"class":571},[566,10339,589],{"class":571},[566,10341,10342],{"class":592},"#049ef4",[566,10344,589],{"class":571},[566,10346,10347],{"class":579}," :reflectivity",[566,10349,586],{"class":571},[566,10351,589],{"class":571},[566,10353,1783],{"class":592},[566,10355,589],{"class":571},[566,10357,1689],{"class":571},[566,10359,10361,10363,10365],{"class":10360,"line":2024},[568,602],[566,10362,777],{"class":571},[566,10364,429],{"class":575},[566,10366,598],{"class":571},[566,10368,10369],{"class":568,"line":2025},[566,10370,634],{"emptyLinePlaceholder":500},[566,10372,10373,10375,10378],{"class":568,"line":2026},[566,10374,705],{"class":571},[566,10376,10377],{"class":575},"TresAxesHelper",[566,10379,1689],{"class":571},[566,10381,10382,10384,10386,10388,10390,10392,10395,10397,10399,10401,10403,10405,10407,10409,10411,10413,10416,10418],{"class":568,"line":2027},[566,10383,705],{"class":571},[566,10385,1849],{"class":575},[566,10387,10335],{"class":579},[566,10389,586],{"class":571},[566,10391,589],{"class":571},[566,10393,10394],{"class":592},"#ffffff",[566,10396,589],{"class":571},[566,10398,1830],{"class":579},[566,10400,586],{"class":571},[566,10402,589],{"class":571},[566,10404,5398],{"class":592},[566,10406,589],{"class":571},[566,10408,1677],{"class":579},[566,10410,586],{"class":571},[566,10412,589],{"class":571},[566,10414,10415],{"class":592},"[0, 200, 0]",[566,10417,589],{"class":571},[566,10419,1689],{"class":571},[566,10421,10422,10424,10426,10428,10430,10432,10434,10436,10438,10440,10442,10444,10446,10448,10450,10452,10455,10457],{"class":568,"line":2497},[566,10423,705],{"class":571},[566,10425,1849],{"class":575},[566,10427,10335],{"class":579},[566,10429,586],{"class":571},[566,10431,589],{"class":571},[566,10433,10394],{"class":592},[566,10435,589],{"class":571},[566,10437,1830],{"class":579},[566,10439,586],{"class":571},[566,10441,589],{"class":571},[566,10443,5398],{"class":592},[566,10445,589],{"class":571},[566,10447,1677],{"class":579},[566,10449,586],{"class":571},[566,10451,589],{"class":571},[566,10453,10454],{"class":592},"[100, 200, 100]",[566,10456,589],{"class":571},[566,10458,1689],{"class":571},[566,10460,10461,10463,10465],{"class":568,"line":2503},[566,10462,787],{"class":571},[566,10464,697],{"class":575},[566,10466,598],{"class":571},[566,10468,10469,10471,10473],{"class":568,"line":2512},[566,10470,669],{"class":571},[566,10472,686],{"class":575},[566,10474,598],{"class":571},[548,10476,924],{"id":923},[926,10478,10479,10489],{},[929,10480,10481],{},[932,10482,10483,10485,10487],{},[935,10484,1891],{"align":937},[935,10486,941],{"align":937},[935,10488,944],{},[946,10490,10491,10505,10520,10534],{},[932,10492,10493,10497,10500],{},[951,10494,10495],{"align":937},[522,10496,1924],{},[951,10498,10499],{"align":937},"Resolution of the marching cube field. Higher resolution produces smoother meshes at the cost of performance and memory.",[951,10501,10502],{},[522,10503,10504],{},"28",[932,10506,10507,10512,10515],{},[951,10508,10509],{"align":937},[522,10510,10511],{},"maxPolyCount",[951,10513,10514],{"align":937},"Maximum number of polygons to generate.",[951,10516,10517],{},[522,10518,10519],{},"10000",[932,10521,10522,10527,10530],{},[951,10523,10524],{"align":937},[522,10525,10526],{},"enableUvs",[951,10528,10529],{"align":937},"Whether UVs are enabled.",[951,10531,10532],{},[522,10533,1132],{},[932,10535,10536,10541,10544],{},[951,10537,10538],{"align":937},[522,10539,10540],{},"enableColors",[951,10542,10543],{"align":937},"Whether vertex colors are enabled.",[951,10545,10546],{},[522,10547,1132],{},[548,10549,10551],{"id":10550},"marchingcube-props","MarchingCube Props",[926,10553,10554,10564],{},[929,10555,10556],{},[932,10557,10558,10560,10562],{},[935,10559,1891],{"align":937},[935,10561,941],{"align":937},[935,10563,944],{},[946,10565,10566,10580],{},[932,10567,10568,10573,10576],{},[951,10569,10570],{"align":937},[522,10571,10572],{},"strength",[951,10574,10575],{"align":937},"How strongly this cube affects the marching cube field.",[951,10577,10578],{},[522,10579,1837],{},[932,10581,10582,10587,10593],{},[951,10583,10584],{"align":937},[522,10585,10586],{},"subtract",[951,10588,10589,10590,10592],{"align":937},"How quickly strength moves to ",[522,10591,1117],{}," over distance.",[951,10594,10595],{},[522,10596,10597],{},"12",[548,10599,10601],{"id":10600},"marchingplane-props","MarchingPlane Props",[926,10603,10604,10614],{},[929,10605,10606],{},[932,10607,10608,10610,10612],{},[935,10609,1891],{"align":937},[935,10611,941],{"align":937},[935,10613,944],{},[946,10615,10616,10634,10647],{},[932,10617,10618,10623,10629],{},[951,10619,10620],{"align":937},[522,10621,10622],{},"planeType",[951,10624,10625,10626],{"align":937},"Which axis the plane appears on. ",[522,10627,10628],{},"'x' | 'y' | 'z'",[951,10630,10631],{},[522,10632,10633],{},"'x'",[932,10635,10636,10640,10643],{},[951,10637,10638],{"align":937},[522,10639,10572],{},[951,10641,10642],{"align":937},"How strongly this plane affects the marching cube field.",[951,10644,10645],{},[522,10646,1837],{},[932,10648,10649,10653,10657],{},[951,10650,10651],{"align":937},[522,10652,10586],{},[951,10654,10589,10655,10592],{"align":937},[522,10656,1117],{},[951,10658,10659],{},[522,10660,10597],{},[1538,10662,10663],{},"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":492,"searchDepth":493,"depth":494,"links":10665},[10666,10667,10668,10669],{"id":550,"depth":494,"text":15},{"id":923,"depth":494,"text":924},{"id":10550,"depth":494,"text":10551},{"id":10600,"depth":494,"text":10601},"Create organic blob-like shapes using metaballs.",{},{"title":429,"description":10670},"2fMta733jb31sfafa23DwIMPzUQ2f_phq7gswFmuiTw",{"id":10675,"title":433,"body":10676,"description":11594,"extension":497,"links":498,"meta":11595,"navigation":500,"path":434,"seo":11596,"stem":435,"__hash__":11597},"docs/2.api/9.objects/reflector.md",{"type":481,"value":10677,"toc":11587},[10678,10683,10698,10700,10921,10923,11011,11019,11023,11026,11255,11258,11261,11265,11584],[514,10679,10680],{},[10681,10682],"objects-reflector",{},[484,10684,1355,10685,10688,10689,10694,10695,10697],{},[522,10686,10687],{},"cientos"," package provides an abstraction of the ",[527,10690,10693],{"href":10691,"rel":10692},"https://github.com/mrdoob/three.js/blob/dev/examples/jsm/objects/Reflector.js",[531],"Reflector class",", which creates a Mesh showing a real-time reflection of your scene.  This Mesh extends from ",[522,10696,4440],{}," so all the default props can be passed as well:",[548,10699,15],{"id":550},[552,10701,10703],{"className":554,"code":10702,"language":562,"meta":492,"style":492},"\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",[522,10704,10705,10725,10744,10752,10756,10764,10778,10797,10805,10809,10817,10824,10838,10852,10866,10870,10889,10897,10905,10913],{"__ignoreMap":492},[566,10706,10707,10709,10711,10713,10715,10717,10719,10721,10723],{"class":568,"line":493},[566,10708,572],{"class":571},[566,10710,576],{"class":575},[566,10712,580],{"class":579},[566,10714,583],{"class":579},[566,10716,586],{"class":571},[566,10718,589],{"class":571},[566,10720,593],{"class":592},[566,10722,589],{"class":571},[566,10724,598],{"class":571},[566,10726,10727,10729,10731,10734,10736,10738,10740,10742],{"class":568,"line":494},[566,10728,606],{"class":605},[566,10730,609],{"class":571},[566,10732,10733],{"class":612}," Reflector",[566,10735,616],{"class":571},[566,10737,619],{"class":605},[566,10739,622],{"class":571},[566,10741,625],{"class":592},[566,10743,628],{"class":571},[566,10745,10746,10748,10750],{"class":568,"line":631},[566,10747,669],{"class":571},[566,10749,576],{"class":575},[566,10751,598],{"class":571},[566,10753,10754],{"class":568,"line":637},[566,10755,634],{"emptyLinePlaceholder":500},[566,10757,10758,10760,10762],{"class":568,"line":666},[566,10759,572],{"class":571},[566,10761,686],{"class":575},[566,10763,598],{"class":571},[566,10765,10766,10768,10770,10773,10776],{"class":568,"line":676},[566,10767,694],{"class":571},[566,10769,697],{"class":575},[566,10771,10772],{"class":579}," shadows",[566,10774,10775],{"class":579}," alpha",[566,10777,598],{"class":571},[566,10779,10780,10782,10784,10786,10788,10790,10793,10795],{"class":568,"line":681},[566,10781,705],{"class":571},[566,10783,1674],{"class":575},[566,10785,1677],{"class":579},[566,10787,586],{"class":571},[566,10789,589],{"class":571},[566,10791,10792],{"class":592},"[0, 0, 3]",[566,10794,589],{"class":571},[566,10796,1689],{"class":571},[566,10798,10799,10801,10803],{"class":568,"line":691},[566,10800,705],{"class":571},[566,10802,1696],{"class":575},[566,10804,1689],{"class":571},[566,10806,10807],{"class":568,"line":702},[566,10808,634],{"emptyLinePlaceholder":500},[566,10810,10811,10813,10815],{"class":568,"line":557},[566,10812,705],{"class":571},[566,10814,708],{"class":575},[566,10816,598],{"class":571},[566,10818,10819,10821],{"class":568,"line":558},[566,10820,716],{"class":571},[566,10822,10823],{"class":575},"Reflector\n",[566,10825,10826,10829,10831,10833,10836],{"class":568,"line":559},[566,10827,10828],{"class":579},"        :rotation",[566,10830,586],{"class":571},[566,10832,589],{"class":571},[566,10834,10835],{"class":592},"[-Math.PI * 0.5, 0, 0]",[566,10837,735],{"class":571},[566,10839,10840,10843,10845,10847,10850],{"class":568,"line":560},[566,10841,10842],{"class":579},"        :position-y",[566,10844,586],{"class":571},[566,10846,589],{"class":571},[566,10848,10849],{"class":592},"-2",[566,10851,735],{"class":571},[566,10853,10854,10857,10859,10861,10864],{"class":568,"line":561},[566,10855,10856],{"class":579},"        color",[566,10858,586],{"class":571},[566,10860,589],{"class":571},[566,10862,10863],{"class":592},"#fff",[566,10865,735],{"class":571},[566,10867,10868],{"class":568,"line":774},[566,10869,3839],{"class":571},[566,10871,10872,10874,10877,10879,10881,10883,10885,10887],{"class":568,"line":784},[566,10873,1749],{"class":571},[566,10875,10876],{"class":575},"TresCircleGeometry",[566,10878,1755],{"class":579},[566,10880,586],{"class":571},[566,10882,589],{"class":571},[566,10884,2438],{"class":592},[566,10886,589],{"class":571},[566,10888,1689],{"class":571},[566,10890,10891,10893,10895],{"class":568,"line":794},[566,10892,1803],{"class":571},[566,10894,433],{"class":575},[566,10896,598],{"class":571},[566,10898,10899,10901,10903],{"class":568,"line":1844},[566,10900,777],{"class":571},[566,10902,708],{"class":575},[566,10904,598],{"class":571},[566,10906,10907,10909,10911],{"class":568,"line":1865},[566,10908,787],{"class":571},[566,10910,697],{"class":575},[566,10912,598],{"class":571},[566,10914,10915,10917,10919],{"class":568,"line":1874},[566,10916,669],{"class":571},[566,10918,686],{"class":575},[566,10920,598],{"class":571},[548,10922,924],{"id":923},[926,10924,10925,10935],{},[929,10926,10927],{},[932,10928,10929,10931,10933],{},[935,10930,1891],{"align":937},[935,10932,941],{"align":937},[935,10934,944],{},[946,10936,10937,10949,10962,10974,10986,10998],{},[932,10938,10939,10943,10946],{},[951,10940,10941],{"align":937},[2714,10942,9499],{},[951,10944,10945],{"align":937},"The base color that's combine with the mirror effect",[951,10947,10948],{},"'#333'",[932,10950,10951,10956,10959],{},[951,10952,10953],{"align":937},[2714,10954,10955],{},"textureWidth",[951,10957,10958],{"align":937},"the width of the texture to render on the mirror",[951,10960,10961],{},"512",[932,10963,10964,10969,10972],{},[951,10965,10966],{"align":937},[2714,10967,10968],{},"textureHeight",[951,10970,10971],{"align":937},"the height of the texture to render on the mirror",[951,10973,10961],{},[932,10975,10976,10981,10984],{},[951,10977,10978],{"align":937},[2714,10979,10980],{},"clipBias",[951,10982,10983],{"align":937},"to use the clipBias property",[951,10985,1117],{},[932,10987,10988,10993,10996],{},[951,10989,10990],{"align":937},[2714,10991,10992],{},"multisample",[951,10994,10995],{"align":937},"how many samplers will be render",[951,10997,3802],{},[932,10999,11000,11005,11008],{},[951,11001,11002],{"align":937},[2714,11003,11004],{},"shader",[951,11006,11007],{"align":937},"The texture of the smoke.",[951,11009,11010],{},"Reflector.ReflectorShader",[802,11012,11013],{},[484,11014,11015,11016,11018],{},"All the props except the ",[522,11017,9499],{},", are not reactive",[548,11020,11022],{"id":11021},"custom-mirror-effect","Custom mirror effect",[484,11024,11025],{},"For more complex effect you can provide your own shaders, you could do this creating an object and pass the uniforms, vertexShaders or fragmentShaders:",[552,11027,11029],{"className":554,"code":11028,"language":562,"meta":492,"style":492},"\u003Cscript setup lang=\"ts\">\nimport vertexShader from 'MyCustomVertexShader.glsl'\n\nconst customShader = {\n  vertexShader\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas shadows alpha>\n    \u003CTresPerspectiveCamera :position=\"[0, 0, 3]\" />\n    ...\n    \u003CReflector\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    ...\n  \u003C/TresCanvas>\n\u003C/template>\n",[522,11030,11031,11051,11067,11071,11082,11087,11091,11099,11103,11111,11123,11141,11146,11152,11165,11178,11191,11205,11209,11227,11235,11239,11247],{"__ignoreMap":492},[566,11032,11033,11035,11037,11039,11041,11043,11045,11047,11049],{"class":568,"line":493},[566,11034,572],{"class":571},[566,11036,576],{"class":575},[566,11038,580],{"class":579},[566,11040,583],{"class":579},[566,11042,586],{"class":571},[566,11044,589],{"class":571},[566,11046,593],{"class":592},[566,11048,589],{"class":571},[566,11050,598],{"class":571},[566,11052,11053,11055,11058,11060,11062,11065],{"class":568,"line":494},[566,11054,606],{"class":605},[566,11056,11057],{"class":612}," vertexShader ",[566,11059,10076],{"class":605},[566,11061,622],{"class":571},[566,11063,11064],{"class":592},"MyCustomVertexShader.glsl",[566,11066,628],{"class":571},[566,11068,11069],{"class":568,"line":631},[566,11070,634],{"emptyLinePlaceholder":500},[566,11072,11073,11075,11078,11080],{"class":568,"line":637},[566,11074,640],{"class":579},[566,11076,11077],{"class":612}," customShader ",[566,11079,586],{"class":571},[566,11081,2244],{"class":571},[566,11083,11084],{"class":568,"line":666},[566,11085,11086],{"class":612},"  vertexShader\n",[566,11088,11089],{"class":568,"line":676},[566,11090,2337],{"class":571},[566,11092,11093,11095,11097],{"class":568,"line":681},[566,11094,669],{"class":571},[566,11096,576],{"class":575},[566,11098,598],{"class":571},[566,11100,11101],{"class":568,"line":691},[566,11102,634],{"emptyLinePlaceholder":500},[566,11104,11105,11107,11109],{"class":568,"line":702},[566,11106,572],{"class":571},[566,11108,686],{"class":575},[566,11110,598],{"class":571},[566,11112,11113,11115,11117,11119,11121],{"class":568,"line":557},[566,11114,694],{"class":571},[566,11116,697],{"class":575},[566,11118,10772],{"class":579},[566,11120,10775],{"class":579},[566,11122,598],{"class":571},[566,11124,11125,11127,11129,11131,11133,11135,11137,11139],{"class":568,"line":558},[566,11126,705],{"class":571},[566,11128,1674],{"class":575},[566,11130,1677],{"class":579},[566,11132,586],{"class":571},[566,11134,589],{"class":571},[566,11136,10792],{"class":592},[566,11138,589],{"class":571},[566,11140,1689],{"class":571},[566,11142,11143],{"class":568,"line":559},[566,11144,11145],{"class":612},"    ...\n",[566,11147,11148,11150],{"class":568,"line":560},[566,11149,705],{"class":571},[566,11151,10823],{"class":575},[566,11153,11154,11157,11159,11161,11163],{"class":568,"line":561},[566,11155,11156],{"class":579},"      :rotation",[566,11158,586],{"class":571},[566,11160,589],{"class":571},[566,11162,10835],{"class":592},[566,11164,735],{"class":571},[566,11166,11167,11170,11172,11174,11176],{"class":568,"line":774},[566,11168,11169],{"class":579},"      :position-y",[566,11171,586],{"class":571},[566,11173,589],{"class":571},[566,11175,10849],{"class":592},[566,11177,735],{"class":571},[566,11179,11180,11183,11185,11187,11189],{"class":568,"line":784},[566,11181,11182],{"class":579},"      color",[566,11184,586],{"class":571},[566,11186,589],{"class":571},[566,11188,10863],{"class":592},[566,11190,735],{"class":571},[566,11192,11193,11196,11198,11200,11203],{"class":568,"line":794},[566,11194,11195],{"class":579},"      :shader",[566,11197,586],{"class":571},[566,11199,589],{"class":571},[566,11201,11202],{"class":592},"customShader",[566,11204,735],{"class":571},[566,11206,11207],{"class":568,"line":1844},[566,11208,2634],{"class":571},[566,11210,11211,11213,11215,11217,11219,11221,11223,11225],{"class":568,"line":1865},[566,11212,716],{"class":571},[566,11214,10876],{"class":575},[566,11216,1755],{"class":579},[566,11218,586],{"class":571},[566,11220,589],{"class":571},[566,11222,2438],{"class":592},[566,11224,589],{"class":571},[566,11226,1689],{"class":571},[566,11228,11229,11231,11233],{"class":568,"line":1874},[566,11230,777],{"class":571},[566,11232,433],{"class":575},[566,11234,598],{"class":571},[566,11236,11237],{"class":568,"line":2419},[566,11238,11145],{"class":612},[566,11240,11241,11243,11245],{"class":568,"line":2424},[566,11242,787],{"class":571},[566,11244,697],{"class":575},[566,11246,598],{"class":571},[566,11248,11249,11251,11253],{"class":568,"line":2024},[566,11250,669],{"class":571},[566,11252,686],{"class":575},[566,11254,598],{"class":571},[484,11256,11257],{},"The Reflector shader use the following configuration by default:",[484,11259,11260],{},"You can extend, modify or just play with them",[890,11262,11264],{"id":11263},"default-shader","Default shader",[552,11266,11270],{"className":11267,"code":11268,"language":11269,"meta":492,"style":492},"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",[522,11271,11272,11283,11299,11308,11317,11327,11332,11341,11349,11353,11362,11370,11375,11379,11392,11397,11402,11406,11411,11416,11420,11425,11430,11435,11439,11444,11448,11458,11469,11474,11479,11483,11487,11492,11496,11501,11506,11511,11515,11520,11525,11529,11533,11537,11542,11546,11551,11556,11560,11565,11570,11576,11580],{"__ignoreMap":492},[566,11273,11274,11276,11279,11281],{"class":568,"line":493},[566,11275,640],{"class":579},[566,11277,11278],{"class":612}," shader ",[566,11280,586],{"class":571},[566,11282,2244],{"class":571},[566,11284,11285,11288,11290,11292,11295,11297],{"class":568,"line":494},[566,11286,11287],{"class":575},"  name",[566,11289,2235],{"class":571},[566,11291,622],{"class":571},[566,11293,11294],{"class":592},"ReflectorShader",[566,11296,655],{"class":571},[566,11298,2918],{"class":571},[566,11300,11301,11304,11306],{"class":568,"line":631},[566,11302,11303],{"class":575},"  uniforms",[566,11305,2235],{"class":571},[566,11307,2244],{"class":571},[566,11309,11310,11313,11315],{"class":568,"line":637},[566,11311,11312],{"class":575},"    color",[566,11314,2235],{"class":571},[566,11316,2244],{"class":571},[566,11318,11319,11322,11324],{"class":568,"line":666},[566,11320,11321],{"class":575},"      value",[566,11323,2235],{"class":571},[566,11325,11326],{"class":571}," null\n",[566,11328,11329],{"class":568,"line":676},[566,11330,11331],{"class":571},"    },\n",[566,11333,11334,11337,11339],{"class":568,"line":681},[566,11335,11336],{"class":575},"    tDiffuse",[566,11338,2235],{"class":571},[566,11340,2244],{"class":571},[566,11342,11343,11345,11347],{"class":568,"line":691},[566,11344,11321],{"class":575},[566,11346,2235],{"class":571},[566,11348,11326],{"class":571},[566,11350,11351],{"class":568,"line":702},[566,11352,11331],{"class":571},[566,11354,11355,11358,11360],{"class":568,"line":557},[566,11356,11357],{"class":575},"    textureMatrix",[566,11359,2235],{"class":571},[566,11361,2244],{"class":571},[566,11363,11364,11366,11368],{"class":568,"line":558},[566,11365,11321],{"class":575},[566,11367,2235],{"class":571},[566,11369,11326],{"class":571},[566,11371,11372],{"class":568,"line":559},[566,11373,11374],{"class":571},"    }\n",[566,11376,11377],{"class":568,"line":560},[566,11378,2972],{"class":571},[566,11380,11381,11384,11386,11389],{"class":568,"line":561},[566,11382,11383],{"class":575},"  vertexShader",[566,11385,2235],{"class":571},[566,11387,11388],{"class":9802}," /* glsl */",[566,11390,11391],{"class":571},"`\n",[566,11393,11394],{"class":568,"line":774},[566,11395,11396],{"class":592},"  uniform mat4 textureMatrix;\n",[566,11398,11399],{"class":568,"line":784},[566,11400,11401],{"class":592},"  varying vec4 vUv;\n",[566,11403,11404],{"class":568,"line":794},[566,11405,634],{"emptyLinePlaceholder":500},[566,11407,11408],{"class":568,"line":1844},[566,11409,11410],{"class":592},"  #include \u003Ccommon>\n",[566,11412,11413],{"class":568,"line":1865},[566,11414,11415],{"class":592},"  #include \u003Clogdepthbuf_pars_vertex>\n",[566,11417,11418],{"class":568,"line":1874},[566,11419,634],{"emptyLinePlaceholder":500},[566,11421,11422],{"class":568,"line":2419},[566,11423,11424],{"class":592},"  void main() {\n",[566,11426,11427],{"class":568,"line":2424},[566,11428,11429],{"class":592},"    vUv = textureMatrix * vec4( position, 1.0 );\n",[566,11431,11432],{"class":568,"line":2024},[566,11433,11434],{"class":592},"    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n",[566,11436,11437],{"class":568,"line":2025},[566,11438,634],{"emptyLinePlaceholder":500},[566,11440,11441],{"class":568,"line":2026},[566,11442,11443],{"class":592},"    #include \u003Clogdepthbuf_vertex>\n",[566,11445,11446],{"class":568,"line":2027},[566,11447,634],{"emptyLinePlaceholder":500},[566,11449,11450,11453,11456],{"class":568,"line":2497},[566,11451,11452],{"class":592},"  }",[566,11454,11455],{"class":571},"`",[566,11457,2918],{"class":571},[566,11459,11460,11463,11465,11467],{"class":568,"line":2503},[566,11461,11462],{"class":575},"  fragmentShader",[566,11464,2235],{"class":571},[566,11466,11388],{"class":9802},[566,11468,11391],{"class":571},[566,11470,11471],{"class":568,"line":2512},[566,11472,11473],{"class":592},"  uniform vec3 color;\n",[566,11475,11476],{"class":568,"line":2533},[566,11477,11478],{"class":592},"  uniform sampler2D tDiffuse;\n",[566,11480,11481],{"class":568,"line":2538},[566,11482,11401],{"class":592},[566,11484,11485],{"class":568,"line":2546},[566,11486,634],{"emptyLinePlaceholder":500},[566,11488,11489],{"class":568,"line":2561},[566,11490,11491],{"class":592},"  #include \u003Clogdepthbuf_pars_fragment>\n",[566,11493,11494],{"class":568,"line":2576},[566,11495,634],{"emptyLinePlaceholder":500},[566,11497,11498],{"class":568,"line":2581},[566,11499,11500],{"class":592},"  float blendOverlay( float base, float blend ) {\n",[566,11502,11503],{"class":568,"line":2590},[566,11504,11505],{"class":592},"    return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n",[566,11507,11508],{"class":568,"line":2595},[566,11509,11510],{"class":592},"  }\n",[566,11512,11513],{"class":568,"line":2603},[566,11514,634],{"emptyLinePlaceholder":500},[566,11516,11517],{"class":568,"line":2616},[566,11518,11519],{"class":592},"  vec3 blendOverlay( vec3 base, vec3 blend ) {\n",[566,11521,11522],{"class":568,"line":2631},[566,11523,11524],{"class":592},"    return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n",[566,11526,11527],{"class":568,"line":2637},[566,11528,11510],{"class":592},[566,11530,11531],{"class":568,"line":2658},[566,11532,634],{"emptyLinePlaceholder":500},[566,11534,11535],{"class":568,"line":2668},[566,11536,11424],{"class":592},[566,11538,11539],{"class":568,"line":2677},[566,11540,11541],{"class":592},"    #include \u003Clogdepthbuf_fragment>\n",[566,11543,11544],{"class":568,"line":2686},[566,11545,634],{"emptyLinePlaceholder":500},[566,11547,11548],{"class":568,"line":5336},[566,11549,11550],{"class":592},"    vec4 base = texture2DProj( tDiffuse, vUv );\n",[566,11552,11553],{"class":568,"line":5345},[566,11554,11555],{"class":592},"    gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n",[566,11557,11558],{"class":568,"line":5350},[566,11559,634],{"emptyLinePlaceholder":500},[566,11561,11562],{"class":568,"line":5358},[566,11563,11564],{"class":592},"    #include \u003Ctonemapping_fragment>\n",[566,11566,11567],{"class":568,"line":5373},[566,11568,11569],{"class":592},"    #include \u003Ccolorspace_fragment>\n",[566,11571,11572,11574],{"class":568,"line":5388},[566,11573,11452],{"class":592},[566,11575,11391],{"class":571},[566,11577,11578],{"class":568,"line":5403},[566,11579,634],{"emptyLinePlaceholder":500},[566,11581,11582],{"class":568,"line":5418},[566,11583,2337],{"class":571},[1538,11585,11586],{},"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 .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 .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":492,"searchDepth":493,"depth":494,"links":11588},[11589,11590,11591],{"id":550,"depth":494,"text":15},{"id":923,"depth":494,"text":924},{"id":11021,"depth":494,"text":11022,"children":11592},[11593],{"id":11263,"depth":631,"text":11264},"Create real-time reflections of your scene.",{},{"title":433,"description":11594},"fTyCkcleBhTAlUD12viac9Ksqji4-Me4YbgFoLsJIZY",{"id":11599,"title":437,"body":11600,"description":12561,"extension":497,"links":498,"meta":12562,"navigation":500,"path":438,"seo":12563,"stem":439,"__hash__":12564},"docs/2.api/9.objects/text.md",{"type":481,"value":11601,"toc":12555},[11602,11607,11637,11651,11655,11676,11769,11771,11787,11795,12020,12030,12032,12060,12062,12536,12553],[514,11603,11604],{},[11605,11606],"objects-sdf-text",{},[484,11608,11609,11612,11613,11618,11619,11626,11627,6608,11630,3445,11633,11636],{},[522,11610,11611],{},"\u003CText />"," renders crisp, scalable text using ",[527,11614,11617],{"href":11615,"rel":11616},"https://en.wikipedia.org/wiki/Signed_distance_function",[531],"SDF (signed distance field)"," glyphs, wrapping ",[527,11620,11623],{"href":11621,"rel":11622},"https://github.com/protectwise/troika/tree/main/packages/troika-three-text",[531],[522,11624,11625],{},"troika-three-text",". It consumes real ",[522,11628,11629],{},".ttf",[522,11631,11632],{},".otf",[522,11634,11635],{},".woff"," font files at runtime and supports kerning, ligatures, RTL/bidi and unicode fallback.",[484,11638,11639,11640,11642,11643,11646,11647,11650],{},"The component owns the underlying troika ",[522,11641,437],{}," instance: it calls ",[522,11644,11645],{},".sync()"," whenever props change and disposes of the instance automatically when unmounted, so you never need the manual ",[522,11648,11649],{},"\u003Cprimitive>"," wiring.",[548,11652,11654],{"id":11653},"text3d-vs-text-which-do-i-use","Text3D vs Text — which do I use?",[6511,11656,11657],{},[484,11658,11659,11660,11665,11666,11669,11670,11675],{},"Use ",[2714,11661,11662],{},[522,11663,11664],{},"\u003CText3D>"," for chunky, extruded 3D titles from a pre-baked ",[522,11667,11668],{},"typeface.json"," font. Use ",[2714,11671,11672],{},[522,11673,11674],{},"\u003CText>"," for labels, UI, body copy and multilingual content where kerning, wrapping and unicode fallback matter.",[926,11677,11678,11692],{},[929,11679,11680],{},[932,11681,11682,11684,11688],{},[935,11683],{"align":937},[935,11685,11686],{"align":937},[522,11687,11664],{},[935,11689,11690],{"align":937},[522,11691,11674],{},[946,11693,11694,11710,11732,11745,11756],{},[932,11695,11696,11701,11707],{},[951,11697,11698],{"align":937},[2714,11699,11700],{},"Technique",[951,11702,11703,11704],{"align":937},"Extruded ",[522,11705,11706],{},"TextGeometry",[951,11708,11709],{"align":937},"SDF, runtime-generated",[932,11711,11712,11717,11722],{},[951,11713,11714],{"align":937},[2714,11715,11716],{},"Font input",[951,11718,11719,11720],{"align":937},"pre-baked ",[522,11721,11668],{},[951,11723,11724,11725,11727,11728,11727,11730],{"align":937},"real ",[522,11726,11629],{}," / ",[522,11729,11632],{},[522,11731,11635],{},[932,11733,11734,11739,11742],{},[951,11735,11736],{"align":937},[2714,11737,11738],{},"Kerning / ligatures / RTL",[951,11740,11741],{"align":937},"✗",[951,11743,11744],{"align":937},"✓",[932,11746,11747,11752,11754],{},[951,11748,11749],{"align":937},[2714,11750,11751],{},"Unicode fallback",[951,11753,11741],{"align":937},[951,11755,11744],{"align":937},[932,11757,11758,11763,11766],{},[951,11759,11760],{"align":937},[2714,11761,11762],{},"Best for",[951,11764,11765],{"align":937},"3D titles",[951,11767,11768],{"align":937},"labels, UI, multilingual",[548,11770,15],{"id":550},[484,11772,11773,11774,11776,11777,11782,11783,11786],{},"The text can be provided through the ",[522,11775,1490],{}," prop or the default slot. By default the ",[527,11778,11781],{"href":11779,"rel":11780},"https://fonts.google.com/specimen/Roboto",[531],"Roboto"," font is loaded from Google Fonts; pass the ",[522,11784,11785],{},"font"," prop to use your own font file.",[6511,11788,11789],{},[484,11790,11791,11792,11794],{},"For dynamic or reactive content, prefer the ",[522,11793,1490],{}," prop. The default slot is best for static strings, since reactive values interpolated into the slot may not always re-trigger an update.",[552,11796,11798],{"className":554,"code":11797,"language":562,"meta":492,"style":492},"\u003Cscript setup lang=\"ts\">\nimport { Text } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 0, 6]\" />\n    \u003CText\n      text=\"Hello TresJS\"\n      font=\"/fonts/Inter.woff\"\n      :font-size=\"0.5\"\n      color=\"#ffffff\"\n      anchor-x=\"center\"\n      anchor-y=\"middle\"\n      :max-width=\"4\"\n      @sync=\"onSync\"\n    />\n  \u003C/TresCanvas>\n\u003C/template>\n",[522,11799,11800,11820,11839,11847,11851,11859,11867,11886,11893,11907,11921,11934,11946,11959,11973,11986,12000,12004,12012],{"__ignoreMap":492},[566,11801,11802,11804,11806,11808,11810,11812,11814,11816,11818],{"class":568,"line":493},[566,11803,572],{"class":571},[566,11805,576],{"class":575},[566,11807,580],{"class":579},[566,11809,583],{"class":579},[566,11811,586],{"class":571},[566,11813,589],{"class":571},[566,11815,593],{"class":592},[566,11817,589],{"class":571},[566,11819,598],{"class":571},[566,11821,11822,11824,11826,11829,11831,11833,11835,11837],{"class":568,"line":494},[566,11823,606],{"class":605},[566,11825,609],{"class":571},[566,11827,11828],{"class":612}," Text",[566,11830,616],{"class":571},[566,11832,619],{"class":605},[566,11834,622],{"class":571},[566,11836,625],{"class":592},[566,11838,628],{"class":571},[566,11840,11841,11843,11845],{"class":568,"line":631},[566,11842,669],{"class":571},[566,11844,576],{"class":575},[566,11846,598],{"class":571},[566,11848,11849],{"class":568,"line":637},[566,11850,634],{"emptyLinePlaceholder":500},[566,11852,11853,11855,11857],{"class":568,"line":666},[566,11854,572],{"class":571},[566,11856,686],{"class":575},[566,11858,598],{"class":571},[566,11860,11861,11863,11865],{"class":568,"line":676},[566,11862,694],{"class":571},[566,11864,697],{"class":575},[566,11866,598],{"class":571},[566,11868,11869,11871,11873,11875,11877,11879,11882,11884],{"class":568,"line":681},[566,11870,705],{"class":571},[566,11872,1674],{"class":575},[566,11874,1677],{"class":579},[566,11876,586],{"class":571},[566,11878,589],{"class":571},[566,11880,11881],{"class":592},"[0, 0, 6]",[566,11883,589],{"class":571},[566,11885,1689],{"class":571},[566,11887,11888,11890],{"class":568,"line":691},[566,11889,705],{"class":571},[566,11891,11892],{"class":575},"Text\n",[566,11894,11895,11898,11900,11902,11905],{"class":568,"line":702},[566,11896,11897],{"class":579},"      text",[566,11899,586],{"class":571},[566,11901,589],{"class":571},[566,11903,11904],{"class":592},"Hello TresJS",[566,11906,735],{"class":571},[566,11908,11909,11912,11914,11916,11919],{"class":568,"line":557},[566,11910,11911],{"class":579},"      font",[566,11913,586],{"class":571},[566,11915,589],{"class":571},[566,11917,11918],{"class":592},"/fonts/Inter.woff",[566,11920,735],{"class":571},[566,11922,11923,11926,11928,11930,11932],{"class":568,"line":558},[566,11924,11925],{"class":579},"      :font-size",[566,11927,586],{"class":571},[566,11929,589],{"class":571},[566,11931,1837],{"class":592},[566,11933,735],{"class":571},[566,11935,11936,11938,11940,11942,11944],{"class":568,"line":559},[566,11937,11182],{"class":579},[566,11939,586],{"class":571},[566,11941,589],{"class":571},[566,11943,10394],{"class":592},[566,11945,735],{"class":571},[566,11947,11948,11951,11953,11955,11957],{"class":568,"line":560},[566,11949,11950],{"class":579},"      anchor-x",[566,11952,586],{"class":571},[566,11954,589],{"class":571},[566,11956,1198],{"class":592},[566,11958,735],{"class":571},[566,11960,11961,11964,11966,11968,11971],{"class":568,"line":561},[566,11962,11963],{"class":579},"      anchor-y",[566,11965,586],{"class":571},[566,11967,589],{"class":571},[566,11969,11970],{"class":592},"middle",[566,11972,735],{"class":571},[566,11974,11975,11978,11980,11982,11984],{"class":568,"line":774},[566,11976,11977],{"class":579},"      :max-width",[566,11979,586],{"class":571},[566,11981,589],{"class":571},[566,11983,3802],{"class":592},[566,11985,735],{"class":571},[566,11987,11988,11991,11993,11995,11998],{"class":568,"line":784},[566,11989,11990],{"class":579},"      @sync",[566,11992,586],{"class":571},[566,11994,589],{"class":571},[566,11996,11997],{"class":592},"onSync",[566,11999,735],{"class":571},[566,12001,12002],{"class":568,"line":794},[566,12003,2500],{"class":571},[566,12005,12006,12008,12010],{"class":568,"line":1844},[566,12007,787],{"class":571},[566,12009,697],{"class":575},[566,12011,598],{"class":571},[566,12013,12014,12016,12018],{"class":568,"line":1865},[566,12015,669],{"class":571},[566,12017,686],{"class":575},[566,12019,598],{"class":571},[484,12021,12022,12023,6608,12025,6556,12027,12029],{},"Any extra props (such as ",[522,12024,10294],{},[522,12026,2289],{},[522,12028,9482],{},") are forwarded to the underlying object.",[548,12031,1279],{"id":1278},[926,12033,12034,12042],{},[929,12035,12036],{},[932,12037,12038,12040],{},[935,12039,1288],{"align":937},[935,12041,941],{"align":937},[946,12043,12044],{},[932,12045,12046,12051],{},[951,12047,12048],{"align":937},[2714,12049,12050],{},"sync",[951,12052,12053,12054,12056,12057,12059],{"align":937},"Fires after the text layout has completed (",[522,12055,11645],{},"). The troika ",[522,12058,437],{}," instance is emitted.",[548,12061,924],{"id":923},[926,12063,12064,12074],{},[929,12065,12066],{},[932,12067,12068,12070,12072],{},[935,12069,1891],{"align":937},[935,12071,941],{"align":937},[935,12073,944],{},[946,12075,12076,12087,12101,12113,12127,12142,12161,12175,12191,12205,12229,12246,12261,12276,12294,12308,12331,12350,12369,12383,12397,12411,12425,12438,12452,12466,12479,12493,12507,12522],{},[932,12077,12078,12082,12085],{},[951,12079,12080],{"align":937},[2714,12081,1490],{},[951,12083,12084],{"align":937},"The string of text to render. Can also be provided via the default slot.",[951,12086],{},[932,12088,12089,12094,12097],{},[951,12090,12091],{"align":937},[2714,12092,12093],{},"characters",[951,12095,12096],{"align":937},"The set of characters to pre-generate SDF glyphs for.",[951,12098,12099],{},[522,12100,2176],{},[932,12102,12103,12107,12110],{},[951,12104,12105],{"align":937},[2714,12106,9499],{},[951,12108,12109],{"align":937},"The color of the text.",[951,12111,12112],{},"white",[932,12114,12115,12120,12123],{},[951,12116,12117],{"align":937},[2714,12118,12119],{},"fontSize",[951,12121,12122],{"align":937},"The em-height at which to render the font, in local world units.",[951,12124,12125],{},[522,12126,1783],{},[932,12128,12129,12134,12137],{},[951,12130,12131],{"align":937},[2714,12132,12133],{},"fontWeight",[951,12135,12136],{"align":937},"The weight of the font (variable fonts only).",[951,12138,12139],{},[522,12140,12141],{},"normal",[932,12143,12144,12149,12157],{},[951,12145,12146],{"align":937},[2714,12147,12148],{},"fontStyle",[951,12150,12151,12152,6556,12154,812],{"align":937},"The style of the font, ",[522,12153,12141],{},[522,12155,12156],{},"italic",[951,12158,12159],{},[522,12160,12141],{},[932,12162,12163,12168,12171],{},[951,12164,12165],{"align":937},[2714,12166,12167],{},"maxWidth",[951,12169,12170],{"align":937},"The maximum width of the text block, above which lines wrap.",[951,12172,12173],{},[522,12174,1731],{},[932,12176,12177,12182,12187],{},[951,12178,12179],{"align":937},[2714,12180,12181],{},"lineHeight",[951,12183,12184,12185,812],{"align":937},"The height of each line of text, as a multiple of ",[522,12186,12119],{},[951,12188,12189],{},[522,12190,12141],{},[932,12192,12193,12198,12201],{},[951,12194,12195],{"align":937},[2714,12196,12197],{},"letterSpacing",[951,12199,12200],{"align":937},"Spacing between letters after layout, in local world units.",[951,12202,12203],{},[522,12204,1117],{},[932,12206,12207,12212,12225],{},[951,12208,12209],{"align":937},[2714,12210,12211],{},"textAlign",[951,12213,12214,12215,6608,12217,6608,12220,6556,12222,812],{"align":937},"Horizontal alignment: ",[522,12216,937],{},[522,12218,12219],{},"right",[522,12221,1198],{},[522,12223,12224],{},"justify",[951,12226,12227],{},[522,12228,937],{},[932,12230,12231,12235,12244],{},[951,12232,12233],{"align":937},[2714,12234,11785],{},[951,12236,12237,12238,6608,12240,6608,12242,1520],{"align":937},"URL of a custom font file (",[522,12239,11629],{},[522,12241,11632],{},[522,12243,11635],{},[951,12245,11781],{},[932,12247,12248,12253,12256],{},[951,12249,12250],{"align":937},[2714,12251,12252],{},"anchorX",[951,12254,12255],{"align":937},"Horizontal position in the text block that lines up with the local origin.",[951,12257,12258],{},[522,12259,12260],{},"'center'",[932,12262,12263,12268,12271],{},[951,12264,12265],{"align":937},[2714,12266,12267],{},"anchorY",[951,12269,12270],{"align":937},"Vertical position in the text block that lines up with the local origin.",[951,12272,12273],{},[522,12274,12275],{},"'middle'",[932,12277,12278,12283,12290],{},[951,12279,12280],{"align":937},[2714,12281,12282],{},"clipRect",[951,12284,12285,12286,12289],{"align":937},"Clipping region ",[522,12287,12288],{},"[minX, minY, maxX, maxY]"," in local units.",[951,12291,12292],{},[522,12293,2176],{},[932,12295,12296,12301,12304],{},[951,12297,12298],{"align":937},[2714,12299,12300],{},"depthOffset",[951,12302,12303],{"align":937},"Fixed offset added to the text's rendered z-depth (helps prevent z-fighting).",[951,12305,12306],{},[522,12307,1117],{},[932,12309,12310,12315,12327],{},[951,12311,12312],{"align":937},[2714,12313,12314],{},"direction",[951,12316,12317,12318,6608,12321,6556,12324,812],{"align":937},"Base text direction: ",[522,12319,12320],{},"auto",[522,12322,12323],{},"ltr",[522,12325,12326],{},"rtl",[951,12328,12329],{},[522,12330,12320],{},[932,12332,12333,12338,12346],{},[951,12334,12335],{"align":937},[2714,12336,12337],{},"overflowWrap",[951,12339,12340,12341,6556,12343,812],{"align":937},"How text wraps when a word is too long: ",[522,12342,12141],{},[522,12344,12345],{},"break-word",[951,12347,12348],{},[522,12349,12141],{},[932,12351,12352,12357,12365],{},[951,12353,12354],{"align":937},[2714,12355,12356],{},"whiteSpace",[951,12358,12359,12360,6556,12362,812],{"align":937},"Whitespace handling: ",[522,12361,12141],{},[522,12363,12364],{},"nowrap",[951,12366,12367],{},[522,12368,12141],{},[932,12370,12371,12376,12379],{},[951,12372,12373],{"align":937},[2714,12374,12375],{},"outlineWidth",[951,12377,12378],{"align":937},"Width of an outline/halo drawn around each glyph.",[951,12380,12381],{},[522,12382,1117],{},[932,12384,12385,12390,12393],{},[951,12386,12387],{"align":937},[2714,12388,12389],{},"outlineOffsetX",[951,12391,12392],{"align":937},"Horizontal offset of the text outline.",[951,12394,12395],{},[522,12396,1117],{},[932,12398,12399,12404,12407],{},[951,12400,12401],{"align":937},[2714,12402,12403],{},"outlineOffsetY",[951,12405,12406],{"align":937},"Vertical offset of the text outline.",[951,12408,12409],{},[522,12410,1117],{},[932,12412,12413,12418,12421],{},[951,12414,12415],{"align":937},[2714,12416,12417],{},"outlineBlur",[951,12419,12420],{"align":937},"Blur radius applied to the text outline.",[951,12422,12423],{},[522,12424,1117],{},[932,12426,12427,12432,12435],{},[951,12428,12429],{"align":937},[2714,12430,12431],{},"outlineColor",[951,12433,12434],{"align":937},"Color of the text outline.",[951,12436,12437],{},"black",[932,12439,12440,12445,12448],{},[951,12441,12442],{"align":937},[2714,12443,12444],{},"outlineOpacity",[951,12446,12447],{"align":937},"Opacity of the text outline.",[951,12449,12450],{},[522,12451,1783],{},[932,12453,12454,12459,12462],{},[951,12455,12456],{"align":937},[2714,12457,12458],{},"strokeWidth",[951,12460,12461],{"align":937},"Width of an inner stroke drawn on each glyph.",[951,12463,12464],{},[522,12465,1117],{},[932,12467,12468,12473,12476],{},[951,12469,12470],{"align":937},[2714,12471,12472],{},"strokeColor",[951,12474,12475],{"align":937},"Color of the glyph stroke.",[951,12477,12478],{},"grey",[932,12480,12481,12486,12489],{},[951,12482,12483],{"align":937},[2714,12484,12485],{},"strokeOpacity",[951,12487,12488],{"align":937},"Opacity of the glyph stroke.",[951,12490,12491],{},[522,12492,1783],{},[932,12494,12495,12500,12503],{},[951,12496,12497],{"align":937},[2714,12498,12499],{},"fillOpacity",[951,12501,12502],{"align":937},"Opacity of the glyph fill.",[951,12504,12505],{},[522,12506,1783],{},[932,12508,12509,12514,12517],{},[951,12510,12511],{"align":937},[2714,12512,12513],{},"sdfGlyphSize",[951,12515,12516],{"align":937},"The size of each glyph's SDF texture, in pixels.",[951,12518,12519],{},[522,12520,12521],{},"64",[932,12523,12524,12529,12532],{},[951,12525,12526],{"align":937},[2714,12527,12528],{},"glyphGeometryDetail",[951,12530,12531],{"align":937},"The level of detail of each glyph's geometry tessellation.",[951,12533,12534],{},[522,12535,1783],{},[6511,12537,12538],{},[484,12539,12540,12541,6608,12543,6608,12545,3445,12547,12549,12550,12552],{},"Only ",[522,12542,12119],{},[522,12544,12252],{},[522,12546,12267],{},[522,12548,12513],{}," are defaulted by the component. All other defaults are applied by ",[522,12551,11625],{}," itself, so the values above reflect troika's behaviour when the prop is left unset.",[1538,12554,1989],{},{"title":492,"searchDepth":493,"depth":494,"links":12556},[12557,12558,12559,12560],{"id":11653,"depth":494,"text":11654},{"id":550,"depth":494,"text":15},{"id":1278,"depth":494,"text":1279},{"id":923,"depth":494,"text":924},"Render high-quality SDF text from real font files using troika-three-text.",{},{"title":437,"description":12561},"BMYiLiRNYCu_1pIo7EPvIyNo19CSoOthV_K98j7oyC0",{"id":12566,"title":441,"body":12567,"description":13110,"extension":497,"links":498,"meta":13111,"navigation":500,"path":442,"seo":13112,"stem":443,"__hash__":13113},"docs/2.api/9.objects/text-3d.md",{"type":481,"value":12568,"toc":13106},[12569,12574,12585,12587,12605,12713,12729,12822,12825,12943,12945,13103],[514,12570,12571],{},[12572,12573],"objects-text",{},[484,12575,12576,12579,12580,12584],{},[522,12577,12578],{},"\u003CText3D />"," is a component that renders text in 3D. It is a wrapper around the ",[527,12581,11706],{"href":12582,"rel":12583},"https://threejs.org/docs/#api/en/geometries/TextGeometry",[531]," class.",[548,12586,15],{"id":550},[484,12588,12589,12590,12592,12593,12595,12596,12599,12600],{},"To use the ",[522,12591,12578],{}," component you need to pass the ",[522,12594,11785],{}," prop with the URL of the font JSON file you want to use. TextGeometry uses ",[522,12597,12598],{},"typeface",".json generated fonts, you can generate yours ",[527,12601,12604],{"href":12602,"rel":12603},"http://gero3.github.io/facetype.js/",[531],"here",[552,12606,12608],{"className":554,"code":12607,"language":562,"meta":492,"style":492},"\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",[522,12609,12610,12618,12626,12634,12641,12655,12669,12673,12681,12689,12697,12705],{"__ignoreMap":492},[566,12611,12612,12614,12616],{"class":568,"line":493},[566,12613,572],{"class":571},[566,12615,686],{"class":575},[566,12617,598],{"class":571},[566,12619,12620,12622,12624],{"class":568,"line":494},[566,12621,694],{"class":571},[566,12623,697],{"class":575},[566,12625,598],{"class":571},[566,12627,12628,12630,12632],{"class":568,"line":631},[566,12629,705],{"class":571},[566,12631,708],{"class":575},[566,12633,598],{"class":571},[566,12635,12636,12638],{"class":568,"line":637},[566,12637,716],{"class":571},[566,12639,12640],{"class":575},"Text3D\n",[566,12642,12643,12646,12648,12650,12653],{"class":568,"line":666},[566,12644,12645],{"class":579},"        text",[566,12647,586],{"class":571},[566,12649,589],{"class":571},[566,12651,12652],{"class":592},"TresJS",[566,12654,735],{"class":571},[566,12656,12657,12660,12662,12664,12667],{"class":568,"line":676},[566,12658,12659],{"class":579},"        font",[566,12661,586],{"class":571},[566,12663,589],{"class":571},[566,12665,12666],{"class":592},"/fonts/FiraCodeRegular.json",[566,12668,735],{"class":571},[566,12670,12671],{"class":568,"line":681},[566,12672,3839],{"class":571},[566,12674,12675,12677,12679],{"class":568,"line":691},[566,12676,1749],{"class":571},[566,12678,2663],{"class":575},[566,12680,1689],{"class":571},[566,12682,12683,12685,12687],{"class":568,"line":702},[566,12684,1803],{"class":571},[566,12686,441],{"class":575},[566,12688,598],{"class":571},[566,12690,12691,12693,12695],{"class":568,"line":557},[566,12692,777],{"class":571},[566,12694,708],{"class":575},[566,12696,598],{"class":571},[566,12698,12699,12701,12703],{"class":568,"line":558},[566,12700,787],{"class":571},[566,12702,697],{"class":575},[566,12704,598],{"class":571},[566,12706,12707,12709,12711],{"class":568,"line":559},[566,12708,669],{"class":571},[566,12710,686],{"class":575},[566,12712,598],{"class":571},[484,12714,12715,12716,12719,12720,12722,12723,12725,12726,12728],{},"Notice that you need to pass the ",[522,12717,12718],{},"\u003CTresMeshNormalMaterial />"," component as a child of the ",[522,12721,12578],{}," component. This is because ",[522,12724,12578],{}," is a ",[522,12727,4440],{}," 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:",[552,12730,12732],{"className":554,"code":12731,"language":562,"meta":492,"style":492},"\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",[522,12733,12734,12742,12750,12758,12777,12782,12790,12798,12806,12814],{"__ignoreMap":492},[566,12735,12736,12738,12740],{"class":568,"line":493},[566,12737,572],{"class":571},[566,12739,686],{"class":575},[566,12741,598],{"class":571},[566,12743,12744,12746,12748],{"class":568,"line":494},[566,12745,694],{"class":571},[566,12747,697],{"class":575},[566,12749,598],{"class":571},[566,12751,12752,12754,12756],{"class":568,"line":631},[566,12753,705],{"class":571},[566,12755,708],{"class":575},[566,12757,598],{"class":571},[566,12759,12760,12762,12764,12767,12769,12771,12773,12775],{"class":568,"line":637},[566,12761,716],{"class":571},[566,12763,441],{"class":575},[566,12765,12766],{"class":579}," font",[566,12768,586],{"class":571},[566,12770,589],{"class":571},[566,12772,12666],{"class":592},[566,12774,589],{"class":571},[566,12776,598],{"class":571},[566,12778,12779],{"class":568,"line":666},[566,12780,12781],{"class":612},"        TresJS\n",[566,12783,12784,12786,12788],{"class":568,"line":676},[566,12785,1749],{"class":571},[566,12787,2663],{"class":575},[566,12789,1689],{"class":571},[566,12791,12792,12794,12796],{"class":568,"line":681},[566,12793,1803],{"class":571},[566,12795,441],{"class":575},[566,12797,598],{"class":571},[566,12799,12800,12802,12804],{"class":568,"line":691},[566,12801,777],{"class":571},[566,12803,708],{"class":575},[566,12805,598],{"class":571},[566,12807,12808,12810,12812],{"class":568,"line":702},[566,12809,787],{"class":571},[566,12811,697],{"class":575},[566,12813,598],{"class":571},[566,12815,12816,12818,12820],{"class":568,"line":557},[566,12817,669],{"class":571},[566,12819,686],{"class":575},[566,12821,598],{"class":571},[484,12823,12824],{},"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",[552,12826,12828],{"className":554,"code":12827,"language":562,"meta":492,"style":492},"\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",[522,12829,12830,12838,12859,12867,12875,12881,12894,12906,12910,12915,12919,12927,12935],{"__ignoreMap":492},[566,12831,12832,12834,12836],{"class":568,"line":493},[566,12833,572],{"class":571},[566,12835,686],{"class":575},[566,12837,598],{"class":571},[566,12839,12840,12842,12845,12848,12850,12852,12855,12857],{"class":568,"line":494},[566,12841,694],{"class":571},[566,12843,12844],{"class":575},"input",[566,12846,12847],{"class":579}," v-model",[566,12849,586],{"class":571},[566,12851,589],{"class":571},[566,12853,12854],{"class":592},"myReactiveText",[566,12856,589],{"class":571},[566,12858,1689],{"class":571},[566,12860,12861,12863,12865],{"class":568,"line":631},[566,12862,694],{"class":571},[566,12864,697],{"class":575},[566,12866,598],{"class":571},[566,12868,12869,12871,12873],{"class":568,"line":637},[566,12870,705],{"class":571},[566,12872,708],{"class":575},[566,12874,598],{"class":571},[566,12876,12877,12879],{"class":568,"line":666},[566,12878,716],{"class":571},[566,12880,12640],{"class":575},[566,12882,12883,12886,12888,12890,12892],{"class":568,"line":676},[566,12884,12885],{"class":579},"        :text",[566,12887,586],{"class":571},[566,12889,589],{"class":571},[566,12891,12854],{"class":592},[566,12893,735],{"class":571},[566,12895,12896,12898,12900,12902,12904],{"class":568,"line":681},[566,12897,12659],{"class":579},[566,12899,586],{"class":571},[566,12901,589],{"class":571},[566,12903,12666],{"class":592},[566,12905,735],{"class":571},[566,12907,12908],{"class":568,"line":691},[566,12909,3783],{"class":579},[566,12911,12912],{"class":568,"line":702},[566,12913,12914],{"class":579},"        need-updates\n",[566,12916,12917],{"class":568,"line":557},[566,12918,771],{"class":571},[566,12920,12921,12923,12925],{"class":568,"line":558},[566,12922,777],{"class":571},[566,12924,708],{"class":575},[566,12926,598],{"class":571},[566,12928,12929,12931,12933],{"class":568,"line":559},[566,12930,787],{"class":571},[566,12932,697],{"class":575},[566,12934,598],{"class":571},[566,12936,12937,12939,12941],{"class":568,"line":560},[566,12938,669],{"class":571},[566,12940,686],{"class":575},[566,12942,598],{"class":571},[548,12944,924],{"id":923},[926,12946,12947,12957],{},[929,12948,12949],{},[932,12950,12951,12953,12955],{},[935,12952,1891],{"align":937},[935,12954,941],{"align":937},[935,12956,944],{},[946,12958,12959,12970,12981,12993,13005,13018,13030,13043,13056,13068,13080,13091],{},[932,12960,12961,12965,12968],{},[951,12962,12963],{"align":937},[2714,12964,11785],{},[951,12966,12967],{"align":937},"The font data or font name to use for the text.",[951,12969],{},[932,12971,12972,12976,12979],{},[951,12973,12974],{"align":937},[2714,12975,1490],{},[951,12977,12978],{"align":937},"The text to display.",[951,12980],{},[932,12982,12983,12988,12991],{},[951,12984,12985],{"align":937},[2714,12986,12987],{},"size",[951,12989,12990],{"align":937},"The size of the text.",[951,12992,1837],{},[932,12994,12995,12999,13002],{},[951,12996,12997],{"align":937},[2714,12998,2735],{},[951,13000,13001],{"align":937},"The height of the text.",[951,13003,13004],{},"0.2",[932,13006,13007,13012,13015],{},[951,13008,13009],{"align":937},[2714,13010,13011],{},"curveSegments",[951,13013,13014],{"align":937},"The number of curve segments to use when generating the text geometry.",[951,13016,13017],{},"5",[932,13019,13020,13025,13028],{},[951,13021,13022],{"align":937},[2714,13023,13024],{},"bevelEnabled",[951,13026,13027],{"align":937},"A flag indicating whether beveling should be enabled for the text.",[951,13029,1092],{},[932,13031,13032,13037,13040],{},[951,13033,13034],{"align":937},[2714,13035,13036],{},"bevelThickness",[951,13038,13039],{"align":937},"The thickness of the beveled edge on the text.",[951,13041,13042],{},"0.05",[932,13044,13045,13050,13053],{},[951,13046,13047],{"align":937},[2714,13048,13049],{},"bevelSize",[951,13051,13052],{"align":937},"The size of the beveled edge on the text.",[951,13054,13055],{},"0.02",[932,13057,13058,13063,13066],{},[951,13059,13060],{"align":937},[2714,13061,13062],{},"bevelOffset",[951,13064,13065],{"align":937},"The offset of the beveled edge on the text.",[951,13067,1117],{},[932,13069,13070,13075,13078],{},[951,13071,13072],{"align":937},[2714,13073,13074],{},"bevelSegments",[951,13076,13077],{"align":937},"The number of bevel segments to use when generating the text geometry.",[951,13079,3802],{},[932,13081,13082,13086,13089],{},[951,13083,13084],{"align":937},[2714,13085,1198],{},[951,13087,13088],{"align":937},"To center the text",[951,13090,1132],{},[932,13092,13093,13098,13101],{},[951,13094,13095],{"align":937},[2714,13096,13097],{},"needUpdates",[951,13099,13100],{"align":937},"This props add reactivity",[951,13102,1132],{},[1538,13104,13105],{},"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":492,"searchDepth":493,"depth":494,"links":13107},[13108,13109],{"id":550,"depth":494,"text":15},{"id":923,"depth":494,"text":924},"Render text in 3D using TextGeometry.",{},{"title":441,"description":13110},"sdYCewwuqrXIt1Ti234B-8w4L1gJgGQcw62huYPBpjc",1782052436328]