[{"data":1,"prerenderedAt":5497},["ShallowReactive",2],{"navigation":3,"\u002Fapi\u002Fmaterials":498,"\u002Fapi\u002Fmaterials-surround":519,"material-list":524},[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":169,"body":500,"description":512,"extension":513,"links":514,"meta":515,"navigation":516,"path":170,"seo":517,"stem":171,"__hash__":518},"docs\u002F2.api\u002F4.materials\u002Findex.md",{"type":501,"value":502,"toc":507},"minimark",[503],[504,505],"api-list",{"list-name":506},"material-list",{"title":508,"searchDepth":509,"depth":510,"links":511},"",1,2,[],"All materials","md",null,{},true,{"title":169,"description":512},"BesZhb4Nwt5wfIqWwZZLh5Sit7_8paFEbEBzuTW5QQU",[520,522],{"title":165,"path":166,"stem":167,"description":521,"children":-1},"A composable to load video textures in TresJS scenes.",{"title":175,"path":176,"stem":177,"description":523,"children":-1},"Extends Three.js' material library with your own Vertex and Fragment shaders.",[525,1131,1801,2289,2461,3156,3997,4811,5134],{"id":526,"title":175,"body":527,"description":523,"extension":513,"links":514,"meta":1128,"navigation":516,"path":176,"seo":1129,"stem":177,"__hash__":1130},"docs\u002F2.api\u002F4.materials\u002Fcustom-shader-material.md",{"type":501,"value":528,"toc":1124},[529,535,563,567,1102,1106,1120],[530,531,532],"scene-wrapper",{},[533,534],"materials-custom-shader-material",{},[536,537,538,539,543,544,547,548,557,558,562],"p",{},"The ",[540,541,542],"code",{},"cientos"," package provides ",[540,545,546],{},"\u003CTresCustomShaderMaterial \u002F>"," component which is a wrapper around the ",[549,550,554],"a",{"href":551,"rel":552},"https:\u002F\u002Fgithub.com\u002FFarazzShaikh\u002FTHREE-CustomShaderMaterial",[553],"nofollow",[540,555,556],{},"three-custom-shader-material"," class. As states in the repo, it ",[559,560,561],"em",{},"\"lets you extend Three.js' material library with your own Vertex and Fragment shaders\"",".",[564,565,15],"h2",{"id":566},"usage",[568,569,589],"pre",{"className":570,"code":571,"highlights":572,"language":588,"meta":508,"style":508},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { TresCustomShaderMaterial } from '@tresjs\u002Fcientos'\nimport { shallowRef } from 'vue'\n\nconst customShaderMaterialRef = shallowRef()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" \u002F>\n    \u003CTresMesh>\n      \u003CTresBoxGeometry \u002F>\n      \u003CTresCustomShaderMaterial\n        ref=\"customShaderMaterialRef\"\n        :vertex-shader=\"vertexShader\"\n        :fragment-shader=\"fragmentShader\"\n        :uniforms=\"{\n          u_time: { value: 0 },\n          u_color: { value: new THREE.Color(0.2, 0.0, 0.1) },\n          u_resolution: { value: new THREE.Vector2() }\n        }\"\n        :transparent=\"true\"\n        :side=\"THREE.DoubleSide\"\n        base-material=\"MeshLambertMaterial\"\n        silent\n        :map=\"texture\"\n        :color=\"0xff0000\"\n      \u002F>\n    \u003C\u002FTresMesh>\n    \u003CTresAmbientLight \u002F>\n  \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[510,573,574,575,576,577,578,579,580,581,582,583,584,585,586,587],13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,"vue",[540,590,591,625,655,675,681,698,708,713,723,734,777,787,798,806,822,840,857,872,893,933,955,963,981,1002,1017,1023,1040,1057,1063,1073,1083,1093],{"__ignoreMap":508},[592,593,595,599,603,607,610,613,616,620,622],"span",{"class":594,"line":509},"line",[592,596,598],{"class":597},"sMK4o","\u003C",[592,600,602],{"class":601},"swJcz","script",[592,604,606],{"class":605},"spNyl"," setup",[592,608,609],{"class":605}," lang",[592,611,612],{"class":597},"=",[592,614,615],{"class":597},"\"",[592,617,619],{"class":618},"sfazB","ts",[592,621,615],{"class":597},[592,623,624],{"class":597},">\n",[592,626,629,633,636,640,643,646,649,652],{"class":627,"line":510},[594,628],"highlight",[592,630,632],{"class":631},"s7zQu","import",[592,634,635],{"class":597}," {",[592,637,639],{"class":638},"sTEyZ"," TresCustomShaderMaterial",[592,641,642],{"class":597}," }",[592,644,645],{"class":631}," from",[592,647,648],{"class":597}," '",[592,650,651],{"class":618},"@tresjs\u002Fcientos",[592,653,654],{"class":597},"'\n",[592,656,658,660,662,665,667,669,671,673],{"class":594,"line":657},3,[592,659,632],{"class":631},[592,661,635],{"class":597},[592,663,664],{"class":638}," shallowRef",[592,666,642],{"class":597},[592,668,645],{"class":631},[592,670,648],{"class":597},[592,672,588],{"class":618},[592,674,654],{"class":597},[592,676,678],{"class":594,"line":677},4,[592,679,680],{"emptyLinePlaceholder":516},"\n",[592,682,684,687,690,692,695],{"class":594,"line":683},5,[592,685,686],{"class":605},"const",[592,688,689],{"class":638}," customShaderMaterialRef ",[592,691,612],{"class":597},[592,693,664],{"class":694},"s2Zo4",[592,696,697],{"class":638},"()\n",[592,699,701,704,706],{"class":594,"line":700},6,[592,702,703],{"class":597},"\u003C\u002F",[592,705,602],{"class":601},[592,707,624],{"class":597},[592,709,711],{"class":594,"line":710},7,[592,712,680],{"emptyLinePlaceholder":516},[592,714,716,718,721],{"class":594,"line":715},8,[592,717,598],{"class":597},[592,719,720],{"class":601},"template",[592,722,624],{"class":597},[592,724,726,729,732],{"class":594,"line":725},9,[592,727,728],{"class":597},"  \u003C",[592,730,731],{"class":601},"TresCanvas",[592,733,624],{"class":597},[592,735,737,740,743,746,749,751,753,756,760,763,765,767,769,772,774],{"class":594,"line":736},10,[592,738,739],{"class":597},"    \u003C",[592,741,742],{"class":601},"TresPerspectiveCamera",[592,744,745],{"class":597}," :",[592,747,748],{"class":605},"position",[592,750,612],{"class":597},[592,752,615],{"class":597},[592,754,755],{"class":597},"[",[592,757,759],{"class":758},"sbssI","3",[592,761,762],{"class":597},", ",[592,764,759],{"class":758},[592,766,762],{"class":597},[592,768,759],{"class":758},[592,770,771],{"class":597},"]",[592,773,615],{"class":597},[592,775,776],{"class":597}," \u002F>\n",[592,778,780,782,785],{"class":594,"line":779},11,[592,781,739],{"class":597},[592,783,784],{"class":601},"TresMesh",[592,786,624],{"class":597},[592,788,790,793,796],{"class":594,"line":789},12,[592,791,792],{"class":597},"      \u003C",[592,794,795],{"class":601},"TresBoxGeometry",[592,797,776],{"class":597},[592,799,801,803],{"class":800,"line":573},[594,628],[592,802,792],{"class":597},[592,804,805],{"class":601},"TresCustomShaderMaterial\n",[592,807,809,812,814,816,819],{"class":808,"line":574},[594,628],[592,810,811],{"class":605},"        ref",[592,813,612],{"class":597},[592,815,615],{"class":597},[592,817,818],{"class":618},"customShaderMaterialRef",[592,820,821],{"class":597},"\"\n",[592,823,825,828,831,833,835,838],{"class":824,"line":575},[594,628],[592,826,827],{"class":597},"        :",[592,829,830],{"class":605},"vertex-shader",[592,832,612],{"class":597},[592,834,615],{"class":597},[592,836,837],{"class":638},"vertexShader",[592,839,821],{"class":597},[592,841,843,845,848,850,852,855],{"class":842,"line":576},[594,628],[592,844,827],{"class":597},[592,846,847],{"class":605},"fragment-shader",[592,849,612],{"class":597},[592,851,615],{"class":597},[592,853,854],{"class":638},"fragmentShader",[592,856,821],{"class":597},[592,858,860,862,865,867,869],{"class":859,"line":577},[594,628],[592,861,827],{"class":597},[592,863,864],{"class":605},"uniforms",[592,866,612],{"class":597},[592,868,615],{"class":597},[592,870,871],{"class":597},"{\n",[592,873,875,878,881,884,887,890],{"class":874,"line":578},[594,628],[592,876,877],{"class":601},"          u_time",[592,879,880],{"class":597},": { ",[592,882,883],{"class":601},"value",[592,885,886],{"class":597},": ",[592,888,889],{"class":758},"0",[592,891,892],{"class":597}," },\n",[592,894,896,899,901,903,906,909,911,914,917,920,922,925,927,930],{"class":895,"line":579},[594,628],[592,897,898],{"class":601},"          u_color",[592,900,880],{"class":597},[592,902,883],{"class":601},[592,904,905],{"class":597},": new ",[592,907,908],{"class":638},"THREE",[592,910,562],{"class":597},[592,912,913],{"class":694},"Color",[592,915,916],{"class":597},"(",[592,918,919],{"class":758},"0.2",[592,921,762],{"class":597},[592,923,924],{"class":758},"0.0",[592,926,762],{"class":597},[592,928,929],{"class":758},"0.1",[592,931,932],{"class":597},") },\n",[592,934,936,939,941,943,945,947,949,952],{"class":935,"line":580},[594,628],[592,937,938],{"class":601},"          u_resolution",[592,940,880],{"class":597},[592,942,883],{"class":601},[592,944,905],{"class":597},[592,946,908],{"class":638},[592,948,562],{"class":597},[592,950,951],{"class":694},"Vector2",[592,953,954],{"class":597},"() }\n",[592,956,958,961],{"class":957,"line":581},[594,628],[592,959,960],{"class":597},"        }",[592,962,821],{"class":597},[592,964,966,968,971,973,975,979],{"class":965,"line":582},[594,628],[592,967,827],{"class":597},[592,969,970],{"class":605},"transparent",[592,972,612],{"class":597},[592,974,615],{"class":597},[592,976,978],{"class":977},"sfNiH","true",[592,980,821],{"class":597},[592,982,984,986,989,991,993,995,997,1000],{"class":983,"line":583},[594,628],[592,985,827],{"class":597},[592,987,988],{"class":605},"side",[592,990,612],{"class":597},[592,992,615],{"class":597},[592,994,908],{"class":638},[592,996,562],{"class":597},[592,998,999],{"class":638},"DoubleSide",[592,1001,821],{"class":597},[592,1003,1005,1008,1010,1012,1015],{"class":1004,"line":584},[594,628],[592,1006,1007],{"class":605},"        base-material",[592,1009,612],{"class":597},[592,1011,615],{"class":597},[592,1013,1014],{"class":618},"MeshLambertMaterial",[592,1016,821],{"class":597},[592,1018,1020],{"class":1019,"line":585},[594,628],[592,1021,1022],{"class":605},"        silent\n",[592,1024,1026,1028,1031,1033,1035,1038],{"class":1025,"line":586},[594,628],[592,1027,827],{"class":597},[592,1029,1030],{"class":605},"map",[592,1032,612],{"class":597},[592,1034,615],{"class":597},[592,1036,1037],{"class":638},"texture",[592,1039,821],{"class":597},[592,1041,1043,1045,1048,1050,1052,1055],{"class":1042,"line":587},[594,628],[592,1044,827],{"class":597},[592,1046,1047],{"class":605},"color",[592,1049,612],{"class":597},[592,1051,615],{"class":597},[592,1053,1054],{"class":758},"0xff0000",[592,1056,821],{"class":597},[592,1058,1060],{"class":594,"line":1059},28,[592,1061,1062],{"class":597},"      \u002F>\n",[592,1064,1066,1069,1071],{"class":594,"line":1065},29,[592,1067,1068],{"class":597},"    \u003C\u002F",[592,1070,784],{"class":601},[592,1072,624],{"class":597},[592,1074,1076,1078,1081],{"class":594,"line":1075},30,[592,1077,739],{"class":597},[592,1079,1080],{"class":601},"TresAmbientLight",[592,1082,776],{"class":597},[592,1084,1086,1089,1091],{"class":594,"line":1085},31,[592,1087,1088],{"class":597},"  \u003C\u002F",[592,1090,731],{"class":601},[592,1092,624],{"class":597},[592,1094,1096,1098,1100],{"class":594,"line":1095},32,[592,1097,703],{"class":597},[592,1099,720],{"class":601},[592,1101,624],{"class":597},[564,1103,1105],{"id":1104},"props","Props",[536,1107,1108,1109,1112,1113,1115,1116,562],{},"Being a wrapper around the ",[540,1110,1111],{},"CustomShaderMaterial"," class, the ",[540,1114,546],{}," component accepts all the props that the class does. You can find the full list of props in the ",[549,1117,1119],{"href":551,"rel":1118},[553],"official repo",[1121,1122,1123],"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 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":508,"searchDepth":509,"depth":510,"links":1125},[1126,1127],{"id":566,"depth":510,"text":15},{"id":1104,"depth":510,"text":1105},{},{"title":175,"description":523},"WirW-L7fmUIEqDL1ownbJUS8vqN1Ie6ubq6WxZ9mH-o",{"id":1132,"title":179,"body":1133,"description":1797,"extension":513,"links":514,"meta":1798,"navigation":516,"path":180,"seo":1799,"stem":181,"__hash__":1800},"docs\u002F2.api\u002F4.materials\u002Fglass-material.md",{"type":501,"value":1134,"toc":1788},[1135,1140,1152,1154,1159,1404,1406,1413,1417,1771,1775,1785],[530,1136,1137],{},[1138,1139],"materials-glass-material",{},[536,1141,538,1142,1144,1145,1148,1149,562],{},[540,1143,542],{}," package provides a new",[540,1146,1147],{},"\u003CMeshGlassMaterial \u002F>"," component that makes a geometry look like glass. This is achieved by re-defining the ",[540,1150,1151],{},"MeshPhysicalMaterial",[564,1153,15],{"id":566},[1155,1156,1158],"h3",{"id":1157},"you-can-use-it-like-you-normally-do-with-tresjs","You can use it like you normally do with TresJs",[568,1160,1163],{"className":570,"code":1161,"highlights":1162,"language":588,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { MeshGlassMaterial } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" :look-at=\"[0, 0, 0]\" \u002F>\n    \u003CTresMesh>\n      \u003CTresTorusGeometry \u002F>\n      \u003CMeshGlassMaterial \u002F>\n    \u003C\u002FTresMesh>\n    \u003CTresAmbientLight \u002F>\n    \u003CTresDirectionalLight :position=\"[0, 2, 4]\" \u002F>\n  \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[510,736],[540,1164,1165,1185,1206,1225,1233,1237,1245,1253,1310,1318,1328,1337,1345,1353,1388,1396],{"__ignoreMap":508},[592,1166,1167,1169,1171,1173,1175,1177,1179,1181,1183],{"class":594,"line":509},[592,1168,598],{"class":597},[592,1170,602],{"class":601},[592,1172,606],{"class":605},[592,1174,609],{"class":605},[592,1176,612],{"class":597},[592,1178,615],{"class":597},[592,1180,619],{"class":618},[592,1182,615],{"class":597},[592,1184,624],{"class":597},[592,1186,1188,1190,1192,1195,1197,1199,1201,1204],{"class":1187,"line":510},[594,628],[592,1189,632],{"class":631},[592,1191,635],{"class":597},[592,1193,1194],{"class":638}," TresCanvas",[592,1196,642],{"class":597},[592,1198,645],{"class":631},[592,1200,648],{"class":597},[592,1202,1203],{"class":618},"@tresjs\u002Fcore",[592,1205,654],{"class":597},[592,1207,1208,1210,1212,1215,1217,1219,1221,1223],{"class":594,"line":657},[592,1209,632],{"class":631},[592,1211,635],{"class":597},[592,1213,1214],{"class":638}," MeshGlassMaterial",[592,1216,642],{"class":597},[592,1218,645],{"class":631},[592,1220,648],{"class":597},[592,1222,651],{"class":618},[592,1224,654],{"class":597},[592,1226,1227,1229,1231],{"class":594,"line":677},[592,1228,703],{"class":597},[592,1230,602],{"class":601},[592,1232,624],{"class":597},[592,1234,1235],{"class":594,"line":683},[592,1236,680],{"emptyLinePlaceholder":516},[592,1238,1239,1241,1243],{"class":594,"line":700},[592,1240,598],{"class":597},[592,1242,720],{"class":601},[592,1244,624],{"class":597},[592,1246,1247,1249,1251],{"class":594,"line":710},[592,1248,728],{"class":597},[592,1250,731],{"class":601},[592,1252,624],{"class":597},[592,1254,1255,1257,1259,1261,1263,1265,1267,1269,1271,1273,1275,1277,1279,1281,1283,1285,1288,1290,1292,1294,1296,1298,1300,1302,1304,1306,1308],{"class":594,"line":715},[592,1256,739],{"class":597},[592,1258,742],{"class":601},[592,1260,745],{"class":597},[592,1262,748],{"class":605},[592,1264,612],{"class":597},[592,1266,615],{"class":597},[592,1268,755],{"class":597},[592,1270,759],{"class":758},[592,1272,762],{"class":597},[592,1274,759],{"class":758},[592,1276,762],{"class":597},[592,1278,759],{"class":758},[592,1280,771],{"class":597},[592,1282,615],{"class":597},[592,1284,745],{"class":597},[592,1286,1287],{"class":605},"look-at",[592,1289,612],{"class":597},[592,1291,615],{"class":597},[592,1293,755],{"class":597},[592,1295,889],{"class":758},[592,1297,762],{"class":597},[592,1299,889],{"class":758},[592,1301,762],{"class":597},[592,1303,889],{"class":758},[592,1305,771],{"class":597},[592,1307,615],{"class":597},[592,1309,776],{"class":597},[592,1311,1312,1314,1316],{"class":594,"line":725},[592,1313,739],{"class":597},[592,1315,784],{"class":601},[592,1317,624],{"class":597},[592,1319,1321,1323,1326],{"class":1320,"line":736},[594,628],[592,1322,792],{"class":597},[592,1324,1325],{"class":601},"TresTorusGeometry",[592,1327,776],{"class":597},[592,1329,1330,1332,1335],{"class":594,"line":779},[592,1331,792],{"class":597},[592,1333,1334],{"class":601},"MeshGlassMaterial",[592,1336,776],{"class":597},[592,1338,1339,1341,1343],{"class":594,"line":789},[592,1340,1068],{"class":597},[592,1342,784],{"class":601},[592,1344,624],{"class":597},[592,1346,1347,1349,1351],{"class":594,"line":573},[592,1348,739],{"class":597},[592,1350,1080],{"class":601},[592,1352,776],{"class":597},[592,1354,1355,1357,1360,1362,1364,1366,1368,1370,1372,1374,1377,1379,1382,1384,1386],{"class":594,"line":574},[592,1356,739],{"class":597},[592,1358,1359],{"class":601},"TresDirectionalLight",[592,1361,745],{"class":597},[592,1363,748],{"class":605},[592,1365,612],{"class":597},[592,1367,615],{"class":597},[592,1369,755],{"class":597},[592,1371,889],{"class":758},[592,1373,762],{"class":597},[592,1375,1376],{"class":758},"2",[592,1378,762],{"class":597},[592,1380,1381],{"class":758},"4",[592,1383,771],{"class":597},[592,1385,615],{"class":597},[592,1387,776],{"class":597},[592,1389,1390,1392,1394],{"class":594,"line":575},[592,1391,1088],{"class":597},[592,1393,731],{"class":601},[592,1395,624],{"class":597},[592,1397,1398,1400,1402],{"class":594,"line":576},[592,1399,703],{"class":597},[592,1401,720],{"class":601},[592,1403,624],{"class":597},[564,1405,1105],{"id":1104},[536,1407,1408,1409,1412],{},"No props are required. The component extends ",[540,1410,1411],{},"THREE.MeshPhysicalMaterial"," and accepts all the same props plus additional reflection-specific properties.",[1155,1414,1416],{"id":1415},"you-can-also-replace-the-material-of-an-existing-mesh-like-this","You can also replace the material of an existing mesh like this:",[568,1418,1421],{"className":570,"code":1419,"highlights":1420,"language":588,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { ref, shallowRef, watch } from 'vue'\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { MeshGlassMaterial, Box } from '@tresjs\u002Fcientos'\n\nconst glassMaterialRef = shallowRef()\nconst boxRef = shallowRef()\n\nwatch(glassMaterialRef, value => {\n  \u002F\u002F For good practice we dispose the old material\n  boxRef.value.instance.material.dispose()\n\n  \u002F\u002F We assign the new MeshGlassMaterialClass\n  boxRef.value.instance.material = value.MeshGlassMaterialClass\n})\n\u003C\u002Fscript>\n\u003Ctemplate>\n  \u003CTresMesh>\n    \u003CTresTorusGeometry \u002F>\n    \u003CMeshGlassMaterial ref=\"glassMaterialRef\" \u002F>\n  \u003C\u002FTresMesh>\n  \u003C!-- Mesh to be replaced -->\n  \u003CTresMesh ref=\"boxRef\">\n    \u003CTresBoxGeometry \u002F>\n    \u003CMeshBasicMaterial  \u002F>\n  \u003C\u002FTresMesh>\n\u003C\u002Ftemplate>\n",[677,700,710,715,725,736,779,789,573,574,575,580],[540,1422,1423,1443,1472,1490,1514,1518,1532,1546,1551,1572,1579,1606,1611,1617,1644,1653,1661,1669,1677,1685,1705,1713,1718,1737,1745,1755,1763],{"__ignoreMap":508},[592,1424,1425,1427,1429,1431,1433,1435,1437,1439,1441],{"class":594,"line":509},[592,1426,598],{"class":597},[592,1428,602],{"class":601},[592,1430,606],{"class":605},[592,1432,609],{"class":605},[592,1434,612],{"class":597},[592,1436,615],{"class":597},[592,1438,619],{"class":618},[592,1440,615],{"class":597},[592,1442,624],{"class":597},[592,1444,1445,1447,1449,1452,1455,1457,1459,1462,1464,1466,1468,1470],{"class":594,"line":510},[592,1446,632],{"class":631},[592,1448,635],{"class":597},[592,1450,1451],{"class":638}," ref",[592,1453,1454],{"class":597},",",[592,1456,664],{"class":638},[592,1458,1454],{"class":597},[592,1460,1461],{"class":638}," watch",[592,1463,642],{"class":597},[592,1465,645],{"class":631},[592,1467,648],{"class":597},[592,1469,588],{"class":618},[592,1471,654],{"class":597},[592,1473,1474,1476,1478,1480,1482,1484,1486,1488],{"class":594,"line":657},[592,1475,632],{"class":631},[592,1477,635],{"class":597},[592,1479,1194],{"class":638},[592,1481,642],{"class":597},[592,1483,645],{"class":631},[592,1485,648],{"class":597},[592,1487,1203],{"class":618},[592,1489,654],{"class":597},[592,1491,1493,1495,1497,1499,1501,1504,1506,1508,1510,1512],{"class":1492,"line":677},[594,628],[592,1494,632],{"class":631},[592,1496,635],{"class":597},[592,1498,1214],{"class":638},[592,1500,1454],{"class":597},[592,1502,1503],{"class":638}," Box",[592,1505,642],{"class":597},[592,1507,645],{"class":631},[592,1509,648],{"class":597},[592,1511,651],{"class":618},[592,1513,654],{"class":597},[592,1515,1516],{"class":594,"line":683},[592,1517,680],{"emptyLinePlaceholder":516},[592,1519,1521,1523,1526,1528,1530],{"class":1520,"line":700},[594,628],[592,1522,686],{"class":605},[592,1524,1525],{"class":638}," glassMaterialRef ",[592,1527,612],{"class":597},[592,1529,664],{"class":694},[592,1531,697],{"class":638},[592,1533,1535,1537,1540,1542,1544],{"class":1534,"line":710},[594,628],[592,1536,686],{"class":605},[592,1538,1539],{"class":638}," boxRef ",[592,1541,612],{"class":597},[592,1543,664],{"class":694},[592,1545,697],{"class":638},[592,1547,1549],{"class":1548,"line":715},[594,628],[592,1550,680],{"emptyLinePlaceholder":516},[592,1552,1554,1557,1560,1562,1566,1569],{"class":1553,"line":725},[594,628],[592,1555,1556],{"class":694},"watch",[592,1558,1559],{"class":638},"(glassMaterialRef",[592,1561,1454],{"class":597},[592,1563,1565],{"class":1564},"sHdIc"," value",[592,1567,1568],{"class":605}," =>",[592,1570,1571],{"class":597}," {\n",[592,1573,1575],{"class":1574,"line":736},[594,628],[592,1576,1578],{"class":1577},"sHwdD","  \u002F\u002F For good practice we dispose the old material\n",[592,1580,1582,1585,1587,1589,1591,1594,1596,1599,1601,1604],{"class":1581,"line":779},[594,628],[592,1583,1584],{"class":638},"  boxRef",[592,1586,562],{"class":597},[592,1588,883],{"class":638},[592,1590,562],{"class":597},[592,1592,1593],{"class":638},"instance",[592,1595,562],{"class":597},[592,1597,1598],{"class":638},"material",[592,1600,562],{"class":597},[592,1602,1603],{"class":694},"dispose",[592,1605,697],{"class":601},[592,1607,1609],{"class":1608,"line":789},[594,628],[592,1610,680],{"emptyLinePlaceholder":516},[592,1612,1614],{"class":1613,"line":573},[594,628],[592,1615,1616],{"class":1577},"  \u002F\u002F We assign the new MeshGlassMaterialClass\n",[592,1618,1620,1622,1624,1626,1628,1630,1632,1634,1637,1639,1641],{"class":1619,"line":574},[594,628],[592,1621,1584],{"class":638},[592,1623,562],{"class":597},[592,1625,883],{"class":638},[592,1627,562],{"class":597},[592,1629,1593],{"class":638},[592,1631,562],{"class":597},[592,1633,1598],{"class":638},[592,1635,1636],{"class":597}," =",[592,1638,1565],{"class":638},[592,1640,562],{"class":597},[592,1642,1643],{"class":638},"MeshGlassMaterialClass\n",[592,1645,1647,1650],{"class":1646,"line":575},[594,628],[592,1648,1649],{"class":597},"}",[592,1651,1652],{"class":638},")\n",[592,1654,1655,1657,1659],{"class":594,"line":576},[592,1656,703],{"class":597},[592,1658,602],{"class":601},[592,1660,624],{"class":597},[592,1662,1663,1665,1667],{"class":594,"line":577},[592,1664,598],{"class":597},[592,1666,720],{"class":601},[592,1668,624],{"class":597},[592,1670,1671,1673,1675],{"class":594,"line":578},[592,1672,728],{"class":597},[592,1674,784],{"class":601},[592,1676,624],{"class":597},[592,1678,1679,1681,1683],{"class":594,"line":579},[592,1680,739],{"class":597},[592,1682,1325],{"class":601},[592,1684,776],{"class":597},[592,1686,1688,1690,1692,1694,1696,1698,1701,1703],{"class":1687,"line":580},[594,628],[592,1689,739],{"class":597},[592,1691,1334],{"class":601},[592,1693,1451],{"class":605},[592,1695,612],{"class":597},[592,1697,615],{"class":597},[592,1699,1700],{"class":618},"glassMaterialRef",[592,1702,615],{"class":597},[592,1704,776],{"class":597},[592,1706,1707,1709,1711],{"class":594,"line":581},[592,1708,1088],{"class":597},[592,1710,784],{"class":601},[592,1712,624],{"class":597},[592,1714,1715],{"class":594,"line":582},[592,1716,1717],{"class":1577},"  \u003C!-- Mesh to be replaced -->\n",[592,1719,1720,1722,1724,1726,1728,1730,1733,1735],{"class":594,"line":583},[592,1721,728],{"class":597},[592,1723,784],{"class":601},[592,1725,1451],{"class":605},[592,1727,612],{"class":597},[592,1729,615],{"class":597},[592,1731,1732],{"class":618},"boxRef",[592,1734,615],{"class":597},[592,1736,624],{"class":597},[592,1738,1739,1741,1743],{"class":594,"line":584},[592,1740,739],{"class":597},[592,1742,795],{"class":601},[592,1744,776],{"class":597},[592,1746,1747,1749,1752],{"class":594,"line":585},[592,1748,739],{"class":597},[592,1750,1751],{"class":601},"MeshBasicMaterial",[592,1753,1754],{"class":597},"  \u002F>\n",[592,1756,1757,1759,1761],{"class":594,"line":586},[592,1758,1088],{"class":597},[592,1760,784],{"class":601},[592,1762,624],{"class":597},[592,1764,1765,1767,1769],{"class":594,"line":587},[592,1766,703],{"class":597},[592,1768,720],{"class":601},[592,1770,624],{"class":597},[564,1772,1774],{"id":1773},"tips","Tips",[1776,1777,1778,1782],"ul",{},[1779,1780,1781],"li",{},"For more fine tuning effects you can provide an environment map texture as an envMap and play with the intensity to achieve a more realistic effect",[1779,1783,1784],{},"Another good option is to provide a normal texture as clearcoatNormalMap to add different results",[1121,1786,1787],{},"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":508,"searchDepth":509,"depth":510,"links":1789},[1790,1793,1796],{"id":566,"depth":510,"text":15,"children":1791},[1792],{"id":1157,"depth":657,"text":1158},{"id":1104,"depth":510,"text":1105,"children":1794},[1795],{"id":1415,"depth":657,"text":1416},{"id":1773,"depth":510,"text":1774},"Makes a geometry look like glass by re-defining the MeshPhysicalMaterial.",{},{"title":179,"description":1797},"XeLIOrrqO5hF6DK2JnTAyGusif0o80_d6hTc8m5QJQE",{"id":1802,"title":183,"body":1803,"description":2285,"extension":513,"links":514,"meta":2286,"navigation":516,"path":184,"seo":2287,"stem":185,"__hash__":2288},"docs\u002F2.api\u002F4.materials\u002Fholographic-material.md",{"type":501,"value":1804,"toc":2280},[1805,1811,1815,1818,1821,1827,1829,2040,2042,2277],[1806,1807,1808],"scene-controls-wrapper",{},[1809,1810],"materials-holographic-material",{},[564,1812,1814],{"id":1813},"a-simple-to-use-holographic-material-for-tresjs","A simple to use holographic material for TresJS",[536,1816,1817],{},"Dive into a world of mesmerizing holographic wonders with the HolographicMaterial for vanilla Three.js. This enchanting Three.js material brings your virtual reality experiences to life, infusing them with a burst of vibrant colors, dynamic scanlines, and a touch of futuristic brilliance.",[536,1819,1820],{},"While this material operates independently of any post-processing, it achieves an enhanced visual appeal when coupled with bloom effects. The utilization of bloom proves particularly effective in rendering a captivating glow effect, especially in areas where overexposure is prevalent.",[1822,1823,1824],"prose-note",{},[536,1825,1826],{},"This component ports Anderson Mancini's threejs-vanilla-holographic-material to TresJS. All credit goes to him.",[564,1828,15],{"id":566},[568,1830,1833],{"className":570,"code":1831,"highlights":1832,"language":588,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { HolographicMaterial, Sphere } from '@tresjs\u002Fcientos'\n\n\u003C\u002Fscript>\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" :look-at=[0,0,0] \u002F>\n    \u003CSphere :scale=\"0.5\">\n      \u003CHolographicMaterial \u002F>\n    \u003C\u002FSphere>\n    \u003CTresAmbientLight \u002F>\n  \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[657,736],[540,1834,1835,1855,1873,1898,1902,1910,1918,1926,1976,1998,2008,2016,2024,2032],{"__ignoreMap":508},[592,1836,1837,1839,1841,1843,1845,1847,1849,1851,1853],{"class":594,"line":509},[592,1838,598],{"class":597},[592,1840,602],{"class":601},[592,1842,606],{"class":605},[592,1844,609],{"class":605},[592,1846,612],{"class":597},[592,1848,615],{"class":597},[592,1850,619],{"class":618},[592,1852,615],{"class":597},[592,1854,624],{"class":597},[592,1856,1857,1859,1861,1863,1865,1867,1869,1871],{"class":594,"line":510},[592,1858,632],{"class":631},[592,1860,635],{"class":597},[592,1862,1194],{"class":638},[592,1864,642],{"class":597},[592,1866,645],{"class":631},[592,1868,648],{"class":597},[592,1870,1203],{"class":618},[592,1872,654],{"class":597},[592,1874,1876,1878,1880,1883,1885,1888,1890,1892,1894,1896],{"class":1875,"line":657},[594,628],[592,1877,632],{"class":631},[592,1879,635],{"class":597},[592,1881,1882],{"class":638}," HolographicMaterial",[592,1884,1454],{"class":597},[592,1886,1887],{"class":638}," Sphere",[592,1889,642],{"class":597},[592,1891,645],{"class":631},[592,1893,648],{"class":597},[592,1895,651],{"class":618},[592,1897,654],{"class":597},[592,1899,1900],{"class":594,"line":677},[592,1901,680],{"emptyLinePlaceholder":516},[592,1903,1904,1906,1908],{"class":594,"line":683},[592,1905,703],{"class":597},[592,1907,602],{"class":601},[592,1909,624],{"class":597},[592,1911,1912,1914,1916],{"class":594,"line":700},[592,1913,598],{"class":597},[592,1915,720],{"class":601},[592,1917,624],{"class":597},[592,1919,1920,1922,1924],{"class":594,"line":710},[592,1921,728],{"class":597},[592,1923,731],{"class":601},[592,1925,624],{"class":597},[592,1927,1928,1930,1932,1934,1936,1938,1940,1942,1944,1946,1948,1950,1952,1954,1956,1958,1960,1963,1965,1967,1969,1971,1973],{"class":594,"line":715},[592,1929,739],{"class":597},[592,1931,742],{"class":601},[592,1933,745],{"class":597},[592,1935,748],{"class":605},[592,1937,612],{"class":597},[592,1939,615],{"class":597},[592,1941,755],{"class":597},[592,1943,759],{"class":758},[592,1945,762],{"class":597},[592,1947,759],{"class":758},[592,1949,762],{"class":597},[592,1951,759],{"class":758},[592,1953,771],{"class":597},[592,1955,615],{"class":597},[592,1957,745],{"class":597},[592,1959,1287],{"class":605},[592,1961,1962],{"class":597},"=[",[592,1964,889],{"class":758},[592,1966,1454],{"class":597},[592,1968,889],{"class":758},[592,1970,1454],{"class":597},[592,1972,889],{"class":758},[592,1974,1975],{"class":597},"] \u002F>\n",[592,1977,1978,1980,1982,1984,1987,1989,1991,1994,1996],{"class":594,"line":725},[592,1979,739],{"class":597},[592,1981,285],{"class":601},[592,1983,745],{"class":597},[592,1985,1986],{"class":605},"scale",[592,1988,612],{"class":597},[592,1990,615],{"class":597},[592,1992,1993],{"class":758},"0.5",[592,1995,615],{"class":597},[592,1997,624],{"class":597},[592,1999,2001,2003,2006],{"class":2000,"line":736},[594,628],[592,2002,792],{"class":597},[592,2004,2005],{"class":601},"HolographicMaterial",[592,2007,776],{"class":597},[592,2009,2010,2012,2014],{"class":594,"line":779},[592,2011,1068],{"class":597},[592,2013,285],{"class":601},[592,2015,624],{"class":597},[592,2017,2018,2020,2022],{"class":594,"line":789},[592,2019,739],{"class":597},[592,2021,1080],{"class":601},[592,2023,776],{"class":597},[592,2025,2026,2028,2030],{"class":594,"line":573},[592,2027,1088],{"class":597},[592,2029,731],{"class":601},[592,2031,624],{"class":597},[592,2033,2034,2036,2038],{"class":594,"line":574},[592,2035,703],{"class":597},[592,2037,720],{"class":601},[592,2039,624],{"class":597},[564,2041,1105],{"id":1104},[2043,2044,2045,2065],"table",{},[2046,2047,2048],"thead",{},[2049,2050,2051,2056,2059,2062],"tr",{},[2052,2053,2055],"th",{"align":2054},"left","Prop",[2052,2057,2058],{"align":2054},"Description",[2052,2060,2061],{},"Type",[2052,2063,2064],{},"default",[2066,2067,2068,2090,2109,2128,2147,2165,2185,2204,2222,2240,2258],"tbody",{},[2049,2069,2070,2077,2080,2085],{},[2071,2072,2073],"td",{"align":2054},[2074,2075,2076],"strong",{},"fresnelAmount",[2071,2078,2079],{"align":2054},"Value of the Fresnel effect. Ranges from 0.0 to 1.0.",[2071,2081,2082],{},[540,2083,2084],{},"Number",[2071,2086,2087],{},[540,2088,2089],{},"0.45",[2049,2091,2092,2097,2100,2104],{},[2071,2093,2094],{"align":2054},[2074,2095,2096],{},"fresnelOpacity",[2071,2098,2099],{"align":2054},"Opacity of the Fresnel effect. Ranges from 0.0 to 1.0.",[2071,2101,2102],{},[540,2103,2084],{},[2071,2105,2106],{},[540,2107,2108],{},"1.0",[2049,2110,2111,2116,2119,2123],{},[2071,2112,2113],{"align":2054},[2074,2114,2115],{},"scanlineSize",[2071,2117,2118],{"align":2054},"Size of the scanlines. Ranges from 1 to 15.",[2071,2120,2121],{},[540,2122,2084],{},[2071,2124,2125],{},[540,2126,2127],{},"8.0",[2049,2129,2130,2135,2138,2142],{},[2071,2131,2132],{"align":2054},[2074,2133,2134],{},"hologramBrightness",[2071,2136,2137],{"align":2054},"Brightness of the hologram. Ranges from 0.0 to 2.0.",[2071,2139,2140],{},[540,2141,2084],{},[2071,2143,2144],{},[540,2145,2146],{},"1.2",[2049,2148,2149,2154,2157,2161],{},[2071,2150,2151],{"align":2054},[2074,2152,2153],{},"signalSpeed",[2071,2155,2156],{"align":2054},"Speed of the signal effect. Ranges from 0.0 to 2.0.",[2071,2158,2159],{},[540,2160,2084],{},[2071,2162,2163],{},[540,2164,2089],{},[2049,2166,2167,2172,2175,2180],{},[2071,2168,2169],{"align":2054},[2074,2170,2171],{},"hologramColor",[2071,2173,2174],{"align":2054},"Specifies the color of the hologram.",[2071,2176,2177],{},[540,2178,2179],{},"String",[2071,2181,2182],{},[540,2183,2184],{},"\"#00d5ff\"",[2049,2186,2187,2192,2195,2200],{},[2071,2188,2189],{"align":2054},[2074,2190,2191],{},"enableBlinking",[2071,2193,2194],{"align":2054},"Enables or disables the blinking effect.",[2071,2196,2197],{},[540,2198,2199],{},"Boolean",[2071,2201,2202],{},[540,2203,978],{},[2049,2205,2206,2211,2214,2218],{},[2071,2207,2208],{"align":2054},[2074,2209,2210],{},"hologramOpacity",[2071,2212,2213],{"align":2054},"Specifies the opacity of the hologram.",[2071,2215,2216],{},[540,2217,2084],{},[2071,2219,2220],{},[540,2221,2108],{},[2049,2223,2224,2229,2232,2236],{},[2071,2225,2226],{"align":2054},[2074,2227,2228],{},"blinkFresnelOnly",[2071,2230,2231],{"align":2054},"Enables or disables the blinking effect for the Fresnel only.",[2071,2233,2234],{},[540,2235,2199],{},[2071,2237,2238],{},[540,2239,978],{},[2049,2241,2242,2247,2250,2254],{},[2071,2243,2244],{"align":2054},[2074,2245,2246],{},"enableAdditive",[2071,2248,2249],{"align":2054},"Enables or disables the Additive Blend Mode.",[2071,2251,2252],{},[540,2253,2199],{},[2071,2255,2256],{},[540,2257,978],{},[2049,2259,2260,2264,2267,2272],{},[2071,2261,2262],{"align":2054},[2074,2263,988],{},[2071,2265,2266],{"align":2054},"Specifies side for the material, as String.",[2071,2268,2269],{},[540,2270,2271],{},"THREE.FrontSide, THREE.BackSide, THREE.DoubleSide",[2071,2273,2274],{},[540,2275,2276],{},"FrontSide",[1121,2278,2279],{},"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":508,"searchDepth":509,"depth":510,"links":2281},[2282,2283,2284],{"id":1813,"depth":510,"text":1814},{"id":566,"depth":510,"text":15},{"id":1104,"depth":510,"text":1105},"A simple to use holographic material for TresJS with vibrant colors, dynamic scanlines, and futuristic brilliance.",{},{"title":183,"description":2285},"qI6m7jV8AEZ5_Ruhn6hSlmpTi7LrcHgetMD_vYArm8Y",{"id":2290,"title":187,"body":2291,"description":2457,"extension":513,"links":514,"meta":2458,"navigation":516,"path":188,"seo":2459,"stem":189,"__hash__":2460},"docs\u002F2.api\u002F4.materials\u002Fmesh-discard-material.md",{"type":501,"value":2292,"toc":2454},[2293,2299,2301,2451],[536,2294,2295,2298],{},[540,2296,2297],{},"\u003CMeshDiscardMaterial \u002F>"," hides the object it's attached to. The object's shadows and children will be rendered.",[564,2300,15],{"id":566},[568,2302,2305],{"className":570,"code":2303,"highlights":2304,"language":588,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { MeshDiscardMaterial } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera \u002F>\n    \u003CTresMesh>\n      \u003CTresBoxGeometry \u002F>\n      \u003CMeshDiscardMaterial \u002F>\n    \u003C\u002FTresMesh>\n  \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[657,779],[540,2306,2307,2327,2345,2365,2373,2377,2385,2393,2401,2409,2417,2427,2435,2443],{"__ignoreMap":508},[592,2308,2309,2311,2313,2315,2317,2319,2321,2323,2325],{"class":594,"line":509},[592,2310,598],{"class":597},[592,2312,602],{"class":601},[592,2314,606],{"class":605},[592,2316,609],{"class":605},[592,2318,612],{"class":597},[592,2320,615],{"class":597},[592,2322,619],{"class":618},[592,2324,615],{"class":597},[592,2326,624],{"class":597},[592,2328,2329,2331,2333,2335,2337,2339,2341,2343],{"class":594,"line":510},[592,2330,632],{"class":631},[592,2332,635],{"class":597},[592,2334,1194],{"class":638},[592,2336,642],{"class":597},[592,2338,645],{"class":631},[592,2340,648],{"class":597},[592,2342,1203],{"class":618},[592,2344,654],{"class":597},[592,2346,2348,2350,2352,2355,2357,2359,2361,2363],{"class":2347,"line":657},[594,628],[592,2349,632],{"class":631},[592,2351,635],{"class":597},[592,2353,2354],{"class":638}," MeshDiscardMaterial",[592,2356,642],{"class":597},[592,2358,645],{"class":631},[592,2360,648],{"class":597},[592,2362,651],{"class":618},[592,2364,654],{"class":597},[592,2366,2367,2369,2371],{"class":594,"line":677},[592,2368,703],{"class":597},[592,2370,602],{"class":601},[592,2372,624],{"class":597},[592,2374,2375],{"class":594,"line":683},[592,2376,680],{"emptyLinePlaceholder":516},[592,2378,2379,2381,2383],{"class":594,"line":700},[592,2380,598],{"class":597},[592,2382,720],{"class":601},[592,2384,624],{"class":597},[592,2386,2387,2389,2391],{"class":594,"line":710},[592,2388,728],{"class":597},[592,2390,731],{"class":601},[592,2392,624],{"class":597},[592,2394,2395,2397,2399],{"class":594,"line":715},[592,2396,739],{"class":597},[592,2398,742],{"class":601},[592,2400,776],{"class":597},[592,2402,2403,2405,2407],{"class":594,"line":725},[592,2404,739],{"class":597},[592,2406,784],{"class":601},[592,2408,624],{"class":597},[592,2410,2411,2413,2415],{"class":594,"line":736},[592,2412,792],{"class":597},[592,2414,795],{"class":601},[592,2416,776],{"class":597},[592,2418,2420,2422,2425],{"class":2419,"line":779},[594,628],[592,2421,792],{"class":597},[592,2423,2424],{"class":601},"MeshDiscardMaterial",[592,2426,776],{"class":597},[592,2428,2429,2431,2433],{"class":594,"line":789},[592,2430,1068],{"class":597},[592,2432,784],{"class":601},[592,2434,624],{"class":597},[592,2436,2437,2439,2441],{"class":594,"line":573},[592,2438,1088],{"class":597},[592,2440,731],{"class":601},[592,2442,624],{"class":597},[592,2444,2445,2447,2449],{"class":594,"line":574},[592,2446,703],{"class":597},[592,2448,720],{"class":601},[592,2450,624],{"class":597},[1121,2452,2453],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":508,"searchDepth":509,"depth":510,"links":2455},[2456],{"id":566,"depth":510,"text":15},"Hides the object it's attached to while keeping shadows and children visible.",{},{"title":187,"description":2457},"ivSz3UBTzifkzor3XvoS_5CUJD_0d-7Dh7JvwBwFh80",{"id":2462,"title":191,"body":2463,"description":3152,"extension":513,"links":514,"meta":3153,"navigation":516,"path":192,"seo":3154,"stem":193,"__hash__":3155},"docs\u002F2.api\u002F4.materials\u002Fmesh-portal-material.md",{"type":501,"value":2464,"toc":3147},[2465,2470,2479,2497,2509,2511,2872,2874,2971,2975,2985,3061,3107,3132,3144],[1806,2466,2467],{},[2468,2469],"materials-mesh-portal-material",{},[536,2471,538,2472,2474,2475,2478],{},[540,2473,542],{}," package provides a ",[540,2476,2477],{},"\u003CMeshPortalMaterial \u002F>"," component that renders its\ndeclarative children into a private off-main scene and projects that scene onto the\nhost mesh as a perspective-correct window.",[536,2480,2481,2482,2485,2486,2489,2490,2492,2493,2496],{},"Children declared inside the component render into the ",[2074,2483,2484],{},"portal scene",", not the main\nscene. The portal scene is rendered to a frame buffer each frame using the active\ncamera, so contents sit in world-space (move the camera and you get parallax through\nthe surface, not a flat decal). The mesh geometry masks the result, and ",[540,2487,2488],{},"blend","\ncross-fades between the world (",[540,2491,889],{},") and the portal (",[540,2494,2495],{},"1",").",[1822,2498,2499],{},[536,2500,2501,2502,2508],{},"This component is a port of the ",[549,2503,2507],{"href":2504,"rel":2505,"target":2506},"https:\u002F\u002Fdrei.docs.pmnd.rs\u002Fportals\u002Fmesh-portal-material",[553],"_blank","drei MeshPortalMaterial",". All credit goes to the original authors.",[564,2510,15],{"id":566},[568,2512,2514],{"className":570,"code":2513,"language":588,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { MeshPortalMaterial, OrbitControls } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 0, 6]\" \u002F>\n    \u003COrbitControls \u002F>\n    \u003CTresMesh>\n      \u003CTresPlaneGeometry :args=\"[3, 4]\" \u002F>\n      \u003CMeshPortalMaterial :blend=\"0\">\n        \u003C!-- children render INTO the portal scene -->\n        \u003CTresAmbientLight :intensity=\"0.5\" \u002F>\n        \u003CTresMesh :position=\"[0, 0, -1]\">\n          \u003CTresTorusKnotGeometry :args=\"[0.6, 0.25, 128, 32]\" \u002F>\n          \u003CTresMeshStandardMaterial color=\"#fbb03b\" \u002F>\n        \u003C\u002FTresMesh>\n      \u003C\u002FMeshPortalMaterial>\n    \u003C\u002FTresMesh>\n  \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[540,2515,2516,2536,2554,2578,2586,2590,2598,2606,2639,2648,2656,2686,2707,2712,2734,2767,2809,2830,2839,2848,2856,2864],{"__ignoreMap":508},[592,2517,2518,2520,2522,2524,2526,2528,2530,2532,2534],{"class":594,"line":509},[592,2519,598],{"class":597},[592,2521,602],{"class":601},[592,2523,606],{"class":605},[592,2525,609],{"class":605},[592,2527,612],{"class":597},[592,2529,615],{"class":597},[592,2531,619],{"class":618},[592,2533,615],{"class":597},[592,2535,624],{"class":597},[592,2537,2538,2540,2542,2544,2546,2548,2550,2552],{"class":594,"line":510},[592,2539,632],{"class":631},[592,2541,635],{"class":597},[592,2543,1194],{"class":638},[592,2545,642],{"class":597},[592,2547,645],{"class":631},[592,2549,648],{"class":597},[592,2551,1203],{"class":618},[592,2553,654],{"class":597},[592,2555,2556,2558,2560,2563,2565,2568,2570,2572,2574,2576],{"class":594,"line":657},[592,2557,632],{"class":631},[592,2559,635],{"class":597},[592,2561,2562],{"class":638}," MeshPortalMaterial",[592,2564,1454],{"class":597},[592,2566,2567],{"class":638}," OrbitControls",[592,2569,642],{"class":597},[592,2571,645],{"class":631},[592,2573,648],{"class":597},[592,2575,651],{"class":618},[592,2577,654],{"class":597},[592,2579,2580,2582,2584],{"class":594,"line":677},[592,2581,703],{"class":597},[592,2583,602],{"class":601},[592,2585,624],{"class":597},[592,2587,2588],{"class":594,"line":683},[592,2589,680],{"emptyLinePlaceholder":516},[592,2591,2592,2594,2596],{"class":594,"line":700},[592,2593,598],{"class":597},[592,2595,720],{"class":601},[592,2597,624],{"class":597},[592,2599,2600,2602,2604],{"class":594,"line":710},[592,2601,728],{"class":597},[592,2603,731],{"class":601},[592,2605,624],{"class":597},[592,2607,2608,2610,2612,2614,2616,2618,2620,2622,2624,2626,2628,2630,2633,2635,2637],{"class":594,"line":715},[592,2609,739],{"class":597},[592,2611,742],{"class":601},[592,2613,745],{"class":597},[592,2615,748],{"class":605},[592,2617,612],{"class":597},[592,2619,615],{"class":597},[592,2621,755],{"class":597},[592,2623,889],{"class":758},[592,2625,762],{"class":597},[592,2627,889],{"class":758},[592,2629,762],{"class":597},[592,2631,2632],{"class":758},"6",[592,2634,771],{"class":597},[592,2636,615],{"class":597},[592,2638,776],{"class":597},[592,2640,2641,2643,2646],{"class":594,"line":725},[592,2642,739],{"class":597},[592,2644,2645],{"class":601},"OrbitControls",[592,2647,776],{"class":597},[592,2649,2650,2652,2654],{"class":594,"line":736},[592,2651,739],{"class":597},[592,2653,784],{"class":601},[592,2655,624],{"class":597},[592,2657,2658,2660,2663,2665,2668,2670,2672,2674,2676,2678,2680,2682,2684],{"class":594,"line":779},[592,2659,792],{"class":597},[592,2661,2662],{"class":601},"TresPlaneGeometry",[592,2664,745],{"class":597},[592,2666,2667],{"class":605},"args",[592,2669,612],{"class":597},[592,2671,615],{"class":597},[592,2673,755],{"class":597},[592,2675,759],{"class":758},[592,2677,762],{"class":597},[592,2679,1381],{"class":758},[592,2681,771],{"class":597},[592,2683,615],{"class":597},[592,2685,776],{"class":597},[592,2687,2688,2690,2693,2695,2697,2699,2701,2703,2705],{"class":594,"line":789},[592,2689,792],{"class":597},[592,2691,2692],{"class":601},"MeshPortalMaterial",[592,2694,745],{"class":597},[592,2696,2488],{"class":605},[592,2698,612],{"class":597},[592,2700,615],{"class":597},[592,2702,889],{"class":758},[592,2704,615],{"class":597},[592,2706,624],{"class":597},[592,2708,2709],{"class":594,"line":573},[592,2710,2711],{"class":1577},"        \u003C!-- children render INTO the portal scene -->\n",[592,2713,2714,2717,2719,2721,2724,2726,2728,2730,2732],{"class":594,"line":574},[592,2715,2716],{"class":597},"        \u003C",[592,2718,1080],{"class":601},[592,2720,745],{"class":597},[592,2722,2723],{"class":605},"intensity",[592,2725,612],{"class":597},[592,2727,615],{"class":597},[592,2729,1993],{"class":758},[592,2731,615],{"class":597},[592,2733,776],{"class":597},[592,2735,2736,2738,2740,2742,2744,2746,2748,2750,2752,2754,2756,2759,2761,2763,2765],{"class":594,"line":575},[592,2737,2716],{"class":597},[592,2739,784],{"class":601},[592,2741,745],{"class":597},[592,2743,748],{"class":605},[592,2745,612],{"class":597},[592,2747,615],{"class":597},[592,2749,755],{"class":597},[592,2751,889],{"class":758},[592,2753,762],{"class":597},[592,2755,889],{"class":758},[592,2757,2758],{"class":597},", -",[592,2760,2495],{"class":758},[592,2762,771],{"class":597},[592,2764,615],{"class":597},[592,2766,624],{"class":597},[592,2768,2769,2772,2775,2777,2779,2781,2783,2785,2788,2790,2793,2795,2798,2800,2803,2805,2807],{"class":594,"line":576},[592,2770,2771],{"class":597},"          \u003C",[592,2773,2774],{"class":601},"TresTorusKnotGeometry",[592,2776,745],{"class":597},[592,2778,2667],{"class":605},[592,2780,612],{"class":597},[592,2782,615],{"class":597},[592,2784,755],{"class":597},[592,2786,2787],{"class":758},"0.6",[592,2789,762],{"class":597},[592,2791,2792],{"class":758},"0.25",[592,2794,762],{"class":597},[592,2796,2797],{"class":758},"128",[592,2799,762],{"class":597},[592,2801,2802],{"class":758},"32",[592,2804,771],{"class":597},[592,2806,615],{"class":597},[592,2808,776],{"class":597},[592,2810,2811,2813,2816,2819,2821,2823,2826,2828],{"class":594,"line":577},[592,2812,2771],{"class":597},[592,2814,2815],{"class":601},"TresMeshStandardMaterial",[592,2817,2818],{"class":605}," color",[592,2820,612],{"class":597},[592,2822,615],{"class":597},[592,2824,2825],{"class":618},"#fbb03b",[592,2827,615],{"class":597},[592,2829,776],{"class":597},[592,2831,2832,2835,2837],{"class":594,"line":578},[592,2833,2834],{"class":597},"        \u003C\u002F",[592,2836,784],{"class":601},[592,2838,624],{"class":597},[592,2840,2841,2844,2846],{"class":594,"line":579},[592,2842,2843],{"class":597},"      \u003C\u002F",[592,2845,2692],{"class":601},[592,2847,624],{"class":597},[592,2849,2850,2852,2854],{"class":594,"line":580},[592,2851,1068],{"class":597},[592,2853,784],{"class":601},[592,2855,624],{"class":597},[592,2857,2858,2860,2862],{"class":594,"line":581},[592,2859,1088],{"class":597},[592,2861,731],{"class":601},[592,2863,624],{"class":597},[592,2865,2866,2868,2870],{"class":594,"line":582},[592,2867,703],{"class":597},[592,2869,720],{"class":601},[592,2871,624],{"class":597},[564,2873,1105],{"id":1104},[2043,2875,2876,2889],{},[2046,2877,2878],{},[2049,2879,2880,2882,2884,2887],{},[2052,2881,2055],{},[2052,2883,2061],{},[2052,2885,2886],{},"Default",[2052,2888,2058],{},[2066,2890,2891,2914,2933,2953],{},[2049,2892,2893,2897,2902,2906],{},[2071,2894,2895],{},[540,2896,2488],{},[2071,2898,2899],{},[540,2900,2901],{},"number",[2071,2903,2904],{},[540,2905,889],{},[2071,2907,2908,2910,2911,2913],{},[540,2909,889],{}," = world only, ",[540,2912,2495],{}," = portal only; cross-fades between.",[2049,2915,2916,2921,2925,2930],{},[2071,2917,2918],{},[540,2919,2920],{},"resolution",[2071,2922,2923],{},[540,2924,2901],{},[2071,2926,2927],{},[540,2928,2929],{},"512",[2071,2931,2932],{},"Frame buffer resolution for the portal render.",[2049,2934,2935,2940,2945,2950],{},[2071,2936,2937],{},[540,2938,2939],{},"worldUnits",[2071,2941,2942],{},[540,2943,2944],{},"boolean",[2071,2946,2947],{},[540,2948,2949],{},"false",[2071,2951,2952],{},"Keep portal contents in world units instead of host-relative.",[2049,2954,2955,2960,2964,2968],{},[2071,2956,2957],{},[540,2958,2959],{},"renderPriority",[2071,2961,2962],{},[540,2963,2901],{},[2071,2965,2966],{},[540,2967,889],{},[2071,2969,2970],{},"Render-loop priority for the blend takeover. Applied at mount — changing it later requires a remount.",[564,2972,2974],{"id":2973},"setting-the-portals-background-or-environment","Setting the portal's background or environment",[536,2976,2977,2980,2981,2984],{},[540,2978,2979],{},"\u003CMeshPortalMaterial>"," overrides the injected scene context for its children, so\nhelpers that target \"the scene\" affect the ",[2074,2982,2983],{},"portal"," scene, not the world. Both of\nthese give the portal its own look, independent of the main scene:",[568,2986,2988],{"className":570,"code":2987,"language":588,"meta":508,"style":508},"\u003CMeshPortalMaterial :blend=\"blend\">\n  \u003C!-- Imperative helper — works because the injected scene is the portal scene -->\n  \u003CSuspense>\n    \u003CEnvironment preset=\"dawn\" :background=\"true\" \u002F>\n  \u003C\u002FSuspense>\n\n  \u003C!-- Or declarative attach (also lands on the portal scene) -->\n  \u003CTresColor attach=\"background\" :args=\"[0.1, 0.1, 0.18]\" \u002F>\n\n  \u003C!-- ...portal scene contents... -->\n\u003C\u002FMeshPortalMaterial>\n",[540,2989,2990,3010,3015,3020,3025,3030,3034,3039,3044,3048,3053],{"__ignoreMap":508},[592,2991,2992,2994,2996,2998,3000,3002,3004,3006,3008],{"class":594,"line":509},[592,2993,598],{"class":597},[592,2995,2692],{"class":601},[592,2997,745],{"class":597},[592,2999,2488],{"class":605},[592,3001,612],{"class":597},[592,3003,615],{"class":597},[592,3005,2488],{"class":638},[592,3007,615],{"class":597},[592,3009,624],{"class":597},[592,3011,3012],{"class":594,"line":510},[592,3013,3014],{"class":638},"  \u003C!-- Imperative helper — works because the injected scene is the portal scene -->\n",[592,3016,3017],{"class":594,"line":657},[592,3018,3019],{"class":638},"  \u003CSuspense>\n",[592,3021,3022],{"class":594,"line":677},[592,3023,3024],{"class":638},"    \u003CEnvironment preset=\"dawn\" :background=\"true\" \u002F>\n",[592,3026,3027],{"class":594,"line":683},[592,3028,3029],{"class":638},"  \u003C\u002FSuspense>\n",[592,3031,3032],{"class":594,"line":700},[592,3033,680],{"emptyLinePlaceholder":516},[592,3035,3036],{"class":594,"line":710},[592,3037,3038],{"class":638},"  \u003C!-- Or declarative attach (also lands on the portal scene) -->\n",[592,3040,3041],{"class":594,"line":715},[592,3042,3043],{"class":638},"  \u003CTresColor attach=\"background\" :args=\"[0.1, 0.1, 0.18]\" \u002F>\n",[592,3045,3046],{"class":594,"line":725},[592,3047,680],{"emptyLinePlaceholder":516},[592,3049,3050],{"class":594,"line":736},[592,3051,3052],{"class":638},"  \u003C!-- ...portal scene contents... -->\n",[592,3054,3055,3057,3059],{"class":594,"line":779},[592,3056,703],{"class":597},[592,3058,2692],{"class":601},[592,3060,624],{"class":597},[1822,3062,3063],{},[536,3064,3065,3068,3069,3072,3073,3076,3077,3080,3081,3084,3085,3080,3088,3091,3092,3095,3096,3099,3100,3103,3104,3106],{},[2074,3066,3067],{},"How it works:"," the component ",[540,3070,3071],{},"provide()","s a context whose ",[540,3074,3075],{},"scene"," points at the\nprivate portal scene. Vue's ",[540,3078,3079],{},"provide","\u002F",[540,3082,3083],{},"inject"," follows the mounted tree (it reaches\nslot content through the internal ",[540,3086,3087],{},"\u003CTresPortal>",[540,3089,3090],{},"\u003CTeleport>","), so both imperative\nhelpers (",[540,3093,3094],{},"useTres().scene",", e.g. ",[540,3097,3098],{},"\u003CEnvironment>",") and declarative ",[540,3101,3102],{},"attach"," configure\nthe portal scene. Only the ",[540,3105,3075],{}," is swapped — renderer, camera and sizes are shared.",[3108,3109,3110],"prose-warning",{},[536,3111,3112,3115,3116,3118,3119,3122,3123,3125,3126,3131],{},[2074,3113,3114],{},"On-demand rendering:"," the portal renders its scene to a frame buffer on every\nframe so the window keeps tracking animated contents and the ",[540,3117,2488],{}," takeover stays\nin sync. To do this it calls ",[540,3120,3121],{},"invalidate()"," each frame, which keeps the render loop\nrunning continuously — a mesh using ",[540,3124,2979],{}," effectively opts out of\n",[549,3127,3130],{"href":3128,"rel":3129,"target":2506},"https:\u002F\u002Fdocs.tresjs.org\u002Fapi\u002Fadvanced\u002Fperformance#mode-on-demand",[553],"on-demand rendering"," while mounted.",[1822,3133,3134],{},[536,3135,3136,3139,3140,3143],{},[2074,3137,3138],{},"Limitations (MVP):"," ",[540,3141,3142],{},"blur"," (edge fade) and pointer-event forwarding into the\nportal scene are not yet implemented. WebGPU is not yet supported.",[1121,3145,3146],{},"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);}",{"title":508,"searchDepth":509,"depth":510,"links":3148},[3149,3150,3151],{"id":566,"depth":510,"text":15},{"id":1104,"depth":510,"text":1105},{"id":2973,"depth":510,"text":2974},"Render a separate child scene into a portal surface, perspective-correct and masked by the mesh. Ported from drei.",{},{"title":191,"description":3152},"7zD0xygyddUlqsFxPuRB8bQ94GVfdpStKa3D_zel7Fo",{"id":3157,"title":195,"body":3158,"description":3993,"extension":513,"links":514,"meta":3994,"navigation":516,"path":196,"seo":3995,"stem":197,"__hash__":3996},"docs\u002F2.api\u002F4.materials\u002Fmesh-reflection-material.md",{"type":501,"value":3159,"toc":3989},[3160,3165,3176,3185,3192,3194,3686,3688,3961,3987],[1806,3161,3162],{},[3163,3164],"materials-mesh-reflection-material",{},[536,3166,538,3167,2474,3169,3172,3173,562],{},[540,3168,542],{},[540,3170,3171],{},"\u003CMeshReflectionMaterial \u002F>"," component for making floors or walls that reflect the objects in your ",[540,3174,3175],{},"Scene",[536,3177,3178,3179,3184],{},"The component is based on the excellent ",[549,3180,3183],{"href":3181,"rel":3182},"https:\u002F\u002Fgithub.com\u002Fpmndrs\u002Fdrei",[553],"Drei"," component of the same name.",[536,3186,3187,3188,3191],{},"It extends ",[540,3189,3190],{},"THREE.MeshStandardMaterial"," and accepts all the same props.",[564,3193,15],{"id":566},[568,3195,3198],{"className":570,"code":3196,"highlights":3197,"language":588,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { MeshReflectionMaterial } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" :look-at=\"[0, 0, 0]\" \u002F>\n    \u003CTresMesh :rotation=\"[-Math.PI \u002F 2, 0, 0]\">\n      \u003CTresPlaneGeometry :args=\"[10, 10]\" \u002F>\n      \u003CMeshReflectionMaterial\n        :blur=\"[300, 100]\"\n        :mixBlur=\"30\"\n        :mixStrength=\"80\"\n        :mixContrast=\"1\"\n        color=\"#a0a0a0\"\n        metalness=\"0.5\"\n        roughness=\"1\"\n        mirror=\"0\"\n      \u002F>\n    \u003C\u002FTresMesh>\n    \u003CTresMesh :position=\"[0, 1, 0]\">\n      \u003CTresBoxGeometry \u002F>\n      \u003CTresMeshStandardMaterial color=\"orange\" \u002F>\n    \u003C\u002FTresMesh>\n    \u003CTresAmbientLight \u002F>\n    \u003CTresDirectionalLight :position=\"[0, 2, 4]\" \u002F>\n  \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[657,576,577,578,579],[540,3199,3200,3220,3238,3258,3266,3270,3278,3286,3342,3387,3416,3423,3447,3463,3479,3494,3509,3523,3537,3551,3555,3563,3595,3603,3622,3630,3638,3670,3678],{"__ignoreMap":508},[592,3201,3202,3204,3206,3208,3210,3212,3214,3216,3218],{"class":594,"line":509},[592,3203,598],{"class":597},[592,3205,602],{"class":601},[592,3207,606],{"class":605},[592,3209,609],{"class":605},[592,3211,612],{"class":597},[592,3213,615],{"class":597},[592,3215,619],{"class":618},[592,3217,615],{"class":597},[592,3219,624],{"class":597},[592,3221,3222,3224,3226,3228,3230,3232,3234,3236],{"class":594,"line":510},[592,3223,632],{"class":631},[592,3225,635],{"class":597},[592,3227,1194],{"class":638},[592,3229,642],{"class":597},[592,3231,645],{"class":631},[592,3233,648],{"class":597},[592,3235,1203],{"class":618},[592,3237,654],{"class":597},[592,3239,3241,3243,3245,3248,3250,3252,3254,3256],{"class":3240,"line":657},[594,628],[592,3242,632],{"class":631},[592,3244,635],{"class":597},[592,3246,3247],{"class":638}," MeshReflectionMaterial",[592,3249,642],{"class":597},[592,3251,645],{"class":631},[592,3253,648],{"class":597},[592,3255,651],{"class":618},[592,3257,654],{"class":597},[592,3259,3260,3262,3264],{"class":594,"line":677},[592,3261,703],{"class":597},[592,3263,602],{"class":601},[592,3265,624],{"class":597},[592,3267,3268],{"class":594,"line":683},[592,3269,680],{"emptyLinePlaceholder":516},[592,3271,3272,3274,3276],{"class":594,"line":700},[592,3273,598],{"class":597},[592,3275,720],{"class":601},[592,3277,624],{"class":597},[592,3279,3280,3282,3284],{"class":594,"line":710},[592,3281,728],{"class":597},[592,3283,731],{"class":601},[592,3285,624],{"class":597},[592,3287,3288,3290,3292,3294,3296,3298,3300,3302,3304,3306,3308,3310,3312,3314,3316,3318,3320,3322,3324,3326,3328,3330,3332,3334,3336,3338,3340],{"class":594,"line":715},[592,3289,739],{"class":597},[592,3291,742],{"class":601},[592,3293,745],{"class":597},[592,3295,748],{"class":605},[592,3297,612],{"class":597},[592,3299,615],{"class":597},[592,3301,755],{"class":597},[592,3303,759],{"class":758},[592,3305,762],{"class":597},[592,3307,759],{"class":758},[592,3309,762],{"class":597},[592,3311,759],{"class":758},[592,3313,771],{"class":597},[592,3315,615],{"class":597},[592,3317,745],{"class":597},[592,3319,1287],{"class":605},[592,3321,612],{"class":597},[592,3323,615],{"class":597},[592,3325,755],{"class":597},[592,3327,889],{"class":758},[592,3329,762],{"class":597},[592,3331,889],{"class":758},[592,3333,762],{"class":597},[592,3335,889],{"class":758},[592,3337,771],{"class":597},[592,3339,615],{"class":597},[592,3341,776],{"class":597},[592,3343,3344,3346,3348,3350,3353,3355,3357,3360,3363,3365,3368,3371,3373,3375,3377,3379,3381,3383,3385],{"class":594,"line":725},[592,3345,739],{"class":597},[592,3347,784],{"class":601},[592,3349,745],{"class":597},[592,3351,3352],{"class":605},"rotation",[592,3354,612],{"class":597},[592,3356,615],{"class":597},[592,3358,3359],{"class":597},"[-",[592,3361,3362],{"class":638},"Math",[592,3364,562],{"class":597},[592,3366,3367],{"class":638},"PI",[592,3369,3370],{"class":597}," \u002F ",[592,3372,1376],{"class":758},[592,3374,762],{"class":597},[592,3376,889],{"class":758},[592,3378,762],{"class":597},[592,3380,889],{"class":758},[592,3382,771],{"class":597},[592,3384,615],{"class":597},[592,3386,624],{"class":597},[592,3388,3389,3391,3393,3395,3397,3399,3401,3403,3406,3408,3410,3412,3414],{"class":594,"line":736},[592,3390,792],{"class":597},[592,3392,2662],{"class":601},[592,3394,745],{"class":597},[592,3396,2667],{"class":605},[592,3398,612],{"class":597},[592,3400,615],{"class":597},[592,3402,755],{"class":597},[592,3404,3405],{"class":758},"10",[592,3407,762],{"class":597},[592,3409,3405],{"class":758},[592,3411,771],{"class":597},[592,3413,615],{"class":597},[592,3415,776],{"class":597},[592,3417,3418,3420],{"class":594,"line":779},[592,3419,792],{"class":597},[592,3421,3422],{"class":601},"MeshReflectionMaterial\n",[592,3424,3425,3427,3429,3431,3433,3435,3438,3440,3443,3445],{"class":594,"line":789},[592,3426,827],{"class":597},[592,3428,3142],{"class":605},[592,3430,612],{"class":597},[592,3432,615],{"class":597},[592,3434,755],{"class":597},[592,3436,3437],{"class":758},"300",[592,3439,762],{"class":597},[592,3441,3442],{"class":758},"100",[592,3444,771],{"class":597},[592,3446,821],{"class":597},[592,3448,3449,3451,3454,3456,3458,3461],{"class":594,"line":573},[592,3450,827],{"class":597},[592,3452,3453],{"class":605},"mixBlur",[592,3455,612],{"class":597},[592,3457,615],{"class":597},[592,3459,3460],{"class":758},"30",[592,3462,821],{"class":597},[592,3464,3465,3467,3470,3472,3474,3477],{"class":594,"line":574},[592,3466,827],{"class":597},[592,3468,3469],{"class":605},"mixStrength",[592,3471,612],{"class":597},[592,3473,615],{"class":597},[592,3475,3476],{"class":758},"80",[592,3478,821],{"class":597},[592,3480,3481,3483,3486,3488,3490,3492],{"class":594,"line":575},[592,3482,827],{"class":597},[592,3484,3485],{"class":605},"mixContrast",[592,3487,612],{"class":597},[592,3489,615],{"class":597},[592,3491,2495],{"class":758},[592,3493,821],{"class":597},[592,3495,3497,3500,3502,3504,3507],{"class":3496,"line":576},[594,628],[592,3498,3499],{"class":605},"        color",[592,3501,612],{"class":597},[592,3503,615],{"class":597},[592,3505,3506],{"class":618},"#a0a0a0",[592,3508,821],{"class":597},[592,3510,3512,3515,3517,3519,3521],{"class":3511,"line":577},[594,628],[592,3513,3514],{"class":605},"        metalness",[592,3516,612],{"class":597},[592,3518,615],{"class":597},[592,3520,1993],{"class":618},[592,3522,821],{"class":597},[592,3524,3526,3529,3531,3533,3535],{"class":3525,"line":578},[594,628],[592,3527,3528],{"class":605},"        roughness",[592,3530,612],{"class":597},[592,3532,615],{"class":597},[592,3534,2495],{"class":618},[592,3536,821],{"class":597},[592,3538,3540,3543,3545,3547,3549],{"class":3539,"line":579},[594,628],[592,3541,3542],{"class":605},"        mirror",[592,3544,612],{"class":597},[592,3546,615],{"class":597},[592,3548,889],{"class":618},[592,3550,821],{"class":597},[592,3552,3553],{"class":594,"line":580},[592,3554,1062],{"class":597},[592,3556,3557,3559,3561],{"class":594,"line":581},[592,3558,1068],{"class":597},[592,3560,784],{"class":601},[592,3562,624],{"class":597},[592,3564,3565,3567,3569,3571,3573,3575,3577,3579,3581,3583,3585,3587,3589,3591,3593],{"class":594,"line":582},[592,3566,739],{"class":597},[592,3568,784],{"class":601},[592,3570,745],{"class":597},[592,3572,748],{"class":605},[592,3574,612],{"class":597},[592,3576,615],{"class":597},[592,3578,755],{"class":597},[592,3580,889],{"class":758},[592,3582,762],{"class":597},[592,3584,2495],{"class":758},[592,3586,762],{"class":597},[592,3588,889],{"class":758},[592,3590,771],{"class":597},[592,3592,615],{"class":597},[592,3594,624],{"class":597},[592,3596,3597,3599,3601],{"class":594,"line":583},[592,3598,792],{"class":597},[592,3600,795],{"class":601},[592,3602,776],{"class":597},[592,3604,3605,3607,3609,3611,3613,3615,3618,3620],{"class":594,"line":584},[592,3606,792],{"class":597},[592,3608,2815],{"class":601},[592,3610,2818],{"class":605},[592,3612,612],{"class":597},[592,3614,615],{"class":597},[592,3616,3617],{"class":618},"orange",[592,3619,615],{"class":597},[592,3621,776],{"class":597},[592,3623,3624,3626,3628],{"class":594,"line":585},[592,3625,1068],{"class":597},[592,3627,784],{"class":601},[592,3629,624],{"class":597},[592,3631,3632,3634,3636],{"class":594,"line":586},[592,3633,739],{"class":597},[592,3635,1080],{"class":601},[592,3637,776],{"class":597},[592,3639,3640,3642,3644,3646,3648,3650,3652,3654,3656,3658,3660,3662,3664,3666,3668],{"class":594,"line":587},[592,3641,739],{"class":597},[592,3643,1359],{"class":601},[592,3645,745],{"class":597},[592,3647,748],{"class":605},[592,3649,612],{"class":597},[592,3651,615],{"class":597},[592,3653,755],{"class":597},[592,3655,889],{"class":758},[592,3657,762],{"class":597},[592,3659,1376],{"class":758},[592,3661,762],{"class":597},[592,3663,1381],{"class":758},[592,3665,771],{"class":597},[592,3667,615],{"class":597},[592,3669,776],{"class":597},[592,3671,3672,3674,3676],{"class":594,"line":1059},[592,3673,1088],{"class":597},[592,3675,731],{"class":601},[592,3677,624],{"class":597},[592,3679,3680,3682,3684],{"class":594,"line":1065},[592,3681,703],{"class":597},[592,3683,720],{"class":601},[592,3685,624],{"class":597},[564,3687,1105],{"id":1104},[2043,3689,3690,3701],{},[2046,3691,3692],{},[2049,3693,3694,3697,3699],{},[2052,3695,3696],{"align":2054},"Name",[2052,3698,2058],{"align":2054},[2052,3700,2886],{},[2066,3702,3703,3717,3731,3745,3762,3776,3790,3804,3818,3832,3849,3863,3877,3891,3916,3931,3947],{},[2049,3704,3705,3709,3712],{},[2071,3706,3707],{"align":2054},[540,3708,2920],{},[2071,3710,3711],{"align":2054},"Length in pixels of one side of the square reflective textures",[2071,3713,3714],{},[540,3715,3716],{},"256",[2049,3718,3719,3724,3727],{},[2071,3720,3721],{"align":2054},[540,3722,3723],{},"mix",[2071,3725,3726],{"align":2054},"Overall strength of the reflection",[2071,3728,3729],{},[540,3730,2495],{},[2049,3732,3733,3738,3741],{},[2071,3734,3735],{"align":2054},[540,3736,3737],{},"sharpMix",[2071,3739,3740],{"align":2054},"Strength of the sharp reflection on smooth surfaces",[2071,3742,3743],{},[540,3744,2495],{},[2049,3746,3747,3752,3758],{},[2071,3748,3749],{"align":2054},[540,3750,3751],{},"sharpDepthScale",[2071,3753,3754,3755,3757],{"align":2054},"Sharp reflection can be faded out by depth – distance from the reflective surface. Performance note: if the value is greater than ",[540,3756,889],{},", a depth texture will be created",[2071,3759,3760],{},[540,3761,2495],{},[2049,3763,3764,3769,3772],{},[2071,3765,3766],{"align":2054},[540,3767,3768],{},"sharpDepthBias",[2071,3770,3771],{"align":2054},"Sharp reflection depth falloff bias",[2071,3773,3774],{},[540,3775,889],{},[2049,3777,3778,3783,3786],{},[2071,3779,3780],{"align":2054},[540,3781,3782],{},"sharpDepthEdgeMin",[2071,3784,3785],{"align":2054},"Sharp reflection depth falloff start",[2071,3787,3788],{},[540,3789,889],{},[2049,3791,3792,3797,3800],{},[2071,3793,3794],{"align":2054},[540,3795,3796],{},"sharpDepthEdgeMax",[2071,3798,3799],{"align":2054},"Sharp reflection depth falloff end",[2071,3801,3802],{},[540,3803,919],{},[2049,3805,3806,3811,3814],{},[2071,3807,3808],{"align":2054},[540,3809,3810],{},"blurMixSmooth",[2071,3812,3813],{"align":2054},"Strength of the blurred reflection on smooth surfaces",[2071,3815,3816],{},[540,3817,2495],{},[2049,3819,3820,3825,3828],{},[2071,3821,3822],{"align":2054},[540,3823,3824],{},"blurMixRough",[2071,3826,3827],{"align":2054},"Strength of the blurred reflection on rough surfaces",[2071,3829,3830],{},[540,3831,2495],{},[2049,3833,3834,3839,3845],{},[2071,3835,3836],{"align":2054},[540,3837,3838],{},"blurDepthScale",[2071,3840,3841,3842,3844],{"align":2054},"Blurred reflection can spread out by depth – distance from the reflective surface. Performance note: if the value is greater than ",[540,3843,889],{},", depth texture will be rendered",[2071,3846,3847],{},[540,3848,2495],{},[2049,3850,3851,3856,3859],{},[2071,3852,3853],{"align":2054},[540,3854,3855],{},"blurDepthBias",[2071,3857,3858],{"align":2054},"Blurred reflection depth spread bias",[2071,3860,3861],{},[540,3862,889],{},[2049,3864,3865,3870,3873],{},[2071,3866,3867],{"align":2054},[540,3868,3869],{},"blurDepthEdgeMin",[2071,3871,3872],{"align":2054},"Blurred reflection depth spread start",[2071,3874,3875],{},[540,3876,889],{},[2049,3878,3879,3884,3887],{},[2071,3880,3881],{"align":2054},[540,3882,3883],{},"blurDepthEdgeMax",[2071,3885,3886],{"align":2054},"Blurred reflection depth spread end",[2071,3888,3889],{},[540,3890,919],{},[2049,3892,3893,3898,3912],{},[2071,3894,3895],{"align":2054},[540,3896,3897],{},"blurSize",[2071,3899,3900,3901,3904,3905,3908,3909,3911],{"align":2054},"Size of the blur. If ",[540,3902,3903],{},"[number, number]",", first number is width, second is height. Performance note: if other than ",[540,3906,3907],{},"[0, 0]"," or ",[540,3910,889],{},", a blur texture will be rendered",[2071,3913,3914],{},[540,3915,3907],{},[2049,3917,3918,3923,3926],{},[2071,3919,3920],{"align":2054},[540,3921,3922],{},"distortionMap",[2071,3924,3925],{"align":2054},"Texture for offsetting the reflection",[2071,3927,3928],{},[540,3929,3930],{},"undefined",[2049,3932,3933,3938,3943],{},[2071,3934,3935],{"align":2054},[540,3936,3937],{},"distortion",[2071,3939,3940,3941],{"align":2054},"Influence of ",[540,3942,3922],{},[2071,3944,3945],{},[540,3946,889],{},[2049,3948,3949,3954,3957],{},[2071,3950,3951],{"align":2054},[540,3952,3953],{},"reflectorOffset",[2071,3955,3956],{"align":2054},"Offsets the reflection",[2071,3958,3959],{},[540,3960,889],{},[536,3962,3963,3964,3966,3967,762,3969,762,3972,762,3975,762,3977,762,3980,762,3983,3986],{},"Additionally, the component extends ",[540,3965,3190],{}," and accepts all the same props including ",[540,3968,1047],{},[540,3970,3971],{},"roughness",[540,3973,3974],{},"metalness",[540,3976,1030],{},[540,3978,3979],{},"normalMap",[540,3981,3982],{},"roughnessMap",[540,3984,3985],{},"metalnessMap",", and more.",[1121,3988,2279],{},{"title":508,"searchDepth":509,"depth":510,"links":3990},[3991,3992],{"id":566,"depth":510,"text":15},{"id":1104,"depth":510,"text":1105},"Makes floors or walls that reflect the objects in your Scene.",{},{"title":195,"description":3993},"SmQ10ERsYJAK7ytDjV3ZCr9APJRPR6MGXbpwBm6D2G8",{"id":3998,"title":199,"body":3999,"description":4807,"extension":513,"links":514,"meta":4808,"navigation":516,"path":200,"seo":4809,"stem":201,"__hash__":4810},"docs\u002F2.api\u002F4.materials\u002Fmesh-transmission-material.md",{"type":501,"value":4000,"toc":4802},[4001,4006,4014,4021,4030,4032,4329,4331,4756,4761,4763,4800],[1806,4002,4003],{},[4004,4005],"materials-mesh-transmission-material",{},[536,4007,538,4008,2474,4010,4013],{},[540,4009,542],{},[540,4011,4012],{},"\u003CMeshTransmissionMaterial \u002F>"," component that produces high-quality glass and transmission effects.",[536,4015,4016,4017,4020],{},"The material renders the scene into a buffer texture each frame to simulate refraction, chromatic aberration, distortion, and anisotropic blur, effects that ",[540,4018,4019],{},"\u003CTresMeshPhysicalMaterial>"," alone cannot achieve.",[1822,4022,4023],{},[536,4024,2501,4025,2508],{},[549,4026,4029],{"href":4027,"rel":4028,"target":2506},"https:\u002F\u002Fdrei.docs.pmnd.rs\u002Fshaders\u002Fmesh-transmission-material",[553],"drei MeshTransmissionMaterial",[564,4031,15],{"id":566},[568,4033,4036],{"className":570,"code":4034,"highlights":4035,"language":588,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { MeshTransmissionMaterial, Environment } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 0, 5]\" \u002F>\n    \u003CEnvironment preset=\"city\" \u002F>\n    \u003CTresMesh>\n      \u003CTresTorusKnotGeometry :args=\"[1, 0.3, 128, 32]\" \u002F>\n      \u003CMeshTransmissionMaterial\n        :transmission=\"1\"\n        :thickness=\"0.5\"\n        :chromatic-aberration=\"0.03\"\n        :resolution=\"512\"\n      \u002F>\n    \u003C\u002FTresMesh>\n  \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[657,736,779,789,573,574,575,576],[540,4037,4038,4058,4076,4101,4109,4113,4121,4129,4162,4182,4191,4229,4237,4253,4269,4286,4301,4305,4313,4321],{"__ignoreMap":508},[592,4039,4040,4042,4044,4046,4048,4050,4052,4054,4056],{"class":594,"line":509},[592,4041,598],{"class":597},[592,4043,602],{"class":601},[592,4045,606],{"class":605},[592,4047,609],{"class":605},[592,4049,612],{"class":597},[592,4051,615],{"class":597},[592,4053,619],{"class":618},[592,4055,615],{"class":597},[592,4057,624],{"class":597},[592,4059,4060,4062,4064,4066,4068,4070,4072,4074],{"class":594,"line":510},[592,4061,632],{"class":631},[592,4063,635],{"class":597},[592,4065,1194],{"class":638},[592,4067,642],{"class":597},[592,4069,645],{"class":631},[592,4071,648],{"class":597},[592,4073,1203],{"class":618},[592,4075,654],{"class":597},[592,4077,4079,4081,4083,4086,4088,4091,4093,4095,4097,4099],{"class":4078,"line":657},[594,628],[592,4080,632],{"class":631},[592,4082,635],{"class":597},[592,4084,4085],{"class":638}," MeshTransmissionMaterial",[592,4087,1454],{"class":597},[592,4089,4090],{"class":638}," Environment",[592,4092,642],{"class":597},[592,4094,645],{"class":631},[592,4096,648],{"class":597},[592,4098,651],{"class":618},[592,4100,654],{"class":597},[592,4102,4103,4105,4107],{"class":594,"line":677},[592,4104,703],{"class":597},[592,4106,602],{"class":601},[592,4108,624],{"class":597},[592,4110,4111],{"class":594,"line":683},[592,4112,680],{"emptyLinePlaceholder":516},[592,4114,4115,4117,4119],{"class":594,"line":700},[592,4116,598],{"class":597},[592,4118,720],{"class":601},[592,4120,624],{"class":597},[592,4122,4123,4125,4127],{"class":594,"line":710},[592,4124,728],{"class":597},[592,4126,731],{"class":601},[592,4128,624],{"class":597},[592,4130,4131,4133,4135,4137,4139,4141,4143,4145,4147,4149,4151,4153,4156,4158,4160],{"class":594,"line":715},[592,4132,739],{"class":597},[592,4134,742],{"class":601},[592,4136,745],{"class":597},[592,4138,748],{"class":605},[592,4140,612],{"class":597},[592,4142,615],{"class":597},[592,4144,755],{"class":597},[592,4146,889],{"class":758},[592,4148,762],{"class":597},[592,4150,889],{"class":758},[592,4152,762],{"class":597},[592,4154,4155],{"class":758},"5",[592,4157,771],{"class":597},[592,4159,615],{"class":597},[592,4161,776],{"class":597},[592,4163,4164,4166,4168,4171,4173,4175,4178,4180],{"class":594,"line":725},[592,4165,739],{"class":597},[592,4167,375],{"class":601},[592,4169,4170],{"class":605}," preset",[592,4172,612],{"class":597},[592,4174,615],{"class":597},[592,4176,4177],{"class":618},"city",[592,4179,615],{"class":597},[592,4181,776],{"class":597},[592,4183,4185,4187,4189],{"class":4184,"line":736},[594,628],[592,4186,739],{"class":597},[592,4188,784],{"class":601},[592,4190,624],{"class":597},[592,4192,4194,4196,4198,4200,4202,4204,4206,4208,4210,4212,4215,4217,4219,4221,4223,4225,4227],{"class":4193,"line":779},[594,628],[592,4195,792],{"class":597},[592,4197,2774],{"class":601},[592,4199,745],{"class":597},[592,4201,2667],{"class":605},[592,4203,612],{"class":597},[592,4205,615],{"class":597},[592,4207,755],{"class":597},[592,4209,2495],{"class":758},[592,4211,762],{"class":597},[592,4213,4214],{"class":758},"0.3",[592,4216,762],{"class":597},[592,4218,2797],{"class":758},[592,4220,762],{"class":597},[592,4222,2802],{"class":758},[592,4224,771],{"class":597},[592,4226,615],{"class":597},[592,4228,776],{"class":597},[592,4230,4232,4234],{"class":4231,"line":789},[594,628],[592,4233,792],{"class":597},[592,4235,4236],{"class":601},"MeshTransmissionMaterial\n",[592,4238,4240,4242,4245,4247,4249,4251],{"class":4239,"line":573},[594,628],[592,4241,827],{"class":597},[592,4243,4244],{"class":605},"transmission",[592,4246,612],{"class":597},[592,4248,615],{"class":597},[592,4250,2495],{"class":758},[592,4252,821],{"class":597},[592,4254,4256,4258,4261,4263,4265,4267],{"class":4255,"line":574},[594,628],[592,4257,827],{"class":597},[592,4259,4260],{"class":605},"thickness",[592,4262,612],{"class":597},[592,4264,615],{"class":597},[592,4266,1993],{"class":758},[592,4268,821],{"class":597},[592,4270,4272,4274,4277,4279,4281,4284],{"class":4271,"line":575},[594,628],[592,4273,827],{"class":597},[592,4275,4276],{"class":605},"chromatic-aberration",[592,4278,612],{"class":597},[592,4280,615],{"class":597},[592,4282,4283],{"class":758},"0.03",[592,4285,821],{"class":597},[592,4287,4289,4291,4293,4295,4297,4299],{"class":4288,"line":576},[594,628],[592,4290,827],{"class":597},[592,4292,2920],{"class":605},[592,4294,612],{"class":597},[592,4296,615],{"class":597},[592,4298,2929],{"class":758},[592,4300,821],{"class":597},[592,4302,4303],{"class":594,"line":577},[592,4304,1062],{"class":597},[592,4306,4307,4309,4311],{"class":594,"line":578},[592,4308,1068],{"class":597},[592,4310,784],{"class":601},[592,4312,624],{"class":597},[592,4314,4315,4317,4319],{"class":594,"line":579},[592,4316,1088],{"class":597},[592,4318,731],{"class":601},[592,4320,624],{"class":597},[592,4322,4323,4325,4327],{"class":594,"line":580},[592,4324,703],{"class":597},[592,4326,720],{"class":601},[592,4328,624],{"class":597},[564,4330,1105],{"id":1104},[2043,4332,4333,4346],{},[2046,4334,4335],{},[2049,4336,4337,4339,4341,4343],{},[2052,4338,2055],{"align":2054},[2052,4340,2058],{"align":2054},[2052,4342,2061],{"align":2054},[2052,4344,2886],{"align":4345},"center",[2066,4347,4348,4369,4386,4403,4421,4439,4456,4474,4492,4511,4530,4548,4566,4585,4603,4621,4639,4656,4676,4695,4714,4735],{},[2049,4349,4350,4354,4361,4365],{},[2071,4351,4352],{"align":2054},[540,4353,4244],{},[2071,4355,4356,4357,4360],{"align":2054},"Glass opacity (maps to the internal ",[540,4358,4359],{},"_transmission"," uniform)",[2071,4362,4363],{"align":2054},[540,4364,2901],{},[2071,4366,4367],{"align":4345},[540,4368,2495],{},[2049,4370,4371,4375,4378,4382],{},[2071,4372,4373],{"align":2054},[540,4374,4260],{},[2071,4376,4377],{"align":2054},"Thickness of the glass volume",[2071,4379,4380],{"align":2054},[540,4381,2901],{},[2071,4383,4384],{"align":4345},[540,4385,889],{},[2049,4387,4388,4392,4395,4399],{},[2071,4389,4390],{"align":2054},[540,4391,3971],{},[2071,4393,4394],{"align":2054},"Surface roughness",[2071,4396,4397],{"align":2054},[540,4398,2901],{},[2071,4400,4401],{"align":4345},[540,4402,889],{},[2049,4404,4405,4410,4413,4417],{},[2071,4406,4407],{"align":2054},[540,4408,4409],{},"chromaticAberration",[2071,4411,4412],{"align":2054},"Chromatic aberration intensity",[2071,4414,4415],{"align":2054},[540,4416,2901],{},[2071,4418,4419],{"align":4345},[540,4420,4283],{},[2049,4422,4423,4428,4431,4435],{},[2071,4424,4425],{"align":2054},[540,4426,4427],{},"anisotropicBlur",[2071,4429,4430],{"align":2054},"Anisotropic blur amount",[2071,4432,4433],{"align":2054},[540,4434,2901],{},[2071,4436,4437],{"align":4345},[540,4438,929],{},[2049,4440,4441,4445,4448,4452],{},[2071,4442,4443],{"align":2054},[540,4444,3937],{},[2071,4446,4447],{"align":2054},"Distortion amount",[2071,4449,4450],{"align":2054},[540,4451,2901],{},[2071,4453,4454],{"align":4345},[540,4455,889],{},[2049,4457,4458,4463,4466,4470],{},[2071,4459,4460],{"align":2054},[540,4461,4462],{},"distortionScale",[2071,4464,4465],{"align":2054},"Scale of the distortion noise",[2071,4467,4468],{"align":2054},[540,4469,2901],{},[2071,4471,4472],{"align":4345},[540,4473,1993],{},[2049,4475,4476,4481,4484,4488],{},[2071,4477,4478],{"align":2054},[540,4479,4480],{},"temporalDistortion",[2071,4482,4483],{"align":2054},"Animates the distortion over time",[2071,4485,4486],{"align":2054},[540,4487,2901],{},[2071,4489,4490],{"align":4345},[540,4491,889],{},[2049,4493,4494,4499,4502,4506],{},[2071,4495,4496],{"align":2054},[540,4497,4498],{},"ior",[2071,4500,4501],{"align":2054},"Index of refraction",[2071,4503,4504],{"align":2054},[540,4505,2901],{},[2071,4507,4508],{"align":4345},[540,4509,4510],{},"1.5",[2049,4512,4513,4517,4520,4525],{},[2071,4514,4515],{"align":2054},[540,4516,1047],{},[2071,4518,4519],{"align":2054},"Base color of the glass",[2071,4521,4522],{"align":2054},[540,4523,4524],{},"TresColor",[2071,4526,4527],{"align":4345},[540,4528,4529],{},"white",[2049,4531,4532,4537,4540,4544],{},[2071,4533,4534],{"align":2054},[540,4535,4536],{},"clearcoat",[2071,4538,4539],{"align":2054},"Clearcoat layer intensity",[2071,4541,4542],{"align":2054},[540,4543,2901],{},[2071,4545,4546],{"align":4345},[540,4547,889],{},[2049,4549,4550,4555,4558,4562],{},[2071,4551,4552],{"align":2054},[540,4553,4554],{},"clearcoatRoughness",[2071,4556,4557],{"align":2054},"Clearcoat roughness",[2071,4559,4560],{"align":2054},[540,4561,2901],{},[2071,4563,4564],{"align":4345},[540,4565,889],{},[2049,4567,4568,4573,4576,4580],{},[2071,4569,4570],{"align":2054},[540,4571,4572],{},"attenuationDistance",[2071,4574,4575],{"align":2054},"Distance at which light is attenuated through the volume",[2071,4577,4578],{"align":2054},[540,4579,2901],{},[2071,4581,4582],{"align":4345},[540,4583,4584],{},"Infinity",[2049,4586,4587,4592,4595,4599],{},[2071,4588,4589],{"align":2054},[540,4590,4591],{},"attenuationColor",[2071,4593,4594],{"align":2054},"Color the light shifts to as it passes through the volume",[2071,4596,4597],{"align":2054},[540,4598,4524],{},[2071,4600,4601],{"align":4345},[540,4602,4529],{},[2049,4604,4605,4610,4613,4617],{},[2071,4606,4607],{"align":2054},[540,4608,4609],{},"backside",[2071,4611,4612],{"align":2054},"Render back faces into a separate buffer for proper glass thickness",[2071,4614,4615],{"align":2054},[540,4616,2944],{},[2071,4618,4619],{"align":4345},[540,4620,2949],{},[2049,4622,4623,4628,4631,4635],{},[2071,4624,4625],{"align":2054},[540,4626,4627],{},"backsideThickness",[2071,4629,4630],{"align":2054},"Thickness used during the backside pass",[2071,4632,4633],{"align":2054},[540,4634,2901],{},[2071,4636,4637],{"align":4345},[540,4638,889],{},[2049,4640,4641,4645,4648,4652],{},[2071,4642,4643],{"align":2054},[540,4644,2920],{},[2071,4646,4647],{"align":2054},"Resolution of the FBO render target in pixels",[2071,4649,4650],{"align":2054},[540,4651,2901],{},[2071,4653,4654],{"align":4345},[540,4655,3716],{},[2049,4657,4658,4663,4668,4672],{},[2071,4659,4660],{"align":2054},[540,4661,4662],{},"backsideResolution",[2071,4664,4665,4666],{"align":2054},"Resolution of the backside FBO. Defaults to ",[540,4667,2920],{},[2071,4669,4670],{"align":2054},[540,4671,2901],{},[2071,4673,4674],{"align":4345},[540,4675,2920],{},[2049,4677,4678,4683,4686,4691],{},[2071,4679,4680],{"align":2054},[540,4681,4682],{},"background",[2071,4684,4685],{"align":2054},"Override the scene background during the FBO pass",[2071,4687,4688],{"align":2054},[540,4689,4690],{},"THREE.Color | null",[2071,4692,4693],{"align":4345},[540,4694,3930],{},[2049,4696,4697,4702,4705,4710],{},[2071,4698,4699],{"align":2054},[540,4700,4701],{},"buffer",[2071,4703,4704],{"align":2054},"Supply your own render-target texture, skipping the internal FBO pass",[2071,4706,4707],{"align":2054},[540,4708,4709],{},"THREE.Texture | null",[2071,4711,4712],{"align":4345},[540,4713,3930],{},[2049,4715,4716,4721,4727,4731],{},[2071,4717,4718],{"align":2054},[540,4719,4720],{},"samples",[2071,4722,4723,4724],{"align":2054},"Number of refraction samples. ",[2074,4725,4726],{},"Baked at compile time — changing requires remount.",[2071,4728,4729],{"align":2054},[540,4730,2901],{},[2071,4732,4733],{"align":4345},[540,4734,2632],{},[2049,4736,4737,4742,4748,4752],{},[2071,4738,4739],{"align":2054},[540,4740,4741],{},"transmissionSampler",[2071,4743,4744,4745],{"align":2054},"Use THREE's built-in transmission sampler instead of an FBO pass. ",[2074,4746,4747],{},"Baked at compile time.",[2071,4749,4750],{"align":2054},[540,4751,2944],{},[2071,4753,4754],{"align":4345},[540,4755,2949],{},[536,4757,4758,4759,3191],{},"The component extends ",[540,4760,1411],{},[564,4762,1774],{"id":1773},[1776,4764,4765,4774,4782,4791],{},[1779,4766,4767,4768,3908,4770,4773],{},"An ",[540,4769,3098],{},[540,4771,4772],{},"envMap"," on the scene is strongly recommended. Without one, the material will render dark.",[1779,4775,4776,4778,4779,4781],{},[540,4777,4720],{}," and ",[540,4780,4741],{}," are baked into the shader at compile time. Changing them at runtime triggers a remount automatically.",[1779,4783,4784,4785,4787,4788,4790],{},"Enable ",[540,4786,4609],{}," with a non-zero ",[540,4789,4627],{}," for more convincing thick-glass effects.",[1779,4792,4793,4794,4796,4797,4799],{},"Lower ",[540,4795,2920],{}," (e.g. ",[540,4798,2797],{},") improves performance at the cost of refraction sharpness.",[1121,4801,2279],{},{"title":508,"searchDepth":509,"depth":510,"links":4803},[4804,4805,4806],{"id":566,"depth":510,"text":15},{"id":1104,"depth":510,"text":1105},{"id":1773,"depth":510,"text":1774},"A glass-like transmission material with chromatic aberration, distortion, and backside support. Ported from drei.",{},{"title":199,"description":4807},"JXXQY2ymiMvhSZOeVYtoqrgWJNCIjgEE1iuIN4xyLPI",{"id":4812,"title":203,"body":4813,"description":5130,"extension":513,"links":514,"meta":5131,"navigation":516,"path":204,"seo":5132,"stem":205,"__hash__":5133},"docs\u002F2.api\u002F4.materials\u002Fpoint-material.md",{"type":501,"value":4814,"toc":5126},[4815,4820,4830,4835,4837,5108,5110,5124],[530,4816,4817],{},[4818,4819],"materials-point-material",{},[536,4821,4822,4825,4826,4829],{},[540,4823,4824],{},"\u003CPointMaterial \u002F>"," extends ",[540,4827,4828],{},"THREE.PointsMaterial",". It renders the points as dots, rather than the default squares.",[3108,4831,4832],{},[536,4833,4834],{},"N.B., stacking order and transparency of objects using THREE.PointsMaterial and by extension PointMaterial can be somewhat unintuitive, especially when combined with other on-screen objects. Please see discussions at threejs.org for more infomation.",[564,4836,15],{"id":566},[568,4838,4841],{"className":570,"code":4839,"highlights":4840,"language":588,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { PointMaterial, OrbitControls } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" :look-at=\"[0, 0, 0]\" \u002F>\n    \u003COrbitControls \u002F>\n    \u003CTresPoints>\n      \u003CTresIcosahedronGeometry :args=\"[1, 4]\" \u002F>\n      \u003CPointMaterial\n        :size=\"5\"\n        color=\"orange\"\n      \u002F>\n    \u003C\u002FTresPoints>\n    \u003CTresAmbientLight \u002F>\n  \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[657,789,573,574],[540,4842,4843,4863,4881,4905,4913,4917,4925,4933,4989,4997,5006,5035,5043,5059,5072,5076,5084,5092,5100],{"__ignoreMap":508},[592,4844,4845,4847,4849,4851,4853,4855,4857,4859,4861],{"class":594,"line":509},[592,4846,598],{"class":597},[592,4848,602],{"class":601},[592,4850,606],{"class":605},[592,4852,609],{"class":605},[592,4854,612],{"class":597},[592,4856,615],{"class":597},[592,4858,619],{"class":618},[592,4860,615],{"class":597},[592,4862,624],{"class":597},[592,4864,4865,4867,4869,4871,4873,4875,4877,4879],{"class":594,"line":510},[592,4866,632],{"class":631},[592,4868,635],{"class":597},[592,4870,1194],{"class":638},[592,4872,642],{"class":597},[592,4874,645],{"class":631},[592,4876,648],{"class":597},[592,4878,1203],{"class":618},[592,4880,654],{"class":597},[592,4882,4884,4886,4888,4891,4893,4895,4897,4899,4901,4903],{"class":4883,"line":657},[594,628],[592,4885,632],{"class":631},[592,4887,635],{"class":597},[592,4889,4890],{"class":638}," PointMaterial",[592,4892,1454],{"class":597},[592,4894,2567],{"class":638},[592,4896,642],{"class":597},[592,4898,645],{"class":631},[592,4900,648],{"class":597},[592,4902,651],{"class":618},[592,4904,654],{"class":597},[592,4906,4907,4909,4911],{"class":594,"line":677},[592,4908,703],{"class":597},[592,4910,602],{"class":601},[592,4912,624],{"class":597},[592,4914,4915],{"class":594,"line":683},[592,4916,680],{"emptyLinePlaceholder":516},[592,4918,4919,4921,4923],{"class":594,"line":700},[592,4920,598],{"class":597},[592,4922,720],{"class":601},[592,4924,624],{"class":597},[592,4926,4927,4929,4931],{"class":594,"line":710},[592,4928,728],{"class":597},[592,4930,731],{"class":601},[592,4932,624],{"class":597},[592,4934,4935,4937,4939,4941,4943,4945,4947,4949,4951,4953,4955,4957,4959,4961,4963,4965,4967,4969,4971,4973,4975,4977,4979,4981,4983,4985,4987],{"class":594,"line":715},[592,4936,739],{"class":597},[592,4938,742],{"class":601},[592,4940,745],{"class":597},[592,4942,748],{"class":605},[592,4944,612],{"class":597},[592,4946,615],{"class":597},[592,4948,755],{"class":597},[592,4950,759],{"class":758},[592,4952,762],{"class":597},[592,4954,759],{"class":758},[592,4956,762],{"class":597},[592,4958,759],{"class":758},[592,4960,771],{"class":597},[592,4962,615],{"class":597},[592,4964,745],{"class":597},[592,4966,1287],{"class":605},[592,4968,612],{"class":597},[592,4970,615],{"class":597},[592,4972,755],{"class":597},[592,4974,889],{"class":758},[592,4976,762],{"class":597},[592,4978,889],{"class":758},[592,4980,762],{"class":597},[592,4982,889],{"class":758},[592,4984,771],{"class":597},[592,4986,615],{"class":597},[592,4988,776],{"class":597},[592,4990,4991,4993,4995],{"class":594,"line":725},[592,4992,739],{"class":597},[592,4994,2645],{"class":601},[592,4996,776],{"class":597},[592,4998,4999,5001,5004],{"class":594,"line":736},[592,5000,739],{"class":597},[592,5002,5003],{"class":601},"TresPoints",[592,5005,624],{"class":597},[592,5007,5008,5010,5013,5015,5017,5019,5021,5023,5025,5027,5029,5031,5033],{"class":594,"line":779},[592,5009,792],{"class":597},[592,5011,5012],{"class":601},"TresIcosahedronGeometry",[592,5014,745],{"class":597},[592,5016,2667],{"class":605},[592,5018,612],{"class":597},[592,5020,615],{"class":597},[592,5022,755],{"class":597},[592,5024,2495],{"class":758},[592,5026,762],{"class":597},[592,5028,1381],{"class":758},[592,5030,771],{"class":597},[592,5032,615],{"class":597},[592,5034,776],{"class":597},[592,5036,5038,5040],{"class":5037,"line":789},[594,628],[592,5039,792],{"class":597},[592,5041,5042],{"class":601},"PointMaterial\n",[592,5044,5046,5048,5051,5053,5055,5057],{"class":5045,"line":573},[594,628],[592,5047,827],{"class":597},[592,5049,5050],{"class":605},"size",[592,5052,612],{"class":597},[592,5054,615],{"class":597},[592,5056,4155],{"class":758},[592,5058,821],{"class":597},[592,5060,5062,5064,5066,5068,5070],{"class":5061,"line":574},[594,628],[592,5063,3499],{"class":605},[592,5065,612],{"class":597},[592,5067,615],{"class":597},[592,5069,3617],{"class":618},[592,5071,821],{"class":597},[592,5073,5074],{"class":594,"line":575},[592,5075,1062],{"class":597},[592,5077,5078,5080,5082],{"class":594,"line":576},[592,5079,1068],{"class":597},[592,5081,5003],{"class":601},[592,5083,624],{"class":597},[592,5085,5086,5088,5090],{"class":594,"line":577},[592,5087,739],{"class":597},[592,5089,1080],{"class":601},[592,5091,776],{"class":597},[592,5093,5094,5096,5098],{"class":594,"line":578},[592,5095,1088],{"class":597},[592,5097,731],{"class":601},[592,5099,624],{"class":597},[592,5101,5102,5104,5106],{"class":594,"line":579},[592,5103,703],{"class":597},[592,5105,720],{"class":601},[592,5107,624],{"class":597},[564,5109,1105],{"id":1104},[536,5111,5112,5113,5120,5121,562],{},"All ",[549,5114,5117,5119],{"href":5115,"rel":5116},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#api\u002Fen\u002Fmaterials\u002FPointsMaterial",[553],[540,5118,4828],{}," properties"," are inherited by ",[540,5122,5123],{},"PointMaterial",[1121,5125,2279],{},{"title":508,"searchDepth":509,"depth":510,"links":5127},[5128,5129],{"id":566,"depth":510,"text":15},{"id":1104,"depth":510,"text":1105},"Extends THREE.PointsMaterial to render points as dots rather than squares.",{},{"title":203,"description":5130},"Aajs-h_7UFOgfUg69Q5QfqvfyKDHM1UKxS8GfRKzI2U",{"id":5135,"title":207,"body":5136,"description":5493,"extension":513,"links":514,"meta":5494,"navigation":516,"path":208,"seo":5495,"stem":209,"__hash__":5496},"docs\u002F2.api\u002F4.materials\u002Fwobble-material.md",{"type":501,"value":5137,"toc":5489},[5138,5143,5151,5153,5440,5442,5482,5487],[1806,5139,5140],{},[5141,5142],"materials-wobble-material",{},[536,5144,538,5145,2474,5147,5150],{},[540,5146,542],{},[540,5148,5149],{},"\u003CMeshWobbleMaterial \u002F>"," component that makes a geometry wobble and wave around.",[564,5152,15],{"id":566},[568,5154,5157],{"className":570,"code":5155,"highlights":5156,"language":588,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { MeshWobbleMaterial } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" :look-at=\"[0, 0, 0]\" \u002F>\n    \u003CTresMesh>\n      \u003CTresTorusGeometry \u002F>\n      \u003CMeshWobbleMaterial\n        color=\"#f25042\"\n        :speed=\"1\"\n        :factor=\"0.6\"\n      \u002F>\n    \u003C\u002FTresMesh>\n    \u003CTresAmbientLight \u002F>\n    \u003CTresDirectionalLight :position=\"[0, 2, 4]\" \u002F>\n  \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[657,779,789,573,574,575],[540,5158,5159,5179,5197,5217,5225,5229,5237,5245,5301,5309,5317,5325,5339,5355,5371,5376,5384,5392,5424,5432],{"__ignoreMap":508},[592,5160,5161,5163,5165,5167,5169,5171,5173,5175,5177],{"class":594,"line":509},[592,5162,598],{"class":597},[592,5164,602],{"class":601},[592,5166,606],{"class":605},[592,5168,609],{"class":605},[592,5170,612],{"class":597},[592,5172,615],{"class":597},[592,5174,619],{"class":618},[592,5176,615],{"class":597},[592,5178,624],{"class":597},[592,5180,5181,5183,5185,5187,5189,5191,5193,5195],{"class":594,"line":510},[592,5182,632],{"class":631},[592,5184,635],{"class":597},[592,5186,1194],{"class":638},[592,5188,642],{"class":597},[592,5190,645],{"class":631},[592,5192,648],{"class":597},[592,5194,1203],{"class":618},[592,5196,654],{"class":597},[592,5198,5200,5202,5204,5207,5209,5211,5213,5215],{"class":5199,"line":657},[594,628],[592,5201,632],{"class":631},[592,5203,635],{"class":597},[592,5205,5206],{"class":638}," MeshWobbleMaterial",[592,5208,642],{"class":597},[592,5210,645],{"class":631},[592,5212,648],{"class":597},[592,5214,651],{"class":618},[592,5216,654],{"class":597},[592,5218,5219,5221,5223],{"class":594,"line":677},[592,5220,703],{"class":597},[592,5222,602],{"class":601},[592,5224,624],{"class":597},[592,5226,5227],{"class":594,"line":683},[592,5228,680],{"emptyLinePlaceholder":516},[592,5230,5231,5233,5235],{"class":594,"line":700},[592,5232,598],{"class":597},[592,5234,720],{"class":601},[592,5236,624],{"class":597},[592,5238,5239,5241,5243],{"class":594,"line":710},[592,5240,728],{"class":597},[592,5242,731],{"class":601},[592,5244,624],{"class":597},[592,5246,5247,5249,5251,5253,5255,5257,5259,5261,5263,5265,5267,5269,5271,5273,5275,5277,5279,5281,5283,5285,5287,5289,5291,5293,5295,5297,5299],{"class":594,"line":715},[592,5248,739],{"class":597},[592,5250,742],{"class":601},[592,5252,745],{"class":597},[592,5254,748],{"class":605},[592,5256,612],{"class":597},[592,5258,615],{"class":597},[592,5260,755],{"class":597},[592,5262,759],{"class":758},[592,5264,762],{"class":597},[592,5266,759],{"class":758},[592,5268,762],{"class":597},[592,5270,759],{"class":758},[592,5272,771],{"class":597},[592,5274,615],{"class":597},[592,5276,745],{"class":597},[592,5278,1287],{"class":605},[592,5280,612],{"class":597},[592,5282,615],{"class":597},[592,5284,755],{"class":597},[592,5286,889],{"class":758},[592,5288,762],{"class":597},[592,5290,889],{"class":758},[592,5292,762],{"class":597},[592,5294,889],{"class":758},[592,5296,771],{"class":597},[592,5298,615],{"class":597},[592,5300,776],{"class":597},[592,5302,5303,5305,5307],{"class":594,"line":725},[592,5304,739],{"class":597},[592,5306,784],{"class":601},[592,5308,624],{"class":597},[592,5310,5311,5313,5315],{"class":594,"line":736},[592,5312,792],{"class":597},[592,5314,1325],{"class":601},[592,5316,776],{"class":597},[592,5318,5320,5322],{"class":5319,"line":779},[594,628],[592,5321,792],{"class":597},[592,5323,5324],{"class":601},"MeshWobbleMaterial\n",[592,5326,5328,5330,5332,5334,5337],{"class":5327,"line":789},[594,628],[592,5329,3499],{"class":605},[592,5331,612],{"class":597},[592,5333,615],{"class":597},[592,5335,5336],{"class":618},"#f25042",[592,5338,821],{"class":597},[592,5340,5342,5344,5347,5349,5351,5353],{"class":5341,"line":573},[594,628],[592,5343,827],{"class":597},[592,5345,5346],{"class":605},"speed",[592,5348,612],{"class":597},[592,5350,615],{"class":597},[592,5352,2495],{"class":758},[592,5354,821],{"class":597},[592,5356,5358,5360,5363,5365,5367,5369],{"class":5357,"line":574},[594,628],[592,5359,827],{"class":597},[592,5361,5362],{"class":605},"factor",[592,5364,612],{"class":597},[592,5366,615],{"class":597},[592,5368,2787],{"class":758},[592,5370,821],{"class":597},[592,5372,5374],{"class":5373,"line":575},[594,628],[592,5375,1062],{"class":597},[592,5377,5378,5380,5382],{"class":594,"line":576},[592,5379,1068],{"class":597},[592,5381,784],{"class":601},[592,5383,624],{"class":597},[592,5385,5386,5388,5390],{"class":594,"line":577},[592,5387,739],{"class":597},[592,5389,1080],{"class":601},[592,5391,776],{"class":597},[592,5393,5394,5396,5398,5400,5402,5404,5406,5408,5410,5412,5414,5416,5418,5420,5422],{"class":594,"line":578},[592,5395,739],{"class":597},[592,5397,1359],{"class":601},[592,5399,745],{"class":597},[592,5401,748],{"class":605},[592,5403,612],{"class":597},[592,5405,615],{"class":597},[592,5407,755],{"class":597},[592,5409,889],{"class":758},[592,5411,762],{"class":597},[592,5413,1376],{"class":758},[592,5415,762],{"class":597},[592,5417,1381],{"class":758},[592,5419,771],{"class":597},[592,5421,615],{"class":597},[592,5423,776],{"class":597},[592,5425,5426,5428,5430],{"class":594,"line":579},[592,5427,1088],{"class":597},[592,5429,731],{"class":601},[592,5431,624],{"class":597},[592,5433,5434,5436,5438],{"class":594,"line":580},[592,5435,703],{"class":597},[592,5437,720],{"class":601},[592,5439,624],{"class":597},[564,5441,1105],{"id":1104},[2043,5443,5444,5454],{},[2046,5445,5446],{},[2049,5447,5448,5450,5452],{},[2052,5449,2055],{"align":2054},[2052,5451,2058],{"align":2054},[2052,5453,2886],{},[2066,5455,5456,5469],{},[2049,5457,5458,5462,5465],{},[2071,5459,5460],{"align":2054},[2074,5461,5346],{},[2071,5463,5464],{"align":2054},"how fast the wobble effect would be.",[2071,5466,5467],{},[540,5468,2495],{},[2049,5470,5471,5475,5478],{},[2071,5472,5473],{"align":2054},[2074,5474,5362],{},[2071,5476,5477],{"align":2054},"how strong the wobble effect will deform the geometry",[2071,5479,5480],{},[540,5481,2495],{},[536,5483,5484,5485,1412],{},"This material extends ",[540,5486,3190],{},[1121,5488,2279],{},{"title":508,"searchDepth":509,"depth":510,"links":5490},[5491,5492],{"id":566,"depth":510,"text":15},{"id":1104,"depth":510,"text":1105},"Makes a geometry wobble and wave around with customizable speed and factor.",{},{"title":207,"description":5493},"FCaNs3jjWImwSxNZzcx1r_CPKoNz27JGUgdcUzvQ1Ys",1791549577048]