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