[{"data":1,"prerenderedAt":3978},["ShallowReactive",2],{"navigation":3,"/api/materials":474,"/api/materials-surround":495,"material-list":500},[4,22],{"title":5,"path":6,"stem":7,"children":8},"Getting Started","/getting-started","1.getting-started/1.index",[9,10,14,18],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"Installation Guide","/getting-started/installation","1.getting-started/2.installation",{"title":15,"path":16,"stem":17},"Usage","/getting-started/usage","1.getting-started/3.usage",{"title":19,"path":20,"stem":21},"Upgrade Guide","/getting-started/upgrade-guide","1.getting-started/4.upgrade-guide",{"title":23,"path":24,"stem":25,"children":26},"Api","/api","2.api",[27,30,84,114,156,190,284,310,344,394,440],{"title":28,"path":24,"stem":29},"All","2.api/index",{"title":31,"path":32,"stem":33,"children":34},"Abstractions","/api/abstractions","2.api/1.abstractions/index",[35,36,40,44,48,52,56,60,64,68,72,76,80],{"title":31,"path":32,"stem":33},{"title":37,"path":38,"stem":39},"Align","/api/abstractions/align","2.api/1.abstractions/align",{"title":41,"path":42,"stem":43},"Billboard","/api/abstractions/billboard","2.api/1.abstractions/billboard",{"title":45,"path":46,"stem":47},"Camera Shake","/api/abstractions/camera-shake","2.api/1.abstractions/camera-shake",{"title":49,"path":50,"stem":51},"Decal","/api/abstractions/decal","2.api/1.abstractions/decal",{"title":53,"path":54,"stem":55},"Edges","/api/abstractions/edges","2.api/1.abstractions/edges",{"title":57,"path":58,"stem":59},"Fit","/api/abstractions/fit","2.api/1.abstractions/fit",{"title":61,"path":62,"stem":63},"Levioso (Float)","/api/abstractions/levioso","2.api/1.abstractions/levioso",{"title":65,"path":66,"stem":67},"Mask","/api/abstractions/mask","2.api/1.abstractions/mask",{"title":69,"path":70,"stem":71},"Outline","/api/abstractions/outline","2.api/1.abstractions/outline",{"title":73,"path":74,"stem":75},"Sampler","/api/abstractions/sampler","2.api/1.abstractions/sampler",{"title":77,"path":78,"stem":79},"ScreenSizer","/api/abstractions/screen-sizer","2.api/1.abstractions/screen-sizer",{"title":81,"path":82,"stem":83},"ScreenSpace","/api/abstractions/screen-space","2.api/1.abstractions/screen-space",{"title":85,"path":86,"stem":87,"children":88},"Controls","/api/controls","2.api/2.controls/index",[89,90,94,98,102,106,110],{"title":85,"path":86,"stem":87},{"title":91,"path":92,"stem":93},"Camera Controls","/api/controls/camera-controls","2.api/2.controls/camera-controls",{"title":95,"path":96,"stem":97},"Keyboard Controls","/api/controls/keyboard-controls","2.api/2.controls/keyboard-controls",{"title":99,"path":100,"stem":101},"Map Controls","/api/controls/map-controls","2.api/2.controls/map-controls",{"title":103,"path":104,"stem":105},"Orbit Controls","/api/controls/orbit-controls","2.api/2.controls/orbit-controls",{"title":107,"path":108,"stem":109},"PointerLock Controls","/api/controls/pointer-lock-controls","2.api/2.controls/pointer-lock-controls",{"title":111,"path":112,"stem":113},"Transform Controls","/api/controls/transform-controls","2.api/2.controls/transform-controls",{"title":115,"path":116,"stem":117,"children":118},"Loaders","/api/loaders","2.api/3.loaders/index",[119,120,124,128,132,136,140,144,148,152],{"title":115,"path":116,"stem":117},{"title":121,"path":122,"stem":123},"useGLTF","/api/loaders/use-gltf","2.api/3.loaders/1.use-gltf",{"title":125,"path":126,"stem":127},"GLTFModel","/api/loaders/gltf-model","2.api/3.loaders/2.gltf-model",{"title":129,"path":130,"stem":131},"useFBX","/api/loaders/use-fbx","2.api/3.loaders/3.use-fbx",{"title":133,"path":134,"stem":135},"FBXModel","/api/loaders/fbx-model","2.api/3.loaders/4.fbx-model",{"title":137,"path":138,"stem":139},"useTexture","/api/loaders/use-texture","2.api/3.loaders/5.use-texture",{"title":141,"path":142,"stem":143},"useTextures","/api/loaders/use-textures","2.api/3.loaders/6.use-textures",{"title":145,"path":146,"stem":147},"useSVG","/api/loaders/use-svg","2.api/3.loaders/7.use-svg",{"title":149,"path":150,"stem":151},"useProgress","/api/loaders/use-progress","2.api/3.loaders/use-progress",{"title":153,"path":154,"stem":155},"useVideoTexture","/api/loaders/use-video-texture","2.api/3.loaders/use-video-texture",{"title":157,"path":158,"stem":159,"children":160},"Materials","/api/materials","2.api/4.materials/index",[161,162,166,170,174,178,182,186],{"title":157,"path":158,"stem":159},{"title":163,"path":164,"stem":165},"Custom Shader Material","/api/materials/custom-shader-material","2.api/4.materials/custom-shader-material",{"title":167,"path":168,"stem":169},"Mesh Glass Material","/api/materials/glass-material","2.api/4.materials/glass-material",{"title":171,"path":172,"stem":173},"Holographic Material","/api/materials/holographic-material","2.api/4.materials/holographic-material",{"title":175,"path":176,"stem":177},"Mesh Discard Material","/api/materials/mesh-discard-material","2.api/4.materials/mesh-discard-material",{"title":179,"path":180,"stem":181},"Mesh Reflection Material","/api/materials/mesh-reflection-material","2.api/4.materials/mesh-reflection-material",{"title":183,"path":184,"stem":185},"Point Material","/api/materials/point-material","2.api/4.materials/point-material",{"title":187,"path":188,"stem":189},"Wobble Material","/api/materials/wobble-material","2.api/4.materials/wobble-material",{"title":191,"path":192,"stem":193,"children":194},"Shapes","/api/shapes","2.api/5.shapes/index",[195,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280],{"title":191,"path":192,"stem":193},{"title":197,"path":198,"stem":199},"Box","/api/shapes/box","2.api/5.shapes/box",{"title":201,"path":202,"stem":203},"CatmullRomCurve3","/api/shapes/catmullromcurve3","2.api/5.shapes/catmullromcurve3",{"title":205,"path":206,"stem":207},"Circle","/api/shapes/circle","2.api/5.shapes/circle",{"title":209,"path":210,"stem":211},"Cone","/api/shapes/cone","2.api/5.shapes/cone",{"title":213,"path":214,"stem":215},"Cubic Bezier Line","/api/shapes/cubic-bezier-line","2.api/5.shapes/cubic-bezier-line",{"title":217,"path":218,"stem":219},"Cylinder","/api/shapes/cylinder","2.api/5.shapes/cylinder",{"title":221,"path":222,"stem":223},"Dodecahedron","/api/shapes/dodecahedron","2.api/5.shapes/dodecahedron",{"title":225,"path":226,"stem":227},"Grid","/api/shapes/grid","2.api/5.shapes/grid",{"title":229,"path":230,"stem":231},"Icosahedron","/api/shapes/icosahedron","2.api/5.shapes/icosahedron",{"title":233,"path":234,"stem":235},"Line2","/api/shapes/line2","2.api/5.shapes/line2",{"title":237,"path":238,"stem":239},"Octahedron","/api/shapes/octahedron","2.api/5.shapes/octahedron",{"title":241,"path":242,"stem":243},"Plane","/api/shapes/plane","2.api/5.shapes/plane",{"title":245,"path":246,"stem":247},"Quadratic Bezier Line","/api/shapes/quadratic-bezier-line","2.api/5.shapes/quadratic-bezier-line",{"title":249,"path":250,"stem":251},"Ring","/api/shapes/ring","2.api/5.shapes/ring",{"title":253,"path":254,"stem":255},"Rounded Box","/api/shapes/rounded-box","2.api/5.shapes/rounded-box",{"title":257,"path":258,"stem":259},"Screen Quad","/api/shapes/screen-quad","2.api/5.shapes/screen-quad",{"title":261,"path":262,"stem":263},"Sphere","/api/shapes/sphere","2.api/5.shapes/sphere",{"title":265,"path":266,"stem":267},"Superformula","/api/shapes/superformula","2.api/5.shapes/superformula",{"title":269,"path":270,"stem":271},"Tetrahedron","/api/shapes/tetrahedron","2.api/5.shapes/tetrahedron",{"title":273,"path":274,"stem":275},"Torus","/api/shapes/torus","2.api/5.shapes/torus",{"title":277,"path":278,"stem":279},"Torus Knot","/api/shapes/torus-knot","2.api/5.shapes/torus-knot",{"title":281,"path":282,"stem":283},"Tube","/api/shapes/tube","2.api/5.shapes/tube",{"title":285,"path":286,"stem":287,"children":288},"Debug/Performance","/api/debug-performance","2.api/6.debug-performance/index",[289,290,294,298,302,306],{"title":285,"path":286,"stem":287},{"title":291,"path":292,"stem":293},"Helper","/api/debug-performance/helper","2.api/6.debug-performance/helper",{"title":295,"path":296,"stem":297},"LOD","/api/debug-performance/lod","2.api/6.debug-performance/lod",{"title":299,"path":300,"stem":301},"Stats","/api/debug-performance/stats","2.api/6.debug-performance/stats",{"title":303,"path":304,"stem":305},"StatsGl","/api/debug-performance/stats-gl","2.api/6.debug-performance/stats-gl",{"title":307,"path":308,"stem":309},"useBVH","/api/debug-performance/use-bvh","2.api/6.debug-performance/use-bvh",{"title":311,"path":312,"stem":313,"children":314},"Light/Shadow","/api/light-shadow","2.api/7.light-shadow/index",[315,316,320,324,328,332,336,340],{"title":311,"path":312,"stem":313},{"title":317,"path":318,"stem":319},"Accumulative Shadows","/api/light-shadow/accumulative-shadows","2.api/7.light-shadow/accumulative-shadows",{"title":321,"path":322,"stem":323},"Bake Shadows","/api/light-shadow/bake-shadows","2.api/7.light-shadow/bake-shadows",{"title":325,"path":326,"stem":327},"Circle Shadow","/api/light-shadow/circle-shadow","2.api/7.light-shadow/circle-shadow",{"title":329,"path":330,"stem":331},"Contact Shadows","/api/light-shadow/contact-shadows","2.api/7.light-shadow/contact-shadows",{"title":333,"path":334,"stem":335},"Lensflare","/api/light-shadow/lensflare","2.api/7.light-shadow/lensflare",{"title":337,"path":338,"stem":339},"Randomized Lights","/api/light-shadow/randomized-lights","2.api/7.light-shadow/randomized-lights",{"title":341,"path":342,"stem":343},"Soft Shadows","/api/light-shadow/soft-shadows","2.api/7.light-shadow/soft-shadows",{"title":345,"path":346,"stem":347,"children":348},"Staging","/api/staging","2.api/8.staging/index",[349,350,354,358,362,366,370,374,378,382,386,390],{"title":345,"path":346,"stem":347},{"title":351,"path":352,"stem":353},"Environment","/api/staging/environment","2.api/8.staging/1.environment",{"title":355,"path":356,"stem":357},"useEnvironment","/api/staging/use-environment","2.api/8.staging/2.use-environment",{"title":359,"path":360,"stem":361},"Lightformer","/api/staging/lightformer","2.api/8.staging/3.lightformer",{"title":363,"path":364,"stem":365},"Backdrop","/api/staging/backdrop","2.api/8.staging/backdrop",{"title":367,"path":368,"stem":369},"Ocean","/api/staging/ocean","2.api/8.staging/ocean",{"title":371,"path":372,"stem":373},"Precipitation","/api/staging/precipitation","2.api/8.staging/precipitation",{"title":375,"path":376,"stem":377},"Sky","/api/staging/sky","2.api/8.staging/sky",{"title":379,"path":380,"stem":381},"Smoke","/api/staging/smoke","2.api/8.staging/smoke",{"title":383,"path":384,"stem":385},"Sparkles","/api/staging/sparkles","2.api/8.staging/sparkles",{"title":387,"path":388,"stem":389},"Stage","/api/staging/stage","2.api/8.staging/stage",{"title":391,"path":392,"stem":393},"Stars","/api/staging/stars","2.api/8.staging/stars",{"title":395,"path":396,"stem":397,"children":398},"Objects","/api/objects","2.api/9.objects/index",[399,400,404,408,412,416,420,424,428,432,436],{"title":395,"path":396,"stem":397},{"title":401,"path":402,"stem":403},"AnimatedSprite","/api/objects/animated-sprite","2.api/9.objects/animated-sprite",{"title":405,"path":406,"stem":407},"CubeCamera","/api/objects/cube-camera","2.api/9.objects/cube-camera",{"title":409,"path":410,"stem":411},"Fbo","/api/objects/fbo","2.api/9.objects/fbo",{"title":413,"path":414,"stem":415},"GradientTexture","/api/objects/gradient-texture","2.api/9.objects/gradient-texture",{"title":417,"path":418,"stem":419},"HTML","/api/objects/html","2.api/9.objects/html",{"title":421,"path":422,"stem":423},"Image","/api/objects/image","2.api/9.objects/image",{"title":425,"path":426,"stem":427},"MarchingCubes","/api/objects/marching-cubes","2.api/9.objects/marching-cubes",{"title":429,"path":430,"stem":431},"Reflector","/api/objects/reflector","2.api/9.objects/reflector",{"title":433,"path":434,"stem":435},"Refractor","/api/objects/refractor","2.api/9.objects/refractor",{"title":437,"path":438,"stem":439},"Text3D","/api/objects/text-3d","2.api/9.objects/text-3d",{"title":441,"path":442,"stem":443,"children":444},"Miscellaneous","/api/miscellaneous","2.api/miscellaneous/index",[445,446,450,454,458,462,466,470],{"title":441,"path":442,"stem":443},{"title":447,"path":448,"stem":449},"Bounds","/api/miscellaneous/bounds","2.api/miscellaneous/bounds",{"title":451,"path":452,"stem":453},"GlobalAudio","/api/miscellaneous/global-audio","2.api/miscellaneous/global-audio",{"title":455,"path":456,"stem":457},"MouseParallax","/api/miscellaneous/mouse-parallax","2.api/miscellaneous/mouse-parallax",{"title":459,"path":460,"stem":461},"PositionalAudio","/api/miscellaneous/positional-audio","2.api/miscellaneous/positional-audio",{"title":463,"path":464,"stem":465},"useAnimations","/api/miscellaneous/use-animations","2.api/miscellaneous/use-animations",{"title":467,"path":468,"stem":469},"useGLTFExporter","/api/miscellaneous/use-gltf-exporter","2.api/miscellaneous/use-gltf-exporter",{"title":471,"path":472,"stem":473},"useIntersect","/api/miscellaneous/use-intersect","2.api/miscellaneous/use-intersect",{"id":475,"title":157,"body":476,"description":488,"extension":489,"links":490,"meta":491,"navigation":492,"path":158,"seo":493,"stem":159,"__hash__":494},"docs/2.api/4.materials/index.md",{"type":477,"value":478,"toc":483},"minimark",[479],[480,481],"api-list",{"list-name":482},"material-list",{"title":484,"searchDepth":485,"depth":486,"links":487},"",1,2,[],"All materials","md",null,{},true,{"title":157,"description":488},"BesZhb4Nwt5wfIqWwZZLh5Sit7_8paFEbEBzuTW5QQU",[496,498],{"title":153,"path":154,"stem":155,"description":497,"children":-1},"A composable to load video textures in TresJS scenes.",{"title":163,"path":164,"stem":165,"description":499,"children":-1},"Extends Three.js' material library with your own Vertex and Fragment shaders.",[501,1107,1777,2265,2437,3287,3614],{"id":502,"title":163,"body":503,"description":499,"extension":489,"links":490,"meta":1104,"navigation":492,"path":164,"seo":1105,"stem":165,"__hash__":1106},"docs/2.api/4.materials/custom-shader-material.md",{"type":477,"value":504,"toc":1100},[505,511,539,543,1078,1082,1096],[506,507,508],"scene-wrapper",{},[509,510],"materials-custom-shader-material",{},[512,513,514,515,519,520,523,524,533,534,538],"p",{},"The ",[516,517,518],"code",{},"cientos"," package provides ",[516,521,522],{},"\u003CTresCustomShaderMaterial />"," component which is a wrapper around the ",[525,526,530],"a",{"href":527,"rel":528},"https://github.com/FarazzShaikh/THREE-CustomShaderMaterial",[529],"nofollow",[516,531,532],{},"three-custom-shader-material"," class. As states in the repo, it ",[535,536,537],"em",{},"\"lets you extend Three.js' material library with your own Vertex and Fragment shaders\"",".",[540,541,15],"h2",{"id":542},"usage",[544,545,565],"pre",{"className":546,"code":547,"highlights":548,"language":564,"meta":484,"style":484},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { TresCustomShaderMaterial } from '@tresjs/cientos'\nimport { shallowRef } from 'vue'\n\nconst customShaderMaterialRef = shallowRef()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n    \u003CTresMesh>\n      \u003CTresBoxGeometry />\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      />\n    \u003C/TresMesh>\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[486,549,550,551,552,553,554,555,556,557,558,559,560,561,562,563],13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,"vue",[516,566,567,601,631,651,657,674,684,689,699,710,753,763,774,782,798,816,833,848,869,909,931,939,957,978,993,999,1016,1033,1039,1049,1059,1069],{"__ignoreMap":484},[568,569,571,575,579,583,586,589,592,596,598],"span",{"class":570,"line":485},"line",[568,572,574],{"class":573},"sMK4o","\u003C",[568,576,578],{"class":577},"swJcz","script",[568,580,582],{"class":581},"spNyl"," setup",[568,584,585],{"class":581}," lang",[568,587,588],{"class":573},"=",[568,590,591],{"class":573},"\"",[568,593,595],{"class":594},"sfazB","ts",[568,597,591],{"class":573},[568,599,600],{"class":573},">\n",[568,602,605,609,612,616,619,622,625,628],{"class":603,"line":486},[570,604],"highlight",[568,606,608],{"class":607},"s7zQu","import",[568,610,611],{"class":573}," {",[568,613,615],{"class":614},"sTEyZ"," TresCustomShaderMaterial",[568,617,618],{"class":573}," }",[568,620,621],{"class":607}," from",[568,623,624],{"class":573}," '",[568,626,627],{"class":594},"@tresjs/cientos",[568,629,630],{"class":573},"'\n",[568,632,634,636,638,641,643,645,647,649],{"class":570,"line":633},3,[568,635,608],{"class":607},[568,637,611],{"class":573},[568,639,640],{"class":614}," shallowRef",[568,642,618],{"class":573},[568,644,621],{"class":607},[568,646,624],{"class":573},[568,648,564],{"class":594},[568,650,630],{"class":573},[568,652,654],{"class":570,"line":653},4,[568,655,656],{"emptyLinePlaceholder":492},"\n",[568,658,660,663,666,668,671],{"class":570,"line":659},5,[568,661,662],{"class":581},"const",[568,664,665],{"class":614}," customShaderMaterialRef ",[568,667,588],{"class":573},[568,669,640],{"class":670},"s2Zo4",[568,672,673],{"class":614},"()\n",[568,675,677,680,682],{"class":570,"line":676},6,[568,678,679],{"class":573},"\u003C/",[568,681,578],{"class":577},[568,683,600],{"class":573},[568,685,687],{"class":570,"line":686},7,[568,688,656],{"emptyLinePlaceholder":492},[568,690,692,694,697],{"class":570,"line":691},8,[568,693,574],{"class":573},[568,695,696],{"class":577},"template",[568,698,600],{"class":573},[568,700,702,705,708],{"class":570,"line":701},9,[568,703,704],{"class":573},"  \u003C",[568,706,707],{"class":577},"TresCanvas",[568,709,600],{"class":573},[568,711,713,716,719,722,725,727,729,732,736,739,741,743,745,748,750],{"class":570,"line":712},10,[568,714,715],{"class":573},"    \u003C",[568,717,718],{"class":577},"TresPerspectiveCamera",[568,720,721],{"class":573}," :",[568,723,724],{"class":581},"position",[568,726,588],{"class":573},[568,728,591],{"class":573},[568,730,731],{"class":573},"[",[568,733,735],{"class":734},"sbssI","3",[568,737,738],{"class":573},", ",[568,740,735],{"class":734},[568,742,738],{"class":573},[568,744,735],{"class":734},[568,746,747],{"class":573},"]",[568,749,591],{"class":573},[568,751,752],{"class":573}," />\n",[568,754,756,758,761],{"class":570,"line":755},11,[568,757,715],{"class":573},[568,759,760],{"class":577},"TresMesh",[568,762,600],{"class":573},[568,764,766,769,772],{"class":570,"line":765},12,[568,767,768],{"class":573},"      \u003C",[568,770,771],{"class":577},"TresBoxGeometry",[568,773,752],{"class":573},[568,775,777,779],{"class":776,"line":549},[570,604],[568,778,768],{"class":573},[568,780,781],{"class":577},"TresCustomShaderMaterial\n",[568,783,785,788,790,792,795],{"class":784,"line":550},[570,604],[568,786,787],{"class":581},"        ref",[568,789,588],{"class":573},[568,791,591],{"class":573},[568,793,794],{"class":594},"customShaderMaterialRef",[568,796,797],{"class":573},"\"\n",[568,799,801,804,807,809,811,814],{"class":800,"line":551},[570,604],[568,802,803],{"class":573},"        :",[568,805,806],{"class":581},"vertex-shader",[568,808,588],{"class":573},[568,810,591],{"class":573},[568,812,813],{"class":614},"vertexShader",[568,815,797],{"class":573},[568,817,819,821,824,826,828,831],{"class":818,"line":552},[570,604],[568,820,803],{"class":573},[568,822,823],{"class":581},"fragment-shader",[568,825,588],{"class":573},[568,827,591],{"class":573},[568,829,830],{"class":614},"fragmentShader",[568,832,797],{"class":573},[568,834,836,838,841,843,845],{"class":835,"line":553},[570,604],[568,837,803],{"class":573},[568,839,840],{"class":581},"uniforms",[568,842,588],{"class":573},[568,844,591],{"class":573},[568,846,847],{"class":573},"{\n",[568,849,851,854,857,860,863,866],{"class":850,"line":554},[570,604],[568,852,853],{"class":577},"          u_time",[568,855,856],{"class":573},": { ",[568,858,859],{"class":577},"value",[568,861,862],{"class":573},": ",[568,864,865],{"class":734},"0",[568,867,868],{"class":573}," },\n",[568,870,872,875,877,879,882,885,887,890,893,896,898,901,903,906],{"class":871,"line":555},[570,604],[568,873,874],{"class":577},"          u_color",[568,876,856],{"class":573},[568,878,859],{"class":577},[568,880,881],{"class":573},": new ",[568,883,884],{"class":614},"THREE",[568,886,538],{"class":573},[568,888,889],{"class":670},"Color",[568,891,892],{"class":573},"(",[568,894,895],{"class":734},"0.2",[568,897,738],{"class":573},[568,899,900],{"class":734},"0.0",[568,902,738],{"class":573},[568,904,905],{"class":734},"0.1",[568,907,908],{"class":573},") },\n",[568,910,912,915,917,919,921,923,925,928],{"class":911,"line":556},[570,604],[568,913,914],{"class":577},"          u_resolution",[568,916,856],{"class":573},[568,918,859],{"class":577},[568,920,881],{"class":573},[568,922,884],{"class":614},[568,924,538],{"class":573},[568,926,927],{"class":670},"Vector2",[568,929,930],{"class":573},"() }\n",[568,932,934,937],{"class":933,"line":557},[570,604],[568,935,936],{"class":573},"        }",[568,938,797],{"class":573},[568,940,942,944,947,949,951,955],{"class":941,"line":558},[570,604],[568,943,803],{"class":573},[568,945,946],{"class":581},"transparent",[568,948,588],{"class":573},[568,950,591],{"class":573},[568,952,954],{"class":953},"sfNiH","true",[568,956,797],{"class":573},[568,958,960,962,965,967,969,971,973,976],{"class":959,"line":559},[570,604],[568,961,803],{"class":573},[568,963,964],{"class":581},"side",[568,966,588],{"class":573},[568,968,591],{"class":573},[568,970,884],{"class":614},[568,972,538],{"class":573},[568,974,975],{"class":614},"DoubleSide",[568,977,797],{"class":573},[568,979,981,984,986,988,991],{"class":980,"line":560},[570,604],[568,982,983],{"class":581},"        base-material",[568,985,588],{"class":573},[568,987,591],{"class":573},[568,989,990],{"class":594},"MeshLambertMaterial",[568,992,797],{"class":573},[568,994,996],{"class":995,"line":561},[570,604],[568,997,998],{"class":581},"        silent\n",[568,1000,1002,1004,1007,1009,1011,1014],{"class":1001,"line":562},[570,604],[568,1003,803],{"class":573},[568,1005,1006],{"class":581},"map",[568,1008,588],{"class":573},[568,1010,591],{"class":573},[568,1012,1013],{"class":614},"texture",[568,1015,797],{"class":573},[568,1017,1019,1021,1024,1026,1028,1031],{"class":1018,"line":563},[570,604],[568,1020,803],{"class":573},[568,1022,1023],{"class":581},"color",[568,1025,588],{"class":573},[568,1027,591],{"class":573},[568,1029,1030],{"class":734},"0xff0000",[568,1032,797],{"class":573},[568,1034,1036],{"class":570,"line":1035},28,[568,1037,1038],{"class":573},"      />\n",[568,1040,1042,1045,1047],{"class":570,"line":1041},29,[568,1043,1044],{"class":573},"    \u003C/",[568,1046,760],{"class":577},[568,1048,600],{"class":573},[568,1050,1052,1054,1057],{"class":570,"line":1051},30,[568,1053,715],{"class":573},[568,1055,1056],{"class":577},"TresAmbientLight",[568,1058,752],{"class":573},[568,1060,1062,1065,1067],{"class":570,"line":1061},31,[568,1063,1064],{"class":573},"  \u003C/",[568,1066,707],{"class":577},[568,1068,600],{"class":573},[568,1070,1072,1074,1076],{"class":570,"line":1071},32,[568,1073,679],{"class":573},[568,1075,696],{"class":577},[568,1077,600],{"class":573},[540,1079,1081],{"id":1080},"props","Props",[512,1083,1084,1085,1088,1089,1091,1092,538],{},"Being a wrapper around the ",[516,1086,1087],{},"CustomShaderMaterial"," class, the ",[516,1090,522],{}," component accepts all the props that the class does. You can find the full list of props in the ",[525,1093,1095],{"href":527,"rel":1094},[529],"official repo",[1097,1098,1099],"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":484,"searchDepth":485,"depth":486,"links":1101},[1102,1103],{"id":542,"depth":486,"text":15},{"id":1080,"depth":486,"text":1081},{},{"title":163,"description":499},"WirW-L7fmUIEqDL1ownbJUS8vqN1Ie6ubq6WxZ9mH-o",{"id":1108,"title":167,"body":1109,"description":1773,"extension":489,"links":490,"meta":1774,"navigation":492,"path":168,"seo":1775,"stem":169,"__hash__":1776},"docs/2.api/4.materials/glass-material.md",{"type":477,"value":1110,"toc":1764},[1111,1116,1128,1130,1135,1380,1382,1389,1393,1747,1751,1761],[506,1112,1113],{},[1114,1115],"materials-glass-material",{},[512,1117,514,1118,1120,1121,1124,1125,538],{},[516,1119,518],{}," package provides a new",[516,1122,1123],{},"\u003CMeshGlassMaterial />"," component that makes a geometry look like glass. This is achieved by re-defining the ",[516,1126,1127],{},"MeshPhysicalMaterial",[540,1129,15],{"id":542},[1131,1132,1134],"h3",{"id":1133},"you-can-use-it-like-you-normally-do-with-tresjs","You can use it like you normally do with TresJs",[544,1136,1139],{"className":546,"code":1137,"highlights":1138,"language":564,"meta":484,"style":484},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { MeshGlassMaterial } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" :look-at=\"[0, 0, 0]\" />\n    \u003CTresMesh>\n      \u003CTresTorusGeometry />\n      \u003CMeshGlassMaterial />\n    \u003C/TresMesh>\n    \u003CTresAmbientLight />\n    \u003CTresDirectionalLight :position=\"[0, 2, 4]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n",[486,712],[516,1140,1141,1161,1182,1201,1209,1213,1221,1229,1286,1294,1304,1313,1321,1329,1364,1372],{"__ignoreMap":484},[568,1142,1143,1145,1147,1149,1151,1153,1155,1157,1159],{"class":570,"line":485},[568,1144,574],{"class":573},[568,1146,578],{"class":577},[568,1148,582],{"class":581},[568,1150,585],{"class":581},[568,1152,588],{"class":573},[568,1154,591],{"class":573},[568,1156,595],{"class":594},[568,1158,591],{"class":573},[568,1160,600],{"class":573},[568,1162,1164,1166,1168,1171,1173,1175,1177,1180],{"class":1163,"line":486},[570,604],[568,1165,608],{"class":607},[568,1167,611],{"class":573},[568,1169,1170],{"class":614}," TresCanvas",[568,1172,618],{"class":573},[568,1174,621],{"class":607},[568,1176,624],{"class":573},[568,1178,1179],{"class":594},"@tresjs/core",[568,1181,630],{"class":573},[568,1183,1184,1186,1188,1191,1193,1195,1197,1199],{"class":570,"line":633},[568,1185,608],{"class":607},[568,1187,611],{"class":573},[568,1189,1190],{"class":614}," MeshGlassMaterial",[568,1192,618],{"class":573},[568,1194,621],{"class":607},[568,1196,624],{"class":573},[568,1198,627],{"class":594},[568,1200,630],{"class":573},[568,1202,1203,1205,1207],{"class":570,"line":653},[568,1204,679],{"class":573},[568,1206,578],{"class":577},[568,1208,600],{"class":573},[568,1210,1211],{"class":570,"line":659},[568,1212,656],{"emptyLinePlaceholder":492},[568,1214,1215,1217,1219],{"class":570,"line":676},[568,1216,574],{"class":573},[568,1218,696],{"class":577},[568,1220,600],{"class":573},[568,1222,1223,1225,1227],{"class":570,"line":686},[568,1224,704],{"class":573},[568,1226,707],{"class":577},[568,1228,600],{"class":573},[568,1230,1231,1233,1235,1237,1239,1241,1243,1245,1247,1249,1251,1253,1255,1257,1259,1261,1264,1266,1268,1270,1272,1274,1276,1278,1280,1282,1284],{"class":570,"line":691},[568,1232,715],{"class":573},[568,1234,718],{"class":577},[568,1236,721],{"class":573},[568,1238,724],{"class":581},[568,1240,588],{"class":573},[568,1242,591],{"class":573},[568,1244,731],{"class":573},[568,1246,735],{"class":734},[568,1248,738],{"class":573},[568,1250,735],{"class":734},[568,1252,738],{"class":573},[568,1254,735],{"class":734},[568,1256,747],{"class":573},[568,1258,591],{"class":573},[568,1260,721],{"class":573},[568,1262,1263],{"class":581},"look-at",[568,1265,588],{"class":573},[568,1267,591],{"class":573},[568,1269,731],{"class":573},[568,1271,865],{"class":734},[568,1273,738],{"class":573},[568,1275,865],{"class":734},[568,1277,738],{"class":573},[568,1279,865],{"class":734},[568,1281,747],{"class":573},[568,1283,591],{"class":573},[568,1285,752],{"class":573},[568,1287,1288,1290,1292],{"class":570,"line":701},[568,1289,715],{"class":573},[568,1291,760],{"class":577},[568,1293,600],{"class":573},[568,1295,1297,1299,1302],{"class":1296,"line":712},[570,604],[568,1298,768],{"class":573},[568,1300,1301],{"class":577},"TresTorusGeometry",[568,1303,752],{"class":573},[568,1305,1306,1308,1311],{"class":570,"line":755},[568,1307,768],{"class":573},[568,1309,1310],{"class":577},"MeshGlassMaterial",[568,1312,752],{"class":573},[568,1314,1315,1317,1319],{"class":570,"line":765},[568,1316,1044],{"class":573},[568,1318,760],{"class":577},[568,1320,600],{"class":573},[568,1322,1323,1325,1327],{"class":570,"line":549},[568,1324,715],{"class":573},[568,1326,1056],{"class":577},[568,1328,752],{"class":573},[568,1330,1331,1333,1336,1338,1340,1342,1344,1346,1348,1350,1353,1355,1358,1360,1362],{"class":570,"line":550},[568,1332,715],{"class":573},[568,1334,1335],{"class":577},"TresDirectionalLight",[568,1337,721],{"class":573},[568,1339,724],{"class":581},[568,1341,588],{"class":573},[568,1343,591],{"class":573},[568,1345,731],{"class":573},[568,1347,865],{"class":734},[568,1349,738],{"class":573},[568,1351,1352],{"class":734},"2",[568,1354,738],{"class":573},[568,1356,1357],{"class":734},"4",[568,1359,747],{"class":573},[568,1361,591],{"class":573},[568,1363,752],{"class":573},[568,1365,1366,1368,1370],{"class":570,"line":551},[568,1367,1064],{"class":573},[568,1369,707],{"class":577},[568,1371,600],{"class":573},[568,1373,1374,1376,1378],{"class":570,"line":552},[568,1375,679],{"class":573},[568,1377,696],{"class":577},[568,1379,600],{"class":573},[540,1381,1081],{"id":1080},[512,1383,1384,1385,1388],{},"No props are required. The component extends ",[516,1386,1387],{},"THREE.MeshPhysicalMaterial"," and accepts all the same props plus additional reflection-specific properties.",[1131,1390,1392],{"id":1391},"you-can-also-replace-the-material-of-an-existing-mesh-like-this","You can also replace the material of an existing mesh like this:",[544,1394,1397],{"className":546,"code":1395,"highlights":1396,"language":564,"meta":484,"style":484},"\u003Cscript setup lang=\"ts\">\nimport { ref, shallowRef, watch } from 'vue'\nimport { TresCanvas } from '@tresjs/core'\nimport { MeshGlassMaterial, Box } from '@tresjs/cientos'\n\nconst glassMaterialRef = shallowRef()\nconst boxRef = shallowRef()\n\nwatch(glassMaterialRef, value => {\n  // For good practice we dispose the old material\n  boxRef.value.instance.material.dispose()\n\n  // We assign the new MeshGlassMaterialClass\n  boxRef.value.instance.material = value.MeshGlassMaterialClass\n})\n\u003C/script>\n\u003Ctemplate>\n  \u003CTresMesh>\n    \u003CTresTorusGeometry />\n    \u003CMeshGlassMaterial ref=\"glassMaterialRef\" />\n  \u003C/TresMesh>\n  \u003C!-- Mesh to be replaced -->\n  \u003CTresMesh ref=\"boxRef\">\n    \u003CTresBoxGeometry />\n    \u003CMeshBasicMaterial  />\n  \u003C/TresMesh>\n\u003C/template>\n",[653,676,686,691,701,712,755,765,549,550,551,556],[516,1398,1399,1419,1448,1466,1490,1494,1508,1522,1527,1548,1555,1582,1587,1593,1620,1629,1637,1645,1653,1661,1681,1689,1694,1713,1721,1731,1739],{"__ignoreMap":484},[568,1400,1401,1403,1405,1407,1409,1411,1413,1415,1417],{"class":570,"line":485},[568,1402,574],{"class":573},[568,1404,578],{"class":577},[568,1406,582],{"class":581},[568,1408,585],{"class":581},[568,1410,588],{"class":573},[568,1412,591],{"class":573},[568,1414,595],{"class":594},[568,1416,591],{"class":573},[568,1418,600],{"class":573},[568,1420,1421,1423,1425,1428,1431,1433,1435,1438,1440,1442,1444,1446],{"class":570,"line":486},[568,1422,608],{"class":607},[568,1424,611],{"class":573},[568,1426,1427],{"class":614}," ref",[568,1429,1430],{"class":573},",",[568,1432,640],{"class":614},[568,1434,1430],{"class":573},[568,1436,1437],{"class":614}," watch",[568,1439,618],{"class":573},[568,1441,621],{"class":607},[568,1443,624],{"class":573},[568,1445,564],{"class":594},[568,1447,630],{"class":573},[568,1449,1450,1452,1454,1456,1458,1460,1462,1464],{"class":570,"line":633},[568,1451,608],{"class":607},[568,1453,611],{"class":573},[568,1455,1170],{"class":614},[568,1457,618],{"class":573},[568,1459,621],{"class":607},[568,1461,624],{"class":573},[568,1463,1179],{"class":594},[568,1465,630],{"class":573},[568,1467,1469,1471,1473,1475,1477,1480,1482,1484,1486,1488],{"class":1468,"line":653},[570,604],[568,1470,608],{"class":607},[568,1472,611],{"class":573},[568,1474,1190],{"class":614},[568,1476,1430],{"class":573},[568,1478,1479],{"class":614}," Box",[568,1481,618],{"class":573},[568,1483,621],{"class":607},[568,1485,624],{"class":573},[568,1487,627],{"class":594},[568,1489,630],{"class":573},[568,1491,1492],{"class":570,"line":659},[568,1493,656],{"emptyLinePlaceholder":492},[568,1495,1497,1499,1502,1504,1506],{"class":1496,"line":676},[570,604],[568,1498,662],{"class":581},[568,1500,1501],{"class":614}," glassMaterialRef ",[568,1503,588],{"class":573},[568,1505,640],{"class":670},[568,1507,673],{"class":614},[568,1509,1511,1513,1516,1518,1520],{"class":1510,"line":686},[570,604],[568,1512,662],{"class":581},[568,1514,1515],{"class":614}," boxRef ",[568,1517,588],{"class":573},[568,1519,640],{"class":670},[568,1521,673],{"class":614},[568,1523,1525],{"class":1524,"line":691},[570,604],[568,1526,656],{"emptyLinePlaceholder":492},[568,1528,1530,1533,1536,1538,1542,1545],{"class":1529,"line":701},[570,604],[568,1531,1532],{"class":670},"watch",[568,1534,1535],{"class":614},"(glassMaterialRef",[568,1537,1430],{"class":573},[568,1539,1541],{"class":1540},"sHdIc"," value",[568,1543,1544],{"class":581}," =>",[568,1546,1547],{"class":573}," {\n",[568,1549,1551],{"class":1550,"line":712},[570,604],[568,1552,1554],{"class":1553},"sHwdD","  // For good practice we dispose the old material\n",[568,1556,1558,1561,1563,1565,1567,1570,1572,1575,1577,1580],{"class":1557,"line":755},[570,604],[568,1559,1560],{"class":614},"  boxRef",[568,1562,538],{"class":573},[568,1564,859],{"class":614},[568,1566,538],{"class":573},[568,1568,1569],{"class":614},"instance",[568,1571,538],{"class":573},[568,1573,1574],{"class":614},"material",[568,1576,538],{"class":573},[568,1578,1579],{"class":670},"dispose",[568,1581,673],{"class":577},[568,1583,1585],{"class":1584,"line":765},[570,604],[568,1586,656],{"emptyLinePlaceholder":492},[568,1588,1590],{"class":1589,"line":549},[570,604],[568,1591,1592],{"class":1553},"  // We assign the new MeshGlassMaterialClass\n",[568,1594,1596,1598,1600,1602,1604,1606,1608,1610,1613,1615,1617],{"class":1595,"line":550},[570,604],[568,1597,1560],{"class":614},[568,1599,538],{"class":573},[568,1601,859],{"class":614},[568,1603,538],{"class":573},[568,1605,1569],{"class":614},[568,1607,538],{"class":573},[568,1609,1574],{"class":614},[568,1611,1612],{"class":573}," =",[568,1614,1541],{"class":614},[568,1616,538],{"class":573},[568,1618,1619],{"class":614},"MeshGlassMaterialClass\n",[568,1621,1623,1626],{"class":1622,"line":551},[570,604],[568,1624,1625],{"class":573},"}",[568,1627,1628],{"class":614},")\n",[568,1630,1631,1633,1635],{"class":570,"line":552},[568,1632,679],{"class":573},[568,1634,578],{"class":577},[568,1636,600],{"class":573},[568,1638,1639,1641,1643],{"class":570,"line":553},[568,1640,574],{"class":573},[568,1642,696],{"class":577},[568,1644,600],{"class":573},[568,1646,1647,1649,1651],{"class":570,"line":554},[568,1648,704],{"class":573},[568,1650,760],{"class":577},[568,1652,600],{"class":573},[568,1654,1655,1657,1659],{"class":570,"line":555},[568,1656,715],{"class":573},[568,1658,1301],{"class":577},[568,1660,752],{"class":573},[568,1662,1664,1666,1668,1670,1672,1674,1677,1679],{"class":1663,"line":556},[570,604],[568,1665,715],{"class":573},[568,1667,1310],{"class":577},[568,1669,1427],{"class":581},[568,1671,588],{"class":573},[568,1673,591],{"class":573},[568,1675,1676],{"class":594},"glassMaterialRef",[568,1678,591],{"class":573},[568,1680,752],{"class":573},[568,1682,1683,1685,1687],{"class":570,"line":557},[568,1684,1064],{"class":573},[568,1686,760],{"class":577},[568,1688,600],{"class":573},[568,1690,1691],{"class":570,"line":558},[568,1692,1693],{"class":1553},"  \u003C!-- Mesh to be replaced -->\n",[568,1695,1696,1698,1700,1702,1704,1706,1709,1711],{"class":570,"line":559},[568,1697,704],{"class":573},[568,1699,760],{"class":577},[568,1701,1427],{"class":581},[568,1703,588],{"class":573},[568,1705,591],{"class":573},[568,1707,1708],{"class":594},"boxRef",[568,1710,591],{"class":573},[568,1712,600],{"class":573},[568,1714,1715,1717,1719],{"class":570,"line":560},[568,1716,715],{"class":573},[568,1718,771],{"class":577},[568,1720,752],{"class":573},[568,1722,1723,1725,1728],{"class":570,"line":561},[568,1724,715],{"class":573},[568,1726,1727],{"class":577},"MeshBasicMaterial",[568,1729,1730],{"class":573},"  />\n",[568,1732,1733,1735,1737],{"class":570,"line":562},[568,1734,1064],{"class":573},[568,1736,760],{"class":577},[568,1738,600],{"class":573},[568,1740,1741,1743,1745],{"class":570,"line":563},[568,1742,679],{"class":573},[568,1744,696],{"class":577},[568,1746,600],{"class":573},[540,1748,1750],{"id":1749},"tips","Tips",[1752,1753,1754,1758],"ul",{},[1755,1756,1757],"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",[1755,1759,1760],{},"Another good option is to provide a normal texture as clearcoatNormalMap to add different results",[1097,1762,1763],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":484,"searchDepth":485,"depth":486,"links":1765},[1766,1769,1772],{"id":542,"depth":486,"text":15,"children":1767},[1768],{"id":1133,"depth":633,"text":1134},{"id":1080,"depth":486,"text":1081,"children":1770},[1771],{"id":1391,"depth":633,"text":1392},{"id":1749,"depth":486,"text":1750},"Makes a geometry look like glass by re-defining the MeshPhysicalMaterial.",{},{"title":167,"description":1773},"XeLIOrrqO5hF6DK2JnTAyGusif0o80_d6hTc8m5QJQE",{"id":1778,"title":171,"body":1779,"description":2261,"extension":489,"links":490,"meta":2262,"navigation":492,"path":172,"seo":2263,"stem":173,"__hash__":2264},"docs/2.api/4.materials/holographic-material.md",{"type":477,"value":1780,"toc":2256},[1781,1787,1791,1794,1797,1803,1805,2016,2018,2253],[1782,1783,1784],"scene-controls-wrapper",{},[1785,1786],"materials-holographic-material",{},[540,1788,1790],{"id":1789},"a-simple-to-use-holographic-material-for-tresjs","A simple to use holographic material for TresJS",[512,1792,1793],{},"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.",[512,1795,1796],{},"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.",[1798,1799,1800],"prose-note",{},[512,1801,1802],{},"This component ports Anderson Mancini's threejs-vanilla-holographic-material to TresJS. All credit goes to him.",[540,1804,15],{"id":542},[544,1806,1809],{"className":546,"code":1807,"highlights":1808,"language":564,"meta":484,"style":484},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { HolographicMaterial, Sphere } from '@tresjs/cientos'\n\n\u003C/script>\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" :look-at=[0,0,0] />\n    \u003CSphere :scale=\"0.5\">\n      \u003CHolographicMaterial />\n    \u003C/Sphere>\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[633,712],[516,1810,1811,1831,1849,1874,1878,1886,1894,1902,1952,1974,1984,1992,2000,2008],{"__ignoreMap":484},[568,1812,1813,1815,1817,1819,1821,1823,1825,1827,1829],{"class":570,"line":485},[568,1814,574],{"class":573},[568,1816,578],{"class":577},[568,1818,582],{"class":581},[568,1820,585],{"class":581},[568,1822,588],{"class":573},[568,1824,591],{"class":573},[568,1826,595],{"class":594},[568,1828,591],{"class":573},[568,1830,600],{"class":573},[568,1832,1833,1835,1837,1839,1841,1843,1845,1847],{"class":570,"line":486},[568,1834,608],{"class":607},[568,1836,611],{"class":573},[568,1838,1170],{"class":614},[568,1840,618],{"class":573},[568,1842,621],{"class":607},[568,1844,624],{"class":573},[568,1846,1179],{"class":594},[568,1848,630],{"class":573},[568,1850,1852,1854,1856,1859,1861,1864,1866,1868,1870,1872],{"class":1851,"line":633},[570,604],[568,1853,608],{"class":607},[568,1855,611],{"class":573},[568,1857,1858],{"class":614}," HolographicMaterial",[568,1860,1430],{"class":573},[568,1862,1863],{"class":614}," Sphere",[568,1865,618],{"class":573},[568,1867,621],{"class":607},[568,1869,624],{"class":573},[568,1871,627],{"class":594},[568,1873,630],{"class":573},[568,1875,1876],{"class":570,"line":653},[568,1877,656],{"emptyLinePlaceholder":492},[568,1879,1880,1882,1884],{"class":570,"line":659},[568,1881,679],{"class":573},[568,1883,578],{"class":577},[568,1885,600],{"class":573},[568,1887,1888,1890,1892],{"class":570,"line":676},[568,1889,574],{"class":573},[568,1891,696],{"class":577},[568,1893,600],{"class":573},[568,1895,1896,1898,1900],{"class":570,"line":686},[568,1897,704],{"class":573},[568,1899,707],{"class":577},[568,1901,600],{"class":573},[568,1903,1904,1906,1908,1910,1912,1914,1916,1918,1920,1922,1924,1926,1928,1930,1932,1934,1936,1939,1941,1943,1945,1947,1949],{"class":570,"line":691},[568,1905,715],{"class":573},[568,1907,718],{"class":577},[568,1909,721],{"class":573},[568,1911,724],{"class":581},[568,1913,588],{"class":573},[568,1915,591],{"class":573},[568,1917,731],{"class":573},[568,1919,735],{"class":734},[568,1921,738],{"class":573},[568,1923,735],{"class":734},[568,1925,738],{"class":573},[568,1927,735],{"class":734},[568,1929,747],{"class":573},[568,1931,591],{"class":573},[568,1933,721],{"class":573},[568,1935,1263],{"class":581},[568,1937,1938],{"class":573},"=[",[568,1940,865],{"class":734},[568,1942,1430],{"class":573},[568,1944,865],{"class":734},[568,1946,1430],{"class":573},[568,1948,865],{"class":734},[568,1950,1951],{"class":573},"] />\n",[568,1953,1954,1956,1958,1960,1963,1965,1967,1970,1972],{"class":570,"line":701},[568,1955,715],{"class":573},[568,1957,261],{"class":577},[568,1959,721],{"class":573},[568,1961,1962],{"class":581},"scale",[568,1964,588],{"class":573},[568,1966,591],{"class":573},[568,1968,1969],{"class":734},"0.5",[568,1971,591],{"class":573},[568,1973,600],{"class":573},[568,1975,1977,1979,1982],{"class":1976,"line":712},[570,604],[568,1978,768],{"class":573},[568,1980,1981],{"class":577},"HolographicMaterial",[568,1983,752],{"class":573},[568,1985,1986,1988,1990],{"class":570,"line":755},[568,1987,1044],{"class":573},[568,1989,261],{"class":577},[568,1991,600],{"class":573},[568,1993,1994,1996,1998],{"class":570,"line":765},[568,1995,715],{"class":573},[568,1997,1056],{"class":577},[568,1999,752],{"class":573},[568,2001,2002,2004,2006],{"class":570,"line":549},[568,2003,1064],{"class":573},[568,2005,707],{"class":577},[568,2007,600],{"class":573},[568,2009,2010,2012,2014],{"class":570,"line":550},[568,2011,679],{"class":573},[568,2013,696],{"class":577},[568,2015,600],{"class":573},[540,2017,1081],{"id":1080},[2019,2020,2021,2041],"table",{},[2022,2023,2024],"thead",{},[2025,2026,2027,2032,2035,2038],"tr",{},[2028,2029,2031],"th",{"align":2030},"left","Prop",[2028,2033,2034],{"align":2030},"Description",[2028,2036,2037],{},"Type",[2028,2039,2040],{},"default",[2042,2043,2044,2066,2085,2104,2123,2141,2161,2180,2198,2216,2234],"tbody",{},[2025,2045,2046,2053,2056,2061],{},[2047,2048,2049],"td",{"align":2030},[2050,2051,2052],"strong",{},"fresnelAmount",[2047,2054,2055],{"align":2030},"Value of the Fresnel effect. Ranges from 0.0 to 1.0.",[2047,2057,2058],{},[516,2059,2060],{},"Number",[2047,2062,2063],{},[516,2064,2065],{},"0.45",[2025,2067,2068,2073,2076,2080],{},[2047,2069,2070],{"align":2030},[2050,2071,2072],{},"fresnelOpacity",[2047,2074,2075],{"align":2030},"Opacity of the Fresnel effect. Ranges from 0.0 to 1.0.",[2047,2077,2078],{},[516,2079,2060],{},[2047,2081,2082],{},[516,2083,2084],{},"1.0",[2025,2086,2087,2092,2095,2099],{},[2047,2088,2089],{"align":2030},[2050,2090,2091],{},"scanlineSize",[2047,2093,2094],{"align":2030},"Size of the scanlines. Ranges from 1 to 15.",[2047,2096,2097],{},[516,2098,2060],{},[2047,2100,2101],{},[516,2102,2103],{},"8.0",[2025,2105,2106,2111,2114,2118],{},[2047,2107,2108],{"align":2030},[2050,2109,2110],{},"hologramBrightness",[2047,2112,2113],{"align":2030},"Brightness of the hologram. Ranges from 0.0 to 2.0.",[2047,2115,2116],{},[516,2117,2060],{},[2047,2119,2120],{},[516,2121,2122],{},"1.2",[2025,2124,2125,2130,2133,2137],{},[2047,2126,2127],{"align":2030},[2050,2128,2129],{},"signalSpeed",[2047,2131,2132],{"align":2030},"Speed of the signal effect. Ranges from 0.0 to 2.0.",[2047,2134,2135],{},[516,2136,2060],{},[2047,2138,2139],{},[516,2140,2065],{},[2025,2142,2143,2148,2151,2156],{},[2047,2144,2145],{"align":2030},[2050,2146,2147],{},"hologramColor",[2047,2149,2150],{"align":2030},"Specifies the color of the hologram.",[2047,2152,2153],{},[516,2154,2155],{},"String",[2047,2157,2158],{},[516,2159,2160],{},"\"#00d5ff\"",[2025,2162,2163,2168,2171,2176],{},[2047,2164,2165],{"align":2030},[2050,2166,2167],{},"enableBlinking",[2047,2169,2170],{"align":2030},"Enables or disables the blinking effect.",[2047,2172,2173],{},[516,2174,2175],{},"Boolean",[2047,2177,2178],{},[516,2179,954],{},[2025,2181,2182,2187,2190,2194],{},[2047,2183,2184],{"align":2030},[2050,2185,2186],{},"hologramOpacity",[2047,2188,2189],{"align":2030},"Specifies the opacity of the hologram.",[2047,2191,2192],{},[516,2193,2060],{},[2047,2195,2196],{},[516,2197,2084],{},[2025,2199,2200,2205,2208,2212],{},[2047,2201,2202],{"align":2030},[2050,2203,2204],{},"blinkFresnelOnly",[2047,2206,2207],{"align":2030},"Enables or disables the blinking effect for the Fresnel only.",[2047,2209,2210],{},[516,2211,2175],{},[2047,2213,2214],{},[516,2215,954],{},[2025,2217,2218,2223,2226,2230],{},[2047,2219,2220],{"align":2030},[2050,2221,2222],{},"enableAdditive",[2047,2224,2225],{"align":2030},"Enables or disables the Additive Blend Mode.",[2047,2227,2228],{},[516,2229,2175],{},[2047,2231,2232],{},[516,2233,954],{},[2025,2235,2236,2240,2243,2248],{},[2047,2237,2238],{"align":2030},[2050,2239,964],{},[2047,2241,2242],{"align":2030},"Specifies side for the material, as String.",[2047,2244,2245],{},[516,2246,2247],{},"THREE.FrontSide, THREE.BackSide, THREE.DoubleSide",[2047,2249,2250],{},[516,2251,2252],{},"FrontSide",[1097,2254,2255],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":484,"searchDepth":485,"depth":486,"links":2257},[2258,2259,2260],{"id":1789,"depth":486,"text":1790},{"id":542,"depth":486,"text":15},{"id":1080,"depth":486,"text":1081},"A simple to use holographic material for TresJS with vibrant colors, dynamic scanlines, and futuristic brilliance.",{},{"title":171,"description":2261},"qI6m7jV8AEZ5_Ruhn6hSlmpTi7LrcHgetMD_vYArm8Y",{"id":2266,"title":175,"body":2267,"description":2433,"extension":489,"links":490,"meta":2434,"navigation":492,"path":176,"seo":2435,"stem":177,"__hash__":2436},"docs/2.api/4.materials/mesh-discard-material.md",{"type":477,"value":2268,"toc":2430},[2269,2275,2277,2427],[512,2270,2271,2274],{},[516,2272,2273],{},"\u003CMeshDiscardMaterial />"," hides the object it's attached to. The object's shadows and children will be rendered.",[540,2276,15],{"id":542},[544,2278,2281],{"className":546,"code":2279,"highlights":2280,"language":564,"meta":484,"style":484},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { MeshDiscardMaterial } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera />\n    \u003CTresMesh>\n      \u003CTresBoxGeometry />\n      \u003CMeshDiscardMaterial />\n    \u003C/TresMesh>\n  \u003C/TresCanvas>\n\u003C/template>\n",[633,755],[516,2282,2283,2303,2321,2341,2349,2353,2361,2369,2377,2385,2393,2403,2411,2419],{"__ignoreMap":484},[568,2284,2285,2287,2289,2291,2293,2295,2297,2299,2301],{"class":570,"line":485},[568,2286,574],{"class":573},[568,2288,578],{"class":577},[568,2290,582],{"class":581},[568,2292,585],{"class":581},[568,2294,588],{"class":573},[568,2296,591],{"class":573},[568,2298,595],{"class":594},[568,2300,591],{"class":573},[568,2302,600],{"class":573},[568,2304,2305,2307,2309,2311,2313,2315,2317,2319],{"class":570,"line":486},[568,2306,608],{"class":607},[568,2308,611],{"class":573},[568,2310,1170],{"class":614},[568,2312,618],{"class":573},[568,2314,621],{"class":607},[568,2316,624],{"class":573},[568,2318,1179],{"class":594},[568,2320,630],{"class":573},[568,2322,2324,2326,2328,2331,2333,2335,2337,2339],{"class":2323,"line":633},[570,604],[568,2325,608],{"class":607},[568,2327,611],{"class":573},[568,2329,2330],{"class":614}," MeshDiscardMaterial",[568,2332,618],{"class":573},[568,2334,621],{"class":607},[568,2336,624],{"class":573},[568,2338,627],{"class":594},[568,2340,630],{"class":573},[568,2342,2343,2345,2347],{"class":570,"line":653},[568,2344,679],{"class":573},[568,2346,578],{"class":577},[568,2348,600],{"class":573},[568,2350,2351],{"class":570,"line":659},[568,2352,656],{"emptyLinePlaceholder":492},[568,2354,2355,2357,2359],{"class":570,"line":676},[568,2356,574],{"class":573},[568,2358,696],{"class":577},[568,2360,600],{"class":573},[568,2362,2363,2365,2367],{"class":570,"line":686},[568,2364,704],{"class":573},[568,2366,707],{"class":577},[568,2368,600],{"class":573},[568,2370,2371,2373,2375],{"class":570,"line":691},[568,2372,715],{"class":573},[568,2374,718],{"class":577},[568,2376,752],{"class":573},[568,2378,2379,2381,2383],{"class":570,"line":701},[568,2380,715],{"class":573},[568,2382,760],{"class":577},[568,2384,600],{"class":573},[568,2386,2387,2389,2391],{"class":570,"line":712},[568,2388,768],{"class":573},[568,2390,771],{"class":577},[568,2392,752],{"class":573},[568,2394,2396,2398,2401],{"class":2395,"line":755},[570,604],[568,2397,768],{"class":573},[568,2399,2400],{"class":577},"MeshDiscardMaterial",[568,2402,752],{"class":573},[568,2404,2405,2407,2409],{"class":570,"line":765},[568,2406,1044],{"class":573},[568,2408,760],{"class":577},[568,2410,600],{"class":573},[568,2412,2413,2415,2417],{"class":570,"line":549},[568,2414,1064],{"class":573},[568,2416,707],{"class":577},[568,2418,600],{"class":573},[568,2420,2421,2423,2425],{"class":570,"line":550},[568,2422,679],{"class":573},[568,2424,696],{"class":577},[568,2426,600],{"class":573},[1097,2428,2429],{},"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":484,"searchDepth":485,"depth":486,"links":2431},[2432],{"id":542,"depth":486,"text":15},"Hides the object it's attached to while keeping shadows and children visible.",{},{"title":175,"description":2433},"ivSz3UBTzifkzor3XvoS_5CUJD_0d-7Dh7JvwBwFh80",{"id":2438,"title":179,"body":2439,"description":3283,"extension":489,"links":490,"meta":3284,"navigation":492,"path":180,"seo":3285,"stem":181,"__hash__":3286},"docs/2.api/4.materials/mesh-reflection-material.md",{"type":477,"value":2440,"toc":3279},[2441,2446,2458,2467,2474,2476,2974,2976,3251,3277],[1782,2442,2443],{},[2444,2445],"materials-mesh-reflection-material",{},[512,2447,514,2448,2450,2451,2454,2455,538],{},[516,2449,518],{}," package provides a ",[516,2452,2453],{},"\u003CMeshReflectionMaterial />"," component for making floors or walls that reflect the objects in your ",[516,2456,2457],{},"Scene",[512,2459,2460,2461,2466],{},"The component is based on the excellent ",[525,2462,2465],{"href":2463,"rel":2464},"https://github.com/pmndrs/drei",[529],"Drei"," component of the same name.",[512,2468,2469,2470,2473],{},"It extends ",[516,2471,2472],{},"THREE.MeshStandardMaterial"," and accepts all the same props.",[540,2475,15],{"id":542},[544,2477,2480],{"className":546,"code":2478,"highlights":2479,"language":564,"meta":484,"style":484},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { MeshReflectionMaterial } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" :look-at=\"[0, 0, 0]\" />\n    \u003CTresMesh :rotation=\"[-Math.PI / 2, 0, 0]\">\n      \u003CTresPlaneGeometry :args=\"[10, 10]\" />\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      />\n    \u003C/TresMesh>\n    \u003CTresMesh :position=\"[0, 1, 0]\">\n      \u003CTresBoxGeometry />\n      \u003CTresMeshStandardMaterial color=\"orange\" />\n    \u003C/TresMesh>\n    \u003CTresAmbientLight />\n    \u003CTresDirectionalLight :position=\"[0, 2, 4]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n",[633,552,553,554,555],[516,2481,2482,2502,2520,2540,2548,2552,2560,2568,2624,2669,2700,2707,2732,2748,2764,2780,2795,2809,2823,2837,2841,2849,2881,2889,2910,2918,2926,2958,2966],{"__ignoreMap":484},[568,2483,2484,2486,2488,2490,2492,2494,2496,2498,2500],{"class":570,"line":485},[568,2485,574],{"class":573},[568,2487,578],{"class":577},[568,2489,582],{"class":581},[568,2491,585],{"class":581},[568,2493,588],{"class":573},[568,2495,591],{"class":573},[568,2497,595],{"class":594},[568,2499,591],{"class":573},[568,2501,600],{"class":573},[568,2503,2504,2506,2508,2510,2512,2514,2516,2518],{"class":570,"line":486},[568,2505,608],{"class":607},[568,2507,611],{"class":573},[568,2509,1170],{"class":614},[568,2511,618],{"class":573},[568,2513,621],{"class":607},[568,2515,624],{"class":573},[568,2517,1179],{"class":594},[568,2519,630],{"class":573},[568,2521,2523,2525,2527,2530,2532,2534,2536,2538],{"class":2522,"line":633},[570,604],[568,2524,608],{"class":607},[568,2526,611],{"class":573},[568,2528,2529],{"class":614}," MeshReflectionMaterial",[568,2531,618],{"class":573},[568,2533,621],{"class":607},[568,2535,624],{"class":573},[568,2537,627],{"class":594},[568,2539,630],{"class":573},[568,2541,2542,2544,2546],{"class":570,"line":653},[568,2543,679],{"class":573},[568,2545,578],{"class":577},[568,2547,600],{"class":573},[568,2549,2550],{"class":570,"line":659},[568,2551,656],{"emptyLinePlaceholder":492},[568,2553,2554,2556,2558],{"class":570,"line":676},[568,2555,574],{"class":573},[568,2557,696],{"class":577},[568,2559,600],{"class":573},[568,2561,2562,2564,2566],{"class":570,"line":686},[568,2563,704],{"class":573},[568,2565,707],{"class":577},[568,2567,600],{"class":573},[568,2569,2570,2572,2574,2576,2578,2580,2582,2584,2586,2588,2590,2592,2594,2596,2598,2600,2602,2604,2606,2608,2610,2612,2614,2616,2618,2620,2622],{"class":570,"line":691},[568,2571,715],{"class":573},[568,2573,718],{"class":577},[568,2575,721],{"class":573},[568,2577,724],{"class":581},[568,2579,588],{"class":573},[568,2581,591],{"class":573},[568,2583,731],{"class":573},[568,2585,735],{"class":734},[568,2587,738],{"class":573},[568,2589,735],{"class":734},[568,2591,738],{"class":573},[568,2593,735],{"class":734},[568,2595,747],{"class":573},[568,2597,591],{"class":573},[568,2599,721],{"class":573},[568,2601,1263],{"class":581},[568,2603,588],{"class":573},[568,2605,591],{"class":573},[568,2607,731],{"class":573},[568,2609,865],{"class":734},[568,2611,738],{"class":573},[568,2613,865],{"class":734},[568,2615,738],{"class":573},[568,2617,865],{"class":734},[568,2619,747],{"class":573},[568,2621,591],{"class":573},[568,2623,752],{"class":573},[568,2625,2626,2628,2630,2632,2635,2637,2639,2642,2645,2647,2650,2653,2655,2657,2659,2661,2663,2665,2667],{"class":570,"line":701},[568,2627,715],{"class":573},[568,2629,760],{"class":577},[568,2631,721],{"class":573},[568,2633,2634],{"class":581},"rotation",[568,2636,588],{"class":573},[568,2638,591],{"class":573},[568,2640,2641],{"class":573},"[-",[568,2643,2644],{"class":614},"Math",[568,2646,538],{"class":573},[568,2648,2649],{"class":614},"PI",[568,2651,2652],{"class":573}," / ",[568,2654,1352],{"class":734},[568,2656,738],{"class":573},[568,2658,865],{"class":734},[568,2660,738],{"class":573},[568,2662,865],{"class":734},[568,2664,747],{"class":573},[568,2666,591],{"class":573},[568,2668,600],{"class":573},[568,2670,2671,2673,2676,2678,2681,2683,2685,2687,2690,2692,2694,2696,2698],{"class":570,"line":712},[568,2672,768],{"class":573},[568,2674,2675],{"class":577},"TresPlaneGeometry",[568,2677,721],{"class":573},[568,2679,2680],{"class":581},"args",[568,2682,588],{"class":573},[568,2684,591],{"class":573},[568,2686,731],{"class":573},[568,2688,2689],{"class":734},"10",[568,2691,738],{"class":573},[568,2693,2689],{"class":734},[568,2695,747],{"class":573},[568,2697,591],{"class":573},[568,2699,752],{"class":573},[568,2701,2702,2704],{"class":570,"line":755},[568,2703,768],{"class":573},[568,2705,2706],{"class":577},"MeshReflectionMaterial\n",[568,2708,2709,2711,2714,2716,2718,2720,2723,2725,2728,2730],{"class":570,"line":765},[568,2710,803],{"class":573},[568,2712,2713],{"class":581},"blur",[568,2715,588],{"class":573},[568,2717,591],{"class":573},[568,2719,731],{"class":573},[568,2721,2722],{"class":734},"300",[568,2724,738],{"class":573},[568,2726,2727],{"class":734},"100",[568,2729,747],{"class":573},[568,2731,797],{"class":573},[568,2733,2734,2736,2739,2741,2743,2746],{"class":570,"line":549},[568,2735,803],{"class":573},[568,2737,2738],{"class":581},"mixBlur",[568,2740,588],{"class":573},[568,2742,591],{"class":573},[568,2744,2745],{"class":734},"30",[568,2747,797],{"class":573},[568,2749,2750,2752,2755,2757,2759,2762],{"class":570,"line":550},[568,2751,803],{"class":573},[568,2753,2754],{"class":581},"mixStrength",[568,2756,588],{"class":573},[568,2758,591],{"class":573},[568,2760,2761],{"class":734},"80",[568,2763,797],{"class":573},[568,2765,2766,2768,2771,2773,2775,2778],{"class":570,"line":551},[568,2767,803],{"class":573},[568,2769,2770],{"class":581},"mixContrast",[568,2772,588],{"class":573},[568,2774,591],{"class":573},[568,2776,2777],{"class":734},"1",[568,2779,797],{"class":573},[568,2781,2783,2786,2788,2790,2793],{"class":2782,"line":552},[570,604],[568,2784,2785],{"class":581},"        color",[568,2787,588],{"class":573},[568,2789,591],{"class":573},[568,2791,2792],{"class":594},"#a0a0a0",[568,2794,797],{"class":573},[568,2796,2798,2801,2803,2805,2807],{"class":2797,"line":553},[570,604],[568,2799,2800],{"class":581},"        metalness",[568,2802,588],{"class":573},[568,2804,591],{"class":573},[568,2806,1969],{"class":594},[568,2808,797],{"class":573},[568,2810,2812,2815,2817,2819,2821],{"class":2811,"line":554},[570,604],[568,2813,2814],{"class":581},"        roughness",[568,2816,588],{"class":573},[568,2818,591],{"class":573},[568,2820,2777],{"class":594},[568,2822,797],{"class":573},[568,2824,2826,2829,2831,2833,2835],{"class":2825,"line":555},[570,604],[568,2827,2828],{"class":581},"        mirror",[568,2830,588],{"class":573},[568,2832,591],{"class":573},[568,2834,865],{"class":594},[568,2836,797],{"class":573},[568,2838,2839],{"class":570,"line":556},[568,2840,1038],{"class":573},[568,2842,2843,2845,2847],{"class":570,"line":557},[568,2844,1044],{"class":573},[568,2846,760],{"class":577},[568,2848,600],{"class":573},[568,2850,2851,2853,2855,2857,2859,2861,2863,2865,2867,2869,2871,2873,2875,2877,2879],{"class":570,"line":558},[568,2852,715],{"class":573},[568,2854,760],{"class":577},[568,2856,721],{"class":573},[568,2858,724],{"class":581},[568,2860,588],{"class":573},[568,2862,591],{"class":573},[568,2864,731],{"class":573},[568,2866,865],{"class":734},[568,2868,738],{"class":573},[568,2870,2777],{"class":734},[568,2872,738],{"class":573},[568,2874,865],{"class":734},[568,2876,747],{"class":573},[568,2878,591],{"class":573},[568,2880,600],{"class":573},[568,2882,2883,2885,2887],{"class":570,"line":559},[568,2884,768],{"class":573},[568,2886,771],{"class":577},[568,2888,752],{"class":573},[568,2890,2891,2893,2896,2899,2901,2903,2906,2908],{"class":570,"line":560},[568,2892,768],{"class":573},[568,2894,2895],{"class":577},"TresMeshStandardMaterial",[568,2897,2898],{"class":581}," color",[568,2900,588],{"class":573},[568,2902,591],{"class":573},[568,2904,2905],{"class":594},"orange",[568,2907,591],{"class":573},[568,2909,752],{"class":573},[568,2911,2912,2914,2916],{"class":570,"line":561},[568,2913,1044],{"class":573},[568,2915,760],{"class":577},[568,2917,600],{"class":573},[568,2919,2920,2922,2924],{"class":570,"line":562},[568,2921,715],{"class":573},[568,2923,1056],{"class":577},[568,2925,752],{"class":573},[568,2927,2928,2930,2932,2934,2936,2938,2940,2942,2944,2946,2948,2950,2952,2954,2956],{"class":570,"line":563},[568,2929,715],{"class":573},[568,2931,1335],{"class":577},[568,2933,721],{"class":573},[568,2935,724],{"class":581},[568,2937,588],{"class":573},[568,2939,591],{"class":573},[568,2941,731],{"class":573},[568,2943,865],{"class":734},[568,2945,738],{"class":573},[568,2947,1352],{"class":734},[568,2949,738],{"class":573},[568,2951,1357],{"class":734},[568,2953,747],{"class":573},[568,2955,591],{"class":573},[568,2957,752],{"class":573},[568,2959,2960,2962,2964],{"class":570,"line":1035},[568,2961,1064],{"class":573},[568,2963,707],{"class":577},[568,2965,600],{"class":573},[568,2967,2968,2970,2972],{"class":570,"line":1041},[568,2969,679],{"class":573},[568,2971,696],{"class":577},[568,2973,600],{"class":573},[540,2975,1081],{"id":1080},[2019,2977,2978,2990],{},[2022,2979,2980],{},[2025,2981,2982,2985,2987],{},[2028,2983,2984],{"align":2030},"Name",[2028,2986,2034],{"align":2030},[2028,2988,2989],{},"Default",[2042,2991,2992,3007,3021,3035,3052,3066,3080,3094,3108,3122,3139,3153,3167,3181,3206,3221,3237],{},[2025,2993,2994,2999,3002],{},[2047,2995,2996],{"align":2030},[516,2997,2998],{},"resolution",[2047,3000,3001],{"align":2030},"Length in pixels of one side of the square reflective textures",[2047,3003,3004],{},[516,3005,3006],{},"256",[2025,3008,3009,3014,3017],{},[2047,3010,3011],{"align":2030},[516,3012,3013],{},"mix",[2047,3015,3016],{"align":2030},"Overall strength of the reflection",[2047,3018,3019],{},[516,3020,2777],{},[2025,3022,3023,3028,3031],{},[2047,3024,3025],{"align":2030},[516,3026,3027],{},"sharpMix",[2047,3029,3030],{"align":2030},"Strength of the sharp reflection on smooth surfaces",[2047,3032,3033],{},[516,3034,2777],{},[2025,3036,3037,3042,3048],{},[2047,3038,3039],{"align":2030},[516,3040,3041],{},"sharpDepthScale",[2047,3043,3044,3045,3047],{"align":2030},"Sharp reflection can be faded out by depth – distance from the reflective surface. Performance note: if the value is greater than ",[516,3046,865],{},", a depth texture will be created",[2047,3049,3050],{},[516,3051,2777],{},[2025,3053,3054,3059,3062],{},[2047,3055,3056],{"align":2030},[516,3057,3058],{},"sharpDepthBias",[2047,3060,3061],{"align":2030},"Sharp reflection depth falloff bias",[2047,3063,3064],{},[516,3065,865],{},[2025,3067,3068,3073,3076],{},[2047,3069,3070],{"align":2030},[516,3071,3072],{},"sharpDepthEdgeMin",[2047,3074,3075],{"align":2030},"Sharp reflection depth falloff start",[2047,3077,3078],{},[516,3079,865],{},[2025,3081,3082,3087,3090],{},[2047,3083,3084],{"align":2030},[516,3085,3086],{},"sharpDepthEdgeMax",[2047,3088,3089],{"align":2030},"Sharp reflection depth falloff end",[2047,3091,3092],{},[516,3093,895],{},[2025,3095,3096,3101,3104],{},[2047,3097,3098],{"align":2030},[516,3099,3100],{},"blurMixSmooth",[2047,3102,3103],{"align":2030},"Strength of the blurred reflection on smooth surfaces",[2047,3105,3106],{},[516,3107,2777],{},[2025,3109,3110,3115,3118],{},[2047,3111,3112],{"align":2030},[516,3113,3114],{},"blurMixRough",[2047,3116,3117],{"align":2030},"Strength of the blurred reflection on rough surfaces",[2047,3119,3120],{},[516,3121,2777],{},[2025,3123,3124,3129,3135],{},[2047,3125,3126],{"align":2030},[516,3127,3128],{},"blurDepthScale",[2047,3130,3131,3132,3134],{"align":2030},"Blurred reflection can spread out by depth – distance from the reflective surface. Performance note: if the value is greater than ",[516,3133,865],{},", depth texture will be rendered",[2047,3136,3137],{},[516,3138,2777],{},[2025,3140,3141,3146,3149],{},[2047,3142,3143],{"align":2030},[516,3144,3145],{},"blurDepthBias",[2047,3147,3148],{"align":2030},"Blurred reflection depth spread bias",[2047,3150,3151],{},[516,3152,865],{},[2025,3154,3155,3160,3163],{},[2047,3156,3157],{"align":2030},[516,3158,3159],{},"blurDepthEdgeMin",[2047,3161,3162],{"align":2030},"Blurred reflection depth spread start",[2047,3164,3165],{},[516,3166,865],{},[2025,3168,3169,3174,3177],{},[2047,3170,3171],{"align":2030},[516,3172,3173],{},"blurDepthEdgeMax",[2047,3175,3176],{"align":2030},"Blurred reflection depth spread end",[2047,3178,3179],{},[516,3180,895],{},[2025,3182,3183,3188,3202],{},[2047,3184,3185],{"align":2030},[516,3186,3187],{},"blurSize",[2047,3189,3190,3191,3194,3195,3198,3199,3201],{"align":2030},"Size of the blur. If ",[516,3192,3193],{},"[number, number]",", first number is width, second is height. Performance note: if other than ",[516,3196,3197],{},"[0, 0]"," or ",[516,3200,865],{},", a blur texture will be rendered",[2047,3203,3204],{},[516,3205,3197],{},[2025,3207,3208,3213,3216],{},[2047,3209,3210],{"align":2030},[516,3211,3212],{},"distortionMap",[2047,3214,3215],{"align":2030},"Texture for offsetting the reflection",[2047,3217,3218],{},[516,3219,3220],{},"undefined",[2025,3222,3223,3228,3233],{},[2047,3224,3225],{"align":2030},[516,3226,3227],{},"distortion",[2047,3229,3230,3231],{"align":2030},"Influence of ",[516,3232,3212],{},[2047,3234,3235],{},[516,3236,865],{},[2025,3238,3239,3244,3247],{},[2047,3240,3241],{"align":2030},[516,3242,3243],{},"reflectorOffset",[2047,3245,3246],{"align":2030},"Offsets the reflection",[2047,3248,3249],{},[516,3250,865],{},[512,3252,3253,3254,3256,3257,738,3259,738,3262,738,3265,738,3267,738,3270,738,3273,3276],{},"Additionally, the component extends ",[516,3255,2472],{}," and accepts all the same props including ",[516,3258,1023],{},[516,3260,3261],{},"roughness",[516,3263,3264],{},"metalness",[516,3266,1006],{},[516,3268,3269],{},"normalMap",[516,3271,3272],{},"roughnessMap",[516,3274,3275],{},"metalnessMap",", and more.",[1097,3278,2255],{},{"title":484,"searchDepth":485,"depth":486,"links":3280},[3281,3282],{"id":542,"depth":486,"text":15},{"id":1080,"depth":486,"text":1081},"Makes floors or walls that reflect the objects in your Scene.",{},{"title":179,"description":3283},"SmQ10ERsYJAK7ytDjV3ZCr9APJRPR6MGXbpwBm6D2G8",{"id":3288,"title":183,"body":3289,"description":3610,"extension":489,"links":490,"meta":3611,"navigation":492,"path":184,"seo":3612,"stem":185,"__hash__":3613},"docs/2.api/4.materials/point-material.md",{"type":477,"value":3290,"toc":3606},[3291,3296,3306,3312,3314,3588,3590,3604],[506,3292,3293],{},[3294,3295],"materials-point-material",{},[512,3297,3298,3301,3302,3305],{},[516,3299,3300],{},"\u003CPointMaterial />"," extends ",[516,3303,3304],{},"THREE.PointsMaterial",". It renders the points as dots, rather than the default squares.",[3307,3308,3309],"prose-warning",{},[512,3310,3311],{},"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.",[540,3313,15],{"id":542},[544,3315,3318],{"className":546,"code":3316,"highlights":3317,"language":564,"meta":484,"style":484},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { PointMaterial, OrbitControls } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" :look-at=\"[0, 0, 0]\" />\n    \u003COrbitControls />\n    \u003CTresPoints>\n      \u003CTresIcosahedronGeometry :args=\"[1, 4]\" />\n      \u003CPointMaterial\n        :size=\"5\"\n        color=\"orange\"\n      />\n    \u003C/TresPoints>\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[633,765,549,550],[516,3319,3320,3340,3358,3383,3391,3395,3403,3411,3467,3476,3485,3514,3522,3539,3552,3556,3564,3572,3580],{"__ignoreMap":484},[568,3321,3322,3324,3326,3328,3330,3332,3334,3336,3338],{"class":570,"line":485},[568,3323,574],{"class":573},[568,3325,578],{"class":577},[568,3327,582],{"class":581},[568,3329,585],{"class":581},[568,3331,588],{"class":573},[568,3333,591],{"class":573},[568,3335,595],{"class":594},[568,3337,591],{"class":573},[568,3339,600],{"class":573},[568,3341,3342,3344,3346,3348,3350,3352,3354,3356],{"class":570,"line":486},[568,3343,608],{"class":607},[568,3345,611],{"class":573},[568,3347,1170],{"class":614},[568,3349,618],{"class":573},[568,3351,621],{"class":607},[568,3353,624],{"class":573},[568,3355,1179],{"class":594},[568,3357,630],{"class":573},[568,3359,3361,3363,3365,3368,3370,3373,3375,3377,3379,3381],{"class":3360,"line":633},[570,604],[568,3362,608],{"class":607},[568,3364,611],{"class":573},[568,3366,3367],{"class":614}," PointMaterial",[568,3369,1430],{"class":573},[568,3371,3372],{"class":614}," OrbitControls",[568,3374,618],{"class":573},[568,3376,621],{"class":607},[568,3378,624],{"class":573},[568,3380,627],{"class":594},[568,3382,630],{"class":573},[568,3384,3385,3387,3389],{"class":570,"line":653},[568,3386,679],{"class":573},[568,3388,578],{"class":577},[568,3390,600],{"class":573},[568,3392,3393],{"class":570,"line":659},[568,3394,656],{"emptyLinePlaceholder":492},[568,3396,3397,3399,3401],{"class":570,"line":676},[568,3398,574],{"class":573},[568,3400,696],{"class":577},[568,3402,600],{"class":573},[568,3404,3405,3407,3409],{"class":570,"line":686},[568,3406,704],{"class":573},[568,3408,707],{"class":577},[568,3410,600],{"class":573},[568,3412,3413,3415,3417,3419,3421,3423,3425,3427,3429,3431,3433,3435,3437,3439,3441,3443,3445,3447,3449,3451,3453,3455,3457,3459,3461,3463,3465],{"class":570,"line":691},[568,3414,715],{"class":573},[568,3416,718],{"class":577},[568,3418,721],{"class":573},[568,3420,724],{"class":581},[568,3422,588],{"class":573},[568,3424,591],{"class":573},[568,3426,731],{"class":573},[568,3428,735],{"class":734},[568,3430,738],{"class":573},[568,3432,735],{"class":734},[568,3434,738],{"class":573},[568,3436,735],{"class":734},[568,3438,747],{"class":573},[568,3440,591],{"class":573},[568,3442,721],{"class":573},[568,3444,1263],{"class":581},[568,3446,588],{"class":573},[568,3448,591],{"class":573},[568,3450,731],{"class":573},[568,3452,865],{"class":734},[568,3454,738],{"class":573},[568,3456,865],{"class":734},[568,3458,738],{"class":573},[568,3460,865],{"class":734},[568,3462,747],{"class":573},[568,3464,591],{"class":573},[568,3466,752],{"class":573},[568,3468,3469,3471,3474],{"class":570,"line":701},[568,3470,715],{"class":573},[568,3472,3473],{"class":577},"OrbitControls",[568,3475,752],{"class":573},[568,3477,3478,3480,3483],{"class":570,"line":712},[568,3479,715],{"class":573},[568,3481,3482],{"class":577},"TresPoints",[568,3484,600],{"class":573},[568,3486,3487,3489,3492,3494,3496,3498,3500,3502,3504,3506,3508,3510,3512],{"class":570,"line":755},[568,3488,768],{"class":573},[568,3490,3491],{"class":577},"TresIcosahedronGeometry",[568,3493,721],{"class":573},[568,3495,2680],{"class":581},[568,3497,588],{"class":573},[568,3499,591],{"class":573},[568,3501,731],{"class":573},[568,3503,2777],{"class":734},[568,3505,738],{"class":573},[568,3507,1357],{"class":734},[568,3509,747],{"class":573},[568,3511,591],{"class":573},[568,3513,752],{"class":573},[568,3515,3517,3519],{"class":3516,"line":765},[570,604],[568,3518,768],{"class":573},[568,3520,3521],{"class":577},"PointMaterial\n",[568,3523,3525,3527,3530,3532,3534,3537],{"class":3524,"line":549},[570,604],[568,3526,803],{"class":573},[568,3528,3529],{"class":581},"size",[568,3531,588],{"class":573},[568,3533,591],{"class":573},[568,3535,3536],{"class":734},"5",[568,3538,797],{"class":573},[568,3540,3542,3544,3546,3548,3550],{"class":3541,"line":550},[570,604],[568,3543,2785],{"class":581},[568,3545,588],{"class":573},[568,3547,591],{"class":573},[568,3549,2905],{"class":594},[568,3551,797],{"class":573},[568,3553,3554],{"class":570,"line":551},[568,3555,1038],{"class":573},[568,3557,3558,3560,3562],{"class":570,"line":552},[568,3559,1044],{"class":573},[568,3561,3482],{"class":577},[568,3563,600],{"class":573},[568,3565,3566,3568,3570],{"class":570,"line":553},[568,3567,715],{"class":573},[568,3569,1056],{"class":577},[568,3571,752],{"class":573},[568,3573,3574,3576,3578],{"class":570,"line":554},[568,3575,1064],{"class":573},[568,3577,707],{"class":577},[568,3579,600],{"class":573},[568,3581,3582,3584,3586],{"class":570,"line":555},[568,3583,679],{"class":573},[568,3585,696],{"class":577},[568,3587,600],{"class":573},[540,3589,1081],{"id":1080},[512,3591,3592,3593,3600,3601,538],{},"All ",[525,3594,3597,3599],{"href":3595,"rel":3596},"https://threejs.org/docs/#api/en/materials/PointsMaterial",[529],[516,3598,3304],{}," properties"," are inherited by ",[516,3602,3603],{},"PointMaterial",[1097,3605,2255],{},{"title":484,"searchDepth":485,"depth":486,"links":3607},[3608,3609],{"id":542,"depth":486,"text":15},{"id":1080,"depth":486,"text":1081},"Extends THREE.PointsMaterial to render points as dots rather than squares.",{},{"title":183,"description":3610},"Aajs-h_7UFOgfUg69Q5QfqvfyKDHM1UKxS8GfRKzI2U",{"id":3615,"title":187,"body":3616,"description":3974,"extension":489,"links":490,"meta":3975,"navigation":492,"path":188,"seo":3976,"stem":189,"__hash__":3977},"docs/2.api/4.materials/wobble-material.md",{"type":477,"value":3617,"toc":3970},[3618,3623,3631,3633,3921,3923,3963,3968],[1782,3619,3620],{},[3621,3622],"materials-wobble-material",{},[512,3624,514,3625,2450,3627,3630],{},[516,3626,518],{},[516,3628,3629],{},"\u003CMeshWobbleMaterial />"," component that makes a geometry wobble and wave around.",[540,3632,15],{"id":542},[544,3634,3637],{"className":546,"code":3635,"highlights":3636,"language":564,"meta":484,"style":484},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { MeshWobbleMaterial } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" :look-at=\"[0, 0, 0]\" />\n    \u003CTresMesh>\n      \u003CTresTorusGeometry />\n      \u003CMeshWobbleMaterial\n        color=\"#f25042\"\n        :speed=\"1\"\n        :factor=\"0.6\"\n      />\n    \u003C/TresMesh>\n    \u003CTresAmbientLight />\n    \u003CTresDirectionalLight :position=\"[0, 2, 4]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n",[633,755,765,549,550,551],[516,3638,3639,3659,3677,3697,3705,3709,3717,3725,3781,3789,3797,3805,3819,3835,3852,3857,3865,3873,3905,3913],{"__ignoreMap":484},[568,3640,3641,3643,3645,3647,3649,3651,3653,3655,3657],{"class":570,"line":485},[568,3642,574],{"class":573},[568,3644,578],{"class":577},[568,3646,582],{"class":581},[568,3648,585],{"class":581},[568,3650,588],{"class":573},[568,3652,591],{"class":573},[568,3654,595],{"class":594},[568,3656,591],{"class":573},[568,3658,600],{"class":573},[568,3660,3661,3663,3665,3667,3669,3671,3673,3675],{"class":570,"line":486},[568,3662,608],{"class":607},[568,3664,611],{"class":573},[568,3666,1170],{"class":614},[568,3668,618],{"class":573},[568,3670,621],{"class":607},[568,3672,624],{"class":573},[568,3674,1179],{"class":594},[568,3676,630],{"class":573},[568,3678,3680,3682,3684,3687,3689,3691,3693,3695],{"class":3679,"line":633},[570,604],[568,3681,608],{"class":607},[568,3683,611],{"class":573},[568,3685,3686],{"class":614}," MeshWobbleMaterial",[568,3688,618],{"class":573},[568,3690,621],{"class":607},[568,3692,624],{"class":573},[568,3694,627],{"class":594},[568,3696,630],{"class":573},[568,3698,3699,3701,3703],{"class":570,"line":653},[568,3700,679],{"class":573},[568,3702,578],{"class":577},[568,3704,600],{"class":573},[568,3706,3707],{"class":570,"line":659},[568,3708,656],{"emptyLinePlaceholder":492},[568,3710,3711,3713,3715],{"class":570,"line":676},[568,3712,574],{"class":573},[568,3714,696],{"class":577},[568,3716,600],{"class":573},[568,3718,3719,3721,3723],{"class":570,"line":686},[568,3720,704],{"class":573},[568,3722,707],{"class":577},[568,3724,600],{"class":573},[568,3726,3727,3729,3731,3733,3735,3737,3739,3741,3743,3745,3747,3749,3751,3753,3755,3757,3759,3761,3763,3765,3767,3769,3771,3773,3775,3777,3779],{"class":570,"line":691},[568,3728,715],{"class":573},[568,3730,718],{"class":577},[568,3732,721],{"class":573},[568,3734,724],{"class":581},[568,3736,588],{"class":573},[568,3738,591],{"class":573},[568,3740,731],{"class":573},[568,3742,735],{"class":734},[568,3744,738],{"class":573},[568,3746,735],{"class":734},[568,3748,738],{"class":573},[568,3750,735],{"class":734},[568,3752,747],{"class":573},[568,3754,591],{"class":573},[568,3756,721],{"class":573},[568,3758,1263],{"class":581},[568,3760,588],{"class":573},[568,3762,591],{"class":573},[568,3764,731],{"class":573},[568,3766,865],{"class":734},[568,3768,738],{"class":573},[568,3770,865],{"class":734},[568,3772,738],{"class":573},[568,3774,865],{"class":734},[568,3776,747],{"class":573},[568,3778,591],{"class":573},[568,3780,752],{"class":573},[568,3782,3783,3785,3787],{"class":570,"line":701},[568,3784,715],{"class":573},[568,3786,760],{"class":577},[568,3788,600],{"class":573},[568,3790,3791,3793,3795],{"class":570,"line":712},[568,3792,768],{"class":573},[568,3794,1301],{"class":577},[568,3796,752],{"class":573},[568,3798,3800,3802],{"class":3799,"line":755},[570,604],[568,3801,768],{"class":573},[568,3803,3804],{"class":577},"MeshWobbleMaterial\n",[568,3806,3808,3810,3812,3814,3817],{"class":3807,"line":765},[570,604],[568,3809,2785],{"class":581},[568,3811,588],{"class":573},[568,3813,591],{"class":573},[568,3815,3816],{"class":594},"#f25042",[568,3818,797],{"class":573},[568,3820,3822,3824,3827,3829,3831,3833],{"class":3821,"line":549},[570,604],[568,3823,803],{"class":573},[568,3825,3826],{"class":581},"speed",[568,3828,588],{"class":573},[568,3830,591],{"class":573},[568,3832,2777],{"class":734},[568,3834,797],{"class":573},[568,3836,3838,3840,3843,3845,3847,3850],{"class":3837,"line":550},[570,604],[568,3839,803],{"class":573},[568,3841,3842],{"class":581},"factor",[568,3844,588],{"class":573},[568,3846,591],{"class":573},[568,3848,3849],{"class":734},"0.6",[568,3851,797],{"class":573},[568,3853,3855],{"class":3854,"line":551},[570,604],[568,3856,1038],{"class":573},[568,3858,3859,3861,3863],{"class":570,"line":552},[568,3860,1044],{"class":573},[568,3862,760],{"class":577},[568,3864,600],{"class":573},[568,3866,3867,3869,3871],{"class":570,"line":553},[568,3868,715],{"class":573},[568,3870,1056],{"class":577},[568,3872,752],{"class":573},[568,3874,3875,3877,3879,3881,3883,3885,3887,3889,3891,3893,3895,3897,3899,3901,3903],{"class":570,"line":554},[568,3876,715],{"class":573},[568,3878,1335],{"class":577},[568,3880,721],{"class":573},[568,3882,724],{"class":581},[568,3884,588],{"class":573},[568,3886,591],{"class":573},[568,3888,731],{"class":573},[568,3890,865],{"class":734},[568,3892,738],{"class":573},[568,3894,1352],{"class":734},[568,3896,738],{"class":573},[568,3898,1357],{"class":734},[568,3900,747],{"class":573},[568,3902,591],{"class":573},[568,3904,752],{"class":573},[568,3906,3907,3909,3911],{"class":570,"line":555},[568,3908,1064],{"class":573},[568,3910,707],{"class":577},[568,3912,600],{"class":573},[568,3914,3915,3917,3919],{"class":570,"line":556},[568,3916,679],{"class":573},[568,3918,696],{"class":577},[568,3920,600],{"class":573},[540,3922,1081],{"id":1080},[2019,3924,3925,3935],{},[2022,3926,3927],{},[2025,3928,3929,3931,3933],{},[2028,3930,2031],{"align":2030},[2028,3932,2034],{"align":2030},[2028,3934,2989],{},[2042,3936,3937,3950],{},[2025,3938,3939,3943,3946],{},[2047,3940,3941],{"align":2030},[2050,3942,3826],{},[2047,3944,3945],{"align":2030},"how fast the wobble effect would be.",[2047,3947,3948],{},[516,3949,2777],{},[2025,3951,3952,3956,3959],{},[2047,3953,3954],{"align":2030},[2050,3955,3842],{},[2047,3957,3958],{"align":2030},"how strong the wobble effect will deform the geometry",[2047,3960,3961],{},[516,3962,2777],{},[512,3964,3965,3966,1388],{},"This material extends ",[516,3967,2472],{},[1097,3969,2255],{},{"title":484,"searchDepth":485,"depth":486,"links":3971},[3972,3973],{"id":542,"depth":486,"text":15},{"id":1080,"depth":486,"text":1081},"Makes a geometry wobble and wave around with customizable speed and factor.",{},{"title":187,"description":3974},"FCaNs3jjWImwSxNZzcx1r_CPKoNz27JGUgdcUzvQ1Ys",1781273441626]