[{"data":1,"prerenderedAt":1653},["ShallowReactive",2],{"navigation":3,"/api/objects/reflector":470,"/api/objects/reflector-surround":1648},[4,22],{"title":5,"path":6,"stem":7,"children":8},"Getting Started","/getting-started","1.getting-started/1.index",[9,10,14,18],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"Installation Guide","/getting-started/installation","1.getting-started/2.installation",{"title":15,"path":16,"stem":17},"Usage","/getting-started/usage","1.getting-started/3.usage",{"title":19,"path":20,"stem":21},"Upgrade Guide","/getting-started/upgrade-guide","1.getting-started/4.upgrade-guide",{"title":23,"path":24,"stem":25,"children":26},"Api","/api","2.api",[27,30,80,114,156,190,284,310,344,394,436],{"title":28,"path":24,"stem":29},"All","2.api/index",{"title":31,"path":32,"stem":33,"children":34},"Abstractions","/api/abstractions","2.api/1.abstractions/index",[35,36,40,44,48,52,56,60,64,68,72,76],{"title":31,"path":32,"stem":33},{"title":37,"path":38,"stem":39},"Align","/api/abstractions/align","2.api/1.abstractions/align",{"title":41,"path":42,"stem":43},"Billboard","/api/abstractions/billboard","2.api/1.abstractions/billboard",{"title":45,"path":46,"stem":47},"Camera Shake","/api/abstractions/camera-shake","2.api/1.abstractions/camera-shake",{"title":49,"path":50,"stem":51},"Edges","/api/abstractions/edges","2.api/1.abstractions/edges",{"title":53,"path":54,"stem":55},"Fit","/api/abstractions/fit","2.api/1.abstractions/fit",{"title":57,"path":58,"stem":59},"Levioso (Float)","/api/abstractions/levioso","2.api/1.abstractions/levioso",{"title":61,"path":62,"stem":63},"Mask","/api/abstractions/mask","2.api/1.abstractions/mask",{"title":65,"path":66,"stem":67},"Outline","/api/abstractions/outline","2.api/1.abstractions/outline",{"title":69,"path":70,"stem":71},"Sampler","/api/abstractions/sampler","2.api/1.abstractions/sampler",{"title":73,"path":74,"stem":75},"ScreenSizer","/api/abstractions/screen-sizer","2.api/1.abstractions/screen-sizer",{"title":77,"path":78,"stem":79},"ScreenSpace","/api/abstractions/screen-space","2.api/1.abstractions/screen-space",{"title":81,"path":82,"stem":83,"children":84},"Controls","/api/controls","2.api/2.controls/index",[85,86,90,94,98,102,106,110],{"title":81,"path":82,"stem":83},{"title":87,"path":88,"stem":89},"Camera Controls","/api/controls/camera-controls","2.api/2.controls/camera-controls",{"title":91,"path":92,"stem":93},"Drag Controls","/api/controls/drag-controls","2.api/2.controls/drag-controls",{"title":95,"path":96,"stem":97},"Keyboard Controls","/api/controls/keyboard-controls","2.api/2.controls/keyboard-controls",{"title":99,"path":100,"stem":101},"Map Controls","/api/controls/map-controls","2.api/2.controls/map-controls",{"title":103,"path":104,"stem":105},"Orbit Controls","/api/controls/orbit-controls","2.api/2.controls/orbit-controls",{"title":107,"path":108,"stem":109},"PointerLock Controls","/api/controls/pointer-lock-controls","2.api/2.controls/pointer-lock-controls",{"title":111,"path":112,"stem":113},"Transform Controls","/api/controls/transform-controls","2.api/2.controls/transform-controls",{"title":115,"path":116,"stem":117,"children":118},"Loaders","/api/loaders","2.api/3.loaders/index",[119,120,124,128,132,136,140,144,148,152],{"title":115,"path":116,"stem":117},{"title":121,"path":122,"stem":123},"useGLTF","/api/loaders/use-gltf","2.api/3.loaders/1.use-gltf",{"title":125,"path":126,"stem":127},"GLTFModel","/api/loaders/gltf-model","2.api/3.loaders/2.gltf-model",{"title":129,"path":130,"stem":131},"useFBX","/api/loaders/use-fbx","2.api/3.loaders/3.use-fbx",{"title":133,"path":134,"stem":135},"FBXModel","/api/loaders/fbx-model","2.api/3.loaders/4.fbx-model",{"title":137,"path":138,"stem":139},"useTexture","/api/loaders/use-texture","2.api/3.loaders/5.use-texture",{"title":141,"path":142,"stem":143},"useTextures","/api/loaders/use-textures","2.api/3.loaders/6.use-textures",{"title":145,"path":146,"stem":147},"useSVG","/api/loaders/use-svg","2.api/3.loaders/7.use-svg",{"title":149,"path":150,"stem":151},"useProgress","/api/loaders/use-progress","2.api/3.loaders/use-progress",{"title":153,"path":154,"stem":155},"useVideoTexture","/api/loaders/use-video-texture","2.api/3.loaders/use-video-texture",{"title":157,"path":158,"stem":159,"children":160},"Materials","/api/materials","2.api/4.materials/index",[161,162,166,170,174,178,182,186],{"title":157,"path":158,"stem":159},{"title":163,"path":164,"stem":165},"Custom Shader Material","/api/materials/custom-shader-material","2.api/4.materials/custom-shader-material",{"title":167,"path":168,"stem":169},"Mesh Glass Material","/api/materials/glass-material","2.api/4.materials/glass-material",{"title":171,"path":172,"stem":173},"Holographic Material","/api/materials/holographic-material","2.api/4.materials/holographic-material",{"title":175,"path":176,"stem":177},"Mesh Discard Material","/api/materials/mesh-discard-material","2.api/4.materials/mesh-discard-material",{"title":179,"path":180,"stem":181},"Mesh Reflection Material","/api/materials/mesh-reflection-material","2.api/4.materials/mesh-reflection-material",{"title":183,"path":184,"stem":185},"Point Material","/api/materials/point-material","2.api/4.materials/point-material",{"title":187,"path":188,"stem":189},"Wobble Material","/api/materials/wobble-material","2.api/4.materials/wobble-material",{"title":191,"path":192,"stem":193,"children":194},"Shapes","/api/shapes","2.api/5.shapes/index",[195,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280],{"title":191,"path":192,"stem":193},{"title":197,"path":198,"stem":199},"Box","/api/shapes/box","2.api/5.shapes/box",{"title":201,"path":202,"stem":203},"CatmullRomCurve3","/api/shapes/catmullromcurve3","2.api/5.shapes/catmullromcurve3",{"title":205,"path":206,"stem":207},"Circle","/api/shapes/circle","2.api/5.shapes/circle",{"title":209,"path":210,"stem":211},"Cone","/api/shapes/cone","2.api/5.shapes/cone",{"title":213,"path":214,"stem":215},"Cubic Bezier Line","/api/shapes/cubic-bezier-line","2.api/5.shapes/cubic-bezier-line",{"title":217,"path":218,"stem":219},"Cylinder","/api/shapes/cylinder","2.api/5.shapes/cylinder",{"title":221,"path":222,"stem":223},"Dodecahedron","/api/shapes/dodecahedron","2.api/5.shapes/dodecahedron",{"title":225,"path":226,"stem":227},"Grid","/api/shapes/grid","2.api/5.shapes/grid",{"title":229,"path":230,"stem":231},"Icosahedron","/api/shapes/icosahedron","2.api/5.shapes/icosahedron",{"title":233,"path":234,"stem":235},"Line2","/api/shapes/line2","2.api/5.shapes/line2",{"title":237,"path":238,"stem":239},"Octahedron","/api/shapes/octahedron","2.api/5.shapes/octahedron",{"title":241,"path":242,"stem":243},"Plane","/api/shapes/plane","2.api/5.shapes/plane",{"title":245,"path":246,"stem":247},"Quadratic Bezier Line","/api/shapes/quadratic-bezier-line","2.api/5.shapes/quadratic-bezier-line",{"title":249,"path":250,"stem":251},"Ring","/api/shapes/ring","2.api/5.shapes/ring",{"title":253,"path":254,"stem":255},"Rounded Box","/api/shapes/rounded-box","2.api/5.shapes/rounded-box",{"title":257,"path":258,"stem":259},"Screen Quad","/api/shapes/screen-quad","2.api/5.shapes/screen-quad",{"title":261,"path":262,"stem":263},"Sphere","/api/shapes/sphere","2.api/5.shapes/sphere",{"title":265,"path":266,"stem":267},"Superformula","/api/shapes/superformula","2.api/5.shapes/superformula",{"title":269,"path":270,"stem":271},"Tetrahedron","/api/shapes/tetrahedron","2.api/5.shapes/tetrahedron",{"title":273,"path":274,"stem":275},"Torus","/api/shapes/torus","2.api/5.shapes/torus",{"title":277,"path":278,"stem":279},"Torus Knot","/api/shapes/torus-knot","2.api/5.shapes/torus-knot",{"title":281,"path":282,"stem":283},"Tube","/api/shapes/tube","2.api/5.shapes/tube",{"title":285,"path":286,"stem":287,"children":288},"Debug/Performance","/api/debug-performance","2.api/6.debug-performance/index",[289,290,294,298,302,306],{"title":285,"path":286,"stem":287},{"title":291,"path":292,"stem":293},"Helper","/api/debug-performance/helper","2.api/6.debug-performance/helper",{"title":295,"path":296,"stem":297},"LOD","/api/debug-performance/lod","2.api/6.debug-performance/lod",{"title":299,"path":300,"stem":301},"Stats","/api/debug-performance/stats","2.api/6.debug-performance/stats",{"title":303,"path":304,"stem":305},"StatsGl","/api/debug-performance/stats-gl","2.api/6.debug-performance/stats-gl",{"title":307,"path":308,"stem":309},"useBVH","/api/debug-performance/use-bvh","2.api/6.debug-performance/use-bvh",{"title":311,"path":312,"stem":313,"children":314},"Light/Shadow","/api/light-shadow","2.api/7.light-shadow/index",[315,316,320,324,328,332,336,340],{"title":311,"path":312,"stem":313},{"title":317,"path":318,"stem":319},"Accumulative Shadows","/api/light-shadow/accumulative-shadows","2.api/7.light-shadow/accumulative-shadows",{"title":321,"path":322,"stem":323},"Bake Shadows","/api/light-shadow/bake-shadows","2.api/7.light-shadow/bake-shadows",{"title":325,"path":326,"stem":327},"Circle Shadow","/api/light-shadow/circle-shadow","2.api/7.light-shadow/circle-shadow",{"title":329,"path":330,"stem":331},"Contact Shadows","/api/light-shadow/contact-shadows","2.api/7.light-shadow/contact-shadows",{"title":333,"path":334,"stem":335},"Lensflare","/api/light-shadow/lensflare","2.api/7.light-shadow/lensflare",{"title":337,"path":338,"stem":339},"Randomized Lights","/api/light-shadow/randomized-lights","2.api/7.light-shadow/randomized-lights",{"title":341,"path":342,"stem":343},"Soft Shadows","/api/light-shadow/soft-shadows","2.api/7.light-shadow/soft-shadows",{"title":345,"path":346,"stem":347,"children":348},"Staging","/api/staging","2.api/8.staging/index",[349,350,354,358,362,366,370,374,378,382,386,390],{"title":345,"path":346,"stem":347},{"title":351,"path":352,"stem":353},"Environment","/api/staging/environment","2.api/8.staging/1.environment",{"title":355,"path":356,"stem":357},"useEnvironment","/api/staging/use-environment","2.api/8.staging/2.use-environment",{"title":359,"path":360,"stem":361},"Lightformer","/api/staging/lightformer","2.api/8.staging/3.lightformer",{"title":363,"path":364,"stem":365},"Backdrop","/api/staging/backdrop","2.api/8.staging/backdrop",{"title":367,"path":368,"stem":369},"Ocean","/api/staging/ocean","2.api/8.staging/ocean",{"title":371,"path":372,"stem":373},"Precipitation","/api/staging/precipitation","2.api/8.staging/precipitation",{"title":375,"path":376,"stem":377},"Sky","/api/staging/sky","2.api/8.staging/sky",{"title":379,"path":380,"stem":381},"Smoke","/api/staging/smoke","2.api/8.staging/smoke",{"title":383,"path":384,"stem":385},"Sparkles","/api/staging/sparkles","2.api/8.staging/sparkles",{"title":387,"path":388,"stem":389},"Stage","/api/staging/stage","2.api/8.staging/stage",{"title":391,"path":392,"stem":393},"Stars","/api/staging/stars","2.api/8.staging/stars",{"title":395,"path":396,"stem":397,"children":398},"Objects","/api/objects","2.api/9.objects/index",[399,400,404,408,412,416,420,424,428,432],{"title":395,"path":396,"stem":397},{"title":401,"path":402,"stem":403},"AnimatedSprite","/api/objects/animated-sprite","2.api/9.objects/animated-sprite",{"title":405,"path":406,"stem":407},"CubeCamera","/api/objects/cube-camera","2.api/9.objects/cube-camera",{"title":409,"path":410,"stem":411},"Fbo","/api/objects/fbo","2.api/9.objects/fbo",{"title":413,"path":414,"stem":415},"GradientTexture","/api/objects/gradient-texture","2.api/9.objects/gradient-texture",{"title":417,"path":418,"stem":419},"HTML","/api/objects/html","2.api/9.objects/html",{"title":421,"path":422,"stem":423},"Image","/api/objects/image","2.api/9.objects/image",{"title":425,"path":426,"stem":427},"MarchingCubes","/api/objects/marching-cubes","2.api/9.objects/marching-cubes",{"title":429,"path":430,"stem":431},"Reflector","/api/objects/reflector","2.api/9.objects/reflector",{"title":433,"path":434,"stem":435},"Text3D","/api/objects/text-3d","2.api/9.objects/text-3d",{"title":437,"path":438,"stem":439,"children":440},"Miscellaneous","/api/miscellaneous","2.api/miscellaneous/index",[441,442,446,450,454,458,462,466],{"title":437,"path":438,"stem":439},{"title":443,"path":444,"stem":445},"Bounds","/api/miscellaneous/bounds","2.api/miscellaneous/bounds",{"title":447,"path":448,"stem":449},"GlobalAudio","/api/miscellaneous/global-audio","2.api/miscellaneous/global-audio",{"title":451,"path":452,"stem":453},"MouseParallax","/api/miscellaneous/mouse-parallax","2.api/miscellaneous/mouse-parallax",{"title":455,"path":456,"stem":457},"PositionalAudio","/api/miscellaneous/positional-audio","2.api/miscellaneous/positional-audio",{"title":459,"path":460,"stem":461},"useAnimations","/api/miscellaneous/use-animations","2.api/miscellaneous/use-animations",{"title":463,"path":464,"stem":465},"useGLTFExporter","/api/miscellaneous/use-gltf-exporter","2.api/miscellaneous/use-gltf-exporter",{"title":467,"path":468,"stem":469},"useIntersect","/api/miscellaneous/use-intersect","2.api/miscellaneous/use-intersect",{"id":471,"title":429,"body":472,"description":1642,"extension":1643,"links":1644,"meta":1645,"navigation":594,"path":430,"seo":1646,"stem":431,"__hash__":1647},"docs/2.api/9.objects/reflector.md",{"type":473,"value":474,"toc":1635},"minimark",[475,481,502,506,858,862,963,972,976,979,1266,1269,1272,1277,1631],[476,477,478],"scene-controls-wrapper",{},[479,480],"objects-reflector",{},[482,483,484,485,489,490,497,498,501],"p",{},"The ",[486,487,488],"code",{},"cientos"," package provides an abstraction of the ",[491,492,496],"a",{"href":493,"rel":494},"https://github.com/mrdoob/three.js/blob/dev/examples/jsm/objects/Reflector.js",[495],"nofollow","Reflector class",", which creates a Mesh showing a real-time reflection of your scene.  This Mesh extends from ",[486,499,500],{},"Mesh"," so all the default props can be passed as well:",[503,504,15],"h2",{"id":505},"usage",[507,508,513],"pre",{"className":509,"code":510,"language":511,"meta":512,"style":512},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { Reflector } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas shadows alpha>\n    \u003CTresPerspectiveCamera :position=\"[0, 0, 3]\" />\n    \u003COrbitControls />\n\n    \u003CSuspense>\n      \u003CReflector\n        :rotation=\"[-Math.PI * 0.5, 0, 0]\"\n        :position-y=\"-2\"\n        color=\"#fff\"\n      >\n        \u003CTresCircleGeometry :args=\"[10, 10]\" />\n      \u003C/Reflector>\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n","vue","",[486,514,515,550,579,589,596,606,623,667,677,682,692,701,745,765,780,786,819,829,839,849],{"__ignoreMap":512},[516,517,520,524,528,532,535,538,541,545,547],"span",{"class":518,"line":519},"line",1,[516,521,523],{"class":522},"sMK4o","\u003C",[516,525,527],{"class":526},"swJcz","script",[516,529,531],{"class":530},"spNyl"," setup",[516,533,534],{"class":530}," lang",[516,536,537],{"class":522},"=",[516,539,540],{"class":522},"\"",[516,542,544],{"class":543},"sfazB","ts",[516,546,540],{"class":522},[516,548,549],{"class":522},">\n",[516,551,553,557,560,564,567,570,573,576],{"class":518,"line":552},2,[516,554,556],{"class":555},"s7zQu","import",[516,558,559],{"class":522}," {",[516,561,563],{"class":562},"sTEyZ"," Reflector",[516,565,566],{"class":522}," }",[516,568,569],{"class":555}," from",[516,571,572],{"class":522}," '",[516,574,575],{"class":543},"@tresjs/cientos",[516,577,578],{"class":522},"'\n",[516,580,582,585,587],{"class":518,"line":581},3,[516,583,584],{"class":522},"\u003C/",[516,586,527],{"class":526},[516,588,549],{"class":522},[516,590,592],{"class":518,"line":591},4,[516,593,595],{"emptyLinePlaceholder":594},true,"\n",[516,597,599,601,604],{"class":518,"line":598},5,[516,600,523],{"class":522},[516,602,603],{"class":526},"template",[516,605,549],{"class":522},[516,607,609,612,615,618,621],{"class":518,"line":608},6,[516,610,611],{"class":522},"  \u003C",[516,613,614],{"class":526},"TresCanvas",[516,616,617],{"class":530}," shadows",[516,619,620],{"class":530}," alpha",[516,622,549],{"class":522},[516,624,626,629,632,635,638,640,642,645,649,652,654,656,659,662,664],{"class":518,"line":625},7,[516,627,628],{"class":522},"    \u003C",[516,630,631],{"class":526},"TresPerspectiveCamera",[516,633,634],{"class":522}," :",[516,636,637],{"class":530},"position",[516,639,537],{"class":522},[516,641,540],{"class":522},[516,643,644],{"class":522},"[",[516,646,648],{"class":647},"sbssI","0",[516,650,651],{"class":522},", ",[516,653,648],{"class":647},[516,655,651],{"class":522},[516,657,658],{"class":647},"3",[516,660,661],{"class":522},"]",[516,663,540],{"class":522},[516,665,666],{"class":522}," />\n",[516,668,670,672,675],{"class":518,"line":669},8,[516,671,628],{"class":522},[516,673,674],{"class":526},"OrbitControls",[516,676,666],{"class":522},[516,678,680],{"class":518,"line":679},9,[516,681,595],{"emptyLinePlaceholder":594},[516,683,685,687,690],{"class":518,"line":684},10,[516,686,628],{"class":522},[516,688,689],{"class":526},"Suspense",[516,691,549],{"class":522},[516,693,695,698],{"class":518,"line":694},11,[516,696,697],{"class":522},"      \u003C",[516,699,700],{"class":526},"Reflector\n",[516,702,704,707,710,712,714,717,720,723,726,729,732,734,736,738,740,742],{"class":518,"line":703},12,[516,705,706],{"class":522},"        :",[516,708,709],{"class":530},"rotation",[516,711,537],{"class":522},[516,713,540],{"class":522},[516,715,716],{"class":522},"[-",[516,718,719],{"class":562},"Math",[516,721,722],{"class":522},".",[516,724,725],{"class":562},"PI",[516,727,728],{"class":522}," * ",[516,730,731],{"class":647},"0.5",[516,733,651],{"class":522},[516,735,648],{"class":647},[516,737,651],{"class":522},[516,739,648],{"class":647},[516,741,661],{"class":522},[516,743,744],{"class":522},"\"\n",[516,746,748,750,753,755,757,760,763],{"class":518,"line":747},13,[516,749,706],{"class":522},[516,751,752],{"class":530},"position-y",[516,754,537],{"class":522},[516,756,540],{"class":522},[516,758,759],{"class":522},"-",[516,761,762],{"class":647},"2",[516,764,744],{"class":522},[516,766,768,771,773,775,778],{"class":518,"line":767},14,[516,769,770],{"class":530},"        color",[516,772,537],{"class":522},[516,774,540],{"class":522},[516,776,777],{"class":543},"#fff",[516,779,744],{"class":522},[516,781,783],{"class":518,"line":782},15,[516,784,785],{"class":522},"      >\n",[516,787,789,792,795,797,800,802,804,806,809,811,813,815,817],{"class":518,"line":788},16,[516,790,791],{"class":522},"        \u003C",[516,793,794],{"class":526},"TresCircleGeometry",[516,796,634],{"class":522},[516,798,799],{"class":530},"args",[516,801,537],{"class":522},[516,803,540],{"class":522},[516,805,644],{"class":522},[516,807,808],{"class":647},"10",[516,810,651],{"class":522},[516,812,808],{"class":647},[516,814,661],{"class":522},[516,816,540],{"class":522},[516,818,666],{"class":522},[516,820,822,825,827],{"class":518,"line":821},17,[516,823,824],{"class":522},"      \u003C/",[516,826,429],{"class":526},[516,828,549],{"class":522},[516,830,832,835,837],{"class":518,"line":831},18,[516,833,834],{"class":522},"    \u003C/",[516,836,689],{"class":526},[516,838,549],{"class":522},[516,840,842,845,847],{"class":518,"line":841},19,[516,843,844],{"class":522},"  \u003C/",[516,846,614],{"class":526},[516,848,549],{"class":522},[516,850,852,854,856],{"class":518,"line":851},20,[516,853,584],{"class":522},[516,855,603],{"class":526},[516,857,549],{"class":522},[503,859,861],{"id":860},"props","Props",[863,864,865,882],"table",{},[866,867,868],"thead",{},[869,870,871,876,879],"tr",{},[872,873,875],"th",{"align":874},"left","Prop",[872,877,878],{"align":874},"Description",[872,880,881],{},"Default",[883,884,885,900,913,925,937,950],"tbody",{},[869,886,887,894,897],{},[888,889,890],"td",{"align":874},[891,892,893],"strong",{},"color",[888,895,896],{"align":874},"The base color that's combine with the mirror effect",[888,898,899],{},"'#333'",[869,901,902,907,910],{},[888,903,904],{"align":874},[891,905,906],{},"textureWidth",[888,908,909],{"align":874},"the width of the texture to render on the mirror",[888,911,912],{},"512",[869,914,915,920,923],{},[888,916,917],{"align":874},[891,918,919],{},"textureHeight",[888,921,922],{"align":874},"the height of the texture to render on the mirror",[888,924,912],{},[869,926,927,932,935],{},[888,928,929],{"align":874},[891,930,931],{},"clipBias",[888,933,934],{"align":874},"to use the clipBias property",[888,936,648],{},[869,938,939,944,947],{},[888,940,941],{"align":874},[891,942,943],{},"multisample",[888,945,946],{"align":874},"how many samplers will be render",[888,948,949],{},"4",[869,951,952,957,960],{},[888,953,954],{"align":874},[891,955,956],{},"shader",[888,958,959],{"align":874},"The texture of the smoke.",[888,961,962],{},"Reflector.ReflectorShader",[964,965,966],"prose-warning",{},[482,967,968,969,971],{},"All the props except the ",[486,970,893],{},", are not reactive",[503,973,975],{"id":974},"custom-mirror-effect","Custom mirror effect",[482,977,978],{},"For more complex effect you can provide your own shaders, you could do this creating an object and pass the uniforms, vertexShaders or fragmentShaders:",[507,980,982],{"className":509,"code":981,"language":511,"meta":512,"style":512},"\u003Cscript setup lang=\"ts\">\nimport vertexShader from 'MyCustomVertexShader.glsl'\n\nconst customShader = {\n  vertexShader\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas shadows alpha>\n    \u003CTresPerspectiveCamera :position=\"[0, 0, 3]\" />\n    ...\n    \u003CReflector\n      :rotation=\"[-Math.PI * 0.5, 0, 0]\"\n      :position-y=\"-2\"\n      color=\"#fff\"\n      :shader=\"customShader\"\n    >\n      \u003CTresCircleGeometry :args=\"[10, 10]\" />\n    \u003C/Reflector>\n    ...\n  \u003C/TresCanvas>\n\u003C/template>\n",[486,983,984,1004,1021,1025,1038,1043,1048,1056,1060,1068,1080,1112,1117,1123,1158,1174,1187,1202,1207,1235,1243,1248,1257],{"__ignoreMap":512},[516,985,986,988,990,992,994,996,998,1000,1002],{"class":518,"line":519},[516,987,523],{"class":522},[516,989,527],{"class":526},[516,991,531],{"class":530},[516,993,534],{"class":530},[516,995,537],{"class":522},[516,997,540],{"class":522},[516,999,544],{"class":543},[516,1001,540],{"class":522},[516,1003,549],{"class":522},[516,1005,1006,1008,1011,1014,1016,1019],{"class":518,"line":552},[516,1007,556],{"class":555},[516,1009,1010],{"class":562}," vertexShader ",[516,1012,1013],{"class":555},"from",[516,1015,572],{"class":522},[516,1017,1018],{"class":543},"MyCustomVertexShader.glsl",[516,1020,578],{"class":522},[516,1022,1023],{"class":518,"line":581},[516,1024,595],{"emptyLinePlaceholder":594},[516,1026,1027,1030,1033,1035],{"class":518,"line":591},[516,1028,1029],{"class":530},"const",[516,1031,1032],{"class":562}," customShader ",[516,1034,537],{"class":522},[516,1036,1037],{"class":522}," {\n",[516,1039,1040],{"class":518,"line":598},[516,1041,1042],{"class":562},"  vertexShader\n",[516,1044,1045],{"class":518,"line":608},[516,1046,1047],{"class":522},"}\n",[516,1049,1050,1052,1054],{"class":518,"line":625},[516,1051,584],{"class":522},[516,1053,527],{"class":526},[516,1055,549],{"class":522},[516,1057,1058],{"class":518,"line":669},[516,1059,595],{"emptyLinePlaceholder":594},[516,1061,1062,1064,1066],{"class":518,"line":679},[516,1063,523],{"class":522},[516,1065,603],{"class":526},[516,1067,549],{"class":522},[516,1069,1070,1072,1074,1076,1078],{"class":518,"line":684},[516,1071,611],{"class":522},[516,1073,614],{"class":526},[516,1075,617],{"class":530},[516,1077,620],{"class":530},[516,1079,549],{"class":522},[516,1081,1082,1084,1086,1088,1090,1092,1094,1096,1098,1100,1102,1104,1106,1108,1110],{"class":518,"line":694},[516,1083,628],{"class":522},[516,1085,631],{"class":526},[516,1087,634],{"class":522},[516,1089,637],{"class":530},[516,1091,537],{"class":522},[516,1093,540],{"class":522},[516,1095,644],{"class":522},[516,1097,648],{"class":647},[516,1099,651],{"class":522},[516,1101,648],{"class":647},[516,1103,651],{"class":522},[516,1105,658],{"class":647},[516,1107,661],{"class":522},[516,1109,540],{"class":522},[516,1111,666],{"class":522},[516,1113,1114],{"class":518,"line":703},[516,1115,1116],{"class":562},"    ...\n",[516,1118,1119,1121],{"class":518,"line":747},[516,1120,628],{"class":522},[516,1122,700],{"class":526},[516,1124,1125,1128,1130,1132,1134,1136,1138,1140,1142,1144,1146,1148,1150,1152,1154,1156],{"class":518,"line":767},[516,1126,1127],{"class":522},"      :",[516,1129,709],{"class":530},[516,1131,537],{"class":522},[516,1133,540],{"class":522},[516,1135,716],{"class":522},[516,1137,719],{"class":562},[516,1139,722],{"class":522},[516,1141,725],{"class":562},[516,1143,728],{"class":522},[516,1145,731],{"class":647},[516,1147,651],{"class":522},[516,1149,648],{"class":647},[516,1151,651],{"class":522},[516,1153,648],{"class":647},[516,1155,661],{"class":522},[516,1157,744],{"class":522},[516,1159,1160,1162,1164,1166,1168,1170,1172],{"class":518,"line":782},[516,1161,1127],{"class":522},[516,1163,752],{"class":530},[516,1165,537],{"class":522},[516,1167,540],{"class":522},[516,1169,759],{"class":522},[516,1171,762],{"class":647},[516,1173,744],{"class":522},[516,1175,1176,1179,1181,1183,1185],{"class":518,"line":788},[516,1177,1178],{"class":530},"      color",[516,1180,537],{"class":522},[516,1182,540],{"class":522},[516,1184,777],{"class":543},[516,1186,744],{"class":522},[516,1188,1189,1191,1193,1195,1197,1200],{"class":518,"line":821},[516,1190,1127],{"class":522},[516,1192,956],{"class":530},[516,1194,537],{"class":522},[516,1196,540],{"class":522},[516,1198,1199],{"class":562},"customShader",[516,1201,744],{"class":522},[516,1203,1204],{"class":518,"line":831},[516,1205,1206],{"class":522},"    >\n",[516,1208,1209,1211,1213,1215,1217,1219,1221,1223,1225,1227,1229,1231,1233],{"class":518,"line":841},[516,1210,697],{"class":522},[516,1212,794],{"class":526},[516,1214,634],{"class":522},[516,1216,799],{"class":530},[516,1218,537],{"class":522},[516,1220,540],{"class":522},[516,1222,644],{"class":522},[516,1224,808],{"class":647},[516,1226,651],{"class":522},[516,1228,808],{"class":647},[516,1230,661],{"class":522},[516,1232,540],{"class":522},[516,1234,666],{"class":522},[516,1236,1237,1239,1241],{"class":518,"line":851},[516,1238,834],{"class":522},[516,1240,429],{"class":526},[516,1242,549],{"class":522},[516,1244,1246],{"class":518,"line":1245},21,[516,1247,1116],{"class":562},[516,1249,1251,1253,1255],{"class":518,"line":1250},22,[516,1252,844],{"class":522},[516,1254,614],{"class":526},[516,1256,549],{"class":522},[516,1258,1260,1262,1264],{"class":518,"line":1259},23,[516,1261,584],{"class":522},[516,1263,603],{"class":526},[516,1265,549],{"class":522},[482,1267,1268],{},"The Reflector shader use the following configuration by default:",[482,1270,1271],{},"You can extend, modify or just play with them",[1273,1274,1276],"h3",{"id":1275},"default-shader","Default shader",[507,1278,1282],{"className":1279,"code":1280,"language":1281,"meta":512,"style":512},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const shader = {\n  name: 'ReflectorShader',\n  uniforms: {\n    color: {\n      value: null\n    },\n    tDiffuse: {\n      value: null\n    },\n    textureMatrix: {\n      value: null\n    }\n  },\n  vertexShader: /* glsl */`\n  uniform mat4 textureMatrix;\n  varying vec4 vUv;\n\n  #include \u003Ccommon>\n  #include \u003Clogdepthbuf_pars_vertex>\n\n  void main() {\n    vUv = textureMatrix * vec4( position, 1.0 );\n    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n\n    #include \u003Clogdepthbuf_vertex>\n\n  }`,\n  fragmentShader: /* glsl */`\n  uniform vec3 color;\n  uniform sampler2D tDiffuse;\n  varying vec4 vUv;\n\n  #include \u003Clogdepthbuf_pars_fragment>\n\n  float blendOverlay( float base, float blend ) {\n    return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n  }\n\n  vec3 blendOverlay( vec3 base, vec3 blend ) {\n    return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n  }\n\n  void main() {\n    #include \u003Clogdepthbuf_fragment>\n\n    vec4 base = texture2DProj( tDiffuse, vUv );\n    gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n\n    #include \u003Ctonemapping_fragment>\n    #include \u003Ccolorspace_fragment>\n  }`\n\n}\n","js",[486,1283,1284,1295,1314,1323,1332,1342,1347,1356,1364,1368,1377,1385,1390,1395,1409,1414,1419,1423,1428,1433,1437,1442,1447,1452,1457,1463,1468,1479,1491,1497,1503,1508,1513,1519,1524,1530,1536,1542,1547,1553,1559,1564,1569,1574,1580,1585,1591,1597,1602,1608,1614,1621,1626],{"__ignoreMap":512},[516,1285,1286,1288,1291,1293],{"class":518,"line":519},[516,1287,1029],{"class":530},[516,1289,1290],{"class":562}," shader ",[516,1292,537],{"class":522},[516,1294,1037],{"class":522},[516,1296,1297,1300,1303,1305,1308,1311],{"class":518,"line":552},[516,1298,1299],{"class":526},"  name",[516,1301,1302],{"class":522},":",[516,1304,572],{"class":522},[516,1306,1307],{"class":543},"ReflectorShader",[516,1309,1310],{"class":522},"'",[516,1312,1313],{"class":522},",\n",[516,1315,1316,1319,1321],{"class":518,"line":581},[516,1317,1318],{"class":526},"  uniforms",[516,1320,1302],{"class":522},[516,1322,1037],{"class":522},[516,1324,1325,1328,1330],{"class":518,"line":591},[516,1326,1327],{"class":526},"    color",[516,1329,1302],{"class":522},[516,1331,1037],{"class":522},[516,1333,1334,1337,1339],{"class":518,"line":598},[516,1335,1336],{"class":526},"      value",[516,1338,1302],{"class":522},[516,1340,1341],{"class":522}," null\n",[516,1343,1344],{"class":518,"line":608},[516,1345,1346],{"class":522},"    },\n",[516,1348,1349,1352,1354],{"class":518,"line":625},[516,1350,1351],{"class":526},"    tDiffuse",[516,1353,1302],{"class":522},[516,1355,1037],{"class":522},[516,1357,1358,1360,1362],{"class":518,"line":669},[516,1359,1336],{"class":526},[516,1361,1302],{"class":522},[516,1363,1341],{"class":522},[516,1365,1366],{"class":518,"line":679},[516,1367,1346],{"class":522},[516,1369,1370,1373,1375],{"class":518,"line":684},[516,1371,1372],{"class":526},"    textureMatrix",[516,1374,1302],{"class":522},[516,1376,1037],{"class":522},[516,1378,1379,1381,1383],{"class":518,"line":694},[516,1380,1336],{"class":526},[516,1382,1302],{"class":522},[516,1384,1341],{"class":522},[516,1386,1387],{"class":518,"line":703},[516,1388,1389],{"class":522},"    }\n",[516,1391,1392],{"class":518,"line":747},[516,1393,1394],{"class":522},"  },\n",[516,1396,1397,1400,1402,1406],{"class":518,"line":767},[516,1398,1399],{"class":526},"  vertexShader",[516,1401,1302],{"class":522},[516,1403,1405],{"class":1404},"sHwdD"," /* glsl */",[516,1407,1408],{"class":522},"`\n",[516,1410,1411],{"class":518,"line":782},[516,1412,1413],{"class":543},"  uniform mat4 textureMatrix;\n",[516,1415,1416],{"class":518,"line":788},[516,1417,1418],{"class":543},"  varying vec4 vUv;\n",[516,1420,1421],{"class":518,"line":821},[516,1422,595],{"emptyLinePlaceholder":594},[516,1424,1425],{"class":518,"line":831},[516,1426,1427],{"class":543},"  #include \u003Ccommon>\n",[516,1429,1430],{"class":518,"line":841},[516,1431,1432],{"class":543},"  #include \u003Clogdepthbuf_pars_vertex>\n",[516,1434,1435],{"class":518,"line":851},[516,1436,595],{"emptyLinePlaceholder":594},[516,1438,1439],{"class":518,"line":1245},[516,1440,1441],{"class":543},"  void main() {\n",[516,1443,1444],{"class":518,"line":1250},[516,1445,1446],{"class":543},"    vUv = textureMatrix * vec4( position, 1.0 );\n",[516,1448,1449],{"class":518,"line":1259},[516,1450,1451],{"class":543},"    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n",[516,1453,1455],{"class":518,"line":1454},24,[516,1456,595],{"emptyLinePlaceholder":594},[516,1458,1460],{"class":518,"line":1459},25,[516,1461,1462],{"class":543},"    #include \u003Clogdepthbuf_vertex>\n",[516,1464,1466],{"class":518,"line":1465},26,[516,1467,595],{"emptyLinePlaceholder":594},[516,1469,1471,1474,1477],{"class":518,"line":1470},27,[516,1472,1473],{"class":543},"  }",[516,1475,1476],{"class":522},"`",[516,1478,1313],{"class":522},[516,1480,1482,1485,1487,1489],{"class":518,"line":1481},28,[516,1483,1484],{"class":526},"  fragmentShader",[516,1486,1302],{"class":522},[516,1488,1405],{"class":1404},[516,1490,1408],{"class":522},[516,1492,1494],{"class":518,"line":1493},29,[516,1495,1496],{"class":543},"  uniform vec3 color;\n",[516,1498,1500],{"class":518,"line":1499},30,[516,1501,1502],{"class":543},"  uniform sampler2D tDiffuse;\n",[516,1504,1506],{"class":518,"line":1505},31,[516,1507,1418],{"class":543},[516,1509,1511],{"class":518,"line":1510},32,[516,1512,595],{"emptyLinePlaceholder":594},[516,1514,1516],{"class":518,"line":1515},33,[516,1517,1518],{"class":543},"  #include \u003Clogdepthbuf_pars_fragment>\n",[516,1520,1522],{"class":518,"line":1521},34,[516,1523,595],{"emptyLinePlaceholder":594},[516,1525,1527],{"class":518,"line":1526},35,[516,1528,1529],{"class":543},"  float blendOverlay( float base, float blend ) {\n",[516,1531,1533],{"class":518,"line":1532},36,[516,1534,1535],{"class":543},"    return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n",[516,1537,1539],{"class":518,"line":1538},37,[516,1540,1541],{"class":543},"  }\n",[516,1543,1545],{"class":518,"line":1544},38,[516,1546,595],{"emptyLinePlaceholder":594},[516,1548,1550],{"class":518,"line":1549},39,[516,1551,1552],{"class":543},"  vec3 blendOverlay( vec3 base, vec3 blend ) {\n",[516,1554,1556],{"class":518,"line":1555},40,[516,1557,1558],{"class":543},"    return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n",[516,1560,1562],{"class":518,"line":1561},41,[516,1563,1541],{"class":543},[516,1565,1567],{"class":518,"line":1566},42,[516,1568,595],{"emptyLinePlaceholder":594},[516,1570,1572],{"class":518,"line":1571},43,[516,1573,1441],{"class":543},[516,1575,1577],{"class":518,"line":1576},44,[516,1578,1579],{"class":543},"    #include \u003Clogdepthbuf_fragment>\n",[516,1581,1583],{"class":518,"line":1582},45,[516,1584,595],{"emptyLinePlaceholder":594},[516,1586,1588],{"class":518,"line":1587},46,[516,1589,1590],{"class":543},"    vec4 base = texture2DProj( tDiffuse, vUv );\n",[516,1592,1594],{"class":518,"line":1593},47,[516,1595,1596],{"class":543},"    gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n",[516,1598,1600],{"class":518,"line":1599},48,[516,1601,595],{"emptyLinePlaceholder":594},[516,1603,1605],{"class":518,"line":1604},49,[516,1606,1607],{"class":543},"    #include \u003Ctonemapping_fragment>\n",[516,1609,1611],{"class":518,"line":1610},50,[516,1612,1613],{"class":543},"    #include \u003Ccolorspace_fragment>\n",[516,1615,1617,1619],{"class":518,"line":1616},51,[516,1618,1473],{"class":543},[516,1620,1408],{"class":522},[516,1622,1624],{"class":518,"line":1623},52,[516,1625,595],{"emptyLinePlaceholder":594},[516,1627,1629],{"class":518,"line":1628},53,[516,1630,1047],{"class":522},[1632,1633,1634],"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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .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":512,"searchDepth":519,"depth":552,"links":1636},[1637,1638,1639],{"id":505,"depth":552,"text":15},{"id":860,"depth":552,"text":861},{"id":974,"depth":552,"text":975,"children":1640},[1641],{"id":1275,"depth":581,"text":1276},"Create real-time reflections of your scene.","md",null,{},{"title":429,"description":1642},"24igh7rDYMu_PMUA2O2RSz3ThFBClmpHnB0dGe1M0hI",[1649,1651],{"title":425,"path":426,"stem":427,"description":1650,"children":-1},"Create organic blob-like shapes using metaballs.",{"title":433,"path":434,"stem":435,"description":1652,"children":-1},"Render text in 3D using TextGeometry.",1776202095301]