[{"data":1,"prerenderedAt":13714},["ShallowReactive",2],{"navigation":3,"/api/objects":490,"/api/objects-surround":515,"objects-list":520},[4,26],{"title":5,"path":6,"stem":7,"children":8},"Getting Started","/getting-started","1.getting-started/1.index",[9,10,14,18,22],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"Installation Guide","/getting-started/installation","1.getting-started/2.installation",{"title":15,"path":16,"stem":17},"Usage","/getting-started/usage","1.getting-started/3.usage",{"title":19,"path":20,"stem":21},"Loading Models","/getting-started/loading-models","1.getting-started/4.loading-models",{"title":23,"path":24,"stem":25},"Upgrade Guide","/getting-started/upgrade-guide","1.getting-started/5.upgrade-guide",{"title":27,"path":28,"stem":29,"children":30},"Api","/api","2.api",[31,34,88,118,160,202,300,326,360,410,456],{"title":32,"path":28,"stem":33},"All","2.api/index",{"title":35,"path":36,"stem":37,"children":38},"Abstractions","/api/abstractions","2.api/1.abstractions/index",[39,40,44,48,52,56,60,64,68,72,76,80,84],{"title":35,"path":36,"stem":37},{"title":41,"path":42,"stem":43},"Align","/api/abstractions/align","2.api/1.abstractions/align",{"title":45,"path":46,"stem":47},"Billboard","/api/abstractions/billboard","2.api/1.abstractions/billboard",{"title":49,"path":50,"stem":51},"Camera Shake","/api/abstractions/camera-shake","2.api/1.abstractions/camera-shake",{"title":53,"path":54,"stem":55},"Decal","/api/abstractions/decal","2.api/1.abstractions/decal",{"title":57,"path":58,"stem":59},"Edges","/api/abstractions/edges","2.api/1.abstractions/edges",{"title":61,"path":62,"stem":63},"Fit","/api/abstractions/fit","2.api/1.abstractions/fit",{"title":65,"path":66,"stem":67},"Levioso (Float)","/api/abstractions/levioso","2.api/1.abstractions/levioso",{"title":69,"path":70,"stem":71},"Mask","/api/abstractions/mask","2.api/1.abstractions/mask",{"title":73,"path":74,"stem":75},"Outline","/api/abstractions/outline","2.api/1.abstractions/outline",{"title":77,"path":78,"stem":79},"Sampler","/api/abstractions/sampler","2.api/1.abstractions/sampler",{"title":81,"path":82,"stem":83},"ScreenSizer","/api/abstractions/screen-sizer","2.api/1.abstractions/screen-sizer",{"title":85,"path":86,"stem":87},"ScreenSpace","/api/abstractions/screen-space","2.api/1.abstractions/screen-space",{"title":89,"path":90,"stem":91,"children":92},"Controls","/api/controls","2.api/2.controls/index",[93,94,98,102,106,110,114],{"title":89,"path":90,"stem":91},{"title":95,"path":96,"stem":97},"Camera Controls","/api/controls/camera-controls","2.api/2.controls/camera-controls",{"title":99,"path":100,"stem":101},"Keyboard Controls","/api/controls/keyboard-controls","2.api/2.controls/keyboard-controls",{"title":103,"path":104,"stem":105},"Map Controls","/api/controls/map-controls","2.api/2.controls/map-controls",{"title":107,"path":108,"stem":109},"Orbit Controls","/api/controls/orbit-controls","2.api/2.controls/orbit-controls",{"title":111,"path":112,"stem":113},"PointerLock Controls","/api/controls/pointer-lock-controls","2.api/2.controls/pointer-lock-controls",{"title":115,"path":116,"stem":117},"Transform Controls","/api/controls/transform-controls","2.api/2.controls/transform-controls",{"title":119,"path":120,"stem":121,"children":122},"Loaders","/api/loaders","2.api/3.loaders/index",[123,124,128,132,136,140,144,148,152,156],{"title":119,"path":120,"stem":121},{"title":125,"path":126,"stem":127},"useGLTF","/api/loaders/use-gltf","2.api/3.loaders/1.use-gltf",{"title":129,"path":130,"stem":131},"GLTFModel","/api/loaders/gltf-model","2.api/3.loaders/2.gltf-model",{"title":133,"path":134,"stem":135},"useFBX","/api/loaders/use-fbx","2.api/3.loaders/3.use-fbx",{"title":137,"path":138,"stem":139},"FBXModel","/api/loaders/fbx-model","2.api/3.loaders/4.fbx-model",{"title":141,"path":142,"stem":143},"useTexture","/api/loaders/use-texture","2.api/3.loaders/5.use-texture",{"title":145,"path":146,"stem":147},"useTextures","/api/loaders/use-textures","2.api/3.loaders/6.use-textures",{"title":149,"path":150,"stem":151},"useSVG","/api/loaders/use-svg","2.api/3.loaders/7.use-svg",{"title":153,"path":154,"stem":155},"useProgress","/api/loaders/use-progress","2.api/3.loaders/use-progress",{"title":157,"path":158,"stem":159},"useVideoTexture","/api/loaders/use-video-texture","2.api/3.loaders/use-video-texture",{"title":161,"path":162,"stem":163,"children":164},"Materials","/api/materials","2.api/4.materials/index",[165,166,170,174,178,182,186,190,194,198],{"title":161,"path":162,"stem":163},{"title":167,"path":168,"stem":169},"Custom Shader Material","/api/materials/custom-shader-material","2.api/4.materials/custom-shader-material",{"title":171,"path":172,"stem":173},"Mesh Glass Material","/api/materials/glass-material","2.api/4.materials/glass-material",{"title":175,"path":176,"stem":177},"Holographic Material","/api/materials/holographic-material","2.api/4.materials/holographic-material",{"title":179,"path":180,"stem":181},"Mesh Discard Material","/api/materials/mesh-discard-material","2.api/4.materials/mesh-discard-material",{"title":183,"path":184,"stem":185},"Mesh Portal Material","/api/materials/mesh-portal-material","2.api/4.materials/mesh-portal-material",{"title":187,"path":188,"stem":189},"Mesh Reflection Material","/api/materials/mesh-reflection-material","2.api/4.materials/mesh-reflection-material",{"title":191,"path":192,"stem":193},"Mesh Transmission Material","/api/materials/mesh-transmission-material","2.api/4.materials/mesh-transmission-material",{"title":195,"path":196,"stem":197},"Point Material","/api/materials/point-material","2.api/4.materials/point-material",{"title":199,"path":200,"stem":201},"Wobble Material","/api/materials/wobble-material","2.api/4.materials/wobble-material",{"title":203,"path":204,"stem":205,"children":206},"Shapes","/api/shapes","2.api/5.shapes/index",[207,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296],{"title":203,"path":204,"stem":205},{"title":209,"path":210,"stem":211},"Box","/api/shapes/box","2.api/5.shapes/box",{"title":213,"path":214,"stem":215},"CatmullRomCurve3","/api/shapes/catmullromcurve3","2.api/5.shapes/catmullromcurve3",{"title":217,"path":218,"stem":219},"Circle","/api/shapes/circle","2.api/5.shapes/circle",{"title":221,"path":222,"stem":223},"Cone","/api/shapes/cone","2.api/5.shapes/cone",{"title":225,"path":226,"stem":227},"Cubic Bezier Line","/api/shapes/cubic-bezier-line","2.api/5.shapes/cubic-bezier-line",{"title":229,"path":230,"stem":231},"Cylinder","/api/shapes/cylinder","2.api/5.shapes/cylinder",{"title":233,"path":234,"stem":235},"Dodecahedron","/api/shapes/dodecahedron","2.api/5.shapes/dodecahedron",{"title":237,"path":238,"stem":239},"Grid","/api/shapes/grid","2.api/5.shapes/grid",{"title":241,"path":242,"stem":243},"Icosahedron","/api/shapes/icosahedron","2.api/5.shapes/icosahedron",{"title":245,"path":246,"stem":247},"Line2","/api/shapes/line2","2.api/5.shapes/line2",{"title":249,"path":250,"stem":251},"Octahedron","/api/shapes/octahedron","2.api/5.shapes/octahedron",{"title":253,"path":254,"stem":255},"Plane","/api/shapes/plane","2.api/5.shapes/plane",{"title":257,"path":258,"stem":259},"Quadratic Bezier Line","/api/shapes/quadratic-bezier-line","2.api/5.shapes/quadratic-bezier-line",{"title":261,"path":262,"stem":263},"Ring","/api/shapes/ring","2.api/5.shapes/ring",{"title":265,"path":266,"stem":267},"Rounded Box","/api/shapes/rounded-box","2.api/5.shapes/rounded-box",{"title":269,"path":270,"stem":271},"Rounded Plane","/api/shapes/rounded-plane","2.api/5.shapes/rounded-plane",{"title":273,"path":274,"stem":275},"Screen Quad","/api/shapes/screen-quad","2.api/5.shapes/screen-quad",{"title":277,"path":278,"stem":279},"Sphere","/api/shapes/sphere","2.api/5.shapes/sphere",{"title":281,"path":282,"stem":283},"Superformula","/api/shapes/superformula","2.api/5.shapes/superformula",{"title":285,"path":286,"stem":287},"Tetrahedron","/api/shapes/tetrahedron","2.api/5.shapes/tetrahedron",{"title":289,"path":290,"stem":291},"Torus","/api/shapes/torus","2.api/5.shapes/torus",{"title":293,"path":294,"stem":295},"Torus Knot","/api/shapes/torus-knot","2.api/5.shapes/torus-knot",{"title":297,"path":298,"stem":299},"Tube","/api/shapes/tube","2.api/5.shapes/tube",{"title":301,"path":302,"stem":303,"children":304},"Debug/Performance","/api/debug-performance","2.api/6.debug-performance/index",[305,306,310,314,318,322],{"title":301,"path":302,"stem":303},{"title":307,"path":308,"stem":309},"Helper","/api/debug-performance/helper","2.api/6.debug-performance/helper",{"title":311,"path":312,"stem":313},"LOD","/api/debug-performance/lod","2.api/6.debug-performance/lod",{"title":315,"path":316,"stem":317},"Stats","/api/debug-performance/stats","2.api/6.debug-performance/stats",{"title":319,"path":320,"stem":321},"StatsGl","/api/debug-performance/stats-gl","2.api/6.debug-performance/stats-gl",{"title":323,"path":324,"stem":325},"useBVH","/api/debug-performance/use-bvh","2.api/6.debug-performance/use-bvh",{"title":327,"path":328,"stem":329,"children":330},"Light/Shadow","/api/light-shadow","2.api/7.light-shadow/index",[331,332,336,340,344,348,352,356],{"title":327,"path":328,"stem":329},{"title":333,"path":334,"stem":335},"Accumulative Shadows","/api/light-shadow/accumulative-shadows","2.api/7.light-shadow/accumulative-shadows",{"title":337,"path":338,"stem":339},"Bake Shadows","/api/light-shadow/bake-shadows","2.api/7.light-shadow/bake-shadows",{"title":341,"path":342,"stem":343},"Circle Shadow","/api/light-shadow/circle-shadow","2.api/7.light-shadow/circle-shadow",{"title":345,"path":346,"stem":347},"Contact Shadows","/api/light-shadow/contact-shadows","2.api/7.light-shadow/contact-shadows",{"title":349,"path":350,"stem":351},"Lensflare","/api/light-shadow/lensflare","2.api/7.light-shadow/lensflare",{"title":353,"path":354,"stem":355},"Randomized Lights","/api/light-shadow/randomized-lights","2.api/7.light-shadow/randomized-lights",{"title":357,"path":358,"stem":359},"Soft Shadows","/api/light-shadow/soft-shadows","2.api/7.light-shadow/soft-shadows",{"title":361,"path":362,"stem":363,"children":364},"Staging","/api/staging","2.api/8.staging/index",[365,366,370,374,378,382,386,390,394,398,402,406],{"title":361,"path":362,"stem":363},{"title":367,"path":368,"stem":369},"Environment","/api/staging/environment","2.api/8.staging/1.environment",{"title":371,"path":372,"stem":373},"useEnvironment","/api/staging/use-environment","2.api/8.staging/2.use-environment",{"title":375,"path":376,"stem":377},"Lightformer","/api/staging/lightformer","2.api/8.staging/3.lightformer",{"title":379,"path":380,"stem":381},"Backdrop","/api/staging/backdrop","2.api/8.staging/backdrop",{"title":383,"path":384,"stem":385},"Ocean","/api/staging/ocean","2.api/8.staging/ocean",{"title":387,"path":388,"stem":389},"Precipitation","/api/staging/precipitation","2.api/8.staging/precipitation",{"title":391,"path":392,"stem":393},"Sky","/api/staging/sky","2.api/8.staging/sky",{"title":395,"path":396,"stem":397},"Smoke","/api/staging/smoke","2.api/8.staging/smoke",{"title":399,"path":400,"stem":401},"Sparkles","/api/staging/sparkles","2.api/8.staging/sparkles",{"title":403,"path":404,"stem":405},"Stage","/api/staging/stage","2.api/8.staging/stage",{"title":407,"path":408,"stem":409},"Stars","/api/staging/stars","2.api/8.staging/stars",{"title":411,"path":412,"stem":413,"children":414},"Objects","/api/objects","2.api/9.objects/index",[415,416,420,424,428,432,436,440,444,448,452],{"title":411,"path":412,"stem":413},{"title":417,"path":418,"stem":419},"AnimatedSprite","/api/objects/animated-sprite","2.api/9.objects/animated-sprite",{"title":421,"path":422,"stem":423},"CubeCamera","/api/objects/cube-camera","2.api/9.objects/cube-camera",{"title":425,"path":426,"stem":427},"Fbo","/api/objects/fbo","2.api/9.objects/fbo",{"title":429,"path":430,"stem":431},"GradientTexture","/api/objects/gradient-texture","2.api/9.objects/gradient-texture",{"title":433,"path":434,"stem":435},"HTML","/api/objects/html","2.api/9.objects/html",{"title":437,"path":438,"stem":439},"Image","/api/objects/image","2.api/9.objects/image",{"title":441,"path":442,"stem":443},"MarchingCubes","/api/objects/marching-cubes","2.api/9.objects/marching-cubes",{"title":445,"path":446,"stem":447},"Reflector","/api/objects/reflector","2.api/9.objects/reflector",{"title":449,"path":450,"stem":451},"Refractor","/api/objects/refractor","2.api/9.objects/refractor",{"title":453,"path":454,"stem":455},"Text3D","/api/objects/text-3d","2.api/9.objects/text-3d",{"title":457,"path":458,"stem":459,"children":460},"Miscellaneous","/api/miscellaneous","2.api/miscellaneous/index",[461,462,466,470,474,478,482,486],{"title":457,"path":458,"stem":459},{"title":463,"path":464,"stem":465},"Bounds","/api/miscellaneous/bounds","2.api/miscellaneous/bounds",{"title":467,"path":468,"stem":469},"GlobalAudio","/api/miscellaneous/global-audio","2.api/miscellaneous/global-audio",{"title":471,"path":472,"stem":473},"MouseParallax","/api/miscellaneous/mouse-parallax","2.api/miscellaneous/mouse-parallax",{"title":475,"path":476,"stem":477},"PositionalAudio","/api/miscellaneous/positional-audio","2.api/miscellaneous/positional-audio",{"title":479,"path":480,"stem":481},"useAnimations","/api/miscellaneous/use-animations","2.api/miscellaneous/use-animations",{"title":483,"path":484,"stem":485},"useGLTFExporter","/api/miscellaneous/use-gltf-exporter","2.api/miscellaneous/use-gltf-exporter",{"title":487,"path":488,"stem":489},"useIntersect","/api/miscellaneous/use-intersect","2.api/miscellaneous/use-intersect",{"id":491,"title":411,"body":492,"description":508,"extension":509,"links":510,"meta":511,"navigation":512,"path":412,"seo":513,"stem":413,"__hash__":514},"docs/2.api/9.objects/index.md",{"type":493,"value":494,"toc":503},"minimark",[495,499],[496,497,498],"p",{},"Components for creating 3D objects, sprites, text, and textures in your scene.",[500,501],"api-list",{"list-name":502},"objects-list",{"title":504,"searchDepth":505,"depth":506,"links":507},"",1,2,[],"3D objects and texture components","md",null,{},true,{"title":411,"description":508},"PJRjQ8U1I99ephC4xbsR6qDF0Wsdp6iYandnX5ya-lQ",[516,518],{"title":407,"path":408,"stem":409,"description":517,"children":-1},"Renders beautiful stars in the sky using Points and BufferGeometry.",{"title":417,"path":418,"stem":419,"description":519,"children":-1},"Display 2D animations defined in a texture atlas.",[521,1574,2010,3200,3585,9263,9881,10686,11989,13163],{"id":522,"title":417,"body":523,"description":519,"extension":509,"links":510,"meta":1571,"navigation":512,"path":418,"seo":1572,"stem":419,"__hash__":1573},"docs/2.api/9.objects/animated-sprite.md",{"type":493,"value":524,"toc":1553},[525,531,549,559,563,813,825,829,835,849,858,862,869,889,893,901,906,933,937,1288,1292,1362,1365,1372,1376,1379,1384,1387,1399,1415,1419,1422,1459,1462,1474,1478,1487,1497,1505,1508,1539,1542,1549],[526,527,528],"scene-controls-wrapper",{},[529,530],"objects-animated-sprite",{},[496,532,533,537,538,545,546,548],{},[534,535,536],"code",{},"\u003CAnimatedSprite />"," displays 2D animations defined in a ",[539,540,544],"a",{"href":541,"rel":542},"https://en.wikipedia.org/wiki/Texture_atlas",[543],"nofollow","texture atlas",". A typical ",[534,547,536],{}," will use:",[550,551,552,556],"ul",{},[553,554,555],"li",{},"An image containing multiple sprites",[553,557,558],{},"A JSON atlas containing the individual sprite coordinates in the image",[560,561,15],"h2",{"id":562},"usage",[564,565,575],"pre",{"className":566,"code":567,"highlights":568,"language":574,"meta":504,"style":504},"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",[506,569,570,571,572,573],10,11,12,13,14,"vue",[534,576,577,611,641,647,676,686,691,701,712,723,732,748,763,778,784,794,804],{"__ignoreMap":504},[578,579,581,585,589,593,596,599,602,606,608],"span",{"class":580,"line":505},"line",[578,582,584],{"class":583},"sMK4o","\u003C",[578,586,588],{"class":587},"swJcz","script",[578,590,592],{"class":591},"spNyl"," setup",[578,594,595],{"class":591}," lang",[578,597,598],{"class":583},"=",[578,600,601],{"class":583},"\"",[578,603,605],{"class":604},"sfazB","ts",[578,607,601],{"class":583},[578,609,610],{"class":583},">\n",[578,612,615,619,622,626,629,632,635,638],{"class":613,"line":506},[580,614],"highlight",[578,616,618],{"class":617},"s7zQu","import",[578,620,621],{"class":583}," {",[578,623,625],{"class":624},"sTEyZ"," AnimatedSprite",[578,627,628],{"class":583}," }",[578,630,631],{"class":617}," from",[578,633,634],{"class":583}," '",[578,636,637],{"class":604},"@tresjs/cientos",[578,639,640],{"class":583},"'\n",[578,642,644],{"class":580,"line":643},3,[578,645,646],{"emptyLinePlaceholder":512},"\n",[578,648,650,653,656,658,662,665,668,671,673],{"class":580,"line":649},4,[578,651,652],{"class":591},"const",[578,654,655],{"class":624}," currentAnimation ",[578,657,598],{"class":583},[578,659,661],{"class":660},"s2Zo4"," ref",[578,663,664],{"class":624},"(",[578,666,667],{"class":583},"'",[578,669,670],{"class":604},"cientosIdle",[578,672,667],{"class":583},[578,674,675],{"class":624},")\n",[578,677,679,682,684],{"class":580,"line":678},5,[578,680,681],{"class":583},"\u003C/",[578,683,588],{"class":587},[578,685,610],{"class":583},[578,687,689],{"class":580,"line":688},6,[578,690,646],{"emptyLinePlaceholder":512},[578,692,694,696,699],{"class":580,"line":693},7,[578,695,584],{"class":583},[578,697,698],{"class":587},"template",[578,700,610],{"class":583},[578,702,704,707,710],{"class":580,"line":703},8,[578,705,706],{"class":583}," \u003C",[578,708,709],{"class":587},"TresCanvas",[578,711,610],{"class":583},[578,713,715,718,721],{"class":580,"line":714},9,[578,716,717],{"class":583}," \u003C",[578,719,720],{"class":587},"Suspense",[578,722,610],{"class":583},[578,724,726,729],{"class":725,"line":569},[580,614],[578,727,728],{"class":583}," \u003C",[578,730,731],{"class":587},"AnimatedSprite\n",[578,733,735,738,740,742,745],{"class":734,"line":570},[580,614],[578,736,737],{"class":591}," image",[578,739,598],{"class":583},[578,741,601],{"class":583},[578,743,744],{"class":604},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosTexture.png",[578,746,747],{"class":583},"\"\n",[578,749,751,754,756,758,761],{"class":750,"line":571},[580,614],[578,752,753],{"class":591}," atlas",[578,755,598],{"class":583},[578,757,601],{"class":583},[578,759,760],{"class":604},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosAtlas.json",[578,762,747],{"class":583},[578,764,766,769,771,773,776],{"class":765,"line":572},[580,614],[578,767,768],{"class":591}," :animation",[578,770,598],{"class":583},[578,772,601],{"class":583},[578,774,775],{"class":604},"currentAnimation",[578,777,747],{"class":583},[578,779,781],{"class":780,"line":573},[580,614],[578,782,783],{"class":583}," />\n",[578,785,787,790,792],{"class":580,"line":786},15,[578,788,789],{"class":583}," \u003C/",[578,791,720],{"class":587},[578,793,610],{"class":583},[578,795,797,800,802],{"class":580,"line":796},16,[578,798,799],{"class":583}," \u003C/",[578,801,709],{"class":587},[578,803,610],{"class":583},[578,805,807,809,811],{"class":580,"line":806},17,[578,808,681],{"class":583},[578,810,698],{"class":587},[578,812,610],{"class":583},[814,815,816],"prose-warning",{},[496,817,818,820,821,824],{},[534,819,536],{}," loads resources asynchronously, so it must be wrapped in a ",[534,822,823],{},"\u003CSuspense />",".",[560,826,828],{"id":827},"compiling-an-atlas","Compiling an atlas",[496,830,831,832,834],{},"In typical usage, ",[534,833,536],{}," requires both the URL to a texture of compiled sprite images and a JSON atlas containing information about the sprites in the texture.",[550,836,837,843],{},[553,838,839],{},[539,840,842],{"href":744,"rel":841},[543],"example compiled texture",[553,844,845],{},[539,846,848],{"href":760,"rel":847},[543],"example JSON atlas",[496,850,851,852,857],{},"Compiling source images into a texture atlas is usually handled by third-party software. You may find ",[539,853,856],{"href":854,"rel":855},"https://www.codeandweb.com/texturepacker",[543],"TexturePacker"," useful.",[560,859,861],{"id":860},"without-an-atlas","Without an atlas",[496,863,864,865,868],{},"There may be cases where you don't want to supply an atlas to the ",[534,866,867],{},"atlas"," prop. To do so:",[550,870,871,874,877,880],{},[553,872,873],{},"Compile your source images into a single image texture.",[553,875,876],{},"Space each sprite into equally sized columns and rows in the compiled image texture.",[553,878,879],{},"Ensure no extra padding has been added to the compiled image texture.",[553,881,882,883,885,886,824],{},"Set the ",[534,884,867],{}," prop to number of columns, number of rows as ",[534,887,888],{},"[number, number]",[560,890,892],{"id":891},"spritesheets-in-the-wild","Spritesheets in the wild",[814,894,895],{},[496,896,897,898,900],{},"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 ",[534,899,536],{},". In many cases, it's advisable to recompile the spritesheet.",[902,903,905],"h3",{"id":904},"how-to-recompile-an-existing-spritesheet-image","How to recompile an existing spritesheet image",[550,907,908,911,914,917,930],{},[553,909,910],{},"Cut individual sprites from the spritesheet and paste them into separate layers in an image editing application, e.g., GIMP.",[553,912,913],{},"Align the layers for animation. Toggling layer visibility on/off will show you how the animation will display, frame to frame.",[553,915,916],{},"Export layers as individual images.",[553,918,919,920,923,926,927,929],{},"Name the individual images according to the following pattern: ",[921,922],"br",{},[534,924,925],{},"[animation name][frame number].[extension]"," ",[921,928],{},"E.g., walk000.png, walk001.png, idle000.png, idle001.png",[553,931,932],{},"Compile individual images into an image texture and atlas using a texture packing application, like TexturePacker.",[560,934,936],{"id":935},"props","Props",[938,939,940,957],"table",{},[941,942,943],"thead",{},[944,945,946,951,954],"tr",{},[947,948,950],"th",{"align":949},"left","Name",[947,952,953],{"align":949},"Description",[947,955,956],{"align":949},"Default",[958,959,960,974,1014,1074,1089,1105,1130,1145,1159,1173,1187,1206,1230,1250,1269],"tbody",{},[944,961,962,966,972],{},[963,964,965],"td",{"align":949},"image",[963,967,968,971],{"align":949},[534,969,970],{},"string"," – URL of the image texture or an image dataURL. This prop is not reactive.",[963,973],{"align":949},[944,975,976,978,1012],{},[963,977,867],{"align":949},[963,979,980,983,984,1009,1011],{"align":949},[534,981,982],{},"string | Atlasish"," – ",[550,985,986,992,998,1003],{},[553,987,988,989,991],{},"If ",[534,990,970],{},", the URL of the JSON atlas.",[553,993,988,994,997],{},[534,995,996],{},"number",", the number of columns in the texture.",[553,999,988,1000,1002],{},[534,1001,888],{},", the number of columns/rows in the texture.",[553,1004,988,1005,1008],{},[534,1006,1007],{},"AtlasData",", the atlas as a JS object.",[921,1010],{},"This prop is not reactive.",[963,1013],{"align":949},[944,1015,1016,1019,1072],{},[963,1017,1018],{"align":949},"definitions",[963,1020,1021,1024,1025,1027,1028,1030,1032,1033,1035,1037,1038],{"align":949},[534,1022,1023],{},"Record\u003Cstring, string>"," – Specify playback frame order and repeated frames (delays). ",[534,1026,1018],{}," is a record where keys are atlas animation names and values are strings containing an animation definition.",[921,1029],{},[921,1031],{},"A \"animation definition\" comma-separated string of frame numbers with optional parentheses-surrounded durations.",[921,1034],{},[921,1036],{},"Here is how various definition strings convert to arrays of frames for playback:",[550,1039,1040,1047,1054,1060,1066],{},[553,1041,1042,1043,1046],{},"\"0,2,1\" - ",[578,1044,1045],{},"0,2,1",", i.e., play frame 0, 2, then 1.",[553,1048,1049,1050,1053],{},"\"2(10)\" - ",[578,1051,1052],{},"2,2,2,2,2,2,2,2,2,2",", i.e., play from 2 10 times.",[553,1055,1056,1057],{},"\"1-4\" - ",[578,1058,1059],{},"1,2,3,4",[553,1061,1062,1063],{},"\"10-5(2)\" - ",[578,1064,1065],{},"10,10,9,9,8,8,7,7,6,6,5,5",[553,1067,1068,1069],{},"\"1-4(3),10(2)\" - ",[578,1070,1071],{},"1,1,1,2,2,2,3,3,3,4,4,4,10,10",[963,1073],{"align":949},[944,1075,1076,1079,1084],{},[963,1077,1078],{"align":949},"fps",[963,1080,1081,1083],{"align":949},[534,1082,996],{}," – Desired frames per second of the animation.",[963,1085,1086],{"align":949},[534,1087,1088],{},"30",[944,1090,1091,1094,1100],{},[963,1092,1093],{"align":949},"loop",[963,1095,1096,1099],{"align":949},[534,1097,1098],{},"boolean"," – Whether or not the animation should loop.",[963,1101,1102],{"align":949},[534,1103,1104],{},"true",[944,1106,1107,1110,1125],{},[963,1108,1109],{"align":949},"animation",[963,1111,1112,1115,1116,1118,1119,1121,1122,1124],{"align":949},[534,1113,1114],{},"string | [number, number] | number"," – If ",[534,1117,970],{},", name of the animation to play. If ",[534,1120,888],{},", start and end frames of the animation. If ",[534,1123,996],{},", frame number to display.",[963,1126,1127],{"align":949},[534,1128,1129],{},"0",[944,1131,1132,1135,1140],{},[963,1133,1134],{"align":949},"paused",[963,1136,1137,1139],{"align":949},[534,1138,1098],{}," – Whether the animation is paused.",[963,1141,1142],{"align":949},[534,1143,1144],{},"false",[944,1146,1147,1150,1155],{},[963,1148,1149],{"align":949},"reversed",[963,1151,1152,1154],{"align":949},[534,1153,1098],{}," – Whether to play the animation in reverse.",[963,1156,1157],{"align":949},[534,1158,1144],{},[944,1160,1161,1164,1169],{},[963,1162,1163],{"align":949},"flipX",[963,1165,1166,1168],{"align":949},[534,1167,1098],{}," – Whether the sprite should be flipped, left to right.",[963,1170,1171],{"align":949},[534,1172,1144],{},[944,1174,1175,1178,1183],{},[963,1176,1177],{"align":949},"resetOnEnd",[963,1179,1180,1182],{"align":949},[534,1181,1098],{}," – For a non-looping animation, when the animation ends, whether to display the zeroth frame.",[963,1184,1185],{"align":949},[534,1186,1144],{},[944,1188,1189,1192,1202],{},[963,1190,1191],{"align":949},"asSprite",[963,1193,1194,1196,1197],{"align":949},[534,1195,1098],{}," – Whether to display the object as a THREE.Sprite. ",[539,1198,1201],{"href":1199,"rel":1200},"https://threejs.org/docs/?q=sprite#api/en/objects/Sprite",[543],"See THREE.Sprite",[963,1203,1204],{"align":949},[534,1205,1104],{},[944,1207,1208,1211,1225],{},[963,1209,1210],{"align":949},"center",[963,1212,1213,1216,1217,1220,1221,1224],{"align":949},[534,1214,1215],{},"TresVector2"," – Anchor point of the object. A value of ",[578,1218,1219],{},"0.5, 0.5"," corresponds to the center. ",[578,1222,1223],{},"0, 0"," is left, bottom.",[963,1226,1227],{"align":949},[534,1228,1229],{},"[0.5, 0.5]",[944,1231,1232,1235,1245],{},[963,1233,1234],{"align":949},"alphaTest",[963,1236,1237,1239,1240],{"align":949},[534,1238,996],{}," – Alpha test value for the material. ",[539,1241,1244],{"href":1242,"rel":1243},"https://threejs.org/docs/#api/en/materials/Material.alphaTest",[543],"See THREE.Material.alphaTest",[963,1246,1247],{"align":949},[534,1248,1249],{},"0.0",[944,1251,1252,1255,1265],{},[963,1253,1254],{"align":949},"depthTest",[963,1256,1257,1259,1260],{"align":949},[534,1258,1098],{}," – Depth test value for the material. ",[539,1261,1264],{"href":1262,"rel":1263},"https://threejs.org/docs/#api/en/materials/Material.depthTest",[543],"See THREE.Material.depthTest",[963,1266,1267],{"align":949},[534,1268,1104],{},[944,1270,1271,1274,1284],{},[963,1272,1273],{"align":949},"depthWrite",[963,1275,1276,1278,1279],{"align":949},[534,1277,1098],{}," – Depth write value for the material. ",[539,1280,1283],{"href":1281,"rel":1282},"https://threejs.org/docs/#api/en/materials/Material.depthWrite",[543],"See THREE.Material.depthWrite",[963,1285,1286],{"align":949},[534,1287,1104],{},[560,1289,1291],{"id":1290},"events","Events",[938,1293,1294,1306],{},[941,1295,1296],{},[944,1297,1298,1301,1303],{},[947,1299,1300],{},"Event",[947,1302,953],{},[947,1304,1305],{},"Argument",[958,1307,1308,1323,1344],{},[944,1309,1310,1315,1318],{},[963,1311,1312],{},[534,1313,1314],{},"frame",[963,1316,1317],{},"Emitted when the displayed animation frame changes – at most once per tick, frames may be dropped",[963,1319,1320,1322],{},[534,1321,970],{}," – Name of the newly displayed frame",[944,1324,1325,1330,1339],{},[963,1326,1327],{},[534,1328,1329],{},"end",[963,1331,1332,1333,1336,1337],{},"Emitted when the animation ends – ",[534,1334,1335],{},"props.loop"," must be set to ",[534,1338,1144],{},[963,1340,1341,1343],{},[534,1342,970],{}," – Name of the ending frame",[944,1345,1346,1350,1357],{},[963,1347,1348],{},[534,1349,1093],{},[963,1351,1352,1353,1336,1355],{},"Emitted when the animation loops – ",[534,1354,1335],{},[534,1356,1104],{},[963,1358,1359,1361],{},[534,1360,970],{}," – Name of the frame at the end of the loop",[560,1363,1364],{"id":1109},"Animation",[496,1366,1367,1368,1371],{},"The ",[534,1369,1370],{},":animation"," prop holds either the name of the currently playing animation or a range of frames to play, or a frame number to display.",[902,1373,1375],{"id":1374},"using-named-animations-as-animation","Using named animations as animation",[496,1377,1378],{},"When individual files are converted to a spritesheet/atlas, typically the original images' filenames will be included in the atlas.",[496,1380,1381,1383],{},[534,1382,536],{}," uses those filenames to automatically group images into animations.",[496,1385,1386],{},"Use either of the following naming conventions for your source images ...",[550,1388,1389,1394],{},[553,1390,1391],{},[534,1392,1393],{},"[animation name][frame number].[file_extension]",[553,1395,1396],{},[534,1397,1398],{},"[animation name]_[frame number].[file_extension]",[496,1400,1401,1402,1404,1405,1408,1409,1411,1412,1414],{},"... then ",[534,1403,536],{}," will automatically make all ",[534,1406,1407],{},"[animation name]"," available for playback. Just pass ",[534,1410,1407],{}," to the component's ",[534,1413,1370],{}," prop.",[902,1416,1418],{"id":1417},"example","Example",[496,1420,1421],{},"For our Cientos heart cartoon character animation, here's how the filenames map to animation names.",[938,1423,1424,1434],{},[941,1425,1426],{},[944,1427,1428,1431],{},[947,1429,1430],{},"Filenames",[947,1432,1433],{},"Animation name",[958,1435,1436,1443,1451],{},[944,1437,1438,1441],{},[963,1439,1440],{},"cientosIdle0000.png, cientosIdle0001.png, ...",[963,1442,670],{},[944,1444,1445,1448],{},[963,1446,1447],{},"cientosIdleToWalkTransition0000.png",[963,1449,1450],{},"cientosIdleToWalkTransition",[944,1452,1453,1456],{},[963,1454,1455],{},"cientosWalk0000.png, cientosWalk0001.png, ...",[963,1457,1458],{},"cientosWalk",[560,1460,1461],{"id":1018},"Definitions",[496,1463,1464,1465,1468,1469,1473],{},"You can supply an object to the ",[534,1466,1467],{},":definitions"," prop. Any ",[539,1470,1472],{"href":1471},"#animation","named animation"," can be a key. The value is a string that specifies frame order and delays.",[902,1475,1477],{"id":1476},"demo","Demo",[496,1479,1480,1481,1483,1484,824],{},"In this demo, the 'idle' animation is comprised of six different images. By default, those images will play sequentially when the ",[534,1482,1370],{}," prop is ",[534,1485,1486],{},"'idle'",[496,1488,1489,1490,1492,1493,1496],{},"But below, we've added a ",[534,1491,1467],{}," prop with this value for the ",[534,1494,1495],{},"idle"," key:",[564,1498,1503],{"className":1499,"code":1501,"language":1502},[1500],"language-text","'0-5, 0(10), 1-2, 3(20), 4-5, 0-5(3)'\n","text",[534,1504,1501],{"__ignoreMap":504},[496,1506,1507],{},"So, instead of playing images 0-5 sequentially, this animation will play instead:",[550,1509,1510,1519,1533],{},[553,1511,1512,1515,1516,1518],{},[534,1513,1514],{},"0-5"," – Play all six images (",[534,1517,1514],{},") of the animation normally.",[553,1520,1521,1524,1525,1528,1529,1532],{},[534,1522,1523],{},"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 (",[534,1526,1527],{},"0(10)",") and a delay of twenty frames at the top of the bounce (",[534,1530,1531],{},"3(20)",").",[553,1534,1535,1538],{},[534,1536,1537],{},"0-5(3)"," – Finally, play all six images of the animation with a delay of three frames each.",[560,1540,1541],{"id":1210},"Center",[496,1543,1544,1545,1548],{},"In addition to being the sprite's anchor point, the ",[534,1546,1547],{},":center"," prop also controls how differently sized source images will \"grow\" and \"shrink\". Namely, they \"grow out from\" and \"shrink towards\" the center.",[1550,1551,1552],"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":504,"searchDepth":505,"depth":506,"links":1554},[1555,1556,1557,1558,1561,1562,1563,1567,1570],{"id":562,"depth":506,"text":15},{"id":827,"depth":506,"text":828},{"id":860,"depth":506,"text":861},{"id":891,"depth":506,"text":892,"children":1559},[1560],{"id":904,"depth":643,"text":905},{"id":935,"depth":506,"text":936},{"id":1290,"depth":506,"text":1291},{"id":1109,"depth":506,"text":1364,"children":1564},[1565,1566],{"id":1374,"depth":643,"text":1375},{"id":1417,"depth":643,"text":1418},{"id":1018,"depth":506,"text":1461,"children":1568},[1569],{"id":1476,"depth":643,"text":1477},{"id":1210,"depth":506,"text":1541},{},{"title":417,"description":519},"1Fefoz-lCiLy_IhyyeC3jSJZXqD9LUr1drneDRIGstI",{"id":1575,"title":421,"body":1576,"description":2006,"extension":509,"links":510,"meta":2007,"navigation":512,"path":422,"seo":2008,"stem":423,"__hash__":2009},"docs/2.api/9.objects/cube-camera.md",{"type":493,"value":1577,"toc":2002},[1578,1583,1593,1598,1600,1893,1895,1999],[526,1579,1580],{},[1581,1582],"objects-cube-camera",{},[496,1584,1585,1588,1589,1592],{},[534,1586,1587],{},"\u003CCubeCamera />"," creates a ",[534,1590,1591],{},"THREE.CubeCamera"," and uses it to render an environment map of your scene. The environment map is then applied to component's children.",[496,1594,1595,1597],{},[534,1596,1587],{}," makes its children invisible while rendering to the internal buffer so that they are not included in the reflection.",[560,1599,15],{"id":562},[564,1601,1604],{"className":566,"code":1602,"highlights":1603,"language":574,"meta":504,"style":504},"\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",[506,569,786],[534,1605,1606,1626,1652,1660,1664,1672,1680,1702,1711,1715,1748,1757,1779,1811,1820,1829,1833,1854,1875,1884],{"__ignoreMap":504},[578,1607,1608,1610,1612,1614,1616,1618,1620,1622,1624],{"class":580,"line":505},[578,1609,584],{"class":583},[578,1611,588],{"class":587},[578,1613,592],{"class":591},[578,1615,595],{"class":591},[578,1617,598],{"class":583},[578,1619,601],{"class":583},[578,1621,605],{"class":604},[578,1623,601],{"class":583},[578,1625,610],{"class":583},[578,1627,1629,1631,1633,1636,1639,1642,1644,1646,1648,1650],{"class":1628,"line":506},[580,614],[578,1630,618],{"class":617},[578,1632,621],{"class":583},[578,1634,1635],{"class":624}," CubeCamera",[578,1637,1638],{"class":583},",",[578,1640,1641],{"class":624}," OrbitControls",[578,1643,628],{"class":583},[578,1645,631],{"class":617},[578,1647,634],{"class":583},[578,1649,637],{"class":604},[578,1651,640],{"class":583},[578,1653,1654,1656,1658],{"class":580,"line":643},[578,1655,681],{"class":583},[578,1657,588],{"class":587},[578,1659,610],{"class":583},[578,1661,1662],{"class":580,"line":649},[578,1663,646],{"emptyLinePlaceholder":512},[578,1665,1666,1668,1670],{"class":580,"line":678},[578,1667,584],{"class":583},[578,1669,698],{"class":587},[578,1671,610],{"class":583},[578,1673,1674,1676,1678],{"class":580,"line":688},[578,1675,706],{"class":583},[578,1677,709],{"class":587},[578,1679,610],{"class":583},[578,1681,1682,1684,1687,1690,1692,1694,1697,1699],{"class":580,"line":693},[578,1683,717],{"class":583},[578,1685,1686],{"class":587},"TresPerspectiveCamera",[578,1688,1689],{"class":591}," :position",[578,1691,598],{"class":583},[578,1693,601],{"class":583},[578,1695,1696],{"class":604},"[0, 2, 5]",[578,1698,601],{"class":583},[578,1700,1701],{"class":583}," />\n",[578,1703,1704,1706,1709],{"class":580,"line":703},[578,1705,717],{"class":583},[578,1707,1708],{"class":587},"OrbitControls",[578,1710,1701],{"class":583},[578,1712,1713],{"class":580,"line":714},[578,1714,646],{"emptyLinePlaceholder":512},[578,1716,1718,1720,1722,1725,1727,1729,1732,1734,1737,1739,1741,1744,1746],{"class":1717,"line":569},[580,614],[578,1719,717],{"class":583},[578,1721,421],{"class":587},[578,1723,1724],{"class":591}," :resolution",[578,1726,598],{"class":583},[578,1728,601],{"class":583},[578,1730,1731],{"class":604},"256",[578,1733,601],{"class":583},[578,1735,1736],{"class":591}," :frames",[578,1738,598],{"class":583},[578,1740,601],{"class":583},[578,1742,1743],{"class":604},"Infinity",[578,1745,601],{"class":583},[578,1747,610],{"class":583},[578,1749,1750,1752,1755],{"class":580,"line":570},[578,1751,728],{"class":583},[578,1753,1754],{"class":587},"TresMesh",[578,1756,610],{"class":583},[578,1758,1759,1762,1765,1768,1770,1772,1775,1777],{"class":580,"line":571},[578,1760,1761],{"class":583}," \u003C",[578,1763,1764],{"class":587},"TresSphereGeometry",[578,1766,1767],{"class":591}," :args",[578,1769,598],{"class":583},[578,1771,601],{"class":583},[578,1773,1774],{"class":604},"[1, 32, 32]",[578,1776,601],{"class":583},[578,1778,1701],{"class":583},[578,1780,1781,1783,1786,1789,1791,1793,1796,1798,1801,1803,1805,1807,1809],{"class":580,"line":572},[578,1782,1761],{"class":583},[578,1784,1785],{"class":587},"TresMeshStandardMaterial",[578,1787,1788],{"class":591}," :metalness",[578,1790,598],{"class":583},[578,1792,601],{"class":583},[578,1794,1795],{"class":604},"1",[578,1797,601],{"class":583},[578,1799,1800],{"class":591}," :roughness",[578,1802,598],{"class":583},[578,1804,601],{"class":583},[578,1806,1129],{"class":604},[578,1808,601],{"class":583},[578,1810,1701],{"class":583},[578,1812,1813,1816,1818],{"class":580,"line":573},[578,1814,1815],{"class":583}," \u003C/",[578,1817,1754],{"class":587},[578,1819,610],{"class":583},[578,1821,1823,1825,1827],{"class":1822,"line":786},[580,614],[578,1824,789],{"class":583},[578,1826,421],{"class":587},[578,1828,610],{"class":583},[578,1830,1831],{"class":580,"line":796},[578,1832,646],{"emptyLinePlaceholder":512},[578,1834,1835,1837,1840,1843,1845,1847,1850,1852],{"class":580,"line":806},[578,1836,717],{"class":583},[578,1838,1839],{"class":587},"TresAmbientLight",[578,1841,1842],{"class":591}," :intensity",[578,1844,598],{"class":583},[578,1846,601],{"class":583},[578,1848,1849],{"class":604},"0.5",[578,1851,601],{"class":583},[578,1853,1701],{"class":583},[578,1855,1857,1859,1862,1864,1866,1868,1871,1873],{"class":580,"line":1856},18,[578,1858,717],{"class":583},[578,1860,1861],{"class":587},"TresDirectionalLight",[578,1863,1689],{"class":591},[578,1865,598],{"class":583},[578,1867,601],{"class":583},[578,1869,1870],{"class":604},"[0, 2, 4]",[578,1872,601],{"class":583},[578,1874,1701],{"class":583},[578,1876,1878,1880,1882],{"class":580,"line":1877},19,[578,1879,799],{"class":583},[578,1881,709],{"class":587},[578,1883,610],{"class":583},[578,1885,1887,1889,1891],{"class":580,"line":1886},20,[578,1888,681],{"class":583},[578,1890,698],{"class":587},[578,1892,610],{"class":583},[560,1894,936],{"id":935},[938,1896,1897,1908],{},[941,1898,1899],{},[944,1900,1901,1904,1906],{},[947,1902,1903],{"align":949},"Prop",[947,1905,953],{"align":949},[947,1907,956],{},[958,1909,1910,1930,1945,1960,1975,1987],{},[944,1911,1912,1917,1926],{},[963,1913,1914],{"align":949},[534,1915,1916],{},"frames",[963,1918,1919,1920,1922,1923,1925],{"align":949},"Number of frames to render. Set to ",[534,1921,1795],{}," for a static scene. ",[534,1924,1743],{}," to update continuously.",[963,1927,1928],{},[534,1929,1743],{},[944,1931,1932,1937,1940],{},[963,1933,1934],{"align":949},[534,1935,1936],{},"resolution",[963,1938,1939],{"align":949},"Resolution of the FBO",[963,1941,1942],{},[534,1943,1944],{},"255",[944,1946,1947,1952,1955],{},[963,1948,1949],{"align":949},[534,1950,1951],{},"near",[963,1953,1954],{"align":949},"Camera near",[963,1956,1957],{},[534,1958,1959],{},"0.1",[944,1961,1962,1967,1970],{},[963,1963,1964],{"align":949},[534,1965,1966],{},"far",[963,1968,1969],{"align":949},"Camera far",[963,1971,1972],{},[534,1973,1974],{},"1000",[944,1976,1977,1982,1985],{},[963,1978,1979],{"align":949},[534,1980,1981],{},"envMap",[963,1983,1984],{"align":949},"Custom environment map that is temporarily set as the scene's background",[963,1986],{},[944,1988,1989,1994,1997],{},[963,1990,1991],{"align":949},[534,1992,1993],{},"fog",[963,1995,1996],{"align":949},"Custom fog that is temporarily set as the scene's fog",[963,1998],{},[1550,2000,2001],{},"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":504,"searchDepth":505,"depth":506,"links":2003},[2004,2005],{"id":562,"depth":506,"text":15},{"id":935,"depth":506,"text":936},"Render environment maps for reflective objects.",{},{"title":421,"description":2006},"Q6v8KV8NG276AtuBPiwOGmcEikpDQU0Z6vAT9ILaU70",{"id":2011,"title":425,"body":2012,"description":3196,"extension":509,"links":510,"meta":3197,"navigation":512,"path":426,"seo":3198,"stem":427,"__hash__":3199},"docs/2.api/9.objects/fbo.md",{"type":493,"value":2013,"toc":3188},[2014,2020,2023,2030,2032,2705,2707,2827,2831,2833,2839,2846,2849,3097,3101,3185],[2015,2016,2017],"scene-wrapper",{},[2018,2019],"objects-fbo",{},[496,2021,2022],{},"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.",[496,2024,2025,2026,2029],{},"Cientos provides an ",[534,2027,2028],{},"\u003CFbo />"," component make it easy to use FBOs in your application.",[560,2031,15],{"id":562},[564,2033,2040],{"className":566,"code":2034,"highlights":2035,"language":574,"meta":504,"style":504},"\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",[506,2036,2037,2038,2039],23,24,25,26,[534,2041,2042,2062,2086,2109,2128,2147,2151,2191,2219,2223,2257,2288,2319,2345,2350,2358,2362,2370,2402,2421,2429,2434,2455,2463,2478,2492,2507,2513,2522,2543,2548,2556,2571,2586,2591,2600,2605,2613,2626,2641,2647,2668,2678,2687,2696],{"__ignoreMap":504},[578,2043,2044,2046,2048,2050,2052,2054,2056,2058,2060],{"class":580,"line":505},[578,2045,584],{"class":583},[578,2047,588],{"class":587},[578,2049,592],{"class":591},[578,2051,595],{"class":591},[578,2053,598],{"class":583},[578,2055,601],{"class":583},[578,2057,605],{"class":604},[578,2059,601],{"class":583},[578,2061,610],{"class":583},[578,2063,2065,2067,2069,2072,2074,2076,2078,2080,2082,2084],{"class":2064,"line":506},[580,614],[578,2066,618],{"class":617},[578,2068,621],{"class":583},[578,2070,2071],{"class":624}," Fbo",[578,2073,1638],{"class":583},[578,2075,1641],{"class":624},[578,2077,628],{"class":583},[578,2079,631],{"class":617},[578,2081,634],{"class":583},[578,2083,637],{"class":604},[578,2085,640],{"class":583},[578,2087,2088,2090,2093,2095,2098,2100,2102,2104,2107],{"class":580,"line":643},[578,2089,618],{"class":617},[578,2091,2092],{"class":617}," type",[578,2094,621],{"class":583},[578,2096,2097],{"class":624}," TresObject",[578,2099,628],{"class":583},[578,2101,631],{"class":617},[578,2103,634],{"class":583},[578,2105,2106],{"class":604},"@tresjs/core",[578,2108,640],{"class":583},[578,2110,2111,2113,2115,2118,2120,2122,2124,2126],{"class":580,"line":649},[578,2112,618],{"class":617},[578,2114,621],{"class":583},[578,2116,2117],{"class":624}," TresCanvas",[578,2119,628],{"class":583},[578,2121,631],{"class":617},[578,2123,634],{"class":583},[578,2125,2106],{"class":604},[578,2127,640],{"class":583},[578,2129,2130,2132,2134,2137,2139,2141,2143,2145],{"class":580,"line":678},[578,2131,618],{"class":617},[578,2133,621],{"class":583},[578,2135,2136],{"class":624}," shallowRef",[578,2138,628],{"class":583},[578,2140,631],{"class":617},[578,2142,634],{"class":583},[578,2144,574],{"class":604},[578,2146,640],{"class":583},[578,2148,2149],{"class":580,"line":688},[578,2150,646],{"emptyLinePlaceholder":512},[578,2152,2153,2155,2158,2160,2162,2164,2168,2171,2173,2176,2179,2182,2184,2186,2189],{"class":580,"line":693},[578,2154,652],{"class":591},[578,2156,2157],{"class":624}," fboRef ",[578,2159,598],{"class":583},[578,2161,2136],{"class":660},[578,2163,584],{"class":583},[578,2165,2167],{"class":2166},"sBMFI","InstanceType",[578,2169,2170],{"class":583},"\u003Ctypeof",[578,2172,2071],{"class":624},[578,2174,2175],{"class":583},">",[578,2177,2178],{"class":583}," |",[578,2180,2181],{"class":2166}," null",[578,2183,2175],{"class":583},[578,2185,664],{"class":624},[578,2187,2188],{"class":583},"null",[578,2190,675],{"class":624},[578,2192,2193,2195,2198,2200,2202,2204,2207,2209,2211,2213,2215,2217],{"class":580,"line":703},[578,2194,652],{"class":591},[578,2196,2197],{"class":624}," torusRef ",[578,2199,598],{"class":583},[578,2201,2136],{"class":660},[578,2203,584],{"class":583},[578,2205,2206],{"class":2166},"TresObject",[578,2208,2178],{"class":583},[578,2210,2181],{"class":2166},[578,2212,2175],{"class":583},[578,2214,664],{"class":624},[578,2216,2188],{"class":583},[578,2218,675],{"class":624},[578,2220,2221],{"class":580,"line":714},[578,2222,646],{"emptyLinePlaceholder":512},[578,2224,2225,2228,2231,2234,2238,2241,2243,2245,2248,2251,2254],{"class":580,"line":569},[578,2226,2227],{"class":591},"function",[578,2229,2230],{"class":660}," onLoop",[578,2232,2233],{"class":583},"({",[578,2235,2237],{"class":2236},"sHdIc"," elapsed",[578,2239,2240],{"class":583}," }:",[578,2242,621],{"class":583},[578,2244,2237],{"class":587},[578,2246,2247],{"class":583},":",[578,2249,2250],{"class":2166}," number",[578,2252,2253],{"class":583}," })",[578,2255,2256],{"class":583}," {\n",[578,2258,2259,2262,2265,2268,2271,2273,2276,2279,2282,2285],{"class":580,"line":570},[578,2260,2261],{"class":617}," if",[578,2263,2264],{"class":587}," (",[578,2266,2267],{"class":583},"!",[578,2269,2270],{"class":624},"torusRef",[578,2272,824],{"class":583},[578,2274,2275],{"class":624},"value",[578,2277,2278],{"class":587},") ",[578,2280,2281],{"class":583},"{",[578,2283,2284],{"class":617}," return",[578,2286,2287],{"class":583}," }\n",[578,2289,2290,2293,2295,2297,2299,2302,2304,2307,2310,2312,2315],{"class":580,"line":571},[578,2291,2292],{"class":624}," torusRef",[578,2294,824],{"class":583},[578,2296,2275],{"class":624},[578,2298,824],{"class":583},[578,2300,2301],{"class":624},"rotation",[578,2303,824],{"class":583},[578,2305,2306],{"class":624},"x",[578,2308,2309],{"class":583}," =",[578,2311,2237],{"class":624},[578,2313,2314],{"class":583}," *",[578,2316,2318],{"class":2317},"sbssI"," 0.745\n",[578,2320,2321,2323,2325,2327,2329,2331,2333,2336,2338,2340,2342],{"class":580,"line":572},[578,2322,2292],{"class":624},[578,2324,824],{"class":583},[578,2326,2275],{"class":624},[578,2328,824],{"class":583},[578,2330,2301],{"class":624},[578,2332,824],{"class":583},[578,2334,2335],{"class":624},"y",[578,2337,2309],{"class":583},[578,2339,2237],{"class":624},[578,2341,2314],{"class":583},[578,2343,2344],{"class":2317}," 0.361\n",[578,2346,2347],{"class":580,"line":573},[578,2348,2349],{"class":583},"}\n",[578,2351,2352,2354,2356],{"class":580,"line":786},[578,2353,681],{"class":583},[578,2355,588],{"class":587},[578,2357,610],{"class":583},[578,2359,2360],{"class":580,"line":796},[578,2361,646],{"emptyLinePlaceholder":512},[578,2363,2364,2366,2368],{"class":580,"line":806},[578,2365,584],{"class":583},[578,2367,698],{"class":587},[578,2369,610],{"class":583},[578,2371,2372,2374,2376,2379,2381,2383,2386,2388,2391,2393,2395,2398,2400],{"class":580,"line":1856},[578,2373,706],{"class":583},[578,2375,709],{"class":587},[578,2377,2378],{"class":591}," :clear-color",[578,2380,598],{"class":583},[578,2382,601],{"class":583},[578,2384,2385],{"class":604},"0x222",[578,2387,601],{"class":583},[578,2389,2390],{"class":591}," @loop",[578,2392,598],{"class":583},[578,2394,601],{"class":583},[578,2396,2397],{"class":604},"onLoop",[578,2399,601],{"class":583},[578,2401,610],{"class":583},[578,2403,2404,2406,2408,2410,2412,2414,2417,2419],{"class":580,"line":1877},[578,2405,717],{"class":583},[578,2407,1686],{"class":587},[578,2409,1689],{"class":591},[578,2411,598],{"class":583},[578,2413,601],{"class":583},[578,2415,2416],{"class":604},"[0, 0.5, 5]",[578,2418,601],{"class":583},[578,2420,1701],{"class":583},[578,2422,2423,2425,2427],{"class":580,"line":1886},[578,2424,717],{"class":583},[578,2426,1708],{"class":587},[578,2428,1701],{"class":583},[578,2430,2432],{"class":580,"line":2431},21,[578,2433,646],{"emptyLinePlaceholder":512},[578,2435,2437,2439,2442,2444,2446,2448,2451,2453],{"class":580,"line":2436},22,[578,2438,717],{"class":583},[578,2440,2441],{"class":587},"TresGridHelper",[578,2443,1767],{"class":591},[578,2445,598],{"class":583},[578,2447,601],{"class":583},[578,2449,2450],{"class":604},"[10, 10]",[578,2452,601],{"class":583},[578,2454,1701],{"class":583},[578,2456,2458,2460],{"class":2457,"line":2036},[580,614],[578,2459,717],{"class":583},[578,2461,2462],{"class":587},"Fbo\n",[578,2464,2466,2469,2471,2473,2476],{"class":2465,"line":2037},[580,614],[578,2467,2468],{"class":591}," ref",[578,2470,598],{"class":583},[578,2472,601],{"class":583},[578,2474,2475],{"class":604},"fboRef",[578,2477,747],{"class":583},[578,2479,2481,2484,2486,2488,2490],{"class":2480,"line":2038},[580,614],[578,2482,2483],{"class":591}," :depth",[578,2485,598],{"class":583},[578,2487,601],{"class":583},[578,2489,1144],{"class":604},[578,2491,747],{"class":583},[578,2493,2495,2498,2500,2502,2505],{"class":2494,"line":2039},[580,614],[578,2496,2497],{"class":591}," :settings",[578,2499,598],{"class":583},[578,2501,601],{"class":583},[578,2503,2504],{"class":604},"{ samples: 1 }",[578,2506,747],{"class":583},[578,2508,2510],{"class":580,"line":2509},27,[578,2511,2512],{"class":583}," />\n",[578,2514,2516,2518,2520],{"class":580,"line":2515},28,[578,2517,717],{"class":583},[578,2519,1754],{"class":587},[578,2521,610],{"class":583},[578,2523,2525,2527,2530,2532,2534,2536,2539,2541],{"class":580,"line":2524},29,[578,2526,728],{"class":583},[578,2528,2529],{"class":587},"TresBoxGeometry",[578,2531,1767],{"class":591},[578,2533,598],{"class":583},[578,2535,601],{"class":583},[578,2537,2538],{"class":604},"[1, 1, 1]",[578,2540,601],{"class":583},[578,2542,1701],{"class":583},[578,2544,2546],{"class":580,"line":2545},30,[578,2547,646],{"emptyLinePlaceholder":512},[578,2549,2551,2553],{"class":580,"line":2550},31,[578,2552,728],{"class":583},[578,2554,2555],{"class":587},"TresMeshBasicMaterial\n",[578,2557,2559,2562,2564,2566,2569],{"class":580,"line":2558},32,[578,2560,2561],{"class":591}," :color",[578,2563,598],{"class":583},[578,2565,601],{"class":583},[578,2567,2568],{"class":604},"0xFFFFFF",[578,2570,747],{"class":583},[578,2572,2574,2577,2579,2581,2584],{"class":580,"line":2573},33,[578,2575,2576],{"class":591}," :map",[578,2578,598],{"class":583},[578,2580,601],{"class":583},[578,2582,2583],{"class":604},"fboRef?.instance?.texture ?? null",[578,2585,747],{"class":583},[578,2587,2589],{"class":580,"line":2588},34,[578,2590,783],{"class":583},[578,2592,2594,2596,2598],{"class":580,"line":2593},35,[578,2595,789],{"class":583},[578,2597,1754],{"class":587},[578,2599,610],{"class":583},[578,2601,2603],{"class":580,"line":2602},36,[578,2604,646],{"emptyLinePlaceholder":512},[578,2606,2608,2610],{"class":580,"line":2607},37,[578,2609,717],{"class":583},[578,2611,2612],{"class":587},"TresMesh\n",[578,2614,2616,2618,2620,2622,2624],{"class":580,"line":2615},38,[578,2617,2468],{"class":591},[578,2619,598],{"class":583},[578,2621,601],{"class":583},[578,2623,2270],{"class":604},[578,2625,747],{"class":583},[578,2627,2629,2632,2634,2636,2639],{"class":580,"line":2628},39,[578,2630,2631],{"class":591}," :position",[578,2633,598],{"class":583},[578,2635,601],{"class":583},[578,2637,2638],{"class":604},"[3, 0, 0]",[578,2640,747],{"class":583},[578,2642,2644],{"class":580,"line":2643},40,[578,2645,2646],{"class":583}," >\n",[578,2648,2650,2652,2655,2657,2659,2661,2664,2666],{"class":580,"line":2649},41,[578,2651,728],{"class":583},[578,2653,2654],{"class":587},"TresTorusGeometry",[578,2656,1767],{"class":591},[578,2658,598],{"class":583},[578,2660,601],{"class":583},[578,2662,2663],{"class":604},"[1, 0.5, 16, 100]",[578,2665,601],{"class":583},[578,2667,1701],{"class":583},[578,2669,2671,2673,2676],{"class":580,"line":2670},42,[578,2672,728],{"class":583},[578,2674,2675],{"class":587},"TresMeshNormalMaterial",[578,2677,1701],{"class":583},[578,2679,2681,2683,2685],{"class":580,"line":2680},43,[578,2682,789],{"class":583},[578,2684,1754],{"class":587},[578,2686,610],{"class":583},[578,2688,2690,2692,2694],{"class":580,"line":2689},44,[578,2691,799],{"class":583},[578,2693,709],{"class":587},[578,2695,610],{"class":583},[578,2697,2699,2701,2703],{"class":580,"line":2698},45,[578,2700,681],{"class":583},[578,2702,698],{"class":587},[578,2704,610],{"class":583},[560,2706,936],{"id":935},[938,2708,2709,2719],{},[941,2710,2711],{},[944,2712,2713,2715,2717],{},[947,2714,1903],{"align":949},[947,2716,953],{"align":949},[947,2718,956],{},[958,2720,2721,2739,2756,2781,2809],{},[944,2722,2723,2731,2736],{},[963,2724,2725],{"align":949},[2726,2727,2728],"strong",{},[534,2729,2730],{},"width",[963,2732,2733,2735],{"align":949},[534,2734,996],{}," - The width of the FBO.",[963,2737,2738],{},"Width of the canvas",[944,2740,2741,2748,2753],{},[963,2742,2743],{"align":949},[2726,2744,2745],{},[534,2746,2747],{},"height",[963,2749,2750,2752],{"align":949},[534,2751,996],{}," - the height of the FBO",[963,2754,2755],{},"Height of the canvas",[944,2757,2758,2765,2777],{},[963,2759,2760],{"align":949},[2726,2761,2762],{},[534,2763,2764],{},"depth",[963,2766,2767,2769,2770,824],{"align":949},[534,2768,1098],{}," - Whether or not the FBO should render the depth to a ",[539,2771,2774],{"href":2772,"rel":2773},"https://threejs.org/docs/?q=webglre#api/en/renderers/WebGLRenderTarget.depthTexture",[543],[534,2775,2776],{},"depthTexture",[963,2778,2779],{},[534,2780,1144],{},[944,2782,2783,2790,2804],{},[963,2784,2785],{"align":949},[2726,2786,2787],{},[534,2788,2789],{},"settings",[963,2791,2792,2795,2796],{"align":949},[534,2793,2794],{},"WebGLRenderTargetOptions"," - Every other configuration property for the ",[539,2797,2800,2803],{"href":2798,"rel":2799},"https://threejs.org/docs/#api/en/renderers/WebGLRenderTarget",[543],[534,2801,2802],{},"WebGLRenderTarget"," class",[963,2805,2806],{},[534,2807,2808],{},"{}",[944,2810,2811,2818,2823],{},[963,2812,2813],{"align":949},[2726,2814,2815],{},[534,2816,2817],{},"autoRender",[963,2819,2820,2822],{"align":949},[534,2821,1098],{}," - Whether to automatically render the FBO on the default scene.",[963,2824,2825],{},[534,2826,1104],{},[560,2828,2830],{"id":2829},"usefbo","useFBO",[496,2832,2022],{},[496,2834,2835,2836,2838],{},"Cientos provides a ",[534,2837,2830],{}," composable to make it easy to use FBOs in your application.",[814,2840,2841],{},[496,2842,1367,2843,2845],{},[534,2844,2830],{}," composable must be used inside of a child component since it needs the context of TresCanvas.",[902,2847,15],{"id":2848},"usage-1",[564,2850,2853],{"className":566,"code":2851,"highlights":2852,"language":574,"meta":504,"style":504},"\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",[506,649,678,688,693,703,714,569,570,1886],[534,2854,2855,2875,2895,2899,2916,2931,2944,2956,2966,2979,2985,2993,3001,3005,3013,3021,3039,3043,3049,3062,3077,3081,3089],{"__ignoreMap":504},[578,2856,2857,2859,2861,2863,2865,2867,2869,2871,2873],{"class":580,"line":505},[578,2858,584],{"class":583},[578,2860,588],{"class":587},[578,2862,592],{"class":591},[578,2864,595],{"class":591},[578,2866,598],{"class":583},[578,2868,601],{"class":583},[578,2870,605],{"class":604},[578,2872,601],{"class":583},[578,2874,610],{"class":583},[578,2876,2878,2880,2882,2885,2887,2889,2891,2893],{"class":2877,"line":506},[580,614],[578,2879,618],{"class":617},[578,2881,621],{"class":583},[578,2883,2884],{"class":624}," useFBO",[578,2886,628],{"class":583},[578,2888,631],{"class":617},[578,2890,634],{"class":583},[578,2892,637],{"class":604},[578,2894,640],{"class":583},[578,2896,2897],{"class":580,"line":643},[578,2898,646],{"emptyLinePlaceholder":512},[578,2900,2902,2904,2907,2909,2911,2913],{"class":2901,"line":649},[580,614],[578,2903,652],{"class":591},[578,2905,2906],{"class":624}," fboTarget ",[578,2908,598],{"class":583},[578,2910,2884],{"class":660},[578,2912,664],{"class":624},[578,2914,2915],{"class":583},"{\n",[578,2917,2919,2922,2924,2928],{"class":2918,"line":678},[580,614],[578,2920,2921],{"class":587}," depth",[578,2923,2247],{"class":583},[578,2925,2927],{"class":2926},"sfNiH"," true",[578,2929,2930],{"class":583},",\n",[578,2932,2934,2937,2939,2942],{"class":2933,"line":688},[580,614],[578,2935,2936],{"class":587}," width",[578,2938,2247],{"class":583},[578,2940,2941],{"class":2317}," 512",[578,2943,2930],{"class":583},[578,2945,2947,2950,2952,2954],{"class":2946,"line":693},[580,614],[578,2948,2949],{"class":587}," height",[578,2951,2247],{"class":583},[578,2953,2941],{"class":2317},[578,2955,2930],{"class":583},[578,2957,2959,2962,2964],{"class":2958,"line":703},[580,614],[578,2960,2961],{"class":587}," settings",[578,2963,2247],{"class":583},[578,2965,2256],{"class":583},[578,2967,2969,2972,2974,2977],{"class":2968,"line":714},[580,614],[578,2970,2971],{"class":587}," samples",[578,2973,2247],{"class":583},[578,2975,2976],{"class":2317}," 1",[578,2978,2930],{"class":583},[578,2980,2982],{"class":2981,"line":569},[580,614],[578,2983,2984],{"class":583}," },\n",[578,2986,2988,2991],{"class":2987,"line":570},[580,614],[578,2989,2990],{"class":583},"}",[578,2992,675],{"class":624},[578,2994,2995,2997,2999],{"class":580,"line":571},[578,2996,681],{"class":583},[578,2998,588],{"class":587},[578,3000,610],{"class":583},[578,3002,3003],{"class":580,"line":572},[578,3004,646],{"emptyLinePlaceholder":512},[578,3006,3007,3009,3011],{"class":580,"line":573},[578,3008,584],{"class":583},[578,3010,698],{"class":587},[578,3012,610],{"class":583},[578,3014,3015,3017,3019],{"class":580,"line":786},[578,3016,706],{"class":583},[578,3018,1754],{"class":587},[578,3020,610],{"class":583},[578,3022,3023,3025,3027,3029,3031,3033,3035,3037],{"class":580,"line":796},[578,3024,717],{"class":583},[578,3026,2529],{"class":587},[578,3028,1767],{"class":591},[578,3030,598],{"class":583},[578,3032,601],{"class":583},[578,3034,2538],{"class":604},[578,3036,601],{"class":583},[578,3038,1701],{"class":583},[578,3040,3041],{"class":580,"line":806},[578,3042,646],{"emptyLinePlaceholder":512},[578,3044,3045,3047],{"class":580,"line":1856},[578,3046,717],{"class":583},[578,3048,2555],{"class":587},[578,3050,3051,3054,3056,3058,3060],{"class":580,"line":1877},[578,3052,3053],{"class":591}," :color",[578,3055,598],{"class":583},[578,3057,601],{"class":583},[578,3059,2568],{"class":604},[578,3061,747],{"class":583},[578,3063,3065,3068,3070,3072,3075],{"class":3064,"line":1886},[580,614],[578,3066,3067],{"class":591}," :map",[578,3069,598],{"class":583},[578,3071,601],{"class":583},[578,3073,3074],{"class":604},"fboTarget?.texture ?? null",[578,3076,747],{"class":583},[578,3078,3079],{"class":580,"line":2431},[578,3080,2512],{"class":583},[578,3082,3083,3085,3087],{"class":580,"line":2436},[578,3084,799],{"class":583},[578,3086,1754],{"class":587},[578,3088,610],{"class":583},[578,3090,3091,3093,3095],{"class":580,"line":2036},[578,3092,681],{"class":583},[578,3094,698],{"class":587},[578,3096,610],{"class":583},[902,3098,3100],{"id":3099},"options","Options",[938,3102,3103,3113],{},[941,3104,3105],{},[944,3106,3107,3109,3111],{},[947,3108,1903],{"align":949},[947,3110,953],{"align":949},[947,3112,956],{},[958,3114,3115,3129,3143,3164],{},[944,3116,3117,3123,3127],{},[963,3118,3119],{"align":949},[2726,3120,3121],{},[534,3122,2730],{},[963,3124,3125,2735],{"align":949},[534,3126,996],{},[963,3128,2738],{},[944,3130,3131,3137,3141],{},[963,3132,3133],{"align":949},[2726,3134,3135],{},[534,3136,2747],{},[963,3138,3139,2752],{"align":949},[534,3140,996],{},[963,3142,2755],{},[944,3144,3145,3151,3160],{},[963,3146,3147],{"align":949},[2726,3148,3149],{},[534,3150,2764],{},[963,3152,3153,2769,3155,824],{"align":949},[534,3154,1098],{},[539,3156,3158],{"href":2772,"rel":3157},[543],[534,3159,2776],{},[963,3161,3162],{},[534,3163,1144],{},[944,3165,3166,3172,3181],{},[963,3167,3168],{"align":949},[2726,3169,3170],{},[534,3171,2789],{},[963,3173,3174,2795,3176],{"align":949},[534,3175,2794],{},[539,3177,3179,2803],{"href":2798,"rel":3178},[543],[534,3180,2802],{},[963,3182,3183],{},[534,3184,2808],{},[1550,3186,3187],{},"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":504,"searchDepth":505,"depth":506,"links":3189},[3190,3191,3192],{"id":562,"depth":506,"text":15},{"id":935,"depth":506,"text":936},{"id":2829,"depth":506,"text":2830,"children":3193},[3194,3195],{"id":2848,"depth":643,"text":15},{"id":3099,"depth":643,"text":3100},"Render to texture using Frame Buffer Objects.",{},{"title":425,"description":3196},"zUF36nsNVRlMP7A5uu65IxZbcmtRV1okKCAlizt0dq4",{"id":3201,"title":429,"body":3202,"description":3581,"extension":509,"links":510,"meta":3582,"navigation":512,"path":430,"seo":3583,"stem":431,"__hash__":3584},"docs/2.api/9.objects/gradient-texture.md",{"type":493,"value":3203,"toc":3577},[3204,3209,3219,3221,3425,3427,3575],[2015,3205,3206],{},[3207,3208],"objects-gradient-texture",{},[496,3210,3211,3214,3215,3218],{},[534,3212,3213],{},"\u003CGradientTexture />"," creates a gradient in a THREE.Texture and attaches it to its parent THREE.Material's ",[534,3216,3217],{},"map"," by default.",[560,3220,15],{"id":562},[564,3222,3224],{"className":566,"code":3223,"language":574,"meta":504,"style":504},"\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",[534,3225,3226,3246,3265,3273,3277,3285,3293,3312,3316,3324,3344,3353,3360,3374,3388,3393,3401,3409,3417],{"__ignoreMap":504},[578,3227,3228,3230,3232,3234,3236,3238,3240,3242,3244],{"class":580,"line":505},[578,3229,584],{"class":583},[578,3231,588],{"class":587},[578,3233,592],{"class":591},[578,3235,595],{"class":591},[578,3237,598],{"class":583},[578,3239,601],{"class":583},[578,3241,605],{"class":604},[578,3243,601],{"class":583},[578,3245,610],{"class":583},[578,3247,3248,3250,3252,3255,3257,3259,3261,3263],{"class":580,"line":506},[578,3249,618],{"class":617},[578,3251,621],{"class":583},[578,3253,3254],{"class":624}," GradientTexture",[578,3256,628],{"class":583},[578,3258,631],{"class":617},[578,3260,634],{"class":583},[578,3262,637],{"class":604},[578,3264,640],{"class":583},[578,3266,3267,3269,3271],{"class":580,"line":643},[578,3268,681],{"class":583},[578,3270,588],{"class":587},[578,3272,610],{"class":583},[578,3274,3275],{"class":580,"line":649},[578,3276,646],{"emptyLinePlaceholder":512},[578,3278,3279,3281,3283],{"class":580,"line":678},[578,3280,584],{"class":583},[578,3282,698],{"class":587},[578,3284,610],{"class":583},[578,3286,3287,3289,3291],{"class":580,"line":688},[578,3288,706],{"class":583},[578,3290,709],{"class":587},[578,3292,610],{"class":583},[578,3294,3295,3297,3299,3301,3303,3305,3308,3310],{"class":580,"line":693},[578,3296,717],{"class":583},[578,3298,1686],{"class":587},[578,3300,1689],{"class":591},[578,3302,598],{"class":583},[578,3304,601],{"class":583},[578,3306,3307],{"class":604},"[0, 0, 5]",[578,3309,601],{"class":583},[578,3311,1701],{"class":583},[578,3313,3314],{"class":580,"line":703},[578,3315,646],{"emptyLinePlaceholder":512},[578,3317,3318,3320,3322],{"class":580,"line":714},[578,3319,717],{"class":583},[578,3321,1754],{"class":587},[578,3323,610],{"class":583},[578,3325,3326,3328,3331,3333,3335,3337,3340,3342],{"class":580,"line":569},[578,3327,728],{"class":583},[578,3329,3330],{"class":587},"TresPlaneGeometry",[578,3332,1767],{"class":591},[578,3334,598],{"class":583},[578,3336,601],{"class":583},[578,3338,3339],{"class":604},"[2, 2]",[578,3341,601],{"class":583},[578,3343,1701],{"class":583},[578,3345,3346,3348,3351],{"class":580,"line":570},[578,3347,728],{"class":583},[578,3349,3350],{"class":587},"TresMeshBasicMaterial",[578,3352,610],{"class":583},[578,3354,3355,3357],{"class":580,"line":571},[578,3356,1761],{"class":583},[578,3358,3359],{"class":587},"GradientTexture\n",[578,3361,3362,3365,3367,3369,3372],{"class":580,"line":572},[578,3363,3364],{"class":591}," :stops",[578,3366,598],{"class":583},[578,3368,601],{"class":583},[578,3370,3371],{"class":604},"[0, 1]",[578,3373,747],{"class":583},[578,3375,3376,3379,3381,3383,3386],{"class":580,"line":573},[578,3377,3378],{"class":591}," :colors",[578,3380,598],{"class":583},[578,3382,601],{"class":583},[578,3384,3385],{"class":604},"['#ff0000', '#0000ff']",[578,3387,747],{"class":583},[578,3389,3390],{"class":580,"line":786},[578,3391,3392],{"class":583}," />\n",[578,3394,3395,3397,3399],{"class":580,"line":796},[578,3396,1815],{"class":583},[578,3398,3350],{"class":587},[578,3400,610],{"class":583},[578,3402,3403,3405,3407],{"class":580,"line":806},[578,3404,789],{"class":583},[578,3406,1754],{"class":587},[578,3408,610],{"class":583},[578,3410,3411,3413,3415],{"class":580,"line":1856},[578,3412,799],{"class":583},[578,3414,709],{"class":587},[578,3416,610],{"class":583},[578,3418,3419,3421,3423],{"class":580,"line":1877},[578,3420,681],{"class":583},[578,3422,698],{"class":587},[578,3424,610],{"class":583},[560,3426,936],{"id":935},[938,3428,3429,3439],{},[941,3430,3431],{},[944,3432,3433,3435,3437],{},[947,3434,1903],{"align":949},[947,3436,953],{"align":949},[947,3438,956],{},[958,3440,3441,3470,3485,3500,3514,3528,3546,3560],{},[944,3442,3443,3448,3468],{},[963,3444,3445],{"align":949},[534,3446,3447],{},"stops",[963,3449,3450,3451,3454,3455,3457,3458,3460,3461,3464,3465,824],{"align":949},"A ",[534,3452,3453],{},"number[]"," of values between ",[534,3456,1129],{}," and ",[534,3459,1795],{}," representing the color positions in the gradient. ",[534,3462,3463],{},"stops.length"," should match ",[534,3466,3467],{},"color.length",[963,3469],{},[944,3471,3472,3477,3483],{},[963,3473,3474],{"align":949},[534,3475,3476],{},"colors",[963,3478,3450,3479,3482],{"align":949},[534,3480,3481],{},"THREE.ColorRepresentation[]"," representing the colors in the gradient.",[963,3484],{},[944,3486,3487,3492,3495],{},[963,3488,3489],{"align":949},[534,3490,3491],{},"attach",[963,3493,3494],{"align":949},"Where the component should be attached within its parent.",[963,3496,3497],{},[534,3498,3499],{},"'map'",[944,3501,3502,3506,3509],{},[963,3503,3504],{"align":949},[534,3505,2747],{},[963,3507,3508],{"align":949},"Height of the canvas used to draw the gradient.",[963,3510,3511],{},[534,3512,3513],{},"1024",[944,3515,3516,3520,3523],{},[963,3517,3518],{"align":949},[534,3519,2730],{},[963,3521,3522],{"align":949},"Width of the canvas used to draw the gradient.",[963,3524,3525],{},[534,3526,3527],{},"16",[944,3529,3530,3535,3541],{},[963,3531,3532],{"align":949},[534,3533,3534],{},"type",[963,3536,3537,3540],{"align":949},[534,3538,3539],{},"'linear' | 'radial'"," Type of gradient to draw.",[963,3542,3543],{},[534,3544,3545],{},"'linear'",[944,3547,3548,3553,3556],{},[963,3549,3550],{"align":949},[534,3551,3552],{},"innerCircleRadius",[963,3554,3555],{"align":949},"Radius of the inner circle of a radial gradient.",[963,3557,3558],{},[534,3559,1129],{},[944,3561,3562,3567,3570],{},[963,3563,3564],{"align":949},[534,3565,3566],{},"outerCircleRadius",[963,3568,3569],{"align":949},"Radius of the outer circle of a radial gradient.",[963,3571,3572],{},[534,3573,3574],{},"'auto'",[1550,3576,2001],{},{"title":504,"searchDepth":505,"depth":506,"links":3578},[3579,3580],{"id":562,"depth":506,"text":15},{"id":935,"depth":506,"text":936},"Create gradient textures for materials.",{},{"title":429,"description":3581},"NUI7_e9BLX8HMymE1TjQDQS-QQXxuK5bdda9GdveJPw",{"id":3586,"title":433,"body":3587,"description":9259,"extension":509,"links":510,"meta":9260,"navigation":512,"path":434,"seo":9261,"stem":435,"__hash__":9262},"docs/2.api/9.objects/html.md",{"type":493,"value":3588,"toc":9238},[3589,3592,3606,3611,3613,4028,4032,4039,4044,4060,4068,4073,4217,4223,4227,4251,4256,4386,4390,4414,4417,4441,4459,4480,4485,4650,4654,4659,4683,4695,4700,6411,6415,6440,6461,6502,6506,6522,6536,6577,6584,6608,6628,6633,8115,8121,8127,8132,8334,8351,8353,8717,8719,8739,8743,8826,8830,9009,9214,9217,9235],[496,3590,3591],{},"This component allows you to project HTML content to any object in your scene. TresJS will automatically update the position of the HTML content to match the position of the object in the scene.",[496,3593,3594,3595,3457,3598,3601,3602,3605],{},"🚀 Works seamlessly with both ",[2726,3596,3597],{},"PerspectiveCamera",[2726,3599,3600],{},"OrthographicCamera"," — the active camera is automatically detected by the ",[534,3603,3604],{},"\u003CHtml>"," component.",[2015,3607,3608],{},[3609,3610],"objects-html",{},[560,3612,15],{"id":562},[564,3614,3617],{"className":566,"code":3615,"highlights":3616,"language":574,"meta":504,"style":504},"\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",[506,572,573,786,796,806,1856],[534,3618,3619,3639,3663,3681,3689,3693,3701,3721,3740,3748,3766,3774,3782,3790,3796,3802,3817,3832,3847,3852,3881,3890,3898,3906,3914,3922,3930,3941,3949,3966,3980,3992,4004,4016,4020],{"__ignoreMap":504},[578,3620,3621,3623,3625,3627,3629,3631,3633,3635,3637],{"class":580,"line":505},[578,3622,584],{"class":583},[578,3624,588],{"class":587},[578,3626,592],{"class":591},[578,3628,595],{"class":591},[578,3630,598],{"class":583},[578,3632,601],{"class":583},[578,3634,605],{"class":604},[578,3636,601],{"class":583},[578,3638,610],{"class":583},[578,3640,3642,3644,3646,3649,3651,3653,3655,3657,3659,3661],{"class":3641,"line":506},[580,614],[578,3643,618],{"class":617},[578,3645,621],{"class":583},[578,3647,3648],{"class":624}," Html",[578,3650,1638],{"class":583},[578,3652,1641],{"class":624},[578,3654,628],{"class":583},[578,3656,631],{"class":617},[578,3658,634],{"class":583},[578,3660,637],{"class":604},[578,3662,640],{"class":583},[578,3664,3665,3667,3669,3671,3673,3675,3677,3679],{"class":580,"line":643},[578,3666,618],{"class":617},[578,3668,621],{"class":583},[578,3670,2117],{"class":624},[578,3672,628],{"class":583},[578,3674,631],{"class":617},[578,3676,634],{"class":583},[578,3678,2106],{"class":604},[578,3680,640],{"class":583},[578,3682,3683,3685,3687],{"class":580,"line":649},[578,3684,681],{"class":583},[578,3686,588],{"class":587},[578,3688,610],{"class":583},[578,3690,3691],{"class":580,"line":678},[578,3692,646],{"emptyLinePlaceholder":512},[578,3694,3695,3697,3699],{"class":580,"line":688},[578,3696,584],{"class":583},[578,3698,698],{"class":587},[578,3700,610],{"class":583},[578,3702,3703,3705,3707,3710,3712,3714,3717,3719],{"class":580,"line":693},[578,3704,706],{"class":583},[578,3706,709],{"class":587},[578,3708,3709],{"class":591}," clear-color",[578,3711,598],{"class":583},[578,3713,601],{"class":583},[578,3715,3716],{"class":604},"#82DBC5",[578,3718,601],{"class":583},[578,3720,610],{"class":583},[578,3722,3723,3725,3727,3729,3731,3733,3736,3738],{"class":580,"line":703},[578,3724,717],{"class":583},[578,3726,1686],{"class":587},[578,3728,1689],{"class":591},[578,3730,598],{"class":583},[578,3732,601],{"class":583},[578,3734,3735],{"class":604},"[2, 2, 5]",[578,3737,601],{"class":583},[578,3739,1701],{"class":583},[578,3741,3742,3744,3746],{"class":580,"line":714},[578,3743,717],{"class":583},[578,3745,1708],{"class":587},[578,3747,1701],{"class":583},[578,3749,3750,3752,3754,3756,3758,3760,3762,3764],{"class":580,"line":569},[578,3751,717],{"class":583},[578,3753,1754],{"class":587},[578,3755,1689],{"class":591},[578,3757,598],{"class":583},[578,3759,601],{"class":583},[578,3761,2538],{"class":604},[578,3763,601],{"class":583},[578,3765,610],{"class":583},[578,3767,3768,3770,3772],{"class":580,"line":570},[578,3769,728],{"class":583},[578,3771,2529],{"class":587},[578,3773,1701],{"class":583},[578,3775,3776,3778,3780],{"class":580,"line":571},[578,3777,728],{"class":583},[578,3779,2675],{"class":587},[578,3781,1701],{"class":583},[578,3783,3785,3787],{"class":3784,"line":572},[580,614],[578,3786,728],{"class":583},[578,3788,3789],{"class":587},"Html\n",[578,3791,3793],{"class":3792,"line":573},[580,614],[578,3794,3795],{"class":591}," center\n",[578,3797,3799],{"class":3798,"line":786},[580,614],[578,3800,3801],{"class":591}," transform\n",[578,3803,3805,3808,3810,3812,3815],{"class":3804,"line":796},[580,614],[578,3806,3807],{"class":591}," :distance-factor",[578,3809,598],{"class":583},[578,3811,601],{"class":583},[578,3813,3814],{"class":604},"4",[578,3816,747],{"class":583},[578,3818,3820,3823,3825,3827,3830],{"class":3819,"line":806},[580,614],[578,3821,3822],{"class":591}," :position",[578,3824,598],{"class":583},[578,3826,601],{"class":583},[578,3828,3829],{"class":604},"[0, 0, 0.65]",[578,3831,747],{"class":583},[578,3833,3835,3838,3840,3842,3845],{"class":3834,"line":1856},[580,614],[578,3836,3837],{"class":591}," :scale",[578,3839,598],{"class":583},[578,3841,601],{"class":583},[578,3843,3844],{"class":604},"[0.75, 0.75, 0.75]",[578,3846,747],{"class":583},[578,3848,3849],{"class":580,"line":1877},[578,3850,3851],{"class":583}," >\n",[578,3853,3854,3856,3859,3861,3863,3865,3868,3870,3872,3875,3877,3879],{"class":580,"line":1886},[578,3855,1761],{"class":583},[578,3857,3858],{"class":587},"h1",[578,3860,2803],{"class":591},[578,3862,598],{"class":583},[578,3864,601],{"class":583},[578,3866,3867],{"class":604},"title",[578,3869,601],{"class":583},[578,3871,2175],{"class":583},[578,3873,3874],{"class":624},"I'm a Box 📦",[578,3876,681],{"class":583},[578,3878,3858],{"class":587},[578,3880,610],{"class":583},[578,3882,3883,3885,3888],{"class":580,"line":2431},[578,3884,1815],{"class":583},[578,3886,3887],{"class":587},"Html",[578,3889,610],{"class":583},[578,3891,3892,3894,3896],{"class":580,"line":2436},[578,3893,789],{"class":583},[578,3895,1754],{"class":587},[578,3897,610],{"class":583},[578,3899,3900,3902,3904],{"class":580,"line":2036},[578,3901,717],{"class":583},[578,3903,2441],{"class":587},[578,3905,1701],{"class":583},[578,3907,3908,3910,3912],{"class":580,"line":2037},[578,3909,717],{"class":583},[578,3911,1839],{"class":587},[578,3913,1701],{"class":583},[578,3915,3916,3918,3920],{"class":580,"line":2038},[578,3917,799],{"class":583},[578,3919,709],{"class":587},[578,3921,610],{"class":583},[578,3923,3924,3926,3928],{"class":580,"line":2039},[578,3925,681],{"class":583},[578,3927,698],{"class":587},[578,3929,610],{"class":583},[578,3931,3932,3934,3936,3939],{"class":580,"line":2509},[578,3933,584],{"class":583},[578,3935,1550],{"class":587},[578,3937,3938],{"class":591}," scoped",[578,3940,610],{"class":583},[578,3942,3943,3945,3947],{"class":580,"line":2515},[578,3944,824],{"class":583},[578,3946,3867],{"class":2166},[578,3948,2256],{"class":583},[578,3950,3951,3955,3957,3960,3963],{"class":580,"line":2524},[578,3952,3954],{"class":3953},"sqsOY"," background-color",[578,3956,2247],{"class":583},[578,3958,3959],{"class":583}," #",[578,3961,3962],{"class":624},"1e1e1e",[578,3964,3965],{"class":583},";\n",[578,3967,3968,3971,3973,3975,3978],{"class":580,"line":2545},[578,3969,3970],{"class":3953}," color",[578,3972,2247],{"class":583},[578,3974,3959],{"class":583},[578,3976,3977],{"class":624},"ffffff",[578,3979,3965],{"class":583},[578,3981,3982,3985,3987,3990],{"class":580,"line":2550},[578,3983,3984],{"class":3953}," font-size",[578,3986,2247],{"class":583},[578,3988,3989],{"class":2317}," 0.75rem",[578,3991,3965],{"class":583},[578,3993,3994,3997,3999,4002],{"class":580,"line":2558},[578,3995,3996],{"class":3953}," padding",[578,3998,2247],{"class":583},[578,4000,4001],{"class":2317}," 0.25rem",[578,4003,3965],{"class":583},[578,4005,4006,4009,4011,4014],{"class":580,"line":2573},[578,4007,4008],{"class":3953}," border-radius",[578,4010,2247],{"class":583},[578,4012,4013],{"class":2317}," 0.375rem",[578,4015,3965],{"class":583},[578,4017,4018],{"class":580,"line":2588},[578,4019,2349],{"class":583},[578,4021,4022,4024,4026],{"class":580,"line":2593},[578,4023,681],{"class":583},[578,4025,1550],{"class":587},[578,4027,610],{"class":583},[560,4029,4031],{"id":4030},"occlusion","Occlusion",[496,4033,4034,4035,4038],{},"By default, the HTML content will be visible through other objects in the scene. You can use the ",[534,4036,4037],{},"occlude"," prop to make the HTML content occlude other objects in the scene.",[496,4040,4041,4042,1414],{},"Html can be hidden behind one or more objects in your scene using the ",[534,4043,4037],{},[564,4045,4047],{"className":566,"code":4046,"language":574,"meta":504,"style":504},"\u003CHtml occlude>\n",[534,4048,4049],{"__ignoreMap":504},[578,4050,4051,4053,4055,4058],{"class":580,"line":505},[578,4052,584],{"class":583},[578,4054,3887],{"class":587},[578,4056,4057],{"class":591}," occlude",[578,4059,610],{"class":583},[496,4061,988,4062,4064,4065,4067],{},[534,4063,4037],{},", then ",[534,4066,3604],{}," will be hidden by any objects that pass in front of its position.",[2015,4069,4070],{},[4071,4072],"objects-html-occlusion",{},[4074,4075,4076,4077,4081],"details",{},"\n ",[4078,4079,4080],"summary",{},"Demo code",[564,4082,4086],{"className":4083,"code":4084,"language":4085,"meta":504,"style":504},"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",[534,4087,4088,4107,4115,4123,4173,4201,4209],{"__ignoreMap":504},[578,4089,4090,4092,4094,4096,4098,4100,4103,4105],{"class":580,"line":505},[578,4091,584],{"class":583},[578,4093,1754],{"class":587},[578,4095,1689],{"class":591},[578,4097,598],{"class":583},[578,4099,601],{"class":583},[578,4101,4102],{"class":604},"[0, 1, -2]",[578,4104,601],{"class":583},[578,4106,610],{"class":583},[578,4108,4109,4111,4113],{"class":580,"line":506},[578,4110,706],{"class":583},[578,4112,2529],{"class":587},[578,4114,1701],{"class":583},[578,4116,4117,4119,4121],{"class":580,"line":643},[578,4118,706],{"class":583},[578,4120,2675],{"class":587},[578,4122,1701],{"class":583},[578,4124,4125,4127,4129,4132,4135,4137,4140,4142,4144,4146,4148,4150,4152,4154,4157,4159,4162,4164,4166,4169,4171],{"class":580,"line":649},[578,4126,706],{"class":583},[578,4128,4085],{"class":587},[578,4130,4131],{"class":591}," center",[578,4133,4134],{"class":591}," transform",[578,4136,4057],{"class":591},[578,4138,4139],{"class":591}," :distance-factor",[578,4141,598],{"class":583},[578,4143,601],{"class":583},[578,4145,3814],{"class":604},[578,4147,601],{"class":583},[578,4149,1689],{"class":591},[578,4151,598],{"class":583},[578,4153,601],{"class":583},[578,4155,4156],{"class":604},"[0, 0, 2]",[578,4158,601],{"class":583},[578,4160,4161],{"class":591}," :z-index-range",[578,4163,598],{"class":583},[578,4165,601],{"class":583},[578,4167,4168],{"class":604},"[28, 0]",[578,4170,601],{"class":583},[578,4172,610],{"class":583},[578,4174,4175,4177,4179,4181,4183,4185,4188,4190,4192,4195,4197,4199],{"class":580,"line":678},[578,4176,717],{"class":583},[578,4178,3858],{"class":587},[578,4180,2803],{"class":591},[578,4182,598],{"class":583},[578,4184,601],{"class":583},[578,4186,4187],{"class":604},"bg-white dark:bg-dark text-xs p-1 rounded",[578,4189,601],{"class":583},[578,4191,2175],{"class":583},[578,4193,4194],{"class":624},"Move camera",[578,4196,681],{"class":583},[578,4198,3858],{"class":587},[578,4200,610],{"class":583},[578,4202,4203,4205,4207],{"class":580,"line":688},[578,4204,799],{"class":583},[578,4206,4085],{"class":587},[578,4208,610],{"class":583},[578,4210,4211,4213,4215],{"class":580,"line":693},[578,4212,681],{"class":583},[578,4214,1754],{"class":587},[578,4216,610],{"class":583},[496,4218,4219,4220,4222],{},"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 ",[534,4221,4037],{}," prop:",[902,4224,4226],{"id":4225},"single-occluder","Single occluder",[564,4228,4230],{"className":566,"code":4229,"language":574,"meta":504,"style":504},"\u003CHtml occlude=\"[mesh]\">\n",[534,4231,4232],{"__ignoreMap":504},[578,4233,4234,4236,4238,4240,4242,4244,4247,4249],{"class":580,"line":505},[578,4235,584],{"class":583},[578,4237,3887],{"class":587},[578,4239,4057],{"class":591},[578,4241,598],{"class":583},[578,4243,601],{"class":583},[578,4245,4246],{"class":604},"[mesh]",[578,4248,601],{"class":583},[578,4250,610],{"class":583},[2015,4252,4253],{},[4254,4255],"objects-html-single-occluder",{},[4074,4257,4076,4258,4260],{},[4078,4259,4080],{},[564,4261,4263],{"className":4083,"code":4262,"language":4085,"meta":504,"style":504},"\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",[534,4264,4265,4284,4292,4300,4344,4370,4378],{"__ignoreMap":504},[578,4266,4267,4269,4271,4273,4275,4277,4280,4282],{"class":580,"line":505},[578,4268,584],{"class":583},[578,4270,1754],{"class":587},[578,4272,1689],{"class":591},[578,4274,598],{"class":583},[578,4276,601],{"class":583},[578,4278,4279],{"class":604},"[0, 1, 0]",[578,4281,601],{"class":583},[578,4283,610],{"class":583},[578,4285,4286,4288,4290],{"class":580,"line":506},[578,4287,706],{"class":583},[578,4289,2529],{"class":587},[578,4291,1701],{"class":583},[578,4293,4294,4296,4298],{"class":580,"line":643},[578,4295,706],{"class":583},[578,4297,2675],{"class":587},[578,4299,1701],{"class":583},[578,4301,4302,4304,4306,4308,4310,4313,4315,4317,4320,4322,4324,4326,4328,4330,4332,4334,4336,4338,4340,4342],{"class":580,"line":649},[578,4303,706],{"class":583},[578,4305,4085],{"class":587},[578,4307,4131],{"class":591},[578,4309,4134],{"class":591},[578,4311,4312],{"class":591}," :occlude",[578,4314,598],{"class":583},[578,4316,601],{"class":583},[578,4318,4319],{"class":604},"[sphereRef]",[578,4321,601],{"class":583},[578,4323,4139],{"class":591},[578,4325,598],{"class":583},[578,4327,601],{"class":583},[578,4329,3814],{"class":604},[578,4331,601],{"class":583},[578,4333,4161],{"class":591},[578,4335,598],{"class":583},[578,4337,601],{"class":583},[578,4339,4168],{"class":604},[578,4341,601],{"class":583},[578,4343,610],{"class":583},[578,4345,4346,4348,4350,4352,4354,4356,4358,4360,4362,4364,4366,4368],{"class":580,"line":678},[578,4347,717],{"class":583},[578,4349,3858],{"class":587},[578,4351,2803],{"class":591},[578,4353,598],{"class":583},[578,4355,601],{"class":583},[578,4357,4187],{"class":604},[578,4359,601],{"class":583},[578,4361,2175],{"class":583},[578,4363,4194],{"class":624},[578,4365,681],{"class":583},[578,4367,3858],{"class":587},[578,4369,610],{"class":583},[578,4371,4372,4374,4376],{"class":580,"line":688},[578,4373,799],{"class":583},[578,4375,4085],{"class":587},[578,4377,610],{"class":583},[578,4379,4380,4382,4384],{"class":580,"line":693},[578,4381,681],{"class":583},[578,4383,1754],{"class":587},[578,4385,610],{"class":583},[902,4387,4389],{"id":4388},"multiple-occluders","Multiple occluders",[564,4391,4393],{"className":566,"code":4392,"language":574,"meta":504,"style":504},"\u003CHtml occlude=\"[mesh1, mesh2, mesh3, ...]\" />\n",[534,4394,4395],{"__ignoreMap":504},[578,4396,4397,4399,4401,4403,4405,4407,4410,4412],{"class":580,"line":505},[578,4398,584],{"class":583},[578,4400,3887],{"class":587},[578,4402,4057],{"class":591},[578,4404,598],{"class":583},[578,4406,601],{"class":583},[578,4408,4409],{"class":604},"[mesh1, mesh2, mesh3, ...]",[578,4411,601],{"class":583},[578,4413,1701],{"class":583},[496,4415,4416],{},"OR",[564,4418,4420],{"className":566,"code":4419,"language":574,"meta":504,"style":504},"\u003CHtml occlude=\"meshesArray\" />\n",[534,4421,4422],{"__ignoreMap":504},[578,4423,4424,4426,4428,4430,4432,4434,4437,4439],{"class":580,"line":505},[578,4425,584],{"class":583},[578,4427,3887],{"class":587},[578,4429,4057],{"class":591},[578,4431,598],{"class":583},[578,4433,601],{"class":583},[578,4435,4436],{"class":604},"meshesArray",[578,4438,601],{"class":583},[578,4440,1701],{"class":583},[496,4442,4443,4444,4447,4448,4453,4454,4458],{},"In the demo below, a ",[534,4445,4446],{},"v-for"," loop generates multiple spheres around the cube.\nAll resulting ",[2726,4449,4450],{},[534,4451,4452],{},"Mesh"," instances are collected into an array and passed to the ",[2726,4455,4456],{},[534,4457,4037],{}," prop, allowing each sphere to occlude the HTML content.",[496,4460,4461,4462,4467,4468,4471,4472,3457,4476,4479],{},"This demo also uses the ",[2726,4463,4464],{},[534,4465,4466],{},"on-occlude"," event, which is triggered whenever the occlusion state changes.\nHere, the event updates a ",[2726,4469,4470],{},"reactive value"," to control element styles — for example, toggling between ",[4473,4474,4475],"em",{},"light",[4473,4477,4478],{},"dark"," themes.",[2015,4481,4482],{},[4483,4484],"objects-html-occlude-complex-demo",{},[4074,4486,4076,4487,4489],{},[4078,4488,4080],{},[564,4490,4492],{"className":4083,"code":4491,"language":4085,"meta":504,"style":504},"\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",[534,4493,4494,4512,4520,4528,4535,4549,4563,4576,4589,4603,4608,4634,4642],{"__ignoreMap":504},[578,4495,4496,4498,4500,4502,4504,4506,4508,4510],{"class":580,"line":505},[578,4497,584],{"class":583},[578,4499,1754],{"class":587},[578,4501,1689],{"class":591},[578,4503,598],{"class":583},[578,4505,601],{"class":583},[578,4507,4279],{"class":604},[578,4509,601],{"class":583},[578,4511,610],{"class":583},[578,4513,4514,4516,4518],{"class":580,"line":506},[578,4515,706],{"class":583},[578,4517,2529],{"class":587},[578,4519,1701],{"class":583},[578,4521,4522,4524,4526],{"class":580,"line":643},[578,4523,706],{"class":583},[578,4525,2675],{"class":587},[578,4527,1701],{"class":583},[578,4529,4530,4532],{"class":580,"line":649},[578,4531,706],{"class":583},[578,4533,4534],{"class":587},"html\n",[578,4536,4537,4540,4542,4544,4547],{"class":580,"line":678},[578,4538,4539],{"class":591}," v-bind",[578,4541,598],{"class":583},[578,4543,601],{"class":583},[578,4545,4546],{"class":604},"htmlProps",[578,4548,747],{"class":583},[578,4550,4551,4554,4556,4558,4561],{"class":580,"line":688},[578,4552,4553],{"class":591}," :occlude",[578,4555,598],{"class":583},[578,4557,601],{"class":583},[578,4559,4560],{"class":604},"occluderRefs",[578,4562,747],{"class":583},[578,4564,4565,4568,4570,4572,4574],{"class":580,"line":693},[578,4566,4567],{"class":591}," :distance-factor",[578,4569,598],{"class":583},[578,4571,601],{"class":583},[578,4573,3814],{"class":604},[578,4575,747],{"class":583},[578,4577,4578,4581,4583,4585,4587],{"class":580,"line":703},[578,4579,4580],{"class":591}," :z-index-range",[578,4582,598],{"class":583},[578,4584,601],{"class":583},[578,4586,4168],{"class":604},[578,4588,747],{"class":583},[578,4590,4591,4594,4596,4598,4601],{"class":580,"line":714},[578,4592,4593],{"class":591}," @on-occlude",[578,4595,598],{"class":583},[578,4597,601],{"class":583},[578,4599,4600],{"class":604},"(event: boolean) => isOccluded = event",[578,4602,747],{"class":583},[578,4604,4605],{"class":580,"line":569},[578,4606,4607],{"class":583}," >\n",[578,4609,4610,4612,4614,4616,4618,4620,4622,4624,4626,4628,4630,4632],{"class":580,"line":570},[578,4611,717],{"class":583},[578,4613,3858],{"class":587},[578,4615,2803],{"class":591},[578,4617,598],{"class":583},[578,4619,601],{"class":583},[578,4621,4187],{"class":604},[578,4623,601],{"class":583},[578,4625,2175],{"class":583},[578,4627,4194],{"class":624},[578,4629,681],{"class":583},[578,4631,3858],{"class":587},[578,4633,610],{"class":583},[578,4635,4636,4638,4640],{"class":580,"line":571},[578,4637,799],{"class":583},[578,4639,4085],{"class":587},[578,4641,610],{"class":583},[578,4643,4644,4646,4648],{"class":580,"line":572},[578,4645,681],{"class":583},[578,4647,1754],{"class":587},[578,4649,610],{"class":583},[902,4651,4653],{"id":4652},"blending-occlusion","Blending Occlusion",[496,4655,4656,4658],{},[534,4657,3604],{}," 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.",[564,4660,4662],{"className":566,"code":4661,"language":574,"meta":504,"style":504},"\u003CHtml occlude=\"blending\">\n",[534,4663,4664],{"__ignoreMap":504},[578,4665,4666,4668,4670,4672,4674,4676,4679,4681],{"class":580,"line":505},[578,4667,584],{"class":583},[578,4669,3887],{"class":587},[578,4671,4057],{"class":591},[578,4673,598],{"class":583},[578,4675,601],{"class":583},[578,4677,4678],{"class":604},"blending",[578,4680,601],{"class":583},[578,4682,610],{"class":583},[496,4684,1367,4685,926,4688,4691,4692,824],{},[2726,4686,4687],{},"demo below ⬇️",[4473,4689,4690],{},"(left black example)"," shows a ",[2726,4693,4694],{},"basic usage example",[2015,4696,4697],{},[4698,4699],"objects-html-occlude-blending-demo",{},[4074,4701,4076,4702,4704],{},[4078,4703,4080],{},[564,4705,4752],{"className":566,"code":4706,"highlights":4707,"language":574,"meta":504,"style":504},"\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",[506,2558,2588,2593,2602,2607,2615,2628,4708,4709,4710,4711,4712,4713,4714,4715,4716,4717,4718,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,4740,4741,4742,4743,4744,4745,4746,4747,4748,4749,4750,4751],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,[534,4753,4754,4774,4802,4820,4838,4863,4867,4878,4893,4904,4915,4926,4930,4934,4951,4955,4967,4972,4987,5012,5016,5020,5034,5058,5062,5066,5080,5109,5137,5141,5146,5150,5181,5185,5207,5223,5236,5248,5260,5267,5275,5279,5287,5307,5327,5346,5355,5360,5368,5383,5398,5413,5428,5442,5457,5462,5493,5527,5536,5546,5556,5561,5568,5573,5578,5592,5606,5620,5625,5645,5657,5675,5684,5693,5698,5705,5710,5715,5728,5742,5757,5770,5775,5795,5833,5842,5851,5856,5863,5878,5883,5888,5901,5915,5930,5936,5949,5954,5980,5989,5994,6001,6006,6011,6024,6038,6051,6056,6076,6100,6121,6130,6139,6144,6152,6167,6181,6196,6210,6225,6231,6236,6241,6262,6281,6290,6299,6308,6313,6324,6334,6346,6357,6370,6383,6397,6402],{"__ignoreMap":504},[578,4755,4756,4758,4760,4762,4764,4766,4768,4770,4772],{"class":580,"line":505},[578,4757,584],{"class":583},[578,4759,588],{"class":587},[578,4761,592],{"class":591},[578,4763,595],{"class":591},[578,4765,598],{"class":583},[578,4767,601],{"class":583},[578,4769,605],{"class":604},[578,4771,601],{"class":583},[578,4773,610],{"class":583},[578,4775,4777,4779,4781,4783,4785,4788,4790,4792,4794,4796,4798,4800],{"class":4776,"line":506},[580,614],[578,4778,618],{"class":617},[578,4780,621],{"class":583},[578,4782,3648],{"class":624},[578,4784,1638],{"class":583},[578,4786,4787],{"class":624}," Levioso",[578,4789,1638],{"class":583},[578,4791,1641],{"class":624},[578,4793,628],{"class":583},[578,4795,631],{"class":617},[578,4797,634],{"class":583},[578,4799,637],{"class":604},[578,4801,640],{"class":583},[578,4803,4804,4806,4808,4810,4812,4814,4816,4818],{"class":580,"line":643},[578,4805,618],{"class":617},[578,4807,621],{"class":583},[578,4809,2117],{"class":624},[578,4811,628],{"class":583},[578,4813,631],{"class":617},[578,4815,634],{"class":583},[578,4817,2106],{"class":604},[578,4819,640],{"class":583},[578,4821,4822,4824,4826,4828,4830,4832,4834,4836],{"class":580,"line":649},[578,4823,618],{"class":617},[578,4825,621],{"class":583},[578,4827,2136],{"class":624},[578,4829,628],{"class":583},[578,4831,631],{"class":617},[578,4833,634],{"class":583},[578,4835,574],{"class":604},[578,4837,640],{"class":583},[578,4839,4840,4842,4844,4847,4849,4852,4854,4856,4858,4861],{"class":580,"line":678},[578,4841,618],{"class":617},[578,4843,621],{"class":583},[578,4845,4846],{"class":624}," CircleGeometry",[578,4848,1638],{"class":583},[578,4850,4851],{"class":624}," MeshStandardMaterial",[578,4853,628],{"class":583},[578,4855,631],{"class":617},[578,4857,634],{"class":583},[578,4859,4860],{"class":604},"three",[578,4862,640],{"class":583},[578,4864,4865],{"class":580,"line":688},[578,4866,646],{"emptyLinePlaceholder":512},[578,4868,4869,4871,4874,4876],{"class":580,"line":693},[578,4870,652],{"class":591},[578,4872,4873],{"class":624}," gl ",[578,4875,598],{"class":583},[578,4877,2256],{"class":583},[578,4879,4880,4883,4885,4887,4889,4891],{"class":580,"line":703},[578,4881,4882],{"class":587}," clearColor",[578,4884,2247],{"class":583},[578,4886,634],{"class":583},[578,4888,3716],{"class":604},[578,4890,667],{"class":583},[578,4892,2930],{"class":583},[578,4894,4895,4898,4900,4902],{"class":580,"line":714},[578,4896,4897],{"class":587}," clearAlpha",[578,4899,2247],{"class":583},[578,4901,2976],{"class":2317},[578,4903,2930],{"class":583},[578,4905,4906,4909,4911,4913],{"class":580,"line":569},[578,4907,4908],{"class":587}," shadows",[578,4910,2247],{"class":583},[578,4912,2927],{"class":2926},[578,4914,2930],{"class":583},[578,4916,4917,4920,4922,4924],{"class":580,"line":570},[578,4918,4919],{"class":587}," alpha",[578,4921,2247],{"class":583},[578,4923,2927],{"class":2926},[578,4925,2930],{"class":583},[578,4927,4928],{"class":580,"line":571},[578,4929,2349],{"class":583},[578,4931,4932],{"class":580,"line":572},[578,4933,646],{"emptyLinePlaceholder":512},[578,4935,4936,4938,4941,4943,4945,4947,4949],{"class":580,"line":573},[578,4937,652],{"class":591},[578,4939,4940],{"class":624}," targetDirectionLightRef ",[578,4942,598],{"class":583},[578,4944,2136],{"class":660},[578,4946,664],{"class":624},[578,4948,2188],{"class":583},[578,4950,675],{"class":624},[578,4952,4953],{"class":580,"line":786},[578,4954,646],{"emptyLinePlaceholder":512},[578,4956,4957,4959,4962,4964],{"class":580,"line":796},[578,4958,652],{"class":591},[578,4960,4961],{"class":624}," geometries ",[578,4963,598],{"class":583},[578,4965,4966],{"class":624}," [\n",[578,4968,4969],{"class":580,"line":806},[578,4970,4971],{"class":583}," {\n",[578,4973,4974,4977,4979,4981,4983,4985],{"class":580,"line":1856},[578,4975,4976],{"class":587}," component",[578,4978,2247],{"class":583},[578,4980,634],{"class":583},[578,4982,2529],{"class":604},[578,4984,667],{"class":583},[578,4986,2930],{"class":583},[578,4988,4989,4992,4994,4997,4999,5001,5003,5005,5007,5010],{"class":580,"line":1877},[578,4990,4991],{"class":587}," args",[578,4993,2247],{"class":583},[578,4995,4996],{"class":624}," [",[578,4998,1795],{"class":2317},[578,5000,1638],{"class":583},[578,5002,2976],{"class":2317},[578,5004,1638],{"class":583},[578,5006,2976],{"class":2317},[578,5008,5009],{"class":624},"]",[578,5011,2930],{"class":583},[578,5013,5014],{"class":580,"line":1886},[578,5015,2984],{"class":583},[578,5017,5018],{"class":580,"line":2431},[578,5019,4971],{"class":583},[578,5021,5022,5024,5026,5028,5030,5032],{"class":580,"line":2436},[578,5023,4976],{"class":587},[578,5025,2247],{"class":583},[578,5027,634],{"class":583},[578,5029,1764],{"class":604},[578,5031,667],{"class":583},[578,5033,2930],{"class":583},[578,5035,5036,5038,5040,5042,5045,5047,5050,5052,5054,5056],{"class":580,"line":2036},[578,5037,4991],{"class":587},[578,5039,2247],{"class":583},[578,5041,4996],{"class":624},[578,5043,5044],{"class":2317},"0.7",[578,5046,1638],{"class":583},[578,5048,5049],{"class":2317}," 32",[578,5051,1638],{"class":583},[578,5053,5049],{"class":2317},[578,5055,5009],{"class":624},[578,5057,2930],{"class":583},[578,5059,5060],{"class":580,"line":2037},[578,5061,2984],{"class":583},[578,5063,5064],{"class":580,"line":2038},[578,5065,4971],{"class":583},[578,5067,5068,5070,5072,5074,5076,5078],{"class":580,"line":2039},[578,5069,4976],{"class":587},[578,5071,2247],{"class":583},[578,5073,634],{"class":583},[578,5075,2654],{"class":604},[578,5077,667],{"class":583},[578,5079,2930],{"class":583},[578,5081,5082,5084,5086,5088,5090,5092,5095,5097,5100,5102,5105,5107],{"class":580,"line":2509},[578,5083,4991],{"class":587},[578,5085,2247],{"class":583},[578,5087,4996],{"class":624},[578,5089,1849],{"class":2317},[578,5091,1638],{"class":583},[578,5093,5094],{"class":2317}," 0.2",[578,5096,1638],{"class":583},[578,5098,5099],{"class":2317}," 16",[578,5101,1638],{"class":583},[578,5103,5104],{"class":2317}," 100",[578,5106,5009],{"class":624},[578,5108,2930],{"class":583},[578,5110,5111,5114,5116,5118,5121,5123,5125,5127,5130,5132,5134],{"class":580,"line":2515},[578,5112,5113],{"class":587}," bind",[578,5115,2247],{"class":583},[578,5117,621],{"class":583},[578,5119,5120],{"class":587}," castShadow",[578,5122,2247],{"class":583},[578,5124,2927],{"class":2926},[578,5126,1638],{"class":583},[578,5128,5129],{"class":587}," receiveShadow",[578,5131,2247],{"class":583},[578,5133,2927],{"class":2926},[578,5135,5136],{"class":583}," },\n",[578,5138,5139],{"class":580,"line":2524},[578,5140,2984],{"class":583},[578,5142,5143],{"class":580,"line":2545},[578,5144,5145],{"class":624},"]\n",[578,5147,5148],{"class":580,"line":2550},[578,5149,646],{"emptyLinePlaceholder":512},[578,5151,5153,5155,5158,5160,5162,5164,5167,5169,5171,5174,5176,5178],{"class":5152,"line":2558},[580,614],[578,5154,652],{"class":591},[578,5156,5157],{"class":624}," customGeometry ",[578,5159,598],{"class":583},[578,5161,2136],{"class":660},[578,5163,664],{"class":624},[578,5165,5166],{"class":583},"new",[578,5168,4846],{"class":660},[578,5170,664],{"class":624},[578,5172,5173],{"class":2317},"1.25",[578,5175,1638],{"class":583},[578,5177,5049],{"class":2317},[578,5179,5180],{"class":624},"))\n",[578,5182,5183],{"class":580,"line":2573},[578,5184,646],{"emptyLinePlaceholder":512},[578,5186,5188,5190,5193,5195,5197,5199,5201,5203,5205],{"class":5187,"line":2588},[580,614],[578,5189,652],{"class":591},[578,5191,5192],{"class":624}," customMaterial ",[578,5194,598],{"class":583},[578,5196,2136],{"class":660},[578,5198,664],{"class":624},[578,5200,5166],{"class":583},[578,5202,4851],{"class":660},[578,5204,664],{"class":624},[578,5206,2915],{"class":583},[578,5208,5210,5212,5214,5216,5219,5221],{"class":5209,"line":2593},[580,614],[578,5211,3970],{"class":587},[578,5213,2247],{"class":583},[578,5215,634],{"class":583},[578,5217,5218],{"class":604},"red",[578,5220,667],{"class":583},[578,5222,2930],{"class":583},[578,5224,5226,5229,5231,5234],{"class":5225,"line":2602},[580,614],[578,5227,5228],{"class":587}," side",[578,5230,2247],{"class":583},[578,5232,5233],{"class":2317}," 2",[578,5235,2930],{"class":583},[578,5237,5239,5242,5244,5246],{"class":5238,"line":2607},[580,614],[578,5240,5241],{"class":587}," opacity",[578,5243,2247],{"class":583},[578,5245,2976],{"class":2317},[578,5247,2930],{"class":583},[578,5249,5251,5254,5256,5258],{"class":5250,"line":2615},[580,614],[578,5252,5253],{"class":587}," transparent",[578,5255,2247],{"class":583},[578,5257,2927],{"class":2926},[578,5259,2930],{"class":583},[578,5261,5263,5265],{"class":5262,"line":2628},[580,614],[578,5264,2990],{"class":583},[578,5266,5180],{"class":624},[578,5268,5269,5271,5273],{"class":580,"line":2643},[578,5270,681],{"class":583},[578,5272,588],{"class":587},[578,5274,610],{"class":583},[578,5276,5277],{"class":580,"line":2649},[578,5278,646],{"emptyLinePlaceholder":512},[578,5280,5281,5283,5285],{"class":580,"line":2670},[578,5282,584],{"class":583},[578,5284,698],{"class":587},[578,5286,610],{"class":583},[578,5288,5289,5291,5294,5296,5298,5300,5303,5305],{"class":580,"line":2680},[578,5290,706],{"class":583},[578,5292,5293],{"class":587},"div",[578,5295,2803],{"class":591},[578,5297,598],{"class":583},[578,5299,601],{"class":583},[578,5301,5302],{"class":604},"html-demo-wrapper aspect-video",[578,5304,601],{"class":583},[578,5306,610],{"class":583},[578,5308,5309,5311,5313,5316,5318,5320,5323,5325],{"class":580,"line":2689},[578,5310,717],{"class":583},[578,5312,709],{"class":587},[578,5314,5315],{"class":591}," v-bind",[578,5317,598],{"class":583},[578,5319,601],{"class":583},[578,5321,5322],{"class":604},"gl",[578,5324,601],{"class":583},[578,5326,610],{"class":583},[578,5328,5329,5331,5333,5335,5337,5339,5342,5344],{"class":580,"line":2698},[578,5330,728],{"class":583},[578,5332,1686],{"class":587},[578,5334,1689],{"class":591},[578,5336,598],{"class":583},[578,5338,601],{"class":583},[578,5340,5341],{"class":604},"[0, 1.5, 7.5]",[578,5343,601],{"class":583},[578,5345,1701],{"class":583},[578,5347,5349,5351,5353],{"class":580,"line":5348},46,[578,5350,728],{"class":583},[578,5352,1708],{"class":587},[578,5354,1701],{"class":583},[578,5356,5358],{"class":580,"line":5357},47,[578,5359,646],{"emptyLinePlaceholder":512},[578,5361,5363,5365],{"class":580,"line":5362},48,[578,5364,728],{"class":583},[578,5366,5367],{"class":587},"Levioso\n",[578,5369,5371,5374,5376,5378,5381],{"class":580,"line":5370},49,[578,5372,5373],{"class":591}," v-for",[578,5375,598],{"class":583},[578,5377,601],{"class":583},[578,5379,5380],{"class":604},"(geometry, index) in geometries",[578,5382,747],{"class":583},[578,5384,5386,5389,5391,5393,5396],{"class":580,"line":5385},50,[578,5387,5388],{"class":591}," :key",[578,5390,598],{"class":583},[578,5392,601],{"class":583},[578,5394,5395],{"class":604},"`html-occlude-blending-demo-${index}`",[578,5397,747],{"class":583},[578,5399,5401,5404,5406,5408,5411],{"class":580,"line":5400},51,[578,5402,5403],{"class":591}," :speed",[578,5405,598],{"class":583},[578,5407,601],{"class":583},[578,5409,5410],{"class":604},"3",[578,5412,747],{"class":583},[578,5414,5416,5419,5421,5423,5426],{"class":580,"line":5415},52,[578,5417,5418],{"class":591}," :float-factor",[578,5420,598],{"class":583},[578,5422,601],{"class":583},[578,5424,5425],{"class":604},"3.5",[578,5427,747],{"class":583},[578,5429,5431,5434,5436,5438,5440],{"class":580,"line":5430},53,[578,5432,5433],{"class":591}," :rotation-factor",[578,5435,598],{"class":583},[578,5437,601],{"class":583},[578,5439,1795],{"class":604},[578,5441,747],{"class":583},[578,5443,5445,5448,5450,5452,5455],{"class":580,"line":5444},54,[578,5446,5447],{"class":591}," :range",[578,5449,598],{"class":583},[578,5451,601],{"class":583},[578,5453,5454],{"class":604},"[-0.35, 0.35]",[578,5456,747],{"class":583},[578,5458,5460],{"class":580,"line":5459},55,[578,5461,3851],{"class":583},[578,5463,5465,5467,5469,5471,5473,5475,5478,5480,5482,5484,5486,5489,5491],{"class":580,"line":5464},56,[578,5466,1761],{"class":583},[578,5468,1754],{"class":587},[578,5470,1689],{"class":591},[578,5472,598],{"class":583},[578,5474,601],{"class":583},[578,5476,5477],{"class":604},"[index * 3.5 - 3.5, 1, 0]",[578,5479,601],{"class":583},[578,5481,5315],{"class":591},[578,5483,598],{"class":583},[578,5485,601],{"class":583},[578,5487,5488],{"class":604},"geometry.bind",[578,5490,601],{"class":583},[578,5492,610],{"class":583},[578,5494,5496,5499,5502,5505,5507,5509,5512,5514,5516,5518,5520,5523,5525],{"class":580,"line":5495},57,[578,5497,5498],{"class":583}," \u003C",[578,5500,5501],{"class":587},"component",[578,5503,5504],{"class":591}," :is",[578,5506,598],{"class":583},[578,5508,601],{"class":583},[578,5510,5511],{"class":604},"geometry.component",[578,5513,601],{"class":583},[578,5515,1767],{"class":591},[578,5517,598],{"class":583},[578,5519,601],{"class":583},[578,5521,5522],{"class":604},"geometry.args",[578,5524,601],{"class":583},[578,5526,1701],{"class":583},[578,5528,5530,5532,5534],{"class":580,"line":5529},58,[578,5531,5498],{"class":583},[578,5533,2675],{"class":587},[578,5535,1701],{"class":583},[578,5537,5539,5542,5544],{"class":580,"line":5538},59,[578,5540,5541],{"class":583}," \u003C/",[578,5543,1754],{"class":587},[578,5545,610],{"class":583},[578,5547,5549,5551,5554],{"class":580,"line":5548},60,[578,5550,1815],{"class":583},[578,5552,5553],{"class":587},"Levioso",[578,5555,610],{"class":583},[578,5557,5559],{"class":580,"line":5558},61,[578,5560,646],{"emptyLinePlaceholder":512},[578,5562,5564,5566],{"class":5563,"line":4708},[580,614],[578,5565,728],{"class":583},[578,5567,3789],{"class":587},[578,5569,5571],{"class":5570,"line":4709},[580,614],[578,5572,3795],{"class":591},[578,5574,5576],{"class":5575,"line":4710},[580,614],[578,5577,3801],{"class":591},[578,5579,5581,5584,5586,5588,5590],{"class":5580,"line":4711},[580,614],[578,5582,5583],{"class":591}," occlude",[578,5585,598],{"class":583},[578,5587,601],{"class":583},[578,5589,4678],{"class":604},[578,5591,747],{"class":583},[578,5593,5595,5597,5599,5601,5604],{"class":5594,"line":4712},[580,614],[578,5596,3822],{"class":591},[578,5598,598],{"class":583},[578,5600,601],{"class":583},[578,5602,5603],{"class":604},"[-4, .75, -2]",[578,5605,747],{"class":583},[578,5607,5609,5612,5614,5616,5618],{"class":5608,"line":4713},[580,614],[578,5610,5611],{"class":591}," :z-index-range",[578,5613,598],{"class":583},[578,5615,601],{"class":583},[578,5617,4168],{"class":604},[578,5619,747],{"class":583},[578,5621,5623],{"class":5622,"line":4714},[580,614],[578,5624,3851],{"class":583},[578,5626,5628,5630,5632,5634,5636,5638,5641,5643],{"class":5627,"line":4715},[580,614],[578,5629,1761],{"class":583},[578,5631,5293],{"class":587},[578,5633,2803],{"class":591},[578,5635,598],{"class":583},[578,5637,601],{"class":583},[578,5639,5640],{"class":604},"text-center text-s p-2 bg-[#1B1C1E] text-light",[578,5642,601],{"class":583},[578,5644,610],{"class":583},[578,5646,5648,5651,5653,5655],{"class":5647,"line":4716},[580,614],[578,5649,5650],{"class":624}," BASIC 💛 ",[578,5652,584],{"class":583},[578,5654,921],{"class":587},[578,5656,1701],{"class":583},[578,5658,5660,5662,5664,5666,5669,5671,5673],{"class":5659,"line":4717},[580,614],[578,5661,5498],{"class":583},[578,5663,4473],{"class":587},[578,5665,2175],{"class":583},[578,5667,5668],{"class":624},"occlude=blending",[578,5670,681],{"class":583},[578,5672,4473],{"class":587},[578,5674,610],{"class":583},[578,5676,5678,5680,5682],{"class":5677,"line":4718},[580,614],[578,5679,5541],{"class":583},[578,5681,5293],{"class":587},[578,5683,610],{"class":583},[578,5685,5687,5689,5691],{"class":580,"line":5686},73,[578,5688,1815],{"class":583},[578,5690,3887],{"class":587},[578,5692,610],{"class":583},[578,5694,5696],{"class":5695,"line":4719},[580,614],[578,5697,646],{"emptyLinePlaceholder":512},[578,5699,5701,5703],{"class":5700,"line":4720},[580,614],[578,5702,728],{"class":583},[578,5704,3789],{"class":587},[578,5706,5708],{"class":5707,"line":4721},[580,614],[578,5709,3795],{"class":591},[578,5711,5713],{"class":5712,"line":4722},[580,614],[578,5714,3801],{"class":591},[578,5716,5718,5720,5722,5724,5726],{"class":5717,"line":4723},[580,614],[578,5719,5583],{"class":591},[578,5721,598],{"class":583},[578,5723,601],{"class":583},[578,5725,4678],{"class":604},[578,5727,747],{"class":583},[578,5729,5731,5733,5735,5737,5740],{"class":5730,"line":4724},[580,614],[578,5732,3822],{"class":591},[578,5734,598],{"class":583},[578,5736,601],{"class":583},[578,5738,5739],{"class":604},"[0, .85, -2]",[578,5741,747],{"class":583},[578,5743,5745,5748,5750,5752,5755],{"class":5744,"line":4725},[580,614],[578,5746,5747],{"class":591}," :geometry",[578,5749,598],{"class":583},[578,5751,601],{"class":583},[578,5753,5754],{"class":604},"customGeometry",[578,5756,747],{"class":583},[578,5758,5760,5762,5764,5766,5768],{"class":5759,"line":4726},[580,614],[578,5761,5611],{"class":591},[578,5763,598],{"class":583},[578,5765,601],{"class":583},[578,5767,4168],{"class":604},[578,5769,747],{"class":583},[578,5771,5773],{"class":5772,"line":4727},[580,614],[578,5774,3851],{"class":583},[578,5776,5778,5780,5782,5784,5786,5788,5791,5793],{"class":5777,"line":4728},[580,614],[578,5779,1761],{"class":583},[578,5781,5293],{"class":587},[578,5783,2803],{"class":591},[578,5785,598],{"class":583},[578,5787,601],{"class":583},[578,5789,5790],{"class":604},"text-xs p-8 text-center bg-[#F6B03B] text-dark",[578,5792,601],{"class":583},[578,5794,610],{"class":583},[578,5796,5798,5801,5803,5805,5808,5811,5813,5815,5818,5820,5822,5824,5827,5829,5831],{"class":5797,"line":4729},[580,614],[578,5799,5800],{"class":624}," CUSTOM ",[578,5802,584],{"class":583},[578,5804,921],{"class":587},[578,5806,5807],{"class":583}," />",[578,5809,5810],{"class":583}," \u003C",[578,5812,2726],{"class":587},[578,5814,2175],{"class":583},[578,5816,5817],{"class":624},"CIRCLE ",[578,5819,584],{"class":583},[578,5821,921],{"class":587},[578,5823,5807],{"class":583},[578,5825,5826],{"class":624}," GEOMETRY",[578,5828,681],{"class":583},[578,5830,2726],{"class":587},[578,5832,610],{"class":583},[578,5834,5836,5838,5840],{"class":580,"line":5835},85,[578,5837,5541],{"class":583},[578,5839,5293],{"class":587},[578,5841,610],{"class":583},[578,5843,5845,5847,5849],{"class":5844,"line":4730},[580,614],[578,5846,1815],{"class":583},[578,5848,3887],{"class":587},[578,5850,610],{"class":583},[578,5852,5854],{"class":5853,"line":4731},[580,614],[578,5855,646],{"emptyLinePlaceholder":512},[578,5857,5859,5861],{"class":5858,"line":4732},[580,614],[578,5860,728],{"class":583},[578,5862,3789],{"class":587},[578,5864,5866,5869,5871,5873,5876],{"class":5865,"line":4733},[580,614],[578,5867,5868],{"class":591}," ref",[578,5870,598],{"class":583},[578,5872,601],{"class":583},[578,5874,5875],{"class":604},"targetDirectionLightRef",[578,5877,747],{"class":583},[578,5879,5881],{"class":5880,"line":4734},[580,614],[578,5882,3795],{"class":591},[578,5884,5886],{"class":5885,"line":4735},[580,614],[578,5887,3801],{"class":591},[578,5889,5891,5893,5895,5897,5899],{"class":5890,"line":4736},[580,614],[578,5892,5583],{"class":591},[578,5894,598],{"class":583},[578,5896,601],{"class":583},[578,5898,4678],{"class":604},[578,5900,747],{"class":583},[578,5902,5904,5906,5908,5910,5913],{"class":5903,"line":4737},[580,614],[578,5905,3822],{"class":591},[578,5907,598],{"class":583},[578,5909,601],{"class":583},[578,5911,5912],{"class":604},"[4, .5, -2]",[578,5914,747],{"class":583},[578,5916,5918,5921,5923,5925,5928],{"class":5917,"line":4738},[580,614],[578,5919,5920],{"class":591}," :material",[578,5922,598],{"class":583},[578,5924,601],{"class":583},[578,5926,5927],{"class":604},"customMaterial",[578,5929,747],{"class":583},[578,5931,5933],{"class":5932,"line":4739},[580,614],[578,5934,5935],{"class":591}," receive-shadow\n",[578,5937,5939,5941,5943,5945,5947],{"class":5938,"line":4740},[580,614],[578,5940,5611],{"class":591},[578,5942,598],{"class":583},[578,5944,601],{"class":583},[578,5946,4168],{"class":604},[578,5948,747],{"class":583},[578,5950,5952],{"class":580,"line":5951},97,[578,5953,3851],{"class":583},[578,5955,5957,5959,5961,5964,5966,5968,5971,5973,5976,5978],{"class":5956,"line":4741},[580,614],[578,5958,1761],{"class":583},[578,5960,5293],{"class":587},[578,5962,5963],{"class":591}," style",[578,5965,598],{"class":583},[578,5967,601],{"class":583},[578,5969,5970],{"class":604},"width: 100px; height: auto; aspect-ratio: 250/250;",[578,5972,601],{"class":583},[578,5974,5975],{"class":583},">\u003C/",[578,5977,5293],{"class":587},[578,5979,610],{"class":583},[578,5981,5983,5985,5987],{"class":5982,"line":4742},[580,614],[578,5984,1815],{"class":583},[578,5986,3887],{"class":587},[578,5988,610],{"class":583},[578,5990,5992],{"class":5991,"line":4743},[580,614],[578,5993,646],{"emptyLinePlaceholder":512},[578,5995,5997,5999],{"class":5996,"line":4744},[580,614],[578,5998,728],{"class":583},[578,6000,3789],{"class":587},[578,6002,6004],{"class":6003,"line":4745},[580,614],[578,6005,3795],{"class":591},[578,6007,6009],{"class":6008,"line":4746},[580,614],[578,6010,3801],{"class":591},[578,6012,6014,6016,6018,6020,6022],{"class":6013,"line":4747},[580,614],[578,6015,5583],{"class":591},[578,6017,598],{"class":583},[578,6019,601],{"class":583},[578,6021,4678],{"class":604},[578,6023,747],{"class":583},[578,6025,6027,6029,6031,6033,6036],{"class":6026,"line":4748},[580,614],[578,6028,3822],{"class":591},[578,6030,598],{"class":583},[578,6032,601],{"class":583},[578,6034,6035],{"class":604},"[4, 2.5, -2]",[578,6037,747],{"class":583},[578,6039,6041,6043,6045,6047,6049],{"class":6040,"line":4749},[580,614],[578,6042,5611],{"class":591},[578,6044,598],{"class":583},[578,6046,601],{"class":583},[578,6048,4168],{"class":604},[578,6050,747],{"class":583},[578,6052,6054],{"class":6053,"line":4750},[580,614],[578,6055,3851],{"class":583},[578,6057,6059,6061,6063,6065,6067,6069,6072,6074],{"class":6058,"line":4751},[580,614],[578,6060,1761],{"class":583},[578,6062,5293],{"class":587},[578,6064,2803],{"class":591},[578,6066,598],{"class":583},[578,6068,601],{"class":583},[578,6070,6071],{"class":604},"text-center text-xs p-2 text-dark bg-[#FF0000]",[578,6073,601],{"class":583},[578,6075,610],{"class":583},[578,6077,6079,6081,6083,6085,6088,6090,6092,6094,6096,6098],{"class":580,"line":6078},109,[578,6080,5498],{"class":583},[578,6082,2726],{"class":587},[578,6084,2175],{"class":583},[578,6086,6087],{"class":624},"HTML + Custom material ",[578,6089,681],{"class":583},[578,6091,2726],{"class":587},[578,6093,2175],{"class":583},[578,6095,5810],{"class":583},[578,6097,921],{"class":587},[578,6099,1701],{"class":583},[578,6101,6103,6105,6107,6109,6112,6114,6116,6118],{"class":580,"line":6102},110,[578,6104,5498],{"class":583},[578,6106,4473],{"class":587},[578,6108,2175],{"class":583},[578,6110,6111],{"class":624},"+ receive-shadow ",[578,6113,681],{"class":583},[578,6115,4473],{"class":587},[578,6117,2175],{"class":583},[578,6119,6120],{"class":624}," ⬇️\n",[578,6122,6124,6126,6128],{"class":580,"line":6123},111,[578,6125,5541],{"class":583},[578,6127,5293],{"class":587},[578,6129,610],{"class":583},[578,6131,6133,6135,6137],{"class":580,"line":6132},112,[578,6134,1815],{"class":583},[578,6136,3887],{"class":587},[578,6138,610],{"class":583},[578,6140,6142],{"class":580,"line":6141},113,[578,6143,646],{"emptyLinePlaceholder":512},[578,6145,6147,6149],{"class":580,"line":6146},114,[578,6148,728],{"class":583},[578,6150,6151],{"class":587},"TresDirectionalLight\n",[578,6153,6155,6158,6160,6162,6165],{"class":580,"line":6154},115,[578,6156,6157],{"class":591}," v-if",[578,6159,598],{"class":583},[578,6161,601],{"class":583},[578,6163,6164],{"class":604},"targetDirectionLightRef?.instance",[578,6166,747],{"class":583},[578,6168,6170,6173,6175,6177,6179],{"class":580,"line":6169},116,[578,6171,6172],{"class":591}," :target",[578,6174,598],{"class":583},[578,6176,601],{"class":583},[578,6178,6164],{"class":604},[578,6180,747],{"class":583},[578,6182,6184,6187,6189,6191,6194],{"class":580,"line":6183},117,[578,6185,6186],{"class":591}," :shadow-normalBias",[578,6188,598],{"class":583},[578,6190,601],{"class":583},[578,6192,6193],{"class":604},"0.075",[578,6195,747],{"class":583},[578,6197,6199,6201,6203,6205,6208],{"class":580,"line":6198},118,[578,6200,3822],{"class":591},[578,6202,598],{"class":583},[578,6204,601],{"class":583},[578,6206,6207],{"class":604},"[5, 0, 5]",[578,6209,747],{"class":583},[578,6211,6213,6216,6218,6220,6223],{"class":580,"line":6212},119,[578,6214,6215],{"class":591}," :intensity",[578,6217,598],{"class":583},[578,6219,601],{"class":583},[578,6221,6222],{"class":604},"2",[578,6224,747],{"class":583},[578,6226,6228],{"class":580,"line":6227},120,[578,6229,6230],{"class":591}," cast-shadow\n",[578,6232,6234],{"class":580,"line":6233},121,[578,6235,783],{"class":583},[578,6237,6239],{"class":580,"line":6238},122,[578,6240,646],{"emptyLinePlaceholder":512},[578,6242,6244,6246,6248,6251,6253,6255,6258,6260],{"class":580,"line":6243},123,[578,6245,728],{"class":583},[578,6247,2441],{"class":587},[578,6249,6250],{"class":591}," :position-y",[578,6252,598],{"class":583},[578,6254,601],{"class":583},[578,6256,6257],{"class":604},"-1",[578,6259,601],{"class":583},[578,6261,1701],{"class":583},[578,6263,6265,6267,6269,6271,6273,6275,6277,6279],{"class":580,"line":6264},124,[578,6266,728],{"class":583},[578,6268,1839],{"class":587},[578,6270,1842],{"class":591},[578,6272,598],{"class":583},[578,6274,601],{"class":583},[578,6276,1795],{"class":604},[578,6278,601],{"class":583},[578,6280,1701],{"class":583},[578,6282,6284,6286,6288],{"class":580,"line":6283},125,[578,6285,789],{"class":583},[578,6287,709],{"class":587},[578,6289,610],{"class":583},[578,6291,6293,6295,6297],{"class":580,"line":6292},126,[578,6294,799],{"class":583},[578,6296,5293],{"class":587},[578,6298,610],{"class":583},[578,6300,6302,6304,6306],{"class":580,"line":6301},127,[578,6303,681],{"class":583},[578,6305,698],{"class":587},[578,6307,610],{"class":583},[578,6309,6311],{"class":580,"line":6310},128,[578,6312,646],{"emptyLinePlaceholder":512},[578,6314,6316,6318,6320,6322],{"class":580,"line":6315},129,[578,6317,584],{"class":583},[578,6319,1550],{"class":587},[578,6321,3938],{"class":591},[578,6323,610],{"class":583},[578,6325,6327,6329,6332],{"class":580,"line":6326},130,[578,6328,824],{"class":583},[578,6330,6331],{"class":2166},"html-demo-wrapper",[578,6333,2256],{"class":583},[578,6335,6337,6339,6341,6344],{"class":580,"line":6336},131,[578,6338,2936],{"class":3953},[578,6340,2247],{"class":583},[578,6342,6343],{"class":2317}," 100%",[578,6345,3965],{"class":583},[578,6347,6349,6351,6353,6355],{"class":580,"line":6348},132,[578,6350,2949],{"class":3953},[578,6352,2247],{"class":583},[578,6354,6343],{"class":2317},[578,6356,3965],{"class":583},[578,6358,6360,6363,6365,6368],{"class":580,"line":6359},133,[578,6361,6362],{"class":3953}," position",[578,6364,2247],{"class":583},[578,6366,6367],{"class":624}," relative",[578,6369,3965],{"class":583},[578,6371,6373,6376,6378,6381],{"class":580,"line":6372},134,[578,6374,6375],{"class":3953}," overflow",[578,6377,2247],{"class":583},[578,6379,6380],{"class":624}," hidden",[578,6382,3965],{"class":583},[578,6384,6386,6388,6390,6392,6395],{"class":580,"line":6385},135,[578,6387,3954],{"class":3953},[578,6389,2247],{"class":583},[578,6391,3959],{"class":583},[578,6393,6394],{"class":624},"82dbc5",[578,6396,3965],{"class":583},[578,6398,6400],{"class":580,"line":6399},136,[578,6401,2349],{"class":583},[578,6403,6405,6407,6409],{"class":580,"line":6404},137,[578,6406,681],{"class":583},[578,6408,1550],{"class":587},[578,6410,610],{"class":583},[560,6412,6414],{"id":6413},"custom-geometry","Custom Geometry",[496,6416,6417,6418,6421,6422,6425,6426,6429,6430,6433,6434,6439],{},"By default, when using ",[534,6419,6420],{},"occlude=\"blending\"",", occlusion works correctly only with ",[2726,6423,6424],{},"rectangular HTML elements"," (using a ",[534,6427,6428],{},"PlaneGeometry",").\nFor ",[4473,6431,6432],{},"non-rectangular content",", you can use the ",[2726,6435,6436],{},[534,6437,6438],{},"geometry"," prop to provide a matching custom geometry.",[496,6441,6442,6443,926,6446,6449,6450,6457,6458,824],{},"In the ",[2726,6444,6445],{},"demo above ⬆️",[4473,6447,6448],{},"(middle yellow example)",", a ",[539,6451,6454],{"href":6452,"rel":6453},"https://threejs.org/docs/#api/en/geometries/CircleGeometry",[543],[534,6455,6456],{},"CircleGeometry"," is used as a ",[2726,6459,6460],{},"custom geometry",[6462,6463,6464],"prose-list",{},[550,6465,6466,6475],{},[553,6467,1367,6468,6470,6471,6474],{},[534,6469,6438],{}," prop only defines the ",[2726,6472,6473],{},"occlusion shape"," in 3D and does not modify your HTML content.",[553,6476,6477,6478,6485,6486,6489,6490,6493,6494,6501],{},"You can provide any ",[539,6479,6482],{"href":6480,"rel":6481},"https://threejs.org/docs/#api/en/core/BufferGeometry",[543],[534,6483,6484],{},"BufferGeometry",", for example to simulate ",[2726,6487,6488],{},"CSS-like styles"," such as ",[534,6491,6492],{},"border-radius"," using a rounded rectangle or squircle geometry (see ",[539,6495,6498],{"href":6496,"rel":6497},"https://discourse.threejs.org/t/roundedrectangle-squircle/28645",[543],[534,6499,6500],{},"RoundedRectangle / Squircle geometry"," for example).",[902,6503,6505],{"id":6504},"custom-material","Custom Material",[496,6507,6508,6509,6512,6513,926,6515,6449,6518,6521],{},"You can also assign material properties to the HTML content using the ",[534,6510,6511],{},"material"," prop.\nIn the ",[2726,6514,6445],{},[4473,6516,6517],{},"(right red example)",[2726,6519,6520],{},"custom material"," is used with shadow.",[6523,6524,6525],"prose-note",{},[496,6526,1367,6527,6529,6530,6532,6533,824],{},[534,6528,6511],{}," prop is only available when ",[534,6531,6420],{}," is ",[2726,6534,6535],{},"enabled",[6523,6537,6538],{},[496,6539,6540,6541,3457,6546,6551,6552,6555,6556,6558,6559,6562,6563,6568,6569,6574,6575],{},"Enable shadows using the ",[2726,6542,6543],{},[534,6544,6545],{},"castShadow",[2726,6547,6548],{},[534,6549,6550],{},"receiveShadow"," props.\nShadows are supported ",[2726,6553,6554],{},"only"," when using a ",[2726,6557,6520],{},". By default, shadows do ",[2726,6560,6561],{},"not"," work with ",[4473,6564,6565],{},[534,6566,6567],{},"MeshBasicMaterial"," or ",[4473,6570,6571],{},[534,6572,6573],{},"ShaderMaterial",". ",[921,6576],{},[560,6578,6580,6581],{"id":6579},"using-transition","Using ",[534,6582,6583],{},"\u003CTransition>",[496,6585,6586,6587,6593,6594,6596,6597,6600,6601,3457,6604,6607],{},"The native Vue ",[539,6588,6591],{"href":6589,"rel":6590},"https://vuejs.org/guide/built-ins/transition",[543],[534,6592,6583],{}," component works seamlessly with ",[534,6595,3604],{},".\nThis means you can ",[2726,6598,6599],{},"animate"," how your projected HTML content ",[4473,6602,6603],{},"enters",[4473,6605,6606],{},"leaves"," the scene, exactly as you would in a regular Vue application.",[6523,6609,6610],{},[496,6611,6612,6613,6616,6617,6620,6621,6623,6624,6627],{},"All ",[2726,6614,6615],{},"standard interactions"," are supported just like on a regular HTML element — ",[2726,6618,6619],{},"hover effects",", ",[2726,6622,1290],{},", and ",[4473,6625,6626],{},"any kind of DOM interaction"," are fully possible.",[526,6629,6630],{},[6631,6632],"objects-html-transition-demo",{},[4074,6634,4076,6635,6637],{},[4078,6636,4080],{},[564,6638,6641],{"className":566,"code":6639,"highlights":6640,"language":574,"meta":504,"style":504},"\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",[506,5686,4719,4720,4721,4722,4723,4724,4725,4726,4727,4728,4729,5835,4730,4731,4732,4733,4734,4735,4736],[534,6642,6643,6663,6690,6708,6726,6730,6740,6754,6765,6775,6785,6796,6800,6804,6825,6829,6851,6855,6865,6869,6883,6905,6909,6913,6927,6949,6953,6957,6971,6997,7001,7005,7020,7043,7047,7051,7055,7075,7148,7190,7215,7219,7223,7239,7255,7259,7267,7271,7279,7308,7337,7355,7374,7378,7384,7396,7408,7420,7432,7444,7457,7461,7480,7508,7516,7524,7532,7536,7542,7546,7550,7562,7575,7589,7602,7607,7629,7637,7652,7667,7682,7697,7703,7727,7745,7755,7764,7773,7778,7798,7817,7826,7835,7843,7847,7857,7865,7875,7885,7895,7905,7917,7921,7925,7939,7957,7961,7965,7974,7983,7993,8009,8013,8017,8026,8035,8053,8057,8061,8070,8079,8089,8103,8107],{"__ignoreMap":504},[578,6644,6645,6647,6649,6651,6653,6655,6657,6659,6661],{"class":580,"line":505},[578,6646,584],{"class":583},[578,6648,588],{"class":587},[578,6650,592],{"class":591},[578,6652,595],{"class":591},[578,6654,598],{"class":583},[578,6656,601],{"class":583},[578,6658,605],{"class":604},[578,6660,601],{"class":583},[578,6662,610],{"class":583},[578,6664,6666,6668,6670,6672,6674,6676,6678,6680,6682,6684,6686,6688],{"class":6665,"line":506},[580,614],[578,6667,618],{"class":617},[578,6669,621],{"class":583},[578,6671,3648],{"class":624},[578,6673,1638],{"class":583},[578,6675,4787],{"class":624},[578,6677,1638],{"class":583},[578,6679,1641],{"class":624},[578,6681,628],{"class":583},[578,6683,631],{"class":617},[578,6685,634],{"class":583},[578,6687,637],{"class":604},[578,6689,640],{"class":583},[578,6691,6692,6694,6696,6698,6700,6702,6704,6706],{"class":580,"line":643},[578,6693,618],{"class":617},[578,6695,621],{"class":583},[578,6697,2117],{"class":624},[578,6699,628],{"class":583},[578,6701,631],{"class":617},[578,6703,634],{"class":583},[578,6705,2106],{"class":604},[578,6707,640],{"class":583},[578,6709,6710,6712,6714,6716,6718,6720,6722,6724],{"class":580,"line":649},[578,6711,618],{"class":617},[578,6713,621],{"class":583},[578,6715,661],{"class":624},[578,6717,628],{"class":583},[578,6719,631],{"class":617},[578,6721,634],{"class":583},[578,6723,574],{"class":604},[578,6725,640],{"class":583},[578,6727,6728],{"class":580,"line":678},[578,6729,646],{"emptyLinePlaceholder":512},[578,6731,6732,6734,6736,6738],{"class":580,"line":688},[578,6733,652],{"class":591},[578,6735,4873],{"class":624},[578,6737,598],{"class":583},[578,6739,2256],{"class":583},[578,6741,6742,6744,6746,6748,6750,6752],{"class":580,"line":693},[578,6743,4882],{"class":587},[578,6745,2247],{"class":583},[578,6747,634],{"class":583},[578,6749,3716],{"class":604},[578,6751,667],{"class":583},[578,6753,2930],{"class":583},[578,6755,6756,6758,6760,6763],{"class":580,"line":703},[578,6757,4897],{"class":587},[578,6759,2247],{"class":583},[578,6761,6762],{"class":2317}," 0",[578,6764,2930],{"class":583},[578,6766,6767,6769,6771,6773],{"class":580,"line":714},[578,6768,4908],{"class":587},[578,6770,2247],{"class":583},[578,6772,2927],{"class":2926},[578,6774,2930],{"class":583},[578,6776,6777,6779,6781,6783],{"class":580,"line":569},[578,6778,4919],{"class":587},[578,6780,2247],{"class":583},[578,6782,2927],{"class":2926},[578,6784,2930],{"class":583},[578,6786,6787,6790,6792,6794],{"class":580,"line":570},[578,6788,6789],{"class":587}," antialias",[578,6791,2247],{"class":583},[578,6793,2927],{"class":2926},[578,6795,2930],{"class":583},[578,6797,6798],{"class":580,"line":571},[578,6799,2349],{"class":583},[578,6801,6802],{"class":580,"line":572},[578,6803,646],{"emptyLinePlaceholder":512},[578,6805,6806,6808,6811,6813,6815,6817,6820,6822],{"class":580,"line":573},[578,6807,652],{"class":591},[578,6809,6810],{"class":624}," rootRef ",[578,6812,598],{"class":583},[578,6814,661],{"class":660},[578,6816,584],{"class":583},[578,6818,6819],{"class":2166},"HTMLElement",[578,6821,2175],{"class":583},[578,6823,6824],{"class":624},"()\n",[578,6826,6827],{"class":580,"line":786},[578,6828,646],{"emptyLinePlaceholder":512},[578,6830,6831,6833,6836,6838,6840,6842,6844,6847,6849],{"class":580,"line":796},[578,6832,652],{"class":591},[578,6834,6835],{"class":624}," bgColor ",[578,6837,598],{"class":583},[578,6839,661],{"class":660},[578,6841,664],{"class":624},[578,6843,667],{"class":583},[578,6845,6846],{"class":604},"#F6B03B",[578,6848,667],{"class":583},[578,6850,675],{"class":624},[578,6852,6853],{"class":580,"line":806},[578,6854,646],{"emptyLinePlaceholder":512},[578,6856,6857,6859,6861,6863],{"class":580,"line":1856},[578,6858,652],{"class":591},[578,6860,4961],{"class":624},[578,6862,598],{"class":583},[578,6864,4966],{"class":624},[578,6866,6867],{"class":580,"line":1877},[578,6868,4971],{"class":583},[578,6870,6871,6873,6875,6877,6879,6881],{"class":580,"line":1886},[578,6872,4976],{"class":587},[578,6874,2247],{"class":583},[578,6876,634],{"class":583},[578,6878,2529],{"class":604},[578,6880,667],{"class":583},[578,6882,2930],{"class":583},[578,6884,6885,6887,6889,6891,6893,6895,6897,6899,6901,6903],{"class":580,"line":2431},[578,6886,4991],{"class":587},[578,6888,2247],{"class":583},[578,6890,4996],{"class":624},[578,6892,1795],{"class":2317},[578,6894,1638],{"class":583},[578,6896,2976],{"class":2317},[578,6898,1638],{"class":583},[578,6900,2976],{"class":2317},[578,6902,5009],{"class":624},[578,6904,2930],{"class":583},[578,6906,6907],{"class":580,"line":2436},[578,6908,2984],{"class":583},[578,6910,6911],{"class":580,"line":2036},[578,6912,4971],{"class":583},[578,6914,6915,6917,6919,6921,6923,6925],{"class":580,"line":2037},[578,6916,4976],{"class":587},[578,6918,2247],{"class":583},[578,6920,634],{"class":583},[578,6922,1764],{"class":604},[578,6924,667],{"class":583},[578,6926,2930],{"class":583},[578,6928,6929,6931,6933,6935,6937,6939,6941,6943,6945,6947],{"class":580,"line":2038},[578,6930,4991],{"class":587},[578,6932,2247],{"class":583},[578,6934,4996],{"class":624},[578,6936,5044],{"class":2317},[578,6938,1638],{"class":583},[578,6940,5049],{"class":2317},[578,6942,1638],{"class":583},[578,6944,5049],{"class":2317},[578,6946,5009],{"class":624},[578,6948,2930],{"class":583},[578,6950,6951],{"class":580,"line":2039},[578,6952,2984],{"class":583},[578,6954,6955],{"class":580,"line":2509},[578,6956,4971],{"class":583},[578,6958,6959,6961,6963,6965,6967,6969],{"class":580,"line":2515},[578,6960,4976],{"class":587},[578,6962,2247],{"class":583},[578,6964,634],{"class":583},[578,6966,2654],{"class":604},[578,6968,667],{"class":583},[578,6970,2930],{"class":583},[578,6972,6973,6975,6977,6979,6981,6983,6985,6987,6989,6991,6993,6995],{"class":580,"line":2524},[578,6974,4991],{"class":587},[578,6976,2247],{"class":583},[578,6978,4996],{"class":624},[578,6980,1849],{"class":2317},[578,6982,1638],{"class":583},[578,6984,5094],{"class":2317},[578,6986,1638],{"class":583},[578,6988,5099],{"class":2317},[578,6990,1638],{"class":583},[578,6992,5104],{"class":2317},[578,6994,5009],{"class":624},[578,6996,2930],{"class":583},[578,6998,6999],{"class":580,"line":2545},[578,7000,2984],{"class":583},[578,7002,7003],{"class":580,"line":2550},[578,7004,4971],{"class":583},[578,7006,7007,7009,7011,7013,7016,7018],{"class":580,"line":2558},[578,7008,4976],{"class":587},[578,7010,2247],{"class":583},[578,7012,634],{"class":583},[578,7014,7015],{"class":604},"TresConeGeometry",[578,7017,667],{"class":583},[578,7019,2930],{"class":583},[578,7021,7022,7024,7026,7028,7030,7032,7035,7037,7039,7041],{"class":580,"line":2573},[578,7023,4991],{"class":587},[578,7025,2247],{"class":583},[578,7027,4996],{"class":624},[578,7029,5044],{"class":2317},[578,7031,1638],{"class":583},[578,7033,7034],{"class":2317}," 1.4",[578,7036,1638],{"class":583},[578,7038,5049],{"class":2317},[578,7040,5009],{"class":624},[578,7042,2930],{"class":583},[578,7044,7045],{"class":580,"line":2588},[578,7046,2984],{"class":583},[578,7048,7049],{"class":580,"line":2593},[578,7050,5145],{"class":624},[578,7052,7053],{"class":580,"line":2602},[578,7054,646],{"emptyLinePlaceholder":512},[578,7056,7057,7059,7062,7064,7067,7070,7073],{"class":580,"line":2607},[578,7058,652],{"class":591},[578,7060,7061],{"class":624}," getRandomBackgroundColor ",[578,7063,598],{"class":583},[578,7065,7066],{"class":583}," ():",[578,7068,7069],{"class":2166}," string",[578,7071,7072],{"class":591}," =>",[578,7074,2256],{"class":583},[578,7076,7077,7080,7083,7085,7087,7089,7091,7093,7095,7097,7099,7101,7103,7105,7108,7110,7112,7114,7117,7119,7121,7123,7126,7128,7130,7132,7135,7137,7139,7141,7144,7146],{"class":580,"line":2615},[578,7078,7079],{"class":591}," const",[578,7081,7082],{"class":624}," colors",[578,7084,2309],{"class":583},[578,7086,4996],{"class":587},[578,7088,667],{"class":583},[578,7090,6846],{"class":604},[578,7092,667],{"class":583},[578,7094,1638],{"class":583},[578,7096,634],{"class":583},[578,7098,3716],{"class":604},[578,7100,667],{"class":583},[578,7102,1638],{"class":583},[578,7104,634],{"class":583},[578,7106,7107],{"class":604},"#FF5733",[578,7109,667],{"class":583},[578,7111,1638],{"class":583},[578,7113,634],{"class":583},[578,7115,7116],{"class":604},"#33FF57",[578,7118,667],{"class":583},[578,7120,1638],{"class":583},[578,7122,634],{"class":583},[578,7124,7125],{"class":604},"#3357FF",[578,7127,667],{"class":583},[578,7129,1638],{"class":583},[578,7131,634],{"class":583},[578,7133,7134],{"class":604},"#F333FF",[578,7136,667],{"class":583},[578,7138,1638],{"class":583},[578,7140,634],{"class":583},[578,7142,7143],{"class":604},"#33FFF5",[578,7145,667],{"class":583},[578,7147,5145],{"class":587},[578,7149,7150,7152,7155,7157,7160,7162,7165,7167,7170,7172,7175,7178,7181,7183,7185,7188],{"class":580,"line":2628},[578,7151,7079],{"class":591},[578,7153,7154],{"class":624}," idx",[578,7156,2309],{"class":583},[578,7158,7159],{"class":624}," Math",[578,7161,824],{"class":583},[578,7163,7164],{"class":660},"floor",[578,7166,664],{"class":587},[578,7168,7169],{"class":624},"Math",[578,7171,824],{"class":583},[578,7173,7174],{"class":660},"random",[578,7176,7177],{"class":587},"() ",[578,7179,7180],{"class":583},"*",[578,7182,7082],{"class":624},[578,7184,824],{"class":583},[578,7186,7187],{"class":624},"length",[578,7189,675],{"class":587},[578,7191,7192,7195,7197,7200,7203,7206,7209,7211,7213],{"class":580,"line":2643},[578,7193,7194],{"class":617}," return",[578,7196,7082],{"class":624},[578,7198,7199],{"class":587},"[",[578,7201,7202],{"class":624},"idx",[578,7204,7205],{"class":587},"] ",[578,7207,7208],{"class":583},"??",[578,7210,634],{"class":583},[578,7212,6846],{"class":604},[578,7214,640],{"class":583},[578,7216,7217],{"class":580,"line":2649},[578,7218,2349],{"class":583},[578,7220,7221],{"class":580,"line":2670},[578,7222,646],{"emptyLinePlaceholder":512},[578,7224,7225,7227,7230,7232,7235,7237],{"class":580,"line":2680},[578,7226,652],{"class":591},[578,7228,7229],{"class":624}," updateBackgroundColor ",[578,7231,598],{"class":583},[578,7233,7234],{"class":583}," ()",[578,7236,7072],{"class":591},[578,7238,2256],{"class":583},[578,7240,7241,7244,7246,7248,7250,7253],{"class":580,"line":2689},[578,7242,7243],{"class":624}," bgColor",[578,7245,824],{"class":583},[578,7247,2275],{"class":624},[578,7249,2309],{"class":583},[578,7251,7252],{"class":660}," getRandomBackgroundColor",[578,7254,6824],{"class":587},[578,7256,7257],{"class":580,"line":2698},[578,7258,2349],{"class":583},[578,7260,7261,7263,7265],{"class":580,"line":5348},[578,7262,681],{"class":583},[578,7264,588],{"class":587},[578,7266,610],{"class":583},[578,7268,7269],{"class":580,"line":5357},[578,7270,646],{"emptyLinePlaceholder":512},[578,7272,7273,7275,7277],{"class":580,"line":5362},[578,7274,584],{"class":583},[578,7276,698],{"class":587},[578,7278,610],{"class":583},[578,7280,7281,7283,7285,7287,7289,7291,7294,7296,7298,7300,7302,7304,7306],{"class":580,"line":5370},[578,7282,706],{"class":583},[578,7284,5293],{"class":587},[578,7286,661],{"class":591},[578,7288,598],{"class":583},[578,7290,601],{"class":583},[578,7292,7293],{"class":604},"rootRef",[578,7295,601],{"class":583},[578,7297,2803],{"class":591},[578,7299,598],{"class":583},[578,7301,601],{"class":583},[578,7303,6331],{"class":604},[578,7305,601],{"class":583},[578,7307,610],{"class":583},[578,7309,7310,7312,7314,7316,7318,7320,7322,7324,7326,7328,7330,7333,7335],{"class":580,"line":5385},[578,7311,717],{"class":583},[578,7313,709],{"class":587},[578,7315,5315],{"class":591},[578,7317,598],{"class":583},[578,7319,601],{"class":583},[578,7321,5322],{"class":604},[578,7323,601],{"class":583},[578,7325,2803],{"class":591},[578,7327,598],{"class":583},[578,7329,601],{"class":583},[578,7331,7332],{"class":604},"!pointer-events-none",[578,7334,601],{"class":583},[578,7336,610],{"class":583},[578,7338,7339,7341,7343,7345,7347,7349,7351,7353],{"class":580,"line":5400},[578,7340,728],{"class":583},[578,7342,1686],{"class":587},[578,7344,1689],{"class":591},[578,7346,598],{"class":583},[578,7348,601],{"class":583},[578,7350,5341],{"class":604},[578,7352,601],{"class":583},[578,7354,1701],{"class":583},[578,7356,7357,7359,7361,7364,7366,7368,7370,7372],{"class":580,"line":5415},[578,7358,728],{"class":583},[578,7360,1708],{"class":587},[578,7362,7363],{"class":591}," :dom-element",[578,7365,598],{"class":583},[578,7367,601],{"class":583},[578,7369,7293],{"class":604},[578,7371,601],{"class":583},[578,7373,1701],{"class":583},[578,7375,7376],{"class":580,"line":5430},[578,7377,646],{"emptyLinePlaceholder":512},[578,7379,7380,7382],{"class":580,"line":5444},[578,7381,728],{"class":583},[578,7383,5367],{"class":587},[578,7385,7386,7388,7390,7392,7394],{"class":580,"line":5459},[578,7387,5373],{"class":591},[578,7389,598],{"class":583},[578,7391,601],{"class":583},[578,7393,5380],{"class":604},[578,7395,747],{"class":583},[578,7397,7398,7400,7402,7404,7406],{"class":580,"line":5464},[578,7399,5388],{"class":591},[578,7401,598],{"class":583},[578,7403,601],{"class":583},[578,7405,5395],{"class":604},[578,7407,747],{"class":583},[578,7409,7410,7412,7414,7416,7418],{"class":580,"line":5495},[578,7411,5403],{"class":591},[578,7413,598],{"class":583},[578,7415,601],{"class":583},[578,7417,5410],{"class":604},[578,7419,747],{"class":583},[578,7421,7422,7424,7426,7428,7430],{"class":580,"line":5529},[578,7423,5418],{"class":591},[578,7425,598],{"class":583},[578,7427,601],{"class":583},[578,7429,5425],{"class":604},[578,7431,747],{"class":583},[578,7433,7434,7436,7438,7440,7442],{"class":580,"line":5538},[578,7435,5433],{"class":591},[578,7437,598],{"class":583},[578,7439,601],{"class":583},[578,7441,1795],{"class":604},[578,7443,747],{"class":583},[578,7445,7446,7448,7450,7452,7455],{"class":580,"line":5548},[578,7447,5447],{"class":591},[578,7449,598],{"class":583},[578,7451,601],{"class":583},[578,7453,7454],{"class":604},"[-0.4, 0.4]",[578,7456,747],{"class":583},[578,7458,7459],{"class":580,"line":5558},[578,7460,3851],{"class":583},[578,7462,7463,7465,7467,7469,7471,7473,7476,7478],{"class":580,"line":4708},[578,7464,1761],{"class":583},[578,7466,1754],{"class":587},[578,7468,1689],{"class":591},[578,7470,598],{"class":583},[578,7472,601],{"class":583},[578,7474,7475],{"class":604},"[(index - (geometries.length - 1) / 2) * 2, 1, 0]",[578,7477,601],{"class":583},[578,7479,610],{"class":583},[578,7481,7482,7484,7486,7488,7490,7492,7494,7496,7498,7500,7502,7504,7506],{"class":580,"line":4709},[578,7483,5498],{"class":583},[578,7485,5501],{"class":587},[578,7487,5504],{"class":591},[578,7489,598],{"class":583},[578,7491,601],{"class":583},[578,7493,5511],{"class":604},[578,7495,601],{"class":583},[578,7497,1767],{"class":591},[578,7499,598],{"class":583},[578,7501,601],{"class":583},[578,7503,5522],{"class":604},[578,7505,601],{"class":583},[578,7507,1701],{"class":583},[578,7509,7510,7512,7514],{"class":580,"line":4710},[578,7511,5498],{"class":583},[578,7513,2675],{"class":587},[578,7515,1701],{"class":583},[578,7517,7518,7520,7522],{"class":580,"line":4711},[578,7519,5541],{"class":583},[578,7521,1754],{"class":587},[578,7523,610],{"class":583},[578,7525,7526,7528,7530],{"class":580,"line":4712},[578,7527,1815],{"class":583},[578,7529,5553],{"class":587},[578,7531,610],{"class":583},[578,7533,7534],{"class":580,"line":4713},[578,7535,646],{"emptyLinePlaceholder":512},[578,7537,7538,7540],{"class":580,"line":4714},[578,7539,728],{"class":583},[578,7541,3789],{"class":587},[578,7543,7544],{"class":580,"line":4715},[578,7545,3795],{"class":591},[578,7547,7548],{"class":580,"line":4716},[578,7549,3801],{"class":591},[578,7551,7552,7554,7556,7558,7560],{"class":580,"line":4717},[578,7553,5583],{"class":591},[578,7555,598],{"class":583},[578,7557,601],{"class":583},[578,7559,4678],{"class":604},[578,7561,747],{"class":583},[578,7563,7564,7566,7568,7570,7573],{"class":580,"line":4718},[578,7565,3822],{"class":591},[578,7567,598],{"class":583},[578,7569,601],{"class":583},[578,7571,7572],{"class":604},"[0, .75, -2]",[578,7574,747],{"class":583},[578,7576,7578,7580,7582,7584,7587],{"class":7577,"line":5686},[580,614],[578,7579,3837],{"class":591},[578,7581,598],{"class":583},[578,7583,601],{"class":583},[578,7585,7586],{"class":604},"1.15",[578,7588,747],{"class":583},[578,7590,7592,7594,7596,7598,7600],{"class":7591,"line":4719},[580,614],[578,7593,5611],{"class":591},[578,7595,598],{"class":583},[578,7597,601],{"class":583},[578,7599,4168],{"class":604},[578,7601,747],{"class":583},[578,7603,7605],{"class":7604,"line":4720},[580,614],[578,7606,3851],{"class":583},[578,7608,7610,7612,7615,7618,7620,7622,7625,7627],{"class":7609,"line":4721},[580,614],[578,7611,1761],{"class":583},[578,7613,7614],{"class":587},"Transition",[578,7616,7617],{"class":591}," name",[578,7619,598],{"class":583},[578,7621,601],{"class":583},[578,7623,7624],{"class":604},"transition-basic",[578,7626,601],{"class":583},[578,7628,610],{"class":583},[578,7630,7632,7634],{"class":7631,"line":4722},[580,614],[578,7633,5498],{"class":583},[578,7635,7636],{"class":587},"h1\n",[578,7638,7640,7643,7645,7647,7650],{"class":7639,"line":4723},[580,614],[578,7641,7642],{"class":591}," v-if",[578,7644,598],{"class":583},[578,7646,601],{"class":583},[578,7648,7649],{"class":604},"showTransition",[578,7651,747],{"class":583},[578,7653,7655,7658,7660,7662,7665],{"class":7654,"line":4724},[580,614],[578,7656,7657],{"class":591}," :style",[578,7659,598],{"class":583},[578,7661,601],{"class":583},[578,7663,7664],{"class":604},"{ backgroundColor: bgColor }",[578,7666,747],{"class":583},[578,7668,7670,7673,7675,7677,7680],{"class":7669,"line":4725},[580,614],[578,7671,7672],{"class":591}," class",[578,7674,598],{"class":583},[578,7676,601],{"class":583},[578,7678,7679],{"class":604},"html-demo-transition-heading will-change-transform transition-transform,background-color cursor-pointer duration-500 text-center p-2 text-light shadow-lg",[578,7681,747],{"class":583},[578,7683,7685,7688,7690,7692,7695],{"class":7684,"line":4726},[580,614],[578,7686,7687],{"class":591}," @click",[578,7689,598],{"class":583},[578,7691,601],{"class":583},[578,7693,7694],{"class":604},"updateBackgroundColor",[578,7696,747],{"class":583},[578,7698,7700],{"class":7699,"line":4727},[580,614],[578,7701,7702],{"class":583}," >\n",[578,7704,7706,7709,7711,7713,7716,7718,7720,7723,7725],{"class":7705,"line":4728},[580,614],[578,7707,7708],{"class":583}," \u003C",[578,7710,2726],{"class":587},[578,7712,2175],{"class":583},[578,7714,7715],{"class":624},"TRANSITION + ",[578,7717,681],{"class":583},[578,7719,2726],{"class":587},[578,7721,7722],{"class":583},">\u003C",[578,7724,921],{"class":587},[578,7726,1701],{"class":583},[578,7728,7730,7732,7734,7736,7739,7741,7743],{"class":7729,"line":4729},[580,614],[578,7731,7708],{"class":583},[578,7733,4473],{"class":587},[578,7735,2175],{"class":583},[578,7737,7738],{"class":624},"occlude=blending 💛",[578,7740,681],{"class":583},[578,7742,4473],{"class":587},[578,7744,610],{"class":583},[578,7746,7748,7751,7753],{"class":7747,"line":5835},[580,614],[578,7749,7750],{"class":583}," \u003C/",[578,7752,3858],{"class":587},[578,7754,610],{"class":583},[578,7756,7758,7760,7762],{"class":7757,"line":4730},[580,614],[578,7759,5541],{"class":583},[578,7761,7614],{"class":587},[578,7763,610],{"class":583},[578,7765,7767,7769,7771],{"class":7766,"line":4731},[580,614],[578,7768,1815],{"class":583},[578,7770,3887],{"class":587},[578,7772,610],{"class":583},[578,7774,7776],{"class":7775,"line":4732},[580,614],[578,7777,646],{"emptyLinePlaceholder":512},[578,7779,7781,7783,7785,7787,7789,7791,7794,7796],{"class":7780,"line":4733},[580,614],[578,7782,728],{"class":583},[578,7784,2441],{"class":587},[578,7786,6250],{"class":591},[578,7788,598],{"class":583},[578,7790,601],{"class":583},[578,7792,7793],{"class":604},"-1.25",[578,7795,601],{"class":583},[578,7797,1701],{"class":583},[578,7799,7801,7803,7805,7807,7809,7811,7813,7815],{"class":7800,"line":4734},[580,614],[578,7802,728],{"class":583},[578,7804,1839],{"class":587},[578,7806,1842],{"class":591},[578,7808,598],{"class":583},[578,7810,601],{"class":583},[578,7812,1795],{"class":604},[578,7814,601],{"class":583},[578,7816,1701],{"class":583},[578,7818,7820,7822,7824],{"class":7819,"line":4735},[580,614],[578,7821,789],{"class":583},[578,7823,709],{"class":587},[578,7825,610],{"class":583},[578,7827,7829,7831,7833],{"class":7828,"line":4736},[580,614],[578,7830,799],{"class":583},[578,7832,5293],{"class":587},[578,7834,610],{"class":583},[578,7836,7837,7839,7841],{"class":580,"line":4737},[578,7838,681],{"class":583},[578,7840,698],{"class":587},[578,7842,610],{"class":583},[578,7844,7845],{"class":580,"line":4738},[578,7846,646],{"emptyLinePlaceholder":512},[578,7848,7849,7851,7853,7855],{"class":580,"line":4739},[578,7850,584],{"class":583},[578,7852,1550],{"class":587},[578,7854,3938],{"class":591},[578,7856,610],{"class":583},[578,7858,7859,7861,7863],{"class":580,"line":4740},[578,7860,824],{"class":583},[578,7862,6331],{"class":2166},[578,7864,2256],{"class":583},[578,7866,7867,7869,7871,7873],{"class":580,"line":5951},[578,7868,2936],{"class":3953},[578,7870,2247],{"class":583},[578,7872,6343],{"class":2317},[578,7874,3965],{"class":583},[578,7876,7877,7879,7881,7883],{"class":580,"line":4741},[578,7878,2949],{"class":3953},[578,7880,2247],{"class":583},[578,7882,6343],{"class":2317},[578,7884,3965],{"class":583},[578,7886,7887,7889,7891,7893],{"class":580,"line":4742},[578,7888,6362],{"class":3953},[578,7890,2247],{"class":583},[578,7892,6367],{"class":624},[578,7894,3965],{"class":583},[578,7896,7897,7899,7901,7903],{"class":580,"line":4743},[578,7898,6375],{"class":3953},[578,7900,2247],{"class":583},[578,7902,6380],{"class":624},[578,7904,3965],{"class":583},[578,7906,7907,7909,7911,7913,7915],{"class":580,"line":4744},[578,7908,3954],{"class":3953},[578,7910,2247],{"class":583},[578,7912,3959],{"class":583},[578,7914,6394],{"class":624},[578,7916,3965],{"class":583},[578,7918,7919],{"class":580,"line":4745},[578,7920,2349],{"class":583},[578,7922,7923],{"class":580,"line":4746},[578,7924,646],{"emptyLinePlaceholder":512},[578,7926,7927,7929,7932,7934,7937],{"class":580,"line":4747},[578,7928,824],{"class":583},[578,7930,7931],{"class":2166},"html-demo-transition-heading",[578,7933,2247],{"class":583},[578,7935,7936],{"class":591},"hover",[578,7938,2256],{"class":583},[578,7940,7941,7944,7946,7949,7951,7954],{"class":580,"line":4748},[578,7942,7943],{"class":3953}," transform",[578,7945,2247],{"class":583},[578,7947,7948],{"class":660}," scale",[578,7950,664],{"class":583},[578,7952,7953],{"class":2317},"1.05",[578,7955,7956],{"class":583},");\n",[578,7958,7959],{"class":580,"line":4749},[578,7960,2349],{"class":583},[578,7962,7963],{"class":580,"line":4750},[578,7964,646],{"emptyLinePlaceholder":512},[578,7966,7967,7969,7972],{"class":580,"line":4751},[578,7968,824],{"class":583},[578,7970,7971],{"class":2166},"transition-basic-enter-from",[578,7973,2930],{"class":583},[578,7975,7976,7978,7981],{"class":580,"line":6078},[578,7977,824],{"class":583},[578,7979,7980],{"class":2166},"transition-basic-leave-to",[578,7982,2256],{"class":583},[578,7984,7985,7987,7989,7991],{"class":580,"line":6102},[578,7986,5241],{"class":3953},[578,7988,2247],{"class":583},[578,7990,6762],{"class":2317},[578,7992,3965],{"class":583},[578,7994,7995,7997,7999,8002,8004,8007],{"class":580,"line":6123},[578,7996,7943],{"class":3953},[578,7998,2247],{"class":583},[578,8000,8001],{"class":660}," translateY",[578,8003,664],{"class":583},[578,8005,8006],{"class":2317},"-20px",[578,8008,7956],{"class":583},[578,8010,8011],{"class":580,"line":6132},[578,8012,2349],{"class":583},[578,8014,8015],{"class":580,"line":6141},[578,8016,646],{"emptyLinePlaceholder":512},[578,8018,8019,8021,8024],{"class":580,"line":6146},[578,8020,824],{"class":583},[578,8022,8023],{"class":2166},"transition-basic-enter-active",[578,8025,2930],{"class":583},[578,8027,8028,8030,8033],{"class":580,"line":6154},[578,8029,824],{"class":583},[578,8031,8032],{"class":2166},"transition-basic-leave-active",[578,8034,2256],{"class":583},[578,8036,8037,8040,8042,8045,8048,8051],{"class":580,"line":6169},[578,8038,8039],{"class":3953}," transition",[578,8041,2247],{"class":583},[578,8043,8044],{"class":624}," all ",[578,8046,8047],{"class":2317},"0.5s",[578,8049,8050],{"class":624}," ease",[578,8052,3965],{"class":583},[578,8054,8055],{"class":580,"line":6183},[578,8056,2349],{"class":583},[578,8058,8059],{"class":580,"line":6198},[578,8060,646],{"emptyLinePlaceholder":512},[578,8062,8063,8065,8068],{"class":580,"line":6212},[578,8064,824],{"class":583},[578,8066,8067],{"class":2166},"transition-basic-enter-to",[578,8069,2930],{"class":583},[578,8071,8072,8074,8077],{"class":580,"line":6227},[578,8073,824],{"class":583},[578,8075,8076],{"class":2166},"transition-basic-leave-from",[578,8078,2256],{"class":583},[578,8080,8081,8083,8085,8087],{"class":580,"line":6233},[578,8082,5241],{"class":3953},[578,8084,2247],{"class":583},[578,8086,2976],{"class":2317},[578,8088,3965],{"class":583},[578,8090,8091,8093,8095,8097,8099,8101],{"class":580,"line":6238},[578,8092,7943],{"class":3953},[578,8094,2247],{"class":583},[578,8096,8001],{"class":660},[578,8098,664],{"class":583},[578,8100,1129],{"class":2317},[578,8102,7956],{"class":583},[578,8104,8105],{"class":580,"line":6243},[578,8106,2349],{"class":583},[578,8108,8109,8111,8113],{"class":580,"line":6264},[578,8110,681],{"class":583},[578,8112,1550],{"class":587},[578,8114,610],{"class":583},[902,8116,6580,8118],{"id":8117},"using-iframes",[534,8119,8120],{},"iframes",[496,8122,8123,8124,8126],{},"You can achieve pretty cool results with the ",[534,8125,3887],{}," 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.",[2015,8128,8129],{},[8130,8131],"objects-html-iframe-demo",{},[4074,8133,4076,8134,8136],{},[4078,8135,4080],{},[564,8137,8139],{"className":4083,"code":8138,"language":4085,"meta":504,"style":504},"\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",[534,8140,8141,8147,8152,8157,8170,8183,8196,8209,8223,8237,8251,8255,8326],{"__ignoreMap":504},[578,8142,8143,8145],{"class":580,"line":505},[578,8144,584],{"class":583},[578,8146,4534],{"class":587},[578,8148,8149],{"class":580,"line":506},[578,8150,8151],{"class":591}," transform\n",[578,8153,8154],{"class":580,"line":643},[578,8155,8156],{"class":591}," center\n",[578,8158,8159,8162,8164,8166,8168],{"class":580,"line":649},[578,8160,8161],{"class":591}," :cast-shadow",[578,8163,598],{"class":583},[578,8165,601],{"class":583},[578,8167,1104],{"class":604},[578,8169,747],{"class":583},[578,8171,8172,8175,8177,8179,8181],{"class":580,"line":678},[578,8173,8174],{"class":591}," :receive-shadow",[578,8176,598],{"class":583},[578,8178,601],{"class":583},[578,8180,1104],{"class":604},[578,8182,747],{"class":583},[578,8184,8185,8188,8190,8192,8194],{"class":580,"line":688},[578,8186,8187],{"class":591}," occlude",[578,8189,598],{"class":583},[578,8191,601],{"class":583},[578,8193,4678],{"class":604},[578,8195,747],{"class":583},[578,8197,8198,8201,8203,8205,8207],{"class":580,"line":693},[578,8199,8200],{"class":591}," :z-index-range",[578,8202,598],{"class":583},[578,8204,601],{"class":583},[578,8206,4168],{"class":604},[578,8208,747],{"class":583},[578,8210,8211,8214,8216,8218,8221],{"class":580,"line":703},[578,8212,8213],{"class":591}," :position-y",[578,8215,598],{"class":583},[578,8217,601],{"class":583},[578,8219,8220],{"class":604},"2.5",[578,8222,747],{"class":583},[578,8224,8225,8228,8230,8232,8235],{"class":580,"line":714},[578,8226,8227],{"class":591}," :portal",[578,8229,598],{"class":583},[578,8231,601],{"class":583},[578,8233,8234],{"class":604},"portalRef",[578,8236,747],{"class":583},[578,8238,8239,8242,8244,8246,8249],{"class":580,"line":569},[578,8240,8241],{"class":591}," :style",[578,8243,598],{"class":583},[578,8245,601],{"class":583},[578,8247,8248],{"class":604},"{ userSelect: 'none' }",[578,8250,747],{"class":583},[578,8252,8253],{"class":580,"line":570},[578,8254,610],{"class":583},[578,8256,8257,8259,8262,8264,8266,8268,8271,8273,8276,8278,8280,8283,8285,8288,8290,8292,8294,8296,8299,8301,8303,8306,8308,8311,8313,8315,8318,8320,8322,8324],{"class":580,"line":571},[578,8258,706],{"class":583},[578,8260,8261],{"class":587},"iframe",[578,8263,2803],{"class":591},[578,8265,598],{"class":583},[578,8267,601],{"class":583},[578,8269,8270],{"class":604},"w-[700px] h-[500px]",[578,8272,601],{"class":583},[578,8274,8275],{"class":591}," src",[578,8277,598],{"class":583},[578,8279,601],{"class":583},[578,8281,8282],{"class":604},"https://tresjs.org",[578,8284,601],{"class":583},[578,8286,8287],{"class":591}," frameborder",[578,8289,598],{"class":583},[578,8291,601],{"class":583},[578,8293,1129],{"class":604},[578,8295,601],{"class":583},[578,8297,8298],{"class":591}," :width",[578,8300,598],{"class":583},[578,8302,601],{"class":583},[578,8304,8305],{"class":604},"700",[578,8307,601],{"class":583},[578,8309,8310],{"class":591}," :height",[578,8312,598],{"class":583},[578,8314,601],{"class":583},[578,8316,8317],{"class":604},"500",[578,8319,601],{"class":583},[578,8321,5975],{"class":583},[578,8323,8261],{"class":587},[578,8325,610],{"class":583},[578,8327,8328,8330,8332],{"class":580,"line":572},[578,8329,681],{"class":583},[578,8331,4085],{"class":587},[578,8333,610],{"class":583},[8335,8336,8337],"info",{},[496,8338,8339,8340,8343,8344,8347,8348],{},"The demos use ",[534,8341,8342],{},":z-index-range=\"[28, 0]\""," simply to ensure the HTML elements stay below the documentation header (which uses ",[534,8345,8346],{},"z-index: 30",").\n",[2726,8349,8350],{},"This value is for the docs only — you can ignore it or adjust it as needed.",[560,8352,936],{"id":935},[938,8354,8355,8365],{},[941,8356,8357],{},[944,8358,8359,8361,8363],{},[947,8360,1903],{},[947,8362,953],{},[947,8364,956],{},[958,8366,8367,8385,8400,8418,8444,8464,8481,8499,8511,8530,8553,8593,8631,8651,8684],{},[944,8368,8369,8374,8380],{},[963,8370,8371],{},[2726,8372,8373],{},"as",[963,8375,8376,8377,824],{},"Wrapping ",[4473,8378,8379],{},"HTML element",[963,8381,8382],{},[534,8383,8384],{},"'div'",[944,8386,8387,8392,8398],{},[963,8388,8389],{},[2726,8390,8391],{},"wrapperClass",[963,8393,1367,8394,8397],{},[534,8395,8396],{},"className"," of the wrapping element. element.",[963,8399],{},[944,8401,8402,8407,8414],{},[963,8403,8404],{},[2726,8405,8406],{},"prepend",[963,8408,8409,8410,8413],{},"Projects content ",[4473,8411,8412],{},"behind"," the canvas.",[963,8415,8416],{},[534,8417,1144],{},[944,8419,8420,8424,8440],{},[963,8421,8422],{},[2726,8423,1210],{},[963,8425,8426,8427,6574,8430,8432,8433],{},"Adds a ",[534,8428,8429],{},"transform: translate(-50%, -50%)",[921,8431],{},"➡️ ",[4473,8434,8435,8436,8439],{},"Ignored in ",[2726,8437,8438],{},"transform"," mode.",[963,8441,8442],{},[534,8443,1144],{},[944,8445,8446,8451,8460],{},[963,8447,8448],{},[2726,8449,8450],{},"fullscreen",[963,8452,8453,8454,8432,8456],{},"Aligns to the upper-left corner and fills the screen. ",[921,8455],{},[4473,8457,8435,8458,8439],{},[2726,8459,8438],{},[963,8461,8462],{},[534,8463,1144],{},[944,8465,8466,8471,8479],{},[963,8467,8468],{},[2726,8469,8470],{},"distanceFactor",[963,8472,8473,8474,8476,8477,824],{},"Children are scaled by this factor and also by distance to a ",[534,8475,3597],{},", or zoom when using an ",[534,8478,3600],{},[963,8480],{},[944,8482,8483,8488,8494],{},[963,8484,8485],{},[2726,8486,8487],{},"zIndexRange",[963,8489,8490,8491,824],{},"Defines the ",[4473,8492,8493],{},"Z-order range",[963,8495,8496],{},[534,8497,8498],{},"[16777271, 0]",[944,8500,8501,8506,8509],{},[963,8502,8503],{},[2726,8504,8505],{},"portal",[963,8507,8508],{},"Reference to a target container (for rendering into a different DOM node). container.",[963,8510],{},[944,8512,8513,8517,8526],{},[963,8514,8515],{},[2726,8516,8438],{},[963,8518,988,8519,8521,8522,8525],{},[534,8520,1104],{},", applies ",[534,8523,8524],{},"matrix3d"," transformations — the element appears as if it is inside the 3D scene.",[963,8527,8528],{},[534,8529,1144],{},[944,8531,8532,8537,8549],{},[963,8533,8534],{},[2726,8535,8536],{},"sprite",[963,8538,8539,8540,6574,8542,8432,8544],{},"Renders as a ",[4473,8541,8536],{},[921,8543],{},[4473,8545,8546,8547,8439],{},"Only in ",[2726,8548,8438],{},[963,8550,8551],{},[534,8552,1144],{},[944,8554,8555,8560,8584],{},[963,8556,8557],{},[2726,8558,8559],{},"calculatePosition",[963,8561,8562,8563,8565,926,8568,926,8571,8573,8574,8577,8578,8432,8580],{},"Callback function to override the default positioning logic. ",[921,8564],{},[2726,8566,8567],{},"Type:",[534,8569,8570],{},"(object: Object3D, camera: Camera, size: { width: number; height: number }) => [number, number, number]",[921,8572],{},"Receives the related 3D object, the active camera, and the current viewport size, and must return ",[534,8575,8576],{},"[x, y, z]"," pixel coordinates for placing the HTML element. ",[921,8579],{},[4473,8581,8435,8582,8439],{},[2726,8583,8438],{},[963,8585,8586],{},[539,8587,8590,8591],{"href":8588,"rel":8589},"https://github.com/Tresjs/cientos/blob/main/src/core/misc/html/utils.ts#L9-L19",[543],"Default ",[534,8592,8559],{},[944,8594,8595,8599,8629],{},[963,8596,8597],{},[2726,8598,4037],{},[963,8600,8601,8602,8604,8605,8607,8608,8611,8612,8614,8615,8618,8619,8604,8621,8624,8625,8628],{},"Enables occlusion. Possible values: ",[921,8603],{},"- ",[534,8606,1104],{}," → Occlusion against ",[4473,8609,8610],{},"all"," scene objects ",[921,8613],{}," - ",[534,8616,8617],{},"Ref\u003CTresObject3D>[]"," → Occlusion is enabled only against the specified objects. ",[921,8620],{},[534,8622,8623],{},"'blending'"," → Uses a ",[4473,8626,8627],{},"blending-based"," occlusion method (CSS-like depth blending).",[963,8630],{},[944,8632,8633,8637,8643],{},[963,8634,8635],{},[2726,8636,6438],{},[963,8638,8639,8640,8642],{},"Custom ",[534,8641,6438],{}," to be used.",[963,8644,8645],{},[539,8646,8649],{"href":8647,"rel":8648},"https://threejs.org/docs/?q=geometry#api/en/geometries/PlaneGeometry",[543],[534,8650,6428],{},[944,8652,8653,8657,8682],{},[963,8654,8655],{},[2726,8656,6511],{},[963,8658,8659,926,8665,926,8667,8673,8674,926,8676],{},[2726,8660,8661,8662,8664],{},"Custom shader ",[4473,8663,6511],{}," used for the occlusion mesh.",[921,8666],{},[2726,8668,8669,8670,8672],{},"Only applies when ",[534,8671,6420],{}," is enabled"," (an occlusion mesh is created). ",[921,8675],{},[4473,8677,8678,8679,8681],{},"Ignored in raycast occlusion modes (",[534,8680,1104],{},", object refs).",[963,8683],{},[944,8685,8686,8691,8713],{},[963,8687,8688],{},[2726,8689,8690],{},"transparentMaterial",[963,8692,8693,926,8700,926,8702,926,8707,926,8709],{},[2726,8694,8695,8696,8699],{},"Enables ",[4473,8697,8698],{},"transparent"," rendering for the occlusion material.",[921,8701],{},[2726,8703,8669,8704,8706],{},[534,8705,6420],{}," creates an occlusion mesh.",[921,8708],{},[4473,8710,8678,8711,8681],{},[534,8712,1104],{},[963,8714,8715],{},[534,8716,1144],{},[560,8718,1291],{"id":1290},[938,8720,8721,8729],{},[941,8722,8723],{},[944,8724,8725,8727],{},[947,8726,1300],{},[947,8728,953],{},[958,8730,8731],{},[944,8732,8733,8736],{},[963,8734,8735],{},"onOcclude",[963,8737,8738],{},"Called when the occlusion state changes.",[560,8740,8742],{"id":8741},"exposed-properties","Exposed properties",[938,8744,8745,8757],{},[941,8746,8747],{},[944,8748,8749,8752,8755],{},[947,8750,8751],{},"Property",[947,8753,8754],{},"Type",[947,8756,953],{},[958,8758,8759,8782,8803],{},[944,8760,8761,8766,8771],{},[963,8762,8763],{},[2726,8764,8765],{},"instance",[963,8767,8768],{},[534,8769,8770],{},"Ref\u003CTresObject3D | null>",[963,8772,8773,8774,8779,8780,824],{},"Reference to the root ",[2726,8775,8776],{},[534,8777,8778],{},"\u003CTresGroup>"," used by ",[534,8781,3604],{},[944,8783,8784,8789,8794],{},[963,8785,8786],{},[2726,8787,8788],{},"isVisible",[963,8790,8791],{},[534,8792,8793],{},"Ref\u003Cboolean>",[963,8795,8796,8797,6568,8800,824],{},"Reactive value that indicates whether the HTML content is ",[2726,8798,8799],{},"currently visible",[2726,8801,8802],{},"occluded",[944,8804,8805,8810,8814],{},[963,8806,8807],{},[2726,8808,8809],{},"occlusionMesh",[963,8811,8812],{},[534,8813,8770],{},[963,8815,8816,8817,8820,8821,6532,8823,8825],{},"Reference to the ",[2726,8818,8819],{},"occlusion mesh"," created when ",[534,8822,6420],{},[2726,8824,6535],{},". Used internally for geometry-based occlusion.",[560,8827,8829],{"id":8828},"caveats","Caveats",[550,8831,8832,8865,8882,8941,8959],{},[553,8833,8834,8835,8840,8841,8843,8844,6568,8847,8850,8851,8853,8854,8857,8858,8861,8862,8864],{},"✨ When using ",[2726,8836,8837],{},[534,8838,8839],{},"\u003CHtml occlude>",", if the ",[534,8842,3604],{}," component is ",[2726,8845,8846],{},"overlapping",[2726,8848,8849],{},"inside a 3D object",", it will be considered ",[2726,8852,8802],{}," and therefore ",[2726,8855,8856],{},"hidden",". To avoid this, ",[2726,8859,8860],{},"adjust the position"," of the ",[534,8863,3604],{}," component in your scene.",[553,8866,8867,8868,8873,8874,8877,8878,8881],{},"🎨 When using ",[2726,8869,8870],{},[534,8871,8872],{},"\u003CHtml occlude=\"blending\">",", the HTML content is no longer ",[2726,8875,8876],{},"selectable"," because it is rendered ",[2726,8879,8880],{},"behind the canvas",". This is required to achieve the blending effect.",[553,8883,8884,8885,8887,8888,8890,8891],{},"⚙️ When using a ",[2726,8886,6520],{}," with occlusion in ",[534,8889,4678],{}," mode, there are a few important requirements to ensure the HTML content renders correctly ⬇️",[4074,8892,4076,8893,8896],{},[4078,8894,8895],{},"See more information",[8897,8898,8899,8911,8919,8926],"ol",{},[553,8900,8901,8902,2264,8904,8907,8908,824],{},"If you provide your own material, it must be ",[2726,8903,8698],{},[534,8905,8906],{},"transparent: true",") with an ",[2726,8909,8910],{},"opacity \u003C 1",[553,8912,8913,8914,8918],{},"If you are not providing a custom material, enable ",[2726,8915,8916],{},[534,8917,8690],{}," so the internal shader becomes transparent.",[553,8920,8921,8922,8925],{},"The occlusion mesh requires a ",[2726,8923,8924],{},"fully transparent canvas background","; otherwise, thin borders or halo artifacts may appear.",[553,8927,8928,8929,8932,8933,6620,8935,8938,8939,824],{},"To compensate for the transparent canvas, you may ",[2726,8930,8931],{},"reapply your previous clear-color as a CSS background"," on the ",[534,8934,4085],{},[534,8936,8937],{},"body",", or a wrapper ",[534,8940,5293],{},[553,8942,8943,8944,8948,8949,8951,8952,8954,8955,8958],{},"🔶 When using ",[2726,8945,8946],{},[534,8947,8690],{},", overlapping ",[534,8950,3604],{}," elements (especially multiple ",[534,8953,6420],{}," instances) may cause ",[2726,8956,8957],{},"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.",[553,8960,8961,8962,8964,8965,8968,8969],{},"🔵 To avoid thin border artifacts when using ",[534,8963,6420],{},", make sure your ",[534,8966,8967],{},"\u003CTresCanvas>"," is fully transparent:",[564,8970,8972],{"className":566,"code":8971,"language":574,"meta":504,"style":504},"\u003CTresCanvas :alpha=\"true\" :clearAlpha=\"0\" />\n",[534,8973,8974],{"__ignoreMap":504},[578,8975,8976,8978,8980,8983,8986,8988,8990,8992,8994,8996,8999,9001,9003,9005,9007],{"class":580,"line":505},[578,8977,584],{"class":583},[578,8979,709],{"class":587},[578,8981,8982],{"class":583}," :",[578,8984,8985],{"class":591},"alpha",[578,8987,598],{"class":583},[578,8989,601],{"class":583},[578,8991,1104],{"class":2926},[578,8993,601],{"class":583},[578,8995,8982],{"class":583},[578,8997,8998],{"class":591},"clearAlpha",[578,9000,598],{"class":583},[578,9002,601],{"class":583},[578,9004,1129],{"class":2317},[578,9006,601],{"class":583},[578,9008,1701],{"class":583},[938,9010,9011,9021],{},[941,9012,9013],{},[944,9014,9015,9017,9019],{},[947,9016,1903],{},[947,9018,953],{},[947,9020,956],{},[958,9022,9023,9036,9047,9060,9076,9091,9102,9115,9126,9139,9152,9165,9187,9202],{},[944,9024,9025,9029,9032],{},[963,9026,9027],{},[2726,9028,8373],{},[963,9030,9031],{},"Wrapping html element.",[963,9033,9034],{},[534,9035,8384],{},[944,9037,9038,9042,9045],{},[963,9039,9040],{},[2726,9041,8391],{},[963,9043,9044],{},"The className of the wrapping element.",[963,9046],{},[944,9048,9049,9053,9056],{},[963,9050,9051],{},[2726,9052,8406],{},[963,9054,9055],{},"Project content behind the canvas.",[963,9057,9058],{},[534,9059,1144],{},[944,9061,9062,9066,9072],{},[963,9063,9064],{},[2726,9065,1210],{},[963,9067,9068,9069],{},"Adds a -50%/-50% CSS transform. ",[578,9070,9071],{},"Ignored in transform mode",[963,9073,9074],{},[534,9075,1144],{},[944,9077,9078,9082,9087],{},[963,9079,9080],{},[2726,9081,8450],{},[963,9083,9084,9085],{},"Aligns to the upper-left corner, fills the screen. ",[578,9086,9071],{},[963,9088,9089],{},[534,9090,1144],{},[944,9092,9093,9097,9100],{},[963,9094,9095],{},[2726,9096,8470],{},[963,9098,9099],{},"Children will be scaled by this factor, and also by distance to a PerspectiveCamera / zoom by an OrthographicCamera.",[963,9101],{},[944,9103,9104,9108,9111],{},[963,9105,9106],{},[2726,9107,8487],{},[963,9109,9110],{},"Z-order range.",[963,9112,9113],{},[534,9114,8498],{},[944,9116,9117,9121,9124],{},[963,9118,9119],{},[2726,9120,8505],{},[963,9122,9123],{},"Reference to target container.",[963,9125],{},[944,9127,9128,9132,9135],{},[963,9129,9130],{},[2726,9131,8438],{},[963,9133,9134],{},"If true, applies matrix3d transformations.",[963,9136,9137],{},[534,9138,1144],{},[944,9140,9141,9145,9148],{},[963,9142,9143],{},[2726,9144,8536],{},[963,9146,9147],{},"Renders as sprite, but only in transform mode.",[963,9149,9150],{},[534,9151,1144],{},[944,9153,9154,9158,9163],{},[963,9155,9156],{},[2726,9157,8559],{},[963,9159,9160,9161],{},"Override default positioning function. ",[578,9162,9071],{},[963,9164],{},[944,9166,9167,9171,9185],{},[963,9168,9169],{},[2726,9170,4037],{},[963,9172,9173,9174,6620,9176,6620,9178,9181,9182,9184],{},"Can be ",[534,9175,1104],{},[534,9177,8617],{},[534,9179,9180],{},"'raycast'",", or ",[534,9183,8623],{},". True occludes the entire scene.",[963,9186],{},[944,9188,9189,9193,9198],{},[963,9190,9191],{},[2726,9192,6438],{},[963,9194,8639,9195,9197],{},[534,9196,6438],{}," to be use",[963,9199,9200],{},[534,9201,6428],{},[944,9203,9204,9208,9212],{},[963,9205,9206],{},[2726,9207,6511],{},[963,9209,8661,9210,9197],{},[534,9211,6511],{},[963,9213],{},[560,9215,1291],{"id":9216},"events-1",[938,9218,9219,9227],{},[941,9220,9221],{},[944,9222,9223,9225],{},[947,9224,1300],{},[947,9226,953],{},[958,9228,9229],{},[944,9230,9231,9233],{},[963,9232,8735],{},[963,9234,8738],{},[1550,9236,9237],{},"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":504,"searchDepth":505,"depth":506,"links":9239},[9240,9241,9246,9249,9254,9255,9256,9257,9258],{"id":562,"depth":506,"text":15},{"id":4030,"depth":506,"text":4031,"children":9242},[9243,9244,9245],{"id":4225,"depth":643,"text":4226},{"id":4388,"depth":643,"text":4389},{"id":4652,"depth":643,"text":4653},{"id":6413,"depth":506,"text":6414,"children":9247},[9248],{"id":6504,"depth":643,"text":6505},{"id":6579,"depth":506,"text":9250,"children":9251},"Using \u003CTransition>",[9252],{"id":8117,"depth":643,"text":9253},"Using iframes",{"id":935,"depth":506,"text":936},{"id":1290,"depth":506,"text":1291},{"id":8741,"depth":506,"text":8742},{"id":8828,"depth":506,"text":8829},{"id":9216,"depth":506,"text":1291},"Allows you put DOM elements in your Tres.js scene.",{},{"title":433,"description":9259},"sCicSGhX9NlQz2qQXKQDRsp2N33eyO-s6DiY6dGH98s",{"id":9264,"title":437,"body":9265,"description":9877,"extension":509,"links":510,"meta":9878,"navigation":512,"path":438,"seo":9879,"stem":439,"__hash__":9880},"docs/2.api/9.objects/image.md",{"type":493,"value":9266,"toc":9872},[9267,9272,9278,9280,9451,9453,9460,9678,9680,9703,9869],[526,9268,9269],{},[9270,9271],"objects-image",{},[496,9273,9274,9277],{},[534,9275,9276],{},"\u003CImage />"," is a shader-based component that optionally loads then displays an image texture on a default plane or on your custom geometry.",[560,9279,15],{"id":562},[564,9281,9284],{"className":566,"code":9282,"highlights":9283,"language":574,"meta":504,"style":504},"\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",[643,569,570,571],[534,9285,9286,9306,9324,9344,9352,9356,9364,9372,9390,9394,9402,9417,9431,9435,9443],{"__ignoreMap":504},[578,9287,9288,9290,9292,9294,9296,9298,9300,9302,9304],{"class":580,"line":505},[578,9289,584],{"class":583},[578,9291,588],{"class":587},[578,9293,592],{"class":591},[578,9295,595],{"class":591},[578,9297,598],{"class":583},[578,9299,601],{"class":583},[578,9301,605],{"class":604},[578,9303,601],{"class":583},[578,9305,610],{"class":583},[578,9307,9308,9310,9312,9314,9316,9318,9320,9322],{"class":580,"line":506},[578,9309,618],{"class":617},[578,9311,621],{"class":583},[578,9313,2117],{"class":624},[578,9315,628],{"class":583},[578,9317,631],{"class":617},[578,9319,634],{"class":583},[578,9321,2106],{"class":604},[578,9323,640],{"class":583},[578,9325,9327,9329,9331,9334,9336,9338,9340,9342],{"class":9326,"line":643},[580,614],[578,9328,618],{"class":617},[578,9330,621],{"class":583},[578,9332,9333],{"class":624}," Image",[578,9335,628],{"class":583},[578,9337,631],{"class":617},[578,9339,634],{"class":583},[578,9341,637],{"class":604},[578,9343,640],{"class":583},[578,9345,9346,9348,9350],{"class":580,"line":649},[578,9347,681],{"class":583},[578,9349,588],{"class":587},[578,9351,610],{"class":583},[578,9353,9354],{"class":580,"line":678},[578,9355,646],{"emptyLinePlaceholder":512},[578,9357,9358,9360,9362],{"class":580,"line":688},[578,9359,584],{"class":583},[578,9361,698],{"class":587},[578,9363,610],{"class":583},[578,9365,9366,9368,9370],{"class":580,"line":693},[578,9367,706],{"class":583},[578,9369,709],{"class":587},[578,9371,610],{"class":583},[578,9373,9374,9376,9378,9380,9382,9384,9386,9388],{"class":580,"line":703},[578,9375,717],{"class":583},[578,9377,1686],{"class":587},[578,9379,1689],{"class":591},[578,9381,598],{"class":583},[578,9383,601],{"class":583},[578,9385,3307],{"class":604},[578,9387,601],{"class":583},[578,9389,1701],{"class":583},[578,9391,9392],{"class":580,"line":714},[578,9393,646],{"emptyLinePlaceholder":512},[578,9395,9397,9399],{"class":9396,"line":569},[580,614],[578,9398,717],{"class":583},[578,9400,9401],{"class":587},"Image\n",[578,9403,9405,9408,9410,9412,9415],{"class":9404,"line":570},[580,614],[578,9406,9407],{"class":591}," url",[578,9409,598],{"class":583},[578,9411,601],{"class":583},[578,9413,9414],{"class":604},"https://upload.wikimedia.org/wikipedia/commons/f/f0/Cyanistes_caeruleus_Oulu_20150516.JPG",[578,9416,747],{"class":583},[578,9418,9420,9423,9425,9427,9429],{"class":9419,"line":571},[580,614],[578,9421,9422],{"class":591}," :scale",[578,9424,598],{"class":583},[578,9426,601],{"class":583},[578,9428,3339],{"class":604},[578,9430,747],{"class":583},[578,9432,9433],{"class":580,"line":572},[578,9434,2512],{"class":583},[578,9436,9437,9439,9441],{"class":580,"line":573},[578,9438,799],{"class":583},[578,9440,709],{"class":587},[578,9442,610],{"class":583},[578,9444,9445,9447,9449],{"class":580,"line":786},[578,9446,681],{"class":583},[578,9448,698],{"class":587},[578,9450,610],{"class":583},[560,9452,936],{"id":935},[814,9454,9455],{},[496,9456,9457,9459],{},[534,9458,9276],{}," is a THREE.Mesh and most Mesh attributes can be used as props on the component.",[938,9461,9462,9472],{},[941,9463,9464],{},[944,9465,9466,9468,9470],{},[947,9467,1903],{"align":949},[947,9469,953],{"align":949},[947,9471,956],{},[958,9473,9474,9488,9505,9520,9534,9551,9565,9584,9602,9617,9634,9654,9666],{},[944,9475,9476,9481,9484],{},[963,9477,9478],{"align":949},[534,9479,9480],{},"segments",[963,9482,9483],{"align":949},"Number of divisions in the default geometry.",[963,9485,9486],{},[534,9487,1795],{},[944,9489,9490,9495,9501],{},[963,9491,9492],{"align":949},[534,9493,9494],{},"scale",[963,9496,9497,9498],{"align":949},"Scale of the geometry. ",[534,9499,9500],{},"number | [number, number]",[963,9502,9503],{},[534,9504,1795],{},[944,9506,9507,9512,9515],{},[963,9508,9509],{"align":949},[534,9510,9511],{},"color",[963,9513,9514],{"align":949},"Color multiplied into the image texture.",[963,9516,9517],{},[534,9518,9519],{},"'white'",[944,9521,9522,9527,9530],{},[963,9523,9524],{"align":949},[534,9525,9526],{},"zoom",[963,9528,9529],{"align":949},"Shrinks or enlarges the image texture.",[963,9531,9532],{},[534,9533,1795],{},[944,9535,9536,9541,9547],{},[963,9537,9538],{"align":949},[534,9539,9540],{},"radius",[963,9542,9543,9544,9546],{"align":949},"Border radius applied to the image texture. (Intended for rectangular geometries. Use with ",[534,9545,8698],{},".)",[963,9548,9549],{},[534,9550,1129],{},[944,9552,9553,9558,9561],{},[963,9554,9555],{"align":949},[534,9556,9557],{},"grayscale",[963,9559,9560],{"align":949},"Power of grayscale effect. 0 is off. 1 is full grayscale.",[963,9562,9563],{},[534,9564,1129],{},[944,9566,9567,9572,9580],{},[963,9568,9569],{"align":949},[534,9570,9571],{},"toneMapped",[963,9573,9574,9575],{"align":949},"Whether this material is tone mapped according to the renderers toneMapping settings. ",[539,9576,9579],{"href":9577,"rel":9578},"https://threejs.org/docs/?q=material#api/en/materials/Material.toneMapped",[543],"See THREE.material.tonemapped",[963,9581,9582],{},[534,9583,1129],{},[944,9585,9586,9590,9598],{},[963,9587,9588],{"align":949},[534,9589,8698],{},[963,9591,9592,9593],{"align":949},"Whether the image material should be transparent. ",[539,9594,9597],{"href":9595,"rel":9596},"https://threejs.org/docs/?q=material#api/en/materials/Material.transparent",[543],"See THREE.material.transparent",[963,9599,9600],{},[534,9601,1144],{},[944,9603,9604,9608,9613],{},[963,9605,9606],{"align":949},[534,9607,8698],{},[963,9609,9592,9610],{"align":949},[539,9611,9597],{"href":9595,"rel":9612},[543],[963,9614,9615],{},[534,9616,1144],{},[944,9618,9619,9624,9630],{},[963,9620,9621],{"align":949},[534,9622,9623],{},"opacity",[963,9625,9626,9627],{"align":949},"Opacity of the image material. ",[539,9628,9597],{"href":9595,"rel":9629},[543],[963,9631,9632],{},[534,9633,1795],{},[944,9635,9636,9641,9649],{},[963,9637,9638],{"align":949},[534,9639,9640],{},"side",[963,9642,9643,9644],{"align":949},"THREE.Side of the image material. ",[539,9645,9648],{"href":9646,"rel":9647},"https://threejs.org/docs/?q=material#api/en/materials/Material.side",[543],"See THREE.material.side",[963,9650,9651],{},[534,9652,9653],{},"FrontSide",[944,9655,9656,9661,9664],{},[963,9657,9658],{"align":949},[534,9659,9660],{},"texture",[963,9662,9663],{"align":949},"Image texture to display on the geometry.",[963,9665],{},[944,9667,9668,9673,9676],{},[963,9669,9670],{"align":949},[534,9671,9672],{},"url",[963,9674,9675],{"align":949},"Image URL to load and display on the geometry.",[963,9677],{},[560,9679,8829],{"id":8828},[496,9681,9682,9683,9685,9686,9689,9690,9692,9693,9696,9697,6568,9700,1532],{},"By default, images loaded via the ",[534,9684,9672],{}," prop use the renderer’s output color space. For advanced control, pass a ",[534,9687,9688],{},"THREE.Texture"," via the ",[534,9691,9660],{}," prop and set its ",[534,9694,9695],{},"colorSpace"," (e.g., ",[534,9698,9699],{},"THREE.SRGBColorSpace",[534,9701,9702],{},"THREE.LinearSRGBColorSpace",[564,9704,9706],{"className":566,"code":9705,"language":574,"meta":504,"style":504},"\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",[534,9707,9708,9718,9737,9756,9760,9778,9799,9816,9822,9830,9834,9842,9861],{"__ignoreMap":504},[578,9709,9710,9712,9714,9716],{"class":580,"line":505},[578,9711,584],{"class":583},[578,9713,588],{"class":587},[578,9715,592],{"class":591},[578,9717,610],{"class":583},[578,9719,9720,9722,9724,9727,9729,9731,9733,9735],{"class":580,"line":506},[578,9721,618],{"class":617},[578,9723,621],{"class":583},[578,9725,9726],{"class":624}," useTexture",[578,9728,628],{"class":583},[578,9730,631],{"class":617},[578,9732,634],{"class":583},[578,9734,637],{"class":604},[578,9736,640],{"class":583},[578,9738,9739,9741,9743,9746,9748,9750,9752,9754],{"class":580,"line":643},[578,9740,618],{"class":617},[578,9742,621],{"class":583},[578,9744,9745],{"class":624}," SRGBColorSpace",[578,9747,628],{"class":583},[578,9749,631],{"class":617},[578,9751,634],{"class":583},[578,9753,4860],{"class":604},[578,9755,640],{"class":583},[578,9757,9758],{"class":580,"line":649},[578,9759,646],{"emptyLinePlaceholder":512},[578,9761,9762,9764,9766,9769,9771,9773,9775],{"class":580,"line":678},[578,9763,652],{"class":591},[578,9765,621],{"class":583},[578,9767,9768],{"class":624}," state ",[578,9770,2990],{"class":583},[578,9772,2309],{"class":583},[578,9774,9726],{"class":660},[578,9776,9777],{"class":624},"(URL)\n",[578,9779,9780,9783,9786,9788,9790,9792,9795,9797],{"class":580,"line":688},[578,9781,9782],{"class":660},"watch",[578,9784,9785],{"class":624},"(state",[578,9787,1638],{"class":583},[578,9789,2264],{"class":583},[578,9791,9660],{"class":2236},[578,9793,9794],{"class":583},")",[578,9796,7072],{"class":591},[578,9798,2256],{"class":583},[578,9800,9801,9804,9806,9808,9810,9812],{"class":580,"line":693},[578,9802,9803],{"class":624}," texture",[578,9805,824],{"class":583},[578,9807,9695],{"class":624},[578,9809,2309],{"class":583},[578,9811,9745],{"class":624},[578,9813,9815],{"class":9814},"sHwdD"," // assign a custom color space\n",[578,9817,9818,9820],{"class":580,"line":703},[578,9819,2990],{"class":583},[578,9821,675],{"class":624},[578,9823,9824,9826,9828],{"class":580,"line":714},[578,9825,681],{"class":583},[578,9827,588],{"class":587},[578,9829,610],{"class":583},[578,9831,9832],{"class":580,"line":569},[578,9833,646],{"emptyLinePlaceholder":512},[578,9835,9836,9838,9840],{"class":580,"line":570},[578,9837,584],{"class":583},[578,9839,698],{"class":587},[578,9841,610],{"class":583},[578,9843,9844,9846,9848,9851,9853,9855,9857,9859],{"class":580,"line":571},[578,9845,706],{"class":583},[578,9847,437],{"class":587},[578,9849,9850],{"class":591}," :texture",[578,9852,598],{"class":583},[578,9854,601],{"class":583},[578,9856,9660],{"class":604},[578,9858,601],{"class":583},[578,9860,1701],{"class":583},[578,9862,9863,9865,9867],{"class":580,"line":572},[578,9864,681],{"class":583},[578,9866,698],{"class":587},[578,9868,610],{"class":583},[1550,9870,9871],{},"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":504,"searchDepth":505,"depth":506,"links":9873},[9874,9875,9876],{"id":562,"depth":506,"text":15},{"id":935,"depth":506,"text":936},{"id":8828,"depth":506,"text":8829},"Display image textures with shader-based effects.",{},{"title":437,"description":9877},"X-ToNyUMXQZlkTHUsm9OM76zK6fPjZKmSgrWtCQht4g",{"id":9882,"title":441,"body":9883,"description":10682,"extension":509,"links":510,"meta":10683,"navigation":512,"path":442,"seo":10684,"stem":443,"__hash__":10685},"docs/2.api/9.objects/marching-cubes.md",{"type":493,"value":9884,"toc":10676},[9885,9890,9901,9904,9929,9931,10487,10489,10560,10564,10610,10614,10673],[526,9886,9887],{},[9888,9889],"objects-marching-cubes",{},[496,9891,9892,9895,9896,824],{},[534,9893,9894],{},"\u003CMarchingCubes />"," is a wrapper around ",[539,9897,9900],{"href":9898,"rel":9899},"https://threejs.org/examples/#webgl_marchingcubes",[543],"THREE's Marching Cubes",[496,9902,9903],{},"It includes 3 components:",[550,9905,9906,9919,9924],{},[553,9907,9908,9910,9911,9914,9915,9918],{},[534,9909,9894],{}," – container element for ",[534,9912,9913],{},"\u003CMarchingCube />","s and ",[534,9916,9917],{},"\u003CMarchingPlane />","s",[553,9920,9921,9923],{},[534,9922,9913],{}," - an individual metaball",[553,9925,9926,9928],{},[534,9927,9917],{}," – optional bounding plane that interacts with the metaballs",[560,9930,15],{"id":562},[564,9932,9935],{"className":566,"code":9933,"highlights":9934,"language":574,"meta":504,"style":504},"\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",[506,786,796,806,1856,1877,1886,2431,2436,2036],[534,9936,9937,9957,9991,10009,10033,10037,10072,10135,10143,10147,10155,10186,10194,10202,10206,10238,10259,10267,10281,10295,10309,10314,10370,10379,10383,10392,10432,10471,10479],{"__ignoreMap":504},[578,9938,9939,9941,9943,9945,9947,9949,9951,9953,9955],{"class":580,"line":505},[578,9940,584],{"class":583},[578,9942,588],{"class":587},[578,9944,592],{"class":591},[578,9946,595],{"class":591},[578,9948,598],{"class":583},[578,9950,601],{"class":583},[578,9952,605],{"class":604},[578,9954,601],{"class":583},[578,9956,610],{"class":583},[578,9958,9960,9962,9964,9967,9969,9972,9974,9977,9979,9981,9983,9985,9987,9989],{"class":9959,"line":506},[580,614],[578,9961,618],{"class":617},[578,9963,621],{"class":583},[578,9965,9966],{"class":624}," MarchingCube",[578,9968,1638],{"class":583},[578,9970,9971],{"class":624}," MarchingCubes",[578,9973,1638],{"class":583},[578,9975,9976],{"class":624}," MarchingPlane",[578,9978,1638],{"class":583},[578,9980,1641],{"class":624},[578,9982,628],{"class":583},[578,9984,631],{"class":617},[578,9986,634],{"class":583},[578,9988,637],{"class":604},[578,9990,640],{"class":583},[578,9992,9993,9995,9997,9999,10001,10003,10005,10007],{"class":580,"line":643},[578,9994,618],{"class":617},[578,9996,621],{"class":583},[578,9998,2117],{"class":624},[578,10000,628],{"class":583},[578,10002,631],{"class":617},[578,10004,634],{"class":583},[578,10006,2106],{"class":604},[578,10008,640],{"class":583},[578,10010,10011,10013,10015,10018,10020,10023,10025,10027,10029,10031],{"class":580,"line":649},[578,10012,618],{"class":617},[578,10014,621],{"class":583},[578,10016,10017],{"class":624}," NoToneMapping",[578,10019,1638],{"class":583},[578,10021,10022],{"class":624}," Vector3",[578,10024,628],{"class":583},[578,10026,631],{"class":617},[578,10028,634],{"class":583},[578,10030,4860],{"class":604},[578,10032,640],{"class":583},[578,10034,10035],{"class":580,"line":678},[578,10036,646],{"emptyLinePlaceholder":512},[578,10038,10039,10041,10044,10046,10048,10050,10053,10055,10057,10059,10062,10065,10067,10069],{"class":580,"line":688},[578,10040,652],{"class":591},[578,10042,10043],{"class":624}," rand ",[578,10045,598],{"class":583},[578,10047,7234],{"class":583},[578,10049,7072],{"class":591},[578,10051,10052],{"class":624}," (Math",[578,10054,824],{"class":583},[578,10056,7174],{"class":660},[578,10058,7177],{"class":624},[578,10060,10061],{"class":583},"-",[578,10063,10064],{"class":2317}," 0.5",[578,10066,2278],{"class":624},[578,10068,7180],{"class":583},[578,10070,10071],{"class":2317}," 1.25\n",[578,10073,10074,10076,10079,10081,10084,10086,10089,10091,10093,10096,10098,10101,10104,10106,10108,10111,10113,10115,10118,10121,10123,10126,10128,10130,10132],{"class":580,"line":693},[578,10075,652],{"class":591},[578,10077,10078],{"class":624}," positions ",[578,10080,598],{"class":583},[578,10082,10083],{"class":624}," Array",[578,10085,824],{"class":583},[578,10087,10088],{"class":660},"from",[578,10090,664],{"class":624},[578,10092,2281],{"class":583},[578,10094,10095],{"class":587}," length",[578,10097,2247],{"class":583},[578,10099,10100],{"class":2317}," 40",[578,10102,10103],{"class":583}," },",[578,10105,7234],{"class":583},[578,10107,7072],{"class":591},[578,10109,10110],{"class":583}," new",[578,10112,10022],{"class":660},[578,10114,664],{"class":624},[578,10116,10117],{"class":660},"rand",[578,10119,10120],{"class":624},"()",[578,10122,1638],{"class":583},[578,10124,10125],{"class":660}," rand",[578,10127,10120],{"class":624},[578,10129,1638],{"class":583},[578,10131,10125],{"class":660},[578,10133,10134],{"class":624},"()))\n",[578,10136,10137,10139,10141],{"class":580,"line":703},[578,10138,681],{"class":583},[578,10140,588],{"class":587},[578,10142,610],{"class":583},[578,10144,10145],{"class":580,"line":714},[578,10146,646],{"emptyLinePlaceholder":512},[578,10148,10149,10151,10153],{"class":580,"line":569},[578,10150,584],{"class":583},[578,10152,698],{"class":587},[578,10154,610],{"class":583},[578,10156,10157,10159,10161,10163,10165,10167,10170,10172,10175,10177,10179,10182,10184],{"class":580,"line":570},[578,10158,706],{"class":583},[578,10160,709],{"class":587},[578,10162,3709],{"class":591},[578,10164,598],{"class":583},[578,10166,601],{"class":583},[578,10168,10169],{"class":604},"#222",[578,10171,601],{"class":583},[578,10173,10174],{"class":591}," :tone-mapping",[578,10176,598],{"class":583},[578,10178,601],{"class":583},[578,10180,10181],{"class":604},"NoToneMapping",[578,10183,601],{"class":583},[578,10185,610],{"class":583},[578,10187,10188,10190,10192],{"class":580,"line":571},[578,10189,717],{"class":583},[578,10191,1686],{"class":587},[578,10193,1701],{"class":583},[578,10195,10196,10198,10200],{"class":580,"line":572},[578,10197,717],{"class":583},[578,10199,1708],{"class":587},[578,10201,1701],{"class":583},[578,10203,10204],{"class":580,"line":573},[578,10205,646],{"emptyLinePlaceholder":512},[578,10207,10209,10211,10213,10215,10217,10219,10222,10224,10227,10229,10231,10234,10236],{"class":10208,"line":786},[580,614],[578,10210,717],{"class":583},[578,10212,441],{"class":587},[578,10214,1724],{"class":591},[578,10216,598],{"class":583},[578,10218,601],{"class":583},[578,10220,10221],{"class":604},"40",[578,10223,601],{"class":583},[578,10225,10226],{"class":591}," :max-poly-count",[578,10228,598],{"class":583},[578,10230,601],{"class":583},[578,10232,10233],{"class":604},"40000",[578,10235,601],{"class":583},[578,10237,610],{"class":583},[578,10239,10241,10243,10246,10249,10251,10253,10255,10257],{"class":10240,"line":796},[580,614],[578,10242,728],{"class":583},[578,10244,10245],{"class":587},"MarchingPlane",[578,10247,10248],{"class":591}," plane-type",[578,10250,598],{"class":583},[578,10252,601],{"class":583},[578,10254,2335],{"class":604},[578,10256,601],{"class":583},[578,10258,1701],{"class":583},[578,10260,10262,10264],{"class":10261,"line":806},[580,614],[578,10263,728],{"class":583},[578,10265,10266],{"class":587},"MarchingCube\n",[578,10268,10270,10272,10274,10276,10279],{"class":10269,"line":1856},[580,614],[578,10271,5373],{"class":591},[578,10273,598],{"class":583},[578,10275,601],{"class":583},[578,10277,10278],{"class":604},"position, i of positions",[578,10280,747],{"class":583},[578,10282,10284,10286,10288,10290,10293],{"class":10283,"line":1877},[580,614],[578,10285,5388],{"class":591},[578,10287,598],{"class":583},[578,10289,601],{"class":583},[578,10291,10292],{"class":604},"i",[578,10294,747],{"class":583},[578,10296,10298,10300,10302,10304,10307],{"class":10297,"line":1886},[580,614],[578,10299,3822],{"class":591},[578,10301,598],{"class":583},[578,10303,601],{"class":583},[578,10305,10306],{"class":604},"position",[578,10308,747],{"class":583},[578,10310,10312],{"class":10311,"line":2431},[580,614],[578,10313,783],{"class":583},[578,10315,10317,10319,10322,10325,10327,10329,10332,10334,10337,10339,10341,10343,10345,10348,10350,10352,10355,10357,10360,10362,10364,10366,10368],{"class":10316,"line":2436},[580,614],[578,10318,728],{"class":583},[578,10320,10321],{"class":587},"TresMeshPhongMaterial",[578,10323,10324],{"class":591}," specular",[578,10326,598],{"class":583},[578,10328,601],{"class":583},[578,10330,10331],{"class":604},"#111111",[578,10333,601],{"class":583},[578,10335,10336],{"class":591}," :shininess",[578,10338,598],{"class":583},[578,10340,601],{"class":583},[578,10342,1088],{"class":604},[578,10344,601],{"class":583},[578,10346,10347],{"class":591}," color",[578,10349,598],{"class":583},[578,10351,601],{"class":583},[578,10353,10354],{"class":604},"#049ef4",[578,10356,601],{"class":583},[578,10358,10359],{"class":591}," :reflectivity",[578,10361,598],{"class":583},[578,10363,601],{"class":583},[578,10365,1795],{"class":604},[578,10367,601],{"class":583},[578,10369,1701],{"class":583},[578,10371,10373,10375,10377],{"class":10372,"line":2036},[580,614],[578,10374,789],{"class":583},[578,10376,441],{"class":587},[578,10378,610],{"class":583},[578,10380,10381],{"class":580,"line":2037},[578,10382,646],{"emptyLinePlaceholder":512},[578,10384,10385,10387,10390],{"class":580,"line":2038},[578,10386,717],{"class":583},[578,10388,10389],{"class":587},"TresAxesHelper",[578,10391,1701],{"class":583},[578,10393,10394,10396,10398,10400,10402,10404,10407,10409,10411,10413,10415,10417,10419,10421,10423,10425,10428,10430],{"class":580,"line":2039},[578,10395,717],{"class":583},[578,10397,1861],{"class":587},[578,10399,10347],{"class":591},[578,10401,598],{"class":583},[578,10403,601],{"class":583},[578,10405,10406],{"class":604},"#ffffff",[578,10408,601],{"class":583},[578,10410,1842],{"class":591},[578,10412,598],{"class":583},[578,10414,601],{"class":583},[578,10416,5410],{"class":604},[578,10418,601],{"class":583},[578,10420,1689],{"class":591},[578,10422,598],{"class":583},[578,10424,601],{"class":583},[578,10426,10427],{"class":604},"[0, 200, 0]",[578,10429,601],{"class":583},[578,10431,1701],{"class":583},[578,10433,10434,10436,10438,10440,10442,10444,10446,10448,10450,10452,10454,10456,10458,10460,10462,10464,10467,10469],{"class":580,"line":2509},[578,10435,717],{"class":583},[578,10437,1861],{"class":587},[578,10439,10347],{"class":591},[578,10441,598],{"class":583},[578,10443,601],{"class":583},[578,10445,10406],{"class":604},[578,10447,601],{"class":583},[578,10449,1842],{"class":591},[578,10451,598],{"class":583},[578,10453,601],{"class":583},[578,10455,5410],{"class":604},[578,10457,601],{"class":583},[578,10459,1689],{"class":591},[578,10461,598],{"class":583},[578,10463,601],{"class":583},[578,10465,10466],{"class":604},"[100, 200, 100]",[578,10468,601],{"class":583},[578,10470,1701],{"class":583},[578,10472,10473,10475,10477],{"class":580,"line":2515},[578,10474,799],{"class":583},[578,10476,709],{"class":587},[578,10478,610],{"class":583},[578,10480,10481,10483,10485],{"class":580,"line":2524},[578,10482,681],{"class":583},[578,10484,698],{"class":587},[578,10486,610],{"class":583},[560,10488,936],{"id":935},[938,10490,10491,10501],{},[941,10492,10493],{},[944,10494,10495,10497,10499],{},[947,10496,1903],{"align":949},[947,10498,953],{"align":949},[947,10500,956],{},[958,10502,10503,10517,10532,10546],{},[944,10504,10505,10509,10512],{},[963,10506,10507],{"align":949},[534,10508,1936],{},[963,10510,10511],{"align":949},"Resolution of the marching cube field. Higher resolution produces smoother meshes at the cost of performance and memory.",[963,10513,10514],{},[534,10515,10516],{},"28",[944,10518,10519,10524,10527],{},[963,10520,10521],{"align":949},[534,10522,10523],{},"maxPolyCount",[963,10525,10526],{"align":949},"Maximum number of polygons to generate.",[963,10528,10529],{},[534,10530,10531],{},"10000",[944,10533,10534,10539,10542],{},[963,10535,10536],{"align":949},[534,10537,10538],{},"enableUvs",[963,10540,10541],{"align":949},"Whether UVs are enabled.",[963,10543,10544],{},[534,10545,1144],{},[944,10547,10548,10553,10556],{},[963,10549,10550],{"align":949},[534,10551,10552],{},"enableColors",[963,10554,10555],{"align":949},"Whether vertex colors are enabled.",[963,10557,10558],{},[534,10559,1144],{},[560,10561,10563],{"id":10562},"marchingcube-props","MarchingCube Props",[938,10565,10566,10576],{},[941,10567,10568],{},[944,10569,10570,10572,10574],{},[947,10571,1903],{"align":949},[947,10573,953],{"align":949},[947,10575,956],{},[958,10577,10578,10592],{},[944,10579,10580,10585,10588],{},[963,10581,10582],{"align":949},[534,10583,10584],{},"strength",[963,10586,10587],{"align":949},"How strongly this cube affects the marching cube field.",[963,10589,10590],{},[534,10591,1849],{},[944,10593,10594,10599,10605],{},[963,10595,10596],{"align":949},[534,10597,10598],{},"subtract",[963,10600,10601,10602,10604],{"align":949},"How quickly strength moves to ",[534,10603,1129],{}," over distance.",[963,10606,10607],{},[534,10608,10609],{},"12",[560,10611,10613],{"id":10612},"marchingplane-props","MarchingPlane Props",[938,10615,10616,10626],{},[941,10617,10618],{},[944,10619,10620,10622,10624],{},[947,10621,1903],{"align":949},[947,10623,953],{"align":949},[947,10625,956],{},[958,10627,10628,10646,10659],{},[944,10629,10630,10635,10641],{},[963,10631,10632],{"align":949},[534,10633,10634],{},"planeType",[963,10636,10637,10638],{"align":949},"Which axis the plane appears on. ",[534,10639,10640],{},"'x' | 'y' | 'z'",[963,10642,10643],{},[534,10644,10645],{},"'x'",[944,10647,10648,10652,10655],{},[963,10649,10650],{"align":949},[534,10651,10584],{},[963,10653,10654],{"align":949},"How strongly this plane affects the marching cube field.",[963,10656,10657],{},[534,10658,1849],{},[944,10660,10661,10665,10669],{},[963,10662,10663],{"align":949},[534,10664,10598],{},[963,10666,10601,10667,10604],{"align":949},[534,10668,1129],{},[963,10670,10671],{},[534,10672,10609],{},[1550,10674,10675],{},"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":504,"searchDepth":505,"depth":506,"links":10677},[10678,10679,10680,10681],{"id":562,"depth":506,"text":15},{"id":935,"depth":506,"text":936},{"id":10562,"depth":506,"text":10563},{"id":10612,"depth":506,"text":10613},"Create organic blob-like shapes using metaballs.",{},{"title":441,"description":10682},"2fMta733jb31sfafa23DwIMPzUQ2f_phq7gswFmuiTw",{"id":10687,"title":445,"body":10688,"description":11985,"extension":509,"links":510,"meta":11986,"navigation":512,"path":446,"seo":11987,"stem":447,"__hash__":11988},"docs/2.api/9.objects/reflector.md",{"type":493,"value":10689,"toc":11978},[10690,10695,10710,10712,10933,10935,11023,11031,11035,11048,11656,11659,11662,11666,11975],[526,10691,10692],{},[10693,10694],"objects-reflector",{},[496,10696,1367,10697,10700,10701,10706,10707,10709],{},[534,10698,10699],{},"cientos"," package provides an abstraction of the ",[539,10702,10705],{"href":10703,"rel":10704},"https://github.com/mrdoob/three.js/blob/dev/examples/jsm/objects/Reflector.js",[543],"Reflector class",", which creates a Mesh showing a real-time reflection of your scene. This Mesh extends from ",[534,10708,4452],{}," so all the default props can be passed as well:",[560,10711,15],{"id":562},[564,10713,10715],{"className":566,"code":10714,"language":574,"meta":504,"style":504},"\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",[534,10716,10717,10737,10756,10764,10768,10776,10790,10809,10817,10821,10829,10836,10850,10864,10878,10882,10901,10909,10917,10925],{"__ignoreMap":504},[578,10718,10719,10721,10723,10725,10727,10729,10731,10733,10735],{"class":580,"line":505},[578,10720,584],{"class":583},[578,10722,588],{"class":587},[578,10724,592],{"class":591},[578,10726,595],{"class":591},[578,10728,598],{"class":583},[578,10730,601],{"class":583},[578,10732,605],{"class":604},[578,10734,601],{"class":583},[578,10736,610],{"class":583},[578,10738,10739,10741,10743,10746,10748,10750,10752,10754],{"class":580,"line":506},[578,10740,618],{"class":617},[578,10742,621],{"class":583},[578,10744,10745],{"class":624}," Reflector",[578,10747,628],{"class":583},[578,10749,631],{"class":617},[578,10751,634],{"class":583},[578,10753,637],{"class":604},[578,10755,640],{"class":583},[578,10757,10758,10760,10762],{"class":580,"line":643},[578,10759,681],{"class":583},[578,10761,588],{"class":587},[578,10763,610],{"class":583},[578,10765,10766],{"class":580,"line":649},[578,10767,646],{"emptyLinePlaceholder":512},[578,10769,10770,10772,10774],{"class":580,"line":678},[578,10771,584],{"class":583},[578,10773,698],{"class":587},[578,10775,610],{"class":583},[578,10777,10778,10780,10782,10785,10788],{"class":580,"line":688},[578,10779,706],{"class":583},[578,10781,709],{"class":587},[578,10783,10784],{"class":591}," shadows",[578,10786,10787],{"class":591}," alpha",[578,10789,610],{"class":583},[578,10791,10792,10794,10796,10798,10800,10802,10805,10807],{"class":580,"line":693},[578,10793,717],{"class":583},[578,10795,1686],{"class":587},[578,10797,1689],{"class":591},[578,10799,598],{"class":583},[578,10801,601],{"class":583},[578,10803,10804],{"class":604},"[0, 0, 3]",[578,10806,601],{"class":583},[578,10808,1701],{"class":583},[578,10810,10811,10813,10815],{"class":580,"line":703},[578,10812,717],{"class":583},[578,10814,1708],{"class":587},[578,10816,1701],{"class":583},[578,10818,10819],{"class":580,"line":714},[578,10820,646],{"emptyLinePlaceholder":512},[578,10822,10823,10825,10827],{"class":580,"line":569},[578,10824,717],{"class":583},[578,10826,720],{"class":587},[578,10828,610],{"class":583},[578,10830,10831,10833],{"class":580,"line":570},[578,10832,728],{"class":583},[578,10834,10835],{"class":587},"Reflector\n",[578,10837,10838,10841,10843,10845,10848],{"class":580,"line":571},[578,10839,10840],{"class":591}," :rotation",[578,10842,598],{"class":583},[578,10844,601],{"class":583},[578,10846,10847],{"class":604},"[-Math.PI * 0.5, 0, 0]",[578,10849,747],{"class":583},[578,10851,10852,10855,10857,10859,10862],{"class":580,"line":572},[578,10853,10854],{"class":591}," :position-y",[578,10856,598],{"class":583},[578,10858,601],{"class":583},[578,10860,10861],{"class":604},"-2",[578,10863,747],{"class":583},[578,10865,10866,10869,10871,10873,10876],{"class":580,"line":573},[578,10867,10868],{"class":591}," color",[578,10870,598],{"class":583},[578,10872,601],{"class":583},[578,10874,10875],{"class":604},"#fff",[578,10877,747],{"class":583},[578,10879,10880],{"class":580,"line":786},[578,10881,3851],{"class":583},[578,10883,10884,10886,10889,10891,10893,10895,10897,10899],{"class":580,"line":796},[578,10885,1761],{"class":583},[578,10887,10888],{"class":587},"TresCircleGeometry",[578,10890,1767],{"class":591},[578,10892,598],{"class":583},[578,10894,601],{"class":583},[578,10896,2450],{"class":604},[578,10898,601],{"class":583},[578,10900,1701],{"class":583},[578,10902,10903,10905,10907],{"class":580,"line":806},[578,10904,1815],{"class":583},[578,10906,445],{"class":587},[578,10908,610],{"class":583},[578,10910,10911,10913,10915],{"class":580,"line":1856},[578,10912,789],{"class":583},[578,10914,720],{"class":587},[578,10916,610],{"class":583},[578,10918,10919,10921,10923],{"class":580,"line":1877},[578,10920,799],{"class":583},[578,10922,709],{"class":587},[578,10924,610],{"class":583},[578,10926,10927,10929,10931],{"class":580,"line":1886},[578,10928,681],{"class":583},[578,10930,698],{"class":587},[578,10932,610],{"class":583},[560,10934,936],{"id":935},[938,10936,10937,10947],{},[941,10938,10939],{},[944,10940,10941,10943,10945],{},[947,10942,1903],{"align":949},[947,10944,953],{"align":949},[947,10946,956],{},[958,10948,10949,10961,10974,10986,10998,11010],{},[944,10950,10951,10955,10958],{},[963,10952,10953],{"align":949},[2726,10954,9511],{},[963,10956,10957],{"align":949},"The base color that's combine with the mirror effect",[963,10959,10960],{},"'#333'",[944,10962,10963,10968,10971],{},[963,10964,10965],{"align":949},[2726,10966,10967],{},"textureWidth",[963,10969,10970],{"align":949},"the width of the texture to render on the mirror",[963,10972,10973],{},"512",[944,10975,10976,10981,10984],{},[963,10977,10978],{"align":949},[2726,10979,10980],{},"textureHeight",[963,10982,10983],{"align":949},"the height of the texture to render on the mirror",[963,10985,10973],{},[944,10987,10988,10993,10996],{},[963,10989,10990],{"align":949},[2726,10991,10992],{},"clipBias",[963,10994,10995],{"align":949},"to use the clipBias property",[963,10997,1129],{},[944,10999,11000,11005,11008],{},[963,11001,11002],{"align":949},[2726,11003,11004],{},"multisample",[963,11006,11007],{"align":949},"how many samplers will be render",[963,11009,3814],{},[944,11011,11012,11017,11020],{},[963,11013,11014],{"align":949},[2726,11015,11016],{},"shader",[963,11018,11019],{"align":949},"The texture of the smoke.",[963,11021,11022],{},"Reflector.ReflectorShader",[814,11024,11025],{},[496,11026,11027,11028,11030],{},"All the props except the ",[534,11029,9511],{},", are not reactive",[560,11032,11034],{"id":11033},"custom-mirror-effect","Custom mirror effect",[496,11036,11037,11038,6620,11041,6623,11044,11047],{},"You can provide your own shader by passing a full shader object with ",[534,11039,11040],{},"uniforms",[534,11042,11043],{},"vertexShader",[534,11045,11046],{},"fragmentShader",". The example below adds animated circular ripples emanating from the center of the surface, while preserving the color tint:",[564,11049,11051],{"className":566,"code":11050,"language":574,"meta":504,"style":504},"\u003Cscript setup lang=\"ts\">\nimport { Reflector } from '@tresjs/cientos'\nimport { useLoop } from '@tresjs/core'\nimport { shallowRef } from 'vue'\n\nconst reflectorRef = shallowRef()\n\nconst customShader = {\n uniforms: {\n color: { value: null },\n tDiffuse: { value: null },\n textureMatrix: { value: null },\n time: { value: 0 },\n },\n vertexShader: /* glsl */`\n uniform mat4 textureMatrix;\n varying vec4 vUv;\n varying vec2 vPos;\n void main() {\n vUv = textureMatrix * vec4(position, 1.0);\n vPos = position.xy;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }`,\n fragmentShader: /* glsl */`\n uniform vec3 color;\n uniform sampler2D tDiffuse;\n uniform float time;\n varying vec4 vUv;\n varying vec2 vPos;\n float blendOverlay(float base, float blend) {\n return(base \u003C 0.5 ? (2.0 * base * blend) : (1.0 - 2.0 * (1.0 - base) * (1.0 - blend)));\n }\n vec3 blendOverlay(vec3 base, vec3 blend) {\n return vec3(blendOverlay(base.r, blend.r), blendOverlay(base.g, blend.g), blendOverlay(base.b, blend.b));\n }\n void main() {\n float dist = length(vPos);\n float wave = sin(dist * 6.0 - time * 4.0) * 0.02;\n vec2 dir = dist > 0.001 ? normalize(vPos) : vec2(0.0);\n vec4 distortedUv = vUv + vec4(dir * wave, 0.0, 0.0);\n vec4 base = texture2DProj(tDiffuse, distortedUv);\n gl_FragColor = vec4(blendOverlay(base.rgb, color), 1.0);\n #include \u003Ctonemapping_fragment>\n #include \u003Ccolorspace_fragment>\n }`,\n}\n\nconst { onBeforeRender } = useLoop()\nonBeforeRender(({ elapsed }) => {\n const uniforms = reflectorRef.value?.instance?.material?.uniforms\n if (uniforms?.time) { uniforms.time.value = elapsed }\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003CReflector\n ref=\"reflectorRef\"\n :rotation=\"[-Math.PI * 0.5, 0, 0]\"\n :position-y=\"-2\"\n color=\"#fff\"\n :shader=\"customShader\"\n >\n \u003CTresCircleGeometry :args=\"[10, 10]\" />\n \u003C/Reflector>\n\u003C/template>\n",[534,11052,11053,11073,11091,11110,11128,11132,11145,11149,11160,11169,11187,11204,11221,11238,11242,11255,11260,11265,11270,11275,11280,11285,11290,11300,11311,11316,11321,11326,11330,11334,11339,11344,11349,11354,11359,11363,11367,11372,11377,11382,11387,11392,11397,11402,11407,11415,11419,11423,11440,11457,11487,11520,11526,11534,11538,11546,11552,11566,11579,11592,11604,11618,11622,11640,11648],{"__ignoreMap":504},[578,11054,11055,11057,11059,11061,11063,11065,11067,11069,11071],{"class":580,"line":505},[578,11056,584],{"class":583},[578,11058,588],{"class":587},[578,11060,592],{"class":591},[578,11062,595],{"class":591},[578,11064,598],{"class":583},[578,11066,601],{"class":583},[578,11068,605],{"class":604},[578,11070,601],{"class":583},[578,11072,610],{"class":583},[578,11074,11075,11077,11079,11081,11083,11085,11087,11089],{"class":580,"line":506},[578,11076,618],{"class":617},[578,11078,621],{"class":583},[578,11080,10745],{"class":624},[578,11082,628],{"class":583},[578,11084,631],{"class":617},[578,11086,634],{"class":583},[578,11088,637],{"class":604},[578,11090,640],{"class":583},[578,11092,11093,11095,11097,11100,11102,11104,11106,11108],{"class":580,"line":643},[578,11094,618],{"class":617},[578,11096,621],{"class":583},[578,11098,11099],{"class":624}," useLoop",[578,11101,628],{"class":583},[578,11103,631],{"class":617},[578,11105,634],{"class":583},[578,11107,2106],{"class":604},[578,11109,640],{"class":583},[578,11111,11112,11114,11116,11118,11120,11122,11124,11126],{"class":580,"line":649},[578,11113,618],{"class":617},[578,11115,621],{"class":583},[578,11117,2136],{"class":624},[578,11119,628],{"class":583},[578,11121,631],{"class":617},[578,11123,634],{"class":583},[578,11125,574],{"class":604},[578,11127,640],{"class":583},[578,11129,11130],{"class":580,"line":678},[578,11131,646],{"emptyLinePlaceholder":512},[578,11133,11134,11136,11139,11141,11143],{"class":580,"line":688},[578,11135,652],{"class":591},[578,11137,11138],{"class":624}," reflectorRef ",[578,11140,598],{"class":583},[578,11142,2136],{"class":660},[578,11144,6824],{"class":624},[578,11146,11147],{"class":580,"line":693},[578,11148,646],{"emptyLinePlaceholder":512},[578,11150,11151,11153,11156,11158],{"class":580,"line":703},[578,11152,652],{"class":591},[578,11154,11155],{"class":624}," customShader ",[578,11157,598],{"class":583},[578,11159,2256],{"class":583},[578,11161,11162,11165,11167],{"class":580,"line":714},[578,11163,11164],{"class":587}," uniforms",[578,11166,2247],{"class":583},[578,11168,2256],{"class":583},[578,11170,11171,11174,11176,11178,11181,11183,11185],{"class":580,"line":569},[578,11172,11173],{"class":587}," color",[578,11175,2247],{"class":583},[578,11177,621],{"class":583},[578,11179,11180],{"class":587}," value",[578,11182,2247],{"class":583},[578,11184,2181],{"class":583},[578,11186,5136],{"class":583},[578,11188,11189,11192,11194,11196,11198,11200,11202],{"class":580,"line":570},[578,11190,11191],{"class":587}," tDiffuse",[578,11193,2247],{"class":583},[578,11195,621],{"class":583},[578,11197,11180],{"class":587},[578,11199,2247],{"class":583},[578,11201,2181],{"class":583},[578,11203,5136],{"class":583},[578,11205,11206,11209,11211,11213,11215,11217,11219],{"class":580,"line":571},[578,11207,11208],{"class":587}," textureMatrix",[578,11210,2247],{"class":583},[578,11212,621],{"class":583},[578,11214,11180],{"class":587},[578,11216,2247],{"class":583},[578,11218,2181],{"class":583},[578,11220,5136],{"class":583},[578,11222,11223,11226,11228,11230,11232,11234,11236],{"class":580,"line":572},[578,11224,11225],{"class":587}," time",[578,11227,2247],{"class":583},[578,11229,621],{"class":583},[578,11231,11180],{"class":587},[578,11233,2247],{"class":583},[578,11235,6762],{"class":2317},[578,11237,5136],{"class":583},[578,11239,11240],{"class":580,"line":573},[578,11241,2984],{"class":583},[578,11243,11244,11247,11249,11252],{"class":580,"line":786},[578,11245,11246],{"class":587}," vertexShader",[578,11248,2247],{"class":583},[578,11250,11251],{"class":9814}," /* glsl */",[578,11253,11254],{"class":583},"`\n",[578,11256,11257],{"class":580,"line":796},[578,11258,11259],{"class":604}," uniform mat4 textureMatrix;\n",[578,11261,11262],{"class":580,"line":806},[578,11263,11264],{"class":604}," varying vec4 vUv;\n",[578,11266,11267],{"class":580,"line":1856},[578,11268,11269],{"class":604}," varying vec2 vPos;\n",[578,11271,11272],{"class":580,"line":1877},[578,11273,11274],{"class":604}," void main() {\n",[578,11276,11277],{"class":580,"line":1886},[578,11278,11279],{"class":604}," vUv = textureMatrix * vec4(position, 1.0);\n",[578,11281,11282],{"class":580,"line":2431},[578,11283,11284],{"class":604}," vPos = position.xy;\n",[578,11286,11287],{"class":580,"line":2436},[578,11288,11289],{"class":604}," gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n",[578,11291,11292,11295,11298],{"class":580,"line":2036},[578,11293,11294],{"class":604}," }",[578,11296,11297],{"class":583},"`",[578,11299,2930],{"class":583},[578,11301,11302,11305,11307,11309],{"class":580,"line":2037},[578,11303,11304],{"class":587}," fragmentShader",[578,11306,2247],{"class":583},[578,11308,11251],{"class":9814},[578,11310,11254],{"class":583},[578,11312,11313],{"class":580,"line":2038},[578,11314,11315],{"class":604}," uniform vec3 color;\n",[578,11317,11318],{"class":580,"line":2039},[578,11319,11320],{"class":604}," uniform sampler2D tDiffuse;\n",[578,11322,11323],{"class":580,"line":2509},[578,11324,11325],{"class":604}," uniform float time;\n",[578,11327,11328],{"class":580,"line":2515},[578,11329,11264],{"class":604},[578,11331,11332],{"class":580,"line":2524},[578,11333,11269],{"class":604},[578,11335,11336],{"class":580,"line":2545},[578,11337,11338],{"class":604}," float blendOverlay(float base, float blend) {\n",[578,11340,11341],{"class":580,"line":2550},[578,11342,11343],{"class":604}," return(base \u003C 0.5 ? (2.0 * base * blend) : (1.0 - 2.0 * (1.0 - base) * (1.0 - blend)));\n",[578,11345,11346],{"class":580,"line":2558},[578,11347,11348],{"class":604}," }\n",[578,11350,11351],{"class":580,"line":2573},[578,11352,11353],{"class":604}," vec3 blendOverlay(vec3 base, vec3 blend) {\n",[578,11355,11356],{"class":580,"line":2588},[578,11357,11358],{"class":604}," return vec3(blendOverlay(base.r, blend.r), blendOverlay(base.g, blend.g), blendOverlay(base.b, blend.b));\n",[578,11360,11361],{"class":580,"line":2593},[578,11362,11348],{"class":604},[578,11364,11365],{"class":580,"line":2602},[578,11366,11274],{"class":604},[578,11368,11369],{"class":580,"line":2607},[578,11370,11371],{"class":604}," float dist = length(vPos);\n",[578,11373,11374],{"class":580,"line":2615},[578,11375,11376],{"class":604}," float wave = sin(dist * 6.0 - time * 4.0) * 0.02;\n",[578,11378,11379],{"class":580,"line":2628},[578,11380,11381],{"class":604}," vec2 dir = dist > 0.001 ? normalize(vPos) : vec2(0.0);\n",[578,11383,11384],{"class":580,"line":2643},[578,11385,11386],{"class":604}," vec4 distortedUv = vUv + vec4(dir * wave, 0.0, 0.0);\n",[578,11388,11389],{"class":580,"line":2649},[578,11390,11391],{"class":604}," vec4 base = texture2DProj(tDiffuse, distortedUv);\n",[578,11393,11394],{"class":580,"line":2670},[578,11395,11396],{"class":604}," gl_FragColor = vec4(blendOverlay(base.rgb, color), 1.0);\n",[578,11398,11399],{"class":580,"line":2680},[578,11400,11401],{"class":604}," #include \u003Ctonemapping_fragment>\n",[578,11403,11404],{"class":580,"line":2689},[578,11405,11406],{"class":604}," #include \u003Ccolorspace_fragment>\n",[578,11408,11409,11411,11413],{"class":580,"line":2698},[578,11410,11294],{"class":604},[578,11412,11297],{"class":583},[578,11414,2930],{"class":583},[578,11416,11417],{"class":580,"line":5348},[578,11418,2349],{"class":583},[578,11420,11421],{"class":580,"line":5357},[578,11422,646],{"emptyLinePlaceholder":512},[578,11424,11425,11427,11429,11432,11434,11436,11438],{"class":580,"line":5362},[578,11426,652],{"class":591},[578,11428,621],{"class":583},[578,11430,11431],{"class":624}," onBeforeRender ",[578,11433,2990],{"class":583},[578,11435,2309],{"class":583},[578,11437,11099],{"class":660},[578,11439,6824],{"class":624},[578,11441,11442,11445,11447,11449,11451,11453,11455],{"class":580,"line":5370},[578,11443,11444],{"class":660},"onBeforeRender",[578,11446,664],{"class":624},[578,11448,2233],{"class":583},[578,11450,2237],{"class":2236},[578,11452,2253],{"class":583},[578,11454,7072],{"class":591},[578,11456,2256],{"class":583},[578,11458,11459,11461,11464,11466,11469,11471,11473,11476,11478,11480,11482,11484],{"class":580,"line":5385},[578,11460,7079],{"class":591},[578,11462,11463],{"class":624}," uniforms",[578,11465,2309],{"class":583},[578,11467,11468],{"class":624}," reflectorRef",[578,11470,824],{"class":583},[578,11472,2275],{"class":624},[578,11474,11475],{"class":583},"?.",[578,11477,8765],{"class":624},[578,11479,11475],{"class":583},[578,11481,6511],{"class":624},[578,11483,11475],{"class":583},[578,11485,11486],{"class":624},"uniforms\n",[578,11488,11489,11491,11493,11495,11497,11500,11502,11504,11506,11508,11510,11512,11514,11516,11518],{"class":580,"line":5400},[578,11490,2261],{"class":617},[578,11492,2264],{"class":587},[578,11494,11040],{"class":624},[578,11496,11475],{"class":583},[578,11498,11499],{"class":624},"time",[578,11501,2278],{"class":587},[578,11503,2281],{"class":583},[578,11505,11463],{"class":624},[578,11507,824],{"class":583},[578,11509,11499],{"class":624},[578,11511,824],{"class":583},[578,11513,2275],{"class":624},[578,11515,2309],{"class":583},[578,11517,2237],{"class":624},[578,11519,2287],{"class":583},[578,11521,11522,11524],{"class":580,"line":5415},[578,11523,2990],{"class":583},[578,11525,675],{"class":624},[578,11527,11528,11530,11532],{"class":580,"line":5430},[578,11529,681],{"class":583},[578,11531,588],{"class":587},[578,11533,610],{"class":583},[578,11535,11536],{"class":580,"line":5444},[578,11537,646],{"emptyLinePlaceholder":512},[578,11539,11540,11542,11544],{"class":580,"line":5459},[578,11541,584],{"class":583},[578,11543,698],{"class":587},[578,11545,610],{"class":583},[578,11547,11548,11550],{"class":580,"line":5464},[578,11549,706],{"class":583},[578,11551,10835],{"class":587},[578,11553,11554,11557,11559,11561,11564],{"class":580,"line":5495},[578,11555,11556],{"class":591}," ref",[578,11558,598],{"class":583},[578,11560,601],{"class":583},[578,11562,11563],{"class":604},"reflectorRef",[578,11565,747],{"class":583},[578,11567,11568,11571,11573,11575,11577],{"class":580,"line":5529},[578,11569,11570],{"class":591}," :rotation",[578,11572,598],{"class":583},[578,11574,601],{"class":583},[578,11576,10847],{"class":604},[578,11578,747],{"class":583},[578,11580,11581,11584,11586,11588,11590],{"class":580,"line":5538},[578,11582,11583],{"class":591}," :position-y",[578,11585,598],{"class":583},[578,11587,601],{"class":583},[578,11589,10861],{"class":604},[578,11591,747],{"class":583},[578,11593,11594,11596,11598,11600,11602],{"class":580,"line":5548},[578,11595,11173],{"class":591},[578,11597,598],{"class":583},[578,11599,601],{"class":583},[578,11601,10875],{"class":604},[578,11603,747],{"class":583},[578,11605,11606,11609,11611,11613,11616],{"class":580,"line":5558},[578,11607,11608],{"class":591}," :shader",[578,11610,598],{"class":583},[578,11612,601],{"class":583},[578,11614,11615],{"class":604},"customShader",[578,11617,747],{"class":583},[578,11619,11620],{"class":580,"line":4708},[578,11621,4607],{"class":583},[578,11623,11624,11626,11628,11630,11632,11634,11636,11638],{"class":580,"line":4709},[578,11625,717],{"class":583},[578,11627,10888],{"class":587},[578,11629,1767],{"class":591},[578,11631,598],{"class":583},[578,11633,601],{"class":583},[578,11635,2450],{"class":604},[578,11637,601],{"class":583},[578,11639,1701],{"class":583},[578,11641,11642,11644,11646],{"class":580,"line":4710},[578,11643,799],{"class":583},[578,11645,445],{"class":587},[578,11647,610],{"class":583},[578,11649,11650,11652,11654],{"class":580,"line":4711},[578,11651,681],{"class":583},[578,11653,698],{"class":587},[578,11655,610],{"class":583},[496,11657,11658],{},"The Reflector shader use the following configuration by default:",[496,11660,11661],{},"You can extend, modify or just play with them",[902,11663,11665],{"id":11664},"default-shader","Default shader",[564,11667,11671],{"className":11668,"code":11669,"language":11670,"meta":504,"style":504},"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",[534,11672,11673,11684,11700,11708,11716,11726,11731,11739,11747,11751,11759,11767,11771,11775,11785,11790,11795,11799,11804,11809,11813,11818,11823,11828,11832,11837,11841,11850,11860,11865,11870,11874,11878,11883,11887,11892,11897,11902,11906,11911,11916,11920,11924,11928,11933,11937,11942,11947,11951,11956,11961,11967,11971],{"__ignoreMap":504},[578,11674,11675,11677,11680,11682],{"class":580,"line":505},[578,11676,652],{"class":591},[578,11678,11679],{"class":624}," shader ",[578,11681,598],{"class":583},[578,11683,2256],{"class":583},[578,11685,11686,11689,11691,11693,11696,11698],{"class":580,"line":506},[578,11687,11688],{"class":587}," name",[578,11690,2247],{"class":583},[578,11692,634],{"class":583},[578,11694,11695],{"class":604},"ReflectorShader",[578,11697,667],{"class":583},[578,11699,2930],{"class":583},[578,11701,11702,11704,11706],{"class":580,"line":643},[578,11703,11164],{"class":587},[578,11705,2247],{"class":583},[578,11707,2256],{"class":583},[578,11709,11710,11712,11714],{"class":580,"line":649},[578,11711,11173],{"class":587},[578,11713,2247],{"class":583},[578,11715,2256],{"class":583},[578,11717,11718,11721,11723],{"class":580,"line":678},[578,11719,11720],{"class":587}," value",[578,11722,2247],{"class":583},[578,11724,11725],{"class":583}," null\n",[578,11727,11728],{"class":580,"line":688},[578,11729,11730],{"class":583}," },\n",[578,11732,11733,11735,11737],{"class":580,"line":693},[578,11734,11191],{"class":587},[578,11736,2247],{"class":583},[578,11738,2256],{"class":583},[578,11740,11741,11743,11745],{"class":580,"line":703},[578,11742,11720],{"class":587},[578,11744,2247],{"class":583},[578,11746,11725],{"class":583},[578,11748,11749],{"class":580,"line":714},[578,11750,11730],{"class":583},[578,11752,11753,11755,11757],{"class":580,"line":569},[578,11754,11208],{"class":587},[578,11756,2247],{"class":583},[578,11758,2256],{"class":583},[578,11760,11761,11763,11765],{"class":580,"line":570},[578,11762,11720],{"class":587},[578,11764,2247],{"class":583},[578,11766,11725],{"class":583},[578,11768,11769],{"class":580,"line":571},[578,11770,11348],{"class":583},[578,11772,11773],{"class":580,"line":572},[578,11774,2984],{"class":583},[578,11776,11777,11779,11781,11783],{"class":580,"line":573},[578,11778,11246],{"class":587},[578,11780,2247],{"class":583},[578,11782,11251],{"class":9814},[578,11784,11254],{"class":583},[578,11786,11787],{"class":580,"line":786},[578,11788,11789],{"class":604}," uniform mat4 textureMatrix;\n",[578,11791,11792],{"class":580,"line":796},[578,11793,11794],{"class":604}," varying vec4 vUv;\n",[578,11796,11797],{"class":580,"line":806},[578,11798,646],{"emptyLinePlaceholder":512},[578,11800,11801],{"class":580,"line":1856},[578,11802,11803],{"class":604}," #include \u003Ccommon>\n",[578,11805,11806],{"class":580,"line":1877},[578,11807,11808],{"class":604}," #include \u003Clogdepthbuf_pars_vertex>\n",[578,11810,11811],{"class":580,"line":1886},[578,11812,646],{"emptyLinePlaceholder":512},[578,11814,11815],{"class":580,"line":2431},[578,11816,11817],{"class":604}," void main() {\n",[578,11819,11820],{"class":580,"line":2436},[578,11821,11822],{"class":604}," vUv = textureMatrix * vec4( position, 1.0 );\n",[578,11824,11825],{"class":580,"line":2036},[578,11826,11827],{"class":604}," gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n",[578,11829,11830],{"class":580,"line":2037},[578,11831,646],{"emptyLinePlaceholder":512},[578,11833,11834],{"class":580,"line":2038},[578,11835,11836],{"class":604}," #include \u003Clogdepthbuf_vertex>\n",[578,11838,11839],{"class":580,"line":2039},[578,11840,646],{"emptyLinePlaceholder":512},[578,11842,11843,11846,11848],{"class":580,"line":2509},[578,11844,11845],{"class":604}," }",[578,11847,11297],{"class":583},[578,11849,2930],{"class":583},[578,11851,11852,11854,11856,11858],{"class":580,"line":2515},[578,11853,11304],{"class":587},[578,11855,2247],{"class":583},[578,11857,11251],{"class":9814},[578,11859,11254],{"class":583},[578,11861,11862],{"class":580,"line":2524},[578,11863,11864],{"class":604}," uniform vec3 color;\n",[578,11866,11867],{"class":580,"line":2545},[578,11868,11869],{"class":604}," uniform sampler2D tDiffuse;\n",[578,11871,11872],{"class":580,"line":2550},[578,11873,11794],{"class":604},[578,11875,11876],{"class":580,"line":2558},[578,11877,646],{"emptyLinePlaceholder":512},[578,11879,11880],{"class":580,"line":2573},[578,11881,11882],{"class":604}," #include \u003Clogdepthbuf_pars_fragment>\n",[578,11884,11885],{"class":580,"line":2588},[578,11886,646],{"emptyLinePlaceholder":512},[578,11888,11889],{"class":580,"line":2593},[578,11890,11891],{"class":604}," float blendOverlay( float base, float blend ) {\n",[578,11893,11894],{"class":580,"line":2602},[578,11895,11896],{"class":604}," return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n",[578,11898,11899],{"class":580,"line":2607},[578,11900,11901],{"class":604}," }\n",[578,11903,11904],{"class":580,"line":2615},[578,11905,646],{"emptyLinePlaceholder":512},[578,11907,11908],{"class":580,"line":2628},[578,11909,11910],{"class":604}," vec3 blendOverlay( vec3 base, vec3 blend ) {\n",[578,11912,11913],{"class":580,"line":2643},[578,11914,11915],{"class":604}," return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n",[578,11917,11918],{"class":580,"line":2649},[578,11919,11901],{"class":604},[578,11921,11922],{"class":580,"line":2670},[578,11923,646],{"emptyLinePlaceholder":512},[578,11925,11926],{"class":580,"line":2680},[578,11927,11817],{"class":604},[578,11929,11930],{"class":580,"line":2689},[578,11931,11932],{"class":604}," #include \u003Clogdepthbuf_fragment>\n",[578,11934,11935],{"class":580,"line":2698},[578,11936,646],{"emptyLinePlaceholder":512},[578,11938,11939],{"class":580,"line":5348},[578,11940,11941],{"class":604}," vec4 base = texture2DProj( tDiffuse, vUv );\n",[578,11943,11944],{"class":580,"line":5357},[578,11945,11946],{"class":604}," gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n",[578,11948,11949],{"class":580,"line":5362},[578,11950,646],{"emptyLinePlaceholder":512},[578,11952,11953],{"class":580,"line":5370},[578,11954,11955],{"class":604}," #include \u003Ctonemapping_fragment>\n",[578,11957,11958],{"class":580,"line":5385},[578,11959,11960],{"class":604}," #include \u003Ccolorspace_fragment>\n",[578,11962,11963,11965],{"class":580,"line":5400},[578,11964,11845],{"class":604},[578,11966,11254],{"class":583},[578,11968,11969],{"class":580,"line":5415},[578,11970,646],{"emptyLinePlaceholder":512},[578,11972,11973],{"class":580,"line":5430},[578,11974,2349],{"class":583},[1550,11976,11977],{},"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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":504,"searchDepth":505,"depth":506,"links":11979},[11980,11981,11982],{"id":562,"depth":506,"text":15},{"id":935,"depth":506,"text":936},{"id":11033,"depth":506,"text":11034,"children":11983},[11984],{"id":11664,"depth":643,"text":11665},"Create real-time reflections of your scene.",{},{"title":445,"description":11985},"NJEaFmV8_JnwGN0OZhU-3XOYAdVvh14PeqjaOc-DkDE",{"id":11990,"title":449,"body":11991,"description":13159,"extension":509,"links":510,"meta":13160,"navigation":512,"path":450,"seo":13161,"stem":451,"__hash__":13162},"docs/2.api/9.objects/refractor.md",{"type":493,"value":11992,"toc":13152},[11993,11998,12011,12013,12262,12264,12358,12366,12370,12378,12915,12918,12920,13149],[526,11994,11995],{},[11996,11997],"objects-refractor",{},[496,11999,1367,12000,10700,12002,12007,12008,12010],{},[534,12001,10699],{},[539,12003,12006],{"href":12004,"rel":12005},"https://github.com/mrdoob/three.js/blob/dev/examples/jsm/objects/Refractor.js",[543],"Refractor class",", which creates a Mesh that renders what is behind it with a refractive distortion effect — useful for glass panels, water surfaces, and other transmissive materials. This Mesh extends from ",[534,12009,4452],{}," so all the default props can be passed as well.",[560,12012,15],{"id":562},[564,12014,12016],{"className":566,"code":12015,"language":574,"meta":504,"style":504},"\u003Cscript setup lang=\"ts\">\nimport { Refractor } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas shadows alpha>\n \u003CTresPerspectiveCamera :position=\"[0, 2, 8]\" />\n \u003COrbitControls />\n\n \u003C!-- Place objects behind the refracting plane -->\n \u003CTresMesh :position=\"[-2, 0, -2]\">\n \u003CTresTorusKnotGeometry />\n \u003CTresMeshStandardMaterial color=\"hotpink\" />\n \u003C/TresMesh>\n\n \u003CSuspense>\n \u003CRefractor color=\"#9ec8d4\">\n \u003CTresPlaneGeometry :args=\"[8, 5]\" />\n \u003C/Refractor>\n \u003C/Suspense>\n \u003C/TresCanvas>\n\u003C/template>\n",[534,12017,12018,12038,12057,12065,12069,12077,12089,12108,12116,12120,12125,12144,12153,12172,12180,12184,12192,12211,12230,12238,12246,12254],{"__ignoreMap":504},[578,12019,12020,12022,12024,12026,12028,12030,12032,12034,12036],{"class":580,"line":505},[578,12021,584],{"class":583},[578,12023,588],{"class":587},[578,12025,592],{"class":591},[578,12027,595],{"class":591},[578,12029,598],{"class":583},[578,12031,601],{"class":583},[578,12033,605],{"class":604},[578,12035,601],{"class":583},[578,12037,610],{"class":583},[578,12039,12040,12042,12044,12047,12049,12051,12053,12055],{"class":580,"line":506},[578,12041,618],{"class":617},[578,12043,621],{"class":583},[578,12045,12046],{"class":624}," Refractor",[578,12048,628],{"class":583},[578,12050,631],{"class":617},[578,12052,634],{"class":583},[578,12054,637],{"class":604},[578,12056,640],{"class":583},[578,12058,12059,12061,12063],{"class":580,"line":643},[578,12060,681],{"class":583},[578,12062,588],{"class":587},[578,12064,610],{"class":583},[578,12066,12067],{"class":580,"line":649},[578,12068,646],{"emptyLinePlaceholder":512},[578,12070,12071,12073,12075],{"class":580,"line":678},[578,12072,584],{"class":583},[578,12074,698],{"class":587},[578,12076,610],{"class":583},[578,12078,12079,12081,12083,12085,12087],{"class":580,"line":688},[578,12080,706],{"class":583},[578,12082,709],{"class":587},[578,12084,10784],{"class":591},[578,12086,10787],{"class":591},[578,12088,610],{"class":583},[578,12090,12091,12093,12095,12097,12099,12101,12104,12106],{"class":580,"line":693},[578,12092,717],{"class":583},[578,12094,1686],{"class":587},[578,12096,1689],{"class":591},[578,12098,598],{"class":583},[578,12100,601],{"class":583},[578,12102,12103],{"class":604},"[0, 2, 8]",[578,12105,601],{"class":583},[578,12107,1701],{"class":583},[578,12109,12110,12112,12114],{"class":580,"line":703},[578,12111,717],{"class":583},[578,12113,1708],{"class":587},[578,12115,1701],{"class":583},[578,12117,12118],{"class":580,"line":714},[578,12119,646],{"emptyLinePlaceholder":512},[578,12121,12122],{"class":580,"line":569},[578,12123,12124],{"class":9814}," \u003C!-- Place objects behind the refracting plane -->\n",[578,12126,12127,12129,12131,12133,12135,12137,12140,12142],{"class":580,"line":570},[578,12128,717],{"class":583},[578,12130,1754],{"class":587},[578,12132,1689],{"class":591},[578,12134,598],{"class":583},[578,12136,601],{"class":583},[578,12138,12139],{"class":604},"[-2, 0, -2]",[578,12141,601],{"class":583},[578,12143,610],{"class":583},[578,12145,12146,12148,12151],{"class":580,"line":571},[578,12147,728],{"class":583},[578,12149,12150],{"class":587},"TresTorusKnotGeometry",[578,12152,1701],{"class":583},[578,12154,12155,12157,12159,12161,12163,12165,12168,12170],{"class":580,"line":572},[578,12156,728],{"class":583},[578,12158,1785],{"class":587},[578,12160,10347],{"class":591},[578,12162,598],{"class":583},[578,12164,601],{"class":583},[578,12166,12167],{"class":604},"hotpink",[578,12169,601],{"class":583},[578,12171,1701],{"class":583},[578,12173,12174,12176,12178],{"class":580,"line":573},[578,12175,789],{"class":583},[578,12177,1754],{"class":587},[578,12179,610],{"class":583},[578,12181,12182],{"class":580,"line":786},[578,12183,646],{"emptyLinePlaceholder":512},[578,12185,12186,12188,12190],{"class":580,"line":796},[578,12187,717],{"class":583},[578,12189,720],{"class":587},[578,12191,610],{"class":583},[578,12193,12194,12196,12198,12200,12202,12204,12207,12209],{"class":580,"line":806},[578,12195,728],{"class":583},[578,12197,449],{"class":587},[578,12199,10347],{"class":591},[578,12201,598],{"class":583},[578,12203,601],{"class":583},[578,12205,12206],{"class":604},"#9ec8d4",[578,12208,601],{"class":583},[578,12210,610],{"class":583},[578,12212,12213,12215,12217,12219,12221,12223,12226,12228],{"class":580,"line":1856},[578,12214,1761],{"class":583},[578,12216,3330],{"class":587},[578,12218,1767],{"class":591},[578,12220,598],{"class":583},[578,12222,601],{"class":583},[578,12224,12225],{"class":604},"[8, 5]",[578,12227,601],{"class":583},[578,12229,1701],{"class":583},[578,12231,12232,12234,12236],{"class":580,"line":1877},[578,12233,1815],{"class":583},[578,12235,449],{"class":587},[578,12237,610],{"class":583},[578,12239,12240,12242,12244],{"class":580,"line":1886},[578,12241,789],{"class":583},[578,12243,720],{"class":587},[578,12245,610],{"class":583},[578,12247,12248,12250,12252],{"class":580,"line":2431},[578,12249,799],{"class":583},[578,12251,709],{"class":587},[578,12253,610],{"class":583},[578,12255,12256,12258,12260],{"class":580,"line":2436},[578,12257,681],{"class":583},[578,12259,698],{"class":587},[578,12261,610],{"class":583},[560,12263,936],{"id":935},[938,12265,12266,12276],{},[941,12267,12268],{},[944,12269,12270,12272,12274],{},[947,12271,1903],{"align":949},[947,12273,953],{"align":949},[947,12275,956],{},[958,12277,12278,12292,12305,12318,12331,12344],{},[944,12279,12280,12284,12287],{},[963,12281,12282],{"align":949},[2726,12283,9511],{},[963,12285,12286],{"align":949},"Color tint blended with the refracted image",[963,12288,12289],{},[534,12290,12291],{},"'#7f7f7f'",[944,12293,12294,12298,12301],{},[963,12295,12296],{"align":949},[2726,12297,10967],{},[963,12299,12300],{"align":949},"Width of the internal render target texture",[963,12302,12303],{},[534,12304,10973],{},[944,12306,12307,12311,12314],{},[963,12308,12309],{"align":949},[2726,12310,10980],{},[963,12312,12313],{"align":949},"Height of the internal render target texture",[963,12315,12316],{},[534,12317,10973],{},[944,12319,12320,12324,12327],{},[963,12321,12322],{"align":949},[2726,12323,10992],{},[963,12325,12326],{"align":949},"Clip bias for the virtual camera projection",[963,12328,12329],{},[534,12330,1129],{},[944,12332,12333,12337,12340],{},[963,12334,12335],{"align":949},[2726,12336,11004],{},[963,12338,12339],{"align":949},"Number of MSAA samples for the render target",[963,12341,12342],{},[534,12343,3814],{},[944,12345,12346,12350,12353],{},[963,12347,12348],{"align":949},[2726,12349,11016],{},[963,12351,12352],{"align":949},"Custom shader object to override the built-in shader",[963,12354,12355],{},[534,12356,12357],{},"Refractor.RefractorShader",[814,12359,12360],{},[496,12361,12362,12363,12365],{},"All the props except ",[534,12364,9511],{}," are not reactive",[560,12367,12369],{"id":12368},"custom-refraction-effect","Custom refraction effect",[496,12371,11037,12372,6620,12374,6623,12376,11047],{},[534,12373,11040],{},[534,12375,11043],{},[534,12377,11046],{},[564,12379,12381],{"className":566,"code":12380,"language":574,"meta":504,"style":504},"\u003Cscript setup lang=\"ts\">\nimport { Refractor } from '@tresjs/cientos'\nimport { useLoop } from '@tresjs/core'\nimport { shallowRef } from 'vue'\n\nconst refractorRef = shallowRef()\n\nconst customShader = {\n uniforms: {\n color: { value: null },\n tDiffuse: { value: null },\n textureMatrix: { value: null },\n time: { value: 0 },\n },\n vertexShader: /* glsl */`\n uniform mat4 textureMatrix;\n varying vec4 vUv;\n varying vec2 vPos;\n void main() {\n vUv = textureMatrix * vec4(position, 1.0);\n vPos = position.xy;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }`,\n fragmentShader: /* glsl */`\n uniform vec3 color;\n uniform sampler2D tDiffuse;\n uniform float time;\n varying vec4 vUv;\n varying vec2 vPos;\n float blendOverlay(float base, float blend) {\n return(base \u003C 0.5 ? (2.0 * base * blend) : (1.0 - 2.0 * (1.0 - base) * (1.0 - blend)));\n }\n vec3 blendOverlay(vec3 base, vec3 blend) {\n return vec3(blendOverlay(base.r, blend.r), blendOverlay(base.g, blend.g), blendOverlay(base.b, blend.b));\n }\n void main() {\n float dist = length(vPos);\n float wave = sin(dist * 6.0 - time * 4.0) * 0.02;\n vec2 dir = dist > 0.001 ? normalize(vPos) : vec2(0.0);\n vec4 distortedUv = vUv + vec4(dir * wave, 0.0, 0.0);\n vec4 base = texture2DProj(tDiffuse, distortedUv);\n gl_FragColor = vec4(blendOverlay(base.rgb, color), 1.0);\n #include \u003Ctonemapping_fragment>\n #include \u003Ccolorspace_fragment>\n }`,\n}\n\nconst { onBeforeRender } = useLoop()\nonBeforeRender(({ elapsed }) => {\n const uniforms = refractorRef.value?.instance?.material?.uniforms\n if (uniforms?.time) { uniforms.time.value = elapsed }\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003CRefractor\n ref=\"refractorRef\"\n color=\"#9ec8d4\"\n :shader=\"customShader\"\n >\n \u003CTresPlaneGeometry :args=\"[8, 5]\" />\n \u003C/Refractor>\n\u003C/template>\n",[534,12382,12383,12403,12421,12439,12457,12461,12474,12478,12488,12496,12512,12528,12544,12560,12564,12574,12578,12582,12586,12590,12594,12598,12602,12610,12620,12624,12628,12632,12636,12640,12644,12648,12652,12656,12660,12664,12668,12672,12676,12680,12684,12688,12692,12696,12700,12708,12712,12716,12732,12748,12775,12807,12813,12821,12825,12833,12840,12853,12865,12877,12881,12899,12907],{"__ignoreMap":504},[578,12384,12385,12387,12389,12391,12393,12395,12397,12399,12401],{"class":580,"line":505},[578,12386,584],{"class":583},[578,12388,588],{"class":587},[578,12390,592],{"class":591},[578,12392,595],{"class":591},[578,12394,598],{"class":583},[578,12396,601],{"class":583},[578,12398,605],{"class":604},[578,12400,601],{"class":583},[578,12402,610],{"class":583},[578,12404,12405,12407,12409,12411,12413,12415,12417,12419],{"class":580,"line":506},[578,12406,618],{"class":617},[578,12408,621],{"class":583},[578,12410,12046],{"class":624},[578,12412,628],{"class":583},[578,12414,631],{"class":617},[578,12416,634],{"class":583},[578,12418,637],{"class":604},[578,12420,640],{"class":583},[578,12422,12423,12425,12427,12429,12431,12433,12435,12437],{"class":580,"line":643},[578,12424,618],{"class":617},[578,12426,621],{"class":583},[578,12428,11099],{"class":624},[578,12430,628],{"class":583},[578,12432,631],{"class":617},[578,12434,634],{"class":583},[578,12436,2106],{"class":604},[578,12438,640],{"class":583},[578,12440,12441,12443,12445,12447,12449,12451,12453,12455],{"class":580,"line":649},[578,12442,618],{"class":617},[578,12444,621],{"class":583},[578,12446,2136],{"class":624},[578,12448,628],{"class":583},[578,12450,631],{"class":617},[578,12452,634],{"class":583},[578,12454,574],{"class":604},[578,12456,640],{"class":583},[578,12458,12459],{"class":580,"line":678},[578,12460,646],{"emptyLinePlaceholder":512},[578,12462,12463,12465,12468,12470,12472],{"class":580,"line":688},[578,12464,652],{"class":591},[578,12466,12467],{"class":624}," refractorRef ",[578,12469,598],{"class":583},[578,12471,2136],{"class":660},[578,12473,6824],{"class":624},[578,12475,12476],{"class":580,"line":693},[578,12477,646],{"emptyLinePlaceholder":512},[578,12479,12480,12482,12484,12486],{"class":580,"line":703},[578,12481,652],{"class":591},[578,12483,11155],{"class":624},[578,12485,598],{"class":583},[578,12487,2256],{"class":583},[578,12489,12490,12492,12494],{"class":580,"line":714},[578,12491,11164],{"class":587},[578,12493,2247],{"class":583},[578,12495,2256],{"class":583},[578,12497,12498,12500,12502,12504,12506,12508,12510],{"class":580,"line":569},[578,12499,11173],{"class":587},[578,12501,2247],{"class":583},[578,12503,621],{"class":583},[578,12505,11180],{"class":587},[578,12507,2247],{"class":583},[578,12509,2181],{"class":583},[578,12511,5136],{"class":583},[578,12513,12514,12516,12518,12520,12522,12524,12526],{"class":580,"line":570},[578,12515,11191],{"class":587},[578,12517,2247],{"class":583},[578,12519,621],{"class":583},[578,12521,11180],{"class":587},[578,12523,2247],{"class":583},[578,12525,2181],{"class":583},[578,12527,5136],{"class":583},[578,12529,12530,12532,12534,12536,12538,12540,12542],{"class":580,"line":571},[578,12531,11208],{"class":587},[578,12533,2247],{"class":583},[578,12535,621],{"class":583},[578,12537,11180],{"class":587},[578,12539,2247],{"class":583},[578,12541,2181],{"class":583},[578,12543,5136],{"class":583},[578,12545,12546,12548,12550,12552,12554,12556,12558],{"class":580,"line":572},[578,12547,11225],{"class":587},[578,12549,2247],{"class":583},[578,12551,621],{"class":583},[578,12553,11180],{"class":587},[578,12555,2247],{"class":583},[578,12557,6762],{"class":2317},[578,12559,5136],{"class":583},[578,12561,12562],{"class":580,"line":573},[578,12563,2984],{"class":583},[578,12565,12566,12568,12570,12572],{"class":580,"line":786},[578,12567,11246],{"class":587},[578,12569,2247],{"class":583},[578,12571,11251],{"class":9814},[578,12573,11254],{"class":583},[578,12575,12576],{"class":580,"line":796},[578,12577,11259],{"class":604},[578,12579,12580],{"class":580,"line":806},[578,12581,11264],{"class":604},[578,12583,12584],{"class":580,"line":1856},[578,12585,11269],{"class":604},[578,12587,12588],{"class":580,"line":1877},[578,12589,11274],{"class":604},[578,12591,12592],{"class":580,"line":1886},[578,12593,11279],{"class":604},[578,12595,12596],{"class":580,"line":2431},[578,12597,11284],{"class":604},[578,12599,12600],{"class":580,"line":2436},[578,12601,11289],{"class":604},[578,12603,12604,12606,12608],{"class":580,"line":2036},[578,12605,11294],{"class":604},[578,12607,11297],{"class":583},[578,12609,2930],{"class":583},[578,12611,12612,12614,12616,12618],{"class":580,"line":2037},[578,12613,11304],{"class":587},[578,12615,2247],{"class":583},[578,12617,11251],{"class":9814},[578,12619,11254],{"class":583},[578,12621,12622],{"class":580,"line":2038},[578,12623,11315],{"class":604},[578,12625,12626],{"class":580,"line":2039},[578,12627,11320],{"class":604},[578,12629,12630],{"class":580,"line":2509},[578,12631,11325],{"class":604},[578,12633,12634],{"class":580,"line":2515},[578,12635,11264],{"class":604},[578,12637,12638],{"class":580,"line":2524},[578,12639,11269],{"class":604},[578,12641,12642],{"class":580,"line":2545},[578,12643,11338],{"class":604},[578,12645,12646],{"class":580,"line":2550},[578,12647,11343],{"class":604},[578,12649,12650],{"class":580,"line":2558},[578,12651,11348],{"class":604},[578,12653,12654],{"class":580,"line":2573},[578,12655,11353],{"class":604},[578,12657,12658],{"class":580,"line":2588},[578,12659,11358],{"class":604},[578,12661,12662],{"class":580,"line":2593},[578,12663,11348],{"class":604},[578,12665,12666],{"class":580,"line":2602},[578,12667,11274],{"class":604},[578,12669,12670],{"class":580,"line":2607},[578,12671,11371],{"class":604},[578,12673,12674],{"class":580,"line":2615},[578,12675,11376],{"class":604},[578,12677,12678],{"class":580,"line":2628},[578,12679,11381],{"class":604},[578,12681,12682],{"class":580,"line":2643},[578,12683,11386],{"class":604},[578,12685,12686],{"class":580,"line":2649},[578,12687,11391],{"class":604},[578,12689,12690],{"class":580,"line":2670},[578,12691,11396],{"class":604},[578,12693,12694],{"class":580,"line":2680},[578,12695,11401],{"class":604},[578,12697,12698],{"class":580,"line":2689},[578,12699,11406],{"class":604},[578,12701,12702,12704,12706],{"class":580,"line":2698},[578,12703,11294],{"class":604},[578,12705,11297],{"class":583},[578,12707,2930],{"class":583},[578,12709,12710],{"class":580,"line":5348},[578,12711,2349],{"class":583},[578,12713,12714],{"class":580,"line":5357},[578,12715,646],{"emptyLinePlaceholder":512},[578,12717,12718,12720,12722,12724,12726,12728,12730],{"class":580,"line":5362},[578,12719,652],{"class":591},[578,12721,621],{"class":583},[578,12723,11431],{"class":624},[578,12725,2990],{"class":583},[578,12727,2309],{"class":583},[578,12729,11099],{"class":660},[578,12731,6824],{"class":624},[578,12733,12734,12736,12738,12740,12742,12744,12746],{"class":580,"line":5370},[578,12735,11444],{"class":660},[578,12737,664],{"class":624},[578,12739,2233],{"class":583},[578,12741,2237],{"class":2236},[578,12743,2253],{"class":583},[578,12745,7072],{"class":591},[578,12747,2256],{"class":583},[578,12749,12750,12752,12754,12756,12759,12761,12763,12765,12767,12769,12771,12773],{"class":580,"line":5385},[578,12751,7079],{"class":591},[578,12753,11463],{"class":624},[578,12755,2309],{"class":583},[578,12757,12758],{"class":624}," refractorRef",[578,12760,824],{"class":583},[578,12762,2275],{"class":624},[578,12764,11475],{"class":583},[578,12766,8765],{"class":624},[578,12768,11475],{"class":583},[578,12770,6511],{"class":624},[578,12772,11475],{"class":583},[578,12774,11486],{"class":624},[578,12776,12777,12779,12781,12783,12785,12787,12789,12791,12793,12795,12797,12799,12801,12803,12805],{"class":580,"line":5400},[578,12778,2261],{"class":617},[578,12780,2264],{"class":587},[578,12782,11040],{"class":624},[578,12784,11475],{"class":583},[578,12786,11499],{"class":624},[578,12788,2278],{"class":587},[578,12790,2281],{"class":583},[578,12792,11463],{"class":624},[578,12794,824],{"class":583},[578,12796,11499],{"class":624},[578,12798,824],{"class":583},[578,12800,2275],{"class":624},[578,12802,2309],{"class":583},[578,12804,2237],{"class":624},[578,12806,2287],{"class":583},[578,12808,12809,12811],{"class":580,"line":5415},[578,12810,2990],{"class":583},[578,12812,675],{"class":624},[578,12814,12815,12817,12819],{"class":580,"line":5430},[578,12816,681],{"class":583},[578,12818,588],{"class":587},[578,12820,610],{"class":583},[578,12822,12823],{"class":580,"line":5444},[578,12824,646],{"emptyLinePlaceholder":512},[578,12826,12827,12829,12831],{"class":580,"line":5459},[578,12828,584],{"class":583},[578,12830,698],{"class":587},[578,12832,610],{"class":583},[578,12834,12835,12837],{"class":580,"line":5464},[578,12836,706],{"class":583},[578,12838,12839],{"class":587},"Refractor\n",[578,12841,12842,12844,12846,12848,12851],{"class":580,"line":5495},[578,12843,11556],{"class":591},[578,12845,598],{"class":583},[578,12847,601],{"class":583},[578,12849,12850],{"class":604},"refractorRef",[578,12852,747],{"class":583},[578,12854,12855,12857,12859,12861,12863],{"class":580,"line":5529},[578,12856,11173],{"class":591},[578,12858,598],{"class":583},[578,12860,601],{"class":583},[578,12862,12206],{"class":604},[578,12864,747],{"class":583},[578,12866,12867,12869,12871,12873,12875],{"class":580,"line":5538},[578,12868,11608],{"class":591},[578,12870,598],{"class":583},[578,12872,601],{"class":583},[578,12874,11615],{"class":604},[578,12876,747],{"class":583},[578,12878,12879],{"class":580,"line":5548},[578,12880,4607],{"class":583},[578,12882,12883,12885,12887,12889,12891,12893,12895,12897],{"class":580,"line":5558},[578,12884,717],{"class":583},[578,12886,3330],{"class":587},[578,12888,1767],{"class":591},[578,12890,598],{"class":583},[578,12892,601],{"class":583},[578,12894,12225],{"class":604},[578,12896,601],{"class":583},[578,12898,1701],{"class":583},[578,12900,12901,12903,12905],{"class":580,"line":4708},[578,12902,799],{"class":583},[578,12904,449],{"class":587},[578,12906,610],{"class":583},[578,12908,12909,12911,12913],{"class":580,"line":4709},[578,12910,681],{"class":583},[578,12912,698],{"class":587},[578,12914,610],{"class":583},[496,12916,12917],{},"The Refractor shader uses the following configuration by default:",[902,12919,11665],{"id":11664},[564,12921,12923],{"className":11668,"code":12922,"language":11670,"meta":504,"style":504},"const shader = {\n uniforms: {\n color: {\n value: null\n },\n tDiffuse: {\n value: null\n },\n textureMatrix: {\n value: null\n }\n },\n vertexShader: /* glsl */`\n uniform mat4 textureMatrix;\n varying vec4 vUv;\n\n void main() {\n vUv = textureMatrix * vec4( position, 1.0 );\n gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n }`,\n fragmentShader: /* glsl */`\n uniform vec3 color;\n uniform sampler2D tDiffuse;\n varying vec4 vUv;\n\n float blendOverlay( float base, float blend ) {\n return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n }\n\n vec3 blendOverlay( vec3 base, vec3 blend ) {\n return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n }\n\n void main() {\n vec4 base = texture2DProj( tDiffuse, vUv );\n gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n\n #include \u003Ctonemapping_fragment>\n #include \u003Ccolorspace_fragment>\n }`\n}\n",[534,12924,12925,12935,12943,12951,12959,12963,12971,12979,12983,12991,12999,13003,13007,13017,13021,13025,13029,13033,13038,13043,13051,13061,13065,13069,13073,13077,13082,13087,13091,13095,13100,13105,13109,13113,13117,13122,13127,13131,13135,13139,13145],{"__ignoreMap":504},[578,12926,12927,12929,12931,12933],{"class":580,"line":505},[578,12928,652],{"class":591},[578,12930,11679],{"class":624},[578,12932,598],{"class":583},[578,12934,2256],{"class":583},[578,12936,12937,12939,12941],{"class":580,"line":506},[578,12938,11164],{"class":587},[578,12940,2247],{"class":583},[578,12942,2256],{"class":583},[578,12944,12945,12947,12949],{"class":580,"line":643},[578,12946,11173],{"class":587},[578,12948,2247],{"class":583},[578,12950,2256],{"class":583},[578,12952,12953,12955,12957],{"class":580,"line":649},[578,12954,11720],{"class":587},[578,12956,2247],{"class":583},[578,12958,11725],{"class":583},[578,12960,12961],{"class":580,"line":678},[578,12962,11730],{"class":583},[578,12964,12965,12967,12969],{"class":580,"line":688},[578,12966,11191],{"class":587},[578,12968,2247],{"class":583},[578,12970,2256],{"class":583},[578,12972,12973,12975,12977],{"class":580,"line":693},[578,12974,11720],{"class":587},[578,12976,2247],{"class":583},[578,12978,11725],{"class":583},[578,12980,12981],{"class":580,"line":703},[578,12982,11730],{"class":583},[578,12984,12985,12987,12989],{"class":580,"line":714},[578,12986,11208],{"class":587},[578,12988,2247],{"class":583},[578,12990,2256],{"class":583},[578,12992,12993,12995,12997],{"class":580,"line":569},[578,12994,11720],{"class":587},[578,12996,2247],{"class":583},[578,12998,11725],{"class":583},[578,13000,13001],{"class":580,"line":570},[578,13002,11348],{"class":583},[578,13004,13005],{"class":580,"line":571},[578,13006,2984],{"class":583},[578,13008,13009,13011,13013,13015],{"class":580,"line":572},[578,13010,11246],{"class":587},[578,13012,2247],{"class":583},[578,13014,11251],{"class":9814},[578,13016,11254],{"class":583},[578,13018,13019],{"class":580,"line":573},[578,13020,11259],{"class":604},[578,13022,13023],{"class":580,"line":786},[578,13024,11264],{"class":604},[578,13026,13027],{"class":580,"line":796},[578,13028,646],{"emptyLinePlaceholder":512},[578,13030,13031],{"class":580,"line":806},[578,13032,11274],{"class":604},[578,13034,13035],{"class":580,"line":1856},[578,13036,13037],{"class":604}," vUv = textureMatrix * vec4( position, 1.0 );\n",[578,13039,13040],{"class":580,"line":1877},[578,13041,13042],{"class":604}," gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n",[578,13044,13045,13047,13049],{"class":580,"line":1886},[578,13046,11294],{"class":604},[578,13048,11297],{"class":583},[578,13050,2930],{"class":583},[578,13052,13053,13055,13057,13059],{"class":580,"line":2431},[578,13054,11304],{"class":587},[578,13056,2247],{"class":583},[578,13058,11251],{"class":9814},[578,13060,11254],{"class":583},[578,13062,13063],{"class":580,"line":2436},[578,13064,11315],{"class":604},[578,13066,13067],{"class":580,"line":2036},[578,13068,11320],{"class":604},[578,13070,13071],{"class":580,"line":2037},[578,13072,11264],{"class":604},[578,13074,13075],{"class":580,"line":2038},[578,13076,646],{"emptyLinePlaceholder":512},[578,13078,13079],{"class":580,"line":2039},[578,13080,13081],{"class":604}," float blendOverlay( float base, float blend ) {\n",[578,13083,13084],{"class":580,"line":2509},[578,13085,13086],{"class":604}," return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n",[578,13088,13089],{"class":580,"line":2515},[578,13090,11348],{"class":604},[578,13092,13093],{"class":580,"line":2524},[578,13094,646],{"emptyLinePlaceholder":512},[578,13096,13097],{"class":580,"line":2545},[578,13098,13099],{"class":604}," vec3 blendOverlay( vec3 base, vec3 blend ) {\n",[578,13101,13102],{"class":580,"line":2550},[578,13103,13104],{"class":604}," return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n",[578,13106,13107],{"class":580,"line":2558},[578,13108,11348],{"class":604},[578,13110,13111],{"class":580,"line":2573},[578,13112,646],{"emptyLinePlaceholder":512},[578,13114,13115],{"class":580,"line":2588},[578,13116,11274],{"class":604},[578,13118,13119],{"class":580,"line":2593},[578,13120,13121],{"class":604}," vec4 base = texture2DProj( tDiffuse, vUv );\n",[578,13123,13124],{"class":580,"line":2602},[578,13125,13126],{"class":604}," gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n",[578,13128,13129],{"class":580,"line":2607},[578,13130,646],{"emptyLinePlaceholder":512},[578,13132,13133],{"class":580,"line":2615},[578,13134,11401],{"class":604},[578,13136,13137],{"class":580,"line":2628},[578,13138,11406],{"class":604},[578,13140,13141,13143],{"class":580,"line":2643},[578,13142,11294],{"class":604},[578,13144,11254],{"class":583},[578,13146,13147],{"class":580,"line":2649},[578,13148,2349],{"class":583},[1550,13150,13151],{},"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 .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":504,"searchDepth":505,"depth":506,"links":13153},[13154,13155,13156],{"id":562,"depth":506,"text":15},{"id":935,"depth":506,"text":936},{"id":12368,"depth":506,"text":12369,"children":13157},[13158],{"id":11664,"depth":643,"text":11665},"Create real-time refractive (glass-like) surfaces in your scene.",{},{"title":449,"description":13159},"aTZyJsI5__o7UZbpkupUfyx_02PvriUqnYmBjh-brjE",{"id":13164,"title":453,"body":13165,"description":13710,"extension":509,"links":510,"meta":13711,"navigation":512,"path":454,"seo":13712,"stem":455,"__hash__":13713},"docs/2.api/9.objects/text-3d.md",{"type":493,"value":13166,"toc":13706},[13167,13172,13184,13186,13205,13313,13329,13422,13425,13543,13545,13703],[526,13168,13169],{},[13170,13171],"objects-text",{},[496,13173,13174,13177,13178,13183],{},[534,13175,13176],{},"\u003CText3D />"," is a component that renders text in 3D. It is a wrapper around the ",[539,13179,13182],{"href":13180,"rel":13181},"https://threejs.org/docs/#api/en/geometries/TextGeometry",[543],"TextGeometry"," class.",[560,13185,15],{"id":562},[496,13187,13188,13189,13191,13192,13195,13196,13199,13200],{},"To use the ",[534,13190,13176],{}," component you need to pass the ",[534,13193,13194],{},"font"," prop with the URL of the font JSON file you want to use. TextGeometry uses ",[534,13197,13198],{},"typeface",".json generated fonts, you can generate yours ",[539,13201,13204],{"href":13202,"rel":13203},"http://gero3.github.io/facetype.js/",[543],"here",[564,13206,13208],{"className":566,"code":13207,"language":574,"meta":504,"style":504},"\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",[534,13209,13210,13218,13226,13234,13241,13255,13269,13273,13281,13289,13297,13305],{"__ignoreMap":504},[578,13211,13212,13214,13216],{"class":580,"line":505},[578,13213,584],{"class":583},[578,13215,698],{"class":587},[578,13217,610],{"class":583},[578,13219,13220,13222,13224],{"class":580,"line":506},[578,13221,706],{"class":583},[578,13223,709],{"class":587},[578,13225,610],{"class":583},[578,13227,13228,13230,13232],{"class":580,"line":643},[578,13229,717],{"class":583},[578,13231,720],{"class":587},[578,13233,610],{"class":583},[578,13235,13236,13238],{"class":580,"line":649},[578,13237,728],{"class":583},[578,13239,13240],{"class":587},"Text3D\n",[578,13242,13243,13246,13248,13250,13253],{"class":580,"line":678},[578,13244,13245],{"class":591}," text",[578,13247,598],{"class":583},[578,13249,601],{"class":583},[578,13251,13252],{"class":604},"TresJS",[578,13254,747],{"class":583},[578,13256,13257,13260,13262,13264,13267],{"class":580,"line":688},[578,13258,13259],{"class":591}," font",[578,13261,598],{"class":583},[578,13263,601],{"class":583},[578,13265,13266],{"class":604},"/fonts/FiraCodeRegular.json",[578,13268,747],{"class":583},[578,13270,13271],{"class":580,"line":693},[578,13272,3851],{"class":583},[578,13274,13275,13277,13279],{"class":580,"line":703},[578,13276,1761],{"class":583},[578,13278,2675],{"class":587},[578,13280,1701],{"class":583},[578,13282,13283,13285,13287],{"class":580,"line":714},[578,13284,1815],{"class":583},[578,13286,453],{"class":587},[578,13288,610],{"class":583},[578,13290,13291,13293,13295],{"class":580,"line":569},[578,13292,789],{"class":583},[578,13294,720],{"class":587},[578,13296,610],{"class":583},[578,13298,13299,13301,13303],{"class":580,"line":570},[578,13300,799],{"class":583},[578,13302,709],{"class":587},[578,13304,610],{"class":583},[578,13306,13307,13309,13311],{"class":580,"line":571},[578,13308,681],{"class":583},[578,13310,698],{"class":587},[578,13312,610],{"class":583},[496,13314,13315,13316,13319,13320,13322,13323,13325,13326,13328],{},"Notice that you need to pass the ",[534,13317,13318],{},"\u003CTresMeshNormalMaterial />"," component as a child of the ",[534,13321,13176],{}," component. This is because ",[534,13324,13176],{}," is a ",[534,13327,4452],{}," 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:",[564,13330,13332],{"className":566,"code":13331,"language":574,"meta":504,"style":504},"\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",[534,13333,13334,13342,13350,13358,13377,13382,13390,13398,13406,13414],{"__ignoreMap":504},[578,13335,13336,13338,13340],{"class":580,"line":505},[578,13337,584],{"class":583},[578,13339,698],{"class":587},[578,13341,610],{"class":583},[578,13343,13344,13346,13348],{"class":580,"line":506},[578,13345,706],{"class":583},[578,13347,709],{"class":587},[578,13349,610],{"class":583},[578,13351,13352,13354,13356],{"class":580,"line":643},[578,13353,717],{"class":583},[578,13355,720],{"class":587},[578,13357,610],{"class":583},[578,13359,13360,13362,13364,13367,13369,13371,13373,13375],{"class":580,"line":649},[578,13361,728],{"class":583},[578,13363,453],{"class":587},[578,13365,13366],{"class":591}," font",[578,13368,598],{"class":583},[578,13370,601],{"class":583},[578,13372,13266],{"class":604},[578,13374,601],{"class":583},[578,13376,610],{"class":583},[578,13378,13379],{"class":580,"line":678},[578,13380,13381],{"class":624}," TresJS\n",[578,13383,13384,13386,13388],{"class":580,"line":688},[578,13385,1761],{"class":583},[578,13387,2675],{"class":587},[578,13389,1701],{"class":583},[578,13391,13392,13394,13396],{"class":580,"line":693},[578,13393,1815],{"class":583},[578,13395,453],{"class":587},[578,13397,610],{"class":583},[578,13399,13400,13402,13404],{"class":580,"line":703},[578,13401,789],{"class":583},[578,13403,720],{"class":587},[578,13405,610],{"class":583},[578,13407,13408,13410,13412],{"class":580,"line":714},[578,13409,799],{"class":583},[578,13411,709],{"class":587},[578,13413,610],{"class":583},[578,13415,13416,13418,13420],{"class":580,"line":569},[578,13417,681],{"class":583},[578,13419,698],{"class":587},[578,13421,610],{"class":583},[496,13423,13424],{},"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",[564,13426,13428],{"className":566,"code":13427,"language":574,"meta":504,"style":504},"\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",[534,13429,13430,13438,13459,13467,13475,13481,13494,13506,13510,13515,13519,13527,13535],{"__ignoreMap":504},[578,13431,13432,13434,13436],{"class":580,"line":505},[578,13433,584],{"class":583},[578,13435,698],{"class":587},[578,13437,610],{"class":583},[578,13439,13440,13442,13445,13448,13450,13452,13455,13457],{"class":580,"line":506},[578,13441,706],{"class":583},[578,13443,13444],{"class":587},"input",[578,13446,13447],{"class":591}," v-model",[578,13449,598],{"class":583},[578,13451,601],{"class":583},[578,13453,13454],{"class":604},"myReactiveText",[578,13456,601],{"class":583},[578,13458,1701],{"class":583},[578,13460,13461,13463,13465],{"class":580,"line":643},[578,13462,706],{"class":583},[578,13464,709],{"class":587},[578,13466,610],{"class":583},[578,13468,13469,13471,13473],{"class":580,"line":649},[578,13470,717],{"class":583},[578,13472,720],{"class":587},[578,13474,610],{"class":583},[578,13476,13477,13479],{"class":580,"line":678},[578,13478,728],{"class":583},[578,13480,13240],{"class":587},[578,13482,13483,13486,13488,13490,13492],{"class":580,"line":688},[578,13484,13485],{"class":591}," :text",[578,13487,598],{"class":583},[578,13489,601],{"class":583},[578,13491,13454],{"class":604},[578,13493,747],{"class":583},[578,13495,13496,13498,13500,13502,13504],{"class":580,"line":693},[578,13497,13259],{"class":591},[578,13499,598],{"class":583},[578,13501,601],{"class":583},[578,13503,13266],{"class":604},[578,13505,747],{"class":583},[578,13507,13508],{"class":580,"line":703},[578,13509,3795],{"class":591},[578,13511,13512],{"class":580,"line":714},[578,13513,13514],{"class":591}," need-updates\n",[578,13516,13517],{"class":580,"line":569},[578,13518,783],{"class":583},[578,13520,13521,13523,13525],{"class":580,"line":570},[578,13522,789],{"class":583},[578,13524,720],{"class":587},[578,13526,610],{"class":583},[578,13528,13529,13531,13533],{"class":580,"line":571},[578,13530,799],{"class":583},[578,13532,709],{"class":587},[578,13534,610],{"class":583},[578,13536,13537,13539,13541],{"class":580,"line":572},[578,13538,681],{"class":583},[578,13540,698],{"class":587},[578,13542,610],{"class":583},[560,13544,936],{"id":935},[938,13546,13547,13557],{},[941,13548,13549],{},[944,13550,13551,13553,13555],{},[947,13552,1903],{"align":949},[947,13554,953],{"align":949},[947,13556,956],{},[958,13558,13559,13570,13581,13593,13605,13618,13630,13643,13656,13668,13680,13691],{},[944,13560,13561,13565,13568],{},[963,13562,13563],{"align":949},[2726,13564,13194],{},[963,13566,13567],{"align":949},"The font data or font name to use for the text.",[963,13569],{},[944,13571,13572,13576,13579],{},[963,13573,13574],{"align":949},[2726,13575,1502],{},[963,13577,13578],{"align":949},"The text to display.",[963,13580],{},[944,13582,13583,13588,13591],{},[963,13584,13585],{"align":949},[2726,13586,13587],{},"size",[963,13589,13590],{"align":949},"The size of the text.",[963,13592,1849],{},[944,13594,13595,13599,13602],{},[963,13596,13597],{"align":949},[2726,13598,2747],{},[963,13600,13601],{"align":949},"The height of the text.",[963,13603,13604],{},"0.2",[944,13606,13607,13612,13615],{},[963,13608,13609],{"align":949},[2726,13610,13611],{},"curveSegments",[963,13613,13614],{"align":949},"The number of curve segments to use when generating the text geometry.",[963,13616,13617],{},"5",[944,13619,13620,13625,13628],{},[963,13621,13622],{"align":949},[2726,13623,13624],{},"bevelEnabled",[963,13626,13627],{"align":949},"A flag indicating whether beveling should be enabled for the text.",[963,13629,1104],{},[944,13631,13632,13637,13640],{},[963,13633,13634],{"align":949},[2726,13635,13636],{},"bevelThickness",[963,13638,13639],{"align":949},"The thickness of the beveled edge on the text.",[963,13641,13642],{},"0.05",[944,13644,13645,13650,13653],{},[963,13646,13647],{"align":949},[2726,13648,13649],{},"bevelSize",[963,13651,13652],{"align":949},"The size of the beveled edge on the text.",[963,13654,13655],{},"0.02",[944,13657,13658,13663,13666],{},[963,13659,13660],{"align":949},[2726,13661,13662],{},"bevelOffset",[963,13664,13665],{"align":949},"The offset of the beveled edge on the text.",[963,13667,1129],{},[944,13669,13670,13675,13678],{},[963,13671,13672],{"align":949},[2726,13673,13674],{},"bevelSegments",[963,13676,13677],{"align":949},"The number of bevel segments to use when generating the text geometry.",[963,13679,3814],{},[944,13681,13682,13686,13689],{},[963,13683,13684],{"align":949},[2726,13685,1210],{},[963,13687,13688],{"align":949},"To center the text",[963,13690,1144],{},[944,13692,13693,13698,13701],{},[963,13694,13695],{"align":949},[2726,13696,13697],{},"needUpdates",[963,13699,13700],{"align":949},"This props add reactivity",[963,13702,1144],{},[1550,13704,13705],{},"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":504,"searchDepth":505,"depth":506,"links":13707},[13708,13709],{"id":562,"depth":506,"text":15},{"id":935,"depth":506,"text":936},"Render text in 3D using TextGeometry.",{},{"title":453,"description":13710},"sdYCewwuqrXIt1Ti234B-8w4L1gJgGQcw62huYPBpjc",1785417275255]