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