[{"data":1,"prerenderedAt":12968},["ShallowReactive",2],{"navigation":3,"/api/objects":466,"/api/objects-surround":491,"objects-list":496},[4,22],{"title":5,"path":6,"stem":7,"children":8},"Getting Started","/getting-started","1.getting-started/1.index",[9,10,14,18],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"Installation Guide","/getting-started/installation","1.getting-started/2.installation",{"title":15,"path":16,"stem":17},"Usage","/getting-started/usage","1.getting-started/3.usage",{"title":19,"path":20,"stem":21},"Upgrade Guide","/getting-started/upgrade-guide","1.getting-started/4.upgrade-guide",{"title":23,"path":24,"stem":25,"children":26},"Api","/api","2.api",[27,30,80,110,152,186,280,306,340,390,432],{"title":28,"path":24,"stem":29},"All","2.api/index",{"title":31,"path":32,"stem":33,"children":34},"Abstractions","/api/abstractions","2.api/1.abstractions/index",[35,36,40,44,48,52,56,60,64,68,72,76],{"title":31,"path":32,"stem":33},{"title":37,"path":38,"stem":39},"Align","/api/abstractions/align","2.api/1.abstractions/align",{"title":41,"path":42,"stem":43},"Billboard","/api/abstractions/billboard","2.api/1.abstractions/billboard",{"title":45,"path":46,"stem":47},"Camera Shake","/api/abstractions/camera-shake","2.api/1.abstractions/camera-shake",{"title":49,"path":50,"stem":51},"Edges","/api/abstractions/edges","2.api/1.abstractions/edges",{"title":53,"path":54,"stem":55},"Fit","/api/abstractions/fit","2.api/1.abstractions/fit",{"title":57,"path":58,"stem":59},"Levioso (Float)","/api/abstractions/levioso","2.api/1.abstractions/levioso",{"title":61,"path":62,"stem":63},"Mask","/api/abstractions/mask","2.api/1.abstractions/mask",{"title":65,"path":66,"stem":67},"Outline","/api/abstractions/outline","2.api/1.abstractions/outline",{"title":69,"path":70,"stem":71},"Sampler","/api/abstractions/sampler","2.api/1.abstractions/sampler",{"title":73,"path":74,"stem":75},"ScreenSizer","/api/abstractions/screen-sizer","2.api/1.abstractions/screen-sizer",{"title":77,"path":78,"stem":79},"ScreenSpace","/api/abstractions/screen-space","2.api/1.abstractions/screen-space",{"title":81,"path":82,"stem":83,"children":84},"Controls","/api/controls","2.api/2.controls/index",[85,86,90,94,98,102,106],{"title":81,"path":82,"stem":83},{"title":87,"path":88,"stem":89},"Camera Controls","/api/controls/camera-controls","2.api/2.controls/camera-controls",{"title":91,"path":92,"stem":93},"Keyboard Controls","/api/controls/keyboard-controls","2.api/2.controls/keyboard-controls",{"title":95,"path":96,"stem":97},"Map Controls","/api/controls/map-controls","2.api/2.controls/map-controls",{"title":99,"path":100,"stem":101},"Orbit Controls","/api/controls/orbit-controls","2.api/2.controls/orbit-controls",{"title":103,"path":104,"stem":105},"PointerLock Controls","/api/controls/pointer-lock-controls","2.api/2.controls/pointer-lock-controls",{"title":107,"path":108,"stem":109},"Transform Controls","/api/controls/transform-controls","2.api/2.controls/transform-controls",{"title":111,"path":112,"stem":113,"children":114},"Loaders","/api/loaders","2.api/3.loaders/index",[115,116,120,124,128,132,136,140,144,148],{"title":111,"path":112,"stem":113},{"title":117,"path":118,"stem":119},"useGLTF","/api/loaders/use-gltf","2.api/3.loaders/1.use-gltf",{"title":121,"path":122,"stem":123},"GLTFModel","/api/loaders/gltf-model","2.api/3.loaders/2.gltf-model",{"title":125,"path":126,"stem":127},"useFBX","/api/loaders/use-fbx","2.api/3.loaders/3.use-fbx",{"title":129,"path":130,"stem":131},"FBXModel","/api/loaders/fbx-model","2.api/3.loaders/4.fbx-model",{"title":133,"path":134,"stem":135},"useTexture","/api/loaders/use-texture","2.api/3.loaders/5.use-texture",{"title":137,"path":138,"stem":139},"useTextures","/api/loaders/use-textures","2.api/3.loaders/6.use-textures",{"title":141,"path":142,"stem":143},"useSVG","/api/loaders/use-svg","2.api/3.loaders/7.use-svg",{"title":145,"path":146,"stem":147},"useProgress","/api/loaders/use-progress","2.api/3.loaders/use-progress",{"title":149,"path":150,"stem":151},"useVideoTexture","/api/loaders/use-video-texture","2.api/3.loaders/use-video-texture",{"title":153,"path":154,"stem":155,"children":156},"Materials","/api/materials","2.api/4.materials/index",[157,158,162,166,170,174,178,182],{"title":153,"path":154,"stem":155},{"title":159,"path":160,"stem":161},"Custom Shader Material","/api/materials/custom-shader-material","2.api/4.materials/custom-shader-material",{"title":163,"path":164,"stem":165},"Mesh Glass Material","/api/materials/glass-material","2.api/4.materials/glass-material",{"title":167,"path":168,"stem":169},"Holographic Material","/api/materials/holographic-material","2.api/4.materials/holographic-material",{"title":171,"path":172,"stem":173},"Mesh Discard Material","/api/materials/mesh-discard-material","2.api/4.materials/mesh-discard-material",{"title":175,"path":176,"stem":177},"Mesh Reflection Material","/api/materials/mesh-reflection-material","2.api/4.materials/mesh-reflection-material",{"title":179,"path":180,"stem":181},"Point Material","/api/materials/point-material","2.api/4.materials/point-material",{"title":183,"path":184,"stem":185},"Wobble Material","/api/materials/wobble-material","2.api/4.materials/wobble-material",{"title":187,"path":188,"stem":189,"children":190},"Shapes","/api/shapes","2.api/5.shapes/index",[191,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276],{"title":187,"path":188,"stem":189},{"title":193,"path":194,"stem":195},"Box","/api/shapes/box","2.api/5.shapes/box",{"title":197,"path":198,"stem":199},"CatmullRomCurve3","/api/shapes/catmullromcurve3","2.api/5.shapes/catmullromcurve3",{"title":201,"path":202,"stem":203},"Circle","/api/shapes/circle","2.api/5.shapes/circle",{"title":205,"path":206,"stem":207},"Cone","/api/shapes/cone","2.api/5.shapes/cone",{"title":209,"path":210,"stem":211},"Cubic Bezier Line","/api/shapes/cubic-bezier-line","2.api/5.shapes/cubic-bezier-line",{"title":213,"path":214,"stem":215},"Cylinder","/api/shapes/cylinder","2.api/5.shapes/cylinder",{"title":217,"path":218,"stem":219},"Dodecahedron","/api/shapes/dodecahedron","2.api/5.shapes/dodecahedron",{"title":221,"path":222,"stem":223},"Grid","/api/shapes/grid","2.api/5.shapes/grid",{"title":225,"path":226,"stem":227},"Icosahedron","/api/shapes/icosahedron","2.api/5.shapes/icosahedron",{"title":229,"path":230,"stem":231},"Line2","/api/shapes/line2","2.api/5.shapes/line2",{"title":233,"path":234,"stem":235},"Octahedron","/api/shapes/octahedron","2.api/5.shapes/octahedron",{"title":237,"path":238,"stem":239},"Plane","/api/shapes/plane","2.api/5.shapes/plane",{"title":241,"path":242,"stem":243},"Quadratic Bezier Line","/api/shapes/quadratic-bezier-line","2.api/5.shapes/quadratic-bezier-line",{"title":245,"path":246,"stem":247},"Ring","/api/shapes/ring","2.api/5.shapes/ring",{"title":249,"path":250,"stem":251},"Rounded Box","/api/shapes/rounded-box","2.api/5.shapes/rounded-box",{"title":253,"path":254,"stem":255},"Screen Quad","/api/shapes/screen-quad","2.api/5.shapes/screen-quad",{"title":257,"path":258,"stem":259},"Sphere","/api/shapes/sphere","2.api/5.shapes/sphere",{"title":261,"path":262,"stem":263},"Superformula","/api/shapes/superformula","2.api/5.shapes/superformula",{"title":265,"path":266,"stem":267},"Tetrahedron","/api/shapes/tetrahedron","2.api/5.shapes/tetrahedron",{"title":269,"path":270,"stem":271},"Torus","/api/shapes/torus","2.api/5.shapes/torus",{"title":273,"path":274,"stem":275},"Torus Knot","/api/shapes/torus-knot","2.api/5.shapes/torus-knot",{"title":277,"path":278,"stem":279},"Tube","/api/shapes/tube","2.api/5.shapes/tube",{"title":281,"path":282,"stem":283,"children":284},"Debug/Performance","/api/debug-performance","2.api/6.debug-performance/index",[285,286,290,294,298,302],{"title":281,"path":282,"stem":283},{"title":287,"path":288,"stem":289},"Helper","/api/debug-performance/helper","2.api/6.debug-performance/helper",{"title":291,"path":292,"stem":293},"LOD","/api/debug-performance/lod","2.api/6.debug-performance/lod",{"title":295,"path":296,"stem":297},"Stats","/api/debug-performance/stats","2.api/6.debug-performance/stats",{"title":299,"path":300,"stem":301},"StatsGl","/api/debug-performance/stats-gl","2.api/6.debug-performance/stats-gl",{"title":303,"path":304,"stem":305},"useBVH","/api/debug-performance/use-bvh","2.api/6.debug-performance/use-bvh",{"title":307,"path":308,"stem":309,"children":310},"Light/Shadow","/api/light-shadow","2.api/7.light-shadow/index",[311,312,316,320,324,328,332,336],{"title":307,"path":308,"stem":309},{"title":313,"path":314,"stem":315},"Accumulative Shadows","/api/light-shadow/accumulative-shadows","2.api/7.light-shadow/accumulative-shadows",{"title":317,"path":318,"stem":319},"Bake Shadows","/api/light-shadow/bake-shadows","2.api/7.light-shadow/bake-shadows",{"title":321,"path":322,"stem":323},"Circle Shadow","/api/light-shadow/circle-shadow","2.api/7.light-shadow/circle-shadow",{"title":325,"path":326,"stem":327},"Contact Shadows","/api/light-shadow/contact-shadows","2.api/7.light-shadow/contact-shadows",{"title":329,"path":330,"stem":331},"Lensflare","/api/light-shadow/lensflare","2.api/7.light-shadow/lensflare",{"title":333,"path":334,"stem":335},"Randomized Lights","/api/light-shadow/randomized-lights","2.api/7.light-shadow/randomized-lights",{"title":337,"path":338,"stem":339},"Soft Shadows","/api/light-shadow/soft-shadows","2.api/7.light-shadow/soft-shadows",{"title":341,"path":342,"stem":343,"children":344},"Staging","/api/staging","2.api/8.staging/index",[345,346,350,354,358,362,366,370,374,378,382,386],{"title":341,"path":342,"stem":343},{"title":347,"path":348,"stem":349},"Environment","/api/staging/environment","2.api/8.staging/1.environment",{"title":351,"path":352,"stem":353},"useEnvironment","/api/staging/use-environment","2.api/8.staging/2.use-environment",{"title":355,"path":356,"stem":357},"Lightformer","/api/staging/lightformer","2.api/8.staging/3.lightformer",{"title":359,"path":360,"stem":361},"Backdrop","/api/staging/backdrop","2.api/8.staging/backdrop",{"title":363,"path":364,"stem":365},"Ocean","/api/staging/ocean","2.api/8.staging/ocean",{"title":367,"path":368,"stem":369},"Precipitation","/api/staging/precipitation","2.api/8.staging/precipitation",{"title":371,"path":372,"stem":373},"Sky","/api/staging/sky","2.api/8.staging/sky",{"title":375,"path":376,"stem":377},"Smoke","/api/staging/smoke","2.api/8.staging/smoke",{"title":379,"path":380,"stem":381},"Sparkles","/api/staging/sparkles","2.api/8.staging/sparkles",{"title":383,"path":384,"stem":385},"Stage","/api/staging/stage","2.api/8.staging/stage",{"title":387,"path":388,"stem":389},"Stars","/api/staging/stars","2.api/8.staging/stars",{"title":391,"path":392,"stem":393,"children":394},"Objects","/api/objects","2.api/9.objects/index",[395,396,400,404,408,412,416,420,424,428],{"title":391,"path":392,"stem":393},{"title":397,"path":398,"stem":399},"AnimatedSprite","/api/objects/animated-sprite","2.api/9.objects/animated-sprite",{"title":401,"path":402,"stem":403},"CubeCamera","/api/objects/cube-camera","2.api/9.objects/cube-camera",{"title":405,"path":406,"stem":407},"Fbo","/api/objects/fbo","2.api/9.objects/fbo",{"title":409,"path":410,"stem":411},"GradientTexture","/api/objects/gradient-texture","2.api/9.objects/gradient-texture",{"title":413,"path":414,"stem":415},"HTML","/api/objects/html","2.api/9.objects/html",{"title":417,"path":418,"stem":419},"Image","/api/objects/image","2.api/9.objects/image",{"title":421,"path":422,"stem":423},"MarchingCubes","/api/objects/marching-cubes","2.api/9.objects/marching-cubes",{"title":425,"path":426,"stem":427},"Reflector","/api/objects/reflector","2.api/9.objects/reflector",{"title":429,"path":430,"stem":431},"Text3D","/api/objects/text-3d","2.api/9.objects/text-3d",{"title":433,"path":434,"stem":435,"children":436},"Miscellaneous","/api/miscellaneous","2.api/miscellaneous/index",[437,438,442,446,450,454,458,462],{"title":433,"path":434,"stem":435},{"title":439,"path":440,"stem":441},"Bounds","/api/miscellaneous/bounds","2.api/miscellaneous/bounds",{"title":443,"path":444,"stem":445},"GlobalAudio","/api/miscellaneous/global-audio","2.api/miscellaneous/global-audio",{"title":447,"path":448,"stem":449},"MouseParallax","/api/miscellaneous/mouse-parallax","2.api/miscellaneous/mouse-parallax",{"title":451,"path":452,"stem":453},"PositionalAudio","/api/miscellaneous/positional-audio","2.api/miscellaneous/positional-audio",{"title":455,"path":456,"stem":457},"useAnimations","/api/miscellaneous/use-animations","2.api/miscellaneous/use-animations",{"title":459,"path":460,"stem":461},"useGLTFExporter","/api/miscellaneous/use-gltf-exporter","2.api/miscellaneous/use-gltf-exporter",{"title":463,"path":464,"stem":465},"useIntersect","/api/miscellaneous/use-intersect","2.api/miscellaneous/use-intersect",{"id":467,"title":391,"body":468,"description":484,"extension":485,"links":486,"meta":487,"navigation":488,"path":392,"seo":489,"stem":393,"__hash__":490},"docs/2.api/9.objects/index.md",{"type":469,"value":470,"toc":479},"minimark",[471,475],[472,473,474],"p",{},"Components for creating 3D objects, sprites, text, and textures in your scene.",[476,477],"api-list",{"list-name":478},"objects-list",{"title":480,"searchDepth":481,"depth":482,"links":483},"",1,2,[],"3D objects and texture components","md",null,{},true,{"title":391,"description":484},"PJRjQ8U1I99ephC4xbsR6qDF0Wsdp6iYandnX5ya-lQ",[492,494],{"title":387,"path":388,"stem":389,"description":493,"children":-1},"Renders beautiful stars in the sky using Points and BufferGeometry.",{"title":397,"path":398,"stem":399,"description":495,"children":-1},"Display 2D animations defined in a texture atlas.",[497,1552,2044,3357,3789,9907,10542,11398,12417],{"id":498,"title":397,"body":499,"description":495,"extension":485,"links":486,"meta":1549,"navigation":488,"path":398,"seo":1550,"stem":399,"__hash__":1551},"docs/2.api/9.objects/animated-sprite.md",{"type":469,"value":500,"toc":1531},[501,507,525,535,539,792,804,808,814,828,837,841,848,868,872,880,885,912,916,1266,1270,1340,1343,1350,1354,1357,1362,1365,1377,1393,1397,1400,1437,1440,1452,1456,1465,1475,1483,1486,1517,1520,1527],[502,503,504],"scene-controls-wrapper",{},[505,506],"objects-animated-sprite",{},[472,508,509,513,514,521,522,524],{},[510,511,512],"code",{},"\u003CAnimatedSprite />"," displays 2D animations defined in a ",[515,516,520],"a",{"href":517,"rel":518},"https://en.wikipedia.org/wiki/Texture_atlas",[519],"nofollow","texture atlas",". A typical ",[510,523,512],{}," will use:",[526,527,528,532],"ul",{},[529,530,531],"li",{},"An image containing multiple sprites",[529,533,534],{},"A JSON atlas containing the individual sprite coordinates in the image",[536,537,15],"h2",{"id":538},"usage",[540,541,551],"pre",{"className":542,"code":543,"highlights":544,"language":550,"meta":480,"style":480},"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",[482,545,546,547,548,549],10,11,12,13,14,"vue",[510,552,553,587,617,623,652,662,667,677,688,699,708,724,739,757,763,773,783],{"__ignoreMap":480},[554,555,557,561,565,569,572,575,578,582,584],"span",{"class":556,"line":481},"line",[554,558,560],{"class":559},"sMK4o","\u003C",[554,562,564],{"class":563},"swJcz","script",[554,566,568],{"class":567},"spNyl"," setup",[554,570,571],{"class":567}," lang",[554,573,574],{"class":559},"=",[554,576,577],{"class":559},"\"",[554,579,581],{"class":580},"sfazB","ts",[554,583,577],{"class":559},[554,585,586],{"class":559},">\n",[554,588,591,595,598,602,605,608,611,614],{"class":589,"line":482},[556,590],"highlight",[554,592,594],{"class":593},"s7zQu","import",[554,596,597],{"class":559}," {",[554,599,601],{"class":600},"sTEyZ"," AnimatedSprite",[554,603,604],{"class":559}," }",[554,606,607],{"class":593}," from",[554,609,610],{"class":559}," '",[554,612,613],{"class":580},"@tresjs/cientos",[554,615,616],{"class":559},"'\n",[554,618,620],{"class":556,"line":619},3,[554,621,622],{"emptyLinePlaceholder":488},"\n",[554,624,626,629,632,634,638,641,644,647,649],{"class":556,"line":625},4,[554,627,628],{"class":567},"const",[554,630,631],{"class":600}," currentAnimation ",[554,633,574],{"class":559},[554,635,637],{"class":636},"s2Zo4"," ref",[554,639,640],{"class":600},"(",[554,642,643],{"class":559},"'",[554,645,646],{"class":580},"cientosIdle",[554,648,643],{"class":559},[554,650,651],{"class":600},")\n",[554,653,655,658,660],{"class":556,"line":654},5,[554,656,657],{"class":559},"\u003C/",[554,659,564],{"class":563},[554,661,586],{"class":559},[554,663,665],{"class":556,"line":664},6,[554,666,622],{"emptyLinePlaceholder":488},[554,668,670,672,675],{"class":556,"line":669},7,[554,671,560],{"class":559},[554,673,674],{"class":563},"template",[554,676,586],{"class":559},[554,678,680,683,686],{"class":556,"line":679},8,[554,681,682],{"class":559},"  \u003C",[554,684,685],{"class":563},"TresCanvas",[554,687,586],{"class":559},[554,689,691,694,697],{"class":556,"line":690},9,[554,692,693],{"class":559},"    \u003C",[554,695,696],{"class":563},"Suspense",[554,698,586],{"class":559},[554,700,702,705],{"class":701,"line":545},[556,590],[554,703,704],{"class":559},"      \u003C",[554,706,707],{"class":563},"AnimatedSprite\n",[554,709,711,714,716,718,721],{"class":710,"line":546},[556,590],[554,712,713],{"class":567},"        image",[554,715,574],{"class":559},[554,717,577],{"class":559},[554,719,720],{"class":580},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosTexture.png",[554,722,723],{"class":559},"\"\n",[554,725,727,730,732,734,737],{"class":726,"line":547},[556,590],[554,728,729],{"class":567},"        atlas",[554,731,574],{"class":559},[554,733,577],{"class":559},[554,735,736],{"class":580},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosAtlas.json",[554,738,723],{"class":559},[554,740,742,745,748,750,752,755],{"class":741,"line":548},[556,590],[554,743,744],{"class":559},"        :",[554,746,747],{"class":567},"animation",[554,749,574],{"class":559},[554,751,577],{"class":559},[554,753,754],{"class":600},"currentAnimation",[554,756,723],{"class":559},[554,758,760],{"class":759,"line":549},[556,590],[554,761,762],{"class":559},"      />\n",[554,764,766,769,771],{"class":556,"line":765},15,[554,767,768],{"class":559},"    \u003C/",[554,770,696],{"class":563},[554,772,586],{"class":559},[554,774,776,779,781],{"class":556,"line":775},16,[554,777,778],{"class":559},"  \u003C/",[554,780,685],{"class":563},[554,782,586],{"class":559},[554,784,786,788,790],{"class":556,"line":785},17,[554,787,657],{"class":559},[554,789,674],{"class":563},[554,791,586],{"class":559},[793,794,795],"prose-warning",{},[472,796,797,799,800,803],{},[510,798,512],{}," loads resources asynchronously, so it must be wrapped in a ",[510,801,802],{},"\u003CSuspense />",".",[536,805,807],{"id":806},"compiling-an-atlas","Compiling an atlas",[472,809,810,811,813],{},"In typical usage, ",[510,812,512],{}," requires both the URL to a texture of compiled sprite images and a JSON atlas containing information about the sprites in the texture.",[526,815,816,822],{},[529,817,818],{},[515,819,821],{"href":720,"rel":820},[519],"example compiled texture",[529,823,824],{},[515,825,827],{"href":736,"rel":826},[519],"example JSON atlas",[472,829,830,831,836],{},"Compiling source images into a texture atlas is usually handled by third-party software. You may find ",[515,832,835],{"href":833,"rel":834},"https://www.codeandweb.com/texturepacker",[519],"TexturePacker"," useful.",[536,838,840],{"id":839},"without-an-atlas","Without an atlas",[472,842,843,844,847],{},"There may be cases where you don't want to supply an atlas to the ",[510,845,846],{},"atlas"," prop. To do so:",[526,849,850,853,856,859],{},[529,851,852],{},"Compile your source images into a single image texture.",[529,854,855],{},"Space each sprite into equally sized columns and rows in the compiled image texture.",[529,857,858],{},"Ensure no extra padding has been added to the compiled image texture.",[529,860,861,862,864,865,803],{},"Set the ",[510,863,846],{}," prop to number of columns, number of rows as ",[510,866,867],{},"[number, number]",[536,869,871],{"id":870},"spritesheets-in-the-wild","Spritesheets in the wild",[793,873,874],{},[472,875,876,877,879],{},"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 ",[510,878,512],{},". In many cases, it's advisable to recompile the spritesheet.",[881,882,884],"h3",{"id":883},"how-to-recompile-an-existing-spritesheet-image","How to recompile an existing spritesheet image",[526,886,887,890,893,896,909],{},[529,888,889],{},"Cut individual sprites from the spritesheet and paste them into separate layers in an image editing application, e.g., GIMP.",[529,891,892],{},"Align the layers for animation. Toggling layer visibility on/off will show you how the animation will display, frame to frame.",[529,894,895],{},"Export layers as individual images.",[529,897,898,899,902,905,906,908],{},"Name the individual images according to the following pattern: ",[900,901],"br",{},[510,903,904],{},"[animation name][frame number].[extension]"," ",[900,907],{},"E.g., walk000.png, walk001.png, idle000.png, idle001.png",[529,910,911],{},"Compile individual images into an image texture and atlas using a texture packing application, like TexturePacker.",[536,913,915],{"id":914},"props","Props",[917,918,919,936],"table",{},[920,921,922],"thead",{},[923,924,925,930,933],"tr",{},[926,927,929],"th",{"align":928},"left","Name",[926,931,932],{"align":928},"Description",[926,934,935],{"align":928},"Default",[937,938,939,953,993,1053,1068,1084,1108,1123,1137,1151,1165,1184,1208,1228,1247],"tbody",{},[923,940,941,945,951],{},[942,943,944],"td",{"align":928},"image",[942,946,947,950],{"align":928},[510,948,949],{},"string"," – URL of the image texture or an image dataURL. This prop is not reactive.",[942,952],{"align":928},[923,954,955,957,991],{},[942,956,846],{"align":928},[942,958,959,962,963,988,990],{"align":928},[510,960,961],{},"string | Atlasish"," – ",[526,964,965,971,977,982],{},[529,966,967,968,970],{},"If ",[510,969,949],{},", the URL of the JSON atlas.",[529,972,967,973,976],{},[510,974,975],{},"number",", the number of columns in the texture.",[529,978,967,979,981],{},[510,980,867],{},", the number of columns/rows in the texture.",[529,983,967,984,987],{},[510,985,986],{},"AtlasData",", the atlas as a JS object.",[900,989],{},"This prop is not reactive.",[942,992],{"align":928},[923,994,995,998,1051],{},[942,996,997],{"align":928},"definitions",[942,999,1000,1003,1004,1006,1007,1009,1011,1012,1014,1016,1017],{"align":928},[510,1001,1002],{},"Record\u003Cstring, string>"," – Specify playback frame order and repeated frames (delays). ",[510,1005,997],{}," is a record where keys are atlas animation names and values are strings containing an animation definition.",[900,1008],{},[900,1010],{},"A \"animation definition\" comma-separated string of frame numbers with optional parentheses-surrounded durations.",[900,1013],{},[900,1015],{},"Here is how various definition strings convert to arrays of frames for playback:",[526,1018,1019,1026,1033,1039,1045],{},[529,1020,1021,1022,1025],{},"\"0,2,1\" - ",[554,1023,1024],{},"0,2,1",", i.e., play frame 0, 2, then 1.",[529,1027,1028,1029,1032],{},"\"2(10)\" - ",[554,1030,1031],{},"2,2,2,2,2,2,2,2,2,2",", i.e., play from 2 10 times.",[529,1034,1035,1036],{},"\"1-4\" - ",[554,1037,1038],{},"1,2,3,4",[529,1040,1041,1042],{},"\"10-5(2)\" - ",[554,1043,1044],{},"10,10,9,9,8,8,7,7,6,6,5,5",[529,1046,1047,1048],{},"\"1-4(3),10(2)\" - ",[554,1049,1050],{},"1,1,1,2,2,2,3,3,3,4,4,4,10,10",[942,1052],{"align":928},[923,1054,1055,1058,1063],{},[942,1056,1057],{"align":928},"fps",[942,1059,1060,1062],{"align":928},[510,1061,975],{}," – Desired frames per second of the animation.",[942,1064,1065],{"align":928},[510,1066,1067],{},"30",[923,1069,1070,1073,1079],{},[942,1071,1072],{"align":928},"loop",[942,1074,1075,1078],{"align":928},[510,1076,1077],{},"boolean"," – Whether or not the animation should loop.",[942,1080,1081],{"align":928},[510,1082,1083],{},"true",[923,1085,1086,1088,1103],{},[942,1087,747],{"align":928},[942,1089,1090,1093,1094,1096,1097,1099,1100,1102],{"align":928},[510,1091,1092],{},"string | [number, number] | number"," – If ",[510,1095,949],{},", name of the animation to play. If ",[510,1098,867],{},", start and end frames of the animation. If ",[510,1101,975],{},", frame number to display.",[942,1104,1105],{"align":928},[510,1106,1107],{},"0",[923,1109,1110,1113,1118],{},[942,1111,1112],{"align":928},"paused",[942,1114,1115,1117],{"align":928},[510,1116,1077],{}," – Whether the animation is paused.",[942,1119,1120],{"align":928},[510,1121,1122],{},"false",[923,1124,1125,1128,1133],{},[942,1126,1127],{"align":928},"reversed",[942,1129,1130,1132],{"align":928},[510,1131,1077],{}," – Whether to play the animation in reverse.",[942,1134,1135],{"align":928},[510,1136,1122],{},[923,1138,1139,1142,1147],{},[942,1140,1141],{"align":928},"flipX",[942,1143,1144,1146],{"align":928},[510,1145,1077],{}," – Whether the sprite should be flipped, left to right.",[942,1148,1149],{"align":928},[510,1150,1122],{},[923,1152,1153,1156,1161],{},[942,1154,1155],{"align":928},"resetOnEnd",[942,1157,1158,1160],{"align":928},[510,1159,1077],{}," – For a non-looping animation, when the animation ends, whether to display the zeroth frame.",[942,1162,1163],{"align":928},[510,1164,1122],{},[923,1166,1167,1170,1180],{},[942,1168,1169],{"align":928},"asSprite",[942,1171,1172,1174,1175],{"align":928},[510,1173,1077],{}," – Whether to display the object as a THREE.Sprite. ",[515,1176,1179],{"href":1177,"rel":1178},"https://threejs.org/docs/?q=sprite#api/en/objects/Sprite",[519],"See THREE.Sprite",[942,1181,1182],{"align":928},[510,1183,1083],{},[923,1185,1186,1189,1203],{},[942,1187,1188],{"align":928},"center",[942,1190,1191,1194,1195,1198,1199,1202],{"align":928},[510,1192,1193],{},"TresVector2"," – Anchor point of the object. A value of ",[554,1196,1197],{},"0.5, 0.5"," corresponds to the center. ",[554,1200,1201],{},"0, 0"," is left, bottom.",[942,1204,1205],{"align":928},[510,1206,1207],{},"[0.5, 0.5]",[923,1209,1210,1213,1223],{},[942,1211,1212],{"align":928},"alphaTest",[942,1214,1215,1217,1218],{"align":928},[510,1216,975],{}," – Alpha test value for the material. ",[515,1219,1222],{"href":1220,"rel":1221},"https://threejs.org/docs/#api/en/materials/Material.alphaTest",[519],"See THREE.Material.alphaTest",[942,1224,1225],{"align":928},[510,1226,1227],{},"0.0",[923,1229,1230,1233,1243],{},[942,1231,1232],{"align":928},"depthTest",[942,1234,1235,1237,1238],{"align":928},[510,1236,1077],{}," – Depth test value for the material. ",[515,1239,1242],{"href":1240,"rel":1241},"https://threejs.org/docs/#api/en/materials/Material.depthTest",[519],"See THREE.Material.depthTest",[942,1244,1245],{"align":928},[510,1246,1083],{},[923,1248,1249,1252,1262],{},[942,1250,1251],{"align":928},"depthWrite",[942,1253,1254,1256,1257],{"align":928},[510,1255,1077],{}," – Depth write value for the material. ",[515,1258,1261],{"href":1259,"rel":1260},"https://threejs.org/docs/#api/en/materials/Material.depthWrite",[519],"See THREE.Material.depthWrite",[942,1263,1264],{"align":928},[510,1265,1083],{},[536,1267,1269],{"id":1268},"events","Events",[917,1271,1272,1284],{},[920,1273,1274],{},[923,1275,1276,1279,1281],{},[926,1277,1278],{},"Event",[926,1280,932],{},[926,1282,1283],{},"Argument",[937,1285,1286,1301,1322],{},[923,1287,1288,1293,1296],{},[942,1289,1290],{},[510,1291,1292],{},"frame",[942,1294,1295],{},"Emitted when the displayed animation frame changes – at most once per tick, frames may be dropped",[942,1297,1298,1300],{},[510,1299,949],{}," – Name of the newly displayed frame",[923,1302,1303,1308,1317],{},[942,1304,1305],{},[510,1306,1307],{},"end",[942,1309,1310,1311,1314,1315],{},"Emitted when the animation ends – ",[510,1312,1313],{},"props.loop"," must be set to ",[510,1316,1122],{},[942,1318,1319,1321],{},[510,1320,949],{}," – Name of the ending frame",[923,1323,1324,1328,1335],{},[942,1325,1326],{},[510,1327,1072],{},[942,1329,1330,1331,1314,1333],{},"Emitted when the animation loops – ",[510,1332,1313],{},[510,1334,1083],{},[942,1336,1337,1339],{},[510,1338,949],{}," – Name of the frame at the end of the loop",[536,1341,1342],{"id":747},"Animation",[472,1344,1345,1346,1349],{},"The ",[510,1347,1348],{},":animation"," prop holds either the name of the currently playing animation or a range of frames to play, or a frame number to display.",[881,1351,1353],{"id":1352},"using-named-animations-as-animation","Using named animations as animation",[472,1355,1356],{},"When individual files are converted to a spritesheet/atlas, typically the original images' filenames will be included in the atlas.",[472,1358,1359,1361],{},[510,1360,512],{}," uses those filenames to automatically group images into animations.",[472,1363,1364],{},"Use either of the following naming conventions for your source images ...",[526,1366,1367,1372],{},[529,1368,1369],{},[510,1370,1371],{},"[animation name][frame number].[file_extension]",[529,1373,1374],{},[510,1375,1376],{},"[animation name]_[frame number].[file_extension]",[472,1378,1379,1380,1382,1383,1386,1387,1389,1390,1392],{},"... then ",[510,1381,512],{}," will automatically make all ",[510,1384,1385],{},"[animation name]"," available for playback. Just pass ",[510,1388,1385],{}," to the component's ",[510,1391,1348],{}," prop.",[881,1394,1396],{"id":1395},"example","Example",[472,1398,1399],{},"For our Cientos heart cartoon character animation, here's how the filenames map to animation names.",[917,1401,1402,1412],{},[920,1403,1404],{},[923,1405,1406,1409],{},[926,1407,1408],{},"Filenames",[926,1410,1411],{},"Animation name",[937,1413,1414,1421,1429],{},[923,1415,1416,1419],{},[942,1417,1418],{},"cientosIdle0000.png, cientosIdle0001.png, ...",[942,1420,646],{},[923,1422,1423,1426],{},[942,1424,1425],{},"cientosIdleToWalkTransition0000.png",[942,1427,1428],{},"cientosIdleToWalkTransition",[923,1430,1431,1434],{},[942,1432,1433],{},"cientosWalk0000.png, cientosWalk0001.png, ...",[942,1435,1436],{},"cientosWalk",[536,1438,1439],{"id":997},"Definitions",[472,1441,1442,1443,1446,1447,1451],{},"You can supply an object to the ",[510,1444,1445],{},":definitions"," prop. Any ",[515,1448,1450],{"href":1449},"#animation","named animation"," can be a key. The value is a string that specifies frame order and delays.",[881,1453,1455],{"id":1454},"demo","Demo",[472,1457,1458,1459,1461,1462,803],{},"In this demo, the 'idle' animation is comprised of six different images. By default, those images will play sequentially when the ",[510,1460,1348],{}," prop is ",[510,1463,1464],{},"'idle'",[472,1466,1467,1468,1470,1471,1474],{},"But below, we've added a ",[510,1469,1445],{}," prop with this value for the ",[510,1472,1473],{},"idle"," key:",[540,1476,1481],{"className":1477,"code":1479,"language":1480},[1478],"language-text","'0-5, 0(10), 1-2, 3(20), 4-5, 0-5(3)'\n","text",[510,1482,1479],{"__ignoreMap":480},[472,1484,1485],{},"So, instead of playing images 0-5 sequentially, this animation will play instead:",[526,1487,1488,1497,1511],{},[529,1489,1490,1493,1494,1496],{},[510,1491,1492],{},"0-5"," – Play all six images (",[510,1495,1492],{},") of the animation normally.",[529,1498,1499,1502,1503,1506,1507,1510],{},[510,1500,1501],{},"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 (",[510,1504,1505],{},"0(10)",") and a delay of twenty frames at the top of the bounce (",[510,1508,1509],{},"3(20)",").",[529,1512,1513,1516],{},[510,1514,1515],{},"0-5(3)"," – Finally, play all six images of the animation with a delay of three frames each.",[536,1518,1519],{"id":1188},"Center",[472,1521,1522,1523,1526],{},"In addition to being the sprite's anchor point, the ",[510,1524,1525],{},":center"," prop also controls how differently sized source images will \"grow\" and \"shrink\". Namely, they \"grow out from\" and \"shrink towards\" the center.",[1528,1529,1530],"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":480,"searchDepth":481,"depth":482,"links":1532},[1533,1534,1535,1536,1539,1540,1541,1545,1548],{"id":538,"depth":482,"text":15},{"id":806,"depth":482,"text":807},{"id":839,"depth":482,"text":840},{"id":870,"depth":482,"text":871,"children":1537},[1538],{"id":883,"depth":619,"text":884},{"id":914,"depth":482,"text":915},{"id":1268,"depth":482,"text":1269},{"id":747,"depth":482,"text":1342,"children":1542},[1543,1544],{"id":1352,"depth":619,"text":1353},{"id":1395,"depth":619,"text":1396},{"id":997,"depth":482,"text":1439,"children":1546},[1547],{"id":1454,"depth":619,"text":1455},{"id":1188,"depth":482,"text":1519},{},{"title":397,"description":495},"TOx2TSEHnQeUR_DoVqP-W-cCHOVI1DisvWaE29LwWYA",{"id":1553,"title":401,"body":1554,"description":2040,"extension":485,"links":486,"meta":2041,"navigation":488,"path":402,"seo":2042,"stem":403,"__hash__":2043},"docs/2.api/9.objects/cube-camera.md",{"type":469,"value":1555,"toc":2036},[1556,1561,1571,1576,1578,1929,1931,2033],[502,1557,1558],{},[1559,1560],"objects-cube-camera",{},[472,1562,1563,1566,1567,1570],{},[510,1564,1565],{},"\u003CCubeCamera />"," creates a ",[510,1568,1569],{},"THREE.CubeCamera"," and uses it to render an environment map of your scene. The environment map is then applied to component's children.",[472,1572,1573,1575],{},[510,1574,1565],{}," makes its children invisible while rendering to the internal buffer so that they are not included in the reflection.",[536,1577,15],{"id":538},[540,1579,1582],{"className":542,"code":1580,"highlights":1581,"language":550,"meta":480,"style":480},"\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",[482,545,765],[510,1583,1584,1604,1630,1638,1642,1650,1658,1700,1709,1713,1750,1759,1796,1831,1840,1849,1853,1876,1911,1920],{"__ignoreMap":480},[554,1585,1586,1588,1590,1592,1594,1596,1598,1600,1602],{"class":556,"line":481},[554,1587,560],{"class":559},[554,1589,564],{"class":563},[554,1591,568],{"class":567},[554,1593,571],{"class":567},[554,1595,574],{"class":559},[554,1597,577],{"class":559},[554,1599,581],{"class":580},[554,1601,577],{"class":559},[554,1603,586],{"class":559},[554,1605,1607,1609,1611,1614,1617,1620,1622,1624,1626,1628],{"class":1606,"line":482},[556,590],[554,1608,594],{"class":593},[554,1610,597],{"class":559},[554,1612,1613],{"class":600}," CubeCamera",[554,1615,1616],{"class":559},",",[554,1618,1619],{"class":600}," OrbitControls",[554,1621,604],{"class":559},[554,1623,607],{"class":593},[554,1625,610],{"class":559},[554,1627,613],{"class":580},[554,1629,616],{"class":559},[554,1631,1632,1634,1636],{"class":556,"line":619},[554,1633,657],{"class":559},[554,1635,564],{"class":563},[554,1637,586],{"class":559},[554,1639,1640],{"class":556,"line":625},[554,1641,622],{"emptyLinePlaceholder":488},[554,1643,1644,1646,1648],{"class":556,"line":654},[554,1645,560],{"class":559},[554,1647,674],{"class":563},[554,1649,586],{"class":559},[554,1651,1652,1654,1656],{"class":556,"line":664},[554,1653,682],{"class":559},[554,1655,685],{"class":563},[554,1657,586],{"class":559},[554,1659,1660,1662,1665,1668,1671,1673,1675,1678,1681,1684,1687,1689,1692,1695,1697],{"class":556,"line":669},[554,1661,693],{"class":559},[554,1663,1664],{"class":563},"TresPerspectiveCamera",[554,1666,1667],{"class":559}," :",[554,1669,1670],{"class":567},"position",[554,1672,574],{"class":559},[554,1674,577],{"class":559},[554,1676,1677],{"class":559},"[",[554,1679,1107],{"class":1680},"sbssI",[554,1682,1683],{"class":559},", ",[554,1685,1686],{"class":1680},"2",[554,1688,1683],{"class":559},[554,1690,1691],{"class":1680},"5",[554,1693,1694],{"class":559},"]",[554,1696,577],{"class":559},[554,1698,1699],{"class":559}," />\n",[554,1701,1702,1704,1707],{"class":556,"line":679},[554,1703,693],{"class":559},[554,1705,1706],{"class":563},"OrbitControls",[554,1708,1699],{"class":559},[554,1710,1711],{"class":556,"line":690},[554,1712,622],{"emptyLinePlaceholder":488},[554,1714,1716,1718,1720,1722,1725,1727,1729,1732,1734,1736,1739,1741,1743,1746,1748],{"class":1715,"line":545},[556,590],[554,1717,693],{"class":559},[554,1719,401],{"class":563},[554,1721,1667],{"class":559},[554,1723,1724],{"class":567},"resolution",[554,1726,574],{"class":559},[554,1728,577],{"class":559},[554,1730,1731],{"class":1680},"256",[554,1733,577],{"class":559},[554,1735,1667],{"class":559},[554,1737,1738],{"class":567},"frames",[554,1740,574],{"class":559},[554,1742,577],{"class":559},[554,1744,1745],{"class":559},"Infinity",[554,1747,577],{"class":559},[554,1749,586],{"class":559},[554,1751,1752,1754,1757],{"class":556,"line":546},[554,1753,704],{"class":559},[554,1755,1756],{"class":563},"TresMesh",[554,1758,586],{"class":559},[554,1760,1761,1764,1767,1769,1772,1774,1776,1778,1781,1783,1786,1788,1790,1792,1794],{"class":556,"line":547},[554,1762,1763],{"class":559},"        \u003C",[554,1765,1766],{"class":563},"TresSphereGeometry",[554,1768,1667],{"class":559},[554,1770,1771],{"class":567},"args",[554,1773,574],{"class":559},[554,1775,577],{"class":559},[554,1777,1677],{"class":559},[554,1779,1780],{"class":1680},"1",[554,1782,1683],{"class":559},[554,1784,1785],{"class":1680},"32",[554,1787,1683],{"class":559},[554,1789,1785],{"class":1680},[554,1791,1694],{"class":559},[554,1793,577],{"class":559},[554,1795,1699],{"class":559},[554,1797,1798,1800,1803,1805,1808,1810,1812,1814,1816,1818,1821,1823,1825,1827,1829],{"class":556,"line":548},[554,1799,1763],{"class":559},[554,1801,1802],{"class":563},"TresMeshStandardMaterial",[554,1804,1667],{"class":559},[554,1806,1807],{"class":567},"metalness",[554,1809,574],{"class":559},[554,1811,577],{"class":559},[554,1813,1780],{"class":1680},[554,1815,577],{"class":559},[554,1817,1667],{"class":559},[554,1819,1820],{"class":567},"roughness",[554,1822,574],{"class":559},[554,1824,577],{"class":559},[554,1826,1107],{"class":1680},[554,1828,577],{"class":559},[554,1830,1699],{"class":559},[554,1832,1833,1836,1838],{"class":556,"line":549},[554,1834,1835],{"class":559},"      \u003C/",[554,1837,1756],{"class":563},[554,1839,586],{"class":559},[554,1841,1843,1845,1847],{"class":1842,"line":765},[556,590],[554,1844,768],{"class":559},[554,1846,401],{"class":563},[554,1848,586],{"class":559},[554,1850,1851],{"class":556,"line":775},[554,1852,622],{"emptyLinePlaceholder":488},[554,1854,1855,1857,1860,1862,1865,1867,1869,1872,1874],{"class":556,"line":785},[554,1856,693],{"class":559},[554,1858,1859],{"class":563},"TresAmbientLight",[554,1861,1667],{"class":559},[554,1863,1864],{"class":567},"intensity",[554,1866,574],{"class":559},[554,1868,577],{"class":559},[554,1870,1871],{"class":1680},"0.5",[554,1873,577],{"class":559},[554,1875,1699],{"class":559},[554,1877,1879,1881,1884,1886,1888,1890,1892,1894,1896,1898,1900,1902,1905,1907,1909],{"class":556,"line":1878},18,[554,1880,693],{"class":559},[554,1882,1883],{"class":563},"TresDirectionalLight",[554,1885,1667],{"class":559},[554,1887,1670],{"class":567},[554,1889,574],{"class":559},[554,1891,577],{"class":559},[554,1893,1677],{"class":559},[554,1895,1107],{"class":1680},[554,1897,1683],{"class":559},[554,1899,1686],{"class":1680},[554,1901,1683],{"class":559},[554,1903,1904],{"class":1680},"4",[554,1906,1694],{"class":559},[554,1908,577],{"class":559},[554,1910,1699],{"class":559},[554,1912,1914,1916,1918],{"class":556,"line":1913},19,[554,1915,778],{"class":559},[554,1917,685],{"class":563},[554,1919,586],{"class":559},[554,1921,1923,1925,1927],{"class":556,"line":1922},20,[554,1924,657],{"class":559},[554,1926,674],{"class":563},[554,1928,586],{"class":559},[536,1930,915],{"id":914},[917,1932,1933,1944],{},[920,1934,1935],{},[923,1936,1937,1940,1942],{},[926,1938,1939],{"align":928},"Prop",[926,1941,932],{"align":928},[926,1943,935],{},[937,1945,1946,1965,1979,1994,2009,2021],{},[923,1947,1948,1952,1961],{},[942,1949,1950],{"align":928},[510,1951,1738],{},[942,1953,1954,1955,1957,1958,1960],{"align":928},"Number of frames to render. Set to ",[510,1956,1780],{}," for a static scene. ",[510,1959,1745],{}," to update continuously.",[942,1962,1963],{},[510,1964,1745],{},[923,1966,1967,1971,1974],{},[942,1968,1969],{"align":928},[510,1970,1724],{},[942,1972,1973],{"align":928},"Resolution of the FBO",[942,1975,1976],{},[510,1977,1978],{},"255",[923,1980,1981,1986,1989],{},[942,1982,1983],{"align":928},[510,1984,1985],{},"near",[942,1987,1988],{"align":928},"Camera near",[942,1990,1991],{},[510,1992,1993],{},"0.1",[923,1995,1996,2001,2004],{},[942,1997,1998],{"align":928},[510,1999,2000],{},"far",[942,2002,2003],{"align":928},"Camera far",[942,2005,2006],{},[510,2007,2008],{},"1000",[923,2010,2011,2016,2019],{},[942,2012,2013],{"align":928},[510,2014,2015],{},"envMap",[942,2017,2018],{"align":928},"Custom environment map that is temporarily set as the scene's background",[942,2020],{},[923,2022,2023,2028,2031],{},[942,2024,2025],{"align":928},[510,2026,2027],{},"fog",[942,2029,2030],{"align":928},"Custom fog that is temporarily set as the scene's fog",[942,2032],{},[1528,2034,2035],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":480,"searchDepth":481,"depth":482,"links":2037},[2038,2039],{"id":538,"depth":482,"text":15},{"id":914,"depth":482,"text":915},"Render environment maps for reflective objects.",{},{"title":401,"description":2040},"guPReQbllwq5wU5oLp9_7X7yFZih0xBoLQvebR42uzE",{"id":2045,"title":405,"body":2046,"description":3353,"extension":485,"links":486,"meta":3354,"navigation":488,"path":406,"seo":3355,"stem":407,"__hash__":3356},"docs/2.api/9.objects/fbo.md",{"type":469,"value":2047,"toc":3345},[2048,2054,2057,2064,2066,2843,2845,2963,2967,2969,2975,2982,2985,3254,3258,3342],[2049,2050,2051],"scene-wrapper",{},[2052,2053],"objects-fbo",{},[472,2055,2056],{},"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.",[472,2058,2059,2060,2063],{},"Cientos provides an ",[510,2061,2062],{},"\u003CFbo />"," component make it easy to use FBOs in your application.",[536,2065,15],{"id":538},[540,2067,2074],{"className":542,"code":2068,"highlights":2069,"language":550,"meta":480,"style":480},"\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",[482,2070,2071,2072,2073],23,24,25,26,[510,2075,2076,2096,2120,2143,2162,2181,2185,2225,2253,2257,2291,2322,2352,2378,2383,2391,2395,2403,2439,2471,2479,2484,2515,2523,2538,2556,2583,2589,2598,2632,2637,2645,2662,2692,2697,2706,2711,2719,2732,2760,2766,2806,2816,2825,2834],{"__ignoreMap":480},[554,2077,2078,2080,2082,2084,2086,2088,2090,2092,2094],{"class":556,"line":481},[554,2079,560],{"class":559},[554,2081,564],{"class":563},[554,2083,568],{"class":567},[554,2085,571],{"class":567},[554,2087,574],{"class":559},[554,2089,577],{"class":559},[554,2091,581],{"class":580},[554,2093,577],{"class":559},[554,2095,586],{"class":559},[554,2097,2099,2101,2103,2106,2108,2110,2112,2114,2116,2118],{"class":2098,"line":482},[556,590],[554,2100,594],{"class":593},[554,2102,597],{"class":559},[554,2104,2105],{"class":600}," Fbo",[554,2107,1616],{"class":559},[554,2109,1619],{"class":600},[554,2111,604],{"class":559},[554,2113,607],{"class":593},[554,2115,610],{"class":559},[554,2117,613],{"class":580},[554,2119,616],{"class":559},[554,2121,2122,2124,2127,2129,2132,2134,2136,2138,2141],{"class":556,"line":619},[554,2123,594],{"class":593},[554,2125,2126],{"class":593}," type",[554,2128,597],{"class":559},[554,2130,2131],{"class":600}," TresObject",[554,2133,604],{"class":559},[554,2135,607],{"class":593},[554,2137,610],{"class":559},[554,2139,2140],{"class":580},"@tresjs/core",[554,2142,616],{"class":559},[554,2144,2145,2147,2149,2152,2154,2156,2158,2160],{"class":556,"line":625},[554,2146,594],{"class":593},[554,2148,597],{"class":559},[554,2150,2151],{"class":600}," TresCanvas",[554,2153,604],{"class":559},[554,2155,607],{"class":593},[554,2157,610],{"class":559},[554,2159,2140],{"class":580},[554,2161,616],{"class":559},[554,2163,2164,2166,2168,2171,2173,2175,2177,2179],{"class":556,"line":654},[554,2165,594],{"class":593},[554,2167,597],{"class":559},[554,2169,2170],{"class":600}," shallowRef",[554,2172,604],{"class":559},[554,2174,607],{"class":593},[554,2176,610],{"class":559},[554,2178,550],{"class":580},[554,2180,616],{"class":559},[554,2182,2183],{"class":556,"line":664},[554,2184,622],{"emptyLinePlaceholder":488},[554,2186,2187,2189,2192,2194,2196,2198,2202,2205,2207,2210,2213,2216,2218,2220,2223],{"class":556,"line":669},[554,2188,628],{"class":567},[554,2190,2191],{"class":600}," fboRef ",[554,2193,574],{"class":559},[554,2195,2170],{"class":636},[554,2197,560],{"class":559},[554,2199,2201],{"class":2200},"sBMFI","InstanceType",[554,2203,2204],{"class":559},"\u003Ctypeof",[554,2206,2105],{"class":600},[554,2208,2209],{"class":559},">",[554,2211,2212],{"class":559}," |",[554,2214,2215],{"class":2200}," null",[554,2217,2209],{"class":559},[554,2219,640],{"class":600},[554,2221,2222],{"class":559},"null",[554,2224,651],{"class":600},[554,2226,2227,2229,2232,2234,2236,2238,2241,2243,2245,2247,2249,2251],{"class":556,"line":679},[554,2228,628],{"class":567},[554,2230,2231],{"class":600}," torusRef ",[554,2233,574],{"class":559},[554,2235,2170],{"class":636},[554,2237,560],{"class":559},[554,2239,2240],{"class":2200},"TresObject",[554,2242,2212],{"class":559},[554,2244,2215],{"class":2200},[554,2246,2209],{"class":559},[554,2248,640],{"class":600},[554,2250,2222],{"class":559},[554,2252,651],{"class":600},[554,2254,2255],{"class":556,"line":690},[554,2256,622],{"emptyLinePlaceholder":488},[554,2258,2259,2262,2265,2268,2272,2275,2277,2279,2282,2285,2288],{"class":556,"line":545},[554,2260,2261],{"class":567},"function",[554,2263,2264],{"class":636}," onLoop",[554,2266,2267],{"class":559},"({",[554,2269,2271],{"class":2270},"sHdIc"," elapsed",[554,2273,2274],{"class":559}," }:",[554,2276,597],{"class":559},[554,2278,2271],{"class":563},[554,2280,2281],{"class":559},":",[554,2283,2284],{"class":2200}," number",[554,2286,2287],{"class":559}," })",[554,2289,2290],{"class":559}," {\n",[554,2292,2293,2296,2299,2302,2305,2307,2310,2313,2316,2319],{"class":556,"line":546},[554,2294,2295],{"class":593},"  if",[554,2297,2298],{"class":563}," (",[554,2300,2301],{"class":559},"!",[554,2303,2304],{"class":600},"torusRef",[554,2306,803],{"class":559},[554,2308,2309],{"class":600},"value",[554,2311,2312],{"class":563},") ",[554,2314,2315],{"class":559},"{",[554,2317,2318],{"class":593}," return",[554,2320,2321],{"class":559}," }\n",[554,2323,2324,2327,2329,2331,2333,2336,2338,2341,2344,2346,2349],{"class":556,"line":547},[554,2325,2326],{"class":600},"  torusRef",[554,2328,803],{"class":559},[554,2330,2309],{"class":600},[554,2332,803],{"class":559},[554,2334,2335],{"class":600},"rotation",[554,2337,803],{"class":559},[554,2339,2340],{"class":600},"x",[554,2342,2343],{"class":559}," =",[554,2345,2271],{"class":600},[554,2347,2348],{"class":559}," *",[554,2350,2351],{"class":1680}," 0.745\n",[554,2353,2354,2356,2358,2360,2362,2364,2366,2369,2371,2373,2375],{"class":556,"line":548},[554,2355,2326],{"class":600},[554,2357,803],{"class":559},[554,2359,2309],{"class":600},[554,2361,803],{"class":559},[554,2363,2335],{"class":600},[554,2365,803],{"class":559},[554,2367,2368],{"class":600},"y",[554,2370,2343],{"class":559},[554,2372,2271],{"class":600},[554,2374,2348],{"class":559},[554,2376,2377],{"class":1680}," 0.361\n",[554,2379,2380],{"class":556,"line":549},[554,2381,2382],{"class":559},"}\n",[554,2384,2385,2387,2389],{"class":556,"line":765},[554,2386,657],{"class":559},[554,2388,564],{"class":563},[554,2390,586],{"class":559},[554,2392,2393],{"class":556,"line":775},[554,2394,622],{"emptyLinePlaceholder":488},[554,2396,2397,2399,2401],{"class":556,"line":785},[554,2398,560],{"class":559},[554,2400,674],{"class":563},[554,2402,586],{"class":559},[554,2404,2405,2407,2409,2411,2414,2416,2418,2421,2423,2426,2428,2430,2432,2435,2437],{"class":556,"line":1878},[554,2406,682],{"class":559},[554,2408,685],{"class":563},[554,2410,1667],{"class":559},[554,2412,2413],{"class":567},"clear-color",[554,2415,574],{"class":559},[554,2417,577],{"class":559},[554,2419,2420],{"class":1680},"0x222",[554,2422,577],{"class":559},[554,2424,2425],{"class":559}," @",[554,2427,1072],{"class":567},[554,2429,574],{"class":559},[554,2431,577],{"class":559},[554,2433,2434],{"class":600},"onLoop",[554,2436,577],{"class":559},[554,2438,586],{"class":559},[554,2440,2441,2443,2445,2447,2449,2451,2453,2455,2457,2459,2461,2463,2465,2467,2469],{"class":556,"line":1913},[554,2442,693],{"class":559},[554,2444,1664],{"class":563},[554,2446,1667],{"class":559},[554,2448,1670],{"class":567},[554,2450,574],{"class":559},[554,2452,577],{"class":559},[554,2454,1677],{"class":559},[554,2456,1107],{"class":1680},[554,2458,1683],{"class":559},[554,2460,1871],{"class":1680},[554,2462,1683],{"class":559},[554,2464,1691],{"class":1680},[554,2466,1694],{"class":559},[554,2468,577],{"class":559},[554,2470,1699],{"class":559},[554,2472,2473,2475,2477],{"class":556,"line":1922},[554,2474,693],{"class":559},[554,2476,1706],{"class":563},[554,2478,1699],{"class":559},[554,2480,2482],{"class":556,"line":2481},21,[554,2483,622],{"emptyLinePlaceholder":488},[554,2485,2487,2489,2492,2494,2496,2498,2500,2502,2505,2507,2509,2511,2513],{"class":556,"line":2486},22,[554,2488,693],{"class":559},[554,2490,2491],{"class":563},"TresGridHelper",[554,2493,1667],{"class":559},[554,2495,1771],{"class":567},[554,2497,574],{"class":559},[554,2499,577],{"class":559},[554,2501,1677],{"class":559},[554,2503,2504],{"class":1680},"10",[554,2506,1683],{"class":559},[554,2508,2504],{"class":1680},[554,2510,1694],{"class":559},[554,2512,577],{"class":559},[554,2514,1699],{"class":559},[554,2516,2518,2520],{"class":2517,"line":2070},[556,590],[554,2519,693],{"class":559},[554,2521,2522],{"class":563},"Fbo\n",[554,2524,2526,2529,2531,2533,2536],{"class":2525,"line":2071},[556,590],[554,2527,2528],{"class":567},"      ref",[554,2530,574],{"class":559},[554,2532,577],{"class":559},[554,2534,2535],{"class":580},"fboRef",[554,2537,723],{"class":559},[554,2539,2541,2544,2547,2549,2551,2554],{"class":2540,"line":2072},[556,590],[554,2542,2543],{"class":559},"      :",[554,2545,2546],{"class":567},"depth",[554,2548,574],{"class":559},[554,2550,577],{"class":559},[554,2552,1122],{"class":2553},"sfNiH",[554,2555,723],{"class":559},[554,2557,2559,2561,2564,2566,2568,2571,2574,2577,2579,2581],{"class":2558,"line":2073},[556,590],[554,2560,2543],{"class":559},[554,2562,2563],{"class":567},"settings",[554,2565,574],{"class":559},[554,2567,577],{"class":559},[554,2569,2570],{"class":559},"{ ",[554,2572,2573],{"class":563},"samples",[554,2575,2576],{"class":559},": ",[554,2578,1780],{"class":1680},[554,2580,604],{"class":559},[554,2582,723],{"class":559},[554,2584,2586],{"class":556,"line":2585},27,[554,2587,2588],{"class":559},"    />\n",[554,2590,2592,2594,2596],{"class":556,"line":2591},28,[554,2593,693],{"class":559},[554,2595,1756],{"class":563},[554,2597,586],{"class":559},[554,2599,2601,2603,2606,2608,2610,2612,2614,2616,2618,2620,2622,2624,2626,2628,2630],{"class":556,"line":2600},29,[554,2602,704],{"class":559},[554,2604,2605],{"class":563},"TresBoxGeometry",[554,2607,1667],{"class":559},[554,2609,1771],{"class":567},[554,2611,574],{"class":559},[554,2613,577],{"class":559},[554,2615,1677],{"class":559},[554,2617,1780],{"class":1680},[554,2619,1683],{"class":559},[554,2621,1780],{"class":1680},[554,2623,1683],{"class":559},[554,2625,1780],{"class":1680},[554,2627,1694],{"class":559},[554,2629,577],{"class":559},[554,2631,1699],{"class":559},[554,2633,2635],{"class":556,"line":2634},30,[554,2636,622],{"emptyLinePlaceholder":488},[554,2638,2640,2642],{"class":556,"line":2639},31,[554,2641,704],{"class":559},[554,2643,2644],{"class":563},"TresMeshBasicMaterial\n",[554,2646,2648,2650,2653,2655,2657,2660],{"class":556,"line":2647},32,[554,2649,744],{"class":559},[554,2651,2652],{"class":567},"color",[554,2654,574],{"class":559},[554,2656,577],{"class":559},[554,2658,2659],{"class":1680},"0xFFFFFF",[554,2661,723],{"class":559},[554,2663,2665,2667,2670,2672,2674,2676,2679,2682,2684,2687,2690],{"class":556,"line":2664},33,[554,2666,744],{"class":559},[554,2668,2669],{"class":567},"map",[554,2671,574],{"class":559},[554,2673,577],{"class":559},[554,2675,2535],{"class":600},[554,2677,2678],{"class":559},"?.",[554,2680,2681],{"class":600},"instance",[554,2683,2678],{"class":559},[554,2685,2686],{"class":600},"texture",[554,2688,2689],{"class":559}," ?? null",[554,2691,723],{"class":559},[554,2693,2695],{"class":556,"line":2694},34,[554,2696,762],{"class":559},[554,2698,2700,2702,2704],{"class":556,"line":2699},35,[554,2701,768],{"class":559},[554,2703,1756],{"class":563},[554,2705,586],{"class":559},[554,2707,2709],{"class":556,"line":2708},36,[554,2710,622],{"emptyLinePlaceholder":488},[554,2712,2714,2716],{"class":556,"line":2713},37,[554,2715,693],{"class":559},[554,2717,2718],{"class":563},"TresMesh\n",[554,2720,2722,2724,2726,2728,2730],{"class":556,"line":2721},38,[554,2723,2528],{"class":567},[554,2725,574],{"class":559},[554,2727,577],{"class":559},[554,2729,2304],{"class":580},[554,2731,723],{"class":559},[554,2733,2735,2737,2739,2741,2743,2745,2748,2750,2752,2754,2756,2758],{"class":556,"line":2734},39,[554,2736,2543],{"class":559},[554,2738,1670],{"class":567},[554,2740,574],{"class":559},[554,2742,577],{"class":559},[554,2744,1677],{"class":559},[554,2746,2747],{"class":1680},"3",[554,2749,1683],{"class":559},[554,2751,1107],{"class":1680},[554,2753,1683],{"class":559},[554,2755,1107],{"class":1680},[554,2757,1694],{"class":559},[554,2759,723],{"class":559},[554,2761,2763],{"class":556,"line":2762},40,[554,2764,2765],{"class":559},"    >\n",[554,2767,2769,2771,2774,2776,2778,2780,2782,2784,2786,2788,2790,2792,2795,2797,2800,2802,2804],{"class":556,"line":2768},41,[554,2770,704],{"class":559},[554,2772,2773],{"class":563},"TresTorusGeometry",[554,2775,1667],{"class":559},[554,2777,1771],{"class":567},[554,2779,574],{"class":559},[554,2781,577],{"class":559},[554,2783,1677],{"class":559},[554,2785,1780],{"class":1680},[554,2787,1683],{"class":559},[554,2789,1871],{"class":1680},[554,2791,1683],{"class":559},[554,2793,2794],{"class":1680},"16",[554,2796,1683],{"class":559},[554,2798,2799],{"class":1680},"100",[554,2801,1694],{"class":559},[554,2803,577],{"class":559},[554,2805,1699],{"class":559},[554,2807,2809,2811,2814],{"class":556,"line":2808},42,[554,2810,704],{"class":559},[554,2812,2813],{"class":563},"TresMeshNormalMaterial",[554,2815,1699],{"class":559},[554,2817,2819,2821,2823],{"class":556,"line":2818},43,[554,2820,768],{"class":559},[554,2822,1756],{"class":563},[554,2824,586],{"class":559},[554,2826,2828,2830,2832],{"class":556,"line":2827},44,[554,2829,778],{"class":559},[554,2831,685],{"class":563},[554,2833,586],{"class":559},[554,2835,2837,2839,2841],{"class":556,"line":2836},45,[554,2838,657],{"class":559},[554,2840,674],{"class":563},[554,2842,586],{"class":559},[536,2844,915],{"id":914},[917,2846,2847,2857],{},[920,2848,2849],{},[923,2850,2851,2853,2855],{},[926,2852,1939],{"align":928},[926,2854,932],{"align":928},[926,2856,935],{},[937,2858,2859,2877,2894,2918,2945],{},[923,2860,2861,2869,2874],{},[942,2862,2863],{"align":928},[2864,2865,2866],"strong",{},[510,2867,2868],{},"width",[942,2870,2871,2873],{"align":928},[510,2872,975],{}," - The width of the FBO.",[942,2875,2876],{},"Width of the canvas",[923,2878,2879,2886,2891],{},[942,2880,2881],{"align":928},[2864,2882,2883],{},[510,2884,2885],{},"height",[942,2887,2888,2890],{"align":928},[510,2889,975],{}," - the height of the FBO",[942,2892,2893],{},"Height of the canvas",[923,2895,2896,2902,2914],{},[942,2897,2898],{"align":928},[2864,2899,2900],{},[510,2901,2546],{},[942,2903,2904,2906,2907,803],{"align":928},[510,2905,1077],{}," - Whether or not the FBO should render the depth to a ",[515,2908,2911],{"href":2909,"rel":2910},"https://threejs.org/docs/?q=webglre#api/en/renderers/WebGLRenderTarget.depthTexture",[519],[510,2912,2913],{},"depthTexture",[942,2915,2916],{},[510,2917,1122],{},[923,2919,2920,2926,2940],{},[942,2921,2922],{"align":928},[2864,2923,2924],{},[510,2925,2563],{},[942,2927,2928,2931,2932],{"align":928},[510,2929,2930],{},"WebGLRenderTargetOptions"," - Every other configuration property for the ",[515,2933,2936,2939],{"href":2934,"rel":2935},"https://threejs.org/docs/#api/en/renderers/WebGLRenderTarget",[519],[510,2937,2938],{},"WebGLRenderTarget"," class",[942,2941,2942],{},[510,2943,2944],{},"{}",[923,2946,2947,2954,2959],{},[942,2948,2949],{"align":928},[2864,2950,2951],{},[510,2952,2953],{},"autoRender",[942,2955,2956,2958],{"align":928},[510,2957,1077],{}," - Whether to automatically render the FBO on the default scene.",[942,2960,2961],{},[510,2962,1083],{},[536,2964,2966],{"id":2965},"usefbo","useFBO",[472,2968,2056],{},[472,2970,2971,2972,2974],{},"Cientos provides a ",[510,2973,2966],{}," composable to make it easy to use FBOs in your application.",[793,2976,2977],{},[472,2978,1345,2979,2981],{},[510,2980,2966],{}," composable must be used inside of a child component since it needs the context of TresCanvas.",[881,2983,15],{"id":2984},"usage-1",[540,2986,2989],{"className":542,"code":2987,"highlights":2988,"language":550,"meta":480,"style":480},"\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",[482,625,654,664,669,679,690,545,546,1922],[510,2990,2991,3011,3031,3035,3052,3066,3079,3091,3101,3114,3120,3128,3136,3140,3148,3156,3188,3192,3198,3212,3234,3238,3246],{"__ignoreMap":480},[554,2992,2993,2995,2997,2999,3001,3003,3005,3007,3009],{"class":556,"line":481},[554,2994,560],{"class":559},[554,2996,564],{"class":563},[554,2998,568],{"class":567},[554,3000,571],{"class":567},[554,3002,574],{"class":559},[554,3004,577],{"class":559},[554,3006,581],{"class":580},[554,3008,577],{"class":559},[554,3010,586],{"class":559},[554,3012,3014,3016,3018,3021,3023,3025,3027,3029],{"class":3013,"line":482},[556,590],[554,3015,594],{"class":593},[554,3017,597],{"class":559},[554,3019,3020],{"class":600}," useFBO",[554,3022,604],{"class":559},[554,3024,607],{"class":593},[554,3026,610],{"class":559},[554,3028,613],{"class":580},[554,3030,616],{"class":559},[554,3032,3033],{"class":556,"line":619},[554,3034,622],{"emptyLinePlaceholder":488},[554,3036,3038,3040,3043,3045,3047,3049],{"class":3037,"line":625},[556,590],[554,3039,628],{"class":567},[554,3041,3042],{"class":600}," fboTarget ",[554,3044,574],{"class":559},[554,3046,3020],{"class":636},[554,3048,640],{"class":600},[554,3050,3051],{"class":559},"{\n",[554,3053,3055,3058,3060,3063],{"class":3054,"line":654},[556,590],[554,3056,3057],{"class":563},"  depth",[554,3059,2281],{"class":559},[554,3061,3062],{"class":2553}," true",[554,3064,3065],{"class":559},",\n",[554,3067,3069,3072,3074,3077],{"class":3068,"line":664},[556,590],[554,3070,3071],{"class":563},"  width",[554,3073,2281],{"class":559},[554,3075,3076],{"class":1680}," 512",[554,3078,3065],{"class":559},[554,3080,3082,3085,3087,3089],{"class":3081,"line":669},[556,590],[554,3083,3084],{"class":563},"  height",[554,3086,2281],{"class":559},[554,3088,3076],{"class":1680},[554,3090,3065],{"class":559},[554,3092,3094,3097,3099],{"class":3093,"line":679},[556,590],[554,3095,3096],{"class":563},"  settings",[554,3098,2281],{"class":559},[554,3100,2290],{"class":559},[554,3102,3104,3107,3109,3112],{"class":3103,"line":690},[556,590],[554,3105,3106],{"class":563},"    samples",[554,3108,2281],{"class":559},[554,3110,3111],{"class":1680}," 1",[554,3113,3065],{"class":559},[554,3115,3117],{"class":3116,"line":545},[556,590],[554,3118,3119],{"class":559},"  },\n",[554,3121,3123,3126],{"class":3122,"line":546},[556,590],[554,3124,3125],{"class":559},"}",[554,3127,651],{"class":600},[554,3129,3130,3132,3134],{"class":556,"line":547},[554,3131,657],{"class":559},[554,3133,564],{"class":563},[554,3135,586],{"class":559},[554,3137,3138],{"class":556,"line":548},[554,3139,622],{"emptyLinePlaceholder":488},[554,3141,3142,3144,3146],{"class":556,"line":549},[554,3143,560],{"class":559},[554,3145,674],{"class":563},[554,3147,586],{"class":559},[554,3149,3150,3152,3154],{"class":556,"line":765},[554,3151,682],{"class":559},[554,3153,1756],{"class":563},[554,3155,586],{"class":559},[554,3157,3158,3160,3162,3164,3166,3168,3170,3172,3174,3176,3178,3180,3182,3184,3186],{"class":556,"line":775},[554,3159,693],{"class":559},[554,3161,2605],{"class":563},[554,3163,1667],{"class":559},[554,3165,1771],{"class":567},[554,3167,574],{"class":559},[554,3169,577],{"class":559},[554,3171,1677],{"class":559},[554,3173,1780],{"class":1680},[554,3175,1683],{"class":559},[554,3177,1780],{"class":1680},[554,3179,1683],{"class":559},[554,3181,1780],{"class":1680},[554,3183,1694],{"class":559},[554,3185,577],{"class":559},[554,3187,1699],{"class":559},[554,3189,3190],{"class":556,"line":785},[554,3191,622],{"emptyLinePlaceholder":488},[554,3193,3194,3196],{"class":556,"line":1878},[554,3195,693],{"class":559},[554,3197,2644],{"class":563},[554,3199,3200,3202,3204,3206,3208,3210],{"class":556,"line":1913},[554,3201,2543],{"class":559},[554,3203,2652],{"class":567},[554,3205,574],{"class":559},[554,3207,577],{"class":559},[554,3209,2659],{"class":1680},[554,3211,723],{"class":559},[554,3213,3215,3217,3219,3221,3223,3226,3228,3230,3232],{"class":3214,"line":1922},[556,590],[554,3216,2543],{"class":559},[554,3218,2669],{"class":567},[554,3220,574],{"class":559},[554,3222,577],{"class":559},[554,3224,3225],{"class":600},"fboTarget",[554,3227,2678],{"class":559},[554,3229,2686],{"class":600},[554,3231,2689],{"class":559},[554,3233,723],{"class":559},[554,3235,3236],{"class":556,"line":2481},[554,3237,2588],{"class":559},[554,3239,3240,3242,3244],{"class":556,"line":2486},[554,3241,778],{"class":559},[554,3243,1756],{"class":563},[554,3245,586],{"class":559},[554,3247,3248,3250,3252],{"class":556,"line":2070},[554,3249,657],{"class":559},[554,3251,674],{"class":563},[554,3253,586],{"class":559},[881,3255,3257],{"id":3256},"options","Options",[917,3259,3260,3270],{},[920,3261,3262],{},[923,3263,3264,3266,3268],{},[926,3265,1939],{"align":928},[926,3267,932],{"align":928},[926,3269,935],{},[937,3271,3272,3286,3300,3321],{},[923,3273,3274,3280,3284],{},[942,3275,3276],{"align":928},[2864,3277,3278],{},[510,3279,2868],{},[942,3281,3282,2873],{"align":928},[510,3283,975],{},[942,3285,2876],{},[923,3287,3288,3294,3298],{},[942,3289,3290],{"align":928},[2864,3291,3292],{},[510,3293,2885],{},[942,3295,3296,2890],{"align":928},[510,3297,975],{},[942,3299,2893],{},[923,3301,3302,3308,3317],{},[942,3303,3304],{"align":928},[2864,3305,3306],{},[510,3307,2546],{},[942,3309,3310,2906,3312,803],{"align":928},[510,3311,1077],{},[515,3313,3315],{"href":2909,"rel":3314},[519],[510,3316,2913],{},[942,3318,3319],{},[510,3320,1122],{},[923,3322,3323,3329,3338],{},[942,3324,3325],{"align":928},[2864,3326,3327],{},[510,3328,2563],{},[942,3330,3331,2931,3333],{"align":928},[510,3332,2930],{},[515,3334,3336,2939],{"href":2934,"rel":3335},[519],[510,3337,2938],{},[942,3339,3340],{},[510,3341,2944],{},[1528,3343,3344],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":480,"searchDepth":481,"depth":482,"links":3346},[3347,3348,3349],{"id":538,"depth":482,"text":15},{"id":914,"depth":482,"text":915},{"id":2965,"depth":482,"text":2966,"children":3350},[3351,3352],{"id":2984,"depth":619,"text":15},{"id":3256,"depth":619,"text":3257},"Render to texture using Frame Buffer Objects.",{},{"title":405,"description":3353},"ch0ffhPITGouVRylpEdp2CmD8Fl-JOZCHt9eio9zKpc",{"id":3358,"title":409,"body":3359,"description":3785,"extension":485,"links":486,"meta":3786,"navigation":488,"path":410,"seo":3787,"stem":411,"__hash__":3788},"docs/2.api/9.objects/gradient-texture.md",{"type":469,"value":3360,"toc":3781},[3361,3366,3375,3377,3632,3634,3779],[2049,3362,3363],{},[3364,3365],"objects-gradient-texture",{},[472,3367,3368,3371,3372,3374],{},[510,3369,3370],{},"\u003CGradientTexture />"," creates a gradient in a THREE.Texture and attaches it to its parent THREE.Material's ",[510,3373,2669],{}," by default.",[536,3376,15],{"id":538},[540,3378,3380],{"className":542,"code":3379,"language":550,"meta":480,"style":480},"\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",[510,3381,3382,3402,3421,3429,3433,3441,3449,3481,3485,3493,3522,3531,3538,3562,3595,3600,3608,3616,3624],{"__ignoreMap":480},[554,3383,3384,3386,3388,3390,3392,3394,3396,3398,3400],{"class":556,"line":481},[554,3385,560],{"class":559},[554,3387,564],{"class":563},[554,3389,568],{"class":567},[554,3391,571],{"class":567},[554,3393,574],{"class":559},[554,3395,577],{"class":559},[554,3397,581],{"class":580},[554,3399,577],{"class":559},[554,3401,586],{"class":559},[554,3403,3404,3406,3408,3411,3413,3415,3417,3419],{"class":556,"line":482},[554,3405,594],{"class":593},[554,3407,597],{"class":559},[554,3409,3410],{"class":600}," GradientTexture",[554,3412,604],{"class":559},[554,3414,607],{"class":593},[554,3416,610],{"class":559},[554,3418,613],{"class":580},[554,3420,616],{"class":559},[554,3422,3423,3425,3427],{"class":556,"line":619},[554,3424,657],{"class":559},[554,3426,564],{"class":563},[554,3428,586],{"class":559},[554,3430,3431],{"class":556,"line":625},[554,3432,622],{"emptyLinePlaceholder":488},[554,3434,3435,3437,3439],{"class":556,"line":654},[554,3436,560],{"class":559},[554,3438,674],{"class":563},[554,3440,586],{"class":559},[554,3442,3443,3445,3447],{"class":556,"line":664},[554,3444,682],{"class":559},[554,3446,685],{"class":563},[554,3448,586],{"class":559},[554,3450,3451,3453,3455,3457,3459,3461,3463,3465,3467,3469,3471,3473,3475,3477,3479],{"class":556,"line":669},[554,3452,693],{"class":559},[554,3454,1664],{"class":563},[554,3456,1667],{"class":559},[554,3458,1670],{"class":567},[554,3460,574],{"class":559},[554,3462,577],{"class":559},[554,3464,1677],{"class":559},[554,3466,1107],{"class":1680},[554,3468,1683],{"class":559},[554,3470,1107],{"class":1680},[554,3472,1683],{"class":559},[554,3474,1691],{"class":1680},[554,3476,1694],{"class":559},[554,3478,577],{"class":559},[554,3480,1699],{"class":559},[554,3482,3483],{"class":556,"line":679},[554,3484,622],{"emptyLinePlaceholder":488},[554,3486,3487,3489,3491],{"class":556,"line":690},[554,3488,693],{"class":559},[554,3490,1756],{"class":563},[554,3492,586],{"class":559},[554,3494,3495,3497,3500,3502,3504,3506,3508,3510,3512,3514,3516,3518,3520],{"class":556,"line":545},[554,3496,704],{"class":559},[554,3498,3499],{"class":563},"TresPlaneGeometry",[554,3501,1667],{"class":559},[554,3503,1771],{"class":567},[554,3505,574],{"class":559},[554,3507,577],{"class":559},[554,3509,1677],{"class":559},[554,3511,1686],{"class":1680},[554,3513,1683],{"class":559},[554,3515,1686],{"class":1680},[554,3517,1694],{"class":559},[554,3519,577],{"class":559},[554,3521,1699],{"class":559},[554,3523,3524,3526,3529],{"class":556,"line":546},[554,3525,704],{"class":559},[554,3527,3528],{"class":563},"TresMeshBasicMaterial",[554,3530,586],{"class":559},[554,3532,3533,3535],{"class":556,"line":547},[554,3534,1763],{"class":559},[554,3536,3537],{"class":563},"GradientTexture\n",[554,3539,3540,3543,3546,3548,3550,3552,3554,3556,3558,3560],{"class":556,"line":548},[554,3541,3542],{"class":559},"          :",[554,3544,3545],{"class":567},"stops",[554,3547,574],{"class":559},[554,3549,577],{"class":559},[554,3551,1677],{"class":559},[554,3553,1107],{"class":1680},[554,3555,1683],{"class":559},[554,3557,1780],{"class":1680},[554,3559,1694],{"class":559},[554,3561,723],{"class":559},[554,3563,3564,3566,3569,3571,3573,3575,3577,3580,3582,3584,3586,3589,3591,3593],{"class":556,"line":549},[554,3565,3542],{"class":559},[554,3567,3568],{"class":567},"colors",[554,3570,574],{"class":559},[554,3572,577],{"class":559},[554,3574,1677],{"class":559},[554,3576,643],{"class":559},[554,3578,3579],{"class":580},"#ff0000",[554,3581,643],{"class":559},[554,3583,1683],{"class":559},[554,3585,643],{"class":559},[554,3587,3588],{"class":580},"#0000ff",[554,3590,643],{"class":559},[554,3592,1694],{"class":559},[554,3594,723],{"class":559},[554,3596,3597],{"class":556,"line":765},[554,3598,3599],{"class":559},"        />\n",[554,3601,3602,3604,3606],{"class":556,"line":775},[554,3603,1835],{"class":559},[554,3605,3528],{"class":563},[554,3607,586],{"class":559},[554,3609,3610,3612,3614],{"class":556,"line":785},[554,3611,768],{"class":559},[554,3613,1756],{"class":563},[554,3615,586],{"class":559},[554,3617,3618,3620,3622],{"class":556,"line":1878},[554,3619,778],{"class":559},[554,3621,685],{"class":563},[554,3623,586],{"class":559},[554,3625,3626,3628,3630],{"class":556,"line":1913},[554,3627,657],{"class":559},[554,3629,674],{"class":563},[554,3631,586],{"class":559},[536,3633,915],{"id":914},[917,3635,3636,3646],{},[920,3637,3638],{},[923,3639,3640,3642,3644],{},[926,3641,1939],{"align":928},[926,3643,932],{"align":928},[926,3645,935],{},[937,3647,3648,3676,3690,3705,3719,3732,3750,3764],{},[923,3649,3650,3654,3674],{},[942,3651,3652],{"align":928},[510,3653,3545],{},[942,3655,3656,3657,3660,3661,3663,3664,3666,3667,3670,3671,803],{"align":928},"A ",[510,3658,3659],{},"number[]"," of values between ",[510,3662,1107],{}," and ",[510,3665,1780],{}," representing the color positions in the gradient. ",[510,3668,3669],{},"stops.length"," should match ",[510,3672,3673],{},"color.length",[942,3675],{},[923,3677,3678,3682,3688],{},[942,3679,3680],{"align":928},[510,3681,3568],{},[942,3683,3656,3684,3687],{"align":928},[510,3685,3686],{},"THREE.ColorRepresentation[]"," representing the colors in the gradient.",[942,3689],{},[923,3691,3692,3697,3700],{},[942,3693,3694],{"align":928},[510,3695,3696],{},"attach",[942,3698,3699],{"align":928},"Where the component should be attached within its parent.",[942,3701,3702],{},[510,3703,3704],{},"'map'",[923,3706,3707,3711,3714],{},[942,3708,3709],{"align":928},[510,3710,2885],{},[942,3712,3713],{"align":928},"Height of the canvas used to draw the gradient.",[942,3715,3716],{},[510,3717,3718],{},"1024",[923,3720,3721,3725,3728],{},[942,3722,3723],{"align":928},[510,3724,2868],{},[942,3726,3727],{"align":928},"Width of the canvas used to draw the gradient.",[942,3729,3730],{},[510,3731,2794],{},[923,3733,3734,3739,3745],{},[942,3735,3736],{"align":928},[510,3737,3738],{},"type",[942,3740,3741,3744],{"align":928},[510,3742,3743],{},"'linear' | 'radial'"," Type of gradient to draw.",[942,3746,3747],{},[510,3748,3749],{},"'linear'",[923,3751,3752,3757,3760],{},[942,3753,3754],{"align":928},[510,3755,3756],{},"innerCircleRadius",[942,3758,3759],{"align":928},"Radius of the inner circle of a radial gradient.",[942,3761,3762],{},[510,3763,1107],{},[923,3765,3766,3771,3774],{},[942,3767,3768],{"align":928},[510,3769,3770],{},"outerCircleRadius",[942,3772,3773],{"align":928},"Radius of the outer circle of a radial gradient.",[942,3775,3776],{},[510,3777,3778],{},"'auto'",[1528,3780,2035],{},{"title":480,"searchDepth":481,"depth":482,"links":3782},[3783,3784],{"id":538,"depth":482,"text":15},{"id":914,"depth":482,"text":915},"Create gradient textures for materials.",{},{"title":409,"description":3785},"vYfm15fEwNZgRGLtXSYlU49KPYrI7wEBqbJQsM4JeNo",{"id":3790,"title":413,"body":3791,"description":9903,"extension":485,"links":486,"meta":9904,"navigation":488,"path":414,"seo":9905,"stem":415,"__hash__":9906},"docs/2.api/9.objects/html.md",{"type":469,"value":3792,"toc":9884},[3793,3796,3810,3815,3817,4287,4291,4298,4303,4319,4327,4332,4477,4483,4487,4511,4516,4646,4650,4674,4677,4701,4719,4740,4745,4910,4914,4919,4943,4955,4960,6923,6927,6951,6972,7013,7018,7033,7047,7088,7095,7119,7138,7143,8765,8771,8777,8782,8983,9000,9002,9365,9367,9387,9391,9473,9477,9655,9860,9863,9881],[472,3794,3795],{},"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.",[472,3797,3798,3799,3663,3802,3805,3806,3809],{},"🚀 Works seamlessly with both ",[2864,3800,3801],{},"PerspectiveCamera",[2864,3803,3804],{},"OrthographicCamera"," — the active camera is automatically detected by the ",[510,3807,3808],{},"\u003CHtml>"," component.",[2049,3811,3812],{},[3813,3814],"objects-html",{},[536,3816,15],{"id":538},[540,3818,3821],{"className":542,"code":3819,"highlights":3820,"language":550,"meta":480,"style":480},"\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",[482,548,549,765,775,785,1878],[510,3822,3823,3843,3867,3885,3893,3897,3905,3925,3957,3965,3997,4005,4013,4021,4027,4033,4049,4077,4106,4111,4140,4149,4157,4165,4173,4181,4189,4200,4208,4225,4239,4251,4263,4275,4279],{"__ignoreMap":480},[554,3824,3825,3827,3829,3831,3833,3835,3837,3839,3841],{"class":556,"line":481},[554,3826,560],{"class":559},[554,3828,564],{"class":563},[554,3830,568],{"class":567},[554,3832,571],{"class":567},[554,3834,574],{"class":559},[554,3836,577],{"class":559},[554,3838,581],{"class":580},[554,3840,577],{"class":559},[554,3842,586],{"class":559},[554,3844,3846,3848,3850,3853,3855,3857,3859,3861,3863,3865],{"class":3845,"line":482},[556,590],[554,3847,594],{"class":593},[554,3849,597],{"class":559},[554,3851,3852],{"class":600}," Html",[554,3854,1616],{"class":559},[554,3856,1619],{"class":600},[554,3858,604],{"class":559},[554,3860,607],{"class":593},[554,3862,610],{"class":559},[554,3864,613],{"class":580},[554,3866,616],{"class":559},[554,3868,3869,3871,3873,3875,3877,3879,3881,3883],{"class":556,"line":619},[554,3870,594],{"class":593},[554,3872,597],{"class":559},[554,3874,2151],{"class":600},[554,3876,604],{"class":559},[554,3878,607],{"class":593},[554,3880,610],{"class":559},[554,3882,2140],{"class":580},[554,3884,616],{"class":559},[554,3886,3887,3889,3891],{"class":556,"line":625},[554,3888,657],{"class":559},[554,3890,564],{"class":563},[554,3892,586],{"class":559},[554,3894,3895],{"class":556,"line":654},[554,3896,622],{"emptyLinePlaceholder":488},[554,3898,3899,3901,3903],{"class":556,"line":664},[554,3900,560],{"class":559},[554,3902,674],{"class":563},[554,3904,586],{"class":559},[554,3906,3907,3909,3911,3914,3916,3918,3921,3923],{"class":556,"line":669},[554,3908,682],{"class":559},[554,3910,685],{"class":563},[554,3912,3913],{"class":567}," clear-color",[554,3915,574],{"class":559},[554,3917,577],{"class":559},[554,3919,3920],{"class":580},"#82DBC5",[554,3922,577],{"class":559},[554,3924,586],{"class":559},[554,3926,3927,3929,3931,3933,3935,3937,3939,3941,3943,3945,3947,3949,3951,3953,3955],{"class":556,"line":679},[554,3928,693],{"class":559},[554,3930,1664],{"class":563},[554,3932,1667],{"class":559},[554,3934,1670],{"class":567},[554,3936,574],{"class":559},[554,3938,577],{"class":559},[554,3940,1677],{"class":559},[554,3942,1686],{"class":1680},[554,3944,1683],{"class":559},[554,3946,1686],{"class":1680},[554,3948,1683],{"class":559},[554,3950,1691],{"class":1680},[554,3952,1694],{"class":559},[554,3954,577],{"class":559},[554,3956,1699],{"class":559},[554,3958,3959,3961,3963],{"class":556,"line":690},[554,3960,693],{"class":559},[554,3962,1706],{"class":563},[554,3964,1699],{"class":559},[554,3966,3967,3969,3971,3973,3975,3977,3979,3981,3983,3985,3987,3989,3991,3993,3995],{"class":556,"line":545},[554,3968,693],{"class":559},[554,3970,1756],{"class":563},[554,3972,1667],{"class":559},[554,3974,1670],{"class":567},[554,3976,574],{"class":559},[554,3978,577],{"class":559},[554,3980,1677],{"class":559},[554,3982,1780],{"class":1680},[554,3984,1683],{"class":559},[554,3986,1780],{"class":1680},[554,3988,1683],{"class":559},[554,3990,1780],{"class":1680},[554,3992,1694],{"class":559},[554,3994,577],{"class":559},[554,3996,586],{"class":559},[554,3998,3999,4001,4003],{"class":556,"line":546},[554,4000,704],{"class":559},[554,4002,2605],{"class":563},[554,4004,1699],{"class":559},[554,4006,4007,4009,4011],{"class":556,"line":547},[554,4008,704],{"class":559},[554,4010,2813],{"class":563},[554,4012,1699],{"class":559},[554,4014,4016,4018],{"class":4015,"line":548},[556,590],[554,4017,704],{"class":559},[554,4019,4020],{"class":563},"Html\n",[554,4022,4024],{"class":4023,"line":549},[556,590],[554,4025,4026],{"class":567},"        center\n",[554,4028,4030],{"class":4029,"line":765},[556,590],[554,4031,4032],{"class":567},"        transform\n",[554,4034,4036,4038,4041,4043,4045,4047],{"class":4035,"line":775},[556,590],[554,4037,744],{"class":559},[554,4039,4040],{"class":567},"distance-factor",[554,4042,574],{"class":559},[554,4044,577],{"class":559},[554,4046,1904],{"class":1680},[554,4048,723],{"class":559},[554,4050,4052,4054,4056,4058,4060,4062,4064,4066,4068,4070,4073,4075],{"class":4051,"line":785},[556,590],[554,4053,744],{"class":559},[554,4055,1670],{"class":567},[554,4057,574],{"class":559},[554,4059,577],{"class":559},[554,4061,1677],{"class":559},[554,4063,1107],{"class":1680},[554,4065,1683],{"class":559},[554,4067,1107],{"class":1680},[554,4069,1683],{"class":559},[554,4071,4072],{"class":1680},"0.65",[554,4074,1694],{"class":559},[554,4076,723],{"class":559},[554,4078,4080,4082,4085,4087,4089,4091,4094,4096,4098,4100,4102,4104],{"class":4079,"line":1878},[556,590],[554,4081,744],{"class":559},[554,4083,4084],{"class":567},"scale",[554,4086,574],{"class":559},[554,4088,577],{"class":559},[554,4090,1677],{"class":559},[554,4092,4093],{"class":1680},"0.75",[554,4095,1683],{"class":559},[554,4097,4093],{"class":1680},[554,4099,1683],{"class":559},[554,4101,4093],{"class":1680},[554,4103,1694],{"class":559},[554,4105,723],{"class":559},[554,4107,4108],{"class":556,"line":1913},[554,4109,4110],{"class":559},"      >\n",[554,4112,4113,4115,4118,4120,4122,4124,4127,4129,4131,4134,4136,4138],{"class":556,"line":1922},[554,4114,1763],{"class":559},[554,4116,4117],{"class":563},"h1",[554,4119,2939],{"class":567},[554,4121,574],{"class":559},[554,4123,577],{"class":559},[554,4125,4126],{"class":580},"title",[554,4128,577],{"class":559},[554,4130,2209],{"class":559},[554,4132,4133],{"class":600},"I'm a Box 📦",[554,4135,657],{"class":559},[554,4137,4117],{"class":563},[554,4139,586],{"class":559},[554,4141,4142,4144,4147],{"class":556,"line":2481},[554,4143,1835],{"class":559},[554,4145,4146],{"class":563},"Html",[554,4148,586],{"class":559},[554,4150,4151,4153,4155],{"class":556,"line":2486},[554,4152,768],{"class":559},[554,4154,1756],{"class":563},[554,4156,586],{"class":559},[554,4158,4159,4161,4163],{"class":556,"line":2070},[554,4160,693],{"class":559},[554,4162,2491],{"class":563},[554,4164,1699],{"class":559},[554,4166,4167,4169,4171],{"class":556,"line":2071},[554,4168,693],{"class":559},[554,4170,1859],{"class":563},[554,4172,1699],{"class":559},[554,4174,4175,4177,4179],{"class":556,"line":2072},[554,4176,778],{"class":559},[554,4178,685],{"class":563},[554,4180,586],{"class":559},[554,4182,4183,4185,4187],{"class":556,"line":2073},[554,4184,657],{"class":559},[554,4186,674],{"class":563},[554,4188,586],{"class":559},[554,4190,4191,4193,4195,4198],{"class":556,"line":2585},[554,4192,560],{"class":559},[554,4194,1528],{"class":563},[554,4196,4197],{"class":567}," scoped",[554,4199,586],{"class":559},[554,4201,4202,4204,4206],{"class":556,"line":2591},[554,4203,803],{"class":559},[554,4205,4126],{"class":2200},[554,4207,2290],{"class":559},[554,4209,4210,4214,4216,4219,4222],{"class":556,"line":2600},[554,4211,4213],{"class":4212},"sqsOY","  background-color",[554,4215,2281],{"class":559},[554,4217,4218],{"class":559}," #",[554,4220,4221],{"class":600},"1e1e1e",[554,4223,4224],{"class":559},";\n",[554,4226,4227,4230,4232,4234,4237],{"class":556,"line":2634},[554,4228,4229],{"class":4212},"  color",[554,4231,2281],{"class":559},[554,4233,4218],{"class":559},[554,4235,4236],{"class":600},"ffffff",[554,4238,4224],{"class":559},[554,4240,4241,4244,4246,4249],{"class":556,"line":2639},[554,4242,4243],{"class":4212},"  font-size",[554,4245,2281],{"class":559},[554,4247,4248],{"class":1680}," 0.75rem",[554,4250,4224],{"class":559},[554,4252,4253,4256,4258,4261],{"class":556,"line":2647},[554,4254,4255],{"class":4212},"  padding",[554,4257,2281],{"class":559},[554,4259,4260],{"class":1680}," 0.25rem",[554,4262,4224],{"class":559},[554,4264,4265,4268,4270,4273],{"class":556,"line":2664},[554,4266,4267],{"class":4212},"  border-radius",[554,4269,2281],{"class":559},[554,4271,4272],{"class":1680}," 0.375rem",[554,4274,4224],{"class":559},[554,4276,4277],{"class":556,"line":2694},[554,4278,2382],{"class":559},[554,4280,4281,4283,4285],{"class":556,"line":2699},[554,4282,657],{"class":559},[554,4284,1528],{"class":563},[554,4286,586],{"class":559},[536,4288,4290],{"id":4289},"occlusion","Occlusion",[472,4292,4293,4294,4297],{},"By default, the HTML content will be visible through other objects in the scene. You can use the ",[510,4295,4296],{},"occlude"," prop to make the HTML content occlude other objects in the scene.",[472,4299,4300,4301,1392],{},"Html can be hidden behind one or more objects in your scene using the ",[510,4302,4296],{},[540,4304,4306],{"className":542,"code":4305,"language":550,"meta":480,"style":480},"\u003CHtml occlude>\n",[510,4307,4308],{"__ignoreMap":480},[554,4309,4310,4312,4314,4317],{"class":556,"line":481},[554,4311,560],{"class":559},[554,4313,4146],{"class":563},[554,4315,4316],{"class":567}," occlude",[554,4318,586],{"class":559},[472,4320,967,4321,4323,4324,4326],{},[510,4322,4296],{},", then ",[510,4325,3808],{}," will be hidden by any objects that pass in front of its position.",[2049,4328,4329],{},[4330,4331],"objects-html-occlusion",{},[4333,4334,4335,4336,4340],"details",{},"\n  ",[4337,4338,4339],"summary",{},"Demo code",[540,4341,4345],{"className":4342,"code":4343,"language":4344,"meta":480,"style":480},"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",[510,4346,4347,4367,4375,4383,4433,4461,4469],{"__ignoreMap":480},[554,4348,4349,4351,4353,4356,4358,4360,4363,4365],{"class":556,"line":481},[554,4350,560],{"class":559},[554,4352,1756],{"class":563},[554,4354,4355],{"class":567}," :position",[554,4357,574],{"class":559},[554,4359,577],{"class":559},[554,4361,4362],{"class":580},"[0, 1, -2]",[554,4364,577],{"class":559},[554,4366,586],{"class":559},[554,4368,4369,4371,4373],{"class":556,"line":482},[554,4370,682],{"class":559},[554,4372,2605],{"class":563},[554,4374,1699],{"class":559},[554,4376,4377,4379,4381],{"class":556,"line":619},[554,4378,682],{"class":559},[554,4380,2813],{"class":563},[554,4382,1699],{"class":559},[554,4384,4385,4387,4389,4392,4395,4397,4400,4402,4404,4406,4408,4410,4412,4414,4417,4419,4422,4424,4426,4429,4431],{"class":556,"line":625},[554,4386,682],{"class":559},[554,4388,4344],{"class":563},[554,4390,4391],{"class":567}," center",[554,4393,4394],{"class":567}," transform",[554,4396,4316],{"class":567},[554,4398,4399],{"class":567}," :distance-factor",[554,4401,574],{"class":559},[554,4403,577],{"class":559},[554,4405,1904],{"class":580},[554,4407,577],{"class":559},[554,4409,4355],{"class":567},[554,4411,574],{"class":559},[554,4413,577],{"class":559},[554,4415,4416],{"class":580},"[0, 0, 2]",[554,4418,577],{"class":559},[554,4420,4421],{"class":567}," :z-index-range",[554,4423,574],{"class":559},[554,4425,577],{"class":559},[554,4427,4428],{"class":580},"[28, 0]",[554,4430,577],{"class":559},[554,4432,586],{"class":559},[554,4434,4435,4437,4439,4441,4443,4445,4448,4450,4452,4455,4457,4459],{"class":556,"line":654},[554,4436,693],{"class":559},[554,4438,4117],{"class":563},[554,4440,2939],{"class":567},[554,4442,574],{"class":559},[554,4444,577],{"class":559},[554,4446,4447],{"class":580},"bg-white dark:bg-dark text-xs p-1 rounded",[554,4449,577],{"class":559},[554,4451,2209],{"class":559},[554,4453,4454],{"class":600},"Move camera",[554,4456,657],{"class":559},[554,4458,4117],{"class":563},[554,4460,586],{"class":559},[554,4462,4463,4465,4467],{"class":556,"line":664},[554,4464,778],{"class":559},[554,4466,4344],{"class":563},[554,4468,586],{"class":559},[554,4470,4471,4473,4475],{"class":556,"line":669},[554,4472,657],{"class":559},[554,4474,1756],{"class":563},[554,4476,586],{"class":559},[472,4478,4479,4480,4482],{},"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 ",[510,4481,4296],{}," prop:",[881,4484,4486],{"id":4485},"single-occluder","Single occluder",[540,4488,4490],{"className":542,"code":4489,"language":550,"meta":480,"style":480},"\u003CHtml occlude=\"[mesh]\">\n",[510,4491,4492],{"__ignoreMap":480},[554,4493,4494,4496,4498,4500,4502,4504,4507,4509],{"class":556,"line":481},[554,4495,560],{"class":559},[554,4497,4146],{"class":563},[554,4499,4316],{"class":567},[554,4501,574],{"class":559},[554,4503,577],{"class":559},[554,4505,4506],{"class":580},"[mesh]",[554,4508,577],{"class":559},[554,4510,586],{"class":559},[2049,4512,4513],{},[4514,4515],"objects-html-single-occluder",{},[4333,4517,4335,4518,4520],{},[4337,4519,4339],{},[540,4521,4523],{"className":4342,"code":4522,"language":4344,"meta":480,"style":480},"\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",[510,4524,4525,4544,4552,4560,4604,4630,4638],{"__ignoreMap":480},[554,4526,4527,4529,4531,4533,4535,4537,4540,4542],{"class":556,"line":481},[554,4528,560],{"class":559},[554,4530,1756],{"class":563},[554,4532,4355],{"class":567},[554,4534,574],{"class":559},[554,4536,577],{"class":559},[554,4538,4539],{"class":580},"[0, 1, 0]",[554,4541,577],{"class":559},[554,4543,586],{"class":559},[554,4545,4546,4548,4550],{"class":556,"line":482},[554,4547,682],{"class":559},[554,4549,2605],{"class":563},[554,4551,1699],{"class":559},[554,4553,4554,4556,4558],{"class":556,"line":619},[554,4555,682],{"class":559},[554,4557,2813],{"class":563},[554,4559,1699],{"class":559},[554,4561,4562,4564,4566,4568,4570,4573,4575,4577,4580,4582,4584,4586,4588,4590,4592,4594,4596,4598,4600,4602],{"class":556,"line":625},[554,4563,682],{"class":559},[554,4565,4344],{"class":563},[554,4567,4391],{"class":567},[554,4569,4394],{"class":567},[554,4571,4572],{"class":567}," :occlude",[554,4574,574],{"class":559},[554,4576,577],{"class":559},[554,4578,4579],{"class":580},"[sphereRef]",[554,4581,577],{"class":559},[554,4583,4399],{"class":567},[554,4585,574],{"class":559},[554,4587,577],{"class":559},[554,4589,1904],{"class":580},[554,4591,577],{"class":559},[554,4593,4421],{"class":567},[554,4595,574],{"class":559},[554,4597,577],{"class":559},[554,4599,4428],{"class":580},[554,4601,577],{"class":559},[554,4603,586],{"class":559},[554,4605,4606,4608,4610,4612,4614,4616,4618,4620,4622,4624,4626,4628],{"class":556,"line":654},[554,4607,693],{"class":559},[554,4609,4117],{"class":563},[554,4611,2939],{"class":567},[554,4613,574],{"class":559},[554,4615,577],{"class":559},[554,4617,4447],{"class":580},[554,4619,577],{"class":559},[554,4621,2209],{"class":559},[554,4623,4454],{"class":600},[554,4625,657],{"class":559},[554,4627,4117],{"class":563},[554,4629,586],{"class":559},[554,4631,4632,4634,4636],{"class":556,"line":664},[554,4633,778],{"class":559},[554,4635,4344],{"class":563},[554,4637,586],{"class":559},[554,4639,4640,4642,4644],{"class":556,"line":669},[554,4641,657],{"class":559},[554,4643,1756],{"class":563},[554,4645,586],{"class":559},[881,4647,4649],{"id":4648},"multiple-occluders","Multiple occluders",[540,4651,4653],{"className":542,"code":4652,"language":550,"meta":480,"style":480},"\u003CHtml occlude=\"[mesh1, mesh2, mesh3, ...]\" />\n",[510,4654,4655],{"__ignoreMap":480},[554,4656,4657,4659,4661,4663,4665,4667,4670,4672],{"class":556,"line":481},[554,4658,560],{"class":559},[554,4660,4146],{"class":563},[554,4662,4316],{"class":567},[554,4664,574],{"class":559},[554,4666,577],{"class":559},[554,4668,4669],{"class":580},"[mesh1, mesh2, mesh3, ...]",[554,4671,577],{"class":559},[554,4673,1699],{"class":559},[472,4675,4676],{},"OR",[540,4678,4680],{"className":542,"code":4679,"language":550,"meta":480,"style":480},"\u003CHtml occlude=\"meshesArray\" />\n",[510,4681,4682],{"__ignoreMap":480},[554,4683,4684,4686,4688,4690,4692,4694,4697,4699],{"class":556,"line":481},[554,4685,560],{"class":559},[554,4687,4146],{"class":563},[554,4689,4316],{"class":567},[554,4691,574],{"class":559},[554,4693,577],{"class":559},[554,4695,4696],{"class":580},"meshesArray",[554,4698,577],{"class":559},[554,4700,1699],{"class":559},[472,4702,4703,4704,4707,4708,4713,4714,4718],{},"In the demo below, a ",[510,4705,4706],{},"v-for"," loop generates multiple spheres around the cube.\nAll resulting ",[2864,4709,4710],{},[510,4711,4712],{},"Mesh"," instances are collected into an array and passed to the ",[2864,4715,4716],{},[510,4717,4296],{}," prop, allowing each sphere to occlude the HTML content.",[472,4720,4721,4722,4727,4728,4731,4732,3663,4736,4739],{},"This demo also uses the ",[2864,4723,4724],{},[510,4725,4726],{},"on-occlude"," event, which is triggered whenever the occlusion state changes.\nHere, the event updates a ",[2864,4729,4730],{},"reactive value"," to control element styles — for example, toggling between ",[4733,4734,4735],"em",{},"light",[4733,4737,4738],{},"dark"," themes.",[2049,4741,4742],{},[4743,4744],"objects-html-occlude-complex-demo",{},[4333,4746,4335,4747,4749],{},[4337,4748,4339],{},[540,4750,4752],{"className":4342,"code":4751,"language":4344,"meta":480,"style":480},"\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",[510,4753,4754,4772,4780,4788,4795,4809,4823,4836,4849,4863,4868,4894,4902],{"__ignoreMap":480},[554,4755,4756,4758,4760,4762,4764,4766,4768,4770],{"class":556,"line":481},[554,4757,560],{"class":559},[554,4759,1756],{"class":563},[554,4761,4355],{"class":567},[554,4763,574],{"class":559},[554,4765,577],{"class":559},[554,4767,4539],{"class":580},[554,4769,577],{"class":559},[554,4771,586],{"class":559},[554,4773,4774,4776,4778],{"class":556,"line":482},[554,4775,682],{"class":559},[554,4777,2605],{"class":563},[554,4779,1699],{"class":559},[554,4781,4782,4784,4786],{"class":556,"line":619},[554,4783,682],{"class":559},[554,4785,2813],{"class":563},[554,4787,1699],{"class":559},[554,4789,4790,4792],{"class":556,"line":625},[554,4791,682],{"class":559},[554,4793,4794],{"class":563},"html\n",[554,4796,4797,4800,4802,4804,4807],{"class":556,"line":654},[554,4798,4799],{"class":567},"    v-bind",[554,4801,574],{"class":559},[554,4803,577],{"class":559},[554,4805,4806],{"class":580},"htmlProps",[554,4808,723],{"class":559},[554,4810,4811,4814,4816,4818,4821],{"class":556,"line":664},[554,4812,4813],{"class":567},"    :occlude",[554,4815,574],{"class":559},[554,4817,577],{"class":559},[554,4819,4820],{"class":580},"occluderRefs",[554,4822,723],{"class":559},[554,4824,4825,4828,4830,4832,4834],{"class":556,"line":669},[554,4826,4827],{"class":567},"    :distance-factor",[554,4829,574],{"class":559},[554,4831,577],{"class":559},[554,4833,1904],{"class":580},[554,4835,723],{"class":559},[554,4837,4838,4841,4843,4845,4847],{"class":556,"line":679},[554,4839,4840],{"class":567},"    :z-index-range",[554,4842,574],{"class":559},[554,4844,577],{"class":559},[554,4846,4428],{"class":580},[554,4848,723],{"class":559},[554,4850,4851,4854,4856,4858,4861],{"class":556,"line":690},[554,4852,4853],{"class":567},"    @on-occlude",[554,4855,574],{"class":559},[554,4857,577],{"class":559},[554,4859,4860],{"class":580},"(event: boolean) => isOccluded = event",[554,4862,723],{"class":559},[554,4864,4865],{"class":556,"line":545},[554,4866,4867],{"class":559},"  >\n",[554,4869,4870,4872,4874,4876,4878,4880,4882,4884,4886,4888,4890,4892],{"class":556,"line":546},[554,4871,693],{"class":559},[554,4873,4117],{"class":563},[554,4875,2939],{"class":567},[554,4877,574],{"class":559},[554,4879,577],{"class":559},[554,4881,4447],{"class":580},[554,4883,577],{"class":559},[554,4885,2209],{"class":559},[554,4887,4454],{"class":600},[554,4889,657],{"class":559},[554,4891,4117],{"class":563},[554,4893,586],{"class":559},[554,4895,4896,4898,4900],{"class":556,"line":547},[554,4897,778],{"class":559},[554,4899,4344],{"class":563},[554,4901,586],{"class":559},[554,4903,4904,4906,4908],{"class":556,"line":548},[554,4905,657],{"class":559},[554,4907,1756],{"class":563},[554,4909,586],{"class":559},[881,4911,4913],{"id":4912},"blending-occlusion","Blending Occlusion",[472,4915,4916,4918],{},[510,4917,3808],{}," 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.",[540,4920,4922],{"className":542,"code":4921,"language":550,"meta":480,"style":480},"\u003CHtml occlude=\"blending\">\n",[510,4923,4924],{"__ignoreMap":480},[554,4925,4926,4928,4930,4932,4934,4936,4939,4941],{"class":556,"line":481},[554,4927,560],{"class":559},[554,4929,4146],{"class":563},[554,4931,4316],{"class":567},[554,4933,574],{"class":559},[554,4935,577],{"class":559},[554,4937,4938],{"class":580},"blending",[554,4940,577],{"class":559},[554,4942,586],{"class":559},[472,4944,1345,4945,905,4948,4951,4952,803],{},[2864,4946,4947],{},"demo below ⬇️",[4733,4949,4950],{},"(left black example)"," shows a ",[2864,4953,4954],{},"basic usage example",[2049,4956,4957],{},[4958,4959],"objects-html-occlude-blending-demo",{},[4333,4961,4335,4962,4964],{},[4337,4963,4339],{},[540,4965,5012],{"className":542,"code":4966,"highlights":4967,"language":550,"meta":480,"style":480},"\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",[482,2647,2694,2699,2708,2713,2721,2734,4968,4969,4970,4971,4972,4973,4974,4975,4976,4977,4978,4969,4970,4971,4972,4973,4974,4975,4976,4977,4978,4979,4980,4981,4982,4983,4984,4985,4986,4987,4988,4989,4990,4991,4992,4993,4994,4995,4996,4997,4998,4999,5000,5001,5002,5003,5004,5005,5006,5007,5008,5009,5010,5011],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,[510,5013,5014,5034,5062,5080,5098,5123,5127,5138,5153,5164,5175,5186,5190,5194,5211,5215,5227,5232,5247,5271,5275,5279,5293,5317,5321,5325,5339,5368,5396,5400,5405,5409,5440,5444,5466,5482,5495,5507,5519,5526,5534,5538,5546,5566,5586,5620,5629,5634,5642,5670,5694,5710,5727,5743,5769,5774,5832,5876,5885,5895,5905,5910,5917,5922,5927,5941,5970,5995,6000,6020,6032,6050,6059,6068,6073,6080,6085,6090,6103,6131,6147,6170,6175,6195,6233,6242,6251,6256,6263,6278,6283,6288,6301,6329,6346,6352,6375,6380,6438,6447,6452,6459,6464,6469,6482,6510,6533,6538,6558,6582,6603,6612,6621,6626,6634,6652,6672,6689,6716,6731,6737,6742,6747,6772,6793,6802,6811,6820,6825,6836,6846,6858,6869,6882,6895,6909,6914],{"__ignoreMap":480},[554,5015,5016,5018,5020,5022,5024,5026,5028,5030,5032],{"class":556,"line":481},[554,5017,560],{"class":559},[554,5019,564],{"class":563},[554,5021,568],{"class":567},[554,5023,571],{"class":567},[554,5025,574],{"class":559},[554,5027,577],{"class":559},[554,5029,581],{"class":580},[554,5031,577],{"class":559},[554,5033,586],{"class":559},[554,5035,5037,5039,5041,5043,5045,5048,5050,5052,5054,5056,5058,5060],{"class":5036,"line":482},[556,590],[554,5038,594],{"class":593},[554,5040,597],{"class":559},[554,5042,3852],{"class":600},[554,5044,1616],{"class":559},[554,5046,5047],{"class":600}," Levioso",[554,5049,1616],{"class":559},[554,5051,1619],{"class":600},[554,5053,604],{"class":559},[554,5055,607],{"class":593},[554,5057,610],{"class":559},[554,5059,613],{"class":580},[554,5061,616],{"class":559},[554,5063,5064,5066,5068,5070,5072,5074,5076,5078],{"class":556,"line":619},[554,5065,594],{"class":593},[554,5067,597],{"class":559},[554,5069,2151],{"class":600},[554,5071,604],{"class":559},[554,5073,607],{"class":593},[554,5075,610],{"class":559},[554,5077,2140],{"class":580},[554,5079,616],{"class":559},[554,5081,5082,5084,5086,5088,5090,5092,5094,5096],{"class":556,"line":625},[554,5083,594],{"class":593},[554,5085,597],{"class":559},[554,5087,2170],{"class":600},[554,5089,604],{"class":559},[554,5091,607],{"class":593},[554,5093,610],{"class":559},[554,5095,550],{"class":580},[554,5097,616],{"class":559},[554,5099,5100,5102,5104,5107,5109,5112,5114,5116,5118,5121],{"class":556,"line":654},[554,5101,594],{"class":593},[554,5103,597],{"class":559},[554,5105,5106],{"class":600}," CircleGeometry",[554,5108,1616],{"class":559},[554,5110,5111],{"class":600}," MeshStandardMaterial",[554,5113,604],{"class":559},[554,5115,607],{"class":593},[554,5117,610],{"class":559},[554,5119,5120],{"class":580},"three",[554,5122,616],{"class":559},[554,5124,5125],{"class":556,"line":664},[554,5126,622],{"emptyLinePlaceholder":488},[554,5128,5129,5131,5134,5136],{"class":556,"line":669},[554,5130,628],{"class":567},[554,5132,5133],{"class":600}," gl ",[554,5135,574],{"class":559},[554,5137,2290],{"class":559},[554,5139,5140,5143,5145,5147,5149,5151],{"class":556,"line":679},[554,5141,5142],{"class":563},"  clearColor",[554,5144,2281],{"class":559},[554,5146,610],{"class":559},[554,5148,3920],{"class":580},[554,5150,643],{"class":559},[554,5152,3065],{"class":559},[554,5154,5155,5158,5160,5162],{"class":556,"line":690},[554,5156,5157],{"class":563},"  clearAlpha",[554,5159,2281],{"class":559},[554,5161,3111],{"class":1680},[554,5163,3065],{"class":559},[554,5165,5166,5169,5171,5173],{"class":556,"line":545},[554,5167,5168],{"class":563},"  shadows",[554,5170,2281],{"class":559},[554,5172,3062],{"class":2553},[554,5174,3065],{"class":559},[554,5176,5177,5180,5182,5184],{"class":556,"line":546},[554,5178,5179],{"class":563},"  alpha",[554,5181,2281],{"class":559},[554,5183,3062],{"class":2553},[554,5185,3065],{"class":559},[554,5187,5188],{"class":556,"line":547},[554,5189,2382],{"class":559},[554,5191,5192],{"class":556,"line":548},[554,5193,622],{"emptyLinePlaceholder":488},[554,5195,5196,5198,5201,5203,5205,5207,5209],{"class":556,"line":549},[554,5197,628],{"class":567},[554,5199,5200],{"class":600}," targetDirectionLightRef ",[554,5202,574],{"class":559},[554,5204,2170],{"class":636},[554,5206,640],{"class":600},[554,5208,2222],{"class":559},[554,5210,651],{"class":600},[554,5212,5213],{"class":556,"line":765},[554,5214,622],{"emptyLinePlaceholder":488},[554,5216,5217,5219,5222,5224],{"class":556,"line":775},[554,5218,628],{"class":567},[554,5220,5221],{"class":600}," geometries ",[554,5223,574],{"class":559},[554,5225,5226],{"class":600}," [\n",[554,5228,5229],{"class":556,"line":785},[554,5230,5231],{"class":559},"  {\n",[554,5233,5234,5237,5239,5241,5243,5245],{"class":556,"line":1878},[554,5235,5236],{"class":563},"    component",[554,5238,2281],{"class":559},[554,5240,610],{"class":559},[554,5242,2605],{"class":580},[554,5244,643],{"class":559},[554,5246,3065],{"class":559},[554,5248,5249,5252,5254,5257,5259,5261,5263,5265,5267,5269],{"class":556,"line":1913},[554,5250,5251],{"class":563},"    args",[554,5253,2281],{"class":559},[554,5255,5256],{"class":600}," [",[554,5258,1780],{"class":1680},[554,5260,1616],{"class":559},[554,5262,3111],{"class":1680},[554,5264,1616],{"class":559},[554,5266,3111],{"class":1680},[554,5268,1694],{"class":600},[554,5270,3065],{"class":559},[554,5272,5273],{"class":556,"line":1922},[554,5274,3119],{"class":559},[554,5276,5277],{"class":556,"line":2481},[554,5278,5231],{"class":559},[554,5280,5281,5283,5285,5287,5289,5291],{"class":556,"line":2486},[554,5282,5236],{"class":563},[554,5284,2281],{"class":559},[554,5286,610],{"class":559},[554,5288,1766],{"class":580},[554,5290,643],{"class":559},[554,5292,3065],{"class":559},[554,5294,5295,5297,5299,5301,5304,5306,5309,5311,5313,5315],{"class":556,"line":2070},[554,5296,5251],{"class":563},[554,5298,2281],{"class":559},[554,5300,5256],{"class":600},[554,5302,5303],{"class":1680},"0.7",[554,5305,1616],{"class":559},[554,5307,5308],{"class":1680}," 32",[554,5310,1616],{"class":559},[554,5312,5308],{"class":1680},[554,5314,1694],{"class":600},[554,5316,3065],{"class":559},[554,5318,5319],{"class":556,"line":2071},[554,5320,3119],{"class":559},[554,5322,5323],{"class":556,"line":2072},[554,5324,5231],{"class":559},[554,5326,5327,5329,5331,5333,5335,5337],{"class":556,"line":2073},[554,5328,5236],{"class":563},[554,5330,2281],{"class":559},[554,5332,610],{"class":559},[554,5334,2773],{"class":580},[554,5336,643],{"class":559},[554,5338,3065],{"class":559},[554,5340,5341,5343,5345,5347,5349,5351,5354,5356,5359,5361,5364,5366],{"class":556,"line":2585},[554,5342,5251],{"class":563},[554,5344,2281],{"class":559},[554,5346,5256],{"class":600},[554,5348,1871],{"class":1680},[554,5350,1616],{"class":559},[554,5352,5353],{"class":1680}," 0.2",[554,5355,1616],{"class":559},[554,5357,5358],{"class":1680}," 16",[554,5360,1616],{"class":559},[554,5362,5363],{"class":1680}," 100",[554,5365,1694],{"class":600},[554,5367,3065],{"class":559},[554,5369,5370,5373,5375,5377,5380,5382,5384,5386,5389,5391,5393],{"class":556,"line":2591},[554,5371,5372],{"class":563},"    bind",[554,5374,2281],{"class":559},[554,5376,597],{"class":559},[554,5378,5379],{"class":563}," castShadow",[554,5381,2281],{"class":559},[554,5383,3062],{"class":2553},[554,5385,1616],{"class":559},[554,5387,5388],{"class":563}," receiveShadow",[554,5390,2281],{"class":559},[554,5392,3062],{"class":2553},[554,5394,5395],{"class":559}," },\n",[554,5397,5398],{"class":556,"line":2600},[554,5399,3119],{"class":559},[554,5401,5402],{"class":556,"line":2634},[554,5403,5404],{"class":600},"]\n",[554,5406,5407],{"class":556,"line":2639},[554,5408,622],{"emptyLinePlaceholder":488},[554,5410,5412,5414,5417,5419,5421,5423,5426,5428,5430,5433,5435,5437],{"class":5411,"line":2647},[556,590],[554,5413,628],{"class":567},[554,5415,5416],{"class":600}," customGeometry ",[554,5418,574],{"class":559},[554,5420,2170],{"class":636},[554,5422,640],{"class":600},[554,5424,5425],{"class":559},"new",[554,5427,5106],{"class":636},[554,5429,640],{"class":600},[554,5431,5432],{"class":1680},"1.25",[554,5434,1616],{"class":559},[554,5436,5308],{"class":1680},[554,5438,5439],{"class":600},"))\n",[554,5441,5442],{"class":556,"line":2664},[554,5443,622],{"emptyLinePlaceholder":488},[554,5445,5447,5449,5452,5454,5456,5458,5460,5462,5464],{"class":5446,"line":2694},[556,590],[554,5448,628],{"class":567},[554,5450,5451],{"class":600}," customMaterial ",[554,5453,574],{"class":559},[554,5455,2170],{"class":636},[554,5457,640],{"class":600},[554,5459,5425],{"class":559},[554,5461,5111],{"class":636},[554,5463,640],{"class":600},[554,5465,3051],{"class":559},[554,5467,5469,5471,5473,5475,5478,5480],{"class":5468,"line":2699},[556,590],[554,5470,4229],{"class":563},[554,5472,2281],{"class":559},[554,5474,610],{"class":559},[554,5476,5477],{"class":580},"red",[554,5479,643],{"class":559},[554,5481,3065],{"class":559},[554,5483,5485,5488,5490,5493],{"class":5484,"line":2708},[556,590],[554,5486,5487],{"class":563},"  side",[554,5489,2281],{"class":559},[554,5491,5492],{"class":1680}," 2",[554,5494,3065],{"class":559},[554,5496,5498,5501,5503,5505],{"class":5497,"line":2713},[556,590],[554,5499,5500],{"class":563},"  opacity",[554,5502,2281],{"class":559},[554,5504,3111],{"class":1680},[554,5506,3065],{"class":559},[554,5508,5510,5513,5515,5517],{"class":5509,"line":2721},[556,590],[554,5511,5512],{"class":563},"  transparent",[554,5514,2281],{"class":559},[554,5516,3062],{"class":2553},[554,5518,3065],{"class":559},[554,5520,5522,5524],{"class":5521,"line":2734},[556,590],[554,5523,3125],{"class":559},[554,5525,5439],{"class":600},[554,5527,5528,5530,5532],{"class":556,"line":2762},[554,5529,657],{"class":559},[554,5531,564],{"class":563},[554,5533,586],{"class":559},[554,5535,5536],{"class":556,"line":2768},[554,5537,622],{"emptyLinePlaceholder":488},[554,5539,5540,5542,5544],{"class":556,"line":2808},[554,5541,560],{"class":559},[554,5543,674],{"class":563},[554,5545,586],{"class":559},[554,5547,5548,5550,5553,5555,5557,5559,5562,5564],{"class":556,"line":2818},[554,5549,682],{"class":559},[554,5551,5552],{"class":563},"div",[554,5554,2939],{"class":567},[554,5556,574],{"class":559},[554,5558,577],{"class":559},[554,5560,5561],{"class":580},"html-demo-wrapper aspect-video",[554,5563,577],{"class":559},[554,5565,586],{"class":559},[554,5567,5568,5570,5572,5575,5577,5579,5582,5584],{"class":556,"line":2827},[554,5569,693],{"class":559},[554,5571,685],{"class":563},[554,5573,5574],{"class":567}," v-bind",[554,5576,574],{"class":559},[554,5578,577],{"class":559},[554,5580,5581],{"class":600},"gl",[554,5583,577],{"class":559},[554,5585,586],{"class":559},[554,5587,5588,5590,5592,5594,5596,5598,5600,5602,5604,5606,5609,5611,5614,5616,5618],{"class":556,"line":2836},[554,5589,704],{"class":559},[554,5591,1664],{"class":563},[554,5593,1667],{"class":559},[554,5595,1670],{"class":567},[554,5597,574],{"class":559},[554,5599,577],{"class":559},[554,5601,1677],{"class":559},[554,5603,1107],{"class":1680},[554,5605,1683],{"class":559},[554,5607,5608],{"class":1680},"1.5",[554,5610,1683],{"class":559},[554,5612,5613],{"class":1680},"7.5",[554,5615,1694],{"class":559},[554,5617,577],{"class":559},[554,5619,1699],{"class":559},[554,5621,5623,5625,5627],{"class":556,"line":5622},46,[554,5624,704],{"class":559},[554,5626,1706],{"class":563},[554,5628,1699],{"class":559},[554,5630,5632],{"class":556,"line":5631},47,[554,5633,622],{"emptyLinePlaceholder":488},[554,5635,5637,5639],{"class":556,"line":5636},48,[554,5638,704],{"class":559},[554,5640,5641],{"class":563},"Levioso\n",[554,5643,5645,5648,5650,5652,5654,5657,5659,5662,5665,5668],{"class":556,"line":5644},49,[554,5646,5647],{"class":593},"        v-for",[554,5649,574],{"class":559},[554,5651,577],{"class":559},[554,5653,640],{"class":559},[554,5655,5656],{"class":600},"geometry",[554,5658,1683],{"class":559},[554,5660,5661],{"class":600},"index",[554,5663,5664],{"class":559},") in ",[554,5666,5667],{"class":600},"geometries",[554,5669,723],{"class":559},[554,5671,5673,5675,5678,5680,5683,5686,5689,5691],{"class":556,"line":5672},50,[554,5674,744],{"class":559},[554,5676,5677],{"class":567},"key",[554,5679,574],{"class":559},[554,5681,5682],{"class":559},"\"`",[554,5684,5685],{"class":580},"html-occlude-blending-demo-",[554,5687,5688],{"class":559},"${",[554,5690,5661],{"class":600},[554,5692,5693],{"class":559},"}`\"\n",[554,5695,5697,5699,5702,5704,5706,5708],{"class":556,"line":5696},51,[554,5698,744],{"class":559},[554,5700,5701],{"class":567},"speed",[554,5703,574],{"class":559},[554,5705,577],{"class":559},[554,5707,2747],{"class":1680},[554,5709,723],{"class":559},[554,5711,5713,5715,5718,5720,5722,5725],{"class":556,"line":5712},52,[554,5714,744],{"class":559},[554,5716,5717],{"class":567},"float-factor",[554,5719,574],{"class":559},[554,5721,577],{"class":559},[554,5723,5724],{"class":1680},"3.5",[554,5726,723],{"class":559},[554,5728,5730,5732,5735,5737,5739,5741],{"class":556,"line":5729},53,[554,5731,744],{"class":559},[554,5733,5734],{"class":567},"rotation-factor",[554,5736,574],{"class":559},[554,5738,577],{"class":559},[554,5740,1780],{"class":1680},[554,5742,723],{"class":559},[554,5744,5746,5748,5751,5753,5755,5758,5761,5763,5765,5767],{"class":556,"line":5745},54,[554,5747,744],{"class":559},[554,5749,5750],{"class":567},"range",[554,5752,574],{"class":559},[554,5754,577],{"class":559},[554,5756,5757],{"class":559},"[-",[554,5759,5760],{"class":1680},"0.35",[554,5762,1683],{"class":559},[554,5764,5760],{"class":1680},[554,5766,1694],{"class":559},[554,5768,723],{"class":559},[554,5770,5772],{"class":556,"line":5771},55,[554,5773,4110],{"class":559},[554,5775,5777,5779,5781,5783,5785,5787,5789,5791,5793,5796,5798,5801,5803,5805,5807,5809,5811,5813,5815,5817,5819,5821,5823,5825,5828,5830],{"class":556,"line":5776},56,[554,5778,1763],{"class":559},[554,5780,1756],{"class":563},[554,5782,1667],{"class":559},[554,5784,1670],{"class":567},[554,5786,574],{"class":559},[554,5788,577],{"class":559},[554,5790,1677],{"class":559},[554,5792,5661],{"class":600},[554,5794,5795],{"class":559}," * ",[554,5797,5724],{"class":1680},[554,5799,5800],{"class":559}," - ",[554,5802,5724],{"class":1680},[554,5804,1683],{"class":559},[554,5806,1780],{"class":1680},[554,5808,1683],{"class":559},[554,5810,1107],{"class":1680},[554,5812,1694],{"class":559},[554,5814,577],{"class":559},[554,5816,5574],{"class":567},[554,5818,574],{"class":559},[554,5820,577],{"class":559},[554,5822,5656],{"class":600},[554,5824,803],{"class":559},[554,5826,5827],{"class":600},"bind",[554,5829,577],{"class":559},[554,5831,586],{"class":559},[554,5833,5835,5838,5841,5843,5846,5848,5850,5852,5854,5856,5858,5860,5862,5864,5866,5868,5870,5872,5874],{"class":556,"line":5834},57,[554,5836,5837],{"class":559},"          \u003C",[554,5839,5840],{"class":563},"component",[554,5842,1667],{"class":559},[554,5844,5845],{"class":567},"is",[554,5847,574],{"class":559},[554,5849,577],{"class":559},[554,5851,5656],{"class":600},[554,5853,803],{"class":559},[554,5855,5840],{"class":600},[554,5857,577],{"class":559},[554,5859,1667],{"class":559},[554,5861,1771],{"class":567},[554,5863,574],{"class":559},[554,5865,577],{"class":559},[554,5867,5656],{"class":600},[554,5869,803],{"class":559},[554,5871,1771],{"class":600},[554,5873,577],{"class":559},[554,5875,1699],{"class":559},[554,5877,5879,5881,5883],{"class":556,"line":5878},58,[554,5880,5837],{"class":559},[554,5882,2813],{"class":563},[554,5884,1699],{"class":559},[554,5886,5888,5891,5893],{"class":556,"line":5887},59,[554,5889,5890],{"class":559},"        \u003C/",[554,5892,1756],{"class":563},[554,5894,586],{"class":559},[554,5896,5898,5900,5903],{"class":556,"line":5897},60,[554,5899,1835],{"class":559},[554,5901,5902],{"class":563},"Levioso",[554,5904,586],{"class":559},[554,5906,5908],{"class":556,"line":5907},61,[554,5909,622],{"emptyLinePlaceholder":488},[554,5911,5913,5915],{"class":5912,"line":4968},[556,590],[554,5914,704],{"class":559},[554,5916,4020],{"class":563},[554,5918,5920],{"class":5919,"line":4969},[556,590],[554,5921,4026],{"class":567},[554,5923,5925],{"class":5924,"line":4970},[556,590],[554,5926,4032],{"class":567},[554,5928,5930,5933,5935,5937,5939],{"class":5929,"line":4971},[556,590],[554,5931,5932],{"class":567},"        occlude",[554,5934,574],{"class":559},[554,5936,577],{"class":559},[554,5938,4938],{"class":580},[554,5940,723],{"class":559},[554,5942,5944,5946,5948,5950,5952,5954,5956,5958,5961,5964,5966,5968],{"class":5943,"line":4972},[556,590],[554,5945,744],{"class":559},[554,5947,1670],{"class":567},[554,5949,574],{"class":559},[554,5951,577],{"class":559},[554,5953,5757],{"class":559},[554,5955,1904],{"class":1680},[554,5957,1683],{"class":559},[554,5959,5960],{"class":1680},".75",[554,5962,5963],{"class":559},", -",[554,5965,1686],{"class":1680},[554,5967,1694],{"class":559},[554,5969,723],{"class":559},[554,5971,5973,5975,5978,5980,5982,5984,5987,5989,5991,5993],{"class":5972,"line":4973},[556,590],[554,5974,744],{"class":559},[554,5976,5977],{"class":567},"z-index-range",[554,5979,574],{"class":559},[554,5981,577],{"class":559},[554,5983,1677],{"class":559},[554,5985,5986],{"class":1680},"28",[554,5988,1683],{"class":559},[554,5990,1107],{"class":1680},[554,5992,1694],{"class":559},[554,5994,723],{"class":559},[554,5996,5998],{"class":5997,"line":4974},[556,590],[554,5999,4110],{"class":559},[554,6001,6003,6005,6007,6009,6011,6013,6016,6018],{"class":6002,"line":4975},[556,590],[554,6004,1763],{"class":559},[554,6006,5552],{"class":563},[554,6008,2939],{"class":567},[554,6010,574],{"class":559},[554,6012,577],{"class":559},[554,6014,6015],{"class":580},"text-center text-s p-2 bg-[#1B1C1E] text-light",[554,6017,577],{"class":559},[554,6019,586],{"class":559},[554,6021,6023,6026,6028,6030],{"class":6022,"line":4976},[556,590],[554,6024,6025],{"class":600},"          BASIC 💛 ",[554,6027,560],{"class":559},[554,6029,900],{"class":563},[554,6031,1699],{"class":559},[554,6033,6035,6037,6039,6041,6044,6046,6048],{"class":6034,"line":4977},[556,590],[554,6036,5837],{"class":559},[554,6038,4733],{"class":563},[554,6040,2209],{"class":559},[554,6042,6043],{"class":600},"occlude=blending",[554,6045,657],{"class":559},[554,6047,4733],{"class":563},[554,6049,586],{"class":559},[554,6051,6053,6055,6057],{"class":6052,"line":4978},[556,590],[554,6054,5890],{"class":559},[554,6056,5552],{"class":563},[554,6058,586],{"class":559},[554,6060,6062,6064,6066],{"class":556,"line":6061},73,[554,6063,1835],{"class":559},[554,6065,4146],{"class":563},[554,6067,586],{"class":559},[554,6069,6071],{"class":6070,"line":4979},[556,590],[554,6072,622],{"emptyLinePlaceholder":488},[554,6074,6076,6078],{"class":6075,"line":4980},[556,590],[554,6077,704],{"class":559},[554,6079,4020],{"class":563},[554,6081,6083],{"class":6082,"line":4981},[556,590],[554,6084,4026],{"class":567},[554,6086,6088],{"class":6087,"line":4982},[556,590],[554,6089,4032],{"class":567},[554,6091,6093,6095,6097,6099,6101],{"class":6092,"line":4983},[556,590],[554,6094,5932],{"class":567},[554,6096,574],{"class":559},[554,6098,577],{"class":559},[554,6100,4938],{"class":580},[554,6102,723],{"class":559},[554,6104,6106,6108,6110,6112,6114,6116,6118,6120,6123,6125,6127,6129],{"class":6105,"line":4984},[556,590],[554,6107,744],{"class":559},[554,6109,1670],{"class":567},[554,6111,574],{"class":559},[554,6113,577],{"class":559},[554,6115,1677],{"class":559},[554,6117,1107],{"class":1680},[554,6119,1683],{"class":559},[554,6121,6122],{"class":1680},".85",[554,6124,5963],{"class":559},[554,6126,1686],{"class":1680},[554,6128,1694],{"class":559},[554,6130,723],{"class":559},[554,6132,6134,6136,6138,6140,6142,6145],{"class":6133,"line":4985},[556,590],[554,6135,744],{"class":559},[554,6137,5656],{"class":567},[554,6139,574],{"class":559},[554,6141,577],{"class":559},[554,6143,6144],{"class":600},"customGeometry",[554,6146,723],{"class":559},[554,6148,6150,6152,6154,6156,6158,6160,6162,6164,6166,6168],{"class":6149,"line":4986},[556,590],[554,6151,744],{"class":559},[554,6153,5977],{"class":567},[554,6155,574],{"class":559},[554,6157,577],{"class":559},[554,6159,1677],{"class":559},[554,6161,5986],{"class":1680},[554,6163,1683],{"class":559},[554,6165,1107],{"class":1680},[554,6167,1694],{"class":559},[554,6169,723],{"class":559},[554,6171,6173],{"class":6172,"line":4987},[556,590],[554,6174,4110],{"class":559},[554,6176,6178,6180,6182,6184,6186,6188,6191,6193],{"class":6177,"line":4988},[556,590],[554,6179,1763],{"class":559},[554,6181,5552],{"class":563},[554,6183,2939],{"class":567},[554,6185,574],{"class":559},[554,6187,577],{"class":559},[554,6189,6190],{"class":580},"text-xs p-8 text-center bg-[#F6B03B] text-dark",[554,6192,577],{"class":559},[554,6194,586],{"class":559},[554,6196,6198,6201,6203,6205,6208,6211,6213,6215,6218,6220,6222,6224,6227,6229,6231],{"class":6197,"line":4989},[556,590],[554,6199,6200],{"class":600},"          CUSTOM ",[554,6202,560],{"class":559},[554,6204,900],{"class":563},[554,6206,6207],{"class":559}," />",[554,6209,6210],{"class":559}," \u003C",[554,6212,2864],{"class":563},[554,6214,2209],{"class":559},[554,6216,6217],{"class":600},"CIRCLE ",[554,6219,560],{"class":559},[554,6221,900],{"class":563},[554,6223,6207],{"class":559},[554,6225,6226],{"class":600}," GEOMETRY",[554,6228,657],{"class":559},[554,6230,2864],{"class":563},[554,6232,586],{"class":559},[554,6234,6236,6238,6240],{"class":556,"line":6235},85,[554,6237,5890],{"class":559},[554,6239,5552],{"class":563},[554,6241,586],{"class":559},[554,6243,6245,6247,6249],{"class":6244,"line":4990},[556,590],[554,6246,1835],{"class":559},[554,6248,4146],{"class":563},[554,6250,586],{"class":559},[554,6252,6254],{"class":6253,"line":4991},[556,590],[554,6255,622],{"emptyLinePlaceholder":488},[554,6257,6259,6261],{"class":6258,"line":4992},[556,590],[554,6260,704],{"class":559},[554,6262,4020],{"class":563},[554,6264,6266,6269,6271,6273,6276],{"class":6265,"line":4993},[556,590],[554,6267,6268],{"class":567},"        ref",[554,6270,574],{"class":559},[554,6272,577],{"class":559},[554,6274,6275],{"class":580},"targetDirectionLightRef",[554,6277,723],{"class":559},[554,6279,6281],{"class":6280,"line":4994},[556,590],[554,6282,4026],{"class":567},[554,6284,6286],{"class":6285,"line":4995},[556,590],[554,6287,4032],{"class":567},[554,6289,6291,6293,6295,6297,6299],{"class":6290,"line":4996},[556,590],[554,6292,5932],{"class":567},[554,6294,574],{"class":559},[554,6296,577],{"class":559},[554,6298,4938],{"class":580},[554,6300,723],{"class":559},[554,6302,6304,6306,6308,6310,6312,6314,6316,6318,6321,6323,6325,6327],{"class":6303,"line":4997},[556,590],[554,6305,744],{"class":559},[554,6307,1670],{"class":567},[554,6309,574],{"class":559},[554,6311,577],{"class":559},[554,6313,1677],{"class":559},[554,6315,1904],{"class":1680},[554,6317,1683],{"class":559},[554,6319,6320],{"class":1680},".5",[554,6322,5963],{"class":559},[554,6324,1686],{"class":1680},[554,6326,1694],{"class":559},[554,6328,723],{"class":559},[554,6330,6332,6334,6337,6339,6341,6344],{"class":6331,"line":4998},[556,590],[554,6333,744],{"class":559},[554,6335,6336],{"class":567},"material",[554,6338,574],{"class":559},[554,6340,577],{"class":559},[554,6342,6343],{"class":600},"customMaterial",[554,6345,723],{"class":559},[554,6347,6349],{"class":6348,"line":4999},[556,590],[554,6350,6351],{"class":567},"        receive-shadow\n",[554,6353,6355,6357,6359,6361,6363,6365,6367,6369,6371,6373],{"class":6354,"line":5000},[556,590],[554,6356,744],{"class":559},[554,6358,5977],{"class":567},[554,6360,574],{"class":559},[554,6362,577],{"class":559},[554,6364,1677],{"class":559},[554,6366,5986],{"class":1680},[554,6368,1683],{"class":559},[554,6370,1107],{"class":1680},[554,6372,1694],{"class":559},[554,6374,723],{"class":559},[554,6376,6378],{"class":556,"line":6377},97,[554,6379,4110],{"class":559},[554,6381,6383,6385,6387,6390,6392,6394,6396,6398,6401,6404,6406,6408,6411,6413,6416,6418,6421,6424,6426,6429,6431,6434,6436],{"class":6382,"line":5001},[556,590],[554,6384,1763],{"class":559},[554,6386,5552],{"class":563},[554,6388,6389],{"class":567}," style",[554,6391,574],{"class":559},[554,6393,577],{"class":559},[554,6395,2868],{"class":4212},[554,6397,2576],{"class":559},[554,6399,6400],{"class":1680},"100px",[554,6402,6403],{"class":559},"; ",[554,6405,2885],{"class":4212},[554,6407,2576],{"class":559},[554,6409,6410],{"class":600},"auto",[554,6412,6403],{"class":559},[554,6414,6415],{"class":4212},"aspect-ratio",[554,6417,2576],{"class":559},[554,6419,6420],{"class":1680},"250",[554,6422,6423],{"class":559},"/",[554,6425,6420],{"class":1680},[554,6427,6428],{"class":559},";",[554,6430,577],{"class":559},[554,6432,6433],{"class":559},">\u003C/",[554,6435,5552],{"class":563},[554,6437,586],{"class":559},[554,6439,6441,6443,6445],{"class":6440,"line":5002},[556,590],[554,6442,1835],{"class":559},[554,6444,4146],{"class":563},[554,6446,586],{"class":559},[554,6448,6450],{"class":6449,"line":5003},[556,590],[554,6451,622],{"emptyLinePlaceholder":488},[554,6453,6455,6457],{"class":6454,"line":5004},[556,590],[554,6456,704],{"class":559},[554,6458,4020],{"class":563},[554,6460,6462],{"class":6461,"line":5005},[556,590],[554,6463,4026],{"class":567},[554,6465,6467],{"class":6466,"line":5006},[556,590],[554,6468,4032],{"class":567},[554,6470,6472,6474,6476,6478,6480],{"class":6471,"line":5007},[556,590],[554,6473,5932],{"class":567},[554,6475,574],{"class":559},[554,6477,577],{"class":559},[554,6479,4938],{"class":580},[554,6481,723],{"class":559},[554,6483,6485,6487,6489,6491,6493,6495,6497,6499,6502,6504,6506,6508],{"class":6484,"line":5008},[556,590],[554,6486,744],{"class":559},[554,6488,1670],{"class":567},[554,6490,574],{"class":559},[554,6492,577],{"class":559},[554,6494,1677],{"class":559},[554,6496,1904],{"class":1680},[554,6498,1683],{"class":559},[554,6500,6501],{"class":1680},"2.5",[554,6503,5963],{"class":559},[554,6505,1686],{"class":1680},[554,6507,1694],{"class":559},[554,6509,723],{"class":559},[554,6511,6513,6515,6517,6519,6521,6523,6525,6527,6529,6531],{"class":6512,"line":5009},[556,590],[554,6514,744],{"class":559},[554,6516,5977],{"class":567},[554,6518,574],{"class":559},[554,6520,577],{"class":559},[554,6522,1677],{"class":559},[554,6524,5986],{"class":1680},[554,6526,1683],{"class":559},[554,6528,1107],{"class":1680},[554,6530,1694],{"class":559},[554,6532,723],{"class":559},[554,6534,6536],{"class":6535,"line":5010},[556,590],[554,6537,4110],{"class":559},[554,6539,6541,6543,6545,6547,6549,6551,6554,6556],{"class":6540,"line":5011},[556,590],[554,6542,1763],{"class":559},[554,6544,5552],{"class":563},[554,6546,2939],{"class":567},[554,6548,574],{"class":559},[554,6550,577],{"class":559},[554,6552,6553],{"class":580},"text-center text-xs p-2 text-dark bg-[#FF0000]",[554,6555,577],{"class":559},[554,6557,586],{"class":559},[554,6559,6561,6563,6565,6567,6570,6572,6574,6576,6578,6580],{"class":556,"line":6560},109,[554,6562,5837],{"class":559},[554,6564,2864],{"class":563},[554,6566,2209],{"class":559},[554,6568,6569],{"class":600},"HTML + Custom material ",[554,6571,657],{"class":559},[554,6573,2864],{"class":563},[554,6575,2209],{"class":559},[554,6577,6210],{"class":559},[554,6579,900],{"class":563},[554,6581,1699],{"class":559},[554,6583,6585,6587,6589,6591,6594,6596,6598,6600],{"class":556,"line":6584},110,[554,6586,5837],{"class":559},[554,6588,4733],{"class":563},[554,6590,2209],{"class":559},[554,6592,6593],{"class":600},"+ receive-shadow ",[554,6595,657],{"class":559},[554,6597,4733],{"class":563},[554,6599,2209],{"class":559},[554,6601,6602],{"class":600}," ⬇️\n",[554,6604,6606,6608,6610],{"class":556,"line":6605},111,[554,6607,5890],{"class":559},[554,6609,5552],{"class":563},[554,6611,586],{"class":559},[554,6613,6615,6617,6619],{"class":556,"line":6614},112,[554,6616,1835],{"class":559},[554,6618,4146],{"class":563},[554,6620,586],{"class":559},[554,6622,6624],{"class":556,"line":6623},113,[554,6625,622],{"emptyLinePlaceholder":488},[554,6627,6629,6631],{"class":556,"line":6628},114,[554,6630,704],{"class":559},[554,6632,6633],{"class":563},"TresDirectionalLight\n",[554,6635,6637,6640,6642,6644,6646,6648,6650],{"class":556,"line":6636},115,[554,6638,6639],{"class":593},"        v-if",[554,6641,574],{"class":559},[554,6643,577],{"class":559},[554,6645,6275],{"class":600},[554,6647,2678],{"class":559},[554,6649,2681],{"class":600},[554,6651,723],{"class":559},[554,6653,6655,6657,6660,6662,6664,6666,6668,6670],{"class":556,"line":6654},116,[554,6656,744],{"class":559},[554,6658,6659],{"class":567},"target",[554,6661,574],{"class":559},[554,6663,577],{"class":559},[554,6665,6275],{"class":600},[554,6667,2678],{"class":559},[554,6669,2681],{"class":600},[554,6671,723],{"class":559},[554,6673,6675,6677,6680,6682,6684,6687],{"class":556,"line":6674},117,[554,6676,744],{"class":559},[554,6678,6679],{"class":567},"shadow-normalBias",[554,6681,574],{"class":559},[554,6683,577],{"class":559},[554,6685,6686],{"class":1680},"0.075",[554,6688,723],{"class":559},[554,6690,6692,6694,6696,6698,6700,6702,6704,6706,6708,6710,6712,6714],{"class":556,"line":6691},118,[554,6693,744],{"class":559},[554,6695,1670],{"class":567},[554,6697,574],{"class":559},[554,6699,577],{"class":559},[554,6701,1677],{"class":559},[554,6703,1691],{"class":1680},[554,6705,1683],{"class":559},[554,6707,1107],{"class":1680},[554,6709,1683],{"class":559},[554,6711,1691],{"class":1680},[554,6713,1694],{"class":559},[554,6715,723],{"class":559},[554,6717,6719,6721,6723,6725,6727,6729],{"class":556,"line":6718},119,[554,6720,744],{"class":559},[554,6722,1864],{"class":567},[554,6724,574],{"class":559},[554,6726,577],{"class":559},[554,6728,1686],{"class":1680},[554,6730,723],{"class":559},[554,6732,6734],{"class":556,"line":6733},120,[554,6735,6736],{"class":567},"        cast-shadow\n",[554,6738,6740],{"class":556,"line":6739},121,[554,6741,762],{"class":559},[554,6743,6745],{"class":556,"line":6744},122,[554,6746,622],{"emptyLinePlaceholder":488},[554,6748,6750,6752,6754,6756,6759,6761,6763,6766,6768,6770],{"class":556,"line":6749},123,[554,6751,704],{"class":559},[554,6753,2491],{"class":563},[554,6755,1667],{"class":559},[554,6757,6758],{"class":567},"position-y",[554,6760,574],{"class":559},[554,6762,577],{"class":559},[554,6764,6765],{"class":559},"-",[554,6767,1780],{"class":1680},[554,6769,577],{"class":559},[554,6771,1699],{"class":559},[554,6773,6775,6777,6779,6781,6783,6785,6787,6789,6791],{"class":556,"line":6774},124,[554,6776,704],{"class":559},[554,6778,1859],{"class":563},[554,6780,1667],{"class":559},[554,6782,1864],{"class":567},[554,6784,574],{"class":559},[554,6786,577],{"class":559},[554,6788,1780],{"class":1680},[554,6790,577],{"class":559},[554,6792,1699],{"class":559},[554,6794,6796,6798,6800],{"class":556,"line":6795},125,[554,6797,768],{"class":559},[554,6799,685],{"class":563},[554,6801,586],{"class":559},[554,6803,6805,6807,6809],{"class":556,"line":6804},126,[554,6806,778],{"class":559},[554,6808,5552],{"class":563},[554,6810,586],{"class":559},[554,6812,6814,6816,6818],{"class":556,"line":6813},127,[554,6815,657],{"class":559},[554,6817,674],{"class":563},[554,6819,586],{"class":559},[554,6821,6823],{"class":556,"line":6822},128,[554,6824,622],{"emptyLinePlaceholder":488},[554,6826,6828,6830,6832,6834],{"class":556,"line":6827},129,[554,6829,560],{"class":559},[554,6831,1528],{"class":563},[554,6833,4197],{"class":567},[554,6835,586],{"class":559},[554,6837,6839,6841,6844],{"class":556,"line":6838},130,[554,6840,803],{"class":559},[554,6842,6843],{"class":2200},"html-demo-wrapper",[554,6845,2290],{"class":559},[554,6847,6849,6851,6853,6856],{"class":556,"line":6848},131,[554,6850,3071],{"class":4212},[554,6852,2281],{"class":559},[554,6854,6855],{"class":1680}," 100%",[554,6857,4224],{"class":559},[554,6859,6861,6863,6865,6867],{"class":556,"line":6860},132,[554,6862,3084],{"class":4212},[554,6864,2281],{"class":559},[554,6866,6855],{"class":1680},[554,6868,4224],{"class":559},[554,6870,6872,6875,6877,6880],{"class":556,"line":6871},133,[554,6873,6874],{"class":4212},"  position",[554,6876,2281],{"class":559},[554,6878,6879],{"class":600}," relative",[554,6881,4224],{"class":559},[554,6883,6885,6888,6890,6893],{"class":556,"line":6884},134,[554,6886,6887],{"class":4212},"  overflow",[554,6889,2281],{"class":559},[554,6891,6892],{"class":600}," hidden",[554,6894,4224],{"class":559},[554,6896,6898,6900,6902,6904,6907],{"class":556,"line":6897},135,[554,6899,4213],{"class":4212},[554,6901,2281],{"class":559},[554,6903,4218],{"class":559},[554,6905,6906],{"class":600},"82dbc5",[554,6908,4224],{"class":559},[554,6910,6912],{"class":556,"line":6911},136,[554,6913,2382],{"class":559},[554,6915,6917,6919,6921],{"class":556,"line":6916},137,[554,6918,657],{"class":559},[554,6920,1528],{"class":563},[554,6922,586],{"class":559},[536,6924,6926],{"id":6925},"custom-geometry","Custom Geometry",[472,6928,6929,6930,6933,6934,6937,6938,6941,6942,6945,6946,6950],{},"By default, when using ",[510,6931,6932],{},"occlude=\"blending\"",", occlusion works correctly only with ",[2864,6935,6936],{},"rectangular HTML elements"," (using a ",[510,6939,6940],{},"PlaneGeometry",").\nFor ",[4733,6943,6944],{},"non-rectangular content",", you can use the ",[2864,6947,6948],{},[510,6949,5656],{}," prop to provide a matching custom geometry.",[472,6952,6953,6954,905,6957,6960,6961,6968,6969,803],{},"In the ",[2864,6955,6956],{},"demo above ⬆️",[4733,6958,6959],{},"(middle yellow example)",", a ",[515,6962,6965],{"href":6963,"rel":6964},"https://threejs.org/docs/#api/en/geometries/CircleGeometry",[519],[510,6966,6967],{},"CircleGeometry"," is used as a ",[2864,6970,6971],{},"custom geometry",[6973,6974,6975],"prose-list",{},[526,6976,6977,6986],{},[529,6978,1345,6979,6981,6982,6985],{},[510,6980,5656],{}," prop only defines the ",[2864,6983,6984],{},"occlusion shape"," in 3D and does not modify your HTML content.",[529,6987,6988,6989,6996,6997,7000,7001,7004,7005,7012],{},"You can provide any ",[515,6990,6993],{"href":6991,"rel":6992},"https://threejs.org/docs/#api/en/core/BufferGeometry",[519],[510,6994,6995],{},"BufferGeometry",", for example to simulate ",[2864,6998,6999],{},"CSS-like styles"," such as ",[510,7002,7003],{},"border-radius"," using a rounded rectangle or squircle geometry (see ",[515,7006,7009],{"href":7007,"rel":7008},"https://discourse.threejs.org/t/roundedrectangle-squircle/28645",[519],[510,7010,7011],{},"RoundedRectangle / Squircle geometry"," for example).",[7014,7015,7017],"h4",{"id":7016},"custom-material","Custom Material",[472,7019,7020,7021,7023,7024,905,7026,6960,7029,7032],{},"You can also assign material properties to the HTML content using the ",[510,7022,6336],{}," prop.\nIn the ",[2864,7025,6956],{},[4733,7027,7028],{},"(right red example)",[2864,7030,7031],{},"custom material"," is used with shadow.",[7034,7035,7036],"prose-note",{},[472,7037,1345,7038,7040,7041,7043,7044,803],{},[510,7039,6336],{}," prop is only available when ",[510,7042,6932],{}," is ",[2864,7045,7046],{},"enabled",[7034,7048,7049],{},[472,7050,7051,7052,3663,7057,7062,7063,7066,7067,7069,7070,7073,7074,7079,7080,7085,7086],{},"Enable shadows using the ",[2864,7053,7054],{},[510,7055,7056],{},"castShadow",[2864,7058,7059],{},[510,7060,7061],{},"receiveShadow"," props.\nShadows are supported ",[2864,7064,7065],{},"only"," when using a ",[2864,7068,7031],{},". By default, shadows do ",[2864,7071,7072],{},"not"," work with ",[4733,7075,7076],{},[510,7077,7078],{},"MeshBasicMaterial"," or ",[4733,7081,7082],{},[510,7083,7084],{},"ShaderMaterial",". ",[900,7087],{},[536,7089,7091,7092],{"id":7090},"using-transition","Using ",[510,7093,7094],{},"\u003CTransition>",[472,7096,7097,7098,7104,7105,7107,7108,7111,7112,3663,7115,7118],{},"The native Vue ",[515,7099,7102],{"href":7100,"rel":7101},"https://vuejs.org/guide/built-ins/transition",[519],[510,7103,7094],{}," component works seamlessly with ",[510,7106,3808],{},".\nThis means you can ",[2864,7109,7110],{},"animate"," how your projected HTML content ",[4733,7113,7114],{},"enters",[4733,7116,7117],{},"leaves"," the scene, exactly as you would in a regular Vue application.",[7034,7120,7121],{},[472,7122,7123,7124,7127,7128,1683,7131,7133,7134,7137],{},"All ",[2864,7125,7126],{},"standard interactions"," are supported just like on a regular HTML element — ",[2864,7129,7130],{},"hover effects",[2864,7132,1268],{},", and ",[4733,7135,7136],{},"any kind of DOM interaction"," are fully possible.",[502,7139,7140],{},[7141,7142],"objects-html-transition-demo",{},[4333,7144,4335,7145,7147],{},[4337,7146,4339],{},[540,7148,7151],{"className":542,"code":7149,"highlights":7150,"language":550,"meta":480,"style":480},"\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",[482,6061,4979,4980,4981,4982,4983,4984,4985,4986,4987,4988,4989,6235,4990,4991,4992,4993,4994,4995,4996],[510,7152,7153,7173,7200,7218,7236,7240,7250,7264,7275,7285,7295,7306,7310,7314,7335,7339,7361,7365,7375,7379,7393,7415,7419,7423,7437,7459,7463,7467,7481,7507,7511,7515,7530,7553,7557,7561,7565,7585,7658,7700,7724,7728,7732,7748,7764,7768,7776,7780,7788,7817,7846,7878,7899,7903,7909,7931,7949,7963,7977,7991,8014,8018,8074,8114,8122,8130,8138,8142,8148,8152,8156,8168,8194,8210,8233,8238,8260,8268,8283,8309,8324,8342,8348,8372,8390,8400,8409,8418,8423,8446,8467,8476,8485,8493,8497,8507,8515,8525,8535,8545,8555,8567,8571,8575,8589,8607,8611,8615,8624,8633,8643,8659,8663,8667,8676,8685,8703,8707,8711,8720,8729,8739,8753,8757],{"__ignoreMap":480},[554,7154,7155,7157,7159,7161,7163,7165,7167,7169,7171],{"class":556,"line":481},[554,7156,560],{"class":559},[554,7158,564],{"class":563},[554,7160,568],{"class":567},[554,7162,571],{"class":567},[554,7164,574],{"class":559},[554,7166,577],{"class":559},[554,7168,581],{"class":580},[554,7170,577],{"class":559},[554,7172,586],{"class":559},[554,7174,7176,7178,7180,7182,7184,7186,7188,7190,7192,7194,7196,7198],{"class":7175,"line":482},[556,590],[554,7177,594],{"class":593},[554,7179,597],{"class":559},[554,7181,3852],{"class":600},[554,7183,1616],{"class":559},[554,7185,5047],{"class":600},[554,7187,1616],{"class":559},[554,7189,1619],{"class":600},[554,7191,604],{"class":559},[554,7193,607],{"class":593},[554,7195,610],{"class":559},[554,7197,613],{"class":580},[554,7199,616],{"class":559},[554,7201,7202,7204,7206,7208,7210,7212,7214,7216],{"class":556,"line":619},[554,7203,594],{"class":593},[554,7205,597],{"class":559},[554,7207,2151],{"class":600},[554,7209,604],{"class":559},[554,7211,607],{"class":593},[554,7213,610],{"class":559},[554,7215,2140],{"class":580},[554,7217,616],{"class":559},[554,7219,7220,7222,7224,7226,7228,7230,7232,7234],{"class":556,"line":625},[554,7221,594],{"class":593},[554,7223,597],{"class":559},[554,7225,637],{"class":600},[554,7227,604],{"class":559},[554,7229,607],{"class":593},[554,7231,610],{"class":559},[554,7233,550],{"class":580},[554,7235,616],{"class":559},[554,7237,7238],{"class":556,"line":654},[554,7239,622],{"emptyLinePlaceholder":488},[554,7241,7242,7244,7246,7248],{"class":556,"line":664},[554,7243,628],{"class":567},[554,7245,5133],{"class":600},[554,7247,574],{"class":559},[554,7249,2290],{"class":559},[554,7251,7252,7254,7256,7258,7260,7262],{"class":556,"line":669},[554,7253,5142],{"class":563},[554,7255,2281],{"class":559},[554,7257,610],{"class":559},[554,7259,3920],{"class":580},[554,7261,643],{"class":559},[554,7263,3065],{"class":559},[554,7265,7266,7268,7270,7273],{"class":556,"line":679},[554,7267,5157],{"class":563},[554,7269,2281],{"class":559},[554,7271,7272],{"class":1680}," 0",[554,7274,3065],{"class":559},[554,7276,7277,7279,7281,7283],{"class":556,"line":690},[554,7278,5168],{"class":563},[554,7280,2281],{"class":559},[554,7282,3062],{"class":2553},[554,7284,3065],{"class":559},[554,7286,7287,7289,7291,7293],{"class":556,"line":545},[554,7288,5179],{"class":563},[554,7290,2281],{"class":559},[554,7292,3062],{"class":2553},[554,7294,3065],{"class":559},[554,7296,7297,7300,7302,7304],{"class":556,"line":546},[554,7298,7299],{"class":563},"  antialias",[554,7301,2281],{"class":559},[554,7303,3062],{"class":2553},[554,7305,3065],{"class":559},[554,7307,7308],{"class":556,"line":547},[554,7309,2382],{"class":559},[554,7311,7312],{"class":556,"line":548},[554,7313,622],{"emptyLinePlaceholder":488},[554,7315,7316,7318,7321,7323,7325,7327,7330,7332],{"class":556,"line":549},[554,7317,628],{"class":567},[554,7319,7320],{"class":600}," rootRef ",[554,7322,574],{"class":559},[554,7324,637],{"class":636},[554,7326,560],{"class":559},[554,7328,7329],{"class":2200},"HTMLElement",[554,7331,2209],{"class":559},[554,7333,7334],{"class":600},"()\n",[554,7336,7337],{"class":556,"line":765},[554,7338,622],{"emptyLinePlaceholder":488},[554,7340,7341,7343,7346,7348,7350,7352,7354,7357,7359],{"class":556,"line":775},[554,7342,628],{"class":567},[554,7344,7345],{"class":600}," bgColor ",[554,7347,574],{"class":559},[554,7349,637],{"class":636},[554,7351,640],{"class":600},[554,7353,643],{"class":559},[554,7355,7356],{"class":580},"#F6B03B",[554,7358,643],{"class":559},[554,7360,651],{"class":600},[554,7362,7363],{"class":556,"line":785},[554,7364,622],{"emptyLinePlaceholder":488},[554,7366,7367,7369,7371,7373],{"class":556,"line":1878},[554,7368,628],{"class":567},[554,7370,5221],{"class":600},[554,7372,574],{"class":559},[554,7374,5226],{"class":600},[554,7376,7377],{"class":556,"line":1913},[554,7378,5231],{"class":559},[554,7380,7381,7383,7385,7387,7389,7391],{"class":556,"line":1922},[554,7382,5236],{"class":563},[554,7384,2281],{"class":559},[554,7386,610],{"class":559},[554,7388,2605],{"class":580},[554,7390,643],{"class":559},[554,7392,3065],{"class":559},[554,7394,7395,7397,7399,7401,7403,7405,7407,7409,7411,7413],{"class":556,"line":2481},[554,7396,5251],{"class":563},[554,7398,2281],{"class":559},[554,7400,5256],{"class":600},[554,7402,1780],{"class":1680},[554,7404,1616],{"class":559},[554,7406,3111],{"class":1680},[554,7408,1616],{"class":559},[554,7410,3111],{"class":1680},[554,7412,1694],{"class":600},[554,7414,3065],{"class":559},[554,7416,7417],{"class":556,"line":2486},[554,7418,3119],{"class":559},[554,7420,7421],{"class":556,"line":2070},[554,7422,5231],{"class":559},[554,7424,7425,7427,7429,7431,7433,7435],{"class":556,"line":2071},[554,7426,5236],{"class":563},[554,7428,2281],{"class":559},[554,7430,610],{"class":559},[554,7432,1766],{"class":580},[554,7434,643],{"class":559},[554,7436,3065],{"class":559},[554,7438,7439,7441,7443,7445,7447,7449,7451,7453,7455,7457],{"class":556,"line":2072},[554,7440,5251],{"class":563},[554,7442,2281],{"class":559},[554,7444,5256],{"class":600},[554,7446,5303],{"class":1680},[554,7448,1616],{"class":559},[554,7450,5308],{"class":1680},[554,7452,1616],{"class":559},[554,7454,5308],{"class":1680},[554,7456,1694],{"class":600},[554,7458,3065],{"class":559},[554,7460,7461],{"class":556,"line":2073},[554,7462,3119],{"class":559},[554,7464,7465],{"class":556,"line":2585},[554,7466,5231],{"class":559},[554,7468,7469,7471,7473,7475,7477,7479],{"class":556,"line":2591},[554,7470,5236],{"class":563},[554,7472,2281],{"class":559},[554,7474,610],{"class":559},[554,7476,2773],{"class":580},[554,7478,643],{"class":559},[554,7480,3065],{"class":559},[554,7482,7483,7485,7487,7489,7491,7493,7495,7497,7499,7501,7503,7505],{"class":556,"line":2600},[554,7484,5251],{"class":563},[554,7486,2281],{"class":559},[554,7488,5256],{"class":600},[554,7490,1871],{"class":1680},[554,7492,1616],{"class":559},[554,7494,5353],{"class":1680},[554,7496,1616],{"class":559},[554,7498,5358],{"class":1680},[554,7500,1616],{"class":559},[554,7502,5363],{"class":1680},[554,7504,1694],{"class":600},[554,7506,3065],{"class":559},[554,7508,7509],{"class":556,"line":2634},[554,7510,3119],{"class":559},[554,7512,7513],{"class":556,"line":2639},[554,7514,5231],{"class":559},[554,7516,7517,7519,7521,7523,7526,7528],{"class":556,"line":2647},[554,7518,5236],{"class":563},[554,7520,2281],{"class":559},[554,7522,610],{"class":559},[554,7524,7525],{"class":580},"TresConeGeometry",[554,7527,643],{"class":559},[554,7529,3065],{"class":559},[554,7531,7532,7534,7536,7538,7540,7542,7545,7547,7549,7551],{"class":556,"line":2664},[554,7533,5251],{"class":563},[554,7535,2281],{"class":559},[554,7537,5256],{"class":600},[554,7539,5303],{"class":1680},[554,7541,1616],{"class":559},[554,7543,7544],{"class":1680}," 1.4",[554,7546,1616],{"class":559},[554,7548,5308],{"class":1680},[554,7550,1694],{"class":600},[554,7552,3065],{"class":559},[554,7554,7555],{"class":556,"line":2694},[554,7556,3119],{"class":559},[554,7558,7559],{"class":556,"line":2699},[554,7560,5404],{"class":600},[554,7562,7563],{"class":556,"line":2708},[554,7564,622],{"emptyLinePlaceholder":488},[554,7566,7567,7569,7572,7574,7577,7580,7583],{"class":556,"line":2713},[554,7568,628],{"class":567},[554,7570,7571],{"class":600}," getRandomBackgroundColor ",[554,7573,574],{"class":559},[554,7575,7576],{"class":559}," ():",[554,7578,7579],{"class":2200}," string",[554,7581,7582],{"class":567}," =>",[554,7584,2290],{"class":559},[554,7586,7587,7590,7593,7595,7597,7599,7601,7603,7605,7607,7609,7611,7613,7615,7618,7620,7622,7624,7627,7629,7631,7633,7636,7638,7640,7642,7645,7647,7649,7651,7654,7656],{"class":556,"line":2721},[554,7588,7589],{"class":567},"  const",[554,7591,7592],{"class":600}," colors",[554,7594,2343],{"class":559},[554,7596,5256],{"class":563},[554,7598,643],{"class":559},[554,7600,7356],{"class":580},[554,7602,643],{"class":559},[554,7604,1616],{"class":559},[554,7606,610],{"class":559},[554,7608,3920],{"class":580},[554,7610,643],{"class":559},[554,7612,1616],{"class":559},[554,7614,610],{"class":559},[554,7616,7617],{"class":580},"#FF5733",[554,7619,643],{"class":559},[554,7621,1616],{"class":559},[554,7623,610],{"class":559},[554,7625,7626],{"class":580},"#33FF57",[554,7628,643],{"class":559},[554,7630,1616],{"class":559},[554,7632,610],{"class":559},[554,7634,7635],{"class":580},"#3357FF",[554,7637,643],{"class":559},[554,7639,1616],{"class":559},[554,7641,610],{"class":559},[554,7643,7644],{"class":580},"#F333FF",[554,7646,643],{"class":559},[554,7648,1616],{"class":559},[554,7650,610],{"class":559},[554,7652,7653],{"class":580},"#33FFF5",[554,7655,643],{"class":559},[554,7657,5404],{"class":563},[554,7659,7660,7662,7665,7667,7670,7672,7675,7677,7680,7682,7685,7688,7691,7693,7695,7698],{"class":556,"line":2734},[554,7661,7589],{"class":567},[554,7663,7664],{"class":600}," idx",[554,7666,2343],{"class":559},[554,7668,7669],{"class":600}," Math",[554,7671,803],{"class":559},[554,7673,7674],{"class":636},"floor",[554,7676,640],{"class":563},[554,7678,7679],{"class":600},"Math",[554,7681,803],{"class":559},[554,7683,7684],{"class":636},"random",[554,7686,7687],{"class":563},"() ",[554,7689,7690],{"class":559},"*",[554,7692,7592],{"class":600},[554,7694,803],{"class":559},[554,7696,7697],{"class":600},"length",[554,7699,651],{"class":563},[554,7701,7702,7705,7707,7709,7712,7715,7718,7720,7722],{"class":556,"line":2762},[554,7703,7704],{"class":593},"  return",[554,7706,7592],{"class":600},[554,7708,1677],{"class":563},[554,7710,7711],{"class":600},"idx",[554,7713,7714],{"class":563},"] ",[554,7716,7717],{"class":559},"??",[554,7719,610],{"class":559},[554,7721,7356],{"class":580},[554,7723,616],{"class":559},[554,7725,7726],{"class":556,"line":2768},[554,7727,2382],{"class":559},[554,7729,7730],{"class":556,"line":2808},[554,7731,622],{"emptyLinePlaceholder":488},[554,7733,7734,7736,7739,7741,7744,7746],{"class":556,"line":2818},[554,7735,628],{"class":567},[554,7737,7738],{"class":600}," updateBackgroundColor ",[554,7740,574],{"class":559},[554,7742,7743],{"class":559}," ()",[554,7745,7582],{"class":567},[554,7747,2290],{"class":559},[554,7749,7750,7753,7755,7757,7759,7762],{"class":556,"line":2827},[554,7751,7752],{"class":600},"  bgColor",[554,7754,803],{"class":559},[554,7756,2309],{"class":600},[554,7758,2343],{"class":559},[554,7760,7761],{"class":636}," getRandomBackgroundColor",[554,7763,7334],{"class":563},[554,7765,7766],{"class":556,"line":2836},[554,7767,2382],{"class":559},[554,7769,7770,7772,7774],{"class":556,"line":5622},[554,7771,657],{"class":559},[554,7773,564],{"class":563},[554,7775,586],{"class":559},[554,7777,7778],{"class":556,"line":5631},[554,7779,622],{"emptyLinePlaceholder":488},[554,7781,7782,7784,7786],{"class":556,"line":5636},[554,7783,560],{"class":559},[554,7785,674],{"class":563},[554,7787,586],{"class":559},[554,7789,7790,7792,7794,7796,7798,7800,7803,7805,7807,7809,7811,7813,7815],{"class":556,"line":5644},[554,7791,682],{"class":559},[554,7793,5552],{"class":563},[554,7795,637],{"class":567},[554,7797,574],{"class":559},[554,7799,577],{"class":559},[554,7801,7802],{"class":580},"rootRef",[554,7804,577],{"class":559},[554,7806,2939],{"class":567},[554,7808,574],{"class":559},[554,7810,577],{"class":559},[554,7812,6843],{"class":580},[554,7814,577],{"class":559},[554,7816,586],{"class":559},[554,7818,7819,7821,7823,7825,7827,7829,7831,7833,7835,7837,7839,7842,7844],{"class":556,"line":5672},[554,7820,693],{"class":559},[554,7822,685],{"class":563},[554,7824,5574],{"class":567},[554,7826,574],{"class":559},[554,7828,577],{"class":559},[554,7830,5581],{"class":600},[554,7832,577],{"class":559},[554,7834,2939],{"class":567},[554,7836,574],{"class":559},[554,7838,577],{"class":559},[554,7840,7841],{"class":580},"!pointer-events-none",[554,7843,577],{"class":559},[554,7845,586],{"class":559},[554,7847,7848,7850,7852,7854,7856,7858,7860,7862,7864,7866,7868,7870,7872,7874,7876],{"class":556,"line":5696},[554,7849,704],{"class":559},[554,7851,1664],{"class":563},[554,7853,1667],{"class":559},[554,7855,1670],{"class":567},[554,7857,574],{"class":559},[554,7859,577],{"class":559},[554,7861,1677],{"class":559},[554,7863,1107],{"class":1680},[554,7865,1683],{"class":559},[554,7867,5608],{"class":1680},[554,7869,1683],{"class":559},[554,7871,5613],{"class":1680},[554,7873,1694],{"class":559},[554,7875,577],{"class":559},[554,7877,1699],{"class":559},[554,7879,7880,7882,7884,7886,7889,7891,7893,7895,7897],{"class":556,"line":5712},[554,7881,704],{"class":559},[554,7883,1706],{"class":563},[554,7885,1667],{"class":559},[554,7887,7888],{"class":567},"dom-element",[554,7890,574],{"class":559},[554,7892,577],{"class":559},[554,7894,7802],{"class":600},[554,7896,577],{"class":559},[554,7898,1699],{"class":559},[554,7900,7901],{"class":556,"line":5729},[554,7902,622],{"emptyLinePlaceholder":488},[554,7904,7905,7907],{"class":556,"line":5745},[554,7906,704],{"class":559},[554,7908,5641],{"class":563},[554,7910,7911,7913,7915,7917,7919,7921,7923,7925,7927,7929],{"class":556,"line":5771},[554,7912,5647],{"class":593},[554,7914,574],{"class":559},[554,7916,577],{"class":559},[554,7918,640],{"class":559},[554,7920,5656],{"class":600},[554,7922,1683],{"class":559},[554,7924,5661],{"class":600},[554,7926,5664],{"class":559},[554,7928,5667],{"class":600},[554,7930,723],{"class":559},[554,7932,7933,7935,7937,7939,7941,7943,7945,7947],{"class":556,"line":5776},[554,7934,744],{"class":559},[554,7936,5677],{"class":567},[554,7938,574],{"class":559},[554,7940,5682],{"class":559},[554,7942,5685],{"class":580},[554,7944,5688],{"class":559},[554,7946,5661],{"class":600},[554,7948,5693],{"class":559},[554,7950,7951,7953,7955,7957,7959,7961],{"class":556,"line":5834},[554,7952,744],{"class":559},[554,7954,5701],{"class":567},[554,7956,574],{"class":559},[554,7958,577],{"class":559},[554,7960,2747],{"class":1680},[554,7962,723],{"class":559},[554,7964,7965,7967,7969,7971,7973,7975],{"class":556,"line":5878},[554,7966,744],{"class":559},[554,7968,5717],{"class":567},[554,7970,574],{"class":559},[554,7972,577],{"class":559},[554,7974,5724],{"class":1680},[554,7976,723],{"class":559},[554,7978,7979,7981,7983,7985,7987,7989],{"class":556,"line":5887},[554,7980,744],{"class":559},[554,7982,5734],{"class":567},[554,7984,574],{"class":559},[554,7986,577],{"class":559},[554,7988,1780],{"class":1680},[554,7990,723],{"class":559},[554,7992,7993,7995,7997,7999,8001,8003,8006,8008,8010,8012],{"class":556,"line":5897},[554,7994,744],{"class":559},[554,7996,5750],{"class":567},[554,7998,574],{"class":559},[554,8000,577],{"class":559},[554,8002,5757],{"class":559},[554,8004,8005],{"class":1680},"0.4",[554,8007,1683],{"class":559},[554,8009,8005],{"class":1680},[554,8011,1694],{"class":559},[554,8013,723],{"class":559},[554,8015,8016],{"class":556,"line":5907},[554,8017,4110],{"class":559},[554,8019,8020,8022,8024,8026,8028,8030,8032,8035,8037,8040,8042,8044,8046,8048,8050,8053,8055,8058,8060,8062,8064,8066,8068,8070,8072],{"class":556,"line":4968},[554,8021,1763],{"class":559},[554,8023,1756],{"class":563},[554,8025,1667],{"class":559},[554,8027,1670],{"class":567},[554,8029,574],{"class":559},[554,8031,577],{"class":559},[554,8033,8034],{"class":559},"[(",[554,8036,5661],{"class":600},[554,8038,8039],{"class":559}," - (",[554,8041,5667],{"class":600},[554,8043,803],{"class":559},[554,8045,7697],{"class":600},[554,8047,5800],{"class":559},[554,8049,1780],{"class":1680},[554,8051,8052],{"class":559},") / ",[554,8054,1686],{"class":1680},[554,8056,8057],{"class":559},") * ",[554,8059,1686],{"class":1680},[554,8061,1683],{"class":559},[554,8063,1780],{"class":1680},[554,8065,1683],{"class":559},[554,8067,1107],{"class":1680},[554,8069,1694],{"class":559},[554,8071,577],{"class":559},[554,8073,586],{"class":559},[554,8075,8076,8078,8080,8082,8084,8086,8088,8090,8092,8094,8096,8098,8100,8102,8104,8106,8108,8110,8112],{"class":556,"line":4969},[554,8077,5837],{"class":559},[554,8079,5840],{"class":563},[554,8081,1667],{"class":559},[554,8083,5845],{"class":567},[554,8085,574],{"class":559},[554,8087,577],{"class":559},[554,8089,5656],{"class":600},[554,8091,803],{"class":559},[554,8093,5840],{"class":600},[554,8095,577],{"class":559},[554,8097,1667],{"class":559},[554,8099,1771],{"class":567},[554,8101,574],{"class":559},[554,8103,577],{"class":559},[554,8105,5656],{"class":600},[554,8107,803],{"class":559},[554,8109,1771],{"class":600},[554,8111,577],{"class":559},[554,8113,1699],{"class":559},[554,8115,8116,8118,8120],{"class":556,"line":4970},[554,8117,5837],{"class":559},[554,8119,2813],{"class":563},[554,8121,1699],{"class":559},[554,8123,8124,8126,8128],{"class":556,"line":4971},[554,8125,5890],{"class":559},[554,8127,1756],{"class":563},[554,8129,586],{"class":559},[554,8131,8132,8134,8136],{"class":556,"line":4972},[554,8133,1835],{"class":559},[554,8135,5902],{"class":563},[554,8137,586],{"class":559},[554,8139,8140],{"class":556,"line":4973},[554,8141,622],{"emptyLinePlaceholder":488},[554,8143,8144,8146],{"class":556,"line":4974},[554,8145,704],{"class":559},[554,8147,4020],{"class":563},[554,8149,8150],{"class":556,"line":4975},[554,8151,4026],{"class":567},[554,8153,8154],{"class":556,"line":4976},[554,8155,4032],{"class":567},[554,8157,8158,8160,8162,8164,8166],{"class":556,"line":4977},[554,8159,5932],{"class":567},[554,8161,574],{"class":559},[554,8163,577],{"class":559},[554,8165,4938],{"class":580},[554,8167,723],{"class":559},[554,8169,8170,8172,8174,8176,8178,8180,8182,8184,8186,8188,8190,8192],{"class":556,"line":4978},[554,8171,744],{"class":559},[554,8173,1670],{"class":567},[554,8175,574],{"class":559},[554,8177,577],{"class":559},[554,8179,1677],{"class":559},[554,8181,1107],{"class":1680},[554,8183,1683],{"class":559},[554,8185,5960],{"class":1680},[554,8187,5963],{"class":559},[554,8189,1686],{"class":1680},[554,8191,1694],{"class":559},[554,8193,723],{"class":559},[554,8195,8197,8199,8201,8203,8205,8208],{"class":8196,"line":6061},[556,590],[554,8198,744],{"class":559},[554,8200,4084],{"class":567},[554,8202,574],{"class":559},[554,8204,577],{"class":559},[554,8206,8207],{"class":1680},"1.15",[554,8209,723],{"class":559},[554,8211,8213,8215,8217,8219,8221,8223,8225,8227,8229,8231],{"class":8212,"line":4979},[556,590],[554,8214,744],{"class":559},[554,8216,5977],{"class":567},[554,8218,574],{"class":559},[554,8220,577],{"class":559},[554,8222,1677],{"class":559},[554,8224,5986],{"class":1680},[554,8226,1683],{"class":559},[554,8228,1107],{"class":1680},[554,8230,1694],{"class":559},[554,8232,723],{"class":559},[554,8234,8236],{"class":8235,"line":4980},[556,590],[554,8237,4110],{"class":559},[554,8239,8241,8243,8246,8249,8251,8253,8256,8258],{"class":8240,"line":4981},[556,590],[554,8242,1763],{"class":559},[554,8244,8245],{"class":563},"Transition",[554,8247,8248],{"class":567}," name",[554,8250,574],{"class":559},[554,8252,577],{"class":559},[554,8254,8255],{"class":580},"transition-basic",[554,8257,577],{"class":559},[554,8259,586],{"class":559},[554,8261,8263,8265],{"class":8262,"line":4982},[556,590],[554,8264,5837],{"class":559},[554,8266,8267],{"class":563},"h1\n",[554,8269,8271,8274,8276,8278,8281],{"class":8270,"line":4983},[556,590],[554,8272,8273],{"class":593},"            v-if",[554,8275,574],{"class":559},[554,8277,577],{"class":559},[554,8279,8280],{"class":600},"showTransition",[554,8282,723],{"class":559},[554,8284,8286,8289,8291,8293,8295,8297,8300,8302,8305,8307],{"class":8285,"line":4984},[556,590],[554,8287,8288],{"class":559},"            :",[554,8290,1528],{"class":567},[554,8292,574],{"class":559},[554,8294,577],{"class":559},[554,8296,2570],{"class":559},[554,8298,8299],{"class":563},"backgroundColor",[554,8301,2576],{"class":559},[554,8303,8304],{"class":600},"bgColor",[554,8306,604],{"class":559},[554,8308,723],{"class":559},[554,8310,8312,8315,8317,8319,8322],{"class":8311,"line":4985},[556,590],[554,8313,8314],{"class":567},"            class",[554,8316,574],{"class":559},[554,8318,577],{"class":559},[554,8320,8321],{"class":580},"html-demo-transition-heading will-change-transform transition-transform,background-color cursor-pointer duration-500 text-center p-2 text-light shadow-lg",[554,8323,723],{"class":559},[554,8325,8327,8330,8333,8335,8337,8340],{"class":8326,"line":4986},[556,590],[554,8328,8329],{"class":559},"            @",[554,8331,8332],{"class":567},"click",[554,8334,574],{"class":559},[554,8336,577],{"class":559},[554,8338,8339],{"class":600},"updateBackgroundColor",[554,8341,723],{"class":559},[554,8343,8345],{"class":8344,"line":4987},[556,590],[554,8346,8347],{"class":559},"          >\n",[554,8349,8351,8354,8356,8358,8361,8363,8365,8368,8370],{"class":8350,"line":4988},[556,590],[554,8352,8353],{"class":559},"            \u003C",[554,8355,2864],{"class":563},[554,8357,2209],{"class":559},[554,8359,8360],{"class":600},"TRANSITION + ",[554,8362,657],{"class":559},[554,8364,2864],{"class":563},[554,8366,8367],{"class":559},">\u003C",[554,8369,900],{"class":563},[554,8371,1699],{"class":559},[554,8373,8375,8377,8379,8381,8384,8386,8388],{"class":8374,"line":4989},[556,590],[554,8376,8353],{"class":559},[554,8378,4733],{"class":563},[554,8380,2209],{"class":559},[554,8382,8383],{"class":600},"occlude=blending 💛",[554,8385,657],{"class":559},[554,8387,4733],{"class":563},[554,8389,586],{"class":559},[554,8391,8393,8396,8398],{"class":8392,"line":6235},[556,590],[554,8394,8395],{"class":559},"          \u003C/",[554,8397,4117],{"class":563},[554,8399,586],{"class":559},[554,8401,8403,8405,8407],{"class":8402,"line":4990},[556,590],[554,8404,5890],{"class":559},[554,8406,8245],{"class":563},[554,8408,586],{"class":559},[554,8410,8412,8414,8416],{"class":8411,"line":4991},[556,590],[554,8413,1835],{"class":559},[554,8415,4146],{"class":563},[554,8417,586],{"class":559},[554,8419,8421],{"class":8420,"line":4992},[556,590],[554,8422,622],{"emptyLinePlaceholder":488},[554,8424,8426,8428,8430,8432,8434,8436,8438,8440,8442,8444],{"class":8425,"line":4993},[556,590],[554,8427,704],{"class":559},[554,8429,2491],{"class":563},[554,8431,1667],{"class":559},[554,8433,6758],{"class":567},[554,8435,574],{"class":559},[554,8437,577],{"class":559},[554,8439,6765],{"class":559},[554,8441,5432],{"class":1680},[554,8443,577],{"class":559},[554,8445,1699],{"class":559},[554,8447,8449,8451,8453,8455,8457,8459,8461,8463,8465],{"class":8448,"line":4994},[556,590],[554,8450,704],{"class":559},[554,8452,1859],{"class":563},[554,8454,1667],{"class":559},[554,8456,1864],{"class":567},[554,8458,574],{"class":559},[554,8460,577],{"class":559},[554,8462,1780],{"class":1680},[554,8464,577],{"class":559},[554,8466,1699],{"class":559},[554,8468,8470,8472,8474],{"class":8469,"line":4995},[556,590],[554,8471,768],{"class":559},[554,8473,685],{"class":563},[554,8475,586],{"class":559},[554,8477,8479,8481,8483],{"class":8478,"line":4996},[556,590],[554,8480,778],{"class":559},[554,8482,5552],{"class":563},[554,8484,586],{"class":559},[554,8486,8487,8489,8491],{"class":556,"line":4997},[554,8488,657],{"class":559},[554,8490,674],{"class":563},[554,8492,586],{"class":559},[554,8494,8495],{"class":556,"line":4998},[554,8496,622],{"emptyLinePlaceholder":488},[554,8498,8499,8501,8503,8505],{"class":556,"line":4999},[554,8500,560],{"class":559},[554,8502,1528],{"class":563},[554,8504,4197],{"class":567},[554,8506,586],{"class":559},[554,8508,8509,8511,8513],{"class":556,"line":5000},[554,8510,803],{"class":559},[554,8512,6843],{"class":2200},[554,8514,2290],{"class":559},[554,8516,8517,8519,8521,8523],{"class":556,"line":6377},[554,8518,3071],{"class":4212},[554,8520,2281],{"class":559},[554,8522,6855],{"class":1680},[554,8524,4224],{"class":559},[554,8526,8527,8529,8531,8533],{"class":556,"line":5001},[554,8528,3084],{"class":4212},[554,8530,2281],{"class":559},[554,8532,6855],{"class":1680},[554,8534,4224],{"class":559},[554,8536,8537,8539,8541,8543],{"class":556,"line":5002},[554,8538,6874],{"class":4212},[554,8540,2281],{"class":559},[554,8542,6879],{"class":600},[554,8544,4224],{"class":559},[554,8546,8547,8549,8551,8553],{"class":556,"line":5003},[554,8548,6887],{"class":4212},[554,8550,2281],{"class":559},[554,8552,6892],{"class":600},[554,8554,4224],{"class":559},[554,8556,8557,8559,8561,8563,8565],{"class":556,"line":5004},[554,8558,4213],{"class":4212},[554,8560,2281],{"class":559},[554,8562,4218],{"class":559},[554,8564,6906],{"class":600},[554,8566,4224],{"class":559},[554,8568,8569],{"class":556,"line":5005},[554,8570,2382],{"class":559},[554,8572,8573],{"class":556,"line":5006},[554,8574,622],{"emptyLinePlaceholder":488},[554,8576,8577,8579,8582,8584,8587],{"class":556,"line":5007},[554,8578,803],{"class":559},[554,8580,8581],{"class":2200},"html-demo-transition-heading",[554,8583,2281],{"class":559},[554,8585,8586],{"class":567},"hover",[554,8588,2290],{"class":559},[554,8590,8591,8594,8596,8599,8601,8604],{"class":556,"line":5008},[554,8592,8593],{"class":4212},"  transform",[554,8595,2281],{"class":559},[554,8597,8598],{"class":636}," scale",[554,8600,640],{"class":559},[554,8602,8603],{"class":1680},"1.05",[554,8605,8606],{"class":559},");\n",[554,8608,8609],{"class":556,"line":5009},[554,8610,2382],{"class":559},[554,8612,8613],{"class":556,"line":5010},[554,8614,622],{"emptyLinePlaceholder":488},[554,8616,8617,8619,8622],{"class":556,"line":5011},[554,8618,803],{"class":559},[554,8620,8621],{"class":2200},"transition-basic-enter-from",[554,8623,3065],{"class":559},[554,8625,8626,8628,8631],{"class":556,"line":6560},[554,8627,803],{"class":559},[554,8629,8630],{"class":2200},"transition-basic-leave-to",[554,8632,2290],{"class":559},[554,8634,8635,8637,8639,8641],{"class":556,"line":6584},[554,8636,5500],{"class":4212},[554,8638,2281],{"class":559},[554,8640,7272],{"class":1680},[554,8642,4224],{"class":559},[554,8644,8645,8647,8649,8652,8654,8657],{"class":556,"line":6605},[554,8646,8593],{"class":4212},[554,8648,2281],{"class":559},[554,8650,8651],{"class":636}," translateY",[554,8653,640],{"class":559},[554,8655,8656],{"class":1680},"-20px",[554,8658,8606],{"class":559},[554,8660,8661],{"class":556,"line":6614},[554,8662,2382],{"class":559},[554,8664,8665],{"class":556,"line":6623},[554,8666,622],{"emptyLinePlaceholder":488},[554,8668,8669,8671,8674],{"class":556,"line":6628},[554,8670,803],{"class":559},[554,8672,8673],{"class":2200},"transition-basic-enter-active",[554,8675,3065],{"class":559},[554,8677,8678,8680,8683],{"class":556,"line":6636},[554,8679,803],{"class":559},[554,8681,8682],{"class":2200},"transition-basic-leave-active",[554,8684,2290],{"class":559},[554,8686,8687,8690,8692,8695,8698,8701],{"class":556,"line":6654},[554,8688,8689],{"class":4212},"  transition",[554,8691,2281],{"class":559},[554,8693,8694],{"class":600}," all ",[554,8696,8697],{"class":1680},"0.5s",[554,8699,8700],{"class":600}," ease",[554,8702,4224],{"class":559},[554,8704,8705],{"class":556,"line":6674},[554,8706,2382],{"class":559},[554,8708,8709],{"class":556,"line":6691},[554,8710,622],{"emptyLinePlaceholder":488},[554,8712,8713,8715,8718],{"class":556,"line":6718},[554,8714,803],{"class":559},[554,8716,8717],{"class":2200},"transition-basic-enter-to",[554,8719,3065],{"class":559},[554,8721,8722,8724,8727],{"class":556,"line":6733},[554,8723,803],{"class":559},[554,8725,8726],{"class":2200},"transition-basic-leave-from",[554,8728,2290],{"class":559},[554,8730,8731,8733,8735,8737],{"class":556,"line":6739},[554,8732,5500],{"class":4212},[554,8734,2281],{"class":559},[554,8736,3111],{"class":1680},[554,8738,4224],{"class":559},[554,8740,8741,8743,8745,8747,8749,8751],{"class":556,"line":6744},[554,8742,8593],{"class":4212},[554,8744,2281],{"class":559},[554,8746,8651],{"class":636},[554,8748,640],{"class":559},[554,8750,1107],{"class":1680},[554,8752,8606],{"class":559},[554,8754,8755],{"class":556,"line":6749},[554,8756,2382],{"class":559},[554,8758,8759,8761,8763],{"class":556,"line":6774},[554,8760,657],{"class":559},[554,8762,1528],{"class":563},[554,8764,586],{"class":559},[881,8766,7091,8768],{"id":8767},"using-iframes",[510,8769,8770],{},"iframes",[472,8772,8773,8774,8776],{},"You can achieve pretty cool results with the ",[510,8775,4146],{}," 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.",[2049,8778,8779],{},[8780,8781],"objects-html-iframe-demo",{},[4333,8783,4335,8784,8786],{},[4337,8785,4339],{},[540,8787,8789],{"className":4342,"code":8788,"language":4344,"meta":480,"style":480},"\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",[510,8790,8791,8797,8802,8807,8820,8833,8846,8859,8872,8886,8900,8904,8975],{"__ignoreMap":480},[554,8792,8793,8795],{"class":556,"line":481},[554,8794,560],{"class":559},[554,8796,4794],{"class":563},[554,8798,8799],{"class":556,"line":482},[554,8800,8801],{"class":567},"  transform\n",[554,8803,8804],{"class":556,"line":619},[554,8805,8806],{"class":567},"  center\n",[554,8808,8809,8812,8814,8816,8818],{"class":556,"line":625},[554,8810,8811],{"class":567},"  :cast-shadow",[554,8813,574],{"class":559},[554,8815,577],{"class":559},[554,8817,1083],{"class":580},[554,8819,723],{"class":559},[554,8821,8822,8825,8827,8829,8831],{"class":556,"line":654},[554,8823,8824],{"class":567},"  :receive-shadow",[554,8826,574],{"class":559},[554,8828,577],{"class":559},[554,8830,1083],{"class":580},[554,8832,723],{"class":559},[554,8834,8835,8838,8840,8842,8844],{"class":556,"line":664},[554,8836,8837],{"class":567},"  occlude",[554,8839,574],{"class":559},[554,8841,577],{"class":559},[554,8843,4938],{"class":580},[554,8845,723],{"class":559},[554,8847,8848,8851,8853,8855,8857],{"class":556,"line":669},[554,8849,8850],{"class":567},"  :z-index-range",[554,8852,574],{"class":559},[554,8854,577],{"class":559},[554,8856,4428],{"class":580},[554,8858,723],{"class":559},[554,8860,8861,8864,8866,8868,8870],{"class":556,"line":679},[554,8862,8863],{"class":567},"  :position-y",[554,8865,574],{"class":559},[554,8867,577],{"class":559},[554,8869,6501],{"class":580},[554,8871,723],{"class":559},[554,8873,8874,8877,8879,8881,8884],{"class":556,"line":690},[554,8875,8876],{"class":567},"  :portal",[554,8878,574],{"class":559},[554,8880,577],{"class":559},[554,8882,8883],{"class":580},"portalRef",[554,8885,723],{"class":559},[554,8887,8888,8891,8893,8895,8898],{"class":556,"line":545},[554,8889,8890],{"class":567},"  :style",[554,8892,574],{"class":559},[554,8894,577],{"class":559},[554,8896,8897],{"class":580},"{ userSelect: 'none' }",[554,8899,723],{"class":559},[554,8901,8902],{"class":556,"line":546},[554,8903,586],{"class":559},[554,8905,8906,8908,8911,8913,8915,8917,8920,8922,8925,8927,8929,8932,8934,8937,8939,8941,8943,8945,8948,8950,8952,8955,8957,8960,8962,8964,8967,8969,8971,8973],{"class":556,"line":547},[554,8907,682],{"class":559},[554,8909,8910],{"class":563},"iframe",[554,8912,2939],{"class":567},[554,8914,574],{"class":559},[554,8916,577],{"class":559},[554,8918,8919],{"class":580},"w-[700px] h-[500px]",[554,8921,577],{"class":559},[554,8923,8924],{"class":567}," src",[554,8926,574],{"class":559},[554,8928,577],{"class":559},[554,8930,8931],{"class":580},"https://tresjs.org",[554,8933,577],{"class":559},[554,8935,8936],{"class":567}," frameborder",[554,8938,574],{"class":559},[554,8940,577],{"class":559},[554,8942,1107],{"class":580},[554,8944,577],{"class":559},[554,8946,8947],{"class":567}," :width",[554,8949,574],{"class":559},[554,8951,577],{"class":559},[554,8953,8954],{"class":580},"700",[554,8956,577],{"class":559},[554,8958,8959],{"class":567}," :height",[554,8961,574],{"class":559},[554,8963,577],{"class":559},[554,8965,8966],{"class":580},"500",[554,8968,577],{"class":559},[554,8970,6433],{"class":559},[554,8972,8910],{"class":563},[554,8974,586],{"class":559},[554,8976,8977,8979,8981],{"class":556,"line":548},[554,8978,657],{"class":559},[554,8980,4344],{"class":563},[554,8982,586],{"class":559},[8984,8985,8986],"info",{},[472,8987,8988,8989,8992,8993,8996,8997],{},"The demos use ",[510,8990,8991],{},":z-index-range=\"[28, 0]\""," simply to ensure the HTML elements stay below the documentation header (which uses ",[510,8994,8995],{},"z-index: 30",").\n",[2864,8998,8999],{},"This value is for the docs only — you can ignore it or adjust it as needed.",[536,9001,915],{"id":914},[917,9003,9004,9014],{},[920,9005,9006],{},[923,9007,9008,9010,9012],{},[926,9009,1939],{},[926,9011,932],{},[926,9013,935],{},[937,9015,9016,9034,9049,9067,9093,9113,9130,9148,9160,9179,9202,9242,9279,9299,9332],{},[923,9017,9018,9023,9029],{},[942,9019,9020],{},[2864,9021,9022],{},"as",[942,9024,9025,9026,803],{},"Wrapping ",[4733,9027,9028],{},"HTML element",[942,9030,9031],{},[510,9032,9033],{},"'div'",[923,9035,9036,9041,9047],{},[942,9037,9038],{},[2864,9039,9040],{},"wrapperClass",[942,9042,1345,9043,9046],{},[510,9044,9045],{},"className"," of the wrapping element. element.",[942,9048],{},[923,9050,9051,9056,9063],{},[942,9052,9053],{},[2864,9054,9055],{},"prepend",[942,9057,9058,9059,9062],{},"Projects content ",[4733,9060,9061],{},"behind"," the canvas.",[942,9064,9065],{},[510,9066,1122],{},[923,9068,9069,9073,9089],{},[942,9070,9071],{},[2864,9072,1188],{},[942,9074,9075,9076,7085,9079,9081,9082],{},"Adds a ",[510,9077,9078],{},"transform: translate(-50%, -50%)",[900,9080],{},"➡️ ",[4733,9083,9084,9085,9088],{},"Ignored in ",[2864,9086,9087],{},"transform"," mode.",[942,9090,9091],{},[510,9092,1122],{},[923,9094,9095,9100,9109],{},[942,9096,9097],{},[2864,9098,9099],{},"fullscreen",[942,9101,9102,9103,9081,9105],{},"Aligns to the upper-left corner and fills the screen. ",[900,9104],{},[4733,9106,9084,9107,9088],{},[2864,9108,9087],{},[942,9110,9111],{},[510,9112,1122],{},[923,9114,9115,9120,9128],{},[942,9116,9117],{},[2864,9118,9119],{},"distanceFactor",[942,9121,9122,9123,9125,9126,803],{},"Children are scaled by this factor and also by distance to a ",[510,9124,3801],{},", or zoom when using an ",[510,9127,3804],{},[942,9129],{},[923,9131,9132,9137,9143],{},[942,9133,9134],{},[2864,9135,9136],{},"zIndexRange",[942,9138,9139,9140,803],{},"Defines the ",[4733,9141,9142],{},"Z-order range",[942,9144,9145],{},[510,9146,9147],{},"[16777271, 0]",[923,9149,9150,9155,9158],{},[942,9151,9152],{},[2864,9153,9154],{},"portal",[942,9156,9157],{},"Reference to a target container (for rendering into a different DOM node). container.",[942,9159],{},[923,9161,9162,9166,9175],{},[942,9163,9164],{},[2864,9165,9087],{},[942,9167,967,9168,9170,9171,9174],{},[510,9169,1083],{},", applies ",[510,9172,9173],{},"matrix3d"," transformations — the element appears as if it is inside the 3D scene.",[942,9176,9177],{},[510,9178,1122],{},[923,9180,9181,9186,9198],{},[942,9182,9183],{},[2864,9184,9185],{},"sprite",[942,9187,9188,9189,7085,9191,9081,9193],{},"Renders as a ",[4733,9190,9185],{},[900,9192],{},[4733,9194,9195,9196,9088],{},"Only in ",[2864,9197,9087],{},[942,9199,9200],{},[510,9201,1122],{},[923,9203,9204,9209,9233],{},[942,9205,9206],{},[2864,9207,9208],{},"calculatePosition",[942,9210,9211,9212,9214,905,9217,905,9220,9222,9223,9226,9227,9081,9229],{},"Callback function to override the default positioning logic. ",[900,9213],{},[2864,9215,9216],{},"Type:",[510,9218,9219],{},"(object: Object3D, camera: Camera, size: { width: number; height: number }) => [number, number, number]",[900,9221],{},"Receives the related 3D object, the active camera, and the current viewport size, and must return ",[510,9224,9225],{},"[x, y, z]"," pixel coordinates for placing the HTML element. ",[900,9228],{},[4733,9230,9084,9231,9088],{},[2864,9232,9087],{},[942,9234,9235],{},[515,9236,9239,9240],{"href":9237,"rel":9238},"https://github.com/Tresjs/cientos/blob/main/src/core/misc/html/utils.ts#L9-L19",[519],"Default ",[510,9241,9208],{},[923,9243,9244,9248,9277],{},[942,9245,9246],{},[2864,9247,4296],{},[942,9249,9250,9251,9253,9254,9256,9257,9260,9261,5800,9263,9266,9267,9253,9269,9272,9273,9276],{},"Enables occlusion. Possible values: ",[900,9252],{},"- ",[510,9255,1083],{}," → Occlusion against ",[4733,9258,9259],{},"all"," scene objects ",[900,9262],{},[510,9264,9265],{},"Ref\u003CTresObject3D>[]"," → Occlusion is enabled only against the specified objects. ",[900,9268],{},[510,9270,9271],{},"'blending'"," → Uses a ",[4733,9274,9275],{},"blending-based"," occlusion method (CSS-like depth blending).",[942,9278],{},[923,9280,9281,9285,9291],{},[942,9282,9283],{},[2864,9284,5656],{},[942,9286,9287,9288,9290],{},"Custom ",[510,9289,5656],{}," to be used.",[942,9292,9293],{},[515,9294,9297],{"href":9295,"rel":9296},"https://threejs.org/docs/?q=geometry#api/en/geometries/PlaneGeometry",[519],[510,9298,6940],{},[923,9300,9301,9305,9330],{},[942,9302,9303],{},[2864,9304,6336],{},[942,9306,9307,905,9313,905,9315,9321,9322,905,9324],{},[2864,9308,9309,9310,9312],{},"Custom shader ",[4733,9311,6336],{}," used for the occlusion mesh.",[900,9314],{},[2864,9316,9317,9318,9320],{},"Only applies when ",[510,9319,6932],{}," is enabled"," (an occlusion mesh is created). ",[900,9323],{},[4733,9325,9326,9327,9329],{},"Ignored in raycast occlusion modes (",[510,9328,1083],{},", object refs).",[942,9331],{},[923,9333,9334,9339,9361],{},[942,9335,9336],{},[2864,9337,9338],{},"transparentMaterial",[942,9340,9341,905,9348,905,9350,905,9355,905,9357],{},[2864,9342,9343,9344,9347],{},"Enables ",[4733,9345,9346],{},"transparent"," rendering for the occlusion material.",[900,9349],{},[2864,9351,9317,9352,9354],{},[510,9353,6932],{}," creates an occlusion mesh.",[900,9356],{},[4733,9358,9326,9359,9329],{},[510,9360,1083],{},[942,9362,9363],{},[510,9364,1122],{},[536,9366,1269],{"id":1268},[917,9368,9369,9377],{},[920,9370,9371],{},[923,9372,9373,9375],{},[926,9374,1278],{},[926,9376,932],{},[937,9378,9379],{},[923,9380,9381,9384],{},[942,9382,9383],{},"onOcclude",[942,9385,9386],{},"Called when the occlusion state changes.",[536,9388,9390],{"id":9389},"exposed-properties","Exposed properties",[917,9392,9393,9405],{},[920,9394,9395],{},[923,9396,9397,9400,9403],{},[926,9398,9399],{},"Property",[926,9401,9402],{},"Type",[926,9404,932],{},[937,9406,9407,9429,9450],{},[923,9408,9409,9413,9418],{},[942,9410,9411],{},[2864,9412,2681],{},[942,9414,9415],{},[510,9416,9417],{},"Ref\u003CTresObject3D | null>",[942,9419,9420,9421,9426,9427,803],{},"Reference to the root ",[2864,9422,9423],{},[510,9424,9425],{},"\u003CTresGroup>"," used by ",[510,9428,3808],{},[923,9430,9431,9436,9441],{},[942,9432,9433],{},[2864,9434,9435],{},"isVisible",[942,9437,9438],{},[510,9439,9440],{},"Ref\u003Cboolean>",[942,9442,9443,9444,7079,9447,803],{},"Reactive value that indicates whether the HTML content is ",[2864,9445,9446],{},"currently visible",[2864,9448,9449],{},"occluded",[923,9451,9452,9457,9461],{},[942,9453,9454],{},[2864,9455,9456],{},"occlusionMesh",[942,9458,9459],{},[510,9460,9417],{},[942,9462,9463,9464,9467,9468,7043,9470,9472],{},"Reference to the ",[2864,9465,9466],{},"occlusion mesh"," created when ",[510,9469,6932],{},[2864,9471,7046],{},". Used internally for geometry-based occlusion.",[536,9474,9476],{"id":9475},"caveats","Caveats",[526,9478,9479,9512,9529,9588,9606],{},[529,9480,9481,9482,9487,9488,9490,9491,7079,9494,9497,9498,9500,9501,9504,9505,9508,9509,9511],{},"✨ When using ",[2864,9483,9484],{},[510,9485,9486],{},"\u003CHtml occlude>",", if the ",[510,9489,3808],{}," component is ",[2864,9492,9493],{},"overlapping",[2864,9495,9496],{},"inside a 3D object",", it will be considered ",[2864,9499,9449],{}," and therefore ",[2864,9502,9503],{},"hidden",". To avoid this, ",[2864,9506,9507],{},"adjust the position"," of the ",[510,9510,3808],{}," component in your scene.",[529,9513,9514,9515,9520,9521,9524,9525,9528],{},"🎨 When using ",[2864,9516,9517],{},[510,9518,9519],{},"\u003CHtml occlude=\"blending\">",", the HTML content is no longer ",[2864,9522,9523],{},"selectable"," because it is rendered ",[2864,9526,9527],{},"behind the canvas",". This is required to achieve the blending effect.",[529,9530,9531,9532,9534,9535,9537,9538],{},"⚙️ When using a ",[2864,9533,7031],{}," with occlusion in ",[510,9536,4938],{}," mode, there are a few important requirements to ensure the HTML content renders correctly ⬇️",[4333,9539,4335,9540,9543],{},[4337,9541,9542],{},"See more information",[9544,9545,9546,9558,9566,9573],"ol",{},[529,9547,9548,9549,2298,9551,9554,9555,803],{},"If you provide your own material, it must be ",[2864,9550,9346],{},[510,9552,9553],{},"transparent: true",") with an ",[2864,9556,9557],{},"opacity \u003C 1",[529,9559,9560,9561,9565],{},"If you are not providing a custom material, enable ",[2864,9562,9563],{},[510,9564,9338],{}," so the internal shader becomes transparent.",[529,9567,9568,9569,9572],{},"The occlusion mesh requires a ",[2864,9570,9571],{},"fully transparent canvas background","; otherwise, thin borders or halo artifacts may appear.",[529,9574,9575,9576,9579,9580,1683,9582,9585,9586,803],{},"To compensate for the transparent canvas, you may ",[2864,9577,9578],{},"reapply your previous clear-color as a CSS background"," on the ",[510,9581,4344],{},[510,9583,9584],{},"body",", or a wrapper ",[510,9587,5552],{},[529,9589,9590,9591,9595,9596,9598,9599,9601,9602,9605],{},"🔶 When using ",[2864,9592,9593],{},[510,9594,9338],{},", overlapping ",[510,9597,3808],{}," elements (especially multiple ",[510,9600,6932],{}," instances) may cause ",[2864,9603,9604],{},"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.",[529,9607,9608,9609,9611,9612,9615,9616],{},"🔵 To avoid thin border artifacts when using ",[510,9610,6932],{},", make sure your ",[510,9613,9614],{},"\u003CTresCanvas>"," is fully transparent:",[540,9617,9619],{"className":542,"code":9618,"language":550,"meta":480,"style":480},"\u003CTresCanvas :alpha=\"true\" :clearAlpha=\"0\" />\n",[510,9620,9621],{"__ignoreMap":480},[554,9622,9623,9625,9627,9629,9632,9634,9636,9638,9640,9642,9645,9647,9649,9651,9653],{"class":556,"line":481},[554,9624,560],{"class":559},[554,9626,685],{"class":563},[554,9628,1667],{"class":559},[554,9630,9631],{"class":567},"alpha",[554,9633,574],{"class":559},[554,9635,577],{"class":559},[554,9637,1083],{"class":2553},[554,9639,577],{"class":559},[554,9641,1667],{"class":559},[554,9643,9644],{"class":567},"clearAlpha",[554,9646,574],{"class":559},[554,9648,577],{"class":559},[554,9650,1107],{"class":1680},[554,9652,577],{"class":559},[554,9654,1699],{"class":559},[917,9656,9657,9667],{},[920,9658,9659],{},[923,9660,9661,9663,9665],{},[926,9662,1939],{},[926,9664,932],{},[926,9666,935],{},[937,9668,9669,9682,9693,9706,9722,9737,9748,9761,9772,9785,9798,9811,9833,9848],{},[923,9670,9671,9675,9678],{},[942,9672,9673],{},[2864,9674,9022],{},[942,9676,9677],{},"Wrapping html element.",[942,9679,9680],{},[510,9681,9033],{},[923,9683,9684,9688,9691],{},[942,9685,9686],{},[2864,9687,9040],{},[942,9689,9690],{},"The className of the wrapping element.",[942,9692],{},[923,9694,9695,9699,9702],{},[942,9696,9697],{},[2864,9698,9055],{},[942,9700,9701],{},"Project content behind the canvas.",[942,9703,9704],{},[510,9705,1122],{},[923,9707,9708,9712,9718],{},[942,9709,9710],{},[2864,9711,1188],{},[942,9713,9714,9715],{},"Adds a -50%/-50% CSS transform. ",[554,9716,9717],{},"Ignored in transform mode",[942,9719,9720],{},[510,9721,1122],{},[923,9723,9724,9728,9733],{},[942,9725,9726],{},[2864,9727,9099],{},[942,9729,9730,9731],{},"Aligns to the upper-left corner, fills the screen. ",[554,9732,9717],{},[942,9734,9735],{},[510,9736,1122],{},[923,9738,9739,9743,9746],{},[942,9740,9741],{},[2864,9742,9119],{},[942,9744,9745],{},"Children will be scaled by this factor, and also by distance to a PerspectiveCamera / zoom by an OrthographicCamera.",[942,9747],{},[923,9749,9750,9754,9757],{},[942,9751,9752],{},[2864,9753,9136],{},[942,9755,9756],{},"Z-order range.",[942,9758,9759],{},[510,9760,9147],{},[923,9762,9763,9767,9770],{},[942,9764,9765],{},[2864,9766,9154],{},[942,9768,9769],{},"Reference to target container.",[942,9771],{},[923,9773,9774,9778,9781],{},[942,9775,9776],{},[2864,9777,9087],{},[942,9779,9780],{},"If true, applies matrix3d transformations.",[942,9782,9783],{},[510,9784,1122],{},[923,9786,9787,9791,9794],{},[942,9788,9789],{},[2864,9790,9185],{},[942,9792,9793],{},"Renders as sprite, but only in transform mode.",[942,9795,9796],{},[510,9797,1122],{},[923,9799,9800,9804,9809],{},[942,9801,9802],{},[2864,9803,9208],{},[942,9805,9806,9807],{},"Override default positioning function. ",[554,9808,9717],{},[942,9810],{},[923,9812,9813,9817,9831],{},[942,9814,9815],{},[2864,9816,4296],{},[942,9818,9819,9820,1683,9822,1683,9824,9827,9828,9830],{},"Can be ",[510,9821,1083],{},[510,9823,9265],{},[510,9825,9826],{},"'raycast'",", or ",[510,9829,9271],{},". True occludes the entire scene.",[942,9832],{},[923,9834,9835,9839,9844],{},[942,9836,9837],{},[2864,9838,5656],{},[942,9840,9287,9841,9843],{},[510,9842,5656],{}," to be use",[942,9845,9846],{},[510,9847,6940],{},[923,9849,9850,9854,9858],{},[942,9851,9852],{},[2864,9853,6336],{},[942,9855,9309,9856,9843],{},[510,9857,6336],{},[942,9859],{},[536,9861,1269],{"id":9862},"events-1",[917,9864,9865,9873],{},[920,9866,9867],{},[923,9868,9869,9871],{},[926,9870,1278],{},[926,9872,932],{},[937,9874,9875],{},[923,9876,9877,9879],{},[942,9878,9383],{},[942,9880,9386],{},[1528,9882,9883],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":480,"searchDepth":481,"depth":482,"links":9885},[9886,9887,9892,9893,9898,9899,9900,9901,9902],{"id":538,"depth":482,"text":15},{"id":4289,"depth":482,"text":4290,"children":9888},[9889,9890,9891],{"id":4485,"depth":619,"text":4486},{"id":4648,"depth":619,"text":4649},{"id":4912,"depth":619,"text":4913},{"id":6925,"depth":482,"text":6926},{"id":7090,"depth":482,"text":9894,"children":9895},"Using \u003CTransition>",[9896],{"id":8767,"depth":619,"text":9897},"Using iframes",{"id":914,"depth":482,"text":915},{"id":1268,"depth":482,"text":1269},{"id":9389,"depth":482,"text":9390},{"id":9475,"depth":482,"text":9476},{"id":9862,"depth":482,"text":1269},"Allows you put DOM elements in your Tres.js scene.",{},{"title":413,"description":9903},"ywp4dBumrlkuSeTPICaWKzd__5F5_TaWhwF0rVH0VWc",{"id":9908,"title":417,"body":9909,"description":10538,"extension":485,"links":486,"meta":10539,"navigation":488,"path":418,"seo":10540,"stem":419,"__hash__":10541},"docs/2.api/9.objects/image.md",{"type":469,"value":9910,"toc":10533},[9911,9916,9922,9924,10118,10120,10127,10342,10344,10367,10530],[502,9912,9913],{},[9914,9915],"objects-image",{},[472,9917,9918,9921],{},[510,9919,9920],{},"\u003CImage />"," is a shader-based component that optionally loads then displays an image texture on a default plane or on your custom geometry.",[536,9923,15],{"id":538},[540,9925,9928],{"className":542,"code":9926,"highlights":9927,"language":550,"meta":480,"style":480},"\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",[619,545,546,547],[510,9929,9930,9950,9968,9988,9996,10000,10008,10016,10048,10052,10060,10075,10098,10102,10110],{"__ignoreMap":480},[554,9931,9932,9934,9936,9938,9940,9942,9944,9946,9948],{"class":556,"line":481},[554,9933,560],{"class":559},[554,9935,564],{"class":563},[554,9937,568],{"class":567},[554,9939,571],{"class":567},[554,9941,574],{"class":559},[554,9943,577],{"class":559},[554,9945,581],{"class":580},[554,9947,577],{"class":559},[554,9949,586],{"class":559},[554,9951,9952,9954,9956,9958,9960,9962,9964,9966],{"class":556,"line":482},[554,9953,594],{"class":593},[554,9955,597],{"class":559},[554,9957,2151],{"class":600},[554,9959,604],{"class":559},[554,9961,607],{"class":593},[554,9963,610],{"class":559},[554,9965,2140],{"class":580},[554,9967,616],{"class":559},[554,9969,9971,9973,9975,9978,9980,9982,9984,9986],{"class":9970,"line":619},[556,590],[554,9972,594],{"class":593},[554,9974,597],{"class":559},[554,9976,9977],{"class":600}," Image",[554,9979,604],{"class":559},[554,9981,607],{"class":593},[554,9983,610],{"class":559},[554,9985,613],{"class":580},[554,9987,616],{"class":559},[554,9989,9990,9992,9994],{"class":556,"line":625},[554,9991,657],{"class":559},[554,9993,564],{"class":563},[554,9995,586],{"class":559},[554,9997,9998],{"class":556,"line":654},[554,9999,622],{"emptyLinePlaceholder":488},[554,10001,10002,10004,10006],{"class":556,"line":664},[554,10003,560],{"class":559},[554,10005,674],{"class":563},[554,10007,586],{"class":559},[554,10009,10010,10012,10014],{"class":556,"line":669},[554,10011,682],{"class":559},[554,10013,685],{"class":563},[554,10015,586],{"class":559},[554,10017,10018,10020,10022,10024,10026,10028,10030,10032,10034,10036,10038,10040,10042,10044,10046],{"class":556,"line":679},[554,10019,693],{"class":559},[554,10021,1664],{"class":563},[554,10023,1667],{"class":559},[554,10025,1670],{"class":567},[554,10027,574],{"class":559},[554,10029,577],{"class":559},[554,10031,1677],{"class":559},[554,10033,1107],{"class":1680},[554,10035,1683],{"class":559},[554,10037,1107],{"class":1680},[554,10039,1683],{"class":559},[554,10041,1691],{"class":1680},[554,10043,1694],{"class":559},[554,10045,577],{"class":559},[554,10047,1699],{"class":559},[554,10049,10050],{"class":556,"line":690},[554,10051,622],{"emptyLinePlaceholder":488},[554,10053,10055,10057],{"class":10054,"line":545},[556,590],[554,10056,693],{"class":559},[554,10058,10059],{"class":563},"Image\n",[554,10061,10063,10066,10068,10070,10073],{"class":10062,"line":546},[556,590],[554,10064,10065],{"class":567},"      url",[554,10067,574],{"class":559},[554,10069,577],{"class":559},[554,10071,10072],{"class":580},"https://upload.wikimedia.org/wikipedia/commons/f/f0/Cyanistes_caeruleus_Oulu_20150516.JPG",[554,10074,723],{"class":559},[554,10076,10078,10080,10082,10084,10086,10088,10090,10092,10094,10096],{"class":10077,"line":547},[556,590],[554,10079,2543],{"class":559},[554,10081,4084],{"class":567},[554,10083,574],{"class":559},[554,10085,577],{"class":559},[554,10087,1677],{"class":559},[554,10089,1686],{"class":1680},[554,10091,1683],{"class":559},[554,10093,1686],{"class":1680},[554,10095,1694],{"class":559},[554,10097,723],{"class":559},[554,10099,10100],{"class":556,"line":548},[554,10101,2588],{"class":559},[554,10103,10104,10106,10108],{"class":556,"line":549},[554,10105,778],{"class":559},[554,10107,685],{"class":563},[554,10109,586],{"class":559},[554,10111,10112,10114,10116],{"class":556,"line":765},[554,10113,657],{"class":559},[554,10115,674],{"class":563},[554,10117,586],{"class":559},[536,10119,915],{"id":914},[793,10121,10122],{},[472,10123,10124,10126],{},[510,10125,9920],{}," is a THREE.Mesh and most Mesh attributes can be used as props on the component.",[917,10128,10129,10139],{},[920,10130,10131],{},[923,10132,10133,10135,10137],{},[926,10134,1939],{"align":928},[926,10136,932],{"align":928},[926,10138,935],{},[937,10140,10141,10155,10171,10185,10199,10216,10230,10249,10267,10282,10299,10319,10330],{},[923,10142,10143,10148,10151],{},[942,10144,10145],{"align":928},[510,10146,10147],{},"segments",[942,10149,10150],{"align":928},"Number of divisions in the default geometry.",[942,10152,10153],{},[510,10154,1780],{},[923,10156,10157,10161,10167],{},[942,10158,10159],{"align":928},[510,10160,4084],{},[942,10162,10163,10164],{"align":928},"Scale of the geometry. ",[510,10165,10166],{},"number | [number, number]",[942,10168,10169],{},[510,10170,1780],{},[923,10172,10173,10177,10180],{},[942,10174,10175],{"align":928},[510,10176,2652],{},[942,10178,10179],{"align":928},"Color multiplied into the image texture.",[942,10181,10182],{},[510,10183,10184],{},"'white'",[923,10186,10187,10192,10195],{},[942,10188,10189],{"align":928},[510,10190,10191],{},"zoom",[942,10193,10194],{"align":928},"Shrinks or enlarges the image texture.",[942,10196,10197],{},[510,10198,1780],{},[923,10200,10201,10206,10212],{},[942,10202,10203],{"align":928},[510,10204,10205],{},"radius",[942,10207,10208,10209,10211],{"align":928},"Border radius applied to the image texture. (Intended for rectangular geometries. Use with ",[510,10210,9346],{},".)",[942,10213,10214],{},[510,10215,1107],{},[923,10217,10218,10223,10226],{},[942,10219,10220],{"align":928},[510,10221,10222],{},"grayscale",[942,10224,10225],{"align":928},"Power of grayscale effect. 0 is off. 1 is full grayscale.",[942,10227,10228],{},[510,10229,1107],{},[923,10231,10232,10237,10245],{},[942,10233,10234],{"align":928},[510,10235,10236],{},"toneMapped",[942,10238,10239,10240],{"align":928},"Whether this material is tone mapped according to the renderers toneMapping settings. ",[515,10241,10244],{"href":10242,"rel":10243},"https://threejs.org/docs/?q=material#api/en/materials/Material.toneMapped",[519],"See THREE.material.tonemapped",[942,10246,10247],{},[510,10248,1107],{},[923,10250,10251,10255,10263],{},[942,10252,10253],{"align":928},[510,10254,9346],{},[942,10256,10257,10258],{"align":928},"Whether the image material should be transparent. ",[515,10259,10262],{"href":10260,"rel":10261},"https://threejs.org/docs/?q=material#api/en/materials/Material.transparent",[519],"See THREE.material.transparent",[942,10264,10265],{},[510,10266,1122],{},[923,10268,10269,10273,10278],{},[942,10270,10271],{"align":928},[510,10272,9346],{},[942,10274,10257,10275],{"align":928},[515,10276,10262],{"href":10260,"rel":10277},[519],[942,10279,10280],{},[510,10281,1122],{},[923,10283,10284,10289,10295],{},[942,10285,10286],{"align":928},[510,10287,10288],{},"opacity",[942,10290,10291,10292],{"align":928},"Opacity of the image material. ",[515,10293,10262],{"href":10260,"rel":10294},[519],[942,10296,10297],{},[510,10298,1780],{},[923,10300,10301,10306,10314],{},[942,10302,10303],{"align":928},[510,10304,10305],{},"side",[942,10307,10308,10309],{"align":928},"THREE.Side of the image material. ",[515,10310,10313],{"href":10311,"rel":10312},"https://threejs.org/docs/?q=material#api/en/materials/Material.side",[519],"See THREE.material.side",[942,10315,10316],{},[510,10317,10318],{},"FrontSide",[923,10320,10321,10325,10328],{},[942,10322,10323],{"align":928},[510,10324,2686],{},[942,10326,10327],{"align":928},"Image texture to display on the geometry.",[942,10329],{},[923,10331,10332,10337,10340],{},[942,10333,10334],{"align":928},[510,10335,10336],{},"url",[942,10338,10339],{"align":928},"Image URL to load and display on the geometry.",[942,10341],{},[536,10343,9476],{"id":9475},[472,10345,10346,10347,10349,10350,10353,10354,10356,10357,10360,10361,7079,10364,1510],{},"By default, images loaded via the ",[510,10348,10336],{}," prop use the renderer’s output color space. For advanced control, pass a ",[510,10351,10352],{},"THREE.Texture"," via the ",[510,10355,2686],{}," prop and set its ",[510,10358,10359],{},"colorSpace"," (e.g., ",[510,10362,10363],{},"THREE.SRGBColorSpace",[510,10365,10366],{},"THREE.LinearSRGBColorSpace",[540,10368,10370],{"className":542,"code":10369,"language":550,"meta":480,"style":480},"\u003Cscript setup>\nimport { useTexture } from '@tresjs/cientos'\nimport { SRGBColorSpace } from 'three'\nconst { state } = useTexture(URL)\nwatch(state, (texture) => {\n  texture.colorSpace = SRGBColorSpace // assign a custom color space\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CImage :texture=\"texture\" />\n\u003C/template>\n",[510,10371,10372,10382,10401,10420,10438,10459,10476,10482,10490,10494,10502,10522],{"__ignoreMap":480},[554,10373,10374,10376,10378,10380],{"class":556,"line":481},[554,10375,560],{"class":559},[554,10377,564],{"class":563},[554,10379,568],{"class":567},[554,10381,586],{"class":559},[554,10383,10384,10386,10388,10391,10393,10395,10397,10399],{"class":556,"line":482},[554,10385,594],{"class":593},[554,10387,597],{"class":559},[554,10389,10390],{"class":600}," useTexture",[554,10392,604],{"class":559},[554,10394,607],{"class":593},[554,10396,610],{"class":559},[554,10398,613],{"class":580},[554,10400,616],{"class":559},[554,10402,10403,10405,10407,10410,10412,10414,10416,10418],{"class":556,"line":619},[554,10404,594],{"class":593},[554,10406,597],{"class":559},[554,10408,10409],{"class":600}," SRGBColorSpace",[554,10411,604],{"class":559},[554,10413,607],{"class":593},[554,10415,610],{"class":559},[554,10417,5120],{"class":580},[554,10419,616],{"class":559},[554,10421,10422,10424,10426,10429,10431,10433,10435],{"class":556,"line":625},[554,10423,628],{"class":567},[554,10425,597],{"class":559},[554,10427,10428],{"class":600}," state ",[554,10430,3125],{"class":559},[554,10432,2343],{"class":559},[554,10434,10390],{"class":636},[554,10436,10437],{"class":600},"(URL)\n",[554,10439,10440,10443,10446,10448,10450,10452,10455,10457],{"class":556,"line":654},[554,10441,10442],{"class":636},"watch",[554,10444,10445],{"class":600},"(state",[554,10447,1616],{"class":559},[554,10449,2298],{"class":559},[554,10451,2686],{"class":2270},[554,10453,10454],{"class":559},")",[554,10456,7582],{"class":567},[554,10458,2290],{"class":559},[554,10460,10461,10464,10466,10468,10470,10472],{"class":556,"line":664},[554,10462,10463],{"class":600},"  texture",[554,10465,803],{"class":559},[554,10467,10359],{"class":600},[554,10469,2343],{"class":559},[554,10471,10409],{"class":600},[554,10473,10475],{"class":10474},"sHwdD"," // assign a custom color space\n",[554,10477,10478,10480],{"class":556,"line":669},[554,10479,3125],{"class":559},[554,10481,651],{"class":600},[554,10483,10484,10486,10488],{"class":556,"line":679},[554,10485,657],{"class":559},[554,10487,564],{"class":563},[554,10489,586],{"class":559},[554,10491,10492],{"class":556,"line":690},[554,10493,622],{"emptyLinePlaceholder":488},[554,10495,10496,10498,10500],{"class":556,"line":545},[554,10497,560],{"class":559},[554,10499,674],{"class":563},[554,10501,586],{"class":559},[554,10503,10504,10506,10508,10510,10512,10514,10516,10518,10520],{"class":556,"line":546},[554,10505,682],{"class":559},[554,10507,417],{"class":563},[554,10509,1667],{"class":559},[554,10511,2686],{"class":567},[554,10513,574],{"class":559},[554,10515,577],{"class":559},[554,10517,2686],{"class":600},[554,10519,577],{"class":559},[554,10521,1699],{"class":559},[554,10523,10524,10526,10528],{"class":556,"line":547},[554,10525,657],{"class":559},[554,10527,674],{"class":563},[554,10529,586],{"class":559},[1528,10531,10532],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":480,"searchDepth":481,"depth":482,"links":10534},[10535,10536,10537],{"id":538,"depth":482,"text":15},{"id":914,"depth":482,"text":915},{"id":9475,"depth":482,"text":9476},"Display image textures with shader-based effects.",{},{"title":417,"description":10538},"jEAPHxilh9_Gg2oZg9-kp8JsJ1tSjkYRBYlGbuY9YbM",{"id":10543,"title":421,"body":10544,"description":11394,"extension":485,"links":486,"meta":11395,"navigation":488,"path":422,"seo":11396,"stem":423,"__hash__":11397},"docs/2.api/9.objects/marching-cubes.md",{"type":469,"value":10545,"toc":11388},[10546,10551,10562,10565,10590,10592,11200,11202,11272,11276,11322,11326,11385],[502,10547,10548],{},[10549,10550],"objects-marching-cubes",{},[472,10552,10553,10556,10557,803],{},[510,10554,10555],{},"\u003CMarchingCubes />"," is a wrapper around ",[515,10558,10561],{"href":10559,"rel":10560},"https://threejs.org/examples/#webgl_marchingcubes",[519],"THREE's Marching Cubes",[472,10563,10564],{},"It includes 3 components:",[526,10566,10567,10580,10585],{},[529,10568,10569,10571,10572,10575,10576,10579],{},[510,10570,10555],{}," – container element for ",[510,10573,10574],{},"\u003CMarchingCube />","s and ",[510,10577,10578],{},"\u003CMarchingPlane />","s",[529,10581,10582,10584],{},[510,10583,10574],{}," - an individual metaball",[529,10586,10587,10589],{},[510,10588,10578],{}," – optional bounding plane that interacts with the metaballs",[536,10591,15],{"id":538},[540,10593,10596],{"className":542,"code":10594,"highlights":10595,"language":550,"meta":480,"style":480},"\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",[482,765,775,785,1878,1913,1922,2481,2486,2070],[510,10597,10598,10618,10652,10670,10694,10698,10732,10795,10803,10807,10815,10848,10856,10864,10868,10904,10925,10933,10957,10972,10987,10992,11052,11061,11065,11074,11130,11184,11192],{"__ignoreMap":480},[554,10599,10600,10602,10604,10606,10608,10610,10612,10614,10616],{"class":556,"line":481},[554,10601,560],{"class":559},[554,10603,564],{"class":563},[554,10605,568],{"class":567},[554,10607,571],{"class":567},[554,10609,574],{"class":559},[554,10611,577],{"class":559},[554,10613,581],{"class":580},[554,10615,577],{"class":559},[554,10617,586],{"class":559},[554,10619,10621,10623,10625,10628,10630,10633,10635,10638,10640,10642,10644,10646,10648,10650],{"class":10620,"line":482},[556,590],[554,10622,594],{"class":593},[554,10624,597],{"class":559},[554,10626,10627],{"class":600}," MarchingCube",[554,10629,1616],{"class":559},[554,10631,10632],{"class":600}," MarchingCubes",[554,10634,1616],{"class":559},[554,10636,10637],{"class":600}," MarchingPlane",[554,10639,1616],{"class":559},[554,10641,1619],{"class":600},[554,10643,604],{"class":559},[554,10645,607],{"class":593},[554,10647,610],{"class":559},[554,10649,613],{"class":580},[554,10651,616],{"class":559},[554,10653,10654,10656,10658,10660,10662,10664,10666,10668],{"class":556,"line":619},[554,10655,594],{"class":593},[554,10657,597],{"class":559},[554,10659,2151],{"class":600},[554,10661,604],{"class":559},[554,10663,607],{"class":593},[554,10665,610],{"class":559},[554,10667,2140],{"class":580},[554,10669,616],{"class":559},[554,10671,10672,10674,10676,10679,10681,10684,10686,10688,10690,10692],{"class":556,"line":625},[554,10673,594],{"class":593},[554,10675,597],{"class":559},[554,10677,10678],{"class":600}," NoToneMapping",[554,10680,1616],{"class":559},[554,10682,10683],{"class":600}," Vector3",[554,10685,604],{"class":559},[554,10687,607],{"class":593},[554,10689,610],{"class":559},[554,10691,5120],{"class":580},[554,10693,616],{"class":559},[554,10695,10696],{"class":556,"line":654},[554,10697,622],{"emptyLinePlaceholder":488},[554,10699,10700,10702,10705,10707,10709,10711,10714,10716,10718,10720,10722,10725,10727,10729],{"class":556,"line":664},[554,10701,628],{"class":567},[554,10703,10704],{"class":600}," rand ",[554,10706,574],{"class":559},[554,10708,7743],{"class":559},[554,10710,7582],{"class":567},[554,10712,10713],{"class":600}," (Math",[554,10715,803],{"class":559},[554,10717,7684],{"class":636},[554,10719,7687],{"class":600},[554,10721,6765],{"class":559},[554,10723,10724],{"class":1680}," 0.5",[554,10726,2312],{"class":600},[554,10728,7690],{"class":559},[554,10730,10731],{"class":1680}," 1.25\n",[554,10733,10734,10736,10739,10741,10744,10746,10749,10751,10753,10756,10758,10761,10764,10766,10768,10771,10773,10775,10778,10781,10783,10786,10788,10790,10792],{"class":556,"line":669},[554,10735,628],{"class":567},[554,10737,10738],{"class":600}," positions ",[554,10740,574],{"class":559},[554,10742,10743],{"class":600}," Array",[554,10745,803],{"class":559},[554,10747,10748],{"class":636},"from",[554,10750,640],{"class":600},[554,10752,2315],{"class":559},[554,10754,10755],{"class":563}," length",[554,10757,2281],{"class":559},[554,10759,10760],{"class":1680}," 40",[554,10762,10763],{"class":559}," },",[554,10765,7743],{"class":559},[554,10767,7582],{"class":567},[554,10769,10770],{"class":559}," new",[554,10772,10683],{"class":636},[554,10774,640],{"class":600},[554,10776,10777],{"class":636},"rand",[554,10779,10780],{"class":600},"()",[554,10782,1616],{"class":559},[554,10784,10785],{"class":636}," rand",[554,10787,10780],{"class":600},[554,10789,1616],{"class":559},[554,10791,10785],{"class":636},[554,10793,10794],{"class":600},"()))\n",[554,10796,10797,10799,10801],{"class":556,"line":679},[554,10798,657],{"class":559},[554,10800,564],{"class":563},[554,10802,586],{"class":559},[554,10804,10805],{"class":556,"line":690},[554,10806,622],{"emptyLinePlaceholder":488},[554,10808,10809,10811,10813],{"class":556,"line":545},[554,10810,560],{"class":559},[554,10812,674],{"class":563},[554,10814,586],{"class":559},[554,10816,10817,10819,10821,10823,10825,10827,10830,10832,10834,10837,10839,10841,10844,10846],{"class":556,"line":546},[554,10818,682],{"class":559},[554,10820,685],{"class":563},[554,10822,3913],{"class":567},[554,10824,574],{"class":559},[554,10826,577],{"class":559},[554,10828,10829],{"class":580},"#222",[554,10831,577],{"class":559},[554,10833,1667],{"class":559},[554,10835,10836],{"class":567},"tone-mapping",[554,10838,574],{"class":559},[554,10840,577],{"class":559},[554,10842,10843],{"class":600},"NoToneMapping",[554,10845,577],{"class":559},[554,10847,586],{"class":559},[554,10849,10850,10852,10854],{"class":556,"line":547},[554,10851,693],{"class":559},[554,10853,1664],{"class":563},[554,10855,1699],{"class":559},[554,10857,10858,10860,10862],{"class":556,"line":548},[554,10859,693],{"class":559},[554,10861,1706],{"class":563},[554,10863,1699],{"class":559},[554,10865,10866],{"class":556,"line":549},[554,10867,622],{"emptyLinePlaceholder":488},[554,10869,10871,10873,10875,10877,10879,10881,10883,10886,10888,10890,10893,10895,10897,10900,10902],{"class":10870,"line":765},[556,590],[554,10872,693],{"class":559},[554,10874,421],{"class":563},[554,10876,1667],{"class":559},[554,10878,1724],{"class":567},[554,10880,574],{"class":559},[554,10882,577],{"class":559},[554,10884,10885],{"class":1680},"40",[554,10887,577],{"class":559},[554,10889,1667],{"class":559},[554,10891,10892],{"class":567},"max-poly-count",[554,10894,574],{"class":559},[554,10896,577],{"class":559},[554,10898,10899],{"class":1680},"40000",[554,10901,577],{"class":559},[554,10903,586],{"class":559},[554,10905,10907,10909,10912,10915,10917,10919,10921,10923],{"class":10906,"line":775},[556,590],[554,10908,704],{"class":559},[554,10910,10911],{"class":563},"MarchingPlane",[554,10913,10914],{"class":567}," plane-type",[554,10916,574],{"class":559},[554,10918,577],{"class":559},[554,10920,2368],{"class":580},[554,10922,577],{"class":559},[554,10924,1699],{"class":559},[554,10926,10928,10930],{"class":10927,"line":785},[556,590],[554,10929,704],{"class":559},[554,10931,10932],{"class":563},"MarchingCube\n",[554,10934,10936,10938,10940,10942,10944,10946,10949,10952,10955],{"class":10935,"line":1878},[556,590],[554,10937,5647],{"class":593},[554,10939,574],{"class":559},[554,10941,577],{"class":559},[554,10943,1670],{"class":600},[554,10945,1683],{"class":559},[554,10947,10948],{"class":600},"i",[554,10950,10951],{"class":559}," of ",[554,10953,10954],{"class":600},"positions",[554,10956,723],{"class":559},[554,10958,10960,10962,10964,10966,10968,10970],{"class":10959,"line":1913},[556,590],[554,10961,744],{"class":559},[554,10963,5677],{"class":567},[554,10965,574],{"class":559},[554,10967,577],{"class":559},[554,10969,10948],{"class":600},[554,10971,723],{"class":559},[554,10973,10975,10977,10979,10981,10983,10985],{"class":10974,"line":1922},[556,590],[554,10976,744],{"class":559},[554,10978,1670],{"class":567},[554,10980,574],{"class":559},[554,10982,577],{"class":559},[554,10984,1670],{"class":600},[554,10986,723],{"class":559},[554,10988,10990],{"class":10989,"line":2481},[556,590],[554,10991,762],{"class":559},[554,10993,10995,10997,11000,11003,11005,11007,11010,11012,11014,11017,11019,11021,11023,11025,11028,11030,11032,11035,11037,11039,11042,11044,11046,11048,11050],{"class":10994,"line":2486},[556,590],[554,10996,704],{"class":559},[554,10998,10999],{"class":563},"TresMeshPhongMaterial",[554,11001,11002],{"class":567}," specular",[554,11004,574],{"class":559},[554,11006,577],{"class":559},[554,11008,11009],{"class":580},"#111111",[554,11011,577],{"class":559},[554,11013,1667],{"class":559},[554,11015,11016],{"class":567},"shininess",[554,11018,574],{"class":559},[554,11020,577],{"class":559},[554,11022,1067],{"class":1680},[554,11024,577],{"class":559},[554,11026,11027],{"class":567}," color",[554,11029,574],{"class":559},[554,11031,577],{"class":559},[554,11033,11034],{"class":580},"#049ef4",[554,11036,577],{"class":559},[554,11038,1667],{"class":559},[554,11040,11041],{"class":567},"reflectivity",[554,11043,574],{"class":559},[554,11045,577],{"class":559},[554,11047,1780],{"class":1680},[554,11049,577],{"class":559},[554,11051,1699],{"class":559},[554,11053,11055,11057,11059],{"class":11054,"line":2070},[556,590],[554,11056,768],{"class":559},[554,11058,421],{"class":563},[554,11060,586],{"class":559},[554,11062,11063],{"class":556,"line":2071},[554,11064,622],{"emptyLinePlaceholder":488},[554,11066,11067,11069,11072],{"class":556,"line":2072},[554,11068,693],{"class":559},[554,11070,11071],{"class":563},"TresAxesHelper",[554,11073,1699],{"class":559},[554,11075,11076,11078,11080,11082,11084,11086,11089,11091,11093,11095,11097,11099,11101,11103,11105,11107,11109,11111,11113,11115,11117,11120,11122,11124,11126,11128],{"class":556,"line":2073},[554,11077,693],{"class":559},[554,11079,1883],{"class":563},[554,11081,11027],{"class":567},[554,11083,574],{"class":559},[554,11085,577],{"class":559},[554,11087,11088],{"class":580},"#ffffff",[554,11090,577],{"class":559},[554,11092,1667],{"class":559},[554,11094,1864],{"class":567},[554,11096,574],{"class":559},[554,11098,577],{"class":559},[554,11100,2747],{"class":1680},[554,11102,577],{"class":559},[554,11104,1667],{"class":559},[554,11106,1670],{"class":567},[554,11108,574],{"class":559},[554,11110,577],{"class":559},[554,11112,1677],{"class":559},[554,11114,1107],{"class":1680},[554,11116,1683],{"class":559},[554,11118,11119],{"class":1680},"200",[554,11121,1683],{"class":559},[554,11123,1107],{"class":1680},[554,11125,1694],{"class":559},[554,11127,577],{"class":559},[554,11129,1699],{"class":559},[554,11131,11132,11134,11136,11138,11140,11142,11144,11146,11148,11150,11152,11154,11156,11158,11160,11162,11164,11166,11168,11170,11172,11174,11176,11178,11180,11182],{"class":556,"line":2585},[554,11133,693],{"class":559},[554,11135,1883],{"class":563},[554,11137,11027],{"class":567},[554,11139,574],{"class":559},[554,11141,577],{"class":559},[554,11143,11088],{"class":580},[554,11145,577],{"class":559},[554,11147,1667],{"class":559},[554,11149,1864],{"class":567},[554,11151,574],{"class":559},[554,11153,577],{"class":559},[554,11155,2747],{"class":1680},[554,11157,577],{"class":559},[554,11159,1667],{"class":559},[554,11161,1670],{"class":567},[554,11163,574],{"class":559},[554,11165,577],{"class":559},[554,11167,1677],{"class":559},[554,11169,2799],{"class":1680},[554,11171,1683],{"class":559},[554,11173,11119],{"class":1680},[554,11175,1683],{"class":559},[554,11177,2799],{"class":1680},[554,11179,1694],{"class":559},[554,11181,577],{"class":559},[554,11183,1699],{"class":559},[554,11185,11186,11188,11190],{"class":556,"line":2591},[554,11187,778],{"class":559},[554,11189,685],{"class":563},[554,11191,586],{"class":559},[554,11193,11194,11196,11198],{"class":556,"line":2600},[554,11195,657],{"class":559},[554,11197,674],{"class":563},[554,11199,586],{"class":559},[536,11201,915],{"id":914},[917,11203,11204,11214],{},[920,11205,11206],{},[923,11207,11208,11210,11212],{},[926,11209,1939],{"align":928},[926,11211,932],{"align":928},[926,11213,935],{},[937,11215,11216,11229,11244,11258],{},[923,11217,11218,11222,11225],{},[942,11219,11220],{"align":928},[510,11221,1724],{},[942,11223,11224],{"align":928},"Resolution of the marching cube field. Higher resolution produces smoother meshes at the cost of performance and memory.",[942,11226,11227],{},[510,11228,5986],{},[923,11230,11231,11236,11239],{},[942,11232,11233],{"align":928},[510,11234,11235],{},"maxPolyCount",[942,11237,11238],{"align":928},"Maximum number of polygons to generate.",[942,11240,11241],{},[510,11242,11243],{},"10000",[923,11245,11246,11251,11254],{},[942,11247,11248],{"align":928},[510,11249,11250],{},"enableUvs",[942,11252,11253],{"align":928},"Whether UVs are enabled.",[942,11255,11256],{},[510,11257,1122],{},[923,11259,11260,11265,11268],{},[942,11261,11262],{"align":928},[510,11263,11264],{},"enableColors",[942,11266,11267],{"align":928},"Whether vertex colors are enabled.",[942,11269,11270],{},[510,11271,1122],{},[536,11273,11275],{"id":11274},"marchingcube-props","MarchingCube Props",[917,11277,11278,11288],{},[920,11279,11280],{},[923,11281,11282,11284,11286],{},[926,11283,1939],{"align":928},[926,11285,932],{"align":928},[926,11287,935],{},[937,11289,11290,11304],{},[923,11291,11292,11297,11300],{},[942,11293,11294],{"align":928},[510,11295,11296],{},"strength",[942,11298,11299],{"align":928},"How strongly this cube affects the marching cube field.",[942,11301,11302],{},[510,11303,1871],{},[923,11305,11306,11311,11317],{},[942,11307,11308],{"align":928},[510,11309,11310],{},"subtract",[942,11312,11313,11314,11316],{"align":928},"How quickly strength moves to ",[510,11315,1107],{}," over distance.",[942,11318,11319],{},[510,11320,11321],{},"12",[536,11323,11325],{"id":11324},"marchingplane-props","MarchingPlane Props",[917,11327,11328,11338],{},[920,11329,11330],{},[923,11331,11332,11334,11336],{},[926,11333,1939],{"align":928},[926,11335,932],{"align":928},[926,11337,935],{},[937,11339,11340,11358,11371],{},[923,11341,11342,11347,11353],{},[942,11343,11344],{"align":928},[510,11345,11346],{},"planeType",[942,11348,11349,11350],{"align":928},"Which axis the plane appears on. ",[510,11351,11352],{},"'x' | 'y' | 'z'",[942,11354,11355],{},[510,11356,11357],{},"'x'",[923,11359,11360,11364,11367],{},[942,11361,11362],{"align":928},[510,11363,11296],{},[942,11365,11366],{"align":928},"How strongly this plane affects the marching cube field.",[942,11368,11369],{},[510,11370,1871],{},[923,11372,11373,11377,11381],{},[942,11374,11375],{"align":928},[510,11376,11310],{},[942,11378,11313,11379,11316],{"align":928},[510,11380,1107],{},[942,11382,11383],{},[510,11384,11321],{},[1528,11386,11387],{},"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":480,"searchDepth":481,"depth":482,"links":11389},[11390,11391,11392,11393],{"id":538,"depth":482,"text":15},{"id":914,"depth":482,"text":915},{"id":11274,"depth":482,"text":11275},{"id":11324,"depth":482,"text":11325},"Create organic blob-like shapes using metaballs.",{},{"title":421,"description":11394},"dt9UUvCiy--PP6CSMtwwdcksel8iajosft8nxTQtolk",{"id":11399,"title":425,"body":11400,"description":12413,"extension":485,"links":486,"meta":12414,"navigation":488,"path":426,"seo":12415,"stem":427,"__hash__":12416},"docs/2.api/9.objects/reflector.md",{"type":469,"value":11401,"toc":12406},[11402,11407,11422,11424,11691,11693,11781,11789,11793,11796,12074,12077,12080,12084,12403],[502,11403,11404],{},[11405,11406],"objects-reflector",{},[472,11408,1345,11409,11412,11413,11418,11419,11421],{},[510,11410,11411],{},"cientos"," package provides an abstraction of the ",[515,11414,11417],{"href":11415,"rel":11416},"https://github.com/mrdoob/three.js/blob/dev/examples/jsm/objects/Reflector.js",[519],"Reflector class",", which creates a Mesh showing a real-time reflection of your scene.  This Mesh extends from ",[510,11420,4712],{}," so all the default props can be passed as well:",[536,11423,15],{"id":538},[540,11425,11427],{"className":542,"code":11426,"language":550,"meta":480,"style":480},"\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",[510,11428,11429,11449,11468,11476,11480,11488,11502,11534,11542,11546,11554,11561,11596,11612,11626,11630,11659,11667,11675,11683],{"__ignoreMap":480},[554,11430,11431,11433,11435,11437,11439,11441,11443,11445,11447],{"class":556,"line":481},[554,11432,560],{"class":559},[554,11434,564],{"class":563},[554,11436,568],{"class":567},[554,11438,571],{"class":567},[554,11440,574],{"class":559},[554,11442,577],{"class":559},[554,11444,581],{"class":580},[554,11446,577],{"class":559},[554,11448,586],{"class":559},[554,11450,11451,11453,11455,11458,11460,11462,11464,11466],{"class":556,"line":482},[554,11452,594],{"class":593},[554,11454,597],{"class":559},[554,11456,11457],{"class":600}," Reflector",[554,11459,604],{"class":559},[554,11461,607],{"class":593},[554,11463,610],{"class":559},[554,11465,613],{"class":580},[554,11467,616],{"class":559},[554,11469,11470,11472,11474],{"class":556,"line":619},[554,11471,657],{"class":559},[554,11473,564],{"class":563},[554,11475,586],{"class":559},[554,11477,11478],{"class":556,"line":625},[554,11479,622],{"emptyLinePlaceholder":488},[554,11481,11482,11484,11486],{"class":556,"line":654},[554,11483,560],{"class":559},[554,11485,674],{"class":563},[554,11487,586],{"class":559},[554,11489,11490,11492,11494,11497,11500],{"class":556,"line":664},[554,11491,682],{"class":559},[554,11493,685],{"class":563},[554,11495,11496],{"class":567}," shadows",[554,11498,11499],{"class":567}," alpha",[554,11501,586],{"class":559},[554,11503,11504,11506,11508,11510,11512,11514,11516,11518,11520,11522,11524,11526,11528,11530,11532],{"class":556,"line":669},[554,11505,693],{"class":559},[554,11507,1664],{"class":563},[554,11509,1667],{"class":559},[554,11511,1670],{"class":567},[554,11513,574],{"class":559},[554,11515,577],{"class":559},[554,11517,1677],{"class":559},[554,11519,1107],{"class":1680},[554,11521,1683],{"class":559},[554,11523,1107],{"class":1680},[554,11525,1683],{"class":559},[554,11527,2747],{"class":1680},[554,11529,1694],{"class":559},[554,11531,577],{"class":559},[554,11533,1699],{"class":559},[554,11535,11536,11538,11540],{"class":556,"line":679},[554,11537,693],{"class":559},[554,11539,1706],{"class":563},[554,11541,1699],{"class":559},[554,11543,11544],{"class":556,"line":690},[554,11545,622],{"emptyLinePlaceholder":488},[554,11547,11548,11550,11552],{"class":556,"line":545},[554,11549,693],{"class":559},[554,11551,696],{"class":563},[554,11553,586],{"class":559},[554,11555,11556,11558],{"class":556,"line":546},[554,11557,704],{"class":559},[554,11559,11560],{"class":563},"Reflector\n",[554,11562,11563,11565,11567,11569,11571,11573,11575,11577,11580,11582,11584,11586,11588,11590,11592,11594],{"class":556,"line":547},[554,11564,744],{"class":559},[554,11566,2335],{"class":567},[554,11568,574],{"class":559},[554,11570,577],{"class":559},[554,11572,5757],{"class":559},[554,11574,7679],{"class":600},[554,11576,803],{"class":559},[554,11578,11579],{"class":600},"PI",[554,11581,5795],{"class":559},[554,11583,1871],{"class":1680},[554,11585,1683],{"class":559},[554,11587,1107],{"class":1680},[554,11589,1683],{"class":559},[554,11591,1107],{"class":1680},[554,11593,1694],{"class":559},[554,11595,723],{"class":559},[554,11597,11598,11600,11602,11604,11606,11608,11610],{"class":556,"line":548},[554,11599,744],{"class":559},[554,11601,6758],{"class":567},[554,11603,574],{"class":559},[554,11605,577],{"class":559},[554,11607,6765],{"class":559},[554,11609,1686],{"class":1680},[554,11611,723],{"class":559},[554,11613,11614,11617,11619,11621,11624],{"class":556,"line":549},[554,11615,11616],{"class":567},"        color",[554,11618,574],{"class":559},[554,11620,577],{"class":559},[554,11622,11623],{"class":580},"#fff",[554,11625,723],{"class":559},[554,11627,11628],{"class":556,"line":765},[554,11629,4110],{"class":559},[554,11631,11632,11634,11637,11639,11641,11643,11645,11647,11649,11651,11653,11655,11657],{"class":556,"line":775},[554,11633,1763],{"class":559},[554,11635,11636],{"class":563},"TresCircleGeometry",[554,11638,1667],{"class":559},[554,11640,1771],{"class":567},[554,11642,574],{"class":559},[554,11644,577],{"class":559},[554,11646,1677],{"class":559},[554,11648,2504],{"class":1680},[554,11650,1683],{"class":559},[554,11652,2504],{"class":1680},[554,11654,1694],{"class":559},[554,11656,577],{"class":559},[554,11658,1699],{"class":559},[554,11660,11661,11663,11665],{"class":556,"line":785},[554,11662,1835],{"class":559},[554,11664,425],{"class":563},[554,11666,586],{"class":559},[554,11668,11669,11671,11673],{"class":556,"line":1878},[554,11670,768],{"class":559},[554,11672,696],{"class":563},[554,11674,586],{"class":559},[554,11676,11677,11679,11681],{"class":556,"line":1913},[554,11678,778],{"class":559},[554,11680,685],{"class":563},[554,11682,586],{"class":559},[554,11684,11685,11687,11689],{"class":556,"line":1922},[554,11686,657],{"class":559},[554,11688,674],{"class":563},[554,11690,586],{"class":559},[536,11692,915],{"id":914},[917,11694,11695,11705],{},[920,11696,11697],{},[923,11698,11699,11701,11703],{},[926,11700,1939],{"align":928},[926,11702,932],{"align":928},[926,11704,935],{},[937,11706,11707,11719,11732,11744,11756,11768],{},[923,11708,11709,11713,11716],{},[942,11710,11711],{"align":928},[2864,11712,2652],{},[942,11714,11715],{"align":928},"The base color that's combine with the mirror effect",[942,11717,11718],{},"'#333'",[923,11720,11721,11726,11729],{},[942,11722,11723],{"align":928},[2864,11724,11725],{},"textureWidth",[942,11727,11728],{"align":928},"the width of the texture to render on the mirror",[942,11730,11731],{},"512",[923,11733,11734,11739,11742],{},[942,11735,11736],{"align":928},[2864,11737,11738],{},"textureHeight",[942,11740,11741],{"align":928},"the height of the texture to render on the mirror",[942,11743,11731],{},[923,11745,11746,11751,11754],{},[942,11747,11748],{"align":928},[2864,11749,11750],{},"clipBias",[942,11752,11753],{"align":928},"to use the clipBias property",[942,11755,1107],{},[923,11757,11758,11763,11766],{},[942,11759,11760],{"align":928},[2864,11761,11762],{},"multisample",[942,11764,11765],{"align":928},"how many samplers will be render",[942,11767,1904],{},[923,11769,11770,11775,11778],{},[942,11771,11772],{"align":928},[2864,11773,11774],{},"shader",[942,11776,11777],{"align":928},"The texture of the smoke.",[942,11779,11780],{},"Reflector.ReflectorShader",[793,11782,11783],{},[472,11784,11785,11786,11788],{},"All the props except the ",[510,11787,2652],{},", are not reactive",[536,11790,11792],{"id":11791},"custom-mirror-effect","Custom mirror effect",[472,11794,11795],{},"For more complex effect you can provide your own shaders, you could do this creating an object and pass the uniforms, vertexShaders or fragmentShaders:",[540,11797,11799],{"className":542,"code":11798,"language":550,"meta":480,"style":480},"\u003Cscript setup lang=\"ts\">\nimport vertexShader from 'MyCustomVertexShader.glsl'\n\nconst customShader = {\n  vertexShader\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas shadows alpha>\n    \u003CTresPerspectiveCamera :position=\"[0, 0, 3]\" />\n    ...\n    \u003CReflector\n      :rotation=\"[-Math.PI * 0.5, 0, 0]\"\n      :position-y=\"-2\"\n      color=\"#fff\"\n      :shader=\"customShader\"\n    >\n      \u003CTresCircleGeometry :args=\"[10, 10]\" />\n    \u003C/Reflector>\n    ...\n  \u003C/TresCanvas>\n\u003C/template>\n",[510,11800,11801,11821,11837,11841,11852,11857,11861,11869,11873,11881,11893,11925,11930,11936,11970,11986,11999,12014,12018,12046,12054,12058,12066],{"__ignoreMap":480},[554,11802,11803,11805,11807,11809,11811,11813,11815,11817,11819],{"class":556,"line":481},[554,11804,560],{"class":559},[554,11806,564],{"class":563},[554,11808,568],{"class":567},[554,11810,571],{"class":567},[554,11812,574],{"class":559},[554,11814,577],{"class":559},[554,11816,581],{"class":580},[554,11818,577],{"class":559},[554,11820,586],{"class":559},[554,11822,11823,11825,11828,11830,11832,11835],{"class":556,"line":482},[554,11824,594],{"class":593},[554,11826,11827],{"class":600}," vertexShader ",[554,11829,10748],{"class":593},[554,11831,610],{"class":559},[554,11833,11834],{"class":580},"MyCustomVertexShader.glsl",[554,11836,616],{"class":559},[554,11838,11839],{"class":556,"line":619},[554,11840,622],{"emptyLinePlaceholder":488},[554,11842,11843,11845,11848,11850],{"class":556,"line":625},[554,11844,628],{"class":567},[554,11846,11847],{"class":600}," customShader ",[554,11849,574],{"class":559},[554,11851,2290],{"class":559},[554,11853,11854],{"class":556,"line":654},[554,11855,11856],{"class":600},"  vertexShader\n",[554,11858,11859],{"class":556,"line":664},[554,11860,2382],{"class":559},[554,11862,11863,11865,11867],{"class":556,"line":669},[554,11864,657],{"class":559},[554,11866,564],{"class":563},[554,11868,586],{"class":559},[554,11870,11871],{"class":556,"line":679},[554,11872,622],{"emptyLinePlaceholder":488},[554,11874,11875,11877,11879],{"class":556,"line":690},[554,11876,560],{"class":559},[554,11878,674],{"class":563},[554,11880,586],{"class":559},[554,11882,11883,11885,11887,11889,11891],{"class":556,"line":545},[554,11884,682],{"class":559},[554,11886,685],{"class":563},[554,11888,11496],{"class":567},[554,11890,11499],{"class":567},[554,11892,586],{"class":559},[554,11894,11895,11897,11899,11901,11903,11905,11907,11909,11911,11913,11915,11917,11919,11921,11923],{"class":556,"line":546},[554,11896,693],{"class":559},[554,11898,1664],{"class":563},[554,11900,1667],{"class":559},[554,11902,1670],{"class":567},[554,11904,574],{"class":559},[554,11906,577],{"class":559},[554,11908,1677],{"class":559},[554,11910,1107],{"class":1680},[554,11912,1683],{"class":559},[554,11914,1107],{"class":1680},[554,11916,1683],{"class":559},[554,11918,2747],{"class":1680},[554,11920,1694],{"class":559},[554,11922,577],{"class":559},[554,11924,1699],{"class":559},[554,11926,11927],{"class":556,"line":547},[554,11928,11929],{"class":600},"    ...\n",[554,11931,11932,11934],{"class":556,"line":548},[554,11933,693],{"class":559},[554,11935,11560],{"class":563},[554,11937,11938,11940,11942,11944,11946,11948,11950,11952,11954,11956,11958,11960,11962,11964,11966,11968],{"class":556,"line":549},[554,11939,2543],{"class":559},[554,11941,2335],{"class":567},[554,11943,574],{"class":559},[554,11945,577],{"class":559},[554,11947,5757],{"class":559},[554,11949,7679],{"class":600},[554,11951,803],{"class":559},[554,11953,11579],{"class":600},[554,11955,5795],{"class":559},[554,11957,1871],{"class":1680},[554,11959,1683],{"class":559},[554,11961,1107],{"class":1680},[554,11963,1683],{"class":559},[554,11965,1107],{"class":1680},[554,11967,1694],{"class":559},[554,11969,723],{"class":559},[554,11971,11972,11974,11976,11978,11980,11982,11984],{"class":556,"line":765},[554,11973,2543],{"class":559},[554,11975,6758],{"class":567},[554,11977,574],{"class":559},[554,11979,577],{"class":559},[554,11981,6765],{"class":559},[554,11983,1686],{"class":1680},[554,11985,723],{"class":559},[554,11987,11988,11991,11993,11995,11997],{"class":556,"line":775},[554,11989,11990],{"class":567},"      color",[554,11992,574],{"class":559},[554,11994,577],{"class":559},[554,11996,11623],{"class":580},[554,11998,723],{"class":559},[554,12000,12001,12003,12005,12007,12009,12012],{"class":556,"line":785},[554,12002,2543],{"class":559},[554,12004,11774],{"class":567},[554,12006,574],{"class":559},[554,12008,577],{"class":559},[554,12010,12011],{"class":600},"customShader",[554,12013,723],{"class":559},[554,12015,12016],{"class":556,"line":1878},[554,12017,2765],{"class":559},[554,12019,12020,12022,12024,12026,12028,12030,12032,12034,12036,12038,12040,12042,12044],{"class":556,"line":1913},[554,12021,704],{"class":559},[554,12023,11636],{"class":563},[554,12025,1667],{"class":559},[554,12027,1771],{"class":567},[554,12029,574],{"class":559},[554,12031,577],{"class":559},[554,12033,1677],{"class":559},[554,12035,2504],{"class":1680},[554,12037,1683],{"class":559},[554,12039,2504],{"class":1680},[554,12041,1694],{"class":559},[554,12043,577],{"class":559},[554,12045,1699],{"class":559},[554,12047,12048,12050,12052],{"class":556,"line":1922},[554,12049,768],{"class":559},[554,12051,425],{"class":563},[554,12053,586],{"class":559},[554,12055,12056],{"class":556,"line":2481},[554,12057,11929],{"class":600},[554,12059,12060,12062,12064],{"class":556,"line":2486},[554,12061,778],{"class":559},[554,12063,685],{"class":563},[554,12065,586],{"class":559},[554,12067,12068,12070,12072],{"class":556,"line":2070},[554,12069,657],{"class":559},[554,12071,674],{"class":563},[554,12073,586],{"class":559},[472,12075,12076],{},"The Reflector shader use the following configuration by default:",[472,12078,12079],{},"You can extend, modify or just play with them",[881,12081,12083],{"id":12082},"default-shader","Default shader",[540,12085,12089],{"className":12086,"code":12087,"language":12088,"meta":480,"style":480},"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",[510,12090,12091,12102,12118,12127,12136,12146,12151,12160,12168,12172,12181,12189,12194,12198,12211,12216,12221,12225,12230,12235,12239,12244,12249,12254,12258,12263,12267,12277,12288,12293,12298,12302,12306,12311,12315,12320,12325,12330,12334,12339,12344,12348,12352,12356,12361,12365,12370,12375,12379,12384,12389,12395,12399],{"__ignoreMap":480},[554,12092,12093,12095,12098,12100],{"class":556,"line":481},[554,12094,628],{"class":567},[554,12096,12097],{"class":600}," shader ",[554,12099,574],{"class":559},[554,12101,2290],{"class":559},[554,12103,12104,12107,12109,12111,12114,12116],{"class":556,"line":482},[554,12105,12106],{"class":563},"  name",[554,12108,2281],{"class":559},[554,12110,610],{"class":559},[554,12112,12113],{"class":580},"ReflectorShader",[554,12115,643],{"class":559},[554,12117,3065],{"class":559},[554,12119,12120,12123,12125],{"class":556,"line":619},[554,12121,12122],{"class":563},"  uniforms",[554,12124,2281],{"class":559},[554,12126,2290],{"class":559},[554,12128,12129,12132,12134],{"class":556,"line":625},[554,12130,12131],{"class":563},"    color",[554,12133,2281],{"class":559},[554,12135,2290],{"class":559},[554,12137,12138,12141,12143],{"class":556,"line":654},[554,12139,12140],{"class":563},"      value",[554,12142,2281],{"class":559},[554,12144,12145],{"class":559}," null\n",[554,12147,12148],{"class":556,"line":664},[554,12149,12150],{"class":559},"    },\n",[554,12152,12153,12156,12158],{"class":556,"line":669},[554,12154,12155],{"class":563},"    tDiffuse",[554,12157,2281],{"class":559},[554,12159,2290],{"class":559},[554,12161,12162,12164,12166],{"class":556,"line":679},[554,12163,12140],{"class":563},[554,12165,2281],{"class":559},[554,12167,12145],{"class":559},[554,12169,12170],{"class":556,"line":690},[554,12171,12150],{"class":559},[554,12173,12174,12177,12179],{"class":556,"line":545},[554,12175,12176],{"class":563},"    textureMatrix",[554,12178,2281],{"class":559},[554,12180,2290],{"class":559},[554,12182,12183,12185,12187],{"class":556,"line":546},[554,12184,12140],{"class":563},[554,12186,2281],{"class":559},[554,12188,12145],{"class":559},[554,12190,12191],{"class":556,"line":547},[554,12192,12193],{"class":559},"    }\n",[554,12195,12196],{"class":556,"line":548},[554,12197,3119],{"class":559},[554,12199,12200,12203,12205,12208],{"class":556,"line":549},[554,12201,12202],{"class":563},"  vertexShader",[554,12204,2281],{"class":559},[554,12206,12207],{"class":10474}," /* glsl */",[554,12209,12210],{"class":559},"`\n",[554,12212,12213],{"class":556,"line":765},[554,12214,12215],{"class":580},"  uniform mat4 textureMatrix;\n",[554,12217,12218],{"class":556,"line":775},[554,12219,12220],{"class":580},"  varying vec4 vUv;\n",[554,12222,12223],{"class":556,"line":785},[554,12224,622],{"emptyLinePlaceholder":488},[554,12226,12227],{"class":556,"line":1878},[554,12228,12229],{"class":580},"  #include \u003Ccommon>\n",[554,12231,12232],{"class":556,"line":1913},[554,12233,12234],{"class":580},"  #include \u003Clogdepthbuf_pars_vertex>\n",[554,12236,12237],{"class":556,"line":1922},[554,12238,622],{"emptyLinePlaceholder":488},[554,12240,12241],{"class":556,"line":2481},[554,12242,12243],{"class":580},"  void main() {\n",[554,12245,12246],{"class":556,"line":2486},[554,12247,12248],{"class":580},"    vUv = textureMatrix * vec4( position, 1.0 );\n",[554,12250,12251],{"class":556,"line":2070},[554,12252,12253],{"class":580},"    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n",[554,12255,12256],{"class":556,"line":2071},[554,12257,622],{"emptyLinePlaceholder":488},[554,12259,12260],{"class":556,"line":2072},[554,12261,12262],{"class":580},"    #include \u003Clogdepthbuf_vertex>\n",[554,12264,12265],{"class":556,"line":2073},[554,12266,622],{"emptyLinePlaceholder":488},[554,12268,12269,12272,12275],{"class":556,"line":2585},[554,12270,12271],{"class":580},"  }",[554,12273,12274],{"class":559},"`",[554,12276,3065],{"class":559},[554,12278,12279,12282,12284,12286],{"class":556,"line":2591},[554,12280,12281],{"class":563},"  fragmentShader",[554,12283,2281],{"class":559},[554,12285,12207],{"class":10474},[554,12287,12210],{"class":559},[554,12289,12290],{"class":556,"line":2600},[554,12291,12292],{"class":580},"  uniform vec3 color;\n",[554,12294,12295],{"class":556,"line":2634},[554,12296,12297],{"class":580},"  uniform sampler2D tDiffuse;\n",[554,12299,12300],{"class":556,"line":2639},[554,12301,12220],{"class":580},[554,12303,12304],{"class":556,"line":2647},[554,12305,622],{"emptyLinePlaceholder":488},[554,12307,12308],{"class":556,"line":2664},[554,12309,12310],{"class":580},"  #include \u003Clogdepthbuf_pars_fragment>\n",[554,12312,12313],{"class":556,"line":2694},[554,12314,622],{"emptyLinePlaceholder":488},[554,12316,12317],{"class":556,"line":2699},[554,12318,12319],{"class":580},"  float blendOverlay( float base, float blend ) {\n",[554,12321,12322],{"class":556,"line":2708},[554,12323,12324],{"class":580},"    return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n",[554,12326,12327],{"class":556,"line":2713},[554,12328,12329],{"class":580},"  }\n",[554,12331,12332],{"class":556,"line":2721},[554,12333,622],{"emptyLinePlaceholder":488},[554,12335,12336],{"class":556,"line":2734},[554,12337,12338],{"class":580},"  vec3 blendOverlay( vec3 base, vec3 blend ) {\n",[554,12340,12341],{"class":556,"line":2762},[554,12342,12343],{"class":580},"    return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n",[554,12345,12346],{"class":556,"line":2768},[554,12347,12329],{"class":580},[554,12349,12350],{"class":556,"line":2808},[554,12351,622],{"emptyLinePlaceholder":488},[554,12353,12354],{"class":556,"line":2818},[554,12355,12243],{"class":580},[554,12357,12358],{"class":556,"line":2827},[554,12359,12360],{"class":580},"    #include \u003Clogdepthbuf_fragment>\n",[554,12362,12363],{"class":556,"line":2836},[554,12364,622],{"emptyLinePlaceholder":488},[554,12366,12367],{"class":556,"line":5622},[554,12368,12369],{"class":580},"    vec4 base = texture2DProj( tDiffuse, vUv );\n",[554,12371,12372],{"class":556,"line":5631},[554,12373,12374],{"class":580},"    gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n",[554,12376,12377],{"class":556,"line":5636},[554,12378,622],{"emptyLinePlaceholder":488},[554,12380,12381],{"class":556,"line":5644},[554,12382,12383],{"class":580},"    #include \u003Ctonemapping_fragment>\n",[554,12385,12386],{"class":556,"line":5672},[554,12387,12388],{"class":580},"    #include \u003Ccolorspace_fragment>\n",[554,12390,12391,12393],{"class":556,"line":5696},[554,12392,12271],{"class":580},[554,12394,12210],{"class":559},[554,12396,12397],{"class":556,"line":5712},[554,12398,622],{"emptyLinePlaceholder":488},[554,12400,12401],{"class":556,"line":5729},[554,12402,2382],{"class":559},[1528,12404,12405],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .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":480,"searchDepth":481,"depth":482,"links":12407},[12408,12409,12410],{"id":538,"depth":482,"text":15},{"id":914,"depth":482,"text":915},{"id":11791,"depth":482,"text":11792,"children":12411},[12412],{"id":12082,"depth":619,"text":12083},"Create real-time reflections of your scene.",{},{"title":425,"description":12413},"24igh7rDYMu_PMUA2O2RSz3ThFBClmpHnB0dGe1M0hI",{"id":12418,"title":429,"body":12419,"description":12964,"extension":485,"links":486,"meta":12965,"navigation":488,"path":430,"seo":12966,"stem":431,"__hash__":12967},"docs/2.api/9.objects/text-3d.md",{"type":469,"value":12420,"toc":12960},[12421,12426,12438,12440,12459,12567,12583,12676,12679,12798,12800,12957],[502,12422,12423],{},[12424,12425],"objects-text",{},[472,12427,12428,12431,12432,12437],{},[510,12429,12430],{},"\u003CText3D />"," is a component that renders text in 3D. It is a wrapper around the ",[515,12433,12436],{"href":12434,"rel":12435},"https://threejs.org/docs/#api/en/geometries/TextGeometry",[519],"TextGeometry"," class.",[536,12439,15],{"id":538},[472,12441,12442,12443,12445,12446,12449,12450,12453,12454],{},"To use the ",[510,12444,12430],{}," component you need to pass the ",[510,12447,12448],{},"font"," prop with the URL of the font JSON file you want to use. TextGeometry uses ",[510,12451,12452],{},"typeface",".json generated fonts, you can generate yours ",[515,12455,12458],{"href":12456,"rel":12457},"http://gero3.github.io/facetype.js/",[519],"here",[540,12460,12462],{"className":542,"code":12461,"language":550,"meta":480,"style":480},"\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",[510,12463,12464,12472,12480,12488,12495,12509,12523,12527,12535,12543,12551,12559],{"__ignoreMap":480},[554,12465,12466,12468,12470],{"class":556,"line":481},[554,12467,560],{"class":559},[554,12469,674],{"class":563},[554,12471,586],{"class":559},[554,12473,12474,12476,12478],{"class":556,"line":482},[554,12475,682],{"class":559},[554,12477,685],{"class":563},[554,12479,586],{"class":559},[554,12481,12482,12484,12486],{"class":556,"line":619},[554,12483,693],{"class":559},[554,12485,696],{"class":563},[554,12487,586],{"class":559},[554,12489,12490,12492],{"class":556,"line":625},[554,12491,704],{"class":559},[554,12493,12494],{"class":563},"Text3D\n",[554,12496,12497,12500,12502,12504,12507],{"class":556,"line":654},[554,12498,12499],{"class":567},"        text",[554,12501,574],{"class":559},[554,12503,577],{"class":559},[554,12505,12506],{"class":580},"TresJS",[554,12508,723],{"class":559},[554,12510,12511,12514,12516,12518,12521],{"class":556,"line":664},[554,12512,12513],{"class":567},"        font",[554,12515,574],{"class":559},[554,12517,577],{"class":559},[554,12519,12520],{"class":580},"/fonts/FiraCodeRegular.json",[554,12522,723],{"class":559},[554,12524,12525],{"class":556,"line":669},[554,12526,4110],{"class":559},[554,12528,12529,12531,12533],{"class":556,"line":679},[554,12530,1763],{"class":559},[554,12532,2813],{"class":563},[554,12534,1699],{"class":559},[554,12536,12537,12539,12541],{"class":556,"line":690},[554,12538,1835],{"class":559},[554,12540,429],{"class":563},[554,12542,586],{"class":559},[554,12544,12545,12547,12549],{"class":556,"line":545},[554,12546,768],{"class":559},[554,12548,696],{"class":563},[554,12550,586],{"class":559},[554,12552,12553,12555,12557],{"class":556,"line":546},[554,12554,778],{"class":559},[554,12556,685],{"class":563},[554,12558,586],{"class":559},[554,12560,12561,12563,12565],{"class":556,"line":547},[554,12562,657],{"class":559},[554,12564,674],{"class":563},[554,12566,586],{"class":559},[472,12568,12569,12570,12573,12574,12576,12577,12579,12580,12582],{},"Notice that you need to pass the ",[510,12571,12572],{},"\u003CTresMeshNormalMaterial />"," component as a child of the ",[510,12575,12430],{}," component. This is because ",[510,12578,12430],{}," is a ",[510,12581,4712],{}," 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:",[540,12584,12586],{"className":542,"code":12585,"language":550,"meta":480,"style":480},"\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",[510,12587,12588,12596,12604,12612,12631,12636,12644,12652,12660,12668],{"__ignoreMap":480},[554,12589,12590,12592,12594],{"class":556,"line":481},[554,12591,560],{"class":559},[554,12593,674],{"class":563},[554,12595,586],{"class":559},[554,12597,12598,12600,12602],{"class":556,"line":482},[554,12599,682],{"class":559},[554,12601,685],{"class":563},[554,12603,586],{"class":559},[554,12605,12606,12608,12610],{"class":556,"line":619},[554,12607,693],{"class":559},[554,12609,696],{"class":563},[554,12611,586],{"class":559},[554,12613,12614,12616,12618,12621,12623,12625,12627,12629],{"class":556,"line":625},[554,12615,704],{"class":559},[554,12617,429],{"class":563},[554,12619,12620],{"class":567}," font",[554,12622,574],{"class":559},[554,12624,577],{"class":559},[554,12626,12520],{"class":580},[554,12628,577],{"class":559},[554,12630,586],{"class":559},[554,12632,12633],{"class":556,"line":654},[554,12634,12635],{"class":600},"        TresJS\n",[554,12637,12638,12640,12642],{"class":556,"line":664},[554,12639,1763],{"class":559},[554,12641,2813],{"class":563},[554,12643,1699],{"class":559},[554,12645,12646,12648,12650],{"class":556,"line":669},[554,12647,1835],{"class":559},[554,12649,429],{"class":563},[554,12651,586],{"class":559},[554,12653,12654,12656,12658],{"class":556,"line":679},[554,12655,768],{"class":559},[554,12657,696],{"class":563},[554,12659,586],{"class":559},[554,12661,12662,12664,12666],{"class":556,"line":690},[554,12663,778],{"class":559},[554,12665,685],{"class":563},[554,12667,586],{"class":559},[554,12669,12670,12672,12674],{"class":556,"line":545},[554,12671,657],{"class":559},[554,12673,674],{"class":563},[554,12675,586],{"class":559},[472,12677,12678],{},"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",[540,12680,12682],{"className":542,"code":12681,"language":550,"meta":480,"style":480},"\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",[510,12683,12684,12692,12713,12721,12729,12735,12749,12761,12765,12770,12774,12782,12790],{"__ignoreMap":480},[554,12685,12686,12688,12690],{"class":556,"line":481},[554,12687,560],{"class":559},[554,12689,674],{"class":563},[554,12691,586],{"class":559},[554,12693,12694,12696,12699,12702,12704,12706,12709,12711],{"class":556,"line":482},[554,12695,682],{"class":559},[554,12697,12698],{"class":563},"input",[554,12700,12701],{"class":567}," v-model",[554,12703,574],{"class":559},[554,12705,577],{"class":559},[554,12707,12708],{"class":600},"myReactiveText",[554,12710,577],{"class":559},[554,12712,1699],{"class":559},[554,12714,12715,12717,12719],{"class":556,"line":619},[554,12716,682],{"class":559},[554,12718,685],{"class":563},[554,12720,586],{"class":559},[554,12722,12723,12725,12727],{"class":556,"line":625},[554,12724,693],{"class":559},[554,12726,696],{"class":563},[554,12728,586],{"class":559},[554,12730,12731,12733],{"class":556,"line":654},[554,12732,704],{"class":559},[554,12734,12494],{"class":563},[554,12736,12737,12739,12741,12743,12745,12747],{"class":556,"line":664},[554,12738,744],{"class":559},[554,12740,1480],{"class":567},[554,12742,574],{"class":559},[554,12744,577],{"class":559},[554,12746,12708],{"class":600},[554,12748,723],{"class":559},[554,12750,12751,12753,12755,12757,12759],{"class":556,"line":669},[554,12752,12513],{"class":567},[554,12754,574],{"class":559},[554,12756,577],{"class":559},[554,12758,12520],{"class":580},[554,12760,723],{"class":559},[554,12762,12763],{"class":556,"line":679},[554,12764,4026],{"class":567},[554,12766,12767],{"class":556,"line":690},[554,12768,12769],{"class":567},"        need-updates\n",[554,12771,12772],{"class":556,"line":545},[554,12773,762],{"class":559},[554,12775,12776,12778,12780],{"class":556,"line":546},[554,12777,768],{"class":559},[554,12779,696],{"class":563},[554,12781,586],{"class":559},[554,12783,12784,12786,12788],{"class":556,"line":547},[554,12785,778],{"class":559},[554,12787,685],{"class":563},[554,12789,586],{"class":559},[554,12791,12792,12794,12796],{"class":556,"line":548},[554,12793,657],{"class":559},[554,12795,674],{"class":563},[554,12797,586],{"class":559},[536,12799,915],{"id":914},[917,12801,12802,12812],{},[920,12803,12804],{},[923,12805,12806,12808,12810],{},[926,12807,1939],{"align":928},[926,12809,932],{"align":928},[926,12811,935],{},[937,12813,12814,12825,12836,12848,12860,12872,12884,12897,12910,12922,12934,12945],{},[923,12815,12816,12820,12823],{},[942,12817,12818],{"align":928},[2864,12819,12448],{},[942,12821,12822],{"align":928},"The font data or font name to use for the text.",[942,12824],{},[923,12826,12827,12831,12834],{},[942,12828,12829],{"align":928},[2864,12830,1480],{},[942,12832,12833],{"align":928},"The text to display.",[942,12835],{},[923,12837,12838,12843,12846],{},[942,12839,12840],{"align":928},[2864,12841,12842],{},"size",[942,12844,12845],{"align":928},"The size of the text.",[942,12847,1871],{},[923,12849,12850,12854,12857],{},[942,12851,12852],{"align":928},[2864,12853,2885],{},[942,12855,12856],{"align":928},"The height of the text.",[942,12858,12859],{},"0.2",[923,12861,12862,12867,12870],{},[942,12863,12864],{"align":928},[2864,12865,12866],{},"curveSegments",[942,12868,12869],{"align":928},"The number of curve segments to use when generating the text geometry.",[942,12871,1691],{},[923,12873,12874,12879,12882],{},[942,12875,12876],{"align":928},[2864,12877,12878],{},"bevelEnabled",[942,12880,12881],{"align":928},"A flag indicating whether beveling should be enabled for the text.",[942,12883,1083],{},[923,12885,12886,12891,12894],{},[942,12887,12888],{"align":928},[2864,12889,12890],{},"bevelThickness",[942,12892,12893],{"align":928},"The thickness of the beveled edge on the text.",[942,12895,12896],{},"0.05",[923,12898,12899,12904,12907],{},[942,12900,12901],{"align":928},[2864,12902,12903],{},"bevelSize",[942,12905,12906],{"align":928},"The size of the beveled edge on the text.",[942,12908,12909],{},"0.02",[923,12911,12912,12917,12920],{},[942,12913,12914],{"align":928},[2864,12915,12916],{},"bevelOffset",[942,12918,12919],{"align":928},"The offset of the beveled edge on the text.",[942,12921,1107],{},[923,12923,12924,12929,12932],{},[942,12925,12926],{"align":928},[2864,12927,12928],{},"bevelSegments",[942,12930,12931],{"align":928},"The number of bevel segments to use when generating the text geometry.",[942,12933,1904],{},[923,12935,12936,12940,12943],{},[942,12937,12938],{"align":928},[2864,12939,1188],{},[942,12941,12942],{"align":928},"To center the text",[942,12944,1122],{},[923,12946,12947,12952,12955],{},[942,12948,12949],{"align":928},[2864,12950,12951],{},"needUpdates",[942,12953,12954],{"align":928},"This props add reactivity",[942,12956,1122],{},[1528,12958,12959],{},"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":480,"searchDepth":481,"depth":482,"links":12961},[12962,12963],{"id":538,"depth":482,"text":15},{"id":914,"depth":482,"text":915},"Render text in 3D using TextGeometry.",{},{"title":429,"description":12964},"t6bahOskD-ojOxftya8MrETrI6LWNTRBawqfzv7mouA",1774953659272]