[{"data":1,"prerenderedAt":61354},["ShallowReactive",2],{"navigation":3,"/api":470,"/api-surround":569,"abstraction-list":574,"controls-list":6566,"loaders-list":11363,"materials-list":20553,"shapes-list":23846,"debug-list":30170,"light-list":32950,"staging-list":37717,"objects-list":45343,"misc-list":57375},[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":28,"body":472,"description":562,"extension":563,"links":564,"meta":565,"navigation":566,"path":24,"seo":567,"stem":29,"__hash__":568},"docs/2.api/index.md",{"type":473,"value":474,"toc":547},"minimark",[475,480,484,488,491,495,498,502,505,509,512,516,519,523,526,530,533,537,540,544],[476,477,479],"h2",{"id":478},"abstraction","📦 Abstraction",[481,482],"api-list",{"list-name":483,"path":32},"abstraction-list",[476,485,487],{"id":486},"controls","🎮 Controls",[481,489],{"list-name":490,"path":82},"controls-list",[476,492,494],{"id":493},"loaders","📂 Loaders",[481,496],{"list-name":497,"path":116},"loaders-list",[476,499,501],{"id":500},"materials","🎨 Materials",[481,503],{"list-name":504,"path":158},"materials-list",[476,506,508],{"id":507},"shapes","🔷 Shapes",[481,510],{"list-name":511,"path":192},"shapes-list",[476,513,515],{"id":514},"debug-performance","📊 Debug & Performance",[481,517],{"list-name":518,"path":286},"debug-list",[476,520,522],{"id":521},"light-shadow","💡 Light & Shadow",[481,524],{"list-name":525,"path":312},"light-list",[476,527,529],{"id":528},"staging","🎭 Staging",[481,531],{"list-name":532,"path":346},"staging-list",[476,534,536],{"id":535},"objects","🎬 Objects",[481,538],{"list-name":539,"path":396},"objects-list",[476,541,543],{"id":542},"️-miscellaneous","🛠️ Miscellaneous",[481,545],{"list-name":546,"path":438},"misc-list",{"title":548,"searchDepth":549,"depth":550,"links":551},"",1,2,[552,553,554,555,556,557,558,559,560,561],{"id":478,"depth":550,"text":479},{"id":486,"depth":550,"text":487},{"id":493,"depth":550,"text":494},{"id":500,"depth":550,"text":501},{"id":507,"depth":550,"text":508},{"id":514,"depth":550,"text":515},{"id":521,"depth":550,"text":522},{"id":528,"depth":550,"text":529},{"id":535,"depth":550,"text":536},{"id":542,"depth":550,"text":543},"Explore the complete API reference","md",null,{},true,{"title":28,"description":562},"sw9kHYPeTK3xIXtV7tt103OdjppzE9OpuYL8etJhS4o",[570,572],{"title":19,"path":20,"stem":21,"description":571,"children":-1},"Migration guide for cientos",{"title":31,"path":32,"stem":33,"description":573,"children":-1},"UI components reference",[575,1315,1661,2246,2557,3259,3713,4417,4928,5827,6178],{"id":576,"title":37,"body":577,"description":1311,"extension":563,"links":564,"meta":1312,"navigation":566,"path":38,"seo":1313,"stem":39,"__hash__":1314},"docs/2.api/1.abstractions/align.md",{"type":473,"value":578,"toc":1306},[579,585,594,597,895,899,902,1156,1160,1302],[580,581,582],"scene-controls-wrapper",{},[583,584],"abstractions-align",{},[586,587,588,589,593],"p",{},"Calculates a bounding box around its children and aligns them as a group within their parent. The component measures its contents and realigns on every frame unless ",[590,591,592],"code",{},"cacheKey"," is set.",[476,595,15],{"id":596},"usage",[598,599,606],"pre",{"className":600,"code":601,"highlights":602,"language":605,"meta":548,"style":548},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { Align, OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#222\">\n    \u003CTresPerspectiveCamera />\n    \u003COrbitControls />\n\n    \u003CTresAxesHelper :scale=\"2\" />\n\n    \u003CAlign top right back>\n      \u003CTresMesh>\n        \u003CTresBoxGeometry />\n        \u003CTresMeshNormalMaterial />\n      \u003C/TresMesh>\n    \u003C/Align>\n  \u003C/TresCanvas>\n\u003C/template>\n\n",[550,603,604],13,18,"vue",[590,607,608,642,678,699,709,715,725,748,760,770,775,801,806,824,835,846,856,866,876,886],{"__ignoreMap":548},[609,610,612,616,620,624,627,630,633,637,639],"span",{"class":611,"line":549},"line",[609,613,615],{"class":614},"sMK4o","\u003C",[609,617,619],{"class":618},"swJcz","script",[609,621,623],{"class":622},"spNyl"," setup",[609,625,626],{"class":622}," lang",[609,628,629],{"class":614},"=",[609,631,632],{"class":614},"\"",[609,634,636],{"class":635},"sfazB","ts",[609,638,632],{"class":614},[609,640,641],{"class":614},">\n",[609,643,646,650,653,657,660,663,666,669,672,675],{"class":644,"line":550},[611,645],"highlight",[609,647,649],{"class":648},"s7zQu","import",[609,651,652],{"class":614}," {",[609,654,656],{"class":655},"sTEyZ"," Align",[609,658,659],{"class":614},",",[609,661,662],{"class":655}," OrbitControls",[609,664,665],{"class":614}," }",[609,667,668],{"class":648}," from",[609,670,671],{"class":614}," '",[609,673,674],{"class":635},"@tresjs/cientos",[609,676,677],{"class":614},"'\n",[609,679,681,683,685,688,690,692,694,697],{"class":611,"line":680},3,[609,682,649],{"class":648},[609,684,652],{"class":614},[609,686,687],{"class":655}," TresCanvas",[609,689,665],{"class":614},[609,691,668],{"class":648},[609,693,671],{"class":614},[609,695,696],{"class":635},"@tresjs/core",[609,698,677],{"class":614},[609,700,702,705,707],{"class":611,"line":701},4,[609,703,704],{"class":614},"\u003C/",[609,706,619],{"class":618},[609,708,641],{"class":614},[609,710,712],{"class":611,"line":711},5,[609,713,714],{"emptyLinePlaceholder":566},"\n",[609,716,718,720,723],{"class":611,"line":717},6,[609,719,615],{"class":614},[609,721,722],{"class":618},"template",[609,724,641],{"class":614},[609,726,728,731,734,737,739,741,744,746],{"class":611,"line":727},7,[609,729,730],{"class":614},"  \u003C",[609,732,733],{"class":618},"TresCanvas",[609,735,736],{"class":622}," clear-color",[609,738,629],{"class":614},[609,740,632],{"class":614},[609,742,743],{"class":635},"#222",[609,745,632],{"class":614},[609,747,641],{"class":614},[609,749,751,754,757],{"class":611,"line":750},8,[609,752,753],{"class":614},"    \u003C",[609,755,756],{"class":618},"TresPerspectiveCamera",[609,758,759],{"class":614}," />\n",[609,761,763,765,768],{"class":611,"line":762},9,[609,764,753],{"class":614},[609,766,767],{"class":618},"OrbitControls",[609,769,759],{"class":614},[609,771,773],{"class":611,"line":772},10,[609,774,714],{"emptyLinePlaceholder":566},[609,776,778,780,783,786,789,791,793,797,799],{"class":611,"line":777},11,[609,779,753],{"class":614},[609,781,782],{"class":618},"TresAxesHelper",[609,784,785],{"class":614}," :",[609,787,788],{"class":622},"scale",[609,790,629],{"class":614},[609,792,632],{"class":614},[609,794,796],{"class":795},"sbssI","2",[609,798,632],{"class":614},[609,800,759],{"class":614},[609,802,804],{"class":611,"line":803},12,[609,805,714],{"emptyLinePlaceholder":566},[609,807,809,811,813,816,819,822],{"class":808,"line":603},[611,645],[609,810,753],{"class":614},[609,812,37],{"class":618},[609,814,815],{"class":622}," top",[609,817,818],{"class":622}," right",[609,820,821],{"class":622}," back",[609,823,641],{"class":614},[609,825,827,830,833],{"class":611,"line":826},14,[609,828,829],{"class":614},"      \u003C",[609,831,832],{"class":618},"TresMesh",[609,834,641],{"class":614},[609,836,838,841,844],{"class":611,"line":837},15,[609,839,840],{"class":614},"        \u003C",[609,842,843],{"class":618},"TresBoxGeometry",[609,845,759],{"class":614},[609,847,849,851,854],{"class":611,"line":848},16,[609,850,840],{"class":614},[609,852,853],{"class":618},"TresMeshNormalMaterial",[609,855,759],{"class":614},[609,857,859,862,864],{"class":611,"line":858},17,[609,860,861],{"class":614},"      \u003C/",[609,863,832],{"class":618},[609,865,641],{"class":614},[609,867,869,872,874],{"class":868,"line":604},[611,645],[609,870,871],{"class":614},"    \u003C/",[609,873,37],{"class":618},[609,875,641],{"class":614},[609,877,879,882,884],{"class":611,"line":878},19,[609,880,881],{"class":614},"  \u003C/",[609,883,733],{"class":618},[609,885,641],{"class":614},[609,887,889,891,893],{"class":611,"line":888},20,[609,890,704],{"class":614},[609,892,722],{"class":618},[609,894,641],{"class":614},[476,896,898],{"id":897},"props","Props",[586,900,901],{},"All props are optional.",[903,904,905,921],"table",{},[906,907,908],"thead",{},[909,910,911,915,918],"tr",{},[912,913,914],"th",{},"Prop",[912,916,917],{},"Description",[912,919,920],{},"Default",[922,923,924,948,967,986,1004,1023,1041,1057,1073,1089,1105,1127,1139],"tbody",{},[909,925,926,932,943],{},[927,928,929],"td",{},[590,930,931],{},"top",[927,933,934,935,938,939,942],{},"If ",[590,936,937],{},"true",", aligns bounding box bottom to ",[590,940,941],{},"0"," on the y-axis",[927,944,945],{},[590,946,947],{},"false",[909,949,950,955,963],{},[927,951,952],{},[590,953,954],{},"bottom",[927,956,934,957,959,960,962],{},[590,958,937],{},", aligns bounding box top to ",[590,961,941],{}," on the y-axis.",[927,964,965],{},[590,966,947],{},[909,968,969,974,982],{},[927,970,971],{},[590,972,973],{},"left",[927,975,934,976,978,979,981],{},[590,977,937],{},", aligns bounding box right to ",[590,980,941],{}," on the x-axis.",[927,983,984],{},[590,985,947],{},[909,987,988,993,1000],{},[927,989,990],{},[590,991,992],{},"right",[927,994,934,995,997,998,981],{},[590,996,937],{},", aligns bounding box left to ",[590,999,941],{},[927,1001,1002],{},[590,1003,947],{},[909,1005,1006,1011,1019],{},[927,1007,1008],{},[590,1009,1010],{},"front",[927,1012,934,1013,1015,1016,1018],{},[590,1014,937],{},", aligns bounding box back to ",[590,1017,941],{}," on the z-axis.",[927,1020,1021],{},[590,1022,947],{},[909,1024,1025,1030,1037],{},[927,1026,1027],{},[590,1028,1029],{},"back",[927,1031,934,1032,1034,1035,1018],{},[590,1033,937],{},", aligns bounding box front to ",[590,1036,941],{},[927,1038,1039],{},[590,1040,947],{},[909,1042,1043,1048,1053],{},[927,1044,1045],{},[590,1046,1047],{},"disable",[927,1049,934,1050,1052],{},[590,1051,937],{},", disables alignment on all axes.",[927,1054,1055],{},[590,1056,947],{},[909,1058,1059,1064,1069],{},[927,1060,1061],{},[590,1062,1063],{},"disableX",[927,1065,934,1066,1068],{},[590,1067,937],{},", disables alignment on the x-axis.",[927,1070,1071],{},[590,1072,947],{},[909,1074,1075,1080,1085],{},[927,1076,1077],{},[590,1078,1079],{},"disableY",[927,1081,934,1082,1084],{},[590,1083,937],{},", disables alignment on the y-axis.",[927,1086,1087],{},[590,1088,947],{},[909,1090,1091,1096,1101],{},[927,1092,1093],{},[590,1094,1095],{},"disableZ",[927,1097,934,1098,1100],{},[590,1099,937],{},", disables alignment on the z-axis.",[927,1102,1103],{},[590,1104,947],{},[909,1106,1107,1112,1123],{},[927,1108,1109],{},[590,1110,1111],{},"precise",[927,1113,1114,1115,1122],{},"See ",[1116,1117,1121],"a",{"href":1118,"rel":1119},"https://threejs.org/docs/index.html?q=box3#api/en/math/Box3.setFromObject",[1120],"nofollow","Box3.setFromObject",".",[927,1124,1125],{},[590,1126,937],{},[909,1128,1129,1134,1137],{},[927,1130,1131],{},[590,1132,1133],{},"onAlign",[927,1135,1136],{},"Callback that fires when updating, after measurement.",[927,1138],{},[909,1140,1141,1145,1151],{},[927,1142,1143],{},[590,1144,592],{},[927,1146,1147,1148,1150],{},"If set, component will only update when ",[590,1149,592],{},"'s value changes. If unset, component will update every frame.",[927,1152,1153],{},[590,1154,1155],{},"undefined",[476,1157,1159],{"id":1158},"aligncallbackoptions","AlignCallbackOptions",[598,1161,1164],{"className":1162,"code":1163,"language":636,"meta":548,"style":548},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export interface AlignCallbackOptions {\n  /** The next parent above \u003CAlign /> */\n  parent: Object3D\n  /** The outmost container group of the \u003CAlign/> component */\n  container: Object3D\n  width: number\n  height: number\n  depth: number\n  boundingBox: Box3\n  boundingSphere: Sphere\n  center: Vector3\n  verticalAlignment: number\n  horizontalAlignment: number\n  depthAlignment: number\n}\n",[590,1165,1166,1181,1187,1198,1203,1212,1222,1231,1240,1250,1260,1270,1279,1288,1297],{"__ignoreMap":548},[609,1167,1168,1171,1174,1178],{"class":611,"line":549},[609,1169,1170],{"class":648},"export",[609,1172,1173],{"class":622}," interface",[609,1175,1177],{"class":1176},"sBMFI"," AlignCallbackOptions",[609,1179,1180],{"class":614}," {\n",[609,1182,1183],{"class":611,"line":550},[609,1184,1186],{"class":1185},"sHwdD","  /** The next parent above \u003CAlign /> */\n",[609,1188,1189,1192,1195],{"class":611,"line":680},[609,1190,1191],{"class":618},"  parent",[609,1193,1194],{"class":614},":",[609,1196,1197],{"class":1176}," Object3D\n",[609,1199,1200],{"class":611,"line":701},[609,1201,1202],{"class":1185},"  /** The outmost container group of the \u003CAlign/> component */\n",[609,1204,1205,1208,1210],{"class":611,"line":711},[609,1206,1207],{"class":618},"  container",[609,1209,1194],{"class":614},[609,1211,1197],{"class":1176},[609,1213,1214,1217,1219],{"class":611,"line":717},[609,1215,1216],{"class":618},"  width",[609,1218,1194],{"class":614},[609,1220,1221],{"class":1176}," number\n",[609,1223,1224,1227,1229],{"class":611,"line":727},[609,1225,1226],{"class":618},"  height",[609,1228,1194],{"class":614},[609,1230,1221],{"class":1176},[609,1232,1233,1236,1238],{"class":611,"line":750},[609,1234,1235],{"class":618},"  depth",[609,1237,1194],{"class":614},[609,1239,1221],{"class":1176},[609,1241,1242,1245,1247],{"class":611,"line":762},[609,1243,1244],{"class":618},"  boundingBox",[609,1246,1194],{"class":614},[609,1248,1249],{"class":1176}," Box3\n",[609,1251,1252,1255,1257],{"class":611,"line":772},[609,1253,1254],{"class":618},"  boundingSphere",[609,1256,1194],{"class":614},[609,1258,1259],{"class":1176}," Sphere\n",[609,1261,1262,1265,1267],{"class":611,"line":777},[609,1263,1264],{"class":618},"  center",[609,1266,1194],{"class":614},[609,1268,1269],{"class":1176}," Vector3\n",[609,1271,1272,1275,1277],{"class":611,"line":803},[609,1273,1274],{"class":618},"  verticalAlignment",[609,1276,1194],{"class":614},[609,1278,1221],{"class":1176},[609,1280,1281,1284,1286],{"class":611,"line":603},[609,1282,1283],{"class":618},"  horizontalAlignment",[609,1285,1194],{"class":614},[609,1287,1221],{"class":1176},[609,1289,1290,1293,1295],{"class":611,"line":826},[609,1291,1292],{"class":618},"  depthAlignment",[609,1294,1194],{"class":614},[609,1296,1221],{"class":1176},[609,1298,1299],{"class":611,"line":837},[609,1300,1301],{"class":614},"}\n",[1303,1304,1305],"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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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":548,"searchDepth":549,"depth":550,"links":1307},[1308,1309,1310],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},{"id":1158,"depth":550,"text":1159},"Calculate and align children within their parent using bounding boxes.",{},{"title":37,"description":1311},"xKHSzqW-P7t9zP-D9aaYnfHnsXGeMVyRjLNmM0UU0M8",{"id":1316,"title":41,"body":1317,"description":1657,"extension":563,"links":564,"meta":1658,"navigation":566,"path":42,"seo":1659,"stem":43,"__hash__":1660},"docs/2.api/1.abstractions/billboard.md",{"type":473,"value":1318,"toc":1653},[1319,1324,1331,1333,1574,1576,1650],[580,1320,1321],{},[1322,1323],"abstractions-billboard",{},[586,1325,1326,1327,1330],{},"Adds a ",[590,1328,1329],{},"THREE.Group"," that always faces the camera.",[476,1332,15],{"id":596},[598,1334,1337],{"className":600,"code":1335,"highlights":1336,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { Billboard, Box, OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#333333\">\n    \u003COrbitControls />\n    \u003CTresPerspectiveCamera :position=\"[0, 0, 10]\" />\n    \u003CBillboard>\n      \u003CBox :scale=\"[0.5, 0.5, 0.001]\">\n        \u003CTresMeshNormalMaterial />\n      \u003C/Box>\n    \u003C/Billboard>\n  \u003C/TresCanvas>\n\u003C/template>\n\n",[550,772,826],[590,1338,1339,1359,1388,1406,1414,1418,1426,1445,1453,1490,1499,1533,1541,1549,1558,1566],{"__ignoreMap":548},[609,1340,1341,1343,1345,1347,1349,1351,1353,1355,1357],{"class":611,"line":549},[609,1342,615],{"class":614},[609,1344,619],{"class":618},[609,1346,623],{"class":622},[609,1348,626],{"class":622},[609,1350,629],{"class":614},[609,1352,632],{"class":614},[609,1354,636],{"class":635},[609,1356,632],{"class":614},[609,1358,641],{"class":614},[609,1360,1362,1364,1366,1369,1371,1374,1376,1378,1380,1382,1384,1386],{"class":1361,"line":550},[611,645],[609,1363,649],{"class":648},[609,1365,652],{"class":614},[609,1367,1368],{"class":655}," Billboard",[609,1370,659],{"class":614},[609,1372,1373],{"class":655}," Box",[609,1375,659],{"class":614},[609,1377,662],{"class":655},[609,1379,665],{"class":614},[609,1381,668],{"class":648},[609,1383,671],{"class":614},[609,1385,674],{"class":635},[609,1387,677],{"class":614},[609,1389,1390,1392,1394,1396,1398,1400,1402,1404],{"class":611,"line":680},[609,1391,649],{"class":648},[609,1393,652],{"class":614},[609,1395,687],{"class":655},[609,1397,665],{"class":614},[609,1399,668],{"class":648},[609,1401,671],{"class":614},[609,1403,696],{"class":635},[609,1405,677],{"class":614},[609,1407,1408,1410,1412],{"class":611,"line":701},[609,1409,704],{"class":614},[609,1411,619],{"class":618},[609,1413,641],{"class":614},[609,1415,1416],{"class":611,"line":711},[609,1417,714],{"emptyLinePlaceholder":566},[609,1419,1420,1422,1424],{"class":611,"line":717},[609,1421,615],{"class":614},[609,1423,722],{"class":618},[609,1425,641],{"class":614},[609,1427,1428,1430,1432,1434,1436,1438,1441,1443],{"class":611,"line":727},[609,1429,730],{"class":614},[609,1431,733],{"class":618},[609,1433,736],{"class":622},[609,1435,629],{"class":614},[609,1437,632],{"class":614},[609,1439,1440],{"class":635},"#333333",[609,1442,632],{"class":614},[609,1444,641],{"class":614},[609,1446,1447,1449,1451],{"class":611,"line":750},[609,1448,753],{"class":614},[609,1450,767],{"class":618},[609,1452,759],{"class":614},[609,1454,1455,1457,1459,1461,1464,1466,1468,1471,1473,1476,1478,1480,1483,1486,1488],{"class":611,"line":762},[609,1456,753],{"class":614},[609,1458,756],{"class":618},[609,1460,785],{"class":614},[609,1462,1463],{"class":622},"position",[609,1465,629],{"class":614},[609,1467,632],{"class":614},[609,1469,1470],{"class":614},"[",[609,1472,941],{"class":795},[609,1474,1475],{"class":614},", ",[609,1477,941],{"class":795},[609,1479,1475],{"class":614},[609,1481,1482],{"class":795},"10",[609,1484,1485],{"class":614},"]",[609,1487,632],{"class":614},[609,1489,759],{"class":614},[609,1491,1493,1495,1497],{"class":1492,"line":772},[611,645],[609,1494,753],{"class":614},[609,1496,41],{"class":618},[609,1498,641],{"class":614},[609,1500,1501,1503,1505,1507,1509,1511,1513,1515,1518,1520,1522,1524,1527,1529,1531],{"class":611,"line":777},[609,1502,829],{"class":614},[609,1504,197],{"class":618},[609,1506,785],{"class":614},[609,1508,788],{"class":622},[609,1510,629],{"class":614},[609,1512,632],{"class":614},[609,1514,1470],{"class":614},[609,1516,1517],{"class":795},"0.5",[609,1519,1475],{"class":614},[609,1521,1517],{"class":795},[609,1523,1475],{"class":614},[609,1525,1526],{"class":795},"0.001",[609,1528,1485],{"class":614},[609,1530,632],{"class":614},[609,1532,641],{"class":614},[609,1534,1535,1537,1539],{"class":611,"line":803},[609,1536,840],{"class":614},[609,1538,853],{"class":618},[609,1540,759],{"class":614},[609,1542,1543,1545,1547],{"class":611,"line":603},[609,1544,861],{"class":614},[609,1546,197],{"class":618},[609,1548,641],{"class":614},[609,1550,1552,1554,1556],{"class":1551,"line":826},[611,645],[609,1553,871],{"class":614},[609,1555,41],{"class":618},[609,1557,641],{"class":614},[609,1559,1560,1562,1564],{"class":611,"line":837},[609,1561,881],{"class":614},[609,1563,733],{"class":618},[609,1565,641],{"class":614},[609,1567,1568,1570,1572],{"class":611,"line":848},[609,1569,704],{"class":614},[609,1571,722],{"class":618},[609,1573,641],{"class":614},[476,1575,898],{"id":897},[903,1577,1578,1588],{},[906,1579,1580],{},[909,1581,1582,1584,1586],{},[912,1583,914],{"align":973},[912,1585,917],{"align":973},[912,1587,920],{},[922,1589,1590,1608,1622,1636],{},[909,1591,1592,1597,1604],{},[927,1593,1594],{"align":973},[590,1595,1596],{},"autoUpdate",[927,1598,1599,1600,1603],{"align":973},"Whether the ",[590,1601,1602],{},"\u003CBillboard />"," should face the camera automatically on every frame.",[927,1605,1606],{},[590,1607,937],{},[909,1609,1610,1615,1618],{},[927,1611,1612],{"align":973},[590,1613,1614],{},"lockX",[927,1616,1617],{"align":973},"Whether to lock the x-axis.",[927,1619,1620],{},[590,1621,947],{},[909,1623,1624,1629,1632],{},[927,1625,1626],{"align":973},[590,1627,1628],{},"lockY",[927,1630,1631],{"align":973},"Whether to lock the y-axis.",[927,1633,1634],{},[590,1635,947],{},[909,1637,1638,1643,1646],{},[927,1639,1640],{"align":973},[590,1641,1642],{},"lockZ",[927,1644,1645],{"align":973},"Whether to lock the z-axis.",[927,1647,1648],{},[590,1649,947],{},[1303,1651,1652],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":548,"searchDepth":549,"depth":550,"links":1654},[1655,1656],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},"Make objects always face the camera automatically.",{},{"title":41,"description":1657},"H0n9HWJ0zpK9LW-fd3nQd2xaa9PwDLLnVK3zImwMAZs",{"id":1662,"title":45,"body":1663,"description":2242,"extension":563,"links":564,"meta":2243,"navigation":566,"path":46,"seo":2244,"stem":47,"__hash__":2245},"docs/2.api/1.abstractions/camera-shake.md",{"type":473,"value":1664,"toc":2238},[1665,1670,1723,1725,2049,2088,2090,2236],[580,1666,1667],{},[1668,1669],"abstractions-camera-shake",{},[586,1671,1672,1675,1676,1475,1680,1684,1685,1688,1689,1475,1692,1695,1696,1699,1700,1475,1703,1475,1706,1709,1710,1713,1714,1122],{},[590,1673,1674],{},"\u003CCameraShake />"," is a component that adds ",[1677,1678,1679],"strong",{},"natural",[1681,1682,1683],"em",{},"noise-driven motion"," to the ",[1677,1686,1687],{},"active camera",".\nIt offers ",[1677,1690,1691],{},"per-axis control",[1677,1693,1694],{},"adjustable intensity",", and ",[1681,1697,1698],{},"optional decay"," — perfect for ",[1681,1701,1702],{},"handheld feel",[1681,1704,1705],{},"footsteps",[1681,1707,1708],{},"impacts",", or ",[1681,1711,1712],{},"engine rumble"," — and is based on the ",[1116,1715,1718,1719,1722],{"href":1716,"rel":1717},"https://drei.docs.pmnd.rs/staging/camera-shake#camerashake",[1120],"Drei ",[590,1720,1721],{},"CameraShake"," component",[476,1724,15],{"id":596},[598,1726,1729],{"className":600,"code":1727,"highlights":1728,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { CameraShake, OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#222\">\n    \u003CTresPerspectiveCamera :position=\"[0, 2, 6]\" />\n    \u003COrbitControls make-default />\n\n    \u003CCameraShake :intensity=\"1\" :max-yaw=\"0.01\" :max-pitch=\"0.01\" :max-roll=\"0.01\" />\n      \u003CTresAxesHelper :scale=\"2\" />\n      \u003CTresMesh :position-y=\"0.5\">\n        \u003CTresBoxGeometry :args=\"[1, 1, 1]\" />\n        \u003CTresMeshNormalMaterial />\n      \u003C/TresMesh>\n  \u003C/TresCanvas>\n\u003C/template>\n",[550,777,848],[590,1730,1731,1751,1775,1793,1801,1805,1813,1831,1864,1875,1879,1942,1962,1983,2016,2024,2033,2041],{"__ignoreMap":548},[609,1732,1733,1735,1737,1739,1741,1743,1745,1747,1749],{"class":611,"line":549},[609,1734,615],{"class":614},[609,1736,619],{"class":618},[609,1738,623],{"class":622},[609,1740,626],{"class":622},[609,1742,629],{"class":614},[609,1744,632],{"class":614},[609,1746,636],{"class":635},[609,1748,632],{"class":614},[609,1750,641],{"class":614},[609,1752,1754,1756,1758,1761,1763,1765,1767,1769,1771,1773],{"class":1753,"line":550},[611,645],[609,1755,649],{"class":648},[609,1757,652],{"class":614},[609,1759,1760],{"class":655}," CameraShake",[609,1762,659],{"class":614},[609,1764,662],{"class":655},[609,1766,665],{"class":614},[609,1768,668],{"class":648},[609,1770,671],{"class":614},[609,1772,674],{"class":635},[609,1774,677],{"class":614},[609,1776,1777,1779,1781,1783,1785,1787,1789,1791],{"class":611,"line":680},[609,1778,649],{"class":648},[609,1780,652],{"class":614},[609,1782,687],{"class":655},[609,1784,665],{"class":614},[609,1786,668],{"class":648},[609,1788,671],{"class":614},[609,1790,696],{"class":635},[609,1792,677],{"class":614},[609,1794,1795,1797,1799],{"class":611,"line":701},[609,1796,704],{"class":614},[609,1798,619],{"class":618},[609,1800,641],{"class":614},[609,1802,1803],{"class":611,"line":711},[609,1804,714],{"emptyLinePlaceholder":566},[609,1806,1807,1809,1811],{"class":611,"line":717},[609,1808,615],{"class":614},[609,1810,722],{"class":618},[609,1812,641],{"class":614},[609,1814,1815,1817,1819,1821,1823,1825,1827,1829],{"class":611,"line":727},[609,1816,730],{"class":614},[609,1818,733],{"class":618},[609,1820,736],{"class":622},[609,1822,629],{"class":614},[609,1824,632],{"class":614},[609,1826,743],{"class":635},[609,1828,632],{"class":614},[609,1830,641],{"class":614},[609,1832,1833,1835,1837,1839,1841,1843,1845,1847,1849,1851,1853,1855,1858,1860,1862],{"class":611,"line":750},[609,1834,753],{"class":614},[609,1836,756],{"class":618},[609,1838,785],{"class":614},[609,1840,1463],{"class":622},[609,1842,629],{"class":614},[609,1844,632],{"class":614},[609,1846,1470],{"class":614},[609,1848,941],{"class":795},[609,1850,1475],{"class":614},[609,1852,796],{"class":795},[609,1854,1475],{"class":614},[609,1856,1857],{"class":795},"6",[609,1859,1485],{"class":614},[609,1861,632],{"class":614},[609,1863,759],{"class":614},[609,1865,1866,1868,1870,1873],{"class":611,"line":762},[609,1867,753],{"class":614},[609,1869,767],{"class":618},[609,1871,1872],{"class":622}," make-default",[609,1874,759],{"class":614},[609,1876,1877],{"class":611,"line":772},[609,1878,714],{"emptyLinePlaceholder":566},[609,1880,1882,1884,1886,1888,1891,1893,1895,1898,1900,1902,1905,1907,1909,1912,1914,1916,1919,1921,1923,1925,1927,1929,1932,1934,1936,1938,1940],{"class":1881,"line":777},[611,645],[609,1883,753],{"class":614},[609,1885,1721],{"class":618},[609,1887,785],{"class":614},[609,1889,1890],{"class":622},"intensity",[609,1892,629],{"class":614},[609,1894,632],{"class":614},[609,1896,1897],{"class":795},"1",[609,1899,632],{"class":614},[609,1901,785],{"class":614},[609,1903,1904],{"class":622},"max-yaw",[609,1906,629],{"class":614},[609,1908,632],{"class":614},[609,1910,1911],{"class":795},"0.01",[609,1913,632],{"class":614},[609,1915,785],{"class":614},[609,1917,1918],{"class":622},"max-pitch",[609,1920,629],{"class":614},[609,1922,632],{"class":614},[609,1924,1911],{"class":795},[609,1926,632],{"class":614},[609,1928,785],{"class":614},[609,1930,1931],{"class":622},"max-roll",[609,1933,629],{"class":614},[609,1935,632],{"class":614},[609,1937,1911],{"class":795},[609,1939,632],{"class":614},[609,1941,759],{"class":614},[609,1943,1944,1946,1948,1950,1952,1954,1956,1958,1960],{"class":611,"line":803},[609,1945,829],{"class":614},[609,1947,782],{"class":618},[609,1949,785],{"class":614},[609,1951,788],{"class":622},[609,1953,629],{"class":614},[609,1955,632],{"class":614},[609,1957,796],{"class":795},[609,1959,632],{"class":614},[609,1961,759],{"class":614},[609,1963,1964,1966,1968,1970,1973,1975,1977,1979,1981],{"class":611,"line":603},[609,1965,829],{"class":614},[609,1967,832],{"class":618},[609,1969,785],{"class":614},[609,1971,1972],{"class":622},"position-y",[609,1974,629],{"class":614},[609,1976,632],{"class":614},[609,1978,1517],{"class":795},[609,1980,632],{"class":614},[609,1982,641],{"class":614},[609,1984,1985,1987,1989,1991,1994,1996,1998,2000,2002,2004,2006,2008,2010,2012,2014],{"class":611,"line":826},[609,1986,840],{"class":614},[609,1988,843],{"class":618},[609,1990,785],{"class":614},[609,1992,1993],{"class":622},"args",[609,1995,629],{"class":614},[609,1997,632],{"class":614},[609,1999,1470],{"class":614},[609,2001,1897],{"class":795},[609,2003,1475],{"class":614},[609,2005,1897],{"class":795},[609,2007,1475],{"class":614},[609,2009,1897],{"class":795},[609,2011,1485],{"class":614},[609,2013,632],{"class":614},[609,2015,759],{"class":614},[609,2017,2018,2020,2022],{"class":611,"line":837},[609,2019,840],{"class":614},[609,2021,853],{"class":618},[609,2023,759],{"class":614},[609,2025,2027,2029,2031],{"class":2026,"line":848},[611,645],[609,2028,861],{"class":614},[609,2030,832],{"class":618},[609,2032,641],{"class":614},[609,2034,2035,2037,2039],{"class":611,"line":858},[609,2036,881],{"class":614},[609,2038,733],{"class":618},[609,2040,641],{"class":614},[609,2042,2043,2045,2047],{"class":611,"line":604},[609,2044,704],{"class":614},[609,2046,722],{"class":618},[609,2048,641],{"class":614},[2050,2051,2052,2073],"prose-note",{},[586,2053,2054,2056,2057,2062,2063,2066,2067,2072],{},[590,2055,1674],{}," is fully compatible with ",[1677,2058,2059],{},[590,2060,2061],{},"\u003COrbitControls />",".\nTo ensure it works ",[1681,2064,2065],{},"as expected",", make sure to add the ",[1677,2068,2069],{},[590,2070,2071],{},"make-default"," prop:",[598,2074,2076],{"className":600,"code":2075,"language":605,"meta":548,"style":548},"\u003COrbitControls make-default />\n",[590,2077,2078],{"__ignoreMap":548},[609,2079,2080,2082,2084,2086],{"class":611,"line":549},[609,2081,615],{"class":614},[609,2083,767],{"class":618},[609,2085,1872],{"class":622},[609,2087,759],{"class":614},[476,2089,898],{"id":897},[903,2091,2092,2102],{},[906,2093,2094],{},[909,2095,2096,2098,2100],{},[912,2097,914],{},[912,2099,917],{},[912,2101,920],{},[922,2103,2104,2117,2133,2151,2165,2179,2193,2208,2222],{},[909,2105,2106,2110,2113],{},[927,2107,2108],{},[590,2109,1890],{},[927,2111,2112],{},"The intensity of the shake (0–1).",[927,2114,2115],{},[590,2116,1897],{},[909,2118,2119,2124,2129],{},[927,2120,2121],{},[590,2122,2123],{},"decay",[927,2125,934,2126,2128],{},[590,2127,937],{},", intensity decays over time.",[927,2130,2131],{},[590,2132,947],{},[909,2134,2135,2140,2146],{},[927,2136,2137],{},[590,2138,2139],{},"decayRate",[927,2141,2142,2143,2145],{},"How fast intensity changes when ",[590,2144,2123],{}," is enabled.",[927,2147,2148],{},[590,2149,2150],{},"0.65",[909,2152,2153,2158,2161],{},[927,2154,2155],{},[590,2156,2157],{},"maxYaw",[927,2159,2160],{},"Maximum yaw angle in radians.",[927,2162,2163],{},[590,2164,1911],{},[909,2166,2167,2172,2175],{},[927,2168,2169],{},[590,2170,2171],{},"maxPitch",[927,2173,2174],{},"Maximum pitch angle in radians.",[927,2176,2177],{},[590,2178,1911],{},[909,2180,2181,2186,2189],{},[927,2182,2183],{},[590,2184,2185],{},"maxRoll",[927,2187,2188],{},"Maximum roll angle in radians.",[927,2190,2191],{},[590,2192,1911],{},[909,2194,2195,2200,2203],{},[927,2196,2197],{},[590,2198,2199],{},"yawFrequency",[927,2201,2202],{},"Frequency of yaw oscillation.",[927,2204,2205],{},[590,2206,2207],{},"0.1",[909,2209,2210,2215,2218],{},[927,2211,2212],{},[590,2213,2214],{},"pitchFrequency",[927,2216,2217],{},"Frequency of pitch oscillation.",[927,2219,2220],{},[590,2221,2207],{},[909,2223,2224,2229,2232],{},[927,2225,2226],{},[590,2227,2228],{},"rollFrequency",[927,2230,2231],{},"Frequency of roll oscillation.",[927,2233,2234],{},[590,2235,2207],{},[1303,2237,1652],{},{"title":548,"searchDepth":549,"depth":550,"links":2239},[2240,2241],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},"Apply smooth camera shake to the active camera.",{},{"title":45,"description":2242},"tbo--_1LLyK1wDUHqKdzu8KZiLMIGya4l_8miKZTrMc",{"id":2247,"title":49,"body":2248,"description":2553,"extension":563,"links":564,"meta":2554,"navigation":566,"path":50,"seo":2555,"stem":51,"__hash__":2556},"docs/2.api/1.abstractions/edges.md",{"type":473,"value":2249,"toc":2549},[2250,2255,2272,2274,2465,2467,2484,2547],[580,2251,2252],{},[2253,2254],"abstractions-edges",{},[586,2256,2257,2258,2261,2262,2267,2268,2271],{},"The ",[590,2259,2260],{},"cientos"," package provides an abstraction of ",[1116,2263,2266],{"href":2264,"rel":2265},"https://threejs.org/docs/#api/en/geometries/EdgesGeometry",[1120],"EdgesGeometry"," from Three.js, ",[590,2269,2270],{},"\u003CEdges>"," is specifically designed for rendering visible edges of objects in a scene graph. This enhances the visual quality by highlighting contours and providing a stylized appearance which contributes to the artistic aspect of 3D visualizations.",[476,2273,15],{"id":596},[598,2275,2278],{"className":600,"code":2276,"highlights":2277,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Box, Edges, OrbitControls } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 2, 5]\" />\n    \u003COrbitControls />\n    \u003CBox>\n      \u003CTresMeshBasicMaterial />\n      \u003CEdges />\n    \u003C/Box>\n  \u003C/TresCanvas>\n\u003C/template>\n",[680,803],[590,2279,2280,2300,2318,2346,2354,2358,2366,2374,2407,2415,2423,2432,2441,2449,2457],{"__ignoreMap":548},[609,2281,2282,2284,2286,2288,2290,2292,2294,2296,2298],{"class":611,"line":549},[609,2283,615],{"class":614},[609,2285,619],{"class":618},[609,2287,623],{"class":622},[609,2289,626],{"class":622},[609,2291,629],{"class":614},[609,2293,632],{"class":614},[609,2295,636],{"class":635},[609,2297,632],{"class":614},[609,2299,641],{"class":614},[609,2301,2302,2304,2306,2308,2310,2312,2314,2316],{"class":611,"line":550},[609,2303,649],{"class":648},[609,2305,652],{"class":614},[609,2307,687],{"class":655},[609,2309,665],{"class":614},[609,2311,668],{"class":648},[609,2313,671],{"class":614},[609,2315,696],{"class":635},[609,2317,677],{"class":614},[609,2319,2321,2323,2325,2327,2329,2332,2334,2336,2338,2340,2342,2344],{"class":2320,"line":680},[611,645],[609,2322,649],{"class":648},[609,2324,652],{"class":614},[609,2326,1373],{"class":655},[609,2328,659],{"class":614},[609,2330,2331],{"class":655}," Edges",[609,2333,659],{"class":614},[609,2335,662],{"class":655},[609,2337,665],{"class":614},[609,2339,668],{"class":648},[609,2341,671],{"class":614},[609,2343,674],{"class":635},[609,2345,677],{"class":614},[609,2347,2348,2350,2352],{"class":611,"line":701},[609,2349,704],{"class":614},[609,2351,619],{"class":618},[609,2353,641],{"class":614},[609,2355,2356],{"class":611,"line":711},[609,2357,714],{"emptyLinePlaceholder":566},[609,2359,2360,2362,2364],{"class":611,"line":717},[609,2361,615],{"class":614},[609,2363,722],{"class":618},[609,2365,641],{"class":614},[609,2367,2368,2370,2372],{"class":611,"line":727},[609,2369,730],{"class":614},[609,2371,733],{"class":618},[609,2373,641],{"class":614},[609,2375,2376,2378,2380,2382,2384,2386,2388,2390,2392,2394,2396,2398,2401,2403,2405],{"class":611,"line":750},[609,2377,753],{"class":614},[609,2379,756],{"class":618},[609,2381,785],{"class":614},[609,2383,1463],{"class":622},[609,2385,629],{"class":614},[609,2387,632],{"class":614},[609,2389,1470],{"class":614},[609,2391,941],{"class":795},[609,2393,1475],{"class":614},[609,2395,796],{"class":795},[609,2397,1475],{"class":614},[609,2399,2400],{"class":795},"5",[609,2402,1485],{"class":614},[609,2404,632],{"class":614},[609,2406,759],{"class":614},[609,2408,2409,2411,2413],{"class":611,"line":762},[609,2410,753],{"class":614},[609,2412,767],{"class":618},[609,2414,759],{"class":614},[609,2416,2417,2419,2421],{"class":611,"line":772},[609,2418,753],{"class":614},[609,2420,197],{"class":618},[609,2422,641],{"class":614},[609,2424,2425,2427,2430],{"class":611,"line":777},[609,2426,829],{"class":614},[609,2428,2429],{"class":618},"TresMeshBasicMaterial",[609,2431,759],{"class":614},[609,2433,2435,2437,2439],{"class":2434,"line":803},[611,645],[609,2436,829],{"class":614},[609,2438,49],{"class":618},[609,2440,759],{"class":614},[609,2442,2443,2445,2447],{"class":611,"line":603},[609,2444,871],{"class":614},[609,2446,197],{"class":618},[609,2448,641],{"class":614},[609,2450,2451,2453,2455],{"class":611,"line":826},[609,2452,881],{"class":614},[609,2454,733],{"class":618},[609,2456,641],{"class":614},[609,2458,2459,2461,2463],{"class":611,"line":837},[609,2460,704],{"class":614},[609,2462,722],{"class":618},[609,2464,641],{"class":614},[476,2466,898],{"id":897},[586,2468,2469,2471,2472,2477,2478,2483],{},[590,2470,2270],{}," is based on ",[1116,2473,2476],{"href":2474,"rel":2475},"https://threejs.org/docs/#api/en/objects/LineSegments",[1120],"LineSegments"," & ",[1116,2479,2482],{"href":2480,"rel":2481},"https://threejs.org/docs/#api/en/objects/Line",[1120],"Line"," and supports all of its props.",[903,2485,2486,2496],{},[906,2487,2488],{},[909,2489,2490,2492,2494],{},[912,2491,914],{"align":973},[912,2493,917],{"align":973},[912,2495,920],{},[922,2497,2498,2530],{},[909,2499,2500,2505,2525],{},[927,2501,2502],{"align":973},[1677,2503,2504],{},"color",[927,2506,2507,2510,2511,2514,2515,2520,2521],{"align":973},[590,2508,2509],{},"THREE.Color"," — Color of the edges. ",[2512,2513],"br",{}," More informations : ",[1116,2516,2519],{"href":2517,"rel":2518},"https://docs.tresjs.org/api/instances-arguments-and-props.html#colors",[1120],"TresColor"," — ",[1116,2522,2509],{"href":2523,"rel":2524},"https://threejs.org/docs/#api/en/math/Color",[1120],[927,2526,2527],{},[590,2528,2529],{},"#ff0000",[909,2531,2532,2537,2543],{},[927,2533,2534],{"align":973},[1677,2535,2536],{},"threshold",[927,2538,2539,2542],{"align":973},[590,2540,2541],{},"number"," — An edge is only rendered if the angle (in degrees) between the face normals of the adjoining faces exceeds this value",[927,2544,2545],{},[590,2546,1897],{},[1303,2548,1652],{},{"title":548,"searchDepth":549,"depth":550,"links":2550},[2551,2552],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},"Render visible edges of objects with enhanced visual quality.",{},{"title":49,"description":2553},"vRk1JMb5etr7hxo-Xvqb4plDDBOVqDhpMNgSnbTVmEE",{"id":2558,"title":53,"body":2559,"description":3255,"extension":563,"links":564,"meta":3256,"navigation":566,"path":54,"seo":3257,"stem":55,"__hash__":3258},"docs/2.api/1.abstractions/fit.md",{"type":473,"value":2560,"toc":3251},[2561,2567,2573,2583,2589,2591,3112,3114,3248],[2562,2563,2564],"scene-wrapper",{},[2565,2566],"abstractions-fit",{},[586,2568,2569,2572],{},[590,2570,2571],{},"\u003CFit />"," uniformly scales and positions its children as a group. By default, it fits its children into a 1 × 1 × 1 box at the world origin.",[586,2574,2575,2576,2579,2580,1122],{},"Alternatively, the children can be fit into a ",[590,2577,2578],{},"Box3"," or an ",[590,2581,2582],{},"Object3D",[586,2584,2585,2586,2588],{},"Or the children can simply be resized. With ",[590,2587,2571],{}," the children are scaled relative to the center of their calculated bounding box.",[476,2590,15],{"id":596},[598,2592,2596],{"className":600,"code":2593,"highlights":2594,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { Fit, OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport { BoxGeometry, MeshNormalMaterial } from 'three'\n\nconst positions: number[][] = []\nfor (let y = 100; y \u003C= 120; y += 10) {\n  for (let x = 100; x \u003C= 120; x += 10) {\n    positions.push([x, y, 9999])\n  }\n}\nconst geom = new BoxGeometry()\nconst mat = new MeshNormalMaterial()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#4F4F4F\">\n    \u003CTresPerspectiveCamera :position=\"[1, 1, 1]\" />\n    \u003COrbitControls />\n    \u003CFit>\n      \u003CTresMesh\n        v-for=\"(pos, index) in positions\"\n        :key=\"index\"\n        :position=\"pos\"\n        :args=\"[geom, mat]\"\n      />\n    \u003C/Fit>\n    \u003CTresGridHelper :args=\"[1, 1]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n\n",[550,888,2595],27,[590,2597,2598,2618,2642,2660,2685,2689,2710,2756,2795,2825,2830,2834,2851,2866,2874,2878,2886,2905,2937,2945,2954,2962,2992,3009,3024,3049,3055,3064,3094,3103],{"__ignoreMap":548},[609,2599,2600,2602,2604,2606,2608,2610,2612,2614,2616],{"class":611,"line":549},[609,2601,615],{"class":614},[609,2603,619],{"class":618},[609,2605,623],{"class":622},[609,2607,626],{"class":622},[609,2609,629],{"class":614},[609,2611,632],{"class":614},[609,2613,636],{"class":635},[609,2615,632],{"class":614},[609,2617,641],{"class":614},[609,2619,2621,2623,2625,2628,2630,2632,2634,2636,2638,2640],{"class":2620,"line":550},[611,645],[609,2622,649],{"class":648},[609,2624,652],{"class":614},[609,2626,2627],{"class":655}," Fit",[609,2629,659],{"class":614},[609,2631,662],{"class":655},[609,2633,665],{"class":614},[609,2635,668],{"class":648},[609,2637,671],{"class":614},[609,2639,674],{"class":635},[609,2641,677],{"class":614},[609,2643,2644,2646,2648,2650,2652,2654,2656,2658],{"class":611,"line":680},[609,2645,649],{"class":648},[609,2647,652],{"class":614},[609,2649,687],{"class":655},[609,2651,665],{"class":614},[609,2653,668],{"class":648},[609,2655,671],{"class":614},[609,2657,696],{"class":635},[609,2659,677],{"class":614},[609,2661,2662,2664,2666,2669,2671,2674,2676,2678,2680,2683],{"class":611,"line":701},[609,2663,649],{"class":648},[609,2665,652],{"class":614},[609,2667,2668],{"class":655}," BoxGeometry",[609,2670,659],{"class":614},[609,2672,2673],{"class":655}," MeshNormalMaterial",[609,2675,665],{"class":614},[609,2677,668],{"class":648},[609,2679,671],{"class":614},[609,2681,2682],{"class":635},"three",[609,2684,677],{"class":614},[609,2686,2687],{"class":611,"line":711},[609,2688,714],{"emptyLinePlaceholder":566},[609,2690,2691,2694,2697,2699,2702,2705,2707],{"class":611,"line":717},[609,2692,2693],{"class":622},"const",[609,2695,2696],{"class":655}," positions",[609,2698,1194],{"class":614},[609,2700,2701],{"class":1176}," number",[609,2703,2704],{"class":655},"[][] ",[609,2706,629],{"class":614},[609,2708,2709],{"class":655}," []\n",[609,2711,2712,2715,2718,2721,2724,2726,2729,2732,2734,2737,2740,2742,2744,2747,2750,2753],{"class":611,"line":727},[609,2713,2714],{"class":648},"for",[609,2716,2717],{"class":655}," (",[609,2719,2720],{"class":622},"let",[609,2722,2723],{"class":655}," y ",[609,2725,629],{"class":614},[609,2727,2728],{"class":795}," 100",[609,2730,2731],{"class":614},";",[609,2733,2723],{"class":655},[609,2735,2736],{"class":614},"\u003C=",[609,2738,2739],{"class":795}," 120",[609,2741,2731],{"class":614},[609,2743,2723],{"class":655},[609,2745,2746],{"class":614},"+=",[609,2748,2749],{"class":795}," 10",[609,2751,2752],{"class":655},") ",[609,2754,2755],{"class":614},"{\n",[609,2757,2758,2761,2763,2765,2768,2771,2773,2775,2777,2780,2782,2784,2786,2789,2791,2793],{"class":611,"line":750},[609,2759,2760],{"class":648},"  for",[609,2762,2717],{"class":618},[609,2764,2720],{"class":622},[609,2766,2767],{"class":655}," x",[609,2769,2770],{"class":614}," =",[609,2772,2728],{"class":795},[609,2774,2731],{"class":614},[609,2776,2767],{"class":655},[609,2778,2779],{"class":614}," \u003C=",[609,2781,2739],{"class":795},[609,2783,2731],{"class":614},[609,2785,2767],{"class":655},[609,2787,2788],{"class":614}," +=",[609,2790,2749],{"class":795},[609,2792,2752],{"class":618},[609,2794,2755],{"class":614},[609,2796,2797,2800,2802,2806,2809,2812,2814,2817,2819,2822],{"class":611,"line":762},[609,2798,2799],{"class":655},"    positions",[609,2801,1122],{"class":614},[609,2803,2805],{"class":2804},"s2Zo4","push",[609,2807,2808],{"class":618},"([",[609,2810,2811],{"class":655},"x",[609,2813,659],{"class":614},[609,2815,2816],{"class":655}," y",[609,2818,659],{"class":614},[609,2820,2821],{"class":795}," 9999",[609,2823,2824],{"class":618},"])\n",[609,2826,2827],{"class":611,"line":772},[609,2828,2829],{"class":614},"  }\n",[609,2831,2832],{"class":611,"line":777},[609,2833,1301],{"class":614},[609,2835,2836,2838,2841,2843,2846,2848],{"class":611,"line":803},[609,2837,2693],{"class":622},[609,2839,2840],{"class":655}," geom ",[609,2842,629],{"class":614},[609,2844,2845],{"class":614}," new",[609,2847,2668],{"class":2804},[609,2849,2850],{"class":655},"()\n",[609,2852,2853,2855,2858,2860,2862,2864],{"class":611,"line":603},[609,2854,2693],{"class":622},[609,2856,2857],{"class":655}," mat ",[609,2859,629],{"class":614},[609,2861,2845],{"class":614},[609,2863,2673],{"class":2804},[609,2865,2850],{"class":655},[609,2867,2868,2870,2872],{"class":611,"line":826},[609,2869,704],{"class":614},[609,2871,619],{"class":618},[609,2873,641],{"class":614},[609,2875,2876],{"class":611,"line":837},[609,2877,714],{"emptyLinePlaceholder":566},[609,2879,2880,2882,2884],{"class":611,"line":848},[609,2881,615],{"class":614},[609,2883,722],{"class":618},[609,2885,641],{"class":614},[609,2887,2888,2890,2892,2894,2896,2898,2901,2903],{"class":611,"line":858},[609,2889,730],{"class":614},[609,2891,733],{"class":618},[609,2893,736],{"class":622},[609,2895,629],{"class":614},[609,2897,632],{"class":614},[609,2899,2900],{"class":635},"#4F4F4F",[609,2902,632],{"class":614},[609,2904,641],{"class":614},[609,2906,2907,2909,2911,2913,2915,2917,2919,2921,2923,2925,2927,2929,2931,2933,2935],{"class":611,"line":604},[609,2908,753],{"class":614},[609,2910,756],{"class":618},[609,2912,785],{"class":614},[609,2914,1463],{"class":622},[609,2916,629],{"class":614},[609,2918,632],{"class":614},[609,2920,1470],{"class":614},[609,2922,1897],{"class":795},[609,2924,1475],{"class":614},[609,2926,1897],{"class":795},[609,2928,1475],{"class":614},[609,2930,1897],{"class":795},[609,2932,1485],{"class":614},[609,2934,632],{"class":614},[609,2936,759],{"class":614},[609,2938,2939,2941,2943],{"class":611,"line":878},[609,2940,753],{"class":614},[609,2942,767],{"class":618},[609,2944,759],{"class":614},[609,2946,2948,2950,2952],{"class":2947,"line":888},[611,645],[609,2949,753],{"class":614},[609,2951,53],{"class":618},[609,2953,641],{"class":614},[609,2955,2957,2959],{"class":611,"line":2956},21,[609,2958,829],{"class":614},[609,2960,2961],{"class":618},"TresMesh\n",[609,2963,2965,2968,2970,2972,2975,2978,2980,2983,2986,2989],{"class":611,"line":2964},22,[609,2966,2967],{"class":648},"        v-for",[609,2969,629],{"class":614},[609,2971,632],{"class":614},[609,2973,2974],{"class":614},"(",[609,2976,2977],{"class":655},"pos",[609,2979,1475],{"class":614},[609,2981,2982],{"class":655},"index",[609,2984,2985],{"class":614},") in ",[609,2987,2988],{"class":655},"positions",[609,2990,2991],{"class":614},"\"\n",[609,2993,2995,2998,3001,3003,3005,3007],{"class":611,"line":2994},23,[609,2996,2997],{"class":614},"        :",[609,2999,3000],{"class":622},"key",[609,3002,629],{"class":614},[609,3004,632],{"class":614},[609,3006,2982],{"class":655},[609,3008,2991],{"class":614},[609,3010,3012,3014,3016,3018,3020,3022],{"class":611,"line":3011},24,[609,3013,2997],{"class":614},[609,3015,1463],{"class":622},[609,3017,629],{"class":614},[609,3019,632],{"class":614},[609,3021,2977],{"class":655},[609,3023,2991],{"class":614},[609,3025,3027,3029,3031,3033,3035,3037,3040,3042,3045,3047],{"class":611,"line":3026},25,[609,3028,2997],{"class":614},[609,3030,1993],{"class":622},[609,3032,629],{"class":614},[609,3034,632],{"class":614},[609,3036,1470],{"class":614},[609,3038,3039],{"class":655},"geom",[609,3041,1475],{"class":614},[609,3043,3044],{"class":655},"mat",[609,3046,1485],{"class":614},[609,3048,2991],{"class":614},[609,3050,3052],{"class":611,"line":3051},26,[609,3053,3054],{"class":614},"      />\n",[609,3056,3058,3060,3062],{"class":3057,"line":2595},[611,645],[609,3059,871],{"class":614},[609,3061,53],{"class":618},[609,3063,641],{"class":614},[609,3065,3067,3069,3072,3074,3076,3078,3080,3082,3084,3086,3088,3090,3092],{"class":611,"line":3066},28,[609,3068,753],{"class":614},[609,3070,3071],{"class":618},"TresGridHelper",[609,3073,785],{"class":614},[609,3075,1993],{"class":622},[609,3077,629],{"class":614},[609,3079,632],{"class":614},[609,3081,1470],{"class":614},[609,3083,1897],{"class":795},[609,3085,1475],{"class":614},[609,3087,1897],{"class":795},[609,3089,1485],{"class":614},[609,3091,632],{"class":614},[609,3093,759],{"class":614},[609,3095,3097,3099,3101],{"class":611,"line":3096},29,[609,3098,881],{"class":614},[609,3100,733],{"class":618},[609,3102,641],{"class":614},[609,3104,3106,3108,3110],{"class":611,"line":3105},30,[609,3107,704],{"class":614},[609,3109,722],{"class":618},[609,3111,641],{"class":614},[476,3113,898],{"id":897},[903,3115,3116,3125],{},[906,3117,3118],{},[909,3119,3120,3123],{},[912,3121,3122],{"align":973},"Name",[912,3124,917],{"align":973},[922,3126,3127,3224],{},[909,3128,3129,3134],{},[927,3130,3131],{"align":973},[1677,3132,3133],{},"into",[927,3135,934,3136,3138,3139,3216,3218,3219,3221],{"align":973},[590,3137,3133],{}," is:",[3140,3141,3142,3152,3161,3169,3177,3188,3195],"ul",{},[3143,3144,3145,3146,3148,3149,3151],"li",{},"omitted or explicitly ",[590,3147,1155],{},": position/scale children to fit into a 1 × 1 × 1 ",[590,3150,2578],{}," at world origin.",[3143,3153,3154,3157,3158,3160],{},[590,3155,3156],{},"null",": turn off ",[590,3159,2571],{},"; reset scale/position of children.",[3143,3162,3163,3165,3166,1122],{},[590,3164,2541],{},": convert argument to ",[590,3167,3168],{},"Vector3(number, number, number)",[3143,3170,3171,3165,3174,1122],{},[590,3172,3173],{},"[number, number, number]",[590,3175,3176],{},"Vector3",[3143,3178,3179,3181,3182,3184,3185,3187],{},[590,3180,3176],{},": position/scale children to fit inside a ",[590,3183,2578],{}," of size ",[590,3186,3176],{}," at target objects' cumulative center.",[3143,3189,3190,3192,3193,1122],{},[590,3191,2578],{},": position/scale children to fit inside ",[590,3194,2578],{},[3143,3196,3197,3199,3200,3202,3203,3202,3210,3212,3213,3215],{},[590,3198,2582],{},": position/scale children to fit inside calculated ",[590,3201,2578],{},". ",[1116,3204,1114,3207],{"href":3205,"rel":3206},"https://threejs.org/docs/#api/en/math/Box3.setFromObject",[1120],[590,3208,3209],{},"THREE.Box3.setFromObject",[590,3211,2571],{}," must not contain the ",[590,3214,2582],{}," and vice-versa.",[2512,3217],{},"default:",[2512,3220],{},[590,3222,3223],{},"new Box3(new Vector3(-0.5, -0.5, -0.5), new Vector3(0.5, 0.5, 0.5))",[909,3225,3226,3230],{},[927,3227,3228],{"align":973},[1677,3229,1111],{},[927,3231,3232,3240,3242,3218,3244,3246],{"align":973},[1116,3233,1114,3235,3237,3238],{"href":1118,"rel":3234},[1120],[590,3236,1111],{}," argument in ",[590,3239,3209],{},[2512,3241],{},[2512,3243],{},[2512,3245],{},[590,3247,947],{},[1303,3249,3250],{},"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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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":548,"searchDepth":549,"depth":550,"links":3252},[3253,3254],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},"Uniformly scale and position children to fit into a defined space.",{},{"title":53,"description":3255},"tH6jw7YAXoAU7p9igc7yqRqMHzbHPTChNczZPQOqacI",{"id":3260,"title":57,"body":3261,"description":3709,"extension":563,"links":564,"meta":3710,"navigation":566,"path":58,"seo":3711,"stem":59,"__hash__":3712},"docs/2.api/1.abstractions/levioso.md",{"type":473,"value":3262,"toc":3705},[3263,3268,3275,3284,3286,3631,3633,3703],[580,3264,3265],{},[3266,3267],"abstractions-levioso",{},[586,3269,3270],{},[3271,3272],"img",{"alt":3273,"src":3274},"Leviosa","https://media.giphy.com/media/HaCFT5ghY6L1m/giphy.gif",[586,3276,2257,3277,3279,3280,3283],{},[590,3278,2260],{}," package provides a ",[590,3281,3282],{},"\u003CLevioso />"," wrapper that makes its content … float, just like Magic 🪄✨",[476,3285,15],{"id":596},[598,3287,3290],{"className":600,"code":3288,"highlights":3289,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from \"@tresjs/core\";\nimport { Levioso, OrbitControls, Box } from \"@tresjs/cientos\";\n\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas :clear-color=\"0x82dbc5\">\n    \u003CTresPerspectiveCamera :position=\"[0, 0, 5]\" :look-at=\"[0, 0, 0]\" />\n    \u003COrbitControls />\n    \u003CLevioso :speed=\"4\">\n      \u003CBox />\n    \u003C/Levioso>\n    \u003CTresAmbientLight :intensity=\"1\" />\n    \u003CTresDirectionalLight :intensity=\"1\" :position=\"[2, 2, 2]\" />\n    \u003CTresGridHelper :position=\"[0, -1, 0]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n\n",[680,777,603],[590,3291,3292,3312,3334,3364,3368,3376,3380,3388,3410,3467,3475,3499,3507,3516,3537,3582,3615,3623],{"__ignoreMap":548},[609,3293,3294,3296,3298,3300,3302,3304,3306,3308,3310],{"class":611,"line":549},[609,3295,615],{"class":614},[609,3297,619],{"class":618},[609,3299,623],{"class":622},[609,3301,626],{"class":622},[609,3303,629],{"class":614},[609,3305,632],{"class":614},[609,3307,636],{"class":635},[609,3309,632],{"class":614},[609,3311,641],{"class":614},[609,3313,3314,3316,3318,3320,3322,3324,3327,3329,3331],{"class":611,"line":550},[609,3315,649],{"class":648},[609,3317,652],{"class":614},[609,3319,687],{"class":655},[609,3321,665],{"class":614},[609,3323,668],{"class":648},[609,3325,3326],{"class":614}," \"",[609,3328,696],{"class":635},[609,3330,632],{"class":614},[609,3332,3333],{"class":614},";\n",[609,3335,3337,3339,3341,3344,3346,3348,3350,3352,3354,3356,3358,3360,3362],{"class":3336,"line":680},[611,645],[609,3338,649],{"class":648},[609,3340,652],{"class":614},[609,3342,3343],{"class":655}," Levioso",[609,3345,659],{"class":614},[609,3347,662],{"class":655},[609,3349,659],{"class":614},[609,3351,1373],{"class":655},[609,3353,665],{"class":614},[609,3355,668],{"class":648},[609,3357,3326],{"class":614},[609,3359,674],{"class":635},[609,3361,632],{"class":614},[609,3363,3333],{"class":614},[609,3365,3366],{"class":611,"line":701},[609,3367,714],{"emptyLinePlaceholder":566},[609,3369,3370,3372,3374],{"class":611,"line":711},[609,3371,704],{"class":614},[609,3373,619],{"class":618},[609,3375,641],{"class":614},[609,3377,3378],{"class":611,"line":717},[609,3379,714],{"emptyLinePlaceholder":566},[609,3381,3382,3384,3386],{"class":611,"line":727},[609,3383,615],{"class":614},[609,3385,722],{"class":618},[609,3387,641],{"class":614},[609,3389,3390,3392,3394,3396,3399,3401,3403,3406,3408],{"class":611,"line":750},[609,3391,730],{"class":614},[609,3393,733],{"class":618},[609,3395,785],{"class":614},[609,3397,3398],{"class":622},"clear-color",[609,3400,629],{"class":614},[609,3402,632],{"class":614},[609,3404,3405],{"class":795},"0x82dbc5",[609,3407,632],{"class":614},[609,3409,641],{"class":614},[609,3411,3412,3414,3416,3418,3420,3422,3424,3426,3428,3430,3432,3434,3436,3438,3440,3442,3445,3447,3449,3451,3453,3455,3457,3459,3461,3463,3465],{"class":611,"line":762},[609,3413,753],{"class":614},[609,3415,756],{"class":618},[609,3417,785],{"class":614},[609,3419,1463],{"class":622},[609,3421,629],{"class":614},[609,3423,632],{"class":614},[609,3425,1470],{"class":614},[609,3427,941],{"class":795},[609,3429,1475],{"class":614},[609,3431,941],{"class":795},[609,3433,1475],{"class":614},[609,3435,2400],{"class":795},[609,3437,1485],{"class":614},[609,3439,632],{"class":614},[609,3441,785],{"class":614},[609,3443,3444],{"class":622},"look-at",[609,3446,629],{"class":614},[609,3448,632],{"class":614},[609,3450,1470],{"class":614},[609,3452,941],{"class":795},[609,3454,1475],{"class":614},[609,3456,941],{"class":795},[609,3458,1475],{"class":614},[609,3460,941],{"class":795},[609,3462,1485],{"class":614},[609,3464,632],{"class":614},[609,3466,759],{"class":614},[609,3468,3469,3471,3473],{"class":611,"line":772},[609,3470,753],{"class":614},[609,3472,767],{"class":618},[609,3474,759],{"class":614},[609,3476,3478,3480,3483,3485,3488,3490,3492,3495,3497],{"class":3477,"line":777},[611,645],[609,3479,753],{"class":614},[609,3481,3482],{"class":618},"Levioso",[609,3484,785],{"class":614},[609,3486,3487],{"class":622},"speed",[609,3489,629],{"class":614},[609,3491,632],{"class":614},[609,3493,3494],{"class":795},"4",[609,3496,632],{"class":614},[609,3498,641],{"class":614},[609,3500,3501,3503,3505],{"class":611,"line":803},[609,3502,829],{"class":614},[609,3504,197],{"class":618},[609,3506,759],{"class":614},[609,3508,3510,3512,3514],{"class":3509,"line":603},[611,645],[609,3511,871],{"class":614},[609,3513,3482],{"class":618},[609,3515,641],{"class":614},[609,3517,3518,3520,3523,3525,3527,3529,3531,3533,3535],{"class":611,"line":826},[609,3519,753],{"class":614},[609,3521,3522],{"class":618},"TresAmbientLight",[609,3524,785],{"class":614},[609,3526,1890],{"class":622},[609,3528,629],{"class":614},[609,3530,632],{"class":614},[609,3532,1897],{"class":795},[609,3534,632],{"class":614},[609,3536,759],{"class":614},[609,3538,3539,3541,3544,3546,3548,3550,3552,3554,3556,3558,3560,3562,3564,3566,3568,3570,3572,3574,3576,3578,3580],{"class":611,"line":837},[609,3540,753],{"class":614},[609,3542,3543],{"class":618},"TresDirectionalLight",[609,3545,785],{"class":614},[609,3547,1890],{"class":622},[609,3549,629],{"class":614},[609,3551,632],{"class":614},[609,3553,1897],{"class":795},[609,3555,632],{"class":614},[609,3557,785],{"class":614},[609,3559,1463],{"class":622},[609,3561,629],{"class":614},[609,3563,632],{"class":614},[609,3565,1470],{"class":614},[609,3567,796],{"class":795},[609,3569,1475],{"class":614},[609,3571,796],{"class":795},[609,3573,1475],{"class":614},[609,3575,796],{"class":795},[609,3577,1485],{"class":614},[609,3579,632],{"class":614},[609,3581,759],{"class":614},[609,3583,3584,3586,3588,3590,3592,3594,3596,3598,3600,3603,3605,3607,3609,3611,3613],{"class":611,"line":848},[609,3585,753],{"class":614},[609,3587,3071],{"class":618},[609,3589,785],{"class":614},[609,3591,1463],{"class":622},[609,3593,629],{"class":614},[609,3595,632],{"class":614},[609,3597,1470],{"class":614},[609,3599,941],{"class":795},[609,3601,3602],{"class":614},", -",[609,3604,1897],{"class":795},[609,3606,1475],{"class":614},[609,3608,941],{"class":795},[609,3610,1485],{"class":614},[609,3612,632],{"class":614},[609,3614,759],{"class":614},[609,3616,3617,3619,3621],{"class":611,"line":858},[609,3618,881],{"class":614},[609,3620,733],{"class":618},[609,3622,641],{"class":614},[609,3624,3625,3627,3629],{"class":611,"line":604},[609,3626,704],{"class":614},[609,3628,722],{"class":618},[609,3630,641],{"class":614},[476,3632,898],{"id":897},[903,3634,3635,3645],{},[906,3636,3637],{},[909,3638,3639,3641,3643],{},[912,3640,914],{"align":973},[912,3642,917],{"align":973},[912,3644,920],{},[922,3646,3647,3660,3674,3688],{},[909,3648,3649,3653,3656],{},[927,3650,3651],{"align":973},[590,3652,3487],{},[927,3654,3655],{"align":973},"Floating speed, higher it rocks more 🤘.",[927,3657,3658],{},[590,3659,1897],{},[909,3661,3662,3667,3670],{},[927,3663,3664],{"align":973},[590,3665,3666],{},"rotationFactor",[927,3668,3669],{"align":973},"Factor for Euler rotation.",[927,3671,3672],{},[590,3673,1897],{},[909,3675,3676,3681,3684],{},[927,3677,3678],{"align":973},[590,3679,3680],{},"floatFactor",[927,3682,3683],{"align":973},"Factor for Up/down movement.",[927,3685,3686],{},[590,3687,1897],{},[909,3689,3690,3695,3698],{},[927,3691,3692],{"align":973},[590,3693,3694],{},"range",[927,3696,3697],{"align":973},"Range of y-axis values the object will float within.",[927,3699,3700],{},[590,3701,3702],{},"[-0.1, 0.1]",[1303,3704,1652],{},{"title":548,"searchDepth":549,"depth":550,"links":3706},[3707,3708],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},"Make content float like magic with smooth animations.",{},{"title":57,"description":3709},"VAdlRyCWTgbZPtL3_7gw5lCESxOAP-g-m4p4X69NI_4",{"id":3714,"title":61,"body":3715,"description":4413,"extension":563,"links":564,"meta":4414,"navigation":566,"path":62,"seo":4415,"stem":63,"__hash__":4416},"docs/2.api/1.abstractions/mask.md",{"type":473,"value":3716,"toc":4408},[3717,3722,3728,3762,3764,4282,4284,4346,4349,4356,4361,4376,4405],[580,3718,3719],{},[3720,3721],"abstractions-mask",{},[586,3723,3724,3727],{},[590,3725,3726],{},"\u003CMask/>"," uses the stencil buffer to cut out areas of the screen.",[3729,3730,3731,3749],"prose-warning",{},[586,3732,3733,3734,3737,3738,3741,3742,3745,3746,1122],{},"To use ",[590,3735,3736],{},"\u003CMask />"," you ",[1681,3739,3740],{},"must"," add ",[590,3743,3744],{},":stencil=\"true\""," to your ",[590,3747,3748],{},"\u003CTresCanvas />",[586,3750,3751,3753,3754,3761],{},[590,3752,3736],{}," relies on the ",[1116,3755,3758],{"href":3756,"rel":3757},"https://threejs.org/docs/#api/en/renderers/WebGLRenderer",[1120],[590,3759,3760],{},"stencil buffer",". In recent versions of THREE.js, by default, the stencil buffer is not created.",[476,3763,15],{"id":596},[598,3765,3768],{"className":600,"code":3766,"highlights":3767,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { Mask, OrbitControls, useMask } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas :stencil=\"true\" clear-color=\"#4f4f4f\">\n    \u003CTresPerspectiveCamera />\n    \u003COrbitControls />\n\n    \u003CTresGroup :scale=\"2\">\n      \u003CTresMesh>\n        \u003CTresRingGeometry :args=\"[0.95, 1, 64]\" />\n        \u003CTresMeshBasicMaterial color=\"white\" />\n      \u003C/TresMesh>\n      \u003CMask :id=\"1\">\n        \u003CTresCircleGeometry />\n        \u003CTresMeshBasicMaterial color=\"#fbb03b\" />\n      \u003C/Mask>\n    \u003C/TresGroup>\n\n    \u003CTresMesh :position-z=\"-1\">\n      \u003CTresBoxGeometry />\n      \u003CTresMeshNormalMaterial v-bind=\"useMask(1)\" />\n    \u003C/TresMesh>\n\n    \u003CTresMesh :position-z=\"-3\">\n      \u003CTresBoxGeometry />\n      \u003CTresMeshNormalMaterial v-bind=\"useMask(1)\" />\n    \u003C/TresMesh>\n\n    \u003CTresMesh :position-z=\"-5\">\n      \u003CTresBoxGeometry />\n      \u003CTresMeshNormalMaterial />\n    \u003C/TresMesh>\n  \u003C/TresCanvas>\n\u003C/template>\n\n",[550,848,858,604,878],[590,3769,3770,3790,3819,3837,3845,3849,3857,3890,3898,3906,3910,3931,3939,3974,3994,4002,4024,4034,4054,4063,4071,4075,4099,4107,4134,4142,4146,4169,4177,4201,4209,4214,4237,4246,4255,4264,4273],{"__ignoreMap":548},[609,3771,3772,3774,3776,3778,3780,3782,3784,3786,3788],{"class":611,"line":549},[609,3773,615],{"class":614},[609,3775,619],{"class":618},[609,3777,623],{"class":622},[609,3779,626],{"class":622},[609,3781,629],{"class":614},[609,3783,632],{"class":614},[609,3785,636],{"class":635},[609,3787,632],{"class":614},[609,3789,641],{"class":614},[609,3791,3793,3795,3797,3800,3802,3804,3806,3809,3811,3813,3815,3817],{"class":3792,"line":550},[611,645],[609,3794,649],{"class":648},[609,3796,652],{"class":614},[609,3798,3799],{"class":655}," Mask",[609,3801,659],{"class":614},[609,3803,662],{"class":655},[609,3805,659],{"class":614},[609,3807,3808],{"class":655}," useMask",[609,3810,665],{"class":614},[609,3812,668],{"class":648},[609,3814,671],{"class":614},[609,3816,674],{"class":635},[609,3818,677],{"class":614},[609,3820,3821,3823,3825,3827,3829,3831,3833,3835],{"class":611,"line":680},[609,3822,649],{"class":648},[609,3824,652],{"class":614},[609,3826,687],{"class":655},[609,3828,665],{"class":614},[609,3830,668],{"class":648},[609,3832,671],{"class":614},[609,3834,696],{"class":635},[609,3836,677],{"class":614},[609,3838,3839,3841,3843],{"class":611,"line":701},[609,3840,704],{"class":614},[609,3842,619],{"class":618},[609,3844,641],{"class":614},[609,3846,3847],{"class":611,"line":711},[609,3848,714],{"emptyLinePlaceholder":566},[609,3850,3851,3853,3855],{"class":611,"line":717},[609,3852,615],{"class":614},[609,3854,722],{"class":618},[609,3856,641],{"class":614},[609,3858,3859,3861,3863,3865,3868,3870,3872,3875,3877,3879,3881,3883,3886,3888],{"class":611,"line":727},[609,3860,730],{"class":614},[609,3862,733],{"class":618},[609,3864,785],{"class":614},[609,3866,3867],{"class":622},"stencil",[609,3869,629],{"class":614},[609,3871,632],{"class":614},[609,3873,937],{"class":3874},"sfNiH",[609,3876,632],{"class":614},[609,3878,736],{"class":622},[609,3880,629],{"class":614},[609,3882,632],{"class":614},[609,3884,3885],{"class":635},"#4f4f4f",[609,3887,632],{"class":614},[609,3889,641],{"class":614},[609,3891,3892,3894,3896],{"class":611,"line":750},[609,3893,753],{"class":614},[609,3895,756],{"class":618},[609,3897,759],{"class":614},[609,3899,3900,3902,3904],{"class":611,"line":762},[609,3901,753],{"class":614},[609,3903,767],{"class":618},[609,3905,759],{"class":614},[609,3907,3908],{"class":611,"line":772},[609,3909,714],{"emptyLinePlaceholder":566},[609,3911,3912,3914,3917,3919,3921,3923,3925,3927,3929],{"class":611,"line":777},[609,3913,753],{"class":614},[609,3915,3916],{"class":618},"TresGroup",[609,3918,785],{"class":614},[609,3920,788],{"class":622},[609,3922,629],{"class":614},[609,3924,632],{"class":614},[609,3926,796],{"class":795},[609,3928,632],{"class":614},[609,3930,641],{"class":614},[609,3932,3933,3935,3937],{"class":611,"line":803},[609,3934,829],{"class":614},[609,3936,832],{"class":618},[609,3938,641],{"class":614},[609,3940,3941,3943,3946,3948,3950,3952,3954,3956,3959,3961,3963,3965,3968,3970,3972],{"class":611,"line":603},[609,3942,840],{"class":614},[609,3944,3945],{"class":618},"TresRingGeometry",[609,3947,785],{"class":614},[609,3949,1993],{"class":622},[609,3951,629],{"class":614},[609,3953,632],{"class":614},[609,3955,1470],{"class":614},[609,3957,3958],{"class":795},"0.95",[609,3960,1475],{"class":614},[609,3962,1897],{"class":795},[609,3964,1475],{"class":614},[609,3966,3967],{"class":795},"64",[609,3969,1485],{"class":614},[609,3971,632],{"class":614},[609,3973,759],{"class":614},[609,3975,3976,3978,3980,3983,3985,3987,3990,3992],{"class":611,"line":826},[609,3977,840],{"class":614},[609,3979,2429],{"class":618},[609,3981,3982],{"class":622}," color",[609,3984,629],{"class":614},[609,3986,632],{"class":614},[609,3988,3989],{"class":635},"white",[609,3991,632],{"class":614},[609,3993,759],{"class":614},[609,3995,3996,3998,4000],{"class":611,"line":837},[609,3997,861],{"class":614},[609,3999,832],{"class":618},[609,4001,641],{"class":614},[609,4003,4005,4007,4009,4011,4014,4016,4018,4020,4022],{"class":4004,"line":848},[611,645],[609,4006,829],{"class":614},[609,4008,61],{"class":618},[609,4010,785],{"class":614},[609,4012,4013],{"class":622},"id",[609,4015,629],{"class":614},[609,4017,632],{"class":614},[609,4019,1897],{"class":795},[609,4021,632],{"class":614},[609,4023,641],{"class":614},[609,4025,4027,4029,4032],{"class":4026,"line":858},[611,645],[609,4028,840],{"class":614},[609,4030,4031],{"class":618},"TresCircleGeometry",[609,4033,759],{"class":614},[609,4035,4037,4039,4041,4043,4045,4047,4050,4052],{"class":4036,"line":604},[611,645],[609,4038,840],{"class":614},[609,4040,2429],{"class":618},[609,4042,3982],{"class":622},[609,4044,629],{"class":614},[609,4046,632],{"class":614},[609,4048,4049],{"class":635},"#fbb03b",[609,4051,632],{"class":614},[609,4053,759],{"class":614},[609,4055,4057,4059,4061],{"class":4056,"line":878},[611,645],[609,4058,861],{"class":614},[609,4060,61],{"class":618},[609,4062,641],{"class":614},[609,4064,4065,4067,4069],{"class":611,"line":888},[609,4066,871],{"class":614},[609,4068,3916],{"class":618},[609,4070,641],{"class":614},[609,4072,4073],{"class":611,"line":2956},[609,4074,714],{"emptyLinePlaceholder":566},[609,4076,4077,4079,4081,4083,4086,4088,4090,4093,4095,4097],{"class":611,"line":2964},[609,4078,753],{"class":614},[609,4080,832],{"class":618},[609,4082,785],{"class":614},[609,4084,4085],{"class":622},"position-z",[609,4087,629],{"class":614},[609,4089,632],{"class":614},[609,4091,4092],{"class":614},"-",[609,4094,1897],{"class":795},[609,4096,632],{"class":614},[609,4098,641],{"class":614},[609,4100,4101,4103,4105],{"class":611,"line":2994},[609,4102,829],{"class":614},[609,4104,843],{"class":618},[609,4106,759],{"class":614},[609,4108,4109,4111,4113,4116,4118,4120,4123,4125,4127,4130,4132],{"class":611,"line":3011},[609,4110,829],{"class":614},[609,4112,853],{"class":618},[609,4114,4115],{"class":622}," v-bind",[609,4117,629],{"class":614},[609,4119,632],{"class":614},[609,4121,4122],{"class":2804},"useMask",[609,4124,2974],{"class":614},[609,4126,1897],{"class":795},[609,4128,4129],{"class":614},")",[609,4131,632],{"class":614},[609,4133,759],{"class":614},[609,4135,4136,4138,4140],{"class":611,"line":3026},[609,4137,871],{"class":614},[609,4139,832],{"class":618},[609,4141,641],{"class":614},[609,4143,4144],{"class":611,"line":3051},[609,4145,714],{"emptyLinePlaceholder":566},[609,4147,4148,4150,4152,4154,4156,4158,4160,4162,4165,4167],{"class":611,"line":2595},[609,4149,753],{"class":614},[609,4151,832],{"class":618},[609,4153,785],{"class":614},[609,4155,4085],{"class":622},[609,4157,629],{"class":614},[609,4159,632],{"class":614},[609,4161,4092],{"class":614},[609,4163,4164],{"class":795},"3",[609,4166,632],{"class":614},[609,4168,641],{"class":614},[609,4170,4171,4173,4175],{"class":611,"line":3066},[609,4172,829],{"class":614},[609,4174,843],{"class":618},[609,4176,759],{"class":614},[609,4178,4179,4181,4183,4185,4187,4189,4191,4193,4195,4197,4199],{"class":611,"line":3096},[609,4180,829],{"class":614},[609,4182,853],{"class":618},[609,4184,4115],{"class":622},[609,4186,629],{"class":614},[609,4188,632],{"class":614},[609,4190,4122],{"class":2804},[609,4192,2974],{"class":614},[609,4194,1897],{"class":795},[609,4196,4129],{"class":614},[609,4198,632],{"class":614},[609,4200,759],{"class":614},[609,4202,4203,4205,4207],{"class":611,"line":3105},[609,4204,871],{"class":614},[609,4206,832],{"class":618},[609,4208,641],{"class":614},[609,4210,4212],{"class":611,"line":4211},31,[609,4213,714],{"emptyLinePlaceholder":566},[609,4215,4217,4219,4221,4223,4225,4227,4229,4231,4233,4235],{"class":611,"line":4216},32,[609,4218,753],{"class":614},[609,4220,832],{"class":618},[609,4222,785],{"class":614},[609,4224,4085],{"class":622},[609,4226,629],{"class":614},[609,4228,632],{"class":614},[609,4230,4092],{"class":614},[609,4232,2400],{"class":795},[609,4234,632],{"class":614},[609,4236,641],{"class":614},[609,4238,4240,4242,4244],{"class":611,"line":4239},33,[609,4241,829],{"class":614},[609,4243,843],{"class":618},[609,4245,759],{"class":614},[609,4247,4249,4251,4253],{"class":611,"line":4248},34,[609,4250,829],{"class":614},[609,4252,853],{"class":618},[609,4254,759],{"class":614},[609,4256,4258,4260,4262],{"class":611,"line":4257},35,[609,4259,871],{"class":614},[609,4261,832],{"class":618},[609,4263,641],{"class":614},[609,4265,4267,4269,4271],{"class":611,"line":4266},36,[609,4268,881],{"class":614},[609,4270,733],{"class":618},[609,4272,641],{"class":614},[609,4274,4276,4278,4280],{"class":611,"line":4275},37,[609,4277,704],{"class":614},[609,4279,722],{"class":618},[609,4281,641],{"class":614},[476,4283,898],{"id":897},[903,4285,4286,4296],{},[906,4287,4288],{},[909,4289,4290,4292,4294],{},[912,4291,914],{"align":973},[912,4293,917],{"align":973},[912,4295,920],{},[922,4297,4298,4314,4330],{},[909,4299,4300,4306,4312],{},[927,4301,4302],{"align":973},[1677,4303,4304],{},[590,4305,4013],{},[927,4307,4308,4309,4311],{"align":973},"Id of the stencil buffer to use. Each mask must have a ",[590,4310,2541],{}," id. Multiple masks can refer to the same id.",[927,4313],{},[909,4315,4316,4323,4326],{},[927,4317,4318],{"align":973},[1677,4319,4320],{},[590,4321,4322],{},"colorWrite",[927,4324,4325],{"align":973},"Whether the colors of the mask's own material will leak through.",[927,4327,4328],{},[590,4329,947],{},[909,4331,4332,4339,4342],{},[927,4333,4334],{"align":973},[1677,4335,4336],{},[590,4337,4338],{},"depthWrite",[927,4340,4341],{"align":973},"Whether the depth of the mask's own material will leak through.",[927,4343,4344],{},[590,4345,947],{},[476,4347,4122],{"id":4348},"usemask",[586,4350,4351,4352,4355],{},"Composable that returns the stencil configuration to apply a mask to a material. Use it with ",[590,4353,4354],{},"v-bind"," on materials that should be affected by the mask.",[586,4357,4358],{},[1677,4359,4360],{},"Parameters:",[3140,4362,4363,4368],{},[3143,4364,4365,4367],{},[590,4366,4013],{}," - The mask id to use (number or Ref)",[3143,4369,4370,4373,4374],{},[590,4371,4372],{},"inverse"," - Whether to invert the mask (boolean or Ref), defaults to ",[590,4375,947],{},[598,4377,4379],{"className":600,"code":4378,"language":605,"meta":548,"style":548},"\u003CTresMeshNormalMaterial v-bind=\"useMask(1)\" />\n",[590,4380,4381],{"__ignoreMap":548},[609,4382,4383,4385,4387,4389,4391,4393,4395,4397,4399,4401,4403],{"class":611,"line":549},[609,4384,615],{"class":614},[609,4386,853],{"class":618},[609,4388,4115],{"class":622},[609,4390,629],{"class":614},[609,4392,632],{"class":614},[609,4394,4122],{"class":2804},[609,4396,2974],{"class":655},[609,4398,1897],{"class":795},[609,4400,4129],{"class":655},[609,4402,632],{"class":614},[609,4404,759],{"class":614},[1303,4406,4407],{},"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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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":548,"searchDepth":549,"depth":550,"links":4409},[4410,4411,4412],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},{"id":4348,"depth":550,"text":4122},"Cut out areas of the screen using the stencil buffer.",{},{"title":61,"description":4413},"G7X7KSfvm9ZBJpENVvMjF0UaBORYjhBMGhf9hH7E7tw",{"id":4418,"title":65,"body":4419,"description":4924,"extension":563,"links":564,"meta":4925,"navigation":566,"path":66,"seo":4926,"stem":67,"__hash__":4927},"docs/2.api/1.abstractions/outline.md",{"type":473,"value":4420,"toc":4920},[4421,4426,4439,4441,4821,4823,4918],[580,4422,4423],{},[4424,4425],"abstractions-outline",{},[586,4427,4428,4431,4432,4435,4436,1122],{},[590,4429,4430],{},"\u003COutline />"," creates an inverted-hull outline using its parent's geometry. Supported parents are ",[590,4433,4434],{},"\u003CTresMesh>"," and ",[590,4437,4438],{},"\u003CTresSkinnedMesh>",[476,4440,15],{"id":596},[598,4442,4445],{"className":600,"code":4443,"highlights":4444,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { OrbitControls, Outline } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#4f4f4f\">\n    \u003CTresPerspectiveCamera />\n    \u003COrbitControls />\n    \u003CTresAmbientLight :intensity=\"3.14\" />\n    \u003CTresPointLight :intensity=\"50\" :position=\"[2, 2, 0]\" />\n    \u003CTresMesh :position-x=\"-0.75\">\n      \u003CTresBoxGeometry />\n      \u003CTresMeshPhongMaterial />\n      \u003COutline :thickness=\"7.5\" color=\"#82dbc5\" />\n    \u003C/TresMesh>\n    \u003CTresMesh :position-x=\"0.75\">\n      \u003CTresSphereGeometry :args=\"[0.5]\" />\n      \u003CTresMeshPhongMaterial />\n      \u003COutline :thickness=\"7.5\" color=\"#fbb03b\" />\n    \u003C/TresMesh>\n  \u003C/TresCanvas>\n\u003C/template>\n\n",[680,837,888],[590,4446,4447,4467,4485,4509,4517,4521,4529,4547,4555,4563,4584,4630,4654,4662,4671,4705,4713,4733,4758,4766,4797,4805,4813],{"__ignoreMap":548},[609,4448,4449,4451,4453,4455,4457,4459,4461,4463,4465],{"class":611,"line":549},[609,4450,615],{"class":614},[609,4452,619],{"class":618},[609,4454,623],{"class":622},[609,4456,626],{"class":622},[609,4458,629],{"class":614},[609,4460,632],{"class":614},[609,4462,636],{"class":635},[609,4464,632],{"class":614},[609,4466,641],{"class":614},[609,4468,4469,4471,4473,4475,4477,4479,4481,4483],{"class":611,"line":550},[609,4470,649],{"class":648},[609,4472,652],{"class":614},[609,4474,687],{"class":655},[609,4476,665],{"class":614},[609,4478,668],{"class":648},[609,4480,671],{"class":614},[609,4482,696],{"class":635},[609,4484,677],{"class":614},[609,4486,4488,4490,4492,4494,4496,4499,4501,4503,4505,4507],{"class":4487,"line":680},[611,645],[609,4489,649],{"class":648},[609,4491,652],{"class":614},[609,4493,662],{"class":655},[609,4495,659],{"class":614},[609,4497,4498],{"class":655}," Outline",[609,4500,665],{"class":614},[609,4502,668],{"class":648},[609,4504,671],{"class":614},[609,4506,674],{"class":635},[609,4508,677],{"class":614},[609,4510,4511,4513,4515],{"class":611,"line":701},[609,4512,704],{"class":614},[609,4514,619],{"class":618},[609,4516,641],{"class":614},[609,4518,4519],{"class":611,"line":711},[609,4520,714],{"emptyLinePlaceholder":566},[609,4522,4523,4525,4527],{"class":611,"line":717},[609,4524,615],{"class":614},[609,4526,722],{"class":618},[609,4528,641],{"class":614},[609,4530,4531,4533,4535,4537,4539,4541,4543,4545],{"class":611,"line":727},[609,4532,730],{"class":614},[609,4534,733],{"class":618},[609,4536,736],{"class":622},[609,4538,629],{"class":614},[609,4540,632],{"class":614},[609,4542,3885],{"class":635},[609,4544,632],{"class":614},[609,4546,641],{"class":614},[609,4548,4549,4551,4553],{"class":611,"line":750},[609,4550,753],{"class":614},[609,4552,756],{"class":618},[609,4554,759],{"class":614},[609,4556,4557,4559,4561],{"class":611,"line":762},[609,4558,753],{"class":614},[609,4560,767],{"class":618},[609,4562,759],{"class":614},[609,4564,4565,4567,4569,4571,4573,4575,4577,4580,4582],{"class":611,"line":772},[609,4566,753],{"class":614},[609,4568,3522],{"class":618},[609,4570,785],{"class":614},[609,4572,1890],{"class":622},[609,4574,629],{"class":614},[609,4576,632],{"class":614},[609,4578,4579],{"class":795},"3.14",[609,4581,632],{"class":614},[609,4583,759],{"class":614},[609,4585,4586,4588,4591,4593,4595,4597,4599,4602,4604,4606,4608,4610,4612,4614,4616,4618,4620,4622,4624,4626,4628],{"class":611,"line":777},[609,4587,753],{"class":614},[609,4589,4590],{"class":618},"TresPointLight",[609,4592,785],{"class":614},[609,4594,1890],{"class":622},[609,4596,629],{"class":614},[609,4598,632],{"class":614},[609,4600,4601],{"class":795},"50",[609,4603,632],{"class":614},[609,4605,785],{"class":614},[609,4607,1463],{"class":622},[609,4609,629],{"class":614},[609,4611,632],{"class":614},[609,4613,1470],{"class":614},[609,4615,796],{"class":795},[609,4617,1475],{"class":614},[609,4619,796],{"class":795},[609,4621,1475],{"class":614},[609,4623,941],{"class":795},[609,4625,1485],{"class":614},[609,4627,632],{"class":614},[609,4629,759],{"class":614},[609,4631,4632,4634,4636,4638,4641,4643,4645,4647,4650,4652],{"class":611,"line":803},[609,4633,753],{"class":614},[609,4635,832],{"class":618},[609,4637,785],{"class":614},[609,4639,4640],{"class":622},"position-x",[609,4642,629],{"class":614},[609,4644,632],{"class":614},[609,4646,4092],{"class":614},[609,4648,4649],{"class":795},"0.75",[609,4651,632],{"class":614},[609,4653,641],{"class":614},[609,4655,4656,4658,4660],{"class":611,"line":603},[609,4657,829],{"class":614},[609,4659,843],{"class":618},[609,4661,759],{"class":614},[609,4663,4664,4666,4669],{"class":611,"line":826},[609,4665,829],{"class":614},[609,4667,4668],{"class":618},"TresMeshPhongMaterial",[609,4670,759],{"class":614},[609,4672,4674,4676,4678,4680,4683,4685,4687,4690,4692,4694,4696,4698,4701,4703],{"class":4673,"line":837},[611,645],[609,4675,829],{"class":614},[609,4677,65],{"class":618},[609,4679,785],{"class":614},[609,4681,4682],{"class":622},"thickness",[609,4684,629],{"class":614},[609,4686,632],{"class":614},[609,4688,4689],{"class":795},"7.5",[609,4691,632],{"class":614},[609,4693,3982],{"class":622},[609,4695,629],{"class":614},[609,4697,632],{"class":614},[609,4699,4700],{"class":635},"#82dbc5",[609,4702,632],{"class":614},[609,4704,759],{"class":614},[609,4706,4707,4709,4711],{"class":611,"line":848},[609,4708,871],{"class":614},[609,4710,832],{"class":618},[609,4712,641],{"class":614},[609,4714,4715,4717,4719,4721,4723,4725,4727,4729,4731],{"class":611,"line":858},[609,4716,753],{"class":614},[609,4718,832],{"class":618},[609,4720,785],{"class":614},[609,4722,4640],{"class":622},[609,4724,629],{"class":614},[609,4726,632],{"class":614},[609,4728,4649],{"class":795},[609,4730,632],{"class":614},[609,4732,641],{"class":614},[609,4734,4735,4737,4740,4742,4744,4746,4748,4750,4752,4754,4756],{"class":611,"line":604},[609,4736,829],{"class":614},[609,4738,4739],{"class":618},"TresSphereGeometry",[609,4741,785],{"class":614},[609,4743,1993],{"class":622},[609,4745,629],{"class":614},[609,4747,632],{"class":614},[609,4749,1470],{"class":614},[609,4751,1517],{"class":795},[609,4753,1485],{"class":614},[609,4755,632],{"class":614},[609,4757,759],{"class":614},[609,4759,4760,4762,4764],{"class":611,"line":878},[609,4761,829],{"class":614},[609,4763,4668],{"class":618},[609,4765,759],{"class":614},[609,4767,4769,4771,4773,4775,4777,4779,4781,4783,4785,4787,4789,4791,4793,4795],{"class":4768,"line":888},[611,645],[609,4770,829],{"class":614},[609,4772,65],{"class":618},[609,4774,785],{"class":614},[609,4776,4682],{"class":622},[609,4778,629],{"class":614},[609,4780,632],{"class":614},[609,4782,4689],{"class":795},[609,4784,632],{"class":614},[609,4786,3982],{"class":622},[609,4788,629],{"class":614},[609,4790,632],{"class":614},[609,4792,4049],{"class":635},[609,4794,632],{"class":614},[609,4796,759],{"class":614},[609,4798,4799,4801,4803],{"class":611,"line":2956},[609,4800,871],{"class":614},[609,4802,832],{"class":618},[609,4804,641],{"class":614},[609,4806,4807,4809,4811],{"class":611,"line":2964},[609,4808,881],{"class":614},[609,4810,733],{"class":618},[609,4812,641],{"class":614},[609,4814,4815,4817,4819],{"class":611,"line":2994},[609,4816,704],{"class":614},[609,4818,722],{"class":618},[609,4820,641],{"class":614},[476,4822,898],{"id":897},[903,4824,4825,4835],{},[906,4826,4827],{},[909,4828,4829,4831,4833],{},[912,4830,898],{},[912,4832,917],{},[912,4834,920],{},[922,4836,4837,4849,4861,4873,4885,4897],{},[909,4838,4839,4841,4844],{},[927,4840,2504],{},[927,4842,4843],{},"Outline color",[927,4845,4846],{},[590,4847,4848],{},"'black'",[909,4850,4851,4854,4857],{},[927,4852,4853],{},"screenspace",[927,4855,4856],{},"Whether line thickness is independent of zoom",[927,4858,4859],{},[590,4860,947],{},[909,4862,4863,4866,4869],{},[927,4864,4865],{},"opacity",[927,4867,4868],{},"Outline opacity",[927,4870,4871],{},[590,4872,1897],{},[909,4874,4875,4878,4881],{},[927,4876,4877],{},"transparent",[927,4879,4880],{},"Outline transparency",[927,4882,4883],{},[590,4884,947],{},[909,4886,4887,4889,4892],{},[927,4888,4682],{},[927,4890,4891],{},"Outline thickness",[927,4893,4894],{},[590,4895,4896],{},"0.05",[909,4898,4899,4902,4913],{},[927,4900,4901],{},"angle",[927,4903,4904,4905,4907,4908],{},"Geometry crease angle (",[590,4906,941],{}," is no crease).  See ",[1116,4909,4912],{"href":4910,"rel":4911},"https://threejs.org/docs/#examples/en/utils/BufferGeometryUtils.toCreasedNormals",[1120],"BufferGeometryUtils.toCreasedNormals",[927,4914,4915],{},[590,4916,4917],{},"Math.PI",[1303,4919,1652],{},{"title":548,"searchDepth":549,"depth":550,"links":4921},[4922,4923],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},"Create inverted-hull outlines using parent geometry.",{},{"title":65,"description":4924},"L_LPQP787liM6IASr51UnMfLs2CRosI1PG5BXlr7m_Q",{"id":4929,"title":69,"body":4930,"description":5823,"extension":563,"links":564,"meta":5824,"navigation":566,"path":70,"seo":5825,"stem":71,"__hash__":5826},"docs/2.api/1.abstractions/sampler.md",{"type":473,"value":4931,"toc":5818},[4932,4937,4940,4942,5280,5282,5348,5352,5359,5815],[580,4933,4934],{},[4935,4936],"abstractions-sampler",{},[586,4938,4939],{},"Declarative abstraction around MeshSurfaceSampler & InstancedMesh. It samples points from the passed mesh and transforms an InstancedMesh's matrix to distribute instances on the points.",[476,4941,15],{"id":596},[598,4943,4946],{"className":600,"code":4944,"highlights":4945,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls, Sampler } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#82DBC5\">\n    \u003CTresPerspectiveCamera :position=\"[0, 0.5, 5]\" />\n    \u003COrbitControls />\n\n    \u003CSampler :count=\"50\">\n      \u003CTresMesh>\n        \u003CTresTorusGeometry />\n      \u003C/TresMesh>\n\n      \u003CTresInstancedMesh :args=\"[null!, null!, 1000]\">\n        \u003CTresBoxGeometry :args=\"[0.1, 0.1, 0.1]\" />\n        \u003CTresMeshNormalMaterial />\n      \u003C/TresInstancedMesh>\n    \u003C/Sampler>\n    \u003CTresGridHelper :args=\"[10, 10]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n\n",[550,777,803,603,826,837,848,858,604,878,888],[590,4947,4948,4968,4992,5010,5018,5022,5030,5049,5081,5089,5093,5115,5124,5134,5143,5148,5176,5209,5218,5227,5236,5264,5272],{"__ignoreMap":548},[609,4949,4950,4952,4954,4956,4958,4960,4962,4964,4966],{"class":611,"line":549},[609,4951,615],{"class":614},[609,4953,619],{"class":618},[609,4955,623],{"class":622},[609,4957,626],{"class":622},[609,4959,629],{"class":614},[609,4961,632],{"class":614},[609,4963,636],{"class":635},[609,4965,632],{"class":614},[609,4967,641],{"class":614},[609,4969,4971,4973,4975,4977,4979,4982,4984,4986,4988,4990],{"class":4970,"line":550},[611,645],[609,4972,649],{"class":648},[609,4974,652],{"class":614},[609,4976,662],{"class":655},[609,4978,659],{"class":614},[609,4980,4981],{"class":655}," Sampler",[609,4983,665],{"class":614},[609,4985,668],{"class":648},[609,4987,671],{"class":614},[609,4989,674],{"class":635},[609,4991,677],{"class":614},[609,4993,4994,4996,4998,5000,5002,5004,5006,5008],{"class":611,"line":680},[609,4995,649],{"class":648},[609,4997,652],{"class":614},[609,4999,687],{"class":655},[609,5001,665],{"class":614},[609,5003,668],{"class":648},[609,5005,671],{"class":614},[609,5007,696],{"class":635},[609,5009,677],{"class":614},[609,5011,5012,5014,5016],{"class":611,"line":701},[609,5013,704],{"class":614},[609,5015,619],{"class":618},[609,5017,641],{"class":614},[609,5019,5020],{"class":611,"line":711},[609,5021,714],{"emptyLinePlaceholder":566},[609,5023,5024,5026,5028],{"class":611,"line":717},[609,5025,615],{"class":614},[609,5027,722],{"class":618},[609,5029,641],{"class":614},[609,5031,5032,5034,5036,5038,5040,5042,5045,5047],{"class":611,"line":727},[609,5033,730],{"class":614},[609,5035,733],{"class":618},[609,5037,736],{"class":622},[609,5039,629],{"class":614},[609,5041,632],{"class":614},[609,5043,5044],{"class":635},"#82DBC5",[609,5046,632],{"class":614},[609,5048,641],{"class":614},[609,5050,5051,5053,5055,5057,5059,5061,5063,5065,5067,5069,5071,5073,5075,5077,5079],{"class":611,"line":750},[609,5052,753],{"class":614},[609,5054,756],{"class":618},[609,5056,785],{"class":614},[609,5058,1463],{"class":622},[609,5060,629],{"class":614},[609,5062,632],{"class":614},[609,5064,1470],{"class":614},[609,5066,941],{"class":795},[609,5068,1475],{"class":614},[609,5070,1517],{"class":795},[609,5072,1475],{"class":614},[609,5074,2400],{"class":795},[609,5076,1485],{"class":614},[609,5078,632],{"class":614},[609,5080,759],{"class":614},[609,5082,5083,5085,5087],{"class":611,"line":762},[609,5084,753],{"class":614},[609,5086,767],{"class":618},[609,5088,759],{"class":614},[609,5090,5091],{"class":611,"line":772},[609,5092,714],{"emptyLinePlaceholder":566},[609,5094,5096,5098,5100,5102,5105,5107,5109,5111,5113],{"class":5095,"line":777},[611,645],[609,5097,753],{"class":614},[609,5099,69],{"class":618},[609,5101,785],{"class":614},[609,5103,5104],{"class":622},"count",[609,5106,629],{"class":614},[609,5108,632],{"class":614},[609,5110,4601],{"class":795},[609,5112,632],{"class":614},[609,5114,641],{"class":614},[609,5116,5118,5120,5122],{"class":5117,"line":803},[611,645],[609,5119,829],{"class":614},[609,5121,832],{"class":618},[609,5123,641],{"class":614},[609,5125,5127,5129,5132],{"class":5126,"line":603},[611,645],[609,5128,840],{"class":614},[609,5130,5131],{"class":618},"TresTorusGeometry",[609,5133,759],{"class":614},[609,5135,5137,5139,5141],{"class":5136,"line":826},[611,645],[609,5138,861],{"class":614},[609,5140,832],{"class":618},[609,5142,641],{"class":614},[609,5144,5146],{"class":5145,"line":837},[611,645],[609,5147,714],{"emptyLinePlaceholder":566},[609,5149,5151,5153,5156,5158,5160,5162,5164,5167,5170,5172,5174],{"class":5150,"line":848},[611,645],[609,5152,829],{"class":614},[609,5154,5155],{"class":618},"TresInstancedMesh",[609,5157,785],{"class":614},[609,5159,1993],{"class":622},[609,5161,629],{"class":614},[609,5163,632],{"class":614},[609,5165,5166],{"class":614},"[null!, null!, ",[609,5168,5169],{"class":795},"1000",[609,5171,1485],{"class":614},[609,5173,632],{"class":614},[609,5175,641],{"class":614},[609,5177,5179,5181,5183,5185,5187,5189,5191,5193,5195,5197,5199,5201,5203,5205,5207],{"class":5178,"line":858},[611,645],[609,5180,840],{"class":614},[609,5182,843],{"class":618},[609,5184,785],{"class":614},[609,5186,1993],{"class":622},[609,5188,629],{"class":614},[609,5190,632],{"class":614},[609,5192,1470],{"class":614},[609,5194,2207],{"class":795},[609,5196,1475],{"class":614},[609,5198,2207],{"class":795},[609,5200,1475],{"class":614},[609,5202,2207],{"class":795},[609,5204,1485],{"class":614},[609,5206,632],{"class":614},[609,5208,759],{"class":614},[609,5210,5212,5214,5216],{"class":5211,"line":604},[611,645],[609,5213,840],{"class":614},[609,5215,853],{"class":618},[609,5217,759],{"class":614},[609,5219,5221,5223,5225],{"class":5220,"line":878},[611,645],[609,5222,861],{"class":614},[609,5224,5155],{"class":618},[609,5226,641],{"class":614},[609,5228,5230,5232,5234],{"class":5229,"line":888},[611,645],[609,5231,871],{"class":614},[609,5233,69],{"class":618},[609,5235,641],{"class":614},[609,5237,5238,5240,5242,5244,5246,5248,5250,5252,5254,5256,5258,5260,5262],{"class":611,"line":2956},[609,5239,753],{"class":614},[609,5241,3071],{"class":618},[609,5243,785],{"class":614},[609,5245,1993],{"class":622},[609,5247,629],{"class":614},[609,5249,632],{"class":614},[609,5251,1470],{"class":614},[609,5253,1482],{"class":795},[609,5255,1475],{"class":614},[609,5257,1482],{"class":795},[609,5259,1485],{"class":614},[609,5261,632],{"class":614},[609,5263,759],{"class":614},[609,5265,5266,5268,5270],{"class":611,"line":2964},[609,5267,881],{"class":614},[609,5269,733],{"class":618},[609,5271,641],{"class":614},[609,5273,5274,5276,5278],{"class":611,"line":2994},[609,5275,704],{"class":614},[609,5277,722],{"class":618},[609,5279,641],{"class":614},[476,5281,898],{"id":897},[903,5283,5284,5292],{},[906,5285,5286],{},[909,5287,5288,5290],{},[912,5289,898],{},[912,5291,917],{},[922,5293,5294,5305,5315,5326,5337],{},[909,5295,5296,5299],{},[927,5297,5298],{},"mesh",[927,5300,5301,5304],{},[1677,5302,5303],{},"Mesh"," Surface mesh from which to sample",[909,5306,5307,5309],{},[927,5308,5104],{},[927,5310,5311,5314],{},[1677,5312,5313],{},"Number"," Number of samples",[909,5316,5317,5320],{},[927,5318,5319],{},"instanceMesh",[927,5321,5322,5325],{},[1677,5323,5324],{},"InstanceMesh"," InstanceMesh to scatter",[909,5327,5328,5331],{},[927,5329,5330],{},"weight",[927,5332,5333,5336],{},[1677,5334,5335],{},"String"," A vertex attribute to be used as a weight when sampling",[909,5338,5339,5342],{},[927,5340,5341],{},"transform",[927,5343,5344,5347],{},[1677,5345,5346],{},"Function"," A function that can be used as a custom sampling",[476,5349,5351],{"id":5350},"usesurfacesampler","useSurfaceSampler",[586,5353,5354,5355],{},"A hook to obtain the result of the ",[5356,5357,5358],"sampler",{}," as a buffer. Useful for driving anything other than InstancedMesh via the Sampler.",[598,5360,5363],{"className":600,"code":5361,"highlights":5362,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls, useSurfaceSampler } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport { ref, watch } from 'vue'\n\nconst torusRef = ref()\nconst instancesRef = ref()\n\nwatch(torusRef, (value) => {\n  useSurfaceSampler(value, 50, instancesRef.value, 'color')\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#82DBC5\">\n    \u003CTresPerspectiveCamera :position=\"[0, 0.5, 5]\" />\n    \u003COrbitControls />\n\n    \u003CTresMesh ref=\"torusRef\">\n      \u003CTresTorusGeometry />\n    \u003C/TresMesh>\n\n    \u003CTresInstancedMesh\n      ref=\"instancesRef\"\n      :args=\"[null!, null!, 1_000]\"\n    >\n      \u003CTresSphereGeometry :args=\"[0.1, 32, 32]\" />\n      \u003CTresMeshNormalMaterial />\n    \u003C/TresInstancedMesh>\n\n    \u003CTresGridHelper :args=\"[10, 10]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n",[550,772],[590,5364,5365,5385,5409,5427,5451,5455,5468,5481,5485,5508,5544,5551,5559,5563,5571,5589,5621,5629,5633,5652,5660,5668,5672,5679,5693,5713,5718,5751,5759,5767,5771,5799,5807],{"__ignoreMap":548},[609,5366,5367,5369,5371,5373,5375,5377,5379,5381,5383],{"class":611,"line":549},[609,5368,615],{"class":614},[609,5370,619],{"class":618},[609,5372,623],{"class":622},[609,5374,626],{"class":622},[609,5376,629],{"class":614},[609,5378,632],{"class":614},[609,5380,636],{"class":635},[609,5382,632],{"class":614},[609,5384,641],{"class":614},[609,5386,5388,5390,5392,5394,5396,5399,5401,5403,5405,5407],{"class":5387,"line":550},[611,645],[609,5389,649],{"class":648},[609,5391,652],{"class":614},[609,5393,662],{"class":655},[609,5395,659],{"class":614},[609,5397,5398],{"class":655}," useSurfaceSampler",[609,5400,665],{"class":614},[609,5402,668],{"class":648},[609,5404,671],{"class":614},[609,5406,674],{"class":635},[609,5408,677],{"class":614},[609,5410,5411,5413,5415,5417,5419,5421,5423,5425],{"class":611,"line":680},[609,5412,649],{"class":648},[609,5414,652],{"class":614},[609,5416,687],{"class":655},[609,5418,665],{"class":614},[609,5420,668],{"class":648},[609,5422,671],{"class":614},[609,5424,696],{"class":635},[609,5426,677],{"class":614},[609,5428,5429,5431,5433,5436,5438,5441,5443,5445,5447,5449],{"class":611,"line":701},[609,5430,649],{"class":648},[609,5432,652],{"class":614},[609,5434,5435],{"class":655}," ref",[609,5437,659],{"class":614},[609,5439,5440],{"class":655}," watch",[609,5442,665],{"class":614},[609,5444,668],{"class":648},[609,5446,671],{"class":614},[609,5448,605],{"class":635},[609,5450,677],{"class":614},[609,5452,5453],{"class":611,"line":711},[609,5454,714],{"emptyLinePlaceholder":566},[609,5456,5457,5459,5462,5464,5466],{"class":611,"line":717},[609,5458,2693],{"class":622},[609,5460,5461],{"class":655}," torusRef ",[609,5463,629],{"class":614},[609,5465,5435],{"class":2804},[609,5467,2850],{"class":655},[609,5469,5470,5472,5475,5477,5479],{"class":611,"line":727},[609,5471,2693],{"class":622},[609,5473,5474],{"class":655}," instancesRef ",[609,5476,629],{"class":614},[609,5478,5435],{"class":2804},[609,5480,2850],{"class":655},[609,5482,5483],{"class":611,"line":750},[609,5484,714],{"emptyLinePlaceholder":566},[609,5486,5487,5490,5493,5495,5497,5501,5503,5506],{"class":611,"line":762},[609,5488,5489],{"class":2804},"watch",[609,5491,5492],{"class":655},"(torusRef",[609,5494,659],{"class":614},[609,5496,2717],{"class":614},[609,5498,5500],{"class":5499},"sHdIc","value",[609,5502,4129],{"class":614},[609,5504,5505],{"class":622}," =>",[609,5507,1180],{"class":614},[609,5509,5511,5514,5516,5518,5520,5523,5525,5528,5530,5532,5534,5536,5538,5541],{"class":5510,"line":772},[611,645],[609,5512,5513],{"class":2804},"  useSurfaceSampler",[609,5515,2974],{"class":618},[609,5517,5500],{"class":655},[609,5519,659],{"class":614},[609,5521,5522],{"class":795}," 50",[609,5524,659],{"class":614},[609,5526,5527],{"class":655}," instancesRef",[609,5529,1122],{"class":614},[609,5531,5500],{"class":655},[609,5533,659],{"class":614},[609,5535,671],{"class":614},[609,5537,2504],{"class":635},[609,5539,5540],{"class":614},"'",[609,5542,5543],{"class":618},")\n",[609,5545,5546,5549],{"class":611,"line":777},[609,5547,5548],{"class":614},"}",[609,5550,5543],{"class":655},[609,5552,5553,5555,5557],{"class":611,"line":803},[609,5554,704],{"class":614},[609,5556,619],{"class":618},[609,5558,641],{"class":614},[609,5560,5561],{"class":611,"line":603},[609,5562,714],{"emptyLinePlaceholder":566},[609,5564,5565,5567,5569],{"class":611,"line":826},[609,5566,615],{"class":614},[609,5568,722],{"class":618},[609,5570,641],{"class":614},[609,5572,5573,5575,5577,5579,5581,5583,5585,5587],{"class":611,"line":837},[609,5574,730],{"class":614},[609,5576,733],{"class":618},[609,5578,736],{"class":622},[609,5580,629],{"class":614},[609,5582,632],{"class":614},[609,5584,5044],{"class":635},[609,5586,632],{"class":614},[609,5588,641],{"class":614},[609,5590,5591,5593,5595,5597,5599,5601,5603,5605,5607,5609,5611,5613,5615,5617,5619],{"class":611,"line":848},[609,5592,753],{"class":614},[609,5594,756],{"class":618},[609,5596,785],{"class":614},[609,5598,1463],{"class":622},[609,5600,629],{"class":614},[609,5602,632],{"class":614},[609,5604,1470],{"class":614},[609,5606,941],{"class":795},[609,5608,1475],{"class":614},[609,5610,1517],{"class":795},[609,5612,1475],{"class":614},[609,5614,2400],{"class":795},[609,5616,1485],{"class":614},[609,5618,632],{"class":614},[609,5620,759],{"class":614},[609,5622,5623,5625,5627],{"class":611,"line":858},[609,5624,753],{"class":614},[609,5626,767],{"class":618},[609,5628,759],{"class":614},[609,5630,5631],{"class":611,"line":604},[609,5632,714],{"emptyLinePlaceholder":566},[609,5634,5635,5637,5639,5641,5643,5645,5648,5650],{"class":611,"line":878},[609,5636,753],{"class":614},[609,5638,832],{"class":618},[609,5640,5435],{"class":622},[609,5642,629],{"class":614},[609,5644,632],{"class":614},[609,5646,5647],{"class":635},"torusRef",[609,5649,632],{"class":614},[609,5651,641],{"class":614},[609,5653,5654,5656,5658],{"class":611,"line":888},[609,5655,829],{"class":614},[609,5657,5131],{"class":618},[609,5659,759],{"class":614},[609,5661,5662,5664,5666],{"class":611,"line":2956},[609,5663,871],{"class":614},[609,5665,832],{"class":618},[609,5667,641],{"class":614},[609,5669,5670],{"class":611,"line":2964},[609,5671,714],{"emptyLinePlaceholder":566},[609,5673,5674,5676],{"class":611,"line":2994},[609,5675,753],{"class":614},[609,5677,5678],{"class":618},"TresInstancedMesh\n",[609,5680,5681,5684,5686,5688,5691],{"class":611,"line":3011},[609,5682,5683],{"class":622},"      ref",[609,5685,629],{"class":614},[609,5687,632],{"class":614},[609,5689,5690],{"class":635},"instancesRef",[609,5692,2991],{"class":614},[609,5694,5695,5698,5700,5702,5704,5706,5709,5711],{"class":611,"line":3026},[609,5696,5697],{"class":614},"      :",[609,5699,1993],{"class":622},[609,5701,629],{"class":614},[609,5703,632],{"class":614},[609,5705,5166],{"class":614},[609,5707,5708],{"class":795},"1_000",[609,5710,1485],{"class":614},[609,5712,2991],{"class":614},[609,5714,5715],{"class":611,"line":3051},[609,5716,5717],{"class":614},"    >\n",[609,5719,5720,5722,5724,5726,5728,5730,5732,5734,5736,5738,5741,5743,5745,5747,5749],{"class":611,"line":2595},[609,5721,829],{"class":614},[609,5723,4739],{"class":618},[609,5725,785],{"class":614},[609,5727,1993],{"class":622},[609,5729,629],{"class":614},[609,5731,632],{"class":614},[609,5733,1470],{"class":614},[609,5735,2207],{"class":795},[609,5737,1475],{"class":614},[609,5739,5740],{"class":795},"32",[609,5742,1475],{"class":614},[609,5744,5740],{"class":795},[609,5746,1485],{"class":614},[609,5748,632],{"class":614},[609,5750,759],{"class":614},[609,5752,5753,5755,5757],{"class":611,"line":3066},[609,5754,829],{"class":614},[609,5756,853],{"class":618},[609,5758,759],{"class":614},[609,5760,5761,5763,5765],{"class":611,"line":3096},[609,5762,871],{"class":614},[609,5764,5155],{"class":618},[609,5766,641],{"class":614},[609,5768,5769],{"class":611,"line":3105},[609,5770,714],{"emptyLinePlaceholder":566},[609,5772,5773,5775,5777,5779,5781,5783,5785,5787,5789,5791,5793,5795,5797],{"class":611,"line":4211},[609,5774,753],{"class":614},[609,5776,3071],{"class":618},[609,5778,785],{"class":614},[609,5780,1993],{"class":622},[609,5782,629],{"class":614},[609,5784,632],{"class":614},[609,5786,1470],{"class":614},[609,5788,1482],{"class":795},[609,5790,1475],{"class":614},[609,5792,1482],{"class":795},[609,5794,1485],{"class":614},[609,5796,632],{"class":614},[609,5798,759],{"class":614},[609,5800,5801,5803,5805],{"class":611,"line":4216},[609,5802,881],{"class":614},[609,5804,733],{"class":618},[609,5806,641],{"class":614},[609,5808,5809,5811,5813],{"class":611,"line":4239},[609,5810,704],{"class":614},[609,5812,722],{"class":618},[609,5814,641],{"class":614},[1303,5816,5817],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":548,"searchDepth":549,"depth":550,"links":5819},[5820,5821,5822],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},{"id":5350,"depth":550,"text":5351},"Distribute instances on mesh surfaces using MeshSurfaceSampler.",{},{"title":69,"description":5823},"tp0RMAouxWdIwvGbhPWEaPk4Au2TU5HY1qCtuO9XCUA",{"id":5828,"title":73,"body":5829,"description":6174,"extension":563,"links":564,"meta":6175,"navigation":566,"path":74,"seo":6176,"stem":75,"__hash__":6177},"docs/2.api/1.abstractions/screen-sizer.md",{"type":473,"value":5830,"toc":6170},[5831,5836,5845,5848,5850,6160,6162,6168],[2562,5832,5833],{},[5834,5835],"abstractions-screen-sizer",{},[586,5837,1326,5838,5841,5842,5844],{},[590,5839,5840],{},"\u003CTresObject3D />"," wrapper that scales to \"screen space\". By default ",[590,5843,1897],{}," THREE world unit will be translated to 1 screen pixel.",[586,5846,5847],{},"E.g. a BoxGeometry with a height, width, and depth of 100 each, will be scaled to 100 screen pixels in each dimension.",[476,5849,15],{"id":596},[598,5851,5854],{"className":600,"code":5852,"highlights":5853,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { OrbitControls, ScreenSizer } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#3f3f3f\">\n    \u003CTresPerspectiveCamera :position=\"[10, 10, 10]\" />\n    \u003COrbitControls />\n    \u003CScreenSizer>\n      \u003CTresMesh>\n        \u003CTresBoxGeometry :args=\"[100, 100, 100]\" />\n        \u003CTresMeshNormalMaterial />\n      \u003C/TresMesh>\n    \u003C/ScreenSizer>\n    \u003CTresMesh :position-x=\"5\">\n      \u003CTresBoxGeometry />\n      \u003CTresMeshNormalMaterial />\n    \u003C/TresMesh>\n    \u003CTresGridHelper :args=\"[10, 10]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n",[680,772,837],[590,5855,5856,5876,5894,5918,5926,5930,5938,5957,5989,5997,6006,6014,6047,6055,6063,6072,6092,6100,6108,6116,6144,6152],{"__ignoreMap":548},[609,5857,5858,5860,5862,5864,5866,5868,5870,5872,5874],{"class":611,"line":549},[609,5859,615],{"class":614},[609,5861,619],{"class":618},[609,5863,623],{"class":622},[609,5865,626],{"class":622},[609,5867,629],{"class":614},[609,5869,632],{"class":614},[609,5871,636],{"class":635},[609,5873,632],{"class":614},[609,5875,641],{"class":614},[609,5877,5878,5880,5882,5884,5886,5888,5890,5892],{"class":611,"line":550},[609,5879,649],{"class":648},[609,5881,652],{"class":614},[609,5883,687],{"class":655},[609,5885,665],{"class":614},[609,5887,668],{"class":648},[609,5889,671],{"class":614},[609,5891,696],{"class":635},[609,5893,677],{"class":614},[609,5895,5897,5899,5901,5903,5905,5908,5910,5912,5914,5916],{"class":5896,"line":680},[611,645],[609,5898,649],{"class":648},[609,5900,652],{"class":614},[609,5902,662],{"class":655},[609,5904,659],{"class":614},[609,5906,5907],{"class":655}," ScreenSizer",[609,5909,665],{"class":614},[609,5911,668],{"class":648},[609,5913,671],{"class":614},[609,5915,674],{"class":635},[609,5917,677],{"class":614},[609,5919,5920,5922,5924],{"class":611,"line":701},[609,5921,704],{"class":614},[609,5923,619],{"class":618},[609,5925,641],{"class":614},[609,5927,5928],{"class":611,"line":711},[609,5929,714],{"emptyLinePlaceholder":566},[609,5931,5932,5934,5936],{"class":611,"line":717},[609,5933,615],{"class":614},[609,5935,722],{"class":618},[609,5937,641],{"class":614},[609,5939,5940,5942,5944,5946,5948,5950,5953,5955],{"class":611,"line":727},[609,5941,730],{"class":614},[609,5943,733],{"class":618},[609,5945,736],{"class":622},[609,5947,629],{"class":614},[609,5949,632],{"class":614},[609,5951,5952],{"class":635},"#3f3f3f",[609,5954,632],{"class":614},[609,5956,641],{"class":614},[609,5958,5959,5961,5963,5965,5967,5969,5971,5973,5975,5977,5979,5981,5983,5985,5987],{"class":611,"line":750},[609,5960,753],{"class":614},[609,5962,756],{"class":618},[609,5964,785],{"class":614},[609,5966,1463],{"class":622},[609,5968,629],{"class":614},[609,5970,632],{"class":614},[609,5972,1470],{"class":614},[609,5974,1482],{"class":795},[609,5976,1475],{"class":614},[609,5978,1482],{"class":795},[609,5980,1475],{"class":614},[609,5982,1482],{"class":795},[609,5984,1485],{"class":614},[609,5986,632],{"class":614},[609,5988,759],{"class":614},[609,5990,5991,5993,5995],{"class":611,"line":762},[609,5992,753],{"class":614},[609,5994,767],{"class":618},[609,5996,759],{"class":614},[609,5998,6000,6002,6004],{"class":5999,"line":772},[611,645],[609,6001,753],{"class":614},[609,6003,73],{"class":618},[609,6005,641],{"class":614},[609,6007,6008,6010,6012],{"class":611,"line":777},[609,6009,829],{"class":614},[609,6011,832],{"class":618},[609,6013,641],{"class":614},[609,6015,6016,6018,6020,6022,6024,6026,6028,6030,6033,6035,6037,6039,6041,6043,6045],{"class":611,"line":803},[609,6017,840],{"class":614},[609,6019,843],{"class":618},[609,6021,785],{"class":614},[609,6023,1993],{"class":622},[609,6025,629],{"class":614},[609,6027,632],{"class":614},[609,6029,1470],{"class":614},[609,6031,6032],{"class":795},"100",[609,6034,1475],{"class":614},[609,6036,6032],{"class":795},[609,6038,1475],{"class":614},[609,6040,6032],{"class":795},[609,6042,1485],{"class":614},[609,6044,632],{"class":614},[609,6046,759],{"class":614},[609,6048,6049,6051,6053],{"class":611,"line":603},[609,6050,840],{"class":614},[609,6052,853],{"class":618},[609,6054,759],{"class":614},[609,6056,6057,6059,6061],{"class":611,"line":826},[609,6058,861],{"class":614},[609,6060,832],{"class":618},[609,6062,641],{"class":614},[609,6064,6066,6068,6070],{"class":6065,"line":837},[611,645],[609,6067,871],{"class":614},[609,6069,73],{"class":618},[609,6071,641],{"class":614},[609,6073,6074,6076,6078,6080,6082,6084,6086,6088,6090],{"class":611,"line":848},[609,6075,753],{"class":614},[609,6077,832],{"class":618},[609,6079,785],{"class":614},[609,6081,4640],{"class":622},[609,6083,629],{"class":614},[609,6085,632],{"class":614},[609,6087,2400],{"class":795},[609,6089,632],{"class":614},[609,6091,641],{"class":614},[609,6093,6094,6096,6098],{"class":611,"line":858},[609,6095,829],{"class":614},[609,6097,843],{"class":618},[609,6099,759],{"class":614},[609,6101,6102,6104,6106],{"class":611,"line":604},[609,6103,829],{"class":614},[609,6105,853],{"class":618},[609,6107,759],{"class":614},[609,6109,6110,6112,6114],{"class":611,"line":878},[609,6111,871],{"class":614},[609,6113,832],{"class":618},[609,6115,641],{"class":614},[609,6117,6118,6120,6122,6124,6126,6128,6130,6132,6134,6136,6138,6140,6142],{"class":611,"line":888},[609,6119,753],{"class":614},[609,6121,3071],{"class":618},[609,6123,785],{"class":614},[609,6125,1993],{"class":622},[609,6127,629],{"class":614},[609,6129,632],{"class":614},[609,6131,1470],{"class":614},[609,6133,1482],{"class":795},[609,6135,1475],{"class":614},[609,6137,1482],{"class":795},[609,6139,1485],{"class":614},[609,6141,632],{"class":614},[609,6143,759],{"class":614},[609,6145,6146,6148,6150],{"class":611,"line":2956},[609,6147,881],{"class":614},[609,6149,733],{"class":618},[609,6151,641],{"class":614},[609,6153,6154,6156,6158],{"class":611,"line":2964},[609,6155,704],{"class":614},[609,6157,722],{"class":618},[609,6159,641],{"class":614},[476,6161,898],{"id":897},[586,6163,6164,6165,1122],{},"Inherits all props from ",[590,6166,6167],{},"THREE.Object3D",[1303,6169,1652],{},{"title":548,"searchDepth":549,"depth":550,"links":6171},[6172,6173],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},"Scale objects to screen space where 1 unit equals 1 pixel.",{},{"title":73,"description":6174},"kz3721y8yAocwgiv4rVn-y48A-pFvSXFLwhVmj14V5k",{"id":6179,"title":77,"body":6180,"description":6562,"extension":563,"links":564,"meta":6563,"navigation":566,"path":78,"seo":6564,"stem":79,"__hash__":6565},"docs/2.api/1.abstractions/screen-space.md",{"type":473,"value":6181,"toc":6558},[6182,6187,6200,6222,6224,6462,6464,6556],[580,6183,6184],{},[6185,6186],"abstractions-screen-space",{},[586,6188,6189,6192,6193,6196,6197,1122],{},[590,6190,6191],{},"\u003CScreenSpace />"," wraps its children in a ",[590,6194,6195],{},"\u003CTresGroup />"," and positions them in front of the active camera at ",[590,6198,6199],{},":depth",[586,6201,6202,6203,1475,6205,1475,6207,1475,6209,6211,6212,6215,6216,2579,6219,1122],{},"Additionally, the ",[590,6204,931],{},[590,6206,954],{},[590,6208,973],{},[590,6210,992],{}," props can be used to position them similarly to CSS ",[590,6213,6214],{},"position: absolute"," property when using a ",[590,6217,6218],{},"PerspectiveCamera",[590,6220,6221],{},"OrtographicCamera",[476,6223,15],{"id":596},[598,6225,6228],{"className":600,"code":6226,"highlights":6227,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls, ScreenSpace } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#333\">\n    \u003CTresPerspectiveCamera />\n    \u003COrbitControls />\n\n    \u003CScreenSpace :depth=\"5\">\n      \u003CTresMesh>\n        \u003CTresTorusGeometry />\n        \u003CTresMeshNormalMaterial />\n      \u003C/TresMesh>\n    \u003C/ScreenSpace>\n\n    \u003CTresGridHelper :args=\"[10, 10]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n\n",[550,777,848],[590,6229,6230,6250,6274,6292,6300,6304,6312,6331,6339,6347,6351,6373,6381,6389,6397,6405,6414,6418,6446,6454],{"__ignoreMap":548},[609,6231,6232,6234,6236,6238,6240,6242,6244,6246,6248],{"class":611,"line":549},[609,6233,615],{"class":614},[609,6235,619],{"class":618},[609,6237,623],{"class":622},[609,6239,626],{"class":622},[609,6241,629],{"class":614},[609,6243,632],{"class":614},[609,6245,636],{"class":635},[609,6247,632],{"class":614},[609,6249,641],{"class":614},[609,6251,6253,6255,6257,6259,6261,6264,6266,6268,6270,6272],{"class":6252,"line":550},[611,645],[609,6254,649],{"class":648},[609,6256,652],{"class":614},[609,6258,662],{"class":655},[609,6260,659],{"class":614},[609,6262,6263],{"class":655}," ScreenSpace",[609,6265,665],{"class":614},[609,6267,668],{"class":648},[609,6269,671],{"class":614},[609,6271,674],{"class":635},[609,6273,677],{"class":614},[609,6275,6276,6278,6280,6282,6284,6286,6288,6290],{"class":611,"line":680},[609,6277,649],{"class":648},[609,6279,652],{"class":614},[609,6281,687],{"class":655},[609,6283,665],{"class":614},[609,6285,668],{"class":648},[609,6287,671],{"class":614},[609,6289,696],{"class":635},[609,6291,677],{"class":614},[609,6293,6294,6296,6298],{"class":611,"line":701},[609,6295,704],{"class":614},[609,6297,619],{"class":618},[609,6299,641],{"class":614},[609,6301,6302],{"class":611,"line":711},[609,6303,714],{"emptyLinePlaceholder":566},[609,6305,6306,6308,6310],{"class":611,"line":717},[609,6307,615],{"class":614},[609,6309,722],{"class":618},[609,6311,641],{"class":614},[609,6313,6314,6316,6318,6320,6322,6324,6327,6329],{"class":611,"line":727},[609,6315,730],{"class":614},[609,6317,733],{"class":618},[609,6319,736],{"class":622},[609,6321,629],{"class":614},[609,6323,632],{"class":614},[609,6325,6326],{"class":635},"#333",[609,6328,632],{"class":614},[609,6330,641],{"class":614},[609,6332,6333,6335,6337],{"class":611,"line":750},[609,6334,753],{"class":614},[609,6336,756],{"class":618},[609,6338,759],{"class":614},[609,6340,6341,6343,6345],{"class":611,"line":762},[609,6342,753],{"class":614},[609,6344,767],{"class":618},[609,6346,759],{"class":614},[609,6348,6349],{"class":611,"line":772},[609,6350,714],{"emptyLinePlaceholder":566},[609,6352,6354,6356,6358,6360,6363,6365,6367,6369,6371],{"class":6353,"line":777},[611,645],[609,6355,753],{"class":614},[609,6357,77],{"class":618},[609,6359,785],{"class":614},[609,6361,6362],{"class":622},"depth",[609,6364,629],{"class":614},[609,6366,632],{"class":614},[609,6368,2400],{"class":795},[609,6370,632],{"class":614},[609,6372,641],{"class":614},[609,6374,6375,6377,6379],{"class":611,"line":803},[609,6376,829],{"class":614},[609,6378,832],{"class":618},[609,6380,641],{"class":614},[609,6382,6383,6385,6387],{"class":611,"line":603},[609,6384,840],{"class":614},[609,6386,5131],{"class":618},[609,6388,759],{"class":614},[609,6390,6391,6393,6395],{"class":611,"line":826},[609,6392,840],{"class":614},[609,6394,853],{"class":618},[609,6396,759],{"class":614},[609,6398,6399,6401,6403],{"class":611,"line":837},[609,6400,861],{"class":614},[609,6402,832],{"class":618},[609,6404,641],{"class":614},[609,6406,6408,6410,6412],{"class":6407,"line":848},[611,645],[609,6409,871],{"class":614},[609,6411,77],{"class":618},[609,6413,641],{"class":614},[609,6415,6416],{"class":611,"line":858},[609,6417,714],{"emptyLinePlaceholder":566},[609,6419,6420,6422,6424,6426,6428,6430,6432,6434,6436,6438,6440,6442,6444],{"class":611,"line":604},[609,6421,753],{"class":614},[609,6423,3071],{"class":618},[609,6425,785],{"class":614},[609,6427,1993],{"class":622},[609,6429,629],{"class":614},[609,6431,632],{"class":614},[609,6433,1470],{"class":614},[609,6435,1482],{"class":795},[609,6437,1475],{"class":614},[609,6439,1482],{"class":795},[609,6441,1485],{"class":614},[609,6443,632],{"class":614},[609,6445,759],{"class":614},[609,6447,6448,6450,6452],{"class":611,"line":878},[609,6449,881],{"class":614},[609,6451,733],{"class":618},[609,6453,641],{"class":614},[609,6455,6456,6458,6460],{"class":611,"line":888},[609,6457,704],{"class":614},[609,6459,722],{"class":618},[609,6461,641],{"class":614},[476,6463,898],{"id":897},[903,6465,6466,6476],{},[906,6467,6468],{},[909,6469,6470,6472,6474],{},[912,6471,914],{"align":973},[912,6473,917],{"align":973},[912,6475,920],{},[922,6477,6478,6492,6511,6525,6542],{},[909,6479,6480,6484,6487],{},[927,6481,6482],{"align":973},[590,6483,6362],{},[927,6485,6486],{"align":973},"Distance from the camera",[927,6488,6489],{},[590,6490,6491],{},"-1",[909,6493,6494,6498,6506],{},[927,6495,6496],{"align":973},[590,6497,931],{},[927,6499,6500,6501,6503,6504],{"align":973},"Similar to CSS ",[590,6502,931],{}," property. Cannot be used with ",[590,6505,954],{},[927,6507,6508,6510],{},[590,6509,1517],{}," (vertical center of the screen)",[909,6512,6513,6517,6523],{},[927,6514,6515],{"align":973},[590,6516,954],{},[927,6518,6500,6519,6503,6521],{"align":973},[590,6520,954],{},[590,6522,931],{},[927,6524],{},[909,6526,6527,6531,6537],{},[927,6528,6529],{"align":973},[590,6530,973],{},[927,6532,6500,6533,6503,6535],{"align":973},[590,6534,973],{},[590,6536,992],{},[927,6538,6539,6541],{},[590,6540,1517],{}," (horizontal center of the screen)",[909,6543,6544,6548,6554],{},[927,6545,6546],{"align":973},[590,6547,992],{},[927,6549,6500,6550,6503,6552],{"align":973},[590,6551,992],{},[590,6553,973],{},[927,6555],{},[1303,6557,1652],{},{"title":548,"searchDepth":549,"depth":550,"links":6559},[6560,6561],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},"Position objects in front of the camera with CSS-like positioning.",{},{"title":77,"description":6562},"kqBTtDRTjTEQO1CtIqpPWtj4cpsi2JzyDHE4eOsdRvU",[6567,7859,8811,9195,9526,10258,10614],{"id":6568,"title":87,"body":6569,"description":7855,"extension":563,"links":564,"meta":7856,"navigation":566,"path":88,"seo":7857,"stem":89,"__hash__":7858},"docs/2.api/2.controls/camera-controls.md",{"type":473,"value":6570,"toc":7846},[6571,6576,6587,6595,6597,6819,6824,6826,6829,7280,7283,7312,7476,7480,7608,7617,7620,7743,7747,7803,7843],[580,6572,6573],{},[6574,6575],"controls-camera-controls",{},[586,6577,6578,6583,6584,6586],{},[1116,6579,6582],{"href":6580,"rel":6581},"https://github.com/yomotsu/camera-controls",[1120],"CameraControls"," is a camera controller similar to ",[1116,6585,767],{"href":104}," yet supports smooth transitions and more features.",[586,6588,6589,6590,1122],{},"However, it is thirty party library for ThreeJS. So to use it you would need to install and import using ",[1116,6591,6594],{"href":6592,"rel":6593},"https://www.npmjs.com/package/camera-controls",[1120],"npm",[476,6596,15],{"id":596},[598,6598,6601],{"className":600,"code":6599,"highlights":6600,"language":605,"meta":548,"style":548},"\u003Cscript setup>\nimport { CameraControls } from \"@tresjs/cientos\"\n\u003C/script>\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#82DBC5\">\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n    \u003CCameraControls />\n    \u003CBox :scale=\"2\">\n      \u003CTresMeshToonMaterial color=\"orange\" />\n    \u003C/Box>\n    \u003CTresAmbientLight />\n    \u003CTresDirectionalLight :position=\"[0, 2, 4]\" />\n    \u003CTresGridHelper />\n  \u003C/TresCanvas>\n\u003C/template>\n",[727],[590,6602,6603,6613,6632,6640,6648,6666,6698,6707,6727,6747,6755,6763,6795,6803,6811],{"__ignoreMap":548},[609,6604,6605,6607,6609,6611],{"class":611,"line":549},[609,6606,615],{"class":614},[609,6608,619],{"class":618},[609,6610,623],{"class":622},[609,6612,641],{"class":614},[609,6614,6615,6617,6619,6622,6624,6626,6628,6630],{"class":611,"line":550},[609,6616,649],{"class":648},[609,6618,652],{"class":614},[609,6620,6621],{"class":655}," CameraControls",[609,6623,665],{"class":614},[609,6625,668],{"class":648},[609,6627,3326],{"class":614},[609,6629,674],{"class":635},[609,6631,2991],{"class":614},[609,6633,6634,6636,6638],{"class":611,"line":680},[609,6635,704],{"class":614},[609,6637,619],{"class":618},[609,6639,641],{"class":614},[609,6641,6642,6644,6646],{"class":611,"line":701},[609,6643,615],{"class":614},[609,6645,722],{"class":618},[609,6647,641],{"class":614},[609,6649,6650,6652,6654,6656,6658,6660,6662,6664],{"class":611,"line":711},[609,6651,730],{"class":614},[609,6653,733],{"class":618},[609,6655,736],{"class":622},[609,6657,629],{"class":614},[609,6659,632],{"class":614},[609,6661,5044],{"class":635},[609,6663,632],{"class":614},[609,6665,641],{"class":614},[609,6667,6668,6670,6672,6674,6676,6678,6680,6682,6684,6686,6688,6690,6692,6694,6696],{"class":611,"line":717},[609,6669,753],{"class":614},[609,6671,756],{"class":618},[609,6673,785],{"class":614},[609,6675,1463],{"class":622},[609,6677,629],{"class":614},[609,6679,632],{"class":614},[609,6681,1470],{"class":614},[609,6683,4164],{"class":795},[609,6685,1475],{"class":614},[609,6687,4164],{"class":795},[609,6689,1475],{"class":614},[609,6691,4164],{"class":795},[609,6693,1485],{"class":614},[609,6695,632],{"class":614},[609,6697,759],{"class":614},[609,6699,6701,6703,6705],{"class":6700,"line":727},[611,645],[609,6702,753],{"class":614},[609,6704,6582],{"class":618},[609,6706,759],{"class":614},[609,6708,6709,6711,6713,6715,6717,6719,6721,6723,6725],{"class":611,"line":750},[609,6710,753],{"class":614},[609,6712,197],{"class":618},[609,6714,785],{"class":614},[609,6716,788],{"class":622},[609,6718,629],{"class":614},[609,6720,632],{"class":614},[609,6722,796],{"class":795},[609,6724,632],{"class":614},[609,6726,641],{"class":614},[609,6728,6729,6731,6734,6736,6738,6740,6743,6745],{"class":611,"line":762},[609,6730,829],{"class":614},[609,6732,6733],{"class":618},"TresMeshToonMaterial",[609,6735,3982],{"class":622},[609,6737,629],{"class":614},[609,6739,632],{"class":614},[609,6741,6742],{"class":635},"orange",[609,6744,632],{"class":614},[609,6746,759],{"class":614},[609,6748,6749,6751,6753],{"class":611,"line":772},[609,6750,871],{"class":614},[609,6752,197],{"class":618},[609,6754,641],{"class":614},[609,6756,6757,6759,6761],{"class":611,"line":777},[609,6758,753],{"class":614},[609,6760,3522],{"class":618},[609,6762,759],{"class":614},[609,6764,6765,6767,6769,6771,6773,6775,6777,6779,6781,6783,6785,6787,6789,6791,6793],{"class":611,"line":803},[609,6766,753],{"class":614},[609,6768,3543],{"class":618},[609,6770,785],{"class":614},[609,6772,1463],{"class":622},[609,6774,629],{"class":614},[609,6776,632],{"class":614},[609,6778,1470],{"class":614},[609,6780,941],{"class":795},[609,6782,1475],{"class":614},[609,6784,796],{"class":795},[609,6786,1475],{"class":614},[609,6788,3494],{"class":795},[609,6790,1485],{"class":614},[609,6792,632],{"class":614},[609,6794,759],{"class":614},[609,6796,6797,6799,6801],{"class":611,"line":603},[609,6798,753],{"class":614},[609,6800,3071],{"class":618},[609,6802,759],{"class":614},[609,6804,6805,6807,6809],{"class":611,"line":826},[609,6806,881],{"class":614},[609,6808,733],{"class":618},[609,6810,641],{"class":614},[609,6812,6813,6815,6817],{"class":611,"line":837},[609,6814,704],{"class":614},[609,6816,722],{"class":618},[609,6818,641],{"class":614},[3729,6820,6821],{},[586,6822,6823],{},"Is really important that the Perspective camera is set first in the canvas. Otherwise might break.",[476,6825,898],{"id":897},[586,6827,6828],{},"Certainly! Here's the properties of the object in raw markdown table format:",[903,6830,6831,6841],{},[906,6832,6833],{},[909,6834,6835,6837,6839],{},[912,6836,914],{"align":973},[912,6838,917],{"align":973},[912,6840,920],{},[922,6842,6843,6857,6871,6885,6899,6913,6928,6943,6958,6973,6987,7003,7017,7031,7046,7061,7075,7090,7104,7118,7134,7149,7165,7179,7197,7212,7230,7245,7264],{},[909,6844,6845,6850,6853],{},[927,6846,6847],{"align":973},[1677,6848,6849],{},"makeDefault",[927,6851,6852],{"align":973},"Whether to make this the default controls.",[927,6854,6855],{},[590,6856,947],{},[909,6858,6859,6864,6867],{},[927,6860,6861],{"align":973},[1677,6862,6863],{},"camera",[927,6865,6866],{"align":973},"The camera to control.",[927,6868,6869],{},[590,6870,1155],{},[909,6872,6873,6878,6881],{},[927,6874,6875],{"align":973},[1677,6876,6877],{},"domElement",[927,6879,6880],{"align":973},"The DOM element to listen to.",[927,6882,6883],{},[590,6884,1155],{},[909,6886,6887,6892,6895],{},[927,6888,6889],{"align":973},[1677,6890,6891],{},"minPolarAngle",[927,6893,6894],{"align":973},"Minimum vertical angle in radians.",[927,6896,6897],{},[590,6898,941],{},[909,6900,6901,6906,6909],{},[927,6902,6903],{"align":973},[1677,6904,6905],{},"maxPolarAngle",[927,6907,6908],{"align":973},"Maximum vertical angle in radians.",[927,6910,6911],{},[590,6912,4917],{},[909,6914,6915,6920,6923],{},[927,6916,6917],{"align":973},[1677,6918,6919],{},"minAzimuthAngle",[927,6921,6922],{"align":973},"Minimum horizontal angle in radians.",[927,6924,6925],{},[590,6926,6927],{},"-Infinity",[909,6929,6930,6935,6938],{},[927,6931,6932],{"align":973},[1677,6933,6934],{},"maxAzimuthAngle",[927,6936,6937],{"align":973},"Maximum horizontal angle in radians.",[927,6939,6940],{},[590,6941,6942],{},"Infinity",[909,6944,6945,6950,6953],{},[927,6946,6947],{"align":973},[1677,6948,6949],{},"distance",[927,6951,6952],{"align":973},"Current distance.",[927,6954,6955],{},[590,6956,6957],{},"camera.position.z",[909,6959,6960,6965,6968],{},[927,6961,6962],{"align":973},[1677,6963,6964],{},"minDistance",[927,6966,6967],{"align":973},"Minimum distance for dolly. PerspectiveCamera only.",[927,6969,6970],{},[590,6971,6972],{},"Number.EPSILON",[909,6974,6975,6980,6983],{},[927,6976,6977],{"align":973},[1677,6978,6979],{},"maxDistance",[927,6981,6982],{"align":973},"Maximum distance for dolly. PerspectiveCamera only.",[927,6984,6985],{},[590,6986,6942],{},[909,6988,6989,6994,6999],{},[927,6990,6991],{"align":973},[1677,6992,6993],{},"infinityDolly",[927,6995,6996,6998],{"align":973},[590,6997,937],{}," to enable Infinity Dolly for wheel and pinch.",[927,7000,7001],{},[590,7002,947],{},[909,7004,7005,7010,7013],{},[927,7006,7007],{"align":973},[1677,7008,7009],{},"minZoom",[927,7011,7012],{"align":973},"Minimum camera zoom.",[927,7014,7015],{},[590,7016,1911],{},[909,7018,7019,7024,7027],{},[927,7020,7021],{"align":973},[1677,7022,7023],{},"maxZoom",[927,7025,7026],{"align":973},"Maximum camera zoom.",[927,7028,7029],{},[590,7030,6942],{},[909,7032,7033,7038,7041],{},[927,7034,7035],{"align":973},[1677,7036,7037],{},"smoothTime",[927,7039,7040],{"align":973},"Approximate time in seconds to reach the target. A smaller value will reach the target faster.",[927,7042,7043],{},[590,7044,7045],{},"0.25",[909,7047,7048,7053,7056],{},[927,7049,7050],{"align":973},[1677,7051,7052],{},"draggingSmoothTime",[927,7054,7055],{"align":973},"The smoothTime while dragging.",[927,7057,7058],{},[590,7059,7060],{},"0.125",[909,7062,7063,7068,7071],{},[927,7064,7065],{"align":973},[1677,7066,7067],{},"maxSpeed",[927,7069,7070],{"align":973},"Max transition speed in units per second.",[927,7072,7073],{},[590,7074,6942],{},[909,7076,7077,7082,7085],{},[927,7078,7079],{"align":973},[1677,7080,7081],{},"azimuthRotateSpeed",[927,7083,7084],{"align":973},"Speed of azimuth (horizontal) rotation.",[927,7086,7087],{},[590,7088,7089],{},"1.0",[909,7091,7092,7097,7100],{},[927,7093,7094],{"align":973},[1677,7095,7096],{},"polarRotateSpeed",[927,7098,7099],{"align":973},"Speed of polar (vertical) rotation.",[927,7101,7102],{},[590,7103,7089],{},[909,7105,7106,7111,7114],{},[927,7107,7108],{"align":973},[1677,7109,7110],{},"dollySpeed",[927,7112,7113],{"align":973},"Speed of mouse-wheel dollying.",[927,7115,7116],{},[590,7117,7089],{},[909,7119,7120,7125,7130],{},[927,7121,7122],{"align":973},[1677,7123,7124],{},"dollyDragInverted",[927,7126,7127,7129],{"align":973},[590,7128,937],{}," to invert direction when dollying or zooming via drag.",[927,7131,7132],{},[590,7133,947],{},[909,7135,7136,7141,7144],{},[927,7137,7138],{"align":973},[1677,7139,7140],{},"truckSpeed",[927,7142,7143],{"align":973},"Speed of drag for truck and pedestal.",[927,7145,7146],{},[590,7147,7148],{},"2.0",[909,7150,7151,7156,7161],{},[927,7152,7153],{"align":973},[1677,7154,7155],{},"dollyToCursor",[927,7157,7158,7160],{"align":973},[590,7159,937],{}," to enable Dolly-in to the mouse cursor coords.",[927,7162,7163],{},[590,7164,947],{},[909,7166,7167,7172,7175],{},[927,7168,7169],{"align":973},[1677,7170,7171],{},"dragToOffset",[927,7173,7174],{"align":973},"Whether to drag to offset.",[927,7176,7177],{},[590,7178,947],{},[909,7180,7181,7186,7193],{},[927,7182,7183],{"align":973},[1677,7184,7185],{},"verticalDragToForward",[927,7187,7188,7189,7192],{"align":973},"The same as ",[590,7190,7191],{},".screenSpacePanning"," in Three.js's OrbitControls.",[927,7194,7195],{},[590,7196,947],{},[909,7198,7199,7204,7207],{},[927,7200,7201],{"align":973},[1677,7202,7203],{},"boundaryFriction",[927,7205,7206],{"align":973},"Friction ratio of the boundary.",[927,7208,7209],{},[590,7210,7211],{},"0.0",[909,7213,7214,7219,7226],{},[927,7215,7216],{"align":973},[1677,7217,7218],{},"restThreshold",[927,7220,7221,7222,7225],{"align":973},"Controls how soon the ",[590,7223,7224],{},"rest"," event fires as the camera slows.",[927,7227,7228],{},[590,7229,1911],{},[909,7231,7232,7237,7240],{},[927,7233,7234],{"align":973},[1677,7235,7236],{},"colliderMeshes",[927,7238,7239],{"align":973},"An array of Meshes to collide with the camera. Be aware colliderMeshes may decrease performance. The collision test uses 4 raycasters from the camera since the near plane has 4 corners.",[927,7241,7242],{},[590,7243,7244],{},"[]",[909,7246,7247,7252,7255],{},[927,7248,7249],{"align":973},[1677,7250,7251],{},"mouseButtons",[927,7253,7254],{"align":973},"Configuration of actions on mouse input.",[927,7256,1114,7257,7263],{},[1116,7258,7260],{"href":7259},"#user-input-config",[590,7261,7262],{},"User input config"," for details",[909,7265,7266,7271,7274],{},[927,7267,7268],{"align":973},[1677,7269,7270],{},"touches",[927,7272,7273],{"align":973},"Configuration of actions on touch.",[927,7275,1114,7276,7263],{},[1116,7277,7278],{"href":7259},[590,7279,7262],{},[476,7281,7262],{"id":7282},"user-input-config",[586,7284,7285,7286,7288,7289,7291,7292,7300,7301,7303,7304,7307,7308,7311],{},"You can easily override the default user input config by defining ",[590,7287,7251],{}," and/or ",[590,7290,7270],{}," props that correspond to ",[1116,7293,7296,7299],{"href":7294,"rel":7295},"https://github.com/yomotsu/camera-controls?#user-input-config",[1120],[590,7297,7298],{},"camera-controls"," settings",". For ease of use, we're re-exporting the ",[590,7302,6582],{}," class as ",[590,7305,7306],{},"BaseCameraControls"," which gives you access to the ",[590,7309,7310],{},"ACTION"," enum.",[598,7313,7315],{"className":600,"code":7314,"language":605,"meta":548,"style":548},"\u003Cscript lang=\"ts\" setup>\nimport { BaseCameraControls, CameraControls } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  ...\n  \u003CCameraControls\n    :mouse-buttons=\"{ left: BaseCameraControls.ACTION.DOLLY }\"\n    :touches=\"{ one: BaseCameraControls.ACTION.TOUCH_TRUCK }\"\n  />\n  ...\n\u003C/template>\n",[590,7316,7317,7337,7360,7368,7372,7380,7385,7392,7427,7459,7464,7468],{"__ignoreMap":548},[609,7318,7319,7321,7323,7325,7327,7329,7331,7333,7335],{"class":611,"line":549},[609,7320,615],{"class":614},[609,7322,619],{"class":618},[609,7324,626],{"class":622},[609,7326,629],{"class":614},[609,7328,632],{"class":614},[609,7330,636],{"class":635},[609,7332,632],{"class":614},[609,7334,623],{"class":622},[609,7336,641],{"class":614},[609,7338,7339,7341,7343,7346,7348,7350,7352,7354,7356,7358],{"class":611,"line":550},[609,7340,649],{"class":648},[609,7342,652],{"class":614},[609,7344,7345],{"class":655}," BaseCameraControls",[609,7347,659],{"class":614},[609,7349,6621],{"class":655},[609,7351,665],{"class":614},[609,7353,668],{"class":648},[609,7355,671],{"class":614},[609,7357,674],{"class":635},[609,7359,677],{"class":614},[609,7361,7362,7364,7366],{"class":611,"line":680},[609,7363,704],{"class":614},[609,7365,619],{"class":618},[609,7367,641],{"class":614},[609,7369,7370],{"class":611,"line":701},[609,7371,714],{"emptyLinePlaceholder":566},[609,7373,7374,7376,7378],{"class":611,"line":711},[609,7375,615],{"class":614},[609,7377,722],{"class":618},[609,7379,641],{"class":614},[609,7381,7382],{"class":611,"line":717},[609,7383,7384],{"class":655},"  ...\n",[609,7386,7387,7389],{"class":611,"line":727},[609,7388,730],{"class":614},[609,7390,7391],{"class":618},"CameraControls\n",[609,7393,7394,7397,7400,7402,7404,7407,7409,7412,7414,7416,7418,7420,7423,7425],{"class":611,"line":750},[609,7395,7396],{"class":614},"    :",[609,7398,7399],{"class":622},"mouse-buttons",[609,7401,629],{"class":614},[609,7403,632],{"class":614},[609,7405,7406],{"class":614},"{ ",[609,7408,973],{"class":618},[609,7410,7411],{"class":614},": ",[609,7413,7306],{"class":655},[609,7415,1122],{"class":614},[609,7417,7310],{"class":655},[609,7419,1122],{"class":614},[609,7421,7422],{"class":655},"DOLLY",[609,7424,665],{"class":614},[609,7426,2991],{"class":614},[609,7428,7429,7431,7433,7435,7437,7439,7442,7444,7446,7448,7450,7452,7455,7457],{"class":611,"line":762},[609,7430,7396],{"class":614},[609,7432,7270],{"class":622},[609,7434,629],{"class":614},[609,7436,632],{"class":614},[609,7438,7406],{"class":614},[609,7440,7441],{"class":618},"one",[609,7443,7411],{"class":614},[609,7445,7306],{"class":655},[609,7447,1122],{"class":614},[609,7449,7310],{"class":655},[609,7451,1122],{"class":614},[609,7453,7454],{"class":655},"TOUCH_TRUCK",[609,7456,665],{"class":614},[609,7458,2991],{"class":614},[609,7460,7461],{"class":611,"line":772},[609,7462,7463],{"class":614},"  />\n",[609,7465,7466],{"class":611,"line":777},[609,7467,7384],{"class":655},[609,7469,7470,7472,7474],{"class":611,"line":803},[609,7471,704],{"class":614},[609,7473,722],{"class":618},[609,7475,641],{"class":614},[7477,7478,7479],"h3",{"id":7399},"Mouse buttons",[903,7481,7482,7494],{},[906,7483,7484],{},[909,7485,7486,7489,7492],{},[912,7487,7488],{},"Button to assign",[912,7490,7491],{},"Options",[912,7493,920],{},[922,7495,7496,7527,7552,7582],{},[909,7497,7498,7503,7523],{},[927,7499,7500],{},[590,7501,7502],{},"mouseButtons.left",[927,7504,7505,7508,7509,7508,7512,7508,7515,7508,7517,7508,7520],{},[590,7506,7507],{},"ROTATE"," | ",[590,7510,7511],{},"TRUCK",[590,7513,7514],{},"OFFSET",[590,7516,7422],{},[590,7518,7519],{},"ZOOM",[590,7521,7522],{},"NONE",[927,7524,7525],{},[590,7526,7507],{},[909,7528,7529,7534,7548],{},[927,7530,7531],{},[590,7532,7533],{},"mouseButtons.right",[927,7535,7536,7508,7538,7508,7540,7508,7542,7508,7544,7508,7546],{},[590,7537,7507],{},[590,7539,7511],{},[590,7541,7514],{},[590,7543,7422],{},[590,7545,7519],{},[590,7547,7522],{},[927,7549,7550],{},[590,7551,7511],{},[909,7553,7554,7560,7574],{},[927,7555,7556,7559],{},[590,7557,7558],{},"mouseButtons.wheel"," ¹",[927,7561,7562,7508,7564,7508,7566,7508,7568,7508,7570,7508,7572],{},[590,7563,7507],{},[590,7565,7511],{},[590,7567,7514],{},[590,7569,7422],{},[590,7571,7519],{},[590,7573,7522],{},[927,7575,7576,7578,7579,7581],{},[590,7577,7422],{}," for Perspective camera, ",[590,7580,7519],{}," for Orthographic camera.",[909,7583,7584,7590,7604],{},[927,7585,7586,7589],{},[590,7587,7588],{},"mouseButtons.middle"," ²",[927,7591,7592,7508,7594,7508,7596,7508,7598,7508,7600,7508,7602],{},[590,7593,7507],{},[590,7595,7511],{},[590,7597,7514],{},[590,7599,7422],{},[590,7601,7519],{},[590,7603,7522],{},[927,7605,7606],{},[590,7607,7422],{},[7609,7610,7611,7614],"ol",{},[3143,7612,7613],{},"Mouse wheel event for scroll \"up/down\", on mac \"up/down/left/right\".",[3143,7615,7616],{},"Mouse wheel \"button\" click event.",[7477,7618,7619],{"id":7270},"Touches",[903,7621,7622,7633],{},[906,7623,7624],{},[909,7625,7626,7629,7631],{},[912,7627,7628],{},"Fingers to assign",[912,7630,7491],{},[912,7632,920],{},[922,7634,7635,7662,7710],{},[909,7636,7637,7642,7658],{},[927,7638,7639],{},[590,7640,7641],{},"touches.one",[927,7643,7644,7508,7647,7508,7649,7508,7652,7508,7654,7508,7656],{},[590,7645,7646],{},"TOUCH_ROTATE",[590,7648,7454],{},[590,7650,7651],{},"TOUCH_OFFSET",[590,7653,7422],{},[590,7655,7519],{},[590,7657,7522],{},[927,7659,7660],{},[590,7661,7646],{},[909,7663,7664,7669,7703],{},[927,7665,7666],{},[590,7667,7668],{},"touches.two",[927,7670,7671,7508,7674,7508,7677,7508,7680,7508,7683,7508,7686,7508,7689,7508,7692,7508,7695,7508,7697,7508,7699,7508,7701],{},[590,7672,7673],{},"TOUCH_DOLLY_TRUCK",[590,7675,7676],{},"TOUCH_DOLLY_OFFSET",[590,7678,7679],{},"TOUCH_DOLLY_ROTATE",[590,7681,7682],{},"TOUCH_ZOOM_TRUCK",[590,7684,7685],{},"TOUCH_ZOOM_OFFSET",[590,7687,7688],{},"TOUCH_ZOOM_ROTATE",[590,7690,7691],{},"TOUCH_DOLLY",[590,7693,7694],{},"TOUCH_ZOOM",[590,7696,7646],{},[590,7698,7454],{},[590,7700,7651],{},[590,7702,7522],{},[927,7704,7705,7578,7707,7709],{},[590,7706,7673],{},[590,7708,7682],{}," for Othographic camera.",[909,7711,7712,7717,7739],{},[927,7713,7714],{},[590,7715,7716],{},"touches.three",[927,7718,7719,7508,7721,7508,7723,7508,7725,7508,7727,7508,7729,7508,7731,7508,7733,7508,7735,7508,7737],{},[590,7720,7673],{},[590,7722,7676],{},[590,7724,7679],{},[590,7726,7682],{},[590,7728,7685],{},[590,7730,7688],{},[590,7732,7646],{},[590,7734,7454],{},[590,7736,7651],{},[590,7738,7522],{},[927,7740,7741],{},[590,7742,7454],{},[476,7744,7746],{"id":7745},"events","Events",[598,7748,7750],{"className":600,"code":7749,"language":605,"meta":548,"style":548},"\u003CCameraControls @change=\"onChange\" @start=\"onStart\" @end=\"onEnd\" />\n",[590,7751,7752],{"__ignoreMap":548},[609,7753,7754,7756,7758,7761,7764,7766,7768,7771,7773,7775,7778,7780,7782,7785,7787,7789,7792,7794,7796,7799,7801],{"class":611,"line":549},[609,7755,615],{"class":614},[609,7757,6582],{"class":618},[609,7759,7760],{"class":614}," @",[609,7762,7763],{"class":622},"change",[609,7765,629],{"class":614},[609,7767,632],{"class":614},[609,7769,7770],{"class":655},"onChange",[609,7772,632],{"class":614},[609,7774,7760],{"class":614},[609,7776,7777],{"class":622},"start",[609,7779,629],{"class":614},[609,7781,632],{"class":614},[609,7783,7784],{"class":655},"onStart",[609,7786,632],{"class":614},[609,7788,7760],{"class":614},[609,7790,7791],{"class":622},"end",[609,7793,629],{"class":614},[609,7795,632],{"class":614},[609,7797,7798],{"class":655},"onEnd",[609,7800,632],{"class":614},[609,7802,759],{"class":614},[903,7804,7805,7814],{},[906,7806,7807],{},[909,7808,7809,7812],{},[912,7810,7811],{"align":973},"Event",[912,7813,917],{"align":973},[922,7815,7816,7825,7834],{},[909,7817,7818,7822],{},[927,7819,7820],{"align":973},[1677,7821,7777],{},[927,7823,7824],{"align":973},"Dispatched when the control starts to change.",[909,7826,7827,7831],{},[927,7828,7829],{"align":973},[1677,7830,7763],{},[927,7832,7833],{"align":973},"Dispatched when the control changes.",[909,7835,7836,7840],{},[927,7837,7838],{"align":973},[1677,7839,7791],{},[927,7841,7842],{"align":973},"Dispatched when the control ends to change.",[1303,7844,7845],{},"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 .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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":548,"searchDepth":549,"depth":550,"links":7847},[7848,7849,7850,7854],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},{"id":7282,"depth":550,"text":7262,"children":7851},[7852,7853],{"id":7399,"depth":680,"text":7479},{"id":7270,"depth":680,"text":7619},{"id":7745,"depth":550,"text":7746},"Is similar to OrbitControls yet supports smooth transitions and more features.",{},{"title":87,"description":7855},"Er67NB_D9l-p90cx_F8Ueo3oYf_90DhOHx1q_8YgH3g",{"id":7860,"title":91,"body":7861,"description":8807,"extension":563,"links":564,"meta":8808,"navigation":566,"path":92,"seo":8809,"stem":93,"__hash__":8810},"docs/2.api/2.controls/drag-controls.md",{"type":473,"value":7862,"toc":8799},[7863,7870,7875,7877,7885,8126,8144,8146,8267,8269,8355,8359,8363,8370,8796],[586,7864,2257,7865,7869],{},[1116,7866,91],{"href":7867,"rel":7868},"https://threejs.org/docs/#examples/en/controls/DragControls",[1120]," allow you to drag and move 3D objects in your scene using pointer events. You can optionally lock movement to a single axis, set drag limits per axis, and listen to drag lifecycle events.",[580,7871,7872],{},[7873,7874],"controls-drag-controls",{},[476,7876,15],{"id":596},[586,7878,2257,7879,7881,7882,7884],{},[590,7880,535],{}," prop accepts an array of ",[590,7883,2582],{}," instances. You can pass template refs directly — Vue will unwrap them automatically.",[598,7886,7889],{"className":600,"code":7887,"highlights":7888,"language":605,"meta":548,"style":548},"\u003Cscript setup>\nimport { shallowRef } from 'vue'\nimport { DragControls } from '@tresjs/cientos'\n\nconst boxRef = shallowRef()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 7.5, 7.5]\" :look-at=\"[0, 0, 0]\" />\n    \u003CDragControls :objects=\"[boxRef]\" />\n    \u003CTresMesh ref=\"boxRef\">\n      \u003CTresBoxGeometry />\n      \u003CTresMeshStandardMaterial />\n    \u003C/TresMesh>\n  \u003C/TresCanvas>\n\u003C/template>\n",[680],[590,7890,7891,7901,7920,7940,7944,7957,7965,7969,7977,7985,8041,8067,8085,8093,8102,8110,8118],{"__ignoreMap":548},[609,7892,7893,7895,7897,7899],{"class":611,"line":549},[609,7894,615],{"class":614},[609,7896,619],{"class":618},[609,7898,623],{"class":622},[609,7900,641],{"class":614},[609,7902,7903,7905,7907,7910,7912,7914,7916,7918],{"class":611,"line":550},[609,7904,649],{"class":648},[609,7906,652],{"class":614},[609,7908,7909],{"class":655}," shallowRef",[609,7911,665],{"class":614},[609,7913,668],{"class":648},[609,7915,671],{"class":614},[609,7917,605],{"class":635},[609,7919,677],{"class":614},[609,7921,7923,7925,7927,7930,7932,7934,7936,7938],{"class":7922,"line":680},[611,645],[609,7924,649],{"class":648},[609,7926,652],{"class":614},[609,7928,7929],{"class":655}," DragControls",[609,7931,665],{"class":614},[609,7933,668],{"class":648},[609,7935,671],{"class":614},[609,7937,674],{"class":635},[609,7939,677],{"class":614},[609,7941,7942],{"class":611,"line":701},[609,7943,714],{"emptyLinePlaceholder":566},[609,7945,7946,7948,7951,7953,7955],{"class":611,"line":711},[609,7947,2693],{"class":622},[609,7949,7950],{"class":655}," boxRef ",[609,7952,629],{"class":614},[609,7954,7909],{"class":2804},[609,7956,2850],{"class":655},[609,7958,7959,7961,7963],{"class":611,"line":717},[609,7960,704],{"class":614},[609,7962,619],{"class":618},[609,7964,641],{"class":614},[609,7966,7967],{"class":611,"line":727},[609,7968,714],{"emptyLinePlaceholder":566},[609,7970,7971,7973,7975],{"class":611,"line":750},[609,7972,615],{"class":614},[609,7974,722],{"class":618},[609,7976,641],{"class":614},[609,7978,7979,7981,7983],{"class":611,"line":762},[609,7980,730],{"class":614},[609,7982,733],{"class":618},[609,7984,641],{"class":614},[609,7986,7987,7989,7991,7993,7995,7997,7999,8001,8003,8005,8007,8009,8011,8013,8015,8017,8019,8021,8023,8025,8027,8029,8031,8033,8035,8037,8039],{"class":611,"line":772},[609,7988,753],{"class":614},[609,7990,756],{"class":618},[609,7992,785],{"class":614},[609,7994,1463],{"class":622},[609,7996,629],{"class":614},[609,7998,632],{"class":614},[609,8000,1470],{"class":614},[609,8002,941],{"class":795},[609,8004,1475],{"class":614},[609,8006,4689],{"class":795},[609,8008,1475],{"class":614},[609,8010,4689],{"class":795},[609,8012,1485],{"class":614},[609,8014,632],{"class":614},[609,8016,785],{"class":614},[609,8018,3444],{"class":622},[609,8020,629],{"class":614},[609,8022,632],{"class":614},[609,8024,1470],{"class":614},[609,8026,941],{"class":795},[609,8028,1475],{"class":614},[609,8030,941],{"class":795},[609,8032,1475],{"class":614},[609,8034,941],{"class":795},[609,8036,1485],{"class":614},[609,8038,632],{"class":614},[609,8040,759],{"class":614},[609,8042,8043,8045,8048,8050,8052,8054,8056,8058,8061,8063,8065],{"class":611,"line":777},[609,8044,753],{"class":614},[609,8046,8047],{"class":618},"DragControls",[609,8049,785],{"class":614},[609,8051,535],{"class":622},[609,8053,629],{"class":614},[609,8055,632],{"class":614},[609,8057,1470],{"class":614},[609,8059,8060],{"class":655},"boxRef",[609,8062,1485],{"class":614},[609,8064,632],{"class":614},[609,8066,759],{"class":614},[609,8068,8069,8071,8073,8075,8077,8079,8081,8083],{"class":611,"line":803},[609,8070,753],{"class":614},[609,8072,832],{"class":618},[609,8074,5435],{"class":622},[609,8076,629],{"class":614},[609,8078,632],{"class":614},[609,8080,8060],{"class":635},[609,8082,632],{"class":614},[609,8084,641],{"class":614},[609,8086,8087,8089,8091],{"class":611,"line":603},[609,8088,829],{"class":614},[609,8090,843],{"class":618},[609,8092,759],{"class":614},[609,8094,8095,8097,8100],{"class":611,"line":826},[609,8096,829],{"class":614},[609,8098,8099],{"class":618},"TresMeshStandardMaterial",[609,8101,759],{"class":614},[609,8103,8104,8106,8108],{"class":611,"line":837},[609,8105,871],{"class":614},[609,8107,832],{"class":618},[609,8109,641],{"class":614},[609,8111,8112,8114,8116],{"class":611,"line":848},[609,8113,881],{"class":614},[609,8115,733],{"class":618},[609,8117,641],{"class":614},[609,8119,8120,8122,8124],{"class":611,"line":858},[609,8121,704],{"class":614},[609,8123,722],{"class":618},[609,8125,641],{"class":614},[3729,8127,8128],{},[586,8129,8130,8131,8137,8138,8140,8141,8143],{},"If you are using ",[609,8132,8134],{"style":8133},"background-color:#222;padding:0.25rem;border-radius:4px;",[1116,8135,767],{"href":104,"style":8136},"color:#f7f7f7;text-decoration:none"," alongside DragControls, they will interfere with each other. Set ",[590,8139,2071],{}," on ",[1677,8142,767],{}," to prevent conflicts while dragging.",[476,8145,898],{"id":897},[903,8147,8148,8158],{},[906,8149,8150],{},[909,8151,8152,8154,8156],{},[912,8153,914],{"align":973},[912,8155,917],{"align":973},[912,8157,920],{},[922,8159,8160,8178,8191,8207,8233,8254],{},[909,8161,8162,8166,8174],{},[927,8163,8164],{"align":973},[1677,8165,535],{},[927,8167,8168,8169,8173],{"align":973},"Array of ",[1116,8170,2582],{"href":8171,"rel":8172},"https://threejs.org/docs/index.html#api/en/core/Object3D",[1120]," instances to make draggable.",[927,8175,8176],{},[590,8177,7244],{},[909,8179,8180,8184,8187],{},[927,8181,8182],{"align":973},[1677,8183,6863],{},[927,8185,8186],{"align":973},"The camera used for raycasting. Defaults to the scene's active camera.",[927,8188,8189],{},[590,8190,1155],{},[909,8192,8193,8198,8203],{},[927,8194,8195],{"align":973},[1677,8196,8197],{},"enabled",[927,8199,934,8200,8202],{"align":973},[590,8201,947],{},", dragging is disabled and the object snaps back to its position on each drag event.",[927,8204,8205],{},[590,8206,937],{},[909,8208,8209,8214,8229],{},[927,8210,8211],{"align":973},[1677,8212,8213],{},"lock",[927,8215,8216,8217,1475,8220,1475,8223,1709,8226,1122],{"align":973},"Locks movement along one axis. Can be ",[590,8218,8219],{},"'x'",[590,8221,8222],{},"'y'",[590,8224,8225],{},"'z'",[590,8227,8228],{},"'none'",[927,8230,8231],{},[590,8232,8228],{},[909,8234,8235,8240,8250],{},[927,8236,8237],{"align":973},[1677,8238,8239],{},"dragLimits",[927,8241,8242,8243,8246,8247,8249],{"align":973},"Per-axis position limits as ",[590,8244,8245],{},"[[xMin, xMax], [yMin, yMax] | undefined, [zMin, zMax] | undefined]",". Pass ",[590,8248,1155],{}," for axes with no limit.",[927,8251,8252],{},[590,8253,1155],{},[909,8255,8256,8260,8263],{},[927,8257,8258],{"align":973},[1677,8259,6877],{},[927,8261,8262],{"align":973},"The DOM element that listens for pointer events.",[927,8264,8265],{},[590,8266,1155],{},[476,8268,7746],{"id":7745},[903,8270,8271,8282],{},[906,8272,8273],{},[909,8274,8275,8277,8279],{},[912,8276,7811],{"align":973},[912,8278,917],{"align":973},[912,8280,8281],{"align":973},"Payload",[922,8283,8284,8299,8313,8327,8341],{},[909,8285,8286,8291,8294],{},[927,8287,8288],{"align":973},[1677,8289,8290],{},"dragstart",[927,8292,8293],{"align":973},"Fired when the user starts dragging an object.",[927,8295,8296],{"align":973},[590,8297,8298],{},"ThreeDragControls",[909,8300,8301,8306,8309],{},[927,8302,8303],{"align":973},[1677,8304,8305],{},"drag",[927,8307,8308],{"align":973},"Fired every frame while an object is being dragged.",[927,8310,8311],{"align":973},[590,8312,8298],{},[909,8314,8315,8320,8323],{},[927,8316,8317],{"align":973},[1677,8318,8319],{},"dragend",[927,8321,8322],{"align":973},"Fired when the user releases a dragged object.",[927,8324,8325],{"align":973},[590,8326,8298],{},[909,8328,8329,8334,8337],{},[927,8330,8331],{"align":973},[1677,8332,8333],{},"hoveron",[927,8335,8336],{"align":973},"Fired when the pointer moves over a draggable object.",[927,8338,8339],{"align":973},[590,8340,8298],{},[909,8342,8343,8348,8351],{},[927,8344,8345],{"align":973},[1677,8346,8347],{},"hoveroff",[927,8349,8350],{"align":973},"Fired when the pointer leaves a draggable object.",[927,8352,8353],{"align":973},[590,8354,8298],{},[476,8356,8358],{"id":8357},"tip","Tip",[7477,8360,8362],{"id":8361},"grid-snapping","Grid snapping",[586,8364,8365,8366,8369],{},"There is no built-in snap prop, but you can implement snapping in the ",[590,8367,8368],{},"@drag"," event handler by rounding the object's position to the desired interval:",[598,8371,8373],{"className":600,"code":8372,"language":605,"meta":548,"style":548},"\u003Cscript setup>\nimport { shallowRef } from 'vue'\nimport { DragControls } from '@tresjs/cientos'\n\nconst boxRef = shallowRef()\n\nfunction onDrag() {\n  if (!boxRef.value) { return }\n  const snap = 0.5\n  boxRef.value.position.x = Math.round(boxRef.value.position.x / snap) * snap\n  boxRef.value.position.z = Math.round(boxRef.value.position.z / snap) * snap\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 7.5, 7.5]\" :look-at=\"[0, 0, 0]\" />\n    \u003CDragControls :objects=\"[boxRef]\" lock=\"y\" @drag=\"onDrag\" />\n    \u003CTresMesh ref=\"boxRef\">\n      \u003CTresBoxGeometry />\n      \u003CTresMeshStandardMaterial />\n    \u003C/TresMesh>\n  \u003C/TresCanvas>\n\u003C/template>\n",[590,8374,8375,8385,8403,8421,8425,8437,8441,8454,8481,8494,8550,8601,8605,8613,8617,8625,8633,8689,8738,8756,8764,8772,8780,8788],{"__ignoreMap":548},[609,8376,8377,8379,8381,8383],{"class":611,"line":549},[609,8378,615],{"class":614},[609,8380,619],{"class":618},[609,8382,623],{"class":622},[609,8384,641],{"class":614},[609,8386,8387,8389,8391,8393,8395,8397,8399,8401],{"class":611,"line":550},[609,8388,649],{"class":648},[609,8390,652],{"class":614},[609,8392,7909],{"class":655},[609,8394,665],{"class":614},[609,8396,668],{"class":648},[609,8398,671],{"class":614},[609,8400,605],{"class":635},[609,8402,677],{"class":614},[609,8404,8405,8407,8409,8411,8413,8415,8417,8419],{"class":611,"line":680},[609,8406,649],{"class":648},[609,8408,652],{"class":614},[609,8410,7929],{"class":655},[609,8412,665],{"class":614},[609,8414,668],{"class":648},[609,8416,671],{"class":614},[609,8418,674],{"class":635},[609,8420,677],{"class":614},[609,8422,8423],{"class":611,"line":701},[609,8424,714],{"emptyLinePlaceholder":566},[609,8426,8427,8429,8431,8433,8435],{"class":611,"line":711},[609,8428,2693],{"class":622},[609,8430,7950],{"class":655},[609,8432,629],{"class":614},[609,8434,7909],{"class":2804},[609,8436,2850],{"class":655},[609,8438,8439],{"class":611,"line":717},[609,8440,714],{"emptyLinePlaceholder":566},[609,8442,8443,8446,8449,8452],{"class":611,"line":727},[609,8444,8445],{"class":622},"function",[609,8447,8448],{"class":2804}," onDrag",[609,8450,8451],{"class":614},"()",[609,8453,1180],{"class":614},[609,8455,8456,8459,8461,8464,8466,8468,8470,8472,8475,8478],{"class":611,"line":750},[609,8457,8458],{"class":648},"  if",[609,8460,2717],{"class":618},[609,8462,8463],{"class":614},"!",[609,8465,8060],{"class":655},[609,8467,1122],{"class":614},[609,8469,5500],{"class":655},[609,8471,2752],{"class":618},[609,8473,8474],{"class":614},"{",[609,8476,8477],{"class":648}," return",[609,8479,8480],{"class":614}," }\n",[609,8482,8483,8486,8489,8491],{"class":611,"line":762},[609,8484,8485],{"class":622},"  const",[609,8487,8488],{"class":655}," snap",[609,8490,2770],{"class":614},[609,8492,8493],{"class":795}," 0.5\n",[609,8495,8496,8499,8501,8503,8505,8507,8509,8511,8513,8516,8518,8521,8523,8525,8527,8529,8531,8533,8535,8537,8540,8542,8544,8547],{"class":611,"line":772},[609,8497,8498],{"class":655},"  boxRef",[609,8500,1122],{"class":614},[609,8502,5500],{"class":655},[609,8504,1122],{"class":614},[609,8506,1463],{"class":655},[609,8508,1122],{"class":614},[609,8510,2811],{"class":655},[609,8512,2770],{"class":614},[609,8514,8515],{"class":655}," Math",[609,8517,1122],{"class":614},[609,8519,8520],{"class":2804},"round",[609,8522,2974],{"class":618},[609,8524,8060],{"class":655},[609,8526,1122],{"class":614},[609,8528,5500],{"class":655},[609,8530,1122],{"class":614},[609,8532,1463],{"class":655},[609,8534,1122],{"class":614},[609,8536,2811],{"class":655},[609,8538,8539],{"class":614}," /",[609,8541,8488],{"class":655},[609,8543,2752],{"class":618},[609,8545,8546],{"class":614},"*",[609,8548,8549],{"class":655}," snap\n",[609,8551,8552,8554,8556,8558,8560,8562,8564,8567,8569,8571,8573,8575,8577,8579,8581,8583,8585,8587,8589,8591,8593,8595,8597,8599],{"class":611,"line":777},[609,8553,8498],{"class":655},[609,8555,1122],{"class":614},[609,8557,5500],{"class":655},[609,8559,1122],{"class":614},[609,8561,1463],{"class":655},[609,8563,1122],{"class":614},[609,8565,8566],{"class":655},"z",[609,8568,2770],{"class":614},[609,8570,8515],{"class":655},[609,8572,1122],{"class":614},[609,8574,8520],{"class":2804},[609,8576,2974],{"class":618},[609,8578,8060],{"class":655},[609,8580,1122],{"class":614},[609,8582,5500],{"class":655},[609,8584,1122],{"class":614},[609,8586,1463],{"class":655},[609,8588,1122],{"class":614},[609,8590,8566],{"class":655},[609,8592,8539],{"class":614},[609,8594,8488],{"class":655},[609,8596,2752],{"class":618},[609,8598,8546],{"class":614},[609,8600,8549],{"class":655},[609,8602,8603],{"class":611,"line":803},[609,8604,1301],{"class":614},[609,8606,8607,8609,8611],{"class":611,"line":603},[609,8608,704],{"class":614},[609,8610,619],{"class":618},[609,8612,641],{"class":614},[609,8614,8615],{"class":611,"line":826},[609,8616,714],{"emptyLinePlaceholder":566},[609,8618,8619,8621,8623],{"class":611,"line":837},[609,8620,615],{"class":614},[609,8622,722],{"class":618},[609,8624,641],{"class":614},[609,8626,8627,8629,8631],{"class":611,"line":848},[609,8628,730],{"class":614},[609,8630,733],{"class":618},[609,8632,641],{"class":614},[609,8634,8635,8637,8639,8641,8643,8645,8647,8649,8651,8653,8655,8657,8659,8661,8663,8665,8667,8669,8671,8673,8675,8677,8679,8681,8683,8685,8687],{"class":611,"line":858},[609,8636,753],{"class":614},[609,8638,756],{"class":618},[609,8640,785],{"class":614},[609,8642,1463],{"class":622},[609,8644,629],{"class":614},[609,8646,632],{"class":614},[609,8648,1470],{"class":614},[609,8650,941],{"class":795},[609,8652,1475],{"class":614},[609,8654,4689],{"class":795},[609,8656,1475],{"class":614},[609,8658,4689],{"class":795},[609,8660,1485],{"class":614},[609,8662,632],{"class":614},[609,8664,785],{"class":614},[609,8666,3444],{"class":622},[609,8668,629],{"class":614},[609,8670,632],{"class":614},[609,8672,1470],{"class":614},[609,8674,941],{"class":795},[609,8676,1475],{"class":614},[609,8678,941],{"class":795},[609,8680,1475],{"class":614},[609,8682,941],{"class":795},[609,8684,1485],{"class":614},[609,8686,632],{"class":614},[609,8688,759],{"class":614},[609,8690,8691,8693,8695,8697,8699,8701,8703,8705,8707,8709,8711,8714,8716,8718,8721,8723,8725,8727,8729,8731,8734,8736],{"class":611,"line":604},[609,8692,753],{"class":614},[609,8694,8047],{"class":618},[609,8696,785],{"class":614},[609,8698,535],{"class":622},[609,8700,629],{"class":614},[609,8702,632],{"class":614},[609,8704,1470],{"class":614},[609,8706,8060],{"class":655},[609,8708,1485],{"class":614},[609,8710,632],{"class":614},[609,8712,8713],{"class":622}," lock",[609,8715,629],{"class":614},[609,8717,632],{"class":614},[609,8719,8720],{"class":635},"y",[609,8722,632],{"class":614},[609,8724,7760],{"class":614},[609,8726,8305],{"class":622},[609,8728,629],{"class":614},[609,8730,632],{"class":614},[609,8732,8733],{"class":655},"onDrag",[609,8735,632],{"class":614},[609,8737,759],{"class":614},[609,8739,8740,8742,8744,8746,8748,8750,8752,8754],{"class":611,"line":878},[609,8741,753],{"class":614},[609,8743,832],{"class":618},[609,8745,5435],{"class":622},[609,8747,629],{"class":614},[609,8749,632],{"class":614},[609,8751,8060],{"class":635},[609,8753,632],{"class":614},[609,8755,641],{"class":614},[609,8757,8758,8760,8762],{"class":611,"line":888},[609,8759,829],{"class":614},[609,8761,843],{"class":618},[609,8763,759],{"class":614},[609,8765,8766,8768,8770],{"class":611,"line":2956},[609,8767,829],{"class":614},[609,8769,8099],{"class":618},[609,8771,759],{"class":614},[609,8773,8774,8776,8778],{"class":611,"line":2964},[609,8775,871],{"class":614},[609,8777,832],{"class":618},[609,8779,641],{"class":614},[609,8781,8782,8784,8786],{"class":611,"line":2994},[609,8783,881],{"class":614},[609,8785,733],{"class":618},[609,8787,641],{"class":614},[609,8789,8790,8792,8794],{"class":611,"line":3011},[609,8791,704],{"class":614},[609,8793,722],{"class":618},[609,8795,641],{"class":614},[1303,8797,8798],{},"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 .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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .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":548,"searchDepth":549,"depth":550,"links":8800},[8801,8802,8803,8804],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},{"id":7745,"depth":550,"text":7746},{"id":8357,"depth":550,"text":8358,"children":8805},[8806],{"id":8361,"depth":680,"text":8362},"Drag and drop 3D objects in your scene with pointer events",{},{"title":91,"description":8807},"2YxxXzKJu1_5kZGn6XdE3ytdSIwn16e75priishcGeA",{"id":8812,"title":95,"body":8813,"description":8830,"extension":563,"links":564,"meta":9192,"navigation":566,"path":96,"seo":9193,"stem":97,"__hash__":9194},"docs/2.api/2.controls/keyboard-controls.md",{"type":473,"value":8814,"toc":9187},[8815,8820,8826,8834,8850,8852,9009,9013,9015,9095,9097,9148,9184],[580,8816,8817],{},[8818,8819],"controls-keyboard-controls",{},[586,8821,8822,8825],{},[590,8823,8824],{},"\u003CKeyboardControls />"," is a simple keyboard controller for the camera. The camera's movements are bound to:",[3140,8827,8828,8831],{},[3143,8829,8830],{},"WASD on QWERTY keyboards or equivalent keys on non-QWERTY keyboards",[3143,8832,8833],{},"Arrow keys",[2050,8835,8836],{},[586,8837,8838,8841,8842,8845,8846,1122],{},[590,8839,8840],{},"KeyboardControls"," uses ",[590,8843,8844],{},"PointerLockControls"," under the hood. You can use ",[1116,8847,8849],{"href":8848},"pointer-lock-controls#props","PointerLockControls props and events",[476,8851,15],{"id":596},[598,8853,8856],{"className":600,"code":8854,"highlights":8855,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { KeyboardControls, Box } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera />\n    \u003CBox :position-y=\"0.5\" />\n    \u003CKeyboardControls />\n    \u003CTresGridHelper />\n  \u003C/TresCanvas>\n\u003C/template>\n",[680,772],[590,8857,8858,8878,8896,8920,8928,8932,8940,8948,8956,8976,8985,8993,9001],{"__ignoreMap":548},[609,8859,8860,8862,8864,8866,8868,8870,8872,8874,8876],{"class":611,"line":549},[609,8861,615],{"class":614},[609,8863,619],{"class":618},[609,8865,623],{"class":622},[609,8867,626],{"class":622},[609,8869,629],{"class":614},[609,8871,632],{"class":614},[609,8873,636],{"class":635},[609,8875,632],{"class":614},[609,8877,641],{"class":614},[609,8879,8880,8882,8884,8886,8888,8890,8892,8894],{"class":611,"line":550},[609,8881,649],{"class":648},[609,8883,652],{"class":614},[609,8885,687],{"class":655},[609,8887,665],{"class":614},[609,8889,668],{"class":648},[609,8891,671],{"class":614},[609,8893,696],{"class":635},[609,8895,677],{"class":614},[609,8897,8899,8901,8903,8906,8908,8910,8912,8914,8916,8918],{"class":8898,"line":680},[611,645],[609,8900,649],{"class":648},[609,8902,652],{"class":614},[609,8904,8905],{"class":655}," KeyboardControls",[609,8907,659],{"class":614},[609,8909,1373],{"class":655},[609,8911,665],{"class":614},[609,8913,668],{"class":648},[609,8915,671],{"class":614},[609,8917,674],{"class":635},[609,8919,677],{"class":614},[609,8921,8922,8924,8926],{"class":611,"line":701},[609,8923,704],{"class":614},[609,8925,619],{"class":618},[609,8927,641],{"class":614},[609,8929,8930],{"class":611,"line":711},[609,8931,714],{"emptyLinePlaceholder":566},[609,8933,8934,8936,8938],{"class":611,"line":717},[609,8935,615],{"class":614},[609,8937,722],{"class":618},[609,8939,641],{"class":614},[609,8941,8942,8944,8946],{"class":611,"line":727},[609,8943,730],{"class":614},[609,8945,733],{"class":618},[609,8947,641],{"class":614},[609,8949,8950,8952,8954],{"class":611,"line":750},[609,8951,753],{"class":614},[609,8953,756],{"class":618},[609,8955,759],{"class":614},[609,8957,8958,8960,8962,8964,8966,8968,8970,8972,8974],{"class":611,"line":762},[609,8959,753],{"class":614},[609,8961,197],{"class":618},[609,8963,785],{"class":614},[609,8965,1972],{"class":622},[609,8967,629],{"class":614},[609,8969,632],{"class":614},[609,8971,1517],{"class":795},[609,8973,632],{"class":614},[609,8975,759],{"class":614},[609,8977,8979,8981,8983],{"class":8978,"line":772},[611,645],[609,8980,753],{"class":614},[609,8982,8840],{"class":618},[609,8984,759],{"class":614},[609,8986,8987,8989,8991],{"class":611,"line":777},[609,8988,753],{"class":614},[609,8990,3071],{"class":618},[609,8992,759],{"class":614},[609,8994,8995,8997,8999],{"class":611,"line":803},[609,8996,881],{"class":614},[609,8998,733],{"class":618},[609,9000,641],{"class":614},[609,9002,9003,9005,9007],{"class":611,"line":603},[609,9004,704],{"class":614},[609,9006,722],{"class":618},[609,9008,641],{"class":614},[3729,9010,9011],{},[586,9012,6823],{},[476,9014,898],{"id":897},[903,9016,9017,9027],{},[906,9018,9019],{},[909,9020,9021,9023,9025],{},[912,9022,914],{"align":973},[912,9024,917],{"align":973},[912,9026,920],{},[922,9028,9029,9042,9057,9069,9081],{},[909,9030,9031,9036,9039],{},[927,9032,9033],{"align":973},[1677,9034,9035],{},"moveSpeed",[927,9037,9038],{"align":973},"Speed movement.",[927,9040,9041],{},"0.2",[909,9043,9044,9048,9053],{},[927,9045,9046],{"align":973},[1677,9047,6849],{},[927,9049,934,9050,9052],{"align":973},[590,9051,937],{},", the controls will be set as the default controls for the scene.",[927,9054,9055],{},[590,9056,937],{},[909,9058,9059,9063,9065],{},[927,9060,9061],{"align":973},[1677,9062,6863],{},[927,9064,6866],{"align":973},[927,9066,9067],{},[590,9068,1155],{},[909,9070,9071,9075,9077],{},[927,9072,9073],{"align":973},[1677,9074,6877],{},[927,9076,6880],{"align":973},[927,9078,9079],{},[590,9080,1155],{},[909,9082,9083,9088,9091],{},[927,9084,9085],{"align":973},[1677,9086,9087],{},"selector",[927,9089,9090],{"align":973},"Accept an id element as string. If set, the new element will be used as the trigger",[927,9092,9093],{},[590,9094,1155],{},[476,9096,7746],{"id":7745},[598,9098,9100],{"className":600,"code":9099,"language":605,"meta":548,"style":548},"\u003CKeyboardControls @change=\"onChange\" @is-lock=\"(state) => isActive(state)\" />\n",[590,9101,9102],{"__ignoreMap":548},[609,9103,9104,9106,9108,9110,9112,9114,9116,9118,9120,9122,9125,9127,9129,9131,9134,9136,9138,9141,9144,9146],{"class":611,"line":549},[609,9105,615],{"class":614},[609,9107,8840],{"class":618},[609,9109,7760],{"class":614},[609,9111,7763],{"class":622},[609,9113,629],{"class":614},[609,9115,632],{"class":614},[609,9117,7770],{"class":655},[609,9119,632],{"class":614},[609,9121,7760],{"class":614},[609,9123,9124],{"class":622},"is-lock",[609,9126,629],{"class":614},[609,9128,632],{"class":614},[609,9130,2974],{"class":614},[609,9132,9133],{"class":5499},"state",[609,9135,4129],{"class":614},[609,9137,5505],{"class":622},[609,9139,9140],{"class":2804}," isActive",[609,9142,9143],{"class":655},"(state)",[609,9145,632],{"class":614},[609,9147,759],{"class":655},[903,9149,9150,9158],{},[906,9151,9152],{},[909,9153,9154,9156],{},[912,9155,7811],{"align":973},[912,9157,917],{"align":973},[922,9159,9160,9176],{},[909,9161,9162,9167],{},[927,9163,9164],{"align":973},[1677,9165,9166],{},"isLock",[927,9168,9169,9170,9172,9173,9175],{"align":973},"Return ",[590,9171,937],{}," if \"lock\", ",[590,9174,947],{}," if \"unlock\" events are triggered.",[909,9177,9178,9182],{},[927,9179,9180],{"align":973},[1677,9181,7763],{},[927,9183,7833],{"align":973},[1303,9185,9186],{},"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 .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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":548,"searchDepth":549,"depth":550,"links":9188},[9189,9190,9191],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},{"id":7745,"depth":550,"text":7746},{},{"title":95,"description":8830},"Oix2-Nx3pvTy-NyphfuJ57zwsLs_Vfgz8LsTCMVbO8c",{"id":9196,"title":99,"body":9197,"description":9522,"extension":563,"links":564,"meta":9523,"navigation":566,"path":100,"seo":9524,"stem":101,"__hash__":9525},"docs/2.api/2.controls/map-controls.md",{"type":473,"value":9198,"toc":9518},[9199,9204,9212,9214,9434,9439,9441,9511,9516],[580,9200,9201],{},[9202,9203],"controls-map-controls",{},[586,9205,9206,9211],{},[1116,9207,9210],{"href":9208,"rel":9209},"https://threejs.org/docs/index.html?q=controls#examples/en/controls/MapControls",[1120],"MapControls"," similar to OrbitControls, this control is intended for transforming a camera over a map from bird's eye perspective, but uses a specific preset for mouse/touch interaction and disables screen space panning by default.",[476,9213,15],{"id":596},[598,9215,9218],{"className":600,"code":9216,"highlights":9217,"language":605,"meta":548,"style":548},"\u003Cscript setup>\nimport { MapControls } from \"@tresjs/cientos\"\n\u003C/script>\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#82DBC5\">\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n    \u003CMapControls />\n    \u003CBox :scale=\"2\">\n      \u003CTresMeshToonMaterial color=\"orange\" />\n    \u003C/Box>\n    \u003CTresAmbientLight />\n    \u003CTresDirectionalLight :position=\"[0, 2, 4]\" />\n    \u003CTresGridHelper />\n  \u003C/TresCanvas>\n\u003C/template>\n",[727],[590,9219,9220,9230,9249,9257,9265,9283,9315,9324,9344,9362,9370,9378,9410,9418,9426],{"__ignoreMap":548},[609,9221,9222,9224,9226,9228],{"class":611,"line":549},[609,9223,615],{"class":614},[609,9225,619],{"class":618},[609,9227,623],{"class":622},[609,9229,641],{"class":614},[609,9231,9232,9234,9236,9239,9241,9243,9245,9247],{"class":611,"line":550},[609,9233,649],{"class":648},[609,9235,652],{"class":614},[609,9237,9238],{"class":655}," MapControls",[609,9240,665],{"class":614},[609,9242,668],{"class":648},[609,9244,3326],{"class":614},[609,9246,674],{"class":635},[609,9248,2991],{"class":614},[609,9250,9251,9253,9255],{"class":611,"line":680},[609,9252,704],{"class":614},[609,9254,619],{"class":618},[609,9256,641],{"class":614},[609,9258,9259,9261,9263],{"class":611,"line":701},[609,9260,615],{"class":614},[609,9262,722],{"class":618},[609,9264,641],{"class":614},[609,9266,9267,9269,9271,9273,9275,9277,9279,9281],{"class":611,"line":711},[609,9268,730],{"class":614},[609,9270,733],{"class":618},[609,9272,736],{"class":622},[609,9274,629],{"class":614},[609,9276,632],{"class":614},[609,9278,5044],{"class":635},[609,9280,632],{"class":614},[609,9282,641],{"class":614},[609,9284,9285,9287,9289,9291,9293,9295,9297,9299,9301,9303,9305,9307,9309,9311,9313],{"class":611,"line":717},[609,9286,753],{"class":614},[609,9288,756],{"class":618},[609,9290,785],{"class":614},[609,9292,1463],{"class":622},[609,9294,629],{"class":614},[609,9296,632],{"class":614},[609,9298,1470],{"class":614},[609,9300,4164],{"class":795},[609,9302,1475],{"class":614},[609,9304,4164],{"class":795},[609,9306,1475],{"class":614},[609,9308,4164],{"class":795},[609,9310,1485],{"class":614},[609,9312,632],{"class":614},[609,9314,759],{"class":614},[609,9316,9318,9320,9322],{"class":9317,"line":727},[611,645],[609,9319,753],{"class":614},[609,9321,9210],{"class":618},[609,9323,759],{"class":614},[609,9325,9326,9328,9330,9332,9334,9336,9338,9340,9342],{"class":611,"line":750},[609,9327,753],{"class":614},[609,9329,197],{"class":618},[609,9331,785],{"class":614},[609,9333,788],{"class":622},[609,9335,629],{"class":614},[609,9337,632],{"class":614},[609,9339,796],{"class":795},[609,9341,632],{"class":614},[609,9343,641],{"class":614},[609,9345,9346,9348,9350,9352,9354,9356,9358,9360],{"class":611,"line":762},[609,9347,829],{"class":614},[609,9349,6733],{"class":618},[609,9351,3982],{"class":622},[609,9353,629],{"class":614},[609,9355,632],{"class":614},[609,9357,6742],{"class":635},[609,9359,632],{"class":614},[609,9361,759],{"class":614},[609,9363,9364,9366,9368],{"class":611,"line":772},[609,9365,871],{"class":614},[609,9367,197],{"class":618},[609,9369,641],{"class":614},[609,9371,9372,9374,9376],{"class":611,"line":777},[609,9373,753],{"class":614},[609,9375,3522],{"class":618},[609,9377,759],{"class":614},[609,9379,9380,9382,9384,9386,9388,9390,9392,9394,9396,9398,9400,9402,9404,9406,9408],{"class":611,"line":803},[609,9381,753],{"class":614},[609,9383,3543],{"class":618},[609,9385,785],{"class":614},[609,9387,1463],{"class":622},[609,9389,629],{"class":614},[609,9391,632],{"class":614},[609,9393,1470],{"class":614},[609,9395,941],{"class":795},[609,9397,1475],{"class":614},[609,9399,796],{"class":795},[609,9401,1475],{"class":614},[609,9403,3494],{"class":795},[609,9405,1485],{"class":614},[609,9407,632],{"class":614},[609,9409,759],{"class":614},[609,9411,9412,9414,9416],{"class":611,"line":603},[609,9413,753],{"class":614},[609,9415,3071],{"class":618},[609,9417,759],{"class":614},[609,9419,9420,9422,9424],{"class":611,"line":826},[609,9421,881],{"class":614},[609,9423,733],{"class":618},[609,9425,641],{"class":614},[609,9427,9428,9430,9432],{"class":611,"line":837},[609,9429,704],{"class":614},[609,9431,722],{"class":618},[609,9433,641],{"class":614},[3729,9435,9436],{},[586,9437,9438],{},"It is really important that the perspective camera is set first in the canvas. Otherwise the scene might break.",[476,9440,898],{"id":897},[903,9442,9443,9453],{},[906,9444,9445],{},[909,9446,9447,9449,9451],{},[912,9448,914],{"align":973},[912,9450,917],{"align":973},[912,9452,920],{},[922,9454,9455,9469,9481,9494],{},[909,9456,9457,9461,9465],{},[927,9458,9459],{"align":973},[1677,9460,6849],{},[927,9462,934,9463,9052],{"align":973},[590,9464,937],{},[927,9466,9467],{},[590,9468,947],{},[909,9470,9471,9475,9477],{},[927,9472,9473],{"align":973},[1677,9474,6863],{},[927,9476,6866],{"align":973},[927,9478,9479],{},[590,9480,1155],{},[909,9482,9483,9487,9490],{},[927,9484,9485],{"align":973},[1677,9486,6877],{},[927,9488,9489],{"align":973},"The dom element to listen to.",[927,9491,9492],{},[590,9493,1155],{},[909,9495,9496,9501,9507],{},[927,9497,9498],{"align":973},[1677,9499,9500],{},"screenSpacePanning",[927,9502,9503,9504,9506],{"align":973},"Defines how the camera's position is translated when panning. If ",[590,9505,937],{},", the camera pans in screen space. Otherwise, the camera pans in the plane orthogonal to the camera's up direction.",[927,9508,9509],{},[590,9510,947],{},[2050,9512,9513],{},[586,9514,9515],{},"All the props of the orbit controls component apply here too.",[1303,9517,7845],{},{"title":548,"searchDepth":549,"depth":550,"links":9519},[9520,9521],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},"similar to OrbitControls but for map views",{},{"title":99,"description":9522},"3Gr5ZfaS0tXm4RGuh0wLyX1tmIw4ZrdyL-nbg-P_RPU",{"id":9527,"title":103,"body":9528,"description":10254,"extension":563,"links":564,"meta":10255,"navigation":566,"path":104,"seo":10256,"stem":105,"__hash__":10257},"docs/2.api/2.controls/orbit-controls.md",{"type":473,"value":9529,"toc":10249},[9530,9535,9542,9544,9763,9767,9769,10160,10162,10211,10247],[580,9531,9532],{},[9533,9534],"controls-orbit-controls",{},[586,9536,9537,9541],{},[1116,9538,767],{"href":9539,"rel":9540},"https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls",[1120]," is a camera controller that allows you to orbit around a target. It's a great way to explore your scene.",[476,9543,15],{"id":596},[598,9545,9548],{"className":600,"code":9546,"highlights":9547,"language":605,"meta":548,"style":548},"\u003Cscript setup>\nimport { OrbitControls } from \"@tresjs/cientos\"\n\u003C/script>\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#82DBC5\">\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n    \u003COrbitControls />\n    \u003CBox :scale=\"2\">\n      \u003CTresMeshToonMaterial color=\"orange\" />\n    \u003C/Box>\n    \u003CTresAmbientLight />\n    \u003CTresDirectionalLight :position=\"[0, 2, 4]\" />\n    \u003CTresGridHelper />\n  \u003C/TresCanvas>\n\u003C/template>\n",[727],[590,9549,9550,9560,9578,9586,9594,9612,9644,9653,9673,9691,9699,9707,9739,9747,9755],{"__ignoreMap":548},[609,9551,9552,9554,9556,9558],{"class":611,"line":549},[609,9553,615],{"class":614},[609,9555,619],{"class":618},[609,9557,623],{"class":622},[609,9559,641],{"class":614},[609,9561,9562,9564,9566,9568,9570,9572,9574,9576],{"class":611,"line":550},[609,9563,649],{"class":648},[609,9565,652],{"class":614},[609,9567,662],{"class":655},[609,9569,665],{"class":614},[609,9571,668],{"class":648},[609,9573,3326],{"class":614},[609,9575,674],{"class":635},[609,9577,2991],{"class":614},[609,9579,9580,9582,9584],{"class":611,"line":680},[609,9581,704],{"class":614},[609,9583,619],{"class":618},[609,9585,641],{"class":614},[609,9587,9588,9590,9592],{"class":611,"line":701},[609,9589,615],{"class":614},[609,9591,722],{"class":618},[609,9593,641],{"class":614},[609,9595,9596,9598,9600,9602,9604,9606,9608,9610],{"class":611,"line":711},[609,9597,730],{"class":614},[609,9599,733],{"class":618},[609,9601,736],{"class":622},[609,9603,629],{"class":614},[609,9605,632],{"class":614},[609,9607,5044],{"class":635},[609,9609,632],{"class":614},[609,9611,641],{"class":614},[609,9613,9614,9616,9618,9620,9622,9624,9626,9628,9630,9632,9634,9636,9638,9640,9642],{"class":611,"line":717},[609,9615,753],{"class":614},[609,9617,756],{"class":618},[609,9619,785],{"class":614},[609,9621,1463],{"class":622},[609,9623,629],{"class":614},[609,9625,632],{"class":614},[609,9627,1470],{"class":614},[609,9629,4164],{"class":795},[609,9631,1475],{"class":614},[609,9633,4164],{"class":795},[609,9635,1475],{"class":614},[609,9637,4164],{"class":795},[609,9639,1485],{"class":614},[609,9641,632],{"class":614},[609,9643,759],{"class":614},[609,9645,9647,9649,9651],{"class":9646,"line":727},[611,645],[609,9648,753],{"class":614},[609,9650,767],{"class":618},[609,9652,759],{"class":614},[609,9654,9655,9657,9659,9661,9663,9665,9667,9669,9671],{"class":611,"line":750},[609,9656,753],{"class":614},[609,9658,197],{"class":618},[609,9660,785],{"class":614},[609,9662,788],{"class":622},[609,9664,629],{"class":614},[609,9666,632],{"class":614},[609,9668,796],{"class":795},[609,9670,632],{"class":614},[609,9672,641],{"class":614},[609,9674,9675,9677,9679,9681,9683,9685,9687,9689],{"class":611,"line":762},[609,9676,829],{"class":614},[609,9678,6733],{"class":618},[609,9680,3982],{"class":622},[609,9682,629],{"class":614},[609,9684,632],{"class":614},[609,9686,6742],{"class":635},[609,9688,632],{"class":614},[609,9690,759],{"class":614},[609,9692,9693,9695,9697],{"class":611,"line":772},[609,9694,871],{"class":614},[609,9696,197],{"class":618},[609,9698,641],{"class":614},[609,9700,9701,9703,9705],{"class":611,"line":777},[609,9702,753],{"class":614},[609,9704,3522],{"class":618},[609,9706,759],{"class":614},[609,9708,9709,9711,9713,9715,9717,9719,9721,9723,9725,9727,9729,9731,9733,9735,9737],{"class":611,"line":803},[609,9710,753],{"class":614},[609,9712,3543],{"class":618},[609,9714,785],{"class":614},[609,9716,1463],{"class":622},[609,9718,629],{"class":614},[609,9720,632],{"class":614},[609,9722,1470],{"class":614},[609,9724,941],{"class":795},[609,9726,1475],{"class":614},[609,9728,796],{"class":795},[609,9730,1475],{"class":614},[609,9732,3494],{"class":795},[609,9734,1485],{"class":614},[609,9736,632],{"class":614},[609,9738,759],{"class":614},[609,9740,9741,9743,9745],{"class":611,"line":603},[609,9742,753],{"class":614},[609,9744,3071],{"class":618},[609,9746,759],{"class":614},[609,9748,9749,9751,9753],{"class":611,"line":826},[609,9750,881],{"class":614},[609,9752,733],{"class":618},[609,9754,641],{"class":614},[609,9756,9757,9759,9761],{"class":611,"line":837},[609,9758,704],{"class":614},[609,9760,722],{"class":618},[609,9762,641],{"class":614},[3729,9764,9765],{},[586,9766,6823],{},[476,9768,898],{"id":897},[903,9770,9771,9781],{},[906,9772,9773],{},[909,9774,9775,9777,9779],{},[912,9776,914],{"align":973},[912,9778,917],{"align":973},[912,9780,920],{},[922,9782,9783,9797,9809,9821,9835,9851,9869,9883,9901,9915,9930,9945,9966,9984,9997,10010,10023,10036,10049,10062,10076,10090,10104,10118,10132,10146],{},[909,9784,9785,9789,9793],{},[927,9786,9787],{"align":973},[1677,9788,6849],{},[927,9790,934,9791,9052],{"align":973},[590,9792,937],{},[927,9794,9795],{},[590,9796,947],{},[909,9798,9799,9803,9805],{},[927,9800,9801],{"align":973},[1677,9802,6863],{},[927,9804,6866],{"align":973},[927,9806,9807],{},[590,9808,1155],{},[909,9810,9811,9815,9817],{},[927,9812,9813],{"align":973},[1677,9814,6877],{},[927,9816,9489],{"align":973},[927,9818,9819],{},[590,9820,1155],{},[909,9822,9823,9828,9831],{},[927,9824,9825],{"align":973},[1677,9826,9827],{},"target",[927,9829,9830],{"align":973},"The target to orbit around.",[927,9832,9833],{},[590,9834,1155],{},[909,9836,9837,9842,9847],{},[927,9838,9839],{"align":973},[1677,9840,9841],{},"enableDamping",[927,9843,934,9844,9846],{"align":973},[590,9845,937],{},", the controls will use damping (inertia), which can be used to give a sense of weight to the controls.",[927,9848,9849],{},[590,9850,937],{},[909,9852,9853,9858,9865],{},[927,9854,9855],{"align":973},[1677,9856,9857],{},"dampingFactor",[927,9859,9860,9861,9864],{"align":973},"The damping inertia used if ",[590,9862,9863],{},".enableDamping"," is set to true.",[927,9866,9867],{},[590,9868,4896],{},[909,9870,9871,9876,9879],{},[927,9872,9873],{"align":973},[1677,9874,9875],{},"autoRotate",[927,9877,9878],{"align":973},"Set to true to automatically rotate around the target.",[927,9880,9881],{},[590,9882,947],{},[909,9884,9885,9890,9897],{},[927,9886,9887],{"align":973},[1677,9888,9889],{},"autoRotateSpeed",[927,9891,9892,9893,9896],{"align":973},"How fast to rotate around the target if ",[590,9894,9895],{},".autoRotate"," is true.",[927,9898,9899],{},[590,9900,796],{},[909,9902,9903,9908,9911],{},[927,9904,9905],{"align":973},[1677,9906,9907],{},"enablePan",[927,9909,9910],{"align":973},"Whether to enable panning.",[927,9912,9913],{},[590,9914,937],{},[909,9916,9917,9922,9925],{},[927,9918,9919],{"align":973},[1677,9920,9921],{},"keyPanSpeed",[927,9923,9924],{"align":973},"How fast to pan the camera when the keyboard is used. Default is 7.0 pixels per keypress.",[927,9926,9927],{},[590,9928,9929],{},"7.0",[909,9931,9932,9937,9940],{},[927,9933,9934],{"align":973},[1677,9935,9936],{},"keys",[927,9938,9939],{"align":973},"This object contains references to the keycodes for controlling camera panning. Default is the 4 arrow keys.",[927,9941,9942],{},[590,9943,9944],{},"{ LEFT: 'ArrowLeft', UP: 'ArrowUp', RIGHT: 'ArrowRight', BOTTOM: 'ArrowDown' }",[909,9946,9947,9951,9962],{},[927,9948,9949],{"align":973},[1677,9950,6934],{},[927,9952,9953,9954,9957,9958,9961],{"align":973},"How far you can orbit horizontally, upper limit. If set, the interval ",[609,9955,9956],{}," min, max"," must be a sub-interval of ",[609,9959,9960],{}," - 2 PI, 2 PI",", with ( max - min \u003C 2 PI ). Default is Infinity.",[927,9963,9964],{},[590,9965,6942],{},[909,9967,9968,9972,9980],{},[927,9969,9970],{"align":973},[1677,9971,6919],{},[927,9973,9974,9975,9957,9977,9979],{"align":973},"How far you can orbit horizontally, lower limit. If set, the interval ",[609,9976,9956],{},[609,9978,9960],{},", with ( max - min \u003C 2 PI ). Default is - Infinity.",[927,9981,9982],{},[590,9983,6927],{},[909,9985,9986,9990,9993],{},[927,9987,9988],{"align":973},[1677,9989,6905],{},[927,9991,9992],{"align":973},"How far you can orbit vertically, upper limit. Range is 0 to Math.PI radians, and default is Math.PI.",[927,9994,9995],{},[590,9996,4917],{},[909,9998,9999,10003,10006],{},[927,10000,10001],{"align":973},[1677,10002,6891],{},[927,10004,10005],{"align":973},"How far you can orbit vertically, lower limit. Range is 0 to Math.PI radians, and default is 0.",[927,10007,10008],{},[590,10009,941],{},[909,10011,10012,10016,10019],{},[927,10013,10014],{"align":973},[1677,10015,6964],{},[927,10017,10018],{"align":973},"The minimum distance of the camera to the target. Default is 0.",[927,10020,10021],{},[590,10022,941],{},[909,10024,10025,10029,10032],{},[927,10026,10027],{"align":973},[1677,10028,6979],{},[927,10030,10031],{"align":973},"The maximum distance of the camera to the target. Default is Infinity.",[927,10033,10034],{},[590,10035,6942],{},[909,10037,10038,10042,10045],{},[927,10039,10040],{"align":973},[1677,10041,7009],{},[927,10043,10044],{"align":973},"The minimum field of view angle, in radians. Default is 0.",[927,10046,10047],{},[590,10048,941],{},[909,10050,10051,10055,10058],{},[927,10052,10053],{"align":973},[1677,10054,7023],{},[927,10056,10057],{"align":973},"The maximum field of view angle, in radians. ( OrthographicCamera only ). Default is Infinity.",[927,10059,10060],{},[590,10061,6942],{},[909,10063,10064,10068,10071],{},[927,10065,10066],{"align":973},[1677,10067,7270],{},[927,10069,10070],{"align":973},"This object contains references to the touch actions used by the controls.",[927,10072,10073],{},[590,10074,10075],{},"{ ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_PAN }",[909,10077,10078,10082,10085],{},[927,10079,10080],{"align":973},[1677,10081,7251],{},[927,10083,10084],{"align":973},"This object contains references to the mouse actions used by the controls. LEFT: Rotate around the target, MIDDLE: Zoom the camera, RIGHT: Pan the camera.",[927,10086,10087],{},[590,10088,10089],{},"{ LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN }",[909,10091,10092,10097,10100],{},[927,10093,10094],{"align":973},[1677,10095,10096],{},"enableZoom",[927,10098,10099],{"align":973},"Whether to enable zooming.",[927,10101,10102],{},[590,10103,937],{},[909,10105,10106,10111,10114],{},[927,10107,10108],{"align":973},[1677,10109,10110],{},"zoomSpeed",[927,10112,10113],{"align":973},"How fast to zoom in and out. Default is 1.",[927,10115,10116],{},[590,10117,1897],{},[909,10119,10120,10125,10128],{},[927,10121,10122],{"align":973},[1677,10123,10124],{},"enableRotate",[927,10126,10127],{"align":973},"Whether to enable rotating.",[927,10129,10130],{},[590,10131,937],{},[909,10133,10134,10139,10142],{},[927,10135,10136],{"align":973},[1677,10137,10138],{},"rotateSpeed",[927,10140,10141],{"align":973},"How fast to rotate around the target. Default is 1.",[927,10143,10144],{},[590,10145,1897],{},[909,10147,10148,10152,10156],{},[927,10149,10150],{"align":973},[1677,10151,9500],{},[927,10153,9503,10154,9506],{"align":973},[590,10155,937],{},[927,10157,10158],{},[590,10159,937],{},[476,10161,7746],{"id":7745},[598,10163,10165],{"className":600,"code":10164,"language":605,"meta":548,"style":548},"\u003COrbitControls @change=\"onChange\" @start=\"onStart\" @end=\"onEnd\" />\n",[590,10166,10167],{"__ignoreMap":548},[609,10168,10169,10171,10173,10175,10177,10179,10181,10183,10185,10187,10189,10191,10193,10195,10197,10199,10201,10203,10205,10207,10209],{"class":611,"line":549},[609,10170,615],{"class":614},[609,10172,767],{"class":618},[609,10174,7760],{"class":614},[609,10176,7763],{"class":622},[609,10178,629],{"class":614},[609,10180,632],{"class":614},[609,10182,7770],{"class":655},[609,10184,632],{"class":614},[609,10186,7760],{"class":614},[609,10188,7777],{"class":622},[609,10190,629],{"class":614},[609,10192,632],{"class":614},[609,10194,7784],{"class":655},[609,10196,632],{"class":614},[609,10198,7760],{"class":614},[609,10200,7791],{"class":622},[609,10202,629],{"class":614},[609,10204,632],{"class":614},[609,10206,7798],{"class":655},[609,10208,632],{"class":614},[609,10210,759],{"class":614},[903,10212,10213,10221],{},[906,10214,10215],{},[909,10216,10217,10219],{},[912,10218,7811],{"align":973},[912,10220,917],{"align":973},[922,10222,10223,10231,10239],{},[909,10224,10225,10229],{},[927,10226,10227],{"align":973},[1677,10228,7777],{},[927,10230,7824],{"align":973},[909,10232,10233,10237],{},[927,10234,10235],{"align":973},[1677,10236,7763],{},[927,10238,7833],{"align":973},[909,10240,10241,10245],{},[927,10242,10243],{"align":973},[1677,10244,7791],{},[927,10246,7842],{"align":973},[1303,10248,7845],{},{"title":548,"searchDepth":549,"depth":550,"links":10250},[10251,10252,10253],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},{"id":7745,"depth":550,"text":7746},"Allows you to orbit around the scene",{},{"title":103,"description":10254},"IQCftiJiGyLobGnbQSjgWE8zZkH7Aq-fMxmuEUs6EWI",{"id":10259,"title":107,"body":10260,"description":10610,"extension":563,"links":564,"meta":10611,"navigation":566,"path":108,"seo":10612,"stem":109,"__hash__":10613},"docs/2.api/2.controls/pointer-lock-controls.md",{"type":473,"value":10261,"toc":10605},[10262,10267,10274,10291,10293,10450,10454,10456,10521,10523,10570,10603],[580,10263,10264],{},[10265,10266],"controls-pointer-lock-controls",{},[586,10268,10269,10273],{},[1116,10270,8844],{"href":10271,"rel":10272},"https://threejs.org/docs/index.html?q=pointe#examples/en/controls/PointerLockControls",[1120]," is a camera controller that allows you to capture the mouse movement and simulate a first person camera. It is a perfect choice for first person 3D games.",[3729,10275,10276],{},[586,10277,10278,10279,10290],{},"This control uses the ",[609,10280,10281,10283],{"style":8133},[1116,10282],{"href":104,"style":8136},[1116,10284,10287],{"href":10285,"rel":10286},"https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API",[1120],[590,10288,10289],{},"Pointer Lock API",", the same rules are applied, for example, you need to interact with the browser to \"lock\" or start the event.\nIn addition, you need to wait 1 second between canceling and re-starting the event",[476,10292,15],{"id":596},[598,10294,10297],{"className":600,"code":10295,"highlights":10296,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { PointerLockControls, Box } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera />\n    \u003CBox :position-y=\"0.5\" />\n    \u003CPointerLockControls />\n    \u003CTresGridHelper />\n  \u003C/TresCanvas>\n\u003C/template>\n",[680,772],[590,10298,10299,10319,10337,10361,10369,10373,10381,10389,10397,10417,10426,10434,10442],{"__ignoreMap":548},[609,10300,10301,10303,10305,10307,10309,10311,10313,10315,10317],{"class":611,"line":549},[609,10302,615],{"class":614},[609,10304,619],{"class":618},[609,10306,623],{"class":622},[609,10308,626],{"class":622},[609,10310,629],{"class":614},[609,10312,632],{"class":614},[609,10314,636],{"class":635},[609,10316,632],{"class":614},[609,10318,641],{"class":614},[609,10320,10321,10323,10325,10327,10329,10331,10333,10335],{"class":611,"line":550},[609,10322,649],{"class":648},[609,10324,652],{"class":614},[609,10326,687],{"class":655},[609,10328,665],{"class":614},[609,10330,668],{"class":648},[609,10332,671],{"class":614},[609,10334,696],{"class":635},[609,10336,677],{"class":614},[609,10338,10340,10342,10344,10347,10349,10351,10353,10355,10357,10359],{"class":10339,"line":680},[611,645],[609,10341,649],{"class":648},[609,10343,652],{"class":614},[609,10345,10346],{"class":655}," PointerLockControls",[609,10348,659],{"class":614},[609,10350,1373],{"class":655},[609,10352,665],{"class":614},[609,10354,668],{"class":648},[609,10356,671],{"class":614},[609,10358,674],{"class":635},[609,10360,677],{"class":614},[609,10362,10363,10365,10367],{"class":611,"line":701},[609,10364,704],{"class":614},[609,10366,619],{"class":618},[609,10368,641],{"class":614},[609,10370,10371],{"class":611,"line":711},[609,10372,714],{"emptyLinePlaceholder":566},[609,10374,10375,10377,10379],{"class":611,"line":717},[609,10376,615],{"class":614},[609,10378,722],{"class":618},[609,10380,641],{"class":614},[609,10382,10383,10385,10387],{"class":611,"line":727},[609,10384,730],{"class":614},[609,10386,733],{"class":618},[609,10388,641],{"class":614},[609,10390,10391,10393,10395],{"class":611,"line":750},[609,10392,753],{"class":614},[609,10394,756],{"class":618},[609,10396,759],{"class":614},[609,10398,10399,10401,10403,10405,10407,10409,10411,10413,10415],{"class":611,"line":762},[609,10400,753],{"class":614},[609,10402,197],{"class":618},[609,10404,785],{"class":614},[609,10406,1972],{"class":622},[609,10408,629],{"class":614},[609,10410,632],{"class":614},[609,10412,1517],{"class":795},[609,10414,632],{"class":614},[609,10416,759],{"class":614},[609,10418,10420,10422,10424],{"class":10419,"line":772},[611,645],[609,10421,753],{"class":614},[609,10423,8844],{"class":618},[609,10425,759],{"class":614},[609,10427,10428,10430,10432],{"class":611,"line":777},[609,10429,753],{"class":614},[609,10431,3071],{"class":618},[609,10433,759],{"class":614},[609,10435,10436,10438,10440],{"class":611,"line":803},[609,10437,881],{"class":614},[609,10439,733],{"class":618},[609,10441,641],{"class":614},[609,10443,10444,10446,10448],{"class":611,"line":603},[609,10445,704],{"class":614},[609,10447,722],{"class":618},[609,10449,641],{"class":614},[3729,10451,10452],{},[586,10453,6823],{},[476,10455,898],{"id":897},[903,10457,10458,10468],{},[906,10459,10460],{},[909,10461,10462,10464,10466],{},[912,10463,914],{"align":973},[912,10465,917],{"align":973},[912,10467,920],{},[922,10469,10470,10484,10496,10508],{},[909,10471,10472,10476,10480],{},[927,10473,10474],{"align":973},[1677,10475,6849],{},[927,10477,934,10478,9052],{"align":973},[590,10479,937],{},[927,10481,10482],{},[590,10483,947],{},[909,10485,10486,10490,10492],{},[927,10487,10488],{"align":973},[1677,10489,6863],{},[927,10491,6866],{"align":973},[927,10493,10494],{},[590,10495,1155],{},[909,10497,10498,10502,10504],{},[927,10499,10500],{"align":973},[1677,10501,6877],{},[927,10503,9489],{"align":973},[927,10505,10506],{},[590,10507,1155],{},[909,10509,10510,10514,10517],{},[927,10511,10512],{"align":973},[1677,10513,9087],{},[927,10515,10516],{"align":973},"Accept an id element as string, if it is set, the new element will be used as the trigger",[927,10518,10519],{},[590,10520,1155],{},[476,10522,7746],{"id":7745},[598,10524,10526],{"className":600,"code":10525,"language":605,"meta":548,"style":548},"\u003CPointerLockControls @change=\"onChange\" @is-lock=\"(state) => isActive(state)\" />\n",[590,10527,10528],{"__ignoreMap":548},[609,10529,10530,10532,10534,10536,10538,10540,10542,10544,10546,10548,10550,10552,10554,10556,10558,10560,10562,10564,10566,10568],{"class":611,"line":549},[609,10531,615],{"class":614},[609,10533,8844],{"class":618},[609,10535,7760],{"class":614},[609,10537,7763],{"class":622},[609,10539,629],{"class":614},[609,10541,632],{"class":614},[609,10543,7770],{"class":655},[609,10545,632],{"class":614},[609,10547,7760],{"class":614},[609,10549,9124],{"class":622},[609,10551,629],{"class":614},[609,10553,632],{"class":614},[609,10555,2974],{"class":614},[609,10557,9133],{"class":5499},[609,10559,4129],{"class":614},[609,10561,5505],{"class":622},[609,10563,9140],{"class":2804},[609,10565,9143],{"class":655},[609,10567,632],{"class":614},[609,10569,759],{"class":655},[903,10571,10572,10580],{},[906,10573,10574],{},[909,10575,10576,10578],{},[912,10577,7811],{"align":973},[912,10579,917],{"align":973},[922,10581,10582,10595],{},[909,10583,10584,10588],{},[927,10585,10586],{"align":973},[1677,10587,9166],{},[927,10589,9169,10590,9172,10592,10594],{"align":973},[590,10591,937],{},[590,10593,947],{}," if \"unlock\" events are trigger.",[909,10596,10597,10601],{},[927,10598,10599],{"align":973},[1677,10600,7763],{},[927,10602,7833],{"align":973},[1303,10604,9186],{},{"title":548,"searchDepth":549,"depth":550,"links":10606},[10607,10608,10609],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},{"id":7745,"depth":550,"text":7746},"Allows you to capture the mouse movement and simulate a first person camera",{},{"title":107,"description":10610},"D_6d4pTGDPfnlucQrxiFcUWuxhufIMPSU-uRuD7K7M4",{"id":10615,"title":111,"body":10616,"description":11359,"extension":563,"links":564,"meta":11360,"navigation":566,"path":112,"seo":11361,"stem":113,"__hash__":11362},"docs/2.api/2.controls/transform-controls.md",{"type":473,"value":10617,"toc":11349},[10618,10625,10630,10632,10643,10885,10903,10907,10910,10914,10919,10922,10959,10963,10968,10971,11006,11009,11014,11017,11052,11054,11280,11282,11343,11346],[586,10619,2257,10620,10624],{},[1116,10621,111],{"href":10622,"rel":10623},"https://threejs.org/docs/#examples/en/controls/TransformControls",[1120]," are a set of three gizmos that can be used to translate, rotate and scale objects in the scene. It adapts a similar interaction model of DCC tools like Blender",[580,10626,10627],{},[10628,10629],"controls-transform-controls",{},[476,10631,15],{"id":596},[586,10633,10634,10635,10638,10639,10642],{},"To use the Transform Controls, simply add the ",[590,10636,10637],{},"TransformControls"," component to your scene. You can pass the ",[590,10640,10641],{},"templateRef","of the instance you want to control as a prop.",[598,10644,10647],{"className":600,"code":10645,"highlights":10646,"language":605,"meta":548,"style":548},"\u003Cscript setup>\nconst boxRef = shallowRef()\n\u003C/script>\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :args=\"[45, 1, 0.1, 1000]\" />\n    \u003COrbitControls make-default />\n    \u003CTransformControls :object=\"boxRef\" />\n    \u003CTresMesh ref=\"boxRef\" :position=\"[0, 4, 0]\" cast-shadow>\n      \u003CTresBoxGeometry :args=\"[1.5, 1.5, 1.5]\" />\n      \u003CTresMeshToonMaterial color=\"#4F4F4F\" />\n    \u003C/TresMesh>\n  \u003C/TresCanvas>\n\u003C/template>\n",[727,750],[590,10648,10649,10659,10671,10679,10687,10695,10732,10743,10765,10810,10843,10861,10869,10877],{"__ignoreMap":548},[609,10650,10651,10653,10655,10657],{"class":611,"line":549},[609,10652,615],{"class":614},[609,10654,619],{"class":618},[609,10656,623],{"class":622},[609,10658,641],{"class":614},[609,10660,10661,10663,10665,10667,10669],{"class":611,"line":550},[609,10662,2693],{"class":622},[609,10664,7950],{"class":655},[609,10666,629],{"class":614},[609,10668,7909],{"class":2804},[609,10670,2850],{"class":655},[609,10672,10673,10675,10677],{"class":611,"line":680},[609,10674,704],{"class":614},[609,10676,619],{"class":618},[609,10678,641],{"class":614},[609,10680,10681,10683,10685],{"class":611,"line":701},[609,10682,615],{"class":614},[609,10684,722],{"class":618},[609,10686,641],{"class":614},[609,10688,10689,10691,10693],{"class":611,"line":711},[609,10690,730],{"class":614},[609,10692,733],{"class":618},[609,10694,641],{"class":614},[609,10696,10697,10699,10701,10703,10705,10707,10709,10711,10714,10716,10718,10720,10722,10724,10726,10728,10730],{"class":611,"line":717},[609,10698,753],{"class":614},[609,10700,756],{"class":618},[609,10702,785],{"class":614},[609,10704,1993],{"class":622},[609,10706,629],{"class":614},[609,10708,632],{"class":614},[609,10710,1470],{"class":614},[609,10712,10713],{"class":795},"45",[609,10715,1475],{"class":614},[609,10717,1897],{"class":795},[609,10719,1475],{"class":614},[609,10721,2207],{"class":795},[609,10723,1475],{"class":614},[609,10725,5169],{"class":795},[609,10727,1485],{"class":614},[609,10729,632],{"class":614},[609,10731,759],{"class":614},[609,10733,10735,10737,10739,10741],{"class":10734,"line":727},[611,645],[609,10736,753],{"class":614},[609,10738,767],{"class":618},[609,10740,1872],{"class":622},[609,10742,759],{"class":614},[609,10744,10746,10748,10750,10752,10755,10757,10759,10761,10763],{"class":10745,"line":750},[611,645],[609,10747,753],{"class":614},[609,10749,10637],{"class":618},[609,10751,785],{"class":614},[609,10753,10754],{"class":622},"object",[609,10756,629],{"class":614},[609,10758,632],{"class":614},[609,10760,8060],{"class":655},[609,10762,632],{"class":614},[609,10764,759],{"class":614},[609,10766,10767,10769,10771,10773,10775,10777,10779,10781,10783,10785,10787,10789,10791,10793,10795,10797,10799,10801,10803,10805,10808],{"class":611,"line":762},[609,10768,753],{"class":614},[609,10770,832],{"class":618},[609,10772,5435],{"class":622},[609,10774,629],{"class":614},[609,10776,632],{"class":614},[609,10778,8060],{"class":635},[609,10780,632],{"class":614},[609,10782,785],{"class":614},[609,10784,1463],{"class":622},[609,10786,629],{"class":614},[609,10788,632],{"class":614},[609,10790,1470],{"class":614},[609,10792,941],{"class":795},[609,10794,1475],{"class":614},[609,10796,3494],{"class":795},[609,10798,1475],{"class":614},[609,10800,941],{"class":795},[609,10802,1485],{"class":614},[609,10804,632],{"class":614},[609,10806,10807],{"class":622}," cast-shadow",[609,10809,641],{"class":614},[609,10811,10812,10814,10816,10818,10820,10822,10824,10826,10829,10831,10833,10835,10837,10839,10841],{"class":611,"line":772},[609,10813,829],{"class":614},[609,10815,843],{"class":618},[609,10817,785],{"class":614},[609,10819,1993],{"class":622},[609,10821,629],{"class":614},[609,10823,632],{"class":614},[609,10825,1470],{"class":614},[609,10827,10828],{"class":795},"1.5",[609,10830,1475],{"class":614},[609,10832,10828],{"class":795},[609,10834,1475],{"class":614},[609,10836,10828],{"class":795},[609,10838,1485],{"class":614},[609,10840,632],{"class":614},[609,10842,759],{"class":614},[609,10844,10845,10847,10849,10851,10853,10855,10857,10859],{"class":611,"line":777},[609,10846,829],{"class":614},[609,10848,6733],{"class":618},[609,10850,3982],{"class":622},[609,10852,629],{"class":614},[609,10854,632],{"class":614},[609,10856,2900],{"class":635},[609,10858,632],{"class":614},[609,10860,759],{"class":614},[609,10862,10863,10865,10867],{"class":611,"line":803},[609,10864,871],{"class":614},[609,10866,832],{"class":618},[609,10868,641],{"class":614},[609,10870,10871,10873,10875],{"class":611,"line":603},[609,10872,881],{"class":614},[609,10874,733],{"class":618},[609,10876,641],{"class":614},[609,10878,10879,10881,10883],{"class":611,"line":826},[609,10880,704],{"class":614},[609,10882,722],{"class":618},[609,10884,641],{"class":614},[3729,10886,10887],{},[586,10888,10889,10890,10894,10895,10897,10898,10900,10901,1122],{},"If you are using other controls ",[609,10891,10892],{"style":8133},[1116,10893,767],{"href":104,"style":8136}," they will interfere with each other when dragging. To avoid this, you can set the ",[590,10896,6849],{}," prop to ",[590,10899,937],{}," on the ",[1677,10902,767],{},[476,10904,10906],{"id":10905},"modes","Modes",[586,10908,10909],{},"The Transform Controls can be used in three different modes:",[7477,10911,10913],{"id":10912},"translate","Translate",[586,10915,10916],{},[3271,10917],{"alt":10913,"src":10918},"/cientos/transform-controls-translate.png",[586,10920,10921],{},"The default mode allows you to move the object around the scene.",[598,10923,10925],{"className":600,"code":10924,"language":605,"meta":548,"style":548},"\u003CTransformControls mode=\"translate\" :object=\"sphereRef\" />\n",[590,10926,10927],{"__ignoreMap":548},[609,10928,10929,10931,10933,10936,10938,10940,10942,10944,10946,10948,10950,10952,10955,10957],{"class":611,"line":549},[609,10930,615],{"class":614},[609,10932,10637],{"class":618},[609,10934,10935],{"class":622}," mode",[609,10937,629],{"class":614},[609,10939,632],{"class":614},[609,10941,10912],{"class":635},[609,10943,632],{"class":614},[609,10945,785],{"class":614},[609,10947,10754],{"class":622},[609,10949,629],{"class":614},[609,10951,632],{"class":614},[609,10953,10954],{"class":655},"sphereRef",[609,10956,632],{"class":614},[609,10958,759],{"class":614},[7477,10960,10962],{"id":10961},"rotate","Rotate",[586,10964,10965],{},[3271,10966],{"alt":10962,"src":10967},"/cientos/transform-controls-rotate.png",[586,10969,10970],{},"The rotate mode allows you to rotate the object around the scene.",[598,10972,10974],{"className":600,"code":10973,"language":605,"meta":548,"style":548},"\u003CTransformControls mode=\"rotate\" :object=\"boxRef\" />\n",[590,10975,10976],{"__ignoreMap":548},[609,10977,10978,10980,10982,10984,10986,10988,10990,10992,10994,10996,10998,11000,11002,11004],{"class":611,"line":549},[609,10979,615],{"class":614},[609,10981,10637],{"class":618},[609,10983,10935],{"class":622},[609,10985,629],{"class":614},[609,10987,632],{"class":614},[609,10989,10961],{"class":635},[609,10991,632],{"class":614},[609,10993,785],{"class":614},[609,10995,10754],{"class":622},[609,10997,629],{"class":614},[609,10999,632],{"class":614},[609,11001,8060],{"class":655},[609,11003,632],{"class":614},[609,11005,759],{"class":614},[7477,11007,11008],{"id":788},"Scale",[586,11010,11011],{},[3271,11012],{"alt":11008,"src":11013},"/cientos/transform-controls-scale.png",[586,11015,11016],{},"The scale mode allows you to scale the object around the scene.",[598,11018,11020],{"className":600,"code":11019,"language":605,"meta":548,"style":548},"\u003CTransformControls mode=\"scale\" :object=\"sphereRef\" />\n",[590,11021,11022],{"__ignoreMap":548},[609,11023,11024,11026,11028,11030,11032,11034,11036,11038,11040,11042,11044,11046,11048,11050],{"class":611,"line":549},[609,11025,615],{"class":614},[609,11027,10637],{"class":618},[609,11029,10935],{"class":622},[609,11031,629],{"class":614},[609,11033,632],{"class":614},[609,11035,788],{"class":635},[609,11037,632],{"class":614},[609,11039,785],{"class":614},[609,11041,10754],{"class":622},[609,11043,629],{"class":614},[609,11045,632],{"class":614},[609,11047,10954],{"class":655},[609,11049,632],{"class":614},[609,11051,759],{"class":614},[476,11053,898],{"id":897},[903,11055,11056,11066],{},[906,11057,11058],{},[909,11059,11060,11062,11064],{},[912,11061,914],{"align":973},[912,11063,917],{"align":973},[912,11065,920],{},[922,11067,11068,11085,11106,11121,11156,11176,11190,11204,11218,11232,11248,11264],{},[909,11069,11070,11074,11081],{},[927,11071,11072],{"align":973},[1677,11073,10754],{},[927,11075,11076,11077,11080],{"align":973},"The instance ",[1116,11078,2582],{"href":8171,"rel":11079},[1120]," to control.",[927,11082,11083],{},[590,11084,3156],{},[909,11086,11087,11092,11102],{},[927,11088,11089],{"align":973},[1677,11090,11091],{},"mode",[927,11093,11094,11095,1475,11097,11099,11100,1122],{"align":973},"The mode of the controls. Can be ",[590,11096,10912],{},[590,11098,10961],{}," or ",[590,11101,788],{},[927,11103,11104],{},[590,11105,10912],{},[909,11107,11108,11112,11117],{},[927,11109,11110],{"align":973},[1677,11111,8197],{},[927,11113,934,11114,11116],{"align":973},[590,11115,937],{},", the controls will be enabled.",[927,11118,11119],{},[590,11120,937],{},[909,11122,11123,11128,11152],{},[927,11124,11125],{"align":973},[1677,11126,11127],{},"axis",[927,11129,11130,11131,1475,11134,1475,11137,1475,11140,1475,11143,1475,11146,1475,11149,1122],{"align":973},"The axis to use for the controls. Can be ",[590,11132,11133],{},"X",[590,11135,11136],{},"Y",[590,11138,11139],{},"Z",[590,11141,11142],{},"XY",[590,11144,11145],{},"YZ",[590,11147,11148],{},"XZ",[590,11150,11151],{},"XYZ",[927,11153,11154],{},[590,11155,11151],{},[909,11157,11158,11163,11172],{},[927,11159,11160],{"align":973},[1677,11161,11162],{},"space",[927,11164,11165,11166,11099,11169,1122],{"align":973},"The space to use for the controls. Can be ",[590,11167,11168],{},"local",[590,11170,11171],{},"world",[927,11173,11174],{},[590,11175,11168],{},[909,11177,11178,11183,11186],{},[927,11179,11180],{"align":973},[1677,11181,11182],{},"size",[927,11184,11185],{"align":973},"The size of the controls.",[927,11187,11188],{},[590,11189,1897],{},[909,11191,11192,11197,11200],{},[927,11193,11194],{"align":973},[1677,11195,11196],{},"translationSnap",[927,11198,11199],{"align":973},"The distance to snap to when translating. (World units)",[927,11201,11202],{},[590,11203,3156],{},[909,11205,11206,11211,11214],{},[927,11207,11208],{"align":973},[1677,11209,11210],{},"rotationSnap",[927,11212,11213],{"align":973},"The angle to snap to when rotating. (Radians)",[927,11215,11216],{},[590,11217,3156],{},[909,11219,11220,11225,11228],{},[927,11221,11222],{"align":973},[1677,11223,11224],{},"scaleSnap",[927,11226,11227],{"align":973},"The scale to snap to when scaling.",[927,11229,11230],{},[590,11231,3156],{},[909,11233,11234,11239,11244],{},[927,11235,11236],{"align":973},[1677,11237,11238],{},"showX",[927,11240,934,11241,11243],{"align":973},[590,11242,937],{},", the X-axis helper will be shown.",[927,11245,11246],{},[590,11247,937],{},[909,11249,11250,11255,11260],{},[927,11251,11252],{"align":973},[1677,11253,11254],{},"showY",[927,11256,934,11257,11259],{"align":973},[590,11258,937],{},", the Y-axis helper will be shown.",[927,11261,11262],{},[590,11263,937],{},[909,11265,11266,11271,11276],{},[927,11267,11268],{"align":973},[1677,11269,11270],{},"showZ",[927,11272,934,11273,11275],{"align":973},[590,11274,937],{},", the Z-axis helper will be shown.",[927,11277,11278],{},[590,11279,937],{},[476,11281,7746],{"id":7745},[903,11283,11284,11292],{},[906,11285,11286],{},[909,11287,11288,11290],{},[912,11289,7811],{"align":973},[912,11291,917],{"align":973},[922,11293,11294,11304,11313,11323,11333],{},[909,11295,11296,11301],{},[927,11297,11298],{"align":973},[1677,11299,11300],{},"dragging",[927,11302,11303],{"align":973},"Fired when the user starts or stops dragging the controls.",[909,11305,11306,11310],{},[927,11307,11308],{"align":973},[1677,11309,7763],{},[927,11311,11312],{"align":973},"Fired when the user changes the controls.",[909,11314,11315,11320],{},[927,11316,11317],{"align":973},[1677,11318,11319],{},"mouseDown",[927,11321,11322],{"align":973},"Fired when the user clicks on the controls.",[909,11324,11325,11330],{},[927,11326,11327],{"align":973},[1677,11328,11329],{},"mouseUp",[927,11331,11332],{"align":973},"Fired when the user releases the mouse button on the controls.",[909,11334,11335,11340],{},[927,11336,11337],{"align":973},[1677,11338,11339],{},"objectChange",[927,11341,11342],{"align":973},"Fired when the user changes the object.",[1303,11344,11345],{"scoped":566},"\nimg {\n    aspect-ratio: 16/9;\n    object-fit: cover;\n    object-position: top;\n    border-radius: 8px;\n}\n",[1303,11347,11348],{},"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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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":548,"searchDepth":549,"depth":550,"links":11350},[11351,11352,11357,11358],{"id":596,"depth":550,"text":15},{"id":10905,"depth":550,"text":10906,"children":11353},[11354,11355,11356],{"id":10912,"depth":680,"text":10913},{"id":10961,"depth":680,"text":10962},{"id":788,"depth":680,"text":11008},{"id":897,"depth":550,"text":898},{"id":7745,"depth":550,"text":7746},"Set of three gizmos that can be used to translate, rotate and scale objects",{},{"title":111,"description":11359},"_oLjZPc3YQUArU7wqNKfUEMez4NtYo2Rc8q7SCJPpVI",[11364,12184,12907,13559,14223,14881,16407,19420,19927],{"id":11365,"title":121,"body":11366,"description":12180,"extension":563,"links":564,"meta":12181,"navigation":566,"path":122,"seo":12182,"stem":123,"__hash__":12183},"docs/2.api/3.loaders/1.use-gltf.md",{"type":473,"value":11367,"toc":12174},[11368,11373,11380,11382,11802,11818,11892,11896,11996,11999,12068,12072,12075,12168,12171],[2562,11369,11370],{},[11371,11372],"loaders-gltf",{},[586,11374,11375,11376,11379],{},"A composable that allows you to easily load glb/glTF models into your ",[1677,11377,11378],{},"TresJS"," scene.",[476,11381,15],{"id":596},[11383,11384,11385,11547],"code-group",{},[598,11386,11390],{"className":600,"code":11387,"filename":11388,"highlights":11389,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { useGLTF } from '@tresjs/cientos'\n\nconst path = './blender-cube.glb'\nconst { state, nodes, materials } = useGLTF(path)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cprimitive v-if=\"state\" :object=\"state?.scene\" />\n\u003C/template>\n","TheModel.vue",[550,711],[590,11391,11392,11412,11432,11436,11452,11481,11489,11493,11501,11539],{"__ignoreMap":548},[609,11393,11394,11396,11398,11400,11402,11404,11406,11408,11410],{"class":611,"line":549},[609,11395,615],{"class":614},[609,11397,619],{"class":618},[609,11399,623],{"class":622},[609,11401,626],{"class":622},[609,11403,629],{"class":614},[609,11405,632],{"class":614},[609,11407,636],{"class":635},[609,11409,632],{"class":614},[609,11411,641],{"class":614},[609,11413,11415,11417,11419,11422,11424,11426,11428,11430],{"class":11414,"line":550},[611,645],[609,11416,649],{"class":648},[609,11418,652],{"class":614},[609,11420,11421],{"class":655}," useGLTF",[609,11423,665],{"class":614},[609,11425,668],{"class":648},[609,11427,671],{"class":614},[609,11429,674],{"class":635},[609,11431,677],{"class":614},[609,11433,11434],{"class":611,"line":680},[609,11435,714],{"emptyLinePlaceholder":566},[609,11437,11438,11440,11443,11445,11447,11450],{"class":611,"line":701},[609,11439,2693],{"class":622},[609,11441,11442],{"class":655}," path ",[609,11444,629],{"class":614},[609,11446,671],{"class":614},[609,11448,11449],{"class":635},"./blender-cube.glb",[609,11451,677],{"class":614},[609,11453,11455,11457,11459,11462,11464,11467,11469,11472,11474,11476,11478],{"class":11454,"line":711},[611,645],[609,11456,2693],{"class":622},[609,11458,652],{"class":614},[609,11460,11461],{"class":655}," state",[609,11463,659],{"class":614},[609,11465,11466],{"class":655}," nodes",[609,11468,659],{"class":614},[609,11470,11471],{"class":655}," materials ",[609,11473,5548],{"class":614},[609,11475,2770],{"class":614},[609,11477,11421],{"class":2804},[609,11479,11480],{"class":655},"(path)\n",[609,11482,11483,11485,11487],{"class":611,"line":717},[609,11484,704],{"class":614},[609,11486,619],{"class":618},[609,11488,641],{"class":614},[609,11490,11491],{"class":611,"line":727},[609,11492,714],{"emptyLinePlaceholder":566},[609,11494,11495,11497,11499],{"class":611,"line":750},[609,11496,615],{"class":614},[609,11498,722],{"class":618},[609,11500,641],{"class":614},[609,11502,11503,11505,11508,11511,11513,11515,11517,11519,11521,11523,11525,11527,11529,11532,11535,11537],{"class":611,"line":762},[609,11504,730],{"class":614},[609,11506,11507],{"class":618},"primitive",[609,11509,11510],{"class":648}," v-if",[609,11512,629],{"class":614},[609,11514,632],{"class":614},[609,11516,9133],{"class":655},[609,11518,632],{"class":614},[609,11520,785],{"class":614},[609,11522,10754],{"class":622},[609,11524,629],{"class":614},[609,11526,632],{"class":614},[609,11528,9133],{"class":655},[609,11530,11531],{"class":614},"?.",[609,11533,11534],{"class":655},"scene",[609,11536,632],{"class":614},[609,11538,759],{"class":614},[609,11540,11541,11543,11545],{"class":611,"line":772},[609,11542,704],{"class":614},[609,11544,722],{"class":618},[609,11546,641],{"class":614},[598,11548,11551],{"className":600,"code":11549,"filename":11550,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport TheModel from './TheModel.vue'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#F78B3D\">\n    \u003CTresPerspectiveCamera :position=\"[3, 2, 5]\" />\n    \u003COrbitControls />\n    \u003CTheModel />\n    \u003CTresDirectionalLight\n      :intensity=\"2\"\n      :position=\"[3, 3, 3]\"\n    />\n    \u003CTresAmbientLight :intensity=\"1\" />\n  \u003C/TresCanvas>\n\u003C/template>\n","app.vue",[590,11552,11553,11573,11591,11609,11626,11634,11638,11646,11665,11697,11705,11714,11721,11735,11761,11766,11786,11794],{"__ignoreMap":548},[609,11554,11555,11557,11559,11561,11563,11565,11567,11569,11571],{"class":611,"line":549},[609,11556,615],{"class":614},[609,11558,619],{"class":618},[609,11560,623],{"class":622},[609,11562,626],{"class":622},[609,11564,629],{"class":614},[609,11566,632],{"class":614},[609,11568,636],{"class":635},[609,11570,632],{"class":614},[609,11572,641],{"class":614},[609,11574,11575,11577,11579,11581,11583,11585,11587,11589],{"class":611,"line":550},[609,11576,649],{"class":648},[609,11578,652],{"class":614},[609,11580,662],{"class":655},[609,11582,665],{"class":614},[609,11584,668],{"class":648},[609,11586,671],{"class":614},[609,11588,674],{"class":635},[609,11590,677],{"class":614},[609,11592,11593,11595,11597,11599,11601,11603,11605,11607],{"class":611,"line":680},[609,11594,649],{"class":648},[609,11596,652],{"class":614},[609,11598,687],{"class":655},[609,11600,665],{"class":614},[609,11602,668],{"class":648},[609,11604,671],{"class":614},[609,11606,696],{"class":635},[609,11608,677],{"class":614},[609,11610,11611,11613,11616,11619,11621,11624],{"class":611,"line":701},[609,11612,649],{"class":648},[609,11614,11615],{"class":655}," TheModel ",[609,11617,11618],{"class":648},"from",[609,11620,671],{"class":614},[609,11622,11623],{"class":635},"./TheModel.vue",[609,11625,677],{"class":614},[609,11627,11628,11630,11632],{"class":611,"line":711},[609,11629,704],{"class":614},[609,11631,619],{"class":618},[609,11633,641],{"class":614},[609,11635,11636],{"class":611,"line":717},[609,11637,714],{"emptyLinePlaceholder":566},[609,11639,11640,11642,11644],{"class":611,"line":727},[609,11641,615],{"class":614},[609,11643,722],{"class":618},[609,11645,641],{"class":614},[609,11647,11648,11650,11652,11654,11656,11658,11661,11663],{"class":611,"line":750},[609,11649,730],{"class":614},[609,11651,733],{"class":618},[609,11653,736],{"class":622},[609,11655,629],{"class":614},[609,11657,632],{"class":614},[609,11659,11660],{"class":635},"#F78B3D",[609,11662,632],{"class":614},[609,11664,641],{"class":614},[609,11666,11667,11669,11671,11673,11675,11677,11679,11681,11683,11685,11687,11689,11691,11693,11695],{"class":611,"line":762},[609,11668,753],{"class":614},[609,11670,756],{"class":618},[609,11672,785],{"class":614},[609,11674,1463],{"class":622},[609,11676,629],{"class":614},[609,11678,632],{"class":614},[609,11680,1470],{"class":614},[609,11682,4164],{"class":795},[609,11684,1475],{"class":614},[609,11686,796],{"class":795},[609,11688,1475],{"class":614},[609,11690,2400],{"class":795},[609,11692,1485],{"class":614},[609,11694,632],{"class":614},[609,11696,759],{"class":614},[609,11698,11699,11701,11703],{"class":611,"line":772},[609,11700,753],{"class":614},[609,11702,767],{"class":618},[609,11704,759],{"class":614},[609,11706,11707,11709,11712],{"class":611,"line":777},[609,11708,753],{"class":614},[609,11710,11711],{"class":618},"TheModel",[609,11713,759],{"class":614},[609,11715,11716,11718],{"class":611,"line":803},[609,11717,753],{"class":614},[609,11719,11720],{"class":618},"TresDirectionalLight\n",[609,11722,11723,11725,11727,11729,11731,11733],{"class":611,"line":603},[609,11724,5697],{"class":614},[609,11726,1890],{"class":622},[609,11728,629],{"class":614},[609,11730,632],{"class":614},[609,11732,796],{"class":795},[609,11734,2991],{"class":614},[609,11736,11737,11739,11741,11743,11745,11747,11749,11751,11753,11755,11757,11759],{"class":611,"line":826},[609,11738,5697],{"class":614},[609,11740,1463],{"class":622},[609,11742,629],{"class":614},[609,11744,632],{"class":614},[609,11746,1470],{"class":614},[609,11748,4164],{"class":795},[609,11750,1475],{"class":614},[609,11752,4164],{"class":795},[609,11754,1475],{"class":614},[609,11756,4164],{"class":795},[609,11758,1485],{"class":614},[609,11760,2991],{"class":614},[609,11762,11763],{"class":611,"line":837},[609,11764,11765],{"class":614},"    />\n",[609,11767,11768,11770,11772,11774,11776,11778,11780,11782,11784],{"class":611,"line":848},[609,11769,753],{"class":614},[609,11771,3522],{"class":618},[609,11773,785],{"class":614},[609,11775,1890],{"class":622},[609,11777,629],{"class":614},[609,11779,632],{"class":614},[609,11781,1897],{"class":795},[609,11783,632],{"class":614},[609,11785,759],{"class":614},[609,11787,11788,11790,11792],{"class":611,"line":858},[609,11789,881],{"class":614},[609,11791,733],{"class":618},[609,11793,641],{"class":614},[609,11795,11796,11798,11800],{"class":611,"line":604},[609,11797,704],{"class":614},[609,11799,722],{"class":618},[609,11801,641],{"class":614},[586,11803,11804,11805,11807,11808,11811,11812,11817],{},"An advantage of using ",[590,11806,121],{}," is that you can pass a ",[590,11809,11810],{},"draco"," prop to enable ",[1116,11813,11816],{"href":11814,"rel":11815},"https://threejs.org/docs/index.html?q=drac#examples/en/loaders/DRACOLoader",[1120],"Draco compression"," for the model. This will reduce the size of the model and improve performance.",[598,11819,11821],{"className":1162,"code":11820,"language":636,"meta":548,"style":548},"import { useGLTF } from '@tresjs/cientos'\n\nconst { state, nodes, materials } = useGLTF('/models/AkuAku.gltf', { draco: true })\n",[590,11822,11823,11841,11845],{"__ignoreMap":548},[609,11824,11825,11827,11829,11831,11833,11835,11837,11839],{"class":611,"line":549},[609,11826,649],{"class":648},[609,11828,652],{"class":614},[609,11830,11421],{"class":655},[609,11832,665],{"class":614},[609,11834,668],{"class":648},[609,11836,671],{"class":614},[609,11838,674],{"class":635},[609,11840,677],{"class":614},[609,11842,11843],{"class":611,"line":550},[609,11844,714],{"emptyLinePlaceholder":566},[609,11846,11847,11849,11851,11853,11855,11857,11859,11861,11863,11865,11867,11869,11871,11874,11876,11878,11880,11883,11885,11888,11890],{"class":611,"line":680},[609,11848,2693],{"class":622},[609,11850,652],{"class":614},[609,11852,11461],{"class":655},[609,11854,659],{"class":614},[609,11856,11466],{"class":655},[609,11858,659],{"class":614},[609,11860,11471],{"class":655},[609,11862,5548],{"class":614},[609,11864,2770],{"class":614},[609,11866,11421],{"class":2804},[609,11868,2974],{"class":655},[609,11870,5540],{"class":614},[609,11872,11873],{"class":635},"/models/AkuAku.gltf",[609,11875,5540],{"class":614},[609,11877,659],{"class":614},[609,11879,652],{"class":614},[609,11881,11882],{"class":618}," draco",[609,11884,1194],{"class":614},[609,11886,11887],{"class":3874}," true",[609,11889,665],{"class":614},[609,11891,5543],{"class":655},[476,11893,11895],{"id":11894},"return-values","Return Values",[903,11897,11898,11909],{},[906,11899,11900],{},[909,11901,11902,11904,11907],{},[912,11903,3122],{"align":973},[912,11905,11906],{},"Type",[912,11908,917],{},[922,11910,11911,11925,11939,11952,11967,11981],{},[909,11912,11913,11917,11922],{},[927,11914,11915],{"align":973},[1677,11916,9133],{},[927,11918,11919],{},[590,11920,11921],{},"GLTF",[927,11923,11924],{},"The loaded GLTF model state",[909,11926,11927,11932,11936],{},[927,11928,11929],{"align":973},[1677,11930,11931],{},"nodes",[927,11933,11934],{},[590,11935,10754],{},[927,11937,11938],{},"Computed object containing all nodes in the scene",[909,11940,11941,11945,11949],{},[927,11942,11943],{"align":973},[1677,11944,500],{},[927,11946,11947],{},[590,11948,10754],{},[927,11950,11951],{},"Computed object containing all materials in the scene",[909,11953,11954,11959,11964],{},[927,11955,11956],{"align":973},[1677,11957,11958],{},"isLoading",[927,11960,11961],{},[590,11962,11963],{},"boolean",[927,11965,11966],{},"Whether the model is currently loading",[909,11968,11969,11974,11978],{},[927,11970,11971],{"align":973},[1677,11972,11973],{},"progress",[927,11975,11976],{},[590,11977,2541],{},[927,11979,11980],{},"The progress of the model loading",[909,11982,11983,11988,11993],{},[927,11984,11985],{"align":973},[1677,11986,11987],{},"load",[927,11989,11990],{},[590,11991,11992],{},"() => Promise\u003Cvoid>",[927,11994,11995],{},"Function to reload the model",[476,11997,7491],{"id":11998},"options",[903,12000,12001,12013],{},[906,12002,12003],{},[909,12004,12005,12007,12009,12011],{},[912,12006,3122],{"align":973},[912,12008,11906],{},[912,12010,920],{},[912,12012,917],{},[922,12014,12015,12032,12052],{},[909,12016,12017,12021,12025,12029],{},[927,12018,12019],{"align":973},[1677,12020,11810],{},[927,12022,12023],{},[590,12024,11963],{},[927,12026,12027],{},[590,12028,947],{},[927,12030,12031],{},"Whether to enable Draco compression.",[909,12033,12034,12039,12044,12049],{},[927,12035,12036],{"align":973},[1677,12037,12038],{},"decoderPath",[927,12040,12041],{},[590,12042,12043],{},"string",[927,12045,12046],{},[590,12047,12048],{},"'https://www.gstatic.com/draco/versioned/decoders/1.5.6/'",[927,12050,12051],{},"Path to the Draco decoder.",[909,12053,12054,12059,12063,12065],{},[927,12055,12056],{"align":973},[1677,12057,12058],{},"traverse",[927,12060,12061],{},[590,12062,5346],{},[927,12064],{},[927,12066,12067],{},"A traverse function applied to the scene upon loading the model.",[476,12069,12071],{"id":12070},"accessing-nodes-and-materials","Accessing Nodes and Materials",[586,12073,12074],{},"The composable provides computed properties to easily access nodes and materials in your scene:",[598,12076,12078],{"className":1162,"code":12077,"language":636,"meta":548,"style":548},"const { nodes, materials } = useGLTF('/model.glb')\n\n// Access a specific node\nconst mesh = nodes.value.MeshName\n\n// Access a specific material\nconst material = materials.value.MaterialName\n",[590,12079,12080,12109,12113,12118,12138,12142,12147],{"__ignoreMap":548},[609,12081,12082,12084,12086,12088,12090,12092,12094,12096,12098,12100,12102,12105,12107],{"class":611,"line":549},[609,12083,2693],{"class":622},[609,12085,652],{"class":614},[609,12087,11466],{"class":655},[609,12089,659],{"class":614},[609,12091,11471],{"class":655},[609,12093,5548],{"class":614},[609,12095,2770],{"class":614},[609,12097,11421],{"class":2804},[609,12099,2974],{"class":655},[609,12101,5540],{"class":614},[609,12103,12104],{"class":635},"/model.glb",[609,12106,5540],{"class":614},[609,12108,5543],{"class":655},[609,12110,12111],{"class":611,"line":550},[609,12112,714],{"emptyLinePlaceholder":566},[609,12114,12115],{"class":611,"line":680},[609,12116,12117],{"class":1185},"// Access a specific node\n",[609,12119,12120,12122,12125,12127,12129,12131,12133,12135],{"class":611,"line":701},[609,12121,2693],{"class":622},[609,12123,12124],{"class":655}," mesh ",[609,12126,629],{"class":614},[609,12128,11466],{"class":655},[609,12130,1122],{"class":614},[609,12132,5500],{"class":655},[609,12134,1122],{"class":614},[609,12136,12137],{"class":655},"MeshName\n",[609,12139,12140],{"class":611,"line":711},[609,12141,714],{"emptyLinePlaceholder":566},[609,12143,12144],{"class":611,"line":717},[609,12145,12146],{"class":1185},"// Access a specific material\n",[609,12148,12149,12151,12154,12156,12159,12161,12163,12165],{"class":611,"line":727},[609,12150,2693],{"class":622},[609,12152,12153],{"class":655}," material ",[609,12155,629],{"class":614},[609,12157,12158],{"class":655}," materials",[609,12160,1122],{"class":614},[609,12162,5500],{"class":655},[609,12164,1122],{"class":614},[609,12166,12167],{"class":655},"MaterialName\n",[586,12169,12170],{},"This makes it easier to manipulate specific parts of your model or apply materials programmatically.",[1303,12172,12173],{},"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);}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html 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":548,"searchDepth":549,"depth":550,"links":12175},[12176,12177,12178,12179],{"id":596,"depth":550,"text":15},{"id":11894,"depth":550,"text":11895},{"id":11998,"depth":550,"text":7491},{"id":12070,"depth":550,"text":12071},"A composable to load GLTF models in TresJS scenes.",{},{"title":121,"description":12180},"a8ph-37nMzF-TmW17rRFWQHDIwN83OfaztvKYiWzP30",{"id":12185,"title":125,"body":12186,"description":12903,"extension":563,"links":564,"meta":12904,"navigation":566,"path":126,"seo":12905,"stem":127,"__hash__":12906},"docs/2.api/3.loaders/2.gltf-model.md",{"type":473,"value":12187,"toc":12898},[12188,12192,12203,12205,12567,12571,12581,12802,12804,12895],[2562,12189,12190],{},[11371,12191],{},[586,12193,2257,12194,12196,12197,12202],{},[590,12195,125],{}," component is a wrapper around ",[1116,12198,12200],{"href":12199},"./use-gltf",[590,12201,121],{}," composable and accepts the same options as props.",[476,12204,15],{"id":596},[11383,12206,12207,12321],{},[598,12208,12211],{"className":600,"code":12209,"filename":11388,"highlights":12210,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { GLTFModel } from '@tresjs/cientos'\n\nconst path = './blender-cube.glb'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CGLTFModel :path=\"path\" />\n\u003C/template>\n",[550,750],[590,12212,12213,12233,12253,12257,12271,12279,12283,12291,12313],{"__ignoreMap":548},[609,12214,12215,12217,12219,12221,12223,12225,12227,12229,12231],{"class":611,"line":549},[609,12216,615],{"class":614},[609,12218,619],{"class":618},[609,12220,623],{"class":622},[609,12222,626],{"class":622},[609,12224,629],{"class":614},[609,12226,632],{"class":614},[609,12228,636],{"class":635},[609,12230,632],{"class":614},[609,12232,641],{"class":614},[609,12234,12236,12238,12240,12243,12245,12247,12249,12251],{"class":12235,"line":550},[611,645],[609,12237,649],{"class":648},[609,12239,652],{"class":614},[609,12241,12242],{"class":655}," GLTFModel",[609,12244,665],{"class":614},[609,12246,668],{"class":648},[609,12248,671],{"class":614},[609,12250,674],{"class":635},[609,12252,677],{"class":614},[609,12254,12255],{"class":611,"line":680},[609,12256,714],{"emptyLinePlaceholder":566},[609,12258,12259,12261,12263,12265,12267,12269],{"class":611,"line":701},[609,12260,2693],{"class":622},[609,12262,11442],{"class":655},[609,12264,629],{"class":614},[609,12266,671],{"class":614},[609,12268,11449],{"class":635},[609,12270,677],{"class":614},[609,12272,12273,12275,12277],{"class":611,"line":711},[609,12274,704],{"class":614},[609,12276,619],{"class":618},[609,12278,641],{"class":614},[609,12280,12281],{"class":611,"line":717},[609,12282,714],{"emptyLinePlaceholder":566},[609,12284,12285,12287,12289],{"class":611,"line":727},[609,12286,615],{"class":614},[609,12288,722],{"class":618},[609,12290,641],{"class":614},[609,12292,12294,12296,12298,12300,12303,12305,12307,12309,12311],{"class":12293,"line":750},[611,645],[609,12295,730],{"class":614},[609,12297,125],{"class":618},[609,12299,785],{"class":614},[609,12301,12302],{"class":622},"path",[609,12304,629],{"class":614},[609,12306,632],{"class":614},[609,12308,12302],{"class":655},[609,12310,632],{"class":614},[609,12312,759],{"class":614},[609,12314,12315,12317,12319],{"class":611,"line":762},[609,12316,704],{"class":614},[609,12318,722],{"class":618},[609,12320,641],{"class":614},[598,12322,12323],{"className":600,"code":11549,"filename":11550,"language":605,"meta":548,"style":548},[590,12324,12325,12345,12363,12381,12395,12403,12407,12415,12433,12465,12473,12481,12487,12501,12527,12531,12551,12559],{"__ignoreMap":548},[609,12326,12327,12329,12331,12333,12335,12337,12339,12341,12343],{"class":611,"line":549},[609,12328,615],{"class":614},[609,12330,619],{"class":618},[609,12332,623],{"class":622},[609,12334,626],{"class":622},[609,12336,629],{"class":614},[609,12338,632],{"class":614},[609,12340,636],{"class":635},[609,12342,632],{"class":614},[609,12344,641],{"class":614},[609,12346,12347,12349,12351,12353,12355,12357,12359,12361],{"class":611,"line":550},[609,12348,649],{"class":648},[609,12350,652],{"class":614},[609,12352,662],{"class":655},[609,12354,665],{"class":614},[609,12356,668],{"class":648},[609,12358,671],{"class":614},[609,12360,674],{"class":635},[609,12362,677],{"class":614},[609,12364,12365,12367,12369,12371,12373,12375,12377,12379],{"class":611,"line":680},[609,12366,649],{"class":648},[609,12368,652],{"class":614},[609,12370,687],{"class":655},[609,12372,665],{"class":614},[609,12374,668],{"class":648},[609,12376,671],{"class":614},[609,12378,696],{"class":635},[609,12380,677],{"class":614},[609,12382,12383,12385,12387,12389,12391,12393],{"class":611,"line":701},[609,12384,649],{"class":648},[609,12386,11615],{"class":655},[609,12388,11618],{"class":648},[609,12390,671],{"class":614},[609,12392,11623],{"class":635},[609,12394,677],{"class":614},[609,12396,12397,12399,12401],{"class":611,"line":711},[609,12398,704],{"class":614},[609,12400,619],{"class":618},[609,12402,641],{"class":614},[609,12404,12405],{"class":611,"line":717},[609,12406,714],{"emptyLinePlaceholder":566},[609,12408,12409,12411,12413],{"class":611,"line":727},[609,12410,615],{"class":614},[609,12412,722],{"class":618},[609,12414,641],{"class":614},[609,12416,12417,12419,12421,12423,12425,12427,12429,12431],{"class":611,"line":750},[609,12418,730],{"class":614},[609,12420,733],{"class":618},[609,12422,736],{"class":622},[609,12424,629],{"class":614},[609,12426,632],{"class":614},[609,12428,11660],{"class":635},[609,12430,632],{"class":614},[609,12432,641],{"class":614},[609,12434,12435,12437,12439,12441,12443,12445,12447,12449,12451,12453,12455,12457,12459,12461,12463],{"class":611,"line":762},[609,12436,753],{"class":614},[609,12438,756],{"class":618},[609,12440,785],{"class":614},[609,12442,1463],{"class":622},[609,12444,629],{"class":614},[609,12446,632],{"class":614},[609,12448,1470],{"class":614},[609,12450,4164],{"class":795},[609,12452,1475],{"class":614},[609,12454,796],{"class":795},[609,12456,1475],{"class":614},[609,12458,2400],{"class":795},[609,12460,1485],{"class":614},[609,12462,632],{"class":614},[609,12464,759],{"class":614},[609,12466,12467,12469,12471],{"class":611,"line":772},[609,12468,753],{"class":614},[609,12470,767],{"class":618},[609,12472,759],{"class":614},[609,12474,12475,12477,12479],{"class":611,"line":777},[609,12476,753],{"class":614},[609,12478,11711],{"class":618},[609,12480,759],{"class":614},[609,12482,12483,12485],{"class":611,"line":803},[609,12484,753],{"class":614},[609,12486,11720],{"class":618},[609,12488,12489,12491,12493,12495,12497,12499],{"class":611,"line":603},[609,12490,5697],{"class":614},[609,12492,1890],{"class":622},[609,12494,629],{"class":614},[609,12496,632],{"class":614},[609,12498,796],{"class":795},[609,12500,2991],{"class":614},[609,12502,12503,12505,12507,12509,12511,12513,12515,12517,12519,12521,12523,12525],{"class":611,"line":826},[609,12504,5697],{"class":614},[609,12506,1463],{"class":622},[609,12508,629],{"class":614},[609,12510,632],{"class":614},[609,12512,1470],{"class":614},[609,12514,4164],{"class":795},[609,12516,1475],{"class":614},[609,12518,4164],{"class":795},[609,12520,1475],{"class":614},[609,12522,4164],{"class":795},[609,12524,1485],{"class":614},[609,12526,2991],{"class":614},[609,12528,12529],{"class":611,"line":837},[609,12530,11765],{"class":614},[609,12532,12533,12535,12537,12539,12541,12543,12545,12547,12549],{"class":611,"line":848},[609,12534,753],{"class":614},[609,12536,3522],{"class":618},[609,12538,785],{"class":614},[609,12540,1890],{"class":622},[609,12542,629],{"class":614},[609,12544,632],{"class":614},[609,12546,1897],{"class":795},[609,12548,632],{"class":614},[609,12550,759],{"class":614},[609,12552,12553,12555,12557],{"class":611,"line":858},[609,12554,881],{"class":614},[609,12556,733],{"class":618},[609,12558,641],{"class":614},[609,12560,12561,12563,12565],{"class":611,"line":604},[609,12562,704],{"class":614},[609,12564,722],{"class":618},[609,12566,641],{"class":614},[476,12568,12570],{"id":12569},"model-reference","Model reference",[586,12572,12573,12574,1684,12577,12580],{},"You can access the model reference by passing a ",[590,12575,12576],{},"ref",[590,12578,12579],{},"model"," prop and then using to get the object.",[598,12582,12584],{"className":600,"code":12583,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport type { TresObject } from 'tresjs'\nimport { GLTFModel } from '@tresjs/cientos'\n\nconst modelRef = shallowRef\u003CTresObject>()\n\nwatch(modelRef, (model) => {\n  // Do something with the model\n  model.position.set(0, 0, 0)\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CGLTFModel\n    ref=\"modelRef\"\n    path=\"https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb\"\n  />\n\u003C/template>\n",[590,12585,12586,12606,12629,12647,12651,12672,12676,12695,12700,12729,12735,12743,12747,12755,12762,12776,12790,12794],{"__ignoreMap":548},[609,12587,12588,12590,12592,12594,12596,12598,12600,12602,12604],{"class":611,"line":549},[609,12589,615],{"class":614},[609,12591,619],{"class":618},[609,12593,623],{"class":622},[609,12595,626],{"class":622},[609,12597,629],{"class":614},[609,12599,632],{"class":614},[609,12601,636],{"class":635},[609,12603,632],{"class":614},[609,12605,641],{"class":614},[609,12607,12608,12610,12613,12615,12618,12620,12622,12624,12627],{"class":611,"line":550},[609,12609,649],{"class":648},[609,12611,12612],{"class":648}," type",[609,12614,652],{"class":614},[609,12616,12617],{"class":655}," TresObject",[609,12619,665],{"class":614},[609,12621,668],{"class":648},[609,12623,671],{"class":614},[609,12625,12626],{"class":635},"tresjs",[609,12628,677],{"class":614},[609,12630,12631,12633,12635,12637,12639,12641,12643,12645],{"class":611,"line":680},[609,12632,649],{"class":648},[609,12634,652],{"class":614},[609,12636,12242],{"class":655},[609,12638,665],{"class":614},[609,12640,668],{"class":648},[609,12642,671],{"class":614},[609,12644,674],{"class":635},[609,12646,677],{"class":614},[609,12648,12649],{"class":611,"line":701},[609,12650,714],{"emptyLinePlaceholder":566},[609,12652,12653,12655,12658,12660,12662,12664,12667,12670],{"class":611,"line":711},[609,12654,2693],{"class":622},[609,12656,12657],{"class":655}," modelRef ",[609,12659,629],{"class":614},[609,12661,7909],{"class":2804},[609,12663,615],{"class":614},[609,12665,12666],{"class":1176},"TresObject",[609,12668,12669],{"class":614},">",[609,12671,2850],{"class":655},[609,12673,12674],{"class":611,"line":717},[609,12675,714],{"emptyLinePlaceholder":566},[609,12677,12678,12680,12683,12685,12687,12689,12691,12693],{"class":611,"line":727},[609,12679,5489],{"class":2804},[609,12681,12682],{"class":655},"(modelRef",[609,12684,659],{"class":614},[609,12686,2717],{"class":614},[609,12688,12579],{"class":5499},[609,12690,4129],{"class":614},[609,12692,5505],{"class":622},[609,12694,1180],{"class":614},[609,12696,12697],{"class":611,"line":750},[609,12698,12699],{"class":1185},"  // Do something with the model\n",[609,12701,12702,12705,12707,12709,12711,12714,12716,12718,12720,12723,12725,12727],{"class":611,"line":762},[609,12703,12704],{"class":655},"  model",[609,12706,1122],{"class":614},[609,12708,1463],{"class":655},[609,12710,1122],{"class":614},[609,12712,12713],{"class":2804},"set",[609,12715,2974],{"class":618},[609,12717,941],{"class":795},[609,12719,659],{"class":614},[609,12721,12722],{"class":795}," 0",[609,12724,659],{"class":614},[609,12726,12722],{"class":795},[609,12728,5543],{"class":618},[609,12730,12731,12733],{"class":611,"line":772},[609,12732,5548],{"class":614},[609,12734,5543],{"class":655},[609,12736,12737,12739,12741],{"class":611,"line":777},[609,12738,704],{"class":614},[609,12740,619],{"class":618},[609,12742,641],{"class":614},[609,12744,12745],{"class":611,"line":803},[609,12746,714],{"emptyLinePlaceholder":566},[609,12748,12749,12751,12753],{"class":611,"line":603},[609,12750,615],{"class":614},[609,12752,722],{"class":618},[609,12754,641],{"class":614},[609,12756,12757,12759],{"class":611,"line":826},[609,12758,730],{"class":614},[609,12760,12761],{"class":618},"GLTFModel\n",[609,12763,12764,12767,12769,12771,12774],{"class":611,"line":837},[609,12765,12766],{"class":622},"    ref",[609,12768,629],{"class":614},[609,12770,632],{"class":614},[609,12772,12773],{"class":635},"modelRef",[609,12775,2991],{"class":614},[609,12777,12778,12781,12783,12785,12788],{"class":611,"line":848},[609,12779,12780],{"class":622},"    path",[609,12782,629],{"class":614},[609,12784,632],{"class":614},[609,12786,12787],{"class":635},"https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb",[609,12789,2991],{"class":614},[609,12791,12792],{"class":611,"line":858},[609,12793,7463],{"class":614},[609,12795,12796,12798,12800],{"class":611,"line":604},[609,12797,704],{"class":614},[609,12799,722],{"class":618},[609,12801,641],{"class":614},[476,12803,898],{"id":897},[903,12805,12806,12816],{},[906,12807,12808],{},[909,12809,12810,12812,12814],{},[912,12811,914],{"align":973},[912,12813,917],{"align":973},[912,12815,920],{},[922,12817,12818,12831,12848,12861,12879],{},[909,12819,12820,12824,12827],{},[927,12821,12822],{"align":973},[590,12823,12302],{},[927,12825,12826],{"align":973},"Path to the model file.",[927,12828,12829],{},[590,12830,1155],{},[909,12832,12833,12837,12844],{},[927,12834,12835],{"align":973},[590,12836,11810],{},[927,12838,12839,12840,12843],{"align":973},"Enable ",[1116,12841,11816],{"href":11814,"rel":12842},[1120]," for the model.",[927,12845,12846],{},[590,12847,947],{},[909,12849,12850,12854,12857],{},[927,12851,12852],{"align":973},[590,12853,12038],{},[927,12855,12856],{"align":973},"Path to a local Draco decoder.",[927,12858,12859],{},[590,12860,1155],{},[909,12862,12863,12868,12875],{},[927,12864,12865],{"align":973},[590,12866,12867],{},"castShadow",[927,12869,12870,12871,12874],{"align":973},"Apply ",[590,12872,12873],{},"cast-shadow"," to all meshes inside your model.",[927,12876,12877],{},[590,12878,947],{},[909,12880,12881,12886,12891],{},[927,12882,12883],{"align":973},[590,12884,12885],{},"receiveShadow",[927,12887,12870,12888,12874],{"align":973},[590,12889,12890],{},"receive-shadow",[927,12892,12893],{},[590,12894,947],{},[1303,12896,12897],{},"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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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":548,"searchDepth":549,"depth":550,"links":12899},[12900,12901,12902],{"id":596,"depth":550,"text":15},{"id":12569,"depth":550,"text":12570},{"id":897,"depth":550,"text":898},"A component based on useGLTF to load models in TresJS scenes.",{},{"title":125,"description":12903},"JWe9EOh88vpjOxxjTHRWWuR-5fc1X6B09G1a16LfXnY",{"id":12908,"title":129,"body":12909,"description":13555,"extension":563,"links":564,"meta":13556,"navigation":566,"path":130,"seo":13557,"stem":131,"__hash__":13558},"docs/2.api/3.loaders/3.use-fbx.md",{"type":473,"value":12910,"toc":13549},[12911,12916,12921,12923,13347,13349,13426,13428,13454,13456,13458,13544,13546],[2562,12912,12913],{},[12914,12915],"loaders-fbx",{},[586,12917,12918,12919,11379],{},"A composable that allows you to easily load FBX models into your ",[1677,12920,11378],{},[476,12922,15],{"id":596},[11383,12924,12925,13098],{},[598,12926,12929],{"className":600,"code":12927,"filename":11388,"highlights":12928,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { useFBX } from '@tresjs/cientos'\n\nconst path = 'https://raw.githubusercontent.com/'\n  + 'Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx'\nconst { state, nodes, materials } = useFBX(path)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cprimitive v-if=\"state\" :object=\"state\" :scale=\"0.025\" />\n\u003C/template>\n",[550,717],[590,12930,12931,12951,12971,12975,12990,13002,13027,13035,13039,13047,13090],{"__ignoreMap":548},[609,12932,12933,12935,12937,12939,12941,12943,12945,12947,12949],{"class":611,"line":549},[609,12934,615],{"class":614},[609,12936,619],{"class":618},[609,12938,623],{"class":622},[609,12940,626],{"class":622},[609,12942,629],{"class":614},[609,12944,632],{"class":614},[609,12946,636],{"class":635},[609,12948,632],{"class":614},[609,12950,641],{"class":614},[609,12952,12954,12956,12958,12961,12963,12965,12967,12969],{"class":12953,"line":550},[611,645],[609,12955,649],{"class":648},[609,12957,652],{"class":614},[609,12959,12960],{"class":655}," useFBX",[609,12962,665],{"class":614},[609,12964,668],{"class":648},[609,12966,671],{"class":614},[609,12968,674],{"class":635},[609,12970,677],{"class":614},[609,12972,12973],{"class":611,"line":680},[609,12974,714],{"emptyLinePlaceholder":566},[609,12976,12977,12979,12981,12983,12985,12988],{"class":611,"line":701},[609,12978,2693],{"class":622},[609,12980,11442],{"class":655},[609,12982,629],{"class":614},[609,12984,671],{"class":614},[609,12986,12987],{"class":635},"https://raw.githubusercontent.com/",[609,12989,677],{"class":614},[609,12991,12992,12995,12997,13000],{"class":611,"line":711},[609,12993,12994],{"class":614},"  +",[609,12996,671],{"class":614},[609,12998,12999],{"class":635},"Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx",[609,13001,677],{"class":614},[609,13003,13005,13007,13009,13011,13013,13015,13017,13019,13021,13023,13025],{"class":13004,"line":717},[611,645],[609,13006,2693],{"class":622},[609,13008,652],{"class":614},[609,13010,11461],{"class":655},[609,13012,659],{"class":614},[609,13014,11466],{"class":655},[609,13016,659],{"class":614},[609,13018,11471],{"class":655},[609,13020,5548],{"class":614},[609,13022,2770],{"class":614},[609,13024,12960],{"class":2804},[609,13026,11480],{"class":655},[609,13028,13029,13031,13033],{"class":611,"line":727},[609,13030,704],{"class":614},[609,13032,619],{"class":618},[609,13034,641],{"class":614},[609,13036,13037],{"class":611,"line":750},[609,13038,714],{"emptyLinePlaceholder":566},[609,13040,13041,13043,13045],{"class":611,"line":762},[609,13042,615],{"class":614},[609,13044,722],{"class":618},[609,13046,641],{"class":614},[609,13048,13049,13051,13053,13055,13057,13059,13061,13063,13065,13067,13069,13071,13073,13075,13077,13079,13081,13083,13086,13088],{"class":611,"line":772},[609,13050,730],{"class":614},[609,13052,11507],{"class":618},[609,13054,11510],{"class":648},[609,13056,629],{"class":614},[609,13058,632],{"class":614},[609,13060,9133],{"class":655},[609,13062,632],{"class":614},[609,13064,785],{"class":614},[609,13066,10754],{"class":622},[609,13068,629],{"class":614},[609,13070,632],{"class":614},[609,13072,9133],{"class":655},[609,13074,632],{"class":614},[609,13076,785],{"class":614},[609,13078,788],{"class":622},[609,13080,629],{"class":614},[609,13082,632],{"class":614},[609,13084,13085],{"class":795},"0.025",[609,13087,632],{"class":614},[609,13089,759],{"class":614},[609,13091,13092,13094,13096],{"class":611,"line":777},[609,13093,704],{"class":614},[609,13095,722],{"class":618},[609,13097,641],{"class":614},[598,13099,13101],{"className":600,"code":13100,"filename":11550,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport TheModel from './TheModel.vue'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#1F90FF\">\n    \u003CTresPerspectiveCamera :position=\"[11, 11, 11]\" />\n    \u003COrbitControls />\n    \u003CTheModel />\n    \u003CTresDirectionalLight\n      :intensity=\"2\"\n      :position=\"[3, 3, 3]\"\n    />\n    \u003CTresAmbientLight :intensity=\"1\" />\n  \u003C/TresCanvas>\n\u003C/template>\n",[590,13102,13103,13123,13141,13159,13173,13181,13185,13193,13212,13245,13253,13261,13267,13281,13307,13311,13331,13339],{"__ignoreMap":548},[609,13104,13105,13107,13109,13111,13113,13115,13117,13119,13121],{"class":611,"line":549},[609,13106,615],{"class":614},[609,13108,619],{"class":618},[609,13110,623],{"class":622},[609,13112,626],{"class":622},[609,13114,629],{"class":614},[609,13116,632],{"class":614},[609,13118,636],{"class":635},[609,13120,632],{"class":614},[609,13122,641],{"class":614},[609,13124,13125,13127,13129,13131,13133,13135,13137,13139],{"class":611,"line":550},[609,13126,649],{"class":648},[609,13128,652],{"class":614},[609,13130,662],{"class":655},[609,13132,665],{"class":614},[609,13134,668],{"class":648},[609,13136,671],{"class":614},[609,13138,674],{"class":635},[609,13140,677],{"class":614},[609,13142,13143,13145,13147,13149,13151,13153,13155,13157],{"class":611,"line":680},[609,13144,649],{"class":648},[609,13146,652],{"class":614},[609,13148,687],{"class":655},[609,13150,665],{"class":614},[609,13152,668],{"class":648},[609,13154,671],{"class":614},[609,13156,696],{"class":635},[609,13158,677],{"class":614},[609,13160,13161,13163,13165,13167,13169,13171],{"class":611,"line":701},[609,13162,649],{"class":648},[609,13164,11615],{"class":655},[609,13166,11618],{"class":648},[609,13168,671],{"class":614},[609,13170,11623],{"class":635},[609,13172,677],{"class":614},[609,13174,13175,13177,13179],{"class":611,"line":711},[609,13176,704],{"class":614},[609,13178,619],{"class":618},[609,13180,641],{"class":614},[609,13182,13183],{"class":611,"line":717},[609,13184,714],{"emptyLinePlaceholder":566},[609,13186,13187,13189,13191],{"class":611,"line":727},[609,13188,615],{"class":614},[609,13190,722],{"class":618},[609,13192,641],{"class":614},[609,13194,13195,13197,13199,13201,13203,13205,13208,13210],{"class":611,"line":750},[609,13196,730],{"class":614},[609,13198,733],{"class":618},[609,13200,736],{"class":622},[609,13202,629],{"class":614},[609,13204,632],{"class":614},[609,13206,13207],{"class":635},"#1F90FF",[609,13209,632],{"class":614},[609,13211,641],{"class":614},[609,13213,13214,13216,13218,13220,13222,13224,13226,13228,13231,13233,13235,13237,13239,13241,13243],{"class":611,"line":762},[609,13215,753],{"class":614},[609,13217,756],{"class":618},[609,13219,785],{"class":614},[609,13221,1463],{"class":622},[609,13223,629],{"class":614},[609,13225,632],{"class":614},[609,13227,1470],{"class":614},[609,13229,13230],{"class":795},"11",[609,13232,1475],{"class":614},[609,13234,13230],{"class":795},[609,13236,1475],{"class":614},[609,13238,13230],{"class":795},[609,13240,1485],{"class":614},[609,13242,632],{"class":614},[609,13244,759],{"class":614},[609,13246,13247,13249,13251],{"class":611,"line":772},[609,13248,753],{"class":614},[609,13250,767],{"class":618},[609,13252,759],{"class":614},[609,13254,13255,13257,13259],{"class":611,"line":777},[609,13256,753],{"class":614},[609,13258,11711],{"class":618},[609,13260,759],{"class":614},[609,13262,13263,13265],{"class":611,"line":803},[609,13264,753],{"class":614},[609,13266,11720],{"class":618},[609,13268,13269,13271,13273,13275,13277,13279],{"class":611,"line":603},[609,13270,5697],{"class":614},[609,13272,1890],{"class":622},[609,13274,629],{"class":614},[609,13276,632],{"class":614},[609,13278,796],{"class":795},[609,13280,2991],{"class":614},[609,13282,13283,13285,13287,13289,13291,13293,13295,13297,13299,13301,13303,13305],{"class":611,"line":826},[609,13284,5697],{"class":614},[609,13286,1463],{"class":622},[609,13288,629],{"class":614},[609,13290,632],{"class":614},[609,13292,1470],{"class":614},[609,13294,4164],{"class":795},[609,13296,1475],{"class":614},[609,13298,4164],{"class":795},[609,13300,1475],{"class":614},[609,13302,4164],{"class":795},[609,13304,1485],{"class":614},[609,13306,2991],{"class":614},[609,13308,13309],{"class":611,"line":837},[609,13310,11765],{"class":614},[609,13312,13313,13315,13317,13319,13321,13323,13325,13327,13329],{"class":611,"line":848},[609,13314,753],{"class":614},[609,13316,3522],{"class":618},[609,13318,785],{"class":614},[609,13320,1890],{"class":622},[609,13322,629],{"class":614},[609,13324,632],{"class":614},[609,13326,1897],{"class":795},[609,13328,632],{"class":614},[609,13330,759],{"class":614},[609,13332,13333,13335,13337],{"class":611,"line":858},[609,13334,881],{"class":614},[609,13336,733],{"class":618},[609,13338,641],{"class":614},[609,13340,13341,13343,13345],{"class":611,"line":604},[609,13342,704],{"class":614},[609,13344,722],{"class":618},[609,13346,641],{"class":614},[476,13348,11895],{"id":11894},[903,13350,13351,13361],{},[906,13352,13353],{},[909,13354,13355,13357,13359],{},[912,13356,3122],{"align":973},[912,13358,11906],{},[912,13360,917],{},[922,13362,13363,13377,13389,13401,13413],{},[909,13364,13365,13369,13374],{},[927,13366,13367],{"align":973},[1677,13368,9133],{},[927,13370,13371],{},[590,13372,13373],{},"Group",[927,13375,13376],{},"The loaded FBX model state",[909,13378,13379,13383,13387],{},[927,13380,13381],{"align":973},[1677,13382,11931],{},[927,13384,13385],{},[590,13386,10754],{},[927,13388,11938],{},[909,13390,13391,13395,13399],{},[927,13392,13393],{"align":973},[1677,13394,500],{},[927,13396,13397],{},[590,13398,10754],{},[927,13400,11951],{},[909,13402,13403,13407,13411],{},[927,13404,13405],{"align":973},[1677,13406,11958],{},[927,13408,13409],{},[590,13410,11963],{},[927,13412,11966],{},[909,13414,13415,13420,13424],{},[927,13416,13417],{"align":973},[1677,13418,13419],{},"execute",[927,13421,13422],{},[590,13423,11992],{},[927,13425,11995],{},[476,13427,7491],{"id":11998},[903,13429,13430,13440],{},[906,13431,13432],{},[909,13433,13434,13436,13438],{},[912,13435,3122],{"align":973},[912,13437,11906],{},[912,13439,917],{},[922,13441,13442],{},[909,13443,13444,13448,13452],{},[927,13445,13446],{"align":973},[1677,13447,12058],{},[927,13449,13450],{},[590,13451,5346],{},[927,13453,12067],{},[476,13455,12071],{"id":12070},[586,13457,12074],{},[598,13459,13461],{"className":1162,"code":13460,"language":636,"meta":548,"style":548},"const { nodes, materials } = useFBX('/model.fbx')\n\n// Access a specific node\nconst mesh = nodes.value.MeshName\n\n// Access a specific material\nconst material = materials.value.MaterialName\n",[590,13462,13463,13492,13496,13500,13518,13522,13526],{"__ignoreMap":548},[609,13464,13465,13467,13469,13471,13473,13475,13477,13479,13481,13483,13485,13488,13490],{"class":611,"line":549},[609,13466,2693],{"class":622},[609,13468,652],{"class":614},[609,13470,11466],{"class":655},[609,13472,659],{"class":614},[609,13474,11471],{"class":655},[609,13476,5548],{"class":614},[609,13478,2770],{"class":614},[609,13480,12960],{"class":2804},[609,13482,2974],{"class":655},[609,13484,5540],{"class":614},[609,13486,13487],{"class":635},"/model.fbx",[609,13489,5540],{"class":614},[609,13491,5543],{"class":655},[609,13493,13494],{"class":611,"line":550},[609,13495,714],{"emptyLinePlaceholder":566},[609,13497,13498],{"class":611,"line":680},[609,13499,12117],{"class":1185},[609,13501,13502,13504,13506,13508,13510,13512,13514,13516],{"class":611,"line":701},[609,13503,2693],{"class":622},[609,13505,12124],{"class":655},[609,13507,629],{"class":614},[609,13509,11466],{"class":655},[609,13511,1122],{"class":614},[609,13513,5500],{"class":655},[609,13515,1122],{"class":614},[609,13517,12137],{"class":655},[609,13519,13520],{"class":611,"line":711},[609,13521,714],{"emptyLinePlaceholder":566},[609,13523,13524],{"class":611,"line":717},[609,13525,12146],{"class":1185},[609,13527,13528,13530,13532,13534,13536,13538,13540,13542],{"class":611,"line":727},[609,13529,2693],{"class":622},[609,13531,12153],{"class":655},[609,13533,629],{"class":614},[609,13535,12158],{"class":655},[609,13537,1122],{"class":614},[609,13539,5500],{"class":655},[609,13541,1122],{"class":614},[609,13543,12167],{"class":655},[586,13545,12170],{},[1303,13547,13548],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .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":548,"searchDepth":549,"depth":550,"links":13550},[13551,13552,13553,13554],{"id":596,"depth":550,"text":15},{"id":11894,"depth":550,"text":11895},{"id":11998,"depth":550,"text":7491},{"id":12070,"depth":550,"text":12071},"A composable to load FBX models in TresJS scenes.",{},{"title":129,"description":13555},"OZNFq_w0y9fXGIViDTr_a5XFwBaMnXwWDQKWFsdULrs",{"id":13560,"title":133,"body":13561,"description":14219,"extension":563,"links":564,"meta":14220,"navigation":566,"path":134,"seo":14221,"stem":135,"__hash__":14222},"docs/2.api/3.loaders/4.fbx-model.md",{"type":473,"value":13562,"toc":14214},[13563,13567,13576,13578,13940,13942,13949,14156,14158,14212],[2562,13564,13565],{},[12914,13566],{},[586,13568,2257,13569,12196,13571,12202],{},[590,13570,133],{},[1116,13572,13574],{"href":13573},"./use-fbx",[590,13575,129],{},[476,13577,15],{"id":596},[11383,13579,13580,13694],{},[598,13581,13584],{"className":600,"code":13582,"filename":11388,"highlights":13583,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { FBXModel } from '@tresjs/cientos'\n\nconst path = './Jeep_done.fbx'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CFBXModel :path=\"path\" />\n\u003C/template>\n",[550,750],[590,13585,13586,13606,13626,13630,13645,13653,13657,13665,13686],{"__ignoreMap":548},[609,13587,13588,13590,13592,13594,13596,13598,13600,13602,13604],{"class":611,"line":549},[609,13589,615],{"class":614},[609,13591,619],{"class":618},[609,13593,623],{"class":622},[609,13595,626],{"class":622},[609,13597,629],{"class":614},[609,13599,632],{"class":614},[609,13601,636],{"class":635},[609,13603,632],{"class":614},[609,13605,641],{"class":614},[609,13607,13609,13611,13613,13616,13618,13620,13622,13624],{"class":13608,"line":550},[611,645],[609,13610,649],{"class":648},[609,13612,652],{"class":614},[609,13614,13615],{"class":655}," FBXModel",[609,13617,665],{"class":614},[609,13619,668],{"class":648},[609,13621,671],{"class":614},[609,13623,674],{"class":635},[609,13625,677],{"class":614},[609,13627,13628],{"class":611,"line":680},[609,13629,714],{"emptyLinePlaceholder":566},[609,13631,13632,13634,13636,13638,13640,13643],{"class":611,"line":701},[609,13633,2693],{"class":622},[609,13635,11442],{"class":655},[609,13637,629],{"class":614},[609,13639,671],{"class":614},[609,13641,13642],{"class":635},"./Jeep_done.fbx",[609,13644,677],{"class":614},[609,13646,13647,13649,13651],{"class":611,"line":711},[609,13648,704],{"class":614},[609,13650,619],{"class":618},[609,13652,641],{"class":614},[609,13654,13655],{"class":611,"line":717},[609,13656,714],{"emptyLinePlaceholder":566},[609,13658,13659,13661,13663],{"class":611,"line":727},[609,13660,615],{"class":614},[609,13662,722],{"class":618},[609,13664,641],{"class":614},[609,13666,13668,13670,13672,13674,13676,13678,13680,13682,13684],{"class":13667,"line":750},[611,645],[609,13669,730],{"class":614},[609,13671,133],{"class":618},[609,13673,785],{"class":614},[609,13675,12302],{"class":622},[609,13677,629],{"class":614},[609,13679,632],{"class":614},[609,13681,12302],{"class":655},[609,13683,632],{"class":614},[609,13685,759],{"class":614},[609,13687,13688,13690,13692],{"class":611,"line":762},[609,13689,704],{"class":614},[609,13691,722],{"class":618},[609,13693,641],{"class":614},[598,13695,13696],{"className":600,"code":11549,"filename":11550,"language":605,"meta":548,"style":548},[590,13697,13698,13718,13736,13754,13768,13776,13780,13788,13806,13838,13846,13854,13860,13874,13900,13904,13924,13932],{"__ignoreMap":548},[609,13699,13700,13702,13704,13706,13708,13710,13712,13714,13716],{"class":611,"line":549},[609,13701,615],{"class":614},[609,13703,619],{"class":618},[609,13705,623],{"class":622},[609,13707,626],{"class":622},[609,13709,629],{"class":614},[609,13711,632],{"class":614},[609,13713,636],{"class":635},[609,13715,632],{"class":614},[609,13717,641],{"class":614},[609,13719,13720,13722,13724,13726,13728,13730,13732,13734],{"class":611,"line":550},[609,13721,649],{"class":648},[609,13723,652],{"class":614},[609,13725,662],{"class":655},[609,13727,665],{"class":614},[609,13729,668],{"class":648},[609,13731,671],{"class":614},[609,13733,674],{"class":635},[609,13735,677],{"class":614},[609,13737,13738,13740,13742,13744,13746,13748,13750,13752],{"class":611,"line":680},[609,13739,649],{"class":648},[609,13741,652],{"class":614},[609,13743,687],{"class":655},[609,13745,665],{"class":614},[609,13747,668],{"class":648},[609,13749,671],{"class":614},[609,13751,696],{"class":635},[609,13753,677],{"class":614},[609,13755,13756,13758,13760,13762,13764,13766],{"class":611,"line":701},[609,13757,649],{"class":648},[609,13759,11615],{"class":655},[609,13761,11618],{"class":648},[609,13763,671],{"class":614},[609,13765,11623],{"class":635},[609,13767,677],{"class":614},[609,13769,13770,13772,13774],{"class":611,"line":711},[609,13771,704],{"class":614},[609,13773,619],{"class":618},[609,13775,641],{"class":614},[609,13777,13778],{"class":611,"line":717},[609,13779,714],{"emptyLinePlaceholder":566},[609,13781,13782,13784,13786],{"class":611,"line":727},[609,13783,615],{"class":614},[609,13785,722],{"class":618},[609,13787,641],{"class":614},[609,13789,13790,13792,13794,13796,13798,13800,13802,13804],{"class":611,"line":750},[609,13791,730],{"class":614},[609,13793,733],{"class":618},[609,13795,736],{"class":622},[609,13797,629],{"class":614},[609,13799,632],{"class":614},[609,13801,11660],{"class":635},[609,13803,632],{"class":614},[609,13805,641],{"class":614},[609,13807,13808,13810,13812,13814,13816,13818,13820,13822,13824,13826,13828,13830,13832,13834,13836],{"class":611,"line":762},[609,13809,753],{"class":614},[609,13811,756],{"class":618},[609,13813,785],{"class":614},[609,13815,1463],{"class":622},[609,13817,629],{"class":614},[609,13819,632],{"class":614},[609,13821,1470],{"class":614},[609,13823,4164],{"class":795},[609,13825,1475],{"class":614},[609,13827,796],{"class":795},[609,13829,1475],{"class":614},[609,13831,2400],{"class":795},[609,13833,1485],{"class":614},[609,13835,632],{"class":614},[609,13837,759],{"class":614},[609,13839,13840,13842,13844],{"class":611,"line":772},[609,13841,753],{"class":614},[609,13843,767],{"class":618},[609,13845,759],{"class":614},[609,13847,13848,13850,13852],{"class":611,"line":777},[609,13849,753],{"class":614},[609,13851,11711],{"class":618},[609,13853,759],{"class":614},[609,13855,13856,13858],{"class":611,"line":803},[609,13857,753],{"class":614},[609,13859,11720],{"class":618},[609,13861,13862,13864,13866,13868,13870,13872],{"class":611,"line":603},[609,13863,5697],{"class":614},[609,13865,1890],{"class":622},[609,13867,629],{"class":614},[609,13869,632],{"class":614},[609,13871,796],{"class":795},[609,13873,2991],{"class":614},[609,13875,13876,13878,13880,13882,13884,13886,13888,13890,13892,13894,13896,13898],{"class":611,"line":826},[609,13877,5697],{"class":614},[609,13879,1463],{"class":622},[609,13881,629],{"class":614},[609,13883,632],{"class":614},[609,13885,1470],{"class":614},[609,13887,4164],{"class":795},[609,13889,1475],{"class":614},[609,13891,4164],{"class":795},[609,13893,1475],{"class":614},[609,13895,4164],{"class":795},[609,13897,1485],{"class":614},[609,13899,2991],{"class":614},[609,13901,13902],{"class":611,"line":837},[609,13903,11765],{"class":614},[609,13905,13906,13908,13910,13912,13914,13916,13918,13920,13922],{"class":611,"line":848},[609,13907,753],{"class":614},[609,13909,3522],{"class":618},[609,13911,785],{"class":614},[609,13913,1890],{"class":622},[609,13915,629],{"class":614},[609,13917,632],{"class":614},[609,13919,1897],{"class":795},[609,13921,632],{"class":614},[609,13923,759],{"class":614},[609,13925,13926,13928,13930],{"class":611,"line":858},[609,13927,881],{"class":614},[609,13929,733],{"class":618},[609,13931,641],{"class":614},[609,13933,13934,13936,13938],{"class":611,"line":604},[609,13935,704],{"class":614},[609,13937,722],{"class":618},[609,13939,641],{"class":614},[476,13941,12570],{"id":12569},[586,13943,12573,13944,1684,13946,13948],{},[590,13945,12576],{},[590,13947,133],{}," component and then using it to get the object.",[598,13950,13952],{"className":600,"code":13951,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport type { TresObject } from '@tresjs/core'\nimport { FBXModel } from '@tresjs/cientos'\n\nconst modelRef = shallowRef\u003CTresObject>()\n\nwatch(modelRef, (model) => {\n  // Do something with the model\n  model.position.set(0, 0, 0)\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CFBXModel\n    ref=\"modelRef\"\n    path=\"https://raw.githubusercontent.com/Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx\"\n  />\n\u003C/template>\n",[590,13953,13954,13974,13994,14012,14016,14034,14038,14056,14060,14086,14092,14100,14104,14112,14119,14131,14144,14148],{"__ignoreMap":548},[609,13955,13956,13958,13960,13962,13964,13966,13968,13970,13972],{"class":611,"line":549},[609,13957,615],{"class":614},[609,13959,619],{"class":618},[609,13961,623],{"class":622},[609,13963,626],{"class":622},[609,13965,629],{"class":614},[609,13967,632],{"class":614},[609,13969,636],{"class":635},[609,13971,632],{"class":614},[609,13973,641],{"class":614},[609,13975,13976,13978,13980,13982,13984,13986,13988,13990,13992],{"class":611,"line":550},[609,13977,649],{"class":648},[609,13979,12612],{"class":648},[609,13981,652],{"class":614},[609,13983,12617],{"class":655},[609,13985,665],{"class":614},[609,13987,668],{"class":648},[609,13989,671],{"class":614},[609,13991,696],{"class":635},[609,13993,677],{"class":614},[609,13995,13996,13998,14000,14002,14004,14006,14008,14010],{"class":611,"line":680},[609,13997,649],{"class":648},[609,13999,652],{"class":614},[609,14001,13615],{"class":655},[609,14003,665],{"class":614},[609,14005,668],{"class":648},[609,14007,671],{"class":614},[609,14009,674],{"class":635},[609,14011,677],{"class":614},[609,14013,14014],{"class":611,"line":701},[609,14015,714],{"emptyLinePlaceholder":566},[609,14017,14018,14020,14022,14024,14026,14028,14030,14032],{"class":611,"line":711},[609,14019,2693],{"class":622},[609,14021,12657],{"class":655},[609,14023,629],{"class":614},[609,14025,7909],{"class":2804},[609,14027,615],{"class":614},[609,14029,12666],{"class":1176},[609,14031,12669],{"class":614},[609,14033,2850],{"class":655},[609,14035,14036],{"class":611,"line":717},[609,14037,714],{"emptyLinePlaceholder":566},[609,14039,14040,14042,14044,14046,14048,14050,14052,14054],{"class":611,"line":727},[609,14041,5489],{"class":2804},[609,14043,12682],{"class":655},[609,14045,659],{"class":614},[609,14047,2717],{"class":614},[609,14049,12579],{"class":5499},[609,14051,4129],{"class":614},[609,14053,5505],{"class":622},[609,14055,1180],{"class":614},[609,14057,14058],{"class":611,"line":750},[609,14059,12699],{"class":1185},[609,14061,14062,14064,14066,14068,14070,14072,14074,14076,14078,14080,14082,14084],{"class":611,"line":762},[609,14063,12704],{"class":655},[609,14065,1122],{"class":614},[609,14067,1463],{"class":655},[609,14069,1122],{"class":614},[609,14071,12713],{"class":2804},[609,14073,2974],{"class":618},[609,14075,941],{"class":795},[609,14077,659],{"class":614},[609,14079,12722],{"class":795},[609,14081,659],{"class":614},[609,14083,12722],{"class":795},[609,14085,5543],{"class":618},[609,14087,14088,14090],{"class":611,"line":772},[609,14089,5548],{"class":614},[609,14091,5543],{"class":655},[609,14093,14094,14096,14098],{"class":611,"line":777},[609,14095,704],{"class":614},[609,14097,619],{"class":618},[609,14099,641],{"class":614},[609,14101,14102],{"class":611,"line":803},[609,14103,714],{"emptyLinePlaceholder":566},[609,14105,14106,14108,14110],{"class":611,"line":603},[609,14107,615],{"class":614},[609,14109,722],{"class":618},[609,14111,641],{"class":614},[609,14113,14114,14116],{"class":611,"line":826},[609,14115,730],{"class":614},[609,14117,14118],{"class":618},"FBXModel\n",[609,14120,14121,14123,14125,14127,14129],{"class":611,"line":837},[609,14122,12766],{"class":622},[609,14124,629],{"class":614},[609,14126,632],{"class":614},[609,14128,12773],{"class":635},[609,14130,2991],{"class":614},[609,14132,14133,14135,14137,14139,14142],{"class":611,"line":848},[609,14134,12780],{"class":622},[609,14136,629],{"class":614},[609,14138,632],{"class":614},[609,14140,14141],{"class":635},"https://raw.githubusercontent.com/Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx",[609,14143,2991],{"class":614},[609,14145,14146],{"class":611,"line":858},[609,14147,7463],{"class":614},[609,14149,14150,14152,14154],{"class":611,"line":604},[609,14151,704],{"class":614},[609,14153,722],{"class":618},[609,14155,641],{"class":614},[476,14157,898],{"id":897},[903,14159,14160,14170],{},[906,14161,14162],{},[909,14163,14164,14166,14168],{},[912,14165,914],{"align":973},[912,14167,917],{"align":973},[912,14169,920],{},[922,14171,14172,14184,14198],{},[909,14173,14174,14178,14180],{},[927,14175,14176],{"align":973},[590,14177,12302],{},[927,14179,12826],{"align":973},[927,14181,14182],{},[590,14183,1155],{},[909,14185,14186,14190,14194],{},[927,14187,14188],{"align":973},[590,14189,12867],{},[927,14191,12870,14192,12874],{"align":973},[590,14193,12873],{},[927,14195,14196],{},[590,14197,947],{},[909,14199,14200,14204,14208],{},[927,14201,14202],{"align":973},[590,14203,12885],{},[927,14205,12870,14206,12874],{"align":973},[590,14207,12890],{},[927,14209,14210],{},[590,14211,947],{},[1303,14213,12897],{},{"title":548,"searchDepth":549,"depth":550,"links":14215},[14216,14217,14218],{"id":596,"depth":550,"text":15},{"id":12569,"depth":550,"text":12570},{"id":897,"depth":550,"text":898},"A component based on useFBX to load models in TresJS scenes.",{},{"title":133,"description":14219},"UvFys7XTw8i8N0823KzOVRUmY9Q9yI0fymMbHpSGEfQ",{"id":14224,"title":137,"body":14225,"description":14877,"extension":563,"links":564,"meta":14878,"navigation":566,"path":138,"seo":14879,"stem":139,"__hash__":14880},"docs/2.api/3.loaders/5.use-texture.md",{"type":473,"value":14226,"toc":14871},[14227,14232,14243,14245,14402,14404,14456,14458,14514,14518,14525,14868],[2562,14228,14229],{},[14230,14231],"loaders-use-texture",{},[586,14233,14234,14235,14240,14241,11379],{},"A composable that allows you to load textures using the ",[1116,14236,14239],{"href":14237,"rel":14238},"https://threejs.org/docs/#api/en/loaders/TextureLoader",[1120],"Three.js texture loader"," into your ",[1677,14242,11378],{},[476,14244,15],{"id":596},[598,14246,14249],{"className":600,"code":14247,"highlights":14248,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { useTexture } from '@tresjs/cientos'\n\nconst { state: texture, isLoading, error } = useTexture(path)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresMesh>\n    \u003CTresSphereGeometry />\n    \u003CTresMeshStandardMaterial :map=\"texture\" />\n  \u003C/TresMesh>\n\u003C/template>\n",[550,701,772],[590,14250,14251,14271,14291,14295,14327,14335,14339,14347,14355,14363,14386,14394],{"__ignoreMap":548},[609,14252,14253,14255,14257,14259,14261,14263,14265,14267,14269],{"class":611,"line":549},[609,14254,615],{"class":614},[609,14256,619],{"class":618},[609,14258,623],{"class":622},[609,14260,626],{"class":622},[609,14262,629],{"class":614},[609,14264,632],{"class":614},[609,14266,636],{"class":635},[609,14268,632],{"class":614},[609,14270,641],{"class":614},[609,14272,14274,14276,14278,14281,14283,14285,14287,14289],{"class":14273,"line":550},[611,645],[609,14275,649],{"class":648},[609,14277,652],{"class":614},[609,14279,14280],{"class":655}," useTexture",[609,14282,665],{"class":614},[609,14284,668],{"class":648},[609,14286,671],{"class":614},[609,14288,674],{"class":635},[609,14290,677],{"class":614},[609,14292,14293],{"class":611,"line":680},[609,14294,714],{"emptyLinePlaceholder":566},[609,14296,14298,14300,14302,14304,14306,14309,14311,14314,14316,14319,14321,14323,14325],{"class":14297,"line":701},[611,645],[609,14299,2693],{"class":622},[609,14301,652],{"class":614},[609,14303,11461],{"class":618},[609,14305,1194],{"class":614},[609,14307,14308],{"class":655}," texture",[609,14310,659],{"class":614},[609,14312,14313],{"class":655}," isLoading",[609,14315,659],{"class":614},[609,14317,14318],{"class":655}," error ",[609,14320,5548],{"class":614},[609,14322,2770],{"class":614},[609,14324,14280],{"class":2804},[609,14326,11480],{"class":655},[609,14328,14329,14331,14333],{"class":611,"line":711},[609,14330,704],{"class":614},[609,14332,619],{"class":618},[609,14334,641],{"class":614},[609,14336,14337],{"class":611,"line":717},[609,14338,714],{"emptyLinePlaceholder":566},[609,14340,14341,14343,14345],{"class":611,"line":727},[609,14342,615],{"class":614},[609,14344,722],{"class":618},[609,14346,641],{"class":614},[609,14348,14349,14351,14353],{"class":611,"line":750},[609,14350,730],{"class":614},[609,14352,832],{"class":618},[609,14354,641],{"class":614},[609,14356,14357,14359,14361],{"class":611,"line":762},[609,14358,753],{"class":614},[609,14360,4739],{"class":618},[609,14362,759],{"class":614},[609,14364,14366,14368,14370,14372,14375,14377,14379,14382,14384],{"class":14365,"line":772},[611,645],[609,14367,753],{"class":614},[609,14369,8099],{"class":618},[609,14371,785],{"class":614},[609,14373,14374],{"class":622},"map",[609,14376,629],{"class":614},[609,14378,632],{"class":614},[609,14380,14381],{"class":655},"texture",[609,14383,632],{"class":614},[609,14385,759],{"class":614},[609,14387,14388,14390,14392],{"class":611,"line":777},[609,14389,881],{"class":614},[609,14391,832],{"class":618},[609,14393,641],{"class":614},[609,14395,14396,14398,14400],{"class":611,"line":803},[609,14397,704],{"class":614},[609,14399,722],{"class":618},[609,14401,641],{"class":614},[476,14403,7491],{"id":11998},[903,14405,14406,14418],{},[906,14407,14408],{},[909,14409,14410,14412,14414,14416],{},[912,14411,3122],{"align":973},[912,14413,11906],{},[912,14415,920],{},[912,14417,917],{},[922,14419,14420,14437],{},[909,14421,14422,14426,14430,14434],{},[927,14423,14424],{"align":973},[1677,14425,12302],{},[927,14427,14428],{},[590,14429,12043],{},[927,14431,14432],{},[590,14433,1155],{},[927,14435,14436],{},"The path to the texture.",[909,14438,14439,14444,14449,14453],{},[927,14440,14441],{"align":973},[1677,14442,14443],{},"manager",[927,14445,14446],{},[590,14447,14448],{},"THREE.LoadingManager",[927,14450,14451],{},[590,14452,1155],{},[927,14454,14455],{},"The loading manager to use for the texture.",[476,14457,11895],{"id":11894},[903,14459,14460,14470],{},[906,14461,14462],{},[909,14463,14464,14466,14468],{},[912,14465,3122],{"align":973},[912,14467,11906],{"align":973},[912,14469,917],{"align":973},[922,14471,14472,14486,14499],{},[909,14473,14474,14478,14483],{},[927,14475,14476],{"align":973},[590,14477,9133],{},[927,14479,14480],{"align":973},[590,14481,14482],{},"Texture | null",[927,14484,14485],{"align":973},"The loaded texture",[909,14487,14488,14492,14496],{},[927,14489,14490],{"align":973},[590,14491,11958],{},[927,14493,14494],{"align":973},[590,14495,11963],{},[927,14497,14498],{"align":973},"Whether the texture is loading",[909,14500,14501,14506,14511],{},[927,14502,14503],{"align":973},[590,14504,14505],{},"error",[927,14507,14508],{"align":973},[590,14509,14510],{},"string | null",[927,14512,14513],{"align":973},"Error message if loading failed",[476,14515,14517],{"id":14516},"component-usage","Component Usage",[586,14519,14520,14521,14524],{},"You can also use the ",[590,14522,14523],{},"UseTexture"," component directly in your template:",[598,14526,14529],{"className":600,"code":14527,"highlights":14528,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { UseTexture } from '@tresjs/cientos'\n\nconst path = 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Color.jpg'\n\nconst handleLoaded = (texture: Texture) => {\n  console.log('Loaded texture', texture)\n}\n\nconst handleError = (error: unknown) => {\n  console.error('error', error)\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CUseTexture\n    v-slot=\"{ state: texture }\"\n    :path=\"path\"\n    @loaded=\"handleLoaded\"\n    @error=\"handleError\"\n  >\n    \u003CTresMesh>\n      \u003CTresSphereGeometry />\n      \u003CTresMeshStandardMaterial :map=\"texture\" />\n    \u003C/TresMesh>\n  \u003C/UseTexture>\n\u003C/template>\n",[550,848,858,604,878,888,2956,3051],[590,14530,14531,14551,14571,14575,14590,14594,14618,14643,14647,14651,14675,14698,14702,14710,14714,14722,14730,14752,14767,14785,14801,14807,14815,14823,14843,14851,14860],{"__ignoreMap":548},[609,14532,14533,14535,14537,14539,14541,14543,14545,14547,14549],{"class":611,"line":549},[609,14534,615],{"class":614},[609,14536,619],{"class":618},[609,14538,623],{"class":622},[609,14540,626],{"class":622},[609,14542,629],{"class":614},[609,14544,632],{"class":614},[609,14546,636],{"class":635},[609,14548,632],{"class":614},[609,14550,641],{"class":614},[609,14552,14554,14556,14558,14561,14563,14565,14567,14569],{"class":14553,"line":550},[611,645],[609,14555,649],{"class":648},[609,14557,652],{"class":614},[609,14559,14560],{"class":655}," UseTexture",[609,14562,665],{"class":614},[609,14564,668],{"class":648},[609,14566,671],{"class":614},[609,14568,674],{"class":635},[609,14570,677],{"class":614},[609,14572,14573],{"class":611,"line":680},[609,14574,714],{"emptyLinePlaceholder":566},[609,14576,14577,14579,14581,14583,14585,14588],{"class":611,"line":701},[609,14578,2693],{"class":622},[609,14580,11442],{"class":655},[609,14582,629],{"class":614},[609,14584,671],{"class":614},[609,14586,14587],{"class":635},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Color.jpg",[609,14589,677],{"class":614},[609,14591,14592],{"class":611,"line":711},[609,14593,714],{"emptyLinePlaceholder":566},[609,14595,14596,14598,14601,14603,14605,14607,14609,14612,14614,14616],{"class":611,"line":717},[609,14597,2693],{"class":622},[609,14599,14600],{"class":655}," handleLoaded ",[609,14602,629],{"class":614},[609,14604,2717],{"class":614},[609,14606,14381],{"class":5499},[609,14608,1194],{"class":614},[609,14610,14611],{"class":1176}," Texture",[609,14613,4129],{"class":614},[609,14615,5505],{"class":622},[609,14617,1180],{"class":614},[609,14619,14620,14623,14625,14628,14630,14632,14635,14637,14639,14641],{"class":611,"line":727},[609,14621,14622],{"class":655},"  console",[609,14624,1122],{"class":614},[609,14626,14627],{"class":2804},"log",[609,14629,2974],{"class":618},[609,14631,5540],{"class":614},[609,14633,14634],{"class":635},"Loaded texture",[609,14636,5540],{"class":614},[609,14638,659],{"class":614},[609,14640,14308],{"class":655},[609,14642,5543],{"class":618},[609,14644,14645],{"class":611,"line":750},[609,14646,1301],{"class":614},[609,14648,14649],{"class":611,"line":762},[609,14650,714],{"emptyLinePlaceholder":566},[609,14652,14653,14655,14658,14660,14662,14664,14666,14669,14671,14673],{"class":611,"line":772},[609,14654,2693],{"class":622},[609,14656,14657],{"class":655}," handleError ",[609,14659,629],{"class":614},[609,14661,2717],{"class":614},[609,14663,14505],{"class":5499},[609,14665,1194],{"class":614},[609,14667,14668],{"class":1176}," unknown",[609,14670,4129],{"class":614},[609,14672,5505],{"class":622},[609,14674,1180],{"class":614},[609,14676,14677,14679,14681,14683,14685,14687,14689,14691,14693,14696],{"class":611,"line":777},[609,14678,14622],{"class":655},[609,14680,1122],{"class":614},[609,14682,14505],{"class":2804},[609,14684,2974],{"class":618},[609,14686,5540],{"class":614},[609,14688,14505],{"class":635},[609,14690,5540],{"class":614},[609,14692,659],{"class":614},[609,14694,14695],{"class":655}," error",[609,14697,5543],{"class":618},[609,14699,14700],{"class":611,"line":803},[609,14701,1301],{"class":614},[609,14703,14704,14706,14708],{"class":611,"line":603},[609,14705,704],{"class":614},[609,14707,619],{"class":618},[609,14709,641],{"class":614},[609,14711,14712],{"class":611,"line":826},[609,14713,714],{"emptyLinePlaceholder":566},[609,14715,14716,14718,14720],{"class":611,"line":837},[609,14717,615],{"class":614},[609,14719,722],{"class":618},[609,14721,641],{"class":614},[609,14723,14725,14727],{"class":14724,"line":848},[611,645],[609,14726,730],{"class":614},[609,14728,14729],{"class":618},"UseTexture\n",[609,14731,14733,14736,14738,14740,14742,14744,14746,14748,14750],{"class":14732,"line":858},[611,645],[609,14734,14735],{"class":622},"    v-slot",[609,14737,629],{"class":614},[609,14739,632],{"class":614},[609,14741,7406],{"class":614},[609,14743,9133],{"class":618},[609,14745,7411],{"class":614},[609,14747,14381],{"class":655},[609,14749,665],{"class":614},[609,14751,2991],{"class":614},[609,14753,14755,14757,14759,14761,14763,14765],{"class":14754,"line":604},[611,645],[609,14756,7396],{"class":614},[609,14758,12302],{"class":622},[609,14760,629],{"class":614},[609,14762,632],{"class":614},[609,14764,12302],{"class":655},[609,14766,2991],{"class":614},[609,14768,14770,14773,14776,14778,14780,14783],{"class":14769,"line":878},[611,645],[609,14771,14772],{"class":614},"    @",[609,14774,14775],{"class":622},"loaded",[609,14777,629],{"class":614},[609,14779,632],{"class":614},[609,14781,14782],{"class":655},"handleLoaded",[609,14784,2991],{"class":614},[609,14786,14788,14790,14792,14794,14796,14799],{"class":14787,"line":888},[611,645],[609,14789,14772],{"class":614},[609,14791,14505],{"class":622},[609,14793,629],{"class":614},[609,14795,632],{"class":614},[609,14797,14798],{"class":655},"handleError",[609,14800,2991],{"class":614},[609,14802,14804],{"class":14803,"line":2956},[611,645],[609,14805,14806],{"class":614},"  >\n",[609,14808,14809,14811,14813],{"class":611,"line":2964},[609,14810,753],{"class":614},[609,14812,832],{"class":618},[609,14814,641],{"class":614},[609,14816,14817,14819,14821],{"class":611,"line":2994},[609,14818,829],{"class":614},[609,14820,4739],{"class":618},[609,14822,759],{"class":614},[609,14824,14825,14827,14829,14831,14833,14835,14837,14839,14841],{"class":611,"line":3011},[609,14826,829],{"class":614},[609,14828,8099],{"class":618},[609,14830,785],{"class":614},[609,14832,14374],{"class":622},[609,14834,629],{"class":614},[609,14836,632],{"class":614},[609,14838,14381],{"class":655},[609,14840,632],{"class":614},[609,14842,759],{"class":614},[609,14844,14845,14847,14849],{"class":611,"line":3026},[609,14846,871],{"class":614},[609,14848,832],{"class":618},[609,14850,641],{"class":614},[609,14852,14854,14856,14858],{"class":14853,"line":3051},[611,645],[609,14855,881],{"class":614},[609,14857,14523],{"class":618},[609,14859,641],{"class":614},[609,14861,14862,14864,14866],{"class":611,"line":2595},[609,14863,704],{"class":614},[609,14865,722],{"class":618},[609,14867,641],{"class":614},[1303,14869,14870],{},"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);}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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":548,"searchDepth":549,"depth":550,"links":14872},[14873,14874,14875,14876],{"id":596,"depth":550,"text":15},{"id":11998,"depth":550,"text":7491},{"id":11894,"depth":550,"text":11895},{"id":14516,"depth":550,"text":14517},"A composable to load textures in TresJS scenes.",{},{"title":137,"description":14877},"eWpsm_0O2uskMZJ3Ht1Sb5JPGHO3WvELbtkQ2LoRQO0",{"id":14882,"title":141,"body":14883,"description":16403,"extension":563,"links":564,"meta":16404,"navigation":566,"path":142,"seo":16405,"stem":143,"__hash__":16406},"docs/2.api/3.loaders/6.use-textures.md",{"type":473,"value":14884,"toc":16394},[14885,14890,14898,14900,15170,15174,15177,16259,16263,16267,16302,16306,16361,16365,16391],[2562,14886,14887],{},[14888,14889],"loaders-use-textures",{},[586,14891,14892,14893,14240,14896,11379],{},"A composable that allows you to load multiple textures at once using the ",[1116,14894,14239],{"href":14237,"rel":14895},[1120],[1677,14897,11378],{},[476,14899,15],{"id":596},[598,14901,14904],{"className":600,"code":14902,"highlights":14903,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { useTextures } from '@tresjs/cientos'\n\n// Define an array of texture paths\nconst texturePaths = [\n  '/textures/color.jpg',\n  '/textures/normal.jpg',\n  '/textures/roughness.jpg'\n]\n\n// Load all textures at once\nconst { textures, isLoading, error } = useTextures(texturePaths)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresMesh>\n    \u003CTresSphereGeometry />\n    \u003CTresMeshStandardMaterial\n      :map=\"textures[0]\"\n      :normal-map=\"textures[1]\"\n      :roughness-map=\"textures[2]\"\n    />\n  \u003C/TresMesh>\n\u003C/template>\n",[550,803,878,888,2956],[590,14905,14906,14926,14946,14950,14955,14967,14980,14991,15000,15005,15009,15014,15041,15049,15053,15061,15069,15077,15084,15106,15128,15150,15154,15162],{"__ignoreMap":548},[609,14907,14908,14910,14912,14914,14916,14918,14920,14922,14924],{"class":611,"line":549},[609,14909,615],{"class":614},[609,14911,619],{"class":618},[609,14913,623],{"class":622},[609,14915,626],{"class":622},[609,14917,629],{"class":614},[609,14919,632],{"class":614},[609,14921,636],{"class":635},[609,14923,632],{"class":614},[609,14925,641],{"class":614},[609,14927,14929,14931,14933,14936,14938,14940,14942,14944],{"class":14928,"line":550},[611,645],[609,14930,649],{"class":648},[609,14932,652],{"class":614},[609,14934,14935],{"class":655}," useTextures",[609,14937,665],{"class":614},[609,14939,668],{"class":648},[609,14941,671],{"class":614},[609,14943,674],{"class":635},[609,14945,677],{"class":614},[609,14947,14948],{"class":611,"line":680},[609,14949,714],{"emptyLinePlaceholder":566},[609,14951,14952],{"class":611,"line":701},[609,14953,14954],{"class":1185},"// Define an array of texture paths\n",[609,14956,14957,14959,14962,14964],{"class":611,"line":711},[609,14958,2693],{"class":622},[609,14960,14961],{"class":655}," texturePaths ",[609,14963,629],{"class":614},[609,14965,14966],{"class":655}," [\n",[609,14968,14969,14972,14975,14977],{"class":611,"line":717},[609,14970,14971],{"class":614},"  '",[609,14973,14974],{"class":635},"/textures/color.jpg",[609,14976,5540],{"class":614},[609,14978,14979],{"class":614},",\n",[609,14981,14982,14984,14987,14989],{"class":611,"line":727},[609,14983,14971],{"class":614},[609,14985,14986],{"class":635},"/textures/normal.jpg",[609,14988,5540],{"class":614},[609,14990,14979],{"class":614},[609,14992,14993,14995,14998],{"class":611,"line":750},[609,14994,14971],{"class":614},[609,14996,14997],{"class":635},"/textures/roughness.jpg",[609,14999,677],{"class":614},[609,15001,15002],{"class":611,"line":762},[609,15003,15004],{"class":655},"]\n",[609,15006,15007],{"class":611,"line":772},[609,15008,714],{"emptyLinePlaceholder":566},[609,15010,15011],{"class":611,"line":777},[609,15012,15013],{"class":1185},"// Load all textures at once\n",[609,15015,15017,15019,15021,15024,15026,15028,15030,15032,15034,15036,15038],{"class":15016,"line":803},[611,645],[609,15018,2693],{"class":622},[609,15020,652],{"class":614},[609,15022,15023],{"class":655}," textures",[609,15025,659],{"class":614},[609,15027,14313],{"class":655},[609,15029,659],{"class":614},[609,15031,14318],{"class":655},[609,15033,5548],{"class":614},[609,15035,2770],{"class":614},[609,15037,14935],{"class":2804},[609,15039,15040],{"class":655},"(texturePaths)\n",[609,15042,15043,15045,15047],{"class":611,"line":603},[609,15044,704],{"class":614},[609,15046,619],{"class":618},[609,15048,641],{"class":614},[609,15050,15051],{"class":611,"line":826},[609,15052,714],{"emptyLinePlaceholder":566},[609,15054,15055,15057,15059],{"class":611,"line":837},[609,15056,615],{"class":614},[609,15058,722],{"class":618},[609,15060,641],{"class":614},[609,15062,15063,15065,15067],{"class":611,"line":848},[609,15064,730],{"class":614},[609,15066,832],{"class":618},[609,15068,641],{"class":614},[609,15070,15071,15073,15075],{"class":611,"line":858},[609,15072,753],{"class":614},[609,15074,4739],{"class":618},[609,15076,759],{"class":614},[609,15078,15079,15081],{"class":611,"line":604},[609,15080,753],{"class":614},[609,15082,15083],{"class":618},"TresMeshStandardMaterial\n",[609,15085,15087,15089,15091,15093,15095,15098,15100,15102,15104],{"class":15086,"line":878},[611,645],[609,15088,5697],{"class":614},[609,15090,14374],{"class":622},[609,15092,629],{"class":614},[609,15094,632],{"class":614},[609,15096,15097],{"class":655},"textures",[609,15099,1470],{"class":614},[609,15101,941],{"class":795},[609,15103,1485],{"class":614},[609,15105,2991],{"class":614},[609,15107,15109,15111,15114,15116,15118,15120,15122,15124,15126],{"class":15108,"line":888},[611,645],[609,15110,5697],{"class":614},[609,15112,15113],{"class":622},"normal-map",[609,15115,629],{"class":614},[609,15117,632],{"class":614},[609,15119,15097],{"class":655},[609,15121,1470],{"class":614},[609,15123,1897],{"class":795},[609,15125,1485],{"class":614},[609,15127,2991],{"class":614},[609,15129,15131,15133,15136,15138,15140,15142,15144,15146,15148],{"class":15130,"line":2956},[611,645],[609,15132,5697],{"class":614},[609,15134,15135],{"class":622},"roughness-map",[609,15137,629],{"class":614},[609,15139,632],{"class":614},[609,15141,15097],{"class":655},[609,15143,1470],{"class":614},[609,15145,796],{"class":795},[609,15147,1485],{"class":614},[609,15149,2991],{"class":614},[609,15151,15152],{"class":611,"line":2964},[609,15153,11765],{"class":614},[609,15155,15156,15158,15160],{"class":611,"line":2994},[609,15157,881],{"class":614},[609,15159,832],{"class":618},[609,15161,641],{"class":614},[609,15163,15164,15166,15168],{"class":611,"line":3011},[609,15165,704],{"class":614},[609,15167,722],{"class":618},[609,15169,641],{"class":614},[476,15171,15173],{"id":15172},"pbr-textures-example","PBR Textures Example",[586,15175,15176],{},"Here's a more advanced example showing how to load and apply PBR (Physically Based Rendering) textures to a material:",[598,15178,15181],{"className":600,"code":15179,"filename":15180,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas, vLightHelper } from '@tresjs/core'\nimport { Environment, OrbitControls, useGLTF, useTextures } from '@tresjs/cientos'\nimport { MeshStandardMaterial } from 'three'\n\n// Load the 3D model\nconst { state: model } = useGLTF('/blender-cube-draco.glb', { draco: true })\nconst cube = computed(() => model.value?.nodes?.BlenderCube)\nconst material = computed(() => model.value?.materials?.Material)\n\n// Define texture paths\nconst texturePaths = [\n  '/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Color.jpg',\n  '/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_NormalGL.jpg',\n  '/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Roughness.jpg',\n  '/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Metalness.jpg',\n  '/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Displacement.jpg'\n]\n\n// Load all PBR textures at once\nconst { textures, isLoading, error } = useTextures(texturePaths)\n\n// Apply textures to material when loaded\nwatch([material, textures], ([modelMaterial, textures]) => {\n  if (modelMaterial && textures && textures.length === texturePaths.length) {\n    // Cast to MeshStandardMaterial to access PBR properties\n    const pbrMaterial = modelMaterial as MeshStandardMaterial\n\n    // Apply textures\n    pbrMaterial.map = textures[0]\n    pbrMaterial.normalMap = textures[1]\n    pbrMaterial.roughnessMap = textures[2]\n    pbrMaterial.metalnessMap = textures[3]\n    pbrMaterial.displacementMap = textures[4]\n\n    // Set material properties\n    pbrMaterial.displacementScale = 0\n    pbrMaterial.metalness = 0.8\n    pbrMaterial.roughness = 0.2\n  }\n})\n\n// Handle loading state and errors\nwatch(isLoading, (_loading) => {\n  // Handle loading state\n})\n\nwatch(error, (errs) => {\n  if (errs) {\n    console.error('Error loading textures:', errs)\n  }\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#4f4f4f\">\n    \u003CSuspense>\n      \u003CEnvironment preset=\"studio\" background :blur=\"1\" />\n    \u003C/Suspense>\n    \u003CTresPerspectiveCamera :position=\"[8, 8, 8]\" />\n    \u003COrbitControls />\n    \u003CTresGridHelper />\n    \u003CTresAmbientLight :intensity=\"2\" />\n    \u003CTresDirectionalLight v-light-helper :position=\"[5, 5, 5]\" :intensity=\"0.5\" color=\"#ff0000\" />\n    \u003CTresDirectionalLight v-light-helper :position=\"[-5, 2, 2]\" :intensity=\"0.5\" color=\"#0000ff\" />\n    \u003CTresGroup position-y=\"2\">\n      \u003Cprimitive v-if=\"cube\" :object=\"cube\" />\n    \u003C/TresGroup>\n  \u003C/TresCanvas>\n\u003C/template>\n","PBRTextures.vue",[590,15182,15183,15203,15226,15257,15276,15280,15285,15327,15361,15392,15396,15401,15411,15422,15433,15444,15455,15464,15468,15472,15477,15501,15505,15510,15541,15577,15582,15601,15605,15610,15629,15648,15667,15686,15705,15709,15714,15728,15743,15758,15763,15770,15775,15781,15802,15808,15815,15820,15841,15854,15880,15885,15892,15901,15906,15915,15934,15944,15981,15990,16024,16033,16042,16063,16121,16180,16200,16232,16241,16250],{"__ignoreMap":548},[609,15184,15185,15187,15189,15191,15193,15195,15197,15199,15201],{"class":611,"line":549},[609,15186,615],{"class":614},[609,15188,619],{"class":618},[609,15190,623],{"class":622},[609,15192,626],{"class":622},[609,15194,629],{"class":614},[609,15196,632],{"class":614},[609,15198,636],{"class":635},[609,15200,632],{"class":614},[609,15202,641],{"class":614},[609,15204,15205,15207,15209,15211,15213,15216,15218,15220,15222,15224],{"class":611,"line":550},[609,15206,649],{"class":648},[609,15208,652],{"class":614},[609,15210,687],{"class":655},[609,15212,659],{"class":614},[609,15214,15215],{"class":655}," vLightHelper",[609,15217,665],{"class":614},[609,15219,668],{"class":648},[609,15221,671],{"class":614},[609,15223,696],{"class":635},[609,15225,677],{"class":614},[609,15227,15228,15230,15232,15235,15237,15239,15241,15243,15245,15247,15249,15251,15253,15255],{"class":611,"line":680},[609,15229,649],{"class":648},[609,15231,652],{"class":614},[609,15233,15234],{"class":655}," Environment",[609,15236,659],{"class":614},[609,15238,662],{"class":655},[609,15240,659],{"class":614},[609,15242,11421],{"class":655},[609,15244,659],{"class":614},[609,15246,14935],{"class":655},[609,15248,665],{"class":614},[609,15250,668],{"class":648},[609,15252,671],{"class":614},[609,15254,674],{"class":635},[609,15256,677],{"class":614},[609,15258,15259,15261,15263,15266,15268,15270,15272,15274],{"class":611,"line":701},[609,15260,649],{"class":648},[609,15262,652],{"class":614},[609,15264,15265],{"class":655}," MeshStandardMaterial",[609,15267,665],{"class":614},[609,15269,668],{"class":648},[609,15271,671],{"class":614},[609,15273,2682],{"class":635},[609,15275,677],{"class":614},[609,15277,15278],{"class":611,"line":711},[609,15279,714],{"emptyLinePlaceholder":566},[609,15281,15282],{"class":611,"line":717},[609,15283,15284],{"class":1185},"// Load the 3D model\n",[609,15286,15287,15289,15291,15293,15295,15298,15300,15302,15304,15306,15308,15311,15313,15315,15317,15319,15321,15323,15325],{"class":611,"line":727},[609,15288,2693],{"class":622},[609,15290,652],{"class":614},[609,15292,11461],{"class":618},[609,15294,1194],{"class":614},[609,15296,15297],{"class":655}," model ",[609,15299,5548],{"class":614},[609,15301,2770],{"class":614},[609,15303,11421],{"class":2804},[609,15305,2974],{"class":655},[609,15307,5540],{"class":614},[609,15309,15310],{"class":635},"/blender-cube-draco.glb",[609,15312,5540],{"class":614},[609,15314,659],{"class":614},[609,15316,652],{"class":614},[609,15318,11882],{"class":618},[609,15320,1194],{"class":614},[609,15322,11887],{"class":3874},[609,15324,665],{"class":614},[609,15326,5543],{"class":655},[609,15328,15329,15331,15334,15336,15339,15341,15343,15345,15348,15350,15352,15354,15356,15358],{"class":611,"line":750},[609,15330,2693],{"class":622},[609,15332,15333],{"class":655}," cube ",[609,15335,629],{"class":614},[609,15337,15338],{"class":2804}," computed",[609,15340,2974],{"class":655},[609,15342,8451],{"class":614},[609,15344,5505],{"class":622},[609,15346,15347],{"class":655}," model",[609,15349,1122],{"class":614},[609,15351,5500],{"class":655},[609,15353,11531],{"class":614},[609,15355,11931],{"class":655},[609,15357,11531],{"class":614},[609,15359,15360],{"class":655},"BlenderCube)\n",[609,15362,15363,15365,15367,15369,15371,15373,15375,15377,15379,15381,15383,15385,15387,15389],{"class":611,"line":762},[609,15364,2693],{"class":622},[609,15366,12153],{"class":655},[609,15368,629],{"class":614},[609,15370,15338],{"class":2804},[609,15372,2974],{"class":655},[609,15374,8451],{"class":614},[609,15376,5505],{"class":622},[609,15378,15347],{"class":655},[609,15380,1122],{"class":614},[609,15382,5500],{"class":655},[609,15384,11531],{"class":614},[609,15386,500],{"class":655},[609,15388,11531],{"class":614},[609,15390,15391],{"class":655},"Material)\n",[609,15393,15394],{"class":611,"line":772},[609,15395,714],{"emptyLinePlaceholder":566},[609,15397,15398],{"class":611,"line":777},[609,15399,15400],{"class":1185},"// Define texture paths\n",[609,15402,15403,15405,15407,15409],{"class":611,"line":803},[609,15404,2693],{"class":622},[609,15406,14961],{"class":655},[609,15408,629],{"class":614},[609,15410,14966],{"class":655},[609,15412,15413,15415,15418,15420],{"class":611,"line":603},[609,15414,14971],{"class":614},[609,15416,15417],{"class":635},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Color.jpg",[609,15419,5540],{"class":614},[609,15421,14979],{"class":614},[609,15423,15424,15426,15429,15431],{"class":611,"line":826},[609,15425,14971],{"class":614},[609,15427,15428],{"class":635},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_NormalGL.jpg",[609,15430,5540],{"class":614},[609,15432,14979],{"class":614},[609,15434,15435,15437,15440,15442],{"class":611,"line":837},[609,15436,14971],{"class":614},[609,15438,15439],{"class":635},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Roughness.jpg",[609,15441,5540],{"class":614},[609,15443,14979],{"class":614},[609,15445,15446,15448,15451,15453],{"class":611,"line":848},[609,15447,14971],{"class":614},[609,15449,15450],{"class":635},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Metalness.jpg",[609,15452,5540],{"class":614},[609,15454,14979],{"class":614},[609,15456,15457,15459,15462],{"class":611,"line":858},[609,15458,14971],{"class":614},[609,15460,15461],{"class":635},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Displacement.jpg",[609,15463,677],{"class":614},[609,15465,15466],{"class":611,"line":604},[609,15467,15004],{"class":655},[609,15469,15470],{"class":611,"line":878},[609,15471,714],{"emptyLinePlaceholder":566},[609,15473,15474],{"class":611,"line":888},[609,15475,15476],{"class":1185},"// Load all PBR textures at once\n",[609,15478,15479,15481,15483,15485,15487,15489,15491,15493,15495,15497,15499],{"class":611,"line":2956},[609,15480,2693],{"class":622},[609,15482,652],{"class":614},[609,15484,15023],{"class":655},[609,15486,659],{"class":614},[609,15488,14313],{"class":655},[609,15490,659],{"class":614},[609,15492,14318],{"class":655},[609,15494,5548],{"class":614},[609,15496,2770],{"class":614},[609,15498,14935],{"class":2804},[609,15500,15040],{"class":655},[609,15502,15503],{"class":611,"line":2964},[609,15504,714],{"emptyLinePlaceholder":566},[609,15506,15507],{"class":611,"line":2994},[609,15508,15509],{"class":1185},"// Apply textures to material when loaded\n",[609,15511,15512,15514,15517,15519,15522,15524,15527,15530,15532,15534,15537,15539],{"class":611,"line":3011},[609,15513,5489],{"class":2804},[609,15515,15516],{"class":655},"([material",[609,15518,659],{"class":614},[609,15520,15521],{"class":655}," textures]",[609,15523,659],{"class":614},[609,15525,15526],{"class":614}," ([",[609,15528,15529],{"class":5499},"modelMaterial",[609,15531,659],{"class":614},[609,15533,15023],{"class":5499},[609,15535,15536],{"class":614},"])",[609,15538,5505],{"class":622},[609,15540,1180],{"class":614},[609,15542,15543,15545,15547,15549,15552,15554,15556,15558,15560,15563,15566,15569,15571,15573,15575],{"class":611,"line":3026},[609,15544,8458],{"class":648},[609,15546,2717],{"class":618},[609,15548,15529],{"class":655},[609,15550,15551],{"class":614}," &&",[609,15553,15023],{"class":655},[609,15555,15551],{"class":614},[609,15557,15023],{"class":655},[609,15559,1122],{"class":614},[609,15561,15562],{"class":655},"length",[609,15564,15565],{"class":614}," ===",[609,15567,15568],{"class":655}," texturePaths",[609,15570,1122],{"class":614},[609,15572,15562],{"class":655},[609,15574,2752],{"class":618},[609,15576,2755],{"class":614},[609,15578,15579],{"class":611,"line":3051},[609,15580,15581],{"class":1185},"    // Cast to MeshStandardMaterial to access PBR properties\n",[609,15583,15584,15587,15590,15592,15595,15598],{"class":611,"line":2595},[609,15585,15586],{"class":622},"    const",[609,15588,15589],{"class":655}," pbrMaterial",[609,15591,2770],{"class":614},[609,15593,15594],{"class":655}," modelMaterial",[609,15596,15597],{"class":648}," as",[609,15599,15600],{"class":1176}," MeshStandardMaterial\n",[609,15602,15603],{"class":611,"line":3066},[609,15604,714],{"emptyLinePlaceholder":566},[609,15606,15607],{"class":611,"line":3096},[609,15608,15609],{"class":1185},"    // Apply textures\n",[609,15611,15612,15615,15617,15619,15621,15623,15625,15627],{"class":611,"line":3105},[609,15613,15614],{"class":655},"    pbrMaterial",[609,15616,1122],{"class":614},[609,15618,14374],{"class":655},[609,15620,2770],{"class":614},[609,15622,15023],{"class":655},[609,15624,1470],{"class":618},[609,15626,941],{"class":795},[609,15628,15004],{"class":618},[609,15630,15631,15633,15635,15638,15640,15642,15644,15646],{"class":611,"line":4211},[609,15632,15614],{"class":655},[609,15634,1122],{"class":614},[609,15636,15637],{"class":655},"normalMap",[609,15639,2770],{"class":614},[609,15641,15023],{"class":655},[609,15643,1470],{"class":618},[609,15645,1897],{"class":795},[609,15647,15004],{"class":618},[609,15649,15650,15652,15654,15657,15659,15661,15663,15665],{"class":611,"line":4216},[609,15651,15614],{"class":655},[609,15653,1122],{"class":614},[609,15655,15656],{"class":655},"roughnessMap",[609,15658,2770],{"class":614},[609,15660,15023],{"class":655},[609,15662,1470],{"class":618},[609,15664,796],{"class":795},[609,15666,15004],{"class":618},[609,15668,15669,15671,15673,15676,15678,15680,15682,15684],{"class":611,"line":4239},[609,15670,15614],{"class":655},[609,15672,1122],{"class":614},[609,15674,15675],{"class":655},"metalnessMap",[609,15677,2770],{"class":614},[609,15679,15023],{"class":655},[609,15681,1470],{"class":618},[609,15683,4164],{"class":795},[609,15685,15004],{"class":618},[609,15687,15688,15690,15692,15695,15697,15699,15701,15703],{"class":611,"line":4248},[609,15689,15614],{"class":655},[609,15691,1122],{"class":614},[609,15693,15694],{"class":655},"displacementMap",[609,15696,2770],{"class":614},[609,15698,15023],{"class":655},[609,15700,1470],{"class":618},[609,15702,3494],{"class":795},[609,15704,15004],{"class":618},[609,15706,15707],{"class":611,"line":4257},[609,15708,714],{"emptyLinePlaceholder":566},[609,15710,15711],{"class":611,"line":4266},[609,15712,15713],{"class":1185},"    // Set material properties\n",[609,15715,15716,15718,15720,15723,15725],{"class":611,"line":4275},[609,15717,15614],{"class":655},[609,15719,1122],{"class":614},[609,15721,15722],{"class":655},"displacementScale",[609,15724,2770],{"class":614},[609,15726,15727],{"class":795}," 0\n",[609,15729,15731,15733,15735,15738,15740],{"class":611,"line":15730},38,[609,15732,15614],{"class":655},[609,15734,1122],{"class":614},[609,15736,15737],{"class":655},"metalness",[609,15739,2770],{"class":614},[609,15741,15742],{"class":795}," 0.8\n",[609,15744,15746,15748,15750,15753,15755],{"class":611,"line":15745},39,[609,15747,15614],{"class":655},[609,15749,1122],{"class":614},[609,15751,15752],{"class":655},"roughness",[609,15754,2770],{"class":614},[609,15756,15757],{"class":795}," 0.2\n",[609,15759,15761],{"class":611,"line":15760},40,[609,15762,2829],{"class":614},[609,15764,15766,15768],{"class":611,"line":15765},41,[609,15767,5548],{"class":614},[609,15769,5543],{"class":655},[609,15771,15773],{"class":611,"line":15772},42,[609,15774,714],{"emptyLinePlaceholder":566},[609,15776,15778],{"class":611,"line":15777},43,[609,15779,15780],{"class":1185},"// Handle loading state and errors\n",[609,15782,15784,15786,15789,15791,15793,15796,15798,15800],{"class":611,"line":15783},44,[609,15785,5489],{"class":2804},[609,15787,15788],{"class":655},"(isLoading",[609,15790,659],{"class":614},[609,15792,2717],{"class":614},[609,15794,15795],{"class":5499},"_loading",[609,15797,4129],{"class":614},[609,15799,5505],{"class":622},[609,15801,1180],{"class":614},[609,15803,15805],{"class":611,"line":15804},45,[609,15806,15807],{"class":1185},"  // Handle loading state\n",[609,15809,15811,15813],{"class":611,"line":15810},46,[609,15812,5548],{"class":614},[609,15814,5543],{"class":655},[609,15816,15818],{"class":611,"line":15817},47,[609,15819,714],{"emptyLinePlaceholder":566},[609,15821,15823,15825,15828,15830,15832,15835,15837,15839],{"class":611,"line":15822},48,[609,15824,5489],{"class":2804},[609,15826,15827],{"class":655},"(error",[609,15829,659],{"class":614},[609,15831,2717],{"class":614},[609,15833,15834],{"class":5499},"errs",[609,15836,4129],{"class":614},[609,15838,5505],{"class":622},[609,15840,1180],{"class":614},[609,15842,15844,15846,15848,15850,15852],{"class":611,"line":15843},49,[609,15845,8458],{"class":648},[609,15847,2717],{"class":618},[609,15849,15834],{"class":655},[609,15851,2752],{"class":618},[609,15853,2755],{"class":614},[609,15855,15857,15860,15862,15864,15866,15868,15871,15873,15875,15878],{"class":611,"line":15856},50,[609,15858,15859],{"class":655},"    console",[609,15861,1122],{"class":614},[609,15863,14505],{"class":2804},[609,15865,2974],{"class":618},[609,15867,5540],{"class":614},[609,15869,15870],{"class":635},"Error loading textures:",[609,15872,5540],{"class":614},[609,15874,659],{"class":614},[609,15876,15877],{"class":655}," errs",[609,15879,5543],{"class":618},[609,15881,15883],{"class":611,"line":15882},51,[609,15884,2829],{"class":614},[609,15886,15888,15890],{"class":611,"line":15887},52,[609,15889,5548],{"class":614},[609,15891,5543],{"class":655},[609,15893,15895,15897,15899],{"class":611,"line":15894},53,[609,15896,704],{"class":614},[609,15898,619],{"class":618},[609,15900,641],{"class":614},[609,15902,15904],{"class":611,"line":15903},54,[609,15905,714],{"emptyLinePlaceholder":566},[609,15907,15909,15911,15913],{"class":611,"line":15908},55,[609,15910,615],{"class":614},[609,15912,722],{"class":618},[609,15914,641],{"class":614},[609,15916,15918,15920,15922,15924,15926,15928,15930,15932],{"class":611,"line":15917},56,[609,15919,730],{"class":614},[609,15921,733],{"class":618},[609,15923,736],{"class":622},[609,15925,629],{"class":614},[609,15927,632],{"class":614},[609,15929,3885],{"class":635},[609,15931,632],{"class":614},[609,15933,641],{"class":614},[609,15935,15937,15939,15942],{"class":611,"line":15936},57,[609,15938,753],{"class":614},[609,15940,15941],{"class":618},"Suspense",[609,15943,641],{"class":614},[609,15945,15947,15949,15951,15954,15956,15958,15961,15963,15966,15968,15971,15973,15975,15977,15979],{"class":611,"line":15946},58,[609,15948,829],{"class":614},[609,15950,351],{"class":618},[609,15952,15953],{"class":622}," preset",[609,15955,629],{"class":614},[609,15957,632],{"class":614},[609,15959,15960],{"class":635},"studio",[609,15962,632],{"class":614},[609,15964,15965],{"class":622}," background",[609,15967,785],{"class":614},[609,15969,15970],{"class":622},"blur",[609,15972,629],{"class":614},[609,15974,632],{"class":614},[609,15976,1897],{"class":795},[609,15978,632],{"class":614},[609,15980,759],{"class":614},[609,15982,15984,15986,15988],{"class":611,"line":15983},59,[609,15985,871],{"class":614},[609,15987,15941],{"class":618},[609,15989,641],{"class":614},[609,15991,15993,15995,15997,15999,16001,16003,16005,16007,16010,16012,16014,16016,16018,16020,16022],{"class":611,"line":15992},60,[609,15994,753],{"class":614},[609,15996,756],{"class":618},[609,15998,785],{"class":614},[609,16000,1463],{"class":622},[609,16002,629],{"class":614},[609,16004,632],{"class":614},[609,16006,1470],{"class":614},[609,16008,16009],{"class":795},"8",[609,16011,1475],{"class":614},[609,16013,16009],{"class":795},[609,16015,1475],{"class":614},[609,16017,16009],{"class":795},[609,16019,1485],{"class":614},[609,16021,632],{"class":614},[609,16023,759],{"class":614},[609,16025,16027,16029,16031],{"class":611,"line":16026},61,[609,16028,753],{"class":614},[609,16030,767],{"class":618},[609,16032,759],{"class":614},[609,16034,16036,16038,16040],{"class":611,"line":16035},62,[609,16037,753],{"class":614},[609,16039,3071],{"class":618},[609,16041,759],{"class":614},[609,16043,16045,16047,16049,16051,16053,16055,16057,16059,16061],{"class":611,"line":16044},63,[609,16046,753],{"class":614},[609,16048,3522],{"class":618},[609,16050,785],{"class":614},[609,16052,1890],{"class":622},[609,16054,629],{"class":614},[609,16056,632],{"class":614},[609,16058,796],{"class":795},[609,16060,632],{"class":614},[609,16062,759],{"class":614},[609,16064,16066,16068,16070,16073,16075,16077,16079,16081,16083,16085,16087,16089,16091,16093,16095,16097,16099,16101,16103,16105,16107,16109,16111,16113,16115,16117,16119],{"class":611,"line":16065},64,[609,16067,753],{"class":614},[609,16069,3543],{"class":618},[609,16071,16072],{"class":622}," v-light-helper",[609,16074,785],{"class":614},[609,16076,1463],{"class":622},[609,16078,629],{"class":614},[609,16080,632],{"class":614},[609,16082,1470],{"class":614},[609,16084,2400],{"class":795},[609,16086,1475],{"class":614},[609,16088,2400],{"class":795},[609,16090,1475],{"class":614},[609,16092,2400],{"class":795},[609,16094,1485],{"class":614},[609,16096,632],{"class":614},[609,16098,785],{"class":614},[609,16100,1890],{"class":622},[609,16102,629],{"class":614},[609,16104,632],{"class":614},[609,16106,1517],{"class":795},[609,16108,632],{"class":614},[609,16110,3982],{"class":622},[609,16112,629],{"class":614},[609,16114,632],{"class":614},[609,16116,2529],{"class":635},[609,16118,632],{"class":614},[609,16120,759],{"class":614},[609,16122,16124,16126,16128,16130,16132,16134,16136,16138,16141,16143,16145,16147,16149,16151,16153,16155,16157,16159,16161,16163,16165,16167,16169,16171,16173,16176,16178],{"class":611,"line":16123},65,[609,16125,753],{"class":614},[609,16127,3543],{"class":618},[609,16129,16072],{"class":622},[609,16131,785],{"class":614},[609,16133,1463],{"class":622},[609,16135,629],{"class":614},[609,16137,632],{"class":614},[609,16139,16140],{"class":614},"[-",[609,16142,2400],{"class":795},[609,16144,1475],{"class":614},[609,16146,796],{"class":795},[609,16148,1475],{"class":614},[609,16150,796],{"class":795},[609,16152,1485],{"class":614},[609,16154,632],{"class":614},[609,16156,785],{"class":614},[609,16158,1890],{"class":622},[609,16160,629],{"class":614},[609,16162,632],{"class":614},[609,16164,1517],{"class":795},[609,16166,632],{"class":614},[609,16168,3982],{"class":622},[609,16170,629],{"class":614},[609,16172,632],{"class":614},[609,16174,16175],{"class":635},"#0000ff",[609,16177,632],{"class":614},[609,16179,759],{"class":614},[609,16181,16183,16185,16187,16190,16192,16194,16196,16198],{"class":611,"line":16182},66,[609,16184,753],{"class":614},[609,16186,3916],{"class":618},[609,16188,16189],{"class":622}," position-y",[609,16191,629],{"class":614},[609,16193,632],{"class":614},[609,16195,796],{"class":635},[609,16197,632],{"class":614},[609,16199,641],{"class":614},[609,16201,16203,16205,16207,16209,16211,16213,16216,16218,16220,16222,16224,16226,16228,16230],{"class":611,"line":16202},67,[609,16204,829],{"class":614},[609,16206,11507],{"class":618},[609,16208,11510],{"class":648},[609,16210,629],{"class":614},[609,16212,632],{"class":614},[609,16214,16215],{"class":655},"cube",[609,16217,632],{"class":614},[609,16219,785],{"class":614},[609,16221,10754],{"class":622},[609,16223,629],{"class":614},[609,16225,632],{"class":614},[609,16227,16215],{"class":655},[609,16229,632],{"class":614},[609,16231,759],{"class":614},[609,16233,16235,16237,16239],{"class":611,"line":16234},68,[609,16236,871],{"class":614},[609,16238,3916],{"class":618},[609,16240,641],{"class":614},[609,16242,16244,16246,16248],{"class":611,"line":16243},69,[609,16245,881],{"class":614},[609,16247,733],{"class":618},[609,16249,641],{"class":614},[609,16251,16253,16255,16257],{"class":611,"line":16252},70,[609,16254,704],{"class":614},[609,16256,722],{"class":618},[609,16258,641],{"class":614},[476,16260,16262],{"id":16261},"api","API",[7477,16264,16266],{"id":16265},"parameters","Parameters",[903,16268,16269,16281],{},[906,16270,16271],{},[909,16272,16273,16275,16277,16279],{},[912,16274,3122],{"align":973},[912,16276,11906],{},[912,16278,920],{},[912,16280,917],{},[922,16282,16283],{},[909,16284,16285,16290,16295,16299],{},[927,16286,16287],{"align":973},[1677,16288,16289],{},"paths",[927,16291,16292],{},[590,16293,16294],{},"string[]",[927,16296,16297],{},[590,16298,1155],{},[927,16300,16301],{},"Array of paths to the textures.",[7477,16303,16305],{"id":16304},"returns","Returns",[903,16307,16308,16318],{},[906,16309,16310],{},[909,16311,16312,16314,16316],{},[912,16313,3122],{"align":973},[912,16315,11906],{},[912,16317,917],{},[922,16319,16320,16334,16347],{},[909,16321,16322,16326,16331],{},[927,16323,16324],{"align":973},[1677,16325,15097],{},[927,16327,16328],{},[590,16329,16330],{},"Texture[]",[927,16332,16333],{},"Array of loaded textures.",[909,16335,16336,16340,16344],{},[927,16337,16338],{"align":973},[1677,16339,11958],{},[927,16341,16342],{},[590,16343,11963],{},[927,16345,16346],{},"Whether any textures are still loading.",[909,16348,16349,16353,16358],{},[927,16350,16351],{"align":973},[1677,16352,14505],{},[927,16354,16355],{},[590,16356,16357],{},"Error[] | null",[927,16359,16360],{},"Array of errors if any occurred during loading.",[476,16362,16364],{"id":16363},"benefits","Benefits",[3140,16366,16367,16373,16379,16385],{},[3143,16368,16369,16372],{},[1677,16370,16371],{},"Simplified API",": Load multiple textures with a single function call",[3143,16374,16375,16378],{},[1677,16376,16377],{},"Consolidated loading state",": Track loading state for all textures at once",[3143,16380,16381,16384],{},[1677,16382,16383],{},"Unified error handling",": Collect and report errors from all texture loads",[3143,16386,16387,16390],{},[1677,16388,16389],{},"Type safety",": Proper TypeScript typing throughout the implementation",[1303,16392,16393],{},"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 pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":548,"searchDepth":549,"depth":550,"links":16395},[16396,16397,16398,16402],{"id":596,"depth":550,"text":15},{"id":15172,"depth":550,"text":15173},{"id":16261,"depth":550,"text":16262,"children":16399},[16400,16401],{"id":16265,"depth":680,"text":16266},{"id":16304,"depth":680,"text":16305},{"id":16363,"depth":550,"text":16364},"A composable to load multiple textures efficiently in TresJS scenes.",{},{"title":141,"description":16403},"9FTfBPclSGZMDwzt-akBsJF1ppNDXZK3MP6nddxg3dg",{"id":16408,"title":145,"body":16409,"description":19416,"extension":563,"links":564,"meta":19417,"navigation":566,"path":146,"seo":19418,"stem":147,"__hash__":19419},"docs/2.api/3.loaders/7.use-svg.md",{"type":473,"value":16410,"toc":19391},[16411,16416,16429,16433,16438,16440,16964,16969,16983,16987,16990,17102,17104,17174,17176,17285,17289,17294,17352,17357,17693,17697,17702,17708,17713,17719,17736,17742,17757,17804,17807,17812,17823,17828,17831,17876,17880,17885,17888,17893,17902,17947,17951,17956,17968,17973,18015,18019,18022,18150,18154,18158,18482,18486,18808,18812,18819,19032,19034,19200,19204,19211,19214,19218,19228,19232,19256,19264,19277,19281,19308,19312,19332,19342,19350,19367,19374,19388],[2562,16412,16413],{},[16414,16415],"loaders-use-svg",{},[586,16417,16418,16419,16421,16422,16424,16425,16428],{},"Load and display SVG elements in your ",[1677,16420,11378],{}," scene. This guide covers both the ",[590,16423,145],{}," composable for advanced use cases and the ",[590,16426,16427],{},"SVG"," component for simple declarative rendering.",[476,16430,16432],{"id":16431},"usesvg-composable","useSVG Composable",[586,16434,2257,16435,16437],{},[590,16436,145],{}," composable provides direct access to processed SVG layers, giving you full control over the resulting geometries and materials.",[7477,16439,15],{"id":596},[11383,16441,16442,16771],{},[598,16443,16446],{"className":600,"code":16444,"filename":11388,"highlights":16445,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { useSVG } from '@tresjs/cientos'\n\nconst svgPath = './logo.svg'\nconst { state, layers, isLoading, dispose } = useSVG(svgPath, {\n  skipFills: false,\n  fillMaterial: { transparent: true, opacity: 0.8 }\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresGroup v-if=\"!isLoading\">\n    \u003CTresMesh\n      v-for=\"(layer, index) in layers\"\n      :key=\"`layer-${index}`\"\n      :geometry=\"layer.geometry\"\n      :render-order=\"index\"\n    >\n      \u003CTresMeshBasicMaterial v-bind=\"layer.material\" />\n    \u003C/TresMesh>\n  \u003C/TresGroup>\n\u003C/template>\n",[550,711,717,727,750],[590,16447,16448,16468,16488,16492,16508,16544,16557,16586,16593,16601,16605,16613,16633,16639,16664,16686,16705,16720,16724,16747,16755,16763],{"__ignoreMap":548},[609,16449,16450,16452,16454,16456,16458,16460,16462,16464,16466],{"class":611,"line":549},[609,16451,615],{"class":614},[609,16453,619],{"class":618},[609,16455,623],{"class":622},[609,16457,626],{"class":622},[609,16459,629],{"class":614},[609,16461,632],{"class":614},[609,16463,636],{"class":635},[609,16465,632],{"class":614},[609,16467,641],{"class":614},[609,16469,16471,16473,16475,16478,16480,16482,16484,16486],{"class":16470,"line":550},[611,645],[609,16472,649],{"class":648},[609,16474,652],{"class":614},[609,16476,16477],{"class":655}," useSVG",[609,16479,665],{"class":614},[609,16481,668],{"class":648},[609,16483,671],{"class":614},[609,16485,674],{"class":635},[609,16487,677],{"class":614},[609,16489,16490],{"class":611,"line":680},[609,16491,714],{"emptyLinePlaceholder":566},[609,16493,16494,16496,16499,16501,16503,16506],{"class":611,"line":701},[609,16495,2693],{"class":622},[609,16497,16498],{"class":655}," svgPath ",[609,16500,629],{"class":614},[609,16502,671],{"class":614},[609,16504,16505],{"class":635},"./logo.svg",[609,16507,677],{"class":614},[609,16509,16511,16513,16515,16517,16519,16522,16524,16526,16528,16531,16533,16535,16537,16540,16542],{"class":16510,"line":711},[611,645],[609,16512,2693],{"class":622},[609,16514,652],{"class":614},[609,16516,11461],{"class":655},[609,16518,659],{"class":614},[609,16520,16521],{"class":655}," layers",[609,16523,659],{"class":614},[609,16525,14313],{"class":655},[609,16527,659],{"class":614},[609,16529,16530],{"class":655}," dispose ",[609,16532,5548],{"class":614},[609,16534,2770],{"class":614},[609,16536,16477],{"class":2804},[609,16538,16539],{"class":655},"(svgPath",[609,16541,659],{"class":614},[609,16543,1180],{"class":614},[609,16545,16547,16550,16552,16555],{"class":16546,"line":717},[611,645],[609,16548,16549],{"class":618},"  skipFills",[609,16551,1194],{"class":614},[609,16553,16554],{"class":3874}," false",[609,16556,14979],{"class":614},[609,16558,16560,16563,16565,16567,16570,16572,16574,16576,16579,16581,16584],{"class":16559,"line":727},[611,645],[609,16561,16562],{"class":618},"  fillMaterial",[609,16564,1194],{"class":614},[609,16566,652],{"class":614},[609,16568,16569],{"class":618}," transparent",[609,16571,1194],{"class":614},[609,16573,11887],{"class":3874},[609,16575,659],{"class":614},[609,16577,16578],{"class":618}," opacity",[609,16580,1194],{"class":614},[609,16582,16583],{"class":795}," 0.8",[609,16585,8480],{"class":614},[609,16587,16589,16591],{"class":16588,"line":750},[611,645],[609,16590,5548],{"class":614},[609,16592,5543],{"class":655},[609,16594,16595,16597,16599],{"class":611,"line":762},[609,16596,704],{"class":614},[609,16598,619],{"class":618},[609,16600,641],{"class":614},[609,16602,16603],{"class":611,"line":772},[609,16604,714],{"emptyLinePlaceholder":566},[609,16606,16607,16609,16611],{"class":611,"line":777},[609,16608,615],{"class":614},[609,16610,722],{"class":618},[609,16612,641],{"class":614},[609,16614,16615,16617,16619,16621,16623,16625,16627,16629,16631],{"class":611,"line":803},[609,16616,730],{"class":614},[609,16618,3916],{"class":618},[609,16620,11510],{"class":648},[609,16622,629],{"class":614},[609,16624,632],{"class":614},[609,16626,8463],{"class":614},[609,16628,11958],{"class":655},[609,16630,632],{"class":614},[609,16632,641],{"class":614},[609,16634,16635,16637],{"class":611,"line":603},[609,16636,753],{"class":614},[609,16638,2961],{"class":618},[609,16640,16641,16644,16646,16648,16650,16653,16655,16657,16659,16662],{"class":611,"line":826},[609,16642,16643],{"class":648},"      v-for",[609,16645,629],{"class":614},[609,16647,632],{"class":614},[609,16649,2974],{"class":614},[609,16651,16652],{"class":655},"layer",[609,16654,1475],{"class":614},[609,16656,2982],{"class":655},[609,16658,2985],{"class":614},[609,16660,16661],{"class":655},"layers",[609,16663,2991],{"class":614},[609,16665,16666,16668,16670,16672,16675,16678,16681,16683],{"class":611,"line":837},[609,16667,5697],{"class":614},[609,16669,3000],{"class":622},[609,16671,629],{"class":614},[609,16673,16674],{"class":614},"\"`",[609,16676,16677],{"class":635},"layer-",[609,16679,16680],{"class":614},"${",[609,16682,2982],{"class":655},[609,16684,16685],{"class":614},"}`\"\n",[609,16687,16688,16690,16693,16695,16697,16699,16701,16703],{"class":611,"line":848},[609,16689,5697],{"class":614},[609,16691,16692],{"class":622},"geometry",[609,16694,629],{"class":614},[609,16696,632],{"class":614},[609,16698,16652],{"class":655},[609,16700,1122],{"class":614},[609,16702,16692],{"class":655},[609,16704,2991],{"class":614},[609,16706,16707,16709,16712,16714,16716,16718],{"class":611,"line":858},[609,16708,5697],{"class":614},[609,16710,16711],{"class":622},"render-order",[609,16713,629],{"class":614},[609,16715,632],{"class":614},[609,16717,2982],{"class":655},[609,16719,2991],{"class":614},[609,16721,16722],{"class":611,"line":604},[609,16723,5717],{"class":614},[609,16725,16726,16728,16730,16732,16734,16736,16738,16740,16743,16745],{"class":611,"line":878},[609,16727,829],{"class":614},[609,16729,2429],{"class":618},[609,16731,4115],{"class":622},[609,16733,629],{"class":614},[609,16735,632],{"class":614},[609,16737,16652],{"class":655},[609,16739,1122],{"class":614},[609,16741,16742],{"class":655},"material",[609,16744,632],{"class":614},[609,16746,759],{"class":614},[609,16748,16749,16751,16753],{"class":611,"line":888},[609,16750,871],{"class":614},[609,16752,832],{"class":618},[609,16754,641],{"class":614},[609,16756,16757,16759,16761],{"class":611,"line":2956},[609,16758,881],{"class":614},[609,16760,3916],{"class":618},[609,16762,641],{"class":614},[609,16764,16765,16767,16769],{"class":611,"line":2964},[609,16766,704],{"class":614},[609,16768,722],{"class":618},[609,16770,641],{"class":614},[598,16772,16774],{"className":600,"code":16773,"filename":11550,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport TheModel from './TheModel.vue'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#333\">\n    \u003CTresPerspectiveCamera :position=\"[0, 2, 10]\" />\n    \u003COrbitControls />\n    \u003CTheModel />\n    \u003CTresAmbientLight />\n    \u003CTresDirectionalLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[590,16775,16776,16796,16814,16832,16846,16854,16858,16866,16884,16916,16924,16932,16940,16948,16956],{"__ignoreMap":548},[609,16777,16778,16780,16782,16784,16786,16788,16790,16792,16794],{"class":611,"line":549},[609,16779,615],{"class":614},[609,16781,619],{"class":618},[609,16783,623],{"class":622},[609,16785,626],{"class":622},[609,16787,629],{"class":614},[609,16789,632],{"class":614},[609,16791,636],{"class":635},[609,16793,632],{"class":614},[609,16795,641],{"class":614},[609,16797,16798,16800,16802,16804,16806,16808,16810,16812],{"class":611,"line":550},[609,16799,649],{"class":648},[609,16801,652],{"class":614},[609,16803,662],{"class":655},[609,16805,665],{"class":614},[609,16807,668],{"class":648},[609,16809,671],{"class":614},[609,16811,674],{"class":635},[609,16813,677],{"class":614},[609,16815,16816,16818,16820,16822,16824,16826,16828,16830],{"class":611,"line":680},[609,16817,649],{"class":648},[609,16819,652],{"class":614},[609,16821,687],{"class":655},[609,16823,665],{"class":614},[609,16825,668],{"class":648},[609,16827,671],{"class":614},[609,16829,696],{"class":635},[609,16831,677],{"class":614},[609,16833,16834,16836,16838,16840,16842,16844],{"class":611,"line":701},[609,16835,649],{"class":648},[609,16837,11615],{"class":655},[609,16839,11618],{"class":648},[609,16841,671],{"class":614},[609,16843,11623],{"class":635},[609,16845,677],{"class":614},[609,16847,16848,16850,16852],{"class":611,"line":711},[609,16849,704],{"class":614},[609,16851,619],{"class":618},[609,16853,641],{"class":614},[609,16855,16856],{"class":611,"line":717},[609,16857,714],{"emptyLinePlaceholder":566},[609,16859,16860,16862,16864],{"class":611,"line":727},[609,16861,615],{"class":614},[609,16863,722],{"class":618},[609,16865,641],{"class":614},[609,16867,16868,16870,16872,16874,16876,16878,16880,16882],{"class":611,"line":750},[609,16869,730],{"class":614},[609,16871,733],{"class":618},[609,16873,736],{"class":622},[609,16875,629],{"class":614},[609,16877,632],{"class":614},[609,16879,6326],{"class":635},[609,16881,632],{"class":614},[609,16883,641],{"class":614},[609,16885,16886,16888,16890,16892,16894,16896,16898,16900,16902,16904,16906,16908,16910,16912,16914],{"class":611,"line":762},[609,16887,753],{"class":614},[609,16889,756],{"class":618},[609,16891,785],{"class":614},[609,16893,1463],{"class":622},[609,16895,629],{"class":614},[609,16897,632],{"class":614},[609,16899,1470],{"class":614},[609,16901,941],{"class":795},[609,16903,1475],{"class":614},[609,16905,796],{"class":795},[609,16907,1475],{"class":614},[609,16909,1482],{"class":795},[609,16911,1485],{"class":614},[609,16913,632],{"class":614},[609,16915,759],{"class":614},[609,16917,16918,16920,16922],{"class":611,"line":772},[609,16919,753],{"class":614},[609,16921,767],{"class":618},[609,16923,759],{"class":614},[609,16925,16926,16928,16930],{"class":611,"line":777},[609,16927,753],{"class":614},[609,16929,11711],{"class":618},[609,16931,759],{"class":614},[609,16933,16934,16936,16938],{"class":611,"line":803},[609,16935,753],{"class":614},[609,16937,3522],{"class":618},[609,16939,759],{"class":614},[609,16941,16942,16944,16946],{"class":611,"line":603},[609,16943,753],{"class":614},[609,16945,3543],{"class":618},[609,16947,759],{"class":614},[609,16949,16950,16952,16954],{"class":611,"line":826},[609,16951,881],{"class":614},[609,16953,733],{"class":618},[609,16955,641],{"class":614},[609,16957,16958,16960,16962],{"class":611,"line":837},[609,16959,704],{"class":614},[609,16961,722],{"class":618},[609,16963,641],{"class":614},[586,16965,2257,16966,16968],{},[590,16967,145],{}," composable provides direct access to processed SVG layers, giving you full control over how they're rendered. This is particularly useful when you need to:",[3140,16970,16971,16974,16977,16980],{},[3143,16972,16973],{},"Manually control layer rendering",[3143,16975,16976],{},"Apply custom animations to individual layers",[3143,16978,16979],{},"Access geometry data programmatically",[3143,16981,16982],{},"Implement complex material logic",[7477,16984,16986],{"id":16985},"svg-data-sources","SVG Data Sources",[586,16988,16989],{},"The composable accepts both file paths and inline SVG strings:",[598,16991,16993],{"className":1162,"code":16992,"language":636,"meta":548,"style":548},"import { useSVG } from '@tresjs/cientos'\n\n// From file\nconst { layers } = useSVG('/path/to/file.svg')\n\n// Inline SVG string\nconst svgString = `\u003Csvg viewBox=\"0 0 100 100\">\n  \u003Ccircle cx=\"50\" cy=\"50\" r=\"40\" fill=\"red\" />\n\u003C/svg>`\nconst { layers } = useSVG(svgString)\n",[590,16994,16995,17013,17017,17022,17048,17052,17057,17072,17077,17085],{"__ignoreMap":548},[609,16996,16997,16999,17001,17003,17005,17007,17009,17011],{"class":611,"line":549},[609,16998,649],{"class":648},[609,17000,652],{"class":614},[609,17002,16477],{"class":655},[609,17004,665],{"class":614},[609,17006,668],{"class":648},[609,17008,671],{"class":614},[609,17010,674],{"class":635},[609,17012,677],{"class":614},[609,17014,17015],{"class":611,"line":550},[609,17016,714],{"emptyLinePlaceholder":566},[609,17018,17019],{"class":611,"line":680},[609,17020,17021],{"class":1185},"// From file\n",[609,17023,17024,17026,17028,17031,17033,17035,17037,17039,17041,17044,17046],{"class":611,"line":701},[609,17025,2693],{"class":622},[609,17027,652],{"class":614},[609,17029,17030],{"class":655}," layers ",[609,17032,5548],{"class":614},[609,17034,2770],{"class":614},[609,17036,16477],{"class":2804},[609,17038,2974],{"class":655},[609,17040,5540],{"class":614},[609,17042,17043],{"class":635},"/path/to/file.svg",[609,17045,5540],{"class":614},[609,17047,5543],{"class":655},[609,17049,17050],{"class":611,"line":711},[609,17051,714],{"emptyLinePlaceholder":566},[609,17053,17054],{"class":611,"line":717},[609,17055,17056],{"class":1185},"// Inline SVG string\n",[609,17058,17059,17061,17064,17066,17069],{"class":611,"line":727},[609,17060,2693],{"class":622},[609,17062,17063],{"class":655}," svgString ",[609,17065,629],{"class":614},[609,17067,17068],{"class":614}," `",[609,17070,17071],{"class":635},"\u003Csvg viewBox=\"0 0 100 100\">\n",[609,17073,17074],{"class":611,"line":750},[609,17075,17076],{"class":635},"  \u003Ccircle cx=\"50\" cy=\"50\" r=\"40\" fill=\"red\" />\n",[609,17078,17079,17082],{"class":611,"line":762},[609,17080,17081],{"class":635},"\u003C/svg>",[609,17083,17084],{"class":614},"`\n",[609,17086,17087,17089,17091,17093,17095,17097,17099],{"class":611,"line":772},[609,17088,2693],{"class":622},[609,17090,652],{"class":614},[609,17092,17030],{"class":655},[609,17094,5548],{"class":614},[609,17096,2770],{"class":614},[609,17098,16477],{"class":2804},[609,17100,17101],{"class":655},"(svgString)\n",[7477,17103,11895],{"id":11894},[903,17105,17106,17116],{},[906,17107,17108],{},[909,17109,17110,17112,17114],{},[912,17111,3122],{"align":973},[912,17113,11906],{},[912,17115,917],{},[922,17117,17118,17132,17146,17159],{},[909,17119,17120,17124,17129],{},[927,17121,17122],{"align":973},[1677,17123,9133],{},[927,17125,17126],{},[590,17127,17128],{},"SVGResult",[927,17130,17131],{},"The loaded SVG state from SVGLoader",[909,17133,17134,17138,17143],{},[927,17135,17136],{"align":973},[1677,17137,16661],{},[927,17139,17140],{},[590,17141,17142],{},"SVGLayer[]",[927,17144,17145],{},"Computed array of processed geometries and materials",[909,17147,17148,17152,17156],{},[927,17149,17150],{"align":973},[1677,17151,11958],{},[927,17153,17154],{},[590,17155,11963],{},[927,17157,17158],{},"Whether the SVG is currently loading",[909,17160,17161,17166,17171],{},[927,17162,17163],{"align":973},[1677,17164,17165],{},"dispose",[927,17167,17168],{},[590,17169,17170],{},"() => void",[927,17172,17173],{},"Function to dispose of all geometries",[7477,17175,7491],{"id":11998},[903,17177,17178,17190],{},[906,17179,17180],{},[909,17181,17182,17184,17186,17188],{},[912,17183,3122],{"align":973},[912,17185,11906],{},[912,17187,920],{},[912,17189,917],{},[922,17191,17192,17210,17228,17248,17266],{},[909,17193,17194,17199,17203,17207],{},[927,17195,17196],{"align":973},[1677,17197,17198],{},"skipStrokes",[927,17200,17201],{},[590,17202,11963],{},[927,17204,17205],{},[590,17206,947],{},[927,17208,17209],{},"Whether to skip rendering strokes",[909,17211,17212,17217,17221,17225],{},[927,17213,17214],{"align":973},[1677,17215,17216],{},"skipFills",[927,17218,17219],{},[590,17220,11963],{},[927,17222,17223],{},[590,17224,947],{},[927,17226,17227],{},"Whether to skip rendering fills",[909,17229,17230,17235,17240,17245],{},[927,17231,17232],{"align":973},[1677,17233,17234],{},"fillMaterial",[927,17236,17237],{},[590,17238,17239],{},"MeshBasicMaterialParameters",[927,17241,17242],{},[590,17243,17244],{},"{}",[927,17246,17247],{},"Material properties for fill layers",[909,17249,17250,17255,17259,17263],{},[927,17251,17252],{"align":973},[1677,17253,17254],{},"strokeMaterial",[927,17256,17257],{},[590,17258,17239],{},[927,17260,17261],{},[590,17262,17244],{},[927,17264,17265],{},"Material properties for stroke layers",[909,17267,17268,17272,17277,17282],{},[927,17269,17270],{"align":973},[1677,17271,6362],{},[927,17273,17274],{},[590,17275,17276],{},"'renderOrder' | 'flat' | 'offsetZ' | number",[927,17278,17279],{},[590,17280,17281],{},"'renderOrder'",[927,17283,17284],{},"How layers should be rendered in 3D space",[7477,17286,17288],{"id":17287},"working-with-layers","Working with Layers",[586,17290,2257,17291,17293],{},[590,17292,16661],{}," computed property returns an array of processed SVG elements, each containing:",[598,17295,17297],{"className":1162,"code":17296,"language":636,"meta":548,"style":548},"interface SVGLayer {\n  geometry: BufferGeometry // Three.js geometry for the layer\n  material: MeshBasicMaterialParameters // Material properties\n  isStroke: boolean // Whether this layer is a stroke or fill\n}\n",[590,17298,17299,17309,17322,17335,17348],{"__ignoreMap":548},[609,17300,17301,17304,17307],{"class":611,"line":549},[609,17302,17303],{"class":622},"interface",[609,17305,17306],{"class":1176}," SVGLayer",[609,17308,1180],{"class":614},[609,17310,17311,17314,17316,17319],{"class":611,"line":550},[609,17312,17313],{"class":618},"  geometry",[609,17315,1194],{"class":614},[609,17317,17318],{"class":1176}," BufferGeometry",[609,17320,17321],{"class":1185}," // Three.js geometry for the layer\n",[609,17323,17324,17327,17329,17332],{"class":611,"line":680},[609,17325,17326],{"class":618},"  material",[609,17328,1194],{"class":614},[609,17330,17331],{"class":1176}," MeshBasicMaterialParameters",[609,17333,17334],{"class":1185}," // Material properties\n",[609,17336,17337,17340,17342,17345],{"class":611,"line":701},[609,17338,17339],{"class":618},"  isStroke",[609,17341,1194],{"class":614},[609,17343,17344],{"class":1176}," boolean",[609,17346,17347],{"class":1185}," // Whether this layer is a stroke or fill\n",[609,17349,17350],{"class":611,"line":711},[609,17351,1301],{"class":614},[17353,17354,17356],"h4",{"id":17355},"accessing-individual-layers","Accessing Individual Layers",[598,17358,17361],{"className":600,"code":17359,"highlights":17360,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { useSVG } from '@tresjs/cientos'\n\nconst { layers } = useSVG('/complex-icon.svg')\n\n// Apply different materials based on layer type\nconst getFillColor = (layer: SVGLayer, index: number) => {\n  return layer.isStroke ? '#000000' : `hsl(${index * 30}, 70%, 50%)`\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresGroup>\n    \u003CTresMesh\n      v-for=\"(layer, index) in layers\"\n      :key=\"index\"\n      :geometry=\"layer.geometry\"\n    >\n      \u003CTresMeshBasicMaterial\n        v-bind=\"layer.material\"\n        :color=\"getFillColor(layer, index)\"\n      />\n    \u003C/TresMesh>\n  \u003C/TresGroup>\n\u003C/template>\n",[550,701],[590,17362,17363,17383,17402,17406,17432,17436,17441,17473,17520,17524,17532,17536,17544,17552,17558,17580,17594,17612,17616,17623,17640,17665,17669,17677,17685],{"__ignoreMap":548},[609,17364,17365,17367,17369,17371,17373,17375,17377,17379,17381],{"class":611,"line":549},[609,17366,615],{"class":614},[609,17368,619],{"class":618},[609,17370,623],{"class":622},[609,17372,626],{"class":622},[609,17374,629],{"class":614},[609,17376,632],{"class":614},[609,17378,636],{"class":635},[609,17380,632],{"class":614},[609,17382,641],{"class":614},[609,17384,17386,17388,17390,17392,17394,17396,17398,17400],{"class":17385,"line":550},[611,645],[609,17387,649],{"class":648},[609,17389,652],{"class":614},[609,17391,16477],{"class":655},[609,17393,665],{"class":614},[609,17395,668],{"class":648},[609,17397,671],{"class":614},[609,17399,674],{"class":635},[609,17401,677],{"class":614},[609,17403,17404],{"class":611,"line":680},[609,17405,714],{"emptyLinePlaceholder":566},[609,17407,17409,17411,17413,17415,17417,17419,17421,17423,17425,17428,17430],{"class":17408,"line":701},[611,645],[609,17410,2693],{"class":622},[609,17412,652],{"class":614},[609,17414,17030],{"class":655},[609,17416,5548],{"class":614},[609,17418,2770],{"class":614},[609,17420,16477],{"class":2804},[609,17422,2974],{"class":655},[609,17424,5540],{"class":614},[609,17426,17427],{"class":635},"/complex-icon.svg",[609,17429,5540],{"class":614},[609,17431,5543],{"class":655},[609,17433,17434],{"class":611,"line":711},[609,17435,714],{"emptyLinePlaceholder":566},[609,17437,17438],{"class":611,"line":717},[609,17439,17440],{"class":1185},"// Apply different materials based on layer type\n",[609,17442,17443,17445,17448,17450,17452,17454,17456,17458,17460,17463,17465,17467,17469,17471],{"class":611,"line":727},[609,17444,2693],{"class":622},[609,17446,17447],{"class":655}," getFillColor ",[609,17449,629],{"class":614},[609,17451,2717],{"class":614},[609,17453,16652],{"class":5499},[609,17455,1194],{"class":614},[609,17457,17306],{"class":1176},[609,17459,659],{"class":614},[609,17461,17462],{"class":5499}," index",[609,17464,1194],{"class":614},[609,17466,2701],{"class":1176},[609,17468,4129],{"class":614},[609,17470,5505],{"class":622},[609,17472,1180],{"class":614},[609,17474,17475,17478,17481,17483,17486,17489,17491,17494,17496,17498,17500,17503,17505,17508,17510,17513,17515,17518],{"class":611,"line":750},[609,17476,17477],{"class":648},"  return",[609,17479,17480],{"class":655}," layer",[609,17482,1122],{"class":614},[609,17484,17485],{"class":655},"isStroke",[609,17487,17488],{"class":614}," ?",[609,17490,671],{"class":614},[609,17492,17493],{"class":635},"#000000",[609,17495,5540],{"class":614},[609,17497,785],{"class":614},[609,17499,17068],{"class":614},[609,17501,17502],{"class":635},"hsl(",[609,17504,16680],{"class":614},[609,17506,17507],{"class":655},"index ",[609,17509,8546],{"class":614},[609,17511,17512],{"class":795}," 30",[609,17514,5548],{"class":614},[609,17516,17517],{"class":635},", 70%, 50%)",[609,17519,17084],{"class":614},[609,17521,17522],{"class":611,"line":762},[609,17523,1301],{"class":614},[609,17525,17526,17528,17530],{"class":611,"line":772},[609,17527,704],{"class":614},[609,17529,619],{"class":618},[609,17531,641],{"class":614},[609,17533,17534],{"class":611,"line":777},[609,17535,714],{"emptyLinePlaceholder":566},[609,17537,17538,17540,17542],{"class":611,"line":803},[609,17539,615],{"class":614},[609,17541,722],{"class":618},[609,17543,641],{"class":614},[609,17545,17546,17548,17550],{"class":611,"line":603},[609,17547,730],{"class":614},[609,17549,3916],{"class":618},[609,17551,641],{"class":614},[609,17553,17554,17556],{"class":611,"line":826},[609,17555,753],{"class":614},[609,17557,2961],{"class":618},[609,17559,17560,17562,17564,17566,17568,17570,17572,17574,17576,17578],{"class":611,"line":837},[609,17561,16643],{"class":648},[609,17563,629],{"class":614},[609,17565,632],{"class":614},[609,17567,2974],{"class":614},[609,17569,16652],{"class":655},[609,17571,1475],{"class":614},[609,17573,2982],{"class":655},[609,17575,2985],{"class":614},[609,17577,16661],{"class":655},[609,17579,2991],{"class":614},[609,17581,17582,17584,17586,17588,17590,17592],{"class":611,"line":848},[609,17583,5697],{"class":614},[609,17585,3000],{"class":622},[609,17587,629],{"class":614},[609,17589,632],{"class":614},[609,17591,2982],{"class":655},[609,17593,2991],{"class":614},[609,17595,17596,17598,17600,17602,17604,17606,17608,17610],{"class":611,"line":858},[609,17597,5697],{"class":614},[609,17599,16692],{"class":622},[609,17601,629],{"class":614},[609,17603,632],{"class":614},[609,17605,16652],{"class":655},[609,17607,1122],{"class":614},[609,17609,16692],{"class":655},[609,17611,2991],{"class":614},[609,17613,17614],{"class":611,"line":604},[609,17615,5717],{"class":614},[609,17617,17618,17620],{"class":611,"line":878},[609,17619,829],{"class":614},[609,17621,17622],{"class":618},"TresMeshBasicMaterial\n",[609,17624,17625,17628,17630,17632,17634,17636,17638],{"class":611,"line":888},[609,17626,17627],{"class":622},"        v-bind",[609,17629,629],{"class":614},[609,17631,632],{"class":614},[609,17633,16652],{"class":655},[609,17635,1122],{"class":614},[609,17637,16742],{"class":655},[609,17639,2991],{"class":614},[609,17641,17642,17644,17646,17648,17650,17653,17655,17657,17659,17661,17663],{"class":611,"line":2956},[609,17643,2997],{"class":614},[609,17645,2504],{"class":622},[609,17647,629],{"class":614},[609,17649,632],{"class":614},[609,17651,17652],{"class":2804},"getFillColor",[609,17654,2974],{"class":614},[609,17656,16652],{"class":655},[609,17658,1475],{"class":614},[609,17660,2982],{"class":655},[609,17662,4129],{"class":614},[609,17664,2991],{"class":614},[609,17666,17667],{"class":611,"line":2964},[609,17668,3054],{"class":614},[609,17670,17671,17673,17675],{"class":611,"line":2994},[609,17672,871],{"class":614},[609,17674,832],{"class":618},[609,17676,641],{"class":614},[609,17678,17679,17681,17683],{"class":611,"line":3011},[609,17680,881],{"class":614},[609,17682,3916],{"class":618},[609,17684,641],{"class":614},[609,17686,17687,17689,17691],{"class":611,"line":3026},[609,17688,704],{"class":614},[609,17690,722],{"class":618},[609,17692,641],{"class":614},[7477,17694,17696],{"id":17695},"depth-handling","Depth Handling",[586,17698,2257,17699,17701],{},[590,17700,6362],{}," option controls how SVG layers are rendered in 3D space. It accepts the following values:",[17353,17703,17705,17707],{"id":17704},"renderorder-default",[590,17706,17281],{}," (Default)",[586,17709,17710],{},[1677,17711,17712],{},"Use case: Lone SVGs or applications that don't rely on stacked SVGs",[586,17714,17715,17716,17718],{},"This is the default ",[590,17717,6362],{}," option.",[586,17720,17721,17722,17724,17725,17727,17728,17735],{},"This value sets the materials' ",[590,17723,4338],{}," to ",[590,17726,947],{}," and increments the mesh layers ",[1116,17729,17732],{"href":17730,"rel":17731},"https://threejs.org/docs/?q=mesh#api/en/core/Object3D.renderOrder",[1120],[590,17733,17734],{},"renderOrder",". This makes the SVG layers render dependably regardless of perspective.",[586,17737,17738,17741],{},[1677,17739,17740],{},"Disadvantage",": Scene objects may render out of order.",[586,17743,17744,17745,17750,17751,17756],{},"SVG layers with higher ",[1116,17746,17748],{"href":17730,"rel":17747},[1120],[590,17749,17734],{}," will be rendered after (i.e., sometimes \"on top of\") other objects in the scene graph with a lower ",[1116,17752,17754],{"href":17730,"rel":17753},[1120],[590,17755,17734],{},". Depending on their settings, those other objects may render behind the SVG, even if they are closer to the camera.",[598,17758,17760],{"className":1162,"code":17759,"language":636,"meta":548,"style":548},"const { layers } = useSVG('/icon.svg', { depth: 'renderOrder' })\n",[590,17761,17762],{"__ignoreMap":548},[609,17763,17764,17766,17768,17770,17772,17774,17776,17778,17780,17783,17785,17787,17789,17792,17794,17796,17798,17800,17802],{"class":611,"line":549},[609,17765,2693],{"class":622},[609,17767,652],{"class":614},[609,17769,17030],{"class":655},[609,17771,5548],{"class":614},[609,17773,2770],{"class":614},[609,17775,16477],{"class":2804},[609,17777,2974],{"class":655},[609,17779,5540],{"class":614},[609,17781,17782],{"class":635},"/icon.svg",[609,17784,5540],{"class":614},[609,17786,659],{"class":614},[609,17788,652],{"class":614},[609,17790,17791],{"class":618}," depth",[609,17793,1194],{"class":614},[609,17795,671],{"class":614},[609,17797,17734],{"class":635},[609,17799,5540],{"class":614},[609,17801,665],{"class":614},[609,17803,5543],{"class":655},[17353,17805,17806],{"id":17806},"flat",[586,17808,17809],{},[1677,17810,17811],{},"Use case: simple SVGs",[586,17813,17814,17815,17724,17821,1122],{},"This option sets the materials ",[1116,17816,17819],{"href":17817,"rel":17818},"https://threejs.org/docs/?q=mesh#api/en/materials/Material.depthWrite",[1120],[590,17820,4338],{},[590,17822,947],{},[586,17824,17825,17827],{},[1677,17826,17740],{},": SVG layers may render out of order.",[586,17829,17830],{},"Overlapping layers in an SVG may be drawn out of order, depending on viewing perspective.",[598,17832,17834],{"className":1162,"code":17833,"language":636,"meta":548,"style":548},"const { layers } = useSVG('/icon.svg', { depth: 'flat' })\n",[590,17835,17836],{"__ignoreMap":548},[609,17837,17838,17840,17842,17844,17846,17848,17850,17852,17854,17856,17858,17860,17862,17864,17866,17868,17870,17872,17874],{"class":611,"line":549},[609,17839,2693],{"class":622},[609,17841,652],{"class":614},[609,17843,17030],{"class":655},[609,17845,5548],{"class":614},[609,17847,2770],{"class":614},[609,17849,16477],{"class":2804},[609,17851,2974],{"class":655},[609,17853,5540],{"class":614},[609,17855,17782],{"class":635},[609,17857,5540],{"class":614},[609,17859,659],{"class":614},[609,17861,652],{"class":614},[609,17863,17791],{"class":618},[609,17865,1194],{"class":614},[609,17867,671],{"class":614},[609,17869,17806],{"class":635},[609,17871,5540],{"class":614},[609,17873,665],{"class":614},[609,17875,5543],{"class":655},[17353,17877,17879],{"id":17878},"offsetz","offsetZ",[586,17881,17882],{},[1677,17883,17884],{},"Use case: unscaled SVGs seen from the front",[586,17886,17887],{},"When this value is passed, the result is a 3D \"stack\" of mesh layers. A small space is added between each mesh layer in the \"stack\".",[586,17889,17890,17892],{},[1677,17891,17740],{},": \"Bottom\" of the \"stack\" is visible; layers may z-fight.",[586,17894,17895,17896,17901],{},"When seen from behind, the \"bottom\" of the mesh layer \"stack\" is visible. The space between the layers may be noticeable depending on viewing perspective and scale. The layers may ",[1116,17897,17900],{"href":17898,"rel":17899},"https://en.wikipedia.org/wiki/Z-fighting",[1120],"z-fight",", particularly if the SVG is scaled down.",[598,17903,17905],{"className":1162,"code":17904,"language":636,"meta":548,"style":548},"const { layers } = useSVG('/icon.svg', { depth: 'offsetZ' })\n",[590,17906,17907],{"__ignoreMap":548},[609,17908,17909,17911,17913,17915,17917,17919,17921,17923,17925,17927,17929,17931,17933,17935,17937,17939,17941,17943,17945],{"class":611,"line":549},[609,17910,2693],{"class":622},[609,17912,652],{"class":614},[609,17914,17030],{"class":655},[609,17916,5548],{"class":614},[609,17918,2770],{"class":614},[609,17920,16477],{"class":2804},[609,17922,2974],{"class":655},[609,17924,5540],{"class":614},[609,17926,17782],{"class":635},[609,17928,5540],{"class":614},[609,17930,659],{"class":614},[609,17932,652],{"class":614},[609,17934,17791],{"class":618},[609,17936,1194],{"class":614},[609,17938,671],{"class":614},[609,17940,17879],{"class":635},[609,17942,5540],{"class":614},[609,17944,665],{"class":614},[609,17946,5543],{"class":655},[17353,17948,17949],{"id":2541},[590,17950,2541],{},[586,17952,17953],{},[1677,17954,17955],{},"Use case: SVGs seen from the front",[586,17957,17958,17959,17962,17963,17967],{},"This is the same as ",[590,17960,17961],{},"'offsetZ'"," but allows you to specify how much space is added between each layer, in order to eliminate ",[1116,17964,17966],{"href":17898,"rel":17965},[1120],"z-fighting",". For most use cases, this should be a value greater than 0.025 and less than 1.",[586,17969,17970,17972],{},[1677,17971,17740],{},": \"Bottom\" of the \"stack\" is visible.",[598,17974,17976],{"className":1162,"code":17975,"language":636,"meta":548,"style":548},"const { layers } = useSVG('/icon.svg', { depth: 0.1 })\n",[590,17977,17978],{"__ignoreMap":548},[609,17979,17980,17982,17984,17986,17988,17990,17992,17994,17996,17998,18000,18002,18004,18006,18008,18011,18013],{"class":611,"line":549},[609,17981,2693],{"class":622},[609,17983,652],{"class":614},[609,17985,17030],{"class":655},[609,17987,5548],{"class":614},[609,17989,2770],{"class":614},[609,17991,16477],{"class":2804},[609,17993,2974],{"class":655},[609,17995,5540],{"class":614},[609,17997,17782],{"class":635},[609,17999,5540],{"class":614},[609,18001,659],{"class":614},[609,18003,652],{"class":614},[609,18005,17791],{"class":618},[609,18007,1194],{"class":614},[609,18009,18010],{"class":795}," 0.1",[609,18012,665],{"class":614},[609,18014,5543],{"class":655},[7477,18016,18018],{"id":18017},"memory-management","Memory Management",[586,18020,18021],{},"Always dispose of geometries when the component unmounts:",[598,18023,18025],{"className":600,"code":18024,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { useSVG } from '@tresjs/cientos'\nimport { onUnmounted } from 'vue'\n\nconst { dispose } = useSVG('/icon.svg')\n\nonUnmounted(() => {\n  dispose()\n})\n\u003C/script>\n",[590,18026,18027,18047,18065,18084,18088,18112,18116,18129,18136,18142],{"__ignoreMap":548},[609,18028,18029,18031,18033,18035,18037,18039,18041,18043,18045],{"class":611,"line":549},[609,18030,615],{"class":614},[609,18032,619],{"class":618},[609,18034,623],{"class":622},[609,18036,626],{"class":622},[609,18038,629],{"class":614},[609,18040,632],{"class":614},[609,18042,636],{"class":635},[609,18044,632],{"class":614},[609,18046,641],{"class":614},[609,18048,18049,18051,18053,18055,18057,18059,18061,18063],{"class":611,"line":550},[609,18050,649],{"class":648},[609,18052,652],{"class":614},[609,18054,16477],{"class":655},[609,18056,665],{"class":614},[609,18058,668],{"class":648},[609,18060,671],{"class":614},[609,18062,674],{"class":635},[609,18064,677],{"class":614},[609,18066,18067,18069,18071,18074,18076,18078,18080,18082],{"class":611,"line":680},[609,18068,649],{"class":648},[609,18070,652],{"class":614},[609,18072,18073],{"class":655}," onUnmounted",[609,18075,665],{"class":614},[609,18077,668],{"class":648},[609,18079,671],{"class":614},[609,18081,605],{"class":635},[609,18083,677],{"class":614},[609,18085,18086],{"class":611,"line":701},[609,18087,714],{"emptyLinePlaceholder":566},[609,18089,18090,18092,18094,18096,18098,18100,18102,18104,18106,18108,18110],{"class":611,"line":711},[609,18091,2693],{"class":622},[609,18093,652],{"class":614},[609,18095,16530],{"class":655},[609,18097,5548],{"class":614},[609,18099,2770],{"class":614},[609,18101,16477],{"class":2804},[609,18103,2974],{"class":655},[609,18105,5540],{"class":614},[609,18107,17782],{"class":635},[609,18109,5540],{"class":614},[609,18111,5543],{"class":655},[609,18113,18114],{"class":611,"line":717},[609,18115,714],{"emptyLinePlaceholder":566},[609,18117,18118,18121,18123,18125,18127],{"class":611,"line":727},[609,18119,18120],{"class":2804},"onUnmounted",[609,18122,2974],{"class":655},[609,18124,8451],{"class":614},[609,18126,5505],{"class":622},[609,18128,1180],{"class":614},[609,18130,18131,18134],{"class":611,"line":750},[609,18132,18133],{"class":2804},"  dispose",[609,18135,2850],{"class":618},[609,18137,18138,18140],{"class":611,"line":762},[609,18139,5548],{"class":614},[609,18141,5543],{"class":655},[609,18143,18144,18146,18148],{"class":611,"line":772},[609,18145,704],{"class":614},[609,18147,619],{"class":618},[609,18149,641],{"class":614},[7477,18151,18153],{"id":18152},"advanced-usage","Advanced Usage",[17353,18155,18157],{"id":18156},"conditional-layer-rendering","Conditional Layer Rendering",[598,18159,18161],{"className":600,"code":18160,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { useSVG } from '@tresjs/cientos'\nimport { computed } from 'vue'\n\nconst showDetails = ref(true)\nconst { layers } = useSVG('/detailed-icon.svg')\n\nconst visibleLayers = computed(() =>\n  showDetails.value\n    ? layers.value\n    : layers.value.filter(layer => !layer.isStroke)\n)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresGroup>\n    \u003CTresMesh\n      v-for=\"(layer, index) in visibleLayers\"\n      :key=\"index\"\n      :geometry=\"layer.geometry\"\n    >\n      \u003CTresMeshBasicMaterial v-bind=\"layer.material\" />\n    \u003C/TresMesh>\n  \u003C/TresGroup>\n\u003C/template>\n",[590,18162,18163,18183,18201,18219,18223,18240,18265,18269,18287,18297,18308,18339,18343,18351,18355,18363,18371,18377,18400,18414,18432,18436,18458,18466,18474],{"__ignoreMap":548},[609,18164,18165,18167,18169,18171,18173,18175,18177,18179,18181],{"class":611,"line":549},[609,18166,615],{"class":614},[609,18168,619],{"class":618},[609,18170,623],{"class":622},[609,18172,626],{"class":622},[609,18174,629],{"class":614},[609,18176,632],{"class":614},[609,18178,636],{"class":635},[609,18180,632],{"class":614},[609,18182,641],{"class":614},[609,18184,18185,18187,18189,18191,18193,18195,18197,18199],{"class":611,"line":550},[609,18186,649],{"class":648},[609,18188,652],{"class":614},[609,18190,16477],{"class":655},[609,18192,665],{"class":614},[609,18194,668],{"class":648},[609,18196,671],{"class":614},[609,18198,674],{"class":635},[609,18200,677],{"class":614},[609,18202,18203,18205,18207,18209,18211,18213,18215,18217],{"class":611,"line":680},[609,18204,649],{"class":648},[609,18206,652],{"class":614},[609,18208,15338],{"class":655},[609,18210,665],{"class":614},[609,18212,668],{"class":648},[609,18214,671],{"class":614},[609,18216,605],{"class":635},[609,18218,677],{"class":614},[609,18220,18221],{"class":611,"line":701},[609,18222,714],{"emptyLinePlaceholder":566},[609,18224,18225,18227,18230,18232,18234,18236,18238],{"class":611,"line":711},[609,18226,2693],{"class":622},[609,18228,18229],{"class":655}," showDetails ",[609,18231,629],{"class":614},[609,18233,5435],{"class":2804},[609,18235,2974],{"class":655},[609,18237,937],{"class":3874},[609,18239,5543],{"class":655},[609,18241,18242,18244,18246,18248,18250,18252,18254,18256,18258,18261,18263],{"class":611,"line":717},[609,18243,2693],{"class":622},[609,18245,652],{"class":614},[609,18247,17030],{"class":655},[609,18249,5548],{"class":614},[609,18251,2770],{"class":614},[609,18253,16477],{"class":2804},[609,18255,2974],{"class":655},[609,18257,5540],{"class":614},[609,18259,18260],{"class":635},"/detailed-icon.svg",[609,18262,5540],{"class":614},[609,18264,5543],{"class":655},[609,18266,18267],{"class":611,"line":727},[609,18268,714],{"emptyLinePlaceholder":566},[609,18270,18271,18273,18276,18278,18280,18282,18284],{"class":611,"line":750},[609,18272,2693],{"class":622},[609,18274,18275],{"class":655}," visibleLayers ",[609,18277,629],{"class":614},[609,18279,15338],{"class":2804},[609,18281,2974],{"class":655},[609,18283,8451],{"class":614},[609,18285,18286],{"class":622}," =>\n",[609,18288,18289,18292,18294],{"class":611,"line":762},[609,18290,18291],{"class":655},"  showDetails",[609,18293,1122],{"class":614},[609,18295,18296],{"class":655},"value\n",[609,18298,18299,18302,18304,18306],{"class":611,"line":772},[609,18300,18301],{"class":614},"    ?",[609,18303,16521],{"class":655},[609,18305,1122],{"class":614},[609,18307,18296],{"class":655},[609,18309,18310,18312,18314,18316,18318,18320,18323,18325,18327,18329,18332,18334,18336],{"class":611,"line":777},[609,18311,7396],{"class":614},[609,18313,16521],{"class":655},[609,18315,1122],{"class":614},[609,18317,5500],{"class":655},[609,18319,1122],{"class":614},[609,18321,18322],{"class":2804},"filter",[609,18324,2974],{"class":655},[609,18326,16652],{"class":5499},[609,18328,5505],{"class":622},[609,18330,18331],{"class":614}," !",[609,18333,16652],{"class":655},[609,18335,1122],{"class":614},[609,18337,18338],{"class":655},"isStroke)\n",[609,18340,18341],{"class":611,"line":803},[609,18342,5543],{"class":655},[609,18344,18345,18347,18349],{"class":611,"line":603},[609,18346,704],{"class":614},[609,18348,619],{"class":618},[609,18350,641],{"class":614},[609,18352,18353],{"class":611,"line":826},[609,18354,714],{"emptyLinePlaceholder":566},[609,18356,18357,18359,18361],{"class":611,"line":837},[609,18358,615],{"class":614},[609,18360,722],{"class":618},[609,18362,641],{"class":614},[609,18364,18365,18367,18369],{"class":611,"line":848},[609,18366,730],{"class":614},[609,18368,3916],{"class":618},[609,18370,641],{"class":614},[609,18372,18373,18375],{"class":611,"line":858},[609,18374,753],{"class":614},[609,18376,2961],{"class":618},[609,18378,18379,18381,18383,18385,18387,18389,18391,18393,18395,18398],{"class":611,"line":604},[609,18380,16643],{"class":648},[609,18382,629],{"class":614},[609,18384,632],{"class":614},[609,18386,2974],{"class":614},[609,18388,16652],{"class":655},[609,18390,1475],{"class":614},[609,18392,2982],{"class":655},[609,18394,2985],{"class":614},[609,18396,18397],{"class":655},"visibleLayers",[609,18399,2991],{"class":614},[609,18401,18402,18404,18406,18408,18410,18412],{"class":611,"line":878},[609,18403,5697],{"class":614},[609,18405,3000],{"class":622},[609,18407,629],{"class":614},[609,18409,632],{"class":614},[609,18411,2982],{"class":655},[609,18413,2991],{"class":614},[609,18415,18416,18418,18420,18422,18424,18426,18428,18430],{"class":611,"line":888},[609,18417,5697],{"class":614},[609,18419,16692],{"class":622},[609,18421,629],{"class":614},[609,18423,632],{"class":614},[609,18425,16652],{"class":655},[609,18427,1122],{"class":614},[609,18429,16692],{"class":655},[609,18431,2991],{"class":614},[609,18433,18434],{"class":611,"line":2956},[609,18435,5717],{"class":614},[609,18437,18438,18440,18442,18444,18446,18448,18450,18452,18454,18456],{"class":611,"line":2964},[609,18439,829],{"class":614},[609,18441,2429],{"class":618},[609,18443,4115],{"class":622},[609,18445,629],{"class":614},[609,18447,632],{"class":614},[609,18449,16652],{"class":655},[609,18451,1122],{"class":614},[609,18453,16742],{"class":655},[609,18455,632],{"class":614},[609,18457,759],{"class":614},[609,18459,18460,18462,18464],{"class":611,"line":2994},[609,18461,871],{"class":614},[609,18463,832],{"class":618},[609,18465,641],{"class":614},[609,18467,18468,18470,18472],{"class":611,"line":3011},[609,18469,881],{"class":614},[609,18471,3916],{"class":618},[609,18473,641],{"class":614},[609,18475,18476,18478,18480],{"class":611,"line":3026},[609,18477,704],{"class":614},[609,18479,722],{"class":618},[609,18481,641],{"class":614},[17353,18483,18485],{"id":18484},"material-customization-per-layer","Material Customization per Layer",[598,18487,18489],{"className":600,"code":18488,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { useSVG } from '@tresjs/cientos'\n\nconst { layers } = useSVG('/logo.svg', {\n  fillMaterial: {\n    transparent: true,\n    opacity: 0.9\n  },\n  strokeMaterial: {\n    transparent: true,\n    opacity: 1.0,\n    color: '#000000'\n  }\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresGroup>\n    \u003CTresMesh\n      v-for=\"(layer, index) in layers\"\n      :key=\"index\"\n      :geometry=\"layer.geometry\"\n    >\n      \u003CTresMeshBasicMaterial\n        v-bind=\"layer.material\"\n        :wireframe=\"layer.isStroke\"\n      />\n    \u003C/TresMesh>\n  \u003C/TresGroup>\n\u003C/template>\n",[590,18490,18491,18511,18529,18533,18560,18568,18579,18589,18594,18603,18613,18624,18637,18641,18647,18655,18659,18667,18675,18681,18703,18717,18735,18739,18745,18761,18780,18784,18792,18800],{"__ignoreMap":548},[609,18492,18493,18495,18497,18499,18501,18503,18505,18507,18509],{"class":611,"line":549},[609,18494,615],{"class":614},[609,18496,619],{"class":618},[609,18498,623],{"class":622},[609,18500,626],{"class":622},[609,18502,629],{"class":614},[609,18504,632],{"class":614},[609,18506,636],{"class":635},[609,18508,632],{"class":614},[609,18510,641],{"class":614},[609,18512,18513,18515,18517,18519,18521,18523,18525,18527],{"class":611,"line":550},[609,18514,649],{"class":648},[609,18516,652],{"class":614},[609,18518,16477],{"class":655},[609,18520,665],{"class":614},[609,18522,668],{"class":648},[609,18524,671],{"class":614},[609,18526,674],{"class":635},[609,18528,677],{"class":614},[609,18530,18531],{"class":611,"line":680},[609,18532,714],{"emptyLinePlaceholder":566},[609,18534,18535,18537,18539,18541,18543,18545,18547,18549,18551,18554,18556,18558],{"class":611,"line":701},[609,18536,2693],{"class":622},[609,18538,652],{"class":614},[609,18540,17030],{"class":655},[609,18542,5548],{"class":614},[609,18544,2770],{"class":614},[609,18546,16477],{"class":2804},[609,18548,2974],{"class":655},[609,18550,5540],{"class":614},[609,18552,18553],{"class":635},"/logo.svg",[609,18555,5540],{"class":614},[609,18557,659],{"class":614},[609,18559,1180],{"class":614},[609,18561,18562,18564,18566],{"class":611,"line":711},[609,18563,16562],{"class":618},[609,18565,1194],{"class":614},[609,18567,1180],{"class":614},[609,18569,18570,18573,18575,18577],{"class":611,"line":717},[609,18571,18572],{"class":618},"    transparent",[609,18574,1194],{"class":614},[609,18576,11887],{"class":3874},[609,18578,14979],{"class":614},[609,18580,18581,18584,18586],{"class":611,"line":727},[609,18582,18583],{"class":618},"    opacity",[609,18585,1194],{"class":614},[609,18587,18588],{"class":795}," 0.9\n",[609,18590,18591],{"class":611,"line":750},[609,18592,18593],{"class":614},"  },\n",[609,18595,18596,18599,18601],{"class":611,"line":762},[609,18597,18598],{"class":618},"  strokeMaterial",[609,18600,1194],{"class":614},[609,18602,1180],{"class":614},[609,18604,18605,18607,18609,18611],{"class":611,"line":772},[609,18606,18572],{"class":618},[609,18608,1194],{"class":614},[609,18610,11887],{"class":3874},[609,18612,14979],{"class":614},[609,18614,18615,18617,18619,18622],{"class":611,"line":777},[609,18616,18583],{"class":618},[609,18618,1194],{"class":614},[609,18620,18621],{"class":795}," 1.0",[609,18623,14979],{"class":614},[609,18625,18626,18629,18631,18633,18635],{"class":611,"line":803},[609,18627,18628],{"class":618},"    color",[609,18630,1194],{"class":614},[609,18632,671],{"class":614},[609,18634,17493],{"class":635},[609,18636,677],{"class":614},[609,18638,18639],{"class":611,"line":603},[609,18640,2829],{"class":614},[609,18642,18643,18645],{"class":611,"line":826},[609,18644,5548],{"class":614},[609,18646,5543],{"class":655},[609,18648,18649,18651,18653],{"class":611,"line":837},[609,18650,704],{"class":614},[609,18652,619],{"class":618},[609,18654,641],{"class":614},[609,18656,18657],{"class":611,"line":848},[609,18658,714],{"emptyLinePlaceholder":566},[609,18660,18661,18663,18665],{"class":611,"line":858},[609,18662,615],{"class":614},[609,18664,722],{"class":618},[609,18666,641],{"class":614},[609,18668,18669,18671,18673],{"class":611,"line":604},[609,18670,730],{"class":614},[609,18672,3916],{"class":618},[609,18674,641],{"class":614},[609,18676,18677,18679],{"class":611,"line":878},[609,18678,753],{"class":614},[609,18680,2961],{"class":618},[609,18682,18683,18685,18687,18689,18691,18693,18695,18697,18699,18701],{"class":611,"line":888},[609,18684,16643],{"class":648},[609,18686,629],{"class":614},[609,18688,632],{"class":614},[609,18690,2974],{"class":614},[609,18692,16652],{"class":655},[609,18694,1475],{"class":614},[609,18696,2982],{"class":655},[609,18698,2985],{"class":614},[609,18700,16661],{"class":655},[609,18702,2991],{"class":614},[609,18704,18705,18707,18709,18711,18713,18715],{"class":611,"line":2956},[609,18706,5697],{"class":614},[609,18708,3000],{"class":622},[609,18710,629],{"class":614},[609,18712,632],{"class":614},[609,18714,2982],{"class":655},[609,18716,2991],{"class":614},[609,18718,18719,18721,18723,18725,18727,18729,18731,18733],{"class":611,"line":2964},[609,18720,5697],{"class":614},[609,18722,16692],{"class":622},[609,18724,629],{"class":614},[609,18726,632],{"class":614},[609,18728,16652],{"class":655},[609,18730,1122],{"class":614},[609,18732,16692],{"class":655},[609,18734,2991],{"class":614},[609,18736,18737],{"class":611,"line":2994},[609,18738,5717],{"class":614},[609,18740,18741,18743],{"class":611,"line":3011},[609,18742,829],{"class":614},[609,18744,17622],{"class":618},[609,18746,18747,18749,18751,18753,18755,18757,18759],{"class":611,"line":3026},[609,18748,17627],{"class":622},[609,18750,629],{"class":614},[609,18752,632],{"class":614},[609,18754,16652],{"class":655},[609,18756,1122],{"class":614},[609,18758,16742],{"class":655},[609,18760,2991],{"class":614},[609,18762,18763,18765,18768,18770,18772,18774,18776,18778],{"class":611,"line":3051},[609,18764,2997],{"class":614},[609,18766,18767],{"class":622},"wireframe",[609,18769,629],{"class":614},[609,18771,632],{"class":614},[609,18773,16652],{"class":655},[609,18775,1122],{"class":614},[609,18777,17485],{"class":655},[609,18779,2991],{"class":614},[609,18781,18782],{"class":611,"line":2595},[609,18783,3054],{"class":614},[609,18785,18786,18788,18790],{"class":611,"line":3066},[609,18787,871],{"class":614},[609,18789,832],{"class":618},[609,18791,641],{"class":614},[609,18793,18794,18796,18798],{"class":611,"line":3096},[609,18795,881],{"class":614},[609,18797,3916],{"class":618},[609,18799,641],{"class":614},[609,18801,18802,18804,18806],{"class":611,"line":3105},[609,18803,704],{"class":614},[609,18805,722],{"class":618},[609,18807,641],{"class":614},[476,18809,18811],{"id":18810},"usesvg-component","UseSVG Component",[586,18813,18814,18815,18818],{},"For simple, declarative SVG rendering without the need for programmatic control, you can use the ",[590,18816,18817],{},"UseSVG"," component:",[598,18820,18822],{"className":600,"code":18821,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { UseSVG } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresGroup :scale=\"0.01\" :position=\"[-2.1, 1, 0]\">\n    \u003CUseSVG\n      src=\"/path/to/logo.svg\"\n      :skip-fills=\"false\"\n      :fill-material=\"{ transparent: true,\n                        opacity: 0.8 }\"\n      depth=\"renderOrder\"\n    />\n  \u003C/TresGroup>\n\u003C/template>\n",[590,18823,18824,18844,18863,18871,18875,18883,18928,18935,18949,18964,18985,18999,19012,19016,19024],{"__ignoreMap":548},[609,18825,18826,18828,18830,18832,18834,18836,18838,18840,18842],{"class":611,"line":549},[609,18827,615],{"class":614},[609,18829,619],{"class":618},[609,18831,623],{"class":622},[609,18833,626],{"class":622},[609,18835,629],{"class":614},[609,18837,632],{"class":614},[609,18839,636],{"class":635},[609,18841,632],{"class":614},[609,18843,641],{"class":614},[609,18845,18846,18848,18850,18853,18855,18857,18859,18861],{"class":611,"line":550},[609,18847,649],{"class":648},[609,18849,652],{"class":614},[609,18851,18852],{"class":655}," UseSVG",[609,18854,665],{"class":614},[609,18856,668],{"class":648},[609,18858,671],{"class":614},[609,18860,674],{"class":635},[609,18862,677],{"class":614},[609,18864,18865,18867,18869],{"class":611,"line":680},[609,18866,704],{"class":614},[609,18868,619],{"class":618},[609,18870,641],{"class":614},[609,18872,18873],{"class":611,"line":701},[609,18874,714],{"emptyLinePlaceholder":566},[609,18876,18877,18879,18881],{"class":611,"line":711},[609,18878,615],{"class":614},[609,18880,722],{"class":618},[609,18882,641],{"class":614},[609,18884,18885,18887,18889,18891,18893,18895,18897,18899,18901,18903,18905,18907,18909,18911,18914,18916,18918,18920,18922,18924,18926],{"class":611,"line":717},[609,18886,730],{"class":614},[609,18888,3916],{"class":618},[609,18890,785],{"class":614},[609,18892,788],{"class":622},[609,18894,629],{"class":614},[609,18896,632],{"class":614},[609,18898,1911],{"class":795},[609,18900,632],{"class":614},[609,18902,785],{"class":614},[609,18904,1463],{"class":622},[609,18906,629],{"class":614},[609,18908,632],{"class":614},[609,18910,16140],{"class":614},[609,18912,18913],{"class":795},"2.1",[609,18915,1475],{"class":614},[609,18917,1897],{"class":795},[609,18919,1475],{"class":614},[609,18921,941],{"class":795},[609,18923,1485],{"class":614},[609,18925,632],{"class":614},[609,18927,641],{"class":614},[609,18929,18930,18932],{"class":611,"line":727},[609,18931,753],{"class":614},[609,18933,18934],{"class":618},"UseSVG\n",[609,18936,18937,18940,18942,18944,18947],{"class":611,"line":750},[609,18938,18939],{"class":622},"      src",[609,18941,629],{"class":614},[609,18943,632],{"class":614},[609,18945,18946],{"class":635},"/path/to/logo.svg",[609,18948,2991],{"class":614},[609,18950,18951,18953,18956,18958,18960,18962],{"class":611,"line":762},[609,18952,5697],{"class":614},[609,18954,18955],{"class":622},"skip-fills",[609,18957,629],{"class":614},[609,18959,632],{"class":614},[609,18961,947],{"class":3874},[609,18963,2991],{"class":614},[609,18965,18966,18968,18971,18973,18975,18977,18979,18981,18983],{"class":611,"line":772},[609,18967,5697],{"class":614},[609,18969,18970],{"class":622},"fill-material",[609,18972,629],{"class":614},[609,18974,632],{"class":614},[609,18976,7406],{"class":614},[609,18978,4877],{"class":618},[609,18980,7411],{"class":614},[609,18982,937],{"class":3874},[609,18984,14979],{"class":614},[609,18986,18987,18990,18992,18995,18997],{"class":611,"line":777},[609,18988,18989],{"class":618},"                        opacity",[609,18991,7411],{"class":614},[609,18993,18994],{"class":795},"0.8",[609,18996,665],{"class":614},[609,18998,2991],{"class":614},[609,19000,19001,19004,19006,19008,19010],{"class":611,"line":803},[609,19002,19003],{"class":622},"      depth",[609,19005,629],{"class":614},[609,19007,632],{"class":614},[609,19009,17734],{"class":635},[609,19011,2991],{"class":614},[609,19013,19014],{"class":611,"line":603},[609,19015,11765],{"class":614},[609,19017,19018,19020,19022],{"class":611,"line":826},[609,19019,881],{"class":614},[609,19021,3916],{"class":618},[609,19023,641],{"class":614},[609,19025,19026,19028,19030],{"class":611,"line":837},[609,19027,704],{"class":614},[609,19029,722],{"class":618},[609,19031,641],{"class":614},[7477,19033,898],{"id":897},[903,19035,19036,19048],{},[906,19037,19038],{},[909,19039,19040,19042,19044,19046],{},[912,19041,914],{"align":973},[912,19043,11906],{},[912,19045,917],{"align":973},[912,19047,920],{},[922,19049,19050,19070,19089,19108,19125,19142,19161,19179],{},[909,19051,19052,19057,19061,19068],{},[927,19053,19054],{"align":973},[1677,19055,19056],{},"src",[927,19058,19059],{},[590,19060,12043],{},[927,19062,19063,19064,19067],{"align":973},"Either a path to an SVG ",[1681,19065,19066],{},"or"," an SVG string",[927,19069],{},[909,19071,19072,19076,19080,19085],{},[927,19073,19074],{"align":973},[1677,19075,17198],{},[927,19077,19078],{},[590,19079,11963],{},[927,19081,934,19082,19084],{"align":973},[590,19083,937],{},", the SVG strokes will not be rendered.",[927,19086,19087],{},[590,19088,947],{},[909,19090,19091,19095,19099,19104],{},[927,19092,19093],{"align":973},[1677,19094,17216],{},[927,19096,19097],{},[590,19098,11963],{},[927,19100,934,19101,19103],{"align":973},[590,19102,937],{},", the SVG fills will not be rendered.",[927,19105,19106],{},[590,19107,947],{},[909,19109,19110,19114,19118,19121],{},[927,19111,19112],{"align":973},[1677,19113,17254],{},[927,19115,19116],{},[590,19117,17239],{},[927,19119,19120],{"align":973},"Props to assign to the stroke materials of the resulting meshes.",[927,19122,19123],{},[590,19124,1155],{},[909,19126,19127,19131,19135,19138],{},[927,19128,19129],{"align":973},[1677,19130,17234],{},[927,19132,19133],{},[590,19134,17239],{},[927,19136,19137],{"align":973},"Props to assign to the fill materials of the resulting meshes.",[927,19139,19140],{},[590,19141,1155],{},[909,19143,19144,19149,19154,19157],{},[927,19145,19146],{"align":973},[1677,19147,19148],{},"strokeMeshProps",[927,19150,19151],{},[590,19152,19153],{},"TresOptions",[927,19155,19156],{"align":973},"Props to assign to the resulting stroke meshes.",[927,19158,19159],{},[590,19160,1155],{},[909,19162,19163,19168,19172,19175],{},[927,19164,19165],{"align":973},[1677,19166,19167],{},"fillMeshProps",[927,19169,19170],{},[590,19171,19153],{},[927,19173,19174],{"align":973},"Props to assign to the resulting fill meshes.",[927,19176,19177],{},[590,19178,1155],{},[909,19180,19181,19185,19189,19196],{},[927,19182,19183],{"align":973},[1677,19184,6362],{},[927,19186,19187],{},[590,19188,17276],{},[927,19190,19191,19192,4129],{"align":973},"Specify how SVG layers are to be rendered. (",[1116,19193,19195],{"href":19194},"#depth-handling","See \"Depth\"",[927,19197,19198],{},[590,19199,17734],{},[476,19201,19203],{"id":19202},"troubleshooting","Troubleshooting",[19205,19206,19208],"alert",{"type":19207},"warning",[586,19209,19210],{},"This is not a general-purpose SVG renderer. Many SVG features are unsupported.",[586,19212,19213],{},"Here are some things to try if you run into problems:",[7477,19215,19217],{"id":19216},"error-xml-parsing-error-unclosed-token","Error: \"XML Parsing Error: unclosed token\"",[3140,19219,19220],{},[3143,19221,19222,19223,17724,19225,1122],{},"In the SVG source, convert hex colors to rgb, e.g., convert ",[590,19224,2529],{},[590,19226,19227],{},"rgb(255, 0, 0)",[7477,19229,19231],{"id":19230},"parts-of-the-svg-render-in-the-wrong-order-or-disappear-depending-on-viewing-angle","Parts of the SVG render in the wrong order or disappear, depending on viewing angle",[3140,19233,19234,19246],{},[3143,19235,19236,19237,19239,19240,1122],{},"In your ",[590,19238,145],{}," options, ",[1116,19241,19242,19243,19245],{"href":19194},"change the ",[590,19244,6362],{}," option",[3143,19247,19248,19249,19252,19253,1122],{},"In the SVG source, use ",[590,19250,19251],{},"fill=\"none\""," rather than ",[590,19254,19255],{},"fill-opacity=\"0\"",[7477,19257,19259,19260],{"id":19258},"parts-of-the-svg-z-fight","Parts of the SVG ",[1116,19261,19263],{"href":17898,"rel":19262},[1120],"\"z-fight\"",[3140,19265,19266,19274],{},[3143,19267,19236,19268,19239,19270,1122],{},[590,19269,145],{},[1116,19271,19242,19272,19245],{"href":19194},[590,19273,6362],{},[3143,19275,19276],{},"Increase the distance between the SVG and other on-screen elements.",[7477,19278,19280],{"id":19279},"the-svg-is-not-visible","The SVG is not visible",[3140,19282,19283,19286,19295,19301],{},[3143,19284,19285],{},"If importing an SVG, make sure the path is correct – check the console for loading errors.",[3143,19287,19288,19289,19291,19292,1122],{},"Try scaling the SVG down, e.g., wrap it in a ",[590,19290,3916],{}," with ",[590,19293,19294],{},":scale=\"0.01\"",[3143,19296,19297,19298,1122],{},"Try moving the SVG up (+y), e.g., ",[590,19299,19300],{},":position=\"[0,2,0]\"",[3143,19302,19303,19304,19307],{},"Check that ",[590,19305,19306],{},"layers.length > 0"," before rendering.",[7477,19309,19311],{"id":19310},"performance-issues-with-many-layers","Performance issues with many layers",[3140,19313,19314,19321,19329],{},[3143,19315,19316,19317,19320],{},"Use the ",[590,19318,19319],{},"dispose()"," function when components unmount to clean up geometries.",[3143,19322,19323,19324,11099,19326,19328],{},"Consider using ",[590,19325,17198],{},[590,19327,17216],{}," to reduce the number of rendered layers.",[3143,19330,19331],{},"For complex SVGs with many layers, consider simplifying the SVG source.",[476,19333,19335,19336,19338,19339,19341],{"id":19334},"when-to-use-usesvg-vs-svg-component","When to Use ",[590,19337,145],{}," vs ",[590,19340,16427],{}," Component",[586,19343,19344],{},[1677,19345,19346,19347,19349],{},"Use ",[590,19348,145],{}," when you need:",[3140,19351,19352,19355,19358,19361,19364],{},[3143,19353,19354],{},"Direct access to individual SVG layers",[3143,19356,19357],{},"Custom rendering logic",[3143,19359,19360],{},"Layer-specific animations",[3143,19362,19363],{},"Programmatic geometry manipulation",[3143,19365,19366],{},"Advanced material customization per layer",[586,19368,19369],{},[1677,19370,19316,19371,19373],{},[590,19372,16427],{}," component when you need:",[3140,19375,19376,19379,19382,19385],{},[3143,19377,19378],{},"Simple, declarative SVG rendering",[3143,19380,19381],{},"Quick prototyping",[3143,19383,19384],{},"Standard SVG display without custom logic",[3143,19386,19387],{},"Less code and setup",[1303,19389,19390],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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}",{"title":548,"searchDepth":549,"depth":550,"links":19392},[19393,19403,19406,19414],{"id":16431,"depth":550,"text":16432,"children":19394},[19395,19396,19397,19398,19399,19400,19401,19402],{"id":596,"depth":680,"text":15},{"id":16985,"depth":680,"text":16986},{"id":11894,"depth":680,"text":11895},{"id":11998,"depth":680,"text":7491},{"id":17287,"depth":680,"text":17288},{"id":17695,"depth":680,"text":17696},{"id":18017,"depth":680,"text":18018},{"id":18152,"depth":680,"text":18153},{"id":18810,"depth":550,"text":18811,"children":19404},[19405],{"id":897,"depth":680,"text":898},{"id":19202,"depth":550,"text":19203,"children":19407},[19408,19409,19410,19412,19413],{"id":19216,"depth":680,"text":19217},{"id":19230,"depth":680,"text":19231},{"id":19258,"depth":680,"text":19411},"Parts of the SVG \"z-fight\"",{"id":19279,"depth":680,"text":19280},{"id":19310,"depth":680,"text":19311},{"id":19334,"depth":550,"text":19415},"When to Use useSVG vs SVG Component","A composable to load and render SVG files as 3D geometry in TresJS scenes.",{},{"title":145,"description":19416},"Bpey5SMrTLv2yytWL0t_9C4cqa_4Vc__F5o4YEN3jZA",{"id":19421,"title":149,"body":19422,"description":19923,"extension":563,"links":564,"meta":19924,"navigation":566,"path":150,"seo":19925,"stem":151,"__hash__":19926},"docs/2.api/3.loaders/use-progress.md",{"type":473,"value":19423,"toc":19919},[19424,19431,19434,19436,19494,19500,19832,19843,19845,19900,19916],[586,19425,19426,19427,19430],{},"A composable to convenience wrap ",[590,19428,19429],{},"THREE.DefaultLoadingManager"," and returns the progress of the loading assets into the scene.",[586,19432,19433],{},"This comes handy to show an HTML loading bar or a spinner while the assets are being loaded.",[476,19435,15],{"id":596},[598,19437,19439],{"className":1162,"code":19438,"language":636,"meta":548,"style":548},"import { useProgress } from '@tresjs/cientos'\n\nconst { hasFinishLoading, progress, items } = await useProgress()\n",[590,19440,19441,19460,19464],{"__ignoreMap":548},[609,19442,19443,19445,19447,19450,19452,19454,19456,19458],{"class":611,"line":549},[609,19444,649],{"class":648},[609,19446,652],{"class":614},[609,19448,19449],{"class":655}," useProgress",[609,19451,665],{"class":614},[609,19453,668],{"class":648},[609,19455,671],{"class":614},[609,19457,674],{"class":635},[609,19459,677],{"class":614},[609,19461,19462],{"class":611,"line":550},[609,19463,714],{"emptyLinePlaceholder":566},[609,19465,19466,19468,19470,19473,19475,19478,19480,19483,19485,19487,19490,19492],{"class":611,"line":680},[609,19467,2693],{"class":622},[609,19469,652],{"class":614},[609,19471,19472],{"class":655}," hasFinishLoading",[609,19474,659],{"class":614},[609,19476,19477],{"class":655}," progress",[609,19479,659],{"class":614},[609,19481,19482],{"class":655}," items ",[609,19484,5548],{"class":614},[609,19486,2770],{"class":614},[609,19488,19489],{"class":648}," await",[609,19491,19449],{"class":2804},[609,19493,2850],{"class":655},[586,19495,19496,19497,19499],{},"Then you can use the ",[590,19498,11973],{}," value to show a loading bar or a spinner:",[598,19501,19503],{"className":600,"code":19502,"language":605,"meta":548,"style":548},"\u003Ctemplate>\n  \u003CTransition\n    name=\"fade-overlay\"\n    enter-active-class=\"opacity-1 transition-opacity duration-200\"\n    leave-active-class=\"opacity-0 transition-opacity duration-200\"\n  >\n    \u003Cdiv\n      v-show=\"!hasFinishLoading\"\n      class=\"absolute bg-grey-600 t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono\"\n    >\n      \u003Cdiv class=\"w-200px\">\n        Loading... {{ progress }} %\n        \u003Ci class=\"i-ic-twotone-catching-pokemon animate-rotate-in\">\u003C/i>\n      \u003C/div>\n    \u003C/div>\n  \u003C/Transition>\n  \u003CTresCanvas preset=\"realistic\">\n    \u003CTresPerspectiveCamera :position=\"[11, 11, 11]\" />\n    \u003COrbitControls />\n    \u003CSuspense>\n      \u003CEnvironment\n        background\n        :files=\"environmentFiles\"\n        path=\"https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap\"\n      />\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n",[590,19504,19505,19513,19520,19534,19548,19562,19566,19573,19589,19603,19607,19628,19645,19670,19678,19686,19695,19714,19746,19754,19762,19769,19774,19790,19804,19808,19816,19824],{"__ignoreMap":548},[609,19506,19507,19509,19511],{"class":611,"line":549},[609,19508,615],{"class":614},[609,19510,722],{"class":618},[609,19512,641],{"class":614},[609,19514,19515,19517],{"class":611,"line":550},[609,19516,730],{"class":614},[609,19518,19519],{"class":618},"Transition\n",[609,19521,19522,19525,19527,19529,19532],{"class":611,"line":680},[609,19523,19524],{"class":622},"    name",[609,19526,629],{"class":614},[609,19528,632],{"class":614},[609,19530,19531],{"class":635},"fade-overlay",[609,19533,2991],{"class":614},[609,19535,19536,19539,19541,19543,19546],{"class":611,"line":701},[609,19537,19538],{"class":622},"    enter-active-class",[609,19540,629],{"class":614},[609,19542,632],{"class":614},[609,19544,19545],{"class":635},"opacity-1 transition-opacity duration-200",[609,19547,2991],{"class":614},[609,19549,19550,19553,19555,19557,19560],{"class":611,"line":711},[609,19551,19552],{"class":622},"    leave-active-class",[609,19554,629],{"class":614},[609,19556,632],{"class":614},[609,19558,19559],{"class":635},"opacity-0 transition-opacity duration-200",[609,19561,2991],{"class":614},[609,19563,19564],{"class":611,"line":717},[609,19565,14806],{"class":614},[609,19567,19568,19570],{"class":611,"line":727},[609,19569,753],{"class":614},[609,19571,19572],{"class":618},"div\n",[609,19574,19575,19578,19580,19582,19584,19587],{"class":611,"line":750},[609,19576,19577],{"class":622},"      v-show",[609,19579,629],{"class":614},[609,19581,632],{"class":614},[609,19583,8463],{"class":614},[609,19585,19586],{"class":655},"hasFinishLoading",[609,19588,2991],{"class":614},[609,19590,19591,19594,19596,19598,19601],{"class":611,"line":762},[609,19592,19593],{"class":622},"      class",[609,19595,629],{"class":614},[609,19597,632],{"class":614},[609,19599,19600],{"class":635},"absolute bg-grey-600 t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono",[609,19602,2991],{"class":614},[609,19604,19605],{"class":611,"line":772},[609,19606,5717],{"class":614},[609,19608,19609,19611,19614,19617,19619,19621,19624,19626],{"class":611,"line":777},[609,19610,829],{"class":614},[609,19612,19613],{"class":618},"div",[609,19615,19616],{"class":622}," class",[609,19618,629],{"class":614},[609,19620,632],{"class":614},[609,19622,19623],{"class":635},"w-200px",[609,19625,632],{"class":614},[609,19627,641],{"class":614},[609,19629,19630,19633,19636,19639,19642],{"class":611,"line":803},[609,19631,19632],{"class":655},"        Loading... ",[609,19634,19635],{"class":614},"{{",[609,19637,19638],{"class":655}," progress ",[609,19640,19641],{"class":614},"}}",[609,19643,19644],{"class":655}," %\n",[609,19646,19647,19649,19652,19654,19656,19658,19661,19663,19666,19668],{"class":611,"line":603},[609,19648,840],{"class":614},[609,19650,19651],{"class":618},"i",[609,19653,19616],{"class":622},[609,19655,629],{"class":614},[609,19657,632],{"class":614},[609,19659,19660],{"class":635},"i-ic-twotone-catching-pokemon animate-rotate-in",[609,19662,632],{"class":614},[609,19664,19665],{"class":614},">\u003C/",[609,19667,19651],{"class":618},[609,19669,641],{"class":614},[609,19671,19672,19674,19676],{"class":611,"line":826},[609,19673,861],{"class":614},[609,19675,19613],{"class":618},[609,19677,641],{"class":614},[609,19679,19680,19682,19684],{"class":611,"line":837},[609,19681,871],{"class":614},[609,19683,19613],{"class":618},[609,19685,641],{"class":614},[609,19687,19688,19690,19693],{"class":611,"line":848},[609,19689,881],{"class":614},[609,19691,19692],{"class":618},"Transition",[609,19694,641],{"class":614},[609,19696,19697,19699,19701,19703,19705,19707,19710,19712],{"class":611,"line":858},[609,19698,730],{"class":614},[609,19700,733],{"class":618},[609,19702,15953],{"class":622},[609,19704,629],{"class":614},[609,19706,632],{"class":614},[609,19708,19709],{"class":635},"realistic",[609,19711,632],{"class":614},[609,19713,641],{"class":614},[609,19715,19716,19718,19720,19722,19724,19726,19728,19730,19732,19734,19736,19738,19740,19742,19744],{"class":611,"line":604},[609,19717,753],{"class":614},[609,19719,756],{"class":618},[609,19721,785],{"class":614},[609,19723,1463],{"class":622},[609,19725,629],{"class":614},[609,19727,632],{"class":614},[609,19729,1470],{"class":614},[609,19731,13230],{"class":795},[609,19733,1475],{"class":614},[609,19735,13230],{"class":795},[609,19737,1475],{"class":614},[609,19739,13230],{"class":795},[609,19741,1485],{"class":614},[609,19743,632],{"class":614},[609,19745,759],{"class":614},[609,19747,19748,19750,19752],{"class":611,"line":878},[609,19749,753],{"class":614},[609,19751,767],{"class":618},[609,19753,759],{"class":614},[609,19755,19756,19758,19760],{"class":611,"line":888},[609,19757,753],{"class":614},[609,19759,15941],{"class":618},[609,19761,641],{"class":614},[609,19763,19764,19766],{"class":611,"line":2956},[609,19765,829],{"class":614},[609,19767,19768],{"class":618},"Environment\n",[609,19770,19771],{"class":611,"line":2964},[609,19772,19773],{"class":622},"        background\n",[609,19775,19776,19778,19781,19783,19785,19788],{"class":611,"line":2994},[609,19777,2997],{"class":614},[609,19779,19780],{"class":622},"files",[609,19782,629],{"class":614},[609,19784,632],{"class":614},[609,19786,19787],{"class":655},"environmentFiles",[609,19789,2991],{"class":614},[609,19791,19792,19795,19797,19799,19802],{"class":611,"line":3011},[609,19793,19794],{"class":622},"        path",[609,19796,629],{"class":614},[609,19798,632],{"class":614},[609,19800,19801],{"class":635},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap",[609,19803,2991],{"class":614},[609,19805,19806],{"class":611,"line":3026},[609,19807,3054],{"class":614},[609,19809,19810,19812,19814],{"class":611,"line":3051},[609,19811,871],{"class":614},[609,19813,15941],{"class":618},[609,19815,641],{"class":614},[609,19817,19818,19820,19822],{"class":611,"line":2595},[609,19819,881],{"class":614},[609,19821,733],{"class":618},[609,19823,641],{"class":614},[609,19825,19826,19828,19830],{"class":611,"line":3066},[609,19827,704],{"class":614},[609,19829,722],{"class":618},[609,19831,641],{"class":614},[19205,19833,19834],{"type":19207},[586,19835,19836,19837,19842],{},"This component use top level await. Please check the ",[1116,19838,19841],{"href":19839,"rel":19840},"https://vuejs.org/guide/built-ins/suspense.html#suspense",[1120],"Suspense API"," for more info",[476,19844,11895],{"id":11894},[903,19846,19847,19857],{},[906,19848,19849],{},[909,19850,19851,19853,19855],{},[912,19852,3122],{"align":973},[912,19854,11906],{"align":973},[912,19856,917],{"align":973},[922,19858,19859,19872,19885],{},[909,19860,19861,19865,19869],{},[927,19862,19863],{"align":973},[590,19864,19586],{},[927,19866,19867],{"align":973},[590,19868,11963],{},[927,19870,19871],{"align":973},"Whether all items have finished loading",[909,19873,19874,19878,19882],{},[927,19875,19876],{"align":973},[590,19877,11973],{},[927,19879,19880],{"align":973},[590,19881,2541],{},[927,19883,19884],{"align":973},"Loading progress as percentage (0-100)",[909,19886,19887,19892,19897],{},[927,19888,19889],{"align":973},[590,19890,19891],{},"items",[927,19893,19894],{"align":973},[590,19895,19896],{},"Array",[927,19898,19899],{"align":973},"Array of loading items with their status",[3729,19901,19902],{},[586,19903,19904,19905,19910,19911,19842],{},"This component use top level await it needs to be wrapped on a ",[1116,19906,19908],{"href":19839,"rel":19907},[1120],[590,19909,15941],{},". Please check the ",[1116,19912,19914],{"href":19839,"rel":19913},[1120],[590,19915,19841],{},[1303,19917,19918],{},"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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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);}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":548,"searchDepth":549,"depth":550,"links":19920},[19921,19922],{"id":596,"depth":550,"text":15},{"id":11894,"depth":550,"text":11895},"A composable to track loading progress of assets in TresJS scenes.",{},{"title":149,"description":19923},"gZhXorzaJ3dTEQJ4uc1arATdnRGEw61UJXrQQOhhIV4",{"id":19928,"title":153,"body":19929,"description":20549,"extension":563,"links":564,"meta":20550,"navigation":566,"path":154,"seo":20551,"stem":155,"__hash__":20552},"docs/2.api/3.loaders/use-video-texture.md",{"type":473,"value":19930,"toc":20545},[19931,19936,19939,19946,19948,20428,20430,20533,20542],[2562,19932,19933],{},[19934,19935],"loaders-use-video-texture",{},[586,19937,19938],{},"A composable to easily use videos as textures in your meshes.",[586,19940,19941,19942],{},"This composable is based on the Drei ",[1116,19943,153],{"href":19944,"rel":19945},"https://github.com/pmndrs/drei/tree/master#usevideotexture",[1120],[476,19947,15],{"id":596},[11383,19949,19950,20191],{},[598,19951,19953],{"className":600,"code":19952,"filename":11550,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport TheModel from './TheModel.vue'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#333\">\n    \u003CTresPerspectiveCamera\n      :position=\"[0, 5, 9]\"\n      :look-at=\"[0, 1, 0]\"\n    />\n    \u003COrbitControls />\n    \u003CSuspense>\n      \u003CTheModel />\n    \u003C/Suspense>\n    \u003CTresGridHelper />\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[590,19954,19955,19975,19993,20011,20025,20033,20037,20045,20063,20070,20097,20123,20127,20135,20143,20151,20159,20167,20175,20183],{"__ignoreMap":548},[609,19956,19957,19959,19961,19963,19965,19967,19969,19971,19973],{"class":611,"line":549},[609,19958,615],{"class":614},[609,19960,619],{"class":618},[609,19962,623],{"class":622},[609,19964,626],{"class":622},[609,19966,629],{"class":614},[609,19968,632],{"class":614},[609,19970,636],{"class":635},[609,19972,632],{"class":614},[609,19974,641],{"class":614},[609,19976,19977,19979,19981,19983,19985,19987,19989,19991],{"class":611,"line":550},[609,19978,649],{"class":648},[609,19980,652],{"class":614},[609,19982,662],{"class":655},[609,19984,665],{"class":614},[609,19986,668],{"class":648},[609,19988,671],{"class":614},[609,19990,674],{"class":635},[609,19992,677],{"class":614},[609,19994,19995,19997,19999,20001,20003,20005,20007,20009],{"class":611,"line":680},[609,19996,649],{"class":648},[609,19998,652],{"class":614},[609,20000,687],{"class":655},[609,20002,665],{"class":614},[609,20004,668],{"class":648},[609,20006,671],{"class":614},[609,20008,696],{"class":635},[609,20010,677],{"class":614},[609,20012,20013,20015,20017,20019,20021,20023],{"class":611,"line":701},[609,20014,649],{"class":648},[609,20016,11615],{"class":655},[609,20018,11618],{"class":648},[609,20020,671],{"class":614},[609,20022,11623],{"class":635},[609,20024,677],{"class":614},[609,20026,20027,20029,20031],{"class":611,"line":711},[609,20028,704],{"class":614},[609,20030,619],{"class":618},[609,20032,641],{"class":614},[609,20034,20035],{"class":611,"line":717},[609,20036,714],{"emptyLinePlaceholder":566},[609,20038,20039,20041,20043],{"class":611,"line":727},[609,20040,615],{"class":614},[609,20042,722],{"class":618},[609,20044,641],{"class":614},[609,20046,20047,20049,20051,20053,20055,20057,20059,20061],{"class":611,"line":750},[609,20048,730],{"class":614},[609,20050,733],{"class":618},[609,20052,736],{"class":622},[609,20054,629],{"class":614},[609,20056,632],{"class":614},[609,20058,6326],{"class":635},[609,20060,632],{"class":614},[609,20062,641],{"class":614},[609,20064,20065,20067],{"class":611,"line":762},[609,20066,753],{"class":614},[609,20068,20069],{"class":618},"TresPerspectiveCamera\n",[609,20071,20072,20074,20076,20078,20080,20082,20084,20086,20088,20090,20093,20095],{"class":611,"line":772},[609,20073,5697],{"class":614},[609,20075,1463],{"class":622},[609,20077,629],{"class":614},[609,20079,632],{"class":614},[609,20081,1470],{"class":614},[609,20083,941],{"class":795},[609,20085,1475],{"class":614},[609,20087,2400],{"class":795},[609,20089,1475],{"class":614},[609,20091,20092],{"class":795},"9",[609,20094,1485],{"class":614},[609,20096,2991],{"class":614},[609,20098,20099,20101,20103,20105,20107,20109,20111,20113,20115,20117,20119,20121],{"class":611,"line":777},[609,20100,5697],{"class":614},[609,20102,3444],{"class":622},[609,20104,629],{"class":614},[609,20106,632],{"class":614},[609,20108,1470],{"class":614},[609,20110,941],{"class":795},[609,20112,1475],{"class":614},[609,20114,1897],{"class":795},[609,20116,1475],{"class":614},[609,20118,941],{"class":795},[609,20120,1485],{"class":614},[609,20122,2991],{"class":614},[609,20124,20125],{"class":611,"line":803},[609,20126,11765],{"class":614},[609,20128,20129,20131,20133],{"class":611,"line":603},[609,20130,753],{"class":614},[609,20132,767],{"class":618},[609,20134,759],{"class":614},[609,20136,20137,20139,20141],{"class":611,"line":826},[609,20138,753],{"class":614},[609,20140,15941],{"class":618},[609,20142,641],{"class":614},[609,20144,20145,20147,20149],{"class":611,"line":837},[609,20146,829],{"class":614},[609,20148,11711],{"class":618},[609,20150,759],{"class":614},[609,20152,20153,20155,20157],{"class":611,"line":848},[609,20154,871],{"class":614},[609,20156,15941],{"class":618},[609,20158,641],{"class":614},[609,20160,20161,20163,20165],{"class":611,"line":858},[609,20162,753],{"class":614},[609,20164,3071],{"class":618},[609,20166,759],{"class":614},[609,20168,20169,20171,20173],{"class":611,"line":604},[609,20170,753],{"class":614},[609,20172,3522],{"class":618},[609,20174,759],{"class":614},[609,20176,20177,20179,20181],{"class":611,"line":878},[609,20178,881],{"class":614},[609,20180,733],{"class":618},[609,20182,641],{"class":614},[609,20184,20185,20187,20189],{"class":611,"line":888},[609,20186,704],{"class":614},[609,20188,722],{"class":618},[609,20190,641],{"class":614},[598,20192,20196],{"className":600,"code":20193,"filename":20194,"highlights":20195,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { Sphere, useVideoTexture } from '@tresjs/cientos'\n\nconst videoPath = 'https://raw.githubusercontent.com/'\n  + 'Tresjs/assets/main/textures/video-textures/useVideoTexture.mp4'\nconst texture = ref()\ntexture.value = await useVideoTexture(videoPath, { loop: false })\n\u003C/script>\n\n\u003Ctemplate>\n   \u003CSphere :position=\"[0, 2, 0]\">\n      \u003CTresMeshBasicMaterial :map=\"texture\" />\n    \u003C/Sphere>\n\u003C/template>\n","TheVideoTexture.vue",[680,750,603],[590,20197,20198,20218,20236,20261,20265,20280,20291,20304,20338,20346,20350,20358,20391,20412,20420],{"__ignoreMap":548},[609,20199,20200,20202,20204,20206,20208,20210,20212,20214,20216],{"class":611,"line":549},[609,20201,615],{"class":614},[609,20203,619],{"class":618},[609,20205,623],{"class":622},[609,20207,626],{"class":622},[609,20209,629],{"class":614},[609,20211,632],{"class":614},[609,20213,636],{"class":635},[609,20215,632],{"class":614},[609,20217,641],{"class":614},[609,20219,20220,20222,20224,20226,20228,20230,20232,20234],{"class":611,"line":550},[609,20221,649],{"class":648},[609,20223,652],{"class":614},[609,20225,5435],{"class":655},[609,20227,665],{"class":614},[609,20229,668],{"class":648},[609,20231,671],{"class":614},[609,20233,605],{"class":635},[609,20235,677],{"class":614},[609,20237,20239,20241,20243,20246,20248,20251,20253,20255,20257,20259],{"class":20238,"line":680},[611,645],[609,20240,649],{"class":648},[609,20242,652],{"class":614},[609,20244,20245],{"class":655}," Sphere",[609,20247,659],{"class":614},[609,20249,20250],{"class":655}," useVideoTexture",[609,20252,665],{"class":614},[609,20254,668],{"class":648},[609,20256,671],{"class":614},[609,20258,674],{"class":635},[609,20260,677],{"class":614},[609,20262,20263],{"class":611,"line":701},[609,20264,714],{"emptyLinePlaceholder":566},[609,20266,20267,20269,20272,20274,20276,20278],{"class":611,"line":711},[609,20268,2693],{"class":622},[609,20270,20271],{"class":655}," videoPath ",[609,20273,629],{"class":614},[609,20275,671],{"class":614},[609,20277,12987],{"class":635},[609,20279,677],{"class":614},[609,20281,20282,20284,20286,20289],{"class":611,"line":717},[609,20283,12994],{"class":614},[609,20285,671],{"class":614},[609,20287,20288],{"class":635},"Tresjs/assets/main/textures/video-textures/useVideoTexture.mp4",[609,20290,677],{"class":614},[609,20292,20293,20295,20298,20300,20302],{"class":611,"line":727},[609,20294,2693],{"class":622},[609,20296,20297],{"class":655}," texture ",[609,20299,629],{"class":614},[609,20301,5435],{"class":2804},[609,20303,2850],{"class":655},[609,20305,20307,20309,20311,20314,20316,20318,20320,20323,20325,20327,20330,20332,20334,20336],{"class":20306,"line":750},[611,645],[609,20308,14381],{"class":655},[609,20310,1122],{"class":614},[609,20312,20313],{"class":655},"value ",[609,20315,629],{"class":614},[609,20317,19489],{"class":648},[609,20319,20250],{"class":2804},[609,20321,20322],{"class":655},"(videoPath",[609,20324,659],{"class":614},[609,20326,652],{"class":614},[609,20328,20329],{"class":618}," loop",[609,20331,1194],{"class":614},[609,20333,16554],{"class":3874},[609,20335,665],{"class":614},[609,20337,5543],{"class":655},[609,20339,20340,20342,20344],{"class":611,"line":762},[609,20341,704],{"class":614},[609,20343,619],{"class":618},[609,20345,641],{"class":614},[609,20347,20348],{"class":611,"line":772},[609,20349,714],{"emptyLinePlaceholder":566},[609,20351,20352,20354,20356],{"class":611,"line":777},[609,20353,615],{"class":614},[609,20355,722],{"class":618},[609,20357,641],{"class":614},[609,20359,20360,20363,20365,20367,20369,20371,20373,20375,20377,20379,20381,20383,20385,20387,20389],{"class":611,"line":803},[609,20361,20362],{"class":614},"   \u003C",[609,20364,261],{"class":618},[609,20366,785],{"class":614},[609,20368,1463],{"class":622},[609,20370,629],{"class":614},[609,20372,632],{"class":614},[609,20374,1470],{"class":614},[609,20376,941],{"class":795},[609,20378,1475],{"class":614},[609,20380,796],{"class":795},[609,20382,1475],{"class":614},[609,20384,941],{"class":795},[609,20386,1485],{"class":614},[609,20388,632],{"class":614},[609,20390,641],{"class":614},[609,20392,20394,20396,20398,20400,20402,20404,20406,20408,20410],{"class":20393,"line":603},[611,645],[609,20395,829],{"class":614},[609,20397,2429],{"class":618},[609,20399,785],{"class":614},[609,20401,14374],{"class":622},[609,20403,629],{"class":614},[609,20405,632],{"class":614},[609,20407,14381],{"class":655},[609,20409,632],{"class":614},[609,20411,759],{"class":614},[609,20413,20414,20416,20418],{"class":611,"line":826},[609,20415,871],{"class":614},[609,20417,261],{"class":618},[609,20419,641],{"class":614},[609,20421,20422,20424,20426],{"class":611,"line":837},[609,20423,704],{"class":614},[609,20425,722],{"class":618},[609,20427,641],{"class":614},[476,20429,898],{"id":897},[903,20431,20432,20442],{},[906,20433,20434],{},[909,20435,20436,20438,20440],{},[912,20437,914],{"align":973},[912,20439,917],{"align":973},[912,20441,920],{},[922,20443,20444,20457,20471,20486,20498,20510,20521],{},[909,20445,20446,20450,20453],{},[927,20447,20448],{"align":973},[590,20449,19056],{},[927,20451,20452],{"align":973},"Path to the video.",[927,20454,20455],{},[590,20456,1155],{},[909,20458,20459,20464,20466],{},[927,20460,20461],{"align":973},[590,20462,20463],{},"unsuspend",[927,20465,12826],{"align":973},[927,20467,20468],{},[590,20469,20470],{},"loadedmetadata",[909,20472,20473,20478,20481],{},[927,20474,20475],{"align":973},[590,20476,20477],{},"crossOrigin",[927,20479,20480],{"align":973},"Whether to use CORS to fetch the related video.",[927,20482,20483],{},[590,20484,20485],{},"Anonymous",[909,20487,20488,20493,20496],{},[927,20489,20490],{"align":973},[590,20491,20492],{},"muted",[927,20494,20495],{"align":973},"Whether to set the audio silenced.",[927,20497,937],{},[909,20499,20500,20505,20508],{},[927,20501,20502],{"align":973},[590,20503,20504],{},"loop",[927,20506,20507],{"align":973},"Automatically seek back to the start upon reaching the end of the video.",[927,20509,937],{},[909,20511,20512,20516,20519],{},[927,20513,20514],{"align":973},[590,20515,7777],{},[927,20517,20518],{"align":973},"To play to the video once loaded or not.",[927,20520,937],{},[909,20522,20523,20528,20531],{},[927,20524,20525],{"align":973},[590,20526,20527],{},"playsInline",[927,20529,20530],{"align":973},"To be play the video inline or not.",[927,20532,937],{},[3140,20534,20535],{},[3143,20536,20537,20538,20541],{},"Any other attribute for a ",[590,20539,20540],{},"\u003Cvideo>"," tag is accepted and will automatically set",[1303,20543,20544],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":548,"searchDepth":549,"depth":550,"links":20546},[20547,20548],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},"A composable to load video textures in TresJS scenes.",{},{"title":153,"description":20549},"B0IudWGxB6H8-Wl16oRdCL8g07LFjZcBL6tZkeTIFLM",[20554,21048,21690,22158,22330,23161,23483],{"id":20555,"title":163,"body":20556,"description":21044,"extension":563,"links":564,"meta":21045,"navigation":566,"path":164,"seo":21046,"stem":165,"__hash__":21047},"docs/2.api/4.materials/custom-shader-material.md",{"type":473,"value":20557,"toc":21040},[20558,20563,20583,20585,21021,21023,21037],[2562,20559,20560],{},[20561,20562],"materials-custom-shader-material",{},[586,20564,2257,20565,20567,20568,20571,20572,20579,20580,1122],{},[590,20566,2260],{}," package provides ",[590,20569,20570],{},"\u003CTresCustomShaderMaterial />"," component which is a wrapper around the ",[1116,20573,20576],{"href":20574,"rel":20575},"https://github.com/FarazzShaikh/THREE-CustomShaderMaterial",[1120],[590,20577,20578],{},"three-custom-shader-material"," class. As states in the repo, it ",[1681,20581,20582],{},"\"lets you extend Three.js' material library with your own Vertex and Fragment shaders\"",[476,20584,15],{"id":596},[598,20586,20589],{"className":600,"code":20587,"highlights":20588,"language":605,"meta":548,"style":548},"\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",[550,603,826,837,848,858,604,878,888,2956,2964,2994,3011,3026,3051,2595],[590,20590,20591,20611,20631,20649,20653,20666,20674,20678,20686,20694,20726,20734,20742,20750,20765,20782,20799,20813,20831,20867,20889,20897,20912,20933,20948,20954,20969,20985,20989,20997,21005,21013],{"__ignoreMap":548},[609,20592,20593,20595,20597,20599,20601,20603,20605,20607,20609],{"class":611,"line":549},[609,20594,615],{"class":614},[609,20596,619],{"class":618},[609,20598,623],{"class":622},[609,20600,626],{"class":622},[609,20602,629],{"class":614},[609,20604,632],{"class":614},[609,20606,636],{"class":635},[609,20608,632],{"class":614},[609,20610,641],{"class":614},[609,20612,20614,20616,20618,20621,20623,20625,20627,20629],{"class":20613,"line":550},[611,645],[609,20615,649],{"class":648},[609,20617,652],{"class":614},[609,20619,20620],{"class":655}," TresCustomShaderMaterial",[609,20622,665],{"class":614},[609,20624,668],{"class":648},[609,20626,671],{"class":614},[609,20628,674],{"class":635},[609,20630,677],{"class":614},[609,20632,20633,20635,20637,20639,20641,20643,20645,20647],{"class":611,"line":680},[609,20634,649],{"class":648},[609,20636,652],{"class":614},[609,20638,7909],{"class":655},[609,20640,665],{"class":614},[609,20642,668],{"class":648},[609,20644,671],{"class":614},[609,20646,605],{"class":635},[609,20648,677],{"class":614},[609,20650,20651],{"class":611,"line":701},[609,20652,714],{"emptyLinePlaceholder":566},[609,20654,20655,20657,20660,20662,20664],{"class":611,"line":711},[609,20656,2693],{"class":622},[609,20658,20659],{"class":655}," customShaderMaterialRef ",[609,20661,629],{"class":614},[609,20663,7909],{"class":2804},[609,20665,2850],{"class":655},[609,20667,20668,20670,20672],{"class":611,"line":717},[609,20669,704],{"class":614},[609,20671,619],{"class":618},[609,20673,641],{"class":614},[609,20675,20676],{"class":611,"line":727},[609,20677,714],{"emptyLinePlaceholder":566},[609,20679,20680,20682,20684],{"class":611,"line":750},[609,20681,615],{"class":614},[609,20683,722],{"class":618},[609,20685,641],{"class":614},[609,20687,20688,20690,20692],{"class":611,"line":762},[609,20689,730],{"class":614},[609,20691,733],{"class":618},[609,20693,641],{"class":614},[609,20695,20696,20698,20700,20702,20704,20706,20708,20710,20712,20714,20716,20718,20720,20722,20724],{"class":611,"line":772},[609,20697,753],{"class":614},[609,20699,756],{"class":618},[609,20701,785],{"class":614},[609,20703,1463],{"class":622},[609,20705,629],{"class":614},[609,20707,632],{"class":614},[609,20709,1470],{"class":614},[609,20711,4164],{"class":795},[609,20713,1475],{"class":614},[609,20715,4164],{"class":795},[609,20717,1475],{"class":614},[609,20719,4164],{"class":795},[609,20721,1485],{"class":614},[609,20723,632],{"class":614},[609,20725,759],{"class":614},[609,20727,20728,20730,20732],{"class":611,"line":777},[609,20729,753],{"class":614},[609,20731,832],{"class":618},[609,20733,641],{"class":614},[609,20735,20736,20738,20740],{"class":611,"line":803},[609,20737,829],{"class":614},[609,20739,843],{"class":618},[609,20741,759],{"class":614},[609,20743,20745,20747],{"class":20744,"line":603},[611,645],[609,20746,829],{"class":614},[609,20748,20749],{"class":618},"TresCustomShaderMaterial\n",[609,20751,20753,20756,20758,20760,20763],{"class":20752,"line":826},[611,645],[609,20754,20755],{"class":622},"        ref",[609,20757,629],{"class":614},[609,20759,632],{"class":614},[609,20761,20762],{"class":635},"customShaderMaterialRef",[609,20764,2991],{"class":614},[609,20766,20768,20770,20773,20775,20777,20780],{"class":20767,"line":837},[611,645],[609,20769,2997],{"class":614},[609,20771,20772],{"class":622},"vertex-shader",[609,20774,629],{"class":614},[609,20776,632],{"class":614},[609,20778,20779],{"class":655},"vertexShader",[609,20781,2991],{"class":614},[609,20783,20785,20787,20790,20792,20794,20797],{"class":20784,"line":848},[611,645],[609,20786,2997],{"class":614},[609,20788,20789],{"class":622},"fragment-shader",[609,20791,629],{"class":614},[609,20793,632],{"class":614},[609,20795,20796],{"class":655},"fragmentShader",[609,20798,2991],{"class":614},[609,20800,20802,20804,20807,20809,20811],{"class":20801,"line":858},[611,645],[609,20803,2997],{"class":614},[609,20805,20806],{"class":622},"uniforms",[609,20808,629],{"class":614},[609,20810,632],{"class":614},[609,20812,2755],{"class":614},[609,20814,20816,20819,20822,20824,20826,20828],{"class":20815,"line":604},[611,645],[609,20817,20818],{"class":618},"          u_time",[609,20820,20821],{"class":614},": { ",[609,20823,5500],{"class":618},[609,20825,7411],{"class":614},[609,20827,941],{"class":795},[609,20829,20830],{"class":614}," },\n",[609,20832,20834,20837,20839,20841,20844,20847,20849,20852,20854,20856,20858,20860,20862,20864],{"class":20833,"line":878},[611,645],[609,20835,20836],{"class":618},"          u_color",[609,20838,20821],{"class":614},[609,20840,5500],{"class":618},[609,20842,20843],{"class":614},": new ",[609,20845,20846],{"class":655},"THREE",[609,20848,1122],{"class":614},[609,20850,20851],{"class":2804},"Color",[609,20853,2974],{"class":614},[609,20855,9041],{"class":795},[609,20857,1475],{"class":614},[609,20859,7211],{"class":795},[609,20861,1475],{"class":614},[609,20863,2207],{"class":795},[609,20865,20866],{"class":614},") },\n",[609,20868,20870,20873,20875,20877,20879,20881,20883,20886],{"class":20869,"line":888},[611,645],[609,20871,20872],{"class":618},"          u_resolution",[609,20874,20821],{"class":614},[609,20876,5500],{"class":618},[609,20878,20843],{"class":614},[609,20880,20846],{"class":655},[609,20882,1122],{"class":614},[609,20884,20885],{"class":2804},"Vector2",[609,20887,20888],{"class":614},"() }\n",[609,20890,20892,20895],{"class":20891,"line":2956},[611,645],[609,20893,20894],{"class":614},"        }",[609,20896,2991],{"class":614},[609,20898,20900,20902,20904,20906,20908,20910],{"class":20899,"line":2964},[611,645],[609,20901,2997],{"class":614},[609,20903,4877],{"class":622},[609,20905,629],{"class":614},[609,20907,632],{"class":614},[609,20909,937],{"class":3874},[609,20911,2991],{"class":614},[609,20913,20915,20917,20920,20922,20924,20926,20928,20931],{"class":20914,"line":2994},[611,645],[609,20916,2997],{"class":614},[609,20918,20919],{"class":622},"side",[609,20921,629],{"class":614},[609,20923,632],{"class":614},[609,20925,20846],{"class":655},[609,20927,1122],{"class":614},[609,20929,20930],{"class":655},"DoubleSide",[609,20932,2991],{"class":614},[609,20934,20936,20939,20941,20943,20946],{"class":20935,"line":3011},[611,645],[609,20937,20938],{"class":622},"        base-material",[609,20940,629],{"class":614},[609,20942,632],{"class":614},[609,20944,20945],{"class":635},"MeshLambertMaterial",[609,20947,2991],{"class":614},[609,20949,20951],{"class":20950,"line":3026},[611,645],[609,20952,20953],{"class":622},"        silent\n",[609,20955,20957,20959,20961,20963,20965,20967],{"class":20956,"line":3051},[611,645],[609,20958,2997],{"class":614},[609,20960,14374],{"class":622},[609,20962,629],{"class":614},[609,20964,632],{"class":614},[609,20966,14381],{"class":655},[609,20968,2991],{"class":614},[609,20970,20972,20974,20976,20978,20980,20983],{"class":20971,"line":2595},[611,645],[609,20973,2997],{"class":614},[609,20975,2504],{"class":622},[609,20977,629],{"class":614},[609,20979,632],{"class":614},[609,20981,20982],{"class":795},"0xff0000",[609,20984,2991],{"class":614},[609,20986,20987],{"class":611,"line":3066},[609,20988,3054],{"class":614},[609,20990,20991,20993,20995],{"class":611,"line":3096},[609,20992,871],{"class":614},[609,20994,832],{"class":618},[609,20996,641],{"class":614},[609,20998,20999,21001,21003],{"class":611,"line":3105},[609,21000,753],{"class":614},[609,21002,3522],{"class":618},[609,21004,759],{"class":614},[609,21006,21007,21009,21011],{"class":611,"line":4211},[609,21008,881],{"class":614},[609,21010,733],{"class":618},[609,21012,641],{"class":614},[609,21014,21015,21017,21019],{"class":611,"line":4216},[609,21016,704],{"class":614},[609,21018,722],{"class":618},[609,21020,641],{"class":614},[476,21022,898],{"id":897},[586,21024,21025,21026,21029,21030,21032,21033,1122],{},"Being a wrapper around the ",[590,21027,21028],{},"CustomShaderMaterial"," class, the ",[590,21031,20570],{}," component accepts all the props that the class does. You can find the full list of props in the ",[1116,21034,21036],{"href":20574,"rel":21035},[1120],"official repo",[1303,21038,21039],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":548,"searchDepth":549,"depth":550,"links":21041},[21042,21043],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},"Extends Three.js' material library with your own Vertex and Fragment shaders.",{},{"title":163,"description":21044},"WirW-L7fmUIEqDL1ownbJUS8vqN1Ie6ubq6WxZ9mH-o",{"id":21049,"title":167,"body":21050,"description":21686,"extension":563,"links":564,"meta":21687,"navigation":566,"path":168,"seo":21688,"stem":169,"__hash__":21689},"docs/2.api/4.materials/glass-material.md",{"type":473,"value":21051,"toc":21677},[21052,21057,21069,21071,21075,21313,21315,21322,21326,21662,21666,21674],[2562,21053,21054],{},[21055,21056],"materials-glass-material",{},[586,21058,2257,21059,21061,21062,21065,21066,1122],{},[590,21060,2260],{}," package provides a new",[590,21063,21064],{},"\u003CMeshGlassMaterial />"," component that makes a geometry look like glass. This is achieved by re-defining the ",[590,21067,21068],{},"MeshPhysicalMaterial",[476,21070,15],{"id":596},[7477,21072,21074],{"id":21073},"you-can-use-it-like-you-normally-do-with-tresjs","You can use it like you normally do with TresJs",[598,21076,21079],{"className":600,"code":21077,"highlights":21078,"language":605,"meta":548,"style":548},"\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",[550,772],[590,21080,21081,21101,21120,21139,21147,21151,21159,21167,21223,21231,21240,21249,21257,21265,21297,21305],{"__ignoreMap":548},[609,21082,21083,21085,21087,21089,21091,21093,21095,21097,21099],{"class":611,"line":549},[609,21084,615],{"class":614},[609,21086,619],{"class":618},[609,21088,623],{"class":622},[609,21090,626],{"class":622},[609,21092,629],{"class":614},[609,21094,632],{"class":614},[609,21096,636],{"class":635},[609,21098,632],{"class":614},[609,21100,641],{"class":614},[609,21102,21104,21106,21108,21110,21112,21114,21116,21118],{"class":21103,"line":550},[611,645],[609,21105,649],{"class":648},[609,21107,652],{"class":614},[609,21109,687],{"class":655},[609,21111,665],{"class":614},[609,21113,668],{"class":648},[609,21115,671],{"class":614},[609,21117,696],{"class":635},[609,21119,677],{"class":614},[609,21121,21122,21124,21126,21129,21131,21133,21135,21137],{"class":611,"line":680},[609,21123,649],{"class":648},[609,21125,652],{"class":614},[609,21127,21128],{"class":655}," MeshGlassMaterial",[609,21130,665],{"class":614},[609,21132,668],{"class":648},[609,21134,671],{"class":614},[609,21136,674],{"class":635},[609,21138,677],{"class":614},[609,21140,21141,21143,21145],{"class":611,"line":701},[609,21142,704],{"class":614},[609,21144,619],{"class":618},[609,21146,641],{"class":614},[609,21148,21149],{"class":611,"line":711},[609,21150,714],{"emptyLinePlaceholder":566},[609,21152,21153,21155,21157],{"class":611,"line":717},[609,21154,615],{"class":614},[609,21156,722],{"class":618},[609,21158,641],{"class":614},[609,21160,21161,21163,21165],{"class":611,"line":727},[609,21162,730],{"class":614},[609,21164,733],{"class":618},[609,21166,641],{"class":614},[609,21168,21169,21171,21173,21175,21177,21179,21181,21183,21185,21187,21189,21191,21193,21195,21197,21199,21201,21203,21205,21207,21209,21211,21213,21215,21217,21219,21221],{"class":611,"line":750},[609,21170,753],{"class":614},[609,21172,756],{"class":618},[609,21174,785],{"class":614},[609,21176,1463],{"class":622},[609,21178,629],{"class":614},[609,21180,632],{"class":614},[609,21182,1470],{"class":614},[609,21184,4164],{"class":795},[609,21186,1475],{"class":614},[609,21188,4164],{"class":795},[609,21190,1475],{"class":614},[609,21192,4164],{"class":795},[609,21194,1485],{"class":614},[609,21196,632],{"class":614},[609,21198,785],{"class":614},[609,21200,3444],{"class":622},[609,21202,629],{"class":614},[609,21204,632],{"class":614},[609,21206,1470],{"class":614},[609,21208,941],{"class":795},[609,21210,1475],{"class":614},[609,21212,941],{"class":795},[609,21214,1475],{"class":614},[609,21216,941],{"class":795},[609,21218,1485],{"class":614},[609,21220,632],{"class":614},[609,21222,759],{"class":614},[609,21224,21225,21227,21229],{"class":611,"line":762},[609,21226,753],{"class":614},[609,21228,832],{"class":618},[609,21230,641],{"class":614},[609,21232,21234,21236,21238],{"class":21233,"line":772},[611,645],[609,21235,829],{"class":614},[609,21237,5131],{"class":618},[609,21239,759],{"class":614},[609,21241,21242,21244,21247],{"class":611,"line":777},[609,21243,829],{"class":614},[609,21245,21246],{"class":618},"MeshGlassMaterial",[609,21248,759],{"class":614},[609,21250,21251,21253,21255],{"class":611,"line":803},[609,21252,871],{"class":614},[609,21254,832],{"class":618},[609,21256,641],{"class":614},[609,21258,21259,21261,21263],{"class":611,"line":603},[609,21260,753],{"class":614},[609,21262,3522],{"class":618},[609,21264,759],{"class":614},[609,21266,21267,21269,21271,21273,21275,21277,21279,21281,21283,21285,21287,21289,21291,21293,21295],{"class":611,"line":826},[609,21268,753],{"class":614},[609,21270,3543],{"class":618},[609,21272,785],{"class":614},[609,21274,1463],{"class":622},[609,21276,629],{"class":614},[609,21278,632],{"class":614},[609,21280,1470],{"class":614},[609,21282,941],{"class":795},[609,21284,1475],{"class":614},[609,21286,796],{"class":795},[609,21288,1475],{"class":614},[609,21290,3494],{"class":795},[609,21292,1485],{"class":614},[609,21294,632],{"class":614},[609,21296,759],{"class":614},[609,21298,21299,21301,21303],{"class":611,"line":837},[609,21300,881],{"class":614},[609,21302,733],{"class":618},[609,21304,641],{"class":614},[609,21306,21307,21309,21311],{"class":611,"line":848},[609,21308,704],{"class":614},[609,21310,722],{"class":618},[609,21312,641],{"class":614},[476,21314,898],{"id":897},[586,21316,21317,21318,21321],{},"No props are required. The component extends ",[590,21319,21320],{},"THREE.MeshPhysicalMaterial"," and accepts all the same props plus additional reflection-specific properties.",[7477,21323,21325],{"id":21324},"you-can-also-replace-the-material-of-an-existing-mesh-like-this","You can also replace the material of an existing mesh like this:",[598,21327,21330],{"className":600,"code":21328,"highlights":21329,"language":605,"meta":548,"style":548},"\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",[701,717,727,750,762,772,777,803,603,826,837,888],[590,21331,21332,21352,21378,21396,21419,21423,21437,21450,21455,21472,21478,21502,21507,21513,21539,21546,21554,21562,21570,21578,21598,21606,21611,21629,21637,21646,21654],{"__ignoreMap":548},[609,21333,21334,21336,21338,21340,21342,21344,21346,21348,21350],{"class":611,"line":549},[609,21335,615],{"class":614},[609,21337,619],{"class":618},[609,21339,623],{"class":622},[609,21341,626],{"class":622},[609,21343,629],{"class":614},[609,21345,632],{"class":614},[609,21347,636],{"class":635},[609,21349,632],{"class":614},[609,21351,641],{"class":614},[609,21353,21354,21356,21358,21360,21362,21364,21366,21368,21370,21372,21374,21376],{"class":611,"line":550},[609,21355,649],{"class":648},[609,21357,652],{"class":614},[609,21359,5435],{"class":655},[609,21361,659],{"class":614},[609,21363,7909],{"class":655},[609,21365,659],{"class":614},[609,21367,5440],{"class":655},[609,21369,665],{"class":614},[609,21371,668],{"class":648},[609,21373,671],{"class":614},[609,21375,605],{"class":635},[609,21377,677],{"class":614},[609,21379,21380,21382,21384,21386,21388,21390,21392,21394],{"class":611,"line":680},[609,21381,649],{"class":648},[609,21383,652],{"class":614},[609,21385,687],{"class":655},[609,21387,665],{"class":614},[609,21389,668],{"class":648},[609,21391,671],{"class":614},[609,21393,696],{"class":635},[609,21395,677],{"class":614},[609,21397,21399,21401,21403,21405,21407,21409,21411,21413,21415,21417],{"class":21398,"line":701},[611,645],[609,21400,649],{"class":648},[609,21402,652],{"class":614},[609,21404,21128],{"class":655},[609,21406,659],{"class":614},[609,21408,1373],{"class":655},[609,21410,665],{"class":614},[609,21412,668],{"class":648},[609,21414,671],{"class":614},[609,21416,674],{"class":635},[609,21418,677],{"class":614},[609,21420,21421],{"class":611,"line":711},[609,21422,714],{"emptyLinePlaceholder":566},[609,21424,21426,21428,21431,21433,21435],{"class":21425,"line":717},[611,645],[609,21427,2693],{"class":622},[609,21429,21430],{"class":655}," glassMaterialRef ",[609,21432,629],{"class":614},[609,21434,7909],{"class":2804},[609,21436,2850],{"class":655},[609,21438,21440,21442,21444,21446,21448],{"class":21439,"line":727},[611,645],[609,21441,2693],{"class":622},[609,21443,7950],{"class":655},[609,21445,629],{"class":614},[609,21447,7909],{"class":2804},[609,21449,2850],{"class":655},[609,21451,21453],{"class":21452,"line":750},[611,645],[609,21454,714],{"emptyLinePlaceholder":566},[609,21456,21458,21460,21463,21465,21468,21470],{"class":21457,"line":762},[611,645],[609,21459,5489],{"class":2804},[609,21461,21462],{"class":655},"(glassMaterialRef",[609,21464,659],{"class":614},[609,21466,21467],{"class":5499}," value",[609,21469,5505],{"class":622},[609,21471,1180],{"class":614},[609,21473,21475],{"class":21474,"line":772},[611,645],[609,21476,21477],{"class":1185},"  // For good practice we dispose the old material\n",[609,21479,21481,21483,21485,21487,21489,21492,21494,21496,21498,21500],{"class":21480,"line":777},[611,645],[609,21482,8498],{"class":655},[609,21484,1122],{"class":614},[609,21486,5500],{"class":655},[609,21488,1122],{"class":614},[609,21490,21491],{"class":655},"instance",[609,21493,1122],{"class":614},[609,21495,16742],{"class":655},[609,21497,1122],{"class":614},[609,21499,17165],{"class":2804},[609,21501,2850],{"class":618},[609,21503,21505],{"class":21504,"line":803},[611,645],[609,21506,714],{"emptyLinePlaceholder":566},[609,21508,21510],{"class":21509,"line":603},[611,645],[609,21511,21512],{"class":1185},"  // We assign the new MeshGlassMaterialClass\n",[609,21514,21516,21518,21520,21522,21524,21526,21528,21530,21532,21534,21536],{"class":21515,"line":826},[611,645],[609,21517,8498],{"class":655},[609,21519,1122],{"class":614},[609,21521,5500],{"class":655},[609,21523,1122],{"class":614},[609,21525,21491],{"class":655},[609,21527,1122],{"class":614},[609,21529,16742],{"class":655},[609,21531,2770],{"class":614},[609,21533,21467],{"class":655},[609,21535,1122],{"class":614},[609,21537,21538],{"class":655},"MeshGlassMaterialClass\n",[609,21540,21542,21544],{"class":21541,"line":837},[611,645],[609,21543,5548],{"class":614},[609,21545,5543],{"class":655},[609,21547,21548,21550,21552],{"class":611,"line":848},[609,21549,704],{"class":614},[609,21551,619],{"class":618},[609,21553,641],{"class":614},[609,21555,21556,21558,21560],{"class":611,"line":858},[609,21557,615],{"class":614},[609,21559,722],{"class":618},[609,21561,641],{"class":614},[609,21563,21564,21566,21568],{"class":611,"line":604},[609,21565,730],{"class":614},[609,21567,832],{"class":618},[609,21569,641],{"class":614},[609,21571,21572,21574,21576],{"class":611,"line":878},[609,21573,753],{"class":614},[609,21575,5131],{"class":618},[609,21577,759],{"class":614},[609,21579,21581,21583,21585,21587,21589,21591,21594,21596],{"class":21580,"line":888},[611,645],[609,21582,753],{"class":614},[609,21584,21246],{"class":618},[609,21586,5435],{"class":622},[609,21588,629],{"class":614},[609,21590,632],{"class":614},[609,21592,21593],{"class":635},"glassMaterialRef",[609,21595,632],{"class":614},[609,21597,759],{"class":614},[609,21599,21600,21602,21604],{"class":611,"line":2956},[609,21601,881],{"class":614},[609,21603,832],{"class":618},[609,21605,641],{"class":614},[609,21607,21608],{"class":611,"line":2964},[609,21609,21610],{"class":1185},"  \u003C!-- Mesh to be replaced -->\n",[609,21612,21613,21615,21617,21619,21621,21623,21625,21627],{"class":611,"line":2994},[609,21614,730],{"class":614},[609,21616,832],{"class":618},[609,21618,5435],{"class":622},[609,21620,629],{"class":614},[609,21622,632],{"class":614},[609,21624,8060],{"class":635},[609,21626,632],{"class":614},[609,21628,641],{"class":614},[609,21630,21631,21633,21635],{"class":611,"line":3011},[609,21632,753],{"class":614},[609,21634,843],{"class":618},[609,21636,759],{"class":614},[609,21638,21639,21641,21644],{"class":611,"line":3026},[609,21640,753],{"class":614},[609,21642,21643],{"class":618},"MeshBasicMaterial",[609,21645,7463],{"class":614},[609,21647,21648,21650,21652],{"class":611,"line":3051},[609,21649,881],{"class":614},[609,21651,832],{"class":618},[609,21653,641],{"class":614},[609,21655,21656,21658,21660],{"class":611,"line":2595},[609,21657,704],{"class":614},[609,21659,722],{"class":618},[609,21661,641],{"class":614},[476,21663,21665],{"id":21664},"tips","Tips",[3140,21667,21668,21671],{},[3143,21669,21670],{},"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",[3143,21672,21673],{},"Another good option is to provide a normal texture as clearcoatNormalMap to add different results",[1303,21675,21676],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":548,"searchDepth":549,"depth":550,"links":21678},[21679,21682,21685],{"id":596,"depth":550,"text":15,"children":21680},[21681],{"id":21073,"depth":680,"text":21074},{"id":897,"depth":550,"text":898,"children":21683},[21684],{"id":21324,"depth":680,"text":21325},{"id":21664,"depth":550,"text":21665},"Makes a geometry look like glass by re-defining the MeshPhysicalMaterial.",{},{"title":167,"description":21686},"XeLIOrrqO5hF6DK2JnTAyGusif0o80_d6hTc8m5QJQE",{"id":21691,"title":171,"body":21692,"description":22154,"extension":563,"links":564,"meta":22155,"navigation":566,"path":172,"seo":22156,"stem":173,"__hash__":22157},"docs/2.api/4.materials/holographic-material.md",{"type":473,"value":21693,"toc":22149},[21694,21699,21703,21706,21709,21714,21716,21924,21926,22147],[580,21695,21696],{},[21697,21698],"materials-holographic-material",{},[476,21700,21702],{"id":21701},"a-simple-to-use-holographic-material-for-tresjs","A simple to use holographic material for TresJS",[586,21704,21705],{},"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.",[586,21707,21708],{},"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.",[2050,21710,21711],{},[586,21712,21713],{},"This component ports Anderson Mancini's threejs-vanilla-holographic-material to TresJS. All credit goes to him.",[476,21715,15],{"id":596},[598,21717,21720],{"className":600,"code":21718,"highlights":21719,"language":605,"meta":548,"style":548},"\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",[680,772],[590,21721,21722,21742,21760,21784,21788,21796,21804,21812,21862,21882,21892,21900,21908,21916],{"__ignoreMap":548},[609,21723,21724,21726,21728,21730,21732,21734,21736,21738,21740],{"class":611,"line":549},[609,21725,615],{"class":614},[609,21727,619],{"class":618},[609,21729,623],{"class":622},[609,21731,626],{"class":622},[609,21733,629],{"class":614},[609,21735,632],{"class":614},[609,21737,636],{"class":635},[609,21739,632],{"class":614},[609,21741,641],{"class":614},[609,21743,21744,21746,21748,21750,21752,21754,21756,21758],{"class":611,"line":550},[609,21745,649],{"class":648},[609,21747,652],{"class":614},[609,21749,687],{"class":655},[609,21751,665],{"class":614},[609,21753,668],{"class":648},[609,21755,671],{"class":614},[609,21757,696],{"class":635},[609,21759,677],{"class":614},[609,21761,21763,21765,21767,21770,21772,21774,21776,21778,21780,21782],{"class":21762,"line":680},[611,645],[609,21764,649],{"class":648},[609,21766,652],{"class":614},[609,21768,21769],{"class":655}," HolographicMaterial",[609,21771,659],{"class":614},[609,21773,20245],{"class":655},[609,21775,665],{"class":614},[609,21777,668],{"class":648},[609,21779,671],{"class":614},[609,21781,674],{"class":635},[609,21783,677],{"class":614},[609,21785,21786],{"class":611,"line":701},[609,21787,714],{"emptyLinePlaceholder":566},[609,21789,21790,21792,21794],{"class":611,"line":711},[609,21791,704],{"class":614},[609,21793,619],{"class":618},[609,21795,641],{"class":614},[609,21797,21798,21800,21802],{"class":611,"line":717},[609,21799,615],{"class":614},[609,21801,722],{"class":618},[609,21803,641],{"class":614},[609,21805,21806,21808,21810],{"class":611,"line":727},[609,21807,730],{"class":614},[609,21809,733],{"class":618},[609,21811,641],{"class":614},[609,21813,21814,21816,21818,21820,21822,21824,21826,21828,21830,21832,21834,21836,21838,21840,21842,21844,21846,21849,21851,21853,21855,21857,21859],{"class":611,"line":750},[609,21815,753],{"class":614},[609,21817,756],{"class":618},[609,21819,785],{"class":614},[609,21821,1463],{"class":622},[609,21823,629],{"class":614},[609,21825,632],{"class":614},[609,21827,1470],{"class":614},[609,21829,4164],{"class":795},[609,21831,1475],{"class":614},[609,21833,4164],{"class":795},[609,21835,1475],{"class":614},[609,21837,4164],{"class":795},[609,21839,1485],{"class":614},[609,21841,632],{"class":614},[609,21843,785],{"class":614},[609,21845,3444],{"class":622},[609,21847,21848],{"class":614},"=[",[609,21850,941],{"class":795},[609,21852,659],{"class":614},[609,21854,941],{"class":795},[609,21856,659],{"class":614},[609,21858,941],{"class":795},[609,21860,21861],{"class":614},"] />\n",[609,21863,21864,21866,21868,21870,21872,21874,21876,21878,21880],{"class":611,"line":762},[609,21865,753],{"class":614},[609,21867,261],{"class":618},[609,21869,785],{"class":614},[609,21871,788],{"class":622},[609,21873,629],{"class":614},[609,21875,632],{"class":614},[609,21877,1517],{"class":795},[609,21879,632],{"class":614},[609,21881,641],{"class":614},[609,21883,21885,21887,21890],{"class":21884,"line":772},[611,645],[609,21886,829],{"class":614},[609,21888,21889],{"class":618},"HolographicMaterial",[609,21891,759],{"class":614},[609,21893,21894,21896,21898],{"class":611,"line":777},[609,21895,871],{"class":614},[609,21897,261],{"class":618},[609,21899,641],{"class":614},[609,21901,21902,21904,21906],{"class":611,"line":803},[609,21903,753],{"class":614},[609,21905,3522],{"class":618},[609,21907,759],{"class":614},[609,21909,21910,21912,21914],{"class":611,"line":603},[609,21911,881],{"class":614},[609,21913,733],{"class":618},[609,21915,641],{"class":614},[609,21917,21918,21920,21922],{"class":611,"line":826},[609,21919,704],{"class":614},[609,21921,722],{"class":618},[609,21923,641],{"class":614},[476,21925,898],{"id":897},[903,21927,21928,21941],{},[906,21929,21930],{},[909,21931,21932,21934,21936,21938],{},[912,21933,914],{"align":973},[912,21935,917],{"align":973},[912,21937,11906],{},[912,21939,21940],{},"default",[922,21942,21943,21962,21980,21999,22018,22036,22055,22074,22092,22110,22128],{},[909,21944,21945,21950,21953,21957],{},[927,21946,21947],{"align":973},[1677,21948,21949],{},"fresnelAmount",[927,21951,21952],{"align":973},"Value of the Fresnel effect. Ranges from 0.0 to 1.0.",[927,21954,21955],{},[590,21956,5313],{},[927,21958,21959],{},[590,21960,21961],{},"0.45",[909,21963,21964,21969,21972,21976],{},[927,21965,21966],{"align":973},[1677,21967,21968],{},"fresnelOpacity",[927,21970,21971],{"align":973},"Opacity of the Fresnel effect. Ranges from 0.0 to 1.0.",[927,21973,21974],{},[590,21975,5313],{},[927,21977,21978],{},[590,21979,7089],{},[909,21981,21982,21987,21990,21994],{},[927,21983,21984],{"align":973},[1677,21985,21986],{},"scanlineSize",[927,21988,21989],{"align":973},"Size of the scanlines. Ranges from 1 to 15.",[927,21991,21992],{},[590,21993,5313],{},[927,21995,21996],{},[590,21997,21998],{},"8.0",[909,22000,22001,22006,22009,22013],{},[927,22002,22003],{"align":973},[1677,22004,22005],{},"hologramBrightness",[927,22007,22008],{"align":973},"Brightness of the hologram. Ranges from 0.0 to 2.0.",[927,22010,22011],{},[590,22012,5313],{},[927,22014,22015],{},[590,22016,22017],{},"1.2",[909,22019,22020,22025,22028,22032],{},[927,22021,22022],{"align":973},[1677,22023,22024],{},"signalSpeed",[927,22026,22027],{"align":973},"Speed of the signal effect. Ranges from 0.0 to 2.0.",[927,22029,22030],{},[590,22031,5313],{},[927,22033,22034],{},[590,22035,21961],{},[909,22037,22038,22043,22046,22050],{},[927,22039,22040],{"align":973},[1677,22041,22042],{},"hologramColor",[927,22044,22045],{"align":973},"Specifies the color of the hologram.",[927,22047,22048],{},[590,22049,5335],{},[927,22051,22052],{},[590,22053,22054],{},"\"#00d5ff\"",[909,22056,22057,22062,22065,22070],{},[927,22058,22059],{"align":973},[1677,22060,22061],{},"enableBlinking",[927,22063,22064],{"align":973},"Enables or disables the blinking effect.",[927,22066,22067],{},[590,22068,22069],{},"Boolean",[927,22071,22072],{},[590,22073,937],{},[909,22075,22076,22081,22084,22088],{},[927,22077,22078],{"align":973},[1677,22079,22080],{},"hologramOpacity",[927,22082,22083],{"align":973},"Specifies the opacity of the hologram.",[927,22085,22086],{},[590,22087,5313],{},[927,22089,22090],{},[590,22091,7089],{},[909,22093,22094,22099,22102,22106],{},[927,22095,22096],{"align":973},[1677,22097,22098],{},"blinkFresnelOnly",[927,22100,22101],{"align":973},"Enables or disables the blinking effect for the Fresnel only.",[927,22103,22104],{},[590,22105,22069],{},[927,22107,22108],{},[590,22109,937],{},[909,22111,22112,22117,22120,22124],{},[927,22113,22114],{"align":973},[1677,22115,22116],{},"enableAdditive",[927,22118,22119],{"align":973},"Enables or disables the Additive Blend Mode.",[927,22121,22122],{},[590,22123,22069],{},[927,22125,22126],{},[590,22127,937],{},[909,22129,22130,22134,22137,22142],{},[927,22131,22132],{"align":973},[1677,22133,20919],{},[927,22135,22136],{"align":973},"Specifies side for the material, as String.",[927,22138,22139],{},[590,22140,22141],{},"THREE.FrontSide, THREE.BackSide, THREE.DoubleSide",[927,22143,22144],{},[590,22145,22146],{},"FrontSide",[1303,22148,1652],{},{"title":548,"searchDepth":549,"depth":550,"links":22150},[22151,22152,22153],{"id":21701,"depth":550,"text":21702},{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},"A simple to use holographic material for TresJS with vibrant colors, dynamic scanlines, and futuristic brilliance.",{},{"title":171,"description":22154},"qI6m7jV8AEZ5_Ruhn6hSlmpTi7LrcHgetMD_vYArm8Y",{"id":22159,"title":175,"body":22160,"description":22326,"extension":563,"links":564,"meta":22327,"navigation":566,"path":176,"seo":22328,"stem":177,"__hash__":22329},"docs/2.api/4.materials/mesh-discard-material.md",{"type":473,"value":22161,"toc":22323},[22162,22168,22170,22320],[586,22163,22164,22167],{},[590,22165,22166],{},"\u003CMeshDiscardMaterial />"," hides the object it's attached to. The object's shadows and children will be rendered.",[476,22169,15],{"id":596},[598,22171,22174],{"className":600,"code":22172,"highlights":22173,"language":605,"meta":548,"style":548},"\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",[680,777],[590,22175,22176,22196,22214,22234,22242,22246,22254,22262,22270,22278,22286,22296,22304,22312],{"__ignoreMap":548},[609,22177,22178,22180,22182,22184,22186,22188,22190,22192,22194],{"class":611,"line":549},[609,22179,615],{"class":614},[609,22181,619],{"class":618},[609,22183,623],{"class":622},[609,22185,626],{"class":622},[609,22187,629],{"class":614},[609,22189,632],{"class":614},[609,22191,636],{"class":635},[609,22193,632],{"class":614},[609,22195,641],{"class":614},[609,22197,22198,22200,22202,22204,22206,22208,22210,22212],{"class":611,"line":550},[609,22199,649],{"class":648},[609,22201,652],{"class":614},[609,22203,687],{"class":655},[609,22205,665],{"class":614},[609,22207,668],{"class":648},[609,22209,671],{"class":614},[609,22211,696],{"class":635},[609,22213,677],{"class":614},[609,22215,22217,22219,22221,22224,22226,22228,22230,22232],{"class":22216,"line":680},[611,645],[609,22218,649],{"class":648},[609,22220,652],{"class":614},[609,22222,22223],{"class":655}," MeshDiscardMaterial",[609,22225,665],{"class":614},[609,22227,668],{"class":648},[609,22229,671],{"class":614},[609,22231,674],{"class":635},[609,22233,677],{"class":614},[609,22235,22236,22238,22240],{"class":611,"line":701},[609,22237,704],{"class":614},[609,22239,619],{"class":618},[609,22241,641],{"class":614},[609,22243,22244],{"class":611,"line":711},[609,22245,714],{"emptyLinePlaceholder":566},[609,22247,22248,22250,22252],{"class":611,"line":717},[609,22249,615],{"class":614},[609,22251,722],{"class":618},[609,22253,641],{"class":614},[609,22255,22256,22258,22260],{"class":611,"line":727},[609,22257,730],{"class":614},[609,22259,733],{"class":618},[609,22261,641],{"class":614},[609,22263,22264,22266,22268],{"class":611,"line":750},[609,22265,753],{"class":614},[609,22267,756],{"class":618},[609,22269,759],{"class":614},[609,22271,22272,22274,22276],{"class":611,"line":762},[609,22273,753],{"class":614},[609,22275,832],{"class":618},[609,22277,641],{"class":614},[609,22279,22280,22282,22284],{"class":611,"line":772},[609,22281,829],{"class":614},[609,22283,843],{"class":618},[609,22285,759],{"class":614},[609,22287,22289,22291,22294],{"class":22288,"line":777},[611,645],[609,22290,829],{"class":614},[609,22292,22293],{"class":618},"MeshDiscardMaterial",[609,22295,759],{"class":614},[609,22297,22298,22300,22302],{"class":611,"line":803},[609,22299,871],{"class":614},[609,22301,832],{"class":618},[609,22303,641],{"class":614},[609,22305,22306,22308,22310],{"class":611,"line":603},[609,22307,881],{"class":614},[609,22309,733],{"class":618},[609,22311,641],{"class":614},[609,22313,22314,22316,22318],{"class":611,"line":826},[609,22315,704],{"class":614},[609,22317,722],{"class":618},[609,22319,641],{"class":614},[1303,22321,22322],{},"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":548,"searchDepth":549,"depth":550,"links":22324},[22325],{"id":596,"depth":550,"text":15},"Hides the object it's attached to while keeping shadows and children visible.",{},{"title":175,"description":22326},"ivSz3UBTzifkzor3XvoS_5CUJD_0d-7Dh7JvwBwFh80",{"id":22331,"title":179,"body":22332,"description":23157,"extension":563,"links":564,"meta":23158,"navigation":566,"path":180,"seo":23159,"stem":181,"__hash__":23160},"docs/2.api/4.materials/mesh-reflection-material.md",{"type":473,"value":22333,"toc":23153},[22334,22339,22350,22359,22366,22368,22857,22859,23130,23151],[580,22335,22336],{},[22337,22338],"materials-mesh-reflection-material",{},[586,22340,2257,22341,3279,22343,22346,22347,1122],{},[590,22342,2260],{},[590,22344,22345],{},"\u003CMeshReflectionMaterial />"," component for making floors or walls that reflect the objects in your ",[590,22348,22349],{},"Scene",[586,22351,22352,22353,22358],{},"The component is based on the excellent ",[1116,22354,22357],{"href":22355,"rel":22356},"https://github.com/pmndrs/drei",[1120],"Drei"," component of the same name.",[586,22360,22361,22362,22365],{},"It extends ",[590,22363,22364],{},"THREE.MeshStandardMaterial"," and accepts all the same props.",[476,22367,15],{"id":596},[598,22369,22372],{"className":600,"code":22370,"highlights":22371,"language":605,"meta":548,"style":548},"\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",[680,848,858,604,878],[590,22373,22374,22394,22412,22432,22440,22444,22452,22460,22516,22560,22589,22596,22619,22635,22651,22666,22681,22695,22709,22723,22727,22735,22767,22775,22793,22801,22809,22841,22849],{"__ignoreMap":548},[609,22375,22376,22378,22380,22382,22384,22386,22388,22390,22392],{"class":611,"line":549},[609,22377,615],{"class":614},[609,22379,619],{"class":618},[609,22381,623],{"class":622},[609,22383,626],{"class":622},[609,22385,629],{"class":614},[609,22387,632],{"class":614},[609,22389,636],{"class":635},[609,22391,632],{"class":614},[609,22393,641],{"class":614},[609,22395,22396,22398,22400,22402,22404,22406,22408,22410],{"class":611,"line":550},[609,22397,649],{"class":648},[609,22399,652],{"class":614},[609,22401,687],{"class":655},[609,22403,665],{"class":614},[609,22405,668],{"class":648},[609,22407,671],{"class":614},[609,22409,696],{"class":635},[609,22411,677],{"class":614},[609,22413,22415,22417,22419,22422,22424,22426,22428,22430],{"class":22414,"line":680},[611,645],[609,22416,649],{"class":648},[609,22418,652],{"class":614},[609,22420,22421],{"class":655}," MeshReflectionMaterial",[609,22423,665],{"class":614},[609,22425,668],{"class":648},[609,22427,671],{"class":614},[609,22429,674],{"class":635},[609,22431,677],{"class":614},[609,22433,22434,22436,22438],{"class":611,"line":701},[609,22435,704],{"class":614},[609,22437,619],{"class":618},[609,22439,641],{"class":614},[609,22441,22442],{"class":611,"line":711},[609,22443,714],{"emptyLinePlaceholder":566},[609,22445,22446,22448,22450],{"class":611,"line":717},[609,22447,615],{"class":614},[609,22449,722],{"class":618},[609,22451,641],{"class":614},[609,22453,22454,22456,22458],{"class":611,"line":727},[609,22455,730],{"class":614},[609,22457,733],{"class":618},[609,22459,641],{"class":614},[609,22461,22462,22464,22466,22468,22470,22472,22474,22476,22478,22480,22482,22484,22486,22488,22490,22492,22494,22496,22498,22500,22502,22504,22506,22508,22510,22512,22514],{"class":611,"line":750},[609,22463,753],{"class":614},[609,22465,756],{"class":618},[609,22467,785],{"class":614},[609,22469,1463],{"class":622},[609,22471,629],{"class":614},[609,22473,632],{"class":614},[609,22475,1470],{"class":614},[609,22477,4164],{"class":795},[609,22479,1475],{"class":614},[609,22481,4164],{"class":795},[609,22483,1475],{"class":614},[609,22485,4164],{"class":795},[609,22487,1485],{"class":614},[609,22489,632],{"class":614},[609,22491,785],{"class":614},[609,22493,3444],{"class":622},[609,22495,629],{"class":614},[609,22497,632],{"class":614},[609,22499,1470],{"class":614},[609,22501,941],{"class":795},[609,22503,1475],{"class":614},[609,22505,941],{"class":795},[609,22507,1475],{"class":614},[609,22509,941],{"class":795},[609,22511,1485],{"class":614},[609,22513,632],{"class":614},[609,22515,759],{"class":614},[609,22517,22518,22520,22522,22524,22527,22529,22531,22533,22536,22538,22541,22544,22546,22548,22550,22552,22554,22556,22558],{"class":611,"line":762},[609,22519,753],{"class":614},[609,22521,832],{"class":618},[609,22523,785],{"class":614},[609,22525,22526],{"class":622},"rotation",[609,22528,629],{"class":614},[609,22530,632],{"class":614},[609,22532,16140],{"class":614},[609,22534,22535],{"class":655},"Math",[609,22537,1122],{"class":614},[609,22539,22540],{"class":655},"PI",[609,22542,22543],{"class":614}," / ",[609,22545,796],{"class":795},[609,22547,1475],{"class":614},[609,22549,941],{"class":795},[609,22551,1475],{"class":614},[609,22553,941],{"class":795},[609,22555,1485],{"class":614},[609,22557,632],{"class":614},[609,22559,641],{"class":614},[609,22561,22562,22564,22567,22569,22571,22573,22575,22577,22579,22581,22583,22585,22587],{"class":611,"line":772},[609,22563,829],{"class":614},[609,22565,22566],{"class":618},"TresPlaneGeometry",[609,22568,785],{"class":614},[609,22570,1993],{"class":622},[609,22572,629],{"class":614},[609,22574,632],{"class":614},[609,22576,1470],{"class":614},[609,22578,1482],{"class":795},[609,22580,1475],{"class":614},[609,22582,1482],{"class":795},[609,22584,1485],{"class":614},[609,22586,632],{"class":614},[609,22588,759],{"class":614},[609,22590,22591,22593],{"class":611,"line":777},[609,22592,829],{"class":614},[609,22594,22595],{"class":618},"MeshReflectionMaterial\n",[609,22597,22598,22600,22602,22604,22606,22608,22611,22613,22615,22617],{"class":611,"line":803},[609,22599,2997],{"class":614},[609,22601,15970],{"class":622},[609,22603,629],{"class":614},[609,22605,632],{"class":614},[609,22607,1470],{"class":614},[609,22609,22610],{"class":795},"300",[609,22612,1475],{"class":614},[609,22614,6032],{"class":795},[609,22616,1485],{"class":614},[609,22618,2991],{"class":614},[609,22620,22621,22623,22626,22628,22630,22633],{"class":611,"line":603},[609,22622,2997],{"class":614},[609,22624,22625],{"class":622},"mixBlur",[609,22627,629],{"class":614},[609,22629,632],{"class":614},[609,22631,22632],{"class":795},"30",[609,22634,2991],{"class":614},[609,22636,22637,22639,22642,22644,22646,22649],{"class":611,"line":826},[609,22638,2997],{"class":614},[609,22640,22641],{"class":622},"mixStrength",[609,22643,629],{"class":614},[609,22645,632],{"class":614},[609,22647,22648],{"class":795},"80",[609,22650,2991],{"class":614},[609,22652,22653,22655,22658,22660,22662,22664],{"class":611,"line":837},[609,22654,2997],{"class":614},[609,22656,22657],{"class":622},"mixContrast",[609,22659,629],{"class":614},[609,22661,632],{"class":614},[609,22663,1897],{"class":795},[609,22665,2991],{"class":614},[609,22667,22669,22672,22674,22676,22679],{"class":22668,"line":848},[611,645],[609,22670,22671],{"class":622},"        color",[609,22673,629],{"class":614},[609,22675,632],{"class":614},[609,22677,22678],{"class":635},"#a0a0a0",[609,22680,2991],{"class":614},[609,22682,22684,22687,22689,22691,22693],{"class":22683,"line":858},[611,645],[609,22685,22686],{"class":622},"        metalness",[609,22688,629],{"class":614},[609,22690,632],{"class":614},[609,22692,1517],{"class":635},[609,22694,2991],{"class":614},[609,22696,22698,22701,22703,22705,22707],{"class":22697,"line":604},[611,645],[609,22699,22700],{"class":622},"        roughness",[609,22702,629],{"class":614},[609,22704,632],{"class":614},[609,22706,1897],{"class":635},[609,22708,2991],{"class":614},[609,22710,22712,22715,22717,22719,22721],{"class":22711,"line":878},[611,645],[609,22713,22714],{"class":622},"        mirror",[609,22716,629],{"class":614},[609,22718,632],{"class":614},[609,22720,941],{"class":635},[609,22722,2991],{"class":614},[609,22724,22725],{"class":611,"line":888},[609,22726,3054],{"class":614},[609,22728,22729,22731,22733],{"class":611,"line":2956},[609,22730,871],{"class":614},[609,22732,832],{"class":618},[609,22734,641],{"class":614},[609,22736,22737,22739,22741,22743,22745,22747,22749,22751,22753,22755,22757,22759,22761,22763,22765],{"class":611,"line":2964},[609,22738,753],{"class":614},[609,22740,832],{"class":618},[609,22742,785],{"class":614},[609,22744,1463],{"class":622},[609,22746,629],{"class":614},[609,22748,632],{"class":614},[609,22750,1470],{"class":614},[609,22752,941],{"class":795},[609,22754,1475],{"class":614},[609,22756,1897],{"class":795},[609,22758,1475],{"class":614},[609,22760,941],{"class":795},[609,22762,1485],{"class":614},[609,22764,632],{"class":614},[609,22766,641],{"class":614},[609,22768,22769,22771,22773],{"class":611,"line":2994},[609,22770,829],{"class":614},[609,22772,843],{"class":618},[609,22774,759],{"class":614},[609,22776,22777,22779,22781,22783,22785,22787,22789,22791],{"class":611,"line":3011},[609,22778,829],{"class":614},[609,22780,8099],{"class":618},[609,22782,3982],{"class":622},[609,22784,629],{"class":614},[609,22786,632],{"class":614},[609,22788,6742],{"class":635},[609,22790,632],{"class":614},[609,22792,759],{"class":614},[609,22794,22795,22797,22799],{"class":611,"line":3026},[609,22796,871],{"class":614},[609,22798,832],{"class":618},[609,22800,641],{"class":614},[609,22802,22803,22805,22807],{"class":611,"line":3051},[609,22804,753],{"class":614},[609,22806,3522],{"class":618},[609,22808,759],{"class":614},[609,22810,22811,22813,22815,22817,22819,22821,22823,22825,22827,22829,22831,22833,22835,22837,22839],{"class":611,"line":2595},[609,22812,753],{"class":614},[609,22814,3543],{"class":618},[609,22816,785],{"class":614},[609,22818,1463],{"class":622},[609,22820,629],{"class":614},[609,22822,632],{"class":614},[609,22824,1470],{"class":614},[609,22826,941],{"class":795},[609,22828,1475],{"class":614},[609,22830,796],{"class":795},[609,22832,1475],{"class":614},[609,22834,3494],{"class":795},[609,22836,1485],{"class":614},[609,22838,632],{"class":614},[609,22840,759],{"class":614},[609,22842,22843,22845,22847],{"class":611,"line":3066},[609,22844,881],{"class":614},[609,22846,733],{"class":618},[609,22848,641],{"class":614},[609,22850,22851,22853,22855],{"class":611,"line":3096},[609,22852,704],{"class":614},[609,22854,722],{"class":618},[609,22856,641],{"class":614},[476,22858,898],{"id":897},[903,22860,22861,22871],{},[906,22862,22863],{},[909,22864,22865,22867,22869],{},[912,22866,3122],{"align":973},[912,22868,917],{"align":973},[912,22870,920],{},[922,22872,22873,22888,22902,22916,22933,22947,22961,22975,22989,23003,23020,23034,23048,23062,23086,23100,23116],{},[909,22874,22875,22880,22883],{},[927,22876,22877],{"align":973},[590,22878,22879],{},"resolution",[927,22881,22882],{"align":973},"Length in pixels of one side of the square reflective textures",[927,22884,22885],{},[590,22886,22887],{},"256",[909,22889,22890,22895,22898],{},[927,22891,22892],{"align":973},[590,22893,22894],{},"mix",[927,22896,22897],{"align":973},"Overall strength of the reflection",[927,22899,22900],{},[590,22901,1897],{},[909,22903,22904,22909,22912],{},[927,22905,22906],{"align":973},[590,22907,22908],{},"sharpMix",[927,22910,22911],{"align":973},"Strength of the sharp reflection on smooth surfaces",[927,22913,22914],{},[590,22915,1897],{},[909,22917,22918,22923,22929],{},[927,22919,22920],{"align":973},[590,22921,22922],{},"sharpDepthScale",[927,22924,22925,22926,22928],{"align":973},"Sharp reflection can be faded out by depth – distance from the reflective surface. Performance note: if the value is greater than ",[590,22927,941],{},", a depth texture will be created",[927,22930,22931],{},[590,22932,1897],{},[909,22934,22935,22940,22943],{},[927,22936,22937],{"align":973},[590,22938,22939],{},"sharpDepthBias",[927,22941,22942],{"align":973},"Sharp reflection depth falloff bias",[927,22944,22945],{},[590,22946,941],{},[909,22948,22949,22954,22957],{},[927,22950,22951],{"align":973},[590,22952,22953],{},"sharpDepthEdgeMin",[927,22955,22956],{"align":973},"Sharp reflection depth falloff start",[927,22958,22959],{},[590,22960,941],{},[909,22962,22963,22968,22971],{},[927,22964,22965],{"align":973},[590,22966,22967],{},"sharpDepthEdgeMax",[927,22969,22970],{"align":973},"Sharp reflection depth falloff end",[927,22972,22973],{},[590,22974,9041],{},[909,22976,22977,22982,22985],{},[927,22978,22979],{"align":973},[590,22980,22981],{},"blurMixSmooth",[927,22983,22984],{"align":973},"Strength of the blurred reflection on smooth surfaces",[927,22986,22987],{},[590,22988,1897],{},[909,22990,22991,22996,22999],{},[927,22992,22993],{"align":973},[590,22994,22995],{},"blurMixRough",[927,22997,22998],{"align":973},"Strength of the blurred reflection on rough surfaces",[927,23000,23001],{},[590,23002,1897],{},[909,23004,23005,23010,23016],{},[927,23006,23007],{"align":973},[590,23008,23009],{},"blurDepthScale",[927,23011,23012,23013,23015],{"align":973},"Blurred reflection can spread out by depth – distance from the reflective surface. Performance note: if the value is greater than ",[590,23014,941],{},", depth texture will be rendered",[927,23017,23018],{},[590,23019,1897],{},[909,23021,23022,23027,23030],{},[927,23023,23024],{"align":973},[590,23025,23026],{},"blurDepthBias",[927,23028,23029],{"align":973},"Blurred reflection depth spread bias",[927,23031,23032],{},[590,23033,941],{},[909,23035,23036,23041,23044],{},[927,23037,23038],{"align":973},[590,23039,23040],{},"blurDepthEdgeMin",[927,23042,23043],{"align":973},"Blurred reflection depth spread start",[927,23045,23046],{},[590,23047,941],{},[909,23049,23050,23055,23058],{},[927,23051,23052],{"align":973},[590,23053,23054],{},"blurDepthEdgeMax",[927,23056,23057],{"align":973},"Blurred reflection depth spread end",[927,23059,23060],{},[590,23061,9041],{},[909,23063,23064,23069,23082],{},[927,23065,23066],{"align":973},[590,23067,23068],{},"blurSize",[927,23070,23071,23072,23075,23076,11099,23079,23081],{"align":973},"Size of the blur. If ",[590,23073,23074],{},"[number, number]",", first number is width, second is height. Performance note: if other than ",[590,23077,23078],{},"[0, 0]",[590,23080,941],{},", a blur texture will be rendered",[927,23083,23084],{},[590,23085,23078],{},[909,23087,23088,23093,23096],{},[927,23089,23090],{"align":973},[590,23091,23092],{},"distortionMap",[927,23094,23095],{"align":973},"Texture for offsetting the reflection",[927,23097,23098],{},[590,23099,1155],{},[909,23101,23102,23107,23112],{},[927,23103,23104],{"align":973},[590,23105,23106],{},"distortion",[927,23108,23109,23110],{"align":973},"Influence of ",[590,23111,23092],{},[927,23113,23114],{},[590,23115,941],{},[909,23117,23118,23123,23126],{},[927,23119,23120],{"align":973},[590,23121,23122],{},"reflectorOffset",[927,23124,23125],{"align":973},"Offsets the reflection",[927,23127,23128],{},[590,23129,941],{},[586,23131,23132,23133,23135,23136,1475,23138,1475,23140,1475,23142,1475,23144,1475,23146,1475,23148,23150],{},"Additionally, the component extends ",[590,23134,22364],{}," and accepts all the same props including ",[590,23137,2504],{},[590,23139,15752],{},[590,23141,15737],{},[590,23143,14374],{},[590,23145,15637],{},[590,23147,15656],{},[590,23149,15675],{},", and more.",[1303,23152,1652],{},{"title":548,"searchDepth":549,"depth":550,"links":23154},[23155,23156],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},"Makes floors or walls that reflect the objects in your Scene.",{},{"title":179,"description":23157},"SmQ10ERsYJAK7ytDjV3ZCr9APJRPR6MGXbpwBm6D2G8",{"id":23162,"title":183,"body":23163,"description":23479,"extension":563,"links":564,"meta":23480,"navigation":566,"path":184,"seo":23481,"stem":185,"__hash__":23482},"docs/2.api/4.materials/point-material.md",{"type":473,"value":23164,"toc":23475},[23165,23170,23180,23185,23187,23457,23459,23473],[2562,23166,23167],{},[23168,23169],"materials-point-material",{},[586,23171,23172,23175,23176,23179],{},[590,23173,23174],{},"\u003CPointMaterial />"," extends ",[590,23177,23178],{},"THREE.PointsMaterial",". It renders the points as dots, rather than the default squares.",[3729,23181,23182],{},[586,23183,23184],{},"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.",[476,23186,15],{"id":596},[598,23188,23191],{"className":600,"code":23189,"highlights":23190,"language":605,"meta":548,"style":548},"\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",[680,803,603,826],[590,23192,23193,23213,23231,23255,23263,23267,23275,23283,23339,23347,23356,23385,23393,23408,23421,23425,23433,23441,23449],{"__ignoreMap":548},[609,23194,23195,23197,23199,23201,23203,23205,23207,23209,23211],{"class":611,"line":549},[609,23196,615],{"class":614},[609,23198,619],{"class":618},[609,23200,623],{"class":622},[609,23202,626],{"class":622},[609,23204,629],{"class":614},[609,23206,632],{"class":614},[609,23208,636],{"class":635},[609,23210,632],{"class":614},[609,23212,641],{"class":614},[609,23214,23215,23217,23219,23221,23223,23225,23227,23229],{"class":611,"line":550},[609,23216,649],{"class":648},[609,23218,652],{"class":614},[609,23220,687],{"class":655},[609,23222,665],{"class":614},[609,23224,668],{"class":648},[609,23226,671],{"class":614},[609,23228,696],{"class":635},[609,23230,677],{"class":614},[609,23232,23234,23236,23238,23241,23243,23245,23247,23249,23251,23253],{"class":23233,"line":680},[611,645],[609,23235,649],{"class":648},[609,23237,652],{"class":614},[609,23239,23240],{"class":655}," PointMaterial",[609,23242,659],{"class":614},[609,23244,662],{"class":655},[609,23246,665],{"class":614},[609,23248,668],{"class":648},[609,23250,671],{"class":614},[609,23252,674],{"class":635},[609,23254,677],{"class":614},[609,23256,23257,23259,23261],{"class":611,"line":701},[609,23258,704],{"class":614},[609,23260,619],{"class":618},[609,23262,641],{"class":614},[609,23264,23265],{"class":611,"line":711},[609,23266,714],{"emptyLinePlaceholder":566},[609,23268,23269,23271,23273],{"class":611,"line":717},[609,23270,615],{"class":614},[609,23272,722],{"class":618},[609,23274,641],{"class":614},[609,23276,23277,23279,23281],{"class":611,"line":727},[609,23278,730],{"class":614},[609,23280,733],{"class":618},[609,23282,641],{"class":614},[609,23284,23285,23287,23289,23291,23293,23295,23297,23299,23301,23303,23305,23307,23309,23311,23313,23315,23317,23319,23321,23323,23325,23327,23329,23331,23333,23335,23337],{"class":611,"line":750},[609,23286,753],{"class":614},[609,23288,756],{"class":618},[609,23290,785],{"class":614},[609,23292,1463],{"class":622},[609,23294,629],{"class":614},[609,23296,632],{"class":614},[609,23298,1470],{"class":614},[609,23300,4164],{"class":795},[609,23302,1475],{"class":614},[609,23304,4164],{"class":795},[609,23306,1475],{"class":614},[609,23308,4164],{"class":795},[609,23310,1485],{"class":614},[609,23312,632],{"class":614},[609,23314,785],{"class":614},[609,23316,3444],{"class":622},[609,23318,629],{"class":614},[609,23320,632],{"class":614},[609,23322,1470],{"class":614},[609,23324,941],{"class":795},[609,23326,1475],{"class":614},[609,23328,941],{"class":795},[609,23330,1475],{"class":614},[609,23332,941],{"class":795},[609,23334,1485],{"class":614},[609,23336,632],{"class":614},[609,23338,759],{"class":614},[609,23340,23341,23343,23345],{"class":611,"line":762},[609,23342,753],{"class":614},[609,23344,767],{"class":618},[609,23346,759],{"class":614},[609,23348,23349,23351,23354],{"class":611,"line":772},[609,23350,753],{"class":614},[609,23352,23353],{"class":618},"TresPoints",[609,23355,641],{"class":614},[609,23357,23358,23360,23363,23365,23367,23369,23371,23373,23375,23377,23379,23381,23383],{"class":611,"line":777},[609,23359,829],{"class":614},[609,23361,23362],{"class":618},"TresIcosahedronGeometry",[609,23364,785],{"class":614},[609,23366,1993],{"class":622},[609,23368,629],{"class":614},[609,23370,632],{"class":614},[609,23372,1470],{"class":614},[609,23374,1897],{"class":795},[609,23376,1475],{"class":614},[609,23378,3494],{"class":795},[609,23380,1485],{"class":614},[609,23382,632],{"class":614},[609,23384,759],{"class":614},[609,23386,23388,23390],{"class":23387,"line":803},[611,645],[609,23389,829],{"class":614},[609,23391,23392],{"class":618},"PointMaterial\n",[609,23394,23396,23398,23400,23402,23404,23406],{"class":23395,"line":603},[611,645],[609,23397,2997],{"class":614},[609,23399,11182],{"class":622},[609,23401,629],{"class":614},[609,23403,632],{"class":614},[609,23405,2400],{"class":795},[609,23407,2991],{"class":614},[609,23409,23411,23413,23415,23417,23419],{"class":23410,"line":826},[611,645],[609,23412,22671],{"class":622},[609,23414,629],{"class":614},[609,23416,632],{"class":614},[609,23418,6742],{"class":635},[609,23420,2991],{"class":614},[609,23422,23423],{"class":611,"line":837},[609,23424,3054],{"class":614},[609,23426,23427,23429,23431],{"class":611,"line":848},[609,23428,871],{"class":614},[609,23430,23353],{"class":618},[609,23432,641],{"class":614},[609,23434,23435,23437,23439],{"class":611,"line":858},[609,23436,753],{"class":614},[609,23438,3522],{"class":618},[609,23440,759],{"class":614},[609,23442,23443,23445,23447],{"class":611,"line":604},[609,23444,881],{"class":614},[609,23446,733],{"class":618},[609,23448,641],{"class":614},[609,23450,23451,23453,23455],{"class":611,"line":878},[609,23452,704],{"class":614},[609,23454,722],{"class":618},[609,23456,641],{"class":614},[476,23458,898],{"id":897},[586,23460,23461,23462,23469,23470,1122],{},"All ",[1116,23463,23466,23468],{"href":23464,"rel":23465},"https://threejs.org/docs/#api/en/materials/PointsMaterial",[1120],[590,23467,23178],{}," properties"," are inherited by ",[590,23471,23472],{},"PointMaterial",[1303,23474,1652],{},{"title":548,"searchDepth":549,"depth":550,"links":23476},[23477,23478],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},"Extends THREE.PointsMaterial to render points as dots rather than squares.",{},{"title":183,"description":23479},"Aajs-h_7UFOgfUg69Q5QfqvfyKDHM1UKxS8GfRKzI2U",{"id":23484,"title":187,"body":23485,"description":23842,"extension":563,"links":564,"meta":23843,"navigation":566,"path":188,"seo":23844,"stem":189,"__hash__":23845},"docs/2.api/4.materials/wobble-material.md",{"type":473,"value":23486,"toc":23838},[23487,23492,23500,23502,23789,23791,23831,23836],[580,23488,23489],{},[23490,23491],"materials-wobble-material",{},[586,23493,2257,23494,3279,23496,23499],{},[590,23495,2260],{},[590,23497,23498],{},"\u003CMeshWobbleMaterial />"," component that makes a geometry wobble and wave around.",[476,23501,15],{"id":596},[598,23503,23506],{"className":600,"code":23504,"highlights":23505,"language":605,"meta":548,"style":548},"\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",[680,777,803,603,826,837],[590,23507,23508,23528,23546,23566,23574,23578,23586,23594,23650,23658,23666,23674,23688,23703,23720,23725,23733,23741,23773,23781],{"__ignoreMap":548},[609,23509,23510,23512,23514,23516,23518,23520,23522,23524,23526],{"class":611,"line":549},[609,23511,615],{"class":614},[609,23513,619],{"class":618},[609,23515,623],{"class":622},[609,23517,626],{"class":622},[609,23519,629],{"class":614},[609,23521,632],{"class":614},[609,23523,636],{"class":635},[609,23525,632],{"class":614},[609,23527,641],{"class":614},[609,23529,23530,23532,23534,23536,23538,23540,23542,23544],{"class":611,"line":550},[609,23531,649],{"class":648},[609,23533,652],{"class":614},[609,23535,687],{"class":655},[609,23537,665],{"class":614},[609,23539,668],{"class":648},[609,23541,671],{"class":614},[609,23543,696],{"class":635},[609,23545,677],{"class":614},[609,23547,23549,23551,23553,23556,23558,23560,23562,23564],{"class":23548,"line":680},[611,645],[609,23550,649],{"class":648},[609,23552,652],{"class":614},[609,23554,23555],{"class":655}," MeshWobbleMaterial",[609,23557,665],{"class":614},[609,23559,668],{"class":648},[609,23561,671],{"class":614},[609,23563,674],{"class":635},[609,23565,677],{"class":614},[609,23567,23568,23570,23572],{"class":611,"line":701},[609,23569,704],{"class":614},[609,23571,619],{"class":618},[609,23573,641],{"class":614},[609,23575,23576],{"class":611,"line":711},[609,23577,714],{"emptyLinePlaceholder":566},[609,23579,23580,23582,23584],{"class":611,"line":717},[609,23581,615],{"class":614},[609,23583,722],{"class":618},[609,23585,641],{"class":614},[609,23587,23588,23590,23592],{"class":611,"line":727},[609,23589,730],{"class":614},[609,23591,733],{"class":618},[609,23593,641],{"class":614},[609,23595,23596,23598,23600,23602,23604,23606,23608,23610,23612,23614,23616,23618,23620,23622,23624,23626,23628,23630,23632,23634,23636,23638,23640,23642,23644,23646,23648],{"class":611,"line":750},[609,23597,753],{"class":614},[609,23599,756],{"class":618},[609,23601,785],{"class":614},[609,23603,1463],{"class":622},[609,23605,629],{"class":614},[609,23607,632],{"class":614},[609,23609,1470],{"class":614},[609,23611,4164],{"class":795},[609,23613,1475],{"class":614},[609,23615,4164],{"class":795},[609,23617,1475],{"class":614},[609,23619,4164],{"class":795},[609,23621,1485],{"class":614},[609,23623,632],{"class":614},[609,23625,785],{"class":614},[609,23627,3444],{"class":622},[609,23629,629],{"class":614},[609,23631,632],{"class":614},[609,23633,1470],{"class":614},[609,23635,941],{"class":795},[609,23637,1475],{"class":614},[609,23639,941],{"class":795},[609,23641,1475],{"class":614},[609,23643,941],{"class":795},[609,23645,1485],{"class":614},[609,23647,632],{"class":614},[609,23649,759],{"class":614},[609,23651,23652,23654,23656],{"class":611,"line":762},[609,23653,753],{"class":614},[609,23655,832],{"class":618},[609,23657,641],{"class":614},[609,23659,23660,23662,23664],{"class":611,"line":772},[609,23661,829],{"class":614},[609,23663,5131],{"class":618},[609,23665,759],{"class":614},[609,23667,23669,23671],{"class":23668,"line":777},[611,645],[609,23670,829],{"class":614},[609,23672,23673],{"class":618},"MeshWobbleMaterial\n",[609,23675,23677,23679,23681,23683,23686],{"class":23676,"line":803},[611,645],[609,23678,22671],{"class":622},[609,23680,629],{"class":614},[609,23682,632],{"class":614},[609,23684,23685],{"class":635},"#f25042",[609,23687,2991],{"class":614},[609,23689,23691,23693,23695,23697,23699,23701],{"class":23690,"line":603},[611,645],[609,23692,2997],{"class":614},[609,23694,3487],{"class":622},[609,23696,629],{"class":614},[609,23698,632],{"class":614},[609,23700,1897],{"class":795},[609,23702,2991],{"class":614},[609,23704,23706,23708,23711,23713,23715,23718],{"class":23705,"line":826},[611,645],[609,23707,2997],{"class":614},[609,23709,23710],{"class":622},"factor",[609,23712,629],{"class":614},[609,23714,632],{"class":614},[609,23716,23717],{"class":795},"0.6",[609,23719,2991],{"class":614},[609,23721,23723],{"class":23722,"line":837},[611,645],[609,23724,3054],{"class":614},[609,23726,23727,23729,23731],{"class":611,"line":848},[609,23728,871],{"class":614},[609,23730,832],{"class":618},[609,23732,641],{"class":614},[609,23734,23735,23737,23739],{"class":611,"line":858},[609,23736,753],{"class":614},[609,23738,3522],{"class":618},[609,23740,759],{"class":614},[609,23742,23743,23745,23747,23749,23751,23753,23755,23757,23759,23761,23763,23765,23767,23769,23771],{"class":611,"line":604},[609,23744,753],{"class":614},[609,23746,3543],{"class":618},[609,23748,785],{"class":614},[609,23750,1463],{"class":622},[609,23752,629],{"class":614},[609,23754,632],{"class":614},[609,23756,1470],{"class":614},[609,23758,941],{"class":795},[609,23760,1475],{"class":614},[609,23762,796],{"class":795},[609,23764,1475],{"class":614},[609,23766,3494],{"class":795},[609,23768,1485],{"class":614},[609,23770,632],{"class":614},[609,23772,759],{"class":614},[609,23774,23775,23777,23779],{"class":611,"line":878},[609,23776,881],{"class":614},[609,23778,733],{"class":618},[609,23780,641],{"class":614},[609,23782,23783,23785,23787],{"class":611,"line":888},[609,23784,704],{"class":614},[609,23786,722],{"class":618},[609,23788,641],{"class":614},[476,23790,898],{"id":897},[903,23792,23793,23803],{},[906,23794,23795],{},[909,23796,23797,23799,23801],{},[912,23798,914],{"align":973},[912,23800,917],{"align":973},[912,23802,920],{},[922,23804,23805,23818],{},[909,23806,23807,23811,23814],{},[927,23808,23809],{"align":973},[1677,23810,3487],{},[927,23812,23813],{"align":973},"how fast the wobble effect would be.",[927,23815,23816],{},[590,23817,1897],{},[909,23819,23820,23824,23827],{},[927,23821,23822],{"align":973},[1677,23823,23710],{},[927,23825,23826],{"align":973},"how strong the wobble effect will deform the geometry",[927,23828,23829],{},[590,23830,1897],{},[586,23832,23833,23834,21321],{},"This material extends ",[590,23835,22364],{},[1303,23837,1652],{},{"title":548,"searchDepth":549,"depth":550,"links":23839},[23840,23841],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},"Makes a geometry wobble and wave around with customizable speed and factor.",{},{"title":187,"description":23842},"FCaNs3jjWImwSxNZzcx1r_CPKoNz27JGUgdcUzvQ1Ys",[23847,24031,24608,24778,24956,25427,25663,25832,26415,26583,27247,27414,27588,28019,28196,28358,28552,28728,29180,29348,29539,29729],{"id":23848,"title":197,"body":23849,"description":24027,"extension":563,"links":564,"meta":24028,"navigation":566,"path":198,"seo":24029,"stem":199,"__hash__":24030},"docs/2.api/5.shapes/box.md",{"type":473,"value":23850,"toc":24024},[23851,23856,23867,23875,23882,23884,24021],[580,23852,23853],{},[23854,23855],"shapes-box",{},[586,23857,2257,23858,3279,23860,23863,23864,1122],{},[590,23859,2260],{},[590,23861,23862],{},"\u003CBox />"," component that serves as a short-cut for a ",[590,23865,23866],{},"BoxGeometry",[598,23868,23873],{"className":23869,"code":23871,"language":23872},[23870],"language-text","args: [\n  width: number,\n  height: number,\n  depth: number,\n  widthSegments: number,\n  heightSegments: number,\n  depthSegments: number\n]\n","text",[590,23874,23871],{"__ignoreMap":548},[586,23876,23877,23878],{},"Reference: ",[1116,23879,23866],{"href":23880,"rel":23881},"https://threejs.org/docs/?q=box#api/en/geometries/BoxGeometry",[1120],[476,23883,15],{"id":596},[598,23885,23887],{"className":600,"code":23886,"language":605,"meta":548,"style":548},"\u003CBox :args=\"[1, 1, 1]\" color=\"orange\" />\n\n// Box with a custom material transformations\n\u003CBox ref=\"boxRef\" :args=\"[1, 1, 1]\" :position=\"[0, 4, 0]\">\n  \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/Box>\n",[590,23888,23889,23932,23936,23941,24008,24013],{"__ignoreMap":548},[609,23890,23891,23893,23895,23897,23899,23901,23903,23905,23907,23909,23912,23914,23916,23918,23920,23922,23924,23926,23928,23930],{"class":611,"line":549},[609,23892,615],{"class":614},[609,23894,197],{"class":618},[609,23896,785],{"class":614},[609,23898,1993],{"class":622},[609,23900,629],{"class":614},[609,23902,632],{"class":614},[609,23904,1470],{"class":655},[609,23906,1897],{"class":795},[609,23908,659],{"class":614},[609,23910,23911],{"class":795}," 1",[609,23913,659],{"class":614},[609,23915,23911],{"class":795},[609,23917,1485],{"class":655},[609,23919,632],{"class":614},[609,23921,3982],{"class":622},[609,23923,629],{"class":614},[609,23925,632],{"class":614},[609,23927,6742],{"class":635},[609,23929,632],{"class":614},[609,23931,759],{"class":614},[609,23933,23934],{"class":611,"line":550},[609,23935,714],{"emptyLinePlaceholder":566},[609,23937,23938],{"class":611,"line":680},[609,23939,23940],{"class":655},"// Box with a custom material transformations\n",[609,23942,23943,23945,23947,23949,23951,23953,23955,23957,23959,23961,23963,23965,23967,23969,23971,23973,23975,23977,23979,23981,23983,23985,23987,23989,23991,23993,23995,23998,24000,24002,24004,24006],{"class":611,"line":701},[609,23944,615],{"class":614},[609,23946,197],{"class":618},[609,23948,5435],{"class":622},[609,23950,629],{"class":614},[609,23952,632],{"class":614},[609,23954,8060],{"class":635},[609,23956,632],{"class":614},[609,23958,785],{"class":614},[609,23960,1993],{"class":622},[609,23962,629],{"class":614},[609,23964,632],{"class":614},[609,23966,1470],{"class":655},[609,23968,1897],{"class":795},[609,23970,659],{"class":614},[609,23972,23911],{"class":795},[609,23974,659],{"class":614},[609,23976,23911],{"class":795},[609,23978,1485],{"class":655},[609,23980,632],{"class":614},[609,23982,785],{"class":614},[609,23984,1463],{"class":622},[609,23986,629],{"class":614},[609,23988,632],{"class":614},[609,23990,1470],{"class":655},[609,23992,941],{"class":795},[609,23994,659],{"class":614},[609,23996,23997],{"class":795}," 4",[609,23999,659],{"class":614},[609,24001,12722],{"class":795},[609,24003,1485],{"class":655},[609,24005,632],{"class":614},[609,24007,641],{"class":614},[609,24009,24010],{"class":611,"line":711},[609,24011,24012],{"class":655},"  \u003CTresMeshToonMaterial color=\"orange\" />\n",[609,24014,24015,24017,24019],{"class":611,"line":717},[609,24016,704],{"class":614},[609,24018,197],{"class":618},[609,24020,641],{"class":614},[1303,24022,24023],{},"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 .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 pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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":548,"searchDepth":549,"depth":550,"links":24025},[24026],{"id":596,"depth":550,"text":15},"Short-cut for a BoxGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":197,"description":24027},"EvaXEC2iSPj1-74ZRQEV-iGoScGBI5kq_mAZQoDjltE",{"id":24032,"title":201,"body":24033,"description":24604,"extension":563,"links":564,"meta":24605,"navigation":566,"path":202,"seo":24606,"stem":203,"__hash__":24607},"docs/2.api/5.shapes/catmullromcurve3.md",{"type":473,"value":24034,"toc":24600},[24035,24040,24048,24071,24073,24366,24368,24597],[2562,24036,24037],{},[24038,24039],"shapes-catmull-rom-curve3",{},[586,24041,2257,24042,3279,24044,24047],{},[590,24043,2260],{},[590,24045,24046],{},"\u003CCatmullRomCurve3 />"," component that allows you to make smooth(ish) 3D lines.",[586,24049,24050,24052,24053,24060,24061,24064,24065],{},[590,24051,24046],{}," wraps ",[1116,24054,24057,24058],{"href":24055,"rel":24056},"https://threejs.org/docs/index.html?q=catmu#api/en/extras/curves/CatmullRomCurve3",[1120],"Three.js's ",[590,24059,201],{}," functionality, but applies it to Cientos' ",[590,24062,24063],{},"\u003CLine2 />"," under the hood, meaning you can use ",[1116,24066,24068,24069,1122],{"href":24067},"line2#props","all the props from ",[590,24070,24063],{},[476,24072,15],{"id":596},[598,24074,24077],{"className":600,"code":24075,"highlights":24076,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { CatmullRomCurve3 } from '@tresjs/cientos'\nimport { Vector3 } from 'three'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n    \u003CCatmullRomCurve3\n      :points=\"[new Vector3(-1, 0, 0), new Vector3(0, 1, 0), new Vector3(1, 0, 0)]\"\n      :segments=\"50\"\n      color=\"orange\"\n      :line-width=\"3\"\n    />\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[680,772,777,803,603,826],[590,24078,24079,24099,24117,24137,24156,24164,24168,24176,24184,24216,24224,24292,24308,24322,24338,24342,24350,24358],{"__ignoreMap":548},[609,24080,24081,24083,24085,24087,24089,24091,24093,24095,24097],{"class":611,"line":549},[609,24082,615],{"class":614},[609,24084,619],{"class":618},[609,24086,623],{"class":622},[609,24088,626],{"class":622},[609,24090,629],{"class":614},[609,24092,632],{"class":614},[609,24094,636],{"class":635},[609,24096,632],{"class":614},[609,24098,641],{"class":614},[609,24100,24101,24103,24105,24107,24109,24111,24113,24115],{"class":611,"line":550},[609,24102,649],{"class":648},[609,24104,652],{"class":614},[609,24106,687],{"class":655},[609,24108,665],{"class":614},[609,24110,668],{"class":648},[609,24112,671],{"class":614},[609,24114,696],{"class":635},[609,24116,677],{"class":614},[609,24118,24120,24122,24124,24127,24129,24131,24133,24135],{"class":24119,"line":680},[611,645],[609,24121,649],{"class":648},[609,24123,652],{"class":614},[609,24125,24126],{"class":655}," CatmullRomCurve3",[609,24128,665],{"class":614},[609,24130,668],{"class":648},[609,24132,671],{"class":614},[609,24134,674],{"class":635},[609,24136,677],{"class":614},[609,24138,24139,24141,24143,24146,24148,24150,24152,24154],{"class":611,"line":701},[609,24140,649],{"class":648},[609,24142,652],{"class":614},[609,24144,24145],{"class":655}," Vector3",[609,24147,665],{"class":614},[609,24149,668],{"class":648},[609,24151,671],{"class":614},[609,24153,2682],{"class":635},[609,24155,677],{"class":614},[609,24157,24158,24160,24162],{"class":611,"line":711},[609,24159,704],{"class":614},[609,24161,619],{"class":618},[609,24163,641],{"class":614},[609,24165,24166],{"class":611,"line":717},[609,24167,714],{"emptyLinePlaceholder":566},[609,24169,24170,24172,24174],{"class":611,"line":727},[609,24171,615],{"class":614},[609,24173,722],{"class":618},[609,24175,641],{"class":614},[609,24177,24178,24180,24182],{"class":611,"line":750},[609,24179,730],{"class":614},[609,24181,733],{"class":618},[609,24183,641],{"class":614},[609,24185,24186,24188,24190,24192,24194,24196,24198,24200,24202,24204,24206,24208,24210,24212,24214],{"class":611,"line":762},[609,24187,753],{"class":614},[609,24189,756],{"class":618},[609,24191,785],{"class":614},[609,24193,1463],{"class":622},[609,24195,629],{"class":614},[609,24197,632],{"class":614},[609,24199,1470],{"class":614},[609,24201,4164],{"class":795},[609,24203,1475],{"class":614},[609,24205,4164],{"class":795},[609,24207,1475],{"class":614},[609,24209,4164],{"class":795},[609,24211,1485],{"class":614},[609,24213,632],{"class":614},[609,24215,759],{"class":614},[609,24217,24219,24221],{"class":24218,"line":772},[611,645],[609,24220,753],{"class":614},[609,24222,24223],{"class":618},"CatmullRomCurve3\n",[609,24225,24227,24229,24232,24234,24236,24239,24241,24244,24246,24248,24250,24252,24254,24257,24259,24261,24263,24265,24267,24269,24271,24273,24275,24277,24279,24281,24283,24285,24287,24290],{"class":24226,"line":777},[611,645],[609,24228,5697],{"class":614},[609,24230,24231],{"class":622},"points",[609,24233,629],{"class":614},[609,24235,632],{"class":614},[609,24237,24238],{"class":614},"[new ",[609,24240,3176],{"class":2804},[609,24242,24243],{"class":614},"(-",[609,24245,1897],{"class":795},[609,24247,1475],{"class":614},[609,24249,941],{"class":795},[609,24251,1475],{"class":614},[609,24253,941],{"class":795},[609,24255,24256],{"class":614},"), new ",[609,24258,3176],{"class":2804},[609,24260,2974],{"class":614},[609,24262,941],{"class":795},[609,24264,1475],{"class":614},[609,24266,1897],{"class":795},[609,24268,1475],{"class":614},[609,24270,941],{"class":795},[609,24272,24256],{"class":614},[609,24274,3176],{"class":2804},[609,24276,2974],{"class":614},[609,24278,1897],{"class":795},[609,24280,1475],{"class":614},[609,24282,941],{"class":795},[609,24284,1475],{"class":614},[609,24286,941],{"class":795},[609,24288,24289],{"class":614},")]",[609,24291,2991],{"class":614},[609,24293,24295,24297,24300,24302,24304,24306],{"class":24294,"line":803},[611,645],[609,24296,5697],{"class":614},[609,24298,24299],{"class":622},"segments",[609,24301,629],{"class":614},[609,24303,632],{"class":614},[609,24305,4601],{"class":795},[609,24307,2991],{"class":614},[609,24309,24311,24314,24316,24318,24320],{"class":24310,"line":603},[611,645],[609,24312,24313],{"class":622},"      color",[609,24315,629],{"class":614},[609,24317,632],{"class":614},[609,24319,6742],{"class":635},[609,24321,2991],{"class":614},[609,24323,24325,24327,24330,24332,24334,24336],{"class":24324,"line":826},[611,645],[609,24326,5697],{"class":614},[609,24328,24329],{"class":622},"line-width",[609,24331,629],{"class":614},[609,24333,632],{"class":614},[609,24335,4164],{"class":795},[609,24337,2991],{"class":614},[609,24339,24340],{"class":611,"line":837},[609,24341,11765],{"class":614},[609,24343,24344,24346,24348],{"class":611,"line":848},[609,24345,753],{"class":614},[609,24347,3522],{"class":618},[609,24349,759],{"class":614},[609,24351,24352,24354,24356],{"class":611,"line":858},[609,24353,881],{"class":614},[609,24355,733],{"class":618},[609,24357,641],{"class":614},[609,24359,24360,24362,24364],{"class":611,"line":604},[609,24361,704],{"class":614},[609,24363,722],{"class":618},[609,24365,641],{"class":614},[476,24367,898],{"id":897},[903,24369,24370,24382],{},[906,24371,24372],{},[909,24373,24374,24376,24378,24380],{},[912,24375,914],{},[912,24377,11906],{},[912,24379,917],{},[912,24381,920],{},[922,24383,24384,24398,24412,24426,24442,24456,24471,24485,24499,24513,24527,24541,24555,24569,24583],{},[909,24385,24386,24388,24393,24396],{},[927,24387,24231],{},[927,24389,24390],{},[590,24391,24392],{},"Array\u003CVector3 | [number, number, number]>",[927,24394,24395],{},"Curve's control points",[927,24397],{},[909,24399,24400,24402,24406,24409],{},[927,24401,24299],{},[927,24403,24404],{},[590,24405,2541],{},[927,24407,24408],{},"Number of segments in the resulting curve (higher = smoother)",[927,24410,24411],{},"20",[909,24413,24414,24417,24421,24424],{},[927,24415,24416],{},"closed",[927,24418,24419],{},[590,24420,11963],{},[927,24422,24423],{},"The curve will loop back onto itself when this is true.",[927,24425,947],{},[909,24427,24428,24431,24436,24439],{},[927,24429,24430],{},"curveType",[927,24432,24433],{},[590,24434,24435],{},"'centripetal' | 'chordal' | 'catmullrom'",[927,24437,24438],{},"Curve type",[927,24440,24441],{},"'centripetal'",[909,24443,24444,24447,24451,24454],{},[927,24445,24446],{},"tension",[927,24448,24449],{},[590,24450,2541],{},[927,24452,24453],{},"Catmullrom's tension, when curveType is 'catmullrom'",[927,24455,1517],{},[909,24457,24458,24461,24466,24469],{},[927,24459,24460],{},"vertexColors",[927,24462,24463],{},[590,24464,24465],{},"TresColor[]",[927,24467,24468],{},"Vertex colors, if using",[927,24470,3156],{},[909,24472,24473,24475,24479,24482],{},[927,24474,2504],{},[927,24476,24477],{},[590,24478,2519],{},[927,24480,24481],{},"Color for the line – multiplies vertex colors",[927,24483,24484],{},"'white'",[909,24486,24487,24490,24494,24497],{},[927,24488,24489],{},"lineWidth",[927,24491,24492],{},[590,24493,2541],{},[927,24495,24496],{},"Width of the line – in world units with size attenuation, pixels otherwise",[927,24498,1897],{},[909,24500,24501,24504,24508,24511],{},[927,24502,24503],{},"worldUnits",[927,24505,24506],{},[590,24507,11963],{},[927,24509,24510],{},"Whether the line width is in world units or pixels",[927,24512,947],{},[909,24514,24515,24518,24522,24525],{},[927,24516,24517],{},"alphaToCoverage",[927,24519,24520],{},[590,24521,11963],{},[927,24523,24524],{},"Enables alpha to coverage. Can only be used with MSAA-enabled contexts (meaning when the renderer was created with antialias parameter set to true).",[927,24526,947],{},[909,24528,24529,24532,24536,24539],{},[927,24530,24531],{},"dashed",[927,24533,24534],{},[590,24535,11963],{},[927,24537,24538],{},"Whether the line is dashed",[927,24540,947],{},[909,24542,24543,24546,24550,24553],{},[927,24544,24545],{},"dashSize",[927,24547,24548],{},[590,24549,2541],{},[927,24551,24552],{},"Dash size",[927,24554,1897],{},[909,24556,24557,24560,24564,24567],{},[927,24558,24559],{},"gapSize",[927,24561,24562],{},[590,24563,2541],{},[927,24565,24566],{},"Gap size in dashed line",[927,24568,1897],{},[909,24570,24571,24574,24578,24581],{},[927,24572,24573],{},"dashScale",[927,24575,24576],{},[590,24577,2541],{},[927,24579,24580],{},"Scale of the dashes/gaps",[927,24582,1897],{},[909,24584,24585,24588,24592,24595],{},[927,24586,24587],{},"dashOffset",[927,24589,24590],{},[590,24591,2541],{},[927,24593,24594],{},"Dash offset",[927,24596,941],{},[1303,24598,24599],{},"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 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":548,"searchDepth":549,"depth":550,"links":24601},[24602,24603],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},"Allows you to make smooth 3D lines using Catmull-Rom curves.",{},{"title":201,"description":24604},"pYOe6asnxM2yBwZJgT-M4NxxwDh-pE8XXsD--fBVLqo",{"id":24609,"title":205,"body":24610,"description":24774,"extension":563,"links":564,"meta":24775,"navigation":566,"path":206,"seo":24776,"stem":207,"__hash__":24777},"docs/2.api/5.shapes/circle.md",{"type":473,"value":24611,"toc":24771},[24612,24617,24627,24633,24639,24641,24769],[580,24613,24614],{},[24615,24616],"shapes-circle",{},[586,24618,2257,24619,3279,24621,23863,24624,1122],{},[590,24620,2260],{},[590,24622,24623],{},"\u003CCircle />",[590,24625,24626],{},"CircleGeometry",[598,24628,24631],{"className":24629,"code":24630,"language":23872},[23870],"args: [radius: number, segments: number, thetaStart: number, thetaLength: number]\n",[590,24632,24630],{"__ignoreMap":548},[586,24634,23877,24635],{},[1116,24636,24626],{"href":24637,"rel":24638},"https://threejs.org/docs/?q=circle#api/en/geometries/CircleGeometry",[1120],[476,24640,15],{"id":596},[598,24642,24644],{"className":600,"code":24643,"language":605,"meta":548,"style":548},"\u003CCircle :args=\"[1, 32]\" color=\"orange\" />\n\n// Circle with a custom material transformations\n\u003CCircle ref=\"circleRef\" :args=\"[1, 32]\" :position=\"[0, 0, 0]\">\n  \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/Circle>\n",[590,24645,24646,24685,24689,24694,24757,24761],{"__ignoreMap":548},[609,24647,24648,24650,24652,24654,24656,24658,24660,24662,24664,24666,24669,24671,24673,24675,24677,24679,24681,24683],{"class":611,"line":549},[609,24649,615],{"class":614},[609,24651,205],{"class":618},[609,24653,785],{"class":614},[609,24655,1993],{"class":622},[609,24657,629],{"class":614},[609,24659,632],{"class":614},[609,24661,1470],{"class":655},[609,24663,1897],{"class":795},[609,24665,659],{"class":614},[609,24667,24668],{"class":795}," 32",[609,24670,1485],{"class":655},[609,24672,632],{"class":614},[609,24674,3982],{"class":622},[609,24676,629],{"class":614},[609,24678,632],{"class":614},[609,24680,6742],{"class":635},[609,24682,632],{"class":614},[609,24684,759],{"class":614},[609,24686,24687],{"class":611,"line":550},[609,24688,714],{"emptyLinePlaceholder":566},[609,24690,24691],{"class":611,"line":680},[609,24692,24693],{"class":655},"// Circle with a custom material transformations\n",[609,24695,24696,24698,24700,24702,24704,24706,24709,24711,24713,24715,24717,24719,24721,24723,24725,24727,24729,24731,24733,24735,24737,24739,24741,24743,24745,24747,24749,24751,24753,24755],{"class":611,"line":701},[609,24697,615],{"class":614},[609,24699,205],{"class":618},[609,24701,5435],{"class":622},[609,24703,629],{"class":614},[609,24705,632],{"class":614},[609,24707,24708],{"class":635},"circleRef",[609,24710,632],{"class":614},[609,24712,785],{"class":614},[609,24714,1993],{"class":622},[609,24716,629],{"class":614},[609,24718,632],{"class":614},[609,24720,1470],{"class":655},[609,24722,1897],{"class":795},[609,24724,659],{"class":614},[609,24726,24668],{"class":795},[609,24728,1485],{"class":655},[609,24730,632],{"class":614},[609,24732,785],{"class":614},[609,24734,1463],{"class":622},[609,24736,629],{"class":614},[609,24738,632],{"class":614},[609,24740,1470],{"class":655},[609,24742,941],{"class":795},[609,24744,659],{"class":614},[609,24746,12722],{"class":795},[609,24748,659],{"class":614},[609,24750,12722],{"class":795},[609,24752,1485],{"class":655},[609,24754,632],{"class":614},[609,24756,641],{"class":614},[609,24758,24759],{"class":611,"line":711},[609,24760,24012],{"class":655},[609,24762,24763,24765,24767],{"class":611,"line":717},[609,24764,704],{"class":614},[609,24766,205],{"class":618},[609,24768,641],{"class":614},[1303,24770,24023],{},{"title":548,"searchDepth":549,"depth":550,"links":24772},[24773],{"id":596,"depth":550,"text":15},"Short-cut for a CircleGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":205,"description":24774},"wQLfnhseui4b7Q0fQxQzwX-2D_yemIZgwYA9Cpmtxvo",{"id":24779,"title":209,"body":24780,"description":24952,"extension":563,"links":564,"meta":24953,"navigation":566,"path":210,"seo":24954,"stem":211,"__hash__":24955},"docs/2.api/5.shapes/cone.md",{"type":473,"value":24781,"toc":24949},[24782,24787,24797,24803,24809,24811,24947],[580,24783,24784],{},[24785,24786],"shapes-cone",{},[586,24788,2257,24789,3279,24791,23863,24794,1122],{},[590,24790,2260],{},[590,24792,24793],{},"\u003CCone />",[590,24795,24796],{},"ConeGeometry",[598,24798,24801],{"className":24799,"code":24800,"language":23872},[23870],"args: [\n  radius: number,\n  height: number,\n  radialSegments: number,\n  heightSegments: number,\n  openEnded: boolean,\n  thetaStart: number,\n  thetaLength: number\n]\n",[590,24802,24800],{"__ignoreMap":548},[586,24804,23877,24805],{},[1116,24806,24796],{"href":24807,"rel":24808},"https://threejs.org/docs/?q=cone#api/en/geometries/ConeGeometry",[1120],[476,24810,15],{"id":596},[598,24812,24814],{"className":600,"code":24813,"language":605,"meta":548,"style":548},"\u003CCone :args=\"[1, 1, 8]\" color=\"orange\" />\n\n// Cone with a custom material transformations\n\u003CCone ref=\"coneRef\" :args=\"[1, 1, 8]\" :position=\"[0, 4, 0]\">\n  \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/Cone>\n",[590,24815,24816,24859,24863,24868,24935,24939],{"__ignoreMap":548},[609,24817,24818,24820,24822,24824,24826,24828,24830,24832,24834,24836,24838,24840,24843,24845,24847,24849,24851,24853,24855,24857],{"class":611,"line":549},[609,24819,615],{"class":614},[609,24821,209],{"class":618},[609,24823,785],{"class":614},[609,24825,1993],{"class":622},[609,24827,629],{"class":614},[609,24829,632],{"class":614},[609,24831,1470],{"class":655},[609,24833,1897],{"class":795},[609,24835,659],{"class":614},[609,24837,23911],{"class":795},[609,24839,659],{"class":614},[609,24841,24842],{"class":795}," 8",[609,24844,1485],{"class":655},[609,24846,632],{"class":614},[609,24848,3982],{"class":622},[609,24850,629],{"class":614},[609,24852,632],{"class":614},[609,24854,6742],{"class":635},[609,24856,632],{"class":614},[609,24858,759],{"class":614},[609,24860,24861],{"class":611,"line":550},[609,24862,714],{"emptyLinePlaceholder":566},[609,24864,24865],{"class":611,"line":680},[609,24866,24867],{"class":655},"// Cone with a custom material transformations\n",[609,24869,24870,24872,24874,24876,24878,24880,24883,24885,24887,24889,24891,24893,24895,24897,24899,24901,24903,24905,24907,24909,24911,24913,24915,24917,24919,24921,24923,24925,24927,24929,24931,24933],{"class":611,"line":701},[609,24871,615],{"class":614},[609,24873,209],{"class":618},[609,24875,5435],{"class":622},[609,24877,629],{"class":614},[609,24879,632],{"class":614},[609,24881,24882],{"class":635},"coneRef",[609,24884,632],{"class":614},[609,24886,785],{"class":614},[609,24888,1993],{"class":622},[609,24890,629],{"class":614},[609,24892,632],{"class":614},[609,24894,1470],{"class":655},[609,24896,1897],{"class":795},[609,24898,659],{"class":614},[609,24900,23911],{"class":795},[609,24902,659],{"class":614},[609,24904,24842],{"class":795},[609,24906,1485],{"class":655},[609,24908,632],{"class":614},[609,24910,785],{"class":614},[609,24912,1463],{"class":622},[609,24914,629],{"class":614},[609,24916,632],{"class":614},[609,24918,1470],{"class":655},[609,24920,941],{"class":795},[609,24922,659],{"class":614},[609,24924,23997],{"class":795},[609,24926,659],{"class":614},[609,24928,12722],{"class":795},[609,24930,1485],{"class":655},[609,24932,632],{"class":614},[609,24934,641],{"class":614},[609,24936,24937],{"class":611,"line":711},[609,24938,24012],{"class":655},[609,24940,24941,24943,24945],{"class":611,"line":717},[609,24942,704],{"class":614},[609,24944,209],{"class":618},[609,24946,641],{"class":614},[1303,24948,24023],{},{"title":548,"searchDepth":549,"depth":550,"links":24950},[24951],{"id":596,"depth":550,"text":15},"Short-cut for a ConeGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":209,"description":24952},"LobanFD68GY4U45rEkqMogA7guX1DZi5E6MMnCuki0k",{"id":24957,"title":213,"body":24958,"description":25423,"extension":563,"links":564,"meta":25424,"navigation":566,"path":214,"seo":25425,"stem":215,"__hash__":25426},"docs/2.api/5.shapes/cubic-bezier-line.md",{"type":473,"value":24959,"toc":25419},[24960,24965,24974,24976,25314,25316,25326,25417],[2562,24961,24962],{},[24963,24964],"shapes-cubic-bezier-line",{},[586,24966,24967,24970,24971,24973],{},[590,24968,24969],{},"\u003CCubicBezierLine />"," renders a ",[590,24972,24063],{}," between start and end points, with additional 2 control points.",[476,24975,15],{"id":596},[598,24977,24979],{"className":600,"code":24978,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { CubicBezierLine } from '@tresjs/cientos'\nimport { Vector3 } from 'three'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n    \u003CCubicBezierLine\n      :start=\"new Vector3(-1, 0, 0)\"\n      :end=\"new Vector3(1, 0, 0)\"\n      :midA=\"new Vector3(-0.5, 1, 0)\"\n      :midB=\"new Vector3(0.5, 1, 0)\"\n      :segments=\"50\"\n      color=\"orange\"\n      :line-width=\"3\"\n    />\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[590,24980,24981,25001,25019,25038,25056,25064,25068,25076,25084,25116,25123,25154,25184,25215,25246,25260,25272,25286,25290,25298,25306],{"__ignoreMap":548},[609,24982,24983,24985,24987,24989,24991,24993,24995,24997,24999],{"class":611,"line":549},[609,24984,615],{"class":614},[609,24986,619],{"class":618},[609,24988,623],{"class":622},[609,24990,626],{"class":622},[609,24992,629],{"class":614},[609,24994,632],{"class":614},[609,24996,636],{"class":635},[609,24998,632],{"class":614},[609,25000,641],{"class":614},[609,25002,25003,25005,25007,25009,25011,25013,25015,25017],{"class":611,"line":550},[609,25004,649],{"class":648},[609,25006,652],{"class":614},[609,25008,687],{"class":655},[609,25010,665],{"class":614},[609,25012,668],{"class":648},[609,25014,671],{"class":614},[609,25016,696],{"class":635},[609,25018,677],{"class":614},[609,25020,25021,25023,25025,25028,25030,25032,25034,25036],{"class":611,"line":680},[609,25022,649],{"class":648},[609,25024,652],{"class":614},[609,25026,25027],{"class":655}," CubicBezierLine",[609,25029,665],{"class":614},[609,25031,668],{"class":648},[609,25033,671],{"class":614},[609,25035,674],{"class":635},[609,25037,677],{"class":614},[609,25039,25040,25042,25044,25046,25048,25050,25052,25054],{"class":611,"line":701},[609,25041,649],{"class":648},[609,25043,652],{"class":614},[609,25045,24145],{"class":655},[609,25047,665],{"class":614},[609,25049,668],{"class":648},[609,25051,671],{"class":614},[609,25053,2682],{"class":635},[609,25055,677],{"class":614},[609,25057,25058,25060,25062],{"class":611,"line":711},[609,25059,704],{"class":614},[609,25061,619],{"class":618},[609,25063,641],{"class":614},[609,25065,25066],{"class":611,"line":717},[609,25067,714],{"emptyLinePlaceholder":566},[609,25069,25070,25072,25074],{"class":611,"line":727},[609,25071,615],{"class":614},[609,25073,722],{"class":618},[609,25075,641],{"class":614},[609,25077,25078,25080,25082],{"class":611,"line":750},[609,25079,730],{"class":614},[609,25081,733],{"class":618},[609,25083,641],{"class":614},[609,25085,25086,25088,25090,25092,25094,25096,25098,25100,25102,25104,25106,25108,25110,25112,25114],{"class":611,"line":762},[609,25087,753],{"class":614},[609,25089,756],{"class":618},[609,25091,785],{"class":614},[609,25093,1463],{"class":622},[609,25095,629],{"class":614},[609,25097,632],{"class":614},[609,25099,1470],{"class":614},[609,25101,4164],{"class":795},[609,25103,1475],{"class":614},[609,25105,4164],{"class":795},[609,25107,1475],{"class":614},[609,25109,4164],{"class":795},[609,25111,1485],{"class":614},[609,25113,632],{"class":614},[609,25115,759],{"class":614},[609,25117,25118,25120],{"class":611,"line":772},[609,25119,753],{"class":614},[609,25121,25122],{"class":618},"CubicBezierLine\n",[609,25124,25125,25127,25129,25131,25133,25136,25138,25140,25142,25144,25146,25148,25150,25152],{"class":611,"line":777},[609,25126,5697],{"class":614},[609,25128,7777],{"class":622},[609,25130,629],{"class":614},[609,25132,632],{"class":614},[609,25134,25135],{"class":614},"new ",[609,25137,3176],{"class":2804},[609,25139,24243],{"class":614},[609,25141,1897],{"class":795},[609,25143,1475],{"class":614},[609,25145,941],{"class":795},[609,25147,1475],{"class":614},[609,25149,941],{"class":795},[609,25151,4129],{"class":614},[609,25153,2991],{"class":614},[609,25155,25156,25158,25160,25162,25164,25166,25168,25170,25172,25174,25176,25178,25180,25182],{"class":611,"line":803},[609,25157,5697],{"class":614},[609,25159,7791],{"class":622},[609,25161,629],{"class":614},[609,25163,632],{"class":614},[609,25165,25135],{"class":614},[609,25167,3176],{"class":2804},[609,25169,2974],{"class":614},[609,25171,1897],{"class":795},[609,25173,1475],{"class":614},[609,25175,941],{"class":795},[609,25177,1475],{"class":614},[609,25179,941],{"class":795},[609,25181,4129],{"class":614},[609,25183,2991],{"class":614},[609,25185,25186,25188,25191,25193,25195,25197,25199,25201,25203,25205,25207,25209,25211,25213],{"class":611,"line":603},[609,25187,5697],{"class":614},[609,25189,25190],{"class":622},"midA",[609,25192,629],{"class":614},[609,25194,632],{"class":614},[609,25196,25135],{"class":614},[609,25198,3176],{"class":2804},[609,25200,24243],{"class":614},[609,25202,1517],{"class":795},[609,25204,1475],{"class":614},[609,25206,1897],{"class":795},[609,25208,1475],{"class":614},[609,25210,941],{"class":795},[609,25212,4129],{"class":614},[609,25214,2991],{"class":614},[609,25216,25217,25219,25222,25224,25226,25228,25230,25232,25234,25236,25238,25240,25242,25244],{"class":611,"line":826},[609,25218,5697],{"class":614},[609,25220,25221],{"class":622},"midB",[609,25223,629],{"class":614},[609,25225,632],{"class":614},[609,25227,25135],{"class":614},[609,25229,3176],{"class":2804},[609,25231,2974],{"class":614},[609,25233,1517],{"class":795},[609,25235,1475],{"class":614},[609,25237,1897],{"class":795},[609,25239,1475],{"class":614},[609,25241,941],{"class":795},[609,25243,4129],{"class":614},[609,25245,2991],{"class":614},[609,25247,25248,25250,25252,25254,25256,25258],{"class":611,"line":837},[609,25249,5697],{"class":614},[609,25251,24299],{"class":622},[609,25253,629],{"class":614},[609,25255,632],{"class":614},[609,25257,4601],{"class":795},[609,25259,2991],{"class":614},[609,25261,25262,25264,25266,25268,25270],{"class":611,"line":848},[609,25263,24313],{"class":622},[609,25265,629],{"class":614},[609,25267,632],{"class":614},[609,25269,6742],{"class":635},[609,25271,2991],{"class":614},[609,25273,25274,25276,25278,25280,25282,25284],{"class":611,"line":858},[609,25275,5697],{"class":614},[609,25277,24329],{"class":622},[609,25279,629],{"class":614},[609,25281,632],{"class":614},[609,25283,4164],{"class":795},[609,25285,2991],{"class":614},[609,25287,25288],{"class":611,"line":604},[609,25289,11765],{"class":614},[609,25291,25292,25294,25296],{"class":611,"line":878},[609,25293,753],{"class":614},[609,25295,3522],{"class":618},[609,25297,759],{"class":614},[609,25299,25300,25302,25304],{"class":611,"line":888},[609,25301,881],{"class":614},[609,25303,733],{"class":618},[609,25305,641],{"class":614},[609,25307,25308,25310,25312],{"class":611,"line":2956},[609,25309,704],{"class":614},[609,25311,722],{"class":618},[609,25313,641],{"class":614},[476,25315,898],{"id":897},[586,25317,25318,25320,25321,25323,25324,1122],{},[590,25319,24969],{}," inherits all props but ",[590,25322,24231],{}," from ",[590,25325,24063],{},[903,25327,25328,25340],{},[906,25329,25330],{},[909,25331,25332,25334,25336,25338],{},[912,25333,914],{},[912,25335,11906],{},[912,25337,917],{},[912,25339,920],{},[922,25341,25342,25358,25373,25388,25403],{},[909,25343,25344,25348,25353,25356],{},[927,25345,25346],{},[590,25347,7777],{},[927,25349,25350],{},[590,25351,25352],{},"Vector3 | [number, number, number]",[927,25354,25355],{},"Starting point",[927,25357],{},[909,25359,25360,25364,25368,25371],{},[927,25361,25362],{},[590,25363,7791],{},[927,25365,25366],{},[590,25367,25352],{},[927,25369,25370],{},"Ending point",[927,25372],{},[909,25374,25375,25379,25383,25386],{},[927,25376,25377],{},[590,25378,25190],{},[927,25380,25381],{},[590,25382,25352],{},[927,25384,25385],{},"First control point",[927,25387],{},[909,25389,25390,25394,25398,25401],{},[927,25391,25392],{},[590,25393,25221],{},[927,25395,25396],{},[590,25397,25352],{},[927,25399,25400],{},"Second control point",[927,25402],{},[909,25404,25405,25409,25413,25415],{},[927,25406,25407],{},[590,25408,24299],{},[927,25410,25411],{},[590,25412,2541],{},[927,25414,24408],{},[927,25416,24411],{},[1303,25418,24599],{},{"title":548,"searchDepth":549,"depth":550,"links":25420},[25421,25422],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},"Renders a Line2 between start and end points with two control points.",{},{"title":213,"description":25423},"gORWQkfn3pEx_Pr7x_kzEjd_CQoTYM445mILoeX4qjQ",{"id":25428,"title":217,"body":25429,"description":25659,"extension":563,"links":564,"meta":25660,"navigation":566,"path":218,"seo":25661,"stem":219,"__hash__":25662},"docs/2.api/5.shapes/cylinder.md",{"type":473,"value":25430,"toc":25656},[25431,25436,25446,25452,25458,25460,25653],[580,25432,25433],{},[25434,25435],"shapes-cylinder",{},[586,25437,2257,25438,3279,25440,23863,25443,1122],{},[590,25439,2260],{},[590,25441,25442],{},"\u003CCylinder />",[590,25444,25445],{},"CylinderGeometry",[598,25447,25450],{"className":25448,"code":25449,"language":23872},[23870],"args: [\n  radiusTop: number,\n  radiusBottom: number,\n  height: number,\n  radialSegments: number,\n  heightSegments: number,\n  openEnded: boolean,\n  thetaStart: number,\n  thetaLength: number\n]\n",[590,25451,25449],{"__ignoreMap":548},[586,25453,23877,25454],{},[1116,25455,25445],{"href":25456,"rel":25457},"https://threejs.org/docs/?q=cylinder#api/en/geometries/CylinderGeometry",[1120],[476,25459,15],{"id":596},[598,25461,25463],{"className":600,"code":25462,"language":605,"meta":548,"style":548},"\u003CCylinder :args=\"[1, 1, 1, 32, 1, false, 0, Math.PI * 2]\" color=\"orange\" />\n\n// Cylinder with a custom material transformations\n\u003CCylinder ref=\"cylinderRef\" :args=\"[1, 1, 1, 32, 1, false, 0, Math.PI * 2]\" :position=\"[0, 4, 0]\">\n  \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/Cylinder>\n",[590,25464,25465,25537,25541,25546,25641,25645],{"__ignoreMap":548},[609,25466,25467,25469,25471,25473,25475,25477,25479,25481,25483,25485,25487,25489,25491,25493,25495,25497,25499,25501,25503,25505,25507,25509,25511,25513,25516,25518,25521,25523,25525,25527,25529,25531,25533,25535],{"class":611,"line":549},[609,25468,615],{"class":614},[609,25470,217],{"class":618},[609,25472,785],{"class":614},[609,25474,1993],{"class":622},[609,25476,629],{"class":614},[609,25478,632],{"class":614},[609,25480,1470],{"class":655},[609,25482,1897],{"class":795},[609,25484,659],{"class":614},[609,25486,23911],{"class":795},[609,25488,659],{"class":614},[609,25490,23911],{"class":795},[609,25492,659],{"class":614},[609,25494,24668],{"class":795},[609,25496,659],{"class":614},[609,25498,23911],{"class":795},[609,25500,659],{"class":614},[609,25502,16554],{"class":3874},[609,25504,659],{"class":614},[609,25506,12722],{"class":795},[609,25508,659],{"class":614},[609,25510,8515],{"class":655},[609,25512,1122],{"class":614},[609,25514,25515],{"class":655},"PI ",[609,25517,8546],{"class":614},[609,25519,25520],{"class":795}," 2",[609,25522,1485],{"class":655},[609,25524,632],{"class":614},[609,25526,3982],{"class":622},[609,25528,629],{"class":614},[609,25530,632],{"class":614},[609,25532,6742],{"class":635},[609,25534,632],{"class":614},[609,25536,759],{"class":614},[609,25538,25539],{"class":611,"line":550},[609,25540,714],{"emptyLinePlaceholder":566},[609,25542,25543],{"class":611,"line":680},[609,25544,25545],{"class":655},"// Cylinder with a custom material transformations\n",[609,25547,25548,25550,25552,25554,25556,25558,25561,25563,25565,25567,25569,25571,25573,25575,25577,25579,25581,25583,25585,25587,25589,25591,25593,25595,25597,25599,25601,25603,25605,25607,25609,25611,25613,25615,25617,25619,25621,25623,25625,25627,25629,25631,25633,25635,25637,25639],{"class":611,"line":701},[609,25549,615],{"class":614},[609,25551,217],{"class":618},[609,25553,5435],{"class":622},[609,25555,629],{"class":614},[609,25557,632],{"class":614},[609,25559,25560],{"class":635},"cylinderRef",[609,25562,632],{"class":614},[609,25564,785],{"class":614},[609,25566,1993],{"class":622},[609,25568,629],{"class":614},[609,25570,632],{"class":614},[609,25572,1470],{"class":655},[609,25574,1897],{"class":795},[609,25576,659],{"class":614},[609,25578,23911],{"class":795},[609,25580,659],{"class":614},[609,25582,23911],{"class":795},[609,25584,659],{"class":614},[609,25586,24668],{"class":795},[609,25588,659],{"class":614},[609,25590,23911],{"class":795},[609,25592,659],{"class":614},[609,25594,16554],{"class":3874},[609,25596,659],{"class":614},[609,25598,12722],{"class":795},[609,25600,659],{"class":614},[609,25602,8515],{"class":655},[609,25604,1122],{"class":614},[609,25606,25515],{"class":655},[609,25608,8546],{"class":614},[609,25610,25520],{"class":795},[609,25612,1485],{"class":655},[609,25614,632],{"class":614},[609,25616,785],{"class":614},[609,25618,1463],{"class":622},[609,25620,629],{"class":614},[609,25622,632],{"class":614},[609,25624,1470],{"class":655},[609,25626,941],{"class":795},[609,25628,659],{"class":614},[609,25630,23997],{"class":795},[609,25632,659],{"class":614},[609,25634,12722],{"class":795},[609,25636,1485],{"class":655},[609,25638,632],{"class":614},[609,25640,641],{"class":614},[609,25642,25643],{"class":611,"line":711},[609,25644,24012],{"class":655},[609,25646,25647,25649,25651],{"class":611,"line":717},[609,25648,704],{"class":614},[609,25650,217],{"class":618},[609,25652,641],{"class":614},[1303,25654,25655],{},"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 .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 pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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":548,"searchDepth":549,"depth":550,"links":25657},[25658],{"id":596,"depth":550,"text":15},"Short-cut for a CylinderGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":217,"description":25659},"YTuULikIuPOFc-aN9KEgAYGN8T0QxNG4817fqzStsM0",{"id":25664,"title":221,"body":25665,"description":25828,"extension":563,"links":564,"meta":25829,"navigation":566,"path":222,"seo":25830,"stem":223,"__hash__":25831},"docs/2.api/5.shapes/dodecahedron.md",{"type":473,"value":25666,"toc":25825},[25667,25672,25682,25688,25694,25696,25823],[580,25668,25669],{},[25670,25671],"shapes-dodecahedron",{},[586,25673,2257,25674,3279,25676,23863,25679,1122],{},[590,25675,2260],{},[590,25677,25678],{},"\u003CDodecahedron />",[590,25680,25681],{},"DodecahedronGeometry",[598,25683,25686],{"className":25684,"code":25685,"language":23872},[23870],"args: [radius: number, detail: number]\n",[590,25687,25685],{"__ignoreMap":548},[586,25689,23877,25690],{},[1116,25691,25681],{"href":25692,"rel":25693},"https://threejs.org/docs/?q=dode#api/en/geometries/DodecahedronGeometry",[1120],[476,25695,15],{"id":596},[598,25697,25699],{"className":600,"code":25698,"language":605,"meta":548,"style":548},"\u003CDodecahedron :args=\"[1, 0]\" color=\"orange\" />\n\n// Dodecahedron with a custom material transformations\n\u003CDodecahedron ref=\"dodecahedronRef\" :args=\"[1, 0]\" :position=\"[2, 4, 0]\">\n  \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/Dodecahedron>\n",[590,25700,25701,25739,25743,25748,25811,25815],{"__ignoreMap":548},[609,25702,25703,25705,25707,25709,25711,25713,25715,25717,25719,25721,25723,25725,25727,25729,25731,25733,25735,25737],{"class":611,"line":549},[609,25704,615],{"class":614},[609,25706,221],{"class":618},[609,25708,785],{"class":614},[609,25710,1993],{"class":622},[609,25712,629],{"class":614},[609,25714,632],{"class":614},[609,25716,1470],{"class":655},[609,25718,1897],{"class":795},[609,25720,659],{"class":614},[609,25722,12722],{"class":795},[609,25724,1485],{"class":655},[609,25726,632],{"class":614},[609,25728,3982],{"class":622},[609,25730,629],{"class":614},[609,25732,632],{"class":614},[609,25734,6742],{"class":635},[609,25736,632],{"class":614},[609,25738,759],{"class":614},[609,25740,25741],{"class":611,"line":550},[609,25742,714],{"emptyLinePlaceholder":566},[609,25744,25745],{"class":611,"line":680},[609,25746,25747],{"class":655},"// Dodecahedron with a custom material transformations\n",[609,25749,25750,25752,25754,25756,25758,25760,25763,25765,25767,25769,25771,25773,25775,25777,25779,25781,25783,25785,25787,25789,25791,25793,25795,25797,25799,25801,25803,25805,25807,25809],{"class":611,"line":701},[609,25751,615],{"class":614},[609,25753,221],{"class":618},[609,25755,5435],{"class":622},[609,25757,629],{"class":614},[609,25759,632],{"class":614},[609,25761,25762],{"class":635},"dodecahedronRef",[609,25764,632],{"class":614},[609,25766,785],{"class":614},[609,25768,1993],{"class":622},[609,25770,629],{"class":614},[609,25772,632],{"class":614},[609,25774,1470],{"class":655},[609,25776,1897],{"class":795},[609,25778,659],{"class":614},[609,25780,12722],{"class":795},[609,25782,1485],{"class":655},[609,25784,632],{"class":614},[609,25786,785],{"class":614},[609,25788,1463],{"class":622},[609,25790,629],{"class":614},[609,25792,632],{"class":614},[609,25794,1470],{"class":655},[609,25796,796],{"class":795},[609,25798,659],{"class":614},[609,25800,23997],{"class":795},[609,25802,659],{"class":614},[609,25804,12722],{"class":795},[609,25806,1485],{"class":655},[609,25808,632],{"class":614},[609,25810,641],{"class":614},[609,25812,25813],{"class":611,"line":711},[609,25814,24012],{"class":655},[609,25816,25817,25819,25821],{"class":611,"line":717},[609,25818,704],{"class":614},[609,25820,221],{"class":618},[609,25822,641],{"class":614},[1303,25824,24023],{},{"title":548,"searchDepth":549,"depth":550,"links":25826},[25827],{"id":596,"depth":550,"text":15},"Short-cut for a DodecahedronGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":221,"description":25828},"9Gw9CLOluoUzozbppxnr0DGwqvfyqgSPCC05IqHhr00",{"id":25833,"title":225,"body":25834,"description":26411,"extension":563,"links":564,"meta":26412,"navigation":566,"path":226,"seo":26413,"stem":227,"__hash__":26414},"docs/2.api/5.shapes/grid.md",{"type":473,"value":25835,"toc":26407},[25836,25841,25847,25849,26220,26222,26404],[580,25837,25838],{},[25839,25840],"shapes-grid",{},[586,25842,25843,25846],{},[590,25844,25845],{},"\u003CGrid />"," creates a shader-based grid plane. It has customizable grid cell and section lines, as well as fade out.",[476,25848,15],{"id":596},[598,25850,25853],{"className":600,"code":25851,"highlights":25852,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { Grid, OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#222222\">\n    \u003CTresPerspectiveCamera :position=\"[8, 10, 10]\" :fov=\"25\" />\n    \u003COrbitControls />\n    \u003CGrid\n      :args=\"[10.5, 10.5]\"\n      cell-color=\"#82dbc5\"\n      :cell-size=\"0.6\"\n      :cell-thickness=\"0.5\"\n      section-color=\"#fbb03b\"\n      :section-size=\"2\"\n      :section-thickness=\"1.3\"\n      :infinite-grid=\"true\"\n      :fade-from=\"0\"\n      :fade-distance=\"12\"\n      :fade-strength=\"1\"\n    />\n  \u003C/TresCanvas>\n\u003C/template>\n",[550,772,777,803,603,826,837,848,858,604,878,888,2956],[590,25854,25855,25875,25899,25917,25925,25929,25937,25956,26002,26010,26018,26042,26056,26072,26088,26102,26118,26135,26151,26167,26184,26200,26204,26212],{"__ignoreMap":548},[609,25856,25857,25859,25861,25863,25865,25867,25869,25871,25873],{"class":611,"line":549},[609,25858,615],{"class":614},[609,25860,619],{"class":618},[609,25862,623],{"class":622},[609,25864,626],{"class":622},[609,25866,629],{"class":614},[609,25868,632],{"class":614},[609,25870,636],{"class":635},[609,25872,632],{"class":614},[609,25874,641],{"class":614},[609,25876,25878,25880,25882,25885,25887,25889,25891,25893,25895,25897],{"class":25877,"line":550},[611,645],[609,25879,649],{"class":648},[609,25881,652],{"class":614},[609,25883,25884],{"class":655}," Grid",[609,25886,659],{"class":614},[609,25888,662],{"class":655},[609,25890,665],{"class":614},[609,25892,668],{"class":648},[609,25894,671],{"class":614},[609,25896,674],{"class":635},[609,25898,677],{"class":614},[609,25900,25901,25903,25905,25907,25909,25911,25913,25915],{"class":611,"line":680},[609,25902,649],{"class":648},[609,25904,652],{"class":614},[609,25906,687],{"class":655},[609,25908,665],{"class":614},[609,25910,668],{"class":648},[609,25912,671],{"class":614},[609,25914,696],{"class":635},[609,25916,677],{"class":614},[609,25918,25919,25921,25923],{"class":611,"line":701},[609,25920,704],{"class":614},[609,25922,619],{"class":618},[609,25924,641],{"class":614},[609,25926,25927],{"class":611,"line":711},[609,25928,714],{"emptyLinePlaceholder":566},[609,25930,25931,25933,25935],{"class":611,"line":717},[609,25932,615],{"class":614},[609,25934,722],{"class":618},[609,25936,641],{"class":614},[609,25938,25939,25941,25943,25945,25947,25949,25952,25954],{"class":611,"line":727},[609,25940,730],{"class":614},[609,25942,733],{"class":618},[609,25944,736],{"class":622},[609,25946,629],{"class":614},[609,25948,632],{"class":614},[609,25950,25951],{"class":635},"#222222",[609,25953,632],{"class":614},[609,25955,641],{"class":614},[609,25957,25958,25960,25962,25964,25966,25968,25970,25972,25974,25976,25978,25980,25982,25984,25986,25988,25991,25993,25995,25998,26000],{"class":611,"line":750},[609,25959,753],{"class":614},[609,25961,756],{"class":618},[609,25963,785],{"class":614},[609,25965,1463],{"class":622},[609,25967,629],{"class":614},[609,25969,632],{"class":614},[609,25971,1470],{"class":614},[609,25973,16009],{"class":795},[609,25975,1475],{"class":614},[609,25977,1482],{"class":795},[609,25979,1475],{"class":614},[609,25981,1482],{"class":795},[609,25983,1485],{"class":614},[609,25985,632],{"class":614},[609,25987,785],{"class":614},[609,25989,25990],{"class":622},"fov",[609,25992,629],{"class":614},[609,25994,632],{"class":614},[609,25996,25997],{"class":795},"25",[609,25999,632],{"class":614},[609,26001,759],{"class":614},[609,26003,26004,26006,26008],{"class":611,"line":762},[609,26005,753],{"class":614},[609,26007,767],{"class":618},[609,26009,759],{"class":614},[609,26011,26013,26015],{"class":26012,"line":772},[611,645],[609,26014,753],{"class":614},[609,26016,26017],{"class":618},"Grid\n",[609,26019,26021,26023,26025,26027,26029,26031,26034,26036,26038,26040],{"class":26020,"line":777},[611,645],[609,26022,5697],{"class":614},[609,26024,1993],{"class":622},[609,26026,629],{"class":614},[609,26028,632],{"class":614},[609,26030,1470],{"class":614},[609,26032,26033],{"class":795},"10.5",[609,26035,1475],{"class":614},[609,26037,26033],{"class":795},[609,26039,1485],{"class":614},[609,26041,2991],{"class":614},[609,26043,26045,26048,26050,26052,26054],{"class":26044,"line":803},[611,645],[609,26046,26047],{"class":622},"      cell-color",[609,26049,629],{"class":614},[609,26051,632],{"class":614},[609,26053,4700],{"class":635},[609,26055,2991],{"class":614},[609,26057,26059,26061,26064,26066,26068,26070],{"class":26058,"line":603},[611,645],[609,26060,5697],{"class":614},[609,26062,26063],{"class":622},"cell-size",[609,26065,629],{"class":614},[609,26067,632],{"class":614},[609,26069,23717],{"class":795},[609,26071,2991],{"class":614},[609,26073,26075,26077,26080,26082,26084,26086],{"class":26074,"line":826},[611,645],[609,26076,5697],{"class":614},[609,26078,26079],{"class":622},"cell-thickness",[609,26081,629],{"class":614},[609,26083,632],{"class":614},[609,26085,1517],{"class":795},[609,26087,2991],{"class":614},[609,26089,26091,26094,26096,26098,26100],{"class":26090,"line":837},[611,645],[609,26092,26093],{"class":622},"      section-color",[609,26095,629],{"class":614},[609,26097,632],{"class":614},[609,26099,4049],{"class":635},[609,26101,2991],{"class":614},[609,26103,26105,26107,26110,26112,26114,26116],{"class":26104,"line":848},[611,645],[609,26106,5697],{"class":614},[609,26108,26109],{"class":622},"section-size",[609,26111,629],{"class":614},[609,26113,632],{"class":614},[609,26115,796],{"class":795},[609,26117,2991],{"class":614},[609,26119,26121,26123,26126,26128,26130,26133],{"class":26120,"line":858},[611,645],[609,26122,5697],{"class":614},[609,26124,26125],{"class":622},"section-thickness",[609,26127,629],{"class":614},[609,26129,632],{"class":614},[609,26131,26132],{"class":795},"1.3",[609,26134,2991],{"class":614},[609,26136,26138,26140,26143,26145,26147,26149],{"class":26137,"line":604},[611,645],[609,26139,5697],{"class":614},[609,26141,26142],{"class":622},"infinite-grid",[609,26144,629],{"class":614},[609,26146,632],{"class":614},[609,26148,937],{"class":3874},[609,26150,2991],{"class":614},[609,26152,26154,26156,26159,26161,26163,26165],{"class":26153,"line":878},[611,645],[609,26155,5697],{"class":614},[609,26157,26158],{"class":622},"fade-from",[609,26160,629],{"class":614},[609,26162,632],{"class":614},[609,26164,941],{"class":795},[609,26166,2991],{"class":614},[609,26168,26170,26172,26175,26177,26179,26182],{"class":26169,"line":888},[611,645],[609,26171,5697],{"class":614},[609,26173,26174],{"class":622},"fade-distance",[609,26176,629],{"class":614},[609,26178,632],{"class":614},[609,26180,26181],{"class":795},"12",[609,26183,2991],{"class":614},[609,26185,26187,26189,26192,26194,26196,26198],{"class":26186,"line":2956},[611,645],[609,26188,5697],{"class":614},[609,26190,26191],{"class":622},"fade-strength",[609,26193,629],{"class":614},[609,26195,632],{"class":614},[609,26197,1897],{"class":795},[609,26199,2991],{"class":614},[609,26201,26202],{"class":611,"line":2964},[609,26203,11765],{"class":614},[609,26205,26206,26208,26210],{"class":611,"line":2994},[609,26207,881],{"class":614},[609,26209,733],{"class":618},[609,26211,641],{"class":614},[609,26213,26214,26216,26218],{"class":611,"line":3011},[609,26215,704],{"class":614},[609,26217,722],{"class":618},[609,26219,641],{"class":614},[476,26221,898],{"id":897},[903,26223,26224,26234],{},[906,26225,26226],{},[909,26227,26228,26230,26232],{},[912,26229,914],{"align":973},[912,26231,917],{"align":973},[912,26233,920],{},[922,26235,26236,26250,26264,26278,26292,26306,26320,26334,26348,26362,26376,26390],{},[909,26237,26238,26243,26246],{},[927,26239,26240],{"align":973},[1677,26241,26242],{},"cellSize",[927,26244,26245],{"align":973},"Cell size",[927,26247,26248],{},[590,26249,1517],{},[909,26251,26252,26257,26260],{},[927,26253,26254],{"align":973},[1677,26255,26256],{},"cellThickness",[927,26258,26259],{"align":973},"Thickness of cell lines",[927,26261,26262],{},[590,26263,1517],{},[909,26265,26266,26271,26274],{},[927,26267,26268],{"align":973},[1677,26269,26270],{},"cellColor",[927,26272,26273],{"align":973},"Color of cell lines",[927,26275,26276],{},[590,26277,4848],{},[909,26279,26280,26285,26288],{},[927,26281,26282],{"align":973},[1677,26283,26284],{},"sectionSize",[927,26286,26287],{"align":973},"Section size",[927,26289,26290],{},[590,26291,1897],{},[909,26293,26294,26299,26302],{},[927,26295,26296],{"align":973},[1677,26297,26298],{},"sectionThickness",[927,26300,26301],{"align":973},"Thickness of section lines",[927,26303,26304],{},[590,26305,1897],{},[909,26307,26308,26313,26315],{},[927,26309,26310],{"align":973},[1677,26311,26312],{},"sectionColor",[927,26314,26273],{"align":973},[927,26316,26317],{},[590,26318,26319],{},"'blue'",[909,26321,26322,26327,26330],{},[927,26323,26324],{"align":973},[1677,26325,26326],{},"followCamera",[927,26328,26329],{"align":973},"Whether to follow camera",[927,26331,26332],{},[590,26333,947],{},[909,26335,26336,26341,26344],{},[927,26337,26338],{"align":973},[1677,26339,26340],{},"infiniteGrid",[927,26342,26343],{"align":973},"Whether to display an infinite grid",[927,26345,26346],{},[590,26347,947],{},[909,26349,26350,26355,26358],{},[927,26351,26352],{"align":973},[1677,26353,26354],{},"fadeDistance",[927,26356,26357],{"align":973},"Fade distance",[927,26359,26360],{},[590,26361,6032],{},[909,26363,26364,26369,26372],{},[927,26365,26366],{"align":973},[1677,26367,26368],{},"fadeStrength",[927,26370,26371],{"align":973},"Fade strength",[927,26373,26374],{},[590,26375,1897],{},[909,26377,26378,26383,26386],{},[927,26379,26380],{"align":973},[1677,26381,26382],{},"fadeFrom",[927,26384,26385],{"align":973},"Fade from camera (1) or origin (0) or in between",[927,26387,26388],{},[590,26389,1897],{},[909,26391,26392,26396,26399],{},[927,26393,26394],{"align":973},[1677,26395,20919],{},[927,26397,26398],{"align":973},"Material side",[927,26400,26401],{},[590,26402,26403],{},"THREE.BackSide",[1303,26405,26406],{},"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 pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":548,"searchDepth":549,"depth":550,"links":26408},[26409,26410],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},"Shader-based grid plane with customizable cell and section lines.",{},{"title":225,"description":26411},"v8vI4rVYVnvvadMij1GMf3y8EqHb2jEVQK1i_UillkQ",{"id":26416,"title":229,"body":26417,"description":26579,"extension":563,"links":564,"meta":26580,"navigation":566,"path":230,"seo":26581,"stem":231,"__hash__":26582},"docs/2.api/5.shapes/icosahedron.md",{"type":473,"value":26418,"toc":26576},[26419,26424,26434,26439,26445,26447,26574],[580,26420,26421],{},[26422,26423],"shapes-icosahedron",{},[586,26425,2257,26426,3279,26428,23863,26431,1122],{},[590,26427,2260],{},[590,26429,26430],{},"\u003CIcosahedron />",[590,26432,26433],{},"IcosahedronGeometry",[598,26435,26437],{"className":26436,"code":25685,"language":23872},[23870],[590,26438,25685],{"__ignoreMap":548},[586,26440,23877,26441],{},[1116,26442,26433],{"href":26443,"rel":26444},"https://threejs.org/docs/?q=ico#api/en/geometries/IcosahedronGeometry",[1120],[476,26446,15],{"id":596},[598,26448,26450],{"className":600,"code":26449,"language":605,"meta":548,"style":548},"\u003CIcosahedron :args=\"[1, 0]\" color=\"orange\" />\n\n// Icosahedron with a custom material transformations\n\u003CIcosahedron ref=\"icosahedronRef\" :args=\"[1, 0]\" :position=\"[2, 4, 0]\">\n  \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/Icosahedron>\n",[590,26451,26452,26490,26494,26499,26562,26566],{"__ignoreMap":548},[609,26453,26454,26456,26458,26460,26462,26464,26466,26468,26470,26472,26474,26476,26478,26480,26482,26484,26486,26488],{"class":611,"line":549},[609,26455,615],{"class":614},[609,26457,229],{"class":618},[609,26459,785],{"class":614},[609,26461,1993],{"class":622},[609,26463,629],{"class":614},[609,26465,632],{"class":614},[609,26467,1470],{"class":655},[609,26469,1897],{"class":795},[609,26471,659],{"class":614},[609,26473,12722],{"class":795},[609,26475,1485],{"class":655},[609,26477,632],{"class":614},[609,26479,3982],{"class":622},[609,26481,629],{"class":614},[609,26483,632],{"class":614},[609,26485,6742],{"class":635},[609,26487,632],{"class":614},[609,26489,759],{"class":614},[609,26491,26492],{"class":611,"line":550},[609,26493,714],{"emptyLinePlaceholder":566},[609,26495,26496],{"class":611,"line":680},[609,26497,26498],{"class":655},"// Icosahedron with a custom material transformations\n",[609,26500,26501,26503,26505,26507,26509,26511,26514,26516,26518,26520,26522,26524,26526,26528,26530,26532,26534,26536,26538,26540,26542,26544,26546,26548,26550,26552,26554,26556,26558,26560],{"class":611,"line":701},[609,26502,615],{"class":614},[609,26504,229],{"class":618},[609,26506,5435],{"class":622},[609,26508,629],{"class":614},[609,26510,632],{"class":614},[609,26512,26513],{"class":635},"icosahedronRef",[609,26515,632],{"class":614},[609,26517,785],{"class":614},[609,26519,1993],{"class":622},[609,26521,629],{"class":614},[609,26523,632],{"class":614},[609,26525,1470],{"class":655},[609,26527,1897],{"class":795},[609,26529,659],{"class":614},[609,26531,12722],{"class":795},[609,26533,1485],{"class":655},[609,26535,632],{"class":614},[609,26537,785],{"class":614},[609,26539,1463],{"class":622},[609,26541,629],{"class":614},[609,26543,632],{"class":614},[609,26545,1470],{"class":655},[609,26547,796],{"class":795},[609,26549,659],{"class":614},[609,26551,23997],{"class":795},[609,26553,659],{"class":614},[609,26555,12722],{"class":795},[609,26557,1485],{"class":655},[609,26559,632],{"class":614},[609,26561,641],{"class":614},[609,26563,26564],{"class":611,"line":711},[609,26565,24012],{"class":655},[609,26567,26568,26570,26572],{"class":611,"line":717},[609,26569,704],{"class":614},[609,26571,229],{"class":618},[609,26573,641],{"class":614},[1303,26575,24023],{},{"title":548,"searchDepth":549,"depth":550,"links":26577},[26578],{"id":596,"depth":550,"text":15},"Short-cut for a IcosahedronGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":229,"description":26579},"8yFEbasoREduB_hHH4IqpVmHiF3zCgvuXNtzkba_4Jg",{"id":26584,"title":233,"body":26585,"description":27243,"extension":563,"links":564,"meta":27244,"navigation":566,"path":234,"seo":27245,"stem":235,"__hash__":27246},"docs/2.api/5.shapes/line2.md",{"type":473,"value":26586,"toc":27237},[26587,26592,26605,26607,26862,26864,27015,27018,27021,27026,27033,27095,27100,27231,27234],[2562,26588,26589],{},[26590,26591],"shapes-line2",{},[586,26593,2257,26594,3279,26596,26598,26599,1122],{},[590,26595,2260],{},[590,26597,24063],{}," component for creating 3-D lines. It wraps ",[1116,26600,24057,26603],{"href":26601,"rel":26602},"https://github.com/mrdoob/three.js/blob/e2bcdfff6427c2f106cb819b18d88d1e13aa508a/examples/jsm/lines/Line2.js",[1120],[590,26604,233],{},[476,26606,15],{"id":596},[598,26608,26611],{"className":600,"code":26609,"highlights":26610,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Line2 } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n    \u003CLine2\n      :points=\"[[0, 0, 0], [1, 1, 0], [1, 1, 1], [0, 0, 1]]\"\n      color=\"orange\"\n      :line-width=\"3\"\n    />\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[680,750,762,772,777,803],[590,26612,26613,26633,26651,26671,26679,26683,26691,26699,26732,26740,26806,26819,26834,26838,26846,26854],{"__ignoreMap":548},[609,26614,26615,26617,26619,26621,26623,26625,26627,26629,26631],{"class":611,"line":549},[609,26616,615],{"class":614},[609,26618,619],{"class":618},[609,26620,623],{"class":622},[609,26622,626],{"class":622},[609,26624,629],{"class":614},[609,26626,632],{"class":614},[609,26628,636],{"class":635},[609,26630,632],{"class":614},[609,26632,641],{"class":614},[609,26634,26635,26637,26639,26641,26643,26645,26647,26649],{"class":611,"line":550},[609,26636,649],{"class":648},[609,26638,652],{"class":614},[609,26640,687],{"class":655},[609,26642,665],{"class":614},[609,26644,668],{"class":648},[609,26646,671],{"class":614},[609,26648,696],{"class":635},[609,26650,677],{"class":614},[609,26652,26654,26656,26658,26661,26663,26665,26667,26669],{"class":26653,"line":680},[611,645],[609,26655,649],{"class":648},[609,26657,652],{"class":614},[609,26659,26660],{"class":655}," Line2",[609,26662,665],{"class":614},[609,26664,668],{"class":648},[609,26666,671],{"class":614},[609,26668,674],{"class":635},[609,26670,677],{"class":614},[609,26672,26673,26675,26677],{"class":611,"line":701},[609,26674,704],{"class":614},[609,26676,619],{"class":618},[609,26678,641],{"class":614},[609,26680,26681],{"class":611,"line":711},[609,26682,714],{"emptyLinePlaceholder":566},[609,26684,26685,26687,26689],{"class":611,"line":717},[609,26686,615],{"class":614},[609,26688,722],{"class":618},[609,26690,641],{"class":614},[609,26692,26693,26695,26697],{"class":611,"line":727},[609,26694,730],{"class":614},[609,26696,733],{"class":618},[609,26698,641],{"class":614},[609,26700,26702,26704,26706,26708,26710,26712,26714,26716,26718,26720,26722,26724,26726,26728,26730],{"class":26701,"line":750},[611,645],[609,26703,753],{"class":614},[609,26705,756],{"class":618},[609,26707,785],{"class":614},[609,26709,1463],{"class":622},[609,26711,629],{"class":614},[609,26713,632],{"class":614},[609,26715,1470],{"class":614},[609,26717,4164],{"class":795},[609,26719,1475],{"class":614},[609,26721,4164],{"class":795},[609,26723,1475],{"class":614},[609,26725,4164],{"class":795},[609,26727,1485],{"class":614},[609,26729,632],{"class":614},[609,26731,759],{"class":614},[609,26733,26735,26737],{"class":26734,"line":762},[611,645],[609,26736,753],{"class":614},[609,26738,26739],{"class":618},"Line2\n",[609,26741,26743,26745,26747,26749,26751,26754,26756,26758,26760,26762,26764,26767,26769,26771,26773,26775,26777,26779,26781,26783,26785,26787,26789,26791,26793,26795,26797,26799,26801,26804],{"class":26742,"line":772},[611,645],[609,26744,5697],{"class":614},[609,26746,24231],{"class":622},[609,26748,629],{"class":614},[609,26750,632],{"class":614},[609,26752,26753],{"class":614},"[[",[609,26755,941],{"class":795},[609,26757,1475],{"class":614},[609,26759,941],{"class":795},[609,26761,1475],{"class":614},[609,26763,941],{"class":795},[609,26765,26766],{"class":614},"], [",[609,26768,1897],{"class":795},[609,26770,1475],{"class":614},[609,26772,1897],{"class":795},[609,26774,1475],{"class":614},[609,26776,941],{"class":795},[609,26778,26766],{"class":614},[609,26780,1897],{"class":795},[609,26782,1475],{"class":614},[609,26784,1897],{"class":795},[609,26786,1475],{"class":614},[609,26788,1897],{"class":795},[609,26790,26766],{"class":614},[609,26792,941],{"class":795},[609,26794,1475],{"class":614},[609,26796,941],{"class":795},[609,26798,1475],{"class":614},[609,26800,1897],{"class":795},[609,26802,26803],{"class":614},"]]",[609,26805,2991],{"class":614},[609,26807,26809,26811,26813,26815,26817],{"class":26808,"line":777},[611,645],[609,26810,24313],{"class":622},[609,26812,629],{"class":614},[609,26814,632],{"class":614},[609,26816,6742],{"class":635},[609,26818,2991],{"class":614},[609,26820,26822,26824,26826,26828,26830,26832],{"class":26821,"line":803},[611,645],[609,26823,5697],{"class":614},[609,26825,24329],{"class":622},[609,26827,629],{"class":614},[609,26829,632],{"class":614},[609,26831,4164],{"class":795},[609,26833,2991],{"class":614},[609,26835,26836],{"class":611,"line":603},[609,26837,11765],{"class":614},[609,26839,26840,26842,26844],{"class":611,"line":826},[609,26841,753],{"class":614},[609,26843,3522],{"class":618},[609,26845,759],{"class":614},[609,26847,26848,26850,26852],{"class":611,"line":837},[609,26849,881],{"class":614},[609,26851,733],{"class":618},[609,26853,641],{"class":614},[609,26855,26856,26858,26860],{"class":611,"line":848},[609,26857,704],{"class":614},[609,26859,722],{"class":618},[609,26861,641],{"class":614},[476,26863,898],{"id":897},[903,26865,26866,26878],{},[906,26867,26868],{},[909,26869,26870,26872,26874,26876],{},[912,26871,914],{},[912,26873,11906],{},[912,26875,917],{},[912,26877,920],{},[922,26879,26880,26895,26907,26919,26931,26943,26955,26967,26979,26991,27003],{},[909,26881,26882,26884,26890,26893],{},[927,26883,24231],{},[927,26885,26886],{},[1116,26887,26889],{"href":26888},"#points","See below",[927,26891,26892],{},"Points representing the line",[927,26894],{},[909,26896,26897,26899,26903,26905],{},[927,26898,24460],{},[927,26900,26901],{},[590,26902,24465],{},[927,26904,24468],{},[927,26906,3156],{},[909,26908,26909,26911,26915,26917],{},[927,26910,2504],{},[927,26912,26913],{},[590,26914,2519],{},[927,26916,24481],{},[927,26918,24484],{},[909,26920,26921,26923,26927,26929],{},[927,26922,24489],{},[927,26924,26925],{},[590,26926,2541],{},[927,26928,24496],{},[927,26930,1897],{},[909,26932,26933,26935,26939,26941],{},[927,26934,24503],{},[927,26936,26937],{},[590,26938,11963],{},[927,26940,24510],{},[927,26942,947],{},[909,26944,26945,26947,26951,26953],{},[927,26946,24517],{},[927,26948,26949],{},[590,26950,11963],{},[927,26952,24524],{},[927,26954,947],{},[909,26956,26957,26959,26963,26965],{},[927,26958,24531],{},[927,26960,26961],{},[590,26962,11963],{},[927,26964,24538],{},[927,26966,947],{},[909,26968,26969,26971,26975,26977],{},[927,26970,24545],{},[927,26972,26973],{},[590,26974,2541],{},[927,26976,24552],{},[927,26978,1897],{},[909,26980,26981,26983,26987,26989],{},[927,26982,24559],{},[927,26984,26985],{},[590,26986,2541],{},[927,26988,24566],{},[927,26990,1897],{},[909,26992,26993,26995,26999,27001],{},[927,26994,24573],{},[927,26996,26997],{},[590,26998,2541],{},[927,27000,24580],{},[927,27002,1897],{},[909,27004,27005,27007,27011,27013],{},[927,27006,24587],{},[927,27008,27009],{},[590,27010,2541],{},[927,27012,24594],{},[927,27014,941],{},[7477,27016,27017],{"id":24231},"Points",[586,27019,27020],{},"The points prop has the following type:",[586,27022,27023],{},[590,27024,27025],{},"Array\u003CVector3 | Vector2 | [number, number, number] | [number, number] | number>",[586,27027,27028,27029,27032],{},"The passed array is converted to ",[590,27030,27031],{},"Array\u003Cnumber>"," – i.e., a series of x, y, z vertex coordinates. This is done array entry by array entry, as follows:",[903,27034,27035,27045],{},[906,27036,27037],{},[909,27038,27039,27042],{},[912,27040,27041],{},"Entry type",[912,27043,27044],{},"Interpretation",[922,27046,27047,27056,27068,27077,27086],{},[909,27048,27049,27053],{},[927,27050,27051],{},[590,27052,3176],{},[927,27054,27055],{},"Insert the vector's x, y, z into the result array",[909,27057,27058,27065],{},[927,27059,27060],{},[27061,27062,27063],"nobr",{},[590,27064,3173],{},[927,27066,27067],{},"Insert the array values into the result array",[909,27069,27070,27074],{},[927,27071,27072],{},[590,27073,20885],{},[927,27075,27076],{},"Insert the vector's x, y, then 0 into the result array",[909,27078,27079,27083],{},[927,27080,27081],{},[590,27082,23074],{},[927,27084,27085],{},"Insert the array values, then 0 into the result array",[909,27087,27088,27092],{},[927,27089,27090],{},[590,27091,2541],{},[927,27093,27094],{},"Insert the number into the result array",[3729,27096,27097],{},[586,27098,27099],{},"If you pass bare numbers in the points array, ensure that you pass triplets – groups of three numbers. Otherwise, you'll corrupt the coordinates that follow.",[598,27101,27103],{"className":600,"code":27102,"language":605,"meta":548,"style":548},"\u003C!-- Wrong -->\n\u003CLine2 :points=\"[[1,1], 2, 2, [3,3]]\" />\n\u003C!-- result: (1,1,0) (2,2,3) (3,0,❌) -->\n\n\u003C!-- Right -->\n\u003CLine2 :points=\"[[1, 1], 2, 2, 0, [3, 3]]\" />\n\u003C!-- result: (1,1,0) (2,2,0) (3,3,0) -->\n",[590,27104,27105,27110,27159,27164,27168,27173,27226],{"__ignoreMap":548},[609,27106,27107],{"class":611,"line":549},[609,27108,27109],{"class":1185},"\u003C!-- Wrong -->\n",[609,27111,27112,27114,27116,27118,27120,27122,27124,27126,27128,27130,27132,27134,27136,27138,27140,27142,27144,27147,27149,27151,27153,27155,27157],{"class":611,"line":550},[609,27113,615],{"class":614},[609,27115,233],{"class":618},[609,27117,785],{"class":614},[609,27119,24231],{"class":622},[609,27121,629],{"class":614},[609,27123,632],{"class":614},[609,27125,26753],{"class":655},[609,27127,1897],{"class":795},[609,27129,659],{"class":614},[609,27131,1897],{"class":795},[609,27133,1485],{"class":655},[609,27135,659],{"class":614},[609,27137,25520],{"class":795},[609,27139,659],{"class":614},[609,27141,25520],{"class":795},[609,27143,659],{"class":614},[609,27145,27146],{"class":655}," [",[609,27148,4164],{"class":795},[609,27150,659],{"class":614},[609,27152,4164],{"class":795},[609,27154,26803],{"class":655},[609,27156,632],{"class":614},[609,27158,759],{"class":614},[609,27160,27161],{"class":611,"line":680},[609,27162,27163],{"class":1185},"\u003C!-- result: (1,1,0) (2,2,3) (3,0,❌) -->\n",[609,27165,27166],{"class":611,"line":701},[609,27167,714],{"emptyLinePlaceholder":566},[609,27169,27170],{"class":611,"line":711},[609,27171,27172],{"class":1185},"\u003C!-- Right -->\n",[609,27174,27175,27177,27179,27181,27183,27185,27187,27189,27191,27193,27195,27197,27199,27201,27203,27205,27207,27209,27211,27213,27215,27217,27220,27222,27224],{"class":611,"line":717},[609,27176,615],{"class":614},[609,27178,233],{"class":618},[609,27180,785],{"class":614},[609,27182,24231],{"class":622},[609,27184,629],{"class":614},[609,27186,632],{"class":614},[609,27188,26753],{"class":655},[609,27190,1897],{"class":795},[609,27192,659],{"class":614},[609,27194,23911],{"class":795},[609,27196,1485],{"class":655},[609,27198,659],{"class":614},[609,27200,25520],{"class":795},[609,27202,659],{"class":614},[609,27204,25520],{"class":795},[609,27206,659],{"class":614},[609,27208,12722],{"class":795},[609,27210,659],{"class":614},[609,27212,27146],{"class":655},[609,27214,4164],{"class":795},[609,27216,659],{"class":614},[609,27218,27219],{"class":795}," 3",[609,27221,26803],{"class":655},[609,27223,632],{"class":614},[609,27225,759],{"class":614},[609,27227,27228],{"class":611,"line":727},[609,27229,27230],{"class":1185},"\u003C!-- result: (1,1,0) (2,2,0) (3,3,0) -->\n",[586,27232,27233],{},"The component, like Three.js, will not keep you from shooting yourself in the foot.",[1303,27235,27236],{},"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":548,"searchDepth":549,"depth":550,"links":27238},[27239,27240],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898,"children":27241},[27242],{"id":24231,"depth":680,"text":27017},"Component for creating 3D lines using Three.js's Line2.",{},{"title":233,"description":27243},"YTuT8KgQYLHeyqqWlrzJw6EHsHroohvx3OSFmnm7qB8",{"id":27248,"title":237,"body":27249,"description":27410,"extension":563,"links":564,"meta":27411,"navigation":566,"path":238,"seo":27412,"stem":239,"__hash__":27413},"docs/2.api/5.shapes/octahedron.md",{"type":473,"value":27250,"toc":27407},[27251,27256,27266,27271,27277,27279,27405],[580,27252,27253],{},[27254,27255],"shapes-octahedron",{},[586,27257,2257,27258,3279,27260,23863,27263,1122],{},[590,27259,2260],{},[590,27261,27262],{},"\u003COctahedron />",[590,27264,27265],{},"OctahedronGeometry",[598,27267,27269],{"className":27268,"code":25685,"language":23872},[23870],[590,27270,25685],{"__ignoreMap":548},[586,27272,23877,27273],{},[1116,27274,27265],{"href":27275,"rel":27276},"https://threejs.org/docs/?q=octa#api/en/geometries/OctahedronGeometry",[1120],[476,27278,15],{"id":596},[598,27280,27282],{"className":600,"code":27281,"language":605,"meta":548,"style":548},"\u003COctahedron :args=\"[1, 0]\" color=\"orange\" />\n\n// Octahedron with a custom material transformations\n\u003COctahedron ref=\"icosahedronRef\" :args=\"[1, 0]\" :position=\"[2, 4, 0]\">\n  \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/Octahedron>\n",[590,27283,27284,27322,27326,27331,27393,27397],{"__ignoreMap":548},[609,27285,27286,27288,27290,27292,27294,27296,27298,27300,27302,27304,27306,27308,27310,27312,27314,27316,27318,27320],{"class":611,"line":549},[609,27287,615],{"class":614},[609,27289,237],{"class":618},[609,27291,785],{"class":614},[609,27293,1993],{"class":622},[609,27295,629],{"class":614},[609,27297,632],{"class":614},[609,27299,1470],{"class":655},[609,27301,1897],{"class":795},[609,27303,659],{"class":614},[609,27305,12722],{"class":795},[609,27307,1485],{"class":655},[609,27309,632],{"class":614},[609,27311,3982],{"class":622},[609,27313,629],{"class":614},[609,27315,632],{"class":614},[609,27317,6742],{"class":635},[609,27319,632],{"class":614},[609,27321,759],{"class":614},[609,27323,27324],{"class":611,"line":550},[609,27325,714],{"emptyLinePlaceholder":566},[609,27327,27328],{"class":611,"line":680},[609,27329,27330],{"class":655},"// Octahedron with a custom material transformations\n",[609,27332,27333,27335,27337,27339,27341,27343,27345,27347,27349,27351,27353,27355,27357,27359,27361,27363,27365,27367,27369,27371,27373,27375,27377,27379,27381,27383,27385,27387,27389,27391],{"class":611,"line":701},[609,27334,615],{"class":614},[609,27336,237],{"class":618},[609,27338,5435],{"class":622},[609,27340,629],{"class":614},[609,27342,632],{"class":614},[609,27344,26513],{"class":635},[609,27346,632],{"class":614},[609,27348,785],{"class":614},[609,27350,1993],{"class":622},[609,27352,629],{"class":614},[609,27354,632],{"class":614},[609,27356,1470],{"class":655},[609,27358,1897],{"class":795},[609,27360,659],{"class":614},[609,27362,12722],{"class":795},[609,27364,1485],{"class":655},[609,27366,632],{"class":614},[609,27368,785],{"class":614},[609,27370,1463],{"class":622},[609,27372,629],{"class":614},[609,27374,632],{"class":614},[609,27376,1470],{"class":655},[609,27378,796],{"class":795},[609,27380,659],{"class":614},[609,27382,23997],{"class":795},[609,27384,659],{"class":614},[609,27386,12722],{"class":795},[609,27388,1485],{"class":655},[609,27390,632],{"class":614},[609,27392,641],{"class":614},[609,27394,27395],{"class":611,"line":711},[609,27396,24012],{"class":655},[609,27398,27399,27401,27403],{"class":611,"line":717},[609,27400,704],{"class":614},[609,27402,237],{"class":618},[609,27404,641],{"class":614},[1303,27406,24023],{},{"title":548,"searchDepth":549,"depth":550,"links":27408},[27409],{"id":596,"depth":550,"text":15},"Short-cut for a OctahedronGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":237,"description":27410},"Oz79qfy3nukSma4rHutQfO-XwSxFFirqgE7OHz_8-MQ",{"id":27415,"title":241,"body":27416,"description":27584,"extension":563,"links":564,"meta":27585,"navigation":566,"path":242,"seo":27586,"stem":243,"__hash__":27587},"docs/2.api/5.shapes/plane.md",{"type":473,"value":27417,"toc":27581},[27418,27423,27433,27439,27445,27450,27452,27579],[580,27419,27420],{},[27421,27422],"shapes-plane",{},[586,27424,2257,27425,3279,27427,23863,27430,1122],{},[590,27426,2260],{},[590,27428,27429],{},"\u003CPlane />",[590,27431,27432],{},"PlaneGeometry",[598,27434,27437],{"className":27435,"code":27436,"language":23872},[23870],"args: [width: number, height: number, widthSegments: number, heightSegments: number]\n",[590,27438,27436],{"__ignoreMap":548},[586,27440,23877,27441],{},[1116,27442,27432],{"href":27443,"rel":27444},"https://threejs.org/docs/?q=plane#api/en/geometries/PlaneGeometry",[1120],[2050,27446,27447],{},[586,27448,27449],{},"A convenient default rotation is applied to the x-axis of the plane (-Math.PI / 2), so that it is facing up (along the Y axis).",[476,27451,15],{"id":596},[598,27453,27455],{"className":600,"code":27454,"language":605,"meta":548,"style":548},"\u003CPlane :args=\"[1, 1]\" color=\"orange\" />\n\n// Plane with a custom material transformations\n\u003CPlane ref=\"planeRef\" :args=\"[8, 8]\" :position=\"[0, 4, 0]\">\n  \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/Plane>\n",[590,27456,27457,27495,27499,27504,27567,27571],{"__ignoreMap":548},[609,27458,27459,27461,27463,27465,27467,27469,27471,27473,27475,27477,27479,27481,27483,27485,27487,27489,27491,27493],{"class":611,"line":549},[609,27460,615],{"class":614},[609,27462,241],{"class":618},[609,27464,785],{"class":614},[609,27466,1993],{"class":622},[609,27468,629],{"class":614},[609,27470,632],{"class":614},[609,27472,1470],{"class":655},[609,27474,1897],{"class":795},[609,27476,659],{"class":614},[609,27478,23911],{"class":795},[609,27480,1485],{"class":655},[609,27482,632],{"class":614},[609,27484,3982],{"class":622},[609,27486,629],{"class":614},[609,27488,632],{"class":614},[609,27490,6742],{"class":635},[609,27492,632],{"class":614},[609,27494,759],{"class":614},[609,27496,27497],{"class":611,"line":550},[609,27498,714],{"emptyLinePlaceholder":566},[609,27500,27501],{"class":611,"line":680},[609,27502,27503],{"class":655},"// Plane with a custom material transformations\n",[609,27505,27506,27508,27510,27512,27514,27516,27519,27521,27523,27525,27527,27529,27531,27533,27535,27537,27539,27541,27543,27545,27547,27549,27551,27553,27555,27557,27559,27561,27563,27565],{"class":611,"line":701},[609,27507,615],{"class":614},[609,27509,241],{"class":618},[609,27511,5435],{"class":622},[609,27513,629],{"class":614},[609,27515,632],{"class":614},[609,27517,27518],{"class":635},"planeRef",[609,27520,632],{"class":614},[609,27522,785],{"class":614},[609,27524,1993],{"class":622},[609,27526,629],{"class":614},[609,27528,632],{"class":614},[609,27530,1470],{"class":655},[609,27532,16009],{"class":795},[609,27534,659],{"class":614},[609,27536,24842],{"class":795},[609,27538,1485],{"class":655},[609,27540,632],{"class":614},[609,27542,785],{"class":614},[609,27544,1463],{"class":622},[609,27546,629],{"class":614},[609,27548,632],{"class":614},[609,27550,1470],{"class":655},[609,27552,941],{"class":795},[609,27554,659],{"class":614},[609,27556,23997],{"class":795},[609,27558,659],{"class":614},[609,27560,12722],{"class":795},[609,27562,1485],{"class":655},[609,27564,632],{"class":614},[609,27566,641],{"class":614},[609,27568,27569],{"class":611,"line":711},[609,27570,24012],{"class":655},[609,27572,27573,27575,27577],{"class":611,"line":717},[609,27574,704],{"class":614},[609,27576,241],{"class":618},[609,27578,641],{"class":614},[1303,27580,24023],{},{"title":548,"searchDepth":549,"depth":550,"links":27582},[27583],{"id":596,"depth":550,"text":15},"Short-cut for a PlaneGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":241,"description":27584},"5OBrHmZXTQoZvxuG3DLZ3euGfAYR51mvVTntqkflx80",{"id":27589,"title":245,"body":27590,"description":28015,"extension":563,"links":564,"meta":28016,"navigation":566,"path":246,"seo":28017,"stem":247,"__hash__":28018},"docs/2.api/5.shapes/quadratic-bezier-line.md",{"type":473,"value":27591,"toc":28011},[27592,27597,27605,27607,27913,27915,27923,28009],[2562,27593,27594],{},[27595,27596],"shapes-quadratic-bezier-line",{},[586,27598,27599,24970,27602,27604],{},[590,27600,27601],{},"\u003CQuadraticBezierLine />",[590,27603,24063],{}," between start and end points, with an optional control point.",[476,27606,15],{"id":596},[598,27608,27610],{"className":600,"code":27609,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { QuadraticBezierLine } from '@tresjs/cientos'\nimport { Vector3 } from 'three'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n    \u003CQuadraticBezierLine\n      :start=\"new Vector3(-1, 0, 0)\"\n      :end=\"new Vector3(1, 0, 0)\"\n      :mid=\"new Vector3(0, 1, 0)\"\n      :segments=\"50\"\n      color=\"orange\"\n      :line-width=\"3\"\n    />\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[590,27611,27612,27632,27650,27669,27687,27695,27699,27707,27715,27747,27754,27784,27814,27845,27859,27871,27885,27889,27897,27905],{"__ignoreMap":548},[609,27613,27614,27616,27618,27620,27622,27624,27626,27628,27630],{"class":611,"line":549},[609,27615,615],{"class":614},[609,27617,619],{"class":618},[609,27619,623],{"class":622},[609,27621,626],{"class":622},[609,27623,629],{"class":614},[609,27625,632],{"class":614},[609,27627,636],{"class":635},[609,27629,632],{"class":614},[609,27631,641],{"class":614},[609,27633,27634,27636,27638,27640,27642,27644,27646,27648],{"class":611,"line":550},[609,27635,649],{"class":648},[609,27637,652],{"class":614},[609,27639,687],{"class":655},[609,27641,665],{"class":614},[609,27643,668],{"class":648},[609,27645,671],{"class":614},[609,27647,696],{"class":635},[609,27649,677],{"class":614},[609,27651,27652,27654,27656,27659,27661,27663,27665,27667],{"class":611,"line":680},[609,27653,649],{"class":648},[609,27655,652],{"class":614},[609,27657,27658],{"class":655}," QuadraticBezierLine",[609,27660,665],{"class":614},[609,27662,668],{"class":648},[609,27664,671],{"class":614},[609,27666,674],{"class":635},[609,27668,677],{"class":614},[609,27670,27671,27673,27675,27677,27679,27681,27683,27685],{"class":611,"line":701},[609,27672,649],{"class":648},[609,27674,652],{"class":614},[609,27676,24145],{"class":655},[609,27678,665],{"class":614},[609,27680,668],{"class":648},[609,27682,671],{"class":614},[609,27684,2682],{"class":635},[609,27686,677],{"class":614},[609,27688,27689,27691,27693],{"class":611,"line":711},[609,27690,704],{"class":614},[609,27692,619],{"class":618},[609,27694,641],{"class":614},[609,27696,27697],{"class":611,"line":717},[609,27698,714],{"emptyLinePlaceholder":566},[609,27700,27701,27703,27705],{"class":611,"line":727},[609,27702,615],{"class":614},[609,27704,722],{"class":618},[609,27706,641],{"class":614},[609,27708,27709,27711,27713],{"class":611,"line":750},[609,27710,730],{"class":614},[609,27712,733],{"class":618},[609,27714,641],{"class":614},[609,27716,27717,27719,27721,27723,27725,27727,27729,27731,27733,27735,27737,27739,27741,27743,27745],{"class":611,"line":762},[609,27718,753],{"class":614},[609,27720,756],{"class":618},[609,27722,785],{"class":614},[609,27724,1463],{"class":622},[609,27726,629],{"class":614},[609,27728,632],{"class":614},[609,27730,1470],{"class":614},[609,27732,4164],{"class":795},[609,27734,1475],{"class":614},[609,27736,4164],{"class":795},[609,27738,1475],{"class":614},[609,27740,4164],{"class":795},[609,27742,1485],{"class":614},[609,27744,632],{"class":614},[609,27746,759],{"class":614},[609,27748,27749,27751],{"class":611,"line":772},[609,27750,753],{"class":614},[609,27752,27753],{"class":618},"QuadraticBezierLine\n",[609,27755,27756,27758,27760,27762,27764,27766,27768,27770,27772,27774,27776,27778,27780,27782],{"class":611,"line":777},[609,27757,5697],{"class":614},[609,27759,7777],{"class":622},[609,27761,629],{"class":614},[609,27763,632],{"class":614},[609,27765,25135],{"class":614},[609,27767,3176],{"class":2804},[609,27769,24243],{"class":614},[609,27771,1897],{"class":795},[609,27773,1475],{"class":614},[609,27775,941],{"class":795},[609,27777,1475],{"class":614},[609,27779,941],{"class":795},[609,27781,4129],{"class":614},[609,27783,2991],{"class":614},[609,27785,27786,27788,27790,27792,27794,27796,27798,27800,27802,27804,27806,27808,27810,27812],{"class":611,"line":803},[609,27787,5697],{"class":614},[609,27789,7791],{"class":622},[609,27791,629],{"class":614},[609,27793,632],{"class":614},[609,27795,25135],{"class":614},[609,27797,3176],{"class":2804},[609,27799,2974],{"class":614},[609,27801,1897],{"class":795},[609,27803,1475],{"class":614},[609,27805,941],{"class":795},[609,27807,1475],{"class":614},[609,27809,941],{"class":795},[609,27811,4129],{"class":614},[609,27813,2991],{"class":614},[609,27815,27816,27818,27821,27823,27825,27827,27829,27831,27833,27835,27837,27839,27841,27843],{"class":611,"line":603},[609,27817,5697],{"class":614},[609,27819,27820],{"class":622},"mid",[609,27822,629],{"class":614},[609,27824,632],{"class":614},[609,27826,25135],{"class":614},[609,27828,3176],{"class":2804},[609,27830,2974],{"class":614},[609,27832,941],{"class":795},[609,27834,1475],{"class":614},[609,27836,1897],{"class":795},[609,27838,1475],{"class":614},[609,27840,941],{"class":795},[609,27842,4129],{"class":614},[609,27844,2991],{"class":614},[609,27846,27847,27849,27851,27853,27855,27857],{"class":611,"line":826},[609,27848,5697],{"class":614},[609,27850,24299],{"class":622},[609,27852,629],{"class":614},[609,27854,632],{"class":614},[609,27856,4601],{"class":795},[609,27858,2991],{"class":614},[609,27860,27861,27863,27865,27867,27869],{"class":611,"line":837},[609,27862,24313],{"class":622},[609,27864,629],{"class":614},[609,27866,632],{"class":614},[609,27868,6742],{"class":635},[609,27870,2991],{"class":614},[609,27872,27873,27875,27877,27879,27881,27883],{"class":611,"line":848},[609,27874,5697],{"class":614},[609,27876,24329],{"class":622},[609,27878,629],{"class":614},[609,27880,632],{"class":614},[609,27882,4164],{"class":795},[609,27884,2991],{"class":614},[609,27886,27887],{"class":611,"line":858},[609,27888,11765],{"class":614},[609,27890,27891,27893,27895],{"class":611,"line":604},[609,27892,753],{"class":614},[609,27894,3522],{"class":618},[609,27896,759],{"class":614},[609,27898,27899,27901,27903],{"class":611,"line":878},[609,27900,881],{"class":614},[609,27902,733],{"class":618},[609,27904,641],{"class":614},[609,27906,27907,27909,27911],{"class":611,"line":888},[609,27908,704],{"class":614},[609,27910,722],{"class":618},[609,27912,641],{"class":614},[476,27914,898],{"id":897},[586,27916,27917,25320,27919,25323,27921,1122],{},[590,27918,27601],{},[590,27920,24231],{},[590,27922,24063],{},[903,27924,27925,27940],{},[906,27926,27927],{},[909,27928,27929,27931,27933,27935,27937],{},[912,27930,914],{},[912,27932,11906],{},[912,27934,917],{},[912,27936,920],{},[912,27938,27939],{},"Required",[922,27941,27942,27959,27975,27993],{},[909,27943,27944,27948,27952,27954,27956],{},[927,27945,27946],{},[590,27947,7777],{},[927,27949,27950],{},[590,27951,25352],{},[927,27953,25355],{},[927,27955],{},[927,27957,27958],{},"yes",[909,27960,27961,27965,27969,27971,27973],{},[927,27962,27963],{},[590,27964,7791],{},[927,27966,27967],{},[590,27968,25352],{},[927,27970,25370],{},[927,27972],{},[927,27974,27958],{},[909,27976,27977,27981,27985,27988,27990],{},[927,27978,27979],{},[590,27980,27820],{},[927,27982,27983],{},[590,27984,25352],{},[927,27986,27987],{},"Control point",[927,27989],{},[927,27991,27992],{},"no",[909,27994,27995,27999,28003,28005,28007],{},[927,27996,27997],{},[590,27998,24299],{},[927,28000,28001],{},[590,28002,2541],{},[927,28004,24408],{},[927,28006,24411],{},[927,28008,27992],{},[1303,28010,24599],{},{"title":548,"searchDepth":549,"depth":550,"links":28012},[28013,28014],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},"Renders a Line2 between start and end points with an optional control point.",{},{"title":245,"description":28015},"x3tvZVc6qkdY7oDfxpxQl2C7EV85RKijXjcoHR_b1q8",{"id":28020,"title":249,"body":28021,"description":28192,"extension":563,"links":564,"meta":28193,"navigation":566,"path":250,"seo":28194,"stem":251,"__hash__":28195},"docs/2.api/5.shapes/ring.md",{"type":473,"value":28022,"toc":28189},[28023,28028,28038,28044,28050,28052,28187],[580,28024,28025],{},[28026,28027],"shapes-ring",{},[586,28029,2257,28030,3279,28032,23863,28035,1122],{},[590,28031,2260],{},[590,28033,28034],{},"\u003CRing />",[590,28036,28037],{},"RingGeometry",[598,28039,28042],{"className":28040,"code":28041,"language":23872},[23870],"args: [\n  innerRadius: number,\n  outerRadius: number,\n  thetaSegments: number,\n  phiSegments: number,\n  thetaStart: number,\n  thetaLength: number\n]\n",[590,28043,28041],{"__ignoreMap":548},[586,28045,23877,28046],{},[1116,28047,28037],{"href":28048,"rel":28049},"https://threejs.org/docs/?q=ring#api/en/geometries/RingGeometry",[1120],[476,28051,15],{"id":596},[598,28053,28055],{"className":600,"code":28054,"language":605,"meta":548,"style":548},"\u003CRing :args=\"[0.5, 1, 32]\" color=\"orange\" />\n\n// Ring with a custom material transformations\n\u003CRing ref=\"ringRef\" :args=\"[0.5, 1, 32]\" :position=\"[2, 4, 0]\">\n  \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/Ring>\n",[590,28056,28057,28099,28103,28108,28175,28179],{"__ignoreMap":548},[609,28058,28059,28061,28063,28065,28067,28069,28071,28073,28075,28077,28079,28081,28083,28085,28087,28089,28091,28093,28095,28097],{"class":611,"line":549},[609,28060,615],{"class":614},[609,28062,249],{"class":618},[609,28064,785],{"class":614},[609,28066,1993],{"class":622},[609,28068,629],{"class":614},[609,28070,632],{"class":614},[609,28072,1470],{"class":655},[609,28074,1517],{"class":795},[609,28076,659],{"class":614},[609,28078,23911],{"class":795},[609,28080,659],{"class":614},[609,28082,24668],{"class":795},[609,28084,1485],{"class":655},[609,28086,632],{"class":614},[609,28088,3982],{"class":622},[609,28090,629],{"class":614},[609,28092,632],{"class":614},[609,28094,6742],{"class":635},[609,28096,632],{"class":614},[609,28098,759],{"class":614},[609,28100,28101],{"class":611,"line":550},[609,28102,714],{"emptyLinePlaceholder":566},[609,28104,28105],{"class":611,"line":680},[609,28106,28107],{"class":655},"// Ring with a custom material transformations\n",[609,28109,28110,28112,28114,28116,28118,28120,28123,28125,28127,28129,28131,28133,28135,28137,28139,28141,28143,28145,28147,28149,28151,28153,28155,28157,28159,28161,28163,28165,28167,28169,28171,28173],{"class":611,"line":701},[609,28111,615],{"class":614},[609,28113,249],{"class":618},[609,28115,5435],{"class":622},[609,28117,629],{"class":614},[609,28119,632],{"class":614},[609,28121,28122],{"class":635},"ringRef",[609,28124,632],{"class":614},[609,28126,785],{"class":614},[609,28128,1993],{"class":622},[609,28130,629],{"class":614},[609,28132,632],{"class":614},[609,28134,1470],{"class":655},[609,28136,1517],{"class":795},[609,28138,659],{"class":614},[609,28140,23911],{"class":795},[609,28142,659],{"class":614},[609,28144,24668],{"class":795},[609,28146,1485],{"class":655},[609,28148,632],{"class":614},[609,28150,785],{"class":614},[609,28152,1463],{"class":622},[609,28154,629],{"class":614},[609,28156,632],{"class":614},[609,28158,1470],{"class":655},[609,28160,796],{"class":795},[609,28162,659],{"class":614},[609,28164,23997],{"class":795},[609,28166,659],{"class":614},[609,28168,12722],{"class":795},[609,28170,1485],{"class":655},[609,28172,632],{"class":614},[609,28174,641],{"class":614},[609,28176,28177],{"class":611,"line":711},[609,28178,24012],{"class":655},[609,28180,28181,28183,28185],{"class":611,"line":717},[609,28182,704],{"class":614},[609,28184,249],{"class":618},[609,28186,641],{"class":614},[1303,28188,24023],{},{"title":548,"searchDepth":549,"depth":550,"links":28190},[28191],{"id":596,"depth":550,"text":15},"Short-cut for a RingGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":249,"description":28192},"sjdJr8WfSUL8VppV0tIyFALL7j5Mg1IJmmVLISwAI9U",{"id":28197,"title":253,"body":28198,"description":28354,"extension":563,"links":564,"meta":28355,"navigation":566,"path":254,"seo":28356,"stem":255,"__hash__":28357},"docs/2.api/5.shapes/rounded-box.md",{"type":473,"value":28199,"toc":28351},[28200,28205,28216,28222,28228,28230,28349],[580,28201,28202],{},[28203,28204],"shapes-rounded-box",{},[586,28206,2257,28207,3279,28209,23863,28212,28215],{},[590,28208,2260],{},[590,28210,28211],{},"\u003CRoundedBox />",[590,28213,28214],{},"RoundedBoxGeometry"," .",[598,28217,28220],{"className":28218,"code":28219,"language":23872},[23870],"args: [\n  width: number, // default 1\n  height: number, // default 1\n  depth: number, // default 1\n  segments: number, // default 2\n  radius: number, // default 0.1\n]\n",[590,28221,28219],{"__ignoreMap":548},[586,28223,23877,28224],{},[1116,28225,28214],{"href":28226,"rel":28227},"https://github.com/mrdoob/three.js/blob/master/examples/jsm/geometries/RoundedBoxGeometry.js",[1120],[476,28229,15],{"id":596},[598,28231,28233],{"className":600,"code":28232,"language":605,"meta":548,"style":548},"\u003CRoundedBox :args=\"[1, 1, 1, 2, 0.1]\" color=\"orange\" />\n\n// RoundedBox with a custom material transformations\n\u003CRoundedBox ref=\"boxRef\" :position=\"[0, 4, 0]\">\n  \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/RoundedBox>\n",[590,28234,28235,28286,28290,28295,28337,28341],{"__ignoreMap":548},[609,28236,28237,28239,28242,28244,28246,28248,28250,28252,28254,28256,28258,28260,28262,28264,28266,28268,28270,28272,28274,28276,28278,28280,28282,28284],{"class":611,"line":549},[609,28238,615],{"class":614},[609,28240,28241],{"class":618},"RoundedBox",[609,28243,785],{"class":614},[609,28245,1993],{"class":622},[609,28247,629],{"class":614},[609,28249,632],{"class":614},[609,28251,1470],{"class":655},[609,28253,1897],{"class":795},[609,28255,659],{"class":614},[609,28257,23911],{"class":795},[609,28259,659],{"class":614},[609,28261,23911],{"class":795},[609,28263,659],{"class":614},[609,28265,25520],{"class":795},[609,28267,659],{"class":614},[609,28269,18010],{"class":795},[609,28271,1485],{"class":655},[609,28273,632],{"class":614},[609,28275,3982],{"class":622},[609,28277,629],{"class":614},[609,28279,632],{"class":614},[609,28281,6742],{"class":635},[609,28283,632],{"class":614},[609,28285,759],{"class":614},[609,28287,28288],{"class":611,"line":550},[609,28289,714],{"emptyLinePlaceholder":566},[609,28291,28292],{"class":611,"line":680},[609,28293,28294],{"class":655},"// RoundedBox with a custom material transformations\n",[609,28296,28297,28299,28301,28303,28305,28307,28309,28311,28313,28315,28317,28319,28321,28323,28325,28327,28329,28331,28333,28335],{"class":611,"line":701},[609,28298,615],{"class":614},[609,28300,28241],{"class":618},[609,28302,5435],{"class":622},[609,28304,629],{"class":614},[609,28306,632],{"class":614},[609,28308,8060],{"class":635},[609,28310,632],{"class":614},[609,28312,785],{"class":614},[609,28314,1463],{"class":622},[609,28316,629],{"class":614},[609,28318,632],{"class":614},[609,28320,1470],{"class":655},[609,28322,941],{"class":795},[609,28324,659],{"class":614},[609,28326,23997],{"class":795},[609,28328,659],{"class":614},[609,28330,12722],{"class":795},[609,28332,1485],{"class":655},[609,28334,632],{"class":614},[609,28336,641],{"class":614},[609,28338,28339],{"class":611,"line":711},[609,28340,24012],{"class":655},[609,28342,28343,28345,28347],{"class":611,"line":717},[609,28344,704],{"class":614},[609,28346,28241],{"class":618},[609,28348,641],{"class":614},[1303,28350,24023],{},{"title":548,"searchDepth":549,"depth":550,"links":28352},[28353],{"id":596,"depth":550,"text":15},"Short-cut for a RoundedBoxGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":253,"description":28354},"6uRmRs4RGOfq4lQeUlAm3DycDFH9FnKYbwGuk5ODp5k",{"id":28359,"title":257,"body":28360,"description":28548,"extension":563,"links":564,"meta":28549,"navigation":566,"path":258,"seo":28550,"stem":259,"__hash__":28551},"docs/2.api/5.shapes/screen-quad.md",{"type":473,"value":28361,"toc":28544},[28362,28367,28370,28372,28522,28526,28542],[2562,28363,28364],{},[28365,28366],"shapes-screen-quad",{},[586,28368,28369],{},"A triangle that fills the screen when using a THREE.OrthographicCamera. Useful for full-screen fragment shader work.",[476,28371,15],{"id":596},[598,28373,28375],{"className":600,"code":28374,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { ScreenQuad } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresOrthographicCamera />\n    \u003CScreenQuad>\n      \u003CTresMeshToonMaterial color=\"orange\" />\n    \u003C/ScreenQuad>\n  \u003C/TresCanvas>\n\u003C/template>\n",[590,28376,28377,28397,28415,28434,28442,28446,28454,28462,28471,28480,28498,28506,28514],{"__ignoreMap":548},[609,28378,28379,28381,28383,28385,28387,28389,28391,28393,28395],{"class":611,"line":549},[609,28380,615],{"class":614},[609,28382,619],{"class":618},[609,28384,623],{"class":622},[609,28386,626],{"class":622},[609,28388,629],{"class":614},[609,28390,632],{"class":614},[609,28392,636],{"class":635},[609,28394,632],{"class":614},[609,28396,641],{"class":614},[609,28398,28399,28401,28403,28405,28407,28409,28411,28413],{"class":611,"line":550},[609,28400,649],{"class":648},[609,28402,652],{"class":614},[609,28404,687],{"class":655},[609,28406,665],{"class":614},[609,28408,668],{"class":648},[609,28410,671],{"class":614},[609,28412,696],{"class":635},[609,28414,677],{"class":614},[609,28416,28417,28419,28421,28424,28426,28428,28430,28432],{"class":611,"line":680},[609,28418,649],{"class":648},[609,28420,652],{"class":614},[609,28422,28423],{"class":655}," ScreenQuad",[609,28425,665],{"class":614},[609,28427,668],{"class":648},[609,28429,671],{"class":614},[609,28431,674],{"class":635},[609,28433,677],{"class":614},[609,28435,28436,28438,28440],{"class":611,"line":701},[609,28437,704],{"class":614},[609,28439,619],{"class":618},[609,28441,641],{"class":614},[609,28443,28444],{"class":611,"line":711},[609,28445,714],{"emptyLinePlaceholder":566},[609,28447,28448,28450,28452],{"class":611,"line":717},[609,28449,615],{"class":614},[609,28451,722],{"class":618},[609,28453,641],{"class":614},[609,28455,28456,28458,28460],{"class":611,"line":727},[609,28457,730],{"class":614},[609,28459,733],{"class":618},[609,28461,641],{"class":614},[609,28463,28464,28466,28469],{"class":611,"line":750},[609,28465,753],{"class":614},[609,28467,28468],{"class":618},"TresOrthographicCamera",[609,28470,759],{"class":614},[609,28472,28473,28475,28478],{"class":611,"line":762},[609,28474,753],{"class":614},[609,28476,28477],{"class":618},"ScreenQuad",[609,28479,641],{"class":614},[609,28481,28482,28484,28486,28488,28490,28492,28494,28496],{"class":611,"line":772},[609,28483,829],{"class":614},[609,28485,6733],{"class":618},[609,28487,3982],{"class":622},[609,28489,629],{"class":614},[609,28491,632],{"class":614},[609,28493,6742],{"class":635},[609,28495,632],{"class":614},[609,28497,759],{"class":614},[609,28499,28500,28502,28504],{"class":611,"line":777},[609,28501,871],{"class":614},[609,28503,28477],{"class":618},[609,28505,641],{"class":614},[609,28507,28508,28510,28512],{"class":611,"line":803},[609,28509,881],{"class":614},[609,28511,733],{"class":618},[609,28513,641],{"class":614},[609,28515,28516,28518,28520],{"class":611,"line":603},[609,28517,704],{"class":614},[609,28519,722],{"class":618},[609,28521,641],{"class":614},[476,28523,28525],{"id":28524},"references","References",[3140,28527,28528,28535],{},[3143,28529,28530],{},[1116,28531,28534],{"href":28532,"rel":28533},"https://www.cginternals.com/en/blog/2018-01-10-screen-aligned-quads-and-triangles.html",[1120],"Why a triangle?",[3143,28536,28537],{},[1116,28538,28541],{"href":28539,"rel":28540},"https://luruke.medium.com/simple-postprocessing-in-three-js-91936ecadfb7",[1120],"Simple postprocessing in Three.js",[1303,28543,22322],{},{"title":548,"searchDepth":549,"depth":550,"links":28545},[28546,28547],{"id":596,"depth":550,"text":15},{"id":28524,"depth":550,"text":28525},"A triangle that fills the screen for full-screen fragment shader work.",{},{"title":257,"description":28548},"7AUdT-SMH4R5MsKpuypi4UzVsHt7S7ryCNHpJVv28A8",{"id":28553,"title":261,"body":28554,"description":28724,"extension":563,"links":564,"meta":28725,"navigation":566,"path":262,"seo":28726,"stem":263,"__hash__":28727},"docs/2.api/5.shapes/sphere.md",{"type":473,"value":28555,"toc":28721},[28556,28561,28571,28577,28583,28585,28719],[580,28557,28558],{},[28559,28560],"shapes-sphere",{},[586,28562,2257,28563,3279,28565,23863,28568,1122],{},[590,28564,2260],{},[590,28566,28567],{},"\u003CSphere />",[590,28569,28570],{},"SphereGeometry",[598,28572,28575],{"className":28573,"code":28574,"language":23872},[23870],"args: [\n  radius: number,\n  widthSegments: number,\n  heightSegments: number,\n  phiStart: number,\n  phiLength: number,\n  thetaStart: number,\n  thetaLength: number\n]\n",[590,28576,28574],{"__ignoreMap":548},[586,28578,23877,28579],{},[1116,28580,28570],{"href":28581,"rel":28582},"https://threejs.org/docs/?q=sphere#api/en/geometries/SphereGeometry",[1120],[476,28584,15],{"id":596},[598,28586,28588],{"className":600,"code":28587,"language":605,"meta":548,"style":548},"\u003CSphere :args=\"[1, 1, 1]\" color=\"orange\" />\n\n// Sphere with a custom material transformations\n\u003CSphere ref=\"planeRef\" :args=\"[1, 1, 1]\" :position=\"[2, 4, 0]\">\n  \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/Sphere>\n",[590,28589,28590,28632,28636,28641,28707,28711],{"__ignoreMap":548},[609,28591,28592,28594,28596,28598,28600,28602,28604,28606,28608,28610,28612,28614,28616,28618,28620,28622,28624,28626,28628,28630],{"class":611,"line":549},[609,28593,615],{"class":614},[609,28595,261],{"class":618},[609,28597,785],{"class":614},[609,28599,1993],{"class":622},[609,28601,629],{"class":614},[609,28603,632],{"class":614},[609,28605,1470],{"class":655},[609,28607,1897],{"class":795},[609,28609,659],{"class":614},[609,28611,23911],{"class":795},[609,28613,659],{"class":614},[609,28615,23911],{"class":795},[609,28617,1485],{"class":655},[609,28619,632],{"class":614},[609,28621,3982],{"class":622},[609,28623,629],{"class":614},[609,28625,632],{"class":614},[609,28627,6742],{"class":635},[609,28629,632],{"class":614},[609,28631,759],{"class":614},[609,28633,28634],{"class":611,"line":550},[609,28635,714],{"emptyLinePlaceholder":566},[609,28637,28638],{"class":611,"line":680},[609,28639,28640],{"class":655},"// Sphere with a custom material transformations\n",[609,28642,28643,28645,28647,28649,28651,28653,28655,28657,28659,28661,28663,28665,28667,28669,28671,28673,28675,28677,28679,28681,28683,28685,28687,28689,28691,28693,28695,28697,28699,28701,28703,28705],{"class":611,"line":701},[609,28644,615],{"class":614},[609,28646,261],{"class":618},[609,28648,5435],{"class":622},[609,28650,629],{"class":614},[609,28652,632],{"class":614},[609,28654,27518],{"class":635},[609,28656,632],{"class":614},[609,28658,785],{"class":614},[609,28660,1993],{"class":622},[609,28662,629],{"class":614},[609,28664,632],{"class":614},[609,28666,1470],{"class":655},[609,28668,1897],{"class":795},[609,28670,659],{"class":614},[609,28672,23911],{"class":795},[609,28674,659],{"class":614},[609,28676,23911],{"class":795},[609,28678,1485],{"class":655},[609,28680,632],{"class":614},[609,28682,785],{"class":614},[609,28684,1463],{"class":622},[609,28686,629],{"class":614},[609,28688,632],{"class":614},[609,28690,1470],{"class":655},[609,28692,796],{"class":795},[609,28694,659],{"class":614},[609,28696,23997],{"class":795},[609,28698,659],{"class":614},[609,28700,12722],{"class":795},[609,28702,1485],{"class":655},[609,28704,632],{"class":614},[609,28706,641],{"class":614},[609,28708,28709],{"class":611,"line":711},[609,28710,24012],{"class":655},[609,28712,28713,28715,28717],{"class":611,"line":717},[609,28714,704],{"class":614},[609,28716,261],{"class":618},[609,28718,641],{"class":614},[1303,28720,24023],{},{"title":548,"searchDepth":549,"depth":550,"links":28722},[28723],{"id":596,"depth":550,"text":15},"Short-cut for a SphereGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":261,"description":28724},"CXqQd226fbRLkf86b33CXbH-uGM-cwo2HQNRB4Pt8Xs",{"id":28729,"title":265,"body":28730,"description":29176,"extension":563,"links":564,"meta":29177,"navigation":566,"path":266,"seo":29178,"stem":267,"__hash__":29179},"docs/2.api/5.shapes/superformula.md",{"type":473,"value":28731,"toc":29171},[28732,28737,28750,28752,29036,29038,29048,29160,29164,29169],[580,28733,28734],{},[28735,28736],"shapes-super-formula",{},[586,28738,2257,28739,3279,28741,28744,28745,1122],{},[590,28740,2260],{},[590,28742,28743],{},"\u003CSuperformula />"," component that produces a configurable ",[1116,28746,28749],{"href":28747,"rel":28748},"https://en.wikipedia.org/wiki/Superformula",[1120],"3D plot of the superformula",[476,28751,15],{"id":596},[598,28753,28756],{"className":600,"code":28754,"highlights":28755,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Superformula } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n    \u003CSuperformula\n      :width-segments=\"64\"\n      :height-segments=\"64\"\n      :num-arms-a=\"5\"\n      :exp-a=\"[40, 1.3, 0.9]\"\n      color=\"#ff6b6b\"\n    />\n    \u003CTresAmbientLight />\n    \u003CTresDirectionalLight :position=\"[0, 2, 4]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n",[680,762,772,777,803,603,826],[590,28757,28758,28778,28796,28816,28824,28828,28836,28844,28876,28884,28900,28916,28932,28962,28976,28980,28988,29020,29028],{"__ignoreMap":548},[609,28759,28760,28762,28764,28766,28768,28770,28772,28774,28776],{"class":611,"line":549},[609,28761,615],{"class":614},[609,28763,619],{"class":618},[609,28765,623],{"class":622},[609,28767,626],{"class":622},[609,28769,629],{"class":614},[609,28771,632],{"class":614},[609,28773,636],{"class":635},[609,28775,632],{"class":614},[609,28777,641],{"class":614},[609,28779,28780,28782,28784,28786,28788,28790,28792,28794],{"class":611,"line":550},[609,28781,649],{"class":648},[609,28783,652],{"class":614},[609,28785,687],{"class":655},[609,28787,665],{"class":614},[609,28789,668],{"class":648},[609,28791,671],{"class":614},[609,28793,696],{"class":635},[609,28795,677],{"class":614},[609,28797,28799,28801,28803,28806,28808,28810,28812,28814],{"class":28798,"line":680},[611,645],[609,28800,649],{"class":648},[609,28802,652],{"class":614},[609,28804,28805],{"class":655}," Superformula",[609,28807,665],{"class":614},[609,28809,668],{"class":648},[609,28811,671],{"class":614},[609,28813,674],{"class":635},[609,28815,677],{"class":614},[609,28817,28818,28820,28822],{"class":611,"line":701},[609,28819,704],{"class":614},[609,28821,619],{"class":618},[609,28823,641],{"class":614},[609,28825,28826],{"class":611,"line":711},[609,28827,714],{"emptyLinePlaceholder":566},[609,28829,28830,28832,28834],{"class":611,"line":717},[609,28831,615],{"class":614},[609,28833,722],{"class":618},[609,28835,641],{"class":614},[609,28837,28838,28840,28842],{"class":611,"line":727},[609,28839,730],{"class":614},[609,28841,733],{"class":618},[609,28843,641],{"class":614},[609,28845,28846,28848,28850,28852,28854,28856,28858,28860,28862,28864,28866,28868,28870,28872,28874],{"class":611,"line":750},[609,28847,753],{"class":614},[609,28849,756],{"class":618},[609,28851,785],{"class":614},[609,28853,1463],{"class":622},[609,28855,629],{"class":614},[609,28857,632],{"class":614},[609,28859,1470],{"class":614},[609,28861,4164],{"class":795},[609,28863,1475],{"class":614},[609,28865,4164],{"class":795},[609,28867,1475],{"class":614},[609,28869,4164],{"class":795},[609,28871,1485],{"class":614},[609,28873,632],{"class":614},[609,28875,759],{"class":614},[609,28877,28879,28881],{"class":28878,"line":762},[611,645],[609,28880,753],{"class":614},[609,28882,28883],{"class":618},"Superformula\n",[609,28885,28887,28889,28892,28894,28896,28898],{"class":28886,"line":772},[611,645],[609,28888,5697],{"class":614},[609,28890,28891],{"class":622},"width-segments",[609,28893,629],{"class":614},[609,28895,632],{"class":614},[609,28897,3967],{"class":795},[609,28899,2991],{"class":614},[609,28901,28903,28905,28908,28910,28912,28914],{"class":28902,"line":777},[611,645],[609,28904,5697],{"class":614},[609,28906,28907],{"class":622},"height-segments",[609,28909,629],{"class":614},[609,28911,632],{"class":614},[609,28913,3967],{"class":795},[609,28915,2991],{"class":614},[609,28917,28919,28921,28924,28926,28928,28930],{"class":28918,"line":803},[611,645],[609,28920,5697],{"class":614},[609,28922,28923],{"class":622},"num-arms-a",[609,28925,629],{"class":614},[609,28927,632],{"class":614},[609,28929,2400],{"class":795},[609,28931,2991],{"class":614},[609,28933,28935,28937,28940,28942,28944,28946,28949,28951,28953,28955,28958,28960],{"class":28934,"line":603},[611,645],[609,28936,5697],{"class":614},[609,28938,28939],{"class":622},"exp-a",[609,28941,629],{"class":614},[609,28943,632],{"class":614},[609,28945,1470],{"class":614},[609,28947,28948],{"class":795},"40",[609,28950,1475],{"class":614},[609,28952,26132],{"class":795},[609,28954,1475],{"class":614},[609,28956,28957],{"class":795},"0.9",[609,28959,1485],{"class":614},[609,28961,2991],{"class":614},[609,28963,28965,28967,28969,28971,28974],{"class":28964,"line":826},[611,645],[609,28966,24313],{"class":622},[609,28968,629],{"class":614},[609,28970,632],{"class":614},[609,28972,28973],{"class":635},"#ff6b6b",[609,28975,2991],{"class":614},[609,28977,28978],{"class":611,"line":837},[609,28979,11765],{"class":614},[609,28981,28982,28984,28986],{"class":611,"line":848},[609,28983,753],{"class":614},[609,28985,3522],{"class":618},[609,28987,759],{"class":614},[609,28989,28990,28992,28994,28996,28998,29000,29002,29004,29006,29008,29010,29012,29014,29016,29018],{"class":611,"line":858},[609,28991,753],{"class":614},[609,28993,3543],{"class":618},[609,28995,785],{"class":614},[609,28997,1463],{"class":622},[609,28999,629],{"class":614},[609,29001,632],{"class":614},[609,29003,1470],{"class":614},[609,29005,941],{"class":795},[609,29007,1475],{"class":614},[609,29009,796],{"class":795},[609,29011,1475],{"class":614},[609,29013,3494],{"class":795},[609,29015,1485],{"class":614},[609,29017,632],{"class":614},[609,29019,759],{"class":614},[609,29021,29022,29024,29026],{"class":611,"line":604},[609,29023,881],{"class":614},[609,29025,733],{"class":618},[609,29027,641],{"class":614},[609,29029,29030,29032,29034],{"class":611,"line":878},[609,29031,704],{"class":614},[609,29033,722],{"class":618},[609,29035,641],{"class":614},[476,29037,898],{"id":897},[586,29039,2257,29040,29042,29043,29047],{},[590,29041,28743],{}," 3D plot is the product of 2 2D superformulas, referred to as \"A\" and \"B\" in the props. See this ",[1116,29044,29046],{"href":28747,"rel":29045},[1120],"Wikipedia article about the superformula"," for more information about the function's arguments.",[903,29049,29050,29060],{},[906,29051,29052],{},[909,29053,29054,29056,29058],{},[912,29055,3122],{"align":973},[912,29057,917],{"align":973},[912,29059,920],{"align":973},[922,29061,29062,29076,29090,29104,29119,29133,29147],{},[909,29063,29064,29069,29072],{},[927,29065,29066],{"align":973},[1677,29067,29068],{},"widthSegments",[927,29070,29071],{"align":973},"Number of horizontal mesh segments",[927,29073,29074],{"align":973},[590,29075,5740],{},[909,29077,29078,29083,29086],{},[927,29079,29080],{"align":973},[1677,29081,29082],{},"heightSegments",[927,29084,29085],{"align":973},"Number of vertical mesh segments",[927,29087,29088],{"align":973},[590,29089,5740],{},[909,29091,29092,29097,29100],{},[927,29093,29094],{"align":973},[1677,29095,29096],{},"numArmsA",[927,29098,29099],{"align":973},"For A, number of radial arms/ripples",[927,29101,29102],{"align":973},[590,29103,3494],{},[909,29105,29106,29111,29114],{},[927,29107,29108],{"align":973},[1677,29109,29110],{},"expA",[927,29112,29113],{"align":973},"A's 3 exponents",[927,29115,29116],{"align":973},[590,29117,29118],{},"[40, 1.3, 0.9]",[909,29120,29121,29126,29129],{},[927,29122,29123],{"align":973},[1677,29124,29125],{},"numArmsB",[927,29127,29128],{"align":973},"For B, number of radial arms/ripples",[927,29130,29131],{"align":973},[590,29132,3494],{},[909,29134,29135,29140,29143],{},[927,29136,29137],{"align":973},[1677,29138,29139],{},"expB",[927,29141,29142],{"align":973},"B's 3 exponents",[927,29144,29145],{"align":973},[590,29146,29118],{},[909,29148,29149,29153,29156],{},[927,29150,29151],{"align":973},[1677,29152,2504],{},[927,29154,29155],{"align":973},"If no material is provided, a color for the default material",[927,29157,29158],{"align":973},[590,29159,24484],{},[476,29161,29163],{"id":29162},"slot","Slot",[586,29165,29166,29168],{},[590,29167,28743],{}," has a single slot for an optional material.",[1303,29170,1652],{},{"title":548,"searchDepth":549,"depth":550,"links":29172},[29173,29174,29175],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},{"id":29162,"depth":550,"text":29163},"Produces a configurable 3D plot of the superformula.",{},{"title":265,"description":29176},"e6vrte2Vz6VeiZF2tvUtKAkrmeL55JA0AIEipHcn53Y",{"id":29181,"title":269,"body":29182,"description":29344,"extension":563,"links":564,"meta":29345,"navigation":566,"path":270,"seo":29346,"stem":271,"__hash__":29347},"docs/2.api/5.shapes/tetrahedron.md",{"type":473,"value":29183,"toc":29341},[29184,29189,29199,29204,29210,29212,29339],[580,29185,29186],{},[29187,29188],"shapes-tetrahedron",{},[586,29190,2257,29191,3279,29193,23863,29196,1122],{},[590,29192,2260],{},[590,29194,29195],{},"\u003CTetrahedron />",[590,29197,29198],{},"TetrahedronGeometry",[598,29200,29202],{"className":29201,"code":25685,"language":23872},[23870],[590,29203,25685],{"__ignoreMap":548},[586,29205,23877,29206],{},[1116,29207,29198],{"href":29208,"rel":29209},"https://threejs.org/docs/?q=tetr#api/en/geometries/TetrahedronGeometry",[1120],[476,29211,15],{"id":596},[598,29213,29215],{"className":600,"code":29214,"language":605,"meta":548,"style":548},"\u003CTetrahedron :args=\"[1, 0]\" color=\"orange\" />\n\n// Tetrahedron with a custom material transformations\n\u003CTetrahedron ref=\"tetrahedronRef\" :args=\"[1, 0]\" :position=\"[2, 4, 0]\">\n  \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/Tetrahedron>\n",[590,29216,29217,29255,29259,29264,29327,29331],{"__ignoreMap":548},[609,29218,29219,29221,29223,29225,29227,29229,29231,29233,29235,29237,29239,29241,29243,29245,29247,29249,29251,29253],{"class":611,"line":549},[609,29220,615],{"class":614},[609,29222,269],{"class":618},[609,29224,785],{"class":614},[609,29226,1993],{"class":622},[609,29228,629],{"class":614},[609,29230,632],{"class":614},[609,29232,1470],{"class":655},[609,29234,1897],{"class":795},[609,29236,659],{"class":614},[609,29238,12722],{"class":795},[609,29240,1485],{"class":655},[609,29242,632],{"class":614},[609,29244,3982],{"class":622},[609,29246,629],{"class":614},[609,29248,632],{"class":614},[609,29250,6742],{"class":635},[609,29252,632],{"class":614},[609,29254,759],{"class":614},[609,29256,29257],{"class":611,"line":550},[609,29258,714],{"emptyLinePlaceholder":566},[609,29260,29261],{"class":611,"line":680},[609,29262,29263],{"class":655},"// Tetrahedron with a custom material transformations\n",[609,29265,29266,29268,29270,29272,29274,29276,29279,29281,29283,29285,29287,29289,29291,29293,29295,29297,29299,29301,29303,29305,29307,29309,29311,29313,29315,29317,29319,29321,29323,29325],{"class":611,"line":701},[609,29267,615],{"class":614},[609,29269,269],{"class":618},[609,29271,5435],{"class":622},[609,29273,629],{"class":614},[609,29275,632],{"class":614},[609,29277,29278],{"class":635},"tetrahedronRef",[609,29280,632],{"class":614},[609,29282,785],{"class":614},[609,29284,1993],{"class":622},[609,29286,629],{"class":614},[609,29288,632],{"class":614},[609,29290,1470],{"class":655},[609,29292,1897],{"class":795},[609,29294,659],{"class":614},[609,29296,12722],{"class":795},[609,29298,1485],{"class":655},[609,29300,632],{"class":614},[609,29302,785],{"class":614},[609,29304,1463],{"class":622},[609,29306,629],{"class":614},[609,29308,632],{"class":614},[609,29310,1470],{"class":655},[609,29312,796],{"class":795},[609,29314,659],{"class":614},[609,29316,23997],{"class":795},[609,29318,659],{"class":614},[609,29320,12722],{"class":795},[609,29322,1485],{"class":655},[609,29324,632],{"class":614},[609,29326,641],{"class":614},[609,29328,29329],{"class":611,"line":711},[609,29330,24012],{"class":655},[609,29332,29333,29335,29337],{"class":611,"line":717},[609,29334,704],{"class":614},[609,29336,269],{"class":618},[609,29338,641],{"class":614},[1303,29340,24023],{},{"title":548,"searchDepth":549,"depth":550,"links":29342},[29343],{"id":596,"depth":550,"text":15},"Short-cut for a TetrahedronGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":269,"description":29344},"6ZMY_90iSBZYMdJF00ih1rbyX9sFMIXEk1iKSd_AFMc",{"id":29349,"title":273,"body":29350,"description":29535,"extension":563,"links":564,"meta":29536,"navigation":566,"path":274,"seo":29537,"stem":275,"__hash__":29538},"docs/2.api/5.shapes/torus.md",{"type":473,"value":29351,"toc":29532},[29352,29357,29367,29373,29379,29381,29530],[580,29353,29354],{},[29355,29356],"shapes-torus",{},[586,29358,2257,29359,3279,29361,23863,29364,1122],{},[590,29360,2260],{},[590,29362,29363],{},"\u003CTorus />",[590,29365,29366],{},"TorusGeometry",[598,29368,29371],{"className":29369,"code":29370,"language":23872},[23870],"args: [\n  radius: number,\n  tube: number,\n  radialSegments: number,\n  tubularSegments: number,\n  arc: number\n]\n",[590,29372,29370],{"__ignoreMap":548},[586,29374,23877,29375],{},[1116,29376,29366],{"href":29377,"rel":29378},"https://threejs.org/docs/?q=torus#api/en/geometries/TorusGeometry",[1120],[476,29380,15],{"id":596},[598,29382,29384],{"className":600,"code":29383,"language":605,"meta":548,"style":548},"\u003CTorus :args=\"[2, 0.4, 42, 100]\" color=\"orange\" />\n\n// Torus with a custom material transformations\n\u003CTorus ref=\"torusRef\" :args=\"[0.75, 0.4, 16, 80]\" :position=\"[-2, 6, 0]\">\n  \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/Torus>\n",[590,29385,29386,29434,29438,29443,29518,29522],{"__ignoreMap":548},[609,29387,29388,29390,29392,29394,29396,29398,29400,29402,29404,29406,29409,29411,29414,29416,29418,29420,29422,29424,29426,29428,29430,29432],{"class":611,"line":549},[609,29389,615],{"class":614},[609,29391,273],{"class":618},[609,29393,785],{"class":614},[609,29395,1993],{"class":622},[609,29397,629],{"class":614},[609,29399,632],{"class":614},[609,29401,1470],{"class":655},[609,29403,796],{"class":795},[609,29405,659],{"class":614},[609,29407,29408],{"class":795}," 0.4",[609,29410,659],{"class":614},[609,29412,29413],{"class":795}," 42",[609,29415,659],{"class":614},[609,29417,2728],{"class":795},[609,29419,1485],{"class":655},[609,29421,632],{"class":614},[609,29423,3982],{"class":622},[609,29425,629],{"class":614},[609,29427,632],{"class":614},[609,29429,6742],{"class":635},[609,29431,632],{"class":614},[609,29433,759],{"class":614},[609,29435,29436],{"class":611,"line":550},[609,29437,714],{"emptyLinePlaceholder":566},[609,29439,29440],{"class":611,"line":680},[609,29441,29442],{"class":655},"// Torus with a custom material transformations\n",[609,29444,29445,29447,29449,29451,29453,29455,29457,29459,29461,29463,29465,29467,29469,29471,29473,29475,29477,29480,29482,29485,29487,29489,29491,29493,29495,29497,29499,29501,29503,29505,29508,29510,29512,29514,29516],{"class":611,"line":701},[609,29446,615],{"class":614},[609,29448,273],{"class":618},[609,29450,5435],{"class":622},[609,29452,629],{"class":614},[609,29454,632],{"class":614},[609,29456,5647],{"class":635},[609,29458,632],{"class":614},[609,29460,785],{"class":614},[609,29462,1993],{"class":622},[609,29464,629],{"class":614},[609,29466,632],{"class":614},[609,29468,1470],{"class":655},[609,29470,4649],{"class":795},[609,29472,659],{"class":614},[609,29474,29408],{"class":795},[609,29476,659],{"class":614},[609,29478,29479],{"class":795}," 16",[609,29481,659],{"class":614},[609,29483,29484],{"class":795}," 80",[609,29486,1485],{"class":655},[609,29488,632],{"class":614},[609,29490,785],{"class":614},[609,29492,1463],{"class":622},[609,29494,629],{"class":614},[609,29496,632],{"class":614},[609,29498,1470],{"class":655},[609,29500,4092],{"class":614},[609,29502,796],{"class":795},[609,29504,659],{"class":614},[609,29506,29507],{"class":795}," 6",[609,29509,659],{"class":614},[609,29511,12722],{"class":795},[609,29513,1485],{"class":655},[609,29515,632],{"class":614},[609,29517,641],{"class":614},[609,29519,29520],{"class":611,"line":711},[609,29521,24012],{"class":655},[609,29523,29524,29526,29528],{"class":611,"line":717},[609,29525,704],{"class":614},[609,29527,273],{"class":618},[609,29529,641],{"class":614},[1303,29531,24023],{},{"title":548,"searchDepth":549,"depth":550,"links":29533},[29534],{"id":596,"depth":550,"text":15},"Short-cut for a TorusGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":273,"description":29535},"yySx0l9wZ0o7oTaUN9FO6Q3RIbMpJeR5NAvohXoIacY",{"id":29540,"title":277,"body":29541,"description":29725,"extension":563,"links":564,"meta":29726,"navigation":566,"path":278,"seo":29727,"stem":279,"__hash__":29728},"docs/2.api/5.shapes/torus-knot.md",{"type":473,"value":29542,"toc":29722},[29543,29548,29558,29564,29570,29572,29720],[580,29544,29545],{},[29546,29547],"shapes-torus-knot",{},[586,29549,2257,29550,3279,29552,23863,29555,1122],{},[590,29551,2260],{},[590,29553,29554],{},"\u003CTorusKnot />",[590,29556,29557],{},"TorusKnotGeometry",[598,29559,29562],{"className":29560,"code":29561,"language":23872},[23870],"args: [\n  radius: number,\n  tube: number,\n  tubularSegments: number,\n  radialSegments: number,\n  p: number,\n  q: number\n]\n",[590,29563,29561],{"__ignoreMap":548},[586,29565,23877,29566],{},[1116,29567,29557],{"href":29568,"rel":29569},"https://threejs.org/docs/?q=torus#api/en/geometries/TorusKnotGeometry",[1120],[476,29571,15],{"id":596},[598,29573,29575],{"className":600,"code":29574,"language":605,"meta":548,"style":548},"\u003CTorusKnot :args=\"[0.6, 0.2, 64, 8]\" color=\"orange\" />\n\n// TorusKnot with a custom material transformations\n\u003CTorusKnot ref=\"torusKnotRef\" :args=\"[0.6, 0.2, 64, 8]\" :position=\"[-2, 6, 2]\">\n  \u003CTresMeshToonMaterial color=\"orange\" />\n\u003C/TorusKnot>\n",[590,29576,29577,29626,29630,29635,29708,29712],{"__ignoreMap":548},[609,29578,29579,29581,29584,29586,29588,29590,29592,29594,29596,29598,29601,29603,29606,29608,29610,29612,29614,29616,29618,29620,29622,29624],{"class":611,"line":549},[609,29580,615],{"class":614},[609,29582,29583],{"class":618},"TorusKnot",[609,29585,785],{"class":614},[609,29587,1993],{"class":622},[609,29589,629],{"class":614},[609,29591,632],{"class":614},[609,29593,1470],{"class":655},[609,29595,23717],{"class":795},[609,29597,659],{"class":614},[609,29599,29600],{"class":795}," 0.2",[609,29602,659],{"class":614},[609,29604,29605],{"class":795}," 64",[609,29607,659],{"class":614},[609,29609,24842],{"class":795},[609,29611,1485],{"class":655},[609,29613,632],{"class":614},[609,29615,3982],{"class":622},[609,29617,629],{"class":614},[609,29619,632],{"class":614},[609,29621,6742],{"class":635},[609,29623,632],{"class":614},[609,29625,759],{"class":614},[609,29627,29628],{"class":611,"line":550},[609,29629,714],{"emptyLinePlaceholder":566},[609,29631,29632],{"class":611,"line":680},[609,29633,29634],{"class":655},"// TorusKnot with a custom material transformations\n",[609,29636,29637,29639,29641,29643,29645,29647,29650,29652,29654,29656,29658,29660,29662,29664,29666,29668,29670,29672,29674,29676,29678,29680,29682,29684,29686,29688,29690,29692,29694,29696,29698,29700,29702,29704,29706],{"class":611,"line":701},[609,29638,615],{"class":614},[609,29640,29583],{"class":618},[609,29642,5435],{"class":622},[609,29644,629],{"class":614},[609,29646,632],{"class":614},[609,29648,29649],{"class":635},"torusKnotRef",[609,29651,632],{"class":614},[609,29653,785],{"class":614},[609,29655,1993],{"class":622},[609,29657,629],{"class":614},[609,29659,632],{"class":614},[609,29661,1470],{"class":655},[609,29663,23717],{"class":795},[609,29665,659],{"class":614},[609,29667,29600],{"class":795},[609,29669,659],{"class":614},[609,29671,29605],{"class":795},[609,29673,659],{"class":614},[609,29675,24842],{"class":795},[609,29677,1485],{"class":655},[609,29679,632],{"class":614},[609,29681,785],{"class":614},[609,29683,1463],{"class":622},[609,29685,629],{"class":614},[609,29687,632],{"class":614},[609,29689,1470],{"class":655},[609,29691,4092],{"class":614},[609,29693,796],{"class":795},[609,29695,659],{"class":614},[609,29697,29507],{"class":795},[609,29699,659],{"class":614},[609,29701,25520],{"class":795},[609,29703,1485],{"class":655},[609,29705,632],{"class":614},[609,29707,641],{"class":614},[609,29709,29710],{"class":611,"line":711},[609,29711,24012],{"class":655},[609,29713,29714,29716,29718],{"class":611,"line":717},[609,29715,704],{"class":614},[609,29717,29583],{"class":618},[609,29719,641],{"class":614},[1303,29721,24023],{},{"title":548,"searchDepth":549,"depth":550,"links":29723},[29724],{"id":596,"depth":550,"text":15},"Short-cut for a TorusKnotGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":277,"description":29725},"OlUiMxF35Ud6Y1uh8PxYgHq7DDQtWj0nint0vp1wx2U",{"id":29730,"title":281,"body":29731,"description":30166,"extension":563,"links":564,"meta":30167,"navigation":566,"path":282,"seo":30168,"stem":283,"__hash__":30169},"docs/2.api/5.shapes/tube.md",{"type":473,"value":29732,"toc":30162},[29733,29738,29748,29754,29756,30150,30153,30159],[580,29734,29735],{},[29736,29737],"shapes-tube",{},[586,29739,2257,29740,3279,29742,23863,29745,1122],{},[590,29741,2260],{},[590,29743,29744],{},"\u003CTube />",[590,29746,29747],{},"TubeGeometry",[586,29749,23877,29750],{},[1116,29751,29747],{"href":29752,"rel":29753},"https://threejs.org/docs/?q=tube#api/en/geometries/TubeGeometry",[1120],[476,29755,15],{"id":596},[598,29757,29759],{"className":600,"code":29758,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { Tube } from '@tresjs/cientos'\nimport { CubicBezierCurve3, Vector3 } from 'three'\nimport { ref } from 'vue'\n\nconst tubePath = ref(new CubicBezierCurve3(\n  new Vector3(-1, 0, 0),\n  new Vector3(-0.5, -1, 0),\n  new Vector3(0.5, 1, 0),\n  new Vector3(1, 0, 0),\n))\n\u003C/script>\n\n\u003Ctemplate>\n  \u003C!-- TubeGeometry needs a curve path to be construct -->\n  \u003CTube :args=\"[tubePath, 20, 0.2, 8, false]\" color=\"orange\" />\n\n  \u003C!-- Tube with a custom material transformations -->\n  \u003CTube :args=\"[tubePath, 20, 0.2, 8, false]\" :position=\"[0, 4, 0]\">\n    \u003CTresMeshToonMaterial color=\"orange\" />\n  \u003C/Tube>\n\u003C/template>\n",[590,29760,29761,29781,29800,29823,29841,29845,29866,29891,29918,29940,29962,29967,29975,29979,29987,29992,30043,30047,30052,30116,30134,30142],{"__ignoreMap":548},[609,29762,29763,29765,29767,29769,29771,29773,29775,29777,29779],{"class":611,"line":549},[609,29764,615],{"class":614},[609,29766,619],{"class":618},[609,29768,623],{"class":622},[609,29770,626],{"class":622},[609,29772,629],{"class":614},[609,29774,632],{"class":614},[609,29776,636],{"class":635},[609,29778,632],{"class":614},[609,29780,641],{"class":614},[609,29782,29783,29785,29787,29790,29792,29794,29796,29798],{"class":611,"line":550},[609,29784,649],{"class":648},[609,29786,652],{"class":614},[609,29788,29789],{"class":655}," Tube",[609,29791,665],{"class":614},[609,29793,668],{"class":648},[609,29795,671],{"class":614},[609,29797,674],{"class":635},[609,29799,677],{"class":614},[609,29801,29802,29804,29806,29809,29811,29813,29815,29817,29819,29821],{"class":611,"line":680},[609,29803,649],{"class":648},[609,29805,652],{"class":614},[609,29807,29808],{"class":655}," CubicBezierCurve3",[609,29810,659],{"class":614},[609,29812,24145],{"class":655},[609,29814,665],{"class":614},[609,29816,668],{"class":648},[609,29818,671],{"class":614},[609,29820,2682],{"class":635},[609,29822,677],{"class":614},[609,29824,29825,29827,29829,29831,29833,29835,29837,29839],{"class":611,"line":701},[609,29826,649],{"class":648},[609,29828,652],{"class":614},[609,29830,5435],{"class":655},[609,29832,665],{"class":614},[609,29834,668],{"class":648},[609,29836,671],{"class":614},[609,29838,605],{"class":635},[609,29840,677],{"class":614},[609,29842,29843],{"class":611,"line":711},[609,29844,714],{"emptyLinePlaceholder":566},[609,29846,29847,29849,29852,29854,29856,29858,29861,29863],{"class":611,"line":717},[609,29848,2693],{"class":622},[609,29850,29851],{"class":655}," tubePath ",[609,29853,629],{"class":614},[609,29855,5435],{"class":2804},[609,29857,2974],{"class":655},[609,29859,29860],{"class":614},"new",[609,29862,29808],{"class":2804},[609,29864,29865],{"class":655},"(\n",[609,29867,29868,29871,29873,29875,29877,29879,29881,29883,29885,29887,29889],{"class":611,"line":727},[609,29869,29870],{"class":614},"  new",[609,29872,24145],{"class":2804},[609,29874,2974],{"class":655},[609,29876,4092],{"class":614},[609,29878,1897],{"class":795},[609,29880,659],{"class":614},[609,29882,12722],{"class":795},[609,29884,659],{"class":614},[609,29886,12722],{"class":795},[609,29888,4129],{"class":655},[609,29890,14979],{"class":614},[609,29892,29893,29895,29897,29899,29901,29903,29905,29908,29910,29912,29914,29916],{"class":611,"line":750},[609,29894,29870],{"class":614},[609,29896,24145],{"class":2804},[609,29898,2974],{"class":655},[609,29900,4092],{"class":614},[609,29902,1517],{"class":795},[609,29904,659],{"class":614},[609,29906,29907],{"class":614}," -",[609,29909,1897],{"class":795},[609,29911,659],{"class":614},[609,29913,12722],{"class":795},[609,29915,4129],{"class":655},[609,29917,14979],{"class":614},[609,29919,29920,29922,29924,29926,29928,29930,29932,29934,29936,29938],{"class":611,"line":762},[609,29921,29870],{"class":614},[609,29923,24145],{"class":2804},[609,29925,2974],{"class":655},[609,29927,1517],{"class":795},[609,29929,659],{"class":614},[609,29931,23911],{"class":795},[609,29933,659],{"class":614},[609,29935,12722],{"class":795},[609,29937,4129],{"class":655},[609,29939,14979],{"class":614},[609,29941,29942,29944,29946,29948,29950,29952,29954,29956,29958,29960],{"class":611,"line":772},[609,29943,29870],{"class":614},[609,29945,24145],{"class":2804},[609,29947,2974],{"class":655},[609,29949,1897],{"class":795},[609,29951,659],{"class":614},[609,29953,12722],{"class":795},[609,29955,659],{"class":614},[609,29957,12722],{"class":795},[609,29959,4129],{"class":655},[609,29961,14979],{"class":614},[609,29963,29964],{"class":611,"line":777},[609,29965,29966],{"class":655},"))\n",[609,29968,29969,29971,29973],{"class":611,"line":803},[609,29970,704],{"class":614},[609,29972,619],{"class":618},[609,29974,641],{"class":614},[609,29976,29977],{"class":611,"line":603},[609,29978,714],{"emptyLinePlaceholder":566},[609,29980,29981,29983,29985],{"class":611,"line":826},[609,29982,615],{"class":614},[609,29984,722],{"class":618},[609,29986,641],{"class":614},[609,29988,29989],{"class":611,"line":837},[609,29990,29991],{"class":1185},"  \u003C!-- TubeGeometry needs a curve path to be construct -->\n",[609,29993,29994,29996,29998,30000,30002,30004,30006,30008,30011,30013,30015,30017,30019,30021,30023,30025,30027,30029,30031,30033,30035,30037,30039,30041],{"class":611,"line":848},[609,29995,730],{"class":614},[609,29997,281],{"class":618},[609,29999,785],{"class":614},[609,30001,1993],{"class":622},[609,30003,629],{"class":614},[609,30005,632],{"class":614},[609,30007,1470],{"class":614},[609,30009,30010],{"class":655},"tubePath",[609,30012,1475],{"class":614},[609,30014,24411],{"class":795},[609,30016,1475],{"class":614},[609,30018,9041],{"class":795},[609,30020,1475],{"class":614},[609,30022,16009],{"class":795},[609,30024,1475],{"class":614},[609,30026,947],{"class":3874},[609,30028,1485],{"class":614},[609,30030,632],{"class":614},[609,30032,3982],{"class":622},[609,30034,629],{"class":614},[609,30036,632],{"class":614},[609,30038,6742],{"class":635},[609,30040,632],{"class":614},[609,30042,759],{"class":614},[609,30044,30045],{"class":611,"line":858},[609,30046,714],{"emptyLinePlaceholder":566},[609,30048,30049],{"class":611,"line":604},[609,30050,30051],{"class":1185},"  \u003C!-- Tube with a custom material transformations -->\n",[609,30053,30054,30056,30058,30060,30062,30064,30066,30068,30070,30072,30074,30076,30078,30080,30082,30084,30086,30088,30090,30092,30094,30096,30098,30100,30102,30104,30106,30108,30110,30112,30114],{"class":611,"line":878},[609,30055,730],{"class":614},[609,30057,281],{"class":618},[609,30059,785],{"class":614},[609,30061,1993],{"class":622},[609,30063,629],{"class":614},[609,30065,632],{"class":614},[609,30067,1470],{"class":614},[609,30069,30010],{"class":655},[609,30071,1475],{"class":614},[609,30073,24411],{"class":795},[609,30075,1475],{"class":614},[609,30077,9041],{"class":795},[609,30079,1475],{"class":614},[609,30081,16009],{"class":795},[609,30083,1475],{"class":614},[609,30085,947],{"class":3874},[609,30087,1485],{"class":614},[609,30089,632],{"class":614},[609,30091,785],{"class":614},[609,30093,1463],{"class":622},[609,30095,629],{"class":614},[609,30097,632],{"class":614},[609,30099,1470],{"class":614},[609,30101,941],{"class":795},[609,30103,1475],{"class":614},[609,30105,3494],{"class":795},[609,30107,1475],{"class":614},[609,30109,941],{"class":795},[609,30111,1485],{"class":614},[609,30113,632],{"class":614},[609,30115,641],{"class":614},[609,30117,30118,30120,30122,30124,30126,30128,30130,30132],{"class":611,"line":888},[609,30119,753],{"class":614},[609,30121,6733],{"class":618},[609,30123,3982],{"class":622},[609,30125,629],{"class":614},[609,30127,632],{"class":614},[609,30129,6742],{"class":635},[609,30131,632],{"class":614},[609,30133,759],{"class":614},[609,30135,30136,30138,30140],{"class":611,"line":2956},[609,30137,881],{"class":614},[609,30139,281],{"class":618},[609,30141,641],{"class":614},[609,30143,30144,30146,30148],{"class":611,"line":2964},[609,30145,704],{"class":614},[609,30147,722],{"class":618},[609,30149,641],{"class":614},[476,30151,30152],{"id":1993},"Args",[598,30154,30157],{"className":30155,"code":30156,"language":23872},[23870],"type CurveType = QuadraticBezierCurve3 | CubicBezierCurve3 | CatmullRomCurve3 | LineCurve3\n\nargs: [\n  path: CurveType,\n  tubularSegments: number,\n  radius: number,\n  radialSegments: number,\n  closed: boolean\n]\n",[590,30158,30156],{"__ignoreMap":548},[1303,30160,30161],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .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 pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":548,"searchDepth":549,"depth":550,"links":30163},[30164,30165],{"id":596,"depth":550,"text":15},{"id":1993,"depth":550,"text":30152},"Short-cut for a TubeGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":281,"description":30166},"dl45gDobAVZZJ-EiABsXN_ZQHrn_4vSzVw1r8h_AnrY",[30171,30486,31007,31218,31515],{"id":30172,"title":291,"body":30173,"description":30482,"extension":563,"links":564,"meta":30483,"navigation":566,"path":292,"seo":30484,"stem":293,"__hash__":30485},"docs/2.api/6.debug-performance/helper.md",{"type":473,"value":30174,"toc":30478},[30175,30180,30186,30188,30436,30438,30476],[2562,30176,30177],{},[30178,30179],"debug-performance-helper",{},[586,30181,30182,30185],{},[590,30183,30184],{},"\u003CHelper />"," handles instantiation, updates, and removal/disposal of THREE Helpers.",[476,30187,15],{"id":596},[598,30189,30192],{"className":600,"code":30190,"highlights":30191,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Helper } from '@tresjs/cientos'\nimport { BoxHelper } from 'three'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" />\n    \u003CTresMesh ref=\"boxRef\">\n      \u003CTresBoxGeometry />\n      \u003CTresMeshNormalMaterial />\n      \u003CHelper :type=\"BoxHelper\" :args=\"[0xff0000]\" />\n    \u003C/TresMesh>\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[680,603],[590,30193,30194,30214,30232,30252,30271,30279,30283,30291,30299,30331,30349,30357,30365,30404,30412,30420,30428],{"__ignoreMap":548},[609,30195,30196,30198,30200,30202,30204,30206,30208,30210,30212],{"class":611,"line":549},[609,30197,615],{"class":614},[609,30199,619],{"class":618},[609,30201,623],{"class":622},[609,30203,626],{"class":622},[609,30205,629],{"class":614},[609,30207,632],{"class":614},[609,30209,636],{"class":635},[609,30211,632],{"class":614},[609,30213,641],{"class":614},[609,30215,30216,30218,30220,30222,30224,30226,30228,30230],{"class":611,"line":550},[609,30217,649],{"class":648},[609,30219,652],{"class":614},[609,30221,687],{"class":655},[609,30223,665],{"class":614},[609,30225,668],{"class":648},[609,30227,671],{"class":614},[609,30229,696],{"class":635},[609,30231,677],{"class":614},[609,30233,30235,30237,30239,30242,30244,30246,30248,30250],{"class":30234,"line":680},[611,645],[609,30236,649],{"class":648},[609,30238,652],{"class":614},[609,30240,30241],{"class":655}," Helper",[609,30243,665],{"class":614},[609,30245,668],{"class":648},[609,30247,671],{"class":614},[609,30249,674],{"class":635},[609,30251,677],{"class":614},[609,30253,30254,30256,30258,30261,30263,30265,30267,30269],{"class":611,"line":701},[609,30255,649],{"class":648},[609,30257,652],{"class":614},[609,30259,30260],{"class":655}," BoxHelper",[609,30262,665],{"class":614},[609,30264,668],{"class":648},[609,30266,671],{"class":614},[609,30268,2682],{"class":635},[609,30270,677],{"class":614},[609,30272,30273,30275,30277],{"class":611,"line":711},[609,30274,704],{"class":614},[609,30276,619],{"class":618},[609,30278,641],{"class":614},[609,30280,30281],{"class":611,"line":717},[609,30282,714],{"emptyLinePlaceholder":566},[609,30284,30285,30287,30289],{"class":611,"line":727},[609,30286,615],{"class":614},[609,30288,722],{"class":618},[609,30290,641],{"class":614},[609,30292,30293,30295,30297],{"class":611,"line":750},[609,30294,730],{"class":614},[609,30296,733],{"class":618},[609,30298,641],{"class":614},[609,30300,30301,30303,30305,30307,30309,30311,30313,30315,30317,30319,30321,30323,30325,30327,30329],{"class":611,"line":762},[609,30302,753],{"class":614},[609,30304,756],{"class":618},[609,30306,785],{"class":614},[609,30308,1463],{"class":622},[609,30310,629],{"class":614},[609,30312,632],{"class":614},[609,30314,1470],{"class":614},[609,30316,4164],{"class":795},[609,30318,1475],{"class":614},[609,30320,4164],{"class":795},[609,30322,1475],{"class":614},[609,30324,4164],{"class":795},[609,30326,1485],{"class":614},[609,30328,632],{"class":614},[609,30330,759],{"class":614},[609,30332,30333,30335,30337,30339,30341,30343,30345,30347],{"class":611,"line":772},[609,30334,753],{"class":614},[609,30336,832],{"class":618},[609,30338,5435],{"class":622},[609,30340,629],{"class":614},[609,30342,632],{"class":614},[609,30344,8060],{"class":635},[609,30346,632],{"class":614},[609,30348,641],{"class":614},[609,30350,30351,30353,30355],{"class":611,"line":777},[609,30352,829],{"class":614},[609,30354,843],{"class":618},[609,30356,759],{"class":614},[609,30358,30359,30361,30363],{"class":611,"line":803},[609,30360,829],{"class":614},[609,30362,853],{"class":618},[609,30364,759],{"class":614},[609,30366,30368,30370,30372,30374,30377,30379,30381,30384,30386,30388,30390,30392,30394,30396,30398,30400,30402],{"class":30367,"line":603},[611,645],[609,30369,829],{"class":614},[609,30371,291],{"class":618},[609,30373,785],{"class":614},[609,30375,30376],{"class":622},"type",[609,30378,629],{"class":614},[609,30380,632],{"class":614},[609,30382,30383],{"class":655},"BoxHelper",[609,30385,632],{"class":614},[609,30387,785],{"class":614},[609,30389,1993],{"class":622},[609,30391,629],{"class":614},[609,30393,632],{"class":614},[609,30395,1470],{"class":614},[609,30397,20982],{"class":795},[609,30399,1485],{"class":614},[609,30401,632],{"class":614},[609,30403,759],{"class":614},[609,30405,30406,30408,30410],{"class":611,"line":826},[609,30407,871],{"class":614},[609,30409,832],{"class":618},[609,30411,641],{"class":614},[609,30413,30414,30416,30418],{"class":611,"line":837},[609,30415,753],{"class":614},[609,30417,3522],{"class":618},[609,30419,759],{"class":614},[609,30421,30422,30424,30426],{"class":611,"line":848},[609,30423,881],{"class":614},[609,30425,733],{"class":618},[609,30427,641],{"class":614},[609,30429,30430,30432,30434],{"class":611,"line":858},[609,30431,704],{"class":614},[609,30433,722],{"class":618},[609,30435,641],{"class":614},[476,30437,898],{"id":897},[903,30439,30440,30450],{},[906,30441,30442],{},[909,30443,30444,30446,30448],{},[912,30445,914],{"align":973},[912,30447,917],{"align":973},[912,30449,920],{},[922,30451,30452,30463],{},[909,30453,30454,30458,30461],{},[927,30455,30456],{"align":973},[1677,30457,30376],{},[927,30459,30460],{"align":973},"Helper constructor - required",[927,30462],{},[909,30464,30465,30469,30472],{},[927,30466,30467],{"align":973},[1677,30468,1993],{},[927,30470,30471],{"align":973},"Helper constructor args",[927,30473,30474],{},[590,30475,7244],{},[1303,30477,1652],{},{"title":548,"searchDepth":549,"depth":550,"links":30479},[30480,30481],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},"Handles instantiation, updates, and removal/disposal of THREE Helpers.",{},{"title":291,"description":30482},"eCegCHTXKuWv3dso3PuJHIMliJK_ACUVoEreb2IQT48",{"id":30487,"title":295,"body":30488,"description":31003,"extension":563,"links":564,"meta":31004,"navigation":566,"path":296,"seo":31005,"stem":297,"__hash__":31006},"docs/2.api/6.debug-performance/lod.md",{"type":473,"value":30489,"toc":30999},[30490,30495,30498,30509,30511,30946,30948,30996],[2562,30491,30492],{},[30493,30494],"debug-performance-lod",{},[586,30496,30497],{},"Level of Detail - show meshes with more or less geometry based on distance from the camera.",[586,30499,30500,30503,30504,30508],{},[590,30501,30502],{},"\u003CLOD />"," is a wrapper for THREE's ",[1116,30505,295],{"href":30506,"rel":30507},"https://threejs.org/docs/?q=LOD#api/en/objects/LOD",[1120]," class.",[476,30510,15],{"id":596},[598,30512,30514],{"className":600,"code":30513,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { LOD } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 2, 5]\" />\n    \u003CLOD :levels=\"[0, 5, 10]\">\n      \u003C!-- High detail mesh - shown when close -->\n      \u003CTresMesh>\n        \u003CTresSphereGeometry :args=\"[1, 32, 32]\" />\n        \u003CTresMeshStandardMaterial color=\"red\" />\n      \u003C/TresMesh>\n      \u003C!-- Medium detail mesh - shown at mid distance -->\n      \u003CTresMesh>\n        \u003CTresSphereGeometry :args=\"[1, 16, 16]\" />\n        \u003CTresMeshStandardMaterial color=\"orange\" />\n      \u003C/TresMesh>\n      \u003C!-- Low detail mesh - shown when far -->\n      \u003CTresMesh>\n        \u003CTresSphereGeometry :args=\"[1, 8, 8]\" />\n        \u003CTresMeshStandardMaterial color=\"yellow\" />\n      \u003C/TresMesh>\n    \u003C/LOD>\n    \u003CTresAmbientLight />\n    \u003CTresDirectionalLight :position=\"[0, 2, 4]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n",[590,30515,30516,30536,30554,30573,30581,30585,30593,30601,30633,30666,30671,30679,30711,30730,30738,30743,30751,30784,30802,30810,30815,30823,30855,30874,30882,30890,30898,30930,30938],{"__ignoreMap":548},[609,30517,30518,30520,30522,30524,30526,30528,30530,30532,30534],{"class":611,"line":549},[609,30519,615],{"class":614},[609,30521,619],{"class":618},[609,30523,623],{"class":622},[609,30525,626],{"class":622},[609,30527,629],{"class":614},[609,30529,632],{"class":614},[609,30531,636],{"class":635},[609,30533,632],{"class":614},[609,30535,641],{"class":614},[609,30537,30538,30540,30542,30544,30546,30548,30550,30552],{"class":611,"line":550},[609,30539,649],{"class":648},[609,30541,652],{"class":614},[609,30543,687],{"class":655},[609,30545,665],{"class":614},[609,30547,668],{"class":648},[609,30549,671],{"class":614},[609,30551,696],{"class":635},[609,30553,677],{"class":614},[609,30555,30556,30558,30560,30563,30565,30567,30569,30571],{"class":611,"line":680},[609,30557,649],{"class":648},[609,30559,652],{"class":614},[609,30561,30562],{"class":655}," LOD",[609,30564,665],{"class":614},[609,30566,668],{"class":648},[609,30568,671],{"class":614},[609,30570,674],{"class":635},[609,30572,677],{"class":614},[609,30574,30575,30577,30579],{"class":611,"line":701},[609,30576,704],{"class":614},[609,30578,619],{"class":618},[609,30580,641],{"class":614},[609,30582,30583],{"class":611,"line":711},[609,30584,714],{"emptyLinePlaceholder":566},[609,30586,30587,30589,30591],{"class":611,"line":717},[609,30588,615],{"class":614},[609,30590,722],{"class":618},[609,30592,641],{"class":614},[609,30594,30595,30597,30599],{"class":611,"line":727},[609,30596,730],{"class":614},[609,30598,733],{"class":618},[609,30600,641],{"class":614},[609,30602,30603,30605,30607,30609,30611,30613,30615,30617,30619,30621,30623,30625,30627,30629,30631],{"class":611,"line":750},[609,30604,753],{"class":614},[609,30606,756],{"class":618},[609,30608,785],{"class":614},[609,30610,1463],{"class":622},[609,30612,629],{"class":614},[609,30614,632],{"class":614},[609,30616,1470],{"class":614},[609,30618,941],{"class":795},[609,30620,1475],{"class":614},[609,30622,796],{"class":795},[609,30624,1475],{"class":614},[609,30626,2400],{"class":795},[609,30628,1485],{"class":614},[609,30630,632],{"class":614},[609,30632,759],{"class":614},[609,30634,30635,30637,30639,30641,30644,30646,30648,30650,30652,30654,30656,30658,30660,30662,30664],{"class":611,"line":762},[609,30636,753],{"class":614},[609,30638,295],{"class":618},[609,30640,785],{"class":614},[609,30642,30643],{"class":622},"levels",[609,30645,629],{"class":614},[609,30647,632],{"class":614},[609,30649,1470],{"class":614},[609,30651,941],{"class":795},[609,30653,1475],{"class":614},[609,30655,2400],{"class":795},[609,30657,1475],{"class":614},[609,30659,1482],{"class":795},[609,30661,1485],{"class":614},[609,30663,632],{"class":614},[609,30665,641],{"class":614},[609,30667,30668],{"class":611,"line":772},[609,30669,30670],{"class":1185},"      \u003C!-- High detail mesh - shown when close -->\n",[609,30672,30673,30675,30677],{"class":611,"line":777},[609,30674,829],{"class":614},[609,30676,832],{"class":618},[609,30678,641],{"class":614},[609,30680,30681,30683,30685,30687,30689,30691,30693,30695,30697,30699,30701,30703,30705,30707,30709],{"class":611,"line":803},[609,30682,840],{"class":614},[609,30684,4739],{"class":618},[609,30686,785],{"class":614},[609,30688,1993],{"class":622},[609,30690,629],{"class":614},[609,30692,632],{"class":614},[609,30694,1470],{"class":614},[609,30696,1897],{"class":795},[609,30698,1475],{"class":614},[609,30700,5740],{"class":795},[609,30702,1475],{"class":614},[609,30704,5740],{"class":795},[609,30706,1485],{"class":614},[609,30708,632],{"class":614},[609,30710,759],{"class":614},[609,30712,30713,30715,30717,30719,30721,30723,30726,30728],{"class":611,"line":603},[609,30714,840],{"class":614},[609,30716,8099],{"class":618},[609,30718,3982],{"class":622},[609,30720,629],{"class":614},[609,30722,632],{"class":614},[609,30724,30725],{"class":635},"red",[609,30727,632],{"class":614},[609,30729,759],{"class":614},[609,30731,30732,30734,30736],{"class":611,"line":826},[609,30733,861],{"class":614},[609,30735,832],{"class":618},[609,30737,641],{"class":614},[609,30739,30740],{"class":611,"line":837},[609,30741,30742],{"class":1185},"      \u003C!-- Medium detail mesh - shown at mid distance -->\n",[609,30744,30745,30747,30749],{"class":611,"line":848},[609,30746,829],{"class":614},[609,30748,832],{"class":618},[609,30750,641],{"class":614},[609,30752,30753,30755,30757,30759,30761,30763,30765,30767,30769,30771,30774,30776,30778,30780,30782],{"class":611,"line":858},[609,30754,840],{"class":614},[609,30756,4739],{"class":618},[609,30758,785],{"class":614},[609,30760,1993],{"class":622},[609,30762,629],{"class":614},[609,30764,632],{"class":614},[609,30766,1470],{"class":614},[609,30768,1897],{"class":795},[609,30770,1475],{"class":614},[609,30772,30773],{"class":795},"16",[609,30775,1475],{"class":614},[609,30777,30773],{"class":795},[609,30779,1485],{"class":614},[609,30781,632],{"class":614},[609,30783,759],{"class":614},[609,30785,30786,30788,30790,30792,30794,30796,30798,30800],{"class":611,"line":604},[609,30787,840],{"class":614},[609,30789,8099],{"class":618},[609,30791,3982],{"class":622},[609,30793,629],{"class":614},[609,30795,632],{"class":614},[609,30797,6742],{"class":635},[609,30799,632],{"class":614},[609,30801,759],{"class":614},[609,30803,30804,30806,30808],{"class":611,"line":878},[609,30805,861],{"class":614},[609,30807,832],{"class":618},[609,30809,641],{"class":614},[609,30811,30812],{"class":611,"line":888},[609,30813,30814],{"class":1185},"      \u003C!-- Low detail mesh - shown when far -->\n",[609,30816,30817,30819,30821],{"class":611,"line":2956},[609,30818,829],{"class":614},[609,30820,832],{"class":618},[609,30822,641],{"class":614},[609,30824,30825,30827,30829,30831,30833,30835,30837,30839,30841,30843,30845,30847,30849,30851,30853],{"class":611,"line":2964},[609,30826,840],{"class":614},[609,30828,4739],{"class":618},[609,30830,785],{"class":614},[609,30832,1993],{"class":622},[609,30834,629],{"class":614},[609,30836,632],{"class":614},[609,30838,1470],{"class":614},[609,30840,1897],{"class":795},[609,30842,1475],{"class":614},[609,30844,16009],{"class":795},[609,30846,1475],{"class":614},[609,30848,16009],{"class":795},[609,30850,1485],{"class":614},[609,30852,632],{"class":614},[609,30854,759],{"class":614},[609,30856,30857,30859,30861,30863,30865,30867,30870,30872],{"class":611,"line":2994},[609,30858,840],{"class":614},[609,30860,8099],{"class":618},[609,30862,3982],{"class":622},[609,30864,629],{"class":614},[609,30866,632],{"class":614},[609,30868,30869],{"class":635},"yellow",[609,30871,632],{"class":614},[609,30873,759],{"class":614},[609,30875,30876,30878,30880],{"class":611,"line":3011},[609,30877,861],{"class":614},[609,30879,832],{"class":618},[609,30881,641],{"class":614},[609,30883,30884,30886,30888],{"class":611,"line":3026},[609,30885,871],{"class":614},[609,30887,295],{"class":618},[609,30889,641],{"class":614},[609,30891,30892,30894,30896],{"class":611,"line":3051},[609,30893,753],{"class":614},[609,30895,3522],{"class":618},[609,30897,759],{"class":614},[609,30899,30900,30902,30904,30906,30908,30910,30912,30914,30916,30918,30920,30922,30924,30926,30928],{"class":611,"line":2595},[609,30901,753],{"class":614},[609,30903,3543],{"class":618},[609,30905,785],{"class":614},[609,30907,1463],{"class":622},[609,30909,629],{"class":614},[609,30911,632],{"class":614},[609,30913,1470],{"class":614},[609,30915,941],{"class":795},[609,30917,1475],{"class":614},[609,30919,796],{"class":795},[609,30921,1475],{"class":614},[609,30923,3494],{"class":795},[609,30925,1485],{"class":614},[609,30927,632],{"class":614},[609,30929,759],{"class":614},[609,30931,30932,30934,30936],{"class":611,"line":3066},[609,30933,881],{"class":614},[609,30935,733],{"class":618},[609,30937,641],{"class":614},[609,30939,30940,30942,30944],{"class":611,"line":3096},[609,30941,704],{"class":614},[609,30943,722],{"class":618},[609,30945,641],{"class":614},[476,30947,898],{"id":897},[903,30949,30950,30960],{},[906,30951,30952],{},[909,30953,30954,30956,30958],{},[912,30955,914],{"align":973},[912,30957,917],{"align":973},[912,30959,920],{},[922,30961,30962,30982],{},[909,30963,30964,30968,30980],{},[927,30965,30966],{"align":973},[1677,30967,30643],{},[927,30969,30970,30973,30974,30976,30977,30979],{"align":973},[590,30971,30972],{},"number[]"," - The distances at which to display each level of detail. There should be one ",[590,30975,30643],{}," value for each ",[590,30978,295],{}," child.",[927,30981],{},[909,30983,30984,30989,30992],{},[927,30985,30986],{"align":973},[1677,30987,30988],{},"hysteresis",[927,30990,30991],{"align":973},"Threshold used to avoid flickering at LOD boundaries, as a fraction of distance.",[927,30993,30994],{},[590,30995,7211],{},[1303,30997,30998],{},"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 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":548,"searchDepth":549,"depth":550,"links":31000},[31001,31002],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},"Level of Detail - show meshes with more or less geometry based on distance from camera.",{},{"title":295,"description":31003},"ue6lcrsKRgNjxBsudKxGB368Ot9yPUV2C-0TWgeZzbE",{"id":31008,"title":299,"body":31009,"description":31214,"extension":563,"links":564,"meta":31215,"navigation":566,"path":300,"seo":31216,"stem":301,"__hash__":31217},"docs/2.api/6.debug-performance/stats.md",{"type":473,"value":31010,"toc":31210},[31011,31025,31034,31038,31155,31157,31191,31208],[586,31012,31013,31018,31019,31024],{},[1116,31014,31017],{"href":31015,"rel":31016},"https://github.com/mrdoob/stats.js/",[1120],"stats.js"," is a JavaScript performance monitor, made by ",[1116,31020,31023],{"href":31021,"rel":31022},"https://github.com/mrdoob",[1120],"mrdoob",". stats.js provides a simple info box that will help you monitor your code performance.",[586,31026,31027,31030,31031,31033],{},[1677,31028,31029],{},"Cientos"," provides a component called ",[590,31032,299],{}," that creates a panel without effort or configuration in the top left corner where you'll be able to monitor your app.",[476,31035,31037],{"id":31036},"basic-usage","Basic usage",[598,31039,31042],{"className":600,"code":31040,"highlights":31041,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Stats } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CStats />\n  \u003C/TresCanvas>\n\u003C/template>\n",[680,750],[590,31043,31044,31064,31082,31102,31110,31114,31122,31130,31139,31147],{"__ignoreMap":548},[609,31045,31046,31048,31050,31052,31054,31056,31058,31060,31062],{"class":611,"line":549},[609,31047,615],{"class":614},[609,31049,619],{"class":618},[609,31051,623],{"class":622},[609,31053,626],{"class":622},[609,31055,629],{"class":614},[609,31057,632],{"class":614},[609,31059,636],{"class":635},[609,31061,632],{"class":614},[609,31063,641],{"class":614},[609,31065,31066,31068,31070,31072,31074,31076,31078,31080],{"class":611,"line":550},[609,31067,649],{"class":648},[609,31069,652],{"class":614},[609,31071,687],{"class":655},[609,31073,665],{"class":614},[609,31075,668],{"class":648},[609,31077,671],{"class":614},[609,31079,696],{"class":635},[609,31081,677],{"class":614},[609,31083,31085,31087,31089,31092,31094,31096,31098,31100],{"class":31084,"line":680},[611,645],[609,31086,649],{"class":648},[609,31088,652],{"class":614},[609,31090,31091],{"class":655}," Stats",[609,31093,665],{"class":614},[609,31095,668],{"class":648},[609,31097,671],{"class":614},[609,31099,674],{"class":635},[609,31101,677],{"class":614},[609,31103,31104,31106,31108],{"class":611,"line":701},[609,31105,704],{"class":614},[609,31107,619],{"class":618},[609,31109,641],{"class":614},[609,31111,31112],{"class":611,"line":711},[609,31113,714],{"emptyLinePlaceholder":566},[609,31115,31116,31118,31120],{"class":611,"line":717},[609,31117,615],{"class":614},[609,31119,722],{"class":618},[609,31121,641],{"class":614},[609,31123,31124,31126,31128],{"class":611,"line":727},[609,31125,730],{"class":614},[609,31127,733],{"class":618},[609,31129,641],{"class":614},[609,31131,31133,31135,31137],{"class":31132,"line":750},[611,645],[609,31134,753],{"class":614},[609,31136,299],{"class":618},[609,31138,759],{"class":614},[609,31140,31141,31143,31145],{"class":611,"line":762},[609,31142,881],{"class":614},[609,31144,733],{"class":618},[609,31146,641],{"class":614},[609,31148,31149,31151,31153],{"class":611,"line":772},[609,31150,704],{"class":614},[609,31152,722],{"class":618},[609,31154,641],{"class":614},[476,31156,898],{"id":897},[903,31158,31159,31171],{},[906,31160,31161],{},[909,31162,31163,31165,31167,31169],{},[912,31164,914],{"align":973},[912,31166,11906],{},[912,31168,920],{},[912,31170,917],{},[922,31172,31173],{},[909,31174,31175,31180,31184,31188],{},[927,31176,31177],{"align":973},[1677,31178,31179],{},"showPanel",[927,31181,31182],{},[590,31183,2541],{},[927,31185,31186],{},[590,31187,941],{},[927,31189,31190],{},"FPS monitor.",[3140,31192,31193,31196,31199,31202],{},[3143,31194,31195],{},"0: FPS Frames rendered in the last second. The higher the number the better.",[3143,31197,31198],{},"1: MS Milliseconds needed to render a frame. The lower the number the better.",[3143,31200,31201],{},"2: MB MBytes of allocated memory. (Run Chrome with --enable-precise-memory-info)",[3143,31203,31204,31205,1122],{},"3+: CUSTOM User-defined panel support. For more info please check ",[1116,31206,31017],{"href":31015,"rel":31207},[1120],[1303,31209,22322],{},{"title":548,"searchDepth":549,"depth":550,"links":31211},[31212,31213],{"id":31036,"depth":550,"text":31037},{"id":897,"depth":550,"text":898},"JavaScript performance monitor to track FPS, MS, and memory usage.",{},{"title":299,"description":31214},"CEx2GwVgDehipIa_mCiC4Mpq7SAIqbwq61OScXwW86c",{"id":31219,"title":303,"body":31220,"description":31511,"extension":563,"links":564,"meta":31512,"navigation":566,"path":304,"seo":31513,"stem":305,"__hash__":31514},"docs/2.api/6.debug-performance/stats-gl.md",{"type":473,"value":31221,"toc":31507},[31222,31240,31243,31245,31362,31364,31505],[586,31223,31224,31229,31230,31235,31236,31239],{},[1116,31225,31228],{"href":31226,"rel":31227},"https://github.com/RenaudRohlinger/stats-gl",[1120],"stats-gl"," is a powerful WebGL performance monitoring tool created by ",[1116,31231,31234],{"href":31232,"rel":31233},"https://github.com/RenaudRohlinger",[1120],"RenaudRohlinger",".\nIt offers simple information boxes to track code performance and serves as a more advanced alternative to ",[1116,31237,31017],{"href":31015,"rel":31238},[1120],", capable of displaying CPU and GPU metrics.",[586,31241,31242],{},"In TresJS, you can effortlessly create a performance monitoring panel in the top left corner of your canvas by using the StatsGl component.\nSimply drop the StatsGl component into your TresCanvas for easy performance monitoring.",[476,31244,31037],{"id":31036},[598,31246,31249],{"className":600,"code":31247,"highlights":31248,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { StatsGl } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CStatsGl />\n  \u003C/TresCanvas>\n\u003C/template>\n",[680,750],[590,31250,31251,31271,31289,31309,31317,31321,31329,31337,31346,31354],{"__ignoreMap":548},[609,31252,31253,31255,31257,31259,31261,31263,31265,31267,31269],{"class":611,"line":549},[609,31254,615],{"class":614},[609,31256,619],{"class":618},[609,31258,623],{"class":622},[609,31260,626],{"class":622},[609,31262,629],{"class":614},[609,31264,632],{"class":614},[609,31266,636],{"class":635},[609,31268,632],{"class":614},[609,31270,641],{"class":614},[609,31272,31273,31275,31277,31279,31281,31283,31285,31287],{"class":611,"line":550},[609,31274,649],{"class":648},[609,31276,652],{"class":614},[609,31278,687],{"class":655},[609,31280,665],{"class":614},[609,31282,668],{"class":648},[609,31284,671],{"class":614},[609,31286,696],{"class":635},[609,31288,677],{"class":614},[609,31290,31292,31294,31296,31299,31301,31303,31305,31307],{"class":31291,"line":680},[611,645],[609,31293,649],{"class":648},[609,31295,652],{"class":614},[609,31297,31298],{"class":655}," StatsGl",[609,31300,665],{"class":614},[609,31302,668],{"class":648},[609,31304,671],{"class":614},[609,31306,674],{"class":635},[609,31308,677],{"class":614},[609,31310,31311,31313,31315],{"class":611,"line":701},[609,31312,704],{"class":614},[609,31314,619],{"class":618},[609,31316,641],{"class":614},[609,31318,31319],{"class":611,"line":711},[609,31320,714],{"emptyLinePlaceholder":566},[609,31322,31323,31325,31327],{"class":611,"line":717},[609,31324,615],{"class":614},[609,31326,722],{"class":618},[609,31328,641],{"class":614},[609,31330,31331,31333,31335],{"class":611,"line":727},[609,31332,730],{"class":614},[609,31334,733],{"class":618},[609,31336,641],{"class":614},[609,31338,31340,31342,31344],{"class":31339,"line":750},[611,645],[609,31341,753],{"class":614},[609,31343,303],{"class":618},[609,31345,759],{"class":614},[609,31347,31348,31350,31352],{"class":611,"line":762},[609,31349,881],{"class":614},[609,31351,733],{"class":618},[609,31353,641],{"class":614},[609,31355,31356,31358,31360],{"class":611,"line":772},[609,31357,704],{"class":614},[609,31359,722],{"class":618},[609,31361,641],{"class":614},[476,31363,7491],{"id":11998},[903,31365,31366,31378],{},[906,31367,31368],{},[909,31369,31370,31372,31374,31376],{},[912,31371,3122],{"align":973},[912,31373,11906],{},[912,31375,920],{},[912,31377,917],{},[922,31379,31380,31398,31416,31434,31452,31470,31488],{},[909,31381,31382,31387,31391,31395],{},[927,31383,31384],{"align":973},[1677,31385,31386],{},"logsPerSecond",[927,31388,31389],{},[590,31390,2541],{},[927,31392,31393],{},[590,31394,24411],{},[927,31396,31397],{},"How often to log performance data, in logs per second.",[909,31399,31400,31405,31409,31413],{},[927,31401,31402],{"align":973},[1677,31403,31404],{},"samplesLog",[927,31406,31407],{},[590,31408,2541],{},[927,31410,31411],{},[590,31412,6032],{},[927,31414,31415],{},"Number of recent log samples to keep for computing averages.",[909,31417,31418,31423,31427,31431],{},[927,31419,31420],{"align":973},[1677,31421,31422],{},"samplesGraph",[927,31424,31425],{},[590,31426,2541],{},[927,31428,31429],{},[590,31430,1482],{},[927,31432,31433],{},"Number of recent graph samples to keep for computing averages.",[909,31435,31436,31441,31445,31449],{},[927,31437,31438],{"align":973},[1677,31439,31440],{},"precision",[927,31442,31443],{},[590,31444,2541],{},[927,31446,31447],{},[590,31448,796],{},[927,31450,31451],{},"Precision of the data, in the number of decimal places (only affects CPU and GPU).",[909,31453,31454,31459,31463,31467],{},[927,31455,31456],{"align":973},[1677,31457,31458],{},"horizontal",[927,31460,31461],{},[590,31462,11963],{},[927,31464,31465],{},[590,31466,937],{},[927,31468,31469],{},"Display the canvases on the X-axis, set to align on the vertical axis.",[909,31471,31472,31477,31481,31485],{},[927,31473,31474],{"align":973},[1677,31475,31476],{},"minimal",[927,31478,31479],{},[590,31480,11963],{},[927,31482,31483],{},[590,31484,947],{},[927,31486,31487],{},"A boolean value to control the minimalistic mode of the panel display. If set to true, a simple click on the panel will switch between different metrics.",[909,31489,31490,31494,31498,31502],{},[927,31491,31492],{"align":973},[1677,31493,11091],{},[927,31495,31496],{},[590,31497,2541],{},[927,31499,31500],{},[590,31501,941],{},[927,31503,31504],{},"Sets the initial panel to display - 0 for FPS, 1 for CPU, and 2 for GPU (if supported).",[1303,31506,22322],{},{"title":548,"searchDepth":549,"depth":550,"links":31508},[31509,31510],{"id":31036,"depth":550,"text":31037},{"id":11998,"depth":550,"text":7491},"WebGL performance monitoring tool displaying CPU and GPU metrics.",{},{"title":303,"description":31511},"U7tHg9fUc_rOVhwBvVzqjDp7pPwOLcUprEa_GiH5-Uc",{"id":31516,"title":307,"body":31517,"description":32946,"extension":563,"links":564,"meta":32947,"navigation":566,"path":308,"seo":32948,"stem":309,"__hash__":32949},"docs/2.api/6.debug-performance/use-bvh.md",{"type":473,"value":31518,"toc":32922},[31519,31524,31531,31545,31549,31552,31557,31568,31570,31573,31744,31748,31751,31900,31904,31907,32210,32212,32226,32230,32283,32287,32293,32440,32444,32464,32466,32470,32473,32565,32569,32572,32615,32618,32622,32673,32677,32703,32707,32713,32869,32871,32875,32896,32900,32919],[580,31520,31521],{},[31522,31523],"debug-performance-use-bounding-volume-hierarchy",{},[586,31525,31526,31527,31530],{},"A composable that dramatically improves raycasting performance by building a Bounding Volume Hierarchy (BVH) for your meshes. This can speed up raycasting by ",[1677,31528,31529],{},"orders of magnitude",", especially for complex models with many triangles.",[586,31532,31533,31534,31539,31540,1122],{},"Built on top of ",[1116,31535,31538],{"href":31536,"rel":31537},"https://github.com/gkjohnson/three-mesh-bvh",[1120],"three-mesh-bvh"," by ",[1116,31541,31544],{"href":31542,"rel":31543},"https://github.com/gkjohnson",[1120],"Garrett Johnson",[476,31546,31548],{"id":31547},"what-is-bvh","What is BVH?",[586,31550,31551],{},"BVH (Bounding Volume Hierarchy) is a spatial data structure that organizes geometry into a tree of bounding boxes. Instead of testing every triangle during raycasting, the algorithm tests bounding boxes first and only checks triangles in boxes that intersect the ray. This reduces raycasting complexity from O(n) to O(log n).",[586,31553,31554],{},[1677,31555,31556],{},"Use cases:",[3140,31558,31559,31562,31565],{},[3143,31560,31561],{},"Interactive 3D applications with raycasting (mouse picking, selection)",[3143,31563,31564],{},"Complex models with thousands of triangles",[3143,31566,31567],{},"Scenes with multiple raycasting operations per frame",[476,31569,15],{"id":596},[7477,31571,31572],{"id":31036},"Basic Usage",[598,31574,31577],{"className":600,"code":31575,"highlights":31576,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { useGLTF, useBVH } from '@tresjs/cientos'\n\nconst { state: model } = useGLTF('/models/complex-model.glb')\nuseBVH(() => model.value?.scene)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cprimitive v-if=\"model\" :object=\"model.scene\" />\n\u003C/template>\n",[550,711,717,727,750,772],[590,31578,31579,31599,31623,31627,31656,31678,31687,31692,31701,31735],{"__ignoreMap":548},[609,31580,31581,31583,31585,31587,31589,31591,31593,31595,31597],{"class":611,"line":549},[609,31582,615],{"class":614},[609,31584,619],{"class":618},[609,31586,623],{"class":622},[609,31588,626],{"class":622},[609,31590,629],{"class":614},[609,31592,632],{"class":614},[609,31594,636],{"class":635},[609,31596,632],{"class":614},[609,31598,641],{"class":614},[609,31600,31602,31604,31606,31608,31610,31613,31615,31617,31619,31621],{"class":31601,"line":550},[611,645],[609,31603,649],{"class":648},[609,31605,652],{"class":614},[609,31607,11421],{"class":655},[609,31609,659],{"class":614},[609,31611,31612],{"class":655}," useBVH",[609,31614,665],{"class":614},[609,31616,668],{"class":648},[609,31618,671],{"class":614},[609,31620,674],{"class":635},[609,31622,677],{"class":614},[609,31624,31625],{"class":611,"line":680},[609,31626,714],{"emptyLinePlaceholder":566},[609,31628,31629,31631,31633,31635,31637,31639,31641,31643,31645,31647,31649,31652,31654],{"class":611,"line":701},[609,31630,2693],{"class":622},[609,31632,652],{"class":614},[609,31634,11461],{"class":618},[609,31636,1194],{"class":614},[609,31638,15297],{"class":655},[609,31640,5548],{"class":614},[609,31642,2770],{"class":614},[609,31644,11421],{"class":2804},[609,31646,2974],{"class":655},[609,31648,5540],{"class":614},[609,31650,31651],{"class":635},"/models/complex-model.glb",[609,31653,5540],{"class":614},[609,31655,5543],{"class":655},[609,31657,31659,31661,31663,31665,31667,31669,31671,31673,31675],{"class":31658,"line":711},[611,645],[609,31660,307],{"class":2804},[609,31662,2974],{"class":655},[609,31664,8451],{"class":614},[609,31666,5505],{"class":622},[609,31668,15347],{"class":655},[609,31670,1122],{"class":614},[609,31672,5500],{"class":655},[609,31674,11531],{"class":614},[609,31676,31677],{"class":655},"scene)\n",[609,31679,31681,31683,31685],{"class":31680,"line":717},[611,645],[609,31682,704],{"class":614},[609,31684,619],{"class":618},[609,31686,641],{"class":614},[609,31688,31690],{"class":31689,"line":727},[611,645],[609,31691,714],{"emptyLinePlaceholder":566},[609,31693,31695,31697,31699],{"class":31694,"line":750},[611,645],[609,31696,615],{"class":614},[609,31698,722],{"class":618},[609,31700,641],{"class":614},[609,31702,31703,31705,31707,31709,31711,31713,31715,31717,31719,31721,31723,31725,31727,31729,31731,31733],{"class":611,"line":762},[609,31704,730],{"class":614},[609,31706,11507],{"class":618},[609,31708,11510],{"class":648},[609,31710,629],{"class":614},[609,31712,632],{"class":614},[609,31714,12579],{"class":655},[609,31716,632],{"class":614},[609,31718,785],{"class":614},[609,31720,10754],{"class":622},[609,31722,629],{"class":614},[609,31724,632],{"class":614},[609,31726,12579],{"class":655},[609,31728,1122],{"class":614},[609,31730,11534],{"class":655},[609,31732,632],{"class":614},[609,31734,759],{"class":614},[609,31736,31738,31740,31742],{"class":31737,"line":772},[611,645],[609,31739,704],{"class":614},[609,31741,722],{"class":618},[609,31743,641],{"class":614},[7477,31745,31747],{"id":31746},"with-debug-visualization","With Debug Visualization",[586,31749,31750],{},"Enable debug mode to visualize the BVH bounding boxes:",[598,31752,31755],{"className":600,"code":31753,"highlights":31754,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { useGLTF, useBVH } from '@tresjs/cientos'\n\nconst { state: model } = useGLTF('/models/model.glb')\n\nuseBVH(\n  () => model.value?.scene,\n  {\n    debug: true, // Show BVH bounding boxes\n  }\n)\n\u003C/script>\n",[701,711,717,727],[590,31756,31757,31777,31799,31803,31833,31838,31845,31865,31870,31884,31888,31892],{"__ignoreMap":548},[609,31758,31759,31761,31763,31765,31767,31769,31771,31773,31775],{"class":611,"line":549},[609,31760,615],{"class":614},[609,31762,619],{"class":618},[609,31764,623],{"class":622},[609,31766,626],{"class":622},[609,31768,629],{"class":614},[609,31770,632],{"class":614},[609,31772,636],{"class":635},[609,31774,632],{"class":614},[609,31776,641],{"class":614},[609,31778,31779,31781,31783,31785,31787,31789,31791,31793,31795,31797],{"class":611,"line":550},[609,31780,649],{"class":648},[609,31782,652],{"class":614},[609,31784,11421],{"class":655},[609,31786,659],{"class":614},[609,31788,31612],{"class":655},[609,31790,665],{"class":614},[609,31792,668],{"class":648},[609,31794,671],{"class":614},[609,31796,674],{"class":635},[609,31798,677],{"class":614},[609,31800,31801],{"class":611,"line":680},[609,31802,714],{"emptyLinePlaceholder":566},[609,31804,31806,31808,31810,31812,31814,31816,31818,31820,31822,31824,31826,31829,31831],{"class":31805,"line":701},[611,645],[609,31807,2693],{"class":622},[609,31809,652],{"class":614},[609,31811,11461],{"class":618},[609,31813,1194],{"class":614},[609,31815,15297],{"class":655},[609,31817,5548],{"class":614},[609,31819,2770],{"class":614},[609,31821,11421],{"class":2804},[609,31823,2974],{"class":655},[609,31825,5540],{"class":614},[609,31827,31828],{"class":635},"/models/model.glb",[609,31830,5540],{"class":614},[609,31832,5543],{"class":655},[609,31834,31836],{"class":31835,"line":711},[611,645],[609,31837,714],{"emptyLinePlaceholder":566},[609,31839,31841,31843],{"class":31840,"line":717},[611,645],[609,31842,307],{"class":2804},[609,31844,29865],{"class":655},[609,31846,31848,31851,31853,31855,31857,31859,31861,31863],{"class":31847,"line":727},[611,645],[609,31849,31850],{"class":614},"  ()",[609,31852,5505],{"class":622},[609,31854,15347],{"class":655},[609,31856,1122],{"class":614},[609,31858,5500],{"class":655},[609,31860,11531],{"class":614},[609,31862,11534],{"class":655},[609,31864,14979],{"class":614},[609,31866,31867],{"class":611,"line":750},[609,31868,31869],{"class":614},"  {\n",[609,31871,31872,31875,31877,31879,31881],{"class":611,"line":762},[609,31873,31874],{"class":618},"    debug",[609,31876,1194],{"class":614},[609,31878,11887],{"class":3874},[609,31880,659],{"class":614},[609,31882,31883],{"class":1185}," // Show BVH bounding boxes\n",[609,31885,31886],{"class":611,"line":772},[609,31887,2829],{"class":614},[609,31889,31890],{"class":611,"line":777},[609,31891,5543],{"class":655},[609,31893,31894,31896,31898],{"class":611,"line":803},[609,31895,704],{"class":614},[609,31897,619],{"class":618},[609,31899,641],{"class":614},[7477,31901,31903],{"id":31902},"reactive-enabled-state","Reactive Enabled State",[586,31905,31906],{},"Control BVH optimization dynamically:",[598,31908,31911],{"className":600,"code":31909,"highlights":31910,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { ref, computed } from 'vue'\nimport { useGLTF, useBVH } from '@tresjs/cientos'\n\nconst bvhEnabled = ref(true)\n\nconst { state: model } = useGLTF('/models/model.glb')\n\nuseBVH(\n  () => model.value?.scene,\n  {\n    enabled: bvhEnabled,\n  }\n)\n\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cbutton @click=\"bvhEnabled = !bvhEnabled\">\n      Toggle BVH\n    \u003C/button>\n    \u003Cprimitive v-if=\"model\" :object=\"model.scene\" />\n  \u003C/div>\n\u003C/template>\n",[701,717,727,750,762],[590,31912,31913,31933,31955,31977,31982,31999,32004,32033,32038,32045,32063,32067,32079,32083,32087,32091,32099,32103,32111,32119,32147,32152,32160,32194,32202],{"__ignoreMap":548},[609,31914,31915,31917,31919,31921,31923,31925,31927,31929,31931],{"class":611,"line":549},[609,31916,615],{"class":614},[609,31918,619],{"class":618},[609,31920,623],{"class":622},[609,31922,626],{"class":622},[609,31924,629],{"class":614},[609,31926,632],{"class":614},[609,31928,636],{"class":635},[609,31930,632],{"class":614},[609,31932,641],{"class":614},[609,31934,31935,31937,31939,31941,31943,31945,31947,31949,31951,31953],{"class":611,"line":550},[609,31936,649],{"class":648},[609,31938,652],{"class":614},[609,31940,5435],{"class":655},[609,31942,659],{"class":614},[609,31944,15338],{"class":655},[609,31946,665],{"class":614},[609,31948,668],{"class":648},[609,31950,671],{"class":614},[609,31952,605],{"class":635},[609,31954,677],{"class":614},[609,31956,31957,31959,31961,31963,31965,31967,31969,31971,31973,31975],{"class":611,"line":680},[609,31958,649],{"class":648},[609,31960,652],{"class":614},[609,31962,11421],{"class":655},[609,31964,659],{"class":614},[609,31966,31612],{"class":655},[609,31968,665],{"class":614},[609,31970,668],{"class":648},[609,31972,671],{"class":614},[609,31974,674],{"class":635},[609,31976,677],{"class":614},[609,31978,31980],{"class":31979,"line":701},[611,645],[609,31981,714],{"emptyLinePlaceholder":566},[609,31983,31984,31986,31989,31991,31993,31995,31997],{"class":611,"line":711},[609,31985,2693],{"class":622},[609,31987,31988],{"class":655}," bvhEnabled ",[609,31990,629],{"class":614},[609,31992,5435],{"class":2804},[609,31994,2974],{"class":655},[609,31996,937],{"class":3874},[609,31998,5543],{"class":655},[609,32000,32002],{"class":32001,"line":717},[611,645],[609,32003,714],{"emptyLinePlaceholder":566},[609,32005,32007,32009,32011,32013,32015,32017,32019,32021,32023,32025,32027,32029,32031],{"class":32006,"line":727},[611,645],[609,32008,2693],{"class":622},[609,32010,652],{"class":614},[609,32012,11461],{"class":618},[609,32014,1194],{"class":614},[609,32016,15297],{"class":655},[609,32018,5548],{"class":614},[609,32020,2770],{"class":614},[609,32022,11421],{"class":2804},[609,32024,2974],{"class":655},[609,32026,5540],{"class":614},[609,32028,31828],{"class":635},[609,32030,5540],{"class":614},[609,32032,5543],{"class":655},[609,32034,32036],{"class":32035,"line":750},[611,645],[609,32037,714],{"emptyLinePlaceholder":566},[609,32039,32041,32043],{"class":32040,"line":762},[611,645],[609,32042,307],{"class":2804},[609,32044,29865],{"class":655},[609,32046,32047,32049,32051,32053,32055,32057,32059,32061],{"class":611,"line":772},[609,32048,31850],{"class":614},[609,32050,5505],{"class":622},[609,32052,15347],{"class":655},[609,32054,1122],{"class":614},[609,32056,5500],{"class":655},[609,32058,11531],{"class":614},[609,32060,11534],{"class":655},[609,32062,14979],{"class":614},[609,32064,32065],{"class":611,"line":777},[609,32066,31869],{"class":614},[609,32068,32069,32072,32074,32077],{"class":611,"line":803},[609,32070,32071],{"class":618},"    enabled",[609,32073,1194],{"class":614},[609,32075,32076],{"class":655}," bvhEnabled",[609,32078,14979],{"class":614},[609,32080,32081],{"class":611,"line":603},[609,32082,2829],{"class":614},[609,32084,32085],{"class":611,"line":826},[609,32086,5543],{"class":655},[609,32088,32089],{"class":611,"line":837},[609,32090,714],{"emptyLinePlaceholder":566},[609,32092,32093,32095,32097],{"class":611,"line":848},[609,32094,704],{"class":614},[609,32096,619],{"class":618},[609,32098,641],{"class":614},[609,32100,32101],{"class":611,"line":858},[609,32102,714],{"emptyLinePlaceholder":566},[609,32104,32105,32107,32109],{"class":611,"line":604},[609,32106,615],{"class":614},[609,32108,722],{"class":618},[609,32110,641],{"class":614},[609,32112,32113,32115,32117],{"class":611,"line":878},[609,32114,730],{"class":614},[609,32116,19613],{"class":618},[609,32118,641],{"class":614},[609,32120,32121,32123,32126,32128,32131,32133,32135,32138,32141,32143,32145],{"class":611,"line":888},[609,32122,753],{"class":614},[609,32124,32125],{"class":618},"button",[609,32127,7760],{"class":614},[609,32129,32130],{"class":622},"click",[609,32132,629],{"class":614},[609,32134,632],{"class":614},[609,32136,32137],{"class":655},"bvhEnabled",[609,32139,32140],{"class":614}," = !",[609,32142,32137],{"class":655},[609,32144,632],{"class":614},[609,32146,641],{"class":614},[609,32148,32149],{"class":611,"line":2956},[609,32150,32151],{"class":655},"      Toggle BVH\n",[609,32153,32154,32156,32158],{"class":611,"line":2964},[609,32155,871],{"class":614},[609,32157,32125],{"class":618},[609,32159,641],{"class":614},[609,32161,32162,32164,32166,32168,32170,32172,32174,32176,32178,32180,32182,32184,32186,32188,32190,32192],{"class":611,"line":2994},[609,32163,753],{"class":614},[609,32165,11507],{"class":618},[609,32167,11510],{"class":648},[609,32169,629],{"class":614},[609,32171,632],{"class":614},[609,32173,12579],{"class":655},[609,32175,632],{"class":614},[609,32177,785],{"class":614},[609,32179,10754],{"class":622},[609,32181,629],{"class":614},[609,32183,632],{"class":614},[609,32185,12579],{"class":655},[609,32187,1122],{"class":614},[609,32189,11534],{"class":655},[609,32191,632],{"class":614},[609,32193,759],{"class":614},[609,32195,32196,32198,32200],{"class":611,"line":3011},[609,32197,881],{"class":614},[609,32199,19613],{"class":618},[609,32201,641],{"class":614},[609,32203,32204,32206,32208],{"class":611,"line":3026},[609,32205,704],{"class":614},[609,32207,722],{"class":618},[609,32209,641],{"class":614},[476,32211,7491],{"id":11998},[586,32213,32214,32215,32218,32219,32222,32223,32225],{},"Options are divided into ",[1677,32216,32217],{},"reactive"," (can change at runtime) and ",[1677,32220,32221],{},"static"," (set once at creation - changing requires toggling ",[590,32224,8197],{}," off/on to rebuild).",[7477,32227,32229],{"id":32228},"reactive-options","Reactive Options",[903,32231,32232,32245],{},[906,32233,32234],{},[909,32235,32236,32239,32241,32243],{},[912,32237,32238],{"align":973},"Option",[912,32240,11906],{"align":973},[912,32242,920],{"align":973},[912,32244,917],{"align":973},[922,32246,32247,32265],{},[909,32248,32249,32253,32258,32262],{},[927,32250,32251],{"align":973},[1677,32252,8197],{},[927,32254,32255],{"align":973},[590,32256,32257],{},"MaybeRefOrGetter\u003Cboolean>",[927,32259,32260],{"align":973},[590,32261,937],{},[927,32263,32264],{"align":973},"Enable/disable BVH optimization. Toggling rebuilds BVH structures.",[909,32266,32267,32272,32276,32280],{},[927,32268,32269],{"align":973},[1677,32270,32271],{},"debug",[927,32273,32274],{"align":973},[590,32275,32257],{},[927,32277,32278],{"align":973},[590,32279,947],{},[927,32281,32282],{"align":973},"Show debug visualization of BVH bounding boxes.",[7477,32284,32286],{"id":32285},"static-options-bvh-construction","Static Options (BVH Construction)",[586,32288,32289,32290,32292],{},"These options configure how the BVH is built. Changing them after creation has no effect - toggle ",[590,32291,8197],{}," off/on to rebuild with new values.",[903,32294,32295,32307],{},[906,32296,32297],{},[909,32298,32299,32301,32303,32305],{},[912,32300,32238],{"align":973},[912,32302,11906],{"align":973},[912,32304,920],{"align":973},[912,32306,917],{"align":973},[922,32308,32309,32330,32350,32368,32386,32404,32422],{},[909,32310,32311,32316,32320,32324],{},[927,32312,32313],{"align":973},[1677,32314,32315],{},"firstHitOnly",[927,32317,32318],{"align":973},[590,32319,11963],{},[927,32321,32322],{"align":973},[590,32323,947],{},[927,32325,19346,32326,32329],{"align":973},[590,32327,32328],{},"raycastFirst"," for better performance when only the first hit is needed.",[909,32331,32332,32337,32342,32347],{},[927,32333,32334],{"align":973},[1677,32335,32336],{},"splitStrategy",[927,32338,32339],{"align":973},[590,32340,32341],{},"'CENTER' | 'AVERAGE' | 'SAH'",[927,32343,32344],{"align":973},[590,32345,32346],{},"'SAH'",[927,32348,32349],{"align":973},"BVH build strategy. See section below.",[909,32351,32352,32357,32361,32365],{},[927,32353,32354],{"align":973},[1677,32355,32356],{},"maxDepth",[927,32358,32359],{"align":973},[590,32360,2541],{},[927,32362,32363],{"align":973},[590,32364,28948],{},[927,32366,32367],{"align":973},"Maximum tree depth for the BVH structure.",[909,32369,32370,32375,32379,32383],{},[927,32371,32372],{"align":973},[1677,32373,32374],{},"maxLeafSize",[927,32376,32377],{"align":973},[590,32378,2541],{},[927,32380,32381],{"align":973},[590,32382,1482],{},[927,32384,32385],{"align":973},"Target number of triangles per leaf node.",[909,32387,32388,32393,32397,32401],{},[927,32389,32390],{"align":973},[1677,32391,32392],{},"verbose",[927,32394,32395],{"align":973},[590,32396,11963],{},[927,32398,32399],{"align":973},[590,32400,947],{},[927,32402,32403],{"align":973},"Print construction warnings and progress to console.",[909,32405,32406,32411,32415,32419],{},[927,32407,32408],{"align":973},[1677,32409,32410],{},"setBoundingBox",[927,32412,32413],{"align":973},[590,32414,11963],{},[927,32416,32417],{"align":973},[590,32418,937],{},[927,32420,32421],{"align":973},"Automatically set geometry bounding box after BVH construction.",[909,32423,32424,32429,32433,32437],{},[927,32425,32426],{"align":973},[1677,32427,32428],{},"indirect",[927,32430,32431],{"align":973},[590,32432,11963],{},[927,32434,32435],{"align":973},[590,32436,947],{},[927,32438,32439],{"align":973},"If false, creates and rearranges index buffer for better performance.",[7477,32441,32443],{"id":32442},"split-strategies","Split Strategies",[3140,32445,32446,32452,32458],{},[3143,32447,32448,32451],{},[1677,32449,32450],{},"SAH (Surface Area Heuristic)"," - Slowest to build, fastest at runtime, uses least memory. Best for production.",[3143,32453,32454,32457],{},[1677,32455,32456],{},"AVERAGE"," - Balanced build time and runtime performance.",[3143,32459,32460,32463],{},[1677,32461,32462],{},"CENTER"," - Fastest to build, slower at runtime.",[476,32465,18153],{"id":18152},[7477,32467,32469],{"id":32468},"fine-tuning-performance","Fine-tuning Performance",[586,32471,32472],{},"Adjust BVH construction parameters for your use case:",[598,32474,32476],{"className":1162,"code":32475,"language":636,"meta":548,"style":548},"useBVH(\n  target,\n  {\n    splitStrategy: 'SAH', // Best runtime performance\n    maxDepth: 30, // Shallower tree (faster build)\n    maxLeafSize: 5, // Smaller leaves (better culling)\n    verbose: true, // Debug construction\n  }\n)\n",[590,32477,32478,32484,32491,32495,32514,32528,32543,32557,32561],{"__ignoreMap":548},[609,32479,32480,32482],{"class":611,"line":549},[609,32481,307],{"class":2804},[609,32483,29865],{"class":655},[609,32485,32486,32489],{"class":611,"line":550},[609,32487,32488],{"class":655},"  target",[609,32490,14979],{"class":614},[609,32492,32493],{"class":611,"line":680},[609,32494,31869],{"class":614},[609,32496,32497,32500,32502,32504,32507,32509,32511],{"class":611,"line":701},[609,32498,32499],{"class":618},"    splitStrategy",[609,32501,1194],{"class":614},[609,32503,671],{"class":614},[609,32505,32506],{"class":635},"SAH",[609,32508,5540],{"class":614},[609,32510,659],{"class":614},[609,32512,32513],{"class":1185}," // Best runtime performance\n",[609,32515,32516,32519,32521,32523,32525],{"class":611,"line":711},[609,32517,32518],{"class":618},"    maxDepth",[609,32520,1194],{"class":614},[609,32522,17512],{"class":795},[609,32524,659],{"class":614},[609,32526,32527],{"class":1185}," // Shallower tree (faster build)\n",[609,32529,32530,32533,32535,32538,32540],{"class":611,"line":717},[609,32531,32532],{"class":618},"    maxLeafSize",[609,32534,1194],{"class":614},[609,32536,32537],{"class":795}," 5",[609,32539,659],{"class":614},[609,32541,32542],{"class":1185}," // Smaller leaves (better culling)\n",[609,32544,32545,32548,32550,32552,32554],{"class":611,"line":727},[609,32546,32547],{"class":618},"    verbose",[609,32549,1194],{"class":614},[609,32551,11887],{"class":3874},[609,32553,659],{"class":614},[609,32555,32556],{"class":1185}," // Debug construction\n",[609,32558,32559],{"class":611,"line":750},[609,32560,2829],{"class":614},[609,32562,32563],{"class":611,"line":762},[609,32564,5543],{"class":655},[7477,32566,32568],{"id":32567},"first-hit-only-mode","First Hit Only Mode",[586,32570,32571],{},"When you only need the closest intersection (e.g., mouse picking):",[598,32573,32575],{"className":1162,"code":32574,"language":636,"meta":548,"style":548},"useBVH(\n  target,\n  {\n    firstHitOnly: true, // Uses raycastFirst internally\n  }\n)\n",[590,32576,32577,32583,32589,32593,32607,32611],{"__ignoreMap":548},[609,32578,32579,32581],{"class":611,"line":549},[609,32580,307],{"class":2804},[609,32582,29865],{"class":655},[609,32584,32585,32587],{"class":611,"line":550},[609,32586,32488],{"class":655},[609,32588,14979],{"class":614},[609,32590,32591],{"class":611,"line":680},[609,32592,31869],{"class":614},[609,32594,32595,32598,32600,32602,32604],{"class":611,"line":701},[609,32596,32597],{"class":618},"    firstHitOnly",[609,32599,1194],{"class":614},[609,32601,11887],{"class":3874},[609,32603,659],{"class":614},[609,32605,32606],{"class":1185}," // Uses raycastFirst internally\n",[609,32608,32609],{"class":611,"line":711},[609,32610,2829],{"class":614},[609,32612,32613],{"class":611,"line":717},[609,32614,5543],{"class":655},[586,32616,32617],{},"This is significantly faster than computing all intersections when you only need one.",[476,32619,32621],{"id":32620},"important-notes","Important Notes",[3140,32623,32624,32630,32649,32655,32667],{},[3143,32625,32626,32629],{},[1677,32627,32628],{},"Side-effect free",": BVH is automatically removed on unmount and when disabled.",[3143,32631,32632,32635,32636,4435,32638,32640,32641,1475,32643,32645,32646,32648],{},[1677,32633,32634],{},"Reactive options",": Only ",[590,32637,8197],{},[590,32639,32271],{}," are reactive. Construction options (",[590,32642,32336],{},[590,32644,32356],{},", etc.) are static - to apply new values, toggle ",[590,32647,8197],{}," off/on.",[3143,32650,32651,32654],{},[1677,32652,32653],{},"Memory efficient",": BVH structures are properly disposed when removed.",[3143,32656,32657,32660,32661,4435,32663,32666],{},[1677,32658,32659],{},"Automatic mesh detection",": Works with ",[590,32662,5303],{},[590,32664,32665],{},"SkinnedMesh"," instances.",[3143,32668,32669,32672],{},[1677,32670,32671],{},"Draco models",": Works seamlessly with Draco-compressed GLTF models.",[476,32674,32676],{"id":32675},"performance-tips","Performance Tips",[7609,32678,32679,32685,32691,32697],{},[3143,32680,32681,32684],{},[1677,32682,32683],{},"Use firstHitOnly"," when you only need the closest intersection",[3143,32686,32687,32690],{},[1677,32688,32689],{},"SAH strategy"," gives best runtime performance for production",[3143,32692,32693,32696],{},[1677,32694,32695],{},"Adjust maxLeafSize"," based on triangle density (smaller for dense meshes)",[3143,32698,32699,32702],{},[1677,32700,32701],{},"Enable debug mode"," during development to verify BVH coverage",[476,32704,32706],{"id":32705},"integration-with-usegltf","Integration with useGLTF",[586,32708,32709,32710,32712],{},"Perfect pairing with ",[590,32711,121],{}," for optimized model loading:",[598,32714,32716],{"className":600,"code":32715,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { useBVH, useGLTF } from '@tresjs/cientos'\n\nconst { state: model } = useGLTF('/models/high-poly-model.glb', {\n  draco: true\n})\n\nuseBVH(\n  () => model.value?.scene,\n  { splitStrategy: 'SAH' }\n)\n\u003C/script>\n",[590,32717,32718,32738,32760,32764,32795,32805,32811,32815,32821,32839,32857,32861],{"__ignoreMap":548},[609,32719,32720,32722,32724,32726,32728,32730,32732,32734,32736],{"class":611,"line":549},[609,32721,615],{"class":614},[609,32723,619],{"class":618},[609,32725,623],{"class":622},[609,32727,626],{"class":622},[609,32729,629],{"class":614},[609,32731,632],{"class":614},[609,32733,636],{"class":635},[609,32735,632],{"class":614},[609,32737,641],{"class":614},[609,32739,32740,32742,32744,32746,32748,32750,32752,32754,32756,32758],{"class":611,"line":550},[609,32741,649],{"class":648},[609,32743,652],{"class":614},[609,32745,31612],{"class":655},[609,32747,659],{"class":614},[609,32749,11421],{"class":655},[609,32751,665],{"class":614},[609,32753,668],{"class":648},[609,32755,671],{"class":614},[609,32757,674],{"class":635},[609,32759,677],{"class":614},[609,32761,32762],{"class":611,"line":680},[609,32763,714],{"emptyLinePlaceholder":566},[609,32765,32766,32768,32770,32772,32774,32776,32778,32780,32782,32784,32786,32789,32791,32793],{"class":611,"line":701},[609,32767,2693],{"class":622},[609,32769,652],{"class":614},[609,32771,11461],{"class":618},[609,32773,1194],{"class":614},[609,32775,15297],{"class":655},[609,32777,5548],{"class":614},[609,32779,2770],{"class":614},[609,32781,11421],{"class":2804},[609,32783,2974],{"class":655},[609,32785,5540],{"class":614},[609,32787,32788],{"class":635},"/models/high-poly-model.glb",[609,32790,5540],{"class":614},[609,32792,659],{"class":614},[609,32794,1180],{"class":614},[609,32796,32797,32800,32802],{"class":611,"line":711},[609,32798,32799],{"class":618},"  draco",[609,32801,1194],{"class":614},[609,32803,32804],{"class":3874}," true\n",[609,32806,32807,32809],{"class":611,"line":717},[609,32808,5548],{"class":614},[609,32810,5543],{"class":655},[609,32812,32813],{"class":611,"line":727},[609,32814,714],{"emptyLinePlaceholder":566},[609,32816,32817,32819],{"class":611,"line":750},[609,32818,307],{"class":2804},[609,32820,29865],{"class":655},[609,32822,32823,32825,32827,32829,32831,32833,32835,32837],{"class":611,"line":762},[609,32824,31850],{"class":614},[609,32826,5505],{"class":622},[609,32828,15347],{"class":655},[609,32830,1122],{"class":614},[609,32832,5500],{"class":655},[609,32834,11531],{"class":614},[609,32836,11534],{"class":655},[609,32838,14979],{"class":614},[609,32840,32841,32844,32847,32849,32851,32853,32855],{"class":611,"line":772},[609,32842,32843],{"class":614},"  {",[609,32845,32846],{"class":618}," splitStrategy",[609,32848,1194],{"class":614},[609,32850,671],{"class":614},[609,32852,32506],{"class":635},[609,32854,5540],{"class":614},[609,32856,8480],{"class":614},[609,32858,32859],{"class":611,"line":777},[609,32860,5543],{"class":655},[609,32862,32863,32865,32867],{"class":611,"line":803},[609,32864,704],{"class":614},[609,32866,619],{"class":618},[609,32868,641],{"class":614},[476,32870,19203],{"id":19202},[7477,32872,32874],{"id":32873},"bvh-not-applying-to-some-meshes","BVH not applying to some meshes",[3140,32876,32877,32880,32887],{},[3143,32878,32879],{},"Ensure meshes have valid geometry with position attributes",[3143,32881,32882,32883,32886],{},"Check console with ",[590,32884,32885],{},"verbose: true"," to see which meshes are skipped",[3143,32888,32889,32890,32892,32893,32895],{},"Verify the object is an ",[590,32891,2582],{}," (use ",[590,32894,11507],{}," in templates)",[7477,32897,32899],{"id":32898},"performance-not-improving","Performance not improving",[3140,32901,32902,32907,32913,32916],{},[3143,32903,12839,32904,32906],{},[590,32905,32315],{}," if you only need one intersection",[3143,32908,32909,32910,32912],{},"Try different split strategies (",[590,32911,32506],{}," is usually best)",[3143,32914,32915],{},"Verify raycasting is the bottleneck (use Stats/StatsGl)",[3143,32917,32918],{},"Consider LOD for very distant objects",[1303,32920,32921],{},"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);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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 pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":548,"searchDepth":549,"depth":550,"links":32923},[32924,32925,32930,32935,32939,32940,32941,32942],{"id":31547,"depth":550,"text":31548},{"id":596,"depth":550,"text":15,"children":32926},[32927,32928,32929],{"id":31036,"depth":680,"text":31572},{"id":31746,"depth":680,"text":31747},{"id":31902,"depth":680,"text":31903},{"id":11998,"depth":550,"text":7491,"children":32931},[32932,32933,32934],{"id":32228,"depth":680,"text":32229},{"id":32285,"depth":680,"text":32286},{"id":32442,"depth":680,"text":32443},{"id":18152,"depth":550,"text":18153,"children":32936},[32937,32938],{"id":32468,"depth":680,"text":32469},{"id":32567,"depth":680,"text":32568},{"id":32620,"depth":550,"text":32621},{"id":32675,"depth":550,"text":32676},{"id":32705,"depth":550,"text":32706},{"id":19202,"depth":550,"text":19203,"children":32943},[32944,32945],{"id":32873,"depth":680,"text":32874},{"id":32898,"depth":680,"text":32899},"Speed up raycasting with Bounding Volume Hierarchy (BVH) optimization.",{},{"title":307,"description":32946},"j_yBTwISSBvt9p_jtL1KmVLzoSoFUX_NTuLQBbuRDIs",[32951,33519,34138,34550,35045,36565,37262],{"id":32952,"title":317,"body":32953,"description":33515,"extension":563,"links":564,"meta":33516,"navigation":566,"path":318,"seo":33517,"stem":319,"__hash__":33518},"docs/2.api/7.light-shadow/accumulative-shadows.md",{"type":473,"value":32954,"toc":33510},[32955,32960,32975,32977,33279,33281,33475,33477,33487,33507],[580,32956,32957],{},[32958,32959],"light-shadow-accumulative-shadows",{},[586,32961,32962,32965,32966,32969,32970,1122],{},[590,32963,32964],{},"\u003CAccumulativeShadows />"," is a ",[590,32967,32968],{},"THREE.DirectionalLight","-based shadow component. It displays shadows on a single shadow catcher plane, included in the component. It is based on ",[1116,32971,32974],{"href":32972,"rel":32973},"http://drei.docs.pmnd.rs/staging/accumulative-shadows",[1120],"Drei component of the same name",[476,32976,15],{"id":596},[598,32978,32981],{"className":600,"code":32979,"highlights":32980,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { AccumulativeShadows } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#fbb03b\" :shadows=\"true\">\n      \u003CTresPerspectiveCamera\n      :look-at=\"[0, 0, 0]\"\n    />\n    \u003CTresMesh :position-y=\"0.3\" :scale=\"0.4\" :cast-shadow=\"true\">\n      \u003CTresTorusKnotGeometry />\n      \u003CTresMeshNormalMaterial />\n    \u003C/TresMesh>\n    \u003CAccumulativeShadows\n      :blend=\"100\"\n      color=\"#fbb03b\"\n      once\n      :position-y=\"-0.4\"\n    />\n  \u003C/TresCanvas>\n\u003C/template>\n",[550,837,848,858,604,878],[590,32982,32983,33003,33023,33041,33049,33053,33061,33092,33098,33124,33128,33174,33183,33191,33199,33207,33223,33236,33242,33259,33263,33271],{"__ignoreMap":548},[609,32984,32985,32987,32989,32991,32993,32995,32997,32999,33001],{"class":611,"line":549},[609,32986,615],{"class":614},[609,32988,619],{"class":618},[609,32990,623],{"class":622},[609,32992,626],{"class":622},[609,32994,629],{"class":614},[609,32996,632],{"class":614},[609,32998,636],{"class":635},[609,33000,632],{"class":614},[609,33002,641],{"class":614},[609,33004,33006,33008,33010,33013,33015,33017,33019,33021],{"class":33005,"line":550},[611,645],[609,33007,649],{"class":648},[609,33009,652],{"class":614},[609,33011,33012],{"class":655}," AccumulativeShadows",[609,33014,665],{"class":614},[609,33016,668],{"class":648},[609,33018,671],{"class":614},[609,33020,674],{"class":635},[609,33022,677],{"class":614},[609,33024,33025,33027,33029,33031,33033,33035,33037,33039],{"class":611,"line":680},[609,33026,649],{"class":648},[609,33028,652],{"class":614},[609,33030,687],{"class":655},[609,33032,665],{"class":614},[609,33034,668],{"class":648},[609,33036,671],{"class":614},[609,33038,696],{"class":635},[609,33040,677],{"class":614},[609,33042,33043,33045,33047],{"class":611,"line":701},[609,33044,704],{"class":614},[609,33046,619],{"class":618},[609,33048,641],{"class":614},[609,33050,33051],{"class":611,"line":711},[609,33052,714],{"emptyLinePlaceholder":566},[609,33054,33055,33057,33059],{"class":611,"line":717},[609,33056,615],{"class":614},[609,33058,722],{"class":618},[609,33060,641],{"class":614},[609,33062,33063,33065,33067,33069,33071,33073,33075,33077,33079,33082,33084,33086,33088,33090],{"class":611,"line":727},[609,33064,730],{"class":614},[609,33066,733],{"class":618},[609,33068,736],{"class":622},[609,33070,629],{"class":614},[609,33072,632],{"class":614},[609,33074,4049],{"class":635},[609,33076,632],{"class":614},[609,33078,785],{"class":614},[609,33080,33081],{"class":622},"shadows",[609,33083,629],{"class":614},[609,33085,632],{"class":614},[609,33087,937],{"class":3874},[609,33089,632],{"class":614},[609,33091,641],{"class":614},[609,33093,33094,33096],{"class":611,"line":750},[609,33095,829],{"class":614},[609,33097,20069],{"class":618},[609,33099,33100,33102,33104,33106,33108,33110,33112,33114,33116,33118,33120,33122],{"class":611,"line":762},[609,33101,5697],{"class":614},[609,33103,3444],{"class":622},[609,33105,629],{"class":614},[609,33107,632],{"class":614},[609,33109,1470],{"class":614},[609,33111,941],{"class":795},[609,33113,1475],{"class":614},[609,33115,941],{"class":795},[609,33117,1475],{"class":614},[609,33119,941],{"class":795},[609,33121,1485],{"class":614},[609,33123,2991],{"class":614},[609,33125,33126],{"class":611,"line":772},[609,33127,11765],{"class":614},[609,33129,33130,33132,33134,33136,33138,33140,33142,33145,33147,33149,33151,33153,33155,33158,33160,33162,33164,33166,33168,33170,33172],{"class":611,"line":777},[609,33131,753],{"class":614},[609,33133,832],{"class":618},[609,33135,785],{"class":614},[609,33137,1972],{"class":622},[609,33139,629],{"class":614},[609,33141,632],{"class":614},[609,33143,33144],{"class":795},"0.3",[609,33146,632],{"class":614},[609,33148,785],{"class":614},[609,33150,788],{"class":622},[609,33152,629],{"class":614},[609,33154,632],{"class":614},[609,33156,33157],{"class":795},"0.4",[609,33159,632],{"class":614},[609,33161,785],{"class":614},[609,33163,12873],{"class":622},[609,33165,629],{"class":614},[609,33167,632],{"class":614},[609,33169,937],{"class":3874},[609,33171,632],{"class":614},[609,33173,641],{"class":614},[609,33175,33176,33178,33181],{"class":611,"line":803},[609,33177,829],{"class":614},[609,33179,33180],{"class":618},"TresTorusKnotGeometry",[609,33182,759],{"class":614},[609,33184,33185,33187,33189],{"class":611,"line":603},[609,33186,829],{"class":614},[609,33188,853],{"class":618},[609,33190,759],{"class":614},[609,33192,33193,33195,33197],{"class":611,"line":826},[609,33194,871],{"class":614},[609,33196,832],{"class":618},[609,33198,641],{"class":614},[609,33200,33202,33204],{"class":33201,"line":837},[611,645],[609,33203,753],{"class":614},[609,33205,33206],{"class":618},"AccumulativeShadows\n",[609,33208,33210,33212,33215,33217,33219,33221],{"class":33209,"line":848},[611,645],[609,33211,5697],{"class":614},[609,33213,33214],{"class":622},"blend",[609,33216,629],{"class":614},[609,33218,632],{"class":614},[609,33220,6032],{"class":795},[609,33222,2991],{"class":614},[609,33224,33226,33228,33230,33232,33234],{"class":33225,"line":858},[611,645],[609,33227,24313],{"class":622},[609,33229,629],{"class":614},[609,33231,632],{"class":614},[609,33233,4049],{"class":635},[609,33235,2991],{"class":614},[609,33237,33239],{"class":33238,"line":604},[611,645],[609,33240,33241],{"class":622},"      once\n",[609,33243,33245,33247,33249,33251,33253,33255,33257],{"class":33244,"line":878},[611,645],[609,33246,5697],{"class":614},[609,33248,1972],{"class":622},[609,33250,629],{"class":614},[609,33252,632],{"class":614},[609,33254,4092],{"class":614},[609,33256,33157],{"class":795},[609,33258,2991],{"class":614},[609,33260,33261],{"class":611,"line":888},[609,33262,11765],{"class":614},[609,33264,33265,33267,33269],{"class":611,"line":2956},[609,33266,881],{"class":614},[609,33268,733],{"class":618},[609,33270,641],{"class":614},[609,33272,33273,33275,33277],{"class":611,"line":2964},[609,33274,704],{"class":614},[609,33276,722],{"class":618},[609,33278,641],{"class":614},[476,33280,898],{"id":897},[903,33282,33283,33293],{},[906,33284,33285],{},[909,33286,33287,33289,33291],{},[912,33288,914],{},[912,33290,917],{},[912,33292,920],{},[922,33294,33295,33309,33323,33347,33362,33379,33392,33405,33419,33432,33447,33461],{},[909,33296,33297,33302,33305],{},[927,33298,33299],{},[590,33300,33301],{},"once",[927,33303,33304],{},"Whether shadow creation only happens once (resets after props change)",[927,33306,33307],{},[590,33308,947],{},[909,33310,33311,33316,33319],{},[927,33312,33313],{},[590,33314,33315],{},"accumulate",[927,33317,33318],{},"Whether shadows accumulate progressively over several frames",[927,33320,33321],{},[590,33322,937],{},[909,33324,33325,33330,33343],{},[927,33326,33327],{},[590,33328,33329],{},"frames",[927,33331,33332,33333,33336,33337,33339,33340,33342],{},"Number of frames to render. More yields cleaner results but takes more time. If ",[590,33334,33335],{},"accumulate && once",", 1 frame will be consumed every update for ",[590,33338,33329],{}," updates. Otherwise, ",[590,33341,33329],{}," frames are consumed for every update.",[927,33344,33345],{},[590,33346,28948],{},[909,33348,33349,33353,33358],{},[927,33350,33351],{},[590,33352,33214],{},[927,33354,934,33355,33357],{},[590,33356,33315],{},", controls the refresh ratio",[927,33359,33360],{},[590,33361,6032],{},[909,33363,33364,33369,33375],{},[927,33365,33366],{},[590,33367,33368],{},"limit",[927,33370,33371,33372,33374],{},"If less than ",[590,33373,6942],{},", limits the amount of frames rendered. Use this to increase performance once a movable scene has settled",[927,33376,33377],{},[590,33378,6942],{},[909,33380,33381,33385,33388],{},[927,33382,33383],{},[590,33384,788],{},[927,33386,33387],{},"Scale of the plane",[927,33389,33390],{},[590,33391,1482],{},[909,33393,33394,33398,33401],{},[927,33395,33396],{},[590,33397,4865],{},[927,33399,33400],{},"Opacity of the plane",[927,33402,33403],{},[590,33404,1897],{},[909,33406,33407,33412,33415],{},[927,33408,33409],{},[590,33410,33411],{},"alphaTest",[927,33413,33414],{},"Discards alpha pixels",[927,33416,33417],{},[590,33418,2150],{},[909,33420,33421,33425,33428],{},[927,33422,33423],{},[590,33424,2504],{},[927,33426,33427],{},"Shadow color",[927,33429,33430],{},[590,33431,4848],{},[909,33433,33434,33439,33443],{},[927,33435,33436],{},[590,33437,33438],{},"colorBlend",[927,33440,33371,33441,33374],{},[590,33442,6942],{},[927,33444,33445],{},[590,33446,6942],{},[909,33448,33449,33453,33456],{},[927,33450,33451],{},[590,33452,22879],{},[927,33454,33455],{},"Buffer resolution",[927,33457,33458],{},[590,33459,33460],{},"1024",[909,33462,33463,33468,33471],{},[927,33464,33465],{},[590,33466,33467],{},"toneMapped",[927,33469,33470],{},"Texture tonemapping",[927,33472,33473],{},[590,33474,937],{},[476,33476,29163],{"id":29162},[586,33478,33479,33480,33483,33484,1122],{},"You can bring your own lights to ",[590,33481,33482],{},"\u003CAccumulatedShadows />",", but it's designed to be used with ",[590,33485,33486],{},"\u003CRandomizedLights />",[586,33488,33489,33490,33494,33495,33497,33498,33501,33502,33506],{},"By default, there's a ",[1116,33491,33492],{"href":338},[590,33493,33486],{}," instance provided in ",[590,33496,33482],{},"'s ",[590,33499,33500],{},"\u003Cslot />",". You can replace it with your own ",[1116,33503,33504],{"href":338},[590,33505,33486],{}," or an alternative by passing it as a child component.",[1303,33508,33509],{},"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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":548,"searchDepth":549,"depth":550,"links":33511},[33512,33513,33514],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},{"id":29162,"depth":550,"text":29163},"DirectionalLight-based shadow component with progressive accumulation.",{},{"title":317,"description":33515},"VdtFCKwQ2ZyFv-ZyG0covi7a2nS1DuskCV9MJO6BaDQ",{"id":33520,"title":321,"body":33521,"description":34134,"extension":563,"links":564,"meta":34135,"navigation":566,"path":322,"seo":34136,"stem":323,"__hash__":34137},"docs/2.api/7.light-shadow/bake-shadows.md",{"type":473,"value":33522,"toc":34131},[33523,33528,33539,33541,33546,34128],[2562,33524,33525],{},[33526,33527],"light-shadow-bake-shadows",{},[586,33529,33530,31030,33532,33535,33536,33538],{},[1677,33531,31029],{},[590,33533,33534],{},"BakeShadows",". Basically this component set the renderer.shadowMap.autoUpdate to ",[590,33537,947],{},", so the shadows are casted just in the first frame which is really great for performance, the downside of this method is that the shadows will not be updated.",[476,33540,31037],{"id":31036},[3729,33542,33543],{},[586,33544,33545],{},"You have to set the shadows in the TresCanvas (renderer), your light sources and objects to receive and cast accordantly as you normally would do.",[598,33547,33550],{"className":600,"code":33548,"highlights":33549,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { BakeShadows } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport { shallowRef } from 'vue'\n\nconst cubeRef = shallowRef()\n\nfunction onLoop({ elapsed }: { elapsed: number }) {\n  if (cubeRef.value) {\n    cubeRef.value.rotation.y = elapsed * 0.5\n    cubeRef.value.rotation.x = elapsed * 0.5\n  }\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas\n    clear-color=\"#82DBC5\"\n    shadows\n    @loop=\"onLoop\"\n  >\n    \u003CTresPerspectiveCamera\n      :position=\"[0, 2, 5]\"\n      :look-at=\"[0, 0, 0]\"\n    />\n    \u003CBakeShadows />\n    \u003CTresMesh\n      ref=\"cubeRef\"\n      cast-shadow\n    >\n      \u003CTresBoxGeometry />\n      \u003CTresMeshStandardMaterial color=\"orange\" />\n    \u003C/TresMesh>\n    \u003CTresMesh\n      receive-shadow\n      :position=\"[0, -2, 0]\"\n      :rotation-x=\"-Math.PI / 2\"\n    >\n      \u003CTresPlaneGeometry :args=\"[5, 5]\" />\n      \u003CTresMeshStandardMaterial :color=\"0xF7F7F7\" />\n    \u003C/TresMesh>\n    \u003CTresDirectionalLight\n      cast-shadow\n      :position=\"[0, 10, 0]\"\n    />\n  \u003C/TresCanvas>\n\u003C/template>\n\n",[550,3051],[590,33551,33552,33572,33592,33610,33628,33632,33645,33649,33678,33695,33721,33745,33749,33753,33761,33765,33773,33780,33793,33798,33813,33817,33823,33849,33875,33879,33888,33894,33906,33911,33915,33923,33941,33949,33955,33960,33986,34011,34015,34043,34064,34072,34078,34082,34108,34112,34120],{"__ignoreMap":548},[609,33553,33554,33556,33558,33560,33562,33564,33566,33568,33570],{"class":611,"line":549},[609,33555,615],{"class":614},[609,33557,619],{"class":618},[609,33559,623],{"class":622},[609,33561,626],{"class":622},[609,33563,629],{"class":614},[609,33565,632],{"class":614},[609,33567,636],{"class":635},[609,33569,632],{"class":614},[609,33571,641],{"class":614},[609,33573,33575,33577,33579,33582,33584,33586,33588,33590],{"class":33574,"line":550},[611,645],[609,33576,649],{"class":648},[609,33578,652],{"class":614},[609,33580,33581],{"class":655}," BakeShadows",[609,33583,665],{"class":614},[609,33585,668],{"class":648},[609,33587,671],{"class":614},[609,33589,674],{"class":635},[609,33591,677],{"class":614},[609,33593,33594,33596,33598,33600,33602,33604,33606,33608],{"class":611,"line":680},[609,33595,649],{"class":648},[609,33597,652],{"class":614},[609,33599,687],{"class":655},[609,33601,665],{"class":614},[609,33603,668],{"class":648},[609,33605,671],{"class":614},[609,33607,696],{"class":635},[609,33609,677],{"class":614},[609,33611,33612,33614,33616,33618,33620,33622,33624,33626],{"class":611,"line":701},[609,33613,649],{"class":648},[609,33615,652],{"class":614},[609,33617,7909],{"class":655},[609,33619,665],{"class":614},[609,33621,668],{"class":648},[609,33623,671],{"class":614},[609,33625,605],{"class":635},[609,33627,677],{"class":614},[609,33629,33630],{"class":611,"line":711},[609,33631,714],{"emptyLinePlaceholder":566},[609,33633,33634,33636,33639,33641,33643],{"class":611,"line":717},[609,33635,2693],{"class":622},[609,33637,33638],{"class":655}," cubeRef ",[609,33640,629],{"class":614},[609,33642,7909],{"class":2804},[609,33644,2850],{"class":655},[609,33646,33647],{"class":611,"line":727},[609,33648,714],{"emptyLinePlaceholder":566},[609,33650,33651,33653,33656,33659,33662,33665,33667,33669,33671,33673,33676],{"class":611,"line":750},[609,33652,8445],{"class":622},[609,33654,33655],{"class":2804}," onLoop",[609,33657,33658],{"class":614},"({",[609,33660,33661],{"class":5499}," elapsed",[609,33663,33664],{"class":614}," }:",[609,33666,652],{"class":614},[609,33668,33661],{"class":618},[609,33670,1194],{"class":614},[609,33672,2701],{"class":1176},[609,33674,33675],{"class":614}," })",[609,33677,1180],{"class":614},[609,33679,33680,33682,33684,33687,33689,33691,33693],{"class":611,"line":762},[609,33681,8458],{"class":648},[609,33683,2717],{"class":618},[609,33685,33686],{"class":655},"cubeRef",[609,33688,1122],{"class":614},[609,33690,5500],{"class":655},[609,33692,2752],{"class":618},[609,33694,2755],{"class":614},[609,33696,33697,33700,33702,33704,33706,33708,33710,33712,33714,33716,33719],{"class":611,"line":772},[609,33698,33699],{"class":655},"    cubeRef",[609,33701,1122],{"class":614},[609,33703,5500],{"class":655},[609,33705,1122],{"class":614},[609,33707,22526],{"class":655},[609,33709,1122],{"class":614},[609,33711,8720],{"class":655},[609,33713,2770],{"class":614},[609,33715,33661],{"class":655},[609,33717,33718],{"class":614}," *",[609,33720,8493],{"class":795},[609,33722,33723,33725,33727,33729,33731,33733,33735,33737,33739,33741,33743],{"class":611,"line":777},[609,33724,33699],{"class":655},[609,33726,1122],{"class":614},[609,33728,5500],{"class":655},[609,33730,1122],{"class":614},[609,33732,22526],{"class":655},[609,33734,1122],{"class":614},[609,33736,2811],{"class":655},[609,33738,2770],{"class":614},[609,33740,33661],{"class":655},[609,33742,33718],{"class":614},[609,33744,8493],{"class":795},[609,33746,33747],{"class":611,"line":803},[609,33748,2829],{"class":614},[609,33750,33751],{"class":611,"line":603},[609,33752,1301],{"class":614},[609,33754,33755,33757,33759],{"class":611,"line":826},[609,33756,704],{"class":614},[609,33758,619],{"class":618},[609,33760,641],{"class":614},[609,33762,33763],{"class":611,"line":837},[609,33764,714],{"emptyLinePlaceholder":566},[609,33766,33767,33769,33771],{"class":611,"line":848},[609,33768,615],{"class":614},[609,33770,722],{"class":618},[609,33772,641],{"class":614},[609,33774,33775,33777],{"class":611,"line":858},[609,33776,730],{"class":614},[609,33778,33779],{"class":618},"TresCanvas\n",[609,33781,33782,33785,33787,33789,33791],{"class":611,"line":604},[609,33783,33784],{"class":622},"    clear-color",[609,33786,629],{"class":614},[609,33788,632],{"class":614},[609,33790,5044],{"class":635},[609,33792,2991],{"class":614},[609,33794,33795],{"class":611,"line":878},[609,33796,33797],{"class":622},"    shadows\n",[609,33799,33800,33802,33804,33806,33808,33811],{"class":611,"line":888},[609,33801,14772],{"class":614},[609,33803,20504],{"class":622},[609,33805,629],{"class":614},[609,33807,632],{"class":614},[609,33809,33810],{"class":655},"onLoop",[609,33812,2991],{"class":614},[609,33814,33815],{"class":611,"line":2956},[609,33816,14806],{"class":614},[609,33818,33819,33821],{"class":611,"line":2964},[609,33820,753],{"class":614},[609,33822,20069],{"class":618},[609,33824,33825,33827,33829,33831,33833,33835,33837,33839,33841,33843,33845,33847],{"class":611,"line":2994},[609,33826,5697],{"class":614},[609,33828,1463],{"class":622},[609,33830,629],{"class":614},[609,33832,632],{"class":614},[609,33834,1470],{"class":614},[609,33836,941],{"class":795},[609,33838,1475],{"class":614},[609,33840,796],{"class":795},[609,33842,1475],{"class":614},[609,33844,2400],{"class":795},[609,33846,1485],{"class":614},[609,33848,2991],{"class":614},[609,33850,33851,33853,33855,33857,33859,33861,33863,33865,33867,33869,33871,33873],{"class":611,"line":3011},[609,33852,5697],{"class":614},[609,33854,3444],{"class":622},[609,33856,629],{"class":614},[609,33858,632],{"class":614},[609,33860,1470],{"class":614},[609,33862,941],{"class":795},[609,33864,1475],{"class":614},[609,33866,941],{"class":795},[609,33868,1475],{"class":614},[609,33870,941],{"class":795},[609,33872,1485],{"class":614},[609,33874,2991],{"class":614},[609,33876,33877],{"class":611,"line":3026},[609,33878,11765],{"class":614},[609,33880,33882,33884,33886],{"class":33881,"line":3051},[611,645],[609,33883,753],{"class":614},[609,33885,33534],{"class":618},[609,33887,759],{"class":614},[609,33889,33890,33892],{"class":611,"line":2595},[609,33891,753],{"class":614},[609,33893,2961],{"class":618},[609,33895,33896,33898,33900,33902,33904],{"class":611,"line":3066},[609,33897,5683],{"class":622},[609,33899,629],{"class":614},[609,33901,632],{"class":614},[609,33903,33686],{"class":635},[609,33905,2991],{"class":614},[609,33907,33908],{"class":611,"line":3096},[609,33909,33910],{"class":622},"      cast-shadow\n",[609,33912,33913],{"class":611,"line":3105},[609,33914,5717],{"class":614},[609,33916,33917,33919,33921],{"class":611,"line":4211},[609,33918,829],{"class":614},[609,33920,843],{"class":618},[609,33922,759],{"class":614},[609,33924,33925,33927,33929,33931,33933,33935,33937,33939],{"class":611,"line":4216},[609,33926,829],{"class":614},[609,33928,8099],{"class":618},[609,33930,3982],{"class":622},[609,33932,629],{"class":614},[609,33934,632],{"class":614},[609,33936,6742],{"class":635},[609,33938,632],{"class":614},[609,33940,759],{"class":614},[609,33942,33943,33945,33947],{"class":611,"line":4239},[609,33944,871],{"class":614},[609,33946,832],{"class":618},[609,33948,641],{"class":614},[609,33950,33951,33953],{"class":611,"line":4248},[609,33952,753],{"class":614},[609,33954,2961],{"class":618},[609,33956,33957],{"class":611,"line":4257},[609,33958,33959],{"class":622},"      receive-shadow\n",[609,33961,33962,33964,33966,33968,33970,33972,33974,33976,33978,33980,33982,33984],{"class":611,"line":4266},[609,33963,5697],{"class":614},[609,33965,1463],{"class":622},[609,33967,629],{"class":614},[609,33969,632],{"class":614},[609,33971,1470],{"class":614},[609,33973,941],{"class":795},[609,33975,3602],{"class":614},[609,33977,796],{"class":795},[609,33979,1475],{"class":614},[609,33981,941],{"class":795},[609,33983,1485],{"class":614},[609,33985,2991],{"class":614},[609,33987,33988,33990,33993,33995,33997,33999,34001,34003,34005,34007,34009],{"class":611,"line":4275},[609,33989,5697],{"class":614},[609,33991,33992],{"class":622},"rotation-x",[609,33994,629],{"class":614},[609,33996,632],{"class":614},[609,33998,4092],{"class":614},[609,34000,22535],{"class":655},[609,34002,1122],{"class":614},[609,34004,22540],{"class":655},[609,34006,22543],{"class":614},[609,34008,796],{"class":795},[609,34010,2991],{"class":614},[609,34012,34013],{"class":611,"line":15730},[609,34014,5717],{"class":614},[609,34016,34017,34019,34021,34023,34025,34027,34029,34031,34033,34035,34037,34039,34041],{"class":611,"line":15745},[609,34018,829],{"class":614},[609,34020,22566],{"class":618},[609,34022,785],{"class":614},[609,34024,1993],{"class":622},[609,34026,629],{"class":614},[609,34028,632],{"class":614},[609,34030,1470],{"class":614},[609,34032,2400],{"class":795},[609,34034,1475],{"class":614},[609,34036,2400],{"class":795},[609,34038,1485],{"class":614},[609,34040,632],{"class":614},[609,34042,759],{"class":614},[609,34044,34045,34047,34049,34051,34053,34055,34057,34060,34062],{"class":611,"line":15760},[609,34046,829],{"class":614},[609,34048,8099],{"class":618},[609,34050,785],{"class":614},[609,34052,2504],{"class":622},[609,34054,629],{"class":614},[609,34056,632],{"class":614},[609,34058,34059],{"class":795},"0xF7F7F7",[609,34061,632],{"class":614},[609,34063,759],{"class":614},[609,34065,34066,34068,34070],{"class":611,"line":15765},[609,34067,871],{"class":614},[609,34069,832],{"class":618},[609,34071,641],{"class":614},[609,34073,34074,34076],{"class":611,"line":15772},[609,34075,753],{"class":614},[609,34077,11720],{"class":618},[609,34079,34080],{"class":611,"line":15777},[609,34081,33910],{"class":622},[609,34083,34084,34086,34088,34090,34092,34094,34096,34098,34100,34102,34104,34106],{"class":611,"line":15783},[609,34085,5697],{"class":614},[609,34087,1463],{"class":622},[609,34089,629],{"class":614},[609,34091,632],{"class":614},[609,34093,1470],{"class":614},[609,34095,941],{"class":795},[609,34097,1475],{"class":614},[609,34099,1482],{"class":795},[609,34101,1475],{"class":614},[609,34103,941],{"class":795},[609,34105,1485],{"class":614},[609,34107,2991],{"class":614},[609,34109,34110],{"class":611,"line":15804},[609,34111,11765],{"class":614},[609,34113,34114,34116,34118],{"class":611,"line":15810},[609,34115,881],{"class":614},[609,34117,733],{"class":618},[609,34119,641],{"class":614},[609,34121,34122,34124,34126],{"class":611,"line":15817},[609,34123,704],{"class":614},[609,34125,722],{"class":618},[609,34127,641],{"class":614},[1303,34129,34130],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":548,"searchDepth":549,"depth":550,"links":34132},[34133],{"id":31036,"depth":550,"text":31037},"Bakes shadows in the first frame for performance optimization.",{},{"title":321,"description":34134},"QK3DUMpIehZIpD5u6Zp41TLp1-R6Kjjc-USX_iID0V8",{"id":34139,"title":325,"body":34140,"description":34546,"extension":563,"links":564,"meta":34547,"navigation":566,"path":326,"seo":34548,"stem":327,"__hash__":34549},"docs/2.api/7.light-shadow/circle-shadow.md",{"type":473,"value":34141,"toc":34542},[34142,34147,34156,34158,34446,34448,34450,34540],[580,34143,34144],{},[34145,34146],"light-shadow-circle-shadow",{},[586,34148,34149,34152,34153,1122],{},[590,34150,34151],{},"\u003CCircleShadow />"," is a cheap, texture-based radial gradient on a ",[590,34154,34155],{},"THREE.PlaneGeometry",[476,34157,15],{"id":596},[598,34159,34162],{"className":600,"code":34160,"highlights":34161,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { CircleShadow, OrbitControls } from \"@tresjs/cientos\";\nimport { TresCanvas } from \"@tresjs/core\";\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#82DBC5\">\n    \u003CTresPerspectiveCamera />\n    \u003COrbitControls />\n    \u003CTresGroup :position-y=\"-0.5\">\n      \u003CTresMesh :position-y=\"1\">\n        \u003CTresBoxGeometry />\n        \u003CTresMeshToonMaterial color=\"orange\" />\n      \u003C/TresMesh>\n      \u003CCircleShadow :scale=\"1.5\" />\n    \u003C/TresGroup>\n    \u003CTresAmbientLight />\n    \u003CTresDirectionalLight :position=\"[0, 2, 4]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n\n",[550,837],[590,34163,34164,34184,34210,34230,34238,34242,34250,34268,34276,34284,34306,34326,34334,34352,34360,34382,34390,34398,34430,34438],{"__ignoreMap":548},[609,34165,34166,34168,34170,34172,34174,34176,34178,34180,34182],{"class":611,"line":549},[609,34167,615],{"class":614},[609,34169,619],{"class":618},[609,34171,623],{"class":622},[609,34173,626],{"class":622},[609,34175,629],{"class":614},[609,34177,632],{"class":614},[609,34179,636],{"class":635},[609,34181,632],{"class":614},[609,34183,641],{"class":614},[609,34185,34187,34189,34191,34194,34196,34198,34200,34202,34204,34206,34208],{"class":34186,"line":550},[611,645],[609,34188,649],{"class":648},[609,34190,652],{"class":614},[609,34192,34193],{"class":655}," CircleShadow",[609,34195,659],{"class":614},[609,34197,662],{"class":655},[609,34199,665],{"class":614},[609,34201,668],{"class":648},[609,34203,3326],{"class":614},[609,34205,674],{"class":635},[609,34207,632],{"class":614},[609,34209,3333],{"class":614},[609,34211,34212,34214,34216,34218,34220,34222,34224,34226,34228],{"class":611,"line":680},[609,34213,649],{"class":648},[609,34215,652],{"class":614},[609,34217,687],{"class":655},[609,34219,665],{"class":614},[609,34221,668],{"class":648},[609,34223,3326],{"class":614},[609,34225,696],{"class":635},[609,34227,632],{"class":614},[609,34229,3333],{"class":614},[609,34231,34232,34234,34236],{"class":611,"line":701},[609,34233,704],{"class":614},[609,34235,619],{"class":618},[609,34237,641],{"class":614},[609,34239,34240],{"class":611,"line":711},[609,34241,714],{"emptyLinePlaceholder":566},[609,34243,34244,34246,34248],{"class":611,"line":717},[609,34245,615],{"class":614},[609,34247,722],{"class":618},[609,34249,641],{"class":614},[609,34251,34252,34254,34256,34258,34260,34262,34264,34266],{"class":611,"line":727},[609,34253,730],{"class":614},[609,34255,733],{"class":618},[609,34257,736],{"class":622},[609,34259,629],{"class":614},[609,34261,632],{"class":614},[609,34263,5044],{"class":635},[609,34265,632],{"class":614},[609,34267,641],{"class":614},[609,34269,34270,34272,34274],{"class":611,"line":750},[609,34271,753],{"class":614},[609,34273,756],{"class":618},[609,34275,759],{"class":614},[609,34277,34278,34280,34282],{"class":611,"line":762},[609,34279,753],{"class":614},[609,34281,767],{"class":618},[609,34283,759],{"class":614},[609,34285,34286,34288,34290,34292,34294,34296,34298,34300,34302,34304],{"class":611,"line":772},[609,34287,753],{"class":614},[609,34289,3916],{"class":618},[609,34291,785],{"class":614},[609,34293,1972],{"class":622},[609,34295,629],{"class":614},[609,34297,632],{"class":614},[609,34299,4092],{"class":614},[609,34301,1517],{"class":795},[609,34303,632],{"class":614},[609,34305,641],{"class":614},[609,34307,34308,34310,34312,34314,34316,34318,34320,34322,34324],{"class":611,"line":777},[609,34309,829],{"class":614},[609,34311,832],{"class":618},[609,34313,785],{"class":614},[609,34315,1972],{"class":622},[609,34317,629],{"class":614},[609,34319,632],{"class":614},[609,34321,1897],{"class":795},[609,34323,632],{"class":614},[609,34325,641],{"class":614},[609,34327,34328,34330,34332],{"class":611,"line":803},[609,34329,840],{"class":614},[609,34331,843],{"class":618},[609,34333,759],{"class":614},[609,34335,34336,34338,34340,34342,34344,34346,34348,34350],{"class":611,"line":603},[609,34337,840],{"class":614},[609,34339,6733],{"class":618},[609,34341,3982],{"class":622},[609,34343,629],{"class":614},[609,34345,632],{"class":614},[609,34347,6742],{"class":635},[609,34349,632],{"class":614},[609,34351,759],{"class":614},[609,34353,34354,34356,34358],{"class":611,"line":826},[609,34355,861],{"class":614},[609,34357,832],{"class":618},[609,34359,641],{"class":614},[609,34361,34363,34365,34368,34370,34372,34374,34376,34378,34380],{"class":34362,"line":837},[611,645],[609,34364,829],{"class":614},[609,34366,34367],{"class":618},"CircleShadow",[609,34369,785],{"class":614},[609,34371,788],{"class":622},[609,34373,629],{"class":614},[609,34375,632],{"class":614},[609,34377,10828],{"class":795},[609,34379,632],{"class":614},[609,34381,759],{"class":614},[609,34383,34384,34386,34388],{"class":611,"line":848},[609,34385,871],{"class":614},[609,34387,3916],{"class":618},[609,34389,641],{"class":614},[609,34391,34392,34394,34396],{"class":611,"line":858},[609,34393,753],{"class":614},[609,34395,3522],{"class":618},[609,34397,759],{"class":614},[609,34399,34400,34402,34404,34406,34408,34410,34412,34414,34416,34418,34420,34422,34424,34426,34428],{"class":611,"line":604},[609,34401,753],{"class":614},[609,34403,3543],{"class":618},[609,34405,785],{"class":614},[609,34407,1463],{"class":622},[609,34409,629],{"class":614},[609,34411,632],{"class":614},[609,34413,1470],{"class":614},[609,34415,941],{"class":795},[609,34417,1475],{"class":614},[609,34419,796],{"class":795},[609,34421,1475],{"class":614},[609,34423,3494],{"class":795},[609,34425,1485],{"class":614},[609,34427,632],{"class":614},[609,34429,759],{"class":614},[609,34431,34432,34434,34436],{"class":611,"line":878},[609,34433,881],{"class":614},[609,34435,733],{"class":618},[609,34437,641],{"class":614},[609,34439,34440,34442,34444],{"class":611,"line":888},[609,34441,704],{"class":614},[609,34443,722],{"class":618},[609,34445,641],{"class":614},[476,34447,898],{"id":897},[586,34449,901],{},[903,34451,34452,34462],{},[906,34453,34454],{},[909,34455,34456,34458,34460],{},[912,34457,3122],{"align":973},[912,34459,917],{"align":973},[912,34461,920],{},[922,34463,34464,34480,34493,34513,34527],{},[909,34465,34466,34470,34476],{},[927,34467,34468],{"align":973},[590,34469,2504],{},[927,34471,34472,34473],{"align":973},"Color of the shadow as a ",[590,34474,34475],{},"Color | number | string",[927,34477,34478],{},[590,34479,4848],{},[909,34481,34482,34486,34489],{},[927,34483,34484],{"align":973},[590,34485,4865],{},[927,34487,34488],{"align":973},"Opacity of the shadow",[927,34490,34491],{},[590,34492,1517],{},[909,34494,34495,34500,34509],{},[927,34496,34497],{"align":973},[590,34498,34499],{},"offset",[927,34501,34502,34503,34505,34506,34508],{"align":973},"Placement of the first radial gradient color stop. ",[590,34504,7211],{}," is the center of the circle. ",[590,34507,7089],{}," is edge.",[927,34510,34511],{},[590,34512,941],{},[909,34514,34515,34520,34523],{},[927,34516,34517],{"align":973},[590,34518,34519],{},"fog",[927,34521,34522],{"align":973},"Whether the material is affected by fog",[927,34524,34525],{},[590,34526,947],{},[909,34528,34529,34533,34536],{},[927,34530,34531],{"align":973},[590,34532,4338],{},[927,34534,34535],{"align":973},"Whether rendering the material has any effect on the depth buffer",[927,34537,34538],{},[590,34539,947],{},[1303,34541,1652],{},{"title":548,"searchDepth":549,"depth":550,"links":34543},[34544,34545],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},"Cheap, texture-based radial gradient shadow on a plane geometry.",{},{"title":325,"description":34546},"jex1uKNCt29jCPBXUCSBNgtrQ_7FSemdGlLVzRCeKOs",{"id":34551,"title":329,"body":34552,"description":35041,"extension":563,"links":564,"meta":35042,"navigation":566,"path":330,"seo":35043,"stem":331,"__hash__":35044},"docs/2.api/7.light-shadow/contact-shadows.md",{"type":473,"value":34553,"toc":35037},[34554,34559,34575,34577,34849,34851,35035],[580,34555,34556],{},[34557,34558],"light-shadow-contact-shadow",{},[586,34560,34561,34564,34565,31539,34570,1122],{},[590,34562,34563],{},"\u003CContactShadows />"," is a \"fake\", non-lighting-based shadow component. It displays shadows on a single plane. The component is based on the ",[1116,34566,34569],{"href":34567,"rel":34568},"https://threejs.org/examples/webgl_shadow_contact.html",[1120],"Three.js contact shadows example",[1116,34571,34574],{"href":34572,"rel":34573},"https://twitter.com/mrdoob",[1120],"@mrdoob",[476,34576,15],{"id":596},[598,34578,34581],{"className":600,"code":34579,"highlights":34580,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { ContactShadows, Levioso, TorusKnot } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"white\">\n    \u003CLevioso :speed=\"2\" :range=\"[0, 0.7]\" :rotation-factor=\"9\">\n      \u003CTorusKnot :scale=\"0.45\">\n        \u003CTresMeshNormalMaterial />\n      \u003C/TorusKnot>\n    \u003C/Levioso>\n    \u003CContactShadows :position-y=\"-1\" color=\"#335\" :scale=\"20\" />\n  \u003C/TresCanvas>\n\u003C/template>\n",[550,603],[590,34582,34583,34603,34632,34650,34658,34662,34670,34688,34742,34762,34770,34778,34786,34833,34841],{"__ignoreMap":548},[609,34584,34585,34587,34589,34591,34593,34595,34597,34599,34601],{"class":611,"line":549},[609,34586,615],{"class":614},[609,34588,619],{"class":618},[609,34590,623],{"class":622},[609,34592,626],{"class":622},[609,34594,629],{"class":614},[609,34596,632],{"class":614},[609,34598,636],{"class":635},[609,34600,632],{"class":614},[609,34602,641],{"class":614},[609,34604,34606,34608,34610,34613,34615,34617,34619,34622,34624,34626,34628,34630],{"class":34605,"line":550},[611,645],[609,34607,649],{"class":648},[609,34609,652],{"class":614},[609,34611,34612],{"class":655}," ContactShadows",[609,34614,659],{"class":614},[609,34616,3343],{"class":655},[609,34618,659],{"class":614},[609,34620,34621],{"class":655}," TorusKnot",[609,34623,665],{"class":614},[609,34625,668],{"class":648},[609,34627,671],{"class":614},[609,34629,674],{"class":635},[609,34631,677],{"class":614},[609,34633,34634,34636,34638,34640,34642,34644,34646,34648],{"class":611,"line":680},[609,34635,649],{"class":648},[609,34637,652],{"class":614},[609,34639,687],{"class":655},[609,34641,665],{"class":614},[609,34643,668],{"class":648},[609,34645,671],{"class":614},[609,34647,696],{"class":635},[609,34649,677],{"class":614},[609,34651,34652,34654,34656],{"class":611,"line":701},[609,34653,704],{"class":614},[609,34655,619],{"class":618},[609,34657,641],{"class":614},[609,34659,34660],{"class":611,"line":711},[609,34661,714],{"emptyLinePlaceholder":566},[609,34663,34664,34666,34668],{"class":611,"line":717},[609,34665,615],{"class":614},[609,34667,722],{"class":618},[609,34669,641],{"class":614},[609,34671,34672,34674,34676,34678,34680,34682,34684,34686],{"class":611,"line":727},[609,34673,730],{"class":614},[609,34675,733],{"class":618},[609,34677,736],{"class":622},[609,34679,629],{"class":614},[609,34681,632],{"class":614},[609,34683,3989],{"class":635},[609,34685,632],{"class":614},[609,34687,641],{"class":614},[609,34689,34690,34692,34694,34696,34698,34700,34702,34704,34706,34708,34710,34712,34714,34716,34718,34720,34723,34725,34727,34729,34732,34734,34736,34738,34740],{"class":611,"line":750},[609,34691,753],{"class":614},[609,34693,3482],{"class":618},[609,34695,785],{"class":614},[609,34697,3487],{"class":622},[609,34699,629],{"class":614},[609,34701,632],{"class":614},[609,34703,796],{"class":795},[609,34705,632],{"class":614},[609,34707,785],{"class":614},[609,34709,3694],{"class":622},[609,34711,629],{"class":614},[609,34713,632],{"class":614},[609,34715,1470],{"class":614},[609,34717,941],{"class":795},[609,34719,1475],{"class":614},[609,34721,34722],{"class":795},"0.7",[609,34724,1485],{"class":614},[609,34726,632],{"class":614},[609,34728,785],{"class":614},[609,34730,34731],{"class":622},"rotation-factor",[609,34733,629],{"class":614},[609,34735,632],{"class":614},[609,34737,20092],{"class":795},[609,34739,632],{"class":614},[609,34741,641],{"class":614},[609,34743,34744,34746,34748,34750,34752,34754,34756,34758,34760],{"class":611,"line":762},[609,34745,829],{"class":614},[609,34747,29583],{"class":618},[609,34749,785],{"class":614},[609,34751,788],{"class":622},[609,34753,629],{"class":614},[609,34755,632],{"class":614},[609,34757,21961],{"class":795},[609,34759,632],{"class":614},[609,34761,641],{"class":614},[609,34763,34764,34766,34768],{"class":611,"line":772},[609,34765,840],{"class":614},[609,34767,853],{"class":618},[609,34769,759],{"class":614},[609,34771,34772,34774,34776],{"class":611,"line":777},[609,34773,861],{"class":614},[609,34775,29583],{"class":618},[609,34777,641],{"class":614},[609,34779,34780,34782,34784],{"class":611,"line":803},[609,34781,871],{"class":614},[609,34783,3482],{"class":618},[609,34785,641],{"class":614},[609,34787,34789,34791,34794,34796,34798,34800,34802,34804,34806,34808,34810,34812,34814,34817,34819,34821,34823,34825,34827,34829,34831],{"class":34788,"line":603},[611,645],[609,34790,753],{"class":614},[609,34792,34793],{"class":618},"ContactShadows",[609,34795,785],{"class":614},[609,34797,1972],{"class":622},[609,34799,629],{"class":614},[609,34801,632],{"class":614},[609,34803,4092],{"class":614},[609,34805,1897],{"class":795},[609,34807,632],{"class":614},[609,34809,3982],{"class":622},[609,34811,629],{"class":614},[609,34813,632],{"class":614},[609,34815,34816],{"class":635},"#335",[609,34818,632],{"class":614},[609,34820,785],{"class":614},[609,34822,788],{"class":622},[609,34824,629],{"class":614},[609,34826,632],{"class":614},[609,34828,24411],{"class":795},[609,34830,632],{"class":614},[609,34832,759],{"class":614},[609,34834,34835,34837,34839],{"class":611,"line":826},[609,34836,881],{"class":614},[609,34838,733],{"class":618},[609,34840,641],{"class":614},[609,34842,34843,34845,34847],{"class":611,"line":837},[609,34844,704],{"class":614},[609,34846,722],{"class":618},[609,34848,641],{"class":614},[476,34850,898],{"id":897},[903,34852,34853,34863],{},[906,34854,34855],{},[909,34856,34857,34859,34861],{},[912,34858,914],{},[912,34860,917],{},[912,34862,920],{},[922,34864,34865,34878,34891,34905,34921,34935,34949,34963,34977,34991,35005,35022],{},[909,34866,34867,34871,34874],{},[927,34868,34869],{},[590,34870,4865],{},[927,34872,34873],{},"The opacity of the shadows.",[927,34875,34876],{},[590,34877,1897],{},[909,34879,34880,34884,34887],{},[927,34881,34882],{},[590,34883,15970],{},[927,34885,34886],{},"The blur of the shadows.",[927,34888,34889],{},[590,34890,1897],{},[909,34892,34893,34897,34900],{},[927,34894,34895],{},[590,34896,2504],{},[927,34898,34899],{},"The color of the shadows.",[927,34901,34902],{},[590,34903,34904],{},"'#000000'",[909,34906,34907,34912,34917],{},[927,34908,34909],{},[590,34910,34911],{},"tint",[927,34913,34914,34915,1122],{},"If provided, the color of the \"core\" of the shadows. \"Added\" to ",[590,34916,2504],{},[927,34918,34919],{},[590,34920,1155],{},[909,34922,34923,34927,34933],{},[927,34924,34925],{},[590,34926,788],{},[927,34928,34929,34930,1122],{},"The scale of the shadows/shadow plane. Can be a number or an array of two numbers ",[590,34931,34932],{},"[x, y]",[927,34934,1482],{},[909,34936,34937,34942,34945],{},[927,34938,34939],{},[590,34940,34941],{},"width",[927,34943,34944],{},"The width of the shadow plane.",[927,34946,34947],{},[590,34948,1897],{},[909,34950,34951,34956,34959],{},[927,34952,34953],{},[590,34954,34955],{},"height",[927,34957,34958],{},"The height of the shadow plane.",[927,34960,34961],{},[590,34962,1897],{},[909,34964,34965,34970,34973],{},[927,34966,34967],{},[590,34968,34969],{},"far",[927,34971,34972],{},"The distance of the orthographic shadow camera extends above the shadow plane.",[927,34974,34975],{},[590,34976,1482],{},[909,34978,34979,34984,34987],{},[927,34980,34981],{},[590,34982,34983],{},"smooth",[927,34985,34986],{},"Whether the shadows should be smoothed to reduce artifacts.",[927,34988,34989],{},[590,34990,937],{},[909,34992,34993,34997,35000],{},[927,34994,34995],{},[590,34996,22879],{},[927,34998,34999],{},"The resolution of the shadow textures.",[927,35001,35002],{},[590,35003,35004],{},"512",[909,35006,35007,35011,35017],{},[927,35008,35009],{},[590,35010,33329],{},[927,35012,35013,35014,35016],{},"For performance, optionally stop updating shadows after ",[590,35015,33329],{}," frames.",[927,35018,35019],{},[590,35020,35021],{},"Math.POSITIVE_INFINITY",[909,35023,35024,35028,35031],{},[927,35025,35026],{},[590,35027,4338],{},[927,35029,35030],{},"Whether the shadows should write to the depth buffer or not.",[927,35032,35033],{},[590,35034,947],{},[1303,35036,1652],{},{"title":548,"searchDepth":549,"depth":550,"links":35038},[35039,35040],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},"Fake, non-lighting-based shadow component for single plane shadows.",{},{"title":329,"description":35041},"TB1Ehaki9I6r1J_wGeA_UAl3knLim1b5GHqTm1K7PNY",{"id":35046,"title":333,"body":35047,"description":36561,"extension":563,"links":564,"meta":36562,"navigation":566,"path":334,"seo":36563,"stem":335,"__hash__":36564},"docs/2.api/7.light-shadow/lensflare.md",{"type":473,"value":35048,"toc":36545},[35049,35054,35065,35067,35200,35202,35327,35331,35337,35345,35351,35408,35412,35418,35432,35439,35443,35469,35486,35492,35497,35502,35509,35515,35607,35612,35616,35621,35634,35638,35646,35702,35712,35715,35735,35744,35751,35755,35758,35766,35778,35786,35812,35819,35852,35856,35859,35903,35917,35922,35925,35928,35951,35970,35975,35979,35982,36114,36119,36124,36313,36319,36325,36328,36331,36542],[580,35050,35051],{},[35052,35053],"light-shadow-lensflare",{},[586,35055,35056,35059,35060,1122],{},[590,35057,35058],{},"\u003CLensflare />"," wraps the ",[1116,35061,35064],{"href":35062,"rel":35063},"https://threejs.org/docs/#examples/en/objects/Lensflare",[1120],"Three.js Lensflare",[476,35066,15],{"id":596},[598,35068,35071],{"className":600,"code":35069,"highlights":35070,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Lensflare } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPointLight>\n      \u003CLensflare />\n    \u003C/TresPointLight>\n  \u003C/TresCanvas>\n\u003C/template>\n",[680,762],[590,35072,35073,35093,35111,35131,35139,35143,35151,35159,35167,35176,35184,35192],{"__ignoreMap":548},[609,35074,35075,35077,35079,35081,35083,35085,35087,35089,35091],{"class":611,"line":549},[609,35076,615],{"class":614},[609,35078,619],{"class":618},[609,35080,623],{"class":622},[609,35082,626],{"class":622},[609,35084,629],{"class":614},[609,35086,632],{"class":614},[609,35088,636],{"class":635},[609,35090,632],{"class":614},[609,35092,641],{"class":614},[609,35094,35095,35097,35099,35101,35103,35105,35107,35109],{"class":611,"line":550},[609,35096,649],{"class":648},[609,35098,652],{"class":614},[609,35100,687],{"class":655},[609,35102,665],{"class":614},[609,35104,668],{"class":648},[609,35106,671],{"class":614},[609,35108,696],{"class":635},[609,35110,677],{"class":614},[609,35112,35114,35116,35118,35121,35123,35125,35127,35129],{"class":35113,"line":680},[611,645],[609,35115,649],{"class":648},[609,35117,652],{"class":614},[609,35119,35120],{"class":655}," Lensflare",[609,35122,665],{"class":614},[609,35124,668],{"class":648},[609,35126,671],{"class":614},[609,35128,674],{"class":635},[609,35130,677],{"class":614},[609,35132,35133,35135,35137],{"class":611,"line":701},[609,35134,704],{"class":614},[609,35136,619],{"class":618},[609,35138,641],{"class":614},[609,35140,35141],{"class":611,"line":711},[609,35142,714],{"emptyLinePlaceholder":566},[609,35144,35145,35147,35149],{"class":611,"line":717},[609,35146,615],{"class":614},[609,35148,722],{"class":618},[609,35150,641],{"class":614},[609,35152,35153,35155,35157],{"class":611,"line":727},[609,35154,730],{"class":614},[609,35156,733],{"class":618},[609,35158,641],{"class":614},[609,35160,35161,35163,35165],{"class":611,"line":750},[609,35162,753],{"class":614},[609,35164,4590],{"class":618},[609,35166,641],{"class":614},[609,35168,35170,35172,35174],{"class":35169,"line":762},[611,645],[609,35171,829],{"class":614},[609,35173,333],{"class":618},[609,35175,759],{"class":614},[609,35177,35178,35180,35182],{"class":611,"line":772},[609,35179,871],{"class":614},[609,35181,4590],{"class":618},[609,35183,641],{"class":614},[609,35185,35186,35188,35190],{"class":611,"line":777},[609,35187,881],{"class":614},[609,35189,733],{"class":618},[609,35191,641],{"class":614},[609,35193,35194,35196,35198],{"class":611,"line":803},[609,35195,704],{"class":614},[609,35197,722],{"class":618},[609,35199,641],{"class":614},[476,35201,898],{"id":897},[903,35203,35204,35214],{},[906,35205,35206],{},[909,35207,35208,35210,35212],{},[912,35209,3122],{"align":973},[912,35211,917],{"align":973},[912,35213,920],{"align":973},[922,35215,35216,35231,35246,35263,35279,35296,35311],{},[909,35217,35218,35222,35227],{},[927,35219,35220],{"align":973},[1677,35221,788],{},[927,35223,35224,35226],{"align":973},[590,35225,2541],{}," – multiplier for lensflare element sizes",[927,35228,35229],{"align":973},[590,35230,7089],{},[909,35232,35233,35237,35242],{},[927,35234,35235],{"align":973},[1677,35236,6949],{},[927,35238,35239,35241],{"align":973},[590,35240,2541],{}," – multiplier for element distances from flare center",[927,35243,35244],{"align":973},[590,35245,7089],{},[909,35247,35248,35253,35259],{},[927,35249,35250],{"align":973},[1677,35251,35252],{},"elements",[927,35254,35255,35258],{"align":973},[590,35256,35257],{},"Partial<LensflareElementProps>[]"," – array of lensflare element properties",[927,35260,35261],{"align":973},[590,35262,1155],{},[909,35264,35265,35270,35275],{},[927,35266,35267],{"align":973},[1677,35268,35269],{},"seed",[927,35271,35272,35274],{"align":973},[590,35273,2541],{}," – random seed for generating random seeded elements",[927,35276,35277],{"align":973},[590,35278,1155],{},[909,35280,35281,35286,35292],{},[927,35282,35283],{"align":973},[1677,35284,35285],{},"seedProps",[927,35287,35288,35291],{"align":973},[590,35289,35290],{},"SeedProps[]"," – specifications for generating random seeded elements",[927,35293,35294],{"align":973},[590,35295,1155],{},[909,35297,35298,35302,35307],{},[927,35299,35300],{"align":973},[1677,35301,2504],{},[927,35303,35304,35306],{"align":973},[590,35305,2519],{}," – default color of lensflare elements",[927,35308,35309],{"align":973},[590,35310,1155],{},[909,35312,35313,35317,35323],{},[927,35314,35315],{"align":973},[1677,35316,14381],{},[927,35318,35319,35322],{"align":973},[590,35320,35321],{},"Texture | string"," – default texture of lensflare elements",[927,35324,35325],{"align":973},[590,35326,1155],{},[476,35328,35329],{"id":35252},[590,35330,35252],{},[586,35332,35333,35334,35336],{},"You can specify individual lensflare element properties directly using the component's ",[590,35335,35252],{}," prop.",[586,35338,2257,35339,35341,35342,1122],{},[590,35340,35252],{}," prop expects an instance of ",[590,35343,35344],{},"(Partial\u003CLensflareElementProps>)[]",[586,35346,35347,35348,35350],{},"Every object in ",[590,35349,35252],{}," may have any (or none) of the following properties.",[903,35352,35353,35361],{},[906,35354,35355],{},[909,35356,35357,35359],{},[912,35358,3122],{"align":973},[912,35360,917],{"align":973},[922,35362,35363,35375,35386,35397],{},[909,35364,35365,35369],{},[927,35366,35367],{"align":973},[1677,35368,14381],{},[927,35370,35371,35374],{"align":973},[590,35372,35373],{},"string | Texture"," - an image URL or texture to use on the lensflare element",[909,35376,35377,35381],{},[927,35378,35379],{"align":973},[1677,35380,2504],{},[927,35382,35383,35385],{"align":973},[590,35384,2519],{}," - color of the lensflare element",[909,35387,35388,35392],{},[927,35389,35390],{"align":973},[1677,35391,6949],{},[927,35393,35394,35396],{"align":973},[590,35395,2541],{}," - distance of the lensflare element from the lensflare center",[909,35398,35399,35403],{},[927,35400,35401],{"align":973},[1677,35402,11182],{},[927,35404,35405,35407],{"align":973},[590,35406,2541],{}," - size of the lensflare element",[476,35409,35410],{"id":35269},[590,35411,35269],{},[586,35413,35414,35415,35417],{},"Adding a ",[590,35416,35269],{}," prop to a component enables seeded random element generation.",[586,35419,2257,35420,35422,35423,35428,35429,1122],{},[590,35421,35269],{}," prop is used as the \"seed\" in a ",[1116,35424,35427],{"href":35425,"rel":35426},"https://en.wikipedia.org/wiki/Pseudorandom_number_generator",[1120],"pseudorandom number generator (PRNG)",". The PRNG is in turn used to build lensflare elements, by selecting values from an array of ",[590,35430,35431],{},"SeedProps",[2050,35433,35434],{},[586,35435,35436,35437,1122],{},"If you set a seed but not seedProps, the component will fall back to the default, built-in SeedProps",[609,35438],{},[7477,35440,35442],{"id":35441},"example","Example",[598,35444,35446],{"className":600,"code":35445,"language":605,"meta":548,"style":548},"\u003CLensflare :seed=\"seedRef\" />\n",[590,35447,35448],{"__ignoreMap":548},[609,35449,35450,35452,35454,35456,35458,35460,35462,35465,35467],{"class":611,"line":549},[609,35451,615],{"class":614},[609,35453,333],{"class":618},[609,35455,785],{"class":614},[609,35457,35269],{"class":622},[609,35459,629],{"class":614},[609,35461,632],{"class":614},[609,35463,35464],{"class":655},"seedRef",[609,35466,632],{"class":614},[609,35468,759],{"class":614},[586,35470,35471,35472,17724,35475,1475,35477,1475,35479,1475,35481,1475,35483,35485],{},"Below, the results of setting ",[590,35473,35474],{},"seedRef.value",[590,35476,941],{},[590,35478,1897],{},[590,35480,796],{},[590,35482,4164],{},[590,35484,3494],{},", respectively.",[586,35487,35488],{},[3271,35489],{"alt":35490,"src":35491},"Lensflare seeds 0-4","/cientos/lensflare_seeds.png",[476,35493,35495],{"id":35494},"seedprops",[590,35496,35285],{},[586,35498,35414,35499,35501],{},[590,35500,35285],{}," prop to the component enables seeded random element generation.",[586,35503,2257,35504,35341,35506,35508],{},[590,35505,35285],{},[590,35507,35290],{},". It specifies rules and acceptable values for creating random lensflare elements.",[586,35510,35511,35512,35514],{},"Every element in ",[590,35513,35285],{}," has this shape.",[903,35516,35517,35527],{},[906,35518,35519],{},[909,35520,35521,35523,35525],{},[912,35522,3122],{"align":973},[912,35524,917],{"align":973},[912,35526,27939],{},[922,35528,35529,35542,35555,35568,35581,35594],{},[909,35530,35531,35535,35540],{},[927,35532,35533],{"align":973},[1677,35534,14381],{},[927,35536,35537,35539],{"align":973},[590,35538,16294],{}," - array of 1 or more image URLs; a single texture will be selected per generated element",[927,35541,27958],{},[909,35543,35544,35548,35553],{},[927,35545,35546],{"align":973},[1677,35547,2504],{},[927,35549,35550,35552],{"align":973},[590,35551,24465],{}," - array of 1 or more colors; a single color will be selected per generated element",[927,35554,27958],{},[909,35556,35557,35561,35566],{},[927,35558,35559],{"align":973},[1677,35560,6949],{},[927,35562,35563,35565],{"align":973},[590,35564,23074],{}," - minimum and maximum allowable distance from the flare center",[927,35567,27958],{},[909,35569,35570,35574,35579],{},[927,35571,35572],{"align":973},[1677,35573,11182],{},[927,35575,35576,35578],{"align":973},[590,35577,23074],{}," - minimum and maximum allowable size",[927,35580,27958],{},[909,35582,35583,35587,35592],{},[927,35584,35585],{"align":973},[1677,35586,15562],{},[927,35588,35589,35591],{"align":973},[590,35590,23074],{}," - minimum and maximum allowable number of elements to generate",[927,35593,27958],{},[909,35595,35596,35600,35605],{},[927,35597,35598],{"align":973},[1677,35599,35269],{},[927,35601,35602,35604],{"align":973},[590,35603,2541],{}," - if set, when this entry is processed, the random number generator with a combination of the incoming seed and this seed",[927,35606,27992],{},[2050,35608,35609],{},[586,35610,35611],{},"If you set seedProps but not seed, the component will fall back to a default seed of 0.",[476,35613,35615],{"id":35614},"random-elements-and-non-random-properties","Random elements and non-random properties",[586,35617,35618,35620],{},[590,35619,35058],{}," was designed to make it easy to get a lensflare on screen. You can simply add the component with no props and the component will generate seeded random lensflare elements.",[598,35622,35624],{"className":600,"code":35623,"language":605,"meta":548,"style":548},"\u003CLensflare />\n",[590,35625,35626],{"__ignoreMap":548},[609,35627,35628,35630,35632],{"class":611,"line":549},[609,35629,615],{"class":614},[609,35631,333],{"class":618},[609,35633,759],{"class":614},[7477,35635,35637],{"id":35636},"non-random-properties","Non-random properties",[586,35639,35640,35641,35336],{},"You can provide a list of lensflare element properties using the ",[1116,35642,35644],{"href":35643},"#elements",[590,35645,35252],{},[598,35647,35649],{"className":600,"code":35648,"language":605,"meta":548,"style":548},"\u003CLensflare :elements=\"[{ color: 'red' }, { color: 'yellow' }]\" />\n",[590,35650,35651],{"__ignoreMap":548},[609,35652,35653,35655,35657,35659,35661,35663,35665,35667,35669,35671,35673,35675,35677,35679,35682,35684,35686,35688,35690,35692,35694,35696,35698,35700],{"class":611,"line":549},[609,35654,615],{"class":614},[609,35656,333],{"class":618},[609,35658,785],{"class":614},[609,35660,35252],{"class":622},[609,35662,629],{"class":614},[609,35664,632],{"class":614},[609,35666,1470],{"class":655},[609,35668,8474],{"class":614},[609,35670,3982],{"class":618},[609,35672,1194],{"class":614},[609,35674,671],{"class":614},[609,35676,30725],{"class":635},[609,35678,5540],{"class":614},[609,35680,35681],{"class":614}," },",[609,35683,652],{"class":614},[609,35685,3982],{"class":618},[609,35687,1194],{"class":614},[609,35689,671],{"class":614},[609,35691,30869],{"class":635},[609,35693,5540],{"class":614},[609,35695,665],{"class":614},[609,35697,1485],{"class":655},[609,35699,632],{"class":614},[609,35701,759],{"class":614},[586,35703,35704,35705,1475,35707,1475,35709,35711],{},"This will produce a lensflare with 2 elements. The first element will be red. The second will be yellow. The unspecified properties – ",[590,35706,6949],{},[590,35708,11182],{},[590,35710,14381],{}," – will be filled in by the built-in defaults in this case.",[586,35713,35714],{},"You can also provide default props which will overwrite random generated props.",[598,35716,35718],{"className":600,"code":35717,"language":605,"meta":548,"style":548},"\u003CLensflare color:\"red\" />\n",[590,35719,35720],{"__ignoreMap":548},[609,35721,35722,35724,35726,35729,35732],{"class":611,"line":549},[609,35723,615],{"class":614},[609,35725,333],{"class":618},[609,35727,35728],{"class":622}," color:",[609,35730,35731],{"class":655},"\"red\" ",[609,35733,35734],{"class":614},"/>\n",[586,35736,35737,35738,35740,35741,35743],{},"Since ",[590,35739,35252],{}," is not defined here, the component will generate random lensflare elements. The specified ",[590,35742,2504],{}," prop – \"red\" – will overwrite the color property of the generated lensflare elements.",[586,35745,1114,35746,35750],{},[1116,35747,35749],{"href":35748},"#precedence","precedence"," for details about how properties are filled in.",[7477,35752,35754],{"id":35753},"random-elements","Random elements",[586,35756,35757],{},"You can let the component generate random elements ...",[586,35759,35760,35761],{},"... by not adding an ",[1116,35762,35763,35765],{"href":35643},[590,35764,35252],{}," prop",[598,35767,35768],{"className":600,"code":35623,"language":605,"meta":548,"style":548},[590,35769,35770],{"__ignoreMap":548},[609,35771,35772,35774,35776],{"class":611,"line":549},[609,35773,615],{"class":614},[609,35775,333],{"class":618},[609,35777,759],{"class":614},[586,35779,35780,35781],{},"... by adding a ",[1116,35782,35784,35765],{"href":35783},"#seed",[590,35785,35269],{},[598,35787,35789],{"className":600,"code":35788,"language":605,"meta":548,"style":548},"\u003CLensflare :seed=\"7127\" />\n",[590,35790,35791],{"__ignoreMap":548},[609,35792,35793,35795,35797,35799,35801,35803,35805,35808,35810],{"class":611,"line":549},[609,35794,615],{"class":614},[609,35796,333],{"class":618},[609,35798,785],{"class":614},[609,35800,35269],{"class":622},[609,35802,629],{"class":614},[609,35804,632],{"class":614},[609,35806,35807],{"class":795},"7127",[609,35809,632],{"class":614},[609,35811,759],{"class":614},[586,35813,35780,35814],{},[1116,35815,35817,35765],{"href":35816},"#seedprops",[590,35818,35285],{},[598,35820,35822],{"className":600,"code":35821,"language":605,"meta":548,"style":548},"\u003CLensflare :seedProps=\"[{...}, {...}]\" />\n",[590,35823,35824],{"__ignoreMap":548},[609,35825,35826,35828,35830,35832,35834,35836,35838,35840,35843,35846,35848,35850],{"class":611,"line":549},[609,35827,615],{"class":614},[609,35829,333],{"class":618},[609,35831,785],{"class":614},[609,35833,35285],{"class":622},[609,35835,629],{"class":614},[609,35837,632],{"class":614},[609,35839,1470],{"class":655},[609,35841,35842],{"class":614},"{...},",[609,35844,35845],{"class":614}," {...}",[609,35847,1485],{"class":655},[609,35849,632],{"class":614},[609,35851,759],{"class":614},[7477,35853,35855],{"id":35854},"mixing-random-elements-and-non-random-properties","Mixing random elements and non-random properties",[586,35857,35858],{},"You can mix your own properties and random elements.",[598,35860,35862],{"className":600,"code":35861,"language":605,"meta":548,"style":548},"\u003CLensflare :elements=\"[{...}, {...}]\" :seed=\"8193\" />\n",[590,35863,35864],{"__ignoreMap":548},[609,35865,35866,35868,35870,35872,35874,35876,35878,35880,35882,35884,35886,35888,35890,35892,35894,35896,35899,35901],{"class":611,"line":549},[609,35867,615],{"class":614},[609,35869,333],{"class":618},[609,35871,785],{"class":614},[609,35873,35252],{"class":622},[609,35875,629],{"class":614},[609,35877,632],{"class":614},[609,35879,1470],{"class":655},[609,35881,35842],{"class":614},[609,35883,35845],{"class":614},[609,35885,1485],{"class":655},[609,35887,632],{"class":614},[609,35889,785],{"class":614},[609,35891,35269],{"class":622},[609,35893,629],{"class":614},[609,35895,632],{"class":614},[609,35897,35898],{"class":795},"8193",[609,35900,632],{"class":614},[609,35902,759],{"class":614},[586,35904,35905,35906,4435,35908,35910,35911,35913,35914,1122],{},"Here, both ",[590,35907,35252],{},[590,35909,35269],{}," are defined. The component will generate random elements and overwrite their properties with the contents of ",[590,35912,35252],{},", according to the ",[1116,35915,35916],{"href":35748},"order of precedence",[2050,35918,35919],{},[586,35920,35921],{},"When mixing random elements with elements, the final number of lensflare elements equals whichever is larger, the length of the array of generated random elements or the length of elements.",[7477,35923,35924],{"id":35749},"Precedence",[586,35926,35927],{},"If more than one source sets the same property on a given element, the following order of precendence is used. Higher in the list (lower number) equals higher precendence.",[7609,35929,35930,35934,35941,35948],{},[3143,35931,35932],{},[590,35933,35252],{},[3143,35935,35936,1475,35938,35940],{},[590,35937,2504],{},[590,35939,14381],{}," – default element properties",[3143,35942,35943,1475,35945,35947],{},[590,35944,35269],{},[590,35946,35285],{}," – generated random elements",[3143,35949,35950],{},"built-in default element properties",[2050,35952,35953],{},[586,35954,35955,4435,35957,35959,35960,35963,35964,35966,35967,35969],{},[590,35956,788],{},[590,35958,6949],{}," are applied as ",[1677,35961,35962],{},"multipliers"," at render time, not as default values. They proportionally adjust all element sizes and distances respectively, preserving the variation between elements. Use ",[590,35965,788],{}," to make the entire lensflare larger or smaller, and ",[590,35968,6949],{}," to spread or compress the scattered elements.",[2050,35971,35972],{},[586,35973,35974],{},"If elements, seed, and seedProps are all undefined, a seed of 0 and built-in default seedProps will be used to generate the lensflare elements.",[7477,35976,35978],{"id":35977},"precedence-example","Precedence example",[586,35980,35981],{},"Here's an example of precedence. Assume this is in our vue template.",[598,35983,35985],{"className":600,"code":35984,"language":605,"meta":548,"style":548},"\u003CLensflare\n  :elements=\"[\n    {size:512, texture='http://example.net/circle.png'},\n    {color:'yellow', distance:0.5}\n  ]\"\n  :texture=\"http://example.net/ring.png\"\n  color=\"red\"\n  :seed=\"1\"\n/>\n",[590,35986,35987,35994,36008,36035,36060,36067,36083,36096,36110],{"__ignoreMap":548},[609,35988,35989,35991],{"class":611,"line":549},[609,35990,615],{"class":614},[609,35992,35993],{"class":618},"Lensflare\n",[609,35995,35996,35999,36001,36003,36005],{"class":611,"line":550},[609,35997,35998],{"class":614},"  :",[609,36000,35252],{"class":622},[609,36002,629],{"class":614},[609,36004,632],{"class":614},[609,36006,36007],{"class":655},"[\n",[609,36009,36010,36013,36015,36017,36019,36021,36023,36025,36027,36030,36032],{"class":611,"line":680},[609,36011,36012],{"class":614},"    {",[609,36014,11182],{"class":618},[609,36016,1194],{"class":614},[609,36018,35004],{"class":795},[609,36020,659],{"class":614},[609,36022,14308],{"class":655},[609,36024,629],{"class":614},[609,36026,5540],{"class":614},[609,36028,36029],{"class":635},"http://example.net/circle.png",[609,36031,5540],{"class":614},[609,36033,36034],{"class":614},"},\n",[609,36036,36037,36039,36041,36043,36045,36047,36049,36051,36054,36056,36058],{"class":611,"line":701},[609,36038,36012],{"class":614},[609,36040,2504],{"class":618},[609,36042,1194],{"class":614},[609,36044,5540],{"class":614},[609,36046,30869],{"class":635},[609,36048,5540],{"class":614},[609,36050,659],{"class":614},[609,36052,36053],{"class":618}," distance",[609,36055,1194],{"class":614},[609,36057,1517],{"class":795},[609,36059,1301],{"class":614},[609,36061,36062,36065],{"class":611,"line":711},[609,36063,36064],{"class":655},"  ]",[609,36066,2991],{"class":614},[609,36068,36069,36071,36073,36075,36077,36080],{"class":611,"line":717},[609,36070,35998],{"class":614},[609,36072,14381],{"class":622},[609,36074,629],{"class":614},[609,36076,632],{"class":614},[609,36078,36079],{"class":655},"http:",[609,36081,36082],{"class":1185},"//example.net/ring.png\"\n",[609,36084,36085,36088,36090,36092,36094],{"class":611,"line":727},[609,36086,36087],{"class":655},"  color",[609,36089,629],{"class":614},[609,36091,632],{"class":614},[609,36093,30725],{"class":622},[609,36095,2991],{"class":655},[609,36097,36098,36100,36102,36104,36106,36108],{"class":611,"line":750},[609,36099,35998],{"class":614},[609,36101,35269],{"class":622},[609,36103,629],{"class":614},[609,36105,632],{"class":614},[609,36107,1897],{"class":795},[609,36109,2991],{"class":614},[609,36111,36112],{"class":611,"line":762},[609,36113,35734],{"class":655},[586,36115,36116,36118],{},[590,36117,35269],{}," is defined, so the component will produce random elements.",[586,36120,36121,36122,1194],{},"Assume the random element generator produces this, based on ",[590,36123,35269],{},[598,36125,36129],{"className":36126,"code":36127,"language":36128,"meta":548,"style":548},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","[\n  {\n    color: 'white',\n    distance: 0,\n    size: 1024,\n    texture: 'http://example.net/rays.png',\n  },\n  {\n    color: 'white',\n    distance: 1,\n    size: 512,\n    texture: 'http://example.net/circle.png',\n  },\n  {\n    color: 'white',\n    distance: 2,\n    size: 512,\n    texture: 'http://example.net/circle.png',\n  },\n]\n","js",[590,36130,36131,36135,36139,36153,36164,36176,36192,36196,36200,36214,36224,36235,36249,36253,36257,36271,36281,36291,36305,36309],{"__ignoreMap":548},[609,36132,36133],{"class":611,"line":549},[609,36134,36007],{"class":655},[609,36136,36137],{"class":611,"line":550},[609,36138,31869],{"class":614},[609,36140,36141,36143,36145,36147,36149,36151],{"class":611,"line":680},[609,36142,18628],{"class":618},[609,36144,1194],{"class":614},[609,36146,671],{"class":614},[609,36148,3989],{"class":635},[609,36150,5540],{"class":614},[609,36152,14979],{"class":614},[609,36154,36155,36158,36160,36162],{"class":611,"line":701},[609,36156,36157],{"class":618},"    distance",[609,36159,1194],{"class":614},[609,36161,12722],{"class":795},[609,36163,14979],{"class":614},[609,36165,36166,36169,36171,36174],{"class":611,"line":711},[609,36167,36168],{"class":618},"    size",[609,36170,1194],{"class":614},[609,36172,36173],{"class":795}," 1024",[609,36175,14979],{"class":614},[609,36177,36178,36181,36183,36185,36188,36190],{"class":611,"line":717},[609,36179,36180],{"class":618},"    texture",[609,36182,1194],{"class":614},[609,36184,671],{"class":614},[609,36186,36187],{"class":635},"http://example.net/rays.png",[609,36189,5540],{"class":614},[609,36191,14979],{"class":614},[609,36193,36194],{"class":611,"line":727},[609,36195,18593],{"class":614},[609,36197,36198],{"class":611,"line":750},[609,36199,31869],{"class":614},[609,36201,36202,36204,36206,36208,36210,36212],{"class":611,"line":762},[609,36203,18628],{"class":618},[609,36205,1194],{"class":614},[609,36207,671],{"class":614},[609,36209,3989],{"class":635},[609,36211,5540],{"class":614},[609,36213,14979],{"class":614},[609,36215,36216,36218,36220,36222],{"class":611,"line":772},[609,36217,36157],{"class":618},[609,36219,1194],{"class":614},[609,36221,23911],{"class":795},[609,36223,14979],{"class":614},[609,36225,36226,36228,36230,36233],{"class":611,"line":777},[609,36227,36168],{"class":618},[609,36229,1194],{"class":614},[609,36231,36232],{"class":795}," 512",[609,36234,14979],{"class":614},[609,36236,36237,36239,36241,36243,36245,36247],{"class":611,"line":803},[609,36238,36180],{"class":618},[609,36240,1194],{"class":614},[609,36242,671],{"class":614},[609,36244,36029],{"class":635},[609,36246,5540],{"class":614},[609,36248,14979],{"class":614},[609,36250,36251],{"class":611,"line":603},[609,36252,18593],{"class":614},[609,36254,36255],{"class":611,"line":826},[609,36256,31869],{"class":614},[609,36258,36259,36261,36263,36265,36267,36269],{"class":611,"line":837},[609,36260,18628],{"class":618},[609,36262,1194],{"class":614},[609,36264,671],{"class":614},[609,36266,3989],{"class":635},[609,36268,5540],{"class":614},[609,36270,14979],{"class":614},[609,36272,36273,36275,36277,36279],{"class":611,"line":848},[609,36274,36157],{"class":618},[609,36276,1194],{"class":614},[609,36278,25520],{"class":795},[609,36280,14979],{"class":614},[609,36282,36283,36285,36287,36289],{"class":611,"line":858},[609,36284,36168],{"class":618},[609,36286,1194],{"class":614},[609,36288,36232],{"class":795},[609,36290,14979],{"class":614},[609,36292,36293,36295,36297,36299,36301,36303],{"class":611,"line":604},[609,36294,36180],{"class":618},[609,36296,1194],{"class":614},[609,36298,671],{"class":614},[609,36300,36029],{"class":635},[609,36302,5540],{"class":614},[609,36304,14979],{"class":614},[609,36306,36307],{"class":611,"line":878},[609,36308,18593],{"class":614},[609,36310,36311],{"class":611,"line":888},[609,36312,15004],{"class":655},[586,36314,36315,36316,36318],{},"When random elements are mixed with ",[590,36317,35252],{},", the final number of elements in the lensflare is determined by whichever is longer.",[586,36320,36321,36322,36324],{},"Here, ",[590,36323,35252],{}," contains 2 entries. The random element generator produced 3. So the resulting lensflare will have 3 elements.",[586,36326,36327],{},"Therefore, resulting lensflare will have 3 elements.",[586,36329,36330],{},"The resulting 3 lensflare elements will have the following properties, from the following sources:",[598,36332,36334],{"className":36126,"code":36333,"language":36128,"meta":548,"style":548},"[\n  {\n    color: 'yellow', // from `elements`\n    distance: 0, // from random element generator\n    size: 512, // from `elements`\n    texture: 'http://example.net/circle.png', // from `elements`\n  },\n  {\n    color: 'red', // from component prop `color`\n    distance: 0.5, // from `elements`\n    size: 512, // from random element generator\n    texture: 'http://example.net/ring.png', // from component prop `texture`\n  },\n  {\n    color: 'red', // from component prop `color`\n    distance: 2, // from random element generator\n    size: 512, // from random element generator\n    texture: 'http://example.net/ring.png', // from component prop `texture`\n  },\n]\n",[590,36335,36336,36340,36344,36361,36374,36386,36402,36406,36410,36427,36440,36452,36470,36474,36478,36494,36506,36518,36534,36538],{"__ignoreMap":548},[609,36337,36338],{"class":611,"line":549},[609,36339,36007],{"class":655},[609,36341,36342],{"class":611,"line":550},[609,36343,31869],{"class":614},[609,36345,36346,36348,36350,36352,36354,36356,36358],{"class":611,"line":680},[609,36347,18628],{"class":618},[609,36349,1194],{"class":614},[609,36351,671],{"class":614},[609,36353,30869],{"class":635},[609,36355,5540],{"class":614},[609,36357,659],{"class":614},[609,36359,36360],{"class":1185}," // from `elements`\n",[609,36362,36363,36365,36367,36369,36371],{"class":611,"line":701},[609,36364,36157],{"class":618},[609,36366,1194],{"class":614},[609,36368,12722],{"class":795},[609,36370,659],{"class":614},[609,36372,36373],{"class":1185}," // from random element generator\n",[609,36375,36376,36378,36380,36382,36384],{"class":611,"line":711},[609,36377,36168],{"class":618},[609,36379,1194],{"class":614},[609,36381,36232],{"class":795},[609,36383,659],{"class":614},[609,36385,36360],{"class":1185},[609,36387,36388,36390,36392,36394,36396,36398,36400],{"class":611,"line":717},[609,36389,36180],{"class":618},[609,36391,1194],{"class":614},[609,36393,671],{"class":614},[609,36395,36029],{"class":635},[609,36397,5540],{"class":614},[609,36399,659],{"class":614},[609,36401,36360],{"class":1185},[609,36403,36404],{"class":611,"line":727},[609,36405,18593],{"class":614},[609,36407,36408],{"class":611,"line":750},[609,36409,31869],{"class":614},[609,36411,36412,36414,36416,36418,36420,36422,36424],{"class":611,"line":762},[609,36413,18628],{"class":618},[609,36415,1194],{"class":614},[609,36417,671],{"class":614},[609,36419,30725],{"class":635},[609,36421,5540],{"class":614},[609,36423,659],{"class":614},[609,36425,36426],{"class":1185}," // from component prop `color`\n",[609,36428,36429,36431,36433,36436,36438],{"class":611,"line":772},[609,36430,36157],{"class":618},[609,36432,1194],{"class":614},[609,36434,36435],{"class":795}," 0.5",[609,36437,659],{"class":614},[609,36439,36360],{"class":1185},[609,36441,36442,36444,36446,36448,36450],{"class":611,"line":777},[609,36443,36168],{"class":618},[609,36445,1194],{"class":614},[609,36447,36232],{"class":795},[609,36449,659],{"class":614},[609,36451,36373],{"class":1185},[609,36453,36454,36456,36458,36460,36463,36465,36467],{"class":611,"line":803},[609,36455,36180],{"class":618},[609,36457,1194],{"class":614},[609,36459,671],{"class":614},[609,36461,36462],{"class":635},"http://example.net/ring.png",[609,36464,5540],{"class":614},[609,36466,659],{"class":614},[609,36468,36469],{"class":1185}," // from component prop `texture`\n",[609,36471,36472],{"class":611,"line":603},[609,36473,18593],{"class":614},[609,36475,36476],{"class":611,"line":826},[609,36477,31869],{"class":614},[609,36479,36480,36482,36484,36486,36488,36490,36492],{"class":611,"line":837},[609,36481,18628],{"class":618},[609,36483,1194],{"class":614},[609,36485,671],{"class":614},[609,36487,30725],{"class":635},[609,36489,5540],{"class":614},[609,36491,659],{"class":614},[609,36493,36426],{"class":1185},[609,36495,36496,36498,36500,36502,36504],{"class":611,"line":848},[609,36497,36157],{"class":618},[609,36499,1194],{"class":614},[609,36501,25520],{"class":795},[609,36503,659],{"class":614},[609,36505,36373],{"class":1185},[609,36507,36508,36510,36512,36514,36516],{"class":611,"line":858},[609,36509,36168],{"class":618},[609,36511,1194],{"class":614},[609,36513,36232],{"class":795},[609,36515,659],{"class":614},[609,36517,36373],{"class":1185},[609,36519,36520,36522,36524,36526,36528,36530,36532],{"class":611,"line":604},[609,36521,36180],{"class":618},[609,36523,1194],{"class":614},[609,36525,671],{"class":614},[609,36527,36462],{"class":635},[609,36529,5540],{"class":614},[609,36531,659],{"class":614},[609,36533,36469],{"class":1185},[609,36535,36536],{"class":611,"line":878},[609,36537,18593],{"class":614},[609,36539,36540],{"class":611,"line":888},[609,36541,15004],{"class":655},[1303,36543,36544],{},"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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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":548,"searchDepth":549,"depth":550,"links":36546},[36547,36548,36549,36550,36553,36554],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},{"id":35252,"depth":550,"text":35252},{"id":35269,"depth":550,"text":35269,"children":36551},[36552],{"id":35441,"depth":680,"text":35442},{"id":35494,"depth":550,"text":35285},{"id":35614,"depth":550,"text":35615,"children":36555},[36556,36557,36558,36559,36560],{"id":35636,"depth":680,"text":35637},{"id":35753,"depth":680,"text":35754},{"id":35854,"depth":680,"text":35855},{"id":35749,"depth":680,"text":35924},{"id":35977,"depth":680,"text":35978},"Wraps the Three.js Lensflare with seeded random element generation.",{},{"title":333,"description":36561},"IPTu6ltIJ84TUkEk77xCaQa3Z9Y35mfjfjyH23AjLG0",{"id":36566,"title":337,"body":36567,"description":37258,"extension":563,"links":564,"meta":37259,"navigation":566,"path":338,"seo":37260,"stem":339,"__hash__":37261},"docs/2.api/7.light-shadow/randomized-lights.md",{"type":473,"value":36568,"toc":37254},[36569,36574,36581,36589,36591,37089,37091,37252],[2562,36570,36571],{},[36572,36573],"light-shadow-randomized-lights",{},[586,36575,36576,36578,36579,1122],{},[590,36577,33486],{}," internally creates multiple lights and jiggles them. You would normally add it as a child of ",[590,36580,32964],{},[586,36582,36583,36584,1122],{},"It is based on this ",[1116,36585,36588],{"href":36586,"rel":36587},"http://drei.docs.pmnd.rs/staging/randomized-light",[1120],"Drei component",[476,36590,15],{"id":596},[598,36592,36595],{"className":600,"code":36593,"highlights":36594,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from \"@tresjs/core\";\nimport {\n  RandomizedLights,\n  AccumulativeShadows,\n  OrbitControls,\n  Plane,\n} from \"@tresjs/cientos\";\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas shadows>\n    \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" />\n    \u003COrbitControls />\n    \u003CAccumulativeShadows :blend=\"100\" color=\"#fbb03b\" once :position-y=\"-1\">\n      \u003CRandomizedLights\n        :ambient=\"0.25\"\n        :bias=\"0.001\"\n        :count=\"8\"\n        :intensity=\"Math.PI\"\n        :map-size=\"1024\"\n        :position=\"[5, 5, -10]\"\n        :radius=\"2\"\n      />\n    \u003C/AccumulativeShadows>\n    \u003CTresMesh cast-shadow>\n      \u003CTresBoxGeometry />\n      \u003CTresMeshToonMaterial color=\"orange\" />\n    \u003C/TresMesh>\n    \u003CPlane :position=\"[0, -2, 0]\" receive-shadow :args=\"[10, 10]\">\n      \u003CTresMeshStandardMaterial />\n    \u003C/Plane>\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n\n",[701,848,858,604,878,888,2956,2964,2994],[590,36596,36597,36617,36637,36643,36651,36658,36665,36672,36686,36694,36698,36706,36717,36749,36757,36805,36813,36829,36845,36860,36879,36895,36922,36938,36942,36950,36960,36968,36986,36994,37049,37057,37065,37073,37081],{"__ignoreMap":548},[609,36598,36599,36601,36603,36605,36607,36609,36611,36613,36615],{"class":611,"line":549},[609,36600,615],{"class":614},[609,36602,619],{"class":618},[609,36604,623],{"class":622},[609,36606,626],{"class":622},[609,36608,629],{"class":614},[609,36610,632],{"class":614},[609,36612,636],{"class":635},[609,36614,632],{"class":614},[609,36616,641],{"class":614},[609,36618,36619,36621,36623,36625,36627,36629,36631,36633,36635],{"class":611,"line":550},[609,36620,649],{"class":648},[609,36622,652],{"class":614},[609,36624,687],{"class":655},[609,36626,665],{"class":614},[609,36628,668],{"class":648},[609,36630,3326],{"class":614},[609,36632,696],{"class":635},[609,36634,632],{"class":614},[609,36636,3333],{"class":614},[609,36638,36639,36641],{"class":611,"line":680},[609,36640,649],{"class":648},[609,36642,1180],{"class":614},[609,36644,36646,36649],{"class":36645,"line":701},[611,645],[609,36647,36648],{"class":655},"  RandomizedLights",[609,36650,14979],{"class":614},[609,36652,36653,36656],{"class":611,"line":711},[609,36654,36655],{"class":655},"  AccumulativeShadows",[609,36657,14979],{"class":614},[609,36659,36660,36663],{"class":611,"line":717},[609,36661,36662],{"class":655},"  OrbitControls",[609,36664,14979],{"class":614},[609,36666,36667,36670],{"class":611,"line":727},[609,36668,36669],{"class":655},"  Plane",[609,36671,14979],{"class":614},[609,36673,36674,36676,36678,36680,36682,36684],{"class":611,"line":750},[609,36675,5548],{"class":614},[609,36677,668],{"class":648},[609,36679,3326],{"class":614},[609,36681,674],{"class":635},[609,36683,632],{"class":614},[609,36685,3333],{"class":614},[609,36687,36688,36690,36692],{"class":611,"line":762},[609,36689,704],{"class":614},[609,36691,619],{"class":618},[609,36693,641],{"class":614},[609,36695,36696],{"class":611,"line":772},[609,36697,714],{"emptyLinePlaceholder":566},[609,36699,36700,36702,36704],{"class":611,"line":777},[609,36701,615],{"class":614},[609,36703,722],{"class":618},[609,36705,641],{"class":614},[609,36707,36708,36710,36712,36715],{"class":611,"line":803},[609,36709,730],{"class":614},[609,36711,733],{"class":618},[609,36713,36714],{"class":622}," shadows",[609,36716,641],{"class":614},[609,36718,36719,36721,36723,36725,36727,36729,36731,36733,36735,36737,36739,36741,36743,36745,36747],{"class":611,"line":603},[609,36720,753],{"class":614},[609,36722,756],{"class":618},[609,36724,785],{"class":614},[609,36726,1463],{"class":622},[609,36728,629],{"class":614},[609,36730,632],{"class":614},[609,36732,1470],{"class":614},[609,36734,941],{"class":795},[609,36736,1475],{"class":614},[609,36738,4164],{"class":795},[609,36740,1475],{"class":614},[609,36742,2400],{"class":795},[609,36744,1485],{"class":614},[609,36746,632],{"class":614},[609,36748,759],{"class":614},[609,36750,36751,36753,36755],{"class":611,"line":826},[609,36752,753],{"class":614},[609,36754,767],{"class":618},[609,36756,759],{"class":614},[609,36758,36759,36761,36764,36766,36768,36770,36772,36774,36776,36778,36780,36782,36784,36786,36789,36791,36793,36795,36797,36799,36801,36803],{"class":611,"line":837},[609,36760,753],{"class":614},[609,36762,36763],{"class":618},"AccumulativeShadows",[609,36765,785],{"class":614},[609,36767,33214],{"class":622},[609,36769,629],{"class":614},[609,36771,632],{"class":614},[609,36773,6032],{"class":795},[609,36775,632],{"class":614},[609,36777,3982],{"class":622},[609,36779,629],{"class":614},[609,36781,632],{"class":614},[609,36783,4049],{"class":635},[609,36785,632],{"class":614},[609,36787,36788],{"class":622}," once",[609,36790,785],{"class":614},[609,36792,1972],{"class":622},[609,36794,629],{"class":614},[609,36796,632],{"class":614},[609,36798,4092],{"class":614},[609,36800,1897],{"class":795},[609,36802,632],{"class":614},[609,36804,641],{"class":614},[609,36806,36808,36810],{"class":36807,"line":848},[611,645],[609,36809,829],{"class":614},[609,36811,36812],{"class":618},"RandomizedLights\n",[609,36814,36816,36818,36821,36823,36825,36827],{"class":36815,"line":858},[611,645],[609,36817,2997],{"class":614},[609,36819,36820],{"class":622},"ambient",[609,36822,629],{"class":614},[609,36824,632],{"class":614},[609,36826,7045],{"class":795},[609,36828,2991],{"class":614},[609,36830,36832,36834,36837,36839,36841,36843],{"class":36831,"line":604},[611,645],[609,36833,2997],{"class":614},[609,36835,36836],{"class":622},"bias",[609,36838,629],{"class":614},[609,36840,632],{"class":614},[609,36842,1526],{"class":795},[609,36844,2991],{"class":614},[609,36846,36848,36850,36852,36854,36856,36858],{"class":36847,"line":878},[611,645],[609,36849,2997],{"class":614},[609,36851,5104],{"class":622},[609,36853,629],{"class":614},[609,36855,632],{"class":614},[609,36857,16009],{"class":795},[609,36859,2991],{"class":614},[609,36861,36863,36865,36867,36869,36871,36873,36875,36877],{"class":36862,"line":888},[611,645],[609,36864,2997],{"class":614},[609,36866,1890],{"class":622},[609,36868,629],{"class":614},[609,36870,632],{"class":614},[609,36872,22535],{"class":655},[609,36874,1122],{"class":614},[609,36876,22540],{"class":655},[609,36878,2991],{"class":614},[609,36880,36882,36884,36887,36889,36891,36893],{"class":36881,"line":2956},[611,645],[609,36883,2997],{"class":614},[609,36885,36886],{"class":622},"map-size",[609,36888,629],{"class":614},[609,36890,632],{"class":614},[609,36892,33460],{"class":795},[609,36894,2991],{"class":614},[609,36896,36898,36900,36902,36904,36906,36908,36910,36912,36914,36916,36918,36920],{"class":36897,"line":2964},[611,645],[609,36899,2997],{"class":614},[609,36901,1463],{"class":622},[609,36903,629],{"class":614},[609,36905,632],{"class":614},[609,36907,1470],{"class":614},[609,36909,2400],{"class":795},[609,36911,1475],{"class":614},[609,36913,2400],{"class":795},[609,36915,3602],{"class":614},[609,36917,1482],{"class":795},[609,36919,1485],{"class":614},[609,36921,2991],{"class":614},[609,36923,36925,36927,36930,36932,36934,36936],{"class":36924,"line":2994},[611,645],[609,36926,2997],{"class":614},[609,36928,36929],{"class":622},"radius",[609,36931,629],{"class":614},[609,36933,632],{"class":614},[609,36935,796],{"class":795},[609,36937,2991],{"class":614},[609,36939,36940],{"class":611,"line":3011},[609,36941,3054],{"class":614},[609,36943,36944,36946,36948],{"class":611,"line":3026},[609,36945,871],{"class":614},[609,36947,36763],{"class":618},[609,36949,641],{"class":614},[609,36951,36952,36954,36956,36958],{"class":611,"line":3051},[609,36953,753],{"class":614},[609,36955,832],{"class":618},[609,36957,10807],{"class":622},[609,36959,641],{"class":614},[609,36961,36962,36964,36966],{"class":611,"line":2595},[609,36963,829],{"class":614},[609,36965,843],{"class":618},[609,36967,759],{"class":614},[609,36969,36970,36972,36974,36976,36978,36980,36982,36984],{"class":611,"line":3066},[609,36971,829],{"class":614},[609,36973,6733],{"class":618},[609,36975,3982],{"class":622},[609,36977,629],{"class":614},[609,36979,632],{"class":614},[609,36981,6742],{"class":635},[609,36983,632],{"class":614},[609,36985,759],{"class":614},[609,36987,36988,36990,36992],{"class":611,"line":3096},[609,36989,871],{"class":614},[609,36991,832],{"class":618},[609,36993,641],{"class":614},[609,36995,36996,36998,37000,37002,37004,37006,37008,37010,37012,37014,37016,37018,37020,37022,37024,37027,37029,37031,37033,37035,37037,37039,37041,37043,37045,37047],{"class":611,"line":3105},[609,36997,753],{"class":614},[609,36999,241],{"class":618},[609,37001,785],{"class":614},[609,37003,1463],{"class":622},[609,37005,629],{"class":614},[609,37007,632],{"class":614},[609,37009,1470],{"class":614},[609,37011,941],{"class":795},[609,37013,3602],{"class":614},[609,37015,796],{"class":795},[609,37017,1475],{"class":614},[609,37019,941],{"class":795},[609,37021,1485],{"class":614},[609,37023,632],{"class":614},[609,37025,37026],{"class":622}," receive-shadow",[609,37028,785],{"class":614},[609,37030,1993],{"class":622},[609,37032,629],{"class":614},[609,37034,632],{"class":614},[609,37036,1470],{"class":614},[609,37038,1482],{"class":795},[609,37040,1475],{"class":614},[609,37042,1482],{"class":795},[609,37044,1485],{"class":614},[609,37046,632],{"class":614},[609,37048,641],{"class":614},[609,37050,37051,37053,37055],{"class":611,"line":4211},[609,37052,829],{"class":614},[609,37054,8099],{"class":618},[609,37056,759],{"class":614},[609,37058,37059,37061,37063],{"class":611,"line":4216},[609,37060,871],{"class":614},[609,37062,241],{"class":618},[609,37064,641],{"class":614},[609,37066,37067,37069,37071],{"class":611,"line":4239},[609,37068,753],{"class":614},[609,37070,3522],{"class":618},[609,37072,759],{"class":614},[609,37074,37075,37077,37079],{"class":611,"line":4248},[609,37076,881],{"class":614},[609,37078,733],{"class":618},[609,37080,641],{"class":614},[609,37082,37083,37085,37087],{"class":611,"line":4257},[609,37084,704],{"class":614},[609,37086,722],{"class":618},[609,37088,641],{"class":614},[476,37090,898],{"id":897},[903,37092,37093,37103],{},[906,37094,37095],{},[909,37096,37097,37099,37101],{},[912,37098,914],{},[912,37100,917],{},[912,37102,920],{},[922,37104,37105,37118,37131,37144,37157,37170,37183,37197,37210,37224,37238],{},[909,37106,37107,37111,37114],{},[927,37108,37109],{},[590,37110,5104],{},[927,37112,37113],{},"Number of lights",[927,37115,37116],{},[590,37117,16009],{},[909,37119,37120,37124,37127],{},[927,37121,37122],{},[590,37123,36929],{},[927,37125,37126],{},"Radius of the jiggle, higher values make softer light",[927,37128,37129],{},[590,37130,1897],{},[909,37132,37133,37137,37140],{},[927,37134,37135],{},[590,37136,1890],{},[927,37138,37139],{},"Light intensity",[927,37141,37142],{},[590,37143,4917],{},[909,37145,37146,37150,37153],{},[927,37147,37148],{},[590,37149,36820],{},[927,37151,37152],{},"\"Ambient occlusion\" to directional light ratio, lower values mean less AO",[927,37154,37155],{},[590,37156,1517],{},[909,37158,37159,37163,37166],{},[927,37160,37161],{},[590,37162,12867],{},[927,37164,37165],{},"If the lights cast shadows",[927,37167,37168],{},[590,37169,937],{},[909,37171,37172,37176,37179],{},[927,37173,37174],{},[590,37175,36836],{},[927,37177,37178],{},"Default shadow bias",[927,37180,37181],{},[590,37182,941],{},[909,37184,37185,37190,37193],{},[927,37186,37187],{},[590,37188,37189],{},"mapSize",[927,37191,37192],{},"Size of the lights' shadow map",[927,37194,37195],{},[590,37196,35004],{},[909,37198,37199,37203,37206],{},[927,37200,37201],{},[590,37202,11182],{},[927,37204,37205],{},"Size of the lights' shadow camera frustum",[927,37207,37208],{},[590,37209,1482],{},[909,37211,37212,37217,37220],{},[927,37213,37214],{},[590,37215,37216],{},"near",[927,37218,37219],{},"Lights' shadow camera near value",[927,37221,37222],{},[590,37223,1517],{},[909,37225,37226,37230,37233],{},[927,37227,37228],{},[590,37229,34969],{},[927,37231,37232],{},"Lights' shadow camera far value",[927,37234,37235],{},[590,37236,37237],{},"500",[909,37239,37240,37244,37247],{},[927,37241,37242],{},[590,37243,1463],{},[927,37245,37246],{},"Position",[927,37248,37249],{},[590,37250,37251],{},"[5, 5, -10]",[1303,37253,1652],{},{"title":548,"searchDepth":549,"depth":550,"links":37255},[37256,37257],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},"Creates multiple lights and jiggles them for softer shadows.",{},{"title":337,"description":37258},"baGOsq_IYKuFBxflpLvSmGExVBUODXQrO5EKfecXWks",{"id":37263,"title":341,"body":37264,"description":37713,"extension":563,"links":564,"meta":37714,"navigation":566,"path":342,"seo":37715,"stem":343,"__hash__":37716},"docs/2.api/7.light-shadow/soft-shadows.md",{"type":473,"value":37265,"toc":37709},[37266,37271,37274,37276,37655,37657,37707],[580,37267,37268],{},[37269,37270],"light-shadow-soft-shadows",{},[586,37272,37273],{},"Injects percent closer soft shadows (pcss) into THREE's shader chunk. Mounting/unmounting this component or changing its props will cause all shaders to be recompiled.",[476,37275,15],{"id":596},[598,37277,37280],{"className":600,"code":37278,"highlights":37279,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { SoftShadows, Levioso, TorusKnot, Plane } from \"@tresjs/cientos\";\nimport { TresCanvas } from \"@tresjs/core\";\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas shadows clear-color=\"#82DBC5\">\n    \u003CLevioso :speed=\"4\" :range=\"[0, 0.7]\" :rotation-factor=\"9\">\n      \u003CTorusKnot cast-shadow :scale=\"0.45\">\n        \u003CTresMeshStandardMaterial color=\"orange\" />\n      \u003C/TorusKnot>\n    \u003C/Levioso>\n    \u003CPlane :position=\"[0, -2, 0]\" receive-shadow :args=\"[10, 10]\">\n      \u003CTresMeshStandardMaterial />\n    \u003C/Plane>\n    \u003CTresDirectionalLight cast-shadow :position=\"[0, 3, 0]\" />\n    \u003CTresAmbientLight :intensity=\"0.5\" />\n    \u003CSoftShadows />\n  \u003C/TresCanvas>\n\u003C/template>\n",[550,604],[590,37281,37282,37302,37337,37357,37365,37369,37377,37397,37449,37471,37489,37497,37505,37559,37567,37575,37609,37629,37639,37647],{"__ignoreMap":548},[609,37283,37284,37286,37288,37290,37292,37294,37296,37298,37300],{"class":611,"line":549},[609,37285,615],{"class":614},[609,37287,619],{"class":618},[609,37289,623],{"class":622},[609,37291,626],{"class":622},[609,37293,629],{"class":614},[609,37295,632],{"class":614},[609,37297,636],{"class":635},[609,37299,632],{"class":614},[609,37301,641],{"class":614},[609,37303,37305,37307,37309,37312,37314,37316,37318,37320,37322,37325,37327,37329,37331,37333,37335],{"class":37304,"line":550},[611,645],[609,37306,649],{"class":648},[609,37308,652],{"class":614},[609,37310,37311],{"class":655}," SoftShadows",[609,37313,659],{"class":614},[609,37315,3343],{"class":655},[609,37317,659],{"class":614},[609,37319,34621],{"class":655},[609,37321,659],{"class":614},[609,37323,37324],{"class":655}," Plane",[609,37326,665],{"class":614},[609,37328,668],{"class":648},[609,37330,3326],{"class":614},[609,37332,674],{"class":635},[609,37334,632],{"class":614},[609,37336,3333],{"class":614},[609,37338,37339,37341,37343,37345,37347,37349,37351,37353,37355],{"class":611,"line":680},[609,37340,649],{"class":648},[609,37342,652],{"class":614},[609,37344,687],{"class":655},[609,37346,665],{"class":614},[609,37348,668],{"class":648},[609,37350,3326],{"class":614},[609,37352,696],{"class":635},[609,37354,632],{"class":614},[609,37356,3333],{"class":614},[609,37358,37359,37361,37363],{"class":611,"line":701},[609,37360,704],{"class":614},[609,37362,619],{"class":618},[609,37364,641],{"class":614},[609,37366,37367],{"class":611,"line":711},[609,37368,714],{"emptyLinePlaceholder":566},[609,37370,37371,37373,37375],{"class":611,"line":717},[609,37372,615],{"class":614},[609,37374,722],{"class":618},[609,37376,641],{"class":614},[609,37378,37379,37381,37383,37385,37387,37389,37391,37393,37395],{"class":611,"line":727},[609,37380,730],{"class":614},[609,37382,733],{"class":618},[609,37384,36714],{"class":622},[609,37386,736],{"class":622},[609,37388,629],{"class":614},[609,37390,632],{"class":614},[609,37392,5044],{"class":635},[609,37394,632],{"class":614},[609,37396,641],{"class":614},[609,37398,37399,37401,37403,37405,37407,37409,37411,37413,37415,37417,37419,37421,37423,37425,37427,37429,37431,37433,37435,37437,37439,37441,37443,37445,37447],{"class":611,"line":750},[609,37400,753],{"class":614},[609,37402,3482],{"class":618},[609,37404,785],{"class":614},[609,37406,3487],{"class":622},[609,37408,629],{"class":614},[609,37410,632],{"class":614},[609,37412,3494],{"class":795},[609,37414,632],{"class":614},[609,37416,785],{"class":614},[609,37418,3694],{"class":622},[609,37420,629],{"class":614},[609,37422,632],{"class":614},[609,37424,1470],{"class":614},[609,37426,941],{"class":795},[609,37428,1475],{"class":614},[609,37430,34722],{"class":795},[609,37432,1485],{"class":614},[609,37434,632],{"class":614},[609,37436,785],{"class":614},[609,37438,34731],{"class":622},[609,37440,629],{"class":614},[609,37442,632],{"class":614},[609,37444,20092],{"class":795},[609,37446,632],{"class":614},[609,37448,641],{"class":614},[609,37450,37451,37453,37455,37457,37459,37461,37463,37465,37467,37469],{"class":611,"line":762},[609,37452,829],{"class":614},[609,37454,29583],{"class":618},[609,37456,10807],{"class":622},[609,37458,785],{"class":614},[609,37460,788],{"class":622},[609,37462,629],{"class":614},[609,37464,632],{"class":614},[609,37466,21961],{"class":795},[609,37468,632],{"class":614},[609,37470,641],{"class":614},[609,37472,37473,37475,37477,37479,37481,37483,37485,37487],{"class":611,"line":772},[609,37474,840],{"class":614},[609,37476,8099],{"class":618},[609,37478,3982],{"class":622},[609,37480,629],{"class":614},[609,37482,632],{"class":614},[609,37484,6742],{"class":635},[609,37486,632],{"class":614},[609,37488,759],{"class":614},[609,37490,37491,37493,37495],{"class":611,"line":777},[609,37492,861],{"class":614},[609,37494,29583],{"class":618},[609,37496,641],{"class":614},[609,37498,37499,37501,37503],{"class":611,"line":803},[609,37500,871],{"class":614},[609,37502,3482],{"class":618},[609,37504,641],{"class":614},[609,37506,37507,37509,37511,37513,37515,37517,37519,37521,37523,37525,37527,37529,37531,37533,37535,37537,37539,37541,37543,37545,37547,37549,37551,37553,37555,37557],{"class":611,"line":603},[609,37508,753],{"class":614},[609,37510,241],{"class":618},[609,37512,785],{"class":614},[609,37514,1463],{"class":622},[609,37516,629],{"class":614},[609,37518,632],{"class":614},[609,37520,1470],{"class":614},[609,37522,941],{"class":795},[609,37524,3602],{"class":614},[609,37526,796],{"class":795},[609,37528,1475],{"class":614},[609,37530,941],{"class":795},[609,37532,1485],{"class":614},[609,37534,632],{"class":614},[609,37536,37026],{"class":622},[609,37538,785],{"class":614},[609,37540,1993],{"class":622},[609,37542,629],{"class":614},[609,37544,632],{"class":614},[609,37546,1470],{"class":614},[609,37548,1482],{"class":795},[609,37550,1475],{"class":614},[609,37552,1482],{"class":795},[609,37554,1485],{"class":614},[609,37556,632],{"class":614},[609,37558,641],{"class":614},[609,37560,37561,37563,37565],{"class":611,"line":826},[609,37562,829],{"class":614},[609,37564,8099],{"class":618},[609,37566,759],{"class":614},[609,37568,37569,37571,37573],{"class":611,"line":837},[609,37570,871],{"class":614},[609,37572,241],{"class":618},[609,37574,641],{"class":614},[609,37576,37577,37579,37581,37583,37585,37587,37589,37591,37593,37595,37597,37599,37601,37603,37605,37607],{"class":611,"line":848},[609,37578,753],{"class":614},[609,37580,3543],{"class":618},[609,37582,10807],{"class":622},[609,37584,785],{"class":614},[609,37586,1463],{"class":622},[609,37588,629],{"class":614},[609,37590,632],{"class":614},[609,37592,1470],{"class":614},[609,37594,941],{"class":795},[609,37596,1475],{"class":614},[609,37598,4164],{"class":795},[609,37600,1475],{"class":614},[609,37602,941],{"class":795},[609,37604,1485],{"class":614},[609,37606,632],{"class":614},[609,37608,759],{"class":614},[609,37610,37611,37613,37615,37617,37619,37621,37623,37625,37627],{"class":611,"line":858},[609,37612,753],{"class":614},[609,37614,3522],{"class":618},[609,37616,785],{"class":614},[609,37618,1890],{"class":622},[609,37620,629],{"class":614},[609,37622,632],{"class":614},[609,37624,1517],{"class":795},[609,37626,632],{"class":614},[609,37628,759],{"class":614},[609,37630,37632,37634,37637],{"class":37631,"line":604},[611,645],[609,37633,753],{"class":614},[609,37635,37636],{"class":618},"SoftShadows",[609,37638,759],{"class":614},[609,37640,37641,37643,37645],{"class":611,"line":878},[609,37642,881],{"class":614},[609,37644,733],{"class":618},[609,37646,641],{"class":614},[609,37648,37649,37651,37653],{"class":611,"line":888},[609,37650,704],{"class":614},[609,37652,722],{"class":618},[609,37654,641],{"class":614},[476,37656,898],{"id":897},[903,37658,37659,37669],{},[906,37660,37661],{},[909,37662,37663,37665,37667],{},[912,37664,3122],{"align":973},[912,37666,917],{"align":973},[912,37668,920],{},[922,37670,37671,37682,37694],{},[909,37672,37673,37675,37678],{},[927,37674,11182],{"align":973},[927,37676,37677],{"align":973},"Size of the light source (the larger the softer the light)",[927,37679,37680],{},[590,37681,25997],{},[909,37683,37684,37687,37690],{},[927,37685,37686],{"align":973},"samples",[927,37688,37689],{"align":973},"Number of samples (more samples less noise but more expensive)",[927,37691,37692],{},[590,37693,1482],{},[909,37695,37696,37699,37702],{},[927,37697,37698],{"align":973},"focus",[927,37700,37701],{"align":973},"Depth focus, use it to shift the focal point (where the shadow is the sharpest)",[927,37703,37704,37706],{},[590,37705,941],{}," (the beginning)",[1303,37708,1652],{},{"title":548,"searchDepth":549,"depth":550,"links":37710},[37711,37712],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},"Injects percent closer soft shadows (PCSS) into THREE's shader chunk.",{},{"title":341,"description":37713},"Jcog66jVOp0ZbwScDyRmLoOj7ZJPGe-FsPG7UiW8n8I",[37718,38748,39318,39613,39967,40577,41623,42039,42450,44357,45050],{"id":37719,"title":351,"body":37720,"description":38744,"extension":563,"links":564,"meta":38745,"navigation":566,"path":352,"seo":38746,"stem":353,"__hash__":38747},"docs/2.api/8.staging/1.environment.md",{"type":473,"value":37721,"toc":38733},[37722,37727,37737,37743,37745,37962,37969,37995,38000,38004,38011,38209,38213,38219,38243,38247,38250,38379,38383,38389,38495,38501,38512,38514,38721,38724,38730],[580,37723,37724],{},[37725,37726],"staging-environment",{},[586,37728,37729,37730,37733,37734,1122],{},"Is a component abstraction that automatically sets up a global cubemap, which affects the default ",[590,37731,37732],{},"scene.environment",", and optionally ",[590,37735,37736],{},"scene.background",[586,37738,37739,37740,37742],{},"It uses the composable ",[1116,37741,355],{"href":356}," under the hood to load the cubemap.",[476,37744,15],{"id":596},[598,37746,37748],{"className":600,"code":37747,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Environment } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CSuspense>\n      \u003CEnvironment\n        :files=\"[\n          '/px.jpg',\n          '/nx.jpg',\n          '/py.jpg',\n          '/ny.jpg',\n          '/pz.jpg',\n          '/nz.jpg',\n        ]\"\n      />\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n",[590,37749,37750,37770,37788,37806,37814,37818,37826,37834,37842,37848,37860,37872,37883,37894,37905,37916,37927,37934,37938,37946,37954],{"__ignoreMap":548},[609,37751,37752,37754,37756,37758,37760,37762,37764,37766,37768],{"class":611,"line":549},[609,37753,615],{"class":614},[609,37755,619],{"class":618},[609,37757,623],{"class":622},[609,37759,626],{"class":622},[609,37761,629],{"class":614},[609,37763,632],{"class":614},[609,37765,636],{"class":635},[609,37767,632],{"class":614},[609,37769,641],{"class":614},[609,37771,37772,37774,37776,37778,37780,37782,37784,37786],{"class":611,"line":550},[609,37773,649],{"class":648},[609,37775,652],{"class":614},[609,37777,687],{"class":655},[609,37779,665],{"class":614},[609,37781,668],{"class":648},[609,37783,671],{"class":614},[609,37785,696],{"class":635},[609,37787,677],{"class":614},[609,37789,37790,37792,37794,37796,37798,37800,37802,37804],{"class":611,"line":680},[609,37791,649],{"class":648},[609,37793,652],{"class":614},[609,37795,15234],{"class":655},[609,37797,665],{"class":614},[609,37799,668],{"class":648},[609,37801,671],{"class":614},[609,37803,674],{"class":635},[609,37805,677],{"class":614},[609,37807,37808,37810,37812],{"class":611,"line":701},[609,37809,704],{"class":614},[609,37811,619],{"class":618},[609,37813,641],{"class":614},[609,37815,37816],{"class":611,"line":711},[609,37817,714],{"emptyLinePlaceholder":566},[609,37819,37820,37822,37824],{"class":611,"line":717},[609,37821,615],{"class":614},[609,37823,722],{"class":618},[609,37825,641],{"class":614},[609,37827,37828,37830,37832],{"class":611,"line":727},[609,37829,730],{"class":614},[609,37831,733],{"class":618},[609,37833,641],{"class":614},[609,37835,37836,37838,37840],{"class":611,"line":750},[609,37837,753],{"class":614},[609,37839,15941],{"class":618},[609,37841,641],{"class":614},[609,37843,37844,37846],{"class":611,"line":762},[609,37845,829],{"class":614},[609,37847,19768],{"class":618},[609,37849,37850,37852,37854,37856,37858],{"class":611,"line":772},[609,37851,2997],{"class":614},[609,37853,19780],{"class":622},[609,37855,629],{"class":614},[609,37857,632],{"class":614},[609,37859,36007],{"class":614},[609,37861,37862,37865,37868,37870],{"class":611,"line":777},[609,37863,37864],{"class":614},"          '",[609,37866,37867],{"class":635},"/px.jpg",[609,37869,5540],{"class":614},[609,37871,14979],{"class":614},[609,37873,37874,37876,37879,37881],{"class":611,"line":803},[609,37875,37864],{"class":614},[609,37877,37878],{"class":635},"/nx.jpg",[609,37880,5540],{"class":614},[609,37882,14979],{"class":614},[609,37884,37885,37887,37890,37892],{"class":611,"line":603},[609,37886,37864],{"class":614},[609,37888,37889],{"class":635},"/py.jpg",[609,37891,5540],{"class":614},[609,37893,14979],{"class":614},[609,37895,37896,37898,37901,37903],{"class":611,"line":826},[609,37897,37864],{"class":614},[609,37899,37900],{"class":635},"/ny.jpg",[609,37902,5540],{"class":614},[609,37904,14979],{"class":614},[609,37906,37907,37909,37912,37914],{"class":611,"line":837},[609,37908,37864],{"class":614},[609,37910,37911],{"class":635},"/pz.jpg",[609,37913,5540],{"class":614},[609,37915,14979],{"class":614},[609,37917,37918,37920,37923,37925],{"class":611,"line":848},[609,37919,37864],{"class":614},[609,37921,37922],{"class":635},"/nz.jpg",[609,37924,5540],{"class":614},[609,37926,14979],{"class":614},[609,37928,37929,37932],{"class":611,"line":858},[609,37930,37931],{"class":614},"        ]",[609,37933,2991],{"class":614},[609,37935,37936],{"class":611,"line":604},[609,37937,3054],{"class":614},[609,37939,37940,37942,37944],{"class":611,"line":878},[609,37941,871],{"class":614},[609,37943,15941],{"class":618},[609,37945,641],{"class":614},[609,37947,37948,37950,37952],{"class":611,"line":888},[609,37949,881],{"class":614},[609,37951,733],{"class":618},[609,37953,641],{"class":614},[609,37955,37956,37958,37960],{"class":611,"line":2956},[609,37957,704],{"class":614},[609,37959,722],{"class":618},[609,37961,641],{"class":614},[586,37963,37964,37965,37968],{},"You can also pass the ",[590,37966,37967],{},".hdr"," file directly:",[598,37970,37972],{"className":600,"code":37971,"language":605,"meta":548,"style":548},"\u003CSuspense>\n   \u003CEnvironment files=\"/sunset.hdr\" />\n\u003C/Suspense>\n",[590,37973,37974,37982,37987],{"__ignoreMap":548},[609,37975,37976,37978,37980],{"class":611,"line":549},[609,37977,615],{"class":614},[609,37979,15941],{"class":618},[609,37981,641],{"class":614},[609,37983,37984],{"class":611,"line":550},[609,37985,37986],{"class":655},"   \u003CEnvironment files=\"/sunset.hdr\" />\n",[609,37988,37989,37991,37993],{"class":611,"line":680},[609,37990,704],{"class":614},[609,37992,15941],{"class":618},[609,37994,641],{"class":614},[586,37996,37997],{},[3271,37998],{"alt":351,"src":37999},"/cientos/envmaps.png",[476,38001,38003],{"id":38002},"texture-reference","Texture reference",[586,38005,12573,38006,1684,38008,35765],{},[590,38007,12576],{},[590,38009,38010],{},"\u003CEnvironment />",[598,38012,38015],{"className":600,"code":38013,"highlights":38014,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { Environment } from '@tresjs/cientos'\n\nconst environmentRef = shallowRef()\n\nwatch(environmentRef, texture => {\n  console.log(texture)\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CEnvironment ref=\"environmentRef\" />\n  \u003CTresMesh>\n    \u003CTresSphereGeometry />\n    \u003CTresMeshStandardMaterial :env-map=\"envMap\" />\n  \u003C/TresMesh>\n\u003C/template>\n",[701,717,762,826,858],[590,38016,38017,38037,38055,38059,38073,38077,38093,38107,38113,38122,38126,38134,38153,38161,38170,38192,38200],{"__ignoreMap":548},[609,38018,38019,38021,38023,38025,38027,38029,38031,38033,38035],{"class":611,"line":549},[609,38020,615],{"class":614},[609,38022,619],{"class":618},[609,38024,623],{"class":622},[609,38026,626],{"class":622},[609,38028,629],{"class":614},[609,38030,632],{"class":614},[609,38032,636],{"class":635},[609,38034,632],{"class":614},[609,38036,641],{"class":614},[609,38038,38039,38041,38043,38045,38047,38049,38051,38053],{"class":611,"line":550},[609,38040,649],{"class":648},[609,38042,652],{"class":614},[609,38044,15234],{"class":655},[609,38046,665],{"class":614},[609,38048,668],{"class":648},[609,38050,671],{"class":614},[609,38052,674],{"class":635},[609,38054,677],{"class":614},[609,38056,38057],{"class":611,"line":680},[609,38058,714],{"emptyLinePlaceholder":566},[609,38060,38062,38064,38067,38069,38071],{"class":38061,"line":701},[611,645],[609,38063,2693],{"class":622},[609,38065,38066],{"class":655}," environmentRef ",[609,38068,629],{"class":614},[609,38070,7909],{"class":2804},[609,38072,2850],{"class":655},[609,38074,38075],{"class":611,"line":711},[609,38076,714],{"emptyLinePlaceholder":566},[609,38078,38080,38082,38085,38087,38089,38091],{"class":38079,"line":717},[611,645],[609,38081,5489],{"class":2804},[609,38083,38084],{"class":655},"(environmentRef",[609,38086,659],{"class":614},[609,38088,14308],{"class":5499},[609,38090,5505],{"class":622},[609,38092,1180],{"class":614},[609,38094,38095,38097,38099,38101,38103,38105],{"class":611,"line":727},[609,38096,14622],{"class":655},[609,38098,1122],{"class":614},[609,38100,14627],{"class":2804},[609,38102,2974],{"class":618},[609,38104,14381],{"class":655},[609,38106,5543],{"class":618},[609,38108,38109,38111],{"class":611,"line":750},[609,38110,5548],{"class":614},[609,38112,5543],{"class":655},[609,38114,38116,38118,38120],{"class":38115,"line":762},[611,645],[609,38117,704],{"class":614},[609,38119,619],{"class":618},[609,38121,641],{"class":614},[609,38123,38124],{"class":611,"line":772},[609,38125,714],{"emptyLinePlaceholder":566},[609,38127,38128,38130,38132],{"class":611,"line":777},[609,38129,615],{"class":614},[609,38131,722],{"class":618},[609,38133,641],{"class":614},[609,38135,38136,38138,38140,38142,38144,38146,38149,38151],{"class":611,"line":803},[609,38137,730],{"class":614},[609,38139,351],{"class":618},[609,38141,5435],{"class":622},[609,38143,629],{"class":614},[609,38145,632],{"class":614},[609,38147,38148],{"class":635},"environmentRef",[609,38150,632],{"class":614},[609,38152,759],{"class":614},[609,38154,38155,38157,38159],{"class":611,"line":603},[609,38156,730],{"class":614},[609,38158,832],{"class":618},[609,38160,641],{"class":614},[609,38162,38164,38166,38168],{"class":38163,"line":826},[611,645],[609,38165,753],{"class":614},[609,38167,4739],{"class":618},[609,38169,759],{"class":614},[609,38171,38172,38174,38176,38178,38181,38183,38185,38188,38190],{"class":611,"line":837},[609,38173,753],{"class":614},[609,38175,8099],{"class":618},[609,38177,785],{"class":614},[609,38179,38180],{"class":622},"env-map",[609,38182,629],{"class":614},[609,38184,632],{"class":614},[609,38186,38187],{"class":655},"envMap",[609,38189,632],{"class":614},[609,38191,759],{"class":614},[609,38193,38194,38196,38198],{"class":611,"line":848},[609,38195,881],{"class":614},[609,38197,832],{"class":618},[609,38199,641],{"class":614},[609,38201,38203,38205,38207],{"class":38202,"line":858},[611,645],[609,38204,704],{"class":614},[609,38206,722],{"class":618},[609,38208,641],{"class":614},[476,38210,38212],{"id":38211},"presets","Presets",[586,38214,38215,38216,2072],{},"You can use one of the available presets by passing the ",[590,38217,38218],{},"preset",[598,38220,38222],{"className":600,"code":38221,"language":605,"meta":548,"style":548},"\u003CEnvironment preset=\"city\" />\n",[590,38223,38224],{"__ignoreMap":548},[609,38225,38226,38228,38230,38232,38234,38236,38239,38241],{"class":611,"line":549},[609,38227,615],{"class":614},[609,38229,351],{"class":618},[609,38231,15953],{"class":622},[609,38233,629],{"class":614},[609,38235,632],{"class":614},[609,38237,38238],{"class":635},"city",[609,38240,632],{"class":614},[609,38242,759],{"class":614},[476,38244,38246],{"id":38245},"environment-rotation","Environment Rotation",[586,38248,38249],{},"The environment component supports both background and environment rotation. You can control them independently or sync them together:",[598,38251,38253],{"className":600,"code":38252,"language":605,"meta":548,"style":548},"\u003Ctemplate>\n  \u003CEnvironment\n    preset=\"sunset\"\n    :background=\"true\"\n    :background-rotation=\"[0, Math.PI / 2, 0]\"\n    :environment-rotation=\"[0, Math.PI / 4, 0]\"\n  />\n\u003C/template>\n",[590,38254,38255,38263,38269,38283,38298,38333,38367,38371],{"__ignoreMap":548},[609,38256,38257,38259,38261],{"class":611,"line":549},[609,38258,615],{"class":614},[609,38260,722],{"class":618},[609,38262,641],{"class":614},[609,38264,38265,38267],{"class":611,"line":550},[609,38266,730],{"class":614},[609,38268,19768],{"class":618},[609,38270,38271,38274,38276,38278,38281],{"class":611,"line":680},[609,38272,38273],{"class":622},"    preset",[609,38275,629],{"class":614},[609,38277,632],{"class":614},[609,38279,38280],{"class":635},"sunset",[609,38282,2991],{"class":614},[609,38284,38285,38287,38290,38292,38294,38296],{"class":611,"line":701},[609,38286,7396],{"class":614},[609,38288,38289],{"class":622},"background",[609,38291,629],{"class":614},[609,38293,632],{"class":614},[609,38295,937],{"class":3874},[609,38297,2991],{"class":614},[609,38299,38300,38302,38305,38307,38309,38311,38313,38315,38317,38319,38321,38323,38325,38327,38329,38331],{"class":611,"line":711},[609,38301,7396],{"class":614},[609,38303,38304],{"class":622},"background-rotation",[609,38306,629],{"class":614},[609,38308,632],{"class":614},[609,38310,1470],{"class":614},[609,38312,941],{"class":795},[609,38314,1475],{"class":614},[609,38316,22535],{"class":655},[609,38318,1122],{"class":614},[609,38320,22540],{"class":655},[609,38322,22543],{"class":614},[609,38324,796],{"class":795},[609,38326,1475],{"class":614},[609,38328,941],{"class":795},[609,38330,1485],{"class":614},[609,38332,2991],{"class":614},[609,38334,38335,38337,38339,38341,38343,38345,38347,38349,38351,38353,38355,38357,38359,38361,38363,38365],{"class":611,"line":717},[609,38336,7396],{"class":614},[609,38338,38245],{"class":622},[609,38340,629],{"class":614},[609,38342,632],{"class":614},[609,38344,1470],{"class":614},[609,38346,941],{"class":795},[609,38348,1475],{"class":614},[609,38350,22535],{"class":655},[609,38352,1122],{"class":614},[609,38354,22540],{"class":655},[609,38356,22543],{"class":614},[609,38358,3494],{"class":795},[609,38360,1475],{"class":614},[609,38362,941],{"class":795},[609,38364,1485],{"class":614},[609,38366,2991],{"class":614},[609,38368,38369],{"class":611,"line":727},[609,38370,7463],{"class":614},[609,38372,38373,38375,38377],{"class":611,"line":750},[609,38374,704],{"class":614},[609,38376,722],{"class":618},[609,38378,641],{"class":614},[7477,38380,38382],{"id":38381},"syncing-rotations","Syncing Rotations",[586,38384,38385,38386,2072],{},"You can sync the environment rotation with the background rotation using the ",[590,38387,38388],{},"syncMaterials",[598,38390,38392],{"className":600,"code":38391,"language":605,"meta":548,"style":548},"\u003Ctemplate>\n  \u003CEnvironment\n    preset=\"sunset\"\n    :background=\"true\"\n    :sync-materials=\"true\"\n    :background-rotation=\"[0, Math.PI / 2, 0]\"\n  />\n\u003C/template>\n",[590,38393,38394,38402,38408,38420,38434,38449,38483,38487],{"__ignoreMap":548},[609,38395,38396,38398,38400],{"class":611,"line":549},[609,38397,615],{"class":614},[609,38399,722],{"class":618},[609,38401,641],{"class":614},[609,38403,38404,38406],{"class":611,"line":550},[609,38405,730],{"class":614},[609,38407,19768],{"class":618},[609,38409,38410,38412,38414,38416,38418],{"class":611,"line":680},[609,38411,38273],{"class":622},[609,38413,629],{"class":614},[609,38415,632],{"class":614},[609,38417,38280],{"class":635},[609,38419,2991],{"class":614},[609,38421,38422,38424,38426,38428,38430,38432],{"class":611,"line":701},[609,38423,7396],{"class":614},[609,38425,38289],{"class":622},[609,38427,629],{"class":614},[609,38429,632],{"class":614},[609,38431,937],{"class":3874},[609,38433,2991],{"class":614},[609,38435,38436,38438,38441,38443,38445,38447],{"class":611,"line":711},[609,38437,7396],{"class":614},[609,38439,38440],{"class":622},"sync-materials",[609,38442,629],{"class":614},[609,38444,632],{"class":614},[609,38446,937],{"class":3874},[609,38448,2991],{"class":614},[609,38450,38451,38453,38455,38457,38459,38461,38463,38465,38467,38469,38471,38473,38475,38477,38479,38481],{"class":611,"line":717},[609,38452,7396],{"class":614},[609,38454,38304],{"class":622},[609,38456,629],{"class":614},[609,38458,632],{"class":614},[609,38460,1470],{"class":614},[609,38462,941],{"class":795},[609,38464,1475],{"class":614},[609,38466,22535],{"class":655},[609,38468,1122],{"class":614},[609,38470,22540],{"class":655},[609,38472,22543],{"class":614},[609,38474,796],{"class":795},[609,38476,1475],{"class":614},[609,38478,941],{"class":795},[609,38480,1485],{"class":614},[609,38482,2991],{"class":614},[609,38484,38485],{"class":611,"line":727},[609,38486,7463],{"class":614},[609,38488,38489,38491,38493],{"class":611,"line":750},[609,38490,704],{"class":614},[609,38492,722],{"class":618},[609,38494,641],{"class":614},[586,38496,38497,38498,38500],{},"When ",[590,38499,38388],{}," is enabled:",[3140,38502,38503,38506,38509],{},[3143,38504,38505],{},"The environment rotation will automatically match the background rotation",[3143,38507,38508],{},"All materials in the scene will update to reflect the new rotation",[3143,38510,38511],{},"This ensures visual consistency between the background and environment reflections",[476,38513,898],{"id":897},[903,38515,38516,38526],{},[906,38517,38518],{},[909,38519,38520,38522,38524],{},[912,38521,914],{"align":973},[912,38523,917],{"align":973},[912,38525,920],{},[922,38527,38528,38541,38554,38574,38589,38600,38613,38624,38635,38646,38657,38669,38681,38696,38710],{},[909,38529,38530,38534,38537],{},[927,38531,38532],{"align":973},[590,38533,19780],{},[927,38535,38536],{"align":973},"Array of 6 urls to images, one for each side of the CubeTexture, or an HDR file",[927,38538,38539],{},[590,38540,1155],{},[909,38542,38543,38547,38550],{},[927,38544,38545],{"align":973},[590,38546,12302],{},[927,38548,38549],{"align":973},"Path to the environment map files",[927,38551,38552],{},[590,38553,1155],{},[909,38555,38556,38561,38564],{},[927,38557,38558],{"align":973},[590,38559,38560],{},"encoding",[927,38562,38563],{"align":973},"Encoding of the environment map",[927,38565,38566,38569,38570,38573],{},[590,38567,38568],{},"SRGBColorSpace"," for array files, ",[590,38571,38572],{},"LinearEncoding"," for single texture",[909,38575,38576,38580,38585],{},[927,38577,38578],{"align":973},[590,38579,38289],{},[927,38581,934,38582,38584],{"align":973},[590,38583,937],{},", the environment map will be used as the scene background",[927,38586,38587],{},[590,38588,947],{},[909,38590,38591,38595,38598],{},[927,38592,38593],{"align":973},[590,38594,15970],{},[927,38596,38597],{"align":973},"Blur factor between 0 and 1 (only works with three 0.146 and up)",[927,38599,941],{},[909,38601,38602,38606,38609],{},[927,38603,38604],{"align":973},[590,38605,38218],{},[927,38607,38608],{"align":973},"Preset environment map",[927,38610,38611],{},[590,38612,1155],{},[909,38614,38615,38619,38622],{},[927,38616,38617],{"align":973},[590,38618,22879],{},[927,38620,38621],{"align":973},"The resolution of the WebGLCubeRenderTarget",[927,38623,22887],{},[909,38625,38626,38630,38633],{},[927,38627,38628],{"align":973},[590,38629,37216],{},[927,38631,38632],{"align":973},"The near of the CubeCamera",[927,38634,1897],{},[909,38636,38637,38641,38644],{},[927,38638,38639],{"align":973},[590,38640,34969],{},[927,38642,38643],{"align":973},"The far of the CubeCamera",[927,38645,5169],{},[909,38647,38648,38652,38655],{},[927,38649,38650],{"align":973},[590,38651,33329],{},[927,38653,38654],{"align":973},"The frames of the cubeCamera.update",[927,38656,6942],{},[909,38658,38659,38664,38667],{},[927,38660,38661],{"align":973},[590,38662,38663],{},"backgroundIntensity",[927,38665,38666],{"align":973},"Intensity of the background",[927,38668,1897],{},[909,38670,38671,38676,38679],{},[927,38672,38673],{"align":973},[590,38674,38675],{},"environmentIntensity",[927,38677,38678],{"align":973},"Intensity of the environment",[927,38680,1897],{},[909,38682,38683,38688,38691],{},[927,38684,38685],{"align":973},[590,38686,38687],{},"backgroundRotation",[927,38689,38690],{"align":973},"Rotation of the background (in radians)",[927,38692,38693],{},[609,38694,38695],{},"0, 0, 0",[909,38697,38698,38703,38706],{},[927,38699,38700],{"align":973},[590,38701,38702],{},"environmentRotation",[927,38704,38705],{"align":973},"Rotation of the environment (in radians)",[927,38707,38708],{},[609,38709,38695],{},[909,38711,38712,38716,38719],{},[927,38713,38714],{"align":973},[590,38715,38388],{},[927,38717,38718],{"align":973},"If true, environment rotation will sync with background rotation",[927,38720,947],{},[7477,38722,38212],{"id":38723},"presets-1",[598,38725,38728],{"className":38726,"code":38727,"language":23872},[23870],"sunset\nstudio\ncity\numbrellas\nnight\nforest\nsnow\ndawn\nhangar\nurban\nmodern\nshangai\n",[590,38729,38727],{"__ignoreMap":548},[1303,38731,38732],{},"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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":548,"searchDepth":549,"depth":550,"links":38734},[38735,38736,38737,38738,38741],{"id":596,"depth":550,"text":15},{"id":38002,"depth":550,"text":38003},{"id":38211,"depth":550,"text":38212},{"id":38245,"depth":550,"text":38246,"children":38739},[38740],{"id":38381,"depth":680,"text":38382},{"id":897,"depth":550,"text":898,"children":38742},[38743],{"id":38723,"depth":680,"text":38212},"Automatically sets up a global cubemap for scene environment and background.",{},{"title":351,"description":38744},"dqLZk4n0fsNI6BVPDBhIxhgyNLq36JyLYtIkuxeINv0",{"id":38749,"title":355,"body":38750,"description":39314,"extension":563,"links":564,"meta":39315,"navigation":566,"path":356,"seo":39316,"stem":357,"__hash__":39317},"docs/2.api/8.staging/2.use-environment.md",{"type":473,"value":38751,"toc":39310},[38752,38756,38765,38774,38776,38781,38983,38988,39021,39026,39110,39112,39307],[2562,38753,38754],{},[37725,38755],{},[586,38757,38758,38760,38761,37733,38763,1122],{},[590,38759,355],{}," composable that automatically sets up a global cubemap, which affects the default ",[590,38762,37732],{},[590,38764,37736],{},[586,38766,38767,38768,38773],{},"It uses the ",[1116,38769,38772],{"href":38770,"rel":38771},"https://threejs.org/docs/#api/en/loaders/CubeTextureLoader",[1120],"CubeTextureLoader"," to load the cubemap",[476,38775,15],{"id":596},[3729,38777,38778],{},[586,38779,38780],{},"UseEnvironment needs to be wrapped by a Suspense component",[598,38782,38784],{"className":600,"code":38783,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { useEnvironment } from '@tresjs/cientos'\nimport { SRGBColorSpace } from 'three'\n\nconst texture = await useEnvironment({\n  files: [\n    '/textures/environmentMaps/0/px.jpg',\n    '/textures/environmentMaps/0/nx.jpg',\n    '/textures/environmentMaps/0/py.jpg',\n    '/textures/environmentMaps/0/ny.jpg',\n    '/textures/environmentMaps/0/pz.jpg',\n    '/textures/environmentMaps/0/nz.jpg',\n  ],\n  path: '',\n  encoding: SRGBColorSpace,\n})\n\u003C/script>\n",[590,38785,38786,38806,38825,38844,38848,38864,38873,38885,38896,38907,38918,38929,38940,38946,38958,38969,38975],{"__ignoreMap":548},[609,38787,38788,38790,38792,38794,38796,38798,38800,38802,38804],{"class":611,"line":549},[609,38789,615],{"class":614},[609,38791,619],{"class":618},[609,38793,623],{"class":622},[609,38795,626],{"class":622},[609,38797,629],{"class":614},[609,38799,632],{"class":614},[609,38801,636],{"class":635},[609,38803,632],{"class":614},[609,38805,641],{"class":614},[609,38807,38808,38810,38812,38815,38817,38819,38821,38823],{"class":611,"line":550},[609,38809,649],{"class":648},[609,38811,652],{"class":614},[609,38813,38814],{"class":655}," useEnvironment",[609,38816,665],{"class":614},[609,38818,668],{"class":648},[609,38820,671],{"class":614},[609,38822,674],{"class":635},[609,38824,677],{"class":614},[609,38826,38827,38829,38831,38834,38836,38838,38840,38842],{"class":611,"line":680},[609,38828,649],{"class":648},[609,38830,652],{"class":614},[609,38832,38833],{"class":655}," SRGBColorSpace",[609,38835,665],{"class":614},[609,38837,668],{"class":648},[609,38839,671],{"class":614},[609,38841,2682],{"class":635},[609,38843,677],{"class":614},[609,38845,38846],{"class":611,"line":701},[609,38847,714],{"emptyLinePlaceholder":566},[609,38849,38850,38852,38854,38856,38858,38860,38862],{"class":611,"line":711},[609,38851,2693],{"class":622},[609,38853,20297],{"class":655},[609,38855,629],{"class":614},[609,38857,19489],{"class":648},[609,38859,38814],{"class":2804},[609,38861,2974],{"class":655},[609,38863,2755],{"class":614},[609,38865,38866,38869,38871],{"class":611,"line":717},[609,38867,38868],{"class":618},"  files",[609,38870,1194],{"class":614},[609,38872,14966],{"class":655},[609,38874,38875,38878,38881,38883],{"class":611,"line":727},[609,38876,38877],{"class":614},"    '",[609,38879,38880],{"class":635},"/textures/environmentMaps/0/px.jpg",[609,38882,5540],{"class":614},[609,38884,14979],{"class":614},[609,38886,38887,38889,38892,38894],{"class":611,"line":750},[609,38888,38877],{"class":614},[609,38890,38891],{"class":635},"/textures/environmentMaps/0/nx.jpg",[609,38893,5540],{"class":614},[609,38895,14979],{"class":614},[609,38897,38898,38900,38903,38905],{"class":611,"line":762},[609,38899,38877],{"class":614},[609,38901,38902],{"class":635},"/textures/environmentMaps/0/py.jpg",[609,38904,5540],{"class":614},[609,38906,14979],{"class":614},[609,38908,38909,38911,38914,38916],{"class":611,"line":772},[609,38910,38877],{"class":614},[609,38912,38913],{"class":635},"/textures/environmentMaps/0/ny.jpg",[609,38915,5540],{"class":614},[609,38917,14979],{"class":614},[609,38919,38920,38922,38925,38927],{"class":611,"line":777},[609,38921,38877],{"class":614},[609,38923,38924],{"class":635},"/textures/environmentMaps/0/pz.jpg",[609,38926,5540],{"class":614},[609,38928,14979],{"class":614},[609,38930,38931,38933,38936,38938],{"class":611,"line":803},[609,38932,38877],{"class":614},[609,38934,38935],{"class":635},"/textures/environmentMaps/0/nz.jpg",[609,38937,5540],{"class":614},[609,38939,14979],{"class":614},[609,38941,38942,38944],{"class":611,"line":603},[609,38943,36064],{"class":655},[609,38945,14979],{"class":614},[609,38947,38948,38951,38953,38956],{"class":611,"line":826},[609,38949,38950],{"class":618},"  path",[609,38952,1194],{"class":614},[609,38954,38955],{"class":614}," ''",[609,38957,14979],{"class":614},[609,38959,38960,38963,38965,38967],{"class":611,"line":837},[609,38961,38962],{"class":618},"  encoding",[609,38964,1194],{"class":614},[609,38966,38833],{"class":655},[609,38968,14979],{"class":614},[609,38970,38971,38973],{"class":611,"line":848},[609,38972,5548],{"class":614},[609,38974,5543],{"class":655},[609,38976,38977,38979,38981],{"class":611,"line":858},[609,38978,704],{"class":614},[609,38980,619],{"class":618},[609,38982,641],{"class":614},[586,38984,19496,38985,38987],{},[590,38986,14381],{}," in your scene:",[598,38989,38992],{"className":600,"code":38990,"highlights":38991,"language":605,"meta":548,"style":548},"\u003CTresMesh>\n  \u003CTresSphereGeometry />\n  \u003CTresMeshStandardMaterial :map=\"texture\" />\n\u003C/TresMesh>\n",[680],[590,38993,38994,39002,39007,39013],{"__ignoreMap":548},[609,38995,38996,38998,39000],{"class":611,"line":549},[609,38997,615],{"class":614},[609,38999,832],{"class":618},[609,39001,641],{"class":614},[609,39003,39004],{"class":611,"line":550},[609,39005,39006],{"class":655},"  \u003CTresSphereGeometry />\n",[609,39008,39010],{"class":39009,"line":680},[611,645],[609,39011,39012],{"class":655},"  \u003CTresMeshStandardMaterial :map=\"texture\" />\n",[609,39014,39015,39017,39019],{"class":611,"line":701},[609,39016,704],{"class":614},[609,39018,832],{"class":618},[609,39020,641],{"class":614},[586,39022,37964,39023,39025],{},[590,39024,37967],{}," file directly",[598,39027,39029],{"className":1162,"code":39028,"language":636,"meta":548,"style":548},"import { useEnvironment } from '@tresjs/cientos'\n\nconst texture = await useEnvironment({\n  files: '/sunset.hdr',\n  path: '',\n  encoding: SRGBColorSpace,\n})\n",[590,39030,39031,39049,39053,39069,39084,39094,39104],{"__ignoreMap":548},[609,39032,39033,39035,39037,39039,39041,39043,39045,39047],{"class":611,"line":549},[609,39034,649],{"class":648},[609,39036,652],{"class":614},[609,39038,38814],{"class":655},[609,39040,665],{"class":614},[609,39042,668],{"class":648},[609,39044,671],{"class":614},[609,39046,674],{"class":635},[609,39048,677],{"class":614},[609,39050,39051],{"class":611,"line":550},[609,39052,714],{"emptyLinePlaceholder":566},[609,39054,39055,39057,39059,39061,39063,39065,39067],{"class":611,"line":680},[609,39056,2693],{"class":622},[609,39058,20297],{"class":655},[609,39060,629],{"class":614},[609,39062,19489],{"class":648},[609,39064,38814],{"class":2804},[609,39066,2974],{"class":655},[609,39068,2755],{"class":614},[609,39070,39071,39073,39075,39077,39080,39082],{"class":611,"line":701},[609,39072,38868],{"class":618},[609,39074,1194],{"class":614},[609,39076,671],{"class":614},[609,39078,39079],{"class":635},"/sunset.hdr",[609,39081,5540],{"class":614},[609,39083,14979],{"class":614},[609,39085,39086,39088,39090,39092],{"class":611,"line":711},[609,39087,38950],{"class":618},[609,39089,1194],{"class":614},[609,39091,38955],{"class":614},[609,39093,14979],{"class":614},[609,39095,39096,39098,39100,39102],{"class":611,"line":717},[609,39097,38962],{"class":618},[609,39099,1194],{"class":614},[609,39101,38833],{"class":655},[609,39103,14979],{"class":614},[609,39105,39106,39108],{"class":611,"line":727},[609,39107,5548],{"class":614},[609,39109,5543],{"class":655},[476,39111,7491],{"id":11998},[903,39113,39114,39126],{},[906,39115,39116],{},[909,39117,39118,39120,39122,39124],{},[912,39119,3122],{"align":973},[912,39121,11906],{},[912,39123,920],{},[912,39125,917],{},[922,39127,39128,39145,39162,39184,39203,39220,39237,39254,39271,39290],{},[909,39129,39130,39134,39138,39142],{},[927,39131,39132],{"align":973},[1677,39133,19780],{},[927,39135,39136],{},[590,39137,19896],{},[927,39139,39140],{},[590,39141,1155],{},[927,39143,39144],{},"Array of 6 urls to images, one for each side of the CubeTexture. or and HDR",[909,39146,39147,39151,39155,39159],{},[927,39148,39149],{"align":973},[1677,39150,12302],{},[927,39152,39153],{},[590,39154,11963],{},[927,39156,39157],{},[590,39158,947],{},[927,39160,39161],{},"Path to the environment map files.",[909,39163,39164,39168,39173,39181],{},[927,39165,39166],{"align":973},[1677,39167,38560],{},[927,39169,39170],{},[590,39171,39172],{},"Encoding",[927,39174,39175,39177,39178,39180],{},[590,39176,38568],{}," for an array of files and ",[590,39179,38572],{}," for a single texture",[927,39182,39183],{},"Encoding of the environment map.",[909,39185,39186,39190,39194,39198],{},[927,39187,39188],{"align":973},[1677,39189,38289],{},[927,39191,39192],{},[590,39193,11963],{},[927,39195,39196],{},[590,39197,947],{},[927,39199,934,39200,39202],{},[590,39201,937],{}," the texture will be used as the scene background.",[909,39204,39205,39209,39213,39217],{},[927,39206,39207],{"align":973},[1677,39208,15970],{},[927,39210,39211],{},[590,39212,2541],{},[927,39214,39215],{},[590,39216,941],{},[927,39218,39219],{},"Blur factor between 0 and 1. (only works with three 0.146 and up)",[909,39221,39222,39226,39230,39234],{},[927,39223,39224],{"align":973},[1677,39225,38218],{},[927,39227,39228],{},[590,39229,12043],{},[927,39231,39232],{},[590,39233,1155],{},[927,39235,39236],{},"Preset environment map.",[909,39238,39239,39243,39247,39251],{},[927,39240,39241],{"align":973},[1677,39242,38663],{},[927,39244,39245],{},[590,39246,2541],{},[927,39248,39249],{},[590,39250,1897],{},[927,39252,39253],{},"Intensity of the background.",[909,39255,39256,39260,39264,39268],{},[927,39257,39258],{"align":973},[1677,39259,38675],{},[927,39261,39262],{},[590,39263,2541],{},[927,39265,39266],{},[590,39267,1897],{},[927,39269,39270],{},"Intensity of the environment.",[909,39272,39273,39277,39282,39287],{},[927,39274,39275],{"align":973},[1677,39276,38687],{},[927,39278,39279],{},[590,39280,39281],{},"VectorFlexibleParams",[927,39283,39284],{},[590,39285,39286],{},"[0, 0, 0]",[927,39288,39289],{},"Rotation of the background.",[909,39291,39292,39296,39300,39304],{},[927,39293,39294],{"align":973},[1677,39295,38702],{},[927,39297,39298],{},[590,39299,39281],{},[927,39301,39302],{},[590,39303,39286],{},[927,39305,39306],{},"Rotation of the environment.",[1303,39308,39309],{},"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":548,"searchDepth":549,"depth":550,"links":39311},[39312,39313],{"id":596,"depth":550,"text":15},{"id":11998,"depth":550,"text":7491},"Composable that sets up a global cubemap for scene environment and background.",{},{"title":355,"description":39314},"6daKH-E6ICNjAkrFUlcQXUgujIBuYCGJ6Xewfx615-c",{"id":39319,"title":359,"body":39320,"description":39609,"extension":563,"links":564,"meta":39610,"navigation":566,"path":360,"seo":39611,"stem":361,"__hash__":39612},"docs/2.api/8.staging/3.lightformer.md",{"type":473,"value":39321,"toc":39606},[39322,39327,39333,39527,39529,39532,39604],[580,39323,39324],{},[39325,39326],"staging-lightformer",{},[586,39328,39329,39330,39332],{},"You can incorporate ",[590,39331,359],{}," into the environment just like a slot.",[598,39334,39336],{"className":600,"code":39335,"language":605,"meta":548,"style":548},"\u003Cscript setup>\nimport { Enviroment, LightFormer } from '@tres/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CEnvironment>\n    \u003CLightformer :intensity=\"0.75\" :position=\"[0, 5, -9]\" />\n    \u003CLightformer from=\"ring\" :rotation-y=\"-Math.PI / 2\" :scale=\"[10, 10, 1]\" />\n  \u003C/Environment>\n\u003C/template>\n",[590,39337,39338,39348,39373,39381,39385,39393,39401,39445,39511,39519],{"__ignoreMap":548},[609,39339,39340,39342,39344,39346],{"class":611,"line":549},[609,39341,615],{"class":614},[609,39343,619],{"class":618},[609,39345,623],{"class":622},[609,39347,641],{"class":614},[609,39349,39350,39352,39354,39357,39359,39362,39364,39366,39368,39371],{"class":611,"line":550},[609,39351,649],{"class":648},[609,39353,652],{"class":614},[609,39355,39356],{"class":655}," Enviroment",[609,39358,659],{"class":614},[609,39360,39361],{"class":655}," LightFormer",[609,39363,665],{"class":614},[609,39365,668],{"class":648},[609,39367,671],{"class":614},[609,39369,39370],{"class":635},"@tres/cientos",[609,39372,677],{"class":614},[609,39374,39375,39377,39379],{"class":611,"line":680},[609,39376,704],{"class":614},[609,39378,619],{"class":618},[609,39380,641],{"class":614},[609,39382,39383],{"class":611,"line":701},[609,39384,714],{"emptyLinePlaceholder":566},[609,39386,39387,39389,39391],{"class":611,"line":711},[609,39388,615],{"class":614},[609,39390,722],{"class":618},[609,39392,641],{"class":614},[609,39394,39395,39397,39399],{"class":611,"line":717},[609,39396,730],{"class":614},[609,39398,351],{"class":618},[609,39400,641],{"class":614},[609,39402,39403,39405,39407,39409,39411,39413,39415,39417,39419,39421,39423,39425,39427,39429,39431,39433,39435,39437,39439,39441,39443],{"class":611,"line":727},[609,39404,753],{"class":614},[609,39406,359],{"class":618},[609,39408,785],{"class":614},[609,39410,1890],{"class":622},[609,39412,629],{"class":614},[609,39414,632],{"class":614},[609,39416,4649],{"class":795},[609,39418,632],{"class":614},[609,39420,785],{"class":614},[609,39422,1463],{"class":622},[609,39424,629],{"class":614},[609,39426,632],{"class":614},[609,39428,1470],{"class":614},[609,39430,941],{"class":795},[609,39432,1475],{"class":614},[609,39434,2400],{"class":795},[609,39436,3602],{"class":614},[609,39438,20092],{"class":795},[609,39440,1485],{"class":614},[609,39442,632],{"class":614},[609,39444,759],{"class":614},[609,39446,39447,39449,39451,39453,39455,39457,39460,39462,39464,39467,39469,39471,39473,39475,39477,39479,39481,39483,39485,39487,39489,39491,39493,39495,39497,39499,39501,39503,39505,39507,39509],{"class":611,"line":750},[609,39448,753],{"class":614},[609,39450,359],{"class":618},[609,39452,668],{"class":622},[609,39454,629],{"class":614},[609,39456,632],{"class":614},[609,39458,39459],{"class":635},"ring",[609,39461,632],{"class":614},[609,39463,785],{"class":614},[609,39465,39466],{"class":622},"rotation-y",[609,39468,629],{"class":614},[609,39470,632],{"class":614},[609,39472,4092],{"class":614},[609,39474,22535],{"class":655},[609,39476,1122],{"class":614},[609,39478,22540],{"class":655},[609,39480,22543],{"class":614},[609,39482,796],{"class":795},[609,39484,632],{"class":614},[609,39486,785],{"class":614},[609,39488,788],{"class":622},[609,39490,629],{"class":614},[609,39492,632],{"class":614},[609,39494,1470],{"class":614},[609,39496,1482],{"class":795},[609,39498,1475],{"class":614},[609,39500,1482],{"class":795},[609,39502,1475],{"class":614},[609,39504,1897],{"class":795},[609,39506,1485],{"class":614},[609,39508,632],{"class":614},[609,39510,759],{"class":614},[609,39512,39513,39515,39517],{"class":611,"line":762},[609,39514,881],{"class":614},[609,39516,351],{"class":618},[609,39518,641],{"class":614},[609,39520,39521,39523,39525],{"class":611,"line":772},[609,39522,704],{"class":614},[609,39524,722],{"class":618},[609,39526,641],{"class":614},[7477,39528,898],{"id":897},[586,39530,39531],{},"Lightformer inherits from mesh, and its extension parameters include:",[903,39533,39534,39544],{},[906,39535,39536],{},[909,39537,39538,39540,39542],{},[912,39539,914],{"align":973},[912,39541,917],{"align":973},[912,39543,920],{},[922,39545,39546,39567,39578,39592],{},[909,39547,39548,39552,39563],{},[927,39549,39550],{"align":973},[590,39551,11618],{},[927,39553,39554,1475,39557,1475,39559,39562],{"align":973},[590,39555,39556],{},"circle",[590,39558,39459],{},[590,39560,39561],{},"rect",", or any other Mesh type",[927,39564,39565],{},[590,39566,39561],{},[909,39568,39569,39573,39576],{},[927,39570,39571],{"align":973},[590,39572,1890],{},[927,39574,39575],{"align":973},"The intensity of the light",[927,39577,1897],{},[909,39579,39580,39584,39587],{},[927,39581,39582],{"align":973},[590,39583,2504],{},[927,39585,39586],{"align":973},"The color of the light",[927,39588,39589],{},[590,39590,39591],{},"0xffffff",[909,39593,39594,39598,39601],{},[927,39595,39596],{"align":973},[590,39597,1993],{},[927,39599,39600],{"align":973},"The arguments of the Geometry",[927,39602,39603],{},"When using other geometries, set the corresponding arguments",[1303,39605,7845],{},{"title":548,"searchDepth":549,"depth":550,"links":39607},[39608],{"id":897,"depth":680,"text":898},"Addon for environment component that provided you custom lights.",{},{"title":359,"description":39609},"R8P0Oy_2dpWPhe7Wm4S1_IYaBdzzvZXUtE1_rjpxx6o",{"id":39614,"title":363,"body":39615,"description":39963,"extension":563,"links":564,"meta":39964,"navigation":566,"path":364,"seo":39965,"stem":365,"__hash__":39966},"docs/2.api/8.staging/backdrop.md",{"type":473,"value":39616,"toc":39959},[39617,39622,39630,39632,39821,39824,39901,39903,39957],[580,39618,39619],{},[39620,39621],"staging-backdrop",{},[586,39623,2257,39624,3279,39626,39629],{},[590,39625,2260],{},[590,39627,39628],{},"\u003CBackdrop />"," component. It's just a curved plane, like a studio backdrop. Meant is for presentational purposes, to break up light and shadows more interestingly.",[476,39631,15],{"id":596},[598,39633,39636],{"className":600,"code":39634,"highlights":39635,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Backdrop } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" />\n    \u003CBackdrop />\n    \u003CTresAmbientLight />\n    \u003CTresDirectionalLight :position=\"[0, 2, 4]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n",[680,762],[590,39637,39638,39658,39676,39696,39704,39708,39716,39724,39756,39765,39773,39805,39813],{"__ignoreMap":548},[609,39639,39640,39642,39644,39646,39648,39650,39652,39654,39656],{"class":611,"line":549},[609,39641,615],{"class":614},[609,39643,619],{"class":618},[609,39645,623],{"class":622},[609,39647,626],{"class":622},[609,39649,629],{"class":614},[609,39651,632],{"class":614},[609,39653,636],{"class":635},[609,39655,632],{"class":614},[609,39657,641],{"class":614},[609,39659,39660,39662,39664,39666,39668,39670,39672,39674],{"class":611,"line":550},[609,39661,649],{"class":648},[609,39663,652],{"class":614},[609,39665,687],{"class":655},[609,39667,665],{"class":614},[609,39669,668],{"class":648},[609,39671,671],{"class":614},[609,39673,696],{"class":635},[609,39675,677],{"class":614},[609,39677,39679,39681,39683,39686,39688,39690,39692,39694],{"class":39678,"line":680},[611,645],[609,39680,649],{"class":648},[609,39682,652],{"class":614},[609,39684,39685],{"class":655}," Backdrop",[609,39687,665],{"class":614},[609,39689,668],{"class":648},[609,39691,671],{"class":614},[609,39693,674],{"class":635},[609,39695,677],{"class":614},[609,39697,39698,39700,39702],{"class":611,"line":701},[609,39699,704],{"class":614},[609,39701,619],{"class":618},[609,39703,641],{"class":614},[609,39705,39706],{"class":611,"line":711},[609,39707,714],{"emptyLinePlaceholder":566},[609,39709,39710,39712,39714],{"class":611,"line":717},[609,39711,615],{"class":614},[609,39713,722],{"class":618},[609,39715,641],{"class":614},[609,39717,39718,39720,39722],{"class":611,"line":727},[609,39719,730],{"class":614},[609,39721,733],{"class":618},[609,39723,641],{"class":614},[609,39725,39726,39728,39730,39732,39734,39736,39738,39740,39742,39744,39746,39748,39750,39752,39754],{"class":611,"line":750},[609,39727,753],{"class":614},[609,39729,756],{"class":618},[609,39731,785],{"class":614},[609,39733,1463],{"class":622},[609,39735,629],{"class":614},[609,39737,632],{"class":614},[609,39739,1470],{"class":614},[609,39741,941],{"class":795},[609,39743,1475],{"class":614},[609,39745,4164],{"class":795},[609,39747,1475],{"class":614},[609,39749,2400],{"class":795},[609,39751,1485],{"class":614},[609,39753,632],{"class":614},[609,39755,759],{"class":614},[609,39757,39759,39761,39763],{"class":39758,"line":762},[611,645],[609,39760,753],{"class":614},[609,39762,363],{"class":618},[609,39764,759],{"class":614},[609,39766,39767,39769,39771],{"class":611,"line":772},[609,39768,753],{"class":614},[609,39770,3522],{"class":618},[609,39772,759],{"class":614},[609,39774,39775,39777,39779,39781,39783,39785,39787,39789,39791,39793,39795,39797,39799,39801,39803],{"class":611,"line":777},[609,39776,753],{"class":614},[609,39778,3543],{"class":618},[609,39780,785],{"class":614},[609,39782,1463],{"class":622},[609,39784,629],{"class":614},[609,39786,632],{"class":614},[609,39788,1470],{"class":614},[609,39790,941],{"class":795},[609,39792,1475],{"class":614},[609,39794,796],{"class":795},[609,39796,1475],{"class":614},[609,39798,3494],{"class":795},[609,39800,1485],{"class":614},[609,39802,632],{"class":614},[609,39804,759],{"class":614},[609,39806,39807,39809,39811],{"class":611,"line":803},[609,39808,881],{"class":614},[609,39810,733],{"class":618},[609,39812,641],{"class":614},[609,39814,39815,39817,39819],{"class":611,"line":603},[609,39816,704],{"class":614},[609,39818,722],{"class":618},[609,39820,641],{"class":614},[586,39822,39823],{},"Or with a custom material",[598,39825,39829],{"className":39826,"code":39827,"language":39828,"meta":548,"style":548},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CBackdrop :floor=\"1.5\" :segments=\"20\" receive-shadow>\n  \u003CTresMeshPhysicalMaterial color=\"orange\" :roughness=\"1\" />\n\u003C/Backdrop>\n","html",[590,39830,39831,39863,39893],{"__ignoreMap":548},[609,39832,39833,39835,39837,39840,39842,39844,39846,39848,39851,39853,39855,39857,39859,39861],{"class":611,"line":549},[609,39834,615],{"class":614},[609,39836,363],{"class":618},[609,39838,39839],{"class":622}," :floor",[609,39841,629],{"class":614},[609,39843,632],{"class":614},[609,39845,10828],{"class":635},[609,39847,632],{"class":614},[609,39849,39850],{"class":622}," :segments",[609,39852,629],{"class":614},[609,39854,632],{"class":614},[609,39856,24411],{"class":635},[609,39858,632],{"class":614},[609,39860,37026],{"class":622},[609,39862,641],{"class":614},[609,39864,39865,39867,39870,39872,39874,39876,39878,39880,39883,39885,39887,39889,39891],{"class":611,"line":550},[609,39866,730],{"class":614},[609,39868,39869],{"class":618},"TresMeshPhysicalMaterial",[609,39871,3982],{"class":622},[609,39873,629],{"class":614},[609,39875,632],{"class":614},[609,39877,6742],{"class":635},[609,39879,632],{"class":614},[609,39881,39882],{"class":622}," :roughness",[609,39884,629],{"class":614},[609,39886,632],{"class":614},[609,39888,1897],{"class":635},[609,39890,632],{"class":614},[609,39892,759],{"class":614},[609,39894,39895,39897,39899],{"class":611,"line":680},[609,39896,704],{"class":614},[609,39898,363],{"class":618},[609,39900,641],{"class":614},[476,39902,898],{"id":897},[903,39904,39905,39917],{},[906,39906,39907],{},[909,39908,39909,39911,39913,39915],{},[912,39910,3122],{"align":973},[912,39912,11906],{"align":973},[912,39914,920],{},[912,39916,27939],{},[922,39918,39919,39933,39945],{},[909,39920,39921,39924,39926,39930],{},[927,39922,39923],{"align":973},"floor",[927,39925,2541],{"align":973},[927,39927,39928],{},[590,39929,7045],{},[927,39931,39932],{},"No",[909,39934,39935,39937,39939,39943],{},[927,39936,24299],{"align":973},[927,39938,2541],{"align":973},[927,39940,39941],{},[590,39942,24411],{},[927,39944,39932],{},[909,39946,39947,39949,39951,39955],{},[927,39948,12885],{"align":973},[927,39950,11963],{"align":973},[927,39952,39953],{},[590,39954,947],{},[927,39956,39932],{},[1303,39958,1652],{},{"title":548,"searchDepth":549,"depth":550,"links":39960},[39961,39962],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},"A curved plane studio backdrop for presentational purposes.",{},{"title":363,"description":39963},"NGh9OweK5ISAF-G6NdgBZKgy35j2Bl_DEl17ABguTXw",{"id":39968,"title":367,"body":39969,"description":40573,"extension":563,"links":564,"meta":40574,"navigation":566,"path":368,"seo":40575,"stem":369,"__hash__":40576},"docs/2.api/8.staging/ocean.md",{"type":473,"value":39970,"toc":40565},[39971,39976,39991,39996,39998,40131,40135,40144,40147,40162,40166,40169,40339,40341,40347,40562],[580,39972,39973],{},[39974,39975],"staging-ocean",{},[586,39977,39978,39981,39982,1122],{},[590,39979,39980],{},"\u003COcean />"," is a wrapper for the ",[1116,39983,39986,39987,39990],{"href":39984,"rel":39985},"https://threejs.org/examples/?q=ocean#webgl_shaders_ocean",[1120],"Three.js ",[590,39988,39989],{},"Water"," add-on",[3729,39992,39993],{},[586,39994,39995],{},"Ocean comes with a default texture, so it needs to be wrapped in a Suspense component.",[476,39997,15],{"id":596},[598,39999,40002],{"className":600,"code":40000,"highlights":40001,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Ocean } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CSuspense>\n      \u003COcean />\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n",[680,762],[590,40003,40004,40024,40042,40062,40070,40074,40082,40090,40098,40107,40115,40123],{"__ignoreMap":548},[609,40005,40006,40008,40010,40012,40014,40016,40018,40020,40022],{"class":611,"line":549},[609,40007,615],{"class":614},[609,40009,619],{"class":618},[609,40011,623],{"class":622},[609,40013,626],{"class":622},[609,40015,629],{"class":614},[609,40017,632],{"class":614},[609,40019,636],{"class":635},[609,40021,632],{"class":614},[609,40023,641],{"class":614},[609,40025,40026,40028,40030,40032,40034,40036,40038,40040],{"class":611,"line":550},[609,40027,649],{"class":648},[609,40029,652],{"class":614},[609,40031,687],{"class":655},[609,40033,665],{"class":614},[609,40035,668],{"class":648},[609,40037,671],{"class":614},[609,40039,696],{"class":635},[609,40041,677],{"class":614},[609,40043,40045,40047,40049,40052,40054,40056,40058,40060],{"class":40044,"line":680},[611,645],[609,40046,649],{"class":648},[609,40048,652],{"class":614},[609,40050,40051],{"class":655}," Ocean",[609,40053,665],{"class":614},[609,40055,668],{"class":648},[609,40057,671],{"class":614},[609,40059,674],{"class":635},[609,40061,677],{"class":614},[609,40063,40064,40066,40068],{"class":611,"line":701},[609,40065,704],{"class":614},[609,40067,619],{"class":618},[609,40069,641],{"class":614},[609,40071,40072],{"class":611,"line":711},[609,40073,714],{"emptyLinePlaceholder":566},[609,40075,40076,40078,40080],{"class":611,"line":717},[609,40077,615],{"class":614},[609,40079,722],{"class":618},[609,40081,641],{"class":614},[609,40083,40084,40086,40088],{"class":611,"line":727},[609,40085,730],{"class":614},[609,40087,733],{"class":618},[609,40089,641],{"class":614},[609,40091,40092,40094,40096],{"class":611,"line":750},[609,40093,753],{"class":614},[609,40095,15941],{"class":618},[609,40097,641],{"class":614},[609,40099,40101,40103,40105],{"class":40100,"line":762},[611,645],[609,40102,829],{"class":614},[609,40104,367],{"class":618},[609,40106,759],{"class":614},[609,40108,40109,40111,40113],{"class":611,"line":772},[609,40110,871],{"class":614},[609,40112,15941],{"class":618},[609,40114,641],{"class":614},[609,40116,40117,40119,40121],{"class":611,"line":777},[609,40118,881],{"class":614},[609,40120,733],{"class":618},[609,40122,641],{"class":614},[609,40124,40125,40127,40129],{"class":611,"line":803},[609,40126,704],{"class":614},[609,40128,722],{"class":618},[609,40130,641],{"class":614},[7477,40132,40134],{"id":40133},"sky","SKY",[586,40136,40137,40139,40140,40143],{},[590,40138,39980],{}," works hand in hand with the Sky component, detecting the position of the sun and reflecting on the water.\n(",[590,40141,40142],{},"\u003CSky />"," is not required for making this component work.)",[7477,40145,40146],{"id":34519},"Fog",[586,40148,2257,40149,40151,40152,11099,40156,40161],{},[590,40150,39980],{}," component also reacts when there's ",[1116,40153,40146],{"href":40154,"rel":40155},"https://threejs.org/docs/index.html?q=fog#api/en/scenes/Fog",[1120],[1116,40157,40160],{"href":40158,"rel":40159},"https://threejs.org/docs/index.html?q=fog#api/en/scenes/FogExp2",[1120],"FogExp2"," in your scene.",[476,40163,40165],{"id":40164},"custom-geometry","Custom Geometry",[586,40167,40168],{},"You can use custom geometry by adding it as a child.",[598,40170,40173],{"className":600,"code":40171,"highlights":40172,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Ocean } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CSuspense>\n      \u003COcean>\n        \u003CTresCircleGeometry :args=\"[50, 16]\" />\n      \u003C/Ocean>\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n",[680,762,772,777],[590,40174,40175,40195,40213,40232,40240,40244,40252,40260,40268,40277,40306,40315,40323,40331],{"__ignoreMap":548},[609,40176,40177,40179,40181,40183,40185,40187,40189,40191,40193],{"class":611,"line":549},[609,40178,615],{"class":614},[609,40180,619],{"class":618},[609,40182,623],{"class":622},[609,40184,626],{"class":622},[609,40186,629],{"class":614},[609,40188,632],{"class":614},[609,40190,636],{"class":635},[609,40192,632],{"class":614},[609,40194,641],{"class":614},[609,40196,40197,40199,40201,40203,40205,40207,40209,40211],{"class":611,"line":550},[609,40198,649],{"class":648},[609,40200,652],{"class":614},[609,40202,687],{"class":655},[609,40204,665],{"class":614},[609,40206,668],{"class":648},[609,40208,671],{"class":614},[609,40210,696],{"class":635},[609,40212,677],{"class":614},[609,40214,40216,40218,40220,40222,40224,40226,40228,40230],{"class":40215,"line":680},[611,645],[609,40217,649],{"class":648},[609,40219,652],{"class":614},[609,40221,40051],{"class":655},[609,40223,665],{"class":614},[609,40225,668],{"class":648},[609,40227,671],{"class":614},[609,40229,674],{"class":635},[609,40231,677],{"class":614},[609,40233,40234,40236,40238],{"class":611,"line":701},[609,40235,704],{"class":614},[609,40237,619],{"class":618},[609,40239,641],{"class":614},[609,40241,40242],{"class":611,"line":711},[609,40243,714],{"emptyLinePlaceholder":566},[609,40245,40246,40248,40250],{"class":611,"line":717},[609,40247,615],{"class":614},[609,40249,722],{"class":618},[609,40251,641],{"class":614},[609,40253,40254,40256,40258],{"class":611,"line":727},[609,40255,730],{"class":614},[609,40257,733],{"class":618},[609,40259,641],{"class":614},[609,40261,40262,40264,40266],{"class":611,"line":750},[609,40263,753],{"class":614},[609,40265,15941],{"class":618},[609,40267,641],{"class":614},[609,40269,40271,40273,40275],{"class":40270,"line":762},[611,645],[609,40272,829],{"class":614},[609,40274,367],{"class":618},[609,40276,641],{"class":614},[609,40278,40280,40282,40284,40286,40288,40290,40292,40294,40296,40298,40300,40302,40304],{"class":40279,"line":772},[611,645],[609,40281,840],{"class":614},[609,40283,4031],{"class":618},[609,40285,785],{"class":614},[609,40287,1993],{"class":622},[609,40289,629],{"class":614},[609,40291,632],{"class":614},[609,40293,1470],{"class":614},[609,40295,4601],{"class":795},[609,40297,1475],{"class":614},[609,40299,30773],{"class":795},[609,40301,1485],{"class":614},[609,40303,632],{"class":614},[609,40305,759],{"class":614},[609,40307,40309,40311,40313],{"class":40308,"line":777},[611,645],[609,40310,861],{"class":614},[609,40312,367],{"class":618},[609,40314,641],{"class":614},[609,40316,40317,40319,40321],{"class":611,"line":803},[609,40318,871],{"class":614},[609,40320,15941],{"class":618},[609,40322,641],{"class":614},[609,40324,40325,40327,40329],{"class":611,"line":603},[609,40326,881],{"class":614},[609,40328,733],{"class":618},[609,40330,641],{"class":614},[609,40332,40333,40335,40337],{"class":611,"line":826},[609,40334,704],{"class":614},[609,40336,722],{"class":618},[609,40338,641],{"class":614},[476,40340,898],{"id":897},[40342,40343,40344],"prose-tip",{},[586,40345,40346],{},"Props marked with ✅ support reactive changes at runtime. Props marked with ❌ are only read at construction time and cannot be changed after the component is mounted.",[903,40348,40349,40363],{},[906,40350,40351],{},[909,40352,40353,40355,40357,40359],{},[912,40354,914],{"align":973},[912,40356,917],{"align":973},[912,40358,920],{},[912,40360,40362],{"align":40361},"center","Reactive",[922,40364,40365,40382,40398,40417,40434,40451,40468,40485,40500,40516,40532,40547],{},[909,40366,40367,40372,40375,40379],{},[927,40368,40369],{"align":973},[1677,40370,40371],{},"textureWidth",[927,40373,40374],{"align":973},"Width of the mirror texture",[927,40376,40377],{},[590,40378,35004],{},[927,40380,40381],{"align":40361},"❌",[909,40383,40384,40389,40392,40396],{},[927,40385,40386],{"align":973},[1677,40387,40388],{},"textureHeight",[927,40390,40391],{"align":973},"Height of the mirror texture",[927,40393,40394],{},[590,40395,35004],{},[927,40397,40381],{"align":40361},[909,40399,40400,40405,40408,40415],{},[927,40401,40402],{"align":973},[1677,40403,40404],{},"waterNormals",[927,40406,40407],{"align":973},"URL of the water normal texture",[927,40409,40410],{},[1116,40411,40414],{"href":40412,"rel":40413},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/water-normals/Water_1_M_Normal.jpg",[1120],"Water_1_M_Normal.jpg",[927,40416,40381],{"align":40361},[909,40418,40419,40424,40427,40432],{},[927,40420,40421],{"align":973},[1677,40422,40423],{},"sunDirection",[927,40425,40426],{"align":973},"Sun direction to be reflected on the water",[927,40428,40429],{},[590,40430,40431],{},"Vector3(0,0,0)",[927,40433,40381],{"align":40361},[909,40435,40436,40441,40444,40448],{},[927,40437,40438],{"align":973},[1677,40439,40440],{},"sunColor",[927,40442,40443],{"align":973},"Sun color to be reflected on the water",[927,40445,40446],{},[590,40447,39591],{},[927,40449,40450],{"align":40361},"✅",[909,40452,40453,40458,40461,40466],{},[927,40454,40455],{"align":973},[1677,40456,40457],{},"waterColor",[927,40459,40460],{"align":973},"Water color",[927,40462,40463],{},[590,40464,40465],{},"0x001e0f",[927,40467,40450],{"align":40361},[909,40469,40470,40475,40478,40483],{},[927,40471,40472],{"align":973},[1677,40473,40474],{},"distortionScale",[927,40476,40477],{"align":973},"Distortion scale on reflected objects",[927,40479,40480],{},[590,40481,40482],{},"3.7",[927,40484,40450],{"align":40361},[909,40486,40487,40491,40494,40498],{},[927,40488,40489],{"align":973},[1677,40490,11182],{},[927,40492,40493],{"align":973},"Size of the water normals",[927,40495,40496],{},[590,40497,1897],{},[927,40499,40450],{"align":40361},[909,40501,40502,40507,40510,40514],{},[927,40503,40504],{"align":973},[1677,40505,40506],{},"clipBias",[927,40508,40509],{"align":973},"Clip bias for the render target",[927,40511,40512],{},[590,40513,7211],{},[927,40515,40381],{"align":40361},[909,40517,40518,40523,40526,40530],{},[927,40519,40520],{"align":973},[1677,40521,40522],{},"alpha",[927,40524,40525],{"align":973},"Alpha transparency of the water",[927,40527,40528],{},[590,40529,7089],{},[927,40531,40450],{"align":40361},[909,40533,40534,40538,40541,40545],{},[927,40535,40536],{"align":973},[1677,40537,20919],{},[927,40539,40540],{"align":973},"Which side of the mesh renders the water",[927,40542,40543],{},[590,40544,22146],{},[927,40546,40381],{"align":40361},[909,40548,40549,40553,40556,40560],{},[927,40550,40551],{"align":973},[1677,40552,3487],{},[927,40554,40555],{"align":973},"Animation speed multiplier applied to the wave animation. Higher values make the water animate faster.",[927,40557,40558],{},[590,40559,1897],{},[927,40561,40450],{"align":40361},[1303,40563,40564],{},"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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":548,"searchDepth":549,"depth":550,"links":40566},[40567,40571,40572],{"id":596,"depth":550,"text":15,"children":40568},[40569,40570],{"id":40133,"depth":680,"text":40134},{"id":34519,"depth":680,"text":40146},{"id":40164,"depth":550,"text":40165},{"id":897,"depth":550,"text":898},"Wrapper for the Three.js Water add-on with sky reflection support.",{},{"title":367,"description":40573},"H6l4rOaHY0GADZIJpKUedqEaYTaMVIQ_5pXk41qxwJU",{"id":40578,"title":371,"body":40579,"description":41619,"extension":563,"links":564,"meta":41620,"navigation":566,"path":372,"seo":41621,"stem":373,"__hash__":41622},"docs/2.api/8.staging/precipitation.md",{"type":473,"value":40580,"toc":41611},[40581,40586,40592,40594,40600,40757,40761,40764,40971,40975,40978,41183,41187,41190,41436,41439,41444,41446,41609],[580,40582,40583],{},[40584,40585],"staging-precipitation",{},[586,40587,40588,40591],{},[590,40589,40590],{},"\u003CPrecipitation />"," is a fully flexible component that renders an infinite particle flow, It comes with several props that allow you customize it to create different effects like precipitation, snow, waterfall, beams, etc.",[476,40593,15],{"id":596},[586,40595,40596,40597,40599],{},"You can use ",[590,40598,40590],{}," component without passing any props, this will achieve a snowy effect, like the before example.",[598,40601,40604],{"className":600,"code":40602,"highlights":40603,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Precipitation } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" />\n    \u003CPrecipitation />\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[680,762],[590,40605,40606,40626,40644,40664,40672,40676,40684,40692,40724,40733,40741,40749],{"__ignoreMap":548},[609,40607,40608,40610,40612,40614,40616,40618,40620,40622,40624],{"class":611,"line":549},[609,40609,615],{"class":614},[609,40611,619],{"class":618},[609,40613,623],{"class":622},[609,40615,626],{"class":622},[609,40617,629],{"class":614},[609,40619,632],{"class":614},[609,40621,636],{"class":635},[609,40623,632],{"class":614},[609,40625,641],{"class":614},[609,40627,40628,40630,40632,40634,40636,40638,40640,40642],{"class":611,"line":550},[609,40629,649],{"class":648},[609,40631,652],{"class":614},[609,40633,687],{"class":655},[609,40635,665],{"class":614},[609,40637,668],{"class":648},[609,40639,671],{"class":614},[609,40641,696],{"class":635},[609,40643,677],{"class":614},[609,40645,40647,40649,40651,40654,40656,40658,40660,40662],{"class":40646,"line":680},[611,645],[609,40648,649],{"class":648},[609,40650,652],{"class":614},[609,40652,40653],{"class":655}," Precipitation",[609,40655,665],{"class":614},[609,40657,668],{"class":648},[609,40659,671],{"class":614},[609,40661,674],{"class":635},[609,40663,677],{"class":614},[609,40665,40666,40668,40670],{"class":611,"line":701},[609,40667,704],{"class":614},[609,40669,619],{"class":618},[609,40671,641],{"class":614},[609,40673,40674],{"class":611,"line":711},[609,40675,714],{"emptyLinePlaceholder":566},[609,40677,40678,40680,40682],{"class":611,"line":717},[609,40679,615],{"class":614},[609,40681,722],{"class":618},[609,40683,641],{"class":614},[609,40685,40686,40688,40690],{"class":611,"line":727},[609,40687,730],{"class":614},[609,40689,733],{"class":618},[609,40691,641],{"class":614},[609,40693,40694,40696,40698,40700,40702,40704,40706,40708,40710,40712,40714,40716,40718,40720,40722],{"class":611,"line":750},[609,40695,753],{"class":614},[609,40697,756],{"class":618},[609,40699,785],{"class":614},[609,40701,1463],{"class":622},[609,40703,629],{"class":614},[609,40705,632],{"class":614},[609,40707,1470],{"class":614},[609,40709,941],{"class":795},[609,40711,1475],{"class":614},[609,40713,4164],{"class":795},[609,40715,1475],{"class":614},[609,40717,2400],{"class":795},[609,40719,1485],{"class":614},[609,40721,632],{"class":614},[609,40723,759],{"class":614},[609,40725,40727,40729,40731],{"class":40726,"line":762},[611,645],[609,40728,753],{"class":614},[609,40730,371],{"class":618},[609,40732,759],{"class":614},[609,40734,40735,40737,40739],{"class":611,"line":772},[609,40736,753],{"class":614},[609,40738,3522],{"class":618},[609,40740,759],{"class":614},[609,40742,40743,40745,40747],{"class":611,"line":777},[609,40744,881],{"class":614},[609,40746,733],{"class":618},[609,40748,641],{"class":614},[609,40750,40751,40753,40755],{"class":611,"line":803},[609,40752,704],{"class":614},[609,40754,722],{"class":618},[609,40756,641],{"class":614},[7477,40758,40760],{"id":40759},"rain","Rain",[586,40762,40763],{},"By setting the randomness to 0, increase the speed  and reduce the count. You can easily achieve a more rainy effect.",[598,40765,40768],{"className":600,"code":40766,"highlights":40767,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Precipitation } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" />\n    \u003CPrecipitation\n      :count=\"2000\"\n      :speed=\"0.3\"\n      :randomness=\"0\"\n    />\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[680,762,772,777,803,603],[590,40769,40770,40790,40808,40827,40835,40839,40847,40855,40887,40895,40911,40926,40942,40947,40955,40963],{"__ignoreMap":548},[609,40771,40772,40774,40776,40778,40780,40782,40784,40786,40788],{"class":611,"line":549},[609,40773,615],{"class":614},[609,40775,619],{"class":618},[609,40777,623],{"class":622},[609,40779,626],{"class":622},[609,40781,629],{"class":614},[609,40783,632],{"class":614},[609,40785,636],{"class":635},[609,40787,632],{"class":614},[609,40789,641],{"class":614},[609,40791,40792,40794,40796,40798,40800,40802,40804,40806],{"class":611,"line":550},[609,40793,649],{"class":648},[609,40795,652],{"class":614},[609,40797,687],{"class":655},[609,40799,665],{"class":614},[609,40801,668],{"class":648},[609,40803,671],{"class":614},[609,40805,696],{"class":635},[609,40807,677],{"class":614},[609,40809,40811,40813,40815,40817,40819,40821,40823,40825],{"class":40810,"line":680},[611,645],[609,40812,649],{"class":648},[609,40814,652],{"class":614},[609,40816,40653],{"class":655},[609,40818,665],{"class":614},[609,40820,668],{"class":648},[609,40822,671],{"class":614},[609,40824,674],{"class":635},[609,40826,677],{"class":614},[609,40828,40829,40831,40833],{"class":611,"line":701},[609,40830,704],{"class":614},[609,40832,619],{"class":618},[609,40834,641],{"class":614},[609,40836,40837],{"class":611,"line":711},[609,40838,714],{"emptyLinePlaceholder":566},[609,40840,40841,40843,40845],{"class":611,"line":717},[609,40842,615],{"class":614},[609,40844,722],{"class":618},[609,40846,641],{"class":614},[609,40848,40849,40851,40853],{"class":611,"line":727},[609,40850,730],{"class":614},[609,40852,733],{"class":618},[609,40854,641],{"class":614},[609,40856,40857,40859,40861,40863,40865,40867,40869,40871,40873,40875,40877,40879,40881,40883,40885],{"class":611,"line":750},[609,40858,753],{"class":614},[609,40860,756],{"class":618},[609,40862,785],{"class":614},[609,40864,1463],{"class":622},[609,40866,629],{"class":614},[609,40868,632],{"class":614},[609,40870,1470],{"class":614},[609,40872,941],{"class":795},[609,40874,1475],{"class":614},[609,40876,4164],{"class":795},[609,40878,1475],{"class":614},[609,40880,2400],{"class":795},[609,40882,1485],{"class":614},[609,40884,632],{"class":614},[609,40886,759],{"class":614},[609,40888,40890,40892],{"class":40889,"line":762},[611,645],[609,40891,753],{"class":614},[609,40893,40894],{"class":618},"Precipitation\n",[609,40896,40898,40900,40902,40904,40906,40909],{"class":40897,"line":772},[611,645],[609,40899,5697],{"class":614},[609,40901,5104],{"class":622},[609,40903,629],{"class":614},[609,40905,632],{"class":614},[609,40907,40908],{"class":795},"2000",[609,40910,2991],{"class":614},[609,40912,40914,40916,40918,40920,40922,40924],{"class":40913,"line":777},[611,645],[609,40915,5697],{"class":614},[609,40917,3487],{"class":622},[609,40919,629],{"class":614},[609,40921,632],{"class":614},[609,40923,33144],{"class":795},[609,40925,2991],{"class":614},[609,40927,40929,40931,40934,40936,40938,40940],{"class":40928,"line":803},[611,645],[609,40930,5697],{"class":614},[609,40932,40933],{"class":622},"randomness",[609,40935,629],{"class":614},[609,40937,632],{"class":614},[609,40939,941],{"class":795},[609,40941,2991],{"class":614},[609,40943,40945],{"class":40944,"line":603},[611,645],[609,40946,11765],{"class":614},[609,40948,40949,40951,40953],{"class":611,"line":826},[609,40950,753],{"class":614},[609,40952,3522],{"class":618},[609,40954,759],{"class":614},[609,40956,40957,40959,40961],{"class":611,"line":837},[609,40958,881],{"class":614},[609,40960,733],{"class":618},[609,40962,641],{"class":614},[609,40964,40965,40967,40969],{"class":611,"line":848},[609,40966,704],{"class":614},[609,40968,722],{"class":618},[609,40970,641],{"class":614},[7477,40972,40974],{"id":40973},"storm","Storm",[586,40976,40977],{},"A storm effect? Easy just increase the randomness.",[598,40979,40982],{"className":600,"code":40980,"highlights":40981,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Precipitation } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" />\n    \u003CPrecipitation\n      :count=\"3000\"\n      :speed=\"0.5\"\n      :randomness=\"1.5\"\n    />\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[680,762,772,777,803,603],[590,40983,40984,41004,41022,41041,41049,41053,41061,41069,41101,41108,41124,41139,41154,41159,41167,41175],{"__ignoreMap":548},[609,40985,40986,40988,40990,40992,40994,40996,40998,41000,41002],{"class":611,"line":549},[609,40987,615],{"class":614},[609,40989,619],{"class":618},[609,40991,623],{"class":622},[609,40993,626],{"class":622},[609,40995,629],{"class":614},[609,40997,632],{"class":614},[609,40999,636],{"class":635},[609,41001,632],{"class":614},[609,41003,641],{"class":614},[609,41005,41006,41008,41010,41012,41014,41016,41018,41020],{"class":611,"line":550},[609,41007,649],{"class":648},[609,41009,652],{"class":614},[609,41011,687],{"class":655},[609,41013,665],{"class":614},[609,41015,668],{"class":648},[609,41017,671],{"class":614},[609,41019,696],{"class":635},[609,41021,677],{"class":614},[609,41023,41025,41027,41029,41031,41033,41035,41037,41039],{"class":41024,"line":680},[611,645],[609,41026,649],{"class":648},[609,41028,652],{"class":614},[609,41030,40653],{"class":655},[609,41032,665],{"class":614},[609,41034,668],{"class":648},[609,41036,671],{"class":614},[609,41038,674],{"class":635},[609,41040,677],{"class":614},[609,41042,41043,41045,41047],{"class":611,"line":701},[609,41044,704],{"class":614},[609,41046,619],{"class":618},[609,41048,641],{"class":614},[609,41050,41051],{"class":611,"line":711},[609,41052,714],{"emptyLinePlaceholder":566},[609,41054,41055,41057,41059],{"class":611,"line":717},[609,41056,615],{"class":614},[609,41058,722],{"class":618},[609,41060,641],{"class":614},[609,41062,41063,41065,41067],{"class":611,"line":727},[609,41064,730],{"class":614},[609,41066,733],{"class":618},[609,41068,641],{"class":614},[609,41070,41071,41073,41075,41077,41079,41081,41083,41085,41087,41089,41091,41093,41095,41097,41099],{"class":611,"line":750},[609,41072,753],{"class":614},[609,41074,756],{"class":618},[609,41076,785],{"class":614},[609,41078,1463],{"class":622},[609,41080,629],{"class":614},[609,41082,632],{"class":614},[609,41084,1470],{"class":614},[609,41086,941],{"class":795},[609,41088,1475],{"class":614},[609,41090,4164],{"class":795},[609,41092,1475],{"class":614},[609,41094,2400],{"class":795},[609,41096,1485],{"class":614},[609,41098,632],{"class":614},[609,41100,759],{"class":614},[609,41102,41104,41106],{"class":41103,"line":762},[611,645],[609,41105,753],{"class":614},[609,41107,40894],{"class":618},[609,41109,41111,41113,41115,41117,41119,41122],{"class":41110,"line":772},[611,645],[609,41112,5697],{"class":614},[609,41114,5104],{"class":622},[609,41116,629],{"class":614},[609,41118,632],{"class":614},[609,41120,41121],{"class":795},"3000",[609,41123,2991],{"class":614},[609,41125,41127,41129,41131,41133,41135,41137],{"class":41126,"line":777},[611,645],[609,41128,5697],{"class":614},[609,41130,3487],{"class":622},[609,41132,629],{"class":614},[609,41134,632],{"class":614},[609,41136,1517],{"class":795},[609,41138,2991],{"class":614},[609,41140,41142,41144,41146,41148,41150,41152],{"class":41141,"line":803},[611,645],[609,41143,5697],{"class":614},[609,41145,40933],{"class":622},[609,41147,629],{"class":614},[609,41149,632],{"class":614},[609,41151,10828],{"class":795},[609,41153,2991],{"class":614},[609,41155,41157],{"class":41156,"line":603},[611,645],[609,41158,11765],{"class":614},[609,41160,41161,41163,41165],{"class":611,"line":826},[609,41162,753],{"class":614},[609,41164,3522],{"class":618},[609,41166,759],{"class":614},[609,41168,41169,41171,41173],{"class":611,"line":837},[609,41170,881],{"class":614},[609,41172,733],{"class":618},[609,41174,641],{"class":614},[609,41176,41177,41179,41181],{"class":611,"line":848},[609,41178,704],{"class":614},[609,41180,722],{"class":618},[609,41182,641],{"class":614},[7477,41184,41186],{"id":41185},"beam","Beam",[586,41188,41189],{},"What about an infinite beam? Just set the area, to the axis that you need constrain.",[598,41191,41194],{"className":600,"code":41192,"highlights":41193,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Precipitation } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" />\n    \u003CPrecipitation\n      :area=\"[0.5, 0.5, 20]\"\n      :count=\"1000\"\n      :speed=\"0.2\"\n      :size=\"0.3\"\n      color=\"#00ff00\"\n    />\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[680,762,772,777,803,603,826,837],[590,41195,41196,41216,41234,41253,41261,41265,41273,41281,41313,41320,41348,41363,41378,41393,41407,41412,41420,41428],{"__ignoreMap":548},[609,41197,41198,41200,41202,41204,41206,41208,41210,41212,41214],{"class":611,"line":549},[609,41199,615],{"class":614},[609,41201,619],{"class":618},[609,41203,623],{"class":622},[609,41205,626],{"class":622},[609,41207,629],{"class":614},[609,41209,632],{"class":614},[609,41211,636],{"class":635},[609,41213,632],{"class":614},[609,41215,641],{"class":614},[609,41217,41218,41220,41222,41224,41226,41228,41230,41232],{"class":611,"line":550},[609,41219,649],{"class":648},[609,41221,652],{"class":614},[609,41223,687],{"class":655},[609,41225,665],{"class":614},[609,41227,668],{"class":648},[609,41229,671],{"class":614},[609,41231,696],{"class":635},[609,41233,677],{"class":614},[609,41235,41237,41239,41241,41243,41245,41247,41249,41251],{"class":41236,"line":680},[611,645],[609,41238,649],{"class":648},[609,41240,652],{"class":614},[609,41242,40653],{"class":655},[609,41244,665],{"class":614},[609,41246,668],{"class":648},[609,41248,671],{"class":614},[609,41250,674],{"class":635},[609,41252,677],{"class":614},[609,41254,41255,41257,41259],{"class":611,"line":701},[609,41256,704],{"class":614},[609,41258,619],{"class":618},[609,41260,641],{"class":614},[609,41262,41263],{"class":611,"line":711},[609,41264,714],{"emptyLinePlaceholder":566},[609,41266,41267,41269,41271],{"class":611,"line":717},[609,41268,615],{"class":614},[609,41270,722],{"class":618},[609,41272,641],{"class":614},[609,41274,41275,41277,41279],{"class":611,"line":727},[609,41276,730],{"class":614},[609,41278,733],{"class":618},[609,41280,641],{"class":614},[609,41282,41283,41285,41287,41289,41291,41293,41295,41297,41299,41301,41303,41305,41307,41309,41311],{"class":611,"line":750},[609,41284,753],{"class":614},[609,41286,756],{"class":618},[609,41288,785],{"class":614},[609,41290,1463],{"class":622},[609,41292,629],{"class":614},[609,41294,632],{"class":614},[609,41296,1470],{"class":614},[609,41298,941],{"class":795},[609,41300,1475],{"class":614},[609,41302,4164],{"class":795},[609,41304,1475],{"class":614},[609,41306,2400],{"class":795},[609,41308,1485],{"class":614},[609,41310,632],{"class":614},[609,41312,759],{"class":614},[609,41314,41316,41318],{"class":41315,"line":762},[611,645],[609,41317,753],{"class":614},[609,41319,40894],{"class":618},[609,41321,41323,41325,41328,41330,41332,41334,41336,41338,41340,41342,41344,41346],{"class":41322,"line":772},[611,645],[609,41324,5697],{"class":614},[609,41326,41327],{"class":622},"area",[609,41329,629],{"class":614},[609,41331,632],{"class":614},[609,41333,1470],{"class":614},[609,41335,1517],{"class":795},[609,41337,1475],{"class":614},[609,41339,1517],{"class":795},[609,41341,1475],{"class":614},[609,41343,24411],{"class":795},[609,41345,1485],{"class":614},[609,41347,2991],{"class":614},[609,41349,41351,41353,41355,41357,41359,41361],{"class":41350,"line":777},[611,645],[609,41352,5697],{"class":614},[609,41354,5104],{"class":622},[609,41356,629],{"class":614},[609,41358,632],{"class":614},[609,41360,5169],{"class":795},[609,41362,2991],{"class":614},[609,41364,41366,41368,41370,41372,41374,41376],{"class":41365,"line":803},[611,645],[609,41367,5697],{"class":614},[609,41369,3487],{"class":622},[609,41371,629],{"class":614},[609,41373,632],{"class":614},[609,41375,9041],{"class":795},[609,41377,2991],{"class":614},[609,41379,41381,41383,41385,41387,41389,41391],{"class":41380,"line":603},[611,645],[609,41382,5697],{"class":614},[609,41384,11182],{"class":622},[609,41386,629],{"class":614},[609,41388,632],{"class":614},[609,41390,33144],{"class":795},[609,41392,2991],{"class":614},[609,41394,41396,41398,41400,41402,41405],{"class":41395,"line":826},[611,645],[609,41397,24313],{"class":622},[609,41399,629],{"class":614},[609,41401,632],{"class":614},[609,41403,41404],{"class":635},"#00ff00",[609,41406,2991],{"class":614},[609,41408,41410],{"class":41409,"line":837},[611,645],[609,41411,11765],{"class":614},[609,41413,41414,41416,41418],{"class":611,"line":848},[609,41415,753],{"class":614},[609,41417,3522],{"class":618},[609,41419,759],{"class":614},[609,41421,41422,41424,41426],{"class":611,"line":858},[609,41423,881],{"class":614},[609,41425,733],{"class":618},[609,41427,641],{"class":614},[609,41429,41430,41432,41434],{"class":611,"line":604},[609,41431,704],{"class":614},[609,41433,722],{"class":618},[609,41435,641],{"class":614},[586,41437,41438],{},"You can create much more! ☔",[3729,41440,41441],{},[586,41442,41443],{},"Be careful with the performance this components render infinite particles in movement",[476,41445,898],{"id":897},[903,41447,41448,41458],{},[906,41449,41450],{},[909,41451,41452,41454,41456],{},[912,41453,914],{"align":973},[912,41455,917],{"align":973},[912,41457,920],{},[922,41459,41460,41471,41485,41496,41507,41519,41530,41541,41553,41564,41575,41586,41597],{},[909,41461,41462,41466,41469],{},[927,41463,41464],{"align":973},[1677,41465,11182],{},[927,41467,41468],{"align":973},"The size of the drops.",[927,41470,2207],{},[909,41472,41473,41477,41480],{},[927,41474,41475],{"align":973},[1677,41476,41327],{},[927,41478,41479],{"align":973},"The size of the precipitation area.",[927,41481,41482],{},[609,41483,41484],{},"10, 10, 20",[909,41486,41487,41491,41494],{},[927,41488,41489],{"align":973},[1677,41490,2504],{},[927,41492,41493],{"align":973},"The color of the drops.",[927,41495,39591],{},[909,41497,41498,41502,41505],{},[927,41499,41500],{"align":973},[1677,41501,14374],{},[927,41503,41504],{"align":973},"Color texture of the drops.",[927,41506,3156],{},[909,41508,41509,41514,41517],{},[927,41510,41511],{"align":973},[1677,41512,41513],{},"alphaMap",[927,41515,41516],{"align":973},"Alpha texture of the Drops.",[927,41518,3156],{},[909,41520,41521,41525,41528],{},[927,41522,41523],{"align":973},[1677,41524,33411],{},[927,41526,41527],{"align":973},"Enables the WebGL to know when not to render the pixel.",[927,41529,1911],{},[909,41531,41532,41536,41539],{},[927,41533,41534],{"align":973},[1677,41535,4865],{},[927,41537,41538],{"align":973},"Set the opacity of the drops.",[927,41540,18994],{},[909,41542,41543,41547,41550],{},[927,41544,41545],{"align":973},[1677,41546,5104],{},[927,41548,41549],{"align":973},"Number of drops.",[927,41551,41552],{},"5000",[909,41554,41555,41559,41562],{},[927,41556,41557],{"align":973},[1677,41558,3487],{},[927,41560,41561],{"align":973},"Drops speed.",[927,41563,2207],{},[909,41565,41566,41570,41573],{},[927,41567,41568],{"align":973},[1677,41569,40933],{},[927,41571,41572],{"align":973},"Add randomness to the drops.",[927,41574,1517],{},[909,41576,41577,41581,41584],{},[927,41578,41579],{"align":973},[1677,41580,4338],{},[927,41582,41583],{"align":973},"Whether should write to the depth buffer or not. drops.",[927,41585,937],{},[909,41587,41588,41592,41595],{},[927,41589,41590],{"align":973},[1677,41591,4877],{},[927,41593,41594],{"align":973},"Transparency on the drops texture",[927,41596,947],{},[909,41598,41599,41604,41607],{},[927,41600,41601],{"align":973},[1677,41602,41603],{},"sizeAttenuation",[927,41605,41606],{"align":973},"Keep the same size regardless distance. drops.",[927,41608,937],{},[1303,41610,1652],{},{"title":548,"searchDepth":549,"depth":550,"links":41612},[41613,41618],{"id":596,"depth":550,"text":15,"children":41614},[41615,41616,41617],{"id":40759,"depth":680,"text":40760},{"id":40973,"depth":680,"text":40974},{"id":41185,"depth":680,"text":41186},{"id":897,"depth":550,"text":898},"Flexible infinite particle flow for rain, snow, waterfall, and beam effects.",{},{"title":371,"description":41619},"oN0a-7Db4CfLOwRF8vcglYxi0o3twbiI7bqgn-6GqoY",{"id":41624,"title":375,"body":41625,"description":42035,"extension":563,"links":564,"meta":42036,"navigation":566,"path":376,"seo":42037,"stem":377,"__hash__":42038},"docs/2.api/8.staging/sky.md",{"type":473,"value":41626,"toc":42031},[41627,41632,41642,41644,41848,41850,42029],[580,41628,41629],{},[41630,41631],"staging-sky",{},[586,41633,41634,39981,41636,1122],{},[590,41635,40142],{},[1116,41637,39986,41640,39990],{"href":41638,"rel":41639},"https://threejs.org/examples/?q=sky#webgl_shaders_sky",[1120],[590,41641,375],{},[476,41643,15],{"id":596},[598,41645,41648],{"className":600,"code":41646,"highlights":41647,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls, Sky } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas :tone-mapping-exposure=\"0.25\">\n    \u003CTresPerspectiveCamera :position=\"[0, 15, 200]\" />\n    \u003CSky />\n    \u003COrbitControls />\n    \u003CTresGridHelper :args=\"[1000, 20]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n\n",[550,762],[590,41649,41650,41670,41694,41712,41720,41724,41732,41753,41787,41796,41804,41832,41840],{"__ignoreMap":548},[609,41651,41652,41654,41656,41658,41660,41662,41664,41666,41668],{"class":611,"line":549},[609,41653,615],{"class":614},[609,41655,619],{"class":618},[609,41657,623],{"class":622},[609,41659,626],{"class":622},[609,41661,629],{"class":614},[609,41663,632],{"class":614},[609,41665,636],{"class":635},[609,41667,632],{"class":614},[609,41669,641],{"class":614},[609,41671,41673,41675,41677,41679,41681,41684,41686,41688,41690,41692],{"class":41672,"line":550},[611,645],[609,41674,649],{"class":648},[609,41676,652],{"class":614},[609,41678,662],{"class":655},[609,41680,659],{"class":614},[609,41682,41683],{"class":655}," Sky",[609,41685,665],{"class":614},[609,41687,668],{"class":648},[609,41689,671],{"class":614},[609,41691,674],{"class":635},[609,41693,677],{"class":614},[609,41695,41696,41698,41700,41702,41704,41706,41708,41710],{"class":611,"line":680},[609,41697,649],{"class":648},[609,41699,652],{"class":614},[609,41701,687],{"class":655},[609,41703,665],{"class":614},[609,41705,668],{"class":648},[609,41707,671],{"class":614},[609,41709,696],{"class":635},[609,41711,677],{"class":614},[609,41713,41714,41716,41718],{"class":611,"line":701},[609,41715,704],{"class":614},[609,41717,619],{"class":618},[609,41719,641],{"class":614},[609,41721,41722],{"class":611,"line":711},[609,41723,714],{"emptyLinePlaceholder":566},[609,41725,41726,41728,41730],{"class":611,"line":717},[609,41727,615],{"class":614},[609,41729,722],{"class":618},[609,41731,641],{"class":614},[609,41733,41734,41736,41738,41740,41743,41745,41747,41749,41751],{"class":611,"line":727},[609,41735,730],{"class":614},[609,41737,733],{"class":618},[609,41739,785],{"class":614},[609,41741,41742],{"class":622},"tone-mapping-exposure",[609,41744,629],{"class":614},[609,41746,632],{"class":614},[609,41748,7045],{"class":795},[609,41750,632],{"class":614},[609,41752,641],{"class":614},[609,41754,41755,41757,41759,41761,41763,41765,41767,41769,41771,41773,41776,41778,41781,41783,41785],{"class":611,"line":750},[609,41756,753],{"class":614},[609,41758,756],{"class":618},[609,41760,785],{"class":614},[609,41762,1463],{"class":622},[609,41764,629],{"class":614},[609,41766,632],{"class":614},[609,41768,1470],{"class":614},[609,41770,941],{"class":795},[609,41772,1475],{"class":614},[609,41774,41775],{"class":795},"15",[609,41777,1475],{"class":614},[609,41779,41780],{"class":795},"200",[609,41782,1485],{"class":614},[609,41784,632],{"class":614},[609,41786,759],{"class":614},[609,41788,41790,41792,41794],{"class":41789,"line":762},[611,645],[609,41791,753],{"class":614},[609,41793,375],{"class":618},[609,41795,759],{"class":614},[609,41797,41798,41800,41802],{"class":611,"line":772},[609,41799,753],{"class":614},[609,41801,767],{"class":618},[609,41803,759],{"class":614},[609,41805,41806,41808,41810,41812,41814,41816,41818,41820,41822,41824,41826,41828,41830],{"class":611,"line":777},[609,41807,753],{"class":614},[609,41809,3071],{"class":618},[609,41811,785],{"class":614},[609,41813,1993],{"class":622},[609,41815,629],{"class":614},[609,41817,632],{"class":614},[609,41819,1470],{"class":614},[609,41821,5169],{"class":795},[609,41823,1475],{"class":614},[609,41825,24411],{"class":795},[609,41827,1485],{"class":614},[609,41829,632],{"class":614},[609,41831,759],{"class":614},[609,41833,41834,41836,41838],{"class":611,"line":803},[609,41835,881],{"class":614},[609,41837,733],{"class":618},[609,41839,641],{"class":614},[609,41841,41842,41844,41846],{"class":611,"line":603},[609,41843,704],{"class":614},[609,41845,722],{"class":618},[609,41847,641],{"class":614},[476,41849,898],{"id":897},[903,41851,41852,41866],{},[906,41853,41854],{},[909,41855,41856,41858,41860,41862,41864],{},[912,41857,3122],{"align":973},[912,41859,11906],{"align":973},[912,41861,917],{"align":973},[912,41863,920],{"align":973},[912,41865,27939],{"align":973},[922,41867,41868,41889,41913,41939,41962,41982,42009],{},[909,41869,41870,41875,41879,41882,41887],{},[927,41871,41872],{"align":973},[1677,41873,41874],{},"turbidity",[927,41876,41877],{"align":973},[590,41878,2541],{},[927,41880,41881],{"align":973},"Haziness",[927,41883,41884],{"align":973},[590,41885,41886],{},"3.4",[927,41888,39932],{"align":973},[909,41890,41891,41896,41900,41907,41911],{},[927,41892,41893],{"align":973},[1677,41894,41895],{},"rayleigh",[927,41897,41898],{"align":973},[590,41899,2541],{},[927,41901,41902],{"align":973},[1116,41903,41906],{"href":41904,"rel":41905},"https://en.wikipedia.org/wiki/Rayleigh_scattering",[1120],"Rayleigh scattering",[927,41908,41909],{"align":973},[590,41910,4164],{},[927,41912,39932],{"align":973},[909,41914,41915,41920,41924,41932,41937],{},[927,41916,41917],{"align":973},[1677,41918,41919],{},"mieCoefficient",[927,41921,41922],{"align":973},[590,41923,2541],{},[927,41925,41926,41931],{"align":973},[1116,41927,41930],{"href":41928,"rel":41929},"https://en.wikipedia.org/wiki/Mie_scattering",[1120],"Mie scattering"," amount",[927,41933,41934],{"align":973},[590,41935,41936],{},"0.005",[927,41938,39932],{"align":973},[909,41940,41941,41946,41950,41956,41960],{},[927,41942,41943],{"align":973},[1677,41944,41945],{},"mieDirectionalG",[927,41947,41948],{"align":973},[590,41949,2541],{},[927,41951,41952,41955],{"align":973},[1116,41953,41930],{"href":41928,"rel":41954},[1120]," direction",[927,41957,41958],{"align":973},[590,41959,34722],{},[927,41961,39932],{"align":973},[909,41963,41964,41969,41973,41976,41980],{},[927,41965,41966],{"align":973},[1677,41967,41968],{},"elevation",[927,41970,41971],{"align":973},[590,41972,2541],{},[927,41974,41975],{"align":973},"Sun's elevation from the horizon, in degrees",[927,41977,41978],{"align":973},[590,41979,23717],{},[927,41981,39932],{"align":973},[909,41983,41984,41989,41993,42002,42007],{},[927,41985,41986],{"align":973},[1677,41987,41988],{},"azimuth",[927,41990,41991],{"align":973},[590,41992,2541],{},[927,41994,41995,41996,42001],{"align":973},"Sun's ",[1116,41997,42000],{"href":41998,"rel":41999},"https://en.wikipedia.org/wiki/Solar_azimuth_angle",[1120],"azimuth angle",", in degrees – its horizontal coordinate on the horizon",[927,42003,42004],{"align":973},[590,42005,42006],{},"180",[927,42008,39932],{"align":973},[909,42010,42011,42015,42019,42022,42027],{},[927,42012,42013],{"align":973},[1677,42014,6949],{},[927,42016,42017],{"align":973},[590,42018,2541],{},[927,42020,42021],{"align":973},"Sky box scale",[927,42023,42024],{"align":973},[590,42025,42026],{},"450000",[927,42028,39932],{"align":973},[1303,42030,1652],{},{"title":548,"searchDepth":549,"depth":550,"links":42032},[42033,42034],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},"Wrapper for the Three.js Sky add-on with sun position controls.",{},{"title":375,"description":42035},"z9xEmwuzWS7Jr3s3_7eT9BeV1McRoKp3ZlWGZa_0yWI",{"id":42040,"title":379,"body":42041,"description":42446,"extension":563,"links":564,"meta":42447,"navigation":566,"path":380,"seo":42448,"stem":381,"__hash__":42449},"docs/2.api/8.staging/smoke.md",{"type":473,"value":42042,"toc":42440},[42043,42048,42054,42056,42061,42066,42236,42238,42430,42434,42438],[2562,42044,42045],{},[42046,42047],"staging-smoke",{},[586,42049,42050,42053],{},[590,42051,42052],{},"\u003CSmoke />"," is a component that renders a smoke in your scene. It is an abstraction that use a combination of textures, transparency and some calculation, to create a beautiful  smoke - cloud - fog effect",[476,42055,15],{"id":596},[3729,42057,42058],{},[586,42059,42060],{},"Smoke component comes with a default texture abstraction it needs to be wrapped by a Suspense component",[586,42062,40596,42063,42065],{},[590,42064,42052],{}," component without passing any props, but still if you want you can tweak the props to find the best setup for you",[598,42067,42069],{"className":600,"code":42068,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Smoke } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" />\n    \u003CSuspense>\n      \u003CSmoke />\n    \u003C/Suspense>\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[590,42070,42071,42091,42109,42128,42136,42140,42148,42156,42188,42196,42204,42212,42220,42228],{"__ignoreMap":548},[609,42072,42073,42075,42077,42079,42081,42083,42085,42087,42089],{"class":611,"line":549},[609,42074,615],{"class":614},[609,42076,619],{"class":618},[609,42078,623],{"class":622},[609,42080,626],{"class":622},[609,42082,629],{"class":614},[609,42084,632],{"class":614},[609,42086,636],{"class":635},[609,42088,632],{"class":614},[609,42090,641],{"class":614},[609,42092,42093,42095,42097,42099,42101,42103,42105,42107],{"class":611,"line":550},[609,42094,649],{"class":648},[609,42096,652],{"class":614},[609,42098,687],{"class":655},[609,42100,665],{"class":614},[609,42102,668],{"class":648},[609,42104,671],{"class":614},[609,42106,696],{"class":635},[609,42108,677],{"class":614},[609,42110,42111,42113,42115,42118,42120,42122,42124,42126],{"class":611,"line":680},[609,42112,649],{"class":648},[609,42114,652],{"class":614},[609,42116,42117],{"class":655}," Smoke",[609,42119,665],{"class":614},[609,42121,668],{"class":648},[609,42123,671],{"class":614},[609,42125,674],{"class":635},[609,42127,677],{"class":614},[609,42129,42130,42132,42134],{"class":611,"line":701},[609,42131,704],{"class":614},[609,42133,619],{"class":618},[609,42135,641],{"class":614},[609,42137,42138],{"class":611,"line":711},[609,42139,714],{"emptyLinePlaceholder":566},[609,42141,42142,42144,42146],{"class":611,"line":717},[609,42143,615],{"class":614},[609,42145,722],{"class":618},[609,42147,641],{"class":614},[609,42149,42150,42152,42154],{"class":611,"line":727},[609,42151,730],{"class":614},[609,42153,733],{"class":618},[609,42155,641],{"class":614},[609,42157,42158,42160,42162,42164,42166,42168,42170,42172,42174,42176,42178,42180,42182,42184,42186],{"class":611,"line":750},[609,42159,753],{"class":614},[609,42161,756],{"class":618},[609,42163,785],{"class":614},[609,42165,1463],{"class":622},[609,42167,629],{"class":614},[609,42169,632],{"class":614},[609,42171,1470],{"class":614},[609,42173,941],{"class":795},[609,42175,1475],{"class":614},[609,42177,4164],{"class":795},[609,42179,1475],{"class":614},[609,42181,2400],{"class":795},[609,42183,1485],{"class":614},[609,42185,632],{"class":614},[609,42187,759],{"class":614},[609,42189,42190,42192,42194],{"class":611,"line":762},[609,42191,753],{"class":614},[609,42193,15941],{"class":618},[609,42195,641],{"class":614},[609,42197,42198,42200,42202],{"class":611,"line":772},[609,42199,829],{"class":614},[609,42201,379],{"class":618},[609,42203,759],{"class":614},[609,42205,42206,42208,42210],{"class":611,"line":777},[609,42207,871],{"class":614},[609,42209,15941],{"class":618},[609,42211,641],{"class":614},[609,42213,42214,42216,42218],{"class":611,"line":803},[609,42215,753],{"class":614},[609,42217,3522],{"class":618},[609,42219,759],{"class":614},[609,42221,42222,42224,42226],{"class":611,"line":603},[609,42223,881],{"class":614},[609,42225,733],{"class":618},[609,42227,641],{"class":614},[609,42229,42230,42232,42234],{"class":611,"line":826},[609,42231,704],{"class":614},[609,42233,722],{"class":618},[609,42235,641],{"class":614},[476,42237,898],{"id":897},[903,42239,42240,42252],{},[906,42241,42242],{},[909,42243,42244,42246,42248,42250],{},[912,42245,3122],{"align":973},[912,42247,11906],{"align":973},[912,42249,917],{"align":973},[912,42251,920],{"align":973},[922,42253,42254,42272,42289,42306,42323,42340,42360,42378,42396,42414],{},[909,42255,42256,42260,42264,42267],{},[927,42257,42258],{"align":973},[1677,42259,2504],{},[927,42261,42262],{"align":973},[590,42263,2519],{},[927,42265,42266],{"align":973},"The color of the smoke.",[927,42268,42269],{"align":973},[590,42270,42271],{},"'#ffffff'",[909,42273,42274,42278,42282,42285],{},[927,42275,42276],{"align":973},[1677,42277,4865],{},[927,42279,42280],{"align":973},[590,42281,2541],{},[927,42283,42284],{"align":973},"The strength of the opacity.",[927,42286,42287],{"align":973},[590,42288,1517],{},[909,42290,42291,42295,42299,42302],{},[927,42292,42293],{"align":973},[1677,42294,3487],{},[927,42296,42297],{"align":973},[590,42298,2541],{},[927,42300,42301],{"align":973},"The rotation speed of the smoke.",[927,42303,42304],{"align":973},[590,42305,33157],{},[909,42307,42308,42312,42316,42319],{},[927,42309,42310],{"align":973},[1677,42311,6362],{},[927,42313,42314],{"align":973},[590,42315,2541],{},[927,42317,42318],{"align":973},"The base depth.",[927,42320,42321],{"align":973},[590,42322,33144],{},[909,42324,42325,42329,42333,42336],{},[927,42326,42327],{"align":973},[1677,42328,24299],{},[927,42330,42331],{"align":973},[590,42332,2541],{},[927,42334,42335],{"align":973},"The number of smoke to render.",[927,42337,42338],{"align":973},[590,42339,1482],{},[909,42341,42342,42346,42350,42353],{},[927,42343,42344],{"align":973},[1677,42345,14381],{},[927,42347,42348],{"align":973},[590,42349,12043],{},[927,42351,42352],{"align":973},"The texture of the smoke.",[927,42354,42355],{"align":973},[1116,42356,42359],{"href":42357,"rel":42358},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/clouds/defaultCloud.png",[1120],"link",[909,42361,42362,42367,42371,42374],{},[927,42363,42364],{"align":973},[1677,42365,42366],{},"depthTest",[927,42368,42369],{"align":973},[590,42370,11963],{},[927,42372,42373],{"align":973},"The depthTest.",[927,42375,42376],{"align":973},[590,42377,947],{},[909,42379,42380,42385,42389,42392],{},[927,42381,42382],{"align":973},[1677,42383,42384],{},"spreadY",[927,42386,42387],{"align":973},[590,42388,2541],{},[927,42390,42391],{"align":973},"Spread on the Y axis.",[927,42393,42394],{"align":973},[590,42395,2207],{},[909,42397,42398,42403,42407,42410],{},[927,42399,42400],{"align":973},[1677,42401,42402],{},"spreadX",[927,42404,42405],{"align":973},[590,42406,2541],{},[927,42408,42409],{"align":973},"Spread on the X axis.",[927,42411,42412],{"align":973},[590,42413,1517],{},[909,42415,42416,42420,42424,42426],{},[927,42417,42418],{"align":973},[1677,42419,788],{},[927,42421,42422],{"align":973},[590,42423,2541],{},[927,42425,788],{"align":973},[927,42427,42428],{"align":973},[590,42429,1897],{},[7477,42431,42433],{"id":42432},"default-texture","Default texture",[586,42435,42436],{},[3271,42437],{"alt":42433,"src":42357},[1303,42439,1652],{},{"title":548,"searchDepth":549,"depth":550,"links":42441},[42442,42443],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898,"children":42444},[42445],{"id":42432,"depth":680,"text":42433},"Beautiful smoke, cloud, and fog effect using textures and transparency.",{},{"title":379,"description":42446},"vwnSNX06jUUY3lZUYaNYvnoK84rsl-FxeFCuDKNEtR0",{"id":42451,"title":383,"body":42452,"description":44353,"extension":563,"links":564,"meta":44354,"navigation":566,"path":384,"seo":44355,"stem":385,"__hash__":44356},"docs/2.api/8.staging/sparkles.md",{"type":473,"value":42453,"toc":44344},[42454,42460,42462,42466,42647,42651,42654,42946,42950,42968,42995,43001,43018,43319,43323,43339,43368,43375,43702,43704,44341],[586,42455,42456,42459],{},[590,42457,42458],{},"\u003CSparkles />"," makes sparkles on your geometry's vertices – optionally guided by a directional light.",[476,42461,15],{"id":596},[7477,42463,42465],{"id":42464},"basic","Basic",[598,42467,42470],{"className":600,"code":42468,"highlights":42469,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Sparkles } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" />\n    \u003CTresMesh>\n      \u003CTresSphereGeometry />\n      \u003CSparkles />\n    \u003C/TresMesh>\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[680,777],[590,42471,42472,42492,42510,42530,42538,42542,42550,42558,42590,42598,42606,42615,42623,42631,42639],{"__ignoreMap":548},[609,42473,42474,42476,42478,42480,42482,42484,42486,42488,42490],{"class":611,"line":549},[609,42475,615],{"class":614},[609,42477,619],{"class":618},[609,42479,623],{"class":622},[609,42481,626],{"class":622},[609,42483,629],{"class":614},[609,42485,632],{"class":614},[609,42487,636],{"class":635},[609,42489,632],{"class":614},[609,42491,641],{"class":614},[609,42493,42494,42496,42498,42500,42502,42504,42506,42508],{"class":611,"line":550},[609,42495,649],{"class":648},[609,42497,652],{"class":614},[609,42499,687],{"class":655},[609,42501,665],{"class":614},[609,42503,668],{"class":648},[609,42505,671],{"class":614},[609,42507,696],{"class":635},[609,42509,677],{"class":614},[609,42511,42513,42515,42517,42520,42522,42524,42526,42528],{"class":42512,"line":680},[611,645],[609,42514,649],{"class":648},[609,42516,652],{"class":614},[609,42518,42519],{"class":655}," Sparkles",[609,42521,665],{"class":614},[609,42523,668],{"class":648},[609,42525,671],{"class":614},[609,42527,674],{"class":635},[609,42529,677],{"class":614},[609,42531,42532,42534,42536],{"class":611,"line":701},[609,42533,704],{"class":614},[609,42535,619],{"class":618},[609,42537,641],{"class":614},[609,42539,42540],{"class":611,"line":711},[609,42541,714],{"emptyLinePlaceholder":566},[609,42543,42544,42546,42548],{"class":611,"line":717},[609,42545,615],{"class":614},[609,42547,722],{"class":618},[609,42549,641],{"class":614},[609,42551,42552,42554,42556],{"class":611,"line":727},[609,42553,730],{"class":614},[609,42555,733],{"class":618},[609,42557,641],{"class":614},[609,42559,42560,42562,42564,42566,42568,42570,42572,42574,42576,42578,42580,42582,42584,42586,42588],{"class":611,"line":750},[609,42561,753],{"class":614},[609,42563,756],{"class":618},[609,42565,785],{"class":614},[609,42567,1463],{"class":622},[609,42569,629],{"class":614},[609,42571,632],{"class":614},[609,42573,1470],{"class":614},[609,42575,941],{"class":795},[609,42577,1475],{"class":614},[609,42579,4164],{"class":795},[609,42581,1475],{"class":614},[609,42583,2400],{"class":795},[609,42585,1485],{"class":614},[609,42587,632],{"class":614},[609,42589,759],{"class":614},[609,42591,42592,42594,42596],{"class":611,"line":762},[609,42593,753],{"class":614},[609,42595,832],{"class":618},[609,42597,641],{"class":614},[609,42599,42600,42602,42604],{"class":611,"line":772},[609,42601,829],{"class":614},[609,42603,4739],{"class":618},[609,42605,759],{"class":614},[609,42607,42609,42611,42613],{"class":42608,"line":777},[611,645],[609,42610,829],{"class":614},[609,42612,383],{"class":618},[609,42614,759],{"class":614},[609,42616,42617,42619,42621],{"class":611,"line":803},[609,42618,871],{"class":614},[609,42620,832],{"class":618},[609,42622,641],{"class":614},[609,42624,42625,42627,42629],{"class":611,"line":603},[609,42626,753],{"class":614},[609,42628,3522],{"class":618},[609,42630,759],{"class":614},[609,42632,42633,42635,42637],{"class":611,"line":826},[609,42634,881],{"class":614},[609,42636,733],{"class":618},[609,42638,641],{"class":614},[609,42640,42641,42643,42645],{"class":611,"line":837},[609,42642,704],{"class":614},[609,42644,722],{"class":618},[609,42646,641],{"class":614},[7477,42648,42650],{"id":42649},"with-tresdirectionallight","With TresDirectionalLight",[586,42652,42653],{},"By default, sparkles appear on the up-facing vertices. However, you can pass a directional light to the component. Moving the directional light will cause \"lit\" vertices to emit sparkles.",[598,42655,42658],{"className":600,"code":42656,"highlights":42657,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Sparkles } from '@tresjs/cientos'\nimport { shallowRef } from 'vue'\n\nconst directionalLightRef = shallowRef()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" />\n    \u003CTresMesh>\n      \u003CTresSphereGeometry />\n      \u003CSparkles :directional-light=\"directionalLightRef\" />\n    \u003C/TresMesh>\n    \u003CTresDirectionalLight\n      ref=\"directionalLightRef\"\n      :position=\"[3, 3, 3]\"\n      :intensity=\"2\"\n    />\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[717,826,858],[590,42659,42660,42680,42698,42716,42734,42738,42752,42760,42764,42772,42780,42812,42820,42828,42851,42859,42865,42878,42904,42918,42922,42930,42938],{"__ignoreMap":548},[609,42661,42662,42664,42666,42668,42670,42672,42674,42676,42678],{"class":611,"line":549},[609,42663,615],{"class":614},[609,42665,619],{"class":618},[609,42667,623],{"class":622},[609,42669,626],{"class":622},[609,42671,629],{"class":614},[609,42673,632],{"class":614},[609,42675,636],{"class":635},[609,42677,632],{"class":614},[609,42679,641],{"class":614},[609,42681,42682,42684,42686,42688,42690,42692,42694,42696],{"class":611,"line":550},[609,42683,649],{"class":648},[609,42685,652],{"class":614},[609,42687,687],{"class":655},[609,42689,665],{"class":614},[609,42691,668],{"class":648},[609,42693,671],{"class":614},[609,42695,696],{"class":635},[609,42697,677],{"class":614},[609,42699,42700,42702,42704,42706,42708,42710,42712,42714],{"class":611,"line":680},[609,42701,649],{"class":648},[609,42703,652],{"class":614},[609,42705,42519],{"class":655},[609,42707,665],{"class":614},[609,42709,668],{"class":648},[609,42711,671],{"class":614},[609,42713,674],{"class":635},[609,42715,677],{"class":614},[609,42717,42718,42720,42722,42724,42726,42728,42730,42732],{"class":611,"line":701},[609,42719,649],{"class":648},[609,42721,652],{"class":614},[609,42723,7909],{"class":655},[609,42725,665],{"class":614},[609,42727,668],{"class":648},[609,42729,671],{"class":614},[609,42731,605],{"class":635},[609,42733,677],{"class":614},[609,42735,42736],{"class":611,"line":711},[609,42737,714],{"emptyLinePlaceholder":566},[609,42739,42741,42743,42746,42748,42750],{"class":42740,"line":717},[611,645],[609,42742,2693],{"class":622},[609,42744,42745],{"class":655}," directionalLightRef ",[609,42747,629],{"class":614},[609,42749,7909],{"class":2804},[609,42751,2850],{"class":655},[609,42753,42754,42756,42758],{"class":611,"line":727},[609,42755,704],{"class":614},[609,42757,619],{"class":618},[609,42759,641],{"class":614},[609,42761,42762],{"class":611,"line":750},[609,42763,714],{"emptyLinePlaceholder":566},[609,42765,42766,42768,42770],{"class":611,"line":762},[609,42767,615],{"class":614},[609,42769,722],{"class":618},[609,42771,641],{"class":614},[609,42773,42774,42776,42778],{"class":611,"line":772},[609,42775,730],{"class":614},[609,42777,733],{"class":618},[609,42779,641],{"class":614},[609,42781,42782,42784,42786,42788,42790,42792,42794,42796,42798,42800,42802,42804,42806,42808,42810],{"class":611,"line":777},[609,42783,753],{"class":614},[609,42785,756],{"class":618},[609,42787,785],{"class":614},[609,42789,1463],{"class":622},[609,42791,629],{"class":614},[609,42793,632],{"class":614},[609,42795,1470],{"class":614},[609,42797,941],{"class":795},[609,42799,1475],{"class":614},[609,42801,4164],{"class":795},[609,42803,1475],{"class":614},[609,42805,2400],{"class":795},[609,42807,1485],{"class":614},[609,42809,632],{"class":614},[609,42811,759],{"class":614},[609,42813,42814,42816,42818],{"class":611,"line":803},[609,42815,753],{"class":614},[609,42817,832],{"class":618},[609,42819,641],{"class":614},[609,42821,42822,42824,42826],{"class":611,"line":603},[609,42823,829],{"class":614},[609,42825,4739],{"class":618},[609,42827,759],{"class":614},[609,42829,42831,42833,42835,42837,42840,42842,42844,42847,42849],{"class":42830,"line":826},[611,645],[609,42832,829],{"class":614},[609,42834,383],{"class":618},[609,42836,785],{"class":614},[609,42838,42839],{"class":622},"directional-light",[609,42841,629],{"class":614},[609,42843,632],{"class":614},[609,42845,42846],{"class":655},"directionalLightRef",[609,42848,632],{"class":614},[609,42850,759],{"class":614},[609,42852,42853,42855,42857],{"class":611,"line":837},[609,42854,871],{"class":614},[609,42856,832],{"class":618},[609,42858,641],{"class":614},[609,42860,42861,42863],{"class":611,"line":848},[609,42862,753],{"class":614},[609,42864,11720],{"class":618},[609,42866,42868,42870,42872,42874,42876],{"class":42867,"line":858},[611,645],[609,42869,5683],{"class":622},[609,42871,629],{"class":614},[609,42873,632],{"class":614},[609,42875,42846],{"class":635},[609,42877,2991],{"class":614},[609,42879,42880,42882,42884,42886,42888,42890,42892,42894,42896,42898,42900,42902],{"class":611,"line":604},[609,42881,5697],{"class":614},[609,42883,1463],{"class":622},[609,42885,629],{"class":614},[609,42887,632],{"class":614},[609,42889,1470],{"class":614},[609,42891,4164],{"class":795},[609,42893,1475],{"class":614},[609,42895,4164],{"class":795},[609,42897,1475],{"class":614},[609,42899,4164],{"class":795},[609,42901,1485],{"class":614},[609,42903,2991],{"class":614},[609,42905,42906,42908,42910,42912,42914,42916],{"class":611,"line":878},[609,42907,5697],{"class":614},[609,42909,1890],{"class":622},[609,42911,629],{"class":614},[609,42913,632],{"class":614},[609,42915,796],{"class":795},[609,42917,2991],{"class":614},[609,42919,42920],{"class":611,"line":888},[609,42921,11765],{"class":614},[609,42923,42924,42926,42928],{"class":611,"line":2956},[609,42925,753],{"class":614},[609,42927,3522],{"class":618},[609,42929,759],{"class":614},[609,42931,42932,42934,42936],{"class":611,"line":2964},[609,42933,881],{"class":614},[609,42935,733],{"class":618},[609,42937,641],{"class":614},[609,42939,42940,42942,42944],{"class":611,"line":2994},[609,42941,704],{"class":614},[609,42943,722],{"class":618},[609,42945,641],{"class":614},[7477,42947,42949],{"id":42948},"sequences","Sequences",[586,42951,42952,42953,42956,42957,3202,42961,42963,42964,42967],{},"All props beginning with ",[590,42954,42955],{},":sequence-"," are used to define how a particle changes as it progresses ",[1116,42958,42960],{"href":42959},"#mixes","(See also: Mixes)",[590,42962,42955],{}," props are of the type ",[590,42965,42966],{},"Gradient\u003CT>",", which can be any one of:",[3140,42969,42970,42976,42982],{},[3143,42971,42972,42975],{},[590,42973,42974],{},"T",": a single value",[3143,42977,42978,42981],{},[590,42979,42980],{},"[T, T, T, ...]",": an evenly distributed series of values",[3143,42983,42984,42987,42988,42990,42991,17724,42993,1122],{},[590,42985,42986],{},"[[number, T], [number, T], ...]",": an unevently distributed series of values, where ",[590,42989,2541],{}," is a gradient \"stop\" from ",[590,42992,941],{},[590,42994,1897],{},[586,42996,42997,42998,1194],{},"For example, all of these are acceptable values for ",[590,42999,43000],{},"Gradient\u003CTresColor>",[3140,43002,43003,43008,43013],{},[3143,43004,43005],{},[590,43006,43007],{},"'red'",[3143,43009,43010],{},[590,43011,43012],{},"['red', 'blue', 'green']",[3143,43014,43015],{},[590,43016,43017],{},"[[0.1, 'red'], [0.25, 'blue'], [0.5, 'green']]",[598,43019,43022],{"className":600,"code":43020,"highlights":43021,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Sparkles } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" />\n    \u003CTresMesh>\n      \u003CTresSphereGeometry />\n      \u003CSparkles\n        :sequence-color=\"['red', 'blue', 'green']\"\n        :sequence-alpha=\"[[0.0, 0.0], [0.10, 1.0], [0.5, 1.0], [0.9, 0.0]]\"\n        :sequence-size=\"[0.0, 1.0, 0.5]\"\n      />\n    \u003C/TresMesh>\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[777,803,603,826],[590,43023,43024,43044,43062,43080,43088,43092,43100,43108,43140,43148,43156,43164,43206,43255,43283,43287,43295,43303,43311],{"__ignoreMap":548},[609,43025,43026,43028,43030,43032,43034,43036,43038,43040,43042],{"class":611,"line":549},[609,43027,615],{"class":614},[609,43029,619],{"class":618},[609,43031,623],{"class":622},[609,43033,626],{"class":622},[609,43035,629],{"class":614},[609,43037,632],{"class":614},[609,43039,636],{"class":635},[609,43041,632],{"class":614},[609,43043,641],{"class":614},[609,43045,43046,43048,43050,43052,43054,43056,43058,43060],{"class":611,"line":550},[609,43047,649],{"class":648},[609,43049,652],{"class":614},[609,43051,687],{"class":655},[609,43053,665],{"class":614},[609,43055,668],{"class":648},[609,43057,671],{"class":614},[609,43059,696],{"class":635},[609,43061,677],{"class":614},[609,43063,43064,43066,43068,43070,43072,43074,43076,43078],{"class":611,"line":680},[609,43065,649],{"class":648},[609,43067,652],{"class":614},[609,43069,42519],{"class":655},[609,43071,665],{"class":614},[609,43073,668],{"class":648},[609,43075,671],{"class":614},[609,43077,674],{"class":635},[609,43079,677],{"class":614},[609,43081,43082,43084,43086],{"class":611,"line":701},[609,43083,704],{"class":614},[609,43085,619],{"class":618},[609,43087,641],{"class":614},[609,43089,43090],{"class":611,"line":711},[609,43091,714],{"emptyLinePlaceholder":566},[609,43093,43094,43096,43098],{"class":611,"line":717},[609,43095,615],{"class":614},[609,43097,722],{"class":618},[609,43099,641],{"class":614},[609,43101,43102,43104,43106],{"class":611,"line":727},[609,43103,730],{"class":614},[609,43105,733],{"class":618},[609,43107,641],{"class":614},[609,43109,43110,43112,43114,43116,43118,43120,43122,43124,43126,43128,43130,43132,43134,43136,43138],{"class":611,"line":750},[609,43111,753],{"class":614},[609,43113,756],{"class":618},[609,43115,785],{"class":614},[609,43117,1463],{"class":622},[609,43119,629],{"class":614},[609,43121,632],{"class":614},[609,43123,1470],{"class":614},[609,43125,941],{"class":795},[609,43127,1475],{"class":614},[609,43129,4164],{"class":795},[609,43131,1475],{"class":614},[609,43133,2400],{"class":795},[609,43135,1485],{"class":614},[609,43137,632],{"class":614},[609,43139,759],{"class":614},[609,43141,43142,43144,43146],{"class":611,"line":762},[609,43143,753],{"class":614},[609,43145,832],{"class":618},[609,43147,641],{"class":614},[609,43149,43150,43152,43154],{"class":611,"line":772},[609,43151,829],{"class":614},[609,43153,4739],{"class":618},[609,43155,759],{"class":614},[609,43157,43159,43161],{"class":43158,"line":777},[611,645],[609,43160,829],{"class":614},[609,43162,43163],{"class":618},"Sparkles\n",[609,43165,43167,43169,43172,43174,43176,43178,43180,43182,43184,43186,43188,43191,43193,43195,43197,43200,43202,43204],{"class":43166,"line":803},[611,645],[609,43168,2997],{"class":614},[609,43170,43171],{"class":622},"sequence-color",[609,43173,629],{"class":614},[609,43175,632],{"class":614},[609,43177,1470],{"class":614},[609,43179,5540],{"class":614},[609,43181,30725],{"class":635},[609,43183,5540],{"class":614},[609,43185,1475],{"class":614},[609,43187,5540],{"class":614},[609,43189,43190],{"class":635},"blue",[609,43192,5540],{"class":614},[609,43194,1475],{"class":614},[609,43196,5540],{"class":614},[609,43198,43199],{"class":635},"green",[609,43201,5540],{"class":614},[609,43203,1485],{"class":614},[609,43205,2991],{"class":614},[609,43207,43209,43211,43214,43216,43218,43220,43222,43224,43226,43228,43231,43233,43235,43237,43239,43241,43243,43245,43247,43249,43251,43253],{"class":43208,"line":603},[611,645],[609,43210,2997],{"class":614},[609,43212,43213],{"class":622},"sequence-alpha",[609,43215,629],{"class":614},[609,43217,632],{"class":614},[609,43219,26753],{"class":614},[609,43221,7211],{"class":795},[609,43223,1475],{"class":614},[609,43225,7211],{"class":795},[609,43227,26766],{"class":614},[609,43229,43230],{"class":795},"0.10",[609,43232,1475],{"class":614},[609,43234,7089],{"class":795},[609,43236,26766],{"class":614},[609,43238,1517],{"class":795},[609,43240,1475],{"class":614},[609,43242,7089],{"class":795},[609,43244,26766],{"class":614},[609,43246,28957],{"class":795},[609,43248,1475],{"class":614},[609,43250,7211],{"class":795},[609,43252,26803],{"class":614},[609,43254,2991],{"class":614},[609,43256,43258,43260,43263,43265,43267,43269,43271,43273,43275,43277,43279,43281],{"class":43257,"line":826},[611,645],[609,43259,2997],{"class":614},[609,43261,43262],{"class":622},"sequence-size",[609,43264,629],{"class":614},[609,43266,632],{"class":614},[609,43268,1470],{"class":614},[609,43270,7211],{"class":795},[609,43272,1475],{"class":614},[609,43274,7089],{"class":795},[609,43276,1475],{"class":614},[609,43278,1517],{"class":795},[609,43280,1485],{"class":614},[609,43282,2991],{"class":614},[609,43284,43285],{"class":611,"line":837},[609,43286,3054],{"class":614},[609,43288,43289,43291,43293],{"class":611,"line":848},[609,43290,871],{"class":614},[609,43292,832],{"class":618},[609,43294,641],{"class":614},[609,43296,43297,43299,43301],{"class":611,"line":858},[609,43298,753],{"class":614},[609,43300,3522],{"class":618},[609,43302,759],{"class":614},[609,43304,43305,43307,43309],{"class":611,"line":604},[609,43306,881],{"class":614},[609,43308,733],{"class":618},[609,43310,641],{"class":614},[609,43312,43313,43315,43317],{"class":611,"line":878},[609,43314,704],{"class":614},[609,43316,722],{"class":618},[609,43318,641],{"class":614},[7477,43320,43322],{"id":43321},"mixes","Mixes",[586,43324,42952,43325,43328,43329,43331,43332,43335,43336,1122],{},[590,43326,43327],{},":mix-"," allow you to specify how a particle \"progresses\" through a corresponding ",[590,43330,42955],{}," prop. E.g., ",[590,43333,43334],{},":mix-alpha"," affects ",[590,43337,43338],{},":sequence-alpha",[3140,43340,43341,43359],{},[3143,43342,43343,43344,43346,43347,43349,43350,43352,43353],{},"If the ",[590,43345,43327],{}," prop is ",[590,43348,7211],{},", 'progress' through the ",[590,43351,42955],{}," is determined entirely by the light shining on the surface of the sparkling mesh.",[1116,43354,43356],{"href":43355},"#precisely",[43357,43358,1897],"sup",{},[3143,43360,43343,43361,43346,43363,43349,43365,43367],{},[590,43362,43327],{},[590,43364,7089],{},[590,43366,42955],{}," is determined entirely by the particle's lifetime.",[586,43369,43370,43371,43374],{},"More precisely, the value is determined by the dot product of the ",[590,43372,43373],{},"directionalLight","'s inverted normalized position and each of the sparkling mesh's vertex normals.",[598,43376,43379],{"className":600,"code":43377,"highlights":43378,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Sparkles } from '@tresjs/cientos'\nimport { shallowRef } from 'vue'\n\nconst directionalLightRef = shallowRef()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" />\n    \u003CTresMesh>\n      \u003CTresSphereGeometry />\n      \u003CSparkles\n        :directional-light=\"directionalLightRef\"\n        :mix-color=\"0.8\"\n        :mix-alpha=\"0.5\"\n        :mix-size=\"0.2\"\n      />\n    \u003C/TresMesh>\n    \u003CTresDirectionalLight\n      ref=\"directionalLightRef\"\n      :position=\"[3, 3, 3]\"\n    />\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[680,826,837,848,858,604],[590,43380,43381,43401,43419,43438,43456,43460,43472,43480,43484,43492,43500,43532,43540,43548,43555,43570,43586,43602,43618,43622,43630,43636,43648,43674,43678,43686,43694],{"__ignoreMap":548},[609,43382,43383,43385,43387,43389,43391,43393,43395,43397,43399],{"class":611,"line":549},[609,43384,615],{"class":614},[609,43386,619],{"class":618},[609,43388,623],{"class":622},[609,43390,626],{"class":622},[609,43392,629],{"class":614},[609,43394,632],{"class":614},[609,43396,636],{"class":635},[609,43398,632],{"class":614},[609,43400,641],{"class":614},[609,43402,43403,43405,43407,43409,43411,43413,43415,43417],{"class":611,"line":550},[609,43404,649],{"class":648},[609,43406,652],{"class":614},[609,43408,687],{"class":655},[609,43410,665],{"class":614},[609,43412,668],{"class":648},[609,43414,671],{"class":614},[609,43416,696],{"class":635},[609,43418,677],{"class":614},[609,43420,43422,43424,43426,43428,43430,43432,43434,43436],{"class":43421,"line":680},[611,645],[609,43423,649],{"class":648},[609,43425,652],{"class":614},[609,43427,42519],{"class":655},[609,43429,665],{"class":614},[609,43431,668],{"class":648},[609,43433,671],{"class":614},[609,43435,674],{"class":635},[609,43437,677],{"class":614},[609,43439,43440,43442,43444,43446,43448,43450,43452,43454],{"class":611,"line":701},[609,43441,649],{"class":648},[609,43443,652],{"class":614},[609,43445,7909],{"class":655},[609,43447,665],{"class":614},[609,43449,668],{"class":648},[609,43451,671],{"class":614},[609,43453,605],{"class":635},[609,43455,677],{"class":614},[609,43457,43458],{"class":611,"line":711},[609,43459,714],{"emptyLinePlaceholder":566},[609,43461,43462,43464,43466,43468,43470],{"class":611,"line":717},[609,43463,2693],{"class":622},[609,43465,42745],{"class":655},[609,43467,629],{"class":614},[609,43469,7909],{"class":2804},[609,43471,2850],{"class":655},[609,43473,43474,43476,43478],{"class":611,"line":727},[609,43475,704],{"class":614},[609,43477,619],{"class":618},[609,43479,641],{"class":614},[609,43481,43482],{"class":611,"line":750},[609,43483,714],{"emptyLinePlaceholder":566},[609,43485,43486,43488,43490],{"class":611,"line":762},[609,43487,615],{"class":614},[609,43489,722],{"class":618},[609,43491,641],{"class":614},[609,43493,43494,43496,43498],{"class":611,"line":772},[609,43495,730],{"class":614},[609,43497,733],{"class":618},[609,43499,641],{"class":614},[609,43501,43502,43504,43506,43508,43510,43512,43514,43516,43518,43520,43522,43524,43526,43528,43530],{"class":611,"line":777},[609,43503,753],{"class":614},[609,43505,756],{"class":618},[609,43507,785],{"class":614},[609,43509,1463],{"class":622},[609,43511,629],{"class":614},[609,43513,632],{"class":614},[609,43515,1470],{"class":614},[609,43517,941],{"class":795},[609,43519,1475],{"class":614},[609,43521,4164],{"class":795},[609,43523,1475],{"class":614},[609,43525,2400],{"class":795},[609,43527,1485],{"class":614},[609,43529,632],{"class":614},[609,43531,759],{"class":614},[609,43533,43534,43536,43538],{"class":611,"line":803},[609,43535,753],{"class":614},[609,43537,832],{"class":618},[609,43539,641],{"class":614},[609,43541,43542,43544,43546],{"class":611,"line":603},[609,43543,829],{"class":614},[609,43545,4739],{"class":618},[609,43547,759],{"class":614},[609,43549,43551,43553],{"class":43550,"line":826},[611,645],[609,43552,829],{"class":614},[609,43554,43163],{"class":618},[609,43556,43558,43560,43562,43564,43566,43568],{"class":43557,"line":837},[611,645],[609,43559,2997],{"class":614},[609,43561,42839],{"class":622},[609,43563,629],{"class":614},[609,43565,632],{"class":614},[609,43567,42846],{"class":655},[609,43569,2991],{"class":614},[609,43571,43573,43575,43578,43580,43582,43584],{"class":43572,"line":848},[611,645],[609,43574,2997],{"class":614},[609,43576,43577],{"class":622},"mix-color",[609,43579,629],{"class":614},[609,43581,632],{"class":614},[609,43583,18994],{"class":795},[609,43585,2991],{"class":614},[609,43587,43589,43591,43594,43596,43598,43600],{"class":43588,"line":858},[611,645],[609,43590,2997],{"class":614},[609,43592,43593],{"class":622},"mix-alpha",[609,43595,629],{"class":614},[609,43597,632],{"class":614},[609,43599,1517],{"class":795},[609,43601,2991],{"class":614},[609,43603,43605,43607,43610,43612,43614,43616],{"class":43604,"line":604},[611,645],[609,43606,2997],{"class":614},[609,43608,43609],{"class":622},"mix-size",[609,43611,629],{"class":614},[609,43613,632],{"class":614},[609,43615,9041],{"class":795},[609,43617,2991],{"class":614},[609,43619,43620],{"class":611,"line":878},[609,43621,3054],{"class":614},[609,43623,43624,43626,43628],{"class":611,"line":888},[609,43625,871],{"class":614},[609,43627,832],{"class":618},[609,43629,641],{"class":614},[609,43631,43632,43634],{"class":611,"line":2956},[609,43633,753],{"class":614},[609,43635,11720],{"class":618},[609,43637,43638,43640,43642,43644,43646],{"class":611,"line":2964},[609,43639,5683],{"class":622},[609,43641,629],{"class":614},[609,43643,632],{"class":614},[609,43645,42846],{"class":635},[609,43647,2991],{"class":614},[609,43649,43650,43652,43654,43656,43658,43660,43662,43664,43666,43668,43670,43672],{"class":611,"line":2994},[609,43651,5697],{"class":614},[609,43653,1463],{"class":622},[609,43655,629],{"class":614},[609,43657,632],{"class":614},[609,43659,1470],{"class":614},[609,43661,4164],{"class":795},[609,43663,1475],{"class":614},[609,43665,4164],{"class":795},[609,43667,1475],{"class":614},[609,43669,4164],{"class":795},[609,43671,1485],{"class":614},[609,43673,2991],{"class":614},[609,43675,43676],{"class":611,"line":3011},[609,43677,11765],{"class":614},[609,43679,43680,43682,43684],{"class":611,"line":3026},[609,43681,753],{"class":614},[609,43683,3522],{"class":618},[609,43685,759],{"class":614},[609,43687,43688,43690,43692],{"class":611,"line":3051},[609,43689,881],{"class":614},[609,43691,733],{"class":618},[609,43693,641],{"class":614},[609,43695,43696,43698,43700],{"class":611,"line":2595},[609,43697,704],{"class":614},[609,43699,722],{"class":618},[609,43701,641],{"class":614},[476,43703,898],{"id":897},[903,43705,43706,43714],{},[906,43707,43708],{},[909,43709,43710,43712],{},[912,43711,3122],{"align":973},[912,43713,917],{"align":973},[922,43715,43716,43738,43771,43793,43813,43833,43853,43874,43894,43914,43934,43953,43972,43991,44011,44038,44060,44082,44103,44124,44145,44179,44200,44220,44241,44261,44281,44303,44322],{},[909,43717,43718,43722],{},[927,43719,43720],{"align":973},[1677,43721,14374],{},[927,43723,43724,43725,43727,43729,43730,43733,43735,43737],{"align":973},"Type: ",[590,43726,35321],{},[2512,43728],{},"Default: ",[590,43731,43732],{},"'https://raw.githubusercontent.com/Tresjs/asset...'",[2512,43734],{},[2512,43736],{},"Texture or image path for individual sparkles",[909,43739,43740,43744],{},[927,43741,43742],{"align":973},[1677,43743,16692],{},[927,43745,43724,43746,43749,43729,43751,43753,43755,43757,43758,43760],{"align":973},[590,43747,43748],{},"Object3D | BufferGeometry",[2512,43750],{},[590,43752,1155],{},[2512,43754],{},[2512,43756],{},"Vertices of the geometry will be used to emit sparkles. Geometry normals are used for sparkles' traveling direction and for responding to the directional light prop.",[2512,43759],{},[3140,43761,43762,43765,43768],{},[3143,43763,43764],{},"If provided, the component will use the passed geometry.",[3143,43766,43767],{},"If no geometry is provided, the component will try to make a copy of the parent object's geometry.",[3143,43769,43770],{},"If no parent geometry exists, the component will create and use an IcosphereGeometry.",[909,43772,43773,43777],{},[927,43774,43775],{"align":973},[1677,43776,43373],{},[927,43778,43724,43779,43781,43729,43783,43785,43787,43789,43790,43792],{"align":973},[590,43780,2582],{},[2512,43782],{},[590,43784,1155],{},[2512,43786],{},[2512,43788],{},"Particles \"light up\" when their normal \"faces\" the light. If no ",[590,43791,43373],{}," is provided, the default \"up\" vector will be used.",[909,43794,43795,43800],{},[927,43796,43797],{"align":973},[1677,43798,43799],{},"lifetimeSec",[927,43801,43724,43802,43804,43729,43806,43808,43810,43812],{"align":973},[590,43803,2541],{},[2512,43805],{},[590,43807,33157],{},[2512,43809],{},[2512,43811],{},"Particle lifetime in seconds",[909,43814,43815,43820],{},[927,43816,43817],{"align":973},[1677,43818,43819],{},"cooldownSec",[927,43821,43724,43822,43824,43729,43826,43828,43830,43832],{"align":973},[590,43823,2541],{},[2512,43825],{},[590,43827,7148],{},[2512,43829],{},[2512,43831],{},"Particle cooldown in seconds – time between lifetime end and respawn",[909,43834,43835,43840],{},[927,43836,43837],{"align":973},[1677,43838,43839],{},"normalThreshold",[927,43841,43724,43842,43844,43729,43846,43848,43850,43852],{"align":973},[590,43843,2541],{},[2512,43845],{},[590,43847,34722],{},[2512,43849],{},[2512,43851],{},"Number from 0-1 indicating how closely the particle needs to be faced towards the light to \"light up\". (Lower == more flexible)",[909,43854,43855,43860],{},[927,43856,43857],{"align":973},[1677,43858,43859],{},"noiseScale",[927,43861,43724,43862,43864,43729,43866,43869,43871,43873],{"align":973},[590,43863,2541],{},[2512,43865],{},[590,43867,43868],{},"3.0",[2512,43870],{},[2512,43872],{},"Scale of the noise period (lower == more slowly cycling noise)",[909,43875,43876,43881],{},[927,43877,43878],{"align":973},[1677,43879,43880],{},"scaleNoise",[927,43882,43724,43883,43885,43729,43887,43889,43891,43893],{"align":973},[590,43884,2541],{},[2512,43886],{},[590,43888,7089],{},[2512,43890],{},[2512,43892],{},"Noise coefficient applied to particle scale",[909,43895,43896,43901],{},[927,43897,43898],{"align":973},[1677,43899,43900],{},"offsetNoise",[927,43902,43724,43903,43905,43729,43907,43909,43911,43913],{"align":973},[590,43904,2541],{},[2512,43906],{},[590,43908,2207],{},[2512,43910],{},[2512,43912],{},"Noise coefficient applied to particle offset",[909,43915,43916,43921],{},[927,43917,43918],{"align":973},[1677,43919,43920],{},"lifetimeNoise",[927,43922,43724,43923,43925,43729,43927,43929,43931,43933],{"align":973},[590,43924,2541],{},[2512,43926],{},[590,43928,7211],{},[2512,43930],{},[2512,43932],{},"Noise coefficient applied to particle lifetime",[909,43935,43936,43940],{},[927,43937,43938],{"align":973},[1677,43939,11182],{},[927,43941,43724,43942,43944,43729,43946,43948,43950,43952],{"align":973},[590,43943,2541],{},[2512,43945],{},[590,43947,7089],{},[2512,43949],{},[2512,43951],{},"Particle scale multiplier",[909,43954,43955,43959],{},[927,43956,43957],{"align":973},[1677,43958,40522],{},[927,43960,43724,43961,43963,43729,43965,43967,43969,43971],{"align":973},[590,43962,2541],{},[2512,43964],{},[590,43966,7089],{},[2512,43968],{},[2512,43970],{},"Opacity multiplier",[909,43973,43974,43978],{},[927,43975,43976],{"align":973},[1677,43977,34499],{},[927,43979,43724,43980,43982,43729,43984,43986,43988,43990],{"align":973},[590,43981,2541],{},[2512,43983],{},[590,43985,7089],{},[2512,43987],{},[2512,43989],{},"Offset multiplier",[909,43992,43993,43998],{},[927,43994,43995],{"align":973},[1677,43996,43997],{},"surfaceDistance",[927,43999,43724,44000,44002,43729,44004,44006,44008,44010],{"align":973},[590,44001,2541],{},[2512,44003],{},[590,44005,7089],{},[2512,44007],{},[2512,44009],{},"Surface distance multiplier",[909,44012,44013,44018],{},[927,44014,44015],{"align":973},[1677,44016,44017],{},"sequenceColor",[927,44019,43724,44020,44022,43729,44024,44027,44029,5540,44031,44034,44035,44037],{"align":973},[590,44021,43000],{},[2512,44023],{},[590,44025,44026],{},"[[0.7, '#82dbc5'], [0.8, '#fbb03b']]",[2512,44028],{},[2512,44030],{},[1681,44032,44033],{},"Sequence' props: specify how a particle changes as it \"progresses\". See also \"mix","\" props.",[2512,44036],{},"Color sequence as particles progress",[909,44039,44040,44045],{},[927,44041,44042],{"align":973},[1677,44043,44044],{},"sequenceAlpha",[927,44046,43724,44047,44050,43729,44052,44055,44057,44059],{"align":973},[590,44048,44049],{},"Gradient\u003Cnumber>",[2512,44051],{},[590,44053,44054],{},"[[0.0, 0.0], [0.10, 1.0], [0.5, 1.0], [0.9, 0.0]]",[2512,44056],{},[2512,44058],{},"Opacity sequence as particles progress",[909,44061,44062,44067],{},[927,44063,44064],{"align":973},[1677,44065,44066],{},"sequenceOffset",[927,44068,43724,44069,44072,43729,44074,44077,44079,44081],{"align":973},[590,44070,44071],{},"Gradient\u003C[number, number, number]>",[2512,44073],{},[590,44075,44076],{},"[0.0, 0.0, 0.0]",[2512,44078],{},[2512,44080],{},"Distance sequence as particles progress",[909,44083,44084,44089],{},[927,44085,44086],{"align":973},[1677,44087,44088],{},"sequenceNoise",[927,44090,43724,44091,44093,43729,44095,44098,44100,44102],{"align":973},[590,44092,44071],{},[2512,44094],{},[590,44096,44097],{},"[0.1, 0.1, 0.1]",[2512,44099],{},[2512,44101],{},"Noise sequence as particles progress",[909,44104,44105,44110],{},[927,44106,44107],{"align":973},[1677,44108,44109],{},"sequenceSize",[927,44111,43724,44112,44114,43729,44116,44119,44121,44123],{"align":973},[590,44113,44049],{},[2512,44115],{},[590,44117,44118],{},"[0.0, 1.0]",[2512,44120],{},[2512,44122],{},"Size sequence as particles progress",[909,44125,44126,44131],{},[927,44127,44128],{"align":973},[1677,44129,44130],{},"sequenceSurfaceDistance",[927,44132,43724,44133,44135,43729,44137,44140,44142,44144],{"align":973},[590,44134,44049],{},[2512,44136],{},[590,44138,44139],{},"[0.05, 0.08, 0.1]",[2512,44141],{},[2512,44143],{},"Distance from surface (along normal) as particles progress",[909,44146,44147,44152],{},[927,44148,44149],{"align":973},[1677,44150,44151],{},"mixColor",[927,44153,43724,44154,44156,43729,44158,44160,44162,44164,44165,44167,44175,44176,44178],{"align":973},[590,44155,2541],{},[2512,44157],{},[590,44159,1517],{},[2512,44161],{},[2512,44163],{},"'mix*' props: A particle \"progresses\" with a mix of two factors:",[2512,44166],{},[3140,44168,44169,44172],{},[3143,44170,44171],{},"its normal \"facing\" the directionalLight",[3143,44173,44174],{},"its lifetime","'mix*' props specify the relationship between the two factors.",[2512,44177],{},"How is a particle's progress for color calculated? (0: normal, 1: particle lifetime)",[909,44180,44181,44186],{},[927,44182,44183],{"align":973},[1677,44184,44185],{},"mixAlpha",[927,44187,43724,44188,44190,43729,44192,44195,44197,44199],{"align":973},[590,44189,2541],{},[2512,44191],{},[590,44193,44194],{},"1.",[2512,44196],{},[2512,44198],{},"How is a particle's progress for alpha calculated? (0: normal, 1: particle lifetime)",[909,44201,44202,44207],{},[927,44203,44204],{"align":973},[1677,44205,44206],{},"mixOffset",[927,44208,43724,44209,44211,43729,44213,44215,44217,44219],{"align":973},[590,44210,2541],{},[2512,44212],{},[590,44214,44194],{},[2512,44216],{},[2512,44218],{},"How is a particle's progress for offset calculated? (0: normal, 1: particle lifetime)",[909,44221,44222,44227],{},[927,44223,44224],{"align":973},[1677,44225,44226],{},"mixSize",[927,44228,43724,44229,44231,43729,44233,44236,44238,44240],{"align":973},[590,44230,2541],{},[2512,44232],{},[590,44234,44235],{},"0.",[2512,44237],{},[2512,44239],{},"How is a particle's progress for size calculated? (0: normal, 1: particle lifetime)",[909,44242,44243,44248],{},[927,44244,44245],{"align":973},[1677,44246,44247],{},"mixSurfaceDistance",[927,44249,43724,44250,44252,43729,44254,44256,44258,44260],{"align":973},[590,44251,2541],{},[2512,44253],{},[590,44255,44194],{},[2512,44257],{},[2512,44259],{},"How is a particle's progress for surface distance calculated? (0: normal, 1: particle lifetime)",[909,44262,44263,44268],{},[927,44264,44265],{"align":973},[1677,44266,44267],{},"mixNoise",[927,44269,43724,44270,44272,43729,44274,44276,44278,44280],{"align":973},[590,44271,2541],{},[2512,44273],{},[590,44275,44194],{},[2512,44277],{},[2512,44279],{},"How is a particle's progress for lifetime calculated? (0: normal, 1: particle lifetime)",[909,44282,44283,44288],{},[927,44284,44285],{"align":973},[1677,44286,44287],{},"blending",[927,44289,43724,44290,44293,43729,44295,44298,44300,44302],{"align":973},[590,44291,44292],{},"Blending",[2512,44294],{},[590,44296,44297],{},"AdditiveBlending",[2512,44299],{},[2512,44301],{},"Material blending",[909,44304,44305,44309],{},[927,44306,44307],{"align":973},[1677,44308,4877],{},[927,44310,43724,44311,44313,43729,44315,44317,44319,44321],{"align":973},[590,44312,11963],{},[2512,44314],{},[590,44316,937],{},[2512,44318],{},[2512,44320],{},"Material transparency",[909,44323,44324,44328],{},[927,44325,44326],{"align":973},[1677,44327,4338],{},[927,44329,43724,44330,44332,43729,44334,44336,44338,44340],{"align":973},[590,44331,11963],{},[2512,44333],{},[590,44335,947],{},[2512,44337],{},[2512,44339],{},"Material depth write",[1303,44342,44343],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":548,"searchDepth":549,"depth":550,"links":44345},[44346,44352],{"id":596,"depth":550,"text":15,"children":44347},[44348,44349,44350,44351],{"id":42464,"depth":680,"text":42465},{"id":42649,"depth":680,"text":42650},{"id":42948,"depth":680,"text":42949},{"id":43321,"depth":680,"text":43322},{"id":897,"depth":550,"text":898},"Makes sparkles on geometry vertices, optionally guided by directional light.",{},{"title":383,"description":44353},"sidh_wQDMKRUeYy0-MM8UB_NfCo4ClPtPAjr8qECGps",{"id":44358,"title":387,"body":44359,"description":45046,"extension":563,"links":564,"meta":45047,"navigation":566,"path":388,"seo":45048,"stem":389,"__hash__":45049},"docs/2.api/8.staging/stage.md",{"type":473,"value":44360,"toc":45040},[44361,44366,44369,44383,44402,44452,44454,44823,44825,44936,44940,44943,45025,45037],[2562,44362,44363],{},[44364,44365],"staging-stage",{},[586,44367,44368],{},"This component creates a \"stage\" for your models. It sets up:",[3140,44370,44371,44374,44377,44380],{},[3143,44372,44373],{},"model lighting",[3143,44375,44376],{},"ground shadows",[3143,44378,44379],{},"zoom to fit",[3143,44381,44382],{},"environment",[2050,44384,44385,44388],{},[586,44386,44387],{},"If you are using other camera controls, be sure to make them the 'default'.",[598,44389,44390],{"className":600,"code":2075,"language":605,"meta":548,"style":548},[590,44391,44392],{"__ignoreMap":548},[609,44393,44394,44396,44398,44400],{"class":611,"line":549},[609,44395,615],{"class":614},[609,44397,767],{"class":618},[609,44399,1872],{"class":622},[609,44401,759],{"class":614},[2050,44403,44404,44407,44422],{},[586,44405,44406],{},"If you are using shadows='accumulative', enable shadows on your canvas and on your objects.",[598,44408,44410],{"className":600,"code":44409,"language":605,"meta":548,"style":548},"\u003CTresCanvas shadows />\n",[590,44411,44412],{"__ignoreMap":548},[609,44413,44414,44416,44418,44420],{"class":611,"line":549},[609,44415,615],{"class":614},[609,44417,733],{"class":618},[609,44419,36714],{"class":622},[609,44421,759],{"class":614},[598,44423,44425],{"className":600,"code":44424,"language":605,"meta":548,"style":548},"\u003CTresMesh cast-shadow />\n  ...\n\u003C/TresMesh>\n",[590,44426,44427,44437,44441],{"__ignoreMap":548},[609,44428,44429,44431,44433,44435],{"class":611,"line":549},[609,44430,615],{"class":614},[609,44432,832],{"class":618},[609,44434,10807],{"class":622},[609,44436,759],{"class":614},[609,44438,44439],{"class":611,"line":550},[609,44440,7384],{"class":655},[609,44442,44443,44445,44448,44450],{"class":611,"line":680},[609,44444,615],{"class":614},[609,44446,44447],{"class":655},"/",[609,44449,832],{"class":618},[609,44451,641],{"class":614},[476,44453,15],{"id":596},[598,44455,44458],{"className":600,"code":44456,"highlights":44457,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Stage, OrbitControls, Plane } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas shadows>\n    \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" />\n    \u003COrbitControls make-default />\n    \u003CStage\n      lighting=\"rembrandt\"\n      shadows=\"contact\"\n      :adjust-camera=\"true\"\n      environment=\"city\"\n      :intensity=\"0.5\"\n    >\n      \u003CTresMesh cast-shadow>\n        \u003CTresBoxGeometry />\n        \u003CTresMeshStandardMaterial color=\"orange\" />\n      \u003C/TresMesh>\n      \u003CPlane :position=\"[0, -2, 0]\" receive-shadow :args=\"[5, 5]\">\n        \u003CTresMeshStandardMaterial />\n      \u003C/Plane>\n    \u003C/Stage>\n  \u003C/TresCanvas>\n\u003C/template>\n",[680,772,777,803,603,826,837],[590,44459,44460,44480,44498,44526,44534,44538,44546,44556,44588,44598,44606,44621,44636,44652,44666,44681,44685,44695,44703,44721,44729,44783,44791,44799,44807,44815],{"__ignoreMap":548},[609,44461,44462,44464,44466,44468,44470,44472,44474,44476,44478],{"class":611,"line":549},[609,44463,615],{"class":614},[609,44465,619],{"class":618},[609,44467,623],{"class":622},[609,44469,626],{"class":622},[609,44471,629],{"class":614},[609,44473,632],{"class":614},[609,44475,636],{"class":635},[609,44477,632],{"class":614},[609,44479,641],{"class":614},[609,44481,44482,44484,44486,44488,44490,44492,44494,44496],{"class":611,"line":550},[609,44483,649],{"class":648},[609,44485,652],{"class":614},[609,44487,687],{"class":655},[609,44489,665],{"class":614},[609,44491,668],{"class":648},[609,44493,671],{"class":614},[609,44495,696],{"class":635},[609,44497,677],{"class":614},[609,44499,44501,44503,44505,44508,44510,44512,44514,44516,44518,44520,44522,44524],{"class":44500,"line":680},[611,645],[609,44502,649],{"class":648},[609,44504,652],{"class":614},[609,44506,44507],{"class":655}," Stage",[609,44509,659],{"class":614},[609,44511,662],{"class":655},[609,44513,659],{"class":614},[609,44515,37324],{"class":655},[609,44517,665],{"class":614},[609,44519,668],{"class":648},[609,44521,671],{"class":614},[609,44523,674],{"class":635},[609,44525,677],{"class":614},[609,44527,44528,44530,44532],{"class":611,"line":701},[609,44529,704],{"class":614},[609,44531,619],{"class":618},[609,44533,641],{"class":614},[609,44535,44536],{"class":611,"line":711},[609,44537,714],{"emptyLinePlaceholder":566},[609,44539,44540,44542,44544],{"class":611,"line":717},[609,44541,615],{"class":614},[609,44543,722],{"class":618},[609,44545,641],{"class":614},[609,44547,44548,44550,44552,44554],{"class":611,"line":727},[609,44549,730],{"class":614},[609,44551,733],{"class":618},[609,44553,36714],{"class":622},[609,44555,641],{"class":614},[609,44557,44558,44560,44562,44564,44566,44568,44570,44572,44574,44576,44578,44580,44582,44584,44586],{"class":611,"line":750},[609,44559,753],{"class":614},[609,44561,756],{"class":618},[609,44563,785],{"class":614},[609,44565,1463],{"class":622},[609,44567,629],{"class":614},[609,44569,632],{"class":614},[609,44571,1470],{"class":614},[609,44573,941],{"class":795},[609,44575,1475],{"class":614},[609,44577,4164],{"class":795},[609,44579,1475],{"class":614},[609,44581,2400],{"class":795},[609,44583,1485],{"class":614},[609,44585,632],{"class":614},[609,44587,759],{"class":614},[609,44589,44590,44592,44594,44596],{"class":611,"line":762},[609,44591,753],{"class":614},[609,44593,767],{"class":618},[609,44595,1872],{"class":622},[609,44597,759],{"class":614},[609,44599,44601,44603],{"class":44600,"line":772},[611,645],[609,44602,753],{"class":614},[609,44604,44605],{"class":618},"Stage\n",[609,44607,44609,44612,44614,44616,44619],{"class":44608,"line":777},[611,645],[609,44610,44611],{"class":622},"      lighting",[609,44613,629],{"class":614},[609,44615,632],{"class":614},[609,44617,44618],{"class":635},"rembrandt",[609,44620,2991],{"class":614},[609,44622,44624,44627,44629,44631,44634],{"class":44623,"line":803},[611,645],[609,44625,44626],{"class":622},"      shadows",[609,44628,629],{"class":614},[609,44630,632],{"class":614},[609,44632,44633],{"class":635},"contact",[609,44635,2991],{"class":614},[609,44637,44639,44641,44644,44646,44648,44650],{"class":44638,"line":603},[611,645],[609,44640,5697],{"class":614},[609,44642,44643],{"class":622},"adjust-camera",[609,44645,629],{"class":614},[609,44647,632],{"class":614},[609,44649,937],{"class":3874},[609,44651,2991],{"class":614},[609,44653,44655,44658,44660,44662,44664],{"class":44654,"line":826},[611,645],[609,44656,44657],{"class":622},"      environment",[609,44659,629],{"class":614},[609,44661,632],{"class":614},[609,44663,38238],{"class":635},[609,44665,2991],{"class":614},[609,44667,44669,44671,44673,44675,44677,44679],{"class":44668,"line":837},[611,645],[609,44670,5697],{"class":614},[609,44672,1890],{"class":622},[609,44674,629],{"class":614},[609,44676,632],{"class":614},[609,44678,1517],{"class":795},[609,44680,2991],{"class":614},[609,44682,44683],{"class":611,"line":848},[609,44684,5717],{"class":614},[609,44686,44687,44689,44691,44693],{"class":611,"line":858},[609,44688,829],{"class":614},[609,44690,832],{"class":618},[609,44692,10807],{"class":622},[609,44694,641],{"class":614},[609,44696,44697,44699,44701],{"class":611,"line":604},[609,44698,840],{"class":614},[609,44700,843],{"class":618},[609,44702,759],{"class":614},[609,44704,44705,44707,44709,44711,44713,44715,44717,44719],{"class":611,"line":878},[609,44706,840],{"class":614},[609,44708,8099],{"class":618},[609,44710,3982],{"class":622},[609,44712,629],{"class":614},[609,44714,632],{"class":614},[609,44716,6742],{"class":635},[609,44718,632],{"class":614},[609,44720,759],{"class":614},[609,44722,44723,44725,44727],{"class":611,"line":888},[609,44724,861],{"class":614},[609,44726,832],{"class":618},[609,44728,641],{"class":614},[609,44730,44731,44733,44735,44737,44739,44741,44743,44745,44747,44749,44751,44753,44755,44757,44759,44761,44763,44765,44767,44769,44771,44773,44775,44777,44779,44781],{"class":611,"line":2956},[609,44732,829],{"class":614},[609,44734,241],{"class":618},[609,44736,785],{"class":614},[609,44738,1463],{"class":622},[609,44740,629],{"class":614},[609,44742,632],{"class":614},[609,44744,1470],{"class":614},[609,44746,941],{"class":795},[609,44748,3602],{"class":614},[609,44750,796],{"class":795},[609,44752,1475],{"class":614},[609,44754,941],{"class":795},[609,44756,1485],{"class":614},[609,44758,632],{"class":614},[609,44760,37026],{"class":622},[609,44762,785],{"class":614},[609,44764,1993],{"class":622},[609,44766,629],{"class":614},[609,44768,632],{"class":614},[609,44770,1470],{"class":614},[609,44772,2400],{"class":795},[609,44774,1475],{"class":614},[609,44776,2400],{"class":795},[609,44778,1485],{"class":614},[609,44780,632],{"class":614},[609,44782,641],{"class":614},[609,44784,44785,44787,44789],{"class":611,"line":2964},[609,44786,840],{"class":614},[609,44788,8099],{"class":618},[609,44790,759],{"class":614},[609,44792,44793,44795,44797],{"class":611,"line":2994},[609,44794,861],{"class":614},[609,44796,241],{"class":618},[609,44798,641],{"class":614},[609,44800,44801,44803,44805],{"class":611,"line":3011},[609,44802,871],{"class":614},[609,44804,387],{"class":618},[609,44806,641],{"class":614},[609,44808,44809,44811,44813],{"class":611,"line":3026},[609,44810,881],{"class":614},[609,44812,733],{"class":618},[609,44814,641],{"class":614},[609,44816,44817,44819,44821],{"class":611,"line":3051},[609,44818,704],{"class":614},[609,44820,722],{"class":618},[609,44822,641],{"class":614},[476,44824,898],{"id":897},[903,44826,44827,44837],{},[906,44828,44829],{},[909,44830,44831,44833,44835],{},[912,44832,914],{"align":973},[912,44834,917],{"align":973},[912,44836,920],{"align":973},[922,44838,44839,44857,44874,44892,44906,44922],{},[909,44840,44841,44846,44852],{},[927,44842,44843],{"align":973},[1677,44844,44845],{},"lighting",[927,44847,44848,44849],{"align":973},"Lighting setup. Options: ",[590,44850,44851],{},"null | undefined | false | 'rembrandt' | 'portrait' | 'upfront' | 'soft' | { main: [x, y, z], fill: [x, y, z] }",[927,44853,44854],{"align":973},[590,44855,44856],{},"'rembrandt'",[909,44858,44859,44863,44869],{},[927,44860,44861],{"align":973},[1677,44862,33081],{},[927,44864,44865,44866],{"align":973},"Controls the ground shadows. Options: ",[590,44867,44868],{},"boolean | 'contact' | 'accumulative' | StageShadows",[927,44870,44871],{"align":973},[590,44872,44873],{},"'contact'",[909,44875,44876,44881,44888],{},[927,44877,44878],{"align":973},[1677,44879,44880],{},"adjustCamera",[927,44882,44883,44884,44887],{"align":973},"Optionally wraps and thereby centers the models using ",[590,44885,44886],{},"\u003CBounds>",", can also be a camera offset",[927,44889,44890],{"align":973},[590,44891,937],{},[909,44893,44894,44898,44901],{},[927,44895,44896],{"align":973},[1677,44897,44382],{},[927,44899,44900],{"align":973},"The default environment",[927,44902,44903],{"align":973},[590,44904,44905],{},"'city'",[909,44907,44908,44912,44918],{},[927,44909,44910],{"align":973},[1677,44911,1890],{},[927,44913,44914,44915,44917],{"align":973},"Lighting intensity, ",[590,44916,941],{}," removes lights",[927,44919,44920],{"align":973},[590,44921,1517],{},[909,44923,44924,44929,44932],{},[927,44925,44926],{"align":973},[1677,44927,44928],{},"align",[927,44930,44931],{"align":973},"To adjust alignment",[927,44933,44934],{"align":973},[590,44935,1155],{},[7477,44937,44939],{"id":44938},"stageshadows-type","StageShadows Type",[586,44941,44942],{},"When using custom shadow configuration, you can pass an object with the following properties:",[903,44944,44945,44955],{},[906,44946,44947],{},[909,44948,44949,44951,44953],{},[912,44950,914],{"align":973},[912,44952,917],{"align":973},[912,44954,920],{"align":973},[922,44956,44957,44971,44984,44998,45012],{},[909,44958,44959,44963,44969],{},[927,44960,44961],{"align":973},[1677,44962,30376],{},[927,44964,44965,44966],{"align":973},"Shadow type: ",[590,44967,44968],{},"'contact' | 'accumulative'",[927,44970,4092],{"align":973},[909,44972,44973,44977,44980],{},[927,44974,44975],{"align":973},[1677,44976,34499],{},[927,44978,44979],{"align":973},"Shadow plane offset",[927,44981,44982],{"align":973},[590,44983,941],{},[909,44985,44986,44990,44993],{},[927,44987,44988],{"align":973},[1677,44989,36836],{},[927,44991,44992],{"align":973},"Shadow bias",[927,44994,44995],{"align":973},[590,44996,44997],{},"-0.0001",[909,44999,45000,45005,45008],{},[927,45001,45002],{"align":973},[1677,45003,45004],{},"normalBias",[927,45006,45007],{"align":973},"Shadow normal bias",[927,45009,45010],{"align":973},[590,45011,941],{},[909,45013,45014,45018,45021],{},[927,45015,45016],{"align":973},[1677,45017,11182],{},[927,45019,45020],{"align":973},"Shadow map size",[927,45022,45023],{"align":973},[590,45024,33460],{},[586,45026,45027,45028,1475,45031,1695,45034,1122],{},"Additionally inherits all props from ",[590,45029,45030],{},"AccumulativeShadowsProps",[590,45032,45033],{},"RandomizedLightsProps",[590,45035,45036],{},"ContactShadowsProps",[1303,45038,45039],{},"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 .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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":548,"searchDepth":549,"depth":550,"links":45041},[45042,45043],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898,"children":45044},[45045],{"id":44938,"depth":680,"text":44939},"Creates a complete stage setup with lighting, shadows, and environment.",{},{"title":387,"description":45046},"ZUAOlQhFpQ_UzI0nm_Ae7_izK4y1v3X6HA7NTC6mQ3o",{"id":45051,"title":391,"body":45052,"description":45339,"extension":563,"links":564,"meta":45340,"navigation":566,"path":392,"seo":45341,"stem":393,"__hash__":45342},"docs/2.api/8.staging/stars.md",{"type":473,"value":45053,"toc":45335},[45054,45059,45065,45067,45072,45229,45231,45333],[580,45055,45056],{},[45057,45058],"staging-stars",{},[586,45060,45061,45064],{},[590,45062,45063],{},"\u003CStars />"," is a component that renders a stars in the sky of your scene. It is an abstraction that use Points, PointsMaterial and BufferGeometry to create a beautiful stars effect",[476,45066,15],{"id":596},[586,45068,40596,45069,45071],{},[590,45070,45063],{}," component without passing any props,",[598,45073,45076],{"className":600,"code":45074,"highlights":45075,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Stars } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" />\n    \u003CStars />\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[680,762],[590,45077,45078,45098,45116,45136,45144,45148,45156,45164,45196,45205,45213,45221],{"__ignoreMap":548},[609,45079,45080,45082,45084,45086,45088,45090,45092,45094,45096],{"class":611,"line":549},[609,45081,615],{"class":614},[609,45083,619],{"class":618},[609,45085,623],{"class":622},[609,45087,626],{"class":622},[609,45089,629],{"class":614},[609,45091,632],{"class":614},[609,45093,636],{"class":635},[609,45095,632],{"class":614},[609,45097,641],{"class":614},[609,45099,45100,45102,45104,45106,45108,45110,45112,45114],{"class":611,"line":550},[609,45101,649],{"class":648},[609,45103,652],{"class":614},[609,45105,687],{"class":655},[609,45107,665],{"class":614},[609,45109,668],{"class":648},[609,45111,671],{"class":614},[609,45113,696],{"class":635},[609,45115,677],{"class":614},[609,45117,45119,45121,45123,45126,45128,45130,45132,45134],{"class":45118,"line":680},[611,645],[609,45120,649],{"class":648},[609,45122,652],{"class":614},[609,45124,45125],{"class":655}," Stars",[609,45127,665],{"class":614},[609,45129,668],{"class":648},[609,45131,671],{"class":614},[609,45133,674],{"class":635},[609,45135,677],{"class":614},[609,45137,45138,45140,45142],{"class":611,"line":701},[609,45139,704],{"class":614},[609,45141,619],{"class":618},[609,45143,641],{"class":614},[609,45145,45146],{"class":611,"line":711},[609,45147,714],{"emptyLinePlaceholder":566},[609,45149,45150,45152,45154],{"class":611,"line":717},[609,45151,615],{"class":614},[609,45153,722],{"class":618},[609,45155,641],{"class":614},[609,45157,45158,45160,45162],{"class":611,"line":727},[609,45159,730],{"class":614},[609,45161,733],{"class":618},[609,45163,641],{"class":614},[609,45165,45166,45168,45170,45172,45174,45176,45178,45180,45182,45184,45186,45188,45190,45192,45194],{"class":611,"line":750},[609,45167,753],{"class":614},[609,45169,756],{"class":618},[609,45171,785],{"class":614},[609,45173,1463],{"class":622},[609,45175,629],{"class":614},[609,45177,632],{"class":614},[609,45179,1470],{"class":614},[609,45181,941],{"class":795},[609,45183,1475],{"class":614},[609,45185,4164],{"class":795},[609,45187,1475],{"class":614},[609,45189,2400],{"class":795},[609,45191,1485],{"class":614},[609,45193,632],{"class":614},[609,45195,759],{"class":614},[609,45197,45199,45201,45203],{"class":45198,"line":762},[611,645],[609,45200,753],{"class":614},[609,45202,391],{"class":618},[609,45204,759],{"class":614},[609,45206,45207,45209,45211],{"class":611,"line":772},[609,45208,753],{"class":614},[609,45210,3522],{"class":618},[609,45212,759],{"class":614},[609,45214,45215,45217,45219],{"class":611,"line":777},[609,45216,881],{"class":614},[609,45218,733],{"class":618},[609,45220,641],{"class":614},[609,45222,45223,45225,45227],{"class":611,"line":803},[609,45224,704],{"class":614},[609,45226,722],{"class":618},[609,45228,641],{"class":614},[476,45230,898],{"id":897},[903,45232,45233,45243],{},[906,45234,45235],{},[909,45236,45237,45239,45241],{},[912,45238,914],{"align":973},[912,45240,917],{"align":973},[912,45242,920],{},[922,45244,45245,45256,45267,45278,45289,45300,45311,45322],{},[909,45246,45247,45251,45254],{},[927,45248,45249],{"align":973},[1677,45250,11182],{},[927,45252,45253],{"align":973},"The size of the stars",[927,45255,2207],{},[909,45257,45258,45262,45265],{},[927,45259,45260],{"align":973},[1677,45261,41603],{},[927,45263,45264],{"align":973},"keep the same size regardless distance.",[927,45266,937],{},[909,45268,45269,45273,45276],{},[927,45270,45271],{"align":973},[1677,45272,4877],{},[927,45274,45275],{"align":973},"show transparency on the stars texture",[927,45277,937],{},[909,45279,45280,45284,45287],{},[927,45281,45282],{"align":973},[1677,45283,33411],{},[927,45285,45286],{"align":973},"enables the WebGL to know when not to render the pixeltext.",[927,45288,1911],{},[909,45290,45291,45295,45298],{},[927,45292,45293],{"align":973},[1677,45294,41513],{},[927,45296,45297],{"align":973},"texture of the stars",[927,45299,3156],{},[909,45301,45302,45306,45309],{},[927,45303,45304],{"align":973},[1677,45305,5104],{},[927,45307,45308],{"align":973},"number of stars",[927,45310,41552],{},[909,45312,45313,45317,45320],{},[927,45314,45315],{"align":973},[1677,45316,6362],{},[927,45318,45319],{"align":973},"depth of star's shape",[927,45321,4601],{},[909,45323,45324,45328,45331],{},[927,45325,45326],{"align":973},[1677,45327,36929],{},[927,45329,45330],{"align":973},"Radius of star's shape",[927,45332,6032],{},[1303,45334,1652],{},{"title":548,"searchDepth":549,"depth":550,"links":45336},[45337,45338],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},"Renders beautiful stars in the sky using Points and BufferGeometry.",{},{"title":391,"description":45339},"Hth9yEzN_KgLKS-QKylR25ofLqF86DItRzJAOv9FBUM",[45344,46287,46736,47944,48368,54366,54988,55828,56830],{"id":45345,"title":401,"body":45346,"description":46283,"extension":563,"links":564,"meta":46284,"navigation":566,"path":402,"seo":46285,"stem":403,"__hash__":46286},"docs/2.api/9.objects/animated-sprite.md",{"type":473,"value":45347,"toc":46265},[45348,45353,45368,45376,45378,45570,45580,45584,45590,45604,45613,45617,45624,45643,45647,45655,45659,45685,45687,46013,46015,46083,46086,46092,46096,46099,46104,46107,46119,46134,46136,46139,46176,46179,46191,46195,46203,46213,46219,46222,46253,46256,46263],[580,45349,45350],{},[45351,45352],"objects-animated-sprite",{},[586,45354,45355,45358,45359,45364,45365,45367],{},[590,45356,45357],{},"\u003CAnimatedSprite />"," displays 2D animations defined in a ",[1116,45360,45363],{"href":45361,"rel":45362},"https://en.wikipedia.org/wiki/Texture_atlas",[1120],"texture atlas",". A typical ",[590,45366,45357],{}," will use:",[3140,45369,45370,45373],{},[3143,45371,45372],{},"An image containing multiple sprites",[3143,45374,45375],{},"A JSON atlas containing the individual sprite coordinates in the image",[476,45377,15],{"id":596},[598,45379,45382],{"className":600,"code":45380,"highlights":45381,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { AnimatedSprite } from '@tresjs/cientos'\n\nconst currentAnimation = ref('cientosIdle')\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CSuspense>\n      \u003CAnimatedSprite\n        image=\"https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosTexture.png\"\n        atlas=\"https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosAtlas.json\"\n        :animation=\"currentAnimation\"\n      />\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n",[550,772,777,803,603,826],[590,45383,45384,45404,45424,45428,45450,45458,45462,45470,45478,45486,45494,45509,45524,45541,45546,45554,45562],{"__ignoreMap":548},[609,45385,45386,45388,45390,45392,45394,45396,45398,45400,45402],{"class":611,"line":549},[609,45387,615],{"class":614},[609,45389,619],{"class":618},[609,45391,623],{"class":622},[609,45393,626],{"class":622},[609,45395,629],{"class":614},[609,45397,632],{"class":614},[609,45399,636],{"class":635},[609,45401,632],{"class":614},[609,45403,641],{"class":614},[609,45405,45407,45409,45411,45414,45416,45418,45420,45422],{"class":45406,"line":550},[611,645],[609,45408,649],{"class":648},[609,45410,652],{"class":614},[609,45412,45413],{"class":655}," AnimatedSprite",[609,45415,665],{"class":614},[609,45417,668],{"class":648},[609,45419,671],{"class":614},[609,45421,674],{"class":635},[609,45423,677],{"class":614},[609,45425,45426],{"class":611,"line":680},[609,45427,714],{"emptyLinePlaceholder":566},[609,45429,45430,45432,45435,45437,45439,45441,45443,45446,45448],{"class":611,"line":701},[609,45431,2693],{"class":622},[609,45433,45434],{"class":655}," currentAnimation ",[609,45436,629],{"class":614},[609,45438,5435],{"class":2804},[609,45440,2974],{"class":655},[609,45442,5540],{"class":614},[609,45444,45445],{"class":635},"cientosIdle",[609,45447,5540],{"class":614},[609,45449,5543],{"class":655},[609,45451,45452,45454,45456],{"class":611,"line":711},[609,45453,704],{"class":614},[609,45455,619],{"class":618},[609,45457,641],{"class":614},[609,45459,45460],{"class":611,"line":717},[609,45461,714],{"emptyLinePlaceholder":566},[609,45463,45464,45466,45468],{"class":611,"line":727},[609,45465,615],{"class":614},[609,45467,722],{"class":618},[609,45469,641],{"class":614},[609,45471,45472,45474,45476],{"class":611,"line":750},[609,45473,730],{"class":614},[609,45475,733],{"class":618},[609,45477,641],{"class":614},[609,45479,45480,45482,45484],{"class":611,"line":762},[609,45481,753],{"class":614},[609,45483,15941],{"class":618},[609,45485,641],{"class":614},[609,45487,45489,45491],{"class":45488,"line":772},[611,645],[609,45490,829],{"class":614},[609,45492,45493],{"class":618},"AnimatedSprite\n",[609,45495,45497,45500,45502,45504,45507],{"class":45496,"line":777},[611,645],[609,45498,45499],{"class":622},"        image",[609,45501,629],{"class":614},[609,45503,632],{"class":614},[609,45505,45506],{"class":635},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosTexture.png",[609,45508,2991],{"class":614},[609,45510,45512,45515,45517,45519,45522],{"class":45511,"line":803},[611,645],[609,45513,45514],{"class":622},"        atlas",[609,45516,629],{"class":614},[609,45518,632],{"class":614},[609,45520,45521],{"class":635},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosAtlas.json",[609,45523,2991],{"class":614},[609,45525,45527,45529,45532,45534,45536,45539],{"class":45526,"line":603},[611,645],[609,45528,2997],{"class":614},[609,45530,45531],{"class":622},"animation",[609,45533,629],{"class":614},[609,45535,632],{"class":614},[609,45537,45538],{"class":655},"currentAnimation",[609,45540,2991],{"class":614},[609,45542,45544],{"class":45543,"line":826},[611,645],[609,45545,3054],{"class":614},[609,45547,45548,45550,45552],{"class":611,"line":837},[609,45549,871],{"class":614},[609,45551,15941],{"class":618},[609,45553,641],{"class":614},[609,45555,45556,45558,45560],{"class":611,"line":848},[609,45557,881],{"class":614},[609,45559,733],{"class":618},[609,45561,641],{"class":614},[609,45563,45564,45566,45568],{"class":611,"line":858},[609,45565,704],{"class":614},[609,45567,722],{"class":618},[609,45569,641],{"class":614},[3729,45571,45572],{},[586,45573,45574,45576,45577,1122],{},[590,45575,45357],{}," loads resources asynchronously, so it must be wrapped in a ",[590,45578,45579],{},"\u003CSuspense />",[476,45581,45583],{"id":45582},"compiling-an-atlas","Compiling an atlas",[586,45585,45586,45587,45589],{},"In typical usage, ",[590,45588,45357],{}," requires both the URL to a texture of compiled sprite images and a JSON atlas containing information about the sprites in the texture.",[3140,45591,45592,45598],{},[3143,45593,45594],{},[1116,45595,45597],{"href":45506,"rel":45596},[1120],"example compiled texture",[3143,45599,45600],{},[1116,45601,45603],{"href":45521,"rel":45602},[1120],"example JSON atlas",[586,45605,45606,45607,45612],{},"Compiling source images into a texture atlas is usually handled by third-party software. You may find ",[1116,45608,45611],{"href":45609,"rel":45610},"https://www.codeandweb.com/texturepacker",[1120],"TexturePacker"," useful.",[476,45614,45616],{"id":45615},"without-an-atlas","Without an atlas",[586,45618,45619,45620,45623],{},"There may be cases where you don't want to supply an atlas to the ",[590,45621,45622],{},"atlas"," prop. To do so:",[3140,45625,45626,45629,45632,45635],{},[3143,45627,45628],{},"Compile your source images into a single image texture.",[3143,45630,45631],{},"Space each sprite into equally sized columns and rows in the compiled image texture.",[3143,45633,45634],{},"Ensure no extra padding has been added to the compiled image texture.",[3143,45636,45637,45638,45640,45641,1122],{},"Set the ",[590,45639,45622],{}," prop to number of columns, number of rows as ",[590,45642,23074],{},[476,45644,45646],{"id":45645},"spritesheets-in-the-wild","Spritesheets in the wild",[3729,45648,45649],{},[586,45650,45651,45652,45654],{},"In the wild, spritesheets are often distributed without atlases and the images are often compiled by hand. It can be difficult or impossible to use these resources directly with ",[590,45653,45357],{},". In many cases, it's advisable to recompile the spritesheet.",[7477,45656,45658],{"id":45657},"how-to-recompile-an-existing-spritesheet-image","How to recompile an existing spritesheet image",[3140,45660,45661,45664,45667,45670,45682],{},[3143,45662,45663],{},"Cut individual sprites from the spritesheet and paste them into separate layers in an image editing application, e.g., GIMP.",[3143,45665,45666],{},"Align the layers for animation. Toggling layer visibility on/off will show you how the animation will display, frame to frame.",[3143,45668,45669],{},"Export layers as individual images.",[3143,45671,45672,45673,45675,45678,45679,45681],{},"Name the individual images according to the following pattern: ",[2512,45674],{},[590,45676,45677],{},"[animation name][frame number].[extension]"," ",[2512,45680],{},"E.g., walk000.png, walk001.png, idle000.png, idle001.png",[3143,45683,45684],{},"Compile individual images into an image texture and atlas using a texture packing application, like TexturePacker.",[476,45686,898],{"id":897},[903,45688,45689,45699],{},[906,45690,45691],{},[909,45692,45693,45695,45697],{},[912,45694,3122],{"align":973},[912,45696,917],{"align":973},[912,45698,920],{"align":973},[922,45700,45701,45713,45751,45811,45825,45838,45861,45875,45889,45903,45917,45936,45959,45977,45995],{},[909,45702,45703,45706,45711],{},[927,45704,45705],{"align":973},"image",[927,45707,45708,45710],{"align":973},[590,45709,12043],{}," – URL of the image texture or an image dataURL. This prop is not reactive.",[927,45712],{"align":973},[909,45714,45715,45717,45749],{},[927,45716,45622],{"align":973},[927,45718,45719,45722,45723,45746,45748],{"align":973},[590,45720,45721],{},"string | Atlasish"," – ",[3140,45724,45725,45730,45735,45740],{},[3143,45726,934,45727,45729],{},[590,45728,12043],{},", the URL of the JSON atlas.",[3143,45731,934,45732,45734],{},[590,45733,2541],{},", the number of columns in the texture.",[3143,45736,934,45737,45739],{},[590,45738,23074],{},", the number of columns/rows in the texture.",[3143,45741,934,45742,45745],{},[590,45743,45744],{},"AtlasData",", the atlas as a JS object.",[2512,45747],{},"This prop is not reactive.",[927,45750],{"align":973},[909,45752,45753,45756,45809],{},[927,45754,45755],{"align":973},"definitions",[927,45757,45758,45761,45762,45764,45765,45767,45769,45770,45772,45774,45775],{"align":973},[590,45759,45760],{},"Record\u003Cstring, string>"," – Specify playback frame order and repeated frames (delays). ",[590,45763,45755],{}," is a record where keys are atlas animation names and values are strings containing an animation definition.",[2512,45766],{},[2512,45768],{},"A \"animation definition\" comma-separated string of frame numbers with optional parentheses-surrounded durations.",[2512,45771],{},[2512,45773],{},"Here is how various definition strings convert to arrays of frames for playback:",[3140,45776,45777,45784,45791,45797,45803],{},[3143,45778,45779,45780,45783],{},"\"0,2,1\" - ",[609,45781,45782],{},"0,2,1",", i.e., play frame 0, 2, then 1.",[3143,45785,45786,45787,45790],{},"\"2(10)\" - ",[609,45788,45789],{},"2,2,2,2,2,2,2,2,2,2",", i.e., play from 2 10 times.",[3143,45792,45793,45794],{},"\"1-4\" - ",[609,45795,45796],{},"1,2,3,4",[3143,45798,45799,45800],{},"\"10-5(2)\" - ",[609,45801,45802],{},"10,10,9,9,8,8,7,7,6,6,5,5",[3143,45804,45805,45806],{},"\"1-4(3),10(2)\" - ",[609,45807,45808],{},"1,1,1,2,2,2,3,3,3,4,4,4,10,10",[927,45810],{"align":973},[909,45812,45813,45816,45821],{},[927,45814,45815],{"align":973},"fps",[927,45817,45818,45820],{"align":973},[590,45819,2541],{}," – Desired frames per second of the animation.",[927,45822,45823],{"align":973},[590,45824,22632],{},[909,45826,45827,45829,45834],{},[927,45828,20504],{"align":973},[927,45830,45831,45833],{"align":973},[590,45832,11963],{}," – Whether or not the animation should loop.",[927,45835,45836],{"align":973},[590,45837,937],{},[909,45839,45840,45842,45857],{},[927,45841,45531],{"align":973},[927,45843,45844,45847,45848,45850,45851,45853,45854,45856],{"align":973},[590,45845,45846],{},"string | [number, number] | number"," – If ",[590,45849,12043],{},", name of the animation to play. If ",[590,45852,23074],{},", start and end frames of the animation. If ",[590,45855,2541],{},", frame number to display.",[927,45858,45859],{"align":973},[590,45860,941],{},[909,45862,45863,45866,45871],{},[927,45864,45865],{"align":973},"paused",[927,45867,45868,45870],{"align":973},[590,45869,11963],{}," – Whether the animation is paused.",[927,45872,45873],{"align":973},[590,45874,947],{},[909,45876,45877,45880,45885],{},[927,45878,45879],{"align":973},"reversed",[927,45881,45882,45884],{"align":973},[590,45883,11963],{}," – Whether to play the animation in reverse.",[927,45886,45887],{"align":973},[590,45888,947],{},[909,45890,45891,45894,45899],{},[927,45892,45893],{"align":973},"flipX",[927,45895,45896,45898],{"align":973},[590,45897,11963],{}," – Whether the sprite should be flipped, left to right.",[927,45900,45901],{"align":973},[590,45902,947],{},[909,45904,45905,45908,45913],{},[927,45906,45907],{"align":973},"resetOnEnd",[927,45909,45910,45912],{"align":973},[590,45911,11963],{}," – For a non-looping animation, when the animation ends, whether to display the zeroth frame.",[927,45914,45915],{"align":973},[590,45916,947],{},[909,45918,45919,45922,45932],{},[927,45920,45921],{"align":973},"asSprite",[927,45923,45924,45926,45927],{"align":973},[590,45925,11963],{}," – Whether to display the object as a THREE.Sprite. ",[1116,45928,45931],{"href":45929,"rel":45930},"https://threejs.org/docs/?q=sprite#api/en/objects/Sprite",[1120],"See THREE.Sprite",[927,45933,45934],{"align":973},[590,45935,937],{},[909,45937,45938,45940,45954],{},[927,45939,40361],{"align":973},[927,45941,45942,45945,45946,45949,45950,45953],{"align":973},[590,45943,45944],{},"TresVector2"," – Anchor point of the object. A value of ",[609,45947,45948],{},"0.5, 0.5"," corresponds to the center. ",[609,45951,45952],{},"0, 0"," is left, bottom.",[927,45955,45956],{"align":973},[590,45957,45958],{},"[0.5, 0.5]",[909,45960,45961,45963,45973],{},[927,45962,33411],{"align":973},[927,45964,45965,45967,45968],{"align":973},[590,45966,2541],{}," – Alpha test value for the material. ",[1116,45969,45972],{"href":45970,"rel":45971},"https://threejs.org/docs/#api/en/materials/Material.alphaTest",[1120],"See THREE.Material.alphaTest",[927,45974,45975],{"align":973},[590,45976,7211],{},[909,45978,45979,45981,45991],{},[927,45980,42366],{"align":973},[927,45982,45983,45985,45986],{"align":973},[590,45984,11963],{}," – Depth test value for the material. ",[1116,45987,45990],{"href":45988,"rel":45989},"https://threejs.org/docs/#api/en/materials/Material.depthTest",[1120],"See THREE.Material.depthTest",[927,45992,45993],{"align":973},[590,45994,937],{},[909,45996,45997,45999,46009],{},[927,45998,4338],{"align":973},[927,46000,46001,46003,46004],{"align":973},[590,46002,11963],{}," – Depth write value for the material. ",[1116,46005,46008],{"href":46006,"rel":46007},"https://threejs.org/docs/#api/en/materials/Material.depthWrite",[1120],"See THREE.Material.depthWrite",[927,46010,46011],{"align":973},[590,46012,937],{},[476,46014,7746],{"id":7745},[903,46016,46017,46028],{},[906,46018,46019],{},[909,46020,46021,46023,46025],{},[912,46022,7811],{},[912,46024,917],{},[912,46026,46027],{},"Argument",[922,46029,46030,46045,46065],{},[909,46031,46032,46037,46040],{},[927,46033,46034],{},[590,46035,46036],{},"frame",[927,46038,46039],{},"Emitted when the displayed animation frame changes – at most once per tick, frames may be dropped",[927,46041,46042,46044],{},[590,46043,12043],{}," – Name of the newly displayed frame",[909,46046,46047,46051,46060],{},[927,46048,46049],{},[590,46050,7791],{},[927,46052,46053,46054,46057,46058],{},"Emitted when the animation ends – ",[590,46055,46056],{},"props.loop"," must be set to ",[590,46059,947],{},[927,46061,46062,46064],{},[590,46063,12043],{}," – Name of the ending frame",[909,46066,46067,46071,46078],{},[927,46068,46069],{},[590,46070,20504],{},[927,46072,46073,46074,46057,46076],{},"Emitted when the animation loops – ",[590,46075,46056],{},[590,46077,937],{},[927,46079,46080,46082],{},[590,46081,12043],{}," – Name of the frame at the end of the loop",[476,46084,46085],{"id":45531},"Animation",[586,46087,2257,46088,46091],{},[590,46089,46090],{},":animation"," prop holds either the name of the currently playing animation or a range of frames to play, or a frame number to display.",[7477,46093,46095],{"id":46094},"using-named-animations-as-animation","Using named animations as animation",[586,46097,46098],{},"When individual files are converted to a spritesheet/atlas, typically the original images' filenames will be included in the atlas.",[586,46100,46101,46103],{},[590,46102,45357],{}," uses those filenames to automatically group images into animations.",[586,46105,46106],{},"Use either of the following naming conventions for your source images ...",[3140,46108,46109,46114],{},[3143,46110,46111],{},[590,46112,46113],{},"[animation name][frame number].[file_extension]",[3143,46115,46116],{},[590,46117,46118],{},"[animation name]_[frame number].[file_extension]",[586,46120,46121,46122,46124,46125,46128,46129,46131,46132,35336],{},"... then ",[590,46123,45357],{}," will automatically make all ",[590,46126,46127],{},"[animation name]"," available for playback. Just pass ",[590,46130,46127],{}," to the component's ",[590,46133,46090],{},[7477,46135,35442],{"id":35441},[586,46137,46138],{},"For our Cientos heart cartoon character animation, here's how the filenames map to animation names.",[903,46140,46141,46151],{},[906,46142,46143],{},[909,46144,46145,46148],{},[912,46146,46147],{},"Filenames",[912,46149,46150],{},"Animation name",[922,46152,46153,46160,46168],{},[909,46154,46155,46158],{},[927,46156,46157],{},"cientosIdle0000.png, cientosIdle0001.png, ...",[927,46159,45445],{},[909,46161,46162,46165],{},[927,46163,46164],{},"cientosIdleToWalkTransition0000.png",[927,46166,46167],{},"cientosIdleToWalkTransition",[909,46169,46170,46173],{},[927,46171,46172],{},"cientosWalk0000.png, cientosWalk0001.png, ...",[927,46174,46175],{},"cientosWalk",[476,46177,46178],{"id":45755},"Definitions",[586,46180,46181,46182,46185,46186,46190],{},"You can supply an object to the ",[590,46183,46184],{},":definitions"," prop. Any ",[1116,46187,46189],{"href":46188},"#animation","named animation"," can be a key. The value is a string that specifies frame order and delays.",[7477,46192,46194],{"id":46193},"demo","Demo",[586,46196,46197,46198,43346,46200,1122],{},"In this demo, the 'idle' animation is comprised of six different images. By default, those images will play sequentially when the ",[590,46199,46090],{},[590,46201,46202],{},"'idle'",[586,46204,46205,46206,46208,46209,46212],{},"But below, we've added a ",[590,46207,46184],{}," prop with this value for the ",[590,46210,46211],{},"idle"," key:",[598,46214,46217],{"className":46215,"code":46216,"language":23872},[23870],"'0-5, 0(10), 1-2, 3(20), 4-5, 0-5(3)'\n",[590,46218,46216],{"__ignoreMap":548},[586,46220,46221],{},"So, instead of playing images 0-5 sequentially, this animation will play instead:",[3140,46223,46224,46233,46247],{},[3143,46225,46226,46229,46230,46232],{},[590,46227,46228],{},"0-5"," – Play all six images (",[590,46231,46228],{},") of the animation normally.",[3143,46234,46235,46238,46239,46242,46243,46246],{},[590,46236,46237],{},"0(10), 1-2, 3(20), 4-5"," – Play all six images again with a delay of ten frames at the bottom of the bounce (",[590,46240,46241],{},"0(10)",") and a delay of twenty frames at the top of the bounce (",[590,46244,46245],{},"3(20)",").",[3143,46248,46249,46252],{},[590,46250,46251],{},"0-5(3)"," – Finally, play all six images of the animation with a delay of three frames each.",[476,46254,46255],{"id":40361},"Center",[586,46257,46258,46259,46262],{},"In addition to being the sprite's anchor point, the ",[590,46260,46261],{},":center"," prop also controls how differently sized source images will \"grow\" and \"shrink\". Namely, they \"grow out from\" and \"shrink towards\" the center.",[1303,46264,39309],{},{"title":548,"searchDepth":549,"depth":550,"links":46266},[46267,46268,46269,46270,46273,46274,46275,46279,46282],{"id":596,"depth":550,"text":15},{"id":45582,"depth":550,"text":45583},{"id":45615,"depth":550,"text":45616},{"id":45645,"depth":550,"text":45646,"children":46271},[46272],{"id":45657,"depth":680,"text":45658},{"id":897,"depth":550,"text":898},{"id":7745,"depth":550,"text":7746},{"id":45531,"depth":550,"text":46085,"children":46276},[46277,46278],{"id":46094,"depth":680,"text":46095},{"id":35441,"depth":680,"text":35442},{"id":45755,"depth":550,"text":46178,"children":46280},[46281],{"id":46193,"depth":680,"text":46194},{"id":40361,"depth":550,"text":46255},"Display 2D animations defined in a texture atlas.",{},{"title":401,"description":46283},"TOx2TSEHnQeUR_DoVqP-W-cCHOVI1DisvWaE29LwWYA",{"id":46288,"title":405,"body":46289,"description":46732,"extension":563,"links":564,"meta":46733,"navigation":566,"path":406,"seo":46734,"stem":407,"__hash__":46735},"docs/2.api/9.objects/cube-camera.md",{"type":473,"value":46290,"toc":46728},[46291,46296,46306,46311,46313,46629,46631,46726],[580,46292,46293],{},[46294,46295],"objects-cube-camera",{},[586,46297,46298,46301,46302,46305],{},[590,46299,46300],{},"\u003CCubeCamera />"," creates a ",[590,46303,46304],{},"THREE.CubeCamera"," and uses it to render an environment map of your scene. The environment map is then applied to component's children.",[586,46307,46308,46310],{},[590,46309,46300],{}," makes its children invisible while rendering to the internal buffer so that they are not included in the reflection.",[476,46312,15],{"id":596},[598,46314,46317],{"className":600,"code":46315,"highlights":46316,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { CubeCamera, OrbitControls } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 2, 5]\" />\n    \u003COrbitControls />\n\n    \u003CCubeCamera :resolution=\"256\" :frames=\"Infinity\">\n      \u003CTresMesh>\n        \u003CTresSphereGeometry :args=\"[1, 32, 32]\" />\n        \u003CTresMeshStandardMaterial :metalness=\"1\" :roughness=\"0\" />\n      \u003C/TresMesh>\n    \u003C/CubeCamera>\n\n    \u003CTresAmbientLight :intensity=\"0.5\" />\n    \u003CTresDirectionalLight :position=\"[0, 2, 4]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n",[550,772,837],[590,46318,46319,46339,46363,46371,46375,46383,46391,46423,46431,46435,46468,46476,46508,46540,46548,46557,46561,46581,46613,46621],{"__ignoreMap":548},[609,46320,46321,46323,46325,46327,46329,46331,46333,46335,46337],{"class":611,"line":549},[609,46322,615],{"class":614},[609,46324,619],{"class":618},[609,46326,623],{"class":622},[609,46328,626],{"class":622},[609,46330,629],{"class":614},[609,46332,632],{"class":614},[609,46334,636],{"class":635},[609,46336,632],{"class":614},[609,46338,641],{"class":614},[609,46340,46342,46344,46346,46349,46351,46353,46355,46357,46359,46361],{"class":46341,"line":550},[611,645],[609,46343,649],{"class":648},[609,46345,652],{"class":614},[609,46347,46348],{"class":655}," CubeCamera",[609,46350,659],{"class":614},[609,46352,662],{"class":655},[609,46354,665],{"class":614},[609,46356,668],{"class":648},[609,46358,671],{"class":614},[609,46360,674],{"class":635},[609,46362,677],{"class":614},[609,46364,46365,46367,46369],{"class":611,"line":680},[609,46366,704],{"class":614},[609,46368,619],{"class":618},[609,46370,641],{"class":614},[609,46372,46373],{"class":611,"line":701},[609,46374,714],{"emptyLinePlaceholder":566},[609,46376,46377,46379,46381],{"class":611,"line":711},[609,46378,615],{"class":614},[609,46380,722],{"class":618},[609,46382,641],{"class":614},[609,46384,46385,46387,46389],{"class":611,"line":717},[609,46386,730],{"class":614},[609,46388,733],{"class":618},[609,46390,641],{"class":614},[609,46392,46393,46395,46397,46399,46401,46403,46405,46407,46409,46411,46413,46415,46417,46419,46421],{"class":611,"line":727},[609,46394,753],{"class":614},[609,46396,756],{"class":618},[609,46398,785],{"class":614},[609,46400,1463],{"class":622},[609,46402,629],{"class":614},[609,46404,632],{"class":614},[609,46406,1470],{"class":614},[609,46408,941],{"class":795},[609,46410,1475],{"class":614},[609,46412,796],{"class":795},[609,46414,1475],{"class":614},[609,46416,2400],{"class":795},[609,46418,1485],{"class":614},[609,46420,632],{"class":614},[609,46422,759],{"class":614},[609,46424,46425,46427,46429],{"class":611,"line":750},[609,46426,753],{"class":614},[609,46428,767],{"class":618},[609,46430,759],{"class":614},[609,46432,46433],{"class":611,"line":762},[609,46434,714],{"emptyLinePlaceholder":566},[609,46436,46438,46440,46442,46444,46446,46448,46450,46452,46454,46456,46458,46460,46462,46464,46466],{"class":46437,"line":772},[611,645],[609,46439,753],{"class":614},[609,46441,405],{"class":618},[609,46443,785],{"class":614},[609,46445,22879],{"class":622},[609,46447,629],{"class":614},[609,46449,632],{"class":614},[609,46451,22887],{"class":795},[609,46453,632],{"class":614},[609,46455,785],{"class":614},[609,46457,33329],{"class":622},[609,46459,629],{"class":614},[609,46461,632],{"class":614},[609,46463,6942],{"class":614},[609,46465,632],{"class":614},[609,46467,641],{"class":614},[609,46469,46470,46472,46474],{"class":611,"line":777},[609,46471,829],{"class":614},[609,46473,832],{"class":618},[609,46475,641],{"class":614},[609,46477,46478,46480,46482,46484,46486,46488,46490,46492,46494,46496,46498,46500,46502,46504,46506],{"class":611,"line":803},[609,46479,840],{"class":614},[609,46481,4739],{"class":618},[609,46483,785],{"class":614},[609,46485,1993],{"class":622},[609,46487,629],{"class":614},[609,46489,632],{"class":614},[609,46491,1470],{"class":614},[609,46493,1897],{"class":795},[609,46495,1475],{"class":614},[609,46497,5740],{"class":795},[609,46499,1475],{"class":614},[609,46501,5740],{"class":795},[609,46503,1485],{"class":614},[609,46505,632],{"class":614},[609,46507,759],{"class":614},[609,46509,46510,46512,46514,46516,46518,46520,46522,46524,46526,46528,46530,46532,46534,46536,46538],{"class":611,"line":603},[609,46511,840],{"class":614},[609,46513,8099],{"class":618},[609,46515,785],{"class":614},[609,46517,15737],{"class":622},[609,46519,629],{"class":614},[609,46521,632],{"class":614},[609,46523,1897],{"class":795},[609,46525,632],{"class":614},[609,46527,785],{"class":614},[609,46529,15752],{"class":622},[609,46531,629],{"class":614},[609,46533,632],{"class":614},[609,46535,941],{"class":795},[609,46537,632],{"class":614},[609,46539,759],{"class":614},[609,46541,46542,46544,46546],{"class":611,"line":826},[609,46543,861],{"class":614},[609,46545,832],{"class":618},[609,46547,641],{"class":614},[609,46549,46551,46553,46555],{"class":46550,"line":837},[611,645],[609,46552,871],{"class":614},[609,46554,405],{"class":618},[609,46556,641],{"class":614},[609,46558,46559],{"class":611,"line":848},[609,46560,714],{"emptyLinePlaceholder":566},[609,46562,46563,46565,46567,46569,46571,46573,46575,46577,46579],{"class":611,"line":858},[609,46564,753],{"class":614},[609,46566,3522],{"class":618},[609,46568,785],{"class":614},[609,46570,1890],{"class":622},[609,46572,629],{"class":614},[609,46574,632],{"class":614},[609,46576,1517],{"class":795},[609,46578,632],{"class":614},[609,46580,759],{"class":614},[609,46582,46583,46585,46587,46589,46591,46593,46595,46597,46599,46601,46603,46605,46607,46609,46611],{"class":611,"line":604},[609,46584,753],{"class":614},[609,46586,3543],{"class":618},[609,46588,785],{"class":614},[609,46590,1463],{"class":622},[609,46592,629],{"class":614},[609,46594,632],{"class":614},[609,46596,1470],{"class":614},[609,46598,941],{"class":795},[609,46600,1475],{"class":614},[609,46602,796],{"class":795},[609,46604,1475],{"class":614},[609,46606,3494],{"class":795},[609,46608,1485],{"class":614},[609,46610,632],{"class":614},[609,46612,759],{"class":614},[609,46614,46615,46617,46619],{"class":611,"line":878},[609,46616,881],{"class":614},[609,46618,733],{"class":618},[609,46620,641],{"class":614},[609,46622,46623,46625,46627],{"class":611,"line":888},[609,46624,704],{"class":614},[609,46626,722],{"class":618},[609,46628,641],{"class":614},[476,46630,898],{"id":897},[903,46632,46633,46643],{},[906,46634,46635],{},[909,46636,46637,46639,46641],{},[912,46638,914],{"align":973},[912,46640,917],{"align":973},[912,46642,920],{},[922,46644,46645,46664,46678,46691,46704,46715],{},[909,46646,46647,46651,46660],{},[927,46648,46649],{"align":973},[590,46650,33329],{},[927,46652,46653,46654,46656,46657,46659],{"align":973},"Number of frames to render. Set to ",[590,46655,1897],{}," for a static scene. ",[590,46658,6942],{}," to update continuously.",[927,46661,46662],{},[590,46663,6942],{},[909,46665,46666,46670,46673],{},[927,46667,46668],{"align":973},[590,46669,22879],{},[927,46671,46672],{"align":973},"Resolution of the FBO",[927,46674,46675],{},[590,46676,46677],{},"255",[909,46679,46680,46684,46687],{},[927,46681,46682],{"align":973},[590,46683,37216],{},[927,46685,46686],{"align":973},"Camera near",[927,46688,46689],{},[590,46690,2207],{},[909,46692,46693,46697,46700],{},[927,46694,46695],{"align":973},[590,46696,34969],{},[927,46698,46699],{"align":973},"Camera far",[927,46701,46702],{},[590,46703,5169],{},[909,46705,46706,46710,46713],{},[927,46707,46708],{"align":973},[590,46709,38187],{},[927,46711,46712],{"align":973},"Custom environment map that is temporarily set as the scene's background",[927,46714],{},[909,46716,46717,46721,46724],{},[927,46718,46719],{"align":973},[590,46720,34519],{},[927,46722,46723],{"align":973},"Custom fog that is temporarily set as the scene's fog",[927,46725],{},[1303,46727,1652],{},{"title":548,"searchDepth":549,"depth":550,"links":46729},[46730,46731],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},"Render environment maps for reflective objects.",{},{"title":405,"description":46732},"guPReQbllwq5wU5oLp9_7X7yFZih0xBoLQvebR42uzE",{"id":46737,"title":409,"body":46738,"description":47940,"extension":563,"links":564,"meta":47941,"navigation":566,"path":410,"seo":47942,"stem":411,"__hash__":47943},"docs/2.api/9.objects/fbo.md",{"type":473,"value":46739,"toc":47932},[46740,46745,46748,46755,46757,47447,47449,47562,47566,47568,47574,47581,47584,47843,47845,47929],[2562,46741,46742],{},[46743,46744],"objects-fbo",{},[586,46746,46747],{},"An FBO (or Frame Buffer Object) is generally used to render to a texture. This is useful for post-processing effects like blurring, or for rendering to a texture that will be used as a texture in a later draw call.",[586,46749,46750,46751,46754],{},"Cientos provides an ",[590,46752,46753],{},"\u003CFbo />"," component make it easy to use FBOs in your application.",[476,46756,15],{"id":596},[598,46758,46761],{"className":600,"code":46759,"highlights":46760,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { Fbo, OrbitControls } from '@tresjs/cientos'\nimport type { TresObject } from '@tresjs/core'\nimport { TresCanvas } from '@tresjs/core'\nimport { shallowRef } from 'vue'\n\nconst fboRef = shallowRef\u003CInstanceType\u003Ctypeof Fbo> | null>(null)\nconst torusRef = shallowRef\u003CTresObject | null>(null)\n\nfunction onLoop({ elapsed }: { elapsed: number }) {\n  if (!torusRef.value) { return }\n  torusRef.value.rotation.x = elapsed * 0.745\n  torusRef.value.rotation.y = elapsed * 0.361\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas :clear-color=\"0x222\" @loop=\"onLoop\">\n    \u003CTresPerspectiveCamera :position=\"[0, 0.5, 5]\" />\n    \u003COrbitControls />\n\n    \u003CTresGridHelper :args=\"[10, 10]\" />\n    \u003CFbo\n      ref=\"fboRef\"\n      :depth=\"false\"\n      :settings=\"{ samples: 1 }\"\n    />\n    \u003CTresMesh>\n      \u003CTresBoxGeometry :args=\"[1, 1, 1]\" />\n\n      \u003CTresMeshBasicMaterial\n        :color=\"0xFFFFFF\"\n        :map=\"fboRef?.instance?.texture ?? null\"\n      />\n    \u003C/TresMesh>\n\n    \u003CTresMesh\n      ref=\"torusRef\"\n      :position=\"[3, 0, 0]\"\n    >\n      \u003CTresTorusGeometry :args=\"[1, 0.5, 16, 100]\" />\n      \u003CTresMeshNormalMaterial />\n    \u003C/TresMesh>\n  \u003C/TresCanvas>\n\u003C/template>\n",[550,2994,3011,3026,3051],[590,46762,46763,46783,46807,46827,46845,46863,46867,46904,46930,46934,46958,46980,47006,47031,47035,47043,47047,47055,47088,47120,47128,47132,47160,47168,47182,47197,47221,47225,47233,47265,47269,47275,47290,47315,47319,47327,47331,47337,47349,47375,47379,47415,47423,47431,47439],{"__ignoreMap":548},[609,46764,46765,46767,46769,46771,46773,46775,46777,46779,46781],{"class":611,"line":549},[609,46766,615],{"class":614},[609,46768,619],{"class":618},[609,46770,623],{"class":622},[609,46772,626],{"class":622},[609,46774,629],{"class":614},[609,46776,632],{"class":614},[609,46778,636],{"class":635},[609,46780,632],{"class":614},[609,46782,641],{"class":614},[609,46784,46786,46788,46790,46793,46795,46797,46799,46801,46803,46805],{"class":46785,"line":550},[611,645],[609,46787,649],{"class":648},[609,46789,652],{"class":614},[609,46791,46792],{"class":655}," Fbo",[609,46794,659],{"class":614},[609,46796,662],{"class":655},[609,46798,665],{"class":614},[609,46800,668],{"class":648},[609,46802,671],{"class":614},[609,46804,674],{"class":635},[609,46806,677],{"class":614},[609,46808,46809,46811,46813,46815,46817,46819,46821,46823,46825],{"class":611,"line":680},[609,46810,649],{"class":648},[609,46812,12612],{"class":648},[609,46814,652],{"class":614},[609,46816,12617],{"class":655},[609,46818,665],{"class":614},[609,46820,668],{"class":648},[609,46822,671],{"class":614},[609,46824,696],{"class":635},[609,46826,677],{"class":614},[609,46828,46829,46831,46833,46835,46837,46839,46841,46843],{"class":611,"line":701},[609,46830,649],{"class":648},[609,46832,652],{"class":614},[609,46834,687],{"class":655},[609,46836,665],{"class":614},[609,46838,668],{"class":648},[609,46840,671],{"class":614},[609,46842,696],{"class":635},[609,46844,677],{"class":614},[609,46846,46847,46849,46851,46853,46855,46857,46859,46861],{"class":611,"line":711},[609,46848,649],{"class":648},[609,46850,652],{"class":614},[609,46852,7909],{"class":655},[609,46854,665],{"class":614},[609,46856,668],{"class":648},[609,46858,671],{"class":614},[609,46860,605],{"class":635},[609,46862,677],{"class":614},[609,46864,46865],{"class":611,"line":717},[609,46866,714],{"emptyLinePlaceholder":566},[609,46868,46869,46871,46874,46876,46878,46880,46883,46886,46888,46890,46893,46896,46898,46900,46902],{"class":611,"line":727},[609,46870,2693],{"class":622},[609,46872,46873],{"class":655}," fboRef ",[609,46875,629],{"class":614},[609,46877,7909],{"class":2804},[609,46879,615],{"class":614},[609,46881,46882],{"class":1176},"InstanceType",[609,46884,46885],{"class":614},"\u003Ctypeof",[609,46887,46792],{"class":655},[609,46889,12669],{"class":614},[609,46891,46892],{"class":614}," |",[609,46894,46895],{"class":1176}," null",[609,46897,12669],{"class":614},[609,46899,2974],{"class":655},[609,46901,3156],{"class":614},[609,46903,5543],{"class":655},[609,46905,46906,46908,46910,46912,46914,46916,46918,46920,46922,46924,46926,46928],{"class":611,"line":750},[609,46907,2693],{"class":622},[609,46909,5461],{"class":655},[609,46911,629],{"class":614},[609,46913,7909],{"class":2804},[609,46915,615],{"class":614},[609,46917,12666],{"class":1176},[609,46919,46892],{"class":614},[609,46921,46895],{"class":1176},[609,46923,12669],{"class":614},[609,46925,2974],{"class":655},[609,46927,3156],{"class":614},[609,46929,5543],{"class":655},[609,46931,46932],{"class":611,"line":762},[609,46933,714],{"emptyLinePlaceholder":566},[609,46935,46936,46938,46940,46942,46944,46946,46948,46950,46952,46954,46956],{"class":611,"line":772},[609,46937,8445],{"class":622},[609,46939,33655],{"class":2804},[609,46941,33658],{"class":614},[609,46943,33661],{"class":5499},[609,46945,33664],{"class":614},[609,46947,652],{"class":614},[609,46949,33661],{"class":618},[609,46951,1194],{"class":614},[609,46953,2701],{"class":1176},[609,46955,33675],{"class":614},[609,46957,1180],{"class":614},[609,46959,46960,46962,46964,46966,46968,46970,46972,46974,46976,46978],{"class":611,"line":777},[609,46961,8458],{"class":648},[609,46963,2717],{"class":618},[609,46965,8463],{"class":614},[609,46967,5647],{"class":655},[609,46969,1122],{"class":614},[609,46971,5500],{"class":655},[609,46973,2752],{"class":618},[609,46975,8474],{"class":614},[609,46977,8477],{"class":648},[609,46979,8480],{"class":614},[609,46981,46982,46985,46987,46989,46991,46993,46995,46997,46999,47001,47003],{"class":611,"line":803},[609,46983,46984],{"class":655},"  torusRef",[609,46986,1122],{"class":614},[609,46988,5500],{"class":655},[609,46990,1122],{"class":614},[609,46992,22526],{"class":655},[609,46994,1122],{"class":614},[609,46996,2811],{"class":655},[609,46998,2770],{"class":614},[609,47000,33661],{"class":655},[609,47002,33718],{"class":614},[609,47004,47005],{"class":795}," 0.745\n",[609,47007,47008,47010,47012,47014,47016,47018,47020,47022,47024,47026,47028],{"class":611,"line":603},[609,47009,46984],{"class":655},[609,47011,1122],{"class":614},[609,47013,5500],{"class":655},[609,47015,1122],{"class":614},[609,47017,22526],{"class":655},[609,47019,1122],{"class":614},[609,47021,8720],{"class":655},[609,47023,2770],{"class":614},[609,47025,33661],{"class":655},[609,47027,33718],{"class":614},[609,47029,47030],{"class":795}," 0.361\n",[609,47032,47033],{"class":611,"line":826},[609,47034,1301],{"class":614},[609,47036,47037,47039,47041],{"class":611,"line":837},[609,47038,704],{"class":614},[609,47040,619],{"class":618},[609,47042,641],{"class":614},[609,47044,47045],{"class":611,"line":848},[609,47046,714],{"emptyLinePlaceholder":566},[609,47048,47049,47051,47053],{"class":611,"line":858},[609,47050,615],{"class":614},[609,47052,722],{"class":618},[609,47054,641],{"class":614},[609,47056,47057,47059,47061,47063,47065,47067,47069,47072,47074,47076,47078,47080,47082,47084,47086],{"class":611,"line":604},[609,47058,730],{"class":614},[609,47060,733],{"class":618},[609,47062,785],{"class":614},[609,47064,3398],{"class":622},[609,47066,629],{"class":614},[609,47068,632],{"class":614},[609,47070,47071],{"class":795},"0x222",[609,47073,632],{"class":614},[609,47075,7760],{"class":614},[609,47077,20504],{"class":622},[609,47079,629],{"class":614},[609,47081,632],{"class":614},[609,47083,33810],{"class":655},[609,47085,632],{"class":614},[609,47087,641],{"class":614},[609,47089,47090,47092,47094,47096,47098,47100,47102,47104,47106,47108,47110,47112,47114,47116,47118],{"class":611,"line":878},[609,47091,753],{"class":614},[609,47093,756],{"class":618},[609,47095,785],{"class":614},[609,47097,1463],{"class":622},[609,47099,629],{"class":614},[609,47101,632],{"class":614},[609,47103,1470],{"class":614},[609,47105,941],{"class":795},[609,47107,1475],{"class":614},[609,47109,1517],{"class":795},[609,47111,1475],{"class":614},[609,47113,2400],{"class":795},[609,47115,1485],{"class":614},[609,47117,632],{"class":614},[609,47119,759],{"class":614},[609,47121,47122,47124,47126],{"class":611,"line":888},[609,47123,753],{"class":614},[609,47125,767],{"class":618},[609,47127,759],{"class":614},[609,47129,47130],{"class":611,"line":2956},[609,47131,714],{"emptyLinePlaceholder":566},[609,47133,47134,47136,47138,47140,47142,47144,47146,47148,47150,47152,47154,47156,47158],{"class":611,"line":2964},[609,47135,753],{"class":614},[609,47137,3071],{"class":618},[609,47139,785],{"class":614},[609,47141,1993],{"class":622},[609,47143,629],{"class":614},[609,47145,632],{"class":614},[609,47147,1470],{"class":614},[609,47149,1482],{"class":795},[609,47151,1475],{"class":614},[609,47153,1482],{"class":795},[609,47155,1485],{"class":614},[609,47157,632],{"class":614},[609,47159,759],{"class":614},[609,47161,47163,47165],{"class":47162,"line":2994},[611,645],[609,47164,753],{"class":614},[609,47166,47167],{"class":618},"Fbo\n",[609,47169,47171,47173,47175,47177,47180],{"class":47170,"line":3011},[611,645],[609,47172,5683],{"class":622},[609,47174,629],{"class":614},[609,47176,632],{"class":614},[609,47178,47179],{"class":635},"fboRef",[609,47181,2991],{"class":614},[609,47183,47185,47187,47189,47191,47193,47195],{"class":47184,"line":3026},[611,645],[609,47186,5697],{"class":614},[609,47188,6362],{"class":622},[609,47190,629],{"class":614},[609,47192,632],{"class":614},[609,47194,947],{"class":3874},[609,47196,2991],{"class":614},[609,47198,47200,47202,47205,47207,47209,47211,47213,47215,47217,47219],{"class":47199,"line":3051},[611,645],[609,47201,5697],{"class":614},[609,47203,47204],{"class":622},"settings",[609,47206,629],{"class":614},[609,47208,632],{"class":614},[609,47210,7406],{"class":614},[609,47212,37686],{"class":618},[609,47214,7411],{"class":614},[609,47216,1897],{"class":795},[609,47218,665],{"class":614},[609,47220,2991],{"class":614},[609,47222,47223],{"class":611,"line":2595},[609,47224,11765],{"class":614},[609,47226,47227,47229,47231],{"class":611,"line":3066},[609,47228,753],{"class":614},[609,47230,832],{"class":618},[609,47232,641],{"class":614},[609,47234,47235,47237,47239,47241,47243,47245,47247,47249,47251,47253,47255,47257,47259,47261,47263],{"class":611,"line":3096},[609,47236,829],{"class":614},[609,47238,843],{"class":618},[609,47240,785],{"class":614},[609,47242,1993],{"class":622},[609,47244,629],{"class":614},[609,47246,632],{"class":614},[609,47248,1470],{"class":614},[609,47250,1897],{"class":795},[609,47252,1475],{"class":614},[609,47254,1897],{"class":795},[609,47256,1475],{"class":614},[609,47258,1897],{"class":795},[609,47260,1485],{"class":614},[609,47262,632],{"class":614},[609,47264,759],{"class":614},[609,47266,47267],{"class":611,"line":3105},[609,47268,714],{"emptyLinePlaceholder":566},[609,47270,47271,47273],{"class":611,"line":4211},[609,47272,829],{"class":614},[609,47274,17622],{"class":618},[609,47276,47277,47279,47281,47283,47285,47288],{"class":611,"line":4216},[609,47278,2997],{"class":614},[609,47280,2504],{"class":622},[609,47282,629],{"class":614},[609,47284,632],{"class":614},[609,47286,47287],{"class":795},"0xFFFFFF",[609,47289,2991],{"class":614},[609,47291,47292,47294,47296,47298,47300,47302,47304,47306,47308,47310,47313],{"class":611,"line":4239},[609,47293,2997],{"class":614},[609,47295,14374],{"class":622},[609,47297,629],{"class":614},[609,47299,632],{"class":614},[609,47301,47179],{"class":655},[609,47303,11531],{"class":614},[609,47305,21491],{"class":655},[609,47307,11531],{"class":614},[609,47309,14381],{"class":655},[609,47311,47312],{"class":614}," ?? null",[609,47314,2991],{"class":614},[609,47316,47317],{"class":611,"line":4248},[609,47318,3054],{"class":614},[609,47320,47321,47323,47325],{"class":611,"line":4257},[609,47322,871],{"class":614},[609,47324,832],{"class":618},[609,47326,641],{"class":614},[609,47328,47329],{"class":611,"line":4266},[609,47330,714],{"emptyLinePlaceholder":566},[609,47332,47333,47335],{"class":611,"line":4275},[609,47334,753],{"class":614},[609,47336,2961],{"class":618},[609,47338,47339,47341,47343,47345,47347],{"class":611,"line":15730},[609,47340,5683],{"class":622},[609,47342,629],{"class":614},[609,47344,632],{"class":614},[609,47346,5647],{"class":635},[609,47348,2991],{"class":614},[609,47350,47351,47353,47355,47357,47359,47361,47363,47365,47367,47369,47371,47373],{"class":611,"line":15745},[609,47352,5697],{"class":614},[609,47354,1463],{"class":622},[609,47356,629],{"class":614},[609,47358,632],{"class":614},[609,47360,1470],{"class":614},[609,47362,4164],{"class":795},[609,47364,1475],{"class":614},[609,47366,941],{"class":795},[609,47368,1475],{"class":614},[609,47370,941],{"class":795},[609,47372,1485],{"class":614},[609,47374,2991],{"class":614},[609,47376,47377],{"class":611,"line":15760},[609,47378,5717],{"class":614},[609,47380,47381,47383,47385,47387,47389,47391,47393,47395,47397,47399,47401,47403,47405,47407,47409,47411,47413],{"class":611,"line":15765},[609,47382,829],{"class":614},[609,47384,5131],{"class":618},[609,47386,785],{"class":614},[609,47388,1993],{"class":622},[609,47390,629],{"class":614},[609,47392,632],{"class":614},[609,47394,1470],{"class":614},[609,47396,1897],{"class":795},[609,47398,1475],{"class":614},[609,47400,1517],{"class":795},[609,47402,1475],{"class":614},[609,47404,30773],{"class":795},[609,47406,1475],{"class":614},[609,47408,6032],{"class":795},[609,47410,1485],{"class":614},[609,47412,632],{"class":614},[609,47414,759],{"class":614},[609,47416,47417,47419,47421],{"class":611,"line":15772},[609,47418,829],{"class":614},[609,47420,853],{"class":618},[609,47422,759],{"class":614},[609,47424,47425,47427,47429],{"class":611,"line":15777},[609,47426,871],{"class":614},[609,47428,832],{"class":618},[609,47430,641],{"class":614},[609,47432,47433,47435,47437],{"class":611,"line":15783},[609,47434,881],{"class":614},[609,47436,733],{"class":618},[609,47438,641],{"class":614},[609,47440,47441,47443,47445],{"class":611,"line":15804},[609,47442,704],{"class":614},[609,47444,722],{"class":618},[609,47446,641],{"class":614},[476,47448,898],{"id":897},[903,47450,47451,47461],{},[906,47452,47453],{},[909,47454,47455,47457,47459],{},[912,47456,914],{"align":973},[912,47458,917],{"align":973},[912,47460,920],{},[922,47462,47463,47479,47495,47519,47544],{},[909,47464,47465,47471,47476],{},[927,47466,47467],{"align":973},[1677,47468,47469],{},[590,47470,34941],{},[927,47472,47473,47475],{"align":973},[590,47474,2541],{}," - The width of the FBO.",[927,47477,47478],{},"Width of the canvas",[909,47480,47481,47487,47492],{},[927,47482,47483],{"align":973},[1677,47484,47485],{},[590,47486,34955],{},[927,47488,47489,47491],{"align":973},[590,47490,2541],{}," - the height of the FBO",[927,47493,47494],{},"Height of the canvas",[909,47496,47497,47503,47515],{},[927,47498,47499],{"align":973},[1677,47500,47501],{},[590,47502,6362],{},[927,47504,47505,47507,47508,1122],{"align":973},[590,47506,11963],{}," - Whether or not the FBO should render the depth to a ",[1116,47509,47512],{"href":47510,"rel":47511},"https://threejs.org/docs/?q=webglre#api/en/renderers/WebGLRenderTarget.depthTexture",[1120],[590,47513,47514],{},"depthTexture",[927,47516,47517],{},[590,47518,947],{},[909,47520,47521,47527,47540],{},[927,47522,47523],{"align":973},[1677,47524,47525],{},[590,47526,47204],{},[927,47528,47529,47532,47533],{"align":973},[590,47530,47531],{},"WebGLRenderTargetOptions"," - Every other configuration property for the ",[1116,47534,47537,19616],{"href":47535,"rel":47536},"https://threejs.org/docs/#api/en/renderers/WebGLRenderTarget",[1120],[590,47538,47539],{},"WebGLRenderTarget",[927,47541,47542],{},[590,47543,17244],{},[909,47545,47546,47553,47558],{},[927,47547,47548],{"align":973},[1677,47549,47550],{},[590,47551,47552],{},"autoRender",[927,47554,47555,47557],{"align":973},[590,47556,11963],{}," - Whether to automatically render the FBO on the default scene.",[927,47559,47560],{},[590,47561,937],{},[476,47563,47565],{"id":47564},"usefbo","useFBO",[586,47567,46747],{},[586,47569,47570,47571,47573],{},"Cientos provides a ",[590,47572,47565],{}," composable to make it easy to use FBOs in your application.",[3729,47575,47576],{},[586,47577,2257,47578,47580],{},[590,47579,47565],{}," composable must be used inside of a child component since it needs the context of TresCanvas.",[7477,47582,15],{"id":47583},"usage-1",[598,47585,47588],{"className":600,"code":47586,"highlights":47587,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { useFBO } from '@tresjs/cientos'\n\nconst fboTarget = useFBO({\n  depth: true,\n  width: 512,\n  height: 512,\n  settings: {\n    samples: 1,\n  },\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresMesh>\n    \u003CTresBoxGeometry :args=\"[1, 1, 1]\" />\n\n    \u003CTresMeshBasicMaterial\n      :color=\"0xFFFFFF\"\n      :map=\"fboTarget?.texture ?? null\"\n    />\n  \u003C/TresMesh>\n\u003C/template>\n\n",[550,701,711,717,727,750,762,772,777,888],[590,47589,47590,47610,47630,47634,47650,47661,47672,47683,47693,47705,47710,47717,47725,47729,47737,47745,47777,47781,47787,47801,47823,47827,47835],{"__ignoreMap":548},[609,47591,47592,47594,47596,47598,47600,47602,47604,47606,47608],{"class":611,"line":549},[609,47593,615],{"class":614},[609,47595,619],{"class":618},[609,47597,623],{"class":622},[609,47599,626],{"class":622},[609,47601,629],{"class":614},[609,47603,632],{"class":614},[609,47605,636],{"class":635},[609,47607,632],{"class":614},[609,47609,641],{"class":614},[609,47611,47613,47615,47617,47620,47622,47624,47626,47628],{"class":47612,"line":550},[611,645],[609,47614,649],{"class":648},[609,47616,652],{"class":614},[609,47618,47619],{"class":655}," useFBO",[609,47621,665],{"class":614},[609,47623,668],{"class":648},[609,47625,671],{"class":614},[609,47627,674],{"class":635},[609,47629,677],{"class":614},[609,47631,47632],{"class":611,"line":680},[609,47633,714],{"emptyLinePlaceholder":566},[609,47635,47637,47639,47642,47644,47646,47648],{"class":47636,"line":701},[611,645],[609,47638,2693],{"class":622},[609,47640,47641],{"class":655}," fboTarget ",[609,47643,629],{"class":614},[609,47645,47619],{"class":2804},[609,47647,2974],{"class":655},[609,47649,2755],{"class":614},[609,47651,47653,47655,47657,47659],{"class":47652,"line":711},[611,645],[609,47654,1235],{"class":618},[609,47656,1194],{"class":614},[609,47658,11887],{"class":3874},[609,47660,14979],{"class":614},[609,47662,47664,47666,47668,47670],{"class":47663,"line":717},[611,645],[609,47665,1216],{"class":618},[609,47667,1194],{"class":614},[609,47669,36232],{"class":795},[609,47671,14979],{"class":614},[609,47673,47675,47677,47679,47681],{"class":47674,"line":727},[611,645],[609,47676,1226],{"class":618},[609,47678,1194],{"class":614},[609,47680,36232],{"class":795},[609,47682,14979],{"class":614},[609,47684,47686,47689,47691],{"class":47685,"line":750},[611,645],[609,47687,47688],{"class":618},"  settings",[609,47690,1194],{"class":614},[609,47692,1180],{"class":614},[609,47694,47696,47699,47701,47703],{"class":47695,"line":762},[611,645],[609,47697,47698],{"class":618},"    samples",[609,47700,1194],{"class":614},[609,47702,23911],{"class":795},[609,47704,14979],{"class":614},[609,47706,47708],{"class":47707,"line":772},[611,645],[609,47709,18593],{"class":614},[609,47711,47713,47715],{"class":47712,"line":777},[611,645],[609,47714,5548],{"class":614},[609,47716,5543],{"class":655},[609,47718,47719,47721,47723],{"class":611,"line":803},[609,47720,704],{"class":614},[609,47722,619],{"class":618},[609,47724,641],{"class":614},[609,47726,47727],{"class":611,"line":603},[609,47728,714],{"emptyLinePlaceholder":566},[609,47730,47731,47733,47735],{"class":611,"line":826},[609,47732,615],{"class":614},[609,47734,722],{"class":618},[609,47736,641],{"class":614},[609,47738,47739,47741,47743],{"class":611,"line":837},[609,47740,730],{"class":614},[609,47742,832],{"class":618},[609,47744,641],{"class":614},[609,47746,47747,47749,47751,47753,47755,47757,47759,47761,47763,47765,47767,47769,47771,47773,47775],{"class":611,"line":848},[609,47748,753],{"class":614},[609,47750,843],{"class":618},[609,47752,785],{"class":614},[609,47754,1993],{"class":622},[609,47756,629],{"class":614},[609,47758,632],{"class":614},[609,47760,1470],{"class":614},[609,47762,1897],{"class":795},[609,47764,1475],{"class":614},[609,47766,1897],{"class":795},[609,47768,1475],{"class":614},[609,47770,1897],{"class":795},[609,47772,1485],{"class":614},[609,47774,632],{"class":614},[609,47776,759],{"class":614},[609,47778,47779],{"class":611,"line":858},[609,47780,714],{"emptyLinePlaceholder":566},[609,47782,47783,47785],{"class":611,"line":604},[609,47784,753],{"class":614},[609,47786,17622],{"class":618},[609,47788,47789,47791,47793,47795,47797,47799],{"class":611,"line":878},[609,47790,5697],{"class":614},[609,47792,2504],{"class":622},[609,47794,629],{"class":614},[609,47796,632],{"class":614},[609,47798,47287],{"class":795},[609,47800,2991],{"class":614},[609,47802,47804,47806,47808,47810,47812,47815,47817,47819,47821],{"class":47803,"line":888},[611,645],[609,47805,5697],{"class":614},[609,47807,14374],{"class":622},[609,47809,629],{"class":614},[609,47811,632],{"class":614},[609,47813,47814],{"class":655},"fboTarget",[609,47816,11531],{"class":614},[609,47818,14381],{"class":655},[609,47820,47312],{"class":614},[609,47822,2991],{"class":614},[609,47824,47825],{"class":611,"line":2956},[609,47826,11765],{"class":614},[609,47828,47829,47831,47833],{"class":611,"line":2964},[609,47830,881],{"class":614},[609,47832,832],{"class":618},[609,47834,641],{"class":614},[609,47836,47837,47839,47841],{"class":611,"line":2994},[609,47838,704],{"class":614},[609,47840,722],{"class":618},[609,47842,641],{"class":614},[7477,47844,7491],{"id":11998},[903,47846,47847,47857],{},[906,47848,47849],{},[909,47850,47851,47853,47855],{},[912,47852,914],{"align":973},[912,47854,917],{"align":973},[912,47856,920],{},[922,47858,47859,47873,47887,47908],{},[909,47860,47861,47867,47871],{},[927,47862,47863],{"align":973},[1677,47864,47865],{},[590,47866,34941],{},[927,47868,47869,47475],{"align":973},[590,47870,2541],{},[927,47872,47478],{},[909,47874,47875,47881,47885],{},[927,47876,47877],{"align":973},[1677,47878,47879],{},[590,47880,34955],{},[927,47882,47883,47491],{"align":973},[590,47884,2541],{},[927,47886,47494],{},[909,47888,47889,47895,47904],{},[927,47890,47891],{"align":973},[1677,47892,47893],{},[590,47894,6362],{},[927,47896,47897,47507,47899,1122],{"align":973},[590,47898,11963],{},[1116,47900,47902],{"href":47510,"rel":47901},[1120],[590,47903,47514],{},[927,47905,47906],{},[590,47907,947],{},[909,47909,47910,47916,47925],{},[927,47911,47912],{"align":973},[1677,47913,47914],{},[590,47915,47204],{},[927,47917,47918,47532,47920],{"align":973},[590,47919,47531],{},[1116,47921,47923,19616],{"href":47535,"rel":47922},[1120],[590,47924,47539],{},[927,47926,47927],{},[590,47928,17244],{},[1303,47930,47931],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":548,"searchDepth":549,"depth":550,"links":47933},[47934,47935,47936],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},{"id":47564,"depth":550,"text":47565,"children":47937},[47938,47939],{"id":47583,"depth":680,"text":15},{"id":11998,"depth":680,"text":7491},"Render to texture using Frame Buffer Objects.",{},{"title":409,"description":47940},"ch0ffhPITGouVRylpEdp2CmD8Fl-JOZCHt9eio9zKpc",{"id":47945,"title":413,"body":47946,"description":48364,"extension":563,"links":564,"meta":48365,"navigation":566,"path":414,"seo":48366,"stem":415,"__hash__":48367},"docs/2.api/9.objects/gradient-texture.md",{"type":473,"value":47947,"toc":48360},[47948,47953,47962,47964,48215,48217,48358],[2562,47949,47950],{},[47951,47952],"objects-gradient-texture",{},[586,47954,47955,47958,47959,47961],{},[590,47956,47957],{},"\u003CGradientTexture />"," creates a gradient in a THREE.Texture and attaches it to its parent THREE.Material's ",[590,47960,14374],{}," by default.",[476,47963,15],{"id":596},[598,47965,47967],{"className":600,"code":47966,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { GradientTexture } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 0, 5]\" />\n\n    \u003CTresMesh>\n      \u003CTresPlaneGeometry :args=\"[2, 2]\" />\n      \u003CTresMeshBasicMaterial>\n        \u003CGradientTexture\n          :stops=\"[0, 1]\"\n          :colors=\"['#ff0000', '#0000ff']\"\n        />\n      \u003C/TresMeshBasicMaterial>\n    \u003C/TresMesh>\n  \u003C/TresCanvas>\n\u003C/template>\n",[590,47968,47969,47989,48008,48016,48020,48028,48036,48068,48072,48080,48108,48116,48123,48147,48178,48183,48191,48199,48207],{"__ignoreMap":548},[609,47970,47971,47973,47975,47977,47979,47981,47983,47985,47987],{"class":611,"line":549},[609,47972,615],{"class":614},[609,47974,619],{"class":618},[609,47976,623],{"class":622},[609,47978,626],{"class":622},[609,47980,629],{"class":614},[609,47982,632],{"class":614},[609,47984,636],{"class":635},[609,47986,632],{"class":614},[609,47988,641],{"class":614},[609,47990,47991,47993,47995,47998,48000,48002,48004,48006],{"class":611,"line":550},[609,47992,649],{"class":648},[609,47994,652],{"class":614},[609,47996,47997],{"class":655}," GradientTexture",[609,47999,665],{"class":614},[609,48001,668],{"class":648},[609,48003,671],{"class":614},[609,48005,674],{"class":635},[609,48007,677],{"class":614},[609,48009,48010,48012,48014],{"class":611,"line":680},[609,48011,704],{"class":614},[609,48013,619],{"class":618},[609,48015,641],{"class":614},[609,48017,48018],{"class":611,"line":701},[609,48019,714],{"emptyLinePlaceholder":566},[609,48021,48022,48024,48026],{"class":611,"line":711},[609,48023,615],{"class":614},[609,48025,722],{"class":618},[609,48027,641],{"class":614},[609,48029,48030,48032,48034],{"class":611,"line":717},[609,48031,730],{"class":614},[609,48033,733],{"class":618},[609,48035,641],{"class":614},[609,48037,48038,48040,48042,48044,48046,48048,48050,48052,48054,48056,48058,48060,48062,48064,48066],{"class":611,"line":727},[609,48039,753],{"class":614},[609,48041,756],{"class":618},[609,48043,785],{"class":614},[609,48045,1463],{"class":622},[609,48047,629],{"class":614},[609,48049,632],{"class":614},[609,48051,1470],{"class":614},[609,48053,941],{"class":795},[609,48055,1475],{"class":614},[609,48057,941],{"class":795},[609,48059,1475],{"class":614},[609,48061,2400],{"class":795},[609,48063,1485],{"class":614},[609,48065,632],{"class":614},[609,48067,759],{"class":614},[609,48069,48070],{"class":611,"line":750},[609,48071,714],{"emptyLinePlaceholder":566},[609,48073,48074,48076,48078],{"class":611,"line":762},[609,48075,753],{"class":614},[609,48077,832],{"class":618},[609,48079,641],{"class":614},[609,48081,48082,48084,48086,48088,48090,48092,48094,48096,48098,48100,48102,48104,48106],{"class":611,"line":772},[609,48083,829],{"class":614},[609,48085,22566],{"class":618},[609,48087,785],{"class":614},[609,48089,1993],{"class":622},[609,48091,629],{"class":614},[609,48093,632],{"class":614},[609,48095,1470],{"class":614},[609,48097,796],{"class":795},[609,48099,1475],{"class":614},[609,48101,796],{"class":795},[609,48103,1485],{"class":614},[609,48105,632],{"class":614},[609,48107,759],{"class":614},[609,48109,48110,48112,48114],{"class":611,"line":777},[609,48111,829],{"class":614},[609,48113,2429],{"class":618},[609,48115,641],{"class":614},[609,48117,48118,48120],{"class":611,"line":803},[609,48119,840],{"class":614},[609,48121,48122],{"class":618},"GradientTexture\n",[609,48124,48125,48128,48131,48133,48135,48137,48139,48141,48143,48145],{"class":611,"line":603},[609,48126,48127],{"class":614},"          :",[609,48129,48130],{"class":622},"stops",[609,48132,629],{"class":614},[609,48134,632],{"class":614},[609,48136,1470],{"class":614},[609,48138,941],{"class":795},[609,48140,1475],{"class":614},[609,48142,1897],{"class":795},[609,48144,1485],{"class":614},[609,48146,2991],{"class":614},[609,48148,48149,48151,48154,48156,48158,48160,48162,48164,48166,48168,48170,48172,48174,48176],{"class":611,"line":826},[609,48150,48127],{"class":614},[609,48152,48153],{"class":622},"colors",[609,48155,629],{"class":614},[609,48157,632],{"class":614},[609,48159,1470],{"class":614},[609,48161,5540],{"class":614},[609,48163,2529],{"class":635},[609,48165,5540],{"class":614},[609,48167,1475],{"class":614},[609,48169,5540],{"class":614},[609,48171,16175],{"class":635},[609,48173,5540],{"class":614},[609,48175,1485],{"class":614},[609,48177,2991],{"class":614},[609,48179,48180],{"class":611,"line":837},[609,48181,48182],{"class":614},"        />\n",[609,48184,48185,48187,48189],{"class":611,"line":848},[609,48186,861],{"class":614},[609,48188,2429],{"class":618},[609,48190,641],{"class":614},[609,48192,48193,48195,48197],{"class":611,"line":858},[609,48194,871],{"class":614},[609,48196,832],{"class":618},[609,48198,641],{"class":614},[609,48200,48201,48203,48205],{"class":611,"line":604},[609,48202,881],{"class":614},[609,48204,733],{"class":618},[609,48206,641],{"class":614},[609,48208,48209,48211,48213],{"class":611,"line":878},[609,48210,704],{"class":614},[609,48212,722],{"class":618},[609,48214,641],{"class":614},[476,48216,898],{"id":897},[903,48218,48219,48229],{},[906,48220,48221],{},[909,48222,48223,48225,48227],{},[912,48224,914],{"align":973},[912,48226,917],{"align":973},[912,48228,920],{},[922,48230,48231,48257,48271,48286,48299,48312,48329,48343],{},[909,48232,48233,48237,48255],{},[927,48234,48235],{"align":973},[590,48236,48130],{},[927,48238,48239,48240,48242,48243,4435,48245,48247,48248,48251,48252,1122],{"align":973},"A ",[590,48241,30972],{}," of values between ",[590,48244,941],{},[590,48246,1897],{}," representing the color positions in the gradient. ",[590,48249,48250],{},"stops.length"," should match ",[590,48253,48254],{},"color.length",[927,48256],{},[909,48258,48259,48263,48269],{},[927,48260,48261],{"align":973},[590,48262,48153],{},[927,48264,48239,48265,48268],{"align":973},[590,48266,48267],{},"THREE.ColorRepresentation[]"," representing the colors in the gradient.",[927,48270],{},[909,48272,48273,48278,48281],{},[927,48274,48275],{"align":973},[590,48276,48277],{},"attach",[927,48279,48280],{"align":973},"Where the component should be attached within its parent.",[927,48282,48283],{},[590,48284,48285],{},"'map'",[909,48287,48288,48292,48295],{},[927,48289,48290],{"align":973},[590,48291,34955],{},[927,48293,48294],{"align":973},"Height of the canvas used to draw the gradient.",[927,48296,48297],{},[590,48298,33460],{},[909,48300,48301,48305,48308],{},[927,48302,48303],{"align":973},[590,48304,34941],{},[927,48306,48307],{"align":973},"Width of the canvas used to draw the gradient.",[927,48309,48310],{},[590,48311,30773],{},[909,48313,48314,48318,48324],{},[927,48315,48316],{"align":973},[590,48317,30376],{},[927,48319,48320,48323],{"align":973},[590,48321,48322],{},"'linear' | 'radial'"," Type of gradient to draw.",[927,48325,48326],{},[590,48327,48328],{},"'linear'",[909,48330,48331,48336,48339],{},[927,48332,48333],{"align":973},[590,48334,48335],{},"innerCircleRadius",[927,48337,48338],{"align":973},"Radius of the inner circle of a radial gradient.",[927,48340,48341],{},[590,48342,941],{},[909,48344,48345,48350,48353],{},[927,48346,48347],{"align":973},[590,48348,48349],{},"outerCircleRadius",[927,48351,48352],{"align":973},"Radius of the outer circle of a radial gradient.",[927,48354,48355],{},[590,48356,48357],{},"'auto'",[1303,48359,1652],{},{"title":548,"searchDepth":549,"depth":550,"links":48361},[48362,48363],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},"Create gradient textures for materials.",{},{"title":413,"description":48364},"vYfm15fEwNZgRGLtXSYlU49KPYrI7wEBqbJQsM4JeNo",{"id":48369,"title":417,"body":48370,"description":54362,"extension":563,"links":564,"meta":54363,"navigation":566,"path":418,"seo":54364,"stem":419,"__hash__":54365},"docs/2.api/9.objects/html.md",{"type":473,"value":48371,"toc":54343},[48372,48375,48388,48393,48395,48858,48862,48869,48874,48890,48898,48903,49046,49051,49055,49079,49084,49214,49218,49242,49245,49269,49286,49306,49311,49475,49479,49484,49507,49519,49524,51418,51420,51443,51463,51504,51508,51523,51535,51571,51578,51602,51619,51624,53233,53239,53245,53250,53450,53467,53469,53829,53831,53851,53855,53936,53940,54115,54319,54322,54340],[586,48373,48374],{},"This component allows you to project HTML content to any object in your scene. TresJS will automatically update the position of the HTML content to match the position of the object in the scene.",[586,48376,48377,48378,4435,48380,48383,48384,48387],{},"🚀 Works seamlessly with both ",[1677,48379,6218],{},[1677,48381,48382],{},"OrthographicCamera"," — the active camera is automatically detected by the ",[590,48385,48386],{},"\u003CHtml>"," component.",[2562,48389,48390],{},[48391,48392],"objects-html",{},[476,48394,15],{"id":596},[598,48396,48399],{"className":600,"code":48397,"highlights":48398,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { Html, OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#82DBC5\">\n    \u003CTresPerspectiveCamera :position=\"[2, 2, 5]\" />\n    \u003COrbitControls />\n    \u003CTresMesh :position=\"[1, 1, 1]\">\n      \u003CTresBoxGeometry />\n      \u003CTresMeshNormalMaterial />\n      \u003CHtml\n        center\n        transform\n        :distance-factor=\"4\"\n        :position=\"[0, 0, 0.65]\"\n        :scale=\"[0.75, 0.75, 0.75]\"\n      >\n        \u003Ch1 class=\"title\">I'm a Box 📦\u003C/h1>\n      \u003C/Html>\n    \u003C/TresMesh>\n    \u003CTresGridHelper />\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n\u003Cstyle scoped>\n.title {\n  background-color: #1e1e1e;\n  color: #ffffff;\n  font-size: 0.75rem;\n  padding: 0.25rem;\n  border-radius: 0.375rem;\n}\n\u003C/style>\n",[550,603,826,837,848,858,604],[590,48400,48401,48421,48445,48463,48471,48475,48483,48501,48533,48541,48573,48581,48589,48597,48603,48609,48625,48652,48679,48684,48713,48722,48730,48738,48746,48754,48762,48773,48781,48797,48810,48822,48834,48846,48850],{"__ignoreMap":548},[609,48402,48403,48405,48407,48409,48411,48413,48415,48417,48419],{"class":611,"line":549},[609,48404,615],{"class":614},[609,48406,619],{"class":618},[609,48408,623],{"class":622},[609,48410,626],{"class":622},[609,48412,629],{"class":614},[609,48414,632],{"class":614},[609,48416,636],{"class":635},[609,48418,632],{"class":614},[609,48420,641],{"class":614},[609,48422,48424,48426,48428,48431,48433,48435,48437,48439,48441,48443],{"class":48423,"line":550},[611,645],[609,48425,649],{"class":648},[609,48427,652],{"class":614},[609,48429,48430],{"class":655}," Html",[609,48432,659],{"class":614},[609,48434,662],{"class":655},[609,48436,665],{"class":614},[609,48438,668],{"class":648},[609,48440,671],{"class":614},[609,48442,674],{"class":635},[609,48444,677],{"class":614},[609,48446,48447,48449,48451,48453,48455,48457,48459,48461],{"class":611,"line":680},[609,48448,649],{"class":648},[609,48450,652],{"class":614},[609,48452,687],{"class":655},[609,48454,665],{"class":614},[609,48456,668],{"class":648},[609,48458,671],{"class":614},[609,48460,696],{"class":635},[609,48462,677],{"class":614},[609,48464,48465,48467,48469],{"class":611,"line":701},[609,48466,704],{"class":614},[609,48468,619],{"class":618},[609,48470,641],{"class":614},[609,48472,48473],{"class":611,"line":711},[609,48474,714],{"emptyLinePlaceholder":566},[609,48476,48477,48479,48481],{"class":611,"line":717},[609,48478,615],{"class":614},[609,48480,722],{"class":618},[609,48482,641],{"class":614},[609,48484,48485,48487,48489,48491,48493,48495,48497,48499],{"class":611,"line":727},[609,48486,730],{"class":614},[609,48488,733],{"class":618},[609,48490,736],{"class":622},[609,48492,629],{"class":614},[609,48494,632],{"class":614},[609,48496,5044],{"class":635},[609,48498,632],{"class":614},[609,48500,641],{"class":614},[609,48502,48503,48505,48507,48509,48511,48513,48515,48517,48519,48521,48523,48525,48527,48529,48531],{"class":611,"line":750},[609,48504,753],{"class":614},[609,48506,756],{"class":618},[609,48508,785],{"class":614},[609,48510,1463],{"class":622},[609,48512,629],{"class":614},[609,48514,632],{"class":614},[609,48516,1470],{"class":614},[609,48518,796],{"class":795},[609,48520,1475],{"class":614},[609,48522,796],{"class":795},[609,48524,1475],{"class":614},[609,48526,2400],{"class":795},[609,48528,1485],{"class":614},[609,48530,632],{"class":614},[609,48532,759],{"class":614},[609,48534,48535,48537,48539],{"class":611,"line":762},[609,48536,753],{"class":614},[609,48538,767],{"class":618},[609,48540,759],{"class":614},[609,48542,48543,48545,48547,48549,48551,48553,48555,48557,48559,48561,48563,48565,48567,48569,48571],{"class":611,"line":772},[609,48544,753],{"class":614},[609,48546,832],{"class":618},[609,48548,785],{"class":614},[609,48550,1463],{"class":622},[609,48552,629],{"class":614},[609,48554,632],{"class":614},[609,48556,1470],{"class":614},[609,48558,1897],{"class":795},[609,48560,1475],{"class":614},[609,48562,1897],{"class":795},[609,48564,1475],{"class":614},[609,48566,1897],{"class":795},[609,48568,1485],{"class":614},[609,48570,632],{"class":614},[609,48572,641],{"class":614},[609,48574,48575,48577,48579],{"class":611,"line":777},[609,48576,829],{"class":614},[609,48578,843],{"class":618},[609,48580,759],{"class":614},[609,48582,48583,48585,48587],{"class":611,"line":803},[609,48584,829],{"class":614},[609,48586,853],{"class":618},[609,48588,759],{"class":614},[609,48590,48592,48594],{"class":48591,"line":603},[611,645],[609,48593,829],{"class":614},[609,48595,48596],{"class":618},"Html\n",[609,48598,48600],{"class":48599,"line":826},[611,645],[609,48601,48602],{"class":622},"        center\n",[609,48604,48606],{"class":48605,"line":837},[611,645],[609,48607,48608],{"class":622},"        transform\n",[609,48610,48612,48614,48617,48619,48621,48623],{"class":48611,"line":848},[611,645],[609,48613,2997],{"class":614},[609,48615,48616],{"class":622},"distance-factor",[609,48618,629],{"class":614},[609,48620,632],{"class":614},[609,48622,3494],{"class":795},[609,48624,2991],{"class":614},[609,48626,48628,48630,48632,48634,48636,48638,48640,48642,48644,48646,48648,48650],{"class":48627,"line":858},[611,645],[609,48629,2997],{"class":614},[609,48631,1463],{"class":622},[609,48633,629],{"class":614},[609,48635,632],{"class":614},[609,48637,1470],{"class":614},[609,48639,941],{"class":795},[609,48641,1475],{"class":614},[609,48643,941],{"class":795},[609,48645,1475],{"class":614},[609,48647,2150],{"class":795},[609,48649,1485],{"class":614},[609,48651,2991],{"class":614},[609,48653,48655,48657,48659,48661,48663,48665,48667,48669,48671,48673,48675,48677],{"class":48654,"line":604},[611,645],[609,48656,2997],{"class":614},[609,48658,788],{"class":622},[609,48660,629],{"class":614},[609,48662,632],{"class":614},[609,48664,1470],{"class":614},[609,48666,4649],{"class":795},[609,48668,1475],{"class":614},[609,48670,4649],{"class":795},[609,48672,1475],{"class":614},[609,48674,4649],{"class":795},[609,48676,1485],{"class":614},[609,48678,2991],{"class":614},[609,48680,48681],{"class":611,"line":878},[609,48682,48683],{"class":614},"      >\n",[609,48685,48686,48688,48691,48693,48695,48697,48700,48702,48704,48707,48709,48711],{"class":611,"line":888},[609,48687,840],{"class":614},[609,48689,48690],{"class":618},"h1",[609,48692,19616],{"class":622},[609,48694,629],{"class":614},[609,48696,632],{"class":614},[609,48698,48699],{"class":635},"title",[609,48701,632],{"class":614},[609,48703,12669],{"class":614},[609,48705,48706],{"class":655},"I'm a Box 📦",[609,48708,704],{"class":614},[609,48710,48690],{"class":618},[609,48712,641],{"class":614},[609,48714,48715,48717,48720],{"class":611,"line":2956},[609,48716,861],{"class":614},[609,48718,48719],{"class":618},"Html",[609,48721,641],{"class":614},[609,48723,48724,48726,48728],{"class":611,"line":2964},[609,48725,871],{"class":614},[609,48727,832],{"class":618},[609,48729,641],{"class":614},[609,48731,48732,48734,48736],{"class":611,"line":2994},[609,48733,753],{"class":614},[609,48735,3071],{"class":618},[609,48737,759],{"class":614},[609,48739,48740,48742,48744],{"class":611,"line":3011},[609,48741,753],{"class":614},[609,48743,3522],{"class":618},[609,48745,759],{"class":614},[609,48747,48748,48750,48752],{"class":611,"line":3026},[609,48749,881],{"class":614},[609,48751,733],{"class":618},[609,48753,641],{"class":614},[609,48755,48756,48758,48760],{"class":611,"line":3051},[609,48757,704],{"class":614},[609,48759,722],{"class":618},[609,48761,641],{"class":614},[609,48763,48764,48766,48768,48771],{"class":611,"line":2595},[609,48765,615],{"class":614},[609,48767,1303],{"class":618},[609,48769,48770],{"class":622}," scoped",[609,48772,641],{"class":614},[609,48774,48775,48777,48779],{"class":611,"line":3066},[609,48776,1122],{"class":614},[609,48778,48699],{"class":1176},[609,48780,1180],{"class":614},[609,48782,48783,48787,48789,48792,48795],{"class":611,"line":3096},[609,48784,48786],{"class":48785},"sqsOY","  background-color",[609,48788,1194],{"class":614},[609,48790,48791],{"class":614}," #",[609,48793,48794],{"class":655},"1e1e1e",[609,48796,3333],{"class":614},[609,48798,48799,48801,48803,48805,48808],{"class":611,"line":3105},[609,48800,36087],{"class":48785},[609,48802,1194],{"class":614},[609,48804,48791],{"class":614},[609,48806,48807],{"class":655},"ffffff",[609,48809,3333],{"class":614},[609,48811,48812,48815,48817,48820],{"class":611,"line":4211},[609,48813,48814],{"class":48785},"  font-size",[609,48816,1194],{"class":614},[609,48818,48819],{"class":795}," 0.75rem",[609,48821,3333],{"class":614},[609,48823,48824,48827,48829,48832],{"class":611,"line":4216},[609,48825,48826],{"class":48785},"  padding",[609,48828,1194],{"class":614},[609,48830,48831],{"class":795}," 0.25rem",[609,48833,3333],{"class":614},[609,48835,48836,48839,48841,48844],{"class":611,"line":4239},[609,48837,48838],{"class":48785},"  border-radius",[609,48840,1194],{"class":614},[609,48842,48843],{"class":795}," 0.375rem",[609,48845,3333],{"class":614},[609,48847,48848],{"class":611,"line":4248},[609,48849,1301],{"class":614},[609,48851,48852,48854,48856],{"class":611,"line":4257},[609,48853,704],{"class":614},[609,48855,1303],{"class":618},[609,48857,641],{"class":614},[476,48859,48861],{"id":48860},"occlusion","Occlusion",[586,48863,48864,48865,48868],{},"By default, the HTML content will be visible through other objects in the scene. You can use the ",[590,48866,48867],{},"occlude"," prop to make the HTML content occlude other objects in the scene.",[586,48870,48871,48872,35336],{},"Html can be hidden behind one or more objects in your scene using the ",[590,48873,48867],{},[598,48875,48877],{"className":600,"code":48876,"language":605,"meta":548,"style":548},"\u003CHtml occlude>\n",[590,48878,48879],{"__ignoreMap":548},[609,48880,48881,48883,48885,48888],{"class":611,"line":549},[609,48882,615],{"class":614},[609,48884,48719],{"class":618},[609,48886,48887],{"class":622}," occlude",[609,48889,641],{"class":614},[586,48891,934,48892,48894,48895,48897],{},[590,48893,48867],{},", then ",[590,48896,48386],{}," will be hidden by any objects that pass in front of its position.",[2562,48899,48900],{},[48901,48902],"objects-html-occlusion",{},[48904,48905,48906,48907,48911],"details",{},"\n  ",[48908,48909,48910],"summary",{},"Demo code",[598,48912,48914],{"className":39826,"code":48913,"language":39828,"meta":548,"style":548},"\u003CTresMesh :position=\"[0, 1, -2]\">\n  \u003CTresBoxGeometry />\n  \u003CTresMeshNormalMaterial />\n  \u003Chtml center transform occlude :distance-factor=\"4\" :position=\"[0, 0, 2]\" :z-index-range=\"[28, 0]\">\n    \u003Ch1 class=\"bg-white dark:bg-dark text-xs p-1 rounded\">Move camera\u003C/h1>\n  \u003C/html>\n\u003C/TresMesh>\n",[590,48915,48916,48936,48944,48952,49002,49030,49038],{"__ignoreMap":548},[609,48917,48918,48920,48922,48925,48927,48929,48932,48934],{"class":611,"line":549},[609,48919,615],{"class":614},[609,48921,832],{"class":618},[609,48923,48924],{"class":622}," :position",[609,48926,629],{"class":614},[609,48928,632],{"class":614},[609,48930,48931],{"class":635},"[0, 1, -2]",[609,48933,632],{"class":614},[609,48935,641],{"class":614},[609,48937,48938,48940,48942],{"class":611,"line":550},[609,48939,730],{"class":614},[609,48941,843],{"class":618},[609,48943,759],{"class":614},[609,48945,48946,48948,48950],{"class":611,"line":680},[609,48947,730],{"class":614},[609,48949,853],{"class":618},[609,48951,759],{"class":614},[609,48953,48954,48956,48958,48961,48964,48966,48969,48971,48973,48975,48977,48979,48981,48983,48986,48988,48991,48993,48995,48998,49000],{"class":611,"line":701},[609,48955,730],{"class":614},[609,48957,39828],{"class":618},[609,48959,48960],{"class":622}," center",[609,48962,48963],{"class":622}," transform",[609,48965,48887],{"class":622},[609,48967,48968],{"class":622}," :distance-factor",[609,48970,629],{"class":614},[609,48972,632],{"class":614},[609,48974,3494],{"class":635},[609,48976,632],{"class":614},[609,48978,48924],{"class":622},[609,48980,629],{"class":614},[609,48982,632],{"class":614},[609,48984,48985],{"class":635},"[0, 0, 2]",[609,48987,632],{"class":614},[609,48989,48990],{"class":622}," :z-index-range",[609,48992,629],{"class":614},[609,48994,632],{"class":614},[609,48996,48997],{"class":635},"[28, 0]",[609,48999,632],{"class":614},[609,49001,641],{"class":614},[609,49003,49004,49006,49008,49010,49012,49014,49017,49019,49021,49024,49026,49028],{"class":611,"line":711},[609,49005,753],{"class":614},[609,49007,48690],{"class":618},[609,49009,19616],{"class":622},[609,49011,629],{"class":614},[609,49013,632],{"class":614},[609,49015,49016],{"class":635},"bg-white dark:bg-dark text-xs p-1 rounded",[609,49018,632],{"class":614},[609,49020,12669],{"class":614},[609,49022,49023],{"class":655},"Move camera",[609,49025,704],{"class":614},[609,49027,48690],{"class":618},[609,49029,641],{"class":614},[609,49031,49032,49034,49036],{"class":611,"line":717},[609,49033,881],{"class":614},[609,49035,39828],{"class":618},[609,49037,641],{"class":614},[609,49039,49040,49042,49044],{"class":611,"line":727},[609,49041,704],{"class":614},[609,49043,832],{"class":618},[609,49045,641],{"class":614},[586,49047,49048,49049,2072],{},"You can also choose which object or objects should occlude the HTML content by passing either a single object ref or an array of object refs to the ",[590,49050,48867],{},[7477,49052,49054],{"id":49053},"single-occluder","Single occluder",[598,49056,49058],{"className":600,"code":49057,"language":605,"meta":548,"style":548},"\u003CHtml occlude=\"[mesh]\">\n",[590,49059,49060],{"__ignoreMap":548},[609,49061,49062,49064,49066,49068,49070,49072,49075,49077],{"class":611,"line":549},[609,49063,615],{"class":614},[609,49065,48719],{"class":618},[609,49067,48887],{"class":622},[609,49069,629],{"class":614},[609,49071,632],{"class":614},[609,49073,49074],{"class":635},"[mesh]",[609,49076,632],{"class":614},[609,49078,641],{"class":614},[2562,49080,49081],{},[49082,49083],"objects-html-single-occluder",{},[48904,49085,48906,49086,49088],{},[48908,49087,48910],{},[598,49089,49091],{"className":39826,"code":49090,"language":39828,"meta":548,"style":548},"\u003CTresMesh :position=\"[0, 1, 0]\">\n  \u003CTresBoxGeometry />\n  \u003CTresMeshNormalMaterial />\n  \u003Chtml center transform :occlude=\"[sphereRef]\" :distance-factor=\"4\" :z-index-range=\"[28, 0]\">\n    \u003Ch1 class=\"bg-white dark:bg-dark text-xs p-1 rounded\">Move camera\u003C/h1>\n  \u003C/html>\n\u003C/TresMesh>\n",[590,49092,49093,49112,49120,49128,49172,49198,49206],{"__ignoreMap":548},[609,49094,49095,49097,49099,49101,49103,49105,49108,49110],{"class":611,"line":549},[609,49096,615],{"class":614},[609,49098,832],{"class":618},[609,49100,48924],{"class":622},[609,49102,629],{"class":614},[609,49104,632],{"class":614},[609,49106,49107],{"class":635},"[0, 1, 0]",[609,49109,632],{"class":614},[609,49111,641],{"class":614},[609,49113,49114,49116,49118],{"class":611,"line":550},[609,49115,730],{"class":614},[609,49117,843],{"class":618},[609,49119,759],{"class":614},[609,49121,49122,49124,49126],{"class":611,"line":680},[609,49123,730],{"class":614},[609,49125,853],{"class":618},[609,49127,759],{"class":614},[609,49129,49130,49132,49134,49136,49138,49141,49143,49145,49148,49150,49152,49154,49156,49158,49160,49162,49164,49166,49168,49170],{"class":611,"line":701},[609,49131,730],{"class":614},[609,49133,39828],{"class":618},[609,49135,48960],{"class":622},[609,49137,48963],{"class":622},[609,49139,49140],{"class":622}," :occlude",[609,49142,629],{"class":614},[609,49144,632],{"class":614},[609,49146,49147],{"class":635},"[sphereRef]",[609,49149,632],{"class":614},[609,49151,48968],{"class":622},[609,49153,629],{"class":614},[609,49155,632],{"class":614},[609,49157,3494],{"class":635},[609,49159,632],{"class":614},[609,49161,48990],{"class":622},[609,49163,629],{"class":614},[609,49165,632],{"class":614},[609,49167,48997],{"class":635},[609,49169,632],{"class":614},[609,49171,641],{"class":614},[609,49173,49174,49176,49178,49180,49182,49184,49186,49188,49190,49192,49194,49196],{"class":611,"line":711},[609,49175,753],{"class":614},[609,49177,48690],{"class":618},[609,49179,19616],{"class":622},[609,49181,629],{"class":614},[609,49183,632],{"class":614},[609,49185,49016],{"class":635},[609,49187,632],{"class":614},[609,49189,12669],{"class":614},[609,49191,49023],{"class":655},[609,49193,704],{"class":614},[609,49195,48690],{"class":618},[609,49197,641],{"class":614},[609,49199,49200,49202,49204],{"class":611,"line":717},[609,49201,881],{"class":614},[609,49203,39828],{"class":618},[609,49205,641],{"class":614},[609,49207,49208,49210,49212],{"class":611,"line":727},[609,49209,704],{"class":614},[609,49211,832],{"class":618},[609,49213,641],{"class":614},[7477,49215,49217],{"id":49216},"multiple-occluders","Multiple occluders",[598,49219,49221],{"className":600,"code":49220,"language":605,"meta":548,"style":548},"\u003CHtml occlude=\"[mesh1, mesh2, mesh3, ...]\" />\n",[590,49222,49223],{"__ignoreMap":548},[609,49224,49225,49227,49229,49231,49233,49235,49238,49240],{"class":611,"line":549},[609,49226,615],{"class":614},[609,49228,48719],{"class":618},[609,49230,48887],{"class":622},[609,49232,629],{"class":614},[609,49234,632],{"class":614},[609,49236,49237],{"class":635},"[mesh1, mesh2, mesh3, ...]",[609,49239,632],{"class":614},[609,49241,759],{"class":614},[586,49243,49244],{},"OR",[598,49246,49248],{"className":600,"code":49247,"language":605,"meta":548,"style":548},"\u003CHtml occlude=\"meshesArray\" />\n",[590,49249,49250],{"__ignoreMap":548},[609,49251,49252,49254,49256,49258,49260,49262,49265,49267],{"class":611,"line":549},[609,49253,615],{"class":614},[609,49255,48719],{"class":618},[609,49257,48887],{"class":622},[609,49259,629],{"class":614},[609,49261,632],{"class":614},[609,49263,49264],{"class":635},"meshesArray",[609,49266,632],{"class":614},[609,49268,759],{"class":614},[586,49270,49271,49272,49275,49276,49280,49281,49285],{},"In the demo below, a ",[590,49273,49274],{},"v-for"," loop generates multiple spheres around the cube.\nAll resulting ",[1677,49277,49278],{},[590,49279,5303],{}," instances are collected into an array and passed to the ",[1677,49282,49283],{},[590,49284,48867],{}," prop, allowing each sphere to occlude the HTML content.",[586,49287,49288,49289,49294,49295,49298,49299,4435,49302,49305],{},"This demo also uses the ",[1677,49290,49291],{},[590,49292,49293],{},"on-occlude"," event, which is triggered whenever the occlusion state changes.\nHere, the event updates a ",[1677,49296,49297],{},"reactive value"," to control element styles — for example, toggling between ",[1681,49300,49301],{},"light",[1681,49303,49304],{},"dark"," themes.",[2562,49307,49308],{},[49309,49310],"objects-html-occlude-complex-demo",{},[48904,49312,48906,49313,49315],{},[48908,49314,48910],{},[598,49316,49318],{"className":39826,"code":49317,"language":39828,"meta":548,"style":548},"\u003CTresMesh :position=\"[0, 1, 0]\">\n  \u003CTresBoxGeometry />\n  \u003CTresMeshNormalMaterial />\n  \u003Chtml\n    v-bind=\"htmlProps\"\n    :occlude=\"occluderRefs\"\n    :distance-factor=\"4\"\n    :z-index-range=\"[28, 0]\"\n    @on-occlude=\"(event: boolean) => isOccluded = event\"\n  >\n    \u003Ch1 class=\"bg-white dark:bg-dark text-xs p-1 rounded\">Move camera\u003C/h1>\n  \u003C/html>\n\u003C/TresMesh>\n",[590,49319,49320,49338,49346,49354,49361,49375,49389,49402,49415,49429,49433,49459,49467],{"__ignoreMap":548},[609,49321,49322,49324,49326,49328,49330,49332,49334,49336],{"class":611,"line":549},[609,49323,615],{"class":614},[609,49325,832],{"class":618},[609,49327,48924],{"class":622},[609,49329,629],{"class":614},[609,49331,632],{"class":614},[609,49333,49107],{"class":635},[609,49335,632],{"class":614},[609,49337,641],{"class":614},[609,49339,49340,49342,49344],{"class":611,"line":550},[609,49341,730],{"class":614},[609,49343,843],{"class":618},[609,49345,759],{"class":614},[609,49347,49348,49350,49352],{"class":611,"line":680},[609,49349,730],{"class":614},[609,49351,853],{"class":618},[609,49353,759],{"class":614},[609,49355,49356,49358],{"class":611,"line":701},[609,49357,730],{"class":614},[609,49359,49360],{"class":618},"html\n",[609,49362,49363,49366,49368,49370,49373],{"class":611,"line":711},[609,49364,49365],{"class":622},"    v-bind",[609,49367,629],{"class":614},[609,49369,632],{"class":614},[609,49371,49372],{"class":635},"htmlProps",[609,49374,2991],{"class":614},[609,49376,49377,49380,49382,49384,49387],{"class":611,"line":717},[609,49378,49379],{"class":622},"    :occlude",[609,49381,629],{"class":614},[609,49383,632],{"class":614},[609,49385,49386],{"class":635},"occluderRefs",[609,49388,2991],{"class":614},[609,49390,49391,49394,49396,49398,49400],{"class":611,"line":727},[609,49392,49393],{"class":622},"    :distance-factor",[609,49395,629],{"class":614},[609,49397,632],{"class":614},[609,49399,3494],{"class":635},[609,49401,2991],{"class":614},[609,49403,49404,49407,49409,49411,49413],{"class":611,"line":750},[609,49405,49406],{"class":622},"    :z-index-range",[609,49408,629],{"class":614},[609,49410,632],{"class":614},[609,49412,48997],{"class":635},[609,49414,2991],{"class":614},[609,49416,49417,49420,49422,49424,49427],{"class":611,"line":762},[609,49418,49419],{"class":622},"    @on-occlude",[609,49421,629],{"class":614},[609,49423,632],{"class":614},[609,49425,49426],{"class":635},"(event: boolean) => isOccluded = event",[609,49428,2991],{"class":614},[609,49430,49431],{"class":611,"line":772},[609,49432,14806],{"class":614},[609,49434,49435,49437,49439,49441,49443,49445,49447,49449,49451,49453,49455,49457],{"class":611,"line":777},[609,49436,753],{"class":614},[609,49438,48690],{"class":618},[609,49440,19616],{"class":622},[609,49442,629],{"class":614},[609,49444,632],{"class":614},[609,49446,49016],{"class":635},[609,49448,632],{"class":614},[609,49450,12669],{"class":614},[609,49452,49023],{"class":655},[609,49454,704],{"class":614},[609,49456,48690],{"class":618},[609,49458,641],{"class":614},[609,49460,49461,49463,49465],{"class":611,"line":803},[609,49462,881],{"class":614},[609,49464,39828],{"class":618},[609,49466,641],{"class":614},[609,49468,49469,49471,49473],{"class":611,"line":603},[609,49470,704],{"class":614},[609,49472,832],{"class":618},[609,49474,641],{"class":614},[7477,49476,49478],{"id":49477},"blending-occlusion","Blending Occlusion",[586,49480,49481,49483],{},[590,49482,48386],{}," can hide behind geometry as if it was part of the 3D scene using this mode. It can be enabled by using \"blending\" as the occlude prop.",[598,49485,49487],{"className":600,"code":49486,"language":605,"meta":548,"style":548},"\u003CHtml occlude=\"blending\">\n",[590,49488,49489],{"__ignoreMap":548},[609,49490,49491,49493,49495,49497,49499,49501,49503,49505],{"class":611,"line":549},[609,49492,615],{"class":614},[609,49494,48719],{"class":618},[609,49496,48887],{"class":622},[609,49498,629],{"class":614},[609,49500,632],{"class":614},[609,49502,44287],{"class":635},[609,49504,632],{"class":614},[609,49506,641],{"class":614},[586,49508,2257,49509,45678,49512,49515,49516,1122],{},[1677,49510,49511],{},"demo below ⬇️",[1681,49513,49514],{},"(left black example)"," shows a ",[1677,49517,49518],{},"basic usage example",[2562,49520,49521],{},[49522,49523],"objects-html-occlude-blending-demo",{},[48904,49525,48906,49526,49528],{},[48908,49527,48910],{},[598,49529,49567],{"className":600,"code":49530,"highlights":49531,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { Html, Levioso, OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport { shallowRef } from 'vue'\nimport { CircleGeometry, MeshStandardMaterial } from 'three'\n\nconst gl = {\n  clearColor: '#82DBC5',\n  clearAlpha: 1,\n  shadows: true,\n  alpha: true,\n}\n\nconst targetDirectionLightRef = shallowRef(null)\n\nconst geometries = [\n  {\n    component: 'TresBoxGeometry',\n    args: [1, 1, 1],\n  },\n  {\n    component: 'TresSphereGeometry',\n    args: [0.7, 32, 32],\n  },\n  {\n    component: 'TresTorusGeometry',\n    args: [0.5, 0.2, 16, 100],\n    bind: { castShadow: true, receiveShadow: true },\n  },\n]\n\nconst customGeometry = shallowRef(new CircleGeometry(1.25, 32))\n\nconst customMaterial = shallowRef(new MeshStandardMaterial({\n  color: 'red',\n  side: 2,\n  opacity: 1,\n  transparent: true,\n}))\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"html-demo-wrapper aspect-video\">\n    \u003CTresCanvas v-bind=\"gl\">\n      \u003CTresPerspectiveCamera :position=\"[0, 1.5, 7.5]\" />\n      \u003COrbitControls />\n\n      \u003CLevioso\n        v-for=\"(geometry, index) in geometries\"\n        :key=\"`html-occlude-blending-demo-${index}`\"\n        :speed=\"3\"\n        :float-factor=\"3.5\"\n        :rotation-factor=\"1\"\n        :range=\"[-0.35, 0.35]\"\n      >\n        \u003CTresMesh :position=\"[index * 3.5 - 3.5, 1, 0]\" v-bind=\"geometry.bind\">\n          \u003Ccomponent :is=\"geometry.component\" :args=\"geometry.args\" />\n          \u003CTresMeshNormalMaterial />\n        \u003C/TresMesh>\n      \u003C/Levioso>\n\n      \u003CHtml\n        center\n        transform\n        occlude=\"blending\"\n        :position=\"[-4, .75, -2]\"\n        :z-index-range=\"[28, 0]\"\n      >\n        \u003Cdiv class=\"text-center text-s p-2 bg-[#1B1C1E] text-light\">\n          BASIC 💛 \u003Cbr />\n          \u003Cem>occlude=blending\u003C/em>\n        \u003C/div>\n      \u003C/Html>\n\n      \u003CHtml\n        center\n        transform\n        occlude=\"blending\"\n        :position=\"[0, .85, -2]\"\n        :geometry=\"customGeometry\"\n        :z-index-range=\"[28, 0]\"\n      >\n        \u003Cdiv class=\"text-xs p-8 text-center bg-[#F6B03B] text-dark\">\n          CUSTOM \u003Cbr /> \u003Cstrong>CIRCLE \u003Cbr /> GEOMETRY\u003C/strong>\n        \u003C/div>\n      \u003C/Html>\n\n      \u003CHtml\n        ref=\"targetDirectionLightRef\"\n        center\n        transform\n        occlude=\"blending\"\n        :position=\"[4, .5, -2]\"\n        :material=\"customMaterial\"\n        receive-shadow\n        :z-index-range=\"[28, 0]\"\n      >\n        \u003Cdiv style=\"width: 100px; height: auto; aspect-ratio: 250/250;\">\u003C/div>\n      \u003C/Html>\n\n      \u003CHtml\n        center\n        transform\n        occlude=\"blending\"\n        :position=\"[4, 2.5, -2]\"\n        :z-index-range=\"[28, 0]\"\n      >\n        \u003Cdiv class=\"text-center text-xs p-2 text-dark bg-[#FF0000]\">\n          \u003Cstrong>HTML + Custom material \u003C/strong> \u003Cbr />\n          \u003Cem>+ receive-shadow \u003C/em> ⬇️\n        \u003C/div>\n      \u003C/Html>\n\n      \u003CTresDirectionalLight\n        v-if=\"targetDirectionLightRef?.instance\"\n        :target=\"targetDirectionLightRef?.instance\"\n        :shadow-normalBias=\"0.075\"\n        :position=\"[5, 0, 5]\"\n        :intensity=\"2\"\n        cast-shadow\n      />\n\n      \u003CTresGridHelper :position-y=\"-1\" />\n      \u003CTresAmbientLight :intensity=\"1\" />\n    \u003C/TresCanvas>\n  \u003C/div>\n\u003C/template>\n\n\u003Cstyle scoped>\n.html-demo-wrapper {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n  background-color: #82dbc5;\n}\n\u003C/style>\n\n",[550,4216,4248,4257,4266,4275,15730,15745,16035,16044,16065,16123,16182,16202,16234,16243,16252,49532,49533,16044,16065,16123,16182,16202,16234,16243,16252,49532,49533,49534,49535,49536,49537,49538,49539,49540,49541,49542,49543,49544,49545,49546,49547,49548,49549,49550,49551,49552,49553,49554,49555,49556,49557,49558,49559,49560,49561,49562,49563,49564,49565,49566],71,72,74,75,76,77,78,79,80,81,82,83,84,86,87,88,89,90,91,92,93,94,95,96,98,99,100,101,102,103,104,105,106,107,108,[590,49568,49569,49589,49616,49634,49652,49675,49679,49690,49705,49716,49727,49738,49742,49746,49763,49767,49778,49782,49797,49820,49824,49828,49842,49864,49868,49872,49886,49912,49939,49943,49947,49951,49980,49984,50006,50021,50033,50045,50057,50064,50072,50076,50084,50103,50122,50154,50162,50166,50173,50196,50215,50229,50245,50259,50282,50286,50343,50386,50394,50403,50411,50415,50422,50427,50432,50446,50474,50499,50504,50524,50536,50554,50563,50572,50577,50584,50589,50594,50607,50635,50651,50674,50679,50699,50737,50746,50755,50760,50767,50781,50786,50791,50804,50832,50848,50854,50877,50882,50937,50946,50951,50958,50963,50968,50981,51009,51032,51037,51057,51081,51102,51111,51120,51125,51132,51150,51169,51186,51213,51228,51234,51239,51244,51267,51288,51297,51306,51315,51320,51331,51341,51353,51364,51377,51390,51404,51409],{"__ignoreMap":548},[609,49570,49571,49573,49575,49577,49579,49581,49583,49585,49587],{"class":611,"line":549},[609,49572,615],{"class":614},[609,49574,619],{"class":618},[609,49576,623],{"class":622},[609,49578,626],{"class":622},[609,49580,629],{"class":614},[609,49582,632],{"class":614},[609,49584,636],{"class":635},[609,49586,632],{"class":614},[609,49588,641],{"class":614},[609,49590,49592,49594,49596,49598,49600,49602,49604,49606,49608,49610,49612,49614],{"class":49591,"line":550},[611,645],[609,49593,649],{"class":648},[609,49595,652],{"class":614},[609,49597,48430],{"class":655},[609,49599,659],{"class":614},[609,49601,3343],{"class":655},[609,49603,659],{"class":614},[609,49605,662],{"class":655},[609,49607,665],{"class":614},[609,49609,668],{"class":648},[609,49611,671],{"class":614},[609,49613,674],{"class":635},[609,49615,677],{"class":614},[609,49617,49618,49620,49622,49624,49626,49628,49630,49632],{"class":611,"line":680},[609,49619,649],{"class":648},[609,49621,652],{"class":614},[609,49623,687],{"class":655},[609,49625,665],{"class":614},[609,49627,668],{"class":648},[609,49629,671],{"class":614},[609,49631,696],{"class":635},[609,49633,677],{"class":614},[609,49635,49636,49638,49640,49642,49644,49646,49648,49650],{"class":611,"line":701},[609,49637,649],{"class":648},[609,49639,652],{"class":614},[609,49641,7909],{"class":655},[609,49643,665],{"class":614},[609,49645,668],{"class":648},[609,49647,671],{"class":614},[609,49649,605],{"class":635},[609,49651,677],{"class":614},[609,49653,49654,49656,49658,49661,49663,49665,49667,49669,49671,49673],{"class":611,"line":711},[609,49655,649],{"class":648},[609,49657,652],{"class":614},[609,49659,49660],{"class":655}," CircleGeometry",[609,49662,659],{"class":614},[609,49664,15265],{"class":655},[609,49666,665],{"class":614},[609,49668,668],{"class":648},[609,49670,671],{"class":614},[609,49672,2682],{"class":635},[609,49674,677],{"class":614},[609,49676,49677],{"class":611,"line":717},[609,49678,714],{"emptyLinePlaceholder":566},[609,49680,49681,49683,49686,49688],{"class":611,"line":727},[609,49682,2693],{"class":622},[609,49684,49685],{"class":655}," gl ",[609,49687,629],{"class":614},[609,49689,1180],{"class":614},[609,49691,49692,49695,49697,49699,49701,49703],{"class":611,"line":750},[609,49693,49694],{"class":618},"  clearColor",[609,49696,1194],{"class":614},[609,49698,671],{"class":614},[609,49700,5044],{"class":635},[609,49702,5540],{"class":614},[609,49704,14979],{"class":614},[609,49706,49707,49710,49712,49714],{"class":611,"line":762},[609,49708,49709],{"class":618},"  clearAlpha",[609,49711,1194],{"class":614},[609,49713,23911],{"class":795},[609,49715,14979],{"class":614},[609,49717,49718,49721,49723,49725],{"class":611,"line":772},[609,49719,49720],{"class":618},"  shadows",[609,49722,1194],{"class":614},[609,49724,11887],{"class":3874},[609,49726,14979],{"class":614},[609,49728,49729,49732,49734,49736],{"class":611,"line":777},[609,49730,49731],{"class":618},"  alpha",[609,49733,1194],{"class":614},[609,49735,11887],{"class":3874},[609,49737,14979],{"class":614},[609,49739,49740],{"class":611,"line":803},[609,49741,1301],{"class":614},[609,49743,49744],{"class":611,"line":603},[609,49745,714],{"emptyLinePlaceholder":566},[609,49747,49748,49750,49753,49755,49757,49759,49761],{"class":611,"line":826},[609,49749,2693],{"class":622},[609,49751,49752],{"class":655}," targetDirectionLightRef ",[609,49754,629],{"class":614},[609,49756,7909],{"class":2804},[609,49758,2974],{"class":655},[609,49760,3156],{"class":614},[609,49762,5543],{"class":655},[609,49764,49765],{"class":611,"line":837},[609,49766,714],{"emptyLinePlaceholder":566},[609,49768,49769,49771,49774,49776],{"class":611,"line":848},[609,49770,2693],{"class":622},[609,49772,49773],{"class":655}," geometries ",[609,49775,629],{"class":614},[609,49777,14966],{"class":655},[609,49779,49780],{"class":611,"line":858},[609,49781,31869],{"class":614},[609,49783,49784,49787,49789,49791,49793,49795],{"class":611,"line":604},[609,49785,49786],{"class":618},"    component",[609,49788,1194],{"class":614},[609,49790,671],{"class":614},[609,49792,843],{"class":635},[609,49794,5540],{"class":614},[609,49796,14979],{"class":614},[609,49798,49799,49802,49804,49806,49808,49810,49812,49814,49816,49818],{"class":611,"line":878},[609,49800,49801],{"class":618},"    args",[609,49803,1194],{"class":614},[609,49805,27146],{"class":655},[609,49807,1897],{"class":795},[609,49809,659],{"class":614},[609,49811,23911],{"class":795},[609,49813,659],{"class":614},[609,49815,23911],{"class":795},[609,49817,1485],{"class":655},[609,49819,14979],{"class":614},[609,49821,49822],{"class":611,"line":888},[609,49823,18593],{"class":614},[609,49825,49826],{"class":611,"line":2956},[609,49827,31869],{"class":614},[609,49829,49830,49832,49834,49836,49838,49840],{"class":611,"line":2964},[609,49831,49786],{"class":618},[609,49833,1194],{"class":614},[609,49835,671],{"class":614},[609,49837,4739],{"class":635},[609,49839,5540],{"class":614},[609,49841,14979],{"class":614},[609,49843,49844,49846,49848,49850,49852,49854,49856,49858,49860,49862],{"class":611,"line":2994},[609,49845,49801],{"class":618},[609,49847,1194],{"class":614},[609,49849,27146],{"class":655},[609,49851,34722],{"class":795},[609,49853,659],{"class":614},[609,49855,24668],{"class":795},[609,49857,659],{"class":614},[609,49859,24668],{"class":795},[609,49861,1485],{"class":655},[609,49863,14979],{"class":614},[609,49865,49866],{"class":611,"line":3011},[609,49867,18593],{"class":614},[609,49869,49870],{"class":611,"line":3026},[609,49871,31869],{"class":614},[609,49873,49874,49876,49878,49880,49882,49884],{"class":611,"line":3051},[609,49875,49786],{"class":618},[609,49877,1194],{"class":614},[609,49879,671],{"class":614},[609,49881,5131],{"class":635},[609,49883,5540],{"class":614},[609,49885,14979],{"class":614},[609,49887,49888,49890,49892,49894,49896,49898,49900,49902,49904,49906,49908,49910],{"class":611,"line":2595},[609,49889,49801],{"class":618},[609,49891,1194],{"class":614},[609,49893,27146],{"class":655},[609,49895,1517],{"class":795},[609,49897,659],{"class":614},[609,49899,29600],{"class":795},[609,49901,659],{"class":614},[609,49903,29479],{"class":795},[609,49905,659],{"class":614},[609,49907,2728],{"class":795},[609,49909,1485],{"class":655},[609,49911,14979],{"class":614},[609,49913,49914,49917,49919,49921,49924,49926,49928,49930,49933,49935,49937],{"class":611,"line":3066},[609,49915,49916],{"class":618},"    bind",[609,49918,1194],{"class":614},[609,49920,652],{"class":614},[609,49922,49923],{"class":618}," castShadow",[609,49925,1194],{"class":614},[609,49927,11887],{"class":3874},[609,49929,659],{"class":614},[609,49931,49932],{"class":618}," receiveShadow",[609,49934,1194],{"class":614},[609,49936,11887],{"class":3874},[609,49938,20830],{"class":614},[609,49940,49941],{"class":611,"line":3096},[609,49942,18593],{"class":614},[609,49944,49945],{"class":611,"line":3105},[609,49946,15004],{"class":655},[609,49948,49949],{"class":611,"line":4211},[609,49950,714],{"emptyLinePlaceholder":566},[609,49952,49954,49956,49959,49961,49963,49965,49967,49969,49971,49974,49976,49978],{"class":49953,"line":4216},[611,645],[609,49955,2693],{"class":622},[609,49957,49958],{"class":655}," customGeometry ",[609,49960,629],{"class":614},[609,49962,7909],{"class":2804},[609,49964,2974],{"class":655},[609,49966,29860],{"class":614},[609,49968,49660],{"class":2804},[609,49970,2974],{"class":655},[609,49972,49973],{"class":795},"1.25",[609,49975,659],{"class":614},[609,49977,24668],{"class":795},[609,49979,29966],{"class":655},[609,49981,49982],{"class":611,"line":4239},[609,49983,714],{"emptyLinePlaceholder":566},[609,49985,49987,49989,49992,49994,49996,49998,50000,50002,50004],{"class":49986,"line":4248},[611,645],[609,49988,2693],{"class":622},[609,49990,49991],{"class":655}," customMaterial ",[609,49993,629],{"class":614},[609,49995,7909],{"class":2804},[609,49997,2974],{"class":655},[609,49999,29860],{"class":614},[609,50001,15265],{"class":2804},[609,50003,2974],{"class":655},[609,50005,2755],{"class":614},[609,50007,50009,50011,50013,50015,50017,50019],{"class":50008,"line":4257},[611,645],[609,50010,36087],{"class":618},[609,50012,1194],{"class":614},[609,50014,671],{"class":614},[609,50016,30725],{"class":635},[609,50018,5540],{"class":614},[609,50020,14979],{"class":614},[609,50022,50024,50027,50029,50031],{"class":50023,"line":4266},[611,645],[609,50025,50026],{"class":618},"  side",[609,50028,1194],{"class":614},[609,50030,25520],{"class":795},[609,50032,14979],{"class":614},[609,50034,50036,50039,50041,50043],{"class":50035,"line":4275},[611,645],[609,50037,50038],{"class":618},"  opacity",[609,50040,1194],{"class":614},[609,50042,23911],{"class":795},[609,50044,14979],{"class":614},[609,50046,50048,50051,50053,50055],{"class":50047,"line":15730},[611,645],[609,50049,50050],{"class":618},"  transparent",[609,50052,1194],{"class":614},[609,50054,11887],{"class":3874},[609,50056,14979],{"class":614},[609,50058,50060,50062],{"class":50059,"line":15745},[611,645],[609,50061,5548],{"class":614},[609,50063,29966],{"class":655},[609,50065,50066,50068,50070],{"class":611,"line":15760},[609,50067,704],{"class":614},[609,50069,619],{"class":618},[609,50071,641],{"class":614},[609,50073,50074],{"class":611,"line":15765},[609,50075,714],{"emptyLinePlaceholder":566},[609,50077,50078,50080,50082],{"class":611,"line":15772},[609,50079,615],{"class":614},[609,50081,722],{"class":618},[609,50083,641],{"class":614},[609,50085,50086,50088,50090,50092,50094,50096,50099,50101],{"class":611,"line":15777},[609,50087,730],{"class":614},[609,50089,19613],{"class":618},[609,50091,19616],{"class":622},[609,50093,629],{"class":614},[609,50095,632],{"class":614},[609,50097,50098],{"class":635},"html-demo-wrapper aspect-video",[609,50100,632],{"class":614},[609,50102,641],{"class":614},[609,50104,50105,50107,50109,50111,50113,50115,50118,50120],{"class":611,"line":15783},[609,50106,753],{"class":614},[609,50108,733],{"class":618},[609,50110,4115],{"class":622},[609,50112,629],{"class":614},[609,50114,632],{"class":614},[609,50116,50117],{"class":655},"gl",[609,50119,632],{"class":614},[609,50121,641],{"class":614},[609,50123,50124,50126,50128,50130,50132,50134,50136,50138,50140,50142,50144,50146,50148,50150,50152],{"class":611,"line":15804},[609,50125,829],{"class":614},[609,50127,756],{"class":618},[609,50129,785],{"class":614},[609,50131,1463],{"class":622},[609,50133,629],{"class":614},[609,50135,632],{"class":614},[609,50137,1470],{"class":614},[609,50139,941],{"class":795},[609,50141,1475],{"class":614},[609,50143,10828],{"class":795},[609,50145,1475],{"class":614},[609,50147,4689],{"class":795},[609,50149,1485],{"class":614},[609,50151,632],{"class":614},[609,50153,759],{"class":614},[609,50155,50156,50158,50160],{"class":611,"line":15810},[609,50157,829],{"class":614},[609,50159,767],{"class":618},[609,50161,759],{"class":614},[609,50163,50164],{"class":611,"line":15817},[609,50165,714],{"emptyLinePlaceholder":566},[609,50167,50168,50170],{"class":611,"line":15822},[609,50169,829],{"class":614},[609,50171,50172],{"class":618},"Levioso\n",[609,50174,50175,50177,50179,50181,50183,50185,50187,50189,50191,50194],{"class":611,"line":15843},[609,50176,2967],{"class":648},[609,50178,629],{"class":614},[609,50180,632],{"class":614},[609,50182,2974],{"class":614},[609,50184,16692],{"class":655},[609,50186,1475],{"class":614},[609,50188,2982],{"class":655},[609,50190,2985],{"class":614},[609,50192,50193],{"class":655},"geometries",[609,50195,2991],{"class":614},[609,50197,50198,50200,50202,50204,50206,50209,50211,50213],{"class":611,"line":15856},[609,50199,2997],{"class":614},[609,50201,3000],{"class":622},[609,50203,629],{"class":614},[609,50205,16674],{"class":614},[609,50207,50208],{"class":635},"html-occlude-blending-demo-",[609,50210,16680],{"class":614},[609,50212,2982],{"class":655},[609,50214,16685],{"class":614},[609,50216,50217,50219,50221,50223,50225,50227],{"class":611,"line":15882},[609,50218,2997],{"class":614},[609,50220,3487],{"class":622},[609,50222,629],{"class":614},[609,50224,632],{"class":614},[609,50226,4164],{"class":795},[609,50228,2991],{"class":614},[609,50230,50231,50233,50236,50238,50240,50243],{"class":611,"line":15887},[609,50232,2997],{"class":614},[609,50234,50235],{"class":622},"float-factor",[609,50237,629],{"class":614},[609,50239,632],{"class":614},[609,50241,50242],{"class":795},"3.5",[609,50244,2991],{"class":614},[609,50246,50247,50249,50251,50253,50255,50257],{"class":611,"line":15894},[609,50248,2997],{"class":614},[609,50250,34731],{"class":622},[609,50252,629],{"class":614},[609,50254,632],{"class":614},[609,50256,1897],{"class":795},[609,50258,2991],{"class":614},[609,50260,50261,50263,50265,50267,50269,50271,50274,50276,50278,50280],{"class":611,"line":15903},[609,50262,2997],{"class":614},[609,50264,3694],{"class":622},[609,50266,629],{"class":614},[609,50268,632],{"class":614},[609,50270,16140],{"class":614},[609,50272,50273],{"class":795},"0.35",[609,50275,1475],{"class":614},[609,50277,50273],{"class":795},[609,50279,1485],{"class":614},[609,50281,2991],{"class":614},[609,50283,50284],{"class":611,"line":15908},[609,50285,48683],{"class":614},[609,50287,50288,50290,50292,50294,50296,50298,50300,50302,50304,50307,50309,50312,50314,50316,50318,50320,50322,50324,50326,50328,50330,50332,50334,50336,50339,50341],{"class":611,"line":15917},[609,50289,840],{"class":614},[609,50291,832],{"class":618},[609,50293,785],{"class":614},[609,50295,1463],{"class":622},[609,50297,629],{"class":614},[609,50299,632],{"class":614},[609,50301,1470],{"class":614},[609,50303,2982],{"class":655},[609,50305,50306],{"class":614}," * ",[609,50308,50242],{"class":795},[609,50310,50311],{"class":614}," - ",[609,50313,50242],{"class":795},[609,50315,1475],{"class":614},[609,50317,1897],{"class":795},[609,50319,1475],{"class":614},[609,50321,941],{"class":795},[609,50323,1485],{"class":614},[609,50325,632],{"class":614},[609,50327,4115],{"class":622},[609,50329,629],{"class":614},[609,50331,632],{"class":614},[609,50333,16692],{"class":655},[609,50335,1122],{"class":614},[609,50337,50338],{"class":655},"bind",[609,50340,632],{"class":614},[609,50342,641],{"class":614},[609,50344,50345,50348,50351,50353,50356,50358,50360,50362,50364,50366,50368,50370,50372,50374,50376,50378,50380,50382,50384],{"class":611,"line":15936},[609,50346,50347],{"class":614},"          \u003C",[609,50349,50350],{"class":618},"component",[609,50352,785],{"class":614},[609,50354,50355],{"class":622},"is",[609,50357,629],{"class":614},[609,50359,632],{"class":614},[609,50361,16692],{"class":655},[609,50363,1122],{"class":614},[609,50365,50350],{"class":655},[609,50367,632],{"class":614},[609,50369,785],{"class":614},[609,50371,1993],{"class":622},[609,50373,629],{"class":614},[609,50375,632],{"class":614},[609,50377,16692],{"class":655},[609,50379,1122],{"class":614},[609,50381,1993],{"class":655},[609,50383,632],{"class":614},[609,50385,759],{"class":614},[609,50387,50388,50390,50392],{"class":611,"line":15946},[609,50389,50347],{"class":614},[609,50391,853],{"class":618},[609,50393,759],{"class":614},[609,50395,50396,50399,50401],{"class":611,"line":15983},[609,50397,50398],{"class":614},"        \u003C/",[609,50400,832],{"class":618},[609,50402,641],{"class":614},[609,50404,50405,50407,50409],{"class":611,"line":15992},[609,50406,861],{"class":614},[609,50408,3482],{"class":618},[609,50410,641],{"class":614},[609,50412,50413],{"class":611,"line":16026},[609,50414,714],{"emptyLinePlaceholder":566},[609,50416,50418,50420],{"class":50417,"line":16035},[611,645],[609,50419,829],{"class":614},[609,50421,48596],{"class":618},[609,50423,50425],{"class":50424,"line":16044},[611,645],[609,50426,48602],{"class":622},[609,50428,50430],{"class":50429,"line":16065},[611,645],[609,50431,48608],{"class":622},[609,50433,50435,50438,50440,50442,50444],{"class":50434,"line":16123},[611,645],[609,50436,50437],{"class":622},"        occlude",[609,50439,629],{"class":614},[609,50441,632],{"class":614},[609,50443,44287],{"class":635},[609,50445,2991],{"class":614},[609,50447,50449,50451,50453,50455,50457,50459,50461,50463,50466,50468,50470,50472],{"class":50448,"line":16182},[611,645],[609,50450,2997],{"class":614},[609,50452,1463],{"class":622},[609,50454,629],{"class":614},[609,50456,632],{"class":614},[609,50458,16140],{"class":614},[609,50460,3494],{"class":795},[609,50462,1475],{"class":614},[609,50464,50465],{"class":795},".75",[609,50467,3602],{"class":614},[609,50469,796],{"class":795},[609,50471,1485],{"class":614},[609,50473,2991],{"class":614},[609,50475,50477,50479,50482,50484,50486,50488,50491,50493,50495,50497],{"class":50476,"line":16202},[611,645],[609,50478,2997],{"class":614},[609,50480,50481],{"class":622},"z-index-range",[609,50483,629],{"class":614},[609,50485,632],{"class":614},[609,50487,1470],{"class":614},[609,50489,50490],{"class":795},"28",[609,50492,1475],{"class":614},[609,50494,941],{"class":795},[609,50496,1485],{"class":614},[609,50498,2991],{"class":614},[609,50500,50502],{"class":50501,"line":16234},[611,645],[609,50503,48683],{"class":614},[609,50505,50507,50509,50511,50513,50515,50517,50520,50522],{"class":50506,"line":16243},[611,645],[609,50508,840],{"class":614},[609,50510,19613],{"class":618},[609,50512,19616],{"class":622},[609,50514,629],{"class":614},[609,50516,632],{"class":614},[609,50518,50519],{"class":635},"text-center text-s p-2 bg-[#1B1C1E] text-light",[609,50521,632],{"class":614},[609,50523,641],{"class":614},[609,50525,50527,50530,50532,50534],{"class":50526,"line":16252},[611,645],[609,50528,50529],{"class":655},"          BASIC 💛 ",[609,50531,615],{"class":614},[609,50533,2512],{"class":618},[609,50535,759],{"class":614},[609,50537,50539,50541,50543,50545,50548,50550,50552],{"class":50538,"line":49532},[611,645],[609,50540,50347],{"class":614},[609,50542,1681],{"class":618},[609,50544,12669],{"class":614},[609,50546,50547],{"class":655},"occlude=blending",[609,50549,704],{"class":614},[609,50551,1681],{"class":618},[609,50553,641],{"class":614},[609,50555,50557,50559,50561],{"class":50556,"line":49533},[611,645],[609,50558,50398],{"class":614},[609,50560,19613],{"class":618},[609,50562,641],{"class":614},[609,50564,50566,50568,50570],{"class":611,"line":50565},73,[609,50567,861],{"class":614},[609,50569,48719],{"class":618},[609,50571,641],{"class":614},[609,50573,50575],{"class":50574,"line":49534},[611,645],[609,50576,714],{"emptyLinePlaceholder":566},[609,50578,50580,50582],{"class":50579,"line":49535},[611,645],[609,50581,829],{"class":614},[609,50583,48596],{"class":618},[609,50585,50587],{"class":50586,"line":49536},[611,645],[609,50588,48602],{"class":622},[609,50590,50592],{"class":50591,"line":49537},[611,645],[609,50593,48608],{"class":622},[609,50595,50597,50599,50601,50603,50605],{"class":50596,"line":49538},[611,645],[609,50598,50437],{"class":622},[609,50600,629],{"class":614},[609,50602,632],{"class":614},[609,50604,44287],{"class":635},[609,50606,2991],{"class":614},[609,50608,50610,50612,50614,50616,50618,50620,50622,50624,50627,50629,50631,50633],{"class":50609,"line":49539},[611,645],[609,50611,2997],{"class":614},[609,50613,1463],{"class":622},[609,50615,629],{"class":614},[609,50617,632],{"class":614},[609,50619,1470],{"class":614},[609,50621,941],{"class":795},[609,50623,1475],{"class":614},[609,50625,50626],{"class":795},".85",[609,50628,3602],{"class":614},[609,50630,796],{"class":795},[609,50632,1485],{"class":614},[609,50634,2991],{"class":614},[609,50636,50638,50640,50642,50644,50646,50649],{"class":50637,"line":49540},[611,645],[609,50639,2997],{"class":614},[609,50641,16692],{"class":622},[609,50643,629],{"class":614},[609,50645,632],{"class":614},[609,50647,50648],{"class":655},"customGeometry",[609,50650,2991],{"class":614},[609,50652,50654,50656,50658,50660,50662,50664,50666,50668,50670,50672],{"class":50653,"line":49541},[611,645],[609,50655,2997],{"class":614},[609,50657,50481],{"class":622},[609,50659,629],{"class":614},[609,50661,632],{"class":614},[609,50663,1470],{"class":614},[609,50665,50490],{"class":795},[609,50667,1475],{"class":614},[609,50669,941],{"class":795},[609,50671,1485],{"class":614},[609,50673,2991],{"class":614},[609,50675,50677],{"class":50676,"line":49542},[611,645],[609,50678,48683],{"class":614},[609,50680,50682,50684,50686,50688,50690,50692,50695,50697],{"class":50681,"line":49543},[611,645],[609,50683,840],{"class":614},[609,50685,19613],{"class":618},[609,50687,19616],{"class":622},[609,50689,629],{"class":614},[609,50691,632],{"class":614},[609,50693,50694],{"class":635},"text-xs p-8 text-center bg-[#F6B03B] text-dark",[609,50696,632],{"class":614},[609,50698,641],{"class":614},[609,50700,50702,50705,50707,50709,50712,50715,50717,50719,50722,50724,50726,50728,50731,50733,50735],{"class":50701,"line":49544},[611,645],[609,50703,50704],{"class":655},"          CUSTOM ",[609,50706,615],{"class":614},[609,50708,2512],{"class":618},[609,50710,50711],{"class":614}," />",[609,50713,50714],{"class":614}," \u003C",[609,50716,1677],{"class":618},[609,50718,12669],{"class":614},[609,50720,50721],{"class":655},"CIRCLE ",[609,50723,615],{"class":614},[609,50725,2512],{"class":618},[609,50727,50711],{"class":614},[609,50729,50730],{"class":655}," GEOMETRY",[609,50732,704],{"class":614},[609,50734,1677],{"class":618},[609,50736,641],{"class":614},[609,50738,50740,50742,50744],{"class":611,"line":50739},85,[609,50741,50398],{"class":614},[609,50743,19613],{"class":618},[609,50745,641],{"class":614},[609,50747,50749,50751,50753],{"class":50748,"line":49545},[611,645],[609,50750,861],{"class":614},[609,50752,48719],{"class":618},[609,50754,641],{"class":614},[609,50756,50758],{"class":50757,"line":49546},[611,645],[609,50759,714],{"emptyLinePlaceholder":566},[609,50761,50763,50765],{"class":50762,"line":49547},[611,645],[609,50764,829],{"class":614},[609,50766,48596],{"class":618},[609,50768,50770,50772,50774,50776,50779],{"class":50769,"line":49548},[611,645],[609,50771,20755],{"class":622},[609,50773,629],{"class":614},[609,50775,632],{"class":614},[609,50777,50778],{"class":635},"targetDirectionLightRef",[609,50780,2991],{"class":614},[609,50782,50784],{"class":50783,"line":49549},[611,645],[609,50785,48602],{"class":622},[609,50787,50789],{"class":50788,"line":49550},[611,645],[609,50790,48608],{"class":622},[609,50792,50794,50796,50798,50800,50802],{"class":50793,"line":49551},[611,645],[609,50795,50437],{"class":622},[609,50797,629],{"class":614},[609,50799,632],{"class":614},[609,50801,44287],{"class":635},[609,50803,2991],{"class":614},[609,50805,50807,50809,50811,50813,50815,50817,50819,50821,50824,50826,50828,50830],{"class":50806,"line":49552},[611,645],[609,50808,2997],{"class":614},[609,50810,1463],{"class":622},[609,50812,629],{"class":614},[609,50814,632],{"class":614},[609,50816,1470],{"class":614},[609,50818,3494],{"class":795},[609,50820,1475],{"class":614},[609,50822,50823],{"class":795},".5",[609,50825,3602],{"class":614},[609,50827,796],{"class":795},[609,50829,1485],{"class":614},[609,50831,2991],{"class":614},[609,50833,50835,50837,50839,50841,50843,50846],{"class":50834,"line":49553},[611,645],[609,50836,2997],{"class":614},[609,50838,16742],{"class":622},[609,50840,629],{"class":614},[609,50842,632],{"class":614},[609,50844,50845],{"class":655},"customMaterial",[609,50847,2991],{"class":614},[609,50849,50851],{"class":50850,"line":49554},[611,645],[609,50852,50853],{"class":622},"        receive-shadow\n",[609,50855,50857,50859,50861,50863,50865,50867,50869,50871,50873,50875],{"class":50856,"line":49555},[611,645],[609,50858,2997],{"class":614},[609,50860,50481],{"class":622},[609,50862,629],{"class":614},[609,50864,632],{"class":614},[609,50866,1470],{"class":614},[609,50868,50490],{"class":795},[609,50870,1475],{"class":614},[609,50872,941],{"class":795},[609,50874,1485],{"class":614},[609,50876,2991],{"class":614},[609,50878,50880],{"class":611,"line":50879},97,[609,50881,48683],{"class":614},[609,50883,50885,50887,50889,50892,50894,50896,50898,50900,50903,50906,50908,50910,50913,50915,50918,50920,50923,50925,50927,50929,50931,50933,50935],{"class":50884,"line":49556},[611,645],[609,50886,840],{"class":614},[609,50888,19613],{"class":618},[609,50890,50891],{"class":622}," style",[609,50893,629],{"class":614},[609,50895,632],{"class":614},[609,50897,34941],{"class":48785},[609,50899,7411],{"class":614},[609,50901,50902],{"class":795},"100px",[609,50904,50905],{"class":614},"; ",[609,50907,34955],{"class":48785},[609,50909,7411],{"class":614},[609,50911,50912],{"class":655},"auto",[609,50914,50905],{"class":614},[609,50916,50917],{"class":48785},"aspect-ratio",[609,50919,7411],{"class":614},[609,50921,50922],{"class":795},"250",[609,50924,44447],{"class":614},[609,50926,50922],{"class":795},[609,50928,2731],{"class":614},[609,50930,632],{"class":614},[609,50932,19665],{"class":614},[609,50934,19613],{"class":618},[609,50936,641],{"class":614},[609,50938,50940,50942,50944],{"class":50939,"line":49557},[611,645],[609,50941,861],{"class":614},[609,50943,48719],{"class":618},[609,50945,641],{"class":614},[609,50947,50949],{"class":50948,"line":49558},[611,645],[609,50950,714],{"emptyLinePlaceholder":566},[609,50952,50954,50956],{"class":50953,"line":49559},[611,645],[609,50955,829],{"class":614},[609,50957,48596],{"class":618},[609,50959,50961],{"class":50960,"line":49560},[611,645],[609,50962,48602],{"class":622},[609,50964,50966],{"class":50965,"line":49561},[611,645],[609,50967,48608],{"class":622},[609,50969,50971,50973,50975,50977,50979],{"class":50970,"line":49562},[611,645],[609,50972,50437],{"class":622},[609,50974,629],{"class":614},[609,50976,632],{"class":614},[609,50978,44287],{"class":635},[609,50980,2991],{"class":614},[609,50982,50984,50986,50988,50990,50992,50994,50996,50998,51001,51003,51005,51007],{"class":50983,"line":49563},[611,645],[609,50985,2997],{"class":614},[609,50987,1463],{"class":622},[609,50989,629],{"class":614},[609,50991,632],{"class":614},[609,50993,1470],{"class":614},[609,50995,3494],{"class":795},[609,50997,1475],{"class":614},[609,50999,51000],{"class":795},"2.5",[609,51002,3602],{"class":614},[609,51004,796],{"class":795},[609,51006,1485],{"class":614},[609,51008,2991],{"class":614},[609,51010,51012,51014,51016,51018,51020,51022,51024,51026,51028,51030],{"class":51011,"line":49564},[611,645],[609,51013,2997],{"class":614},[609,51015,50481],{"class":622},[609,51017,629],{"class":614},[609,51019,632],{"class":614},[609,51021,1470],{"class":614},[609,51023,50490],{"class":795},[609,51025,1475],{"class":614},[609,51027,941],{"class":795},[609,51029,1485],{"class":614},[609,51031,2991],{"class":614},[609,51033,51035],{"class":51034,"line":49565},[611,645],[609,51036,48683],{"class":614},[609,51038,51040,51042,51044,51046,51048,51050,51053,51055],{"class":51039,"line":49566},[611,645],[609,51041,840],{"class":614},[609,51043,19613],{"class":618},[609,51045,19616],{"class":622},[609,51047,629],{"class":614},[609,51049,632],{"class":614},[609,51051,51052],{"class":635},"text-center text-xs p-2 text-dark bg-[#FF0000]",[609,51054,632],{"class":614},[609,51056,641],{"class":614},[609,51058,51060,51062,51064,51066,51069,51071,51073,51075,51077,51079],{"class":611,"line":51059},109,[609,51061,50347],{"class":614},[609,51063,1677],{"class":618},[609,51065,12669],{"class":614},[609,51067,51068],{"class":655},"HTML + Custom material ",[609,51070,704],{"class":614},[609,51072,1677],{"class":618},[609,51074,12669],{"class":614},[609,51076,50714],{"class":614},[609,51078,2512],{"class":618},[609,51080,759],{"class":614},[609,51082,51084,51086,51088,51090,51093,51095,51097,51099],{"class":611,"line":51083},110,[609,51085,50347],{"class":614},[609,51087,1681],{"class":618},[609,51089,12669],{"class":614},[609,51091,51092],{"class":655},"+ receive-shadow ",[609,51094,704],{"class":614},[609,51096,1681],{"class":618},[609,51098,12669],{"class":614},[609,51100,51101],{"class":655}," ⬇️\n",[609,51103,51105,51107,51109],{"class":611,"line":51104},111,[609,51106,50398],{"class":614},[609,51108,19613],{"class":618},[609,51110,641],{"class":614},[609,51112,51114,51116,51118],{"class":611,"line":51113},112,[609,51115,861],{"class":614},[609,51117,48719],{"class":618},[609,51119,641],{"class":614},[609,51121,51123],{"class":611,"line":51122},113,[609,51124,714],{"emptyLinePlaceholder":566},[609,51126,51128,51130],{"class":611,"line":51127},114,[609,51129,829],{"class":614},[609,51131,11720],{"class":618},[609,51133,51135,51138,51140,51142,51144,51146,51148],{"class":611,"line":51134},115,[609,51136,51137],{"class":648},"        v-if",[609,51139,629],{"class":614},[609,51141,632],{"class":614},[609,51143,50778],{"class":655},[609,51145,11531],{"class":614},[609,51147,21491],{"class":655},[609,51149,2991],{"class":614},[609,51151,51153,51155,51157,51159,51161,51163,51165,51167],{"class":611,"line":51152},116,[609,51154,2997],{"class":614},[609,51156,9827],{"class":622},[609,51158,629],{"class":614},[609,51160,632],{"class":614},[609,51162,50778],{"class":655},[609,51164,11531],{"class":614},[609,51166,21491],{"class":655},[609,51168,2991],{"class":614},[609,51170,51172,51174,51177,51179,51181,51184],{"class":611,"line":51171},117,[609,51173,2997],{"class":614},[609,51175,51176],{"class":622},"shadow-normalBias",[609,51178,629],{"class":614},[609,51180,632],{"class":614},[609,51182,51183],{"class":795},"0.075",[609,51185,2991],{"class":614},[609,51187,51189,51191,51193,51195,51197,51199,51201,51203,51205,51207,51209,51211],{"class":611,"line":51188},118,[609,51190,2997],{"class":614},[609,51192,1463],{"class":622},[609,51194,629],{"class":614},[609,51196,632],{"class":614},[609,51198,1470],{"class":614},[609,51200,2400],{"class":795},[609,51202,1475],{"class":614},[609,51204,941],{"class":795},[609,51206,1475],{"class":614},[609,51208,2400],{"class":795},[609,51210,1485],{"class":614},[609,51212,2991],{"class":614},[609,51214,51216,51218,51220,51222,51224,51226],{"class":611,"line":51215},119,[609,51217,2997],{"class":614},[609,51219,1890],{"class":622},[609,51221,629],{"class":614},[609,51223,632],{"class":614},[609,51225,796],{"class":795},[609,51227,2991],{"class":614},[609,51229,51231],{"class":611,"line":51230},120,[609,51232,51233],{"class":622},"        cast-shadow\n",[609,51235,51237],{"class":611,"line":51236},121,[609,51238,3054],{"class":614},[609,51240,51242],{"class":611,"line":51241},122,[609,51243,714],{"emptyLinePlaceholder":566},[609,51245,51247,51249,51251,51253,51255,51257,51259,51261,51263,51265],{"class":611,"line":51246},123,[609,51248,829],{"class":614},[609,51250,3071],{"class":618},[609,51252,785],{"class":614},[609,51254,1972],{"class":622},[609,51256,629],{"class":614},[609,51258,632],{"class":614},[609,51260,4092],{"class":614},[609,51262,1897],{"class":795},[609,51264,632],{"class":614},[609,51266,759],{"class":614},[609,51268,51270,51272,51274,51276,51278,51280,51282,51284,51286],{"class":611,"line":51269},124,[609,51271,829],{"class":614},[609,51273,3522],{"class":618},[609,51275,785],{"class":614},[609,51277,1890],{"class":622},[609,51279,629],{"class":614},[609,51281,632],{"class":614},[609,51283,1897],{"class":795},[609,51285,632],{"class":614},[609,51287,759],{"class":614},[609,51289,51291,51293,51295],{"class":611,"line":51290},125,[609,51292,871],{"class":614},[609,51294,733],{"class":618},[609,51296,641],{"class":614},[609,51298,51300,51302,51304],{"class":611,"line":51299},126,[609,51301,881],{"class":614},[609,51303,19613],{"class":618},[609,51305,641],{"class":614},[609,51307,51309,51311,51313],{"class":611,"line":51308},127,[609,51310,704],{"class":614},[609,51312,722],{"class":618},[609,51314,641],{"class":614},[609,51316,51318],{"class":611,"line":51317},128,[609,51319,714],{"emptyLinePlaceholder":566},[609,51321,51323,51325,51327,51329],{"class":611,"line":51322},129,[609,51324,615],{"class":614},[609,51326,1303],{"class":618},[609,51328,48770],{"class":622},[609,51330,641],{"class":614},[609,51332,51334,51336,51339],{"class":611,"line":51333},130,[609,51335,1122],{"class":614},[609,51337,51338],{"class":1176},"html-demo-wrapper",[609,51340,1180],{"class":614},[609,51342,51344,51346,51348,51351],{"class":611,"line":51343},131,[609,51345,1216],{"class":48785},[609,51347,1194],{"class":614},[609,51349,51350],{"class":795}," 100%",[609,51352,3333],{"class":614},[609,51354,51356,51358,51360,51362],{"class":611,"line":51355},132,[609,51357,1226],{"class":48785},[609,51359,1194],{"class":614},[609,51361,51350],{"class":795},[609,51363,3333],{"class":614},[609,51365,51367,51370,51372,51375],{"class":611,"line":51366},133,[609,51368,51369],{"class":48785},"  position",[609,51371,1194],{"class":614},[609,51373,51374],{"class":655}," relative",[609,51376,3333],{"class":614},[609,51378,51380,51383,51385,51388],{"class":611,"line":51379},134,[609,51381,51382],{"class":48785},"  overflow",[609,51384,1194],{"class":614},[609,51386,51387],{"class":655}," hidden",[609,51389,3333],{"class":614},[609,51391,51393,51395,51397,51399,51402],{"class":611,"line":51392},135,[609,51394,48786],{"class":48785},[609,51396,1194],{"class":614},[609,51398,48791],{"class":614},[609,51400,51401],{"class":655},"82dbc5",[609,51403,3333],{"class":614},[609,51405,51407],{"class":611,"line":51406},136,[609,51408,1301],{"class":614},[609,51410,51412,51414,51416],{"class":611,"line":51411},137,[609,51413,704],{"class":614},[609,51415,1303],{"class":618},[609,51417,641],{"class":614},[476,51419,40165],{"id":40164},[586,51421,51422,51423,51426,51427,51430,51431,51433,51434,51437,51438,51442],{},"By default, when using ",[590,51424,51425],{},"occlude=\"blending\"",", occlusion works correctly only with ",[1677,51428,51429],{},"rectangular HTML elements"," (using a ",[590,51432,27432],{},").\nFor ",[1681,51435,51436],{},"non-rectangular content",", you can use the ",[1677,51439,51440],{},[590,51441,16692],{}," prop to provide a matching custom geometry.",[586,51444,51445,51446,45678,51449,51452,51453,51459,51460,1122],{},"In the ",[1677,51447,51448],{},"demo above ⬆️",[1681,51450,51451],{},"(middle yellow example)",", a ",[1116,51454,51457],{"href":51455,"rel":51456},"https://threejs.org/docs/#api/en/geometries/CircleGeometry",[1120],[590,51458,24626],{}," is used as a ",[1677,51461,51462],{},"custom geometry",[51464,51465,51466],"prose-list",{},[3140,51467,51468,51477],{},[3143,51469,2257,51470,51472,51473,51476],{},[590,51471,16692],{}," prop only defines the ",[1677,51474,51475],{},"occlusion shape"," in 3D and does not modify your HTML content.",[3143,51478,51479,51480,51487,51488,51491,51492,51495,51496,51503],{},"You can provide any ",[1116,51481,51484],{"href":51482,"rel":51483},"https://threejs.org/docs/#api/en/core/BufferGeometry",[1120],[590,51485,51486],{},"BufferGeometry",", for example to simulate ",[1677,51489,51490],{},"CSS-like styles"," such as ",[590,51493,51494],{},"border-radius"," using a rounded rectangle or squircle geometry (see ",[1116,51497,51500],{"href":51498,"rel":51499},"https://discourse.threejs.org/t/roundedrectangle-squircle/28645",[1120],[590,51501,51502],{},"RoundedRectangle / Squircle geometry"," for example).",[17353,51505,51507],{"id":51506},"custom-material","Custom Material",[586,51509,51510,51511,51513,51514,45678,51516,51452,51519,51522],{},"You can also assign material properties to the HTML content using the ",[590,51512,16742],{}," prop.\nIn the ",[1677,51515,51448],{},[1681,51517,51518],{},"(right red example)",[1677,51520,51521],{},"custom material"," is used with shadow.",[2050,51524,51525],{},[586,51526,2257,51527,51529,51530,51532,51533,1122],{},[590,51528,16742],{}," prop is only available when ",[590,51531,51425],{}," is ",[1677,51534,8197],{},[2050,51536,51537],{},[586,51538,51539,51540,4435,51544,51548,51549,51552,51553,51555,51556,51559,51560,11099,51564,3202,51569],{},"Enable shadows using the ",[1677,51541,51542],{},[590,51543,12867],{},[1677,51545,51546],{},[590,51547,12885],{}," props.\nShadows are supported ",[1677,51550,51551],{},"only"," when using a ",[1677,51554,51521],{},". By default, shadows do ",[1677,51557,51558],{},"not"," work with ",[1681,51561,51562],{},[590,51563,21643],{},[1681,51565,51566],{},[590,51567,51568],{},"ShaderMaterial",[2512,51570],{},[476,51572,51574,51575],{"id":51573},"using-transition","Using ",[590,51576,51577],{},"\u003CTransition>",[586,51579,51580,51581,51587,51588,51590,51591,51594,51595,4435,51598,51601],{},"The native Vue ",[1116,51582,51585],{"href":51583,"rel":51584},"https://vuejs.org/guide/built-ins/transition",[1120],[590,51586,51577],{}," component works seamlessly with ",[590,51589,48386],{},".\nThis means you can ",[1677,51592,51593],{},"animate"," how your projected HTML content ",[1681,51596,51597],{},"enters",[1681,51599,51600],{},"leaves"," the scene, exactly as you would in a regular Vue application.",[2050,51603,51604],{},[586,51605,23461,51606,51609,51610,1475,51613,1695,51615,51618],{},[1677,51607,51608],{},"standard interactions"," are supported just like on a regular HTML element — ",[1677,51611,51612],{},"hover effects",[1677,51614,7745],{},[1681,51616,51617],{},"any kind of DOM interaction"," are fully possible.",[580,51620,51621],{},[51622,51623],"objects-html-transition-demo",{},[48904,51625,48906,51626,51628],{},[48908,51627,48910],{},[598,51629,51632],{"className":600,"code":51630,"highlights":51631,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { Html, Levioso, OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport { ref } from 'vue'\n\nconst gl = {\n  clearColor: '#82DBC5',\n  clearAlpha: 0,\n  shadows: true,\n  alpha: true,\n  antialias: true,\n}\n\nconst rootRef = ref\u003CHTMLElement>()\n\nconst bgColor = ref('#F6B03B')\n\nconst geometries = [\n  {\n    component: 'TresBoxGeometry',\n    args: [1, 1, 1],\n  },\n  {\n    component: 'TresSphereGeometry',\n    args: [0.7, 32, 32],\n  },\n  {\n    component: 'TresTorusGeometry',\n    args: [0.5, 0.2, 16, 100],\n  },\n  {\n    component: 'TresConeGeometry',\n    args: [0.7, 1.4, 32],\n  },\n]\n\nconst getRandomBackgroundColor = (): string => {\n  const colors = ['#F6B03B', '#82DBC5', '#FF5733', '#33FF57', '#3357FF', '#F333FF', '#33FFF5']\n  const idx = Math.floor(Math.random() * colors.length)\n  return colors[idx] ?? '#F6B03B'\n}\n\nconst updateBackgroundColor = () => {\n  bgColor.value = getRandomBackgroundColor()\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv ref=\"rootRef\" class=\"html-demo-wrapper\">\n    \u003CTresCanvas v-bind=\"gl\" class=\"!pointer-events-none\">\n      \u003CTresPerspectiveCamera :position=\"[0, 1.5, 7.5]\" />\n      \u003COrbitControls :dom-element=\"rootRef\" />\n\n      \u003CLevioso\n        v-for=\"(geometry, index) in geometries\"\n        :key=\"`html-occlude-blending-demo-${index}`\"\n        :speed=\"3\"\n        :float-factor=\"3.5\"\n        :rotation-factor=\"1\"\n        :range=\"[-0.4, 0.4]\"\n      >\n        \u003CTresMesh :position=\"[(index - (geometries.length - 1) / 2) * 2, 1, 0]\">\n          \u003Ccomponent :is=\"geometry.component\" :args=\"geometry.args\" />\n          \u003CTresMeshNormalMaterial />\n        \u003C/TresMesh>\n      \u003C/Levioso>\n\n      \u003CHtml\n        center\n        transform\n        occlude=\"blending\"\n        :position=\"[0, .75, -2]\"\n        :scale=\"1.15\"\n        :z-index-range=\"[28, 0]\"\n      >\n        \u003CTransition name=\"transition-basic\">\n          \u003Ch1\n            v-if=\"showTransition\"\n            :style=\"{ backgroundColor: bgColor }\"\n            class=\"html-demo-transition-heading will-change-transform transition-transform,background-color cursor-pointer duration-500 text-center p-2 text-light shadow-lg\"\n            @click=\"updateBackgroundColor\"\n          >\n            \u003Cstrong>TRANSITION + \u003C/strong>\u003Cbr />\n            \u003Cem>occlude=blending 💛\u003C/em>\n          \u003C/h1>\n        \u003C/Transition>\n      \u003C/Html>\n\n      \u003CTresGridHelper :position-y=\"-1.25\" />\n      \u003CTresAmbientLight :intensity=\"1\" />\n    \u003C/TresCanvas>\n  \u003C/div>\n\u003C/template>\n\n\u003Cstyle scoped>\n.html-demo-wrapper {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n  background-color: #82dbc5;\n}\n\n.html-demo-transition-heading:hover {\n  transform: scale(1.05);\n}\n\n.transition-basic-enter-from,\n.transition-basic-leave-to {\n  opacity: 0;\n  transform: translateY(-20px);\n}\n\n.transition-basic-enter-active,\n.transition-basic-leave-active {\n  transition: all 0.5s ease;\n}\n\n.transition-basic-enter-to,\n.transition-basic-leave-from {\n  opacity: 1;\n  transform: translateY(0);\n}\n\u003C/style>\n",[550,50565,49534,49535,49536,49537,49538,49539,49540,49541,49542,49543,49544,50739,49545,49546,49547,49548,49549,49550,49551],[590,51633,51634,51654,51681,51699,51717,51721,51731,51745,51755,51765,51775,51786,51790,51794,51814,51818,51840,51844,51854,51858,51872,51894,51898,51902,51916,51938,51942,51946,51960,51986,51990,51994,52009,52032,52036,52040,52044,52063,52135,52172,52195,52199,52203,52219,52235,52239,52247,52251,52259,52288,52317,52349,52370,52374,52380,52402,52420,52434,52448,52462,52484,52488,52544,52584,52592,52600,52608,52612,52618,52622,52626,52638,52664,52680,52703,52708,52729,52737,52752,52778,52793,52810,52816,52840,52858,52868,52877,52886,52891,52914,52935,52944,52953,52961,52965,52975,52983,52993,53003,53013,53023,53035,53039,53043,53057,53075,53079,53083,53092,53101,53111,53127,53131,53135,53144,53153,53171,53175,53179,53188,53197,53207,53221,53225],{"__ignoreMap":548},[609,51635,51636,51638,51640,51642,51644,51646,51648,51650,51652],{"class":611,"line":549},[609,51637,615],{"class":614},[609,51639,619],{"class":618},[609,51641,623],{"class":622},[609,51643,626],{"class":622},[609,51645,629],{"class":614},[609,51647,632],{"class":614},[609,51649,636],{"class":635},[609,51651,632],{"class":614},[609,51653,641],{"class":614},[609,51655,51657,51659,51661,51663,51665,51667,51669,51671,51673,51675,51677,51679],{"class":51656,"line":550},[611,645],[609,51658,649],{"class":648},[609,51660,652],{"class":614},[609,51662,48430],{"class":655},[609,51664,659],{"class":614},[609,51666,3343],{"class":655},[609,51668,659],{"class":614},[609,51670,662],{"class":655},[609,51672,665],{"class":614},[609,51674,668],{"class":648},[609,51676,671],{"class":614},[609,51678,674],{"class":635},[609,51680,677],{"class":614},[609,51682,51683,51685,51687,51689,51691,51693,51695,51697],{"class":611,"line":680},[609,51684,649],{"class":648},[609,51686,652],{"class":614},[609,51688,687],{"class":655},[609,51690,665],{"class":614},[609,51692,668],{"class":648},[609,51694,671],{"class":614},[609,51696,696],{"class":635},[609,51698,677],{"class":614},[609,51700,51701,51703,51705,51707,51709,51711,51713,51715],{"class":611,"line":701},[609,51702,649],{"class":648},[609,51704,652],{"class":614},[609,51706,5435],{"class":655},[609,51708,665],{"class":614},[609,51710,668],{"class":648},[609,51712,671],{"class":614},[609,51714,605],{"class":635},[609,51716,677],{"class":614},[609,51718,51719],{"class":611,"line":711},[609,51720,714],{"emptyLinePlaceholder":566},[609,51722,51723,51725,51727,51729],{"class":611,"line":717},[609,51724,2693],{"class":622},[609,51726,49685],{"class":655},[609,51728,629],{"class":614},[609,51730,1180],{"class":614},[609,51732,51733,51735,51737,51739,51741,51743],{"class":611,"line":727},[609,51734,49694],{"class":618},[609,51736,1194],{"class":614},[609,51738,671],{"class":614},[609,51740,5044],{"class":635},[609,51742,5540],{"class":614},[609,51744,14979],{"class":614},[609,51746,51747,51749,51751,51753],{"class":611,"line":750},[609,51748,49709],{"class":618},[609,51750,1194],{"class":614},[609,51752,12722],{"class":795},[609,51754,14979],{"class":614},[609,51756,51757,51759,51761,51763],{"class":611,"line":762},[609,51758,49720],{"class":618},[609,51760,1194],{"class":614},[609,51762,11887],{"class":3874},[609,51764,14979],{"class":614},[609,51766,51767,51769,51771,51773],{"class":611,"line":772},[609,51768,49731],{"class":618},[609,51770,1194],{"class":614},[609,51772,11887],{"class":3874},[609,51774,14979],{"class":614},[609,51776,51777,51780,51782,51784],{"class":611,"line":777},[609,51778,51779],{"class":618},"  antialias",[609,51781,1194],{"class":614},[609,51783,11887],{"class":3874},[609,51785,14979],{"class":614},[609,51787,51788],{"class":611,"line":803},[609,51789,1301],{"class":614},[609,51791,51792],{"class":611,"line":603},[609,51793,714],{"emptyLinePlaceholder":566},[609,51795,51796,51798,51801,51803,51805,51807,51810,51812],{"class":611,"line":826},[609,51797,2693],{"class":622},[609,51799,51800],{"class":655}," rootRef ",[609,51802,629],{"class":614},[609,51804,5435],{"class":2804},[609,51806,615],{"class":614},[609,51808,51809],{"class":1176},"HTMLElement",[609,51811,12669],{"class":614},[609,51813,2850],{"class":655},[609,51815,51816],{"class":611,"line":837},[609,51817,714],{"emptyLinePlaceholder":566},[609,51819,51820,51822,51825,51827,51829,51831,51833,51836,51838],{"class":611,"line":848},[609,51821,2693],{"class":622},[609,51823,51824],{"class":655}," bgColor ",[609,51826,629],{"class":614},[609,51828,5435],{"class":2804},[609,51830,2974],{"class":655},[609,51832,5540],{"class":614},[609,51834,51835],{"class":635},"#F6B03B",[609,51837,5540],{"class":614},[609,51839,5543],{"class":655},[609,51841,51842],{"class":611,"line":858},[609,51843,714],{"emptyLinePlaceholder":566},[609,51845,51846,51848,51850,51852],{"class":611,"line":604},[609,51847,2693],{"class":622},[609,51849,49773],{"class":655},[609,51851,629],{"class":614},[609,51853,14966],{"class":655},[609,51855,51856],{"class":611,"line":878},[609,51857,31869],{"class":614},[609,51859,51860,51862,51864,51866,51868,51870],{"class":611,"line":888},[609,51861,49786],{"class":618},[609,51863,1194],{"class":614},[609,51865,671],{"class":614},[609,51867,843],{"class":635},[609,51869,5540],{"class":614},[609,51871,14979],{"class":614},[609,51873,51874,51876,51878,51880,51882,51884,51886,51888,51890,51892],{"class":611,"line":2956},[609,51875,49801],{"class":618},[609,51877,1194],{"class":614},[609,51879,27146],{"class":655},[609,51881,1897],{"class":795},[609,51883,659],{"class":614},[609,51885,23911],{"class":795},[609,51887,659],{"class":614},[609,51889,23911],{"class":795},[609,51891,1485],{"class":655},[609,51893,14979],{"class":614},[609,51895,51896],{"class":611,"line":2964},[609,51897,18593],{"class":614},[609,51899,51900],{"class":611,"line":2994},[609,51901,31869],{"class":614},[609,51903,51904,51906,51908,51910,51912,51914],{"class":611,"line":3011},[609,51905,49786],{"class":618},[609,51907,1194],{"class":614},[609,51909,671],{"class":614},[609,51911,4739],{"class":635},[609,51913,5540],{"class":614},[609,51915,14979],{"class":614},[609,51917,51918,51920,51922,51924,51926,51928,51930,51932,51934,51936],{"class":611,"line":3026},[609,51919,49801],{"class":618},[609,51921,1194],{"class":614},[609,51923,27146],{"class":655},[609,51925,34722],{"class":795},[609,51927,659],{"class":614},[609,51929,24668],{"class":795},[609,51931,659],{"class":614},[609,51933,24668],{"class":795},[609,51935,1485],{"class":655},[609,51937,14979],{"class":614},[609,51939,51940],{"class":611,"line":3051},[609,51941,18593],{"class":614},[609,51943,51944],{"class":611,"line":2595},[609,51945,31869],{"class":614},[609,51947,51948,51950,51952,51954,51956,51958],{"class":611,"line":3066},[609,51949,49786],{"class":618},[609,51951,1194],{"class":614},[609,51953,671],{"class":614},[609,51955,5131],{"class":635},[609,51957,5540],{"class":614},[609,51959,14979],{"class":614},[609,51961,51962,51964,51966,51968,51970,51972,51974,51976,51978,51980,51982,51984],{"class":611,"line":3096},[609,51963,49801],{"class":618},[609,51965,1194],{"class":614},[609,51967,27146],{"class":655},[609,51969,1517],{"class":795},[609,51971,659],{"class":614},[609,51973,29600],{"class":795},[609,51975,659],{"class":614},[609,51977,29479],{"class":795},[609,51979,659],{"class":614},[609,51981,2728],{"class":795},[609,51983,1485],{"class":655},[609,51985,14979],{"class":614},[609,51987,51988],{"class":611,"line":3105},[609,51989,18593],{"class":614},[609,51991,51992],{"class":611,"line":4211},[609,51993,31869],{"class":614},[609,51995,51996,51998,52000,52002,52005,52007],{"class":611,"line":4216},[609,51997,49786],{"class":618},[609,51999,1194],{"class":614},[609,52001,671],{"class":614},[609,52003,52004],{"class":635},"TresConeGeometry",[609,52006,5540],{"class":614},[609,52008,14979],{"class":614},[609,52010,52011,52013,52015,52017,52019,52021,52024,52026,52028,52030],{"class":611,"line":4239},[609,52012,49801],{"class":618},[609,52014,1194],{"class":614},[609,52016,27146],{"class":655},[609,52018,34722],{"class":795},[609,52020,659],{"class":614},[609,52022,52023],{"class":795}," 1.4",[609,52025,659],{"class":614},[609,52027,24668],{"class":795},[609,52029,1485],{"class":655},[609,52031,14979],{"class":614},[609,52033,52034],{"class":611,"line":4248},[609,52035,18593],{"class":614},[609,52037,52038],{"class":611,"line":4257},[609,52039,15004],{"class":655},[609,52041,52042],{"class":611,"line":4266},[609,52043,714],{"emptyLinePlaceholder":566},[609,52045,52046,52048,52051,52053,52056,52059,52061],{"class":611,"line":4275},[609,52047,2693],{"class":622},[609,52049,52050],{"class":655}," getRandomBackgroundColor ",[609,52052,629],{"class":614},[609,52054,52055],{"class":614}," ():",[609,52057,52058],{"class":1176}," string",[609,52060,5505],{"class":622},[609,52062,1180],{"class":614},[609,52064,52065,52067,52070,52072,52074,52076,52078,52080,52082,52084,52086,52088,52090,52092,52095,52097,52099,52101,52104,52106,52108,52110,52113,52115,52117,52119,52122,52124,52126,52128,52131,52133],{"class":611,"line":15730},[609,52066,8485],{"class":622},[609,52068,52069],{"class":655}," colors",[609,52071,2770],{"class":614},[609,52073,27146],{"class":618},[609,52075,5540],{"class":614},[609,52077,51835],{"class":635},[609,52079,5540],{"class":614},[609,52081,659],{"class":614},[609,52083,671],{"class":614},[609,52085,5044],{"class":635},[609,52087,5540],{"class":614},[609,52089,659],{"class":614},[609,52091,671],{"class":614},[609,52093,52094],{"class":635},"#FF5733",[609,52096,5540],{"class":614},[609,52098,659],{"class":614},[609,52100,671],{"class":614},[609,52102,52103],{"class":635},"#33FF57",[609,52105,5540],{"class":614},[609,52107,659],{"class":614},[609,52109,671],{"class":614},[609,52111,52112],{"class":635},"#3357FF",[609,52114,5540],{"class":614},[609,52116,659],{"class":614},[609,52118,671],{"class":614},[609,52120,52121],{"class":635},"#F333FF",[609,52123,5540],{"class":614},[609,52125,659],{"class":614},[609,52127,671],{"class":614},[609,52129,52130],{"class":635},"#33FFF5",[609,52132,5540],{"class":614},[609,52134,15004],{"class":618},[609,52136,52137,52139,52142,52144,52146,52148,52150,52152,52154,52156,52159,52162,52164,52166,52168,52170],{"class":611,"line":15745},[609,52138,8485],{"class":622},[609,52140,52141],{"class":655}," idx",[609,52143,2770],{"class":614},[609,52145,8515],{"class":655},[609,52147,1122],{"class":614},[609,52149,39923],{"class":2804},[609,52151,2974],{"class":618},[609,52153,22535],{"class":655},[609,52155,1122],{"class":614},[609,52157,52158],{"class":2804},"random",[609,52160,52161],{"class":618},"() ",[609,52163,8546],{"class":614},[609,52165,52069],{"class":655},[609,52167,1122],{"class":614},[609,52169,15562],{"class":655},[609,52171,5543],{"class":618},[609,52173,52174,52176,52178,52180,52183,52186,52189,52191,52193],{"class":611,"line":15760},[609,52175,17477],{"class":648},[609,52177,52069],{"class":655},[609,52179,1470],{"class":618},[609,52181,52182],{"class":655},"idx",[609,52184,52185],{"class":618},"] ",[609,52187,52188],{"class":614},"??",[609,52190,671],{"class":614},[609,52192,51835],{"class":635},[609,52194,677],{"class":614},[609,52196,52197],{"class":611,"line":15765},[609,52198,1301],{"class":614},[609,52200,52201],{"class":611,"line":15772},[609,52202,714],{"emptyLinePlaceholder":566},[609,52204,52205,52207,52210,52212,52215,52217],{"class":611,"line":15777},[609,52206,2693],{"class":622},[609,52208,52209],{"class":655}," updateBackgroundColor ",[609,52211,629],{"class":614},[609,52213,52214],{"class":614}," ()",[609,52216,5505],{"class":622},[609,52218,1180],{"class":614},[609,52220,52221,52224,52226,52228,52230,52233],{"class":611,"line":15783},[609,52222,52223],{"class":655},"  bgColor",[609,52225,1122],{"class":614},[609,52227,5500],{"class":655},[609,52229,2770],{"class":614},[609,52231,52232],{"class":2804}," getRandomBackgroundColor",[609,52234,2850],{"class":618},[609,52236,52237],{"class":611,"line":15804},[609,52238,1301],{"class":614},[609,52240,52241,52243,52245],{"class":611,"line":15810},[609,52242,704],{"class":614},[609,52244,619],{"class":618},[609,52246,641],{"class":614},[609,52248,52249],{"class":611,"line":15817},[609,52250,714],{"emptyLinePlaceholder":566},[609,52252,52253,52255,52257],{"class":611,"line":15822},[609,52254,615],{"class":614},[609,52256,722],{"class":618},[609,52258,641],{"class":614},[609,52260,52261,52263,52265,52267,52269,52271,52274,52276,52278,52280,52282,52284,52286],{"class":611,"line":15843},[609,52262,730],{"class":614},[609,52264,19613],{"class":618},[609,52266,5435],{"class":622},[609,52268,629],{"class":614},[609,52270,632],{"class":614},[609,52272,52273],{"class":635},"rootRef",[609,52275,632],{"class":614},[609,52277,19616],{"class":622},[609,52279,629],{"class":614},[609,52281,632],{"class":614},[609,52283,51338],{"class":635},[609,52285,632],{"class":614},[609,52287,641],{"class":614},[609,52289,52290,52292,52294,52296,52298,52300,52302,52304,52306,52308,52310,52313,52315],{"class":611,"line":15856},[609,52291,753],{"class":614},[609,52293,733],{"class":618},[609,52295,4115],{"class":622},[609,52297,629],{"class":614},[609,52299,632],{"class":614},[609,52301,50117],{"class":655},[609,52303,632],{"class":614},[609,52305,19616],{"class":622},[609,52307,629],{"class":614},[609,52309,632],{"class":614},[609,52311,52312],{"class":635},"!pointer-events-none",[609,52314,632],{"class":614},[609,52316,641],{"class":614},[609,52318,52319,52321,52323,52325,52327,52329,52331,52333,52335,52337,52339,52341,52343,52345,52347],{"class":611,"line":15882},[609,52320,829],{"class":614},[609,52322,756],{"class":618},[609,52324,785],{"class":614},[609,52326,1463],{"class":622},[609,52328,629],{"class":614},[609,52330,632],{"class":614},[609,52332,1470],{"class":614},[609,52334,941],{"class":795},[609,52336,1475],{"class":614},[609,52338,10828],{"class":795},[609,52340,1475],{"class":614},[609,52342,4689],{"class":795},[609,52344,1485],{"class":614},[609,52346,632],{"class":614},[609,52348,759],{"class":614},[609,52350,52351,52353,52355,52357,52360,52362,52364,52366,52368],{"class":611,"line":15887},[609,52352,829],{"class":614},[609,52354,767],{"class":618},[609,52356,785],{"class":614},[609,52358,52359],{"class":622},"dom-element",[609,52361,629],{"class":614},[609,52363,632],{"class":614},[609,52365,52273],{"class":655},[609,52367,632],{"class":614},[609,52369,759],{"class":614},[609,52371,52372],{"class":611,"line":15894},[609,52373,714],{"emptyLinePlaceholder":566},[609,52375,52376,52378],{"class":611,"line":15903},[609,52377,829],{"class":614},[609,52379,50172],{"class":618},[609,52381,52382,52384,52386,52388,52390,52392,52394,52396,52398,52400],{"class":611,"line":15908},[609,52383,2967],{"class":648},[609,52385,629],{"class":614},[609,52387,632],{"class":614},[609,52389,2974],{"class":614},[609,52391,16692],{"class":655},[609,52393,1475],{"class":614},[609,52395,2982],{"class":655},[609,52397,2985],{"class":614},[609,52399,50193],{"class":655},[609,52401,2991],{"class":614},[609,52403,52404,52406,52408,52410,52412,52414,52416,52418],{"class":611,"line":15917},[609,52405,2997],{"class":614},[609,52407,3000],{"class":622},[609,52409,629],{"class":614},[609,52411,16674],{"class":614},[609,52413,50208],{"class":635},[609,52415,16680],{"class":614},[609,52417,2982],{"class":655},[609,52419,16685],{"class":614},[609,52421,52422,52424,52426,52428,52430,52432],{"class":611,"line":15936},[609,52423,2997],{"class":614},[609,52425,3487],{"class":622},[609,52427,629],{"class":614},[609,52429,632],{"class":614},[609,52431,4164],{"class":795},[609,52433,2991],{"class":614},[609,52435,52436,52438,52440,52442,52444,52446],{"class":611,"line":15946},[609,52437,2997],{"class":614},[609,52439,50235],{"class":622},[609,52441,629],{"class":614},[609,52443,632],{"class":614},[609,52445,50242],{"class":795},[609,52447,2991],{"class":614},[609,52449,52450,52452,52454,52456,52458,52460],{"class":611,"line":15983},[609,52451,2997],{"class":614},[609,52453,34731],{"class":622},[609,52455,629],{"class":614},[609,52457,632],{"class":614},[609,52459,1897],{"class":795},[609,52461,2991],{"class":614},[609,52463,52464,52466,52468,52470,52472,52474,52476,52478,52480,52482],{"class":611,"line":15992},[609,52465,2997],{"class":614},[609,52467,3694],{"class":622},[609,52469,629],{"class":614},[609,52471,632],{"class":614},[609,52473,16140],{"class":614},[609,52475,33157],{"class":795},[609,52477,1475],{"class":614},[609,52479,33157],{"class":795},[609,52481,1485],{"class":614},[609,52483,2991],{"class":614},[609,52485,52486],{"class":611,"line":16026},[609,52487,48683],{"class":614},[609,52489,52490,52492,52494,52496,52498,52500,52502,52505,52507,52510,52512,52514,52516,52518,52520,52523,52525,52528,52530,52532,52534,52536,52538,52540,52542],{"class":611,"line":16035},[609,52491,840],{"class":614},[609,52493,832],{"class":618},[609,52495,785],{"class":614},[609,52497,1463],{"class":622},[609,52499,629],{"class":614},[609,52501,632],{"class":614},[609,52503,52504],{"class":614},"[(",[609,52506,2982],{"class":655},[609,52508,52509],{"class":614}," - (",[609,52511,50193],{"class":655},[609,52513,1122],{"class":614},[609,52515,15562],{"class":655},[609,52517,50311],{"class":614},[609,52519,1897],{"class":795},[609,52521,52522],{"class":614},") / ",[609,52524,796],{"class":795},[609,52526,52527],{"class":614},") * ",[609,52529,796],{"class":795},[609,52531,1475],{"class":614},[609,52533,1897],{"class":795},[609,52535,1475],{"class":614},[609,52537,941],{"class":795},[609,52539,1485],{"class":614},[609,52541,632],{"class":614},[609,52543,641],{"class":614},[609,52545,52546,52548,52550,52552,52554,52556,52558,52560,52562,52564,52566,52568,52570,52572,52574,52576,52578,52580,52582],{"class":611,"line":16044},[609,52547,50347],{"class":614},[609,52549,50350],{"class":618},[609,52551,785],{"class":614},[609,52553,50355],{"class":622},[609,52555,629],{"class":614},[609,52557,632],{"class":614},[609,52559,16692],{"class":655},[609,52561,1122],{"class":614},[609,52563,50350],{"class":655},[609,52565,632],{"class":614},[609,52567,785],{"class":614},[609,52569,1993],{"class":622},[609,52571,629],{"class":614},[609,52573,632],{"class":614},[609,52575,16692],{"class":655},[609,52577,1122],{"class":614},[609,52579,1993],{"class":655},[609,52581,632],{"class":614},[609,52583,759],{"class":614},[609,52585,52586,52588,52590],{"class":611,"line":16065},[609,52587,50347],{"class":614},[609,52589,853],{"class":618},[609,52591,759],{"class":614},[609,52593,52594,52596,52598],{"class":611,"line":16123},[609,52595,50398],{"class":614},[609,52597,832],{"class":618},[609,52599,641],{"class":614},[609,52601,52602,52604,52606],{"class":611,"line":16182},[609,52603,861],{"class":614},[609,52605,3482],{"class":618},[609,52607,641],{"class":614},[609,52609,52610],{"class":611,"line":16202},[609,52611,714],{"emptyLinePlaceholder":566},[609,52613,52614,52616],{"class":611,"line":16234},[609,52615,829],{"class":614},[609,52617,48596],{"class":618},[609,52619,52620],{"class":611,"line":16243},[609,52621,48602],{"class":622},[609,52623,52624],{"class":611,"line":16252},[609,52625,48608],{"class":622},[609,52627,52628,52630,52632,52634,52636],{"class":611,"line":49532},[609,52629,50437],{"class":622},[609,52631,629],{"class":614},[609,52633,632],{"class":614},[609,52635,44287],{"class":635},[609,52637,2991],{"class":614},[609,52639,52640,52642,52644,52646,52648,52650,52652,52654,52656,52658,52660,52662],{"class":611,"line":49533},[609,52641,2997],{"class":614},[609,52643,1463],{"class":622},[609,52645,629],{"class":614},[609,52647,632],{"class":614},[609,52649,1470],{"class":614},[609,52651,941],{"class":795},[609,52653,1475],{"class":614},[609,52655,50465],{"class":795},[609,52657,3602],{"class":614},[609,52659,796],{"class":795},[609,52661,1485],{"class":614},[609,52663,2991],{"class":614},[609,52665,52667,52669,52671,52673,52675,52678],{"class":52666,"line":50565},[611,645],[609,52668,2997],{"class":614},[609,52670,788],{"class":622},[609,52672,629],{"class":614},[609,52674,632],{"class":614},[609,52676,52677],{"class":795},"1.15",[609,52679,2991],{"class":614},[609,52681,52683,52685,52687,52689,52691,52693,52695,52697,52699,52701],{"class":52682,"line":49534},[611,645],[609,52684,2997],{"class":614},[609,52686,50481],{"class":622},[609,52688,629],{"class":614},[609,52690,632],{"class":614},[609,52692,1470],{"class":614},[609,52694,50490],{"class":795},[609,52696,1475],{"class":614},[609,52698,941],{"class":795},[609,52700,1485],{"class":614},[609,52702,2991],{"class":614},[609,52704,52706],{"class":52705,"line":49535},[611,645],[609,52707,48683],{"class":614},[609,52709,52711,52713,52715,52718,52720,52722,52725,52727],{"class":52710,"line":49536},[611,645],[609,52712,840],{"class":614},[609,52714,19692],{"class":618},[609,52716,52717],{"class":622}," name",[609,52719,629],{"class":614},[609,52721,632],{"class":614},[609,52723,52724],{"class":635},"transition-basic",[609,52726,632],{"class":614},[609,52728,641],{"class":614},[609,52730,52732,52734],{"class":52731,"line":49537},[611,645],[609,52733,50347],{"class":614},[609,52735,52736],{"class":618},"h1\n",[609,52738,52740,52743,52745,52747,52750],{"class":52739,"line":49538},[611,645],[609,52741,52742],{"class":648},"            v-if",[609,52744,629],{"class":614},[609,52746,632],{"class":614},[609,52748,52749],{"class":655},"showTransition",[609,52751,2991],{"class":614},[609,52753,52755,52758,52760,52762,52764,52766,52769,52771,52774,52776],{"class":52754,"line":49539},[611,645],[609,52756,52757],{"class":614},"            :",[609,52759,1303],{"class":622},[609,52761,629],{"class":614},[609,52763,632],{"class":614},[609,52765,7406],{"class":614},[609,52767,52768],{"class":618},"backgroundColor",[609,52770,7411],{"class":614},[609,52772,52773],{"class":655},"bgColor",[609,52775,665],{"class":614},[609,52777,2991],{"class":614},[609,52779,52781,52784,52786,52788,52791],{"class":52780,"line":49540},[611,645],[609,52782,52783],{"class":622},"            class",[609,52785,629],{"class":614},[609,52787,632],{"class":614},[609,52789,52790],{"class":635},"html-demo-transition-heading will-change-transform transition-transform,background-color cursor-pointer duration-500 text-center p-2 text-light shadow-lg",[609,52792,2991],{"class":614},[609,52794,52796,52799,52801,52803,52805,52808],{"class":52795,"line":49541},[611,645],[609,52797,52798],{"class":614},"            @",[609,52800,32130],{"class":622},[609,52802,629],{"class":614},[609,52804,632],{"class":614},[609,52806,52807],{"class":655},"updateBackgroundColor",[609,52809,2991],{"class":614},[609,52811,52813],{"class":52812,"line":49542},[611,645],[609,52814,52815],{"class":614},"          >\n",[609,52817,52819,52822,52824,52826,52829,52831,52833,52836,52838],{"class":52818,"line":49543},[611,645],[609,52820,52821],{"class":614},"            \u003C",[609,52823,1677],{"class":618},[609,52825,12669],{"class":614},[609,52827,52828],{"class":655},"TRANSITION + ",[609,52830,704],{"class":614},[609,52832,1677],{"class":618},[609,52834,52835],{"class":614},">\u003C",[609,52837,2512],{"class":618},[609,52839,759],{"class":614},[609,52841,52843,52845,52847,52849,52852,52854,52856],{"class":52842,"line":49544},[611,645],[609,52844,52821],{"class":614},[609,52846,1681],{"class":618},[609,52848,12669],{"class":614},[609,52850,52851],{"class":655},"occlude=blending 💛",[609,52853,704],{"class":614},[609,52855,1681],{"class":618},[609,52857,641],{"class":614},[609,52859,52861,52864,52866],{"class":52860,"line":50739},[611,645],[609,52862,52863],{"class":614},"          \u003C/",[609,52865,48690],{"class":618},[609,52867,641],{"class":614},[609,52869,52871,52873,52875],{"class":52870,"line":49545},[611,645],[609,52872,50398],{"class":614},[609,52874,19692],{"class":618},[609,52876,641],{"class":614},[609,52878,52880,52882,52884],{"class":52879,"line":49546},[611,645],[609,52881,861],{"class":614},[609,52883,48719],{"class":618},[609,52885,641],{"class":614},[609,52887,52889],{"class":52888,"line":49547},[611,645],[609,52890,714],{"emptyLinePlaceholder":566},[609,52892,52894,52896,52898,52900,52902,52904,52906,52908,52910,52912],{"class":52893,"line":49548},[611,645],[609,52895,829],{"class":614},[609,52897,3071],{"class":618},[609,52899,785],{"class":614},[609,52901,1972],{"class":622},[609,52903,629],{"class":614},[609,52905,632],{"class":614},[609,52907,4092],{"class":614},[609,52909,49973],{"class":795},[609,52911,632],{"class":614},[609,52913,759],{"class":614},[609,52915,52917,52919,52921,52923,52925,52927,52929,52931,52933],{"class":52916,"line":49549},[611,645],[609,52918,829],{"class":614},[609,52920,3522],{"class":618},[609,52922,785],{"class":614},[609,52924,1890],{"class":622},[609,52926,629],{"class":614},[609,52928,632],{"class":614},[609,52930,1897],{"class":795},[609,52932,632],{"class":614},[609,52934,759],{"class":614},[609,52936,52938,52940,52942],{"class":52937,"line":49550},[611,645],[609,52939,871],{"class":614},[609,52941,733],{"class":618},[609,52943,641],{"class":614},[609,52945,52947,52949,52951],{"class":52946,"line":49551},[611,645],[609,52948,881],{"class":614},[609,52950,19613],{"class":618},[609,52952,641],{"class":614},[609,52954,52955,52957,52959],{"class":611,"line":49552},[609,52956,704],{"class":614},[609,52958,722],{"class":618},[609,52960,641],{"class":614},[609,52962,52963],{"class":611,"line":49553},[609,52964,714],{"emptyLinePlaceholder":566},[609,52966,52967,52969,52971,52973],{"class":611,"line":49554},[609,52968,615],{"class":614},[609,52970,1303],{"class":618},[609,52972,48770],{"class":622},[609,52974,641],{"class":614},[609,52976,52977,52979,52981],{"class":611,"line":49555},[609,52978,1122],{"class":614},[609,52980,51338],{"class":1176},[609,52982,1180],{"class":614},[609,52984,52985,52987,52989,52991],{"class":611,"line":50879},[609,52986,1216],{"class":48785},[609,52988,1194],{"class":614},[609,52990,51350],{"class":795},[609,52992,3333],{"class":614},[609,52994,52995,52997,52999,53001],{"class":611,"line":49556},[609,52996,1226],{"class":48785},[609,52998,1194],{"class":614},[609,53000,51350],{"class":795},[609,53002,3333],{"class":614},[609,53004,53005,53007,53009,53011],{"class":611,"line":49557},[609,53006,51369],{"class":48785},[609,53008,1194],{"class":614},[609,53010,51374],{"class":655},[609,53012,3333],{"class":614},[609,53014,53015,53017,53019,53021],{"class":611,"line":49558},[609,53016,51382],{"class":48785},[609,53018,1194],{"class":614},[609,53020,51387],{"class":655},[609,53022,3333],{"class":614},[609,53024,53025,53027,53029,53031,53033],{"class":611,"line":49559},[609,53026,48786],{"class":48785},[609,53028,1194],{"class":614},[609,53030,48791],{"class":614},[609,53032,51401],{"class":655},[609,53034,3333],{"class":614},[609,53036,53037],{"class":611,"line":49560},[609,53038,1301],{"class":614},[609,53040,53041],{"class":611,"line":49561},[609,53042,714],{"emptyLinePlaceholder":566},[609,53044,53045,53047,53050,53052,53055],{"class":611,"line":49562},[609,53046,1122],{"class":614},[609,53048,53049],{"class":1176},"html-demo-transition-heading",[609,53051,1194],{"class":614},[609,53053,53054],{"class":622},"hover",[609,53056,1180],{"class":614},[609,53058,53059,53062,53064,53067,53069,53072],{"class":611,"line":49563},[609,53060,53061],{"class":48785},"  transform",[609,53063,1194],{"class":614},[609,53065,53066],{"class":2804}," scale",[609,53068,2974],{"class":614},[609,53070,53071],{"class":795},"1.05",[609,53073,53074],{"class":614},");\n",[609,53076,53077],{"class":611,"line":49564},[609,53078,1301],{"class":614},[609,53080,53081],{"class":611,"line":49565},[609,53082,714],{"emptyLinePlaceholder":566},[609,53084,53085,53087,53090],{"class":611,"line":49566},[609,53086,1122],{"class":614},[609,53088,53089],{"class":1176},"transition-basic-enter-from",[609,53091,14979],{"class":614},[609,53093,53094,53096,53099],{"class":611,"line":51059},[609,53095,1122],{"class":614},[609,53097,53098],{"class":1176},"transition-basic-leave-to",[609,53100,1180],{"class":614},[609,53102,53103,53105,53107,53109],{"class":611,"line":51083},[609,53104,50038],{"class":48785},[609,53106,1194],{"class":614},[609,53108,12722],{"class":795},[609,53110,3333],{"class":614},[609,53112,53113,53115,53117,53120,53122,53125],{"class":611,"line":51104},[609,53114,53061],{"class":48785},[609,53116,1194],{"class":614},[609,53118,53119],{"class":2804}," translateY",[609,53121,2974],{"class":614},[609,53123,53124],{"class":795},"-20px",[609,53126,53074],{"class":614},[609,53128,53129],{"class":611,"line":51113},[609,53130,1301],{"class":614},[609,53132,53133],{"class":611,"line":51122},[609,53134,714],{"emptyLinePlaceholder":566},[609,53136,53137,53139,53142],{"class":611,"line":51127},[609,53138,1122],{"class":614},[609,53140,53141],{"class":1176},"transition-basic-enter-active",[609,53143,14979],{"class":614},[609,53145,53146,53148,53151],{"class":611,"line":51134},[609,53147,1122],{"class":614},[609,53149,53150],{"class":1176},"transition-basic-leave-active",[609,53152,1180],{"class":614},[609,53154,53155,53158,53160,53163,53166,53169],{"class":611,"line":51152},[609,53156,53157],{"class":48785},"  transition",[609,53159,1194],{"class":614},[609,53161,53162],{"class":655}," all ",[609,53164,53165],{"class":795},"0.5s",[609,53167,53168],{"class":655}," ease",[609,53170,3333],{"class":614},[609,53172,53173],{"class":611,"line":51171},[609,53174,1301],{"class":614},[609,53176,53177],{"class":611,"line":51188},[609,53178,714],{"emptyLinePlaceholder":566},[609,53180,53181,53183,53186],{"class":611,"line":51215},[609,53182,1122],{"class":614},[609,53184,53185],{"class":1176},"transition-basic-enter-to",[609,53187,14979],{"class":614},[609,53189,53190,53192,53195],{"class":611,"line":51230},[609,53191,1122],{"class":614},[609,53193,53194],{"class":1176},"transition-basic-leave-from",[609,53196,1180],{"class":614},[609,53198,53199,53201,53203,53205],{"class":611,"line":51236},[609,53200,50038],{"class":48785},[609,53202,1194],{"class":614},[609,53204,23911],{"class":795},[609,53206,3333],{"class":614},[609,53208,53209,53211,53213,53215,53217,53219],{"class":611,"line":51241},[609,53210,53061],{"class":48785},[609,53212,1194],{"class":614},[609,53214,53119],{"class":2804},[609,53216,2974],{"class":614},[609,53218,941],{"class":795},[609,53220,53074],{"class":614},[609,53222,53223],{"class":611,"line":51246},[609,53224,1301],{"class":614},[609,53226,53227,53229,53231],{"class":611,"line":51269},[609,53228,704],{"class":614},[609,53230,1303],{"class":618},[609,53232,641],{"class":614},[7477,53234,51574,53236],{"id":53235},"using-iframes",[590,53237,53238],{},"iframes",[586,53240,53241,53242,53244],{},"You can achieve pretty cool results with the ",[590,53243,48719],{}," component by using iframes. For example, you can use an iframe to display a YouTube video in your scene or a webpage with a 3D model.",[2562,53246,53247],{},[53248,53249],"objects-html-iframe-demo",{},[48904,53251,48906,53252,53254],{},[48908,53253,48910],{},[598,53255,53257],{"className":39826,"code":53256,"language":39828,"meta":548,"style":548},"\u003Chtml\n  transform\n  center\n  :cast-shadow=\"true\"\n  :receive-shadow=\"true\"\n  occlude=\"blending\"\n  :z-index-range=\"[28, 0]\"\n  :position-y=\"2.5\"\n  :portal=\"portalRef\"\n  :style=\"{ userSelect: 'none' }\"\n>\n  \u003Ciframe class=\"w-[700px] h-[500px]\" src=\"https://tresjs.org\" frameborder=\"0\" :width=\"700\" :height=\"500\">\u003C/iframe>\n\u003C/html>\n",[590,53258,53259,53265,53270,53275,53288,53301,53314,53327,53340,53354,53368,53372,53442],{"__ignoreMap":548},[609,53260,53261,53263],{"class":611,"line":549},[609,53262,615],{"class":614},[609,53264,49360],{"class":618},[609,53266,53267],{"class":611,"line":550},[609,53268,53269],{"class":622},"  transform\n",[609,53271,53272],{"class":611,"line":680},[609,53273,53274],{"class":622},"  center\n",[609,53276,53277,53280,53282,53284,53286],{"class":611,"line":701},[609,53278,53279],{"class":622},"  :cast-shadow",[609,53281,629],{"class":614},[609,53283,632],{"class":614},[609,53285,937],{"class":635},[609,53287,2991],{"class":614},[609,53289,53290,53293,53295,53297,53299],{"class":611,"line":711},[609,53291,53292],{"class":622},"  :receive-shadow",[609,53294,629],{"class":614},[609,53296,632],{"class":614},[609,53298,937],{"class":635},[609,53300,2991],{"class":614},[609,53302,53303,53306,53308,53310,53312],{"class":611,"line":717},[609,53304,53305],{"class":622},"  occlude",[609,53307,629],{"class":614},[609,53309,632],{"class":614},[609,53311,44287],{"class":635},[609,53313,2991],{"class":614},[609,53315,53316,53319,53321,53323,53325],{"class":611,"line":727},[609,53317,53318],{"class":622},"  :z-index-range",[609,53320,629],{"class":614},[609,53322,632],{"class":614},[609,53324,48997],{"class":635},[609,53326,2991],{"class":614},[609,53328,53329,53332,53334,53336,53338],{"class":611,"line":750},[609,53330,53331],{"class":622},"  :position-y",[609,53333,629],{"class":614},[609,53335,632],{"class":614},[609,53337,51000],{"class":635},[609,53339,2991],{"class":614},[609,53341,53342,53345,53347,53349,53352],{"class":611,"line":762},[609,53343,53344],{"class":622},"  :portal",[609,53346,629],{"class":614},[609,53348,632],{"class":614},[609,53350,53351],{"class":635},"portalRef",[609,53353,2991],{"class":614},[609,53355,53356,53359,53361,53363,53366],{"class":611,"line":772},[609,53357,53358],{"class":622},"  :style",[609,53360,629],{"class":614},[609,53362,632],{"class":614},[609,53364,53365],{"class":635},"{ userSelect: 'none' }",[609,53367,2991],{"class":614},[609,53369,53370],{"class":611,"line":777},[609,53371,641],{"class":614},[609,53373,53374,53376,53379,53381,53383,53385,53388,53390,53393,53395,53397,53400,53402,53405,53407,53409,53411,53413,53416,53418,53420,53423,53425,53428,53430,53432,53434,53436,53438,53440],{"class":611,"line":803},[609,53375,730],{"class":614},[609,53377,53378],{"class":618},"iframe",[609,53380,19616],{"class":622},[609,53382,629],{"class":614},[609,53384,632],{"class":614},[609,53386,53387],{"class":635},"w-[700px] h-[500px]",[609,53389,632],{"class":614},[609,53391,53392],{"class":622}," src",[609,53394,629],{"class":614},[609,53396,632],{"class":614},[609,53398,53399],{"class":635},"https://tresjs.org",[609,53401,632],{"class":614},[609,53403,53404],{"class":622}," frameborder",[609,53406,629],{"class":614},[609,53408,632],{"class":614},[609,53410,941],{"class":635},[609,53412,632],{"class":614},[609,53414,53415],{"class":622}," :width",[609,53417,629],{"class":614},[609,53419,632],{"class":614},[609,53421,53422],{"class":635},"700",[609,53424,632],{"class":614},[609,53426,53427],{"class":622}," :height",[609,53429,629],{"class":614},[609,53431,632],{"class":614},[609,53433,37237],{"class":635},[609,53435,632],{"class":614},[609,53437,19665],{"class":614},[609,53439,53378],{"class":618},[609,53441,641],{"class":614},[609,53443,53444,53446,53448],{"class":611,"line":603},[609,53445,704],{"class":614},[609,53447,39828],{"class":618},[609,53449,641],{"class":614},[53451,53452,53453],"info",{},[586,53454,53455,53456,53459,53460,53463,53464],{},"The demos use ",[590,53457,53458],{},":z-index-range=\"[28, 0]\""," simply to ensure the HTML elements stay below the documentation header (which uses ",[590,53461,53462],{},"z-index: 30",").\n",[1677,53465,53466],{},"This value is for the docs only — you can ignore it or adjust it as needed.",[476,53468,898],{"id":897},[903,53470,53471,53481],{},[906,53472,53473],{},[909,53474,53475,53477,53479],{},[912,53476,914],{},[912,53478,917],{},[912,53480,920],{},[922,53482,53483,53501,53516,53534,53558,53578,53595,53613,53625,53644,53667,53707,53744,53764,53797],{},[909,53484,53485,53490,53496],{},[927,53486,53487],{},[1677,53488,53489],{},"as",[927,53491,53492,53493,1122],{},"Wrapping ",[1681,53494,53495],{},"HTML element",[927,53497,53498],{},[590,53499,53500],{},"'div'",[909,53502,53503,53508,53514],{},[927,53504,53505],{},[1677,53506,53507],{},"wrapperClass",[927,53509,2257,53510,53513],{},[590,53511,53512],{},"className"," of the wrapping element. element.",[927,53515],{},[909,53517,53518,53523,53530],{},[927,53519,53520],{},[1677,53521,53522],{},"prepend",[927,53524,53525,53526,53529],{},"Projects content ",[1681,53527,53528],{},"behind"," the canvas.",[927,53531,53532],{},[590,53533,947],{},[909,53535,53536,53540,53554],{},[927,53537,53538],{},[1677,53539,40361],{},[927,53541,1326,53542,3202,53545,53547,53548],{},[590,53543,53544],{},"transform: translate(-50%, -50%)",[2512,53546],{},"➡️ ",[1681,53549,53550,53551,53553],{},"Ignored in ",[1677,53552,5341],{}," mode.",[927,53555,53556],{},[590,53557,947],{},[909,53559,53560,53565,53574],{},[927,53561,53562],{},[1677,53563,53564],{},"fullscreen",[927,53566,53567,53568,53547,53570],{},"Aligns to the upper-left corner and fills the screen. ",[2512,53569],{},[1681,53571,53550,53572,53553],{},[1677,53573,5341],{},[927,53575,53576],{},[590,53577,947],{},[909,53579,53580,53585,53593],{},[927,53581,53582],{},[1677,53583,53584],{},"distanceFactor",[927,53586,53587,53588,53590,53591,1122],{},"Children are scaled by this factor and also by distance to a ",[590,53589,6218],{},", or zoom when using an ",[590,53592,48382],{},[927,53594],{},[909,53596,53597,53602,53608],{},[927,53598,53599],{},[1677,53600,53601],{},"zIndexRange",[927,53603,53604,53605,1122],{},"Defines the ",[1681,53606,53607],{},"Z-order range",[927,53609,53610],{},[590,53611,53612],{},"[16777271, 0]",[909,53614,53615,53620,53623],{},[927,53616,53617],{},[1677,53618,53619],{},"portal",[927,53621,53622],{},"Reference to a target container (for rendering into a different DOM node). container.",[927,53624],{},[909,53626,53627,53631,53640],{},[927,53628,53629],{},[1677,53630,5341],{},[927,53632,934,53633,53635,53636,53639],{},[590,53634,937],{},", applies ",[590,53637,53638],{},"matrix3d"," transformations — the element appears as if it is inside the 3D scene.",[927,53641,53642],{},[590,53643,947],{},[909,53645,53646,53651,53663],{},[927,53647,53648],{},[1677,53649,53650],{},"sprite",[927,53652,53653,53654,3202,53656,53547,53658],{},"Renders as a ",[1681,53655,53650],{},[2512,53657],{},[1681,53659,53660,53661,53553],{},"Only in ",[1677,53662,5341],{},[927,53664,53665],{},[590,53666,947],{},[909,53668,53669,53674,53698],{},[927,53670,53671],{},[1677,53672,53673],{},"calculatePosition",[927,53675,53676,53677,53679,45678,53682,45678,53685,53687,53688,53691,53692,53547,53694],{},"Callback function to override the default positioning logic. ",[2512,53678],{},[1677,53680,53681],{},"Type:",[590,53683,53684],{},"(object: Object3D, camera: Camera, size: { width: number; height: number }) => [number, number, number]",[2512,53686],{},"Receives the related 3D object, the active camera, and the current viewport size, and must return ",[590,53689,53690],{},"[x, y, z]"," pixel coordinates for placing the HTML element. ",[2512,53693],{},[1681,53695,53550,53696,53553],{},[1677,53697,5341],{},[927,53699,53700],{},[1116,53701,53704,53705],{"href":53702,"rel":53703},"https://github.com/Tresjs/cientos/blob/main/src/core/misc/html/utils.ts#L9-L19",[1120],"Default ",[590,53706,53673],{},[909,53708,53709,53713,53742],{},[927,53710,53711],{},[1677,53712,48867],{},[927,53714,53715,53716,53718,53719,53721,53722,53725,53726,50311,53728,53731,53732,53718,53734,53737,53738,53741],{},"Enables occlusion. Possible values: ",[2512,53717],{},"- ",[590,53720,937],{}," → Occlusion against ",[1681,53723,53724],{},"all"," scene objects ",[2512,53727],{},[590,53729,53730],{},"Ref\u003CTresObject3D>[]"," → Occlusion is enabled only against the specified objects. ",[2512,53733],{},[590,53735,53736],{},"'blending'"," → Uses a ",[1681,53739,53740],{},"blending-based"," occlusion method (CSS-like depth blending).",[927,53743],{},[909,53745,53746,53750,53756],{},[927,53747,53748],{},[1677,53749,16692],{},[927,53751,53752,53753,53755],{},"Custom ",[590,53754,16692],{}," to be used.",[927,53757,53758],{},[1116,53759,53762],{"href":53760,"rel":53761},"https://threejs.org/docs/?q=geometry#api/en/geometries/PlaneGeometry",[1120],[590,53763,27432],{},[909,53765,53766,53770,53795],{},[927,53767,53768],{},[1677,53769,16742],{},[927,53771,53772,45678,53778,45678,53780,53786,53787,45678,53789],{},[1677,53773,53774,53775,53777],{},"Custom shader ",[1681,53776,16742],{}," used for the occlusion mesh.",[2512,53779],{},[1677,53781,53782,53783,53785],{},"Only applies when ",[590,53784,51425],{}," is enabled"," (an occlusion mesh is created). ",[2512,53788],{},[1681,53790,53791,53792,53794],{},"Ignored in raycast occlusion modes (",[590,53793,937],{},", object refs).",[927,53796],{},[909,53798,53799,53804,53825],{},[927,53800,53801],{},[1677,53802,53803],{},"transparentMaterial",[927,53805,53806,45678,53812,45678,53814,45678,53819,45678,53821],{},[1677,53807,53808,53809,53811],{},"Enables ",[1681,53810,4877],{}," rendering for the occlusion material.",[2512,53813],{},[1677,53815,53782,53816,53818],{},[590,53817,51425],{}," creates an occlusion mesh.",[2512,53820],{},[1681,53822,53791,53823,53794],{},[590,53824,937],{},[927,53826,53827],{},[590,53828,947],{},[476,53830,7746],{"id":7745},[903,53832,53833,53841],{},[906,53834,53835],{},[909,53836,53837,53839],{},[912,53838,7811],{},[912,53840,917],{},[922,53842,53843],{},[909,53844,53845,53848],{},[927,53846,53847],{},"onOcclude",[927,53849,53850],{},"Called when the occlusion state changes.",[476,53852,53854],{"id":53853},"exposed-properties","Exposed properties",[903,53856,53857,53868],{},[906,53858,53859],{},[909,53860,53861,53864,53866],{},[912,53862,53863],{},"Property",[912,53865,11906],{},[912,53867,917],{},[922,53869,53870,53892,53913],{},[909,53871,53872,53876,53881],{},[927,53873,53874],{},[1677,53875,21491],{},[927,53877,53878],{},[590,53879,53880],{},"Ref\u003CTresObject3D | null>",[927,53882,53883,53884,53889,53890,1122],{},"Reference to the root ",[1677,53885,53886],{},[590,53887,53888],{},"\u003CTresGroup>"," used by ",[590,53891,48386],{},[909,53893,53894,53899,53904],{},[927,53895,53896],{},[1677,53897,53898],{},"isVisible",[927,53900,53901],{},[590,53902,53903],{},"Ref\u003Cboolean>",[927,53905,53906,53907,11099,53910,1122],{},"Reactive value that indicates whether the HTML content is ",[1677,53908,53909],{},"currently visible",[1677,53911,53912],{},"occluded",[909,53914,53915,53920,53924],{},[927,53916,53917],{},[1677,53918,53919],{},"occlusionMesh",[927,53921,53922],{},[590,53923,53880],{},[927,53925,53926,53927,53930,53931,51532,53933,53935],{},"Reference to the ",[1677,53928,53929],{},"occlusion mesh"," created when ",[590,53932,51425],{},[1677,53934,8197],{},". Used internally for geometry-based occlusion.",[476,53937,53939],{"id":53938},"caveats","Caveats",[3140,53941,53942,53975,53992,54049,54067],{},[3143,53943,53944,53945,53950,53951,53953,53954,11099,53957,53960,53961,53963,53964,53967,53968,53971,53972,53974],{},"✨ When using ",[1677,53946,53947],{},[590,53948,53949],{},"\u003CHtml occlude>",", if the ",[590,53952,48386],{}," component is ",[1677,53955,53956],{},"overlapping",[1677,53958,53959],{},"inside a 3D object",", it will be considered ",[1677,53962,53912],{}," and therefore ",[1677,53965,53966],{},"hidden",". To avoid this, ",[1677,53969,53970],{},"adjust the position"," of the ",[590,53973,48386],{}," component in your scene.",[3143,53976,53977,53978,53983,53984,53987,53988,53991],{},"🎨 When using ",[1677,53979,53980],{},[590,53981,53982],{},"\u003CHtml occlude=\"blending\">",", the HTML content is no longer ",[1677,53985,53986],{},"selectable"," because it is rendered ",[1677,53989,53990],{},"behind the canvas",". This is required to achieve the blending effect.",[3143,53993,53994,53995,53997,53998,54000,54001],{},"⚙️ When using a ",[1677,53996,51521],{}," with occlusion in ",[590,53999,44287],{}," mode, there are a few important requirements to ensure the HTML content renders correctly ⬇️",[48904,54002,48906,54003,54006],{},[48908,54004,54005],{},"See more information",[7609,54007,54008,54020,54028,54035],{},[3143,54009,54010,54011,2717,54013,54016,54017,1122],{},"If you provide your own material, it must be ",[1677,54012,4877],{},[590,54014,54015],{},"transparent: true",") with an ",[1677,54018,54019],{},"opacity \u003C 1",[3143,54021,54022,54023,54027],{},"If you are not providing a custom material, enable ",[1677,54024,54025],{},[590,54026,53803],{}," so the internal shader becomes transparent.",[3143,54029,54030,54031,54034],{},"The occlusion mesh requires a ",[1677,54032,54033],{},"fully transparent canvas background","; otherwise, thin borders or halo artifacts may appear.",[3143,54036,54037,54038,10900,54041,1475,54043,54046,54047,1122],{},"To compensate for the transparent canvas, you may ",[1677,54039,54040],{},"reapply your previous clear-color as a CSS background",[590,54042,39828],{},[590,54044,54045],{},"body",", or a wrapper ",[590,54048,19613],{},[3143,54050,54051,54052,54056,54057,54059,54060,54062,54063,54066],{},"🔶 When using ",[1677,54053,54054],{},[590,54055,53803],{},", overlapping ",[590,54058,48386],{}," elements (especially multiple ",[590,54061,51425],{}," instances) may cause ",[1677,54064,54065],{},"z-index or depth-order artifacts",".\nThis happens because the occlusion mesh uses transparency in the WebGL layer while the DOM element uses CSS stacking order.",[3143,54068,54069,54070,54072,54073,54076,54077],{},"🔵 To avoid thin border artifacts when using ",[590,54071,51425],{},", make sure your ",[590,54074,54075],{},"\u003CTresCanvas>"," is fully transparent:",[598,54078,54080],{"className":600,"code":54079,"language":605,"meta":548,"style":548},"\u003CTresCanvas :alpha=\"true\" :clearAlpha=\"0\" />\n",[590,54081,54082],{"__ignoreMap":548},[609,54083,54084,54086,54088,54090,54092,54094,54096,54098,54100,54102,54105,54107,54109,54111,54113],{"class":611,"line":549},[609,54085,615],{"class":614},[609,54087,733],{"class":618},[609,54089,785],{"class":614},[609,54091,40522],{"class":622},[609,54093,629],{"class":614},[609,54095,632],{"class":614},[609,54097,937],{"class":3874},[609,54099,632],{"class":614},[609,54101,785],{"class":614},[609,54103,54104],{"class":622},"clearAlpha",[609,54106,629],{"class":614},[609,54108,632],{"class":614},[609,54110,941],{"class":795},[609,54112,632],{"class":614},[609,54114,759],{"class":614},[903,54116,54117,54127],{},[906,54118,54119],{},[909,54120,54121,54123,54125],{},[912,54122,914],{},[912,54124,917],{},[912,54126,920],{},[922,54128,54129,54142,54153,54166,54182,54197,54208,54221,54232,54245,54258,54271,54292,54307],{},[909,54130,54131,54135,54138],{},[927,54132,54133],{},[1677,54134,53489],{},[927,54136,54137],{},"Wrapping html element.",[927,54139,54140],{},[590,54141,53500],{},[909,54143,54144,54148,54151],{},[927,54145,54146],{},[1677,54147,53507],{},[927,54149,54150],{},"The className of the wrapping element.",[927,54152],{},[909,54154,54155,54159,54162],{},[927,54156,54157],{},[1677,54158,53522],{},[927,54160,54161],{},"Project content behind the canvas.",[927,54163,54164],{},[590,54165,947],{},[909,54167,54168,54172,54178],{},[927,54169,54170],{},[1677,54171,40361],{},[927,54173,54174,54175],{},"Adds a -50%/-50% CSS transform. ",[609,54176,54177],{},"Ignored in transform mode",[927,54179,54180],{},[590,54181,947],{},[909,54183,54184,54188,54193],{},[927,54185,54186],{},[1677,54187,53564],{},[927,54189,54190,54191],{},"Aligns to the upper-left corner, fills the screen. ",[609,54192,54177],{},[927,54194,54195],{},[590,54196,947],{},[909,54198,54199,54203,54206],{},[927,54200,54201],{},[1677,54202,53584],{},[927,54204,54205],{},"Children will be scaled by this factor, and also by distance to a PerspectiveCamera / zoom by an OrthographicCamera.",[927,54207],{},[909,54209,54210,54214,54217],{},[927,54211,54212],{},[1677,54213,53601],{},[927,54215,54216],{},"Z-order range.",[927,54218,54219],{},[590,54220,53612],{},[909,54222,54223,54227,54230],{},[927,54224,54225],{},[1677,54226,53619],{},[927,54228,54229],{},"Reference to target container.",[927,54231],{},[909,54233,54234,54238,54241],{},[927,54235,54236],{},[1677,54237,5341],{},[927,54239,54240],{},"If true, applies matrix3d transformations.",[927,54242,54243],{},[590,54244,947],{},[909,54246,54247,54251,54254],{},[927,54248,54249],{},[1677,54250,53650],{},[927,54252,54253],{},"Renders as sprite, but only in transform mode.",[927,54255,54256],{},[590,54257,947],{},[909,54259,54260,54264,54269],{},[927,54261,54262],{},[1677,54263,53673],{},[927,54265,54266,54267],{},"Override default positioning function. ",[609,54268,54177],{},[927,54270],{},[909,54272,54273,54277,54290],{},[927,54274,54275],{},[1677,54276,48867],{},[927,54278,54279,54280,1475,54282,1475,54284,1709,54287,54289],{},"Can be ",[590,54281,937],{},[590,54283,53730],{},[590,54285,54286],{},"'raycast'",[590,54288,53736],{},". True occludes the entire scene.",[927,54291],{},[909,54293,54294,54298,54303],{},[927,54295,54296],{},[1677,54297,16692],{},[927,54299,53752,54300,54302],{},[590,54301,16692],{}," to be use",[927,54304,54305],{},[590,54306,27432],{},[909,54308,54309,54313,54317],{},[927,54310,54311],{},[1677,54312,16742],{},[927,54314,53774,54315,54302],{},[590,54316,16742],{},[927,54318],{},[476,54320,7746],{"id":54321},"events-1",[903,54323,54324,54332],{},[906,54325,54326],{},[909,54327,54328,54330],{},[912,54329,7811],{},[912,54331,917],{},[922,54333,54334],{},[909,54335,54336,54338],{},[927,54337,53847],{},[927,54339,53850],{},[1303,54341,54342],{},"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 pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":548,"searchDepth":549,"depth":550,"links":54344},[54345,54346,54351,54352,54357,54358,54359,54360,54361],{"id":596,"depth":550,"text":15},{"id":48860,"depth":550,"text":48861,"children":54347},[54348,54349,54350],{"id":49053,"depth":680,"text":49054},{"id":49216,"depth":680,"text":49217},{"id":49477,"depth":680,"text":49478},{"id":40164,"depth":550,"text":40165},{"id":51573,"depth":550,"text":54353,"children":54354},"Using \u003CTransition>",[54355],{"id":53235,"depth":680,"text":54356},"Using iframes",{"id":897,"depth":550,"text":898},{"id":7745,"depth":550,"text":7746},{"id":53853,"depth":550,"text":53854},{"id":53938,"depth":550,"text":53939},{"id":54321,"depth":550,"text":7746},"Allows you put DOM elements in your Tres.js scene.",{},{"title":417,"description":54362},"ywp4dBumrlkuSeTPICaWKzd__5F5_TaWhwF0rVH0VWc",{"id":54367,"title":421,"body":54368,"description":54984,"extension":563,"links":564,"meta":54985,"navigation":566,"path":422,"seo":54986,"stem":423,"__hash__":54987},"docs/2.api/9.objects/image.md",{"type":473,"value":54369,"toc":54979},[54370,54375,54381,54383,54577,54579,54586,54794,54796,54819,54977],[580,54371,54372],{},[54373,54374],"objects-image",{},[586,54376,54377,54380],{},[590,54378,54379],{},"\u003CImage />"," is a shader-based component that optionally loads then displays an image texture on a default plane or on your custom geometry.",[476,54382,15],{"id":596},[598,54384,54387],{"className":600,"code":54385,"highlights":54386,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Image } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 0, 5]\" />\n\n    \u003CImage\n      url=\"https://upload.wikimedia.org/wikipedia/commons/f/f0/Cyanistes_caeruleus_Oulu_20150516.JPG\"\n      :scale=\"[2, 2]\"\n    />\n  \u003C/TresCanvas>\n\u003C/template>\n",[680,772,777,803],[590,54388,54389,54409,54427,54447,54455,54459,54467,54475,54507,54511,54519,54534,54557,54561,54569],{"__ignoreMap":548},[609,54390,54391,54393,54395,54397,54399,54401,54403,54405,54407],{"class":611,"line":549},[609,54392,615],{"class":614},[609,54394,619],{"class":618},[609,54396,623],{"class":622},[609,54398,626],{"class":622},[609,54400,629],{"class":614},[609,54402,632],{"class":614},[609,54404,636],{"class":635},[609,54406,632],{"class":614},[609,54408,641],{"class":614},[609,54410,54411,54413,54415,54417,54419,54421,54423,54425],{"class":611,"line":550},[609,54412,649],{"class":648},[609,54414,652],{"class":614},[609,54416,687],{"class":655},[609,54418,665],{"class":614},[609,54420,668],{"class":648},[609,54422,671],{"class":614},[609,54424,696],{"class":635},[609,54426,677],{"class":614},[609,54428,54430,54432,54434,54437,54439,54441,54443,54445],{"class":54429,"line":680},[611,645],[609,54431,649],{"class":648},[609,54433,652],{"class":614},[609,54435,54436],{"class":655}," Image",[609,54438,665],{"class":614},[609,54440,668],{"class":648},[609,54442,671],{"class":614},[609,54444,674],{"class":635},[609,54446,677],{"class":614},[609,54448,54449,54451,54453],{"class":611,"line":701},[609,54450,704],{"class":614},[609,54452,619],{"class":618},[609,54454,641],{"class":614},[609,54456,54457],{"class":611,"line":711},[609,54458,714],{"emptyLinePlaceholder":566},[609,54460,54461,54463,54465],{"class":611,"line":717},[609,54462,615],{"class":614},[609,54464,722],{"class":618},[609,54466,641],{"class":614},[609,54468,54469,54471,54473],{"class":611,"line":727},[609,54470,730],{"class":614},[609,54472,733],{"class":618},[609,54474,641],{"class":614},[609,54476,54477,54479,54481,54483,54485,54487,54489,54491,54493,54495,54497,54499,54501,54503,54505],{"class":611,"line":750},[609,54478,753],{"class":614},[609,54480,756],{"class":618},[609,54482,785],{"class":614},[609,54484,1463],{"class":622},[609,54486,629],{"class":614},[609,54488,632],{"class":614},[609,54490,1470],{"class":614},[609,54492,941],{"class":795},[609,54494,1475],{"class":614},[609,54496,941],{"class":795},[609,54498,1475],{"class":614},[609,54500,2400],{"class":795},[609,54502,1485],{"class":614},[609,54504,632],{"class":614},[609,54506,759],{"class":614},[609,54508,54509],{"class":611,"line":762},[609,54510,714],{"emptyLinePlaceholder":566},[609,54512,54514,54516],{"class":54513,"line":772},[611,645],[609,54515,753],{"class":614},[609,54517,54518],{"class":618},"Image\n",[609,54520,54522,54525,54527,54529,54532],{"class":54521,"line":777},[611,645],[609,54523,54524],{"class":622},"      url",[609,54526,629],{"class":614},[609,54528,632],{"class":614},[609,54530,54531],{"class":635},"https://upload.wikimedia.org/wikipedia/commons/f/f0/Cyanistes_caeruleus_Oulu_20150516.JPG",[609,54533,2991],{"class":614},[609,54535,54537,54539,54541,54543,54545,54547,54549,54551,54553,54555],{"class":54536,"line":803},[611,645],[609,54538,5697],{"class":614},[609,54540,788],{"class":622},[609,54542,629],{"class":614},[609,54544,632],{"class":614},[609,54546,1470],{"class":614},[609,54548,796],{"class":795},[609,54550,1475],{"class":614},[609,54552,796],{"class":795},[609,54554,1485],{"class":614},[609,54556,2991],{"class":614},[609,54558,54559],{"class":611,"line":603},[609,54560,11765],{"class":614},[609,54562,54563,54565,54567],{"class":611,"line":826},[609,54564,881],{"class":614},[609,54566,733],{"class":618},[609,54568,641],{"class":614},[609,54570,54571,54573,54575],{"class":611,"line":837},[609,54572,704],{"class":614},[609,54574,722],{"class":618},[609,54576,641],{"class":614},[476,54578,898],{"id":897},[3729,54580,54581],{},[586,54582,54583,54585],{},[590,54584,54379],{}," is a THREE.Mesh and most Mesh attributes can be used as props on the component.",[903,54587,54588,54598],{},[906,54589,54590],{},[909,54591,54592,54594,54596],{},[912,54593,914],{"align":973},[912,54595,917],{"align":973},[912,54597,920],{},[922,54599,54600,54613,54629,54642,54656,54672,54686,54704,54722,54737,54753,54771,54782],{},[909,54601,54602,54606,54609],{},[927,54603,54604],{"align":973},[590,54605,24299],{},[927,54607,54608],{"align":973},"Number of divisions in the default geometry.",[927,54610,54611],{},[590,54612,1897],{},[909,54614,54615,54619,54625],{},[927,54616,54617],{"align":973},[590,54618,788],{},[927,54620,54621,54622],{"align":973},"Scale of the geometry. ",[590,54623,54624],{},"number | [number, number]",[927,54626,54627],{},[590,54628,1897],{},[909,54630,54631,54635,54638],{},[927,54632,54633],{"align":973},[590,54634,2504],{},[927,54636,54637],{"align":973},"Color multiplied into the image texture.",[927,54639,54640],{},[590,54641,24484],{},[909,54643,54644,54649,54652],{},[927,54645,54646],{"align":973},[590,54647,54648],{},"zoom",[927,54650,54651],{"align":973},"Shrinks or enlarges the image texture.",[927,54653,54654],{},[590,54655,1897],{},[909,54657,54658,54662,54668],{},[927,54659,54660],{"align":973},[590,54661,36929],{},[927,54663,54664,54665,54667],{"align":973},"Border radius applied to the image texture. (Intended for rectangular geometries. Use with ",[590,54666,4877],{},".)",[927,54669,54670],{},[590,54671,941],{},[909,54673,54674,54679,54682],{},[927,54675,54676],{"align":973},[590,54677,54678],{},"grayscale",[927,54680,54681],{"align":973},"Power of grayscale effect. 0 is off. 1 is full grayscale.",[927,54683,54684],{},[590,54685,941],{},[909,54687,54688,54692,54700],{},[927,54689,54690],{"align":973},[590,54691,33467],{},[927,54693,54694,54695],{"align":973},"Whether this material is tone mapped according to the renderers toneMapping settings. ",[1116,54696,54699],{"href":54697,"rel":54698},"https://threejs.org/docs/?q=material#api/en/materials/Material.toneMapped",[1120],"See THREE.material.tonemapped",[927,54701,54702],{},[590,54703,941],{},[909,54705,54706,54710,54718],{},[927,54707,54708],{"align":973},[590,54709,4877],{},[927,54711,54712,54713],{"align":973},"Whether the image material should be transparent. ",[1116,54714,54717],{"href":54715,"rel":54716},"https://threejs.org/docs/?q=material#api/en/materials/Material.transparent",[1120],"See THREE.material.transparent",[927,54719,54720],{},[590,54721,947],{},[909,54723,54724,54728,54733],{},[927,54725,54726],{"align":973},[590,54727,4877],{},[927,54729,54712,54730],{"align":973},[1116,54731,54717],{"href":54715,"rel":54732},[1120],[927,54734,54735],{},[590,54736,947],{},[909,54738,54739,54743,54749],{},[927,54740,54741],{"align":973},[590,54742,4865],{},[927,54744,54745,54746],{"align":973},"Opacity of the image material. ",[1116,54747,54717],{"href":54715,"rel":54748},[1120],[927,54750,54751],{},[590,54752,1897],{},[909,54754,54755,54759,54767],{},[927,54756,54757],{"align":973},[590,54758,20919],{},[927,54760,54761,54762],{"align":973},"THREE.Side of the image material. ",[1116,54763,54766],{"href":54764,"rel":54765},"https://threejs.org/docs/?q=material#api/en/materials/Material.side",[1120],"See THREE.material.side",[927,54768,54769],{},[590,54770,22146],{},[909,54772,54773,54777,54780],{},[927,54774,54775],{"align":973},[590,54776,14381],{},[927,54778,54779],{"align":973},"Image texture to display on the geometry.",[927,54781],{},[909,54783,54784,54789,54792],{},[927,54785,54786],{"align":973},[590,54787,54788],{},"url",[927,54790,54791],{"align":973},"Image URL to load and display on the geometry.",[927,54793],{},[476,54795,53939],{"id":53938},[586,54797,54798,54799,54801,54802,54805,54806,54808,54809,54812,54813,11099,54816,46246],{},"By default, images loaded via the ",[590,54800,54788],{}," prop use the renderer’s output color space. For advanced control, pass a ",[590,54803,54804],{},"THREE.Texture"," via the ",[590,54807,14381],{}," prop and set its ",[590,54810,54811],{},"colorSpace"," (e.g., ",[590,54814,54815],{},"THREE.SRGBColorSpace",[590,54817,54818],{},"THREE.LinearSRGBColorSpace",[598,54820,54822],{"className":600,"code":54821,"language":605,"meta":548,"style":548},"\u003Cscript setup>\nimport { useTexture } from '@tresjs/cientos'\nimport { SRGBColorSpace } from 'three'\nconst { state } = useTexture(URL)\nwatch(state, (texture) => {\n  texture.colorSpace = SRGBColorSpace // assign a custom color space\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CImage :texture=\"texture\" />\n\u003C/template>\n",[590,54823,54824,54834,54852,54870,54888,54907,54923,54929,54937,54941,54949,54969],{"__ignoreMap":548},[609,54825,54826,54828,54830,54832],{"class":611,"line":549},[609,54827,615],{"class":614},[609,54829,619],{"class":618},[609,54831,623],{"class":622},[609,54833,641],{"class":614},[609,54835,54836,54838,54840,54842,54844,54846,54848,54850],{"class":611,"line":550},[609,54837,649],{"class":648},[609,54839,652],{"class":614},[609,54841,14280],{"class":655},[609,54843,665],{"class":614},[609,54845,668],{"class":648},[609,54847,671],{"class":614},[609,54849,674],{"class":635},[609,54851,677],{"class":614},[609,54853,54854,54856,54858,54860,54862,54864,54866,54868],{"class":611,"line":680},[609,54855,649],{"class":648},[609,54857,652],{"class":614},[609,54859,38833],{"class":655},[609,54861,665],{"class":614},[609,54863,668],{"class":648},[609,54865,671],{"class":614},[609,54867,2682],{"class":635},[609,54869,677],{"class":614},[609,54871,54872,54874,54876,54879,54881,54883,54885],{"class":611,"line":701},[609,54873,2693],{"class":622},[609,54875,652],{"class":614},[609,54877,54878],{"class":655}," state ",[609,54880,5548],{"class":614},[609,54882,2770],{"class":614},[609,54884,14280],{"class":2804},[609,54886,54887],{"class":655},"(URL)\n",[609,54889,54890,54892,54895,54897,54899,54901,54903,54905],{"class":611,"line":711},[609,54891,5489],{"class":2804},[609,54893,54894],{"class":655},"(state",[609,54896,659],{"class":614},[609,54898,2717],{"class":614},[609,54900,14381],{"class":5499},[609,54902,4129],{"class":614},[609,54904,5505],{"class":622},[609,54906,1180],{"class":614},[609,54908,54909,54912,54914,54916,54918,54920],{"class":611,"line":717},[609,54910,54911],{"class":655},"  texture",[609,54913,1122],{"class":614},[609,54915,54811],{"class":655},[609,54917,2770],{"class":614},[609,54919,38833],{"class":655},[609,54921,54922],{"class":1185}," // assign a custom color space\n",[609,54924,54925,54927],{"class":611,"line":727},[609,54926,5548],{"class":614},[609,54928,5543],{"class":655},[609,54930,54931,54933,54935],{"class":611,"line":750},[609,54932,704],{"class":614},[609,54934,619],{"class":618},[609,54936,641],{"class":614},[609,54938,54939],{"class":611,"line":762},[609,54940,714],{"emptyLinePlaceholder":566},[609,54942,54943,54945,54947],{"class":611,"line":772},[609,54944,615],{"class":614},[609,54946,722],{"class":618},[609,54948,641],{"class":614},[609,54950,54951,54953,54955,54957,54959,54961,54963,54965,54967],{"class":611,"line":777},[609,54952,730],{"class":614},[609,54954,421],{"class":618},[609,54956,785],{"class":614},[609,54958,14381],{"class":622},[609,54960,629],{"class":614},[609,54962,632],{"class":614},[609,54964,14381],{"class":655},[609,54966,632],{"class":614},[609,54968,759],{"class":614},[609,54970,54971,54973,54975],{"class":611,"line":803},[609,54972,704],{"class":614},[609,54974,722],{"class":618},[609,54976,641],{"class":614},[1303,54978,21676],{},{"title":548,"searchDepth":549,"depth":550,"links":54980},[54981,54982,54983],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},{"id":53938,"depth":550,"text":53939},"Display image textures with shader-based effects.",{},{"title":421,"description":54984},"jEAPHxilh9_Gg2oZg9-kp8JsJ1tSjkYRBYlGbuY9YbM",{"id":54989,"title":425,"body":54990,"description":55824,"extension":563,"links":564,"meta":55825,"navigation":566,"path":426,"seo":55826,"stem":427,"__hash__":55827},"docs/2.api/9.objects/marching-cubes.md",{"type":473,"value":54991,"toc":55818},[54992,54997,55008,55011,55036,55038,55632,55634,55704,55708,55753,55757,55815],[580,54993,54994],{},[54995,54996],"objects-marching-cubes",{},[586,54998,54999,55002,55003,1122],{},[590,55000,55001],{},"\u003CMarchingCubes />"," is a wrapper around ",[1116,55004,55007],{"href":55005,"rel":55006},"https://threejs.org/examples/#webgl_marchingcubes",[1120],"THREE's Marching Cubes",[586,55009,55010],{},"It includes 3 components:",[3140,55012,55013,55026,55031],{},[3143,55014,55015,55017,55018,55021,55022,55025],{},[590,55016,55001],{}," – container element for ",[590,55019,55020],{},"\u003CMarchingCube />","s and ",[590,55023,55024],{},"\u003CMarchingPlane />","s",[3143,55027,55028,55030],{},[590,55029,55020],{}," - an individual metaball",[3143,55032,55033,55035],{},[590,55034,55024],{}," – optional bounding plane that interacts with the metaballs",[476,55037,15],{"id":596},[598,55039,55042],{"className":600,"code":55040,"highlights":55041,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { MarchingCube, MarchingCubes, MarchingPlane, OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport { NoToneMapping, Vector3 } from 'three'\n\nconst rand = () => (Math.random() - 0.5) * 1.25\nconst positions = Array.from({ length: 40 }, () => new Vector3(rand(), rand(), rand()))\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#222\" :tone-mapping=\"NoToneMapping\">\n    \u003CTresPerspectiveCamera />\n    \u003COrbitControls />\n\n    \u003CMarchingCubes :resolution=\"40\" :max-poly-count=\"40000\">\n      \u003CMarchingPlane plane-type=\"y\" />\n      \u003CMarchingCube\n        v-for=\"position, i of positions\"\n        :key=\"i\"\n        :position=\"position\"\n      />\n      \u003CTresMeshPhongMaterial specular=\"#111111\" :shininess=\"30\" color=\"#049ef4\" :reflectivity=\"1\" />\n    \u003C/MarchingCubes>\n\n    \u003CTresAxesHelper />\n    \u003CTresDirectionalLight color=\"#ffffff\" :intensity=\"3\" :position=\"[0, 200, 0]\" />\n    \u003CTresDirectionalLight color=\"#ffffff\" :intensity=\"3\" :position=\"[100, 200, 100]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n",[550,837,848,858,604,878,888,2956,2964,2994],[590,55043,55044,55064,55098,55116,55139,55143,55176,55235,55243,55247,55255,55287,55295,55303,55307,55342,55363,55371,55393,55408,55423,55428,55486,55495,55499,55507,55562,55616,55624],{"__ignoreMap":548},[609,55045,55046,55048,55050,55052,55054,55056,55058,55060,55062],{"class":611,"line":549},[609,55047,615],{"class":614},[609,55049,619],{"class":618},[609,55051,623],{"class":622},[609,55053,626],{"class":622},[609,55055,629],{"class":614},[609,55057,632],{"class":614},[609,55059,636],{"class":635},[609,55061,632],{"class":614},[609,55063,641],{"class":614},[609,55065,55067,55069,55071,55074,55076,55079,55081,55084,55086,55088,55090,55092,55094,55096],{"class":55066,"line":550},[611,645],[609,55068,649],{"class":648},[609,55070,652],{"class":614},[609,55072,55073],{"class":655}," MarchingCube",[609,55075,659],{"class":614},[609,55077,55078],{"class":655}," MarchingCubes",[609,55080,659],{"class":614},[609,55082,55083],{"class":655}," MarchingPlane",[609,55085,659],{"class":614},[609,55087,662],{"class":655},[609,55089,665],{"class":614},[609,55091,668],{"class":648},[609,55093,671],{"class":614},[609,55095,674],{"class":635},[609,55097,677],{"class":614},[609,55099,55100,55102,55104,55106,55108,55110,55112,55114],{"class":611,"line":680},[609,55101,649],{"class":648},[609,55103,652],{"class":614},[609,55105,687],{"class":655},[609,55107,665],{"class":614},[609,55109,668],{"class":648},[609,55111,671],{"class":614},[609,55113,696],{"class":635},[609,55115,677],{"class":614},[609,55117,55118,55120,55122,55125,55127,55129,55131,55133,55135,55137],{"class":611,"line":701},[609,55119,649],{"class":648},[609,55121,652],{"class":614},[609,55123,55124],{"class":655}," NoToneMapping",[609,55126,659],{"class":614},[609,55128,24145],{"class":655},[609,55130,665],{"class":614},[609,55132,668],{"class":648},[609,55134,671],{"class":614},[609,55136,2682],{"class":635},[609,55138,677],{"class":614},[609,55140,55141],{"class":611,"line":711},[609,55142,714],{"emptyLinePlaceholder":566},[609,55144,55145,55147,55150,55152,55154,55156,55159,55161,55163,55165,55167,55169,55171,55173],{"class":611,"line":717},[609,55146,2693],{"class":622},[609,55148,55149],{"class":655}," rand ",[609,55151,629],{"class":614},[609,55153,52214],{"class":614},[609,55155,5505],{"class":622},[609,55157,55158],{"class":655}," (Math",[609,55160,1122],{"class":614},[609,55162,52158],{"class":2804},[609,55164,52161],{"class":655},[609,55166,4092],{"class":614},[609,55168,36435],{"class":795},[609,55170,2752],{"class":655},[609,55172,8546],{"class":614},[609,55174,55175],{"class":795}," 1.25\n",[609,55177,55178,55180,55183,55185,55188,55190,55192,55194,55196,55199,55201,55204,55206,55208,55210,55212,55214,55216,55219,55221,55223,55226,55228,55230,55232],{"class":611,"line":727},[609,55179,2693],{"class":622},[609,55181,55182],{"class":655}," positions ",[609,55184,629],{"class":614},[609,55186,55187],{"class":655}," Array",[609,55189,1122],{"class":614},[609,55191,11618],{"class":2804},[609,55193,2974],{"class":655},[609,55195,8474],{"class":614},[609,55197,55198],{"class":618}," length",[609,55200,1194],{"class":614},[609,55202,55203],{"class":795}," 40",[609,55205,35681],{"class":614},[609,55207,52214],{"class":614},[609,55209,5505],{"class":622},[609,55211,2845],{"class":614},[609,55213,24145],{"class":2804},[609,55215,2974],{"class":655},[609,55217,55218],{"class":2804},"rand",[609,55220,8451],{"class":655},[609,55222,659],{"class":614},[609,55224,55225],{"class":2804}," rand",[609,55227,8451],{"class":655},[609,55229,659],{"class":614},[609,55231,55225],{"class":2804},[609,55233,55234],{"class":655},"()))\n",[609,55236,55237,55239,55241],{"class":611,"line":750},[609,55238,704],{"class":614},[609,55240,619],{"class":618},[609,55242,641],{"class":614},[609,55244,55245],{"class":611,"line":762},[609,55246,714],{"emptyLinePlaceholder":566},[609,55248,55249,55251,55253],{"class":611,"line":772},[609,55250,615],{"class":614},[609,55252,722],{"class":618},[609,55254,641],{"class":614},[609,55256,55257,55259,55261,55263,55265,55267,55269,55271,55273,55276,55278,55280,55283,55285],{"class":611,"line":777},[609,55258,730],{"class":614},[609,55260,733],{"class":618},[609,55262,736],{"class":622},[609,55264,629],{"class":614},[609,55266,632],{"class":614},[609,55268,743],{"class":635},[609,55270,632],{"class":614},[609,55272,785],{"class":614},[609,55274,55275],{"class":622},"tone-mapping",[609,55277,629],{"class":614},[609,55279,632],{"class":614},[609,55281,55282],{"class":655},"NoToneMapping",[609,55284,632],{"class":614},[609,55286,641],{"class":614},[609,55288,55289,55291,55293],{"class":611,"line":803},[609,55290,753],{"class":614},[609,55292,756],{"class":618},[609,55294,759],{"class":614},[609,55296,55297,55299,55301],{"class":611,"line":603},[609,55298,753],{"class":614},[609,55300,767],{"class":618},[609,55302,759],{"class":614},[609,55304,55305],{"class":611,"line":826},[609,55306,714],{"emptyLinePlaceholder":566},[609,55308,55310,55312,55314,55316,55318,55320,55322,55324,55326,55328,55331,55333,55335,55338,55340],{"class":55309,"line":837},[611,645],[609,55311,753],{"class":614},[609,55313,425],{"class":618},[609,55315,785],{"class":614},[609,55317,22879],{"class":622},[609,55319,629],{"class":614},[609,55321,632],{"class":614},[609,55323,28948],{"class":795},[609,55325,632],{"class":614},[609,55327,785],{"class":614},[609,55329,55330],{"class":622},"max-poly-count",[609,55332,629],{"class":614},[609,55334,632],{"class":614},[609,55336,55337],{"class":795},"40000",[609,55339,632],{"class":614},[609,55341,641],{"class":614},[609,55343,55345,55347,55350,55353,55355,55357,55359,55361],{"class":55344,"line":848},[611,645],[609,55346,829],{"class":614},[609,55348,55349],{"class":618},"MarchingPlane",[609,55351,55352],{"class":622}," plane-type",[609,55354,629],{"class":614},[609,55356,632],{"class":614},[609,55358,8720],{"class":635},[609,55360,632],{"class":614},[609,55362,759],{"class":614},[609,55364,55366,55368],{"class":55365,"line":858},[611,645],[609,55367,829],{"class":614},[609,55369,55370],{"class":618},"MarchingCube\n",[609,55372,55374,55376,55378,55380,55382,55384,55386,55389,55391],{"class":55373,"line":604},[611,645],[609,55375,2967],{"class":648},[609,55377,629],{"class":614},[609,55379,632],{"class":614},[609,55381,1463],{"class":655},[609,55383,1475],{"class":614},[609,55385,19651],{"class":655},[609,55387,55388],{"class":614}," of ",[609,55390,2988],{"class":655},[609,55392,2991],{"class":614},[609,55394,55396,55398,55400,55402,55404,55406],{"class":55395,"line":878},[611,645],[609,55397,2997],{"class":614},[609,55399,3000],{"class":622},[609,55401,629],{"class":614},[609,55403,632],{"class":614},[609,55405,19651],{"class":655},[609,55407,2991],{"class":614},[609,55409,55411,55413,55415,55417,55419,55421],{"class":55410,"line":888},[611,645],[609,55412,2997],{"class":614},[609,55414,1463],{"class":622},[609,55416,629],{"class":614},[609,55418,632],{"class":614},[609,55420,1463],{"class":655},[609,55422,2991],{"class":614},[609,55424,55426],{"class":55425,"line":2956},[611,645],[609,55427,3054],{"class":614},[609,55429,55431,55433,55435,55438,55440,55442,55445,55447,55449,55452,55454,55456,55458,55460,55462,55464,55466,55469,55471,55473,55476,55478,55480,55482,55484],{"class":55430,"line":2964},[611,645],[609,55432,829],{"class":614},[609,55434,4668],{"class":618},[609,55436,55437],{"class":622}," specular",[609,55439,629],{"class":614},[609,55441,632],{"class":614},[609,55443,55444],{"class":635},"#111111",[609,55446,632],{"class":614},[609,55448,785],{"class":614},[609,55450,55451],{"class":622},"shininess",[609,55453,629],{"class":614},[609,55455,632],{"class":614},[609,55457,22632],{"class":795},[609,55459,632],{"class":614},[609,55461,3982],{"class":622},[609,55463,629],{"class":614},[609,55465,632],{"class":614},[609,55467,55468],{"class":635},"#049ef4",[609,55470,632],{"class":614},[609,55472,785],{"class":614},[609,55474,55475],{"class":622},"reflectivity",[609,55477,629],{"class":614},[609,55479,632],{"class":614},[609,55481,1897],{"class":795},[609,55483,632],{"class":614},[609,55485,759],{"class":614},[609,55487,55489,55491,55493],{"class":55488,"line":2994},[611,645],[609,55490,871],{"class":614},[609,55492,425],{"class":618},[609,55494,641],{"class":614},[609,55496,55497],{"class":611,"line":3011},[609,55498,714],{"emptyLinePlaceholder":566},[609,55500,55501,55503,55505],{"class":611,"line":3026},[609,55502,753],{"class":614},[609,55504,782],{"class":618},[609,55506,759],{"class":614},[609,55508,55509,55511,55513,55515,55517,55519,55522,55524,55526,55528,55530,55532,55534,55536,55538,55540,55542,55544,55546,55548,55550,55552,55554,55556,55558,55560],{"class":611,"line":3051},[609,55510,753],{"class":614},[609,55512,3543],{"class":618},[609,55514,3982],{"class":622},[609,55516,629],{"class":614},[609,55518,632],{"class":614},[609,55520,55521],{"class":635},"#ffffff",[609,55523,632],{"class":614},[609,55525,785],{"class":614},[609,55527,1890],{"class":622},[609,55529,629],{"class":614},[609,55531,632],{"class":614},[609,55533,4164],{"class":795},[609,55535,632],{"class":614},[609,55537,785],{"class":614},[609,55539,1463],{"class":622},[609,55541,629],{"class":614},[609,55543,632],{"class":614},[609,55545,1470],{"class":614},[609,55547,941],{"class":795},[609,55549,1475],{"class":614},[609,55551,41780],{"class":795},[609,55553,1475],{"class":614},[609,55555,941],{"class":795},[609,55557,1485],{"class":614},[609,55559,632],{"class":614},[609,55561,759],{"class":614},[609,55563,55564,55566,55568,55570,55572,55574,55576,55578,55580,55582,55584,55586,55588,55590,55592,55594,55596,55598,55600,55602,55604,55606,55608,55610,55612,55614],{"class":611,"line":2595},[609,55565,753],{"class":614},[609,55567,3543],{"class":618},[609,55569,3982],{"class":622},[609,55571,629],{"class":614},[609,55573,632],{"class":614},[609,55575,55521],{"class":635},[609,55577,632],{"class":614},[609,55579,785],{"class":614},[609,55581,1890],{"class":622},[609,55583,629],{"class":614},[609,55585,632],{"class":614},[609,55587,4164],{"class":795},[609,55589,632],{"class":614},[609,55591,785],{"class":614},[609,55593,1463],{"class":622},[609,55595,629],{"class":614},[609,55597,632],{"class":614},[609,55599,1470],{"class":614},[609,55601,6032],{"class":795},[609,55603,1475],{"class":614},[609,55605,41780],{"class":795},[609,55607,1475],{"class":614},[609,55609,6032],{"class":795},[609,55611,1485],{"class":614},[609,55613,632],{"class":614},[609,55615,759],{"class":614},[609,55617,55618,55620,55622],{"class":611,"line":3066},[609,55619,881],{"class":614},[609,55621,733],{"class":618},[609,55623,641],{"class":614},[609,55625,55626,55628,55630],{"class":611,"line":3096},[609,55627,704],{"class":614},[609,55629,722],{"class":618},[609,55631,641],{"class":614},[476,55633,898],{"id":897},[903,55635,55636,55646],{},[906,55637,55638],{},[909,55639,55640,55642,55644],{},[912,55641,914],{"align":973},[912,55643,917],{"align":973},[912,55645,920],{},[922,55647,55648,55661,55676,55690],{},[909,55649,55650,55654,55657],{},[927,55651,55652],{"align":973},[590,55653,22879],{},[927,55655,55656],{"align":973},"Resolution of the marching cube field. Higher resolution produces smoother meshes at the cost of performance and memory.",[927,55658,55659],{},[590,55660,50490],{},[909,55662,55663,55668,55671],{},[927,55664,55665],{"align":973},[590,55666,55667],{},"maxPolyCount",[927,55669,55670],{"align":973},"Maximum number of polygons to generate.",[927,55672,55673],{},[590,55674,55675],{},"10000",[909,55677,55678,55683,55686],{},[927,55679,55680],{"align":973},[590,55681,55682],{},"enableUvs",[927,55684,55685],{"align":973},"Whether UVs are enabled.",[927,55687,55688],{},[590,55689,947],{},[909,55691,55692,55697,55700],{},[927,55693,55694],{"align":973},[590,55695,55696],{},"enableColors",[927,55698,55699],{"align":973},"Whether vertex colors are enabled.",[927,55701,55702],{},[590,55703,947],{},[476,55705,55707],{"id":55706},"marchingcube-props","MarchingCube Props",[903,55709,55710,55720],{},[906,55711,55712],{},[909,55713,55714,55716,55718],{},[912,55715,914],{"align":973},[912,55717,917],{"align":973},[912,55719,920],{},[922,55721,55722,55736],{},[909,55723,55724,55729,55732],{},[927,55725,55726],{"align":973},[590,55727,55728],{},"strength",[927,55730,55731],{"align":973},"How strongly this cube affects the marching cube field.",[927,55733,55734],{},[590,55735,1517],{},[909,55737,55738,55743,55749],{},[927,55739,55740],{"align":973},[590,55741,55742],{},"subtract",[927,55744,55745,55746,55748],{"align":973},"How quickly strength moves to ",[590,55747,941],{}," over distance.",[927,55750,55751],{},[590,55752,26181],{},[476,55754,55756],{"id":55755},"marchingplane-props","MarchingPlane Props",[903,55758,55759,55769],{},[906,55760,55761],{},[909,55762,55763,55765,55767],{},[912,55764,914],{"align":973},[912,55766,917],{"align":973},[912,55768,920],{},[922,55770,55771,55788,55801],{},[909,55772,55773,55778,55784],{},[927,55774,55775],{"align":973},[590,55776,55777],{},"planeType",[927,55779,55780,55781],{"align":973},"Which axis the plane appears on. ",[590,55782,55783],{},"'x' | 'y' | 'z'",[927,55785,55786],{},[590,55787,8219],{},[909,55789,55790,55794,55797],{},[927,55791,55792],{"align":973},[590,55793,55728],{},[927,55795,55796],{"align":973},"How strongly this plane affects the marching cube field.",[927,55798,55799],{},[590,55800,1517],{},[909,55802,55803,55807,55811],{},[927,55804,55805],{"align":973},[590,55806,55742],{},[927,55808,55745,55809,55748],{"align":973},[590,55810,941],{},[927,55812,55813],{},[590,55814,26181],{},[1303,55816,55817],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .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":548,"searchDepth":549,"depth":550,"links":55819},[55820,55821,55822,55823],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},{"id":55706,"depth":550,"text":55707},{"id":55755,"depth":550,"text":55756},"Create organic blob-like shapes using metaballs.",{},{"title":425,"description":55824},"dt9UUvCiy--PP6CSMtwwdcksel8iajosft8nxTQtolk",{"id":55829,"title":429,"body":55830,"description":56826,"extension":563,"links":564,"meta":56827,"navigation":566,"path":430,"seo":56828,"stem":431,"__hash__":56829},"docs/2.api/9.objects/reflector.md",{"type":473,"value":55831,"toc":56819},[55832,55837,55851,55853,56116,56118,56201,56209,56213,56216,56493,56496,56499,56503,56817],[580,55833,55834],{},[55835,55836],"objects-reflector",{},[586,55838,2257,55839,55841,55842,55847,55848,55850],{},[590,55840,2260],{}," package provides an abstraction of the ",[1116,55843,55846],{"href":55844,"rel":55845},"https://github.com/mrdoob/three.js/blob/dev/examples/jsm/objects/Reflector.js",[1120],"Reflector class",", which creates a Mesh showing a real-time reflection of your scene.  This Mesh extends from ",[590,55849,5303],{}," so all the default props can be passed as well:",[476,55852,15],{"id":596},[598,55854,55856],{"className":600,"code":55855,"language":605,"meta":548,"style":548},"\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",[590,55857,55858,55878,55897,55905,55909,55917,55930,55962,55970,55974,55982,55989,56023,56039,56052,56056,56084,56092,56100,56108],{"__ignoreMap":548},[609,55859,55860,55862,55864,55866,55868,55870,55872,55874,55876],{"class":611,"line":549},[609,55861,615],{"class":614},[609,55863,619],{"class":618},[609,55865,623],{"class":622},[609,55867,626],{"class":622},[609,55869,629],{"class":614},[609,55871,632],{"class":614},[609,55873,636],{"class":635},[609,55875,632],{"class":614},[609,55877,641],{"class":614},[609,55879,55880,55882,55884,55887,55889,55891,55893,55895],{"class":611,"line":550},[609,55881,649],{"class":648},[609,55883,652],{"class":614},[609,55885,55886],{"class":655}," Reflector",[609,55888,665],{"class":614},[609,55890,668],{"class":648},[609,55892,671],{"class":614},[609,55894,674],{"class":635},[609,55896,677],{"class":614},[609,55898,55899,55901,55903],{"class":611,"line":680},[609,55900,704],{"class":614},[609,55902,619],{"class":618},[609,55904,641],{"class":614},[609,55906,55907],{"class":611,"line":701},[609,55908,714],{"emptyLinePlaceholder":566},[609,55910,55911,55913,55915],{"class":611,"line":711},[609,55912,615],{"class":614},[609,55914,722],{"class":618},[609,55916,641],{"class":614},[609,55918,55919,55921,55923,55925,55928],{"class":611,"line":717},[609,55920,730],{"class":614},[609,55922,733],{"class":618},[609,55924,36714],{"class":622},[609,55926,55927],{"class":622}," alpha",[609,55929,641],{"class":614},[609,55931,55932,55934,55936,55938,55940,55942,55944,55946,55948,55950,55952,55954,55956,55958,55960],{"class":611,"line":727},[609,55933,753],{"class":614},[609,55935,756],{"class":618},[609,55937,785],{"class":614},[609,55939,1463],{"class":622},[609,55941,629],{"class":614},[609,55943,632],{"class":614},[609,55945,1470],{"class":614},[609,55947,941],{"class":795},[609,55949,1475],{"class":614},[609,55951,941],{"class":795},[609,55953,1475],{"class":614},[609,55955,4164],{"class":795},[609,55957,1485],{"class":614},[609,55959,632],{"class":614},[609,55961,759],{"class":614},[609,55963,55964,55966,55968],{"class":611,"line":750},[609,55965,753],{"class":614},[609,55967,767],{"class":618},[609,55969,759],{"class":614},[609,55971,55972],{"class":611,"line":762},[609,55973,714],{"emptyLinePlaceholder":566},[609,55975,55976,55978,55980],{"class":611,"line":772},[609,55977,753],{"class":614},[609,55979,15941],{"class":618},[609,55981,641],{"class":614},[609,55983,55984,55986],{"class":611,"line":777},[609,55985,829],{"class":614},[609,55987,55988],{"class":618},"Reflector\n",[609,55990,55991,55993,55995,55997,55999,56001,56003,56005,56007,56009,56011,56013,56015,56017,56019,56021],{"class":611,"line":803},[609,55992,2997],{"class":614},[609,55994,22526],{"class":622},[609,55996,629],{"class":614},[609,55998,632],{"class":614},[609,56000,16140],{"class":614},[609,56002,22535],{"class":655},[609,56004,1122],{"class":614},[609,56006,22540],{"class":655},[609,56008,50306],{"class":614},[609,56010,1517],{"class":795},[609,56012,1475],{"class":614},[609,56014,941],{"class":795},[609,56016,1475],{"class":614},[609,56018,941],{"class":795},[609,56020,1485],{"class":614},[609,56022,2991],{"class":614},[609,56024,56025,56027,56029,56031,56033,56035,56037],{"class":611,"line":603},[609,56026,2997],{"class":614},[609,56028,1972],{"class":622},[609,56030,629],{"class":614},[609,56032,632],{"class":614},[609,56034,4092],{"class":614},[609,56036,796],{"class":795},[609,56038,2991],{"class":614},[609,56040,56041,56043,56045,56047,56050],{"class":611,"line":826},[609,56042,22671],{"class":622},[609,56044,629],{"class":614},[609,56046,632],{"class":614},[609,56048,56049],{"class":635},"#fff",[609,56051,2991],{"class":614},[609,56053,56054],{"class":611,"line":837},[609,56055,48683],{"class":614},[609,56057,56058,56060,56062,56064,56066,56068,56070,56072,56074,56076,56078,56080,56082],{"class":611,"line":848},[609,56059,840],{"class":614},[609,56061,4031],{"class":618},[609,56063,785],{"class":614},[609,56065,1993],{"class":622},[609,56067,629],{"class":614},[609,56069,632],{"class":614},[609,56071,1470],{"class":614},[609,56073,1482],{"class":795},[609,56075,1475],{"class":614},[609,56077,1482],{"class":795},[609,56079,1485],{"class":614},[609,56081,632],{"class":614},[609,56083,759],{"class":614},[609,56085,56086,56088,56090],{"class":611,"line":858},[609,56087,861],{"class":614},[609,56089,429],{"class":618},[609,56091,641],{"class":614},[609,56093,56094,56096,56098],{"class":611,"line":604},[609,56095,871],{"class":614},[609,56097,15941],{"class":618},[609,56099,641],{"class":614},[609,56101,56102,56104,56106],{"class":611,"line":878},[609,56103,881],{"class":614},[609,56105,733],{"class":618},[609,56107,641],{"class":614},[609,56109,56110,56112,56114],{"class":611,"line":888},[609,56111,704],{"class":614},[609,56113,722],{"class":618},[609,56115,641],{"class":614},[476,56117,898],{"id":897},[903,56119,56120,56130],{},[906,56121,56122],{},[909,56123,56124,56126,56128],{},[912,56125,914],{"align":973},[912,56127,917],{"align":973},[912,56129,920],{},[922,56131,56132,56144,56155,56166,56177,56189],{},[909,56133,56134,56138,56141],{},[927,56135,56136],{"align":973},[1677,56137,2504],{},[927,56139,56140],{"align":973},"The base color that's combine with the mirror effect",[927,56142,56143],{},"'#333'",[909,56145,56146,56150,56153],{},[927,56147,56148],{"align":973},[1677,56149,40371],{},[927,56151,56152],{"align":973},"the width of the texture to render on the mirror",[927,56154,35004],{},[909,56156,56157,56161,56164],{},[927,56158,56159],{"align":973},[1677,56160,40388],{},[927,56162,56163],{"align":973},"the height of the texture to render on the mirror",[927,56165,35004],{},[909,56167,56168,56172,56175],{},[927,56169,56170],{"align":973},[1677,56171,40506],{},[927,56173,56174],{"align":973},"to use the clipBias property",[927,56176,941],{},[909,56178,56179,56184,56187],{},[927,56180,56181],{"align":973},[1677,56182,56183],{},"multisample",[927,56185,56186],{"align":973},"how many samplers will be render",[927,56188,3494],{},[909,56190,56191,56196,56198],{},[927,56192,56193],{"align":973},[1677,56194,56195],{},"shader",[927,56197,42352],{"align":973},[927,56199,56200],{},"Reflector.ReflectorShader",[3729,56202,56203],{},[586,56204,56205,56206,56208],{},"All the props except the ",[590,56207,2504],{},", are not reactive",[476,56210,56212],{"id":56211},"custom-mirror-effect","Custom mirror effect",[586,56214,56215],{},"For more complex effect you can provide your own shaders, you could do this creating an object and pass the uniforms, vertexShaders or fragmentShaders:",[598,56217,56219],{"className":600,"code":56218,"language":605,"meta":548,"style":548},"\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",[590,56220,56221,56241,56257,56261,56272,56277,56281,56289,56293,56301,56313,56345,56350,56356,56390,56406,56418,56433,56437,56465,56473,56477,56485],{"__ignoreMap":548},[609,56222,56223,56225,56227,56229,56231,56233,56235,56237,56239],{"class":611,"line":549},[609,56224,615],{"class":614},[609,56226,619],{"class":618},[609,56228,623],{"class":622},[609,56230,626],{"class":622},[609,56232,629],{"class":614},[609,56234,632],{"class":614},[609,56236,636],{"class":635},[609,56238,632],{"class":614},[609,56240,641],{"class":614},[609,56242,56243,56245,56248,56250,56252,56255],{"class":611,"line":550},[609,56244,649],{"class":648},[609,56246,56247],{"class":655}," vertexShader ",[609,56249,11618],{"class":648},[609,56251,671],{"class":614},[609,56253,56254],{"class":635},"MyCustomVertexShader.glsl",[609,56256,677],{"class":614},[609,56258,56259],{"class":611,"line":680},[609,56260,714],{"emptyLinePlaceholder":566},[609,56262,56263,56265,56268,56270],{"class":611,"line":701},[609,56264,2693],{"class":622},[609,56266,56267],{"class":655}," customShader ",[609,56269,629],{"class":614},[609,56271,1180],{"class":614},[609,56273,56274],{"class":611,"line":711},[609,56275,56276],{"class":655},"  vertexShader\n",[609,56278,56279],{"class":611,"line":717},[609,56280,1301],{"class":614},[609,56282,56283,56285,56287],{"class":611,"line":727},[609,56284,704],{"class":614},[609,56286,619],{"class":618},[609,56288,641],{"class":614},[609,56290,56291],{"class":611,"line":750},[609,56292,714],{"emptyLinePlaceholder":566},[609,56294,56295,56297,56299],{"class":611,"line":762},[609,56296,615],{"class":614},[609,56298,722],{"class":618},[609,56300,641],{"class":614},[609,56302,56303,56305,56307,56309,56311],{"class":611,"line":772},[609,56304,730],{"class":614},[609,56306,733],{"class":618},[609,56308,36714],{"class":622},[609,56310,55927],{"class":622},[609,56312,641],{"class":614},[609,56314,56315,56317,56319,56321,56323,56325,56327,56329,56331,56333,56335,56337,56339,56341,56343],{"class":611,"line":777},[609,56316,753],{"class":614},[609,56318,756],{"class":618},[609,56320,785],{"class":614},[609,56322,1463],{"class":622},[609,56324,629],{"class":614},[609,56326,632],{"class":614},[609,56328,1470],{"class":614},[609,56330,941],{"class":795},[609,56332,1475],{"class":614},[609,56334,941],{"class":795},[609,56336,1475],{"class":614},[609,56338,4164],{"class":795},[609,56340,1485],{"class":614},[609,56342,632],{"class":614},[609,56344,759],{"class":614},[609,56346,56347],{"class":611,"line":803},[609,56348,56349],{"class":655},"    ...\n",[609,56351,56352,56354],{"class":611,"line":603},[609,56353,753],{"class":614},[609,56355,55988],{"class":618},[609,56357,56358,56360,56362,56364,56366,56368,56370,56372,56374,56376,56378,56380,56382,56384,56386,56388],{"class":611,"line":826},[609,56359,5697],{"class":614},[609,56361,22526],{"class":622},[609,56363,629],{"class":614},[609,56365,632],{"class":614},[609,56367,16140],{"class":614},[609,56369,22535],{"class":655},[609,56371,1122],{"class":614},[609,56373,22540],{"class":655},[609,56375,50306],{"class":614},[609,56377,1517],{"class":795},[609,56379,1475],{"class":614},[609,56381,941],{"class":795},[609,56383,1475],{"class":614},[609,56385,941],{"class":795},[609,56387,1485],{"class":614},[609,56389,2991],{"class":614},[609,56391,56392,56394,56396,56398,56400,56402,56404],{"class":611,"line":837},[609,56393,5697],{"class":614},[609,56395,1972],{"class":622},[609,56397,629],{"class":614},[609,56399,632],{"class":614},[609,56401,4092],{"class":614},[609,56403,796],{"class":795},[609,56405,2991],{"class":614},[609,56407,56408,56410,56412,56414,56416],{"class":611,"line":848},[609,56409,24313],{"class":622},[609,56411,629],{"class":614},[609,56413,632],{"class":614},[609,56415,56049],{"class":635},[609,56417,2991],{"class":614},[609,56419,56420,56422,56424,56426,56428,56431],{"class":611,"line":858},[609,56421,5697],{"class":614},[609,56423,56195],{"class":622},[609,56425,629],{"class":614},[609,56427,632],{"class":614},[609,56429,56430],{"class":655},"customShader",[609,56432,2991],{"class":614},[609,56434,56435],{"class":611,"line":604},[609,56436,5717],{"class":614},[609,56438,56439,56441,56443,56445,56447,56449,56451,56453,56455,56457,56459,56461,56463],{"class":611,"line":878},[609,56440,829],{"class":614},[609,56442,4031],{"class":618},[609,56444,785],{"class":614},[609,56446,1993],{"class":622},[609,56448,629],{"class":614},[609,56450,632],{"class":614},[609,56452,1470],{"class":614},[609,56454,1482],{"class":795},[609,56456,1475],{"class":614},[609,56458,1482],{"class":795},[609,56460,1485],{"class":614},[609,56462,632],{"class":614},[609,56464,759],{"class":614},[609,56466,56467,56469,56471],{"class":611,"line":888},[609,56468,871],{"class":614},[609,56470,429],{"class":618},[609,56472,641],{"class":614},[609,56474,56475],{"class":611,"line":2956},[609,56476,56349],{"class":655},[609,56478,56479,56481,56483],{"class":611,"line":2964},[609,56480,881],{"class":614},[609,56482,733],{"class":618},[609,56484,641],{"class":614},[609,56486,56487,56489,56491],{"class":611,"line":2994},[609,56488,704],{"class":614},[609,56490,722],{"class":618},[609,56492,641],{"class":614},[586,56494,56495],{},"The Reflector shader use the following configuration by default:",[586,56497,56498],{},"You can extend, modify or just play with them",[7477,56500,56502],{"id":56501},"default-shader","Default shader",[598,56504,56506],{"className":36126,"code":56505,"language":36128,"meta":548,"style":548},"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",[590,56507,56508,56519,56535,56544,56552,56562,56567,56576,56584,56588,56597,56605,56610,56614,56626,56631,56636,56640,56645,56650,56654,56659,56664,56669,56673,56678,56682,56692,56703,56708,56713,56717,56721,56726,56730,56735,56740,56744,56748,56753,56758,56762,56766,56770,56775,56779,56784,56789,56793,56798,56803,56809,56813],{"__ignoreMap":548},[609,56509,56510,56512,56515,56517],{"class":611,"line":549},[609,56511,2693],{"class":622},[609,56513,56514],{"class":655}," shader ",[609,56516,629],{"class":614},[609,56518,1180],{"class":614},[609,56520,56521,56524,56526,56528,56531,56533],{"class":611,"line":550},[609,56522,56523],{"class":618},"  name",[609,56525,1194],{"class":614},[609,56527,671],{"class":614},[609,56529,56530],{"class":635},"ReflectorShader",[609,56532,5540],{"class":614},[609,56534,14979],{"class":614},[609,56536,56537,56540,56542],{"class":611,"line":680},[609,56538,56539],{"class":618},"  uniforms",[609,56541,1194],{"class":614},[609,56543,1180],{"class":614},[609,56545,56546,56548,56550],{"class":611,"line":701},[609,56547,18628],{"class":618},[609,56549,1194],{"class":614},[609,56551,1180],{"class":614},[609,56553,56554,56557,56559],{"class":611,"line":711},[609,56555,56556],{"class":618},"      value",[609,56558,1194],{"class":614},[609,56560,56561],{"class":614}," null\n",[609,56563,56564],{"class":611,"line":717},[609,56565,56566],{"class":614},"    },\n",[609,56568,56569,56572,56574],{"class":611,"line":727},[609,56570,56571],{"class":618},"    tDiffuse",[609,56573,1194],{"class":614},[609,56575,1180],{"class":614},[609,56577,56578,56580,56582],{"class":611,"line":750},[609,56579,56556],{"class":618},[609,56581,1194],{"class":614},[609,56583,56561],{"class":614},[609,56585,56586],{"class":611,"line":762},[609,56587,56566],{"class":614},[609,56589,56590,56593,56595],{"class":611,"line":772},[609,56591,56592],{"class":618},"    textureMatrix",[609,56594,1194],{"class":614},[609,56596,1180],{"class":614},[609,56598,56599,56601,56603],{"class":611,"line":777},[609,56600,56556],{"class":618},[609,56602,1194],{"class":614},[609,56604,56561],{"class":614},[609,56606,56607],{"class":611,"line":803},[609,56608,56609],{"class":614},"    }\n",[609,56611,56612],{"class":611,"line":603},[609,56613,18593],{"class":614},[609,56615,56616,56619,56621,56624],{"class":611,"line":826},[609,56617,56618],{"class":618},"  vertexShader",[609,56620,1194],{"class":614},[609,56622,56623],{"class":1185}," /* glsl */",[609,56625,17084],{"class":614},[609,56627,56628],{"class":611,"line":837},[609,56629,56630],{"class":635},"  uniform mat4 textureMatrix;\n",[609,56632,56633],{"class":611,"line":848},[609,56634,56635],{"class":635},"  varying vec4 vUv;\n",[609,56637,56638],{"class":611,"line":858},[609,56639,714],{"emptyLinePlaceholder":566},[609,56641,56642],{"class":611,"line":604},[609,56643,56644],{"class":635},"  #include \u003Ccommon>\n",[609,56646,56647],{"class":611,"line":878},[609,56648,56649],{"class":635},"  #include \u003Clogdepthbuf_pars_vertex>\n",[609,56651,56652],{"class":611,"line":888},[609,56653,714],{"emptyLinePlaceholder":566},[609,56655,56656],{"class":611,"line":2956},[609,56657,56658],{"class":635},"  void main() {\n",[609,56660,56661],{"class":611,"line":2964},[609,56662,56663],{"class":635},"    vUv = textureMatrix * vec4( position, 1.0 );\n",[609,56665,56666],{"class":611,"line":2994},[609,56667,56668],{"class":635},"    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n",[609,56670,56671],{"class":611,"line":3011},[609,56672,714],{"emptyLinePlaceholder":566},[609,56674,56675],{"class":611,"line":3026},[609,56676,56677],{"class":635},"    #include \u003Clogdepthbuf_vertex>\n",[609,56679,56680],{"class":611,"line":3051},[609,56681,714],{"emptyLinePlaceholder":566},[609,56683,56684,56687,56690],{"class":611,"line":2595},[609,56685,56686],{"class":635},"  }",[609,56688,56689],{"class":614},"`",[609,56691,14979],{"class":614},[609,56693,56694,56697,56699,56701],{"class":611,"line":3066},[609,56695,56696],{"class":618},"  fragmentShader",[609,56698,1194],{"class":614},[609,56700,56623],{"class":1185},[609,56702,17084],{"class":614},[609,56704,56705],{"class":611,"line":3096},[609,56706,56707],{"class":635},"  uniform vec3 color;\n",[609,56709,56710],{"class":611,"line":3105},[609,56711,56712],{"class":635},"  uniform sampler2D tDiffuse;\n",[609,56714,56715],{"class":611,"line":4211},[609,56716,56635],{"class":635},[609,56718,56719],{"class":611,"line":4216},[609,56720,714],{"emptyLinePlaceholder":566},[609,56722,56723],{"class":611,"line":4239},[609,56724,56725],{"class":635},"  #include \u003Clogdepthbuf_pars_fragment>\n",[609,56727,56728],{"class":611,"line":4248},[609,56729,714],{"emptyLinePlaceholder":566},[609,56731,56732],{"class":611,"line":4257},[609,56733,56734],{"class":635},"  float blendOverlay( float base, float blend ) {\n",[609,56736,56737],{"class":611,"line":4266},[609,56738,56739],{"class":635},"    return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n",[609,56741,56742],{"class":611,"line":4275},[609,56743,2829],{"class":635},[609,56745,56746],{"class":611,"line":15730},[609,56747,714],{"emptyLinePlaceholder":566},[609,56749,56750],{"class":611,"line":15745},[609,56751,56752],{"class":635},"  vec3 blendOverlay( vec3 base, vec3 blend ) {\n",[609,56754,56755],{"class":611,"line":15760},[609,56756,56757],{"class":635},"    return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n",[609,56759,56760],{"class":611,"line":15765},[609,56761,2829],{"class":635},[609,56763,56764],{"class":611,"line":15772},[609,56765,714],{"emptyLinePlaceholder":566},[609,56767,56768],{"class":611,"line":15777},[609,56769,56658],{"class":635},[609,56771,56772],{"class":611,"line":15783},[609,56773,56774],{"class":635},"    #include \u003Clogdepthbuf_fragment>\n",[609,56776,56777],{"class":611,"line":15804},[609,56778,714],{"emptyLinePlaceholder":566},[609,56780,56781],{"class":611,"line":15810},[609,56782,56783],{"class":635},"    vec4 base = texture2DProj( tDiffuse, vUv );\n",[609,56785,56786],{"class":611,"line":15817},[609,56787,56788],{"class":635},"    gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n",[609,56790,56791],{"class":611,"line":15822},[609,56792,714],{"emptyLinePlaceholder":566},[609,56794,56795],{"class":611,"line":15843},[609,56796,56797],{"class":635},"    #include \u003Ctonemapping_fragment>\n",[609,56799,56800],{"class":611,"line":15856},[609,56801,56802],{"class":635},"    #include \u003Ccolorspace_fragment>\n",[609,56804,56805,56807],{"class":611,"line":15882},[609,56806,56686],{"class":635},[609,56808,17084],{"class":614},[609,56810,56811],{"class":611,"line":15887},[609,56812,714],{"emptyLinePlaceholder":566},[609,56814,56815],{"class":611,"line":15894},[609,56816,1301],{"class":614},[1303,56818,27236],{},{"title":548,"searchDepth":549,"depth":550,"links":56820},[56821,56822,56823],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},{"id":56211,"depth":550,"text":56212,"children":56824},[56825],{"id":56501,"depth":680,"text":56502},"Create real-time reflections of your scene.",{},{"title":429,"description":56826},"24igh7rDYMu_PMUA2O2RSz3ThFBClmpHnB0dGe1M0hI",{"id":56831,"title":433,"body":56832,"description":57371,"extension":563,"links":564,"meta":57372,"navigation":566,"path":434,"seo":57373,"stem":435,"__hash__":57374},"docs/2.api/9.objects/text-3d.md",{"type":473,"value":56833,"toc":57367},[56834,56839,56850,56852,56871,56978,56993,57086,57089,57208,57210,57364],[580,56835,56836],{},[56837,56838],"objects-text",{},[586,56840,56841,56844,56845,30508],{},[590,56842,56843],{},"\u003CText3D />"," is a component that renders text in 3D. It is a wrapper around the ",[1116,56846,56849],{"href":56847,"rel":56848},"https://threejs.org/docs/#api/en/geometries/TextGeometry",[1120],"TextGeometry",[476,56851,15],{"id":596},[586,56853,56854,56855,56857,56858,56861,56862,56865,56866],{},"To use the ",[590,56856,56843],{}," component you need to pass the ",[590,56859,56860],{},"font"," prop with the URL of the font JSON file you want to use. TextGeometry uses ",[590,56863,56864],{},"typeface",".json generated fonts, you can generate yours ",[1116,56867,56870],{"href":56868,"rel":56869},"http://gero3.github.io/facetype.js/",[1120],"here",[598,56872,56874],{"className":600,"code":56873,"language":605,"meta":548,"style":548},"\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CSuspense>\n      \u003CText3D\n        text=\"TresJS\"\n        font=\"/fonts/FiraCodeRegular.json\"\n      >\n        \u003CTresMeshNormalMaterial />\n      \u003C/Text3D>\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n",[590,56875,56876,56884,56892,56900,56907,56920,56934,56938,56946,56954,56962,56970],{"__ignoreMap":548},[609,56877,56878,56880,56882],{"class":611,"line":549},[609,56879,615],{"class":614},[609,56881,722],{"class":618},[609,56883,641],{"class":614},[609,56885,56886,56888,56890],{"class":611,"line":550},[609,56887,730],{"class":614},[609,56889,733],{"class":618},[609,56891,641],{"class":614},[609,56893,56894,56896,56898],{"class":611,"line":680},[609,56895,753],{"class":614},[609,56897,15941],{"class":618},[609,56899,641],{"class":614},[609,56901,56902,56904],{"class":611,"line":701},[609,56903,829],{"class":614},[609,56905,56906],{"class":618},"Text3D\n",[609,56908,56909,56912,56914,56916,56918],{"class":611,"line":711},[609,56910,56911],{"class":622},"        text",[609,56913,629],{"class":614},[609,56915,632],{"class":614},[609,56917,11378],{"class":635},[609,56919,2991],{"class":614},[609,56921,56922,56925,56927,56929,56932],{"class":611,"line":717},[609,56923,56924],{"class":622},"        font",[609,56926,629],{"class":614},[609,56928,632],{"class":614},[609,56930,56931],{"class":635},"/fonts/FiraCodeRegular.json",[609,56933,2991],{"class":614},[609,56935,56936],{"class":611,"line":727},[609,56937,48683],{"class":614},[609,56939,56940,56942,56944],{"class":611,"line":750},[609,56941,840],{"class":614},[609,56943,853],{"class":618},[609,56945,759],{"class":614},[609,56947,56948,56950,56952],{"class":611,"line":762},[609,56949,861],{"class":614},[609,56951,433],{"class":618},[609,56953,641],{"class":614},[609,56955,56956,56958,56960],{"class":611,"line":772},[609,56957,871],{"class":614},[609,56959,15941],{"class":618},[609,56961,641],{"class":614},[609,56963,56964,56966,56968],{"class":611,"line":777},[609,56965,881],{"class":614},[609,56967,733],{"class":618},[609,56969,641],{"class":614},[609,56971,56972,56974,56976],{"class":611,"line":803},[609,56973,704],{"class":614},[609,56975,722],{"class":618},[609,56977,641],{"class":614},[586,56979,56980,56981,56984,56985,56987,56988,32965,56990,56992],{},"Notice that you need to pass the ",[590,56982,56983],{},"\u003CTresMeshNormalMaterial />"," component as a child of the ",[590,56986,56843],{}," component. This is because ",[590,56989,56843],{},[590,56991,5303],{}," component, so it needs a material. The geometry is created automatically. Also you can pass the text as a slot or as a prop like this:",[598,56994,56996],{"className":600,"code":56995,"language":605,"meta":548,"style":548},"\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CSuspense>\n      \u003CText3D font=\"/fonts/FiraCodeRegular.json\">\n        TresJS\n        \u003CTresMeshNormalMaterial />\n      \u003C/Text3D>\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n",[590,56997,56998,57006,57014,57022,57041,57046,57054,57062,57070,57078],{"__ignoreMap":548},[609,56999,57000,57002,57004],{"class":611,"line":549},[609,57001,615],{"class":614},[609,57003,722],{"class":618},[609,57005,641],{"class":614},[609,57007,57008,57010,57012],{"class":611,"line":550},[609,57009,730],{"class":614},[609,57011,733],{"class":618},[609,57013,641],{"class":614},[609,57015,57016,57018,57020],{"class":611,"line":680},[609,57017,753],{"class":614},[609,57019,15941],{"class":618},[609,57021,641],{"class":614},[609,57023,57024,57026,57028,57031,57033,57035,57037,57039],{"class":611,"line":701},[609,57025,829],{"class":614},[609,57027,433],{"class":618},[609,57029,57030],{"class":622}," font",[609,57032,629],{"class":614},[609,57034,632],{"class":614},[609,57036,56931],{"class":635},[609,57038,632],{"class":614},[609,57040,641],{"class":614},[609,57042,57043],{"class":611,"line":711},[609,57044,57045],{"class":655},"        TresJS\n",[609,57047,57048,57050,57052],{"class":611,"line":717},[609,57049,840],{"class":614},[609,57051,853],{"class":618},[609,57053,759],{"class":614},[609,57055,57056,57058,57060],{"class":611,"line":727},[609,57057,861],{"class":614},[609,57059,433],{"class":618},[609,57061,641],{"class":614},[609,57063,57064,57066,57068],{"class":611,"line":750},[609,57065,871],{"class":614},[609,57067,15941],{"class":618},[609,57069,641],{"class":614},[609,57071,57072,57074,57076],{"class":611,"line":762},[609,57073,881],{"class":614},[609,57075,733],{"class":618},[609,57077,641],{"class":614},[609,57079,57080,57082,57084],{"class":611,"line":772},[609,57081,704],{"class":614},[609,57083,722],{"class":618},[609,57085,641],{"class":614},[586,57087,57088],{},"In addition, you can use the power of Vue to add reactivity, but you need to apply the needUpdates prop, for example you can create a reactive value, apply a v-model and make the bound, the Text3D component will update",[598,57090,57092],{"className":600,"code":57091,"language":605,"meta":548,"style":548},"\u003Ctemplate>\n  \u003Cinput v-model=\"myReactiveText\" />\n  \u003CTresCanvas>\n    \u003CSuspense>\n      \u003CText3D\n        :text=\"myReactiveText\"\n        font=\"/fonts/FiraCodeRegular.json\"\n        center\n        need-updates\n      />\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n",[590,57093,57094,57102,57123,57131,57139,57145,57159,57171,57175,57180,57184,57192,57200],{"__ignoreMap":548},[609,57095,57096,57098,57100],{"class":611,"line":549},[609,57097,615],{"class":614},[609,57099,722],{"class":618},[609,57101,641],{"class":614},[609,57103,57104,57106,57109,57112,57114,57116,57119,57121],{"class":611,"line":550},[609,57105,730],{"class":614},[609,57107,57108],{"class":618},"input",[609,57110,57111],{"class":622}," v-model",[609,57113,629],{"class":614},[609,57115,632],{"class":614},[609,57117,57118],{"class":655},"myReactiveText",[609,57120,632],{"class":614},[609,57122,759],{"class":614},[609,57124,57125,57127,57129],{"class":611,"line":680},[609,57126,730],{"class":614},[609,57128,733],{"class":618},[609,57130,641],{"class":614},[609,57132,57133,57135,57137],{"class":611,"line":701},[609,57134,753],{"class":614},[609,57136,15941],{"class":618},[609,57138,641],{"class":614},[609,57140,57141,57143],{"class":611,"line":711},[609,57142,829],{"class":614},[609,57144,56906],{"class":618},[609,57146,57147,57149,57151,57153,57155,57157],{"class":611,"line":717},[609,57148,2997],{"class":614},[609,57150,23872],{"class":622},[609,57152,629],{"class":614},[609,57154,632],{"class":614},[609,57156,57118],{"class":655},[609,57158,2991],{"class":614},[609,57160,57161,57163,57165,57167,57169],{"class":611,"line":727},[609,57162,56924],{"class":622},[609,57164,629],{"class":614},[609,57166,632],{"class":614},[609,57168,56931],{"class":635},[609,57170,2991],{"class":614},[609,57172,57173],{"class":611,"line":750},[609,57174,48602],{"class":622},[609,57176,57177],{"class":611,"line":762},[609,57178,57179],{"class":622},"        need-updates\n",[609,57181,57182],{"class":611,"line":772},[609,57183,3054],{"class":614},[609,57185,57186,57188,57190],{"class":611,"line":777},[609,57187,871],{"class":614},[609,57189,15941],{"class":618},[609,57191,641],{"class":614},[609,57193,57194,57196,57198],{"class":611,"line":803},[609,57195,881],{"class":614},[609,57197,733],{"class":618},[609,57199,641],{"class":614},[609,57201,57202,57204,57206],{"class":611,"line":603},[609,57203,704],{"class":614},[609,57205,722],{"class":618},[609,57207,641],{"class":614},[476,57209,898],{"id":897},[903,57211,57212,57222],{},[906,57213,57214],{},[909,57215,57216,57218,57220],{},[912,57217,914],{"align":973},[912,57219,917],{"align":973},[912,57221,920],{},[922,57223,57224,57235,57246,57257,57268,57280,57292,57304,57317,57329,57341,57352],{},[909,57225,57226,57230,57233],{},[927,57227,57228],{"align":973},[1677,57229,56860],{},[927,57231,57232],{"align":973},"The font data or font name to use for the text.",[927,57234],{},[909,57236,57237,57241,57244],{},[927,57238,57239],{"align":973},[1677,57240,23872],{},[927,57242,57243],{"align":973},"The text to display.",[927,57245],{},[909,57247,57248,57252,57255],{},[927,57249,57250],{"align":973},[1677,57251,11182],{},[927,57253,57254],{"align":973},"The size of the text.",[927,57256,1517],{},[909,57258,57259,57263,57266],{},[927,57260,57261],{"align":973},[1677,57262,34955],{},[927,57264,57265],{"align":973},"The height of the text.",[927,57267,9041],{},[909,57269,57270,57275,57278],{},[927,57271,57272],{"align":973},[1677,57273,57274],{},"curveSegments",[927,57276,57277],{"align":973},"The number of curve segments to use when generating the text geometry.",[927,57279,2400],{},[909,57281,57282,57287,57290],{},[927,57283,57284],{"align":973},[1677,57285,57286],{},"bevelEnabled",[927,57288,57289],{"align":973},"A flag indicating whether beveling should be enabled for the text.",[927,57291,937],{},[909,57293,57294,57299,57302],{},[927,57295,57296],{"align":973},[1677,57297,57298],{},"bevelThickness",[927,57300,57301],{"align":973},"The thickness of the beveled edge on the text.",[927,57303,4896],{},[909,57305,57306,57311,57314],{},[927,57307,57308],{"align":973},[1677,57309,57310],{},"bevelSize",[927,57312,57313],{"align":973},"The size of the beveled edge on the text.",[927,57315,57316],{},"0.02",[909,57318,57319,57324,57327],{},[927,57320,57321],{"align":973},[1677,57322,57323],{},"bevelOffset",[927,57325,57326],{"align":973},"The offset of the beveled edge on the text.",[927,57328,941],{},[909,57330,57331,57336,57339],{},[927,57332,57333],{"align":973},[1677,57334,57335],{},"bevelSegments",[927,57337,57338],{"align":973},"The number of bevel segments to use when generating the text geometry.",[927,57340,3494],{},[909,57342,57343,57347,57350],{},[927,57344,57345],{"align":973},[1677,57346,40361],{},[927,57348,57349],{"align":973},"To center the text",[927,57351,947],{},[909,57353,57354,57359,57362],{},[927,57355,57356],{"align":973},[1677,57357,57358],{},"needUpdates",[927,57360,57361],{"align":973},"This props add reactivity",[927,57363,947],{},[1303,57365,57366],{},"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 .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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}",{"title":548,"searchDepth":549,"depth":550,"links":57368},[57369,57370],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},"Render text in 3D using TextGeometry.",{},{"title":433,"description":57371},"t6bahOskD-ojOxftya8MrETrI6LWNTRBawqfzv7mouA",[57376,57951,58260,58668,59773,60411,61059],{"id":57377,"title":443,"body":57378,"description":57947,"extension":563,"links":564,"meta":57948,"navigation":566,"path":444,"seo":57949,"stem":445,"__hash__":57950},"docs/2.api/miscellaneous/bounds.md",{"type":473,"value":57379,"toc":57940},[57380,57385,57392,57410,57412,57779,57781,57910,57913,57927,57931,57937],[2562,57381,57382],{},[57383,57384],"miscellaneous-bounds",{},[586,57386,57387,57388,57391],{},"Calculates a boundary box and centers the camera accordingly. Its ",[590,57389,57390],{},"lookAt"," method accepts a target to look at imperatively e.g., after a click.",[2050,57393,57394,57396],{},[586,57395,44387],{},[598,57397,57398],{"className":600,"code":2075,"language":605,"meta":548,"style":548},[590,57399,57400],{"__ignoreMap":548},[609,57401,57402,57404,57406,57408],{"class":611,"line":549},[609,57403,615],{"class":614},[609,57405,767],{"class":618},[609,57407,1872],{"class":622},[609,57409,759],{"class":614},[476,57411,15],{"id":596},[598,57413,57416],{"className":600,"code":57414,"highlights":57415,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Bounds, OrbitControls } from '@tresjs/cientos'\nimport { shallowRef } from 'vue'\n\nconst boundsRef = shallowRef()\nconst objectRef = shallowRef()\n\nfunction focusObject() {\n  boundsRef.value?.instance.lookAt(objectRef.value)\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 2, 5]\" />\n    \u003COrbitControls make-default />\n    \u003CBounds ref=\"boundsRef\" clip use-mounted :offset=\"0.75\">\n      \u003CTresMesh ref=\"objectRef\" @click=\"(e) => focusObject()\">\n        \u003CTresBoxGeometry />\n        \u003CTresMeshNormalMaterial />\n      \u003C/TresMesh>\n    \u003C/Bounds>\n  \u003C/TresCanvas>\n\u003C/template>\n",[680,717,727,762,772,777,604,2994],[590,57417,57418,57438,57456,57480,57498,57502,57516,57530,57534,57546,57575,57580,57588,57592,57600,57608,57640,57650,57688,57730,57738,57746,57754,57763,57771],{"__ignoreMap":548},[609,57419,57420,57422,57424,57426,57428,57430,57432,57434,57436],{"class":611,"line":549},[609,57421,615],{"class":614},[609,57423,619],{"class":618},[609,57425,623],{"class":622},[609,57427,626],{"class":622},[609,57429,629],{"class":614},[609,57431,632],{"class":614},[609,57433,636],{"class":635},[609,57435,632],{"class":614},[609,57437,641],{"class":614},[609,57439,57440,57442,57444,57446,57448,57450,57452,57454],{"class":611,"line":550},[609,57441,649],{"class":648},[609,57443,652],{"class":614},[609,57445,687],{"class":655},[609,57447,665],{"class":614},[609,57449,668],{"class":648},[609,57451,671],{"class":614},[609,57453,696],{"class":635},[609,57455,677],{"class":614},[609,57457,57459,57461,57463,57466,57468,57470,57472,57474,57476,57478],{"class":57458,"line":680},[611,645],[609,57460,649],{"class":648},[609,57462,652],{"class":614},[609,57464,57465],{"class":655}," Bounds",[609,57467,659],{"class":614},[609,57469,662],{"class":655},[609,57471,665],{"class":614},[609,57473,668],{"class":648},[609,57475,671],{"class":614},[609,57477,674],{"class":635},[609,57479,677],{"class":614},[609,57481,57482,57484,57486,57488,57490,57492,57494,57496],{"class":611,"line":701},[609,57483,649],{"class":648},[609,57485,652],{"class":614},[609,57487,7909],{"class":655},[609,57489,665],{"class":614},[609,57491,668],{"class":648},[609,57493,671],{"class":614},[609,57495,605],{"class":635},[609,57497,677],{"class":614},[609,57499,57500],{"class":611,"line":711},[609,57501,714],{"emptyLinePlaceholder":566},[609,57503,57505,57507,57510,57512,57514],{"class":57504,"line":717},[611,645],[609,57506,2693],{"class":622},[609,57508,57509],{"class":655}," boundsRef ",[609,57511,629],{"class":614},[609,57513,7909],{"class":2804},[609,57515,2850],{"class":655},[609,57517,57519,57521,57524,57526,57528],{"class":57518,"line":727},[611,645],[609,57520,2693],{"class":622},[609,57522,57523],{"class":655}," objectRef ",[609,57525,629],{"class":614},[609,57527,7909],{"class":2804},[609,57529,2850],{"class":655},[609,57531,57532],{"class":611,"line":750},[609,57533,714],{"emptyLinePlaceholder":566},[609,57535,57537,57539,57542,57544],{"class":57536,"line":762},[611,645],[609,57538,8445],{"class":622},[609,57540,57541],{"class":2804}," focusObject",[609,57543,8451],{"class":614},[609,57545,1180],{"class":614},[609,57547,57549,57552,57554,57556,57558,57560,57562,57564,57566,57569,57571,57573],{"class":57548,"line":772},[611,645],[609,57550,57551],{"class":655},"  boundsRef",[609,57553,1122],{"class":614},[609,57555,5500],{"class":655},[609,57557,11531],{"class":614},[609,57559,21491],{"class":655},[609,57561,1122],{"class":614},[609,57563,57390],{"class":2804},[609,57565,2974],{"class":618},[609,57567,57568],{"class":655},"objectRef",[609,57570,1122],{"class":614},[609,57572,5500],{"class":655},[609,57574,5543],{"class":618},[609,57576,57578],{"class":57577,"line":777},[611,645],[609,57579,1301],{"class":614},[609,57581,57582,57584,57586],{"class":611,"line":803},[609,57583,704],{"class":614},[609,57585,619],{"class":618},[609,57587,641],{"class":614},[609,57589,57590],{"class":611,"line":603},[609,57591,714],{"emptyLinePlaceholder":566},[609,57593,57594,57596,57598],{"class":611,"line":826},[609,57595,615],{"class":614},[609,57597,722],{"class":618},[609,57599,641],{"class":614},[609,57601,57602,57604,57606],{"class":611,"line":837},[609,57603,730],{"class":614},[609,57605,733],{"class":618},[609,57607,641],{"class":614},[609,57609,57610,57612,57614,57616,57618,57620,57622,57624,57626,57628,57630,57632,57634,57636,57638],{"class":611,"line":848},[609,57611,753],{"class":614},[609,57613,756],{"class":618},[609,57615,785],{"class":614},[609,57617,1463],{"class":622},[609,57619,629],{"class":614},[609,57621,632],{"class":614},[609,57623,1470],{"class":614},[609,57625,941],{"class":795},[609,57627,1475],{"class":614},[609,57629,796],{"class":795},[609,57631,1475],{"class":614},[609,57633,2400],{"class":795},[609,57635,1485],{"class":614},[609,57637,632],{"class":614},[609,57639,759],{"class":614},[609,57641,57642,57644,57646,57648],{"class":611,"line":858},[609,57643,753],{"class":614},[609,57645,767],{"class":618},[609,57647,1872],{"class":622},[609,57649,759],{"class":614},[609,57651,57653,57655,57657,57659,57661,57663,57666,57668,57671,57674,57676,57678,57680,57682,57684,57686],{"class":57652,"line":604},[611,645],[609,57654,753],{"class":614},[609,57656,443],{"class":618},[609,57658,5435],{"class":622},[609,57660,629],{"class":614},[609,57662,632],{"class":614},[609,57664,57665],{"class":635},"boundsRef",[609,57667,632],{"class":614},[609,57669,57670],{"class":622}," clip",[609,57672,57673],{"class":622}," use-mounted",[609,57675,785],{"class":614},[609,57677,34499],{"class":622},[609,57679,629],{"class":614},[609,57681,632],{"class":614},[609,57683,4649],{"class":795},[609,57685,632],{"class":614},[609,57687,641],{"class":614},[609,57689,57690,57692,57694,57696,57698,57700,57702,57704,57706,57708,57710,57712,57714,57717,57719,57722,57724,57726,57728],{"class":611,"line":878},[609,57691,829],{"class":614},[609,57693,832],{"class":618},[609,57695,5435],{"class":622},[609,57697,629],{"class":614},[609,57699,632],{"class":614},[609,57701,57568],{"class":635},[609,57703,632],{"class":614},[609,57705,7760],{"class":614},[609,57707,32130],{"class":622},[609,57709,629],{"class":614},[609,57711,632],{"class":614},[609,57713,2974],{"class":614},[609,57715,57716],{"class":5499},"e",[609,57718,2752],{"class":614},[609,57720,57721],{"class":622},"=>",[609,57723,57541],{"class":2804},[609,57725,8451],{"class":614},[609,57727,632],{"class":614},[609,57729,641],{"class":614},[609,57731,57732,57734,57736],{"class":611,"line":888},[609,57733,840],{"class":614},[609,57735,843],{"class":618},[609,57737,759],{"class":614},[609,57739,57740,57742,57744],{"class":611,"line":2956},[609,57741,840],{"class":614},[609,57743,853],{"class":618},[609,57745,759],{"class":614},[609,57747,57748,57750,57752],{"class":611,"line":2964},[609,57749,861],{"class":614},[609,57751,832],{"class":618},[609,57753,641],{"class":614},[609,57755,57757,57759,57761],{"class":57756,"line":2994},[611,645],[609,57758,871],{"class":614},[609,57760,443],{"class":618},[609,57762,641],{"class":614},[609,57764,57765,57767,57769],{"class":611,"line":3011},[609,57766,881],{"class":614},[609,57768,733],{"class":618},[609,57770,641],{"class":614},[609,57772,57773,57775,57777],{"class":611,"line":3026},[609,57774,704],{"class":614},[609,57776,722],{"class":618},[609,57778,641],{"class":614},[476,57780,898],{"id":897},[903,57782,57783,57793],{},[906,57784,57785],{},[909,57786,57787,57789,57791],{},[912,57788,3122],{"align":973},[912,57790,917],{"align":973},[912,57792,920],{},[922,57794,57795,57812,57832,57849,57869,57890],{},[909,57796,57797,57802,57808],{},[927,57798,57799],{"align":973},[590,57800,57801],{},"duration",[927,57803,57804,57805,57807],{"align":973},"Duration of the ",[590,57806,57390],{}," animation in seconds",[927,57809,57810],{},[590,57811,7089],{},[909,57813,57814,57818,57828],{},[927,57815,57816],{"align":973},[590,57817,34499],{},[927,57819,57820,57821,57823,57824,11099,57826],{"align":973},"Additional distance from the target when using ",[590,57822,57390],{}," with a ",[590,57825,2578],{},[590,57827,2582],{},[927,57829,57830],{},[590,57831,9041],{},[909,57833,57834,57839,57845],{},[927,57835,57836],{"align":973},[590,57837,57838],{},"useResize",[927,57840,57841,57842,57844],{"align":973},"Whether to re",[590,57843,57390],{}," the last target when the screen is resized",[927,57846,57847],{},[590,57848,947],{},[909,57850,57851,57856,57865],{},[927,57852,57853],{"align":973},[590,57854,57855],{},"useMounted",[927,57857,57858,57859,57861,57862,57864],{"align":973},"Whether to ",[590,57860,57390],{}," the ",[590,57863,443],{}," object when the component is mounts",[927,57866,57867],{},[590,57868,947],{},[909,57870,57871,57876,57886],{},[927,57872,57873],{"align":973},[590,57874,57875],{},"clip",[927,57877,57878,57879,4435,57881,57883,57884],{"align":973},"Whether to adjust the camera's ",[590,57880,37216],{},[590,57882,34969],{}," settings when using ",[590,57885,57390],{},[927,57887,57888],{},[590,57889,947],{},[909,57891,57892,57897,57907],{},[927,57893,57894],{"align":973},[590,57895,57896],{},"easing",[927,57898,57899,57900,57903,57904],{"align":973},"Animation's easing function. ",[590,57901,57902],{},"t"," and the returned value should be in the interval ",[590,57905,57906],{},"[0, 1]",[927,57908,57909],{},"Cubic ease out",[476,57911,57390],{"id":57912},"lookat",[586,57914,57915,45678,57918,57920,57921,1475,57923,11099,57925,1122],{},[590,57916,57917],{},"\u003CBounds />",[590,57919,57390],{}," points the camera at its first argument: an ",[590,57922,2582],{},[590,57924,2578],{},[590,57926,3176],{},[7477,57928,57930],{"id":57929},"method-signatures","Method Signatures",[598,57932,57935],{"className":57933,"code":57934,"language":23872},[23870],"/**\n * Calculates a boundary box around an `Object3D` and centers the camera accordingly.\n */\nlookAt(object: Object3D): void\n\n/**\n * Calculates a boundary box around an `Object3D` and centers the camera accordingly and animates the camera's `up` vector.\n */\nlookAt(object: Object3D, up: VectorFlexibleParams): void\n\n/**\n * Centers the camera's viewport on a `Box3`.\n */\nlookAt(box3: Box3): void\n\n/**\n * Centers the camera's viewport on a `Box3` and animates the camera's `up` vector.\n */\nlookAt(box3: Box3, up: VectorFlexibleParams): void\n\n/**\n * Look at a `Vector3`.\n */\nlookAt(target: VectorFlexibleParams): void\n\n/**\n * Look at a `Vector3`, if provided. Move the camera to `position`.\n */\nlookAt(target: VectorFlexibleParams | undefined | null, position: VectorFlexibleParams): void\n\n/**\n * Look at a `Vector3`, if provided. Move the camera to `position` and animate the camera's `up` vector.\n */\nlookAt(target: VectorFlexibleParams | undefined | null, position: VectorFlexibleParams, up: VectorFlexibleParams): void\n\n/**\n * Rerun `lookAt` using the prior arguments. If `lookAt` has never been called, uses the `Bounds` object.\n */\nlookAt(): void\n",[590,57936,57934],{"__ignoreMap":548},[1303,57938,57939],{},"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 .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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .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}",{"title":548,"searchDepth":549,"depth":550,"links":57941},[57942,57943,57944],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},{"id":57912,"depth":550,"text":57390,"children":57945},[57946],{"id":57929,"depth":680,"text":57930},"Calculate boundary box and center camera accordingly.",{},{"title":443,"description":57947},"99p1FD8mbl4hP9wZB60es2RXMg_34kRJyloKHcDBk80",{"id":57952,"title":447,"body":57953,"description":58256,"extension":563,"links":564,"meta":58257,"navigation":566,"path":448,"seo":58258,"stem":449,"__hash__":58259},"docs/2.api/miscellaneous/global-audio.md",{"type":473,"value":57954,"toc":58251},[57955,57963,57970,57972,58124,58130,58132,58225,58227,58249],[586,57956,2257,57957,3279,57959,57962],{},[590,57958,2260],{},[590,57960,57961],{},"\u003CGlobalAudio />"," component that serves to easily add a global sound to your scene.",[586,57964,23877,57965],{},[1116,57966,57969],{"href":57967,"rel":57968},"https://threejs.org/docs/index.html?q=audio#api/en/audio/Audio",[1120],"Audio",[476,57971,15],{"id":596},[598,57973,57976],{"className":600,"code":57974,"highlights":57975,"language":605,"meta":548,"style":548},"\u003Cscript setup>\nimport { TresCanvas } from '@tresjs/core'\nimport { GlobalAudio } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[0, 0, 7.5]\" />\n    \u003CGlobalAudio :src=\"exampleAudio\" />\n  \u003C/TresCanvas>\n\u003C/template>\n",[680,762],[590,57977,57978,57988,58006,58026,58034,58038,58046,58054,58086,58108,58116],{"__ignoreMap":548},[609,57979,57980,57982,57984,57986],{"class":611,"line":549},[609,57981,615],{"class":614},[609,57983,619],{"class":618},[609,57985,623],{"class":622},[609,57987,641],{"class":614},[609,57989,57990,57992,57994,57996,57998,58000,58002,58004],{"class":611,"line":550},[609,57991,649],{"class":648},[609,57993,652],{"class":614},[609,57995,687],{"class":655},[609,57997,665],{"class":614},[609,57999,668],{"class":648},[609,58001,671],{"class":614},[609,58003,696],{"class":635},[609,58005,677],{"class":614},[609,58007,58009,58011,58013,58016,58018,58020,58022,58024],{"class":58008,"line":680},[611,645],[609,58010,649],{"class":648},[609,58012,652],{"class":614},[609,58014,58015],{"class":655}," GlobalAudio",[609,58017,665],{"class":614},[609,58019,668],{"class":648},[609,58021,671],{"class":614},[609,58023,674],{"class":635},[609,58025,677],{"class":614},[609,58027,58028,58030,58032],{"class":611,"line":701},[609,58029,704],{"class":614},[609,58031,619],{"class":618},[609,58033,641],{"class":614},[609,58035,58036],{"class":611,"line":711},[609,58037,714],{"emptyLinePlaceholder":566},[609,58039,58040,58042,58044],{"class":611,"line":717},[609,58041,615],{"class":614},[609,58043,722],{"class":618},[609,58045,641],{"class":614},[609,58047,58048,58050,58052],{"class":611,"line":727},[609,58049,730],{"class":614},[609,58051,733],{"class":618},[609,58053,641],{"class":614},[609,58055,58056,58058,58060,58062,58064,58066,58068,58070,58072,58074,58076,58078,58080,58082,58084],{"class":611,"line":750},[609,58057,753],{"class":614},[609,58059,756],{"class":618},[609,58061,785],{"class":614},[609,58063,1463],{"class":622},[609,58065,629],{"class":614},[609,58067,632],{"class":614},[609,58069,1470],{"class":614},[609,58071,941],{"class":795},[609,58073,1475],{"class":614},[609,58075,941],{"class":795},[609,58077,1475],{"class":614},[609,58079,4689],{"class":795},[609,58081,1485],{"class":614},[609,58083,632],{"class":614},[609,58085,759],{"class":614},[609,58087,58089,58091,58093,58095,58097,58099,58101,58104,58106],{"class":58088,"line":762},[611,645],[609,58090,753],{"class":614},[609,58092,447],{"class":618},[609,58094,785],{"class":614},[609,58096,19056],{"class":622},[609,58098,629],{"class":614},[609,58100,632],{"class":614},[609,58102,58103],{"class":655},"exampleAudio",[609,58105,632],{"class":614},[609,58107,759],{"class":614},[609,58109,58110,58112,58114],{"class":611,"line":772},[609,58111,881],{"class":614},[609,58113,733],{"class":618},[609,58115,641],{"class":614},[609,58117,58118,58120,58122],{"class":611,"line":777},[609,58119,704],{"class":614},[609,58121,722],{"class":618},[609,58123,641],{"class":614},[586,58125,58126,58127,58129],{},"*The ",[590,58128,19056],{}," prop is required",[476,58131,898],{"id":897},[903,58133,58134,58144],{},[906,58135,58136],{},[909,58137,58138,58140,58142],{},[912,58139,914],{"align":973},[912,58141,917],{"align":973},[912,58143,920],{},[922,58145,58146,58157,58172,58184,58197,58211],{},[909,58147,58148,58152,58155],{},[927,58149,58150],{"align":973},[590,58151,19056],{},[927,58153,58154],{"align":973},"Path to your audio file",[927,58156],{},[909,58158,58159,58164,58167],{},[927,58160,58161],{"align":973},[590,58162,58163],{},"playTrigger",[927,58165,58166],{"align":973},"Id of the DOM element that triggers the play/pause state",[927,58168,58169],{},[590,58170,58171],{},"renderer.domElement",[909,58173,58174,58179,58182],{},[927,58175,58176],{"align":973},[590,58177,58178],{},"stopTrigger",[927,58180,58181],{"align":973},"Id of the DOM element that triggers the stop state",[927,58183],{},[909,58185,58186,58190,58193],{},[927,58187,58188],{"align":973},[590,58189,20504],{},[927,58191,58192],{"align":973},"If the audio must be replayed when ends",[927,58194,58195],{},[590,58196,947],{},[909,58198,58199,58204,58207],{},[927,58200,58201],{"align":973},[590,58202,58203],{},"volume",[927,58205,58206],{"align":973},"Volume of the audio",[927,58208,58209],{},[590,58210,1517],{},[909,58212,58213,58218,58221],{},[927,58214,58215],{"align":973},[590,58216,58217],{},"playbackRate",[927,58219,58220],{"align":973},"PlaybackRate of the audio",[927,58222,58223],{},[590,58224,1897],{},[476,58226,7746],{"id":7745},[903,58228,58229,58237],{},[906,58230,58231],{},[909,58232,58233,58235],{},[912,58234,7811],{"align":973},[912,58236,917],{"align":973},[922,58238,58239],{},[909,58240,58241,58246],{},[927,58242,58243],{"align":973},[590,58244,58245],{},"isPlaying",[927,58247,58248],{"align":973},"Dispatched when the Audio change its state (play, pause or stop)",[1303,58250,7845],{},{"title":548,"searchDepth":549,"depth":550,"links":58252},[58253,58254,58255],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},{"id":7745,"depth":550,"text":7746},"Add global sound to your scene.",{},{"title":447,"description":58256},"XaoiVKl16tz4uOX0ZskSCuPQUgYB0CYUZjEEuh4q_uU",{"id":58261,"title":451,"body":58262,"description":58664,"extension":563,"links":564,"meta":58665,"navigation":566,"path":452,"seo":58666,"stem":453,"__hash__":58667},"docs/2.api/miscellaneous/mouse-parallax.md",{"type":473,"value":58263,"toc":58660},[58264,58269,58281,58283,58289,58297,58306,58311,58597,58599,58658],[580,58265,58266],{},[58267,58268],"miscellaneous-mouse-parallax",{},[586,58270,58271,58274,58275,58280],{},[590,58272,58273],{},"\u003CMouseParallax />"," is a component that allows you to easily create a ",[1116,58276,58279],{"href":58277,"rel":58278},"https://en.wikipedia.org/wiki/Parallax",[1120],"parallax"," effect. The camera will update automatically according to the mouse position.",[476,58282,15],{"id":596},[586,58284,58285,58286,58288],{},"You only need to import and add it to your template as ",[590,58287,58273],{},". Additionally, you can pass the following props:",[586,58290,58291,58293,58294,1122],{},[590,58292,23710],{}," is a number to increase the movement range of the camera. This could be an array of two values corresponding to the x and y values, in that order: ",[590,58295,58296],{},":factor=[x,y]",[586,58298,58299,58302,58303,1122],{},[590,58300,58301],{},"ease"," is a number that smooths the movement. This could be an array of two values corresponding to the x and y values, in that order: ",[590,58304,58305],{},":ease=[x,y]",[586,58307,58308,58310],{},[590,58309,11168],{}," is a boolean that enables movement based on the position of the mouse on the canvas rather than the window.",[598,58312,58315],{"className":600,"code":58313,"highlights":58314,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { MouseParallax, TorusKnot } from \"@tresjs/cientos\";\nimport { TresCanvas } from \"@tresjs/core\";\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#82DBC5\">\n    \u003CTresPerspectiveCamera :position=\"[0, 0, 7.5]\" :fov=\"75\" />\n    \u003CTorusKnot>\n      \u003CTresMeshToonMaterial color=\"orange\" />\n    \u003C/TorusKnot>\n    \u003CMouseParallax :factor=\"5\" :ease=\"[3, 0.1]\" />\n    \u003CTresAmbientLight />\n    \u003CTresDirectionalLight :position=\"[0, 2, 4]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n",[550,803],[590,58316,58317,58337,58363,58383,58391,58395,58403,58421,58466,58474,58492,58500,58541,58549,58581,58589],{"__ignoreMap":548},[609,58318,58319,58321,58323,58325,58327,58329,58331,58333,58335],{"class":611,"line":549},[609,58320,615],{"class":614},[609,58322,619],{"class":618},[609,58324,623],{"class":622},[609,58326,626],{"class":622},[609,58328,629],{"class":614},[609,58330,632],{"class":614},[609,58332,636],{"class":635},[609,58334,632],{"class":614},[609,58336,641],{"class":614},[609,58338,58340,58342,58344,58347,58349,58351,58353,58355,58357,58359,58361],{"class":58339,"line":550},[611,645],[609,58341,649],{"class":648},[609,58343,652],{"class":614},[609,58345,58346],{"class":655}," MouseParallax",[609,58348,659],{"class":614},[609,58350,34621],{"class":655},[609,58352,665],{"class":614},[609,58354,668],{"class":648},[609,58356,3326],{"class":614},[609,58358,674],{"class":635},[609,58360,632],{"class":614},[609,58362,3333],{"class":614},[609,58364,58365,58367,58369,58371,58373,58375,58377,58379,58381],{"class":611,"line":680},[609,58366,649],{"class":648},[609,58368,652],{"class":614},[609,58370,687],{"class":655},[609,58372,665],{"class":614},[609,58374,668],{"class":648},[609,58376,3326],{"class":614},[609,58378,696],{"class":635},[609,58380,632],{"class":614},[609,58382,3333],{"class":614},[609,58384,58385,58387,58389],{"class":611,"line":701},[609,58386,704],{"class":614},[609,58388,619],{"class":618},[609,58390,641],{"class":614},[609,58392,58393],{"class":611,"line":711},[609,58394,714],{"emptyLinePlaceholder":566},[609,58396,58397,58399,58401],{"class":611,"line":717},[609,58398,615],{"class":614},[609,58400,722],{"class":618},[609,58402,641],{"class":614},[609,58404,58405,58407,58409,58411,58413,58415,58417,58419],{"class":611,"line":727},[609,58406,730],{"class":614},[609,58408,733],{"class":618},[609,58410,736],{"class":622},[609,58412,629],{"class":614},[609,58414,632],{"class":614},[609,58416,5044],{"class":635},[609,58418,632],{"class":614},[609,58420,641],{"class":614},[609,58422,58423,58425,58427,58429,58431,58433,58435,58437,58439,58441,58443,58445,58447,58449,58451,58453,58455,58457,58459,58462,58464],{"class":611,"line":750},[609,58424,753],{"class":614},[609,58426,756],{"class":618},[609,58428,785],{"class":614},[609,58430,1463],{"class":622},[609,58432,629],{"class":614},[609,58434,632],{"class":614},[609,58436,1470],{"class":614},[609,58438,941],{"class":795},[609,58440,1475],{"class":614},[609,58442,941],{"class":795},[609,58444,1475],{"class":614},[609,58446,4689],{"class":795},[609,58448,1485],{"class":614},[609,58450,632],{"class":614},[609,58452,785],{"class":614},[609,58454,25990],{"class":622},[609,58456,629],{"class":614},[609,58458,632],{"class":614},[609,58460,58461],{"class":795},"75",[609,58463,632],{"class":614},[609,58465,759],{"class":614},[609,58467,58468,58470,58472],{"class":611,"line":762},[609,58469,753],{"class":614},[609,58471,29583],{"class":618},[609,58473,641],{"class":614},[609,58475,58476,58478,58480,58482,58484,58486,58488,58490],{"class":611,"line":772},[609,58477,829],{"class":614},[609,58479,6733],{"class":618},[609,58481,3982],{"class":622},[609,58483,629],{"class":614},[609,58485,632],{"class":614},[609,58487,6742],{"class":635},[609,58489,632],{"class":614},[609,58491,759],{"class":614},[609,58493,58494,58496,58498],{"class":611,"line":777},[609,58495,871],{"class":614},[609,58497,29583],{"class":618},[609,58499,641],{"class":614},[609,58501,58503,58505,58507,58509,58511,58513,58515,58517,58519,58521,58523,58525,58527,58529,58531,58533,58535,58537,58539],{"class":58502,"line":803},[611,645],[609,58504,753],{"class":614},[609,58506,451],{"class":618},[609,58508,785],{"class":614},[609,58510,23710],{"class":622},[609,58512,629],{"class":614},[609,58514,632],{"class":614},[609,58516,2400],{"class":795},[609,58518,632],{"class":614},[609,58520,785],{"class":614},[609,58522,58301],{"class":622},[609,58524,629],{"class":614},[609,58526,632],{"class":614},[609,58528,1470],{"class":614},[609,58530,4164],{"class":795},[609,58532,1475],{"class":614},[609,58534,2207],{"class":795},[609,58536,1485],{"class":614},[609,58538,632],{"class":614},[609,58540,759],{"class":614},[609,58542,58543,58545,58547],{"class":611,"line":603},[609,58544,753],{"class":614},[609,58546,3522],{"class":618},[609,58548,759],{"class":614},[609,58550,58551,58553,58555,58557,58559,58561,58563,58565,58567,58569,58571,58573,58575,58577,58579],{"class":611,"line":826},[609,58552,753],{"class":614},[609,58554,3543],{"class":618},[609,58556,785],{"class":614},[609,58558,1463],{"class":622},[609,58560,629],{"class":614},[609,58562,632],{"class":614},[609,58564,1470],{"class":614},[609,58566,941],{"class":795},[609,58568,1475],{"class":614},[609,58570,796],{"class":795},[609,58572,1475],{"class":614},[609,58574,3494],{"class":795},[609,58576,1485],{"class":614},[609,58578,632],{"class":614},[609,58580,759],{"class":614},[609,58582,58583,58585,58587],{"class":611,"line":837},[609,58584,881],{"class":614},[609,58586,733],{"class":618},[609,58588,641],{"class":614},[609,58590,58591,58593,58595],{"class":611,"line":848},[609,58592,704],{"class":614},[609,58594,722],{"class":618},[609,58596,641],{"class":614},[476,58598,898],{"id":897},[903,58600,58601,58611],{},[906,58602,58603],{},[909,58604,58605,58607,58609],{},[912,58606,914],{"align":973},[912,58608,917],{"align":973},[912,58610,920],{},[922,58612,58613,58625,58636,58647],{},[909,58614,58615,58620,58623],{},[927,58616,58617],{"align":973},[1677,58618,58619],{},"disabled",[927,58621,58622],{"align":973},"Enable or disable the effect",[927,58624,947],{},[909,58626,58627,58631,58634],{},[927,58628,58629],{"align":973},[1677,58630,23710],{},[927,58632,58633],{"align":973},"Increase the range of the parallax",[927,58635,51000],{},[909,58637,58638,58642,58645],{},[927,58639,58640],{"align":973},[1677,58641,58301],{},[927,58643,58644],{"align":973},"Increase the camera movement speed",[927,58646,2207],{},[909,58648,58649,58653,58656],{},[927,58650,58651],{"align":973},[1677,58652,11168],{},[927,58654,58655],{"align":973},"Whether the mouse coordinates are calculated from the element or the window",[927,58657,947],{},[1303,58659,1652],{},{"title":548,"searchDepth":549,"depth":550,"links":58661},[58662,58663],{"id":596,"depth":550,"text":15},{"id":897,"depth":550,"text":898},"Create parallax effects based on mouse movement.",{},{"title":451,"description":58664},"-wMRikeU1CMiiuet3URQZ7L0rwjhY5Q0pVMViyyOwK0",{"id":58669,"title":455,"body":58670,"description":59769,"extension":563,"links":564,"meta":59770,"navigation":566,"path":456,"seo":59771,"stem":457,"__hash__":59772},"docs/2.api/miscellaneous/positional-audio.md",{"type":473,"value":58671,"toc":59762},[58672,58677,58690,58700,58702,58717,58997,59025,59029,59034,59036,59230,59232,59304,59534,59730,59732,59759],[580,58673,58674],{},[58675,58676],"miscellaneous-positional-audio",{},[586,58678,2257,58679,55841,58681,58685,58686,58689],{},[590,58680,2260],{},[1116,58682,455],{"href":58683,"rel":58684},"https://threejs.org/docs/index.html?q=posi#api/en/audio/PositionalAudio",[1120],".\n",[590,58687,58688],{},"\u003CPositionalAudio>"," is an object specifically designed for controlling sounds in a scene graph space. This allows, for the simulation of various audio environments, creating a more immersive user experience.",[586,58691,58692,58694,58695,30508],{},[590,58693,58688],{}," includes a helper 🛠️ that allows you to view the directional cone of te audio. The helper is based on the ",[1116,58696,58699],{"href":58697,"rel":58698},"https://threejs.org/docs/#examples/en/helpers/PositionalAudioHelper",[1120],"PositionalAudioHelper",[476,58701,15],{"id":596},[586,58703,2257,58704,58706,58707,58709,58710,58712,58713,58716],{},[590,58705,58688],{}," component is very simple to set up and use, allowing you to bring your 3D scenes to life.  All you need to do is call the ",[590,58708,58688],{}," component and set the ",[590,58711,54788],{},". It must be wrapped around the ",[590,58714,58715],{},"\u003CSuspense>"," component to enable it to load your audio asynchronously. 💥",[598,58718,58721],{"className":600,"code":58719,"highlights":58720,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { Box, PositionalAudio } from '@tresjs/cientos'\nimport { onUnmounted, shallowRef } from 'vue'\n\nconst positionalAudioRef = shallowRef(null)\n\nonUnmounted(() => {\n  positionalAudioRef?.value?.dispose()\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CBox :args=\"[1, 1, 1]\">\n      \u003CTresMeshNormalMaterial />\n      \u003CSuspense>\n        \u003CPositionalAudio\n          ref=\"positionalAudioRef\"\n          url=\"your-sound.mp3\"\n        />\n      \u003C/Suspense>\n    \u003C/Box>\n  \u003C/TresCanvas>\n\u003C/template>\n",[550,858,604,878],[590,58722,58723,58743,58767,58789,58793,58810,58814,58826,58841,58847,58855,58859,58867,58875,58907,58915,58923,58931,58946,58961,58965,58973,58981,58989],{"__ignoreMap":548},[609,58724,58725,58727,58729,58731,58733,58735,58737,58739,58741],{"class":611,"line":549},[609,58726,615],{"class":614},[609,58728,619],{"class":618},[609,58730,623],{"class":622},[609,58732,626],{"class":622},[609,58734,629],{"class":614},[609,58736,632],{"class":614},[609,58738,636],{"class":635},[609,58740,632],{"class":614},[609,58742,641],{"class":614},[609,58744,58746,58748,58750,58752,58754,58757,58759,58761,58763,58765],{"class":58745,"line":550},[611,645],[609,58747,649],{"class":648},[609,58749,652],{"class":614},[609,58751,1373],{"class":655},[609,58753,659],{"class":614},[609,58755,58756],{"class":655}," PositionalAudio",[609,58758,665],{"class":614},[609,58760,668],{"class":648},[609,58762,671],{"class":614},[609,58764,674],{"class":635},[609,58766,677],{"class":614},[609,58768,58769,58771,58773,58775,58777,58779,58781,58783,58785,58787],{"class":611,"line":680},[609,58770,649],{"class":648},[609,58772,652],{"class":614},[609,58774,18073],{"class":655},[609,58776,659],{"class":614},[609,58778,7909],{"class":655},[609,58780,665],{"class":614},[609,58782,668],{"class":648},[609,58784,671],{"class":614},[609,58786,605],{"class":635},[609,58788,677],{"class":614},[609,58790,58791],{"class":611,"line":701},[609,58792,714],{"emptyLinePlaceholder":566},[609,58794,58795,58797,58800,58802,58804,58806,58808],{"class":611,"line":711},[609,58796,2693],{"class":622},[609,58798,58799],{"class":655}," positionalAudioRef ",[609,58801,629],{"class":614},[609,58803,7909],{"class":2804},[609,58805,2974],{"class":655},[609,58807,3156],{"class":614},[609,58809,5543],{"class":655},[609,58811,58812],{"class":611,"line":717},[609,58813,714],{"emptyLinePlaceholder":566},[609,58815,58816,58818,58820,58822,58824],{"class":611,"line":727},[609,58817,18120],{"class":2804},[609,58819,2974],{"class":655},[609,58821,8451],{"class":614},[609,58823,5505],{"class":622},[609,58825,1180],{"class":614},[609,58827,58828,58831,58833,58835,58837,58839],{"class":611,"line":750},[609,58829,58830],{"class":655},"  positionalAudioRef",[609,58832,11531],{"class":614},[609,58834,5500],{"class":655},[609,58836,11531],{"class":614},[609,58838,17165],{"class":2804},[609,58840,2850],{"class":618},[609,58842,58843,58845],{"class":611,"line":762},[609,58844,5548],{"class":614},[609,58846,5543],{"class":655},[609,58848,58849,58851,58853],{"class":611,"line":772},[609,58850,704],{"class":614},[609,58852,619],{"class":618},[609,58854,641],{"class":614},[609,58856,58857],{"class":611,"line":777},[609,58858,714],{"emptyLinePlaceholder":566},[609,58860,58861,58863,58865],{"class":611,"line":803},[609,58862,615],{"class":614},[609,58864,722],{"class":618},[609,58866,641],{"class":614},[609,58868,58869,58871,58873],{"class":611,"line":603},[609,58870,730],{"class":614},[609,58872,733],{"class":618},[609,58874,641],{"class":614},[609,58876,58877,58879,58881,58883,58885,58887,58889,58891,58893,58895,58897,58899,58901,58903,58905],{"class":611,"line":826},[609,58878,753],{"class":614},[609,58880,197],{"class":618},[609,58882,785],{"class":614},[609,58884,1993],{"class":622},[609,58886,629],{"class":614},[609,58888,632],{"class":614},[609,58890,1470],{"class":614},[609,58892,1897],{"class":795},[609,58894,1475],{"class":614},[609,58896,1897],{"class":795},[609,58898,1475],{"class":614},[609,58900,1897],{"class":795},[609,58902,1485],{"class":614},[609,58904,632],{"class":614},[609,58906,641],{"class":614},[609,58908,58909,58911,58913],{"class":611,"line":837},[609,58910,829],{"class":614},[609,58912,853],{"class":618},[609,58914,759],{"class":614},[609,58916,58917,58919,58921],{"class":611,"line":848},[609,58918,829],{"class":614},[609,58920,15941],{"class":618},[609,58922,641],{"class":614},[609,58924,58926,58928],{"class":58925,"line":858},[611,645],[609,58927,840],{"class":614},[609,58929,58930],{"class":618},"PositionalAudio\n",[609,58932,58934,58937,58939,58941,58944],{"class":58933,"line":604},[611,645],[609,58935,58936],{"class":622},"          ref",[609,58938,629],{"class":614},[609,58940,632],{"class":614},[609,58942,58943],{"class":635},"positionalAudioRef",[609,58945,2991],{"class":614},[609,58947,58949,58952,58954,58956,58959],{"class":58948,"line":878},[611,645],[609,58950,58951],{"class":622},"          url",[609,58953,629],{"class":614},[609,58955,632],{"class":614},[609,58957,58958],{"class":635},"your-sound.mp3",[609,58960,2991],{"class":614},[609,58962,58963],{"class":611,"line":888},[609,58964,48182],{"class":614},[609,58966,58967,58969,58971],{"class":611,"line":2956},[609,58968,861],{"class":614},[609,58970,15941],{"class":618},[609,58972,641],{"class":614},[609,58974,58975,58977,58979],{"class":611,"line":2964},[609,58976,871],{"class":614},[609,58978,197],{"class":618},[609,58980,641],{"class":614},[609,58982,58983,58985,58987],{"class":611,"line":2994},[609,58984,881],{"class":614},[609,58986,733],{"class":618},[609,58988,641],{"class":614},[609,58990,58991,58993,58995],{"class":611,"line":3011},[609,58992,704],{"class":614},[609,58994,722],{"class":618},[609,58996,641],{"class":614},[3729,58998,58999],{},[586,59000,59001,59002,59005,59006,59013,59014,59017,59018,4435,59021,59024],{},"AudioContext is authorized when a user gesture has been made on the page. The property ",[590,59003,59004],{},":autoplay=\"true\""," cannot be activated if no user gesture has been made previously ",[1116,59007,59010],{"href":59008,"rel":59009},"https://goo.gl/7K7WLu",[1120],[590,59011,59012],{},"read more",".\nIf you are sure that there will be a user gesture before your ",[590,59015,59016],{},"\u003CPositionAudio>"," component appears/is created, you can directly add ",[590,59019,59020],{},":ready=\"true\"",[590,59022,59023],{},"autoplay=\"true\""," for a direct launch.",[476,59026,59028],{"id":59027},"how-does-it-work","How does it work?",[3271,59030],{"className":59031,"src":59033},[59032],"mx-auto","/cientos/sketch.jpg",[476,59035,898],{"id":897},[903,59037,59038,59048],{},[906,59039,59040],{},[909,59041,59042,59044,59046],{},[912,59043,914],{"align":973},[912,59045,917],{"align":973},[912,59047,920],{},[922,59049,59050,59066,59087,59107,59140,59158,59173,59190,59209],{},[909,59051,59052,59056,59064],{},[927,59053,59054],{"align":973},[1677,59055,54788],{},[927,59057,59058,50311,59060,59063],{"align":973},[590,59059,12043],{},[1677,59061,59062],{},"required"," — The path or URL to the file.",[927,59065],{},[909,59067,59068,59073,59083],{},[927,59069,59070],{"align":973},[1677,59071,59072],{},"helper",[927,59074,59075,59077,59078,45678,59080],{"align":973},[590,59076,11963],{}," — Selects whether helper mode is enabled. ",[2512,59079],{},[1681,59081,59082],{},"(Useful for visualising the angle of sound propagation)",[927,59084,59085],{},[590,59086,947],{},[909,59088,59089,59093,59103],{},[927,59090,59091],{"align":973},[1677,59092,6949],{},[927,59094,59095,59097,59098],{"align":973},[590,59096,2541],{}," — The distance at which the volume reduction starts taking effect. ",[1681,59099,59100],{},[1677,59101,59102],{},"A non-negative number.",[927,59104,59105],{},[590,59106,1897],{},[909,59108,59109,59114,59136],{},[927,59110,59111],{"align":973},[1677,59112,59113],{},"ready",[927,59115,59116,59118,59119,59121,59122,59125,59126,59129,59130,59133,59134],{"align":973},[590,59117,11963],{}," — Tells ",[590,59120,58688],{}," that ",[590,59123,59124],{},"AudioContext"," is authorised because an user gesture has been made on the page. This is imperative, as ",[590,59127,59128],{},"autoplay"," cannot be activated if no user gesture has been made previously (",[1116,59131,59008],{"href":59008,"rel":59132},[1120],"). ",[2512,59135],{},[927,59137,59138],{},[590,59139,947],{},[909,59141,59142,59146,59154],{},[927,59143,59144],{"align":973},[1677,59145,59128],{},[927,59147,59148,59150,59151,59153],{"align":973},[590,59149,11963],{}," — Selects whether the audio is launched automatically. Please refer to the ",[590,59152,59113],{}," prop for a better understanding of how to use autoplay.",[927,59155,59156],{},[590,59157,947],{},[909,59159,59160,59164,59169],{},[927,59161,59162],{"align":973},[1677,59163,20504],{},[927,59165,59166,59168],{"align":973},[590,59167,11963],{}," — Specifies whether the audio should loop.",[927,59170,59171],{},[590,59172,947],{},[909,59174,59175,59180,59185],{},[927,59176,59177],{"align":973},[1677,59178,59179],{},"innerAngle",[927,59181,59182,59184],{"align":973},[590,59183,2541],{}," —  A parameter for directional audio sources, this is an angle, inside of which there will be no volume reduction.",[927,59186,59187],{},[590,59188,59189],{},"360",[909,59191,59192,59197,59205],{},[927,59193,59194],{"align":973},[1677,59195,59196],{},"outerAngle",[927,59198,59199,59201,59202,35336],{"align":973},[590,59200,2541],{}," —  A parameter for directional audio sources, this is an angle, outside of which the volume will be reduced to a constant value of ",[590,59203,59204],{},"outerGain",[927,59206,59207],{},[590,59208,941],{},[909,59210,59211,59215,59226],{},[927,59212,59213],{"align":973},[1677,59214,59204],{},[927,59216,59217,59219,59220,59222,59223,59225],{"align":973},[590,59218,2541],{}," —  A parameter for directional audio sources, this is the amount of volume reduction outside of the ",[590,59221,59196],{}," prop. When the value is ",[590,59224,941],{}," no sound can be heard.",[927,59227,59228],{},[590,59229,941],{},[476,59231,53854],{"id":53853},[903,59233,59234,59242],{},[906,59235,59236],{},[909,59237,59238,59240],{},[912,59239,7811],{"align":973},[912,59241,917],{"align":973},[922,59243,59244,59256,59269,59282,59295],{},[909,59245,59246,59250],{},[927,59247,59248],{"align":973},[590,59249,21491],{},[927,59251,59252,59253,1122],{"align":973},"Instance reference — Inheritance of ",[1116,59254,455],{"href":58683,"rel":59255},[1120],[909,59257,59258,59263],{},[927,59259,59260],{"align":973},[590,59261,59262],{},"play()",[927,59264,59265,59266],{"align":973},"Play audio — ",[1681,59267,59268],{},"Cannot be fired if audio is already running.",[909,59270,59271,59276],{},[927,59272,59273],{"align":973},[590,59274,59275],{},"pause()",[927,59277,59278,59279],{"align":973},"Pause audio — ",[1681,59280,59281],{},"Cannot be fired if audio is already paused.",[909,59283,59284,59289],{},[927,59285,59286],{"align":973},[590,59287,59288],{},"stop()",[927,59290,59291,59292],{"align":973},"Stop audio — ",[1681,59293,59294],{},"Cannot be fired if audio is already stopped.",[909,59296,59297,59301],{},[927,59298,59299],{"align":973},[590,59300,19319],{},[927,59302,59303],{"align":973},"Dispose component — Deletion of the AudioListener in the camera, disconnection of the audio source and deletion of the PositionalAudioHelper (if it exists).",[598,59305,59309],{"className":59306,"code":59307,"language":59308,"meta":548,"style":548},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const positionalAudioRef = shallowRef(null)\n\nconsole.log(positionalAudioRef.value.instance) // instance properties\n\nconst handlerAudio = (action: string) => {\n  if (!positionalAudioRef.value) { return }\n\n  const { play, pause, stop } = positionalAudioRef.value\n\n  if (action === 'play') { play() }\n  else if (action === 'pause') { pause() }\n  else if (action === 'stop') { stop() }\n}\n","typescript",[590,59310,59311,59327,59331,59355,59359,59383,59405,59409,59439,59443,59470,59501,59530],{"__ignoreMap":548},[609,59312,59313,59315,59317,59319,59321,59323,59325],{"class":611,"line":549},[609,59314,2693],{"class":622},[609,59316,58799],{"class":655},[609,59318,629],{"class":614},[609,59320,7909],{"class":2804},[609,59322,2974],{"class":655},[609,59324,3156],{"class":614},[609,59326,5543],{"class":655},[609,59328,59329],{"class":611,"line":550},[609,59330,714],{"emptyLinePlaceholder":566},[609,59332,59333,59336,59338,59340,59343,59345,59347,59349,59352],{"class":611,"line":680},[609,59334,59335],{"class":655},"console",[609,59337,1122],{"class":614},[609,59339,14627],{"class":2804},[609,59341,59342],{"class":655},"(positionalAudioRef",[609,59344,1122],{"class":614},[609,59346,5500],{"class":655},[609,59348,1122],{"class":614},[609,59350,59351],{"class":655},"instance) ",[609,59353,59354],{"class":1185},"// instance properties\n",[609,59356,59357],{"class":611,"line":701},[609,59358,714],{"emptyLinePlaceholder":566},[609,59360,59361,59363,59366,59368,59370,59373,59375,59377,59379,59381],{"class":611,"line":711},[609,59362,2693],{"class":622},[609,59364,59365],{"class":655}," handlerAudio ",[609,59367,629],{"class":614},[609,59369,2717],{"class":614},[609,59371,59372],{"class":5499},"action",[609,59374,1194],{"class":614},[609,59376,52058],{"class":1176},[609,59378,4129],{"class":614},[609,59380,5505],{"class":622},[609,59382,1180],{"class":614},[609,59384,59385,59387,59389,59391,59393,59395,59397,59399,59401,59403],{"class":611,"line":717},[609,59386,8458],{"class":648},[609,59388,2717],{"class":618},[609,59390,8463],{"class":614},[609,59392,58943],{"class":655},[609,59394,1122],{"class":614},[609,59396,5500],{"class":655},[609,59398,2752],{"class":618},[609,59400,8474],{"class":614},[609,59402,8477],{"class":648},[609,59404,8480],{"class":614},[609,59406,59407],{"class":611,"line":727},[609,59408,714],{"emptyLinePlaceholder":566},[609,59410,59411,59413,59415,59418,59420,59423,59425,59428,59430,59432,59435,59437],{"class":611,"line":750},[609,59412,8485],{"class":622},[609,59414,652],{"class":614},[609,59416,59417],{"class":655}," play",[609,59419,659],{"class":614},[609,59421,59422],{"class":655}," pause",[609,59424,659],{"class":614},[609,59426,59427],{"class":655}," stop",[609,59429,665],{"class":614},[609,59431,2770],{"class":614},[609,59433,59434],{"class":655}," positionalAudioRef",[609,59436,1122],{"class":614},[609,59438,18296],{"class":655},[609,59440,59441],{"class":611,"line":762},[609,59442,714],{"emptyLinePlaceholder":566},[609,59444,59445,59447,59449,59451,59453,59455,59458,59460,59462,59464,59466,59468],{"class":611,"line":772},[609,59446,8458],{"class":648},[609,59448,2717],{"class":618},[609,59450,59372],{"class":655},[609,59452,15565],{"class":614},[609,59454,671],{"class":614},[609,59456,59457],{"class":635},"play",[609,59459,5540],{"class":614},[609,59461,2752],{"class":618},[609,59463,8474],{"class":614},[609,59465,59417],{"class":2804},[609,59467,52161],{"class":618},[609,59469,1301],{"class":614},[609,59471,59472,59475,59478,59480,59482,59484,59486,59489,59491,59493,59495,59497,59499],{"class":611,"line":777},[609,59473,59474],{"class":648},"  else",[609,59476,59477],{"class":648}," if",[609,59479,2717],{"class":618},[609,59481,59372],{"class":655},[609,59483,15565],{"class":614},[609,59485,671],{"class":614},[609,59487,59488],{"class":635},"pause",[609,59490,5540],{"class":614},[609,59492,2752],{"class":618},[609,59494,8474],{"class":614},[609,59496,59422],{"class":2804},[609,59498,52161],{"class":618},[609,59500,1301],{"class":614},[609,59502,59503,59505,59507,59509,59511,59513,59515,59518,59520,59522,59524,59526,59528],{"class":611,"line":803},[609,59504,59474],{"class":648},[609,59506,59477],{"class":648},[609,59508,2717],{"class":618},[609,59510,59372],{"class":655},[609,59512,15565],{"class":614},[609,59514,671],{"class":614},[609,59516,59517],{"class":635},"stop",[609,59519,5540],{"class":614},[609,59521,2752],{"class":618},[609,59523,8474],{"class":614},[609,59525,59427],{"class":2804},[609,59527,52161],{"class":618},[609,59529,1301],{"class":614},[609,59531,59532],{"class":611,"line":603},[609,59533,1301],{"class":614},[598,59535,59537],{"className":600,"code":59536,"language":605,"meta":548,"style":548},"\u003Ctemplate>\n  \u003Cbutton @click=\"handlerAudio('play')\">play\u003C/button>\n  \u003Cbutton @click=\"handlerAudio('pause')\">pause\u003C/button>\n  \u003Cbutton @click=\"handlerAudio('stop')\">stop\u003C/button>\n\n  \u003CTresCanvas>\n    \u003CSphere>\n      \u003CSuspense>\n        \u003CPositionalAudio />\n      \u003C/Suspense>\n    \u003C/Sphere>\n  \u003C/TresCanvas>\n\u003C/template>\n",[590,59538,59539,59547,59586,59624,59662,59666,59674,59682,59690,59698,59706,59714,59722],{"__ignoreMap":548},[609,59540,59541,59543,59545],{"class":611,"line":549},[609,59542,615],{"class":614},[609,59544,722],{"class":618},[609,59546,641],{"class":614},[609,59548,59549,59551,59553,59555,59557,59559,59561,59564,59566,59568,59570,59572,59574,59576,59578,59580,59582,59584],{"class":611,"line":550},[609,59550,730],{"class":614},[609,59552,32125],{"class":618},[609,59554,7760],{"class":614},[609,59556,32130],{"class":622},[609,59558,629],{"class":614},[609,59560,632],{"class":614},[609,59562,59563],{"class":2804},"handlerAudio",[609,59565,2974],{"class":614},[609,59567,5540],{"class":614},[609,59569,59457],{"class":635},[609,59571,5540],{"class":614},[609,59573,4129],{"class":614},[609,59575,632],{"class":614},[609,59577,12669],{"class":614},[609,59579,59457],{"class":655},[609,59581,704],{"class":614},[609,59583,32125],{"class":618},[609,59585,641],{"class":614},[609,59587,59588,59590,59592,59594,59596,59598,59600,59602,59604,59606,59608,59610,59612,59614,59616,59618,59620,59622],{"class":611,"line":680},[609,59589,730],{"class":614},[609,59591,32125],{"class":618},[609,59593,7760],{"class":614},[609,59595,32130],{"class":622},[609,59597,629],{"class":614},[609,59599,632],{"class":614},[609,59601,59563],{"class":2804},[609,59603,2974],{"class":614},[609,59605,5540],{"class":614},[609,59607,59488],{"class":635},[609,59609,5540],{"class":614},[609,59611,4129],{"class":614},[609,59613,632],{"class":614},[609,59615,12669],{"class":614},[609,59617,59488],{"class":655},[609,59619,704],{"class":614},[609,59621,32125],{"class":618},[609,59623,641],{"class":614},[609,59625,59626,59628,59630,59632,59634,59636,59638,59640,59642,59644,59646,59648,59650,59652,59654,59656,59658,59660],{"class":611,"line":701},[609,59627,730],{"class":614},[609,59629,32125],{"class":618},[609,59631,7760],{"class":614},[609,59633,32130],{"class":622},[609,59635,629],{"class":614},[609,59637,632],{"class":614},[609,59639,59563],{"class":2804},[609,59641,2974],{"class":614},[609,59643,5540],{"class":614},[609,59645,59517],{"class":635},[609,59647,5540],{"class":614},[609,59649,4129],{"class":614},[609,59651,632],{"class":614},[609,59653,12669],{"class":614},[609,59655,59517],{"class":655},[609,59657,704],{"class":614},[609,59659,32125],{"class":618},[609,59661,641],{"class":614},[609,59663,59664],{"class":611,"line":711},[609,59665,714],{"emptyLinePlaceholder":566},[609,59667,59668,59670,59672],{"class":611,"line":717},[609,59669,730],{"class":614},[609,59671,733],{"class":618},[609,59673,641],{"class":614},[609,59675,59676,59678,59680],{"class":611,"line":727},[609,59677,753],{"class":614},[609,59679,261],{"class":618},[609,59681,641],{"class":614},[609,59683,59684,59686,59688],{"class":611,"line":750},[609,59685,829],{"class":614},[609,59687,15941],{"class":618},[609,59689,641],{"class":614},[609,59691,59692,59694,59696],{"class":611,"line":762},[609,59693,840],{"class":614},[609,59695,455],{"class":618},[609,59697,759],{"class":614},[609,59699,59700,59702,59704],{"class":611,"line":772},[609,59701,861],{"class":614},[609,59703,15941],{"class":618},[609,59705,641],{"class":614},[609,59707,59708,59710,59712],{"class":611,"line":777},[609,59709,871],{"class":614},[609,59711,261],{"class":618},[609,59713,641],{"class":614},[609,59715,59716,59718,59720],{"class":611,"line":803},[609,59717,881],{"class":614},[609,59719,733],{"class":618},[609,59721,641],{"class":614},[609,59723,59724,59726,59728],{"class":611,"line":603},[609,59725,704],{"class":614},[609,59727,722],{"class":618},[609,59729,641],{"class":614},[476,59731,7746],{"id":7745},[903,59733,59734,59742],{},[906,59735,59736],{},[909,59737,59738,59740],{},[912,59739,7811],{"align":973},[912,59741,917],{"align":973},[922,59743,59744],{},[909,59745,59746,59751],{},[927,59747,59748],{"align":973},[590,59749,59750],{},"is-playing",[927,59752,59753,59754,45678,59756],{"align":973},"Triggered when the audio changes its state (play, pause, or stop) ",[2512,59755],{},[590,59757,59758],{},"@is-playing=\"(e) => yourIsPlayingRef = e\"",[1303,59760,59761],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .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}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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":548,"searchDepth":549,"depth":550,"links":59763},[59764,59765,59766,59767,59768],{"id":596,"depth":550,"text":15},{"id":59027,"depth":550,"text":59028},{"id":897,"depth":550,"text":898},{"id":53853,"depth":550,"text":53854},{"id":7745,"depth":550,"text":7746},"Spatially positioned audio in 3D space.",{},{"title":455,"description":59769},"LsmuqynUpKNFwOEvnJJepUiBRKPh7SYxe1fcp-_mrT4",{"id":59774,"title":459,"body":59775,"description":60407,"extension":563,"links":564,"meta":60408,"navigation":566,"path":460,"seo":60409,"stem":461,"__hash__":60410},"docs/2.api/miscellaneous/use-animations.md",{"type":473,"value":59776,"toc":60400},[59777,59791,59793,59797,59807,60034,60038,60045,60377,60379,60397],[586,59778,59779,59781,59782,59785,59786,30508],{},[590,59780,459],{}," is a composable that returns a ",[590,59783,59784],{},"shallowReactive"," with all the models actions based on the animations provided. It is a wrapper around the ",[1116,59787,59790],{"href":59788,"rel":59789},"https://threejs.org/docs/#api/en/animation/AnimationMixer",[1120],"AnimationMixer",[476,59792,15],{"id":596},[7477,59794,59796],{"id":59795},"basic-usage-automatic-updates","Basic Usage (Automatic Updates)",[586,59798,59799,59800,59802,59803,59806],{},"By default, ",[590,59801,459],{}," automatically updates the animation mixer on each frame using the ",[590,59804,59805],{},"useLoop"," composable:",[598,59808,59811],{"className":1162,"code":59809,"highlights":59810,"language":636,"meta":548,"style":548},"import { useAnimations, useGLTF } from '@tresjs/cientos'\n\nconst { state } = useGLTF('/models/ugly-naked-bunny.gltf')\n\nconst animations = computed(() => state.value?.animations || [])\nconst model = computed(() => state?.value?.scene)\nconst { actions } = useAnimations(animations, model)\n\nconst currentAction = ref()\n\nwatch(actions, (newActions) => {\n  currentAction.value = newActions.Greeting\n  currentAction.value.play()\n})\n",[549,727],[590,59812,59813,59837,59841,59866,59870,59904,59930,59954,59958,59971,59975,59995,60014,60028],{"__ignoreMap":548},[609,59814,59816,59818,59820,59823,59825,59827,59829,59831,59833,59835],{"class":59815,"line":549},[611,645],[609,59817,649],{"class":648},[609,59819,652],{"class":614},[609,59821,59822],{"class":655}," useAnimations",[609,59824,659],{"class":614},[609,59826,11421],{"class":655},[609,59828,665],{"class":614},[609,59830,668],{"class":648},[609,59832,671],{"class":614},[609,59834,674],{"class":635},[609,59836,677],{"class":614},[609,59838,59839],{"class":611,"line":550},[609,59840,714],{"emptyLinePlaceholder":566},[609,59842,59843,59845,59847,59849,59851,59853,59855,59857,59859,59862,59864],{"class":611,"line":680},[609,59844,2693],{"class":622},[609,59846,652],{"class":614},[609,59848,54878],{"class":655},[609,59850,5548],{"class":614},[609,59852,2770],{"class":614},[609,59854,11421],{"class":2804},[609,59856,2974],{"class":655},[609,59858,5540],{"class":614},[609,59860,59861],{"class":635},"/models/ugly-naked-bunny.gltf",[609,59863,5540],{"class":614},[609,59865,5543],{"class":655},[609,59867,59868],{"class":611,"line":701},[609,59869,714],{"emptyLinePlaceholder":566},[609,59871,59872,59874,59877,59879,59881,59883,59885,59887,59889,59891,59893,59895,59898,59901],{"class":611,"line":711},[609,59873,2693],{"class":622},[609,59875,59876],{"class":655}," animations ",[609,59878,629],{"class":614},[609,59880,15338],{"class":2804},[609,59882,2974],{"class":655},[609,59884,8451],{"class":614},[609,59886,5505],{"class":622},[609,59888,11461],{"class":655},[609,59890,1122],{"class":614},[609,59892,5500],{"class":655},[609,59894,11531],{"class":614},[609,59896,59897],{"class":655},"animations ",[609,59899,59900],{"class":614},"||",[609,59902,59903],{"class":655}," [])\n",[609,59905,59906,59908,59910,59912,59914,59916,59918,59920,59922,59924,59926,59928],{"class":611,"line":717},[609,59907,2693],{"class":622},[609,59909,15297],{"class":655},[609,59911,629],{"class":614},[609,59913,15338],{"class":2804},[609,59915,2974],{"class":655},[609,59917,8451],{"class":614},[609,59919,5505],{"class":622},[609,59921,11461],{"class":655},[609,59923,11531],{"class":614},[609,59925,5500],{"class":655},[609,59927,11531],{"class":614},[609,59929,31677],{"class":655},[609,59931,59933,59935,59937,59940,59942,59944,59946,59949,59951],{"class":59932,"line":727},[611,645],[609,59934,2693],{"class":622},[609,59936,652],{"class":614},[609,59938,59939],{"class":655}," actions ",[609,59941,5548],{"class":614},[609,59943,2770],{"class":614},[609,59945,59822],{"class":2804},[609,59947,59948],{"class":655},"(animations",[609,59950,659],{"class":614},[609,59952,59953],{"class":655}," model)\n",[609,59955,59956],{"class":611,"line":750},[609,59957,714],{"emptyLinePlaceholder":566},[609,59959,59960,59962,59965,59967,59969],{"class":611,"line":762},[609,59961,2693],{"class":622},[609,59963,59964],{"class":655}," currentAction ",[609,59966,629],{"class":614},[609,59968,5435],{"class":2804},[609,59970,2850],{"class":655},[609,59972,59973],{"class":611,"line":772},[609,59974,714],{"emptyLinePlaceholder":566},[609,59976,59977,59979,59982,59984,59986,59989,59991,59993],{"class":611,"line":777},[609,59978,5489],{"class":2804},[609,59980,59981],{"class":655},"(actions",[609,59983,659],{"class":614},[609,59985,2717],{"class":614},[609,59987,59988],{"class":5499},"newActions",[609,59990,4129],{"class":614},[609,59992,5505],{"class":622},[609,59994,1180],{"class":614},[609,59996,59997,60000,60002,60004,60006,60009,60011],{"class":611,"line":803},[609,59998,59999],{"class":655},"  currentAction",[609,60001,1122],{"class":614},[609,60003,5500],{"class":655},[609,60005,2770],{"class":614},[609,60007,60008],{"class":655}," newActions",[609,60010,1122],{"class":614},[609,60012,60013],{"class":655},"Greeting\n",[609,60015,60016,60018,60020,60022,60024,60026],{"class":611,"line":603},[609,60017,59999],{"class":655},[609,60019,1122],{"class":614},[609,60021,5500],{"class":655},[609,60023,1122],{"class":614},[609,60025,59457],{"class":2804},[609,60027,2850],{"class":618},[609,60029,60030,60032],{"class":611,"line":826},[609,60031,5548],{"class":614},[609,60033,5543],{"class":655},[7477,60035,60037],{"id":60036},"manual-updates","Manual Updates",[586,60039,60040,60041,60044],{},"To gain finer control over animation mixer updates, enable ",[590,60042,60043],{},"manualUpdate: true"," and manage the update cycle manually.",[598,60046,60049],{"className":1162,"code":60047,"highlights":60048,"language":636,"meta":548,"style":548},"import { useAnimations, useGLTF } from '@tresjs/cientos'\nimport { useLoop } from '@tresjs/core'\n\nconst { state } = useGLTF('/models/ugly-naked-bunny.gltf')\n\nconst animations = computed(() => state.value?.animations || [])\nconst model = computed(() => state?.value?.scene)\nconst { actions, mixer } = useAnimations(animations, model, {\n  manualUpdate: true,\n})\n\n// Handle updates manually\nconst { onBeforeRender } = useLoop()\nonBeforeRender(({ delta }) => {\n  mixer.value.update(delta)\n})\n\nconst currentAction = ref()\n\nwatch(actions, (newActions) => {\n  currentAction.value = newActions.Greeting\n  currentAction.value.play()\n})\n",[549,750,762,772,837],[590,60050,60051,60074,60093,60097,60121,60125,60155,60181,60212,60224,60231,60235,60240,60257,60275,60297,60303,60307,60319,60323,60341,60357,60371],{"__ignoreMap":548},[609,60052,60054,60056,60058,60060,60062,60064,60066,60068,60070,60072],{"class":60053,"line":549},[611,645],[609,60055,649],{"class":648},[609,60057,652],{"class":614},[609,60059,59822],{"class":655},[609,60061,659],{"class":614},[609,60063,11421],{"class":655},[609,60065,665],{"class":614},[609,60067,668],{"class":648},[609,60069,671],{"class":614},[609,60071,674],{"class":635},[609,60073,677],{"class":614},[609,60075,60076,60078,60080,60083,60085,60087,60089,60091],{"class":611,"line":550},[609,60077,649],{"class":648},[609,60079,652],{"class":614},[609,60081,60082],{"class":655}," useLoop",[609,60084,665],{"class":614},[609,60086,668],{"class":648},[609,60088,671],{"class":614},[609,60090,696],{"class":635},[609,60092,677],{"class":614},[609,60094,60095],{"class":611,"line":680},[609,60096,714],{"emptyLinePlaceholder":566},[609,60098,60099,60101,60103,60105,60107,60109,60111,60113,60115,60117,60119],{"class":611,"line":701},[609,60100,2693],{"class":622},[609,60102,652],{"class":614},[609,60104,54878],{"class":655},[609,60106,5548],{"class":614},[609,60108,2770],{"class":614},[609,60110,11421],{"class":2804},[609,60112,2974],{"class":655},[609,60114,5540],{"class":614},[609,60116,59861],{"class":635},[609,60118,5540],{"class":614},[609,60120,5543],{"class":655},[609,60122,60123],{"class":611,"line":711},[609,60124,714],{"emptyLinePlaceholder":566},[609,60126,60127,60129,60131,60133,60135,60137,60139,60141,60143,60145,60147,60149,60151,60153],{"class":611,"line":717},[609,60128,2693],{"class":622},[609,60130,59876],{"class":655},[609,60132,629],{"class":614},[609,60134,15338],{"class":2804},[609,60136,2974],{"class":655},[609,60138,8451],{"class":614},[609,60140,5505],{"class":622},[609,60142,11461],{"class":655},[609,60144,1122],{"class":614},[609,60146,5500],{"class":655},[609,60148,11531],{"class":614},[609,60150,59897],{"class":655},[609,60152,59900],{"class":614},[609,60154,59903],{"class":655},[609,60156,60157,60159,60161,60163,60165,60167,60169,60171,60173,60175,60177,60179],{"class":611,"line":727},[609,60158,2693],{"class":622},[609,60160,15297],{"class":655},[609,60162,629],{"class":614},[609,60164,15338],{"class":2804},[609,60166,2974],{"class":655},[609,60168,8451],{"class":614},[609,60170,5505],{"class":622},[609,60172,11461],{"class":655},[609,60174,11531],{"class":614},[609,60176,5500],{"class":655},[609,60178,11531],{"class":614},[609,60180,31677],{"class":655},[609,60182,60184,60186,60188,60191,60193,60196,60198,60200,60202,60204,60206,60208,60210],{"class":60183,"line":750},[611,645],[609,60185,2693],{"class":622},[609,60187,652],{"class":614},[609,60189,60190],{"class":655}," actions",[609,60192,659],{"class":614},[609,60194,60195],{"class":655}," mixer ",[609,60197,5548],{"class":614},[609,60199,2770],{"class":614},[609,60201,59822],{"class":2804},[609,60203,59948],{"class":655},[609,60205,659],{"class":614},[609,60207,15347],{"class":655},[609,60209,659],{"class":614},[609,60211,1180],{"class":614},[609,60213,60215,60218,60220,60222],{"class":60214,"line":762},[611,645],[609,60216,60217],{"class":618},"  manualUpdate",[609,60219,1194],{"class":614},[609,60221,11887],{"class":3874},[609,60223,14979],{"class":614},[609,60225,60227,60229],{"class":60226,"line":772},[611,645],[609,60228,5548],{"class":614},[609,60230,5543],{"class":655},[609,60232,60233],{"class":611,"line":777},[609,60234,714],{"emptyLinePlaceholder":566},[609,60236,60237],{"class":611,"line":803},[609,60238,60239],{"class":1185},"// Handle updates manually\n",[609,60241,60242,60244,60246,60249,60251,60253,60255],{"class":611,"line":603},[609,60243,2693],{"class":622},[609,60245,652],{"class":614},[609,60247,60248],{"class":655}," onBeforeRender ",[609,60250,5548],{"class":614},[609,60252,2770],{"class":614},[609,60254,60082],{"class":2804},[609,60256,2850],{"class":655},[609,60258,60259,60262,60264,60266,60269,60271,60273],{"class":611,"line":826},[609,60260,60261],{"class":2804},"onBeforeRender",[609,60263,2974],{"class":655},[609,60265,33658],{"class":614},[609,60267,60268],{"class":5499}," delta",[609,60270,33675],{"class":614},[609,60272,5505],{"class":622},[609,60274,1180],{"class":614},[609,60276,60278,60281,60283,60285,60287,60290,60292,60295],{"class":60277,"line":837},[611,645],[609,60279,60280],{"class":655},"  mixer",[609,60282,1122],{"class":614},[609,60284,5500],{"class":655},[609,60286,1122],{"class":614},[609,60288,60289],{"class":2804},"update",[609,60291,2974],{"class":618},[609,60293,60294],{"class":655},"delta",[609,60296,5543],{"class":618},[609,60298,60299,60301],{"class":611,"line":848},[609,60300,5548],{"class":614},[609,60302,5543],{"class":655},[609,60304,60305],{"class":611,"line":858},[609,60306,714],{"emptyLinePlaceholder":566},[609,60308,60309,60311,60313,60315,60317],{"class":611,"line":604},[609,60310,2693],{"class":622},[609,60312,59964],{"class":655},[609,60314,629],{"class":614},[609,60316,5435],{"class":2804},[609,60318,2850],{"class":655},[609,60320,60321],{"class":611,"line":878},[609,60322,714],{"emptyLinePlaceholder":566},[609,60324,60325,60327,60329,60331,60333,60335,60337,60339],{"class":611,"line":888},[609,60326,5489],{"class":2804},[609,60328,59981],{"class":655},[609,60330,659],{"class":614},[609,60332,2717],{"class":614},[609,60334,59988],{"class":5499},[609,60336,4129],{"class":614},[609,60338,5505],{"class":622},[609,60340,1180],{"class":614},[609,60342,60343,60345,60347,60349,60351,60353,60355],{"class":611,"line":2956},[609,60344,59999],{"class":655},[609,60346,1122],{"class":614},[609,60348,5500],{"class":655},[609,60350,2770],{"class":614},[609,60352,60008],{"class":655},[609,60354,1122],{"class":614},[609,60356,60013],{"class":655},[609,60358,60359,60361,60363,60365,60367,60369],{"class":611,"line":2964},[609,60360,59999],{"class":655},[609,60362,1122],{"class":614},[609,60364,5500],{"class":655},[609,60366,1122],{"class":614},[609,60368,59457],{"class":2804},[609,60370,2850],{"class":618},[609,60372,60373,60375],{"class":611,"line":2994},[609,60374,5548],{"class":614},[609,60376,5543],{"class":655},[476,60378,7491],{"id":11998},[3140,60380,60381],{},[3143,60382,60383,60386,60387,60389,60390,60392,60393,60396],{},[590,60384,60385],{},"manualUpdate"," (optional): Default is ",[590,60388,947],{},". If set to ",[590,60391,937],{},", disables automatic animation mixer updates. You'll need to call ",[590,60394,60395],{},"mixer.value.update(delta)"," manually.",[1303,60398,60399],{},"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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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":548,"searchDepth":549,"depth":550,"links":60401},[60402,60406],{"id":596,"depth":550,"text":15,"children":60403},[60404,60405],{"id":59795,"depth":680,"text":59796},{"id":60036,"depth":680,"text":60037},{"id":11998,"depth":550,"text":7491},"Composable for managing model animations with AnimationMixer.",{},{"title":459,"description":60407},"TJcEqtFqnepbieID3hzHGMd0QylrwTz-3E1RokTEGoY",{"id":60412,"title":463,"body":60413,"description":61055,"extension":563,"links":564,"meta":61056,"navigation":566,"path":464,"seo":61057,"stem":465,"__hash__":61058},"docs/2.api/miscellaneous/use-gltf-exporter.md",{"type":473,"value":60414,"toc":61049},[60415,60431,60433,60846,60850,60899,60901,61046],[586,60416,60417,60422,60423,60427,60428,60430],{},[1116,60418,60421],{"href":60419,"rel":60420},"https://threejs.org/docs/index.html?q=expo#examples/en/exporters/GLTFExporter",[1120],"GLTFExporter"," is an addon in Three.js that allows you to download any object3D in a ",[1116,60424,11921],{"href":60425,"rel":60426},"https://www.khronos.org/gltf",[1120]," format. ",[1677,60429,11378],{}," provides a composable that simplifies this process with just a few lines of code.",[476,60432,31037],{"id":31036},[598,60434,60437],{"className":600,"code":60435,"highlights":60436,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { useGLTFExporter } from '@tresjs/cientos'\nimport { shallowRef } from 'vue'\n\nconst boxRef = shallowRef()\n\n// the second argument – options – is not required\nconst downloadBox = () => {\n  useGLTFExporter(boxRef.value, { fileName: 'cube', binary: true })\n}\n\u003C/script>\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#82DBC5\" window-size >\n    \u003CTresPerspectiveCamera :position=\"[0, 2, 5]\" />\n    \u003CTresMesh\n      ref=\"boxRef\"\n      :position-z=\"30\"\n      :scale=\"10\"\n      @click=\"downloadBox\"\n    >\n      \u003CTresBoxGeometry :args=\"[1, 1, 1]\" />\n      \u003CTresMeshStandardMaterial :color=\"0x00ff00\" />\n    \u003C/TresMesh>\n    \u003CTresDirectionalLight :position=\"[0, 10, 10]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n\n",[680,772],[590,60438,60439,60459,60477,60497,60515,60519,60531,60535,60540,60555,60597,60601,60609,60617,60639,60671,60677,60689,60703,60717,60733,60737,60769,60790,60798,60830,60838],{"__ignoreMap":548},[609,60440,60441,60443,60445,60447,60449,60451,60453,60455,60457],{"class":611,"line":549},[609,60442,615],{"class":614},[609,60444,619],{"class":618},[609,60446,623],{"class":622},[609,60448,626],{"class":622},[609,60450,629],{"class":614},[609,60452,632],{"class":614},[609,60454,636],{"class":635},[609,60456,632],{"class":614},[609,60458,641],{"class":614},[609,60460,60461,60463,60465,60467,60469,60471,60473,60475],{"class":611,"line":550},[609,60462,649],{"class":648},[609,60464,652],{"class":614},[609,60466,687],{"class":655},[609,60468,665],{"class":614},[609,60470,668],{"class":648},[609,60472,671],{"class":614},[609,60474,696],{"class":635},[609,60476,677],{"class":614},[609,60478,60480,60482,60484,60487,60489,60491,60493,60495],{"class":60479,"line":680},[611,645],[609,60481,649],{"class":648},[609,60483,652],{"class":614},[609,60485,60486],{"class":655}," useGLTFExporter",[609,60488,665],{"class":614},[609,60490,668],{"class":648},[609,60492,671],{"class":614},[609,60494,674],{"class":635},[609,60496,677],{"class":614},[609,60498,60499,60501,60503,60505,60507,60509,60511,60513],{"class":611,"line":701},[609,60500,649],{"class":648},[609,60502,652],{"class":614},[609,60504,7909],{"class":655},[609,60506,665],{"class":614},[609,60508,668],{"class":648},[609,60510,671],{"class":614},[609,60512,605],{"class":635},[609,60514,677],{"class":614},[609,60516,60517],{"class":611,"line":711},[609,60518,714],{"emptyLinePlaceholder":566},[609,60520,60521,60523,60525,60527,60529],{"class":611,"line":717},[609,60522,2693],{"class":622},[609,60524,7950],{"class":655},[609,60526,629],{"class":614},[609,60528,7909],{"class":2804},[609,60530,2850],{"class":655},[609,60532,60533],{"class":611,"line":727},[609,60534,714],{"emptyLinePlaceholder":566},[609,60536,60537],{"class":611,"line":750},[609,60538,60539],{"class":1185},"// the second argument – options – is not required\n",[609,60541,60542,60544,60547,60549,60551,60553],{"class":611,"line":762},[609,60543,2693],{"class":622},[609,60545,60546],{"class":655}," downloadBox ",[609,60548,629],{"class":614},[609,60550,52214],{"class":614},[609,60552,5505],{"class":622},[609,60554,1180],{"class":614},[609,60556,60558,60561,60563,60565,60567,60569,60571,60573,60576,60578,60580,60582,60584,60586,60589,60591,60593,60595],{"class":60557,"line":772},[611,645],[609,60559,60560],{"class":2804},"  useGLTFExporter",[609,60562,2974],{"class":618},[609,60564,8060],{"class":655},[609,60566,1122],{"class":614},[609,60568,5500],{"class":655},[609,60570,659],{"class":614},[609,60572,652],{"class":614},[609,60574,60575],{"class":618}," fileName",[609,60577,1194],{"class":614},[609,60579,671],{"class":614},[609,60581,16215],{"class":635},[609,60583,5540],{"class":614},[609,60585,659],{"class":614},[609,60587,60588],{"class":618}," binary",[609,60590,1194],{"class":614},[609,60592,11887],{"class":3874},[609,60594,665],{"class":614},[609,60596,5543],{"class":618},[609,60598,60599],{"class":611,"line":777},[609,60600,1301],{"class":614},[609,60602,60603,60605,60607],{"class":611,"line":803},[609,60604,704],{"class":614},[609,60606,619],{"class":618},[609,60608,641],{"class":614},[609,60610,60611,60613,60615],{"class":611,"line":603},[609,60612,615],{"class":614},[609,60614,722],{"class":618},[609,60616,641],{"class":614},[609,60618,60619,60621,60623,60625,60627,60629,60631,60633,60636],{"class":611,"line":826},[609,60620,730],{"class":614},[609,60622,733],{"class":618},[609,60624,736],{"class":622},[609,60626,629],{"class":614},[609,60628,632],{"class":614},[609,60630,5044],{"class":635},[609,60632,632],{"class":614},[609,60634,60635],{"class":622}," window-size",[609,60637,60638],{"class":614}," >\n",[609,60640,60641,60643,60645,60647,60649,60651,60653,60655,60657,60659,60661,60663,60665,60667,60669],{"class":611,"line":837},[609,60642,753],{"class":614},[609,60644,756],{"class":618},[609,60646,785],{"class":614},[609,60648,1463],{"class":622},[609,60650,629],{"class":614},[609,60652,632],{"class":614},[609,60654,1470],{"class":614},[609,60656,941],{"class":795},[609,60658,1475],{"class":614},[609,60660,796],{"class":795},[609,60662,1475],{"class":614},[609,60664,2400],{"class":795},[609,60666,1485],{"class":614},[609,60668,632],{"class":614},[609,60670,759],{"class":614},[609,60672,60673,60675],{"class":611,"line":848},[609,60674,753],{"class":614},[609,60676,2961],{"class":618},[609,60678,60679,60681,60683,60685,60687],{"class":611,"line":858},[609,60680,5683],{"class":622},[609,60682,629],{"class":614},[609,60684,632],{"class":614},[609,60686,8060],{"class":635},[609,60688,2991],{"class":614},[609,60690,60691,60693,60695,60697,60699,60701],{"class":611,"line":604},[609,60692,5697],{"class":614},[609,60694,4085],{"class":622},[609,60696,629],{"class":614},[609,60698,632],{"class":614},[609,60700,22632],{"class":795},[609,60702,2991],{"class":614},[609,60704,60705,60707,60709,60711,60713,60715],{"class":611,"line":878},[609,60706,5697],{"class":614},[609,60708,788],{"class":622},[609,60710,629],{"class":614},[609,60712,632],{"class":614},[609,60714,1482],{"class":795},[609,60716,2991],{"class":614},[609,60718,60719,60722,60724,60726,60728,60731],{"class":611,"line":888},[609,60720,60721],{"class":614},"      @",[609,60723,32130],{"class":622},[609,60725,629],{"class":614},[609,60727,632],{"class":614},[609,60729,60730],{"class":655},"downloadBox",[609,60732,2991],{"class":614},[609,60734,60735],{"class":611,"line":2956},[609,60736,5717],{"class":614},[609,60738,60739,60741,60743,60745,60747,60749,60751,60753,60755,60757,60759,60761,60763,60765,60767],{"class":611,"line":2964},[609,60740,829],{"class":614},[609,60742,843],{"class":618},[609,60744,785],{"class":614},[609,60746,1993],{"class":622},[609,60748,629],{"class":614},[609,60750,632],{"class":614},[609,60752,1470],{"class":614},[609,60754,1897],{"class":795},[609,60756,1475],{"class":614},[609,60758,1897],{"class":795},[609,60760,1475],{"class":614},[609,60762,1897],{"class":795},[609,60764,1485],{"class":614},[609,60766,632],{"class":614},[609,60768,759],{"class":614},[609,60770,60771,60773,60775,60777,60779,60781,60783,60786,60788],{"class":611,"line":2994},[609,60772,829],{"class":614},[609,60774,8099],{"class":618},[609,60776,785],{"class":614},[609,60778,2504],{"class":622},[609,60780,629],{"class":614},[609,60782,632],{"class":614},[609,60784,60785],{"class":795},"0x00ff00",[609,60787,632],{"class":614},[609,60789,759],{"class":614},[609,60791,60792,60794,60796],{"class":611,"line":3011},[609,60793,871],{"class":614},[609,60795,832],{"class":618},[609,60797,641],{"class":614},[609,60799,60800,60802,60804,60806,60808,60810,60812,60814,60816,60818,60820,60822,60824,60826,60828],{"class":611,"line":3026},[609,60801,753],{"class":614},[609,60803,3543],{"class":618},[609,60805,785],{"class":614},[609,60807,1463],{"class":622},[609,60809,629],{"class":614},[609,60811,632],{"class":614},[609,60813,1470],{"class":614},[609,60815,941],{"class":795},[609,60817,1475],{"class":614},[609,60819,1482],{"class":795},[609,60821,1475],{"class":614},[609,60823,1482],{"class":795},[609,60825,1485],{"class":614},[609,60827,632],{"class":614},[609,60829,759],{"class":614},[609,60831,60832,60834,60836],{"class":611,"line":3051},[609,60833,881],{"class":614},[609,60835,733],{"class":618},[609,60837,641],{"class":614},[609,60839,60840,60842,60844],{"class":611,"line":2595},[609,60841,704],{"class":614},[609,60843,722],{"class":618},[609,60845,641],{"class":614},[476,60847,60849],{"id":60848},"arguments","Arguments",[903,60851,60852,60864],{},[906,60853,60854],{},[909,60855,60856,60858,60860,60862],{},[912,60857,3122],{"align":973},[912,60859,11906],{},[912,60861,920],{},[912,60863,917],{},[922,60865,60866,60882],{},[909,60867,60868,60873,60877,60879],{},[927,60869,60870],{"align":973},[1677,60871,60872],{},"Selector",[927,60874,60875],{},[590,60876,2582],{},[927,60878,27939],{},[927,60880,60881],{},"The object to download. Could be an array of objects",[909,60883,60884,60888,60892,60896],{},[927,60885,60886],{"align":973},[1677,60887,7491],{},[927,60889,60890],{},[590,60891,7491],{},[927,60893,60894],{},[590,60895,1155],{},[927,60897,60898],{},"Description below",[7477,60900,7491],{"id":11998},[903,60902,60903,60915],{},[906,60904,60905],{},[909,60906,60907,60909,60911,60913],{},[912,60908,3122],{"align":973},[912,60910,11906],{"align":973},[912,60912,920],{"align":973},[912,60914,917],{"align":973},[922,60916,60917,60936,60954,60972,60990,61009,61027],{},[909,60918,60919,60924,60929,60933],{},[927,60920,60921],{"align":973},[1677,60922,60923],{},"trs",[927,60925,60926],{"align":973},[590,60927,60928],{},"bool",[927,60930,60931],{"align":973},[590,60932,947],{},[927,60934,60935],{"align":973},"Export position, rotation and scale instead of matrix per node",[909,60937,60938,60943,60947,60951],{},[927,60939,60940],{"align":973},[1677,60941,60942],{},"onlyVisible",[927,60944,60945],{"align":973},[590,60946,60928],{},[927,60948,60949],{"align":973},[590,60950,937],{},[927,60952,60953],{"align":973},"Export only visible objects",[909,60955,60956,60961,60965,60969],{},[927,60957,60958],{"align":973},[1677,60959,60960],{},"binary",[927,60962,60963],{"align":973},[590,60964,60928],{},[927,60966,60967],{"align":973},[590,60968,947],{},[927,60970,60971],{"align":973},"Export in binary (.glb) format, returning an ArrayBuffer",[909,60973,60974,60979,60983,60987],{},[927,60975,60976],{"align":973},[1677,60977,60978],{},"maxTextureSize",[927,60980,60981],{"align":973},[590,60982,2541],{},[927,60984,60985],{"align":973},[590,60986,6942],{},[927,60988,60989],{"align":973},"Restricts the image maximum size (both width and height) to the given value",[909,60991,60992,60997,61002,61006],{},[927,60993,60994],{"align":973},[1677,60995,60996],{},"animations",[927,60998,60999],{"align":973},[590,61000,61001],{},"Array\u003CAnimationClip>",[927,61003,61004],{"align":973},[590,61005,1155],{},[927,61007,61008],{"align":973},"List of animations to be included in the export",[909,61010,61011,61016,61020,61024],{},[927,61012,61013],{"align":973},[1677,61014,61015],{},"includeCustomExtensions",[927,61017,61018],{"align":973},[590,61019,60928],{},[927,61021,61022],{"align":973},[590,61023,947],{},[927,61025,61026],{"align":973},"Export custom glTF extensions defined on an object's userData.gltfExtensions",[909,61028,61029,61034,61038,61043],{},[927,61030,61031],{"align":973},[1677,61032,61033],{},"fileName",[927,61035,61036],{"align":973},[590,61037,12043],{},[927,61039,61040],{"align":973},[590,61041,61042],{},"Object name",[927,61044,61045],{"align":973},"Name of the generated file",[1303,61047,61048],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .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 pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":548,"searchDepth":549,"depth":550,"links":61050},[61051,61052],{"id":31036,"depth":550,"text":31037},{"id":60848,"depth":550,"text":60849,"children":61053},[61054],{"id":11998,"depth":680,"text":7491},"Export 3D objects to GLTF format.",{},{"title":463,"description":61055},"RMYlhgEenD2JjVSHoqXD_ilu6cdNNok5afbVcapEUPE",{"id":61060,"title":467,"body":61061,"description":61350,"extension":563,"links":564,"meta":61351,"navigation":566,"path":468,"seo":61352,"stem":469,"__hash__":61353},"docs/2.api/miscellaneous/use-intersect.md",{"type":473,"value":61062,"toc":61345},[61063,61080,61082,61098,61242,61244,61272,61276,61343],[586,61064,61065,61067,61068,51452,61071,61073,61074,61079],{},[590,61066,467],{}," is a function that returns ",[590,61069,61070],{},"intersect",[590,61072,53903],{}," that's updated when the observed object enters or leaves the screen. This relies on ",[1116,61075,61078],{"href":61076,"rel":61077},"https://threejs.org/docs/#api/en/core/Object3D.onBeforeRender",[1120],"THREE.Object3D.onBeforeRender"," so it only works on objects that are effectively rendered, like meshes, lines, sprites. It won't work on other types like group, object3d, bone, etc.",[476,61081,15],{"id":596},[3729,61083,61084],{},[586,61085,61086,61088,61089,61091,61092,61094,61095,1122],{},[590,61087,467],{}," requires a ",[590,61090,733],{}," context, so it is only available in ",[590,61093,733],{}," descendant components' ",[590,61096,61097],{},"\u003Cscript setup>",[598,61099,61102],{"className":600,"code":61100,"highlights":61101,"language":605,"meta":548,"style":548},"\u003Cscript setup lang=\"ts\">\nimport { Torus, useIntersect } from '@tresjs/cientos'\n\nconst { ref, intersect, off } = useIntersect()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTorus ref=\"ref\">\n    \u003CTresMeshNormalMaterial />\n  \u003C/Torus>\n\u003C/template>\n",[550,701],[590,61103,61104,61124,61149,61153,61180,61188,61192,61200,61218,61226,61234],{"__ignoreMap":548},[609,61105,61106,61108,61110,61112,61114,61116,61118,61120,61122],{"class":611,"line":549},[609,61107,615],{"class":614},[609,61109,619],{"class":618},[609,61111,623],{"class":622},[609,61113,626],{"class":622},[609,61115,629],{"class":614},[609,61117,632],{"class":614},[609,61119,636],{"class":635},[609,61121,632],{"class":614},[609,61123,641],{"class":614},[609,61125,61127,61129,61131,61134,61136,61139,61141,61143,61145,61147],{"class":61126,"line":550},[611,645],[609,61128,649],{"class":648},[609,61130,652],{"class":614},[609,61132,61133],{"class":655}," Torus",[609,61135,659],{"class":614},[609,61137,61138],{"class":655}," useIntersect",[609,61140,665],{"class":614},[609,61142,668],{"class":648},[609,61144,671],{"class":614},[609,61146,674],{"class":635},[609,61148,677],{"class":614},[609,61150,61151],{"class":611,"line":680},[609,61152,714],{"emptyLinePlaceholder":566},[609,61154,61156,61158,61160,61162,61164,61167,61169,61172,61174,61176,61178],{"class":61155,"line":701},[611,645],[609,61157,2693],{"class":622},[609,61159,652],{"class":614},[609,61161,5435],{"class":655},[609,61163,659],{"class":614},[609,61165,61166],{"class":655}," intersect",[609,61168,659],{"class":614},[609,61170,61171],{"class":655}," off ",[609,61173,5548],{"class":614},[609,61175,2770],{"class":614},[609,61177,61138],{"class":2804},[609,61179,2850],{"class":655},[609,61181,61182,61184,61186],{"class":611,"line":711},[609,61183,704],{"class":614},[609,61185,619],{"class":618},[609,61187,641],{"class":614},[609,61189,61190],{"class":611,"line":717},[609,61191,714],{"emptyLinePlaceholder":566},[609,61193,61194,61196,61198],{"class":611,"line":727},[609,61195,615],{"class":614},[609,61197,722],{"class":618},[609,61199,641],{"class":614},[609,61201,61202,61204,61206,61208,61210,61212,61214,61216],{"class":611,"line":750},[609,61203,730],{"class":614},[609,61205,273],{"class":618},[609,61207,5435],{"class":622},[609,61209,629],{"class":614},[609,61211,632],{"class":614},[609,61213,12576],{"class":635},[609,61215,632],{"class":614},[609,61217,641],{"class":614},[609,61219,61220,61222,61224],{"class":611,"line":762},[609,61221,753],{"class":614},[609,61223,853],{"class":618},[609,61225,759],{"class":614},[609,61227,61228,61230,61232],{"class":611,"line":772},[609,61229,881],{"class":614},[609,61231,273],{"class":618},[609,61233,641],{"class":614},[609,61235,61236,61238,61240],{"class":611,"line":777},[609,61237,704],{"class":614},[609,61239,722],{"class":618},[609,61241,641],{"class":614},[476,61243,60849],{"id":60848},[903,61245,61246,61256],{},[906,61247,61248],{},[909,61249,61250,61252,61254],{},[912,61251,3122],{"align":973},[912,61253,917],{},[912,61255,11906],{},[922,61257,61258],{},[909,61259,61260,61264,61267],{},[927,61261,61262],{"align":973},[1677,61263,7770],{},[927,61265,61266],{},"Optional callback function triggered when the observed object enters or leaves the screen.",[927,61268,61269],{},[590,61270,61271],{},"(isIntersected: boolean) => void",[476,61273,61275],{"id":61274},"return","Return",[903,61277,61278,61288],{},[906,61279,61280],{},[909,61281,61282,61284,61286],{},[912,61283,3122],{"align":973},[912,61285,917],{},[912,61287,11906],{},[922,61289,61290,61308,61323],{},[909,61291,61292,61296,61303],{},[927,61293,61294],{"align":973},[1677,61295,12576],{},[927,61297,61298,61299,61302],{},"Vue ",[590,61300,61301],{},"ShallowRef"," to pass to the object to be observed.",[927,61304,61305],{},[590,61306,61307],{},"ShallowRef\u003CObject3D>",[909,61309,61310,61315,61318],{},[927,61311,61312],{"align":973},[1677,61313,61314],{},"intersects",[927,61316,61317],{},"Updates when the observed object's intersect status changes.",[927,61319,61320],{},[590,61321,61322],{},"ShallowRef\u003Cboolean>",[909,61324,61325,61330,61339],{},[927,61326,61327],{"align":973},[1677,61328,61329],{},"off",[927,61331,61332,61333,61335,61336,61338],{},"Calling this function stops ",[590,61334,467],{}," until ",[590,61337,12576],{}," changes.",[927,61340,61341],{},[590,61342,17170],{},[1303,61344,39309],{},{"title":548,"searchDepth":549,"depth":550,"links":61346},[61347,61348,61349],{"id":596,"depth":550,"text":15},{"id":60848,"depth":550,"text":60849},{"id":61274,"depth":550,"text":61275},"Detect when objects enter or leave the screen.",{},{"title":467,"description":61350},"QAcMQnGWf_fxqwXEeZxQJtNfPCiyyVyBtXuwXAh1Cg4",1776202090223]