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