[{"data":1,"prerenderedAt":14525},["ShallowReactive",2],{"navigation":3,"\u002Fapi\u002Fobjects":498,"\u002Fapi\u002Fobjects-surround":523,"objects-list":528},[4,26],{"title":5,"path":6,"stem":7,"children":8},"Getting Started","\u002Fgetting-started","1.getting-started\u002F1.index",[9,10,14,18,22],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"Installation Guide","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation",{"title":15,"path":16,"stem":17},"Usage","\u002Fgetting-started\u002Fusage","1.getting-started\u002F3.usage",{"title":19,"path":20,"stem":21},"Loading Models","\u002Fgetting-started\u002Floading-models","1.getting-started\u002F4.loading-models",{"title":23,"path":24,"stem":25},"Upgrade Guide","\u002Fgetting-started\u002Fupgrade-guide","1.getting-started\u002F5.upgrade-guide",{"title":27,"path":28,"stem":29,"children":30},"Api","\u002Fapi","2.api",[31,34,96,126,168,210,308,334,368,418,464],{"title":32,"path":28,"stem":33},"All","2.api\u002Findex",{"title":35,"path":36,"stem":37,"children":38},"Abstractions","\u002Fapi\u002Fabstractions","2.api\u002F1.abstractions\u002Findex",[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","\u002Fapi\u002Fabstractions\u002Falign","2.api\u002F1.abstractions\u002Falign",{"title":45,"path":46,"stem":47},"Billboard","\u002Fapi\u002Fabstractions\u002Fbillboard","2.api\u002F1.abstractions\u002Fbillboard",{"title":49,"path":50,"stem":51},"Camera Shake","\u002Fapi\u002Fabstractions\u002Fcamera-shake","2.api\u002F1.abstractions\u002Fcamera-shake",{"title":53,"path":54,"stem":55},"Decal","\u002Fapi\u002Fabstractions\u002Fdecal","2.api\u002F1.abstractions\u002Fdecal",{"title":57,"path":58,"stem":59},"Edges","\u002Fapi\u002Fabstractions\u002Fedges","2.api\u002F1.abstractions\u002Fedges",{"title":61,"path":62,"stem":63},"Fit","\u002Fapi\u002Fabstractions\u002Ffit","2.api\u002F1.abstractions\u002Ffit",{"title":65,"path":66,"stem":67},"Instances","\u002Fapi\u002Fabstractions\u002Finstances","2.api\u002F1.abstractions\u002Finstances",{"title":69,"path":70,"stem":71},"Levioso (Float)","\u002Fapi\u002Fabstractions\u002Flevioso","2.api\u002F1.abstractions\u002Flevioso",{"title":73,"path":74,"stem":75},"Mask","\u002Fapi\u002Fabstractions\u002Fmask","2.api\u002F1.abstractions\u002Fmask",{"title":77,"path":78,"stem":79},"Merged","\u002Fapi\u002Fabstractions\u002Fmerged","2.api\u002F1.abstractions\u002Fmerged",{"title":81,"path":82,"stem":83},"Outline","\u002Fapi\u002Fabstractions\u002Foutline","2.api\u002F1.abstractions\u002Foutline",{"title":85,"path":86,"stem":87},"Sampler","\u002Fapi\u002Fabstractions\u002Fsampler","2.api\u002F1.abstractions\u002Fsampler",{"title":89,"path":90,"stem":91},"ScreenSizer","\u002Fapi\u002Fabstractions\u002Fscreen-sizer","2.api\u002F1.abstractions\u002Fscreen-sizer",{"title":93,"path":94,"stem":95},"ScreenSpace","\u002Fapi\u002Fabstractions\u002Fscreen-space","2.api\u002F1.abstractions\u002Fscreen-space",{"title":97,"path":98,"stem":99,"children":100},"Controls","\u002Fapi\u002Fcontrols","2.api\u002F2.controls\u002Findex",[101,102,106,110,114,118,122],{"title":97,"path":98,"stem":99},{"title":103,"path":104,"stem":105},"Camera Controls","\u002Fapi\u002Fcontrols\u002Fcamera-controls","2.api\u002F2.controls\u002Fcamera-controls",{"title":107,"path":108,"stem":109},"Keyboard Controls","\u002Fapi\u002Fcontrols\u002Fkeyboard-controls","2.api\u002F2.controls\u002Fkeyboard-controls",{"title":111,"path":112,"stem":113},"Map Controls","\u002Fapi\u002Fcontrols\u002Fmap-controls","2.api\u002F2.controls\u002Fmap-controls",{"title":115,"path":116,"stem":117},"Orbit Controls","\u002Fapi\u002Fcontrols\u002Forbit-controls","2.api\u002F2.controls\u002Forbit-controls",{"title":119,"path":120,"stem":121},"PointerLock Controls","\u002Fapi\u002Fcontrols\u002Fpointer-lock-controls","2.api\u002F2.controls\u002Fpointer-lock-controls",{"title":123,"path":124,"stem":125},"Transform Controls","\u002Fapi\u002Fcontrols\u002Ftransform-controls","2.api\u002F2.controls\u002Ftransform-controls",{"title":127,"path":128,"stem":129,"children":130},"Loaders","\u002Fapi\u002Floaders","2.api\u002F3.loaders\u002Findex",[131,132,136,140,144,148,152,156,160,164],{"title":127,"path":128,"stem":129},{"title":133,"path":134,"stem":135},"useGLTF","\u002Fapi\u002Floaders\u002Fuse-gltf","2.api\u002F3.loaders\u002F1.use-gltf",{"title":137,"path":138,"stem":139},"GLTFModel","\u002Fapi\u002Floaders\u002Fgltf-model","2.api\u002F3.loaders\u002F2.gltf-model",{"title":141,"path":142,"stem":143},"useFBX","\u002Fapi\u002Floaders\u002Fuse-fbx","2.api\u002F3.loaders\u002F3.use-fbx",{"title":145,"path":146,"stem":147},"FBXModel","\u002Fapi\u002Floaders\u002Ffbx-model","2.api\u002F3.loaders\u002F4.fbx-model",{"title":149,"path":150,"stem":151},"useTexture","\u002Fapi\u002Floaders\u002Fuse-texture","2.api\u002F3.loaders\u002F5.use-texture",{"title":153,"path":154,"stem":155},"useTextures","\u002Fapi\u002Floaders\u002Fuse-textures","2.api\u002F3.loaders\u002F6.use-textures",{"title":157,"path":158,"stem":159},"useSVG","\u002Fapi\u002Floaders\u002Fuse-svg","2.api\u002F3.loaders\u002F7.use-svg",{"title":161,"path":162,"stem":163},"useProgress","\u002Fapi\u002Floaders\u002Fuse-progress","2.api\u002F3.loaders\u002Fuse-progress",{"title":165,"path":166,"stem":167},"useVideoTexture","\u002Fapi\u002Floaders\u002Fuse-video-texture","2.api\u002F3.loaders\u002Fuse-video-texture",{"title":169,"path":170,"stem":171,"children":172},"Materials","\u002Fapi\u002Fmaterials","2.api\u002F4.materials\u002Findex",[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","\u002Fapi\u002Fmaterials\u002Fcustom-shader-material","2.api\u002F4.materials\u002Fcustom-shader-material",{"title":179,"path":180,"stem":181},"Mesh Glass Material","\u002Fapi\u002Fmaterials\u002Fglass-material","2.api\u002F4.materials\u002Fglass-material",{"title":183,"path":184,"stem":185},"Holographic Material","\u002Fapi\u002Fmaterials\u002Fholographic-material","2.api\u002F4.materials\u002Fholographic-material",{"title":187,"path":188,"stem":189},"Mesh Discard Material","\u002Fapi\u002Fmaterials\u002Fmesh-discard-material","2.api\u002F4.materials\u002Fmesh-discard-material",{"title":191,"path":192,"stem":193},"Mesh Portal Material","\u002Fapi\u002Fmaterials\u002Fmesh-portal-material","2.api\u002F4.materials\u002Fmesh-portal-material",{"title":195,"path":196,"stem":197},"Mesh Reflection Material","\u002Fapi\u002Fmaterials\u002Fmesh-reflection-material","2.api\u002F4.materials\u002Fmesh-reflection-material",{"title":199,"path":200,"stem":201},"Mesh Transmission Material","\u002Fapi\u002Fmaterials\u002Fmesh-transmission-material","2.api\u002F4.materials\u002Fmesh-transmission-material",{"title":203,"path":204,"stem":205},"Point Material","\u002Fapi\u002Fmaterials\u002Fpoint-material","2.api\u002F4.materials\u002Fpoint-material",{"title":207,"path":208,"stem":209},"Wobble Material","\u002Fapi\u002Fmaterials\u002Fwobble-material","2.api\u002F4.materials\u002Fwobble-material",{"title":211,"path":212,"stem":213,"children":214},"Shapes","\u002Fapi\u002Fshapes","2.api\u002F5.shapes\u002Findex",[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","\u002Fapi\u002Fshapes\u002Fbox","2.api\u002F5.shapes\u002Fbox",{"title":221,"path":222,"stem":223},"CatmullRomCurve3","\u002Fapi\u002Fshapes\u002Fcatmullromcurve3","2.api\u002F5.shapes\u002Fcatmullromcurve3",{"title":225,"path":226,"stem":227},"Circle","\u002Fapi\u002Fshapes\u002Fcircle","2.api\u002F5.shapes\u002Fcircle",{"title":229,"path":230,"stem":231},"Cone","\u002Fapi\u002Fshapes\u002Fcone","2.api\u002F5.shapes\u002Fcone",{"title":233,"path":234,"stem":235},"Cubic Bezier Line","\u002Fapi\u002Fshapes\u002Fcubic-bezier-line","2.api\u002F5.shapes\u002Fcubic-bezier-line",{"title":237,"path":238,"stem":239},"Cylinder","\u002Fapi\u002Fshapes\u002Fcylinder","2.api\u002F5.shapes\u002Fcylinder",{"title":241,"path":242,"stem":243},"Dodecahedron","\u002Fapi\u002Fshapes\u002Fdodecahedron","2.api\u002F5.shapes\u002Fdodecahedron",{"title":245,"path":246,"stem":247},"Grid","\u002Fapi\u002Fshapes\u002Fgrid","2.api\u002F5.shapes\u002Fgrid",{"title":249,"path":250,"stem":251},"Icosahedron","\u002Fapi\u002Fshapes\u002Ficosahedron","2.api\u002F5.shapes\u002Ficosahedron",{"title":253,"path":254,"stem":255},"Line2","\u002Fapi\u002Fshapes\u002Fline2","2.api\u002F5.shapes\u002Fline2",{"title":257,"path":258,"stem":259},"Octahedron","\u002Fapi\u002Fshapes\u002Foctahedron","2.api\u002F5.shapes\u002Foctahedron",{"title":261,"path":262,"stem":263},"Plane","\u002Fapi\u002Fshapes\u002Fplane","2.api\u002F5.shapes\u002Fplane",{"title":265,"path":266,"stem":267},"Quadratic Bezier Line","\u002Fapi\u002Fshapes\u002Fquadratic-bezier-line","2.api\u002F5.shapes\u002Fquadratic-bezier-line",{"title":269,"path":270,"stem":271},"Ring","\u002Fapi\u002Fshapes\u002Fring","2.api\u002F5.shapes\u002Fring",{"title":273,"path":274,"stem":275},"Rounded Box","\u002Fapi\u002Fshapes\u002Frounded-box","2.api\u002F5.shapes\u002Frounded-box",{"title":277,"path":278,"stem":279},"Rounded Plane","\u002Fapi\u002Fshapes\u002Frounded-plane","2.api\u002F5.shapes\u002Frounded-plane",{"title":281,"path":282,"stem":283},"Screen Quad","\u002Fapi\u002Fshapes\u002Fscreen-quad","2.api\u002F5.shapes\u002Fscreen-quad",{"title":285,"path":286,"stem":287},"Sphere","\u002Fapi\u002Fshapes\u002Fsphere","2.api\u002F5.shapes\u002Fsphere",{"title":289,"path":290,"stem":291},"Superformula","\u002Fapi\u002Fshapes\u002Fsuperformula","2.api\u002F5.shapes\u002Fsuperformula",{"title":293,"path":294,"stem":295},"Tetrahedron","\u002Fapi\u002Fshapes\u002Ftetrahedron","2.api\u002F5.shapes\u002Ftetrahedron",{"title":297,"path":298,"stem":299},"Torus","\u002Fapi\u002Fshapes\u002Ftorus","2.api\u002F5.shapes\u002Ftorus",{"title":301,"path":302,"stem":303},"Torus Knot","\u002Fapi\u002Fshapes\u002Ftorus-knot","2.api\u002F5.shapes\u002Ftorus-knot",{"title":305,"path":306,"stem":307},"Tube","\u002Fapi\u002Fshapes\u002Ftube","2.api\u002F5.shapes\u002Ftube",{"title":309,"path":310,"stem":311,"children":312},"Debug\u002FPerformance","\u002Fapi\u002Fdebug-performance","2.api\u002F6.debug-performance\u002Findex",[313,314,318,322,326,330],{"title":309,"path":310,"stem":311},{"title":315,"path":316,"stem":317},"Helper","\u002Fapi\u002Fdebug-performance\u002Fhelper","2.api\u002F6.debug-performance\u002Fhelper",{"title":319,"path":320,"stem":321},"LOD","\u002Fapi\u002Fdebug-performance\u002Flod","2.api\u002F6.debug-performance\u002Flod",{"title":323,"path":324,"stem":325},"Stats","\u002Fapi\u002Fdebug-performance\u002Fstats","2.api\u002F6.debug-performance\u002Fstats",{"title":327,"path":328,"stem":329},"StatsGl","\u002Fapi\u002Fdebug-performance\u002Fstats-gl","2.api\u002F6.debug-performance\u002Fstats-gl",{"title":331,"path":332,"stem":333},"useBVH","\u002Fapi\u002Fdebug-performance\u002Fuse-bvh","2.api\u002F6.debug-performance\u002Fuse-bvh",{"title":335,"path":336,"stem":337,"children":338},"Light\u002FShadow","\u002Fapi\u002Flight-shadow","2.api\u002F7.light-shadow\u002Findex",[339,340,344,348,352,356,360,364],{"title":335,"path":336,"stem":337},{"title":341,"path":342,"stem":343},"Accumulative Shadows","\u002Fapi\u002Flight-shadow\u002Faccumulative-shadows","2.api\u002F7.light-shadow\u002Faccumulative-shadows",{"title":345,"path":346,"stem":347},"Bake Shadows","\u002Fapi\u002Flight-shadow\u002Fbake-shadows","2.api\u002F7.light-shadow\u002Fbake-shadows",{"title":349,"path":350,"stem":351},"Circle Shadow","\u002Fapi\u002Flight-shadow\u002Fcircle-shadow","2.api\u002F7.light-shadow\u002Fcircle-shadow",{"title":353,"path":354,"stem":355},"Contact Shadows","\u002Fapi\u002Flight-shadow\u002Fcontact-shadows","2.api\u002F7.light-shadow\u002Fcontact-shadows",{"title":357,"path":358,"stem":359},"Lensflare","\u002Fapi\u002Flight-shadow\u002Flensflare","2.api\u002F7.light-shadow\u002Flensflare",{"title":361,"path":362,"stem":363},"Randomized Lights","\u002Fapi\u002Flight-shadow\u002Frandomized-lights","2.api\u002F7.light-shadow\u002Frandomized-lights",{"title":365,"path":366,"stem":367},"Soft Shadows","\u002Fapi\u002Flight-shadow\u002Fsoft-shadows","2.api\u002F7.light-shadow\u002Fsoft-shadows",{"title":369,"path":370,"stem":371,"children":372},"Staging","\u002Fapi\u002Fstaging","2.api\u002F8.staging\u002Findex",[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","\u002Fapi\u002Fstaging\u002Fenvironment","2.api\u002F8.staging\u002F1.environment",{"title":379,"path":380,"stem":381},"useEnvironment","\u002Fapi\u002Fstaging\u002Fuse-environment","2.api\u002F8.staging\u002F2.use-environment",{"title":383,"path":384,"stem":385},"Lightformer","\u002Fapi\u002Fstaging\u002Flightformer","2.api\u002F8.staging\u002F3.lightformer",{"title":387,"path":388,"stem":389},"Backdrop","\u002Fapi\u002Fstaging\u002Fbackdrop","2.api\u002F8.staging\u002Fbackdrop",{"title":391,"path":392,"stem":393},"Ocean","\u002Fapi\u002Fstaging\u002Focean","2.api\u002F8.staging\u002Focean",{"title":395,"path":396,"stem":397},"Precipitation","\u002Fapi\u002Fstaging\u002Fprecipitation","2.api\u002F8.staging\u002Fprecipitation",{"title":399,"path":400,"stem":401},"Sky","\u002Fapi\u002Fstaging\u002Fsky","2.api\u002F8.staging\u002Fsky",{"title":403,"path":404,"stem":405},"Smoke","\u002Fapi\u002Fstaging\u002Fsmoke","2.api\u002F8.staging\u002Fsmoke",{"title":407,"path":408,"stem":409},"Sparkles","\u002Fapi\u002Fstaging\u002Fsparkles","2.api\u002F8.staging\u002Fsparkles",{"title":411,"path":412,"stem":413},"Stage","\u002Fapi\u002Fstaging\u002Fstage","2.api\u002F8.staging\u002Fstage",{"title":415,"path":416,"stem":417},"Stars","\u002Fapi\u002Fstaging\u002Fstars","2.api\u002F8.staging\u002Fstars",{"title":419,"path":420,"stem":421,"children":422},"Objects","\u002Fapi\u002Fobjects","2.api\u002F9.objects\u002Findex",[423,424,428,432,436,440,444,448,452,456,460],{"title":419,"path":420,"stem":421},{"title":425,"path":426,"stem":427},"AnimatedSprite","\u002Fapi\u002Fobjects\u002Fanimated-sprite","2.api\u002F9.objects\u002Fanimated-sprite",{"title":429,"path":430,"stem":431},"CubeCamera","\u002Fapi\u002Fobjects\u002Fcube-camera","2.api\u002F9.objects\u002Fcube-camera",{"title":433,"path":434,"stem":435},"Fbo","\u002Fapi\u002Fobjects\u002Ffbo","2.api\u002F9.objects\u002Ffbo",{"title":437,"path":438,"stem":439},"GradientTexture","\u002Fapi\u002Fobjects\u002Fgradient-texture","2.api\u002F9.objects\u002Fgradient-texture",{"title":441,"path":442,"stem":443},"HTML","\u002Fapi\u002Fobjects\u002Fhtml","2.api\u002F9.objects\u002Fhtml",{"title":445,"path":446,"stem":447},"Image","\u002Fapi\u002Fobjects\u002Fimage","2.api\u002F9.objects\u002Fimage",{"title":449,"path":450,"stem":451},"MarchingCubes","\u002Fapi\u002Fobjects\u002Fmarching-cubes","2.api\u002F9.objects\u002Fmarching-cubes",{"title":453,"path":454,"stem":455},"Reflector","\u002Fapi\u002Fobjects\u002Freflector","2.api\u002F9.objects\u002Freflector",{"title":457,"path":458,"stem":459},"Refractor","\u002Fapi\u002Fobjects\u002Frefractor","2.api\u002F9.objects\u002Frefractor",{"title":461,"path":462,"stem":463},"Text3D","\u002Fapi\u002Fobjects\u002Ftext-3d","2.api\u002F9.objects\u002Ftext-3d",{"title":465,"path":466,"stem":467,"children":468},"Miscellaneous","\u002Fapi\u002Fmiscellaneous","2.api\u002Fmiscellaneous\u002Findex",[469,470,474,478,482,486,490,494],{"title":465,"path":466,"stem":467},{"title":471,"path":472,"stem":473},"Bounds","\u002Fapi\u002Fmiscellaneous\u002Fbounds","2.api\u002Fmiscellaneous\u002Fbounds",{"title":475,"path":476,"stem":477},"GlobalAudio","\u002Fapi\u002Fmiscellaneous\u002Fglobal-audio","2.api\u002Fmiscellaneous\u002Fglobal-audio",{"title":479,"path":480,"stem":481},"MouseParallax","\u002Fapi\u002Fmiscellaneous\u002Fmouse-parallax","2.api\u002Fmiscellaneous\u002Fmouse-parallax",{"title":483,"path":484,"stem":485},"PositionalAudio","\u002Fapi\u002Fmiscellaneous\u002Fpositional-audio","2.api\u002Fmiscellaneous\u002Fpositional-audio",{"title":487,"path":488,"stem":489},"useAnimations","\u002Fapi\u002Fmiscellaneous\u002Fuse-animations","2.api\u002Fmiscellaneous\u002Fuse-animations",{"title":491,"path":492,"stem":493},"useGLTFExporter","\u002Fapi\u002Fmiscellaneous\u002Fuse-gltf-exporter","2.api\u002Fmiscellaneous\u002Fuse-gltf-exporter",{"title":495,"path":496,"stem":497},"useIntersect","\u002Fapi\u002Fmiscellaneous\u002Fuse-intersect","2.api\u002Fmiscellaneous\u002Fuse-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\u002F2.api\u002F9.objects\u002Findex.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,1584,2076,3389,3821,9873,10512,11368,12752,13974],{"id":530,"title":425,"body":531,"description":527,"extension":517,"links":518,"meta":1581,"navigation":520,"path":426,"seo":1582,"stem":427,"__hash__":1583},"docs\u002F2.api\u002F9.objects\u002Fanimated-sprite.md",{"type":501,"value":532,"toc":1563},[533,539,557,567,571,824,836,840,846,860,869,873,880,900,904,912,917,944,948,1298,1302,1372,1375,1382,1386,1389,1394,1397,1409,1425,1429,1432,1469,1472,1484,1488,1497,1507,1515,1518,1549,1552,1559],[534,535,536],"scene-controls-wrapper",{},[537,538],"objects-animated-sprite",{},[504,540,541,545,546,553,554,556],{},[542,543,544],"code",{},"\u003CAnimatedSprite \u002F>"," displays 2D animations defined in a ",[547,548,552],"a",{"href":549,"rel":550},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FTexture_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\u002Fcientos'\n\nconst currentAnimation = ref('cientosIdle')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CSuspense>\n \u003CAnimatedSprite\n image=\"https:\u002F\u002Fraw.githubusercontent.com\u002FTresjs\u002Fassets\u002Fmain\u002Ftextures\u002Fanimated-sprite\u002FcientosTexture.png\"\n atlas=\"https:\u002F\u002Fraw.githubusercontent.com\u002FTresjs\u002Fassets\u002Fmain\u002Ftextures\u002Fanimated-sprite\u002FcientosAtlas.json\"\n :animation=\"currentAnimation\"\n \u002F>\n \u003C\u002FSuspense>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\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,789,795,805,815],{"__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\u002Fcientos",[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\u002F",[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:\u002F\u002Fraw.githubusercontent.com\u002FTresjs\u002Fassets\u002Fmain\u002Ftextures\u002Fanimated-sprite\u002FcientosTexture.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:\u002F\u002Fraw.githubusercontent.com\u002FTresjs\u002Fassets\u002Fmain\u002Ftextures\u002Fanimated-sprite\u002FcientosAtlas.json",[586,770,755],{"class":591},[586,772,774,777,780,782,784,787],{"class":773,"line":580},[588,622],[586,775,776],{"class":591}," :",[586,778,779],{"class":599},"animation",[586,781,606],{"class":591},[586,783,609],{"class":591},[586,785,786],{"class":632},"currentAnimation",[586,788,755],{"class":591},[586,790,792],{"class":791,"line":581},[588,622],[586,793,794],{"class":591}," \u002F>\n",[586,796,798,801,803],{"class":588,"line":797},15,[586,799,800],{"class":591}," \u003C\u002F",[586,802,728],{"class":595},[586,804,618],{"class":591},[586,806,808,811,813],{"class":588,"line":807},16,[586,809,810],{"class":591}," \u003C\u002F",[586,812,717],{"class":595},[586,814,618],{"class":591},[586,816,818,820,822],{"class":588,"line":817},17,[586,819,689],{"class":591},[586,821,706],{"class":595},[586,823,618],{"class":591},[825,826,827],"prose-warning",{},[504,828,829,831,832,835],{},[542,830,544],{}," loads resources asynchronously, so it must be wrapped in a ",[542,833,834],{},"\u003CSuspense \u002F>",".",[568,837,839],{"id":838},"compiling-an-atlas","Compiling an atlas",[504,841,842,843,845],{},"In typical usage, ",[542,844,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,847,848,854],{},[561,849,850],{},[547,851,853],{"href":752,"rel":852},[551],"example compiled texture",[561,855,856],{},[547,857,859],{"href":768,"rel":858},[551],"example JSON atlas",[504,861,862,863,868],{},"Compiling source images into a texture atlas is usually handled by third-party software. You may find ",[547,864,867],{"href":865,"rel":866},"https:\u002F\u002Fwww.codeandweb.com\u002Ftexturepacker",[551],"TexturePacker"," useful.",[568,870,872],{"id":871},"without-an-atlas","Without an atlas",[504,874,875,876,879],{},"There may be cases where you don't want to supply an atlas to the ",[542,877,878],{},"atlas"," prop. To do so:",[558,881,882,885,888,891],{},[561,883,884],{},"Compile your source images into a single image texture.",[561,886,887],{},"Space each sprite into equally sized columns and rows in the compiled image texture.",[561,889,890],{},"Ensure no extra padding has been added to the compiled image texture.",[561,892,893,894,896,897,835],{},"Set the ",[542,895,878],{}," prop to number of columns, number of rows as ",[542,898,899],{},"[number, number]",[568,901,903],{"id":902},"spritesheets-in-the-wild","Spritesheets in the wild",[825,905,906],{},[504,907,908,909,911],{},"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,910,544],{},". In many cases, it's advisable to recompile the spritesheet.",[913,914,916],"h3",{"id":915},"how-to-recompile-an-existing-spritesheet-image","How to recompile an existing spritesheet image",[558,918,919,922,925,928,941],{},[561,920,921],{},"Cut individual sprites from the spritesheet and paste them into separate layers in an image editing application, e.g., GIMP.",[561,923,924],{},"Align the layers for animation. Toggling layer visibility on\u002Foff will show you how the animation will display, frame to frame.",[561,926,927],{},"Export layers as individual images.",[561,929,930,931,934,937,938,940],{},"Name the individual images according to the following pattern: ",[932,933],"br",{},[542,935,936],{},"[animation name][frame number].[extension]"," ",[932,939],{},"E.g., walk000.png, walk001.png, idle000.png, idle001.png",[561,942,943],{},"Compile individual images into an image texture and atlas using a texture packing application, like TexturePacker.",[568,945,947],{"id":946},"props","Props",[949,950,951,968],"table",{},[952,953,954],"thead",{},[955,956,957,962,965],"tr",{},[958,959,961],"th",{"align":960},"left","Name",[958,963,964],{"align":960},"Description",[958,966,967],{"align":960},"Default",[969,970,971,985,1025,1085,1100,1116,1140,1155,1169,1183,1197,1216,1240,1260,1279],"tbody",{},[955,972,973,977,983],{},[974,975,976],"td",{"align":960},"image",[974,978,979,982],{"align":960},[542,980,981],{},"string"," – URL of the image texture or an image dataURL. This prop is not reactive.",[974,984],{"align":960},[955,986,987,989,1023],{},[974,988,878],{"align":960},[974,990,991,994,995,1020,1022],{"align":960},[542,992,993],{},"string | Atlasish"," – ",[558,996,997,1003,1009,1014],{},[561,998,999,1000,1002],{},"If ",[542,1001,981],{},", the URL of the JSON atlas.",[561,1004,999,1005,1008],{},[542,1006,1007],{},"number",", the number of columns in the texture.",[561,1010,999,1011,1013],{},[542,1012,899],{},", the number of columns\u002Frows in the texture.",[561,1015,999,1016,1019],{},[542,1017,1018],{},"AtlasData",", the atlas as a JS object.",[932,1021],{},"This prop is not reactive.",[974,1024],{"align":960},[955,1026,1027,1030,1083],{},[974,1028,1029],{"align":960},"definitions",[974,1031,1032,1035,1036,1038,1039,1041,1043,1044,1046,1048,1049],{"align":960},[542,1033,1034],{},"Record\u003Cstring, string>"," – Specify playback frame order and repeated frames (delays). ",[542,1037,1029],{}," is a record where keys are atlas animation names and values are strings containing an animation definition.",[932,1040],{},[932,1042],{},"A \"animation definition\" comma-separated string of frame numbers with optional parentheses-surrounded durations.",[932,1045],{},[932,1047],{},"Here is how various definition strings convert to arrays of frames for playback:",[558,1050,1051,1058,1065,1071,1077],{},[561,1052,1053,1054,1057],{},"\"0,2,1\" - ",[586,1055,1056],{},"0,2,1",", i.e., play frame 0, 2, then 1.",[561,1059,1060,1061,1064],{},"\"2(10)\" - ",[586,1062,1063],{},"2,2,2,2,2,2,2,2,2,2",", i.e., play from 2 10 times.",[561,1066,1067,1068],{},"\"1-4\" - ",[586,1069,1070],{},"1,2,3,4",[561,1072,1073,1074],{},"\"10-5(2)\" - ",[586,1075,1076],{},"10,10,9,9,8,8,7,7,6,6,5,5",[561,1078,1079,1080],{},"\"1-4(3),10(2)\" - ",[586,1081,1082],{},"1,1,1,2,2,2,3,3,3,4,4,4,10,10",[974,1084],{"align":960},[955,1086,1087,1090,1095],{},[974,1088,1089],{"align":960},"fps",[974,1091,1092,1094],{"align":960},[542,1093,1007],{}," – Desired frames per second of the animation.",[974,1096,1097],{"align":960},[542,1098,1099],{},"30",[955,1101,1102,1105,1111],{},[974,1103,1104],{"align":960},"loop",[974,1106,1107,1110],{"align":960},[542,1108,1109],{},"boolean"," – Whether or not the animation should loop.",[974,1112,1113],{"align":960},[542,1114,1115],{},"true",[955,1117,1118,1120,1135],{},[974,1119,779],{"align":960},[974,1121,1122,1125,1126,1128,1129,1131,1132,1134],{"align":960},[542,1123,1124],{},"string | [number, number] | number"," – If ",[542,1127,981],{},", name of the animation to play. If ",[542,1130,899],{},", start and end frames of the animation. If ",[542,1133,1007],{},", frame number to display.",[974,1136,1137],{"align":960},[542,1138,1139],{},"0",[955,1141,1142,1145,1150],{},[974,1143,1144],{"align":960},"paused",[974,1146,1147,1149],{"align":960},[542,1148,1109],{}," – Whether the animation is paused.",[974,1151,1152],{"align":960},[542,1153,1154],{},"false",[955,1156,1157,1160,1165],{},[974,1158,1159],{"align":960},"reversed",[974,1161,1162,1164],{"align":960},[542,1163,1109],{}," – Whether to play the animation in reverse.",[974,1166,1167],{"align":960},[542,1168,1154],{},[955,1170,1171,1174,1179],{},[974,1172,1173],{"align":960},"flipX",[974,1175,1176,1178],{"align":960},[542,1177,1109],{}," – Whether the sprite should be flipped, left to right.",[974,1180,1181],{"align":960},[542,1182,1154],{},[955,1184,1185,1188,1193],{},[974,1186,1187],{"align":960},"resetOnEnd",[974,1189,1190,1192],{"align":960},[542,1191,1109],{}," – For a non-looping animation, when the animation ends, whether to display the zeroth frame.",[974,1194,1195],{"align":960},[542,1196,1154],{},[955,1198,1199,1202,1212],{},[974,1200,1201],{"align":960},"asSprite",[974,1203,1204,1206,1207],{"align":960},[542,1205,1109],{}," – Whether to display the object as a THREE.Sprite. ",[547,1208,1211],{"href":1209,"rel":1210},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F?q=sprite#api\u002Fen\u002Fobjects\u002FSprite",[551],"See THREE.Sprite",[974,1213,1214],{"align":960},[542,1215,1115],{},[955,1217,1218,1221,1235],{},[974,1219,1220],{"align":960},"center",[974,1222,1223,1226,1227,1230,1231,1234],{"align":960},[542,1224,1225],{},"TresVector2"," – Anchor point of the object. A value of ",[586,1228,1229],{},"0.5, 0.5"," corresponds to the center. ",[586,1232,1233],{},"0, 0"," is left, bottom.",[974,1236,1237],{"align":960},[542,1238,1239],{},"[0.5, 0.5]",[955,1241,1242,1245,1255],{},[974,1243,1244],{"align":960},"alphaTest",[974,1246,1247,1249,1250],{"align":960},[542,1248,1007],{}," – Alpha test value for the material. ",[547,1251,1254],{"href":1252,"rel":1253},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#api\u002Fen\u002Fmaterials\u002FMaterial.alphaTest",[551],"See THREE.Material.alphaTest",[974,1256,1257],{"align":960},[542,1258,1259],{},"0.0",[955,1261,1262,1265,1275],{},[974,1263,1264],{"align":960},"depthTest",[974,1266,1267,1269,1270],{"align":960},[542,1268,1109],{}," – Depth test value for the material. ",[547,1271,1274],{"href":1272,"rel":1273},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#api\u002Fen\u002Fmaterials\u002FMaterial.depthTest",[551],"See THREE.Material.depthTest",[974,1276,1277],{"align":960},[542,1278,1115],{},[955,1280,1281,1284,1294],{},[974,1282,1283],{"align":960},"depthWrite",[974,1285,1286,1288,1289],{"align":960},[542,1287,1109],{}," – Depth write value for the material. ",[547,1290,1293],{"href":1291,"rel":1292},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#api\u002Fen\u002Fmaterials\u002FMaterial.depthWrite",[551],"See THREE.Material.depthWrite",[974,1295,1296],{"align":960},[542,1297,1115],{},[568,1299,1301],{"id":1300},"events","Events",[949,1303,1304,1316],{},[952,1305,1306],{},[955,1307,1308,1311,1313],{},[958,1309,1310],{},"Event",[958,1312,964],{},[958,1314,1315],{},"Argument",[969,1317,1318,1333,1354],{},[955,1319,1320,1325,1328],{},[974,1321,1322],{},[542,1323,1324],{},"frame",[974,1326,1327],{},"Emitted when the displayed animation frame changes – at most once per tick, frames may be dropped",[974,1329,1330,1332],{},[542,1331,981],{}," – Name of the newly displayed frame",[955,1334,1335,1340,1349],{},[974,1336,1337],{},[542,1338,1339],{},"end",[974,1341,1342,1343,1346,1347],{},"Emitted when the animation ends – ",[542,1344,1345],{},"props.loop"," must be set to ",[542,1348,1154],{},[974,1350,1351,1353],{},[542,1352,981],{}," – Name of the ending frame",[955,1355,1356,1360,1367],{},[974,1357,1358],{},[542,1359,1104],{},[974,1361,1362,1363,1346,1365],{},"Emitted when the animation loops – ",[542,1364,1345],{},[542,1366,1115],{},[974,1368,1369,1371],{},[542,1370,981],{}," – Name of the frame at the end of the loop",[568,1373,1374],{"id":779},"Animation",[504,1376,1377,1378,1381],{},"The ",[542,1379,1380],{},":animation"," prop holds either the name of the currently playing animation or a range of frames to play, or a frame number to display.",[913,1383,1385],{"id":1384},"using-named-animations-as-animation","Using named animations as animation",[504,1387,1388],{},"When individual files are converted to a spritesheet\u002Fatlas, typically the original images' filenames will be included in the atlas.",[504,1390,1391,1393],{},[542,1392,544],{}," uses those filenames to automatically group images into animations.",[504,1395,1396],{},"Use either of the following naming conventions for your source images ...",[558,1398,1399,1404],{},[561,1400,1401],{},[542,1402,1403],{},"[animation name][frame number].[file_extension]",[561,1405,1406],{},[542,1407,1408],{},"[animation name]_[frame number].[file_extension]",[504,1410,1411,1412,1414,1415,1418,1419,1421,1422,1424],{},"... then ",[542,1413,544],{}," will automatically make all ",[542,1416,1417],{},"[animation name]"," available for playback. Just pass ",[542,1420,1417],{}," to the component's ",[542,1423,1380],{}," prop.",[913,1426,1428],{"id":1427},"example","Example",[504,1430,1431],{},"For our Cientos heart cartoon character animation, here's how the filenames map to animation names.",[949,1433,1434,1444],{},[952,1435,1436],{},[955,1437,1438,1441],{},[958,1439,1440],{},"Filenames",[958,1442,1443],{},"Animation name",[969,1445,1446,1453,1461],{},[955,1447,1448,1451],{},[974,1449,1450],{},"cientosIdle0000.png, cientosIdle0001.png, ...",[974,1452,678],{},[955,1454,1455,1458],{},[974,1456,1457],{},"cientosIdleToWalkTransition0000.png",[974,1459,1460],{},"cientosIdleToWalkTransition",[955,1462,1463,1466],{},[974,1464,1465],{},"cientosWalk0000.png, cientosWalk0001.png, ...",[974,1467,1468],{},"cientosWalk",[568,1470,1471],{"id":1029},"Definitions",[504,1473,1474,1475,1478,1479,1483],{},"You can supply an object to the ",[542,1476,1477],{},":definitions"," prop. Any ",[547,1480,1482],{"href":1481},"#animation","named animation"," can be a key. The value is a string that specifies frame order and delays.",[913,1485,1487],{"id":1486},"demo","Demo",[504,1489,1490,1491,1493,1494,835],{},"In this demo, the 'idle' animation is comprised of six different images. By default, those images will play sequentially when the ",[542,1492,1380],{}," prop is ",[542,1495,1496],{},"'idle'",[504,1498,1499,1500,1502,1503,1506],{},"But below, we've added a ",[542,1501,1477],{}," prop with this value for the ",[542,1504,1505],{},"idle"," key:",[572,1508,1513],{"className":1509,"code":1511,"language":1512},[1510],"language-text","'0-5, 0(10), 1-2, 3(20), 4-5, 0-5(3)'\n","text",[542,1514,1511],{"__ignoreMap":512},[504,1516,1517],{},"So, instead of playing images 0-5 sequentially, this animation will play instead:",[558,1519,1520,1529,1543],{},[561,1521,1522,1525,1526,1528],{},[542,1523,1524],{},"0-5"," – Play all six images (",[542,1527,1524],{},") of the animation normally.",[561,1530,1531,1534,1535,1538,1539,1542],{},[542,1532,1533],{},"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,1536,1537],{},"0(10)",") and a delay of twenty frames at the top of the bounce (",[542,1540,1541],{},"3(20)",").",[561,1544,1545,1548],{},[542,1546,1547],{},"0-5(3)"," – Finally, play all six images of the animation with a delay of three frames each.",[568,1550,1551],{"id":1220},"Center",[504,1553,1554,1555,1558],{},"In addition to being the sprite's anchor point, the ",[542,1556,1557],{},":center"," prop also controls how differently sized source images will \"grow\" and \"shrink\". Namely, they \"grow out from\" and \"shrink towards\" the center.",[1560,1561,1562],"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":1564},[1565,1566,1567,1568,1571,1572,1573,1577,1580],{"id":570,"depth":514,"text":15},{"id":838,"depth":514,"text":839},{"id":871,"depth":514,"text":872},{"id":902,"depth":514,"text":903,"children":1569},[1570],{"id":915,"depth":651,"text":916},{"id":946,"depth":514,"text":947},{"id":1300,"depth":514,"text":1301},{"id":779,"depth":514,"text":1374,"children":1574},[1575,1576],{"id":1384,"depth":651,"text":1385},{"id":1427,"depth":651,"text":1428},{"id":1029,"depth":514,"text":1471,"children":1578},[1579],{"id":1486,"depth":651,"text":1487},{"id":1220,"depth":514,"text":1551},{},{"title":425,"description":527},"TOx2TSEHnQeUR_DoVqP-W-cCHOVI1DisvWaE29LwWYA",{"id":1585,"title":429,"body":1586,"description":2072,"extension":517,"links":518,"meta":2073,"navigation":520,"path":430,"seo":2074,"stem":431,"__hash__":2075},"docs\u002F2.api\u002F9.objects\u002Fcube-camera.md",{"type":501,"value":1587,"toc":2068},[1588,1593,1603,1608,1610,1961,1963,2065],[534,1589,1590],{},[1591,1592],"objects-cube-camera",{},[504,1594,1595,1598,1599,1602],{},[542,1596,1597],{},"\u003CCubeCamera \u002F>"," creates a ",[542,1600,1601],{},"THREE.CubeCamera"," and uses it to render an environment map of your scene. The environment map is then applied to component's children.",[504,1604,1605,1607],{},[542,1606,1597],{}," makes its children invisible while rendering to the internal buffer so that they are not included in the reflection.",[568,1609,15],{"id":570},[572,1611,1614],{"className":574,"code":1612,"highlights":1613,"language":582,"meta":512,"style":512},"\u003Cscript setup lang=\"ts\">\nimport { CubeCamera, OrbitControls } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 2, 5]\" \u002F>\n \u003COrbitControls \u002F>\n\n \u003CCubeCamera :resolution=\"256\" :frames=\"Infinity\">\n \u003CTresMesh>\n \u003CTresSphereGeometry :args=\"[1, 32, 32]\" \u002F>\n \u003CTresMeshStandardMaterial :metalness=\"1\" :roughness=\"0\" \u002F>\n \u003C\u002FTresMesh>\n \u003C\u002FCubeCamera>\n\n \u003CTresAmbientLight :intensity=\"0.5\" \u002F>\n \u003CTresDirectionalLight :position=\"[0, 2, 4]\" \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[514,577,797],[542,1615,1616,1636,1662,1670,1674,1682,1690,1732,1741,1745,1782,1791,1828,1863,1872,1881,1885,1908,1943,1952],{"__ignoreMap":512},[586,1617,1618,1620,1622,1624,1626,1628,1630,1632,1634],{"class":588,"line":513},[586,1619,592],{"class":591},[586,1621,596],{"class":595},[586,1623,600],{"class":599},[586,1625,603],{"class":599},[586,1627,606],{"class":591},[586,1629,609],{"class":591},[586,1631,613],{"class":612},[586,1633,609],{"class":591},[586,1635,618],{"class":591},[586,1637,1639,1641,1643,1646,1649,1652,1654,1656,1658,1660],{"class":1638,"line":514},[588,622],[586,1640,626],{"class":625},[586,1642,629],{"class":591},[586,1644,1645],{"class":632}," CubeCamera",[586,1647,1648],{"class":591},",",[586,1650,1651],{"class":632}," OrbitControls",[586,1653,636],{"class":591},[586,1655,639],{"class":625},[586,1657,642],{"class":591},[586,1659,645],{"class":612},[586,1661,648],{"class":591},[586,1663,1664,1666,1668],{"class":588,"line":651},[586,1665,689],{"class":591},[586,1667,596],{"class":595},[586,1669,618],{"class":591},[586,1671,1672],{"class":588,"line":657},[586,1673,654],{"emptyLinePlaceholder":520},[586,1675,1676,1678,1680],{"class":588,"line":686},[586,1677,592],{"class":591},[586,1679,706],{"class":595},[586,1681,618],{"class":591},[586,1683,1684,1686,1688],{"class":588,"line":696},[586,1685,714],{"class":591},[586,1687,717],{"class":595},[586,1689,618],{"class":591},[586,1691,1692,1694,1697,1700,1703,1705,1707,1710,1713,1716,1719,1721,1724,1727,1729],{"class":588,"line":701},[586,1693,725],{"class":591},[586,1695,1696],{"class":595},"TresPerspectiveCamera",[586,1698,1699],{"class":591}," :",[586,1701,1702],{"class":599},"position",[586,1704,606],{"class":591},[586,1706,609],{"class":591},[586,1708,1709],{"class":591},"[",[586,1711,1139],{"class":1712},"sbssI",[586,1714,1715],{"class":591},", ",[586,1717,1718],{"class":1712},"2",[586,1720,1715],{"class":591},[586,1722,1723],{"class":1712},"5",[586,1725,1726],{"class":591},"]",[586,1728,609],{"class":591},[586,1730,1731],{"class":591}," \u002F>\n",[586,1733,1734,1736,1739],{"class":588,"line":711},[586,1735,725],{"class":591},[586,1737,1738],{"class":595},"OrbitControls",[586,1740,1731],{"class":591},[586,1742,1743],{"class":588,"line":722},[586,1744,654],{"emptyLinePlaceholder":520},[586,1746,1748,1750,1752,1754,1757,1759,1761,1764,1766,1768,1771,1773,1775,1778,1780],{"class":1747,"line":577},[588,622],[586,1749,725],{"class":591},[586,1751,429],{"class":595},[586,1753,1699],{"class":591},[586,1755,1756],{"class":599},"resolution",[586,1758,606],{"class":591},[586,1760,609],{"class":591},[586,1762,1763],{"class":1712},"256",[586,1765,609],{"class":591},[586,1767,1699],{"class":591},[586,1769,1770],{"class":599},"frames",[586,1772,606],{"class":591},[586,1774,609],{"class":591},[586,1776,1777],{"class":591},"Infinity",[586,1779,609],{"class":591},[586,1781,618],{"class":591},[586,1783,1784,1786,1789],{"class":588,"line":578},[586,1785,736],{"class":591},[586,1787,1788],{"class":595},"TresMesh",[586,1790,618],{"class":591},[586,1792,1793,1796,1799,1801,1804,1806,1808,1810,1813,1815,1818,1820,1822,1824,1826],{"class":588,"line":579},[586,1794,1795],{"class":591}," \u003C",[586,1797,1798],{"class":595},"TresSphereGeometry",[586,1800,1699],{"class":591},[586,1802,1803],{"class":599},"args",[586,1805,606],{"class":591},[586,1807,609],{"class":591},[586,1809,1709],{"class":591},[586,1811,1812],{"class":1712},"1",[586,1814,1715],{"class":591},[586,1816,1817],{"class":1712},"32",[586,1819,1715],{"class":591},[586,1821,1817],{"class":1712},[586,1823,1726],{"class":591},[586,1825,609],{"class":591},[586,1827,1731],{"class":591},[586,1829,1830,1832,1835,1837,1840,1842,1844,1846,1848,1850,1853,1855,1857,1859,1861],{"class":588,"line":580},[586,1831,1795],{"class":591},[586,1833,1834],{"class":595},"TresMeshStandardMaterial",[586,1836,1699],{"class":591},[586,1838,1839],{"class":599},"metalness",[586,1841,606],{"class":591},[586,1843,609],{"class":591},[586,1845,1812],{"class":1712},[586,1847,609],{"class":591},[586,1849,1699],{"class":591},[586,1851,1852],{"class":599},"roughness",[586,1854,606],{"class":591},[586,1856,609],{"class":591},[586,1858,1139],{"class":1712},[586,1860,609],{"class":591},[586,1862,1731],{"class":591},[586,1864,1865,1868,1870],{"class":588,"line":581},[586,1866,1867],{"class":591}," \u003C\u002F",[586,1869,1788],{"class":595},[586,1871,618],{"class":591},[586,1873,1875,1877,1879],{"class":1874,"line":797},[588,622],[586,1876,800],{"class":591},[586,1878,429],{"class":595},[586,1880,618],{"class":591},[586,1882,1883],{"class":588,"line":807},[586,1884,654],{"emptyLinePlaceholder":520},[586,1886,1887,1889,1892,1894,1897,1899,1901,1904,1906],{"class":588,"line":817},[586,1888,725],{"class":591},[586,1890,1891],{"class":595},"TresAmbientLight",[586,1893,1699],{"class":591},[586,1895,1896],{"class":599},"intensity",[586,1898,606],{"class":591},[586,1900,609],{"class":591},[586,1902,1903],{"class":1712},"0.5",[586,1905,609],{"class":591},[586,1907,1731],{"class":591},[586,1909,1911,1913,1916,1918,1920,1922,1924,1926,1928,1930,1932,1934,1937,1939,1941],{"class":588,"line":1910},18,[586,1912,725],{"class":591},[586,1914,1915],{"class":595},"TresDirectionalLight",[586,1917,1699],{"class":591},[586,1919,1702],{"class":599},[586,1921,606],{"class":591},[586,1923,609],{"class":591},[586,1925,1709],{"class":591},[586,1927,1139],{"class":1712},[586,1929,1715],{"class":591},[586,1931,1718],{"class":1712},[586,1933,1715],{"class":591},[586,1935,1936],{"class":1712},"4",[586,1938,1726],{"class":591},[586,1940,609],{"class":591},[586,1942,1731],{"class":591},[586,1944,1946,1948,1950],{"class":588,"line":1945},19,[586,1947,810],{"class":591},[586,1949,717],{"class":595},[586,1951,618],{"class":591},[586,1953,1955,1957,1959],{"class":588,"line":1954},20,[586,1956,689],{"class":591},[586,1958,706],{"class":595},[586,1960,618],{"class":591},[568,1962,947],{"id":946},[949,1964,1965,1976],{},[952,1966,1967],{},[955,1968,1969,1972,1974],{},[958,1970,1971],{"align":960},"Prop",[958,1973,964],{"align":960},[958,1975,967],{},[969,1977,1978,1997,2011,2026,2041,2053],{},[955,1979,1980,1984,1993],{},[974,1981,1982],{"align":960},[542,1983,1770],{},[974,1985,1986,1987,1989,1990,1992],{"align":960},"Number of frames to render. Set to ",[542,1988,1812],{}," for a static scene. ",[542,1991,1777],{}," to update continuously.",[974,1994,1995],{},[542,1996,1777],{},[955,1998,1999,2003,2006],{},[974,2000,2001],{"align":960},[542,2002,1756],{},[974,2004,2005],{"align":960},"Resolution of the FBO",[974,2007,2008],{},[542,2009,2010],{},"255",[955,2012,2013,2018,2021],{},[974,2014,2015],{"align":960},[542,2016,2017],{},"near",[974,2019,2020],{"align":960},"Camera near",[974,2022,2023],{},[542,2024,2025],{},"0.1",[955,2027,2028,2033,2036],{},[974,2029,2030],{"align":960},[542,2031,2032],{},"far",[974,2034,2035],{"align":960},"Camera far",[974,2037,2038],{},[542,2039,2040],{},"1000",[955,2042,2043,2048,2051],{},[974,2044,2045],{"align":960},[542,2046,2047],{},"envMap",[974,2049,2050],{"align":960},"Custom environment map that is temporarily set as the scene's background",[974,2052],{},[955,2054,2055,2060,2063],{},[974,2056,2057],{"align":960},[542,2058,2059],{},"fog",[974,2061,2062],{"align":960},"Custom fog that is temporarily set as the scene's fog",[974,2064],{},[1560,2066,2067],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":512,"searchDepth":513,"depth":514,"links":2069},[2070,2071],{"id":570,"depth":514,"text":15},{"id":946,"depth":514,"text":947},"Render environment maps for reflective objects.",{},{"title":429,"description":2072},"guPReQbllwq5wU5oLp9_7X7yFZih0xBoLQvebR42uzE",{"id":2077,"title":433,"body":2078,"description":3385,"extension":517,"links":518,"meta":3386,"navigation":520,"path":434,"seo":3387,"stem":435,"__hash__":3388},"docs\u002F2.api\u002F9.objects\u002Ffbo.md",{"type":501,"value":2079,"toc":3377},[2080,2086,2089,2096,2098,2875,2877,2995,2999,3001,3007,3014,3017,3286,3290,3374],[2081,2082,2083],"scene-wrapper",{},[2084,2085],"objects-fbo",{},[504,2087,2088],{},"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,2090,2091,2092,2095],{},"Cientos provides an ",[542,2093,2094],{},"\u003CFbo \u002F>"," component make it easy to use FBOs in your application.",[568,2097,15],{"id":570},[572,2099,2106],{"className":574,"code":2100,"highlights":2101,"language":582,"meta":512,"style":512},"\u003Cscript setup lang=\"ts\">\nimport { Fbo, OrbitControls } from '@tresjs\u002Fcientos'\nimport type { TresObject } from '@tresjs\u002Fcore'\nimport { TresCanvas } from '@tresjs\u002Fcore'\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\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas :clear-color=\"0x222\" @loop=\"onLoop\">\n \u003CTresPerspectiveCamera :position=\"[0, 0.5, 5]\" \u002F>\n \u003COrbitControls \u002F>\n\n \u003CTresGridHelper :args=\"[10, 10]\" \u002F>\n \u003CFbo\n ref=\"fboRef\"\n :depth=\"false\"\n :settings=\"{ samples: 1 }\"\n \u002F>\n \u003CTresMesh>\n \u003CTresBoxGeometry :args=\"[1, 1, 1]\" \u002F>\n\n \u003CTresMeshBasicMaterial\n :color=\"0xFFFFFF\"\n :map=\"fboRef?.instance?.texture ?? null\"\n \u002F>\n \u003C\u002FTresMesh>\n\n \u003CTresMesh\n ref=\"torusRef\"\n :position=\"[3, 0, 0]\"\n >\n \u003CTresTorusGeometry :args=\"[1, 0.5, 16, 100]\" \u002F>\n \u003CTresMeshNormalMaterial \u002F>\n \u003C\u002FTresMesh>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[514,2102,2103,2104,2105],23,24,25,26,[542,2107,2108,2128,2152,2175,2194,2213,2217,2257,2285,2289,2323,2354,2384,2410,2415,2423,2427,2435,2471,2503,2511,2516,2547,2555,2570,2588,2615,2621,2630,2664,2669,2677,2694,2724,2729,2738,2743,2751,2764,2792,2798,2838,2848,2857,2866],{"__ignoreMap":512},[586,2109,2110,2112,2114,2116,2118,2120,2122,2124,2126],{"class":588,"line":513},[586,2111,592],{"class":591},[586,2113,596],{"class":595},[586,2115,600],{"class":599},[586,2117,603],{"class":599},[586,2119,606],{"class":591},[586,2121,609],{"class":591},[586,2123,613],{"class":612},[586,2125,609],{"class":591},[586,2127,618],{"class":591},[586,2129,2131,2133,2135,2138,2140,2142,2144,2146,2148,2150],{"class":2130,"line":514},[588,622],[586,2132,626],{"class":625},[586,2134,629],{"class":591},[586,2136,2137],{"class":632}," Fbo",[586,2139,1648],{"class":591},[586,2141,1651],{"class":632},[586,2143,636],{"class":591},[586,2145,639],{"class":625},[586,2147,642],{"class":591},[586,2149,645],{"class":612},[586,2151,648],{"class":591},[586,2153,2154,2156,2159,2161,2164,2166,2168,2170,2173],{"class":588,"line":651},[586,2155,626],{"class":625},[586,2157,2158],{"class":625}," type",[586,2160,629],{"class":591},[586,2162,2163],{"class":632}," TresObject",[586,2165,636],{"class":591},[586,2167,639],{"class":625},[586,2169,642],{"class":591},[586,2171,2172],{"class":612},"@tresjs\u002Fcore",[586,2174,648],{"class":591},[586,2176,2177,2179,2181,2184,2186,2188,2190,2192],{"class":588,"line":657},[586,2178,626],{"class":625},[586,2180,629],{"class":591},[586,2182,2183],{"class":632}," TresCanvas",[586,2185,636],{"class":591},[586,2187,639],{"class":625},[586,2189,642],{"class":591},[586,2191,2172],{"class":612},[586,2193,648],{"class":591},[586,2195,2196,2198,2200,2203,2205,2207,2209,2211],{"class":588,"line":686},[586,2197,626],{"class":625},[586,2199,629],{"class":591},[586,2201,2202],{"class":632}," shallowRef",[586,2204,636],{"class":591},[586,2206,639],{"class":625},[586,2208,642],{"class":591},[586,2210,582],{"class":612},[586,2212,648],{"class":591},[586,2214,2215],{"class":588,"line":696},[586,2216,654],{"emptyLinePlaceholder":520},[586,2218,2219,2221,2224,2226,2228,2230,2234,2237,2239,2242,2245,2248,2250,2252,2255],{"class":588,"line":701},[586,2220,660],{"class":599},[586,2222,2223],{"class":632}," fboRef ",[586,2225,606],{"class":591},[586,2227,2202],{"class":668},[586,2229,592],{"class":591},[586,2231,2233],{"class":2232},"sBMFI","InstanceType",[586,2235,2236],{"class":591},"\u003Ctypeof",[586,2238,2137],{"class":632},[586,2240,2241],{"class":591},">",[586,2243,2244],{"class":591}," |",[586,2246,2247],{"class":2232}," null",[586,2249,2241],{"class":591},[586,2251,672],{"class":632},[586,2253,2254],{"class":591},"null",[586,2256,683],{"class":632},[586,2258,2259,2261,2264,2266,2268,2270,2273,2275,2277,2279,2281,2283],{"class":588,"line":711},[586,2260,660],{"class":599},[586,2262,2263],{"class":632}," torusRef ",[586,2265,606],{"class":591},[586,2267,2202],{"class":668},[586,2269,592],{"class":591},[586,2271,2272],{"class":2232},"TresObject",[586,2274,2244],{"class":591},[586,2276,2247],{"class":2232},[586,2278,2241],{"class":591},[586,2280,672],{"class":632},[586,2282,2254],{"class":591},[586,2284,683],{"class":632},[586,2286,2287],{"class":588,"line":722},[586,2288,654],{"emptyLinePlaceholder":520},[586,2290,2291,2294,2297,2300,2304,2307,2309,2311,2314,2317,2320],{"class":588,"line":577},[586,2292,2293],{"class":599},"function",[586,2295,2296],{"class":668}," onLoop",[586,2298,2299],{"class":591},"({",[586,2301,2303],{"class":2302},"sHdIc"," elapsed",[586,2305,2306],{"class":591}," }:",[586,2308,629],{"class":591},[586,2310,2303],{"class":595},[586,2312,2313],{"class":591},":",[586,2315,2316],{"class":2232}," number",[586,2318,2319],{"class":591}," })",[586,2321,2322],{"class":591}," {\n",[586,2324,2325,2328,2331,2334,2337,2339,2342,2345,2348,2351],{"class":588,"line":578},[586,2326,2327],{"class":625}," if",[586,2329,2330],{"class":595}," (",[586,2332,2333],{"class":591},"!",[586,2335,2336],{"class":632},"torusRef",[586,2338,835],{"class":591},[586,2340,2341],{"class":632},"value",[586,2343,2344],{"class":595},") ",[586,2346,2347],{"class":591},"{",[586,2349,2350],{"class":625}," return",[586,2352,2353],{"class":591}," }\n",[586,2355,2356,2359,2361,2363,2365,2368,2370,2373,2376,2378,2381],{"class":588,"line":579},[586,2357,2358],{"class":632}," torusRef",[586,2360,835],{"class":591},[586,2362,2341],{"class":632},[586,2364,835],{"class":591},[586,2366,2367],{"class":632},"rotation",[586,2369,835],{"class":591},[586,2371,2372],{"class":632},"x",[586,2374,2375],{"class":591}," =",[586,2377,2303],{"class":632},[586,2379,2380],{"class":591}," *",[586,2382,2383],{"class":1712}," 0.745\n",[586,2385,2386,2388,2390,2392,2394,2396,2398,2401,2403,2405,2407],{"class":588,"line":580},[586,2387,2358],{"class":632},[586,2389,835],{"class":591},[586,2391,2341],{"class":632},[586,2393,835],{"class":591},[586,2395,2367],{"class":632},[586,2397,835],{"class":591},[586,2399,2400],{"class":632},"y",[586,2402,2375],{"class":591},[586,2404,2303],{"class":632},[586,2406,2380],{"class":591},[586,2408,2409],{"class":1712}," 0.361\n",[586,2411,2412],{"class":588,"line":581},[586,2413,2414],{"class":591},"}\n",[586,2416,2417,2419,2421],{"class":588,"line":797},[586,2418,689],{"class":591},[586,2420,596],{"class":595},[586,2422,618],{"class":591},[586,2424,2425],{"class":588,"line":807},[586,2426,654],{"emptyLinePlaceholder":520},[586,2428,2429,2431,2433],{"class":588,"line":817},[586,2430,592],{"class":591},[586,2432,706],{"class":595},[586,2434,618],{"class":591},[586,2436,2437,2439,2441,2443,2446,2448,2450,2453,2455,2458,2460,2462,2464,2467,2469],{"class":588,"line":1910},[586,2438,714],{"class":591},[586,2440,717],{"class":595},[586,2442,1699],{"class":591},[586,2444,2445],{"class":599},"clear-color",[586,2447,606],{"class":591},[586,2449,609],{"class":591},[586,2451,2452],{"class":1712},"0x222",[586,2454,609],{"class":591},[586,2456,2457],{"class":591}," @",[586,2459,1104],{"class":599},[586,2461,606],{"class":591},[586,2463,609],{"class":591},[586,2465,2466],{"class":632},"onLoop",[586,2468,609],{"class":591},[586,2470,618],{"class":591},[586,2472,2473,2475,2477,2479,2481,2483,2485,2487,2489,2491,2493,2495,2497,2499,2501],{"class":588,"line":1945},[586,2474,725],{"class":591},[586,2476,1696],{"class":595},[586,2478,1699],{"class":591},[586,2480,1702],{"class":599},[586,2482,606],{"class":591},[586,2484,609],{"class":591},[586,2486,1709],{"class":591},[586,2488,1139],{"class":1712},[586,2490,1715],{"class":591},[586,2492,1903],{"class":1712},[586,2494,1715],{"class":591},[586,2496,1723],{"class":1712},[586,2498,1726],{"class":591},[586,2500,609],{"class":591},[586,2502,1731],{"class":591},[586,2504,2505,2507,2509],{"class":588,"line":1954},[586,2506,725],{"class":591},[586,2508,1738],{"class":595},[586,2510,1731],{"class":591},[586,2512,2514],{"class":588,"line":2513},21,[586,2515,654],{"emptyLinePlaceholder":520},[586,2517,2519,2521,2524,2526,2528,2530,2532,2534,2537,2539,2541,2543,2545],{"class":588,"line":2518},22,[586,2520,725],{"class":591},[586,2522,2523],{"class":595},"TresGridHelper",[586,2525,1699],{"class":591},[586,2527,1803],{"class":599},[586,2529,606],{"class":591},[586,2531,609],{"class":591},[586,2533,1709],{"class":591},[586,2535,2536],{"class":1712},"10",[586,2538,1715],{"class":591},[586,2540,2536],{"class":1712},[586,2542,1726],{"class":591},[586,2544,609],{"class":591},[586,2546,1731],{"class":591},[586,2548,2550,2552],{"class":2549,"line":2102},[588,622],[586,2551,725],{"class":591},[586,2553,2554],{"class":595},"Fbo\n",[586,2556,2558,2561,2563,2565,2568],{"class":2557,"line":2103},[588,622],[586,2559,2560],{"class":599}," ref",[586,2562,606],{"class":591},[586,2564,609],{"class":591},[586,2566,2567],{"class":612},"fboRef",[586,2569,755],{"class":591},[586,2571,2573,2576,2579,2581,2583,2586],{"class":2572,"line":2104},[588,622],[586,2574,2575],{"class":591}," :",[586,2577,2578],{"class":599},"depth",[586,2580,606],{"class":591},[586,2582,609],{"class":591},[586,2584,1154],{"class":2585},"sfNiH",[586,2587,755],{"class":591},[586,2589,2591,2593,2596,2598,2600,2603,2606,2609,2611,2613],{"class":2590,"line":2105},[588,622],[586,2592,2575],{"class":591},[586,2594,2595],{"class":599},"settings",[586,2597,606],{"class":591},[586,2599,609],{"class":591},[586,2601,2602],{"class":591},"{ ",[586,2604,2605],{"class":595},"samples",[586,2607,2608],{"class":591},": ",[586,2610,1812],{"class":1712},[586,2612,636],{"class":591},[586,2614,755],{"class":591},[586,2616,2618],{"class":588,"line":2617},27,[586,2619,2620],{"class":591}," \u002F>\n",[586,2622,2624,2626,2628],{"class":588,"line":2623},28,[586,2625,725],{"class":591},[586,2627,1788],{"class":595},[586,2629,618],{"class":591},[586,2631,2633,2635,2638,2640,2642,2644,2646,2648,2650,2652,2654,2656,2658,2660,2662],{"class":588,"line":2632},29,[586,2634,736],{"class":591},[586,2636,2637],{"class":595},"TresBoxGeometry",[586,2639,1699],{"class":591},[586,2641,1803],{"class":599},[586,2643,606],{"class":591},[586,2645,609],{"class":591},[586,2647,1709],{"class":591},[586,2649,1812],{"class":1712},[586,2651,1715],{"class":591},[586,2653,1812],{"class":1712},[586,2655,1715],{"class":591},[586,2657,1812],{"class":1712},[586,2659,1726],{"class":591},[586,2661,609],{"class":591},[586,2663,1731],{"class":591},[586,2665,2667],{"class":588,"line":2666},30,[586,2668,654],{"emptyLinePlaceholder":520},[586,2670,2672,2674],{"class":588,"line":2671},31,[586,2673,736],{"class":591},[586,2675,2676],{"class":595},"TresMeshBasicMaterial\n",[586,2678,2680,2682,2685,2687,2689,2692],{"class":588,"line":2679},32,[586,2681,776],{"class":591},[586,2683,2684],{"class":599},"color",[586,2686,606],{"class":591},[586,2688,609],{"class":591},[586,2690,2691],{"class":1712},"0xFFFFFF",[586,2693,755],{"class":591},[586,2695,2697,2699,2702,2704,2706,2708,2711,2714,2716,2719,2722],{"class":588,"line":2696},33,[586,2698,776],{"class":591},[586,2700,2701],{"class":599},"map",[586,2703,606],{"class":591},[586,2705,609],{"class":591},[586,2707,2567],{"class":632},[586,2709,2710],{"class":591},"?.",[586,2712,2713],{"class":632},"instance",[586,2715,2710],{"class":591},[586,2717,2718],{"class":632},"texture",[586,2720,2721],{"class":591}," ?? null",[586,2723,755],{"class":591},[586,2725,2727],{"class":588,"line":2726},34,[586,2728,794],{"class":591},[586,2730,2732,2734,2736],{"class":588,"line":2731},35,[586,2733,800],{"class":591},[586,2735,1788],{"class":595},[586,2737,618],{"class":591},[586,2739,2741],{"class":588,"line":2740},36,[586,2742,654],{"emptyLinePlaceholder":520},[586,2744,2746,2748],{"class":588,"line":2745},37,[586,2747,725],{"class":591},[586,2749,2750],{"class":595},"TresMesh\n",[586,2752,2754,2756,2758,2760,2762],{"class":588,"line":2753},38,[586,2755,2560],{"class":599},[586,2757,606],{"class":591},[586,2759,609],{"class":591},[586,2761,2336],{"class":612},[586,2763,755],{"class":591},[586,2765,2767,2769,2771,2773,2775,2777,2780,2782,2784,2786,2788,2790],{"class":588,"line":2766},39,[586,2768,2575],{"class":591},[586,2770,1702],{"class":599},[586,2772,606],{"class":591},[586,2774,609],{"class":591},[586,2776,1709],{"class":591},[586,2778,2779],{"class":1712},"3",[586,2781,1715],{"class":591},[586,2783,1139],{"class":1712},[586,2785,1715],{"class":591},[586,2787,1139],{"class":1712},[586,2789,1726],{"class":591},[586,2791,755],{"class":591},[586,2793,2795],{"class":588,"line":2794},40,[586,2796,2797],{"class":591}," >\n",[586,2799,2801,2803,2806,2808,2810,2812,2814,2816,2818,2820,2822,2824,2827,2829,2832,2834,2836],{"class":588,"line":2800},41,[586,2802,736],{"class":591},[586,2804,2805],{"class":595},"TresTorusGeometry",[586,2807,1699],{"class":591},[586,2809,1803],{"class":599},[586,2811,606],{"class":591},[586,2813,609],{"class":591},[586,2815,1709],{"class":591},[586,2817,1812],{"class":1712},[586,2819,1715],{"class":591},[586,2821,1903],{"class":1712},[586,2823,1715],{"class":591},[586,2825,2826],{"class":1712},"16",[586,2828,1715],{"class":591},[586,2830,2831],{"class":1712},"100",[586,2833,1726],{"class":591},[586,2835,609],{"class":591},[586,2837,1731],{"class":591},[586,2839,2841,2843,2846],{"class":588,"line":2840},42,[586,2842,736],{"class":591},[586,2844,2845],{"class":595},"TresMeshNormalMaterial",[586,2847,1731],{"class":591},[586,2849,2851,2853,2855],{"class":588,"line":2850},43,[586,2852,800],{"class":591},[586,2854,1788],{"class":595},[586,2856,618],{"class":591},[586,2858,2860,2862,2864],{"class":588,"line":2859},44,[586,2861,810],{"class":591},[586,2863,717],{"class":595},[586,2865,618],{"class":591},[586,2867,2869,2871,2873],{"class":588,"line":2868},45,[586,2870,689],{"class":591},[586,2872,706],{"class":595},[586,2874,618],{"class":591},[568,2876,947],{"id":946},[949,2878,2879,2889],{},[952,2880,2881],{},[955,2882,2883,2885,2887],{},[958,2884,1971],{"align":960},[958,2886,964],{"align":960},[958,2888,967],{},[969,2890,2891,2909,2926,2950,2977],{},[955,2892,2893,2901,2906],{},[974,2894,2895],{"align":960},[2896,2897,2898],"strong",{},[542,2899,2900],{},"width",[974,2902,2903,2905],{"align":960},[542,2904,1007],{}," - The width of the FBO.",[974,2907,2908],{},"Width of the canvas",[955,2910,2911,2918,2923],{},[974,2912,2913],{"align":960},[2896,2914,2915],{},[542,2916,2917],{},"height",[974,2919,2920,2922],{"align":960},[542,2921,1007],{}," - the height of the FBO",[974,2924,2925],{},"Height of the canvas",[955,2927,2928,2934,2946],{},[974,2929,2930],{"align":960},[2896,2931,2932],{},[542,2933,2578],{},[974,2935,2936,2938,2939,835],{"align":960},[542,2937,1109],{}," - Whether or not the FBO should render the depth to a ",[547,2940,2943],{"href":2941,"rel":2942},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F?q=webglre#api\u002Fen\u002Frenderers\u002FWebGLRenderTarget.depthTexture",[551],[542,2944,2945],{},"depthTexture",[974,2947,2948],{},[542,2949,1154],{},[955,2951,2952,2958,2972],{},[974,2953,2954],{"align":960},[2896,2955,2956],{},[542,2957,2595],{},[974,2959,2960,2963,2964],{"align":960},[542,2961,2962],{},"WebGLRenderTargetOptions"," - Every other configuration property for the ",[547,2965,2968,2971],{"href":2966,"rel":2967},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#api\u002Fen\u002Frenderers\u002FWebGLRenderTarget",[551],[542,2969,2970],{},"WebGLRenderTarget"," class",[974,2973,2974],{},[542,2975,2976],{},"{}",[955,2978,2979,2986,2991],{},[974,2980,2981],{"align":960},[2896,2982,2983],{},[542,2984,2985],{},"autoRender",[974,2987,2988,2990],{"align":960},[542,2989,1109],{}," - Whether to automatically render the FBO on the default scene.",[974,2992,2993],{},[542,2994,1115],{},[568,2996,2998],{"id":2997},"usefbo","useFBO",[504,3000,2088],{},[504,3002,3003,3004,3006],{},"Cientos provides a ",[542,3005,2998],{}," composable to make it easy to use FBOs in your application.",[825,3008,3009],{},[504,3010,1377,3011,3013],{},[542,3012,2998],{}," composable must be used inside of a child component since it needs the context of TresCanvas.",[913,3015,15],{"id":3016},"usage-1",[572,3018,3021],{"className":574,"code":3019,"highlights":3020,"language":582,"meta":512,"style":512},"\u003Cscript setup lang=\"ts\">\nimport { useFBO } from '@tresjs\u002Fcientos'\n\nconst fboTarget = useFBO({\n depth: true,\n width: 512,\n height: 512,\n settings: {\n samples: 1,\n },\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresMesh>\n \u003CTresBoxGeometry :args=\"[1, 1, 1]\" \u002F>\n\n \u003CTresMeshBasicMaterial\n :color=\"0xFFFFFF\"\n :map=\"fboTarget?.texture ?? null\"\n \u002F>\n \u003C\u002FTresMesh>\n\u003C\u002Ftemplate>\n\n",[514,657,686,696,701,711,722,577,578,1954],[542,3022,3023,3043,3063,3067,3084,3098,3111,3123,3133,3146,3152,3160,3168,3172,3180,3188,3220,3224,3230,3244,3266,3270,3278],{"__ignoreMap":512},[586,3024,3025,3027,3029,3031,3033,3035,3037,3039,3041],{"class":588,"line":513},[586,3026,592],{"class":591},[586,3028,596],{"class":595},[586,3030,600],{"class":599},[586,3032,603],{"class":599},[586,3034,606],{"class":591},[586,3036,609],{"class":591},[586,3038,613],{"class":612},[586,3040,609],{"class":591},[586,3042,618],{"class":591},[586,3044,3046,3048,3050,3053,3055,3057,3059,3061],{"class":3045,"line":514},[588,622],[586,3047,626],{"class":625},[586,3049,629],{"class":591},[586,3051,3052],{"class":632}," useFBO",[586,3054,636],{"class":591},[586,3056,639],{"class":625},[586,3058,642],{"class":591},[586,3060,645],{"class":612},[586,3062,648],{"class":591},[586,3064,3065],{"class":588,"line":651},[586,3066,654],{"emptyLinePlaceholder":520},[586,3068,3070,3072,3075,3077,3079,3081],{"class":3069,"line":657},[588,622],[586,3071,660],{"class":599},[586,3073,3074],{"class":632}," fboTarget ",[586,3076,606],{"class":591},[586,3078,3052],{"class":668},[586,3080,672],{"class":632},[586,3082,3083],{"class":591},"{\n",[586,3085,3087,3090,3092,3095],{"class":3086,"line":686},[588,622],[586,3088,3089],{"class":595}," depth",[586,3091,2313],{"class":591},[586,3093,3094],{"class":2585}," true",[586,3096,3097],{"class":591},",\n",[586,3099,3101,3104,3106,3109],{"class":3100,"line":696},[588,622],[586,3102,3103],{"class":595}," width",[586,3105,2313],{"class":591},[586,3107,3108],{"class":1712}," 512",[586,3110,3097],{"class":591},[586,3112,3114,3117,3119,3121],{"class":3113,"line":701},[588,622],[586,3115,3116],{"class":595}," height",[586,3118,2313],{"class":591},[586,3120,3108],{"class":1712},[586,3122,3097],{"class":591},[586,3124,3126,3129,3131],{"class":3125,"line":711},[588,622],[586,3127,3128],{"class":595}," settings",[586,3130,2313],{"class":591},[586,3132,2322],{"class":591},[586,3134,3136,3139,3141,3144],{"class":3135,"line":722},[588,622],[586,3137,3138],{"class":595}," samples",[586,3140,2313],{"class":591},[586,3142,3143],{"class":1712}," 1",[586,3145,3097],{"class":591},[586,3147,3149],{"class":3148,"line":577},[588,622],[586,3150,3151],{"class":591}," },\n",[586,3153,3155,3158],{"class":3154,"line":578},[588,622],[586,3156,3157],{"class":591},"}",[586,3159,683],{"class":632},[586,3161,3162,3164,3166],{"class":588,"line":579},[586,3163,689],{"class":591},[586,3165,596],{"class":595},[586,3167,618],{"class":591},[586,3169,3170],{"class":588,"line":580},[586,3171,654],{"emptyLinePlaceholder":520},[586,3173,3174,3176,3178],{"class":588,"line":581},[586,3175,592],{"class":591},[586,3177,706],{"class":595},[586,3179,618],{"class":591},[586,3181,3182,3184,3186],{"class":588,"line":797},[586,3183,714],{"class":591},[586,3185,1788],{"class":595},[586,3187,618],{"class":591},[586,3189,3190,3192,3194,3196,3198,3200,3202,3204,3206,3208,3210,3212,3214,3216,3218],{"class":588,"line":807},[586,3191,725],{"class":591},[586,3193,2637],{"class":595},[586,3195,1699],{"class":591},[586,3197,1803],{"class":599},[586,3199,606],{"class":591},[586,3201,609],{"class":591},[586,3203,1709],{"class":591},[586,3205,1812],{"class":1712},[586,3207,1715],{"class":591},[586,3209,1812],{"class":1712},[586,3211,1715],{"class":591},[586,3213,1812],{"class":1712},[586,3215,1726],{"class":591},[586,3217,609],{"class":591},[586,3219,1731],{"class":591},[586,3221,3222],{"class":588,"line":817},[586,3223,654],{"emptyLinePlaceholder":520},[586,3225,3226,3228],{"class":588,"line":1910},[586,3227,725],{"class":591},[586,3229,2676],{"class":595},[586,3231,3232,3234,3236,3238,3240,3242],{"class":588,"line":1945},[586,3233,2575],{"class":591},[586,3235,2684],{"class":599},[586,3237,606],{"class":591},[586,3239,609],{"class":591},[586,3241,2691],{"class":1712},[586,3243,755],{"class":591},[586,3245,3247,3249,3251,3253,3255,3258,3260,3262,3264],{"class":3246,"line":1954},[588,622],[586,3248,2575],{"class":591},[586,3250,2701],{"class":599},[586,3252,606],{"class":591},[586,3254,609],{"class":591},[586,3256,3257],{"class":632},"fboTarget",[586,3259,2710],{"class":591},[586,3261,2718],{"class":632},[586,3263,2721],{"class":591},[586,3265,755],{"class":591},[586,3267,3268],{"class":588,"line":2513},[586,3269,2620],{"class":591},[586,3271,3272,3274,3276],{"class":588,"line":2518},[586,3273,810],{"class":591},[586,3275,1788],{"class":595},[586,3277,618],{"class":591},[586,3279,3280,3282,3284],{"class":588,"line":2102},[586,3281,689],{"class":591},[586,3283,706],{"class":595},[586,3285,618],{"class":591},[913,3287,3289],{"id":3288},"options","Options",[949,3291,3292,3302],{},[952,3293,3294],{},[955,3295,3296,3298,3300],{},[958,3297,1971],{"align":960},[958,3299,964],{"align":960},[958,3301,967],{},[969,3303,3304,3318,3332,3353],{},[955,3305,3306,3312,3316],{},[974,3307,3308],{"align":960},[2896,3309,3310],{},[542,3311,2900],{},[974,3313,3314,2905],{"align":960},[542,3315,1007],{},[974,3317,2908],{},[955,3319,3320,3326,3330],{},[974,3321,3322],{"align":960},[2896,3323,3324],{},[542,3325,2917],{},[974,3327,3328,2922],{"align":960},[542,3329,1007],{},[974,3331,2925],{},[955,3333,3334,3340,3349],{},[974,3335,3336],{"align":960},[2896,3337,3338],{},[542,3339,2578],{},[974,3341,3342,2938,3344,835],{"align":960},[542,3343,1109],{},[547,3345,3347],{"href":2941,"rel":3346},[551],[542,3348,2945],{},[974,3350,3351],{},[542,3352,1154],{},[955,3354,3355,3361,3370],{},[974,3356,3357],{"align":960},[2896,3358,3359],{},[542,3360,2595],{},[974,3362,3363,2963,3365],{"align":960},[542,3364,2962],{},[547,3366,3368,2971],{"href":2966,"rel":3367},[551],[542,3369,2970],{},[974,3371,3372],{},[542,3373,2976],{},[1560,3375,3376],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":512,"searchDepth":513,"depth":514,"links":3378},[3379,3380,3381],{"id":570,"depth":514,"text":15},{"id":946,"depth":514,"text":947},{"id":2997,"depth":514,"text":2998,"children":3382},[3383,3384],{"id":3016,"depth":651,"text":15},{"id":3288,"depth":651,"text":3289},"Render to texture using Frame Buffer Objects.",{},{"title":433,"description":3385},"ch0ffhPITGouVRylpEdp2CmD8Fl-JOZCHt9eio9zKpc",{"id":3390,"title":437,"body":3391,"description":3817,"extension":517,"links":518,"meta":3818,"navigation":520,"path":438,"seo":3819,"stem":439,"__hash__":3820},"docs\u002F2.api\u002F9.objects\u002Fgradient-texture.md",{"type":501,"value":3392,"toc":3813},[3393,3398,3407,3409,3664,3666,3811],[2081,3394,3395],{},[3396,3397],"objects-gradient-texture",{},[504,3399,3400,3403,3404,3406],{},[542,3401,3402],{},"\u003CGradientTexture \u002F>"," creates a gradient in a THREE.Texture and attaches it to its parent THREE.Material's ",[542,3405,2701],{}," by default.",[568,3408,15],{"id":570},[572,3410,3412],{"className":574,"code":3411,"language":582,"meta":512,"style":512},"\u003Cscript setup lang=\"ts\">\nimport { GradientTexture } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 0, 5]\" \u002F>\n\n \u003CTresMesh>\n \u003CTresPlaneGeometry :args=\"[2, 2]\" \u002F>\n \u003CTresMeshBasicMaterial>\n \u003CGradientTexture\n :stops=\"[0, 1]\"\n :colors=\"['#ff0000', '#0000ff']\"\n \u002F>\n \u003C\u002FTresMeshBasicMaterial>\n \u003C\u002FTresMesh>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[542,3413,3414,3434,3453,3461,3465,3473,3481,3513,3517,3525,3554,3563,3570,3594,3627,3632,3640,3648,3656],{"__ignoreMap":512},[586,3415,3416,3418,3420,3422,3424,3426,3428,3430,3432],{"class":588,"line":513},[586,3417,592],{"class":591},[586,3419,596],{"class":595},[586,3421,600],{"class":599},[586,3423,603],{"class":599},[586,3425,606],{"class":591},[586,3427,609],{"class":591},[586,3429,613],{"class":612},[586,3431,609],{"class":591},[586,3433,618],{"class":591},[586,3435,3436,3438,3440,3443,3445,3447,3449,3451],{"class":588,"line":514},[586,3437,626],{"class":625},[586,3439,629],{"class":591},[586,3441,3442],{"class":632}," GradientTexture",[586,3444,636],{"class":591},[586,3446,639],{"class":625},[586,3448,642],{"class":591},[586,3450,645],{"class":612},[586,3452,648],{"class":591},[586,3454,3455,3457,3459],{"class":588,"line":651},[586,3456,689],{"class":591},[586,3458,596],{"class":595},[586,3460,618],{"class":591},[586,3462,3463],{"class":588,"line":657},[586,3464,654],{"emptyLinePlaceholder":520},[586,3466,3467,3469,3471],{"class":588,"line":686},[586,3468,592],{"class":591},[586,3470,706],{"class":595},[586,3472,618],{"class":591},[586,3474,3475,3477,3479],{"class":588,"line":696},[586,3476,714],{"class":591},[586,3478,717],{"class":595},[586,3480,618],{"class":591},[586,3482,3483,3485,3487,3489,3491,3493,3495,3497,3499,3501,3503,3505,3507,3509,3511],{"class":588,"line":701},[586,3484,725],{"class":591},[586,3486,1696],{"class":595},[586,3488,1699],{"class":591},[586,3490,1702],{"class":599},[586,3492,606],{"class":591},[586,3494,609],{"class":591},[586,3496,1709],{"class":591},[586,3498,1139],{"class":1712},[586,3500,1715],{"class":591},[586,3502,1139],{"class":1712},[586,3504,1715],{"class":591},[586,3506,1723],{"class":1712},[586,3508,1726],{"class":591},[586,3510,609],{"class":591},[586,3512,1731],{"class":591},[586,3514,3515],{"class":588,"line":711},[586,3516,654],{"emptyLinePlaceholder":520},[586,3518,3519,3521,3523],{"class":588,"line":722},[586,3520,725],{"class":591},[586,3522,1788],{"class":595},[586,3524,618],{"class":591},[586,3526,3527,3529,3532,3534,3536,3538,3540,3542,3544,3546,3548,3550,3552],{"class":588,"line":577},[586,3528,736],{"class":591},[586,3530,3531],{"class":595},"TresPlaneGeometry",[586,3533,1699],{"class":591},[586,3535,1803],{"class":599},[586,3537,606],{"class":591},[586,3539,609],{"class":591},[586,3541,1709],{"class":591},[586,3543,1718],{"class":1712},[586,3545,1715],{"class":591},[586,3547,1718],{"class":1712},[586,3549,1726],{"class":591},[586,3551,609],{"class":591},[586,3553,1731],{"class":591},[586,3555,3556,3558,3561],{"class":588,"line":578},[586,3557,736],{"class":591},[586,3559,3560],{"class":595},"TresMeshBasicMaterial",[586,3562,618],{"class":591},[586,3564,3565,3567],{"class":588,"line":579},[586,3566,1795],{"class":591},[586,3568,3569],{"class":595},"GradientTexture\n",[586,3571,3572,3575,3578,3580,3582,3584,3586,3588,3590,3592],{"class":588,"line":580},[586,3573,3574],{"class":591}," :",[586,3576,3577],{"class":599},"stops",[586,3579,606],{"class":591},[586,3581,609],{"class":591},[586,3583,1709],{"class":591},[586,3585,1139],{"class":1712},[586,3587,1715],{"class":591},[586,3589,1812],{"class":1712},[586,3591,1726],{"class":591},[586,3593,755],{"class":591},[586,3595,3596,3598,3601,3603,3605,3607,3609,3612,3614,3616,3618,3621,3623,3625],{"class":588,"line":581},[586,3597,3574],{"class":591},[586,3599,3600],{"class":599},"colors",[586,3602,606],{"class":591},[586,3604,609],{"class":591},[586,3606,1709],{"class":591},[586,3608,675],{"class":591},[586,3610,3611],{"class":612},"#ff0000",[586,3613,675],{"class":591},[586,3615,1715],{"class":591},[586,3617,675],{"class":591},[586,3619,3620],{"class":612},"#0000ff",[586,3622,675],{"class":591},[586,3624,1726],{"class":591},[586,3626,755],{"class":591},[586,3628,3629],{"class":588,"line":797},[586,3630,3631],{"class":591}," \u002F>\n",[586,3633,3634,3636,3638],{"class":588,"line":807},[586,3635,1867],{"class":591},[586,3637,3560],{"class":595},[586,3639,618],{"class":591},[586,3641,3642,3644,3646],{"class":588,"line":817},[586,3643,800],{"class":591},[586,3645,1788],{"class":595},[586,3647,618],{"class":591},[586,3649,3650,3652,3654],{"class":588,"line":1910},[586,3651,810],{"class":591},[586,3653,717],{"class":595},[586,3655,618],{"class":591},[586,3657,3658,3660,3662],{"class":588,"line":1945},[586,3659,689],{"class":591},[586,3661,706],{"class":595},[586,3663,618],{"class":591},[568,3665,947],{"id":946},[949,3667,3668,3678],{},[952,3669,3670],{},[955,3671,3672,3674,3676],{},[958,3673,1971],{"align":960},[958,3675,964],{"align":960},[958,3677,967],{},[969,3679,3680,3708,3722,3737,3751,3764,3782,3796],{},[955,3681,3682,3686,3706],{},[974,3683,3684],{"align":960},[542,3685,3577],{},[974,3687,3688,3689,3692,3693,3695,3696,3698,3699,3702,3703,835],{"align":960},"A ",[542,3690,3691],{},"number[]"," of values between ",[542,3694,1139],{}," and ",[542,3697,1812],{}," representing the color positions in the gradient. ",[542,3700,3701],{},"stops.length"," should match ",[542,3704,3705],{},"color.length",[974,3707],{},[955,3709,3710,3714,3720],{},[974,3711,3712],{"align":960},[542,3713,3600],{},[974,3715,3688,3716,3719],{"align":960},[542,3717,3718],{},"THREE.ColorRepresentation[]"," representing the colors in the gradient.",[974,3721],{},[955,3723,3724,3729,3732],{},[974,3725,3726],{"align":960},[542,3727,3728],{},"attach",[974,3730,3731],{"align":960},"Where the component should be attached within its parent.",[974,3733,3734],{},[542,3735,3736],{},"'map'",[955,3738,3739,3743,3746],{},[974,3740,3741],{"align":960},[542,3742,2917],{},[974,3744,3745],{"align":960},"Height of the canvas used to draw the gradient.",[974,3747,3748],{},[542,3749,3750],{},"1024",[955,3752,3753,3757,3760],{},[974,3754,3755],{"align":960},[542,3756,2900],{},[974,3758,3759],{"align":960},"Width of the canvas used to draw the gradient.",[974,3761,3762],{},[542,3763,2826],{},[955,3765,3766,3771,3777],{},[974,3767,3768],{"align":960},[542,3769,3770],{},"type",[974,3772,3773,3776],{"align":960},[542,3774,3775],{},"'linear' | 'radial'"," Type of gradient to draw.",[974,3778,3779],{},[542,3780,3781],{},"'linear'",[955,3783,3784,3789,3792],{},[974,3785,3786],{"align":960},[542,3787,3788],{},"innerCircleRadius",[974,3790,3791],{"align":960},"Radius of the inner circle of a radial gradient.",[974,3793,3794],{},[542,3795,1139],{},[955,3797,3798,3803,3806],{},[974,3799,3800],{"align":960},[542,3801,3802],{},"outerCircleRadius",[974,3804,3805],{"align":960},"Radius of the outer circle of a radial gradient.",[974,3807,3808],{},[542,3809,3810],{},"'auto'",[1560,3812,2067],{},{"title":512,"searchDepth":513,"depth":514,"links":3814},[3815,3816],{"id":570,"depth":514,"text":15},{"id":946,"depth":514,"text":947},"Create gradient textures for materials.",{},{"title":437,"description":3817},"vYfm15fEwNZgRGLtXSYlU49KPYrI7wEBqbJQsM4JeNo",{"id":3822,"title":441,"body":3823,"description":9869,"extension":517,"links":518,"meta":9870,"navigation":520,"path":442,"seo":9871,"stem":443,"__hash__":9872},"docs\u002F2.api\u002F9.objects\u002Fhtml.md",{"type":501,"value":3824,"toc":9848},[3825,3828,3842,3847,3849,4319,4323,4330,4335,4351,4359,4364,4509,4515,4519,4543,4548,4678,4682,4706,4709,4733,4751,4772,4777,4942,4946,4951,4975,4987,4992,6914,6918,6942,6963,7004,7008,7023,7037,7078,7085,7109,7128,7133,8729,8735,8741,8746,8947,8964,8966,9329,9331,9351,9355,9437,9441,9619,9824,9827,9845],[504,3826,3827],{},"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,3829,3830,3831,3695,3834,3837,3838,3841],{},"🚀 Works seamlessly with both ",[2896,3832,3833],{},"PerspectiveCamera",[2896,3835,3836],{},"OrthographicCamera"," — the active camera is automatically detected by the ",[542,3839,3840],{},"\u003CHtml>"," component.",[2081,3843,3844],{},[3845,3846],"objects-html",{},[568,3848,15],{"id":570},[572,3850,3853],{"className":574,"code":3851,"highlights":3852,"language":582,"meta":512,"style":512},"\u003Cscript setup lang=\"ts\">\nimport { Html, OrbitControls } from '@tresjs\u002Fcientos'\nimport { TresCanvas } from '@tresjs\u002Fcore'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#82DBC5\">\n \u003CTresPerspectiveCamera :position=\"[2, 2, 5]\" \u002F>\n \u003COrbitControls \u002F>\n \u003CTresMesh :position=\"[1, 1, 1]\">\n \u003CTresBoxGeometry \u002F>\n \u003CTresMeshNormalMaterial \u002F>\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\u002Fh1>\n \u003C\u002FHtml>\n \u003C\u002FTresMesh>\n \u003CTresGridHelper \u002F>\n \u003CTresAmbientLight \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\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\u002Fstyle>\n",[514,580,581,797,807,817,1910],[542,3854,3855,3875,3899,3917,3925,3929,3937,3957,3989,3997,4029,4037,4045,4053,4059,4065,4081,4109,4138,4143,4172,4181,4189,4197,4205,4213,4221,4232,4240,4257,4271,4283,4295,4307,4311],{"__ignoreMap":512},[586,3856,3857,3859,3861,3863,3865,3867,3869,3871,3873],{"class":588,"line":513},[586,3858,592],{"class":591},[586,3860,596],{"class":595},[586,3862,600],{"class":599},[586,3864,603],{"class":599},[586,3866,606],{"class":591},[586,3868,609],{"class":591},[586,3870,613],{"class":612},[586,3872,609],{"class":591},[586,3874,618],{"class":591},[586,3876,3878,3880,3882,3885,3887,3889,3891,3893,3895,3897],{"class":3877,"line":514},[588,622],[586,3879,626],{"class":625},[586,3881,629],{"class":591},[586,3883,3884],{"class":632}," Html",[586,3886,1648],{"class":591},[586,3888,1651],{"class":632},[586,3890,636],{"class":591},[586,3892,639],{"class":625},[586,3894,642],{"class":591},[586,3896,645],{"class":612},[586,3898,648],{"class":591},[586,3900,3901,3903,3905,3907,3909,3911,3913,3915],{"class":588,"line":651},[586,3902,626],{"class":625},[586,3904,629],{"class":591},[586,3906,2183],{"class":632},[586,3908,636],{"class":591},[586,3910,639],{"class":625},[586,3912,642],{"class":591},[586,3914,2172],{"class":612},[586,3916,648],{"class":591},[586,3918,3919,3921,3923],{"class":588,"line":657},[586,3920,689],{"class":591},[586,3922,596],{"class":595},[586,3924,618],{"class":591},[586,3926,3927],{"class":588,"line":686},[586,3928,654],{"emptyLinePlaceholder":520},[586,3930,3931,3933,3935],{"class":588,"line":696},[586,3932,592],{"class":591},[586,3934,706],{"class":595},[586,3936,618],{"class":591},[586,3938,3939,3941,3943,3946,3948,3950,3953,3955],{"class":588,"line":701},[586,3940,714],{"class":591},[586,3942,717],{"class":595},[586,3944,3945],{"class":599}," clear-color",[586,3947,606],{"class":591},[586,3949,609],{"class":591},[586,3951,3952],{"class":612},"#82DBC5",[586,3954,609],{"class":591},[586,3956,618],{"class":591},[586,3958,3959,3961,3963,3965,3967,3969,3971,3973,3975,3977,3979,3981,3983,3985,3987],{"class":588,"line":711},[586,3960,725],{"class":591},[586,3962,1696],{"class":595},[586,3964,1699],{"class":591},[586,3966,1702],{"class":599},[586,3968,606],{"class":591},[586,3970,609],{"class":591},[586,3972,1709],{"class":591},[586,3974,1718],{"class":1712},[586,3976,1715],{"class":591},[586,3978,1718],{"class":1712},[586,3980,1715],{"class":591},[586,3982,1723],{"class":1712},[586,3984,1726],{"class":591},[586,3986,609],{"class":591},[586,3988,1731],{"class":591},[586,3990,3991,3993,3995],{"class":588,"line":722},[586,3992,725],{"class":591},[586,3994,1738],{"class":595},[586,3996,1731],{"class":591},[586,3998,3999,4001,4003,4005,4007,4009,4011,4013,4015,4017,4019,4021,4023,4025,4027],{"class":588,"line":577},[586,4000,725],{"class":591},[586,4002,1788],{"class":595},[586,4004,1699],{"class":591},[586,4006,1702],{"class":599},[586,4008,606],{"class":591},[586,4010,609],{"class":591},[586,4012,1709],{"class":591},[586,4014,1812],{"class":1712},[586,4016,1715],{"class":591},[586,4018,1812],{"class":1712},[586,4020,1715],{"class":591},[586,4022,1812],{"class":1712},[586,4024,1726],{"class":591},[586,4026,609],{"class":591},[586,4028,618],{"class":591},[586,4030,4031,4033,4035],{"class":588,"line":578},[586,4032,736],{"class":591},[586,4034,2637],{"class":595},[586,4036,1731],{"class":591},[586,4038,4039,4041,4043],{"class":588,"line":579},[586,4040,736],{"class":591},[586,4042,2845],{"class":595},[586,4044,1731],{"class":591},[586,4046,4048,4050],{"class":4047,"line":580},[588,622],[586,4049,736],{"class":591},[586,4051,4052],{"class":595},"Html\n",[586,4054,4056],{"class":4055,"line":581},[588,622],[586,4057,4058],{"class":599}," center\n",[586,4060,4062],{"class":4061,"line":797},[588,622],[586,4063,4064],{"class":599}," transform\n",[586,4066,4068,4070,4073,4075,4077,4079],{"class":4067,"line":807},[588,622],[586,4069,776],{"class":591},[586,4071,4072],{"class":599},"distance-factor",[586,4074,606],{"class":591},[586,4076,609],{"class":591},[586,4078,1936],{"class":1712},[586,4080,755],{"class":591},[586,4082,4084,4086,4088,4090,4092,4094,4096,4098,4100,4102,4105,4107],{"class":4083,"line":817},[588,622],[586,4085,776],{"class":591},[586,4087,1702],{"class":599},[586,4089,606],{"class":591},[586,4091,609],{"class":591},[586,4093,1709],{"class":591},[586,4095,1139],{"class":1712},[586,4097,1715],{"class":591},[586,4099,1139],{"class":1712},[586,4101,1715],{"class":591},[586,4103,4104],{"class":1712},"0.65",[586,4106,1726],{"class":591},[586,4108,755],{"class":591},[586,4110,4112,4114,4117,4119,4121,4123,4126,4128,4130,4132,4134,4136],{"class":4111,"line":1910},[588,622],[586,4113,776],{"class":591},[586,4115,4116],{"class":599},"scale",[586,4118,606],{"class":591},[586,4120,609],{"class":591},[586,4122,1709],{"class":591},[586,4124,4125],{"class":1712},"0.75",[586,4127,1715],{"class":591},[586,4129,4125],{"class":1712},[586,4131,1715],{"class":591},[586,4133,4125],{"class":1712},[586,4135,1726],{"class":591},[586,4137,755],{"class":591},[586,4139,4140],{"class":588,"line":1945},[586,4141,4142],{"class":591}," >\n",[586,4144,4145,4147,4150,4152,4154,4156,4159,4161,4163,4166,4168,4170],{"class":588,"line":1954},[586,4146,1795],{"class":591},[586,4148,4149],{"class":595},"h1",[586,4151,2971],{"class":599},[586,4153,606],{"class":591},[586,4155,609],{"class":591},[586,4157,4158],{"class":612},"title",[586,4160,609],{"class":591},[586,4162,2241],{"class":591},[586,4164,4165],{"class":632},"I'm a Box 📦",[586,4167,689],{"class":591},[586,4169,4149],{"class":595},[586,4171,618],{"class":591},[586,4173,4174,4176,4179],{"class":588,"line":2513},[586,4175,1867],{"class":591},[586,4177,4178],{"class":595},"Html",[586,4180,618],{"class":591},[586,4182,4183,4185,4187],{"class":588,"line":2518},[586,4184,800],{"class":591},[586,4186,1788],{"class":595},[586,4188,618],{"class":591},[586,4190,4191,4193,4195],{"class":588,"line":2102},[586,4192,725],{"class":591},[586,4194,2523],{"class":595},[586,4196,1731],{"class":591},[586,4198,4199,4201,4203],{"class":588,"line":2103},[586,4200,725],{"class":591},[586,4202,1891],{"class":595},[586,4204,1731],{"class":591},[586,4206,4207,4209,4211],{"class":588,"line":2104},[586,4208,810],{"class":591},[586,4210,717],{"class":595},[586,4212,618],{"class":591},[586,4214,4215,4217,4219],{"class":588,"line":2105},[586,4216,689],{"class":591},[586,4218,706],{"class":595},[586,4220,618],{"class":591},[586,4222,4223,4225,4227,4230],{"class":588,"line":2617},[586,4224,592],{"class":591},[586,4226,1560],{"class":595},[586,4228,4229],{"class":599}," scoped",[586,4231,618],{"class":591},[586,4233,4234,4236,4238],{"class":588,"line":2623},[586,4235,835],{"class":591},[586,4237,4158],{"class":2232},[586,4239,2322],{"class":591},[586,4241,4242,4246,4248,4251,4254],{"class":588,"line":2632},[586,4243,4245],{"class":4244},"sqsOY"," background-color",[586,4247,2313],{"class":591},[586,4249,4250],{"class":591}," #",[586,4252,4253],{"class":632},"1e1e1e",[586,4255,4256],{"class":591},";\n",[586,4258,4259,4262,4264,4266,4269],{"class":588,"line":2666},[586,4260,4261],{"class":4244}," color",[586,4263,2313],{"class":591},[586,4265,4250],{"class":591},[586,4267,4268],{"class":632},"ffffff",[586,4270,4256],{"class":591},[586,4272,4273,4276,4278,4281],{"class":588,"line":2671},[586,4274,4275],{"class":4244}," font-size",[586,4277,2313],{"class":591},[586,4279,4280],{"class":1712}," 0.75rem",[586,4282,4256],{"class":591},[586,4284,4285,4288,4290,4293],{"class":588,"line":2679},[586,4286,4287],{"class":4244}," padding",[586,4289,2313],{"class":591},[586,4291,4292],{"class":1712}," 0.25rem",[586,4294,4256],{"class":591},[586,4296,4297,4300,4302,4305],{"class":588,"line":2696},[586,4298,4299],{"class":4244}," border-radius",[586,4301,2313],{"class":591},[586,4303,4304],{"class":1712}," 0.375rem",[586,4306,4256],{"class":591},[586,4308,4309],{"class":588,"line":2726},[586,4310,2414],{"class":591},[586,4312,4313,4315,4317],{"class":588,"line":2731},[586,4314,689],{"class":591},[586,4316,1560],{"class":595},[586,4318,618],{"class":591},[568,4320,4322],{"id":4321},"occlusion","Occlusion",[504,4324,4325,4326,4329],{},"By default, the HTML content will be visible through other objects in the scene. You can use the ",[542,4327,4328],{},"occlude"," prop to make the HTML content occlude other objects in the scene.",[504,4331,4332,4333,1424],{},"Html can be hidden behind one or more objects in your scene using the ",[542,4334,4328],{},[572,4336,4338],{"className":574,"code":4337,"language":582,"meta":512,"style":512},"\u003CHtml occlude>\n",[542,4339,4340],{"__ignoreMap":512},[586,4341,4342,4344,4346,4349],{"class":588,"line":513},[586,4343,592],{"class":591},[586,4345,4178],{"class":595},[586,4347,4348],{"class":599}," occlude",[586,4350,618],{"class":591},[504,4352,999,4353,4355,4356,4358],{},[542,4354,4328],{},", then ",[542,4357,3840],{}," will be hidden by any objects that pass in front of its position.",[2081,4360,4361],{},[4362,4363],"objects-html-occlusion",{},[4365,4366,4367,4368,4372],"details",{},"\n ",[4369,4370,4371],"summary",{},"Demo code",[572,4373,4377],{"className":4374,"code":4375,"language":4376,"meta":512,"style":512},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CTresMesh :position=\"[0, 1, -2]\">\n \u003CTresBoxGeometry \u002F>\n \u003CTresMeshNormalMaterial \u002F>\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\u002Fh1>\n \u003C\u002Fhtml>\n\u003C\u002FTresMesh>\n","html",[542,4378,4379,4399,4407,4415,4465,4493,4501],{"__ignoreMap":512},[586,4380,4381,4383,4385,4388,4390,4392,4395,4397],{"class":588,"line":513},[586,4382,592],{"class":591},[586,4384,1788],{"class":595},[586,4386,4387],{"class":599}," :position",[586,4389,606],{"class":591},[586,4391,609],{"class":591},[586,4393,4394],{"class":612},"[0, 1, -2]",[586,4396,609],{"class":591},[586,4398,618],{"class":591},[586,4400,4401,4403,4405],{"class":588,"line":514},[586,4402,714],{"class":591},[586,4404,2637],{"class":595},[586,4406,1731],{"class":591},[586,4408,4409,4411,4413],{"class":588,"line":651},[586,4410,714],{"class":591},[586,4412,2845],{"class":595},[586,4414,1731],{"class":591},[586,4416,4417,4419,4421,4424,4427,4429,4432,4434,4436,4438,4440,4442,4444,4446,4449,4451,4454,4456,4458,4461,4463],{"class":588,"line":657},[586,4418,714],{"class":591},[586,4420,4376],{"class":595},[586,4422,4423],{"class":599}," center",[586,4425,4426],{"class":599}," transform",[586,4428,4348],{"class":599},[586,4430,4431],{"class":599}," :distance-factor",[586,4433,606],{"class":591},[586,4435,609],{"class":591},[586,4437,1936],{"class":612},[586,4439,609],{"class":591},[586,4441,4387],{"class":599},[586,4443,606],{"class":591},[586,4445,609],{"class":591},[586,4447,4448],{"class":612},"[0, 0, 2]",[586,4450,609],{"class":591},[586,4452,4453],{"class":599}," :z-index-range",[586,4455,606],{"class":591},[586,4457,609],{"class":591},[586,4459,4460],{"class":612},"[28, 0]",[586,4462,609],{"class":591},[586,4464,618],{"class":591},[586,4466,4467,4469,4471,4473,4475,4477,4480,4482,4484,4487,4489,4491],{"class":588,"line":686},[586,4468,725],{"class":591},[586,4470,4149],{"class":595},[586,4472,2971],{"class":599},[586,4474,606],{"class":591},[586,4476,609],{"class":591},[586,4478,4479],{"class":612},"bg-white dark:bg-dark text-xs p-1 rounded",[586,4481,609],{"class":591},[586,4483,2241],{"class":591},[586,4485,4486],{"class":632},"Move camera",[586,4488,689],{"class":591},[586,4490,4149],{"class":595},[586,4492,618],{"class":591},[586,4494,4495,4497,4499],{"class":588,"line":696},[586,4496,810],{"class":591},[586,4498,4376],{"class":595},[586,4500,618],{"class":591},[586,4502,4503,4505,4507],{"class":588,"line":701},[586,4504,689],{"class":591},[586,4506,1788],{"class":595},[586,4508,618],{"class":591},[504,4510,4511,4512,4514],{},"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,4513,4328],{}," prop:",[913,4516,4518],{"id":4517},"single-occluder","Single occluder",[572,4520,4522],{"className":574,"code":4521,"language":582,"meta":512,"style":512},"\u003CHtml occlude=\"[mesh]\">\n",[542,4523,4524],{"__ignoreMap":512},[586,4525,4526,4528,4530,4532,4534,4536,4539,4541],{"class":588,"line":513},[586,4527,592],{"class":591},[586,4529,4178],{"class":595},[586,4531,4348],{"class":599},[586,4533,606],{"class":591},[586,4535,609],{"class":591},[586,4537,4538],{"class":612},"[mesh]",[586,4540,609],{"class":591},[586,4542,618],{"class":591},[2081,4544,4545],{},[4546,4547],"objects-html-single-occluder",{},[4365,4549,4367,4550,4552],{},[4369,4551,4371],{},[572,4553,4555],{"className":4374,"code":4554,"language":4376,"meta":512,"style":512},"\u003CTresMesh :position=\"[0, 1, 0]\">\n \u003CTresBoxGeometry \u002F>\n \u003CTresMeshNormalMaterial \u002F>\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\u002Fh1>\n \u003C\u002Fhtml>\n\u003C\u002FTresMesh>\n",[542,4556,4557,4576,4584,4592,4636,4662,4670],{"__ignoreMap":512},[586,4558,4559,4561,4563,4565,4567,4569,4572,4574],{"class":588,"line":513},[586,4560,592],{"class":591},[586,4562,1788],{"class":595},[586,4564,4387],{"class":599},[586,4566,606],{"class":591},[586,4568,609],{"class":591},[586,4570,4571],{"class":612},"[0, 1, 0]",[586,4573,609],{"class":591},[586,4575,618],{"class":591},[586,4577,4578,4580,4582],{"class":588,"line":514},[586,4579,714],{"class":591},[586,4581,2637],{"class":595},[586,4583,1731],{"class":591},[586,4585,4586,4588,4590],{"class":588,"line":651},[586,4587,714],{"class":591},[586,4589,2845],{"class":595},[586,4591,1731],{"class":591},[586,4593,4594,4596,4598,4600,4602,4605,4607,4609,4612,4614,4616,4618,4620,4622,4624,4626,4628,4630,4632,4634],{"class":588,"line":657},[586,4595,714],{"class":591},[586,4597,4376],{"class":595},[586,4599,4423],{"class":599},[586,4601,4426],{"class":599},[586,4603,4604],{"class":599}," :occlude",[586,4606,606],{"class":591},[586,4608,609],{"class":591},[586,4610,4611],{"class":612},"[sphereRef]",[586,4613,609],{"class":591},[586,4615,4431],{"class":599},[586,4617,606],{"class":591},[586,4619,609],{"class":591},[586,4621,1936],{"class":612},[586,4623,609],{"class":591},[586,4625,4453],{"class":599},[586,4627,606],{"class":591},[586,4629,609],{"class":591},[586,4631,4460],{"class":612},[586,4633,609],{"class":591},[586,4635,618],{"class":591},[586,4637,4638,4640,4642,4644,4646,4648,4650,4652,4654,4656,4658,4660],{"class":588,"line":686},[586,4639,725],{"class":591},[586,4641,4149],{"class":595},[586,4643,2971],{"class":599},[586,4645,606],{"class":591},[586,4647,609],{"class":591},[586,4649,4479],{"class":612},[586,4651,609],{"class":591},[586,4653,2241],{"class":591},[586,4655,4486],{"class":632},[586,4657,689],{"class":591},[586,4659,4149],{"class":595},[586,4661,618],{"class":591},[586,4663,4664,4666,4668],{"class":588,"line":696},[586,4665,810],{"class":591},[586,4667,4376],{"class":595},[586,4669,618],{"class":591},[586,4671,4672,4674,4676],{"class":588,"line":701},[586,4673,689],{"class":591},[586,4675,1788],{"class":595},[586,4677,618],{"class":591},[913,4679,4681],{"id":4680},"multiple-occluders","Multiple occluders",[572,4683,4685],{"className":574,"code":4684,"language":582,"meta":512,"style":512},"\u003CHtml occlude=\"[mesh1, mesh2, mesh3, ...]\" \u002F>\n",[542,4686,4687],{"__ignoreMap":512},[586,4688,4689,4691,4693,4695,4697,4699,4702,4704],{"class":588,"line":513},[586,4690,592],{"class":591},[586,4692,4178],{"class":595},[586,4694,4348],{"class":599},[586,4696,606],{"class":591},[586,4698,609],{"class":591},[586,4700,4701],{"class":612},"[mesh1, mesh2, mesh3, ...]",[586,4703,609],{"class":591},[586,4705,1731],{"class":591},[504,4707,4708],{},"OR",[572,4710,4712],{"className":574,"code":4711,"language":582,"meta":512,"style":512},"\u003CHtml occlude=\"meshesArray\" \u002F>\n",[542,4713,4714],{"__ignoreMap":512},[586,4715,4716,4718,4720,4722,4724,4726,4729,4731],{"class":588,"line":513},[586,4717,592],{"class":591},[586,4719,4178],{"class":595},[586,4721,4348],{"class":599},[586,4723,606],{"class":591},[586,4725,609],{"class":591},[586,4727,4728],{"class":612},"meshesArray",[586,4730,609],{"class":591},[586,4732,1731],{"class":591},[504,4734,4735,4736,4739,4740,4745,4746,4750],{},"In the demo below, a ",[542,4737,4738],{},"v-for"," loop generates multiple spheres around the cube.\nAll resulting ",[2896,4741,4742],{},[542,4743,4744],{},"Mesh"," instances are collected into an array and passed to the ",[2896,4747,4748],{},[542,4749,4328],{}," prop, allowing each sphere to occlude the HTML content.",[504,4752,4753,4754,4759,4760,4763,4764,3695,4768,4771],{},"This demo also uses the ",[2896,4755,4756],{},[542,4757,4758],{},"on-occlude"," event, which is triggered whenever the occlusion state changes.\nHere, the event updates a ",[2896,4761,4762],{},"reactive value"," to control element styles — for example, toggling between ",[4765,4766,4767],"em",{},"light",[4765,4769,4770],{},"dark"," themes.",[2081,4773,4774],{},[4775,4776],"objects-html-occlude-complex-demo",{},[4365,4778,4367,4779,4781],{},[4369,4780,4371],{},[572,4782,4784],{"className":4374,"code":4783,"language":4376,"meta":512,"style":512},"\u003CTresMesh :position=\"[0, 1, 0]\">\n \u003CTresBoxGeometry \u002F>\n \u003CTresMeshNormalMaterial \u002F>\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\u002Fh1>\n \u003C\u002Fhtml>\n\u003C\u002FTresMesh>\n",[542,4785,4786,4804,4812,4820,4827,4841,4855,4868,4881,4895,4900,4926,4934],{"__ignoreMap":512},[586,4787,4788,4790,4792,4794,4796,4798,4800,4802],{"class":588,"line":513},[586,4789,592],{"class":591},[586,4791,1788],{"class":595},[586,4793,4387],{"class":599},[586,4795,606],{"class":591},[586,4797,609],{"class":591},[586,4799,4571],{"class":612},[586,4801,609],{"class":591},[586,4803,618],{"class":591},[586,4805,4806,4808,4810],{"class":588,"line":514},[586,4807,714],{"class":591},[586,4809,2637],{"class":595},[586,4811,1731],{"class":591},[586,4813,4814,4816,4818],{"class":588,"line":651},[586,4815,714],{"class":591},[586,4817,2845],{"class":595},[586,4819,1731],{"class":591},[586,4821,4822,4824],{"class":588,"line":657},[586,4823,714],{"class":591},[586,4825,4826],{"class":595},"html\n",[586,4828,4829,4832,4834,4836,4839],{"class":588,"line":686},[586,4830,4831],{"class":599}," v-bind",[586,4833,606],{"class":591},[586,4835,609],{"class":591},[586,4837,4838],{"class":612},"htmlProps",[586,4840,755],{"class":591},[586,4842,4843,4846,4848,4850,4853],{"class":588,"line":696},[586,4844,4845],{"class":599}," :occlude",[586,4847,606],{"class":591},[586,4849,609],{"class":591},[586,4851,4852],{"class":612},"occluderRefs",[586,4854,755],{"class":591},[586,4856,4857,4860,4862,4864,4866],{"class":588,"line":701},[586,4858,4859],{"class":599}," :distance-factor",[586,4861,606],{"class":591},[586,4863,609],{"class":591},[586,4865,1936],{"class":612},[586,4867,755],{"class":591},[586,4869,4870,4873,4875,4877,4879],{"class":588,"line":711},[586,4871,4872],{"class":599}," :z-index-range",[586,4874,606],{"class":591},[586,4876,609],{"class":591},[586,4878,4460],{"class":612},[586,4880,755],{"class":591},[586,4882,4883,4886,4888,4890,4893],{"class":588,"line":722},[586,4884,4885],{"class":599}," @on-occlude",[586,4887,606],{"class":591},[586,4889,609],{"class":591},[586,4891,4892],{"class":612},"(event: boolean) => isOccluded = event",[586,4894,755],{"class":591},[586,4896,4897],{"class":588,"line":577},[586,4898,4899],{"class":591}," >\n",[586,4901,4902,4904,4906,4908,4910,4912,4914,4916,4918,4920,4922,4924],{"class":588,"line":578},[586,4903,725],{"class":591},[586,4905,4149],{"class":595},[586,4907,2971],{"class":599},[586,4909,606],{"class":591},[586,4911,609],{"class":591},[586,4913,4479],{"class":612},[586,4915,609],{"class":591},[586,4917,2241],{"class":591},[586,4919,4486],{"class":632},[586,4921,689],{"class":591},[586,4923,4149],{"class":595},[586,4925,618],{"class":591},[586,4927,4928,4930,4932],{"class":588,"line":579},[586,4929,810],{"class":591},[586,4931,4376],{"class":595},[586,4933,618],{"class":591},[586,4935,4936,4938,4940],{"class":588,"line":580},[586,4937,689],{"class":591},[586,4939,1788],{"class":595},[586,4941,618],{"class":591},[913,4943,4945],{"id":4944},"blending-occlusion","Blending Occlusion",[504,4947,4948,4950],{},[542,4949,3840],{}," 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,4952,4954],{"className":574,"code":4953,"language":582,"meta":512,"style":512},"\u003CHtml occlude=\"blending\">\n",[542,4955,4956],{"__ignoreMap":512},[586,4957,4958,4960,4962,4964,4966,4968,4971,4973],{"class":588,"line":513},[586,4959,592],{"class":591},[586,4961,4178],{"class":595},[586,4963,4348],{"class":599},[586,4965,606],{"class":591},[586,4967,609],{"class":591},[586,4969,4970],{"class":612},"blending",[586,4972,609],{"class":591},[586,4974,618],{"class":591},[504,4976,1377,4977,937,4980,4983,4984,835],{},[2896,4978,4979],{},"demo below ⬇️",[4765,4981,4982],{},"(left black example)"," shows a ",[2896,4985,4986],{},"basic usage example",[2081,4988,4989],{},[4990,4991],"objects-html-occlude-blending-demo",{},[4365,4993,4367,4994,4996],{},[4369,4995,4371],{},[572,4997,5044],{"className":574,"code":4998,"highlights":4999,"language":582,"meta":512,"style":512},"\u003Cscript setup lang=\"ts\">\nimport { Html, Levioso, OrbitControls } from '@tresjs\u002Fcientos'\nimport { TresCanvas } from '@tresjs\u002Fcore'\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\u002Fscript>\n\n\u003Ctemplate>\n \u003Cdiv class=\"html-demo-wrapper aspect-video\">\n \u003CTresCanvas v-bind=\"gl\">\n \u003CTresPerspectiveCamera :position=\"[0, 1.5, 7.5]\" \u002F>\n \u003COrbitControls \u002F>\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\" \u002F>\n \u003CTresMeshNormalMaterial \u002F>\n \u003C\u002FTresMesh>\n \u003C\u002FLevioso>\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 \u002F>\n \u003Cem>occlude=blending\u003C\u002Fem>\n \u003C\u002Fdiv>\n \u003C\u002FHtml>\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 \u002F> \u003Cstrong>CIRCLE \u003Cbr \u002F> GEOMETRY\u003C\u002Fstrong>\n \u003C\u002Fdiv>\n \u003C\u002FHtml>\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\u002F250;\">\u003C\u002Fdiv>\n \u003C\u002FHtml>\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\u002Fstrong> \u003Cbr \u002F>\n \u003Cem>+ receive-shadow \u003C\u002Fem> ⬇️\n \u003C\u002Fdiv>\n \u003C\u002FHtml>\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 \u002F>\n\n \u003CTresGridHelper :position-y=\"-1\" \u002F>\n \u003CTresAmbientLight :intensity=\"1\" \u002F>\n \u003C\u002FTresCanvas>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\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\u002Fstyle>\n\n",[514,2679,2726,2731,2740,2745,2753,2766,5000,5001,5002,5003,5004,5005,5006,5007,5008,5009,5010,5001,5002,5003,5004,5005,5006,5007,5008,5009,5010,5011,5012,5013,5014,5015,5016,5017,5018,5019,5020,5021,5022,5023,5024,5025,5026,5027,5028,5029,5030,5031,5032,5033,5034,5035,5036,5037,5038,5039,5040,5041,5042,5043],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,5045,5046,5066,5094,5112,5130,5155,5159,5170,5185,5196,5207,5218,5222,5226,5243,5247,5259,5264,5279,5303,5307,5311,5325,5349,5353,5357,5371,5400,5428,5432,5437,5441,5472,5476,5498,5514,5527,5539,5551,5558,5566,5570,5578,5598,5618,5652,5661,5666,5674,5702,5726,5742,5759,5775,5801,5806,5864,5899,5908,5918,5928,5933,5940,5945,5950,5964,5993,6018,6023,6043,6055,6073,6082,6091,6096,6103,6108,6113,6126,6154,6170,6193,6198,6218,6256,6265,6274,6279,6286,6301,6306,6311,6324,6352,6369,6375,6398,6403,6429,6438,6443,6450,6455,6460,6473,6501,6524,6529,6549,6573,6594,6603,6612,6617,6625,6643,6663,6680,6707,6722,6728,6733,6738,6763,6784,6793,6802,6811,6816,6827,6837,6849,6860,6873,6886,6900,6905],{"__ignoreMap":512},[586,5047,5048,5050,5052,5054,5056,5058,5060,5062,5064],{"class":588,"line":513},[586,5049,592],{"class":591},[586,5051,596],{"class":595},[586,5053,600],{"class":599},[586,5055,603],{"class":599},[586,5057,606],{"class":591},[586,5059,609],{"class":591},[586,5061,613],{"class":612},[586,5063,609],{"class":591},[586,5065,618],{"class":591},[586,5067,5069,5071,5073,5075,5077,5080,5082,5084,5086,5088,5090,5092],{"class":5068,"line":514},[588,622],[586,5070,626],{"class":625},[586,5072,629],{"class":591},[586,5074,3884],{"class":632},[586,5076,1648],{"class":591},[586,5078,5079],{"class":632}," Levioso",[586,5081,1648],{"class":591},[586,5083,1651],{"class":632},[586,5085,636],{"class":591},[586,5087,639],{"class":625},[586,5089,642],{"class":591},[586,5091,645],{"class":612},[586,5093,648],{"class":591},[586,5095,5096,5098,5100,5102,5104,5106,5108,5110],{"class":588,"line":651},[586,5097,626],{"class":625},[586,5099,629],{"class":591},[586,5101,2183],{"class":632},[586,5103,636],{"class":591},[586,5105,639],{"class":625},[586,5107,642],{"class":591},[586,5109,2172],{"class":612},[586,5111,648],{"class":591},[586,5113,5114,5116,5118,5120,5122,5124,5126,5128],{"class":588,"line":657},[586,5115,626],{"class":625},[586,5117,629],{"class":591},[586,5119,2202],{"class":632},[586,5121,636],{"class":591},[586,5123,639],{"class":625},[586,5125,642],{"class":591},[586,5127,582],{"class":612},[586,5129,648],{"class":591},[586,5131,5132,5134,5136,5139,5141,5144,5146,5148,5150,5153],{"class":588,"line":686},[586,5133,626],{"class":625},[586,5135,629],{"class":591},[586,5137,5138],{"class":632}," CircleGeometry",[586,5140,1648],{"class":591},[586,5142,5143],{"class":632}," MeshStandardMaterial",[586,5145,636],{"class":591},[586,5147,639],{"class":625},[586,5149,642],{"class":591},[586,5151,5152],{"class":612},"three",[586,5154,648],{"class":591},[586,5156,5157],{"class":588,"line":696},[586,5158,654],{"emptyLinePlaceholder":520},[586,5160,5161,5163,5166,5168],{"class":588,"line":701},[586,5162,660],{"class":599},[586,5164,5165],{"class":632}," gl ",[586,5167,606],{"class":591},[586,5169,2322],{"class":591},[586,5171,5172,5175,5177,5179,5181,5183],{"class":588,"line":711},[586,5173,5174],{"class":595}," clearColor",[586,5176,2313],{"class":591},[586,5178,642],{"class":591},[586,5180,3952],{"class":612},[586,5182,675],{"class":591},[586,5184,3097],{"class":591},[586,5186,5187,5190,5192,5194],{"class":588,"line":722},[586,5188,5189],{"class":595}," clearAlpha",[586,5191,2313],{"class":591},[586,5193,3143],{"class":1712},[586,5195,3097],{"class":591},[586,5197,5198,5201,5203,5205],{"class":588,"line":577},[586,5199,5200],{"class":595}," shadows",[586,5202,2313],{"class":591},[586,5204,3094],{"class":2585},[586,5206,3097],{"class":591},[586,5208,5209,5212,5214,5216],{"class":588,"line":578},[586,5210,5211],{"class":595}," alpha",[586,5213,2313],{"class":591},[586,5215,3094],{"class":2585},[586,5217,3097],{"class":591},[586,5219,5220],{"class":588,"line":579},[586,5221,2414],{"class":591},[586,5223,5224],{"class":588,"line":580},[586,5225,654],{"emptyLinePlaceholder":520},[586,5227,5228,5230,5233,5235,5237,5239,5241],{"class":588,"line":581},[586,5229,660],{"class":599},[586,5231,5232],{"class":632}," targetDirectionLightRef ",[586,5234,606],{"class":591},[586,5236,2202],{"class":668},[586,5238,672],{"class":632},[586,5240,2254],{"class":591},[586,5242,683],{"class":632},[586,5244,5245],{"class":588,"line":797},[586,5246,654],{"emptyLinePlaceholder":520},[586,5248,5249,5251,5254,5256],{"class":588,"line":807},[586,5250,660],{"class":599},[586,5252,5253],{"class":632}," geometries ",[586,5255,606],{"class":591},[586,5257,5258],{"class":632}," [\n",[586,5260,5261],{"class":588,"line":817},[586,5262,5263],{"class":591}," {\n",[586,5265,5266,5269,5271,5273,5275,5277],{"class":588,"line":1910},[586,5267,5268],{"class":595}," component",[586,5270,2313],{"class":591},[586,5272,642],{"class":591},[586,5274,2637],{"class":612},[586,5276,675],{"class":591},[586,5278,3097],{"class":591},[586,5280,5281,5284,5286,5289,5291,5293,5295,5297,5299,5301],{"class":588,"line":1945},[586,5282,5283],{"class":595}," args",[586,5285,2313],{"class":591},[586,5287,5288],{"class":632}," [",[586,5290,1812],{"class":1712},[586,5292,1648],{"class":591},[586,5294,3143],{"class":1712},[586,5296,1648],{"class":591},[586,5298,3143],{"class":1712},[586,5300,1726],{"class":632},[586,5302,3097],{"class":591},[586,5304,5305],{"class":588,"line":1954},[586,5306,3151],{"class":591},[586,5308,5309],{"class":588,"line":2513},[586,5310,5263],{"class":591},[586,5312,5313,5315,5317,5319,5321,5323],{"class":588,"line":2518},[586,5314,5268],{"class":595},[586,5316,2313],{"class":591},[586,5318,642],{"class":591},[586,5320,1798],{"class":612},[586,5322,675],{"class":591},[586,5324,3097],{"class":591},[586,5326,5327,5329,5331,5333,5336,5338,5341,5343,5345,5347],{"class":588,"line":2102},[586,5328,5283],{"class":595},[586,5330,2313],{"class":591},[586,5332,5288],{"class":632},[586,5334,5335],{"class":1712},"0.7",[586,5337,1648],{"class":591},[586,5339,5340],{"class":1712}," 32",[586,5342,1648],{"class":591},[586,5344,5340],{"class":1712},[586,5346,1726],{"class":632},[586,5348,3097],{"class":591},[586,5350,5351],{"class":588,"line":2103},[586,5352,3151],{"class":591},[586,5354,5355],{"class":588,"line":2104},[586,5356,5263],{"class":591},[586,5358,5359,5361,5363,5365,5367,5369],{"class":588,"line":2105},[586,5360,5268],{"class":595},[586,5362,2313],{"class":591},[586,5364,642],{"class":591},[586,5366,2805],{"class":612},[586,5368,675],{"class":591},[586,5370,3097],{"class":591},[586,5372,5373,5375,5377,5379,5381,5383,5386,5388,5391,5393,5396,5398],{"class":588,"line":2617},[586,5374,5283],{"class":595},[586,5376,2313],{"class":591},[586,5378,5288],{"class":632},[586,5380,1903],{"class":1712},[586,5382,1648],{"class":591},[586,5384,5385],{"class":1712}," 0.2",[586,5387,1648],{"class":591},[586,5389,5390],{"class":1712}," 16",[586,5392,1648],{"class":591},[586,5394,5395],{"class":1712}," 100",[586,5397,1726],{"class":632},[586,5399,3097],{"class":591},[586,5401,5402,5405,5407,5409,5412,5414,5416,5418,5421,5423,5425],{"class":588,"line":2623},[586,5403,5404],{"class":595}," bind",[586,5406,2313],{"class":591},[586,5408,629],{"class":591},[586,5410,5411],{"class":595}," castShadow",[586,5413,2313],{"class":591},[586,5415,3094],{"class":2585},[586,5417,1648],{"class":591},[586,5419,5420],{"class":595}," receiveShadow",[586,5422,2313],{"class":591},[586,5424,3094],{"class":2585},[586,5426,5427],{"class":591}," },\n",[586,5429,5430],{"class":588,"line":2632},[586,5431,3151],{"class":591},[586,5433,5434],{"class":588,"line":2666},[586,5435,5436],{"class":632},"]\n",[586,5438,5439],{"class":588,"line":2671},[586,5440,654],{"emptyLinePlaceholder":520},[586,5442,5444,5446,5449,5451,5453,5455,5458,5460,5462,5465,5467,5469],{"class":5443,"line":2679},[588,622],[586,5445,660],{"class":599},[586,5447,5448],{"class":632}," customGeometry ",[586,5450,606],{"class":591},[586,5452,2202],{"class":668},[586,5454,672],{"class":632},[586,5456,5457],{"class":591},"new",[586,5459,5138],{"class":668},[586,5461,672],{"class":632},[586,5463,5464],{"class":1712},"1.25",[586,5466,1648],{"class":591},[586,5468,5340],{"class":1712},[586,5470,5471],{"class":632},"))\n",[586,5473,5474],{"class":588,"line":2696},[586,5475,654],{"emptyLinePlaceholder":520},[586,5477,5479,5481,5484,5486,5488,5490,5492,5494,5496],{"class":5478,"line":2726},[588,622],[586,5480,660],{"class":599},[586,5482,5483],{"class":632}," customMaterial ",[586,5485,606],{"class":591},[586,5487,2202],{"class":668},[586,5489,672],{"class":632},[586,5491,5457],{"class":591},[586,5493,5143],{"class":668},[586,5495,672],{"class":632},[586,5497,3083],{"class":591},[586,5499,5501,5503,5505,5507,5510,5512],{"class":5500,"line":2731},[588,622],[586,5502,4261],{"class":595},[586,5504,2313],{"class":591},[586,5506,642],{"class":591},[586,5508,5509],{"class":612},"red",[586,5511,675],{"class":591},[586,5513,3097],{"class":591},[586,5515,5517,5520,5522,5525],{"class":5516,"line":2740},[588,622],[586,5518,5519],{"class":595}," side",[586,5521,2313],{"class":591},[586,5523,5524],{"class":1712}," 2",[586,5526,3097],{"class":591},[586,5528,5530,5533,5535,5537],{"class":5529,"line":2745},[588,622],[586,5531,5532],{"class":595}," opacity",[586,5534,2313],{"class":591},[586,5536,3143],{"class":1712},[586,5538,3097],{"class":591},[586,5540,5542,5545,5547,5549],{"class":5541,"line":2753},[588,622],[586,5543,5544],{"class":595}," transparent",[586,5546,2313],{"class":591},[586,5548,3094],{"class":2585},[586,5550,3097],{"class":591},[586,5552,5554,5556],{"class":5553,"line":2766},[588,622],[586,5555,3157],{"class":591},[586,5557,5471],{"class":632},[586,5559,5560,5562,5564],{"class":588,"line":2794},[586,5561,689],{"class":591},[586,5563,596],{"class":595},[586,5565,618],{"class":591},[586,5567,5568],{"class":588,"line":2800},[586,5569,654],{"emptyLinePlaceholder":520},[586,5571,5572,5574,5576],{"class":588,"line":2840},[586,5573,592],{"class":591},[586,5575,706],{"class":595},[586,5577,618],{"class":591},[586,5579,5580,5582,5585,5587,5589,5591,5594,5596],{"class":588,"line":2850},[586,5581,714],{"class":591},[586,5583,5584],{"class":595},"div",[586,5586,2971],{"class":599},[586,5588,606],{"class":591},[586,5590,609],{"class":591},[586,5592,5593],{"class":612},"html-demo-wrapper aspect-video",[586,5595,609],{"class":591},[586,5597,618],{"class":591},[586,5599,5600,5602,5604,5607,5609,5611,5614,5616],{"class":588,"line":2859},[586,5601,725],{"class":591},[586,5603,717],{"class":595},[586,5605,5606],{"class":599}," v-bind",[586,5608,606],{"class":591},[586,5610,609],{"class":591},[586,5612,5613],{"class":632},"gl",[586,5615,609],{"class":591},[586,5617,618],{"class":591},[586,5619,5620,5622,5624,5626,5628,5630,5632,5634,5636,5638,5641,5643,5646,5648,5650],{"class":588,"line":2868},[586,5621,736],{"class":591},[586,5623,1696],{"class":595},[586,5625,1699],{"class":591},[586,5627,1702],{"class":599},[586,5629,606],{"class":591},[586,5631,609],{"class":591},[586,5633,1709],{"class":591},[586,5635,1139],{"class":1712},[586,5637,1715],{"class":591},[586,5639,5640],{"class":1712},"1.5",[586,5642,1715],{"class":591},[586,5644,5645],{"class":1712},"7.5",[586,5647,1726],{"class":591},[586,5649,609],{"class":591},[586,5651,1731],{"class":591},[586,5653,5655,5657,5659],{"class":588,"line":5654},46,[586,5656,736],{"class":591},[586,5658,1738],{"class":595},[586,5660,1731],{"class":591},[586,5662,5664],{"class":588,"line":5663},47,[586,5665,654],{"emptyLinePlaceholder":520},[586,5667,5669,5671],{"class":588,"line":5668},48,[586,5670,736],{"class":591},[586,5672,5673],{"class":595},"Levioso\n",[586,5675,5677,5680,5682,5684,5686,5689,5691,5694,5697,5700],{"class":588,"line":5676},49,[586,5678,5679],{"class":625}," v-for",[586,5681,606],{"class":591},[586,5683,609],{"class":591},[586,5685,672],{"class":591},[586,5687,5688],{"class":632},"geometry",[586,5690,1715],{"class":591},[586,5692,5693],{"class":632},"index",[586,5695,5696],{"class":591},") in ",[586,5698,5699],{"class":632},"geometries",[586,5701,755],{"class":591},[586,5703,5705,5707,5710,5712,5715,5718,5721,5723],{"class":588,"line":5704},50,[586,5706,776],{"class":591},[586,5708,5709],{"class":599},"key",[586,5711,606],{"class":591},[586,5713,5714],{"class":591},"\"`",[586,5716,5717],{"class":612},"html-occlude-blending-demo-",[586,5719,5720],{"class":591},"${",[586,5722,5693],{"class":632},[586,5724,5725],{"class":591},"}`\"\n",[586,5727,5729,5731,5734,5736,5738,5740],{"class":588,"line":5728},51,[586,5730,776],{"class":591},[586,5732,5733],{"class":599},"speed",[586,5735,606],{"class":591},[586,5737,609],{"class":591},[586,5739,2779],{"class":1712},[586,5741,755],{"class":591},[586,5743,5745,5747,5750,5752,5754,5757],{"class":588,"line":5744},52,[586,5746,776],{"class":591},[586,5748,5749],{"class":599},"float-factor",[586,5751,606],{"class":591},[586,5753,609],{"class":591},[586,5755,5756],{"class":1712},"3.5",[586,5758,755],{"class":591},[586,5760,5762,5764,5767,5769,5771,5773],{"class":588,"line":5761},53,[586,5763,776],{"class":591},[586,5765,5766],{"class":599},"rotation-factor",[586,5768,606],{"class":591},[586,5770,609],{"class":591},[586,5772,1812],{"class":1712},[586,5774,755],{"class":591},[586,5776,5778,5780,5783,5785,5787,5790,5793,5795,5797,5799],{"class":588,"line":5777},54,[586,5779,776],{"class":591},[586,5781,5782],{"class":599},"range",[586,5784,606],{"class":591},[586,5786,609],{"class":591},[586,5788,5789],{"class":591},"[-",[586,5791,5792],{"class":1712},"0.35",[586,5794,1715],{"class":591},[586,5796,5792],{"class":1712},[586,5798,1726],{"class":591},[586,5800,755],{"class":591},[586,5802,5804],{"class":588,"line":5803},55,[586,5805,4142],{"class":591},[586,5807,5809,5811,5813,5815,5817,5819,5821,5823,5825,5828,5830,5833,5835,5837,5839,5841,5843,5845,5847,5849,5851,5853,5855,5857,5860,5862],{"class":588,"line":5808},56,[586,5810,1795],{"class":591},[586,5812,1788],{"class":595},[586,5814,1699],{"class":591},[586,5816,1702],{"class":599},[586,5818,606],{"class":591},[586,5820,609],{"class":591},[586,5822,1709],{"class":591},[586,5824,5693],{"class":632},[586,5826,5827],{"class":591}," * ",[586,5829,5756],{"class":1712},[586,5831,5832],{"class":591}," - ",[586,5834,5756],{"class":1712},[586,5836,1715],{"class":591},[586,5838,1812],{"class":1712},[586,5840,1715],{"class":591},[586,5842,1139],{"class":1712},[586,5844,1726],{"class":591},[586,5846,609],{"class":591},[586,5848,5606],{"class":599},[586,5850,606],{"class":591},[586,5852,609],{"class":591},[586,5854,5688],{"class":632},[586,5856,835],{"class":591},[586,5858,5859],{"class":632},"bind",[586,5861,609],{"class":591},[586,5863,618],{"class":591},[586,5865,5867,5870,5873,5876,5878,5880,5883,5885,5888,5890,5892,5895,5897],{"class":588,"line":5866},57,[586,5868,5869],{"class":591}," \u003C",[586,5871,5872],{"class":595},"component",[586,5874,5875],{"class":599}," :is",[586,5877,606],{"class":591},[586,5879,609],{"class":591},[586,5881,5882],{"class":612},"geometry.component",[586,5884,609],{"class":591},[586,5886,5887],{"class":599}," :args",[586,5889,606],{"class":591},[586,5891,609],{"class":591},[586,5893,5894],{"class":612},"geometry.args",[586,5896,609],{"class":591},[586,5898,1731],{"class":591},[586,5900,5902,5904,5906],{"class":588,"line":5901},58,[586,5903,5869],{"class":591},[586,5905,2845],{"class":595},[586,5907,1731],{"class":591},[586,5909,5911,5914,5916],{"class":588,"line":5910},59,[586,5912,5913],{"class":591}," \u003C\u002F",[586,5915,1788],{"class":595},[586,5917,618],{"class":591},[586,5919,5921,5923,5926],{"class":588,"line":5920},60,[586,5922,1867],{"class":591},[586,5924,5925],{"class":595},"Levioso",[586,5927,618],{"class":591},[586,5929,5931],{"class":588,"line":5930},61,[586,5932,654],{"emptyLinePlaceholder":520},[586,5934,5936,5938],{"class":5935,"line":5000},[588,622],[586,5937,736],{"class":591},[586,5939,4052],{"class":595},[586,5941,5943],{"class":5942,"line":5001},[588,622],[586,5944,4058],{"class":599},[586,5946,5948],{"class":5947,"line":5002},[588,622],[586,5949,4064],{"class":599},[586,5951,5953,5956,5958,5960,5962],{"class":5952,"line":5003},[588,622],[586,5954,5955],{"class":599}," occlude",[586,5957,606],{"class":591},[586,5959,609],{"class":591},[586,5961,4970],{"class":612},[586,5963,755],{"class":591},[586,5965,5967,5969,5971,5973,5975,5977,5979,5981,5984,5987,5989,5991],{"class":5966,"line":5004},[588,622],[586,5968,776],{"class":591},[586,5970,1702],{"class":599},[586,5972,606],{"class":591},[586,5974,609],{"class":591},[586,5976,5789],{"class":591},[586,5978,1936],{"class":1712},[586,5980,1715],{"class":591},[586,5982,5983],{"class":1712},".75",[586,5985,5986],{"class":591},", -",[586,5988,1718],{"class":1712},[586,5990,1726],{"class":591},[586,5992,755],{"class":591},[586,5994,5996,5998,6001,6003,6005,6007,6010,6012,6014,6016],{"class":5995,"line":5005},[588,622],[586,5997,776],{"class":591},[586,5999,6000],{"class":599},"z-index-range",[586,6002,606],{"class":591},[586,6004,609],{"class":591},[586,6006,1709],{"class":591},[586,6008,6009],{"class":1712},"28",[586,6011,1715],{"class":591},[586,6013,1139],{"class":1712},[586,6015,1726],{"class":591},[586,6017,755],{"class":591},[586,6019,6021],{"class":6020,"line":5006},[588,622],[586,6022,4142],{"class":591},[586,6024,6026,6028,6030,6032,6034,6036,6039,6041],{"class":6025,"line":5007},[588,622],[586,6027,1795],{"class":591},[586,6029,5584],{"class":595},[586,6031,2971],{"class":599},[586,6033,606],{"class":591},[586,6035,609],{"class":591},[586,6037,6038],{"class":612},"text-center text-s p-2 bg-[#1B1C1E] text-light",[586,6040,609],{"class":591},[586,6042,618],{"class":591},[586,6044,6046,6049,6051,6053],{"class":6045,"line":5008},[588,622],[586,6047,6048],{"class":632}," BASIC 💛 ",[586,6050,592],{"class":591},[586,6052,932],{"class":595},[586,6054,1731],{"class":591},[586,6056,6058,6060,6062,6064,6067,6069,6071],{"class":6057,"line":5009},[588,622],[586,6059,5869],{"class":591},[586,6061,4765],{"class":595},[586,6063,2241],{"class":591},[586,6065,6066],{"class":632},"occlude=blending",[586,6068,689],{"class":591},[586,6070,4765],{"class":595},[586,6072,618],{"class":591},[586,6074,6076,6078,6080],{"class":6075,"line":5010},[588,622],[586,6077,5913],{"class":591},[586,6079,5584],{"class":595},[586,6081,618],{"class":591},[586,6083,6085,6087,6089],{"class":588,"line":6084},73,[586,6086,1867],{"class":591},[586,6088,4178],{"class":595},[586,6090,618],{"class":591},[586,6092,6094],{"class":6093,"line":5011},[588,622],[586,6095,654],{"emptyLinePlaceholder":520},[586,6097,6099,6101],{"class":6098,"line":5012},[588,622],[586,6100,736],{"class":591},[586,6102,4052],{"class":595},[586,6104,6106],{"class":6105,"line":5013},[588,622],[586,6107,4058],{"class":599},[586,6109,6111],{"class":6110,"line":5014},[588,622],[586,6112,4064],{"class":599},[586,6114,6116,6118,6120,6122,6124],{"class":6115,"line":5015},[588,622],[586,6117,5955],{"class":599},[586,6119,606],{"class":591},[586,6121,609],{"class":591},[586,6123,4970],{"class":612},[586,6125,755],{"class":591},[586,6127,6129,6131,6133,6135,6137,6139,6141,6143,6146,6148,6150,6152],{"class":6128,"line":5016},[588,622],[586,6130,776],{"class":591},[586,6132,1702],{"class":599},[586,6134,606],{"class":591},[586,6136,609],{"class":591},[586,6138,1709],{"class":591},[586,6140,1139],{"class":1712},[586,6142,1715],{"class":591},[586,6144,6145],{"class":1712},".85",[586,6147,5986],{"class":591},[586,6149,1718],{"class":1712},[586,6151,1726],{"class":591},[586,6153,755],{"class":591},[586,6155,6157,6159,6161,6163,6165,6168],{"class":6156,"line":5017},[588,622],[586,6158,776],{"class":591},[586,6160,5688],{"class":599},[586,6162,606],{"class":591},[586,6164,609],{"class":591},[586,6166,6167],{"class":632},"customGeometry",[586,6169,755],{"class":591},[586,6171,6173,6175,6177,6179,6181,6183,6185,6187,6189,6191],{"class":6172,"line":5018},[588,622],[586,6174,776],{"class":591},[586,6176,6000],{"class":599},[586,6178,606],{"class":591},[586,6180,609],{"class":591},[586,6182,1709],{"class":591},[586,6184,6009],{"class":1712},[586,6186,1715],{"class":591},[586,6188,1139],{"class":1712},[586,6190,1726],{"class":591},[586,6192,755],{"class":591},[586,6194,6196],{"class":6195,"line":5019},[588,622],[586,6197,4142],{"class":591},[586,6199,6201,6203,6205,6207,6209,6211,6214,6216],{"class":6200,"line":5020},[588,622],[586,6202,1795],{"class":591},[586,6204,5584],{"class":595},[586,6206,2971],{"class":599},[586,6208,606],{"class":591},[586,6210,609],{"class":591},[586,6212,6213],{"class":612},"text-xs p-8 text-center bg-[#F6B03B] text-dark",[586,6215,609],{"class":591},[586,6217,618],{"class":591},[586,6219,6221,6224,6226,6228,6231,6234,6236,6238,6241,6243,6245,6247,6250,6252,6254],{"class":6220,"line":5021},[588,622],[586,6222,6223],{"class":632}," CUSTOM ",[586,6225,592],{"class":591},[586,6227,932],{"class":595},[586,6229,6230],{"class":591}," \u002F>",[586,6232,6233],{"class":591}," \u003C",[586,6235,2896],{"class":595},[586,6237,2241],{"class":591},[586,6239,6240],{"class":632},"CIRCLE ",[586,6242,592],{"class":591},[586,6244,932],{"class":595},[586,6246,6230],{"class":591},[586,6248,6249],{"class":632}," GEOMETRY",[586,6251,689],{"class":591},[586,6253,2896],{"class":595},[586,6255,618],{"class":591},[586,6257,6259,6261,6263],{"class":588,"line":6258},85,[586,6260,5913],{"class":591},[586,6262,5584],{"class":595},[586,6264,618],{"class":591},[586,6266,6268,6270,6272],{"class":6267,"line":5022},[588,622],[586,6269,1867],{"class":591},[586,6271,4178],{"class":595},[586,6273,618],{"class":591},[586,6275,6277],{"class":6276,"line":5023},[588,622],[586,6278,654],{"emptyLinePlaceholder":520},[586,6280,6282,6284],{"class":6281,"line":5024},[588,622],[586,6283,736],{"class":591},[586,6285,4052],{"class":595},[586,6287,6289,6292,6294,6296,6299],{"class":6288,"line":5025},[588,622],[586,6290,6291],{"class":599}," ref",[586,6293,606],{"class":591},[586,6295,609],{"class":591},[586,6297,6298],{"class":612},"targetDirectionLightRef",[586,6300,755],{"class":591},[586,6302,6304],{"class":6303,"line":5026},[588,622],[586,6305,4058],{"class":599},[586,6307,6309],{"class":6308,"line":5027},[588,622],[586,6310,4064],{"class":599},[586,6312,6314,6316,6318,6320,6322],{"class":6313,"line":5028},[588,622],[586,6315,5955],{"class":599},[586,6317,606],{"class":591},[586,6319,609],{"class":591},[586,6321,4970],{"class":612},[586,6323,755],{"class":591},[586,6325,6327,6329,6331,6333,6335,6337,6339,6341,6344,6346,6348,6350],{"class":6326,"line":5029},[588,622],[586,6328,776],{"class":591},[586,6330,1702],{"class":599},[586,6332,606],{"class":591},[586,6334,609],{"class":591},[586,6336,1709],{"class":591},[586,6338,1936],{"class":1712},[586,6340,1715],{"class":591},[586,6342,6343],{"class":1712},".5",[586,6345,5986],{"class":591},[586,6347,1718],{"class":1712},[586,6349,1726],{"class":591},[586,6351,755],{"class":591},[586,6353,6355,6357,6360,6362,6364,6367],{"class":6354,"line":5030},[588,622],[586,6356,776],{"class":591},[586,6358,6359],{"class":599},"material",[586,6361,606],{"class":591},[586,6363,609],{"class":591},[586,6365,6366],{"class":632},"customMaterial",[586,6368,755],{"class":591},[586,6370,6372],{"class":6371,"line":5031},[588,622],[586,6373,6374],{"class":599}," receive-shadow\n",[586,6376,6378,6380,6382,6384,6386,6388,6390,6392,6394,6396],{"class":6377,"line":5032},[588,622],[586,6379,776],{"class":591},[586,6381,6000],{"class":599},[586,6383,606],{"class":591},[586,6385,609],{"class":591},[586,6387,1709],{"class":591},[586,6389,6009],{"class":1712},[586,6391,1715],{"class":591},[586,6393,1139],{"class":1712},[586,6395,1726],{"class":591},[586,6397,755],{"class":591},[586,6399,6401],{"class":588,"line":6400},97,[586,6402,4142],{"class":591},[586,6404,6406,6408,6410,6413,6415,6417,6420,6422,6425,6427],{"class":6405,"line":5033},[588,622],[586,6407,1795],{"class":591},[586,6409,5584],{"class":595},[586,6411,6412],{"class":599}," style",[586,6414,606],{"class":591},[586,6416,609],{"class":591},[586,6418,6419],{"class":612},"width: 100px; height: auto; aspect-ratio: 250\u002F250;",[586,6421,609],{"class":591},[586,6423,6424],{"class":591},">\u003C\u002F",[586,6426,5584],{"class":595},[586,6428,618],{"class":591},[586,6430,6432,6434,6436],{"class":6431,"line":5034},[588,622],[586,6433,1867],{"class":591},[586,6435,4178],{"class":595},[586,6437,618],{"class":591},[586,6439,6441],{"class":6440,"line":5035},[588,622],[586,6442,654],{"emptyLinePlaceholder":520},[586,6444,6446,6448],{"class":6445,"line":5036},[588,622],[586,6447,736],{"class":591},[586,6449,4052],{"class":595},[586,6451,6453],{"class":6452,"line":5037},[588,622],[586,6454,4058],{"class":599},[586,6456,6458],{"class":6457,"line":5038},[588,622],[586,6459,4064],{"class":599},[586,6461,6463,6465,6467,6469,6471],{"class":6462,"line":5039},[588,622],[586,6464,5955],{"class":599},[586,6466,606],{"class":591},[586,6468,609],{"class":591},[586,6470,4970],{"class":612},[586,6472,755],{"class":591},[586,6474,6476,6478,6480,6482,6484,6486,6488,6490,6493,6495,6497,6499],{"class":6475,"line":5040},[588,622],[586,6477,776],{"class":591},[586,6479,1702],{"class":599},[586,6481,606],{"class":591},[586,6483,609],{"class":591},[586,6485,1709],{"class":591},[586,6487,1936],{"class":1712},[586,6489,1715],{"class":591},[586,6491,6492],{"class":1712},"2.5",[586,6494,5986],{"class":591},[586,6496,1718],{"class":1712},[586,6498,1726],{"class":591},[586,6500,755],{"class":591},[586,6502,6504,6506,6508,6510,6512,6514,6516,6518,6520,6522],{"class":6503,"line":5041},[588,622],[586,6505,776],{"class":591},[586,6507,6000],{"class":599},[586,6509,606],{"class":591},[586,6511,609],{"class":591},[586,6513,1709],{"class":591},[586,6515,6009],{"class":1712},[586,6517,1715],{"class":591},[586,6519,1139],{"class":1712},[586,6521,1726],{"class":591},[586,6523,755],{"class":591},[586,6525,6527],{"class":6526,"line":5042},[588,622],[586,6528,4142],{"class":591},[586,6530,6532,6534,6536,6538,6540,6542,6545,6547],{"class":6531,"line":5043},[588,622],[586,6533,1795],{"class":591},[586,6535,5584],{"class":595},[586,6537,2971],{"class":599},[586,6539,606],{"class":591},[586,6541,609],{"class":591},[586,6543,6544],{"class":612},"text-center text-xs p-2 text-dark bg-[#FF0000]",[586,6546,609],{"class":591},[586,6548,618],{"class":591},[586,6550,6552,6554,6556,6558,6561,6563,6565,6567,6569,6571],{"class":588,"line":6551},109,[586,6553,5869],{"class":591},[586,6555,2896],{"class":595},[586,6557,2241],{"class":591},[586,6559,6560],{"class":632},"HTML + Custom material ",[586,6562,689],{"class":591},[586,6564,2896],{"class":595},[586,6566,2241],{"class":591},[586,6568,6233],{"class":591},[586,6570,932],{"class":595},[586,6572,1731],{"class":591},[586,6574,6576,6578,6580,6582,6585,6587,6589,6591],{"class":588,"line":6575},110,[586,6577,5869],{"class":591},[586,6579,4765],{"class":595},[586,6581,2241],{"class":591},[586,6583,6584],{"class":632},"+ receive-shadow ",[586,6586,689],{"class":591},[586,6588,4765],{"class":595},[586,6590,2241],{"class":591},[586,6592,6593],{"class":632}," ⬇️\n",[586,6595,6597,6599,6601],{"class":588,"line":6596},111,[586,6598,5913],{"class":591},[586,6600,5584],{"class":595},[586,6602,618],{"class":591},[586,6604,6606,6608,6610],{"class":588,"line":6605},112,[586,6607,1867],{"class":591},[586,6609,4178],{"class":595},[586,6611,618],{"class":591},[586,6613,6615],{"class":588,"line":6614},113,[586,6616,654],{"emptyLinePlaceholder":520},[586,6618,6620,6622],{"class":588,"line":6619},114,[586,6621,736],{"class":591},[586,6623,6624],{"class":595},"TresDirectionalLight\n",[586,6626,6628,6631,6633,6635,6637,6639,6641],{"class":588,"line":6627},115,[586,6629,6630],{"class":625}," v-if",[586,6632,606],{"class":591},[586,6634,609],{"class":591},[586,6636,6298],{"class":632},[586,6638,2710],{"class":591},[586,6640,2713],{"class":632},[586,6642,755],{"class":591},[586,6644,6646,6648,6651,6653,6655,6657,6659,6661],{"class":588,"line":6645},116,[586,6647,776],{"class":591},[586,6649,6650],{"class":599},"target",[586,6652,606],{"class":591},[586,6654,609],{"class":591},[586,6656,6298],{"class":632},[586,6658,2710],{"class":591},[586,6660,2713],{"class":632},[586,6662,755],{"class":591},[586,6664,6666,6668,6671,6673,6675,6678],{"class":588,"line":6665},117,[586,6667,776],{"class":591},[586,6669,6670],{"class":599},"shadow-normalBias",[586,6672,606],{"class":591},[586,6674,609],{"class":591},[586,6676,6677],{"class":1712},"0.075",[586,6679,755],{"class":591},[586,6681,6683,6685,6687,6689,6691,6693,6695,6697,6699,6701,6703,6705],{"class":588,"line":6682},118,[586,6684,776],{"class":591},[586,6686,1702],{"class":599},[586,6688,606],{"class":591},[586,6690,609],{"class":591},[586,6692,1709],{"class":591},[586,6694,1723],{"class":1712},[586,6696,1715],{"class":591},[586,6698,1139],{"class":1712},[586,6700,1715],{"class":591},[586,6702,1723],{"class":1712},[586,6704,1726],{"class":591},[586,6706,755],{"class":591},[586,6708,6710,6712,6714,6716,6718,6720],{"class":588,"line":6709},119,[586,6711,776],{"class":591},[586,6713,1896],{"class":599},[586,6715,606],{"class":591},[586,6717,609],{"class":591},[586,6719,1718],{"class":1712},[586,6721,755],{"class":591},[586,6723,6725],{"class":588,"line":6724},120,[586,6726,6727],{"class":599}," cast-shadow\n",[586,6729,6731],{"class":588,"line":6730},121,[586,6732,794],{"class":591},[586,6734,6736],{"class":588,"line":6735},122,[586,6737,654],{"emptyLinePlaceholder":520},[586,6739,6741,6743,6745,6747,6750,6752,6754,6757,6759,6761],{"class":588,"line":6740},123,[586,6742,736],{"class":591},[586,6744,2523],{"class":595},[586,6746,1699],{"class":591},[586,6748,6749],{"class":599},"position-y",[586,6751,606],{"class":591},[586,6753,609],{"class":591},[586,6755,6756],{"class":591},"-",[586,6758,1812],{"class":1712},[586,6760,609],{"class":591},[586,6762,1731],{"class":591},[586,6764,6766,6768,6770,6772,6774,6776,6778,6780,6782],{"class":588,"line":6765},124,[586,6767,736],{"class":591},[586,6769,1891],{"class":595},[586,6771,1699],{"class":591},[586,6773,1896],{"class":599},[586,6775,606],{"class":591},[586,6777,609],{"class":591},[586,6779,1812],{"class":1712},[586,6781,609],{"class":591},[586,6783,1731],{"class":591},[586,6785,6787,6789,6791],{"class":588,"line":6786},125,[586,6788,800],{"class":591},[586,6790,717],{"class":595},[586,6792,618],{"class":591},[586,6794,6796,6798,6800],{"class":588,"line":6795},126,[586,6797,810],{"class":591},[586,6799,5584],{"class":595},[586,6801,618],{"class":591},[586,6803,6805,6807,6809],{"class":588,"line":6804},127,[586,6806,689],{"class":591},[586,6808,706],{"class":595},[586,6810,618],{"class":591},[586,6812,6814],{"class":588,"line":6813},128,[586,6815,654],{"emptyLinePlaceholder":520},[586,6817,6819,6821,6823,6825],{"class":588,"line":6818},129,[586,6820,592],{"class":591},[586,6822,1560],{"class":595},[586,6824,4229],{"class":599},[586,6826,618],{"class":591},[586,6828,6830,6832,6835],{"class":588,"line":6829},130,[586,6831,835],{"class":591},[586,6833,6834],{"class":2232},"html-demo-wrapper",[586,6836,2322],{"class":591},[586,6838,6840,6842,6844,6847],{"class":588,"line":6839},131,[586,6841,3103],{"class":4244},[586,6843,2313],{"class":591},[586,6845,6846],{"class":1712}," 100%",[586,6848,4256],{"class":591},[586,6850,6852,6854,6856,6858],{"class":588,"line":6851},132,[586,6853,3116],{"class":4244},[586,6855,2313],{"class":591},[586,6857,6846],{"class":1712},[586,6859,4256],{"class":591},[586,6861,6863,6866,6868,6871],{"class":588,"line":6862},133,[586,6864,6865],{"class":4244}," position",[586,6867,2313],{"class":591},[586,6869,6870],{"class":632}," relative",[586,6872,4256],{"class":591},[586,6874,6876,6879,6881,6884],{"class":588,"line":6875},134,[586,6877,6878],{"class":4244}," overflow",[586,6880,2313],{"class":591},[586,6882,6883],{"class":632}," hidden",[586,6885,4256],{"class":591},[586,6887,6889,6891,6893,6895,6898],{"class":588,"line":6888},135,[586,6890,4245],{"class":4244},[586,6892,2313],{"class":591},[586,6894,4250],{"class":591},[586,6896,6897],{"class":632},"82dbc5",[586,6899,4256],{"class":591},[586,6901,6903],{"class":588,"line":6902},136,[586,6904,2414],{"class":591},[586,6906,6908,6910,6912],{"class":588,"line":6907},137,[586,6909,689],{"class":591},[586,6911,1560],{"class":595},[586,6913,618],{"class":591},[568,6915,6917],{"id":6916},"custom-geometry","Custom Geometry",[504,6919,6920,6921,6924,6925,6928,6929,6932,6933,6936,6937,6941],{},"By default, when using ",[542,6922,6923],{},"occlude=\"blending\"",", occlusion works correctly only with ",[2896,6926,6927],{},"rectangular HTML elements"," (using a ",[542,6930,6931],{},"PlaneGeometry",").\nFor ",[4765,6934,6935],{},"non-rectangular content",", you can use the ",[2896,6938,6939],{},[542,6940,5688],{}," prop to provide a matching custom geometry.",[504,6943,6944,6945,937,6948,6951,6952,6959,6960,835],{},"In the ",[2896,6946,6947],{},"demo above ⬆️",[4765,6949,6950],{},"(middle yellow example)",", a ",[547,6953,6956],{"href":6954,"rel":6955},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#api\u002Fen\u002Fgeometries\u002FCircleGeometry",[551],[542,6957,6958],{},"CircleGeometry"," is used as a ",[2896,6961,6962],{},"custom geometry",[6964,6965,6966],"prose-list",{},[558,6967,6968,6977],{},[561,6969,1377,6970,6972,6973,6976],{},[542,6971,5688],{}," prop only defines the ",[2896,6974,6975],{},"occlusion shape"," in 3D and does not modify your HTML content.",[561,6978,6979,6980,6987,6988,6991,6992,6995,6996,7003],{},"You can provide any ",[547,6981,6984],{"href":6982,"rel":6983},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#api\u002Fen\u002Fcore\u002FBufferGeometry",[551],[542,6985,6986],{},"BufferGeometry",", for example to simulate ",[2896,6989,6990],{},"CSS-like styles"," such as ",[542,6993,6994],{},"border-radius"," using a rounded rectangle or squircle geometry (see ",[547,6997,7000],{"href":6998,"rel":6999},"https:\u002F\u002Fdiscourse.threejs.org\u002Ft\u002Froundedrectangle-squircle\u002F28645",[551],[542,7001,7002],{},"RoundedRectangle \u002F Squircle geometry"," for example).",[913,7005,7007],{"id":7006},"custom-material","Custom Material",[504,7009,7010,7011,7013,7014,937,7016,6951,7019,7022],{},"You can also assign material properties to the HTML content using the ",[542,7012,6359],{}," prop.\nIn the ",[2896,7015,6947],{},[4765,7017,7018],{},"(right red example)",[2896,7020,7021],{},"custom material"," is used with shadow.",[7024,7025,7026],"prose-note",{},[504,7027,1377,7028,7030,7031,7033,7034,835],{},[542,7029,6359],{}," prop is only available when ",[542,7032,6923],{}," is ",[2896,7035,7036],{},"enabled",[7024,7038,7039],{},[504,7040,7041,7042,3695,7047,7052,7053,7056,7057,7059,7060,7063,7064,7069,7070,7075,7076],{},"Enable shadows using the ",[2896,7043,7044],{},[542,7045,7046],{},"castShadow",[2896,7048,7049],{},[542,7050,7051],{},"receiveShadow"," props.\nShadows are supported ",[2896,7054,7055],{},"only"," when using a ",[2896,7058,7021],{},". By default, shadows do ",[2896,7061,7062],{},"not"," work with ",[4765,7065,7066],{},[542,7067,7068],{},"MeshBasicMaterial"," or ",[4765,7071,7072],{},[542,7073,7074],{},"ShaderMaterial",". ",[932,7077],{},[568,7079,7081,7082],{"id":7080},"using-transition","Using ",[542,7083,7084],{},"\u003CTransition>",[504,7086,7087,7088,7094,7095,7097,7098,7101,7102,3695,7105,7108],{},"The native Vue ",[547,7089,7092],{"href":7090,"rel":7091},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fbuilt-ins\u002Ftransition",[551],[542,7093,7084],{}," component works seamlessly with ",[542,7096,3840],{},".\nThis means you can ",[2896,7099,7100],{},"animate"," how your projected HTML content ",[4765,7103,7104],{},"enters",[4765,7106,7107],{},"leaves"," the scene, exactly as you would in a regular Vue application.",[7024,7110,7111],{},[504,7112,7113,7114,7117,7118,1715,7121,7123,7124,7127],{},"All ",[2896,7115,7116],{},"standard interactions"," are supported just like on a regular HTML element — ",[2896,7119,7120],{},"hover effects",[2896,7122,1300],{},", and ",[4765,7125,7126],{},"any kind of DOM interaction"," are fully possible.",[534,7129,7130],{},[7131,7132],"objects-html-transition-demo",{},[4365,7134,4367,7135,7137],{},[4369,7136,4371],{},[572,7138,7141],{"className":574,"code":7139,"highlights":7140,"language":582,"meta":512,"style":512},"\u003Cscript setup lang=\"ts\">\nimport { Html, Levioso, OrbitControls } from '@tresjs\u002Fcientos'\nimport { TresCanvas } from '@tresjs\u002Fcore'\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\u002Fscript>\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]\" \u002F>\n \u003COrbitControls :dom-element=\"rootRef\" \u002F>\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) \u002F 2) * 2, 1, 0]\">\n \u003Ccomponent :is=\"geometry.component\" :args=\"geometry.args\" \u002F>\n \u003CTresMeshNormalMaterial \u002F>\n \u003C\u002FTresMesh>\n \u003C\u002FLevioso>\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\u002Fstrong>\u003Cbr \u002F>\n \u003Cem>occlude=blending 💛\u003C\u002Fem>\n \u003C\u002Fh1>\n \u003C\u002FTransition>\n \u003C\u002FHtml>\n\n \u003CTresGridHelper :position-y=\"-1.25\" \u002F>\n \u003CTresAmbientLight :intensity=\"1\" \u002F>\n \u003C\u002FTresCanvas>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\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\u002Fstyle>\n",[514,6084,5011,5012,5013,5014,5015,5016,5017,5018,5019,5020,5021,6258,5022,5023,5024,5025,5026,5027,5028],[542,7142,7143,7163,7190,7208,7226,7230,7240,7254,7265,7275,7285,7296,7300,7304,7325,7329,7351,7355,7365,7369,7383,7405,7409,7413,7427,7449,7453,7457,7471,7497,7501,7505,7520,7543,7547,7551,7555,7575,7648,7690,7714,7718,7722,7738,7754,7758,7766,7770,7778,7807,7836,7868,7889,7893,7899,7921,7939,7953,7967,7981,8004,8008,8064,8092,8100,8108,8116,8120,8126,8130,8134,8146,8172,8188,8211,8216,8238,8246,8261,8276,8291,8306,8312,8336,8354,8364,8373,8382,8387,8410,8431,8440,8449,8457,8461,8471,8479,8489,8499,8509,8519,8531,8535,8539,8553,8571,8575,8579,8588,8597,8607,8623,8627,8631,8640,8649,8667,8671,8675,8684,8693,8703,8717,8721],{"__ignoreMap":512},[586,7144,7145,7147,7149,7151,7153,7155,7157,7159,7161],{"class":588,"line":513},[586,7146,592],{"class":591},[586,7148,596],{"class":595},[586,7150,600],{"class":599},[586,7152,603],{"class":599},[586,7154,606],{"class":591},[586,7156,609],{"class":591},[586,7158,613],{"class":612},[586,7160,609],{"class":591},[586,7162,618],{"class":591},[586,7164,7166,7168,7170,7172,7174,7176,7178,7180,7182,7184,7186,7188],{"class":7165,"line":514},[588,622],[586,7167,626],{"class":625},[586,7169,629],{"class":591},[586,7171,3884],{"class":632},[586,7173,1648],{"class":591},[586,7175,5079],{"class":632},[586,7177,1648],{"class":591},[586,7179,1651],{"class":632},[586,7181,636],{"class":591},[586,7183,639],{"class":625},[586,7185,642],{"class":591},[586,7187,645],{"class":612},[586,7189,648],{"class":591},[586,7191,7192,7194,7196,7198,7200,7202,7204,7206],{"class":588,"line":651},[586,7193,626],{"class":625},[586,7195,629],{"class":591},[586,7197,2183],{"class":632},[586,7199,636],{"class":591},[586,7201,639],{"class":625},[586,7203,642],{"class":591},[586,7205,2172],{"class":612},[586,7207,648],{"class":591},[586,7209,7210,7212,7214,7216,7218,7220,7222,7224],{"class":588,"line":657},[586,7211,626],{"class":625},[586,7213,629],{"class":591},[586,7215,669],{"class":632},[586,7217,636],{"class":591},[586,7219,639],{"class":625},[586,7221,642],{"class":591},[586,7223,582],{"class":612},[586,7225,648],{"class":591},[586,7227,7228],{"class":588,"line":686},[586,7229,654],{"emptyLinePlaceholder":520},[586,7231,7232,7234,7236,7238],{"class":588,"line":696},[586,7233,660],{"class":599},[586,7235,5165],{"class":632},[586,7237,606],{"class":591},[586,7239,2322],{"class":591},[586,7241,7242,7244,7246,7248,7250,7252],{"class":588,"line":701},[586,7243,5174],{"class":595},[586,7245,2313],{"class":591},[586,7247,642],{"class":591},[586,7249,3952],{"class":612},[586,7251,675],{"class":591},[586,7253,3097],{"class":591},[586,7255,7256,7258,7260,7263],{"class":588,"line":711},[586,7257,5189],{"class":595},[586,7259,2313],{"class":591},[586,7261,7262],{"class":1712}," 0",[586,7264,3097],{"class":591},[586,7266,7267,7269,7271,7273],{"class":588,"line":722},[586,7268,5200],{"class":595},[586,7270,2313],{"class":591},[586,7272,3094],{"class":2585},[586,7274,3097],{"class":591},[586,7276,7277,7279,7281,7283],{"class":588,"line":577},[586,7278,5211],{"class":595},[586,7280,2313],{"class":591},[586,7282,3094],{"class":2585},[586,7284,3097],{"class":591},[586,7286,7287,7290,7292,7294],{"class":588,"line":578},[586,7288,7289],{"class":595}," antialias",[586,7291,2313],{"class":591},[586,7293,3094],{"class":2585},[586,7295,3097],{"class":591},[586,7297,7298],{"class":588,"line":579},[586,7299,2414],{"class":591},[586,7301,7302],{"class":588,"line":580},[586,7303,654],{"emptyLinePlaceholder":520},[586,7305,7306,7308,7311,7313,7315,7317,7320,7322],{"class":588,"line":581},[586,7307,660],{"class":599},[586,7309,7310],{"class":632}," rootRef ",[586,7312,606],{"class":591},[586,7314,669],{"class":668},[586,7316,592],{"class":591},[586,7318,7319],{"class":2232},"HTMLElement",[586,7321,2241],{"class":591},[586,7323,7324],{"class":632},"()\n",[586,7326,7327],{"class":588,"line":797},[586,7328,654],{"emptyLinePlaceholder":520},[586,7330,7331,7333,7336,7338,7340,7342,7344,7347,7349],{"class":588,"line":807},[586,7332,660],{"class":599},[586,7334,7335],{"class":632}," bgColor ",[586,7337,606],{"class":591},[586,7339,669],{"class":668},[586,7341,672],{"class":632},[586,7343,675],{"class":591},[586,7345,7346],{"class":612},"#F6B03B",[586,7348,675],{"class":591},[586,7350,683],{"class":632},[586,7352,7353],{"class":588,"line":817},[586,7354,654],{"emptyLinePlaceholder":520},[586,7356,7357,7359,7361,7363],{"class":588,"line":1910},[586,7358,660],{"class":599},[586,7360,5253],{"class":632},[586,7362,606],{"class":591},[586,7364,5258],{"class":632},[586,7366,7367],{"class":588,"line":1945},[586,7368,5263],{"class":591},[586,7370,7371,7373,7375,7377,7379,7381],{"class":588,"line":1954},[586,7372,5268],{"class":595},[586,7374,2313],{"class":591},[586,7376,642],{"class":591},[586,7378,2637],{"class":612},[586,7380,675],{"class":591},[586,7382,3097],{"class":591},[586,7384,7385,7387,7389,7391,7393,7395,7397,7399,7401,7403],{"class":588,"line":2513},[586,7386,5283],{"class":595},[586,7388,2313],{"class":591},[586,7390,5288],{"class":632},[586,7392,1812],{"class":1712},[586,7394,1648],{"class":591},[586,7396,3143],{"class":1712},[586,7398,1648],{"class":591},[586,7400,3143],{"class":1712},[586,7402,1726],{"class":632},[586,7404,3097],{"class":591},[586,7406,7407],{"class":588,"line":2518},[586,7408,3151],{"class":591},[586,7410,7411],{"class":588,"line":2102},[586,7412,5263],{"class":591},[586,7414,7415,7417,7419,7421,7423,7425],{"class":588,"line":2103},[586,7416,5268],{"class":595},[586,7418,2313],{"class":591},[586,7420,642],{"class":591},[586,7422,1798],{"class":612},[586,7424,675],{"class":591},[586,7426,3097],{"class":591},[586,7428,7429,7431,7433,7435,7437,7439,7441,7443,7445,7447],{"class":588,"line":2104},[586,7430,5283],{"class":595},[586,7432,2313],{"class":591},[586,7434,5288],{"class":632},[586,7436,5335],{"class":1712},[586,7438,1648],{"class":591},[586,7440,5340],{"class":1712},[586,7442,1648],{"class":591},[586,7444,5340],{"class":1712},[586,7446,1726],{"class":632},[586,7448,3097],{"class":591},[586,7450,7451],{"class":588,"line":2105},[586,7452,3151],{"class":591},[586,7454,7455],{"class":588,"line":2617},[586,7456,5263],{"class":591},[586,7458,7459,7461,7463,7465,7467,7469],{"class":588,"line":2623},[586,7460,5268],{"class":595},[586,7462,2313],{"class":591},[586,7464,642],{"class":591},[586,7466,2805],{"class":612},[586,7468,675],{"class":591},[586,7470,3097],{"class":591},[586,7472,7473,7475,7477,7479,7481,7483,7485,7487,7489,7491,7493,7495],{"class":588,"line":2632},[586,7474,5283],{"class":595},[586,7476,2313],{"class":591},[586,7478,5288],{"class":632},[586,7480,1903],{"class":1712},[586,7482,1648],{"class":591},[586,7484,5385],{"class":1712},[586,7486,1648],{"class":591},[586,7488,5390],{"class":1712},[586,7490,1648],{"class":591},[586,7492,5395],{"class":1712},[586,7494,1726],{"class":632},[586,7496,3097],{"class":591},[586,7498,7499],{"class":588,"line":2666},[586,7500,3151],{"class":591},[586,7502,7503],{"class":588,"line":2671},[586,7504,5263],{"class":591},[586,7506,7507,7509,7511,7513,7516,7518],{"class":588,"line":2679},[586,7508,5268],{"class":595},[586,7510,2313],{"class":591},[586,7512,642],{"class":591},[586,7514,7515],{"class":612},"TresConeGeometry",[586,7517,675],{"class":591},[586,7519,3097],{"class":591},[586,7521,7522,7524,7526,7528,7530,7532,7535,7537,7539,7541],{"class":588,"line":2696},[586,7523,5283],{"class":595},[586,7525,2313],{"class":591},[586,7527,5288],{"class":632},[586,7529,5335],{"class":1712},[586,7531,1648],{"class":591},[586,7533,7534],{"class":1712}," 1.4",[586,7536,1648],{"class":591},[586,7538,5340],{"class":1712},[586,7540,1726],{"class":632},[586,7542,3097],{"class":591},[586,7544,7545],{"class":588,"line":2726},[586,7546,3151],{"class":591},[586,7548,7549],{"class":588,"line":2731},[586,7550,5436],{"class":632},[586,7552,7553],{"class":588,"line":2740},[586,7554,654],{"emptyLinePlaceholder":520},[586,7556,7557,7559,7562,7564,7567,7570,7573],{"class":588,"line":2745},[586,7558,660],{"class":599},[586,7560,7561],{"class":632}," getRandomBackgroundColor ",[586,7563,606],{"class":591},[586,7565,7566],{"class":591}," ():",[586,7568,7569],{"class":2232}," string",[586,7571,7572],{"class":599}," =>",[586,7574,2322],{"class":591},[586,7576,7577,7580,7583,7585,7587,7589,7591,7593,7595,7597,7599,7601,7603,7605,7608,7610,7612,7614,7617,7619,7621,7623,7626,7628,7630,7632,7635,7637,7639,7641,7644,7646],{"class":588,"line":2753},[586,7578,7579],{"class":599}," const",[586,7581,7582],{"class":632}," colors",[586,7584,2375],{"class":591},[586,7586,5288],{"class":595},[586,7588,675],{"class":591},[586,7590,7346],{"class":612},[586,7592,675],{"class":591},[586,7594,1648],{"class":591},[586,7596,642],{"class":591},[586,7598,3952],{"class":612},[586,7600,675],{"class":591},[586,7602,1648],{"class":591},[586,7604,642],{"class":591},[586,7606,7607],{"class":612},"#FF5733",[586,7609,675],{"class":591},[586,7611,1648],{"class":591},[586,7613,642],{"class":591},[586,7615,7616],{"class":612},"#33FF57",[586,7618,675],{"class":591},[586,7620,1648],{"class":591},[586,7622,642],{"class":591},[586,7624,7625],{"class":612},"#3357FF",[586,7627,675],{"class":591},[586,7629,1648],{"class":591},[586,7631,642],{"class":591},[586,7633,7634],{"class":612},"#F333FF",[586,7636,675],{"class":591},[586,7638,1648],{"class":591},[586,7640,642],{"class":591},[586,7642,7643],{"class":612},"#33FFF5",[586,7645,675],{"class":591},[586,7647,5436],{"class":595},[586,7649,7650,7652,7655,7657,7660,7662,7665,7667,7670,7672,7675,7678,7681,7683,7685,7688],{"class":588,"line":2766},[586,7651,7579],{"class":599},[586,7653,7654],{"class":632}," idx",[586,7656,2375],{"class":591},[586,7658,7659],{"class":632}," Math",[586,7661,835],{"class":591},[586,7663,7664],{"class":668},"floor",[586,7666,672],{"class":595},[586,7668,7669],{"class":632},"Math",[586,7671,835],{"class":591},[586,7673,7674],{"class":668},"random",[586,7676,7677],{"class":595},"() ",[586,7679,7680],{"class":591},"*",[586,7682,7582],{"class":632},[586,7684,835],{"class":591},[586,7686,7687],{"class":632},"length",[586,7689,683],{"class":595},[586,7691,7692,7695,7697,7699,7702,7705,7708,7710,7712],{"class":588,"line":2794},[586,7693,7694],{"class":625}," return",[586,7696,7582],{"class":632},[586,7698,1709],{"class":595},[586,7700,7701],{"class":632},"idx",[586,7703,7704],{"class":595},"] ",[586,7706,7707],{"class":591},"??",[586,7709,642],{"class":591},[586,7711,7346],{"class":612},[586,7713,648],{"class":591},[586,7715,7716],{"class":588,"line":2800},[586,7717,2414],{"class":591},[586,7719,7720],{"class":588,"line":2840},[586,7721,654],{"emptyLinePlaceholder":520},[586,7723,7724,7726,7729,7731,7734,7736],{"class":588,"line":2850},[586,7725,660],{"class":599},[586,7727,7728],{"class":632}," updateBackgroundColor ",[586,7730,606],{"class":591},[586,7732,7733],{"class":591}," ()",[586,7735,7572],{"class":599},[586,7737,2322],{"class":591},[586,7739,7740,7743,7745,7747,7749,7752],{"class":588,"line":2859},[586,7741,7742],{"class":632}," bgColor",[586,7744,835],{"class":591},[586,7746,2341],{"class":632},[586,7748,2375],{"class":591},[586,7750,7751],{"class":668}," getRandomBackgroundColor",[586,7753,7324],{"class":595},[586,7755,7756],{"class":588,"line":2868},[586,7757,2414],{"class":591},[586,7759,7760,7762,7764],{"class":588,"line":5654},[586,7761,689],{"class":591},[586,7763,596],{"class":595},[586,7765,618],{"class":591},[586,7767,7768],{"class":588,"line":5663},[586,7769,654],{"emptyLinePlaceholder":520},[586,7771,7772,7774,7776],{"class":588,"line":5668},[586,7773,592],{"class":591},[586,7775,706],{"class":595},[586,7777,618],{"class":591},[586,7779,7780,7782,7784,7786,7788,7790,7793,7795,7797,7799,7801,7803,7805],{"class":588,"line":5676},[586,7781,714],{"class":591},[586,7783,5584],{"class":595},[586,7785,669],{"class":599},[586,7787,606],{"class":591},[586,7789,609],{"class":591},[586,7791,7792],{"class":612},"rootRef",[586,7794,609],{"class":591},[586,7796,2971],{"class":599},[586,7798,606],{"class":591},[586,7800,609],{"class":591},[586,7802,6834],{"class":612},[586,7804,609],{"class":591},[586,7806,618],{"class":591},[586,7808,7809,7811,7813,7815,7817,7819,7821,7823,7825,7827,7829,7832,7834],{"class":588,"line":5704},[586,7810,725],{"class":591},[586,7812,717],{"class":595},[586,7814,5606],{"class":599},[586,7816,606],{"class":591},[586,7818,609],{"class":591},[586,7820,5613],{"class":632},[586,7822,609],{"class":591},[586,7824,2971],{"class":599},[586,7826,606],{"class":591},[586,7828,609],{"class":591},[586,7830,7831],{"class":612},"!pointer-events-none",[586,7833,609],{"class":591},[586,7835,618],{"class":591},[586,7837,7838,7840,7842,7844,7846,7848,7850,7852,7854,7856,7858,7860,7862,7864,7866],{"class":588,"line":5728},[586,7839,736],{"class":591},[586,7841,1696],{"class":595},[586,7843,1699],{"class":591},[586,7845,1702],{"class":599},[586,7847,606],{"class":591},[586,7849,609],{"class":591},[586,7851,1709],{"class":591},[586,7853,1139],{"class":1712},[586,7855,1715],{"class":591},[586,7857,5640],{"class":1712},[586,7859,1715],{"class":591},[586,7861,5645],{"class":1712},[586,7863,1726],{"class":591},[586,7865,609],{"class":591},[586,7867,1731],{"class":591},[586,7869,7870,7872,7874,7876,7879,7881,7883,7885,7887],{"class":588,"line":5744},[586,7871,736],{"class":591},[586,7873,1738],{"class":595},[586,7875,1699],{"class":591},[586,7877,7878],{"class":599},"dom-element",[586,7880,606],{"class":591},[586,7882,609],{"class":591},[586,7884,7792],{"class":632},[586,7886,609],{"class":591},[586,7888,1731],{"class":591},[586,7890,7891],{"class":588,"line":5761},[586,7892,654],{"emptyLinePlaceholder":520},[586,7894,7895,7897],{"class":588,"line":5777},[586,7896,736],{"class":591},[586,7898,5673],{"class":595},[586,7900,7901,7903,7905,7907,7909,7911,7913,7915,7917,7919],{"class":588,"line":5803},[586,7902,5679],{"class":625},[586,7904,606],{"class":591},[586,7906,609],{"class":591},[586,7908,672],{"class":591},[586,7910,5688],{"class":632},[586,7912,1715],{"class":591},[586,7914,5693],{"class":632},[586,7916,5696],{"class":591},[586,7918,5699],{"class":632},[586,7920,755],{"class":591},[586,7922,7923,7925,7927,7929,7931,7933,7935,7937],{"class":588,"line":5808},[586,7924,776],{"class":591},[586,7926,5709],{"class":599},[586,7928,606],{"class":591},[586,7930,5714],{"class":591},[586,7932,5717],{"class":612},[586,7934,5720],{"class":591},[586,7936,5693],{"class":632},[586,7938,5725],{"class":591},[586,7940,7941,7943,7945,7947,7949,7951],{"class":588,"line":5866},[586,7942,776],{"class":591},[586,7944,5733],{"class":599},[586,7946,606],{"class":591},[586,7948,609],{"class":591},[586,7950,2779],{"class":1712},[586,7952,755],{"class":591},[586,7954,7955,7957,7959,7961,7963,7965],{"class":588,"line":5901},[586,7956,776],{"class":591},[586,7958,5749],{"class":599},[586,7960,606],{"class":591},[586,7962,609],{"class":591},[586,7964,5756],{"class":1712},[586,7966,755],{"class":591},[586,7968,7969,7971,7973,7975,7977,7979],{"class":588,"line":5910},[586,7970,776],{"class":591},[586,7972,5766],{"class":599},[586,7974,606],{"class":591},[586,7976,609],{"class":591},[586,7978,1812],{"class":1712},[586,7980,755],{"class":591},[586,7982,7983,7985,7987,7989,7991,7993,7996,7998,8000,8002],{"class":588,"line":5920},[586,7984,776],{"class":591},[586,7986,5782],{"class":599},[586,7988,606],{"class":591},[586,7990,609],{"class":591},[586,7992,5789],{"class":591},[586,7994,7995],{"class":1712},"0.4",[586,7997,1715],{"class":591},[586,7999,7995],{"class":1712},[586,8001,1726],{"class":591},[586,8003,755],{"class":591},[586,8005,8006],{"class":588,"line":5930},[586,8007,4142],{"class":591},[586,8009,8010,8012,8014,8016,8018,8020,8022,8025,8027,8030,8032,8034,8036,8038,8040,8043,8045,8048,8050,8052,8054,8056,8058,8060,8062],{"class":588,"line":5000},[586,8011,1795],{"class":591},[586,8013,1788],{"class":595},[586,8015,1699],{"class":591},[586,8017,1702],{"class":599},[586,8019,606],{"class":591},[586,8021,609],{"class":591},[586,8023,8024],{"class":591},"[(",[586,8026,5693],{"class":632},[586,8028,8029],{"class":591}," - (",[586,8031,5699],{"class":632},[586,8033,835],{"class":591},[586,8035,7687],{"class":632},[586,8037,5832],{"class":591},[586,8039,1812],{"class":1712},[586,8041,8042],{"class":591},") \u002F ",[586,8044,1718],{"class":1712},[586,8046,8047],{"class":591},") * ",[586,8049,1718],{"class":1712},[586,8051,1715],{"class":591},[586,8053,1812],{"class":1712},[586,8055,1715],{"class":591},[586,8057,1139],{"class":1712},[586,8059,1726],{"class":591},[586,8061,609],{"class":591},[586,8063,618],{"class":591},[586,8065,8066,8068,8070,8072,8074,8076,8078,8080,8082,8084,8086,8088,8090],{"class":588,"line":5001},[586,8067,5869],{"class":591},[586,8069,5872],{"class":595},[586,8071,5875],{"class":599},[586,8073,606],{"class":591},[586,8075,609],{"class":591},[586,8077,5882],{"class":612},[586,8079,609],{"class":591},[586,8081,5887],{"class":599},[586,8083,606],{"class":591},[586,8085,609],{"class":591},[586,8087,5894],{"class":612},[586,8089,609],{"class":591},[586,8091,1731],{"class":591},[586,8093,8094,8096,8098],{"class":588,"line":5002},[586,8095,5869],{"class":591},[586,8097,2845],{"class":595},[586,8099,1731],{"class":591},[586,8101,8102,8104,8106],{"class":588,"line":5003},[586,8103,5913],{"class":591},[586,8105,1788],{"class":595},[586,8107,618],{"class":591},[586,8109,8110,8112,8114],{"class":588,"line":5004},[586,8111,1867],{"class":591},[586,8113,5925],{"class":595},[586,8115,618],{"class":591},[586,8117,8118],{"class":588,"line":5005},[586,8119,654],{"emptyLinePlaceholder":520},[586,8121,8122,8124],{"class":588,"line":5006},[586,8123,736],{"class":591},[586,8125,4052],{"class":595},[586,8127,8128],{"class":588,"line":5007},[586,8129,4058],{"class":599},[586,8131,8132],{"class":588,"line":5008},[586,8133,4064],{"class":599},[586,8135,8136,8138,8140,8142,8144],{"class":588,"line":5009},[586,8137,5955],{"class":599},[586,8139,606],{"class":591},[586,8141,609],{"class":591},[586,8143,4970],{"class":612},[586,8145,755],{"class":591},[586,8147,8148,8150,8152,8154,8156,8158,8160,8162,8164,8166,8168,8170],{"class":588,"line":5010},[586,8149,776],{"class":591},[586,8151,1702],{"class":599},[586,8153,606],{"class":591},[586,8155,609],{"class":591},[586,8157,1709],{"class":591},[586,8159,1139],{"class":1712},[586,8161,1715],{"class":591},[586,8163,5983],{"class":1712},[586,8165,5986],{"class":591},[586,8167,1718],{"class":1712},[586,8169,1726],{"class":591},[586,8171,755],{"class":591},[586,8173,8175,8177,8179,8181,8183,8186],{"class":8174,"line":6084},[588,622],[586,8176,776],{"class":591},[586,8178,4116],{"class":599},[586,8180,606],{"class":591},[586,8182,609],{"class":591},[586,8184,8185],{"class":1712},"1.15",[586,8187,755],{"class":591},[586,8189,8191,8193,8195,8197,8199,8201,8203,8205,8207,8209],{"class":8190,"line":5011},[588,622],[586,8192,776],{"class":591},[586,8194,6000],{"class":599},[586,8196,606],{"class":591},[586,8198,609],{"class":591},[586,8200,1709],{"class":591},[586,8202,6009],{"class":1712},[586,8204,1715],{"class":591},[586,8206,1139],{"class":1712},[586,8208,1726],{"class":591},[586,8210,755],{"class":591},[586,8212,8214],{"class":8213,"line":5012},[588,622],[586,8215,4142],{"class":591},[586,8217,8219,8221,8224,8227,8229,8231,8234,8236],{"class":8218,"line":5013},[588,622],[586,8220,1795],{"class":591},[586,8222,8223],{"class":595},"Transition",[586,8225,8226],{"class":599}," name",[586,8228,606],{"class":591},[586,8230,609],{"class":591},[586,8232,8233],{"class":612},"transition-basic",[586,8235,609],{"class":591},[586,8237,618],{"class":591},[586,8239,8241,8243],{"class":8240,"line":5014},[588,622],[586,8242,5869],{"class":591},[586,8244,8245],{"class":595},"h1\n",[586,8247,8249,8252,8254,8256,8259],{"class":8248,"line":5015},[588,622],[586,8250,8251],{"class":599}," v-if",[586,8253,606],{"class":591},[586,8255,609],{"class":591},[586,8257,8258],{"class":612},"showTransition",[586,8260,755],{"class":591},[586,8262,8264,8267,8269,8271,8274],{"class":8263,"line":5016},[588,622],[586,8265,8266],{"class":599}," :style",[586,8268,606],{"class":591},[586,8270,609],{"class":591},[586,8272,8273],{"class":612},"{ backgroundColor: bgColor }",[586,8275,755],{"class":591},[586,8277,8279,8282,8284,8286,8289],{"class":8278,"line":5017},[588,622],[586,8280,8281],{"class":599}," class",[586,8283,606],{"class":591},[586,8285,609],{"class":591},[586,8287,8288],{"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,8290,755],{"class":591},[586,8292,8294,8297,8299,8301,8304],{"class":8293,"line":5018},[588,622],[586,8295,8296],{"class":599}," @click",[586,8298,606],{"class":591},[586,8300,609],{"class":591},[586,8302,8303],{"class":612},"updateBackgroundColor",[586,8305,755],{"class":591},[586,8307,8309],{"class":8308,"line":5019},[588,622],[586,8310,8311],{"class":591}," >\n",[586,8313,8315,8318,8320,8322,8325,8327,8329,8332,8334],{"class":8314,"line":5020},[588,622],[586,8316,8317],{"class":591}," \u003C",[586,8319,2896],{"class":595},[586,8321,2241],{"class":591},[586,8323,8324],{"class":632},"TRANSITION + ",[586,8326,689],{"class":591},[586,8328,2896],{"class":595},[586,8330,8331],{"class":591},">\u003C",[586,8333,932],{"class":595},[586,8335,1731],{"class":591},[586,8337,8339,8341,8343,8345,8348,8350,8352],{"class":8338,"line":5021},[588,622],[586,8340,8317],{"class":591},[586,8342,4765],{"class":595},[586,8344,2241],{"class":591},[586,8346,8347],{"class":632},"occlude=blending 💛",[586,8349,689],{"class":591},[586,8351,4765],{"class":595},[586,8353,618],{"class":591},[586,8355,8357,8360,8362],{"class":8356,"line":6258},[588,622],[586,8358,8359],{"class":591}," \u003C\u002F",[586,8361,4149],{"class":595},[586,8363,618],{"class":591},[586,8365,8367,8369,8371],{"class":8366,"line":5022},[588,622],[586,8368,5913],{"class":591},[586,8370,8223],{"class":595},[586,8372,618],{"class":591},[586,8374,8376,8378,8380],{"class":8375,"line":5023},[588,622],[586,8377,1867],{"class":591},[586,8379,4178],{"class":595},[586,8381,618],{"class":591},[586,8383,8385],{"class":8384,"line":5024},[588,622],[586,8386,654],{"emptyLinePlaceholder":520},[586,8388,8390,8392,8394,8396,8398,8400,8402,8404,8406,8408],{"class":8389,"line":5025},[588,622],[586,8391,736],{"class":591},[586,8393,2523],{"class":595},[586,8395,1699],{"class":591},[586,8397,6749],{"class":599},[586,8399,606],{"class":591},[586,8401,609],{"class":591},[586,8403,6756],{"class":591},[586,8405,5464],{"class":1712},[586,8407,609],{"class":591},[586,8409,1731],{"class":591},[586,8411,8413,8415,8417,8419,8421,8423,8425,8427,8429],{"class":8412,"line":5026},[588,622],[586,8414,736],{"class":591},[586,8416,1891],{"class":595},[586,8418,1699],{"class":591},[586,8420,1896],{"class":599},[586,8422,606],{"class":591},[586,8424,609],{"class":591},[586,8426,1812],{"class":1712},[586,8428,609],{"class":591},[586,8430,1731],{"class":591},[586,8432,8434,8436,8438],{"class":8433,"line":5027},[588,622],[586,8435,800],{"class":591},[586,8437,717],{"class":595},[586,8439,618],{"class":591},[586,8441,8443,8445,8447],{"class":8442,"line":5028},[588,622],[586,8444,810],{"class":591},[586,8446,5584],{"class":595},[586,8448,618],{"class":591},[586,8450,8451,8453,8455],{"class":588,"line":5029},[586,8452,689],{"class":591},[586,8454,706],{"class":595},[586,8456,618],{"class":591},[586,8458,8459],{"class":588,"line":5030},[586,8460,654],{"emptyLinePlaceholder":520},[586,8462,8463,8465,8467,8469],{"class":588,"line":5031},[586,8464,592],{"class":591},[586,8466,1560],{"class":595},[586,8468,4229],{"class":599},[586,8470,618],{"class":591},[586,8472,8473,8475,8477],{"class":588,"line":5032},[586,8474,835],{"class":591},[586,8476,6834],{"class":2232},[586,8478,2322],{"class":591},[586,8480,8481,8483,8485,8487],{"class":588,"line":6400},[586,8482,3103],{"class":4244},[586,8484,2313],{"class":591},[586,8486,6846],{"class":1712},[586,8488,4256],{"class":591},[586,8490,8491,8493,8495,8497],{"class":588,"line":5033},[586,8492,3116],{"class":4244},[586,8494,2313],{"class":591},[586,8496,6846],{"class":1712},[586,8498,4256],{"class":591},[586,8500,8501,8503,8505,8507],{"class":588,"line":5034},[586,8502,6865],{"class":4244},[586,8504,2313],{"class":591},[586,8506,6870],{"class":632},[586,8508,4256],{"class":591},[586,8510,8511,8513,8515,8517],{"class":588,"line":5035},[586,8512,6878],{"class":4244},[586,8514,2313],{"class":591},[586,8516,6883],{"class":632},[586,8518,4256],{"class":591},[586,8520,8521,8523,8525,8527,8529],{"class":588,"line":5036},[586,8522,4245],{"class":4244},[586,8524,2313],{"class":591},[586,8526,4250],{"class":591},[586,8528,6897],{"class":632},[586,8530,4256],{"class":591},[586,8532,8533],{"class":588,"line":5037},[586,8534,2414],{"class":591},[586,8536,8537],{"class":588,"line":5038},[586,8538,654],{"emptyLinePlaceholder":520},[586,8540,8541,8543,8546,8548,8551],{"class":588,"line":5039},[586,8542,835],{"class":591},[586,8544,8545],{"class":2232},"html-demo-transition-heading",[586,8547,2313],{"class":591},[586,8549,8550],{"class":599},"hover",[586,8552,2322],{"class":591},[586,8554,8555,8558,8560,8563,8565,8568],{"class":588,"line":5040},[586,8556,8557],{"class":4244}," transform",[586,8559,2313],{"class":591},[586,8561,8562],{"class":668}," scale",[586,8564,672],{"class":591},[586,8566,8567],{"class":1712},"1.05",[586,8569,8570],{"class":591},");\n",[586,8572,8573],{"class":588,"line":5041},[586,8574,2414],{"class":591},[586,8576,8577],{"class":588,"line":5042},[586,8578,654],{"emptyLinePlaceholder":520},[586,8580,8581,8583,8586],{"class":588,"line":5043},[586,8582,835],{"class":591},[586,8584,8585],{"class":2232},"transition-basic-enter-from",[586,8587,3097],{"class":591},[586,8589,8590,8592,8595],{"class":588,"line":6551},[586,8591,835],{"class":591},[586,8593,8594],{"class":2232},"transition-basic-leave-to",[586,8596,2322],{"class":591},[586,8598,8599,8601,8603,8605],{"class":588,"line":6575},[586,8600,5532],{"class":4244},[586,8602,2313],{"class":591},[586,8604,7262],{"class":1712},[586,8606,4256],{"class":591},[586,8608,8609,8611,8613,8616,8618,8621],{"class":588,"line":6596},[586,8610,8557],{"class":4244},[586,8612,2313],{"class":591},[586,8614,8615],{"class":668}," translateY",[586,8617,672],{"class":591},[586,8619,8620],{"class":1712},"-20px",[586,8622,8570],{"class":591},[586,8624,8625],{"class":588,"line":6605},[586,8626,2414],{"class":591},[586,8628,8629],{"class":588,"line":6614},[586,8630,654],{"emptyLinePlaceholder":520},[586,8632,8633,8635,8638],{"class":588,"line":6619},[586,8634,835],{"class":591},[586,8636,8637],{"class":2232},"transition-basic-enter-active",[586,8639,3097],{"class":591},[586,8641,8642,8644,8647],{"class":588,"line":6627},[586,8643,835],{"class":591},[586,8645,8646],{"class":2232},"transition-basic-leave-active",[586,8648,2322],{"class":591},[586,8650,8651,8654,8656,8659,8662,8665],{"class":588,"line":6645},[586,8652,8653],{"class":4244}," transition",[586,8655,2313],{"class":591},[586,8657,8658],{"class":632}," all ",[586,8660,8661],{"class":1712},"0.5s",[586,8663,8664],{"class":632}," ease",[586,8666,4256],{"class":591},[586,8668,8669],{"class":588,"line":6665},[586,8670,2414],{"class":591},[586,8672,8673],{"class":588,"line":6682},[586,8674,654],{"emptyLinePlaceholder":520},[586,8676,8677,8679,8682],{"class":588,"line":6709},[586,8678,835],{"class":591},[586,8680,8681],{"class":2232},"transition-basic-enter-to",[586,8683,3097],{"class":591},[586,8685,8686,8688,8691],{"class":588,"line":6724},[586,8687,835],{"class":591},[586,8689,8690],{"class":2232},"transition-basic-leave-from",[586,8692,2322],{"class":591},[586,8694,8695,8697,8699,8701],{"class":588,"line":6730},[586,8696,5532],{"class":4244},[586,8698,2313],{"class":591},[586,8700,3143],{"class":1712},[586,8702,4256],{"class":591},[586,8704,8705,8707,8709,8711,8713,8715],{"class":588,"line":6735},[586,8706,8557],{"class":4244},[586,8708,2313],{"class":591},[586,8710,8615],{"class":668},[586,8712,672],{"class":591},[586,8714,1139],{"class":1712},[586,8716,8570],{"class":591},[586,8718,8719],{"class":588,"line":6740},[586,8720,2414],{"class":591},[586,8722,8723,8725,8727],{"class":588,"line":6765},[586,8724,689],{"class":591},[586,8726,1560],{"class":595},[586,8728,618],{"class":591},[913,8730,7081,8732],{"id":8731},"using-iframes",[542,8733,8734],{},"iframes",[504,8736,8737,8738,8740],{},"You can achieve pretty cool results with the ",[542,8739,4178],{}," 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.",[2081,8742,8743],{},[8744,8745],"objects-html-iframe-demo",{},[4365,8747,4367,8748,8750],{},[4369,8749,4371],{},[572,8751,8753],{"className":4374,"code":8752,"language":4376,"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:\u002F\u002Ftresjs.org\" frameborder=\"0\" :width=\"700\" :height=\"500\">\u003C\u002Fiframe>\n\u003C\u002Fhtml>\n",[542,8754,8755,8761,8766,8771,8784,8797,8810,8823,8836,8850,8864,8868,8939],{"__ignoreMap":512},[586,8756,8757,8759],{"class":588,"line":513},[586,8758,592],{"class":591},[586,8760,4826],{"class":595},[586,8762,8763],{"class":588,"line":514},[586,8764,8765],{"class":599}," transform\n",[586,8767,8768],{"class":588,"line":651},[586,8769,8770],{"class":599}," center\n",[586,8772,8773,8776,8778,8780,8782],{"class":588,"line":657},[586,8774,8775],{"class":599}," :cast-shadow",[586,8777,606],{"class":591},[586,8779,609],{"class":591},[586,8781,1115],{"class":612},[586,8783,755],{"class":591},[586,8785,8786,8789,8791,8793,8795],{"class":588,"line":686},[586,8787,8788],{"class":599}," :receive-shadow",[586,8790,606],{"class":591},[586,8792,609],{"class":591},[586,8794,1115],{"class":612},[586,8796,755],{"class":591},[586,8798,8799,8802,8804,8806,8808],{"class":588,"line":696},[586,8800,8801],{"class":599}," occlude",[586,8803,606],{"class":591},[586,8805,609],{"class":591},[586,8807,4970],{"class":612},[586,8809,755],{"class":591},[586,8811,8812,8815,8817,8819,8821],{"class":588,"line":701},[586,8813,8814],{"class":599}," :z-index-range",[586,8816,606],{"class":591},[586,8818,609],{"class":591},[586,8820,4460],{"class":612},[586,8822,755],{"class":591},[586,8824,8825,8828,8830,8832,8834],{"class":588,"line":711},[586,8826,8827],{"class":599}," :position-y",[586,8829,606],{"class":591},[586,8831,609],{"class":591},[586,8833,6492],{"class":612},[586,8835,755],{"class":591},[586,8837,8838,8841,8843,8845,8848],{"class":588,"line":722},[586,8839,8840],{"class":599}," :portal",[586,8842,606],{"class":591},[586,8844,609],{"class":591},[586,8846,8847],{"class":612},"portalRef",[586,8849,755],{"class":591},[586,8851,8852,8855,8857,8859,8862],{"class":588,"line":577},[586,8853,8854],{"class":599}," :style",[586,8856,606],{"class":591},[586,8858,609],{"class":591},[586,8860,8861],{"class":612},"{ userSelect: 'none' }",[586,8863,755],{"class":591},[586,8865,8866],{"class":588,"line":578},[586,8867,618],{"class":591},[586,8869,8870,8872,8875,8877,8879,8881,8884,8886,8889,8891,8893,8896,8898,8901,8903,8905,8907,8909,8912,8914,8916,8919,8921,8924,8926,8928,8931,8933,8935,8937],{"class":588,"line":579},[586,8871,714],{"class":591},[586,8873,8874],{"class":595},"iframe",[586,8876,2971],{"class":599},[586,8878,606],{"class":591},[586,8880,609],{"class":591},[586,8882,8883],{"class":612},"w-[700px] h-[500px]",[586,8885,609],{"class":591},[586,8887,8888],{"class":599}," src",[586,8890,606],{"class":591},[586,8892,609],{"class":591},[586,8894,8895],{"class":612},"https:\u002F\u002Ftresjs.org",[586,8897,609],{"class":591},[586,8899,8900],{"class":599}," frameborder",[586,8902,606],{"class":591},[586,8904,609],{"class":591},[586,8906,1139],{"class":612},[586,8908,609],{"class":591},[586,8910,8911],{"class":599}," :width",[586,8913,606],{"class":591},[586,8915,609],{"class":591},[586,8917,8918],{"class":612},"700",[586,8920,609],{"class":591},[586,8922,8923],{"class":599}," :height",[586,8925,606],{"class":591},[586,8927,609],{"class":591},[586,8929,8930],{"class":612},"500",[586,8932,609],{"class":591},[586,8934,6424],{"class":591},[586,8936,8874],{"class":595},[586,8938,618],{"class":591},[586,8940,8941,8943,8945],{"class":588,"line":580},[586,8942,689],{"class":591},[586,8944,4376],{"class":595},[586,8946,618],{"class":591},[8948,8949,8950],"info",{},[504,8951,8952,8953,8956,8957,8960,8961],{},"The demos use ",[542,8954,8955],{},":z-index-range=\"[28, 0]\""," simply to ensure the HTML elements stay below the documentation header (which uses ",[542,8958,8959],{},"z-index: 30",").\n",[2896,8962,8963],{},"This value is for the docs only — you can ignore it or adjust it as needed.",[568,8965,947],{"id":946},[949,8967,8968,8978],{},[952,8969,8970],{},[955,8971,8972,8974,8976],{},[958,8973,1971],{},[958,8975,964],{},[958,8977,967],{},[969,8979,8980,8998,9013,9031,9057,9077,9094,9112,9124,9143,9166,9206,9243,9263,9296],{},[955,8981,8982,8987,8993],{},[974,8983,8984],{},[2896,8985,8986],{},"as",[974,8988,8989,8990,835],{},"Wrapping ",[4765,8991,8992],{},"HTML element",[974,8994,8995],{},[542,8996,8997],{},"'div'",[955,8999,9000,9005,9011],{},[974,9001,9002],{},[2896,9003,9004],{},"wrapperClass",[974,9006,1377,9007,9010],{},[542,9008,9009],{},"className"," of the wrapping element. element.",[974,9012],{},[955,9014,9015,9020,9027],{},[974,9016,9017],{},[2896,9018,9019],{},"prepend",[974,9021,9022,9023,9026],{},"Projects content ",[4765,9024,9025],{},"behind"," the canvas.",[974,9028,9029],{},[542,9030,1154],{},[955,9032,9033,9037,9053],{},[974,9034,9035],{},[2896,9036,1220],{},[974,9038,9039,9040,7075,9043,9045,9046],{},"Adds a ",[542,9041,9042],{},"transform: translate(-50%, -50%)",[932,9044],{},"➡️ ",[4765,9047,9048,9049,9052],{},"Ignored in ",[2896,9050,9051],{},"transform"," mode.",[974,9054,9055],{},[542,9056,1154],{},[955,9058,9059,9064,9073],{},[974,9060,9061],{},[2896,9062,9063],{},"fullscreen",[974,9065,9066,9067,9045,9069],{},"Aligns to the upper-left corner and fills the screen. ",[932,9068],{},[4765,9070,9048,9071,9052],{},[2896,9072,9051],{},[974,9074,9075],{},[542,9076,1154],{},[955,9078,9079,9084,9092],{},[974,9080,9081],{},[2896,9082,9083],{},"distanceFactor",[974,9085,9086,9087,9089,9090,835],{},"Children are scaled by this factor and also by distance to a ",[542,9088,3833],{},", or zoom when using an ",[542,9091,3836],{},[974,9093],{},[955,9095,9096,9101,9107],{},[974,9097,9098],{},[2896,9099,9100],{},"zIndexRange",[974,9102,9103,9104,835],{},"Defines the ",[4765,9105,9106],{},"Z-order range",[974,9108,9109],{},[542,9110,9111],{},"[16777271, 0]",[955,9113,9114,9119,9122],{},[974,9115,9116],{},[2896,9117,9118],{},"portal",[974,9120,9121],{},"Reference to a target container (for rendering into a different DOM node). container.",[974,9123],{},[955,9125,9126,9130,9139],{},[974,9127,9128],{},[2896,9129,9051],{},[974,9131,999,9132,9134,9135,9138],{},[542,9133,1115],{},", applies ",[542,9136,9137],{},"matrix3d"," transformations — the element appears as if it is inside the 3D scene.",[974,9140,9141],{},[542,9142,1154],{},[955,9144,9145,9150,9162],{},[974,9146,9147],{},[2896,9148,9149],{},"sprite",[974,9151,9152,9153,7075,9155,9045,9157],{},"Renders as a ",[4765,9154,9149],{},[932,9156],{},[4765,9158,9159,9160,9052],{},"Only in ",[2896,9161,9051],{},[974,9163,9164],{},[542,9165,1154],{},[955,9167,9168,9173,9197],{},[974,9169,9170],{},[2896,9171,9172],{},"calculatePosition",[974,9174,9175,9176,9178,937,9181,937,9184,9186,9187,9190,9191,9045,9193],{},"Callback function to override the default positioning logic. ",[932,9177],{},[2896,9179,9180],{},"Type:",[542,9182,9183],{},"(object: Object3D, camera: Camera, size: { width: number; height: number }) => [number, number, number]",[932,9185],{},"Receives the related 3D object, the active camera, and the current viewport size, and must return ",[542,9188,9189],{},"[x, y, z]"," pixel coordinates for placing the HTML element. ",[932,9192],{},[4765,9194,9048,9195,9052],{},[2896,9196,9051],{},[974,9198,9199],{},[547,9200,9203,9204],{"href":9201,"rel":9202},"https:\u002F\u002Fgithub.com\u002FTresjs\u002Fcientos\u002Fblob\u002Fmain\u002Fsrc\u002Fcore\u002Fmisc\u002Fhtml\u002Futils.ts#L9-L19",[551],"Default ",[542,9205,9172],{},[955,9207,9208,9212,9241],{},[974,9209,9210],{},[2896,9211,4328],{},[974,9213,9214,9215,9217,9218,9220,9221,9224,9225,5832,9227,9230,9231,9217,9233,9236,9237,9240],{},"Enables occlusion. Possible values: ",[932,9216],{},"- ",[542,9219,1115],{}," → Occlusion against ",[4765,9222,9223],{},"all"," scene objects ",[932,9226],{},[542,9228,9229],{},"Ref\u003CTresObject3D>[]"," → Occlusion is enabled only against the specified objects. ",[932,9232],{},[542,9234,9235],{},"'blending'"," → Uses a ",[4765,9238,9239],{},"blending-based"," occlusion method (CSS-like depth blending).",[974,9242],{},[955,9244,9245,9249,9255],{},[974,9246,9247],{},[2896,9248,5688],{},[974,9250,9251,9252,9254],{},"Custom ",[542,9253,5688],{}," to be used.",[974,9256,9257],{},[547,9258,9261],{"href":9259,"rel":9260},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F?q=geometry#api\u002Fen\u002Fgeometries\u002FPlaneGeometry",[551],[542,9262,6931],{},[955,9264,9265,9269,9294],{},[974,9266,9267],{},[2896,9268,6359],{},[974,9270,9271,937,9277,937,9279,9285,9286,937,9288],{},[2896,9272,9273,9274,9276],{},"Custom shader ",[4765,9275,6359],{}," used for the occlusion mesh.",[932,9278],{},[2896,9280,9281,9282,9284],{},"Only applies when ",[542,9283,6923],{}," is enabled"," (an occlusion mesh is created). ",[932,9287],{},[4765,9289,9290,9291,9293],{},"Ignored in raycast occlusion modes (",[542,9292,1115],{},", object refs).",[974,9295],{},[955,9297,9298,9303,9325],{},[974,9299,9300],{},[2896,9301,9302],{},"transparentMaterial",[974,9304,9305,937,9312,937,9314,937,9319,937,9321],{},[2896,9306,9307,9308,9311],{},"Enables ",[4765,9309,9310],{},"transparent"," rendering for the occlusion material.",[932,9313],{},[2896,9315,9281,9316,9318],{},[542,9317,6923],{}," creates an occlusion mesh.",[932,9320],{},[4765,9322,9290,9323,9293],{},[542,9324,1115],{},[974,9326,9327],{},[542,9328,1154],{},[568,9330,1301],{"id":1300},[949,9332,9333,9341],{},[952,9334,9335],{},[955,9336,9337,9339],{},[958,9338,1310],{},[958,9340,964],{},[969,9342,9343],{},[955,9344,9345,9348],{},[974,9346,9347],{},"onOcclude",[974,9349,9350],{},"Called when the occlusion state changes.",[568,9352,9354],{"id":9353},"exposed-properties","Exposed properties",[949,9356,9357,9369],{},[952,9358,9359],{},[955,9360,9361,9364,9367],{},[958,9362,9363],{},"Property",[958,9365,9366],{},"Type",[958,9368,964],{},[969,9370,9371,9393,9414],{},[955,9372,9373,9377,9382],{},[974,9374,9375],{},[2896,9376,2713],{},[974,9378,9379],{},[542,9380,9381],{},"Ref\u003CTresObject3D | null>",[974,9383,9384,9385,9390,9391,835],{},"Reference to the root ",[2896,9386,9387],{},[542,9388,9389],{},"\u003CTresGroup>"," used by ",[542,9392,3840],{},[955,9394,9395,9400,9405],{},[974,9396,9397],{},[2896,9398,9399],{},"isVisible",[974,9401,9402],{},[542,9403,9404],{},"Ref\u003Cboolean>",[974,9406,9407,9408,7069,9411,835],{},"Reactive value that indicates whether the HTML content is ",[2896,9409,9410],{},"currently visible",[2896,9412,9413],{},"occluded",[955,9415,9416,9421,9425],{},[974,9417,9418],{},[2896,9419,9420],{},"occlusionMesh",[974,9422,9423],{},[542,9424,9381],{},[974,9426,9427,9428,9431,9432,7033,9434,9436],{},"Reference to the ",[2896,9429,9430],{},"occlusion mesh"," created when ",[542,9433,6923],{},[2896,9435,7036],{},". Used internally for geometry-based occlusion.",[568,9438,9440],{"id":9439},"caveats","Caveats",[558,9442,9443,9476,9493,9552,9570],{},[561,9444,9445,9446,9451,9452,9454,9455,7069,9458,9461,9462,9464,9465,9468,9469,9472,9473,9475],{},"✨ When using ",[2896,9447,9448],{},[542,9449,9450],{},"\u003CHtml occlude>",", if the ",[542,9453,3840],{}," component is ",[2896,9456,9457],{},"overlapping",[2896,9459,9460],{},"inside a 3D object",", it will be considered ",[2896,9463,9413],{}," and therefore ",[2896,9466,9467],{},"hidden",". To avoid this, ",[2896,9470,9471],{},"adjust the position"," of the ",[542,9474,3840],{}," component in your scene.",[561,9477,9478,9479,9484,9485,9488,9489,9492],{},"🎨 When using ",[2896,9480,9481],{},[542,9482,9483],{},"\u003CHtml occlude=\"blending\">",", the HTML content is no longer ",[2896,9486,9487],{},"selectable"," because it is rendered ",[2896,9490,9491],{},"behind the canvas",". This is required to achieve the blending effect.",[561,9494,9495,9496,9498,9499,9501,9502],{},"⚙️ When using a ",[2896,9497,7021],{}," with occlusion in ",[542,9500,4970],{}," mode, there are a few important requirements to ensure the HTML content renders correctly ⬇️",[4365,9503,4367,9504,9507],{},[4369,9505,9506],{},"See more information",[9508,9509,9510,9522,9530,9537],"ol",{},[561,9511,9512,9513,2330,9515,9518,9519,835],{},"If you provide your own material, it must be ",[2896,9514,9310],{},[542,9516,9517],{},"transparent: true",") with an ",[2896,9520,9521],{},"opacity \u003C 1",[561,9523,9524,9525,9529],{},"If you are not providing a custom material, enable ",[2896,9526,9527],{},[542,9528,9302],{}," so the internal shader becomes transparent.",[561,9531,9532,9533,9536],{},"The occlusion mesh requires a ",[2896,9534,9535],{},"fully transparent canvas background","; otherwise, thin borders or halo artifacts may appear.",[561,9538,9539,9540,9543,9544,1715,9546,9549,9550,835],{},"To compensate for the transparent canvas, you may ",[2896,9541,9542],{},"reapply your previous clear-color as a CSS background"," on the ",[542,9545,4376],{},[542,9547,9548],{},"body",", or a wrapper ",[542,9551,5584],{},[561,9553,9554,9555,9559,9560,9562,9563,9565,9566,9569],{},"🔶 When using ",[2896,9556,9557],{},[542,9558,9302],{},", overlapping ",[542,9561,3840],{}," elements (especially multiple ",[542,9564,6923],{}," instances) may cause ",[2896,9567,9568],{},"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,9571,9572,9573,9575,9576,9579,9580],{},"🔵 To avoid thin border artifacts when using ",[542,9574,6923],{},", make sure your ",[542,9577,9578],{},"\u003CTresCanvas>"," is fully transparent:",[572,9581,9583],{"className":574,"code":9582,"language":582,"meta":512,"style":512},"\u003CTresCanvas :alpha=\"true\" :clearAlpha=\"0\" \u002F>\n",[542,9584,9585],{"__ignoreMap":512},[586,9586,9587,9589,9591,9593,9596,9598,9600,9602,9604,9606,9609,9611,9613,9615,9617],{"class":588,"line":513},[586,9588,592],{"class":591},[586,9590,717],{"class":595},[586,9592,1699],{"class":591},[586,9594,9595],{"class":599},"alpha",[586,9597,606],{"class":591},[586,9599,609],{"class":591},[586,9601,1115],{"class":2585},[586,9603,609],{"class":591},[586,9605,1699],{"class":591},[586,9607,9608],{"class":599},"clearAlpha",[586,9610,606],{"class":591},[586,9612,609],{"class":591},[586,9614,1139],{"class":1712},[586,9616,609],{"class":591},[586,9618,1731],{"class":591},[949,9620,9621,9631],{},[952,9622,9623],{},[955,9624,9625,9627,9629],{},[958,9626,1971],{},[958,9628,964],{},[958,9630,967],{},[969,9632,9633,9646,9657,9670,9686,9701,9712,9725,9736,9749,9762,9775,9797,9812],{},[955,9634,9635,9639,9642],{},[974,9636,9637],{},[2896,9638,8986],{},[974,9640,9641],{},"Wrapping html element.",[974,9643,9644],{},[542,9645,8997],{},[955,9647,9648,9652,9655],{},[974,9649,9650],{},[2896,9651,9004],{},[974,9653,9654],{},"The className of the wrapping element.",[974,9656],{},[955,9658,9659,9663,9666],{},[974,9660,9661],{},[2896,9662,9019],{},[974,9664,9665],{},"Project content behind the canvas.",[974,9667,9668],{},[542,9669,1154],{},[955,9671,9672,9676,9682],{},[974,9673,9674],{},[2896,9675,1220],{},[974,9677,9678,9679],{},"Adds a -50%\u002F-50% CSS transform. ",[586,9680,9681],{},"Ignored in transform mode",[974,9683,9684],{},[542,9685,1154],{},[955,9687,9688,9692,9697],{},[974,9689,9690],{},[2896,9691,9063],{},[974,9693,9694,9695],{},"Aligns to the upper-left corner, fills the screen. ",[586,9696,9681],{},[974,9698,9699],{},[542,9700,1154],{},[955,9702,9703,9707,9710],{},[974,9704,9705],{},[2896,9706,9083],{},[974,9708,9709],{},"Children will be scaled by this factor, and also by distance to a PerspectiveCamera \u002F zoom by an OrthographicCamera.",[974,9711],{},[955,9713,9714,9718,9721],{},[974,9715,9716],{},[2896,9717,9100],{},[974,9719,9720],{},"Z-order range.",[974,9722,9723],{},[542,9724,9111],{},[955,9726,9727,9731,9734],{},[974,9728,9729],{},[2896,9730,9118],{},[974,9732,9733],{},"Reference to target container.",[974,9735],{},[955,9737,9738,9742,9745],{},[974,9739,9740],{},[2896,9741,9051],{},[974,9743,9744],{},"If true, applies matrix3d transformations.",[974,9746,9747],{},[542,9748,1154],{},[955,9750,9751,9755,9758],{},[974,9752,9753],{},[2896,9754,9149],{},[974,9756,9757],{},"Renders as sprite, but only in transform mode.",[974,9759,9760],{},[542,9761,1154],{},[955,9763,9764,9768,9773],{},[974,9765,9766],{},[2896,9767,9172],{},[974,9769,9770,9771],{},"Override default positioning function. ",[586,9772,9681],{},[974,9774],{},[955,9776,9777,9781,9795],{},[974,9778,9779],{},[2896,9780,4328],{},[974,9782,9783,9784,1715,9786,1715,9788,9791,9792,9794],{},"Can be ",[542,9785,1115],{},[542,9787,9229],{},[542,9789,9790],{},"'raycast'",", or ",[542,9793,9235],{},". True occludes the entire scene.",[974,9796],{},[955,9798,9799,9803,9808],{},[974,9800,9801],{},[2896,9802,5688],{},[974,9804,9251,9805,9807],{},[542,9806,5688],{}," to be use",[974,9809,9810],{},[542,9811,6931],{},[955,9813,9814,9818,9822],{},[974,9815,9816],{},[2896,9817,6359],{},[974,9819,9273,9820,9807],{},[542,9821,6359],{},[974,9823],{},[568,9825,1301],{"id":9826},"events-1",[949,9828,9829,9837],{},[952,9830,9831],{},[955,9832,9833,9835],{},[958,9834,1310],{},[958,9836,964],{},[969,9838,9839],{},[955,9840,9841,9843],{},[974,9842,9347],{},[974,9844,9350],{},[1560,9846,9847],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":512,"searchDepth":513,"depth":514,"links":9849},[9850,9851,9856,9859,9864,9865,9866,9867,9868],{"id":570,"depth":514,"text":15},{"id":4321,"depth":514,"text":4322,"children":9852},[9853,9854,9855],{"id":4517,"depth":651,"text":4518},{"id":4680,"depth":651,"text":4681},{"id":4944,"depth":651,"text":4945},{"id":6916,"depth":514,"text":6917,"children":9857},[9858],{"id":7006,"depth":651,"text":7007},{"id":7080,"depth":514,"text":9860,"children":9861},"Using \u003CTransition>",[9862],{"id":8731,"depth":651,"text":9863},"Using iframes",{"id":946,"depth":514,"text":947},{"id":1300,"depth":514,"text":1301},{"id":9353,"depth":514,"text":9354},{"id":9439,"depth":514,"text":9440},{"id":9826,"depth":514,"text":1301},"Allows you put DOM elements in your Tres.js scene.",{},{"title":441,"description":9869},"bmQxq5ycvwwoOaNRdE5rmWFB-PGm7ptZpQsjJyfxYsw",{"id":9874,"title":445,"body":9875,"description":10508,"extension":517,"links":518,"meta":10509,"navigation":520,"path":446,"seo":10510,"stem":447,"__hash__":10511},"docs\u002F2.api\u002F9.objects\u002Fimage.md",{"type":501,"value":9876,"toc":10503},[9877,9882,9888,9890,10084,10086,10093,10308,10310,10333,10500],[534,9878,9879],{},[9880,9881],"objects-image",{},[504,9883,9884,9887],{},[542,9885,9886],{},"\u003CImage \u002F>"," is a shader-based component that optionally loads then displays an image texture on a default plane or on your custom geometry.",[568,9889,15],{"id":570},[572,9891,9894],{"className":574,"code":9892,"highlights":9893,"language":582,"meta":512,"style":512},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { Image } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 0, 5]\" \u002F>\n\n \u003CImage\n url=\"https:\u002F\u002Fupload.wikimedia.org\u002Fwikipedia\u002Fcommons\u002Ff\u002Ff0\u002FCyanistes_caeruleus_Oulu_20150516.JPG\"\n :scale=\"[2, 2]\"\n \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[651,577,578,579],[542,9895,9896,9916,9934,9954,9962,9966,9974,9982,10014,10018,10026,10041,10064,10068,10076],{"__ignoreMap":512},[586,9897,9898,9900,9902,9904,9906,9908,9910,9912,9914],{"class":588,"line":513},[586,9899,592],{"class":591},[586,9901,596],{"class":595},[586,9903,600],{"class":599},[586,9905,603],{"class":599},[586,9907,606],{"class":591},[586,9909,609],{"class":591},[586,9911,613],{"class":612},[586,9913,609],{"class":591},[586,9915,618],{"class":591},[586,9917,9918,9920,9922,9924,9926,9928,9930,9932],{"class":588,"line":514},[586,9919,626],{"class":625},[586,9921,629],{"class":591},[586,9923,2183],{"class":632},[586,9925,636],{"class":591},[586,9927,639],{"class":625},[586,9929,642],{"class":591},[586,9931,2172],{"class":612},[586,9933,648],{"class":591},[586,9935,9937,9939,9941,9944,9946,9948,9950,9952],{"class":9936,"line":651},[588,622],[586,9938,626],{"class":625},[586,9940,629],{"class":591},[586,9942,9943],{"class":632}," Image",[586,9945,636],{"class":591},[586,9947,639],{"class":625},[586,9949,642],{"class":591},[586,9951,645],{"class":612},[586,9953,648],{"class":591},[586,9955,9956,9958,9960],{"class":588,"line":657},[586,9957,689],{"class":591},[586,9959,596],{"class":595},[586,9961,618],{"class":591},[586,9963,9964],{"class":588,"line":686},[586,9965,654],{"emptyLinePlaceholder":520},[586,9967,9968,9970,9972],{"class":588,"line":696},[586,9969,592],{"class":591},[586,9971,706],{"class":595},[586,9973,618],{"class":591},[586,9975,9976,9978,9980],{"class":588,"line":701},[586,9977,714],{"class":591},[586,9979,717],{"class":595},[586,9981,618],{"class":591},[586,9983,9984,9986,9988,9990,9992,9994,9996,9998,10000,10002,10004,10006,10008,10010,10012],{"class":588,"line":711},[586,9985,725],{"class":591},[586,9987,1696],{"class":595},[586,9989,1699],{"class":591},[586,9991,1702],{"class":599},[586,9993,606],{"class":591},[586,9995,609],{"class":591},[586,9997,1709],{"class":591},[586,9999,1139],{"class":1712},[586,10001,1715],{"class":591},[586,10003,1139],{"class":1712},[586,10005,1715],{"class":591},[586,10007,1723],{"class":1712},[586,10009,1726],{"class":591},[586,10011,609],{"class":591},[586,10013,1731],{"class":591},[586,10015,10016],{"class":588,"line":722},[586,10017,654],{"emptyLinePlaceholder":520},[586,10019,10021,10023],{"class":10020,"line":577},[588,622],[586,10022,725],{"class":591},[586,10024,10025],{"class":595},"Image\n",[586,10027,10029,10032,10034,10036,10039],{"class":10028,"line":578},[588,622],[586,10030,10031],{"class":599}," url",[586,10033,606],{"class":591},[586,10035,609],{"class":591},[586,10037,10038],{"class":612},"https:\u002F\u002Fupload.wikimedia.org\u002Fwikipedia\u002Fcommons\u002Ff\u002Ff0\u002FCyanistes_caeruleus_Oulu_20150516.JPG",[586,10040,755],{"class":591},[586,10042,10044,10046,10048,10050,10052,10054,10056,10058,10060,10062],{"class":10043,"line":579},[588,622],[586,10045,2575],{"class":591},[586,10047,4116],{"class":599},[586,10049,606],{"class":591},[586,10051,609],{"class":591},[586,10053,1709],{"class":591},[586,10055,1718],{"class":1712},[586,10057,1715],{"class":591},[586,10059,1718],{"class":1712},[586,10061,1726],{"class":591},[586,10063,755],{"class":591},[586,10065,10066],{"class":588,"line":580},[586,10067,2620],{"class":591},[586,10069,10070,10072,10074],{"class":588,"line":581},[586,10071,810],{"class":591},[586,10073,717],{"class":595},[586,10075,618],{"class":591},[586,10077,10078,10080,10082],{"class":588,"line":797},[586,10079,689],{"class":591},[586,10081,706],{"class":595},[586,10083,618],{"class":591},[568,10085,947],{"id":946},[825,10087,10088],{},[504,10089,10090,10092],{},[542,10091,9886],{}," is a THREE.Mesh and most Mesh attributes can be used as props on the component.",[949,10094,10095,10105],{},[952,10096,10097],{},[955,10098,10099,10101,10103],{},[958,10100,1971],{"align":960},[958,10102,964],{"align":960},[958,10104,967],{},[969,10106,10107,10121,10137,10151,10165,10182,10196,10215,10233,10248,10265,10285,10296],{},[955,10108,10109,10114,10117],{},[974,10110,10111],{"align":960},[542,10112,10113],{},"segments",[974,10115,10116],{"align":960},"Number of divisions in the default geometry.",[974,10118,10119],{},[542,10120,1812],{},[955,10122,10123,10127,10133],{},[974,10124,10125],{"align":960},[542,10126,4116],{},[974,10128,10129,10130],{"align":960},"Scale of the geometry. ",[542,10131,10132],{},"number | [number, number]",[974,10134,10135],{},[542,10136,1812],{},[955,10138,10139,10143,10146],{},[974,10140,10141],{"align":960},[542,10142,2684],{},[974,10144,10145],{"align":960},"Color multiplied into the image texture.",[974,10147,10148],{},[542,10149,10150],{},"'white'",[955,10152,10153,10158,10161],{},[974,10154,10155],{"align":960},[542,10156,10157],{},"zoom",[974,10159,10160],{"align":960},"Shrinks or enlarges the image texture.",[974,10162,10163],{},[542,10164,1812],{},[955,10166,10167,10172,10178],{},[974,10168,10169],{"align":960},[542,10170,10171],{},"radius",[974,10173,10174,10175,10177],{"align":960},"Border radius applied to the image texture. (Intended for rectangular geometries. Use with ",[542,10176,9310],{},".)",[974,10179,10180],{},[542,10181,1139],{},[955,10183,10184,10189,10192],{},[974,10185,10186],{"align":960},[542,10187,10188],{},"grayscale",[974,10190,10191],{"align":960},"Power of grayscale effect. 0 is off. 1 is full grayscale.",[974,10193,10194],{},[542,10195,1139],{},[955,10197,10198,10203,10211],{},[974,10199,10200],{"align":960},[542,10201,10202],{},"toneMapped",[974,10204,10205,10206],{"align":960},"Whether this material is tone mapped according to the renderers toneMapping settings. ",[547,10207,10210],{"href":10208,"rel":10209},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F?q=material#api\u002Fen\u002Fmaterials\u002FMaterial.toneMapped",[551],"See THREE.material.tonemapped",[974,10212,10213],{},[542,10214,1139],{},[955,10216,10217,10221,10229],{},[974,10218,10219],{"align":960},[542,10220,9310],{},[974,10222,10223,10224],{"align":960},"Whether the image material should be transparent. ",[547,10225,10228],{"href":10226,"rel":10227},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F?q=material#api\u002Fen\u002Fmaterials\u002FMaterial.transparent",[551],"See THREE.material.transparent",[974,10230,10231],{},[542,10232,1154],{},[955,10234,10235,10239,10244],{},[974,10236,10237],{"align":960},[542,10238,9310],{},[974,10240,10223,10241],{"align":960},[547,10242,10228],{"href":10226,"rel":10243},[551],[974,10245,10246],{},[542,10247,1154],{},[955,10249,10250,10255,10261],{},[974,10251,10252],{"align":960},[542,10253,10254],{},"opacity",[974,10256,10257,10258],{"align":960},"Opacity of the image material. ",[547,10259,10228],{"href":10226,"rel":10260},[551],[974,10262,10263],{},[542,10264,1812],{},[955,10266,10267,10272,10280],{},[974,10268,10269],{"align":960},[542,10270,10271],{},"side",[974,10273,10274,10275],{"align":960},"THREE.Side of the image material. ",[547,10276,10279],{"href":10277,"rel":10278},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F?q=material#api\u002Fen\u002Fmaterials\u002FMaterial.side",[551],"See THREE.material.side",[974,10281,10282],{},[542,10283,10284],{},"FrontSide",[955,10286,10287,10291,10294],{},[974,10288,10289],{"align":960},[542,10290,2718],{},[974,10292,10293],{"align":960},"Image texture to display on the geometry.",[974,10295],{},[955,10297,10298,10303,10306],{},[974,10299,10300],{"align":960},[542,10301,10302],{},"url",[974,10304,10305],{"align":960},"Image URL to load and display on the geometry.",[974,10307],{},[568,10309,9440],{"id":9439},[504,10311,10312,10313,10315,10316,10319,10320,10322,10323,10326,10327,7069,10330,1542],{},"By default, images loaded via the ",[542,10314,10302],{}," prop use the renderer’s output color space. For advanced control, pass a ",[542,10317,10318],{},"THREE.Texture"," via the ",[542,10321,2718],{}," prop and set its ",[542,10324,10325],{},"colorSpace"," (e.g., ",[542,10328,10329],{},"THREE.SRGBColorSpace",[542,10331,10332],{},"THREE.LinearSRGBColorSpace",[572,10334,10336],{"className":574,"code":10335,"language":582,"meta":512,"style":512},"\u003Cscript setup>\nimport { useTexture } from '@tresjs\u002Fcientos'\nimport { SRGBColorSpace } from 'three'\n\nconst { state } = useTexture(URL)\nwatch(state, (texture) => {\n texture.colorSpace = SRGBColorSpace \u002F\u002F assign a custom color space\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CImage :texture=\"texture\" \u002F>\n\u003C\u002Ftemplate>\n",[542,10337,10338,10348,10367,10386,10390,10408,10429,10446,10452,10460,10464,10472,10492],{"__ignoreMap":512},[586,10339,10340,10342,10344,10346],{"class":588,"line":513},[586,10341,592],{"class":591},[586,10343,596],{"class":595},[586,10345,600],{"class":599},[586,10347,618],{"class":591},[586,10349,10350,10352,10354,10357,10359,10361,10363,10365],{"class":588,"line":514},[586,10351,626],{"class":625},[586,10353,629],{"class":591},[586,10355,10356],{"class":632}," useTexture",[586,10358,636],{"class":591},[586,10360,639],{"class":625},[586,10362,642],{"class":591},[586,10364,645],{"class":612},[586,10366,648],{"class":591},[586,10368,10369,10371,10373,10376,10378,10380,10382,10384],{"class":588,"line":651},[586,10370,626],{"class":625},[586,10372,629],{"class":591},[586,10374,10375],{"class":632}," SRGBColorSpace",[586,10377,636],{"class":591},[586,10379,639],{"class":625},[586,10381,642],{"class":591},[586,10383,5152],{"class":612},[586,10385,648],{"class":591},[586,10387,10388],{"class":588,"line":657},[586,10389,654],{"emptyLinePlaceholder":520},[586,10391,10392,10394,10396,10399,10401,10403,10405],{"class":588,"line":686},[586,10393,660],{"class":599},[586,10395,629],{"class":591},[586,10397,10398],{"class":632}," state ",[586,10400,3157],{"class":591},[586,10402,2375],{"class":591},[586,10404,10356],{"class":668},[586,10406,10407],{"class":632},"(URL)\n",[586,10409,10410,10413,10416,10418,10420,10422,10425,10427],{"class":588,"line":696},[586,10411,10412],{"class":668},"watch",[586,10414,10415],{"class":632},"(state",[586,10417,1648],{"class":591},[586,10419,2330],{"class":591},[586,10421,2718],{"class":2302},[586,10423,10424],{"class":591},")",[586,10426,7572],{"class":599},[586,10428,2322],{"class":591},[586,10430,10431,10434,10436,10438,10440,10442],{"class":588,"line":701},[586,10432,10433],{"class":632}," texture",[586,10435,835],{"class":591},[586,10437,10325],{"class":632},[586,10439,2375],{"class":591},[586,10441,10375],{"class":632},[586,10443,10445],{"class":10444},"sHwdD"," \u002F\u002F assign a custom color space\n",[586,10447,10448,10450],{"class":588,"line":711},[586,10449,3157],{"class":591},[586,10451,683],{"class":632},[586,10453,10454,10456,10458],{"class":588,"line":722},[586,10455,689],{"class":591},[586,10457,596],{"class":595},[586,10459,618],{"class":591},[586,10461,10462],{"class":588,"line":577},[586,10463,654],{"emptyLinePlaceholder":520},[586,10465,10466,10468,10470],{"class":588,"line":578},[586,10467,592],{"class":591},[586,10469,706],{"class":595},[586,10471,618],{"class":591},[586,10473,10474,10476,10478,10480,10482,10484,10486,10488,10490],{"class":588,"line":579},[586,10475,714],{"class":591},[586,10477,445],{"class":595},[586,10479,1699],{"class":591},[586,10481,2718],{"class":599},[586,10483,606],{"class":591},[586,10485,609],{"class":591},[586,10487,2718],{"class":632},[586,10489,609],{"class":591},[586,10491,1731],{"class":591},[586,10493,10494,10496,10498],{"class":588,"line":580},[586,10495,689],{"class":591},[586,10497,706],{"class":595},[586,10499,618],{"class":591},[1560,10501,10502],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":512,"searchDepth":513,"depth":514,"links":10504},[10505,10506,10507],{"id":570,"depth":514,"text":15},{"id":946,"depth":514,"text":947},{"id":9439,"depth":514,"text":9440},"Display image textures with shader-based effects.",{},{"title":445,"description":10508},"Ih3plwx33rhfQDdou67XVLUqx8Myh4kGzqeuiGa_MsE",{"id":10513,"title":449,"body":10514,"description":11364,"extension":517,"links":518,"meta":11365,"navigation":520,"path":450,"seo":11366,"stem":451,"__hash__":11367},"docs\u002F2.api\u002F9.objects\u002Fmarching-cubes.md",{"type":501,"value":10515,"toc":11358},[10516,10521,10532,10535,10560,10562,11170,11172,11242,11246,11292,11296,11355],[534,10517,10518],{},[10519,10520],"objects-marching-cubes",{},[504,10522,10523,10526,10527,835],{},[542,10524,10525],{},"\u003CMarchingCubes \u002F>"," is a wrapper around ",[547,10528,10531],{"href":10529,"rel":10530},"https:\u002F\u002Fthreejs.org\u002Fexamples\u002F#webgl_marchingcubes",[551],"THREE's Marching Cubes",[504,10533,10534],{},"It includes 3 components:",[558,10536,10537,10550,10555],{},[561,10538,10539,10541,10542,10545,10546,10549],{},[542,10540,10525],{}," – container element for ",[542,10543,10544],{},"\u003CMarchingCube \u002F>","s and ",[542,10547,10548],{},"\u003CMarchingPlane \u002F>","s",[561,10551,10552,10554],{},[542,10553,10544],{}," - an individual metaball",[561,10556,10557,10559],{},[542,10558,10548],{}," – optional bounding plane that interacts with the metaballs",[568,10561,15],{"id":570},[572,10563,10566],{"className":574,"code":10564,"highlights":10565,"language":582,"meta":512,"style":512},"\u003Cscript setup lang=\"ts\">\nimport { MarchingCube, MarchingCubes, MarchingPlane, OrbitControls } from '@tresjs\u002Fcientos'\nimport { TresCanvas } from '@tresjs\u002Fcore'\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\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#222\" :tone-mapping=\"NoToneMapping\">\n \u003CTresPerspectiveCamera \u002F>\n \u003COrbitControls \u002F>\n\n \u003CMarchingCubes :resolution=\"40\" :max-poly-count=\"40000\">\n \u003CMarchingPlane plane-type=\"y\" \u002F>\n \u003CMarchingCube\n v-for=\"position, i of positions\"\n :key=\"i\"\n :position=\"position\"\n \u002F>\n \u003CTresMeshPhongMaterial specular=\"#111111\" :shininess=\"30\" color=\"#049ef4\" :reflectivity=\"1\" \u002F>\n \u003C\u002FMarchingCubes>\n\n \u003CTresAxesHelper \u002F>\n \u003CTresDirectionalLight color=\"#ffffff\" :intensity=\"3\" :position=\"[0, 200, 0]\" \u002F>\n \u003CTresDirectionalLight color=\"#ffffff\" :intensity=\"3\" :position=\"[100, 200, 100]\" \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[514,797,807,817,1910,1945,1954,2513,2518,2102],[542,10567,10568,10588,10622,10640,10664,10668,10702,10765,10773,10777,10785,10818,10826,10834,10838,10874,10895,10903,10927,10942,10957,10962,11022,11031,11035,11044,11100,11154,11162],{"__ignoreMap":512},[586,10569,10570,10572,10574,10576,10578,10580,10582,10584,10586],{"class":588,"line":513},[586,10571,592],{"class":591},[586,10573,596],{"class":595},[586,10575,600],{"class":599},[586,10577,603],{"class":599},[586,10579,606],{"class":591},[586,10581,609],{"class":591},[586,10583,613],{"class":612},[586,10585,609],{"class":591},[586,10587,618],{"class":591},[586,10589,10591,10593,10595,10598,10600,10603,10605,10608,10610,10612,10614,10616,10618,10620],{"class":10590,"line":514},[588,622],[586,10592,626],{"class":625},[586,10594,629],{"class":591},[586,10596,10597],{"class":632}," MarchingCube",[586,10599,1648],{"class":591},[586,10601,10602],{"class":632}," MarchingCubes",[586,10604,1648],{"class":591},[586,10606,10607],{"class":632}," MarchingPlane",[586,10609,1648],{"class":591},[586,10611,1651],{"class":632},[586,10613,636],{"class":591},[586,10615,639],{"class":625},[586,10617,642],{"class":591},[586,10619,645],{"class":612},[586,10621,648],{"class":591},[586,10623,10624,10626,10628,10630,10632,10634,10636,10638],{"class":588,"line":651},[586,10625,626],{"class":625},[586,10627,629],{"class":591},[586,10629,2183],{"class":632},[586,10631,636],{"class":591},[586,10633,639],{"class":625},[586,10635,642],{"class":591},[586,10637,2172],{"class":612},[586,10639,648],{"class":591},[586,10641,10642,10644,10646,10649,10651,10654,10656,10658,10660,10662],{"class":588,"line":657},[586,10643,626],{"class":625},[586,10645,629],{"class":591},[586,10647,10648],{"class":632}," NoToneMapping",[586,10650,1648],{"class":591},[586,10652,10653],{"class":632}," Vector3",[586,10655,636],{"class":591},[586,10657,639],{"class":625},[586,10659,642],{"class":591},[586,10661,5152],{"class":612},[586,10663,648],{"class":591},[586,10665,10666],{"class":588,"line":686},[586,10667,654],{"emptyLinePlaceholder":520},[586,10669,10670,10672,10675,10677,10679,10681,10684,10686,10688,10690,10692,10695,10697,10699],{"class":588,"line":696},[586,10671,660],{"class":599},[586,10673,10674],{"class":632}," rand ",[586,10676,606],{"class":591},[586,10678,7733],{"class":591},[586,10680,7572],{"class":599},[586,10682,10683],{"class":632}," (Math",[586,10685,835],{"class":591},[586,10687,7674],{"class":668},[586,10689,7677],{"class":632},[586,10691,6756],{"class":591},[586,10693,10694],{"class":1712}," 0.5",[586,10696,2344],{"class":632},[586,10698,7680],{"class":591},[586,10700,10701],{"class":1712}," 1.25\n",[586,10703,10704,10706,10709,10711,10714,10716,10719,10721,10723,10726,10728,10731,10734,10736,10738,10741,10743,10745,10748,10751,10753,10756,10758,10760,10762],{"class":588,"line":701},[586,10705,660],{"class":599},[586,10707,10708],{"class":632}," positions ",[586,10710,606],{"class":591},[586,10712,10713],{"class":632}," Array",[586,10715,835],{"class":591},[586,10717,10718],{"class":668},"from",[586,10720,672],{"class":632},[586,10722,2347],{"class":591},[586,10724,10725],{"class":595}," length",[586,10727,2313],{"class":591},[586,10729,10730],{"class":1712}," 40",[586,10732,10733],{"class":591}," },",[586,10735,7733],{"class":591},[586,10737,7572],{"class":599},[586,10739,10740],{"class":591}," new",[586,10742,10653],{"class":668},[586,10744,672],{"class":632},[586,10746,10747],{"class":668},"rand",[586,10749,10750],{"class":632},"()",[586,10752,1648],{"class":591},[586,10754,10755],{"class":668}," rand",[586,10757,10750],{"class":632},[586,10759,1648],{"class":591},[586,10761,10755],{"class":668},[586,10763,10764],{"class":632},"()))\n",[586,10766,10767,10769,10771],{"class":588,"line":711},[586,10768,689],{"class":591},[586,10770,596],{"class":595},[586,10772,618],{"class":591},[586,10774,10775],{"class":588,"line":722},[586,10776,654],{"emptyLinePlaceholder":520},[586,10778,10779,10781,10783],{"class":588,"line":577},[586,10780,592],{"class":591},[586,10782,706],{"class":595},[586,10784,618],{"class":591},[586,10786,10787,10789,10791,10793,10795,10797,10800,10802,10804,10807,10809,10811,10814,10816],{"class":588,"line":578},[586,10788,714],{"class":591},[586,10790,717],{"class":595},[586,10792,3945],{"class":599},[586,10794,606],{"class":591},[586,10796,609],{"class":591},[586,10798,10799],{"class":612},"#222",[586,10801,609],{"class":591},[586,10803,1699],{"class":591},[586,10805,10806],{"class":599},"tone-mapping",[586,10808,606],{"class":591},[586,10810,609],{"class":591},[586,10812,10813],{"class":632},"NoToneMapping",[586,10815,609],{"class":591},[586,10817,618],{"class":591},[586,10819,10820,10822,10824],{"class":588,"line":579},[586,10821,725],{"class":591},[586,10823,1696],{"class":595},[586,10825,1731],{"class":591},[586,10827,10828,10830,10832],{"class":588,"line":580},[586,10829,725],{"class":591},[586,10831,1738],{"class":595},[586,10833,1731],{"class":591},[586,10835,10836],{"class":588,"line":581},[586,10837,654],{"emptyLinePlaceholder":520},[586,10839,10841,10843,10845,10847,10849,10851,10853,10856,10858,10860,10863,10865,10867,10870,10872],{"class":10840,"line":797},[588,622],[586,10842,725],{"class":591},[586,10844,449],{"class":595},[586,10846,1699],{"class":591},[586,10848,1756],{"class":599},[586,10850,606],{"class":591},[586,10852,609],{"class":591},[586,10854,10855],{"class":1712},"40",[586,10857,609],{"class":591},[586,10859,1699],{"class":591},[586,10861,10862],{"class":599},"max-poly-count",[586,10864,606],{"class":591},[586,10866,609],{"class":591},[586,10868,10869],{"class":1712},"40000",[586,10871,609],{"class":591},[586,10873,618],{"class":591},[586,10875,10877,10879,10882,10885,10887,10889,10891,10893],{"class":10876,"line":807},[588,622],[586,10878,736],{"class":591},[586,10880,10881],{"class":595},"MarchingPlane",[586,10883,10884],{"class":599}," plane-type",[586,10886,606],{"class":591},[586,10888,609],{"class":591},[586,10890,2400],{"class":612},[586,10892,609],{"class":591},[586,10894,1731],{"class":591},[586,10896,10898,10900],{"class":10897,"line":817},[588,622],[586,10899,736],{"class":591},[586,10901,10902],{"class":595},"MarchingCube\n",[586,10904,10906,10908,10910,10912,10914,10916,10919,10922,10925],{"class":10905,"line":1910},[588,622],[586,10907,5679],{"class":625},[586,10909,606],{"class":591},[586,10911,609],{"class":591},[586,10913,1702],{"class":632},[586,10915,1715],{"class":591},[586,10917,10918],{"class":632},"i",[586,10920,10921],{"class":591}," of ",[586,10923,10924],{"class":632},"positions",[586,10926,755],{"class":591},[586,10928,10930,10932,10934,10936,10938,10940],{"class":10929,"line":1945},[588,622],[586,10931,776],{"class":591},[586,10933,5709],{"class":599},[586,10935,606],{"class":591},[586,10937,609],{"class":591},[586,10939,10918],{"class":632},[586,10941,755],{"class":591},[586,10943,10945,10947,10949,10951,10953,10955],{"class":10944,"line":1954},[588,622],[586,10946,776],{"class":591},[586,10948,1702],{"class":599},[586,10950,606],{"class":591},[586,10952,609],{"class":591},[586,10954,1702],{"class":632},[586,10956,755],{"class":591},[586,10958,10960],{"class":10959,"line":2513},[588,622],[586,10961,794],{"class":591},[586,10963,10965,10967,10970,10973,10975,10977,10980,10982,10984,10987,10989,10991,10993,10995,10998,11000,11002,11005,11007,11009,11012,11014,11016,11018,11020],{"class":10964,"line":2518},[588,622],[586,10966,736],{"class":591},[586,10968,10969],{"class":595},"TresMeshPhongMaterial",[586,10971,10972],{"class":599}," specular",[586,10974,606],{"class":591},[586,10976,609],{"class":591},[586,10978,10979],{"class":612},"#111111",[586,10981,609],{"class":591},[586,10983,1699],{"class":591},[586,10985,10986],{"class":599},"shininess",[586,10988,606],{"class":591},[586,10990,609],{"class":591},[586,10992,1099],{"class":1712},[586,10994,609],{"class":591},[586,10996,10997],{"class":599}," color",[586,10999,606],{"class":591},[586,11001,609],{"class":591},[586,11003,11004],{"class":612},"#049ef4",[586,11006,609],{"class":591},[586,11008,1699],{"class":591},[586,11010,11011],{"class":599},"reflectivity",[586,11013,606],{"class":591},[586,11015,609],{"class":591},[586,11017,1812],{"class":1712},[586,11019,609],{"class":591},[586,11021,1731],{"class":591},[586,11023,11025,11027,11029],{"class":11024,"line":2102},[588,622],[586,11026,800],{"class":591},[586,11028,449],{"class":595},[586,11030,618],{"class":591},[586,11032,11033],{"class":588,"line":2103},[586,11034,654],{"emptyLinePlaceholder":520},[586,11036,11037,11039,11042],{"class":588,"line":2104},[586,11038,725],{"class":591},[586,11040,11041],{"class":595},"TresAxesHelper",[586,11043,1731],{"class":591},[586,11045,11046,11048,11050,11052,11054,11056,11059,11061,11063,11065,11067,11069,11071,11073,11075,11077,11079,11081,11083,11085,11087,11090,11092,11094,11096,11098],{"class":588,"line":2105},[586,11047,725],{"class":591},[586,11049,1915],{"class":595},[586,11051,10997],{"class":599},[586,11053,606],{"class":591},[586,11055,609],{"class":591},[586,11057,11058],{"class":612},"#ffffff",[586,11060,609],{"class":591},[586,11062,1699],{"class":591},[586,11064,1896],{"class":599},[586,11066,606],{"class":591},[586,11068,609],{"class":591},[586,11070,2779],{"class":1712},[586,11072,609],{"class":591},[586,11074,1699],{"class":591},[586,11076,1702],{"class":599},[586,11078,606],{"class":591},[586,11080,609],{"class":591},[586,11082,1709],{"class":591},[586,11084,1139],{"class":1712},[586,11086,1715],{"class":591},[586,11088,11089],{"class":1712},"200",[586,11091,1715],{"class":591},[586,11093,1139],{"class":1712},[586,11095,1726],{"class":591},[586,11097,609],{"class":591},[586,11099,1731],{"class":591},[586,11101,11102,11104,11106,11108,11110,11112,11114,11116,11118,11120,11122,11124,11126,11128,11130,11132,11134,11136,11138,11140,11142,11144,11146,11148,11150,11152],{"class":588,"line":2617},[586,11103,725],{"class":591},[586,11105,1915],{"class":595},[586,11107,10997],{"class":599},[586,11109,606],{"class":591},[586,11111,609],{"class":591},[586,11113,11058],{"class":612},[586,11115,609],{"class":591},[586,11117,1699],{"class":591},[586,11119,1896],{"class":599},[586,11121,606],{"class":591},[586,11123,609],{"class":591},[586,11125,2779],{"class":1712},[586,11127,609],{"class":591},[586,11129,1699],{"class":591},[586,11131,1702],{"class":599},[586,11133,606],{"class":591},[586,11135,609],{"class":591},[586,11137,1709],{"class":591},[586,11139,2831],{"class":1712},[586,11141,1715],{"class":591},[586,11143,11089],{"class":1712},[586,11145,1715],{"class":591},[586,11147,2831],{"class":1712},[586,11149,1726],{"class":591},[586,11151,609],{"class":591},[586,11153,1731],{"class":591},[586,11155,11156,11158,11160],{"class":588,"line":2623},[586,11157,810],{"class":591},[586,11159,717],{"class":595},[586,11161,618],{"class":591},[586,11163,11164,11166,11168],{"class":588,"line":2632},[586,11165,689],{"class":591},[586,11167,706],{"class":595},[586,11169,618],{"class":591},[568,11171,947],{"id":946},[949,11173,11174,11184],{},[952,11175,11176],{},[955,11177,11178,11180,11182],{},[958,11179,1971],{"align":960},[958,11181,964],{"align":960},[958,11183,967],{},[969,11185,11186,11199,11214,11228],{},[955,11187,11188,11192,11195],{},[974,11189,11190],{"align":960},[542,11191,1756],{},[974,11193,11194],{"align":960},"Resolution of the marching cube field. Higher resolution produces smoother meshes at the cost of performance and memory.",[974,11196,11197],{},[542,11198,6009],{},[955,11200,11201,11206,11209],{},[974,11202,11203],{"align":960},[542,11204,11205],{},"maxPolyCount",[974,11207,11208],{"align":960},"Maximum number of polygons to generate.",[974,11210,11211],{},[542,11212,11213],{},"10000",[955,11215,11216,11221,11224],{},[974,11217,11218],{"align":960},[542,11219,11220],{},"enableUvs",[974,11222,11223],{"align":960},"Whether UVs are enabled.",[974,11225,11226],{},[542,11227,1154],{},[955,11229,11230,11235,11238],{},[974,11231,11232],{"align":960},[542,11233,11234],{},"enableColors",[974,11236,11237],{"align":960},"Whether vertex colors are enabled.",[974,11239,11240],{},[542,11241,1154],{},[568,11243,11245],{"id":11244},"marchingcube-props","MarchingCube Props",[949,11247,11248,11258],{},[952,11249,11250],{},[955,11251,11252,11254,11256],{},[958,11253,1971],{"align":960},[958,11255,964],{"align":960},[958,11257,967],{},[969,11259,11260,11274],{},[955,11261,11262,11267,11270],{},[974,11263,11264],{"align":960},[542,11265,11266],{},"strength",[974,11268,11269],{"align":960},"How strongly this cube affects the marching cube field.",[974,11271,11272],{},[542,11273,1903],{},[955,11275,11276,11281,11287],{},[974,11277,11278],{"align":960},[542,11279,11280],{},"subtract",[974,11282,11283,11284,11286],{"align":960},"How quickly strength moves to ",[542,11285,1139],{}," over distance.",[974,11288,11289],{},[542,11290,11291],{},"12",[568,11293,11295],{"id":11294},"marchingplane-props","MarchingPlane Props",[949,11297,11298,11308],{},[952,11299,11300],{},[955,11301,11302,11304,11306],{},[958,11303,1971],{"align":960},[958,11305,964],{"align":960},[958,11307,967],{},[969,11309,11310,11328,11341],{},[955,11311,11312,11317,11323],{},[974,11313,11314],{"align":960},[542,11315,11316],{},"planeType",[974,11318,11319,11320],{"align":960},"Which axis the plane appears on. ",[542,11321,11322],{},"'x' | 'y' | 'z'",[974,11324,11325],{},[542,11326,11327],{},"'x'",[955,11329,11330,11334,11337],{},[974,11331,11332],{"align":960},[542,11333,11266],{},[974,11335,11336],{"align":960},"How strongly this plane affects the marching cube field.",[974,11338,11339],{},[542,11340,1903],{},[955,11342,11343,11347,11351],{},[974,11344,11345],{"align":960},[542,11346,11280],{},[974,11348,11283,11349,11286],{"align":960},[542,11350,1139],{},[974,11352,11353],{},[542,11354,11291],{},[1560,11356,11357],{},"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":11359},[11360,11361,11362,11363],{"id":570,"depth":514,"text":15},{"id":946,"depth":514,"text":947},{"id":11244,"depth":514,"text":11245},{"id":11294,"depth":514,"text":11295},"Create organic blob-like shapes using metaballs.",{},{"title":449,"description":11364},"dt9UUvCiy--PP6CSMtwwdcksel8iajosft8nxTQtolk",{"id":11369,"title":453,"body":11370,"description":12748,"extension":517,"links":518,"meta":12749,"navigation":520,"path":454,"seo":12750,"stem":455,"__hash__":12751},"docs\u002F2.api\u002F9.objects\u002Freflector.md",{"type":501,"value":11371,"toc":12741},[11372,11377,11392,11394,11661,11663,11751,11759,11763,11776,12419,12422,12425,12429,12738],[534,11373,11374],{},[11375,11376],"objects-reflector",{},[504,11378,1377,11379,11382,11383,11388,11389,11391],{},[542,11380,11381],{},"cientos"," package provides an abstraction of the ",[547,11384,11387],{"href":11385,"rel":11386},"https:\u002F\u002Fgithub.com\u002Fmrdoob\u002Fthree.js\u002Fblob\u002Fdev\u002Fexamples\u002Fjsm\u002Fobjects\u002FReflector.js",[551],"Reflector class",", which creates a Mesh showing a real-time reflection of your scene. This Mesh extends from ",[542,11390,4744],{}," so all the default props can be passed as well:",[568,11393,15],{"id":570},[572,11395,11397],{"className":574,"code":11396,"language":582,"meta":512,"style":512},"\u003Cscript setup lang=\"ts\">\nimport { Reflector } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas shadows alpha>\n \u003CTresPerspectiveCamera :position=\"[0, 0, 3]\" \u002F>\n \u003COrbitControls \u002F>\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]\" \u002F>\n \u003C\u002FReflector>\n \u003C\u002FSuspense>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[542,11398,11399,11419,11438,11446,11450,11458,11472,11504,11512,11516,11524,11531,11566,11582,11596,11600,11629,11637,11645,11653],{"__ignoreMap":512},[586,11400,11401,11403,11405,11407,11409,11411,11413,11415,11417],{"class":588,"line":513},[586,11402,592],{"class":591},[586,11404,596],{"class":595},[586,11406,600],{"class":599},[586,11408,603],{"class":599},[586,11410,606],{"class":591},[586,11412,609],{"class":591},[586,11414,613],{"class":612},[586,11416,609],{"class":591},[586,11418,618],{"class":591},[586,11420,11421,11423,11425,11428,11430,11432,11434,11436],{"class":588,"line":514},[586,11422,626],{"class":625},[586,11424,629],{"class":591},[586,11426,11427],{"class":632}," Reflector",[586,11429,636],{"class":591},[586,11431,639],{"class":625},[586,11433,642],{"class":591},[586,11435,645],{"class":612},[586,11437,648],{"class":591},[586,11439,11440,11442,11444],{"class":588,"line":651},[586,11441,689],{"class":591},[586,11443,596],{"class":595},[586,11445,618],{"class":591},[586,11447,11448],{"class":588,"line":657},[586,11449,654],{"emptyLinePlaceholder":520},[586,11451,11452,11454,11456],{"class":588,"line":686},[586,11453,592],{"class":591},[586,11455,706],{"class":595},[586,11457,618],{"class":591},[586,11459,11460,11462,11464,11467,11470],{"class":588,"line":696},[586,11461,714],{"class":591},[586,11463,717],{"class":595},[586,11465,11466],{"class":599}," shadows",[586,11468,11469],{"class":599}," alpha",[586,11471,618],{"class":591},[586,11473,11474,11476,11478,11480,11482,11484,11486,11488,11490,11492,11494,11496,11498,11500,11502],{"class":588,"line":701},[586,11475,725],{"class":591},[586,11477,1696],{"class":595},[586,11479,1699],{"class":591},[586,11481,1702],{"class":599},[586,11483,606],{"class":591},[586,11485,609],{"class":591},[586,11487,1709],{"class":591},[586,11489,1139],{"class":1712},[586,11491,1715],{"class":591},[586,11493,1139],{"class":1712},[586,11495,1715],{"class":591},[586,11497,2779],{"class":1712},[586,11499,1726],{"class":591},[586,11501,609],{"class":591},[586,11503,1731],{"class":591},[586,11505,11506,11508,11510],{"class":588,"line":711},[586,11507,725],{"class":591},[586,11509,1738],{"class":595},[586,11511,1731],{"class":591},[586,11513,11514],{"class":588,"line":722},[586,11515,654],{"emptyLinePlaceholder":520},[586,11517,11518,11520,11522],{"class":588,"line":577},[586,11519,725],{"class":591},[586,11521,728],{"class":595},[586,11523,618],{"class":591},[586,11525,11526,11528],{"class":588,"line":578},[586,11527,736],{"class":591},[586,11529,11530],{"class":595},"Reflector\n",[586,11532,11533,11535,11537,11539,11541,11543,11545,11547,11550,11552,11554,11556,11558,11560,11562,11564],{"class":588,"line":579},[586,11534,776],{"class":591},[586,11536,2367],{"class":599},[586,11538,606],{"class":591},[586,11540,609],{"class":591},[586,11542,5789],{"class":591},[586,11544,7669],{"class":632},[586,11546,835],{"class":591},[586,11548,11549],{"class":632},"PI",[586,11551,5827],{"class":591},[586,11553,1903],{"class":1712},[586,11555,1715],{"class":591},[586,11557,1139],{"class":1712},[586,11559,1715],{"class":591},[586,11561,1139],{"class":1712},[586,11563,1726],{"class":591},[586,11565,755],{"class":591},[586,11567,11568,11570,11572,11574,11576,11578,11580],{"class":588,"line":580},[586,11569,776],{"class":591},[586,11571,6749],{"class":599},[586,11573,606],{"class":591},[586,11575,609],{"class":591},[586,11577,6756],{"class":591},[586,11579,1718],{"class":1712},[586,11581,755],{"class":591},[586,11583,11584,11587,11589,11591,11594],{"class":588,"line":581},[586,11585,11586],{"class":599}," color",[586,11588,606],{"class":591},[586,11590,609],{"class":591},[586,11592,11593],{"class":612},"#fff",[586,11595,755],{"class":591},[586,11597,11598],{"class":588,"line":797},[586,11599,4142],{"class":591},[586,11601,11602,11604,11607,11609,11611,11613,11615,11617,11619,11621,11623,11625,11627],{"class":588,"line":807},[586,11603,1795],{"class":591},[586,11605,11606],{"class":595},"TresCircleGeometry",[586,11608,1699],{"class":591},[586,11610,1803],{"class":599},[586,11612,606],{"class":591},[586,11614,609],{"class":591},[586,11616,1709],{"class":591},[586,11618,2536],{"class":1712},[586,11620,1715],{"class":591},[586,11622,2536],{"class":1712},[586,11624,1726],{"class":591},[586,11626,609],{"class":591},[586,11628,1731],{"class":591},[586,11630,11631,11633,11635],{"class":588,"line":817},[586,11632,1867],{"class":591},[586,11634,453],{"class":595},[586,11636,618],{"class":591},[586,11638,11639,11641,11643],{"class":588,"line":1910},[586,11640,800],{"class":591},[586,11642,728],{"class":595},[586,11644,618],{"class":591},[586,11646,11647,11649,11651],{"class":588,"line":1945},[586,11648,810],{"class":591},[586,11650,717],{"class":595},[586,11652,618],{"class":591},[586,11654,11655,11657,11659],{"class":588,"line":1954},[586,11656,689],{"class":591},[586,11658,706],{"class":595},[586,11660,618],{"class":591},[568,11662,947],{"id":946},[949,11664,11665,11675],{},[952,11666,11667],{},[955,11668,11669,11671,11673],{},[958,11670,1971],{"align":960},[958,11672,964],{"align":960},[958,11674,967],{},[969,11676,11677,11689,11702,11714,11726,11738],{},[955,11678,11679,11683,11686],{},[974,11680,11681],{"align":960},[2896,11682,2684],{},[974,11684,11685],{"align":960},"The base color that's combine with the mirror effect",[974,11687,11688],{},"'#333'",[955,11690,11691,11696,11699],{},[974,11692,11693],{"align":960},[2896,11694,11695],{},"textureWidth",[974,11697,11698],{"align":960},"the width of the texture to render on the mirror",[974,11700,11701],{},"512",[955,11703,11704,11709,11712],{},[974,11705,11706],{"align":960},[2896,11707,11708],{},"textureHeight",[974,11710,11711],{"align":960},"the height of the texture to render on the mirror",[974,11713,11701],{},[955,11715,11716,11721,11724],{},[974,11717,11718],{"align":960},[2896,11719,11720],{},"clipBias",[974,11722,11723],{"align":960},"to use the clipBias property",[974,11725,1139],{},[955,11727,11728,11733,11736],{},[974,11729,11730],{"align":960},[2896,11731,11732],{},"multisample",[974,11734,11735],{"align":960},"how many samplers will be render",[974,11737,1936],{},[955,11739,11740,11745,11748],{},[974,11741,11742],{"align":960},[2896,11743,11744],{},"shader",[974,11746,11747],{"align":960},"The texture of the smoke.",[974,11749,11750],{},"Reflector.ReflectorShader",[825,11752,11753],{},[504,11754,11755,11756,11758],{},"All the props except the ",[542,11757,2684],{},", are not reactive",[568,11760,11762],{"id":11761},"custom-mirror-effect","Custom mirror effect",[504,11764,11765,11766,1715,11769,7123,11772,11775],{},"You can provide your own shader by passing a full shader object with ",[542,11767,11768],{},"uniforms",[542,11770,11771],{},"vertexShader",[542,11773,11774],{},"fragmentShader",". The example below adds animated circular ripples emanating from the center of the surface, while preserving the color tint:",[572,11777,11779],{"className":574,"code":11778,"language":582,"meta":512,"style":512},"\u003Cscript setup lang=\"ts\">\nimport { Reflector } from '@tresjs\u002Fcientos'\nimport { useLoop } from '@tresjs\u002Fcore'\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: \u002F* glsl *\u002F`\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: \u002F* glsl *\u002F`\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\u002Fscript>\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]\" \u002F>\n \u003C\u002FReflector>\n\u003C\u002Ftemplate>\n",[542,11780,11781,11801,11819,11838,11856,11860,11873,11877,11888,11897,11915,11932,11949,11966,11970,11983,11988,11993,11998,12003,12008,12013,12018,12028,12039,12044,12049,12054,12058,12062,12067,12072,12077,12082,12087,12091,12095,12100,12105,12110,12115,12120,12125,12130,12135,12143,12147,12151,12168,12185,12214,12247,12253,12261,12265,12273,12279,12293,12328,12344,12356,12371,12375,12403,12411],{"__ignoreMap":512},[586,11782,11783,11785,11787,11789,11791,11793,11795,11797,11799],{"class":588,"line":513},[586,11784,592],{"class":591},[586,11786,596],{"class":595},[586,11788,600],{"class":599},[586,11790,603],{"class":599},[586,11792,606],{"class":591},[586,11794,609],{"class":591},[586,11796,613],{"class":612},[586,11798,609],{"class":591},[586,11800,618],{"class":591},[586,11802,11803,11805,11807,11809,11811,11813,11815,11817],{"class":588,"line":514},[586,11804,626],{"class":625},[586,11806,629],{"class":591},[586,11808,11427],{"class":632},[586,11810,636],{"class":591},[586,11812,639],{"class":625},[586,11814,642],{"class":591},[586,11816,645],{"class":612},[586,11818,648],{"class":591},[586,11820,11821,11823,11825,11828,11830,11832,11834,11836],{"class":588,"line":651},[586,11822,626],{"class":625},[586,11824,629],{"class":591},[586,11826,11827],{"class":632}," useLoop",[586,11829,636],{"class":591},[586,11831,639],{"class":625},[586,11833,642],{"class":591},[586,11835,2172],{"class":612},[586,11837,648],{"class":591},[586,11839,11840,11842,11844,11846,11848,11850,11852,11854],{"class":588,"line":657},[586,11841,626],{"class":625},[586,11843,629],{"class":591},[586,11845,2202],{"class":632},[586,11847,636],{"class":591},[586,11849,639],{"class":625},[586,11851,642],{"class":591},[586,11853,582],{"class":612},[586,11855,648],{"class":591},[586,11857,11858],{"class":588,"line":686},[586,11859,654],{"emptyLinePlaceholder":520},[586,11861,11862,11864,11867,11869,11871],{"class":588,"line":696},[586,11863,660],{"class":599},[586,11865,11866],{"class":632}," reflectorRef ",[586,11868,606],{"class":591},[586,11870,2202],{"class":668},[586,11872,7324],{"class":632},[586,11874,11875],{"class":588,"line":701},[586,11876,654],{"emptyLinePlaceholder":520},[586,11878,11879,11881,11884,11886],{"class":588,"line":711},[586,11880,660],{"class":599},[586,11882,11883],{"class":632}," customShader ",[586,11885,606],{"class":591},[586,11887,2322],{"class":591},[586,11889,11890,11893,11895],{"class":588,"line":722},[586,11891,11892],{"class":595}," uniforms",[586,11894,2313],{"class":591},[586,11896,2322],{"class":591},[586,11898,11899,11902,11904,11906,11909,11911,11913],{"class":588,"line":577},[586,11900,11901],{"class":595}," color",[586,11903,2313],{"class":591},[586,11905,629],{"class":591},[586,11907,11908],{"class":595}," value",[586,11910,2313],{"class":591},[586,11912,2247],{"class":591},[586,11914,5427],{"class":591},[586,11916,11917,11920,11922,11924,11926,11928,11930],{"class":588,"line":578},[586,11918,11919],{"class":595}," tDiffuse",[586,11921,2313],{"class":591},[586,11923,629],{"class":591},[586,11925,11908],{"class":595},[586,11927,2313],{"class":591},[586,11929,2247],{"class":591},[586,11931,5427],{"class":591},[586,11933,11934,11937,11939,11941,11943,11945,11947],{"class":588,"line":579},[586,11935,11936],{"class":595}," textureMatrix",[586,11938,2313],{"class":591},[586,11940,629],{"class":591},[586,11942,11908],{"class":595},[586,11944,2313],{"class":591},[586,11946,2247],{"class":591},[586,11948,5427],{"class":591},[586,11950,11951,11954,11956,11958,11960,11962,11964],{"class":588,"line":580},[586,11952,11953],{"class":595}," time",[586,11955,2313],{"class":591},[586,11957,629],{"class":591},[586,11959,11908],{"class":595},[586,11961,2313],{"class":591},[586,11963,7262],{"class":1712},[586,11965,5427],{"class":591},[586,11967,11968],{"class":588,"line":581},[586,11969,3151],{"class":591},[586,11971,11972,11975,11977,11980],{"class":588,"line":797},[586,11973,11974],{"class":595}," vertexShader",[586,11976,2313],{"class":591},[586,11978,11979],{"class":10444}," \u002F* glsl *\u002F",[586,11981,11982],{"class":591},"`\n",[586,11984,11985],{"class":588,"line":807},[586,11986,11987],{"class":612}," uniform mat4 textureMatrix;\n",[586,11989,11990],{"class":588,"line":817},[586,11991,11992],{"class":612}," varying vec4 vUv;\n",[586,11994,11995],{"class":588,"line":1910},[586,11996,11997],{"class":612}," varying vec2 vPos;\n",[586,11999,12000],{"class":588,"line":1945},[586,12001,12002],{"class":612}," void main() {\n",[586,12004,12005],{"class":588,"line":1954},[586,12006,12007],{"class":612}," vUv = textureMatrix * vec4(position, 1.0);\n",[586,12009,12010],{"class":588,"line":2513},[586,12011,12012],{"class":612}," vPos = position.xy;\n",[586,12014,12015],{"class":588,"line":2518},[586,12016,12017],{"class":612}," gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n",[586,12019,12020,12023,12026],{"class":588,"line":2102},[586,12021,12022],{"class":612}," }",[586,12024,12025],{"class":591},"`",[586,12027,3097],{"class":591},[586,12029,12030,12033,12035,12037],{"class":588,"line":2103},[586,12031,12032],{"class":595}," fragmentShader",[586,12034,2313],{"class":591},[586,12036,11979],{"class":10444},[586,12038,11982],{"class":591},[586,12040,12041],{"class":588,"line":2104},[586,12042,12043],{"class":612}," uniform vec3 color;\n",[586,12045,12046],{"class":588,"line":2105},[586,12047,12048],{"class":612}," uniform sampler2D tDiffuse;\n",[586,12050,12051],{"class":588,"line":2617},[586,12052,12053],{"class":612}," uniform float time;\n",[586,12055,12056],{"class":588,"line":2623},[586,12057,11992],{"class":612},[586,12059,12060],{"class":588,"line":2632},[586,12061,11997],{"class":612},[586,12063,12064],{"class":588,"line":2666},[586,12065,12066],{"class":612}," float blendOverlay(float base, float blend) {\n",[586,12068,12069],{"class":588,"line":2671},[586,12070,12071],{"class":612}," return(base \u003C 0.5 ? (2.0 * base * blend) : (1.0 - 2.0 * (1.0 - base) * (1.0 - blend)));\n",[586,12073,12074],{"class":588,"line":2679},[586,12075,12076],{"class":612}," }\n",[586,12078,12079],{"class":588,"line":2696},[586,12080,12081],{"class":612}," vec3 blendOverlay(vec3 base, vec3 blend) {\n",[586,12083,12084],{"class":588,"line":2726},[586,12085,12086],{"class":612}," return vec3(blendOverlay(base.r, blend.r), blendOverlay(base.g, blend.g), blendOverlay(base.b, blend.b));\n",[586,12088,12089],{"class":588,"line":2731},[586,12090,12076],{"class":612},[586,12092,12093],{"class":588,"line":2740},[586,12094,12002],{"class":612},[586,12096,12097],{"class":588,"line":2745},[586,12098,12099],{"class":612}," float dist = length(vPos);\n",[586,12101,12102],{"class":588,"line":2753},[586,12103,12104],{"class":612}," float wave = sin(dist * 6.0 - time * 4.0) * 0.02;\n",[586,12106,12107],{"class":588,"line":2766},[586,12108,12109],{"class":612}," vec2 dir = dist > 0.001 ? normalize(vPos) : vec2(0.0);\n",[586,12111,12112],{"class":588,"line":2794},[586,12113,12114],{"class":612}," vec4 distortedUv = vUv + vec4(dir * wave, 0.0, 0.0);\n",[586,12116,12117],{"class":588,"line":2800},[586,12118,12119],{"class":612}," vec4 base = texture2DProj(tDiffuse, distortedUv);\n",[586,12121,12122],{"class":588,"line":2840},[586,12123,12124],{"class":612}," gl_FragColor = vec4(blendOverlay(base.rgb, color), 1.0);\n",[586,12126,12127],{"class":588,"line":2850},[586,12128,12129],{"class":612}," #include \u003Ctonemapping_fragment>\n",[586,12131,12132],{"class":588,"line":2859},[586,12133,12134],{"class":612}," #include \u003Ccolorspace_fragment>\n",[586,12136,12137,12139,12141],{"class":588,"line":2868},[586,12138,12022],{"class":612},[586,12140,12025],{"class":591},[586,12142,3097],{"class":591},[586,12144,12145],{"class":588,"line":5654},[586,12146,2414],{"class":591},[586,12148,12149],{"class":588,"line":5663},[586,12150,654],{"emptyLinePlaceholder":520},[586,12152,12153,12155,12157,12160,12162,12164,12166],{"class":588,"line":5668},[586,12154,660],{"class":599},[586,12156,629],{"class":591},[586,12158,12159],{"class":632}," onBeforeRender ",[586,12161,3157],{"class":591},[586,12163,2375],{"class":591},[586,12165,11827],{"class":668},[586,12167,7324],{"class":632},[586,12169,12170,12173,12175,12177,12179,12181,12183],{"class":588,"line":5676},[586,12171,12172],{"class":668},"onBeforeRender",[586,12174,672],{"class":632},[586,12176,2299],{"class":591},[586,12178,2303],{"class":2302},[586,12180,2319],{"class":591},[586,12182,7572],{"class":599},[586,12184,2322],{"class":591},[586,12186,12187,12189,12192,12194,12197,12199,12201,12203,12205,12207,12209,12211],{"class":588,"line":5704},[586,12188,7579],{"class":599},[586,12190,12191],{"class":632}," uniforms",[586,12193,2375],{"class":591},[586,12195,12196],{"class":632}," reflectorRef",[586,12198,835],{"class":591},[586,12200,2341],{"class":632},[586,12202,2710],{"class":591},[586,12204,2713],{"class":632},[586,12206,2710],{"class":591},[586,12208,6359],{"class":632},[586,12210,2710],{"class":591},[586,12212,12213],{"class":632},"uniforms\n",[586,12215,12216,12218,12220,12222,12224,12227,12229,12231,12233,12235,12237,12239,12241,12243,12245],{"class":588,"line":5728},[586,12217,2327],{"class":625},[586,12219,2330],{"class":595},[586,12221,11768],{"class":632},[586,12223,2710],{"class":591},[586,12225,12226],{"class":632},"time",[586,12228,2344],{"class":595},[586,12230,2347],{"class":591},[586,12232,12191],{"class":632},[586,12234,835],{"class":591},[586,12236,12226],{"class":632},[586,12238,835],{"class":591},[586,12240,2341],{"class":632},[586,12242,2375],{"class":591},[586,12244,2303],{"class":632},[586,12246,2353],{"class":591},[586,12248,12249,12251],{"class":588,"line":5744},[586,12250,3157],{"class":591},[586,12252,683],{"class":632},[586,12254,12255,12257,12259],{"class":588,"line":5761},[586,12256,689],{"class":591},[586,12258,596],{"class":595},[586,12260,618],{"class":591},[586,12262,12263],{"class":588,"line":5777},[586,12264,654],{"emptyLinePlaceholder":520},[586,12266,12267,12269,12271],{"class":588,"line":5803},[586,12268,592],{"class":591},[586,12270,706],{"class":595},[586,12272,618],{"class":591},[586,12274,12275,12277],{"class":588,"line":5808},[586,12276,714],{"class":591},[586,12278,11530],{"class":595},[586,12280,12281,12284,12286,12288,12291],{"class":588,"line":5866},[586,12282,12283],{"class":599}," ref",[586,12285,606],{"class":591},[586,12287,609],{"class":591},[586,12289,12290],{"class":612},"reflectorRef",[586,12292,755],{"class":591},[586,12294,12295,12298,12300,12302,12304,12306,12308,12310,12312,12314,12316,12318,12320,12322,12324,12326],{"class":588,"line":5901},[586,12296,12297],{"class":591}," :",[586,12299,2367],{"class":599},[586,12301,606],{"class":591},[586,12303,609],{"class":591},[586,12305,5789],{"class":591},[586,12307,7669],{"class":632},[586,12309,835],{"class":591},[586,12311,11549],{"class":632},[586,12313,5827],{"class":591},[586,12315,1903],{"class":1712},[586,12317,1715],{"class":591},[586,12319,1139],{"class":1712},[586,12321,1715],{"class":591},[586,12323,1139],{"class":1712},[586,12325,1726],{"class":591},[586,12327,755],{"class":591},[586,12329,12330,12332,12334,12336,12338,12340,12342],{"class":588,"line":5910},[586,12331,12297],{"class":591},[586,12333,6749],{"class":599},[586,12335,606],{"class":591},[586,12337,609],{"class":591},[586,12339,6756],{"class":591},[586,12341,1718],{"class":1712},[586,12343,755],{"class":591},[586,12345,12346,12348,12350,12352,12354],{"class":588,"line":5920},[586,12347,11901],{"class":599},[586,12349,606],{"class":591},[586,12351,609],{"class":591},[586,12353,11593],{"class":612},[586,12355,755],{"class":591},[586,12357,12358,12360,12362,12364,12366,12369],{"class":588,"line":5930},[586,12359,12297],{"class":591},[586,12361,11744],{"class":599},[586,12363,606],{"class":591},[586,12365,609],{"class":591},[586,12367,12368],{"class":632},"customShader",[586,12370,755],{"class":591},[586,12372,12373],{"class":588,"line":5000},[586,12374,4899],{"class":591},[586,12376,12377,12379,12381,12383,12385,12387,12389,12391,12393,12395,12397,12399,12401],{"class":588,"line":5001},[586,12378,725],{"class":591},[586,12380,11606],{"class":595},[586,12382,1699],{"class":591},[586,12384,1803],{"class":599},[586,12386,606],{"class":591},[586,12388,609],{"class":591},[586,12390,1709],{"class":591},[586,12392,2536],{"class":1712},[586,12394,1715],{"class":591},[586,12396,2536],{"class":1712},[586,12398,1726],{"class":591},[586,12400,609],{"class":591},[586,12402,1731],{"class":591},[586,12404,12405,12407,12409],{"class":588,"line":5002},[586,12406,810],{"class":591},[586,12408,453],{"class":595},[586,12410,618],{"class":591},[586,12412,12413,12415,12417],{"class":588,"line":5003},[586,12414,689],{"class":591},[586,12416,706],{"class":595},[586,12418,618],{"class":591},[504,12420,12421],{},"The Reflector shader use the following configuration by default:",[504,12423,12424],{},"You can extend, modify or just play with them",[913,12426,12428],{"id":12427},"default-shader","Default shader",[572,12430,12434],{"className":12431,"code":12432,"language":12433,"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: \u002F* glsl *\u002F`\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: \u002F* glsl *\u002F`\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,12435,12436,12447,12463,12471,12479,12489,12494,12502,12510,12514,12522,12530,12534,12538,12548,12553,12558,12562,12567,12572,12576,12581,12586,12591,12595,12600,12604,12613,12623,12628,12633,12637,12641,12646,12650,12655,12660,12665,12669,12674,12679,12683,12687,12691,12696,12700,12705,12710,12714,12719,12724,12730,12734],{"__ignoreMap":512},[586,12437,12438,12440,12443,12445],{"class":588,"line":513},[586,12439,660],{"class":599},[586,12441,12442],{"class":632}," shader ",[586,12444,606],{"class":591},[586,12446,2322],{"class":591},[586,12448,12449,12452,12454,12456,12459,12461],{"class":588,"line":514},[586,12450,12451],{"class":595}," name",[586,12453,2313],{"class":591},[586,12455,642],{"class":591},[586,12457,12458],{"class":612},"ReflectorShader",[586,12460,675],{"class":591},[586,12462,3097],{"class":591},[586,12464,12465,12467,12469],{"class":588,"line":651},[586,12466,11892],{"class":595},[586,12468,2313],{"class":591},[586,12470,2322],{"class":591},[586,12472,12473,12475,12477],{"class":588,"line":657},[586,12474,11901],{"class":595},[586,12476,2313],{"class":591},[586,12478,2322],{"class":591},[586,12480,12481,12484,12486],{"class":588,"line":686},[586,12482,12483],{"class":595}," value",[586,12485,2313],{"class":591},[586,12487,12488],{"class":591}," null\n",[586,12490,12491],{"class":588,"line":696},[586,12492,12493],{"class":591}," },\n",[586,12495,12496,12498,12500],{"class":588,"line":701},[586,12497,11919],{"class":595},[586,12499,2313],{"class":591},[586,12501,2322],{"class":591},[586,12503,12504,12506,12508],{"class":588,"line":711},[586,12505,12483],{"class":595},[586,12507,2313],{"class":591},[586,12509,12488],{"class":591},[586,12511,12512],{"class":588,"line":722},[586,12513,12493],{"class":591},[586,12515,12516,12518,12520],{"class":588,"line":577},[586,12517,11936],{"class":595},[586,12519,2313],{"class":591},[586,12521,2322],{"class":591},[586,12523,12524,12526,12528],{"class":588,"line":578},[586,12525,12483],{"class":595},[586,12527,2313],{"class":591},[586,12529,12488],{"class":591},[586,12531,12532],{"class":588,"line":579},[586,12533,12076],{"class":591},[586,12535,12536],{"class":588,"line":580},[586,12537,3151],{"class":591},[586,12539,12540,12542,12544,12546],{"class":588,"line":581},[586,12541,11974],{"class":595},[586,12543,2313],{"class":591},[586,12545,11979],{"class":10444},[586,12547,11982],{"class":591},[586,12549,12550],{"class":588,"line":797},[586,12551,12552],{"class":612}," uniform mat4 textureMatrix;\n",[586,12554,12555],{"class":588,"line":807},[586,12556,12557],{"class":612}," varying vec4 vUv;\n",[586,12559,12560],{"class":588,"line":817},[586,12561,654],{"emptyLinePlaceholder":520},[586,12563,12564],{"class":588,"line":1910},[586,12565,12566],{"class":612}," #include \u003Ccommon>\n",[586,12568,12569],{"class":588,"line":1945},[586,12570,12571],{"class":612}," #include \u003Clogdepthbuf_pars_vertex>\n",[586,12573,12574],{"class":588,"line":1954},[586,12575,654],{"emptyLinePlaceholder":520},[586,12577,12578],{"class":588,"line":2513},[586,12579,12580],{"class":612}," void main() {\n",[586,12582,12583],{"class":588,"line":2518},[586,12584,12585],{"class":612}," vUv = textureMatrix * vec4( position, 1.0 );\n",[586,12587,12588],{"class":588,"line":2102},[586,12589,12590],{"class":612}," gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n",[586,12592,12593],{"class":588,"line":2103},[586,12594,654],{"emptyLinePlaceholder":520},[586,12596,12597],{"class":588,"line":2104},[586,12598,12599],{"class":612}," #include \u003Clogdepthbuf_vertex>\n",[586,12601,12602],{"class":588,"line":2105},[586,12603,654],{"emptyLinePlaceholder":520},[586,12605,12606,12609,12611],{"class":588,"line":2617},[586,12607,12608],{"class":612}," }",[586,12610,12025],{"class":591},[586,12612,3097],{"class":591},[586,12614,12615,12617,12619,12621],{"class":588,"line":2623},[586,12616,12032],{"class":595},[586,12618,2313],{"class":591},[586,12620,11979],{"class":10444},[586,12622,11982],{"class":591},[586,12624,12625],{"class":588,"line":2632},[586,12626,12627],{"class":612}," uniform vec3 color;\n",[586,12629,12630],{"class":588,"line":2666},[586,12631,12632],{"class":612}," uniform sampler2D tDiffuse;\n",[586,12634,12635],{"class":588,"line":2671},[586,12636,12557],{"class":612},[586,12638,12639],{"class":588,"line":2679},[586,12640,654],{"emptyLinePlaceholder":520},[586,12642,12643],{"class":588,"line":2696},[586,12644,12645],{"class":612}," #include \u003Clogdepthbuf_pars_fragment>\n",[586,12647,12648],{"class":588,"line":2726},[586,12649,654],{"emptyLinePlaceholder":520},[586,12651,12652],{"class":588,"line":2731},[586,12653,12654],{"class":612}," float blendOverlay( float base, float blend ) {\n",[586,12656,12657],{"class":588,"line":2740},[586,12658,12659],{"class":612}," return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n",[586,12661,12662],{"class":588,"line":2745},[586,12663,12664],{"class":612}," }\n",[586,12666,12667],{"class":588,"line":2753},[586,12668,654],{"emptyLinePlaceholder":520},[586,12670,12671],{"class":588,"line":2766},[586,12672,12673],{"class":612}," vec3 blendOverlay( vec3 base, vec3 blend ) {\n",[586,12675,12676],{"class":588,"line":2794},[586,12677,12678],{"class":612}," return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n",[586,12680,12681],{"class":588,"line":2800},[586,12682,12664],{"class":612},[586,12684,12685],{"class":588,"line":2840},[586,12686,654],{"emptyLinePlaceholder":520},[586,12688,12689],{"class":588,"line":2850},[586,12690,12580],{"class":612},[586,12692,12693],{"class":588,"line":2859},[586,12694,12695],{"class":612}," #include \u003Clogdepthbuf_fragment>\n",[586,12697,12698],{"class":588,"line":2868},[586,12699,654],{"emptyLinePlaceholder":520},[586,12701,12702],{"class":588,"line":5654},[586,12703,12704],{"class":612}," vec4 base = texture2DProj( tDiffuse, vUv );\n",[586,12706,12707],{"class":588,"line":5663},[586,12708,12709],{"class":612}," gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n",[586,12711,12712],{"class":588,"line":5668},[586,12713,654],{"emptyLinePlaceholder":520},[586,12715,12716],{"class":588,"line":5676},[586,12717,12718],{"class":612}," #include \u003Ctonemapping_fragment>\n",[586,12720,12721],{"class":588,"line":5704},[586,12722,12723],{"class":612}," #include \u003Ccolorspace_fragment>\n",[586,12725,12726,12728],{"class":588,"line":5728},[586,12727,12608],{"class":612},[586,12729,11982],{"class":591},[586,12731,12732],{"class":588,"line":5744},[586,12733,654],{"emptyLinePlaceholder":520},[586,12735,12736],{"class":588,"line":5761},[586,12737,2414],{"class":591},[1560,12739,12740],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .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":12742},[12743,12744,12745],{"id":570,"depth":514,"text":15},{"id":946,"depth":514,"text":947},{"id":11761,"depth":514,"text":11762,"children":12746},[12747],{"id":12427,"depth":651,"text":12428},"Create real-time reflections of your scene.",{},{"title":453,"description":12748},"hu0_cWNcLItstfep2oA3fWu44BIvehGORFbqaCgBRtM",{"id":12753,"title":457,"body":12754,"description":13970,"extension":517,"links":518,"meta":13971,"navigation":520,"path":458,"seo":13972,"stem":459,"__hash__":13973},"docs\u002F2.api\u002F9.objects\u002Frefractor.md",{"type":501,"value":12755,"toc":13963},[12756,12761,12774,12776,13061,13063,13157,13165,13169,13177,13726,13729,13731,13960],[534,12757,12758],{},[12759,12760],"objects-refractor",{},[504,12762,1377,12763,11382,12765,12770,12771,12773],{},[542,12764,11381],{},[547,12766,12769],{"href":12767,"rel":12768},"https:\u002F\u002Fgithub.com\u002Fmrdoob\u002Fthree.js\u002Fblob\u002Fdev\u002Fexamples\u002Fjsm\u002Fobjects\u002FRefractor.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,12772,4744],{}," so all the default props can be passed as well.",[568,12775,15],{"id":570},[572,12777,12779],{"className":574,"code":12778,"language":582,"meta":512,"style":512},"\u003Cscript setup lang=\"ts\">\nimport { Refractor } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas shadows alpha>\n \u003CTresPerspectiveCamera :position=\"[0, 2, 8]\" \u002F>\n \u003COrbitControls \u002F>\n\n \u003C!-- Place objects behind the refracting plane -->\n \u003CTresMesh :position=\"[-2, 0, -2]\">\n \u003CTresTorusKnotGeometry \u002F>\n \u003CTresMeshStandardMaterial color=\"hotpink\" \u002F>\n \u003C\u002FTresMesh>\n\n \u003CSuspense>\n \u003CRefractor color=\"#9ec8d4\">\n \u003CTresPlaneGeometry :args=\"[8, 5]\" \u002F>\n \u003C\u002FRefractor>\n \u003C\u002FSuspense>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[542,12780,12781,12801,12820,12828,12832,12840,12852,12885,12893,12897,12902,12934,12943,12962,12970,12974,12982,13001,13029,13037,13045,13053],{"__ignoreMap":512},[586,12782,12783,12785,12787,12789,12791,12793,12795,12797,12799],{"class":588,"line":513},[586,12784,592],{"class":591},[586,12786,596],{"class":595},[586,12788,600],{"class":599},[586,12790,603],{"class":599},[586,12792,606],{"class":591},[586,12794,609],{"class":591},[586,12796,613],{"class":612},[586,12798,609],{"class":591},[586,12800,618],{"class":591},[586,12802,12803,12805,12807,12810,12812,12814,12816,12818],{"class":588,"line":514},[586,12804,626],{"class":625},[586,12806,629],{"class":591},[586,12808,12809],{"class":632}," Refractor",[586,12811,636],{"class":591},[586,12813,639],{"class":625},[586,12815,642],{"class":591},[586,12817,645],{"class":612},[586,12819,648],{"class":591},[586,12821,12822,12824,12826],{"class":588,"line":651},[586,12823,689],{"class":591},[586,12825,596],{"class":595},[586,12827,618],{"class":591},[586,12829,12830],{"class":588,"line":657},[586,12831,654],{"emptyLinePlaceholder":520},[586,12833,12834,12836,12838],{"class":588,"line":686},[586,12835,592],{"class":591},[586,12837,706],{"class":595},[586,12839,618],{"class":591},[586,12841,12842,12844,12846,12848,12850],{"class":588,"line":696},[586,12843,714],{"class":591},[586,12845,717],{"class":595},[586,12847,11466],{"class":599},[586,12849,11469],{"class":599},[586,12851,618],{"class":591},[586,12853,12854,12856,12858,12860,12862,12864,12866,12868,12870,12872,12874,12876,12879,12881,12883],{"class":588,"line":701},[586,12855,725],{"class":591},[586,12857,1696],{"class":595},[586,12859,1699],{"class":591},[586,12861,1702],{"class":599},[586,12863,606],{"class":591},[586,12865,609],{"class":591},[586,12867,1709],{"class":591},[586,12869,1139],{"class":1712},[586,12871,1715],{"class":591},[586,12873,1718],{"class":1712},[586,12875,1715],{"class":591},[586,12877,12878],{"class":1712},"8",[586,12880,1726],{"class":591},[586,12882,609],{"class":591},[586,12884,1731],{"class":591},[586,12886,12887,12889,12891],{"class":588,"line":711},[586,12888,725],{"class":591},[586,12890,1738],{"class":595},[586,12892,1731],{"class":591},[586,12894,12895],{"class":588,"line":722},[586,12896,654],{"emptyLinePlaceholder":520},[586,12898,12899],{"class":588,"line":577},[586,12900,12901],{"class":10444}," \u003C!-- Place objects behind the refracting plane -->\n",[586,12903,12904,12906,12908,12910,12912,12914,12916,12918,12920,12922,12924,12926,12928,12930,12932],{"class":588,"line":578},[586,12905,725],{"class":591},[586,12907,1788],{"class":595},[586,12909,1699],{"class":591},[586,12911,1702],{"class":599},[586,12913,606],{"class":591},[586,12915,609],{"class":591},[586,12917,5789],{"class":591},[586,12919,1718],{"class":1712},[586,12921,1715],{"class":591},[586,12923,1139],{"class":1712},[586,12925,5986],{"class":591},[586,12927,1718],{"class":1712},[586,12929,1726],{"class":591},[586,12931,609],{"class":591},[586,12933,618],{"class":591},[586,12935,12936,12938,12941],{"class":588,"line":579},[586,12937,736],{"class":591},[586,12939,12940],{"class":595},"TresTorusKnotGeometry",[586,12942,1731],{"class":591},[586,12944,12945,12947,12949,12951,12953,12955,12958,12960],{"class":588,"line":580},[586,12946,736],{"class":591},[586,12948,1834],{"class":595},[586,12950,10997],{"class":599},[586,12952,606],{"class":591},[586,12954,609],{"class":591},[586,12956,12957],{"class":612},"hotpink",[586,12959,609],{"class":591},[586,12961,1731],{"class":591},[586,12963,12964,12966,12968],{"class":588,"line":581},[586,12965,800],{"class":591},[586,12967,1788],{"class":595},[586,12969,618],{"class":591},[586,12971,12972],{"class":588,"line":797},[586,12973,654],{"emptyLinePlaceholder":520},[586,12975,12976,12978,12980],{"class":588,"line":807},[586,12977,725],{"class":591},[586,12979,728],{"class":595},[586,12981,618],{"class":591},[586,12983,12984,12986,12988,12990,12992,12994,12997,12999],{"class":588,"line":817},[586,12985,736],{"class":591},[586,12987,457],{"class":595},[586,12989,10997],{"class":599},[586,12991,606],{"class":591},[586,12993,609],{"class":591},[586,12995,12996],{"class":612},"#9ec8d4",[586,12998,609],{"class":591},[586,13000,618],{"class":591},[586,13002,13003,13005,13007,13009,13011,13013,13015,13017,13019,13021,13023,13025,13027],{"class":588,"line":1910},[586,13004,1795],{"class":591},[586,13006,3531],{"class":595},[586,13008,1699],{"class":591},[586,13010,1803],{"class":599},[586,13012,606],{"class":591},[586,13014,609],{"class":591},[586,13016,1709],{"class":591},[586,13018,12878],{"class":1712},[586,13020,1715],{"class":591},[586,13022,1723],{"class":1712},[586,13024,1726],{"class":591},[586,13026,609],{"class":591},[586,13028,1731],{"class":591},[586,13030,13031,13033,13035],{"class":588,"line":1945},[586,13032,1867],{"class":591},[586,13034,457],{"class":595},[586,13036,618],{"class":591},[586,13038,13039,13041,13043],{"class":588,"line":1954},[586,13040,800],{"class":591},[586,13042,728],{"class":595},[586,13044,618],{"class":591},[586,13046,13047,13049,13051],{"class":588,"line":2513},[586,13048,810],{"class":591},[586,13050,717],{"class":595},[586,13052,618],{"class":591},[586,13054,13055,13057,13059],{"class":588,"line":2518},[586,13056,689],{"class":591},[586,13058,706],{"class":595},[586,13060,618],{"class":591},[568,13062,947],{"id":946},[949,13064,13065,13075],{},[952,13066,13067],{},[955,13068,13069,13071,13073],{},[958,13070,1971],{"align":960},[958,13072,964],{"align":960},[958,13074,967],{},[969,13076,13077,13091,13104,13117,13130,13143],{},[955,13078,13079,13083,13086],{},[974,13080,13081],{"align":960},[2896,13082,2684],{},[974,13084,13085],{"align":960},"Color tint blended with the refracted image",[974,13087,13088],{},[542,13089,13090],{},"'#7f7f7f'",[955,13092,13093,13097,13100],{},[974,13094,13095],{"align":960},[2896,13096,11695],{},[974,13098,13099],{"align":960},"Width of the internal render target texture",[974,13101,13102],{},[542,13103,11701],{},[955,13105,13106,13110,13113],{},[974,13107,13108],{"align":960},[2896,13109,11708],{},[974,13111,13112],{"align":960},"Height of the internal render target texture",[974,13114,13115],{},[542,13116,11701],{},[955,13118,13119,13123,13126],{},[974,13120,13121],{"align":960},[2896,13122,11720],{},[974,13124,13125],{"align":960},"Clip bias for the virtual camera projection",[974,13127,13128],{},[542,13129,1139],{},[955,13131,13132,13136,13139],{},[974,13133,13134],{"align":960},[2896,13135,11732],{},[974,13137,13138],{"align":960},"Number of MSAA samples for the render target",[974,13140,13141],{},[542,13142,1936],{},[955,13144,13145,13149,13152],{},[974,13146,13147],{"align":960},[2896,13148,11744],{},[974,13150,13151],{"align":960},"Custom shader object to override the built-in shader",[974,13153,13154],{},[542,13155,13156],{},"Refractor.RefractorShader",[825,13158,13159],{},[504,13160,13161,13162,13164],{},"All the props except ",[542,13163,2684],{}," are not reactive",[568,13166,13168],{"id":13167},"custom-refraction-effect","Custom refraction effect",[504,13170,11765,13171,1715,13173,7123,13175,11775],{},[542,13172,11768],{},[542,13174,11771],{},[542,13176,11774],{},[572,13178,13180],{"className":574,"code":13179,"language":582,"meta":512,"style":512},"\u003Cscript setup lang=\"ts\">\nimport { Refractor } from '@tresjs\u002Fcientos'\nimport { useLoop } from '@tresjs\u002Fcore'\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: \u002F* glsl *\u002F`\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: \u002F* glsl *\u002F`\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\u002Fscript>\n\n\u003Ctemplate>\n \u003CRefractor\n ref=\"refractorRef\"\n color=\"#9ec8d4\"\n :shader=\"customShader\"\n >\n \u003CTresPlaneGeometry :args=\"[8, 5]\" \u002F>\n \u003C\u002FRefractor>\n\u003C\u002Ftemplate>\n",[542,13181,13182,13202,13220,13238,13256,13260,13273,13277,13287,13295,13311,13327,13343,13359,13363,13373,13377,13381,13385,13389,13393,13397,13401,13409,13419,13423,13427,13431,13435,13439,13443,13447,13451,13455,13459,13463,13467,13471,13475,13479,13483,13487,13491,13495,13499,13507,13511,13515,13531,13547,13574,13606,13612,13620,13624,13632,13639,13652,13664,13678,13682,13710,13718],{"__ignoreMap":512},[586,13183,13184,13186,13188,13190,13192,13194,13196,13198,13200],{"class":588,"line":513},[586,13185,592],{"class":591},[586,13187,596],{"class":595},[586,13189,600],{"class":599},[586,13191,603],{"class":599},[586,13193,606],{"class":591},[586,13195,609],{"class":591},[586,13197,613],{"class":612},[586,13199,609],{"class":591},[586,13201,618],{"class":591},[586,13203,13204,13206,13208,13210,13212,13214,13216,13218],{"class":588,"line":514},[586,13205,626],{"class":625},[586,13207,629],{"class":591},[586,13209,12809],{"class":632},[586,13211,636],{"class":591},[586,13213,639],{"class":625},[586,13215,642],{"class":591},[586,13217,645],{"class":612},[586,13219,648],{"class":591},[586,13221,13222,13224,13226,13228,13230,13232,13234,13236],{"class":588,"line":651},[586,13223,626],{"class":625},[586,13225,629],{"class":591},[586,13227,11827],{"class":632},[586,13229,636],{"class":591},[586,13231,639],{"class":625},[586,13233,642],{"class":591},[586,13235,2172],{"class":612},[586,13237,648],{"class":591},[586,13239,13240,13242,13244,13246,13248,13250,13252,13254],{"class":588,"line":657},[586,13241,626],{"class":625},[586,13243,629],{"class":591},[586,13245,2202],{"class":632},[586,13247,636],{"class":591},[586,13249,639],{"class":625},[586,13251,642],{"class":591},[586,13253,582],{"class":612},[586,13255,648],{"class":591},[586,13257,13258],{"class":588,"line":686},[586,13259,654],{"emptyLinePlaceholder":520},[586,13261,13262,13264,13267,13269,13271],{"class":588,"line":696},[586,13263,660],{"class":599},[586,13265,13266],{"class":632}," refractorRef ",[586,13268,606],{"class":591},[586,13270,2202],{"class":668},[586,13272,7324],{"class":632},[586,13274,13275],{"class":588,"line":701},[586,13276,654],{"emptyLinePlaceholder":520},[586,13278,13279,13281,13283,13285],{"class":588,"line":711},[586,13280,660],{"class":599},[586,13282,11883],{"class":632},[586,13284,606],{"class":591},[586,13286,2322],{"class":591},[586,13288,13289,13291,13293],{"class":588,"line":722},[586,13290,11892],{"class":595},[586,13292,2313],{"class":591},[586,13294,2322],{"class":591},[586,13296,13297,13299,13301,13303,13305,13307,13309],{"class":588,"line":577},[586,13298,11901],{"class":595},[586,13300,2313],{"class":591},[586,13302,629],{"class":591},[586,13304,11908],{"class":595},[586,13306,2313],{"class":591},[586,13308,2247],{"class":591},[586,13310,5427],{"class":591},[586,13312,13313,13315,13317,13319,13321,13323,13325],{"class":588,"line":578},[586,13314,11919],{"class":595},[586,13316,2313],{"class":591},[586,13318,629],{"class":591},[586,13320,11908],{"class":595},[586,13322,2313],{"class":591},[586,13324,2247],{"class":591},[586,13326,5427],{"class":591},[586,13328,13329,13331,13333,13335,13337,13339,13341],{"class":588,"line":579},[586,13330,11936],{"class":595},[586,13332,2313],{"class":591},[586,13334,629],{"class":591},[586,13336,11908],{"class":595},[586,13338,2313],{"class":591},[586,13340,2247],{"class":591},[586,13342,5427],{"class":591},[586,13344,13345,13347,13349,13351,13353,13355,13357],{"class":588,"line":580},[586,13346,11953],{"class":595},[586,13348,2313],{"class":591},[586,13350,629],{"class":591},[586,13352,11908],{"class":595},[586,13354,2313],{"class":591},[586,13356,7262],{"class":1712},[586,13358,5427],{"class":591},[586,13360,13361],{"class":588,"line":581},[586,13362,3151],{"class":591},[586,13364,13365,13367,13369,13371],{"class":588,"line":797},[586,13366,11974],{"class":595},[586,13368,2313],{"class":591},[586,13370,11979],{"class":10444},[586,13372,11982],{"class":591},[586,13374,13375],{"class":588,"line":807},[586,13376,11987],{"class":612},[586,13378,13379],{"class":588,"line":817},[586,13380,11992],{"class":612},[586,13382,13383],{"class":588,"line":1910},[586,13384,11997],{"class":612},[586,13386,13387],{"class":588,"line":1945},[586,13388,12002],{"class":612},[586,13390,13391],{"class":588,"line":1954},[586,13392,12007],{"class":612},[586,13394,13395],{"class":588,"line":2513},[586,13396,12012],{"class":612},[586,13398,13399],{"class":588,"line":2518},[586,13400,12017],{"class":612},[586,13402,13403,13405,13407],{"class":588,"line":2102},[586,13404,12022],{"class":612},[586,13406,12025],{"class":591},[586,13408,3097],{"class":591},[586,13410,13411,13413,13415,13417],{"class":588,"line":2103},[586,13412,12032],{"class":595},[586,13414,2313],{"class":591},[586,13416,11979],{"class":10444},[586,13418,11982],{"class":591},[586,13420,13421],{"class":588,"line":2104},[586,13422,12043],{"class":612},[586,13424,13425],{"class":588,"line":2105},[586,13426,12048],{"class":612},[586,13428,13429],{"class":588,"line":2617},[586,13430,12053],{"class":612},[586,13432,13433],{"class":588,"line":2623},[586,13434,11992],{"class":612},[586,13436,13437],{"class":588,"line":2632},[586,13438,11997],{"class":612},[586,13440,13441],{"class":588,"line":2666},[586,13442,12066],{"class":612},[586,13444,13445],{"class":588,"line":2671},[586,13446,12071],{"class":612},[586,13448,13449],{"class":588,"line":2679},[586,13450,12076],{"class":612},[586,13452,13453],{"class":588,"line":2696},[586,13454,12081],{"class":612},[586,13456,13457],{"class":588,"line":2726},[586,13458,12086],{"class":612},[586,13460,13461],{"class":588,"line":2731},[586,13462,12076],{"class":612},[586,13464,13465],{"class":588,"line":2740},[586,13466,12002],{"class":612},[586,13468,13469],{"class":588,"line":2745},[586,13470,12099],{"class":612},[586,13472,13473],{"class":588,"line":2753},[586,13474,12104],{"class":612},[586,13476,13477],{"class":588,"line":2766},[586,13478,12109],{"class":612},[586,13480,13481],{"class":588,"line":2794},[586,13482,12114],{"class":612},[586,13484,13485],{"class":588,"line":2800},[586,13486,12119],{"class":612},[586,13488,13489],{"class":588,"line":2840},[586,13490,12124],{"class":612},[586,13492,13493],{"class":588,"line":2850},[586,13494,12129],{"class":612},[586,13496,13497],{"class":588,"line":2859},[586,13498,12134],{"class":612},[586,13500,13501,13503,13505],{"class":588,"line":2868},[586,13502,12022],{"class":612},[586,13504,12025],{"class":591},[586,13506,3097],{"class":591},[586,13508,13509],{"class":588,"line":5654},[586,13510,2414],{"class":591},[586,13512,13513],{"class":588,"line":5663},[586,13514,654],{"emptyLinePlaceholder":520},[586,13516,13517,13519,13521,13523,13525,13527,13529],{"class":588,"line":5668},[586,13518,660],{"class":599},[586,13520,629],{"class":591},[586,13522,12159],{"class":632},[586,13524,3157],{"class":591},[586,13526,2375],{"class":591},[586,13528,11827],{"class":668},[586,13530,7324],{"class":632},[586,13532,13533,13535,13537,13539,13541,13543,13545],{"class":588,"line":5676},[586,13534,12172],{"class":668},[586,13536,672],{"class":632},[586,13538,2299],{"class":591},[586,13540,2303],{"class":2302},[586,13542,2319],{"class":591},[586,13544,7572],{"class":599},[586,13546,2322],{"class":591},[586,13548,13549,13551,13553,13555,13558,13560,13562,13564,13566,13568,13570,13572],{"class":588,"line":5704},[586,13550,7579],{"class":599},[586,13552,12191],{"class":632},[586,13554,2375],{"class":591},[586,13556,13557],{"class":632}," refractorRef",[586,13559,835],{"class":591},[586,13561,2341],{"class":632},[586,13563,2710],{"class":591},[586,13565,2713],{"class":632},[586,13567,2710],{"class":591},[586,13569,6359],{"class":632},[586,13571,2710],{"class":591},[586,13573,12213],{"class":632},[586,13575,13576,13578,13580,13582,13584,13586,13588,13590,13592,13594,13596,13598,13600,13602,13604],{"class":588,"line":5728},[586,13577,2327],{"class":625},[586,13579,2330],{"class":595},[586,13581,11768],{"class":632},[586,13583,2710],{"class":591},[586,13585,12226],{"class":632},[586,13587,2344],{"class":595},[586,13589,2347],{"class":591},[586,13591,12191],{"class":632},[586,13593,835],{"class":591},[586,13595,12226],{"class":632},[586,13597,835],{"class":591},[586,13599,2341],{"class":632},[586,13601,2375],{"class":591},[586,13603,2303],{"class":632},[586,13605,2353],{"class":591},[586,13607,13608,13610],{"class":588,"line":5744},[586,13609,3157],{"class":591},[586,13611,683],{"class":632},[586,13613,13614,13616,13618],{"class":588,"line":5761},[586,13615,689],{"class":591},[586,13617,596],{"class":595},[586,13619,618],{"class":591},[586,13621,13622],{"class":588,"line":5777},[586,13623,654],{"emptyLinePlaceholder":520},[586,13625,13626,13628,13630],{"class":588,"line":5803},[586,13627,592],{"class":591},[586,13629,706],{"class":595},[586,13631,618],{"class":591},[586,13633,13634,13636],{"class":588,"line":5808},[586,13635,714],{"class":591},[586,13637,13638],{"class":595},"Refractor\n",[586,13640,13641,13643,13645,13647,13650],{"class":588,"line":5866},[586,13642,12283],{"class":599},[586,13644,606],{"class":591},[586,13646,609],{"class":591},[586,13648,13649],{"class":612},"refractorRef",[586,13651,755],{"class":591},[586,13653,13654,13656,13658,13660,13662],{"class":588,"line":5901},[586,13655,11901],{"class":599},[586,13657,606],{"class":591},[586,13659,609],{"class":591},[586,13661,12996],{"class":612},[586,13663,755],{"class":591},[586,13665,13666,13668,13670,13672,13674,13676],{"class":588,"line":5910},[586,13667,12297],{"class":591},[586,13669,11744],{"class":599},[586,13671,606],{"class":591},[586,13673,609],{"class":591},[586,13675,12368],{"class":632},[586,13677,755],{"class":591},[586,13679,13680],{"class":588,"line":5920},[586,13681,4899],{"class":591},[586,13683,13684,13686,13688,13690,13692,13694,13696,13698,13700,13702,13704,13706,13708],{"class":588,"line":5930},[586,13685,725],{"class":591},[586,13687,3531],{"class":595},[586,13689,1699],{"class":591},[586,13691,1803],{"class":599},[586,13693,606],{"class":591},[586,13695,609],{"class":591},[586,13697,1709],{"class":591},[586,13699,12878],{"class":1712},[586,13701,1715],{"class":591},[586,13703,1723],{"class":1712},[586,13705,1726],{"class":591},[586,13707,609],{"class":591},[586,13709,1731],{"class":591},[586,13711,13712,13714,13716],{"class":588,"line":5000},[586,13713,810],{"class":591},[586,13715,457],{"class":595},[586,13717,618],{"class":591},[586,13719,13720,13722,13724],{"class":588,"line":5001},[586,13721,689],{"class":591},[586,13723,706],{"class":595},[586,13725,618],{"class":591},[504,13727,13728],{},"The Refractor shader uses the following configuration by default:",[913,13730,12428],{"id":12427},[572,13732,13734],{"className":12431,"code":13733,"language":12433,"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: \u002F* glsl *\u002F`\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: \u002F* glsl *\u002F`\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,13735,13736,13746,13754,13762,13770,13774,13782,13790,13794,13802,13810,13814,13818,13828,13832,13836,13840,13844,13849,13854,13862,13872,13876,13880,13884,13888,13893,13898,13902,13906,13911,13916,13920,13924,13928,13933,13938,13942,13946,13950,13956],{"__ignoreMap":512},[586,13737,13738,13740,13742,13744],{"class":588,"line":513},[586,13739,660],{"class":599},[586,13741,12442],{"class":632},[586,13743,606],{"class":591},[586,13745,2322],{"class":591},[586,13747,13748,13750,13752],{"class":588,"line":514},[586,13749,11892],{"class":595},[586,13751,2313],{"class":591},[586,13753,2322],{"class":591},[586,13755,13756,13758,13760],{"class":588,"line":651},[586,13757,11901],{"class":595},[586,13759,2313],{"class":591},[586,13761,2322],{"class":591},[586,13763,13764,13766,13768],{"class":588,"line":657},[586,13765,12483],{"class":595},[586,13767,2313],{"class":591},[586,13769,12488],{"class":591},[586,13771,13772],{"class":588,"line":686},[586,13773,12493],{"class":591},[586,13775,13776,13778,13780],{"class":588,"line":696},[586,13777,11919],{"class":595},[586,13779,2313],{"class":591},[586,13781,2322],{"class":591},[586,13783,13784,13786,13788],{"class":588,"line":701},[586,13785,12483],{"class":595},[586,13787,2313],{"class":591},[586,13789,12488],{"class":591},[586,13791,13792],{"class":588,"line":711},[586,13793,12493],{"class":591},[586,13795,13796,13798,13800],{"class":588,"line":722},[586,13797,11936],{"class":595},[586,13799,2313],{"class":591},[586,13801,2322],{"class":591},[586,13803,13804,13806,13808],{"class":588,"line":577},[586,13805,12483],{"class":595},[586,13807,2313],{"class":591},[586,13809,12488],{"class":591},[586,13811,13812],{"class":588,"line":578},[586,13813,12076],{"class":591},[586,13815,13816],{"class":588,"line":579},[586,13817,3151],{"class":591},[586,13819,13820,13822,13824,13826],{"class":588,"line":580},[586,13821,11974],{"class":595},[586,13823,2313],{"class":591},[586,13825,11979],{"class":10444},[586,13827,11982],{"class":591},[586,13829,13830],{"class":588,"line":581},[586,13831,11987],{"class":612},[586,13833,13834],{"class":588,"line":797},[586,13835,11992],{"class":612},[586,13837,13838],{"class":588,"line":807},[586,13839,654],{"emptyLinePlaceholder":520},[586,13841,13842],{"class":588,"line":817},[586,13843,12002],{"class":612},[586,13845,13846],{"class":588,"line":1910},[586,13847,13848],{"class":612}," vUv = textureMatrix * vec4( position, 1.0 );\n",[586,13850,13851],{"class":588,"line":1945},[586,13852,13853],{"class":612}," gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n",[586,13855,13856,13858,13860],{"class":588,"line":1954},[586,13857,12022],{"class":612},[586,13859,12025],{"class":591},[586,13861,3097],{"class":591},[586,13863,13864,13866,13868,13870],{"class":588,"line":2513},[586,13865,12032],{"class":595},[586,13867,2313],{"class":591},[586,13869,11979],{"class":10444},[586,13871,11982],{"class":591},[586,13873,13874],{"class":588,"line":2518},[586,13875,12043],{"class":612},[586,13877,13878],{"class":588,"line":2102},[586,13879,12048],{"class":612},[586,13881,13882],{"class":588,"line":2103},[586,13883,11992],{"class":612},[586,13885,13886],{"class":588,"line":2104},[586,13887,654],{"emptyLinePlaceholder":520},[586,13889,13890],{"class":588,"line":2105},[586,13891,13892],{"class":612}," float blendOverlay( float base, float blend ) {\n",[586,13894,13895],{"class":588,"line":2617},[586,13896,13897],{"class":612}," return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n",[586,13899,13900],{"class":588,"line":2623},[586,13901,12076],{"class":612},[586,13903,13904],{"class":588,"line":2632},[586,13905,654],{"emptyLinePlaceholder":520},[586,13907,13908],{"class":588,"line":2666},[586,13909,13910],{"class":612}," vec3 blendOverlay( vec3 base, vec3 blend ) {\n",[586,13912,13913],{"class":588,"line":2671},[586,13914,13915],{"class":612}," return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n",[586,13917,13918],{"class":588,"line":2679},[586,13919,12076],{"class":612},[586,13921,13922],{"class":588,"line":2696},[586,13923,654],{"emptyLinePlaceholder":520},[586,13925,13926],{"class":588,"line":2726},[586,13927,12002],{"class":612},[586,13929,13930],{"class":588,"line":2731},[586,13931,13932],{"class":612}," vec4 base = texture2DProj( tDiffuse, vUv );\n",[586,13934,13935],{"class":588,"line":2740},[586,13936,13937],{"class":612}," gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n",[586,13939,13940],{"class":588,"line":2745},[586,13941,654],{"emptyLinePlaceholder":520},[586,13943,13944],{"class":588,"line":2753},[586,13945,12129],{"class":612},[586,13947,13948],{"class":588,"line":2766},[586,13949,12134],{"class":612},[586,13951,13952,13954],{"class":588,"line":2794},[586,13953,12022],{"class":612},[586,13955,11982],{"class":591},[586,13957,13958],{"class":588,"line":2800},[586,13959,2414],{"class":591},[1560,13961,13962],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .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 .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":13964},[13965,13966,13967],{"id":570,"depth":514,"text":15},{"id":946,"depth":514,"text":947},{"id":13167,"depth":514,"text":13168,"children":13968},[13969],{"id":12427,"depth":651,"text":12428},"Create real-time refractive (glass-like) surfaces in your scene.",{},{"title":457,"description":13970},"0S_zvDpr4VfCZrIb3n88oUTHkrLHsw7pJnIv_3ITHzM",{"id":13975,"title":461,"body":13976,"description":14521,"extension":517,"links":518,"meta":14522,"navigation":520,"path":462,"seo":14523,"stem":463,"__hash__":14524},"docs\u002F2.api\u002F9.objects\u002Ftext-3d.md",{"type":501,"value":13977,"toc":14517},[13978,13983,13995,13997,14016,14124,14140,14233,14236,14355,14357,14514],[534,13979,13980],{},[13981,13982],"objects-text",{},[504,13984,13985,13988,13989,13994],{},[542,13986,13987],{},"\u003CText3D \u002F>"," is a component that renders text in 3D. It is a wrapper around the ",[547,13990,13993],{"href":13991,"rel":13992},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#api\u002Fen\u002Fgeometries\u002FTextGeometry",[551],"TextGeometry"," class.",[568,13996,15],{"id":570},[504,13998,13999,14000,14002,14003,14006,14007,14010,14011],{},"To use the ",[542,14001,13987],{}," component you need to pass the ",[542,14004,14005],{},"font"," prop with the URL of the font JSON file you want to use. TextGeometry uses ",[542,14008,14009],{},"typeface",".json generated fonts, you can generate yours ",[547,14012,14015],{"href":14013,"rel":14014},"http:\u002F\u002Fgero3.github.io\u002Ffacetype.js\u002F",[551],"here",[572,14017,14019],{"className":574,"code":14018,"language":582,"meta":512,"style":512},"\u003Ctemplate>\n \u003CTresCanvas>\n \u003CSuspense>\n \u003CText3D\n text=\"TresJS\"\n font=\"\u002Ffonts\u002FFiraCodeRegular.json\"\n >\n \u003CTresMeshNormalMaterial \u002F>\n \u003C\u002FText3D>\n \u003C\u002FSuspense>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[542,14020,14021,14029,14037,14045,14052,14066,14080,14084,14092,14100,14108,14116],{"__ignoreMap":512},[586,14022,14023,14025,14027],{"class":588,"line":513},[586,14024,592],{"class":591},[586,14026,706],{"class":595},[586,14028,618],{"class":591},[586,14030,14031,14033,14035],{"class":588,"line":514},[586,14032,714],{"class":591},[586,14034,717],{"class":595},[586,14036,618],{"class":591},[586,14038,14039,14041,14043],{"class":588,"line":651},[586,14040,725],{"class":591},[586,14042,728],{"class":595},[586,14044,618],{"class":591},[586,14046,14047,14049],{"class":588,"line":657},[586,14048,736],{"class":591},[586,14050,14051],{"class":595},"Text3D\n",[586,14053,14054,14057,14059,14061,14064],{"class":588,"line":686},[586,14055,14056],{"class":599}," text",[586,14058,606],{"class":591},[586,14060,609],{"class":591},[586,14062,14063],{"class":612},"TresJS",[586,14065,755],{"class":591},[586,14067,14068,14071,14073,14075,14078],{"class":588,"line":696},[586,14069,14070],{"class":599}," font",[586,14072,606],{"class":591},[586,14074,609],{"class":591},[586,14076,14077],{"class":612},"\u002Ffonts\u002FFiraCodeRegular.json",[586,14079,755],{"class":591},[586,14081,14082],{"class":588,"line":701},[586,14083,4142],{"class":591},[586,14085,14086,14088,14090],{"class":588,"line":711},[586,14087,1795],{"class":591},[586,14089,2845],{"class":595},[586,14091,1731],{"class":591},[586,14093,14094,14096,14098],{"class":588,"line":722},[586,14095,1867],{"class":591},[586,14097,461],{"class":595},[586,14099,618],{"class":591},[586,14101,14102,14104,14106],{"class":588,"line":577},[586,14103,800],{"class":591},[586,14105,728],{"class":595},[586,14107,618],{"class":591},[586,14109,14110,14112,14114],{"class":588,"line":578},[586,14111,810],{"class":591},[586,14113,717],{"class":595},[586,14115,618],{"class":591},[586,14117,14118,14120,14122],{"class":588,"line":579},[586,14119,689],{"class":591},[586,14121,706],{"class":595},[586,14123,618],{"class":591},[504,14125,14126,14127,14130,14131,14133,14134,14136,14137,14139],{},"Notice that you need to pass the ",[542,14128,14129],{},"\u003CTresMeshNormalMaterial \u002F>"," component as a child of the ",[542,14132,13987],{}," component. This is because ",[542,14135,13987],{}," is a ",[542,14138,4744],{}," 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,14141,14143],{"className":574,"code":14142,"language":582,"meta":512,"style":512},"\u003Ctemplate>\n \u003CTresCanvas>\n \u003CSuspense>\n \u003CText3D font=\"\u002Ffonts\u002FFiraCodeRegular.json\">\n TresJS\n \u003CTresMeshNormalMaterial \u002F>\n \u003C\u002FText3D>\n \u003C\u002FSuspense>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[542,14144,14145,14153,14161,14169,14188,14193,14201,14209,14217,14225],{"__ignoreMap":512},[586,14146,14147,14149,14151],{"class":588,"line":513},[586,14148,592],{"class":591},[586,14150,706],{"class":595},[586,14152,618],{"class":591},[586,14154,14155,14157,14159],{"class":588,"line":514},[586,14156,714],{"class":591},[586,14158,717],{"class":595},[586,14160,618],{"class":591},[586,14162,14163,14165,14167],{"class":588,"line":651},[586,14164,725],{"class":591},[586,14166,728],{"class":595},[586,14168,618],{"class":591},[586,14170,14171,14173,14175,14178,14180,14182,14184,14186],{"class":588,"line":657},[586,14172,736],{"class":591},[586,14174,461],{"class":595},[586,14176,14177],{"class":599}," font",[586,14179,606],{"class":591},[586,14181,609],{"class":591},[586,14183,14077],{"class":612},[586,14185,609],{"class":591},[586,14187,618],{"class":591},[586,14189,14190],{"class":588,"line":686},[586,14191,14192],{"class":632}," TresJS\n",[586,14194,14195,14197,14199],{"class":588,"line":696},[586,14196,1795],{"class":591},[586,14198,2845],{"class":595},[586,14200,1731],{"class":591},[586,14202,14203,14205,14207],{"class":588,"line":701},[586,14204,1867],{"class":591},[586,14206,461],{"class":595},[586,14208,618],{"class":591},[586,14210,14211,14213,14215],{"class":588,"line":711},[586,14212,800],{"class":591},[586,14214,728],{"class":595},[586,14216,618],{"class":591},[586,14218,14219,14221,14223],{"class":588,"line":722},[586,14220,810],{"class":591},[586,14222,717],{"class":595},[586,14224,618],{"class":591},[586,14226,14227,14229,14231],{"class":588,"line":577},[586,14228,689],{"class":591},[586,14230,706],{"class":595},[586,14232,618],{"class":591},[504,14234,14235],{},"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,14237,14239],{"className":574,"code":14238,"language":582,"meta":512,"style":512},"\u003Ctemplate>\n \u003Cinput v-model=\"myReactiveText\" \u002F>\n \u003CTresCanvas>\n \u003CSuspense>\n \u003CText3D\n :text=\"myReactiveText\"\n font=\"\u002Ffonts\u002FFiraCodeRegular.json\"\n center\n need-updates\n \u002F>\n \u003C\u002FSuspense>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[542,14240,14241,14249,14270,14278,14286,14292,14306,14318,14322,14327,14331,14339,14347],{"__ignoreMap":512},[586,14242,14243,14245,14247],{"class":588,"line":513},[586,14244,592],{"class":591},[586,14246,706],{"class":595},[586,14248,618],{"class":591},[586,14250,14251,14253,14256,14259,14261,14263,14266,14268],{"class":588,"line":514},[586,14252,714],{"class":591},[586,14254,14255],{"class":595},"input",[586,14257,14258],{"class":599}," v-model",[586,14260,606],{"class":591},[586,14262,609],{"class":591},[586,14264,14265],{"class":612},"myReactiveText",[586,14267,609],{"class":591},[586,14269,1731],{"class":591},[586,14271,14272,14274,14276],{"class":588,"line":651},[586,14273,714],{"class":591},[586,14275,717],{"class":595},[586,14277,618],{"class":591},[586,14279,14280,14282,14284],{"class":588,"line":657},[586,14281,725],{"class":591},[586,14283,728],{"class":595},[586,14285,618],{"class":591},[586,14287,14288,14290],{"class":588,"line":686},[586,14289,736],{"class":591},[586,14291,14051],{"class":595},[586,14293,14294,14296,14298,14300,14302,14304],{"class":588,"line":696},[586,14295,776],{"class":591},[586,14297,1512],{"class":599},[586,14299,606],{"class":591},[586,14301,609],{"class":591},[586,14303,14265],{"class":632},[586,14305,755],{"class":591},[586,14307,14308,14310,14312,14314,14316],{"class":588,"line":701},[586,14309,14070],{"class":599},[586,14311,606],{"class":591},[586,14313,609],{"class":591},[586,14315,14077],{"class":612},[586,14317,755],{"class":591},[586,14319,14320],{"class":588,"line":711},[586,14321,4058],{"class":599},[586,14323,14324],{"class":588,"line":722},[586,14325,14326],{"class":599}," need-updates\n",[586,14328,14329],{"class":588,"line":577},[586,14330,794],{"class":591},[586,14332,14333,14335,14337],{"class":588,"line":578},[586,14334,800],{"class":591},[586,14336,728],{"class":595},[586,14338,618],{"class":591},[586,14340,14341,14343,14345],{"class":588,"line":579},[586,14342,810],{"class":591},[586,14344,717],{"class":595},[586,14346,618],{"class":591},[586,14348,14349,14351,14353],{"class":588,"line":580},[586,14350,689],{"class":591},[586,14352,706],{"class":595},[586,14354,618],{"class":591},[568,14356,947],{"id":946},[949,14358,14359,14369],{},[952,14360,14361],{},[955,14362,14363,14365,14367],{},[958,14364,1971],{"align":960},[958,14366,964],{"align":960},[958,14368,967],{},[969,14370,14371,14382,14393,14405,14417,14429,14441,14454,14467,14479,14491,14502],{},[955,14372,14373,14377,14380],{},[974,14374,14375],{"align":960},[2896,14376,14005],{},[974,14378,14379],{"align":960},"The font data or font name to use for the text.",[974,14381],{},[955,14383,14384,14388,14391],{},[974,14385,14386],{"align":960},[2896,14387,1512],{},[974,14389,14390],{"align":960},"The text to display.",[974,14392],{},[955,14394,14395,14400,14403],{},[974,14396,14397],{"align":960},[2896,14398,14399],{},"size",[974,14401,14402],{"align":960},"The size of the text.",[974,14404,1903],{},[955,14406,14407,14411,14414],{},[974,14408,14409],{"align":960},[2896,14410,2917],{},[974,14412,14413],{"align":960},"The height of the text.",[974,14415,14416],{},"0.2",[955,14418,14419,14424,14427],{},[974,14420,14421],{"align":960},[2896,14422,14423],{},"curveSegments",[974,14425,14426],{"align":960},"The number of curve segments to use when generating the text geometry.",[974,14428,1723],{},[955,14430,14431,14436,14439],{},[974,14432,14433],{"align":960},[2896,14434,14435],{},"bevelEnabled",[974,14437,14438],{"align":960},"A flag indicating whether beveling should be enabled for the text.",[974,14440,1115],{},[955,14442,14443,14448,14451],{},[974,14444,14445],{"align":960},[2896,14446,14447],{},"bevelThickness",[974,14449,14450],{"align":960},"The thickness of the beveled edge on the text.",[974,14452,14453],{},"0.05",[955,14455,14456,14461,14464],{},[974,14457,14458],{"align":960},[2896,14459,14460],{},"bevelSize",[974,14462,14463],{"align":960},"The size of the beveled edge on the text.",[974,14465,14466],{},"0.02",[955,14468,14469,14474,14477],{},[974,14470,14471],{"align":960},[2896,14472,14473],{},"bevelOffset",[974,14475,14476],{"align":960},"The offset of the beveled edge on the text.",[974,14478,1139],{},[955,14480,14481,14486,14489],{},[974,14482,14483],{"align":960},[2896,14484,14485],{},"bevelSegments",[974,14487,14488],{"align":960},"The number of bevel segments to use when generating the text geometry.",[974,14490,1936],{},[955,14492,14493,14497,14500],{},[974,14494,14495],{"align":960},[2896,14496,1220],{},[974,14498,14499],{"align":960},"To center the text",[974,14501,1154],{},[955,14503,14504,14509,14512],{},[974,14505,14506],{"align":960},[2896,14507,14508],{},"needUpdates",[974,14510,14511],{"align":960},"This props add reactivity",[974,14513,1154],{},[1560,14515,14516],{},"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":14518},[14519,14520],{"id":570,"depth":514,"text":15},{"id":946,"depth":514,"text":947},"Render text in 3D using TextGeometry.",{},{"title":461,"description":14521},"rgS8k9FiKuZ8-M_ZsYlXXXkyBY7nAGEzt1AefjUv4W0",1791549577420]