[{"data":1,"prerenderedAt":13707},["ShallowReactive",2],{"navigation":3,"/api/objects":498,"/api/objects-surround":523,"objects-list":528},[4,26],{"title":5,"path":6,"stem":7,"children":8},"Getting Started","/getting-started","1.getting-started/1.index",[9,10,14,18,22],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"Installation Guide","/getting-started/installation","1.getting-started/2.installation",{"title":15,"path":16,"stem":17},"Usage","/getting-started/usage","1.getting-started/3.usage",{"title":19,"path":20,"stem":21},"Loading Models","/getting-started/loading-models","1.getting-started/4.loading-models",{"title":23,"path":24,"stem":25},"Upgrade Guide","/getting-started/upgrade-guide","1.getting-started/5.upgrade-guide",{"title":27,"path":28,"stem":29,"children":30},"Api","/api","2.api",[31,34,96,126,168,210,308,334,368,418,464],{"title":32,"path":28,"stem":33},"All","2.api/index",{"title":35,"path":36,"stem":37,"children":38},"Abstractions","/api/abstractions","2.api/1.abstractions/index",[39,40,44,48,52,56,60,64,68,72,76,80,84,88,92],{"title":35,"path":36,"stem":37},{"title":41,"path":42,"stem":43},"Align","/api/abstractions/align","2.api/1.abstractions/align",{"title":45,"path":46,"stem":47},"Billboard","/api/abstractions/billboard","2.api/1.abstractions/billboard",{"title":49,"path":50,"stem":51},"Camera Shake","/api/abstractions/camera-shake","2.api/1.abstractions/camera-shake",{"title":53,"path":54,"stem":55},"Decal","/api/abstractions/decal","2.api/1.abstractions/decal",{"title":57,"path":58,"stem":59},"Edges","/api/abstractions/edges","2.api/1.abstractions/edges",{"title":61,"path":62,"stem":63},"Fit","/api/abstractions/fit","2.api/1.abstractions/fit",{"title":65,"path":66,"stem":67},"Instances","/api/abstractions/instances","2.api/1.abstractions/instances",{"title":69,"path":70,"stem":71},"Levioso (Float)","/api/abstractions/levioso","2.api/1.abstractions/levioso",{"title":73,"path":74,"stem":75},"Mask","/api/abstractions/mask","2.api/1.abstractions/mask",{"title":77,"path":78,"stem":79},"Merged","/api/abstractions/merged","2.api/1.abstractions/merged",{"title":81,"path":82,"stem":83},"Outline","/api/abstractions/outline","2.api/1.abstractions/outline",{"title":85,"path":86,"stem":87},"Sampler","/api/abstractions/sampler","2.api/1.abstractions/sampler",{"title":89,"path":90,"stem":91},"ScreenSizer","/api/abstractions/screen-sizer","2.api/1.abstractions/screen-sizer",{"title":93,"path":94,"stem":95},"ScreenSpace","/api/abstractions/screen-space","2.api/1.abstractions/screen-space",{"title":97,"path":98,"stem":99,"children":100},"Controls","/api/controls","2.api/2.controls/index",[101,102,106,110,114,118,122],{"title":97,"path":98,"stem":99},{"title":103,"path":104,"stem":105},"Camera Controls","/api/controls/camera-controls","2.api/2.controls/camera-controls",{"title":107,"path":108,"stem":109},"Keyboard Controls","/api/controls/keyboard-controls","2.api/2.controls/keyboard-controls",{"title":111,"path":112,"stem":113},"Map Controls","/api/controls/map-controls","2.api/2.controls/map-controls",{"title":115,"path":116,"stem":117},"Orbit Controls","/api/controls/orbit-controls","2.api/2.controls/orbit-controls",{"title":119,"path":120,"stem":121},"PointerLock Controls","/api/controls/pointer-lock-controls","2.api/2.controls/pointer-lock-controls",{"title":123,"path":124,"stem":125},"Transform Controls","/api/controls/transform-controls","2.api/2.controls/transform-controls",{"title":127,"path":128,"stem":129,"children":130},"Loaders","/api/loaders","2.api/3.loaders/index",[131,132,136,140,144,148,152,156,160,164],{"title":127,"path":128,"stem":129},{"title":133,"path":134,"stem":135},"useGLTF","/api/loaders/use-gltf","2.api/3.loaders/1.use-gltf",{"title":137,"path":138,"stem":139},"GLTFModel","/api/loaders/gltf-model","2.api/3.loaders/2.gltf-model",{"title":141,"path":142,"stem":143},"useFBX","/api/loaders/use-fbx","2.api/3.loaders/3.use-fbx",{"title":145,"path":146,"stem":147},"FBXModel","/api/loaders/fbx-model","2.api/3.loaders/4.fbx-model",{"title":149,"path":150,"stem":151},"useTexture","/api/loaders/use-texture","2.api/3.loaders/5.use-texture",{"title":153,"path":154,"stem":155},"useTextures","/api/loaders/use-textures","2.api/3.loaders/6.use-textures",{"title":157,"path":158,"stem":159},"useSVG","/api/loaders/use-svg","2.api/3.loaders/7.use-svg",{"title":161,"path":162,"stem":163},"useProgress","/api/loaders/use-progress","2.api/3.loaders/use-progress",{"title":165,"path":166,"stem":167},"useVideoTexture","/api/loaders/use-video-texture","2.api/3.loaders/use-video-texture",{"title":169,"path":170,"stem":171,"children":172},"Materials","/api/materials","2.api/4.materials/index",[173,174,178,182,186,190,194,198,202,206],{"title":169,"path":170,"stem":171},{"title":175,"path":176,"stem":177},"Custom Shader Material","/api/materials/custom-shader-material","2.api/4.materials/custom-shader-material",{"title":179,"path":180,"stem":181},"Mesh Glass Material","/api/materials/glass-material","2.api/4.materials/glass-material",{"title":183,"path":184,"stem":185},"Holographic Material","/api/materials/holographic-material","2.api/4.materials/holographic-material",{"title":187,"path":188,"stem":189},"Mesh Discard Material","/api/materials/mesh-discard-material","2.api/4.materials/mesh-discard-material",{"title":191,"path":192,"stem":193},"Mesh Portal Material","/api/materials/mesh-portal-material","2.api/4.materials/mesh-portal-material",{"title":195,"path":196,"stem":197},"Mesh Reflection Material","/api/materials/mesh-reflection-material","2.api/4.materials/mesh-reflection-material",{"title":199,"path":200,"stem":201},"Mesh Transmission Material","/api/materials/mesh-transmission-material","2.api/4.materials/mesh-transmission-material",{"title":203,"path":204,"stem":205},"Point Material","/api/materials/point-material","2.api/4.materials/point-material",{"title":207,"path":208,"stem":209},"Wobble Material","/api/materials/wobble-material","2.api/4.materials/wobble-material",{"title":211,"path":212,"stem":213,"children":214},"Shapes","/api/shapes","2.api/5.shapes/index",[215,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296,300,304],{"title":211,"path":212,"stem":213},{"title":217,"path":218,"stem":219},"Box","/api/shapes/box","2.api/5.shapes/box",{"title":221,"path":222,"stem":223},"CatmullRomCurve3","/api/shapes/catmullromcurve3","2.api/5.shapes/catmullromcurve3",{"title":225,"path":226,"stem":227},"Circle","/api/shapes/circle","2.api/5.shapes/circle",{"title":229,"path":230,"stem":231},"Cone","/api/shapes/cone","2.api/5.shapes/cone",{"title":233,"path":234,"stem":235},"Cubic Bezier Line","/api/shapes/cubic-bezier-line","2.api/5.shapes/cubic-bezier-line",{"title":237,"path":238,"stem":239},"Cylinder","/api/shapes/cylinder","2.api/5.shapes/cylinder",{"title":241,"path":242,"stem":243},"Dodecahedron","/api/shapes/dodecahedron","2.api/5.shapes/dodecahedron",{"title":245,"path":246,"stem":247},"Grid","/api/shapes/grid","2.api/5.shapes/grid",{"title":249,"path":250,"stem":251},"Icosahedron","/api/shapes/icosahedron","2.api/5.shapes/icosahedron",{"title":253,"path":254,"stem":255},"Line2","/api/shapes/line2","2.api/5.shapes/line2",{"title":257,"path":258,"stem":259},"Octahedron","/api/shapes/octahedron","2.api/5.shapes/octahedron",{"title":261,"path":262,"stem":263},"Plane","/api/shapes/plane","2.api/5.shapes/plane",{"title":265,"path":266,"stem":267},"Quadratic Bezier Line","/api/shapes/quadratic-bezier-line","2.api/5.shapes/quadratic-bezier-line",{"title":269,"path":270,"stem":271},"Ring","/api/shapes/ring","2.api/5.shapes/ring",{"title":273,"path":274,"stem":275},"Rounded Box","/api/shapes/rounded-box","2.api/5.shapes/rounded-box",{"title":277,"path":278,"stem":279},"Rounded Plane","/api/shapes/rounded-plane","2.api/5.shapes/rounded-plane",{"title":281,"path":282,"stem":283},"Screen Quad","/api/shapes/screen-quad","2.api/5.shapes/screen-quad",{"title":285,"path":286,"stem":287},"Sphere","/api/shapes/sphere","2.api/5.shapes/sphere",{"title":289,"path":290,"stem":291},"Superformula","/api/shapes/superformula","2.api/5.shapes/superformula",{"title":293,"path":294,"stem":295},"Tetrahedron","/api/shapes/tetrahedron","2.api/5.shapes/tetrahedron",{"title":297,"path":298,"stem":299},"Torus","/api/shapes/torus","2.api/5.shapes/torus",{"title":301,"path":302,"stem":303},"Torus Knot","/api/shapes/torus-knot","2.api/5.shapes/torus-knot",{"title":305,"path":306,"stem":307},"Tube","/api/shapes/tube","2.api/5.shapes/tube",{"title":309,"path":310,"stem":311,"children":312},"Debug/Performance","/api/debug-performance","2.api/6.debug-performance/index",[313,314,318,322,326,330],{"title":309,"path":310,"stem":311},{"title":315,"path":316,"stem":317},"Helper","/api/debug-performance/helper","2.api/6.debug-performance/helper",{"title":319,"path":320,"stem":321},"LOD","/api/debug-performance/lod","2.api/6.debug-performance/lod",{"title":323,"path":324,"stem":325},"Stats","/api/debug-performance/stats","2.api/6.debug-performance/stats",{"title":327,"path":328,"stem":329},"StatsGl","/api/debug-performance/stats-gl","2.api/6.debug-performance/stats-gl",{"title":331,"path":332,"stem":333},"useBVH","/api/debug-performance/use-bvh","2.api/6.debug-performance/use-bvh",{"title":335,"path":336,"stem":337,"children":338},"Light/Shadow","/api/light-shadow","2.api/7.light-shadow/index",[339,340,344,348,352,356,360,364],{"title":335,"path":336,"stem":337},{"title":341,"path":342,"stem":343},"Accumulative Shadows","/api/light-shadow/accumulative-shadows","2.api/7.light-shadow/accumulative-shadows",{"title":345,"path":346,"stem":347},"Bake Shadows","/api/light-shadow/bake-shadows","2.api/7.light-shadow/bake-shadows",{"title":349,"path":350,"stem":351},"Circle Shadow","/api/light-shadow/circle-shadow","2.api/7.light-shadow/circle-shadow",{"title":353,"path":354,"stem":355},"Contact Shadows","/api/light-shadow/contact-shadows","2.api/7.light-shadow/contact-shadows",{"title":357,"path":358,"stem":359},"Lensflare","/api/light-shadow/lensflare","2.api/7.light-shadow/lensflare",{"title":361,"path":362,"stem":363},"Randomized Lights","/api/light-shadow/randomized-lights","2.api/7.light-shadow/randomized-lights",{"title":365,"path":366,"stem":367},"Soft Shadows","/api/light-shadow/soft-shadows","2.api/7.light-shadow/soft-shadows",{"title":369,"path":370,"stem":371,"children":372},"Staging","/api/staging","2.api/8.staging/index",[373,374,378,382,386,390,394,398,402,406,410,414],{"title":369,"path":370,"stem":371},{"title":375,"path":376,"stem":377},"Environment","/api/staging/environment","2.api/8.staging/1.environment",{"title":379,"path":380,"stem":381},"useEnvironment","/api/staging/use-environment","2.api/8.staging/2.use-environment",{"title":383,"path":384,"stem":385},"Lightformer","/api/staging/lightformer","2.api/8.staging/3.lightformer",{"title":387,"path":388,"stem":389},"Backdrop","/api/staging/backdrop","2.api/8.staging/backdrop",{"title":391,"path":392,"stem":393},"Ocean","/api/staging/ocean","2.api/8.staging/ocean",{"title":395,"path":396,"stem":397},"Precipitation","/api/staging/precipitation","2.api/8.staging/precipitation",{"title":399,"path":400,"stem":401},"Sky","/api/staging/sky","2.api/8.staging/sky",{"title":403,"path":404,"stem":405},"Smoke","/api/staging/smoke","2.api/8.staging/smoke",{"title":407,"path":408,"stem":409},"Sparkles","/api/staging/sparkles","2.api/8.staging/sparkles",{"title":411,"path":412,"stem":413},"Stage","/api/staging/stage","2.api/8.staging/stage",{"title":415,"path":416,"stem":417},"Stars","/api/staging/stars","2.api/8.staging/stars",{"title":419,"path":420,"stem":421,"children":422},"Objects","/api/objects","2.api/9.objects/index",[423,424,428,432,436,440,444,448,452,456,460],{"title":419,"path":420,"stem":421},{"title":425,"path":426,"stem":427},"AnimatedSprite","/api/objects/animated-sprite","2.api/9.objects/animated-sprite",{"title":429,"path":430,"stem":431},"CubeCamera","/api/objects/cube-camera","2.api/9.objects/cube-camera",{"title":433,"path":434,"stem":435},"Fbo","/api/objects/fbo","2.api/9.objects/fbo",{"title":437,"path":438,"stem":439},"GradientTexture","/api/objects/gradient-texture","2.api/9.objects/gradient-texture",{"title":441,"path":442,"stem":443},"HTML","/api/objects/html","2.api/9.objects/html",{"title":445,"path":446,"stem":447},"Image","/api/objects/image","2.api/9.objects/image",{"title":449,"path":450,"stem":451},"MarchingCubes","/api/objects/marching-cubes","2.api/9.objects/marching-cubes",{"title":453,"path":454,"stem":455},"Reflector","/api/objects/reflector","2.api/9.objects/reflector",{"title":457,"path":458,"stem":459},"Refractor","/api/objects/refractor","2.api/9.objects/refractor",{"title":461,"path":462,"stem":463},"Text3D","/api/objects/text-3d","2.api/9.objects/text-3d",{"title":465,"path":466,"stem":467,"children":468},"Miscellaneous","/api/miscellaneous","2.api/miscellaneous/index",[469,470,474,478,482,486,490,494],{"title":465,"path":466,"stem":467},{"title":471,"path":472,"stem":473},"Bounds","/api/miscellaneous/bounds","2.api/miscellaneous/bounds",{"title":475,"path":476,"stem":477},"GlobalAudio","/api/miscellaneous/global-audio","2.api/miscellaneous/global-audio",{"title":479,"path":480,"stem":481},"MouseParallax","/api/miscellaneous/mouse-parallax","2.api/miscellaneous/mouse-parallax",{"title":483,"path":484,"stem":485},"PositionalAudio","/api/miscellaneous/positional-audio","2.api/miscellaneous/positional-audio",{"title":487,"path":488,"stem":489},"useAnimations","/api/miscellaneous/use-animations","2.api/miscellaneous/use-animations",{"title":491,"path":492,"stem":493},"useGLTFExporter","/api/miscellaneous/use-gltf-exporter","2.api/miscellaneous/use-gltf-exporter",{"title":495,"path":496,"stem":497},"useIntersect","/api/miscellaneous/use-intersect","2.api/miscellaneous/use-intersect",{"id":499,"title":419,"body":500,"description":516,"extension":517,"links":518,"meta":519,"navigation":520,"path":420,"seo":521,"stem":421,"__hash__":522},"docs/2.api/9.objects/index.md",{"type":501,"value":502,"toc":511},"minimark",[503,507],[504,505,506],"p",{},"Components for creating 3D objects, sprites, text, and textures in your scene.",[508,509],"api-list",{"list-name":510},"objects-list",{"title":512,"searchDepth":513,"depth":514,"links":515},"",1,2,[],"3D objects and texture components","md",null,{},true,{"title":419,"description":516},"PJRjQ8U1I99ephC4xbsR6qDF0Wsdp6iYandnX5ya-lQ",[524,526],{"title":415,"path":416,"stem":417,"description":525,"children":-1},"Renders beautiful stars in the sky using Points and BufferGeometry.",{"title":425,"path":426,"stem":427,"description":527,"children":-1},"Display 2D animations defined in a texture atlas.",[529,1582,2018,3208,3593,9271,9874,10679,11982,13156],{"id":530,"title":425,"body":531,"description":527,"extension":517,"links":518,"meta":1579,"navigation":520,"path":426,"seo":1580,"stem":427,"__hash__":1581},"docs/2.api/9.objects/animated-sprite.md",{"type":501,"value":532,"toc":1561},[533,539,557,567,571,821,833,837,843,857,866,870,877,897,901,909,914,941,945,1296,1300,1370,1373,1380,1384,1387,1392,1395,1407,1423,1427,1430,1467,1470,1482,1486,1495,1505,1513,1516,1547,1550,1557],[534,535,536],"scene-controls-wrapper",{},[537,538],"objects-animated-sprite",{},[504,540,541,545,546,553,554,556],{},[542,543,544],"code",{},"\u003CAnimatedSprite />"," displays 2D animations defined in a ",[547,548,552],"a",{"href":549,"rel":550},"https://en.wikipedia.org/wiki/Texture_atlas",[551],"nofollow","texture atlas",". A typical ",[542,555,544],{}," will use:",[558,559,560,564],"ul",{},[561,562,563],"li",{},"An image containing multiple sprites",[561,565,566],{},"A JSON atlas containing the individual sprite coordinates in the image",[568,569,15],"h2",{"id":570},"usage",[572,573,583],"pre",{"className":574,"code":575,"highlights":576,"language":582,"meta":512,"style":512},"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",[514,577,578,579,580,581],10,11,12,13,14,"vue",[542,584,585,619,649,655,684,694,699,709,720,731,740,756,771,786,792,802,812],{"__ignoreMap":512},[586,587,589,593,597,601,604,607,610,614,616],"span",{"class":588,"line":513},"line",[586,590,592],{"class":591},"sMK4o","\u003C",[586,594,596],{"class":595},"swJcz","script",[586,598,600],{"class":599},"spNyl"," setup",[586,602,603],{"class":599}," lang",[586,605,606],{"class":591},"=",[586,608,609],{"class":591},"\"",[586,611,613],{"class":612},"sfazB","ts",[586,615,609],{"class":591},[586,617,618],{"class":591},">\n",[586,620,623,627,630,634,637,640,643,646],{"class":621,"line":514},[588,622],"highlight",[586,624,626],{"class":625},"s7zQu","import",[586,628,629],{"class":591}," {",[586,631,633],{"class":632},"sTEyZ"," AnimatedSprite",[586,635,636],{"class":591}," }",[586,638,639],{"class":625}," from",[586,641,642],{"class":591}," '",[586,644,645],{"class":612},"@tresjs/cientos",[586,647,648],{"class":591},"'\n",[586,650,652],{"class":588,"line":651},3,[586,653,654],{"emptyLinePlaceholder":520},"\n",[586,656,658,661,664,666,670,673,676,679,681],{"class":588,"line":657},4,[586,659,660],{"class":599},"const",[586,662,663],{"class":632}," currentAnimation ",[586,665,606],{"class":591},[586,667,669],{"class":668},"s2Zo4"," ref",[586,671,672],{"class":632},"(",[586,674,675],{"class":591},"'",[586,677,678],{"class":612},"cientosIdle",[586,680,675],{"class":591},[586,682,683],{"class":632},")\n",[586,685,687,690,692],{"class":588,"line":686},5,[586,688,689],{"class":591},"\u003C/",[586,691,596],{"class":595},[586,693,618],{"class":591},[586,695,697],{"class":588,"line":696},6,[586,698,654],{"emptyLinePlaceholder":520},[586,700,702,704,707],{"class":588,"line":701},7,[586,703,592],{"class":591},[586,705,706],{"class":595},"template",[586,708,618],{"class":591},[586,710,712,715,718],{"class":588,"line":711},8,[586,713,714],{"class":591},"  \u003C",[586,716,717],{"class":595},"TresCanvas",[586,719,618],{"class":591},[586,721,723,726,729],{"class":588,"line":722},9,[586,724,725],{"class":591},"    \u003C",[586,727,728],{"class":595},"Suspense",[586,730,618],{"class":591},[586,732,734,737],{"class":733,"line":577},[588,622],[586,735,736],{"class":591},"      \u003C",[586,738,739],{"class":595},"AnimatedSprite\n",[586,741,743,746,748,750,753],{"class":742,"line":578},[588,622],[586,744,745],{"class":599},"        image",[586,747,606],{"class":591},[586,749,609],{"class":591},[586,751,752],{"class":612},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosTexture.png",[586,754,755],{"class":591},"\"\n",[586,757,759,762,764,766,769],{"class":758,"line":579},[588,622],[586,760,761],{"class":599},"        atlas",[586,763,606],{"class":591},[586,765,609],{"class":591},[586,767,768],{"class":612},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosAtlas.json",[586,770,755],{"class":591},[586,772,774,777,779,781,784],{"class":773,"line":580},[588,622],[586,775,776],{"class":599},"        :animation",[586,778,606],{"class":591},[586,780,609],{"class":591},[586,782,783],{"class":612},"currentAnimation",[586,785,755],{"class":591},[586,787,789],{"class":788,"line":581},[588,622],[586,790,791],{"class":591},"      />\n",[586,793,795,798,800],{"class":588,"line":794},15,[586,796,797],{"class":591},"    \u003C/",[586,799,728],{"class":595},[586,801,618],{"class":591},[586,803,805,808,810],{"class":588,"line":804},16,[586,806,807],{"class":591},"  \u003C/",[586,809,717],{"class":595},[586,811,618],{"class":591},[586,813,815,817,819],{"class":588,"line":814},17,[586,816,689],{"class":591},[586,818,706],{"class":595},[586,820,618],{"class":591},[822,823,824],"prose-warning",{},[504,825,826,828,829,832],{},[542,827,544],{}," loads resources asynchronously, so it must be wrapped in a ",[542,830,831],{},"\u003CSuspense />",".",[568,834,836],{"id":835},"compiling-an-atlas","Compiling an atlas",[504,838,839,840,842],{},"In typical usage, ",[542,841,544],{}," requires both the URL to a texture of compiled sprite images and a JSON atlas containing information about the sprites in the texture.",[558,844,845,851],{},[561,846,847],{},[547,848,850],{"href":752,"rel":849},[551],"example compiled texture",[561,852,853],{},[547,854,856],{"href":768,"rel":855},[551],"example JSON atlas",[504,858,859,860,865],{},"Compiling source images into a texture atlas is usually handled by third-party software. You may find ",[547,861,864],{"href":862,"rel":863},"https://www.codeandweb.com/texturepacker",[551],"TexturePacker"," useful.",[568,867,869],{"id":868},"without-an-atlas","Without an atlas",[504,871,872,873,876],{},"There may be cases where you don't want to supply an atlas to the ",[542,874,875],{},"atlas"," prop. To do so:",[558,878,879,882,885,888],{},[561,880,881],{},"Compile your source images into a single image texture.",[561,883,884],{},"Space each sprite into equally sized columns and rows in the compiled image texture.",[561,886,887],{},"Ensure no extra padding has been added to the compiled image texture.",[561,889,890,891,893,894,832],{},"Set the ",[542,892,875],{}," prop to number of columns, number of rows as ",[542,895,896],{},"[number, number]",[568,898,900],{"id":899},"spritesheets-in-the-wild","Spritesheets in the wild",[822,902,903],{},[504,904,905,906,908],{},"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 ",[542,907,544],{},". In many cases, it's advisable to recompile the spritesheet.",[910,911,913],"h3",{"id":912},"how-to-recompile-an-existing-spritesheet-image","How to recompile an existing spritesheet image",[558,915,916,919,922,925,938],{},[561,917,918],{},"Cut individual sprites from the spritesheet and paste them into separate layers in an image editing application, e.g., GIMP.",[561,920,921],{},"Align the layers for animation. Toggling layer visibility on/off will show you how the animation will display, frame to frame.",[561,923,924],{},"Export layers as individual images.",[561,926,927,928,931,934,935,937],{},"Name the individual images according to the following pattern: ",[929,930],"br",{},[542,932,933],{},"[animation name][frame number].[extension]"," ",[929,936],{},"E.g., walk000.png, walk001.png, idle000.png, idle001.png",[561,939,940],{},"Compile individual images into an image texture and atlas using a texture packing application, like TexturePacker.",[568,942,944],{"id":943},"props","Props",[946,947,948,965],"table",{},[949,950,951],"thead",{},[952,953,954,959,962],"tr",{},[955,956,958],"th",{"align":957},"left","Name",[955,960,961],{"align":957},"Description",[955,963,964],{"align":957},"Default",[966,967,968,982,1022,1082,1097,1113,1138,1153,1167,1181,1195,1214,1238,1258,1277],"tbody",{},[952,969,970,974,980],{},[971,972,973],"td",{"align":957},"image",[971,975,976,979],{"align":957},[542,977,978],{},"string"," – URL of the image texture or an image dataURL. This prop is not reactive.",[971,981],{"align":957},[952,983,984,986,1020],{},[971,985,875],{"align":957},[971,987,988,991,992,1017,1019],{"align":957},[542,989,990],{},"string | Atlasish"," – ",[558,993,994,1000,1006,1011],{},[561,995,996,997,999],{},"If ",[542,998,978],{},", the URL of the JSON atlas.",[561,1001,996,1002,1005],{},[542,1003,1004],{},"number",", the number of columns in the texture.",[561,1007,996,1008,1010],{},[542,1009,896],{},", the number of columns/rows in the texture.",[561,1012,996,1013,1016],{},[542,1014,1015],{},"AtlasData",", the atlas as a JS object.",[929,1018],{},"This prop is not reactive.",[971,1021],{"align":957},[952,1023,1024,1027,1080],{},[971,1025,1026],{"align":957},"definitions",[971,1028,1029,1032,1033,1035,1036,1038,1040,1041,1043,1045,1046],{"align":957},[542,1030,1031],{},"Record\u003Cstring, string>"," – Specify playback frame order and repeated frames (delays). ",[542,1034,1026],{}," is a record where keys are atlas animation names and values are strings containing an animation definition.",[929,1037],{},[929,1039],{},"A \"animation definition\" comma-separated string of frame numbers with optional parentheses-surrounded durations.",[929,1042],{},[929,1044],{},"Here is how various definition strings convert to arrays of frames for playback:",[558,1047,1048,1055,1062,1068,1074],{},[561,1049,1050,1051,1054],{},"\"0,2,1\" - ",[586,1052,1053],{},"0,2,1",", i.e., play frame 0, 2, then 1.",[561,1056,1057,1058,1061],{},"\"2(10)\" - ",[586,1059,1060],{},"2,2,2,2,2,2,2,2,2,2",", i.e., play from 2 10 times.",[561,1063,1064,1065],{},"\"1-4\" - ",[586,1066,1067],{},"1,2,3,4",[561,1069,1070,1071],{},"\"10-5(2)\" - ",[586,1072,1073],{},"10,10,9,9,8,8,7,7,6,6,5,5",[561,1075,1076,1077],{},"\"1-4(3),10(2)\" - ",[586,1078,1079],{},"1,1,1,2,2,2,3,3,3,4,4,4,10,10",[971,1081],{"align":957},[952,1083,1084,1087,1092],{},[971,1085,1086],{"align":957},"fps",[971,1088,1089,1091],{"align":957},[542,1090,1004],{}," – Desired frames per second of the animation.",[971,1093,1094],{"align":957},[542,1095,1096],{},"30",[952,1098,1099,1102,1108],{},[971,1100,1101],{"align":957},"loop",[971,1103,1104,1107],{"align":957},[542,1105,1106],{},"boolean"," – Whether or not the animation should loop.",[971,1109,1110],{"align":957},[542,1111,1112],{},"true",[952,1114,1115,1118,1133],{},[971,1116,1117],{"align":957},"animation",[971,1119,1120,1123,1124,1126,1127,1129,1130,1132],{"align":957},[542,1121,1122],{},"string | [number, number] | number"," – If ",[542,1125,978],{},", name of the animation to play. If ",[542,1128,896],{},", start and end frames of the animation. If ",[542,1131,1004],{},", frame number to display.",[971,1134,1135],{"align":957},[542,1136,1137],{},"0",[952,1139,1140,1143,1148],{},[971,1141,1142],{"align":957},"paused",[971,1144,1145,1147],{"align":957},[542,1146,1106],{}," – Whether the animation is paused.",[971,1149,1150],{"align":957},[542,1151,1152],{},"false",[952,1154,1155,1158,1163],{},[971,1156,1157],{"align":957},"reversed",[971,1159,1160,1162],{"align":957},[542,1161,1106],{}," – Whether to play the animation in reverse.",[971,1164,1165],{"align":957},[542,1166,1152],{},[952,1168,1169,1172,1177],{},[971,1170,1171],{"align":957},"flipX",[971,1173,1174,1176],{"align":957},[542,1175,1106],{}," – Whether the sprite should be flipped, left to right.",[971,1178,1179],{"align":957},[542,1180,1152],{},[952,1182,1183,1186,1191],{},[971,1184,1185],{"align":957},"resetOnEnd",[971,1187,1188,1190],{"align":957},[542,1189,1106],{}," – For a non-looping animation, when the animation ends, whether to display the zeroth frame.",[971,1192,1193],{"align":957},[542,1194,1152],{},[952,1196,1197,1200,1210],{},[971,1198,1199],{"align":957},"asSprite",[971,1201,1202,1204,1205],{"align":957},[542,1203,1106],{}," – Whether to display the object as a THREE.Sprite. ",[547,1206,1209],{"href":1207,"rel":1208},"https://threejs.org/docs/?q=sprite#api/en/objects/Sprite",[551],"See THREE.Sprite",[971,1211,1212],{"align":957},[542,1213,1112],{},[952,1215,1216,1219,1233],{},[971,1217,1218],{"align":957},"center",[971,1220,1221,1224,1225,1228,1229,1232],{"align":957},[542,1222,1223],{},"TresVector2"," – Anchor point of the object. A value of ",[586,1226,1227],{},"0.5, 0.5"," corresponds to the center. ",[586,1230,1231],{},"0, 0"," is left, bottom.",[971,1234,1235],{"align":957},[542,1236,1237],{},"[0.5, 0.5]",[952,1239,1240,1243,1253],{},[971,1241,1242],{"align":957},"alphaTest",[971,1244,1245,1247,1248],{"align":957},[542,1246,1004],{}," – Alpha test value for the material. ",[547,1249,1252],{"href":1250,"rel":1251},"https://threejs.org/docs/#api/en/materials/Material.alphaTest",[551],"See THREE.Material.alphaTest",[971,1254,1255],{"align":957},[542,1256,1257],{},"0.0",[952,1259,1260,1263,1273],{},[971,1261,1262],{"align":957},"depthTest",[971,1264,1265,1267,1268],{"align":957},[542,1266,1106],{}," – Depth test value for the material. ",[547,1269,1272],{"href":1270,"rel":1271},"https://threejs.org/docs/#api/en/materials/Material.depthTest",[551],"See THREE.Material.depthTest",[971,1274,1275],{"align":957},[542,1276,1112],{},[952,1278,1279,1282,1292],{},[971,1280,1281],{"align":957},"depthWrite",[971,1283,1284,1286,1287],{"align":957},[542,1285,1106],{}," – Depth write value for the material. ",[547,1288,1291],{"href":1289,"rel":1290},"https://threejs.org/docs/#api/en/materials/Material.depthWrite",[551],"See THREE.Material.depthWrite",[971,1293,1294],{"align":957},[542,1295,1112],{},[568,1297,1299],{"id":1298},"events","Events",[946,1301,1302,1314],{},[949,1303,1304],{},[952,1305,1306,1309,1311],{},[955,1307,1308],{},"Event",[955,1310,961],{},[955,1312,1313],{},"Argument",[966,1315,1316,1331,1352],{},[952,1317,1318,1323,1326],{},[971,1319,1320],{},[542,1321,1322],{},"frame",[971,1324,1325],{},"Emitted when the displayed animation frame changes – at most once per tick, frames may be dropped",[971,1327,1328,1330],{},[542,1329,978],{}," – Name of the newly displayed frame",[952,1332,1333,1338,1347],{},[971,1334,1335],{},[542,1336,1337],{},"end",[971,1339,1340,1341,1344,1345],{},"Emitted when the animation ends – ",[542,1342,1343],{},"props.loop"," must be set to ",[542,1346,1152],{},[971,1348,1349,1351],{},[542,1350,978],{}," – Name of the ending frame",[952,1353,1354,1358,1365],{},[971,1355,1356],{},[542,1357,1101],{},[971,1359,1360,1361,1344,1363],{},"Emitted when the animation loops – ",[542,1362,1343],{},[542,1364,1112],{},[971,1366,1367,1369],{},[542,1368,978],{}," – Name of the frame at the end of the loop",[568,1371,1372],{"id":1117},"Animation",[504,1374,1375,1376,1379],{},"The ",[542,1377,1378],{},":animation"," prop holds either the name of the currently playing animation or a range of frames to play, or a frame number to display.",[910,1381,1383],{"id":1382},"using-named-animations-as-animation","Using named animations as animation",[504,1385,1386],{},"When individual files are converted to a spritesheet/atlas, typically the original images' filenames will be included in the atlas.",[504,1388,1389,1391],{},[542,1390,544],{}," uses those filenames to automatically group images into animations.",[504,1393,1394],{},"Use either of the following naming conventions for your source images ...",[558,1396,1397,1402],{},[561,1398,1399],{},[542,1400,1401],{},"[animation name][frame number].[file_extension]",[561,1403,1404],{},[542,1405,1406],{},"[animation name]_[frame number].[file_extension]",[504,1408,1409,1410,1412,1413,1416,1417,1419,1420,1422],{},"... then ",[542,1411,544],{}," will automatically make all ",[542,1414,1415],{},"[animation name]"," available for playback. Just pass ",[542,1418,1415],{}," to the component's ",[542,1421,1378],{}," prop.",[910,1424,1426],{"id":1425},"example","Example",[504,1428,1429],{},"For our Cientos heart cartoon character animation, here's how the filenames map to animation names.",[946,1431,1432,1442],{},[949,1433,1434],{},[952,1435,1436,1439],{},[955,1437,1438],{},"Filenames",[955,1440,1441],{},"Animation name",[966,1443,1444,1451,1459],{},[952,1445,1446,1449],{},[971,1447,1448],{},"cientosIdle0000.png, cientosIdle0001.png, ...",[971,1450,678],{},[952,1452,1453,1456],{},[971,1454,1455],{},"cientosIdleToWalkTransition0000.png",[971,1457,1458],{},"cientosIdleToWalkTransition",[952,1460,1461,1464],{},[971,1462,1463],{},"cientosWalk0000.png, cientosWalk0001.png, ...",[971,1465,1466],{},"cientosWalk",[568,1468,1469],{"id":1026},"Definitions",[504,1471,1472,1473,1476,1477,1481],{},"You can supply an object to the ",[542,1474,1475],{},":definitions"," prop. Any ",[547,1478,1480],{"href":1479},"#animation","named animation"," can be a key. The value is a string that specifies frame order and delays.",[910,1483,1485],{"id":1484},"demo","Demo",[504,1487,1488,1489,1491,1492,832],{},"In this demo, the 'idle' animation is comprised of six different images. By default, those images will play sequentially when the ",[542,1490,1378],{}," prop is ",[542,1493,1494],{},"'idle'",[504,1496,1497,1498,1500,1501,1504],{},"But below, we've added a ",[542,1499,1475],{}," prop with this value for the ",[542,1502,1503],{},"idle"," key:",[572,1506,1511],{"className":1507,"code":1509,"language":1510},[1508],"language-text","'0-5, 0(10), 1-2, 3(20), 4-5, 0-5(3)'\n","text",[542,1512,1509],{"__ignoreMap":512},[504,1514,1515],{},"So, instead of playing images 0-5 sequentially, this animation will play instead:",[558,1517,1518,1527,1541],{},[561,1519,1520,1523,1524,1526],{},[542,1521,1522],{},"0-5"," – Play all six images (",[542,1525,1522],{},") of the animation normally.",[561,1528,1529,1532,1533,1536,1537,1540],{},[542,1530,1531],{},"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 (",[542,1534,1535],{},"0(10)",") and a delay of twenty frames at the top of the bounce (",[542,1538,1539],{},"3(20)",").",[561,1542,1543,1546],{},[542,1544,1545],{},"0-5(3)"," – Finally, play all six images of the animation with a delay of three frames each.",[568,1548,1549],{"id":1218},"Center",[504,1551,1552,1553,1556],{},"In addition to being the sprite's anchor point, the ",[542,1554,1555],{},":center"," prop also controls how differently sized source images will \"grow\" and \"shrink\". Namely, they \"grow out from\" and \"shrink towards\" the center.",[1558,1559,1560],"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":512,"searchDepth":513,"depth":514,"links":1562},[1563,1564,1565,1566,1569,1570,1571,1575,1578],{"id":570,"depth":514,"text":15},{"id":835,"depth":514,"text":836},{"id":868,"depth":514,"text":869},{"id":899,"depth":514,"text":900,"children":1567},[1568],{"id":912,"depth":651,"text":913},{"id":943,"depth":514,"text":944},{"id":1298,"depth":514,"text":1299},{"id":1117,"depth":514,"text":1372,"children":1572},[1573,1574],{"id":1382,"depth":651,"text":1383},{"id":1425,"depth":651,"text":1426},{"id":1026,"depth":514,"text":1469,"children":1576},[1577],{"id":1484,"depth":651,"text":1485},{"id":1218,"depth":514,"text":1549},{},{"title":425,"description":527},"1Fefoz-lCiLy_IhyyeC3jSJZXqD9LUr1drneDRIGstI",{"id":1583,"title":429,"body":1584,"description":2014,"extension":517,"links":518,"meta":2015,"navigation":520,"path":430,"seo":2016,"stem":431,"__hash__":2017},"docs/2.api/9.objects/cube-camera.md",{"type":501,"value":1585,"toc":2010},[1586,1591,1601,1606,1608,1901,1903,2007],[534,1587,1588],{},[1589,1590],"objects-cube-camera",{},[504,1592,1593,1596,1597,1600],{},[542,1594,1595],{},"\u003CCubeCamera />"," creates a ",[542,1598,1599],{},"THREE.CubeCamera"," and uses it to render an environment map of your scene. The environment map is then applied to component's children.",[504,1602,1603,1605],{},[542,1604,1595],{}," makes its children invisible while rendering to the internal buffer so that they are not included in the reflection.",[568,1607,15],{"id":570},[572,1609,1612],{"className":574,"code":1610,"highlights":1611,"language":582,"meta":512,"style":512},"\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",[514,577,794],[542,1613,1614,1634,1660,1668,1672,1680,1688,1710,1719,1723,1756,1765,1787,1819,1828,1837,1841,1862,1883,1892],{"__ignoreMap":512},[586,1615,1616,1618,1620,1622,1624,1626,1628,1630,1632],{"class":588,"line":513},[586,1617,592],{"class":591},[586,1619,596],{"class":595},[586,1621,600],{"class":599},[586,1623,603],{"class":599},[586,1625,606],{"class":591},[586,1627,609],{"class":591},[586,1629,613],{"class":612},[586,1631,609],{"class":591},[586,1633,618],{"class":591},[586,1635,1637,1639,1641,1644,1647,1650,1652,1654,1656,1658],{"class":1636,"line":514},[588,622],[586,1638,626],{"class":625},[586,1640,629],{"class":591},[586,1642,1643],{"class":632}," CubeCamera",[586,1645,1646],{"class":591},",",[586,1648,1649],{"class":632}," OrbitControls",[586,1651,636],{"class":591},[586,1653,639],{"class":625},[586,1655,642],{"class":591},[586,1657,645],{"class":612},[586,1659,648],{"class":591},[586,1661,1662,1664,1666],{"class":588,"line":651},[586,1663,689],{"class":591},[586,1665,596],{"class":595},[586,1667,618],{"class":591},[586,1669,1670],{"class":588,"line":657},[586,1671,654],{"emptyLinePlaceholder":520},[586,1673,1674,1676,1678],{"class":588,"line":686},[586,1675,592],{"class":591},[586,1677,706],{"class":595},[586,1679,618],{"class":591},[586,1681,1682,1684,1686],{"class":588,"line":696},[586,1683,714],{"class":591},[586,1685,717],{"class":595},[586,1687,618],{"class":591},[586,1689,1690,1692,1695,1698,1700,1702,1705,1707],{"class":588,"line":701},[586,1691,725],{"class":591},[586,1693,1694],{"class":595},"TresPerspectiveCamera",[586,1696,1697],{"class":599}," :position",[586,1699,606],{"class":591},[586,1701,609],{"class":591},[586,1703,1704],{"class":612},"[0, 2, 5]",[586,1706,609],{"class":591},[586,1708,1709],{"class":591}," />\n",[586,1711,1712,1714,1717],{"class":588,"line":711},[586,1713,725],{"class":591},[586,1715,1716],{"class":595},"OrbitControls",[586,1718,1709],{"class":591},[586,1720,1721],{"class":588,"line":722},[586,1722,654],{"emptyLinePlaceholder":520},[586,1724,1726,1728,1730,1733,1735,1737,1740,1742,1745,1747,1749,1752,1754],{"class":1725,"line":577},[588,622],[586,1727,725],{"class":591},[586,1729,429],{"class":595},[586,1731,1732],{"class":599}," :resolution",[586,1734,606],{"class":591},[586,1736,609],{"class":591},[586,1738,1739],{"class":612},"256",[586,1741,609],{"class":591},[586,1743,1744],{"class":599}," :frames",[586,1746,606],{"class":591},[586,1748,609],{"class":591},[586,1750,1751],{"class":612},"Infinity",[586,1753,609],{"class":591},[586,1755,618],{"class":591},[586,1757,1758,1760,1763],{"class":588,"line":578},[586,1759,736],{"class":591},[586,1761,1762],{"class":595},"TresMesh",[586,1764,618],{"class":591},[586,1766,1767,1770,1773,1776,1778,1780,1783,1785],{"class":588,"line":579},[586,1768,1769],{"class":591},"        \u003C",[586,1771,1772],{"class":595},"TresSphereGeometry",[586,1774,1775],{"class":599}," :args",[586,1777,606],{"class":591},[586,1779,609],{"class":591},[586,1781,1782],{"class":612},"[1, 32, 32]",[586,1784,609],{"class":591},[586,1786,1709],{"class":591},[586,1788,1789,1791,1794,1797,1799,1801,1804,1806,1809,1811,1813,1815,1817],{"class":588,"line":580},[586,1790,1769],{"class":591},[586,1792,1793],{"class":595},"TresMeshStandardMaterial",[586,1795,1796],{"class":599}," :metalness",[586,1798,606],{"class":591},[586,1800,609],{"class":591},[586,1802,1803],{"class":612},"1",[586,1805,609],{"class":591},[586,1807,1808],{"class":599}," :roughness",[586,1810,606],{"class":591},[586,1812,609],{"class":591},[586,1814,1137],{"class":612},[586,1816,609],{"class":591},[586,1818,1709],{"class":591},[586,1820,1821,1824,1826],{"class":588,"line":581},[586,1822,1823],{"class":591},"      \u003C/",[586,1825,1762],{"class":595},[586,1827,618],{"class":591},[586,1829,1831,1833,1835],{"class":1830,"line":794},[588,622],[586,1832,797],{"class":591},[586,1834,429],{"class":595},[586,1836,618],{"class":591},[586,1838,1839],{"class":588,"line":804},[586,1840,654],{"emptyLinePlaceholder":520},[586,1842,1843,1845,1848,1851,1853,1855,1858,1860],{"class":588,"line":814},[586,1844,725],{"class":591},[586,1846,1847],{"class":595},"TresAmbientLight",[586,1849,1850],{"class":599}," :intensity",[586,1852,606],{"class":591},[586,1854,609],{"class":591},[586,1856,1857],{"class":612},"0.5",[586,1859,609],{"class":591},[586,1861,1709],{"class":591},[586,1863,1865,1867,1870,1872,1874,1876,1879,1881],{"class":588,"line":1864},18,[586,1866,725],{"class":591},[586,1868,1869],{"class":595},"TresDirectionalLight",[586,1871,1697],{"class":599},[586,1873,606],{"class":591},[586,1875,609],{"class":591},[586,1877,1878],{"class":612},"[0, 2, 4]",[586,1880,609],{"class":591},[586,1882,1709],{"class":591},[586,1884,1886,1888,1890],{"class":588,"line":1885},19,[586,1887,807],{"class":591},[586,1889,717],{"class":595},[586,1891,618],{"class":591},[586,1893,1895,1897,1899],{"class":588,"line":1894},20,[586,1896,689],{"class":591},[586,1898,706],{"class":595},[586,1900,618],{"class":591},[568,1902,944],{"id":943},[946,1904,1905,1916],{},[949,1906,1907],{},[952,1908,1909,1912,1914],{},[955,1910,1911],{"align":957},"Prop",[955,1913,961],{"align":957},[955,1915,964],{},[966,1917,1918,1938,1953,1968,1983,1995],{},[952,1919,1920,1925,1934],{},[971,1921,1922],{"align":957},[542,1923,1924],{},"frames",[971,1926,1927,1928,1930,1931,1933],{"align":957},"Number of frames to render. Set to ",[542,1929,1803],{}," for a static scene. ",[542,1932,1751],{}," to update continuously.",[971,1935,1936],{},[542,1937,1751],{},[952,1939,1940,1945,1948],{},[971,1941,1942],{"align":957},[542,1943,1944],{},"resolution",[971,1946,1947],{"align":957},"Resolution of the FBO",[971,1949,1950],{},[542,1951,1952],{},"255",[952,1954,1955,1960,1963],{},[971,1956,1957],{"align":957},[542,1958,1959],{},"near",[971,1961,1962],{"align":957},"Camera near",[971,1964,1965],{},[542,1966,1967],{},"0.1",[952,1969,1970,1975,1978],{},[971,1971,1972],{"align":957},[542,1973,1974],{},"far",[971,1976,1977],{"align":957},"Camera far",[971,1979,1980],{},[542,1981,1982],{},"1000",[952,1984,1985,1990,1993],{},[971,1986,1987],{"align":957},[542,1988,1989],{},"envMap",[971,1991,1992],{"align":957},"Custom environment map that is temporarily set as the scene's background",[971,1994],{},[952,1996,1997,2002,2005],{},[971,1998,1999],{"align":957},[542,2000,2001],{},"fog",[971,2003,2004],{"align":957},"Custom fog that is temporarily set as the scene's fog",[971,2006],{},[1558,2008,2009],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":512,"searchDepth":513,"depth":514,"links":2011},[2012,2013],{"id":570,"depth":514,"text":15},{"id":943,"depth":514,"text":944},"Render environment maps for reflective objects.",{},{"title":429,"description":2014},"Q6v8KV8NG276AtuBPiwOGmcEikpDQU0Z6vAT9ILaU70",{"id":2019,"title":433,"body":2020,"description":3204,"extension":517,"links":518,"meta":3205,"navigation":520,"path":434,"seo":3206,"stem":435,"__hash__":3207},"docs/2.api/9.objects/fbo.md",{"type":501,"value":2021,"toc":3196},[2022,2028,2031,2038,2040,2713,2715,2835,2839,2841,2847,2854,2857,3105,3109,3193],[2023,2024,2025],"scene-wrapper",{},[2026,2027],"objects-fbo",{},[504,2029,2030],{},"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.",[504,2032,2033,2034,2037],{},"Cientos provides an ",[542,2035,2036],{},"\u003CFbo />"," component make it easy to use FBOs in your application.",[568,2039,15],{"id":570},[572,2041,2048],{"className":574,"code":2042,"highlights":2043,"language":582,"meta":512,"style":512},"\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",[514,2044,2045,2046,2047],23,24,25,26,[542,2049,2050,2070,2094,2117,2136,2155,2159,2199,2227,2231,2265,2296,2327,2353,2358,2366,2370,2378,2410,2429,2437,2442,2463,2471,2486,2500,2515,2521,2530,2551,2556,2564,2579,2594,2599,2608,2613,2621,2634,2649,2655,2676,2686,2695,2704],{"__ignoreMap":512},[586,2051,2052,2054,2056,2058,2060,2062,2064,2066,2068],{"class":588,"line":513},[586,2053,592],{"class":591},[586,2055,596],{"class":595},[586,2057,600],{"class":599},[586,2059,603],{"class":599},[586,2061,606],{"class":591},[586,2063,609],{"class":591},[586,2065,613],{"class":612},[586,2067,609],{"class":591},[586,2069,618],{"class":591},[586,2071,2073,2075,2077,2080,2082,2084,2086,2088,2090,2092],{"class":2072,"line":514},[588,622],[586,2074,626],{"class":625},[586,2076,629],{"class":591},[586,2078,2079],{"class":632}," Fbo",[586,2081,1646],{"class":591},[586,2083,1649],{"class":632},[586,2085,636],{"class":591},[586,2087,639],{"class":625},[586,2089,642],{"class":591},[586,2091,645],{"class":612},[586,2093,648],{"class":591},[586,2095,2096,2098,2101,2103,2106,2108,2110,2112,2115],{"class":588,"line":651},[586,2097,626],{"class":625},[586,2099,2100],{"class":625}," type",[586,2102,629],{"class":591},[586,2104,2105],{"class":632}," TresObject",[586,2107,636],{"class":591},[586,2109,639],{"class":625},[586,2111,642],{"class":591},[586,2113,2114],{"class":612},"@tresjs/core",[586,2116,648],{"class":591},[586,2118,2119,2121,2123,2126,2128,2130,2132,2134],{"class":588,"line":657},[586,2120,626],{"class":625},[586,2122,629],{"class":591},[586,2124,2125],{"class":632}," TresCanvas",[586,2127,636],{"class":591},[586,2129,639],{"class":625},[586,2131,642],{"class":591},[586,2133,2114],{"class":612},[586,2135,648],{"class":591},[586,2137,2138,2140,2142,2145,2147,2149,2151,2153],{"class":588,"line":686},[586,2139,626],{"class":625},[586,2141,629],{"class":591},[586,2143,2144],{"class":632}," shallowRef",[586,2146,636],{"class":591},[586,2148,639],{"class":625},[586,2150,642],{"class":591},[586,2152,582],{"class":612},[586,2154,648],{"class":591},[586,2156,2157],{"class":588,"line":696},[586,2158,654],{"emptyLinePlaceholder":520},[586,2160,2161,2163,2166,2168,2170,2172,2176,2179,2181,2184,2187,2190,2192,2194,2197],{"class":588,"line":701},[586,2162,660],{"class":599},[586,2164,2165],{"class":632}," fboRef ",[586,2167,606],{"class":591},[586,2169,2144],{"class":668},[586,2171,592],{"class":591},[586,2173,2175],{"class":2174},"sBMFI","InstanceType",[586,2177,2178],{"class":591},"\u003Ctypeof",[586,2180,2079],{"class":632},[586,2182,2183],{"class":591},">",[586,2185,2186],{"class":591}," |",[586,2188,2189],{"class":2174}," null",[586,2191,2183],{"class":591},[586,2193,672],{"class":632},[586,2195,2196],{"class":591},"null",[586,2198,683],{"class":632},[586,2200,2201,2203,2206,2208,2210,2212,2215,2217,2219,2221,2223,2225],{"class":588,"line":711},[586,2202,660],{"class":599},[586,2204,2205],{"class":632}," torusRef ",[586,2207,606],{"class":591},[586,2209,2144],{"class":668},[586,2211,592],{"class":591},[586,2213,2214],{"class":2174},"TresObject",[586,2216,2186],{"class":591},[586,2218,2189],{"class":2174},[586,2220,2183],{"class":591},[586,2222,672],{"class":632},[586,2224,2196],{"class":591},[586,2226,683],{"class":632},[586,2228,2229],{"class":588,"line":722},[586,2230,654],{"emptyLinePlaceholder":520},[586,2232,2233,2236,2239,2242,2246,2249,2251,2253,2256,2259,2262],{"class":588,"line":577},[586,2234,2235],{"class":599},"function",[586,2237,2238],{"class":668}," onLoop",[586,2240,2241],{"class":591},"({",[586,2243,2245],{"class":2244},"sHdIc"," elapsed",[586,2247,2248],{"class":591}," }:",[586,2250,629],{"class":591},[586,2252,2245],{"class":595},[586,2254,2255],{"class":591},":",[586,2257,2258],{"class":2174}," number",[586,2260,2261],{"class":591}," })",[586,2263,2264],{"class":591}," {\n",[586,2266,2267,2270,2273,2276,2279,2281,2284,2287,2290,2293],{"class":588,"line":578},[586,2268,2269],{"class":625},"  if",[586,2271,2272],{"class":595}," (",[586,2274,2275],{"class":591},"!",[586,2277,2278],{"class":632},"torusRef",[586,2280,832],{"class":591},[586,2282,2283],{"class":632},"value",[586,2285,2286],{"class":595},") ",[586,2288,2289],{"class":591},"{",[586,2291,2292],{"class":625}," return",[586,2294,2295],{"class":591}," }\n",[586,2297,2298,2301,2303,2305,2307,2310,2312,2315,2318,2320,2323],{"class":588,"line":579},[586,2299,2300],{"class":632},"  torusRef",[586,2302,832],{"class":591},[586,2304,2283],{"class":632},[586,2306,832],{"class":591},[586,2308,2309],{"class":632},"rotation",[586,2311,832],{"class":591},[586,2313,2314],{"class":632},"x",[586,2316,2317],{"class":591}," =",[586,2319,2245],{"class":632},[586,2321,2322],{"class":591}," *",[586,2324,2326],{"class":2325},"sbssI"," 0.745\n",[586,2328,2329,2331,2333,2335,2337,2339,2341,2344,2346,2348,2350],{"class":588,"line":580},[586,2330,2300],{"class":632},[586,2332,832],{"class":591},[586,2334,2283],{"class":632},[586,2336,832],{"class":591},[586,2338,2309],{"class":632},[586,2340,832],{"class":591},[586,2342,2343],{"class":632},"y",[586,2345,2317],{"class":591},[586,2347,2245],{"class":632},[586,2349,2322],{"class":591},[586,2351,2352],{"class":2325}," 0.361\n",[586,2354,2355],{"class":588,"line":581},[586,2356,2357],{"class":591},"}\n",[586,2359,2360,2362,2364],{"class":588,"line":794},[586,2361,689],{"class":591},[586,2363,596],{"class":595},[586,2365,618],{"class":591},[586,2367,2368],{"class":588,"line":804},[586,2369,654],{"emptyLinePlaceholder":520},[586,2371,2372,2374,2376],{"class":588,"line":814},[586,2373,592],{"class":591},[586,2375,706],{"class":595},[586,2377,618],{"class":591},[586,2379,2380,2382,2384,2387,2389,2391,2394,2396,2399,2401,2403,2406,2408],{"class":588,"line":1864},[586,2381,714],{"class":591},[586,2383,717],{"class":595},[586,2385,2386],{"class":599}," :clear-color",[586,2388,606],{"class":591},[586,2390,609],{"class":591},[586,2392,2393],{"class":612},"0x222",[586,2395,609],{"class":591},[586,2397,2398],{"class":599}," @loop",[586,2400,606],{"class":591},[586,2402,609],{"class":591},[586,2404,2405],{"class":612},"onLoop",[586,2407,609],{"class":591},[586,2409,618],{"class":591},[586,2411,2412,2414,2416,2418,2420,2422,2425,2427],{"class":588,"line":1885},[586,2413,725],{"class":591},[586,2415,1694],{"class":595},[586,2417,1697],{"class":599},[586,2419,606],{"class":591},[586,2421,609],{"class":591},[586,2423,2424],{"class":612},"[0, 0.5, 5]",[586,2426,609],{"class":591},[586,2428,1709],{"class":591},[586,2430,2431,2433,2435],{"class":588,"line":1894},[586,2432,725],{"class":591},[586,2434,1716],{"class":595},[586,2436,1709],{"class":591},[586,2438,2440],{"class":588,"line":2439},21,[586,2441,654],{"emptyLinePlaceholder":520},[586,2443,2445,2447,2450,2452,2454,2456,2459,2461],{"class":588,"line":2444},22,[586,2446,725],{"class":591},[586,2448,2449],{"class":595},"TresGridHelper",[586,2451,1775],{"class":599},[586,2453,606],{"class":591},[586,2455,609],{"class":591},[586,2457,2458],{"class":612},"[10, 10]",[586,2460,609],{"class":591},[586,2462,1709],{"class":591},[586,2464,2466,2468],{"class":2465,"line":2044},[588,622],[586,2467,725],{"class":591},[586,2469,2470],{"class":595},"Fbo\n",[586,2472,2474,2477,2479,2481,2484],{"class":2473,"line":2045},[588,622],[586,2475,2476],{"class":599},"      ref",[586,2478,606],{"class":591},[586,2480,609],{"class":591},[586,2482,2483],{"class":612},"fboRef",[586,2485,755],{"class":591},[586,2487,2489,2492,2494,2496,2498],{"class":2488,"line":2046},[588,622],[586,2490,2491],{"class":599},"      :depth",[586,2493,606],{"class":591},[586,2495,609],{"class":591},[586,2497,1152],{"class":612},[586,2499,755],{"class":591},[586,2501,2503,2506,2508,2510,2513],{"class":2502,"line":2047},[588,622],[586,2504,2505],{"class":599},"      :settings",[586,2507,606],{"class":591},[586,2509,609],{"class":591},[586,2511,2512],{"class":612},"{ samples: 1 }",[586,2514,755],{"class":591},[586,2516,2518],{"class":588,"line":2517},27,[586,2519,2520],{"class":591},"    />\n",[586,2522,2524,2526,2528],{"class":588,"line":2523},28,[586,2525,725],{"class":591},[586,2527,1762],{"class":595},[586,2529,618],{"class":591},[586,2531,2533,2535,2538,2540,2542,2544,2547,2549],{"class":588,"line":2532},29,[586,2534,736],{"class":591},[586,2536,2537],{"class":595},"TresBoxGeometry",[586,2539,1775],{"class":599},[586,2541,606],{"class":591},[586,2543,609],{"class":591},[586,2545,2546],{"class":612},"[1, 1, 1]",[586,2548,609],{"class":591},[586,2550,1709],{"class":591},[586,2552,2554],{"class":588,"line":2553},30,[586,2555,654],{"emptyLinePlaceholder":520},[586,2557,2559,2561],{"class":588,"line":2558},31,[586,2560,736],{"class":591},[586,2562,2563],{"class":595},"TresMeshBasicMaterial\n",[586,2565,2567,2570,2572,2574,2577],{"class":588,"line":2566},32,[586,2568,2569],{"class":599},"        :color",[586,2571,606],{"class":591},[586,2573,609],{"class":591},[586,2575,2576],{"class":612},"0xFFFFFF",[586,2578,755],{"class":591},[586,2580,2582,2585,2587,2589,2592],{"class":588,"line":2581},33,[586,2583,2584],{"class":599},"        :map",[586,2586,606],{"class":591},[586,2588,609],{"class":591},[586,2590,2591],{"class":612},"fboRef?.instance?.texture ?? null",[586,2593,755],{"class":591},[586,2595,2597],{"class":588,"line":2596},34,[586,2598,791],{"class":591},[586,2600,2602,2604,2606],{"class":588,"line":2601},35,[586,2603,797],{"class":591},[586,2605,1762],{"class":595},[586,2607,618],{"class":591},[586,2609,2611],{"class":588,"line":2610},36,[586,2612,654],{"emptyLinePlaceholder":520},[586,2614,2616,2618],{"class":588,"line":2615},37,[586,2617,725],{"class":591},[586,2619,2620],{"class":595},"TresMesh\n",[586,2622,2624,2626,2628,2630,2632],{"class":588,"line":2623},38,[586,2625,2476],{"class":599},[586,2627,606],{"class":591},[586,2629,609],{"class":591},[586,2631,2278],{"class":612},[586,2633,755],{"class":591},[586,2635,2637,2640,2642,2644,2647],{"class":588,"line":2636},39,[586,2638,2639],{"class":599},"      :position",[586,2641,606],{"class":591},[586,2643,609],{"class":591},[586,2645,2646],{"class":612},"[3, 0, 0]",[586,2648,755],{"class":591},[586,2650,2652],{"class":588,"line":2651},40,[586,2653,2654],{"class":591},"    >\n",[586,2656,2658,2660,2663,2665,2667,2669,2672,2674],{"class":588,"line":2657},41,[586,2659,736],{"class":591},[586,2661,2662],{"class":595},"TresTorusGeometry",[586,2664,1775],{"class":599},[586,2666,606],{"class":591},[586,2668,609],{"class":591},[586,2670,2671],{"class":612},"[1, 0.5, 16, 100]",[586,2673,609],{"class":591},[586,2675,1709],{"class":591},[586,2677,2679,2681,2684],{"class":588,"line":2678},42,[586,2680,736],{"class":591},[586,2682,2683],{"class":595},"TresMeshNormalMaterial",[586,2685,1709],{"class":591},[586,2687,2689,2691,2693],{"class":588,"line":2688},43,[586,2690,797],{"class":591},[586,2692,1762],{"class":595},[586,2694,618],{"class":591},[586,2696,2698,2700,2702],{"class":588,"line":2697},44,[586,2699,807],{"class":591},[586,2701,717],{"class":595},[586,2703,618],{"class":591},[586,2705,2707,2709,2711],{"class":588,"line":2706},45,[586,2708,689],{"class":591},[586,2710,706],{"class":595},[586,2712,618],{"class":591},[568,2714,944],{"id":943},[946,2716,2717,2727],{},[949,2718,2719],{},[952,2720,2721,2723,2725],{},[955,2722,1911],{"align":957},[955,2724,961],{"align":957},[955,2726,964],{},[966,2728,2729,2747,2764,2789,2817],{},[952,2730,2731,2739,2744],{},[971,2732,2733],{"align":957},[2734,2735,2736],"strong",{},[542,2737,2738],{},"width",[971,2740,2741,2743],{"align":957},[542,2742,1004],{}," - The width of the FBO.",[971,2745,2746],{},"Width of the canvas",[952,2748,2749,2756,2761],{},[971,2750,2751],{"align":957},[2734,2752,2753],{},[542,2754,2755],{},"height",[971,2757,2758,2760],{"align":957},[542,2759,1004],{}," - the height of the FBO",[971,2762,2763],{},"Height of the canvas",[952,2765,2766,2773,2785],{},[971,2767,2768],{"align":957},[2734,2769,2770],{},[542,2771,2772],{},"depth",[971,2774,2775,2777,2778,832],{"align":957},[542,2776,1106],{}," - Whether or not the FBO should render the depth to a ",[547,2779,2782],{"href":2780,"rel":2781},"https://threejs.org/docs/?q=webglre#api/en/renderers/WebGLRenderTarget.depthTexture",[551],[542,2783,2784],{},"depthTexture",[971,2786,2787],{},[542,2788,1152],{},[952,2790,2791,2798,2812],{},[971,2792,2793],{"align":957},[2734,2794,2795],{},[542,2796,2797],{},"settings",[971,2799,2800,2803,2804],{"align":957},[542,2801,2802],{},"WebGLRenderTargetOptions"," - Every other configuration property for the ",[547,2805,2808,2811],{"href":2806,"rel":2807},"https://threejs.org/docs/#api/en/renderers/WebGLRenderTarget",[551],[542,2809,2810],{},"WebGLRenderTarget"," class",[971,2813,2814],{},[542,2815,2816],{},"{}",[952,2818,2819,2826,2831],{},[971,2820,2821],{"align":957},[2734,2822,2823],{},[542,2824,2825],{},"autoRender",[971,2827,2828,2830],{"align":957},[542,2829,1106],{}," - Whether to automatically render the FBO on the default scene.",[971,2832,2833],{},[542,2834,1112],{},[568,2836,2838],{"id":2837},"usefbo","useFBO",[504,2840,2030],{},[504,2842,2843,2844,2846],{},"Cientos provides a ",[542,2845,2838],{}," composable to make it easy to use FBOs in your application.",[822,2848,2849],{},[504,2850,1375,2851,2853],{},[542,2852,2838],{}," composable must be used inside of a child component since it needs the context of TresCanvas.",[910,2855,15],{"id":2856},"usage-1",[572,2858,2861],{"className":574,"code":2859,"highlights":2860,"language":582,"meta":512,"style":512},"\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",[514,657,686,696,701,711,722,577,578,1894],[542,2862,2863,2883,2903,2907,2924,2939,2952,2964,2974,2987,2993,3001,3009,3013,3021,3029,3047,3051,3057,3070,3085,3089,3097],{"__ignoreMap":512},[586,2864,2865,2867,2869,2871,2873,2875,2877,2879,2881],{"class":588,"line":513},[586,2866,592],{"class":591},[586,2868,596],{"class":595},[586,2870,600],{"class":599},[586,2872,603],{"class":599},[586,2874,606],{"class":591},[586,2876,609],{"class":591},[586,2878,613],{"class":612},[586,2880,609],{"class":591},[586,2882,618],{"class":591},[586,2884,2886,2888,2890,2893,2895,2897,2899,2901],{"class":2885,"line":514},[588,622],[586,2887,626],{"class":625},[586,2889,629],{"class":591},[586,2891,2892],{"class":632}," useFBO",[586,2894,636],{"class":591},[586,2896,639],{"class":625},[586,2898,642],{"class":591},[586,2900,645],{"class":612},[586,2902,648],{"class":591},[586,2904,2905],{"class":588,"line":651},[586,2906,654],{"emptyLinePlaceholder":520},[586,2908,2910,2912,2915,2917,2919,2921],{"class":2909,"line":657},[588,622],[586,2911,660],{"class":599},[586,2913,2914],{"class":632}," fboTarget ",[586,2916,606],{"class":591},[586,2918,2892],{"class":668},[586,2920,672],{"class":632},[586,2922,2923],{"class":591},"{\n",[586,2925,2927,2930,2932,2936],{"class":2926,"line":686},[588,622],[586,2928,2929],{"class":595},"  depth",[586,2931,2255],{"class":591},[586,2933,2935],{"class":2934},"sfNiH"," true",[586,2937,2938],{"class":591},",\n",[586,2940,2942,2945,2947,2950],{"class":2941,"line":696},[588,622],[586,2943,2944],{"class":595},"  width",[586,2946,2255],{"class":591},[586,2948,2949],{"class":2325}," 512",[586,2951,2938],{"class":591},[586,2953,2955,2958,2960,2962],{"class":2954,"line":701},[588,622],[586,2956,2957],{"class":595},"  height",[586,2959,2255],{"class":591},[586,2961,2949],{"class":2325},[586,2963,2938],{"class":591},[586,2965,2967,2970,2972],{"class":2966,"line":711},[588,622],[586,2968,2969],{"class":595},"  settings",[586,2971,2255],{"class":591},[586,2973,2264],{"class":591},[586,2975,2977,2980,2982,2985],{"class":2976,"line":722},[588,622],[586,2978,2979],{"class":595},"    samples",[586,2981,2255],{"class":591},[586,2983,2984],{"class":2325}," 1",[586,2986,2938],{"class":591},[586,2988,2990],{"class":2989,"line":577},[588,622],[586,2991,2992],{"class":591},"  },\n",[586,2994,2996,2999],{"class":2995,"line":578},[588,622],[586,2997,2998],{"class":591},"}",[586,3000,683],{"class":632},[586,3002,3003,3005,3007],{"class":588,"line":579},[586,3004,689],{"class":591},[586,3006,596],{"class":595},[586,3008,618],{"class":591},[586,3010,3011],{"class":588,"line":580},[586,3012,654],{"emptyLinePlaceholder":520},[586,3014,3015,3017,3019],{"class":588,"line":581},[586,3016,592],{"class":591},[586,3018,706],{"class":595},[586,3020,618],{"class":591},[586,3022,3023,3025,3027],{"class":588,"line":794},[586,3024,714],{"class":591},[586,3026,1762],{"class":595},[586,3028,618],{"class":591},[586,3030,3031,3033,3035,3037,3039,3041,3043,3045],{"class":588,"line":804},[586,3032,725],{"class":591},[586,3034,2537],{"class":595},[586,3036,1775],{"class":599},[586,3038,606],{"class":591},[586,3040,609],{"class":591},[586,3042,2546],{"class":612},[586,3044,609],{"class":591},[586,3046,1709],{"class":591},[586,3048,3049],{"class":588,"line":814},[586,3050,654],{"emptyLinePlaceholder":520},[586,3052,3053,3055],{"class":588,"line":1864},[586,3054,725],{"class":591},[586,3056,2563],{"class":595},[586,3058,3059,3062,3064,3066,3068],{"class":588,"line":1885},[586,3060,3061],{"class":599},"      :color",[586,3063,606],{"class":591},[586,3065,609],{"class":591},[586,3067,2576],{"class":612},[586,3069,755],{"class":591},[586,3071,3073,3076,3078,3080,3083],{"class":3072,"line":1894},[588,622],[586,3074,3075],{"class":599},"      :map",[586,3077,606],{"class":591},[586,3079,609],{"class":591},[586,3081,3082],{"class":612},"fboTarget?.texture ?? null",[586,3084,755],{"class":591},[586,3086,3087],{"class":588,"line":2439},[586,3088,2520],{"class":591},[586,3090,3091,3093,3095],{"class":588,"line":2444},[586,3092,807],{"class":591},[586,3094,1762],{"class":595},[586,3096,618],{"class":591},[586,3098,3099,3101,3103],{"class":588,"line":2044},[586,3100,689],{"class":591},[586,3102,706],{"class":595},[586,3104,618],{"class":591},[910,3106,3108],{"id":3107},"options","Options",[946,3110,3111,3121],{},[949,3112,3113],{},[952,3114,3115,3117,3119],{},[955,3116,1911],{"align":957},[955,3118,961],{"align":957},[955,3120,964],{},[966,3122,3123,3137,3151,3172],{},[952,3124,3125,3131,3135],{},[971,3126,3127],{"align":957},[2734,3128,3129],{},[542,3130,2738],{},[971,3132,3133,2743],{"align":957},[542,3134,1004],{},[971,3136,2746],{},[952,3138,3139,3145,3149],{},[971,3140,3141],{"align":957},[2734,3142,3143],{},[542,3144,2755],{},[971,3146,3147,2760],{"align":957},[542,3148,1004],{},[971,3150,2763],{},[952,3152,3153,3159,3168],{},[971,3154,3155],{"align":957},[2734,3156,3157],{},[542,3158,2772],{},[971,3160,3161,2777,3163,832],{"align":957},[542,3162,1106],{},[547,3164,3166],{"href":2780,"rel":3165},[551],[542,3167,2784],{},[971,3169,3170],{},[542,3171,1152],{},[952,3173,3174,3180,3189],{},[971,3175,3176],{"align":957},[2734,3177,3178],{},[542,3179,2797],{},[971,3181,3182,2803,3184],{"align":957},[542,3183,2802],{},[547,3185,3187,2811],{"href":2806,"rel":3186},[551],[542,3188,2810],{},[971,3190,3191],{},[542,3192,2816],{},[1558,3194,3195],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":512,"searchDepth":513,"depth":514,"links":3197},[3198,3199,3200],{"id":570,"depth":514,"text":15},{"id":943,"depth":514,"text":944},{"id":2837,"depth":514,"text":2838,"children":3201},[3202,3203],{"id":2856,"depth":651,"text":15},{"id":3107,"depth":651,"text":3108},"Render to texture using Frame Buffer Objects.",{},{"title":433,"description":3204},"zUF36nsNVRlMP7A5uu65IxZbcmtRV1okKCAlizt0dq4",{"id":3209,"title":437,"body":3210,"description":3589,"extension":517,"links":518,"meta":3590,"navigation":520,"path":438,"seo":3591,"stem":439,"__hash__":3592},"docs/2.api/9.objects/gradient-texture.md",{"type":501,"value":3211,"toc":3585},[3212,3217,3227,3229,3433,3435,3583],[2023,3213,3214],{},[3215,3216],"objects-gradient-texture",{},[504,3218,3219,3222,3223,3226],{},[542,3220,3221],{},"\u003CGradientTexture />"," creates a gradient in a THREE.Texture and attaches it to its parent THREE.Material's ",[542,3224,3225],{},"map"," by default.",[568,3228,15],{"id":570},[572,3230,3232],{"className":574,"code":3231,"language":582,"meta":512,"style":512},"\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",[542,3233,3234,3254,3273,3281,3285,3293,3301,3320,3324,3332,3352,3361,3368,3382,3396,3401,3409,3417,3425],{"__ignoreMap":512},[586,3235,3236,3238,3240,3242,3244,3246,3248,3250,3252],{"class":588,"line":513},[586,3237,592],{"class":591},[586,3239,596],{"class":595},[586,3241,600],{"class":599},[586,3243,603],{"class":599},[586,3245,606],{"class":591},[586,3247,609],{"class":591},[586,3249,613],{"class":612},[586,3251,609],{"class":591},[586,3253,618],{"class":591},[586,3255,3256,3258,3260,3263,3265,3267,3269,3271],{"class":588,"line":514},[586,3257,626],{"class":625},[586,3259,629],{"class":591},[586,3261,3262],{"class":632}," GradientTexture",[586,3264,636],{"class":591},[586,3266,639],{"class":625},[586,3268,642],{"class":591},[586,3270,645],{"class":612},[586,3272,648],{"class":591},[586,3274,3275,3277,3279],{"class":588,"line":651},[586,3276,689],{"class":591},[586,3278,596],{"class":595},[586,3280,618],{"class":591},[586,3282,3283],{"class":588,"line":657},[586,3284,654],{"emptyLinePlaceholder":520},[586,3286,3287,3289,3291],{"class":588,"line":686},[586,3288,592],{"class":591},[586,3290,706],{"class":595},[586,3292,618],{"class":591},[586,3294,3295,3297,3299],{"class":588,"line":696},[586,3296,714],{"class":591},[586,3298,717],{"class":595},[586,3300,618],{"class":591},[586,3302,3303,3305,3307,3309,3311,3313,3316,3318],{"class":588,"line":701},[586,3304,725],{"class":591},[586,3306,1694],{"class":595},[586,3308,1697],{"class":599},[586,3310,606],{"class":591},[586,3312,609],{"class":591},[586,3314,3315],{"class":612},"[0, 0, 5]",[586,3317,609],{"class":591},[586,3319,1709],{"class":591},[586,3321,3322],{"class":588,"line":711},[586,3323,654],{"emptyLinePlaceholder":520},[586,3325,3326,3328,3330],{"class":588,"line":722},[586,3327,725],{"class":591},[586,3329,1762],{"class":595},[586,3331,618],{"class":591},[586,3333,3334,3336,3339,3341,3343,3345,3348,3350],{"class":588,"line":577},[586,3335,736],{"class":591},[586,3337,3338],{"class":595},"TresPlaneGeometry",[586,3340,1775],{"class":599},[586,3342,606],{"class":591},[586,3344,609],{"class":591},[586,3346,3347],{"class":612},"[2, 2]",[586,3349,609],{"class":591},[586,3351,1709],{"class":591},[586,3353,3354,3356,3359],{"class":588,"line":578},[586,3355,736],{"class":591},[586,3357,3358],{"class":595},"TresMeshBasicMaterial",[586,3360,618],{"class":591},[586,3362,3363,3365],{"class":588,"line":579},[586,3364,1769],{"class":591},[586,3366,3367],{"class":595},"GradientTexture\n",[586,3369,3370,3373,3375,3377,3380],{"class":588,"line":580},[586,3371,3372],{"class":599},"          :stops",[586,3374,606],{"class":591},[586,3376,609],{"class":591},[586,3378,3379],{"class":612},"[0, 1]",[586,3381,755],{"class":591},[586,3383,3384,3387,3389,3391,3394],{"class":588,"line":581},[586,3385,3386],{"class":599},"          :colors",[586,3388,606],{"class":591},[586,3390,609],{"class":591},[586,3392,3393],{"class":612},"['#ff0000', '#0000ff']",[586,3395,755],{"class":591},[586,3397,3398],{"class":588,"line":794},[586,3399,3400],{"class":591},"        />\n",[586,3402,3403,3405,3407],{"class":588,"line":804},[586,3404,1823],{"class":591},[586,3406,3358],{"class":595},[586,3408,618],{"class":591},[586,3410,3411,3413,3415],{"class":588,"line":814},[586,3412,797],{"class":591},[586,3414,1762],{"class":595},[586,3416,618],{"class":591},[586,3418,3419,3421,3423],{"class":588,"line":1864},[586,3420,807],{"class":591},[586,3422,717],{"class":595},[586,3424,618],{"class":591},[586,3426,3427,3429,3431],{"class":588,"line":1885},[586,3428,689],{"class":591},[586,3430,706],{"class":595},[586,3432,618],{"class":591},[568,3434,944],{"id":943},[946,3436,3437,3447],{},[949,3438,3439],{},[952,3440,3441,3443,3445],{},[955,3442,1911],{"align":957},[955,3444,961],{"align":957},[955,3446,964],{},[966,3448,3449,3478,3493,3508,3522,3536,3554,3568],{},[952,3450,3451,3456,3476],{},[971,3452,3453],{"align":957},[542,3454,3455],{},"stops",[971,3457,3458,3459,3462,3463,3465,3466,3468,3469,3472,3473,832],{"align":957},"A ",[542,3460,3461],{},"number[]"," of values between ",[542,3464,1137],{}," and ",[542,3467,1803],{}," representing the color positions in the gradient. ",[542,3470,3471],{},"stops.length"," should match ",[542,3474,3475],{},"color.length",[971,3477],{},[952,3479,3480,3485,3491],{},[971,3481,3482],{"align":957},[542,3483,3484],{},"colors",[971,3486,3458,3487,3490],{"align":957},[542,3488,3489],{},"THREE.ColorRepresentation[]"," representing the colors in the gradient.",[971,3492],{},[952,3494,3495,3500,3503],{},[971,3496,3497],{"align":957},[542,3498,3499],{},"attach",[971,3501,3502],{"align":957},"Where the component should be attached within its parent.",[971,3504,3505],{},[542,3506,3507],{},"'map'",[952,3509,3510,3514,3517],{},[971,3511,3512],{"align":957},[542,3513,2755],{},[971,3515,3516],{"align":957},"Height of the canvas used to draw the gradient.",[971,3518,3519],{},[542,3520,3521],{},"1024",[952,3523,3524,3528,3531],{},[971,3525,3526],{"align":957},[542,3527,2738],{},[971,3529,3530],{"align":957},"Width of the canvas used to draw the gradient.",[971,3532,3533],{},[542,3534,3535],{},"16",[952,3537,3538,3543,3549],{},[971,3539,3540],{"align":957},[542,3541,3542],{},"type",[971,3544,3545,3548],{"align":957},[542,3546,3547],{},"'linear' | 'radial'"," Type of gradient to draw.",[971,3550,3551],{},[542,3552,3553],{},"'linear'",[952,3555,3556,3561,3564],{},[971,3557,3558],{"align":957},[542,3559,3560],{},"innerCircleRadius",[971,3562,3563],{"align":957},"Radius of the inner circle of a radial gradient.",[971,3565,3566],{},[542,3567,1137],{},[952,3569,3570,3575,3578],{},[971,3571,3572],{"align":957},[542,3573,3574],{},"outerCircleRadius",[971,3576,3577],{"align":957},"Radius of the outer circle of a radial gradient.",[971,3579,3580],{},[542,3581,3582],{},"'auto'",[1558,3584,2009],{},{"title":512,"searchDepth":513,"depth":514,"links":3586},[3587,3588],{"id":570,"depth":514,"text":15},{"id":943,"depth":514,"text":944},"Create gradient textures for materials.",{},{"title":437,"description":3589},"NUI7_e9BLX8HMymE1TjQDQS-QQXxuK5bdda9GdveJPw",{"id":3594,"title":441,"body":3595,"description":9267,"extension":517,"links":518,"meta":9268,"navigation":520,"path":442,"seo":9269,"stem":443,"__hash__":9270},"docs/2.api/9.objects/html.md",{"type":501,"value":3596,"toc":9246},[3597,3600,3614,3619,3621,4036,4040,4047,4052,4068,4076,4081,4225,4231,4235,4259,4264,4394,4398,4422,4425,4449,4467,4488,4493,4658,4662,4667,4691,4703,4708,6419,6423,6448,6469,6510,6514,6530,6544,6585,6592,6616,6636,6641,8123,8129,8135,8140,8342,8359,8361,8725,8727,8747,8751,8834,8838,9017,9222,9225,9243],[504,3598,3599],{},"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.",[504,3601,3602,3603,3465,3606,3609,3610,3613],{},"🚀 Works seamlessly with both ",[2734,3604,3605],{},"PerspectiveCamera",[2734,3607,3608],{},"OrthographicCamera"," — the active camera is automatically detected by the ",[542,3611,3612],{},"\u003CHtml>"," component.",[2023,3615,3616],{},[3617,3618],"objects-html",{},[568,3620,15],{"id":570},[572,3622,3625],{"className":574,"code":3623,"highlights":3624,"language":582,"meta":512,"style":512},"\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",[514,580,581,794,804,814,1864],[542,3626,3627,3647,3671,3689,3697,3701,3709,3729,3748,3756,3774,3782,3790,3798,3804,3810,3825,3840,3855,3860,3889,3898,3906,3914,3922,3930,3938,3949,3957,3974,3988,4000,4012,4024,4028],{"__ignoreMap":512},[586,3628,3629,3631,3633,3635,3637,3639,3641,3643,3645],{"class":588,"line":513},[586,3630,592],{"class":591},[586,3632,596],{"class":595},[586,3634,600],{"class":599},[586,3636,603],{"class":599},[586,3638,606],{"class":591},[586,3640,609],{"class":591},[586,3642,613],{"class":612},[586,3644,609],{"class":591},[586,3646,618],{"class":591},[586,3648,3650,3652,3654,3657,3659,3661,3663,3665,3667,3669],{"class":3649,"line":514},[588,622],[586,3651,626],{"class":625},[586,3653,629],{"class":591},[586,3655,3656],{"class":632}," Html",[586,3658,1646],{"class":591},[586,3660,1649],{"class":632},[586,3662,636],{"class":591},[586,3664,639],{"class":625},[586,3666,642],{"class":591},[586,3668,645],{"class":612},[586,3670,648],{"class":591},[586,3672,3673,3675,3677,3679,3681,3683,3685,3687],{"class":588,"line":651},[586,3674,626],{"class":625},[586,3676,629],{"class":591},[586,3678,2125],{"class":632},[586,3680,636],{"class":591},[586,3682,639],{"class":625},[586,3684,642],{"class":591},[586,3686,2114],{"class":612},[586,3688,648],{"class":591},[586,3690,3691,3693,3695],{"class":588,"line":657},[586,3692,689],{"class":591},[586,3694,596],{"class":595},[586,3696,618],{"class":591},[586,3698,3699],{"class":588,"line":686},[586,3700,654],{"emptyLinePlaceholder":520},[586,3702,3703,3705,3707],{"class":588,"line":696},[586,3704,592],{"class":591},[586,3706,706],{"class":595},[586,3708,618],{"class":591},[586,3710,3711,3713,3715,3718,3720,3722,3725,3727],{"class":588,"line":701},[586,3712,714],{"class":591},[586,3714,717],{"class":595},[586,3716,3717],{"class":599}," clear-color",[586,3719,606],{"class":591},[586,3721,609],{"class":591},[586,3723,3724],{"class":612},"#82DBC5",[586,3726,609],{"class":591},[586,3728,618],{"class":591},[586,3730,3731,3733,3735,3737,3739,3741,3744,3746],{"class":588,"line":711},[586,3732,725],{"class":591},[586,3734,1694],{"class":595},[586,3736,1697],{"class":599},[586,3738,606],{"class":591},[586,3740,609],{"class":591},[586,3742,3743],{"class":612},"[2, 2, 5]",[586,3745,609],{"class":591},[586,3747,1709],{"class":591},[586,3749,3750,3752,3754],{"class":588,"line":722},[586,3751,725],{"class":591},[586,3753,1716],{"class":595},[586,3755,1709],{"class":591},[586,3757,3758,3760,3762,3764,3766,3768,3770,3772],{"class":588,"line":577},[586,3759,725],{"class":591},[586,3761,1762],{"class":595},[586,3763,1697],{"class":599},[586,3765,606],{"class":591},[586,3767,609],{"class":591},[586,3769,2546],{"class":612},[586,3771,609],{"class":591},[586,3773,618],{"class":591},[586,3775,3776,3778,3780],{"class":588,"line":578},[586,3777,736],{"class":591},[586,3779,2537],{"class":595},[586,3781,1709],{"class":591},[586,3783,3784,3786,3788],{"class":588,"line":579},[586,3785,736],{"class":591},[586,3787,2683],{"class":595},[586,3789,1709],{"class":591},[586,3791,3793,3795],{"class":3792,"line":580},[588,622],[586,3794,736],{"class":591},[586,3796,3797],{"class":595},"Html\n",[586,3799,3801],{"class":3800,"line":581},[588,622],[586,3802,3803],{"class":599},"        center\n",[586,3805,3807],{"class":3806,"line":794},[588,622],[586,3808,3809],{"class":599},"        transform\n",[586,3811,3813,3816,3818,3820,3823],{"class":3812,"line":804},[588,622],[586,3814,3815],{"class":599},"        :distance-factor",[586,3817,606],{"class":591},[586,3819,609],{"class":591},[586,3821,3822],{"class":612},"4",[586,3824,755],{"class":591},[586,3826,3828,3831,3833,3835,3838],{"class":3827,"line":814},[588,622],[586,3829,3830],{"class":599},"        :position",[586,3832,606],{"class":591},[586,3834,609],{"class":591},[586,3836,3837],{"class":612},"[0, 0, 0.65]",[586,3839,755],{"class":591},[586,3841,3843,3846,3848,3850,3853],{"class":3842,"line":1864},[588,622],[586,3844,3845],{"class":599},"        :scale",[586,3847,606],{"class":591},[586,3849,609],{"class":591},[586,3851,3852],{"class":612},"[0.75, 0.75, 0.75]",[586,3854,755],{"class":591},[586,3856,3857],{"class":588,"line":1885},[586,3858,3859],{"class":591},"      >\n",[586,3861,3862,3864,3867,3869,3871,3873,3876,3878,3880,3883,3885,3887],{"class":588,"line":1894},[586,3863,1769],{"class":591},[586,3865,3866],{"class":595},"h1",[586,3868,2811],{"class":599},[586,3870,606],{"class":591},[586,3872,609],{"class":591},[586,3874,3875],{"class":612},"title",[586,3877,609],{"class":591},[586,3879,2183],{"class":591},[586,3881,3882],{"class":632},"I'm a Box 📦",[586,3884,689],{"class":591},[586,3886,3866],{"class":595},[586,3888,618],{"class":591},[586,3890,3891,3893,3896],{"class":588,"line":2439},[586,3892,1823],{"class":591},[586,3894,3895],{"class":595},"Html",[586,3897,618],{"class":591},[586,3899,3900,3902,3904],{"class":588,"line":2444},[586,3901,797],{"class":591},[586,3903,1762],{"class":595},[586,3905,618],{"class":591},[586,3907,3908,3910,3912],{"class":588,"line":2044},[586,3909,725],{"class":591},[586,3911,2449],{"class":595},[586,3913,1709],{"class":591},[586,3915,3916,3918,3920],{"class":588,"line":2045},[586,3917,725],{"class":591},[586,3919,1847],{"class":595},[586,3921,1709],{"class":591},[586,3923,3924,3926,3928],{"class":588,"line":2046},[586,3925,807],{"class":591},[586,3927,717],{"class":595},[586,3929,618],{"class":591},[586,3931,3932,3934,3936],{"class":588,"line":2047},[586,3933,689],{"class":591},[586,3935,706],{"class":595},[586,3937,618],{"class":591},[586,3939,3940,3942,3944,3947],{"class":588,"line":2517},[586,3941,592],{"class":591},[586,3943,1558],{"class":595},[586,3945,3946],{"class":599}," scoped",[586,3948,618],{"class":591},[586,3950,3951,3953,3955],{"class":588,"line":2523},[586,3952,832],{"class":591},[586,3954,3875],{"class":2174},[586,3956,2264],{"class":591},[586,3958,3959,3963,3965,3968,3971],{"class":588,"line":2532},[586,3960,3962],{"class":3961},"sqsOY","  background-color",[586,3964,2255],{"class":591},[586,3966,3967],{"class":591}," #",[586,3969,3970],{"class":632},"1e1e1e",[586,3972,3973],{"class":591},";\n",[586,3975,3976,3979,3981,3983,3986],{"class":588,"line":2553},[586,3977,3978],{"class":3961},"  color",[586,3980,2255],{"class":591},[586,3982,3967],{"class":591},[586,3984,3985],{"class":632},"ffffff",[586,3987,3973],{"class":591},[586,3989,3990,3993,3995,3998],{"class":588,"line":2558},[586,3991,3992],{"class":3961},"  font-size",[586,3994,2255],{"class":591},[586,3996,3997],{"class":2325}," 0.75rem",[586,3999,3973],{"class":591},[586,4001,4002,4005,4007,4010],{"class":588,"line":2566},[586,4003,4004],{"class":3961},"  padding",[586,4006,2255],{"class":591},[586,4008,4009],{"class":2325}," 0.25rem",[586,4011,3973],{"class":591},[586,4013,4014,4017,4019,4022],{"class":588,"line":2581},[586,4015,4016],{"class":3961},"  border-radius",[586,4018,2255],{"class":591},[586,4020,4021],{"class":2325}," 0.375rem",[586,4023,3973],{"class":591},[586,4025,4026],{"class":588,"line":2596},[586,4027,2357],{"class":591},[586,4029,4030,4032,4034],{"class":588,"line":2601},[586,4031,689],{"class":591},[586,4033,1558],{"class":595},[586,4035,618],{"class":591},[568,4037,4039],{"id":4038},"occlusion","Occlusion",[504,4041,4042,4043,4046],{},"By default, the HTML content will be visible through other objects in the scene. You can use the ",[542,4044,4045],{},"occlude"," prop to make the HTML content occlude other objects in the scene.",[504,4048,4049,4050,1422],{},"Html can be hidden behind one or more objects in your scene using the ",[542,4051,4045],{},[572,4053,4055],{"className":574,"code":4054,"language":582,"meta":512,"style":512},"\u003CHtml occlude>\n",[542,4056,4057],{"__ignoreMap":512},[586,4058,4059,4061,4063,4066],{"class":588,"line":513},[586,4060,592],{"class":591},[586,4062,3895],{"class":595},[586,4064,4065],{"class":599}," occlude",[586,4067,618],{"class":591},[504,4069,996,4070,4072,4073,4075],{},[542,4071,4045],{},", then ",[542,4074,3612],{}," will be hidden by any objects that pass in front of its position.",[2023,4077,4078],{},[4079,4080],"objects-html-occlusion",{},[4082,4083,4084,4085,4089],"details",{},"\n  ",[4086,4087,4088],"summary",{},"Demo code",[572,4090,4094],{"className":4091,"code":4092,"language":4093,"meta":512,"style":512},"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",[542,4095,4096,4115,4123,4131,4181,4209,4217],{"__ignoreMap":512},[586,4097,4098,4100,4102,4104,4106,4108,4111,4113],{"class":588,"line":513},[586,4099,592],{"class":591},[586,4101,1762],{"class":595},[586,4103,1697],{"class":599},[586,4105,606],{"class":591},[586,4107,609],{"class":591},[586,4109,4110],{"class":612},"[0, 1, -2]",[586,4112,609],{"class":591},[586,4114,618],{"class":591},[586,4116,4117,4119,4121],{"class":588,"line":514},[586,4118,714],{"class":591},[586,4120,2537],{"class":595},[586,4122,1709],{"class":591},[586,4124,4125,4127,4129],{"class":588,"line":651},[586,4126,714],{"class":591},[586,4128,2683],{"class":595},[586,4130,1709],{"class":591},[586,4132,4133,4135,4137,4140,4143,4145,4148,4150,4152,4154,4156,4158,4160,4162,4165,4167,4170,4172,4174,4177,4179],{"class":588,"line":657},[586,4134,714],{"class":591},[586,4136,4093],{"class":595},[586,4138,4139],{"class":599}," center",[586,4141,4142],{"class":599}," transform",[586,4144,4065],{"class":599},[586,4146,4147],{"class":599}," :distance-factor",[586,4149,606],{"class":591},[586,4151,609],{"class":591},[586,4153,3822],{"class":612},[586,4155,609],{"class":591},[586,4157,1697],{"class":599},[586,4159,606],{"class":591},[586,4161,609],{"class":591},[586,4163,4164],{"class":612},"[0, 0, 2]",[586,4166,609],{"class":591},[586,4168,4169],{"class":599}," :z-index-range",[586,4171,606],{"class":591},[586,4173,609],{"class":591},[586,4175,4176],{"class":612},"[28, 0]",[586,4178,609],{"class":591},[586,4180,618],{"class":591},[586,4182,4183,4185,4187,4189,4191,4193,4196,4198,4200,4203,4205,4207],{"class":588,"line":686},[586,4184,725],{"class":591},[586,4186,3866],{"class":595},[586,4188,2811],{"class":599},[586,4190,606],{"class":591},[586,4192,609],{"class":591},[586,4194,4195],{"class":612},"bg-white dark:bg-dark text-xs p-1 rounded",[586,4197,609],{"class":591},[586,4199,2183],{"class":591},[586,4201,4202],{"class":632},"Move camera",[586,4204,689],{"class":591},[586,4206,3866],{"class":595},[586,4208,618],{"class":591},[586,4210,4211,4213,4215],{"class":588,"line":696},[586,4212,807],{"class":591},[586,4214,4093],{"class":595},[586,4216,618],{"class":591},[586,4218,4219,4221,4223],{"class":588,"line":701},[586,4220,689],{"class":591},[586,4222,1762],{"class":595},[586,4224,618],{"class":591},[504,4226,4227,4228,4230],{},"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 ",[542,4229,4045],{}," prop:",[910,4232,4234],{"id":4233},"single-occluder","Single occluder",[572,4236,4238],{"className":574,"code":4237,"language":582,"meta":512,"style":512},"\u003CHtml occlude=\"[mesh]\">\n",[542,4239,4240],{"__ignoreMap":512},[586,4241,4242,4244,4246,4248,4250,4252,4255,4257],{"class":588,"line":513},[586,4243,592],{"class":591},[586,4245,3895],{"class":595},[586,4247,4065],{"class":599},[586,4249,606],{"class":591},[586,4251,609],{"class":591},[586,4253,4254],{"class":612},"[mesh]",[586,4256,609],{"class":591},[586,4258,618],{"class":591},[2023,4260,4261],{},[4262,4263],"objects-html-single-occluder",{},[4082,4265,4084,4266,4268],{},[4086,4267,4088],{},[572,4269,4271],{"className":4091,"code":4270,"language":4093,"meta":512,"style":512},"\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",[542,4272,4273,4292,4300,4308,4352,4378,4386],{"__ignoreMap":512},[586,4274,4275,4277,4279,4281,4283,4285,4288,4290],{"class":588,"line":513},[586,4276,592],{"class":591},[586,4278,1762],{"class":595},[586,4280,1697],{"class":599},[586,4282,606],{"class":591},[586,4284,609],{"class":591},[586,4286,4287],{"class":612},"[0, 1, 0]",[586,4289,609],{"class":591},[586,4291,618],{"class":591},[586,4293,4294,4296,4298],{"class":588,"line":514},[586,4295,714],{"class":591},[586,4297,2537],{"class":595},[586,4299,1709],{"class":591},[586,4301,4302,4304,4306],{"class":588,"line":651},[586,4303,714],{"class":591},[586,4305,2683],{"class":595},[586,4307,1709],{"class":591},[586,4309,4310,4312,4314,4316,4318,4321,4323,4325,4328,4330,4332,4334,4336,4338,4340,4342,4344,4346,4348,4350],{"class":588,"line":657},[586,4311,714],{"class":591},[586,4313,4093],{"class":595},[586,4315,4139],{"class":599},[586,4317,4142],{"class":599},[586,4319,4320],{"class":599}," :occlude",[586,4322,606],{"class":591},[586,4324,609],{"class":591},[586,4326,4327],{"class":612},"[sphereRef]",[586,4329,609],{"class":591},[586,4331,4147],{"class":599},[586,4333,606],{"class":591},[586,4335,609],{"class":591},[586,4337,3822],{"class":612},[586,4339,609],{"class":591},[586,4341,4169],{"class":599},[586,4343,606],{"class":591},[586,4345,609],{"class":591},[586,4347,4176],{"class":612},[586,4349,609],{"class":591},[586,4351,618],{"class":591},[586,4353,4354,4356,4358,4360,4362,4364,4366,4368,4370,4372,4374,4376],{"class":588,"line":686},[586,4355,725],{"class":591},[586,4357,3866],{"class":595},[586,4359,2811],{"class":599},[586,4361,606],{"class":591},[586,4363,609],{"class":591},[586,4365,4195],{"class":612},[586,4367,609],{"class":591},[586,4369,2183],{"class":591},[586,4371,4202],{"class":632},[586,4373,689],{"class":591},[586,4375,3866],{"class":595},[586,4377,618],{"class":591},[586,4379,4380,4382,4384],{"class":588,"line":696},[586,4381,807],{"class":591},[586,4383,4093],{"class":595},[586,4385,618],{"class":591},[586,4387,4388,4390,4392],{"class":588,"line":701},[586,4389,689],{"class":591},[586,4391,1762],{"class":595},[586,4393,618],{"class":591},[910,4395,4397],{"id":4396},"multiple-occluders","Multiple occluders",[572,4399,4401],{"className":574,"code":4400,"language":582,"meta":512,"style":512},"\u003CHtml occlude=\"[mesh1, mesh2, mesh3, ...]\" />\n",[542,4402,4403],{"__ignoreMap":512},[586,4404,4405,4407,4409,4411,4413,4415,4418,4420],{"class":588,"line":513},[586,4406,592],{"class":591},[586,4408,3895],{"class":595},[586,4410,4065],{"class":599},[586,4412,606],{"class":591},[586,4414,609],{"class":591},[586,4416,4417],{"class":612},"[mesh1, mesh2, mesh3, ...]",[586,4419,609],{"class":591},[586,4421,1709],{"class":591},[504,4423,4424],{},"OR",[572,4426,4428],{"className":574,"code":4427,"language":582,"meta":512,"style":512},"\u003CHtml occlude=\"meshesArray\" />\n",[542,4429,4430],{"__ignoreMap":512},[586,4431,4432,4434,4436,4438,4440,4442,4445,4447],{"class":588,"line":513},[586,4433,592],{"class":591},[586,4435,3895],{"class":595},[586,4437,4065],{"class":599},[586,4439,606],{"class":591},[586,4441,609],{"class":591},[586,4443,4444],{"class":612},"meshesArray",[586,4446,609],{"class":591},[586,4448,1709],{"class":591},[504,4450,4451,4452,4455,4456,4461,4462,4466],{},"In the demo below, a ",[542,4453,4454],{},"v-for"," loop generates multiple spheres around the cube.\nAll resulting ",[2734,4457,4458],{},[542,4459,4460],{},"Mesh"," instances are collected into an array and passed to the ",[2734,4463,4464],{},[542,4465,4045],{}," prop, allowing each sphere to occlude the HTML content.",[504,4468,4469,4470,4475,4476,4479,4480,3465,4484,4487],{},"This demo also uses the ",[2734,4471,4472],{},[542,4473,4474],{},"on-occlude"," event, which is triggered whenever the occlusion state changes.\nHere, the event updates a ",[2734,4477,4478],{},"reactive value"," to control element styles — for example, toggling between ",[4481,4482,4483],"em",{},"light",[4481,4485,4486],{},"dark"," themes.",[2023,4489,4490],{},[4491,4492],"objects-html-occlude-complex-demo",{},[4082,4494,4084,4495,4497],{},[4086,4496,4088],{},[572,4498,4500],{"className":4091,"code":4499,"language":4093,"meta":512,"style":512},"\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",[542,4501,4502,4520,4528,4536,4543,4557,4571,4584,4597,4611,4616,4642,4650],{"__ignoreMap":512},[586,4503,4504,4506,4508,4510,4512,4514,4516,4518],{"class":588,"line":513},[586,4505,592],{"class":591},[586,4507,1762],{"class":595},[586,4509,1697],{"class":599},[586,4511,606],{"class":591},[586,4513,609],{"class":591},[586,4515,4287],{"class":612},[586,4517,609],{"class":591},[586,4519,618],{"class":591},[586,4521,4522,4524,4526],{"class":588,"line":514},[586,4523,714],{"class":591},[586,4525,2537],{"class":595},[586,4527,1709],{"class":591},[586,4529,4530,4532,4534],{"class":588,"line":651},[586,4531,714],{"class":591},[586,4533,2683],{"class":595},[586,4535,1709],{"class":591},[586,4537,4538,4540],{"class":588,"line":657},[586,4539,714],{"class":591},[586,4541,4542],{"class":595},"html\n",[586,4544,4545,4548,4550,4552,4555],{"class":588,"line":686},[586,4546,4547],{"class":599},"    v-bind",[586,4549,606],{"class":591},[586,4551,609],{"class":591},[586,4553,4554],{"class":612},"htmlProps",[586,4556,755],{"class":591},[586,4558,4559,4562,4564,4566,4569],{"class":588,"line":696},[586,4560,4561],{"class":599},"    :occlude",[586,4563,606],{"class":591},[586,4565,609],{"class":591},[586,4567,4568],{"class":612},"occluderRefs",[586,4570,755],{"class":591},[586,4572,4573,4576,4578,4580,4582],{"class":588,"line":701},[586,4574,4575],{"class":599},"    :distance-factor",[586,4577,606],{"class":591},[586,4579,609],{"class":591},[586,4581,3822],{"class":612},[586,4583,755],{"class":591},[586,4585,4586,4589,4591,4593,4595],{"class":588,"line":711},[586,4587,4588],{"class":599},"    :z-index-range",[586,4590,606],{"class":591},[586,4592,609],{"class":591},[586,4594,4176],{"class":612},[586,4596,755],{"class":591},[586,4598,4599,4602,4604,4606,4609],{"class":588,"line":722},[586,4600,4601],{"class":599},"    @on-occlude",[586,4603,606],{"class":591},[586,4605,609],{"class":591},[586,4607,4608],{"class":612},"(event: boolean) => isOccluded = event",[586,4610,755],{"class":591},[586,4612,4613],{"class":588,"line":577},[586,4614,4615],{"class":591},"  >\n",[586,4617,4618,4620,4622,4624,4626,4628,4630,4632,4634,4636,4638,4640],{"class":588,"line":578},[586,4619,725],{"class":591},[586,4621,3866],{"class":595},[586,4623,2811],{"class":599},[586,4625,606],{"class":591},[586,4627,609],{"class":591},[586,4629,4195],{"class":612},[586,4631,609],{"class":591},[586,4633,2183],{"class":591},[586,4635,4202],{"class":632},[586,4637,689],{"class":591},[586,4639,3866],{"class":595},[586,4641,618],{"class":591},[586,4643,4644,4646,4648],{"class":588,"line":579},[586,4645,807],{"class":591},[586,4647,4093],{"class":595},[586,4649,618],{"class":591},[586,4651,4652,4654,4656],{"class":588,"line":580},[586,4653,689],{"class":591},[586,4655,1762],{"class":595},[586,4657,618],{"class":591},[910,4659,4661],{"id":4660},"blending-occlusion","Blending Occlusion",[504,4663,4664,4666],{},[542,4665,3612],{}," 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.",[572,4668,4670],{"className":574,"code":4669,"language":582,"meta":512,"style":512},"\u003CHtml occlude=\"blending\">\n",[542,4671,4672],{"__ignoreMap":512},[586,4673,4674,4676,4678,4680,4682,4684,4687,4689],{"class":588,"line":513},[586,4675,592],{"class":591},[586,4677,3895],{"class":595},[586,4679,4065],{"class":599},[586,4681,606],{"class":591},[586,4683,609],{"class":591},[586,4685,4686],{"class":612},"blending",[586,4688,609],{"class":591},[586,4690,618],{"class":591},[504,4692,1375,4693,934,4696,4699,4700,832],{},[2734,4694,4695],{},"demo below ⬇️",[4481,4697,4698],{},"(left black example)"," shows a ",[2734,4701,4702],{},"basic usage example",[2023,4704,4705],{},[4706,4707],"objects-html-occlude-blending-demo",{},[4082,4709,4084,4710,4712],{},[4086,4711,4088],{},[572,4713,4760],{"className":574,"code":4714,"highlights":4715,"language":582,"meta":512,"style":512},"\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",[514,2566,2596,2601,2610,2615,2623,2636,4716,4717,4718,4719,4720,4721,4722,4723,4724,4725,4726,4717,4718,4719,4720,4721,4722,4723,4724,4725,4726,4727,4728,4729,4730,4731,4732,4733,4734,4735,4736,4737,4738,4739,4740,4741,4742,4743,4744,4745,4746,4747,4748,4749,4750,4751,4752,4753,4754,4755,4756,4757,4758,4759],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,[542,4761,4762,4782,4810,4828,4846,4871,4875,4886,4901,4912,4923,4934,4938,4942,4959,4963,4975,4980,4995,5020,5024,5028,5042,5066,5070,5074,5088,5117,5145,5149,5154,5158,5189,5193,5215,5231,5244,5256,5268,5275,5283,5287,5295,5315,5335,5354,5363,5368,5376,5391,5406,5421,5436,5450,5465,5470,5501,5535,5544,5554,5564,5569,5576,5581,5586,5600,5614,5628,5633,5653,5665,5683,5692,5701,5706,5713,5718,5723,5736,5750,5765,5778,5783,5803,5841,5850,5859,5864,5871,5886,5891,5896,5909,5923,5938,5944,5957,5962,5988,5997,6002,6009,6014,6019,6032,6046,6059,6064,6084,6108,6129,6138,6147,6152,6160,6175,6189,6204,6218,6233,6239,6244,6249,6270,6289,6298,6307,6316,6321,6332,6342,6354,6365,6378,6391,6405,6410],{"__ignoreMap":512},[586,4763,4764,4766,4768,4770,4772,4774,4776,4778,4780],{"class":588,"line":513},[586,4765,592],{"class":591},[586,4767,596],{"class":595},[586,4769,600],{"class":599},[586,4771,603],{"class":599},[586,4773,606],{"class":591},[586,4775,609],{"class":591},[586,4777,613],{"class":612},[586,4779,609],{"class":591},[586,4781,618],{"class":591},[586,4783,4785,4787,4789,4791,4793,4796,4798,4800,4802,4804,4806,4808],{"class":4784,"line":514},[588,622],[586,4786,626],{"class":625},[586,4788,629],{"class":591},[586,4790,3656],{"class":632},[586,4792,1646],{"class":591},[586,4794,4795],{"class":632}," Levioso",[586,4797,1646],{"class":591},[586,4799,1649],{"class":632},[586,4801,636],{"class":591},[586,4803,639],{"class":625},[586,4805,642],{"class":591},[586,4807,645],{"class":612},[586,4809,648],{"class":591},[586,4811,4812,4814,4816,4818,4820,4822,4824,4826],{"class":588,"line":651},[586,4813,626],{"class":625},[586,4815,629],{"class":591},[586,4817,2125],{"class":632},[586,4819,636],{"class":591},[586,4821,639],{"class":625},[586,4823,642],{"class":591},[586,4825,2114],{"class":612},[586,4827,648],{"class":591},[586,4829,4830,4832,4834,4836,4838,4840,4842,4844],{"class":588,"line":657},[586,4831,626],{"class":625},[586,4833,629],{"class":591},[586,4835,2144],{"class":632},[586,4837,636],{"class":591},[586,4839,639],{"class":625},[586,4841,642],{"class":591},[586,4843,582],{"class":612},[586,4845,648],{"class":591},[586,4847,4848,4850,4852,4855,4857,4860,4862,4864,4866,4869],{"class":588,"line":686},[586,4849,626],{"class":625},[586,4851,629],{"class":591},[586,4853,4854],{"class":632}," CircleGeometry",[586,4856,1646],{"class":591},[586,4858,4859],{"class":632}," MeshStandardMaterial",[586,4861,636],{"class":591},[586,4863,639],{"class":625},[586,4865,642],{"class":591},[586,4867,4868],{"class":612},"three",[586,4870,648],{"class":591},[586,4872,4873],{"class":588,"line":696},[586,4874,654],{"emptyLinePlaceholder":520},[586,4876,4877,4879,4882,4884],{"class":588,"line":701},[586,4878,660],{"class":599},[586,4880,4881],{"class":632}," gl ",[586,4883,606],{"class":591},[586,4885,2264],{"class":591},[586,4887,4888,4891,4893,4895,4897,4899],{"class":588,"line":711},[586,4889,4890],{"class":595},"  clearColor",[586,4892,2255],{"class":591},[586,4894,642],{"class":591},[586,4896,3724],{"class":612},[586,4898,675],{"class":591},[586,4900,2938],{"class":591},[586,4902,4903,4906,4908,4910],{"class":588,"line":722},[586,4904,4905],{"class":595},"  clearAlpha",[586,4907,2255],{"class":591},[586,4909,2984],{"class":2325},[586,4911,2938],{"class":591},[586,4913,4914,4917,4919,4921],{"class":588,"line":577},[586,4915,4916],{"class":595},"  shadows",[586,4918,2255],{"class":591},[586,4920,2935],{"class":2934},[586,4922,2938],{"class":591},[586,4924,4925,4928,4930,4932],{"class":588,"line":578},[586,4926,4927],{"class":595},"  alpha",[586,4929,2255],{"class":591},[586,4931,2935],{"class":2934},[586,4933,2938],{"class":591},[586,4935,4936],{"class":588,"line":579},[586,4937,2357],{"class":591},[586,4939,4940],{"class":588,"line":580},[586,4941,654],{"emptyLinePlaceholder":520},[586,4943,4944,4946,4949,4951,4953,4955,4957],{"class":588,"line":581},[586,4945,660],{"class":599},[586,4947,4948],{"class":632}," targetDirectionLightRef ",[586,4950,606],{"class":591},[586,4952,2144],{"class":668},[586,4954,672],{"class":632},[586,4956,2196],{"class":591},[586,4958,683],{"class":632},[586,4960,4961],{"class":588,"line":794},[586,4962,654],{"emptyLinePlaceholder":520},[586,4964,4965,4967,4970,4972],{"class":588,"line":804},[586,4966,660],{"class":599},[586,4968,4969],{"class":632}," geometries ",[586,4971,606],{"class":591},[586,4973,4974],{"class":632}," [\n",[586,4976,4977],{"class":588,"line":814},[586,4978,4979],{"class":591},"  {\n",[586,4981,4982,4985,4987,4989,4991,4993],{"class":588,"line":1864},[586,4983,4984],{"class":595},"    component",[586,4986,2255],{"class":591},[586,4988,642],{"class":591},[586,4990,2537],{"class":612},[586,4992,675],{"class":591},[586,4994,2938],{"class":591},[586,4996,4997,5000,5002,5005,5007,5009,5011,5013,5015,5018],{"class":588,"line":1885},[586,4998,4999],{"class":595},"    args",[586,5001,2255],{"class":591},[586,5003,5004],{"class":632}," [",[586,5006,1803],{"class":2325},[586,5008,1646],{"class":591},[586,5010,2984],{"class":2325},[586,5012,1646],{"class":591},[586,5014,2984],{"class":2325},[586,5016,5017],{"class":632},"]",[586,5019,2938],{"class":591},[586,5021,5022],{"class":588,"line":1894},[586,5023,2992],{"class":591},[586,5025,5026],{"class":588,"line":2439},[586,5027,4979],{"class":591},[586,5029,5030,5032,5034,5036,5038,5040],{"class":588,"line":2444},[586,5031,4984],{"class":595},[586,5033,2255],{"class":591},[586,5035,642],{"class":591},[586,5037,1772],{"class":612},[586,5039,675],{"class":591},[586,5041,2938],{"class":591},[586,5043,5044,5046,5048,5050,5053,5055,5058,5060,5062,5064],{"class":588,"line":2044},[586,5045,4999],{"class":595},[586,5047,2255],{"class":591},[586,5049,5004],{"class":632},[586,5051,5052],{"class":2325},"0.7",[586,5054,1646],{"class":591},[586,5056,5057],{"class":2325}," 32",[586,5059,1646],{"class":591},[586,5061,5057],{"class":2325},[586,5063,5017],{"class":632},[586,5065,2938],{"class":591},[586,5067,5068],{"class":588,"line":2045},[586,5069,2992],{"class":591},[586,5071,5072],{"class":588,"line":2046},[586,5073,4979],{"class":591},[586,5075,5076,5078,5080,5082,5084,5086],{"class":588,"line":2047},[586,5077,4984],{"class":595},[586,5079,2255],{"class":591},[586,5081,642],{"class":591},[586,5083,2662],{"class":612},[586,5085,675],{"class":591},[586,5087,2938],{"class":591},[586,5089,5090,5092,5094,5096,5098,5100,5103,5105,5108,5110,5113,5115],{"class":588,"line":2517},[586,5091,4999],{"class":595},[586,5093,2255],{"class":591},[586,5095,5004],{"class":632},[586,5097,1857],{"class":2325},[586,5099,1646],{"class":591},[586,5101,5102],{"class":2325}," 0.2",[586,5104,1646],{"class":591},[586,5106,5107],{"class":2325}," 16",[586,5109,1646],{"class":591},[586,5111,5112],{"class":2325}," 100",[586,5114,5017],{"class":632},[586,5116,2938],{"class":591},[586,5118,5119,5122,5124,5126,5129,5131,5133,5135,5138,5140,5142],{"class":588,"line":2523},[586,5120,5121],{"class":595},"    bind",[586,5123,2255],{"class":591},[586,5125,629],{"class":591},[586,5127,5128],{"class":595}," castShadow",[586,5130,2255],{"class":591},[586,5132,2935],{"class":2934},[586,5134,1646],{"class":591},[586,5136,5137],{"class":595}," receiveShadow",[586,5139,2255],{"class":591},[586,5141,2935],{"class":2934},[586,5143,5144],{"class":591}," },\n",[586,5146,5147],{"class":588,"line":2532},[586,5148,2992],{"class":591},[586,5150,5151],{"class":588,"line":2553},[586,5152,5153],{"class":632},"]\n",[586,5155,5156],{"class":588,"line":2558},[586,5157,654],{"emptyLinePlaceholder":520},[586,5159,5161,5163,5166,5168,5170,5172,5175,5177,5179,5182,5184,5186],{"class":5160,"line":2566},[588,622],[586,5162,660],{"class":599},[586,5164,5165],{"class":632}," customGeometry ",[586,5167,606],{"class":591},[586,5169,2144],{"class":668},[586,5171,672],{"class":632},[586,5173,5174],{"class":591},"new",[586,5176,4854],{"class":668},[586,5178,672],{"class":632},[586,5180,5181],{"class":2325},"1.25",[586,5183,1646],{"class":591},[586,5185,5057],{"class":2325},[586,5187,5188],{"class":632},"))\n",[586,5190,5191],{"class":588,"line":2581},[586,5192,654],{"emptyLinePlaceholder":520},[586,5194,5196,5198,5201,5203,5205,5207,5209,5211,5213],{"class":5195,"line":2596},[588,622],[586,5197,660],{"class":599},[586,5199,5200],{"class":632}," customMaterial ",[586,5202,606],{"class":591},[586,5204,2144],{"class":668},[586,5206,672],{"class":632},[586,5208,5174],{"class":591},[586,5210,4859],{"class":668},[586,5212,672],{"class":632},[586,5214,2923],{"class":591},[586,5216,5218,5220,5222,5224,5227,5229],{"class":5217,"line":2601},[588,622],[586,5219,3978],{"class":595},[586,5221,2255],{"class":591},[586,5223,642],{"class":591},[586,5225,5226],{"class":612},"red",[586,5228,675],{"class":591},[586,5230,2938],{"class":591},[586,5232,5234,5237,5239,5242],{"class":5233,"line":2610},[588,622],[586,5235,5236],{"class":595},"  side",[586,5238,2255],{"class":591},[586,5240,5241],{"class":2325}," 2",[586,5243,2938],{"class":591},[586,5245,5247,5250,5252,5254],{"class":5246,"line":2615},[588,622],[586,5248,5249],{"class":595},"  opacity",[586,5251,2255],{"class":591},[586,5253,2984],{"class":2325},[586,5255,2938],{"class":591},[586,5257,5259,5262,5264,5266],{"class":5258,"line":2623},[588,622],[586,5260,5261],{"class":595},"  transparent",[586,5263,2255],{"class":591},[586,5265,2935],{"class":2934},[586,5267,2938],{"class":591},[586,5269,5271,5273],{"class":5270,"line":2636},[588,622],[586,5272,2998],{"class":591},[586,5274,5188],{"class":632},[586,5276,5277,5279,5281],{"class":588,"line":2651},[586,5278,689],{"class":591},[586,5280,596],{"class":595},[586,5282,618],{"class":591},[586,5284,5285],{"class":588,"line":2657},[586,5286,654],{"emptyLinePlaceholder":520},[586,5288,5289,5291,5293],{"class":588,"line":2678},[586,5290,592],{"class":591},[586,5292,706],{"class":595},[586,5294,618],{"class":591},[586,5296,5297,5299,5302,5304,5306,5308,5311,5313],{"class":588,"line":2688},[586,5298,714],{"class":591},[586,5300,5301],{"class":595},"div",[586,5303,2811],{"class":599},[586,5305,606],{"class":591},[586,5307,609],{"class":591},[586,5309,5310],{"class":612},"html-demo-wrapper aspect-video",[586,5312,609],{"class":591},[586,5314,618],{"class":591},[586,5316,5317,5319,5321,5324,5326,5328,5331,5333],{"class":588,"line":2697},[586,5318,725],{"class":591},[586,5320,717],{"class":595},[586,5322,5323],{"class":599}," v-bind",[586,5325,606],{"class":591},[586,5327,609],{"class":591},[586,5329,5330],{"class":612},"gl",[586,5332,609],{"class":591},[586,5334,618],{"class":591},[586,5336,5337,5339,5341,5343,5345,5347,5350,5352],{"class":588,"line":2706},[586,5338,736],{"class":591},[586,5340,1694],{"class":595},[586,5342,1697],{"class":599},[586,5344,606],{"class":591},[586,5346,609],{"class":591},[586,5348,5349],{"class":612},"[0, 1.5, 7.5]",[586,5351,609],{"class":591},[586,5353,1709],{"class":591},[586,5355,5357,5359,5361],{"class":588,"line":5356},46,[586,5358,736],{"class":591},[586,5360,1716],{"class":595},[586,5362,1709],{"class":591},[586,5364,5366],{"class":588,"line":5365},47,[586,5367,654],{"emptyLinePlaceholder":520},[586,5369,5371,5373],{"class":588,"line":5370},48,[586,5372,736],{"class":591},[586,5374,5375],{"class":595},"Levioso\n",[586,5377,5379,5382,5384,5386,5389],{"class":588,"line":5378},49,[586,5380,5381],{"class":599},"        v-for",[586,5383,606],{"class":591},[586,5385,609],{"class":591},[586,5387,5388],{"class":612},"(geometry, index) in geometries",[586,5390,755],{"class":591},[586,5392,5394,5397,5399,5401,5404],{"class":588,"line":5393},50,[586,5395,5396],{"class":599},"        :key",[586,5398,606],{"class":591},[586,5400,609],{"class":591},[586,5402,5403],{"class":612},"`html-occlude-blending-demo-${index}`",[586,5405,755],{"class":591},[586,5407,5409,5412,5414,5416,5419],{"class":588,"line":5408},51,[586,5410,5411],{"class":599},"        :speed",[586,5413,606],{"class":591},[586,5415,609],{"class":591},[586,5417,5418],{"class":612},"3",[586,5420,755],{"class":591},[586,5422,5424,5427,5429,5431,5434],{"class":588,"line":5423},52,[586,5425,5426],{"class":599},"        :float-factor",[586,5428,606],{"class":591},[586,5430,609],{"class":591},[586,5432,5433],{"class":612},"3.5",[586,5435,755],{"class":591},[586,5437,5439,5442,5444,5446,5448],{"class":588,"line":5438},53,[586,5440,5441],{"class":599},"        :rotation-factor",[586,5443,606],{"class":591},[586,5445,609],{"class":591},[586,5447,1803],{"class":612},[586,5449,755],{"class":591},[586,5451,5453,5456,5458,5460,5463],{"class":588,"line":5452},54,[586,5454,5455],{"class":599},"        :range",[586,5457,606],{"class":591},[586,5459,609],{"class":591},[586,5461,5462],{"class":612},"[-0.35, 0.35]",[586,5464,755],{"class":591},[586,5466,5468],{"class":588,"line":5467},55,[586,5469,3859],{"class":591},[586,5471,5473,5475,5477,5479,5481,5483,5486,5488,5490,5492,5494,5497,5499],{"class":588,"line":5472},56,[586,5474,1769],{"class":591},[586,5476,1762],{"class":595},[586,5478,1697],{"class":599},[586,5480,606],{"class":591},[586,5482,609],{"class":591},[586,5484,5485],{"class":612},"[index * 3.5 - 3.5, 1, 0]",[586,5487,609],{"class":591},[586,5489,5323],{"class":599},[586,5491,606],{"class":591},[586,5493,609],{"class":591},[586,5495,5496],{"class":612},"geometry.bind",[586,5498,609],{"class":591},[586,5500,618],{"class":591},[586,5502,5504,5507,5510,5513,5515,5517,5520,5522,5524,5526,5528,5531,5533],{"class":588,"line":5503},57,[586,5505,5506],{"class":591},"          \u003C",[586,5508,5509],{"class":595},"component",[586,5511,5512],{"class":599}," :is",[586,5514,606],{"class":591},[586,5516,609],{"class":591},[586,5518,5519],{"class":612},"geometry.component",[586,5521,609],{"class":591},[586,5523,1775],{"class":599},[586,5525,606],{"class":591},[586,5527,609],{"class":591},[586,5529,5530],{"class":612},"geometry.args",[586,5532,609],{"class":591},[586,5534,1709],{"class":591},[586,5536,5538,5540,5542],{"class":588,"line":5537},58,[586,5539,5506],{"class":591},[586,5541,2683],{"class":595},[586,5543,1709],{"class":591},[586,5545,5547,5550,5552],{"class":588,"line":5546},59,[586,5548,5549],{"class":591},"        \u003C/",[586,5551,1762],{"class":595},[586,5553,618],{"class":591},[586,5555,5557,5559,5562],{"class":588,"line":5556},60,[586,5558,1823],{"class":591},[586,5560,5561],{"class":595},"Levioso",[586,5563,618],{"class":591},[586,5565,5567],{"class":588,"line":5566},61,[586,5568,654],{"emptyLinePlaceholder":520},[586,5570,5572,5574],{"class":5571,"line":4716},[588,622],[586,5573,736],{"class":591},[586,5575,3797],{"class":595},[586,5577,5579],{"class":5578,"line":4717},[588,622],[586,5580,3803],{"class":599},[586,5582,5584],{"class":5583,"line":4718},[588,622],[586,5585,3809],{"class":599},[586,5587,5589,5592,5594,5596,5598],{"class":5588,"line":4719},[588,622],[586,5590,5591],{"class":599},"        occlude",[586,5593,606],{"class":591},[586,5595,609],{"class":591},[586,5597,4686],{"class":612},[586,5599,755],{"class":591},[586,5601,5603,5605,5607,5609,5612],{"class":5602,"line":4720},[588,622],[586,5604,3830],{"class":599},[586,5606,606],{"class":591},[586,5608,609],{"class":591},[586,5610,5611],{"class":612},"[-4, .75, -2]",[586,5613,755],{"class":591},[586,5615,5617,5620,5622,5624,5626],{"class":5616,"line":4721},[588,622],[586,5618,5619],{"class":599},"        :z-index-range",[586,5621,606],{"class":591},[586,5623,609],{"class":591},[586,5625,4176],{"class":612},[586,5627,755],{"class":591},[586,5629,5631],{"class":5630,"line":4722},[588,622],[586,5632,3859],{"class":591},[586,5634,5636,5638,5640,5642,5644,5646,5649,5651],{"class":5635,"line":4723},[588,622],[586,5637,1769],{"class":591},[586,5639,5301],{"class":595},[586,5641,2811],{"class":599},[586,5643,606],{"class":591},[586,5645,609],{"class":591},[586,5647,5648],{"class":612},"text-center text-s p-2 bg-[#1B1C1E] text-light",[586,5650,609],{"class":591},[586,5652,618],{"class":591},[586,5654,5656,5659,5661,5663],{"class":5655,"line":4724},[588,622],[586,5657,5658],{"class":632},"          BASIC 💛 ",[586,5660,592],{"class":591},[586,5662,929],{"class":595},[586,5664,1709],{"class":591},[586,5666,5668,5670,5672,5674,5677,5679,5681],{"class":5667,"line":4725},[588,622],[586,5669,5506],{"class":591},[586,5671,4481],{"class":595},[586,5673,2183],{"class":591},[586,5675,5676],{"class":632},"occlude=blending",[586,5678,689],{"class":591},[586,5680,4481],{"class":595},[586,5682,618],{"class":591},[586,5684,5686,5688,5690],{"class":5685,"line":4726},[588,622],[586,5687,5549],{"class":591},[586,5689,5301],{"class":595},[586,5691,618],{"class":591},[586,5693,5695,5697,5699],{"class":588,"line":5694},73,[586,5696,1823],{"class":591},[586,5698,3895],{"class":595},[586,5700,618],{"class":591},[586,5702,5704],{"class":5703,"line":4727},[588,622],[586,5705,654],{"emptyLinePlaceholder":520},[586,5707,5709,5711],{"class":5708,"line":4728},[588,622],[586,5710,736],{"class":591},[586,5712,3797],{"class":595},[586,5714,5716],{"class":5715,"line":4729},[588,622],[586,5717,3803],{"class":599},[586,5719,5721],{"class":5720,"line":4730},[588,622],[586,5722,3809],{"class":599},[586,5724,5726,5728,5730,5732,5734],{"class":5725,"line":4731},[588,622],[586,5727,5591],{"class":599},[586,5729,606],{"class":591},[586,5731,609],{"class":591},[586,5733,4686],{"class":612},[586,5735,755],{"class":591},[586,5737,5739,5741,5743,5745,5748],{"class":5738,"line":4732},[588,622],[586,5740,3830],{"class":599},[586,5742,606],{"class":591},[586,5744,609],{"class":591},[586,5746,5747],{"class":612},"[0, .85, -2]",[586,5749,755],{"class":591},[586,5751,5753,5756,5758,5760,5763],{"class":5752,"line":4733},[588,622],[586,5754,5755],{"class":599},"        :geometry",[586,5757,606],{"class":591},[586,5759,609],{"class":591},[586,5761,5762],{"class":612},"customGeometry",[586,5764,755],{"class":591},[586,5766,5768,5770,5772,5774,5776],{"class":5767,"line":4734},[588,622],[586,5769,5619],{"class":599},[586,5771,606],{"class":591},[586,5773,609],{"class":591},[586,5775,4176],{"class":612},[586,5777,755],{"class":591},[586,5779,5781],{"class":5780,"line":4735},[588,622],[586,5782,3859],{"class":591},[586,5784,5786,5788,5790,5792,5794,5796,5799,5801],{"class":5785,"line":4736},[588,622],[586,5787,1769],{"class":591},[586,5789,5301],{"class":595},[586,5791,2811],{"class":599},[586,5793,606],{"class":591},[586,5795,609],{"class":591},[586,5797,5798],{"class":612},"text-xs p-8 text-center bg-[#F6B03B] text-dark",[586,5800,609],{"class":591},[586,5802,618],{"class":591},[586,5804,5806,5809,5811,5813,5816,5819,5821,5823,5826,5828,5830,5832,5835,5837,5839],{"class":5805,"line":4737},[588,622],[586,5807,5808],{"class":632},"          CUSTOM ",[586,5810,592],{"class":591},[586,5812,929],{"class":595},[586,5814,5815],{"class":591}," />",[586,5817,5818],{"class":591}," \u003C",[586,5820,2734],{"class":595},[586,5822,2183],{"class":591},[586,5824,5825],{"class":632},"CIRCLE ",[586,5827,592],{"class":591},[586,5829,929],{"class":595},[586,5831,5815],{"class":591},[586,5833,5834],{"class":632}," GEOMETRY",[586,5836,689],{"class":591},[586,5838,2734],{"class":595},[586,5840,618],{"class":591},[586,5842,5844,5846,5848],{"class":588,"line":5843},85,[586,5845,5549],{"class":591},[586,5847,5301],{"class":595},[586,5849,618],{"class":591},[586,5851,5853,5855,5857],{"class":5852,"line":4738},[588,622],[586,5854,1823],{"class":591},[586,5856,3895],{"class":595},[586,5858,618],{"class":591},[586,5860,5862],{"class":5861,"line":4739},[588,622],[586,5863,654],{"emptyLinePlaceholder":520},[586,5865,5867,5869],{"class":5866,"line":4740},[588,622],[586,5868,736],{"class":591},[586,5870,3797],{"class":595},[586,5872,5874,5877,5879,5881,5884],{"class":5873,"line":4741},[588,622],[586,5875,5876],{"class":599},"        ref",[586,5878,606],{"class":591},[586,5880,609],{"class":591},[586,5882,5883],{"class":612},"targetDirectionLightRef",[586,5885,755],{"class":591},[586,5887,5889],{"class":5888,"line":4742},[588,622],[586,5890,3803],{"class":599},[586,5892,5894],{"class":5893,"line":4743},[588,622],[586,5895,3809],{"class":599},[586,5897,5899,5901,5903,5905,5907],{"class":5898,"line":4744},[588,622],[586,5900,5591],{"class":599},[586,5902,606],{"class":591},[586,5904,609],{"class":591},[586,5906,4686],{"class":612},[586,5908,755],{"class":591},[586,5910,5912,5914,5916,5918,5921],{"class":5911,"line":4745},[588,622],[586,5913,3830],{"class":599},[586,5915,606],{"class":591},[586,5917,609],{"class":591},[586,5919,5920],{"class":612},"[4, .5, -2]",[586,5922,755],{"class":591},[586,5924,5926,5929,5931,5933,5936],{"class":5925,"line":4746},[588,622],[586,5927,5928],{"class":599},"        :material",[586,5930,606],{"class":591},[586,5932,609],{"class":591},[586,5934,5935],{"class":612},"customMaterial",[586,5937,755],{"class":591},[586,5939,5941],{"class":5940,"line":4747},[588,622],[586,5942,5943],{"class":599},"        receive-shadow\n",[586,5945,5947,5949,5951,5953,5955],{"class":5946,"line":4748},[588,622],[586,5948,5619],{"class":599},[586,5950,606],{"class":591},[586,5952,609],{"class":591},[586,5954,4176],{"class":612},[586,5956,755],{"class":591},[586,5958,5960],{"class":588,"line":5959},97,[586,5961,3859],{"class":591},[586,5963,5965,5967,5969,5972,5974,5976,5979,5981,5984,5986],{"class":5964,"line":4749},[588,622],[586,5966,1769],{"class":591},[586,5968,5301],{"class":595},[586,5970,5971],{"class":599}," style",[586,5973,606],{"class":591},[586,5975,609],{"class":591},[586,5977,5978],{"class":612},"width: 100px; height: auto; aspect-ratio: 250/250;",[586,5980,609],{"class":591},[586,5982,5983],{"class":591},">\u003C/",[586,5985,5301],{"class":595},[586,5987,618],{"class":591},[586,5989,5991,5993,5995],{"class":5990,"line":4750},[588,622],[586,5992,1823],{"class":591},[586,5994,3895],{"class":595},[586,5996,618],{"class":591},[586,5998,6000],{"class":5999,"line":4751},[588,622],[586,6001,654],{"emptyLinePlaceholder":520},[586,6003,6005,6007],{"class":6004,"line":4752},[588,622],[586,6006,736],{"class":591},[586,6008,3797],{"class":595},[586,6010,6012],{"class":6011,"line":4753},[588,622],[586,6013,3803],{"class":599},[586,6015,6017],{"class":6016,"line":4754},[588,622],[586,6018,3809],{"class":599},[586,6020,6022,6024,6026,6028,6030],{"class":6021,"line":4755},[588,622],[586,6023,5591],{"class":599},[586,6025,606],{"class":591},[586,6027,609],{"class":591},[586,6029,4686],{"class":612},[586,6031,755],{"class":591},[586,6033,6035,6037,6039,6041,6044],{"class":6034,"line":4756},[588,622],[586,6036,3830],{"class":599},[586,6038,606],{"class":591},[586,6040,609],{"class":591},[586,6042,6043],{"class":612},"[4, 2.5, -2]",[586,6045,755],{"class":591},[586,6047,6049,6051,6053,6055,6057],{"class":6048,"line":4757},[588,622],[586,6050,5619],{"class":599},[586,6052,606],{"class":591},[586,6054,609],{"class":591},[586,6056,4176],{"class":612},[586,6058,755],{"class":591},[586,6060,6062],{"class":6061,"line":4758},[588,622],[586,6063,3859],{"class":591},[586,6065,6067,6069,6071,6073,6075,6077,6080,6082],{"class":6066,"line":4759},[588,622],[586,6068,1769],{"class":591},[586,6070,5301],{"class":595},[586,6072,2811],{"class":599},[586,6074,606],{"class":591},[586,6076,609],{"class":591},[586,6078,6079],{"class":612},"text-center text-xs p-2 text-dark bg-[#FF0000]",[586,6081,609],{"class":591},[586,6083,618],{"class":591},[586,6085,6087,6089,6091,6093,6096,6098,6100,6102,6104,6106],{"class":588,"line":6086},109,[586,6088,5506],{"class":591},[586,6090,2734],{"class":595},[586,6092,2183],{"class":591},[586,6094,6095],{"class":632},"HTML + Custom material ",[586,6097,689],{"class":591},[586,6099,2734],{"class":595},[586,6101,2183],{"class":591},[586,6103,5818],{"class":591},[586,6105,929],{"class":595},[586,6107,1709],{"class":591},[586,6109,6111,6113,6115,6117,6120,6122,6124,6126],{"class":588,"line":6110},110,[586,6112,5506],{"class":591},[586,6114,4481],{"class":595},[586,6116,2183],{"class":591},[586,6118,6119],{"class":632},"+ receive-shadow ",[586,6121,689],{"class":591},[586,6123,4481],{"class":595},[586,6125,2183],{"class":591},[586,6127,6128],{"class":632}," ⬇️\n",[586,6130,6132,6134,6136],{"class":588,"line":6131},111,[586,6133,5549],{"class":591},[586,6135,5301],{"class":595},[586,6137,618],{"class":591},[586,6139,6141,6143,6145],{"class":588,"line":6140},112,[586,6142,1823],{"class":591},[586,6144,3895],{"class":595},[586,6146,618],{"class":591},[586,6148,6150],{"class":588,"line":6149},113,[586,6151,654],{"emptyLinePlaceholder":520},[586,6153,6155,6157],{"class":588,"line":6154},114,[586,6156,736],{"class":591},[586,6158,6159],{"class":595},"TresDirectionalLight\n",[586,6161,6163,6166,6168,6170,6173],{"class":588,"line":6162},115,[586,6164,6165],{"class":599},"        v-if",[586,6167,606],{"class":591},[586,6169,609],{"class":591},[586,6171,6172],{"class":612},"targetDirectionLightRef?.instance",[586,6174,755],{"class":591},[586,6176,6178,6181,6183,6185,6187],{"class":588,"line":6177},116,[586,6179,6180],{"class":599},"        :target",[586,6182,606],{"class":591},[586,6184,609],{"class":591},[586,6186,6172],{"class":612},[586,6188,755],{"class":591},[586,6190,6192,6195,6197,6199,6202],{"class":588,"line":6191},117,[586,6193,6194],{"class":599},"        :shadow-normalBias",[586,6196,606],{"class":591},[586,6198,609],{"class":591},[586,6200,6201],{"class":612},"0.075",[586,6203,755],{"class":591},[586,6205,6207,6209,6211,6213,6216],{"class":588,"line":6206},118,[586,6208,3830],{"class":599},[586,6210,606],{"class":591},[586,6212,609],{"class":591},[586,6214,6215],{"class":612},"[5, 0, 5]",[586,6217,755],{"class":591},[586,6219,6221,6224,6226,6228,6231],{"class":588,"line":6220},119,[586,6222,6223],{"class":599},"        :intensity",[586,6225,606],{"class":591},[586,6227,609],{"class":591},[586,6229,6230],{"class":612},"2",[586,6232,755],{"class":591},[586,6234,6236],{"class":588,"line":6235},120,[586,6237,6238],{"class":599},"        cast-shadow\n",[586,6240,6242],{"class":588,"line":6241},121,[586,6243,791],{"class":591},[586,6245,6247],{"class":588,"line":6246},122,[586,6248,654],{"emptyLinePlaceholder":520},[586,6250,6252,6254,6256,6259,6261,6263,6266,6268],{"class":588,"line":6251},123,[586,6253,736],{"class":591},[586,6255,2449],{"class":595},[586,6257,6258],{"class":599}," :position-y",[586,6260,606],{"class":591},[586,6262,609],{"class":591},[586,6264,6265],{"class":612},"-1",[586,6267,609],{"class":591},[586,6269,1709],{"class":591},[586,6271,6273,6275,6277,6279,6281,6283,6285,6287],{"class":588,"line":6272},124,[586,6274,736],{"class":591},[586,6276,1847],{"class":595},[586,6278,1850],{"class":599},[586,6280,606],{"class":591},[586,6282,609],{"class":591},[586,6284,1803],{"class":612},[586,6286,609],{"class":591},[586,6288,1709],{"class":591},[586,6290,6292,6294,6296],{"class":588,"line":6291},125,[586,6293,797],{"class":591},[586,6295,717],{"class":595},[586,6297,618],{"class":591},[586,6299,6301,6303,6305],{"class":588,"line":6300},126,[586,6302,807],{"class":591},[586,6304,5301],{"class":595},[586,6306,618],{"class":591},[586,6308,6310,6312,6314],{"class":588,"line":6309},127,[586,6311,689],{"class":591},[586,6313,706],{"class":595},[586,6315,618],{"class":591},[586,6317,6319],{"class":588,"line":6318},128,[586,6320,654],{"emptyLinePlaceholder":520},[586,6322,6324,6326,6328,6330],{"class":588,"line":6323},129,[586,6325,592],{"class":591},[586,6327,1558],{"class":595},[586,6329,3946],{"class":599},[586,6331,618],{"class":591},[586,6333,6335,6337,6340],{"class":588,"line":6334},130,[586,6336,832],{"class":591},[586,6338,6339],{"class":2174},"html-demo-wrapper",[586,6341,2264],{"class":591},[586,6343,6345,6347,6349,6352],{"class":588,"line":6344},131,[586,6346,2944],{"class":3961},[586,6348,2255],{"class":591},[586,6350,6351],{"class":2325}," 100%",[586,6353,3973],{"class":591},[586,6355,6357,6359,6361,6363],{"class":588,"line":6356},132,[586,6358,2957],{"class":3961},[586,6360,2255],{"class":591},[586,6362,6351],{"class":2325},[586,6364,3973],{"class":591},[586,6366,6368,6371,6373,6376],{"class":588,"line":6367},133,[586,6369,6370],{"class":3961},"  position",[586,6372,2255],{"class":591},[586,6374,6375],{"class":632}," relative",[586,6377,3973],{"class":591},[586,6379,6381,6384,6386,6389],{"class":588,"line":6380},134,[586,6382,6383],{"class":3961},"  overflow",[586,6385,2255],{"class":591},[586,6387,6388],{"class":632}," hidden",[586,6390,3973],{"class":591},[586,6392,6394,6396,6398,6400,6403],{"class":588,"line":6393},135,[586,6395,3962],{"class":3961},[586,6397,2255],{"class":591},[586,6399,3967],{"class":591},[586,6401,6402],{"class":632},"82dbc5",[586,6404,3973],{"class":591},[586,6406,6408],{"class":588,"line":6407},136,[586,6409,2357],{"class":591},[586,6411,6413,6415,6417],{"class":588,"line":6412},137,[586,6414,689],{"class":591},[586,6416,1558],{"class":595},[586,6418,618],{"class":591},[568,6420,6422],{"id":6421},"custom-geometry","Custom Geometry",[504,6424,6425,6426,6429,6430,6433,6434,6437,6438,6441,6442,6447],{},"By default, when using ",[542,6427,6428],{},"occlude=\"blending\"",", occlusion works correctly only with ",[2734,6431,6432],{},"rectangular HTML elements"," (using a ",[542,6435,6436],{},"PlaneGeometry",").\nFor ",[4481,6439,6440],{},"non-rectangular content",", you can use the ",[2734,6443,6444],{},[542,6445,6446],{},"geometry"," prop to provide a matching custom geometry.",[504,6449,6450,6451,934,6454,6457,6458,6465,6466,832],{},"In the ",[2734,6452,6453],{},"demo above ⬆️",[4481,6455,6456],{},"(middle yellow example)",", a ",[547,6459,6462],{"href":6460,"rel":6461},"https://threejs.org/docs/#api/en/geometries/CircleGeometry",[551],[542,6463,6464],{},"CircleGeometry"," is used as a ",[2734,6467,6468],{},"custom geometry",[6470,6471,6472],"prose-list",{},[558,6473,6474,6483],{},[561,6475,1375,6476,6478,6479,6482],{},[542,6477,6446],{}," prop only defines the ",[2734,6480,6481],{},"occlusion shape"," in 3D and does not modify your HTML content.",[561,6484,6485,6486,6493,6494,6497,6498,6501,6502,6509],{},"You can provide any ",[547,6487,6490],{"href":6488,"rel":6489},"https://threejs.org/docs/#api/en/core/BufferGeometry",[551],[542,6491,6492],{},"BufferGeometry",", for example to simulate ",[2734,6495,6496],{},"CSS-like styles"," such as ",[542,6499,6500],{},"border-radius"," using a rounded rectangle or squircle geometry (see ",[547,6503,6506],{"href":6504,"rel":6505},"https://discourse.threejs.org/t/roundedrectangle-squircle/28645",[551],[542,6507,6508],{},"RoundedRectangle / Squircle geometry"," for example).",[910,6511,6513],{"id":6512},"custom-material","Custom Material",[504,6515,6516,6517,6520,6521,934,6523,6457,6526,6529],{},"You can also assign material properties to the HTML content using the ",[542,6518,6519],{},"material"," prop.\nIn the ",[2734,6522,6453],{},[4481,6524,6525],{},"(right red example)",[2734,6527,6528],{},"custom material"," is used with shadow.",[6531,6532,6533],"prose-note",{},[504,6534,1375,6535,6537,6538,6540,6541,832],{},[542,6536,6519],{}," prop is only available when ",[542,6539,6428],{}," is ",[2734,6542,6543],{},"enabled",[6531,6545,6546],{},[504,6547,6548,6549,3465,6554,6559,6560,6563,6564,6566,6567,6570,6571,6576,6577,6582,6583],{},"Enable shadows using the ",[2734,6550,6551],{},[542,6552,6553],{},"castShadow",[2734,6555,6556],{},[542,6557,6558],{},"receiveShadow"," props.\nShadows are supported ",[2734,6561,6562],{},"only"," when using a ",[2734,6565,6528],{},". By default, shadows do ",[2734,6568,6569],{},"not"," work with ",[4481,6572,6573],{},[542,6574,6575],{},"MeshBasicMaterial"," or ",[4481,6578,6579],{},[542,6580,6581],{},"ShaderMaterial",". ",[929,6584],{},[568,6586,6588,6589],{"id":6587},"using-transition","Using ",[542,6590,6591],{},"\u003CTransition>",[504,6593,6594,6595,6601,6602,6604,6605,6608,6609,3465,6612,6615],{},"The native Vue ",[547,6596,6599],{"href":6597,"rel":6598},"https://vuejs.org/guide/built-ins/transition",[551],[542,6600,6591],{}," component works seamlessly with ",[542,6603,3612],{},".\nThis means you can ",[2734,6606,6607],{},"animate"," how your projected HTML content ",[4481,6610,6611],{},"enters",[4481,6613,6614],{},"leaves"," the scene, exactly as you would in a regular Vue application.",[6531,6617,6618],{},[504,6619,6620,6621,6624,6625,6628,6629,6631,6632,6635],{},"All ",[2734,6622,6623],{},"standard interactions"," are supported just like on a regular HTML element — ",[2734,6626,6627],{},"hover effects",", ",[2734,6630,1298],{},", and ",[4481,6633,6634],{},"any kind of DOM interaction"," are fully possible.",[534,6637,6638],{},[6639,6640],"objects-html-transition-demo",{},[4082,6642,4084,6643,6645],{},[4086,6644,4088],{},[572,6646,6649],{"className":574,"code":6647,"highlights":6648,"language":582,"meta":512,"style":512},"\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",[514,5694,4727,4728,4729,4730,4731,4732,4733,4734,4735,4736,4737,5843,4738,4739,4740,4741,4742,4743,4744],[542,6650,6651,6671,6698,6716,6734,6738,6748,6762,6773,6783,6793,6804,6808,6812,6833,6837,6859,6863,6873,6877,6891,6913,6917,6921,6935,6957,6961,6965,6979,7005,7009,7013,7028,7051,7055,7059,7063,7083,7156,7198,7223,7227,7231,7247,7263,7267,7275,7279,7287,7316,7345,7363,7382,7386,7392,7404,7416,7428,7440,7452,7465,7469,7488,7516,7524,7532,7540,7544,7550,7554,7558,7570,7583,7597,7610,7615,7637,7645,7660,7675,7690,7705,7711,7735,7753,7763,7772,7781,7786,7806,7825,7834,7843,7851,7855,7865,7873,7883,7893,7903,7913,7925,7929,7933,7947,7965,7969,7973,7982,7991,8001,8017,8021,8025,8034,8043,8061,8065,8069,8078,8087,8097,8111,8115],{"__ignoreMap":512},[586,6652,6653,6655,6657,6659,6661,6663,6665,6667,6669],{"class":588,"line":513},[586,6654,592],{"class":591},[586,6656,596],{"class":595},[586,6658,600],{"class":599},[586,6660,603],{"class":599},[586,6662,606],{"class":591},[586,6664,609],{"class":591},[586,6666,613],{"class":612},[586,6668,609],{"class":591},[586,6670,618],{"class":591},[586,6672,6674,6676,6678,6680,6682,6684,6686,6688,6690,6692,6694,6696],{"class":6673,"line":514},[588,622],[586,6675,626],{"class":625},[586,6677,629],{"class":591},[586,6679,3656],{"class":632},[586,6681,1646],{"class":591},[586,6683,4795],{"class":632},[586,6685,1646],{"class":591},[586,6687,1649],{"class":632},[586,6689,636],{"class":591},[586,6691,639],{"class":625},[586,6693,642],{"class":591},[586,6695,645],{"class":612},[586,6697,648],{"class":591},[586,6699,6700,6702,6704,6706,6708,6710,6712,6714],{"class":588,"line":651},[586,6701,626],{"class":625},[586,6703,629],{"class":591},[586,6705,2125],{"class":632},[586,6707,636],{"class":591},[586,6709,639],{"class":625},[586,6711,642],{"class":591},[586,6713,2114],{"class":612},[586,6715,648],{"class":591},[586,6717,6718,6720,6722,6724,6726,6728,6730,6732],{"class":588,"line":657},[586,6719,626],{"class":625},[586,6721,629],{"class":591},[586,6723,669],{"class":632},[586,6725,636],{"class":591},[586,6727,639],{"class":625},[586,6729,642],{"class":591},[586,6731,582],{"class":612},[586,6733,648],{"class":591},[586,6735,6736],{"class":588,"line":686},[586,6737,654],{"emptyLinePlaceholder":520},[586,6739,6740,6742,6744,6746],{"class":588,"line":696},[586,6741,660],{"class":599},[586,6743,4881],{"class":632},[586,6745,606],{"class":591},[586,6747,2264],{"class":591},[586,6749,6750,6752,6754,6756,6758,6760],{"class":588,"line":701},[586,6751,4890],{"class":595},[586,6753,2255],{"class":591},[586,6755,642],{"class":591},[586,6757,3724],{"class":612},[586,6759,675],{"class":591},[586,6761,2938],{"class":591},[586,6763,6764,6766,6768,6771],{"class":588,"line":711},[586,6765,4905],{"class":595},[586,6767,2255],{"class":591},[586,6769,6770],{"class":2325}," 0",[586,6772,2938],{"class":591},[586,6774,6775,6777,6779,6781],{"class":588,"line":722},[586,6776,4916],{"class":595},[586,6778,2255],{"class":591},[586,6780,2935],{"class":2934},[586,6782,2938],{"class":591},[586,6784,6785,6787,6789,6791],{"class":588,"line":577},[586,6786,4927],{"class":595},[586,6788,2255],{"class":591},[586,6790,2935],{"class":2934},[586,6792,2938],{"class":591},[586,6794,6795,6798,6800,6802],{"class":588,"line":578},[586,6796,6797],{"class":595},"  antialias",[586,6799,2255],{"class":591},[586,6801,2935],{"class":2934},[586,6803,2938],{"class":591},[586,6805,6806],{"class":588,"line":579},[586,6807,2357],{"class":591},[586,6809,6810],{"class":588,"line":580},[586,6811,654],{"emptyLinePlaceholder":520},[586,6813,6814,6816,6819,6821,6823,6825,6828,6830],{"class":588,"line":581},[586,6815,660],{"class":599},[586,6817,6818],{"class":632}," rootRef ",[586,6820,606],{"class":591},[586,6822,669],{"class":668},[586,6824,592],{"class":591},[586,6826,6827],{"class":2174},"HTMLElement",[586,6829,2183],{"class":591},[586,6831,6832],{"class":632},"()\n",[586,6834,6835],{"class":588,"line":794},[586,6836,654],{"emptyLinePlaceholder":520},[586,6838,6839,6841,6844,6846,6848,6850,6852,6855,6857],{"class":588,"line":804},[586,6840,660],{"class":599},[586,6842,6843],{"class":632}," bgColor ",[586,6845,606],{"class":591},[586,6847,669],{"class":668},[586,6849,672],{"class":632},[586,6851,675],{"class":591},[586,6853,6854],{"class":612},"#F6B03B",[586,6856,675],{"class":591},[586,6858,683],{"class":632},[586,6860,6861],{"class":588,"line":814},[586,6862,654],{"emptyLinePlaceholder":520},[586,6864,6865,6867,6869,6871],{"class":588,"line":1864},[586,6866,660],{"class":599},[586,6868,4969],{"class":632},[586,6870,606],{"class":591},[586,6872,4974],{"class":632},[586,6874,6875],{"class":588,"line":1885},[586,6876,4979],{"class":591},[586,6878,6879,6881,6883,6885,6887,6889],{"class":588,"line":1894},[586,6880,4984],{"class":595},[586,6882,2255],{"class":591},[586,6884,642],{"class":591},[586,6886,2537],{"class":612},[586,6888,675],{"class":591},[586,6890,2938],{"class":591},[586,6892,6893,6895,6897,6899,6901,6903,6905,6907,6909,6911],{"class":588,"line":2439},[586,6894,4999],{"class":595},[586,6896,2255],{"class":591},[586,6898,5004],{"class":632},[586,6900,1803],{"class":2325},[586,6902,1646],{"class":591},[586,6904,2984],{"class":2325},[586,6906,1646],{"class":591},[586,6908,2984],{"class":2325},[586,6910,5017],{"class":632},[586,6912,2938],{"class":591},[586,6914,6915],{"class":588,"line":2444},[586,6916,2992],{"class":591},[586,6918,6919],{"class":588,"line":2044},[586,6920,4979],{"class":591},[586,6922,6923,6925,6927,6929,6931,6933],{"class":588,"line":2045},[586,6924,4984],{"class":595},[586,6926,2255],{"class":591},[586,6928,642],{"class":591},[586,6930,1772],{"class":612},[586,6932,675],{"class":591},[586,6934,2938],{"class":591},[586,6936,6937,6939,6941,6943,6945,6947,6949,6951,6953,6955],{"class":588,"line":2046},[586,6938,4999],{"class":595},[586,6940,2255],{"class":591},[586,6942,5004],{"class":632},[586,6944,5052],{"class":2325},[586,6946,1646],{"class":591},[586,6948,5057],{"class":2325},[586,6950,1646],{"class":591},[586,6952,5057],{"class":2325},[586,6954,5017],{"class":632},[586,6956,2938],{"class":591},[586,6958,6959],{"class":588,"line":2047},[586,6960,2992],{"class":591},[586,6962,6963],{"class":588,"line":2517},[586,6964,4979],{"class":591},[586,6966,6967,6969,6971,6973,6975,6977],{"class":588,"line":2523},[586,6968,4984],{"class":595},[586,6970,2255],{"class":591},[586,6972,642],{"class":591},[586,6974,2662],{"class":612},[586,6976,675],{"class":591},[586,6978,2938],{"class":591},[586,6980,6981,6983,6985,6987,6989,6991,6993,6995,6997,6999,7001,7003],{"class":588,"line":2532},[586,6982,4999],{"class":595},[586,6984,2255],{"class":591},[586,6986,5004],{"class":632},[586,6988,1857],{"class":2325},[586,6990,1646],{"class":591},[586,6992,5102],{"class":2325},[586,6994,1646],{"class":591},[586,6996,5107],{"class":2325},[586,6998,1646],{"class":591},[586,7000,5112],{"class":2325},[586,7002,5017],{"class":632},[586,7004,2938],{"class":591},[586,7006,7007],{"class":588,"line":2553},[586,7008,2992],{"class":591},[586,7010,7011],{"class":588,"line":2558},[586,7012,4979],{"class":591},[586,7014,7015,7017,7019,7021,7024,7026],{"class":588,"line":2566},[586,7016,4984],{"class":595},[586,7018,2255],{"class":591},[586,7020,642],{"class":591},[586,7022,7023],{"class":612},"TresConeGeometry",[586,7025,675],{"class":591},[586,7027,2938],{"class":591},[586,7029,7030,7032,7034,7036,7038,7040,7043,7045,7047,7049],{"class":588,"line":2581},[586,7031,4999],{"class":595},[586,7033,2255],{"class":591},[586,7035,5004],{"class":632},[586,7037,5052],{"class":2325},[586,7039,1646],{"class":591},[586,7041,7042],{"class":2325}," 1.4",[586,7044,1646],{"class":591},[586,7046,5057],{"class":2325},[586,7048,5017],{"class":632},[586,7050,2938],{"class":591},[586,7052,7053],{"class":588,"line":2596},[586,7054,2992],{"class":591},[586,7056,7057],{"class":588,"line":2601},[586,7058,5153],{"class":632},[586,7060,7061],{"class":588,"line":2610},[586,7062,654],{"emptyLinePlaceholder":520},[586,7064,7065,7067,7070,7072,7075,7078,7081],{"class":588,"line":2615},[586,7066,660],{"class":599},[586,7068,7069],{"class":632}," getRandomBackgroundColor ",[586,7071,606],{"class":591},[586,7073,7074],{"class":591}," ():",[586,7076,7077],{"class":2174}," string",[586,7079,7080],{"class":599}," =>",[586,7082,2264],{"class":591},[586,7084,7085,7088,7091,7093,7095,7097,7099,7101,7103,7105,7107,7109,7111,7113,7116,7118,7120,7122,7125,7127,7129,7131,7134,7136,7138,7140,7143,7145,7147,7149,7152,7154],{"class":588,"line":2623},[586,7086,7087],{"class":599},"  const",[586,7089,7090],{"class":632}," colors",[586,7092,2317],{"class":591},[586,7094,5004],{"class":595},[586,7096,675],{"class":591},[586,7098,6854],{"class":612},[586,7100,675],{"class":591},[586,7102,1646],{"class":591},[586,7104,642],{"class":591},[586,7106,3724],{"class":612},[586,7108,675],{"class":591},[586,7110,1646],{"class":591},[586,7112,642],{"class":591},[586,7114,7115],{"class":612},"#FF5733",[586,7117,675],{"class":591},[586,7119,1646],{"class":591},[586,7121,642],{"class":591},[586,7123,7124],{"class":612},"#33FF57",[586,7126,675],{"class":591},[586,7128,1646],{"class":591},[586,7130,642],{"class":591},[586,7132,7133],{"class":612},"#3357FF",[586,7135,675],{"class":591},[586,7137,1646],{"class":591},[586,7139,642],{"class":591},[586,7141,7142],{"class":612},"#F333FF",[586,7144,675],{"class":591},[586,7146,1646],{"class":591},[586,7148,642],{"class":591},[586,7150,7151],{"class":612},"#33FFF5",[586,7153,675],{"class":591},[586,7155,5153],{"class":595},[586,7157,7158,7160,7163,7165,7168,7170,7173,7175,7178,7180,7183,7186,7189,7191,7193,7196],{"class":588,"line":2636},[586,7159,7087],{"class":599},[586,7161,7162],{"class":632}," idx",[586,7164,2317],{"class":591},[586,7166,7167],{"class":632}," Math",[586,7169,832],{"class":591},[586,7171,7172],{"class":668},"floor",[586,7174,672],{"class":595},[586,7176,7177],{"class":632},"Math",[586,7179,832],{"class":591},[586,7181,7182],{"class":668},"random",[586,7184,7185],{"class":595},"() ",[586,7187,7188],{"class":591},"*",[586,7190,7090],{"class":632},[586,7192,832],{"class":591},[586,7194,7195],{"class":632},"length",[586,7197,683],{"class":595},[586,7199,7200,7203,7205,7208,7211,7214,7217,7219,7221],{"class":588,"line":2651},[586,7201,7202],{"class":625},"  return",[586,7204,7090],{"class":632},[586,7206,7207],{"class":595},"[",[586,7209,7210],{"class":632},"idx",[586,7212,7213],{"class":595},"] ",[586,7215,7216],{"class":591},"??",[586,7218,642],{"class":591},[586,7220,6854],{"class":612},[586,7222,648],{"class":591},[586,7224,7225],{"class":588,"line":2657},[586,7226,2357],{"class":591},[586,7228,7229],{"class":588,"line":2678},[586,7230,654],{"emptyLinePlaceholder":520},[586,7232,7233,7235,7238,7240,7243,7245],{"class":588,"line":2688},[586,7234,660],{"class":599},[586,7236,7237],{"class":632}," updateBackgroundColor ",[586,7239,606],{"class":591},[586,7241,7242],{"class":591}," ()",[586,7244,7080],{"class":599},[586,7246,2264],{"class":591},[586,7248,7249,7252,7254,7256,7258,7261],{"class":588,"line":2697},[586,7250,7251],{"class":632},"  bgColor",[586,7253,832],{"class":591},[586,7255,2283],{"class":632},[586,7257,2317],{"class":591},[586,7259,7260],{"class":668}," getRandomBackgroundColor",[586,7262,6832],{"class":595},[586,7264,7265],{"class":588,"line":2706},[586,7266,2357],{"class":591},[586,7268,7269,7271,7273],{"class":588,"line":5356},[586,7270,689],{"class":591},[586,7272,596],{"class":595},[586,7274,618],{"class":591},[586,7276,7277],{"class":588,"line":5365},[586,7278,654],{"emptyLinePlaceholder":520},[586,7280,7281,7283,7285],{"class":588,"line":5370},[586,7282,592],{"class":591},[586,7284,706],{"class":595},[586,7286,618],{"class":591},[586,7288,7289,7291,7293,7295,7297,7299,7302,7304,7306,7308,7310,7312,7314],{"class":588,"line":5378},[586,7290,714],{"class":591},[586,7292,5301],{"class":595},[586,7294,669],{"class":599},[586,7296,606],{"class":591},[586,7298,609],{"class":591},[586,7300,7301],{"class":612},"rootRef",[586,7303,609],{"class":591},[586,7305,2811],{"class":599},[586,7307,606],{"class":591},[586,7309,609],{"class":591},[586,7311,6339],{"class":612},[586,7313,609],{"class":591},[586,7315,618],{"class":591},[586,7317,7318,7320,7322,7324,7326,7328,7330,7332,7334,7336,7338,7341,7343],{"class":588,"line":5393},[586,7319,725],{"class":591},[586,7321,717],{"class":595},[586,7323,5323],{"class":599},[586,7325,606],{"class":591},[586,7327,609],{"class":591},[586,7329,5330],{"class":612},[586,7331,609],{"class":591},[586,7333,2811],{"class":599},[586,7335,606],{"class":591},[586,7337,609],{"class":591},[586,7339,7340],{"class":612},"!pointer-events-none",[586,7342,609],{"class":591},[586,7344,618],{"class":591},[586,7346,7347,7349,7351,7353,7355,7357,7359,7361],{"class":588,"line":5408},[586,7348,736],{"class":591},[586,7350,1694],{"class":595},[586,7352,1697],{"class":599},[586,7354,606],{"class":591},[586,7356,609],{"class":591},[586,7358,5349],{"class":612},[586,7360,609],{"class":591},[586,7362,1709],{"class":591},[586,7364,7365,7367,7369,7372,7374,7376,7378,7380],{"class":588,"line":5423},[586,7366,736],{"class":591},[586,7368,1716],{"class":595},[586,7370,7371],{"class":599}," :dom-element",[586,7373,606],{"class":591},[586,7375,609],{"class":591},[586,7377,7301],{"class":612},[586,7379,609],{"class":591},[586,7381,1709],{"class":591},[586,7383,7384],{"class":588,"line":5438},[586,7385,654],{"emptyLinePlaceholder":520},[586,7387,7388,7390],{"class":588,"line":5452},[586,7389,736],{"class":591},[586,7391,5375],{"class":595},[586,7393,7394,7396,7398,7400,7402],{"class":588,"line":5467},[586,7395,5381],{"class":599},[586,7397,606],{"class":591},[586,7399,609],{"class":591},[586,7401,5388],{"class":612},[586,7403,755],{"class":591},[586,7405,7406,7408,7410,7412,7414],{"class":588,"line":5472},[586,7407,5396],{"class":599},[586,7409,606],{"class":591},[586,7411,609],{"class":591},[586,7413,5403],{"class":612},[586,7415,755],{"class":591},[586,7417,7418,7420,7422,7424,7426],{"class":588,"line":5503},[586,7419,5411],{"class":599},[586,7421,606],{"class":591},[586,7423,609],{"class":591},[586,7425,5418],{"class":612},[586,7427,755],{"class":591},[586,7429,7430,7432,7434,7436,7438],{"class":588,"line":5537},[586,7431,5426],{"class":599},[586,7433,606],{"class":591},[586,7435,609],{"class":591},[586,7437,5433],{"class":612},[586,7439,755],{"class":591},[586,7441,7442,7444,7446,7448,7450],{"class":588,"line":5546},[586,7443,5441],{"class":599},[586,7445,606],{"class":591},[586,7447,609],{"class":591},[586,7449,1803],{"class":612},[586,7451,755],{"class":591},[586,7453,7454,7456,7458,7460,7463],{"class":588,"line":5556},[586,7455,5455],{"class":599},[586,7457,606],{"class":591},[586,7459,609],{"class":591},[586,7461,7462],{"class":612},"[-0.4, 0.4]",[586,7464,755],{"class":591},[586,7466,7467],{"class":588,"line":5566},[586,7468,3859],{"class":591},[586,7470,7471,7473,7475,7477,7479,7481,7484,7486],{"class":588,"line":4716},[586,7472,1769],{"class":591},[586,7474,1762],{"class":595},[586,7476,1697],{"class":599},[586,7478,606],{"class":591},[586,7480,609],{"class":591},[586,7482,7483],{"class":612},"[(index - (geometries.length - 1) / 2) * 2, 1, 0]",[586,7485,609],{"class":591},[586,7487,618],{"class":591},[586,7489,7490,7492,7494,7496,7498,7500,7502,7504,7506,7508,7510,7512,7514],{"class":588,"line":4717},[586,7491,5506],{"class":591},[586,7493,5509],{"class":595},[586,7495,5512],{"class":599},[586,7497,606],{"class":591},[586,7499,609],{"class":591},[586,7501,5519],{"class":612},[586,7503,609],{"class":591},[586,7505,1775],{"class":599},[586,7507,606],{"class":591},[586,7509,609],{"class":591},[586,7511,5530],{"class":612},[586,7513,609],{"class":591},[586,7515,1709],{"class":591},[586,7517,7518,7520,7522],{"class":588,"line":4718},[586,7519,5506],{"class":591},[586,7521,2683],{"class":595},[586,7523,1709],{"class":591},[586,7525,7526,7528,7530],{"class":588,"line":4719},[586,7527,5549],{"class":591},[586,7529,1762],{"class":595},[586,7531,618],{"class":591},[586,7533,7534,7536,7538],{"class":588,"line":4720},[586,7535,1823],{"class":591},[586,7537,5561],{"class":595},[586,7539,618],{"class":591},[586,7541,7542],{"class":588,"line":4721},[586,7543,654],{"emptyLinePlaceholder":520},[586,7545,7546,7548],{"class":588,"line":4722},[586,7547,736],{"class":591},[586,7549,3797],{"class":595},[586,7551,7552],{"class":588,"line":4723},[586,7553,3803],{"class":599},[586,7555,7556],{"class":588,"line":4724},[586,7557,3809],{"class":599},[586,7559,7560,7562,7564,7566,7568],{"class":588,"line":4725},[586,7561,5591],{"class":599},[586,7563,606],{"class":591},[586,7565,609],{"class":591},[586,7567,4686],{"class":612},[586,7569,755],{"class":591},[586,7571,7572,7574,7576,7578,7581],{"class":588,"line":4726},[586,7573,3830],{"class":599},[586,7575,606],{"class":591},[586,7577,609],{"class":591},[586,7579,7580],{"class":612},"[0, .75, -2]",[586,7582,755],{"class":591},[586,7584,7586,7588,7590,7592,7595],{"class":7585,"line":5694},[588,622],[586,7587,3845],{"class":599},[586,7589,606],{"class":591},[586,7591,609],{"class":591},[586,7593,7594],{"class":612},"1.15",[586,7596,755],{"class":591},[586,7598,7600,7602,7604,7606,7608],{"class":7599,"line":4727},[588,622],[586,7601,5619],{"class":599},[586,7603,606],{"class":591},[586,7605,609],{"class":591},[586,7607,4176],{"class":612},[586,7609,755],{"class":591},[586,7611,7613],{"class":7612,"line":4728},[588,622],[586,7614,3859],{"class":591},[586,7616,7618,7620,7623,7626,7628,7630,7633,7635],{"class":7617,"line":4729},[588,622],[586,7619,1769],{"class":591},[586,7621,7622],{"class":595},"Transition",[586,7624,7625],{"class":599}," name",[586,7627,606],{"class":591},[586,7629,609],{"class":591},[586,7631,7632],{"class":612},"transition-basic",[586,7634,609],{"class":591},[586,7636,618],{"class":591},[586,7638,7640,7642],{"class":7639,"line":4730},[588,622],[586,7641,5506],{"class":591},[586,7643,7644],{"class":595},"h1\n",[586,7646,7648,7651,7653,7655,7658],{"class":7647,"line":4731},[588,622],[586,7649,7650],{"class":599},"            v-if",[586,7652,606],{"class":591},[586,7654,609],{"class":591},[586,7656,7657],{"class":612},"showTransition",[586,7659,755],{"class":591},[586,7661,7663,7666,7668,7670,7673],{"class":7662,"line":4732},[588,622],[586,7664,7665],{"class":599},"            :style",[586,7667,606],{"class":591},[586,7669,609],{"class":591},[586,7671,7672],{"class":612},"{ backgroundColor: bgColor }",[586,7674,755],{"class":591},[586,7676,7678,7681,7683,7685,7688],{"class":7677,"line":4733},[588,622],[586,7679,7680],{"class":599},"            class",[586,7682,606],{"class":591},[586,7684,609],{"class":591},[586,7686,7687],{"class":612},"html-demo-transition-heading will-change-transform transition-transform,background-color cursor-pointer duration-500 text-center p-2 text-light shadow-lg",[586,7689,755],{"class":591},[586,7691,7693,7696,7698,7700,7703],{"class":7692,"line":4734},[588,622],[586,7694,7695],{"class":599},"            @click",[586,7697,606],{"class":591},[586,7699,609],{"class":591},[586,7701,7702],{"class":612},"updateBackgroundColor",[586,7704,755],{"class":591},[586,7706,7708],{"class":7707,"line":4735},[588,622],[586,7709,7710],{"class":591},"          >\n",[586,7712,7714,7717,7719,7721,7724,7726,7728,7731,7733],{"class":7713,"line":4736},[588,622],[586,7715,7716],{"class":591},"            \u003C",[586,7718,2734],{"class":595},[586,7720,2183],{"class":591},[586,7722,7723],{"class":632},"TRANSITION + ",[586,7725,689],{"class":591},[586,7727,2734],{"class":595},[586,7729,7730],{"class":591},">\u003C",[586,7732,929],{"class":595},[586,7734,1709],{"class":591},[586,7736,7738,7740,7742,7744,7747,7749,7751],{"class":7737,"line":4737},[588,622],[586,7739,7716],{"class":591},[586,7741,4481],{"class":595},[586,7743,2183],{"class":591},[586,7745,7746],{"class":632},"occlude=blending 💛",[586,7748,689],{"class":591},[586,7750,4481],{"class":595},[586,7752,618],{"class":591},[586,7754,7756,7759,7761],{"class":7755,"line":5843},[588,622],[586,7757,7758],{"class":591},"          \u003C/",[586,7760,3866],{"class":595},[586,7762,618],{"class":591},[586,7764,7766,7768,7770],{"class":7765,"line":4738},[588,622],[586,7767,5549],{"class":591},[586,7769,7622],{"class":595},[586,7771,618],{"class":591},[586,7773,7775,7777,7779],{"class":7774,"line":4739},[588,622],[586,7776,1823],{"class":591},[586,7778,3895],{"class":595},[586,7780,618],{"class":591},[586,7782,7784],{"class":7783,"line":4740},[588,622],[586,7785,654],{"emptyLinePlaceholder":520},[586,7787,7789,7791,7793,7795,7797,7799,7802,7804],{"class":7788,"line":4741},[588,622],[586,7790,736],{"class":591},[586,7792,2449],{"class":595},[586,7794,6258],{"class":599},[586,7796,606],{"class":591},[586,7798,609],{"class":591},[586,7800,7801],{"class":612},"-1.25",[586,7803,609],{"class":591},[586,7805,1709],{"class":591},[586,7807,7809,7811,7813,7815,7817,7819,7821,7823],{"class":7808,"line":4742},[588,622],[586,7810,736],{"class":591},[586,7812,1847],{"class":595},[586,7814,1850],{"class":599},[586,7816,606],{"class":591},[586,7818,609],{"class":591},[586,7820,1803],{"class":612},[586,7822,609],{"class":591},[586,7824,1709],{"class":591},[586,7826,7828,7830,7832],{"class":7827,"line":4743},[588,622],[586,7829,797],{"class":591},[586,7831,717],{"class":595},[586,7833,618],{"class":591},[586,7835,7837,7839,7841],{"class":7836,"line":4744},[588,622],[586,7838,807],{"class":591},[586,7840,5301],{"class":595},[586,7842,618],{"class":591},[586,7844,7845,7847,7849],{"class":588,"line":4745},[586,7846,689],{"class":591},[586,7848,706],{"class":595},[586,7850,618],{"class":591},[586,7852,7853],{"class":588,"line":4746},[586,7854,654],{"emptyLinePlaceholder":520},[586,7856,7857,7859,7861,7863],{"class":588,"line":4747},[586,7858,592],{"class":591},[586,7860,1558],{"class":595},[586,7862,3946],{"class":599},[586,7864,618],{"class":591},[586,7866,7867,7869,7871],{"class":588,"line":4748},[586,7868,832],{"class":591},[586,7870,6339],{"class":2174},[586,7872,2264],{"class":591},[586,7874,7875,7877,7879,7881],{"class":588,"line":5959},[586,7876,2944],{"class":3961},[586,7878,2255],{"class":591},[586,7880,6351],{"class":2325},[586,7882,3973],{"class":591},[586,7884,7885,7887,7889,7891],{"class":588,"line":4749},[586,7886,2957],{"class":3961},[586,7888,2255],{"class":591},[586,7890,6351],{"class":2325},[586,7892,3973],{"class":591},[586,7894,7895,7897,7899,7901],{"class":588,"line":4750},[586,7896,6370],{"class":3961},[586,7898,2255],{"class":591},[586,7900,6375],{"class":632},[586,7902,3973],{"class":591},[586,7904,7905,7907,7909,7911],{"class":588,"line":4751},[586,7906,6383],{"class":3961},[586,7908,2255],{"class":591},[586,7910,6388],{"class":632},[586,7912,3973],{"class":591},[586,7914,7915,7917,7919,7921,7923],{"class":588,"line":4752},[586,7916,3962],{"class":3961},[586,7918,2255],{"class":591},[586,7920,3967],{"class":591},[586,7922,6402],{"class":632},[586,7924,3973],{"class":591},[586,7926,7927],{"class":588,"line":4753},[586,7928,2357],{"class":591},[586,7930,7931],{"class":588,"line":4754},[586,7932,654],{"emptyLinePlaceholder":520},[586,7934,7935,7937,7940,7942,7945],{"class":588,"line":4755},[586,7936,832],{"class":591},[586,7938,7939],{"class":2174},"html-demo-transition-heading",[586,7941,2255],{"class":591},[586,7943,7944],{"class":599},"hover",[586,7946,2264],{"class":591},[586,7948,7949,7952,7954,7957,7959,7962],{"class":588,"line":4756},[586,7950,7951],{"class":3961},"  transform",[586,7953,2255],{"class":591},[586,7955,7956],{"class":668}," scale",[586,7958,672],{"class":591},[586,7960,7961],{"class":2325},"1.05",[586,7963,7964],{"class":591},");\n",[586,7966,7967],{"class":588,"line":4757},[586,7968,2357],{"class":591},[586,7970,7971],{"class":588,"line":4758},[586,7972,654],{"emptyLinePlaceholder":520},[586,7974,7975,7977,7980],{"class":588,"line":4759},[586,7976,832],{"class":591},[586,7978,7979],{"class":2174},"transition-basic-enter-from",[586,7981,2938],{"class":591},[586,7983,7984,7986,7989],{"class":588,"line":6086},[586,7985,832],{"class":591},[586,7987,7988],{"class":2174},"transition-basic-leave-to",[586,7990,2264],{"class":591},[586,7992,7993,7995,7997,7999],{"class":588,"line":6110},[586,7994,5249],{"class":3961},[586,7996,2255],{"class":591},[586,7998,6770],{"class":2325},[586,8000,3973],{"class":591},[586,8002,8003,8005,8007,8010,8012,8015],{"class":588,"line":6131},[586,8004,7951],{"class":3961},[586,8006,2255],{"class":591},[586,8008,8009],{"class":668}," translateY",[586,8011,672],{"class":591},[586,8013,8014],{"class":2325},"-20px",[586,8016,7964],{"class":591},[586,8018,8019],{"class":588,"line":6140},[586,8020,2357],{"class":591},[586,8022,8023],{"class":588,"line":6149},[586,8024,654],{"emptyLinePlaceholder":520},[586,8026,8027,8029,8032],{"class":588,"line":6154},[586,8028,832],{"class":591},[586,8030,8031],{"class":2174},"transition-basic-enter-active",[586,8033,2938],{"class":591},[586,8035,8036,8038,8041],{"class":588,"line":6162},[586,8037,832],{"class":591},[586,8039,8040],{"class":2174},"transition-basic-leave-active",[586,8042,2264],{"class":591},[586,8044,8045,8048,8050,8053,8056,8059],{"class":588,"line":6177},[586,8046,8047],{"class":3961},"  transition",[586,8049,2255],{"class":591},[586,8051,8052],{"class":632}," all ",[586,8054,8055],{"class":2325},"0.5s",[586,8057,8058],{"class":632}," ease",[586,8060,3973],{"class":591},[586,8062,8063],{"class":588,"line":6191},[586,8064,2357],{"class":591},[586,8066,8067],{"class":588,"line":6206},[586,8068,654],{"emptyLinePlaceholder":520},[586,8070,8071,8073,8076],{"class":588,"line":6220},[586,8072,832],{"class":591},[586,8074,8075],{"class":2174},"transition-basic-enter-to",[586,8077,2938],{"class":591},[586,8079,8080,8082,8085],{"class":588,"line":6235},[586,8081,832],{"class":591},[586,8083,8084],{"class":2174},"transition-basic-leave-from",[586,8086,2264],{"class":591},[586,8088,8089,8091,8093,8095],{"class":588,"line":6241},[586,8090,5249],{"class":3961},[586,8092,2255],{"class":591},[586,8094,2984],{"class":2325},[586,8096,3973],{"class":591},[586,8098,8099,8101,8103,8105,8107,8109],{"class":588,"line":6246},[586,8100,7951],{"class":3961},[586,8102,2255],{"class":591},[586,8104,8009],{"class":668},[586,8106,672],{"class":591},[586,8108,1137],{"class":2325},[586,8110,7964],{"class":591},[586,8112,8113],{"class":588,"line":6251},[586,8114,2357],{"class":591},[586,8116,8117,8119,8121],{"class":588,"line":6272},[586,8118,689],{"class":591},[586,8120,1558],{"class":595},[586,8122,618],{"class":591},[910,8124,6588,8126],{"id":8125},"using-iframes",[542,8127,8128],{},"iframes",[504,8130,8131,8132,8134],{},"You can achieve pretty cool results with the ",[542,8133,3895],{}," 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.",[2023,8136,8137],{},[8138,8139],"objects-html-iframe-demo",{},[4082,8141,4084,8142,8144],{},[4086,8143,4088],{},[572,8145,8147],{"className":4091,"code":8146,"language":4093,"meta":512,"style":512},"\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",[542,8148,8149,8155,8160,8165,8178,8191,8204,8217,8231,8245,8259,8263,8334],{"__ignoreMap":512},[586,8150,8151,8153],{"class":588,"line":513},[586,8152,592],{"class":591},[586,8154,4542],{"class":595},[586,8156,8157],{"class":588,"line":514},[586,8158,8159],{"class":599},"  transform\n",[586,8161,8162],{"class":588,"line":651},[586,8163,8164],{"class":599},"  center\n",[586,8166,8167,8170,8172,8174,8176],{"class":588,"line":657},[586,8168,8169],{"class":599},"  :cast-shadow",[586,8171,606],{"class":591},[586,8173,609],{"class":591},[586,8175,1112],{"class":612},[586,8177,755],{"class":591},[586,8179,8180,8183,8185,8187,8189],{"class":588,"line":686},[586,8181,8182],{"class":599},"  :receive-shadow",[586,8184,606],{"class":591},[586,8186,609],{"class":591},[586,8188,1112],{"class":612},[586,8190,755],{"class":591},[586,8192,8193,8196,8198,8200,8202],{"class":588,"line":696},[586,8194,8195],{"class":599},"  occlude",[586,8197,606],{"class":591},[586,8199,609],{"class":591},[586,8201,4686],{"class":612},[586,8203,755],{"class":591},[586,8205,8206,8209,8211,8213,8215],{"class":588,"line":701},[586,8207,8208],{"class":599},"  :z-index-range",[586,8210,606],{"class":591},[586,8212,609],{"class":591},[586,8214,4176],{"class":612},[586,8216,755],{"class":591},[586,8218,8219,8222,8224,8226,8229],{"class":588,"line":711},[586,8220,8221],{"class":599},"  :position-y",[586,8223,606],{"class":591},[586,8225,609],{"class":591},[586,8227,8228],{"class":612},"2.5",[586,8230,755],{"class":591},[586,8232,8233,8236,8238,8240,8243],{"class":588,"line":722},[586,8234,8235],{"class":599},"  :portal",[586,8237,606],{"class":591},[586,8239,609],{"class":591},[586,8241,8242],{"class":612},"portalRef",[586,8244,755],{"class":591},[586,8246,8247,8250,8252,8254,8257],{"class":588,"line":577},[586,8248,8249],{"class":599},"  :style",[586,8251,606],{"class":591},[586,8253,609],{"class":591},[586,8255,8256],{"class":612},"{ userSelect: 'none' }",[586,8258,755],{"class":591},[586,8260,8261],{"class":588,"line":578},[586,8262,618],{"class":591},[586,8264,8265,8267,8270,8272,8274,8276,8279,8281,8284,8286,8288,8291,8293,8296,8298,8300,8302,8304,8307,8309,8311,8314,8316,8319,8321,8323,8326,8328,8330,8332],{"class":588,"line":579},[586,8266,714],{"class":591},[586,8268,8269],{"class":595},"iframe",[586,8271,2811],{"class":599},[586,8273,606],{"class":591},[586,8275,609],{"class":591},[586,8277,8278],{"class":612},"w-[700px] h-[500px]",[586,8280,609],{"class":591},[586,8282,8283],{"class":599}," src",[586,8285,606],{"class":591},[586,8287,609],{"class":591},[586,8289,8290],{"class":612},"https://tresjs.org",[586,8292,609],{"class":591},[586,8294,8295],{"class":599}," frameborder",[586,8297,606],{"class":591},[586,8299,609],{"class":591},[586,8301,1137],{"class":612},[586,8303,609],{"class":591},[586,8305,8306],{"class":599}," :width",[586,8308,606],{"class":591},[586,8310,609],{"class":591},[586,8312,8313],{"class":612},"700",[586,8315,609],{"class":591},[586,8317,8318],{"class":599}," :height",[586,8320,606],{"class":591},[586,8322,609],{"class":591},[586,8324,8325],{"class":612},"500",[586,8327,609],{"class":591},[586,8329,5983],{"class":591},[586,8331,8269],{"class":595},[586,8333,618],{"class":591},[586,8335,8336,8338,8340],{"class":588,"line":580},[586,8337,689],{"class":591},[586,8339,4093],{"class":595},[586,8341,618],{"class":591},[8343,8344,8345],"info",{},[504,8346,8347,8348,8351,8352,8355,8356],{},"The demos use ",[542,8349,8350],{},":z-index-range=\"[28, 0]\""," simply to ensure the HTML elements stay below the documentation header (which uses ",[542,8353,8354],{},"z-index: 30",").\n",[2734,8357,8358],{},"This value is for the docs only — you can ignore it or adjust it as needed.",[568,8360,944],{"id":943},[946,8362,8363,8373],{},[949,8364,8365],{},[952,8366,8367,8369,8371],{},[955,8368,1911],{},[955,8370,961],{},[955,8372,964],{},[966,8374,8375,8393,8408,8426,8452,8472,8489,8507,8519,8538,8561,8601,8639,8659,8692],{},[952,8376,8377,8382,8388],{},[971,8378,8379],{},[2734,8380,8381],{},"as",[971,8383,8384,8385,832],{},"Wrapping ",[4481,8386,8387],{},"HTML element",[971,8389,8390],{},[542,8391,8392],{},"'div'",[952,8394,8395,8400,8406],{},[971,8396,8397],{},[2734,8398,8399],{},"wrapperClass",[971,8401,1375,8402,8405],{},[542,8403,8404],{},"className"," of the wrapping element. element.",[971,8407],{},[952,8409,8410,8415,8422],{},[971,8411,8412],{},[2734,8413,8414],{},"prepend",[971,8416,8417,8418,8421],{},"Projects content ",[4481,8419,8420],{},"behind"," the canvas.",[971,8423,8424],{},[542,8425,1152],{},[952,8427,8428,8432,8448],{},[971,8429,8430],{},[2734,8431,1218],{},[971,8433,8434,8435,6582,8438,8440,8441],{},"Adds a ",[542,8436,8437],{},"transform: translate(-50%, -50%)",[929,8439],{},"➡️ ",[4481,8442,8443,8444,8447],{},"Ignored in ",[2734,8445,8446],{},"transform"," mode.",[971,8449,8450],{},[542,8451,1152],{},[952,8453,8454,8459,8468],{},[971,8455,8456],{},[2734,8457,8458],{},"fullscreen",[971,8460,8461,8462,8440,8464],{},"Aligns to the upper-left corner and fills the screen. ",[929,8463],{},[4481,8465,8443,8466,8447],{},[2734,8467,8446],{},[971,8469,8470],{},[542,8471,1152],{},[952,8473,8474,8479,8487],{},[971,8475,8476],{},[2734,8477,8478],{},"distanceFactor",[971,8480,8481,8482,8484,8485,832],{},"Children are scaled by this factor and also by distance to a ",[542,8483,3605],{},", or zoom when using an ",[542,8486,3608],{},[971,8488],{},[952,8490,8491,8496,8502],{},[971,8492,8493],{},[2734,8494,8495],{},"zIndexRange",[971,8497,8498,8499,832],{},"Defines the ",[4481,8500,8501],{},"Z-order range",[971,8503,8504],{},[542,8505,8506],{},"[16777271, 0]",[952,8508,8509,8514,8517],{},[971,8510,8511],{},[2734,8512,8513],{},"portal",[971,8515,8516],{},"Reference to a target container (for rendering into a different DOM node). container.",[971,8518],{},[952,8520,8521,8525,8534],{},[971,8522,8523],{},[2734,8524,8446],{},[971,8526,996,8527,8529,8530,8533],{},[542,8528,1112],{},", applies ",[542,8531,8532],{},"matrix3d"," transformations — the element appears as if it is inside the 3D scene.",[971,8535,8536],{},[542,8537,1152],{},[952,8539,8540,8545,8557],{},[971,8541,8542],{},[2734,8543,8544],{},"sprite",[971,8546,8547,8548,6582,8550,8440,8552],{},"Renders as a ",[4481,8549,8544],{},[929,8551],{},[4481,8553,8554,8555,8447],{},"Only in ",[2734,8556,8446],{},[971,8558,8559],{},[542,8560,1152],{},[952,8562,8563,8568,8592],{},[971,8564,8565],{},[2734,8566,8567],{},"calculatePosition",[971,8569,8570,8571,8573,934,8576,934,8579,8581,8582,8585,8586,8440,8588],{},"Callback function to override the default positioning logic. ",[929,8572],{},[2734,8574,8575],{},"Type:",[542,8577,8578],{},"(object: Object3D, camera: Camera, size: { width: number; height: number }) => [number, number, number]",[929,8580],{},"Receives the related 3D object, the active camera, and the current viewport size, and must return ",[542,8583,8584],{},"[x, y, z]"," pixel coordinates for placing the HTML element. ",[929,8587],{},[4481,8589,8443,8590,8447],{},[2734,8591,8446],{},[971,8593,8594],{},[547,8595,8598,8599],{"href":8596,"rel":8597},"https://github.com/Tresjs/cientos/blob/main/src/core/misc/html/utils.ts#L9-L19",[551],"Default ",[542,8600,8567],{},[952,8602,8603,8607,8637],{},[971,8604,8605],{},[2734,8606,4045],{},[971,8608,8609,8610,8612,8613,8615,8616,8619,8620,8622,8623,8626,8627,8612,8629,8632,8633,8636],{},"Enables occlusion. Possible values: ",[929,8611],{},"- ",[542,8614,1112],{}," → Occlusion against ",[4481,8617,8618],{},"all"," scene objects ",[929,8621],{}," - ",[542,8624,8625],{},"Ref\u003CTresObject3D>[]"," → Occlusion is enabled only against the specified objects. ",[929,8628],{},[542,8630,8631],{},"'blending'"," → Uses a ",[4481,8634,8635],{},"blending-based"," occlusion method (CSS-like depth blending).",[971,8638],{},[952,8640,8641,8645,8651],{},[971,8642,8643],{},[2734,8644,6446],{},[971,8646,8647,8648,8650],{},"Custom ",[542,8649,6446],{}," to be used.",[971,8652,8653],{},[547,8654,8657],{"href":8655,"rel":8656},"https://threejs.org/docs/?q=geometry#api/en/geometries/PlaneGeometry",[551],[542,8658,6436],{},[952,8660,8661,8665,8690],{},[971,8662,8663],{},[2734,8664,6519],{},[971,8666,8667,934,8673,934,8675,8681,8682,934,8684],{},[2734,8668,8669,8670,8672],{},"Custom shader ",[4481,8671,6519],{}," used for the occlusion mesh.",[929,8674],{},[2734,8676,8677,8678,8680],{},"Only applies when ",[542,8679,6428],{}," is enabled"," (an occlusion mesh is created). ",[929,8683],{},[4481,8685,8686,8687,8689],{},"Ignored in raycast occlusion modes (",[542,8688,1112],{},", object refs).",[971,8691],{},[952,8693,8694,8699,8721],{},[971,8695,8696],{},[2734,8697,8698],{},"transparentMaterial",[971,8700,8701,934,8708,934,8710,934,8715,934,8717],{},[2734,8702,8703,8704,8707],{},"Enables ",[4481,8705,8706],{},"transparent"," rendering for the occlusion material.",[929,8709],{},[2734,8711,8677,8712,8714],{},[542,8713,6428],{}," creates an occlusion mesh.",[929,8716],{},[4481,8718,8686,8719,8689],{},[542,8720,1112],{},[971,8722,8723],{},[542,8724,1152],{},[568,8726,1299],{"id":1298},[946,8728,8729,8737],{},[949,8730,8731],{},[952,8732,8733,8735],{},[955,8734,1308],{},[955,8736,961],{},[966,8738,8739],{},[952,8740,8741,8744],{},[971,8742,8743],{},"onOcclude",[971,8745,8746],{},"Called when the occlusion state changes.",[568,8748,8750],{"id":8749},"exposed-properties","Exposed properties",[946,8752,8753,8765],{},[949,8754,8755],{},[952,8756,8757,8760,8763],{},[955,8758,8759],{},"Property",[955,8761,8762],{},"Type",[955,8764,961],{},[966,8766,8767,8790,8811],{},[952,8768,8769,8774,8779],{},[971,8770,8771],{},[2734,8772,8773],{},"instance",[971,8775,8776],{},[542,8777,8778],{},"Ref\u003CTresObject3D | null>",[971,8780,8781,8782,8787,8788,832],{},"Reference to the root ",[2734,8783,8784],{},[542,8785,8786],{},"\u003CTresGroup>"," used by ",[542,8789,3612],{},[952,8791,8792,8797,8802],{},[971,8793,8794],{},[2734,8795,8796],{},"isVisible",[971,8798,8799],{},[542,8800,8801],{},"Ref\u003Cboolean>",[971,8803,8804,8805,6576,8808,832],{},"Reactive value that indicates whether the HTML content is ",[2734,8806,8807],{},"currently visible",[2734,8809,8810],{},"occluded",[952,8812,8813,8818,8822],{},[971,8814,8815],{},[2734,8816,8817],{},"occlusionMesh",[971,8819,8820],{},[542,8821,8778],{},[971,8823,8824,8825,8828,8829,6540,8831,8833],{},"Reference to the ",[2734,8826,8827],{},"occlusion mesh"," created when ",[542,8830,6428],{},[2734,8832,6543],{},". Used internally for geometry-based occlusion.",[568,8835,8837],{"id":8836},"caveats","Caveats",[558,8839,8840,8873,8890,8949,8967],{},[561,8841,8842,8843,8848,8849,8851,8852,6576,8855,8858,8859,8861,8862,8865,8866,8869,8870,8872],{},"✨ When using ",[2734,8844,8845],{},[542,8846,8847],{},"\u003CHtml occlude>",", if the ",[542,8850,3612],{}," component is ",[2734,8853,8854],{},"overlapping",[2734,8856,8857],{},"inside a 3D object",", it will be considered ",[2734,8860,8810],{}," and therefore ",[2734,8863,8864],{},"hidden",". To avoid this, ",[2734,8867,8868],{},"adjust the position"," of the ",[542,8871,3612],{}," component in your scene.",[561,8874,8875,8876,8881,8882,8885,8886,8889],{},"🎨 When using ",[2734,8877,8878],{},[542,8879,8880],{},"\u003CHtml occlude=\"blending\">",", the HTML content is no longer ",[2734,8883,8884],{},"selectable"," because it is rendered ",[2734,8887,8888],{},"behind the canvas",". This is required to achieve the blending effect.",[561,8891,8892,8893,8895,8896,8898,8899],{},"⚙️ When using a ",[2734,8894,6528],{}," with occlusion in ",[542,8897,4686],{}," mode, there are a few important requirements to ensure the HTML content renders correctly ⬇️",[4082,8900,4084,8901,8904],{},[4086,8902,8903],{},"See more information",[8905,8906,8907,8919,8927,8934],"ol",{},[561,8908,8909,8910,2272,8912,8915,8916,832],{},"If you provide your own material, it must be ",[2734,8911,8706],{},[542,8913,8914],{},"transparent: true",") with an ",[2734,8917,8918],{},"opacity \u003C 1",[561,8920,8921,8922,8926],{},"If you are not providing a custom material, enable ",[2734,8923,8924],{},[542,8925,8698],{}," so the internal shader becomes transparent.",[561,8928,8929,8930,8933],{},"The occlusion mesh requires a ",[2734,8931,8932],{},"fully transparent canvas background","; otherwise, thin borders or halo artifacts may appear.",[561,8935,8936,8937,8940,8941,6628,8943,8946,8947,832],{},"To compensate for the transparent canvas, you may ",[2734,8938,8939],{},"reapply your previous clear-color as a CSS background"," on the ",[542,8942,4093],{},[542,8944,8945],{},"body",", or a wrapper ",[542,8948,5301],{},[561,8950,8951,8952,8956,8957,8959,8960,8962,8963,8966],{},"🔶 When using ",[2734,8953,8954],{},[542,8955,8698],{},", overlapping ",[542,8958,3612],{}," elements (especially multiple ",[542,8961,6428],{}," instances) may cause ",[2734,8964,8965],{},"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.",[561,8968,8969,8970,8972,8973,8976,8977],{},"🔵 To avoid thin border artifacts when using ",[542,8971,6428],{},", make sure your ",[542,8974,8975],{},"\u003CTresCanvas>"," is fully transparent:",[572,8978,8980],{"className":574,"code":8979,"language":582,"meta":512,"style":512},"\u003CTresCanvas :alpha=\"true\" :clearAlpha=\"0\" />\n",[542,8981,8982],{"__ignoreMap":512},[586,8983,8984,8986,8988,8991,8994,8996,8998,9000,9002,9004,9007,9009,9011,9013,9015],{"class":588,"line":513},[586,8985,592],{"class":591},[586,8987,717],{"class":595},[586,8989,8990],{"class":591}," :",[586,8992,8993],{"class":599},"alpha",[586,8995,606],{"class":591},[586,8997,609],{"class":591},[586,8999,1112],{"class":2934},[586,9001,609],{"class":591},[586,9003,8990],{"class":591},[586,9005,9006],{"class":599},"clearAlpha",[586,9008,606],{"class":591},[586,9010,609],{"class":591},[586,9012,1137],{"class":2325},[586,9014,609],{"class":591},[586,9016,1709],{"class":591},[946,9018,9019,9029],{},[949,9020,9021],{},[952,9022,9023,9025,9027],{},[955,9024,1911],{},[955,9026,961],{},[955,9028,964],{},[966,9030,9031,9044,9055,9068,9084,9099,9110,9123,9134,9147,9160,9173,9195,9210],{},[952,9032,9033,9037,9040],{},[971,9034,9035],{},[2734,9036,8381],{},[971,9038,9039],{},"Wrapping html element.",[971,9041,9042],{},[542,9043,8392],{},[952,9045,9046,9050,9053],{},[971,9047,9048],{},[2734,9049,8399],{},[971,9051,9052],{},"The className of the wrapping element.",[971,9054],{},[952,9056,9057,9061,9064],{},[971,9058,9059],{},[2734,9060,8414],{},[971,9062,9063],{},"Project content behind the canvas.",[971,9065,9066],{},[542,9067,1152],{},[952,9069,9070,9074,9080],{},[971,9071,9072],{},[2734,9073,1218],{},[971,9075,9076,9077],{},"Adds a -50%/-50% CSS transform. ",[586,9078,9079],{},"Ignored in transform mode",[971,9081,9082],{},[542,9083,1152],{},[952,9085,9086,9090,9095],{},[971,9087,9088],{},[2734,9089,8458],{},[971,9091,9092,9093],{},"Aligns to the upper-left corner, fills the screen. ",[586,9094,9079],{},[971,9096,9097],{},[542,9098,1152],{},[952,9100,9101,9105,9108],{},[971,9102,9103],{},[2734,9104,8478],{},[971,9106,9107],{},"Children will be scaled by this factor, and also by distance to a PerspectiveCamera / zoom by an OrthographicCamera.",[971,9109],{},[952,9111,9112,9116,9119],{},[971,9113,9114],{},[2734,9115,8495],{},[971,9117,9118],{},"Z-order range.",[971,9120,9121],{},[542,9122,8506],{},[952,9124,9125,9129,9132],{},[971,9126,9127],{},[2734,9128,8513],{},[971,9130,9131],{},"Reference to target container.",[971,9133],{},[952,9135,9136,9140,9143],{},[971,9137,9138],{},[2734,9139,8446],{},[971,9141,9142],{},"If true, applies matrix3d transformations.",[971,9144,9145],{},[542,9146,1152],{},[952,9148,9149,9153,9156],{},[971,9150,9151],{},[2734,9152,8544],{},[971,9154,9155],{},"Renders as sprite, but only in transform mode.",[971,9157,9158],{},[542,9159,1152],{},[952,9161,9162,9166,9171],{},[971,9163,9164],{},[2734,9165,8567],{},[971,9167,9168,9169],{},"Override default positioning function. ",[586,9170,9079],{},[971,9172],{},[952,9174,9175,9179,9193],{},[971,9176,9177],{},[2734,9178,4045],{},[971,9180,9181,9182,6628,9184,6628,9186,9189,9190,9192],{},"Can be ",[542,9183,1112],{},[542,9185,8625],{},[542,9187,9188],{},"'raycast'",", or ",[542,9191,8631],{},". True occludes the entire scene.",[971,9194],{},[952,9196,9197,9201,9206],{},[971,9198,9199],{},[2734,9200,6446],{},[971,9202,8647,9203,9205],{},[542,9204,6446],{}," to be use",[971,9207,9208],{},[542,9209,6436],{},[952,9211,9212,9216,9220],{},[971,9213,9214],{},[2734,9215,6519],{},[971,9217,8669,9218,9205],{},[542,9219,6519],{},[971,9221],{},[568,9223,1299],{"id":9224},"events-1",[946,9226,9227,9235],{},[949,9228,9229],{},[952,9230,9231,9233],{},[955,9232,1308],{},[955,9234,961],{},[966,9236,9237],{},[952,9238,9239,9241],{},[971,9240,8743],{},[971,9242,8746],{},[1558,9244,9245],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":512,"searchDepth":513,"depth":514,"links":9247},[9248,9249,9254,9257,9262,9263,9264,9265,9266],{"id":570,"depth":514,"text":15},{"id":4038,"depth":514,"text":4039,"children":9250},[9251,9252,9253],{"id":4233,"depth":651,"text":4234},{"id":4396,"depth":651,"text":4397},{"id":4660,"depth":651,"text":4661},{"id":6421,"depth":514,"text":6422,"children":9255},[9256],{"id":6512,"depth":651,"text":6513},{"id":6587,"depth":514,"text":9258,"children":9259},"Using \u003CTransition>",[9260],{"id":8125,"depth":651,"text":9261},"Using iframes",{"id":943,"depth":514,"text":944},{"id":1298,"depth":514,"text":1299},{"id":8749,"depth":514,"text":8750},{"id":8836,"depth":514,"text":8837},{"id":9224,"depth":514,"text":1299},"Allows you put DOM elements in your Tres.js scene.",{},{"title":441,"description":9267},"sCicSGhX9NlQz2qQXKQDRsp2N33eyO-s6DiY6dGH98s",{"id":9272,"title":445,"body":9273,"description":9870,"extension":517,"links":518,"meta":9871,"navigation":520,"path":446,"seo":9872,"stem":447,"__hash__":9873},"docs/2.api/9.objects/image.md",{"type":501,"value":9274,"toc":9865},[9275,9280,9286,9288,9459,9461,9468,9671,9673,9696,9862],[534,9276,9277],{},[9278,9279],"objects-image",{},[504,9281,9282,9285],{},[542,9283,9284],{},"\u003CImage />"," is a shader-based component that optionally loads then displays an image texture on a default plane or on your custom geometry.",[568,9287,15],{"id":570},[572,9289,9292],{"className":574,"code":9290,"highlights":9291,"language":582,"meta":512,"style":512},"\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",[651,577,578,579],[542,9293,9294,9314,9332,9352,9360,9364,9372,9380,9398,9402,9410,9425,9439,9443,9451],{"__ignoreMap":512},[586,9295,9296,9298,9300,9302,9304,9306,9308,9310,9312],{"class":588,"line":513},[586,9297,592],{"class":591},[586,9299,596],{"class":595},[586,9301,600],{"class":599},[586,9303,603],{"class":599},[586,9305,606],{"class":591},[586,9307,609],{"class":591},[586,9309,613],{"class":612},[586,9311,609],{"class":591},[586,9313,618],{"class":591},[586,9315,9316,9318,9320,9322,9324,9326,9328,9330],{"class":588,"line":514},[586,9317,626],{"class":625},[586,9319,629],{"class":591},[586,9321,2125],{"class":632},[586,9323,636],{"class":591},[586,9325,639],{"class":625},[586,9327,642],{"class":591},[586,9329,2114],{"class":612},[586,9331,648],{"class":591},[586,9333,9335,9337,9339,9342,9344,9346,9348,9350],{"class":9334,"line":651},[588,622],[586,9336,626],{"class":625},[586,9338,629],{"class":591},[586,9340,9341],{"class":632}," Image",[586,9343,636],{"class":591},[586,9345,639],{"class":625},[586,9347,642],{"class":591},[586,9349,645],{"class":612},[586,9351,648],{"class":591},[586,9353,9354,9356,9358],{"class":588,"line":657},[586,9355,689],{"class":591},[586,9357,596],{"class":595},[586,9359,618],{"class":591},[586,9361,9362],{"class":588,"line":686},[586,9363,654],{"emptyLinePlaceholder":520},[586,9365,9366,9368,9370],{"class":588,"line":696},[586,9367,592],{"class":591},[586,9369,706],{"class":595},[586,9371,618],{"class":591},[586,9373,9374,9376,9378],{"class":588,"line":701},[586,9375,714],{"class":591},[586,9377,717],{"class":595},[586,9379,618],{"class":591},[586,9381,9382,9384,9386,9388,9390,9392,9394,9396],{"class":588,"line":711},[586,9383,725],{"class":591},[586,9385,1694],{"class":595},[586,9387,1697],{"class":599},[586,9389,606],{"class":591},[586,9391,609],{"class":591},[586,9393,3315],{"class":612},[586,9395,609],{"class":591},[586,9397,1709],{"class":591},[586,9399,9400],{"class":588,"line":722},[586,9401,654],{"emptyLinePlaceholder":520},[586,9403,9405,9407],{"class":9404,"line":577},[588,622],[586,9406,725],{"class":591},[586,9408,9409],{"class":595},"Image\n",[586,9411,9413,9416,9418,9420,9423],{"class":9412,"line":578},[588,622],[586,9414,9415],{"class":599},"      url",[586,9417,606],{"class":591},[586,9419,609],{"class":591},[586,9421,9422],{"class":612},"https://upload.wikimedia.org/wikipedia/commons/f/f0/Cyanistes_caeruleus_Oulu_20150516.JPG",[586,9424,755],{"class":591},[586,9426,9428,9431,9433,9435,9437],{"class":9427,"line":579},[588,622],[586,9429,9430],{"class":599},"      :scale",[586,9432,606],{"class":591},[586,9434,609],{"class":591},[586,9436,3347],{"class":612},[586,9438,755],{"class":591},[586,9440,9441],{"class":588,"line":580},[586,9442,2520],{"class":591},[586,9444,9445,9447,9449],{"class":588,"line":581},[586,9446,807],{"class":591},[586,9448,717],{"class":595},[586,9450,618],{"class":591},[586,9452,9453,9455,9457],{"class":588,"line":794},[586,9454,689],{"class":591},[586,9456,706],{"class":595},[586,9458,618],{"class":591},[568,9460,944],{"id":943},[822,9462,9463],{},[504,9464,9465,9467],{},[542,9466,9284],{}," is a THREE.Mesh and most Mesh attributes can be used as props on the component.",[946,9469,9470,9480],{},[949,9471,9472],{},[952,9473,9474,9476,9478],{},[955,9475,1911],{"align":957},[955,9477,961],{"align":957},[955,9479,964],{},[966,9481,9482,9496,9513,9528,9542,9559,9573,9592,9610,9627,9647,9659],{},[952,9483,9484,9489,9492],{},[971,9485,9486],{"align":957},[542,9487,9488],{},"segments",[971,9490,9491],{"align":957},"Number of divisions in the default geometry.",[971,9493,9494],{},[542,9495,1803],{},[952,9497,9498,9503,9509],{},[971,9499,9500],{"align":957},[542,9501,9502],{},"scale",[971,9504,9505,9506],{"align":957},"Scale of the geometry. ",[542,9507,9508],{},"number | [number, number]",[971,9510,9511],{},[542,9512,1803],{},[952,9514,9515,9520,9523],{},[971,9516,9517],{"align":957},[542,9518,9519],{},"color",[971,9521,9522],{"align":957},"Color multiplied into the image texture.",[971,9524,9525],{},[542,9526,9527],{},"'white'",[952,9529,9530,9535,9538],{},[971,9531,9532],{"align":957},[542,9533,9534],{},"zoom",[971,9536,9537],{"align":957},"Shrinks or enlarges the image texture.",[971,9539,9540],{},[542,9541,1803],{},[952,9543,9544,9549,9555],{},[971,9545,9546],{"align":957},[542,9547,9548],{},"radius",[971,9550,9551,9552,9554],{"align":957},"Border radius applied to the image texture. (Intended for rectangular geometries. Use with ",[542,9553,8706],{},".)",[971,9556,9557],{},[542,9558,1137],{},[952,9560,9561,9566,9569],{},[971,9562,9563],{"align":957},[542,9564,9565],{},"grayscale",[971,9567,9568],{"align":957},"Power of grayscale effect. 0 is off. 1 is full grayscale.",[971,9570,9571],{},[542,9572,1137],{},[952,9574,9575,9580,9588],{},[971,9576,9577],{"align":957},[542,9578,9579],{},"toneMapped",[971,9581,9582,9583],{"align":957},"Whether this material is tone mapped according to the renderers toneMapping settings. ",[547,9584,9587],{"href":9585,"rel":9586},"https://threejs.org/docs/?q=material#api/en/materials/Material.toneMapped",[551],"See THREE.material.tonemapped",[971,9589,9590],{},[542,9591,1112],{},[952,9593,9594,9598,9606],{},[971,9595,9596],{"align":957},[542,9597,8706],{},[971,9599,9600,9601],{"align":957},"Whether the image material should be transparent. ",[547,9602,9605],{"href":9603,"rel":9604},"https://threejs.org/docs/?q=material#api/en/materials/Material.transparent",[551],"See THREE.material.transparent",[971,9607,9608],{},[542,9609,1152],{},[952,9611,9612,9617,9623],{},[971,9613,9614],{"align":957},[542,9615,9616],{},"opacity",[971,9618,9619,9620],{"align":957},"Opacity of the image material. ",[547,9621,9605],{"href":9603,"rel":9622},[551],[971,9624,9625],{},[542,9626,1803],{},[952,9628,9629,9634,9642],{},[971,9630,9631],{"align":957},[542,9632,9633],{},"side",[971,9635,9636,9637],{"align":957},"THREE.Side of the image material. ",[547,9638,9641],{"href":9639,"rel":9640},"https://threejs.org/docs/?q=material#api/en/materials/Material.side",[551],"See THREE.material.side",[971,9643,9644],{},[542,9645,9646],{},"FrontSide",[952,9648,9649,9654,9657],{},[971,9650,9651],{"align":957},[542,9652,9653],{},"texture",[971,9655,9656],{"align":957},"Image texture to display on the geometry.",[971,9658],{},[952,9660,9661,9666,9669],{},[971,9662,9663],{"align":957},[542,9664,9665],{},"url",[971,9667,9668],{"align":957},"Image URL to load and display on the geometry.",[971,9670],{},[568,9672,8837],{"id":8836},[504,9674,9675,9676,9678,9679,9682,9683,9685,9686,9689,9690,6576,9693,1540],{},"By default, images loaded via the ",[542,9677,9665],{}," prop use the renderer’s output color space. For advanced control, pass a ",[542,9680,9681],{},"THREE.Texture"," via the ",[542,9684,9653],{}," prop and set its ",[542,9687,9688],{},"colorSpace"," (e.g., ",[542,9691,9692],{},"THREE.SRGBColorSpace",[542,9694,9695],{},"THREE.LinearSRGBColorSpace",[572,9697,9699],{"className":574,"code":9698,"language":582,"meta":512,"style":512},"\u003Cscript setup>\nimport { useTexture } from '@tresjs/cientos'\nimport { SRGBColorSpace } from 'three'\n\nconst { state } = useTexture(URL)\nwatch(state, (texture) => {\n  texture.colorSpace = SRGBColorSpace // assign a custom color space\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CImage :texture=\"texture\" />\n\u003C/template>\n",[542,9700,9701,9711,9730,9749,9753,9771,9792,9809,9815,9823,9827,9835,9854],{"__ignoreMap":512},[586,9702,9703,9705,9707,9709],{"class":588,"line":513},[586,9704,592],{"class":591},[586,9706,596],{"class":595},[586,9708,600],{"class":599},[586,9710,618],{"class":591},[586,9712,9713,9715,9717,9720,9722,9724,9726,9728],{"class":588,"line":514},[586,9714,626],{"class":625},[586,9716,629],{"class":591},[586,9718,9719],{"class":632}," useTexture",[586,9721,636],{"class":591},[586,9723,639],{"class":625},[586,9725,642],{"class":591},[586,9727,645],{"class":612},[586,9729,648],{"class":591},[586,9731,9732,9734,9736,9739,9741,9743,9745,9747],{"class":588,"line":651},[586,9733,626],{"class":625},[586,9735,629],{"class":591},[586,9737,9738],{"class":632}," SRGBColorSpace",[586,9740,636],{"class":591},[586,9742,639],{"class":625},[586,9744,642],{"class":591},[586,9746,4868],{"class":612},[586,9748,648],{"class":591},[586,9750,9751],{"class":588,"line":657},[586,9752,654],{"emptyLinePlaceholder":520},[586,9754,9755,9757,9759,9762,9764,9766,9768],{"class":588,"line":686},[586,9756,660],{"class":599},[586,9758,629],{"class":591},[586,9760,9761],{"class":632}," state ",[586,9763,2998],{"class":591},[586,9765,2317],{"class":591},[586,9767,9719],{"class":668},[586,9769,9770],{"class":632},"(URL)\n",[586,9772,9773,9776,9779,9781,9783,9785,9788,9790],{"class":588,"line":696},[586,9774,9775],{"class":668},"watch",[586,9777,9778],{"class":632},"(state",[586,9780,1646],{"class":591},[586,9782,2272],{"class":591},[586,9784,9653],{"class":2244},[586,9786,9787],{"class":591},")",[586,9789,7080],{"class":599},[586,9791,2264],{"class":591},[586,9793,9794,9797,9799,9801,9803,9805],{"class":588,"line":701},[586,9795,9796],{"class":632},"  texture",[586,9798,832],{"class":591},[586,9800,9688],{"class":632},[586,9802,2317],{"class":591},[586,9804,9738],{"class":632},[586,9806,9808],{"class":9807},"sHwdD"," // assign a custom color space\n",[586,9810,9811,9813],{"class":588,"line":711},[586,9812,2998],{"class":591},[586,9814,683],{"class":632},[586,9816,9817,9819,9821],{"class":588,"line":722},[586,9818,689],{"class":591},[586,9820,596],{"class":595},[586,9822,618],{"class":591},[586,9824,9825],{"class":588,"line":577},[586,9826,654],{"emptyLinePlaceholder":520},[586,9828,9829,9831,9833],{"class":588,"line":578},[586,9830,592],{"class":591},[586,9832,706],{"class":595},[586,9834,618],{"class":591},[586,9836,9837,9839,9841,9844,9846,9848,9850,9852],{"class":588,"line":579},[586,9838,714],{"class":591},[586,9840,445],{"class":595},[586,9842,9843],{"class":599}," :texture",[586,9845,606],{"class":591},[586,9847,609],{"class":591},[586,9849,9653],{"class":612},[586,9851,609],{"class":591},[586,9853,1709],{"class":591},[586,9855,9856,9858,9860],{"class":588,"line":580},[586,9857,689],{"class":591},[586,9859,706],{"class":595},[586,9861,618],{"class":591},[1558,9863,9864],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":512,"searchDepth":513,"depth":514,"links":9866},[9867,9868,9869],{"id":570,"depth":514,"text":15},{"id":943,"depth":514,"text":944},{"id":8836,"depth":514,"text":8837},"Display image textures with shader-based effects.",{},{"title":445,"description":9870},"4od8nUGu4H2ZuIKNeGIRfZI_XYDuFyan8Fl4Vo8-Yys",{"id":9875,"title":449,"body":9876,"description":10675,"extension":517,"links":518,"meta":10676,"navigation":520,"path":450,"seo":10677,"stem":451,"__hash__":10678},"docs/2.api/9.objects/marching-cubes.md",{"type":501,"value":9877,"toc":10669},[9878,9883,9894,9897,9922,9924,10480,10482,10553,10557,10603,10607,10666],[534,9879,9880],{},[9881,9882],"objects-marching-cubes",{},[504,9884,9885,9888,9889,832],{},[542,9886,9887],{},"\u003CMarchingCubes />"," is a wrapper around ",[547,9890,9893],{"href":9891,"rel":9892},"https://threejs.org/examples/#webgl_marchingcubes",[551],"THREE's Marching Cubes",[504,9895,9896],{},"It includes 3 components:",[558,9898,9899,9912,9917],{},[561,9900,9901,9903,9904,9907,9908,9911],{},[542,9902,9887],{}," – container element for ",[542,9905,9906],{},"\u003CMarchingCube />","s and ",[542,9909,9910],{},"\u003CMarchingPlane />","s",[561,9913,9914,9916],{},[542,9915,9906],{}," - an individual metaball",[561,9918,9919,9921],{},[542,9920,9910],{}," – optional bounding plane that interacts with the metaballs",[568,9923,15],{"id":570},[572,9925,9928],{"className":574,"code":9926,"highlights":9927,"language":582,"meta":512,"style":512},"\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",[514,794,804,814,1864,1885,1894,2439,2444,2044],[542,9929,9930,9950,9984,10002,10026,10030,10065,10128,10136,10140,10148,10179,10187,10195,10199,10231,10252,10260,10274,10288,10302,10307,10363,10372,10376,10385,10425,10464,10472],{"__ignoreMap":512},[586,9931,9932,9934,9936,9938,9940,9942,9944,9946,9948],{"class":588,"line":513},[586,9933,592],{"class":591},[586,9935,596],{"class":595},[586,9937,600],{"class":599},[586,9939,603],{"class":599},[586,9941,606],{"class":591},[586,9943,609],{"class":591},[586,9945,613],{"class":612},[586,9947,609],{"class":591},[586,9949,618],{"class":591},[586,9951,9953,9955,9957,9960,9962,9965,9967,9970,9972,9974,9976,9978,9980,9982],{"class":9952,"line":514},[588,622],[586,9954,626],{"class":625},[586,9956,629],{"class":591},[586,9958,9959],{"class":632}," MarchingCube",[586,9961,1646],{"class":591},[586,9963,9964],{"class":632}," MarchingCubes",[586,9966,1646],{"class":591},[586,9968,9969],{"class":632}," MarchingPlane",[586,9971,1646],{"class":591},[586,9973,1649],{"class":632},[586,9975,636],{"class":591},[586,9977,639],{"class":625},[586,9979,642],{"class":591},[586,9981,645],{"class":612},[586,9983,648],{"class":591},[586,9985,9986,9988,9990,9992,9994,9996,9998,10000],{"class":588,"line":651},[586,9987,626],{"class":625},[586,9989,629],{"class":591},[586,9991,2125],{"class":632},[586,9993,636],{"class":591},[586,9995,639],{"class":625},[586,9997,642],{"class":591},[586,9999,2114],{"class":612},[586,10001,648],{"class":591},[586,10003,10004,10006,10008,10011,10013,10016,10018,10020,10022,10024],{"class":588,"line":657},[586,10005,626],{"class":625},[586,10007,629],{"class":591},[586,10009,10010],{"class":632}," NoToneMapping",[586,10012,1646],{"class":591},[586,10014,10015],{"class":632}," Vector3",[586,10017,636],{"class":591},[586,10019,639],{"class":625},[586,10021,642],{"class":591},[586,10023,4868],{"class":612},[586,10025,648],{"class":591},[586,10027,10028],{"class":588,"line":686},[586,10029,654],{"emptyLinePlaceholder":520},[586,10031,10032,10034,10037,10039,10041,10043,10046,10048,10050,10052,10055,10058,10060,10062],{"class":588,"line":696},[586,10033,660],{"class":599},[586,10035,10036],{"class":632}," rand ",[586,10038,606],{"class":591},[586,10040,7242],{"class":591},[586,10042,7080],{"class":599},[586,10044,10045],{"class":632}," (Math",[586,10047,832],{"class":591},[586,10049,7182],{"class":668},[586,10051,7185],{"class":632},[586,10053,10054],{"class":591},"-",[586,10056,10057],{"class":2325}," 0.5",[586,10059,2286],{"class":632},[586,10061,7188],{"class":591},[586,10063,10064],{"class":2325}," 1.25\n",[586,10066,10067,10069,10072,10074,10077,10079,10082,10084,10086,10089,10091,10094,10097,10099,10101,10104,10106,10108,10111,10114,10116,10119,10121,10123,10125],{"class":588,"line":701},[586,10068,660],{"class":599},[586,10070,10071],{"class":632}," positions ",[586,10073,606],{"class":591},[586,10075,10076],{"class":632}," Array",[586,10078,832],{"class":591},[586,10080,10081],{"class":668},"from",[586,10083,672],{"class":632},[586,10085,2289],{"class":591},[586,10087,10088],{"class":595}," length",[586,10090,2255],{"class":591},[586,10092,10093],{"class":2325}," 40",[586,10095,10096],{"class":591}," },",[586,10098,7242],{"class":591},[586,10100,7080],{"class":599},[586,10102,10103],{"class":591}," new",[586,10105,10015],{"class":668},[586,10107,672],{"class":632},[586,10109,10110],{"class":668},"rand",[586,10112,10113],{"class":632},"()",[586,10115,1646],{"class":591},[586,10117,10118],{"class":668}," rand",[586,10120,10113],{"class":632},[586,10122,1646],{"class":591},[586,10124,10118],{"class":668},[586,10126,10127],{"class":632},"()))\n",[586,10129,10130,10132,10134],{"class":588,"line":711},[586,10131,689],{"class":591},[586,10133,596],{"class":595},[586,10135,618],{"class":591},[586,10137,10138],{"class":588,"line":722},[586,10139,654],{"emptyLinePlaceholder":520},[586,10141,10142,10144,10146],{"class":588,"line":577},[586,10143,592],{"class":591},[586,10145,706],{"class":595},[586,10147,618],{"class":591},[586,10149,10150,10152,10154,10156,10158,10160,10163,10165,10168,10170,10172,10175,10177],{"class":588,"line":578},[586,10151,714],{"class":591},[586,10153,717],{"class":595},[586,10155,3717],{"class":599},[586,10157,606],{"class":591},[586,10159,609],{"class":591},[586,10161,10162],{"class":612},"#222",[586,10164,609],{"class":591},[586,10166,10167],{"class":599}," :tone-mapping",[586,10169,606],{"class":591},[586,10171,609],{"class":591},[586,10173,10174],{"class":612},"NoToneMapping",[586,10176,609],{"class":591},[586,10178,618],{"class":591},[586,10180,10181,10183,10185],{"class":588,"line":579},[586,10182,725],{"class":591},[586,10184,1694],{"class":595},[586,10186,1709],{"class":591},[586,10188,10189,10191,10193],{"class":588,"line":580},[586,10190,725],{"class":591},[586,10192,1716],{"class":595},[586,10194,1709],{"class":591},[586,10196,10197],{"class":588,"line":581},[586,10198,654],{"emptyLinePlaceholder":520},[586,10200,10202,10204,10206,10208,10210,10212,10215,10217,10220,10222,10224,10227,10229],{"class":10201,"line":794},[588,622],[586,10203,725],{"class":591},[586,10205,449],{"class":595},[586,10207,1732],{"class":599},[586,10209,606],{"class":591},[586,10211,609],{"class":591},[586,10213,10214],{"class":612},"40",[586,10216,609],{"class":591},[586,10218,10219],{"class":599}," :max-poly-count",[586,10221,606],{"class":591},[586,10223,609],{"class":591},[586,10225,10226],{"class":612},"40000",[586,10228,609],{"class":591},[586,10230,618],{"class":591},[586,10232,10234,10236,10239,10242,10244,10246,10248,10250],{"class":10233,"line":804},[588,622],[586,10235,736],{"class":591},[586,10237,10238],{"class":595},"MarchingPlane",[586,10240,10241],{"class":599}," plane-type",[586,10243,606],{"class":591},[586,10245,609],{"class":591},[586,10247,2343],{"class":612},[586,10249,609],{"class":591},[586,10251,1709],{"class":591},[586,10253,10255,10257],{"class":10254,"line":814},[588,622],[586,10256,736],{"class":591},[586,10258,10259],{"class":595},"MarchingCube\n",[586,10261,10263,10265,10267,10269,10272],{"class":10262,"line":1864},[588,622],[586,10264,5381],{"class":599},[586,10266,606],{"class":591},[586,10268,609],{"class":591},[586,10270,10271],{"class":612},"position, i of positions",[586,10273,755],{"class":591},[586,10275,10277,10279,10281,10283,10286],{"class":10276,"line":1885},[588,622],[586,10278,5396],{"class":599},[586,10280,606],{"class":591},[586,10282,609],{"class":591},[586,10284,10285],{"class":612},"i",[586,10287,755],{"class":591},[586,10289,10291,10293,10295,10297,10300],{"class":10290,"line":1894},[588,622],[586,10292,3830],{"class":599},[586,10294,606],{"class":591},[586,10296,609],{"class":591},[586,10298,10299],{"class":612},"position",[586,10301,755],{"class":591},[586,10303,10305],{"class":10304,"line":2439},[588,622],[586,10306,791],{"class":591},[586,10308,10310,10312,10315,10318,10320,10322,10325,10327,10330,10332,10334,10336,10338,10341,10343,10345,10348,10350,10353,10355,10357,10359,10361],{"class":10309,"line":2444},[588,622],[586,10311,736],{"class":591},[586,10313,10314],{"class":595},"TresMeshPhongMaterial",[586,10316,10317],{"class":599}," specular",[586,10319,606],{"class":591},[586,10321,609],{"class":591},[586,10323,10324],{"class":612},"#111111",[586,10326,609],{"class":591},[586,10328,10329],{"class":599}," :shininess",[586,10331,606],{"class":591},[586,10333,609],{"class":591},[586,10335,1096],{"class":612},[586,10337,609],{"class":591},[586,10339,10340],{"class":599}," color",[586,10342,606],{"class":591},[586,10344,609],{"class":591},[586,10346,10347],{"class":612},"#049ef4",[586,10349,609],{"class":591},[586,10351,10352],{"class":599}," :reflectivity",[586,10354,606],{"class":591},[586,10356,609],{"class":591},[586,10358,1803],{"class":612},[586,10360,609],{"class":591},[586,10362,1709],{"class":591},[586,10364,10366,10368,10370],{"class":10365,"line":2044},[588,622],[586,10367,797],{"class":591},[586,10369,449],{"class":595},[586,10371,618],{"class":591},[586,10373,10374],{"class":588,"line":2045},[586,10375,654],{"emptyLinePlaceholder":520},[586,10377,10378,10380,10383],{"class":588,"line":2046},[586,10379,725],{"class":591},[586,10381,10382],{"class":595},"TresAxesHelper",[586,10384,1709],{"class":591},[586,10386,10387,10389,10391,10393,10395,10397,10400,10402,10404,10406,10408,10410,10412,10414,10416,10418,10421,10423],{"class":588,"line":2047},[586,10388,725],{"class":591},[586,10390,1869],{"class":595},[586,10392,10340],{"class":599},[586,10394,606],{"class":591},[586,10396,609],{"class":591},[586,10398,10399],{"class":612},"#ffffff",[586,10401,609],{"class":591},[586,10403,1850],{"class":599},[586,10405,606],{"class":591},[586,10407,609],{"class":591},[586,10409,5418],{"class":612},[586,10411,609],{"class":591},[586,10413,1697],{"class":599},[586,10415,606],{"class":591},[586,10417,609],{"class":591},[586,10419,10420],{"class":612},"[0, 200, 0]",[586,10422,609],{"class":591},[586,10424,1709],{"class":591},[586,10426,10427,10429,10431,10433,10435,10437,10439,10441,10443,10445,10447,10449,10451,10453,10455,10457,10460,10462],{"class":588,"line":2517},[586,10428,725],{"class":591},[586,10430,1869],{"class":595},[586,10432,10340],{"class":599},[586,10434,606],{"class":591},[586,10436,609],{"class":591},[586,10438,10399],{"class":612},[586,10440,609],{"class":591},[586,10442,1850],{"class":599},[586,10444,606],{"class":591},[586,10446,609],{"class":591},[586,10448,5418],{"class":612},[586,10450,609],{"class":591},[586,10452,1697],{"class":599},[586,10454,606],{"class":591},[586,10456,609],{"class":591},[586,10458,10459],{"class":612},"[100, 200, 100]",[586,10461,609],{"class":591},[586,10463,1709],{"class":591},[586,10465,10466,10468,10470],{"class":588,"line":2523},[586,10467,807],{"class":591},[586,10469,717],{"class":595},[586,10471,618],{"class":591},[586,10473,10474,10476,10478],{"class":588,"line":2532},[586,10475,689],{"class":591},[586,10477,706],{"class":595},[586,10479,618],{"class":591},[568,10481,944],{"id":943},[946,10483,10484,10494],{},[949,10485,10486],{},[952,10487,10488,10490,10492],{},[955,10489,1911],{"align":957},[955,10491,961],{"align":957},[955,10493,964],{},[966,10495,10496,10510,10525,10539],{},[952,10497,10498,10502,10505],{},[971,10499,10500],{"align":957},[542,10501,1944],{},[971,10503,10504],{"align":957},"Resolution of the marching cube field. Higher resolution produces smoother meshes at the cost of performance and memory.",[971,10506,10507],{},[542,10508,10509],{},"28",[952,10511,10512,10517,10520],{},[971,10513,10514],{"align":957},[542,10515,10516],{},"maxPolyCount",[971,10518,10519],{"align":957},"Maximum number of polygons to generate.",[971,10521,10522],{},[542,10523,10524],{},"10000",[952,10526,10527,10532,10535],{},[971,10528,10529],{"align":957},[542,10530,10531],{},"enableUvs",[971,10533,10534],{"align":957},"Whether UVs are enabled.",[971,10536,10537],{},[542,10538,1152],{},[952,10540,10541,10546,10549],{},[971,10542,10543],{"align":957},[542,10544,10545],{},"enableColors",[971,10547,10548],{"align":957},"Whether vertex colors are enabled.",[971,10550,10551],{},[542,10552,1152],{},[568,10554,10556],{"id":10555},"marchingcube-props","MarchingCube Props",[946,10558,10559,10569],{},[949,10560,10561],{},[952,10562,10563,10565,10567],{},[955,10564,1911],{"align":957},[955,10566,961],{"align":957},[955,10568,964],{},[966,10570,10571,10585],{},[952,10572,10573,10578,10581],{},[971,10574,10575],{"align":957},[542,10576,10577],{},"strength",[971,10579,10580],{"align":957},"How strongly this cube affects the marching cube field.",[971,10582,10583],{},[542,10584,1857],{},[952,10586,10587,10592,10598],{},[971,10588,10589],{"align":957},[542,10590,10591],{},"subtract",[971,10593,10594,10595,10597],{"align":957},"How quickly strength moves to ",[542,10596,1137],{}," over distance.",[971,10599,10600],{},[542,10601,10602],{},"12",[568,10604,10606],{"id":10605},"marchingplane-props","MarchingPlane Props",[946,10608,10609,10619],{},[949,10610,10611],{},[952,10612,10613,10615,10617],{},[955,10614,1911],{"align":957},[955,10616,961],{"align":957},[955,10618,964],{},[966,10620,10621,10639,10652],{},[952,10622,10623,10628,10634],{},[971,10624,10625],{"align":957},[542,10626,10627],{},"planeType",[971,10629,10630,10631],{"align":957},"Which axis the plane appears on. ",[542,10632,10633],{},"'x' | 'y' | 'z'",[971,10635,10636],{},[542,10637,10638],{},"'x'",[952,10640,10641,10645,10648],{},[971,10642,10643],{"align":957},[542,10644,10577],{},[971,10646,10647],{"align":957},"How strongly this plane affects the marching cube field.",[971,10649,10650],{},[542,10651,1857],{},[952,10653,10654,10658,10662],{},[971,10655,10656],{"align":957},[542,10657,10591],{},[971,10659,10594,10660,10597],{"align":957},[542,10661,1137],{},[971,10663,10664],{},[542,10665,10602],{},[1558,10667,10668],{},"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":512,"searchDepth":513,"depth":514,"links":10670},[10671,10672,10673,10674],{"id":570,"depth":514,"text":15},{"id":943,"depth":514,"text":944},{"id":10555,"depth":514,"text":10556},{"id":10605,"depth":514,"text":10606},"Create organic blob-like shapes using metaballs.",{},{"title":449,"description":10675},"2fMta733jb31sfafa23DwIMPzUQ2f_phq7gswFmuiTw",{"id":10680,"title":453,"body":10681,"description":11978,"extension":517,"links":518,"meta":11979,"navigation":520,"path":454,"seo":11980,"stem":455,"__hash__":11981},"docs/2.api/9.objects/reflector.md",{"type":501,"value":10682,"toc":11971},[10683,10688,10703,10705,10926,10928,11016,11024,11028,11041,11649,11652,11655,11659,11968],[534,10684,10685],{},[10686,10687],"objects-reflector",{},[504,10689,1375,10690,10693,10694,10699,10700,10702],{},[542,10691,10692],{},"cientos"," package provides an abstraction of the ",[547,10695,10698],{"href":10696,"rel":10697},"https://github.com/mrdoob/three.js/blob/dev/examples/jsm/objects/Reflector.js",[551],"Reflector class",", which creates a Mesh showing a real-time reflection of your scene.  This Mesh extends from ",[542,10701,4460],{}," so all the default props can be passed as well:",[568,10704,15],{"id":570},[572,10706,10708],{"className":574,"code":10707,"language":582,"meta":512,"style":512},"\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",[542,10709,10710,10730,10749,10757,10761,10769,10783,10802,10810,10814,10822,10829,10843,10857,10871,10875,10894,10902,10910,10918],{"__ignoreMap":512},[586,10711,10712,10714,10716,10718,10720,10722,10724,10726,10728],{"class":588,"line":513},[586,10713,592],{"class":591},[586,10715,596],{"class":595},[586,10717,600],{"class":599},[586,10719,603],{"class":599},[586,10721,606],{"class":591},[586,10723,609],{"class":591},[586,10725,613],{"class":612},[586,10727,609],{"class":591},[586,10729,618],{"class":591},[586,10731,10732,10734,10736,10739,10741,10743,10745,10747],{"class":588,"line":514},[586,10733,626],{"class":625},[586,10735,629],{"class":591},[586,10737,10738],{"class":632}," Reflector",[586,10740,636],{"class":591},[586,10742,639],{"class":625},[586,10744,642],{"class":591},[586,10746,645],{"class":612},[586,10748,648],{"class":591},[586,10750,10751,10753,10755],{"class":588,"line":651},[586,10752,689],{"class":591},[586,10754,596],{"class":595},[586,10756,618],{"class":591},[586,10758,10759],{"class":588,"line":657},[586,10760,654],{"emptyLinePlaceholder":520},[586,10762,10763,10765,10767],{"class":588,"line":686},[586,10764,592],{"class":591},[586,10766,706],{"class":595},[586,10768,618],{"class":591},[586,10770,10771,10773,10775,10778,10781],{"class":588,"line":696},[586,10772,714],{"class":591},[586,10774,717],{"class":595},[586,10776,10777],{"class":599}," shadows",[586,10779,10780],{"class":599}," alpha",[586,10782,618],{"class":591},[586,10784,10785,10787,10789,10791,10793,10795,10798,10800],{"class":588,"line":701},[586,10786,725],{"class":591},[586,10788,1694],{"class":595},[586,10790,1697],{"class":599},[586,10792,606],{"class":591},[586,10794,609],{"class":591},[586,10796,10797],{"class":612},"[0, 0, 3]",[586,10799,609],{"class":591},[586,10801,1709],{"class":591},[586,10803,10804,10806,10808],{"class":588,"line":711},[586,10805,725],{"class":591},[586,10807,1716],{"class":595},[586,10809,1709],{"class":591},[586,10811,10812],{"class":588,"line":722},[586,10813,654],{"emptyLinePlaceholder":520},[586,10815,10816,10818,10820],{"class":588,"line":577},[586,10817,725],{"class":591},[586,10819,728],{"class":595},[586,10821,618],{"class":591},[586,10823,10824,10826],{"class":588,"line":578},[586,10825,736],{"class":591},[586,10827,10828],{"class":595},"Reflector\n",[586,10830,10831,10834,10836,10838,10841],{"class":588,"line":579},[586,10832,10833],{"class":599},"        :rotation",[586,10835,606],{"class":591},[586,10837,609],{"class":591},[586,10839,10840],{"class":612},"[-Math.PI * 0.5, 0, 0]",[586,10842,755],{"class":591},[586,10844,10845,10848,10850,10852,10855],{"class":588,"line":580},[586,10846,10847],{"class":599},"        :position-y",[586,10849,606],{"class":591},[586,10851,609],{"class":591},[586,10853,10854],{"class":612},"-2",[586,10856,755],{"class":591},[586,10858,10859,10862,10864,10866,10869],{"class":588,"line":581},[586,10860,10861],{"class":599},"        color",[586,10863,606],{"class":591},[586,10865,609],{"class":591},[586,10867,10868],{"class":612},"#fff",[586,10870,755],{"class":591},[586,10872,10873],{"class":588,"line":794},[586,10874,3859],{"class":591},[586,10876,10877,10879,10882,10884,10886,10888,10890,10892],{"class":588,"line":804},[586,10878,1769],{"class":591},[586,10880,10881],{"class":595},"TresCircleGeometry",[586,10883,1775],{"class":599},[586,10885,606],{"class":591},[586,10887,609],{"class":591},[586,10889,2458],{"class":612},[586,10891,609],{"class":591},[586,10893,1709],{"class":591},[586,10895,10896,10898,10900],{"class":588,"line":814},[586,10897,1823],{"class":591},[586,10899,453],{"class":595},[586,10901,618],{"class":591},[586,10903,10904,10906,10908],{"class":588,"line":1864},[586,10905,797],{"class":591},[586,10907,728],{"class":595},[586,10909,618],{"class":591},[586,10911,10912,10914,10916],{"class":588,"line":1885},[586,10913,807],{"class":591},[586,10915,717],{"class":595},[586,10917,618],{"class":591},[586,10919,10920,10922,10924],{"class":588,"line":1894},[586,10921,689],{"class":591},[586,10923,706],{"class":595},[586,10925,618],{"class":591},[568,10927,944],{"id":943},[946,10929,10930,10940],{},[949,10931,10932],{},[952,10933,10934,10936,10938],{},[955,10935,1911],{"align":957},[955,10937,961],{"align":957},[955,10939,964],{},[966,10941,10942,10954,10967,10979,10991,11003],{},[952,10943,10944,10948,10951],{},[971,10945,10946],{"align":957},[2734,10947,9519],{},[971,10949,10950],{"align":957},"The base color that's combine with the mirror effect",[971,10952,10953],{},"'#333'",[952,10955,10956,10961,10964],{},[971,10957,10958],{"align":957},[2734,10959,10960],{},"textureWidth",[971,10962,10963],{"align":957},"the width of the texture to render on the mirror",[971,10965,10966],{},"512",[952,10968,10969,10974,10977],{},[971,10970,10971],{"align":957},[2734,10972,10973],{},"textureHeight",[971,10975,10976],{"align":957},"the height of the texture to render on the mirror",[971,10978,10966],{},[952,10980,10981,10986,10989],{},[971,10982,10983],{"align":957},[2734,10984,10985],{},"clipBias",[971,10987,10988],{"align":957},"to use the clipBias property",[971,10990,1137],{},[952,10992,10993,10998,11001],{},[971,10994,10995],{"align":957},[2734,10996,10997],{},"multisample",[971,10999,11000],{"align":957},"how many samplers will be render",[971,11002,3822],{},[952,11004,11005,11010,11013],{},[971,11006,11007],{"align":957},[2734,11008,11009],{},"shader",[971,11011,11012],{"align":957},"The texture of the smoke.",[971,11014,11015],{},"Reflector.ReflectorShader",[822,11017,11018],{},[504,11019,11020,11021,11023],{},"All the props except the ",[542,11022,9519],{},", are not reactive",[568,11025,11027],{"id":11026},"custom-mirror-effect","Custom mirror effect",[504,11029,11030,11031,6628,11034,6631,11037,11040],{},"You can provide your own shader by passing a full shader object with ",[542,11032,11033],{},"uniforms",[542,11035,11036],{},"vertexShader",[542,11038,11039],{},"fragmentShader",". The example below adds animated circular ripples emanating from the center of the surface, while preserving the color tint:",[572,11042,11044],{"className":574,"code":11043,"language":582,"meta":512,"style":512},"\u003Cscript setup lang=\"ts\">\nimport { Reflector } from '@tresjs/cientos'\nimport { useLoop } from '@tresjs/core'\nimport { shallowRef } from 'vue'\n\nconst reflectorRef = shallowRef()\n\nconst customShader = {\n  uniforms: {\n    color: { value: null },\n    tDiffuse: { value: null },\n    textureMatrix: { value: null },\n    time: { value: 0 },\n  },\n  vertexShader: /* glsl */`\n    uniform mat4 textureMatrix;\n    varying vec4 vUv;\n    varying vec2 vPos;\n    void main() {\n      vUv = textureMatrix * vec4(position, 1.0);\n      vPos = position.xy;\n      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n    }`,\n  fragmentShader: /* glsl */`\n    uniform vec3 color;\n    uniform sampler2D tDiffuse;\n    uniform float time;\n    varying vec4 vUv;\n    varying vec2 vPos;\n    float blendOverlay(float base, float blend) {\n      return(base \u003C 0.5 ? (2.0 * base * blend) : (1.0 - 2.0 * (1.0 - base) * (1.0 - blend)));\n    }\n    vec3 blendOverlay(vec3 base, vec3 blend) {\n      return vec3(blendOverlay(base.r, blend.r), blendOverlay(base.g, blend.g), blendOverlay(base.b, blend.b));\n    }\n    void main() {\n      float dist = length(vPos);\n      float wave = sin(dist * 6.0 - time * 4.0) * 0.02;\n      vec2 dir = dist > 0.001 ? normalize(vPos) : vec2(0.0);\n      vec4 distortedUv = vUv + vec4(dir * wave, 0.0, 0.0);\n      vec4 base = texture2DProj(tDiffuse, distortedUv);\n      gl_FragColor = vec4(blendOverlay(base.rgb, color), 1.0);\n      #include \u003Ctonemapping_fragment>\n      #include \u003Ccolorspace_fragment>\n    }`,\n}\n\nconst { onBeforeRender } = useLoop()\nonBeforeRender(({ elapsed }) => {\n  const uniforms = reflectorRef.value?.instance?.material?.uniforms\n  if (uniforms?.time) { uniforms.time.value = elapsed }\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CReflector\n    ref=\"reflectorRef\"\n    :rotation=\"[-Math.PI * 0.5, 0, 0]\"\n    :position-y=\"-2\"\n    color=\"#fff\"\n    :shader=\"customShader\"\n  >\n    \u003CTresCircleGeometry :args=\"[10, 10]\" />\n  \u003C/Reflector>\n\u003C/template>\n",[542,11045,11046,11066,11084,11103,11121,11125,11138,11142,11153,11162,11180,11197,11214,11231,11235,11248,11253,11258,11263,11268,11273,11278,11283,11293,11304,11309,11314,11319,11323,11327,11332,11337,11342,11347,11352,11356,11360,11365,11370,11375,11380,11385,11390,11395,11400,11408,11412,11416,11433,11450,11480,11513,11519,11527,11531,11539,11545,11559,11572,11585,11597,11611,11615,11633,11641],{"__ignoreMap":512},[586,11047,11048,11050,11052,11054,11056,11058,11060,11062,11064],{"class":588,"line":513},[586,11049,592],{"class":591},[586,11051,596],{"class":595},[586,11053,600],{"class":599},[586,11055,603],{"class":599},[586,11057,606],{"class":591},[586,11059,609],{"class":591},[586,11061,613],{"class":612},[586,11063,609],{"class":591},[586,11065,618],{"class":591},[586,11067,11068,11070,11072,11074,11076,11078,11080,11082],{"class":588,"line":514},[586,11069,626],{"class":625},[586,11071,629],{"class":591},[586,11073,10738],{"class":632},[586,11075,636],{"class":591},[586,11077,639],{"class":625},[586,11079,642],{"class":591},[586,11081,645],{"class":612},[586,11083,648],{"class":591},[586,11085,11086,11088,11090,11093,11095,11097,11099,11101],{"class":588,"line":651},[586,11087,626],{"class":625},[586,11089,629],{"class":591},[586,11091,11092],{"class":632}," useLoop",[586,11094,636],{"class":591},[586,11096,639],{"class":625},[586,11098,642],{"class":591},[586,11100,2114],{"class":612},[586,11102,648],{"class":591},[586,11104,11105,11107,11109,11111,11113,11115,11117,11119],{"class":588,"line":657},[586,11106,626],{"class":625},[586,11108,629],{"class":591},[586,11110,2144],{"class":632},[586,11112,636],{"class":591},[586,11114,639],{"class":625},[586,11116,642],{"class":591},[586,11118,582],{"class":612},[586,11120,648],{"class":591},[586,11122,11123],{"class":588,"line":686},[586,11124,654],{"emptyLinePlaceholder":520},[586,11126,11127,11129,11132,11134,11136],{"class":588,"line":696},[586,11128,660],{"class":599},[586,11130,11131],{"class":632}," reflectorRef ",[586,11133,606],{"class":591},[586,11135,2144],{"class":668},[586,11137,6832],{"class":632},[586,11139,11140],{"class":588,"line":701},[586,11141,654],{"emptyLinePlaceholder":520},[586,11143,11144,11146,11149,11151],{"class":588,"line":711},[586,11145,660],{"class":599},[586,11147,11148],{"class":632}," customShader ",[586,11150,606],{"class":591},[586,11152,2264],{"class":591},[586,11154,11155,11158,11160],{"class":588,"line":722},[586,11156,11157],{"class":595},"  uniforms",[586,11159,2255],{"class":591},[586,11161,2264],{"class":591},[586,11163,11164,11167,11169,11171,11174,11176,11178],{"class":588,"line":577},[586,11165,11166],{"class":595},"    color",[586,11168,2255],{"class":591},[586,11170,629],{"class":591},[586,11172,11173],{"class":595}," value",[586,11175,2255],{"class":591},[586,11177,2189],{"class":591},[586,11179,5144],{"class":591},[586,11181,11182,11185,11187,11189,11191,11193,11195],{"class":588,"line":578},[586,11183,11184],{"class":595},"    tDiffuse",[586,11186,2255],{"class":591},[586,11188,629],{"class":591},[586,11190,11173],{"class":595},[586,11192,2255],{"class":591},[586,11194,2189],{"class":591},[586,11196,5144],{"class":591},[586,11198,11199,11202,11204,11206,11208,11210,11212],{"class":588,"line":579},[586,11200,11201],{"class":595},"    textureMatrix",[586,11203,2255],{"class":591},[586,11205,629],{"class":591},[586,11207,11173],{"class":595},[586,11209,2255],{"class":591},[586,11211,2189],{"class":591},[586,11213,5144],{"class":591},[586,11215,11216,11219,11221,11223,11225,11227,11229],{"class":588,"line":580},[586,11217,11218],{"class":595},"    time",[586,11220,2255],{"class":591},[586,11222,629],{"class":591},[586,11224,11173],{"class":595},[586,11226,2255],{"class":591},[586,11228,6770],{"class":2325},[586,11230,5144],{"class":591},[586,11232,11233],{"class":588,"line":581},[586,11234,2992],{"class":591},[586,11236,11237,11240,11242,11245],{"class":588,"line":794},[586,11238,11239],{"class":595},"  vertexShader",[586,11241,2255],{"class":591},[586,11243,11244],{"class":9807}," /* glsl */",[586,11246,11247],{"class":591},"`\n",[586,11249,11250],{"class":588,"line":804},[586,11251,11252],{"class":612},"    uniform mat4 textureMatrix;\n",[586,11254,11255],{"class":588,"line":814},[586,11256,11257],{"class":612},"    varying vec4 vUv;\n",[586,11259,11260],{"class":588,"line":1864},[586,11261,11262],{"class":612},"    varying vec2 vPos;\n",[586,11264,11265],{"class":588,"line":1885},[586,11266,11267],{"class":612},"    void main() {\n",[586,11269,11270],{"class":588,"line":1894},[586,11271,11272],{"class":612},"      vUv = textureMatrix * vec4(position, 1.0);\n",[586,11274,11275],{"class":588,"line":2439},[586,11276,11277],{"class":612},"      vPos = position.xy;\n",[586,11279,11280],{"class":588,"line":2444},[586,11281,11282],{"class":612},"      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n",[586,11284,11285,11288,11291],{"class":588,"line":2044},[586,11286,11287],{"class":612},"    }",[586,11289,11290],{"class":591},"`",[586,11292,2938],{"class":591},[586,11294,11295,11298,11300,11302],{"class":588,"line":2045},[586,11296,11297],{"class":595},"  fragmentShader",[586,11299,2255],{"class":591},[586,11301,11244],{"class":9807},[586,11303,11247],{"class":591},[586,11305,11306],{"class":588,"line":2046},[586,11307,11308],{"class":612},"    uniform vec3 color;\n",[586,11310,11311],{"class":588,"line":2047},[586,11312,11313],{"class":612},"    uniform sampler2D tDiffuse;\n",[586,11315,11316],{"class":588,"line":2517},[586,11317,11318],{"class":612},"    uniform float time;\n",[586,11320,11321],{"class":588,"line":2523},[586,11322,11257],{"class":612},[586,11324,11325],{"class":588,"line":2532},[586,11326,11262],{"class":612},[586,11328,11329],{"class":588,"line":2553},[586,11330,11331],{"class":612},"    float blendOverlay(float base, float blend) {\n",[586,11333,11334],{"class":588,"line":2558},[586,11335,11336],{"class":612},"      return(base \u003C 0.5 ? (2.0 * base * blend) : (1.0 - 2.0 * (1.0 - base) * (1.0 - blend)));\n",[586,11338,11339],{"class":588,"line":2566},[586,11340,11341],{"class":612},"    }\n",[586,11343,11344],{"class":588,"line":2581},[586,11345,11346],{"class":612},"    vec3 blendOverlay(vec3 base, vec3 blend) {\n",[586,11348,11349],{"class":588,"line":2596},[586,11350,11351],{"class":612},"      return vec3(blendOverlay(base.r, blend.r), blendOverlay(base.g, blend.g), blendOverlay(base.b, blend.b));\n",[586,11353,11354],{"class":588,"line":2601},[586,11355,11341],{"class":612},[586,11357,11358],{"class":588,"line":2610},[586,11359,11267],{"class":612},[586,11361,11362],{"class":588,"line":2615},[586,11363,11364],{"class":612},"      float dist = length(vPos);\n",[586,11366,11367],{"class":588,"line":2623},[586,11368,11369],{"class":612},"      float wave = sin(dist * 6.0 - time * 4.0) * 0.02;\n",[586,11371,11372],{"class":588,"line":2636},[586,11373,11374],{"class":612},"      vec2 dir = dist > 0.001 ? normalize(vPos) : vec2(0.0);\n",[586,11376,11377],{"class":588,"line":2651},[586,11378,11379],{"class":612},"      vec4 distortedUv = vUv + vec4(dir * wave, 0.0, 0.0);\n",[586,11381,11382],{"class":588,"line":2657},[586,11383,11384],{"class":612},"      vec4 base = texture2DProj(tDiffuse, distortedUv);\n",[586,11386,11387],{"class":588,"line":2678},[586,11388,11389],{"class":612},"      gl_FragColor = vec4(blendOverlay(base.rgb, color), 1.0);\n",[586,11391,11392],{"class":588,"line":2688},[586,11393,11394],{"class":612},"      #include \u003Ctonemapping_fragment>\n",[586,11396,11397],{"class":588,"line":2697},[586,11398,11399],{"class":612},"      #include \u003Ccolorspace_fragment>\n",[586,11401,11402,11404,11406],{"class":588,"line":2706},[586,11403,11287],{"class":612},[586,11405,11290],{"class":591},[586,11407,2938],{"class":591},[586,11409,11410],{"class":588,"line":5356},[586,11411,2357],{"class":591},[586,11413,11414],{"class":588,"line":5365},[586,11415,654],{"emptyLinePlaceholder":520},[586,11417,11418,11420,11422,11425,11427,11429,11431],{"class":588,"line":5370},[586,11419,660],{"class":599},[586,11421,629],{"class":591},[586,11423,11424],{"class":632}," onBeforeRender ",[586,11426,2998],{"class":591},[586,11428,2317],{"class":591},[586,11430,11092],{"class":668},[586,11432,6832],{"class":632},[586,11434,11435,11438,11440,11442,11444,11446,11448],{"class":588,"line":5378},[586,11436,11437],{"class":668},"onBeforeRender",[586,11439,672],{"class":632},[586,11441,2241],{"class":591},[586,11443,2245],{"class":2244},[586,11445,2261],{"class":591},[586,11447,7080],{"class":599},[586,11449,2264],{"class":591},[586,11451,11452,11454,11457,11459,11462,11464,11466,11469,11471,11473,11475,11477],{"class":588,"line":5393},[586,11453,7087],{"class":599},[586,11455,11456],{"class":632}," uniforms",[586,11458,2317],{"class":591},[586,11460,11461],{"class":632}," reflectorRef",[586,11463,832],{"class":591},[586,11465,2283],{"class":632},[586,11467,11468],{"class":591},"?.",[586,11470,8773],{"class":632},[586,11472,11468],{"class":591},[586,11474,6519],{"class":632},[586,11476,11468],{"class":591},[586,11478,11479],{"class":632},"uniforms\n",[586,11481,11482,11484,11486,11488,11490,11493,11495,11497,11499,11501,11503,11505,11507,11509,11511],{"class":588,"line":5408},[586,11483,2269],{"class":625},[586,11485,2272],{"class":595},[586,11487,11033],{"class":632},[586,11489,11468],{"class":591},[586,11491,11492],{"class":632},"time",[586,11494,2286],{"class":595},[586,11496,2289],{"class":591},[586,11498,11456],{"class":632},[586,11500,832],{"class":591},[586,11502,11492],{"class":632},[586,11504,832],{"class":591},[586,11506,2283],{"class":632},[586,11508,2317],{"class":591},[586,11510,2245],{"class":632},[586,11512,2295],{"class":591},[586,11514,11515,11517],{"class":588,"line":5423},[586,11516,2998],{"class":591},[586,11518,683],{"class":632},[586,11520,11521,11523,11525],{"class":588,"line":5438},[586,11522,689],{"class":591},[586,11524,596],{"class":595},[586,11526,618],{"class":591},[586,11528,11529],{"class":588,"line":5452},[586,11530,654],{"emptyLinePlaceholder":520},[586,11532,11533,11535,11537],{"class":588,"line":5467},[586,11534,592],{"class":591},[586,11536,706],{"class":595},[586,11538,618],{"class":591},[586,11540,11541,11543],{"class":588,"line":5472},[586,11542,714],{"class":591},[586,11544,10828],{"class":595},[586,11546,11547,11550,11552,11554,11557],{"class":588,"line":5503},[586,11548,11549],{"class":599},"    ref",[586,11551,606],{"class":591},[586,11553,609],{"class":591},[586,11555,11556],{"class":612},"reflectorRef",[586,11558,755],{"class":591},[586,11560,11561,11564,11566,11568,11570],{"class":588,"line":5537},[586,11562,11563],{"class":599},"    :rotation",[586,11565,606],{"class":591},[586,11567,609],{"class":591},[586,11569,10840],{"class":612},[586,11571,755],{"class":591},[586,11573,11574,11577,11579,11581,11583],{"class":588,"line":5546},[586,11575,11576],{"class":599},"    :position-y",[586,11578,606],{"class":591},[586,11580,609],{"class":591},[586,11582,10854],{"class":612},[586,11584,755],{"class":591},[586,11586,11587,11589,11591,11593,11595],{"class":588,"line":5556},[586,11588,11166],{"class":599},[586,11590,606],{"class":591},[586,11592,609],{"class":591},[586,11594,10868],{"class":612},[586,11596,755],{"class":591},[586,11598,11599,11602,11604,11606,11609],{"class":588,"line":5566},[586,11600,11601],{"class":599},"    :shader",[586,11603,606],{"class":591},[586,11605,609],{"class":591},[586,11607,11608],{"class":612},"customShader",[586,11610,755],{"class":591},[586,11612,11613],{"class":588,"line":4716},[586,11614,4615],{"class":591},[586,11616,11617,11619,11621,11623,11625,11627,11629,11631],{"class":588,"line":4717},[586,11618,725],{"class":591},[586,11620,10881],{"class":595},[586,11622,1775],{"class":599},[586,11624,606],{"class":591},[586,11626,609],{"class":591},[586,11628,2458],{"class":612},[586,11630,609],{"class":591},[586,11632,1709],{"class":591},[586,11634,11635,11637,11639],{"class":588,"line":4718},[586,11636,807],{"class":591},[586,11638,453],{"class":595},[586,11640,618],{"class":591},[586,11642,11643,11645,11647],{"class":588,"line":4719},[586,11644,689],{"class":591},[586,11646,706],{"class":595},[586,11648,618],{"class":591},[504,11650,11651],{},"The Reflector shader use the following configuration by default:",[504,11653,11654],{},"You can extend, modify or just play with them",[910,11656,11658],{"id":11657},"default-shader","Default shader",[572,11660,11664],{"className":11661,"code":11662,"language":11663,"meta":512,"style":512},"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",[542,11665,11666,11677,11693,11701,11709,11719,11724,11732,11740,11744,11752,11760,11764,11768,11778,11783,11788,11792,11797,11802,11806,11811,11816,11821,11825,11830,11834,11843,11853,11858,11863,11867,11871,11876,11880,11885,11890,11895,11899,11904,11909,11913,11917,11921,11926,11930,11935,11940,11944,11949,11954,11960,11964],{"__ignoreMap":512},[586,11667,11668,11670,11673,11675],{"class":588,"line":513},[586,11669,660],{"class":599},[586,11671,11672],{"class":632}," shader ",[586,11674,606],{"class":591},[586,11676,2264],{"class":591},[586,11678,11679,11682,11684,11686,11689,11691],{"class":588,"line":514},[586,11680,11681],{"class":595},"  name",[586,11683,2255],{"class":591},[586,11685,642],{"class":591},[586,11687,11688],{"class":612},"ReflectorShader",[586,11690,675],{"class":591},[586,11692,2938],{"class":591},[586,11694,11695,11697,11699],{"class":588,"line":651},[586,11696,11157],{"class":595},[586,11698,2255],{"class":591},[586,11700,2264],{"class":591},[586,11702,11703,11705,11707],{"class":588,"line":657},[586,11704,11166],{"class":595},[586,11706,2255],{"class":591},[586,11708,2264],{"class":591},[586,11710,11711,11714,11716],{"class":588,"line":686},[586,11712,11713],{"class":595},"      value",[586,11715,2255],{"class":591},[586,11717,11718],{"class":591}," null\n",[586,11720,11721],{"class":588,"line":696},[586,11722,11723],{"class":591},"    },\n",[586,11725,11726,11728,11730],{"class":588,"line":701},[586,11727,11184],{"class":595},[586,11729,2255],{"class":591},[586,11731,2264],{"class":591},[586,11733,11734,11736,11738],{"class":588,"line":711},[586,11735,11713],{"class":595},[586,11737,2255],{"class":591},[586,11739,11718],{"class":591},[586,11741,11742],{"class":588,"line":722},[586,11743,11723],{"class":591},[586,11745,11746,11748,11750],{"class":588,"line":577},[586,11747,11201],{"class":595},[586,11749,2255],{"class":591},[586,11751,2264],{"class":591},[586,11753,11754,11756,11758],{"class":588,"line":578},[586,11755,11713],{"class":595},[586,11757,2255],{"class":591},[586,11759,11718],{"class":591},[586,11761,11762],{"class":588,"line":579},[586,11763,11341],{"class":591},[586,11765,11766],{"class":588,"line":580},[586,11767,2992],{"class":591},[586,11769,11770,11772,11774,11776],{"class":588,"line":581},[586,11771,11239],{"class":595},[586,11773,2255],{"class":591},[586,11775,11244],{"class":9807},[586,11777,11247],{"class":591},[586,11779,11780],{"class":588,"line":794},[586,11781,11782],{"class":612},"  uniform mat4 textureMatrix;\n",[586,11784,11785],{"class":588,"line":804},[586,11786,11787],{"class":612},"  varying vec4 vUv;\n",[586,11789,11790],{"class":588,"line":814},[586,11791,654],{"emptyLinePlaceholder":520},[586,11793,11794],{"class":588,"line":1864},[586,11795,11796],{"class":612},"  #include \u003Ccommon>\n",[586,11798,11799],{"class":588,"line":1885},[586,11800,11801],{"class":612},"  #include \u003Clogdepthbuf_pars_vertex>\n",[586,11803,11804],{"class":588,"line":1894},[586,11805,654],{"emptyLinePlaceholder":520},[586,11807,11808],{"class":588,"line":2439},[586,11809,11810],{"class":612},"  void main() {\n",[586,11812,11813],{"class":588,"line":2444},[586,11814,11815],{"class":612},"    vUv = textureMatrix * vec4( position, 1.0 );\n",[586,11817,11818],{"class":588,"line":2044},[586,11819,11820],{"class":612},"    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n",[586,11822,11823],{"class":588,"line":2045},[586,11824,654],{"emptyLinePlaceholder":520},[586,11826,11827],{"class":588,"line":2046},[586,11828,11829],{"class":612},"    #include \u003Clogdepthbuf_vertex>\n",[586,11831,11832],{"class":588,"line":2047},[586,11833,654],{"emptyLinePlaceholder":520},[586,11835,11836,11839,11841],{"class":588,"line":2517},[586,11837,11838],{"class":612},"  }",[586,11840,11290],{"class":591},[586,11842,2938],{"class":591},[586,11844,11845,11847,11849,11851],{"class":588,"line":2523},[586,11846,11297],{"class":595},[586,11848,2255],{"class":591},[586,11850,11244],{"class":9807},[586,11852,11247],{"class":591},[586,11854,11855],{"class":588,"line":2532},[586,11856,11857],{"class":612},"  uniform vec3 color;\n",[586,11859,11860],{"class":588,"line":2553},[586,11861,11862],{"class":612},"  uniform sampler2D tDiffuse;\n",[586,11864,11865],{"class":588,"line":2558},[586,11866,11787],{"class":612},[586,11868,11869],{"class":588,"line":2566},[586,11870,654],{"emptyLinePlaceholder":520},[586,11872,11873],{"class":588,"line":2581},[586,11874,11875],{"class":612},"  #include \u003Clogdepthbuf_pars_fragment>\n",[586,11877,11878],{"class":588,"line":2596},[586,11879,654],{"emptyLinePlaceholder":520},[586,11881,11882],{"class":588,"line":2601},[586,11883,11884],{"class":612},"  float blendOverlay( float base, float blend ) {\n",[586,11886,11887],{"class":588,"line":2610},[586,11888,11889],{"class":612},"    return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n",[586,11891,11892],{"class":588,"line":2615},[586,11893,11894],{"class":612},"  }\n",[586,11896,11897],{"class":588,"line":2623},[586,11898,654],{"emptyLinePlaceholder":520},[586,11900,11901],{"class":588,"line":2636},[586,11902,11903],{"class":612},"  vec3 blendOverlay( vec3 base, vec3 blend ) {\n",[586,11905,11906],{"class":588,"line":2651},[586,11907,11908],{"class":612},"    return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n",[586,11910,11911],{"class":588,"line":2657},[586,11912,11894],{"class":612},[586,11914,11915],{"class":588,"line":2678},[586,11916,654],{"emptyLinePlaceholder":520},[586,11918,11919],{"class":588,"line":2688},[586,11920,11810],{"class":612},[586,11922,11923],{"class":588,"line":2697},[586,11924,11925],{"class":612},"    #include \u003Clogdepthbuf_fragment>\n",[586,11927,11928],{"class":588,"line":2706},[586,11929,654],{"emptyLinePlaceholder":520},[586,11931,11932],{"class":588,"line":5356},[586,11933,11934],{"class":612},"    vec4 base = texture2DProj( tDiffuse, vUv );\n",[586,11936,11937],{"class":588,"line":5365},[586,11938,11939],{"class":612},"    gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n",[586,11941,11942],{"class":588,"line":5370},[586,11943,654],{"emptyLinePlaceholder":520},[586,11945,11946],{"class":588,"line":5378},[586,11947,11948],{"class":612},"    #include \u003Ctonemapping_fragment>\n",[586,11950,11951],{"class":588,"line":5393},[586,11952,11953],{"class":612},"    #include \u003Ccolorspace_fragment>\n",[586,11955,11956,11958],{"class":588,"line":5408},[586,11957,11838],{"class":612},[586,11959,11247],{"class":591},[586,11961,11962],{"class":588,"line":5423},[586,11963,654],{"emptyLinePlaceholder":520},[586,11965,11966],{"class":588,"line":5438},[586,11967,2357],{"class":591},[1558,11969,11970],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":512,"searchDepth":513,"depth":514,"links":11972},[11973,11974,11975],{"id":570,"depth":514,"text":15},{"id":943,"depth":514,"text":944},{"id":11026,"depth":514,"text":11027,"children":11976},[11977],{"id":11657,"depth":651,"text":11658},"Create real-time reflections of your scene.",{},{"title":453,"description":11978},"NJEaFmV8_JnwGN0OZhU-3XOYAdVvh14PeqjaOc-DkDE",{"id":11983,"title":457,"body":11984,"description":13152,"extension":517,"links":518,"meta":13153,"navigation":520,"path":458,"seo":13154,"stem":459,"__hash__":13155},"docs/2.api/9.objects/refractor.md",{"type":501,"value":11985,"toc":13145},[11986,11991,12004,12006,12255,12257,12351,12359,12363,12371,12908,12911,12913,13142],[534,11987,11988],{},[11989,11990],"objects-refractor",{},[504,11992,1375,11993,10693,11995,12000,12001,12003],{},[542,11994,10692],{},[547,11996,11999],{"href":11997,"rel":11998},"https://github.com/mrdoob/three.js/blob/dev/examples/jsm/objects/Refractor.js",[551],"Refractor class",", which creates a Mesh that renders what is behind it with a refractive distortion effect — useful for glass panels, water surfaces, and other transmissive materials. This Mesh extends from ",[542,12002,4460],{}," so all the default props can be passed as well.",[568,12005,15],{"id":570},[572,12007,12009],{"className":574,"code":12008,"language":582,"meta":512,"style":512},"\u003Cscript setup lang=\"ts\">\nimport { Refractor } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas shadows alpha>\n    \u003CTresPerspectiveCamera :position=\"[0, 2, 8]\" />\n    \u003COrbitControls />\n\n    \u003C!-- Place objects behind the refracting plane -->\n    \u003CTresMesh :position=\"[-2, 0, -2]\">\n      \u003CTresTorusKnotGeometry />\n      \u003CTresMeshStandardMaterial color=\"hotpink\" />\n    \u003C/TresMesh>\n\n    \u003CSuspense>\n      \u003CRefractor color=\"#9ec8d4\">\n        \u003CTresPlaneGeometry :args=\"[8, 5]\" />\n      \u003C/Refractor>\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n",[542,12010,12011,12031,12050,12058,12062,12070,12082,12101,12109,12113,12118,12137,12146,12165,12173,12177,12185,12204,12223,12231,12239,12247],{"__ignoreMap":512},[586,12012,12013,12015,12017,12019,12021,12023,12025,12027,12029],{"class":588,"line":513},[586,12014,592],{"class":591},[586,12016,596],{"class":595},[586,12018,600],{"class":599},[586,12020,603],{"class":599},[586,12022,606],{"class":591},[586,12024,609],{"class":591},[586,12026,613],{"class":612},[586,12028,609],{"class":591},[586,12030,618],{"class":591},[586,12032,12033,12035,12037,12040,12042,12044,12046,12048],{"class":588,"line":514},[586,12034,626],{"class":625},[586,12036,629],{"class":591},[586,12038,12039],{"class":632}," Refractor",[586,12041,636],{"class":591},[586,12043,639],{"class":625},[586,12045,642],{"class":591},[586,12047,645],{"class":612},[586,12049,648],{"class":591},[586,12051,12052,12054,12056],{"class":588,"line":651},[586,12053,689],{"class":591},[586,12055,596],{"class":595},[586,12057,618],{"class":591},[586,12059,12060],{"class":588,"line":657},[586,12061,654],{"emptyLinePlaceholder":520},[586,12063,12064,12066,12068],{"class":588,"line":686},[586,12065,592],{"class":591},[586,12067,706],{"class":595},[586,12069,618],{"class":591},[586,12071,12072,12074,12076,12078,12080],{"class":588,"line":696},[586,12073,714],{"class":591},[586,12075,717],{"class":595},[586,12077,10777],{"class":599},[586,12079,10780],{"class":599},[586,12081,618],{"class":591},[586,12083,12084,12086,12088,12090,12092,12094,12097,12099],{"class":588,"line":701},[586,12085,725],{"class":591},[586,12087,1694],{"class":595},[586,12089,1697],{"class":599},[586,12091,606],{"class":591},[586,12093,609],{"class":591},[586,12095,12096],{"class":612},"[0, 2, 8]",[586,12098,609],{"class":591},[586,12100,1709],{"class":591},[586,12102,12103,12105,12107],{"class":588,"line":711},[586,12104,725],{"class":591},[586,12106,1716],{"class":595},[586,12108,1709],{"class":591},[586,12110,12111],{"class":588,"line":722},[586,12112,654],{"emptyLinePlaceholder":520},[586,12114,12115],{"class":588,"line":577},[586,12116,12117],{"class":9807},"    \u003C!-- Place objects behind the refracting plane -->\n",[586,12119,12120,12122,12124,12126,12128,12130,12133,12135],{"class":588,"line":578},[586,12121,725],{"class":591},[586,12123,1762],{"class":595},[586,12125,1697],{"class":599},[586,12127,606],{"class":591},[586,12129,609],{"class":591},[586,12131,12132],{"class":612},"[-2, 0, -2]",[586,12134,609],{"class":591},[586,12136,618],{"class":591},[586,12138,12139,12141,12144],{"class":588,"line":579},[586,12140,736],{"class":591},[586,12142,12143],{"class":595},"TresTorusKnotGeometry",[586,12145,1709],{"class":591},[586,12147,12148,12150,12152,12154,12156,12158,12161,12163],{"class":588,"line":580},[586,12149,736],{"class":591},[586,12151,1793],{"class":595},[586,12153,10340],{"class":599},[586,12155,606],{"class":591},[586,12157,609],{"class":591},[586,12159,12160],{"class":612},"hotpink",[586,12162,609],{"class":591},[586,12164,1709],{"class":591},[586,12166,12167,12169,12171],{"class":588,"line":581},[586,12168,797],{"class":591},[586,12170,1762],{"class":595},[586,12172,618],{"class":591},[586,12174,12175],{"class":588,"line":794},[586,12176,654],{"emptyLinePlaceholder":520},[586,12178,12179,12181,12183],{"class":588,"line":804},[586,12180,725],{"class":591},[586,12182,728],{"class":595},[586,12184,618],{"class":591},[586,12186,12187,12189,12191,12193,12195,12197,12200,12202],{"class":588,"line":814},[586,12188,736],{"class":591},[586,12190,457],{"class":595},[586,12192,10340],{"class":599},[586,12194,606],{"class":591},[586,12196,609],{"class":591},[586,12198,12199],{"class":612},"#9ec8d4",[586,12201,609],{"class":591},[586,12203,618],{"class":591},[586,12205,12206,12208,12210,12212,12214,12216,12219,12221],{"class":588,"line":1864},[586,12207,1769],{"class":591},[586,12209,3338],{"class":595},[586,12211,1775],{"class":599},[586,12213,606],{"class":591},[586,12215,609],{"class":591},[586,12217,12218],{"class":612},"[8, 5]",[586,12220,609],{"class":591},[586,12222,1709],{"class":591},[586,12224,12225,12227,12229],{"class":588,"line":1885},[586,12226,1823],{"class":591},[586,12228,457],{"class":595},[586,12230,618],{"class":591},[586,12232,12233,12235,12237],{"class":588,"line":1894},[586,12234,797],{"class":591},[586,12236,728],{"class":595},[586,12238,618],{"class":591},[586,12240,12241,12243,12245],{"class":588,"line":2439},[586,12242,807],{"class":591},[586,12244,717],{"class":595},[586,12246,618],{"class":591},[586,12248,12249,12251,12253],{"class":588,"line":2444},[586,12250,689],{"class":591},[586,12252,706],{"class":595},[586,12254,618],{"class":591},[568,12256,944],{"id":943},[946,12258,12259,12269],{},[949,12260,12261],{},[952,12262,12263,12265,12267],{},[955,12264,1911],{"align":957},[955,12266,961],{"align":957},[955,12268,964],{},[966,12270,12271,12285,12298,12311,12324,12337],{},[952,12272,12273,12277,12280],{},[971,12274,12275],{"align":957},[2734,12276,9519],{},[971,12278,12279],{"align":957},"Color tint blended with the refracted image",[971,12281,12282],{},[542,12283,12284],{},"'#7f7f7f'",[952,12286,12287,12291,12294],{},[971,12288,12289],{"align":957},[2734,12290,10960],{},[971,12292,12293],{"align":957},"Width of the internal render target texture",[971,12295,12296],{},[542,12297,10966],{},[952,12299,12300,12304,12307],{},[971,12301,12302],{"align":957},[2734,12303,10973],{},[971,12305,12306],{"align":957},"Height of the internal render target texture",[971,12308,12309],{},[542,12310,10966],{},[952,12312,12313,12317,12320],{},[971,12314,12315],{"align":957},[2734,12316,10985],{},[971,12318,12319],{"align":957},"Clip bias for the virtual camera projection",[971,12321,12322],{},[542,12323,1137],{},[952,12325,12326,12330,12333],{},[971,12327,12328],{"align":957},[2734,12329,10997],{},[971,12331,12332],{"align":957},"Number of MSAA samples for the render target",[971,12334,12335],{},[542,12336,3822],{},[952,12338,12339,12343,12346],{},[971,12340,12341],{"align":957},[2734,12342,11009],{},[971,12344,12345],{"align":957},"Custom shader object to override the built-in shader",[971,12347,12348],{},[542,12349,12350],{},"Refractor.RefractorShader",[822,12352,12353],{},[504,12354,12355,12356,12358],{},"All the props except ",[542,12357,9519],{}," are not reactive",[568,12360,12362],{"id":12361},"custom-refraction-effect","Custom refraction effect",[504,12364,11030,12365,6628,12367,6631,12369,11040],{},[542,12366,11033],{},[542,12368,11036],{},[542,12370,11039],{},[572,12372,12374],{"className":574,"code":12373,"language":582,"meta":512,"style":512},"\u003Cscript setup lang=\"ts\">\nimport { Refractor } from '@tresjs/cientos'\nimport { useLoop } from '@tresjs/core'\nimport { shallowRef } from 'vue'\n\nconst refractorRef = shallowRef()\n\nconst customShader = {\n  uniforms: {\n    color: { value: null },\n    tDiffuse: { value: null },\n    textureMatrix: { value: null },\n    time: { value: 0 },\n  },\n  vertexShader: /* glsl */`\n    uniform mat4 textureMatrix;\n    varying vec4 vUv;\n    varying vec2 vPos;\n    void main() {\n      vUv = textureMatrix * vec4(position, 1.0);\n      vPos = position.xy;\n      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n    }`,\n  fragmentShader: /* glsl */`\n    uniform vec3 color;\n    uniform sampler2D tDiffuse;\n    uniform float time;\n    varying vec4 vUv;\n    varying vec2 vPos;\n    float blendOverlay(float base, float blend) {\n      return(base \u003C 0.5 ? (2.0 * base * blend) : (1.0 - 2.0 * (1.0 - base) * (1.0 - blend)));\n    }\n    vec3 blendOverlay(vec3 base, vec3 blend) {\n      return vec3(blendOverlay(base.r, blend.r), blendOverlay(base.g, blend.g), blendOverlay(base.b, blend.b));\n    }\n    void main() {\n      float dist = length(vPos);\n      float wave = sin(dist * 6.0 - time * 4.0) * 0.02;\n      vec2 dir = dist > 0.001 ? normalize(vPos) : vec2(0.0);\n      vec4 distortedUv = vUv + vec4(dir * wave, 0.0, 0.0);\n      vec4 base = texture2DProj(tDiffuse, distortedUv);\n      gl_FragColor = vec4(blendOverlay(base.rgb, color), 1.0);\n      #include \u003Ctonemapping_fragment>\n      #include \u003Ccolorspace_fragment>\n    }`,\n}\n\nconst { onBeforeRender } = useLoop()\nonBeforeRender(({ elapsed }) => {\n  const uniforms = refractorRef.value?.instance?.material?.uniforms\n  if (uniforms?.time) { uniforms.time.value = elapsed }\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CRefractor\n    ref=\"refractorRef\"\n    color=\"#9ec8d4\"\n    :shader=\"customShader\"\n  >\n    \u003CTresPlaneGeometry :args=\"[8, 5]\" />\n  \u003C/Refractor>\n\u003C/template>\n",[542,12375,12376,12396,12414,12432,12450,12454,12467,12471,12481,12489,12505,12521,12537,12553,12557,12567,12571,12575,12579,12583,12587,12591,12595,12603,12613,12617,12621,12625,12629,12633,12637,12641,12645,12649,12653,12657,12661,12665,12669,12673,12677,12681,12685,12689,12693,12701,12705,12709,12725,12741,12768,12800,12806,12814,12818,12826,12833,12846,12858,12870,12874,12892,12900],{"__ignoreMap":512},[586,12377,12378,12380,12382,12384,12386,12388,12390,12392,12394],{"class":588,"line":513},[586,12379,592],{"class":591},[586,12381,596],{"class":595},[586,12383,600],{"class":599},[586,12385,603],{"class":599},[586,12387,606],{"class":591},[586,12389,609],{"class":591},[586,12391,613],{"class":612},[586,12393,609],{"class":591},[586,12395,618],{"class":591},[586,12397,12398,12400,12402,12404,12406,12408,12410,12412],{"class":588,"line":514},[586,12399,626],{"class":625},[586,12401,629],{"class":591},[586,12403,12039],{"class":632},[586,12405,636],{"class":591},[586,12407,639],{"class":625},[586,12409,642],{"class":591},[586,12411,645],{"class":612},[586,12413,648],{"class":591},[586,12415,12416,12418,12420,12422,12424,12426,12428,12430],{"class":588,"line":651},[586,12417,626],{"class":625},[586,12419,629],{"class":591},[586,12421,11092],{"class":632},[586,12423,636],{"class":591},[586,12425,639],{"class":625},[586,12427,642],{"class":591},[586,12429,2114],{"class":612},[586,12431,648],{"class":591},[586,12433,12434,12436,12438,12440,12442,12444,12446,12448],{"class":588,"line":657},[586,12435,626],{"class":625},[586,12437,629],{"class":591},[586,12439,2144],{"class":632},[586,12441,636],{"class":591},[586,12443,639],{"class":625},[586,12445,642],{"class":591},[586,12447,582],{"class":612},[586,12449,648],{"class":591},[586,12451,12452],{"class":588,"line":686},[586,12453,654],{"emptyLinePlaceholder":520},[586,12455,12456,12458,12461,12463,12465],{"class":588,"line":696},[586,12457,660],{"class":599},[586,12459,12460],{"class":632}," refractorRef ",[586,12462,606],{"class":591},[586,12464,2144],{"class":668},[586,12466,6832],{"class":632},[586,12468,12469],{"class":588,"line":701},[586,12470,654],{"emptyLinePlaceholder":520},[586,12472,12473,12475,12477,12479],{"class":588,"line":711},[586,12474,660],{"class":599},[586,12476,11148],{"class":632},[586,12478,606],{"class":591},[586,12480,2264],{"class":591},[586,12482,12483,12485,12487],{"class":588,"line":722},[586,12484,11157],{"class":595},[586,12486,2255],{"class":591},[586,12488,2264],{"class":591},[586,12490,12491,12493,12495,12497,12499,12501,12503],{"class":588,"line":577},[586,12492,11166],{"class":595},[586,12494,2255],{"class":591},[586,12496,629],{"class":591},[586,12498,11173],{"class":595},[586,12500,2255],{"class":591},[586,12502,2189],{"class":591},[586,12504,5144],{"class":591},[586,12506,12507,12509,12511,12513,12515,12517,12519],{"class":588,"line":578},[586,12508,11184],{"class":595},[586,12510,2255],{"class":591},[586,12512,629],{"class":591},[586,12514,11173],{"class":595},[586,12516,2255],{"class":591},[586,12518,2189],{"class":591},[586,12520,5144],{"class":591},[586,12522,12523,12525,12527,12529,12531,12533,12535],{"class":588,"line":579},[586,12524,11201],{"class":595},[586,12526,2255],{"class":591},[586,12528,629],{"class":591},[586,12530,11173],{"class":595},[586,12532,2255],{"class":591},[586,12534,2189],{"class":591},[586,12536,5144],{"class":591},[586,12538,12539,12541,12543,12545,12547,12549,12551],{"class":588,"line":580},[586,12540,11218],{"class":595},[586,12542,2255],{"class":591},[586,12544,629],{"class":591},[586,12546,11173],{"class":595},[586,12548,2255],{"class":591},[586,12550,6770],{"class":2325},[586,12552,5144],{"class":591},[586,12554,12555],{"class":588,"line":581},[586,12556,2992],{"class":591},[586,12558,12559,12561,12563,12565],{"class":588,"line":794},[586,12560,11239],{"class":595},[586,12562,2255],{"class":591},[586,12564,11244],{"class":9807},[586,12566,11247],{"class":591},[586,12568,12569],{"class":588,"line":804},[586,12570,11252],{"class":612},[586,12572,12573],{"class":588,"line":814},[586,12574,11257],{"class":612},[586,12576,12577],{"class":588,"line":1864},[586,12578,11262],{"class":612},[586,12580,12581],{"class":588,"line":1885},[586,12582,11267],{"class":612},[586,12584,12585],{"class":588,"line":1894},[586,12586,11272],{"class":612},[586,12588,12589],{"class":588,"line":2439},[586,12590,11277],{"class":612},[586,12592,12593],{"class":588,"line":2444},[586,12594,11282],{"class":612},[586,12596,12597,12599,12601],{"class":588,"line":2044},[586,12598,11287],{"class":612},[586,12600,11290],{"class":591},[586,12602,2938],{"class":591},[586,12604,12605,12607,12609,12611],{"class":588,"line":2045},[586,12606,11297],{"class":595},[586,12608,2255],{"class":591},[586,12610,11244],{"class":9807},[586,12612,11247],{"class":591},[586,12614,12615],{"class":588,"line":2046},[586,12616,11308],{"class":612},[586,12618,12619],{"class":588,"line":2047},[586,12620,11313],{"class":612},[586,12622,12623],{"class":588,"line":2517},[586,12624,11318],{"class":612},[586,12626,12627],{"class":588,"line":2523},[586,12628,11257],{"class":612},[586,12630,12631],{"class":588,"line":2532},[586,12632,11262],{"class":612},[586,12634,12635],{"class":588,"line":2553},[586,12636,11331],{"class":612},[586,12638,12639],{"class":588,"line":2558},[586,12640,11336],{"class":612},[586,12642,12643],{"class":588,"line":2566},[586,12644,11341],{"class":612},[586,12646,12647],{"class":588,"line":2581},[586,12648,11346],{"class":612},[586,12650,12651],{"class":588,"line":2596},[586,12652,11351],{"class":612},[586,12654,12655],{"class":588,"line":2601},[586,12656,11341],{"class":612},[586,12658,12659],{"class":588,"line":2610},[586,12660,11267],{"class":612},[586,12662,12663],{"class":588,"line":2615},[586,12664,11364],{"class":612},[586,12666,12667],{"class":588,"line":2623},[586,12668,11369],{"class":612},[586,12670,12671],{"class":588,"line":2636},[586,12672,11374],{"class":612},[586,12674,12675],{"class":588,"line":2651},[586,12676,11379],{"class":612},[586,12678,12679],{"class":588,"line":2657},[586,12680,11384],{"class":612},[586,12682,12683],{"class":588,"line":2678},[586,12684,11389],{"class":612},[586,12686,12687],{"class":588,"line":2688},[586,12688,11394],{"class":612},[586,12690,12691],{"class":588,"line":2697},[586,12692,11399],{"class":612},[586,12694,12695,12697,12699],{"class":588,"line":2706},[586,12696,11287],{"class":612},[586,12698,11290],{"class":591},[586,12700,2938],{"class":591},[586,12702,12703],{"class":588,"line":5356},[586,12704,2357],{"class":591},[586,12706,12707],{"class":588,"line":5365},[586,12708,654],{"emptyLinePlaceholder":520},[586,12710,12711,12713,12715,12717,12719,12721,12723],{"class":588,"line":5370},[586,12712,660],{"class":599},[586,12714,629],{"class":591},[586,12716,11424],{"class":632},[586,12718,2998],{"class":591},[586,12720,2317],{"class":591},[586,12722,11092],{"class":668},[586,12724,6832],{"class":632},[586,12726,12727,12729,12731,12733,12735,12737,12739],{"class":588,"line":5378},[586,12728,11437],{"class":668},[586,12730,672],{"class":632},[586,12732,2241],{"class":591},[586,12734,2245],{"class":2244},[586,12736,2261],{"class":591},[586,12738,7080],{"class":599},[586,12740,2264],{"class":591},[586,12742,12743,12745,12747,12749,12752,12754,12756,12758,12760,12762,12764,12766],{"class":588,"line":5393},[586,12744,7087],{"class":599},[586,12746,11456],{"class":632},[586,12748,2317],{"class":591},[586,12750,12751],{"class":632}," refractorRef",[586,12753,832],{"class":591},[586,12755,2283],{"class":632},[586,12757,11468],{"class":591},[586,12759,8773],{"class":632},[586,12761,11468],{"class":591},[586,12763,6519],{"class":632},[586,12765,11468],{"class":591},[586,12767,11479],{"class":632},[586,12769,12770,12772,12774,12776,12778,12780,12782,12784,12786,12788,12790,12792,12794,12796,12798],{"class":588,"line":5408},[586,12771,2269],{"class":625},[586,12773,2272],{"class":595},[586,12775,11033],{"class":632},[586,12777,11468],{"class":591},[586,12779,11492],{"class":632},[586,12781,2286],{"class":595},[586,12783,2289],{"class":591},[586,12785,11456],{"class":632},[586,12787,832],{"class":591},[586,12789,11492],{"class":632},[586,12791,832],{"class":591},[586,12793,2283],{"class":632},[586,12795,2317],{"class":591},[586,12797,2245],{"class":632},[586,12799,2295],{"class":591},[586,12801,12802,12804],{"class":588,"line":5423},[586,12803,2998],{"class":591},[586,12805,683],{"class":632},[586,12807,12808,12810,12812],{"class":588,"line":5438},[586,12809,689],{"class":591},[586,12811,596],{"class":595},[586,12813,618],{"class":591},[586,12815,12816],{"class":588,"line":5452},[586,12817,654],{"emptyLinePlaceholder":520},[586,12819,12820,12822,12824],{"class":588,"line":5467},[586,12821,592],{"class":591},[586,12823,706],{"class":595},[586,12825,618],{"class":591},[586,12827,12828,12830],{"class":588,"line":5472},[586,12829,714],{"class":591},[586,12831,12832],{"class":595},"Refractor\n",[586,12834,12835,12837,12839,12841,12844],{"class":588,"line":5503},[586,12836,11549],{"class":599},[586,12838,606],{"class":591},[586,12840,609],{"class":591},[586,12842,12843],{"class":612},"refractorRef",[586,12845,755],{"class":591},[586,12847,12848,12850,12852,12854,12856],{"class":588,"line":5537},[586,12849,11166],{"class":599},[586,12851,606],{"class":591},[586,12853,609],{"class":591},[586,12855,12199],{"class":612},[586,12857,755],{"class":591},[586,12859,12860,12862,12864,12866,12868],{"class":588,"line":5546},[586,12861,11601],{"class":599},[586,12863,606],{"class":591},[586,12865,609],{"class":591},[586,12867,11608],{"class":612},[586,12869,755],{"class":591},[586,12871,12872],{"class":588,"line":5556},[586,12873,4615],{"class":591},[586,12875,12876,12878,12880,12882,12884,12886,12888,12890],{"class":588,"line":5566},[586,12877,725],{"class":591},[586,12879,3338],{"class":595},[586,12881,1775],{"class":599},[586,12883,606],{"class":591},[586,12885,609],{"class":591},[586,12887,12218],{"class":612},[586,12889,609],{"class":591},[586,12891,1709],{"class":591},[586,12893,12894,12896,12898],{"class":588,"line":4716},[586,12895,807],{"class":591},[586,12897,457],{"class":595},[586,12899,618],{"class":591},[586,12901,12902,12904,12906],{"class":588,"line":4717},[586,12903,689],{"class":591},[586,12905,706],{"class":595},[586,12907,618],{"class":591},[504,12909,12910],{},"The Refractor shader uses the following configuration by default:",[910,12912,11658],{"id":11657},[572,12914,12916],{"className":11661,"code":12915,"language":11663,"meta":512,"style":512},"const shader = {\n  uniforms: {\n    color: {\n      value: null\n    },\n    tDiffuse: {\n      value: null\n    },\n    textureMatrix: {\n      value: null\n    }\n  },\n  vertexShader: /* glsl */`\n    uniform mat4 textureMatrix;\n    varying vec4 vUv;\n\n    void main() {\n      vUv = textureMatrix * vec4( position, 1.0 );\n      gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n    }`,\n  fragmentShader: /* glsl */`\n    uniform vec3 color;\n    uniform sampler2D tDiffuse;\n    varying vec4 vUv;\n\n    float blendOverlay( float base, float blend ) {\n      return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n    }\n\n    vec3 blendOverlay( vec3 base, vec3 blend ) {\n      return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n    }\n\n    void main() {\n      vec4 base = texture2DProj( tDiffuse, vUv );\n      gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n\n      #include \u003Ctonemapping_fragment>\n      #include \u003Ccolorspace_fragment>\n    }`\n}\n",[542,12917,12918,12928,12936,12944,12952,12956,12964,12972,12976,12984,12992,12996,13000,13010,13014,13018,13022,13026,13031,13036,13044,13054,13058,13062,13066,13070,13075,13080,13084,13088,13093,13098,13102,13106,13110,13115,13120,13124,13128,13132,13138],{"__ignoreMap":512},[586,12919,12920,12922,12924,12926],{"class":588,"line":513},[586,12921,660],{"class":599},[586,12923,11672],{"class":632},[586,12925,606],{"class":591},[586,12927,2264],{"class":591},[586,12929,12930,12932,12934],{"class":588,"line":514},[586,12931,11157],{"class":595},[586,12933,2255],{"class":591},[586,12935,2264],{"class":591},[586,12937,12938,12940,12942],{"class":588,"line":651},[586,12939,11166],{"class":595},[586,12941,2255],{"class":591},[586,12943,2264],{"class":591},[586,12945,12946,12948,12950],{"class":588,"line":657},[586,12947,11713],{"class":595},[586,12949,2255],{"class":591},[586,12951,11718],{"class":591},[586,12953,12954],{"class":588,"line":686},[586,12955,11723],{"class":591},[586,12957,12958,12960,12962],{"class":588,"line":696},[586,12959,11184],{"class":595},[586,12961,2255],{"class":591},[586,12963,2264],{"class":591},[586,12965,12966,12968,12970],{"class":588,"line":701},[586,12967,11713],{"class":595},[586,12969,2255],{"class":591},[586,12971,11718],{"class":591},[586,12973,12974],{"class":588,"line":711},[586,12975,11723],{"class":591},[586,12977,12978,12980,12982],{"class":588,"line":722},[586,12979,11201],{"class":595},[586,12981,2255],{"class":591},[586,12983,2264],{"class":591},[586,12985,12986,12988,12990],{"class":588,"line":577},[586,12987,11713],{"class":595},[586,12989,2255],{"class":591},[586,12991,11718],{"class":591},[586,12993,12994],{"class":588,"line":578},[586,12995,11341],{"class":591},[586,12997,12998],{"class":588,"line":579},[586,12999,2992],{"class":591},[586,13001,13002,13004,13006,13008],{"class":588,"line":580},[586,13003,11239],{"class":595},[586,13005,2255],{"class":591},[586,13007,11244],{"class":9807},[586,13009,11247],{"class":591},[586,13011,13012],{"class":588,"line":581},[586,13013,11252],{"class":612},[586,13015,13016],{"class":588,"line":794},[586,13017,11257],{"class":612},[586,13019,13020],{"class":588,"line":804},[586,13021,654],{"emptyLinePlaceholder":520},[586,13023,13024],{"class":588,"line":814},[586,13025,11267],{"class":612},[586,13027,13028],{"class":588,"line":1864},[586,13029,13030],{"class":612},"      vUv = textureMatrix * vec4( position, 1.0 );\n",[586,13032,13033],{"class":588,"line":1885},[586,13034,13035],{"class":612},"      gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n",[586,13037,13038,13040,13042],{"class":588,"line":1894},[586,13039,11287],{"class":612},[586,13041,11290],{"class":591},[586,13043,2938],{"class":591},[586,13045,13046,13048,13050,13052],{"class":588,"line":2439},[586,13047,11297],{"class":595},[586,13049,2255],{"class":591},[586,13051,11244],{"class":9807},[586,13053,11247],{"class":591},[586,13055,13056],{"class":588,"line":2444},[586,13057,11308],{"class":612},[586,13059,13060],{"class":588,"line":2044},[586,13061,11313],{"class":612},[586,13063,13064],{"class":588,"line":2045},[586,13065,11257],{"class":612},[586,13067,13068],{"class":588,"line":2046},[586,13069,654],{"emptyLinePlaceholder":520},[586,13071,13072],{"class":588,"line":2047},[586,13073,13074],{"class":612},"    float blendOverlay( float base, float blend ) {\n",[586,13076,13077],{"class":588,"line":2517},[586,13078,13079],{"class":612},"      return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n",[586,13081,13082],{"class":588,"line":2523},[586,13083,11341],{"class":612},[586,13085,13086],{"class":588,"line":2532},[586,13087,654],{"emptyLinePlaceholder":520},[586,13089,13090],{"class":588,"line":2553},[586,13091,13092],{"class":612},"    vec3 blendOverlay( vec3 base, vec3 blend ) {\n",[586,13094,13095],{"class":588,"line":2558},[586,13096,13097],{"class":612},"      return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n",[586,13099,13100],{"class":588,"line":2566},[586,13101,11341],{"class":612},[586,13103,13104],{"class":588,"line":2581},[586,13105,654],{"emptyLinePlaceholder":520},[586,13107,13108],{"class":588,"line":2596},[586,13109,11267],{"class":612},[586,13111,13112],{"class":588,"line":2601},[586,13113,13114],{"class":612},"      vec4 base = texture2DProj( tDiffuse, vUv );\n",[586,13116,13117],{"class":588,"line":2610},[586,13118,13119],{"class":612},"      gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n",[586,13121,13122],{"class":588,"line":2615},[586,13123,654],{"emptyLinePlaceholder":520},[586,13125,13126],{"class":588,"line":2623},[586,13127,11394],{"class":612},[586,13129,13130],{"class":588,"line":2636},[586,13131,11399],{"class":612},[586,13133,13134,13136],{"class":588,"line":2651},[586,13135,11287],{"class":612},[586,13137,11247],{"class":591},[586,13139,13140],{"class":588,"line":2657},[586,13141,2357],{"class":591},[1558,13143,13144],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":512,"searchDepth":513,"depth":514,"links":13146},[13147,13148,13149],{"id":570,"depth":514,"text":15},{"id":943,"depth":514,"text":944},{"id":12361,"depth":514,"text":12362,"children":13150},[13151],{"id":11657,"depth":651,"text":11658},"Create real-time refractive (glass-like) surfaces in your scene.",{},{"title":457,"description":13152},"aTZyJsI5__o7UZbpkupUfyx_02PvriUqnYmBjh-brjE",{"id":13157,"title":461,"body":13158,"description":13703,"extension":517,"links":518,"meta":13704,"navigation":520,"path":462,"seo":13705,"stem":463,"__hash__":13706},"docs/2.api/9.objects/text-3d.md",{"type":501,"value":13159,"toc":13699},[13160,13165,13177,13179,13198,13306,13322,13415,13418,13536,13538,13696],[534,13161,13162],{},[13163,13164],"objects-text",{},[504,13166,13167,13170,13171,13176],{},[542,13168,13169],{},"\u003CText3D />"," is a component that renders text in 3D. It is a wrapper around the ",[547,13172,13175],{"href":13173,"rel":13174},"https://threejs.org/docs/#api/en/geometries/TextGeometry",[551],"TextGeometry"," class.",[568,13178,15],{"id":570},[504,13180,13181,13182,13184,13185,13188,13189,13192,13193],{},"To use the ",[542,13183,13169],{}," component you need to pass the ",[542,13186,13187],{},"font"," prop with the URL of the font JSON file you want to use. TextGeometry uses ",[542,13190,13191],{},"typeface",".json generated fonts, you can generate yours ",[547,13194,13197],{"href":13195,"rel":13196},"http://gero3.github.io/facetype.js/",[551],"here",[572,13199,13201],{"className":574,"code":13200,"language":582,"meta":512,"style":512},"\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",[542,13202,13203,13211,13219,13227,13234,13248,13262,13266,13274,13282,13290,13298],{"__ignoreMap":512},[586,13204,13205,13207,13209],{"class":588,"line":513},[586,13206,592],{"class":591},[586,13208,706],{"class":595},[586,13210,618],{"class":591},[586,13212,13213,13215,13217],{"class":588,"line":514},[586,13214,714],{"class":591},[586,13216,717],{"class":595},[586,13218,618],{"class":591},[586,13220,13221,13223,13225],{"class":588,"line":651},[586,13222,725],{"class":591},[586,13224,728],{"class":595},[586,13226,618],{"class":591},[586,13228,13229,13231],{"class":588,"line":657},[586,13230,736],{"class":591},[586,13232,13233],{"class":595},"Text3D\n",[586,13235,13236,13239,13241,13243,13246],{"class":588,"line":686},[586,13237,13238],{"class":599},"        text",[586,13240,606],{"class":591},[586,13242,609],{"class":591},[586,13244,13245],{"class":612},"TresJS",[586,13247,755],{"class":591},[586,13249,13250,13253,13255,13257,13260],{"class":588,"line":696},[586,13251,13252],{"class":599},"        font",[586,13254,606],{"class":591},[586,13256,609],{"class":591},[586,13258,13259],{"class":612},"/fonts/FiraCodeRegular.json",[586,13261,755],{"class":591},[586,13263,13264],{"class":588,"line":701},[586,13265,3859],{"class":591},[586,13267,13268,13270,13272],{"class":588,"line":711},[586,13269,1769],{"class":591},[586,13271,2683],{"class":595},[586,13273,1709],{"class":591},[586,13275,13276,13278,13280],{"class":588,"line":722},[586,13277,1823],{"class":591},[586,13279,461],{"class":595},[586,13281,618],{"class":591},[586,13283,13284,13286,13288],{"class":588,"line":577},[586,13285,797],{"class":591},[586,13287,728],{"class":595},[586,13289,618],{"class":591},[586,13291,13292,13294,13296],{"class":588,"line":578},[586,13293,807],{"class":591},[586,13295,717],{"class":595},[586,13297,618],{"class":591},[586,13299,13300,13302,13304],{"class":588,"line":579},[586,13301,689],{"class":591},[586,13303,706],{"class":595},[586,13305,618],{"class":591},[504,13307,13308,13309,13312,13313,13315,13316,13318,13319,13321],{},"Notice that you need to pass the ",[542,13310,13311],{},"\u003CTresMeshNormalMaterial />"," component as a child of the ",[542,13314,13169],{}," component. This is because ",[542,13317,13169],{}," is a ",[542,13320,4460],{}," 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:",[572,13323,13325],{"className":574,"code":13324,"language":582,"meta":512,"style":512},"\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",[542,13326,13327,13335,13343,13351,13370,13375,13383,13391,13399,13407],{"__ignoreMap":512},[586,13328,13329,13331,13333],{"class":588,"line":513},[586,13330,592],{"class":591},[586,13332,706],{"class":595},[586,13334,618],{"class":591},[586,13336,13337,13339,13341],{"class":588,"line":514},[586,13338,714],{"class":591},[586,13340,717],{"class":595},[586,13342,618],{"class":591},[586,13344,13345,13347,13349],{"class":588,"line":651},[586,13346,725],{"class":591},[586,13348,728],{"class":595},[586,13350,618],{"class":591},[586,13352,13353,13355,13357,13360,13362,13364,13366,13368],{"class":588,"line":657},[586,13354,736],{"class":591},[586,13356,461],{"class":595},[586,13358,13359],{"class":599}," font",[586,13361,606],{"class":591},[586,13363,609],{"class":591},[586,13365,13259],{"class":612},[586,13367,609],{"class":591},[586,13369,618],{"class":591},[586,13371,13372],{"class":588,"line":686},[586,13373,13374],{"class":632},"        TresJS\n",[586,13376,13377,13379,13381],{"class":588,"line":696},[586,13378,1769],{"class":591},[586,13380,2683],{"class":595},[586,13382,1709],{"class":591},[586,13384,13385,13387,13389],{"class":588,"line":701},[586,13386,1823],{"class":591},[586,13388,461],{"class":595},[586,13390,618],{"class":591},[586,13392,13393,13395,13397],{"class":588,"line":711},[586,13394,797],{"class":591},[586,13396,728],{"class":595},[586,13398,618],{"class":591},[586,13400,13401,13403,13405],{"class":588,"line":722},[586,13402,807],{"class":591},[586,13404,717],{"class":595},[586,13406,618],{"class":591},[586,13408,13409,13411,13413],{"class":588,"line":577},[586,13410,689],{"class":591},[586,13412,706],{"class":595},[586,13414,618],{"class":591},[504,13416,13417],{},"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",[572,13419,13421],{"className":574,"code":13420,"language":582,"meta":512,"style":512},"\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",[542,13422,13423,13431,13452,13460,13468,13474,13487,13499,13503,13508,13512,13520,13528],{"__ignoreMap":512},[586,13424,13425,13427,13429],{"class":588,"line":513},[586,13426,592],{"class":591},[586,13428,706],{"class":595},[586,13430,618],{"class":591},[586,13432,13433,13435,13438,13441,13443,13445,13448,13450],{"class":588,"line":514},[586,13434,714],{"class":591},[586,13436,13437],{"class":595},"input",[586,13439,13440],{"class":599}," v-model",[586,13442,606],{"class":591},[586,13444,609],{"class":591},[586,13446,13447],{"class":612},"myReactiveText",[586,13449,609],{"class":591},[586,13451,1709],{"class":591},[586,13453,13454,13456,13458],{"class":588,"line":651},[586,13455,714],{"class":591},[586,13457,717],{"class":595},[586,13459,618],{"class":591},[586,13461,13462,13464,13466],{"class":588,"line":657},[586,13463,725],{"class":591},[586,13465,728],{"class":595},[586,13467,618],{"class":591},[586,13469,13470,13472],{"class":588,"line":686},[586,13471,736],{"class":591},[586,13473,13233],{"class":595},[586,13475,13476,13479,13481,13483,13485],{"class":588,"line":696},[586,13477,13478],{"class":599},"        :text",[586,13480,606],{"class":591},[586,13482,609],{"class":591},[586,13484,13447],{"class":612},[586,13486,755],{"class":591},[586,13488,13489,13491,13493,13495,13497],{"class":588,"line":701},[586,13490,13252],{"class":599},[586,13492,606],{"class":591},[586,13494,609],{"class":591},[586,13496,13259],{"class":612},[586,13498,755],{"class":591},[586,13500,13501],{"class":588,"line":711},[586,13502,3803],{"class":599},[586,13504,13505],{"class":588,"line":722},[586,13506,13507],{"class":599},"        need-updates\n",[586,13509,13510],{"class":588,"line":577},[586,13511,791],{"class":591},[586,13513,13514,13516,13518],{"class":588,"line":578},[586,13515,797],{"class":591},[586,13517,728],{"class":595},[586,13519,618],{"class":591},[586,13521,13522,13524,13526],{"class":588,"line":579},[586,13523,807],{"class":591},[586,13525,717],{"class":595},[586,13527,618],{"class":591},[586,13529,13530,13532,13534],{"class":588,"line":580},[586,13531,689],{"class":591},[586,13533,706],{"class":595},[586,13535,618],{"class":591},[568,13537,944],{"id":943},[946,13539,13540,13550],{},[949,13541,13542],{},[952,13543,13544,13546,13548],{},[955,13545,1911],{"align":957},[955,13547,961],{"align":957},[955,13549,964],{},[966,13551,13552,13563,13574,13586,13598,13611,13623,13636,13649,13661,13673,13684],{},[952,13553,13554,13558,13561],{},[971,13555,13556],{"align":957},[2734,13557,13187],{},[971,13559,13560],{"align":957},"The font data or font name to use for the text.",[971,13562],{},[952,13564,13565,13569,13572],{},[971,13566,13567],{"align":957},[2734,13568,1510],{},[971,13570,13571],{"align":957},"The text to display.",[971,13573],{},[952,13575,13576,13581,13584],{},[971,13577,13578],{"align":957},[2734,13579,13580],{},"size",[971,13582,13583],{"align":957},"The size of the text.",[971,13585,1857],{},[952,13587,13588,13592,13595],{},[971,13589,13590],{"align":957},[2734,13591,2755],{},[971,13593,13594],{"align":957},"The height of the text.",[971,13596,13597],{},"0.2",[952,13599,13600,13605,13608],{},[971,13601,13602],{"align":957},[2734,13603,13604],{},"curveSegments",[971,13606,13607],{"align":957},"The number of curve segments to use when generating the text geometry.",[971,13609,13610],{},"5",[952,13612,13613,13618,13621],{},[971,13614,13615],{"align":957},[2734,13616,13617],{},"bevelEnabled",[971,13619,13620],{"align":957},"A flag indicating whether beveling should be enabled for the text.",[971,13622,1112],{},[952,13624,13625,13630,13633],{},[971,13626,13627],{"align":957},[2734,13628,13629],{},"bevelThickness",[971,13631,13632],{"align":957},"The thickness of the beveled edge on the text.",[971,13634,13635],{},"0.05",[952,13637,13638,13643,13646],{},[971,13639,13640],{"align":957},[2734,13641,13642],{},"bevelSize",[971,13644,13645],{"align":957},"The size of the beveled edge on the text.",[971,13647,13648],{},"0.02",[952,13650,13651,13656,13659],{},[971,13652,13653],{"align":957},[2734,13654,13655],{},"bevelOffset",[971,13657,13658],{"align":957},"The offset of the beveled edge on the text.",[971,13660,1137],{},[952,13662,13663,13668,13671],{},[971,13664,13665],{"align":957},[2734,13666,13667],{},"bevelSegments",[971,13669,13670],{"align":957},"The number of bevel segments to use when generating the text geometry.",[971,13672,3822],{},[952,13674,13675,13679,13682],{},[971,13676,13677],{"align":957},[2734,13678,1218],{},[971,13680,13681],{"align":957},"To center the text",[971,13683,1152],{},[952,13685,13686,13691,13694],{},[971,13687,13688],{"align":957},[2734,13689,13690],{},"needUpdates",[971,13692,13693],{"align":957},"This props add reactivity",[971,13695,1152],{},[1558,13697,13698],{},"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":512,"searchDepth":513,"depth":514,"links":13700},[13701,13702],{"id":570,"depth":514,"text":15},{"id":943,"depth":514,"text":944},"Render text in 3D using TextGeometry.",{},{"title":461,"description":13703},"sdYCewwuqrXIt1Ti234B-8w4L1gJgGQcw62huYPBpjc",1789116514909]