[{"data":1,"prerenderedAt":12972},["ShallowReactive",2],{"navigation":3,"/api/objects":470,"/api/objects-surround":495,"objects-list":500},[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,114,156,190,284,310,344,394,436],{"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,110],{"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},"Drag Controls","/api/controls/drag-controls","2.api/2.controls/drag-controls",{"title":95,"path":96,"stem":97},"Keyboard Controls","/api/controls/keyboard-controls","2.api/2.controls/keyboard-controls",{"title":99,"path":100,"stem":101},"Map Controls","/api/controls/map-controls","2.api/2.controls/map-controls",{"title":103,"path":104,"stem":105},"Orbit Controls","/api/controls/orbit-controls","2.api/2.controls/orbit-controls",{"title":107,"path":108,"stem":109},"PointerLock Controls","/api/controls/pointer-lock-controls","2.api/2.controls/pointer-lock-controls",{"title":111,"path":112,"stem":113},"Transform Controls","/api/controls/transform-controls","2.api/2.controls/transform-controls",{"title":115,"path":116,"stem":117,"children":118},"Loaders","/api/loaders","2.api/3.loaders/index",[119,120,124,128,132,136,140,144,148,152],{"title":115,"path":116,"stem":117},{"title":121,"path":122,"stem":123},"useGLTF","/api/loaders/use-gltf","2.api/3.loaders/1.use-gltf",{"title":125,"path":126,"stem":127},"GLTFModel","/api/loaders/gltf-model","2.api/3.loaders/2.gltf-model",{"title":129,"path":130,"stem":131},"useFBX","/api/loaders/use-fbx","2.api/3.loaders/3.use-fbx",{"title":133,"path":134,"stem":135},"FBXModel","/api/loaders/fbx-model","2.api/3.loaders/4.fbx-model",{"title":137,"path":138,"stem":139},"useTexture","/api/loaders/use-texture","2.api/3.loaders/5.use-texture",{"title":141,"path":142,"stem":143},"useTextures","/api/loaders/use-textures","2.api/3.loaders/6.use-textures",{"title":145,"path":146,"stem":147},"useSVG","/api/loaders/use-svg","2.api/3.loaders/7.use-svg",{"title":149,"path":150,"stem":151},"useProgress","/api/loaders/use-progress","2.api/3.loaders/use-progress",{"title":153,"path":154,"stem":155},"useVideoTexture","/api/loaders/use-video-texture","2.api/3.loaders/use-video-texture",{"title":157,"path":158,"stem":159,"children":160},"Materials","/api/materials","2.api/4.materials/index",[161,162,166,170,174,178,182,186],{"title":157,"path":158,"stem":159},{"title":163,"path":164,"stem":165},"Custom Shader Material","/api/materials/custom-shader-material","2.api/4.materials/custom-shader-material",{"title":167,"path":168,"stem":169},"Mesh Glass Material","/api/materials/glass-material","2.api/4.materials/glass-material",{"title":171,"path":172,"stem":173},"Holographic Material","/api/materials/holographic-material","2.api/4.materials/holographic-material",{"title":175,"path":176,"stem":177},"Mesh Discard Material","/api/materials/mesh-discard-material","2.api/4.materials/mesh-discard-material",{"title":179,"path":180,"stem":181},"Mesh Reflection Material","/api/materials/mesh-reflection-material","2.api/4.materials/mesh-reflection-material",{"title":183,"path":184,"stem":185},"Point Material","/api/materials/point-material","2.api/4.materials/point-material",{"title":187,"path":188,"stem":189},"Wobble Material","/api/materials/wobble-material","2.api/4.materials/wobble-material",{"title":191,"path":192,"stem":193,"children":194},"Shapes","/api/shapes","2.api/5.shapes/index",[195,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280],{"title":191,"path":192,"stem":193},{"title":197,"path":198,"stem":199},"Box","/api/shapes/box","2.api/5.shapes/box",{"title":201,"path":202,"stem":203},"CatmullRomCurve3","/api/shapes/catmullromcurve3","2.api/5.shapes/catmullromcurve3",{"title":205,"path":206,"stem":207},"Circle","/api/shapes/circle","2.api/5.shapes/circle",{"title":209,"path":210,"stem":211},"Cone","/api/shapes/cone","2.api/5.shapes/cone",{"title":213,"path":214,"stem":215},"Cubic Bezier Line","/api/shapes/cubic-bezier-line","2.api/5.shapes/cubic-bezier-line",{"title":217,"path":218,"stem":219},"Cylinder","/api/shapes/cylinder","2.api/5.shapes/cylinder",{"title":221,"path":222,"stem":223},"Dodecahedron","/api/shapes/dodecahedron","2.api/5.shapes/dodecahedron",{"title":225,"path":226,"stem":227},"Grid","/api/shapes/grid","2.api/5.shapes/grid",{"title":229,"path":230,"stem":231},"Icosahedron","/api/shapes/icosahedron","2.api/5.shapes/icosahedron",{"title":233,"path":234,"stem":235},"Line2","/api/shapes/line2","2.api/5.shapes/line2",{"title":237,"path":238,"stem":239},"Octahedron","/api/shapes/octahedron","2.api/5.shapes/octahedron",{"title":241,"path":242,"stem":243},"Plane","/api/shapes/plane","2.api/5.shapes/plane",{"title":245,"path":246,"stem":247},"Quadratic Bezier Line","/api/shapes/quadratic-bezier-line","2.api/5.shapes/quadratic-bezier-line",{"title":249,"path":250,"stem":251},"Ring","/api/shapes/ring","2.api/5.shapes/ring",{"title":253,"path":254,"stem":255},"Rounded Box","/api/shapes/rounded-box","2.api/5.shapes/rounded-box",{"title":257,"path":258,"stem":259},"Screen Quad","/api/shapes/screen-quad","2.api/5.shapes/screen-quad",{"title":261,"path":262,"stem":263},"Sphere","/api/shapes/sphere","2.api/5.shapes/sphere",{"title":265,"path":266,"stem":267},"Superformula","/api/shapes/superformula","2.api/5.shapes/superformula",{"title":269,"path":270,"stem":271},"Tetrahedron","/api/shapes/tetrahedron","2.api/5.shapes/tetrahedron",{"title":273,"path":274,"stem":275},"Torus","/api/shapes/torus","2.api/5.shapes/torus",{"title":277,"path":278,"stem":279},"Torus Knot","/api/shapes/torus-knot","2.api/5.shapes/torus-knot",{"title":281,"path":282,"stem":283},"Tube","/api/shapes/tube","2.api/5.shapes/tube",{"title":285,"path":286,"stem":287,"children":288},"Debug/Performance","/api/debug-performance","2.api/6.debug-performance/index",[289,290,294,298,302,306],{"title":285,"path":286,"stem":287},{"title":291,"path":292,"stem":293},"Helper","/api/debug-performance/helper","2.api/6.debug-performance/helper",{"title":295,"path":296,"stem":297},"LOD","/api/debug-performance/lod","2.api/6.debug-performance/lod",{"title":299,"path":300,"stem":301},"Stats","/api/debug-performance/stats","2.api/6.debug-performance/stats",{"title":303,"path":304,"stem":305},"StatsGl","/api/debug-performance/stats-gl","2.api/6.debug-performance/stats-gl",{"title":307,"path":308,"stem":309},"useBVH","/api/debug-performance/use-bvh","2.api/6.debug-performance/use-bvh",{"title":311,"path":312,"stem":313,"children":314},"Light/Shadow","/api/light-shadow","2.api/7.light-shadow/index",[315,316,320,324,328,332,336,340],{"title":311,"path":312,"stem":313},{"title":317,"path":318,"stem":319},"Accumulative Shadows","/api/light-shadow/accumulative-shadows","2.api/7.light-shadow/accumulative-shadows",{"title":321,"path":322,"stem":323},"Bake Shadows","/api/light-shadow/bake-shadows","2.api/7.light-shadow/bake-shadows",{"title":325,"path":326,"stem":327},"Circle Shadow","/api/light-shadow/circle-shadow","2.api/7.light-shadow/circle-shadow",{"title":329,"path":330,"stem":331},"Contact Shadows","/api/light-shadow/contact-shadows","2.api/7.light-shadow/contact-shadows",{"title":333,"path":334,"stem":335},"Lensflare","/api/light-shadow/lensflare","2.api/7.light-shadow/lensflare",{"title":337,"path":338,"stem":339},"Randomized Lights","/api/light-shadow/randomized-lights","2.api/7.light-shadow/randomized-lights",{"title":341,"path":342,"stem":343},"Soft Shadows","/api/light-shadow/soft-shadows","2.api/7.light-shadow/soft-shadows",{"title":345,"path":346,"stem":347,"children":348},"Staging","/api/staging","2.api/8.staging/index",[349,350,354,358,362,366,370,374,378,382,386,390],{"title":345,"path":346,"stem":347},{"title":351,"path":352,"stem":353},"Environment","/api/staging/environment","2.api/8.staging/1.environment",{"title":355,"path":356,"stem":357},"useEnvironment","/api/staging/use-environment","2.api/8.staging/2.use-environment",{"title":359,"path":360,"stem":361},"Lightformer","/api/staging/lightformer","2.api/8.staging/3.lightformer",{"title":363,"path":364,"stem":365},"Backdrop","/api/staging/backdrop","2.api/8.staging/backdrop",{"title":367,"path":368,"stem":369},"Ocean","/api/staging/ocean","2.api/8.staging/ocean",{"title":371,"path":372,"stem":373},"Precipitation","/api/staging/precipitation","2.api/8.staging/precipitation",{"title":375,"path":376,"stem":377},"Sky","/api/staging/sky","2.api/8.staging/sky",{"title":379,"path":380,"stem":381},"Smoke","/api/staging/smoke","2.api/8.staging/smoke",{"title":383,"path":384,"stem":385},"Sparkles","/api/staging/sparkles","2.api/8.staging/sparkles",{"title":387,"path":388,"stem":389},"Stage","/api/staging/stage","2.api/8.staging/stage",{"title":391,"path":392,"stem":393},"Stars","/api/staging/stars","2.api/8.staging/stars",{"title":395,"path":396,"stem":397,"children":398},"Objects","/api/objects","2.api/9.objects/index",[399,400,404,408,412,416,420,424,428,432],{"title":395,"path":396,"stem":397},{"title":401,"path":402,"stem":403},"AnimatedSprite","/api/objects/animated-sprite","2.api/9.objects/animated-sprite",{"title":405,"path":406,"stem":407},"CubeCamera","/api/objects/cube-camera","2.api/9.objects/cube-camera",{"title":409,"path":410,"stem":411},"Fbo","/api/objects/fbo","2.api/9.objects/fbo",{"title":413,"path":414,"stem":415},"GradientTexture","/api/objects/gradient-texture","2.api/9.objects/gradient-texture",{"title":417,"path":418,"stem":419},"HTML","/api/objects/html","2.api/9.objects/html",{"title":421,"path":422,"stem":423},"Image","/api/objects/image","2.api/9.objects/image",{"title":425,"path":426,"stem":427},"MarchingCubes","/api/objects/marching-cubes","2.api/9.objects/marching-cubes",{"title":429,"path":430,"stem":431},"Reflector","/api/objects/reflector","2.api/9.objects/reflector",{"title":433,"path":434,"stem":435},"Text3D","/api/objects/text-3d","2.api/9.objects/text-3d",{"title":437,"path":438,"stem":439,"children":440},"Miscellaneous","/api/miscellaneous","2.api/miscellaneous/index",[441,442,446,450,454,458,462,466],{"title":437,"path":438,"stem":439},{"title":443,"path":444,"stem":445},"Bounds","/api/miscellaneous/bounds","2.api/miscellaneous/bounds",{"title":447,"path":448,"stem":449},"GlobalAudio","/api/miscellaneous/global-audio","2.api/miscellaneous/global-audio",{"title":451,"path":452,"stem":453},"MouseParallax","/api/miscellaneous/mouse-parallax","2.api/miscellaneous/mouse-parallax",{"title":455,"path":456,"stem":457},"PositionalAudio","/api/miscellaneous/positional-audio","2.api/miscellaneous/positional-audio",{"title":459,"path":460,"stem":461},"useAnimations","/api/miscellaneous/use-animations","2.api/miscellaneous/use-animations",{"title":463,"path":464,"stem":465},"useGLTFExporter","/api/miscellaneous/use-gltf-exporter","2.api/miscellaneous/use-gltf-exporter",{"title":467,"path":468,"stem":469},"useIntersect","/api/miscellaneous/use-intersect","2.api/miscellaneous/use-intersect",{"id":471,"title":395,"body":472,"description":488,"extension":489,"links":490,"meta":491,"navigation":492,"path":396,"seo":493,"stem":397,"__hash__":494},"docs/2.api/9.objects/index.md",{"type":473,"value":474,"toc":483},"minimark",[475,479],[476,477,478],"p",{},"Components for creating 3D objects, sprites, text, and textures in your scene.",[480,481],"api-list",{"list-name":482},"objects-list",{"title":484,"searchDepth":485,"depth":486,"links":487},"",1,2,[],"3D objects and texture components","md",null,{},true,{"title":395,"description":488},"PJRjQ8U1I99ephC4xbsR6qDF0Wsdp6iYandnX5ya-lQ",[496,498],{"title":391,"path":392,"stem":393,"description":497,"children":-1},"Renders beautiful stars in the sky using Points and BufferGeometry.",{"title":401,"path":402,"stem":403,"description":499,"children":-1},"Display 2D animations defined in a texture atlas.",[501,1556,2048,3361,3793,9911,10546,11402,12421],{"id":502,"title":401,"body":503,"description":499,"extension":489,"links":490,"meta":1553,"navigation":492,"path":402,"seo":1554,"stem":403,"__hash__":1555},"docs/2.api/9.objects/animated-sprite.md",{"type":473,"value":504,"toc":1535},[505,511,529,539,543,796,808,812,818,832,841,845,852,872,876,884,889,916,920,1270,1274,1344,1347,1354,1358,1361,1366,1369,1381,1397,1401,1404,1441,1444,1456,1460,1469,1479,1487,1490,1521,1524,1531],[506,507,508],"scene-controls-wrapper",{},[509,510],"objects-animated-sprite",{},[476,512,513,517,518,525,526,528],{},[514,515,516],"code",{},"\u003CAnimatedSprite />"," displays 2D animations defined in a ",[519,520,524],"a",{"href":521,"rel":522},"https://en.wikipedia.org/wiki/Texture_atlas",[523],"nofollow","texture atlas",". A typical ",[514,527,516],{}," will use:",[530,531,532,536],"ul",{},[533,534,535],"li",{},"An image containing multiple sprites",[533,537,538],{},"A JSON atlas containing the individual sprite coordinates in the image",[540,541,15],"h2",{"id":542},"usage",[544,545,555],"pre",{"className":546,"code":547,"highlights":548,"language":554,"meta":484,"style":484},"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",[486,549,550,551,552,553],10,11,12,13,14,"vue",[514,556,557,591,621,627,656,666,671,681,692,703,712,728,743,761,767,777,787],{"__ignoreMap":484},[558,559,561,565,569,573,576,579,582,586,588],"span",{"class":560,"line":485},"line",[558,562,564],{"class":563},"sMK4o","\u003C",[558,566,568],{"class":567},"swJcz","script",[558,570,572],{"class":571},"spNyl"," setup",[558,574,575],{"class":571}," lang",[558,577,578],{"class":563},"=",[558,580,581],{"class":563},"\"",[558,583,585],{"class":584},"sfazB","ts",[558,587,581],{"class":563},[558,589,590],{"class":563},">\n",[558,592,595,599,602,606,609,612,615,618],{"class":593,"line":486},[560,594],"highlight",[558,596,598],{"class":597},"s7zQu","import",[558,600,601],{"class":563}," {",[558,603,605],{"class":604},"sTEyZ"," AnimatedSprite",[558,607,608],{"class":563}," }",[558,610,611],{"class":597}," from",[558,613,614],{"class":563}," '",[558,616,617],{"class":584},"@tresjs/cientos",[558,619,620],{"class":563},"'\n",[558,622,624],{"class":560,"line":623},3,[558,625,626],{"emptyLinePlaceholder":492},"\n",[558,628,630,633,636,638,642,645,648,651,653],{"class":560,"line":629},4,[558,631,632],{"class":571},"const",[558,634,635],{"class":604}," currentAnimation ",[558,637,578],{"class":563},[558,639,641],{"class":640},"s2Zo4"," ref",[558,643,644],{"class":604},"(",[558,646,647],{"class":563},"'",[558,649,650],{"class":584},"cientosIdle",[558,652,647],{"class":563},[558,654,655],{"class":604},")\n",[558,657,659,662,664],{"class":560,"line":658},5,[558,660,661],{"class":563},"\u003C/",[558,663,568],{"class":567},[558,665,590],{"class":563},[558,667,669],{"class":560,"line":668},6,[558,670,626],{"emptyLinePlaceholder":492},[558,672,674,676,679],{"class":560,"line":673},7,[558,675,564],{"class":563},[558,677,678],{"class":567},"template",[558,680,590],{"class":563},[558,682,684,687,690],{"class":560,"line":683},8,[558,685,686],{"class":563},"  \u003C",[558,688,689],{"class":567},"TresCanvas",[558,691,590],{"class":563},[558,693,695,698,701],{"class":560,"line":694},9,[558,696,697],{"class":563},"    \u003C",[558,699,700],{"class":567},"Suspense",[558,702,590],{"class":563},[558,704,706,709],{"class":705,"line":549},[560,594],[558,707,708],{"class":563},"      \u003C",[558,710,711],{"class":567},"AnimatedSprite\n",[558,713,715,718,720,722,725],{"class":714,"line":550},[560,594],[558,716,717],{"class":571},"        image",[558,719,578],{"class":563},[558,721,581],{"class":563},[558,723,724],{"class":584},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosTexture.png",[558,726,727],{"class":563},"\"\n",[558,729,731,734,736,738,741],{"class":730,"line":551},[560,594],[558,732,733],{"class":571},"        atlas",[558,735,578],{"class":563},[558,737,581],{"class":563},[558,739,740],{"class":584},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosAtlas.json",[558,742,727],{"class":563},[558,744,746,749,752,754,756,759],{"class":745,"line":552},[560,594],[558,747,748],{"class":563},"        :",[558,750,751],{"class":571},"animation",[558,753,578],{"class":563},[558,755,581],{"class":563},[558,757,758],{"class":604},"currentAnimation",[558,760,727],{"class":563},[558,762,764],{"class":763,"line":553},[560,594],[558,765,766],{"class":563},"      />\n",[558,768,770,773,775],{"class":560,"line":769},15,[558,771,772],{"class":563},"    \u003C/",[558,774,700],{"class":567},[558,776,590],{"class":563},[558,778,780,783,785],{"class":560,"line":779},16,[558,781,782],{"class":563},"  \u003C/",[558,784,689],{"class":567},[558,786,590],{"class":563},[558,788,790,792,794],{"class":560,"line":789},17,[558,791,661],{"class":563},[558,793,678],{"class":567},[558,795,590],{"class":563},[797,798,799],"prose-warning",{},[476,800,801,803,804,807],{},[514,802,516],{}," loads resources asynchronously, so it must be wrapped in a ",[514,805,806],{},"\u003CSuspense />",".",[540,809,811],{"id":810},"compiling-an-atlas","Compiling an atlas",[476,813,814,815,817],{},"In typical usage, ",[514,816,516],{}," requires both the URL to a texture of compiled sprite images and a JSON atlas containing information about the sprites in the texture.",[530,819,820,826],{},[533,821,822],{},[519,823,825],{"href":724,"rel":824},[523],"example compiled texture",[533,827,828],{},[519,829,831],{"href":740,"rel":830},[523],"example JSON atlas",[476,833,834,835,840],{},"Compiling source images into a texture atlas is usually handled by third-party software. You may find ",[519,836,839],{"href":837,"rel":838},"https://www.codeandweb.com/texturepacker",[523],"TexturePacker"," useful.",[540,842,844],{"id":843},"without-an-atlas","Without an atlas",[476,846,847,848,851],{},"There may be cases where you don't want to supply an atlas to the ",[514,849,850],{},"atlas"," prop. To do so:",[530,853,854,857,860,863],{},[533,855,856],{},"Compile your source images into a single image texture.",[533,858,859],{},"Space each sprite into equally sized columns and rows in the compiled image texture.",[533,861,862],{},"Ensure no extra padding has been added to the compiled image texture.",[533,864,865,866,868,869,807],{},"Set the ",[514,867,850],{}," prop to number of columns, number of rows as ",[514,870,871],{},"[number, number]",[540,873,875],{"id":874},"spritesheets-in-the-wild","Spritesheets in the wild",[797,877,878],{},[476,879,880,881,883],{},"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 ",[514,882,516],{},". In many cases, it's advisable to recompile the spritesheet.",[885,886,888],"h3",{"id":887},"how-to-recompile-an-existing-spritesheet-image","How to recompile an existing spritesheet image",[530,890,891,894,897,900,913],{},[533,892,893],{},"Cut individual sprites from the spritesheet and paste them into separate layers in an image editing application, e.g., GIMP.",[533,895,896],{},"Align the layers for animation. Toggling layer visibility on/off will show you how the animation will display, frame to frame.",[533,898,899],{},"Export layers as individual images.",[533,901,902,903,906,909,910,912],{},"Name the individual images according to the following pattern: ",[904,905],"br",{},[514,907,908],{},"[animation name][frame number].[extension]"," ",[904,911],{},"E.g., walk000.png, walk001.png, idle000.png, idle001.png",[533,914,915],{},"Compile individual images into an image texture and atlas using a texture packing application, like TexturePacker.",[540,917,919],{"id":918},"props","Props",[921,922,923,940],"table",{},[924,925,926],"thead",{},[927,928,929,934,937],"tr",{},[930,931,933],"th",{"align":932},"left","Name",[930,935,936],{"align":932},"Description",[930,938,939],{"align":932},"Default",[941,942,943,957,997,1057,1072,1088,1112,1127,1141,1155,1169,1188,1212,1232,1251],"tbody",{},[927,944,945,949,955],{},[946,947,948],"td",{"align":932},"image",[946,950,951,954],{"align":932},[514,952,953],{},"string"," – URL of the image texture or an image dataURL. This prop is not reactive.",[946,956],{"align":932},[927,958,959,961,995],{},[946,960,850],{"align":932},[946,962,963,966,967,992,994],{"align":932},[514,964,965],{},"string | Atlasish"," – ",[530,968,969,975,981,986],{},[533,970,971,972,974],{},"If ",[514,973,953],{},", the URL of the JSON atlas.",[533,976,971,977,980],{},[514,978,979],{},"number",", the number of columns in the texture.",[533,982,971,983,985],{},[514,984,871],{},", the number of columns/rows in the texture.",[533,987,971,988,991],{},[514,989,990],{},"AtlasData",", the atlas as a JS object.",[904,993],{},"This prop is not reactive.",[946,996],{"align":932},[927,998,999,1002,1055],{},[946,1000,1001],{"align":932},"definitions",[946,1003,1004,1007,1008,1010,1011,1013,1015,1016,1018,1020,1021],{"align":932},[514,1005,1006],{},"Record\u003Cstring, string>"," – Specify playback frame order and repeated frames (delays). ",[514,1009,1001],{}," is a record where keys are atlas animation names and values are strings containing an animation definition.",[904,1012],{},[904,1014],{},"A \"animation definition\" comma-separated string of frame numbers with optional parentheses-surrounded durations.",[904,1017],{},[904,1019],{},"Here is how various definition strings convert to arrays of frames for playback:",[530,1022,1023,1030,1037,1043,1049],{},[533,1024,1025,1026,1029],{},"\"0,2,1\" - ",[558,1027,1028],{},"0,2,1",", i.e., play frame 0, 2, then 1.",[533,1031,1032,1033,1036],{},"\"2(10)\" - ",[558,1034,1035],{},"2,2,2,2,2,2,2,2,2,2",", i.e., play from 2 10 times.",[533,1038,1039,1040],{},"\"1-4\" - ",[558,1041,1042],{},"1,2,3,4",[533,1044,1045,1046],{},"\"10-5(2)\" - ",[558,1047,1048],{},"10,10,9,9,8,8,7,7,6,6,5,5",[533,1050,1051,1052],{},"\"1-4(3),10(2)\" - ",[558,1053,1054],{},"1,1,1,2,2,2,3,3,3,4,4,4,10,10",[946,1056],{"align":932},[927,1058,1059,1062,1067],{},[946,1060,1061],{"align":932},"fps",[946,1063,1064,1066],{"align":932},[514,1065,979],{}," – Desired frames per second of the animation.",[946,1068,1069],{"align":932},[514,1070,1071],{},"30",[927,1073,1074,1077,1083],{},[946,1075,1076],{"align":932},"loop",[946,1078,1079,1082],{"align":932},[514,1080,1081],{},"boolean"," – Whether or not the animation should loop.",[946,1084,1085],{"align":932},[514,1086,1087],{},"true",[927,1089,1090,1092,1107],{},[946,1091,751],{"align":932},[946,1093,1094,1097,1098,1100,1101,1103,1104,1106],{"align":932},[514,1095,1096],{},"string | [number, number] | number"," – If ",[514,1099,953],{},", name of the animation to play. If ",[514,1102,871],{},", start and end frames of the animation. If ",[514,1105,979],{},", frame number to display.",[946,1108,1109],{"align":932},[514,1110,1111],{},"0",[927,1113,1114,1117,1122],{},[946,1115,1116],{"align":932},"paused",[946,1118,1119,1121],{"align":932},[514,1120,1081],{}," – Whether the animation is paused.",[946,1123,1124],{"align":932},[514,1125,1126],{},"false",[927,1128,1129,1132,1137],{},[946,1130,1131],{"align":932},"reversed",[946,1133,1134,1136],{"align":932},[514,1135,1081],{}," – Whether to play the animation in reverse.",[946,1138,1139],{"align":932},[514,1140,1126],{},[927,1142,1143,1146,1151],{},[946,1144,1145],{"align":932},"flipX",[946,1147,1148,1150],{"align":932},[514,1149,1081],{}," – Whether the sprite should be flipped, left to right.",[946,1152,1153],{"align":932},[514,1154,1126],{},[927,1156,1157,1160,1165],{},[946,1158,1159],{"align":932},"resetOnEnd",[946,1161,1162,1164],{"align":932},[514,1163,1081],{}," – For a non-looping animation, when the animation ends, whether to display the zeroth frame.",[946,1166,1167],{"align":932},[514,1168,1126],{},[927,1170,1171,1174,1184],{},[946,1172,1173],{"align":932},"asSprite",[946,1175,1176,1178,1179],{"align":932},[514,1177,1081],{}," – Whether to display the object as a THREE.Sprite. ",[519,1180,1183],{"href":1181,"rel":1182},"https://threejs.org/docs/?q=sprite#api/en/objects/Sprite",[523],"See THREE.Sprite",[946,1185,1186],{"align":932},[514,1187,1087],{},[927,1189,1190,1193,1207],{},[946,1191,1192],{"align":932},"center",[946,1194,1195,1198,1199,1202,1203,1206],{"align":932},[514,1196,1197],{},"TresVector2"," – Anchor point of the object. A value of ",[558,1200,1201],{},"0.5, 0.5"," corresponds to the center. ",[558,1204,1205],{},"0, 0"," is left, bottom.",[946,1208,1209],{"align":932},[514,1210,1211],{},"[0.5, 0.5]",[927,1213,1214,1217,1227],{},[946,1215,1216],{"align":932},"alphaTest",[946,1218,1219,1221,1222],{"align":932},[514,1220,979],{}," – Alpha test value for the material. ",[519,1223,1226],{"href":1224,"rel":1225},"https://threejs.org/docs/#api/en/materials/Material.alphaTest",[523],"See THREE.Material.alphaTest",[946,1228,1229],{"align":932},[514,1230,1231],{},"0.0",[927,1233,1234,1237,1247],{},[946,1235,1236],{"align":932},"depthTest",[946,1238,1239,1241,1242],{"align":932},[514,1240,1081],{}," – Depth test value for the material. ",[519,1243,1246],{"href":1244,"rel":1245},"https://threejs.org/docs/#api/en/materials/Material.depthTest",[523],"See THREE.Material.depthTest",[946,1248,1249],{"align":932},[514,1250,1087],{},[927,1252,1253,1256,1266],{},[946,1254,1255],{"align":932},"depthWrite",[946,1257,1258,1260,1261],{"align":932},[514,1259,1081],{}," – Depth write value for the material. ",[519,1262,1265],{"href":1263,"rel":1264},"https://threejs.org/docs/#api/en/materials/Material.depthWrite",[523],"See THREE.Material.depthWrite",[946,1267,1268],{"align":932},[514,1269,1087],{},[540,1271,1273],{"id":1272},"events","Events",[921,1275,1276,1288],{},[924,1277,1278],{},[927,1279,1280,1283,1285],{},[930,1281,1282],{},"Event",[930,1284,936],{},[930,1286,1287],{},"Argument",[941,1289,1290,1305,1326],{},[927,1291,1292,1297,1300],{},[946,1293,1294],{},[514,1295,1296],{},"frame",[946,1298,1299],{},"Emitted when the displayed animation frame changes – at most once per tick, frames may be dropped",[946,1301,1302,1304],{},[514,1303,953],{}," – Name of the newly displayed frame",[927,1306,1307,1312,1321],{},[946,1308,1309],{},[514,1310,1311],{},"end",[946,1313,1314,1315,1318,1319],{},"Emitted when the animation ends – ",[514,1316,1317],{},"props.loop"," must be set to ",[514,1320,1126],{},[946,1322,1323,1325],{},[514,1324,953],{}," – Name of the ending frame",[927,1327,1328,1332,1339],{},[946,1329,1330],{},[514,1331,1076],{},[946,1333,1334,1335,1318,1337],{},"Emitted when the animation loops – ",[514,1336,1317],{},[514,1338,1087],{},[946,1340,1341,1343],{},[514,1342,953],{}," – Name of the frame at the end of the loop",[540,1345,1346],{"id":751},"Animation",[476,1348,1349,1350,1353],{},"The ",[514,1351,1352],{},":animation"," prop holds either the name of the currently playing animation or a range of frames to play, or a frame number to display.",[885,1355,1357],{"id":1356},"using-named-animations-as-animation","Using named animations as animation",[476,1359,1360],{},"When individual files are converted to a spritesheet/atlas, typically the original images' filenames will be included in the atlas.",[476,1362,1363,1365],{},[514,1364,516],{}," uses those filenames to automatically group images into animations.",[476,1367,1368],{},"Use either of the following naming conventions for your source images ...",[530,1370,1371,1376],{},[533,1372,1373],{},[514,1374,1375],{},"[animation name][frame number].[file_extension]",[533,1377,1378],{},[514,1379,1380],{},"[animation name]_[frame number].[file_extension]",[476,1382,1383,1384,1386,1387,1390,1391,1393,1394,1396],{},"... then ",[514,1385,516],{}," will automatically make all ",[514,1388,1389],{},"[animation name]"," available for playback. Just pass ",[514,1392,1389],{}," to the component's ",[514,1395,1352],{}," prop.",[885,1398,1400],{"id":1399},"example","Example",[476,1402,1403],{},"For our Cientos heart cartoon character animation, here's how the filenames map to animation names.",[921,1405,1406,1416],{},[924,1407,1408],{},[927,1409,1410,1413],{},[930,1411,1412],{},"Filenames",[930,1414,1415],{},"Animation name",[941,1417,1418,1425,1433],{},[927,1419,1420,1423],{},[946,1421,1422],{},"cientosIdle0000.png, cientosIdle0001.png, ...",[946,1424,650],{},[927,1426,1427,1430],{},[946,1428,1429],{},"cientosIdleToWalkTransition0000.png",[946,1431,1432],{},"cientosIdleToWalkTransition",[927,1434,1435,1438],{},[946,1436,1437],{},"cientosWalk0000.png, cientosWalk0001.png, ...",[946,1439,1440],{},"cientosWalk",[540,1442,1443],{"id":1001},"Definitions",[476,1445,1446,1447,1450,1451,1455],{},"You can supply an object to the ",[514,1448,1449],{},":definitions"," prop. Any ",[519,1452,1454],{"href":1453},"#animation","named animation"," can be a key. The value is a string that specifies frame order and delays.",[885,1457,1459],{"id":1458},"demo","Demo",[476,1461,1462,1463,1465,1466,807],{},"In this demo, the 'idle' animation is comprised of six different images. By default, those images will play sequentially when the ",[514,1464,1352],{}," prop is ",[514,1467,1468],{},"'idle'",[476,1470,1471,1472,1474,1475,1478],{},"But below, we've added a ",[514,1473,1449],{}," prop with this value for the ",[514,1476,1477],{},"idle"," key:",[544,1480,1485],{"className":1481,"code":1483,"language":1484},[1482],"language-text","'0-5, 0(10), 1-2, 3(20), 4-5, 0-5(3)'\n","text",[514,1486,1483],{"__ignoreMap":484},[476,1488,1489],{},"So, instead of playing images 0-5 sequentially, this animation will play instead:",[530,1491,1492,1501,1515],{},[533,1493,1494,1497,1498,1500],{},[514,1495,1496],{},"0-5"," – Play all six images (",[514,1499,1496],{},") of the animation normally.",[533,1502,1503,1506,1507,1510,1511,1514],{},[514,1504,1505],{},"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 (",[514,1508,1509],{},"0(10)",") and a delay of twenty frames at the top of the bounce (",[514,1512,1513],{},"3(20)",").",[533,1516,1517,1520],{},[514,1518,1519],{},"0-5(3)"," – Finally, play all six images of the animation with a delay of three frames each.",[540,1522,1523],{"id":1192},"Center",[476,1525,1526,1527,1530],{},"In addition to being the sprite's anchor point, the ",[514,1528,1529],{},":center"," prop also controls how differently sized source images will \"grow\" and \"shrink\". Namely, they \"grow out from\" and \"shrink towards\" the center.",[1532,1533,1534],"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":484,"searchDepth":485,"depth":486,"links":1536},[1537,1538,1539,1540,1543,1544,1545,1549,1552],{"id":542,"depth":486,"text":15},{"id":810,"depth":486,"text":811},{"id":843,"depth":486,"text":844},{"id":874,"depth":486,"text":875,"children":1541},[1542],{"id":887,"depth":623,"text":888},{"id":918,"depth":486,"text":919},{"id":1272,"depth":486,"text":1273},{"id":751,"depth":486,"text":1346,"children":1546},[1547,1548],{"id":1356,"depth":623,"text":1357},{"id":1399,"depth":623,"text":1400},{"id":1001,"depth":486,"text":1443,"children":1550},[1551],{"id":1458,"depth":623,"text":1459},{"id":1192,"depth":486,"text":1523},{},{"title":401,"description":499},"TOx2TSEHnQeUR_DoVqP-W-cCHOVI1DisvWaE29LwWYA",{"id":1557,"title":405,"body":1558,"description":2044,"extension":489,"links":490,"meta":2045,"navigation":492,"path":406,"seo":2046,"stem":407,"__hash__":2047},"docs/2.api/9.objects/cube-camera.md",{"type":473,"value":1559,"toc":2040},[1560,1565,1575,1580,1582,1933,1935,2037],[506,1561,1562],{},[1563,1564],"objects-cube-camera",{},[476,1566,1567,1570,1571,1574],{},[514,1568,1569],{},"\u003CCubeCamera />"," creates a ",[514,1572,1573],{},"THREE.CubeCamera"," and uses it to render an environment map of your scene. The environment map is then applied to component's children.",[476,1576,1577,1579],{},[514,1578,1569],{}," makes its children invisible while rendering to the internal buffer so that they are not included in the reflection.",[540,1581,15],{"id":542},[544,1583,1586],{"className":546,"code":1584,"highlights":1585,"language":554,"meta":484,"style":484},"\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",[486,549,769],[514,1587,1588,1608,1634,1642,1646,1654,1662,1704,1713,1717,1754,1763,1800,1835,1844,1853,1857,1880,1915,1924],{"__ignoreMap":484},[558,1589,1590,1592,1594,1596,1598,1600,1602,1604,1606],{"class":560,"line":485},[558,1591,564],{"class":563},[558,1593,568],{"class":567},[558,1595,572],{"class":571},[558,1597,575],{"class":571},[558,1599,578],{"class":563},[558,1601,581],{"class":563},[558,1603,585],{"class":584},[558,1605,581],{"class":563},[558,1607,590],{"class":563},[558,1609,1611,1613,1615,1618,1621,1624,1626,1628,1630,1632],{"class":1610,"line":486},[560,594],[558,1612,598],{"class":597},[558,1614,601],{"class":563},[558,1616,1617],{"class":604}," CubeCamera",[558,1619,1620],{"class":563},",",[558,1622,1623],{"class":604}," OrbitControls",[558,1625,608],{"class":563},[558,1627,611],{"class":597},[558,1629,614],{"class":563},[558,1631,617],{"class":584},[558,1633,620],{"class":563},[558,1635,1636,1638,1640],{"class":560,"line":623},[558,1637,661],{"class":563},[558,1639,568],{"class":567},[558,1641,590],{"class":563},[558,1643,1644],{"class":560,"line":629},[558,1645,626],{"emptyLinePlaceholder":492},[558,1647,1648,1650,1652],{"class":560,"line":658},[558,1649,564],{"class":563},[558,1651,678],{"class":567},[558,1653,590],{"class":563},[558,1655,1656,1658,1660],{"class":560,"line":668},[558,1657,686],{"class":563},[558,1659,689],{"class":567},[558,1661,590],{"class":563},[558,1663,1664,1666,1669,1672,1675,1677,1679,1682,1685,1688,1691,1693,1696,1699,1701],{"class":560,"line":673},[558,1665,697],{"class":563},[558,1667,1668],{"class":567},"TresPerspectiveCamera",[558,1670,1671],{"class":563}," :",[558,1673,1674],{"class":571},"position",[558,1676,578],{"class":563},[558,1678,581],{"class":563},[558,1680,1681],{"class":563},"[",[558,1683,1111],{"class":1684},"sbssI",[558,1686,1687],{"class":563},", ",[558,1689,1690],{"class":1684},"2",[558,1692,1687],{"class":563},[558,1694,1695],{"class":1684},"5",[558,1697,1698],{"class":563},"]",[558,1700,581],{"class":563},[558,1702,1703],{"class":563}," />\n",[558,1705,1706,1708,1711],{"class":560,"line":683},[558,1707,697],{"class":563},[558,1709,1710],{"class":567},"OrbitControls",[558,1712,1703],{"class":563},[558,1714,1715],{"class":560,"line":694},[558,1716,626],{"emptyLinePlaceholder":492},[558,1718,1720,1722,1724,1726,1729,1731,1733,1736,1738,1740,1743,1745,1747,1750,1752],{"class":1719,"line":549},[560,594],[558,1721,697],{"class":563},[558,1723,405],{"class":567},[558,1725,1671],{"class":563},[558,1727,1728],{"class":571},"resolution",[558,1730,578],{"class":563},[558,1732,581],{"class":563},[558,1734,1735],{"class":1684},"256",[558,1737,581],{"class":563},[558,1739,1671],{"class":563},[558,1741,1742],{"class":571},"frames",[558,1744,578],{"class":563},[558,1746,581],{"class":563},[558,1748,1749],{"class":563},"Infinity",[558,1751,581],{"class":563},[558,1753,590],{"class":563},[558,1755,1756,1758,1761],{"class":560,"line":550},[558,1757,708],{"class":563},[558,1759,1760],{"class":567},"TresMesh",[558,1762,590],{"class":563},[558,1764,1765,1768,1771,1773,1776,1778,1780,1782,1785,1787,1790,1792,1794,1796,1798],{"class":560,"line":551},[558,1766,1767],{"class":563},"        \u003C",[558,1769,1770],{"class":567},"TresSphereGeometry",[558,1772,1671],{"class":563},[558,1774,1775],{"class":571},"args",[558,1777,578],{"class":563},[558,1779,581],{"class":563},[558,1781,1681],{"class":563},[558,1783,1784],{"class":1684},"1",[558,1786,1687],{"class":563},[558,1788,1789],{"class":1684},"32",[558,1791,1687],{"class":563},[558,1793,1789],{"class":1684},[558,1795,1698],{"class":563},[558,1797,581],{"class":563},[558,1799,1703],{"class":563},[558,1801,1802,1804,1807,1809,1812,1814,1816,1818,1820,1822,1825,1827,1829,1831,1833],{"class":560,"line":552},[558,1803,1767],{"class":563},[558,1805,1806],{"class":567},"TresMeshStandardMaterial",[558,1808,1671],{"class":563},[558,1810,1811],{"class":571},"metalness",[558,1813,578],{"class":563},[558,1815,581],{"class":563},[558,1817,1784],{"class":1684},[558,1819,581],{"class":563},[558,1821,1671],{"class":563},[558,1823,1824],{"class":571},"roughness",[558,1826,578],{"class":563},[558,1828,581],{"class":563},[558,1830,1111],{"class":1684},[558,1832,581],{"class":563},[558,1834,1703],{"class":563},[558,1836,1837,1840,1842],{"class":560,"line":553},[558,1838,1839],{"class":563},"      \u003C/",[558,1841,1760],{"class":567},[558,1843,590],{"class":563},[558,1845,1847,1849,1851],{"class":1846,"line":769},[560,594],[558,1848,772],{"class":563},[558,1850,405],{"class":567},[558,1852,590],{"class":563},[558,1854,1855],{"class":560,"line":779},[558,1856,626],{"emptyLinePlaceholder":492},[558,1858,1859,1861,1864,1866,1869,1871,1873,1876,1878],{"class":560,"line":789},[558,1860,697],{"class":563},[558,1862,1863],{"class":567},"TresAmbientLight",[558,1865,1671],{"class":563},[558,1867,1868],{"class":571},"intensity",[558,1870,578],{"class":563},[558,1872,581],{"class":563},[558,1874,1875],{"class":1684},"0.5",[558,1877,581],{"class":563},[558,1879,1703],{"class":563},[558,1881,1883,1885,1888,1890,1892,1894,1896,1898,1900,1902,1904,1906,1909,1911,1913],{"class":560,"line":1882},18,[558,1884,697],{"class":563},[558,1886,1887],{"class":567},"TresDirectionalLight",[558,1889,1671],{"class":563},[558,1891,1674],{"class":571},[558,1893,578],{"class":563},[558,1895,581],{"class":563},[558,1897,1681],{"class":563},[558,1899,1111],{"class":1684},[558,1901,1687],{"class":563},[558,1903,1690],{"class":1684},[558,1905,1687],{"class":563},[558,1907,1908],{"class":1684},"4",[558,1910,1698],{"class":563},[558,1912,581],{"class":563},[558,1914,1703],{"class":563},[558,1916,1918,1920,1922],{"class":560,"line":1917},19,[558,1919,782],{"class":563},[558,1921,689],{"class":567},[558,1923,590],{"class":563},[558,1925,1927,1929,1931],{"class":560,"line":1926},20,[558,1928,661],{"class":563},[558,1930,678],{"class":567},[558,1932,590],{"class":563},[540,1934,919],{"id":918},[921,1936,1937,1948],{},[924,1938,1939],{},[927,1940,1941,1944,1946],{},[930,1942,1943],{"align":932},"Prop",[930,1945,936],{"align":932},[930,1947,939],{},[941,1949,1950,1969,1983,1998,2013,2025],{},[927,1951,1952,1956,1965],{},[946,1953,1954],{"align":932},[514,1955,1742],{},[946,1957,1958,1959,1961,1962,1964],{"align":932},"Number of frames to render. Set to ",[514,1960,1784],{}," for a static scene. ",[514,1963,1749],{}," to update continuously.",[946,1966,1967],{},[514,1968,1749],{},[927,1970,1971,1975,1978],{},[946,1972,1973],{"align":932},[514,1974,1728],{},[946,1976,1977],{"align":932},"Resolution of the FBO",[946,1979,1980],{},[514,1981,1982],{},"255",[927,1984,1985,1990,1993],{},[946,1986,1987],{"align":932},[514,1988,1989],{},"near",[946,1991,1992],{"align":932},"Camera near",[946,1994,1995],{},[514,1996,1997],{},"0.1",[927,1999,2000,2005,2008],{},[946,2001,2002],{"align":932},[514,2003,2004],{},"far",[946,2006,2007],{"align":932},"Camera far",[946,2009,2010],{},[514,2011,2012],{},"1000",[927,2014,2015,2020,2023],{},[946,2016,2017],{"align":932},[514,2018,2019],{},"envMap",[946,2021,2022],{"align":932},"Custom environment map that is temporarily set as the scene's background",[946,2024],{},[927,2026,2027,2032,2035],{},[946,2028,2029],{"align":932},[514,2030,2031],{},"fog",[946,2033,2034],{"align":932},"Custom fog that is temporarily set as the scene's fog",[946,2036],{},[1532,2038,2039],{},"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":484,"searchDepth":485,"depth":486,"links":2041},[2042,2043],{"id":542,"depth":486,"text":15},{"id":918,"depth":486,"text":919},"Render environment maps for reflective objects.",{},{"title":405,"description":2044},"guPReQbllwq5wU5oLp9_7X7yFZih0xBoLQvebR42uzE",{"id":2049,"title":409,"body":2050,"description":3357,"extension":489,"links":490,"meta":3358,"navigation":492,"path":410,"seo":3359,"stem":411,"__hash__":3360},"docs/2.api/9.objects/fbo.md",{"type":473,"value":2051,"toc":3349},[2052,2058,2061,2068,2070,2847,2849,2967,2971,2973,2979,2986,2989,3258,3262,3346],[2053,2054,2055],"scene-wrapper",{},[2056,2057],"objects-fbo",{},[476,2059,2060],{},"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.",[476,2062,2063,2064,2067],{},"Cientos provides an ",[514,2065,2066],{},"\u003CFbo />"," component make it easy to use FBOs in your application.",[540,2069,15],{"id":542},[544,2071,2078],{"className":546,"code":2072,"highlights":2073,"language":554,"meta":484,"style":484},"\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",[486,2074,2075,2076,2077],23,24,25,26,[514,2079,2080,2100,2124,2147,2166,2185,2189,2229,2257,2261,2295,2326,2356,2382,2387,2395,2399,2407,2443,2475,2483,2488,2519,2527,2542,2560,2587,2593,2602,2636,2641,2649,2666,2696,2701,2710,2715,2723,2736,2764,2770,2810,2820,2829,2838],{"__ignoreMap":484},[558,2081,2082,2084,2086,2088,2090,2092,2094,2096,2098],{"class":560,"line":485},[558,2083,564],{"class":563},[558,2085,568],{"class":567},[558,2087,572],{"class":571},[558,2089,575],{"class":571},[558,2091,578],{"class":563},[558,2093,581],{"class":563},[558,2095,585],{"class":584},[558,2097,581],{"class":563},[558,2099,590],{"class":563},[558,2101,2103,2105,2107,2110,2112,2114,2116,2118,2120,2122],{"class":2102,"line":486},[560,594],[558,2104,598],{"class":597},[558,2106,601],{"class":563},[558,2108,2109],{"class":604}," Fbo",[558,2111,1620],{"class":563},[558,2113,1623],{"class":604},[558,2115,608],{"class":563},[558,2117,611],{"class":597},[558,2119,614],{"class":563},[558,2121,617],{"class":584},[558,2123,620],{"class":563},[558,2125,2126,2128,2131,2133,2136,2138,2140,2142,2145],{"class":560,"line":623},[558,2127,598],{"class":597},[558,2129,2130],{"class":597}," type",[558,2132,601],{"class":563},[558,2134,2135],{"class":604}," TresObject",[558,2137,608],{"class":563},[558,2139,611],{"class":597},[558,2141,614],{"class":563},[558,2143,2144],{"class":584},"@tresjs/core",[558,2146,620],{"class":563},[558,2148,2149,2151,2153,2156,2158,2160,2162,2164],{"class":560,"line":629},[558,2150,598],{"class":597},[558,2152,601],{"class":563},[558,2154,2155],{"class":604}," TresCanvas",[558,2157,608],{"class":563},[558,2159,611],{"class":597},[558,2161,614],{"class":563},[558,2163,2144],{"class":584},[558,2165,620],{"class":563},[558,2167,2168,2170,2172,2175,2177,2179,2181,2183],{"class":560,"line":658},[558,2169,598],{"class":597},[558,2171,601],{"class":563},[558,2173,2174],{"class":604}," shallowRef",[558,2176,608],{"class":563},[558,2178,611],{"class":597},[558,2180,614],{"class":563},[558,2182,554],{"class":584},[558,2184,620],{"class":563},[558,2186,2187],{"class":560,"line":668},[558,2188,626],{"emptyLinePlaceholder":492},[558,2190,2191,2193,2196,2198,2200,2202,2206,2209,2211,2214,2217,2220,2222,2224,2227],{"class":560,"line":673},[558,2192,632],{"class":571},[558,2194,2195],{"class":604}," fboRef ",[558,2197,578],{"class":563},[558,2199,2174],{"class":640},[558,2201,564],{"class":563},[558,2203,2205],{"class":2204},"sBMFI","InstanceType",[558,2207,2208],{"class":563},"\u003Ctypeof",[558,2210,2109],{"class":604},[558,2212,2213],{"class":563},">",[558,2215,2216],{"class":563}," |",[558,2218,2219],{"class":2204}," null",[558,2221,2213],{"class":563},[558,2223,644],{"class":604},[558,2225,2226],{"class":563},"null",[558,2228,655],{"class":604},[558,2230,2231,2233,2236,2238,2240,2242,2245,2247,2249,2251,2253,2255],{"class":560,"line":683},[558,2232,632],{"class":571},[558,2234,2235],{"class":604}," torusRef ",[558,2237,578],{"class":563},[558,2239,2174],{"class":640},[558,2241,564],{"class":563},[558,2243,2244],{"class":2204},"TresObject",[558,2246,2216],{"class":563},[558,2248,2219],{"class":2204},[558,2250,2213],{"class":563},[558,2252,644],{"class":604},[558,2254,2226],{"class":563},[558,2256,655],{"class":604},[558,2258,2259],{"class":560,"line":694},[558,2260,626],{"emptyLinePlaceholder":492},[558,2262,2263,2266,2269,2272,2276,2279,2281,2283,2286,2289,2292],{"class":560,"line":549},[558,2264,2265],{"class":571},"function",[558,2267,2268],{"class":640}," onLoop",[558,2270,2271],{"class":563},"({",[558,2273,2275],{"class":2274},"sHdIc"," elapsed",[558,2277,2278],{"class":563}," }:",[558,2280,601],{"class":563},[558,2282,2275],{"class":567},[558,2284,2285],{"class":563},":",[558,2287,2288],{"class":2204}," number",[558,2290,2291],{"class":563}," })",[558,2293,2294],{"class":563}," {\n",[558,2296,2297,2300,2303,2306,2309,2311,2314,2317,2320,2323],{"class":560,"line":550},[558,2298,2299],{"class":597},"  if",[558,2301,2302],{"class":567}," (",[558,2304,2305],{"class":563},"!",[558,2307,2308],{"class":604},"torusRef",[558,2310,807],{"class":563},[558,2312,2313],{"class":604},"value",[558,2315,2316],{"class":567},") ",[558,2318,2319],{"class":563},"{",[558,2321,2322],{"class":597}," return",[558,2324,2325],{"class":563}," }\n",[558,2327,2328,2331,2333,2335,2337,2340,2342,2345,2348,2350,2353],{"class":560,"line":551},[558,2329,2330],{"class":604},"  torusRef",[558,2332,807],{"class":563},[558,2334,2313],{"class":604},[558,2336,807],{"class":563},[558,2338,2339],{"class":604},"rotation",[558,2341,807],{"class":563},[558,2343,2344],{"class":604},"x",[558,2346,2347],{"class":563}," =",[558,2349,2275],{"class":604},[558,2351,2352],{"class":563}," *",[558,2354,2355],{"class":1684}," 0.745\n",[558,2357,2358,2360,2362,2364,2366,2368,2370,2373,2375,2377,2379],{"class":560,"line":552},[558,2359,2330],{"class":604},[558,2361,807],{"class":563},[558,2363,2313],{"class":604},[558,2365,807],{"class":563},[558,2367,2339],{"class":604},[558,2369,807],{"class":563},[558,2371,2372],{"class":604},"y",[558,2374,2347],{"class":563},[558,2376,2275],{"class":604},[558,2378,2352],{"class":563},[558,2380,2381],{"class":1684}," 0.361\n",[558,2383,2384],{"class":560,"line":553},[558,2385,2386],{"class":563},"}\n",[558,2388,2389,2391,2393],{"class":560,"line":769},[558,2390,661],{"class":563},[558,2392,568],{"class":567},[558,2394,590],{"class":563},[558,2396,2397],{"class":560,"line":779},[558,2398,626],{"emptyLinePlaceholder":492},[558,2400,2401,2403,2405],{"class":560,"line":789},[558,2402,564],{"class":563},[558,2404,678],{"class":567},[558,2406,590],{"class":563},[558,2408,2409,2411,2413,2415,2418,2420,2422,2425,2427,2430,2432,2434,2436,2439,2441],{"class":560,"line":1882},[558,2410,686],{"class":563},[558,2412,689],{"class":567},[558,2414,1671],{"class":563},[558,2416,2417],{"class":571},"clear-color",[558,2419,578],{"class":563},[558,2421,581],{"class":563},[558,2423,2424],{"class":1684},"0x222",[558,2426,581],{"class":563},[558,2428,2429],{"class":563}," @",[558,2431,1076],{"class":571},[558,2433,578],{"class":563},[558,2435,581],{"class":563},[558,2437,2438],{"class":604},"onLoop",[558,2440,581],{"class":563},[558,2442,590],{"class":563},[558,2444,2445,2447,2449,2451,2453,2455,2457,2459,2461,2463,2465,2467,2469,2471,2473],{"class":560,"line":1917},[558,2446,697],{"class":563},[558,2448,1668],{"class":567},[558,2450,1671],{"class":563},[558,2452,1674],{"class":571},[558,2454,578],{"class":563},[558,2456,581],{"class":563},[558,2458,1681],{"class":563},[558,2460,1111],{"class":1684},[558,2462,1687],{"class":563},[558,2464,1875],{"class":1684},[558,2466,1687],{"class":563},[558,2468,1695],{"class":1684},[558,2470,1698],{"class":563},[558,2472,581],{"class":563},[558,2474,1703],{"class":563},[558,2476,2477,2479,2481],{"class":560,"line":1926},[558,2478,697],{"class":563},[558,2480,1710],{"class":567},[558,2482,1703],{"class":563},[558,2484,2486],{"class":560,"line":2485},21,[558,2487,626],{"emptyLinePlaceholder":492},[558,2489,2491,2493,2496,2498,2500,2502,2504,2506,2509,2511,2513,2515,2517],{"class":560,"line":2490},22,[558,2492,697],{"class":563},[558,2494,2495],{"class":567},"TresGridHelper",[558,2497,1671],{"class":563},[558,2499,1775],{"class":571},[558,2501,578],{"class":563},[558,2503,581],{"class":563},[558,2505,1681],{"class":563},[558,2507,2508],{"class":1684},"10",[558,2510,1687],{"class":563},[558,2512,2508],{"class":1684},[558,2514,1698],{"class":563},[558,2516,581],{"class":563},[558,2518,1703],{"class":563},[558,2520,2522,2524],{"class":2521,"line":2074},[560,594],[558,2523,697],{"class":563},[558,2525,2526],{"class":567},"Fbo\n",[558,2528,2530,2533,2535,2537,2540],{"class":2529,"line":2075},[560,594],[558,2531,2532],{"class":571},"      ref",[558,2534,578],{"class":563},[558,2536,581],{"class":563},[558,2538,2539],{"class":584},"fboRef",[558,2541,727],{"class":563},[558,2543,2545,2548,2551,2553,2555,2558],{"class":2544,"line":2076},[560,594],[558,2546,2547],{"class":563},"      :",[558,2549,2550],{"class":571},"depth",[558,2552,578],{"class":563},[558,2554,581],{"class":563},[558,2556,1126],{"class":2557},"sfNiH",[558,2559,727],{"class":563},[558,2561,2563,2565,2568,2570,2572,2575,2578,2581,2583,2585],{"class":2562,"line":2077},[560,594],[558,2564,2547],{"class":563},[558,2566,2567],{"class":571},"settings",[558,2569,578],{"class":563},[558,2571,581],{"class":563},[558,2573,2574],{"class":563},"{ ",[558,2576,2577],{"class":567},"samples",[558,2579,2580],{"class":563},": ",[558,2582,1784],{"class":1684},[558,2584,608],{"class":563},[558,2586,727],{"class":563},[558,2588,2590],{"class":560,"line":2589},27,[558,2591,2592],{"class":563},"    />\n",[558,2594,2596,2598,2600],{"class":560,"line":2595},28,[558,2597,697],{"class":563},[558,2599,1760],{"class":567},[558,2601,590],{"class":563},[558,2603,2605,2607,2610,2612,2614,2616,2618,2620,2622,2624,2626,2628,2630,2632,2634],{"class":560,"line":2604},29,[558,2606,708],{"class":563},[558,2608,2609],{"class":567},"TresBoxGeometry",[558,2611,1671],{"class":563},[558,2613,1775],{"class":571},[558,2615,578],{"class":563},[558,2617,581],{"class":563},[558,2619,1681],{"class":563},[558,2621,1784],{"class":1684},[558,2623,1687],{"class":563},[558,2625,1784],{"class":1684},[558,2627,1687],{"class":563},[558,2629,1784],{"class":1684},[558,2631,1698],{"class":563},[558,2633,581],{"class":563},[558,2635,1703],{"class":563},[558,2637,2639],{"class":560,"line":2638},30,[558,2640,626],{"emptyLinePlaceholder":492},[558,2642,2644,2646],{"class":560,"line":2643},31,[558,2645,708],{"class":563},[558,2647,2648],{"class":567},"TresMeshBasicMaterial\n",[558,2650,2652,2654,2657,2659,2661,2664],{"class":560,"line":2651},32,[558,2653,748],{"class":563},[558,2655,2656],{"class":571},"color",[558,2658,578],{"class":563},[558,2660,581],{"class":563},[558,2662,2663],{"class":1684},"0xFFFFFF",[558,2665,727],{"class":563},[558,2667,2669,2671,2674,2676,2678,2680,2683,2686,2688,2691,2694],{"class":560,"line":2668},33,[558,2670,748],{"class":563},[558,2672,2673],{"class":571},"map",[558,2675,578],{"class":563},[558,2677,581],{"class":563},[558,2679,2539],{"class":604},[558,2681,2682],{"class":563},"?.",[558,2684,2685],{"class":604},"instance",[558,2687,2682],{"class":563},[558,2689,2690],{"class":604},"texture",[558,2692,2693],{"class":563}," ?? null",[558,2695,727],{"class":563},[558,2697,2699],{"class":560,"line":2698},34,[558,2700,766],{"class":563},[558,2702,2704,2706,2708],{"class":560,"line":2703},35,[558,2705,772],{"class":563},[558,2707,1760],{"class":567},[558,2709,590],{"class":563},[558,2711,2713],{"class":560,"line":2712},36,[558,2714,626],{"emptyLinePlaceholder":492},[558,2716,2718,2720],{"class":560,"line":2717},37,[558,2719,697],{"class":563},[558,2721,2722],{"class":567},"TresMesh\n",[558,2724,2726,2728,2730,2732,2734],{"class":560,"line":2725},38,[558,2727,2532],{"class":571},[558,2729,578],{"class":563},[558,2731,581],{"class":563},[558,2733,2308],{"class":584},[558,2735,727],{"class":563},[558,2737,2739,2741,2743,2745,2747,2749,2752,2754,2756,2758,2760,2762],{"class":560,"line":2738},39,[558,2740,2547],{"class":563},[558,2742,1674],{"class":571},[558,2744,578],{"class":563},[558,2746,581],{"class":563},[558,2748,1681],{"class":563},[558,2750,2751],{"class":1684},"3",[558,2753,1687],{"class":563},[558,2755,1111],{"class":1684},[558,2757,1687],{"class":563},[558,2759,1111],{"class":1684},[558,2761,1698],{"class":563},[558,2763,727],{"class":563},[558,2765,2767],{"class":560,"line":2766},40,[558,2768,2769],{"class":563},"    >\n",[558,2771,2773,2775,2778,2780,2782,2784,2786,2788,2790,2792,2794,2796,2799,2801,2804,2806,2808],{"class":560,"line":2772},41,[558,2774,708],{"class":563},[558,2776,2777],{"class":567},"TresTorusGeometry",[558,2779,1671],{"class":563},[558,2781,1775],{"class":571},[558,2783,578],{"class":563},[558,2785,581],{"class":563},[558,2787,1681],{"class":563},[558,2789,1784],{"class":1684},[558,2791,1687],{"class":563},[558,2793,1875],{"class":1684},[558,2795,1687],{"class":563},[558,2797,2798],{"class":1684},"16",[558,2800,1687],{"class":563},[558,2802,2803],{"class":1684},"100",[558,2805,1698],{"class":563},[558,2807,581],{"class":563},[558,2809,1703],{"class":563},[558,2811,2813,2815,2818],{"class":560,"line":2812},42,[558,2814,708],{"class":563},[558,2816,2817],{"class":567},"TresMeshNormalMaterial",[558,2819,1703],{"class":563},[558,2821,2823,2825,2827],{"class":560,"line":2822},43,[558,2824,772],{"class":563},[558,2826,1760],{"class":567},[558,2828,590],{"class":563},[558,2830,2832,2834,2836],{"class":560,"line":2831},44,[558,2833,782],{"class":563},[558,2835,689],{"class":567},[558,2837,590],{"class":563},[558,2839,2841,2843,2845],{"class":560,"line":2840},45,[558,2842,661],{"class":563},[558,2844,678],{"class":567},[558,2846,590],{"class":563},[540,2848,919],{"id":918},[921,2850,2851,2861],{},[924,2852,2853],{},[927,2854,2855,2857,2859],{},[930,2856,1943],{"align":932},[930,2858,936],{"align":932},[930,2860,939],{},[941,2862,2863,2881,2898,2922,2949],{},[927,2864,2865,2873,2878],{},[946,2866,2867],{"align":932},[2868,2869,2870],"strong",{},[514,2871,2872],{},"width",[946,2874,2875,2877],{"align":932},[514,2876,979],{}," - The width of the FBO.",[946,2879,2880],{},"Width of the canvas",[927,2882,2883,2890,2895],{},[946,2884,2885],{"align":932},[2868,2886,2887],{},[514,2888,2889],{},"height",[946,2891,2892,2894],{"align":932},[514,2893,979],{}," - the height of the FBO",[946,2896,2897],{},"Height of the canvas",[927,2899,2900,2906,2918],{},[946,2901,2902],{"align":932},[2868,2903,2904],{},[514,2905,2550],{},[946,2907,2908,2910,2911,807],{"align":932},[514,2909,1081],{}," - Whether or not the FBO should render the depth to a ",[519,2912,2915],{"href":2913,"rel":2914},"https://threejs.org/docs/?q=webglre#api/en/renderers/WebGLRenderTarget.depthTexture",[523],[514,2916,2917],{},"depthTexture",[946,2919,2920],{},[514,2921,1126],{},[927,2923,2924,2930,2944],{},[946,2925,2926],{"align":932},[2868,2927,2928],{},[514,2929,2567],{},[946,2931,2932,2935,2936],{"align":932},[514,2933,2934],{},"WebGLRenderTargetOptions"," - Every other configuration property for the ",[519,2937,2940,2943],{"href":2938,"rel":2939},"https://threejs.org/docs/#api/en/renderers/WebGLRenderTarget",[523],[514,2941,2942],{},"WebGLRenderTarget"," class",[946,2945,2946],{},[514,2947,2948],{},"{}",[927,2950,2951,2958,2963],{},[946,2952,2953],{"align":932},[2868,2954,2955],{},[514,2956,2957],{},"autoRender",[946,2959,2960,2962],{"align":932},[514,2961,1081],{}," - Whether to automatically render the FBO on the default scene.",[946,2964,2965],{},[514,2966,1087],{},[540,2968,2970],{"id":2969},"usefbo","useFBO",[476,2972,2060],{},[476,2974,2975,2976,2978],{},"Cientos provides a ",[514,2977,2970],{}," composable to make it easy to use FBOs in your application.",[797,2980,2981],{},[476,2982,1349,2983,2985],{},[514,2984,2970],{}," composable must be used inside of a child component since it needs the context of TresCanvas.",[885,2987,15],{"id":2988},"usage-1",[544,2990,2993],{"className":546,"code":2991,"highlights":2992,"language":554,"meta":484,"style":484},"\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",[486,629,658,668,673,683,694,549,550,1926],[514,2994,2995,3015,3035,3039,3056,3070,3083,3095,3105,3118,3124,3132,3140,3144,3152,3160,3192,3196,3202,3216,3238,3242,3250],{"__ignoreMap":484},[558,2996,2997,2999,3001,3003,3005,3007,3009,3011,3013],{"class":560,"line":485},[558,2998,564],{"class":563},[558,3000,568],{"class":567},[558,3002,572],{"class":571},[558,3004,575],{"class":571},[558,3006,578],{"class":563},[558,3008,581],{"class":563},[558,3010,585],{"class":584},[558,3012,581],{"class":563},[558,3014,590],{"class":563},[558,3016,3018,3020,3022,3025,3027,3029,3031,3033],{"class":3017,"line":486},[560,594],[558,3019,598],{"class":597},[558,3021,601],{"class":563},[558,3023,3024],{"class":604}," useFBO",[558,3026,608],{"class":563},[558,3028,611],{"class":597},[558,3030,614],{"class":563},[558,3032,617],{"class":584},[558,3034,620],{"class":563},[558,3036,3037],{"class":560,"line":623},[558,3038,626],{"emptyLinePlaceholder":492},[558,3040,3042,3044,3047,3049,3051,3053],{"class":3041,"line":629},[560,594],[558,3043,632],{"class":571},[558,3045,3046],{"class":604}," fboTarget ",[558,3048,578],{"class":563},[558,3050,3024],{"class":640},[558,3052,644],{"class":604},[558,3054,3055],{"class":563},"{\n",[558,3057,3059,3062,3064,3067],{"class":3058,"line":658},[560,594],[558,3060,3061],{"class":567},"  depth",[558,3063,2285],{"class":563},[558,3065,3066],{"class":2557}," true",[558,3068,3069],{"class":563},",\n",[558,3071,3073,3076,3078,3081],{"class":3072,"line":668},[560,594],[558,3074,3075],{"class":567},"  width",[558,3077,2285],{"class":563},[558,3079,3080],{"class":1684}," 512",[558,3082,3069],{"class":563},[558,3084,3086,3089,3091,3093],{"class":3085,"line":673},[560,594],[558,3087,3088],{"class":567},"  height",[558,3090,2285],{"class":563},[558,3092,3080],{"class":1684},[558,3094,3069],{"class":563},[558,3096,3098,3101,3103],{"class":3097,"line":683},[560,594],[558,3099,3100],{"class":567},"  settings",[558,3102,2285],{"class":563},[558,3104,2294],{"class":563},[558,3106,3108,3111,3113,3116],{"class":3107,"line":694},[560,594],[558,3109,3110],{"class":567},"    samples",[558,3112,2285],{"class":563},[558,3114,3115],{"class":1684}," 1",[558,3117,3069],{"class":563},[558,3119,3121],{"class":3120,"line":549},[560,594],[558,3122,3123],{"class":563},"  },\n",[558,3125,3127,3130],{"class":3126,"line":550},[560,594],[558,3128,3129],{"class":563},"}",[558,3131,655],{"class":604},[558,3133,3134,3136,3138],{"class":560,"line":551},[558,3135,661],{"class":563},[558,3137,568],{"class":567},[558,3139,590],{"class":563},[558,3141,3142],{"class":560,"line":552},[558,3143,626],{"emptyLinePlaceholder":492},[558,3145,3146,3148,3150],{"class":560,"line":553},[558,3147,564],{"class":563},[558,3149,678],{"class":567},[558,3151,590],{"class":563},[558,3153,3154,3156,3158],{"class":560,"line":769},[558,3155,686],{"class":563},[558,3157,1760],{"class":567},[558,3159,590],{"class":563},[558,3161,3162,3164,3166,3168,3170,3172,3174,3176,3178,3180,3182,3184,3186,3188,3190],{"class":560,"line":779},[558,3163,697],{"class":563},[558,3165,2609],{"class":567},[558,3167,1671],{"class":563},[558,3169,1775],{"class":571},[558,3171,578],{"class":563},[558,3173,581],{"class":563},[558,3175,1681],{"class":563},[558,3177,1784],{"class":1684},[558,3179,1687],{"class":563},[558,3181,1784],{"class":1684},[558,3183,1687],{"class":563},[558,3185,1784],{"class":1684},[558,3187,1698],{"class":563},[558,3189,581],{"class":563},[558,3191,1703],{"class":563},[558,3193,3194],{"class":560,"line":789},[558,3195,626],{"emptyLinePlaceholder":492},[558,3197,3198,3200],{"class":560,"line":1882},[558,3199,697],{"class":563},[558,3201,2648],{"class":567},[558,3203,3204,3206,3208,3210,3212,3214],{"class":560,"line":1917},[558,3205,2547],{"class":563},[558,3207,2656],{"class":571},[558,3209,578],{"class":563},[558,3211,581],{"class":563},[558,3213,2663],{"class":1684},[558,3215,727],{"class":563},[558,3217,3219,3221,3223,3225,3227,3230,3232,3234,3236],{"class":3218,"line":1926},[560,594],[558,3220,2547],{"class":563},[558,3222,2673],{"class":571},[558,3224,578],{"class":563},[558,3226,581],{"class":563},[558,3228,3229],{"class":604},"fboTarget",[558,3231,2682],{"class":563},[558,3233,2690],{"class":604},[558,3235,2693],{"class":563},[558,3237,727],{"class":563},[558,3239,3240],{"class":560,"line":2485},[558,3241,2592],{"class":563},[558,3243,3244,3246,3248],{"class":560,"line":2490},[558,3245,782],{"class":563},[558,3247,1760],{"class":567},[558,3249,590],{"class":563},[558,3251,3252,3254,3256],{"class":560,"line":2074},[558,3253,661],{"class":563},[558,3255,678],{"class":567},[558,3257,590],{"class":563},[885,3259,3261],{"id":3260},"options","Options",[921,3263,3264,3274],{},[924,3265,3266],{},[927,3267,3268,3270,3272],{},[930,3269,1943],{"align":932},[930,3271,936],{"align":932},[930,3273,939],{},[941,3275,3276,3290,3304,3325],{},[927,3277,3278,3284,3288],{},[946,3279,3280],{"align":932},[2868,3281,3282],{},[514,3283,2872],{},[946,3285,3286,2877],{"align":932},[514,3287,979],{},[946,3289,2880],{},[927,3291,3292,3298,3302],{},[946,3293,3294],{"align":932},[2868,3295,3296],{},[514,3297,2889],{},[946,3299,3300,2894],{"align":932},[514,3301,979],{},[946,3303,2897],{},[927,3305,3306,3312,3321],{},[946,3307,3308],{"align":932},[2868,3309,3310],{},[514,3311,2550],{},[946,3313,3314,2910,3316,807],{"align":932},[514,3315,1081],{},[519,3317,3319],{"href":2913,"rel":3318},[523],[514,3320,2917],{},[946,3322,3323],{},[514,3324,1126],{},[927,3326,3327,3333,3342],{},[946,3328,3329],{"align":932},[2868,3330,3331],{},[514,3332,2567],{},[946,3334,3335,2935,3337],{"align":932},[514,3336,2934],{},[519,3338,3340,2943],{"href":2938,"rel":3339},[523],[514,3341,2942],{},[946,3343,3344],{},[514,3345,2948],{},[1532,3347,3348],{},"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":484,"searchDepth":485,"depth":486,"links":3350},[3351,3352,3353],{"id":542,"depth":486,"text":15},{"id":918,"depth":486,"text":919},{"id":2969,"depth":486,"text":2970,"children":3354},[3355,3356],{"id":2988,"depth":623,"text":15},{"id":3260,"depth":623,"text":3261},"Render to texture using Frame Buffer Objects.",{},{"title":409,"description":3357},"ch0ffhPITGouVRylpEdp2CmD8Fl-JOZCHt9eio9zKpc",{"id":3362,"title":413,"body":3363,"description":3789,"extension":489,"links":490,"meta":3790,"navigation":492,"path":414,"seo":3791,"stem":415,"__hash__":3792},"docs/2.api/9.objects/gradient-texture.md",{"type":473,"value":3364,"toc":3785},[3365,3370,3379,3381,3636,3638,3783],[2053,3366,3367],{},[3368,3369],"objects-gradient-texture",{},[476,3371,3372,3375,3376,3378],{},[514,3373,3374],{},"\u003CGradientTexture />"," creates a gradient in a THREE.Texture and attaches it to its parent THREE.Material's ",[514,3377,2673],{}," by default.",[540,3380,15],{"id":542},[544,3382,3384],{"className":546,"code":3383,"language":554,"meta":484,"style":484},"\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",[514,3385,3386,3406,3425,3433,3437,3445,3453,3485,3489,3497,3526,3535,3542,3566,3599,3604,3612,3620,3628],{"__ignoreMap":484},[558,3387,3388,3390,3392,3394,3396,3398,3400,3402,3404],{"class":560,"line":485},[558,3389,564],{"class":563},[558,3391,568],{"class":567},[558,3393,572],{"class":571},[558,3395,575],{"class":571},[558,3397,578],{"class":563},[558,3399,581],{"class":563},[558,3401,585],{"class":584},[558,3403,581],{"class":563},[558,3405,590],{"class":563},[558,3407,3408,3410,3412,3415,3417,3419,3421,3423],{"class":560,"line":486},[558,3409,598],{"class":597},[558,3411,601],{"class":563},[558,3413,3414],{"class":604}," GradientTexture",[558,3416,608],{"class":563},[558,3418,611],{"class":597},[558,3420,614],{"class":563},[558,3422,617],{"class":584},[558,3424,620],{"class":563},[558,3426,3427,3429,3431],{"class":560,"line":623},[558,3428,661],{"class":563},[558,3430,568],{"class":567},[558,3432,590],{"class":563},[558,3434,3435],{"class":560,"line":629},[558,3436,626],{"emptyLinePlaceholder":492},[558,3438,3439,3441,3443],{"class":560,"line":658},[558,3440,564],{"class":563},[558,3442,678],{"class":567},[558,3444,590],{"class":563},[558,3446,3447,3449,3451],{"class":560,"line":668},[558,3448,686],{"class":563},[558,3450,689],{"class":567},[558,3452,590],{"class":563},[558,3454,3455,3457,3459,3461,3463,3465,3467,3469,3471,3473,3475,3477,3479,3481,3483],{"class":560,"line":673},[558,3456,697],{"class":563},[558,3458,1668],{"class":567},[558,3460,1671],{"class":563},[558,3462,1674],{"class":571},[558,3464,578],{"class":563},[558,3466,581],{"class":563},[558,3468,1681],{"class":563},[558,3470,1111],{"class":1684},[558,3472,1687],{"class":563},[558,3474,1111],{"class":1684},[558,3476,1687],{"class":563},[558,3478,1695],{"class":1684},[558,3480,1698],{"class":563},[558,3482,581],{"class":563},[558,3484,1703],{"class":563},[558,3486,3487],{"class":560,"line":683},[558,3488,626],{"emptyLinePlaceholder":492},[558,3490,3491,3493,3495],{"class":560,"line":694},[558,3492,697],{"class":563},[558,3494,1760],{"class":567},[558,3496,590],{"class":563},[558,3498,3499,3501,3504,3506,3508,3510,3512,3514,3516,3518,3520,3522,3524],{"class":560,"line":549},[558,3500,708],{"class":563},[558,3502,3503],{"class":567},"TresPlaneGeometry",[558,3505,1671],{"class":563},[558,3507,1775],{"class":571},[558,3509,578],{"class":563},[558,3511,581],{"class":563},[558,3513,1681],{"class":563},[558,3515,1690],{"class":1684},[558,3517,1687],{"class":563},[558,3519,1690],{"class":1684},[558,3521,1698],{"class":563},[558,3523,581],{"class":563},[558,3525,1703],{"class":563},[558,3527,3528,3530,3533],{"class":560,"line":550},[558,3529,708],{"class":563},[558,3531,3532],{"class":567},"TresMeshBasicMaterial",[558,3534,590],{"class":563},[558,3536,3537,3539],{"class":560,"line":551},[558,3538,1767],{"class":563},[558,3540,3541],{"class":567},"GradientTexture\n",[558,3543,3544,3547,3550,3552,3554,3556,3558,3560,3562,3564],{"class":560,"line":552},[558,3545,3546],{"class":563},"          :",[558,3548,3549],{"class":571},"stops",[558,3551,578],{"class":563},[558,3553,581],{"class":563},[558,3555,1681],{"class":563},[558,3557,1111],{"class":1684},[558,3559,1687],{"class":563},[558,3561,1784],{"class":1684},[558,3563,1698],{"class":563},[558,3565,727],{"class":563},[558,3567,3568,3570,3573,3575,3577,3579,3581,3584,3586,3588,3590,3593,3595,3597],{"class":560,"line":553},[558,3569,3546],{"class":563},[558,3571,3572],{"class":571},"colors",[558,3574,578],{"class":563},[558,3576,581],{"class":563},[558,3578,1681],{"class":563},[558,3580,647],{"class":563},[558,3582,3583],{"class":584},"#ff0000",[558,3585,647],{"class":563},[558,3587,1687],{"class":563},[558,3589,647],{"class":563},[558,3591,3592],{"class":584},"#0000ff",[558,3594,647],{"class":563},[558,3596,1698],{"class":563},[558,3598,727],{"class":563},[558,3600,3601],{"class":560,"line":769},[558,3602,3603],{"class":563},"        />\n",[558,3605,3606,3608,3610],{"class":560,"line":779},[558,3607,1839],{"class":563},[558,3609,3532],{"class":567},[558,3611,590],{"class":563},[558,3613,3614,3616,3618],{"class":560,"line":789},[558,3615,772],{"class":563},[558,3617,1760],{"class":567},[558,3619,590],{"class":563},[558,3621,3622,3624,3626],{"class":560,"line":1882},[558,3623,782],{"class":563},[558,3625,689],{"class":567},[558,3627,590],{"class":563},[558,3629,3630,3632,3634],{"class":560,"line":1917},[558,3631,661],{"class":563},[558,3633,678],{"class":567},[558,3635,590],{"class":563},[540,3637,919],{"id":918},[921,3639,3640,3650],{},[924,3641,3642],{},[927,3643,3644,3646,3648],{},[930,3645,1943],{"align":932},[930,3647,936],{"align":932},[930,3649,939],{},[941,3651,3652,3680,3694,3709,3723,3736,3754,3768],{},[927,3653,3654,3658,3678],{},[946,3655,3656],{"align":932},[514,3657,3549],{},[946,3659,3660,3661,3664,3665,3667,3668,3670,3671,3674,3675,807],{"align":932},"A ",[514,3662,3663],{},"number[]"," of values between ",[514,3666,1111],{}," and ",[514,3669,1784],{}," representing the color positions in the gradient. ",[514,3672,3673],{},"stops.length"," should match ",[514,3676,3677],{},"color.length",[946,3679],{},[927,3681,3682,3686,3692],{},[946,3683,3684],{"align":932},[514,3685,3572],{},[946,3687,3660,3688,3691],{"align":932},[514,3689,3690],{},"THREE.ColorRepresentation[]"," representing the colors in the gradient.",[946,3693],{},[927,3695,3696,3701,3704],{},[946,3697,3698],{"align":932},[514,3699,3700],{},"attach",[946,3702,3703],{"align":932},"Where the component should be attached within its parent.",[946,3705,3706],{},[514,3707,3708],{},"'map'",[927,3710,3711,3715,3718],{},[946,3712,3713],{"align":932},[514,3714,2889],{},[946,3716,3717],{"align":932},"Height of the canvas used to draw the gradient.",[946,3719,3720],{},[514,3721,3722],{},"1024",[927,3724,3725,3729,3732],{},[946,3726,3727],{"align":932},[514,3728,2872],{},[946,3730,3731],{"align":932},"Width of the canvas used to draw the gradient.",[946,3733,3734],{},[514,3735,2798],{},[927,3737,3738,3743,3749],{},[946,3739,3740],{"align":932},[514,3741,3742],{},"type",[946,3744,3745,3748],{"align":932},[514,3746,3747],{},"'linear' | 'radial'"," Type of gradient to draw.",[946,3750,3751],{},[514,3752,3753],{},"'linear'",[927,3755,3756,3761,3764],{},[946,3757,3758],{"align":932},[514,3759,3760],{},"innerCircleRadius",[946,3762,3763],{"align":932},"Radius of the inner circle of a radial gradient.",[946,3765,3766],{},[514,3767,1111],{},[927,3769,3770,3775,3778],{},[946,3771,3772],{"align":932},[514,3773,3774],{},"outerCircleRadius",[946,3776,3777],{"align":932},"Radius of the outer circle of a radial gradient.",[946,3779,3780],{},[514,3781,3782],{},"'auto'",[1532,3784,2039],{},{"title":484,"searchDepth":485,"depth":486,"links":3786},[3787,3788],{"id":542,"depth":486,"text":15},{"id":918,"depth":486,"text":919},"Create gradient textures for materials.",{},{"title":413,"description":3789},"vYfm15fEwNZgRGLtXSYlU49KPYrI7wEBqbJQsM4JeNo",{"id":3794,"title":417,"body":3795,"description":9907,"extension":489,"links":490,"meta":9908,"navigation":492,"path":418,"seo":9909,"stem":419,"__hash__":9910},"docs/2.api/9.objects/html.md",{"type":473,"value":3796,"toc":9888},[3797,3800,3814,3819,3821,4291,4295,4302,4307,4323,4331,4336,4481,4487,4491,4515,4520,4650,4654,4678,4681,4705,4723,4744,4749,4914,4918,4923,4947,4959,4964,6927,6931,6955,6976,7017,7022,7037,7051,7092,7099,7123,7142,7147,8769,8775,8781,8786,8987,9004,9006,9369,9371,9391,9395,9477,9481,9659,9864,9867,9885],[476,3798,3799],{},"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.",[476,3801,3802,3803,3667,3806,3809,3810,3813],{},"🚀 Works seamlessly with both ",[2868,3804,3805],{},"PerspectiveCamera",[2868,3807,3808],{},"OrthographicCamera"," — the active camera is automatically detected by the ",[514,3811,3812],{},"\u003CHtml>"," component.",[2053,3815,3816],{},[3817,3818],"objects-html",{},[540,3820,15],{"id":542},[544,3822,3825],{"className":546,"code":3823,"highlights":3824,"language":554,"meta":484,"style":484},"\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",[486,552,553,769,779,789,1882],[514,3826,3827,3847,3871,3889,3897,3901,3909,3929,3961,3969,4001,4009,4017,4025,4031,4037,4053,4081,4110,4115,4144,4153,4161,4169,4177,4185,4193,4204,4212,4229,4243,4255,4267,4279,4283],{"__ignoreMap":484},[558,3828,3829,3831,3833,3835,3837,3839,3841,3843,3845],{"class":560,"line":485},[558,3830,564],{"class":563},[558,3832,568],{"class":567},[558,3834,572],{"class":571},[558,3836,575],{"class":571},[558,3838,578],{"class":563},[558,3840,581],{"class":563},[558,3842,585],{"class":584},[558,3844,581],{"class":563},[558,3846,590],{"class":563},[558,3848,3850,3852,3854,3857,3859,3861,3863,3865,3867,3869],{"class":3849,"line":486},[560,594],[558,3851,598],{"class":597},[558,3853,601],{"class":563},[558,3855,3856],{"class":604}," Html",[558,3858,1620],{"class":563},[558,3860,1623],{"class":604},[558,3862,608],{"class":563},[558,3864,611],{"class":597},[558,3866,614],{"class":563},[558,3868,617],{"class":584},[558,3870,620],{"class":563},[558,3872,3873,3875,3877,3879,3881,3883,3885,3887],{"class":560,"line":623},[558,3874,598],{"class":597},[558,3876,601],{"class":563},[558,3878,2155],{"class":604},[558,3880,608],{"class":563},[558,3882,611],{"class":597},[558,3884,614],{"class":563},[558,3886,2144],{"class":584},[558,3888,620],{"class":563},[558,3890,3891,3893,3895],{"class":560,"line":629},[558,3892,661],{"class":563},[558,3894,568],{"class":567},[558,3896,590],{"class":563},[558,3898,3899],{"class":560,"line":658},[558,3900,626],{"emptyLinePlaceholder":492},[558,3902,3903,3905,3907],{"class":560,"line":668},[558,3904,564],{"class":563},[558,3906,678],{"class":567},[558,3908,590],{"class":563},[558,3910,3911,3913,3915,3918,3920,3922,3925,3927],{"class":560,"line":673},[558,3912,686],{"class":563},[558,3914,689],{"class":567},[558,3916,3917],{"class":571}," clear-color",[558,3919,578],{"class":563},[558,3921,581],{"class":563},[558,3923,3924],{"class":584},"#82DBC5",[558,3926,581],{"class":563},[558,3928,590],{"class":563},[558,3930,3931,3933,3935,3937,3939,3941,3943,3945,3947,3949,3951,3953,3955,3957,3959],{"class":560,"line":683},[558,3932,697],{"class":563},[558,3934,1668],{"class":567},[558,3936,1671],{"class":563},[558,3938,1674],{"class":571},[558,3940,578],{"class":563},[558,3942,581],{"class":563},[558,3944,1681],{"class":563},[558,3946,1690],{"class":1684},[558,3948,1687],{"class":563},[558,3950,1690],{"class":1684},[558,3952,1687],{"class":563},[558,3954,1695],{"class":1684},[558,3956,1698],{"class":563},[558,3958,581],{"class":563},[558,3960,1703],{"class":563},[558,3962,3963,3965,3967],{"class":560,"line":694},[558,3964,697],{"class":563},[558,3966,1710],{"class":567},[558,3968,1703],{"class":563},[558,3970,3971,3973,3975,3977,3979,3981,3983,3985,3987,3989,3991,3993,3995,3997,3999],{"class":560,"line":549},[558,3972,697],{"class":563},[558,3974,1760],{"class":567},[558,3976,1671],{"class":563},[558,3978,1674],{"class":571},[558,3980,578],{"class":563},[558,3982,581],{"class":563},[558,3984,1681],{"class":563},[558,3986,1784],{"class":1684},[558,3988,1687],{"class":563},[558,3990,1784],{"class":1684},[558,3992,1687],{"class":563},[558,3994,1784],{"class":1684},[558,3996,1698],{"class":563},[558,3998,581],{"class":563},[558,4000,590],{"class":563},[558,4002,4003,4005,4007],{"class":560,"line":550},[558,4004,708],{"class":563},[558,4006,2609],{"class":567},[558,4008,1703],{"class":563},[558,4010,4011,4013,4015],{"class":560,"line":551},[558,4012,708],{"class":563},[558,4014,2817],{"class":567},[558,4016,1703],{"class":563},[558,4018,4020,4022],{"class":4019,"line":552},[560,594],[558,4021,708],{"class":563},[558,4023,4024],{"class":567},"Html\n",[558,4026,4028],{"class":4027,"line":553},[560,594],[558,4029,4030],{"class":571},"        center\n",[558,4032,4034],{"class":4033,"line":769},[560,594],[558,4035,4036],{"class":571},"        transform\n",[558,4038,4040,4042,4045,4047,4049,4051],{"class":4039,"line":779},[560,594],[558,4041,748],{"class":563},[558,4043,4044],{"class":571},"distance-factor",[558,4046,578],{"class":563},[558,4048,581],{"class":563},[558,4050,1908],{"class":1684},[558,4052,727],{"class":563},[558,4054,4056,4058,4060,4062,4064,4066,4068,4070,4072,4074,4077,4079],{"class":4055,"line":789},[560,594],[558,4057,748],{"class":563},[558,4059,1674],{"class":571},[558,4061,578],{"class":563},[558,4063,581],{"class":563},[558,4065,1681],{"class":563},[558,4067,1111],{"class":1684},[558,4069,1687],{"class":563},[558,4071,1111],{"class":1684},[558,4073,1687],{"class":563},[558,4075,4076],{"class":1684},"0.65",[558,4078,1698],{"class":563},[558,4080,727],{"class":563},[558,4082,4084,4086,4089,4091,4093,4095,4098,4100,4102,4104,4106,4108],{"class":4083,"line":1882},[560,594],[558,4085,748],{"class":563},[558,4087,4088],{"class":571},"scale",[558,4090,578],{"class":563},[558,4092,581],{"class":563},[558,4094,1681],{"class":563},[558,4096,4097],{"class":1684},"0.75",[558,4099,1687],{"class":563},[558,4101,4097],{"class":1684},[558,4103,1687],{"class":563},[558,4105,4097],{"class":1684},[558,4107,1698],{"class":563},[558,4109,727],{"class":563},[558,4111,4112],{"class":560,"line":1917},[558,4113,4114],{"class":563},"      >\n",[558,4116,4117,4119,4122,4124,4126,4128,4131,4133,4135,4138,4140,4142],{"class":560,"line":1926},[558,4118,1767],{"class":563},[558,4120,4121],{"class":567},"h1",[558,4123,2943],{"class":571},[558,4125,578],{"class":563},[558,4127,581],{"class":563},[558,4129,4130],{"class":584},"title",[558,4132,581],{"class":563},[558,4134,2213],{"class":563},[558,4136,4137],{"class":604},"I'm a Box 📦",[558,4139,661],{"class":563},[558,4141,4121],{"class":567},[558,4143,590],{"class":563},[558,4145,4146,4148,4151],{"class":560,"line":2485},[558,4147,1839],{"class":563},[558,4149,4150],{"class":567},"Html",[558,4152,590],{"class":563},[558,4154,4155,4157,4159],{"class":560,"line":2490},[558,4156,772],{"class":563},[558,4158,1760],{"class":567},[558,4160,590],{"class":563},[558,4162,4163,4165,4167],{"class":560,"line":2074},[558,4164,697],{"class":563},[558,4166,2495],{"class":567},[558,4168,1703],{"class":563},[558,4170,4171,4173,4175],{"class":560,"line":2075},[558,4172,697],{"class":563},[558,4174,1863],{"class":567},[558,4176,1703],{"class":563},[558,4178,4179,4181,4183],{"class":560,"line":2076},[558,4180,782],{"class":563},[558,4182,689],{"class":567},[558,4184,590],{"class":563},[558,4186,4187,4189,4191],{"class":560,"line":2077},[558,4188,661],{"class":563},[558,4190,678],{"class":567},[558,4192,590],{"class":563},[558,4194,4195,4197,4199,4202],{"class":560,"line":2589},[558,4196,564],{"class":563},[558,4198,1532],{"class":567},[558,4200,4201],{"class":571}," scoped",[558,4203,590],{"class":563},[558,4205,4206,4208,4210],{"class":560,"line":2595},[558,4207,807],{"class":563},[558,4209,4130],{"class":2204},[558,4211,2294],{"class":563},[558,4213,4214,4218,4220,4223,4226],{"class":560,"line":2604},[558,4215,4217],{"class":4216},"sqsOY","  background-color",[558,4219,2285],{"class":563},[558,4221,4222],{"class":563}," #",[558,4224,4225],{"class":604},"1e1e1e",[558,4227,4228],{"class":563},";\n",[558,4230,4231,4234,4236,4238,4241],{"class":560,"line":2638},[558,4232,4233],{"class":4216},"  color",[558,4235,2285],{"class":563},[558,4237,4222],{"class":563},[558,4239,4240],{"class":604},"ffffff",[558,4242,4228],{"class":563},[558,4244,4245,4248,4250,4253],{"class":560,"line":2643},[558,4246,4247],{"class":4216},"  font-size",[558,4249,2285],{"class":563},[558,4251,4252],{"class":1684}," 0.75rem",[558,4254,4228],{"class":563},[558,4256,4257,4260,4262,4265],{"class":560,"line":2651},[558,4258,4259],{"class":4216},"  padding",[558,4261,2285],{"class":563},[558,4263,4264],{"class":1684}," 0.25rem",[558,4266,4228],{"class":563},[558,4268,4269,4272,4274,4277],{"class":560,"line":2668},[558,4270,4271],{"class":4216},"  border-radius",[558,4273,2285],{"class":563},[558,4275,4276],{"class":1684}," 0.375rem",[558,4278,4228],{"class":563},[558,4280,4281],{"class":560,"line":2698},[558,4282,2386],{"class":563},[558,4284,4285,4287,4289],{"class":560,"line":2703},[558,4286,661],{"class":563},[558,4288,1532],{"class":567},[558,4290,590],{"class":563},[540,4292,4294],{"id":4293},"occlusion","Occlusion",[476,4296,4297,4298,4301],{},"By default, the HTML content will be visible through other objects in the scene. You can use the ",[514,4299,4300],{},"occlude"," prop to make the HTML content occlude other objects in the scene.",[476,4303,4304,4305,1396],{},"Html can be hidden behind one or more objects in your scene using the ",[514,4306,4300],{},[544,4308,4310],{"className":546,"code":4309,"language":554,"meta":484,"style":484},"\u003CHtml occlude>\n",[514,4311,4312],{"__ignoreMap":484},[558,4313,4314,4316,4318,4321],{"class":560,"line":485},[558,4315,564],{"class":563},[558,4317,4150],{"class":567},[558,4319,4320],{"class":571}," occlude",[558,4322,590],{"class":563},[476,4324,971,4325,4327,4328,4330],{},[514,4326,4300],{},", then ",[514,4329,3812],{}," will be hidden by any objects that pass in front of its position.",[2053,4332,4333],{},[4334,4335],"objects-html-occlusion",{},[4337,4338,4339,4340,4344],"details",{},"\n  ",[4341,4342,4343],"summary",{},"Demo code",[544,4345,4349],{"className":4346,"code":4347,"language":4348,"meta":484,"style":484},"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",[514,4350,4351,4371,4379,4387,4437,4465,4473],{"__ignoreMap":484},[558,4352,4353,4355,4357,4360,4362,4364,4367,4369],{"class":560,"line":485},[558,4354,564],{"class":563},[558,4356,1760],{"class":567},[558,4358,4359],{"class":571}," :position",[558,4361,578],{"class":563},[558,4363,581],{"class":563},[558,4365,4366],{"class":584},"[0, 1, -2]",[558,4368,581],{"class":563},[558,4370,590],{"class":563},[558,4372,4373,4375,4377],{"class":560,"line":486},[558,4374,686],{"class":563},[558,4376,2609],{"class":567},[558,4378,1703],{"class":563},[558,4380,4381,4383,4385],{"class":560,"line":623},[558,4382,686],{"class":563},[558,4384,2817],{"class":567},[558,4386,1703],{"class":563},[558,4388,4389,4391,4393,4396,4399,4401,4404,4406,4408,4410,4412,4414,4416,4418,4421,4423,4426,4428,4430,4433,4435],{"class":560,"line":629},[558,4390,686],{"class":563},[558,4392,4348],{"class":567},[558,4394,4395],{"class":571}," center",[558,4397,4398],{"class":571}," transform",[558,4400,4320],{"class":571},[558,4402,4403],{"class":571}," :distance-factor",[558,4405,578],{"class":563},[558,4407,581],{"class":563},[558,4409,1908],{"class":584},[558,4411,581],{"class":563},[558,4413,4359],{"class":571},[558,4415,578],{"class":563},[558,4417,581],{"class":563},[558,4419,4420],{"class":584},"[0, 0, 2]",[558,4422,581],{"class":563},[558,4424,4425],{"class":571}," :z-index-range",[558,4427,578],{"class":563},[558,4429,581],{"class":563},[558,4431,4432],{"class":584},"[28, 0]",[558,4434,581],{"class":563},[558,4436,590],{"class":563},[558,4438,4439,4441,4443,4445,4447,4449,4452,4454,4456,4459,4461,4463],{"class":560,"line":658},[558,4440,697],{"class":563},[558,4442,4121],{"class":567},[558,4444,2943],{"class":571},[558,4446,578],{"class":563},[558,4448,581],{"class":563},[558,4450,4451],{"class":584},"bg-white dark:bg-dark text-xs p-1 rounded",[558,4453,581],{"class":563},[558,4455,2213],{"class":563},[558,4457,4458],{"class":604},"Move camera",[558,4460,661],{"class":563},[558,4462,4121],{"class":567},[558,4464,590],{"class":563},[558,4466,4467,4469,4471],{"class":560,"line":668},[558,4468,782],{"class":563},[558,4470,4348],{"class":567},[558,4472,590],{"class":563},[558,4474,4475,4477,4479],{"class":560,"line":673},[558,4476,661],{"class":563},[558,4478,1760],{"class":567},[558,4480,590],{"class":563},[476,4482,4483,4484,4486],{},"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 ",[514,4485,4300],{}," prop:",[885,4488,4490],{"id":4489},"single-occluder","Single occluder",[544,4492,4494],{"className":546,"code":4493,"language":554,"meta":484,"style":484},"\u003CHtml occlude=\"[mesh]\">\n",[514,4495,4496],{"__ignoreMap":484},[558,4497,4498,4500,4502,4504,4506,4508,4511,4513],{"class":560,"line":485},[558,4499,564],{"class":563},[558,4501,4150],{"class":567},[558,4503,4320],{"class":571},[558,4505,578],{"class":563},[558,4507,581],{"class":563},[558,4509,4510],{"class":584},"[mesh]",[558,4512,581],{"class":563},[558,4514,590],{"class":563},[2053,4516,4517],{},[4518,4519],"objects-html-single-occluder",{},[4337,4521,4339,4522,4524],{},[4341,4523,4343],{},[544,4525,4527],{"className":4346,"code":4526,"language":4348,"meta":484,"style":484},"\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",[514,4528,4529,4548,4556,4564,4608,4634,4642],{"__ignoreMap":484},[558,4530,4531,4533,4535,4537,4539,4541,4544,4546],{"class":560,"line":485},[558,4532,564],{"class":563},[558,4534,1760],{"class":567},[558,4536,4359],{"class":571},[558,4538,578],{"class":563},[558,4540,581],{"class":563},[558,4542,4543],{"class":584},"[0, 1, 0]",[558,4545,581],{"class":563},[558,4547,590],{"class":563},[558,4549,4550,4552,4554],{"class":560,"line":486},[558,4551,686],{"class":563},[558,4553,2609],{"class":567},[558,4555,1703],{"class":563},[558,4557,4558,4560,4562],{"class":560,"line":623},[558,4559,686],{"class":563},[558,4561,2817],{"class":567},[558,4563,1703],{"class":563},[558,4565,4566,4568,4570,4572,4574,4577,4579,4581,4584,4586,4588,4590,4592,4594,4596,4598,4600,4602,4604,4606],{"class":560,"line":629},[558,4567,686],{"class":563},[558,4569,4348],{"class":567},[558,4571,4395],{"class":571},[558,4573,4398],{"class":571},[558,4575,4576],{"class":571}," :occlude",[558,4578,578],{"class":563},[558,4580,581],{"class":563},[558,4582,4583],{"class":584},"[sphereRef]",[558,4585,581],{"class":563},[558,4587,4403],{"class":571},[558,4589,578],{"class":563},[558,4591,581],{"class":563},[558,4593,1908],{"class":584},[558,4595,581],{"class":563},[558,4597,4425],{"class":571},[558,4599,578],{"class":563},[558,4601,581],{"class":563},[558,4603,4432],{"class":584},[558,4605,581],{"class":563},[558,4607,590],{"class":563},[558,4609,4610,4612,4614,4616,4618,4620,4622,4624,4626,4628,4630,4632],{"class":560,"line":658},[558,4611,697],{"class":563},[558,4613,4121],{"class":567},[558,4615,2943],{"class":571},[558,4617,578],{"class":563},[558,4619,581],{"class":563},[558,4621,4451],{"class":584},[558,4623,581],{"class":563},[558,4625,2213],{"class":563},[558,4627,4458],{"class":604},[558,4629,661],{"class":563},[558,4631,4121],{"class":567},[558,4633,590],{"class":563},[558,4635,4636,4638,4640],{"class":560,"line":668},[558,4637,782],{"class":563},[558,4639,4348],{"class":567},[558,4641,590],{"class":563},[558,4643,4644,4646,4648],{"class":560,"line":673},[558,4645,661],{"class":563},[558,4647,1760],{"class":567},[558,4649,590],{"class":563},[885,4651,4653],{"id":4652},"multiple-occluders","Multiple occluders",[544,4655,4657],{"className":546,"code":4656,"language":554,"meta":484,"style":484},"\u003CHtml occlude=\"[mesh1, mesh2, mesh3, ...]\" />\n",[514,4658,4659],{"__ignoreMap":484},[558,4660,4661,4663,4665,4667,4669,4671,4674,4676],{"class":560,"line":485},[558,4662,564],{"class":563},[558,4664,4150],{"class":567},[558,4666,4320],{"class":571},[558,4668,578],{"class":563},[558,4670,581],{"class":563},[558,4672,4673],{"class":584},"[mesh1, mesh2, mesh3, ...]",[558,4675,581],{"class":563},[558,4677,1703],{"class":563},[476,4679,4680],{},"OR",[544,4682,4684],{"className":546,"code":4683,"language":554,"meta":484,"style":484},"\u003CHtml occlude=\"meshesArray\" />\n",[514,4685,4686],{"__ignoreMap":484},[558,4687,4688,4690,4692,4694,4696,4698,4701,4703],{"class":560,"line":485},[558,4689,564],{"class":563},[558,4691,4150],{"class":567},[558,4693,4320],{"class":571},[558,4695,578],{"class":563},[558,4697,581],{"class":563},[558,4699,4700],{"class":584},"meshesArray",[558,4702,581],{"class":563},[558,4704,1703],{"class":563},[476,4706,4707,4708,4711,4712,4717,4718,4722],{},"In the demo below, a ",[514,4709,4710],{},"v-for"," loop generates multiple spheres around the cube.\nAll resulting ",[2868,4713,4714],{},[514,4715,4716],{},"Mesh"," instances are collected into an array and passed to the ",[2868,4719,4720],{},[514,4721,4300],{}," prop, allowing each sphere to occlude the HTML content.",[476,4724,4725,4726,4731,4732,4735,4736,3667,4740,4743],{},"This demo also uses the ",[2868,4727,4728],{},[514,4729,4730],{},"on-occlude"," event, which is triggered whenever the occlusion state changes.\nHere, the event updates a ",[2868,4733,4734],{},"reactive value"," to control element styles — for example, toggling between ",[4737,4738,4739],"em",{},"light",[4737,4741,4742],{},"dark"," themes.",[2053,4745,4746],{},[4747,4748],"objects-html-occlude-complex-demo",{},[4337,4750,4339,4751,4753],{},[4341,4752,4343],{},[544,4754,4756],{"className":4346,"code":4755,"language":4348,"meta":484,"style":484},"\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",[514,4757,4758,4776,4784,4792,4799,4813,4827,4840,4853,4867,4872,4898,4906],{"__ignoreMap":484},[558,4759,4760,4762,4764,4766,4768,4770,4772,4774],{"class":560,"line":485},[558,4761,564],{"class":563},[558,4763,1760],{"class":567},[558,4765,4359],{"class":571},[558,4767,578],{"class":563},[558,4769,581],{"class":563},[558,4771,4543],{"class":584},[558,4773,581],{"class":563},[558,4775,590],{"class":563},[558,4777,4778,4780,4782],{"class":560,"line":486},[558,4779,686],{"class":563},[558,4781,2609],{"class":567},[558,4783,1703],{"class":563},[558,4785,4786,4788,4790],{"class":560,"line":623},[558,4787,686],{"class":563},[558,4789,2817],{"class":567},[558,4791,1703],{"class":563},[558,4793,4794,4796],{"class":560,"line":629},[558,4795,686],{"class":563},[558,4797,4798],{"class":567},"html\n",[558,4800,4801,4804,4806,4808,4811],{"class":560,"line":658},[558,4802,4803],{"class":571},"    v-bind",[558,4805,578],{"class":563},[558,4807,581],{"class":563},[558,4809,4810],{"class":584},"htmlProps",[558,4812,727],{"class":563},[558,4814,4815,4818,4820,4822,4825],{"class":560,"line":668},[558,4816,4817],{"class":571},"    :occlude",[558,4819,578],{"class":563},[558,4821,581],{"class":563},[558,4823,4824],{"class":584},"occluderRefs",[558,4826,727],{"class":563},[558,4828,4829,4832,4834,4836,4838],{"class":560,"line":673},[558,4830,4831],{"class":571},"    :distance-factor",[558,4833,578],{"class":563},[558,4835,581],{"class":563},[558,4837,1908],{"class":584},[558,4839,727],{"class":563},[558,4841,4842,4845,4847,4849,4851],{"class":560,"line":683},[558,4843,4844],{"class":571},"    :z-index-range",[558,4846,578],{"class":563},[558,4848,581],{"class":563},[558,4850,4432],{"class":584},[558,4852,727],{"class":563},[558,4854,4855,4858,4860,4862,4865],{"class":560,"line":694},[558,4856,4857],{"class":571},"    @on-occlude",[558,4859,578],{"class":563},[558,4861,581],{"class":563},[558,4863,4864],{"class":584},"(event: boolean) => isOccluded = event",[558,4866,727],{"class":563},[558,4868,4869],{"class":560,"line":549},[558,4870,4871],{"class":563},"  >\n",[558,4873,4874,4876,4878,4880,4882,4884,4886,4888,4890,4892,4894,4896],{"class":560,"line":550},[558,4875,697],{"class":563},[558,4877,4121],{"class":567},[558,4879,2943],{"class":571},[558,4881,578],{"class":563},[558,4883,581],{"class":563},[558,4885,4451],{"class":584},[558,4887,581],{"class":563},[558,4889,2213],{"class":563},[558,4891,4458],{"class":604},[558,4893,661],{"class":563},[558,4895,4121],{"class":567},[558,4897,590],{"class":563},[558,4899,4900,4902,4904],{"class":560,"line":551},[558,4901,782],{"class":563},[558,4903,4348],{"class":567},[558,4905,590],{"class":563},[558,4907,4908,4910,4912],{"class":560,"line":552},[558,4909,661],{"class":563},[558,4911,1760],{"class":567},[558,4913,590],{"class":563},[885,4915,4917],{"id":4916},"blending-occlusion","Blending Occlusion",[476,4919,4920,4922],{},[514,4921,3812],{}," 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.",[544,4924,4926],{"className":546,"code":4925,"language":554,"meta":484,"style":484},"\u003CHtml occlude=\"blending\">\n",[514,4927,4928],{"__ignoreMap":484},[558,4929,4930,4932,4934,4936,4938,4940,4943,4945],{"class":560,"line":485},[558,4931,564],{"class":563},[558,4933,4150],{"class":567},[558,4935,4320],{"class":571},[558,4937,578],{"class":563},[558,4939,581],{"class":563},[558,4941,4942],{"class":584},"blending",[558,4944,581],{"class":563},[558,4946,590],{"class":563},[476,4948,1349,4949,909,4952,4955,4956,807],{},[2868,4950,4951],{},"demo below ⬇️",[4737,4953,4954],{},"(left black example)"," shows a ",[2868,4957,4958],{},"basic usage example",[2053,4960,4961],{},[4962,4963],"objects-html-occlude-blending-demo",{},[4337,4965,4339,4966,4968],{},[4341,4967,4343],{},[544,4969,5016],{"className":546,"code":4970,"highlights":4971,"language":554,"meta":484,"style":484},"\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",[486,2651,2698,2703,2712,2717,2725,2738,4972,4973,4974,4975,4976,4977,4978,4979,4980,4981,4982,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,5012,5013,5014,5015],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,[514,5017,5018,5038,5066,5084,5102,5127,5131,5142,5157,5168,5179,5190,5194,5198,5215,5219,5231,5236,5251,5275,5279,5283,5297,5321,5325,5329,5343,5372,5400,5404,5409,5413,5444,5448,5470,5486,5499,5511,5523,5530,5538,5542,5550,5570,5590,5624,5633,5638,5646,5674,5698,5714,5731,5747,5773,5778,5836,5880,5889,5899,5909,5914,5921,5926,5931,5945,5974,5999,6004,6024,6036,6054,6063,6072,6077,6084,6089,6094,6107,6135,6151,6174,6179,6199,6237,6246,6255,6260,6267,6282,6287,6292,6305,6333,6350,6356,6379,6384,6442,6451,6456,6463,6468,6473,6486,6514,6537,6542,6562,6586,6607,6616,6625,6630,6638,6656,6676,6693,6720,6735,6741,6746,6751,6776,6797,6806,6815,6824,6829,6840,6850,6862,6873,6886,6899,6913,6918],{"__ignoreMap":484},[558,5019,5020,5022,5024,5026,5028,5030,5032,5034,5036],{"class":560,"line":485},[558,5021,564],{"class":563},[558,5023,568],{"class":567},[558,5025,572],{"class":571},[558,5027,575],{"class":571},[558,5029,578],{"class":563},[558,5031,581],{"class":563},[558,5033,585],{"class":584},[558,5035,581],{"class":563},[558,5037,590],{"class":563},[558,5039,5041,5043,5045,5047,5049,5052,5054,5056,5058,5060,5062,5064],{"class":5040,"line":486},[560,594],[558,5042,598],{"class":597},[558,5044,601],{"class":563},[558,5046,3856],{"class":604},[558,5048,1620],{"class":563},[558,5050,5051],{"class":604}," Levioso",[558,5053,1620],{"class":563},[558,5055,1623],{"class":604},[558,5057,608],{"class":563},[558,5059,611],{"class":597},[558,5061,614],{"class":563},[558,5063,617],{"class":584},[558,5065,620],{"class":563},[558,5067,5068,5070,5072,5074,5076,5078,5080,5082],{"class":560,"line":623},[558,5069,598],{"class":597},[558,5071,601],{"class":563},[558,5073,2155],{"class":604},[558,5075,608],{"class":563},[558,5077,611],{"class":597},[558,5079,614],{"class":563},[558,5081,2144],{"class":584},[558,5083,620],{"class":563},[558,5085,5086,5088,5090,5092,5094,5096,5098,5100],{"class":560,"line":629},[558,5087,598],{"class":597},[558,5089,601],{"class":563},[558,5091,2174],{"class":604},[558,5093,608],{"class":563},[558,5095,611],{"class":597},[558,5097,614],{"class":563},[558,5099,554],{"class":584},[558,5101,620],{"class":563},[558,5103,5104,5106,5108,5111,5113,5116,5118,5120,5122,5125],{"class":560,"line":658},[558,5105,598],{"class":597},[558,5107,601],{"class":563},[558,5109,5110],{"class":604}," CircleGeometry",[558,5112,1620],{"class":563},[558,5114,5115],{"class":604}," MeshStandardMaterial",[558,5117,608],{"class":563},[558,5119,611],{"class":597},[558,5121,614],{"class":563},[558,5123,5124],{"class":584},"three",[558,5126,620],{"class":563},[558,5128,5129],{"class":560,"line":668},[558,5130,626],{"emptyLinePlaceholder":492},[558,5132,5133,5135,5138,5140],{"class":560,"line":673},[558,5134,632],{"class":571},[558,5136,5137],{"class":604}," gl ",[558,5139,578],{"class":563},[558,5141,2294],{"class":563},[558,5143,5144,5147,5149,5151,5153,5155],{"class":560,"line":683},[558,5145,5146],{"class":567},"  clearColor",[558,5148,2285],{"class":563},[558,5150,614],{"class":563},[558,5152,3924],{"class":584},[558,5154,647],{"class":563},[558,5156,3069],{"class":563},[558,5158,5159,5162,5164,5166],{"class":560,"line":694},[558,5160,5161],{"class":567},"  clearAlpha",[558,5163,2285],{"class":563},[558,5165,3115],{"class":1684},[558,5167,3069],{"class":563},[558,5169,5170,5173,5175,5177],{"class":560,"line":549},[558,5171,5172],{"class":567},"  shadows",[558,5174,2285],{"class":563},[558,5176,3066],{"class":2557},[558,5178,3069],{"class":563},[558,5180,5181,5184,5186,5188],{"class":560,"line":550},[558,5182,5183],{"class":567},"  alpha",[558,5185,2285],{"class":563},[558,5187,3066],{"class":2557},[558,5189,3069],{"class":563},[558,5191,5192],{"class":560,"line":551},[558,5193,2386],{"class":563},[558,5195,5196],{"class":560,"line":552},[558,5197,626],{"emptyLinePlaceholder":492},[558,5199,5200,5202,5205,5207,5209,5211,5213],{"class":560,"line":553},[558,5201,632],{"class":571},[558,5203,5204],{"class":604}," targetDirectionLightRef ",[558,5206,578],{"class":563},[558,5208,2174],{"class":640},[558,5210,644],{"class":604},[558,5212,2226],{"class":563},[558,5214,655],{"class":604},[558,5216,5217],{"class":560,"line":769},[558,5218,626],{"emptyLinePlaceholder":492},[558,5220,5221,5223,5226,5228],{"class":560,"line":779},[558,5222,632],{"class":571},[558,5224,5225],{"class":604}," geometries ",[558,5227,578],{"class":563},[558,5229,5230],{"class":604}," [\n",[558,5232,5233],{"class":560,"line":789},[558,5234,5235],{"class":563},"  {\n",[558,5237,5238,5241,5243,5245,5247,5249],{"class":560,"line":1882},[558,5239,5240],{"class":567},"    component",[558,5242,2285],{"class":563},[558,5244,614],{"class":563},[558,5246,2609],{"class":584},[558,5248,647],{"class":563},[558,5250,3069],{"class":563},[558,5252,5253,5256,5258,5261,5263,5265,5267,5269,5271,5273],{"class":560,"line":1917},[558,5254,5255],{"class":567},"    args",[558,5257,2285],{"class":563},[558,5259,5260],{"class":604}," [",[558,5262,1784],{"class":1684},[558,5264,1620],{"class":563},[558,5266,3115],{"class":1684},[558,5268,1620],{"class":563},[558,5270,3115],{"class":1684},[558,5272,1698],{"class":604},[558,5274,3069],{"class":563},[558,5276,5277],{"class":560,"line":1926},[558,5278,3123],{"class":563},[558,5280,5281],{"class":560,"line":2485},[558,5282,5235],{"class":563},[558,5284,5285,5287,5289,5291,5293,5295],{"class":560,"line":2490},[558,5286,5240],{"class":567},[558,5288,2285],{"class":563},[558,5290,614],{"class":563},[558,5292,1770],{"class":584},[558,5294,647],{"class":563},[558,5296,3069],{"class":563},[558,5298,5299,5301,5303,5305,5308,5310,5313,5315,5317,5319],{"class":560,"line":2074},[558,5300,5255],{"class":567},[558,5302,2285],{"class":563},[558,5304,5260],{"class":604},[558,5306,5307],{"class":1684},"0.7",[558,5309,1620],{"class":563},[558,5311,5312],{"class":1684}," 32",[558,5314,1620],{"class":563},[558,5316,5312],{"class":1684},[558,5318,1698],{"class":604},[558,5320,3069],{"class":563},[558,5322,5323],{"class":560,"line":2075},[558,5324,3123],{"class":563},[558,5326,5327],{"class":560,"line":2076},[558,5328,5235],{"class":563},[558,5330,5331,5333,5335,5337,5339,5341],{"class":560,"line":2077},[558,5332,5240],{"class":567},[558,5334,2285],{"class":563},[558,5336,614],{"class":563},[558,5338,2777],{"class":584},[558,5340,647],{"class":563},[558,5342,3069],{"class":563},[558,5344,5345,5347,5349,5351,5353,5355,5358,5360,5363,5365,5368,5370],{"class":560,"line":2589},[558,5346,5255],{"class":567},[558,5348,2285],{"class":563},[558,5350,5260],{"class":604},[558,5352,1875],{"class":1684},[558,5354,1620],{"class":563},[558,5356,5357],{"class":1684}," 0.2",[558,5359,1620],{"class":563},[558,5361,5362],{"class":1684}," 16",[558,5364,1620],{"class":563},[558,5366,5367],{"class":1684}," 100",[558,5369,1698],{"class":604},[558,5371,3069],{"class":563},[558,5373,5374,5377,5379,5381,5384,5386,5388,5390,5393,5395,5397],{"class":560,"line":2595},[558,5375,5376],{"class":567},"    bind",[558,5378,2285],{"class":563},[558,5380,601],{"class":563},[558,5382,5383],{"class":567}," castShadow",[558,5385,2285],{"class":563},[558,5387,3066],{"class":2557},[558,5389,1620],{"class":563},[558,5391,5392],{"class":567}," receiveShadow",[558,5394,2285],{"class":563},[558,5396,3066],{"class":2557},[558,5398,5399],{"class":563}," },\n",[558,5401,5402],{"class":560,"line":2604},[558,5403,3123],{"class":563},[558,5405,5406],{"class":560,"line":2638},[558,5407,5408],{"class":604},"]\n",[558,5410,5411],{"class":560,"line":2643},[558,5412,626],{"emptyLinePlaceholder":492},[558,5414,5416,5418,5421,5423,5425,5427,5430,5432,5434,5437,5439,5441],{"class":5415,"line":2651},[560,594],[558,5417,632],{"class":571},[558,5419,5420],{"class":604}," customGeometry ",[558,5422,578],{"class":563},[558,5424,2174],{"class":640},[558,5426,644],{"class":604},[558,5428,5429],{"class":563},"new",[558,5431,5110],{"class":640},[558,5433,644],{"class":604},[558,5435,5436],{"class":1684},"1.25",[558,5438,1620],{"class":563},[558,5440,5312],{"class":1684},[558,5442,5443],{"class":604},"))\n",[558,5445,5446],{"class":560,"line":2668},[558,5447,626],{"emptyLinePlaceholder":492},[558,5449,5451,5453,5456,5458,5460,5462,5464,5466,5468],{"class":5450,"line":2698},[560,594],[558,5452,632],{"class":571},[558,5454,5455],{"class":604}," customMaterial ",[558,5457,578],{"class":563},[558,5459,2174],{"class":640},[558,5461,644],{"class":604},[558,5463,5429],{"class":563},[558,5465,5115],{"class":640},[558,5467,644],{"class":604},[558,5469,3055],{"class":563},[558,5471,5473,5475,5477,5479,5482,5484],{"class":5472,"line":2703},[560,594],[558,5474,4233],{"class":567},[558,5476,2285],{"class":563},[558,5478,614],{"class":563},[558,5480,5481],{"class":584},"red",[558,5483,647],{"class":563},[558,5485,3069],{"class":563},[558,5487,5489,5492,5494,5497],{"class":5488,"line":2712},[560,594],[558,5490,5491],{"class":567},"  side",[558,5493,2285],{"class":563},[558,5495,5496],{"class":1684}," 2",[558,5498,3069],{"class":563},[558,5500,5502,5505,5507,5509],{"class":5501,"line":2717},[560,594],[558,5503,5504],{"class":567},"  opacity",[558,5506,2285],{"class":563},[558,5508,3115],{"class":1684},[558,5510,3069],{"class":563},[558,5512,5514,5517,5519,5521],{"class":5513,"line":2725},[560,594],[558,5515,5516],{"class":567},"  transparent",[558,5518,2285],{"class":563},[558,5520,3066],{"class":2557},[558,5522,3069],{"class":563},[558,5524,5526,5528],{"class":5525,"line":2738},[560,594],[558,5527,3129],{"class":563},[558,5529,5443],{"class":604},[558,5531,5532,5534,5536],{"class":560,"line":2766},[558,5533,661],{"class":563},[558,5535,568],{"class":567},[558,5537,590],{"class":563},[558,5539,5540],{"class":560,"line":2772},[558,5541,626],{"emptyLinePlaceholder":492},[558,5543,5544,5546,5548],{"class":560,"line":2812},[558,5545,564],{"class":563},[558,5547,678],{"class":567},[558,5549,590],{"class":563},[558,5551,5552,5554,5557,5559,5561,5563,5566,5568],{"class":560,"line":2822},[558,5553,686],{"class":563},[558,5555,5556],{"class":567},"div",[558,5558,2943],{"class":571},[558,5560,578],{"class":563},[558,5562,581],{"class":563},[558,5564,5565],{"class":584},"html-demo-wrapper aspect-video",[558,5567,581],{"class":563},[558,5569,590],{"class":563},[558,5571,5572,5574,5576,5579,5581,5583,5586,5588],{"class":560,"line":2831},[558,5573,697],{"class":563},[558,5575,689],{"class":567},[558,5577,5578],{"class":571}," v-bind",[558,5580,578],{"class":563},[558,5582,581],{"class":563},[558,5584,5585],{"class":604},"gl",[558,5587,581],{"class":563},[558,5589,590],{"class":563},[558,5591,5592,5594,5596,5598,5600,5602,5604,5606,5608,5610,5613,5615,5618,5620,5622],{"class":560,"line":2840},[558,5593,708],{"class":563},[558,5595,1668],{"class":567},[558,5597,1671],{"class":563},[558,5599,1674],{"class":571},[558,5601,578],{"class":563},[558,5603,581],{"class":563},[558,5605,1681],{"class":563},[558,5607,1111],{"class":1684},[558,5609,1687],{"class":563},[558,5611,5612],{"class":1684},"1.5",[558,5614,1687],{"class":563},[558,5616,5617],{"class":1684},"7.5",[558,5619,1698],{"class":563},[558,5621,581],{"class":563},[558,5623,1703],{"class":563},[558,5625,5627,5629,5631],{"class":560,"line":5626},46,[558,5628,708],{"class":563},[558,5630,1710],{"class":567},[558,5632,1703],{"class":563},[558,5634,5636],{"class":560,"line":5635},47,[558,5637,626],{"emptyLinePlaceholder":492},[558,5639,5641,5643],{"class":560,"line":5640},48,[558,5642,708],{"class":563},[558,5644,5645],{"class":567},"Levioso\n",[558,5647,5649,5652,5654,5656,5658,5661,5663,5666,5669,5672],{"class":560,"line":5648},49,[558,5650,5651],{"class":597},"        v-for",[558,5653,578],{"class":563},[558,5655,581],{"class":563},[558,5657,644],{"class":563},[558,5659,5660],{"class":604},"geometry",[558,5662,1687],{"class":563},[558,5664,5665],{"class":604},"index",[558,5667,5668],{"class":563},") in ",[558,5670,5671],{"class":604},"geometries",[558,5673,727],{"class":563},[558,5675,5677,5679,5682,5684,5687,5690,5693,5695],{"class":560,"line":5676},50,[558,5678,748],{"class":563},[558,5680,5681],{"class":571},"key",[558,5683,578],{"class":563},[558,5685,5686],{"class":563},"\"`",[558,5688,5689],{"class":584},"html-occlude-blending-demo-",[558,5691,5692],{"class":563},"${",[558,5694,5665],{"class":604},[558,5696,5697],{"class":563},"}`\"\n",[558,5699,5701,5703,5706,5708,5710,5712],{"class":560,"line":5700},51,[558,5702,748],{"class":563},[558,5704,5705],{"class":571},"speed",[558,5707,578],{"class":563},[558,5709,581],{"class":563},[558,5711,2751],{"class":1684},[558,5713,727],{"class":563},[558,5715,5717,5719,5722,5724,5726,5729],{"class":560,"line":5716},52,[558,5718,748],{"class":563},[558,5720,5721],{"class":571},"float-factor",[558,5723,578],{"class":563},[558,5725,581],{"class":563},[558,5727,5728],{"class":1684},"3.5",[558,5730,727],{"class":563},[558,5732,5734,5736,5739,5741,5743,5745],{"class":560,"line":5733},53,[558,5735,748],{"class":563},[558,5737,5738],{"class":571},"rotation-factor",[558,5740,578],{"class":563},[558,5742,581],{"class":563},[558,5744,1784],{"class":1684},[558,5746,727],{"class":563},[558,5748,5750,5752,5755,5757,5759,5762,5765,5767,5769,5771],{"class":560,"line":5749},54,[558,5751,748],{"class":563},[558,5753,5754],{"class":571},"range",[558,5756,578],{"class":563},[558,5758,581],{"class":563},[558,5760,5761],{"class":563},"[-",[558,5763,5764],{"class":1684},"0.35",[558,5766,1687],{"class":563},[558,5768,5764],{"class":1684},[558,5770,1698],{"class":563},[558,5772,727],{"class":563},[558,5774,5776],{"class":560,"line":5775},55,[558,5777,4114],{"class":563},[558,5779,5781,5783,5785,5787,5789,5791,5793,5795,5797,5800,5802,5805,5807,5809,5811,5813,5815,5817,5819,5821,5823,5825,5827,5829,5832,5834],{"class":560,"line":5780},56,[558,5782,1767],{"class":563},[558,5784,1760],{"class":567},[558,5786,1671],{"class":563},[558,5788,1674],{"class":571},[558,5790,578],{"class":563},[558,5792,581],{"class":563},[558,5794,1681],{"class":563},[558,5796,5665],{"class":604},[558,5798,5799],{"class":563}," * ",[558,5801,5728],{"class":1684},[558,5803,5804],{"class":563}," - ",[558,5806,5728],{"class":1684},[558,5808,1687],{"class":563},[558,5810,1784],{"class":1684},[558,5812,1687],{"class":563},[558,5814,1111],{"class":1684},[558,5816,1698],{"class":563},[558,5818,581],{"class":563},[558,5820,5578],{"class":571},[558,5822,578],{"class":563},[558,5824,581],{"class":563},[558,5826,5660],{"class":604},[558,5828,807],{"class":563},[558,5830,5831],{"class":604},"bind",[558,5833,581],{"class":563},[558,5835,590],{"class":563},[558,5837,5839,5842,5845,5847,5850,5852,5854,5856,5858,5860,5862,5864,5866,5868,5870,5872,5874,5876,5878],{"class":560,"line":5838},57,[558,5840,5841],{"class":563},"          \u003C",[558,5843,5844],{"class":567},"component",[558,5846,1671],{"class":563},[558,5848,5849],{"class":571},"is",[558,5851,578],{"class":563},[558,5853,581],{"class":563},[558,5855,5660],{"class":604},[558,5857,807],{"class":563},[558,5859,5844],{"class":604},[558,5861,581],{"class":563},[558,5863,1671],{"class":563},[558,5865,1775],{"class":571},[558,5867,578],{"class":563},[558,5869,581],{"class":563},[558,5871,5660],{"class":604},[558,5873,807],{"class":563},[558,5875,1775],{"class":604},[558,5877,581],{"class":563},[558,5879,1703],{"class":563},[558,5881,5883,5885,5887],{"class":560,"line":5882},58,[558,5884,5841],{"class":563},[558,5886,2817],{"class":567},[558,5888,1703],{"class":563},[558,5890,5892,5895,5897],{"class":560,"line":5891},59,[558,5893,5894],{"class":563},"        \u003C/",[558,5896,1760],{"class":567},[558,5898,590],{"class":563},[558,5900,5902,5904,5907],{"class":560,"line":5901},60,[558,5903,1839],{"class":563},[558,5905,5906],{"class":567},"Levioso",[558,5908,590],{"class":563},[558,5910,5912],{"class":560,"line":5911},61,[558,5913,626],{"emptyLinePlaceholder":492},[558,5915,5917,5919],{"class":5916,"line":4972},[560,594],[558,5918,708],{"class":563},[558,5920,4024],{"class":567},[558,5922,5924],{"class":5923,"line":4973},[560,594],[558,5925,4030],{"class":571},[558,5927,5929],{"class":5928,"line":4974},[560,594],[558,5930,4036],{"class":571},[558,5932,5934,5937,5939,5941,5943],{"class":5933,"line":4975},[560,594],[558,5935,5936],{"class":571},"        occlude",[558,5938,578],{"class":563},[558,5940,581],{"class":563},[558,5942,4942],{"class":584},[558,5944,727],{"class":563},[558,5946,5948,5950,5952,5954,5956,5958,5960,5962,5965,5968,5970,5972],{"class":5947,"line":4976},[560,594],[558,5949,748],{"class":563},[558,5951,1674],{"class":571},[558,5953,578],{"class":563},[558,5955,581],{"class":563},[558,5957,5761],{"class":563},[558,5959,1908],{"class":1684},[558,5961,1687],{"class":563},[558,5963,5964],{"class":1684},".75",[558,5966,5967],{"class":563},", -",[558,5969,1690],{"class":1684},[558,5971,1698],{"class":563},[558,5973,727],{"class":563},[558,5975,5977,5979,5982,5984,5986,5988,5991,5993,5995,5997],{"class":5976,"line":4977},[560,594],[558,5978,748],{"class":563},[558,5980,5981],{"class":571},"z-index-range",[558,5983,578],{"class":563},[558,5985,581],{"class":563},[558,5987,1681],{"class":563},[558,5989,5990],{"class":1684},"28",[558,5992,1687],{"class":563},[558,5994,1111],{"class":1684},[558,5996,1698],{"class":563},[558,5998,727],{"class":563},[558,6000,6002],{"class":6001,"line":4978},[560,594],[558,6003,4114],{"class":563},[558,6005,6007,6009,6011,6013,6015,6017,6020,6022],{"class":6006,"line":4979},[560,594],[558,6008,1767],{"class":563},[558,6010,5556],{"class":567},[558,6012,2943],{"class":571},[558,6014,578],{"class":563},[558,6016,581],{"class":563},[558,6018,6019],{"class":584},"text-center text-s p-2 bg-[#1B1C1E] text-light",[558,6021,581],{"class":563},[558,6023,590],{"class":563},[558,6025,6027,6030,6032,6034],{"class":6026,"line":4980},[560,594],[558,6028,6029],{"class":604},"          BASIC 💛 ",[558,6031,564],{"class":563},[558,6033,904],{"class":567},[558,6035,1703],{"class":563},[558,6037,6039,6041,6043,6045,6048,6050,6052],{"class":6038,"line":4981},[560,594],[558,6040,5841],{"class":563},[558,6042,4737],{"class":567},[558,6044,2213],{"class":563},[558,6046,6047],{"class":604},"occlude=blending",[558,6049,661],{"class":563},[558,6051,4737],{"class":567},[558,6053,590],{"class":563},[558,6055,6057,6059,6061],{"class":6056,"line":4982},[560,594],[558,6058,5894],{"class":563},[558,6060,5556],{"class":567},[558,6062,590],{"class":563},[558,6064,6066,6068,6070],{"class":560,"line":6065},73,[558,6067,1839],{"class":563},[558,6069,4150],{"class":567},[558,6071,590],{"class":563},[558,6073,6075],{"class":6074,"line":4983},[560,594],[558,6076,626],{"emptyLinePlaceholder":492},[558,6078,6080,6082],{"class":6079,"line":4984},[560,594],[558,6081,708],{"class":563},[558,6083,4024],{"class":567},[558,6085,6087],{"class":6086,"line":4985},[560,594],[558,6088,4030],{"class":571},[558,6090,6092],{"class":6091,"line":4986},[560,594],[558,6093,4036],{"class":571},[558,6095,6097,6099,6101,6103,6105],{"class":6096,"line":4987},[560,594],[558,6098,5936],{"class":571},[558,6100,578],{"class":563},[558,6102,581],{"class":563},[558,6104,4942],{"class":584},[558,6106,727],{"class":563},[558,6108,6110,6112,6114,6116,6118,6120,6122,6124,6127,6129,6131,6133],{"class":6109,"line":4988},[560,594],[558,6111,748],{"class":563},[558,6113,1674],{"class":571},[558,6115,578],{"class":563},[558,6117,581],{"class":563},[558,6119,1681],{"class":563},[558,6121,1111],{"class":1684},[558,6123,1687],{"class":563},[558,6125,6126],{"class":1684},".85",[558,6128,5967],{"class":563},[558,6130,1690],{"class":1684},[558,6132,1698],{"class":563},[558,6134,727],{"class":563},[558,6136,6138,6140,6142,6144,6146,6149],{"class":6137,"line":4989},[560,594],[558,6139,748],{"class":563},[558,6141,5660],{"class":571},[558,6143,578],{"class":563},[558,6145,581],{"class":563},[558,6147,6148],{"class":604},"customGeometry",[558,6150,727],{"class":563},[558,6152,6154,6156,6158,6160,6162,6164,6166,6168,6170,6172],{"class":6153,"line":4990},[560,594],[558,6155,748],{"class":563},[558,6157,5981],{"class":571},[558,6159,578],{"class":563},[558,6161,581],{"class":563},[558,6163,1681],{"class":563},[558,6165,5990],{"class":1684},[558,6167,1687],{"class":563},[558,6169,1111],{"class":1684},[558,6171,1698],{"class":563},[558,6173,727],{"class":563},[558,6175,6177],{"class":6176,"line":4991},[560,594],[558,6178,4114],{"class":563},[558,6180,6182,6184,6186,6188,6190,6192,6195,6197],{"class":6181,"line":4992},[560,594],[558,6183,1767],{"class":563},[558,6185,5556],{"class":567},[558,6187,2943],{"class":571},[558,6189,578],{"class":563},[558,6191,581],{"class":563},[558,6193,6194],{"class":584},"text-xs p-8 text-center bg-[#F6B03B] text-dark",[558,6196,581],{"class":563},[558,6198,590],{"class":563},[558,6200,6202,6205,6207,6209,6212,6215,6217,6219,6222,6224,6226,6228,6231,6233,6235],{"class":6201,"line":4993},[560,594],[558,6203,6204],{"class":604},"          CUSTOM ",[558,6206,564],{"class":563},[558,6208,904],{"class":567},[558,6210,6211],{"class":563}," />",[558,6213,6214],{"class":563}," \u003C",[558,6216,2868],{"class":567},[558,6218,2213],{"class":563},[558,6220,6221],{"class":604},"CIRCLE ",[558,6223,564],{"class":563},[558,6225,904],{"class":567},[558,6227,6211],{"class":563},[558,6229,6230],{"class":604}," GEOMETRY",[558,6232,661],{"class":563},[558,6234,2868],{"class":567},[558,6236,590],{"class":563},[558,6238,6240,6242,6244],{"class":560,"line":6239},85,[558,6241,5894],{"class":563},[558,6243,5556],{"class":567},[558,6245,590],{"class":563},[558,6247,6249,6251,6253],{"class":6248,"line":4994},[560,594],[558,6250,1839],{"class":563},[558,6252,4150],{"class":567},[558,6254,590],{"class":563},[558,6256,6258],{"class":6257,"line":4995},[560,594],[558,6259,626],{"emptyLinePlaceholder":492},[558,6261,6263,6265],{"class":6262,"line":4996},[560,594],[558,6264,708],{"class":563},[558,6266,4024],{"class":567},[558,6268,6270,6273,6275,6277,6280],{"class":6269,"line":4997},[560,594],[558,6271,6272],{"class":571},"        ref",[558,6274,578],{"class":563},[558,6276,581],{"class":563},[558,6278,6279],{"class":584},"targetDirectionLightRef",[558,6281,727],{"class":563},[558,6283,6285],{"class":6284,"line":4998},[560,594],[558,6286,4030],{"class":571},[558,6288,6290],{"class":6289,"line":4999},[560,594],[558,6291,4036],{"class":571},[558,6293,6295,6297,6299,6301,6303],{"class":6294,"line":5000},[560,594],[558,6296,5936],{"class":571},[558,6298,578],{"class":563},[558,6300,581],{"class":563},[558,6302,4942],{"class":584},[558,6304,727],{"class":563},[558,6306,6308,6310,6312,6314,6316,6318,6320,6322,6325,6327,6329,6331],{"class":6307,"line":5001},[560,594],[558,6309,748],{"class":563},[558,6311,1674],{"class":571},[558,6313,578],{"class":563},[558,6315,581],{"class":563},[558,6317,1681],{"class":563},[558,6319,1908],{"class":1684},[558,6321,1687],{"class":563},[558,6323,6324],{"class":1684},".5",[558,6326,5967],{"class":563},[558,6328,1690],{"class":1684},[558,6330,1698],{"class":563},[558,6332,727],{"class":563},[558,6334,6336,6338,6341,6343,6345,6348],{"class":6335,"line":5002},[560,594],[558,6337,748],{"class":563},[558,6339,6340],{"class":571},"material",[558,6342,578],{"class":563},[558,6344,581],{"class":563},[558,6346,6347],{"class":604},"customMaterial",[558,6349,727],{"class":563},[558,6351,6353],{"class":6352,"line":5003},[560,594],[558,6354,6355],{"class":571},"        receive-shadow\n",[558,6357,6359,6361,6363,6365,6367,6369,6371,6373,6375,6377],{"class":6358,"line":5004},[560,594],[558,6360,748],{"class":563},[558,6362,5981],{"class":571},[558,6364,578],{"class":563},[558,6366,581],{"class":563},[558,6368,1681],{"class":563},[558,6370,5990],{"class":1684},[558,6372,1687],{"class":563},[558,6374,1111],{"class":1684},[558,6376,1698],{"class":563},[558,6378,727],{"class":563},[558,6380,6382],{"class":560,"line":6381},97,[558,6383,4114],{"class":563},[558,6385,6387,6389,6391,6394,6396,6398,6400,6402,6405,6408,6410,6412,6415,6417,6420,6422,6425,6428,6430,6433,6435,6438,6440],{"class":6386,"line":5005},[560,594],[558,6388,1767],{"class":563},[558,6390,5556],{"class":567},[558,6392,6393],{"class":571}," style",[558,6395,578],{"class":563},[558,6397,581],{"class":563},[558,6399,2872],{"class":4216},[558,6401,2580],{"class":563},[558,6403,6404],{"class":1684},"100px",[558,6406,6407],{"class":563},"; ",[558,6409,2889],{"class":4216},[558,6411,2580],{"class":563},[558,6413,6414],{"class":604},"auto",[558,6416,6407],{"class":563},[558,6418,6419],{"class":4216},"aspect-ratio",[558,6421,2580],{"class":563},[558,6423,6424],{"class":1684},"250",[558,6426,6427],{"class":563},"/",[558,6429,6424],{"class":1684},[558,6431,6432],{"class":563},";",[558,6434,581],{"class":563},[558,6436,6437],{"class":563},">\u003C/",[558,6439,5556],{"class":567},[558,6441,590],{"class":563},[558,6443,6445,6447,6449],{"class":6444,"line":5006},[560,594],[558,6446,1839],{"class":563},[558,6448,4150],{"class":567},[558,6450,590],{"class":563},[558,6452,6454],{"class":6453,"line":5007},[560,594],[558,6455,626],{"emptyLinePlaceholder":492},[558,6457,6459,6461],{"class":6458,"line":5008},[560,594],[558,6460,708],{"class":563},[558,6462,4024],{"class":567},[558,6464,6466],{"class":6465,"line":5009},[560,594],[558,6467,4030],{"class":571},[558,6469,6471],{"class":6470,"line":5010},[560,594],[558,6472,4036],{"class":571},[558,6474,6476,6478,6480,6482,6484],{"class":6475,"line":5011},[560,594],[558,6477,5936],{"class":571},[558,6479,578],{"class":563},[558,6481,581],{"class":563},[558,6483,4942],{"class":584},[558,6485,727],{"class":563},[558,6487,6489,6491,6493,6495,6497,6499,6501,6503,6506,6508,6510,6512],{"class":6488,"line":5012},[560,594],[558,6490,748],{"class":563},[558,6492,1674],{"class":571},[558,6494,578],{"class":563},[558,6496,581],{"class":563},[558,6498,1681],{"class":563},[558,6500,1908],{"class":1684},[558,6502,1687],{"class":563},[558,6504,6505],{"class":1684},"2.5",[558,6507,5967],{"class":563},[558,6509,1690],{"class":1684},[558,6511,1698],{"class":563},[558,6513,727],{"class":563},[558,6515,6517,6519,6521,6523,6525,6527,6529,6531,6533,6535],{"class":6516,"line":5013},[560,594],[558,6518,748],{"class":563},[558,6520,5981],{"class":571},[558,6522,578],{"class":563},[558,6524,581],{"class":563},[558,6526,1681],{"class":563},[558,6528,5990],{"class":1684},[558,6530,1687],{"class":563},[558,6532,1111],{"class":1684},[558,6534,1698],{"class":563},[558,6536,727],{"class":563},[558,6538,6540],{"class":6539,"line":5014},[560,594],[558,6541,4114],{"class":563},[558,6543,6545,6547,6549,6551,6553,6555,6558,6560],{"class":6544,"line":5015},[560,594],[558,6546,1767],{"class":563},[558,6548,5556],{"class":567},[558,6550,2943],{"class":571},[558,6552,578],{"class":563},[558,6554,581],{"class":563},[558,6556,6557],{"class":584},"text-center text-xs p-2 text-dark bg-[#FF0000]",[558,6559,581],{"class":563},[558,6561,590],{"class":563},[558,6563,6565,6567,6569,6571,6574,6576,6578,6580,6582,6584],{"class":560,"line":6564},109,[558,6566,5841],{"class":563},[558,6568,2868],{"class":567},[558,6570,2213],{"class":563},[558,6572,6573],{"class":604},"HTML + Custom material ",[558,6575,661],{"class":563},[558,6577,2868],{"class":567},[558,6579,2213],{"class":563},[558,6581,6214],{"class":563},[558,6583,904],{"class":567},[558,6585,1703],{"class":563},[558,6587,6589,6591,6593,6595,6598,6600,6602,6604],{"class":560,"line":6588},110,[558,6590,5841],{"class":563},[558,6592,4737],{"class":567},[558,6594,2213],{"class":563},[558,6596,6597],{"class":604},"+ receive-shadow ",[558,6599,661],{"class":563},[558,6601,4737],{"class":567},[558,6603,2213],{"class":563},[558,6605,6606],{"class":604}," ⬇️\n",[558,6608,6610,6612,6614],{"class":560,"line":6609},111,[558,6611,5894],{"class":563},[558,6613,5556],{"class":567},[558,6615,590],{"class":563},[558,6617,6619,6621,6623],{"class":560,"line":6618},112,[558,6620,1839],{"class":563},[558,6622,4150],{"class":567},[558,6624,590],{"class":563},[558,6626,6628],{"class":560,"line":6627},113,[558,6629,626],{"emptyLinePlaceholder":492},[558,6631,6633,6635],{"class":560,"line":6632},114,[558,6634,708],{"class":563},[558,6636,6637],{"class":567},"TresDirectionalLight\n",[558,6639,6641,6644,6646,6648,6650,6652,6654],{"class":560,"line":6640},115,[558,6642,6643],{"class":597},"        v-if",[558,6645,578],{"class":563},[558,6647,581],{"class":563},[558,6649,6279],{"class":604},[558,6651,2682],{"class":563},[558,6653,2685],{"class":604},[558,6655,727],{"class":563},[558,6657,6659,6661,6664,6666,6668,6670,6672,6674],{"class":560,"line":6658},116,[558,6660,748],{"class":563},[558,6662,6663],{"class":571},"target",[558,6665,578],{"class":563},[558,6667,581],{"class":563},[558,6669,6279],{"class":604},[558,6671,2682],{"class":563},[558,6673,2685],{"class":604},[558,6675,727],{"class":563},[558,6677,6679,6681,6684,6686,6688,6691],{"class":560,"line":6678},117,[558,6680,748],{"class":563},[558,6682,6683],{"class":571},"shadow-normalBias",[558,6685,578],{"class":563},[558,6687,581],{"class":563},[558,6689,6690],{"class":1684},"0.075",[558,6692,727],{"class":563},[558,6694,6696,6698,6700,6702,6704,6706,6708,6710,6712,6714,6716,6718],{"class":560,"line":6695},118,[558,6697,748],{"class":563},[558,6699,1674],{"class":571},[558,6701,578],{"class":563},[558,6703,581],{"class":563},[558,6705,1681],{"class":563},[558,6707,1695],{"class":1684},[558,6709,1687],{"class":563},[558,6711,1111],{"class":1684},[558,6713,1687],{"class":563},[558,6715,1695],{"class":1684},[558,6717,1698],{"class":563},[558,6719,727],{"class":563},[558,6721,6723,6725,6727,6729,6731,6733],{"class":560,"line":6722},119,[558,6724,748],{"class":563},[558,6726,1868],{"class":571},[558,6728,578],{"class":563},[558,6730,581],{"class":563},[558,6732,1690],{"class":1684},[558,6734,727],{"class":563},[558,6736,6738],{"class":560,"line":6737},120,[558,6739,6740],{"class":571},"        cast-shadow\n",[558,6742,6744],{"class":560,"line":6743},121,[558,6745,766],{"class":563},[558,6747,6749],{"class":560,"line":6748},122,[558,6750,626],{"emptyLinePlaceholder":492},[558,6752,6754,6756,6758,6760,6763,6765,6767,6770,6772,6774],{"class":560,"line":6753},123,[558,6755,708],{"class":563},[558,6757,2495],{"class":567},[558,6759,1671],{"class":563},[558,6761,6762],{"class":571},"position-y",[558,6764,578],{"class":563},[558,6766,581],{"class":563},[558,6768,6769],{"class":563},"-",[558,6771,1784],{"class":1684},[558,6773,581],{"class":563},[558,6775,1703],{"class":563},[558,6777,6779,6781,6783,6785,6787,6789,6791,6793,6795],{"class":560,"line":6778},124,[558,6780,708],{"class":563},[558,6782,1863],{"class":567},[558,6784,1671],{"class":563},[558,6786,1868],{"class":571},[558,6788,578],{"class":563},[558,6790,581],{"class":563},[558,6792,1784],{"class":1684},[558,6794,581],{"class":563},[558,6796,1703],{"class":563},[558,6798,6800,6802,6804],{"class":560,"line":6799},125,[558,6801,772],{"class":563},[558,6803,689],{"class":567},[558,6805,590],{"class":563},[558,6807,6809,6811,6813],{"class":560,"line":6808},126,[558,6810,782],{"class":563},[558,6812,5556],{"class":567},[558,6814,590],{"class":563},[558,6816,6818,6820,6822],{"class":560,"line":6817},127,[558,6819,661],{"class":563},[558,6821,678],{"class":567},[558,6823,590],{"class":563},[558,6825,6827],{"class":560,"line":6826},128,[558,6828,626],{"emptyLinePlaceholder":492},[558,6830,6832,6834,6836,6838],{"class":560,"line":6831},129,[558,6833,564],{"class":563},[558,6835,1532],{"class":567},[558,6837,4201],{"class":571},[558,6839,590],{"class":563},[558,6841,6843,6845,6848],{"class":560,"line":6842},130,[558,6844,807],{"class":563},[558,6846,6847],{"class":2204},"html-demo-wrapper",[558,6849,2294],{"class":563},[558,6851,6853,6855,6857,6860],{"class":560,"line":6852},131,[558,6854,3075],{"class":4216},[558,6856,2285],{"class":563},[558,6858,6859],{"class":1684}," 100%",[558,6861,4228],{"class":563},[558,6863,6865,6867,6869,6871],{"class":560,"line":6864},132,[558,6866,3088],{"class":4216},[558,6868,2285],{"class":563},[558,6870,6859],{"class":1684},[558,6872,4228],{"class":563},[558,6874,6876,6879,6881,6884],{"class":560,"line":6875},133,[558,6877,6878],{"class":4216},"  position",[558,6880,2285],{"class":563},[558,6882,6883],{"class":604}," relative",[558,6885,4228],{"class":563},[558,6887,6889,6892,6894,6897],{"class":560,"line":6888},134,[558,6890,6891],{"class":4216},"  overflow",[558,6893,2285],{"class":563},[558,6895,6896],{"class":604}," hidden",[558,6898,4228],{"class":563},[558,6900,6902,6904,6906,6908,6911],{"class":560,"line":6901},135,[558,6903,4217],{"class":4216},[558,6905,2285],{"class":563},[558,6907,4222],{"class":563},[558,6909,6910],{"class":604},"82dbc5",[558,6912,4228],{"class":563},[558,6914,6916],{"class":560,"line":6915},136,[558,6917,2386],{"class":563},[558,6919,6921,6923,6925],{"class":560,"line":6920},137,[558,6922,661],{"class":563},[558,6924,1532],{"class":567},[558,6926,590],{"class":563},[540,6928,6930],{"id":6929},"custom-geometry","Custom Geometry",[476,6932,6933,6934,6937,6938,6941,6942,6945,6946,6949,6950,6954],{},"By default, when using ",[514,6935,6936],{},"occlude=\"blending\"",", occlusion works correctly only with ",[2868,6939,6940],{},"rectangular HTML elements"," (using a ",[514,6943,6944],{},"PlaneGeometry",").\nFor ",[4737,6947,6948],{},"non-rectangular content",", you can use the ",[2868,6951,6952],{},[514,6953,5660],{}," prop to provide a matching custom geometry.",[476,6956,6957,6958,909,6961,6964,6965,6972,6973,807],{},"In the ",[2868,6959,6960],{},"demo above ⬆️",[4737,6962,6963],{},"(middle yellow example)",", a ",[519,6966,6969],{"href":6967,"rel":6968},"https://threejs.org/docs/#api/en/geometries/CircleGeometry",[523],[514,6970,6971],{},"CircleGeometry"," is used as a ",[2868,6974,6975],{},"custom geometry",[6977,6978,6979],"prose-list",{},[530,6980,6981,6990],{},[533,6982,1349,6983,6985,6986,6989],{},[514,6984,5660],{}," prop only defines the ",[2868,6987,6988],{},"occlusion shape"," in 3D and does not modify your HTML content.",[533,6991,6992,6993,7000,7001,7004,7005,7008,7009,7016],{},"You can provide any ",[519,6994,6997],{"href":6995,"rel":6996},"https://threejs.org/docs/#api/en/core/BufferGeometry",[523],[514,6998,6999],{},"BufferGeometry",", for example to simulate ",[2868,7002,7003],{},"CSS-like styles"," such as ",[514,7006,7007],{},"border-radius"," using a rounded rectangle or squircle geometry (see ",[519,7010,7013],{"href":7011,"rel":7012},"https://discourse.threejs.org/t/roundedrectangle-squircle/28645",[523],[514,7014,7015],{},"RoundedRectangle / Squircle geometry"," for example).",[7018,7019,7021],"h4",{"id":7020},"custom-material","Custom Material",[476,7023,7024,7025,7027,7028,909,7030,6964,7033,7036],{},"You can also assign material properties to the HTML content using the ",[514,7026,6340],{}," prop.\nIn the ",[2868,7029,6960],{},[4737,7031,7032],{},"(right red example)",[2868,7034,7035],{},"custom material"," is used with shadow.",[7038,7039,7040],"prose-note",{},[476,7041,1349,7042,7044,7045,7047,7048,807],{},[514,7043,6340],{}," prop is only available when ",[514,7046,6936],{}," is ",[2868,7049,7050],{},"enabled",[7038,7052,7053],{},[476,7054,7055,7056,3667,7061,7066,7067,7070,7071,7073,7074,7077,7078,7083,7084,7089,7090],{},"Enable shadows using the ",[2868,7057,7058],{},[514,7059,7060],{},"castShadow",[2868,7062,7063],{},[514,7064,7065],{},"receiveShadow"," props.\nShadows are supported ",[2868,7068,7069],{},"only"," when using a ",[2868,7072,7035],{},". By default, shadows do ",[2868,7075,7076],{},"not"," work with ",[4737,7079,7080],{},[514,7081,7082],{},"MeshBasicMaterial"," or ",[4737,7085,7086],{},[514,7087,7088],{},"ShaderMaterial",". ",[904,7091],{},[540,7093,7095,7096],{"id":7094},"using-transition","Using ",[514,7097,7098],{},"\u003CTransition>",[476,7100,7101,7102,7108,7109,7111,7112,7115,7116,3667,7119,7122],{},"The native Vue ",[519,7103,7106],{"href":7104,"rel":7105},"https://vuejs.org/guide/built-ins/transition",[523],[514,7107,7098],{}," component works seamlessly with ",[514,7110,3812],{},".\nThis means you can ",[2868,7113,7114],{},"animate"," how your projected HTML content ",[4737,7117,7118],{},"enters",[4737,7120,7121],{},"leaves"," the scene, exactly as you would in a regular Vue application.",[7038,7124,7125],{},[476,7126,7127,7128,7131,7132,1687,7135,7137,7138,7141],{},"All ",[2868,7129,7130],{},"standard interactions"," are supported just like on a regular HTML element — ",[2868,7133,7134],{},"hover effects",[2868,7136,1272],{},", and ",[4737,7139,7140],{},"any kind of DOM interaction"," are fully possible.",[506,7143,7144],{},[7145,7146],"objects-html-transition-demo",{},[4337,7148,4339,7149,7151],{},[4341,7150,4343],{},[544,7152,7155],{"className":546,"code":7153,"highlights":7154,"language":554,"meta":484,"style":484},"\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",[486,6065,4983,4984,4985,4986,4987,4988,4989,4990,4991,4992,4993,6239,4994,4995,4996,4997,4998,4999,5000],[514,7156,7157,7177,7204,7222,7240,7244,7254,7268,7279,7289,7299,7310,7314,7318,7339,7343,7365,7369,7379,7383,7397,7419,7423,7427,7441,7463,7467,7471,7485,7511,7515,7519,7534,7557,7561,7565,7569,7589,7662,7704,7728,7732,7736,7752,7768,7772,7780,7784,7792,7821,7850,7882,7903,7907,7913,7935,7953,7967,7981,7995,8018,8022,8078,8118,8126,8134,8142,8146,8152,8156,8160,8172,8198,8214,8237,8242,8264,8272,8287,8313,8328,8346,8352,8376,8394,8404,8413,8422,8427,8450,8471,8480,8489,8497,8501,8511,8519,8529,8539,8549,8559,8571,8575,8579,8593,8611,8615,8619,8628,8637,8647,8663,8667,8671,8680,8689,8707,8711,8715,8724,8733,8743,8757,8761],{"__ignoreMap":484},[558,7158,7159,7161,7163,7165,7167,7169,7171,7173,7175],{"class":560,"line":485},[558,7160,564],{"class":563},[558,7162,568],{"class":567},[558,7164,572],{"class":571},[558,7166,575],{"class":571},[558,7168,578],{"class":563},[558,7170,581],{"class":563},[558,7172,585],{"class":584},[558,7174,581],{"class":563},[558,7176,590],{"class":563},[558,7178,7180,7182,7184,7186,7188,7190,7192,7194,7196,7198,7200,7202],{"class":7179,"line":486},[560,594],[558,7181,598],{"class":597},[558,7183,601],{"class":563},[558,7185,3856],{"class":604},[558,7187,1620],{"class":563},[558,7189,5051],{"class":604},[558,7191,1620],{"class":563},[558,7193,1623],{"class":604},[558,7195,608],{"class":563},[558,7197,611],{"class":597},[558,7199,614],{"class":563},[558,7201,617],{"class":584},[558,7203,620],{"class":563},[558,7205,7206,7208,7210,7212,7214,7216,7218,7220],{"class":560,"line":623},[558,7207,598],{"class":597},[558,7209,601],{"class":563},[558,7211,2155],{"class":604},[558,7213,608],{"class":563},[558,7215,611],{"class":597},[558,7217,614],{"class":563},[558,7219,2144],{"class":584},[558,7221,620],{"class":563},[558,7223,7224,7226,7228,7230,7232,7234,7236,7238],{"class":560,"line":629},[558,7225,598],{"class":597},[558,7227,601],{"class":563},[558,7229,641],{"class":604},[558,7231,608],{"class":563},[558,7233,611],{"class":597},[558,7235,614],{"class":563},[558,7237,554],{"class":584},[558,7239,620],{"class":563},[558,7241,7242],{"class":560,"line":658},[558,7243,626],{"emptyLinePlaceholder":492},[558,7245,7246,7248,7250,7252],{"class":560,"line":668},[558,7247,632],{"class":571},[558,7249,5137],{"class":604},[558,7251,578],{"class":563},[558,7253,2294],{"class":563},[558,7255,7256,7258,7260,7262,7264,7266],{"class":560,"line":673},[558,7257,5146],{"class":567},[558,7259,2285],{"class":563},[558,7261,614],{"class":563},[558,7263,3924],{"class":584},[558,7265,647],{"class":563},[558,7267,3069],{"class":563},[558,7269,7270,7272,7274,7277],{"class":560,"line":683},[558,7271,5161],{"class":567},[558,7273,2285],{"class":563},[558,7275,7276],{"class":1684}," 0",[558,7278,3069],{"class":563},[558,7280,7281,7283,7285,7287],{"class":560,"line":694},[558,7282,5172],{"class":567},[558,7284,2285],{"class":563},[558,7286,3066],{"class":2557},[558,7288,3069],{"class":563},[558,7290,7291,7293,7295,7297],{"class":560,"line":549},[558,7292,5183],{"class":567},[558,7294,2285],{"class":563},[558,7296,3066],{"class":2557},[558,7298,3069],{"class":563},[558,7300,7301,7304,7306,7308],{"class":560,"line":550},[558,7302,7303],{"class":567},"  antialias",[558,7305,2285],{"class":563},[558,7307,3066],{"class":2557},[558,7309,3069],{"class":563},[558,7311,7312],{"class":560,"line":551},[558,7313,2386],{"class":563},[558,7315,7316],{"class":560,"line":552},[558,7317,626],{"emptyLinePlaceholder":492},[558,7319,7320,7322,7325,7327,7329,7331,7334,7336],{"class":560,"line":553},[558,7321,632],{"class":571},[558,7323,7324],{"class":604}," rootRef ",[558,7326,578],{"class":563},[558,7328,641],{"class":640},[558,7330,564],{"class":563},[558,7332,7333],{"class":2204},"HTMLElement",[558,7335,2213],{"class":563},[558,7337,7338],{"class":604},"()\n",[558,7340,7341],{"class":560,"line":769},[558,7342,626],{"emptyLinePlaceholder":492},[558,7344,7345,7347,7350,7352,7354,7356,7358,7361,7363],{"class":560,"line":779},[558,7346,632],{"class":571},[558,7348,7349],{"class":604}," bgColor ",[558,7351,578],{"class":563},[558,7353,641],{"class":640},[558,7355,644],{"class":604},[558,7357,647],{"class":563},[558,7359,7360],{"class":584},"#F6B03B",[558,7362,647],{"class":563},[558,7364,655],{"class":604},[558,7366,7367],{"class":560,"line":789},[558,7368,626],{"emptyLinePlaceholder":492},[558,7370,7371,7373,7375,7377],{"class":560,"line":1882},[558,7372,632],{"class":571},[558,7374,5225],{"class":604},[558,7376,578],{"class":563},[558,7378,5230],{"class":604},[558,7380,7381],{"class":560,"line":1917},[558,7382,5235],{"class":563},[558,7384,7385,7387,7389,7391,7393,7395],{"class":560,"line":1926},[558,7386,5240],{"class":567},[558,7388,2285],{"class":563},[558,7390,614],{"class":563},[558,7392,2609],{"class":584},[558,7394,647],{"class":563},[558,7396,3069],{"class":563},[558,7398,7399,7401,7403,7405,7407,7409,7411,7413,7415,7417],{"class":560,"line":2485},[558,7400,5255],{"class":567},[558,7402,2285],{"class":563},[558,7404,5260],{"class":604},[558,7406,1784],{"class":1684},[558,7408,1620],{"class":563},[558,7410,3115],{"class":1684},[558,7412,1620],{"class":563},[558,7414,3115],{"class":1684},[558,7416,1698],{"class":604},[558,7418,3069],{"class":563},[558,7420,7421],{"class":560,"line":2490},[558,7422,3123],{"class":563},[558,7424,7425],{"class":560,"line":2074},[558,7426,5235],{"class":563},[558,7428,7429,7431,7433,7435,7437,7439],{"class":560,"line":2075},[558,7430,5240],{"class":567},[558,7432,2285],{"class":563},[558,7434,614],{"class":563},[558,7436,1770],{"class":584},[558,7438,647],{"class":563},[558,7440,3069],{"class":563},[558,7442,7443,7445,7447,7449,7451,7453,7455,7457,7459,7461],{"class":560,"line":2076},[558,7444,5255],{"class":567},[558,7446,2285],{"class":563},[558,7448,5260],{"class":604},[558,7450,5307],{"class":1684},[558,7452,1620],{"class":563},[558,7454,5312],{"class":1684},[558,7456,1620],{"class":563},[558,7458,5312],{"class":1684},[558,7460,1698],{"class":604},[558,7462,3069],{"class":563},[558,7464,7465],{"class":560,"line":2077},[558,7466,3123],{"class":563},[558,7468,7469],{"class":560,"line":2589},[558,7470,5235],{"class":563},[558,7472,7473,7475,7477,7479,7481,7483],{"class":560,"line":2595},[558,7474,5240],{"class":567},[558,7476,2285],{"class":563},[558,7478,614],{"class":563},[558,7480,2777],{"class":584},[558,7482,647],{"class":563},[558,7484,3069],{"class":563},[558,7486,7487,7489,7491,7493,7495,7497,7499,7501,7503,7505,7507,7509],{"class":560,"line":2604},[558,7488,5255],{"class":567},[558,7490,2285],{"class":563},[558,7492,5260],{"class":604},[558,7494,1875],{"class":1684},[558,7496,1620],{"class":563},[558,7498,5357],{"class":1684},[558,7500,1620],{"class":563},[558,7502,5362],{"class":1684},[558,7504,1620],{"class":563},[558,7506,5367],{"class":1684},[558,7508,1698],{"class":604},[558,7510,3069],{"class":563},[558,7512,7513],{"class":560,"line":2638},[558,7514,3123],{"class":563},[558,7516,7517],{"class":560,"line":2643},[558,7518,5235],{"class":563},[558,7520,7521,7523,7525,7527,7530,7532],{"class":560,"line":2651},[558,7522,5240],{"class":567},[558,7524,2285],{"class":563},[558,7526,614],{"class":563},[558,7528,7529],{"class":584},"TresConeGeometry",[558,7531,647],{"class":563},[558,7533,3069],{"class":563},[558,7535,7536,7538,7540,7542,7544,7546,7549,7551,7553,7555],{"class":560,"line":2668},[558,7537,5255],{"class":567},[558,7539,2285],{"class":563},[558,7541,5260],{"class":604},[558,7543,5307],{"class":1684},[558,7545,1620],{"class":563},[558,7547,7548],{"class":1684}," 1.4",[558,7550,1620],{"class":563},[558,7552,5312],{"class":1684},[558,7554,1698],{"class":604},[558,7556,3069],{"class":563},[558,7558,7559],{"class":560,"line":2698},[558,7560,3123],{"class":563},[558,7562,7563],{"class":560,"line":2703},[558,7564,5408],{"class":604},[558,7566,7567],{"class":560,"line":2712},[558,7568,626],{"emptyLinePlaceholder":492},[558,7570,7571,7573,7576,7578,7581,7584,7587],{"class":560,"line":2717},[558,7572,632],{"class":571},[558,7574,7575],{"class":604}," getRandomBackgroundColor ",[558,7577,578],{"class":563},[558,7579,7580],{"class":563}," ():",[558,7582,7583],{"class":2204}," string",[558,7585,7586],{"class":571}," =>",[558,7588,2294],{"class":563},[558,7590,7591,7594,7597,7599,7601,7603,7605,7607,7609,7611,7613,7615,7617,7619,7622,7624,7626,7628,7631,7633,7635,7637,7640,7642,7644,7646,7649,7651,7653,7655,7658,7660],{"class":560,"line":2725},[558,7592,7593],{"class":571},"  const",[558,7595,7596],{"class":604}," colors",[558,7598,2347],{"class":563},[558,7600,5260],{"class":567},[558,7602,647],{"class":563},[558,7604,7360],{"class":584},[558,7606,647],{"class":563},[558,7608,1620],{"class":563},[558,7610,614],{"class":563},[558,7612,3924],{"class":584},[558,7614,647],{"class":563},[558,7616,1620],{"class":563},[558,7618,614],{"class":563},[558,7620,7621],{"class":584},"#FF5733",[558,7623,647],{"class":563},[558,7625,1620],{"class":563},[558,7627,614],{"class":563},[558,7629,7630],{"class":584},"#33FF57",[558,7632,647],{"class":563},[558,7634,1620],{"class":563},[558,7636,614],{"class":563},[558,7638,7639],{"class":584},"#3357FF",[558,7641,647],{"class":563},[558,7643,1620],{"class":563},[558,7645,614],{"class":563},[558,7647,7648],{"class":584},"#F333FF",[558,7650,647],{"class":563},[558,7652,1620],{"class":563},[558,7654,614],{"class":563},[558,7656,7657],{"class":584},"#33FFF5",[558,7659,647],{"class":563},[558,7661,5408],{"class":567},[558,7663,7664,7666,7669,7671,7674,7676,7679,7681,7684,7686,7689,7692,7695,7697,7699,7702],{"class":560,"line":2738},[558,7665,7593],{"class":571},[558,7667,7668],{"class":604}," idx",[558,7670,2347],{"class":563},[558,7672,7673],{"class":604}," Math",[558,7675,807],{"class":563},[558,7677,7678],{"class":640},"floor",[558,7680,644],{"class":567},[558,7682,7683],{"class":604},"Math",[558,7685,807],{"class":563},[558,7687,7688],{"class":640},"random",[558,7690,7691],{"class":567},"() ",[558,7693,7694],{"class":563},"*",[558,7696,7596],{"class":604},[558,7698,807],{"class":563},[558,7700,7701],{"class":604},"length",[558,7703,655],{"class":567},[558,7705,7706,7709,7711,7713,7716,7719,7722,7724,7726],{"class":560,"line":2766},[558,7707,7708],{"class":597},"  return",[558,7710,7596],{"class":604},[558,7712,1681],{"class":567},[558,7714,7715],{"class":604},"idx",[558,7717,7718],{"class":567},"] ",[558,7720,7721],{"class":563},"??",[558,7723,614],{"class":563},[558,7725,7360],{"class":584},[558,7727,620],{"class":563},[558,7729,7730],{"class":560,"line":2772},[558,7731,2386],{"class":563},[558,7733,7734],{"class":560,"line":2812},[558,7735,626],{"emptyLinePlaceholder":492},[558,7737,7738,7740,7743,7745,7748,7750],{"class":560,"line":2822},[558,7739,632],{"class":571},[558,7741,7742],{"class":604}," updateBackgroundColor ",[558,7744,578],{"class":563},[558,7746,7747],{"class":563}," ()",[558,7749,7586],{"class":571},[558,7751,2294],{"class":563},[558,7753,7754,7757,7759,7761,7763,7766],{"class":560,"line":2831},[558,7755,7756],{"class":604},"  bgColor",[558,7758,807],{"class":563},[558,7760,2313],{"class":604},[558,7762,2347],{"class":563},[558,7764,7765],{"class":640}," getRandomBackgroundColor",[558,7767,7338],{"class":567},[558,7769,7770],{"class":560,"line":2840},[558,7771,2386],{"class":563},[558,7773,7774,7776,7778],{"class":560,"line":5626},[558,7775,661],{"class":563},[558,7777,568],{"class":567},[558,7779,590],{"class":563},[558,7781,7782],{"class":560,"line":5635},[558,7783,626],{"emptyLinePlaceholder":492},[558,7785,7786,7788,7790],{"class":560,"line":5640},[558,7787,564],{"class":563},[558,7789,678],{"class":567},[558,7791,590],{"class":563},[558,7793,7794,7796,7798,7800,7802,7804,7807,7809,7811,7813,7815,7817,7819],{"class":560,"line":5648},[558,7795,686],{"class":563},[558,7797,5556],{"class":567},[558,7799,641],{"class":571},[558,7801,578],{"class":563},[558,7803,581],{"class":563},[558,7805,7806],{"class":584},"rootRef",[558,7808,581],{"class":563},[558,7810,2943],{"class":571},[558,7812,578],{"class":563},[558,7814,581],{"class":563},[558,7816,6847],{"class":584},[558,7818,581],{"class":563},[558,7820,590],{"class":563},[558,7822,7823,7825,7827,7829,7831,7833,7835,7837,7839,7841,7843,7846,7848],{"class":560,"line":5676},[558,7824,697],{"class":563},[558,7826,689],{"class":567},[558,7828,5578],{"class":571},[558,7830,578],{"class":563},[558,7832,581],{"class":563},[558,7834,5585],{"class":604},[558,7836,581],{"class":563},[558,7838,2943],{"class":571},[558,7840,578],{"class":563},[558,7842,581],{"class":563},[558,7844,7845],{"class":584},"!pointer-events-none",[558,7847,581],{"class":563},[558,7849,590],{"class":563},[558,7851,7852,7854,7856,7858,7860,7862,7864,7866,7868,7870,7872,7874,7876,7878,7880],{"class":560,"line":5700},[558,7853,708],{"class":563},[558,7855,1668],{"class":567},[558,7857,1671],{"class":563},[558,7859,1674],{"class":571},[558,7861,578],{"class":563},[558,7863,581],{"class":563},[558,7865,1681],{"class":563},[558,7867,1111],{"class":1684},[558,7869,1687],{"class":563},[558,7871,5612],{"class":1684},[558,7873,1687],{"class":563},[558,7875,5617],{"class":1684},[558,7877,1698],{"class":563},[558,7879,581],{"class":563},[558,7881,1703],{"class":563},[558,7883,7884,7886,7888,7890,7893,7895,7897,7899,7901],{"class":560,"line":5716},[558,7885,708],{"class":563},[558,7887,1710],{"class":567},[558,7889,1671],{"class":563},[558,7891,7892],{"class":571},"dom-element",[558,7894,578],{"class":563},[558,7896,581],{"class":563},[558,7898,7806],{"class":604},[558,7900,581],{"class":563},[558,7902,1703],{"class":563},[558,7904,7905],{"class":560,"line":5733},[558,7906,626],{"emptyLinePlaceholder":492},[558,7908,7909,7911],{"class":560,"line":5749},[558,7910,708],{"class":563},[558,7912,5645],{"class":567},[558,7914,7915,7917,7919,7921,7923,7925,7927,7929,7931,7933],{"class":560,"line":5775},[558,7916,5651],{"class":597},[558,7918,578],{"class":563},[558,7920,581],{"class":563},[558,7922,644],{"class":563},[558,7924,5660],{"class":604},[558,7926,1687],{"class":563},[558,7928,5665],{"class":604},[558,7930,5668],{"class":563},[558,7932,5671],{"class":604},[558,7934,727],{"class":563},[558,7936,7937,7939,7941,7943,7945,7947,7949,7951],{"class":560,"line":5780},[558,7938,748],{"class":563},[558,7940,5681],{"class":571},[558,7942,578],{"class":563},[558,7944,5686],{"class":563},[558,7946,5689],{"class":584},[558,7948,5692],{"class":563},[558,7950,5665],{"class":604},[558,7952,5697],{"class":563},[558,7954,7955,7957,7959,7961,7963,7965],{"class":560,"line":5838},[558,7956,748],{"class":563},[558,7958,5705],{"class":571},[558,7960,578],{"class":563},[558,7962,581],{"class":563},[558,7964,2751],{"class":1684},[558,7966,727],{"class":563},[558,7968,7969,7971,7973,7975,7977,7979],{"class":560,"line":5882},[558,7970,748],{"class":563},[558,7972,5721],{"class":571},[558,7974,578],{"class":563},[558,7976,581],{"class":563},[558,7978,5728],{"class":1684},[558,7980,727],{"class":563},[558,7982,7983,7985,7987,7989,7991,7993],{"class":560,"line":5891},[558,7984,748],{"class":563},[558,7986,5738],{"class":571},[558,7988,578],{"class":563},[558,7990,581],{"class":563},[558,7992,1784],{"class":1684},[558,7994,727],{"class":563},[558,7996,7997,7999,8001,8003,8005,8007,8010,8012,8014,8016],{"class":560,"line":5901},[558,7998,748],{"class":563},[558,8000,5754],{"class":571},[558,8002,578],{"class":563},[558,8004,581],{"class":563},[558,8006,5761],{"class":563},[558,8008,8009],{"class":1684},"0.4",[558,8011,1687],{"class":563},[558,8013,8009],{"class":1684},[558,8015,1698],{"class":563},[558,8017,727],{"class":563},[558,8019,8020],{"class":560,"line":5911},[558,8021,4114],{"class":563},[558,8023,8024,8026,8028,8030,8032,8034,8036,8039,8041,8044,8046,8048,8050,8052,8054,8057,8059,8062,8064,8066,8068,8070,8072,8074,8076],{"class":560,"line":4972},[558,8025,1767],{"class":563},[558,8027,1760],{"class":567},[558,8029,1671],{"class":563},[558,8031,1674],{"class":571},[558,8033,578],{"class":563},[558,8035,581],{"class":563},[558,8037,8038],{"class":563},"[(",[558,8040,5665],{"class":604},[558,8042,8043],{"class":563}," - (",[558,8045,5671],{"class":604},[558,8047,807],{"class":563},[558,8049,7701],{"class":604},[558,8051,5804],{"class":563},[558,8053,1784],{"class":1684},[558,8055,8056],{"class":563},") / ",[558,8058,1690],{"class":1684},[558,8060,8061],{"class":563},") * ",[558,8063,1690],{"class":1684},[558,8065,1687],{"class":563},[558,8067,1784],{"class":1684},[558,8069,1687],{"class":563},[558,8071,1111],{"class":1684},[558,8073,1698],{"class":563},[558,8075,581],{"class":563},[558,8077,590],{"class":563},[558,8079,8080,8082,8084,8086,8088,8090,8092,8094,8096,8098,8100,8102,8104,8106,8108,8110,8112,8114,8116],{"class":560,"line":4973},[558,8081,5841],{"class":563},[558,8083,5844],{"class":567},[558,8085,1671],{"class":563},[558,8087,5849],{"class":571},[558,8089,578],{"class":563},[558,8091,581],{"class":563},[558,8093,5660],{"class":604},[558,8095,807],{"class":563},[558,8097,5844],{"class":604},[558,8099,581],{"class":563},[558,8101,1671],{"class":563},[558,8103,1775],{"class":571},[558,8105,578],{"class":563},[558,8107,581],{"class":563},[558,8109,5660],{"class":604},[558,8111,807],{"class":563},[558,8113,1775],{"class":604},[558,8115,581],{"class":563},[558,8117,1703],{"class":563},[558,8119,8120,8122,8124],{"class":560,"line":4974},[558,8121,5841],{"class":563},[558,8123,2817],{"class":567},[558,8125,1703],{"class":563},[558,8127,8128,8130,8132],{"class":560,"line":4975},[558,8129,5894],{"class":563},[558,8131,1760],{"class":567},[558,8133,590],{"class":563},[558,8135,8136,8138,8140],{"class":560,"line":4976},[558,8137,1839],{"class":563},[558,8139,5906],{"class":567},[558,8141,590],{"class":563},[558,8143,8144],{"class":560,"line":4977},[558,8145,626],{"emptyLinePlaceholder":492},[558,8147,8148,8150],{"class":560,"line":4978},[558,8149,708],{"class":563},[558,8151,4024],{"class":567},[558,8153,8154],{"class":560,"line":4979},[558,8155,4030],{"class":571},[558,8157,8158],{"class":560,"line":4980},[558,8159,4036],{"class":571},[558,8161,8162,8164,8166,8168,8170],{"class":560,"line":4981},[558,8163,5936],{"class":571},[558,8165,578],{"class":563},[558,8167,581],{"class":563},[558,8169,4942],{"class":584},[558,8171,727],{"class":563},[558,8173,8174,8176,8178,8180,8182,8184,8186,8188,8190,8192,8194,8196],{"class":560,"line":4982},[558,8175,748],{"class":563},[558,8177,1674],{"class":571},[558,8179,578],{"class":563},[558,8181,581],{"class":563},[558,8183,1681],{"class":563},[558,8185,1111],{"class":1684},[558,8187,1687],{"class":563},[558,8189,5964],{"class":1684},[558,8191,5967],{"class":563},[558,8193,1690],{"class":1684},[558,8195,1698],{"class":563},[558,8197,727],{"class":563},[558,8199,8201,8203,8205,8207,8209,8212],{"class":8200,"line":6065},[560,594],[558,8202,748],{"class":563},[558,8204,4088],{"class":571},[558,8206,578],{"class":563},[558,8208,581],{"class":563},[558,8210,8211],{"class":1684},"1.15",[558,8213,727],{"class":563},[558,8215,8217,8219,8221,8223,8225,8227,8229,8231,8233,8235],{"class":8216,"line":4983},[560,594],[558,8218,748],{"class":563},[558,8220,5981],{"class":571},[558,8222,578],{"class":563},[558,8224,581],{"class":563},[558,8226,1681],{"class":563},[558,8228,5990],{"class":1684},[558,8230,1687],{"class":563},[558,8232,1111],{"class":1684},[558,8234,1698],{"class":563},[558,8236,727],{"class":563},[558,8238,8240],{"class":8239,"line":4984},[560,594],[558,8241,4114],{"class":563},[558,8243,8245,8247,8250,8253,8255,8257,8260,8262],{"class":8244,"line":4985},[560,594],[558,8246,1767],{"class":563},[558,8248,8249],{"class":567},"Transition",[558,8251,8252],{"class":571}," name",[558,8254,578],{"class":563},[558,8256,581],{"class":563},[558,8258,8259],{"class":584},"transition-basic",[558,8261,581],{"class":563},[558,8263,590],{"class":563},[558,8265,8267,8269],{"class":8266,"line":4986},[560,594],[558,8268,5841],{"class":563},[558,8270,8271],{"class":567},"h1\n",[558,8273,8275,8278,8280,8282,8285],{"class":8274,"line":4987},[560,594],[558,8276,8277],{"class":597},"            v-if",[558,8279,578],{"class":563},[558,8281,581],{"class":563},[558,8283,8284],{"class":604},"showTransition",[558,8286,727],{"class":563},[558,8288,8290,8293,8295,8297,8299,8301,8304,8306,8309,8311],{"class":8289,"line":4988},[560,594],[558,8291,8292],{"class":563},"            :",[558,8294,1532],{"class":571},[558,8296,578],{"class":563},[558,8298,581],{"class":563},[558,8300,2574],{"class":563},[558,8302,8303],{"class":567},"backgroundColor",[558,8305,2580],{"class":563},[558,8307,8308],{"class":604},"bgColor",[558,8310,608],{"class":563},[558,8312,727],{"class":563},[558,8314,8316,8319,8321,8323,8326],{"class":8315,"line":4989},[560,594],[558,8317,8318],{"class":571},"            class",[558,8320,578],{"class":563},[558,8322,581],{"class":563},[558,8324,8325],{"class":584},"html-demo-transition-heading will-change-transform transition-transform,background-color cursor-pointer duration-500 text-center p-2 text-light shadow-lg",[558,8327,727],{"class":563},[558,8329,8331,8334,8337,8339,8341,8344],{"class":8330,"line":4990},[560,594],[558,8332,8333],{"class":563},"            @",[558,8335,8336],{"class":571},"click",[558,8338,578],{"class":563},[558,8340,581],{"class":563},[558,8342,8343],{"class":604},"updateBackgroundColor",[558,8345,727],{"class":563},[558,8347,8349],{"class":8348,"line":4991},[560,594],[558,8350,8351],{"class":563},"          >\n",[558,8353,8355,8358,8360,8362,8365,8367,8369,8372,8374],{"class":8354,"line":4992},[560,594],[558,8356,8357],{"class":563},"            \u003C",[558,8359,2868],{"class":567},[558,8361,2213],{"class":563},[558,8363,8364],{"class":604},"TRANSITION + ",[558,8366,661],{"class":563},[558,8368,2868],{"class":567},[558,8370,8371],{"class":563},">\u003C",[558,8373,904],{"class":567},[558,8375,1703],{"class":563},[558,8377,8379,8381,8383,8385,8388,8390,8392],{"class":8378,"line":4993},[560,594],[558,8380,8357],{"class":563},[558,8382,4737],{"class":567},[558,8384,2213],{"class":563},[558,8386,8387],{"class":604},"occlude=blending 💛",[558,8389,661],{"class":563},[558,8391,4737],{"class":567},[558,8393,590],{"class":563},[558,8395,8397,8400,8402],{"class":8396,"line":6239},[560,594],[558,8398,8399],{"class":563},"          \u003C/",[558,8401,4121],{"class":567},[558,8403,590],{"class":563},[558,8405,8407,8409,8411],{"class":8406,"line":4994},[560,594],[558,8408,5894],{"class":563},[558,8410,8249],{"class":567},[558,8412,590],{"class":563},[558,8414,8416,8418,8420],{"class":8415,"line":4995},[560,594],[558,8417,1839],{"class":563},[558,8419,4150],{"class":567},[558,8421,590],{"class":563},[558,8423,8425],{"class":8424,"line":4996},[560,594],[558,8426,626],{"emptyLinePlaceholder":492},[558,8428,8430,8432,8434,8436,8438,8440,8442,8444,8446,8448],{"class":8429,"line":4997},[560,594],[558,8431,708],{"class":563},[558,8433,2495],{"class":567},[558,8435,1671],{"class":563},[558,8437,6762],{"class":571},[558,8439,578],{"class":563},[558,8441,581],{"class":563},[558,8443,6769],{"class":563},[558,8445,5436],{"class":1684},[558,8447,581],{"class":563},[558,8449,1703],{"class":563},[558,8451,8453,8455,8457,8459,8461,8463,8465,8467,8469],{"class":8452,"line":4998},[560,594],[558,8454,708],{"class":563},[558,8456,1863],{"class":567},[558,8458,1671],{"class":563},[558,8460,1868],{"class":571},[558,8462,578],{"class":563},[558,8464,581],{"class":563},[558,8466,1784],{"class":1684},[558,8468,581],{"class":563},[558,8470,1703],{"class":563},[558,8472,8474,8476,8478],{"class":8473,"line":4999},[560,594],[558,8475,772],{"class":563},[558,8477,689],{"class":567},[558,8479,590],{"class":563},[558,8481,8483,8485,8487],{"class":8482,"line":5000},[560,594],[558,8484,782],{"class":563},[558,8486,5556],{"class":567},[558,8488,590],{"class":563},[558,8490,8491,8493,8495],{"class":560,"line":5001},[558,8492,661],{"class":563},[558,8494,678],{"class":567},[558,8496,590],{"class":563},[558,8498,8499],{"class":560,"line":5002},[558,8500,626],{"emptyLinePlaceholder":492},[558,8502,8503,8505,8507,8509],{"class":560,"line":5003},[558,8504,564],{"class":563},[558,8506,1532],{"class":567},[558,8508,4201],{"class":571},[558,8510,590],{"class":563},[558,8512,8513,8515,8517],{"class":560,"line":5004},[558,8514,807],{"class":563},[558,8516,6847],{"class":2204},[558,8518,2294],{"class":563},[558,8520,8521,8523,8525,8527],{"class":560,"line":6381},[558,8522,3075],{"class":4216},[558,8524,2285],{"class":563},[558,8526,6859],{"class":1684},[558,8528,4228],{"class":563},[558,8530,8531,8533,8535,8537],{"class":560,"line":5005},[558,8532,3088],{"class":4216},[558,8534,2285],{"class":563},[558,8536,6859],{"class":1684},[558,8538,4228],{"class":563},[558,8540,8541,8543,8545,8547],{"class":560,"line":5006},[558,8542,6878],{"class":4216},[558,8544,2285],{"class":563},[558,8546,6883],{"class":604},[558,8548,4228],{"class":563},[558,8550,8551,8553,8555,8557],{"class":560,"line":5007},[558,8552,6891],{"class":4216},[558,8554,2285],{"class":563},[558,8556,6896],{"class":604},[558,8558,4228],{"class":563},[558,8560,8561,8563,8565,8567,8569],{"class":560,"line":5008},[558,8562,4217],{"class":4216},[558,8564,2285],{"class":563},[558,8566,4222],{"class":563},[558,8568,6910],{"class":604},[558,8570,4228],{"class":563},[558,8572,8573],{"class":560,"line":5009},[558,8574,2386],{"class":563},[558,8576,8577],{"class":560,"line":5010},[558,8578,626],{"emptyLinePlaceholder":492},[558,8580,8581,8583,8586,8588,8591],{"class":560,"line":5011},[558,8582,807],{"class":563},[558,8584,8585],{"class":2204},"html-demo-transition-heading",[558,8587,2285],{"class":563},[558,8589,8590],{"class":571},"hover",[558,8592,2294],{"class":563},[558,8594,8595,8598,8600,8603,8605,8608],{"class":560,"line":5012},[558,8596,8597],{"class":4216},"  transform",[558,8599,2285],{"class":563},[558,8601,8602],{"class":640}," scale",[558,8604,644],{"class":563},[558,8606,8607],{"class":1684},"1.05",[558,8609,8610],{"class":563},");\n",[558,8612,8613],{"class":560,"line":5013},[558,8614,2386],{"class":563},[558,8616,8617],{"class":560,"line":5014},[558,8618,626],{"emptyLinePlaceholder":492},[558,8620,8621,8623,8626],{"class":560,"line":5015},[558,8622,807],{"class":563},[558,8624,8625],{"class":2204},"transition-basic-enter-from",[558,8627,3069],{"class":563},[558,8629,8630,8632,8635],{"class":560,"line":6564},[558,8631,807],{"class":563},[558,8633,8634],{"class":2204},"transition-basic-leave-to",[558,8636,2294],{"class":563},[558,8638,8639,8641,8643,8645],{"class":560,"line":6588},[558,8640,5504],{"class":4216},[558,8642,2285],{"class":563},[558,8644,7276],{"class":1684},[558,8646,4228],{"class":563},[558,8648,8649,8651,8653,8656,8658,8661],{"class":560,"line":6609},[558,8650,8597],{"class":4216},[558,8652,2285],{"class":563},[558,8654,8655],{"class":640}," translateY",[558,8657,644],{"class":563},[558,8659,8660],{"class":1684},"-20px",[558,8662,8610],{"class":563},[558,8664,8665],{"class":560,"line":6618},[558,8666,2386],{"class":563},[558,8668,8669],{"class":560,"line":6627},[558,8670,626],{"emptyLinePlaceholder":492},[558,8672,8673,8675,8678],{"class":560,"line":6632},[558,8674,807],{"class":563},[558,8676,8677],{"class":2204},"transition-basic-enter-active",[558,8679,3069],{"class":563},[558,8681,8682,8684,8687],{"class":560,"line":6640},[558,8683,807],{"class":563},[558,8685,8686],{"class":2204},"transition-basic-leave-active",[558,8688,2294],{"class":563},[558,8690,8691,8694,8696,8699,8702,8705],{"class":560,"line":6658},[558,8692,8693],{"class":4216},"  transition",[558,8695,2285],{"class":563},[558,8697,8698],{"class":604}," all ",[558,8700,8701],{"class":1684},"0.5s",[558,8703,8704],{"class":604}," ease",[558,8706,4228],{"class":563},[558,8708,8709],{"class":560,"line":6678},[558,8710,2386],{"class":563},[558,8712,8713],{"class":560,"line":6695},[558,8714,626],{"emptyLinePlaceholder":492},[558,8716,8717,8719,8722],{"class":560,"line":6722},[558,8718,807],{"class":563},[558,8720,8721],{"class":2204},"transition-basic-enter-to",[558,8723,3069],{"class":563},[558,8725,8726,8728,8731],{"class":560,"line":6737},[558,8727,807],{"class":563},[558,8729,8730],{"class":2204},"transition-basic-leave-from",[558,8732,2294],{"class":563},[558,8734,8735,8737,8739,8741],{"class":560,"line":6743},[558,8736,5504],{"class":4216},[558,8738,2285],{"class":563},[558,8740,3115],{"class":1684},[558,8742,4228],{"class":563},[558,8744,8745,8747,8749,8751,8753,8755],{"class":560,"line":6748},[558,8746,8597],{"class":4216},[558,8748,2285],{"class":563},[558,8750,8655],{"class":640},[558,8752,644],{"class":563},[558,8754,1111],{"class":1684},[558,8756,8610],{"class":563},[558,8758,8759],{"class":560,"line":6753},[558,8760,2386],{"class":563},[558,8762,8763,8765,8767],{"class":560,"line":6778},[558,8764,661],{"class":563},[558,8766,1532],{"class":567},[558,8768,590],{"class":563},[885,8770,7095,8772],{"id":8771},"using-iframes",[514,8773,8774],{},"iframes",[476,8776,8777,8778,8780],{},"You can achieve pretty cool results with the ",[514,8779,4150],{}," 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.",[2053,8782,8783],{},[8784,8785],"objects-html-iframe-demo",{},[4337,8787,4339,8788,8790],{},[4341,8789,4343],{},[544,8791,8793],{"className":4346,"code":8792,"language":4348,"meta":484,"style":484},"\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",[514,8794,8795,8801,8806,8811,8824,8837,8850,8863,8876,8890,8904,8908,8979],{"__ignoreMap":484},[558,8796,8797,8799],{"class":560,"line":485},[558,8798,564],{"class":563},[558,8800,4798],{"class":567},[558,8802,8803],{"class":560,"line":486},[558,8804,8805],{"class":571},"  transform\n",[558,8807,8808],{"class":560,"line":623},[558,8809,8810],{"class":571},"  center\n",[558,8812,8813,8816,8818,8820,8822],{"class":560,"line":629},[558,8814,8815],{"class":571},"  :cast-shadow",[558,8817,578],{"class":563},[558,8819,581],{"class":563},[558,8821,1087],{"class":584},[558,8823,727],{"class":563},[558,8825,8826,8829,8831,8833,8835],{"class":560,"line":658},[558,8827,8828],{"class":571},"  :receive-shadow",[558,8830,578],{"class":563},[558,8832,581],{"class":563},[558,8834,1087],{"class":584},[558,8836,727],{"class":563},[558,8838,8839,8842,8844,8846,8848],{"class":560,"line":668},[558,8840,8841],{"class":571},"  occlude",[558,8843,578],{"class":563},[558,8845,581],{"class":563},[558,8847,4942],{"class":584},[558,8849,727],{"class":563},[558,8851,8852,8855,8857,8859,8861],{"class":560,"line":673},[558,8853,8854],{"class":571},"  :z-index-range",[558,8856,578],{"class":563},[558,8858,581],{"class":563},[558,8860,4432],{"class":584},[558,8862,727],{"class":563},[558,8864,8865,8868,8870,8872,8874],{"class":560,"line":683},[558,8866,8867],{"class":571},"  :position-y",[558,8869,578],{"class":563},[558,8871,581],{"class":563},[558,8873,6505],{"class":584},[558,8875,727],{"class":563},[558,8877,8878,8881,8883,8885,8888],{"class":560,"line":694},[558,8879,8880],{"class":571},"  :portal",[558,8882,578],{"class":563},[558,8884,581],{"class":563},[558,8886,8887],{"class":584},"portalRef",[558,8889,727],{"class":563},[558,8891,8892,8895,8897,8899,8902],{"class":560,"line":549},[558,8893,8894],{"class":571},"  :style",[558,8896,578],{"class":563},[558,8898,581],{"class":563},[558,8900,8901],{"class":584},"{ userSelect: 'none' }",[558,8903,727],{"class":563},[558,8905,8906],{"class":560,"line":550},[558,8907,590],{"class":563},[558,8909,8910,8912,8915,8917,8919,8921,8924,8926,8929,8931,8933,8936,8938,8941,8943,8945,8947,8949,8952,8954,8956,8959,8961,8964,8966,8968,8971,8973,8975,8977],{"class":560,"line":551},[558,8911,686],{"class":563},[558,8913,8914],{"class":567},"iframe",[558,8916,2943],{"class":571},[558,8918,578],{"class":563},[558,8920,581],{"class":563},[558,8922,8923],{"class":584},"w-[700px] h-[500px]",[558,8925,581],{"class":563},[558,8927,8928],{"class":571}," src",[558,8930,578],{"class":563},[558,8932,581],{"class":563},[558,8934,8935],{"class":584},"https://tresjs.org",[558,8937,581],{"class":563},[558,8939,8940],{"class":571}," frameborder",[558,8942,578],{"class":563},[558,8944,581],{"class":563},[558,8946,1111],{"class":584},[558,8948,581],{"class":563},[558,8950,8951],{"class":571}," :width",[558,8953,578],{"class":563},[558,8955,581],{"class":563},[558,8957,8958],{"class":584},"700",[558,8960,581],{"class":563},[558,8962,8963],{"class":571}," :height",[558,8965,578],{"class":563},[558,8967,581],{"class":563},[558,8969,8970],{"class":584},"500",[558,8972,581],{"class":563},[558,8974,6437],{"class":563},[558,8976,8914],{"class":567},[558,8978,590],{"class":563},[558,8980,8981,8983,8985],{"class":560,"line":552},[558,8982,661],{"class":563},[558,8984,4348],{"class":567},[558,8986,590],{"class":563},[8988,8989,8990],"info",{},[476,8991,8992,8993,8996,8997,9000,9001],{},"The demos use ",[514,8994,8995],{},":z-index-range=\"[28, 0]\""," simply to ensure the HTML elements stay below the documentation header (which uses ",[514,8998,8999],{},"z-index: 30",").\n",[2868,9002,9003],{},"This value is for the docs only — you can ignore it or adjust it as needed.",[540,9005,919],{"id":918},[921,9007,9008,9018],{},[924,9009,9010],{},[927,9011,9012,9014,9016],{},[930,9013,1943],{},[930,9015,936],{},[930,9017,939],{},[941,9019,9020,9038,9053,9071,9097,9117,9134,9152,9164,9183,9206,9246,9283,9303,9336],{},[927,9021,9022,9027,9033],{},[946,9023,9024],{},[2868,9025,9026],{},"as",[946,9028,9029,9030,807],{},"Wrapping ",[4737,9031,9032],{},"HTML element",[946,9034,9035],{},[514,9036,9037],{},"'div'",[927,9039,9040,9045,9051],{},[946,9041,9042],{},[2868,9043,9044],{},"wrapperClass",[946,9046,1349,9047,9050],{},[514,9048,9049],{},"className"," of the wrapping element. element.",[946,9052],{},[927,9054,9055,9060,9067],{},[946,9056,9057],{},[2868,9058,9059],{},"prepend",[946,9061,9062,9063,9066],{},"Projects content ",[4737,9064,9065],{},"behind"," the canvas.",[946,9068,9069],{},[514,9070,1126],{},[927,9072,9073,9077,9093],{},[946,9074,9075],{},[2868,9076,1192],{},[946,9078,9079,9080,7089,9083,9085,9086],{},"Adds a ",[514,9081,9082],{},"transform: translate(-50%, -50%)",[904,9084],{},"➡️ ",[4737,9087,9088,9089,9092],{},"Ignored in ",[2868,9090,9091],{},"transform"," mode.",[946,9094,9095],{},[514,9096,1126],{},[927,9098,9099,9104,9113],{},[946,9100,9101],{},[2868,9102,9103],{},"fullscreen",[946,9105,9106,9107,9085,9109],{},"Aligns to the upper-left corner and fills the screen. ",[904,9108],{},[4737,9110,9088,9111,9092],{},[2868,9112,9091],{},[946,9114,9115],{},[514,9116,1126],{},[927,9118,9119,9124,9132],{},[946,9120,9121],{},[2868,9122,9123],{},"distanceFactor",[946,9125,9126,9127,9129,9130,807],{},"Children are scaled by this factor and also by distance to a ",[514,9128,3805],{},", or zoom when using an ",[514,9131,3808],{},[946,9133],{},[927,9135,9136,9141,9147],{},[946,9137,9138],{},[2868,9139,9140],{},"zIndexRange",[946,9142,9143,9144,807],{},"Defines the ",[4737,9145,9146],{},"Z-order range",[946,9148,9149],{},[514,9150,9151],{},"[16777271, 0]",[927,9153,9154,9159,9162],{},[946,9155,9156],{},[2868,9157,9158],{},"portal",[946,9160,9161],{},"Reference to a target container (for rendering into a different DOM node). container.",[946,9163],{},[927,9165,9166,9170,9179],{},[946,9167,9168],{},[2868,9169,9091],{},[946,9171,971,9172,9174,9175,9178],{},[514,9173,1087],{},", applies ",[514,9176,9177],{},"matrix3d"," transformations — the element appears as if it is inside the 3D scene.",[946,9180,9181],{},[514,9182,1126],{},[927,9184,9185,9190,9202],{},[946,9186,9187],{},[2868,9188,9189],{},"sprite",[946,9191,9192,9193,7089,9195,9085,9197],{},"Renders as a ",[4737,9194,9189],{},[904,9196],{},[4737,9198,9199,9200,9092],{},"Only in ",[2868,9201,9091],{},[946,9203,9204],{},[514,9205,1126],{},[927,9207,9208,9213,9237],{},[946,9209,9210],{},[2868,9211,9212],{},"calculatePosition",[946,9214,9215,9216,9218,909,9221,909,9224,9226,9227,9230,9231,9085,9233],{},"Callback function to override the default positioning logic. ",[904,9217],{},[2868,9219,9220],{},"Type:",[514,9222,9223],{},"(object: Object3D, camera: Camera, size: { width: number; height: number }) => [number, number, number]",[904,9225],{},"Receives the related 3D object, the active camera, and the current viewport size, and must return ",[514,9228,9229],{},"[x, y, z]"," pixel coordinates for placing the HTML element. ",[904,9232],{},[4737,9234,9088,9235,9092],{},[2868,9236,9091],{},[946,9238,9239],{},[519,9240,9243,9244],{"href":9241,"rel":9242},"https://github.com/Tresjs/cientos/blob/main/src/core/misc/html/utils.ts#L9-L19",[523],"Default ",[514,9245,9212],{},[927,9247,9248,9252,9281],{},[946,9249,9250],{},[2868,9251,4300],{},[946,9253,9254,9255,9257,9258,9260,9261,9264,9265,5804,9267,9270,9271,9257,9273,9276,9277,9280],{},"Enables occlusion. Possible values: ",[904,9256],{},"- ",[514,9259,1087],{}," → Occlusion against ",[4737,9262,9263],{},"all"," scene objects ",[904,9266],{},[514,9268,9269],{},"Ref\u003CTresObject3D>[]"," → Occlusion is enabled only against the specified objects. ",[904,9272],{},[514,9274,9275],{},"'blending'"," → Uses a ",[4737,9278,9279],{},"blending-based"," occlusion method (CSS-like depth blending).",[946,9282],{},[927,9284,9285,9289,9295],{},[946,9286,9287],{},[2868,9288,5660],{},[946,9290,9291,9292,9294],{},"Custom ",[514,9293,5660],{}," to be used.",[946,9296,9297],{},[519,9298,9301],{"href":9299,"rel":9300},"https://threejs.org/docs/?q=geometry#api/en/geometries/PlaneGeometry",[523],[514,9302,6944],{},[927,9304,9305,9309,9334],{},[946,9306,9307],{},[2868,9308,6340],{},[946,9310,9311,909,9317,909,9319,9325,9326,909,9328],{},[2868,9312,9313,9314,9316],{},"Custom shader ",[4737,9315,6340],{}," used for the occlusion mesh.",[904,9318],{},[2868,9320,9321,9322,9324],{},"Only applies when ",[514,9323,6936],{}," is enabled"," (an occlusion mesh is created). ",[904,9327],{},[4737,9329,9330,9331,9333],{},"Ignored in raycast occlusion modes (",[514,9332,1087],{},", object refs).",[946,9335],{},[927,9337,9338,9343,9365],{},[946,9339,9340],{},[2868,9341,9342],{},"transparentMaterial",[946,9344,9345,909,9352,909,9354,909,9359,909,9361],{},[2868,9346,9347,9348,9351],{},"Enables ",[4737,9349,9350],{},"transparent"," rendering for the occlusion material.",[904,9353],{},[2868,9355,9321,9356,9358],{},[514,9357,6936],{}," creates an occlusion mesh.",[904,9360],{},[4737,9362,9330,9363,9333],{},[514,9364,1087],{},[946,9366,9367],{},[514,9368,1126],{},[540,9370,1273],{"id":1272},[921,9372,9373,9381],{},[924,9374,9375],{},[927,9376,9377,9379],{},[930,9378,1282],{},[930,9380,936],{},[941,9382,9383],{},[927,9384,9385,9388],{},[946,9386,9387],{},"onOcclude",[946,9389,9390],{},"Called when the occlusion state changes.",[540,9392,9394],{"id":9393},"exposed-properties","Exposed properties",[921,9396,9397,9409],{},[924,9398,9399],{},[927,9400,9401,9404,9407],{},[930,9402,9403],{},"Property",[930,9405,9406],{},"Type",[930,9408,936],{},[941,9410,9411,9433,9454],{},[927,9412,9413,9417,9422],{},[946,9414,9415],{},[2868,9416,2685],{},[946,9418,9419],{},[514,9420,9421],{},"Ref\u003CTresObject3D | null>",[946,9423,9424,9425,9430,9431,807],{},"Reference to the root ",[2868,9426,9427],{},[514,9428,9429],{},"\u003CTresGroup>"," used by ",[514,9432,3812],{},[927,9434,9435,9440,9445],{},[946,9436,9437],{},[2868,9438,9439],{},"isVisible",[946,9441,9442],{},[514,9443,9444],{},"Ref\u003Cboolean>",[946,9446,9447,9448,7083,9451,807],{},"Reactive value that indicates whether the HTML content is ",[2868,9449,9450],{},"currently visible",[2868,9452,9453],{},"occluded",[927,9455,9456,9461,9465],{},[946,9457,9458],{},[2868,9459,9460],{},"occlusionMesh",[946,9462,9463],{},[514,9464,9421],{},[946,9466,9467,9468,9471,9472,7047,9474,9476],{},"Reference to the ",[2868,9469,9470],{},"occlusion mesh"," created when ",[514,9473,6936],{},[2868,9475,7050],{},". Used internally for geometry-based occlusion.",[540,9478,9480],{"id":9479},"caveats","Caveats",[530,9482,9483,9516,9533,9592,9610],{},[533,9484,9485,9486,9491,9492,9494,9495,7083,9498,9501,9502,9504,9505,9508,9509,9512,9513,9515],{},"✨ When using ",[2868,9487,9488],{},[514,9489,9490],{},"\u003CHtml occlude>",", if the ",[514,9493,3812],{}," component is ",[2868,9496,9497],{},"overlapping",[2868,9499,9500],{},"inside a 3D object",", it will be considered ",[2868,9503,9453],{}," and therefore ",[2868,9506,9507],{},"hidden",". To avoid this, ",[2868,9510,9511],{},"adjust the position"," of the ",[514,9514,3812],{}," component in your scene.",[533,9517,9518,9519,9524,9525,9528,9529,9532],{},"🎨 When using ",[2868,9520,9521],{},[514,9522,9523],{},"\u003CHtml occlude=\"blending\">",", the HTML content is no longer ",[2868,9526,9527],{},"selectable"," because it is rendered ",[2868,9530,9531],{},"behind the canvas",". This is required to achieve the blending effect.",[533,9534,9535,9536,9538,9539,9541,9542],{},"⚙️ When using a ",[2868,9537,7035],{}," with occlusion in ",[514,9540,4942],{}," mode, there are a few important requirements to ensure the HTML content renders correctly ⬇️",[4337,9543,4339,9544,9547],{},[4341,9545,9546],{},"See more information",[9548,9549,9550,9562,9570,9577],"ol",{},[533,9551,9552,9553,2302,9555,9558,9559,807],{},"If you provide your own material, it must be ",[2868,9554,9350],{},[514,9556,9557],{},"transparent: true",") with an ",[2868,9560,9561],{},"opacity \u003C 1",[533,9563,9564,9565,9569],{},"If you are not providing a custom material, enable ",[2868,9566,9567],{},[514,9568,9342],{}," so the internal shader becomes transparent.",[533,9571,9572,9573,9576],{},"The occlusion mesh requires a ",[2868,9574,9575],{},"fully transparent canvas background","; otherwise, thin borders or halo artifacts may appear.",[533,9578,9579,9580,9583,9584,1687,9586,9589,9590,807],{},"To compensate for the transparent canvas, you may ",[2868,9581,9582],{},"reapply your previous clear-color as a CSS background"," on the ",[514,9585,4348],{},[514,9587,9588],{},"body",", or a wrapper ",[514,9591,5556],{},[533,9593,9594,9595,9599,9600,9602,9603,9605,9606,9609],{},"🔶 When using ",[2868,9596,9597],{},[514,9598,9342],{},", overlapping ",[514,9601,3812],{}," elements (especially multiple ",[514,9604,6936],{}," instances) may cause ",[2868,9607,9608],{},"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.",[533,9611,9612,9613,9615,9616,9619,9620],{},"🔵 To avoid thin border artifacts when using ",[514,9614,6936],{},", make sure your ",[514,9617,9618],{},"\u003CTresCanvas>"," is fully transparent:",[544,9621,9623],{"className":546,"code":9622,"language":554,"meta":484,"style":484},"\u003CTresCanvas :alpha=\"true\" :clearAlpha=\"0\" />\n",[514,9624,9625],{"__ignoreMap":484},[558,9626,9627,9629,9631,9633,9636,9638,9640,9642,9644,9646,9649,9651,9653,9655,9657],{"class":560,"line":485},[558,9628,564],{"class":563},[558,9630,689],{"class":567},[558,9632,1671],{"class":563},[558,9634,9635],{"class":571},"alpha",[558,9637,578],{"class":563},[558,9639,581],{"class":563},[558,9641,1087],{"class":2557},[558,9643,581],{"class":563},[558,9645,1671],{"class":563},[558,9647,9648],{"class":571},"clearAlpha",[558,9650,578],{"class":563},[558,9652,581],{"class":563},[558,9654,1111],{"class":1684},[558,9656,581],{"class":563},[558,9658,1703],{"class":563},[921,9660,9661,9671],{},[924,9662,9663],{},[927,9664,9665,9667,9669],{},[930,9666,1943],{},[930,9668,936],{},[930,9670,939],{},[941,9672,9673,9686,9697,9710,9726,9741,9752,9765,9776,9789,9802,9815,9837,9852],{},[927,9674,9675,9679,9682],{},[946,9676,9677],{},[2868,9678,9026],{},[946,9680,9681],{},"Wrapping html element.",[946,9683,9684],{},[514,9685,9037],{},[927,9687,9688,9692,9695],{},[946,9689,9690],{},[2868,9691,9044],{},[946,9693,9694],{},"The className of the wrapping element.",[946,9696],{},[927,9698,9699,9703,9706],{},[946,9700,9701],{},[2868,9702,9059],{},[946,9704,9705],{},"Project content behind the canvas.",[946,9707,9708],{},[514,9709,1126],{},[927,9711,9712,9716,9722],{},[946,9713,9714],{},[2868,9715,1192],{},[946,9717,9718,9719],{},"Adds a -50%/-50% CSS transform. ",[558,9720,9721],{},"Ignored in transform mode",[946,9723,9724],{},[514,9725,1126],{},[927,9727,9728,9732,9737],{},[946,9729,9730],{},[2868,9731,9103],{},[946,9733,9734,9735],{},"Aligns to the upper-left corner, fills the screen. ",[558,9736,9721],{},[946,9738,9739],{},[514,9740,1126],{},[927,9742,9743,9747,9750],{},[946,9744,9745],{},[2868,9746,9123],{},[946,9748,9749],{},"Children will be scaled by this factor, and also by distance to a PerspectiveCamera / zoom by an OrthographicCamera.",[946,9751],{},[927,9753,9754,9758,9761],{},[946,9755,9756],{},[2868,9757,9140],{},[946,9759,9760],{},"Z-order range.",[946,9762,9763],{},[514,9764,9151],{},[927,9766,9767,9771,9774],{},[946,9768,9769],{},[2868,9770,9158],{},[946,9772,9773],{},"Reference to target container.",[946,9775],{},[927,9777,9778,9782,9785],{},[946,9779,9780],{},[2868,9781,9091],{},[946,9783,9784],{},"If true, applies matrix3d transformations.",[946,9786,9787],{},[514,9788,1126],{},[927,9790,9791,9795,9798],{},[946,9792,9793],{},[2868,9794,9189],{},[946,9796,9797],{},"Renders as sprite, but only in transform mode.",[946,9799,9800],{},[514,9801,1126],{},[927,9803,9804,9808,9813],{},[946,9805,9806],{},[2868,9807,9212],{},[946,9809,9810,9811],{},"Override default positioning function. ",[558,9812,9721],{},[946,9814],{},[927,9816,9817,9821,9835],{},[946,9818,9819],{},[2868,9820,4300],{},[946,9822,9823,9824,1687,9826,1687,9828,9831,9832,9834],{},"Can be ",[514,9825,1087],{},[514,9827,9269],{},[514,9829,9830],{},"'raycast'",", or ",[514,9833,9275],{},". True occludes the entire scene.",[946,9836],{},[927,9838,9839,9843,9848],{},[946,9840,9841],{},[2868,9842,5660],{},[946,9844,9291,9845,9847],{},[514,9846,5660],{}," to be use",[946,9849,9850],{},[514,9851,6944],{},[927,9853,9854,9858,9862],{},[946,9855,9856],{},[2868,9857,6340],{},[946,9859,9313,9860,9847],{},[514,9861,6340],{},[946,9863],{},[540,9865,1273],{"id":9866},"events-1",[921,9868,9869,9877],{},[924,9870,9871],{},[927,9872,9873,9875],{},[930,9874,1282],{},[930,9876,936],{},[941,9878,9879],{},[927,9880,9881,9883],{},[946,9882,9387],{},[946,9884,9390],{},[1532,9886,9887],{},"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":484,"searchDepth":485,"depth":486,"links":9889},[9890,9891,9896,9897,9902,9903,9904,9905,9906],{"id":542,"depth":486,"text":15},{"id":4293,"depth":486,"text":4294,"children":9892},[9893,9894,9895],{"id":4489,"depth":623,"text":4490},{"id":4652,"depth":623,"text":4653},{"id":4916,"depth":623,"text":4917},{"id":6929,"depth":486,"text":6930},{"id":7094,"depth":486,"text":9898,"children":9899},"Using \u003CTransition>",[9900],{"id":8771,"depth":623,"text":9901},"Using iframes",{"id":918,"depth":486,"text":919},{"id":1272,"depth":486,"text":1273},{"id":9393,"depth":486,"text":9394},{"id":9479,"depth":486,"text":9480},{"id":9866,"depth":486,"text":1273},"Allows you put DOM elements in your Tres.js scene.",{},{"title":417,"description":9907},"ywp4dBumrlkuSeTPICaWKzd__5F5_TaWhwF0rVH0VWc",{"id":9912,"title":421,"body":9913,"description":10542,"extension":489,"links":490,"meta":10543,"navigation":492,"path":422,"seo":10544,"stem":423,"__hash__":10545},"docs/2.api/9.objects/image.md",{"type":473,"value":9914,"toc":10537},[9915,9920,9926,9928,10122,10124,10131,10346,10348,10371,10534],[506,9916,9917],{},[9918,9919],"objects-image",{},[476,9921,9922,9925],{},[514,9923,9924],{},"\u003CImage />"," is a shader-based component that optionally loads then displays an image texture on a default plane or on your custom geometry.",[540,9927,15],{"id":542},[544,9929,9932],{"className":546,"code":9930,"highlights":9931,"language":554,"meta":484,"style":484},"\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",[623,549,550,551],[514,9933,9934,9954,9972,9992,10000,10004,10012,10020,10052,10056,10064,10079,10102,10106,10114],{"__ignoreMap":484},[558,9935,9936,9938,9940,9942,9944,9946,9948,9950,9952],{"class":560,"line":485},[558,9937,564],{"class":563},[558,9939,568],{"class":567},[558,9941,572],{"class":571},[558,9943,575],{"class":571},[558,9945,578],{"class":563},[558,9947,581],{"class":563},[558,9949,585],{"class":584},[558,9951,581],{"class":563},[558,9953,590],{"class":563},[558,9955,9956,9958,9960,9962,9964,9966,9968,9970],{"class":560,"line":486},[558,9957,598],{"class":597},[558,9959,601],{"class":563},[558,9961,2155],{"class":604},[558,9963,608],{"class":563},[558,9965,611],{"class":597},[558,9967,614],{"class":563},[558,9969,2144],{"class":584},[558,9971,620],{"class":563},[558,9973,9975,9977,9979,9982,9984,9986,9988,9990],{"class":9974,"line":623},[560,594],[558,9976,598],{"class":597},[558,9978,601],{"class":563},[558,9980,9981],{"class":604}," Image",[558,9983,608],{"class":563},[558,9985,611],{"class":597},[558,9987,614],{"class":563},[558,9989,617],{"class":584},[558,9991,620],{"class":563},[558,9993,9994,9996,9998],{"class":560,"line":629},[558,9995,661],{"class":563},[558,9997,568],{"class":567},[558,9999,590],{"class":563},[558,10001,10002],{"class":560,"line":658},[558,10003,626],{"emptyLinePlaceholder":492},[558,10005,10006,10008,10010],{"class":560,"line":668},[558,10007,564],{"class":563},[558,10009,678],{"class":567},[558,10011,590],{"class":563},[558,10013,10014,10016,10018],{"class":560,"line":673},[558,10015,686],{"class":563},[558,10017,689],{"class":567},[558,10019,590],{"class":563},[558,10021,10022,10024,10026,10028,10030,10032,10034,10036,10038,10040,10042,10044,10046,10048,10050],{"class":560,"line":683},[558,10023,697],{"class":563},[558,10025,1668],{"class":567},[558,10027,1671],{"class":563},[558,10029,1674],{"class":571},[558,10031,578],{"class":563},[558,10033,581],{"class":563},[558,10035,1681],{"class":563},[558,10037,1111],{"class":1684},[558,10039,1687],{"class":563},[558,10041,1111],{"class":1684},[558,10043,1687],{"class":563},[558,10045,1695],{"class":1684},[558,10047,1698],{"class":563},[558,10049,581],{"class":563},[558,10051,1703],{"class":563},[558,10053,10054],{"class":560,"line":694},[558,10055,626],{"emptyLinePlaceholder":492},[558,10057,10059,10061],{"class":10058,"line":549},[560,594],[558,10060,697],{"class":563},[558,10062,10063],{"class":567},"Image\n",[558,10065,10067,10070,10072,10074,10077],{"class":10066,"line":550},[560,594],[558,10068,10069],{"class":571},"      url",[558,10071,578],{"class":563},[558,10073,581],{"class":563},[558,10075,10076],{"class":584},"https://upload.wikimedia.org/wikipedia/commons/f/f0/Cyanistes_caeruleus_Oulu_20150516.JPG",[558,10078,727],{"class":563},[558,10080,10082,10084,10086,10088,10090,10092,10094,10096,10098,10100],{"class":10081,"line":551},[560,594],[558,10083,2547],{"class":563},[558,10085,4088],{"class":571},[558,10087,578],{"class":563},[558,10089,581],{"class":563},[558,10091,1681],{"class":563},[558,10093,1690],{"class":1684},[558,10095,1687],{"class":563},[558,10097,1690],{"class":1684},[558,10099,1698],{"class":563},[558,10101,727],{"class":563},[558,10103,10104],{"class":560,"line":552},[558,10105,2592],{"class":563},[558,10107,10108,10110,10112],{"class":560,"line":553},[558,10109,782],{"class":563},[558,10111,689],{"class":567},[558,10113,590],{"class":563},[558,10115,10116,10118,10120],{"class":560,"line":769},[558,10117,661],{"class":563},[558,10119,678],{"class":567},[558,10121,590],{"class":563},[540,10123,919],{"id":918},[797,10125,10126],{},[476,10127,10128,10130],{},[514,10129,9924],{}," is a THREE.Mesh and most Mesh attributes can be used as props on the component.",[921,10132,10133,10143],{},[924,10134,10135],{},[927,10136,10137,10139,10141],{},[930,10138,1943],{"align":932},[930,10140,936],{"align":932},[930,10142,939],{},[941,10144,10145,10159,10175,10189,10203,10220,10234,10253,10271,10286,10303,10323,10334],{},[927,10146,10147,10152,10155],{},[946,10148,10149],{"align":932},[514,10150,10151],{},"segments",[946,10153,10154],{"align":932},"Number of divisions in the default geometry.",[946,10156,10157],{},[514,10158,1784],{},[927,10160,10161,10165,10171],{},[946,10162,10163],{"align":932},[514,10164,4088],{},[946,10166,10167,10168],{"align":932},"Scale of the geometry. ",[514,10169,10170],{},"number | [number, number]",[946,10172,10173],{},[514,10174,1784],{},[927,10176,10177,10181,10184],{},[946,10178,10179],{"align":932},[514,10180,2656],{},[946,10182,10183],{"align":932},"Color multiplied into the image texture.",[946,10185,10186],{},[514,10187,10188],{},"'white'",[927,10190,10191,10196,10199],{},[946,10192,10193],{"align":932},[514,10194,10195],{},"zoom",[946,10197,10198],{"align":932},"Shrinks or enlarges the image texture.",[946,10200,10201],{},[514,10202,1784],{},[927,10204,10205,10210,10216],{},[946,10206,10207],{"align":932},[514,10208,10209],{},"radius",[946,10211,10212,10213,10215],{"align":932},"Border radius applied to the image texture. (Intended for rectangular geometries. Use with ",[514,10214,9350],{},".)",[946,10217,10218],{},[514,10219,1111],{},[927,10221,10222,10227,10230],{},[946,10223,10224],{"align":932},[514,10225,10226],{},"grayscale",[946,10228,10229],{"align":932},"Power of grayscale effect. 0 is off. 1 is full grayscale.",[946,10231,10232],{},[514,10233,1111],{},[927,10235,10236,10241,10249],{},[946,10237,10238],{"align":932},[514,10239,10240],{},"toneMapped",[946,10242,10243,10244],{"align":932},"Whether this material is tone mapped according to the renderers toneMapping settings. ",[519,10245,10248],{"href":10246,"rel":10247},"https://threejs.org/docs/?q=material#api/en/materials/Material.toneMapped",[523],"See THREE.material.tonemapped",[946,10250,10251],{},[514,10252,1111],{},[927,10254,10255,10259,10267],{},[946,10256,10257],{"align":932},[514,10258,9350],{},[946,10260,10261,10262],{"align":932},"Whether the image material should be transparent. ",[519,10263,10266],{"href":10264,"rel":10265},"https://threejs.org/docs/?q=material#api/en/materials/Material.transparent",[523],"See THREE.material.transparent",[946,10268,10269],{},[514,10270,1126],{},[927,10272,10273,10277,10282],{},[946,10274,10275],{"align":932},[514,10276,9350],{},[946,10278,10261,10279],{"align":932},[519,10280,10266],{"href":10264,"rel":10281},[523],[946,10283,10284],{},[514,10285,1126],{},[927,10287,10288,10293,10299],{},[946,10289,10290],{"align":932},[514,10291,10292],{},"opacity",[946,10294,10295,10296],{"align":932},"Opacity of the image material. ",[519,10297,10266],{"href":10264,"rel":10298},[523],[946,10300,10301],{},[514,10302,1784],{},[927,10304,10305,10310,10318],{},[946,10306,10307],{"align":932},[514,10308,10309],{},"side",[946,10311,10312,10313],{"align":932},"THREE.Side of the image material. ",[519,10314,10317],{"href":10315,"rel":10316},"https://threejs.org/docs/?q=material#api/en/materials/Material.side",[523],"See THREE.material.side",[946,10319,10320],{},[514,10321,10322],{},"FrontSide",[927,10324,10325,10329,10332],{},[946,10326,10327],{"align":932},[514,10328,2690],{},[946,10330,10331],{"align":932},"Image texture to display on the geometry.",[946,10333],{},[927,10335,10336,10341,10344],{},[946,10337,10338],{"align":932},[514,10339,10340],{},"url",[946,10342,10343],{"align":932},"Image URL to load and display on the geometry.",[946,10345],{},[540,10347,9480],{"id":9479},[476,10349,10350,10351,10353,10354,10357,10358,10360,10361,10364,10365,7083,10368,1514],{},"By default, images loaded via the ",[514,10352,10340],{}," prop use the renderer’s output color space. For advanced control, pass a ",[514,10355,10356],{},"THREE.Texture"," via the ",[514,10359,2690],{}," prop and set its ",[514,10362,10363],{},"colorSpace"," (e.g., ",[514,10366,10367],{},"THREE.SRGBColorSpace",[514,10369,10370],{},"THREE.LinearSRGBColorSpace",[544,10372,10374],{"className":546,"code":10373,"language":554,"meta":484,"style":484},"\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",[514,10375,10376,10386,10405,10424,10442,10463,10480,10486,10494,10498,10506,10526],{"__ignoreMap":484},[558,10377,10378,10380,10382,10384],{"class":560,"line":485},[558,10379,564],{"class":563},[558,10381,568],{"class":567},[558,10383,572],{"class":571},[558,10385,590],{"class":563},[558,10387,10388,10390,10392,10395,10397,10399,10401,10403],{"class":560,"line":486},[558,10389,598],{"class":597},[558,10391,601],{"class":563},[558,10393,10394],{"class":604}," useTexture",[558,10396,608],{"class":563},[558,10398,611],{"class":597},[558,10400,614],{"class":563},[558,10402,617],{"class":584},[558,10404,620],{"class":563},[558,10406,10407,10409,10411,10414,10416,10418,10420,10422],{"class":560,"line":623},[558,10408,598],{"class":597},[558,10410,601],{"class":563},[558,10412,10413],{"class":604}," SRGBColorSpace",[558,10415,608],{"class":563},[558,10417,611],{"class":597},[558,10419,614],{"class":563},[558,10421,5124],{"class":584},[558,10423,620],{"class":563},[558,10425,10426,10428,10430,10433,10435,10437,10439],{"class":560,"line":629},[558,10427,632],{"class":571},[558,10429,601],{"class":563},[558,10431,10432],{"class":604}," state ",[558,10434,3129],{"class":563},[558,10436,2347],{"class":563},[558,10438,10394],{"class":640},[558,10440,10441],{"class":604},"(URL)\n",[558,10443,10444,10447,10450,10452,10454,10456,10459,10461],{"class":560,"line":658},[558,10445,10446],{"class":640},"watch",[558,10448,10449],{"class":604},"(state",[558,10451,1620],{"class":563},[558,10453,2302],{"class":563},[558,10455,2690],{"class":2274},[558,10457,10458],{"class":563},")",[558,10460,7586],{"class":571},[558,10462,2294],{"class":563},[558,10464,10465,10468,10470,10472,10474,10476],{"class":560,"line":668},[558,10466,10467],{"class":604},"  texture",[558,10469,807],{"class":563},[558,10471,10363],{"class":604},[558,10473,2347],{"class":563},[558,10475,10413],{"class":604},[558,10477,10479],{"class":10478},"sHwdD"," // assign a custom color space\n",[558,10481,10482,10484],{"class":560,"line":673},[558,10483,3129],{"class":563},[558,10485,655],{"class":604},[558,10487,10488,10490,10492],{"class":560,"line":683},[558,10489,661],{"class":563},[558,10491,568],{"class":567},[558,10493,590],{"class":563},[558,10495,10496],{"class":560,"line":694},[558,10497,626],{"emptyLinePlaceholder":492},[558,10499,10500,10502,10504],{"class":560,"line":549},[558,10501,564],{"class":563},[558,10503,678],{"class":567},[558,10505,590],{"class":563},[558,10507,10508,10510,10512,10514,10516,10518,10520,10522,10524],{"class":560,"line":550},[558,10509,686],{"class":563},[558,10511,421],{"class":567},[558,10513,1671],{"class":563},[558,10515,2690],{"class":571},[558,10517,578],{"class":563},[558,10519,581],{"class":563},[558,10521,2690],{"class":604},[558,10523,581],{"class":563},[558,10525,1703],{"class":563},[558,10527,10528,10530,10532],{"class":560,"line":551},[558,10529,661],{"class":563},[558,10531,678],{"class":567},[558,10533,590],{"class":563},[1532,10535,10536],{},"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":484,"searchDepth":485,"depth":486,"links":10538},[10539,10540,10541],{"id":542,"depth":486,"text":15},{"id":918,"depth":486,"text":919},{"id":9479,"depth":486,"text":9480},"Display image textures with shader-based effects.",{},{"title":421,"description":10542},"jEAPHxilh9_Gg2oZg9-kp8JsJ1tSjkYRBYlGbuY9YbM",{"id":10547,"title":425,"body":10548,"description":11398,"extension":489,"links":490,"meta":11399,"navigation":492,"path":426,"seo":11400,"stem":427,"__hash__":11401},"docs/2.api/9.objects/marching-cubes.md",{"type":473,"value":10549,"toc":11392},[10550,10555,10566,10569,10594,10596,11204,11206,11276,11280,11326,11330,11389],[506,10551,10552],{},[10553,10554],"objects-marching-cubes",{},[476,10556,10557,10560,10561,807],{},[514,10558,10559],{},"\u003CMarchingCubes />"," is a wrapper around ",[519,10562,10565],{"href":10563,"rel":10564},"https://threejs.org/examples/#webgl_marchingcubes",[523],"THREE's Marching Cubes",[476,10567,10568],{},"It includes 3 components:",[530,10570,10571,10584,10589],{},[533,10572,10573,10575,10576,10579,10580,10583],{},[514,10574,10559],{}," – container element for ",[514,10577,10578],{},"\u003CMarchingCube />","s and ",[514,10581,10582],{},"\u003CMarchingPlane />","s",[533,10585,10586,10588],{},[514,10587,10578],{}," - an individual metaball",[533,10590,10591,10593],{},[514,10592,10582],{}," – optional bounding plane that interacts with the metaballs",[540,10595,15],{"id":542},[544,10597,10600],{"className":546,"code":10598,"highlights":10599,"language":554,"meta":484,"style":484},"\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",[486,769,779,789,1882,1917,1926,2485,2490,2074],[514,10601,10602,10622,10656,10674,10698,10702,10736,10799,10807,10811,10819,10852,10860,10868,10872,10908,10929,10937,10961,10976,10991,10996,11056,11065,11069,11078,11134,11188,11196],{"__ignoreMap":484},[558,10603,10604,10606,10608,10610,10612,10614,10616,10618,10620],{"class":560,"line":485},[558,10605,564],{"class":563},[558,10607,568],{"class":567},[558,10609,572],{"class":571},[558,10611,575],{"class":571},[558,10613,578],{"class":563},[558,10615,581],{"class":563},[558,10617,585],{"class":584},[558,10619,581],{"class":563},[558,10621,590],{"class":563},[558,10623,10625,10627,10629,10632,10634,10637,10639,10642,10644,10646,10648,10650,10652,10654],{"class":10624,"line":486},[560,594],[558,10626,598],{"class":597},[558,10628,601],{"class":563},[558,10630,10631],{"class":604}," MarchingCube",[558,10633,1620],{"class":563},[558,10635,10636],{"class":604}," MarchingCubes",[558,10638,1620],{"class":563},[558,10640,10641],{"class":604}," MarchingPlane",[558,10643,1620],{"class":563},[558,10645,1623],{"class":604},[558,10647,608],{"class":563},[558,10649,611],{"class":597},[558,10651,614],{"class":563},[558,10653,617],{"class":584},[558,10655,620],{"class":563},[558,10657,10658,10660,10662,10664,10666,10668,10670,10672],{"class":560,"line":623},[558,10659,598],{"class":597},[558,10661,601],{"class":563},[558,10663,2155],{"class":604},[558,10665,608],{"class":563},[558,10667,611],{"class":597},[558,10669,614],{"class":563},[558,10671,2144],{"class":584},[558,10673,620],{"class":563},[558,10675,10676,10678,10680,10683,10685,10688,10690,10692,10694,10696],{"class":560,"line":629},[558,10677,598],{"class":597},[558,10679,601],{"class":563},[558,10681,10682],{"class":604}," NoToneMapping",[558,10684,1620],{"class":563},[558,10686,10687],{"class":604}," Vector3",[558,10689,608],{"class":563},[558,10691,611],{"class":597},[558,10693,614],{"class":563},[558,10695,5124],{"class":584},[558,10697,620],{"class":563},[558,10699,10700],{"class":560,"line":658},[558,10701,626],{"emptyLinePlaceholder":492},[558,10703,10704,10706,10709,10711,10713,10715,10718,10720,10722,10724,10726,10729,10731,10733],{"class":560,"line":668},[558,10705,632],{"class":571},[558,10707,10708],{"class":604}," rand ",[558,10710,578],{"class":563},[558,10712,7747],{"class":563},[558,10714,7586],{"class":571},[558,10716,10717],{"class":604}," (Math",[558,10719,807],{"class":563},[558,10721,7688],{"class":640},[558,10723,7691],{"class":604},[558,10725,6769],{"class":563},[558,10727,10728],{"class":1684}," 0.5",[558,10730,2316],{"class":604},[558,10732,7694],{"class":563},[558,10734,10735],{"class":1684}," 1.25\n",[558,10737,10738,10740,10743,10745,10748,10750,10753,10755,10757,10760,10762,10765,10768,10770,10772,10775,10777,10779,10782,10785,10787,10790,10792,10794,10796],{"class":560,"line":673},[558,10739,632],{"class":571},[558,10741,10742],{"class":604}," positions ",[558,10744,578],{"class":563},[558,10746,10747],{"class":604}," Array",[558,10749,807],{"class":563},[558,10751,10752],{"class":640},"from",[558,10754,644],{"class":604},[558,10756,2319],{"class":563},[558,10758,10759],{"class":567}," length",[558,10761,2285],{"class":563},[558,10763,10764],{"class":1684}," 40",[558,10766,10767],{"class":563}," },",[558,10769,7747],{"class":563},[558,10771,7586],{"class":571},[558,10773,10774],{"class":563}," new",[558,10776,10687],{"class":640},[558,10778,644],{"class":604},[558,10780,10781],{"class":640},"rand",[558,10783,10784],{"class":604},"()",[558,10786,1620],{"class":563},[558,10788,10789],{"class":640}," rand",[558,10791,10784],{"class":604},[558,10793,1620],{"class":563},[558,10795,10789],{"class":640},[558,10797,10798],{"class":604},"()))\n",[558,10800,10801,10803,10805],{"class":560,"line":683},[558,10802,661],{"class":563},[558,10804,568],{"class":567},[558,10806,590],{"class":563},[558,10808,10809],{"class":560,"line":694},[558,10810,626],{"emptyLinePlaceholder":492},[558,10812,10813,10815,10817],{"class":560,"line":549},[558,10814,564],{"class":563},[558,10816,678],{"class":567},[558,10818,590],{"class":563},[558,10820,10821,10823,10825,10827,10829,10831,10834,10836,10838,10841,10843,10845,10848,10850],{"class":560,"line":550},[558,10822,686],{"class":563},[558,10824,689],{"class":567},[558,10826,3917],{"class":571},[558,10828,578],{"class":563},[558,10830,581],{"class":563},[558,10832,10833],{"class":584},"#222",[558,10835,581],{"class":563},[558,10837,1671],{"class":563},[558,10839,10840],{"class":571},"tone-mapping",[558,10842,578],{"class":563},[558,10844,581],{"class":563},[558,10846,10847],{"class":604},"NoToneMapping",[558,10849,581],{"class":563},[558,10851,590],{"class":563},[558,10853,10854,10856,10858],{"class":560,"line":551},[558,10855,697],{"class":563},[558,10857,1668],{"class":567},[558,10859,1703],{"class":563},[558,10861,10862,10864,10866],{"class":560,"line":552},[558,10863,697],{"class":563},[558,10865,1710],{"class":567},[558,10867,1703],{"class":563},[558,10869,10870],{"class":560,"line":553},[558,10871,626],{"emptyLinePlaceholder":492},[558,10873,10875,10877,10879,10881,10883,10885,10887,10890,10892,10894,10897,10899,10901,10904,10906],{"class":10874,"line":769},[560,594],[558,10876,697],{"class":563},[558,10878,425],{"class":567},[558,10880,1671],{"class":563},[558,10882,1728],{"class":571},[558,10884,578],{"class":563},[558,10886,581],{"class":563},[558,10888,10889],{"class":1684},"40",[558,10891,581],{"class":563},[558,10893,1671],{"class":563},[558,10895,10896],{"class":571},"max-poly-count",[558,10898,578],{"class":563},[558,10900,581],{"class":563},[558,10902,10903],{"class":1684},"40000",[558,10905,581],{"class":563},[558,10907,590],{"class":563},[558,10909,10911,10913,10916,10919,10921,10923,10925,10927],{"class":10910,"line":779},[560,594],[558,10912,708],{"class":563},[558,10914,10915],{"class":567},"MarchingPlane",[558,10917,10918],{"class":571}," plane-type",[558,10920,578],{"class":563},[558,10922,581],{"class":563},[558,10924,2372],{"class":584},[558,10926,581],{"class":563},[558,10928,1703],{"class":563},[558,10930,10932,10934],{"class":10931,"line":789},[560,594],[558,10933,708],{"class":563},[558,10935,10936],{"class":567},"MarchingCube\n",[558,10938,10940,10942,10944,10946,10948,10950,10953,10956,10959],{"class":10939,"line":1882},[560,594],[558,10941,5651],{"class":597},[558,10943,578],{"class":563},[558,10945,581],{"class":563},[558,10947,1674],{"class":604},[558,10949,1687],{"class":563},[558,10951,10952],{"class":604},"i",[558,10954,10955],{"class":563}," of ",[558,10957,10958],{"class":604},"positions",[558,10960,727],{"class":563},[558,10962,10964,10966,10968,10970,10972,10974],{"class":10963,"line":1917},[560,594],[558,10965,748],{"class":563},[558,10967,5681],{"class":571},[558,10969,578],{"class":563},[558,10971,581],{"class":563},[558,10973,10952],{"class":604},[558,10975,727],{"class":563},[558,10977,10979,10981,10983,10985,10987,10989],{"class":10978,"line":1926},[560,594],[558,10980,748],{"class":563},[558,10982,1674],{"class":571},[558,10984,578],{"class":563},[558,10986,581],{"class":563},[558,10988,1674],{"class":604},[558,10990,727],{"class":563},[558,10992,10994],{"class":10993,"line":2485},[560,594],[558,10995,766],{"class":563},[558,10997,10999,11001,11004,11007,11009,11011,11014,11016,11018,11021,11023,11025,11027,11029,11032,11034,11036,11039,11041,11043,11046,11048,11050,11052,11054],{"class":10998,"line":2490},[560,594],[558,11000,708],{"class":563},[558,11002,11003],{"class":567},"TresMeshPhongMaterial",[558,11005,11006],{"class":571}," specular",[558,11008,578],{"class":563},[558,11010,581],{"class":563},[558,11012,11013],{"class":584},"#111111",[558,11015,581],{"class":563},[558,11017,1671],{"class":563},[558,11019,11020],{"class":571},"shininess",[558,11022,578],{"class":563},[558,11024,581],{"class":563},[558,11026,1071],{"class":1684},[558,11028,581],{"class":563},[558,11030,11031],{"class":571}," color",[558,11033,578],{"class":563},[558,11035,581],{"class":563},[558,11037,11038],{"class":584},"#049ef4",[558,11040,581],{"class":563},[558,11042,1671],{"class":563},[558,11044,11045],{"class":571},"reflectivity",[558,11047,578],{"class":563},[558,11049,581],{"class":563},[558,11051,1784],{"class":1684},[558,11053,581],{"class":563},[558,11055,1703],{"class":563},[558,11057,11059,11061,11063],{"class":11058,"line":2074},[560,594],[558,11060,772],{"class":563},[558,11062,425],{"class":567},[558,11064,590],{"class":563},[558,11066,11067],{"class":560,"line":2075},[558,11068,626],{"emptyLinePlaceholder":492},[558,11070,11071,11073,11076],{"class":560,"line":2076},[558,11072,697],{"class":563},[558,11074,11075],{"class":567},"TresAxesHelper",[558,11077,1703],{"class":563},[558,11079,11080,11082,11084,11086,11088,11090,11093,11095,11097,11099,11101,11103,11105,11107,11109,11111,11113,11115,11117,11119,11121,11124,11126,11128,11130,11132],{"class":560,"line":2077},[558,11081,697],{"class":563},[558,11083,1887],{"class":567},[558,11085,11031],{"class":571},[558,11087,578],{"class":563},[558,11089,581],{"class":563},[558,11091,11092],{"class":584},"#ffffff",[558,11094,581],{"class":563},[558,11096,1671],{"class":563},[558,11098,1868],{"class":571},[558,11100,578],{"class":563},[558,11102,581],{"class":563},[558,11104,2751],{"class":1684},[558,11106,581],{"class":563},[558,11108,1671],{"class":563},[558,11110,1674],{"class":571},[558,11112,578],{"class":563},[558,11114,581],{"class":563},[558,11116,1681],{"class":563},[558,11118,1111],{"class":1684},[558,11120,1687],{"class":563},[558,11122,11123],{"class":1684},"200",[558,11125,1687],{"class":563},[558,11127,1111],{"class":1684},[558,11129,1698],{"class":563},[558,11131,581],{"class":563},[558,11133,1703],{"class":563},[558,11135,11136,11138,11140,11142,11144,11146,11148,11150,11152,11154,11156,11158,11160,11162,11164,11166,11168,11170,11172,11174,11176,11178,11180,11182,11184,11186],{"class":560,"line":2589},[558,11137,697],{"class":563},[558,11139,1887],{"class":567},[558,11141,11031],{"class":571},[558,11143,578],{"class":563},[558,11145,581],{"class":563},[558,11147,11092],{"class":584},[558,11149,581],{"class":563},[558,11151,1671],{"class":563},[558,11153,1868],{"class":571},[558,11155,578],{"class":563},[558,11157,581],{"class":563},[558,11159,2751],{"class":1684},[558,11161,581],{"class":563},[558,11163,1671],{"class":563},[558,11165,1674],{"class":571},[558,11167,578],{"class":563},[558,11169,581],{"class":563},[558,11171,1681],{"class":563},[558,11173,2803],{"class":1684},[558,11175,1687],{"class":563},[558,11177,11123],{"class":1684},[558,11179,1687],{"class":563},[558,11181,2803],{"class":1684},[558,11183,1698],{"class":563},[558,11185,581],{"class":563},[558,11187,1703],{"class":563},[558,11189,11190,11192,11194],{"class":560,"line":2595},[558,11191,782],{"class":563},[558,11193,689],{"class":567},[558,11195,590],{"class":563},[558,11197,11198,11200,11202],{"class":560,"line":2604},[558,11199,661],{"class":563},[558,11201,678],{"class":567},[558,11203,590],{"class":563},[540,11205,919],{"id":918},[921,11207,11208,11218],{},[924,11209,11210],{},[927,11211,11212,11214,11216],{},[930,11213,1943],{"align":932},[930,11215,936],{"align":932},[930,11217,939],{},[941,11219,11220,11233,11248,11262],{},[927,11221,11222,11226,11229],{},[946,11223,11224],{"align":932},[514,11225,1728],{},[946,11227,11228],{"align":932},"Resolution of the marching cube field. Higher resolution produces smoother meshes at the cost of performance and memory.",[946,11230,11231],{},[514,11232,5990],{},[927,11234,11235,11240,11243],{},[946,11236,11237],{"align":932},[514,11238,11239],{},"maxPolyCount",[946,11241,11242],{"align":932},"Maximum number of polygons to generate.",[946,11244,11245],{},[514,11246,11247],{},"10000",[927,11249,11250,11255,11258],{},[946,11251,11252],{"align":932},[514,11253,11254],{},"enableUvs",[946,11256,11257],{"align":932},"Whether UVs are enabled.",[946,11259,11260],{},[514,11261,1126],{},[927,11263,11264,11269,11272],{},[946,11265,11266],{"align":932},[514,11267,11268],{},"enableColors",[946,11270,11271],{"align":932},"Whether vertex colors are enabled.",[946,11273,11274],{},[514,11275,1126],{},[540,11277,11279],{"id":11278},"marchingcube-props","MarchingCube Props",[921,11281,11282,11292],{},[924,11283,11284],{},[927,11285,11286,11288,11290],{},[930,11287,1943],{"align":932},[930,11289,936],{"align":932},[930,11291,939],{},[941,11293,11294,11308],{},[927,11295,11296,11301,11304],{},[946,11297,11298],{"align":932},[514,11299,11300],{},"strength",[946,11302,11303],{"align":932},"How strongly this cube affects the marching cube field.",[946,11305,11306],{},[514,11307,1875],{},[927,11309,11310,11315,11321],{},[946,11311,11312],{"align":932},[514,11313,11314],{},"subtract",[946,11316,11317,11318,11320],{"align":932},"How quickly strength moves to ",[514,11319,1111],{}," over distance.",[946,11322,11323],{},[514,11324,11325],{},"12",[540,11327,11329],{"id":11328},"marchingplane-props","MarchingPlane Props",[921,11331,11332,11342],{},[924,11333,11334],{},[927,11335,11336,11338,11340],{},[930,11337,1943],{"align":932},[930,11339,936],{"align":932},[930,11341,939],{},[941,11343,11344,11362,11375],{},[927,11345,11346,11351,11357],{},[946,11347,11348],{"align":932},[514,11349,11350],{},"planeType",[946,11352,11353,11354],{"align":932},"Which axis the plane appears on. ",[514,11355,11356],{},"'x' | 'y' | 'z'",[946,11358,11359],{},[514,11360,11361],{},"'x'",[927,11363,11364,11368,11371],{},[946,11365,11366],{"align":932},[514,11367,11300],{},[946,11369,11370],{"align":932},"How strongly this plane affects the marching cube field.",[946,11372,11373],{},[514,11374,1875],{},[927,11376,11377,11381,11385],{},[946,11378,11379],{"align":932},[514,11380,11314],{},[946,11382,11317,11383,11320],{"align":932},[514,11384,1111],{},[946,11386,11387],{},[514,11388,11325],{},[1532,11390,11391],{},"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":484,"searchDepth":485,"depth":486,"links":11393},[11394,11395,11396,11397],{"id":542,"depth":486,"text":15},{"id":918,"depth":486,"text":919},{"id":11278,"depth":486,"text":11279},{"id":11328,"depth":486,"text":11329},"Create organic blob-like shapes using metaballs.",{},{"title":425,"description":11398},"dt9UUvCiy--PP6CSMtwwdcksel8iajosft8nxTQtolk",{"id":11403,"title":429,"body":11404,"description":12417,"extension":489,"links":490,"meta":12418,"navigation":492,"path":430,"seo":12419,"stem":431,"__hash__":12420},"docs/2.api/9.objects/reflector.md",{"type":473,"value":11405,"toc":12410},[11406,11411,11426,11428,11695,11697,11785,11793,11797,11800,12078,12081,12084,12088,12407],[506,11407,11408],{},[11409,11410],"objects-reflector",{},[476,11412,1349,11413,11416,11417,11422,11423,11425],{},[514,11414,11415],{},"cientos"," package provides an abstraction of the ",[519,11418,11421],{"href":11419,"rel":11420},"https://github.com/mrdoob/three.js/blob/dev/examples/jsm/objects/Reflector.js",[523],"Reflector class",", which creates a Mesh showing a real-time reflection of your scene.  This Mesh extends from ",[514,11424,4716],{}," so all the default props can be passed as well:",[540,11427,15],{"id":542},[544,11429,11431],{"className":546,"code":11430,"language":554,"meta":484,"style":484},"\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",[514,11432,11433,11453,11472,11480,11484,11492,11506,11538,11546,11550,11558,11565,11600,11616,11630,11634,11663,11671,11679,11687],{"__ignoreMap":484},[558,11434,11435,11437,11439,11441,11443,11445,11447,11449,11451],{"class":560,"line":485},[558,11436,564],{"class":563},[558,11438,568],{"class":567},[558,11440,572],{"class":571},[558,11442,575],{"class":571},[558,11444,578],{"class":563},[558,11446,581],{"class":563},[558,11448,585],{"class":584},[558,11450,581],{"class":563},[558,11452,590],{"class":563},[558,11454,11455,11457,11459,11462,11464,11466,11468,11470],{"class":560,"line":486},[558,11456,598],{"class":597},[558,11458,601],{"class":563},[558,11460,11461],{"class":604}," Reflector",[558,11463,608],{"class":563},[558,11465,611],{"class":597},[558,11467,614],{"class":563},[558,11469,617],{"class":584},[558,11471,620],{"class":563},[558,11473,11474,11476,11478],{"class":560,"line":623},[558,11475,661],{"class":563},[558,11477,568],{"class":567},[558,11479,590],{"class":563},[558,11481,11482],{"class":560,"line":629},[558,11483,626],{"emptyLinePlaceholder":492},[558,11485,11486,11488,11490],{"class":560,"line":658},[558,11487,564],{"class":563},[558,11489,678],{"class":567},[558,11491,590],{"class":563},[558,11493,11494,11496,11498,11501,11504],{"class":560,"line":668},[558,11495,686],{"class":563},[558,11497,689],{"class":567},[558,11499,11500],{"class":571}," shadows",[558,11502,11503],{"class":571}," alpha",[558,11505,590],{"class":563},[558,11507,11508,11510,11512,11514,11516,11518,11520,11522,11524,11526,11528,11530,11532,11534,11536],{"class":560,"line":673},[558,11509,697],{"class":563},[558,11511,1668],{"class":567},[558,11513,1671],{"class":563},[558,11515,1674],{"class":571},[558,11517,578],{"class":563},[558,11519,581],{"class":563},[558,11521,1681],{"class":563},[558,11523,1111],{"class":1684},[558,11525,1687],{"class":563},[558,11527,1111],{"class":1684},[558,11529,1687],{"class":563},[558,11531,2751],{"class":1684},[558,11533,1698],{"class":563},[558,11535,581],{"class":563},[558,11537,1703],{"class":563},[558,11539,11540,11542,11544],{"class":560,"line":683},[558,11541,697],{"class":563},[558,11543,1710],{"class":567},[558,11545,1703],{"class":563},[558,11547,11548],{"class":560,"line":694},[558,11549,626],{"emptyLinePlaceholder":492},[558,11551,11552,11554,11556],{"class":560,"line":549},[558,11553,697],{"class":563},[558,11555,700],{"class":567},[558,11557,590],{"class":563},[558,11559,11560,11562],{"class":560,"line":550},[558,11561,708],{"class":563},[558,11563,11564],{"class":567},"Reflector\n",[558,11566,11567,11569,11571,11573,11575,11577,11579,11581,11584,11586,11588,11590,11592,11594,11596,11598],{"class":560,"line":551},[558,11568,748],{"class":563},[558,11570,2339],{"class":571},[558,11572,578],{"class":563},[558,11574,581],{"class":563},[558,11576,5761],{"class":563},[558,11578,7683],{"class":604},[558,11580,807],{"class":563},[558,11582,11583],{"class":604},"PI",[558,11585,5799],{"class":563},[558,11587,1875],{"class":1684},[558,11589,1687],{"class":563},[558,11591,1111],{"class":1684},[558,11593,1687],{"class":563},[558,11595,1111],{"class":1684},[558,11597,1698],{"class":563},[558,11599,727],{"class":563},[558,11601,11602,11604,11606,11608,11610,11612,11614],{"class":560,"line":552},[558,11603,748],{"class":563},[558,11605,6762],{"class":571},[558,11607,578],{"class":563},[558,11609,581],{"class":563},[558,11611,6769],{"class":563},[558,11613,1690],{"class":1684},[558,11615,727],{"class":563},[558,11617,11618,11621,11623,11625,11628],{"class":560,"line":553},[558,11619,11620],{"class":571},"        color",[558,11622,578],{"class":563},[558,11624,581],{"class":563},[558,11626,11627],{"class":584},"#fff",[558,11629,727],{"class":563},[558,11631,11632],{"class":560,"line":769},[558,11633,4114],{"class":563},[558,11635,11636,11638,11641,11643,11645,11647,11649,11651,11653,11655,11657,11659,11661],{"class":560,"line":779},[558,11637,1767],{"class":563},[558,11639,11640],{"class":567},"TresCircleGeometry",[558,11642,1671],{"class":563},[558,11644,1775],{"class":571},[558,11646,578],{"class":563},[558,11648,581],{"class":563},[558,11650,1681],{"class":563},[558,11652,2508],{"class":1684},[558,11654,1687],{"class":563},[558,11656,2508],{"class":1684},[558,11658,1698],{"class":563},[558,11660,581],{"class":563},[558,11662,1703],{"class":563},[558,11664,11665,11667,11669],{"class":560,"line":789},[558,11666,1839],{"class":563},[558,11668,429],{"class":567},[558,11670,590],{"class":563},[558,11672,11673,11675,11677],{"class":560,"line":1882},[558,11674,772],{"class":563},[558,11676,700],{"class":567},[558,11678,590],{"class":563},[558,11680,11681,11683,11685],{"class":560,"line":1917},[558,11682,782],{"class":563},[558,11684,689],{"class":567},[558,11686,590],{"class":563},[558,11688,11689,11691,11693],{"class":560,"line":1926},[558,11690,661],{"class":563},[558,11692,678],{"class":567},[558,11694,590],{"class":563},[540,11696,919],{"id":918},[921,11698,11699,11709],{},[924,11700,11701],{},[927,11702,11703,11705,11707],{},[930,11704,1943],{"align":932},[930,11706,936],{"align":932},[930,11708,939],{},[941,11710,11711,11723,11736,11748,11760,11772],{},[927,11712,11713,11717,11720],{},[946,11714,11715],{"align":932},[2868,11716,2656],{},[946,11718,11719],{"align":932},"The base color that's combine with the mirror effect",[946,11721,11722],{},"'#333'",[927,11724,11725,11730,11733],{},[946,11726,11727],{"align":932},[2868,11728,11729],{},"textureWidth",[946,11731,11732],{"align":932},"the width of the texture to render on the mirror",[946,11734,11735],{},"512",[927,11737,11738,11743,11746],{},[946,11739,11740],{"align":932},[2868,11741,11742],{},"textureHeight",[946,11744,11745],{"align":932},"the height of the texture to render on the mirror",[946,11747,11735],{},[927,11749,11750,11755,11758],{},[946,11751,11752],{"align":932},[2868,11753,11754],{},"clipBias",[946,11756,11757],{"align":932},"to use the clipBias property",[946,11759,1111],{},[927,11761,11762,11767,11770],{},[946,11763,11764],{"align":932},[2868,11765,11766],{},"multisample",[946,11768,11769],{"align":932},"how many samplers will be render",[946,11771,1908],{},[927,11773,11774,11779,11782],{},[946,11775,11776],{"align":932},[2868,11777,11778],{},"shader",[946,11780,11781],{"align":932},"The texture of the smoke.",[946,11783,11784],{},"Reflector.ReflectorShader",[797,11786,11787],{},[476,11788,11789,11790,11792],{},"All the props except the ",[514,11791,2656],{},", are not reactive",[540,11794,11796],{"id":11795},"custom-mirror-effect","Custom mirror effect",[476,11798,11799],{},"For more complex effect you can provide your own shaders, you could do this creating an object and pass the uniforms, vertexShaders or fragmentShaders:",[544,11801,11803],{"className":546,"code":11802,"language":554,"meta":484,"style":484},"\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",[514,11804,11805,11825,11841,11845,11856,11861,11865,11873,11877,11885,11897,11929,11934,11940,11974,11990,12003,12018,12022,12050,12058,12062,12070],{"__ignoreMap":484},[558,11806,11807,11809,11811,11813,11815,11817,11819,11821,11823],{"class":560,"line":485},[558,11808,564],{"class":563},[558,11810,568],{"class":567},[558,11812,572],{"class":571},[558,11814,575],{"class":571},[558,11816,578],{"class":563},[558,11818,581],{"class":563},[558,11820,585],{"class":584},[558,11822,581],{"class":563},[558,11824,590],{"class":563},[558,11826,11827,11829,11832,11834,11836,11839],{"class":560,"line":486},[558,11828,598],{"class":597},[558,11830,11831],{"class":604}," vertexShader ",[558,11833,10752],{"class":597},[558,11835,614],{"class":563},[558,11837,11838],{"class":584},"MyCustomVertexShader.glsl",[558,11840,620],{"class":563},[558,11842,11843],{"class":560,"line":623},[558,11844,626],{"emptyLinePlaceholder":492},[558,11846,11847,11849,11852,11854],{"class":560,"line":629},[558,11848,632],{"class":571},[558,11850,11851],{"class":604}," customShader ",[558,11853,578],{"class":563},[558,11855,2294],{"class":563},[558,11857,11858],{"class":560,"line":658},[558,11859,11860],{"class":604},"  vertexShader\n",[558,11862,11863],{"class":560,"line":668},[558,11864,2386],{"class":563},[558,11866,11867,11869,11871],{"class":560,"line":673},[558,11868,661],{"class":563},[558,11870,568],{"class":567},[558,11872,590],{"class":563},[558,11874,11875],{"class":560,"line":683},[558,11876,626],{"emptyLinePlaceholder":492},[558,11878,11879,11881,11883],{"class":560,"line":694},[558,11880,564],{"class":563},[558,11882,678],{"class":567},[558,11884,590],{"class":563},[558,11886,11887,11889,11891,11893,11895],{"class":560,"line":549},[558,11888,686],{"class":563},[558,11890,689],{"class":567},[558,11892,11500],{"class":571},[558,11894,11503],{"class":571},[558,11896,590],{"class":563},[558,11898,11899,11901,11903,11905,11907,11909,11911,11913,11915,11917,11919,11921,11923,11925,11927],{"class":560,"line":550},[558,11900,697],{"class":563},[558,11902,1668],{"class":567},[558,11904,1671],{"class":563},[558,11906,1674],{"class":571},[558,11908,578],{"class":563},[558,11910,581],{"class":563},[558,11912,1681],{"class":563},[558,11914,1111],{"class":1684},[558,11916,1687],{"class":563},[558,11918,1111],{"class":1684},[558,11920,1687],{"class":563},[558,11922,2751],{"class":1684},[558,11924,1698],{"class":563},[558,11926,581],{"class":563},[558,11928,1703],{"class":563},[558,11930,11931],{"class":560,"line":551},[558,11932,11933],{"class":604},"    ...\n",[558,11935,11936,11938],{"class":560,"line":552},[558,11937,697],{"class":563},[558,11939,11564],{"class":567},[558,11941,11942,11944,11946,11948,11950,11952,11954,11956,11958,11960,11962,11964,11966,11968,11970,11972],{"class":560,"line":553},[558,11943,2547],{"class":563},[558,11945,2339],{"class":571},[558,11947,578],{"class":563},[558,11949,581],{"class":563},[558,11951,5761],{"class":563},[558,11953,7683],{"class":604},[558,11955,807],{"class":563},[558,11957,11583],{"class":604},[558,11959,5799],{"class":563},[558,11961,1875],{"class":1684},[558,11963,1687],{"class":563},[558,11965,1111],{"class":1684},[558,11967,1687],{"class":563},[558,11969,1111],{"class":1684},[558,11971,1698],{"class":563},[558,11973,727],{"class":563},[558,11975,11976,11978,11980,11982,11984,11986,11988],{"class":560,"line":769},[558,11977,2547],{"class":563},[558,11979,6762],{"class":571},[558,11981,578],{"class":563},[558,11983,581],{"class":563},[558,11985,6769],{"class":563},[558,11987,1690],{"class":1684},[558,11989,727],{"class":563},[558,11991,11992,11995,11997,11999,12001],{"class":560,"line":779},[558,11993,11994],{"class":571},"      color",[558,11996,578],{"class":563},[558,11998,581],{"class":563},[558,12000,11627],{"class":584},[558,12002,727],{"class":563},[558,12004,12005,12007,12009,12011,12013,12016],{"class":560,"line":789},[558,12006,2547],{"class":563},[558,12008,11778],{"class":571},[558,12010,578],{"class":563},[558,12012,581],{"class":563},[558,12014,12015],{"class":604},"customShader",[558,12017,727],{"class":563},[558,12019,12020],{"class":560,"line":1882},[558,12021,2769],{"class":563},[558,12023,12024,12026,12028,12030,12032,12034,12036,12038,12040,12042,12044,12046,12048],{"class":560,"line":1917},[558,12025,708],{"class":563},[558,12027,11640],{"class":567},[558,12029,1671],{"class":563},[558,12031,1775],{"class":571},[558,12033,578],{"class":563},[558,12035,581],{"class":563},[558,12037,1681],{"class":563},[558,12039,2508],{"class":1684},[558,12041,1687],{"class":563},[558,12043,2508],{"class":1684},[558,12045,1698],{"class":563},[558,12047,581],{"class":563},[558,12049,1703],{"class":563},[558,12051,12052,12054,12056],{"class":560,"line":1926},[558,12053,772],{"class":563},[558,12055,429],{"class":567},[558,12057,590],{"class":563},[558,12059,12060],{"class":560,"line":2485},[558,12061,11933],{"class":604},[558,12063,12064,12066,12068],{"class":560,"line":2490},[558,12065,782],{"class":563},[558,12067,689],{"class":567},[558,12069,590],{"class":563},[558,12071,12072,12074,12076],{"class":560,"line":2074},[558,12073,661],{"class":563},[558,12075,678],{"class":567},[558,12077,590],{"class":563},[476,12079,12080],{},"The Reflector shader use the following configuration by default:",[476,12082,12083],{},"You can extend, modify or just play with them",[885,12085,12087],{"id":12086},"default-shader","Default shader",[544,12089,12093],{"className":12090,"code":12091,"language":12092,"meta":484,"style":484},"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",[514,12094,12095,12106,12122,12131,12140,12150,12155,12164,12172,12176,12185,12193,12198,12202,12215,12220,12225,12229,12234,12239,12243,12248,12253,12258,12262,12267,12271,12281,12292,12297,12302,12306,12310,12315,12319,12324,12329,12334,12338,12343,12348,12352,12356,12360,12365,12369,12374,12379,12383,12388,12393,12399,12403],{"__ignoreMap":484},[558,12096,12097,12099,12102,12104],{"class":560,"line":485},[558,12098,632],{"class":571},[558,12100,12101],{"class":604}," shader ",[558,12103,578],{"class":563},[558,12105,2294],{"class":563},[558,12107,12108,12111,12113,12115,12118,12120],{"class":560,"line":486},[558,12109,12110],{"class":567},"  name",[558,12112,2285],{"class":563},[558,12114,614],{"class":563},[558,12116,12117],{"class":584},"ReflectorShader",[558,12119,647],{"class":563},[558,12121,3069],{"class":563},[558,12123,12124,12127,12129],{"class":560,"line":623},[558,12125,12126],{"class":567},"  uniforms",[558,12128,2285],{"class":563},[558,12130,2294],{"class":563},[558,12132,12133,12136,12138],{"class":560,"line":629},[558,12134,12135],{"class":567},"    color",[558,12137,2285],{"class":563},[558,12139,2294],{"class":563},[558,12141,12142,12145,12147],{"class":560,"line":658},[558,12143,12144],{"class":567},"      value",[558,12146,2285],{"class":563},[558,12148,12149],{"class":563}," null\n",[558,12151,12152],{"class":560,"line":668},[558,12153,12154],{"class":563},"    },\n",[558,12156,12157,12160,12162],{"class":560,"line":673},[558,12158,12159],{"class":567},"    tDiffuse",[558,12161,2285],{"class":563},[558,12163,2294],{"class":563},[558,12165,12166,12168,12170],{"class":560,"line":683},[558,12167,12144],{"class":567},[558,12169,2285],{"class":563},[558,12171,12149],{"class":563},[558,12173,12174],{"class":560,"line":694},[558,12175,12154],{"class":563},[558,12177,12178,12181,12183],{"class":560,"line":549},[558,12179,12180],{"class":567},"    textureMatrix",[558,12182,2285],{"class":563},[558,12184,2294],{"class":563},[558,12186,12187,12189,12191],{"class":560,"line":550},[558,12188,12144],{"class":567},[558,12190,2285],{"class":563},[558,12192,12149],{"class":563},[558,12194,12195],{"class":560,"line":551},[558,12196,12197],{"class":563},"    }\n",[558,12199,12200],{"class":560,"line":552},[558,12201,3123],{"class":563},[558,12203,12204,12207,12209,12212],{"class":560,"line":553},[558,12205,12206],{"class":567},"  vertexShader",[558,12208,2285],{"class":563},[558,12210,12211],{"class":10478}," /* glsl */",[558,12213,12214],{"class":563},"`\n",[558,12216,12217],{"class":560,"line":769},[558,12218,12219],{"class":584},"  uniform mat4 textureMatrix;\n",[558,12221,12222],{"class":560,"line":779},[558,12223,12224],{"class":584},"  varying vec4 vUv;\n",[558,12226,12227],{"class":560,"line":789},[558,12228,626],{"emptyLinePlaceholder":492},[558,12230,12231],{"class":560,"line":1882},[558,12232,12233],{"class":584},"  #include \u003Ccommon>\n",[558,12235,12236],{"class":560,"line":1917},[558,12237,12238],{"class":584},"  #include \u003Clogdepthbuf_pars_vertex>\n",[558,12240,12241],{"class":560,"line":1926},[558,12242,626],{"emptyLinePlaceholder":492},[558,12244,12245],{"class":560,"line":2485},[558,12246,12247],{"class":584},"  void main() {\n",[558,12249,12250],{"class":560,"line":2490},[558,12251,12252],{"class":584},"    vUv = textureMatrix * vec4( position, 1.0 );\n",[558,12254,12255],{"class":560,"line":2074},[558,12256,12257],{"class":584},"    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n",[558,12259,12260],{"class":560,"line":2075},[558,12261,626],{"emptyLinePlaceholder":492},[558,12263,12264],{"class":560,"line":2076},[558,12265,12266],{"class":584},"    #include \u003Clogdepthbuf_vertex>\n",[558,12268,12269],{"class":560,"line":2077},[558,12270,626],{"emptyLinePlaceholder":492},[558,12272,12273,12276,12279],{"class":560,"line":2589},[558,12274,12275],{"class":584},"  }",[558,12277,12278],{"class":563},"`",[558,12280,3069],{"class":563},[558,12282,12283,12286,12288,12290],{"class":560,"line":2595},[558,12284,12285],{"class":567},"  fragmentShader",[558,12287,2285],{"class":563},[558,12289,12211],{"class":10478},[558,12291,12214],{"class":563},[558,12293,12294],{"class":560,"line":2604},[558,12295,12296],{"class":584},"  uniform vec3 color;\n",[558,12298,12299],{"class":560,"line":2638},[558,12300,12301],{"class":584},"  uniform sampler2D tDiffuse;\n",[558,12303,12304],{"class":560,"line":2643},[558,12305,12224],{"class":584},[558,12307,12308],{"class":560,"line":2651},[558,12309,626],{"emptyLinePlaceholder":492},[558,12311,12312],{"class":560,"line":2668},[558,12313,12314],{"class":584},"  #include \u003Clogdepthbuf_pars_fragment>\n",[558,12316,12317],{"class":560,"line":2698},[558,12318,626],{"emptyLinePlaceholder":492},[558,12320,12321],{"class":560,"line":2703},[558,12322,12323],{"class":584},"  float blendOverlay( float base, float blend ) {\n",[558,12325,12326],{"class":560,"line":2712},[558,12327,12328],{"class":584},"    return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n",[558,12330,12331],{"class":560,"line":2717},[558,12332,12333],{"class":584},"  }\n",[558,12335,12336],{"class":560,"line":2725},[558,12337,626],{"emptyLinePlaceholder":492},[558,12339,12340],{"class":560,"line":2738},[558,12341,12342],{"class":584},"  vec3 blendOverlay( vec3 base, vec3 blend ) {\n",[558,12344,12345],{"class":560,"line":2766},[558,12346,12347],{"class":584},"    return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n",[558,12349,12350],{"class":560,"line":2772},[558,12351,12333],{"class":584},[558,12353,12354],{"class":560,"line":2812},[558,12355,626],{"emptyLinePlaceholder":492},[558,12357,12358],{"class":560,"line":2822},[558,12359,12247],{"class":584},[558,12361,12362],{"class":560,"line":2831},[558,12363,12364],{"class":584},"    #include \u003Clogdepthbuf_fragment>\n",[558,12366,12367],{"class":560,"line":2840},[558,12368,626],{"emptyLinePlaceholder":492},[558,12370,12371],{"class":560,"line":5626},[558,12372,12373],{"class":584},"    vec4 base = texture2DProj( tDiffuse, vUv );\n",[558,12375,12376],{"class":560,"line":5635},[558,12377,12378],{"class":584},"    gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n",[558,12380,12381],{"class":560,"line":5640},[558,12382,626],{"emptyLinePlaceholder":492},[558,12384,12385],{"class":560,"line":5648},[558,12386,12387],{"class":584},"    #include \u003Ctonemapping_fragment>\n",[558,12389,12390],{"class":560,"line":5676},[558,12391,12392],{"class":584},"    #include \u003Ccolorspace_fragment>\n",[558,12394,12395,12397],{"class":560,"line":5700},[558,12396,12275],{"class":584},[558,12398,12214],{"class":563},[558,12400,12401],{"class":560,"line":5716},[558,12402,626],{"emptyLinePlaceholder":492},[558,12404,12405],{"class":560,"line":5733},[558,12406,2386],{"class":563},[1532,12408,12409],{},"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":484,"searchDepth":485,"depth":486,"links":12411},[12412,12413,12414],{"id":542,"depth":486,"text":15},{"id":918,"depth":486,"text":919},{"id":11795,"depth":486,"text":11796,"children":12415},[12416],{"id":12086,"depth":623,"text":12087},"Create real-time reflections of your scene.",{},{"title":429,"description":12417},"24igh7rDYMu_PMUA2O2RSz3ThFBClmpHnB0dGe1M0hI",{"id":12422,"title":433,"body":12423,"description":12968,"extension":489,"links":490,"meta":12969,"navigation":492,"path":434,"seo":12970,"stem":435,"__hash__":12971},"docs/2.api/9.objects/text-3d.md",{"type":473,"value":12424,"toc":12964},[12425,12430,12442,12444,12463,12571,12587,12680,12683,12802,12804,12961],[506,12426,12427],{},[12428,12429],"objects-text",{},[476,12431,12432,12435,12436,12441],{},[514,12433,12434],{},"\u003CText3D />"," is a component that renders text in 3D. It is a wrapper around the ",[519,12437,12440],{"href":12438,"rel":12439},"https://threejs.org/docs/#api/en/geometries/TextGeometry",[523],"TextGeometry"," class.",[540,12443,15],{"id":542},[476,12445,12446,12447,12449,12450,12453,12454,12457,12458],{},"To use the ",[514,12448,12434],{}," component you need to pass the ",[514,12451,12452],{},"font"," prop with the URL of the font JSON file you want to use. TextGeometry uses ",[514,12455,12456],{},"typeface",".json generated fonts, you can generate yours ",[519,12459,12462],{"href":12460,"rel":12461},"http://gero3.github.io/facetype.js/",[523],"here",[544,12464,12466],{"className":546,"code":12465,"language":554,"meta":484,"style":484},"\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",[514,12467,12468,12476,12484,12492,12499,12513,12527,12531,12539,12547,12555,12563],{"__ignoreMap":484},[558,12469,12470,12472,12474],{"class":560,"line":485},[558,12471,564],{"class":563},[558,12473,678],{"class":567},[558,12475,590],{"class":563},[558,12477,12478,12480,12482],{"class":560,"line":486},[558,12479,686],{"class":563},[558,12481,689],{"class":567},[558,12483,590],{"class":563},[558,12485,12486,12488,12490],{"class":560,"line":623},[558,12487,697],{"class":563},[558,12489,700],{"class":567},[558,12491,590],{"class":563},[558,12493,12494,12496],{"class":560,"line":629},[558,12495,708],{"class":563},[558,12497,12498],{"class":567},"Text3D\n",[558,12500,12501,12504,12506,12508,12511],{"class":560,"line":658},[558,12502,12503],{"class":571},"        text",[558,12505,578],{"class":563},[558,12507,581],{"class":563},[558,12509,12510],{"class":584},"TresJS",[558,12512,727],{"class":563},[558,12514,12515,12518,12520,12522,12525],{"class":560,"line":668},[558,12516,12517],{"class":571},"        font",[558,12519,578],{"class":563},[558,12521,581],{"class":563},[558,12523,12524],{"class":584},"/fonts/FiraCodeRegular.json",[558,12526,727],{"class":563},[558,12528,12529],{"class":560,"line":673},[558,12530,4114],{"class":563},[558,12532,12533,12535,12537],{"class":560,"line":683},[558,12534,1767],{"class":563},[558,12536,2817],{"class":567},[558,12538,1703],{"class":563},[558,12540,12541,12543,12545],{"class":560,"line":694},[558,12542,1839],{"class":563},[558,12544,433],{"class":567},[558,12546,590],{"class":563},[558,12548,12549,12551,12553],{"class":560,"line":549},[558,12550,772],{"class":563},[558,12552,700],{"class":567},[558,12554,590],{"class":563},[558,12556,12557,12559,12561],{"class":560,"line":550},[558,12558,782],{"class":563},[558,12560,689],{"class":567},[558,12562,590],{"class":563},[558,12564,12565,12567,12569],{"class":560,"line":551},[558,12566,661],{"class":563},[558,12568,678],{"class":567},[558,12570,590],{"class":563},[476,12572,12573,12574,12577,12578,12580,12581,12583,12584,12586],{},"Notice that you need to pass the ",[514,12575,12576],{},"\u003CTresMeshNormalMaterial />"," component as a child of the ",[514,12579,12434],{}," component. This is because ",[514,12582,12434],{}," is a ",[514,12585,4716],{}," 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:",[544,12588,12590],{"className":546,"code":12589,"language":554,"meta":484,"style":484},"\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",[514,12591,12592,12600,12608,12616,12635,12640,12648,12656,12664,12672],{"__ignoreMap":484},[558,12593,12594,12596,12598],{"class":560,"line":485},[558,12595,564],{"class":563},[558,12597,678],{"class":567},[558,12599,590],{"class":563},[558,12601,12602,12604,12606],{"class":560,"line":486},[558,12603,686],{"class":563},[558,12605,689],{"class":567},[558,12607,590],{"class":563},[558,12609,12610,12612,12614],{"class":560,"line":623},[558,12611,697],{"class":563},[558,12613,700],{"class":567},[558,12615,590],{"class":563},[558,12617,12618,12620,12622,12625,12627,12629,12631,12633],{"class":560,"line":629},[558,12619,708],{"class":563},[558,12621,433],{"class":567},[558,12623,12624],{"class":571}," font",[558,12626,578],{"class":563},[558,12628,581],{"class":563},[558,12630,12524],{"class":584},[558,12632,581],{"class":563},[558,12634,590],{"class":563},[558,12636,12637],{"class":560,"line":658},[558,12638,12639],{"class":604},"        TresJS\n",[558,12641,12642,12644,12646],{"class":560,"line":668},[558,12643,1767],{"class":563},[558,12645,2817],{"class":567},[558,12647,1703],{"class":563},[558,12649,12650,12652,12654],{"class":560,"line":673},[558,12651,1839],{"class":563},[558,12653,433],{"class":567},[558,12655,590],{"class":563},[558,12657,12658,12660,12662],{"class":560,"line":683},[558,12659,772],{"class":563},[558,12661,700],{"class":567},[558,12663,590],{"class":563},[558,12665,12666,12668,12670],{"class":560,"line":694},[558,12667,782],{"class":563},[558,12669,689],{"class":567},[558,12671,590],{"class":563},[558,12673,12674,12676,12678],{"class":560,"line":549},[558,12675,661],{"class":563},[558,12677,678],{"class":567},[558,12679,590],{"class":563},[476,12681,12682],{},"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",[544,12684,12686],{"className":546,"code":12685,"language":554,"meta":484,"style":484},"\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",[514,12687,12688,12696,12717,12725,12733,12739,12753,12765,12769,12774,12778,12786,12794],{"__ignoreMap":484},[558,12689,12690,12692,12694],{"class":560,"line":485},[558,12691,564],{"class":563},[558,12693,678],{"class":567},[558,12695,590],{"class":563},[558,12697,12698,12700,12703,12706,12708,12710,12713,12715],{"class":560,"line":486},[558,12699,686],{"class":563},[558,12701,12702],{"class":567},"input",[558,12704,12705],{"class":571}," v-model",[558,12707,578],{"class":563},[558,12709,581],{"class":563},[558,12711,12712],{"class":604},"myReactiveText",[558,12714,581],{"class":563},[558,12716,1703],{"class":563},[558,12718,12719,12721,12723],{"class":560,"line":623},[558,12720,686],{"class":563},[558,12722,689],{"class":567},[558,12724,590],{"class":563},[558,12726,12727,12729,12731],{"class":560,"line":629},[558,12728,697],{"class":563},[558,12730,700],{"class":567},[558,12732,590],{"class":563},[558,12734,12735,12737],{"class":560,"line":658},[558,12736,708],{"class":563},[558,12738,12498],{"class":567},[558,12740,12741,12743,12745,12747,12749,12751],{"class":560,"line":668},[558,12742,748],{"class":563},[558,12744,1484],{"class":571},[558,12746,578],{"class":563},[558,12748,581],{"class":563},[558,12750,12712],{"class":604},[558,12752,727],{"class":563},[558,12754,12755,12757,12759,12761,12763],{"class":560,"line":673},[558,12756,12517],{"class":571},[558,12758,578],{"class":563},[558,12760,581],{"class":563},[558,12762,12524],{"class":584},[558,12764,727],{"class":563},[558,12766,12767],{"class":560,"line":683},[558,12768,4030],{"class":571},[558,12770,12771],{"class":560,"line":694},[558,12772,12773],{"class":571},"        need-updates\n",[558,12775,12776],{"class":560,"line":549},[558,12777,766],{"class":563},[558,12779,12780,12782,12784],{"class":560,"line":550},[558,12781,772],{"class":563},[558,12783,700],{"class":567},[558,12785,590],{"class":563},[558,12787,12788,12790,12792],{"class":560,"line":551},[558,12789,782],{"class":563},[558,12791,689],{"class":567},[558,12793,590],{"class":563},[558,12795,12796,12798,12800],{"class":560,"line":552},[558,12797,661],{"class":563},[558,12799,678],{"class":567},[558,12801,590],{"class":563},[540,12803,919],{"id":918},[921,12805,12806,12816],{},[924,12807,12808],{},[927,12809,12810,12812,12814],{},[930,12811,1943],{"align":932},[930,12813,936],{"align":932},[930,12815,939],{},[941,12817,12818,12829,12840,12852,12864,12876,12888,12901,12914,12926,12938,12949],{},[927,12819,12820,12824,12827],{},[946,12821,12822],{"align":932},[2868,12823,12452],{},[946,12825,12826],{"align":932},"The font data or font name to use for the text.",[946,12828],{},[927,12830,12831,12835,12838],{},[946,12832,12833],{"align":932},[2868,12834,1484],{},[946,12836,12837],{"align":932},"The text to display.",[946,12839],{},[927,12841,12842,12847,12850],{},[946,12843,12844],{"align":932},[2868,12845,12846],{},"size",[946,12848,12849],{"align":932},"The size of the text.",[946,12851,1875],{},[927,12853,12854,12858,12861],{},[946,12855,12856],{"align":932},[2868,12857,2889],{},[946,12859,12860],{"align":932},"The height of the text.",[946,12862,12863],{},"0.2",[927,12865,12866,12871,12874],{},[946,12867,12868],{"align":932},[2868,12869,12870],{},"curveSegments",[946,12872,12873],{"align":932},"The number of curve segments to use when generating the text geometry.",[946,12875,1695],{},[927,12877,12878,12883,12886],{},[946,12879,12880],{"align":932},[2868,12881,12882],{},"bevelEnabled",[946,12884,12885],{"align":932},"A flag indicating whether beveling should be enabled for the text.",[946,12887,1087],{},[927,12889,12890,12895,12898],{},[946,12891,12892],{"align":932},[2868,12893,12894],{},"bevelThickness",[946,12896,12897],{"align":932},"The thickness of the beveled edge on the text.",[946,12899,12900],{},"0.05",[927,12902,12903,12908,12911],{},[946,12904,12905],{"align":932},[2868,12906,12907],{},"bevelSize",[946,12909,12910],{"align":932},"The size of the beveled edge on the text.",[946,12912,12913],{},"0.02",[927,12915,12916,12921,12924],{},[946,12917,12918],{"align":932},[2868,12919,12920],{},"bevelOffset",[946,12922,12923],{"align":932},"The offset of the beveled edge on the text.",[946,12925,1111],{},[927,12927,12928,12933,12936],{},[946,12929,12930],{"align":932},[2868,12931,12932],{},"bevelSegments",[946,12934,12935],{"align":932},"The number of bevel segments to use when generating the text geometry.",[946,12937,1908],{},[927,12939,12940,12944,12947],{},[946,12941,12942],{"align":932},[2868,12943,1192],{},[946,12945,12946],{"align":932},"To center the text",[946,12948,1126],{},[927,12950,12951,12956,12959],{},[946,12952,12953],{"align":932},[2868,12954,12955],{},"needUpdates",[946,12957,12958],{"align":932},"This props add reactivity",[946,12960,1126],{},[1532,12962,12963],{},"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":484,"searchDepth":485,"depth":486,"links":12965},[12966,12967],{"id":542,"depth":486,"text":15},{"id":918,"depth":486,"text":919},"Render text in 3D using TextGeometry.",{},{"title":433,"description":12968},"t6bahOskD-ojOxftya8MrETrI6LWNTRBawqfzv7mouA",1776202096484]