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