[{"data":1,"prerenderedAt":60371},["ShallowReactive",2],{"navigation":3,"/api":466,"/api-surround":565,"abstraction-list":570,"controls-list":6562,"loaders-list":10414,"materials-list":19610,"shapes-list":22904,"debug-list":29229,"light-list":32009,"staging-list":36796,"objects-list":44358,"misc-list":56394},[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,110,152,186,280,306,340,390,432],{"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],{"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},"Keyboard Controls","/api/controls/keyboard-controls","2.api/2.controls/keyboard-controls",{"title":95,"path":96,"stem":97},"Map Controls","/api/controls/map-controls","2.api/2.controls/map-controls",{"title":99,"path":100,"stem":101},"Orbit Controls","/api/controls/orbit-controls","2.api/2.controls/orbit-controls",{"title":103,"path":104,"stem":105},"PointerLock Controls","/api/controls/pointer-lock-controls","2.api/2.controls/pointer-lock-controls",{"title":107,"path":108,"stem":109},"Transform Controls","/api/controls/transform-controls","2.api/2.controls/transform-controls",{"title":111,"path":112,"stem":113,"children":114},"Loaders","/api/loaders","2.api/3.loaders/index",[115,116,120,124,128,132,136,140,144,148],{"title":111,"path":112,"stem":113},{"title":117,"path":118,"stem":119},"useGLTF","/api/loaders/use-gltf","2.api/3.loaders/1.use-gltf",{"title":121,"path":122,"stem":123},"GLTFModel","/api/loaders/gltf-model","2.api/3.loaders/2.gltf-model",{"title":125,"path":126,"stem":127},"useFBX","/api/loaders/use-fbx","2.api/3.loaders/3.use-fbx",{"title":129,"path":130,"stem":131},"FBXModel","/api/loaders/fbx-model","2.api/3.loaders/4.fbx-model",{"title":133,"path":134,"stem":135},"useTexture","/api/loaders/use-texture","2.api/3.loaders/5.use-texture",{"title":137,"path":138,"stem":139},"useTextures","/api/loaders/use-textures","2.api/3.loaders/6.use-textures",{"title":141,"path":142,"stem":143},"useSVG","/api/loaders/use-svg","2.api/3.loaders/7.use-svg",{"title":145,"path":146,"stem":147},"useProgress","/api/loaders/use-progress","2.api/3.loaders/use-progress",{"title":149,"path":150,"stem":151},"useVideoTexture","/api/loaders/use-video-texture","2.api/3.loaders/use-video-texture",{"title":153,"path":154,"stem":155,"children":156},"Materials","/api/materials","2.api/4.materials/index",[157,158,162,166,170,174,178,182],{"title":153,"path":154,"stem":155},{"title":159,"path":160,"stem":161},"Custom Shader Material","/api/materials/custom-shader-material","2.api/4.materials/custom-shader-material",{"title":163,"path":164,"stem":165},"Mesh Glass Material","/api/materials/glass-material","2.api/4.materials/glass-material",{"title":167,"path":168,"stem":169},"Holographic Material","/api/materials/holographic-material","2.api/4.materials/holographic-material",{"title":171,"path":172,"stem":173},"Mesh Discard Material","/api/materials/mesh-discard-material","2.api/4.materials/mesh-discard-material",{"title":175,"path":176,"stem":177},"Mesh Reflection Material","/api/materials/mesh-reflection-material","2.api/4.materials/mesh-reflection-material",{"title":179,"path":180,"stem":181},"Point Material","/api/materials/point-material","2.api/4.materials/point-material",{"title":183,"path":184,"stem":185},"Wobble Material","/api/materials/wobble-material","2.api/4.materials/wobble-material",{"title":187,"path":188,"stem":189,"children":190},"Shapes","/api/shapes","2.api/5.shapes/index",[191,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276],{"title":187,"path":188,"stem":189},{"title":193,"path":194,"stem":195},"Box","/api/shapes/box","2.api/5.shapes/box",{"title":197,"path":198,"stem":199},"CatmullRomCurve3","/api/shapes/catmullromcurve3","2.api/5.shapes/catmullromcurve3",{"title":201,"path":202,"stem":203},"Circle","/api/shapes/circle","2.api/5.shapes/circle",{"title":205,"path":206,"stem":207},"Cone","/api/shapes/cone","2.api/5.shapes/cone",{"title":209,"path":210,"stem":211},"Cubic Bezier Line","/api/shapes/cubic-bezier-line","2.api/5.shapes/cubic-bezier-line",{"title":213,"path":214,"stem":215},"Cylinder","/api/shapes/cylinder","2.api/5.shapes/cylinder",{"title":217,"path":218,"stem":219},"Dodecahedron","/api/shapes/dodecahedron","2.api/5.shapes/dodecahedron",{"title":221,"path":222,"stem":223},"Grid","/api/shapes/grid","2.api/5.shapes/grid",{"title":225,"path":226,"stem":227},"Icosahedron","/api/shapes/icosahedron","2.api/5.shapes/icosahedron",{"title":229,"path":230,"stem":231},"Line2","/api/shapes/line2","2.api/5.shapes/line2",{"title":233,"path":234,"stem":235},"Octahedron","/api/shapes/octahedron","2.api/5.shapes/octahedron",{"title":237,"path":238,"stem":239},"Plane","/api/shapes/plane","2.api/5.shapes/plane",{"title":241,"path":242,"stem":243},"Quadratic Bezier Line","/api/shapes/quadratic-bezier-line","2.api/5.shapes/quadratic-bezier-line",{"title":245,"path":246,"stem":247},"Ring","/api/shapes/ring","2.api/5.shapes/ring",{"title":249,"path":250,"stem":251},"Rounded Box","/api/shapes/rounded-box","2.api/5.shapes/rounded-box",{"title":253,"path":254,"stem":255},"Screen Quad","/api/shapes/screen-quad","2.api/5.shapes/screen-quad",{"title":257,"path":258,"stem":259},"Sphere","/api/shapes/sphere","2.api/5.shapes/sphere",{"title":261,"path":262,"stem":263},"Superformula","/api/shapes/superformula","2.api/5.shapes/superformula",{"title":265,"path":266,"stem":267},"Tetrahedron","/api/shapes/tetrahedron","2.api/5.shapes/tetrahedron",{"title":269,"path":270,"stem":271},"Torus","/api/shapes/torus","2.api/5.shapes/torus",{"title":273,"path":274,"stem":275},"Torus Knot","/api/shapes/torus-knot","2.api/5.shapes/torus-knot",{"title":277,"path":278,"stem":279},"Tube","/api/shapes/tube","2.api/5.shapes/tube",{"title":281,"path":282,"stem":283,"children":284},"Debug/Performance","/api/debug-performance","2.api/6.debug-performance/index",[285,286,290,294,298,302],{"title":281,"path":282,"stem":283},{"title":287,"path":288,"stem":289},"Helper","/api/debug-performance/helper","2.api/6.debug-performance/helper",{"title":291,"path":292,"stem":293},"LOD","/api/debug-performance/lod","2.api/6.debug-performance/lod",{"title":295,"path":296,"stem":297},"Stats","/api/debug-performance/stats","2.api/6.debug-performance/stats",{"title":299,"path":300,"stem":301},"StatsGl","/api/debug-performance/stats-gl","2.api/6.debug-performance/stats-gl",{"title":303,"path":304,"stem":305},"useBVH","/api/debug-performance/use-bvh","2.api/6.debug-performance/use-bvh",{"title":307,"path":308,"stem":309,"children":310},"Light/Shadow","/api/light-shadow","2.api/7.light-shadow/index",[311,312,316,320,324,328,332,336],{"title":307,"path":308,"stem":309},{"title":313,"path":314,"stem":315},"Accumulative Shadows","/api/light-shadow/accumulative-shadows","2.api/7.light-shadow/accumulative-shadows",{"title":317,"path":318,"stem":319},"Bake Shadows","/api/light-shadow/bake-shadows","2.api/7.light-shadow/bake-shadows",{"title":321,"path":322,"stem":323},"Circle Shadow","/api/light-shadow/circle-shadow","2.api/7.light-shadow/circle-shadow",{"title":325,"path":326,"stem":327},"Contact Shadows","/api/light-shadow/contact-shadows","2.api/7.light-shadow/contact-shadows",{"title":329,"path":330,"stem":331},"Lensflare","/api/light-shadow/lensflare","2.api/7.light-shadow/lensflare",{"title":333,"path":334,"stem":335},"Randomized Lights","/api/light-shadow/randomized-lights","2.api/7.light-shadow/randomized-lights",{"title":337,"path":338,"stem":339},"Soft Shadows","/api/light-shadow/soft-shadows","2.api/7.light-shadow/soft-shadows",{"title":341,"path":342,"stem":343,"children":344},"Staging","/api/staging","2.api/8.staging/index",[345,346,350,354,358,362,366,370,374,378,382,386],{"title":341,"path":342,"stem":343},{"title":347,"path":348,"stem":349},"Environment","/api/staging/environment","2.api/8.staging/1.environment",{"title":351,"path":352,"stem":353},"useEnvironment","/api/staging/use-environment","2.api/8.staging/2.use-environment",{"title":355,"path":356,"stem":357},"Lightformer","/api/staging/lightformer","2.api/8.staging/3.lightformer",{"title":359,"path":360,"stem":361},"Backdrop","/api/staging/backdrop","2.api/8.staging/backdrop",{"title":363,"path":364,"stem":365},"Ocean","/api/staging/ocean","2.api/8.staging/ocean",{"title":367,"path":368,"stem":369},"Precipitation","/api/staging/precipitation","2.api/8.staging/precipitation",{"title":371,"path":372,"stem":373},"Sky","/api/staging/sky","2.api/8.staging/sky",{"title":375,"path":376,"stem":377},"Smoke","/api/staging/smoke","2.api/8.staging/smoke",{"title":379,"path":380,"stem":381},"Sparkles","/api/staging/sparkles","2.api/8.staging/sparkles",{"title":383,"path":384,"stem":385},"Stage","/api/staging/stage","2.api/8.staging/stage",{"title":387,"path":388,"stem":389},"Stars","/api/staging/stars","2.api/8.staging/stars",{"title":391,"path":392,"stem":393,"children":394},"Objects","/api/objects","2.api/9.objects/index",[395,396,400,404,408,412,416,420,424,428],{"title":391,"path":392,"stem":393},{"title":397,"path":398,"stem":399},"AnimatedSprite","/api/objects/animated-sprite","2.api/9.objects/animated-sprite",{"title":401,"path":402,"stem":403},"CubeCamera","/api/objects/cube-camera","2.api/9.objects/cube-camera",{"title":405,"path":406,"stem":407},"Fbo","/api/objects/fbo","2.api/9.objects/fbo",{"title":409,"path":410,"stem":411},"GradientTexture","/api/objects/gradient-texture","2.api/9.objects/gradient-texture",{"title":413,"path":414,"stem":415},"HTML","/api/objects/html","2.api/9.objects/html",{"title":417,"path":418,"stem":419},"Image","/api/objects/image","2.api/9.objects/image",{"title":421,"path":422,"stem":423},"MarchingCubes","/api/objects/marching-cubes","2.api/9.objects/marching-cubes",{"title":425,"path":426,"stem":427},"Reflector","/api/objects/reflector","2.api/9.objects/reflector",{"title":429,"path":430,"stem":431},"Text3D","/api/objects/text-3d","2.api/9.objects/text-3d",{"title":433,"path":434,"stem":435,"children":436},"Miscellaneous","/api/miscellaneous","2.api/miscellaneous/index",[437,438,442,446,450,454,458,462],{"title":433,"path":434,"stem":435},{"title":439,"path":440,"stem":441},"Bounds","/api/miscellaneous/bounds","2.api/miscellaneous/bounds",{"title":443,"path":444,"stem":445},"GlobalAudio","/api/miscellaneous/global-audio","2.api/miscellaneous/global-audio",{"title":447,"path":448,"stem":449},"MouseParallax","/api/miscellaneous/mouse-parallax","2.api/miscellaneous/mouse-parallax",{"title":451,"path":452,"stem":453},"PositionalAudio","/api/miscellaneous/positional-audio","2.api/miscellaneous/positional-audio",{"title":455,"path":456,"stem":457},"useAnimations","/api/miscellaneous/use-animations","2.api/miscellaneous/use-animations",{"title":459,"path":460,"stem":461},"useGLTFExporter","/api/miscellaneous/use-gltf-exporter","2.api/miscellaneous/use-gltf-exporter",{"title":463,"path":464,"stem":465},"useIntersect","/api/miscellaneous/use-intersect","2.api/miscellaneous/use-intersect",{"id":467,"title":28,"body":468,"description":558,"extension":559,"links":560,"meta":561,"navigation":562,"path":24,"seo":563,"stem":29,"__hash__":564},"docs/2.api/index.md",{"type":469,"value":470,"toc":543},"minimark",[471,476,480,484,487,491,494,498,501,505,508,512,515,519,522,526,529,533,536,540],[472,473,475],"h2",{"id":474},"abstraction","📦 Abstraction",[477,478],"api-list",{"list-name":479,"path":32},"abstraction-list",[472,481,483],{"id":482},"controls","🎮 Controls",[477,485],{"list-name":486,"path":82},"controls-list",[472,488,490],{"id":489},"loaders","📂 Loaders",[477,492],{"list-name":493,"path":112},"loaders-list",[472,495,497],{"id":496},"materials","🎨 Materials",[477,499],{"list-name":500,"path":154},"materials-list",[472,502,504],{"id":503},"shapes","🔷 Shapes",[477,506],{"list-name":507,"path":188},"shapes-list",[472,509,511],{"id":510},"debug-performance","📊 Debug & Performance",[477,513],{"list-name":514,"path":282},"debug-list",[472,516,518],{"id":517},"light-shadow","💡 Light & Shadow",[477,520],{"list-name":521,"path":308},"light-list",[472,523,525],{"id":524},"staging","🎭 Staging",[477,527],{"list-name":528,"path":342},"staging-list",[472,530,532],{"id":531},"objects","🎬 Objects",[477,534],{"list-name":535,"path":392},"objects-list",[472,537,539],{"id":538},"️-miscellaneous","🛠️ Miscellaneous",[477,541],{"list-name":542,"path":434},"misc-list",{"title":544,"searchDepth":545,"depth":546,"links":547},"",1,2,[548,549,550,551,552,553,554,555,556,557],{"id":474,"depth":546,"text":475},{"id":482,"depth":546,"text":483},{"id":489,"depth":546,"text":490},{"id":496,"depth":546,"text":497},{"id":503,"depth":546,"text":504},{"id":510,"depth":546,"text":511},{"id":517,"depth":546,"text":518},{"id":524,"depth":546,"text":525},{"id":531,"depth":546,"text":532},{"id":538,"depth":546,"text":539},"Explore the complete API reference","md",null,{},true,{"title":28,"description":558},"sw9kHYPeTK3xIXtV7tt103OdjppzE9OpuYL8etJhS4o",[566,568],{"title":19,"path":20,"stem":21,"description":567,"children":-1},"Migration guide for cientos",{"title":31,"path":32,"stem":33,"description":569,"children":-1},"UI components reference",[571,1311,1657,2242,2553,3255,3709,4413,4924,5823,6174],{"id":572,"title":37,"body":573,"description":1307,"extension":559,"links":560,"meta":1308,"navigation":562,"path":38,"seo":1309,"stem":39,"__hash__":1310},"docs/2.api/1.abstractions/align.md",{"type":469,"value":574,"toc":1302},[575,581,590,593,891,895,898,1152,1156,1298],[576,577,578],"scene-controls-wrapper",{},[579,580],"abstractions-align",{},[582,583,584,585,589],"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 ",[586,587,588],"code",{},"cacheKey"," is set.",[472,591,15],{"id":592},"usage",[594,595,602],"pre",{"className":596,"code":597,"highlights":598,"language":601,"meta":544,"style":544},"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",[546,599,600],13,18,"vue",[586,603,604,638,674,695,705,711,721,744,756,766,771,797,802,820,831,842,852,862,872,882],{"__ignoreMap":544},[605,606,608,612,616,620,623,626,629,633,635],"span",{"class":607,"line":545},"line",[605,609,611],{"class":610},"sMK4o","\u003C",[605,613,615],{"class":614},"swJcz","script",[605,617,619],{"class":618},"spNyl"," setup",[605,621,622],{"class":618}," lang",[605,624,625],{"class":610},"=",[605,627,628],{"class":610},"\"",[605,630,632],{"class":631},"sfazB","ts",[605,634,628],{"class":610},[605,636,637],{"class":610},">\n",[605,639,642,646,649,653,656,659,662,665,668,671],{"class":640,"line":546},[607,641],"highlight",[605,643,645],{"class":644},"s7zQu","import",[605,647,648],{"class":610}," {",[605,650,652],{"class":651},"sTEyZ"," Align",[605,654,655],{"class":610},",",[605,657,658],{"class":651}," OrbitControls",[605,660,661],{"class":610}," }",[605,663,664],{"class":644}," from",[605,666,667],{"class":610}," '",[605,669,670],{"class":631},"@tresjs/cientos",[605,672,673],{"class":610},"'\n",[605,675,677,679,681,684,686,688,690,693],{"class":607,"line":676},3,[605,678,645],{"class":644},[605,680,648],{"class":610},[605,682,683],{"class":651}," TresCanvas",[605,685,661],{"class":610},[605,687,664],{"class":644},[605,689,667],{"class":610},[605,691,692],{"class":631},"@tresjs/core",[605,694,673],{"class":610},[605,696,698,701,703],{"class":607,"line":697},4,[605,699,700],{"class":610},"\u003C/",[605,702,615],{"class":614},[605,704,637],{"class":610},[605,706,708],{"class":607,"line":707},5,[605,709,710],{"emptyLinePlaceholder":562},"\n",[605,712,714,716,719],{"class":607,"line":713},6,[605,715,611],{"class":610},[605,717,718],{"class":614},"template",[605,720,637],{"class":610},[605,722,724,727,730,733,735,737,740,742],{"class":607,"line":723},7,[605,725,726],{"class":610},"  \u003C",[605,728,729],{"class":614},"TresCanvas",[605,731,732],{"class":618}," clear-color",[605,734,625],{"class":610},[605,736,628],{"class":610},[605,738,739],{"class":631},"#222",[605,741,628],{"class":610},[605,743,637],{"class":610},[605,745,747,750,753],{"class":607,"line":746},8,[605,748,749],{"class":610},"    \u003C",[605,751,752],{"class":614},"TresPerspectiveCamera",[605,754,755],{"class":610}," />\n",[605,757,759,761,764],{"class":607,"line":758},9,[605,760,749],{"class":610},[605,762,763],{"class":614},"OrbitControls",[605,765,755],{"class":610},[605,767,769],{"class":607,"line":768},10,[605,770,710],{"emptyLinePlaceholder":562},[605,772,774,776,779,782,785,787,789,793,795],{"class":607,"line":773},11,[605,775,749],{"class":610},[605,777,778],{"class":614},"TresAxesHelper",[605,780,781],{"class":610}," :",[605,783,784],{"class":618},"scale",[605,786,625],{"class":610},[605,788,628],{"class":610},[605,790,792],{"class":791},"sbssI","2",[605,794,628],{"class":610},[605,796,755],{"class":610},[605,798,800],{"class":607,"line":799},12,[605,801,710],{"emptyLinePlaceholder":562},[605,803,805,807,809,812,815,818],{"class":804,"line":599},[607,641],[605,806,749],{"class":610},[605,808,37],{"class":614},[605,810,811],{"class":618}," top",[605,813,814],{"class":618}," right",[605,816,817],{"class":618}," back",[605,819,637],{"class":610},[605,821,823,826,829],{"class":607,"line":822},14,[605,824,825],{"class":610},"      \u003C",[605,827,828],{"class":614},"TresMesh",[605,830,637],{"class":610},[605,832,834,837,840],{"class":607,"line":833},15,[605,835,836],{"class":610},"        \u003C",[605,838,839],{"class":614},"TresBoxGeometry",[605,841,755],{"class":610},[605,843,845,847,850],{"class":607,"line":844},16,[605,846,836],{"class":610},[605,848,849],{"class":614},"TresMeshNormalMaterial",[605,851,755],{"class":610},[605,853,855,858,860],{"class":607,"line":854},17,[605,856,857],{"class":610},"      \u003C/",[605,859,828],{"class":614},[605,861,637],{"class":610},[605,863,865,868,870],{"class":864,"line":600},[607,641],[605,866,867],{"class":610},"    \u003C/",[605,869,37],{"class":614},[605,871,637],{"class":610},[605,873,875,878,880],{"class":607,"line":874},19,[605,876,877],{"class":610},"  \u003C/",[605,879,729],{"class":614},[605,881,637],{"class":610},[605,883,885,887,889],{"class":607,"line":884},20,[605,886,700],{"class":610},[605,888,718],{"class":614},[605,890,637],{"class":610},[472,892,894],{"id":893},"props","Props",[582,896,897],{},"All props are optional.",[899,900,901,917],"table",{},[902,903,904],"thead",{},[905,906,907,911,914],"tr",{},[908,909,910],"th",{},"Prop",[908,912,913],{},"Description",[908,915,916],{},"Default",[918,919,920,944,963,982,1000,1019,1037,1053,1069,1085,1101,1123,1135],"tbody",{},[905,921,922,928,939],{},[923,924,925],"td",{},[586,926,927],{},"top",[923,929,930,931,934,935,938],{},"If ",[586,932,933],{},"true",", aligns bounding box bottom to ",[586,936,937],{},"0"," on the y-axis",[923,940,941],{},[586,942,943],{},"false",[905,945,946,951,959],{},[923,947,948],{},[586,949,950],{},"bottom",[923,952,930,953,955,956,958],{},[586,954,933],{},", aligns bounding box top to ",[586,957,937],{}," on the y-axis.",[923,960,961],{},[586,962,943],{},[905,964,965,970,978],{},[923,966,967],{},[586,968,969],{},"left",[923,971,930,972,974,975,977],{},[586,973,933],{},", aligns bounding box right to ",[586,976,937],{}," on the x-axis.",[923,979,980],{},[586,981,943],{},[905,983,984,989,996],{},[923,985,986],{},[586,987,988],{},"right",[923,990,930,991,993,994,977],{},[586,992,933],{},", aligns bounding box left to ",[586,995,937],{},[923,997,998],{},[586,999,943],{},[905,1001,1002,1007,1015],{},[923,1003,1004],{},[586,1005,1006],{},"front",[923,1008,930,1009,1011,1012,1014],{},[586,1010,933],{},", aligns bounding box back to ",[586,1013,937],{}," on the z-axis.",[923,1016,1017],{},[586,1018,943],{},[905,1020,1021,1026,1033],{},[923,1022,1023],{},[586,1024,1025],{},"back",[923,1027,930,1028,1030,1031,1014],{},[586,1029,933],{},", aligns bounding box front to ",[586,1032,937],{},[923,1034,1035],{},[586,1036,943],{},[905,1038,1039,1044,1049],{},[923,1040,1041],{},[586,1042,1043],{},"disable",[923,1045,930,1046,1048],{},[586,1047,933],{},", disables alignment on all axes.",[923,1050,1051],{},[586,1052,943],{},[905,1054,1055,1060,1065],{},[923,1056,1057],{},[586,1058,1059],{},"disableX",[923,1061,930,1062,1064],{},[586,1063,933],{},", disables alignment on the x-axis.",[923,1066,1067],{},[586,1068,943],{},[905,1070,1071,1076,1081],{},[923,1072,1073],{},[586,1074,1075],{},"disableY",[923,1077,930,1078,1080],{},[586,1079,933],{},", disables alignment on the y-axis.",[923,1082,1083],{},[586,1084,943],{},[905,1086,1087,1092,1097],{},[923,1088,1089],{},[586,1090,1091],{},"disableZ",[923,1093,930,1094,1096],{},[586,1095,933],{},", disables alignment on the z-axis.",[923,1098,1099],{},[586,1100,943],{},[905,1102,1103,1108,1119],{},[923,1104,1105],{},[586,1106,1107],{},"precise",[923,1109,1110,1111,1118],{},"See ",[1112,1113,1117],"a",{"href":1114,"rel":1115},"https://threejs.org/docs/index.html?q=box3#api/en/math/Box3.setFromObject",[1116],"nofollow","Box3.setFromObject",".",[923,1120,1121],{},[586,1122,933],{},[905,1124,1125,1130,1133],{},[923,1126,1127],{},[586,1128,1129],{},"onAlign",[923,1131,1132],{},"Callback that fires when updating, after measurement.",[923,1134],{},[905,1136,1137,1141,1147],{},[923,1138,1139],{},[586,1140,588],{},[923,1142,1143,1144,1146],{},"If set, component will only update when ",[586,1145,588],{},"'s value changes. If unset, component will update every frame.",[923,1148,1149],{},[586,1150,1151],{},"undefined",[472,1153,1155],{"id":1154},"aligncallbackoptions","AlignCallbackOptions",[594,1157,1160],{"className":1158,"code":1159,"language":632,"meta":544,"style":544},"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",[586,1161,1162,1177,1183,1194,1199,1208,1218,1227,1236,1246,1256,1266,1275,1284,1293],{"__ignoreMap":544},[605,1163,1164,1167,1170,1174],{"class":607,"line":545},[605,1165,1166],{"class":644},"export",[605,1168,1169],{"class":618}," interface",[605,1171,1173],{"class":1172},"sBMFI"," AlignCallbackOptions",[605,1175,1176],{"class":610}," {\n",[605,1178,1179],{"class":607,"line":546},[605,1180,1182],{"class":1181},"sHwdD","  /** The next parent above \u003CAlign /> */\n",[605,1184,1185,1188,1191],{"class":607,"line":676},[605,1186,1187],{"class":614},"  parent",[605,1189,1190],{"class":610},":",[605,1192,1193],{"class":1172}," Object3D\n",[605,1195,1196],{"class":607,"line":697},[605,1197,1198],{"class":1181},"  /** The outmost container group of the \u003CAlign/> component */\n",[605,1200,1201,1204,1206],{"class":607,"line":707},[605,1202,1203],{"class":614},"  container",[605,1205,1190],{"class":610},[605,1207,1193],{"class":1172},[605,1209,1210,1213,1215],{"class":607,"line":713},[605,1211,1212],{"class":614},"  width",[605,1214,1190],{"class":610},[605,1216,1217],{"class":1172}," number\n",[605,1219,1220,1223,1225],{"class":607,"line":723},[605,1221,1222],{"class":614},"  height",[605,1224,1190],{"class":610},[605,1226,1217],{"class":1172},[605,1228,1229,1232,1234],{"class":607,"line":746},[605,1230,1231],{"class":614},"  depth",[605,1233,1190],{"class":610},[605,1235,1217],{"class":1172},[605,1237,1238,1241,1243],{"class":607,"line":758},[605,1239,1240],{"class":614},"  boundingBox",[605,1242,1190],{"class":610},[605,1244,1245],{"class":1172}," Box3\n",[605,1247,1248,1251,1253],{"class":607,"line":768},[605,1249,1250],{"class":614},"  boundingSphere",[605,1252,1190],{"class":610},[605,1254,1255],{"class":1172}," Sphere\n",[605,1257,1258,1261,1263],{"class":607,"line":773},[605,1259,1260],{"class":614},"  center",[605,1262,1190],{"class":610},[605,1264,1265],{"class":1172}," Vector3\n",[605,1267,1268,1271,1273],{"class":607,"line":799},[605,1269,1270],{"class":614},"  verticalAlignment",[605,1272,1190],{"class":610},[605,1274,1217],{"class":1172},[605,1276,1277,1280,1282],{"class":607,"line":599},[605,1278,1279],{"class":614},"  horizontalAlignment",[605,1281,1190],{"class":610},[605,1283,1217],{"class":1172},[605,1285,1286,1289,1291],{"class":607,"line":822},[605,1287,1288],{"class":614},"  depthAlignment",[605,1290,1190],{"class":610},[605,1292,1217],{"class":1172},[605,1294,1295],{"class":607,"line":833},[605,1296,1297],{"class":610},"}\n",[1299,1300,1301],"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":544,"searchDepth":545,"depth":546,"links":1303},[1304,1305,1306],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},{"id":1154,"depth":546,"text":1155},"Calculate and align children within their parent using bounding boxes.",{},{"title":37,"description":1307},"xKHSzqW-P7t9zP-D9aaYnfHnsXGeMVyRjLNmM0UU0M8",{"id":1312,"title":41,"body":1313,"description":1653,"extension":559,"links":560,"meta":1654,"navigation":562,"path":42,"seo":1655,"stem":43,"__hash__":1656},"docs/2.api/1.abstractions/billboard.md",{"type":469,"value":1314,"toc":1649},[1315,1320,1327,1329,1570,1572,1646],[576,1316,1317],{},[1318,1319],"abstractions-billboard",{},[582,1321,1322,1323,1326],{},"Adds a ",[586,1324,1325],{},"THREE.Group"," that always faces the camera.",[472,1328,15],{"id":592},[594,1330,1333],{"className":596,"code":1331,"highlights":1332,"language":601,"meta":544,"style":544},"\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",[546,768,822],[586,1334,1335,1355,1384,1402,1410,1414,1422,1441,1449,1486,1495,1529,1537,1545,1554,1562],{"__ignoreMap":544},[605,1336,1337,1339,1341,1343,1345,1347,1349,1351,1353],{"class":607,"line":545},[605,1338,611],{"class":610},[605,1340,615],{"class":614},[605,1342,619],{"class":618},[605,1344,622],{"class":618},[605,1346,625],{"class":610},[605,1348,628],{"class":610},[605,1350,632],{"class":631},[605,1352,628],{"class":610},[605,1354,637],{"class":610},[605,1356,1358,1360,1362,1365,1367,1370,1372,1374,1376,1378,1380,1382],{"class":1357,"line":546},[607,641],[605,1359,645],{"class":644},[605,1361,648],{"class":610},[605,1363,1364],{"class":651}," Billboard",[605,1366,655],{"class":610},[605,1368,1369],{"class":651}," Box",[605,1371,655],{"class":610},[605,1373,658],{"class":651},[605,1375,661],{"class":610},[605,1377,664],{"class":644},[605,1379,667],{"class":610},[605,1381,670],{"class":631},[605,1383,673],{"class":610},[605,1385,1386,1388,1390,1392,1394,1396,1398,1400],{"class":607,"line":676},[605,1387,645],{"class":644},[605,1389,648],{"class":610},[605,1391,683],{"class":651},[605,1393,661],{"class":610},[605,1395,664],{"class":644},[605,1397,667],{"class":610},[605,1399,692],{"class":631},[605,1401,673],{"class":610},[605,1403,1404,1406,1408],{"class":607,"line":697},[605,1405,700],{"class":610},[605,1407,615],{"class":614},[605,1409,637],{"class":610},[605,1411,1412],{"class":607,"line":707},[605,1413,710],{"emptyLinePlaceholder":562},[605,1415,1416,1418,1420],{"class":607,"line":713},[605,1417,611],{"class":610},[605,1419,718],{"class":614},[605,1421,637],{"class":610},[605,1423,1424,1426,1428,1430,1432,1434,1437,1439],{"class":607,"line":723},[605,1425,726],{"class":610},[605,1427,729],{"class":614},[605,1429,732],{"class":618},[605,1431,625],{"class":610},[605,1433,628],{"class":610},[605,1435,1436],{"class":631},"#333333",[605,1438,628],{"class":610},[605,1440,637],{"class":610},[605,1442,1443,1445,1447],{"class":607,"line":746},[605,1444,749],{"class":610},[605,1446,763],{"class":614},[605,1448,755],{"class":610},[605,1450,1451,1453,1455,1457,1460,1462,1464,1467,1469,1472,1474,1476,1479,1482,1484],{"class":607,"line":758},[605,1452,749],{"class":610},[605,1454,752],{"class":614},[605,1456,781],{"class":610},[605,1458,1459],{"class":618},"position",[605,1461,625],{"class":610},[605,1463,628],{"class":610},[605,1465,1466],{"class":610},"[",[605,1468,937],{"class":791},[605,1470,1471],{"class":610},", ",[605,1473,937],{"class":791},[605,1475,1471],{"class":610},[605,1477,1478],{"class":791},"10",[605,1480,1481],{"class":610},"]",[605,1483,628],{"class":610},[605,1485,755],{"class":610},[605,1487,1489,1491,1493],{"class":1488,"line":768},[607,641],[605,1490,749],{"class":610},[605,1492,41],{"class":614},[605,1494,637],{"class":610},[605,1496,1497,1499,1501,1503,1505,1507,1509,1511,1514,1516,1518,1520,1523,1525,1527],{"class":607,"line":773},[605,1498,825],{"class":610},[605,1500,193],{"class":614},[605,1502,781],{"class":610},[605,1504,784],{"class":618},[605,1506,625],{"class":610},[605,1508,628],{"class":610},[605,1510,1466],{"class":610},[605,1512,1513],{"class":791},"0.5",[605,1515,1471],{"class":610},[605,1517,1513],{"class":791},[605,1519,1471],{"class":610},[605,1521,1522],{"class":791},"0.001",[605,1524,1481],{"class":610},[605,1526,628],{"class":610},[605,1528,637],{"class":610},[605,1530,1531,1533,1535],{"class":607,"line":799},[605,1532,836],{"class":610},[605,1534,849],{"class":614},[605,1536,755],{"class":610},[605,1538,1539,1541,1543],{"class":607,"line":599},[605,1540,857],{"class":610},[605,1542,193],{"class":614},[605,1544,637],{"class":610},[605,1546,1548,1550,1552],{"class":1547,"line":822},[607,641],[605,1549,867],{"class":610},[605,1551,41],{"class":614},[605,1553,637],{"class":610},[605,1555,1556,1558,1560],{"class":607,"line":833},[605,1557,877],{"class":610},[605,1559,729],{"class":614},[605,1561,637],{"class":610},[605,1563,1564,1566,1568],{"class":607,"line":844},[605,1565,700],{"class":610},[605,1567,718],{"class":614},[605,1569,637],{"class":610},[472,1571,894],{"id":893},[899,1573,1574,1584],{},[902,1575,1576],{},[905,1577,1578,1580,1582],{},[908,1579,910],{"align":969},[908,1581,913],{"align":969},[908,1583,916],{},[918,1585,1586,1604,1618,1632],{},[905,1587,1588,1593,1600],{},[923,1589,1590],{"align":969},[586,1591,1592],{},"autoUpdate",[923,1594,1595,1596,1599],{"align":969},"Whether the ",[586,1597,1598],{},"\u003CBillboard />"," should face the camera automatically on every frame.",[923,1601,1602],{},[586,1603,933],{},[905,1605,1606,1611,1614],{},[923,1607,1608],{"align":969},[586,1609,1610],{},"lockX",[923,1612,1613],{"align":969},"Whether to lock the x-axis.",[923,1615,1616],{},[586,1617,943],{},[905,1619,1620,1625,1628],{},[923,1621,1622],{"align":969},[586,1623,1624],{},"lockY",[923,1626,1627],{"align":969},"Whether to lock the y-axis.",[923,1629,1630],{},[586,1631,943],{},[905,1633,1634,1639,1642],{},[923,1635,1636],{"align":969},[586,1637,1638],{},"lockZ",[923,1640,1641],{"align":969},"Whether to lock the z-axis.",[923,1643,1644],{},[586,1645,943],{},[1299,1647,1648],{},"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":544,"searchDepth":545,"depth":546,"links":1650},[1651,1652],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},"Make objects always face the camera automatically.",{},{"title":41,"description":1653},"H0n9HWJ0zpK9LW-fd3nQd2xaa9PwDLLnVK3zImwMAZs",{"id":1658,"title":45,"body":1659,"description":2238,"extension":559,"links":560,"meta":2239,"navigation":562,"path":46,"seo":2240,"stem":47,"__hash__":2241},"docs/2.api/1.abstractions/camera-shake.md",{"type":469,"value":1660,"toc":2234},[1661,1666,1719,1721,2045,2084,2086,2232],[576,1662,1663],{},[1664,1665],"abstractions-camera-shake",{},[582,1667,1668,1671,1672,1471,1676,1680,1681,1684,1685,1471,1688,1691,1692,1695,1696,1471,1699,1471,1702,1705,1706,1709,1710,1118],{},[586,1669,1670],{},"\u003CCameraShake />"," is a component that adds ",[1673,1674,1675],"strong",{},"natural",[1677,1678,1679],"em",{},"noise-driven motion"," to the ",[1673,1682,1683],{},"active camera",".\nIt offers ",[1673,1686,1687],{},"per-axis control",[1673,1689,1690],{},"adjustable intensity",", and ",[1677,1693,1694],{},"optional decay"," — perfect for ",[1677,1697,1698],{},"handheld feel",[1677,1700,1701],{},"footsteps",[1677,1703,1704],{},"impacts",", or ",[1677,1707,1708],{},"engine rumble"," — and is based on the ",[1112,1711,1714,1715,1718],{"href":1712,"rel":1713},"https://drei.docs.pmnd.rs/staging/camera-shake#camerashake",[1116],"Drei ",[586,1716,1717],{},"CameraShake"," component",[472,1720,15],{"id":592},[594,1722,1725],{"className":596,"code":1723,"highlights":1724,"language":601,"meta":544,"style":544},"\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",[546,773,844],[586,1726,1727,1747,1771,1789,1797,1801,1809,1827,1860,1871,1875,1938,1958,1979,2012,2020,2029,2037],{"__ignoreMap":544},[605,1728,1729,1731,1733,1735,1737,1739,1741,1743,1745],{"class":607,"line":545},[605,1730,611],{"class":610},[605,1732,615],{"class":614},[605,1734,619],{"class":618},[605,1736,622],{"class":618},[605,1738,625],{"class":610},[605,1740,628],{"class":610},[605,1742,632],{"class":631},[605,1744,628],{"class":610},[605,1746,637],{"class":610},[605,1748,1750,1752,1754,1757,1759,1761,1763,1765,1767,1769],{"class":1749,"line":546},[607,641],[605,1751,645],{"class":644},[605,1753,648],{"class":610},[605,1755,1756],{"class":651}," CameraShake",[605,1758,655],{"class":610},[605,1760,658],{"class":651},[605,1762,661],{"class":610},[605,1764,664],{"class":644},[605,1766,667],{"class":610},[605,1768,670],{"class":631},[605,1770,673],{"class":610},[605,1772,1773,1775,1777,1779,1781,1783,1785,1787],{"class":607,"line":676},[605,1774,645],{"class":644},[605,1776,648],{"class":610},[605,1778,683],{"class":651},[605,1780,661],{"class":610},[605,1782,664],{"class":644},[605,1784,667],{"class":610},[605,1786,692],{"class":631},[605,1788,673],{"class":610},[605,1790,1791,1793,1795],{"class":607,"line":697},[605,1792,700],{"class":610},[605,1794,615],{"class":614},[605,1796,637],{"class":610},[605,1798,1799],{"class":607,"line":707},[605,1800,710],{"emptyLinePlaceholder":562},[605,1802,1803,1805,1807],{"class":607,"line":713},[605,1804,611],{"class":610},[605,1806,718],{"class":614},[605,1808,637],{"class":610},[605,1810,1811,1813,1815,1817,1819,1821,1823,1825],{"class":607,"line":723},[605,1812,726],{"class":610},[605,1814,729],{"class":614},[605,1816,732],{"class":618},[605,1818,625],{"class":610},[605,1820,628],{"class":610},[605,1822,739],{"class":631},[605,1824,628],{"class":610},[605,1826,637],{"class":610},[605,1828,1829,1831,1833,1835,1837,1839,1841,1843,1845,1847,1849,1851,1854,1856,1858],{"class":607,"line":746},[605,1830,749],{"class":610},[605,1832,752],{"class":614},[605,1834,781],{"class":610},[605,1836,1459],{"class":618},[605,1838,625],{"class":610},[605,1840,628],{"class":610},[605,1842,1466],{"class":610},[605,1844,937],{"class":791},[605,1846,1471],{"class":610},[605,1848,792],{"class":791},[605,1850,1471],{"class":610},[605,1852,1853],{"class":791},"6",[605,1855,1481],{"class":610},[605,1857,628],{"class":610},[605,1859,755],{"class":610},[605,1861,1862,1864,1866,1869],{"class":607,"line":758},[605,1863,749],{"class":610},[605,1865,763],{"class":614},[605,1867,1868],{"class":618}," make-default",[605,1870,755],{"class":610},[605,1872,1873],{"class":607,"line":768},[605,1874,710],{"emptyLinePlaceholder":562},[605,1876,1878,1880,1882,1884,1887,1889,1891,1894,1896,1898,1901,1903,1905,1908,1910,1912,1915,1917,1919,1921,1923,1925,1928,1930,1932,1934,1936],{"class":1877,"line":773},[607,641],[605,1879,749],{"class":610},[605,1881,1717],{"class":614},[605,1883,781],{"class":610},[605,1885,1886],{"class":618},"intensity",[605,1888,625],{"class":610},[605,1890,628],{"class":610},[605,1892,1893],{"class":791},"1",[605,1895,628],{"class":610},[605,1897,781],{"class":610},[605,1899,1900],{"class":618},"max-yaw",[605,1902,625],{"class":610},[605,1904,628],{"class":610},[605,1906,1907],{"class":791},"0.01",[605,1909,628],{"class":610},[605,1911,781],{"class":610},[605,1913,1914],{"class":618},"max-pitch",[605,1916,625],{"class":610},[605,1918,628],{"class":610},[605,1920,1907],{"class":791},[605,1922,628],{"class":610},[605,1924,781],{"class":610},[605,1926,1927],{"class":618},"max-roll",[605,1929,625],{"class":610},[605,1931,628],{"class":610},[605,1933,1907],{"class":791},[605,1935,628],{"class":610},[605,1937,755],{"class":610},[605,1939,1940,1942,1944,1946,1948,1950,1952,1954,1956],{"class":607,"line":799},[605,1941,825],{"class":610},[605,1943,778],{"class":614},[605,1945,781],{"class":610},[605,1947,784],{"class":618},[605,1949,625],{"class":610},[605,1951,628],{"class":610},[605,1953,792],{"class":791},[605,1955,628],{"class":610},[605,1957,755],{"class":610},[605,1959,1960,1962,1964,1966,1969,1971,1973,1975,1977],{"class":607,"line":599},[605,1961,825],{"class":610},[605,1963,828],{"class":614},[605,1965,781],{"class":610},[605,1967,1968],{"class":618},"position-y",[605,1970,625],{"class":610},[605,1972,628],{"class":610},[605,1974,1513],{"class":791},[605,1976,628],{"class":610},[605,1978,637],{"class":610},[605,1980,1981,1983,1985,1987,1990,1992,1994,1996,1998,2000,2002,2004,2006,2008,2010],{"class":607,"line":822},[605,1982,836],{"class":610},[605,1984,839],{"class":614},[605,1986,781],{"class":610},[605,1988,1989],{"class":618},"args",[605,1991,625],{"class":610},[605,1993,628],{"class":610},[605,1995,1466],{"class":610},[605,1997,1893],{"class":791},[605,1999,1471],{"class":610},[605,2001,1893],{"class":791},[605,2003,1471],{"class":610},[605,2005,1893],{"class":791},[605,2007,1481],{"class":610},[605,2009,628],{"class":610},[605,2011,755],{"class":610},[605,2013,2014,2016,2018],{"class":607,"line":833},[605,2015,836],{"class":610},[605,2017,849],{"class":614},[605,2019,755],{"class":610},[605,2021,2023,2025,2027],{"class":2022,"line":844},[607,641],[605,2024,857],{"class":610},[605,2026,828],{"class":614},[605,2028,637],{"class":610},[605,2030,2031,2033,2035],{"class":607,"line":854},[605,2032,877],{"class":610},[605,2034,729],{"class":614},[605,2036,637],{"class":610},[605,2038,2039,2041,2043],{"class":607,"line":600},[605,2040,700],{"class":610},[605,2042,718],{"class":614},[605,2044,637],{"class":610},[2046,2047,2048,2069],"prose-note",{},[582,2049,2050,2052,2053,2058,2059,2062,2063,2068],{},[586,2051,1670],{}," is fully compatible with ",[1673,2054,2055],{},[586,2056,2057],{},"\u003COrbitControls />",".\nTo ensure it works ",[1677,2060,2061],{},"as expected",", make sure to add the ",[1673,2064,2065],{},[586,2066,2067],{},"make-default"," prop:",[594,2070,2072],{"className":596,"code":2071,"language":601,"meta":544,"style":544},"\u003COrbitControls make-default />\n",[586,2073,2074],{"__ignoreMap":544},[605,2075,2076,2078,2080,2082],{"class":607,"line":545},[605,2077,611],{"class":610},[605,2079,763],{"class":614},[605,2081,1868],{"class":618},[605,2083,755],{"class":610},[472,2085,894],{"id":893},[899,2087,2088,2098],{},[902,2089,2090],{},[905,2091,2092,2094,2096],{},[908,2093,910],{},[908,2095,913],{},[908,2097,916],{},[918,2099,2100,2113,2129,2147,2161,2175,2189,2204,2218],{},[905,2101,2102,2106,2109],{},[923,2103,2104],{},[586,2105,1886],{},[923,2107,2108],{},"The intensity of the shake (0–1).",[923,2110,2111],{},[586,2112,1893],{},[905,2114,2115,2120,2125],{},[923,2116,2117],{},[586,2118,2119],{},"decay",[923,2121,930,2122,2124],{},[586,2123,933],{},", intensity decays over time.",[923,2126,2127],{},[586,2128,943],{},[905,2130,2131,2136,2142],{},[923,2132,2133],{},[586,2134,2135],{},"decayRate",[923,2137,2138,2139,2141],{},"How fast intensity changes when ",[586,2140,2119],{}," is enabled.",[923,2143,2144],{},[586,2145,2146],{},"0.65",[905,2148,2149,2154,2157],{},[923,2150,2151],{},[586,2152,2153],{},"maxYaw",[923,2155,2156],{},"Maximum yaw angle in radians.",[923,2158,2159],{},[586,2160,1907],{},[905,2162,2163,2168,2171],{},[923,2164,2165],{},[586,2166,2167],{},"maxPitch",[923,2169,2170],{},"Maximum pitch angle in radians.",[923,2172,2173],{},[586,2174,1907],{},[905,2176,2177,2182,2185],{},[923,2178,2179],{},[586,2180,2181],{},"maxRoll",[923,2183,2184],{},"Maximum roll angle in radians.",[923,2186,2187],{},[586,2188,1907],{},[905,2190,2191,2196,2199],{},[923,2192,2193],{},[586,2194,2195],{},"yawFrequency",[923,2197,2198],{},"Frequency of yaw oscillation.",[923,2200,2201],{},[586,2202,2203],{},"0.1",[905,2205,2206,2211,2214],{},[923,2207,2208],{},[586,2209,2210],{},"pitchFrequency",[923,2212,2213],{},"Frequency of pitch oscillation.",[923,2215,2216],{},[586,2217,2203],{},[905,2219,2220,2225,2228],{},[923,2221,2222],{},[586,2223,2224],{},"rollFrequency",[923,2226,2227],{},"Frequency of roll oscillation.",[923,2229,2230],{},[586,2231,2203],{},[1299,2233,1648],{},{"title":544,"searchDepth":545,"depth":546,"links":2235},[2236,2237],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},"Apply smooth camera shake to the active camera.",{},{"title":45,"description":2238},"tbo--_1LLyK1wDUHqKdzu8KZiLMIGya4l_8miKZTrMc",{"id":2243,"title":49,"body":2244,"description":2549,"extension":559,"links":560,"meta":2550,"navigation":562,"path":50,"seo":2551,"stem":51,"__hash__":2552},"docs/2.api/1.abstractions/edges.md",{"type":469,"value":2245,"toc":2545},[2246,2251,2268,2270,2461,2463,2480,2543],[576,2247,2248],{},[2249,2250],"abstractions-edges",{},[582,2252,2253,2254,2257,2258,2263,2264,2267],{},"The ",[586,2255,2256],{},"cientos"," package provides an abstraction of ",[1112,2259,2262],{"href":2260,"rel":2261},"https://threejs.org/docs/#api/en/geometries/EdgesGeometry",[1116],"EdgesGeometry"," from Three.js, ",[586,2265,2266],{},"\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.",[472,2269,15],{"id":592},[594,2271,2274],{"className":596,"code":2272,"highlights":2273,"language":601,"meta":544,"style":544},"\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",[676,799],[586,2275,2276,2296,2314,2342,2350,2354,2362,2370,2403,2411,2419,2428,2437,2445,2453],{"__ignoreMap":544},[605,2277,2278,2280,2282,2284,2286,2288,2290,2292,2294],{"class":607,"line":545},[605,2279,611],{"class":610},[605,2281,615],{"class":614},[605,2283,619],{"class":618},[605,2285,622],{"class":618},[605,2287,625],{"class":610},[605,2289,628],{"class":610},[605,2291,632],{"class":631},[605,2293,628],{"class":610},[605,2295,637],{"class":610},[605,2297,2298,2300,2302,2304,2306,2308,2310,2312],{"class":607,"line":546},[605,2299,645],{"class":644},[605,2301,648],{"class":610},[605,2303,683],{"class":651},[605,2305,661],{"class":610},[605,2307,664],{"class":644},[605,2309,667],{"class":610},[605,2311,692],{"class":631},[605,2313,673],{"class":610},[605,2315,2317,2319,2321,2323,2325,2328,2330,2332,2334,2336,2338,2340],{"class":2316,"line":676},[607,641],[605,2318,645],{"class":644},[605,2320,648],{"class":610},[605,2322,1369],{"class":651},[605,2324,655],{"class":610},[605,2326,2327],{"class":651}," Edges",[605,2329,655],{"class":610},[605,2331,658],{"class":651},[605,2333,661],{"class":610},[605,2335,664],{"class":644},[605,2337,667],{"class":610},[605,2339,670],{"class":631},[605,2341,673],{"class":610},[605,2343,2344,2346,2348],{"class":607,"line":697},[605,2345,700],{"class":610},[605,2347,615],{"class":614},[605,2349,637],{"class":610},[605,2351,2352],{"class":607,"line":707},[605,2353,710],{"emptyLinePlaceholder":562},[605,2355,2356,2358,2360],{"class":607,"line":713},[605,2357,611],{"class":610},[605,2359,718],{"class":614},[605,2361,637],{"class":610},[605,2363,2364,2366,2368],{"class":607,"line":723},[605,2365,726],{"class":610},[605,2367,729],{"class":614},[605,2369,637],{"class":610},[605,2371,2372,2374,2376,2378,2380,2382,2384,2386,2388,2390,2392,2394,2397,2399,2401],{"class":607,"line":746},[605,2373,749],{"class":610},[605,2375,752],{"class":614},[605,2377,781],{"class":610},[605,2379,1459],{"class":618},[605,2381,625],{"class":610},[605,2383,628],{"class":610},[605,2385,1466],{"class":610},[605,2387,937],{"class":791},[605,2389,1471],{"class":610},[605,2391,792],{"class":791},[605,2393,1471],{"class":610},[605,2395,2396],{"class":791},"5",[605,2398,1481],{"class":610},[605,2400,628],{"class":610},[605,2402,755],{"class":610},[605,2404,2405,2407,2409],{"class":607,"line":758},[605,2406,749],{"class":610},[605,2408,763],{"class":614},[605,2410,755],{"class":610},[605,2412,2413,2415,2417],{"class":607,"line":768},[605,2414,749],{"class":610},[605,2416,193],{"class":614},[605,2418,637],{"class":610},[605,2420,2421,2423,2426],{"class":607,"line":773},[605,2422,825],{"class":610},[605,2424,2425],{"class":614},"TresMeshBasicMaterial",[605,2427,755],{"class":610},[605,2429,2431,2433,2435],{"class":2430,"line":799},[607,641],[605,2432,825],{"class":610},[605,2434,49],{"class":614},[605,2436,755],{"class":610},[605,2438,2439,2441,2443],{"class":607,"line":599},[605,2440,867],{"class":610},[605,2442,193],{"class":614},[605,2444,637],{"class":610},[605,2446,2447,2449,2451],{"class":607,"line":822},[605,2448,877],{"class":610},[605,2450,729],{"class":614},[605,2452,637],{"class":610},[605,2454,2455,2457,2459],{"class":607,"line":833},[605,2456,700],{"class":610},[605,2458,718],{"class":614},[605,2460,637],{"class":610},[472,2462,894],{"id":893},[582,2464,2465,2467,2468,2473,2474,2479],{},[586,2466,2266],{}," is based on ",[1112,2469,2472],{"href":2470,"rel":2471},"https://threejs.org/docs/#api/en/objects/LineSegments",[1116],"LineSegments"," & ",[1112,2475,2478],{"href":2476,"rel":2477},"https://threejs.org/docs/#api/en/objects/Line",[1116],"Line"," and supports all of its props.",[899,2481,2482,2492],{},[902,2483,2484],{},[905,2485,2486,2488,2490],{},[908,2487,910],{"align":969},[908,2489,913],{"align":969},[908,2491,916],{},[918,2493,2494,2526],{},[905,2495,2496,2501,2521],{},[923,2497,2498],{"align":969},[1673,2499,2500],{},"color",[923,2502,2503,2506,2507,2510,2511,2516,2517],{"align":969},[586,2504,2505],{},"THREE.Color"," — Color of the edges. ",[2508,2509],"br",{}," More informations : ",[1112,2512,2515],{"href":2513,"rel":2514},"https://docs.tresjs.org/api/instances-arguments-and-props.html#colors",[1116],"TresColor"," — ",[1112,2518,2505],{"href":2519,"rel":2520},"https://threejs.org/docs/#api/en/math/Color",[1116],[923,2522,2523],{},[586,2524,2525],{},"#ff0000",[905,2527,2528,2533,2539],{},[923,2529,2530],{"align":969},[1673,2531,2532],{},"threshold",[923,2534,2535,2538],{"align":969},[586,2536,2537],{},"number"," — An edge is only rendered if the angle (in degrees) between the face normals of the adjoining faces exceeds this value",[923,2540,2541],{},[586,2542,1893],{},[1299,2544,1648],{},{"title":544,"searchDepth":545,"depth":546,"links":2546},[2547,2548],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},"Render visible edges of objects with enhanced visual quality.",{},{"title":49,"description":2549},"vRk1JMb5etr7hxo-Xvqb4plDDBOVqDhpMNgSnbTVmEE",{"id":2554,"title":53,"body":2555,"description":3251,"extension":559,"links":560,"meta":3252,"navigation":562,"path":54,"seo":3253,"stem":55,"__hash__":3254},"docs/2.api/1.abstractions/fit.md",{"type":469,"value":2556,"toc":3247},[2557,2563,2569,2579,2585,2587,3108,3110,3244],[2558,2559,2560],"scene-wrapper",{},[2561,2562],"abstractions-fit",{},[582,2564,2565,2568],{},[586,2566,2567],{},"\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.",[582,2570,2571,2572,2575,2576,1118],{},"Alternatively, the children can be fit into a ",[586,2573,2574],{},"Box3"," or an ",[586,2577,2578],{},"Object3D",[582,2580,2581,2582,2584],{},"Or the children can simply be resized. With ",[586,2583,2567],{}," the children are scaled relative to the center of their calculated bounding box.",[472,2586,15],{"id":592},[594,2588,2592],{"className":596,"code":2589,"highlights":2590,"language":601,"meta":544,"style":544},"\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",[546,884,2591],27,[586,2593,2594,2614,2638,2656,2681,2685,2706,2752,2791,2821,2826,2830,2847,2862,2870,2874,2882,2901,2933,2941,2950,2958,2988,3005,3020,3045,3051,3060,3090,3099],{"__ignoreMap":544},[605,2595,2596,2598,2600,2602,2604,2606,2608,2610,2612],{"class":607,"line":545},[605,2597,611],{"class":610},[605,2599,615],{"class":614},[605,2601,619],{"class":618},[605,2603,622],{"class":618},[605,2605,625],{"class":610},[605,2607,628],{"class":610},[605,2609,632],{"class":631},[605,2611,628],{"class":610},[605,2613,637],{"class":610},[605,2615,2617,2619,2621,2624,2626,2628,2630,2632,2634,2636],{"class":2616,"line":546},[607,641],[605,2618,645],{"class":644},[605,2620,648],{"class":610},[605,2622,2623],{"class":651}," Fit",[605,2625,655],{"class":610},[605,2627,658],{"class":651},[605,2629,661],{"class":610},[605,2631,664],{"class":644},[605,2633,667],{"class":610},[605,2635,670],{"class":631},[605,2637,673],{"class":610},[605,2639,2640,2642,2644,2646,2648,2650,2652,2654],{"class":607,"line":676},[605,2641,645],{"class":644},[605,2643,648],{"class":610},[605,2645,683],{"class":651},[605,2647,661],{"class":610},[605,2649,664],{"class":644},[605,2651,667],{"class":610},[605,2653,692],{"class":631},[605,2655,673],{"class":610},[605,2657,2658,2660,2662,2665,2667,2670,2672,2674,2676,2679],{"class":607,"line":697},[605,2659,645],{"class":644},[605,2661,648],{"class":610},[605,2663,2664],{"class":651}," BoxGeometry",[605,2666,655],{"class":610},[605,2668,2669],{"class":651}," MeshNormalMaterial",[605,2671,661],{"class":610},[605,2673,664],{"class":644},[605,2675,667],{"class":610},[605,2677,2678],{"class":631},"three",[605,2680,673],{"class":610},[605,2682,2683],{"class":607,"line":707},[605,2684,710],{"emptyLinePlaceholder":562},[605,2686,2687,2690,2693,2695,2698,2701,2703],{"class":607,"line":713},[605,2688,2689],{"class":618},"const",[605,2691,2692],{"class":651}," positions",[605,2694,1190],{"class":610},[605,2696,2697],{"class":1172}," number",[605,2699,2700],{"class":651},"[][] ",[605,2702,625],{"class":610},[605,2704,2705],{"class":651}," []\n",[605,2707,2708,2711,2714,2717,2720,2722,2725,2728,2730,2733,2736,2738,2740,2743,2746,2749],{"class":607,"line":723},[605,2709,2710],{"class":644},"for",[605,2712,2713],{"class":651}," (",[605,2715,2716],{"class":618},"let",[605,2718,2719],{"class":651}," y ",[605,2721,625],{"class":610},[605,2723,2724],{"class":791}," 100",[605,2726,2727],{"class":610},";",[605,2729,2719],{"class":651},[605,2731,2732],{"class":610},"\u003C=",[605,2734,2735],{"class":791}," 120",[605,2737,2727],{"class":610},[605,2739,2719],{"class":651},[605,2741,2742],{"class":610},"+=",[605,2744,2745],{"class":791}," 10",[605,2747,2748],{"class":651},") ",[605,2750,2751],{"class":610},"{\n",[605,2753,2754,2757,2759,2761,2764,2767,2769,2771,2773,2776,2778,2780,2782,2785,2787,2789],{"class":607,"line":746},[605,2755,2756],{"class":644},"  for",[605,2758,2713],{"class":614},[605,2760,2716],{"class":618},[605,2762,2763],{"class":651}," x",[605,2765,2766],{"class":610}," =",[605,2768,2724],{"class":791},[605,2770,2727],{"class":610},[605,2772,2763],{"class":651},[605,2774,2775],{"class":610}," \u003C=",[605,2777,2735],{"class":791},[605,2779,2727],{"class":610},[605,2781,2763],{"class":651},[605,2783,2784],{"class":610}," +=",[605,2786,2745],{"class":791},[605,2788,2748],{"class":614},[605,2790,2751],{"class":610},[605,2792,2793,2796,2798,2802,2805,2808,2810,2813,2815,2818],{"class":607,"line":758},[605,2794,2795],{"class":651},"    positions",[605,2797,1118],{"class":610},[605,2799,2801],{"class":2800},"s2Zo4","push",[605,2803,2804],{"class":614},"([",[605,2806,2807],{"class":651},"x",[605,2809,655],{"class":610},[605,2811,2812],{"class":651}," y",[605,2814,655],{"class":610},[605,2816,2817],{"class":791}," 9999",[605,2819,2820],{"class":614},"])\n",[605,2822,2823],{"class":607,"line":768},[605,2824,2825],{"class":610},"  }\n",[605,2827,2828],{"class":607,"line":773},[605,2829,1297],{"class":610},[605,2831,2832,2834,2837,2839,2842,2844],{"class":607,"line":799},[605,2833,2689],{"class":618},[605,2835,2836],{"class":651}," geom ",[605,2838,625],{"class":610},[605,2840,2841],{"class":610}," new",[605,2843,2664],{"class":2800},[605,2845,2846],{"class":651},"()\n",[605,2848,2849,2851,2854,2856,2858,2860],{"class":607,"line":599},[605,2850,2689],{"class":618},[605,2852,2853],{"class":651}," mat ",[605,2855,625],{"class":610},[605,2857,2841],{"class":610},[605,2859,2669],{"class":2800},[605,2861,2846],{"class":651},[605,2863,2864,2866,2868],{"class":607,"line":822},[605,2865,700],{"class":610},[605,2867,615],{"class":614},[605,2869,637],{"class":610},[605,2871,2872],{"class":607,"line":833},[605,2873,710],{"emptyLinePlaceholder":562},[605,2875,2876,2878,2880],{"class":607,"line":844},[605,2877,611],{"class":610},[605,2879,718],{"class":614},[605,2881,637],{"class":610},[605,2883,2884,2886,2888,2890,2892,2894,2897,2899],{"class":607,"line":854},[605,2885,726],{"class":610},[605,2887,729],{"class":614},[605,2889,732],{"class":618},[605,2891,625],{"class":610},[605,2893,628],{"class":610},[605,2895,2896],{"class":631},"#4F4F4F",[605,2898,628],{"class":610},[605,2900,637],{"class":610},[605,2902,2903,2905,2907,2909,2911,2913,2915,2917,2919,2921,2923,2925,2927,2929,2931],{"class":607,"line":600},[605,2904,749],{"class":610},[605,2906,752],{"class":614},[605,2908,781],{"class":610},[605,2910,1459],{"class":618},[605,2912,625],{"class":610},[605,2914,628],{"class":610},[605,2916,1466],{"class":610},[605,2918,1893],{"class":791},[605,2920,1471],{"class":610},[605,2922,1893],{"class":791},[605,2924,1471],{"class":610},[605,2926,1893],{"class":791},[605,2928,1481],{"class":610},[605,2930,628],{"class":610},[605,2932,755],{"class":610},[605,2934,2935,2937,2939],{"class":607,"line":874},[605,2936,749],{"class":610},[605,2938,763],{"class":614},[605,2940,755],{"class":610},[605,2942,2944,2946,2948],{"class":2943,"line":884},[607,641],[605,2945,749],{"class":610},[605,2947,53],{"class":614},[605,2949,637],{"class":610},[605,2951,2953,2955],{"class":607,"line":2952},21,[605,2954,825],{"class":610},[605,2956,2957],{"class":614},"TresMesh\n",[605,2959,2961,2964,2966,2968,2971,2974,2976,2979,2982,2985],{"class":607,"line":2960},22,[605,2962,2963],{"class":644},"        v-for",[605,2965,625],{"class":610},[605,2967,628],{"class":610},[605,2969,2970],{"class":610},"(",[605,2972,2973],{"class":651},"pos",[605,2975,1471],{"class":610},[605,2977,2978],{"class":651},"index",[605,2980,2981],{"class":610},") in ",[605,2983,2984],{"class":651},"positions",[605,2986,2987],{"class":610},"\"\n",[605,2989,2991,2994,2997,2999,3001,3003],{"class":607,"line":2990},23,[605,2992,2993],{"class":610},"        :",[605,2995,2996],{"class":618},"key",[605,2998,625],{"class":610},[605,3000,628],{"class":610},[605,3002,2978],{"class":651},[605,3004,2987],{"class":610},[605,3006,3008,3010,3012,3014,3016,3018],{"class":607,"line":3007},24,[605,3009,2993],{"class":610},[605,3011,1459],{"class":618},[605,3013,625],{"class":610},[605,3015,628],{"class":610},[605,3017,2973],{"class":651},[605,3019,2987],{"class":610},[605,3021,3023,3025,3027,3029,3031,3033,3036,3038,3041,3043],{"class":607,"line":3022},25,[605,3024,2993],{"class":610},[605,3026,1989],{"class":618},[605,3028,625],{"class":610},[605,3030,628],{"class":610},[605,3032,1466],{"class":610},[605,3034,3035],{"class":651},"geom",[605,3037,1471],{"class":610},[605,3039,3040],{"class":651},"mat",[605,3042,1481],{"class":610},[605,3044,2987],{"class":610},[605,3046,3048],{"class":607,"line":3047},26,[605,3049,3050],{"class":610},"      />\n",[605,3052,3054,3056,3058],{"class":3053,"line":2591},[607,641],[605,3055,867],{"class":610},[605,3057,53],{"class":614},[605,3059,637],{"class":610},[605,3061,3063,3065,3068,3070,3072,3074,3076,3078,3080,3082,3084,3086,3088],{"class":607,"line":3062},28,[605,3064,749],{"class":610},[605,3066,3067],{"class":614},"TresGridHelper",[605,3069,781],{"class":610},[605,3071,1989],{"class":618},[605,3073,625],{"class":610},[605,3075,628],{"class":610},[605,3077,1466],{"class":610},[605,3079,1893],{"class":791},[605,3081,1471],{"class":610},[605,3083,1893],{"class":791},[605,3085,1481],{"class":610},[605,3087,628],{"class":610},[605,3089,755],{"class":610},[605,3091,3093,3095,3097],{"class":607,"line":3092},29,[605,3094,877],{"class":610},[605,3096,729],{"class":614},[605,3098,637],{"class":610},[605,3100,3102,3104,3106],{"class":607,"line":3101},30,[605,3103,700],{"class":610},[605,3105,718],{"class":614},[605,3107,637],{"class":610},[472,3109,894],{"id":893},[899,3111,3112,3121],{},[902,3113,3114],{},[905,3115,3116,3119],{},[908,3117,3118],{"align":969},"Name",[908,3120,913],{"align":969},[918,3122,3123,3220],{},[905,3124,3125,3130],{},[923,3126,3127],{"align":969},[1673,3128,3129],{},"into",[923,3131,930,3132,3134,3135,3212,3214,3215,3217],{"align":969},[586,3133,3129],{}," is:",[3136,3137,3138,3148,3157,3165,3173,3184,3191],"ul",{},[3139,3140,3141,3142,3144,3145,3147],"li",{},"omitted or explicitly ",[586,3143,1151],{},": position/scale children to fit into a 1 × 1 × 1 ",[586,3146,2574],{}," at world origin.",[3139,3149,3150,3153,3154,3156],{},[586,3151,3152],{},"null",": turn off ",[586,3155,2567],{},"; reset scale/position of children.",[3139,3158,3159,3161,3162,1118],{},[586,3160,2537],{},": convert argument to ",[586,3163,3164],{},"Vector3(number, number, number)",[3139,3166,3167,3161,3170,1118],{},[586,3168,3169],{},"[number, number, number]",[586,3171,3172],{},"Vector3",[3139,3174,3175,3177,3178,3180,3181,3183],{},[586,3176,3172],{},": position/scale children to fit inside a ",[586,3179,2574],{}," of size ",[586,3182,3172],{}," at target objects' cumulative center.",[3139,3185,3186,3188,3189,1118],{},[586,3187,2574],{},": position/scale children to fit inside ",[586,3190,2574],{},[3139,3192,3193,3195,3196,3198,3199,3198,3206,3208,3209,3211],{},[586,3194,2578],{},": position/scale children to fit inside calculated ",[586,3197,2574],{},". ",[1112,3200,1110,3203],{"href":3201,"rel":3202},"https://threejs.org/docs/#api/en/math/Box3.setFromObject",[1116],[586,3204,3205],{},"THREE.Box3.setFromObject",[586,3207,2567],{}," must not contain the ",[586,3210,2578],{}," and vice-versa.",[2508,3213],{},"default:",[2508,3216],{},[586,3218,3219],{},"new Box3(new Vector3(-0.5, -0.5, -0.5), new Vector3(0.5, 0.5, 0.5))",[905,3221,3222,3226],{},[923,3223,3224],{"align":969},[1673,3225,1107],{},[923,3227,3228,3236,3238,3214,3240,3242],{"align":969},[1112,3229,1110,3231,3233,3234],{"href":1114,"rel":3230},[1116],[586,3232,1107],{}," argument in ",[586,3235,3205],{},[2508,3237],{},[2508,3239],{},[2508,3241],{},[586,3243,943],{},[1299,3245,3246],{},"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":544,"searchDepth":545,"depth":546,"links":3248},[3249,3250],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},"Uniformly scale and position children to fit into a defined space.",{},{"title":53,"description":3251},"tH6jw7YAXoAU7p9igc7yqRqMHzbHPTChNczZPQOqacI",{"id":3256,"title":57,"body":3257,"description":3705,"extension":559,"links":560,"meta":3706,"navigation":562,"path":58,"seo":3707,"stem":59,"__hash__":3708},"docs/2.api/1.abstractions/levioso.md",{"type":469,"value":3258,"toc":3701},[3259,3264,3271,3280,3282,3627,3629,3699],[576,3260,3261],{},[3262,3263],"abstractions-levioso",{},[582,3265,3266],{},[3267,3268],"img",{"alt":3269,"src":3270},"Leviosa","https://media.giphy.com/media/HaCFT5ghY6L1m/giphy.gif",[582,3272,2253,3273,3275,3276,3279],{},[586,3274,2256],{}," package provides a ",[586,3277,3278],{},"\u003CLevioso />"," wrapper that makes its content … float, just like Magic 🪄✨",[472,3281,15],{"id":592},[594,3283,3286],{"className":596,"code":3284,"highlights":3285,"language":601,"meta":544,"style":544},"\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",[676,773,599],[586,3287,3288,3308,3330,3360,3364,3372,3376,3384,3406,3463,3471,3495,3503,3512,3533,3578,3611,3619],{"__ignoreMap":544},[605,3289,3290,3292,3294,3296,3298,3300,3302,3304,3306],{"class":607,"line":545},[605,3291,611],{"class":610},[605,3293,615],{"class":614},[605,3295,619],{"class":618},[605,3297,622],{"class":618},[605,3299,625],{"class":610},[605,3301,628],{"class":610},[605,3303,632],{"class":631},[605,3305,628],{"class":610},[605,3307,637],{"class":610},[605,3309,3310,3312,3314,3316,3318,3320,3323,3325,3327],{"class":607,"line":546},[605,3311,645],{"class":644},[605,3313,648],{"class":610},[605,3315,683],{"class":651},[605,3317,661],{"class":610},[605,3319,664],{"class":644},[605,3321,3322],{"class":610}," \"",[605,3324,692],{"class":631},[605,3326,628],{"class":610},[605,3328,3329],{"class":610},";\n",[605,3331,3333,3335,3337,3340,3342,3344,3346,3348,3350,3352,3354,3356,3358],{"class":3332,"line":676},[607,641],[605,3334,645],{"class":644},[605,3336,648],{"class":610},[605,3338,3339],{"class":651}," Levioso",[605,3341,655],{"class":610},[605,3343,658],{"class":651},[605,3345,655],{"class":610},[605,3347,1369],{"class":651},[605,3349,661],{"class":610},[605,3351,664],{"class":644},[605,3353,3322],{"class":610},[605,3355,670],{"class":631},[605,3357,628],{"class":610},[605,3359,3329],{"class":610},[605,3361,3362],{"class":607,"line":697},[605,3363,710],{"emptyLinePlaceholder":562},[605,3365,3366,3368,3370],{"class":607,"line":707},[605,3367,700],{"class":610},[605,3369,615],{"class":614},[605,3371,637],{"class":610},[605,3373,3374],{"class":607,"line":713},[605,3375,710],{"emptyLinePlaceholder":562},[605,3377,3378,3380,3382],{"class":607,"line":723},[605,3379,611],{"class":610},[605,3381,718],{"class":614},[605,3383,637],{"class":610},[605,3385,3386,3388,3390,3392,3395,3397,3399,3402,3404],{"class":607,"line":746},[605,3387,726],{"class":610},[605,3389,729],{"class":614},[605,3391,781],{"class":610},[605,3393,3394],{"class":618},"clear-color",[605,3396,625],{"class":610},[605,3398,628],{"class":610},[605,3400,3401],{"class":791},"0x82dbc5",[605,3403,628],{"class":610},[605,3405,637],{"class":610},[605,3407,3408,3410,3412,3414,3416,3418,3420,3422,3424,3426,3428,3430,3432,3434,3436,3438,3441,3443,3445,3447,3449,3451,3453,3455,3457,3459,3461],{"class":607,"line":758},[605,3409,749],{"class":610},[605,3411,752],{"class":614},[605,3413,781],{"class":610},[605,3415,1459],{"class":618},[605,3417,625],{"class":610},[605,3419,628],{"class":610},[605,3421,1466],{"class":610},[605,3423,937],{"class":791},[605,3425,1471],{"class":610},[605,3427,937],{"class":791},[605,3429,1471],{"class":610},[605,3431,2396],{"class":791},[605,3433,1481],{"class":610},[605,3435,628],{"class":610},[605,3437,781],{"class":610},[605,3439,3440],{"class":618},"look-at",[605,3442,625],{"class":610},[605,3444,628],{"class":610},[605,3446,1466],{"class":610},[605,3448,937],{"class":791},[605,3450,1471],{"class":610},[605,3452,937],{"class":791},[605,3454,1471],{"class":610},[605,3456,937],{"class":791},[605,3458,1481],{"class":610},[605,3460,628],{"class":610},[605,3462,755],{"class":610},[605,3464,3465,3467,3469],{"class":607,"line":768},[605,3466,749],{"class":610},[605,3468,763],{"class":614},[605,3470,755],{"class":610},[605,3472,3474,3476,3479,3481,3484,3486,3488,3491,3493],{"class":3473,"line":773},[607,641],[605,3475,749],{"class":610},[605,3477,3478],{"class":614},"Levioso",[605,3480,781],{"class":610},[605,3482,3483],{"class":618},"speed",[605,3485,625],{"class":610},[605,3487,628],{"class":610},[605,3489,3490],{"class":791},"4",[605,3492,628],{"class":610},[605,3494,637],{"class":610},[605,3496,3497,3499,3501],{"class":607,"line":799},[605,3498,825],{"class":610},[605,3500,193],{"class":614},[605,3502,755],{"class":610},[605,3504,3506,3508,3510],{"class":3505,"line":599},[607,641],[605,3507,867],{"class":610},[605,3509,3478],{"class":614},[605,3511,637],{"class":610},[605,3513,3514,3516,3519,3521,3523,3525,3527,3529,3531],{"class":607,"line":822},[605,3515,749],{"class":610},[605,3517,3518],{"class":614},"TresAmbientLight",[605,3520,781],{"class":610},[605,3522,1886],{"class":618},[605,3524,625],{"class":610},[605,3526,628],{"class":610},[605,3528,1893],{"class":791},[605,3530,628],{"class":610},[605,3532,755],{"class":610},[605,3534,3535,3537,3540,3542,3544,3546,3548,3550,3552,3554,3556,3558,3560,3562,3564,3566,3568,3570,3572,3574,3576],{"class":607,"line":833},[605,3536,749],{"class":610},[605,3538,3539],{"class":614},"TresDirectionalLight",[605,3541,781],{"class":610},[605,3543,1886],{"class":618},[605,3545,625],{"class":610},[605,3547,628],{"class":610},[605,3549,1893],{"class":791},[605,3551,628],{"class":610},[605,3553,781],{"class":610},[605,3555,1459],{"class":618},[605,3557,625],{"class":610},[605,3559,628],{"class":610},[605,3561,1466],{"class":610},[605,3563,792],{"class":791},[605,3565,1471],{"class":610},[605,3567,792],{"class":791},[605,3569,1471],{"class":610},[605,3571,792],{"class":791},[605,3573,1481],{"class":610},[605,3575,628],{"class":610},[605,3577,755],{"class":610},[605,3579,3580,3582,3584,3586,3588,3590,3592,3594,3596,3599,3601,3603,3605,3607,3609],{"class":607,"line":844},[605,3581,749],{"class":610},[605,3583,3067],{"class":614},[605,3585,781],{"class":610},[605,3587,1459],{"class":618},[605,3589,625],{"class":610},[605,3591,628],{"class":610},[605,3593,1466],{"class":610},[605,3595,937],{"class":791},[605,3597,3598],{"class":610},", -",[605,3600,1893],{"class":791},[605,3602,1471],{"class":610},[605,3604,937],{"class":791},[605,3606,1481],{"class":610},[605,3608,628],{"class":610},[605,3610,755],{"class":610},[605,3612,3613,3615,3617],{"class":607,"line":854},[605,3614,877],{"class":610},[605,3616,729],{"class":614},[605,3618,637],{"class":610},[605,3620,3621,3623,3625],{"class":607,"line":600},[605,3622,700],{"class":610},[605,3624,718],{"class":614},[605,3626,637],{"class":610},[472,3628,894],{"id":893},[899,3630,3631,3641],{},[902,3632,3633],{},[905,3634,3635,3637,3639],{},[908,3636,910],{"align":969},[908,3638,913],{"align":969},[908,3640,916],{},[918,3642,3643,3656,3670,3684],{},[905,3644,3645,3649,3652],{},[923,3646,3647],{"align":969},[586,3648,3483],{},[923,3650,3651],{"align":969},"Floating speed, higher it rocks more 🤘.",[923,3653,3654],{},[586,3655,1893],{},[905,3657,3658,3663,3666],{},[923,3659,3660],{"align":969},[586,3661,3662],{},"rotationFactor",[923,3664,3665],{"align":969},"Factor for Euler rotation.",[923,3667,3668],{},[586,3669,1893],{},[905,3671,3672,3677,3680],{},[923,3673,3674],{"align":969},[586,3675,3676],{},"floatFactor",[923,3678,3679],{"align":969},"Factor for Up/down movement.",[923,3681,3682],{},[586,3683,1893],{},[905,3685,3686,3691,3694],{},[923,3687,3688],{"align":969},[586,3689,3690],{},"range",[923,3692,3693],{"align":969},"Range of y-axis values the object will float within.",[923,3695,3696],{},[586,3697,3698],{},"[-0.1, 0.1]",[1299,3700,1648],{},{"title":544,"searchDepth":545,"depth":546,"links":3702},[3703,3704],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},"Make content float like magic with smooth animations.",{},{"title":57,"description":3705},"VAdlRyCWTgbZPtL3_7gw5lCESxOAP-g-m4p4X69NI_4",{"id":3710,"title":61,"body":3711,"description":4409,"extension":559,"links":560,"meta":4410,"navigation":562,"path":62,"seo":4411,"stem":63,"__hash__":4412},"docs/2.api/1.abstractions/mask.md",{"type":469,"value":3712,"toc":4404},[3713,3718,3724,3758,3760,4278,4280,4342,4345,4352,4357,4372,4401],[576,3714,3715],{},[3716,3717],"abstractions-mask",{},[582,3719,3720,3723],{},[586,3721,3722],{},"\u003CMask/>"," uses the stencil buffer to cut out areas of the screen.",[3725,3726,3727,3745],"prose-warning",{},[582,3728,3729,3730,3733,3734,3737,3738,3741,3742,1118],{},"To use ",[586,3731,3732],{},"\u003CMask />"," you ",[1677,3735,3736],{},"must"," add ",[586,3739,3740],{},":stencil=\"true\""," to your ",[586,3743,3744],{},"\u003CTresCanvas />",[582,3746,3747,3749,3750,3757],{},[586,3748,3732],{}," relies on the ",[1112,3751,3754],{"href":3752,"rel":3753},"https://threejs.org/docs/#api/en/renderers/WebGLRenderer",[1116],[586,3755,3756],{},"stencil buffer",". In recent versions of THREE.js, by default, the stencil buffer is not created.",[472,3759,15],{"id":592},[594,3761,3764],{"className":596,"code":3762,"highlights":3763,"language":601,"meta":544,"style":544},"\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",[546,844,854,600,874],[586,3765,3766,3786,3815,3833,3841,3845,3853,3886,3894,3902,3906,3927,3935,3970,3990,3998,4020,4030,4050,4059,4067,4071,4095,4103,4130,4138,4142,4165,4173,4197,4205,4210,4233,4242,4251,4260,4269],{"__ignoreMap":544},[605,3767,3768,3770,3772,3774,3776,3778,3780,3782,3784],{"class":607,"line":545},[605,3769,611],{"class":610},[605,3771,615],{"class":614},[605,3773,619],{"class":618},[605,3775,622],{"class":618},[605,3777,625],{"class":610},[605,3779,628],{"class":610},[605,3781,632],{"class":631},[605,3783,628],{"class":610},[605,3785,637],{"class":610},[605,3787,3789,3791,3793,3796,3798,3800,3802,3805,3807,3809,3811,3813],{"class":3788,"line":546},[607,641],[605,3790,645],{"class":644},[605,3792,648],{"class":610},[605,3794,3795],{"class":651}," Mask",[605,3797,655],{"class":610},[605,3799,658],{"class":651},[605,3801,655],{"class":610},[605,3803,3804],{"class":651}," useMask",[605,3806,661],{"class":610},[605,3808,664],{"class":644},[605,3810,667],{"class":610},[605,3812,670],{"class":631},[605,3814,673],{"class":610},[605,3816,3817,3819,3821,3823,3825,3827,3829,3831],{"class":607,"line":676},[605,3818,645],{"class":644},[605,3820,648],{"class":610},[605,3822,683],{"class":651},[605,3824,661],{"class":610},[605,3826,664],{"class":644},[605,3828,667],{"class":610},[605,3830,692],{"class":631},[605,3832,673],{"class":610},[605,3834,3835,3837,3839],{"class":607,"line":697},[605,3836,700],{"class":610},[605,3838,615],{"class":614},[605,3840,637],{"class":610},[605,3842,3843],{"class":607,"line":707},[605,3844,710],{"emptyLinePlaceholder":562},[605,3846,3847,3849,3851],{"class":607,"line":713},[605,3848,611],{"class":610},[605,3850,718],{"class":614},[605,3852,637],{"class":610},[605,3854,3855,3857,3859,3861,3864,3866,3868,3871,3873,3875,3877,3879,3882,3884],{"class":607,"line":723},[605,3856,726],{"class":610},[605,3858,729],{"class":614},[605,3860,781],{"class":610},[605,3862,3863],{"class":618},"stencil",[605,3865,625],{"class":610},[605,3867,628],{"class":610},[605,3869,933],{"class":3870},"sfNiH",[605,3872,628],{"class":610},[605,3874,732],{"class":618},[605,3876,625],{"class":610},[605,3878,628],{"class":610},[605,3880,3881],{"class":631},"#4f4f4f",[605,3883,628],{"class":610},[605,3885,637],{"class":610},[605,3887,3888,3890,3892],{"class":607,"line":746},[605,3889,749],{"class":610},[605,3891,752],{"class":614},[605,3893,755],{"class":610},[605,3895,3896,3898,3900],{"class":607,"line":758},[605,3897,749],{"class":610},[605,3899,763],{"class":614},[605,3901,755],{"class":610},[605,3903,3904],{"class":607,"line":768},[605,3905,710],{"emptyLinePlaceholder":562},[605,3907,3908,3910,3913,3915,3917,3919,3921,3923,3925],{"class":607,"line":773},[605,3909,749],{"class":610},[605,3911,3912],{"class":614},"TresGroup",[605,3914,781],{"class":610},[605,3916,784],{"class":618},[605,3918,625],{"class":610},[605,3920,628],{"class":610},[605,3922,792],{"class":791},[605,3924,628],{"class":610},[605,3926,637],{"class":610},[605,3928,3929,3931,3933],{"class":607,"line":799},[605,3930,825],{"class":610},[605,3932,828],{"class":614},[605,3934,637],{"class":610},[605,3936,3937,3939,3942,3944,3946,3948,3950,3952,3955,3957,3959,3961,3964,3966,3968],{"class":607,"line":599},[605,3938,836],{"class":610},[605,3940,3941],{"class":614},"TresRingGeometry",[605,3943,781],{"class":610},[605,3945,1989],{"class":618},[605,3947,625],{"class":610},[605,3949,628],{"class":610},[605,3951,1466],{"class":610},[605,3953,3954],{"class":791},"0.95",[605,3956,1471],{"class":610},[605,3958,1893],{"class":791},[605,3960,1471],{"class":610},[605,3962,3963],{"class":791},"64",[605,3965,1481],{"class":610},[605,3967,628],{"class":610},[605,3969,755],{"class":610},[605,3971,3972,3974,3976,3979,3981,3983,3986,3988],{"class":607,"line":822},[605,3973,836],{"class":610},[605,3975,2425],{"class":614},[605,3977,3978],{"class":618}," color",[605,3980,625],{"class":610},[605,3982,628],{"class":610},[605,3984,3985],{"class":631},"white",[605,3987,628],{"class":610},[605,3989,755],{"class":610},[605,3991,3992,3994,3996],{"class":607,"line":833},[605,3993,857],{"class":610},[605,3995,828],{"class":614},[605,3997,637],{"class":610},[605,3999,4001,4003,4005,4007,4010,4012,4014,4016,4018],{"class":4000,"line":844},[607,641],[605,4002,825],{"class":610},[605,4004,61],{"class":614},[605,4006,781],{"class":610},[605,4008,4009],{"class":618},"id",[605,4011,625],{"class":610},[605,4013,628],{"class":610},[605,4015,1893],{"class":791},[605,4017,628],{"class":610},[605,4019,637],{"class":610},[605,4021,4023,4025,4028],{"class":4022,"line":854},[607,641],[605,4024,836],{"class":610},[605,4026,4027],{"class":614},"TresCircleGeometry",[605,4029,755],{"class":610},[605,4031,4033,4035,4037,4039,4041,4043,4046,4048],{"class":4032,"line":600},[607,641],[605,4034,836],{"class":610},[605,4036,2425],{"class":614},[605,4038,3978],{"class":618},[605,4040,625],{"class":610},[605,4042,628],{"class":610},[605,4044,4045],{"class":631},"#fbb03b",[605,4047,628],{"class":610},[605,4049,755],{"class":610},[605,4051,4053,4055,4057],{"class":4052,"line":874},[607,641],[605,4054,857],{"class":610},[605,4056,61],{"class":614},[605,4058,637],{"class":610},[605,4060,4061,4063,4065],{"class":607,"line":884},[605,4062,867],{"class":610},[605,4064,3912],{"class":614},[605,4066,637],{"class":610},[605,4068,4069],{"class":607,"line":2952},[605,4070,710],{"emptyLinePlaceholder":562},[605,4072,4073,4075,4077,4079,4082,4084,4086,4089,4091,4093],{"class":607,"line":2960},[605,4074,749],{"class":610},[605,4076,828],{"class":614},[605,4078,781],{"class":610},[605,4080,4081],{"class":618},"position-z",[605,4083,625],{"class":610},[605,4085,628],{"class":610},[605,4087,4088],{"class":610},"-",[605,4090,1893],{"class":791},[605,4092,628],{"class":610},[605,4094,637],{"class":610},[605,4096,4097,4099,4101],{"class":607,"line":2990},[605,4098,825],{"class":610},[605,4100,839],{"class":614},[605,4102,755],{"class":610},[605,4104,4105,4107,4109,4112,4114,4116,4119,4121,4123,4126,4128],{"class":607,"line":3007},[605,4106,825],{"class":610},[605,4108,849],{"class":614},[605,4110,4111],{"class":618}," v-bind",[605,4113,625],{"class":610},[605,4115,628],{"class":610},[605,4117,4118],{"class":2800},"useMask",[605,4120,2970],{"class":610},[605,4122,1893],{"class":791},[605,4124,4125],{"class":610},")",[605,4127,628],{"class":610},[605,4129,755],{"class":610},[605,4131,4132,4134,4136],{"class":607,"line":3022},[605,4133,867],{"class":610},[605,4135,828],{"class":614},[605,4137,637],{"class":610},[605,4139,4140],{"class":607,"line":3047},[605,4141,710],{"emptyLinePlaceholder":562},[605,4143,4144,4146,4148,4150,4152,4154,4156,4158,4161,4163],{"class":607,"line":2591},[605,4145,749],{"class":610},[605,4147,828],{"class":614},[605,4149,781],{"class":610},[605,4151,4081],{"class":618},[605,4153,625],{"class":610},[605,4155,628],{"class":610},[605,4157,4088],{"class":610},[605,4159,4160],{"class":791},"3",[605,4162,628],{"class":610},[605,4164,637],{"class":610},[605,4166,4167,4169,4171],{"class":607,"line":3062},[605,4168,825],{"class":610},[605,4170,839],{"class":614},[605,4172,755],{"class":610},[605,4174,4175,4177,4179,4181,4183,4185,4187,4189,4191,4193,4195],{"class":607,"line":3092},[605,4176,825],{"class":610},[605,4178,849],{"class":614},[605,4180,4111],{"class":618},[605,4182,625],{"class":610},[605,4184,628],{"class":610},[605,4186,4118],{"class":2800},[605,4188,2970],{"class":610},[605,4190,1893],{"class":791},[605,4192,4125],{"class":610},[605,4194,628],{"class":610},[605,4196,755],{"class":610},[605,4198,4199,4201,4203],{"class":607,"line":3101},[605,4200,867],{"class":610},[605,4202,828],{"class":614},[605,4204,637],{"class":610},[605,4206,4208],{"class":607,"line":4207},31,[605,4209,710],{"emptyLinePlaceholder":562},[605,4211,4213,4215,4217,4219,4221,4223,4225,4227,4229,4231],{"class":607,"line":4212},32,[605,4214,749],{"class":610},[605,4216,828],{"class":614},[605,4218,781],{"class":610},[605,4220,4081],{"class":618},[605,4222,625],{"class":610},[605,4224,628],{"class":610},[605,4226,4088],{"class":610},[605,4228,2396],{"class":791},[605,4230,628],{"class":610},[605,4232,637],{"class":610},[605,4234,4236,4238,4240],{"class":607,"line":4235},33,[605,4237,825],{"class":610},[605,4239,839],{"class":614},[605,4241,755],{"class":610},[605,4243,4245,4247,4249],{"class":607,"line":4244},34,[605,4246,825],{"class":610},[605,4248,849],{"class":614},[605,4250,755],{"class":610},[605,4252,4254,4256,4258],{"class":607,"line":4253},35,[605,4255,867],{"class":610},[605,4257,828],{"class":614},[605,4259,637],{"class":610},[605,4261,4263,4265,4267],{"class":607,"line":4262},36,[605,4264,877],{"class":610},[605,4266,729],{"class":614},[605,4268,637],{"class":610},[605,4270,4272,4274,4276],{"class":607,"line":4271},37,[605,4273,700],{"class":610},[605,4275,718],{"class":614},[605,4277,637],{"class":610},[472,4279,894],{"id":893},[899,4281,4282,4292],{},[902,4283,4284],{},[905,4285,4286,4288,4290],{},[908,4287,910],{"align":969},[908,4289,913],{"align":969},[908,4291,916],{},[918,4293,4294,4310,4326],{},[905,4295,4296,4302,4308],{},[923,4297,4298],{"align":969},[1673,4299,4300],{},[586,4301,4009],{},[923,4303,4304,4305,4307],{"align":969},"Id of the stencil buffer to use. Each mask must have a ",[586,4306,2537],{}," id. Multiple masks can refer to the same id.",[923,4309],{},[905,4311,4312,4319,4322],{},[923,4313,4314],{"align":969},[1673,4315,4316],{},[586,4317,4318],{},"colorWrite",[923,4320,4321],{"align":969},"Whether the colors of the mask's own material will leak through.",[923,4323,4324],{},[586,4325,943],{},[905,4327,4328,4335,4338],{},[923,4329,4330],{"align":969},[1673,4331,4332],{},[586,4333,4334],{},"depthWrite",[923,4336,4337],{"align":969},"Whether the depth of the mask's own material will leak through.",[923,4339,4340],{},[586,4341,943],{},[472,4343,4118],{"id":4344},"usemask",[582,4346,4347,4348,4351],{},"Composable that returns the stencil configuration to apply a mask to a material. Use it with ",[586,4349,4350],{},"v-bind"," on materials that should be affected by the mask.",[582,4353,4354],{},[1673,4355,4356],{},"Parameters:",[3136,4358,4359,4364],{},[3139,4360,4361,4363],{},[586,4362,4009],{}," - The mask id to use (number or Ref)",[3139,4365,4366,4369,4370],{},[586,4367,4368],{},"inverse"," - Whether to invert the mask (boolean or Ref), defaults to ",[586,4371,943],{},[594,4373,4375],{"className":596,"code":4374,"language":601,"meta":544,"style":544},"\u003CTresMeshNormalMaterial v-bind=\"useMask(1)\" />\n",[586,4376,4377],{"__ignoreMap":544},[605,4378,4379,4381,4383,4385,4387,4389,4391,4393,4395,4397,4399],{"class":607,"line":545},[605,4380,611],{"class":610},[605,4382,849],{"class":614},[605,4384,4111],{"class":618},[605,4386,625],{"class":610},[605,4388,628],{"class":610},[605,4390,4118],{"class":2800},[605,4392,2970],{"class":651},[605,4394,1893],{"class":791},[605,4396,4125],{"class":651},[605,4398,628],{"class":610},[605,4400,755],{"class":610},[1299,4402,4403],{},"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":544,"searchDepth":545,"depth":546,"links":4405},[4406,4407,4408],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},{"id":4344,"depth":546,"text":4118},"Cut out areas of the screen using the stencil buffer.",{},{"title":61,"description":4409},"G7X7KSfvm9ZBJpENVvMjF0UaBORYjhBMGhf9hH7E7tw",{"id":4414,"title":65,"body":4415,"description":4920,"extension":559,"links":560,"meta":4921,"navigation":562,"path":66,"seo":4922,"stem":67,"__hash__":4923},"docs/2.api/1.abstractions/outline.md",{"type":469,"value":4416,"toc":4916},[4417,4422,4435,4437,4817,4819,4914],[576,4418,4419],{},[4420,4421],"abstractions-outline",{},[582,4423,4424,4427,4428,4431,4432,1118],{},[586,4425,4426],{},"\u003COutline />"," creates an inverted-hull outline using its parent's geometry. Supported parents are ",[586,4429,4430],{},"\u003CTresMesh>"," and ",[586,4433,4434],{},"\u003CTresSkinnedMesh>",[472,4436,15],{"id":592},[594,4438,4441],{"className":596,"code":4439,"highlights":4440,"language":601,"meta":544,"style":544},"\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",[676,833,884],[586,4442,4443,4463,4481,4505,4513,4517,4525,4543,4551,4559,4580,4626,4650,4658,4667,4701,4709,4729,4754,4762,4793,4801,4809],{"__ignoreMap":544},[605,4444,4445,4447,4449,4451,4453,4455,4457,4459,4461],{"class":607,"line":545},[605,4446,611],{"class":610},[605,4448,615],{"class":614},[605,4450,619],{"class":618},[605,4452,622],{"class":618},[605,4454,625],{"class":610},[605,4456,628],{"class":610},[605,4458,632],{"class":631},[605,4460,628],{"class":610},[605,4462,637],{"class":610},[605,4464,4465,4467,4469,4471,4473,4475,4477,4479],{"class":607,"line":546},[605,4466,645],{"class":644},[605,4468,648],{"class":610},[605,4470,683],{"class":651},[605,4472,661],{"class":610},[605,4474,664],{"class":644},[605,4476,667],{"class":610},[605,4478,692],{"class":631},[605,4480,673],{"class":610},[605,4482,4484,4486,4488,4490,4492,4495,4497,4499,4501,4503],{"class":4483,"line":676},[607,641],[605,4485,645],{"class":644},[605,4487,648],{"class":610},[605,4489,658],{"class":651},[605,4491,655],{"class":610},[605,4493,4494],{"class":651}," Outline",[605,4496,661],{"class":610},[605,4498,664],{"class":644},[605,4500,667],{"class":610},[605,4502,670],{"class":631},[605,4504,673],{"class":610},[605,4506,4507,4509,4511],{"class":607,"line":697},[605,4508,700],{"class":610},[605,4510,615],{"class":614},[605,4512,637],{"class":610},[605,4514,4515],{"class":607,"line":707},[605,4516,710],{"emptyLinePlaceholder":562},[605,4518,4519,4521,4523],{"class":607,"line":713},[605,4520,611],{"class":610},[605,4522,718],{"class":614},[605,4524,637],{"class":610},[605,4526,4527,4529,4531,4533,4535,4537,4539,4541],{"class":607,"line":723},[605,4528,726],{"class":610},[605,4530,729],{"class":614},[605,4532,732],{"class":618},[605,4534,625],{"class":610},[605,4536,628],{"class":610},[605,4538,3881],{"class":631},[605,4540,628],{"class":610},[605,4542,637],{"class":610},[605,4544,4545,4547,4549],{"class":607,"line":746},[605,4546,749],{"class":610},[605,4548,752],{"class":614},[605,4550,755],{"class":610},[605,4552,4553,4555,4557],{"class":607,"line":758},[605,4554,749],{"class":610},[605,4556,763],{"class":614},[605,4558,755],{"class":610},[605,4560,4561,4563,4565,4567,4569,4571,4573,4576,4578],{"class":607,"line":768},[605,4562,749],{"class":610},[605,4564,3518],{"class":614},[605,4566,781],{"class":610},[605,4568,1886],{"class":618},[605,4570,625],{"class":610},[605,4572,628],{"class":610},[605,4574,4575],{"class":791},"3.14",[605,4577,628],{"class":610},[605,4579,755],{"class":610},[605,4581,4582,4584,4587,4589,4591,4593,4595,4598,4600,4602,4604,4606,4608,4610,4612,4614,4616,4618,4620,4622,4624],{"class":607,"line":773},[605,4583,749],{"class":610},[605,4585,4586],{"class":614},"TresPointLight",[605,4588,781],{"class":610},[605,4590,1886],{"class":618},[605,4592,625],{"class":610},[605,4594,628],{"class":610},[605,4596,4597],{"class":791},"50",[605,4599,628],{"class":610},[605,4601,781],{"class":610},[605,4603,1459],{"class":618},[605,4605,625],{"class":610},[605,4607,628],{"class":610},[605,4609,1466],{"class":610},[605,4611,792],{"class":791},[605,4613,1471],{"class":610},[605,4615,792],{"class":791},[605,4617,1471],{"class":610},[605,4619,937],{"class":791},[605,4621,1481],{"class":610},[605,4623,628],{"class":610},[605,4625,755],{"class":610},[605,4627,4628,4630,4632,4634,4637,4639,4641,4643,4646,4648],{"class":607,"line":799},[605,4629,749],{"class":610},[605,4631,828],{"class":614},[605,4633,781],{"class":610},[605,4635,4636],{"class":618},"position-x",[605,4638,625],{"class":610},[605,4640,628],{"class":610},[605,4642,4088],{"class":610},[605,4644,4645],{"class":791},"0.75",[605,4647,628],{"class":610},[605,4649,637],{"class":610},[605,4651,4652,4654,4656],{"class":607,"line":599},[605,4653,825],{"class":610},[605,4655,839],{"class":614},[605,4657,755],{"class":610},[605,4659,4660,4662,4665],{"class":607,"line":822},[605,4661,825],{"class":610},[605,4663,4664],{"class":614},"TresMeshPhongMaterial",[605,4666,755],{"class":610},[605,4668,4670,4672,4674,4676,4679,4681,4683,4686,4688,4690,4692,4694,4697,4699],{"class":4669,"line":833},[607,641],[605,4671,825],{"class":610},[605,4673,65],{"class":614},[605,4675,781],{"class":610},[605,4677,4678],{"class":618},"thickness",[605,4680,625],{"class":610},[605,4682,628],{"class":610},[605,4684,4685],{"class":791},"7.5",[605,4687,628],{"class":610},[605,4689,3978],{"class":618},[605,4691,625],{"class":610},[605,4693,628],{"class":610},[605,4695,4696],{"class":631},"#82dbc5",[605,4698,628],{"class":610},[605,4700,755],{"class":610},[605,4702,4703,4705,4707],{"class":607,"line":844},[605,4704,867],{"class":610},[605,4706,828],{"class":614},[605,4708,637],{"class":610},[605,4710,4711,4713,4715,4717,4719,4721,4723,4725,4727],{"class":607,"line":854},[605,4712,749],{"class":610},[605,4714,828],{"class":614},[605,4716,781],{"class":610},[605,4718,4636],{"class":618},[605,4720,625],{"class":610},[605,4722,628],{"class":610},[605,4724,4645],{"class":791},[605,4726,628],{"class":610},[605,4728,637],{"class":610},[605,4730,4731,4733,4736,4738,4740,4742,4744,4746,4748,4750,4752],{"class":607,"line":600},[605,4732,825],{"class":610},[605,4734,4735],{"class":614},"TresSphereGeometry",[605,4737,781],{"class":610},[605,4739,1989],{"class":618},[605,4741,625],{"class":610},[605,4743,628],{"class":610},[605,4745,1466],{"class":610},[605,4747,1513],{"class":791},[605,4749,1481],{"class":610},[605,4751,628],{"class":610},[605,4753,755],{"class":610},[605,4755,4756,4758,4760],{"class":607,"line":874},[605,4757,825],{"class":610},[605,4759,4664],{"class":614},[605,4761,755],{"class":610},[605,4763,4765,4767,4769,4771,4773,4775,4777,4779,4781,4783,4785,4787,4789,4791],{"class":4764,"line":884},[607,641],[605,4766,825],{"class":610},[605,4768,65],{"class":614},[605,4770,781],{"class":610},[605,4772,4678],{"class":618},[605,4774,625],{"class":610},[605,4776,628],{"class":610},[605,4778,4685],{"class":791},[605,4780,628],{"class":610},[605,4782,3978],{"class":618},[605,4784,625],{"class":610},[605,4786,628],{"class":610},[605,4788,4045],{"class":631},[605,4790,628],{"class":610},[605,4792,755],{"class":610},[605,4794,4795,4797,4799],{"class":607,"line":2952},[605,4796,867],{"class":610},[605,4798,828],{"class":614},[605,4800,637],{"class":610},[605,4802,4803,4805,4807],{"class":607,"line":2960},[605,4804,877],{"class":610},[605,4806,729],{"class":614},[605,4808,637],{"class":610},[605,4810,4811,4813,4815],{"class":607,"line":2990},[605,4812,700],{"class":610},[605,4814,718],{"class":614},[605,4816,637],{"class":610},[472,4818,894],{"id":893},[899,4820,4821,4831],{},[902,4822,4823],{},[905,4824,4825,4827,4829],{},[908,4826,894],{},[908,4828,913],{},[908,4830,916],{},[918,4832,4833,4845,4857,4869,4881,4893],{},[905,4834,4835,4837,4840],{},[923,4836,2500],{},[923,4838,4839],{},"Outline color",[923,4841,4842],{},[586,4843,4844],{},"'black'",[905,4846,4847,4850,4853],{},[923,4848,4849],{},"screenspace",[923,4851,4852],{},"Whether line thickness is independent of zoom",[923,4854,4855],{},[586,4856,943],{},[905,4858,4859,4862,4865],{},[923,4860,4861],{},"opacity",[923,4863,4864],{},"Outline opacity",[923,4866,4867],{},[586,4868,1893],{},[905,4870,4871,4874,4877],{},[923,4872,4873],{},"transparent",[923,4875,4876],{},"Outline transparency",[923,4878,4879],{},[586,4880,943],{},[905,4882,4883,4885,4888],{},[923,4884,4678],{},[923,4886,4887],{},"Outline thickness",[923,4889,4890],{},[586,4891,4892],{},"0.05",[905,4894,4895,4898,4909],{},[923,4896,4897],{},"angle",[923,4899,4900,4901,4903,4904],{},"Geometry crease angle (",[586,4902,937],{}," is no crease).  See ",[1112,4905,4908],{"href":4906,"rel":4907},"https://threejs.org/docs/#examples/en/utils/BufferGeometryUtils.toCreasedNormals",[1116],"BufferGeometryUtils.toCreasedNormals",[923,4910,4911],{},[586,4912,4913],{},"Math.PI",[1299,4915,1648],{},{"title":544,"searchDepth":545,"depth":546,"links":4917},[4918,4919],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},"Create inverted-hull outlines using parent geometry.",{},{"title":65,"description":4920},"L_LPQP787liM6IASr51UnMfLs2CRosI1PG5BXlr7m_Q",{"id":4925,"title":69,"body":4926,"description":5819,"extension":559,"links":560,"meta":5820,"navigation":562,"path":70,"seo":5821,"stem":71,"__hash__":5822},"docs/2.api/1.abstractions/sampler.md",{"type":469,"value":4927,"toc":5814},[4928,4933,4936,4938,5276,5278,5344,5348,5355,5811],[576,4929,4930],{},[4931,4932],"abstractions-sampler",{},[582,4934,4935],{},"Declarative abstraction around MeshSurfaceSampler & InstancedMesh. It samples points from the passed mesh and transforms an InstancedMesh's matrix to distribute instances on the points.",[472,4937,15],{"id":592},[594,4939,4942],{"className":596,"code":4940,"highlights":4941,"language":601,"meta":544,"style":544},"\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",[546,773,799,599,822,833,844,854,600,874,884],[586,4943,4944,4964,4988,5006,5014,5018,5026,5045,5077,5085,5089,5111,5120,5130,5139,5144,5172,5205,5214,5223,5232,5260,5268],{"__ignoreMap":544},[605,4945,4946,4948,4950,4952,4954,4956,4958,4960,4962],{"class":607,"line":545},[605,4947,611],{"class":610},[605,4949,615],{"class":614},[605,4951,619],{"class":618},[605,4953,622],{"class":618},[605,4955,625],{"class":610},[605,4957,628],{"class":610},[605,4959,632],{"class":631},[605,4961,628],{"class":610},[605,4963,637],{"class":610},[605,4965,4967,4969,4971,4973,4975,4978,4980,4982,4984,4986],{"class":4966,"line":546},[607,641],[605,4968,645],{"class":644},[605,4970,648],{"class":610},[605,4972,658],{"class":651},[605,4974,655],{"class":610},[605,4976,4977],{"class":651}," Sampler",[605,4979,661],{"class":610},[605,4981,664],{"class":644},[605,4983,667],{"class":610},[605,4985,670],{"class":631},[605,4987,673],{"class":610},[605,4989,4990,4992,4994,4996,4998,5000,5002,5004],{"class":607,"line":676},[605,4991,645],{"class":644},[605,4993,648],{"class":610},[605,4995,683],{"class":651},[605,4997,661],{"class":610},[605,4999,664],{"class":644},[605,5001,667],{"class":610},[605,5003,692],{"class":631},[605,5005,673],{"class":610},[605,5007,5008,5010,5012],{"class":607,"line":697},[605,5009,700],{"class":610},[605,5011,615],{"class":614},[605,5013,637],{"class":610},[605,5015,5016],{"class":607,"line":707},[605,5017,710],{"emptyLinePlaceholder":562},[605,5019,5020,5022,5024],{"class":607,"line":713},[605,5021,611],{"class":610},[605,5023,718],{"class":614},[605,5025,637],{"class":610},[605,5027,5028,5030,5032,5034,5036,5038,5041,5043],{"class":607,"line":723},[605,5029,726],{"class":610},[605,5031,729],{"class":614},[605,5033,732],{"class":618},[605,5035,625],{"class":610},[605,5037,628],{"class":610},[605,5039,5040],{"class":631},"#82DBC5",[605,5042,628],{"class":610},[605,5044,637],{"class":610},[605,5046,5047,5049,5051,5053,5055,5057,5059,5061,5063,5065,5067,5069,5071,5073,5075],{"class":607,"line":746},[605,5048,749],{"class":610},[605,5050,752],{"class":614},[605,5052,781],{"class":610},[605,5054,1459],{"class":618},[605,5056,625],{"class":610},[605,5058,628],{"class":610},[605,5060,1466],{"class":610},[605,5062,937],{"class":791},[605,5064,1471],{"class":610},[605,5066,1513],{"class":791},[605,5068,1471],{"class":610},[605,5070,2396],{"class":791},[605,5072,1481],{"class":610},[605,5074,628],{"class":610},[605,5076,755],{"class":610},[605,5078,5079,5081,5083],{"class":607,"line":758},[605,5080,749],{"class":610},[605,5082,763],{"class":614},[605,5084,755],{"class":610},[605,5086,5087],{"class":607,"line":768},[605,5088,710],{"emptyLinePlaceholder":562},[605,5090,5092,5094,5096,5098,5101,5103,5105,5107,5109],{"class":5091,"line":773},[607,641],[605,5093,749],{"class":610},[605,5095,69],{"class":614},[605,5097,781],{"class":610},[605,5099,5100],{"class":618},"count",[605,5102,625],{"class":610},[605,5104,628],{"class":610},[605,5106,4597],{"class":791},[605,5108,628],{"class":610},[605,5110,637],{"class":610},[605,5112,5114,5116,5118],{"class":5113,"line":799},[607,641],[605,5115,825],{"class":610},[605,5117,828],{"class":614},[605,5119,637],{"class":610},[605,5121,5123,5125,5128],{"class":5122,"line":599},[607,641],[605,5124,836],{"class":610},[605,5126,5127],{"class":614},"TresTorusGeometry",[605,5129,755],{"class":610},[605,5131,5133,5135,5137],{"class":5132,"line":822},[607,641],[605,5134,857],{"class":610},[605,5136,828],{"class":614},[605,5138,637],{"class":610},[605,5140,5142],{"class":5141,"line":833},[607,641],[605,5143,710],{"emptyLinePlaceholder":562},[605,5145,5147,5149,5152,5154,5156,5158,5160,5163,5166,5168,5170],{"class":5146,"line":844},[607,641],[605,5148,825],{"class":610},[605,5150,5151],{"class":614},"TresInstancedMesh",[605,5153,781],{"class":610},[605,5155,1989],{"class":618},[605,5157,625],{"class":610},[605,5159,628],{"class":610},[605,5161,5162],{"class":610},"[null!, null!, ",[605,5164,5165],{"class":791},"1000",[605,5167,1481],{"class":610},[605,5169,628],{"class":610},[605,5171,637],{"class":610},[605,5173,5175,5177,5179,5181,5183,5185,5187,5189,5191,5193,5195,5197,5199,5201,5203],{"class":5174,"line":854},[607,641],[605,5176,836],{"class":610},[605,5178,839],{"class":614},[605,5180,781],{"class":610},[605,5182,1989],{"class":618},[605,5184,625],{"class":610},[605,5186,628],{"class":610},[605,5188,1466],{"class":610},[605,5190,2203],{"class":791},[605,5192,1471],{"class":610},[605,5194,2203],{"class":791},[605,5196,1471],{"class":610},[605,5198,2203],{"class":791},[605,5200,1481],{"class":610},[605,5202,628],{"class":610},[605,5204,755],{"class":610},[605,5206,5208,5210,5212],{"class":5207,"line":600},[607,641],[605,5209,836],{"class":610},[605,5211,849],{"class":614},[605,5213,755],{"class":610},[605,5215,5217,5219,5221],{"class":5216,"line":874},[607,641],[605,5218,857],{"class":610},[605,5220,5151],{"class":614},[605,5222,637],{"class":610},[605,5224,5226,5228,5230],{"class":5225,"line":884},[607,641],[605,5227,867],{"class":610},[605,5229,69],{"class":614},[605,5231,637],{"class":610},[605,5233,5234,5236,5238,5240,5242,5244,5246,5248,5250,5252,5254,5256,5258],{"class":607,"line":2952},[605,5235,749],{"class":610},[605,5237,3067],{"class":614},[605,5239,781],{"class":610},[605,5241,1989],{"class":618},[605,5243,625],{"class":610},[605,5245,628],{"class":610},[605,5247,1466],{"class":610},[605,5249,1478],{"class":791},[605,5251,1471],{"class":610},[605,5253,1478],{"class":791},[605,5255,1481],{"class":610},[605,5257,628],{"class":610},[605,5259,755],{"class":610},[605,5261,5262,5264,5266],{"class":607,"line":2960},[605,5263,877],{"class":610},[605,5265,729],{"class":614},[605,5267,637],{"class":610},[605,5269,5270,5272,5274],{"class":607,"line":2990},[605,5271,700],{"class":610},[605,5273,718],{"class":614},[605,5275,637],{"class":610},[472,5277,894],{"id":893},[899,5279,5280,5288],{},[902,5281,5282],{},[905,5283,5284,5286],{},[908,5285,894],{},[908,5287,913],{},[918,5289,5290,5301,5311,5322,5333],{},[905,5291,5292,5295],{},[923,5293,5294],{},"mesh",[923,5296,5297,5300],{},[1673,5298,5299],{},"Mesh"," Surface mesh from which to sample",[905,5302,5303,5305],{},[923,5304,5100],{},[923,5306,5307,5310],{},[1673,5308,5309],{},"Number"," Number of samples",[905,5312,5313,5316],{},[923,5314,5315],{},"instanceMesh",[923,5317,5318,5321],{},[1673,5319,5320],{},"InstanceMesh"," InstanceMesh to scatter",[905,5323,5324,5327],{},[923,5325,5326],{},"weight",[923,5328,5329,5332],{},[1673,5330,5331],{},"String"," A vertex attribute to be used as a weight when sampling",[905,5334,5335,5338],{},[923,5336,5337],{},"transform",[923,5339,5340,5343],{},[1673,5341,5342],{},"Function"," A function that can be used as a custom sampling",[472,5345,5347],{"id":5346},"usesurfacesampler","useSurfaceSampler",[582,5349,5350,5351],{},"A hook to obtain the result of the ",[5352,5353,5354],"sampler",{}," as a buffer. Useful for driving anything other than InstancedMesh via the Sampler.",[594,5356,5359],{"className":596,"code":5357,"highlights":5358,"language":601,"meta":544,"style":544},"\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",[546,768],[586,5360,5361,5381,5405,5423,5447,5451,5464,5477,5481,5504,5540,5547,5555,5559,5567,5585,5617,5625,5629,5648,5656,5664,5668,5675,5689,5709,5714,5747,5755,5763,5767,5795,5803],{"__ignoreMap":544},[605,5362,5363,5365,5367,5369,5371,5373,5375,5377,5379],{"class":607,"line":545},[605,5364,611],{"class":610},[605,5366,615],{"class":614},[605,5368,619],{"class":618},[605,5370,622],{"class":618},[605,5372,625],{"class":610},[605,5374,628],{"class":610},[605,5376,632],{"class":631},[605,5378,628],{"class":610},[605,5380,637],{"class":610},[605,5382,5384,5386,5388,5390,5392,5395,5397,5399,5401,5403],{"class":5383,"line":546},[607,641],[605,5385,645],{"class":644},[605,5387,648],{"class":610},[605,5389,658],{"class":651},[605,5391,655],{"class":610},[605,5393,5394],{"class":651}," useSurfaceSampler",[605,5396,661],{"class":610},[605,5398,664],{"class":644},[605,5400,667],{"class":610},[605,5402,670],{"class":631},[605,5404,673],{"class":610},[605,5406,5407,5409,5411,5413,5415,5417,5419,5421],{"class":607,"line":676},[605,5408,645],{"class":644},[605,5410,648],{"class":610},[605,5412,683],{"class":651},[605,5414,661],{"class":610},[605,5416,664],{"class":644},[605,5418,667],{"class":610},[605,5420,692],{"class":631},[605,5422,673],{"class":610},[605,5424,5425,5427,5429,5432,5434,5437,5439,5441,5443,5445],{"class":607,"line":697},[605,5426,645],{"class":644},[605,5428,648],{"class":610},[605,5430,5431],{"class":651}," ref",[605,5433,655],{"class":610},[605,5435,5436],{"class":651}," watch",[605,5438,661],{"class":610},[605,5440,664],{"class":644},[605,5442,667],{"class":610},[605,5444,601],{"class":631},[605,5446,673],{"class":610},[605,5448,5449],{"class":607,"line":707},[605,5450,710],{"emptyLinePlaceholder":562},[605,5452,5453,5455,5458,5460,5462],{"class":607,"line":713},[605,5454,2689],{"class":618},[605,5456,5457],{"class":651}," torusRef ",[605,5459,625],{"class":610},[605,5461,5431],{"class":2800},[605,5463,2846],{"class":651},[605,5465,5466,5468,5471,5473,5475],{"class":607,"line":723},[605,5467,2689],{"class":618},[605,5469,5470],{"class":651}," instancesRef ",[605,5472,625],{"class":610},[605,5474,5431],{"class":2800},[605,5476,2846],{"class":651},[605,5478,5479],{"class":607,"line":746},[605,5480,710],{"emptyLinePlaceholder":562},[605,5482,5483,5486,5489,5491,5493,5497,5499,5502],{"class":607,"line":758},[605,5484,5485],{"class":2800},"watch",[605,5487,5488],{"class":651},"(torusRef",[605,5490,655],{"class":610},[605,5492,2713],{"class":610},[605,5494,5496],{"class":5495},"sHdIc","value",[605,5498,4125],{"class":610},[605,5500,5501],{"class":618}," =>",[605,5503,1176],{"class":610},[605,5505,5507,5510,5512,5514,5516,5519,5521,5524,5526,5528,5530,5532,5534,5537],{"class":5506,"line":768},[607,641],[605,5508,5509],{"class":2800},"  useSurfaceSampler",[605,5511,2970],{"class":614},[605,5513,5496],{"class":651},[605,5515,655],{"class":610},[605,5517,5518],{"class":791}," 50",[605,5520,655],{"class":610},[605,5522,5523],{"class":651}," instancesRef",[605,5525,1118],{"class":610},[605,5527,5496],{"class":651},[605,5529,655],{"class":610},[605,5531,667],{"class":610},[605,5533,2500],{"class":631},[605,5535,5536],{"class":610},"'",[605,5538,5539],{"class":614},")\n",[605,5541,5542,5545],{"class":607,"line":773},[605,5543,5544],{"class":610},"}",[605,5546,5539],{"class":651},[605,5548,5549,5551,5553],{"class":607,"line":799},[605,5550,700],{"class":610},[605,5552,615],{"class":614},[605,5554,637],{"class":610},[605,5556,5557],{"class":607,"line":599},[605,5558,710],{"emptyLinePlaceholder":562},[605,5560,5561,5563,5565],{"class":607,"line":822},[605,5562,611],{"class":610},[605,5564,718],{"class":614},[605,5566,637],{"class":610},[605,5568,5569,5571,5573,5575,5577,5579,5581,5583],{"class":607,"line":833},[605,5570,726],{"class":610},[605,5572,729],{"class":614},[605,5574,732],{"class":618},[605,5576,625],{"class":610},[605,5578,628],{"class":610},[605,5580,5040],{"class":631},[605,5582,628],{"class":610},[605,5584,637],{"class":610},[605,5586,5587,5589,5591,5593,5595,5597,5599,5601,5603,5605,5607,5609,5611,5613,5615],{"class":607,"line":844},[605,5588,749],{"class":610},[605,5590,752],{"class":614},[605,5592,781],{"class":610},[605,5594,1459],{"class":618},[605,5596,625],{"class":610},[605,5598,628],{"class":610},[605,5600,1466],{"class":610},[605,5602,937],{"class":791},[605,5604,1471],{"class":610},[605,5606,1513],{"class":791},[605,5608,1471],{"class":610},[605,5610,2396],{"class":791},[605,5612,1481],{"class":610},[605,5614,628],{"class":610},[605,5616,755],{"class":610},[605,5618,5619,5621,5623],{"class":607,"line":854},[605,5620,749],{"class":610},[605,5622,763],{"class":614},[605,5624,755],{"class":610},[605,5626,5627],{"class":607,"line":600},[605,5628,710],{"emptyLinePlaceholder":562},[605,5630,5631,5633,5635,5637,5639,5641,5644,5646],{"class":607,"line":874},[605,5632,749],{"class":610},[605,5634,828],{"class":614},[605,5636,5431],{"class":618},[605,5638,625],{"class":610},[605,5640,628],{"class":610},[605,5642,5643],{"class":631},"torusRef",[605,5645,628],{"class":610},[605,5647,637],{"class":610},[605,5649,5650,5652,5654],{"class":607,"line":884},[605,5651,825],{"class":610},[605,5653,5127],{"class":614},[605,5655,755],{"class":610},[605,5657,5658,5660,5662],{"class":607,"line":2952},[605,5659,867],{"class":610},[605,5661,828],{"class":614},[605,5663,637],{"class":610},[605,5665,5666],{"class":607,"line":2960},[605,5667,710],{"emptyLinePlaceholder":562},[605,5669,5670,5672],{"class":607,"line":2990},[605,5671,749],{"class":610},[605,5673,5674],{"class":614},"TresInstancedMesh\n",[605,5676,5677,5680,5682,5684,5687],{"class":607,"line":3007},[605,5678,5679],{"class":618},"      ref",[605,5681,625],{"class":610},[605,5683,628],{"class":610},[605,5685,5686],{"class":631},"instancesRef",[605,5688,2987],{"class":610},[605,5690,5691,5694,5696,5698,5700,5702,5705,5707],{"class":607,"line":3022},[605,5692,5693],{"class":610},"      :",[605,5695,1989],{"class":618},[605,5697,625],{"class":610},[605,5699,628],{"class":610},[605,5701,5162],{"class":610},[605,5703,5704],{"class":791},"1_000",[605,5706,1481],{"class":610},[605,5708,2987],{"class":610},[605,5710,5711],{"class":607,"line":3047},[605,5712,5713],{"class":610},"    >\n",[605,5715,5716,5718,5720,5722,5724,5726,5728,5730,5732,5734,5737,5739,5741,5743,5745],{"class":607,"line":2591},[605,5717,825],{"class":610},[605,5719,4735],{"class":614},[605,5721,781],{"class":610},[605,5723,1989],{"class":618},[605,5725,625],{"class":610},[605,5727,628],{"class":610},[605,5729,1466],{"class":610},[605,5731,2203],{"class":791},[605,5733,1471],{"class":610},[605,5735,5736],{"class":791},"32",[605,5738,1471],{"class":610},[605,5740,5736],{"class":791},[605,5742,1481],{"class":610},[605,5744,628],{"class":610},[605,5746,755],{"class":610},[605,5748,5749,5751,5753],{"class":607,"line":3062},[605,5750,825],{"class":610},[605,5752,849],{"class":614},[605,5754,755],{"class":610},[605,5756,5757,5759,5761],{"class":607,"line":3092},[605,5758,867],{"class":610},[605,5760,5151],{"class":614},[605,5762,637],{"class":610},[605,5764,5765],{"class":607,"line":3101},[605,5766,710],{"emptyLinePlaceholder":562},[605,5768,5769,5771,5773,5775,5777,5779,5781,5783,5785,5787,5789,5791,5793],{"class":607,"line":4207},[605,5770,749],{"class":610},[605,5772,3067],{"class":614},[605,5774,781],{"class":610},[605,5776,1989],{"class":618},[605,5778,625],{"class":610},[605,5780,628],{"class":610},[605,5782,1466],{"class":610},[605,5784,1478],{"class":791},[605,5786,1471],{"class":610},[605,5788,1478],{"class":791},[605,5790,1481],{"class":610},[605,5792,628],{"class":610},[605,5794,755],{"class":610},[605,5796,5797,5799,5801],{"class":607,"line":4212},[605,5798,877],{"class":610},[605,5800,729],{"class":614},[605,5802,637],{"class":610},[605,5804,5805,5807,5809],{"class":607,"line":4235},[605,5806,700],{"class":610},[605,5808,718],{"class":614},[605,5810,637],{"class":610},[1299,5812,5813],{},"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":544,"searchDepth":545,"depth":546,"links":5815},[5816,5817,5818],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},{"id":5346,"depth":546,"text":5347},"Distribute instances on mesh surfaces using MeshSurfaceSampler.",{},{"title":69,"description":5819},"tp0RMAouxWdIwvGbhPWEaPk4Au2TU5HY1qCtuO9XCUA",{"id":5824,"title":73,"body":5825,"description":6170,"extension":559,"links":560,"meta":6171,"navigation":562,"path":74,"seo":6172,"stem":75,"__hash__":6173},"docs/2.api/1.abstractions/screen-sizer.md",{"type":469,"value":5826,"toc":6166},[5827,5832,5841,5844,5846,6156,6158,6164],[2558,5828,5829],{},[5830,5831],"abstractions-screen-sizer",{},[582,5833,1322,5834,5837,5838,5840],{},[586,5835,5836],{},"\u003CTresObject3D />"," wrapper that scales to \"screen space\". By default ",[586,5839,1893],{}," THREE world unit will be translated to 1 screen pixel.",[582,5842,5843],{},"E.g. a BoxGeometry with a height, width, and depth of 100 each, will be scaled to 100 screen pixels in each dimension.",[472,5845,15],{"id":592},[594,5847,5850],{"className":596,"code":5848,"highlights":5849,"language":601,"meta":544,"style":544},"\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",[676,768,833],[586,5851,5852,5872,5890,5914,5922,5926,5934,5953,5985,5993,6002,6010,6043,6051,6059,6068,6088,6096,6104,6112,6140,6148],{"__ignoreMap":544},[605,5853,5854,5856,5858,5860,5862,5864,5866,5868,5870],{"class":607,"line":545},[605,5855,611],{"class":610},[605,5857,615],{"class":614},[605,5859,619],{"class":618},[605,5861,622],{"class":618},[605,5863,625],{"class":610},[605,5865,628],{"class":610},[605,5867,632],{"class":631},[605,5869,628],{"class":610},[605,5871,637],{"class":610},[605,5873,5874,5876,5878,5880,5882,5884,5886,5888],{"class":607,"line":546},[605,5875,645],{"class":644},[605,5877,648],{"class":610},[605,5879,683],{"class":651},[605,5881,661],{"class":610},[605,5883,664],{"class":644},[605,5885,667],{"class":610},[605,5887,692],{"class":631},[605,5889,673],{"class":610},[605,5891,5893,5895,5897,5899,5901,5904,5906,5908,5910,5912],{"class":5892,"line":676},[607,641],[605,5894,645],{"class":644},[605,5896,648],{"class":610},[605,5898,658],{"class":651},[605,5900,655],{"class":610},[605,5902,5903],{"class":651}," ScreenSizer",[605,5905,661],{"class":610},[605,5907,664],{"class":644},[605,5909,667],{"class":610},[605,5911,670],{"class":631},[605,5913,673],{"class":610},[605,5915,5916,5918,5920],{"class":607,"line":697},[605,5917,700],{"class":610},[605,5919,615],{"class":614},[605,5921,637],{"class":610},[605,5923,5924],{"class":607,"line":707},[605,5925,710],{"emptyLinePlaceholder":562},[605,5927,5928,5930,5932],{"class":607,"line":713},[605,5929,611],{"class":610},[605,5931,718],{"class":614},[605,5933,637],{"class":610},[605,5935,5936,5938,5940,5942,5944,5946,5949,5951],{"class":607,"line":723},[605,5937,726],{"class":610},[605,5939,729],{"class":614},[605,5941,732],{"class":618},[605,5943,625],{"class":610},[605,5945,628],{"class":610},[605,5947,5948],{"class":631},"#3f3f3f",[605,5950,628],{"class":610},[605,5952,637],{"class":610},[605,5954,5955,5957,5959,5961,5963,5965,5967,5969,5971,5973,5975,5977,5979,5981,5983],{"class":607,"line":746},[605,5956,749],{"class":610},[605,5958,752],{"class":614},[605,5960,781],{"class":610},[605,5962,1459],{"class":618},[605,5964,625],{"class":610},[605,5966,628],{"class":610},[605,5968,1466],{"class":610},[605,5970,1478],{"class":791},[605,5972,1471],{"class":610},[605,5974,1478],{"class":791},[605,5976,1471],{"class":610},[605,5978,1478],{"class":791},[605,5980,1481],{"class":610},[605,5982,628],{"class":610},[605,5984,755],{"class":610},[605,5986,5987,5989,5991],{"class":607,"line":758},[605,5988,749],{"class":610},[605,5990,763],{"class":614},[605,5992,755],{"class":610},[605,5994,5996,5998,6000],{"class":5995,"line":768},[607,641],[605,5997,749],{"class":610},[605,5999,73],{"class":614},[605,6001,637],{"class":610},[605,6003,6004,6006,6008],{"class":607,"line":773},[605,6005,825],{"class":610},[605,6007,828],{"class":614},[605,6009,637],{"class":610},[605,6011,6012,6014,6016,6018,6020,6022,6024,6026,6029,6031,6033,6035,6037,6039,6041],{"class":607,"line":799},[605,6013,836],{"class":610},[605,6015,839],{"class":614},[605,6017,781],{"class":610},[605,6019,1989],{"class":618},[605,6021,625],{"class":610},[605,6023,628],{"class":610},[605,6025,1466],{"class":610},[605,6027,6028],{"class":791},"100",[605,6030,1471],{"class":610},[605,6032,6028],{"class":791},[605,6034,1471],{"class":610},[605,6036,6028],{"class":791},[605,6038,1481],{"class":610},[605,6040,628],{"class":610},[605,6042,755],{"class":610},[605,6044,6045,6047,6049],{"class":607,"line":599},[605,6046,836],{"class":610},[605,6048,849],{"class":614},[605,6050,755],{"class":610},[605,6052,6053,6055,6057],{"class":607,"line":822},[605,6054,857],{"class":610},[605,6056,828],{"class":614},[605,6058,637],{"class":610},[605,6060,6062,6064,6066],{"class":6061,"line":833},[607,641],[605,6063,867],{"class":610},[605,6065,73],{"class":614},[605,6067,637],{"class":610},[605,6069,6070,6072,6074,6076,6078,6080,6082,6084,6086],{"class":607,"line":844},[605,6071,749],{"class":610},[605,6073,828],{"class":614},[605,6075,781],{"class":610},[605,6077,4636],{"class":618},[605,6079,625],{"class":610},[605,6081,628],{"class":610},[605,6083,2396],{"class":791},[605,6085,628],{"class":610},[605,6087,637],{"class":610},[605,6089,6090,6092,6094],{"class":607,"line":854},[605,6091,825],{"class":610},[605,6093,839],{"class":614},[605,6095,755],{"class":610},[605,6097,6098,6100,6102],{"class":607,"line":600},[605,6099,825],{"class":610},[605,6101,849],{"class":614},[605,6103,755],{"class":610},[605,6105,6106,6108,6110],{"class":607,"line":874},[605,6107,867],{"class":610},[605,6109,828],{"class":614},[605,6111,637],{"class":610},[605,6113,6114,6116,6118,6120,6122,6124,6126,6128,6130,6132,6134,6136,6138],{"class":607,"line":884},[605,6115,749],{"class":610},[605,6117,3067],{"class":614},[605,6119,781],{"class":610},[605,6121,1989],{"class":618},[605,6123,625],{"class":610},[605,6125,628],{"class":610},[605,6127,1466],{"class":610},[605,6129,1478],{"class":791},[605,6131,1471],{"class":610},[605,6133,1478],{"class":791},[605,6135,1481],{"class":610},[605,6137,628],{"class":610},[605,6139,755],{"class":610},[605,6141,6142,6144,6146],{"class":607,"line":2952},[605,6143,877],{"class":610},[605,6145,729],{"class":614},[605,6147,637],{"class":610},[605,6149,6150,6152,6154],{"class":607,"line":2960},[605,6151,700],{"class":610},[605,6153,718],{"class":614},[605,6155,637],{"class":610},[472,6157,894],{"id":893},[582,6159,6160,6161,1118],{},"Inherits all props from ",[586,6162,6163],{},"THREE.Object3D",[1299,6165,1648],{},{"title":544,"searchDepth":545,"depth":546,"links":6167},[6168,6169],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},"Scale objects to screen space where 1 unit equals 1 pixel.",{},{"title":73,"description":6170},"kz3721y8yAocwgiv4rVn-y48A-pFvSXFLwhVmj14V5k",{"id":6175,"title":77,"body":6176,"description":6558,"extension":559,"links":560,"meta":6559,"navigation":562,"path":78,"seo":6560,"stem":79,"__hash__":6561},"docs/2.api/1.abstractions/screen-space.md",{"type":469,"value":6177,"toc":6554},[6178,6183,6196,6218,6220,6458,6460,6552],[576,6179,6180],{},[6181,6182],"abstractions-screen-space",{},[582,6184,6185,6188,6189,6192,6193,1118],{},[586,6186,6187],{},"\u003CScreenSpace />"," wraps its children in a ",[586,6190,6191],{},"\u003CTresGroup />"," and positions them in front of the active camera at ",[586,6194,6195],{},":depth",[582,6197,6198,6199,1471,6201,1471,6203,1471,6205,6207,6208,6211,6212,2575,6215,1118],{},"Additionally, the ",[586,6200,927],{},[586,6202,950],{},[586,6204,969],{},[586,6206,988],{}," props can be used to position them similarly to CSS ",[586,6209,6210],{},"position: absolute"," property when using a ",[586,6213,6214],{},"PerspectiveCamera",[586,6216,6217],{},"OrtographicCamera",[472,6219,15],{"id":592},[594,6221,6224],{"className":596,"code":6222,"highlights":6223,"language":601,"meta":544,"style":544},"\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",[546,773,844],[586,6225,6226,6246,6270,6288,6296,6300,6308,6327,6335,6343,6347,6369,6377,6385,6393,6401,6410,6414,6442,6450],{"__ignoreMap":544},[605,6227,6228,6230,6232,6234,6236,6238,6240,6242,6244],{"class":607,"line":545},[605,6229,611],{"class":610},[605,6231,615],{"class":614},[605,6233,619],{"class":618},[605,6235,622],{"class":618},[605,6237,625],{"class":610},[605,6239,628],{"class":610},[605,6241,632],{"class":631},[605,6243,628],{"class":610},[605,6245,637],{"class":610},[605,6247,6249,6251,6253,6255,6257,6260,6262,6264,6266,6268],{"class":6248,"line":546},[607,641],[605,6250,645],{"class":644},[605,6252,648],{"class":610},[605,6254,658],{"class":651},[605,6256,655],{"class":610},[605,6258,6259],{"class":651}," ScreenSpace",[605,6261,661],{"class":610},[605,6263,664],{"class":644},[605,6265,667],{"class":610},[605,6267,670],{"class":631},[605,6269,673],{"class":610},[605,6271,6272,6274,6276,6278,6280,6282,6284,6286],{"class":607,"line":676},[605,6273,645],{"class":644},[605,6275,648],{"class":610},[605,6277,683],{"class":651},[605,6279,661],{"class":610},[605,6281,664],{"class":644},[605,6283,667],{"class":610},[605,6285,692],{"class":631},[605,6287,673],{"class":610},[605,6289,6290,6292,6294],{"class":607,"line":697},[605,6291,700],{"class":610},[605,6293,615],{"class":614},[605,6295,637],{"class":610},[605,6297,6298],{"class":607,"line":707},[605,6299,710],{"emptyLinePlaceholder":562},[605,6301,6302,6304,6306],{"class":607,"line":713},[605,6303,611],{"class":610},[605,6305,718],{"class":614},[605,6307,637],{"class":610},[605,6309,6310,6312,6314,6316,6318,6320,6323,6325],{"class":607,"line":723},[605,6311,726],{"class":610},[605,6313,729],{"class":614},[605,6315,732],{"class":618},[605,6317,625],{"class":610},[605,6319,628],{"class":610},[605,6321,6322],{"class":631},"#333",[605,6324,628],{"class":610},[605,6326,637],{"class":610},[605,6328,6329,6331,6333],{"class":607,"line":746},[605,6330,749],{"class":610},[605,6332,752],{"class":614},[605,6334,755],{"class":610},[605,6336,6337,6339,6341],{"class":607,"line":758},[605,6338,749],{"class":610},[605,6340,763],{"class":614},[605,6342,755],{"class":610},[605,6344,6345],{"class":607,"line":768},[605,6346,710],{"emptyLinePlaceholder":562},[605,6348,6350,6352,6354,6356,6359,6361,6363,6365,6367],{"class":6349,"line":773},[607,641],[605,6351,749],{"class":610},[605,6353,77],{"class":614},[605,6355,781],{"class":610},[605,6357,6358],{"class":618},"depth",[605,6360,625],{"class":610},[605,6362,628],{"class":610},[605,6364,2396],{"class":791},[605,6366,628],{"class":610},[605,6368,637],{"class":610},[605,6370,6371,6373,6375],{"class":607,"line":799},[605,6372,825],{"class":610},[605,6374,828],{"class":614},[605,6376,637],{"class":610},[605,6378,6379,6381,6383],{"class":607,"line":599},[605,6380,836],{"class":610},[605,6382,5127],{"class":614},[605,6384,755],{"class":610},[605,6386,6387,6389,6391],{"class":607,"line":822},[605,6388,836],{"class":610},[605,6390,849],{"class":614},[605,6392,755],{"class":610},[605,6394,6395,6397,6399],{"class":607,"line":833},[605,6396,857],{"class":610},[605,6398,828],{"class":614},[605,6400,637],{"class":610},[605,6402,6404,6406,6408],{"class":6403,"line":844},[607,641],[605,6405,867],{"class":610},[605,6407,77],{"class":614},[605,6409,637],{"class":610},[605,6411,6412],{"class":607,"line":854},[605,6413,710],{"emptyLinePlaceholder":562},[605,6415,6416,6418,6420,6422,6424,6426,6428,6430,6432,6434,6436,6438,6440],{"class":607,"line":600},[605,6417,749],{"class":610},[605,6419,3067],{"class":614},[605,6421,781],{"class":610},[605,6423,1989],{"class":618},[605,6425,625],{"class":610},[605,6427,628],{"class":610},[605,6429,1466],{"class":610},[605,6431,1478],{"class":791},[605,6433,1471],{"class":610},[605,6435,1478],{"class":791},[605,6437,1481],{"class":610},[605,6439,628],{"class":610},[605,6441,755],{"class":610},[605,6443,6444,6446,6448],{"class":607,"line":874},[605,6445,877],{"class":610},[605,6447,729],{"class":614},[605,6449,637],{"class":610},[605,6451,6452,6454,6456],{"class":607,"line":884},[605,6453,700],{"class":610},[605,6455,718],{"class":614},[605,6457,637],{"class":610},[472,6459,894],{"id":893},[899,6461,6462,6472],{},[902,6463,6464],{},[905,6465,6466,6468,6470],{},[908,6467,910],{"align":969},[908,6469,913],{"align":969},[908,6471,916],{},[918,6473,6474,6488,6507,6521,6538],{},[905,6475,6476,6480,6483],{},[923,6477,6478],{"align":969},[586,6479,6358],{},[923,6481,6482],{"align":969},"Distance from the camera",[923,6484,6485],{},[586,6486,6487],{},"-1",[905,6489,6490,6494,6502],{},[923,6491,6492],{"align":969},[586,6493,927],{},[923,6495,6496,6497,6499,6500],{"align":969},"Similar to CSS ",[586,6498,927],{}," property. Cannot be used with ",[586,6501,950],{},[923,6503,6504,6506],{},[586,6505,1513],{}," (vertical center of the screen)",[905,6508,6509,6513,6519],{},[923,6510,6511],{"align":969},[586,6512,950],{},[923,6514,6496,6515,6499,6517],{"align":969},[586,6516,950],{},[586,6518,927],{},[923,6520],{},[905,6522,6523,6527,6533],{},[923,6524,6525],{"align":969},[586,6526,969],{},[923,6528,6496,6529,6499,6531],{"align":969},[586,6530,969],{},[586,6532,988],{},[923,6534,6535,6537],{},[586,6536,1513],{}," (horizontal center of the screen)",[905,6539,6540,6544,6550],{},[923,6541,6542],{"align":969},[586,6543,988],{},[923,6545,6496,6546,6499,6548],{"align":969},[586,6547,988],{},[586,6549,969],{},[923,6551],{},[1299,6553,1648],{},{"title":544,"searchDepth":545,"depth":546,"links":6555},[6556,6557],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},"Position objects in front of the camera with CSS-like positioning.",{},{"title":77,"description":6558},"kqBTtDRTjTEQO1CtIqpPWtj4cpsi2JzyDHE4eOsdRvU",[6563,7855,8239,8570,9302,9660],{"id":6564,"title":87,"body":6565,"description":7851,"extension":559,"links":560,"meta":7852,"navigation":562,"path":88,"seo":7853,"stem":89,"__hash__":7854},"docs/2.api/2.controls/camera-controls.md",{"type":469,"value":6566,"toc":7842},[6567,6572,6583,6591,6593,6815,6820,6822,6825,7276,7279,7308,7472,7476,7604,7613,7616,7739,7743,7799,7839],[576,6568,6569],{},[6570,6571],"controls-camera-controls",{},[582,6573,6574,6579,6580,6582],{},[1112,6575,6578],{"href":6576,"rel":6577},"https://github.com/yomotsu/camera-controls",[1116],"CameraControls"," is a camera controller similar to ",[1112,6581,763],{"href":100}," yet supports smooth transitions and more features.",[582,6584,6585,6586,1118],{},"However, it is thirty party library for ThreeJS. So to use it you would need to install and import using ",[1112,6587,6590],{"href":6588,"rel":6589},"https://www.npmjs.com/package/camera-controls",[1116],"npm",[472,6592,15],{"id":592},[594,6594,6597],{"className":596,"code":6595,"highlights":6596,"language":601,"meta":544,"style":544},"\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",[723],[586,6598,6599,6609,6628,6636,6644,6662,6694,6703,6723,6743,6751,6759,6791,6799,6807],{"__ignoreMap":544},[605,6600,6601,6603,6605,6607],{"class":607,"line":545},[605,6602,611],{"class":610},[605,6604,615],{"class":614},[605,6606,619],{"class":618},[605,6608,637],{"class":610},[605,6610,6611,6613,6615,6618,6620,6622,6624,6626],{"class":607,"line":546},[605,6612,645],{"class":644},[605,6614,648],{"class":610},[605,6616,6617],{"class":651}," CameraControls",[605,6619,661],{"class":610},[605,6621,664],{"class":644},[605,6623,3322],{"class":610},[605,6625,670],{"class":631},[605,6627,2987],{"class":610},[605,6629,6630,6632,6634],{"class":607,"line":676},[605,6631,700],{"class":610},[605,6633,615],{"class":614},[605,6635,637],{"class":610},[605,6637,6638,6640,6642],{"class":607,"line":697},[605,6639,611],{"class":610},[605,6641,718],{"class":614},[605,6643,637],{"class":610},[605,6645,6646,6648,6650,6652,6654,6656,6658,6660],{"class":607,"line":707},[605,6647,726],{"class":610},[605,6649,729],{"class":614},[605,6651,732],{"class":618},[605,6653,625],{"class":610},[605,6655,628],{"class":610},[605,6657,5040],{"class":631},[605,6659,628],{"class":610},[605,6661,637],{"class":610},[605,6663,6664,6666,6668,6670,6672,6674,6676,6678,6680,6682,6684,6686,6688,6690,6692],{"class":607,"line":713},[605,6665,749],{"class":610},[605,6667,752],{"class":614},[605,6669,781],{"class":610},[605,6671,1459],{"class":618},[605,6673,625],{"class":610},[605,6675,628],{"class":610},[605,6677,1466],{"class":610},[605,6679,4160],{"class":791},[605,6681,1471],{"class":610},[605,6683,4160],{"class":791},[605,6685,1471],{"class":610},[605,6687,4160],{"class":791},[605,6689,1481],{"class":610},[605,6691,628],{"class":610},[605,6693,755],{"class":610},[605,6695,6697,6699,6701],{"class":6696,"line":723},[607,641],[605,6698,749],{"class":610},[605,6700,6578],{"class":614},[605,6702,755],{"class":610},[605,6704,6705,6707,6709,6711,6713,6715,6717,6719,6721],{"class":607,"line":746},[605,6706,749],{"class":610},[605,6708,193],{"class":614},[605,6710,781],{"class":610},[605,6712,784],{"class":618},[605,6714,625],{"class":610},[605,6716,628],{"class":610},[605,6718,792],{"class":791},[605,6720,628],{"class":610},[605,6722,637],{"class":610},[605,6724,6725,6727,6730,6732,6734,6736,6739,6741],{"class":607,"line":758},[605,6726,825],{"class":610},[605,6728,6729],{"class":614},"TresMeshToonMaterial",[605,6731,3978],{"class":618},[605,6733,625],{"class":610},[605,6735,628],{"class":610},[605,6737,6738],{"class":631},"orange",[605,6740,628],{"class":610},[605,6742,755],{"class":610},[605,6744,6745,6747,6749],{"class":607,"line":768},[605,6746,867],{"class":610},[605,6748,193],{"class":614},[605,6750,637],{"class":610},[605,6752,6753,6755,6757],{"class":607,"line":773},[605,6754,749],{"class":610},[605,6756,3518],{"class":614},[605,6758,755],{"class":610},[605,6760,6761,6763,6765,6767,6769,6771,6773,6775,6777,6779,6781,6783,6785,6787,6789],{"class":607,"line":799},[605,6762,749],{"class":610},[605,6764,3539],{"class":614},[605,6766,781],{"class":610},[605,6768,1459],{"class":618},[605,6770,625],{"class":610},[605,6772,628],{"class":610},[605,6774,1466],{"class":610},[605,6776,937],{"class":791},[605,6778,1471],{"class":610},[605,6780,792],{"class":791},[605,6782,1471],{"class":610},[605,6784,3490],{"class":791},[605,6786,1481],{"class":610},[605,6788,628],{"class":610},[605,6790,755],{"class":610},[605,6792,6793,6795,6797],{"class":607,"line":599},[605,6794,749],{"class":610},[605,6796,3067],{"class":614},[605,6798,755],{"class":610},[605,6800,6801,6803,6805],{"class":607,"line":822},[605,6802,877],{"class":610},[605,6804,729],{"class":614},[605,6806,637],{"class":610},[605,6808,6809,6811,6813],{"class":607,"line":833},[605,6810,700],{"class":610},[605,6812,718],{"class":614},[605,6814,637],{"class":610},[3725,6816,6817],{},[582,6818,6819],{},"Is really important that the Perspective camera is set first in the canvas. Otherwise might break.",[472,6821,894],{"id":893},[582,6823,6824],{},"Certainly! Here's the properties of the object in raw markdown table format:",[899,6826,6827,6837],{},[902,6828,6829],{},[905,6830,6831,6833,6835],{},[908,6832,910],{"align":969},[908,6834,913],{"align":969},[908,6836,916],{},[918,6838,6839,6853,6867,6881,6895,6909,6924,6939,6954,6969,6983,6999,7013,7027,7042,7057,7071,7086,7100,7114,7130,7145,7161,7175,7193,7208,7226,7241,7260],{},[905,6840,6841,6846,6849],{},[923,6842,6843],{"align":969},[1673,6844,6845],{},"makeDefault",[923,6847,6848],{"align":969},"Whether to make this the default controls.",[923,6850,6851],{},[586,6852,943],{},[905,6854,6855,6860,6863],{},[923,6856,6857],{"align":969},[1673,6858,6859],{},"camera",[923,6861,6862],{"align":969},"The camera to control.",[923,6864,6865],{},[586,6866,1151],{},[905,6868,6869,6874,6877],{},[923,6870,6871],{"align":969},[1673,6872,6873],{},"domElement",[923,6875,6876],{"align":969},"The DOM element to listen to.",[923,6878,6879],{},[586,6880,1151],{},[905,6882,6883,6888,6891],{},[923,6884,6885],{"align":969},[1673,6886,6887],{},"minPolarAngle",[923,6889,6890],{"align":969},"Minimum vertical angle in radians.",[923,6892,6893],{},[586,6894,937],{},[905,6896,6897,6902,6905],{},[923,6898,6899],{"align":969},[1673,6900,6901],{},"maxPolarAngle",[923,6903,6904],{"align":969},"Maximum vertical angle in radians.",[923,6906,6907],{},[586,6908,4913],{},[905,6910,6911,6916,6919],{},[923,6912,6913],{"align":969},[1673,6914,6915],{},"minAzimuthAngle",[923,6917,6918],{"align":969},"Minimum horizontal angle in radians.",[923,6920,6921],{},[586,6922,6923],{},"-Infinity",[905,6925,6926,6931,6934],{},[923,6927,6928],{"align":969},[1673,6929,6930],{},"maxAzimuthAngle",[923,6932,6933],{"align":969},"Maximum horizontal angle in radians.",[923,6935,6936],{},[586,6937,6938],{},"Infinity",[905,6940,6941,6946,6949],{},[923,6942,6943],{"align":969},[1673,6944,6945],{},"distance",[923,6947,6948],{"align":969},"Current distance.",[923,6950,6951],{},[586,6952,6953],{},"camera.position.z",[905,6955,6956,6961,6964],{},[923,6957,6958],{"align":969},[1673,6959,6960],{},"minDistance",[923,6962,6963],{"align":969},"Minimum distance for dolly. PerspectiveCamera only.",[923,6965,6966],{},[586,6967,6968],{},"Number.EPSILON",[905,6970,6971,6976,6979],{},[923,6972,6973],{"align":969},[1673,6974,6975],{},"maxDistance",[923,6977,6978],{"align":969},"Maximum distance for dolly. PerspectiveCamera only.",[923,6980,6981],{},[586,6982,6938],{},[905,6984,6985,6990,6995],{},[923,6986,6987],{"align":969},[1673,6988,6989],{},"infinityDolly",[923,6991,6992,6994],{"align":969},[586,6993,933],{}," to enable Infinity Dolly for wheel and pinch.",[923,6996,6997],{},[586,6998,943],{},[905,7000,7001,7006,7009],{},[923,7002,7003],{"align":969},[1673,7004,7005],{},"minZoom",[923,7007,7008],{"align":969},"Minimum camera zoom.",[923,7010,7011],{},[586,7012,1907],{},[905,7014,7015,7020,7023],{},[923,7016,7017],{"align":969},[1673,7018,7019],{},"maxZoom",[923,7021,7022],{"align":969},"Maximum camera zoom.",[923,7024,7025],{},[586,7026,6938],{},[905,7028,7029,7034,7037],{},[923,7030,7031],{"align":969},[1673,7032,7033],{},"smoothTime",[923,7035,7036],{"align":969},"Approximate time in seconds to reach the target. A smaller value will reach the target faster.",[923,7038,7039],{},[586,7040,7041],{},"0.25",[905,7043,7044,7049,7052],{},[923,7045,7046],{"align":969},[1673,7047,7048],{},"draggingSmoothTime",[923,7050,7051],{"align":969},"The smoothTime while dragging.",[923,7053,7054],{},[586,7055,7056],{},"0.125",[905,7058,7059,7064,7067],{},[923,7060,7061],{"align":969},[1673,7062,7063],{},"maxSpeed",[923,7065,7066],{"align":969},"Max transition speed in units per second.",[923,7068,7069],{},[586,7070,6938],{},[905,7072,7073,7078,7081],{},[923,7074,7075],{"align":969},[1673,7076,7077],{},"azimuthRotateSpeed",[923,7079,7080],{"align":969},"Speed of azimuth (horizontal) rotation.",[923,7082,7083],{},[586,7084,7085],{},"1.0",[905,7087,7088,7093,7096],{},[923,7089,7090],{"align":969},[1673,7091,7092],{},"polarRotateSpeed",[923,7094,7095],{"align":969},"Speed of polar (vertical) rotation.",[923,7097,7098],{},[586,7099,7085],{},[905,7101,7102,7107,7110],{},[923,7103,7104],{"align":969},[1673,7105,7106],{},"dollySpeed",[923,7108,7109],{"align":969},"Speed of mouse-wheel dollying.",[923,7111,7112],{},[586,7113,7085],{},[905,7115,7116,7121,7126],{},[923,7117,7118],{"align":969},[1673,7119,7120],{},"dollyDragInverted",[923,7122,7123,7125],{"align":969},[586,7124,933],{}," to invert direction when dollying or zooming via drag.",[923,7127,7128],{},[586,7129,943],{},[905,7131,7132,7137,7140],{},[923,7133,7134],{"align":969},[1673,7135,7136],{},"truckSpeed",[923,7138,7139],{"align":969},"Speed of drag for truck and pedestal.",[923,7141,7142],{},[586,7143,7144],{},"2.0",[905,7146,7147,7152,7157],{},[923,7148,7149],{"align":969},[1673,7150,7151],{},"dollyToCursor",[923,7153,7154,7156],{"align":969},[586,7155,933],{}," to enable Dolly-in to the mouse cursor coords.",[923,7158,7159],{},[586,7160,943],{},[905,7162,7163,7168,7171],{},[923,7164,7165],{"align":969},[1673,7166,7167],{},"dragToOffset",[923,7169,7170],{"align":969},"Whether to drag to offset.",[923,7172,7173],{},[586,7174,943],{},[905,7176,7177,7182,7189],{},[923,7178,7179],{"align":969},[1673,7180,7181],{},"verticalDragToForward",[923,7183,7184,7185,7188],{"align":969},"The same as ",[586,7186,7187],{},".screenSpacePanning"," in three.js's OrbitControls.",[923,7190,7191],{},[586,7192,943],{},[905,7194,7195,7200,7203],{},[923,7196,7197],{"align":969},[1673,7198,7199],{},"boundaryFriction",[923,7201,7202],{"align":969},"Friction ratio of the boundary.",[923,7204,7205],{},[586,7206,7207],{},"0.0",[905,7209,7210,7215,7222],{},[923,7211,7212],{"align":969},[1673,7213,7214],{},"restThreshold",[923,7216,7217,7218,7221],{"align":969},"Controls how soon the ",[586,7219,7220],{},"rest"," event fires as the camera slows.",[923,7223,7224],{},[586,7225,1907],{},[905,7227,7228,7233,7236],{},[923,7229,7230],{"align":969},[1673,7231,7232],{},"colliderMeshes",[923,7234,7235],{"align":969},"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.",[923,7237,7238],{},[586,7239,7240],{},"[]",[905,7242,7243,7248,7251],{},[923,7244,7245],{"align":969},[1673,7246,7247],{},"mouseButtons",[923,7249,7250],{"align":969},"Configuration of actions on mouse input.",[923,7252,1110,7253,7259],{},[1112,7254,7256],{"href":7255},"#user-input-config",[586,7257,7258],{},"User input config"," for details",[905,7261,7262,7267,7270],{},[923,7263,7264],{"align":969},[1673,7265,7266],{},"touches",[923,7268,7269],{"align":969},"Configuration of actions on touch.",[923,7271,1110,7272,7259],{},[1112,7273,7274],{"href":7255},[586,7275,7258],{},[472,7277,7258],{"id":7278},"user-input-config",[582,7280,7281,7282,7284,7285,7287,7288,7296,7297,7299,7300,7303,7304,7307],{},"You can easily override the default user input config by defining ",[586,7283,7247],{}," and/or ",[586,7286,7266],{}," props that correspond to ",[1112,7289,7292,7295],{"href":7290,"rel":7291},"https://github.com/yomotsu/camera-controls?#user-input-config",[1116],[586,7293,7294],{},"camera-controls"," settings",". For ease of use, we're re-exporting the ",[586,7298,6578],{}," class as ",[586,7301,7302],{},"BaseCameraControls"," which gives you access to the ",[586,7305,7306],{},"ACTION"," enum.",[594,7309,7311],{"className":596,"code":7310,"language":601,"meta":544,"style":544},"\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",[586,7312,7313,7333,7356,7364,7368,7376,7381,7388,7423,7455,7460,7464],{"__ignoreMap":544},[605,7314,7315,7317,7319,7321,7323,7325,7327,7329,7331],{"class":607,"line":545},[605,7316,611],{"class":610},[605,7318,615],{"class":614},[605,7320,622],{"class":618},[605,7322,625],{"class":610},[605,7324,628],{"class":610},[605,7326,632],{"class":631},[605,7328,628],{"class":610},[605,7330,619],{"class":618},[605,7332,637],{"class":610},[605,7334,7335,7337,7339,7342,7344,7346,7348,7350,7352,7354],{"class":607,"line":546},[605,7336,645],{"class":644},[605,7338,648],{"class":610},[605,7340,7341],{"class":651}," BaseCameraControls",[605,7343,655],{"class":610},[605,7345,6617],{"class":651},[605,7347,661],{"class":610},[605,7349,664],{"class":644},[605,7351,667],{"class":610},[605,7353,670],{"class":631},[605,7355,673],{"class":610},[605,7357,7358,7360,7362],{"class":607,"line":676},[605,7359,700],{"class":610},[605,7361,615],{"class":614},[605,7363,637],{"class":610},[605,7365,7366],{"class":607,"line":697},[605,7367,710],{"emptyLinePlaceholder":562},[605,7369,7370,7372,7374],{"class":607,"line":707},[605,7371,611],{"class":610},[605,7373,718],{"class":614},[605,7375,637],{"class":610},[605,7377,7378],{"class":607,"line":713},[605,7379,7380],{"class":651},"  ...\n",[605,7382,7383,7385],{"class":607,"line":723},[605,7384,726],{"class":610},[605,7386,7387],{"class":614},"CameraControls\n",[605,7389,7390,7393,7396,7398,7400,7403,7405,7408,7410,7412,7414,7416,7419,7421],{"class":607,"line":746},[605,7391,7392],{"class":610},"    :",[605,7394,7395],{"class":618},"mouse-buttons",[605,7397,625],{"class":610},[605,7399,628],{"class":610},[605,7401,7402],{"class":610},"{ ",[605,7404,969],{"class":614},[605,7406,7407],{"class":610},": ",[605,7409,7302],{"class":651},[605,7411,1118],{"class":610},[605,7413,7306],{"class":651},[605,7415,1118],{"class":610},[605,7417,7418],{"class":651},"DOLLY",[605,7420,661],{"class":610},[605,7422,2987],{"class":610},[605,7424,7425,7427,7429,7431,7433,7435,7438,7440,7442,7444,7446,7448,7451,7453],{"class":607,"line":758},[605,7426,7392],{"class":610},[605,7428,7266],{"class":618},[605,7430,625],{"class":610},[605,7432,628],{"class":610},[605,7434,7402],{"class":610},[605,7436,7437],{"class":614},"one",[605,7439,7407],{"class":610},[605,7441,7302],{"class":651},[605,7443,1118],{"class":610},[605,7445,7306],{"class":651},[605,7447,1118],{"class":610},[605,7449,7450],{"class":651},"TOUCH_TRUCK",[605,7452,661],{"class":610},[605,7454,2987],{"class":610},[605,7456,7457],{"class":607,"line":768},[605,7458,7459],{"class":610},"  />\n",[605,7461,7462],{"class":607,"line":773},[605,7463,7380],{"class":651},[605,7465,7466,7468,7470],{"class":607,"line":799},[605,7467,700],{"class":610},[605,7469,718],{"class":614},[605,7471,637],{"class":610},[7473,7474,7475],"h3",{"id":7395},"Mouse buttons",[899,7477,7478,7490],{},[902,7479,7480],{},[905,7481,7482,7485,7488],{},[908,7483,7484],{},"Button to assign",[908,7486,7487],{},"Options",[908,7489,916],{},[918,7491,7492,7523,7548,7578],{},[905,7493,7494,7499,7519],{},[923,7495,7496],{},[586,7497,7498],{},"mouseButtons.left",[923,7500,7501,7504,7505,7504,7508,7504,7511,7504,7513,7504,7516],{},[586,7502,7503],{},"ROTATE"," | ",[586,7506,7507],{},"TRUCK",[586,7509,7510],{},"OFFSET",[586,7512,7418],{},[586,7514,7515],{},"ZOOM",[586,7517,7518],{},"NONE",[923,7520,7521],{},[586,7522,7503],{},[905,7524,7525,7530,7544],{},[923,7526,7527],{},[586,7528,7529],{},"mouseButtons.right",[923,7531,7532,7504,7534,7504,7536,7504,7538,7504,7540,7504,7542],{},[586,7533,7503],{},[586,7535,7507],{},[586,7537,7510],{},[586,7539,7418],{},[586,7541,7515],{},[586,7543,7518],{},[923,7545,7546],{},[586,7547,7507],{},[905,7549,7550,7556,7570],{},[923,7551,7552,7555],{},[586,7553,7554],{},"mouseButtons.wheel"," ¹",[923,7557,7558,7504,7560,7504,7562,7504,7564,7504,7566,7504,7568],{},[586,7559,7503],{},[586,7561,7507],{},[586,7563,7510],{},[586,7565,7418],{},[586,7567,7515],{},[586,7569,7518],{},[923,7571,7572,7574,7575,7577],{},[586,7573,7418],{}," for Perspective camera, ",[586,7576,7515],{}," for Orthographic camera.",[905,7579,7580,7586,7600],{},[923,7581,7582,7585],{},[586,7583,7584],{},"mouseButtons.middle"," ²",[923,7587,7588,7504,7590,7504,7592,7504,7594,7504,7596,7504,7598],{},[586,7589,7503],{},[586,7591,7507],{},[586,7593,7510],{},[586,7595,7418],{},[586,7597,7515],{},[586,7599,7518],{},[923,7601,7602],{},[586,7603,7418],{},[7605,7606,7607,7610],"ol",{},[3139,7608,7609],{},"Mouse wheel event for scroll \"up/down\", on mac \"up/down/left/right\".",[3139,7611,7612],{},"Mouse wheel \"button\" click event.",[7473,7614,7615],{"id":7266},"Touches",[899,7617,7618,7629],{},[902,7619,7620],{},[905,7621,7622,7625,7627],{},[908,7623,7624],{},"Fingers to assign",[908,7626,7487],{},[908,7628,916],{},[918,7630,7631,7658,7706],{},[905,7632,7633,7638,7654],{},[923,7634,7635],{},[586,7636,7637],{},"touches.one",[923,7639,7640,7504,7643,7504,7645,7504,7648,7504,7650,7504,7652],{},[586,7641,7642],{},"TOUCH_ROTATE",[586,7644,7450],{},[586,7646,7647],{},"TOUCH_OFFSET",[586,7649,7418],{},[586,7651,7515],{},[586,7653,7518],{},[923,7655,7656],{},[586,7657,7642],{},[905,7659,7660,7665,7699],{},[923,7661,7662],{},[586,7663,7664],{},"touches.two",[923,7666,7667,7504,7670,7504,7673,7504,7676,7504,7679,7504,7682,7504,7685,7504,7688,7504,7691,7504,7693,7504,7695,7504,7697],{},[586,7668,7669],{},"TOUCH_DOLLY_TRUCK",[586,7671,7672],{},"TOUCH_DOLLY_OFFSET",[586,7674,7675],{},"TOUCH_DOLLY_ROTATE",[586,7677,7678],{},"TOUCH_ZOOM_TRUCK",[586,7680,7681],{},"TOUCH_ZOOM_OFFSET",[586,7683,7684],{},"TOUCH_ZOOM_ROTATE",[586,7686,7687],{},"TOUCH_DOLLY",[586,7689,7690],{},"TOUCH_ZOOM",[586,7692,7642],{},[586,7694,7450],{},[586,7696,7647],{},[586,7698,7518],{},[923,7700,7701,7574,7703,7705],{},[586,7702,7669],{},[586,7704,7678],{}," for Othographic camera.",[905,7707,7708,7713,7735],{},[923,7709,7710],{},[586,7711,7712],{},"touches.three",[923,7714,7715,7504,7717,7504,7719,7504,7721,7504,7723,7504,7725,7504,7727,7504,7729,7504,7731,7504,7733],{},[586,7716,7669],{},[586,7718,7672],{},[586,7720,7675],{},[586,7722,7678],{},[586,7724,7681],{},[586,7726,7684],{},[586,7728,7642],{},[586,7730,7450],{},[586,7732,7647],{},[586,7734,7518],{},[923,7736,7737],{},[586,7738,7450],{},[472,7740,7742],{"id":7741},"events","Events",[594,7744,7746],{"className":596,"code":7745,"language":601,"meta":544,"style":544},"\u003CCameraControls @change=\"onChange\" @start=\"onStart\" @end=\"onEnd\" />\n",[586,7747,7748],{"__ignoreMap":544},[605,7749,7750,7752,7754,7757,7760,7762,7764,7767,7769,7771,7774,7776,7778,7781,7783,7785,7788,7790,7792,7795,7797],{"class":607,"line":545},[605,7751,611],{"class":610},[605,7753,6578],{"class":614},[605,7755,7756],{"class":610}," @",[605,7758,7759],{"class":618},"change",[605,7761,625],{"class":610},[605,7763,628],{"class":610},[605,7765,7766],{"class":651},"onChange",[605,7768,628],{"class":610},[605,7770,7756],{"class":610},[605,7772,7773],{"class":618},"start",[605,7775,625],{"class":610},[605,7777,628],{"class":610},[605,7779,7780],{"class":651},"onStart",[605,7782,628],{"class":610},[605,7784,7756],{"class":610},[605,7786,7787],{"class":618},"end",[605,7789,625],{"class":610},[605,7791,628],{"class":610},[605,7793,7794],{"class":651},"onEnd",[605,7796,628],{"class":610},[605,7798,755],{"class":610},[899,7800,7801,7810],{},[902,7802,7803],{},[905,7804,7805,7808],{},[908,7806,7807],{"align":969},"Event",[908,7809,913],{"align":969},[918,7811,7812,7821,7830],{},[905,7813,7814,7818],{},[923,7815,7816],{"align":969},[1673,7817,7773],{},[923,7819,7820],{"align":969},"Dispatched when the control starts to change.",[905,7822,7823,7827],{},[923,7824,7825],{"align":969},[1673,7826,7759],{},[923,7828,7829],{"align":969},"Dispatched when the control changes.",[905,7831,7832,7836],{},[923,7833,7834],{"align":969},[1673,7835,7787],{},[923,7837,7838],{"align":969},"Dispatched when the control ends to change.",[1299,7840,7841],{},"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":544,"searchDepth":545,"depth":546,"links":7843},[7844,7845,7846,7850],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},{"id":7278,"depth":546,"text":7258,"children":7847},[7848,7849],{"id":7395,"depth":676,"text":7475},{"id":7266,"depth":676,"text":7615},{"id":7741,"depth":546,"text":7742},"Is similar to OrbitControls yet supports smooth transitions and more features.",{},{"title":87,"description":7851},"IKDAac48MtZ_XhF1HtdxCH6-6PqFat6euYCU4975M3c",{"id":7856,"title":91,"body":7857,"description":7874,"extension":559,"links":560,"meta":8236,"navigation":562,"path":92,"seo":8237,"stem":93,"__hash__":8238},"docs/2.api/2.controls/keyboard-controls.md",{"type":469,"value":7858,"toc":8231},[7859,7864,7870,7878,7894,7896,8053,8057,8059,8139,8141,8192,8228],[576,7860,7861],{},[7862,7863],"controls-keyboard-controls",{},[582,7865,7866,7869],{},[586,7867,7868],{},"\u003CKeyboardControls />"," is a simple keyboard controller for the camera. The camera's movements are bound to:",[3136,7871,7872,7875],{},[3139,7873,7874],{},"WASD on QWERTY keyboards or equivalent keys on non-QWERTY keyboards",[3139,7876,7877],{},"Arrow keys",[2046,7879,7880],{},[582,7881,7882,7885,7886,7889,7890,1118],{},[586,7883,7884],{},"KeyboardControls"," uses ",[586,7887,7888],{},"PointerLockControls"," under the hood. You can use ",[1112,7891,7893],{"href":7892},"pointer-lock-controls#props","PointerLockControls props and events",[472,7895,15],{"id":592},[594,7897,7900],{"className":596,"code":7898,"highlights":7899,"language":601,"meta":544,"style":544},"\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",[676,768],[586,7901,7902,7922,7940,7964,7972,7976,7984,7992,8000,8020,8029,8037,8045],{"__ignoreMap":544},[605,7903,7904,7906,7908,7910,7912,7914,7916,7918,7920],{"class":607,"line":545},[605,7905,611],{"class":610},[605,7907,615],{"class":614},[605,7909,619],{"class":618},[605,7911,622],{"class":618},[605,7913,625],{"class":610},[605,7915,628],{"class":610},[605,7917,632],{"class":631},[605,7919,628],{"class":610},[605,7921,637],{"class":610},[605,7923,7924,7926,7928,7930,7932,7934,7936,7938],{"class":607,"line":546},[605,7925,645],{"class":644},[605,7927,648],{"class":610},[605,7929,683],{"class":651},[605,7931,661],{"class":610},[605,7933,664],{"class":644},[605,7935,667],{"class":610},[605,7937,692],{"class":631},[605,7939,673],{"class":610},[605,7941,7943,7945,7947,7950,7952,7954,7956,7958,7960,7962],{"class":7942,"line":676},[607,641],[605,7944,645],{"class":644},[605,7946,648],{"class":610},[605,7948,7949],{"class":651}," KeyboardControls",[605,7951,655],{"class":610},[605,7953,1369],{"class":651},[605,7955,661],{"class":610},[605,7957,664],{"class":644},[605,7959,667],{"class":610},[605,7961,670],{"class":631},[605,7963,673],{"class":610},[605,7965,7966,7968,7970],{"class":607,"line":697},[605,7967,700],{"class":610},[605,7969,615],{"class":614},[605,7971,637],{"class":610},[605,7973,7974],{"class":607,"line":707},[605,7975,710],{"emptyLinePlaceholder":562},[605,7977,7978,7980,7982],{"class":607,"line":713},[605,7979,611],{"class":610},[605,7981,718],{"class":614},[605,7983,637],{"class":610},[605,7985,7986,7988,7990],{"class":607,"line":723},[605,7987,726],{"class":610},[605,7989,729],{"class":614},[605,7991,637],{"class":610},[605,7993,7994,7996,7998],{"class":607,"line":746},[605,7995,749],{"class":610},[605,7997,752],{"class":614},[605,7999,755],{"class":610},[605,8001,8002,8004,8006,8008,8010,8012,8014,8016,8018],{"class":607,"line":758},[605,8003,749],{"class":610},[605,8005,193],{"class":614},[605,8007,781],{"class":610},[605,8009,1968],{"class":618},[605,8011,625],{"class":610},[605,8013,628],{"class":610},[605,8015,1513],{"class":791},[605,8017,628],{"class":610},[605,8019,755],{"class":610},[605,8021,8023,8025,8027],{"class":8022,"line":768},[607,641],[605,8024,749],{"class":610},[605,8026,7884],{"class":614},[605,8028,755],{"class":610},[605,8030,8031,8033,8035],{"class":607,"line":773},[605,8032,749],{"class":610},[605,8034,3067],{"class":614},[605,8036,755],{"class":610},[605,8038,8039,8041,8043],{"class":607,"line":799},[605,8040,877],{"class":610},[605,8042,729],{"class":614},[605,8044,637],{"class":610},[605,8046,8047,8049,8051],{"class":607,"line":599},[605,8048,700],{"class":610},[605,8050,718],{"class":614},[605,8052,637],{"class":610},[3725,8054,8055],{},[582,8056,6819],{},[472,8058,894],{"id":893},[899,8060,8061,8071],{},[902,8062,8063],{},[905,8064,8065,8067,8069],{},[908,8066,910],{"align":969},[908,8068,913],{"align":969},[908,8070,916],{},[918,8072,8073,8086,8101,8113,8125],{},[905,8074,8075,8080,8083],{},[923,8076,8077],{"align":969},[1673,8078,8079],{},"moveSpeed",[923,8081,8082],{"align":969},"Speed movement.",[923,8084,8085],{},"0.2",[905,8087,8088,8092,8097],{},[923,8089,8090],{"align":969},[1673,8091,6845],{},[923,8093,930,8094,8096],{"align":969},[586,8095,933],{},", the controls will be set as the default controls for the scene.",[923,8098,8099],{},[586,8100,933],{},[905,8102,8103,8107,8109],{},[923,8104,8105],{"align":969},[1673,8106,6859],{},[923,8108,6862],{"align":969},[923,8110,8111],{},[586,8112,1151],{},[905,8114,8115,8119,8121],{},[923,8116,8117],{"align":969},[1673,8118,6873],{},[923,8120,6876],{"align":969},[923,8122,8123],{},[586,8124,1151],{},[905,8126,8127,8132,8135],{},[923,8128,8129],{"align":969},[1673,8130,8131],{},"selector",[923,8133,8134],{"align":969},"Accept an id element as string. If set, the new element will be used as the trigger",[923,8136,8137],{},[586,8138,1151],{},[472,8140,7742],{"id":7741},[594,8142,8144],{"className":596,"code":8143,"language":601,"meta":544,"style":544},"\u003CKeyboardControls @change=\"onChange\" @is-lock=\"(state) => isActive(state)\" />\n",[586,8145,8146],{"__ignoreMap":544},[605,8147,8148,8150,8152,8154,8156,8158,8160,8162,8164,8166,8169,8171,8173,8175,8178,8180,8182,8185,8188,8190],{"class":607,"line":545},[605,8149,611],{"class":610},[605,8151,7884],{"class":614},[605,8153,7756],{"class":610},[605,8155,7759],{"class":618},[605,8157,625],{"class":610},[605,8159,628],{"class":610},[605,8161,7766],{"class":651},[605,8163,628],{"class":610},[605,8165,7756],{"class":610},[605,8167,8168],{"class":618},"is-lock",[605,8170,625],{"class":610},[605,8172,628],{"class":610},[605,8174,2970],{"class":610},[605,8176,8177],{"class":5495},"state",[605,8179,4125],{"class":610},[605,8181,5501],{"class":618},[605,8183,8184],{"class":2800}," isActive",[605,8186,8187],{"class":651},"(state)",[605,8189,628],{"class":610},[605,8191,755],{"class":651},[899,8193,8194,8202],{},[902,8195,8196],{},[905,8197,8198,8200],{},[908,8199,7807],{"align":969},[908,8201,913],{"align":969},[918,8203,8204,8220],{},[905,8205,8206,8211],{},[923,8207,8208],{"align":969},[1673,8209,8210],{},"isLock",[923,8212,8213,8214,8216,8217,8219],{"align":969},"Return ",[586,8215,933],{}," if \"lock\", ",[586,8218,943],{}," if \"unlock\" events are triggered.",[905,8221,8222,8226],{},[923,8223,8224],{"align":969},[1673,8225,7759],{},[923,8227,7829],{"align":969},[1299,8229,8230],{},"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":544,"searchDepth":545,"depth":546,"links":8232},[8233,8234,8235],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},{"id":7741,"depth":546,"text":7742},{},{"title":91,"description":7874},"Oix2-Nx3pvTy-NyphfuJ57zwsLs_Vfgz8LsTCMVbO8c",{"id":8240,"title":95,"body":8241,"description":8566,"extension":559,"links":560,"meta":8567,"navigation":562,"path":96,"seo":8568,"stem":97,"__hash__":8569},"docs/2.api/2.controls/map-controls.md",{"type":469,"value":8242,"toc":8562},[8243,8248,8256,8258,8478,8483,8485,8555,8560],[576,8244,8245],{},[8246,8247],"controls-map-controls",{},[582,8249,8250,8255],{},[1112,8251,8254],{"href":8252,"rel":8253},"https://threejs.org/docs/index.html?q=controls#examples/en/controls/MapControls",[1116],"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.",[472,8257,15],{"id":592},[594,8259,8262],{"className":596,"code":8260,"highlights":8261,"language":601,"meta":544,"style":544},"\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",[723],[586,8263,8264,8274,8293,8301,8309,8327,8359,8368,8388,8406,8414,8422,8454,8462,8470],{"__ignoreMap":544},[605,8265,8266,8268,8270,8272],{"class":607,"line":545},[605,8267,611],{"class":610},[605,8269,615],{"class":614},[605,8271,619],{"class":618},[605,8273,637],{"class":610},[605,8275,8276,8278,8280,8283,8285,8287,8289,8291],{"class":607,"line":546},[605,8277,645],{"class":644},[605,8279,648],{"class":610},[605,8281,8282],{"class":651}," MapControls",[605,8284,661],{"class":610},[605,8286,664],{"class":644},[605,8288,3322],{"class":610},[605,8290,670],{"class":631},[605,8292,2987],{"class":610},[605,8294,8295,8297,8299],{"class":607,"line":676},[605,8296,700],{"class":610},[605,8298,615],{"class":614},[605,8300,637],{"class":610},[605,8302,8303,8305,8307],{"class":607,"line":697},[605,8304,611],{"class":610},[605,8306,718],{"class":614},[605,8308,637],{"class":610},[605,8310,8311,8313,8315,8317,8319,8321,8323,8325],{"class":607,"line":707},[605,8312,726],{"class":610},[605,8314,729],{"class":614},[605,8316,732],{"class":618},[605,8318,625],{"class":610},[605,8320,628],{"class":610},[605,8322,5040],{"class":631},[605,8324,628],{"class":610},[605,8326,637],{"class":610},[605,8328,8329,8331,8333,8335,8337,8339,8341,8343,8345,8347,8349,8351,8353,8355,8357],{"class":607,"line":713},[605,8330,749],{"class":610},[605,8332,752],{"class":614},[605,8334,781],{"class":610},[605,8336,1459],{"class":618},[605,8338,625],{"class":610},[605,8340,628],{"class":610},[605,8342,1466],{"class":610},[605,8344,4160],{"class":791},[605,8346,1471],{"class":610},[605,8348,4160],{"class":791},[605,8350,1471],{"class":610},[605,8352,4160],{"class":791},[605,8354,1481],{"class":610},[605,8356,628],{"class":610},[605,8358,755],{"class":610},[605,8360,8362,8364,8366],{"class":8361,"line":723},[607,641],[605,8363,749],{"class":610},[605,8365,8254],{"class":614},[605,8367,755],{"class":610},[605,8369,8370,8372,8374,8376,8378,8380,8382,8384,8386],{"class":607,"line":746},[605,8371,749],{"class":610},[605,8373,193],{"class":614},[605,8375,781],{"class":610},[605,8377,784],{"class":618},[605,8379,625],{"class":610},[605,8381,628],{"class":610},[605,8383,792],{"class":791},[605,8385,628],{"class":610},[605,8387,637],{"class":610},[605,8389,8390,8392,8394,8396,8398,8400,8402,8404],{"class":607,"line":758},[605,8391,825],{"class":610},[605,8393,6729],{"class":614},[605,8395,3978],{"class":618},[605,8397,625],{"class":610},[605,8399,628],{"class":610},[605,8401,6738],{"class":631},[605,8403,628],{"class":610},[605,8405,755],{"class":610},[605,8407,8408,8410,8412],{"class":607,"line":768},[605,8409,867],{"class":610},[605,8411,193],{"class":614},[605,8413,637],{"class":610},[605,8415,8416,8418,8420],{"class":607,"line":773},[605,8417,749],{"class":610},[605,8419,3518],{"class":614},[605,8421,755],{"class":610},[605,8423,8424,8426,8428,8430,8432,8434,8436,8438,8440,8442,8444,8446,8448,8450,8452],{"class":607,"line":799},[605,8425,749],{"class":610},[605,8427,3539],{"class":614},[605,8429,781],{"class":610},[605,8431,1459],{"class":618},[605,8433,625],{"class":610},[605,8435,628],{"class":610},[605,8437,1466],{"class":610},[605,8439,937],{"class":791},[605,8441,1471],{"class":610},[605,8443,792],{"class":791},[605,8445,1471],{"class":610},[605,8447,3490],{"class":791},[605,8449,1481],{"class":610},[605,8451,628],{"class":610},[605,8453,755],{"class":610},[605,8455,8456,8458,8460],{"class":607,"line":599},[605,8457,749],{"class":610},[605,8459,3067],{"class":614},[605,8461,755],{"class":610},[605,8463,8464,8466,8468],{"class":607,"line":822},[605,8465,877],{"class":610},[605,8467,729],{"class":614},[605,8469,637],{"class":610},[605,8471,8472,8474,8476],{"class":607,"line":833},[605,8473,700],{"class":610},[605,8475,718],{"class":614},[605,8477,637],{"class":610},[3725,8479,8480],{},[582,8481,8482],{},"It is really important that the perspective camera is set first in the canvas. Otherwise the scene might break.",[472,8484,894],{"id":893},[899,8486,8487,8497],{},[902,8488,8489],{},[905,8490,8491,8493,8495],{},[908,8492,910],{"align":969},[908,8494,913],{"align":969},[908,8496,916],{},[918,8498,8499,8513,8525,8538],{},[905,8500,8501,8505,8509],{},[923,8502,8503],{"align":969},[1673,8504,6845],{},[923,8506,930,8507,8096],{"align":969},[586,8508,933],{},[923,8510,8511],{},[586,8512,943],{},[905,8514,8515,8519,8521],{},[923,8516,8517],{"align":969},[1673,8518,6859],{},[923,8520,6862],{"align":969},[923,8522,8523],{},[586,8524,1151],{},[905,8526,8527,8531,8534],{},[923,8528,8529],{"align":969},[1673,8530,6873],{},[923,8532,8533],{"align":969},"The dom element to listen to.",[923,8535,8536],{},[586,8537,1151],{},[905,8539,8540,8545,8551],{},[923,8541,8542],{"align":969},[1673,8543,8544],{},"screenSpacePanning",[923,8546,8547,8548,8550],{"align":969},"Defines how the camera's position is translated when panning. If ",[586,8549,933],{},", the camera pans in screen space. Otherwise, the camera pans in the plane orthogonal to the camera's up direction.",[923,8552,8553],{},[586,8554,943],{},[2046,8556,8557],{},[582,8558,8559],{},"All the props of the orbit controls component apply here too.",[1299,8561,7841],{},{"title":544,"searchDepth":545,"depth":546,"links":8563},[8564,8565],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},"similar to OrbitControls but for map views",{},{"title":95,"description":8566},"3Gr5ZfaS0tXm4RGuh0wLyX1tmIw4ZrdyL-nbg-P_RPU",{"id":8571,"title":99,"body":8572,"description":9298,"extension":559,"links":560,"meta":9299,"navigation":562,"path":100,"seo":9300,"stem":101,"__hash__":9301},"docs/2.api/2.controls/orbit-controls.md",{"type":469,"value":8573,"toc":9293},[8574,8579,8586,8588,8807,8811,8813,9204,9206,9255,9291],[576,8575,8576],{},[8577,8578],"controls-orbit-controls",{},[582,8580,8581,8585],{},[1112,8582,763],{"href":8583,"rel":8584},"https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls",[1116]," is a camera controller that allows you to orbit around a target. It's a great way to explore your scene.",[472,8587,15],{"id":592},[594,8589,8592],{"className":596,"code":8590,"highlights":8591,"language":601,"meta":544,"style":544},"\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",[723],[586,8593,8594,8604,8622,8630,8638,8656,8688,8697,8717,8735,8743,8751,8783,8791,8799],{"__ignoreMap":544},[605,8595,8596,8598,8600,8602],{"class":607,"line":545},[605,8597,611],{"class":610},[605,8599,615],{"class":614},[605,8601,619],{"class":618},[605,8603,637],{"class":610},[605,8605,8606,8608,8610,8612,8614,8616,8618,8620],{"class":607,"line":546},[605,8607,645],{"class":644},[605,8609,648],{"class":610},[605,8611,658],{"class":651},[605,8613,661],{"class":610},[605,8615,664],{"class":644},[605,8617,3322],{"class":610},[605,8619,670],{"class":631},[605,8621,2987],{"class":610},[605,8623,8624,8626,8628],{"class":607,"line":676},[605,8625,700],{"class":610},[605,8627,615],{"class":614},[605,8629,637],{"class":610},[605,8631,8632,8634,8636],{"class":607,"line":697},[605,8633,611],{"class":610},[605,8635,718],{"class":614},[605,8637,637],{"class":610},[605,8639,8640,8642,8644,8646,8648,8650,8652,8654],{"class":607,"line":707},[605,8641,726],{"class":610},[605,8643,729],{"class":614},[605,8645,732],{"class":618},[605,8647,625],{"class":610},[605,8649,628],{"class":610},[605,8651,5040],{"class":631},[605,8653,628],{"class":610},[605,8655,637],{"class":610},[605,8657,8658,8660,8662,8664,8666,8668,8670,8672,8674,8676,8678,8680,8682,8684,8686],{"class":607,"line":713},[605,8659,749],{"class":610},[605,8661,752],{"class":614},[605,8663,781],{"class":610},[605,8665,1459],{"class":618},[605,8667,625],{"class":610},[605,8669,628],{"class":610},[605,8671,1466],{"class":610},[605,8673,4160],{"class":791},[605,8675,1471],{"class":610},[605,8677,4160],{"class":791},[605,8679,1471],{"class":610},[605,8681,4160],{"class":791},[605,8683,1481],{"class":610},[605,8685,628],{"class":610},[605,8687,755],{"class":610},[605,8689,8691,8693,8695],{"class":8690,"line":723},[607,641],[605,8692,749],{"class":610},[605,8694,763],{"class":614},[605,8696,755],{"class":610},[605,8698,8699,8701,8703,8705,8707,8709,8711,8713,8715],{"class":607,"line":746},[605,8700,749],{"class":610},[605,8702,193],{"class":614},[605,8704,781],{"class":610},[605,8706,784],{"class":618},[605,8708,625],{"class":610},[605,8710,628],{"class":610},[605,8712,792],{"class":791},[605,8714,628],{"class":610},[605,8716,637],{"class":610},[605,8718,8719,8721,8723,8725,8727,8729,8731,8733],{"class":607,"line":758},[605,8720,825],{"class":610},[605,8722,6729],{"class":614},[605,8724,3978],{"class":618},[605,8726,625],{"class":610},[605,8728,628],{"class":610},[605,8730,6738],{"class":631},[605,8732,628],{"class":610},[605,8734,755],{"class":610},[605,8736,8737,8739,8741],{"class":607,"line":768},[605,8738,867],{"class":610},[605,8740,193],{"class":614},[605,8742,637],{"class":610},[605,8744,8745,8747,8749],{"class":607,"line":773},[605,8746,749],{"class":610},[605,8748,3518],{"class":614},[605,8750,755],{"class":610},[605,8752,8753,8755,8757,8759,8761,8763,8765,8767,8769,8771,8773,8775,8777,8779,8781],{"class":607,"line":799},[605,8754,749],{"class":610},[605,8756,3539],{"class":614},[605,8758,781],{"class":610},[605,8760,1459],{"class":618},[605,8762,625],{"class":610},[605,8764,628],{"class":610},[605,8766,1466],{"class":610},[605,8768,937],{"class":791},[605,8770,1471],{"class":610},[605,8772,792],{"class":791},[605,8774,1471],{"class":610},[605,8776,3490],{"class":791},[605,8778,1481],{"class":610},[605,8780,628],{"class":610},[605,8782,755],{"class":610},[605,8784,8785,8787,8789],{"class":607,"line":599},[605,8786,749],{"class":610},[605,8788,3067],{"class":614},[605,8790,755],{"class":610},[605,8792,8793,8795,8797],{"class":607,"line":822},[605,8794,877],{"class":610},[605,8796,729],{"class":614},[605,8798,637],{"class":610},[605,8800,8801,8803,8805],{"class":607,"line":833},[605,8802,700],{"class":610},[605,8804,718],{"class":614},[605,8806,637],{"class":610},[3725,8808,8809],{},[582,8810,6819],{},[472,8812,894],{"id":893},[899,8814,8815,8825],{},[902,8816,8817],{},[905,8818,8819,8821,8823],{},[908,8820,910],{"align":969},[908,8822,913],{"align":969},[908,8824,916],{},[918,8826,8827,8841,8853,8865,8879,8895,8913,8927,8945,8959,8974,8989,9010,9028,9041,9054,9067,9080,9093,9106,9120,9134,9148,9162,9176,9190],{},[905,8828,8829,8833,8837],{},[923,8830,8831],{"align":969},[1673,8832,6845],{},[923,8834,930,8835,8096],{"align":969},[586,8836,933],{},[923,8838,8839],{},[586,8840,943],{},[905,8842,8843,8847,8849],{},[923,8844,8845],{"align":969},[1673,8846,6859],{},[923,8848,6862],{"align":969},[923,8850,8851],{},[586,8852,1151],{},[905,8854,8855,8859,8861],{},[923,8856,8857],{"align":969},[1673,8858,6873],{},[923,8860,8533],{"align":969},[923,8862,8863],{},[586,8864,1151],{},[905,8866,8867,8872,8875],{},[923,8868,8869],{"align":969},[1673,8870,8871],{},"target",[923,8873,8874],{"align":969},"The target to orbit around.",[923,8876,8877],{},[586,8878,1151],{},[905,8880,8881,8886,8891],{},[923,8882,8883],{"align":969},[1673,8884,8885],{},"enableDamping",[923,8887,930,8888,8890],{"align":969},[586,8889,933],{},", the controls will use damping (inertia), which can be used to give a sense of weight to the controls.",[923,8892,8893],{},[586,8894,933],{},[905,8896,8897,8902,8909],{},[923,8898,8899],{"align":969},[1673,8900,8901],{},"dampingFactor",[923,8903,8904,8905,8908],{"align":969},"The damping inertia used if ",[586,8906,8907],{},".enableDamping"," is set to true.",[923,8910,8911],{},[586,8912,4892],{},[905,8914,8915,8920,8923],{},[923,8916,8917],{"align":969},[1673,8918,8919],{},"autoRotate",[923,8921,8922],{"align":969},"Set to true to automatically rotate around the target.",[923,8924,8925],{},[586,8926,943],{},[905,8928,8929,8934,8941],{},[923,8930,8931],{"align":969},[1673,8932,8933],{},"autoRotateSpeed",[923,8935,8936,8937,8940],{"align":969},"How fast to rotate around the target if ",[586,8938,8939],{},".autoRotate"," is true.",[923,8942,8943],{},[586,8944,792],{},[905,8946,8947,8952,8955],{},[923,8948,8949],{"align":969},[1673,8950,8951],{},"enablePan",[923,8953,8954],{"align":969},"Whether to enable panning.",[923,8956,8957],{},[586,8958,933],{},[905,8960,8961,8966,8969],{},[923,8962,8963],{"align":969},[1673,8964,8965],{},"keyPanSpeed",[923,8967,8968],{"align":969},"How fast to pan the camera when the keyboard is used. Default is 7.0 pixels per keypress.",[923,8970,8971],{},[586,8972,8973],{},"7.0",[905,8975,8976,8981,8984],{},[923,8977,8978],{"align":969},[1673,8979,8980],{},"keys",[923,8982,8983],{"align":969},"This object contains references to the keycodes for controlling camera panning. Default is the 4 arrow keys.",[923,8985,8986],{},[586,8987,8988],{},"{ LEFT: 'ArrowLeft', UP: 'ArrowUp', RIGHT: 'ArrowRight', BOTTOM: 'ArrowDown' }",[905,8990,8991,8995,9006],{},[923,8992,8993],{"align":969},[1673,8994,6930],{},[923,8996,8997,8998,9001,9002,9005],{"align":969},"How far you can orbit horizontally, upper limit. If set, the interval ",[605,8999,9000],{}," min, max"," must be a sub-interval of ",[605,9003,9004],{}," - 2 PI, 2 PI",", with ( max - min \u003C 2 PI ). Default is Infinity.",[923,9007,9008],{},[586,9009,6938],{},[905,9011,9012,9016,9024],{},[923,9013,9014],{"align":969},[1673,9015,6915],{},[923,9017,9018,9019,9001,9021,9023],{"align":969},"How far you can orbit horizontally, lower limit. If set, the interval ",[605,9020,9000],{},[605,9022,9004],{},", with ( max - min \u003C 2 PI ). Default is - Infinity.",[923,9025,9026],{},[586,9027,6923],{},[905,9029,9030,9034,9037],{},[923,9031,9032],{"align":969},[1673,9033,6901],{},[923,9035,9036],{"align":969},"How far you can orbit vertically, upper limit. Range is 0 to Math.PI radians, and default is Math.PI.",[923,9038,9039],{},[586,9040,4913],{},[905,9042,9043,9047,9050],{},[923,9044,9045],{"align":969},[1673,9046,6887],{},[923,9048,9049],{"align":969},"How far you can orbit vertically, lower limit. Range is 0 to Math.PI radians, and default is 0.",[923,9051,9052],{},[586,9053,937],{},[905,9055,9056,9060,9063],{},[923,9057,9058],{"align":969},[1673,9059,6960],{},[923,9061,9062],{"align":969},"The minimum distance of the camera to the target. Default is 0.",[923,9064,9065],{},[586,9066,937],{},[905,9068,9069,9073,9076],{},[923,9070,9071],{"align":969},[1673,9072,6975],{},[923,9074,9075],{"align":969},"The maximum distance of the camera to the target. Default is Infinity.",[923,9077,9078],{},[586,9079,6938],{},[905,9081,9082,9086,9089],{},[923,9083,9084],{"align":969},[1673,9085,7005],{},[923,9087,9088],{"align":969},"The minimum field of view angle, in radians. Default is 0.",[923,9090,9091],{},[586,9092,937],{},[905,9094,9095,9099,9102],{},[923,9096,9097],{"align":969},[1673,9098,7019],{},[923,9100,9101],{"align":969},"The maximum field of view angle, in radians. ( OrthographicCamera only ). Default is Infinity.",[923,9103,9104],{},[586,9105,6938],{},[905,9107,9108,9112,9115],{},[923,9109,9110],{"align":969},[1673,9111,7266],{},[923,9113,9114],{"align":969},"This object contains references to the touch actions used by the controls.",[923,9116,9117],{},[586,9118,9119],{},"{ ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_PAN }",[905,9121,9122,9126,9129],{},[923,9123,9124],{"align":969},[1673,9125,7247],{},[923,9127,9128],{"align":969},"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.",[923,9130,9131],{},[586,9132,9133],{},"{ LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN }",[905,9135,9136,9141,9144],{},[923,9137,9138],{"align":969},[1673,9139,9140],{},"enableZoom",[923,9142,9143],{"align":969},"Whether to enable zooming.",[923,9145,9146],{},[586,9147,933],{},[905,9149,9150,9155,9158],{},[923,9151,9152],{"align":969},[1673,9153,9154],{},"zoomSpeed",[923,9156,9157],{"align":969},"How fast to zoom in and out. Default is 1.",[923,9159,9160],{},[586,9161,1893],{},[905,9163,9164,9169,9172],{},[923,9165,9166],{"align":969},[1673,9167,9168],{},"enableRotate",[923,9170,9171],{"align":969},"Whether to enable rotating.",[923,9173,9174],{},[586,9175,933],{},[905,9177,9178,9183,9186],{},[923,9179,9180],{"align":969},[1673,9181,9182],{},"rotateSpeed",[923,9184,9185],{"align":969},"How fast to rotate around the target. Default is 1.",[923,9187,9188],{},[586,9189,1893],{},[905,9191,9192,9196,9200],{},[923,9193,9194],{"align":969},[1673,9195,8544],{},[923,9197,8547,9198,8550],{"align":969},[586,9199,933],{},[923,9201,9202],{},[586,9203,933],{},[472,9205,7742],{"id":7741},[594,9207,9209],{"className":596,"code":9208,"language":601,"meta":544,"style":544},"\u003COrbitControls @change=\"onChange\" @start=\"onStart\" @end=\"onEnd\" />\n",[586,9210,9211],{"__ignoreMap":544},[605,9212,9213,9215,9217,9219,9221,9223,9225,9227,9229,9231,9233,9235,9237,9239,9241,9243,9245,9247,9249,9251,9253],{"class":607,"line":545},[605,9214,611],{"class":610},[605,9216,763],{"class":614},[605,9218,7756],{"class":610},[605,9220,7759],{"class":618},[605,9222,625],{"class":610},[605,9224,628],{"class":610},[605,9226,7766],{"class":651},[605,9228,628],{"class":610},[605,9230,7756],{"class":610},[605,9232,7773],{"class":618},[605,9234,625],{"class":610},[605,9236,628],{"class":610},[605,9238,7780],{"class":651},[605,9240,628],{"class":610},[605,9242,7756],{"class":610},[605,9244,7787],{"class":618},[605,9246,625],{"class":610},[605,9248,628],{"class":610},[605,9250,7794],{"class":651},[605,9252,628],{"class":610},[605,9254,755],{"class":610},[899,9256,9257,9265],{},[902,9258,9259],{},[905,9260,9261,9263],{},[908,9262,7807],{"align":969},[908,9264,913],{"align":969},[918,9266,9267,9275,9283],{},[905,9268,9269,9273],{},[923,9270,9271],{"align":969},[1673,9272,7773],{},[923,9274,7820],{"align":969},[905,9276,9277,9281],{},[923,9278,9279],{"align":969},[1673,9280,7759],{},[923,9282,7829],{"align":969},[905,9284,9285,9289],{},[923,9286,9287],{"align":969},[1673,9288,7787],{},[923,9290,7838],{"align":969},[1299,9292,7841],{},{"title":544,"searchDepth":545,"depth":546,"links":9294},[9295,9296,9297],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},{"id":7741,"depth":546,"text":7742},"Allows you to orbit around the scene",{},{"title":99,"description":9298},"IQCftiJiGyLobGnbQSjgWE8zZkH7Aq-fMxmuEUs6EWI",{"id":9303,"title":103,"body":9304,"description":9656,"extension":559,"links":560,"meta":9657,"navigation":562,"path":104,"seo":9658,"stem":105,"__hash__":9659},"docs/2.api/2.controls/pointer-lock-controls.md",{"type":469,"value":9305,"toc":9651},[9306,9311,9318,9337,9339,9496,9500,9502,9567,9569,9616,9649],[576,9307,9308],{},[9309,9310],"controls-pointer-lock-controls",{},[582,9312,9313,9317],{},[1112,9314,7888],{"href":9315,"rel":9316},"https://threejs.org/docs/index.html?q=pointe#examples/en/controls/PointerLockControls",[1116]," 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.",[3725,9319,9320],{},[582,9321,9322,9323,9336],{},"This control uses the ",[605,9324,9326,9329],{"style":9325},"background-color:#222;padding:0.25rem;border-radius:4px;",[1112,9327],{"href":100,"style":9328},"color:#f7f7f7;text-decoration:none",[1112,9330,9333],{"href":9331,"rel":9332},"https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API",[1116],[586,9334,9335],{},"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",[472,9338,15],{"id":592},[594,9340,9343],{"className":596,"code":9341,"highlights":9342,"language":601,"meta":544,"style":544},"\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",[676,768],[586,9344,9345,9365,9383,9407,9415,9419,9427,9435,9443,9463,9472,9480,9488],{"__ignoreMap":544},[605,9346,9347,9349,9351,9353,9355,9357,9359,9361,9363],{"class":607,"line":545},[605,9348,611],{"class":610},[605,9350,615],{"class":614},[605,9352,619],{"class":618},[605,9354,622],{"class":618},[605,9356,625],{"class":610},[605,9358,628],{"class":610},[605,9360,632],{"class":631},[605,9362,628],{"class":610},[605,9364,637],{"class":610},[605,9366,9367,9369,9371,9373,9375,9377,9379,9381],{"class":607,"line":546},[605,9368,645],{"class":644},[605,9370,648],{"class":610},[605,9372,683],{"class":651},[605,9374,661],{"class":610},[605,9376,664],{"class":644},[605,9378,667],{"class":610},[605,9380,692],{"class":631},[605,9382,673],{"class":610},[605,9384,9386,9388,9390,9393,9395,9397,9399,9401,9403,9405],{"class":9385,"line":676},[607,641],[605,9387,645],{"class":644},[605,9389,648],{"class":610},[605,9391,9392],{"class":651}," PointerLockControls",[605,9394,655],{"class":610},[605,9396,1369],{"class":651},[605,9398,661],{"class":610},[605,9400,664],{"class":644},[605,9402,667],{"class":610},[605,9404,670],{"class":631},[605,9406,673],{"class":610},[605,9408,9409,9411,9413],{"class":607,"line":697},[605,9410,700],{"class":610},[605,9412,615],{"class":614},[605,9414,637],{"class":610},[605,9416,9417],{"class":607,"line":707},[605,9418,710],{"emptyLinePlaceholder":562},[605,9420,9421,9423,9425],{"class":607,"line":713},[605,9422,611],{"class":610},[605,9424,718],{"class":614},[605,9426,637],{"class":610},[605,9428,9429,9431,9433],{"class":607,"line":723},[605,9430,726],{"class":610},[605,9432,729],{"class":614},[605,9434,637],{"class":610},[605,9436,9437,9439,9441],{"class":607,"line":746},[605,9438,749],{"class":610},[605,9440,752],{"class":614},[605,9442,755],{"class":610},[605,9444,9445,9447,9449,9451,9453,9455,9457,9459,9461],{"class":607,"line":758},[605,9446,749],{"class":610},[605,9448,193],{"class":614},[605,9450,781],{"class":610},[605,9452,1968],{"class":618},[605,9454,625],{"class":610},[605,9456,628],{"class":610},[605,9458,1513],{"class":791},[605,9460,628],{"class":610},[605,9462,755],{"class":610},[605,9464,9466,9468,9470],{"class":9465,"line":768},[607,641],[605,9467,749],{"class":610},[605,9469,7888],{"class":614},[605,9471,755],{"class":610},[605,9473,9474,9476,9478],{"class":607,"line":773},[605,9475,749],{"class":610},[605,9477,3067],{"class":614},[605,9479,755],{"class":610},[605,9481,9482,9484,9486],{"class":607,"line":799},[605,9483,877],{"class":610},[605,9485,729],{"class":614},[605,9487,637],{"class":610},[605,9489,9490,9492,9494],{"class":607,"line":599},[605,9491,700],{"class":610},[605,9493,718],{"class":614},[605,9495,637],{"class":610},[3725,9497,9498],{},[582,9499,6819],{},[472,9501,894],{"id":893},[899,9503,9504,9514],{},[902,9505,9506],{},[905,9507,9508,9510,9512],{},[908,9509,910],{"align":969},[908,9511,913],{"align":969},[908,9513,916],{},[918,9515,9516,9530,9542,9554],{},[905,9517,9518,9522,9526],{},[923,9519,9520],{"align":969},[1673,9521,6845],{},[923,9523,930,9524,8096],{"align":969},[586,9525,933],{},[923,9527,9528],{},[586,9529,943],{},[905,9531,9532,9536,9538],{},[923,9533,9534],{"align":969},[1673,9535,6859],{},[923,9537,6862],{"align":969},[923,9539,9540],{},[586,9541,1151],{},[905,9543,9544,9548,9550],{},[923,9545,9546],{"align":969},[1673,9547,6873],{},[923,9549,8533],{"align":969},[923,9551,9552],{},[586,9553,1151],{},[905,9555,9556,9560,9563],{},[923,9557,9558],{"align":969},[1673,9559,8131],{},[923,9561,9562],{"align":969},"Accept an id element as string, if it is set, the new element will be used as the trigger",[923,9564,9565],{},[586,9566,1151],{},[472,9568,7742],{"id":7741},[594,9570,9572],{"className":596,"code":9571,"language":601,"meta":544,"style":544},"\u003CPointerLockControls @change=\"onChange\" @is-lock=\"(state) => isActive(state)\" />\n",[586,9573,9574],{"__ignoreMap":544},[605,9575,9576,9578,9580,9582,9584,9586,9588,9590,9592,9594,9596,9598,9600,9602,9604,9606,9608,9610,9612,9614],{"class":607,"line":545},[605,9577,611],{"class":610},[605,9579,7888],{"class":614},[605,9581,7756],{"class":610},[605,9583,7759],{"class":618},[605,9585,625],{"class":610},[605,9587,628],{"class":610},[605,9589,7766],{"class":651},[605,9591,628],{"class":610},[605,9593,7756],{"class":610},[605,9595,8168],{"class":618},[605,9597,625],{"class":610},[605,9599,628],{"class":610},[605,9601,2970],{"class":610},[605,9603,8177],{"class":5495},[605,9605,4125],{"class":610},[605,9607,5501],{"class":618},[605,9609,8184],{"class":2800},[605,9611,8187],{"class":651},[605,9613,628],{"class":610},[605,9615,755],{"class":651},[899,9617,9618,9626],{},[902,9619,9620],{},[905,9621,9622,9624],{},[908,9623,7807],{"align":969},[908,9625,913],{"align":969},[918,9627,9628,9641],{},[905,9629,9630,9634],{},[923,9631,9632],{"align":969},[1673,9633,8210],{},[923,9635,8213,9636,8216,9638,9640],{"align":969},[586,9637,933],{},[586,9639,943],{}," if \"unlock\" events are trigger.",[905,9642,9643,9647],{},[923,9644,9645],{"align":969},[1673,9646,7759],{},[923,9648,7829],{"align":969},[1299,9650,8230],{},{"title":544,"searchDepth":545,"depth":546,"links":9652},[9653,9654,9655],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},{"id":7741,"depth":546,"text":7742},"Allows you to capture the mouse movement and simulate a first person camera",{},{"title":103,"description":9656},"D_6d4pTGDPfnlucQrxiFcUWuxhufIMPSU-uRuD7K7M4",{"id":9661,"title":107,"body":9662,"description":10410,"extension":559,"links":560,"meta":10411,"navigation":562,"path":108,"seo":10412,"stem":109,"__hash__":10413},"docs/2.api/2.controls/transform-controls.md",{"type":469,"value":9663,"toc":10400},[9664,9671,9676,9678,9689,9934,9952,9956,9959,9963,9968,9971,10008,10012,10017,10020,10055,10058,10063,10066,10101,10103,10331,10333,10394,10397],[582,9665,2253,9666,9670],{},[1112,9667,107],{"href":9668,"rel":9669},"https://threejs.org/docs/#examples/en/controls/TransformControls",[1116]," 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",[576,9672,9673],{},[9674,9675],"controls-transform-controls",{},[472,9677,15],{"id":592},[582,9679,9680,9681,9684,9685,9688],{},"To use the Transform Controls, simply add the ",[586,9682,9683],{},"TransformControls"," component to your scene. You can pass the ",[586,9686,9687],{},"templateRef","of the instance you want to control as a prop.",[594,9690,9693],{"className":596,"code":9691,"highlights":9692,"language":601,"meta":544,"style":544},"\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",[723,746],[586,9694,9695,9705,9719,9727,9735,9743,9780,9791,9814,9859,9892,9910,9918,9926],{"__ignoreMap":544},[605,9696,9697,9699,9701,9703],{"class":607,"line":545},[605,9698,611],{"class":610},[605,9700,615],{"class":614},[605,9702,619],{"class":618},[605,9704,637],{"class":610},[605,9706,9707,9709,9712,9714,9717],{"class":607,"line":546},[605,9708,2689],{"class":618},[605,9710,9711],{"class":651}," boxRef ",[605,9713,625],{"class":610},[605,9715,9716],{"class":2800}," shallowRef",[605,9718,2846],{"class":651},[605,9720,9721,9723,9725],{"class":607,"line":676},[605,9722,700],{"class":610},[605,9724,615],{"class":614},[605,9726,637],{"class":610},[605,9728,9729,9731,9733],{"class":607,"line":697},[605,9730,611],{"class":610},[605,9732,718],{"class":614},[605,9734,637],{"class":610},[605,9736,9737,9739,9741],{"class":607,"line":707},[605,9738,726],{"class":610},[605,9740,729],{"class":614},[605,9742,637],{"class":610},[605,9744,9745,9747,9749,9751,9753,9755,9757,9759,9762,9764,9766,9768,9770,9772,9774,9776,9778],{"class":607,"line":713},[605,9746,749],{"class":610},[605,9748,752],{"class":614},[605,9750,781],{"class":610},[605,9752,1989],{"class":618},[605,9754,625],{"class":610},[605,9756,628],{"class":610},[605,9758,1466],{"class":610},[605,9760,9761],{"class":791},"45",[605,9763,1471],{"class":610},[605,9765,1893],{"class":791},[605,9767,1471],{"class":610},[605,9769,2203],{"class":791},[605,9771,1471],{"class":610},[605,9773,5165],{"class":791},[605,9775,1481],{"class":610},[605,9777,628],{"class":610},[605,9779,755],{"class":610},[605,9781,9783,9785,9787,9789],{"class":9782,"line":723},[607,641],[605,9784,749],{"class":610},[605,9786,763],{"class":614},[605,9788,1868],{"class":618},[605,9790,755],{"class":610},[605,9792,9794,9796,9798,9800,9803,9805,9807,9810,9812],{"class":9793,"line":746},[607,641],[605,9795,749],{"class":610},[605,9797,9683],{"class":614},[605,9799,781],{"class":610},[605,9801,9802],{"class":618},"object",[605,9804,625],{"class":610},[605,9806,628],{"class":610},[605,9808,9809],{"class":651},"boxRef",[605,9811,628],{"class":610},[605,9813,755],{"class":610},[605,9815,9816,9818,9820,9822,9824,9826,9828,9830,9832,9834,9836,9838,9840,9842,9844,9846,9848,9850,9852,9854,9857],{"class":607,"line":758},[605,9817,749],{"class":610},[605,9819,828],{"class":614},[605,9821,5431],{"class":618},[605,9823,625],{"class":610},[605,9825,628],{"class":610},[605,9827,9809],{"class":631},[605,9829,628],{"class":610},[605,9831,781],{"class":610},[605,9833,1459],{"class":618},[605,9835,625],{"class":610},[605,9837,628],{"class":610},[605,9839,1466],{"class":610},[605,9841,937],{"class":791},[605,9843,1471],{"class":610},[605,9845,3490],{"class":791},[605,9847,1471],{"class":610},[605,9849,937],{"class":791},[605,9851,1481],{"class":610},[605,9853,628],{"class":610},[605,9855,9856],{"class":618}," cast-shadow",[605,9858,637],{"class":610},[605,9860,9861,9863,9865,9867,9869,9871,9873,9875,9878,9880,9882,9884,9886,9888,9890],{"class":607,"line":768},[605,9862,825],{"class":610},[605,9864,839],{"class":614},[605,9866,781],{"class":610},[605,9868,1989],{"class":618},[605,9870,625],{"class":610},[605,9872,628],{"class":610},[605,9874,1466],{"class":610},[605,9876,9877],{"class":791},"1.5",[605,9879,1471],{"class":610},[605,9881,9877],{"class":791},[605,9883,1471],{"class":610},[605,9885,9877],{"class":791},[605,9887,1481],{"class":610},[605,9889,628],{"class":610},[605,9891,755],{"class":610},[605,9893,9894,9896,9898,9900,9902,9904,9906,9908],{"class":607,"line":773},[605,9895,825],{"class":610},[605,9897,6729],{"class":614},[605,9899,3978],{"class":618},[605,9901,625],{"class":610},[605,9903,628],{"class":610},[605,9905,2896],{"class":631},[605,9907,628],{"class":610},[605,9909,755],{"class":610},[605,9911,9912,9914,9916],{"class":607,"line":799},[605,9913,867],{"class":610},[605,9915,828],{"class":614},[605,9917,637],{"class":610},[605,9919,9920,9922,9924],{"class":607,"line":599},[605,9921,877],{"class":610},[605,9923,729],{"class":614},[605,9925,637],{"class":610},[605,9927,9928,9930,9932],{"class":607,"line":822},[605,9929,700],{"class":610},[605,9931,718],{"class":614},[605,9933,637],{"class":610},[3725,9935,9936],{},[582,9937,9938,9939,9943,9944,9946,9947,9949,9950,1118],{},"If you are using other controls ",[605,9940,9941],{"style":9325},[1112,9942,763],{"href":100,"style":9328}," they will interfere with each other when dragging. To avoid this, you can set the ",[586,9945,6845],{}," prop to ",[586,9948,933],{}," on the ",[1673,9951,763],{},[472,9953,9955],{"id":9954},"modes","Modes",[582,9957,9958],{},"The Transform Controls can be used in three different modes:",[7473,9960,9962],{"id":9961},"translate","Translate",[582,9964,9965],{},[3267,9966],{"alt":9962,"src":9967},"/cientos/transform-controls-translate.png",[582,9969,9970],{},"The default mode allows you to move the object around the scene.",[594,9972,9974],{"className":596,"code":9973,"language":601,"meta":544,"style":544},"\u003CTransformControls mode=\"translate\" :object=\"sphereRef\" />\n",[586,9975,9976],{"__ignoreMap":544},[605,9977,9978,9980,9982,9985,9987,9989,9991,9993,9995,9997,9999,10001,10004,10006],{"class":607,"line":545},[605,9979,611],{"class":610},[605,9981,9683],{"class":614},[605,9983,9984],{"class":618}," mode",[605,9986,625],{"class":610},[605,9988,628],{"class":610},[605,9990,9961],{"class":631},[605,9992,628],{"class":610},[605,9994,781],{"class":610},[605,9996,9802],{"class":618},[605,9998,625],{"class":610},[605,10000,628],{"class":610},[605,10002,10003],{"class":651},"sphereRef",[605,10005,628],{"class":610},[605,10007,755],{"class":610},[7473,10009,10011],{"id":10010},"rotate","Rotate",[582,10013,10014],{},[3267,10015],{"alt":10011,"src":10016},"/cientos/transform-controls-rotate.png",[582,10018,10019],{},"The rotate mode allows you to rotate the object around the scene.",[594,10021,10023],{"className":596,"code":10022,"language":601,"meta":544,"style":544},"\u003CTransformControls mode=\"rotate\" :object=\"boxRef\" />\n",[586,10024,10025],{"__ignoreMap":544},[605,10026,10027,10029,10031,10033,10035,10037,10039,10041,10043,10045,10047,10049,10051,10053],{"class":607,"line":545},[605,10028,611],{"class":610},[605,10030,9683],{"class":614},[605,10032,9984],{"class":618},[605,10034,625],{"class":610},[605,10036,628],{"class":610},[605,10038,10010],{"class":631},[605,10040,628],{"class":610},[605,10042,781],{"class":610},[605,10044,9802],{"class":618},[605,10046,625],{"class":610},[605,10048,628],{"class":610},[605,10050,9809],{"class":651},[605,10052,628],{"class":610},[605,10054,755],{"class":610},[7473,10056,10057],{"id":784},"Scale",[582,10059,10060],{},[3267,10061],{"alt":10057,"src":10062},"/cientos/transform-controls-scale.png",[582,10064,10065],{},"The scale mode allows you to scale the object around the scene.",[594,10067,10069],{"className":596,"code":10068,"language":601,"meta":544,"style":544},"\u003CTransformControls mode=\"scale\" :object=\"sphereRef\" />\n",[586,10070,10071],{"__ignoreMap":544},[605,10072,10073,10075,10077,10079,10081,10083,10085,10087,10089,10091,10093,10095,10097,10099],{"class":607,"line":545},[605,10074,611],{"class":610},[605,10076,9683],{"class":614},[605,10078,9984],{"class":618},[605,10080,625],{"class":610},[605,10082,628],{"class":610},[605,10084,784],{"class":631},[605,10086,628],{"class":610},[605,10088,781],{"class":610},[605,10090,9802],{"class":618},[605,10092,625],{"class":610},[605,10094,628],{"class":610},[605,10096,10003],{"class":651},[605,10098,628],{"class":610},[605,10100,755],{"class":610},[472,10102,894],{"id":893},[899,10104,10105,10115],{},[902,10106,10107],{},[905,10108,10109,10111,10113],{},[908,10110,910],{"align":969},[908,10112,913],{"align":969},[908,10114,916],{},[918,10116,10117,10135,10156,10172,10207,10227,10241,10255,10269,10283,10299,10315],{},[905,10118,10119,10123,10131],{},[923,10120,10121],{"align":969},[1673,10122,9802],{},[923,10124,10125,10126,10130],{"align":969},"The instance ",[1112,10127,2578],{"href":10128,"rel":10129},"https://threejs.org/docs/index.html#api/en/core/Object3D",[1116]," to control.",[923,10132,10133],{},[586,10134,3152],{},[905,10136,10137,10142,10152],{},[923,10138,10139],{"align":969},[1673,10140,10141],{},"mode",[923,10143,10144,10145,1471,10147,10149,10150,1118],{"align":969},"The mode of the controls. Can be ",[586,10146,9961],{},[586,10148,10010],{}," or ",[586,10151,784],{},[923,10153,10154],{},[586,10155,9961],{},[905,10157,10158,10163,10168],{},[923,10159,10160],{"align":969},[1673,10161,10162],{},"enabled",[923,10164,930,10165,10167],{"align":969},[586,10166,933],{},", the controls will be enabled.",[923,10169,10170],{},[586,10171,933],{},[905,10173,10174,10179,10203],{},[923,10175,10176],{"align":969},[1673,10177,10178],{},"axis",[923,10180,10181,10182,1471,10185,1471,10188,1471,10191,1471,10194,1471,10197,1471,10200,1118],{"align":969},"The axis to use for the controls. Can be ",[586,10183,10184],{},"X",[586,10186,10187],{},"Y",[586,10189,10190],{},"Z",[586,10192,10193],{},"XY",[586,10195,10196],{},"YZ",[586,10198,10199],{},"XZ",[586,10201,10202],{},"XYZ",[923,10204,10205],{},[586,10206,10202],{},[905,10208,10209,10214,10223],{},[923,10210,10211],{"align":969},[1673,10212,10213],{},"space",[923,10215,10216,10217,10149,10220,1118],{"align":969},"The space to use for the controls. Can be ",[586,10218,10219],{},"local",[586,10221,10222],{},"world",[923,10224,10225],{},[586,10226,10219],{},[905,10228,10229,10234,10237],{},[923,10230,10231],{"align":969},[1673,10232,10233],{},"size",[923,10235,10236],{"align":969},"The size of the controls.",[923,10238,10239],{},[586,10240,1893],{},[905,10242,10243,10248,10251],{},[923,10244,10245],{"align":969},[1673,10246,10247],{},"translationSnap",[923,10249,10250],{"align":969},"The distance to snap to when translating. (World units)",[923,10252,10253],{},[586,10254,3152],{},[905,10256,10257,10262,10265],{},[923,10258,10259],{"align":969},[1673,10260,10261],{},"rotationSnap",[923,10263,10264],{"align":969},"The angle to snap to when rotating. (Radians)",[923,10266,10267],{},[586,10268,3152],{},[905,10270,10271,10276,10279],{},[923,10272,10273],{"align":969},[1673,10274,10275],{},"scaleSnap",[923,10277,10278],{"align":969},"The scale to snap to when scaling.",[923,10280,10281],{},[586,10282,3152],{},[905,10284,10285,10290,10295],{},[923,10286,10287],{"align":969},[1673,10288,10289],{},"showX",[923,10291,930,10292,10294],{"align":969},[586,10293,933],{},", the X-axis helper will be shown.",[923,10296,10297],{},[586,10298,933],{},[905,10300,10301,10306,10311],{},[923,10302,10303],{"align":969},[1673,10304,10305],{},"showY",[923,10307,930,10308,10310],{"align":969},[586,10309,933],{},", the Y-axis helper will be shown.",[923,10312,10313],{},[586,10314,933],{},[905,10316,10317,10322,10327],{},[923,10318,10319],{"align":969},[1673,10320,10321],{},"showZ",[923,10323,930,10324,10326],{"align":969},[586,10325,933],{},", the Z-axis helper will be shown.",[923,10328,10329],{},[586,10330,933],{},[472,10332,7742],{"id":7741},[899,10334,10335,10343],{},[902,10336,10337],{},[905,10338,10339,10341],{},[908,10340,7807],{"align":969},[908,10342,913],{"align":969},[918,10344,10345,10355,10364,10374,10384],{},[905,10346,10347,10352],{},[923,10348,10349],{"align":969},[1673,10350,10351],{},"dragging",[923,10353,10354],{"align":969},"Fired when the user starts or stops dragging the controls.",[905,10356,10357,10361],{},[923,10358,10359],{"align":969},[1673,10360,7759],{},[923,10362,10363],{"align":969},"Fired when the user changes the controls.",[905,10365,10366,10371],{},[923,10367,10368],{"align":969},[1673,10369,10370],{},"mouseDown",[923,10372,10373],{"align":969},"Fired when the user clicks on the controls.",[905,10375,10376,10381],{},[923,10377,10378],{"align":969},[1673,10379,10380],{},"mouseUp",[923,10382,10383],{"align":969},"Fired when the user releases the mouse button on the controls.",[905,10385,10386,10391],{},[923,10387,10388],{"align":969},[1673,10389,10390],{},"objectChange",[923,10392,10393],{"align":969},"Fired when the user changes the object.",[1299,10395,10396],{"scoped":562},"\nimg {\n    aspect-ratio: 16/9;\n    object-fit: cover;\n    object-position: top;\n    border-radius: 8px;\n}\n",[1299,10398,10399],{},"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":544,"searchDepth":545,"depth":546,"links":10401},[10402,10403,10408,10409],{"id":592,"depth":546,"text":15},{"id":9954,"depth":546,"text":9955,"children":10404},[10405,10406,10407],{"id":9961,"depth":676,"text":9962},{"id":10010,"depth":676,"text":10011},{"id":784,"depth":676,"text":10057},{"id":893,"depth":546,"text":894},{"id":7741,"depth":546,"text":7742},"Set of three gizmos that can be used to translate, rotate and scale objects",{},{"title":107,"description":10410},"_oLjZPc3YQUArU7wqNKfUEMez4NtYo2Rc8q7SCJPpVI",[10415,11235,11958,12610,13274,13933,15461,18477,18984],{"id":10416,"title":117,"body":10417,"description":11231,"extension":559,"links":560,"meta":11232,"navigation":562,"path":118,"seo":11233,"stem":119,"__hash__":11234},"docs/2.api/3.loaders/1.use-gltf.md",{"type":469,"value":10418,"toc":11225},[10419,10424,10431,10433,10853,10869,10943,10947,11047,11050,11119,11123,11126,11219,11222],[2558,10420,10421],{},[10422,10423],"loaders-gltf",{},[582,10425,10426,10427,10430],{},"A composable that allows you to easily load glb/glTF models into your ",[1673,10428,10429],{},"TresJS"," scene.",[472,10432,15],{"id":592},[10434,10435,10436,10598],"code-group",{},[594,10437,10441],{"className":596,"code":10438,"filename":10439,"highlights":10440,"language":601,"meta":544,"style":544},"\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",[546,707],[586,10442,10443,10463,10483,10487,10503,10532,10540,10544,10552,10590],{"__ignoreMap":544},[605,10444,10445,10447,10449,10451,10453,10455,10457,10459,10461],{"class":607,"line":545},[605,10446,611],{"class":610},[605,10448,615],{"class":614},[605,10450,619],{"class":618},[605,10452,622],{"class":618},[605,10454,625],{"class":610},[605,10456,628],{"class":610},[605,10458,632],{"class":631},[605,10460,628],{"class":610},[605,10462,637],{"class":610},[605,10464,10466,10468,10470,10473,10475,10477,10479,10481],{"class":10465,"line":546},[607,641],[605,10467,645],{"class":644},[605,10469,648],{"class":610},[605,10471,10472],{"class":651}," useGLTF",[605,10474,661],{"class":610},[605,10476,664],{"class":644},[605,10478,667],{"class":610},[605,10480,670],{"class":631},[605,10482,673],{"class":610},[605,10484,10485],{"class":607,"line":676},[605,10486,710],{"emptyLinePlaceholder":562},[605,10488,10489,10491,10494,10496,10498,10501],{"class":607,"line":697},[605,10490,2689],{"class":618},[605,10492,10493],{"class":651}," path ",[605,10495,625],{"class":610},[605,10497,667],{"class":610},[605,10499,10500],{"class":631},"./blender-cube.glb",[605,10502,673],{"class":610},[605,10504,10506,10508,10510,10513,10515,10518,10520,10523,10525,10527,10529],{"class":10505,"line":707},[607,641],[605,10507,2689],{"class":618},[605,10509,648],{"class":610},[605,10511,10512],{"class":651}," state",[605,10514,655],{"class":610},[605,10516,10517],{"class":651}," nodes",[605,10519,655],{"class":610},[605,10521,10522],{"class":651}," materials ",[605,10524,5544],{"class":610},[605,10526,2766],{"class":610},[605,10528,10472],{"class":2800},[605,10530,10531],{"class":651},"(path)\n",[605,10533,10534,10536,10538],{"class":607,"line":713},[605,10535,700],{"class":610},[605,10537,615],{"class":614},[605,10539,637],{"class":610},[605,10541,10542],{"class":607,"line":723},[605,10543,710],{"emptyLinePlaceholder":562},[605,10545,10546,10548,10550],{"class":607,"line":746},[605,10547,611],{"class":610},[605,10549,718],{"class":614},[605,10551,637],{"class":610},[605,10553,10554,10556,10559,10562,10564,10566,10568,10570,10572,10574,10576,10578,10580,10583,10586,10588],{"class":607,"line":758},[605,10555,726],{"class":610},[605,10557,10558],{"class":614},"primitive",[605,10560,10561],{"class":644}," v-if",[605,10563,625],{"class":610},[605,10565,628],{"class":610},[605,10567,8177],{"class":651},[605,10569,628],{"class":610},[605,10571,781],{"class":610},[605,10573,9802],{"class":618},[605,10575,625],{"class":610},[605,10577,628],{"class":610},[605,10579,8177],{"class":651},[605,10581,10582],{"class":610},"?.",[605,10584,10585],{"class":651},"scene",[605,10587,628],{"class":610},[605,10589,755],{"class":610},[605,10591,10592,10594,10596],{"class":607,"line":768},[605,10593,700],{"class":610},[605,10595,718],{"class":614},[605,10597,637],{"class":610},[594,10599,10602],{"className":596,"code":10600,"filename":10601,"language":601,"meta":544,"style":544},"\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",[586,10603,10604,10624,10642,10660,10677,10685,10689,10697,10716,10748,10756,10765,10772,10786,10812,10817,10837,10845],{"__ignoreMap":544},[605,10605,10606,10608,10610,10612,10614,10616,10618,10620,10622],{"class":607,"line":545},[605,10607,611],{"class":610},[605,10609,615],{"class":614},[605,10611,619],{"class":618},[605,10613,622],{"class":618},[605,10615,625],{"class":610},[605,10617,628],{"class":610},[605,10619,632],{"class":631},[605,10621,628],{"class":610},[605,10623,637],{"class":610},[605,10625,10626,10628,10630,10632,10634,10636,10638,10640],{"class":607,"line":546},[605,10627,645],{"class":644},[605,10629,648],{"class":610},[605,10631,658],{"class":651},[605,10633,661],{"class":610},[605,10635,664],{"class":644},[605,10637,667],{"class":610},[605,10639,670],{"class":631},[605,10641,673],{"class":610},[605,10643,10644,10646,10648,10650,10652,10654,10656,10658],{"class":607,"line":676},[605,10645,645],{"class":644},[605,10647,648],{"class":610},[605,10649,683],{"class":651},[605,10651,661],{"class":610},[605,10653,664],{"class":644},[605,10655,667],{"class":610},[605,10657,692],{"class":631},[605,10659,673],{"class":610},[605,10661,10662,10664,10667,10670,10672,10675],{"class":607,"line":697},[605,10663,645],{"class":644},[605,10665,10666],{"class":651}," TheModel ",[605,10668,10669],{"class":644},"from",[605,10671,667],{"class":610},[605,10673,10674],{"class":631},"./TheModel.vue",[605,10676,673],{"class":610},[605,10678,10679,10681,10683],{"class":607,"line":707},[605,10680,700],{"class":610},[605,10682,615],{"class":614},[605,10684,637],{"class":610},[605,10686,10687],{"class":607,"line":713},[605,10688,710],{"emptyLinePlaceholder":562},[605,10690,10691,10693,10695],{"class":607,"line":723},[605,10692,611],{"class":610},[605,10694,718],{"class":614},[605,10696,637],{"class":610},[605,10698,10699,10701,10703,10705,10707,10709,10712,10714],{"class":607,"line":746},[605,10700,726],{"class":610},[605,10702,729],{"class":614},[605,10704,732],{"class":618},[605,10706,625],{"class":610},[605,10708,628],{"class":610},[605,10710,10711],{"class":631},"#F78B3D",[605,10713,628],{"class":610},[605,10715,637],{"class":610},[605,10717,10718,10720,10722,10724,10726,10728,10730,10732,10734,10736,10738,10740,10742,10744,10746],{"class":607,"line":758},[605,10719,749],{"class":610},[605,10721,752],{"class":614},[605,10723,781],{"class":610},[605,10725,1459],{"class":618},[605,10727,625],{"class":610},[605,10729,628],{"class":610},[605,10731,1466],{"class":610},[605,10733,4160],{"class":791},[605,10735,1471],{"class":610},[605,10737,792],{"class":791},[605,10739,1471],{"class":610},[605,10741,2396],{"class":791},[605,10743,1481],{"class":610},[605,10745,628],{"class":610},[605,10747,755],{"class":610},[605,10749,10750,10752,10754],{"class":607,"line":768},[605,10751,749],{"class":610},[605,10753,763],{"class":614},[605,10755,755],{"class":610},[605,10757,10758,10760,10763],{"class":607,"line":773},[605,10759,749],{"class":610},[605,10761,10762],{"class":614},"TheModel",[605,10764,755],{"class":610},[605,10766,10767,10769],{"class":607,"line":799},[605,10768,749],{"class":610},[605,10770,10771],{"class":614},"TresDirectionalLight\n",[605,10773,10774,10776,10778,10780,10782,10784],{"class":607,"line":599},[605,10775,5693],{"class":610},[605,10777,1886],{"class":618},[605,10779,625],{"class":610},[605,10781,628],{"class":610},[605,10783,792],{"class":791},[605,10785,2987],{"class":610},[605,10787,10788,10790,10792,10794,10796,10798,10800,10802,10804,10806,10808,10810],{"class":607,"line":822},[605,10789,5693],{"class":610},[605,10791,1459],{"class":618},[605,10793,625],{"class":610},[605,10795,628],{"class":610},[605,10797,1466],{"class":610},[605,10799,4160],{"class":791},[605,10801,1471],{"class":610},[605,10803,4160],{"class":791},[605,10805,1471],{"class":610},[605,10807,4160],{"class":791},[605,10809,1481],{"class":610},[605,10811,2987],{"class":610},[605,10813,10814],{"class":607,"line":833},[605,10815,10816],{"class":610},"    />\n",[605,10818,10819,10821,10823,10825,10827,10829,10831,10833,10835],{"class":607,"line":844},[605,10820,749],{"class":610},[605,10822,3518],{"class":614},[605,10824,781],{"class":610},[605,10826,1886],{"class":618},[605,10828,625],{"class":610},[605,10830,628],{"class":610},[605,10832,1893],{"class":791},[605,10834,628],{"class":610},[605,10836,755],{"class":610},[605,10838,10839,10841,10843],{"class":607,"line":854},[605,10840,877],{"class":610},[605,10842,729],{"class":614},[605,10844,637],{"class":610},[605,10846,10847,10849,10851],{"class":607,"line":600},[605,10848,700],{"class":610},[605,10850,718],{"class":614},[605,10852,637],{"class":610},[582,10854,10855,10856,10858,10859,10862,10863,10868],{},"An advantage of using ",[586,10857,117],{}," is that you can pass a ",[586,10860,10861],{},"draco"," prop to enable ",[1112,10864,10867],{"href":10865,"rel":10866},"https://threejs.org/docs/index.html?q=drac#examples/en/loaders/DRACOLoader",[1116],"Draco compression"," for the model. This will reduce the size of the model and improve performance.",[594,10870,10872],{"className":1158,"code":10871,"language":632,"meta":544,"style":544},"import { useGLTF } from '@tresjs/cientos'\n\nconst { state, nodes, materials } = useGLTF('/models/AkuAku.gltf', { draco: true })\n",[586,10873,10874,10892,10896],{"__ignoreMap":544},[605,10875,10876,10878,10880,10882,10884,10886,10888,10890],{"class":607,"line":545},[605,10877,645],{"class":644},[605,10879,648],{"class":610},[605,10881,10472],{"class":651},[605,10883,661],{"class":610},[605,10885,664],{"class":644},[605,10887,667],{"class":610},[605,10889,670],{"class":631},[605,10891,673],{"class":610},[605,10893,10894],{"class":607,"line":546},[605,10895,710],{"emptyLinePlaceholder":562},[605,10897,10898,10900,10902,10904,10906,10908,10910,10912,10914,10916,10918,10920,10922,10925,10927,10929,10931,10934,10936,10939,10941],{"class":607,"line":676},[605,10899,2689],{"class":618},[605,10901,648],{"class":610},[605,10903,10512],{"class":651},[605,10905,655],{"class":610},[605,10907,10517],{"class":651},[605,10909,655],{"class":610},[605,10911,10522],{"class":651},[605,10913,5544],{"class":610},[605,10915,2766],{"class":610},[605,10917,10472],{"class":2800},[605,10919,2970],{"class":651},[605,10921,5536],{"class":610},[605,10923,10924],{"class":631},"/models/AkuAku.gltf",[605,10926,5536],{"class":610},[605,10928,655],{"class":610},[605,10930,648],{"class":610},[605,10932,10933],{"class":614}," draco",[605,10935,1190],{"class":610},[605,10937,10938],{"class":3870}," true",[605,10940,661],{"class":610},[605,10942,5539],{"class":651},[472,10944,10946],{"id":10945},"return-values","Return Values",[899,10948,10949,10960],{},[902,10950,10951],{},[905,10952,10953,10955,10958],{},[908,10954,3118],{"align":969},[908,10956,10957],{},"Type",[908,10959,913],{},[918,10961,10962,10976,10990,11003,11018,11032],{},[905,10963,10964,10968,10973],{},[923,10965,10966],{"align":969},[1673,10967,8177],{},[923,10969,10970],{},[586,10971,10972],{},"GLTF",[923,10974,10975],{},"The loaded GLTF model state",[905,10977,10978,10983,10987],{},[923,10979,10980],{"align":969},[1673,10981,10982],{},"nodes",[923,10984,10985],{},[586,10986,9802],{},[923,10988,10989],{},"Computed object containing all nodes in the scene",[905,10991,10992,10996,11000],{},[923,10993,10994],{"align":969},[1673,10995,496],{},[923,10997,10998],{},[586,10999,9802],{},[923,11001,11002],{},"Computed object containing all materials in the scene",[905,11004,11005,11010,11015],{},[923,11006,11007],{"align":969},[1673,11008,11009],{},"isLoading",[923,11011,11012],{},[586,11013,11014],{},"boolean",[923,11016,11017],{},"Whether the model is currently loading",[905,11019,11020,11025,11029],{},[923,11021,11022],{"align":969},[1673,11023,11024],{},"progress",[923,11026,11027],{},[586,11028,2537],{},[923,11030,11031],{},"The progress of the model loading",[905,11033,11034,11039,11044],{},[923,11035,11036],{"align":969},[1673,11037,11038],{},"load",[923,11040,11041],{},[586,11042,11043],{},"() => Promise\u003Cvoid>",[923,11045,11046],{},"Function to reload the model",[472,11048,7487],{"id":11049},"options",[899,11051,11052,11064],{},[902,11053,11054],{},[905,11055,11056,11058,11060,11062],{},[908,11057,3118],{"align":969},[908,11059,10957],{},[908,11061,916],{},[908,11063,913],{},[918,11065,11066,11083,11103],{},[905,11067,11068,11072,11076,11080],{},[923,11069,11070],{"align":969},[1673,11071,10861],{},[923,11073,11074],{},[586,11075,11014],{},[923,11077,11078],{},[586,11079,943],{},[923,11081,11082],{},"Whether to enable Draco compression.",[905,11084,11085,11090,11095,11100],{},[923,11086,11087],{"align":969},[1673,11088,11089],{},"decoderPath",[923,11091,11092],{},[586,11093,11094],{},"string",[923,11096,11097],{},[586,11098,11099],{},"'https://www.gstatic.com/draco/versioned/decoders/1.5.6/'",[923,11101,11102],{},"Path to the Draco decoder.",[905,11104,11105,11110,11114,11116],{},[923,11106,11107],{"align":969},[1673,11108,11109],{},"traverse",[923,11111,11112],{},[586,11113,5342],{},[923,11115],{},[923,11117,11118],{},"A traverse function applied to the scene upon loading the model.",[472,11120,11122],{"id":11121},"accessing-nodes-and-materials","Accessing Nodes and Materials",[582,11124,11125],{},"The composable provides computed properties to easily access nodes and materials in your scene:",[594,11127,11129],{"className":1158,"code":11128,"language":632,"meta":544,"style":544},"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",[586,11130,11131,11160,11164,11169,11189,11193,11198],{"__ignoreMap":544},[605,11132,11133,11135,11137,11139,11141,11143,11145,11147,11149,11151,11153,11156,11158],{"class":607,"line":545},[605,11134,2689],{"class":618},[605,11136,648],{"class":610},[605,11138,10517],{"class":651},[605,11140,655],{"class":610},[605,11142,10522],{"class":651},[605,11144,5544],{"class":610},[605,11146,2766],{"class":610},[605,11148,10472],{"class":2800},[605,11150,2970],{"class":651},[605,11152,5536],{"class":610},[605,11154,11155],{"class":631},"/model.glb",[605,11157,5536],{"class":610},[605,11159,5539],{"class":651},[605,11161,11162],{"class":607,"line":546},[605,11163,710],{"emptyLinePlaceholder":562},[605,11165,11166],{"class":607,"line":676},[605,11167,11168],{"class":1181},"// Access a specific node\n",[605,11170,11171,11173,11176,11178,11180,11182,11184,11186],{"class":607,"line":697},[605,11172,2689],{"class":618},[605,11174,11175],{"class":651}," mesh ",[605,11177,625],{"class":610},[605,11179,10517],{"class":651},[605,11181,1118],{"class":610},[605,11183,5496],{"class":651},[605,11185,1118],{"class":610},[605,11187,11188],{"class":651},"MeshName\n",[605,11190,11191],{"class":607,"line":707},[605,11192,710],{"emptyLinePlaceholder":562},[605,11194,11195],{"class":607,"line":713},[605,11196,11197],{"class":1181},"// Access a specific material\n",[605,11199,11200,11202,11205,11207,11210,11212,11214,11216],{"class":607,"line":723},[605,11201,2689],{"class":618},[605,11203,11204],{"class":651}," material ",[605,11206,625],{"class":610},[605,11208,11209],{"class":651}," materials",[605,11211,1118],{"class":610},[605,11213,5496],{"class":651},[605,11215,1118],{"class":610},[605,11217,11218],{"class":651},"MaterialName\n",[582,11220,11221],{},"This makes it easier to manipulate specific parts of your model or apply materials programmatically.",[1299,11223,11224],{},"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":544,"searchDepth":545,"depth":546,"links":11226},[11227,11228,11229,11230],{"id":592,"depth":546,"text":15},{"id":10945,"depth":546,"text":10946},{"id":11049,"depth":546,"text":7487},{"id":11121,"depth":546,"text":11122},"A composable to load GLTF models in TresJS scenes.",{},{"title":117,"description":11231},"a8ph-37nMzF-TmW17rRFWQHDIwN83OfaztvKYiWzP30",{"id":11236,"title":121,"body":11237,"description":11954,"extension":559,"links":560,"meta":11955,"navigation":562,"path":122,"seo":11956,"stem":123,"__hash__":11957},"docs/2.api/3.loaders/2.gltf-model.md",{"type":469,"value":11238,"toc":11949},[11239,11243,11254,11256,11618,11622,11632,11853,11855,11946],[2558,11240,11241],{},[10422,11242],{},[582,11244,2253,11245,11247,11248,11253],{},[586,11246,121],{}," component is a wrapper around ",[1112,11249,11251],{"href":11250},"./use-gltf",[586,11252,117],{}," composable and accepts the same options as props.",[472,11255,15],{"id":592},[10434,11257,11258,11372],{},[594,11259,11262],{"className":596,"code":11260,"filename":10439,"highlights":11261,"language":601,"meta":544,"style":544},"\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",[546,746],[586,11263,11264,11284,11304,11308,11322,11330,11334,11342,11364],{"__ignoreMap":544},[605,11265,11266,11268,11270,11272,11274,11276,11278,11280,11282],{"class":607,"line":545},[605,11267,611],{"class":610},[605,11269,615],{"class":614},[605,11271,619],{"class":618},[605,11273,622],{"class":618},[605,11275,625],{"class":610},[605,11277,628],{"class":610},[605,11279,632],{"class":631},[605,11281,628],{"class":610},[605,11283,637],{"class":610},[605,11285,11287,11289,11291,11294,11296,11298,11300,11302],{"class":11286,"line":546},[607,641],[605,11288,645],{"class":644},[605,11290,648],{"class":610},[605,11292,11293],{"class":651}," GLTFModel",[605,11295,661],{"class":610},[605,11297,664],{"class":644},[605,11299,667],{"class":610},[605,11301,670],{"class":631},[605,11303,673],{"class":610},[605,11305,11306],{"class":607,"line":676},[605,11307,710],{"emptyLinePlaceholder":562},[605,11309,11310,11312,11314,11316,11318,11320],{"class":607,"line":697},[605,11311,2689],{"class":618},[605,11313,10493],{"class":651},[605,11315,625],{"class":610},[605,11317,667],{"class":610},[605,11319,10500],{"class":631},[605,11321,673],{"class":610},[605,11323,11324,11326,11328],{"class":607,"line":707},[605,11325,700],{"class":610},[605,11327,615],{"class":614},[605,11329,637],{"class":610},[605,11331,11332],{"class":607,"line":713},[605,11333,710],{"emptyLinePlaceholder":562},[605,11335,11336,11338,11340],{"class":607,"line":723},[605,11337,611],{"class":610},[605,11339,718],{"class":614},[605,11341,637],{"class":610},[605,11343,11345,11347,11349,11351,11354,11356,11358,11360,11362],{"class":11344,"line":746},[607,641],[605,11346,726],{"class":610},[605,11348,121],{"class":614},[605,11350,781],{"class":610},[605,11352,11353],{"class":618},"path",[605,11355,625],{"class":610},[605,11357,628],{"class":610},[605,11359,11353],{"class":651},[605,11361,628],{"class":610},[605,11363,755],{"class":610},[605,11365,11366,11368,11370],{"class":607,"line":758},[605,11367,700],{"class":610},[605,11369,718],{"class":614},[605,11371,637],{"class":610},[594,11373,11374],{"className":596,"code":10600,"filename":10601,"language":601,"meta":544,"style":544},[586,11375,11376,11396,11414,11432,11446,11454,11458,11466,11484,11516,11524,11532,11538,11552,11578,11582,11602,11610],{"__ignoreMap":544},[605,11377,11378,11380,11382,11384,11386,11388,11390,11392,11394],{"class":607,"line":545},[605,11379,611],{"class":610},[605,11381,615],{"class":614},[605,11383,619],{"class":618},[605,11385,622],{"class":618},[605,11387,625],{"class":610},[605,11389,628],{"class":610},[605,11391,632],{"class":631},[605,11393,628],{"class":610},[605,11395,637],{"class":610},[605,11397,11398,11400,11402,11404,11406,11408,11410,11412],{"class":607,"line":546},[605,11399,645],{"class":644},[605,11401,648],{"class":610},[605,11403,658],{"class":651},[605,11405,661],{"class":610},[605,11407,664],{"class":644},[605,11409,667],{"class":610},[605,11411,670],{"class":631},[605,11413,673],{"class":610},[605,11415,11416,11418,11420,11422,11424,11426,11428,11430],{"class":607,"line":676},[605,11417,645],{"class":644},[605,11419,648],{"class":610},[605,11421,683],{"class":651},[605,11423,661],{"class":610},[605,11425,664],{"class":644},[605,11427,667],{"class":610},[605,11429,692],{"class":631},[605,11431,673],{"class":610},[605,11433,11434,11436,11438,11440,11442,11444],{"class":607,"line":697},[605,11435,645],{"class":644},[605,11437,10666],{"class":651},[605,11439,10669],{"class":644},[605,11441,667],{"class":610},[605,11443,10674],{"class":631},[605,11445,673],{"class":610},[605,11447,11448,11450,11452],{"class":607,"line":707},[605,11449,700],{"class":610},[605,11451,615],{"class":614},[605,11453,637],{"class":610},[605,11455,11456],{"class":607,"line":713},[605,11457,710],{"emptyLinePlaceholder":562},[605,11459,11460,11462,11464],{"class":607,"line":723},[605,11461,611],{"class":610},[605,11463,718],{"class":614},[605,11465,637],{"class":610},[605,11467,11468,11470,11472,11474,11476,11478,11480,11482],{"class":607,"line":746},[605,11469,726],{"class":610},[605,11471,729],{"class":614},[605,11473,732],{"class":618},[605,11475,625],{"class":610},[605,11477,628],{"class":610},[605,11479,10711],{"class":631},[605,11481,628],{"class":610},[605,11483,637],{"class":610},[605,11485,11486,11488,11490,11492,11494,11496,11498,11500,11502,11504,11506,11508,11510,11512,11514],{"class":607,"line":758},[605,11487,749],{"class":610},[605,11489,752],{"class":614},[605,11491,781],{"class":610},[605,11493,1459],{"class":618},[605,11495,625],{"class":610},[605,11497,628],{"class":610},[605,11499,1466],{"class":610},[605,11501,4160],{"class":791},[605,11503,1471],{"class":610},[605,11505,792],{"class":791},[605,11507,1471],{"class":610},[605,11509,2396],{"class":791},[605,11511,1481],{"class":610},[605,11513,628],{"class":610},[605,11515,755],{"class":610},[605,11517,11518,11520,11522],{"class":607,"line":768},[605,11519,749],{"class":610},[605,11521,763],{"class":614},[605,11523,755],{"class":610},[605,11525,11526,11528,11530],{"class":607,"line":773},[605,11527,749],{"class":610},[605,11529,10762],{"class":614},[605,11531,755],{"class":610},[605,11533,11534,11536],{"class":607,"line":799},[605,11535,749],{"class":610},[605,11537,10771],{"class":614},[605,11539,11540,11542,11544,11546,11548,11550],{"class":607,"line":599},[605,11541,5693],{"class":610},[605,11543,1886],{"class":618},[605,11545,625],{"class":610},[605,11547,628],{"class":610},[605,11549,792],{"class":791},[605,11551,2987],{"class":610},[605,11553,11554,11556,11558,11560,11562,11564,11566,11568,11570,11572,11574,11576],{"class":607,"line":822},[605,11555,5693],{"class":610},[605,11557,1459],{"class":618},[605,11559,625],{"class":610},[605,11561,628],{"class":610},[605,11563,1466],{"class":610},[605,11565,4160],{"class":791},[605,11567,1471],{"class":610},[605,11569,4160],{"class":791},[605,11571,1471],{"class":610},[605,11573,4160],{"class":791},[605,11575,1481],{"class":610},[605,11577,2987],{"class":610},[605,11579,11580],{"class":607,"line":833},[605,11581,10816],{"class":610},[605,11583,11584,11586,11588,11590,11592,11594,11596,11598,11600],{"class":607,"line":844},[605,11585,749],{"class":610},[605,11587,3518],{"class":614},[605,11589,781],{"class":610},[605,11591,1886],{"class":618},[605,11593,625],{"class":610},[605,11595,628],{"class":610},[605,11597,1893],{"class":791},[605,11599,628],{"class":610},[605,11601,755],{"class":610},[605,11603,11604,11606,11608],{"class":607,"line":854},[605,11605,877],{"class":610},[605,11607,729],{"class":614},[605,11609,637],{"class":610},[605,11611,11612,11614,11616],{"class":607,"line":600},[605,11613,700],{"class":610},[605,11615,718],{"class":614},[605,11617,637],{"class":610},[472,11619,11621],{"id":11620},"model-reference","Model reference",[582,11623,11624,11625,1680,11628,11631],{},"You can access the model reference by passing a ",[586,11626,11627],{},"ref",[586,11629,11630],{},"model"," prop and then using to get the object.",[594,11633,11635],{"className":596,"code":11634,"language":601,"meta":544,"style":544},"\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",[586,11636,11637,11657,11680,11698,11702,11723,11727,11746,11751,11780,11786,11794,11798,11806,11813,11827,11841,11845],{"__ignoreMap":544},[605,11638,11639,11641,11643,11645,11647,11649,11651,11653,11655],{"class":607,"line":545},[605,11640,611],{"class":610},[605,11642,615],{"class":614},[605,11644,619],{"class":618},[605,11646,622],{"class":618},[605,11648,625],{"class":610},[605,11650,628],{"class":610},[605,11652,632],{"class":631},[605,11654,628],{"class":610},[605,11656,637],{"class":610},[605,11658,11659,11661,11664,11666,11669,11671,11673,11675,11678],{"class":607,"line":546},[605,11660,645],{"class":644},[605,11662,11663],{"class":644}," type",[605,11665,648],{"class":610},[605,11667,11668],{"class":651}," TresObject",[605,11670,661],{"class":610},[605,11672,664],{"class":644},[605,11674,667],{"class":610},[605,11676,11677],{"class":631},"tresjs",[605,11679,673],{"class":610},[605,11681,11682,11684,11686,11688,11690,11692,11694,11696],{"class":607,"line":676},[605,11683,645],{"class":644},[605,11685,648],{"class":610},[605,11687,11293],{"class":651},[605,11689,661],{"class":610},[605,11691,664],{"class":644},[605,11693,667],{"class":610},[605,11695,670],{"class":631},[605,11697,673],{"class":610},[605,11699,11700],{"class":607,"line":697},[605,11701,710],{"emptyLinePlaceholder":562},[605,11703,11704,11706,11709,11711,11713,11715,11718,11721],{"class":607,"line":707},[605,11705,2689],{"class":618},[605,11707,11708],{"class":651}," modelRef ",[605,11710,625],{"class":610},[605,11712,9716],{"class":2800},[605,11714,611],{"class":610},[605,11716,11717],{"class":1172},"TresObject",[605,11719,11720],{"class":610},">",[605,11722,2846],{"class":651},[605,11724,11725],{"class":607,"line":713},[605,11726,710],{"emptyLinePlaceholder":562},[605,11728,11729,11731,11734,11736,11738,11740,11742,11744],{"class":607,"line":723},[605,11730,5485],{"class":2800},[605,11732,11733],{"class":651},"(modelRef",[605,11735,655],{"class":610},[605,11737,2713],{"class":610},[605,11739,11630],{"class":5495},[605,11741,4125],{"class":610},[605,11743,5501],{"class":618},[605,11745,1176],{"class":610},[605,11747,11748],{"class":607,"line":746},[605,11749,11750],{"class":1181},"  // Do something with the model\n",[605,11752,11753,11756,11758,11760,11762,11765,11767,11769,11771,11774,11776,11778],{"class":607,"line":758},[605,11754,11755],{"class":651},"  model",[605,11757,1118],{"class":610},[605,11759,1459],{"class":651},[605,11761,1118],{"class":610},[605,11763,11764],{"class":2800},"set",[605,11766,2970],{"class":614},[605,11768,937],{"class":791},[605,11770,655],{"class":610},[605,11772,11773],{"class":791}," 0",[605,11775,655],{"class":610},[605,11777,11773],{"class":791},[605,11779,5539],{"class":614},[605,11781,11782,11784],{"class":607,"line":768},[605,11783,5544],{"class":610},[605,11785,5539],{"class":651},[605,11787,11788,11790,11792],{"class":607,"line":773},[605,11789,700],{"class":610},[605,11791,615],{"class":614},[605,11793,637],{"class":610},[605,11795,11796],{"class":607,"line":799},[605,11797,710],{"emptyLinePlaceholder":562},[605,11799,11800,11802,11804],{"class":607,"line":599},[605,11801,611],{"class":610},[605,11803,718],{"class":614},[605,11805,637],{"class":610},[605,11807,11808,11810],{"class":607,"line":822},[605,11809,726],{"class":610},[605,11811,11812],{"class":614},"GLTFModel\n",[605,11814,11815,11818,11820,11822,11825],{"class":607,"line":833},[605,11816,11817],{"class":618},"    ref",[605,11819,625],{"class":610},[605,11821,628],{"class":610},[605,11823,11824],{"class":631},"modelRef",[605,11826,2987],{"class":610},[605,11828,11829,11832,11834,11836,11839],{"class":607,"line":844},[605,11830,11831],{"class":618},"    path",[605,11833,625],{"class":610},[605,11835,628],{"class":610},[605,11837,11838],{"class":631},"https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb",[605,11840,2987],{"class":610},[605,11842,11843],{"class":607,"line":854},[605,11844,7459],{"class":610},[605,11846,11847,11849,11851],{"class":607,"line":600},[605,11848,700],{"class":610},[605,11850,718],{"class":614},[605,11852,637],{"class":610},[472,11854,894],{"id":893},[899,11856,11857,11867],{},[902,11858,11859],{},[905,11860,11861,11863,11865],{},[908,11862,910],{"align":969},[908,11864,913],{"align":969},[908,11866,916],{},[918,11868,11869,11882,11899,11912,11930],{},[905,11870,11871,11875,11878],{},[923,11872,11873],{"align":969},[586,11874,11353],{},[923,11876,11877],{"align":969},"Path to the model file.",[923,11879,11880],{},[586,11881,1151],{},[905,11883,11884,11888,11895],{},[923,11885,11886],{"align":969},[586,11887,10861],{},[923,11889,11890,11891,11894],{"align":969},"Enable ",[1112,11892,10867],{"href":10865,"rel":11893},[1116]," for the model.",[923,11896,11897],{},[586,11898,943],{},[905,11900,11901,11905,11908],{},[923,11902,11903],{"align":969},[586,11904,11089],{},[923,11906,11907],{"align":969},"Path to a local Draco decoder.",[923,11909,11910],{},[586,11911,1151],{},[905,11913,11914,11919,11926],{},[923,11915,11916],{"align":969},[586,11917,11918],{},"castShadow",[923,11920,11921,11922,11925],{"align":969},"Apply ",[586,11923,11924],{},"cast-shadow"," to all meshes inside your model.",[923,11927,11928],{},[586,11929,943],{},[905,11931,11932,11937,11942],{},[923,11933,11934],{"align":969},[586,11935,11936],{},"receiveShadow",[923,11938,11921,11939,11925],{"align":969},[586,11940,11941],{},"receive-shadow",[923,11943,11944],{},[586,11945,943],{},[1299,11947,11948],{},"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":544,"searchDepth":545,"depth":546,"links":11950},[11951,11952,11953],{"id":592,"depth":546,"text":15},{"id":11620,"depth":546,"text":11621},{"id":893,"depth":546,"text":894},"A component based on useGLTF to load models in TresJS scenes.",{},{"title":121,"description":11954},"JWe9EOh88vpjOxxjTHRWWuR-5fc1X6B09G1a16LfXnY",{"id":11959,"title":125,"body":11960,"description":12606,"extension":559,"links":560,"meta":12607,"navigation":562,"path":126,"seo":12608,"stem":127,"__hash__":12609},"docs/2.api/3.loaders/3.use-fbx.md",{"type":469,"value":11961,"toc":12600},[11962,11967,11972,11974,12398,12400,12477,12479,12505,12507,12509,12595,12597],[2558,11963,11964],{},[11965,11966],"loaders-fbx",{},[582,11968,11969,11970,10430],{},"A composable that allows you to easily load FBX models into your ",[1673,11971,10429],{},[472,11973,15],{"id":592},[10434,11975,11976,12149],{},[594,11977,11980],{"className":596,"code":11978,"filename":10439,"highlights":11979,"language":601,"meta":544,"style":544},"\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",[546,713],[586,11981,11982,12002,12022,12026,12041,12053,12078,12086,12090,12098,12141],{"__ignoreMap":544},[605,11983,11984,11986,11988,11990,11992,11994,11996,11998,12000],{"class":607,"line":545},[605,11985,611],{"class":610},[605,11987,615],{"class":614},[605,11989,619],{"class":618},[605,11991,622],{"class":618},[605,11993,625],{"class":610},[605,11995,628],{"class":610},[605,11997,632],{"class":631},[605,11999,628],{"class":610},[605,12001,637],{"class":610},[605,12003,12005,12007,12009,12012,12014,12016,12018,12020],{"class":12004,"line":546},[607,641],[605,12006,645],{"class":644},[605,12008,648],{"class":610},[605,12010,12011],{"class":651}," useFBX",[605,12013,661],{"class":610},[605,12015,664],{"class":644},[605,12017,667],{"class":610},[605,12019,670],{"class":631},[605,12021,673],{"class":610},[605,12023,12024],{"class":607,"line":676},[605,12025,710],{"emptyLinePlaceholder":562},[605,12027,12028,12030,12032,12034,12036,12039],{"class":607,"line":697},[605,12029,2689],{"class":618},[605,12031,10493],{"class":651},[605,12033,625],{"class":610},[605,12035,667],{"class":610},[605,12037,12038],{"class":631},"https://raw.githubusercontent.com/",[605,12040,673],{"class":610},[605,12042,12043,12046,12048,12051],{"class":607,"line":707},[605,12044,12045],{"class":610},"  +",[605,12047,667],{"class":610},[605,12049,12050],{"class":631},"Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx",[605,12052,673],{"class":610},[605,12054,12056,12058,12060,12062,12064,12066,12068,12070,12072,12074,12076],{"class":12055,"line":713},[607,641],[605,12057,2689],{"class":618},[605,12059,648],{"class":610},[605,12061,10512],{"class":651},[605,12063,655],{"class":610},[605,12065,10517],{"class":651},[605,12067,655],{"class":610},[605,12069,10522],{"class":651},[605,12071,5544],{"class":610},[605,12073,2766],{"class":610},[605,12075,12011],{"class":2800},[605,12077,10531],{"class":651},[605,12079,12080,12082,12084],{"class":607,"line":723},[605,12081,700],{"class":610},[605,12083,615],{"class":614},[605,12085,637],{"class":610},[605,12087,12088],{"class":607,"line":746},[605,12089,710],{"emptyLinePlaceholder":562},[605,12091,12092,12094,12096],{"class":607,"line":758},[605,12093,611],{"class":610},[605,12095,718],{"class":614},[605,12097,637],{"class":610},[605,12099,12100,12102,12104,12106,12108,12110,12112,12114,12116,12118,12120,12122,12124,12126,12128,12130,12132,12134,12137,12139],{"class":607,"line":768},[605,12101,726],{"class":610},[605,12103,10558],{"class":614},[605,12105,10561],{"class":644},[605,12107,625],{"class":610},[605,12109,628],{"class":610},[605,12111,8177],{"class":651},[605,12113,628],{"class":610},[605,12115,781],{"class":610},[605,12117,9802],{"class":618},[605,12119,625],{"class":610},[605,12121,628],{"class":610},[605,12123,8177],{"class":651},[605,12125,628],{"class":610},[605,12127,781],{"class":610},[605,12129,784],{"class":618},[605,12131,625],{"class":610},[605,12133,628],{"class":610},[605,12135,12136],{"class":791},"0.025",[605,12138,628],{"class":610},[605,12140,755],{"class":610},[605,12142,12143,12145,12147],{"class":607,"line":773},[605,12144,700],{"class":610},[605,12146,718],{"class":614},[605,12148,637],{"class":610},[594,12150,12152],{"className":596,"code":12151,"filename":10601,"language":601,"meta":544,"style":544},"\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",[586,12153,12154,12174,12192,12210,12224,12232,12236,12244,12263,12296,12304,12312,12318,12332,12358,12362,12382,12390],{"__ignoreMap":544},[605,12155,12156,12158,12160,12162,12164,12166,12168,12170,12172],{"class":607,"line":545},[605,12157,611],{"class":610},[605,12159,615],{"class":614},[605,12161,619],{"class":618},[605,12163,622],{"class":618},[605,12165,625],{"class":610},[605,12167,628],{"class":610},[605,12169,632],{"class":631},[605,12171,628],{"class":610},[605,12173,637],{"class":610},[605,12175,12176,12178,12180,12182,12184,12186,12188,12190],{"class":607,"line":546},[605,12177,645],{"class":644},[605,12179,648],{"class":610},[605,12181,658],{"class":651},[605,12183,661],{"class":610},[605,12185,664],{"class":644},[605,12187,667],{"class":610},[605,12189,670],{"class":631},[605,12191,673],{"class":610},[605,12193,12194,12196,12198,12200,12202,12204,12206,12208],{"class":607,"line":676},[605,12195,645],{"class":644},[605,12197,648],{"class":610},[605,12199,683],{"class":651},[605,12201,661],{"class":610},[605,12203,664],{"class":644},[605,12205,667],{"class":610},[605,12207,692],{"class":631},[605,12209,673],{"class":610},[605,12211,12212,12214,12216,12218,12220,12222],{"class":607,"line":697},[605,12213,645],{"class":644},[605,12215,10666],{"class":651},[605,12217,10669],{"class":644},[605,12219,667],{"class":610},[605,12221,10674],{"class":631},[605,12223,673],{"class":610},[605,12225,12226,12228,12230],{"class":607,"line":707},[605,12227,700],{"class":610},[605,12229,615],{"class":614},[605,12231,637],{"class":610},[605,12233,12234],{"class":607,"line":713},[605,12235,710],{"emptyLinePlaceholder":562},[605,12237,12238,12240,12242],{"class":607,"line":723},[605,12239,611],{"class":610},[605,12241,718],{"class":614},[605,12243,637],{"class":610},[605,12245,12246,12248,12250,12252,12254,12256,12259,12261],{"class":607,"line":746},[605,12247,726],{"class":610},[605,12249,729],{"class":614},[605,12251,732],{"class":618},[605,12253,625],{"class":610},[605,12255,628],{"class":610},[605,12257,12258],{"class":631},"#1F90FF",[605,12260,628],{"class":610},[605,12262,637],{"class":610},[605,12264,12265,12267,12269,12271,12273,12275,12277,12279,12282,12284,12286,12288,12290,12292,12294],{"class":607,"line":758},[605,12266,749],{"class":610},[605,12268,752],{"class":614},[605,12270,781],{"class":610},[605,12272,1459],{"class":618},[605,12274,625],{"class":610},[605,12276,628],{"class":610},[605,12278,1466],{"class":610},[605,12280,12281],{"class":791},"11",[605,12283,1471],{"class":610},[605,12285,12281],{"class":791},[605,12287,1471],{"class":610},[605,12289,12281],{"class":791},[605,12291,1481],{"class":610},[605,12293,628],{"class":610},[605,12295,755],{"class":610},[605,12297,12298,12300,12302],{"class":607,"line":768},[605,12299,749],{"class":610},[605,12301,763],{"class":614},[605,12303,755],{"class":610},[605,12305,12306,12308,12310],{"class":607,"line":773},[605,12307,749],{"class":610},[605,12309,10762],{"class":614},[605,12311,755],{"class":610},[605,12313,12314,12316],{"class":607,"line":799},[605,12315,749],{"class":610},[605,12317,10771],{"class":614},[605,12319,12320,12322,12324,12326,12328,12330],{"class":607,"line":599},[605,12321,5693],{"class":610},[605,12323,1886],{"class":618},[605,12325,625],{"class":610},[605,12327,628],{"class":610},[605,12329,792],{"class":791},[605,12331,2987],{"class":610},[605,12333,12334,12336,12338,12340,12342,12344,12346,12348,12350,12352,12354,12356],{"class":607,"line":822},[605,12335,5693],{"class":610},[605,12337,1459],{"class":618},[605,12339,625],{"class":610},[605,12341,628],{"class":610},[605,12343,1466],{"class":610},[605,12345,4160],{"class":791},[605,12347,1471],{"class":610},[605,12349,4160],{"class":791},[605,12351,1471],{"class":610},[605,12353,4160],{"class":791},[605,12355,1481],{"class":610},[605,12357,2987],{"class":610},[605,12359,12360],{"class":607,"line":833},[605,12361,10816],{"class":610},[605,12363,12364,12366,12368,12370,12372,12374,12376,12378,12380],{"class":607,"line":844},[605,12365,749],{"class":610},[605,12367,3518],{"class":614},[605,12369,781],{"class":610},[605,12371,1886],{"class":618},[605,12373,625],{"class":610},[605,12375,628],{"class":610},[605,12377,1893],{"class":791},[605,12379,628],{"class":610},[605,12381,755],{"class":610},[605,12383,12384,12386,12388],{"class":607,"line":854},[605,12385,877],{"class":610},[605,12387,729],{"class":614},[605,12389,637],{"class":610},[605,12391,12392,12394,12396],{"class":607,"line":600},[605,12393,700],{"class":610},[605,12395,718],{"class":614},[605,12397,637],{"class":610},[472,12399,10946],{"id":10945},[899,12401,12402,12412],{},[902,12403,12404],{},[905,12405,12406,12408,12410],{},[908,12407,3118],{"align":969},[908,12409,10957],{},[908,12411,913],{},[918,12413,12414,12428,12440,12452,12464],{},[905,12415,12416,12420,12425],{},[923,12417,12418],{"align":969},[1673,12419,8177],{},[923,12421,12422],{},[586,12423,12424],{},"Group",[923,12426,12427],{},"The loaded FBX model state",[905,12429,12430,12434,12438],{},[923,12431,12432],{"align":969},[1673,12433,10982],{},[923,12435,12436],{},[586,12437,9802],{},[923,12439,10989],{},[905,12441,12442,12446,12450],{},[923,12443,12444],{"align":969},[1673,12445,496],{},[923,12447,12448],{},[586,12449,9802],{},[923,12451,11002],{},[905,12453,12454,12458,12462],{},[923,12455,12456],{"align":969},[1673,12457,11009],{},[923,12459,12460],{},[586,12461,11014],{},[923,12463,11017],{},[905,12465,12466,12471,12475],{},[923,12467,12468],{"align":969},[1673,12469,12470],{},"execute",[923,12472,12473],{},[586,12474,11043],{},[923,12476,11046],{},[472,12478,7487],{"id":11049},[899,12480,12481,12491],{},[902,12482,12483],{},[905,12484,12485,12487,12489],{},[908,12486,3118],{"align":969},[908,12488,10957],{},[908,12490,913],{},[918,12492,12493],{},[905,12494,12495,12499,12503],{},[923,12496,12497],{"align":969},[1673,12498,11109],{},[923,12500,12501],{},[586,12502,5342],{},[923,12504,11118],{},[472,12506,11122],{"id":11121},[582,12508,11125],{},[594,12510,12512],{"className":1158,"code":12511,"language":632,"meta":544,"style":544},"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",[586,12513,12514,12543,12547,12551,12569,12573,12577],{"__ignoreMap":544},[605,12515,12516,12518,12520,12522,12524,12526,12528,12530,12532,12534,12536,12539,12541],{"class":607,"line":545},[605,12517,2689],{"class":618},[605,12519,648],{"class":610},[605,12521,10517],{"class":651},[605,12523,655],{"class":610},[605,12525,10522],{"class":651},[605,12527,5544],{"class":610},[605,12529,2766],{"class":610},[605,12531,12011],{"class":2800},[605,12533,2970],{"class":651},[605,12535,5536],{"class":610},[605,12537,12538],{"class":631},"/model.fbx",[605,12540,5536],{"class":610},[605,12542,5539],{"class":651},[605,12544,12545],{"class":607,"line":546},[605,12546,710],{"emptyLinePlaceholder":562},[605,12548,12549],{"class":607,"line":676},[605,12550,11168],{"class":1181},[605,12552,12553,12555,12557,12559,12561,12563,12565,12567],{"class":607,"line":697},[605,12554,2689],{"class":618},[605,12556,11175],{"class":651},[605,12558,625],{"class":610},[605,12560,10517],{"class":651},[605,12562,1118],{"class":610},[605,12564,5496],{"class":651},[605,12566,1118],{"class":610},[605,12568,11188],{"class":651},[605,12570,12571],{"class":607,"line":707},[605,12572,710],{"emptyLinePlaceholder":562},[605,12574,12575],{"class":607,"line":713},[605,12576,11197],{"class":1181},[605,12578,12579,12581,12583,12585,12587,12589,12591,12593],{"class":607,"line":723},[605,12580,2689],{"class":618},[605,12582,11204],{"class":651},[605,12584,625],{"class":610},[605,12586,11209],{"class":651},[605,12588,1118],{"class":610},[605,12590,5496],{"class":651},[605,12592,1118],{"class":610},[605,12594,11218],{"class":651},[582,12596,11221],{},[1299,12598,12599],{},"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":544,"searchDepth":545,"depth":546,"links":12601},[12602,12603,12604,12605],{"id":592,"depth":546,"text":15},{"id":10945,"depth":546,"text":10946},{"id":11049,"depth":546,"text":7487},{"id":11121,"depth":546,"text":11122},"A composable to load FBX models in TresJS scenes.",{},{"title":125,"description":12606},"OZNFq_w0y9fXGIViDTr_a5XFwBaMnXwWDQKWFsdULrs",{"id":12611,"title":129,"body":12612,"description":13270,"extension":559,"links":560,"meta":13271,"navigation":562,"path":130,"seo":13272,"stem":131,"__hash__":13273},"docs/2.api/3.loaders/4.fbx-model.md",{"type":469,"value":12613,"toc":13265},[12614,12618,12627,12629,12991,12993,13000,13207,13209,13263],[2558,12615,12616],{},[11965,12617],{},[582,12619,2253,12620,11247,12622,11253],{},[586,12621,129],{},[1112,12623,12625],{"href":12624},"./use-fbx",[586,12626,125],{},[472,12628,15],{"id":592},[10434,12630,12631,12745],{},[594,12632,12635],{"className":596,"code":12633,"filename":10439,"highlights":12634,"language":601,"meta":544,"style":544},"\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",[546,746],[586,12636,12637,12657,12677,12681,12696,12704,12708,12716,12737],{"__ignoreMap":544},[605,12638,12639,12641,12643,12645,12647,12649,12651,12653,12655],{"class":607,"line":545},[605,12640,611],{"class":610},[605,12642,615],{"class":614},[605,12644,619],{"class":618},[605,12646,622],{"class":618},[605,12648,625],{"class":610},[605,12650,628],{"class":610},[605,12652,632],{"class":631},[605,12654,628],{"class":610},[605,12656,637],{"class":610},[605,12658,12660,12662,12664,12667,12669,12671,12673,12675],{"class":12659,"line":546},[607,641],[605,12661,645],{"class":644},[605,12663,648],{"class":610},[605,12665,12666],{"class":651}," FBXModel",[605,12668,661],{"class":610},[605,12670,664],{"class":644},[605,12672,667],{"class":610},[605,12674,670],{"class":631},[605,12676,673],{"class":610},[605,12678,12679],{"class":607,"line":676},[605,12680,710],{"emptyLinePlaceholder":562},[605,12682,12683,12685,12687,12689,12691,12694],{"class":607,"line":697},[605,12684,2689],{"class":618},[605,12686,10493],{"class":651},[605,12688,625],{"class":610},[605,12690,667],{"class":610},[605,12692,12693],{"class":631},"./Jeep_done.fbx",[605,12695,673],{"class":610},[605,12697,12698,12700,12702],{"class":607,"line":707},[605,12699,700],{"class":610},[605,12701,615],{"class":614},[605,12703,637],{"class":610},[605,12705,12706],{"class":607,"line":713},[605,12707,710],{"emptyLinePlaceholder":562},[605,12709,12710,12712,12714],{"class":607,"line":723},[605,12711,611],{"class":610},[605,12713,718],{"class":614},[605,12715,637],{"class":610},[605,12717,12719,12721,12723,12725,12727,12729,12731,12733,12735],{"class":12718,"line":746},[607,641],[605,12720,726],{"class":610},[605,12722,129],{"class":614},[605,12724,781],{"class":610},[605,12726,11353],{"class":618},[605,12728,625],{"class":610},[605,12730,628],{"class":610},[605,12732,11353],{"class":651},[605,12734,628],{"class":610},[605,12736,755],{"class":610},[605,12738,12739,12741,12743],{"class":607,"line":758},[605,12740,700],{"class":610},[605,12742,718],{"class":614},[605,12744,637],{"class":610},[594,12746,12747],{"className":596,"code":10600,"filename":10601,"language":601,"meta":544,"style":544},[586,12748,12749,12769,12787,12805,12819,12827,12831,12839,12857,12889,12897,12905,12911,12925,12951,12955,12975,12983],{"__ignoreMap":544},[605,12750,12751,12753,12755,12757,12759,12761,12763,12765,12767],{"class":607,"line":545},[605,12752,611],{"class":610},[605,12754,615],{"class":614},[605,12756,619],{"class":618},[605,12758,622],{"class":618},[605,12760,625],{"class":610},[605,12762,628],{"class":610},[605,12764,632],{"class":631},[605,12766,628],{"class":610},[605,12768,637],{"class":610},[605,12770,12771,12773,12775,12777,12779,12781,12783,12785],{"class":607,"line":546},[605,12772,645],{"class":644},[605,12774,648],{"class":610},[605,12776,658],{"class":651},[605,12778,661],{"class":610},[605,12780,664],{"class":644},[605,12782,667],{"class":610},[605,12784,670],{"class":631},[605,12786,673],{"class":610},[605,12788,12789,12791,12793,12795,12797,12799,12801,12803],{"class":607,"line":676},[605,12790,645],{"class":644},[605,12792,648],{"class":610},[605,12794,683],{"class":651},[605,12796,661],{"class":610},[605,12798,664],{"class":644},[605,12800,667],{"class":610},[605,12802,692],{"class":631},[605,12804,673],{"class":610},[605,12806,12807,12809,12811,12813,12815,12817],{"class":607,"line":697},[605,12808,645],{"class":644},[605,12810,10666],{"class":651},[605,12812,10669],{"class":644},[605,12814,667],{"class":610},[605,12816,10674],{"class":631},[605,12818,673],{"class":610},[605,12820,12821,12823,12825],{"class":607,"line":707},[605,12822,700],{"class":610},[605,12824,615],{"class":614},[605,12826,637],{"class":610},[605,12828,12829],{"class":607,"line":713},[605,12830,710],{"emptyLinePlaceholder":562},[605,12832,12833,12835,12837],{"class":607,"line":723},[605,12834,611],{"class":610},[605,12836,718],{"class":614},[605,12838,637],{"class":610},[605,12840,12841,12843,12845,12847,12849,12851,12853,12855],{"class":607,"line":746},[605,12842,726],{"class":610},[605,12844,729],{"class":614},[605,12846,732],{"class":618},[605,12848,625],{"class":610},[605,12850,628],{"class":610},[605,12852,10711],{"class":631},[605,12854,628],{"class":610},[605,12856,637],{"class":610},[605,12858,12859,12861,12863,12865,12867,12869,12871,12873,12875,12877,12879,12881,12883,12885,12887],{"class":607,"line":758},[605,12860,749],{"class":610},[605,12862,752],{"class":614},[605,12864,781],{"class":610},[605,12866,1459],{"class":618},[605,12868,625],{"class":610},[605,12870,628],{"class":610},[605,12872,1466],{"class":610},[605,12874,4160],{"class":791},[605,12876,1471],{"class":610},[605,12878,792],{"class":791},[605,12880,1471],{"class":610},[605,12882,2396],{"class":791},[605,12884,1481],{"class":610},[605,12886,628],{"class":610},[605,12888,755],{"class":610},[605,12890,12891,12893,12895],{"class":607,"line":768},[605,12892,749],{"class":610},[605,12894,763],{"class":614},[605,12896,755],{"class":610},[605,12898,12899,12901,12903],{"class":607,"line":773},[605,12900,749],{"class":610},[605,12902,10762],{"class":614},[605,12904,755],{"class":610},[605,12906,12907,12909],{"class":607,"line":799},[605,12908,749],{"class":610},[605,12910,10771],{"class":614},[605,12912,12913,12915,12917,12919,12921,12923],{"class":607,"line":599},[605,12914,5693],{"class":610},[605,12916,1886],{"class":618},[605,12918,625],{"class":610},[605,12920,628],{"class":610},[605,12922,792],{"class":791},[605,12924,2987],{"class":610},[605,12926,12927,12929,12931,12933,12935,12937,12939,12941,12943,12945,12947,12949],{"class":607,"line":822},[605,12928,5693],{"class":610},[605,12930,1459],{"class":618},[605,12932,625],{"class":610},[605,12934,628],{"class":610},[605,12936,1466],{"class":610},[605,12938,4160],{"class":791},[605,12940,1471],{"class":610},[605,12942,4160],{"class":791},[605,12944,1471],{"class":610},[605,12946,4160],{"class":791},[605,12948,1481],{"class":610},[605,12950,2987],{"class":610},[605,12952,12953],{"class":607,"line":833},[605,12954,10816],{"class":610},[605,12956,12957,12959,12961,12963,12965,12967,12969,12971,12973],{"class":607,"line":844},[605,12958,749],{"class":610},[605,12960,3518],{"class":614},[605,12962,781],{"class":610},[605,12964,1886],{"class":618},[605,12966,625],{"class":610},[605,12968,628],{"class":610},[605,12970,1893],{"class":791},[605,12972,628],{"class":610},[605,12974,755],{"class":610},[605,12976,12977,12979,12981],{"class":607,"line":854},[605,12978,877],{"class":610},[605,12980,729],{"class":614},[605,12982,637],{"class":610},[605,12984,12985,12987,12989],{"class":607,"line":600},[605,12986,700],{"class":610},[605,12988,718],{"class":614},[605,12990,637],{"class":610},[472,12992,11621],{"id":11620},[582,12994,11624,12995,1680,12997,12999],{},[586,12996,11627],{},[586,12998,129],{}," component and then using it to get the object.",[594,13001,13003],{"className":596,"code":13002,"language":601,"meta":544,"style":544},"\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",[586,13004,13005,13025,13045,13063,13067,13085,13089,13107,13111,13137,13143,13151,13155,13163,13170,13182,13195,13199],{"__ignoreMap":544},[605,13006,13007,13009,13011,13013,13015,13017,13019,13021,13023],{"class":607,"line":545},[605,13008,611],{"class":610},[605,13010,615],{"class":614},[605,13012,619],{"class":618},[605,13014,622],{"class":618},[605,13016,625],{"class":610},[605,13018,628],{"class":610},[605,13020,632],{"class":631},[605,13022,628],{"class":610},[605,13024,637],{"class":610},[605,13026,13027,13029,13031,13033,13035,13037,13039,13041,13043],{"class":607,"line":546},[605,13028,645],{"class":644},[605,13030,11663],{"class":644},[605,13032,648],{"class":610},[605,13034,11668],{"class":651},[605,13036,661],{"class":610},[605,13038,664],{"class":644},[605,13040,667],{"class":610},[605,13042,692],{"class":631},[605,13044,673],{"class":610},[605,13046,13047,13049,13051,13053,13055,13057,13059,13061],{"class":607,"line":676},[605,13048,645],{"class":644},[605,13050,648],{"class":610},[605,13052,12666],{"class":651},[605,13054,661],{"class":610},[605,13056,664],{"class":644},[605,13058,667],{"class":610},[605,13060,670],{"class":631},[605,13062,673],{"class":610},[605,13064,13065],{"class":607,"line":697},[605,13066,710],{"emptyLinePlaceholder":562},[605,13068,13069,13071,13073,13075,13077,13079,13081,13083],{"class":607,"line":707},[605,13070,2689],{"class":618},[605,13072,11708],{"class":651},[605,13074,625],{"class":610},[605,13076,9716],{"class":2800},[605,13078,611],{"class":610},[605,13080,11717],{"class":1172},[605,13082,11720],{"class":610},[605,13084,2846],{"class":651},[605,13086,13087],{"class":607,"line":713},[605,13088,710],{"emptyLinePlaceholder":562},[605,13090,13091,13093,13095,13097,13099,13101,13103,13105],{"class":607,"line":723},[605,13092,5485],{"class":2800},[605,13094,11733],{"class":651},[605,13096,655],{"class":610},[605,13098,2713],{"class":610},[605,13100,11630],{"class":5495},[605,13102,4125],{"class":610},[605,13104,5501],{"class":618},[605,13106,1176],{"class":610},[605,13108,13109],{"class":607,"line":746},[605,13110,11750],{"class":1181},[605,13112,13113,13115,13117,13119,13121,13123,13125,13127,13129,13131,13133,13135],{"class":607,"line":758},[605,13114,11755],{"class":651},[605,13116,1118],{"class":610},[605,13118,1459],{"class":651},[605,13120,1118],{"class":610},[605,13122,11764],{"class":2800},[605,13124,2970],{"class":614},[605,13126,937],{"class":791},[605,13128,655],{"class":610},[605,13130,11773],{"class":791},[605,13132,655],{"class":610},[605,13134,11773],{"class":791},[605,13136,5539],{"class":614},[605,13138,13139,13141],{"class":607,"line":768},[605,13140,5544],{"class":610},[605,13142,5539],{"class":651},[605,13144,13145,13147,13149],{"class":607,"line":773},[605,13146,700],{"class":610},[605,13148,615],{"class":614},[605,13150,637],{"class":610},[605,13152,13153],{"class":607,"line":799},[605,13154,710],{"emptyLinePlaceholder":562},[605,13156,13157,13159,13161],{"class":607,"line":599},[605,13158,611],{"class":610},[605,13160,718],{"class":614},[605,13162,637],{"class":610},[605,13164,13165,13167],{"class":607,"line":822},[605,13166,726],{"class":610},[605,13168,13169],{"class":614},"FBXModel\n",[605,13171,13172,13174,13176,13178,13180],{"class":607,"line":833},[605,13173,11817],{"class":618},[605,13175,625],{"class":610},[605,13177,628],{"class":610},[605,13179,11824],{"class":631},[605,13181,2987],{"class":610},[605,13183,13184,13186,13188,13190,13193],{"class":607,"line":844},[605,13185,11831],{"class":618},[605,13187,625],{"class":610},[605,13189,628],{"class":610},[605,13191,13192],{"class":631},"https://raw.githubusercontent.com/Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx",[605,13194,2987],{"class":610},[605,13196,13197],{"class":607,"line":854},[605,13198,7459],{"class":610},[605,13200,13201,13203,13205],{"class":607,"line":600},[605,13202,700],{"class":610},[605,13204,718],{"class":614},[605,13206,637],{"class":610},[472,13208,894],{"id":893},[899,13210,13211,13221],{},[902,13212,13213],{},[905,13214,13215,13217,13219],{},[908,13216,910],{"align":969},[908,13218,913],{"align":969},[908,13220,916],{},[918,13222,13223,13235,13249],{},[905,13224,13225,13229,13231],{},[923,13226,13227],{"align":969},[586,13228,11353],{},[923,13230,11877],{"align":969},[923,13232,13233],{},[586,13234,1151],{},[905,13236,13237,13241,13245],{},[923,13238,13239],{"align":969},[586,13240,11918],{},[923,13242,11921,13243,11925],{"align":969},[586,13244,11924],{},[923,13246,13247],{},[586,13248,943],{},[905,13250,13251,13255,13259],{},[923,13252,13253],{"align":969},[586,13254,11936],{},[923,13256,11921,13257,11925],{"align":969},[586,13258,11941],{},[923,13260,13261],{},[586,13262,943],{},[1299,13264,11948],{},{"title":544,"searchDepth":545,"depth":546,"links":13266},[13267,13268,13269],{"id":592,"depth":546,"text":15},{"id":11620,"depth":546,"text":11621},{"id":893,"depth":546,"text":894},"A component based on useFBX to load models in TresJS scenes.",{},{"title":129,"description":13270},"UvFys7XTw8i8N0823KzOVRUmY9Q9yI0fymMbHpSGEfQ",{"id":13275,"title":133,"body":13276,"description":13929,"extension":559,"links":560,"meta":13930,"navigation":562,"path":134,"seo":13931,"stem":135,"__hash__":13932},"docs/2.api/3.loaders/5.use-texture.md",{"type":469,"value":13277,"toc":13923},[13278,13283,13294,13296,13454,13456,13508,13510,13566,13570,13577,13920],[2558,13279,13280],{},[13281,13282],"loaders-use-texture",{},[582,13284,13285,13286,13291,13292,10430],{},"A composable that allows you to load textures using the ",[1112,13287,13290],{"href":13288,"rel":13289},"https://threejs.org/docs/#api/en/loaders/TextureLoader",[1116],"THREE.js texture loader"," into your ",[1673,13293,10429],{},[472,13295,15],{"id":592},[594,13297,13300],{"className":596,"code":13298,"highlights":13299,"language":601,"meta":544,"style":544},"\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",[546,697,768],[586,13301,13302,13322,13342,13346,13378,13386,13390,13398,13406,13414,13438,13446],{"__ignoreMap":544},[605,13303,13304,13306,13308,13310,13312,13314,13316,13318,13320],{"class":607,"line":545},[605,13305,611],{"class":610},[605,13307,615],{"class":614},[605,13309,619],{"class":618},[605,13311,622],{"class":618},[605,13313,625],{"class":610},[605,13315,628],{"class":610},[605,13317,632],{"class":631},[605,13319,628],{"class":610},[605,13321,637],{"class":610},[605,13323,13325,13327,13329,13332,13334,13336,13338,13340],{"class":13324,"line":546},[607,641],[605,13326,645],{"class":644},[605,13328,648],{"class":610},[605,13330,13331],{"class":651}," useTexture",[605,13333,661],{"class":610},[605,13335,664],{"class":644},[605,13337,667],{"class":610},[605,13339,670],{"class":631},[605,13341,673],{"class":610},[605,13343,13344],{"class":607,"line":676},[605,13345,710],{"emptyLinePlaceholder":562},[605,13347,13349,13351,13353,13355,13357,13360,13362,13365,13367,13370,13372,13374,13376],{"class":13348,"line":697},[607,641],[605,13350,2689],{"class":618},[605,13352,648],{"class":610},[605,13354,10512],{"class":614},[605,13356,1190],{"class":610},[605,13358,13359],{"class":651}," texture",[605,13361,655],{"class":610},[605,13363,13364],{"class":651}," isLoading",[605,13366,655],{"class":610},[605,13368,13369],{"class":651}," error ",[605,13371,5544],{"class":610},[605,13373,2766],{"class":610},[605,13375,13331],{"class":2800},[605,13377,10531],{"class":651},[605,13379,13380,13382,13384],{"class":607,"line":707},[605,13381,700],{"class":610},[605,13383,615],{"class":614},[605,13385,637],{"class":610},[605,13387,13388],{"class":607,"line":713},[605,13389,710],{"emptyLinePlaceholder":562},[605,13391,13392,13394,13396],{"class":607,"line":723},[605,13393,611],{"class":610},[605,13395,718],{"class":614},[605,13397,637],{"class":610},[605,13399,13400,13402,13404],{"class":607,"line":746},[605,13401,726],{"class":610},[605,13403,828],{"class":614},[605,13405,637],{"class":610},[605,13407,13408,13410,13412],{"class":607,"line":758},[605,13409,749],{"class":610},[605,13411,4735],{"class":614},[605,13413,755],{"class":610},[605,13415,13417,13419,13422,13424,13427,13429,13431,13434,13436],{"class":13416,"line":768},[607,641],[605,13418,749],{"class":610},[605,13420,13421],{"class":614},"TresMeshStandardMaterial",[605,13423,781],{"class":610},[605,13425,13426],{"class":618},"map",[605,13428,625],{"class":610},[605,13430,628],{"class":610},[605,13432,13433],{"class":651},"texture",[605,13435,628],{"class":610},[605,13437,755],{"class":610},[605,13439,13440,13442,13444],{"class":607,"line":773},[605,13441,877],{"class":610},[605,13443,828],{"class":614},[605,13445,637],{"class":610},[605,13447,13448,13450,13452],{"class":607,"line":799},[605,13449,700],{"class":610},[605,13451,718],{"class":614},[605,13453,637],{"class":610},[472,13455,7487],{"id":11049},[899,13457,13458,13470],{},[902,13459,13460],{},[905,13461,13462,13464,13466,13468],{},[908,13463,3118],{"align":969},[908,13465,10957],{},[908,13467,916],{},[908,13469,913],{},[918,13471,13472,13489],{},[905,13473,13474,13478,13482,13486],{},[923,13475,13476],{"align":969},[1673,13477,11353],{},[923,13479,13480],{},[586,13481,11094],{},[923,13483,13484],{},[586,13485,1151],{},[923,13487,13488],{},"The path to the texture.",[905,13490,13491,13496,13501,13505],{},[923,13492,13493],{"align":969},[1673,13494,13495],{},"manager",[923,13497,13498],{},[586,13499,13500],{},"THREE.LoadingManager",[923,13502,13503],{},[586,13504,1151],{},[923,13506,13507],{},"The loading manager to use for the texture.",[472,13509,10946],{"id":10945},[899,13511,13512,13522],{},[902,13513,13514],{},[905,13515,13516,13518,13520],{},[908,13517,3118],{"align":969},[908,13519,10957],{"align":969},[908,13521,913],{"align":969},[918,13523,13524,13538,13551],{},[905,13525,13526,13530,13535],{},[923,13527,13528],{"align":969},[586,13529,8177],{},[923,13531,13532],{"align":969},[586,13533,13534],{},"Texture | null",[923,13536,13537],{"align":969},"The loaded texture",[905,13539,13540,13544,13548],{},[923,13541,13542],{"align":969},[586,13543,11009],{},[923,13545,13546],{"align":969},[586,13547,11014],{},[923,13549,13550],{"align":969},"Whether the texture is loading",[905,13552,13553,13558,13563],{},[923,13554,13555],{"align":969},[586,13556,13557],{},"error",[923,13559,13560],{"align":969},[586,13561,13562],{},"string | null",[923,13564,13565],{"align":969},"Error message if loading failed",[472,13567,13569],{"id":13568},"component-usage","Component Usage",[582,13571,13572,13573,13576],{},"You can also use the ",[586,13574,13575],{},"UseTexture"," component directly in your template:",[594,13578,13581],{"className":596,"code":13579,"highlights":13580,"language":601,"meta":544,"style":544},"\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",[546,844,854,600,874,884,2952,3047],[586,13582,13583,13603,13623,13627,13642,13646,13670,13695,13699,13703,13727,13750,13754,13762,13766,13774,13782,13804,13819,13837,13853,13859,13867,13875,13895,13903,13912],{"__ignoreMap":544},[605,13584,13585,13587,13589,13591,13593,13595,13597,13599,13601],{"class":607,"line":545},[605,13586,611],{"class":610},[605,13588,615],{"class":614},[605,13590,619],{"class":618},[605,13592,622],{"class":618},[605,13594,625],{"class":610},[605,13596,628],{"class":610},[605,13598,632],{"class":631},[605,13600,628],{"class":610},[605,13602,637],{"class":610},[605,13604,13606,13608,13610,13613,13615,13617,13619,13621],{"class":13605,"line":546},[607,641],[605,13607,645],{"class":644},[605,13609,648],{"class":610},[605,13611,13612],{"class":651}," UseTexture",[605,13614,661],{"class":610},[605,13616,664],{"class":644},[605,13618,667],{"class":610},[605,13620,670],{"class":631},[605,13622,673],{"class":610},[605,13624,13625],{"class":607,"line":676},[605,13626,710],{"emptyLinePlaceholder":562},[605,13628,13629,13631,13633,13635,13637,13640],{"class":607,"line":697},[605,13630,2689],{"class":618},[605,13632,10493],{"class":651},[605,13634,625],{"class":610},[605,13636,667],{"class":610},[605,13638,13639],{"class":631},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Color.jpg",[605,13641,673],{"class":610},[605,13643,13644],{"class":607,"line":707},[605,13645,710],{"emptyLinePlaceholder":562},[605,13647,13648,13650,13653,13655,13657,13659,13661,13664,13666,13668],{"class":607,"line":713},[605,13649,2689],{"class":618},[605,13651,13652],{"class":651}," handleLoaded ",[605,13654,625],{"class":610},[605,13656,2713],{"class":610},[605,13658,13433],{"class":5495},[605,13660,1190],{"class":610},[605,13662,13663],{"class":1172}," Texture",[605,13665,4125],{"class":610},[605,13667,5501],{"class":618},[605,13669,1176],{"class":610},[605,13671,13672,13675,13677,13680,13682,13684,13687,13689,13691,13693],{"class":607,"line":723},[605,13673,13674],{"class":651},"  console",[605,13676,1118],{"class":610},[605,13678,13679],{"class":2800},"log",[605,13681,2970],{"class":614},[605,13683,5536],{"class":610},[605,13685,13686],{"class":631},"Loaded texture",[605,13688,5536],{"class":610},[605,13690,655],{"class":610},[605,13692,13359],{"class":651},[605,13694,5539],{"class":614},[605,13696,13697],{"class":607,"line":746},[605,13698,1297],{"class":610},[605,13700,13701],{"class":607,"line":758},[605,13702,710],{"emptyLinePlaceholder":562},[605,13704,13705,13707,13710,13712,13714,13716,13718,13721,13723,13725],{"class":607,"line":768},[605,13706,2689],{"class":618},[605,13708,13709],{"class":651}," handleError ",[605,13711,625],{"class":610},[605,13713,2713],{"class":610},[605,13715,13557],{"class":5495},[605,13717,1190],{"class":610},[605,13719,13720],{"class":1172}," unknown",[605,13722,4125],{"class":610},[605,13724,5501],{"class":618},[605,13726,1176],{"class":610},[605,13728,13729,13731,13733,13735,13737,13739,13741,13743,13745,13748],{"class":607,"line":773},[605,13730,13674],{"class":651},[605,13732,1118],{"class":610},[605,13734,13557],{"class":2800},[605,13736,2970],{"class":614},[605,13738,5536],{"class":610},[605,13740,13557],{"class":631},[605,13742,5536],{"class":610},[605,13744,655],{"class":610},[605,13746,13747],{"class":651}," error",[605,13749,5539],{"class":614},[605,13751,13752],{"class":607,"line":799},[605,13753,1297],{"class":610},[605,13755,13756,13758,13760],{"class":607,"line":599},[605,13757,700],{"class":610},[605,13759,615],{"class":614},[605,13761,637],{"class":610},[605,13763,13764],{"class":607,"line":822},[605,13765,710],{"emptyLinePlaceholder":562},[605,13767,13768,13770,13772],{"class":607,"line":833},[605,13769,611],{"class":610},[605,13771,718],{"class":614},[605,13773,637],{"class":610},[605,13775,13777,13779],{"class":13776,"line":844},[607,641],[605,13778,726],{"class":610},[605,13780,13781],{"class":614},"UseTexture\n",[605,13783,13785,13788,13790,13792,13794,13796,13798,13800,13802],{"class":13784,"line":854},[607,641],[605,13786,13787],{"class":618},"    v-slot",[605,13789,625],{"class":610},[605,13791,628],{"class":610},[605,13793,7402],{"class":610},[605,13795,8177],{"class":614},[605,13797,7407],{"class":610},[605,13799,13433],{"class":651},[605,13801,661],{"class":610},[605,13803,2987],{"class":610},[605,13805,13807,13809,13811,13813,13815,13817],{"class":13806,"line":600},[607,641],[605,13808,7392],{"class":610},[605,13810,11353],{"class":618},[605,13812,625],{"class":610},[605,13814,628],{"class":610},[605,13816,11353],{"class":651},[605,13818,2987],{"class":610},[605,13820,13822,13825,13828,13830,13832,13835],{"class":13821,"line":874},[607,641],[605,13823,13824],{"class":610},"    @",[605,13826,13827],{"class":618},"loaded",[605,13829,625],{"class":610},[605,13831,628],{"class":610},[605,13833,13834],{"class":651},"handleLoaded",[605,13836,2987],{"class":610},[605,13838,13840,13842,13844,13846,13848,13851],{"class":13839,"line":884},[607,641],[605,13841,13824],{"class":610},[605,13843,13557],{"class":618},[605,13845,625],{"class":610},[605,13847,628],{"class":610},[605,13849,13850],{"class":651},"handleError",[605,13852,2987],{"class":610},[605,13854,13856],{"class":13855,"line":2952},[607,641],[605,13857,13858],{"class":610},"  >\n",[605,13860,13861,13863,13865],{"class":607,"line":2960},[605,13862,749],{"class":610},[605,13864,828],{"class":614},[605,13866,637],{"class":610},[605,13868,13869,13871,13873],{"class":607,"line":2990},[605,13870,825],{"class":610},[605,13872,4735],{"class":614},[605,13874,755],{"class":610},[605,13876,13877,13879,13881,13883,13885,13887,13889,13891,13893],{"class":607,"line":3007},[605,13878,825],{"class":610},[605,13880,13421],{"class":614},[605,13882,781],{"class":610},[605,13884,13426],{"class":618},[605,13886,625],{"class":610},[605,13888,628],{"class":610},[605,13890,13433],{"class":651},[605,13892,628],{"class":610},[605,13894,755],{"class":610},[605,13896,13897,13899,13901],{"class":607,"line":3022},[605,13898,867],{"class":610},[605,13900,828],{"class":614},[605,13902,637],{"class":610},[605,13904,13906,13908,13910],{"class":13905,"line":3047},[607,641],[605,13907,877],{"class":610},[605,13909,13575],{"class":614},[605,13911,637],{"class":610},[605,13913,13914,13916,13918],{"class":607,"line":2591},[605,13915,700],{"class":610},[605,13917,718],{"class":614},[605,13919,637],{"class":610},[1299,13921,13922],{},"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":544,"searchDepth":545,"depth":546,"links":13924},[13925,13926,13927,13928],{"id":592,"depth":546,"text":15},{"id":11049,"depth":546,"text":7487},{"id":10945,"depth":546,"text":10946},{"id":13568,"depth":546,"text":13569},"A composable to load textures in TresJS scenes.",{},{"title":133,"description":13929},"ckGyh8HVRPCKL9dPesmypom9x0l79QpUpty8UM9RtKM",{"id":13934,"title":137,"body":13935,"description":15457,"extension":559,"links":560,"meta":15458,"navigation":562,"path":138,"seo":15459,"stem":139,"__hash__":15460},"docs/2.api/3.loaders/6.use-textures.md",{"type":469,"value":13936,"toc":15448},[13937,13942,13950,13952,14222,14226,14229,15313,15317,15321,15356,15360,15415,15419,15445],[2558,13938,13939],{},[13940,13941],"loaders-use-textures",{},[582,13943,13944,13945,13291,13948,10430],{},"A composable that allows you to load multiple textures at once using the ",[1112,13946,13290],{"href":13288,"rel":13947},[1116],[1673,13949,10429],{},[472,13951,15],{"id":592},[594,13953,13956],{"className":596,"code":13954,"highlights":13955,"language":601,"meta":544,"style":544},"\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",[546,799,874,884,2952],[586,13957,13958,13978,13998,14002,14007,14019,14032,14043,14052,14057,14061,14066,14093,14101,14105,14113,14121,14129,14136,14158,14180,14202,14206,14214],{"__ignoreMap":544},[605,13959,13960,13962,13964,13966,13968,13970,13972,13974,13976],{"class":607,"line":545},[605,13961,611],{"class":610},[605,13963,615],{"class":614},[605,13965,619],{"class":618},[605,13967,622],{"class":618},[605,13969,625],{"class":610},[605,13971,628],{"class":610},[605,13973,632],{"class":631},[605,13975,628],{"class":610},[605,13977,637],{"class":610},[605,13979,13981,13983,13985,13988,13990,13992,13994,13996],{"class":13980,"line":546},[607,641],[605,13982,645],{"class":644},[605,13984,648],{"class":610},[605,13986,13987],{"class":651}," useTextures",[605,13989,661],{"class":610},[605,13991,664],{"class":644},[605,13993,667],{"class":610},[605,13995,670],{"class":631},[605,13997,673],{"class":610},[605,13999,14000],{"class":607,"line":676},[605,14001,710],{"emptyLinePlaceholder":562},[605,14003,14004],{"class":607,"line":697},[605,14005,14006],{"class":1181},"// Define an array of texture paths\n",[605,14008,14009,14011,14014,14016],{"class":607,"line":707},[605,14010,2689],{"class":618},[605,14012,14013],{"class":651}," texturePaths ",[605,14015,625],{"class":610},[605,14017,14018],{"class":651}," [\n",[605,14020,14021,14024,14027,14029],{"class":607,"line":713},[605,14022,14023],{"class":610},"  '",[605,14025,14026],{"class":631},"/textures/color.jpg",[605,14028,5536],{"class":610},[605,14030,14031],{"class":610},",\n",[605,14033,14034,14036,14039,14041],{"class":607,"line":723},[605,14035,14023],{"class":610},[605,14037,14038],{"class":631},"/textures/normal.jpg",[605,14040,5536],{"class":610},[605,14042,14031],{"class":610},[605,14044,14045,14047,14050],{"class":607,"line":746},[605,14046,14023],{"class":610},[605,14048,14049],{"class":631},"/textures/roughness.jpg",[605,14051,673],{"class":610},[605,14053,14054],{"class":607,"line":758},[605,14055,14056],{"class":651},"]\n",[605,14058,14059],{"class":607,"line":768},[605,14060,710],{"emptyLinePlaceholder":562},[605,14062,14063],{"class":607,"line":773},[605,14064,14065],{"class":1181},"// Load all textures at once\n",[605,14067,14069,14071,14073,14076,14078,14080,14082,14084,14086,14088,14090],{"class":14068,"line":799},[607,641],[605,14070,2689],{"class":618},[605,14072,648],{"class":610},[605,14074,14075],{"class":651}," textures",[605,14077,655],{"class":610},[605,14079,13364],{"class":651},[605,14081,655],{"class":610},[605,14083,13369],{"class":651},[605,14085,5544],{"class":610},[605,14087,2766],{"class":610},[605,14089,13987],{"class":2800},[605,14091,14092],{"class":651},"(texturePaths)\n",[605,14094,14095,14097,14099],{"class":607,"line":599},[605,14096,700],{"class":610},[605,14098,615],{"class":614},[605,14100,637],{"class":610},[605,14102,14103],{"class":607,"line":822},[605,14104,710],{"emptyLinePlaceholder":562},[605,14106,14107,14109,14111],{"class":607,"line":833},[605,14108,611],{"class":610},[605,14110,718],{"class":614},[605,14112,637],{"class":610},[605,14114,14115,14117,14119],{"class":607,"line":844},[605,14116,726],{"class":610},[605,14118,828],{"class":614},[605,14120,637],{"class":610},[605,14122,14123,14125,14127],{"class":607,"line":854},[605,14124,749],{"class":610},[605,14126,4735],{"class":614},[605,14128,755],{"class":610},[605,14130,14131,14133],{"class":607,"line":600},[605,14132,749],{"class":610},[605,14134,14135],{"class":614},"TresMeshStandardMaterial\n",[605,14137,14139,14141,14143,14145,14147,14150,14152,14154,14156],{"class":14138,"line":874},[607,641],[605,14140,5693],{"class":610},[605,14142,13426],{"class":618},[605,14144,625],{"class":610},[605,14146,628],{"class":610},[605,14148,14149],{"class":651},"textures",[605,14151,1466],{"class":610},[605,14153,937],{"class":791},[605,14155,1481],{"class":610},[605,14157,2987],{"class":610},[605,14159,14161,14163,14166,14168,14170,14172,14174,14176,14178],{"class":14160,"line":884},[607,641],[605,14162,5693],{"class":610},[605,14164,14165],{"class":618},"normal-map",[605,14167,625],{"class":610},[605,14169,628],{"class":610},[605,14171,14149],{"class":651},[605,14173,1466],{"class":610},[605,14175,1893],{"class":791},[605,14177,1481],{"class":610},[605,14179,2987],{"class":610},[605,14181,14183,14185,14188,14190,14192,14194,14196,14198,14200],{"class":14182,"line":2952},[607,641],[605,14184,5693],{"class":610},[605,14186,14187],{"class":618},"roughness-map",[605,14189,625],{"class":610},[605,14191,628],{"class":610},[605,14193,14149],{"class":651},[605,14195,1466],{"class":610},[605,14197,792],{"class":791},[605,14199,1481],{"class":610},[605,14201,2987],{"class":610},[605,14203,14204],{"class":607,"line":2960},[605,14205,10816],{"class":610},[605,14207,14208,14210,14212],{"class":607,"line":2990},[605,14209,877],{"class":610},[605,14211,828],{"class":614},[605,14213,637],{"class":610},[605,14215,14216,14218,14220],{"class":607,"line":3007},[605,14217,700],{"class":610},[605,14219,718],{"class":614},[605,14221,637],{"class":610},[472,14223,14225],{"id":14224},"pbr-textures-example","PBR Textures Example",[582,14227,14228],{},"Here's a more advanced example showing how to load and apply PBR (Physically Based Rendering) textures to a material:",[594,14230,14233],{"className":596,"code":14231,"filename":14232,"language":601,"meta":544,"style":544},"\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",[586,14234,14235,14255,14278,14309,14328,14332,14337,14379,14414,14445,14449,14454,14464,14475,14486,14497,14508,14517,14521,14525,14530,14554,14558,14563,14594,14631,14636,14655,14659,14664,14683,14702,14721,14740,14759,14763,14768,14782,14797,14812,14817,14824,14829,14835,14856,14862,14869,14874,14895,14908,14934,14939,14946,14955,14960,14969,14988,14998,15035,15044,15078,15087,15096,15117,15175,15234,15254,15286,15295,15304],{"__ignoreMap":544},[605,14236,14237,14239,14241,14243,14245,14247,14249,14251,14253],{"class":607,"line":545},[605,14238,611],{"class":610},[605,14240,615],{"class":614},[605,14242,619],{"class":618},[605,14244,622],{"class":618},[605,14246,625],{"class":610},[605,14248,628],{"class":610},[605,14250,632],{"class":631},[605,14252,628],{"class":610},[605,14254,637],{"class":610},[605,14256,14257,14259,14261,14263,14265,14268,14270,14272,14274,14276],{"class":607,"line":546},[605,14258,645],{"class":644},[605,14260,648],{"class":610},[605,14262,683],{"class":651},[605,14264,655],{"class":610},[605,14266,14267],{"class":651}," vLightHelper",[605,14269,661],{"class":610},[605,14271,664],{"class":644},[605,14273,667],{"class":610},[605,14275,692],{"class":631},[605,14277,673],{"class":610},[605,14279,14280,14282,14284,14287,14289,14291,14293,14295,14297,14299,14301,14303,14305,14307],{"class":607,"line":676},[605,14281,645],{"class":644},[605,14283,648],{"class":610},[605,14285,14286],{"class":651}," Environment",[605,14288,655],{"class":610},[605,14290,658],{"class":651},[605,14292,655],{"class":610},[605,14294,10472],{"class":651},[605,14296,655],{"class":610},[605,14298,13987],{"class":651},[605,14300,661],{"class":610},[605,14302,664],{"class":644},[605,14304,667],{"class":610},[605,14306,670],{"class":631},[605,14308,673],{"class":610},[605,14310,14311,14313,14315,14318,14320,14322,14324,14326],{"class":607,"line":697},[605,14312,645],{"class":644},[605,14314,648],{"class":610},[605,14316,14317],{"class":651}," MeshStandardMaterial",[605,14319,661],{"class":610},[605,14321,664],{"class":644},[605,14323,667],{"class":610},[605,14325,2678],{"class":631},[605,14327,673],{"class":610},[605,14329,14330],{"class":607,"line":707},[605,14331,710],{"emptyLinePlaceholder":562},[605,14333,14334],{"class":607,"line":713},[605,14335,14336],{"class":1181},"// Load the 3D model\n",[605,14338,14339,14341,14343,14345,14347,14350,14352,14354,14356,14358,14360,14363,14365,14367,14369,14371,14373,14375,14377],{"class":607,"line":723},[605,14340,2689],{"class":618},[605,14342,648],{"class":610},[605,14344,10512],{"class":614},[605,14346,1190],{"class":610},[605,14348,14349],{"class":651}," model ",[605,14351,5544],{"class":610},[605,14353,2766],{"class":610},[605,14355,10472],{"class":2800},[605,14357,2970],{"class":651},[605,14359,5536],{"class":610},[605,14361,14362],{"class":631},"/blender-cube-draco.glb",[605,14364,5536],{"class":610},[605,14366,655],{"class":610},[605,14368,648],{"class":610},[605,14370,10933],{"class":614},[605,14372,1190],{"class":610},[605,14374,10938],{"class":3870},[605,14376,661],{"class":610},[605,14378,5539],{"class":651},[605,14380,14381,14383,14386,14388,14391,14393,14396,14398,14401,14403,14405,14407,14409,14411],{"class":607,"line":746},[605,14382,2689],{"class":618},[605,14384,14385],{"class":651}," cube ",[605,14387,625],{"class":610},[605,14389,14390],{"class":2800}," computed",[605,14392,2970],{"class":651},[605,14394,14395],{"class":610},"()",[605,14397,5501],{"class":618},[605,14399,14400],{"class":651}," model",[605,14402,1118],{"class":610},[605,14404,5496],{"class":651},[605,14406,10582],{"class":610},[605,14408,10982],{"class":651},[605,14410,10582],{"class":610},[605,14412,14413],{"class":651},"BlenderCube)\n",[605,14415,14416,14418,14420,14422,14424,14426,14428,14430,14432,14434,14436,14438,14440,14442],{"class":607,"line":758},[605,14417,2689],{"class":618},[605,14419,11204],{"class":651},[605,14421,625],{"class":610},[605,14423,14390],{"class":2800},[605,14425,2970],{"class":651},[605,14427,14395],{"class":610},[605,14429,5501],{"class":618},[605,14431,14400],{"class":651},[605,14433,1118],{"class":610},[605,14435,5496],{"class":651},[605,14437,10582],{"class":610},[605,14439,496],{"class":651},[605,14441,10582],{"class":610},[605,14443,14444],{"class":651},"Material)\n",[605,14446,14447],{"class":607,"line":768},[605,14448,710],{"emptyLinePlaceholder":562},[605,14450,14451],{"class":607,"line":773},[605,14452,14453],{"class":1181},"// Define texture paths\n",[605,14455,14456,14458,14460,14462],{"class":607,"line":799},[605,14457,2689],{"class":618},[605,14459,14013],{"class":651},[605,14461,625],{"class":610},[605,14463,14018],{"class":651},[605,14465,14466,14468,14471,14473],{"class":607,"line":599},[605,14467,14023],{"class":610},[605,14469,14470],{"class":631},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Color.jpg",[605,14472,5536],{"class":610},[605,14474,14031],{"class":610},[605,14476,14477,14479,14482,14484],{"class":607,"line":822},[605,14478,14023],{"class":610},[605,14480,14481],{"class":631},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_NormalGL.jpg",[605,14483,5536],{"class":610},[605,14485,14031],{"class":610},[605,14487,14488,14490,14493,14495],{"class":607,"line":833},[605,14489,14023],{"class":610},[605,14491,14492],{"class":631},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Roughness.jpg",[605,14494,5536],{"class":610},[605,14496,14031],{"class":610},[605,14498,14499,14501,14504,14506],{"class":607,"line":844},[605,14500,14023],{"class":610},[605,14502,14503],{"class":631},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Metalness.jpg",[605,14505,5536],{"class":610},[605,14507,14031],{"class":610},[605,14509,14510,14512,14515],{"class":607,"line":854},[605,14511,14023],{"class":610},[605,14513,14514],{"class":631},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Displacement.jpg",[605,14516,673],{"class":610},[605,14518,14519],{"class":607,"line":600},[605,14520,14056],{"class":651},[605,14522,14523],{"class":607,"line":874},[605,14524,710],{"emptyLinePlaceholder":562},[605,14526,14527],{"class":607,"line":884},[605,14528,14529],{"class":1181},"// Load all PBR textures at once\n",[605,14531,14532,14534,14536,14538,14540,14542,14544,14546,14548,14550,14552],{"class":607,"line":2952},[605,14533,2689],{"class":618},[605,14535,648],{"class":610},[605,14537,14075],{"class":651},[605,14539,655],{"class":610},[605,14541,13364],{"class":651},[605,14543,655],{"class":610},[605,14545,13369],{"class":651},[605,14547,5544],{"class":610},[605,14549,2766],{"class":610},[605,14551,13987],{"class":2800},[605,14553,14092],{"class":651},[605,14555,14556],{"class":607,"line":2960},[605,14557,710],{"emptyLinePlaceholder":562},[605,14559,14560],{"class":607,"line":2990},[605,14561,14562],{"class":1181},"// Apply textures to material when loaded\n",[605,14564,14565,14567,14570,14572,14575,14577,14580,14583,14585,14587,14590,14592],{"class":607,"line":3007},[605,14566,5485],{"class":2800},[605,14568,14569],{"class":651},"([material",[605,14571,655],{"class":610},[605,14573,14574],{"class":651}," textures]",[605,14576,655],{"class":610},[605,14578,14579],{"class":610}," ([",[605,14581,14582],{"class":5495},"modelMaterial",[605,14584,655],{"class":610},[605,14586,14075],{"class":5495},[605,14588,14589],{"class":610},"])",[605,14591,5501],{"class":618},[605,14593,1176],{"class":610},[605,14595,14596,14599,14601,14603,14606,14608,14610,14612,14614,14617,14620,14623,14625,14627,14629],{"class":607,"line":3022},[605,14597,14598],{"class":644},"  if",[605,14600,2713],{"class":614},[605,14602,14582],{"class":651},[605,14604,14605],{"class":610}," &&",[605,14607,14075],{"class":651},[605,14609,14605],{"class":610},[605,14611,14075],{"class":651},[605,14613,1118],{"class":610},[605,14615,14616],{"class":651},"length",[605,14618,14619],{"class":610}," ===",[605,14621,14622],{"class":651}," texturePaths",[605,14624,1118],{"class":610},[605,14626,14616],{"class":651},[605,14628,2748],{"class":614},[605,14630,2751],{"class":610},[605,14632,14633],{"class":607,"line":3047},[605,14634,14635],{"class":1181},"    // Cast to MeshStandardMaterial to access PBR properties\n",[605,14637,14638,14641,14644,14646,14649,14652],{"class":607,"line":2591},[605,14639,14640],{"class":618},"    const",[605,14642,14643],{"class":651}," pbrMaterial",[605,14645,2766],{"class":610},[605,14647,14648],{"class":651}," modelMaterial",[605,14650,14651],{"class":644}," as",[605,14653,14654],{"class":1172}," MeshStandardMaterial\n",[605,14656,14657],{"class":607,"line":3062},[605,14658,710],{"emptyLinePlaceholder":562},[605,14660,14661],{"class":607,"line":3092},[605,14662,14663],{"class":1181},"    // Apply textures\n",[605,14665,14666,14669,14671,14673,14675,14677,14679,14681],{"class":607,"line":3101},[605,14667,14668],{"class":651},"    pbrMaterial",[605,14670,1118],{"class":610},[605,14672,13426],{"class":651},[605,14674,2766],{"class":610},[605,14676,14075],{"class":651},[605,14678,1466],{"class":614},[605,14680,937],{"class":791},[605,14682,14056],{"class":614},[605,14684,14685,14687,14689,14692,14694,14696,14698,14700],{"class":607,"line":4207},[605,14686,14668],{"class":651},[605,14688,1118],{"class":610},[605,14690,14691],{"class":651},"normalMap",[605,14693,2766],{"class":610},[605,14695,14075],{"class":651},[605,14697,1466],{"class":614},[605,14699,1893],{"class":791},[605,14701,14056],{"class":614},[605,14703,14704,14706,14708,14711,14713,14715,14717,14719],{"class":607,"line":4212},[605,14705,14668],{"class":651},[605,14707,1118],{"class":610},[605,14709,14710],{"class":651},"roughnessMap",[605,14712,2766],{"class":610},[605,14714,14075],{"class":651},[605,14716,1466],{"class":614},[605,14718,792],{"class":791},[605,14720,14056],{"class":614},[605,14722,14723,14725,14727,14730,14732,14734,14736,14738],{"class":607,"line":4235},[605,14724,14668],{"class":651},[605,14726,1118],{"class":610},[605,14728,14729],{"class":651},"metalnessMap",[605,14731,2766],{"class":610},[605,14733,14075],{"class":651},[605,14735,1466],{"class":614},[605,14737,4160],{"class":791},[605,14739,14056],{"class":614},[605,14741,14742,14744,14746,14749,14751,14753,14755,14757],{"class":607,"line":4244},[605,14743,14668],{"class":651},[605,14745,1118],{"class":610},[605,14747,14748],{"class":651},"displacementMap",[605,14750,2766],{"class":610},[605,14752,14075],{"class":651},[605,14754,1466],{"class":614},[605,14756,3490],{"class":791},[605,14758,14056],{"class":614},[605,14760,14761],{"class":607,"line":4253},[605,14762,710],{"emptyLinePlaceholder":562},[605,14764,14765],{"class":607,"line":4262},[605,14766,14767],{"class":1181},"    // Set material properties\n",[605,14769,14770,14772,14774,14777,14779],{"class":607,"line":4271},[605,14771,14668],{"class":651},[605,14773,1118],{"class":610},[605,14775,14776],{"class":651},"displacementScale",[605,14778,2766],{"class":610},[605,14780,14781],{"class":791}," 0\n",[605,14783,14785,14787,14789,14792,14794],{"class":607,"line":14784},38,[605,14786,14668],{"class":651},[605,14788,1118],{"class":610},[605,14790,14791],{"class":651},"metalness",[605,14793,2766],{"class":610},[605,14795,14796],{"class":791}," 0.8\n",[605,14798,14800,14802,14804,14807,14809],{"class":607,"line":14799},39,[605,14801,14668],{"class":651},[605,14803,1118],{"class":610},[605,14805,14806],{"class":651},"roughness",[605,14808,2766],{"class":610},[605,14810,14811],{"class":791}," 0.2\n",[605,14813,14815],{"class":607,"line":14814},40,[605,14816,2825],{"class":610},[605,14818,14820,14822],{"class":607,"line":14819},41,[605,14821,5544],{"class":610},[605,14823,5539],{"class":651},[605,14825,14827],{"class":607,"line":14826},42,[605,14828,710],{"emptyLinePlaceholder":562},[605,14830,14832],{"class":607,"line":14831},43,[605,14833,14834],{"class":1181},"// Handle loading state and errors\n",[605,14836,14838,14840,14843,14845,14847,14850,14852,14854],{"class":607,"line":14837},44,[605,14839,5485],{"class":2800},[605,14841,14842],{"class":651},"(isLoading",[605,14844,655],{"class":610},[605,14846,2713],{"class":610},[605,14848,14849],{"class":5495},"_loading",[605,14851,4125],{"class":610},[605,14853,5501],{"class":618},[605,14855,1176],{"class":610},[605,14857,14859],{"class":607,"line":14858},45,[605,14860,14861],{"class":1181},"  // Handle loading state\n",[605,14863,14865,14867],{"class":607,"line":14864},46,[605,14866,5544],{"class":610},[605,14868,5539],{"class":651},[605,14870,14872],{"class":607,"line":14871},47,[605,14873,710],{"emptyLinePlaceholder":562},[605,14875,14877,14879,14882,14884,14886,14889,14891,14893],{"class":607,"line":14876},48,[605,14878,5485],{"class":2800},[605,14880,14881],{"class":651},"(error",[605,14883,655],{"class":610},[605,14885,2713],{"class":610},[605,14887,14888],{"class":5495},"errs",[605,14890,4125],{"class":610},[605,14892,5501],{"class":618},[605,14894,1176],{"class":610},[605,14896,14898,14900,14902,14904,14906],{"class":607,"line":14897},49,[605,14899,14598],{"class":644},[605,14901,2713],{"class":614},[605,14903,14888],{"class":651},[605,14905,2748],{"class":614},[605,14907,2751],{"class":610},[605,14909,14911,14914,14916,14918,14920,14922,14925,14927,14929,14932],{"class":607,"line":14910},50,[605,14912,14913],{"class":651},"    console",[605,14915,1118],{"class":610},[605,14917,13557],{"class":2800},[605,14919,2970],{"class":614},[605,14921,5536],{"class":610},[605,14923,14924],{"class":631},"Error loading textures:",[605,14926,5536],{"class":610},[605,14928,655],{"class":610},[605,14930,14931],{"class":651}," errs",[605,14933,5539],{"class":614},[605,14935,14937],{"class":607,"line":14936},51,[605,14938,2825],{"class":610},[605,14940,14942,14944],{"class":607,"line":14941},52,[605,14943,5544],{"class":610},[605,14945,5539],{"class":651},[605,14947,14949,14951,14953],{"class":607,"line":14948},53,[605,14950,700],{"class":610},[605,14952,615],{"class":614},[605,14954,637],{"class":610},[605,14956,14958],{"class":607,"line":14957},54,[605,14959,710],{"emptyLinePlaceholder":562},[605,14961,14963,14965,14967],{"class":607,"line":14962},55,[605,14964,611],{"class":610},[605,14966,718],{"class":614},[605,14968,637],{"class":610},[605,14970,14972,14974,14976,14978,14980,14982,14984,14986],{"class":607,"line":14971},56,[605,14973,726],{"class":610},[605,14975,729],{"class":614},[605,14977,732],{"class":618},[605,14979,625],{"class":610},[605,14981,628],{"class":610},[605,14983,3881],{"class":631},[605,14985,628],{"class":610},[605,14987,637],{"class":610},[605,14989,14991,14993,14996],{"class":607,"line":14990},57,[605,14992,749],{"class":610},[605,14994,14995],{"class":614},"Suspense",[605,14997,637],{"class":610},[605,14999,15001,15003,15005,15008,15010,15012,15015,15017,15020,15022,15025,15027,15029,15031,15033],{"class":607,"line":15000},58,[605,15002,825],{"class":610},[605,15004,347],{"class":614},[605,15006,15007],{"class":618}," preset",[605,15009,625],{"class":610},[605,15011,628],{"class":610},[605,15013,15014],{"class":631},"studio",[605,15016,628],{"class":610},[605,15018,15019],{"class":618}," background",[605,15021,781],{"class":610},[605,15023,15024],{"class":618},"blur",[605,15026,625],{"class":610},[605,15028,628],{"class":610},[605,15030,1893],{"class":791},[605,15032,628],{"class":610},[605,15034,755],{"class":610},[605,15036,15038,15040,15042],{"class":607,"line":15037},59,[605,15039,867],{"class":610},[605,15041,14995],{"class":614},[605,15043,637],{"class":610},[605,15045,15047,15049,15051,15053,15055,15057,15059,15061,15064,15066,15068,15070,15072,15074,15076],{"class":607,"line":15046},60,[605,15048,749],{"class":610},[605,15050,752],{"class":614},[605,15052,781],{"class":610},[605,15054,1459],{"class":618},[605,15056,625],{"class":610},[605,15058,628],{"class":610},[605,15060,1466],{"class":610},[605,15062,15063],{"class":791},"8",[605,15065,1471],{"class":610},[605,15067,15063],{"class":791},[605,15069,1471],{"class":610},[605,15071,15063],{"class":791},[605,15073,1481],{"class":610},[605,15075,628],{"class":610},[605,15077,755],{"class":610},[605,15079,15081,15083,15085],{"class":607,"line":15080},61,[605,15082,749],{"class":610},[605,15084,763],{"class":614},[605,15086,755],{"class":610},[605,15088,15090,15092,15094],{"class":607,"line":15089},62,[605,15091,749],{"class":610},[605,15093,3067],{"class":614},[605,15095,755],{"class":610},[605,15097,15099,15101,15103,15105,15107,15109,15111,15113,15115],{"class":607,"line":15098},63,[605,15100,749],{"class":610},[605,15102,3518],{"class":614},[605,15104,781],{"class":610},[605,15106,1886],{"class":618},[605,15108,625],{"class":610},[605,15110,628],{"class":610},[605,15112,792],{"class":791},[605,15114,628],{"class":610},[605,15116,755],{"class":610},[605,15118,15120,15122,15124,15127,15129,15131,15133,15135,15137,15139,15141,15143,15145,15147,15149,15151,15153,15155,15157,15159,15161,15163,15165,15167,15169,15171,15173],{"class":607,"line":15119},64,[605,15121,749],{"class":610},[605,15123,3539],{"class":614},[605,15125,15126],{"class":618}," v-light-helper",[605,15128,781],{"class":610},[605,15130,1459],{"class":618},[605,15132,625],{"class":610},[605,15134,628],{"class":610},[605,15136,1466],{"class":610},[605,15138,2396],{"class":791},[605,15140,1471],{"class":610},[605,15142,2396],{"class":791},[605,15144,1471],{"class":610},[605,15146,2396],{"class":791},[605,15148,1481],{"class":610},[605,15150,628],{"class":610},[605,15152,781],{"class":610},[605,15154,1886],{"class":618},[605,15156,625],{"class":610},[605,15158,628],{"class":610},[605,15160,1513],{"class":791},[605,15162,628],{"class":610},[605,15164,3978],{"class":618},[605,15166,625],{"class":610},[605,15168,628],{"class":610},[605,15170,2525],{"class":631},[605,15172,628],{"class":610},[605,15174,755],{"class":610},[605,15176,15178,15180,15182,15184,15186,15188,15190,15192,15195,15197,15199,15201,15203,15205,15207,15209,15211,15213,15215,15217,15219,15221,15223,15225,15227,15230,15232],{"class":607,"line":15177},65,[605,15179,749],{"class":610},[605,15181,3539],{"class":614},[605,15183,15126],{"class":618},[605,15185,781],{"class":610},[605,15187,1459],{"class":618},[605,15189,625],{"class":610},[605,15191,628],{"class":610},[605,15193,15194],{"class":610},"[-",[605,15196,2396],{"class":791},[605,15198,1471],{"class":610},[605,15200,792],{"class":791},[605,15202,1471],{"class":610},[605,15204,792],{"class":791},[605,15206,1481],{"class":610},[605,15208,628],{"class":610},[605,15210,781],{"class":610},[605,15212,1886],{"class":618},[605,15214,625],{"class":610},[605,15216,628],{"class":610},[605,15218,1513],{"class":791},[605,15220,628],{"class":610},[605,15222,3978],{"class":618},[605,15224,625],{"class":610},[605,15226,628],{"class":610},[605,15228,15229],{"class":631},"#0000ff",[605,15231,628],{"class":610},[605,15233,755],{"class":610},[605,15235,15237,15239,15241,15244,15246,15248,15250,15252],{"class":607,"line":15236},66,[605,15238,749],{"class":610},[605,15240,3912],{"class":614},[605,15242,15243],{"class":618}," position-y",[605,15245,625],{"class":610},[605,15247,628],{"class":610},[605,15249,792],{"class":631},[605,15251,628],{"class":610},[605,15253,637],{"class":610},[605,15255,15257,15259,15261,15263,15265,15267,15270,15272,15274,15276,15278,15280,15282,15284],{"class":607,"line":15256},67,[605,15258,825],{"class":610},[605,15260,10558],{"class":614},[605,15262,10561],{"class":644},[605,15264,625],{"class":610},[605,15266,628],{"class":610},[605,15268,15269],{"class":651},"cube",[605,15271,628],{"class":610},[605,15273,781],{"class":610},[605,15275,9802],{"class":618},[605,15277,625],{"class":610},[605,15279,628],{"class":610},[605,15281,15269],{"class":651},[605,15283,628],{"class":610},[605,15285,755],{"class":610},[605,15287,15289,15291,15293],{"class":607,"line":15288},68,[605,15290,867],{"class":610},[605,15292,3912],{"class":614},[605,15294,637],{"class":610},[605,15296,15298,15300,15302],{"class":607,"line":15297},69,[605,15299,877],{"class":610},[605,15301,729],{"class":614},[605,15303,637],{"class":610},[605,15305,15307,15309,15311],{"class":607,"line":15306},70,[605,15308,700],{"class":610},[605,15310,718],{"class":614},[605,15312,637],{"class":610},[472,15314,15316],{"id":15315},"api","API",[7473,15318,15320],{"id":15319},"parameters","Parameters",[899,15322,15323,15335],{},[902,15324,15325],{},[905,15326,15327,15329,15331,15333],{},[908,15328,3118],{"align":969},[908,15330,10957],{},[908,15332,916],{},[908,15334,913],{},[918,15336,15337],{},[905,15338,15339,15344,15349,15353],{},[923,15340,15341],{"align":969},[1673,15342,15343],{},"paths",[923,15345,15346],{},[586,15347,15348],{},"string[]",[923,15350,15351],{},[586,15352,1151],{},[923,15354,15355],{},"Array of paths to the textures.",[7473,15357,15359],{"id":15358},"returns","Returns",[899,15361,15362,15372],{},[902,15363,15364],{},[905,15365,15366,15368,15370],{},[908,15367,3118],{"align":969},[908,15369,10957],{},[908,15371,913],{},[918,15373,15374,15388,15401],{},[905,15375,15376,15380,15385],{},[923,15377,15378],{"align":969},[1673,15379,14149],{},[923,15381,15382],{},[586,15383,15384],{},"Texture[]",[923,15386,15387],{},"Array of loaded textures.",[905,15389,15390,15394,15398],{},[923,15391,15392],{"align":969},[1673,15393,11009],{},[923,15395,15396],{},[586,15397,11014],{},[923,15399,15400],{},"Whether any textures are still loading.",[905,15402,15403,15407,15412],{},[923,15404,15405],{"align":969},[1673,15406,13557],{},[923,15408,15409],{},[586,15410,15411],{},"Error[] | null",[923,15413,15414],{},"Array of errors if any occurred during loading.",[472,15416,15418],{"id":15417},"benefits","Benefits",[3136,15420,15421,15427,15433,15439],{},[3139,15422,15423,15426],{},[1673,15424,15425],{},"Simplified API",": Load multiple textures with a single function call",[3139,15428,15429,15432],{},[1673,15430,15431],{},"Consolidated loading state",": Track loading state for all textures at once",[3139,15434,15435,15438],{},[1673,15436,15437],{},"Unified error handling",": Collect and report errors from all texture loads",[3139,15440,15441,15444],{},[1673,15442,15443],{},"Type safety",": Proper TypeScript typing throughout the implementation",[1299,15446,15447],{},"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":544,"searchDepth":545,"depth":546,"links":15449},[15450,15451,15452,15456],{"id":592,"depth":546,"text":15},{"id":14224,"depth":546,"text":14225},{"id":15315,"depth":546,"text":15316,"children":15453},[15454,15455],{"id":15319,"depth":676,"text":15320},{"id":15358,"depth":676,"text":15359},{"id":15417,"depth":546,"text":15418},"A composable to load multiple textures efficiently in TresJS scenes.",{},{"title":137,"description":15457},"WrWGJIG_1cK0m2DKL7QXohJNrBA2FWZW9ObKYdLG0UU",{"id":15462,"title":141,"body":15463,"description":18473,"extension":559,"links":560,"meta":18474,"navigation":562,"path":142,"seo":18475,"stem":143,"__hash__":18476},"docs/2.api/3.loaders/7.use-svg.md",{"type":469,"value":15464,"toc":18448},[15465,15470,15483,15487,15492,15494,16020,16025,16039,16043,16046,16158,16160,16230,16232,16341,16345,16350,16408,16413,16750,16754,16759,16765,16770,16776,16793,16799,16814,16861,16864,16869,16880,16885,16888,16933,16937,16942,16945,16950,16959,17004,17008,17013,17025,17030,17072,17076,17079,17207,17211,17215,17539,17543,17865,17869,17876,18089,18091,18257,18261,18268,18271,18275,18285,18289,18313,18321,18334,18338,18365,18369,18389,18399,18407,18424,18431,18445],[2558,15466,15467],{},[15468,15469],"loaders-use-svg",{},[582,15471,15472,15473,15475,15476,15478,15479,15482],{},"Load and display SVG elements in your ",[1673,15474,10429],{}," scene. This guide covers both the ",[586,15477,141],{}," composable for advanced use cases and the ",[586,15480,15481],{},"SVG"," component for simple declarative rendering.",[472,15484,15486],{"id":15485},"usesvg-composable","useSVG Composable",[582,15488,2253,15489,15491],{},[586,15490,141],{}," composable provides direct access to processed SVG layers, giving you full control over the resulting geometries and materials.",[7473,15493,15],{"id":592},[10434,15495,15496,15827],{},[594,15497,15500],{"className":596,"code":15498,"filename":10439,"highlights":15499,"language":601,"meta":544,"style":544},"\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",[546,707,713,723,746],[586,15501,15502,15522,15542,15546,15562,15598,15611,15641,15648,15656,15660,15668,15689,15695,15720,15742,15761,15776,15780,15803,15811,15819],{"__ignoreMap":544},[605,15503,15504,15506,15508,15510,15512,15514,15516,15518,15520],{"class":607,"line":545},[605,15505,611],{"class":610},[605,15507,615],{"class":614},[605,15509,619],{"class":618},[605,15511,622],{"class":618},[605,15513,625],{"class":610},[605,15515,628],{"class":610},[605,15517,632],{"class":631},[605,15519,628],{"class":610},[605,15521,637],{"class":610},[605,15523,15525,15527,15529,15532,15534,15536,15538,15540],{"class":15524,"line":546},[607,641],[605,15526,645],{"class":644},[605,15528,648],{"class":610},[605,15530,15531],{"class":651}," useSVG",[605,15533,661],{"class":610},[605,15535,664],{"class":644},[605,15537,667],{"class":610},[605,15539,670],{"class":631},[605,15541,673],{"class":610},[605,15543,15544],{"class":607,"line":676},[605,15545,710],{"emptyLinePlaceholder":562},[605,15547,15548,15550,15553,15555,15557,15560],{"class":607,"line":697},[605,15549,2689],{"class":618},[605,15551,15552],{"class":651}," svgPath ",[605,15554,625],{"class":610},[605,15556,667],{"class":610},[605,15558,15559],{"class":631},"./logo.svg",[605,15561,673],{"class":610},[605,15563,15565,15567,15569,15571,15573,15576,15578,15580,15582,15585,15587,15589,15591,15594,15596],{"class":15564,"line":707},[607,641],[605,15566,2689],{"class":618},[605,15568,648],{"class":610},[605,15570,10512],{"class":651},[605,15572,655],{"class":610},[605,15574,15575],{"class":651}," layers",[605,15577,655],{"class":610},[605,15579,13364],{"class":651},[605,15581,655],{"class":610},[605,15583,15584],{"class":651}," dispose ",[605,15586,5544],{"class":610},[605,15588,2766],{"class":610},[605,15590,15531],{"class":2800},[605,15592,15593],{"class":651},"(svgPath",[605,15595,655],{"class":610},[605,15597,1176],{"class":610},[605,15599,15601,15604,15606,15609],{"class":15600,"line":713},[607,641],[605,15602,15603],{"class":614},"  skipFills",[605,15605,1190],{"class":610},[605,15607,15608],{"class":3870}," false",[605,15610,14031],{"class":610},[605,15612,15614,15617,15619,15621,15624,15626,15628,15630,15633,15635,15638],{"class":15613,"line":723},[607,641],[605,15615,15616],{"class":614},"  fillMaterial",[605,15618,1190],{"class":610},[605,15620,648],{"class":610},[605,15622,15623],{"class":614}," transparent",[605,15625,1190],{"class":610},[605,15627,10938],{"class":3870},[605,15629,655],{"class":610},[605,15631,15632],{"class":614}," opacity",[605,15634,1190],{"class":610},[605,15636,15637],{"class":791}," 0.8",[605,15639,15640],{"class":610}," }\n",[605,15642,15644,15646],{"class":15643,"line":746},[607,641],[605,15645,5544],{"class":610},[605,15647,5539],{"class":651},[605,15649,15650,15652,15654],{"class":607,"line":758},[605,15651,700],{"class":610},[605,15653,615],{"class":614},[605,15655,637],{"class":610},[605,15657,15658],{"class":607,"line":768},[605,15659,710],{"emptyLinePlaceholder":562},[605,15661,15662,15664,15666],{"class":607,"line":773},[605,15663,611],{"class":610},[605,15665,718],{"class":614},[605,15667,637],{"class":610},[605,15669,15670,15672,15674,15676,15678,15680,15683,15685,15687],{"class":607,"line":799},[605,15671,726],{"class":610},[605,15673,3912],{"class":614},[605,15675,10561],{"class":644},[605,15677,625],{"class":610},[605,15679,628],{"class":610},[605,15681,15682],{"class":610},"!",[605,15684,11009],{"class":651},[605,15686,628],{"class":610},[605,15688,637],{"class":610},[605,15690,15691,15693],{"class":607,"line":599},[605,15692,749],{"class":610},[605,15694,2957],{"class":614},[605,15696,15697,15700,15702,15704,15706,15709,15711,15713,15715,15718],{"class":607,"line":822},[605,15698,15699],{"class":644},"      v-for",[605,15701,625],{"class":610},[605,15703,628],{"class":610},[605,15705,2970],{"class":610},[605,15707,15708],{"class":651},"layer",[605,15710,1471],{"class":610},[605,15712,2978],{"class":651},[605,15714,2981],{"class":610},[605,15716,15717],{"class":651},"layers",[605,15719,2987],{"class":610},[605,15721,15722,15724,15726,15728,15731,15734,15737,15739],{"class":607,"line":833},[605,15723,5693],{"class":610},[605,15725,2996],{"class":618},[605,15727,625],{"class":610},[605,15729,15730],{"class":610},"\"`",[605,15732,15733],{"class":631},"layer-",[605,15735,15736],{"class":610},"${",[605,15738,2978],{"class":651},[605,15740,15741],{"class":610},"}`\"\n",[605,15743,15744,15746,15749,15751,15753,15755,15757,15759],{"class":607,"line":844},[605,15745,5693],{"class":610},[605,15747,15748],{"class":618},"geometry",[605,15750,625],{"class":610},[605,15752,628],{"class":610},[605,15754,15708],{"class":651},[605,15756,1118],{"class":610},[605,15758,15748],{"class":651},[605,15760,2987],{"class":610},[605,15762,15763,15765,15768,15770,15772,15774],{"class":607,"line":854},[605,15764,5693],{"class":610},[605,15766,15767],{"class":618},"render-order",[605,15769,625],{"class":610},[605,15771,628],{"class":610},[605,15773,2978],{"class":651},[605,15775,2987],{"class":610},[605,15777,15778],{"class":607,"line":600},[605,15779,5713],{"class":610},[605,15781,15782,15784,15786,15788,15790,15792,15794,15796,15799,15801],{"class":607,"line":874},[605,15783,825],{"class":610},[605,15785,2425],{"class":614},[605,15787,4111],{"class":618},[605,15789,625],{"class":610},[605,15791,628],{"class":610},[605,15793,15708],{"class":651},[605,15795,1118],{"class":610},[605,15797,15798],{"class":651},"material",[605,15800,628],{"class":610},[605,15802,755],{"class":610},[605,15804,15805,15807,15809],{"class":607,"line":884},[605,15806,867],{"class":610},[605,15808,828],{"class":614},[605,15810,637],{"class":610},[605,15812,15813,15815,15817],{"class":607,"line":2952},[605,15814,877],{"class":610},[605,15816,3912],{"class":614},[605,15818,637],{"class":610},[605,15820,15821,15823,15825],{"class":607,"line":2960},[605,15822,700],{"class":610},[605,15824,718],{"class":614},[605,15826,637],{"class":610},[594,15828,15830],{"className":596,"code":15829,"filename":10601,"language":601,"meta":544,"style":544},"\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",[586,15831,15832,15852,15870,15888,15902,15910,15914,15922,15940,15972,15980,15988,15996,16004,16012],{"__ignoreMap":544},[605,15833,15834,15836,15838,15840,15842,15844,15846,15848,15850],{"class":607,"line":545},[605,15835,611],{"class":610},[605,15837,615],{"class":614},[605,15839,619],{"class":618},[605,15841,622],{"class":618},[605,15843,625],{"class":610},[605,15845,628],{"class":610},[605,15847,632],{"class":631},[605,15849,628],{"class":610},[605,15851,637],{"class":610},[605,15853,15854,15856,15858,15860,15862,15864,15866,15868],{"class":607,"line":546},[605,15855,645],{"class":644},[605,15857,648],{"class":610},[605,15859,658],{"class":651},[605,15861,661],{"class":610},[605,15863,664],{"class":644},[605,15865,667],{"class":610},[605,15867,670],{"class":631},[605,15869,673],{"class":610},[605,15871,15872,15874,15876,15878,15880,15882,15884,15886],{"class":607,"line":676},[605,15873,645],{"class":644},[605,15875,648],{"class":610},[605,15877,683],{"class":651},[605,15879,661],{"class":610},[605,15881,664],{"class":644},[605,15883,667],{"class":610},[605,15885,692],{"class":631},[605,15887,673],{"class":610},[605,15889,15890,15892,15894,15896,15898,15900],{"class":607,"line":697},[605,15891,645],{"class":644},[605,15893,10666],{"class":651},[605,15895,10669],{"class":644},[605,15897,667],{"class":610},[605,15899,10674],{"class":631},[605,15901,673],{"class":610},[605,15903,15904,15906,15908],{"class":607,"line":707},[605,15905,700],{"class":610},[605,15907,615],{"class":614},[605,15909,637],{"class":610},[605,15911,15912],{"class":607,"line":713},[605,15913,710],{"emptyLinePlaceholder":562},[605,15915,15916,15918,15920],{"class":607,"line":723},[605,15917,611],{"class":610},[605,15919,718],{"class":614},[605,15921,637],{"class":610},[605,15923,15924,15926,15928,15930,15932,15934,15936,15938],{"class":607,"line":746},[605,15925,726],{"class":610},[605,15927,729],{"class":614},[605,15929,732],{"class":618},[605,15931,625],{"class":610},[605,15933,628],{"class":610},[605,15935,6322],{"class":631},[605,15937,628],{"class":610},[605,15939,637],{"class":610},[605,15941,15942,15944,15946,15948,15950,15952,15954,15956,15958,15960,15962,15964,15966,15968,15970],{"class":607,"line":758},[605,15943,749],{"class":610},[605,15945,752],{"class":614},[605,15947,781],{"class":610},[605,15949,1459],{"class":618},[605,15951,625],{"class":610},[605,15953,628],{"class":610},[605,15955,1466],{"class":610},[605,15957,937],{"class":791},[605,15959,1471],{"class":610},[605,15961,792],{"class":791},[605,15963,1471],{"class":610},[605,15965,1478],{"class":791},[605,15967,1481],{"class":610},[605,15969,628],{"class":610},[605,15971,755],{"class":610},[605,15973,15974,15976,15978],{"class":607,"line":768},[605,15975,749],{"class":610},[605,15977,763],{"class":614},[605,15979,755],{"class":610},[605,15981,15982,15984,15986],{"class":607,"line":773},[605,15983,749],{"class":610},[605,15985,10762],{"class":614},[605,15987,755],{"class":610},[605,15989,15990,15992,15994],{"class":607,"line":799},[605,15991,749],{"class":610},[605,15993,3518],{"class":614},[605,15995,755],{"class":610},[605,15997,15998,16000,16002],{"class":607,"line":599},[605,15999,749],{"class":610},[605,16001,3539],{"class":614},[605,16003,755],{"class":610},[605,16005,16006,16008,16010],{"class":607,"line":822},[605,16007,877],{"class":610},[605,16009,729],{"class":614},[605,16011,637],{"class":610},[605,16013,16014,16016,16018],{"class":607,"line":833},[605,16015,700],{"class":610},[605,16017,718],{"class":614},[605,16019,637],{"class":610},[582,16021,2253,16022,16024],{},[586,16023,141],{}," 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:",[3136,16026,16027,16030,16033,16036],{},[3139,16028,16029],{},"Manually control layer rendering",[3139,16031,16032],{},"Apply custom animations to individual layers",[3139,16034,16035],{},"Access geometry data programmatically",[3139,16037,16038],{},"Implement complex material logic",[7473,16040,16042],{"id":16041},"svg-data-sources","SVG Data Sources",[582,16044,16045],{},"The composable accepts both file paths and inline SVG strings:",[594,16047,16049],{"className":1158,"code":16048,"language":632,"meta":544,"style":544},"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",[586,16050,16051,16069,16073,16078,16104,16108,16113,16128,16133,16141],{"__ignoreMap":544},[605,16052,16053,16055,16057,16059,16061,16063,16065,16067],{"class":607,"line":545},[605,16054,645],{"class":644},[605,16056,648],{"class":610},[605,16058,15531],{"class":651},[605,16060,661],{"class":610},[605,16062,664],{"class":644},[605,16064,667],{"class":610},[605,16066,670],{"class":631},[605,16068,673],{"class":610},[605,16070,16071],{"class":607,"line":546},[605,16072,710],{"emptyLinePlaceholder":562},[605,16074,16075],{"class":607,"line":676},[605,16076,16077],{"class":1181},"// From file\n",[605,16079,16080,16082,16084,16087,16089,16091,16093,16095,16097,16100,16102],{"class":607,"line":697},[605,16081,2689],{"class":618},[605,16083,648],{"class":610},[605,16085,16086],{"class":651}," layers ",[605,16088,5544],{"class":610},[605,16090,2766],{"class":610},[605,16092,15531],{"class":2800},[605,16094,2970],{"class":651},[605,16096,5536],{"class":610},[605,16098,16099],{"class":631},"/path/to/file.svg",[605,16101,5536],{"class":610},[605,16103,5539],{"class":651},[605,16105,16106],{"class":607,"line":707},[605,16107,710],{"emptyLinePlaceholder":562},[605,16109,16110],{"class":607,"line":713},[605,16111,16112],{"class":1181},"// Inline SVG string\n",[605,16114,16115,16117,16120,16122,16125],{"class":607,"line":723},[605,16116,2689],{"class":618},[605,16118,16119],{"class":651}," svgString ",[605,16121,625],{"class":610},[605,16123,16124],{"class":610}," `",[605,16126,16127],{"class":631},"\u003Csvg viewBox=\"0 0 100 100\">\n",[605,16129,16130],{"class":607,"line":746},[605,16131,16132],{"class":631},"  \u003Ccircle cx=\"50\" cy=\"50\" r=\"40\" fill=\"red\" />\n",[605,16134,16135,16138],{"class":607,"line":758},[605,16136,16137],{"class":631},"\u003C/svg>",[605,16139,16140],{"class":610},"`\n",[605,16142,16143,16145,16147,16149,16151,16153,16155],{"class":607,"line":768},[605,16144,2689],{"class":618},[605,16146,648],{"class":610},[605,16148,16086],{"class":651},[605,16150,5544],{"class":610},[605,16152,2766],{"class":610},[605,16154,15531],{"class":2800},[605,16156,16157],{"class":651},"(svgString)\n",[7473,16159,10946],{"id":10945},[899,16161,16162,16172],{},[902,16163,16164],{},[905,16165,16166,16168,16170],{},[908,16167,3118],{"align":969},[908,16169,10957],{},[908,16171,913],{},[918,16173,16174,16188,16202,16215],{},[905,16175,16176,16180,16185],{},[923,16177,16178],{"align":969},[1673,16179,8177],{},[923,16181,16182],{},[586,16183,16184],{},"SVGResult",[923,16186,16187],{},"The loaded SVG state from SVGLoader",[905,16189,16190,16194,16199],{},[923,16191,16192],{"align":969},[1673,16193,15717],{},[923,16195,16196],{},[586,16197,16198],{},"SVGLayer[]",[923,16200,16201],{},"Computed array of processed geometries and materials",[905,16203,16204,16208,16212],{},[923,16205,16206],{"align":969},[1673,16207,11009],{},[923,16209,16210],{},[586,16211,11014],{},[923,16213,16214],{},"Whether the SVG is currently loading",[905,16216,16217,16222,16227],{},[923,16218,16219],{"align":969},[1673,16220,16221],{},"dispose",[923,16223,16224],{},[586,16225,16226],{},"() => void",[923,16228,16229],{},"Function to dispose of all geometries",[7473,16231,7487],{"id":11049},[899,16233,16234,16246],{},[902,16235,16236],{},[905,16237,16238,16240,16242,16244],{},[908,16239,3118],{"align":969},[908,16241,10957],{},[908,16243,916],{},[908,16245,913],{},[918,16247,16248,16266,16284,16304,16322],{},[905,16249,16250,16255,16259,16263],{},[923,16251,16252],{"align":969},[1673,16253,16254],{},"skipStrokes",[923,16256,16257],{},[586,16258,11014],{},[923,16260,16261],{},[586,16262,943],{},[923,16264,16265],{},"Whether to skip rendering strokes",[905,16267,16268,16273,16277,16281],{},[923,16269,16270],{"align":969},[1673,16271,16272],{},"skipFills",[923,16274,16275],{},[586,16276,11014],{},[923,16278,16279],{},[586,16280,943],{},[923,16282,16283],{},"Whether to skip rendering fills",[905,16285,16286,16291,16296,16301],{},[923,16287,16288],{"align":969},[1673,16289,16290],{},"fillMaterial",[923,16292,16293],{},[586,16294,16295],{},"MeshBasicMaterialParameters",[923,16297,16298],{},[586,16299,16300],{},"{}",[923,16302,16303],{},"Material properties for fill layers",[905,16305,16306,16311,16315,16319],{},[923,16307,16308],{"align":969},[1673,16309,16310],{},"strokeMaterial",[923,16312,16313],{},[586,16314,16295],{},[923,16316,16317],{},[586,16318,16300],{},[923,16320,16321],{},"Material properties for stroke layers",[905,16323,16324,16328,16333,16338],{},[923,16325,16326],{"align":969},[1673,16327,6358],{},[923,16329,16330],{},[586,16331,16332],{},"'renderOrder' | 'flat' | 'offsetZ' | number",[923,16334,16335],{},[586,16336,16337],{},"'renderOrder'",[923,16339,16340],{},"How layers should be rendered in 3D space",[7473,16342,16344],{"id":16343},"working-with-layers","Working with Layers",[582,16346,2253,16347,16349],{},[586,16348,15717],{}," computed property returns an array of processed SVG elements, each containing:",[594,16351,16353],{"className":1158,"code":16352,"language":632,"meta":544,"style":544},"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",[586,16354,16355,16365,16378,16391,16404],{"__ignoreMap":544},[605,16356,16357,16360,16363],{"class":607,"line":545},[605,16358,16359],{"class":618},"interface",[605,16361,16362],{"class":1172}," SVGLayer",[605,16364,1176],{"class":610},[605,16366,16367,16370,16372,16375],{"class":607,"line":546},[605,16368,16369],{"class":614},"  geometry",[605,16371,1190],{"class":610},[605,16373,16374],{"class":1172}," BufferGeometry",[605,16376,16377],{"class":1181}," // Three.js geometry for the layer\n",[605,16379,16380,16383,16385,16388],{"class":607,"line":676},[605,16381,16382],{"class":614},"  material",[605,16384,1190],{"class":610},[605,16386,16387],{"class":1172}," MeshBasicMaterialParameters",[605,16389,16390],{"class":1181}," // Material properties\n",[605,16392,16393,16396,16398,16401],{"class":607,"line":697},[605,16394,16395],{"class":614},"  isStroke",[605,16397,1190],{"class":610},[605,16399,16400],{"class":1172}," boolean",[605,16402,16403],{"class":1181}," // Whether this layer is a stroke or fill\n",[605,16405,16406],{"class":607,"line":707},[605,16407,1297],{"class":610},[16409,16410,16412],"h4",{"id":16411},"accessing-individual-layers","Accessing Individual Layers",[594,16414,16417],{"className":596,"code":16415,"highlights":16416,"language":601,"meta":544,"style":544},"\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",[546,697],[586,16418,16419,16439,16458,16462,16488,16492,16497,16529,16577,16581,16589,16593,16601,16609,16615,16637,16651,16669,16673,16680,16697,16722,16726,16734,16742],{"__ignoreMap":544},[605,16420,16421,16423,16425,16427,16429,16431,16433,16435,16437],{"class":607,"line":545},[605,16422,611],{"class":610},[605,16424,615],{"class":614},[605,16426,619],{"class":618},[605,16428,622],{"class":618},[605,16430,625],{"class":610},[605,16432,628],{"class":610},[605,16434,632],{"class":631},[605,16436,628],{"class":610},[605,16438,637],{"class":610},[605,16440,16442,16444,16446,16448,16450,16452,16454,16456],{"class":16441,"line":546},[607,641],[605,16443,645],{"class":644},[605,16445,648],{"class":610},[605,16447,15531],{"class":651},[605,16449,661],{"class":610},[605,16451,664],{"class":644},[605,16453,667],{"class":610},[605,16455,670],{"class":631},[605,16457,673],{"class":610},[605,16459,16460],{"class":607,"line":676},[605,16461,710],{"emptyLinePlaceholder":562},[605,16463,16465,16467,16469,16471,16473,16475,16477,16479,16481,16484,16486],{"class":16464,"line":697},[607,641],[605,16466,2689],{"class":618},[605,16468,648],{"class":610},[605,16470,16086],{"class":651},[605,16472,5544],{"class":610},[605,16474,2766],{"class":610},[605,16476,15531],{"class":2800},[605,16478,2970],{"class":651},[605,16480,5536],{"class":610},[605,16482,16483],{"class":631},"/complex-icon.svg",[605,16485,5536],{"class":610},[605,16487,5539],{"class":651},[605,16489,16490],{"class":607,"line":707},[605,16491,710],{"emptyLinePlaceholder":562},[605,16493,16494],{"class":607,"line":713},[605,16495,16496],{"class":1181},"// Apply different materials based on layer type\n",[605,16498,16499,16501,16504,16506,16508,16510,16512,16514,16516,16519,16521,16523,16525,16527],{"class":607,"line":723},[605,16500,2689],{"class":618},[605,16502,16503],{"class":651}," getFillColor ",[605,16505,625],{"class":610},[605,16507,2713],{"class":610},[605,16509,15708],{"class":5495},[605,16511,1190],{"class":610},[605,16513,16362],{"class":1172},[605,16515,655],{"class":610},[605,16517,16518],{"class":5495}," index",[605,16520,1190],{"class":610},[605,16522,2697],{"class":1172},[605,16524,4125],{"class":610},[605,16526,5501],{"class":618},[605,16528,1176],{"class":610},[605,16530,16531,16534,16537,16539,16542,16545,16547,16550,16552,16554,16556,16559,16561,16564,16567,16570,16572,16575],{"class":607,"line":746},[605,16532,16533],{"class":644},"  return",[605,16535,16536],{"class":651}," layer",[605,16538,1118],{"class":610},[605,16540,16541],{"class":651},"isStroke",[605,16543,16544],{"class":610}," ?",[605,16546,667],{"class":610},[605,16548,16549],{"class":631},"#000000",[605,16551,5536],{"class":610},[605,16553,781],{"class":610},[605,16555,16124],{"class":610},[605,16557,16558],{"class":631},"hsl(",[605,16560,15736],{"class":610},[605,16562,16563],{"class":651},"index ",[605,16565,16566],{"class":610},"*",[605,16568,16569],{"class":791}," 30",[605,16571,5544],{"class":610},[605,16573,16574],{"class":631},", 70%, 50%)",[605,16576,16140],{"class":610},[605,16578,16579],{"class":607,"line":758},[605,16580,1297],{"class":610},[605,16582,16583,16585,16587],{"class":607,"line":768},[605,16584,700],{"class":610},[605,16586,615],{"class":614},[605,16588,637],{"class":610},[605,16590,16591],{"class":607,"line":773},[605,16592,710],{"emptyLinePlaceholder":562},[605,16594,16595,16597,16599],{"class":607,"line":799},[605,16596,611],{"class":610},[605,16598,718],{"class":614},[605,16600,637],{"class":610},[605,16602,16603,16605,16607],{"class":607,"line":599},[605,16604,726],{"class":610},[605,16606,3912],{"class":614},[605,16608,637],{"class":610},[605,16610,16611,16613],{"class":607,"line":822},[605,16612,749],{"class":610},[605,16614,2957],{"class":614},[605,16616,16617,16619,16621,16623,16625,16627,16629,16631,16633,16635],{"class":607,"line":833},[605,16618,15699],{"class":644},[605,16620,625],{"class":610},[605,16622,628],{"class":610},[605,16624,2970],{"class":610},[605,16626,15708],{"class":651},[605,16628,1471],{"class":610},[605,16630,2978],{"class":651},[605,16632,2981],{"class":610},[605,16634,15717],{"class":651},[605,16636,2987],{"class":610},[605,16638,16639,16641,16643,16645,16647,16649],{"class":607,"line":844},[605,16640,5693],{"class":610},[605,16642,2996],{"class":618},[605,16644,625],{"class":610},[605,16646,628],{"class":610},[605,16648,2978],{"class":651},[605,16650,2987],{"class":610},[605,16652,16653,16655,16657,16659,16661,16663,16665,16667],{"class":607,"line":854},[605,16654,5693],{"class":610},[605,16656,15748],{"class":618},[605,16658,625],{"class":610},[605,16660,628],{"class":610},[605,16662,15708],{"class":651},[605,16664,1118],{"class":610},[605,16666,15748],{"class":651},[605,16668,2987],{"class":610},[605,16670,16671],{"class":607,"line":600},[605,16672,5713],{"class":610},[605,16674,16675,16677],{"class":607,"line":874},[605,16676,825],{"class":610},[605,16678,16679],{"class":614},"TresMeshBasicMaterial\n",[605,16681,16682,16685,16687,16689,16691,16693,16695],{"class":607,"line":884},[605,16683,16684],{"class":618},"        v-bind",[605,16686,625],{"class":610},[605,16688,628],{"class":610},[605,16690,15708],{"class":651},[605,16692,1118],{"class":610},[605,16694,15798],{"class":651},[605,16696,2987],{"class":610},[605,16698,16699,16701,16703,16705,16707,16710,16712,16714,16716,16718,16720],{"class":607,"line":2952},[605,16700,2993],{"class":610},[605,16702,2500],{"class":618},[605,16704,625],{"class":610},[605,16706,628],{"class":610},[605,16708,16709],{"class":2800},"getFillColor",[605,16711,2970],{"class":610},[605,16713,15708],{"class":651},[605,16715,1471],{"class":610},[605,16717,2978],{"class":651},[605,16719,4125],{"class":610},[605,16721,2987],{"class":610},[605,16723,16724],{"class":607,"line":2960},[605,16725,3050],{"class":610},[605,16727,16728,16730,16732],{"class":607,"line":2990},[605,16729,867],{"class":610},[605,16731,828],{"class":614},[605,16733,637],{"class":610},[605,16735,16736,16738,16740],{"class":607,"line":3007},[605,16737,877],{"class":610},[605,16739,3912],{"class":614},[605,16741,637],{"class":610},[605,16743,16744,16746,16748],{"class":607,"line":3022},[605,16745,700],{"class":610},[605,16747,718],{"class":614},[605,16749,637],{"class":610},[7473,16751,16753],{"id":16752},"depth-handling","Depth Handling",[582,16755,2253,16756,16758],{},[586,16757,6358],{}," option controls how SVG layers are rendered in 3D space. It accepts the following values:",[16409,16760,16762,16764],{"id":16761},"renderorder-default",[586,16763,16337],{}," (Default)",[582,16766,16767],{},[1673,16768,16769],{},"Use case: Lone SVGs or applications that don't rely on stacked SVGs",[582,16771,16772,16773,16775],{},"This is the default ",[586,16774,6358],{}," option.",[582,16777,16778,16779,16781,16782,16784,16785,16792],{},"This value sets the materials' ",[586,16780,4334],{}," to ",[586,16783,943],{}," and increments the mesh layers ",[1112,16786,16789],{"href":16787,"rel":16788},"https://threejs.org/docs/?q=mesh#api/en/core/Object3D.renderOrder",[1116],[586,16790,16791],{},"renderOrder",". This makes the SVG layers render dependably regardless of perspective.",[582,16794,16795,16798],{},[1673,16796,16797],{},"Disadvantage",": Scene objects may render out of order.",[582,16800,16801,16802,16807,16808,16813],{},"SVG layers with higher ",[1112,16803,16805],{"href":16787,"rel":16804},[1116],[586,16806,16791],{}," will be rendered after (i.e., sometimes \"on top of\") other objects in the scene graph with a lower ",[1112,16809,16811],{"href":16787,"rel":16810},[1116],[586,16812,16791],{},". Depending on their settings, those other objects may render behind the SVG, even if they are closer to the camera.",[594,16815,16817],{"className":1158,"code":16816,"language":632,"meta":544,"style":544},"const { layers } = useSVG('/icon.svg', { depth: 'renderOrder' })\n",[586,16818,16819],{"__ignoreMap":544},[605,16820,16821,16823,16825,16827,16829,16831,16833,16835,16837,16840,16842,16844,16846,16849,16851,16853,16855,16857,16859],{"class":607,"line":545},[605,16822,2689],{"class":618},[605,16824,648],{"class":610},[605,16826,16086],{"class":651},[605,16828,5544],{"class":610},[605,16830,2766],{"class":610},[605,16832,15531],{"class":2800},[605,16834,2970],{"class":651},[605,16836,5536],{"class":610},[605,16838,16839],{"class":631},"/icon.svg",[605,16841,5536],{"class":610},[605,16843,655],{"class":610},[605,16845,648],{"class":610},[605,16847,16848],{"class":614}," depth",[605,16850,1190],{"class":610},[605,16852,667],{"class":610},[605,16854,16791],{"class":631},[605,16856,5536],{"class":610},[605,16858,661],{"class":610},[605,16860,5539],{"class":651},[16409,16862,16863],{"id":16863},"flat",[582,16865,16866],{},[1673,16867,16868],{},"Use case: simple SVGs",[582,16870,16871,16872,16781,16878,1118],{},"This option sets the materials ",[1112,16873,16876],{"href":16874,"rel":16875},"https://threejs.org/docs/?q=mesh#api/en/materials/Material.depthWrite",[1116],[586,16877,4334],{},[586,16879,943],{},[582,16881,16882,16884],{},[1673,16883,16797],{},": SVG layers may render out of order.",[582,16886,16887],{},"Overlapping layers in an SVG may be drawn out of order, depending on viewing perspective.",[594,16889,16891],{"className":1158,"code":16890,"language":632,"meta":544,"style":544},"const { layers } = useSVG('/icon.svg', { depth: 'flat' })\n",[586,16892,16893],{"__ignoreMap":544},[605,16894,16895,16897,16899,16901,16903,16905,16907,16909,16911,16913,16915,16917,16919,16921,16923,16925,16927,16929,16931],{"class":607,"line":545},[605,16896,2689],{"class":618},[605,16898,648],{"class":610},[605,16900,16086],{"class":651},[605,16902,5544],{"class":610},[605,16904,2766],{"class":610},[605,16906,15531],{"class":2800},[605,16908,2970],{"class":651},[605,16910,5536],{"class":610},[605,16912,16839],{"class":631},[605,16914,5536],{"class":610},[605,16916,655],{"class":610},[605,16918,648],{"class":610},[605,16920,16848],{"class":614},[605,16922,1190],{"class":610},[605,16924,667],{"class":610},[605,16926,16863],{"class":631},[605,16928,5536],{"class":610},[605,16930,661],{"class":610},[605,16932,5539],{"class":651},[16409,16934,16936],{"id":16935},"offsetz","offsetZ",[582,16938,16939],{},[1673,16940,16941],{},"Use case: unscaled SVGs seen from the front",[582,16943,16944],{},"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\".",[582,16946,16947,16949],{},[1673,16948,16797],{},": \"Bottom\" of the \"stack\" is visible; layers may z-fight.",[582,16951,16952,16953,16958],{},"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 ",[1112,16954,16957],{"href":16955,"rel":16956},"https://en.wikipedia.org/wiki/Z-fighting",[1116],"z-fight",", particularly if the SVG is scaled down.",[594,16960,16962],{"className":1158,"code":16961,"language":632,"meta":544,"style":544},"const { layers } = useSVG('/icon.svg', { depth: 'offsetZ' })\n",[586,16963,16964],{"__ignoreMap":544},[605,16965,16966,16968,16970,16972,16974,16976,16978,16980,16982,16984,16986,16988,16990,16992,16994,16996,16998,17000,17002],{"class":607,"line":545},[605,16967,2689],{"class":618},[605,16969,648],{"class":610},[605,16971,16086],{"class":651},[605,16973,5544],{"class":610},[605,16975,2766],{"class":610},[605,16977,15531],{"class":2800},[605,16979,2970],{"class":651},[605,16981,5536],{"class":610},[605,16983,16839],{"class":631},[605,16985,5536],{"class":610},[605,16987,655],{"class":610},[605,16989,648],{"class":610},[605,16991,16848],{"class":614},[605,16993,1190],{"class":610},[605,16995,667],{"class":610},[605,16997,16936],{"class":631},[605,16999,5536],{"class":610},[605,17001,661],{"class":610},[605,17003,5539],{"class":651},[16409,17005,17006],{"id":2537},[586,17007,2537],{},[582,17009,17010],{},[1673,17011,17012],{},"Use case: SVGs seen from the front",[582,17014,17015,17016,17019,17020,17024],{},"This is the same as ",[586,17017,17018],{},"'offsetZ'"," but allows you to specify how much space is added between each layer, in order to eliminate ",[1112,17021,17023],{"href":16955,"rel":17022},[1116],"z-fighting",". For most use cases, this should be a value greater than 0.025 and less than 1.",[582,17026,17027,17029],{},[1673,17028,16797],{},": \"Bottom\" of the \"stack\" is visible.",[594,17031,17033],{"className":1158,"code":17032,"language":632,"meta":544,"style":544},"const { layers } = useSVG('/icon.svg', { depth: 0.1 })\n",[586,17034,17035],{"__ignoreMap":544},[605,17036,17037,17039,17041,17043,17045,17047,17049,17051,17053,17055,17057,17059,17061,17063,17065,17068,17070],{"class":607,"line":545},[605,17038,2689],{"class":618},[605,17040,648],{"class":610},[605,17042,16086],{"class":651},[605,17044,5544],{"class":610},[605,17046,2766],{"class":610},[605,17048,15531],{"class":2800},[605,17050,2970],{"class":651},[605,17052,5536],{"class":610},[605,17054,16839],{"class":631},[605,17056,5536],{"class":610},[605,17058,655],{"class":610},[605,17060,648],{"class":610},[605,17062,16848],{"class":614},[605,17064,1190],{"class":610},[605,17066,17067],{"class":791}," 0.1",[605,17069,661],{"class":610},[605,17071,5539],{"class":651},[7473,17073,17075],{"id":17074},"memory-management","Memory Management",[582,17077,17078],{},"Always dispose of geometries when the component unmounts:",[594,17080,17082],{"className":596,"code":17081,"language":601,"meta":544,"style":544},"\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",[586,17083,17084,17104,17122,17141,17145,17169,17173,17186,17193,17199],{"__ignoreMap":544},[605,17085,17086,17088,17090,17092,17094,17096,17098,17100,17102],{"class":607,"line":545},[605,17087,611],{"class":610},[605,17089,615],{"class":614},[605,17091,619],{"class":618},[605,17093,622],{"class":618},[605,17095,625],{"class":610},[605,17097,628],{"class":610},[605,17099,632],{"class":631},[605,17101,628],{"class":610},[605,17103,637],{"class":610},[605,17105,17106,17108,17110,17112,17114,17116,17118,17120],{"class":607,"line":546},[605,17107,645],{"class":644},[605,17109,648],{"class":610},[605,17111,15531],{"class":651},[605,17113,661],{"class":610},[605,17115,664],{"class":644},[605,17117,667],{"class":610},[605,17119,670],{"class":631},[605,17121,673],{"class":610},[605,17123,17124,17126,17128,17131,17133,17135,17137,17139],{"class":607,"line":676},[605,17125,645],{"class":644},[605,17127,648],{"class":610},[605,17129,17130],{"class":651}," onUnmounted",[605,17132,661],{"class":610},[605,17134,664],{"class":644},[605,17136,667],{"class":610},[605,17138,601],{"class":631},[605,17140,673],{"class":610},[605,17142,17143],{"class":607,"line":697},[605,17144,710],{"emptyLinePlaceholder":562},[605,17146,17147,17149,17151,17153,17155,17157,17159,17161,17163,17165,17167],{"class":607,"line":707},[605,17148,2689],{"class":618},[605,17150,648],{"class":610},[605,17152,15584],{"class":651},[605,17154,5544],{"class":610},[605,17156,2766],{"class":610},[605,17158,15531],{"class":2800},[605,17160,2970],{"class":651},[605,17162,5536],{"class":610},[605,17164,16839],{"class":631},[605,17166,5536],{"class":610},[605,17168,5539],{"class":651},[605,17170,17171],{"class":607,"line":713},[605,17172,710],{"emptyLinePlaceholder":562},[605,17174,17175,17178,17180,17182,17184],{"class":607,"line":723},[605,17176,17177],{"class":2800},"onUnmounted",[605,17179,2970],{"class":651},[605,17181,14395],{"class":610},[605,17183,5501],{"class":618},[605,17185,1176],{"class":610},[605,17187,17188,17191],{"class":607,"line":746},[605,17189,17190],{"class":2800},"  dispose",[605,17192,2846],{"class":614},[605,17194,17195,17197],{"class":607,"line":758},[605,17196,5544],{"class":610},[605,17198,5539],{"class":651},[605,17200,17201,17203,17205],{"class":607,"line":768},[605,17202,700],{"class":610},[605,17204,615],{"class":614},[605,17206,637],{"class":610},[7473,17208,17210],{"id":17209},"advanced-usage","Advanced Usage",[16409,17212,17214],{"id":17213},"conditional-layer-rendering","Conditional Layer Rendering",[594,17216,17218],{"className":596,"code":17217,"language":601,"meta":544,"style":544},"\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",[586,17219,17220,17240,17258,17276,17280,17297,17322,17326,17344,17354,17365,17396,17400,17408,17412,17420,17428,17434,17457,17471,17489,17493,17515,17523,17531],{"__ignoreMap":544},[605,17221,17222,17224,17226,17228,17230,17232,17234,17236,17238],{"class":607,"line":545},[605,17223,611],{"class":610},[605,17225,615],{"class":614},[605,17227,619],{"class":618},[605,17229,622],{"class":618},[605,17231,625],{"class":610},[605,17233,628],{"class":610},[605,17235,632],{"class":631},[605,17237,628],{"class":610},[605,17239,637],{"class":610},[605,17241,17242,17244,17246,17248,17250,17252,17254,17256],{"class":607,"line":546},[605,17243,645],{"class":644},[605,17245,648],{"class":610},[605,17247,15531],{"class":651},[605,17249,661],{"class":610},[605,17251,664],{"class":644},[605,17253,667],{"class":610},[605,17255,670],{"class":631},[605,17257,673],{"class":610},[605,17259,17260,17262,17264,17266,17268,17270,17272,17274],{"class":607,"line":676},[605,17261,645],{"class":644},[605,17263,648],{"class":610},[605,17265,14390],{"class":651},[605,17267,661],{"class":610},[605,17269,664],{"class":644},[605,17271,667],{"class":610},[605,17273,601],{"class":631},[605,17275,673],{"class":610},[605,17277,17278],{"class":607,"line":697},[605,17279,710],{"emptyLinePlaceholder":562},[605,17281,17282,17284,17287,17289,17291,17293,17295],{"class":607,"line":707},[605,17283,2689],{"class":618},[605,17285,17286],{"class":651}," showDetails ",[605,17288,625],{"class":610},[605,17290,5431],{"class":2800},[605,17292,2970],{"class":651},[605,17294,933],{"class":3870},[605,17296,5539],{"class":651},[605,17298,17299,17301,17303,17305,17307,17309,17311,17313,17315,17318,17320],{"class":607,"line":713},[605,17300,2689],{"class":618},[605,17302,648],{"class":610},[605,17304,16086],{"class":651},[605,17306,5544],{"class":610},[605,17308,2766],{"class":610},[605,17310,15531],{"class":2800},[605,17312,2970],{"class":651},[605,17314,5536],{"class":610},[605,17316,17317],{"class":631},"/detailed-icon.svg",[605,17319,5536],{"class":610},[605,17321,5539],{"class":651},[605,17323,17324],{"class":607,"line":723},[605,17325,710],{"emptyLinePlaceholder":562},[605,17327,17328,17330,17333,17335,17337,17339,17341],{"class":607,"line":746},[605,17329,2689],{"class":618},[605,17331,17332],{"class":651}," visibleLayers ",[605,17334,625],{"class":610},[605,17336,14390],{"class":2800},[605,17338,2970],{"class":651},[605,17340,14395],{"class":610},[605,17342,17343],{"class":618}," =>\n",[605,17345,17346,17349,17351],{"class":607,"line":758},[605,17347,17348],{"class":651},"  showDetails",[605,17350,1118],{"class":610},[605,17352,17353],{"class":651},"value\n",[605,17355,17356,17359,17361,17363],{"class":607,"line":768},[605,17357,17358],{"class":610},"    ?",[605,17360,15575],{"class":651},[605,17362,1118],{"class":610},[605,17364,17353],{"class":651},[605,17366,17367,17369,17371,17373,17375,17377,17380,17382,17384,17386,17389,17391,17393],{"class":607,"line":773},[605,17368,7392],{"class":610},[605,17370,15575],{"class":651},[605,17372,1118],{"class":610},[605,17374,5496],{"class":651},[605,17376,1118],{"class":610},[605,17378,17379],{"class":2800},"filter",[605,17381,2970],{"class":651},[605,17383,15708],{"class":5495},[605,17385,5501],{"class":618},[605,17387,17388],{"class":610}," !",[605,17390,15708],{"class":651},[605,17392,1118],{"class":610},[605,17394,17395],{"class":651},"isStroke)\n",[605,17397,17398],{"class":607,"line":799},[605,17399,5539],{"class":651},[605,17401,17402,17404,17406],{"class":607,"line":599},[605,17403,700],{"class":610},[605,17405,615],{"class":614},[605,17407,637],{"class":610},[605,17409,17410],{"class":607,"line":822},[605,17411,710],{"emptyLinePlaceholder":562},[605,17413,17414,17416,17418],{"class":607,"line":833},[605,17415,611],{"class":610},[605,17417,718],{"class":614},[605,17419,637],{"class":610},[605,17421,17422,17424,17426],{"class":607,"line":844},[605,17423,726],{"class":610},[605,17425,3912],{"class":614},[605,17427,637],{"class":610},[605,17429,17430,17432],{"class":607,"line":854},[605,17431,749],{"class":610},[605,17433,2957],{"class":614},[605,17435,17436,17438,17440,17442,17444,17446,17448,17450,17452,17455],{"class":607,"line":600},[605,17437,15699],{"class":644},[605,17439,625],{"class":610},[605,17441,628],{"class":610},[605,17443,2970],{"class":610},[605,17445,15708],{"class":651},[605,17447,1471],{"class":610},[605,17449,2978],{"class":651},[605,17451,2981],{"class":610},[605,17453,17454],{"class":651},"visibleLayers",[605,17456,2987],{"class":610},[605,17458,17459,17461,17463,17465,17467,17469],{"class":607,"line":874},[605,17460,5693],{"class":610},[605,17462,2996],{"class":618},[605,17464,625],{"class":610},[605,17466,628],{"class":610},[605,17468,2978],{"class":651},[605,17470,2987],{"class":610},[605,17472,17473,17475,17477,17479,17481,17483,17485,17487],{"class":607,"line":884},[605,17474,5693],{"class":610},[605,17476,15748],{"class":618},[605,17478,625],{"class":610},[605,17480,628],{"class":610},[605,17482,15708],{"class":651},[605,17484,1118],{"class":610},[605,17486,15748],{"class":651},[605,17488,2987],{"class":610},[605,17490,17491],{"class":607,"line":2952},[605,17492,5713],{"class":610},[605,17494,17495,17497,17499,17501,17503,17505,17507,17509,17511,17513],{"class":607,"line":2960},[605,17496,825],{"class":610},[605,17498,2425],{"class":614},[605,17500,4111],{"class":618},[605,17502,625],{"class":610},[605,17504,628],{"class":610},[605,17506,15708],{"class":651},[605,17508,1118],{"class":610},[605,17510,15798],{"class":651},[605,17512,628],{"class":610},[605,17514,755],{"class":610},[605,17516,17517,17519,17521],{"class":607,"line":2990},[605,17518,867],{"class":610},[605,17520,828],{"class":614},[605,17522,637],{"class":610},[605,17524,17525,17527,17529],{"class":607,"line":3007},[605,17526,877],{"class":610},[605,17528,3912],{"class":614},[605,17530,637],{"class":610},[605,17532,17533,17535,17537],{"class":607,"line":3022},[605,17534,700],{"class":610},[605,17536,718],{"class":614},[605,17538,637],{"class":610},[16409,17540,17542],{"id":17541},"material-customization-per-layer","Material Customization per Layer",[594,17544,17546],{"className":596,"code":17545,"language":601,"meta":544,"style":544},"\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",[586,17547,17548,17568,17586,17590,17617,17625,17636,17646,17651,17660,17670,17681,17694,17698,17704,17712,17716,17724,17732,17738,17760,17774,17792,17796,17802,17818,17837,17841,17849,17857],{"__ignoreMap":544},[605,17549,17550,17552,17554,17556,17558,17560,17562,17564,17566],{"class":607,"line":545},[605,17551,611],{"class":610},[605,17553,615],{"class":614},[605,17555,619],{"class":618},[605,17557,622],{"class":618},[605,17559,625],{"class":610},[605,17561,628],{"class":610},[605,17563,632],{"class":631},[605,17565,628],{"class":610},[605,17567,637],{"class":610},[605,17569,17570,17572,17574,17576,17578,17580,17582,17584],{"class":607,"line":546},[605,17571,645],{"class":644},[605,17573,648],{"class":610},[605,17575,15531],{"class":651},[605,17577,661],{"class":610},[605,17579,664],{"class":644},[605,17581,667],{"class":610},[605,17583,670],{"class":631},[605,17585,673],{"class":610},[605,17587,17588],{"class":607,"line":676},[605,17589,710],{"emptyLinePlaceholder":562},[605,17591,17592,17594,17596,17598,17600,17602,17604,17606,17608,17611,17613,17615],{"class":607,"line":697},[605,17593,2689],{"class":618},[605,17595,648],{"class":610},[605,17597,16086],{"class":651},[605,17599,5544],{"class":610},[605,17601,2766],{"class":610},[605,17603,15531],{"class":2800},[605,17605,2970],{"class":651},[605,17607,5536],{"class":610},[605,17609,17610],{"class":631},"/logo.svg",[605,17612,5536],{"class":610},[605,17614,655],{"class":610},[605,17616,1176],{"class":610},[605,17618,17619,17621,17623],{"class":607,"line":707},[605,17620,15616],{"class":614},[605,17622,1190],{"class":610},[605,17624,1176],{"class":610},[605,17626,17627,17630,17632,17634],{"class":607,"line":713},[605,17628,17629],{"class":614},"    transparent",[605,17631,1190],{"class":610},[605,17633,10938],{"class":3870},[605,17635,14031],{"class":610},[605,17637,17638,17641,17643],{"class":607,"line":723},[605,17639,17640],{"class":614},"    opacity",[605,17642,1190],{"class":610},[605,17644,17645],{"class":791}," 0.9\n",[605,17647,17648],{"class":607,"line":746},[605,17649,17650],{"class":610},"  },\n",[605,17652,17653,17656,17658],{"class":607,"line":758},[605,17654,17655],{"class":614},"  strokeMaterial",[605,17657,1190],{"class":610},[605,17659,1176],{"class":610},[605,17661,17662,17664,17666,17668],{"class":607,"line":768},[605,17663,17629],{"class":614},[605,17665,1190],{"class":610},[605,17667,10938],{"class":3870},[605,17669,14031],{"class":610},[605,17671,17672,17674,17676,17679],{"class":607,"line":773},[605,17673,17640],{"class":614},[605,17675,1190],{"class":610},[605,17677,17678],{"class":791}," 1.0",[605,17680,14031],{"class":610},[605,17682,17683,17686,17688,17690,17692],{"class":607,"line":799},[605,17684,17685],{"class":614},"    color",[605,17687,1190],{"class":610},[605,17689,667],{"class":610},[605,17691,16549],{"class":631},[605,17693,673],{"class":610},[605,17695,17696],{"class":607,"line":599},[605,17697,2825],{"class":610},[605,17699,17700,17702],{"class":607,"line":822},[605,17701,5544],{"class":610},[605,17703,5539],{"class":651},[605,17705,17706,17708,17710],{"class":607,"line":833},[605,17707,700],{"class":610},[605,17709,615],{"class":614},[605,17711,637],{"class":610},[605,17713,17714],{"class":607,"line":844},[605,17715,710],{"emptyLinePlaceholder":562},[605,17717,17718,17720,17722],{"class":607,"line":854},[605,17719,611],{"class":610},[605,17721,718],{"class":614},[605,17723,637],{"class":610},[605,17725,17726,17728,17730],{"class":607,"line":600},[605,17727,726],{"class":610},[605,17729,3912],{"class":614},[605,17731,637],{"class":610},[605,17733,17734,17736],{"class":607,"line":874},[605,17735,749],{"class":610},[605,17737,2957],{"class":614},[605,17739,17740,17742,17744,17746,17748,17750,17752,17754,17756,17758],{"class":607,"line":884},[605,17741,15699],{"class":644},[605,17743,625],{"class":610},[605,17745,628],{"class":610},[605,17747,2970],{"class":610},[605,17749,15708],{"class":651},[605,17751,1471],{"class":610},[605,17753,2978],{"class":651},[605,17755,2981],{"class":610},[605,17757,15717],{"class":651},[605,17759,2987],{"class":610},[605,17761,17762,17764,17766,17768,17770,17772],{"class":607,"line":2952},[605,17763,5693],{"class":610},[605,17765,2996],{"class":618},[605,17767,625],{"class":610},[605,17769,628],{"class":610},[605,17771,2978],{"class":651},[605,17773,2987],{"class":610},[605,17775,17776,17778,17780,17782,17784,17786,17788,17790],{"class":607,"line":2960},[605,17777,5693],{"class":610},[605,17779,15748],{"class":618},[605,17781,625],{"class":610},[605,17783,628],{"class":610},[605,17785,15708],{"class":651},[605,17787,1118],{"class":610},[605,17789,15748],{"class":651},[605,17791,2987],{"class":610},[605,17793,17794],{"class":607,"line":2990},[605,17795,5713],{"class":610},[605,17797,17798,17800],{"class":607,"line":3007},[605,17799,825],{"class":610},[605,17801,16679],{"class":614},[605,17803,17804,17806,17808,17810,17812,17814,17816],{"class":607,"line":3022},[605,17805,16684],{"class":618},[605,17807,625],{"class":610},[605,17809,628],{"class":610},[605,17811,15708],{"class":651},[605,17813,1118],{"class":610},[605,17815,15798],{"class":651},[605,17817,2987],{"class":610},[605,17819,17820,17822,17825,17827,17829,17831,17833,17835],{"class":607,"line":3047},[605,17821,2993],{"class":610},[605,17823,17824],{"class":618},"wireframe",[605,17826,625],{"class":610},[605,17828,628],{"class":610},[605,17830,15708],{"class":651},[605,17832,1118],{"class":610},[605,17834,16541],{"class":651},[605,17836,2987],{"class":610},[605,17838,17839],{"class":607,"line":2591},[605,17840,3050],{"class":610},[605,17842,17843,17845,17847],{"class":607,"line":3062},[605,17844,867],{"class":610},[605,17846,828],{"class":614},[605,17848,637],{"class":610},[605,17850,17851,17853,17855],{"class":607,"line":3092},[605,17852,877],{"class":610},[605,17854,3912],{"class":614},[605,17856,637],{"class":610},[605,17858,17859,17861,17863],{"class":607,"line":3101},[605,17860,700],{"class":610},[605,17862,718],{"class":614},[605,17864,637],{"class":610},[472,17866,17868],{"id":17867},"usesvg-component","UseSVG Component",[582,17870,17871,17872,17875],{},"For simple, declarative SVG rendering without the need for programmatic control, you can use the ",[586,17873,17874],{},"UseSVG"," component:",[594,17877,17879],{"className":596,"code":17878,"language":601,"meta":544,"style":544},"\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",[586,17880,17881,17901,17920,17928,17932,17940,17985,17992,18006,18021,18042,18056,18069,18073,18081],{"__ignoreMap":544},[605,17882,17883,17885,17887,17889,17891,17893,17895,17897,17899],{"class":607,"line":545},[605,17884,611],{"class":610},[605,17886,615],{"class":614},[605,17888,619],{"class":618},[605,17890,622],{"class":618},[605,17892,625],{"class":610},[605,17894,628],{"class":610},[605,17896,632],{"class":631},[605,17898,628],{"class":610},[605,17900,637],{"class":610},[605,17902,17903,17905,17907,17910,17912,17914,17916,17918],{"class":607,"line":546},[605,17904,645],{"class":644},[605,17906,648],{"class":610},[605,17908,17909],{"class":651}," UseSVG",[605,17911,661],{"class":610},[605,17913,664],{"class":644},[605,17915,667],{"class":610},[605,17917,670],{"class":631},[605,17919,673],{"class":610},[605,17921,17922,17924,17926],{"class":607,"line":676},[605,17923,700],{"class":610},[605,17925,615],{"class":614},[605,17927,637],{"class":610},[605,17929,17930],{"class":607,"line":697},[605,17931,710],{"emptyLinePlaceholder":562},[605,17933,17934,17936,17938],{"class":607,"line":707},[605,17935,611],{"class":610},[605,17937,718],{"class":614},[605,17939,637],{"class":610},[605,17941,17942,17944,17946,17948,17950,17952,17954,17956,17958,17960,17962,17964,17966,17968,17971,17973,17975,17977,17979,17981,17983],{"class":607,"line":713},[605,17943,726],{"class":610},[605,17945,3912],{"class":614},[605,17947,781],{"class":610},[605,17949,784],{"class":618},[605,17951,625],{"class":610},[605,17953,628],{"class":610},[605,17955,1907],{"class":791},[605,17957,628],{"class":610},[605,17959,781],{"class":610},[605,17961,1459],{"class":618},[605,17963,625],{"class":610},[605,17965,628],{"class":610},[605,17967,15194],{"class":610},[605,17969,17970],{"class":791},"2.1",[605,17972,1471],{"class":610},[605,17974,1893],{"class":791},[605,17976,1471],{"class":610},[605,17978,937],{"class":791},[605,17980,1481],{"class":610},[605,17982,628],{"class":610},[605,17984,637],{"class":610},[605,17986,17987,17989],{"class":607,"line":723},[605,17988,749],{"class":610},[605,17990,17991],{"class":614},"UseSVG\n",[605,17993,17994,17997,17999,18001,18004],{"class":607,"line":746},[605,17995,17996],{"class":618},"      src",[605,17998,625],{"class":610},[605,18000,628],{"class":610},[605,18002,18003],{"class":631},"/path/to/logo.svg",[605,18005,2987],{"class":610},[605,18007,18008,18010,18013,18015,18017,18019],{"class":607,"line":758},[605,18009,5693],{"class":610},[605,18011,18012],{"class":618},"skip-fills",[605,18014,625],{"class":610},[605,18016,628],{"class":610},[605,18018,943],{"class":3870},[605,18020,2987],{"class":610},[605,18022,18023,18025,18028,18030,18032,18034,18036,18038,18040],{"class":607,"line":768},[605,18024,5693],{"class":610},[605,18026,18027],{"class":618},"fill-material",[605,18029,625],{"class":610},[605,18031,628],{"class":610},[605,18033,7402],{"class":610},[605,18035,4873],{"class":614},[605,18037,7407],{"class":610},[605,18039,933],{"class":3870},[605,18041,14031],{"class":610},[605,18043,18044,18047,18049,18052,18054],{"class":607,"line":773},[605,18045,18046],{"class":614},"                        opacity",[605,18048,7407],{"class":610},[605,18050,18051],{"class":791},"0.8",[605,18053,661],{"class":610},[605,18055,2987],{"class":610},[605,18057,18058,18061,18063,18065,18067],{"class":607,"line":799},[605,18059,18060],{"class":618},"      depth",[605,18062,625],{"class":610},[605,18064,628],{"class":610},[605,18066,16791],{"class":631},[605,18068,2987],{"class":610},[605,18070,18071],{"class":607,"line":599},[605,18072,10816],{"class":610},[605,18074,18075,18077,18079],{"class":607,"line":822},[605,18076,877],{"class":610},[605,18078,3912],{"class":614},[605,18080,637],{"class":610},[605,18082,18083,18085,18087],{"class":607,"line":833},[605,18084,700],{"class":610},[605,18086,718],{"class":614},[605,18088,637],{"class":610},[7473,18090,894],{"id":893},[899,18092,18093,18105],{},[902,18094,18095],{},[905,18096,18097,18099,18101,18103],{},[908,18098,910],{"align":969},[908,18100,10957],{},[908,18102,913],{"align":969},[908,18104,916],{},[918,18106,18107,18127,18146,18165,18182,18199,18218,18236],{},[905,18108,18109,18114,18118,18125],{},[923,18110,18111],{"align":969},[1673,18112,18113],{},"src",[923,18115,18116],{},[586,18117,11094],{},[923,18119,18120,18121,18124],{"align":969},"Either a path to an SVG ",[1677,18122,18123],{},"or"," an SVG string",[923,18126],{},[905,18128,18129,18133,18137,18142],{},[923,18130,18131],{"align":969},[1673,18132,16254],{},[923,18134,18135],{},[586,18136,11014],{},[923,18138,930,18139,18141],{"align":969},[586,18140,933],{},", the SVG strokes will not be rendered.",[923,18143,18144],{},[586,18145,943],{},[905,18147,18148,18152,18156,18161],{},[923,18149,18150],{"align":969},[1673,18151,16272],{},[923,18153,18154],{},[586,18155,11014],{},[923,18157,930,18158,18160],{"align":969},[586,18159,933],{},", the SVG fills will not be rendered.",[923,18162,18163],{},[586,18164,943],{},[905,18166,18167,18171,18175,18178],{},[923,18168,18169],{"align":969},[1673,18170,16310],{},[923,18172,18173],{},[586,18174,16295],{},[923,18176,18177],{"align":969},"Props to assign to the stroke materials of the resulting meshes.",[923,18179,18180],{},[586,18181,1151],{},[905,18183,18184,18188,18192,18195],{},[923,18185,18186],{"align":969},[1673,18187,16290],{},[923,18189,18190],{},[586,18191,16295],{},[923,18193,18194],{"align":969},"Props to assign to the fill materials of the resulting meshes.",[923,18196,18197],{},[586,18198,1151],{},[905,18200,18201,18206,18211,18214],{},[923,18202,18203],{"align":969},[1673,18204,18205],{},"strokeMeshProps",[923,18207,18208],{},[586,18209,18210],{},"TresOptions",[923,18212,18213],{"align":969},"Props to assign to the resulting stroke meshes.",[923,18215,18216],{},[586,18217,1151],{},[905,18219,18220,18225,18229,18232],{},[923,18221,18222],{"align":969},[1673,18223,18224],{},"fillMeshProps",[923,18226,18227],{},[586,18228,18210],{},[923,18230,18231],{"align":969},"Props to assign to the resulting fill meshes.",[923,18233,18234],{},[586,18235,1151],{},[905,18237,18238,18242,18246,18253],{},[923,18239,18240],{"align":969},[1673,18241,6358],{},[923,18243,18244],{},[586,18245,16332],{},[923,18247,18248,18249,4125],{"align":969},"Specify how SVG layers are to be rendered. (",[1112,18250,18252],{"href":18251},"#depth-handling","See \"Depth\"",[923,18254,18255],{},[586,18256,16791],{},[472,18258,18260],{"id":18259},"troubleshooting","Troubleshooting",[18262,18263,18265],"alert",{"type":18264},"warning",[582,18266,18267],{},"This is not a general-purpose SVG renderer. Many SVG features are unsupported.",[582,18269,18270],{},"Here are some things to try if you run into problems:",[7473,18272,18274],{"id":18273},"error-xml-parsing-error-unclosed-token","Error: \"XML Parsing Error: unclosed token\"",[3136,18276,18277],{},[3139,18278,18279,18280,16781,18282,1118],{},"In the SVG source, convert hex colors to rgb, e.g., convert ",[586,18281,2525],{},[586,18283,18284],{},"rgb(255, 0, 0)",[7473,18286,18288],{"id":18287},"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",[3136,18290,18291,18303],{},[3139,18292,18293,18294,18296,18297,1118],{},"In your ",[586,18295,141],{}," options, ",[1112,18298,18299,18300,18302],{"href":18251},"change the ",[586,18301,6358],{}," option",[3139,18304,18305,18306,18309,18310,1118],{},"In the SVG source, use ",[586,18307,18308],{},"fill=\"none\""," rather than ",[586,18311,18312],{},"fill-opacity=\"0\"",[7473,18314,18316,18317],{"id":18315},"parts-of-the-svg-z-fight","Parts of the SVG ",[1112,18318,18320],{"href":16955,"rel":18319},[1116],"\"z-fight\"",[3136,18322,18323,18331],{},[3139,18324,18293,18325,18296,18327,1118],{},[586,18326,141],{},[1112,18328,18299,18329,18302],{"href":18251},[586,18330,6358],{},[3139,18332,18333],{},"Increase the distance between the SVG and other on-screen elements.",[7473,18335,18337],{"id":18336},"the-svg-is-not-visible","The SVG is not visible",[3136,18339,18340,18343,18352,18358],{},[3139,18341,18342],{},"If importing an SVG, make sure the path is correct – check the console for loading errors.",[3139,18344,18345,18346,18348,18349,1118],{},"Try scaling the SVG down, e.g., wrap it in a ",[586,18347,3912],{}," with ",[586,18350,18351],{},":scale=\"0.01\"",[3139,18353,18354,18355,1118],{},"Try moving the SVG up (+y), e.g., ",[586,18356,18357],{},":position=\"[0,2,0]\"",[3139,18359,18360,18361,18364],{},"Check that ",[586,18362,18363],{},"layers.length > 0"," before rendering.",[7473,18366,18368],{"id":18367},"performance-issues-with-many-layers","Performance issues with many layers",[3136,18370,18371,18378,18386],{},[3139,18372,18373,18374,18377],{},"Use the ",[586,18375,18376],{},"dispose()"," function when components unmount to clean up geometries.",[3139,18379,18380,18381,10149,18383,18385],{},"Consider using ",[586,18382,16254],{},[586,18384,16272],{}," to reduce the number of rendered layers.",[3139,18387,18388],{},"For complex SVGs with many layers, consider simplifying the SVG source.",[472,18390,18392,18393,18395,18396,18398],{"id":18391},"when-to-use-usesvg-vs-svg-component","When to Use ",[586,18394,141],{}," vs ",[586,18397,15481],{}," Component",[582,18400,18401],{},[1673,18402,18403,18404,18406],{},"Use ",[586,18405,141],{}," when you need:",[3136,18408,18409,18412,18415,18418,18421],{},[3139,18410,18411],{},"Direct access to individual SVG layers",[3139,18413,18414],{},"Custom rendering logic",[3139,18416,18417],{},"Layer-specific animations",[3139,18419,18420],{},"Programmatic geometry manipulation",[3139,18422,18423],{},"Advanced material customization per layer",[582,18425,18426],{},[1673,18427,18373,18428,18430],{},[586,18429,15481],{}," component when you need:",[3136,18432,18433,18436,18439,18442],{},[3139,18434,18435],{},"Simple, declarative SVG rendering",[3139,18437,18438],{},"Quick prototyping",[3139,18440,18441],{},"Standard SVG display without custom logic",[3139,18443,18444],{},"Less code and setup",[1299,18446,18447],{},"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":544,"searchDepth":545,"depth":546,"links":18449},[18450,18460,18463,18471],{"id":15485,"depth":546,"text":15486,"children":18451},[18452,18453,18454,18455,18456,18457,18458,18459],{"id":592,"depth":676,"text":15},{"id":16041,"depth":676,"text":16042},{"id":10945,"depth":676,"text":10946},{"id":11049,"depth":676,"text":7487},{"id":16343,"depth":676,"text":16344},{"id":16752,"depth":676,"text":16753},{"id":17074,"depth":676,"text":17075},{"id":17209,"depth":676,"text":17210},{"id":17867,"depth":546,"text":17868,"children":18461},[18462],{"id":893,"depth":676,"text":894},{"id":18259,"depth":546,"text":18260,"children":18464},[18465,18466,18467,18469,18470],{"id":18273,"depth":676,"text":18274},{"id":18287,"depth":676,"text":18288},{"id":18315,"depth":676,"text":18468},"Parts of the SVG \"z-fight\"",{"id":18336,"depth":676,"text":18337},{"id":18367,"depth":676,"text":18368},{"id":18391,"depth":546,"text":18472},"When to Use useSVG vs SVG Component","A composable to load and render SVG files as 3D geometry in TresJS scenes.",{},{"title":141,"description":18473},"Bpey5SMrTLv2yytWL0t_9C4cqa_4Vc__F5o4YEN3jZA",{"id":18478,"title":145,"body":18479,"description":18980,"extension":559,"links":560,"meta":18981,"navigation":562,"path":146,"seo":18982,"stem":147,"__hash__":18983},"docs/2.api/3.loaders/use-progress.md",{"type":469,"value":18480,"toc":18976},[18481,18488,18491,18493,18551,18557,18889,18900,18902,18957,18973],[582,18482,18483,18484,18487],{},"A composable to convenience wrap ",[586,18485,18486],{},"THREE.DefaultLoadingManager"," and returns the progress of the loading assets into the scene.",[582,18489,18490],{},"This comes handy to show an HTML loading bar or a spinner while the assets are being loaded.",[472,18492,15],{"id":592},[594,18494,18496],{"className":1158,"code":18495,"language":632,"meta":544,"style":544},"import { useProgress } from '@tresjs/cientos'\n\nconst { hasFinishLoading, progress, items } = await useProgress()\n",[586,18497,18498,18517,18521],{"__ignoreMap":544},[605,18499,18500,18502,18504,18507,18509,18511,18513,18515],{"class":607,"line":545},[605,18501,645],{"class":644},[605,18503,648],{"class":610},[605,18505,18506],{"class":651}," useProgress",[605,18508,661],{"class":610},[605,18510,664],{"class":644},[605,18512,667],{"class":610},[605,18514,670],{"class":631},[605,18516,673],{"class":610},[605,18518,18519],{"class":607,"line":546},[605,18520,710],{"emptyLinePlaceholder":562},[605,18522,18523,18525,18527,18530,18532,18535,18537,18540,18542,18544,18547,18549],{"class":607,"line":676},[605,18524,2689],{"class":618},[605,18526,648],{"class":610},[605,18528,18529],{"class":651}," hasFinishLoading",[605,18531,655],{"class":610},[605,18533,18534],{"class":651}," progress",[605,18536,655],{"class":610},[605,18538,18539],{"class":651}," items ",[605,18541,5544],{"class":610},[605,18543,2766],{"class":610},[605,18545,18546],{"class":644}," await",[605,18548,18506],{"class":2800},[605,18550,2846],{"class":651},[582,18552,18553,18554,18556],{},"Then you can use the ",[586,18555,11024],{}," value to show a loading bar or a spinner:",[594,18558,18560],{"className":596,"code":18559,"language":601,"meta":544,"style":544},"\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",[586,18561,18562,18570,18577,18591,18605,18619,18623,18630,18646,18660,18664,18685,18702,18727,18735,18743,18752,18771,18803,18811,18819,18826,18831,18847,18861,18865,18873,18881],{"__ignoreMap":544},[605,18563,18564,18566,18568],{"class":607,"line":545},[605,18565,611],{"class":610},[605,18567,718],{"class":614},[605,18569,637],{"class":610},[605,18571,18572,18574],{"class":607,"line":546},[605,18573,726],{"class":610},[605,18575,18576],{"class":614},"Transition\n",[605,18578,18579,18582,18584,18586,18589],{"class":607,"line":676},[605,18580,18581],{"class":618},"    name",[605,18583,625],{"class":610},[605,18585,628],{"class":610},[605,18587,18588],{"class":631},"fade-overlay",[605,18590,2987],{"class":610},[605,18592,18593,18596,18598,18600,18603],{"class":607,"line":697},[605,18594,18595],{"class":618},"    enter-active-class",[605,18597,625],{"class":610},[605,18599,628],{"class":610},[605,18601,18602],{"class":631},"opacity-1 transition-opacity duration-200",[605,18604,2987],{"class":610},[605,18606,18607,18610,18612,18614,18617],{"class":607,"line":707},[605,18608,18609],{"class":618},"    leave-active-class",[605,18611,625],{"class":610},[605,18613,628],{"class":610},[605,18615,18616],{"class":631},"opacity-0 transition-opacity duration-200",[605,18618,2987],{"class":610},[605,18620,18621],{"class":607,"line":713},[605,18622,13858],{"class":610},[605,18624,18625,18627],{"class":607,"line":723},[605,18626,749],{"class":610},[605,18628,18629],{"class":614},"div\n",[605,18631,18632,18635,18637,18639,18641,18644],{"class":607,"line":746},[605,18633,18634],{"class":618},"      v-show",[605,18636,625],{"class":610},[605,18638,628],{"class":610},[605,18640,15682],{"class":610},[605,18642,18643],{"class":651},"hasFinishLoading",[605,18645,2987],{"class":610},[605,18647,18648,18651,18653,18655,18658],{"class":607,"line":758},[605,18649,18650],{"class":618},"      class",[605,18652,625],{"class":610},[605,18654,628],{"class":610},[605,18656,18657],{"class":631},"absolute bg-grey-600 t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono",[605,18659,2987],{"class":610},[605,18661,18662],{"class":607,"line":768},[605,18663,5713],{"class":610},[605,18665,18666,18668,18671,18674,18676,18678,18681,18683],{"class":607,"line":773},[605,18667,825],{"class":610},[605,18669,18670],{"class":614},"div",[605,18672,18673],{"class":618}," class",[605,18675,625],{"class":610},[605,18677,628],{"class":610},[605,18679,18680],{"class":631},"w-200px",[605,18682,628],{"class":610},[605,18684,637],{"class":610},[605,18686,18687,18690,18693,18696,18699],{"class":607,"line":799},[605,18688,18689],{"class":651},"        Loading... ",[605,18691,18692],{"class":610},"{{",[605,18694,18695],{"class":651}," progress ",[605,18697,18698],{"class":610},"}}",[605,18700,18701],{"class":651}," %\n",[605,18703,18704,18706,18709,18711,18713,18715,18718,18720,18723,18725],{"class":607,"line":599},[605,18705,836],{"class":610},[605,18707,18708],{"class":614},"i",[605,18710,18673],{"class":618},[605,18712,625],{"class":610},[605,18714,628],{"class":610},[605,18716,18717],{"class":631},"i-ic-twotone-catching-pokemon animate-rotate-in",[605,18719,628],{"class":610},[605,18721,18722],{"class":610},">\u003C/",[605,18724,18708],{"class":614},[605,18726,637],{"class":610},[605,18728,18729,18731,18733],{"class":607,"line":822},[605,18730,857],{"class":610},[605,18732,18670],{"class":614},[605,18734,637],{"class":610},[605,18736,18737,18739,18741],{"class":607,"line":833},[605,18738,867],{"class":610},[605,18740,18670],{"class":614},[605,18742,637],{"class":610},[605,18744,18745,18747,18750],{"class":607,"line":844},[605,18746,877],{"class":610},[605,18748,18749],{"class":614},"Transition",[605,18751,637],{"class":610},[605,18753,18754,18756,18758,18760,18762,18764,18767,18769],{"class":607,"line":854},[605,18755,726],{"class":610},[605,18757,729],{"class":614},[605,18759,15007],{"class":618},[605,18761,625],{"class":610},[605,18763,628],{"class":610},[605,18765,18766],{"class":631},"realistic",[605,18768,628],{"class":610},[605,18770,637],{"class":610},[605,18772,18773,18775,18777,18779,18781,18783,18785,18787,18789,18791,18793,18795,18797,18799,18801],{"class":607,"line":600},[605,18774,749],{"class":610},[605,18776,752],{"class":614},[605,18778,781],{"class":610},[605,18780,1459],{"class":618},[605,18782,625],{"class":610},[605,18784,628],{"class":610},[605,18786,1466],{"class":610},[605,18788,12281],{"class":791},[605,18790,1471],{"class":610},[605,18792,12281],{"class":791},[605,18794,1471],{"class":610},[605,18796,12281],{"class":791},[605,18798,1481],{"class":610},[605,18800,628],{"class":610},[605,18802,755],{"class":610},[605,18804,18805,18807,18809],{"class":607,"line":874},[605,18806,749],{"class":610},[605,18808,763],{"class":614},[605,18810,755],{"class":610},[605,18812,18813,18815,18817],{"class":607,"line":884},[605,18814,749],{"class":610},[605,18816,14995],{"class":614},[605,18818,637],{"class":610},[605,18820,18821,18823],{"class":607,"line":2952},[605,18822,825],{"class":610},[605,18824,18825],{"class":614},"Environment\n",[605,18827,18828],{"class":607,"line":2960},[605,18829,18830],{"class":618},"        background\n",[605,18832,18833,18835,18838,18840,18842,18845],{"class":607,"line":2990},[605,18834,2993],{"class":610},[605,18836,18837],{"class":618},"files",[605,18839,625],{"class":610},[605,18841,628],{"class":610},[605,18843,18844],{"class":651},"environmentFiles",[605,18846,2987],{"class":610},[605,18848,18849,18852,18854,18856,18859],{"class":607,"line":3007},[605,18850,18851],{"class":618},"        path",[605,18853,625],{"class":610},[605,18855,628],{"class":610},[605,18857,18858],{"class":631},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap",[605,18860,2987],{"class":610},[605,18862,18863],{"class":607,"line":3022},[605,18864,3050],{"class":610},[605,18866,18867,18869,18871],{"class":607,"line":3047},[605,18868,867],{"class":610},[605,18870,14995],{"class":614},[605,18872,637],{"class":610},[605,18874,18875,18877,18879],{"class":607,"line":2591},[605,18876,877],{"class":610},[605,18878,729],{"class":614},[605,18880,637],{"class":610},[605,18882,18883,18885,18887],{"class":607,"line":3062},[605,18884,700],{"class":610},[605,18886,718],{"class":614},[605,18888,637],{"class":610},[18262,18890,18891],{"type":18264},[582,18892,18893,18894,18899],{},"This component use top level await. Please check the ",[1112,18895,18898],{"href":18896,"rel":18897},"https://vuejs.org/guide/built-ins/suspense.html#suspense",[1116],"Suspense API"," for more info",[472,18901,10946],{"id":10945},[899,18903,18904,18914],{},[902,18905,18906],{},[905,18907,18908,18910,18912],{},[908,18909,3118],{"align":969},[908,18911,10957],{"align":969},[908,18913,913],{"align":969},[918,18915,18916,18929,18942],{},[905,18917,18918,18922,18926],{},[923,18919,18920],{"align":969},[586,18921,18643],{},[923,18923,18924],{"align":969},[586,18925,11014],{},[923,18927,18928],{"align":969},"Whether all items have finished loading",[905,18930,18931,18935,18939],{},[923,18932,18933],{"align":969},[586,18934,11024],{},[923,18936,18937],{"align":969},[586,18938,2537],{},[923,18940,18941],{"align":969},"Loading progress as percentage (0-100)",[905,18943,18944,18949,18954],{},[923,18945,18946],{"align":969},[586,18947,18948],{},"items",[923,18950,18951],{"align":969},[586,18952,18953],{},"Array",[923,18955,18956],{"align":969},"Array of loading items with their status",[3725,18958,18959],{},[582,18960,18961,18962,18967,18968,18899],{},"This component use top level await it needs to be wrapped on a ",[1112,18963,18965],{"href":18896,"rel":18964},[1116],[586,18966,14995],{},". Please check the ",[1112,18969,18971],{"href":18896,"rel":18970},[1116],[586,18972,18898],{},[1299,18974,18975],{},"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":544,"searchDepth":545,"depth":546,"links":18977},[18978,18979],{"id":592,"depth":546,"text":15},{"id":10945,"depth":546,"text":10946},"A composable to track loading progress of assets in TresJS scenes.",{},{"title":145,"description":18980},"gZhXorzaJ3dTEQJ4uc1arATdnRGEw61UJXrQQOhhIV4",{"id":18985,"title":149,"body":18986,"description":19606,"extension":559,"links":560,"meta":19607,"navigation":562,"path":150,"seo":19608,"stem":151,"__hash__":19609},"docs/2.api/3.loaders/use-video-texture.md",{"type":469,"value":18987,"toc":19602},[18988,18993,18996,19003,19005,19485,19487,19590,19599],[2558,18989,18990],{},[18991,18992],"loaders-use-video-texture",{},[582,18994,18995],{},"A composable to easily use videos as textures in your meshes.",[582,18997,18998,18999],{},"This composable is based on the Drei ",[1112,19000,149],{"href":19001,"rel":19002},"https://github.com/pmndrs/drei/tree/master#usevideotexture",[1116],[472,19004,15],{"id":592},[10434,19006,19007,19248],{},[594,19008,19010],{"className":596,"code":19009,"filename":10601,"language":601,"meta":544,"style":544},"\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",[586,19011,19012,19032,19050,19068,19082,19090,19094,19102,19120,19127,19154,19180,19184,19192,19200,19208,19216,19224,19232,19240],{"__ignoreMap":544},[605,19013,19014,19016,19018,19020,19022,19024,19026,19028,19030],{"class":607,"line":545},[605,19015,611],{"class":610},[605,19017,615],{"class":614},[605,19019,619],{"class":618},[605,19021,622],{"class":618},[605,19023,625],{"class":610},[605,19025,628],{"class":610},[605,19027,632],{"class":631},[605,19029,628],{"class":610},[605,19031,637],{"class":610},[605,19033,19034,19036,19038,19040,19042,19044,19046,19048],{"class":607,"line":546},[605,19035,645],{"class":644},[605,19037,648],{"class":610},[605,19039,658],{"class":651},[605,19041,661],{"class":610},[605,19043,664],{"class":644},[605,19045,667],{"class":610},[605,19047,670],{"class":631},[605,19049,673],{"class":610},[605,19051,19052,19054,19056,19058,19060,19062,19064,19066],{"class":607,"line":676},[605,19053,645],{"class":644},[605,19055,648],{"class":610},[605,19057,683],{"class":651},[605,19059,661],{"class":610},[605,19061,664],{"class":644},[605,19063,667],{"class":610},[605,19065,692],{"class":631},[605,19067,673],{"class":610},[605,19069,19070,19072,19074,19076,19078,19080],{"class":607,"line":697},[605,19071,645],{"class":644},[605,19073,10666],{"class":651},[605,19075,10669],{"class":644},[605,19077,667],{"class":610},[605,19079,10674],{"class":631},[605,19081,673],{"class":610},[605,19083,19084,19086,19088],{"class":607,"line":707},[605,19085,700],{"class":610},[605,19087,615],{"class":614},[605,19089,637],{"class":610},[605,19091,19092],{"class":607,"line":713},[605,19093,710],{"emptyLinePlaceholder":562},[605,19095,19096,19098,19100],{"class":607,"line":723},[605,19097,611],{"class":610},[605,19099,718],{"class":614},[605,19101,637],{"class":610},[605,19103,19104,19106,19108,19110,19112,19114,19116,19118],{"class":607,"line":746},[605,19105,726],{"class":610},[605,19107,729],{"class":614},[605,19109,732],{"class":618},[605,19111,625],{"class":610},[605,19113,628],{"class":610},[605,19115,6322],{"class":631},[605,19117,628],{"class":610},[605,19119,637],{"class":610},[605,19121,19122,19124],{"class":607,"line":758},[605,19123,749],{"class":610},[605,19125,19126],{"class":614},"TresPerspectiveCamera\n",[605,19128,19129,19131,19133,19135,19137,19139,19141,19143,19145,19147,19150,19152],{"class":607,"line":768},[605,19130,5693],{"class":610},[605,19132,1459],{"class":618},[605,19134,625],{"class":610},[605,19136,628],{"class":610},[605,19138,1466],{"class":610},[605,19140,937],{"class":791},[605,19142,1471],{"class":610},[605,19144,2396],{"class":791},[605,19146,1471],{"class":610},[605,19148,19149],{"class":791},"9",[605,19151,1481],{"class":610},[605,19153,2987],{"class":610},[605,19155,19156,19158,19160,19162,19164,19166,19168,19170,19172,19174,19176,19178],{"class":607,"line":773},[605,19157,5693],{"class":610},[605,19159,3440],{"class":618},[605,19161,625],{"class":610},[605,19163,628],{"class":610},[605,19165,1466],{"class":610},[605,19167,937],{"class":791},[605,19169,1471],{"class":610},[605,19171,1893],{"class":791},[605,19173,1471],{"class":610},[605,19175,937],{"class":791},[605,19177,1481],{"class":610},[605,19179,2987],{"class":610},[605,19181,19182],{"class":607,"line":799},[605,19183,10816],{"class":610},[605,19185,19186,19188,19190],{"class":607,"line":599},[605,19187,749],{"class":610},[605,19189,763],{"class":614},[605,19191,755],{"class":610},[605,19193,19194,19196,19198],{"class":607,"line":822},[605,19195,749],{"class":610},[605,19197,14995],{"class":614},[605,19199,637],{"class":610},[605,19201,19202,19204,19206],{"class":607,"line":833},[605,19203,825],{"class":610},[605,19205,10762],{"class":614},[605,19207,755],{"class":610},[605,19209,19210,19212,19214],{"class":607,"line":844},[605,19211,867],{"class":610},[605,19213,14995],{"class":614},[605,19215,637],{"class":610},[605,19217,19218,19220,19222],{"class":607,"line":854},[605,19219,749],{"class":610},[605,19221,3067],{"class":614},[605,19223,755],{"class":610},[605,19225,19226,19228,19230],{"class":607,"line":600},[605,19227,749],{"class":610},[605,19229,3518],{"class":614},[605,19231,755],{"class":610},[605,19233,19234,19236,19238],{"class":607,"line":874},[605,19235,877],{"class":610},[605,19237,729],{"class":614},[605,19239,637],{"class":610},[605,19241,19242,19244,19246],{"class":607,"line":884},[605,19243,700],{"class":610},[605,19245,718],{"class":614},[605,19247,637],{"class":610},[594,19249,19253],{"className":596,"code":19250,"filename":19251,"highlights":19252,"language":601,"meta":544,"style":544},"\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",[676,746,599],[586,19254,19255,19275,19293,19318,19322,19337,19348,19361,19395,19403,19407,19415,19448,19469,19477],{"__ignoreMap":544},[605,19256,19257,19259,19261,19263,19265,19267,19269,19271,19273],{"class":607,"line":545},[605,19258,611],{"class":610},[605,19260,615],{"class":614},[605,19262,619],{"class":618},[605,19264,622],{"class":618},[605,19266,625],{"class":610},[605,19268,628],{"class":610},[605,19270,632],{"class":631},[605,19272,628],{"class":610},[605,19274,637],{"class":610},[605,19276,19277,19279,19281,19283,19285,19287,19289,19291],{"class":607,"line":546},[605,19278,645],{"class":644},[605,19280,648],{"class":610},[605,19282,5431],{"class":651},[605,19284,661],{"class":610},[605,19286,664],{"class":644},[605,19288,667],{"class":610},[605,19290,601],{"class":631},[605,19292,673],{"class":610},[605,19294,19296,19298,19300,19303,19305,19308,19310,19312,19314,19316],{"class":19295,"line":676},[607,641],[605,19297,645],{"class":644},[605,19299,648],{"class":610},[605,19301,19302],{"class":651}," Sphere",[605,19304,655],{"class":610},[605,19306,19307],{"class":651}," useVideoTexture",[605,19309,661],{"class":610},[605,19311,664],{"class":644},[605,19313,667],{"class":610},[605,19315,670],{"class":631},[605,19317,673],{"class":610},[605,19319,19320],{"class":607,"line":697},[605,19321,710],{"emptyLinePlaceholder":562},[605,19323,19324,19326,19329,19331,19333,19335],{"class":607,"line":707},[605,19325,2689],{"class":618},[605,19327,19328],{"class":651}," videoPath ",[605,19330,625],{"class":610},[605,19332,667],{"class":610},[605,19334,12038],{"class":631},[605,19336,673],{"class":610},[605,19338,19339,19341,19343,19346],{"class":607,"line":713},[605,19340,12045],{"class":610},[605,19342,667],{"class":610},[605,19344,19345],{"class":631},"Tresjs/assets/main/textures/video-textures/useVideoTexture.mp4",[605,19347,673],{"class":610},[605,19349,19350,19352,19355,19357,19359],{"class":607,"line":723},[605,19351,2689],{"class":618},[605,19353,19354],{"class":651}," texture ",[605,19356,625],{"class":610},[605,19358,5431],{"class":2800},[605,19360,2846],{"class":651},[605,19362,19364,19366,19368,19371,19373,19375,19377,19380,19382,19384,19387,19389,19391,19393],{"class":19363,"line":746},[607,641],[605,19365,13433],{"class":651},[605,19367,1118],{"class":610},[605,19369,19370],{"class":651},"value ",[605,19372,625],{"class":610},[605,19374,18546],{"class":644},[605,19376,19307],{"class":2800},[605,19378,19379],{"class":651},"(videoPath",[605,19381,655],{"class":610},[605,19383,648],{"class":610},[605,19385,19386],{"class":614}," loop",[605,19388,1190],{"class":610},[605,19390,15608],{"class":3870},[605,19392,661],{"class":610},[605,19394,5539],{"class":651},[605,19396,19397,19399,19401],{"class":607,"line":758},[605,19398,700],{"class":610},[605,19400,615],{"class":614},[605,19402,637],{"class":610},[605,19404,19405],{"class":607,"line":768},[605,19406,710],{"emptyLinePlaceholder":562},[605,19408,19409,19411,19413],{"class":607,"line":773},[605,19410,611],{"class":610},[605,19412,718],{"class":614},[605,19414,637],{"class":610},[605,19416,19417,19420,19422,19424,19426,19428,19430,19432,19434,19436,19438,19440,19442,19444,19446],{"class":607,"line":799},[605,19418,19419],{"class":610},"   \u003C",[605,19421,257],{"class":614},[605,19423,781],{"class":610},[605,19425,1459],{"class":618},[605,19427,625],{"class":610},[605,19429,628],{"class":610},[605,19431,1466],{"class":610},[605,19433,937],{"class":791},[605,19435,1471],{"class":610},[605,19437,792],{"class":791},[605,19439,1471],{"class":610},[605,19441,937],{"class":791},[605,19443,1481],{"class":610},[605,19445,628],{"class":610},[605,19447,637],{"class":610},[605,19449,19451,19453,19455,19457,19459,19461,19463,19465,19467],{"class":19450,"line":599},[607,641],[605,19452,825],{"class":610},[605,19454,2425],{"class":614},[605,19456,781],{"class":610},[605,19458,13426],{"class":618},[605,19460,625],{"class":610},[605,19462,628],{"class":610},[605,19464,13433],{"class":651},[605,19466,628],{"class":610},[605,19468,755],{"class":610},[605,19470,19471,19473,19475],{"class":607,"line":822},[605,19472,867],{"class":610},[605,19474,257],{"class":614},[605,19476,637],{"class":610},[605,19478,19479,19481,19483],{"class":607,"line":833},[605,19480,700],{"class":610},[605,19482,718],{"class":614},[605,19484,637],{"class":610},[472,19486,894],{"id":893},[899,19488,19489,19499],{},[902,19490,19491],{},[905,19492,19493,19495,19497],{},[908,19494,910],{"align":969},[908,19496,913],{"align":969},[908,19498,916],{},[918,19500,19501,19514,19528,19543,19555,19567,19578],{},[905,19502,19503,19507,19510],{},[923,19504,19505],{"align":969},[586,19506,18113],{},[923,19508,19509],{"align":969},"Path to the video.",[923,19511,19512],{},[586,19513,1151],{},[905,19515,19516,19521,19523],{},[923,19517,19518],{"align":969},[586,19519,19520],{},"unsuspend",[923,19522,11877],{"align":969},[923,19524,19525],{},[586,19526,19527],{},"loadedmetadata",[905,19529,19530,19535,19538],{},[923,19531,19532],{"align":969},[586,19533,19534],{},"crossOrigin",[923,19536,19537],{"align":969},"Whether to use CORS to fetch the related video.",[923,19539,19540],{},[586,19541,19542],{},"Anonymous",[905,19544,19545,19550,19553],{},[923,19546,19547],{"align":969},[586,19548,19549],{},"muted",[923,19551,19552],{"align":969},"Whether to set the audio silenced.",[923,19554,933],{},[905,19556,19557,19562,19565],{},[923,19558,19559],{"align":969},[586,19560,19561],{},"loop",[923,19563,19564],{"align":969},"Automatically seek back to the start upon reaching the end of the video.",[923,19566,933],{},[905,19568,19569,19573,19576],{},[923,19570,19571],{"align":969},[586,19572,7773],{},[923,19574,19575],{"align":969},"To play to the video once loaded or not.",[923,19577,933],{},[905,19579,19580,19585,19588],{},[923,19581,19582],{"align":969},[586,19583,19584],{},"playsInline",[923,19586,19587],{"align":969},"To be play the video inline or not.",[923,19589,933],{},[3136,19591,19592],{},[3139,19593,19594,19595,19598],{},"Any other attribute for a ",[586,19596,19597],{},"\u003Cvideo>"," tag is accepted and will automatically set",[1299,19600,19601],{},"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":544,"searchDepth":545,"depth":546,"links":19603},[19604,19605],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},"A composable to load video textures in TresJS scenes.",{},{"title":149,"description":19606},"B0IudWGxB6H8-Wl16oRdCL8g07LFjZcBL6tZkeTIFLM",[19611,20105,20748,21216,21388,22219,22541],{"id":19612,"title":159,"body":19613,"description":20101,"extension":559,"links":560,"meta":20102,"navigation":562,"path":160,"seo":20103,"stem":161,"__hash__":20104},"docs/2.api/4.materials/custom-shader-material.md",{"type":469,"value":19614,"toc":20097},[19615,19620,19640,19642,20078,20080,20094],[2558,19616,19617],{},[19618,19619],"materials-custom-shader-material",{},[582,19621,2253,19622,19624,19625,19628,19629,19636,19637,1118],{},[586,19623,2256],{}," package provides ",[586,19626,19627],{},"\u003CTresCustomShaderMaterial />"," component which is a wrapper around the ",[1112,19630,19633],{"href":19631,"rel":19632},"https://github.com/FarazzShaikh/THREE-CustomShaderMaterial",[1116],[586,19634,19635],{},"three-custom-shader-material"," class. As states in the repo, it ",[1677,19638,19639],{},"\"lets you extend Three.js' material library with your own Vertex and Fragment shaders\"",[472,19641,15],{"id":592},[594,19643,19646],{"className":596,"code":19644,"highlights":19645,"language":601,"meta":544,"style":544},"\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",[546,599,822,833,844,854,600,874,884,2952,2960,2990,3007,3022,3047,2591],[586,19647,19648,19668,19688,19706,19710,19723,19731,19735,19743,19751,19783,19791,19799,19807,19822,19839,19856,19870,19888,19924,19946,19954,19969,19990,20005,20011,20026,20042,20046,20054,20062,20070],{"__ignoreMap":544},[605,19649,19650,19652,19654,19656,19658,19660,19662,19664,19666],{"class":607,"line":545},[605,19651,611],{"class":610},[605,19653,615],{"class":614},[605,19655,619],{"class":618},[605,19657,622],{"class":618},[605,19659,625],{"class":610},[605,19661,628],{"class":610},[605,19663,632],{"class":631},[605,19665,628],{"class":610},[605,19667,637],{"class":610},[605,19669,19671,19673,19675,19678,19680,19682,19684,19686],{"class":19670,"line":546},[607,641],[605,19672,645],{"class":644},[605,19674,648],{"class":610},[605,19676,19677],{"class":651}," TresCustomShaderMaterial",[605,19679,661],{"class":610},[605,19681,664],{"class":644},[605,19683,667],{"class":610},[605,19685,670],{"class":631},[605,19687,673],{"class":610},[605,19689,19690,19692,19694,19696,19698,19700,19702,19704],{"class":607,"line":676},[605,19691,645],{"class":644},[605,19693,648],{"class":610},[605,19695,9716],{"class":651},[605,19697,661],{"class":610},[605,19699,664],{"class":644},[605,19701,667],{"class":610},[605,19703,601],{"class":631},[605,19705,673],{"class":610},[605,19707,19708],{"class":607,"line":697},[605,19709,710],{"emptyLinePlaceholder":562},[605,19711,19712,19714,19717,19719,19721],{"class":607,"line":707},[605,19713,2689],{"class":618},[605,19715,19716],{"class":651}," customShaderMaterialRef ",[605,19718,625],{"class":610},[605,19720,9716],{"class":2800},[605,19722,2846],{"class":651},[605,19724,19725,19727,19729],{"class":607,"line":713},[605,19726,700],{"class":610},[605,19728,615],{"class":614},[605,19730,637],{"class":610},[605,19732,19733],{"class":607,"line":723},[605,19734,710],{"emptyLinePlaceholder":562},[605,19736,19737,19739,19741],{"class":607,"line":746},[605,19738,611],{"class":610},[605,19740,718],{"class":614},[605,19742,637],{"class":610},[605,19744,19745,19747,19749],{"class":607,"line":758},[605,19746,726],{"class":610},[605,19748,729],{"class":614},[605,19750,637],{"class":610},[605,19752,19753,19755,19757,19759,19761,19763,19765,19767,19769,19771,19773,19775,19777,19779,19781],{"class":607,"line":768},[605,19754,749],{"class":610},[605,19756,752],{"class":614},[605,19758,781],{"class":610},[605,19760,1459],{"class":618},[605,19762,625],{"class":610},[605,19764,628],{"class":610},[605,19766,1466],{"class":610},[605,19768,4160],{"class":791},[605,19770,1471],{"class":610},[605,19772,4160],{"class":791},[605,19774,1471],{"class":610},[605,19776,4160],{"class":791},[605,19778,1481],{"class":610},[605,19780,628],{"class":610},[605,19782,755],{"class":610},[605,19784,19785,19787,19789],{"class":607,"line":773},[605,19786,749],{"class":610},[605,19788,828],{"class":614},[605,19790,637],{"class":610},[605,19792,19793,19795,19797],{"class":607,"line":799},[605,19794,825],{"class":610},[605,19796,839],{"class":614},[605,19798,755],{"class":610},[605,19800,19802,19804],{"class":19801,"line":599},[607,641],[605,19803,825],{"class":610},[605,19805,19806],{"class":614},"TresCustomShaderMaterial\n",[605,19808,19810,19813,19815,19817,19820],{"class":19809,"line":822},[607,641],[605,19811,19812],{"class":618},"        ref",[605,19814,625],{"class":610},[605,19816,628],{"class":610},[605,19818,19819],{"class":631},"customShaderMaterialRef",[605,19821,2987],{"class":610},[605,19823,19825,19827,19830,19832,19834,19837],{"class":19824,"line":833},[607,641],[605,19826,2993],{"class":610},[605,19828,19829],{"class":618},"vertex-shader",[605,19831,625],{"class":610},[605,19833,628],{"class":610},[605,19835,19836],{"class":651},"vertexShader",[605,19838,2987],{"class":610},[605,19840,19842,19844,19847,19849,19851,19854],{"class":19841,"line":844},[607,641],[605,19843,2993],{"class":610},[605,19845,19846],{"class":618},"fragment-shader",[605,19848,625],{"class":610},[605,19850,628],{"class":610},[605,19852,19853],{"class":651},"fragmentShader",[605,19855,2987],{"class":610},[605,19857,19859,19861,19864,19866,19868],{"class":19858,"line":854},[607,641],[605,19860,2993],{"class":610},[605,19862,19863],{"class":618},"uniforms",[605,19865,625],{"class":610},[605,19867,628],{"class":610},[605,19869,2751],{"class":610},[605,19871,19873,19876,19879,19881,19883,19885],{"class":19872,"line":600},[607,641],[605,19874,19875],{"class":614},"          u_time",[605,19877,19878],{"class":610},": { ",[605,19880,5496],{"class":614},[605,19882,7407],{"class":610},[605,19884,937],{"class":791},[605,19886,19887],{"class":610}," },\n",[605,19889,19891,19894,19896,19898,19901,19904,19906,19909,19911,19913,19915,19917,19919,19921],{"class":19890,"line":874},[607,641],[605,19892,19893],{"class":614},"          u_color",[605,19895,19878],{"class":610},[605,19897,5496],{"class":614},[605,19899,19900],{"class":610},": new ",[605,19902,19903],{"class":651},"THREE",[605,19905,1118],{"class":610},[605,19907,19908],{"class":2800},"Color",[605,19910,2970],{"class":610},[605,19912,8085],{"class":791},[605,19914,1471],{"class":610},[605,19916,7207],{"class":791},[605,19918,1471],{"class":610},[605,19920,2203],{"class":791},[605,19922,19923],{"class":610},") },\n",[605,19925,19927,19930,19932,19934,19936,19938,19940,19943],{"class":19926,"line":884},[607,641],[605,19928,19929],{"class":614},"          u_resolution",[605,19931,19878],{"class":610},[605,19933,5496],{"class":614},[605,19935,19900],{"class":610},[605,19937,19903],{"class":651},[605,19939,1118],{"class":610},[605,19941,19942],{"class":2800},"Vector2",[605,19944,19945],{"class":610},"() }\n",[605,19947,19949,19952],{"class":19948,"line":2952},[607,641],[605,19950,19951],{"class":610},"        }",[605,19953,2987],{"class":610},[605,19955,19957,19959,19961,19963,19965,19967],{"class":19956,"line":2960},[607,641],[605,19958,2993],{"class":610},[605,19960,4873],{"class":618},[605,19962,625],{"class":610},[605,19964,628],{"class":610},[605,19966,933],{"class":3870},[605,19968,2987],{"class":610},[605,19970,19972,19974,19977,19979,19981,19983,19985,19988],{"class":19971,"line":2990},[607,641],[605,19973,2993],{"class":610},[605,19975,19976],{"class":618},"side",[605,19978,625],{"class":610},[605,19980,628],{"class":610},[605,19982,19903],{"class":651},[605,19984,1118],{"class":610},[605,19986,19987],{"class":651},"DoubleSide",[605,19989,2987],{"class":610},[605,19991,19993,19996,19998,20000,20003],{"class":19992,"line":3007},[607,641],[605,19994,19995],{"class":618},"        base-material",[605,19997,625],{"class":610},[605,19999,628],{"class":610},[605,20001,20002],{"class":631},"MeshLambertMaterial",[605,20004,2987],{"class":610},[605,20006,20008],{"class":20007,"line":3022},[607,641],[605,20009,20010],{"class":618},"        silent\n",[605,20012,20014,20016,20018,20020,20022,20024],{"class":20013,"line":3047},[607,641],[605,20015,2993],{"class":610},[605,20017,13426],{"class":618},[605,20019,625],{"class":610},[605,20021,628],{"class":610},[605,20023,13433],{"class":651},[605,20025,2987],{"class":610},[605,20027,20029,20031,20033,20035,20037,20040],{"class":20028,"line":2591},[607,641],[605,20030,2993],{"class":610},[605,20032,2500],{"class":618},[605,20034,625],{"class":610},[605,20036,628],{"class":610},[605,20038,20039],{"class":791},"0xff0000",[605,20041,2987],{"class":610},[605,20043,20044],{"class":607,"line":3062},[605,20045,3050],{"class":610},[605,20047,20048,20050,20052],{"class":607,"line":3092},[605,20049,867],{"class":610},[605,20051,828],{"class":614},[605,20053,637],{"class":610},[605,20055,20056,20058,20060],{"class":607,"line":3101},[605,20057,749],{"class":610},[605,20059,3518],{"class":614},[605,20061,755],{"class":610},[605,20063,20064,20066,20068],{"class":607,"line":4207},[605,20065,877],{"class":610},[605,20067,729],{"class":614},[605,20069,637],{"class":610},[605,20071,20072,20074,20076],{"class":607,"line":4212},[605,20073,700],{"class":610},[605,20075,718],{"class":614},[605,20077,637],{"class":610},[472,20079,894],{"id":893},[582,20081,20082,20083,20086,20087,20089,20090,1118],{},"Being a wrapper around the ",[586,20084,20085],{},"CustomShaderMaterial"," class, the ",[586,20088,19627],{}," component accepts all the props that the class does. You can find the full list of props in the ",[1112,20091,20093],{"href":19631,"rel":20092},[1116],"official repo",[1299,20095,20096],{},"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":544,"searchDepth":545,"depth":546,"links":20098},[20099,20100],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},"Extends Three.js' material library with your own Vertex and Fragment shaders.",{},{"title":159,"description":20101},"WirW-L7fmUIEqDL1ownbJUS8vqN1Ie6ubq6WxZ9mH-o",{"id":20106,"title":163,"body":20107,"description":20744,"extension":559,"links":560,"meta":20745,"navigation":562,"path":164,"seo":20746,"stem":165,"__hash__":20747},"docs/2.api/4.materials/glass-material.md",{"type":469,"value":20108,"toc":20735},[20109,20114,20126,20128,20132,20370,20372,20379,20383,20720,20724,20732],[2558,20110,20111],{},[20112,20113],"materials-glass-material",{},[582,20115,2253,20116,20118,20119,20122,20123,1118],{},[586,20117,2256],{}," package provides a new",[586,20120,20121],{},"\u003CMeshGlassMaterial />"," component that makes a geometry look like glass. This is achieved by re-defining the ",[586,20124,20125],{},"MeshPhysicalMaterial",[472,20127,15],{"id":592},[7473,20129,20131],{"id":20130},"you-can-use-it-like-you-normally-do-with-tresjs","You can use it like you normally do with TresJs",[594,20133,20136],{"className":596,"code":20134,"highlights":20135,"language":601,"meta":544,"style":544},"\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",[546,768],[586,20137,20138,20158,20177,20196,20204,20208,20216,20224,20280,20288,20297,20306,20314,20322,20354,20362],{"__ignoreMap":544},[605,20139,20140,20142,20144,20146,20148,20150,20152,20154,20156],{"class":607,"line":545},[605,20141,611],{"class":610},[605,20143,615],{"class":614},[605,20145,619],{"class":618},[605,20147,622],{"class":618},[605,20149,625],{"class":610},[605,20151,628],{"class":610},[605,20153,632],{"class":631},[605,20155,628],{"class":610},[605,20157,637],{"class":610},[605,20159,20161,20163,20165,20167,20169,20171,20173,20175],{"class":20160,"line":546},[607,641],[605,20162,645],{"class":644},[605,20164,648],{"class":610},[605,20166,683],{"class":651},[605,20168,661],{"class":610},[605,20170,664],{"class":644},[605,20172,667],{"class":610},[605,20174,692],{"class":631},[605,20176,673],{"class":610},[605,20178,20179,20181,20183,20186,20188,20190,20192,20194],{"class":607,"line":676},[605,20180,645],{"class":644},[605,20182,648],{"class":610},[605,20184,20185],{"class":651}," MeshGlassMaterial",[605,20187,661],{"class":610},[605,20189,664],{"class":644},[605,20191,667],{"class":610},[605,20193,670],{"class":631},[605,20195,673],{"class":610},[605,20197,20198,20200,20202],{"class":607,"line":697},[605,20199,700],{"class":610},[605,20201,615],{"class":614},[605,20203,637],{"class":610},[605,20205,20206],{"class":607,"line":707},[605,20207,710],{"emptyLinePlaceholder":562},[605,20209,20210,20212,20214],{"class":607,"line":713},[605,20211,611],{"class":610},[605,20213,718],{"class":614},[605,20215,637],{"class":610},[605,20217,20218,20220,20222],{"class":607,"line":723},[605,20219,726],{"class":610},[605,20221,729],{"class":614},[605,20223,637],{"class":610},[605,20225,20226,20228,20230,20232,20234,20236,20238,20240,20242,20244,20246,20248,20250,20252,20254,20256,20258,20260,20262,20264,20266,20268,20270,20272,20274,20276,20278],{"class":607,"line":746},[605,20227,749],{"class":610},[605,20229,752],{"class":614},[605,20231,781],{"class":610},[605,20233,1459],{"class":618},[605,20235,625],{"class":610},[605,20237,628],{"class":610},[605,20239,1466],{"class":610},[605,20241,4160],{"class":791},[605,20243,1471],{"class":610},[605,20245,4160],{"class":791},[605,20247,1471],{"class":610},[605,20249,4160],{"class":791},[605,20251,1481],{"class":610},[605,20253,628],{"class":610},[605,20255,781],{"class":610},[605,20257,3440],{"class":618},[605,20259,625],{"class":610},[605,20261,628],{"class":610},[605,20263,1466],{"class":610},[605,20265,937],{"class":791},[605,20267,1471],{"class":610},[605,20269,937],{"class":791},[605,20271,1471],{"class":610},[605,20273,937],{"class":791},[605,20275,1481],{"class":610},[605,20277,628],{"class":610},[605,20279,755],{"class":610},[605,20281,20282,20284,20286],{"class":607,"line":758},[605,20283,749],{"class":610},[605,20285,828],{"class":614},[605,20287,637],{"class":610},[605,20289,20291,20293,20295],{"class":20290,"line":768},[607,641],[605,20292,825],{"class":610},[605,20294,5127],{"class":614},[605,20296,755],{"class":610},[605,20298,20299,20301,20304],{"class":607,"line":773},[605,20300,825],{"class":610},[605,20302,20303],{"class":614},"MeshGlassMaterial",[605,20305,755],{"class":610},[605,20307,20308,20310,20312],{"class":607,"line":799},[605,20309,867],{"class":610},[605,20311,828],{"class":614},[605,20313,637],{"class":610},[605,20315,20316,20318,20320],{"class":607,"line":599},[605,20317,749],{"class":610},[605,20319,3518],{"class":614},[605,20321,755],{"class":610},[605,20323,20324,20326,20328,20330,20332,20334,20336,20338,20340,20342,20344,20346,20348,20350,20352],{"class":607,"line":822},[605,20325,749],{"class":610},[605,20327,3539],{"class":614},[605,20329,781],{"class":610},[605,20331,1459],{"class":618},[605,20333,625],{"class":610},[605,20335,628],{"class":610},[605,20337,1466],{"class":610},[605,20339,937],{"class":791},[605,20341,1471],{"class":610},[605,20343,792],{"class":791},[605,20345,1471],{"class":610},[605,20347,3490],{"class":791},[605,20349,1481],{"class":610},[605,20351,628],{"class":610},[605,20353,755],{"class":610},[605,20355,20356,20358,20360],{"class":607,"line":833},[605,20357,877],{"class":610},[605,20359,729],{"class":614},[605,20361,637],{"class":610},[605,20363,20364,20366,20368],{"class":607,"line":844},[605,20365,700],{"class":610},[605,20367,718],{"class":614},[605,20369,637],{"class":610},[472,20371,894],{"id":893},[582,20373,20374,20375,20378],{},"No props are required. The component extends ",[586,20376,20377],{},"THREE.MeshPhysicalMaterial"," and accepts all the same props plus additional reflection-specific properties.",[7473,20380,20382],{"id":20381},"you-can-also-replace-the-material-of-an-existing-mesh-like-this","You can also replace the material of an existing mesh like this:",[594,20384,20387],{"className":596,"code":20385,"highlights":20386,"language":601,"meta":544,"style":544},"\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",[697,713,723,746,758,768,773,799,599,822,833,884],[586,20388,20389,20409,20435,20453,20476,20480,20494,20507,20512,20529,20535,20560,20565,20571,20597,20604,20612,20620,20628,20636,20656,20664,20669,20687,20695,20704,20712],{"__ignoreMap":544},[605,20390,20391,20393,20395,20397,20399,20401,20403,20405,20407],{"class":607,"line":545},[605,20392,611],{"class":610},[605,20394,615],{"class":614},[605,20396,619],{"class":618},[605,20398,622],{"class":618},[605,20400,625],{"class":610},[605,20402,628],{"class":610},[605,20404,632],{"class":631},[605,20406,628],{"class":610},[605,20408,637],{"class":610},[605,20410,20411,20413,20415,20417,20419,20421,20423,20425,20427,20429,20431,20433],{"class":607,"line":546},[605,20412,645],{"class":644},[605,20414,648],{"class":610},[605,20416,5431],{"class":651},[605,20418,655],{"class":610},[605,20420,9716],{"class":651},[605,20422,655],{"class":610},[605,20424,5436],{"class":651},[605,20426,661],{"class":610},[605,20428,664],{"class":644},[605,20430,667],{"class":610},[605,20432,601],{"class":631},[605,20434,673],{"class":610},[605,20436,20437,20439,20441,20443,20445,20447,20449,20451],{"class":607,"line":676},[605,20438,645],{"class":644},[605,20440,648],{"class":610},[605,20442,683],{"class":651},[605,20444,661],{"class":610},[605,20446,664],{"class":644},[605,20448,667],{"class":610},[605,20450,692],{"class":631},[605,20452,673],{"class":610},[605,20454,20456,20458,20460,20462,20464,20466,20468,20470,20472,20474],{"class":20455,"line":697},[607,641],[605,20457,645],{"class":644},[605,20459,648],{"class":610},[605,20461,20185],{"class":651},[605,20463,655],{"class":610},[605,20465,1369],{"class":651},[605,20467,661],{"class":610},[605,20469,664],{"class":644},[605,20471,667],{"class":610},[605,20473,670],{"class":631},[605,20475,673],{"class":610},[605,20477,20478],{"class":607,"line":707},[605,20479,710],{"emptyLinePlaceholder":562},[605,20481,20483,20485,20488,20490,20492],{"class":20482,"line":713},[607,641],[605,20484,2689],{"class":618},[605,20486,20487],{"class":651}," glassMaterialRef ",[605,20489,625],{"class":610},[605,20491,9716],{"class":2800},[605,20493,2846],{"class":651},[605,20495,20497,20499,20501,20503,20505],{"class":20496,"line":723},[607,641],[605,20498,2689],{"class":618},[605,20500,9711],{"class":651},[605,20502,625],{"class":610},[605,20504,9716],{"class":2800},[605,20506,2846],{"class":651},[605,20508,20510],{"class":20509,"line":746},[607,641],[605,20511,710],{"emptyLinePlaceholder":562},[605,20513,20515,20517,20520,20522,20525,20527],{"class":20514,"line":758},[607,641],[605,20516,5485],{"class":2800},[605,20518,20519],{"class":651},"(glassMaterialRef",[605,20521,655],{"class":610},[605,20523,20524],{"class":5495}," value",[605,20526,5501],{"class":618},[605,20528,1176],{"class":610},[605,20530,20532],{"class":20531,"line":768},[607,641],[605,20533,20534],{"class":1181},"  // For good practice we dispose the old material\n",[605,20536,20538,20541,20543,20545,20547,20550,20552,20554,20556,20558],{"class":20537,"line":773},[607,641],[605,20539,20540],{"class":651},"  boxRef",[605,20542,1118],{"class":610},[605,20544,5496],{"class":651},[605,20546,1118],{"class":610},[605,20548,20549],{"class":651},"instance",[605,20551,1118],{"class":610},[605,20553,15798],{"class":651},[605,20555,1118],{"class":610},[605,20557,16221],{"class":2800},[605,20559,2846],{"class":614},[605,20561,20563],{"class":20562,"line":799},[607,641],[605,20564,710],{"emptyLinePlaceholder":562},[605,20566,20568],{"class":20567,"line":599},[607,641],[605,20569,20570],{"class":1181},"  // We assign the new MeshGlassMaterialClass\n",[605,20572,20574,20576,20578,20580,20582,20584,20586,20588,20590,20592,20594],{"class":20573,"line":822},[607,641],[605,20575,20540],{"class":651},[605,20577,1118],{"class":610},[605,20579,5496],{"class":651},[605,20581,1118],{"class":610},[605,20583,20549],{"class":651},[605,20585,1118],{"class":610},[605,20587,15798],{"class":651},[605,20589,2766],{"class":610},[605,20591,20524],{"class":651},[605,20593,1118],{"class":610},[605,20595,20596],{"class":651},"MeshGlassMaterialClass\n",[605,20598,20600,20602],{"class":20599,"line":833},[607,641],[605,20601,5544],{"class":610},[605,20603,5539],{"class":651},[605,20605,20606,20608,20610],{"class":607,"line":844},[605,20607,700],{"class":610},[605,20609,615],{"class":614},[605,20611,637],{"class":610},[605,20613,20614,20616,20618],{"class":607,"line":854},[605,20615,611],{"class":610},[605,20617,718],{"class":614},[605,20619,637],{"class":610},[605,20621,20622,20624,20626],{"class":607,"line":600},[605,20623,726],{"class":610},[605,20625,828],{"class":614},[605,20627,637],{"class":610},[605,20629,20630,20632,20634],{"class":607,"line":874},[605,20631,749],{"class":610},[605,20633,5127],{"class":614},[605,20635,755],{"class":610},[605,20637,20639,20641,20643,20645,20647,20649,20652,20654],{"class":20638,"line":884},[607,641],[605,20640,749],{"class":610},[605,20642,20303],{"class":614},[605,20644,5431],{"class":618},[605,20646,625],{"class":610},[605,20648,628],{"class":610},[605,20650,20651],{"class":631},"glassMaterialRef",[605,20653,628],{"class":610},[605,20655,755],{"class":610},[605,20657,20658,20660,20662],{"class":607,"line":2952},[605,20659,877],{"class":610},[605,20661,828],{"class":614},[605,20663,637],{"class":610},[605,20665,20666],{"class":607,"line":2960},[605,20667,20668],{"class":1181},"  \u003C!-- Mesh to be replaced -->\n",[605,20670,20671,20673,20675,20677,20679,20681,20683,20685],{"class":607,"line":2990},[605,20672,726],{"class":610},[605,20674,828],{"class":614},[605,20676,5431],{"class":618},[605,20678,625],{"class":610},[605,20680,628],{"class":610},[605,20682,9809],{"class":631},[605,20684,628],{"class":610},[605,20686,637],{"class":610},[605,20688,20689,20691,20693],{"class":607,"line":3007},[605,20690,749],{"class":610},[605,20692,839],{"class":614},[605,20694,755],{"class":610},[605,20696,20697,20699,20702],{"class":607,"line":3022},[605,20698,749],{"class":610},[605,20700,20701],{"class":614},"MeshBasicMaterial",[605,20703,7459],{"class":610},[605,20705,20706,20708,20710],{"class":607,"line":3047},[605,20707,877],{"class":610},[605,20709,828],{"class":614},[605,20711,637],{"class":610},[605,20713,20714,20716,20718],{"class":607,"line":2591},[605,20715,700],{"class":610},[605,20717,718],{"class":614},[605,20719,637],{"class":610},[472,20721,20723],{"id":20722},"tips","Tips",[3136,20725,20726,20729],{},[3139,20727,20728],{},"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",[3139,20730,20731],{},"Another good option is to provide a normal texture as clearcoatNormalMap to add different results",[1299,20733,20734],{},"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":544,"searchDepth":545,"depth":546,"links":20736},[20737,20740,20743],{"id":592,"depth":546,"text":15,"children":20738},[20739],{"id":20130,"depth":676,"text":20131},{"id":893,"depth":546,"text":894,"children":20741},[20742],{"id":20381,"depth":676,"text":20382},{"id":20722,"depth":546,"text":20723},"Makes a geometry look like glass by re-defining the MeshPhysicalMaterial.",{},{"title":163,"description":20744},"XeLIOrrqO5hF6DK2JnTAyGusif0o80_d6hTc8m5QJQE",{"id":20749,"title":167,"body":20750,"description":21212,"extension":559,"links":560,"meta":21213,"navigation":562,"path":168,"seo":21214,"stem":169,"__hash__":21215},"docs/2.api/4.materials/holographic-material.md",{"type":469,"value":20751,"toc":21207},[20752,20757,20761,20764,20767,20772,20774,20982,20984,21205],[576,20753,20754],{},[20755,20756],"materials-holographic-material",{},[472,20758,20760],{"id":20759},"a-simple-to-use-holographic-material-for-tresjs","A simple to use holographic material for TresJS",[582,20762,20763],{},"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.",[582,20765,20766],{},"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.",[2046,20768,20769],{},[582,20770,20771],{},"This component ports Anderson Mancini's threejs-vanilla-holographic-material to TresJS. All credit goes to him.",[472,20773,15],{"id":592},[594,20775,20778],{"className":596,"code":20776,"highlights":20777,"language":601,"meta":544,"style":544},"\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",[676,768],[586,20779,20780,20800,20818,20842,20846,20854,20862,20870,20920,20940,20950,20958,20966,20974],{"__ignoreMap":544},[605,20781,20782,20784,20786,20788,20790,20792,20794,20796,20798],{"class":607,"line":545},[605,20783,611],{"class":610},[605,20785,615],{"class":614},[605,20787,619],{"class":618},[605,20789,622],{"class":618},[605,20791,625],{"class":610},[605,20793,628],{"class":610},[605,20795,632],{"class":631},[605,20797,628],{"class":610},[605,20799,637],{"class":610},[605,20801,20802,20804,20806,20808,20810,20812,20814,20816],{"class":607,"line":546},[605,20803,645],{"class":644},[605,20805,648],{"class":610},[605,20807,683],{"class":651},[605,20809,661],{"class":610},[605,20811,664],{"class":644},[605,20813,667],{"class":610},[605,20815,692],{"class":631},[605,20817,673],{"class":610},[605,20819,20821,20823,20825,20828,20830,20832,20834,20836,20838,20840],{"class":20820,"line":676},[607,641],[605,20822,645],{"class":644},[605,20824,648],{"class":610},[605,20826,20827],{"class":651}," HolographicMaterial",[605,20829,655],{"class":610},[605,20831,19302],{"class":651},[605,20833,661],{"class":610},[605,20835,664],{"class":644},[605,20837,667],{"class":610},[605,20839,670],{"class":631},[605,20841,673],{"class":610},[605,20843,20844],{"class":607,"line":697},[605,20845,710],{"emptyLinePlaceholder":562},[605,20847,20848,20850,20852],{"class":607,"line":707},[605,20849,700],{"class":610},[605,20851,615],{"class":614},[605,20853,637],{"class":610},[605,20855,20856,20858,20860],{"class":607,"line":713},[605,20857,611],{"class":610},[605,20859,718],{"class":614},[605,20861,637],{"class":610},[605,20863,20864,20866,20868],{"class":607,"line":723},[605,20865,726],{"class":610},[605,20867,729],{"class":614},[605,20869,637],{"class":610},[605,20871,20872,20874,20876,20878,20880,20882,20884,20886,20888,20890,20892,20894,20896,20898,20900,20902,20904,20907,20909,20911,20913,20915,20917],{"class":607,"line":746},[605,20873,749],{"class":610},[605,20875,752],{"class":614},[605,20877,781],{"class":610},[605,20879,1459],{"class":618},[605,20881,625],{"class":610},[605,20883,628],{"class":610},[605,20885,1466],{"class":610},[605,20887,4160],{"class":791},[605,20889,1471],{"class":610},[605,20891,4160],{"class":791},[605,20893,1471],{"class":610},[605,20895,4160],{"class":791},[605,20897,1481],{"class":610},[605,20899,628],{"class":610},[605,20901,781],{"class":610},[605,20903,3440],{"class":618},[605,20905,20906],{"class":610},"=[",[605,20908,937],{"class":791},[605,20910,655],{"class":610},[605,20912,937],{"class":791},[605,20914,655],{"class":610},[605,20916,937],{"class":791},[605,20918,20919],{"class":610},"] />\n",[605,20921,20922,20924,20926,20928,20930,20932,20934,20936,20938],{"class":607,"line":758},[605,20923,749],{"class":610},[605,20925,257],{"class":614},[605,20927,781],{"class":610},[605,20929,784],{"class":618},[605,20931,625],{"class":610},[605,20933,628],{"class":610},[605,20935,1513],{"class":791},[605,20937,628],{"class":610},[605,20939,637],{"class":610},[605,20941,20943,20945,20948],{"class":20942,"line":768},[607,641],[605,20944,825],{"class":610},[605,20946,20947],{"class":614},"HolographicMaterial",[605,20949,755],{"class":610},[605,20951,20952,20954,20956],{"class":607,"line":773},[605,20953,867],{"class":610},[605,20955,257],{"class":614},[605,20957,637],{"class":610},[605,20959,20960,20962,20964],{"class":607,"line":799},[605,20961,749],{"class":610},[605,20963,3518],{"class":614},[605,20965,755],{"class":610},[605,20967,20968,20970,20972],{"class":607,"line":599},[605,20969,877],{"class":610},[605,20971,729],{"class":614},[605,20973,637],{"class":610},[605,20975,20976,20978,20980],{"class":607,"line":822},[605,20977,700],{"class":610},[605,20979,718],{"class":614},[605,20981,637],{"class":610},[472,20983,894],{"id":893},[899,20985,20986,20999],{},[902,20987,20988],{},[905,20989,20990,20992,20994,20996],{},[908,20991,910],{"align":969},[908,20993,913],{"align":969},[908,20995,10957],{},[908,20997,20998],{},"default",[918,21000,21001,21020,21038,21057,21076,21094,21113,21132,21150,21168,21186],{},[905,21002,21003,21008,21011,21015],{},[923,21004,21005],{"align":969},[1673,21006,21007],{},"fresnelAmount",[923,21009,21010],{"align":969},"Value of the Fresnel effect. Ranges from 0.0 to 1.0.",[923,21012,21013],{},[586,21014,5309],{},[923,21016,21017],{},[586,21018,21019],{},"0.45",[905,21021,21022,21027,21030,21034],{},[923,21023,21024],{"align":969},[1673,21025,21026],{},"fresnelOpacity",[923,21028,21029],{"align":969},"Opacity of the Fresnel effect. Ranges from 0.0 to 1.0.",[923,21031,21032],{},[586,21033,5309],{},[923,21035,21036],{},[586,21037,7085],{},[905,21039,21040,21045,21048,21052],{},[923,21041,21042],{"align":969},[1673,21043,21044],{},"scanlineSize",[923,21046,21047],{"align":969},"Size of the scanlines. Ranges from 1 to 15.",[923,21049,21050],{},[586,21051,5309],{},[923,21053,21054],{},[586,21055,21056],{},"8.0",[905,21058,21059,21064,21067,21071],{},[923,21060,21061],{"align":969},[1673,21062,21063],{},"hologramBrightness",[923,21065,21066],{"align":969},"Brightness of the hologram. Ranges from 0.0 to 2.0.",[923,21068,21069],{},[586,21070,5309],{},[923,21072,21073],{},[586,21074,21075],{},"1.2",[905,21077,21078,21083,21086,21090],{},[923,21079,21080],{"align":969},[1673,21081,21082],{},"signalSpeed",[923,21084,21085],{"align":969},"Speed of the signal effect. Ranges from 0.0 to 2.0.",[923,21087,21088],{},[586,21089,5309],{},[923,21091,21092],{},[586,21093,21019],{},[905,21095,21096,21101,21104,21108],{},[923,21097,21098],{"align":969},[1673,21099,21100],{},"hologramColor",[923,21102,21103],{"align":969},"Specifies the color of the hologram.",[923,21105,21106],{},[586,21107,5331],{},[923,21109,21110],{},[586,21111,21112],{},"\"#00d5ff\"",[905,21114,21115,21120,21123,21128],{},[923,21116,21117],{"align":969},[1673,21118,21119],{},"enableBlinking",[923,21121,21122],{"align":969},"Enables or disables the blinking effect.",[923,21124,21125],{},[586,21126,21127],{},"Boolean",[923,21129,21130],{},[586,21131,933],{},[905,21133,21134,21139,21142,21146],{},[923,21135,21136],{"align":969},[1673,21137,21138],{},"hologramOpacity",[923,21140,21141],{"align":969},"Specifies the opacity of the hologram.",[923,21143,21144],{},[586,21145,5309],{},[923,21147,21148],{},[586,21149,7085],{},[905,21151,21152,21157,21160,21164],{},[923,21153,21154],{"align":969},[1673,21155,21156],{},"blinkFresnelOnly",[923,21158,21159],{"align":969},"Enables or disables the blinking effect for the Fresnel only.",[923,21161,21162],{},[586,21163,21127],{},[923,21165,21166],{},[586,21167,933],{},[905,21169,21170,21175,21178,21182],{},[923,21171,21172],{"align":969},[1673,21173,21174],{},"enableAdditive",[923,21176,21177],{"align":969},"Enables or disables the Additive Blend Mode.",[923,21179,21180],{},[586,21181,21127],{},[923,21183,21184],{},[586,21185,933],{},[905,21187,21188,21192,21195,21200],{},[923,21189,21190],{"align":969},[1673,21191,19976],{},[923,21193,21194],{"align":969},"Specifies side for the material, as String.",[923,21196,21197],{},[586,21198,21199],{},"THREE.FrontSide, THREE.BackSide, THREE.DoubleSide",[923,21201,21202],{},[586,21203,21204],{},"FrontSide",[1299,21206,1648],{},{"title":544,"searchDepth":545,"depth":546,"links":21208},[21209,21210,21211],{"id":20759,"depth":546,"text":20760},{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},"A simple to use holographic material for TresJS with vibrant colors, dynamic scanlines, and futuristic brilliance.",{},{"title":167,"description":21212},"EuAWgjxfRKc5q0gOJyMTEu_f96DCIfkMI5Vpvl86qvg",{"id":21217,"title":171,"body":21218,"description":21384,"extension":559,"links":560,"meta":21385,"navigation":562,"path":172,"seo":21386,"stem":173,"__hash__":21387},"docs/2.api/4.materials/mesh-discard-material.md",{"type":469,"value":21219,"toc":21381},[21220,21226,21228,21378],[582,21221,21222,21225],{},[586,21223,21224],{},"\u003CMeshDiscardMaterial />"," hides the object it's attached to. The object's shadows and children will be rendered.",[472,21227,15],{"id":592},[594,21229,21232],{"className":596,"code":21230,"highlights":21231,"language":601,"meta":544,"style":544},"\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",[676,773],[586,21233,21234,21254,21272,21292,21300,21304,21312,21320,21328,21336,21344,21354,21362,21370],{"__ignoreMap":544},[605,21235,21236,21238,21240,21242,21244,21246,21248,21250,21252],{"class":607,"line":545},[605,21237,611],{"class":610},[605,21239,615],{"class":614},[605,21241,619],{"class":618},[605,21243,622],{"class":618},[605,21245,625],{"class":610},[605,21247,628],{"class":610},[605,21249,632],{"class":631},[605,21251,628],{"class":610},[605,21253,637],{"class":610},[605,21255,21256,21258,21260,21262,21264,21266,21268,21270],{"class":607,"line":546},[605,21257,645],{"class":644},[605,21259,648],{"class":610},[605,21261,683],{"class":651},[605,21263,661],{"class":610},[605,21265,664],{"class":644},[605,21267,667],{"class":610},[605,21269,692],{"class":631},[605,21271,673],{"class":610},[605,21273,21275,21277,21279,21282,21284,21286,21288,21290],{"class":21274,"line":676},[607,641],[605,21276,645],{"class":644},[605,21278,648],{"class":610},[605,21280,21281],{"class":651}," MeshDiscardMaterial",[605,21283,661],{"class":610},[605,21285,664],{"class":644},[605,21287,667],{"class":610},[605,21289,670],{"class":631},[605,21291,673],{"class":610},[605,21293,21294,21296,21298],{"class":607,"line":697},[605,21295,700],{"class":610},[605,21297,615],{"class":614},[605,21299,637],{"class":610},[605,21301,21302],{"class":607,"line":707},[605,21303,710],{"emptyLinePlaceholder":562},[605,21305,21306,21308,21310],{"class":607,"line":713},[605,21307,611],{"class":610},[605,21309,718],{"class":614},[605,21311,637],{"class":610},[605,21313,21314,21316,21318],{"class":607,"line":723},[605,21315,726],{"class":610},[605,21317,729],{"class":614},[605,21319,637],{"class":610},[605,21321,21322,21324,21326],{"class":607,"line":746},[605,21323,749],{"class":610},[605,21325,752],{"class":614},[605,21327,755],{"class":610},[605,21329,21330,21332,21334],{"class":607,"line":758},[605,21331,749],{"class":610},[605,21333,828],{"class":614},[605,21335,637],{"class":610},[605,21337,21338,21340,21342],{"class":607,"line":768},[605,21339,825],{"class":610},[605,21341,839],{"class":614},[605,21343,755],{"class":610},[605,21345,21347,21349,21352],{"class":21346,"line":773},[607,641],[605,21348,825],{"class":610},[605,21350,21351],{"class":614},"MeshDiscardMaterial",[605,21353,755],{"class":610},[605,21355,21356,21358,21360],{"class":607,"line":799},[605,21357,867],{"class":610},[605,21359,828],{"class":614},[605,21361,637],{"class":610},[605,21363,21364,21366,21368],{"class":607,"line":599},[605,21365,877],{"class":610},[605,21367,729],{"class":614},[605,21369,637],{"class":610},[605,21371,21372,21374,21376],{"class":607,"line":822},[605,21373,700],{"class":610},[605,21375,718],{"class":614},[605,21377,637],{"class":610},[1299,21379,21380],{},"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":544,"searchDepth":545,"depth":546,"links":21382},[21383],{"id":592,"depth":546,"text":15},"Hides the object it's attached to while keeping shadows and children visible.",{},{"title":171,"description":21384},"ivSz3UBTzifkzor3XvoS_5CUJD_0d-7Dh7JvwBwFh80",{"id":21389,"title":175,"body":21390,"description":22215,"extension":559,"links":560,"meta":22216,"navigation":562,"path":176,"seo":22217,"stem":177,"__hash__":22218},"docs/2.api/4.materials/mesh-reflection-material.md",{"type":469,"value":21391,"toc":22211},[21392,21397,21408,21417,21424,21426,21915,21917,22188,22209],[576,21393,21394],{},[21395,21396],"materials-mesh-reflection-material",{},[582,21398,2253,21399,3275,21401,21404,21405,1118],{},[586,21400,2256],{},[586,21402,21403],{},"\u003CMeshReflectionMaterial />"," component for making floors or walls that reflect the objects in your ",[586,21406,21407],{},"Scene",[582,21409,21410,21411,21416],{},"The component is based on the excellent ",[1112,21412,21415],{"href":21413,"rel":21414},"https://github.com/pmndrs/drei",[1116],"Drei"," component of the same name.",[582,21418,21419,21420,21423],{},"It extends ",[586,21421,21422],{},"THREE.MeshStandardMaterial"," and accepts all the same props.",[472,21425,15],{"id":592},[594,21427,21430],{"className":596,"code":21428,"highlights":21429,"language":601,"meta":544,"style":544},"\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",[676,844,854,600,874],[586,21431,21432,21452,21470,21490,21498,21502,21510,21518,21574,21618,21647,21654,21677,21693,21709,21724,21739,21753,21767,21781,21785,21793,21825,21833,21851,21859,21867,21899,21907],{"__ignoreMap":544},[605,21433,21434,21436,21438,21440,21442,21444,21446,21448,21450],{"class":607,"line":545},[605,21435,611],{"class":610},[605,21437,615],{"class":614},[605,21439,619],{"class":618},[605,21441,622],{"class":618},[605,21443,625],{"class":610},[605,21445,628],{"class":610},[605,21447,632],{"class":631},[605,21449,628],{"class":610},[605,21451,637],{"class":610},[605,21453,21454,21456,21458,21460,21462,21464,21466,21468],{"class":607,"line":546},[605,21455,645],{"class":644},[605,21457,648],{"class":610},[605,21459,683],{"class":651},[605,21461,661],{"class":610},[605,21463,664],{"class":644},[605,21465,667],{"class":610},[605,21467,692],{"class":631},[605,21469,673],{"class":610},[605,21471,21473,21475,21477,21480,21482,21484,21486,21488],{"class":21472,"line":676},[607,641],[605,21474,645],{"class":644},[605,21476,648],{"class":610},[605,21478,21479],{"class":651}," MeshReflectionMaterial",[605,21481,661],{"class":610},[605,21483,664],{"class":644},[605,21485,667],{"class":610},[605,21487,670],{"class":631},[605,21489,673],{"class":610},[605,21491,21492,21494,21496],{"class":607,"line":697},[605,21493,700],{"class":610},[605,21495,615],{"class":614},[605,21497,637],{"class":610},[605,21499,21500],{"class":607,"line":707},[605,21501,710],{"emptyLinePlaceholder":562},[605,21503,21504,21506,21508],{"class":607,"line":713},[605,21505,611],{"class":610},[605,21507,718],{"class":614},[605,21509,637],{"class":610},[605,21511,21512,21514,21516],{"class":607,"line":723},[605,21513,726],{"class":610},[605,21515,729],{"class":614},[605,21517,637],{"class":610},[605,21519,21520,21522,21524,21526,21528,21530,21532,21534,21536,21538,21540,21542,21544,21546,21548,21550,21552,21554,21556,21558,21560,21562,21564,21566,21568,21570,21572],{"class":607,"line":746},[605,21521,749],{"class":610},[605,21523,752],{"class":614},[605,21525,781],{"class":610},[605,21527,1459],{"class":618},[605,21529,625],{"class":610},[605,21531,628],{"class":610},[605,21533,1466],{"class":610},[605,21535,4160],{"class":791},[605,21537,1471],{"class":610},[605,21539,4160],{"class":791},[605,21541,1471],{"class":610},[605,21543,4160],{"class":791},[605,21545,1481],{"class":610},[605,21547,628],{"class":610},[605,21549,781],{"class":610},[605,21551,3440],{"class":618},[605,21553,625],{"class":610},[605,21555,628],{"class":610},[605,21557,1466],{"class":610},[605,21559,937],{"class":791},[605,21561,1471],{"class":610},[605,21563,937],{"class":791},[605,21565,1471],{"class":610},[605,21567,937],{"class":791},[605,21569,1481],{"class":610},[605,21571,628],{"class":610},[605,21573,755],{"class":610},[605,21575,21576,21578,21580,21582,21585,21587,21589,21591,21594,21596,21599,21602,21604,21606,21608,21610,21612,21614,21616],{"class":607,"line":758},[605,21577,749],{"class":610},[605,21579,828],{"class":614},[605,21581,781],{"class":610},[605,21583,21584],{"class":618},"rotation",[605,21586,625],{"class":610},[605,21588,628],{"class":610},[605,21590,15194],{"class":610},[605,21592,21593],{"class":651},"Math",[605,21595,1118],{"class":610},[605,21597,21598],{"class":651},"PI",[605,21600,21601],{"class":610}," / ",[605,21603,792],{"class":791},[605,21605,1471],{"class":610},[605,21607,937],{"class":791},[605,21609,1471],{"class":610},[605,21611,937],{"class":791},[605,21613,1481],{"class":610},[605,21615,628],{"class":610},[605,21617,637],{"class":610},[605,21619,21620,21622,21625,21627,21629,21631,21633,21635,21637,21639,21641,21643,21645],{"class":607,"line":768},[605,21621,825],{"class":610},[605,21623,21624],{"class":614},"TresPlaneGeometry",[605,21626,781],{"class":610},[605,21628,1989],{"class":618},[605,21630,625],{"class":610},[605,21632,628],{"class":610},[605,21634,1466],{"class":610},[605,21636,1478],{"class":791},[605,21638,1471],{"class":610},[605,21640,1478],{"class":791},[605,21642,1481],{"class":610},[605,21644,628],{"class":610},[605,21646,755],{"class":610},[605,21648,21649,21651],{"class":607,"line":773},[605,21650,825],{"class":610},[605,21652,21653],{"class":614},"MeshReflectionMaterial\n",[605,21655,21656,21658,21660,21662,21664,21666,21669,21671,21673,21675],{"class":607,"line":799},[605,21657,2993],{"class":610},[605,21659,15024],{"class":618},[605,21661,625],{"class":610},[605,21663,628],{"class":610},[605,21665,1466],{"class":610},[605,21667,21668],{"class":791},"300",[605,21670,1471],{"class":610},[605,21672,6028],{"class":791},[605,21674,1481],{"class":610},[605,21676,2987],{"class":610},[605,21678,21679,21681,21684,21686,21688,21691],{"class":607,"line":599},[605,21680,2993],{"class":610},[605,21682,21683],{"class":618},"mixBlur",[605,21685,625],{"class":610},[605,21687,628],{"class":610},[605,21689,21690],{"class":791},"30",[605,21692,2987],{"class":610},[605,21694,21695,21697,21700,21702,21704,21707],{"class":607,"line":822},[605,21696,2993],{"class":610},[605,21698,21699],{"class":618},"mixStrength",[605,21701,625],{"class":610},[605,21703,628],{"class":610},[605,21705,21706],{"class":791},"80",[605,21708,2987],{"class":610},[605,21710,21711,21713,21716,21718,21720,21722],{"class":607,"line":833},[605,21712,2993],{"class":610},[605,21714,21715],{"class":618},"mixContrast",[605,21717,625],{"class":610},[605,21719,628],{"class":610},[605,21721,1893],{"class":791},[605,21723,2987],{"class":610},[605,21725,21727,21730,21732,21734,21737],{"class":21726,"line":844},[607,641],[605,21728,21729],{"class":618},"        color",[605,21731,625],{"class":610},[605,21733,628],{"class":610},[605,21735,21736],{"class":631},"#a0a0a0",[605,21738,2987],{"class":610},[605,21740,21742,21745,21747,21749,21751],{"class":21741,"line":854},[607,641],[605,21743,21744],{"class":618},"        metalness",[605,21746,625],{"class":610},[605,21748,628],{"class":610},[605,21750,1513],{"class":631},[605,21752,2987],{"class":610},[605,21754,21756,21759,21761,21763,21765],{"class":21755,"line":600},[607,641],[605,21757,21758],{"class":618},"        roughness",[605,21760,625],{"class":610},[605,21762,628],{"class":610},[605,21764,1893],{"class":631},[605,21766,2987],{"class":610},[605,21768,21770,21773,21775,21777,21779],{"class":21769,"line":874},[607,641],[605,21771,21772],{"class":618},"        mirror",[605,21774,625],{"class":610},[605,21776,628],{"class":610},[605,21778,937],{"class":631},[605,21780,2987],{"class":610},[605,21782,21783],{"class":607,"line":884},[605,21784,3050],{"class":610},[605,21786,21787,21789,21791],{"class":607,"line":2952},[605,21788,867],{"class":610},[605,21790,828],{"class":614},[605,21792,637],{"class":610},[605,21794,21795,21797,21799,21801,21803,21805,21807,21809,21811,21813,21815,21817,21819,21821,21823],{"class":607,"line":2960},[605,21796,749],{"class":610},[605,21798,828],{"class":614},[605,21800,781],{"class":610},[605,21802,1459],{"class":618},[605,21804,625],{"class":610},[605,21806,628],{"class":610},[605,21808,1466],{"class":610},[605,21810,937],{"class":791},[605,21812,1471],{"class":610},[605,21814,1893],{"class":791},[605,21816,1471],{"class":610},[605,21818,937],{"class":791},[605,21820,1481],{"class":610},[605,21822,628],{"class":610},[605,21824,637],{"class":610},[605,21826,21827,21829,21831],{"class":607,"line":2990},[605,21828,825],{"class":610},[605,21830,839],{"class":614},[605,21832,755],{"class":610},[605,21834,21835,21837,21839,21841,21843,21845,21847,21849],{"class":607,"line":3007},[605,21836,825],{"class":610},[605,21838,13421],{"class":614},[605,21840,3978],{"class":618},[605,21842,625],{"class":610},[605,21844,628],{"class":610},[605,21846,6738],{"class":631},[605,21848,628],{"class":610},[605,21850,755],{"class":610},[605,21852,21853,21855,21857],{"class":607,"line":3022},[605,21854,867],{"class":610},[605,21856,828],{"class":614},[605,21858,637],{"class":610},[605,21860,21861,21863,21865],{"class":607,"line":3047},[605,21862,749],{"class":610},[605,21864,3518],{"class":614},[605,21866,755],{"class":610},[605,21868,21869,21871,21873,21875,21877,21879,21881,21883,21885,21887,21889,21891,21893,21895,21897],{"class":607,"line":2591},[605,21870,749],{"class":610},[605,21872,3539],{"class":614},[605,21874,781],{"class":610},[605,21876,1459],{"class":618},[605,21878,625],{"class":610},[605,21880,628],{"class":610},[605,21882,1466],{"class":610},[605,21884,937],{"class":791},[605,21886,1471],{"class":610},[605,21888,792],{"class":791},[605,21890,1471],{"class":610},[605,21892,3490],{"class":791},[605,21894,1481],{"class":610},[605,21896,628],{"class":610},[605,21898,755],{"class":610},[605,21900,21901,21903,21905],{"class":607,"line":3062},[605,21902,877],{"class":610},[605,21904,729],{"class":614},[605,21906,637],{"class":610},[605,21908,21909,21911,21913],{"class":607,"line":3092},[605,21910,700],{"class":610},[605,21912,718],{"class":614},[605,21914,637],{"class":610},[472,21916,894],{"id":893},[899,21918,21919,21929],{},[902,21920,21921],{},[905,21922,21923,21925,21927],{},[908,21924,3118],{"align":969},[908,21926,913],{"align":969},[908,21928,916],{},[918,21930,21931,21946,21960,21974,21991,22005,22019,22033,22047,22061,22078,22092,22106,22120,22144,22158,22174],{},[905,21932,21933,21938,21941],{},[923,21934,21935],{"align":969},[586,21936,21937],{},"resolution",[923,21939,21940],{"align":969},"Length in pixels of one side of the square reflective textures",[923,21942,21943],{},[586,21944,21945],{},"256",[905,21947,21948,21953,21956],{},[923,21949,21950],{"align":969},[586,21951,21952],{},"mix",[923,21954,21955],{"align":969},"Overall strength of the reflection",[923,21957,21958],{},[586,21959,1893],{},[905,21961,21962,21967,21970],{},[923,21963,21964],{"align":969},[586,21965,21966],{},"sharpMix",[923,21968,21969],{"align":969},"Strength of the sharp reflection on smooth surfaces",[923,21971,21972],{},[586,21973,1893],{},[905,21975,21976,21981,21987],{},[923,21977,21978],{"align":969},[586,21979,21980],{},"sharpDepthScale",[923,21982,21983,21984,21986],{"align":969},"Sharp reflection can be faded out by depth – distance from the reflective surface. Performance note: if the value is greater than ",[586,21985,937],{},", a depth texture will be created",[923,21988,21989],{},[586,21990,1893],{},[905,21992,21993,21998,22001],{},[923,21994,21995],{"align":969},[586,21996,21997],{},"sharpDepthBias",[923,21999,22000],{"align":969},"Sharp reflection depth falloff bias",[923,22002,22003],{},[586,22004,937],{},[905,22006,22007,22012,22015],{},[923,22008,22009],{"align":969},[586,22010,22011],{},"sharpDepthEdgeMin",[923,22013,22014],{"align":969},"Sharp reflection depth falloff start",[923,22016,22017],{},[586,22018,937],{},[905,22020,22021,22026,22029],{},[923,22022,22023],{"align":969},[586,22024,22025],{},"sharpDepthEdgeMax",[923,22027,22028],{"align":969},"Sharp reflection depth falloff end",[923,22030,22031],{},[586,22032,8085],{},[905,22034,22035,22040,22043],{},[923,22036,22037],{"align":969},[586,22038,22039],{},"blurMixSmooth",[923,22041,22042],{"align":969},"Strength of the blurred reflection on smooth surfaces",[923,22044,22045],{},[586,22046,1893],{},[905,22048,22049,22054,22057],{},[923,22050,22051],{"align":969},[586,22052,22053],{},"blurMixRough",[923,22055,22056],{"align":969},"Strength of the blurred reflection on rough surfaces",[923,22058,22059],{},[586,22060,1893],{},[905,22062,22063,22068,22074],{},[923,22064,22065],{"align":969},[586,22066,22067],{},"blurDepthScale",[923,22069,22070,22071,22073],{"align":969},"Blurred reflection can spread out by depth – distance from the reflective surface. Performance note: if the value is greater than ",[586,22072,937],{},", depth texture will be rendered",[923,22075,22076],{},[586,22077,1893],{},[905,22079,22080,22085,22088],{},[923,22081,22082],{"align":969},[586,22083,22084],{},"blurDepthBias",[923,22086,22087],{"align":969},"Blurred reflection depth spread bias",[923,22089,22090],{},[586,22091,937],{},[905,22093,22094,22099,22102],{},[923,22095,22096],{"align":969},[586,22097,22098],{},"blurDepthEdgeMin",[923,22100,22101],{"align":969},"Blurred reflection depth spread start",[923,22103,22104],{},[586,22105,937],{},[905,22107,22108,22113,22116],{},[923,22109,22110],{"align":969},[586,22111,22112],{},"blurDepthEdgeMax",[923,22114,22115],{"align":969},"Blurred reflection depth spread end",[923,22117,22118],{},[586,22119,8085],{},[905,22121,22122,22127,22140],{},[923,22123,22124],{"align":969},[586,22125,22126],{},"blurSize",[923,22128,22129,22130,22133,22134,10149,22137,22139],{"align":969},"Size of the blur. If ",[586,22131,22132],{},"[number, number]",", first number is width, second is height. Performance note: if other than ",[586,22135,22136],{},"[0, 0]",[586,22138,937],{},", a blur texture will be rendered",[923,22141,22142],{},[586,22143,22136],{},[905,22145,22146,22151,22154],{},[923,22147,22148],{"align":969},[586,22149,22150],{},"distortionMap",[923,22152,22153],{"align":969},"Texture for offsetting the reflection",[923,22155,22156],{},[586,22157,1151],{},[905,22159,22160,22165,22170],{},[923,22161,22162],{"align":969},[586,22163,22164],{},"distortion",[923,22166,22167,22168],{"align":969},"Influence of ",[586,22169,22150],{},[923,22171,22172],{},[586,22173,937],{},[905,22175,22176,22181,22184],{},[923,22177,22178],{"align":969},[586,22179,22180],{},"reflectorOffset",[923,22182,22183],{"align":969},"Offsets the reflection",[923,22185,22186],{},[586,22187,937],{},[582,22189,22190,22191,22193,22194,1471,22196,1471,22198,1471,22200,1471,22202,1471,22204,1471,22206,22208],{},"Additionally, the component extends ",[586,22192,21422],{}," and accepts all the same props including ",[586,22195,2500],{},[586,22197,14806],{},[586,22199,14791],{},[586,22201,13426],{},[586,22203,14691],{},[586,22205,14710],{},[586,22207,14729],{},", and more.",[1299,22210,1648],{},{"title":544,"searchDepth":545,"depth":546,"links":22212},[22213,22214],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},"Makes floors or walls that reflect the objects in your Scene.",{},{"title":175,"description":22215},"SmQ10ERsYJAK7ytDjV3ZCr9APJRPR6MGXbpwBm6D2G8",{"id":22220,"title":179,"body":22221,"description":22537,"extension":559,"links":560,"meta":22538,"navigation":562,"path":180,"seo":22539,"stem":181,"__hash__":22540},"docs/2.api/4.materials/point-material.md",{"type":469,"value":22222,"toc":22533},[22223,22228,22238,22243,22245,22515,22517,22531],[2558,22224,22225],{},[22226,22227],"materials-point-material",{},[582,22229,22230,22233,22234,22237],{},[586,22231,22232],{},"\u003CPointMaterial />"," extends ",[586,22235,22236],{},"THREE.PointsMaterial",". It renders the points as dots, rather than the default squares.",[3725,22239,22240],{},[582,22241,22242],{},"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.",[472,22244,15],{"id":592},[594,22246,22249],{"className":596,"code":22247,"highlights":22248,"language":601,"meta":544,"style":544},"\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",[676,799,599,822],[586,22250,22251,22271,22289,22313,22321,22325,22333,22341,22397,22405,22414,22443,22451,22466,22479,22483,22491,22499,22507],{"__ignoreMap":544},[605,22252,22253,22255,22257,22259,22261,22263,22265,22267,22269],{"class":607,"line":545},[605,22254,611],{"class":610},[605,22256,615],{"class":614},[605,22258,619],{"class":618},[605,22260,622],{"class":618},[605,22262,625],{"class":610},[605,22264,628],{"class":610},[605,22266,632],{"class":631},[605,22268,628],{"class":610},[605,22270,637],{"class":610},[605,22272,22273,22275,22277,22279,22281,22283,22285,22287],{"class":607,"line":546},[605,22274,645],{"class":644},[605,22276,648],{"class":610},[605,22278,683],{"class":651},[605,22280,661],{"class":610},[605,22282,664],{"class":644},[605,22284,667],{"class":610},[605,22286,692],{"class":631},[605,22288,673],{"class":610},[605,22290,22292,22294,22296,22299,22301,22303,22305,22307,22309,22311],{"class":22291,"line":676},[607,641],[605,22293,645],{"class":644},[605,22295,648],{"class":610},[605,22297,22298],{"class":651}," PointMaterial",[605,22300,655],{"class":610},[605,22302,658],{"class":651},[605,22304,661],{"class":610},[605,22306,664],{"class":644},[605,22308,667],{"class":610},[605,22310,670],{"class":631},[605,22312,673],{"class":610},[605,22314,22315,22317,22319],{"class":607,"line":697},[605,22316,700],{"class":610},[605,22318,615],{"class":614},[605,22320,637],{"class":610},[605,22322,22323],{"class":607,"line":707},[605,22324,710],{"emptyLinePlaceholder":562},[605,22326,22327,22329,22331],{"class":607,"line":713},[605,22328,611],{"class":610},[605,22330,718],{"class":614},[605,22332,637],{"class":610},[605,22334,22335,22337,22339],{"class":607,"line":723},[605,22336,726],{"class":610},[605,22338,729],{"class":614},[605,22340,637],{"class":610},[605,22342,22343,22345,22347,22349,22351,22353,22355,22357,22359,22361,22363,22365,22367,22369,22371,22373,22375,22377,22379,22381,22383,22385,22387,22389,22391,22393,22395],{"class":607,"line":746},[605,22344,749],{"class":610},[605,22346,752],{"class":614},[605,22348,781],{"class":610},[605,22350,1459],{"class":618},[605,22352,625],{"class":610},[605,22354,628],{"class":610},[605,22356,1466],{"class":610},[605,22358,4160],{"class":791},[605,22360,1471],{"class":610},[605,22362,4160],{"class":791},[605,22364,1471],{"class":610},[605,22366,4160],{"class":791},[605,22368,1481],{"class":610},[605,22370,628],{"class":610},[605,22372,781],{"class":610},[605,22374,3440],{"class":618},[605,22376,625],{"class":610},[605,22378,628],{"class":610},[605,22380,1466],{"class":610},[605,22382,937],{"class":791},[605,22384,1471],{"class":610},[605,22386,937],{"class":791},[605,22388,1471],{"class":610},[605,22390,937],{"class":791},[605,22392,1481],{"class":610},[605,22394,628],{"class":610},[605,22396,755],{"class":610},[605,22398,22399,22401,22403],{"class":607,"line":758},[605,22400,749],{"class":610},[605,22402,763],{"class":614},[605,22404,755],{"class":610},[605,22406,22407,22409,22412],{"class":607,"line":768},[605,22408,749],{"class":610},[605,22410,22411],{"class":614},"TresPoints",[605,22413,637],{"class":610},[605,22415,22416,22418,22421,22423,22425,22427,22429,22431,22433,22435,22437,22439,22441],{"class":607,"line":773},[605,22417,825],{"class":610},[605,22419,22420],{"class":614},"TresIcosahedronGeometry",[605,22422,781],{"class":610},[605,22424,1989],{"class":618},[605,22426,625],{"class":610},[605,22428,628],{"class":610},[605,22430,1466],{"class":610},[605,22432,1893],{"class":791},[605,22434,1471],{"class":610},[605,22436,3490],{"class":791},[605,22438,1481],{"class":610},[605,22440,628],{"class":610},[605,22442,755],{"class":610},[605,22444,22446,22448],{"class":22445,"line":799},[607,641],[605,22447,825],{"class":610},[605,22449,22450],{"class":614},"PointMaterial\n",[605,22452,22454,22456,22458,22460,22462,22464],{"class":22453,"line":599},[607,641],[605,22455,2993],{"class":610},[605,22457,10233],{"class":618},[605,22459,625],{"class":610},[605,22461,628],{"class":610},[605,22463,2396],{"class":791},[605,22465,2987],{"class":610},[605,22467,22469,22471,22473,22475,22477],{"class":22468,"line":822},[607,641],[605,22470,21729],{"class":618},[605,22472,625],{"class":610},[605,22474,628],{"class":610},[605,22476,6738],{"class":631},[605,22478,2987],{"class":610},[605,22480,22481],{"class":607,"line":833},[605,22482,3050],{"class":610},[605,22484,22485,22487,22489],{"class":607,"line":844},[605,22486,867],{"class":610},[605,22488,22411],{"class":614},[605,22490,637],{"class":610},[605,22492,22493,22495,22497],{"class":607,"line":854},[605,22494,749],{"class":610},[605,22496,3518],{"class":614},[605,22498,755],{"class":610},[605,22500,22501,22503,22505],{"class":607,"line":600},[605,22502,877],{"class":610},[605,22504,729],{"class":614},[605,22506,637],{"class":610},[605,22508,22509,22511,22513],{"class":607,"line":874},[605,22510,700],{"class":610},[605,22512,718],{"class":614},[605,22514,637],{"class":610},[472,22516,894],{"id":893},[582,22518,22519,22520,22527,22528,1118],{},"All ",[1112,22521,22524,22526],{"href":22522,"rel":22523},"https://threejs.org/docs/#api/en/materials/PointsMaterial",[1116],[586,22525,22236],{}," properties"," are inherited by ",[586,22529,22530],{},"PointMaterial",[1299,22532,1648],{},{"title":544,"searchDepth":545,"depth":546,"links":22534},[22535,22536],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},"Extends THREE.PointsMaterial to render points as dots rather than squares.",{},{"title":179,"description":22537},"Aajs-h_7UFOgfUg69Q5QfqvfyKDHM1UKxS8GfRKzI2U",{"id":22542,"title":183,"body":22543,"description":22900,"extension":559,"links":560,"meta":22901,"navigation":562,"path":184,"seo":22902,"stem":185,"__hash__":22903},"docs/2.api/4.materials/wobble-material.md",{"type":469,"value":22544,"toc":22896},[22545,22550,22558,22560,22847,22849,22889,22894],[576,22546,22547],{},[22548,22549],"materials-wobble-material",{},[582,22551,2253,22552,3275,22554,22557],{},[586,22553,2256],{},[586,22555,22556],{},"\u003CMeshWobbleMaterial />"," component that makes a geometry wobble and wave around.",[472,22559,15],{"id":592},[594,22561,22564],{"className":596,"code":22562,"highlights":22563,"language":601,"meta":544,"style":544},"\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",[676,773,799,599,822,833],[586,22565,22566,22586,22604,22624,22632,22636,22644,22652,22708,22716,22724,22732,22746,22761,22778,22783,22791,22799,22831,22839],{"__ignoreMap":544},[605,22567,22568,22570,22572,22574,22576,22578,22580,22582,22584],{"class":607,"line":545},[605,22569,611],{"class":610},[605,22571,615],{"class":614},[605,22573,619],{"class":618},[605,22575,622],{"class":618},[605,22577,625],{"class":610},[605,22579,628],{"class":610},[605,22581,632],{"class":631},[605,22583,628],{"class":610},[605,22585,637],{"class":610},[605,22587,22588,22590,22592,22594,22596,22598,22600,22602],{"class":607,"line":546},[605,22589,645],{"class":644},[605,22591,648],{"class":610},[605,22593,683],{"class":651},[605,22595,661],{"class":610},[605,22597,664],{"class":644},[605,22599,667],{"class":610},[605,22601,692],{"class":631},[605,22603,673],{"class":610},[605,22605,22607,22609,22611,22614,22616,22618,22620,22622],{"class":22606,"line":676},[607,641],[605,22608,645],{"class":644},[605,22610,648],{"class":610},[605,22612,22613],{"class":651}," MeshWobbleMaterial",[605,22615,661],{"class":610},[605,22617,664],{"class":644},[605,22619,667],{"class":610},[605,22621,670],{"class":631},[605,22623,673],{"class":610},[605,22625,22626,22628,22630],{"class":607,"line":697},[605,22627,700],{"class":610},[605,22629,615],{"class":614},[605,22631,637],{"class":610},[605,22633,22634],{"class":607,"line":707},[605,22635,710],{"emptyLinePlaceholder":562},[605,22637,22638,22640,22642],{"class":607,"line":713},[605,22639,611],{"class":610},[605,22641,718],{"class":614},[605,22643,637],{"class":610},[605,22645,22646,22648,22650],{"class":607,"line":723},[605,22647,726],{"class":610},[605,22649,729],{"class":614},[605,22651,637],{"class":610},[605,22653,22654,22656,22658,22660,22662,22664,22666,22668,22670,22672,22674,22676,22678,22680,22682,22684,22686,22688,22690,22692,22694,22696,22698,22700,22702,22704,22706],{"class":607,"line":746},[605,22655,749],{"class":610},[605,22657,752],{"class":614},[605,22659,781],{"class":610},[605,22661,1459],{"class":618},[605,22663,625],{"class":610},[605,22665,628],{"class":610},[605,22667,1466],{"class":610},[605,22669,4160],{"class":791},[605,22671,1471],{"class":610},[605,22673,4160],{"class":791},[605,22675,1471],{"class":610},[605,22677,4160],{"class":791},[605,22679,1481],{"class":610},[605,22681,628],{"class":610},[605,22683,781],{"class":610},[605,22685,3440],{"class":618},[605,22687,625],{"class":610},[605,22689,628],{"class":610},[605,22691,1466],{"class":610},[605,22693,937],{"class":791},[605,22695,1471],{"class":610},[605,22697,937],{"class":791},[605,22699,1471],{"class":610},[605,22701,937],{"class":791},[605,22703,1481],{"class":610},[605,22705,628],{"class":610},[605,22707,755],{"class":610},[605,22709,22710,22712,22714],{"class":607,"line":758},[605,22711,749],{"class":610},[605,22713,828],{"class":614},[605,22715,637],{"class":610},[605,22717,22718,22720,22722],{"class":607,"line":768},[605,22719,825],{"class":610},[605,22721,5127],{"class":614},[605,22723,755],{"class":610},[605,22725,22727,22729],{"class":22726,"line":773},[607,641],[605,22728,825],{"class":610},[605,22730,22731],{"class":614},"MeshWobbleMaterial\n",[605,22733,22735,22737,22739,22741,22744],{"class":22734,"line":799},[607,641],[605,22736,21729],{"class":618},[605,22738,625],{"class":610},[605,22740,628],{"class":610},[605,22742,22743],{"class":631},"#f25042",[605,22745,2987],{"class":610},[605,22747,22749,22751,22753,22755,22757,22759],{"class":22748,"line":599},[607,641],[605,22750,2993],{"class":610},[605,22752,3483],{"class":618},[605,22754,625],{"class":610},[605,22756,628],{"class":610},[605,22758,1893],{"class":791},[605,22760,2987],{"class":610},[605,22762,22764,22766,22769,22771,22773,22776],{"class":22763,"line":822},[607,641],[605,22765,2993],{"class":610},[605,22767,22768],{"class":618},"factor",[605,22770,625],{"class":610},[605,22772,628],{"class":610},[605,22774,22775],{"class":791},"0.6",[605,22777,2987],{"class":610},[605,22779,22781],{"class":22780,"line":833},[607,641],[605,22782,3050],{"class":610},[605,22784,22785,22787,22789],{"class":607,"line":844},[605,22786,867],{"class":610},[605,22788,828],{"class":614},[605,22790,637],{"class":610},[605,22792,22793,22795,22797],{"class":607,"line":854},[605,22794,749],{"class":610},[605,22796,3518],{"class":614},[605,22798,755],{"class":610},[605,22800,22801,22803,22805,22807,22809,22811,22813,22815,22817,22819,22821,22823,22825,22827,22829],{"class":607,"line":600},[605,22802,749],{"class":610},[605,22804,3539],{"class":614},[605,22806,781],{"class":610},[605,22808,1459],{"class":618},[605,22810,625],{"class":610},[605,22812,628],{"class":610},[605,22814,1466],{"class":610},[605,22816,937],{"class":791},[605,22818,1471],{"class":610},[605,22820,792],{"class":791},[605,22822,1471],{"class":610},[605,22824,3490],{"class":791},[605,22826,1481],{"class":610},[605,22828,628],{"class":610},[605,22830,755],{"class":610},[605,22832,22833,22835,22837],{"class":607,"line":874},[605,22834,877],{"class":610},[605,22836,729],{"class":614},[605,22838,637],{"class":610},[605,22840,22841,22843,22845],{"class":607,"line":884},[605,22842,700],{"class":610},[605,22844,718],{"class":614},[605,22846,637],{"class":610},[472,22848,894],{"id":893},[899,22850,22851,22861],{},[902,22852,22853],{},[905,22854,22855,22857,22859],{},[908,22856,910],{"align":969},[908,22858,913],{"align":969},[908,22860,916],{},[918,22862,22863,22876],{},[905,22864,22865,22869,22872],{},[923,22866,22867],{"align":969},[1673,22868,3483],{},[923,22870,22871],{"align":969},"how fast the wobble effect would be.",[923,22873,22874],{},[586,22875,1893],{},[905,22877,22878,22882,22885],{},[923,22879,22880],{"align":969},[1673,22881,22768],{},[923,22883,22884],{"align":969},"how strong the wobble effect will deform the geometry",[923,22886,22887],{},[586,22888,1893],{},[582,22890,22891,22892,20378],{},"This material extends ",[586,22893,21422],{},[1299,22895,1648],{},{"title":544,"searchDepth":545,"depth":546,"links":22897},[22898,22899],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},"Makes a geometry wobble and wave around with customizable speed and factor.",{},{"title":183,"description":22900},"FCaNs3jjWImwSxNZzcx1r_CPKoNz27JGUgdcUzvQ1Ys",[22905,23089,23666,23836,24014,24485,24722,24891,25474,25642,26306,26473,26647,27078,27255,27417,27611,27787,28239,28407,28598,28788],{"id":22906,"title":193,"body":22907,"description":23085,"extension":559,"links":560,"meta":23086,"navigation":562,"path":194,"seo":23087,"stem":195,"__hash__":23088},"docs/2.api/5.shapes/box.md",{"type":469,"value":22908,"toc":23082},[22909,22914,22925,22933,22940,22942,23079],[576,22910,22911],{},[22912,22913],"shapes-box",{},[582,22915,2253,22916,3275,22918,22921,22922,1118],{},[586,22917,2256],{},[586,22919,22920],{},"\u003CBox />"," component that serves as a short-cut for a ",[586,22923,22924],{},"BoxGeometry",[594,22926,22931],{"className":22927,"code":22929,"language":22930},[22928],"language-text","args: [\n  width: number,\n  height: number,\n  depth: number,\n  widthSegments: number,\n  heightSegments: number,\n  depthSegments: number\n]\n","text",[586,22932,22929],{"__ignoreMap":544},[582,22934,22935,22936],{},"Reference: ",[1112,22937,22924],{"href":22938,"rel":22939},"https://threejs.org/docs/?q=box#api/en/geometries/BoxGeometry",[1116],[472,22941,15],{"id":592},[594,22943,22945],{"className":596,"code":22944,"language":601,"meta":544,"style":544},"\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",[586,22946,22947,22990,22994,22999,23066,23071],{"__ignoreMap":544},[605,22948,22949,22951,22953,22955,22957,22959,22961,22963,22965,22967,22970,22972,22974,22976,22978,22980,22982,22984,22986,22988],{"class":607,"line":545},[605,22950,611],{"class":610},[605,22952,193],{"class":614},[605,22954,781],{"class":610},[605,22956,1989],{"class":618},[605,22958,625],{"class":610},[605,22960,628],{"class":610},[605,22962,1466],{"class":651},[605,22964,1893],{"class":791},[605,22966,655],{"class":610},[605,22968,22969],{"class":791}," 1",[605,22971,655],{"class":610},[605,22973,22969],{"class":791},[605,22975,1481],{"class":651},[605,22977,628],{"class":610},[605,22979,3978],{"class":618},[605,22981,625],{"class":610},[605,22983,628],{"class":610},[605,22985,6738],{"class":631},[605,22987,628],{"class":610},[605,22989,755],{"class":610},[605,22991,22992],{"class":607,"line":546},[605,22993,710],{"emptyLinePlaceholder":562},[605,22995,22996],{"class":607,"line":676},[605,22997,22998],{"class":651},"// Box with a custom material transformations\n",[605,23000,23001,23003,23005,23007,23009,23011,23013,23015,23017,23019,23021,23023,23025,23027,23029,23031,23033,23035,23037,23039,23041,23043,23045,23047,23049,23051,23053,23056,23058,23060,23062,23064],{"class":607,"line":697},[605,23002,611],{"class":610},[605,23004,193],{"class":614},[605,23006,5431],{"class":618},[605,23008,625],{"class":610},[605,23010,628],{"class":610},[605,23012,9809],{"class":631},[605,23014,628],{"class":610},[605,23016,781],{"class":610},[605,23018,1989],{"class":618},[605,23020,625],{"class":610},[605,23022,628],{"class":610},[605,23024,1466],{"class":651},[605,23026,1893],{"class":791},[605,23028,655],{"class":610},[605,23030,22969],{"class":791},[605,23032,655],{"class":610},[605,23034,22969],{"class":791},[605,23036,1481],{"class":651},[605,23038,628],{"class":610},[605,23040,781],{"class":610},[605,23042,1459],{"class":618},[605,23044,625],{"class":610},[605,23046,628],{"class":610},[605,23048,1466],{"class":651},[605,23050,937],{"class":791},[605,23052,655],{"class":610},[605,23054,23055],{"class":791}," 4",[605,23057,655],{"class":610},[605,23059,11773],{"class":791},[605,23061,1481],{"class":651},[605,23063,628],{"class":610},[605,23065,637],{"class":610},[605,23067,23068],{"class":607,"line":707},[605,23069,23070],{"class":651},"  \u003CTresMeshToonMaterial color=\"orange\" />\n",[605,23072,23073,23075,23077],{"class":607,"line":713},[605,23074,700],{"class":610},[605,23076,193],{"class":614},[605,23078,637],{"class":610},[1299,23080,23081],{},"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":544,"searchDepth":545,"depth":546,"links":23083},[23084],{"id":592,"depth":546,"text":15},"Short-cut for a BoxGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":193,"description":23085},"EvaXEC2iSPj1-74ZRQEV-iGoScGBI5kq_mAZQoDjltE",{"id":23090,"title":197,"body":23091,"description":23662,"extension":559,"links":560,"meta":23663,"navigation":562,"path":198,"seo":23664,"stem":199,"__hash__":23665},"docs/2.api/5.shapes/catmullromcurve3.md",{"type":469,"value":23092,"toc":23658},[23093,23098,23106,23129,23131,23424,23426,23655],[2558,23094,23095],{},[23096,23097],"shapes-catmull-rom-curve3",{},[582,23099,2253,23100,3275,23102,23105],{},[586,23101,2256],{},[586,23103,23104],{},"\u003CCatmullRomCurve3 />"," component that allows you to make smooth(ish) 3D lines.",[582,23107,23108,23110,23111,23118,23119,23122,23123],{},[586,23109,23104],{}," wraps ",[1112,23112,23115,23116],{"href":23113,"rel":23114},"https://threejs.org/docs/index.html?q=catmu#api/en/extras/curves/CatmullRomCurve3",[1116],"Three.js's ",[586,23117,197],{}," functionality, but applies it to Cientos' ",[586,23120,23121],{},"\u003CLine2 />"," under the hood, meaning you can use ",[1112,23124,23126,23127,1118],{"href":23125},"line2#props","all the props from ",[586,23128,23121],{},[472,23130,15],{"id":592},[594,23132,23135],{"className":596,"code":23133,"highlights":23134,"language":601,"meta":544,"style":544},"\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",[676,768,773,799,599,822],[586,23136,23137,23157,23175,23195,23214,23222,23226,23234,23242,23274,23282,23350,23366,23380,23396,23400,23408,23416],{"__ignoreMap":544},[605,23138,23139,23141,23143,23145,23147,23149,23151,23153,23155],{"class":607,"line":545},[605,23140,611],{"class":610},[605,23142,615],{"class":614},[605,23144,619],{"class":618},[605,23146,622],{"class":618},[605,23148,625],{"class":610},[605,23150,628],{"class":610},[605,23152,632],{"class":631},[605,23154,628],{"class":610},[605,23156,637],{"class":610},[605,23158,23159,23161,23163,23165,23167,23169,23171,23173],{"class":607,"line":546},[605,23160,645],{"class":644},[605,23162,648],{"class":610},[605,23164,683],{"class":651},[605,23166,661],{"class":610},[605,23168,664],{"class":644},[605,23170,667],{"class":610},[605,23172,692],{"class":631},[605,23174,673],{"class":610},[605,23176,23178,23180,23182,23185,23187,23189,23191,23193],{"class":23177,"line":676},[607,641],[605,23179,645],{"class":644},[605,23181,648],{"class":610},[605,23183,23184],{"class":651}," CatmullRomCurve3",[605,23186,661],{"class":610},[605,23188,664],{"class":644},[605,23190,667],{"class":610},[605,23192,670],{"class":631},[605,23194,673],{"class":610},[605,23196,23197,23199,23201,23204,23206,23208,23210,23212],{"class":607,"line":697},[605,23198,645],{"class":644},[605,23200,648],{"class":610},[605,23202,23203],{"class":651}," Vector3",[605,23205,661],{"class":610},[605,23207,664],{"class":644},[605,23209,667],{"class":610},[605,23211,2678],{"class":631},[605,23213,673],{"class":610},[605,23215,23216,23218,23220],{"class":607,"line":707},[605,23217,700],{"class":610},[605,23219,615],{"class":614},[605,23221,637],{"class":610},[605,23223,23224],{"class":607,"line":713},[605,23225,710],{"emptyLinePlaceholder":562},[605,23227,23228,23230,23232],{"class":607,"line":723},[605,23229,611],{"class":610},[605,23231,718],{"class":614},[605,23233,637],{"class":610},[605,23235,23236,23238,23240],{"class":607,"line":746},[605,23237,726],{"class":610},[605,23239,729],{"class":614},[605,23241,637],{"class":610},[605,23243,23244,23246,23248,23250,23252,23254,23256,23258,23260,23262,23264,23266,23268,23270,23272],{"class":607,"line":758},[605,23245,749],{"class":610},[605,23247,752],{"class":614},[605,23249,781],{"class":610},[605,23251,1459],{"class":618},[605,23253,625],{"class":610},[605,23255,628],{"class":610},[605,23257,1466],{"class":610},[605,23259,4160],{"class":791},[605,23261,1471],{"class":610},[605,23263,4160],{"class":791},[605,23265,1471],{"class":610},[605,23267,4160],{"class":791},[605,23269,1481],{"class":610},[605,23271,628],{"class":610},[605,23273,755],{"class":610},[605,23275,23277,23279],{"class":23276,"line":768},[607,641],[605,23278,749],{"class":610},[605,23280,23281],{"class":614},"CatmullRomCurve3\n",[605,23283,23285,23287,23290,23292,23294,23297,23299,23302,23304,23306,23308,23310,23312,23315,23317,23319,23321,23323,23325,23327,23329,23331,23333,23335,23337,23339,23341,23343,23345,23348],{"class":23284,"line":773},[607,641],[605,23286,5693],{"class":610},[605,23288,23289],{"class":618},"points",[605,23291,625],{"class":610},[605,23293,628],{"class":610},[605,23295,23296],{"class":610},"[new ",[605,23298,3172],{"class":2800},[605,23300,23301],{"class":610},"(-",[605,23303,1893],{"class":791},[605,23305,1471],{"class":610},[605,23307,937],{"class":791},[605,23309,1471],{"class":610},[605,23311,937],{"class":791},[605,23313,23314],{"class":610},"), new ",[605,23316,3172],{"class":2800},[605,23318,2970],{"class":610},[605,23320,937],{"class":791},[605,23322,1471],{"class":610},[605,23324,1893],{"class":791},[605,23326,1471],{"class":610},[605,23328,937],{"class":791},[605,23330,23314],{"class":610},[605,23332,3172],{"class":2800},[605,23334,2970],{"class":610},[605,23336,1893],{"class":791},[605,23338,1471],{"class":610},[605,23340,937],{"class":791},[605,23342,1471],{"class":610},[605,23344,937],{"class":791},[605,23346,23347],{"class":610},")]",[605,23349,2987],{"class":610},[605,23351,23353,23355,23358,23360,23362,23364],{"class":23352,"line":799},[607,641],[605,23354,5693],{"class":610},[605,23356,23357],{"class":618},"segments",[605,23359,625],{"class":610},[605,23361,628],{"class":610},[605,23363,4597],{"class":791},[605,23365,2987],{"class":610},[605,23367,23369,23372,23374,23376,23378],{"class":23368,"line":599},[607,641],[605,23370,23371],{"class":618},"      color",[605,23373,625],{"class":610},[605,23375,628],{"class":610},[605,23377,6738],{"class":631},[605,23379,2987],{"class":610},[605,23381,23383,23385,23388,23390,23392,23394],{"class":23382,"line":822},[607,641],[605,23384,5693],{"class":610},[605,23386,23387],{"class":618},"line-width",[605,23389,625],{"class":610},[605,23391,628],{"class":610},[605,23393,4160],{"class":791},[605,23395,2987],{"class":610},[605,23397,23398],{"class":607,"line":833},[605,23399,10816],{"class":610},[605,23401,23402,23404,23406],{"class":607,"line":844},[605,23403,749],{"class":610},[605,23405,3518],{"class":614},[605,23407,755],{"class":610},[605,23409,23410,23412,23414],{"class":607,"line":854},[605,23411,877],{"class":610},[605,23413,729],{"class":614},[605,23415,637],{"class":610},[605,23417,23418,23420,23422],{"class":607,"line":600},[605,23419,700],{"class":610},[605,23421,718],{"class":614},[605,23423,637],{"class":610},[472,23425,894],{"id":893},[899,23427,23428,23440],{},[902,23429,23430],{},[905,23431,23432,23434,23436,23438],{},[908,23433,910],{},[908,23435,10957],{},[908,23437,913],{},[908,23439,916],{},[918,23441,23442,23456,23470,23484,23500,23514,23529,23543,23557,23571,23585,23599,23613,23627,23641],{},[905,23443,23444,23446,23451,23454],{},[923,23445,23289],{},[923,23447,23448],{},[586,23449,23450],{},"Array\u003CVector3 | [number, number, number]>",[923,23452,23453],{},"Curve's control points",[923,23455],{},[905,23457,23458,23460,23464,23467],{},[923,23459,23357],{},[923,23461,23462],{},[586,23463,2537],{},[923,23465,23466],{},"Number of segments in the resulting curve (higher = smoother)",[923,23468,23469],{},"20",[905,23471,23472,23475,23479,23482],{},[923,23473,23474],{},"closed",[923,23476,23477],{},[586,23478,11014],{},[923,23480,23481],{},"The curve will loop back onto itself when this is true.",[923,23483,943],{},[905,23485,23486,23489,23494,23497],{},[923,23487,23488],{},"curveType",[923,23490,23491],{},[586,23492,23493],{},"'centripetal' | 'chordal' | 'catmullrom'",[923,23495,23496],{},"Curve type",[923,23498,23499],{},"'centripetal'",[905,23501,23502,23505,23509,23512],{},[923,23503,23504],{},"tension",[923,23506,23507],{},[586,23508,2537],{},[923,23510,23511],{},"Catmullrom's tension, when curveType is 'catmullrom'",[923,23513,1513],{},[905,23515,23516,23519,23524,23527],{},[923,23517,23518],{},"vertexColors",[923,23520,23521],{},[586,23522,23523],{},"TresColor[]",[923,23525,23526],{},"Vertex colors, if using",[923,23528,3152],{},[905,23530,23531,23533,23537,23540],{},[923,23532,2500],{},[923,23534,23535],{},[586,23536,2515],{},[923,23538,23539],{},"Color for the line – multiplies vertex colors",[923,23541,23542],{},"'white'",[905,23544,23545,23548,23552,23555],{},[923,23546,23547],{},"lineWidth",[923,23549,23550],{},[586,23551,2537],{},[923,23553,23554],{},"Width of the line – in world units with size attenuation, pixels otherwise",[923,23556,1893],{},[905,23558,23559,23562,23566,23569],{},[923,23560,23561],{},"worldUnits",[923,23563,23564],{},[586,23565,11014],{},[923,23567,23568],{},"Whether the line width is in world units or pixels",[923,23570,943],{},[905,23572,23573,23576,23580,23583],{},[923,23574,23575],{},"alphaToCoverage",[923,23577,23578],{},[586,23579,11014],{},[923,23581,23582],{},"Enables alpha to coverage. Can only be used with MSAA-enabled contexts (meaning when the renderer was created with antialias parameter set to true).",[923,23584,943],{},[905,23586,23587,23590,23594,23597],{},[923,23588,23589],{},"dashed",[923,23591,23592],{},[586,23593,11014],{},[923,23595,23596],{},"Whether the line is dashed",[923,23598,943],{},[905,23600,23601,23604,23608,23611],{},[923,23602,23603],{},"dashSize",[923,23605,23606],{},[586,23607,2537],{},[923,23609,23610],{},"Dash size",[923,23612,1893],{},[905,23614,23615,23618,23622,23625],{},[923,23616,23617],{},"gapSize",[923,23619,23620],{},[586,23621,2537],{},[923,23623,23624],{},"Gap size in dashed line",[923,23626,1893],{},[905,23628,23629,23632,23636,23639],{},[923,23630,23631],{},"dashScale",[923,23633,23634],{},[586,23635,2537],{},[923,23637,23638],{},"Scale of the dashes/gaps",[923,23640,1893],{},[905,23642,23643,23646,23650,23653],{},[923,23644,23645],{},"dashOffset",[923,23647,23648],{},[586,23649,2537],{},[923,23651,23652],{},"Dash offset",[923,23654,937],{},[1299,23656,23657],{},"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":544,"searchDepth":545,"depth":546,"links":23659},[23660,23661],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},"Allows you to make smooth 3D lines using Catmull-Rom curves.",{},{"title":197,"description":23662},"pYOe6asnxM2yBwZJgT-M4NxxwDh-pE8XXsD--fBVLqo",{"id":23667,"title":201,"body":23668,"description":23832,"extension":559,"links":560,"meta":23833,"navigation":562,"path":202,"seo":23834,"stem":203,"__hash__":23835},"docs/2.api/5.shapes/circle.md",{"type":469,"value":23669,"toc":23829},[23670,23675,23685,23691,23697,23699,23827],[576,23671,23672],{},[23673,23674],"shapes-circle",{},[582,23676,2253,23677,3275,23679,22921,23682,1118],{},[586,23678,2256],{},[586,23680,23681],{},"\u003CCircle />",[586,23683,23684],{},"CircleGeometry",[594,23686,23689],{"className":23687,"code":23688,"language":22930},[22928],"args: [radius: number, segments: number, thetaStart: number, thetaLength: number]\n",[586,23690,23688],{"__ignoreMap":544},[582,23692,22935,23693],{},[1112,23694,23684],{"href":23695,"rel":23696},"https://threejs.org/docs/?q=circle#api/en/geometries/CircleGeometry",[1116],[472,23698,15],{"id":592},[594,23700,23702],{"className":596,"code":23701,"language":601,"meta":544,"style":544},"\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",[586,23703,23704,23743,23747,23752,23815,23819],{"__ignoreMap":544},[605,23705,23706,23708,23710,23712,23714,23716,23718,23720,23722,23724,23727,23729,23731,23733,23735,23737,23739,23741],{"class":607,"line":545},[605,23707,611],{"class":610},[605,23709,201],{"class":614},[605,23711,781],{"class":610},[605,23713,1989],{"class":618},[605,23715,625],{"class":610},[605,23717,628],{"class":610},[605,23719,1466],{"class":651},[605,23721,1893],{"class":791},[605,23723,655],{"class":610},[605,23725,23726],{"class":791}," 32",[605,23728,1481],{"class":651},[605,23730,628],{"class":610},[605,23732,3978],{"class":618},[605,23734,625],{"class":610},[605,23736,628],{"class":610},[605,23738,6738],{"class":631},[605,23740,628],{"class":610},[605,23742,755],{"class":610},[605,23744,23745],{"class":607,"line":546},[605,23746,710],{"emptyLinePlaceholder":562},[605,23748,23749],{"class":607,"line":676},[605,23750,23751],{"class":651},"// Circle with a custom material transformations\n",[605,23753,23754,23756,23758,23760,23762,23764,23767,23769,23771,23773,23775,23777,23779,23781,23783,23785,23787,23789,23791,23793,23795,23797,23799,23801,23803,23805,23807,23809,23811,23813],{"class":607,"line":697},[605,23755,611],{"class":610},[605,23757,201],{"class":614},[605,23759,5431],{"class":618},[605,23761,625],{"class":610},[605,23763,628],{"class":610},[605,23765,23766],{"class":631},"circleRef",[605,23768,628],{"class":610},[605,23770,781],{"class":610},[605,23772,1989],{"class":618},[605,23774,625],{"class":610},[605,23776,628],{"class":610},[605,23778,1466],{"class":651},[605,23780,1893],{"class":791},[605,23782,655],{"class":610},[605,23784,23726],{"class":791},[605,23786,1481],{"class":651},[605,23788,628],{"class":610},[605,23790,781],{"class":610},[605,23792,1459],{"class":618},[605,23794,625],{"class":610},[605,23796,628],{"class":610},[605,23798,1466],{"class":651},[605,23800,937],{"class":791},[605,23802,655],{"class":610},[605,23804,11773],{"class":791},[605,23806,655],{"class":610},[605,23808,11773],{"class":791},[605,23810,1481],{"class":651},[605,23812,628],{"class":610},[605,23814,637],{"class":610},[605,23816,23817],{"class":607,"line":707},[605,23818,23070],{"class":651},[605,23820,23821,23823,23825],{"class":607,"line":713},[605,23822,700],{"class":610},[605,23824,201],{"class":614},[605,23826,637],{"class":610},[1299,23828,23081],{},{"title":544,"searchDepth":545,"depth":546,"links":23830},[23831],{"id":592,"depth":546,"text":15},"Short-cut for a CircleGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":201,"description":23832},"wQLfnhseui4b7Q0fQxQzwX-2D_yemIZgwYA9Cpmtxvo",{"id":23837,"title":205,"body":23838,"description":24010,"extension":559,"links":560,"meta":24011,"navigation":562,"path":206,"seo":24012,"stem":207,"__hash__":24013},"docs/2.api/5.shapes/cone.md",{"type":469,"value":23839,"toc":24007},[23840,23845,23855,23861,23867,23869,24005],[576,23841,23842],{},[23843,23844],"shapes-cone",{},[582,23846,2253,23847,3275,23849,22921,23852,1118],{},[586,23848,2256],{},[586,23850,23851],{},"\u003CCone />",[586,23853,23854],{},"ConeGeometry",[594,23856,23859],{"className":23857,"code":23858,"language":22930},[22928],"args: [\n  radius: number,\n  height: number,\n  radialSegments: number,\n  heightSegments: number,\n  openEnded: boolean,\n  thetaStart: number,\n  thetaLength: number\n]\n",[586,23860,23858],{"__ignoreMap":544},[582,23862,22935,23863],{},[1112,23864,23854],{"href":23865,"rel":23866},"https://threejs.org/docs/?q=cone#api/en/geometries/ConeGeometry",[1116],[472,23868,15],{"id":592},[594,23870,23872],{"className":596,"code":23871,"language":601,"meta":544,"style":544},"\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",[586,23873,23874,23917,23921,23926,23993,23997],{"__ignoreMap":544},[605,23875,23876,23878,23880,23882,23884,23886,23888,23890,23892,23894,23896,23898,23901,23903,23905,23907,23909,23911,23913,23915],{"class":607,"line":545},[605,23877,611],{"class":610},[605,23879,205],{"class":614},[605,23881,781],{"class":610},[605,23883,1989],{"class":618},[605,23885,625],{"class":610},[605,23887,628],{"class":610},[605,23889,1466],{"class":651},[605,23891,1893],{"class":791},[605,23893,655],{"class":610},[605,23895,22969],{"class":791},[605,23897,655],{"class":610},[605,23899,23900],{"class":791}," 8",[605,23902,1481],{"class":651},[605,23904,628],{"class":610},[605,23906,3978],{"class":618},[605,23908,625],{"class":610},[605,23910,628],{"class":610},[605,23912,6738],{"class":631},[605,23914,628],{"class":610},[605,23916,755],{"class":610},[605,23918,23919],{"class":607,"line":546},[605,23920,710],{"emptyLinePlaceholder":562},[605,23922,23923],{"class":607,"line":676},[605,23924,23925],{"class":651},"// Cone with a custom material transformations\n",[605,23927,23928,23930,23932,23934,23936,23938,23941,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],{"class":607,"line":697},[605,23929,611],{"class":610},[605,23931,205],{"class":614},[605,23933,5431],{"class":618},[605,23935,625],{"class":610},[605,23937,628],{"class":610},[605,23939,23940],{"class":631},"coneRef",[605,23942,628],{"class":610},[605,23944,781],{"class":610},[605,23946,1989],{"class":618},[605,23948,625],{"class":610},[605,23950,628],{"class":610},[605,23952,1466],{"class":651},[605,23954,1893],{"class":791},[605,23956,655],{"class":610},[605,23958,22969],{"class":791},[605,23960,655],{"class":610},[605,23962,23900],{"class":791},[605,23964,1481],{"class":651},[605,23966,628],{"class":610},[605,23968,781],{"class":610},[605,23970,1459],{"class":618},[605,23972,625],{"class":610},[605,23974,628],{"class":610},[605,23976,1466],{"class":651},[605,23978,937],{"class":791},[605,23980,655],{"class":610},[605,23982,23055],{"class":791},[605,23984,655],{"class":610},[605,23986,11773],{"class":791},[605,23988,1481],{"class":651},[605,23990,628],{"class":610},[605,23992,637],{"class":610},[605,23994,23995],{"class":607,"line":707},[605,23996,23070],{"class":651},[605,23998,23999,24001,24003],{"class":607,"line":713},[605,24000,700],{"class":610},[605,24002,205],{"class":614},[605,24004,637],{"class":610},[1299,24006,23081],{},{"title":544,"searchDepth":545,"depth":546,"links":24008},[24009],{"id":592,"depth":546,"text":15},"Short-cut for a ConeGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":205,"description":24010},"LobanFD68GY4U45rEkqMogA7guX1DZi5E6MMnCuki0k",{"id":24015,"title":209,"body":24016,"description":24481,"extension":559,"links":560,"meta":24482,"navigation":562,"path":210,"seo":24483,"stem":211,"__hash__":24484},"docs/2.api/5.shapes/cubic-bezier-line.md",{"type":469,"value":24017,"toc":24477},[24018,24023,24032,24034,24372,24374,24384,24475],[2558,24019,24020],{},[24021,24022],"shapes-cubic-bezier-line",{},[582,24024,24025,24028,24029,24031],{},[586,24026,24027],{},"\u003CCubicBezierLine />"," renders a ",[586,24030,23121],{}," between start and end points, with additional 2 control points.",[472,24033,15],{"id":592},[594,24035,24037],{"className":596,"code":24036,"language":601,"meta":544,"style":544},"\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",[586,24038,24039,24059,24077,24096,24114,24122,24126,24134,24142,24174,24181,24212,24242,24273,24304,24318,24330,24344,24348,24356,24364],{"__ignoreMap":544},[605,24040,24041,24043,24045,24047,24049,24051,24053,24055,24057],{"class":607,"line":545},[605,24042,611],{"class":610},[605,24044,615],{"class":614},[605,24046,619],{"class":618},[605,24048,622],{"class":618},[605,24050,625],{"class":610},[605,24052,628],{"class":610},[605,24054,632],{"class":631},[605,24056,628],{"class":610},[605,24058,637],{"class":610},[605,24060,24061,24063,24065,24067,24069,24071,24073,24075],{"class":607,"line":546},[605,24062,645],{"class":644},[605,24064,648],{"class":610},[605,24066,683],{"class":651},[605,24068,661],{"class":610},[605,24070,664],{"class":644},[605,24072,667],{"class":610},[605,24074,692],{"class":631},[605,24076,673],{"class":610},[605,24078,24079,24081,24083,24086,24088,24090,24092,24094],{"class":607,"line":676},[605,24080,645],{"class":644},[605,24082,648],{"class":610},[605,24084,24085],{"class":651}," CubicBezierLine",[605,24087,661],{"class":610},[605,24089,664],{"class":644},[605,24091,667],{"class":610},[605,24093,670],{"class":631},[605,24095,673],{"class":610},[605,24097,24098,24100,24102,24104,24106,24108,24110,24112],{"class":607,"line":697},[605,24099,645],{"class":644},[605,24101,648],{"class":610},[605,24103,23203],{"class":651},[605,24105,661],{"class":610},[605,24107,664],{"class":644},[605,24109,667],{"class":610},[605,24111,2678],{"class":631},[605,24113,673],{"class":610},[605,24115,24116,24118,24120],{"class":607,"line":707},[605,24117,700],{"class":610},[605,24119,615],{"class":614},[605,24121,637],{"class":610},[605,24123,24124],{"class":607,"line":713},[605,24125,710],{"emptyLinePlaceholder":562},[605,24127,24128,24130,24132],{"class":607,"line":723},[605,24129,611],{"class":610},[605,24131,718],{"class":614},[605,24133,637],{"class":610},[605,24135,24136,24138,24140],{"class":607,"line":746},[605,24137,726],{"class":610},[605,24139,729],{"class":614},[605,24141,637],{"class":610},[605,24143,24144,24146,24148,24150,24152,24154,24156,24158,24160,24162,24164,24166,24168,24170,24172],{"class":607,"line":758},[605,24145,749],{"class":610},[605,24147,752],{"class":614},[605,24149,781],{"class":610},[605,24151,1459],{"class":618},[605,24153,625],{"class":610},[605,24155,628],{"class":610},[605,24157,1466],{"class":610},[605,24159,4160],{"class":791},[605,24161,1471],{"class":610},[605,24163,4160],{"class":791},[605,24165,1471],{"class":610},[605,24167,4160],{"class":791},[605,24169,1481],{"class":610},[605,24171,628],{"class":610},[605,24173,755],{"class":610},[605,24175,24176,24178],{"class":607,"line":768},[605,24177,749],{"class":610},[605,24179,24180],{"class":614},"CubicBezierLine\n",[605,24182,24183,24185,24187,24189,24191,24194,24196,24198,24200,24202,24204,24206,24208,24210],{"class":607,"line":773},[605,24184,5693],{"class":610},[605,24186,7773],{"class":618},[605,24188,625],{"class":610},[605,24190,628],{"class":610},[605,24192,24193],{"class":610},"new ",[605,24195,3172],{"class":2800},[605,24197,23301],{"class":610},[605,24199,1893],{"class":791},[605,24201,1471],{"class":610},[605,24203,937],{"class":791},[605,24205,1471],{"class":610},[605,24207,937],{"class":791},[605,24209,4125],{"class":610},[605,24211,2987],{"class":610},[605,24213,24214,24216,24218,24220,24222,24224,24226,24228,24230,24232,24234,24236,24238,24240],{"class":607,"line":799},[605,24215,5693],{"class":610},[605,24217,7787],{"class":618},[605,24219,625],{"class":610},[605,24221,628],{"class":610},[605,24223,24193],{"class":610},[605,24225,3172],{"class":2800},[605,24227,2970],{"class":610},[605,24229,1893],{"class":791},[605,24231,1471],{"class":610},[605,24233,937],{"class":791},[605,24235,1471],{"class":610},[605,24237,937],{"class":791},[605,24239,4125],{"class":610},[605,24241,2987],{"class":610},[605,24243,24244,24246,24249,24251,24253,24255,24257,24259,24261,24263,24265,24267,24269,24271],{"class":607,"line":599},[605,24245,5693],{"class":610},[605,24247,24248],{"class":618},"midA",[605,24250,625],{"class":610},[605,24252,628],{"class":610},[605,24254,24193],{"class":610},[605,24256,3172],{"class":2800},[605,24258,23301],{"class":610},[605,24260,1513],{"class":791},[605,24262,1471],{"class":610},[605,24264,1893],{"class":791},[605,24266,1471],{"class":610},[605,24268,937],{"class":791},[605,24270,4125],{"class":610},[605,24272,2987],{"class":610},[605,24274,24275,24277,24280,24282,24284,24286,24288,24290,24292,24294,24296,24298,24300,24302],{"class":607,"line":822},[605,24276,5693],{"class":610},[605,24278,24279],{"class":618},"midB",[605,24281,625],{"class":610},[605,24283,628],{"class":610},[605,24285,24193],{"class":610},[605,24287,3172],{"class":2800},[605,24289,2970],{"class":610},[605,24291,1513],{"class":791},[605,24293,1471],{"class":610},[605,24295,1893],{"class":791},[605,24297,1471],{"class":610},[605,24299,937],{"class":791},[605,24301,4125],{"class":610},[605,24303,2987],{"class":610},[605,24305,24306,24308,24310,24312,24314,24316],{"class":607,"line":833},[605,24307,5693],{"class":610},[605,24309,23357],{"class":618},[605,24311,625],{"class":610},[605,24313,628],{"class":610},[605,24315,4597],{"class":791},[605,24317,2987],{"class":610},[605,24319,24320,24322,24324,24326,24328],{"class":607,"line":844},[605,24321,23371],{"class":618},[605,24323,625],{"class":610},[605,24325,628],{"class":610},[605,24327,6738],{"class":631},[605,24329,2987],{"class":610},[605,24331,24332,24334,24336,24338,24340,24342],{"class":607,"line":854},[605,24333,5693],{"class":610},[605,24335,23387],{"class":618},[605,24337,625],{"class":610},[605,24339,628],{"class":610},[605,24341,4160],{"class":791},[605,24343,2987],{"class":610},[605,24345,24346],{"class":607,"line":600},[605,24347,10816],{"class":610},[605,24349,24350,24352,24354],{"class":607,"line":874},[605,24351,749],{"class":610},[605,24353,3518],{"class":614},[605,24355,755],{"class":610},[605,24357,24358,24360,24362],{"class":607,"line":884},[605,24359,877],{"class":610},[605,24361,729],{"class":614},[605,24363,637],{"class":610},[605,24365,24366,24368,24370],{"class":607,"line":2952},[605,24367,700],{"class":610},[605,24369,718],{"class":614},[605,24371,637],{"class":610},[472,24373,894],{"id":893},[582,24375,24376,24378,24379,24381,24382,1118],{},[586,24377,24027],{}," inherits all props but ",[586,24380,23289],{}," from ",[586,24383,23121],{},[899,24385,24386,24398],{},[902,24387,24388],{},[905,24389,24390,24392,24394,24396],{},[908,24391,910],{},[908,24393,10957],{},[908,24395,913],{},[908,24397,916],{},[918,24399,24400,24416,24431,24446,24461],{},[905,24401,24402,24406,24411,24414],{},[923,24403,24404],{},[586,24405,7773],{},[923,24407,24408],{},[586,24409,24410],{},"Vector3 | [number, number, number]",[923,24412,24413],{},"Starting point",[923,24415],{},[905,24417,24418,24422,24426,24429],{},[923,24419,24420],{},[586,24421,7787],{},[923,24423,24424],{},[586,24425,24410],{},[923,24427,24428],{},"Ending point",[923,24430],{},[905,24432,24433,24437,24441,24444],{},[923,24434,24435],{},[586,24436,24248],{},[923,24438,24439],{},[586,24440,24410],{},[923,24442,24443],{},"First control point",[923,24445],{},[905,24447,24448,24452,24456,24459],{},[923,24449,24450],{},[586,24451,24279],{},[923,24453,24454],{},[586,24455,24410],{},[923,24457,24458],{},"Second control point",[923,24460],{},[905,24462,24463,24467,24471,24473],{},[923,24464,24465],{},[586,24466,23357],{},[923,24468,24469],{},[586,24470,2537],{},[923,24472,23466],{},[923,24474,23469],{},[1299,24476,23657],{},{"title":544,"searchDepth":545,"depth":546,"links":24478},[24479,24480],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},"Renders a Line2 between start and end points with two control points.",{},{"title":209,"description":24481},"gORWQkfn3pEx_Pr7x_kzEjd_CQoTYM445mILoeX4qjQ",{"id":24486,"title":213,"body":24487,"description":24718,"extension":559,"links":560,"meta":24719,"navigation":562,"path":214,"seo":24720,"stem":215,"__hash__":24721},"docs/2.api/5.shapes/cylinder.md",{"type":469,"value":24488,"toc":24715},[24489,24494,24504,24510,24516,24518,24712],[576,24490,24491],{},[24492,24493],"shapes-cylinder",{},[582,24495,2253,24496,3275,24498,22921,24501,1118],{},[586,24497,2256],{},[586,24499,24500],{},"\u003CCylinder />",[586,24502,24503],{},"CylinderGeometry",[594,24505,24508],{"className":24506,"code":24507,"language":22930},[22928],"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",[586,24509,24507],{"__ignoreMap":544},[582,24511,22935,24512],{},[1112,24513,24503],{"href":24514,"rel":24515},"https://threejs.org/docs/?q=cylinder#api/en/geometries/CylinderGeometry",[1116],[472,24517,15],{"id":592},[594,24519,24521],{"className":596,"code":24520,"language":601,"meta":544,"style":544},"\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",[586,24522,24523,24596,24600,24605,24700,24704],{"__ignoreMap":544},[605,24524,24525,24527,24529,24531,24533,24535,24537,24539,24541,24543,24545,24547,24549,24551,24553,24555,24557,24559,24561,24563,24565,24567,24570,24572,24575,24577,24580,24582,24584,24586,24588,24590,24592,24594],{"class":607,"line":545},[605,24526,611],{"class":610},[605,24528,213],{"class":614},[605,24530,781],{"class":610},[605,24532,1989],{"class":618},[605,24534,625],{"class":610},[605,24536,628],{"class":610},[605,24538,1466],{"class":651},[605,24540,1893],{"class":791},[605,24542,655],{"class":610},[605,24544,22969],{"class":791},[605,24546,655],{"class":610},[605,24548,22969],{"class":791},[605,24550,655],{"class":610},[605,24552,23726],{"class":791},[605,24554,655],{"class":610},[605,24556,22969],{"class":791},[605,24558,655],{"class":610},[605,24560,15608],{"class":3870},[605,24562,655],{"class":610},[605,24564,11773],{"class":791},[605,24566,655],{"class":610},[605,24568,24569],{"class":651}," Math",[605,24571,1118],{"class":610},[605,24573,24574],{"class":651},"PI ",[605,24576,16566],{"class":610},[605,24578,24579],{"class":791}," 2",[605,24581,1481],{"class":651},[605,24583,628],{"class":610},[605,24585,3978],{"class":618},[605,24587,625],{"class":610},[605,24589,628],{"class":610},[605,24591,6738],{"class":631},[605,24593,628],{"class":610},[605,24595,755],{"class":610},[605,24597,24598],{"class":607,"line":546},[605,24599,710],{"emptyLinePlaceholder":562},[605,24601,24602],{"class":607,"line":676},[605,24603,24604],{"class":651},"// Cylinder with a custom material transformations\n",[605,24606,24607,24609,24611,24613,24615,24617,24620,24622,24624,24626,24628,24630,24632,24634,24636,24638,24640,24642,24644,24646,24648,24650,24652,24654,24656,24658,24660,24662,24664,24666,24668,24670,24672,24674,24676,24678,24680,24682,24684,24686,24688,24690,24692,24694,24696,24698],{"class":607,"line":697},[605,24608,611],{"class":610},[605,24610,213],{"class":614},[605,24612,5431],{"class":618},[605,24614,625],{"class":610},[605,24616,628],{"class":610},[605,24618,24619],{"class":631},"cylinderRef",[605,24621,628],{"class":610},[605,24623,781],{"class":610},[605,24625,1989],{"class":618},[605,24627,625],{"class":610},[605,24629,628],{"class":610},[605,24631,1466],{"class":651},[605,24633,1893],{"class":791},[605,24635,655],{"class":610},[605,24637,22969],{"class":791},[605,24639,655],{"class":610},[605,24641,22969],{"class":791},[605,24643,655],{"class":610},[605,24645,23726],{"class":791},[605,24647,655],{"class":610},[605,24649,22969],{"class":791},[605,24651,655],{"class":610},[605,24653,15608],{"class":3870},[605,24655,655],{"class":610},[605,24657,11773],{"class":791},[605,24659,655],{"class":610},[605,24661,24569],{"class":651},[605,24663,1118],{"class":610},[605,24665,24574],{"class":651},[605,24667,16566],{"class":610},[605,24669,24579],{"class":791},[605,24671,1481],{"class":651},[605,24673,628],{"class":610},[605,24675,781],{"class":610},[605,24677,1459],{"class":618},[605,24679,625],{"class":610},[605,24681,628],{"class":610},[605,24683,1466],{"class":651},[605,24685,937],{"class":791},[605,24687,655],{"class":610},[605,24689,23055],{"class":791},[605,24691,655],{"class":610},[605,24693,11773],{"class":791},[605,24695,1481],{"class":651},[605,24697,628],{"class":610},[605,24699,637],{"class":610},[605,24701,24702],{"class":607,"line":707},[605,24703,23070],{"class":651},[605,24705,24706,24708,24710],{"class":607,"line":713},[605,24707,700],{"class":610},[605,24709,213],{"class":614},[605,24711,637],{"class":610},[1299,24713,24714],{},"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":544,"searchDepth":545,"depth":546,"links":24716},[24717],{"id":592,"depth":546,"text":15},"Short-cut for a CylinderGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":213,"description":24718},"YTuULikIuPOFc-aN9KEgAYGN8T0QxNG4817fqzStsM0",{"id":24723,"title":217,"body":24724,"description":24887,"extension":559,"links":560,"meta":24888,"navigation":562,"path":218,"seo":24889,"stem":219,"__hash__":24890},"docs/2.api/5.shapes/dodecahedron.md",{"type":469,"value":24725,"toc":24884},[24726,24731,24741,24747,24753,24755,24882],[576,24727,24728],{},[24729,24730],"shapes-dodecahedron",{},[582,24732,2253,24733,3275,24735,22921,24738,1118],{},[586,24734,2256],{},[586,24736,24737],{},"\u003CDodecahedron />",[586,24739,24740],{},"DodecahedronGeometry",[594,24742,24745],{"className":24743,"code":24744,"language":22930},[22928],"args: [radius: number, detail: number]\n",[586,24746,24744],{"__ignoreMap":544},[582,24748,22935,24749],{},[1112,24750,24740],{"href":24751,"rel":24752},"https://threejs.org/docs/?q=dode#api/en/geometries/DodecahedronGeometry",[1116],[472,24754,15],{"id":592},[594,24756,24758],{"className":596,"code":24757,"language":601,"meta":544,"style":544},"\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",[586,24759,24760,24798,24802,24807,24870,24874],{"__ignoreMap":544},[605,24761,24762,24764,24766,24768,24770,24772,24774,24776,24778,24780,24782,24784,24786,24788,24790,24792,24794,24796],{"class":607,"line":545},[605,24763,611],{"class":610},[605,24765,217],{"class":614},[605,24767,781],{"class":610},[605,24769,1989],{"class":618},[605,24771,625],{"class":610},[605,24773,628],{"class":610},[605,24775,1466],{"class":651},[605,24777,1893],{"class":791},[605,24779,655],{"class":610},[605,24781,11773],{"class":791},[605,24783,1481],{"class":651},[605,24785,628],{"class":610},[605,24787,3978],{"class":618},[605,24789,625],{"class":610},[605,24791,628],{"class":610},[605,24793,6738],{"class":631},[605,24795,628],{"class":610},[605,24797,755],{"class":610},[605,24799,24800],{"class":607,"line":546},[605,24801,710],{"emptyLinePlaceholder":562},[605,24803,24804],{"class":607,"line":676},[605,24805,24806],{"class":651},"// Dodecahedron with a custom material transformations\n",[605,24808,24809,24811,24813,24815,24817,24819,24822,24824,24826,24828,24830,24832,24834,24836,24838,24840,24842,24844,24846,24848,24850,24852,24854,24856,24858,24860,24862,24864,24866,24868],{"class":607,"line":697},[605,24810,611],{"class":610},[605,24812,217],{"class":614},[605,24814,5431],{"class":618},[605,24816,625],{"class":610},[605,24818,628],{"class":610},[605,24820,24821],{"class":631},"dodecahedronRef",[605,24823,628],{"class":610},[605,24825,781],{"class":610},[605,24827,1989],{"class":618},[605,24829,625],{"class":610},[605,24831,628],{"class":610},[605,24833,1466],{"class":651},[605,24835,1893],{"class":791},[605,24837,655],{"class":610},[605,24839,11773],{"class":791},[605,24841,1481],{"class":651},[605,24843,628],{"class":610},[605,24845,781],{"class":610},[605,24847,1459],{"class":618},[605,24849,625],{"class":610},[605,24851,628],{"class":610},[605,24853,1466],{"class":651},[605,24855,792],{"class":791},[605,24857,655],{"class":610},[605,24859,23055],{"class":791},[605,24861,655],{"class":610},[605,24863,11773],{"class":791},[605,24865,1481],{"class":651},[605,24867,628],{"class":610},[605,24869,637],{"class":610},[605,24871,24872],{"class":607,"line":707},[605,24873,23070],{"class":651},[605,24875,24876,24878,24880],{"class":607,"line":713},[605,24877,700],{"class":610},[605,24879,217],{"class":614},[605,24881,637],{"class":610},[1299,24883,23081],{},{"title":544,"searchDepth":545,"depth":546,"links":24885},[24886],{"id":592,"depth":546,"text":15},"Short-cut for a DodecahedronGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":217,"description":24887},"9Gw9CLOluoUzozbppxnr0DGwqvfyqgSPCC05IqHhr00",{"id":24892,"title":221,"body":24893,"description":25470,"extension":559,"links":560,"meta":25471,"navigation":562,"path":222,"seo":25472,"stem":223,"__hash__":25473},"docs/2.api/5.shapes/grid.md",{"type":469,"value":24894,"toc":25466},[24895,24900,24906,24908,25279,25281,25463],[576,24896,24897],{},[24898,24899],"shapes-grid",{},[582,24901,24902,24905],{},[586,24903,24904],{},"\u003CGrid />"," creates a shader-based grid plane. It has customizable grid cell and section lines, as well as fade out.",[472,24907,15],{"id":592},[594,24909,24912],{"className":596,"code":24910,"highlights":24911,"language":601,"meta":544,"style":544},"\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",[546,768,773,799,599,822,833,844,854,600,874,884,2952],[586,24913,24914,24934,24958,24976,24984,24988,24996,25015,25061,25069,25077,25101,25115,25131,25147,25161,25177,25194,25210,25226,25243,25259,25263,25271],{"__ignoreMap":544},[605,24915,24916,24918,24920,24922,24924,24926,24928,24930,24932],{"class":607,"line":545},[605,24917,611],{"class":610},[605,24919,615],{"class":614},[605,24921,619],{"class":618},[605,24923,622],{"class":618},[605,24925,625],{"class":610},[605,24927,628],{"class":610},[605,24929,632],{"class":631},[605,24931,628],{"class":610},[605,24933,637],{"class":610},[605,24935,24937,24939,24941,24944,24946,24948,24950,24952,24954,24956],{"class":24936,"line":546},[607,641],[605,24938,645],{"class":644},[605,24940,648],{"class":610},[605,24942,24943],{"class":651}," Grid",[605,24945,655],{"class":610},[605,24947,658],{"class":651},[605,24949,661],{"class":610},[605,24951,664],{"class":644},[605,24953,667],{"class":610},[605,24955,670],{"class":631},[605,24957,673],{"class":610},[605,24959,24960,24962,24964,24966,24968,24970,24972,24974],{"class":607,"line":676},[605,24961,645],{"class":644},[605,24963,648],{"class":610},[605,24965,683],{"class":651},[605,24967,661],{"class":610},[605,24969,664],{"class":644},[605,24971,667],{"class":610},[605,24973,692],{"class":631},[605,24975,673],{"class":610},[605,24977,24978,24980,24982],{"class":607,"line":697},[605,24979,700],{"class":610},[605,24981,615],{"class":614},[605,24983,637],{"class":610},[605,24985,24986],{"class":607,"line":707},[605,24987,710],{"emptyLinePlaceholder":562},[605,24989,24990,24992,24994],{"class":607,"line":713},[605,24991,611],{"class":610},[605,24993,718],{"class":614},[605,24995,637],{"class":610},[605,24997,24998,25000,25002,25004,25006,25008,25011,25013],{"class":607,"line":723},[605,24999,726],{"class":610},[605,25001,729],{"class":614},[605,25003,732],{"class":618},[605,25005,625],{"class":610},[605,25007,628],{"class":610},[605,25009,25010],{"class":631},"#222222",[605,25012,628],{"class":610},[605,25014,637],{"class":610},[605,25016,25017,25019,25021,25023,25025,25027,25029,25031,25033,25035,25037,25039,25041,25043,25045,25047,25050,25052,25054,25057,25059],{"class":607,"line":746},[605,25018,749],{"class":610},[605,25020,752],{"class":614},[605,25022,781],{"class":610},[605,25024,1459],{"class":618},[605,25026,625],{"class":610},[605,25028,628],{"class":610},[605,25030,1466],{"class":610},[605,25032,15063],{"class":791},[605,25034,1471],{"class":610},[605,25036,1478],{"class":791},[605,25038,1471],{"class":610},[605,25040,1478],{"class":791},[605,25042,1481],{"class":610},[605,25044,628],{"class":610},[605,25046,781],{"class":610},[605,25048,25049],{"class":618},"fov",[605,25051,625],{"class":610},[605,25053,628],{"class":610},[605,25055,25056],{"class":791},"25",[605,25058,628],{"class":610},[605,25060,755],{"class":610},[605,25062,25063,25065,25067],{"class":607,"line":758},[605,25064,749],{"class":610},[605,25066,763],{"class":614},[605,25068,755],{"class":610},[605,25070,25072,25074],{"class":25071,"line":768},[607,641],[605,25073,749],{"class":610},[605,25075,25076],{"class":614},"Grid\n",[605,25078,25080,25082,25084,25086,25088,25090,25093,25095,25097,25099],{"class":25079,"line":773},[607,641],[605,25081,5693],{"class":610},[605,25083,1989],{"class":618},[605,25085,625],{"class":610},[605,25087,628],{"class":610},[605,25089,1466],{"class":610},[605,25091,25092],{"class":791},"10.5",[605,25094,1471],{"class":610},[605,25096,25092],{"class":791},[605,25098,1481],{"class":610},[605,25100,2987],{"class":610},[605,25102,25104,25107,25109,25111,25113],{"class":25103,"line":799},[607,641],[605,25105,25106],{"class":618},"      cell-color",[605,25108,625],{"class":610},[605,25110,628],{"class":610},[605,25112,4696],{"class":631},[605,25114,2987],{"class":610},[605,25116,25118,25120,25123,25125,25127,25129],{"class":25117,"line":599},[607,641],[605,25119,5693],{"class":610},[605,25121,25122],{"class":618},"cell-size",[605,25124,625],{"class":610},[605,25126,628],{"class":610},[605,25128,22775],{"class":791},[605,25130,2987],{"class":610},[605,25132,25134,25136,25139,25141,25143,25145],{"class":25133,"line":822},[607,641],[605,25135,5693],{"class":610},[605,25137,25138],{"class":618},"cell-thickness",[605,25140,625],{"class":610},[605,25142,628],{"class":610},[605,25144,1513],{"class":791},[605,25146,2987],{"class":610},[605,25148,25150,25153,25155,25157,25159],{"class":25149,"line":833},[607,641],[605,25151,25152],{"class":618},"      section-color",[605,25154,625],{"class":610},[605,25156,628],{"class":610},[605,25158,4045],{"class":631},[605,25160,2987],{"class":610},[605,25162,25164,25166,25169,25171,25173,25175],{"class":25163,"line":844},[607,641],[605,25165,5693],{"class":610},[605,25167,25168],{"class":618},"section-size",[605,25170,625],{"class":610},[605,25172,628],{"class":610},[605,25174,792],{"class":791},[605,25176,2987],{"class":610},[605,25178,25180,25182,25185,25187,25189,25192],{"class":25179,"line":854},[607,641],[605,25181,5693],{"class":610},[605,25183,25184],{"class":618},"section-thickness",[605,25186,625],{"class":610},[605,25188,628],{"class":610},[605,25190,25191],{"class":791},"1.3",[605,25193,2987],{"class":610},[605,25195,25197,25199,25202,25204,25206,25208],{"class":25196,"line":600},[607,641],[605,25198,5693],{"class":610},[605,25200,25201],{"class":618},"infinite-grid",[605,25203,625],{"class":610},[605,25205,628],{"class":610},[605,25207,933],{"class":3870},[605,25209,2987],{"class":610},[605,25211,25213,25215,25218,25220,25222,25224],{"class":25212,"line":874},[607,641],[605,25214,5693],{"class":610},[605,25216,25217],{"class":618},"fade-from",[605,25219,625],{"class":610},[605,25221,628],{"class":610},[605,25223,937],{"class":791},[605,25225,2987],{"class":610},[605,25227,25229,25231,25234,25236,25238,25241],{"class":25228,"line":884},[607,641],[605,25230,5693],{"class":610},[605,25232,25233],{"class":618},"fade-distance",[605,25235,625],{"class":610},[605,25237,628],{"class":610},[605,25239,25240],{"class":791},"12",[605,25242,2987],{"class":610},[605,25244,25246,25248,25251,25253,25255,25257],{"class":25245,"line":2952},[607,641],[605,25247,5693],{"class":610},[605,25249,25250],{"class":618},"fade-strength",[605,25252,625],{"class":610},[605,25254,628],{"class":610},[605,25256,1893],{"class":791},[605,25258,2987],{"class":610},[605,25260,25261],{"class":607,"line":2960},[605,25262,10816],{"class":610},[605,25264,25265,25267,25269],{"class":607,"line":2990},[605,25266,877],{"class":610},[605,25268,729],{"class":614},[605,25270,637],{"class":610},[605,25272,25273,25275,25277],{"class":607,"line":3007},[605,25274,700],{"class":610},[605,25276,718],{"class":614},[605,25278,637],{"class":610},[472,25280,894],{"id":893},[899,25282,25283,25293],{},[902,25284,25285],{},[905,25286,25287,25289,25291],{},[908,25288,910],{"align":969},[908,25290,913],{"align":969},[908,25292,916],{},[918,25294,25295,25309,25323,25337,25351,25365,25379,25393,25407,25421,25435,25449],{},[905,25296,25297,25302,25305],{},[923,25298,25299],{"align":969},[1673,25300,25301],{},"cellSize",[923,25303,25304],{"align":969},"Cell size",[923,25306,25307],{},[586,25308,1513],{},[905,25310,25311,25316,25319],{},[923,25312,25313],{"align":969},[1673,25314,25315],{},"cellThickness",[923,25317,25318],{"align":969},"Thickness of cell lines",[923,25320,25321],{},[586,25322,1513],{},[905,25324,25325,25330,25333],{},[923,25326,25327],{"align":969},[1673,25328,25329],{},"cellColor",[923,25331,25332],{"align":969},"Color of cell lines",[923,25334,25335],{},[586,25336,4844],{},[905,25338,25339,25344,25347],{},[923,25340,25341],{"align":969},[1673,25342,25343],{},"sectionSize",[923,25345,25346],{"align":969},"Section size",[923,25348,25349],{},[586,25350,1893],{},[905,25352,25353,25358,25361],{},[923,25354,25355],{"align":969},[1673,25356,25357],{},"sectionThickness",[923,25359,25360],{"align":969},"Thickness of section lines",[923,25362,25363],{},[586,25364,1893],{},[905,25366,25367,25372,25374],{},[923,25368,25369],{"align":969},[1673,25370,25371],{},"sectionColor",[923,25373,25332],{"align":969},[923,25375,25376],{},[586,25377,25378],{},"'blue'",[905,25380,25381,25386,25389],{},[923,25382,25383],{"align":969},[1673,25384,25385],{},"followCamera",[923,25387,25388],{"align":969},"Whether to follow camera",[923,25390,25391],{},[586,25392,943],{},[905,25394,25395,25400,25403],{},[923,25396,25397],{"align":969},[1673,25398,25399],{},"infiniteGrid",[923,25401,25402],{"align":969},"Whether to display an infinite grid",[923,25404,25405],{},[586,25406,943],{},[905,25408,25409,25414,25417],{},[923,25410,25411],{"align":969},[1673,25412,25413],{},"fadeDistance",[923,25415,25416],{"align":969},"Fade distance",[923,25418,25419],{},[586,25420,6028],{},[905,25422,25423,25428,25431],{},[923,25424,25425],{"align":969},[1673,25426,25427],{},"fadeStrength",[923,25429,25430],{"align":969},"Fade strength",[923,25432,25433],{},[586,25434,1893],{},[905,25436,25437,25442,25445],{},[923,25438,25439],{"align":969},[1673,25440,25441],{},"fadeFrom",[923,25443,25444],{"align":969},"Fade from camera (1) or origin (0) or in between",[923,25446,25447],{},[586,25448,1893],{},[905,25450,25451,25455,25458],{},[923,25452,25453],{"align":969},[1673,25454,19976],{},[923,25456,25457],{"align":969},"Material side",[923,25459,25460],{},[586,25461,25462],{},"THREE.BackSide",[1299,25464,25465],{},"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":544,"searchDepth":545,"depth":546,"links":25467},[25468,25469],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},"Shader-based grid plane with customizable cell and section lines.",{},{"title":221,"description":25470},"v8vI4rVYVnvvadMij1GMf3y8EqHb2jEVQK1i_UillkQ",{"id":25475,"title":225,"body":25476,"description":25638,"extension":559,"links":560,"meta":25639,"navigation":562,"path":226,"seo":25640,"stem":227,"__hash__":25641},"docs/2.api/5.shapes/icosahedron.md",{"type":469,"value":25477,"toc":25635},[25478,25483,25493,25498,25504,25506,25633],[576,25479,25480],{},[25481,25482],"shapes-icosahedron",{},[582,25484,2253,25485,3275,25487,22921,25490,1118],{},[586,25486,2256],{},[586,25488,25489],{},"\u003CIcosahedron />",[586,25491,25492],{},"IcosahedronGeometry",[594,25494,25496],{"className":25495,"code":24744,"language":22930},[22928],[586,25497,24744],{"__ignoreMap":544},[582,25499,22935,25500],{},[1112,25501,25492],{"href":25502,"rel":25503},"https://threejs.org/docs/?q=ico#api/en/geometries/IcosahedronGeometry",[1116],[472,25505,15],{"id":592},[594,25507,25509],{"className":596,"code":25508,"language":601,"meta":544,"style":544},"\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",[586,25510,25511,25549,25553,25558,25621,25625],{"__ignoreMap":544},[605,25512,25513,25515,25517,25519,25521,25523,25525,25527,25529,25531,25533,25535,25537,25539,25541,25543,25545,25547],{"class":607,"line":545},[605,25514,611],{"class":610},[605,25516,225],{"class":614},[605,25518,781],{"class":610},[605,25520,1989],{"class":618},[605,25522,625],{"class":610},[605,25524,628],{"class":610},[605,25526,1466],{"class":651},[605,25528,1893],{"class":791},[605,25530,655],{"class":610},[605,25532,11773],{"class":791},[605,25534,1481],{"class":651},[605,25536,628],{"class":610},[605,25538,3978],{"class":618},[605,25540,625],{"class":610},[605,25542,628],{"class":610},[605,25544,6738],{"class":631},[605,25546,628],{"class":610},[605,25548,755],{"class":610},[605,25550,25551],{"class":607,"line":546},[605,25552,710],{"emptyLinePlaceholder":562},[605,25554,25555],{"class":607,"line":676},[605,25556,25557],{"class":651},"// Icosahedron with a custom material transformations\n",[605,25559,25560,25562,25564,25566,25568,25570,25573,25575,25577,25579,25581,25583,25585,25587,25589,25591,25593,25595,25597,25599,25601,25603,25605,25607,25609,25611,25613,25615,25617,25619],{"class":607,"line":697},[605,25561,611],{"class":610},[605,25563,225],{"class":614},[605,25565,5431],{"class":618},[605,25567,625],{"class":610},[605,25569,628],{"class":610},[605,25571,25572],{"class":631},"icosahedronRef",[605,25574,628],{"class":610},[605,25576,781],{"class":610},[605,25578,1989],{"class":618},[605,25580,625],{"class":610},[605,25582,628],{"class":610},[605,25584,1466],{"class":651},[605,25586,1893],{"class":791},[605,25588,655],{"class":610},[605,25590,11773],{"class":791},[605,25592,1481],{"class":651},[605,25594,628],{"class":610},[605,25596,781],{"class":610},[605,25598,1459],{"class":618},[605,25600,625],{"class":610},[605,25602,628],{"class":610},[605,25604,1466],{"class":651},[605,25606,792],{"class":791},[605,25608,655],{"class":610},[605,25610,23055],{"class":791},[605,25612,655],{"class":610},[605,25614,11773],{"class":791},[605,25616,1481],{"class":651},[605,25618,628],{"class":610},[605,25620,637],{"class":610},[605,25622,25623],{"class":607,"line":707},[605,25624,23070],{"class":651},[605,25626,25627,25629,25631],{"class":607,"line":713},[605,25628,700],{"class":610},[605,25630,225],{"class":614},[605,25632,637],{"class":610},[1299,25634,23081],{},{"title":544,"searchDepth":545,"depth":546,"links":25636},[25637],{"id":592,"depth":546,"text":15},"Short-cut for a IcosahedronGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":225,"description":25638},"8yFEbasoREduB_hHH4IqpVmHiF3zCgvuXNtzkba_4Jg",{"id":25643,"title":229,"body":25644,"description":26302,"extension":559,"links":560,"meta":26303,"navigation":562,"path":230,"seo":26304,"stem":231,"__hash__":26305},"docs/2.api/5.shapes/line2.md",{"type":469,"value":25645,"toc":26296},[25646,25651,25664,25666,25921,25923,26074,26077,26080,26085,26092,26154,26159,26290,26293],[2558,25647,25648],{},[25649,25650],"shapes-line2",{},[582,25652,2253,25653,3275,25655,25657,25658,1118],{},[586,25654,2256],{},[586,25656,23121],{}," component for creating 3-D lines. It wraps ",[1112,25659,23115,25662],{"href":25660,"rel":25661},"https://github.com/mrdoob/three.js/blob/e2bcdfff6427c2f106cb819b18d88d1e13aa508a/examples/jsm/lines/Line2.js",[1116],[586,25663,229],{},[472,25665,15],{"id":592},[594,25667,25670],{"className":596,"code":25668,"highlights":25669,"language":601,"meta":544,"style":544},"\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",[676,746,758,768,773,799],[586,25671,25672,25692,25710,25730,25738,25742,25750,25758,25791,25799,25865,25878,25893,25897,25905,25913],{"__ignoreMap":544},[605,25673,25674,25676,25678,25680,25682,25684,25686,25688,25690],{"class":607,"line":545},[605,25675,611],{"class":610},[605,25677,615],{"class":614},[605,25679,619],{"class":618},[605,25681,622],{"class":618},[605,25683,625],{"class":610},[605,25685,628],{"class":610},[605,25687,632],{"class":631},[605,25689,628],{"class":610},[605,25691,637],{"class":610},[605,25693,25694,25696,25698,25700,25702,25704,25706,25708],{"class":607,"line":546},[605,25695,645],{"class":644},[605,25697,648],{"class":610},[605,25699,683],{"class":651},[605,25701,661],{"class":610},[605,25703,664],{"class":644},[605,25705,667],{"class":610},[605,25707,692],{"class":631},[605,25709,673],{"class":610},[605,25711,25713,25715,25717,25720,25722,25724,25726,25728],{"class":25712,"line":676},[607,641],[605,25714,645],{"class":644},[605,25716,648],{"class":610},[605,25718,25719],{"class":651}," Line2",[605,25721,661],{"class":610},[605,25723,664],{"class":644},[605,25725,667],{"class":610},[605,25727,670],{"class":631},[605,25729,673],{"class":610},[605,25731,25732,25734,25736],{"class":607,"line":697},[605,25733,700],{"class":610},[605,25735,615],{"class":614},[605,25737,637],{"class":610},[605,25739,25740],{"class":607,"line":707},[605,25741,710],{"emptyLinePlaceholder":562},[605,25743,25744,25746,25748],{"class":607,"line":713},[605,25745,611],{"class":610},[605,25747,718],{"class":614},[605,25749,637],{"class":610},[605,25751,25752,25754,25756],{"class":607,"line":723},[605,25753,726],{"class":610},[605,25755,729],{"class":614},[605,25757,637],{"class":610},[605,25759,25761,25763,25765,25767,25769,25771,25773,25775,25777,25779,25781,25783,25785,25787,25789],{"class":25760,"line":746},[607,641],[605,25762,749],{"class":610},[605,25764,752],{"class":614},[605,25766,781],{"class":610},[605,25768,1459],{"class":618},[605,25770,625],{"class":610},[605,25772,628],{"class":610},[605,25774,1466],{"class":610},[605,25776,4160],{"class":791},[605,25778,1471],{"class":610},[605,25780,4160],{"class":791},[605,25782,1471],{"class":610},[605,25784,4160],{"class":791},[605,25786,1481],{"class":610},[605,25788,628],{"class":610},[605,25790,755],{"class":610},[605,25792,25794,25796],{"class":25793,"line":758},[607,641],[605,25795,749],{"class":610},[605,25797,25798],{"class":614},"Line2\n",[605,25800,25802,25804,25806,25808,25810,25813,25815,25817,25819,25821,25823,25826,25828,25830,25832,25834,25836,25838,25840,25842,25844,25846,25848,25850,25852,25854,25856,25858,25860,25863],{"class":25801,"line":768},[607,641],[605,25803,5693],{"class":610},[605,25805,23289],{"class":618},[605,25807,625],{"class":610},[605,25809,628],{"class":610},[605,25811,25812],{"class":610},"[[",[605,25814,937],{"class":791},[605,25816,1471],{"class":610},[605,25818,937],{"class":791},[605,25820,1471],{"class":610},[605,25822,937],{"class":791},[605,25824,25825],{"class":610},"], [",[605,25827,1893],{"class":791},[605,25829,1471],{"class":610},[605,25831,1893],{"class":791},[605,25833,1471],{"class":610},[605,25835,937],{"class":791},[605,25837,25825],{"class":610},[605,25839,1893],{"class":791},[605,25841,1471],{"class":610},[605,25843,1893],{"class":791},[605,25845,1471],{"class":610},[605,25847,1893],{"class":791},[605,25849,25825],{"class":610},[605,25851,937],{"class":791},[605,25853,1471],{"class":610},[605,25855,937],{"class":791},[605,25857,1471],{"class":610},[605,25859,1893],{"class":791},[605,25861,25862],{"class":610},"]]",[605,25864,2987],{"class":610},[605,25866,25868,25870,25872,25874,25876],{"class":25867,"line":773},[607,641],[605,25869,23371],{"class":618},[605,25871,625],{"class":610},[605,25873,628],{"class":610},[605,25875,6738],{"class":631},[605,25877,2987],{"class":610},[605,25879,25881,25883,25885,25887,25889,25891],{"class":25880,"line":799},[607,641],[605,25882,5693],{"class":610},[605,25884,23387],{"class":618},[605,25886,625],{"class":610},[605,25888,628],{"class":610},[605,25890,4160],{"class":791},[605,25892,2987],{"class":610},[605,25894,25895],{"class":607,"line":599},[605,25896,10816],{"class":610},[605,25898,25899,25901,25903],{"class":607,"line":822},[605,25900,749],{"class":610},[605,25902,3518],{"class":614},[605,25904,755],{"class":610},[605,25906,25907,25909,25911],{"class":607,"line":833},[605,25908,877],{"class":610},[605,25910,729],{"class":614},[605,25912,637],{"class":610},[605,25914,25915,25917,25919],{"class":607,"line":844},[605,25916,700],{"class":610},[605,25918,718],{"class":614},[605,25920,637],{"class":610},[472,25922,894],{"id":893},[899,25924,25925,25937],{},[902,25926,25927],{},[905,25928,25929,25931,25933,25935],{},[908,25930,910],{},[908,25932,10957],{},[908,25934,913],{},[908,25936,916],{},[918,25938,25939,25954,25966,25978,25990,26002,26014,26026,26038,26050,26062],{},[905,25940,25941,25943,25949,25952],{},[923,25942,23289],{},[923,25944,25945],{},[1112,25946,25948],{"href":25947},"#points","See below",[923,25950,25951],{},"Points representing the line",[923,25953],{},[905,25955,25956,25958,25962,25964],{},[923,25957,23518],{},[923,25959,25960],{},[586,25961,23523],{},[923,25963,23526],{},[923,25965,3152],{},[905,25967,25968,25970,25974,25976],{},[923,25969,2500],{},[923,25971,25972],{},[586,25973,2515],{},[923,25975,23539],{},[923,25977,23542],{},[905,25979,25980,25982,25986,25988],{},[923,25981,23547],{},[923,25983,25984],{},[586,25985,2537],{},[923,25987,23554],{},[923,25989,1893],{},[905,25991,25992,25994,25998,26000],{},[923,25993,23561],{},[923,25995,25996],{},[586,25997,11014],{},[923,25999,23568],{},[923,26001,943],{},[905,26003,26004,26006,26010,26012],{},[923,26005,23575],{},[923,26007,26008],{},[586,26009,11014],{},[923,26011,23582],{},[923,26013,943],{},[905,26015,26016,26018,26022,26024],{},[923,26017,23589],{},[923,26019,26020],{},[586,26021,11014],{},[923,26023,23596],{},[923,26025,943],{},[905,26027,26028,26030,26034,26036],{},[923,26029,23603],{},[923,26031,26032],{},[586,26033,2537],{},[923,26035,23610],{},[923,26037,1893],{},[905,26039,26040,26042,26046,26048],{},[923,26041,23617],{},[923,26043,26044],{},[586,26045,2537],{},[923,26047,23624],{},[923,26049,1893],{},[905,26051,26052,26054,26058,26060],{},[923,26053,23631],{},[923,26055,26056],{},[586,26057,2537],{},[923,26059,23638],{},[923,26061,1893],{},[905,26063,26064,26066,26070,26072],{},[923,26065,23645],{},[923,26067,26068],{},[586,26069,2537],{},[923,26071,23652],{},[923,26073,937],{},[7473,26075,26076],{"id":23289},"Points",[582,26078,26079],{},"The points prop has the following type:",[582,26081,26082],{},[586,26083,26084],{},"Array\u003CVector3 | Vector2 | [number, number, number] | [number, number] | number>",[582,26086,26087,26088,26091],{},"The passed array is converted to ",[586,26089,26090],{},"Array\u003Cnumber>"," – i.e., a series of x, y, z vertex coordinates. This is done array entry by array entry, as follows:",[899,26093,26094,26104],{},[902,26095,26096],{},[905,26097,26098,26101],{},[908,26099,26100],{},"Entry type",[908,26102,26103],{},"Interpretation",[918,26105,26106,26115,26127,26136,26145],{},[905,26107,26108,26112],{},[923,26109,26110],{},[586,26111,3172],{},[923,26113,26114],{},"Insert the vector's x, y, z into the result array",[905,26116,26117,26124],{},[923,26118,26119],{},[26120,26121,26122],"nobr",{},[586,26123,3169],{},[923,26125,26126],{},"Insert the array values into the result array",[905,26128,26129,26133],{},[923,26130,26131],{},[586,26132,19942],{},[923,26134,26135],{},"Insert the vector's x, y, then 0 into the result array",[905,26137,26138,26142],{},[923,26139,26140],{},[586,26141,22132],{},[923,26143,26144],{},"Insert the array values, then 0 into the result array",[905,26146,26147,26151],{},[923,26148,26149],{},[586,26150,2537],{},[923,26152,26153],{},"Insert the number into the result array",[3725,26155,26156],{},[582,26157,26158],{},"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.",[594,26160,26162],{"className":596,"code":26161,"language":601,"meta":544,"style":544},"\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",[586,26163,26164,26169,26218,26223,26227,26232,26285],{"__ignoreMap":544},[605,26165,26166],{"class":607,"line":545},[605,26167,26168],{"class":1181},"\u003C!-- Wrong -->\n",[605,26170,26171,26173,26175,26177,26179,26181,26183,26185,26187,26189,26191,26193,26195,26197,26199,26201,26203,26206,26208,26210,26212,26214,26216],{"class":607,"line":546},[605,26172,611],{"class":610},[605,26174,229],{"class":614},[605,26176,781],{"class":610},[605,26178,23289],{"class":618},[605,26180,625],{"class":610},[605,26182,628],{"class":610},[605,26184,25812],{"class":651},[605,26186,1893],{"class":791},[605,26188,655],{"class":610},[605,26190,1893],{"class":791},[605,26192,1481],{"class":651},[605,26194,655],{"class":610},[605,26196,24579],{"class":791},[605,26198,655],{"class":610},[605,26200,24579],{"class":791},[605,26202,655],{"class":610},[605,26204,26205],{"class":651}," [",[605,26207,4160],{"class":791},[605,26209,655],{"class":610},[605,26211,4160],{"class":791},[605,26213,25862],{"class":651},[605,26215,628],{"class":610},[605,26217,755],{"class":610},[605,26219,26220],{"class":607,"line":676},[605,26221,26222],{"class":1181},"\u003C!-- result: (1,1,0) (2,2,3) (3,0,❌) -->\n",[605,26224,26225],{"class":607,"line":697},[605,26226,710],{"emptyLinePlaceholder":562},[605,26228,26229],{"class":607,"line":707},[605,26230,26231],{"class":1181},"\u003C!-- Right -->\n",[605,26233,26234,26236,26238,26240,26242,26244,26246,26248,26250,26252,26254,26256,26258,26260,26262,26264,26266,26268,26270,26272,26274,26276,26279,26281,26283],{"class":607,"line":713},[605,26235,611],{"class":610},[605,26237,229],{"class":614},[605,26239,781],{"class":610},[605,26241,23289],{"class":618},[605,26243,625],{"class":610},[605,26245,628],{"class":610},[605,26247,25812],{"class":651},[605,26249,1893],{"class":791},[605,26251,655],{"class":610},[605,26253,22969],{"class":791},[605,26255,1481],{"class":651},[605,26257,655],{"class":610},[605,26259,24579],{"class":791},[605,26261,655],{"class":610},[605,26263,24579],{"class":791},[605,26265,655],{"class":610},[605,26267,11773],{"class":791},[605,26269,655],{"class":610},[605,26271,26205],{"class":651},[605,26273,4160],{"class":791},[605,26275,655],{"class":610},[605,26277,26278],{"class":791}," 3",[605,26280,25862],{"class":651},[605,26282,628],{"class":610},[605,26284,755],{"class":610},[605,26286,26287],{"class":607,"line":723},[605,26288,26289],{"class":1181},"\u003C!-- result: (1,1,0) (2,2,0) (3,3,0) -->\n",[582,26291,26292],{},"The component, like Three.js, will not keep you from shooting yourself in the foot.",[1299,26294,26295],{},"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":544,"searchDepth":545,"depth":546,"links":26297},[26298,26299],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894,"children":26300},[26301],{"id":23289,"depth":676,"text":26076},"Component for creating 3D lines using Three.js's Line2.",{},{"title":229,"description":26302},"YTuT8KgQYLHeyqqWlrzJw6EHsHroohvx3OSFmnm7qB8",{"id":26307,"title":233,"body":26308,"description":26469,"extension":559,"links":560,"meta":26470,"navigation":562,"path":234,"seo":26471,"stem":235,"__hash__":26472},"docs/2.api/5.shapes/octahedron.md",{"type":469,"value":26309,"toc":26466},[26310,26315,26325,26330,26336,26338,26464],[576,26311,26312],{},[26313,26314],"shapes-octahedron",{},[582,26316,2253,26317,3275,26319,22921,26322,1118],{},[586,26318,2256],{},[586,26320,26321],{},"\u003COctahedron />",[586,26323,26324],{},"OctahedronGeometry",[594,26326,26328],{"className":26327,"code":24744,"language":22930},[22928],[586,26329,24744],{"__ignoreMap":544},[582,26331,22935,26332],{},[1112,26333,26324],{"href":26334,"rel":26335},"https://threejs.org/docs/?q=octa#api/en/geometries/OctahedronGeometry",[1116],[472,26337,15],{"id":592},[594,26339,26341],{"className":596,"code":26340,"language":601,"meta":544,"style":544},"\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",[586,26342,26343,26381,26385,26390,26452,26456],{"__ignoreMap":544},[605,26344,26345,26347,26349,26351,26353,26355,26357,26359,26361,26363,26365,26367,26369,26371,26373,26375,26377,26379],{"class":607,"line":545},[605,26346,611],{"class":610},[605,26348,233],{"class":614},[605,26350,781],{"class":610},[605,26352,1989],{"class":618},[605,26354,625],{"class":610},[605,26356,628],{"class":610},[605,26358,1466],{"class":651},[605,26360,1893],{"class":791},[605,26362,655],{"class":610},[605,26364,11773],{"class":791},[605,26366,1481],{"class":651},[605,26368,628],{"class":610},[605,26370,3978],{"class":618},[605,26372,625],{"class":610},[605,26374,628],{"class":610},[605,26376,6738],{"class":631},[605,26378,628],{"class":610},[605,26380,755],{"class":610},[605,26382,26383],{"class":607,"line":546},[605,26384,710],{"emptyLinePlaceholder":562},[605,26386,26387],{"class":607,"line":676},[605,26388,26389],{"class":651},"// Octahedron with a custom material transformations\n",[605,26391,26392,26394,26396,26398,26400,26402,26404,26406,26408,26410,26412,26414,26416,26418,26420,26422,26424,26426,26428,26430,26432,26434,26436,26438,26440,26442,26444,26446,26448,26450],{"class":607,"line":697},[605,26393,611],{"class":610},[605,26395,233],{"class":614},[605,26397,5431],{"class":618},[605,26399,625],{"class":610},[605,26401,628],{"class":610},[605,26403,25572],{"class":631},[605,26405,628],{"class":610},[605,26407,781],{"class":610},[605,26409,1989],{"class":618},[605,26411,625],{"class":610},[605,26413,628],{"class":610},[605,26415,1466],{"class":651},[605,26417,1893],{"class":791},[605,26419,655],{"class":610},[605,26421,11773],{"class":791},[605,26423,1481],{"class":651},[605,26425,628],{"class":610},[605,26427,781],{"class":610},[605,26429,1459],{"class":618},[605,26431,625],{"class":610},[605,26433,628],{"class":610},[605,26435,1466],{"class":651},[605,26437,792],{"class":791},[605,26439,655],{"class":610},[605,26441,23055],{"class":791},[605,26443,655],{"class":610},[605,26445,11773],{"class":791},[605,26447,1481],{"class":651},[605,26449,628],{"class":610},[605,26451,637],{"class":610},[605,26453,26454],{"class":607,"line":707},[605,26455,23070],{"class":651},[605,26457,26458,26460,26462],{"class":607,"line":713},[605,26459,700],{"class":610},[605,26461,233],{"class":614},[605,26463,637],{"class":610},[1299,26465,23081],{},{"title":544,"searchDepth":545,"depth":546,"links":26467},[26468],{"id":592,"depth":546,"text":15},"Short-cut for a OctahedronGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":233,"description":26469},"Oz79qfy3nukSma4rHutQfO-XwSxFFirqgE7OHz_8-MQ",{"id":26474,"title":237,"body":26475,"description":26643,"extension":559,"links":560,"meta":26644,"navigation":562,"path":238,"seo":26645,"stem":239,"__hash__":26646},"docs/2.api/5.shapes/plane.md",{"type":469,"value":26476,"toc":26640},[26477,26482,26492,26498,26504,26509,26511,26638],[576,26478,26479],{},[26480,26481],"shapes-plane",{},[582,26483,2253,26484,3275,26486,22921,26489,1118],{},[586,26485,2256],{},[586,26487,26488],{},"\u003CPlane />",[586,26490,26491],{},"PlaneGeometry",[594,26493,26496],{"className":26494,"code":26495,"language":22930},[22928],"args: [width: number, height: number, widthSegments: number, heightSegments: number]\n",[586,26497,26495],{"__ignoreMap":544},[582,26499,22935,26500],{},[1112,26501,26491],{"href":26502,"rel":26503},"https://threejs.org/docs/?q=plane#api/en/geometries/PlaneGeometry",[1116],[2046,26505,26506],{},[582,26507,26508],{},"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).",[472,26510,15],{"id":592},[594,26512,26514],{"className":596,"code":26513,"language":601,"meta":544,"style":544},"\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",[586,26515,26516,26554,26558,26563,26626,26630],{"__ignoreMap":544},[605,26517,26518,26520,26522,26524,26526,26528,26530,26532,26534,26536,26538,26540,26542,26544,26546,26548,26550,26552],{"class":607,"line":545},[605,26519,611],{"class":610},[605,26521,237],{"class":614},[605,26523,781],{"class":610},[605,26525,1989],{"class":618},[605,26527,625],{"class":610},[605,26529,628],{"class":610},[605,26531,1466],{"class":651},[605,26533,1893],{"class":791},[605,26535,655],{"class":610},[605,26537,22969],{"class":791},[605,26539,1481],{"class":651},[605,26541,628],{"class":610},[605,26543,3978],{"class":618},[605,26545,625],{"class":610},[605,26547,628],{"class":610},[605,26549,6738],{"class":631},[605,26551,628],{"class":610},[605,26553,755],{"class":610},[605,26555,26556],{"class":607,"line":546},[605,26557,710],{"emptyLinePlaceholder":562},[605,26559,26560],{"class":607,"line":676},[605,26561,26562],{"class":651},"// Plane with a custom material transformations\n",[605,26564,26565,26567,26569,26571,26573,26575,26578,26580,26582,26584,26586,26588,26590,26592,26594,26596,26598,26600,26602,26604,26606,26608,26610,26612,26614,26616,26618,26620,26622,26624],{"class":607,"line":697},[605,26566,611],{"class":610},[605,26568,237],{"class":614},[605,26570,5431],{"class":618},[605,26572,625],{"class":610},[605,26574,628],{"class":610},[605,26576,26577],{"class":631},"planeRef",[605,26579,628],{"class":610},[605,26581,781],{"class":610},[605,26583,1989],{"class":618},[605,26585,625],{"class":610},[605,26587,628],{"class":610},[605,26589,1466],{"class":651},[605,26591,15063],{"class":791},[605,26593,655],{"class":610},[605,26595,23900],{"class":791},[605,26597,1481],{"class":651},[605,26599,628],{"class":610},[605,26601,781],{"class":610},[605,26603,1459],{"class":618},[605,26605,625],{"class":610},[605,26607,628],{"class":610},[605,26609,1466],{"class":651},[605,26611,937],{"class":791},[605,26613,655],{"class":610},[605,26615,23055],{"class":791},[605,26617,655],{"class":610},[605,26619,11773],{"class":791},[605,26621,1481],{"class":651},[605,26623,628],{"class":610},[605,26625,637],{"class":610},[605,26627,26628],{"class":607,"line":707},[605,26629,23070],{"class":651},[605,26631,26632,26634,26636],{"class":607,"line":713},[605,26633,700],{"class":610},[605,26635,237],{"class":614},[605,26637,637],{"class":610},[1299,26639,23081],{},{"title":544,"searchDepth":545,"depth":546,"links":26641},[26642],{"id":592,"depth":546,"text":15},"Short-cut for a PlaneGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":237,"description":26643},"5OBrHmZXTQoZvxuG3DLZ3euGfAYR51mvVTntqkflx80",{"id":26648,"title":241,"body":26649,"description":27074,"extension":559,"links":560,"meta":27075,"navigation":562,"path":242,"seo":27076,"stem":243,"__hash__":27077},"docs/2.api/5.shapes/quadratic-bezier-line.md",{"type":469,"value":26650,"toc":27070},[26651,26656,26664,26666,26972,26974,26982,27068],[2558,26652,26653],{},[26654,26655],"shapes-quadratic-bezier-line",{},[582,26657,26658,24028,26661,26663],{},[586,26659,26660],{},"\u003CQuadraticBezierLine />",[586,26662,23121],{}," between start and end points, with an optional control point.",[472,26665,15],{"id":592},[594,26667,26669],{"className":596,"code":26668,"language":601,"meta":544,"style":544},"\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",[586,26670,26671,26691,26709,26728,26746,26754,26758,26766,26774,26806,26813,26843,26873,26904,26918,26930,26944,26948,26956,26964],{"__ignoreMap":544},[605,26672,26673,26675,26677,26679,26681,26683,26685,26687,26689],{"class":607,"line":545},[605,26674,611],{"class":610},[605,26676,615],{"class":614},[605,26678,619],{"class":618},[605,26680,622],{"class":618},[605,26682,625],{"class":610},[605,26684,628],{"class":610},[605,26686,632],{"class":631},[605,26688,628],{"class":610},[605,26690,637],{"class":610},[605,26692,26693,26695,26697,26699,26701,26703,26705,26707],{"class":607,"line":546},[605,26694,645],{"class":644},[605,26696,648],{"class":610},[605,26698,683],{"class":651},[605,26700,661],{"class":610},[605,26702,664],{"class":644},[605,26704,667],{"class":610},[605,26706,692],{"class":631},[605,26708,673],{"class":610},[605,26710,26711,26713,26715,26718,26720,26722,26724,26726],{"class":607,"line":676},[605,26712,645],{"class":644},[605,26714,648],{"class":610},[605,26716,26717],{"class":651}," QuadraticBezierLine",[605,26719,661],{"class":610},[605,26721,664],{"class":644},[605,26723,667],{"class":610},[605,26725,670],{"class":631},[605,26727,673],{"class":610},[605,26729,26730,26732,26734,26736,26738,26740,26742,26744],{"class":607,"line":697},[605,26731,645],{"class":644},[605,26733,648],{"class":610},[605,26735,23203],{"class":651},[605,26737,661],{"class":610},[605,26739,664],{"class":644},[605,26741,667],{"class":610},[605,26743,2678],{"class":631},[605,26745,673],{"class":610},[605,26747,26748,26750,26752],{"class":607,"line":707},[605,26749,700],{"class":610},[605,26751,615],{"class":614},[605,26753,637],{"class":610},[605,26755,26756],{"class":607,"line":713},[605,26757,710],{"emptyLinePlaceholder":562},[605,26759,26760,26762,26764],{"class":607,"line":723},[605,26761,611],{"class":610},[605,26763,718],{"class":614},[605,26765,637],{"class":610},[605,26767,26768,26770,26772],{"class":607,"line":746},[605,26769,726],{"class":610},[605,26771,729],{"class":614},[605,26773,637],{"class":610},[605,26775,26776,26778,26780,26782,26784,26786,26788,26790,26792,26794,26796,26798,26800,26802,26804],{"class":607,"line":758},[605,26777,749],{"class":610},[605,26779,752],{"class":614},[605,26781,781],{"class":610},[605,26783,1459],{"class":618},[605,26785,625],{"class":610},[605,26787,628],{"class":610},[605,26789,1466],{"class":610},[605,26791,4160],{"class":791},[605,26793,1471],{"class":610},[605,26795,4160],{"class":791},[605,26797,1471],{"class":610},[605,26799,4160],{"class":791},[605,26801,1481],{"class":610},[605,26803,628],{"class":610},[605,26805,755],{"class":610},[605,26807,26808,26810],{"class":607,"line":768},[605,26809,749],{"class":610},[605,26811,26812],{"class":614},"QuadraticBezierLine\n",[605,26814,26815,26817,26819,26821,26823,26825,26827,26829,26831,26833,26835,26837,26839,26841],{"class":607,"line":773},[605,26816,5693],{"class":610},[605,26818,7773],{"class":618},[605,26820,625],{"class":610},[605,26822,628],{"class":610},[605,26824,24193],{"class":610},[605,26826,3172],{"class":2800},[605,26828,23301],{"class":610},[605,26830,1893],{"class":791},[605,26832,1471],{"class":610},[605,26834,937],{"class":791},[605,26836,1471],{"class":610},[605,26838,937],{"class":791},[605,26840,4125],{"class":610},[605,26842,2987],{"class":610},[605,26844,26845,26847,26849,26851,26853,26855,26857,26859,26861,26863,26865,26867,26869,26871],{"class":607,"line":799},[605,26846,5693],{"class":610},[605,26848,7787],{"class":618},[605,26850,625],{"class":610},[605,26852,628],{"class":610},[605,26854,24193],{"class":610},[605,26856,3172],{"class":2800},[605,26858,2970],{"class":610},[605,26860,1893],{"class":791},[605,26862,1471],{"class":610},[605,26864,937],{"class":791},[605,26866,1471],{"class":610},[605,26868,937],{"class":791},[605,26870,4125],{"class":610},[605,26872,2987],{"class":610},[605,26874,26875,26877,26880,26882,26884,26886,26888,26890,26892,26894,26896,26898,26900,26902],{"class":607,"line":599},[605,26876,5693],{"class":610},[605,26878,26879],{"class":618},"mid",[605,26881,625],{"class":610},[605,26883,628],{"class":610},[605,26885,24193],{"class":610},[605,26887,3172],{"class":2800},[605,26889,2970],{"class":610},[605,26891,937],{"class":791},[605,26893,1471],{"class":610},[605,26895,1893],{"class":791},[605,26897,1471],{"class":610},[605,26899,937],{"class":791},[605,26901,4125],{"class":610},[605,26903,2987],{"class":610},[605,26905,26906,26908,26910,26912,26914,26916],{"class":607,"line":822},[605,26907,5693],{"class":610},[605,26909,23357],{"class":618},[605,26911,625],{"class":610},[605,26913,628],{"class":610},[605,26915,4597],{"class":791},[605,26917,2987],{"class":610},[605,26919,26920,26922,26924,26926,26928],{"class":607,"line":833},[605,26921,23371],{"class":618},[605,26923,625],{"class":610},[605,26925,628],{"class":610},[605,26927,6738],{"class":631},[605,26929,2987],{"class":610},[605,26931,26932,26934,26936,26938,26940,26942],{"class":607,"line":844},[605,26933,5693],{"class":610},[605,26935,23387],{"class":618},[605,26937,625],{"class":610},[605,26939,628],{"class":610},[605,26941,4160],{"class":791},[605,26943,2987],{"class":610},[605,26945,26946],{"class":607,"line":854},[605,26947,10816],{"class":610},[605,26949,26950,26952,26954],{"class":607,"line":600},[605,26951,749],{"class":610},[605,26953,3518],{"class":614},[605,26955,755],{"class":610},[605,26957,26958,26960,26962],{"class":607,"line":874},[605,26959,877],{"class":610},[605,26961,729],{"class":614},[605,26963,637],{"class":610},[605,26965,26966,26968,26970],{"class":607,"line":884},[605,26967,700],{"class":610},[605,26969,718],{"class":614},[605,26971,637],{"class":610},[472,26973,894],{"id":893},[582,26975,26976,24378,26978,24381,26980,1118],{},[586,26977,26660],{},[586,26979,23289],{},[586,26981,23121],{},[899,26983,26984,26999],{},[902,26985,26986],{},[905,26987,26988,26990,26992,26994,26996],{},[908,26989,910],{},[908,26991,10957],{},[908,26993,913],{},[908,26995,916],{},[908,26997,26998],{},"Required",[918,27000,27001,27018,27034,27052],{},[905,27002,27003,27007,27011,27013,27015],{},[923,27004,27005],{},[586,27006,7773],{},[923,27008,27009],{},[586,27010,24410],{},[923,27012,24413],{},[923,27014],{},[923,27016,27017],{},"yes",[905,27019,27020,27024,27028,27030,27032],{},[923,27021,27022],{},[586,27023,7787],{},[923,27025,27026],{},[586,27027,24410],{},[923,27029,24428],{},[923,27031],{},[923,27033,27017],{},[905,27035,27036,27040,27044,27047,27049],{},[923,27037,27038],{},[586,27039,26879],{},[923,27041,27042],{},[586,27043,24410],{},[923,27045,27046],{},"Control point",[923,27048],{},[923,27050,27051],{},"no",[905,27053,27054,27058,27062,27064,27066],{},[923,27055,27056],{},[586,27057,23357],{},[923,27059,27060],{},[586,27061,2537],{},[923,27063,23466],{},[923,27065,23469],{},[923,27067,27051],{},[1299,27069,23657],{},{"title":544,"searchDepth":545,"depth":546,"links":27071},[27072,27073],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},"Renders a Line2 between start and end points with an optional control point.",{},{"title":241,"description":27074},"x3tvZVc6qkdY7oDfxpxQl2C7EV85RKijXjcoHR_b1q8",{"id":27079,"title":245,"body":27080,"description":27251,"extension":559,"links":560,"meta":27252,"navigation":562,"path":246,"seo":27253,"stem":247,"__hash__":27254},"docs/2.api/5.shapes/ring.md",{"type":469,"value":27081,"toc":27248},[27082,27087,27097,27103,27109,27111,27246],[576,27083,27084],{},[27085,27086],"shapes-ring",{},[582,27088,2253,27089,3275,27091,22921,27094,1118],{},[586,27090,2256],{},[586,27092,27093],{},"\u003CRing />",[586,27095,27096],{},"RingGeometry",[594,27098,27101],{"className":27099,"code":27100,"language":22930},[22928],"args: [\n  innerRadius: number,\n  outerRadius: number,\n  thetaSegments: number,\n  phiSegments: number,\n  thetaStart: number,\n  thetaLength: number\n]\n",[586,27102,27100],{"__ignoreMap":544},[582,27104,22935,27105],{},[1112,27106,27096],{"href":27107,"rel":27108},"https://threejs.org/docs/?q=ring#api/en/geometries/RingGeometry",[1116],[472,27110,15],{"id":592},[594,27112,27114],{"className":596,"code":27113,"language":601,"meta":544,"style":544},"\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",[586,27115,27116,27158,27162,27167,27234,27238],{"__ignoreMap":544},[605,27117,27118,27120,27122,27124,27126,27128,27130,27132,27134,27136,27138,27140,27142,27144,27146,27148,27150,27152,27154,27156],{"class":607,"line":545},[605,27119,611],{"class":610},[605,27121,245],{"class":614},[605,27123,781],{"class":610},[605,27125,1989],{"class":618},[605,27127,625],{"class":610},[605,27129,628],{"class":610},[605,27131,1466],{"class":651},[605,27133,1513],{"class":791},[605,27135,655],{"class":610},[605,27137,22969],{"class":791},[605,27139,655],{"class":610},[605,27141,23726],{"class":791},[605,27143,1481],{"class":651},[605,27145,628],{"class":610},[605,27147,3978],{"class":618},[605,27149,625],{"class":610},[605,27151,628],{"class":610},[605,27153,6738],{"class":631},[605,27155,628],{"class":610},[605,27157,755],{"class":610},[605,27159,27160],{"class":607,"line":546},[605,27161,710],{"emptyLinePlaceholder":562},[605,27163,27164],{"class":607,"line":676},[605,27165,27166],{"class":651},"// Ring with a custom material transformations\n",[605,27168,27169,27171,27173,27175,27177,27179,27182,27184,27186,27188,27190,27192,27194,27196,27198,27200,27202,27204,27206,27208,27210,27212,27214,27216,27218,27220,27222,27224,27226,27228,27230,27232],{"class":607,"line":697},[605,27170,611],{"class":610},[605,27172,245],{"class":614},[605,27174,5431],{"class":618},[605,27176,625],{"class":610},[605,27178,628],{"class":610},[605,27180,27181],{"class":631},"ringRef",[605,27183,628],{"class":610},[605,27185,781],{"class":610},[605,27187,1989],{"class":618},[605,27189,625],{"class":610},[605,27191,628],{"class":610},[605,27193,1466],{"class":651},[605,27195,1513],{"class":791},[605,27197,655],{"class":610},[605,27199,22969],{"class":791},[605,27201,655],{"class":610},[605,27203,23726],{"class":791},[605,27205,1481],{"class":651},[605,27207,628],{"class":610},[605,27209,781],{"class":610},[605,27211,1459],{"class":618},[605,27213,625],{"class":610},[605,27215,628],{"class":610},[605,27217,1466],{"class":651},[605,27219,792],{"class":791},[605,27221,655],{"class":610},[605,27223,23055],{"class":791},[605,27225,655],{"class":610},[605,27227,11773],{"class":791},[605,27229,1481],{"class":651},[605,27231,628],{"class":610},[605,27233,637],{"class":610},[605,27235,27236],{"class":607,"line":707},[605,27237,23070],{"class":651},[605,27239,27240,27242,27244],{"class":607,"line":713},[605,27241,700],{"class":610},[605,27243,245],{"class":614},[605,27245,637],{"class":610},[1299,27247,23081],{},{"title":544,"searchDepth":545,"depth":546,"links":27249},[27250],{"id":592,"depth":546,"text":15},"Short-cut for a RingGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":245,"description":27251},"sjdJr8WfSUL8VppV0tIyFALL7j5Mg1IJmmVLISwAI9U",{"id":27256,"title":249,"body":27257,"description":27413,"extension":559,"links":560,"meta":27414,"navigation":562,"path":250,"seo":27415,"stem":251,"__hash__":27416},"docs/2.api/5.shapes/rounded-box.md",{"type":469,"value":27258,"toc":27410},[27259,27264,27275,27281,27287,27289,27408],[576,27260,27261],{},[27262,27263],"shapes-rounded-box",{},[582,27265,2253,27266,3275,27268,22921,27271,27274],{},[586,27267,2256],{},[586,27269,27270],{},"\u003CRoundedBox />",[586,27272,27273],{},"RoundedBoxGeometry"," .",[594,27276,27279],{"className":27277,"code":27278,"language":22930},[22928],"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",[586,27280,27278],{"__ignoreMap":544},[582,27282,22935,27283],{},[1112,27284,27273],{"href":27285,"rel":27286},"https://github.com/mrdoob/three.js/blob/master/examples/jsm/geometries/RoundedBoxGeometry.js",[1116],[472,27288,15],{"id":592},[594,27290,27292],{"className":596,"code":27291,"language":601,"meta":544,"style":544},"\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",[586,27293,27294,27345,27349,27354,27396,27400],{"__ignoreMap":544},[605,27295,27296,27298,27301,27303,27305,27307,27309,27311,27313,27315,27317,27319,27321,27323,27325,27327,27329,27331,27333,27335,27337,27339,27341,27343],{"class":607,"line":545},[605,27297,611],{"class":610},[605,27299,27300],{"class":614},"RoundedBox",[605,27302,781],{"class":610},[605,27304,1989],{"class":618},[605,27306,625],{"class":610},[605,27308,628],{"class":610},[605,27310,1466],{"class":651},[605,27312,1893],{"class":791},[605,27314,655],{"class":610},[605,27316,22969],{"class":791},[605,27318,655],{"class":610},[605,27320,22969],{"class":791},[605,27322,655],{"class":610},[605,27324,24579],{"class":791},[605,27326,655],{"class":610},[605,27328,17067],{"class":791},[605,27330,1481],{"class":651},[605,27332,628],{"class":610},[605,27334,3978],{"class":618},[605,27336,625],{"class":610},[605,27338,628],{"class":610},[605,27340,6738],{"class":631},[605,27342,628],{"class":610},[605,27344,755],{"class":610},[605,27346,27347],{"class":607,"line":546},[605,27348,710],{"emptyLinePlaceholder":562},[605,27350,27351],{"class":607,"line":676},[605,27352,27353],{"class":651},"// RoundedBox with a custom material transformations\n",[605,27355,27356,27358,27360,27362,27364,27366,27368,27370,27372,27374,27376,27378,27380,27382,27384,27386,27388,27390,27392,27394],{"class":607,"line":697},[605,27357,611],{"class":610},[605,27359,27300],{"class":614},[605,27361,5431],{"class":618},[605,27363,625],{"class":610},[605,27365,628],{"class":610},[605,27367,9809],{"class":631},[605,27369,628],{"class":610},[605,27371,781],{"class":610},[605,27373,1459],{"class":618},[605,27375,625],{"class":610},[605,27377,628],{"class":610},[605,27379,1466],{"class":651},[605,27381,937],{"class":791},[605,27383,655],{"class":610},[605,27385,23055],{"class":791},[605,27387,655],{"class":610},[605,27389,11773],{"class":791},[605,27391,1481],{"class":651},[605,27393,628],{"class":610},[605,27395,637],{"class":610},[605,27397,27398],{"class":607,"line":707},[605,27399,23070],{"class":651},[605,27401,27402,27404,27406],{"class":607,"line":713},[605,27403,700],{"class":610},[605,27405,27300],{"class":614},[605,27407,637],{"class":610},[1299,27409,23081],{},{"title":544,"searchDepth":545,"depth":546,"links":27411},[27412],{"id":592,"depth":546,"text":15},"Short-cut for a RoundedBoxGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":249,"description":27413},"6uRmRs4RGOfq4lQeUlAm3DycDFH9FnKYbwGuk5ODp5k",{"id":27418,"title":253,"body":27419,"description":27607,"extension":559,"links":560,"meta":27608,"navigation":562,"path":254,"seo":27609,"stem":255,"__hash__":27610},"docs/2.api/5.shapes/screen-quad.md",{"type":469,"value":27420,"toc":27603},[27421,27426,27429,27431,27581,27585,27601],[2558,27422,27423],{},[27424,27425],"shapes-screen-quad",{},[582,27427,27428],{},"A triangle that fills the screen when using a THREE.OrthographicCamera. Useful for full-screen fragment shader work.",[472,27430,15],{"id":592},[594,27432,27434],{"className":596,"code":27433,"language":601,"meta":544,"style":544},"\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",[586,27435,27436,27456,27474,27493,27501,27505,27513,27521,27530,27539,27557,27565,27573],{"__ignoreMap":544},[605,27437,27438,27440,27442,27444,27446,27448,27450,27452,27454],{"class":607,"line":545},[605,27439,611],{"class":610},[605,27441,615],{"class":614},[605,27443,619],{"class":618},[605,27445,622],{"class":618},[605,27447,625],{"class":610},[605,27449,628],{"class":610},[605,27451,632],{"class":631},[605,27453,628],{"class":610},[605,27455,637],{"class":610},[605,27457,27458,27460,27462,27464,27466,27468,27470,27472],{"class":607,"line":546},[605,27459,645],{"class":644},[605,27461,648],{"class":610},[605,27463,683],{"class":651},[605,27465,661],{"class":610},[605,27467,664],{"class":644},[605,27469,667],{"class":610},[605,27471,692],{"class":631},[605,27473,673],{"class":610},[605,27475,27476,27478,27480,27483,27485,27487,27489,27491],{"class":607,"line":676},[605,27477,645],{"class":644},[605,27479,648],{"class":610},[605,27481,27482],{"class":651}," ScreenQuad",[605,27484,661],{"class":610},[605,27486,664],{"class":644},[605,27488,667],{"class":610},[605,27490,670],{"class":631},[605,27492,673],{"class":610},[605,27494,27495,27497,27499],{"class":607,"line":697},[605,27496,700],{"class":610},[605,27498,615],{"class":614},[605,27500,637],{"class":610},[605,27502,27503],{"class":607,"line":707},[605,27504,710],{"emptyLinePlaceholder":562},[605,27506,27507,27509,27511],{"class":607,"line":713},[605,27508,611],{"class":610},[605,27510,718],{"class":614},[605,27512,637],{"class":610},[605,27514,27515,27517,27519],{"class":607,"line":723},[605,27516,726],{"class":610},[605,27518,729],{"class":614},[605,27520,637],{"class":610},[605,27522,27523,27525,27528],{"class":607,"line":746},[605,27524,749],{"class":610},[605,27526,27527],{"class":614},"TresOrthographicCamera",[605,27529,755],{"class":610},[605,27531,27532,27534,27537],{"class":607,"line":758},[605,27533,749],{"class":610},[605,27535,27536],{"class":614},"ScreenQuad",[605,27538,637],{"class":610},[605,27540,27541,27543,27545,27547,27549,27551,27553,27555],{"class":607,"line":768},[605,27542,825],{"class":610},[605,27544,6729],{"class":614},[605,27546,3978],{"class":618},[605,27548,625],{"class":610},[605,27550,628],{"class":610},[605,27552,6738],{"class":631},[605,27554,628],{"class":610},[605,27556,755],{"class":610},[605,27558,27559,27561,27563],{"class":607,"line":773},[605,27560,867],{"class":610},[605,27562,27536],{"class":614},[605,27564,637],{"class":610},[605,27566,27567,27569,27571],{"class":607,"line":799},[605,27568,877],{"class":610},[605,27570,729],{"class":614},[605,27572,637],{"class":610},[605,27574,27575,27577,27579],{"class":607,"line":599},[605,27576,700],{"class":610},[605,27578,718],{"class":614},[605,27580,637],{"class":610},[472,27582,27584],{"id":27583},"references","References",[3136,27586,27587,27594],{},[3139,27588,27589],{},[1112,27590,27593],{"href":27591,"rel":27592},"https://www.cginternals.com/en/blog/2018-01-10-screen-aligned-quads-and-triangles.html",[1116],"Why a triangle?",[3139,27595,27596],{},[1112,27597,27600],{"href":27598,"rel":27599},"https://luruke.medium.com/simple-postprocessing-in-three-js-91936ecadfb7",[1116],"Simple postprocessing in THREE.js",[1299,27602,21380],{},{"title":544,"searchDepth":545,"depth":546,"links":27604},[27605,27606],{"id":592,"depth":546,"text":15},{"id":27583,"depth":546,"text":27584},"A triangle that fills the screen for full-screen fragment shader work.",{},{"title":253,"description":27607},"oOKB41bXp-6mVLBkpwVw_dhi_qRVxWeZlyRtBzLJbmE",{"id":27612,"title":257,"body":27613,"description":27783,"extension":559,"links":560,"meta":27784,"navigation":562,"path":258,"seo":27785,"stem":259,"__hash__":27786},"docs/2.api/5.shapes/sphere.md",{"type":469,"value":27614,"toc":27780},[27615,27620,27630,27636,27642,27644,27778],[576,27616,27617],{},[27618,27619],"shapes-sphere",{},[582,27621,2253,27622,3275,27624,22921,27627,1118],{},[586,27623,2256],{},[586,27625,27626],{},"\u003CSphere />",[586,27628,27629],{},"SphereGeometry",[594,27631,27634],{"className":27632,"code":27633,"language":22930},[22928],"args: [\n  radius: number,\n  widthSegments: number,\n  heightSegments: number,\n  phiStart: number,\n  phiLength: number,\n  thetaStart: number,\n  thetaLength: number\n]\n",[586,27635,27633],{"__ignoreMap":544},[582,27637,22935,27638],{},[1112,27639,27629],{"href":27640,"rel":27641},"https://threejs.org/docs/?q=sphere#api/en/geometries/SphereGeometry",[1116],[472,27643,15],{"id":592},[594,27645,27647],{"className":596,"code":27646,"language":601,"meta":544,"style":544},"\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",[586,27648,27649,27691,27695,27700,27766,27770],{"__ignoreMap":544},[605,27650,27651,27653,27655,27657,27659,27661,27663,27665,27667,27669,27671,27673,27675,27677,27679,27681,27683,27685,27687,27689],{"class":607,"line":545},[605,27652,611],{"class":610},[605,27654,257],{"class":614},[605,27656,781],{"class":610},[605,27658,1989],{"class":618},[605,27660,625],{"class":610},[605,27662,628],{"class":610},[605,27664,1466],{"class":651},[605,27666,1893],{"class":791},[605,27668,655],{"class":610},[605,27670,22969],{"class":791},[605,27672,655],{"class":610},[605,27674,22969],{"class":791},[605,27676,1481],{"class":651},[605,27678,628],{"class":610},[605,27680,3978],{"class":618},[605,27682,625],{"class":610},[605,27684,628],{"class":610},[605,27686,6738],{"class":631},[605,27688,628],{"class":610},[605,27690,755],{"class":610},[605,27692,27693],{"class":607,"line":546},[605,27694,710],{"emptyLinePlaceholder":562},[605,27696,27697],{"class":607,"line":676},[605,27698,27699],{"class":651},"// Sphere with a custom material transformations\n",[605,27701,27702,27704,27706,27708,27710,27712,27714,27716,27718,27720,27722,27724,27726,27728,27730,27732,27734,27736,27738,27740,27742,27744,27746,27748,27750,27752,27754,27756,27758,27760,27762,27764],{"class":607,"line":697},[605,27703,611],{"class":610},[605,27705,257],{"class":614},[605,27707,5431],{"class":618},[605,27709,625],{"class":610},[605,27711,628],{"class":610},[605,27713,26577],{"class":631},[605,27715,628],{"class":610},[605,27717,781],{"class":610},[605,27719,1989],{"class":618},[605,27721,625],{"class":610},[605,27723,628],{"class":610},[605,27725,1466],{"class":651},[605,27727,1893],{"class":791},[605,27729,655],{"class":610},[605,27731,22969],{"class":791},[605,27733,655],{"class":610},[605,27735,22969],{"class":791},[605,27737,1481],{"class":651},[605,27739,628],{"class":610},[605,27741,781],{"class":610},[605,27743,1459],{"class":618},[605,27745,625],{"class":610},[605,27747,628],{"class":610},[605,27749,1466],{"class":651},[605,27751,792],{"class":791},[605,27753,655],{"class":610},[605,27755,23055],{"class":791},[605,27757,655],{"class":610},[605,27759,11773],{"class":791},[605,27761,1481],{"class":651},[605,27763,628],{"class":610},[605,27765,637],{"class":610},[605,27767,27768],{"class":607,"line":707},[605,27769,23070],{"class":651},[605,27771,27772,27774,27776],{"class":607,"line":713},[605,27773,700],{"class":610},[605,27775,257],{"class":614},[605,27777,637],{"class":610},[1299,27779,23081],{},{"title":544,"searchDepth":545,"depth":546,"links":27781},[27782],{"id":592,"depth":546,"text":15},"Short-cut for a SphereGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":257,"description":27783},"CXqQd226fbRLkf86b33CXbH-uGM-cwo2HQNRB4Pt8Xs",{"id":27788,"title":261,"body":27789,"description":28235,"extension":559,"links":560,"meta":28236,"navigation":562,"path":262,"seo":28237,"stem":263,"__hash__":28238},"docs/2.api/5.shapes/superformula.md",{"type":469,"value":27790,"toc":28230},[27791,27796,27809,27811,28095,28097,28107,28219,28223,28228],[576,27792,27793],{},[27794,27795],"shapes-super-formula",{},[582,27797,2253,27798,3275,27800,27803,27804,1118],{},[586,27799,2256],{},[586,27801,27802],{},"\u003CSuperformula />"," component that produces a configurable ",[1112,27805,27808],{"href":27806,"rel":27807},"https://en.wikipedia.org/wiki/Superformula",[1116],"3D plot of the superformula",[472,27810,15],{"id":592},[594,27812,27815],{"className":596,"code":27813,"highlights":27814,"language":601,"meta":544,"style":544},"\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",[676,758,768,773,799,599,822],[586,27816,27817,27837,27855,27875,27883,27887,27895,27903,27935,27943,27959,27975,27991,28021,28035,28039,28047,28079,28087],{"__ignoreMap":544},[605,27818,27819,27821,27823,27825,27827,27829,27831,27833,27835],{"class":607,"line":545},[605,27820,611],{"class":610},[605,27822,615],{"class":614},[605,27824,619],{"class":618},[605,27826,622],{"class":618},[605,27828,625],{"class":610},[605,27830,628],{"class":610},[605,27832,632],{"class":631},[605,27834,628],{"class":610},[605,27836,637],{"class":610},[605,27838,27839,27841,27843,27845,27847,27849,27851,27853],{"class":607,"line":546},[605,27840,645],{"class":644},[605,27842,648],{"class":610},[605,27844,683],{"class":651},[605,27846,661],{"class":610},[605,27848,664],{"class":644},[605,27850,667],{"class":610},[605,27852,692],{"class":631},[605,27854,673],{"class":610},[605,27856,27858,27860,27862,27865,27867,27869,27871,27873],{"class":27857,"line":676},[607,641],[605,27859,645],{"class":644},[605,27861,648],{"class":610},[605,27863,27864],{"class":651}," Superformula",[605,27866,661],{"class":610},[605,27868,664],{"class":644},[605,27870,667],{"class":610},[605,27872,670],{"class":631},[605,27874,673],{"class":610},[605,27876,27877,27879,27881],{"class":607,"line":697},[605,27878,700],{"class":610},[605,27880,615],{"class":614},[605,27882,637],{"class":610},[605,27884,27885],{"class":607,"line":707},[605,27886,710],{"emptyLinePlaceholder":562},[605,27888,27889,27891,27893],{"class":607,"line":713},[605,27890,611],{"class":610},[605,27892,718],{"class":614},[605,27894,637],{"class":610},[605,27896,27897,27899,27901],{"class":607,"line":723},[605,27898,726],{"class":610},[605,27900,729],{"class":614},[605,27902,637],{"class":610},[605,27904,27905,27907,27909,27911,27913,27915,27917,27919,27921,27923,27925,27927,27929,27931,27933],{"class":607,"line":746},[605,27906,749],{"class":610},[605,27908,752],{"class":614},[605,27910,781],{"class":610},[605,27912,1459],{"class":618},[605,27914,625],{"class":610},[605,27916,628],{"class":610},[605,27918,1466],{"class":610},[605,27920,4160],{"class":791},[605,27922,1471],{"class":610},[605,27924,4160],{"class":791},[605,27926,1471],{"class":610},[605,27928,4160],{"class":791},[605,27930,1481],{"class":610},[605,27932,628],{"class":610},[605,27934,755],{"class":610},[605,27936,27938,27940],{"class":27937,"line":758},[607,641],[605,27939,749],{"class":610},[605,27941,27942],{"class":614},"Superformula\n",[605,27944,27946,27948,27951,27953,27955,27957],{"class":27945,"line":768},[607,641],[605,27947,5693],{"class":610},[605,27949,27950],{"class":618},"width-segments",[605,27952,625],{"class":610},[605,27954,628],{"class":610},[605,27956,3963],{"class":791},[605,27958,2987],{"class":610},[605,27960,27962,27964,27967,27969,27971,27973],{"class":27961,"line":773},[607,641],[605,27963,5693],{"class":610},[605,27965,27966],{"class":618},"height-segments",[605,27968,625],{"class":610},[605,27970,628],{"class":610},[605,27972,3963],{"class":791},[605,27974,2987],{"class":610},[605,27976,27978,27980,27983,27985,27987,27989],{"class":27977,"line":799},[607,641],[605,27979,5693],{"class":610},[605,27981,27982],{"class":618},"num-arms-a",[605,27984,625],{"class":610},[605,27986,628],{"class":610},[605,27988,2396],{"class":791},[605,27990,2987],{"class":610},[605,27992,27994,27996,27999,28001,28003,28005,28008,28010,28012,28014,28017,28019],{"class":27993,"line":599},[607,641],[605,27995,5693],{"class":610},[605,27997,27998],{"class":618},"exp-a",[605,28000,625],{"class":610},[605,28002,628],{"class":610},[605,28004,1466],{"class":610},[605,28006,28007],{"class":791},"40",[605,28009,1471],{"class":610},[605,28011,25191],{"class":791},[605,28013,1471],{"class":610},[605,28015,28016],{"class":791},"0.9",[605,28018,1481],{"class":610},[605,28020,2987],{"class":610},[605,28022,28024,28026,28028,28030,28033],{"class":28023,"line":822},[607,641],[605,28025,23371],{"class":618},[605,28027,625],{"class":610},[605,28029,628],{"class":610},[605,28031,28032],{"class":631},"#ff6b6b",[605,28034,2987],{"class":610},[605,28036,28037],{"class":607,"line":833},[605,28038,10816],{"class":610},[605,28040,28041,28043,28045],{"class":607,"line":844},[605,28042,749],{"class":610},[605,28044,3518],{"class":614},[605,28046,755],{"class":610},[605,28048,28049,28051,28053,28055,28057,28059,28061,28063,28065,28067,28069,28071,28073,28075,28077],{"class":607,"line":854},[605,28050,749],{"class":610},[605,28052,3539],{"class":614},[605,28054,781],{"class":610},[605,28056,1459],{"class":618},[605,28058,625],{"class":610},[605,28060,628],{"class":610},[605,28062,1466],{"class":610},[605,28064,937],{"class":791},[605,28066,1471],{"class":610},[605,28068,792],{"class":791},[605,28070,1471],{"class":610},[605,28072,3490],{"class":791},[605,28074,1481],{"class":610},[605,28076,628],{"class":610},[605,28078,755],{"class":610},[605,28080,28081,28083,28085],{"class":607,"line":600},[605,28082,877],{"class":610},[605,28084,729],{"class":614},[605,28086,637],{"class":610},[605,28088,28089,28091,28093],{"class":607,"line":874},[605,28090,700],{"class":610},[605,28092,718],{"class":614},[605,28094,637],{"class":610},[472,28096,894],{"id":893},[582,28098,2253,28099,28101,28102,28106],{},[586,28100,27802],{}," 3D plot is the product of 2 2D superformulas, referred to as \"A\" and \"B\" in the props. See this ",[1112,28103,28105],{"href":27806,"rel":28104},[1116],"Wikipedia article about the superformula"," for more information about the function's arguments.",[899,28108,28109,28119],{},[902,28110,28111],{},[905,28112,28113,28115,28117],{},[908,28114,3118],{"align":969},[908,28116,913],{"align":969},[908,28118,916],{"align":969},[918,28120,28121,28135,28149,28163,28178,28192,28206],{},[905,28122,28123,28128,28131],{},[923,28124,28125],{"align":969},[1673,28126,28127],{},"widthSegments",[923,28129,28130],{"align":969},"Number of horizontal mesh segments",[923,28132,28133],{"align":969},[586,28134,5736],{},[905,28136,28137,28142,28145],{},[923,28138,28139],{"align":969},[1673,28140,28141],{},"heightSegments",[923,28143,28144],{"align":969},"Number of vertical mesh segments",[923,28146,28147],{"align":969},[586,28148,5736],{},[905,28150,28151,28156,28159],{},[923,28152,28153],{"align":969},[1673,28154,28155],{},"numArmsA",[923,28157,28158],{"align":969},"For A, number of radial arms/ripples",[923,28160,28161],{"align":969},[586,28162,3490],{},[905,28164,28165,28170,28173],{},[923,28166,28167],{"align":969},[1673,28168,28169],{},"expA",[923,28171,28172],{"align":969},"A's 3 exponents",[923,28174,28175],{"align":969},[586,28176,28177],{},"[40, 1.3, 0.9]",[905,28179,28180,28185,28188],{},[923,28181,28182],{"align":969},[1673,28183,28184],{},"numArmsB",[923,28186,28187],{"align":969},"For B, number of radial arms/ripples",[923,28189,28190],{"align":969},[586,28191,3490],{},[905,28193,28194,28199,28202],{},[923,28195,28196],{"align":969},[1673,28197,28198],{},"expB",[923,28200,28201],{"align":969},"B's 3 exponents",[923,28203,28204],{"align":969},[586,28205,28177],{},[905,28207,28208,28212,28215],{},[923,28209,28210],{"align":969},[1673,28211,2500],{},[923,28213,28214],{"align":969},"If no material is provided, a color for the default material",[923,28216,28217],{"align":969},[586,28218,23542],{},[472,28220,28222],{"id":28221},"slot","Slot",[582,28224,28225,28227],{},[586,28226,27802],{}," has a single slot for an optional material.",[1299,28229,1648],{},{"title":544,"searchDepth":545,"depth":546,"links":28231},[28232,28233,28234],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},{"id":28221,"depth":546,"text":28222},"Produces a configurable 3D plot of the superformula.",{},{"title":261,"description":28235},"e6vrte2Vz6VeiZF2tvUtKAkrmeL55JA0AIEipHcn53Y",{"id":28240,"title":265,"body":28241,"description":28403,"extension":559,"links":560,"meta":28404,"navigation":562,"path":266,"seo":28405,"stem":267,"__hash__":28406},"docs/2.api/5.shapes/tetrahedron.md",{"type":469,"value":28242,"toc":28400},[28243,28248,28258,28263,28269,28271,28398],[576,28244,28245],{},[28246,28247],"shapes-tetrahedron",{},[582,28249,2253,28250,3275,28252,22921,28255,1118],{},[586,28251,2256],{},[586,28253,28254],{},"\u003CTetrahedron />",[586,28256,28257],{},"TetrahedronGeometry",[594,28259,28261],{"className":28260,"code":24744,"language":22930},[22928],[586,28262,24744],{"__ignoreMap":544},[582,28264,22935,28265],{},[1112,28266,28257],{"href":28267,"rel":28268},"https://threejs.org/docs/?q=tetr#api/en/geometries/TetrahedronGeometry",[1116],[472,28270,15],{"id":592},[594,28272,28274],{"className":596,"code":28273,"language":601,"meta":544,"style":544},"\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",[586,28275,28276,28314,28318,28323,28386,28390],{"__ignoreMap":544},[605,28277,28278,28280,28282,28284,28286,28288,28290,28292,28294,28296,28298,28300,28302,28304,28306,28308,28310,28312],{"class":607,"line":545},[605,28279,611],{"class":610},[605,28281,265],{"class":614},[605,28283,781],{"class":610},[605,28285,1989],{"class":618},[605,28287,625],{"class":610},[605,28289,628],{"class":610},[605,28291,1466],{"class":651},[605,28293,1893],{"class":791},[605,28295,655],{"class":610},[605,28297,11773],{"class":791},[605,28299,1481],{"class":651},[605,28301,628],{"class":610},[605,28303,3978],{"class":618},[605,28305,625],{"class":610},[605,28307,628],{"class":610},[605,28309,6738],{"class":631},[605,28311,628],{"class":610},[605,28313,755],{"class":610},[605,28315,28316],{"class":607,"line":546},[605,28317,710],{"emptyLinePlaceholder":562},[605,28319,28320],{"class":607,"line":676},[605,28321,28322],{"class":651},"// Tetrahedron with a custom material transformations\n",[605,28324,28325,28327,28329,28331,28333,28335,28338,28340,28342,28344,28346,28348,28350,28352,28354,28356,28358,28360,28362,28364,28366,28368,28370,28372,28374,28376,28378,28380,28382,28384],{"class":607,"line":697},[605,28326,611],{"class":610},[605,28328,265],{"class":614},[605,28330,5431],{"class":618},[605,28332,625],{"class":610},[605,28334,628],{"class":610},[605,28336,28337],{"class":631},"tetrahedronRef",[605,28339,628],{"class":610},[605,28341,781],{"class":610},[605,28343,1989],{"class":618},[605,28345,625],{"class":610},[605,28347,628],{"class":610},[605,28349,1466],{"class":651},[605,28351,1893],{"class":791},[605,28353,655],{"class":610},[605,28355,11773],{"class":791},[605,28357,1481],{"class":651},[605,28359,628],{"class":610},[605,28361,781],{"class":610},[605,28363,1459],{"class":618},[605,28365,625],{"class":610},[605,28367,628],{"class":610},[605,28369,1466],{"class":651},[605,28371,792],{"class":791},[605,28373,655],{"class":610},[605,28375,23055],{"class":791},[605,28377,655],{"class":610},[605,28379,11773],{"class":791},[605,28381,1481],{"class":651},[605,28383,628],{"class":610},[605,28385,637],{"class":610},[605,28387,28388],{"class":607,"line":707},[605,28389,23070],{"class":651},[605,28391,28392,28394,28396],{"class":607,"line":713},[605,28393,700],{"class":610},[605,28395,265],{"class":614},[605,28397,637],{"class":610},[1299,28399,23081],{},{"title":544,"searchDepth":545,"depth":546,"links":28401},[28402],{"id":592,"depth":546,"text":15},"Short-cut for a TetrahedronGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":265,"description":28403},"6ZMY_90iSBZYMdJF00ih1rbyX9sFMIXEk1iKSd_AFMc",{"id":28408,"title":269,"body":28409,"description":28594,"extension":559,"links":560,"meta":28595,"navigation":562,"path":270,"seo":28596,"stem":271,"__hash__":28597},"docs/2.api/5.shapes/torus.md",{"type":469,"value":28410,"toc":28591},[28411,28416,28426,28432,28438,28440,28589],[576,28412,28413],{},[28414,28415],"shapes-torus",{},[582,28417,2253,28418,3275,28420,22921,28423,1118],{},[586,28419,2256],{},[586,28421,28422],{},"\u003CTorus />",[586,28424,28425],{},"TorusGeometry",[594,28427,28430],{"className":28428,"code":28429,"language":22930},[22928],"args: [\n  radius: number,\n  tube: number,\n  radialSegments: number,\n  tubularSegments: number,\n  arc: number\n]\n",[586,28431,28429],{"__ignoreMap":544},[582,28433,22935,28434],{},[1112,28435,28425],{"href":28436,"rel":28437},"https://threejs.org/docs/?q=torus#api/en/geometries/TorusGeometry",[1116],[472,28439,15],{"id":592},[594,28441,28443],{"className":596,"code":28442,"language":601,"meta":544,"style":544},"\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",[586,28444,28445,28493,28497,28502,28577,28581],{"__ignoreMap":544},[605,28446,28447,28449,28451,28453,28455,28457,28459,28461,28463,28465,28468,28470,28473,28475,28477,28479,28481,28483,28485,28487,28489,28491],{"class":607,"line":545},[605,28448,611],{"class":610},[605,28450,269],{"class":614},[605,28452,781],{"class":610},[605,28454,1989],{"class":618},[605,28456,625],{"class":610},[605,28458,628],{"class":610},[605,28460,1466],{"class":651},[605,28462,792],{"class":791},[605,28464,655],{"class":610},[605,28466,28467],{"class":791}," 0.4",[605,28469,655],{"class":610},[605,28471,28472],{"class":791}," 42",[605,28474,655],{"class":610},[605,28476,2724],{"class":791},[605,28478,1481],{"class":651},[605,28480,628],{"class":610},[605,28482,3978],{"class":618},[605,28484,625],{"class":610},[605,28486,628],{"class":610},[605,28488,6738],{"class":631},[605,28490,628],{"class":610},[605,28492,755],{"class":610},[605,28494,28495],{"class":607,"line":546},[605,28496,710],{"emptyLinePlaceholder":562},[605,28498,28499],{"class":607,"line":676},[605,28500,28501],{"class":651},"// Torus with a custom material transformations\n",[605,28503,28504,28506,28508,28510,28512,28514,28516,28518,28520,28522,28524,28526,28528,28530,28532,28534,28536,28539,28541,28544,28546,28548,28550,28552,28554,28556,28558,28560,28562,28564,28567,28569,28571,28573,28575],{"class":607,"line":697},[605,28505,611],{"class":610},[605,28507,269],{"class":614},[605,28509,5431],{"class":618},[605,28511,625],{"class":610},[605,28513,628],{"class":610},[605,28515,5643],{"class":631},[605,28517,628],{"class":610},[605,28519,781],{"class":610},[605,28521,1989],{"class":618},[605,28523,625],{"class":610},[605,28525,628],{"class":610},[605,28527,1466],{"class":651},[605,28529,4645],{"class":791},[605,28531,655],{"class":610},[605,28533,28467],{"class":791},[605,28535,655],{"class":610},[605,28537,28538],{"class":791}," 16",[605,28540,655],{"class":610},[605,28542,28543],{"class":791}," 80",[605,28545,1481],{"class":651},[605,28547,628],{"class":610},[605,28549,781],{"class":610},[605,28551,1459],{"class":618},[605,28553,625],{"class":610},[605,28555,628],{"class":610},[605,28557,1466],{"class":651},[605,28559,4088],{"class":610},[605,28561,792],{"class":791},[605,28563,655],{"class":610},[605,28565,28566],{"class":791}," 6",[605,28568,655],{"class":610},[605,28570,11773],{"class":791},[605,28572,1481],{"class":651},[605,28574,628],{"class":610},[605,28576,637],{"class":610},[605,28578,28579],{"class":607,"line":707},[605,28580,23070],{"class":651},[605,28582,28583,28585,28587],{"class":607,"line":713},[605,28584,700],{"class":610},[605,28586,269],{"class":614},[605,28588,637],{"class":610},[1299,28590,23081],{},{"title":544,"searchDepth":545,"depth":546,"links":28592},[28593],{"id":592,"depth":546,"text":15},"Short-cut for a TorusGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":269,"description":28594},"yySx0l9wZ0o7oTaUN9FO6Q3RIbMpJeR5NAvohXoIacY",{"id":28599,"title":273,"body":28600,"description":28784,"extension":559,"links":560,"meta":28785,"navigation":562,"path":274,"seo":28786,"stem":275,"__hash__":28787},"docs/2.api/5.shapes/torus-knot.md",{"type":469,"value":28601,"toc":28781},[28602,28607,28617,28623,28629,28631,28779],[576,28603,28604],{},[28605,28606],"shapes-torus-knot",{},[582,28608,2253,28609,3275,28611,22921,28614,1118],{},[586,28610,2256],{},[586,28612,28613],{},"\u003CTorusKnot />",[586,28615,28616],{},"TorusKnotGeometry",[594,28618,28621],{"className":28619,"code":28620,"language":22930},[22928],"args: [\n  radius: number,\n  tube: number,\n  tubularSegments: number,\n  radialSegments: number,\n  p: number,\n  q: number\n]\n",[586,28622,28620],{"__ignoreMap":544},[582,28624,22935,28625],{},[1112,28626,28616],{"href":28627,"rel":28628},"https://threejs.org/docs/?q=torus#api/en/geometries/TorusKnotGeometry",[1116],[472,28630,15],{"id":592},[594,28632,28634],{"className":596,"code":28633,"language":601,"meta":544,"style":544},"\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",[586,28635,28636,28685,28689,28694,28767,28771],{"__ignoreMap":544},[605,28637,28638,28640,28643,28645,28647,28649,28651,28653,28655,28657,28660,28662,28665,28667,28669,28671,28673,28675,28677,28679,28681,28683],{"class":607,"line":545},[605,28639,611],{"class":610},[605,28641,28642],{"class":614},"TorusKnot",[605,28644,781],{"class":610},[605,28646,1989],{"class":618},[605,28648,625],{"class":610},[605,28650,628],{"class":610},[605,28652,1466],{"class":651},[605,28654,22775],{"class":791},[605,28656,655],{"class":610},[605,28658,28659],{"class":791}," 0.2",[605,28661,655],{"class":610},[605,28663,28664],{"class":791}," 64",[605,28666,655],{"class":610},[605,28668,23900],{"class":791},[605,28670,1481],{"class":651},[605,28672,628],{"class":610},[605,28674,3978],{"class":618},[605,28676,625],{"class":610},[605,28678,628],{"class":610},[605,28680,6738],{"class":631},[605,28682,628],{"class":610},[605,28684,755],{"class":610},[605,28686,28687],{"class":607,"line":546},[605,28688,710],{"emptyLinePlaceholder":562},[605,28690,28691],{"class":607,"line":676},[605,28692,28693],{"class":651},"// TorusKnot with a custom material transformations\n",[605,28695,28696,28698,28700,28702,28704,28706,28709,28711,28713,28715,28717,28719,28721,28723,28725,28727,28729,28731,28733,28735,28737,28739,28741,28743,28745,28747,28749,28751,28753,28755,28757,28759,28761,28763,28765],{"class":607,"line":697},[605,28697,611],{"class":610},[605,28699,28642],{"class":614},[605,28701,5431],{"class":618},[605,28703,625],{"class":610},[605,28705,628],{"class":610},[605,28707,28708],{"class":631},"torusKnotRef",[605,28710,628],{"class":610},[605,28712,781],{"class":610},[605,28714,1989],{"class":618},[605,28716,625],{"class":610},[605,28718,628],{"class":610},[605,28720,1466],{"class":651},[605,28722,22775],{"class":791},[605,28724,655],{"class":610},[605,28726,28659],{"class":791},[605,28728,655],{"class":610},[605,28730,28664],{"class":791},[605,28732,655],{"class":610},[605,28734,23900],{"class":791},[605,28736,1481],{"class":651},[605,28738,628],{"class":610},[605,28740,781],{"class":610},[605,28742,1459],{"class":618},[605,28744,625],{"class":610},[605,28746,628],{"class":610},[605,28748,1466],{"class":651},[605,28750,4088],{"class":610},[605,28752,792],{"class":791},[605,28754,655],{"class":610},[605,28756,28566],{"class":791},[605,28758,655],{"class":610},[605,28760,24579],{"class":791},[605,28762,1481],{"class":651},[605,28764,628],{"class":610},[605,28766,637],{"class":610},[605,28768,28769],{"class":607,"line":707},[605,28770,23070],{"class":651},[605,28772,28773,28775,28777],{"class":607,"line":713},[605,28774,700],{"class":610},[605,28776,28642],{"class":614},[605,28778,637],{"class":610},[1299,28780,23081],{},{"title":544,"searchDepth":545,"depth":546,"links":28782},[28783],{"id":592,"depth":546,"text":15},"Short-cut for a TorusKnotGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":273,"description":28784},"OlUiMxF35Ud6Y1uh8PxYgHq7DDQtWj0nint0vp1wx2U",{"id":28789,"title":277,"body":28790,"description":29225,"extension":559,"links":560,"meta":29226,"navigation":562,"path":278,"seo":29227,"stem":279,"__hash__":29228},"docs/2.api/5.shapes/tube.md",{"type":469,"value":28791,"toc":29221},[28792,28797,28807,28813,28815,29209,29212,29218],[576,28793,28794],{},[28795,28796],"shapes-tube",{},[582,28798,2253,28799,3275,28801,22921,28804,1118],{},[586,28800,2256],{},[586,28802,28803],{},"\u003CTube />",[586,28805,28806],{},"TubeGeometry",[582,28808,22935,28809],{},[1112,28810,28806],{"href":28811,"rel":28812},"https://threejs.org/docs/?q=tube#api/en/geometries/TubeGeometry",[1116],[472,28814,15],{"id":592},[594,28816,28818],{"className":596,"code":28817,"language":601,"meta":544,"style":544},"\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",[586,28819,28820,28840,28859,28882,28900,28904,28925,28950,28977,28999,29021,29026,29034,29038,29046,29051,29102,29106,29111,29175,29193,29201],{"__ignoreMap":544},[605,28821,28822,28824,28826,28828,28830,28832,28834,28836,28838],{"class":607,"line":545},[605,28823,611],{"class":610},[605,28825,615],{"class":614},[605,28827,619],{"class":618},[605,28829,622],{"class":618},[605,28831,625],{"class":610},[605,28833,628],{"class":610},[605,28835,632],{"class":631},[605,28837,628],{"class":610},[605,28839,637],{"class":610},[605,28841,28842,28844,28846,28849,28851,28853,28855,28857],{"class":607,"line":546},[605,28843,645],{"class":644},[605,28845,648],{"class":610},[605,28847,28848],{"class":651}," Tube",[605,28850,661],{"class":610},[605,28852,664],{"class":644},[605,28854,667],{"class":610},[605,28856,670],{"class":631},[605,28858,673],{"class":610},[605,28860,28861,28863,28865,28868,28870,28872,28874,28876,28878,28880],{"class":607,"line":676},[605,28862,645],{"class":644},[605,28864,648],{"class":610},[605,28866,28867],{"class":651}," CubicBezierCurve3",[605,28869,655],{"class":610},[605,28871,23203],{"class":651},[605,28873,661],{"class":610},[605,28875,664],{"class":644},[605,28877,667],{"class":610},[605,28879,2678],{"class":631},[605,28881,673],{"class":610},[605,28883,28884,28886,28888,28890,28892,28894,28896,28898],{"class":607,"line":697},[605,28885,645],{"class":644},[605,28887,648],{"class":610},[605,28889,5431],{"class":651},[605,28891,661],{"class":610},[605,28893,664],{"class":644},[605,28895,667],{"class":610},[605,28897,601],{"class":631},[605,28899,673],{"class":610},[605,28901,28902],{"class":607,"line":707},[605,28903,710],{"emptyLinePlaceholder":562},[605,28905,28906,28908,28911,28913,28915,28917,28920,28922],{"class":607,"line":713},[605,28907,2689],{"class":618},[605,28909,28910],{"class":651}," tubePath ",[605,28912,625],{"class":610},[605,28914,5431],{"class":2800},[605,28916,2970],{"class":651},[605,28918,28919],{"class":610},"new",[605,28921,28867],{"class":2800},[605,28923,28924],{"class":651},"(\n",[605,28926,28927,28930,28932,28934,28936,28938,28940,28942,28944,28946,28948],{"class":607,"line":723},[605,28928,28929],{"class":610},"  new",[605,28931,23203],{"class":2800},[605,28933,2970],{"class":651},[605,28935,4088],{"class":610},[605,28937,1893],{"class":791},[605,28939,655],{"class":610},[605,28941,11773],{"class":791},[605,28943,655],{"class":610},[605,28945,11773],{"class":791},[605,28947,4125],{"class":651},[605,28949,14031],{"class":610},[605,28951,28952,28954,28956,28958,28960,28962,28964,28967,28969,28971,28973,28975],{"class":607,"line":746},[605,28953,28929],{"class":610},[605,28955,23203],{"class":2800},[605,28957,2970],{"class":651},[605,28959,4088],{"class":610},[605,28961,1513],{"class":791},[605,28963,655],{"class":610},[605,28965,28966],{"class":610}," -",[605,28968,1893],{"class":791},[605,28970,655],{"class":610},[605,28972,11773],{"class":791},[605,28974,4125],{"class":651},[605,28976,14031],{"class":610},[605,28978,28979,28981,28983,28985,28987,28989,28991,28993,28995,28997],{"class":607,"line":758},[605,28980,28929],{"class":610},[605,28982,23203],{"class":2800},[605,28984,2970],{"class":651},[605,28986,1513],{"class":791},[605,28988,655],{"class":610},[605,28990,22969],{"class":791},[605,28992,655],{"class":610},[605,28994,11773],{"class":791},[605,28996,4125],{"class":651},[605,28998,14031],{"class":610},[605,29000,29001,29003,29005,29007,29009,29011,29013,29015,29017,29019],{"class":607,"line":768},[605,29002,28929],{"class":610},[605,29004,23203],{"class":2800},[605,29006,2970],{"class":651},[605,29008,1893],{"class":791},[605,29010,655],{"class":610},[605,29012,11773],{"class":791},[605,29014,655],{"class":610},[605,29016,11773],{"class":791},[605,29018,4125],{"class":651},[605,29020,14031],{"class":610},[605,29022,29023],{"class":607,"line":773},[605,29024,29025],{"class":651},"))\n",[605,29027,29028,29030,29032],{"class":607,"line":799},[605,29029,700],{"class":610},[605,29031,615],{"class":614},[605,29033,637],{"class":610},[605,29035,29036],{"class":607,"line":599},[605,29037,710],{"emptyLinePlaceholder":562},[605,29039,29040,29042,29044],{"class":607,"line":822},[605,29041,611],{"class":610},[605,29043,718],{"class":614},[605,29045,637],{"class":610},[605,29047,29048],{"class":607,"line":833},[605,29049,29050],{"class":1181},"  \u003C!-- TubeGeometry needs a curve path to be construct -->\n",[605,29052,29053,29055,29057,29059,29061,29063,29065,29067,29070,29072,29074,29076,29078,29080,29082,29084,29086,29088,29090,29092,29094,29096,29098,29100],{"class":607,"line":844},[605,29054,726],{"class":610},[605,29056,277],{"class":614},[605,29058,781],{"class":610},[605,29060,1989],{"class":618},[605,29062,625],{"class":610},[605,29064,628],{"class":610},[605,29066,1466],{"class":610},[605,29068,29069],{"class":651},"tubePath",[605,29071,1471],{"class":610},[605,29073,23469],{"class":791},[605,29075,1471],{"class":610},[605,29077,8085],{"class":791},[605,29079,1471],{"class":610},[605,29081,15063],{"class":791},[605,29083,1471],{"class":610},[605,29085,943],{"class":3870},[605,29087,1481],{"class":610},[605,29089,628],{"class":610},[605,29091,3978],{"class":618},[605,29093,625],{"class":610},[605,29095,628],{"class":610},[605,29097,6738],{"class":631},[605,29099,628],{"class":610},[605,29101,755],{"class":610},[605,29103,29104],{"class":607,"line":854},[605,29105,710],{"emptyLinePlaceholder":562},[605,29107,29108],{"class":607,"line":600},[605,29109,29110],{"class":1181},"  \u003C!-- Tube with a custom material transformations -->\n",[605,29112,29113,29115,29117,29119,29121,29123,29125,29127,29129,29131,29133,29135,29137,29139,29141,29143,29145,29147,29149,29151,29153,29155,29157,29159,29161,29163,29165,29167,29169,29171,29173],{"class":607,"line":874},[605,29114,726],{"class":610},[605,29116,277],{"class":614},[605,29118,781],{"class":610},[605,29120,1989],{"class":618},[605,29122,625],{"class":610},[605,29124,628],{"class":610},[605,29126,1466],{"class":610},[605,29128,29069],{"class":651},[605,29130,1471],{"class":610},[605,29132,23469],{"class":791},[605,29134,1471],{"class":610},[605,29136,8085],{"class":791},[605,29138,1471],{"class":610},[605,29140,15063],{"class":791},[605,29142,1471],{"class":610},[605,29144,943],{"class":3870},[605,29146,1481],{"class":610},[605,29148,628],{"class":610},[605,29150,781],{"class":610},[605,29152,1459],{"class":618},[605,29154,625],{"class":610},[605,29156,628],{"class":610},[605,29158,1466],{"class":610},[605,29160,937],{"class":791},[605,29162,1471],{"class":610},[605,29164,3490],{"class":791},[605,29166,1471],{"class":610},[605,29168,937],{"class":791},[605,29170,1481],{"class":610},[605,29172,628],{"class":610},[605,29174,637],{"class":610},[605,29176,29177,29179,29181,29183,29185,29187,29189,29191],{"class":607,"line":884},[605,29178,749],{"class":610},[605,29180,6729],{"class":614},[605,29182,3978],{"class":618},[605,29184,625],{"class":610},[605,29186,628],{"class":610},[605,29188,6738],{"class":631},[605,29190,628],{"class":610},[605,29192,755],{"class":610},[605,29194,29195,29197,29199],{"class":607,"line":2952},[605,29196,877],{"class":610},[605,29198,277],{"class":614},[605,29200,637],{"class":610},[605,29202,29203,29205,29207],{"class":607,"line":2960},[605,29204,700],{"class":610},[605,29206,718],{"class":614},[605,29208,637],{"class":610},[472,29210,29211],{"id":1989},"Args",[594,29213,29216],{"className":29214,"code":29215,"language":22930},[22928],"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",[586,29217,29215],{"__ignoreMap":544},[1299,29219,29220],{},"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":544,"searchDepth":545,"depth":546,"links":29222},[29223,29224],{"id":592,"depth":546,"text":15},{"id":1989,"depth":546,"text":29211},"Short-cut for a TubeGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":277,"description":29225},"dl45gDobAVZZJ-EiABsXN_ZQHrn_4vSzVw1r8h_AnrY",[29230,29545,30066,30277,30574],{"id":29231,"title":287,"body":29232,"description":29541,"extension":559,"links":560,"meta":29542,"navigation":562,"path":288,"seo":29543,"stem":289,"__hash__":29544},"docs/2.api/6.debug-performance/helper.md",{"type":469,"value":29233,"toc":29537},[29234,29239,29245,29247,29495,29497,29535],[2558,29235,29236],{},[29237,29238],"debug-performance-helper",{},[582,29240,29241,29244],{},[586,29242,29243],{},"\u003CHelper />"," handles instantiation, updates, and removal/disposal of THREE Helpers.",[472,29246,15],{"id":592},[594,29248,29251],{"className":596,"code":29249,"highlights":29250,"language":601,"meta":544,"style":544},"\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",[676,599],[586,29252,29253,29273,29291,29311,29330,29338,29342,29350,29358,29390,29408,29416,29424,29463,29471,29479,29487],{"__ignoreMap":544},[605,29254,29255,29257,29259,29261,29263,29265,29267,29269,29271],{"class":607,"line":545},[605,29256,611],{"class":610},[605,29258,615],{"class":614},[605,29260,619],{"class":618},[605,29262,622],{"class":618},[605,29264,625],{"class":610},[605,29266,628],{"class":610},[605,29268,632],{"class":631},[605,29270,628],{"class":610},[605,29272,637],{"class":610},[605,29274,29275,29277,29279,29281,29283,29285,29287,29289],{"class":607,"line":546},[605,29276,645],{"class":644},[605,29278,648],{"class":610},[605,29280,683],{"class":651},[605,29282,661],{"class":610},[605,29284,664],{"class":644},[605,29286,667],{"class":610},[605,29288,692],{"class":631},[605,29290,673],{"class":610},[605,29292,29294,29296,29298,29301,29303,29305,29307,29309],{"class":29293,"line":676},[607,641],[605,29295,645],{"class":644},[605,29297,648],{"class":610},[605,29299,29300],{"class":651}," Helper",[605,29302,661],{"class":610},[605,29304,664],{"class":644},[605,29306,667],{"class":610},[605,29308,670],{"class":631},[605,29310,673],{"class":610},[605,29312,29313,29315,29317,29320,29322,29324,29326,29328],{"class":607,"line":697},[605,29314,645],{"class":644},[605,29316,648],{"class":610},[605,29318,29319],{"class":651}," BoxHelper",[605,29321,661],{"class":610},[605,29323,664],{"class":644},[605,29325,667],{"class":610},[605,29327,2678],{"class":631},[605,29329,673],{"class":610},[605,29331,29332,29334,29336],{"class":607,"line":707},[605,29333,700],{"class":610},[605,29335,615],{"class":614},[605,29337,637],{"class":610},[605,29339,29340],{"class":607,"line":713},[605,29341,710],{"emptyLinePlaceholder":562},[605,29343,29344,29346,29348],{"class":607,"line":723},[605,29345,611],{"class":610},[605,29347,718],{"class":614},[605,29349,637],{"class":610},[605,29351,29352,29354,29356],{"class":607,"line":746},[605,29353,726],{"class":610},[605,29355,729],{"class":614},[605,29357,637],{"class":610},[605,29359,29360,29362,29364,29366,29368,29370,29372,29374,29376,29378,29380,29382,29384,29386,29388],{"class":607,"line":758},[605,29361,749],{"class":610},[605,29363,752],{"class":614},[605,29365,781],{"class":610},[605,29367,1459],{"class":618},[605,29369,625],{"class":610},[605,29371,628],{"class":610},[605,29373,1466],{"class":610},[605,29375,4160],{"class":791},[605,29377,1471],{"class":610},[605,29379,4160],{"class":791},[605,29381,1471],{"class":610},[605,29383,4160],{"class":791},[605,29385,1481],{"class":610},[605,29387,628],{"class":610},[605,29389,755],{"class":610},[605,29391,29392,29394,29396,29398,29400,29402,29404,29406],{"class":607,"line":768},[605,29393,749],{"class":610},[605,29395,828],{"class":614},[605,29397,5431],{"class":618},[605,29399,625],{"class":610},[605,29401,628],{"class":610},[605,29403,9809],{"class":631},[605,29405,628],{"class":610},[605,29407,637],{"class":610},[605,29409,29410,29412,29414],{"class":607,"line":773},[605,29411,825],{"class":610},[605,29413,839],{"class":614},[605,29415,755],{"class":610},[605,29417,29418,29420,29422],{"class":607,"line":799},[605,29419,825],{"class":610},[605,29421,849],{"class":614},[605,29423,755],{"class":610},[605,29425,29427,29429,29431,29433,29436,29438,29440,29443,29445,29447,29449,29451,29453,29455,29457,29459,29461],{"class":29426,"line":599},[607,641],[605,29428,825],{"class":610},[605,29430,287],{"class":614},[605,29432,781],{"class":610},[605,29434,29435],{"class":618},"type",[605,29437,625],{"class":610},[605,29439,628],{"class":610},[605,29441,29442],{"class":651},"BoxHelper",[605,29444,628],{"class":610},[605,29446,781],{"class":610},[605,29448,1989],{"class":618},[605,29450,625],{"class":610},[605,29452,628],{"class":610},[605,29454,1466],{"class":610},[605,29456,20039],{"class":791},[605,29458,1481],{"class":610},[605,29460,628],{"class":610},[605,29462,755],{"class":610},[605,29464,29465,29467,29469],{"class":607,"line":822},[605,29466,867],{"class":610},[605,29468,828],{"class":614},[605,29470,637],{"class":610},[605,29472,29473,29475,29477],{"class":607,"line":833},[605,29474,749],{"class":610},[605,29476,3518],{"class":614},[605,29478,755],{"class":610},[605,29480,29481,29483,29485],{"class":607,"line":844},[605,29482,877],{"class":610},[605,29484,729],{"class":614},[605,29486,637],{"class":610},[605,29488,29489,29491,29493],{"class":607,"line":854},[605,29490,700],{"class":610},[605,29492,718],{"class":614},[605,29494,637],{"class":610},[472,29496,894],{"id":893},[899,29498,29499,29509],{},[902,29500,29501],{},[905,29502,29503,29505,29507],{},[908,29504,910],{"align":969},[908,29506,913],{"align":969},[908,29508,916],{},[918,29510,29511,29522],{},[905,29512,29513,29517,29520],{},[923,29514,29515],{"align":969},[1673,29516,29435],{},[923,29518,29519],{"align":969},"Helper constructor - required",[923,29521],{},[905,29523,29524,29528,29531],{},[923,29525,29526],{"align":969},[1673,29527,1989],{},[923,29529,29530],{"align":969},"Helper constructor args",[923,29532,29533],{},[586,29534,7240],{},[1299,29536,1648],{},{"title":544,"searchDepth":545,"depth":546,"links":29538},[29539,29540],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},"Handles instantiation, updates, and removal/disposal of THREE Helpers.",{},{"title":287,"description":29541},"eCegCHTXKuWv3dso3PuJHIMliJK_ACUVoEreb2IQT48",{"id":29546,"title":291,"body":29547,"description":30062,"extension":559,"links":560,"meta":30063,"navigation":562,"path":292,"seo":30064,"stem":293,"__hash__":30065},"docs/2.api/6.debug-performance/lod.md",{"type":469,"value":29548,"toc":30058},[29549,29554,29557,29568,29570,30005,30007,30055],[2558,29550,29551],{},[29552,29553],"debug-performance-lod",{},[582,29555,29556],{},"Level of Detail - show meshes with more or less geometry based on distance from the camera.",[582,29558,29559,29562,29563,29567],{},[586,29560,29561],{},"\u003CLOD />"," is a wrapper for THREE's ",[1112,29564,291],{"href":29565,"rel":29566},"https://threejs.org/docs/?q=LOD#api/en/objects/LOD",[1116]," class.",[472,29569,15],{"id":592},[594,29571,29573],{"className":596,"code":29572,"language":601,"meta":544,"style":544},"\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",[586,29574,29575,29595,29613,29632,29640,29644,29652,29660,29692,29725,29730,29738,29770,29789,29797,29802,29810,29843,29861,29869,29874,29882,29914,29933,29941,29949,29957,29989,29997],{"__ignoreMap":544},[605,29576,29577,29579,29581,29583,29585,29587,29589,29591,29593],{"class":607,"line":545},[605,29578,611],{"class":610},[605,29580,615],{"class":614},[605,29582,619],{"class":618},[605,29584,622],{"class":618},[605,29586,625],{"class":610},[605,29588,628],{"class":610},[605,29590,632],{"class":631},[605,29592,628],{"class":610},[605,29594,637],{"class":610},[605,29596,29597,29599,29601,29603,29605,29607,29609,29611],{"class":607,"line":546},[605,29598,645],{"class":644},[605,29600,648],{"class":610},[605,29602,683],{"class":651},[605,29604,661],{"class":610},[605,29606,664],{"class":644},[605,29608,667],{"class":610},[605,29610,692],{"class":631},[605,29612,673],{"class":610},[605,29614,29615,29617,29619,29622,29624,29626,29628,29630],{"class":607,"line":676},[605,29616,645],{"class":644},[605,29618,648],{"class":610},[605,29620,29621],{"class":651}," LOD",[605,29623,661],{"class":610},[605,29625,664],{"class":644},[605,29627,667],{"class":610},[605,29629,670],{"class":631},[605,29631,673],{"class":610},[605,29633,29634,29636,29638],{"class":607,"line":697},[605,29635,700],{"class":610},[605,29637,615],{"class":614},[605,29639,637],{"class":610},[605,29641,29642],{"class":607,"line":707},[605,29643,710],{"emptyLinePlaceholder":562},[605,29645,29646,29648,29650],{"class":607,"line":713},[605,29647,611],{"class":610},[605,29649,718],{"class":614},[605,29651,637],{"class":610},[605,29653,29654,29656,29658],{"class":607,"line":723},[605,29655,726],{"class":610},[605,29657,729],{"class":614},[605,29659,637],{"class":610},[605,29661,29662,29664,29666,29668,29670,29672,29674,29676,29678,29680,29682,29684,29686,29688,29690],{"class":607,"line":746},[605,29663,749],{"class":610},[605,29665,752],{"class":614},[605,29667,781],{"class":610},[605,29669,1459],{"class":618},[605,29671,625],{"class":610},[605,29673,628],{"class":610},[605,29675,1466],{"class":610},[605,29677,937],{"class":791},[605,29679,1471],{"class":610},[605,29681,792],{"class":791},[605,29683,1471],{"class":610},[605,29685,2396],{"class":791},[605,29687,1481],{"class":610},[605,29689,628],{"class":610},[605,29691,755],{"class":610},[605,29693,29694,29696,29698,29700,29703,29705,29707,29709,29711,29713,29715,29717,29719,29721,29723],{"class":607,"line":758},[605,29695,749],{"class":610},[605,29697,291],{"class":614},[605,29699,781],{"class":610},[605,29701,29702],{"class":618},"levels",[605,29704,625],{"class":610},[605,29706,628],{"class":610},[605,29708,1466],{"class":610},[605,29710,937],{"class":791},[605,29712,1471],{"class":610},[605,29714,2396],{"class":791},[605,29716,1471],{"class":610},[605,29718,1478],{"class":791},[605,29720,1481],{"class":610},[605,29722,628],{"class":610},[605,29724,637],{"class":610},[605,29726,29727],{"class":607,"line":768},[605,29728,29729],{"class":1181},"      \u003C!-- High detail mesh - shown when close -->\n",[605,29731,29732,29734,29736],{"class":607,"line":773},[605,29733,825],{"class":610},[605,29735,828],{"class":614},[605,29737,637],{"class":610},[605,29739,29740,29742,29744,29746,29748,29750,29752,29754,29756,29758,29760,29762,29764,29766,29768],{"class":607,"line":799},[605,29741,836],{"class":610},[605,29743,4735],{"class":614},[605,29745,781],{"class":610},[605,29747,1989],{"class":618},[605,29749,625],{"class":610},[605,29751,628],{"class":610},[605,29753,1466],{"class":610},[605,29755,1893],{"class":791},[605,29757,1471],{"class":610},[605,29759,5736],{"class":791},[605,29761,1471],{"class":610},[605,29763,5736],{"class":791},[605,29765,1481],{"class":610},[605,29767,628],{"class":610},[605,29769,755],{"class":610},[605,29771,29772,29774,29776,29778,29780,29782,29785,29787],{"class":607,"line":599},[605,29773,836],{"class":610},[605,29775,13421],{"class":614},[605,29777,3978],{"class":618},[605,29779,625],{"class":610},[605,29781,628],{"class":610},[605,29783,29784],{"class":631},"red",[605,29786,628],{"class":610},[605,29788,755],{"class":610},[605,29790,29791,29793,29795],{"class":607,"line":822},[605,29792,857],{"class":610},[605,29794,828],{"class":614},[605,29796,637],{"class":610},[605,29798,29799],{"class":607,"line":833},[605,29800,29801],{"class":1181},"      \u003C!-- Medium detail mesh - shown at mid distance -->\n",[605,29803,29804,29806,29808],{"class":607,"line":844},[605,29805,825],{"class":610},[605,29807,828],{"class":614},[605,29809,637],{"class":610},[605,29811,29812,29814,29816,29818,29820,29822,29824,29826,29828,29830,29833,29835,29837,29839,29841],{"class":607,"line":854},[605,29813,836],{"class":610},[605,29815,4735],{"class":614},[605,29817,781],{"class":610},[605,29819,1989],{"class":618},[605,29821,625],{"class":610},[605,29823,628],{"class":610},[605,29825,1466],{"class":610},[605,29827,1893],{"class":791},[605,29829,1471],{"class":610},[605,29831,29832],{"class":791},"16",[605,29834,1471],{"class":610},[605,29836,29832],{"class":791},[605,29838,1481],{"class":610},[605,29840,628],{"class":610},[605,29842,755],{"class":610},[605,29844,29845,29847,29849,29851,29853,29855,29857,29859],{"class":607,"line":600},[605,29846,836],{"class":610},[605,29848,13421],{"class":614},[605,29850,3978],{"class":618},[605,29852,625],{"class":610},[605,29854,628],{"class":610},[605,29856,6738],{"class":631},[605,29858,628],{"class":610},[605,29860,755],{"class":610},[605,29862,29863,29865,29867],{"class":607,"line":874},[605,29864,857],{"class":610},[605,29866,828],{"class":614},[605,29868,637],{"class":610},[605,29870,29871],{"class":607,"line":884},[605,29872,29873],{"class":1181},"      \u003C!-- Low detail mesh - shown when far -->\n",[605,29875,29876,29878,29880],{"class":607,"line":2952},[605,29877,825],{"class":610},[605,29879,828],{"class":614},[605,29881,637],{"class":610},[605,29883,29884,29886,29888,29890,29892,29894,29896,29898,29900,29902,29904,29906,29908,29910,29912],{"class":607,"line":2960},[605,29885,836],{"class":610},[605,29887,4735],{"class":614},[605,29889,781],{"class":610},[605,29891,1989],{"class":618},[605,29893,625],{"class":610},[605,29895,628],{"class":610},[605,29897,1466],{"class":610},[605,29899,1893],{"class":791},[605,29901,1471],{"class":610},[605,29903,15063],{"class":791},[605,29905,1471],{"class":610},[605,29907,15063],{"class":791},[605,29909,1481],{"class":610},[605,29911,628],{"class":610},[605,29913,755],{"class":610},[605,29915,29916,29918,29920,29922,29924,29926,29929,29931],{"class":607,"line":2990},[605,29917,836],{"class":610},[605,29919,13421],{"class":614},[605,29921,3978],{"class":618},[605,29923,625],{"class":610},[605,29925,628],{"class":610},[605,29927,29928],{"class":631},"yellow",[605,29930,628],{"class":610},[605,29932,755],{"class":610},[605,29934,29935,29937,29939],{"class":607,"line":3007},[605,29936,857],{"class":610},[605,29938,828],{"class":614},[605,29940,637],{"class":610},[605,29942,29943,29945,29947],{"class":607,"line":3022},[605,29944,867],{"class":610},[605,29946,291],{"class":614},[605,29948,637],{"class":610},[605,29950,29951,29953,29955],{"class":607,"line":3047},[605,29952,749],{"class":610},[605,29954,3518],{"class":614},[605,29956,755],{"class":610},[605,29958,29959,29961,29963,29965,29967,29969,29971,29973,29975,29977,29979,29981,29983,29985,29987],{"class":607,"line":2591},[605,29960,749],{"class":610},[605,29962,3539],{"class":614},[605,29964,781],{"class":610},[605,29966,1459],{"class":618},[605,29968,625],{"class":610},[605,29970,628],{"class":610},[605,29972,1466],{"class":610},[605,29974,937],{"class":791},[605,29976,1471],{"class":610},[605,29978,792],{"class":791},[605,29980,1471],{"class":610},[605,29982,3490],{"class":791},[605,29984,1481],{"class":610},[605,29986,628],{"class":610},[605,29988,755],{"class":610},[605,29990,29991,29993,29995],{"class":607,"line":3062},[605,29992,877],{"class":610},[605,29994,729],{"class":614},[605,29996,637],{"class":610},[605,29998,29999,30001,30003],{"class":607,"line":3092},[605,30000,700],{"class":610},[605,30002,718],{"class":614},[605,30004,637],{"class":610},[472,30006,894],{"id":893},[899,30008,30009,30019],{},[902,30010,30011],{},[905,30012,30013,30015,30017],{},[908,30014,910],{"align":969},[908,30016,913],{"align":969},[908,30018,916],{},[918,30020,30021,30041],{},[905,30022,30023,30027,30039],{},[923,30024,30025],{"align":969},[1673,30026,29702],{},[923,30028,30029,30032,30033,30035,30036,30038],{"align":969},[586,30030,30031],{},"number[]"," - The distances at which to display each level of detail. There should be one ",[586,30034,29702],{}," value for each ",[586,30037,291],{}," child.",[923,30040],{},[905,30042,30043,30048,30051],{},[923,30044,30045],{"align":969},[1673,30046,30047],{},"hysteresis",[923,30049,30050],{"align":969},"Threshold used to avoid flickering at LOD boundaries, as a fraction of distance.",[923,30052,30053],{},[586,30054,7207],{},[1299,30056,30057],{},"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":544,"searchDepth":545,"depth":546,"links":30059},[30060,30061],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},"Level of Detail - show meshes with more or less geometry based on distance from camera.",{},{"title":291,"description":30062},"ue6lcrsKRgNjxBsudKxGB368Ot9yPUV2C-0TWgeZzbE",{"id":30067,"title":295,"body":30068,"description":30273,"extension":559,"links":560,"meta":30274,"navigation":562,"path":296,"seo":30275,"stem":297,"__hash__":30276},"docs/2.api/6.debug-performance/stats.md",{"type":469,"value":30069,"toc":30269},[30070,30084,30093,30097,30214,30216,30250,30267],[582,30071,30072,30077,30078,30083],{},[1112,30073,30076],{"href":30074,"rel":30075},"https://github.com/mrdoob/stats.js/",[1116],"stats.js"," is a JavaScript performance monitor, made by ",[1112,30079,30082],{"href":30080,"rel":30081},"https://github.com/mrdoob",[1116],"mrdoob",". stats.js provides a simple info box that will help you monitor your code performance.",[582,30085,30086,30089,30090,30092],{},[1673,30087,30088],{},"Cientos"," provides a component called ",[586,30091,295],{}," that creates a panel without effort or configuration in the top left corner where you'll be able to monitor your app.",[472,30094,30096],{"id":30095},"basic-usage","Basic usage",[594,30098,30101],{"className":596,"code":30099,"highlights":30100,"language":601,"meta":544,"style":544},"\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",[676,746],[586,30102,30103,30123,30141,30161,30169,30173,30181,30189,30198,30206],{"__ignoreMap":544},[605,30104,30105,30107,30109,30111,30113,30115,30117,30119,30121],{"class":607,"line":545},[605,30106,611],{"class":610},[605,30108,615],{"class":614},[605,30110,619],{"class":618},[605,30112,622],{"class":618},[605,30114,625],{"class":610},[605,30116,628],{"class":610},[605,30118,632],{"class":631},[605,30120,628],{"class":610},[605,30122,637],{"class":610},[605,30124,30125,30127,30129,30131,30133,30135,30137,30139],{"class":607,"line":546},[605,30126,645],{"class":644},[605,30128,648],{"class":610},[605,30130,683],{"class":651},[605,30132,661],{"class":610},[605,30134,664],{"class":644},[605,30136,667],{"class":610},[605,30138,692],{"class":631},[605,30140,673],{"class":610},[605,30142,30144,30146,30148,30151,30153,30155,30157,30159],{"class":30143,"line":676},[607,641],[605,30145,645],{"class":644},[605,30147,648],{"class":610},[605,30149,30150],{"class":651}," Stats",[605,30152,661],{"class":610},[605,30154,664],{"class":644},[605,30156,667],{"class":610},[605,30158,670],{"class":631},[605,30160,673],{"class":610},[605,30162,30163,30165,30167],{"class":607,"line":697},[605,30164,700],{"class":610},[605,30166,615],{"class":614},[605,30168,637],{"class":610},[605,30170,30171],{"class":607,"line":707},[605,30172,710],{"emptyLinePlaceholder":562},[605,30174,30175,30177,30179],{"class":607,"line":713},[605,30176,611],{"class":610},[605,30178,718],{"class":614},[605,30180,637],{"class":610},[605,30182,30183,30185,30187],{"class":607,"line":723},[605,30184,726],{"class":610},[605,30186,729],{"class":614},[605,30188,637],{"class":610},[605,30190,30192,30194,30196],{"class":30191,"line":746},[607,641],[605,30193,749],{"class":610},[605,30195,295],{"class":614},[605,30197,755],{"class":610},[605,30199,30200,30202,30204],{"class":607,"line":758},[605,30201,877],{"class":610},[605,30203,729],{"class":614},[605,30205,637],{"class":610},[605,30207,30208,30210,30212],{"class":607,"line":768},[605,30209,700],{"class":610},[605,30211,718],{"class":614},[605,30213,637],{"class":610},[472,30215,894],{"id":893},[899,30217,30218,30230],{},[902,30219,30220],{},[905,30221,30222,30224,30226,30228],{},[908,30223,910],{"align":969},[908,30225,10957],{},[908,30227,916],{},[908,30229,913],{},[918,30231,30232],{},[905,30233,30234,30239,30243,30247],{},[923,30235,30236],{"align":969},[1673,30237,30238],{},"showPanel",[923,30240,30241],{},[586,30242,2537],{},[923,30244,30245],{},[586,30246,937],{},[923,30248,30249],{},"FPS monitor.",[3136,30251,30252,30255,30258,30261],{},[3139,30253,30254],{},"0: FPS Frames rendered in the last second. The higher the number the better.",[3139,30256,30257],{},"1: MS Milliseconds needed to render a frame. The lower the number the better.",[3139,30259,30260],{},"2: MB MBytes of allocated memory. (Run Chrome with --enable-precise-memory-info)",[3139,30262,30263,30264,1118],{},"3+: CUSTOM User-defined panel support. For more info please check ",[1112,30265,30076],{"href":30074,"rel":30266},[1116],[1299,30268,21380],{},{"title":544,"searchDepth":545,"depth":546,"links":30270},[30271,30272],{"id":30095,"depth":546,"text":30096},{"id":893,"depth":546,"text":894},"JavaScript performance monitor to track FPS, MS, and memory usage.",{},{"title":295,"description":30273},"CEx2GwVgDehipIa_mCiC4Mpq7SAIqbwq61OScXwW86c",{"id":30278,"title":299,"body":30279,"description":30570,"extension":559,"links":560,"meta":30571,"navigation":562,"path":300,"seo":30572,"stem":301,"__hash__":30573},"docs/2.api/6.debug-performance/stats-gl.md",{"type":469,"value":30280,"toc":30566},[30281,30299,30302,30304,30421,30423,30564],[582,30282,30283,30288,30289,30294,30295,30298],{},[1112,30284,30287],{"href":30285,"rel":30286},"https://github.com/RenaudRohlinger/stats-gl",[1116],"stats-gl"," is a powerful WebGL performance monitoring tool created by ",[1112,30290,30293],{"href":30291,"rel":30292},"https://github.com/RenaudRohlinger",[1116],"RenaudRohlinger",".\nIt offers simple information boxes to track code performance and serves as a more advanced alternative to ",[1112,30296,30076],{"href":30074,"rel":30297},[1116],", capable of displaying CPU and GPU metrics.",[582,30300,30301],{},"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.",[472,30303,30096],{"id":30095},[594,30305,30308],{"className":596,"code":30306,"highlights":30307,"language":601,"meta":544,"style":544},"\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",[676,746],[586,30309,30310,30330,30348,30368,30376,30380,30388,30396,30405,30413],{"__ignoreMap":544},[605,30311,30312,30314,30316,30318,30320,30322,30324,30326,30328],{"class":607,"line":545},[605,30313,611],{"class":610},[605,30315,615],{"class":614},[605,30317,619],{"class":618},[605,30319,622],{"class":618},[605,30321,625],{"class":610},[605,30323,628],{"class":610},[605,30325,632],{"class":631},[605,30327,628],{"class":610},[605,30329,637],{"class":610},[605,30331,30332,30334,30336,30338,30340,30342,30344,30346],{"class":607,"line":546},[605,30333,645],{"class":644},[605,30335,648],{"class":610},[605,30337,683],{"class":651},[605,30339,661],{"class":610},[605,30341,664],{"class":644},[605,30343,667],{"class":610},[605,30345,692],{"class":631},[605,30347,673],{"class":610},[605,30349,30351,30353,30355,30358,30360,30362,30364,30366],{"class":30350,"line":676},[607,641],[605,30352,645],{"class":644},[605,30354,648],{"class":610},[605,30356,30357],{"class":651}," StatsGl",[605,30359,661],{"class":610},[605,30361,664],{"class":644},[605,30363,667],{"class":610},[605,30365,670],{"class":631},[605,30367,673],{"class":610},[605,30369,30370,30372,30374],{"class":607,"line":697},[605,30371,700],{"class":610},[605,30373,615],{"class":614},[605,30375,637],{"class":610},[605,30377,30378],{"class":607,"line":707},[605,30379,710],{"emptyLinePlaceholder":562},[605,30381,30382,30384,30386],{"class":607,"line":713},[605,30383,611],{"class":610},[605,30385,718],{"class":614},[605,30387,637],{"class":610},[605,30389,30390,30392,30394],{"class":607,"line":723},[605,30391,726],{"class":610},[605,30393,729],{"class":614},[605,30395,637],{"class":610},[605,30397,30399,30401,30403],{"class":30398,"line":746},[607,641],[605,30400,749],{"class":610},[605,30402,299],{"class":614},[605,30404,755],{"class":610},[605,30406,30407,30409,30411],{"class":607,"line":758},[605,30408,877],{"class":610},[605,30410,729],{"class":614},[605,30412,637],{"class":610},[605,30414,30415,30417,30419],{"class":607,"line":768},[605,30416,700],{"class":610},[605,30418,718],{"class":614},[605,30420,637],{"class":610},[472,30422,7487],{"id":11049},[899,30424,30425,30437],{},[902,30426,30427],{},[905,30428,30429,30431,30433,30435],{},[908,30430,3118],{"align":969},[908,30432,10957],{},[908,30434,916],{},[908,30436,913],{},[918,30438,30439,30457,30475,30493,30511,30529,30547],{},[905,30440,30441,30446,30450,30454],{},[923,30442,30443],{"align":969},[1673,30444,30445],{},"logsPerSecond",[923,30447,30448],{},[586,30449,2537],{},[923,30451,30452],{},[586,30453,23469],{},[923,30455,30456],{},"How often to log performance data, in logs per second.",[905,30458,30459,30464,30468,30472],{},[923,30460,30461],{"align":969},[1673,30462,30463],{},"samplesLog",[923,30465,30466],{},[586,30467,2537],{},[923,30469,30470],{},[586,30471,6028],{},[923,30473,30474],{},"Number of recent log samples to keep for computing averages.",[905,30476,30477,30482,30486,30490],{},[923,30478,30479],{"align":969},[1673,30480,30481],{},"samplesGraph",[923,30483,30484],{},[586,30485,2537],{},[923,30487,30488],{},[586,30489,1478],{},[923,30491,30492],{},"Number of recent graph samples to keep for computing averages.",[905,30494,30495,30500,30504,30508],{},[923,30496,30497],{"align":969},[1673,30498,30499],{},"precision",[923,30501,30502],{},[586,30503,2537],{},[923,30505,30506],{},[586,30507,792],{},[923,30509,30510],{},"Precision of the data, in the number of decimal places (only affects CPU and GPU).",[905,30512,30513,30518,30522,30526],{},[923,30514,30515],{"align":969},[1673,30516,30517],{},"horizontal",[923,30519,30520],{},[586,30521,11014],{},[923,30523,30524],{},[586,30525,933],{},[923,30527,30528],{},"Display the canvases on the X-axis, set to align on the vertical axis.",[905,30530,30531,30536,30540,30544],{},[923,30532,30533],{"align":969},[1673,30534,30535],{},"minimal",[923,30537,30538],{},[586,30539,11014],{},[923,30541,30542],{},[586,30543,943],{},[923,30545,30546],{},"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.",[905,30548,30549,30553,30557,30561],{},[923,30550,30551],{"align":969},[1673,30552,10141],{},[923,30554,30555],{},[586,30556,2537],{},[923,30558,30559],{},[586,30560,937],{},[923,30562,30563],{},"Sets the initial panel to display - 0 for FPS, 1 for CPU, and 2 for GPU (if supported).",[1299,30565,21380],{},{"title":544,"searchDepth":545,"depth":546,"links":30567},[30568,30569],{"id":30095,"depth":546,"text":30096},{"id":11049,"depth":546,"text":7487},"WebGL performance monitoring tool displaying CPU and GPU metrics.",{},{"title":299,"description":30570},"U7tHg9fUc_rOVhwBvVzqjDp7pPwOLcUprEa_GiH5-Uc",{"id":30575,"title":303,"body":30576,"description":32005,"extension":559,"links":560,"meta":32006,"navigation":562,"path":304,"seo":32007,"stem":305,"__hash__":32008},"docs/2.api/6.debug-performance/use-bvh.md",{"type":469,"value":30577,"toc":31981},[30578,30583,30590,30604,30608,30611,30616,30627,30629,30632,30803,30807,30810,30959,30963,30966,31269,31271,31285,31289,31342,31346,31352,31499,31503,31523,31525,31529,31532,31624,31628,31631,31674,31677,31681,31732,31736,31762,31766,31772,31928,31930,31934,31955,31959,31978],[576,30579,30580],{},[30581,30582],"debug-performance-use-bounding-volume-hierarchy",{},[582,30584,30585,30586,30589],{},"A composable that dramatically improves raycasting performance by building a Bounding Volume Hierarchy (BVH) for your meshes. This can speed up raycasting by ",[1673,30587,30588],{},"orders of magnitude",", especially for complex models with many triangles.",[582,30591,30592,30593,30598,30599,1118],{},"Built on top of ",[1112,30594,30597],{"href":30595,"rel":30596},"https://github.com/gkjohnson/three-mesh-bvh",[1116],"three-mesh-bvh"," by ",[1112,30600,30603],{"href":30601,"rel":30602},"https://github.com/gkjohnson",[1116],"Garrett Johnson",[472,30605,30607],{"id":30606},"what-is-bvh","What is BVH?",[582,30609,30610],{},"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).",[582,30612,30613],{},[1673,30614,30615],{},"Use cases:",[3136,30617,30618,30621,30624],{},[3139,30619,30620],{},"Interactive 3D applications with raycasting (mouse picking, selection)",[3139,30622,30623],{},"Complex models with thousands of triangles",[3139,30625,30626],{},"Scenes with multiple raycasting operations per frame",[472,30628,15],{"id":592},[7473,30630,30631],{"id":30095},"Basic Usage",[594,30633,30636],{"className":596,"code":30634,"highlights":30635,"language":601,"meta":544,"style":544},"\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",[546,707,713,723,746,768],[586,30637,30638,30658,30682,30686,30715,30737,30746,30751,30760,30794],{"__ignoreMap":544},[605,30639,30640,30642,30644,30646,30648,30650,30652,30654,30656],{"class":607,"line":545},[605,30641,611],{"class":610},[605,30643,615],{"class":614},[605,30645,619],{"class":618},[605,30647,622],{"class":618},[605,30649,625],{"class":610},[605,30651,628],{"class":610},[605,30653,632],{"class":631},[605,30655,628],{"class":610},[605,30657,637],{"class":610},[605,30659,30661,30663,30665,30667,30669,30672,30674,30676,30678,30680],{"class":30660,"line":546},[607,641],[605,30662,645],{"class":644},[605,30664,648],{"class":610},[605,30666,10472],{"class":651},[605,30668,655],{"class":610},[605,30670,30671],{"class":651}," useBVH",[605,30673,661],{"class":610},[605,30675,664],{"class":644},[605,30677,667],{"class":610},[605,30679,670],{"class":631},[605,30681,673],{"class":610},[605,30683,30684],{"class":607,"line":676},[605,30685,710],{"emptyLinePlaceholder":562},[605,30687,30688,30690,30692,30694,30696,30698,30700,30702,30704,30706,30708,30711,30713],{"class":607,"line":697},[605,30689,2689],{"class":618},[605,30691,648],{"class":610},[605,30693,10512],{"class":614},[605,30695,1190],{"class":610},[605,30697,14349],{"class":651},[605,30699,5544],{"class":610},[605,30701,2766],{"class":610},[605,30703,10472],{"class":2800},[605,30705,2970],{"class":651},[605,30707,5536],{"class":610},[605,30709,30710],{"class":631},"/models/complex-model.glb",[605,30712,5536],{"class":610},[605,30714,5539],{"class":651},[605,30716,30718,30720,30722,30724,30726,30728,30730,30732,30734],{"class":30717,"line":707},[607,641],[605,30719,303],{"class":2800},[605,30721,2970],{"class":651},[605,30723,14395],{"class":610},[605,30725,5501],{"class":618},[605,30727,14400],{"class":651},[605,30729,1118],{"class":610},[605,30731,5496],{"class":651},[605,30733,10582],{"class":610},[605,30735,30736],{"class":651},"scene)\n",[605,30738,30740,30742,30744],{"class":30739,"line":713},[607,641],[605,30741,700],{"class":610},[605,30743,615],{"class":614},[605,30745,637],{"class":610},[605,30747,30749],{"class":30748,"line":723},[607,641],[605,30750,710],{"emptyLinePlaceholder":562},[605,30752,30754,30756,30758],{"class":30753,"line":746},[607,641],[605,30755,611],{"class":610},[605,30757,718],{"class":614},[605,30759,637],{"class":610},[605,30761,30762,30764,30766,30768,30770,30772,30774,30776,30778,30780,30782,30784,30786,30788,30790,30792],{"class":607,"line":758},[605,30763,726],{"class":610},[605,30765,10558],{"class":614},[605,30767,10561],{"class":644},[605,30769,625],{"class":610},[605,30771,628],{"class":610},[605,30773,11630],{"class":651},[605,30775,628],{"class":610},[605,30777,781],{"class":610},[605,30779,9802],{"class":618},[605,30781,625],{"class":610},[605,30783,628],{"class":610},[605,30785,11630],{"class":651},[605,30787,1118],{"class":610},[605,30789,10585],{"class":651},[605,30791,628],{"class":610},[605,30793,755],{"class":610},[605,30795,30797,30799,30801],{"class":30796,"line":768},[607,641],[605,30798,700],{"class":610},[605,30800,718],{"class":614},[605,30802,637],{"class":610},[7473,30804,30806],{"id":30805},"with-debug-visualization","With Debug Visualization",[582,30808,30809],{},"Enable debug mode to visualize the BVH bounding boxes:",[594,30811,30814],{"className":596,"code":30812,"highlights":30813,"language":601,"meta":544,"style":544},"\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",[697,707,713,723],[586,30815,30816,30836,30858,30862,30892,30897,30904,30924,30929,30943,30947,30951],{"__ignoreMap":544},[605,30817,30818,30820,30822,30824,30826,30828,30830,30832,30834],{"class":607,"line":545},[605,30819,611],{"class":610},[605,30821,615],{"class":614},[605,30823,619],{"class":618},[605,30825,622],{"class":618},[605,30827,625],{"class":610},[605,30829,628],{"class":610},[605,30831,632],{"class":631},[605,30833,628],{"class":610},[605,30835,637],{"class":610},[605,30837,30838,30840,30842,30844,30846,30848,30850,30852,30854,30856],{"class":607,"line":546},[605,30839,645],{"class":644},[605,30841,648],{"class":610},[605,30843,10472],{"class":651},[605,30845,655],{"class":610},[605,30847,30671],{"class":651},[605,30849,661],{"class":610},[605,30851,664],{"class":644},[605,30853,667],{"class":610},[605,30855,670],{"class":631},[605,30857,673],{"class":610},[605,30859,30860],{"class":607,"line":676},[605,30861,710],{"emptyLinePlaceholder":562},[605,30863,30865,30867,30869,30871,30873,30875,30877,30879,30881,30883,30885,30888,30890],{"class":30864,"line":697},[607,641],[605,30866,2689],{"class":618},[605,30868,648],{"class":610},[605,30870,10512],{"class":614},[605,30872,1190],{"class":610},[605,30874,14349],{"class":651},[605,30876,5544],{"class":610},[605,30878,2766],{"class":610},[605,30880,10472],{"class":2800},[605,30882,2970],{"class":651},[605,30884,5536],{"class":610},[605,30886,30887],{"class":631},"/models/model.glb",[605,30889,5536],{"class":610},[605,30891,5539],{"class":651},[605,30893,30895],{"class":30894,"line":707},[607,641],[605,30896,710],{"emptyLinePlaceholder":562},[605,30898,30900,30902],{"class":30899,"line":713},[607,641],[605,30901,303],{"class":2800},[605,30903,28924],{"class":651},[605,30905,30907,30910,30912,30914,30916,30918,30920,30922],{"class":30906,"line":723},[607,641],[605,30908,30909],{"class":610},"  ()",[605,30911,5501],{"class":618},[605,30913,14400],{"class":651},[605,30915,1118],{"class":610},[605,30917,5496],{"class":651},[605,30919,10582],{"class":610},[605,30921,10585],{"class":651},[605,30923,14031],{"class":610},[605,30925,30926],{"class":607,"line":746},[605,30927,30928],{"class":610},"  {\n",[605,30930,30931,30934,30936,30938,30940],{"class":607,"line":758},[605,30932,30933],{"class":614},"    debug",[605,30935,1190],{"class":610},[605,30937,10938],{"class":3870},[605,30939,655],{"class":610},[605,30941,30942],{"class":1181}," // Show BVH bounding boxes\n",[605,30944,30945],{"class":607,"line":768},[605,30946,2825],{"class":610},[605,30948,30949],{"class":607,"line":773},[605,30950,5539],{"class":651},[605,30952,30953,30955,30957],{"class":607,"line":799},[605,30954,700],{"class":610},[605,30956,615],{"class":614},[605,30958,637],{"class":610},[7473,30960,30962],{"id":30961},"reactive-enabled-state","Reactive Enabled State",[582,30964,30965],{},"Control BVH optimization dynamically:",[594,30967,30970],{"className":596,"code":30968,"highlights":30969,"language":601,"meta":544,"style":544},"\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",[697,713,723,746,758],[586,30971,30972,30992,31014,31036,31041,31058,31063,31092,31097,31104,31122,31126,31138,31142,31146,31150,31158,31162,31170,31178,31206,31211,31219,31253,31261],{"__ignoreMap":544},[605,30973,30974,30976,30978,30980,30982,30984,30986,30988,30990],{"class":607,"line":545},[605,30975,611],{"class":610},[605,30977,615],{"class":614},[605,30979,619],{"class":618},[605,30981,622],{"class":618},[605,30983,625],{"class":610},[605,30985,628],{"class":610},[605,30987,632],{"class":631},[605,30989,628],{"class":610},[605,30991,637],{"class":610},[605,30993,30994,30996,30998,31000,31002,31004,31006,31008,31010,31012],{"class":607,"line":546},[605,30995,645],{"class":644},[605,30997,648],{"class":610},[605,30999,5431],{"class":651},[605,31001,655],{"class":610},[605,31003,14390],{"class":651},[605,31005,661],{"class":610},[605,31007,664],{"class":644},[605,31009,667],{"class":610},[605,31011,601],{"class":631},[605,31013,673],{"class":610},[605,31015,31016,31018,31020,31022,31024,31026,31028,31030,31032,31034],{"class":607,"line":676},[605,31017,645],{"class":644},[605,31019,648],{"class":610},[605,31021,10472],{"class":651},[605,31023,655],{"class":610},[605,31025,30671],{"class":651},[605,31027,661],{"class":610},[605,31029,664],{"class":644},[605,31031,667],{"class":610},[605,31033,670],{"class":631},[605,31035,673],{"class":610},[605,31037,31039],{"class":31038,"line":697},[607,641],[605,31040,710],{"emptyLinePlaceholder":562},[605,31042,31043,31045,31048,31050,31052,31054,31056],{"class":607,"line":707},[605,31044,2689],{"class":618},[605,31046,31047],{"class":651}," bvhEnabled ",[605,31049,625],{"class":610},[605,31051,5431],{"class":2800},[605,31053,2970],{"class":651},[605,31055,933],{"class":3870},[605,31057,5539],{"class":651},[605,31059,31061],{"class":31060,"line":713},[607,641],[605,31062,710],{"emptyLinePlaceholder":562},[605,31064,31066,31068,31070,31072,31074,31076,31078,31080,31082,31084,31086,31088,31090],{"class":31065,"line":723},[607,641],[605,31067,2689],{"class":618},[605,31069,648],{"class":610},[605,31071,10512],{"class":614},[605,31073,1190],{"class":610},[605,31075,14349],{"class":651},[605,31077,5544],{"class":610},[605,31079,2766],{"class":610},[605,31081,10472],{"class":2800},[605,31083,2970],{"class":651},[605,31085,5536],{"class":610},[605,31087,30887],{"class":631},[605,31089,5536],{"class":610},[605,31091,5539],{"class":651},[605,31093,31095],{"class":31094,"line":746},[607,641],[605,31096,710],{"emptyLinePlaceholder":562},[605,31098,31100,31102],{"class":31099,"line":758},[607,641],[605,31101,303],{"class":2800},[605,31103,28924],{"class":651},[605,31105,31106,31108,31110,31112,31114,31116,31118,31120],{"class":607,"line":768},[605,31107,30909],{"class":610},[605,31109,5501],{"class":618},[605,31111,14400],{"class":651},[605,31113,1118],{"class":610},[605,31115,5496],{"class":651},[605,31117,10582],{"class":610},[605,31119,10585],{"class":651},[605,31121,14031],{"class":610},[605,31123,31124],{"class":607,"line":773},[605,31125,30928],{"class":610},[605,31127,31128,31131,31133,31136],{"class":607,"line":799},[605,31129,31130],{"class":614},"    enabled",[605,31132,1190],{"class":610},[605,31134,31135],{"class":651}," bvhEnabled",[605,31137,14031],{"class":610},[605,31139,31140],{"class":607,"line":599},[605,31141,2825],{"class":610},[605,31143,31144],{"class":607,"line":822},[605,31145,5539],{"class":651},[605,31147,31148],{"class":607,"line":833},[605,31149,710],{"emptyLinePlaceholder":562},[605,31151,31152,31154,31156],{"class":607,"line":844},[605,31153,700],{"class":610},[605,31155,615],{"class":614},[605,31157,637],{"class":610},[605,31159,31160],{"class":607,"line":854},[605,31161,710],{"emptyLinePlaceholder":562},[605,31163,31164,31166,31168],{"class":607,"line":600},[605,31165,611],{"class":610},[605,31167,718],{"class":614},[605,31169,637],{"class":610},[605,31171,31172,31174,31176],{"class":607,"line":874},[605,31173,726],{"class":610},[605,31175,18670],{"class":614},[605,31177,637],{"class":610},[605,31179,31180,31182,31185,31187,31190,31192,31194,31197,31200,31202,31204],{"class":607,"line":884},[605,31181,749],{"class":610},[605,31183,31184],{"class":614},"button",[605,31186,7756],{"class":610},[605,31188,31189],{"class":618},"click",[605,31191,625],{"class":610},[605,31193,628],{"class":610},[605,31195,31196],{"class":651},"bvhEnabled",[605,31198,31199],{"class":610}," = !",[605,31201,31196],{"class":651},[605,31203,628],{"class":610},[605,31205,637],{"class":610},[605,31207,31208],{"class":607,"line":2952},[605,31209,31210],{"class":651},"      Toggle BVH\n",[605,31212,31213,31215,31217],{"class":607,"line":2960},[605,31214,867],{"class":610},[605,31216,31184],{"class":614},[605,31218,637],{"class":610},[605,31220,31221,31223,31225,31227,31229,31231,31233,31235,31237,31239,31241,31243,31245,31247,31249,31251],{"class":607,"line":2990},[605,31222,749],{"class":610},[605,31224,10558],{"class":614},[605,31226,10561],{"class":644},[605,31228,625],{"class":610},[605,31230,628],{"class":610},[605,31232,11630],{"class":651},[605,31234,628],{"class":610},[605,31236,781],{"class":610},[605,31238,9802],{"class":618},[605,31240,625],{"class":610},[605,31242,628],{"class":610},[605,31244,11630],{"class":651},[605,31246,1118],{"class":610},[605,31248,10585],{"class":651},[605,31250,628],{"class":610},[605,31252,755],{"class":610},[605,31254,31255,31257,31259],{"class":607,"line":3007},[605,31256,877],{"class":610},[605,31258,18670],{"class":614},[605,31260,637],{"class":610},[605,31262,31263,31265,31267],{"class":607,"line":3022},[605,31264,700],{"class":610},[605,31266,718],{"class":614},[605,31268,637],{"class":610},[472,31270,7487],{"id":11049},[582,31272,31273,31274,31277,31278,31281,31282,31284],{},"Options are divided into ",[1673,31275,31276],{},"reactive"," (can change at runtime) and ",[1673,31279,31280],{},"static"," (set once at creation - changing requires toggling ",[586,31283,10162],{}," off/on to rebuild).",[7473,31286,31288],{"id":31287},"reactive-options","Reactive Options",[899,31290,31291,31304],{},[902,31292,31293],{},[905,31294,31295,31298,31300,31302],{},[908,31296,31297],{"align":969},"Option",[908,31299,10957],{"align":969},[908,31301,916],{"align":969},[908,31303,913],{"align":969},[918,31305,31306,31324],{},[905,31307,31308,31312,31317,31321],{},[923,31309,31310],{"align":969},[1673,31311,10162],{},[923,31313,31314],{"align":969},[586,31315,31316],{},"MaybeRefOrGetter\u003Cboolean>",[923,31318,31319],{"align":969},[586,31320,933],{},[923,31322,31323],{"align":969},"Enable/disable BVH optimization. Toggling rebuilds BVH structures.",[905,31325,31326,31331,31335,31339],{},[923,31327,31328],{"align":969},[1673,31329,31330],{},"debug",[923,31332,31333],{"align":969},[586,31334,31316],{},[923,31336,31337],{"align":969},[586,31338,943],{},[923,31340,31341],{"align":969},"Show debug visualization of BVH bounding boxes.",[7473,31343,31345],{"id":31344},"static-options-bvh-construction","Static Options (BVH Construction)",[582,31347,31348,31349,31351],{},"These options configure how the BVH is built. Changing them after creation has no effect - toggle ",[586,31350,10162],{}," off/on to rebuild with new values.",[899,31353,31354,31366],{},[902,31355,31356],{},[905,31357,31358,31360,31362,31364],{},[908,31359,31297],{"align":969},[908,31361,10957],{"align":969},[908,31363,916],{"align":969},[908,31365,913],{"align":969},[918,31367,31368,31389,31409,31427,31445,31463,31481],{},[905,31369,31370,31375,31379,31383],{},[923,31371,31372],{"align":969},[1673,31373,31374],{},"firstHitOnly",[923,31376,31377],{"align":969},[586,31378,11014],{},[923,31380,31381],{"align":969},[586,31382,943],{},[923,31384,18403,31385,31388],{"align":969},[586,31386,31387],{},"raycastFirst"," for better performance when only the first hit is needed.",[905,31390,31391,31396,31401,31406],{},[923,31392,31393],{"align":969},[1673,31394,31395],{},"splitStrategy",[923,31397,31398],{"align":969},[586,31399,31400],{},"'CENTER' | 'AVERAGE' | 'SAH'",[923,31402,31403],{"align":969},[586,31404,31405],{},"'SAH'",[923,31407,31408],{"align":969},"BVH build strategy. See section below.",[905,31410,31411,31416,31420,31424],{},[923,31412,31413],{"align":969},[1673,31414,31415],{},"maxDepth",[923,31417,31418],{"align":969},[586,31419,2537],{},[923,31421,31422],{"align":969},[586,31423,28007],{},[923,31425,31426],{"align":969},"Maximum tree depth for the BVH structure.",[905,31428,31429,31434,31438,31442],{},[923,31430,31431],{"align":969},[1673,31432,31433],{},"maxLeafSize",[923,31435,31436],{"align":969},[586,31437,2537],{},[923,31439,31440],{"align":969},[586,31441,1478],{},[923,31443,31444],{"align":969},"Target number of triangles per leaf node.",[905,31446,31447,31452,31456,31460],{},[923,31448,31449],{"align":969},[1673,31450,31451],{},"verbose",[923,31453,31454],{"align":969},[586,31455,11014],{},[923,31457,31458],{"align":969},[586,31459,943],{},[923,31461,31462],{"align":969},"Print construction warnings and progress to console.",[905,31464,31465,31470,31474,31478],{},[923,31466,31467],{"align":969},[1673,31468,31469],{},"setBoundingBox",[923,31471,31472],{"align":969},[586,31473,11014],{},[923,31475,31476],{"align":969},[586,31477,933],{},[923,31479,31480],{"align":969},"Automatically set geometry bounding box after BVH construction.",[905,31482,31483,31488,31492,31496],{},[923,31484,31485],{"align":969},[1673,31486,31487],{},"indirect",[923,31489,31490],{"align":969},[586,31491,11014],{},[923,31493,31494],{"align":969},[586,31495,943],{},[923,31497,31498],{"align":969},"If false, creates and rearranges index buffer for better performance.",[7473,31500,31502],{"id":31501},"split-strategies","Split Strategies",[3136,31504,31505,31511,31517],{},[3139,31506,31507,31510],{},[1673,31508,31509],{},"SAH (Surface Area Heuristic)"," - Slowest to build, fastest at runtime, uses least memory. Best for production.",[3139,31512,31513,31516],{},[1673,31514,31515],{},"AVERAGE"," - Balanced build time and runtime performance.",[3139,31518,31519,31522],{},[1673,31520,31521],{},"CENTER"," - Fastest to build, slower at runtime.",[472,31524,17210],{"id":17209},[7473,31526,31528],{"id":31527},"fine-tuning-performance","Fine-tuning Performance",[582,31530,31531],{},"Adjust BVH construction parameters for your use case:",[594,31533,31535],{"className":1158,"code":31534,"language":632,"meta":544,"style":544},"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",[586,31536,31537,31543,31550,31554,31573,31587,31602,31616,31620],{"__ignoreMap":544},[605,31538,31539,31541],{"class":607,"line":545},[605,31540,303],{"class":2800},[605,31542,28924],{"class":651},[605,31544,31545,31548],{"class":607,"line":546},[605,31546,31547],{"class":651},"  target",[605,31549,14031],{"class":610},[605,31551,31552],{"class":607,"line":676},[605,31553,30928],{"class":610},[605,31555,31556,31559,31561,31563,31566,31568,31570],{"class":607,"line":697},[605,31557,31558],{"class":614},"    splitStrategy",[605,31560,1190],{"class":610},[605,31562,667],{"class":610},[605,31564,31565],{"class":631},"SAH",[605,31567,5536],{"class":610},[605,31569,655],{"class":610},[605,31571,31572],{"class":1181}," // Best runtime performance\n",[605,31574,31575,31578,31580,31582,31584],{"class":607,"line":707},[605,31576,31577],{"class":614},"    maxDepth",[605,31579,1190],{"class":610},[605,31581,16569],{"class":791},[605,31583,655],{"class":610},[605,31585,31586],{"class":1181}," // Shallower tree (faster build)\n",[605,31588,31589,31592,31594,31597,31599],{"class":607,"line":713},[605,31590,31591],{"class":614},"    maxLeafSize",[605,31593,1190],{"class":610},[605,31595,31596],{"class":791}," 5",[605,31598,655],{"class":610},[605,31600,31601],{"class":1181}," // Smaller leaves (better culling)\n",[605,31603,31604,31607,31609,31611,31613],{"class":607,"line":723},[605,31605,31606],{"class":614},"    verbose",[605,31608,1190],{"class":610},[605,31610,10938],{"class":3870},[605,31612,655],{"class":610},[605,31614,31615],{"class":1181}," // Debug construction\n",[605,31617,31618],{"class":607,"line":746},[605,31619,2825],{"class":610},[605,31621,31622],{"class":607,"line":758},[605,31623,5539],{"class":651},[7473,31625,31627],{"id":31626},"first-hit-only-mode","First Hit Only Mode",[582,31629,31630],{},"When you only need the closest intersection (e.g., mouse picking):",[594,31632,31634],{"className":1158,"code":31633,"language":632,"meta":544,"style":544},"useBVH(\n  target,\n  {\n    firstHitOnly: true, // Uses raycastFirst internally\n  }\n)\n",[586,31635,31636,31642,31648,31652,31666,31670],{"__ignoreMap":544},[605,31637,31638,31640],{"class":607,"line":545},[605,31639,303],{"class":2800},[605,31641,28924],{"class":651},[605,31643,31644,31646],{"class":607,"line":546},[605,31645,31547],{"class":651},[605,31647,14031],{"class":610},[605,31649,31650],{"class":607,"line":676},[605,31651,30928],{"class":610},[605,31653,31654,31657,31659,31661,31663],{"class":607,"line":697},[605,31655,31656],{"class":614},"    firstHitOnly",[605,31658,1190],{"class":610},[605,31660,10938],{"class":3870},[605,31662,655],{"class":610},[605,31664,31665],{"class":1181}," // Uses raycastFirst internally\n",[605,31667,31668],{"class":607,"line":707},[605,31669,2825],{"class":610},[605,31671,31672],{"class":607,"line":713},[605,31673,5539],{"class":651},[582,31675,31676],{},"This is significantly faster than computing all intersections when you only need one.",[472,31678,31680],{"id":31679},"important-notes","Important Notes",[3136,31682,31683,31689,31708,31714,31726],{},[3139,31684,31685,31688],{},[1673,31686,31687],{},"Side-effect free",": BVH is automatically removed on unmount and when disabled.",[3139,31690,31691,31694,31695,4431,31697,31699,31700,1471,31702,31704,31705,31707],{},[1673,31692,31693],{},"Reactive options",": Only ",[586,31696,10162],{},[586,31698,31330],{}," are reactive. Construction options (",[586,31701,31395],{},[586,31703,31415],{},", etc.) are static - to apply new values, toggle ",[586,31706,10162],{}," off/on.",[3139,31709,31710,31713],{},[1673,31711,31712],{},"Memory efficient",": BVH structures are properly disposed when removed.",[3139,31715,31716,31719,31720,4431,31722,31725],{},[1673,31717,31718],{},"Automatic mesh detection",": Works with ",[586,31721,5299],{},[586,31723,31724],{},"SkinnedMesh"," instances.",[3139,31727,31728,31731],{},[1673,31729,31730],{},"Draco models",": Works seamlessly with Draco-compressed GLTF models.",[472,31733,31735],{"id":31734},"performance-tips","Performance Tips",[7605,31737,31738,31744,31750,31756],{},[3139,31739,31740,31743],{},[1673,31741,31742],{},"Use firstHitOnly"," when you only need the closest intersection",[3139,31745,31746,31749],{},[1673,31747,31748],{},"SAH strategy"," gives best runtime performance for production",[3139,31751,31752,31755],{},[1673,31753,31754],{},"Adjust maxLeafSize"," based on triangle density (smaller for dense meshes)",[3139,31757,31758,31761],{},[1673,31759,31760],{},"Enable debug mode"," during development to verify BVH coverage",[472,31763,31765],{"id":31764},"integration-with-usegltf","Integration with useGLTF",[582,31767,31768,31769,31771],{},"Perfect pairing with ",[586,31770,117],{}," for optimized model loading:",[594,31773,31775],{"className":596,"code":31774,"language":601,"meta":544,"style":544},"\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",[586,31776,31777,31797,31819,31823,31854,31864,31870,31874,31880,31898,31916,31920],{"__ignoreMap":544},[605,31778,31779,31781,31783,31785,31787,31789,31791,31793,31795],{"class":607,"line":545},[605,31780,611],{"class":610},[605,31782,615],{"class":614},[605,31784,619],{"class":618},[605,31786,622],{"class":618},[605,31788,625],{"class":610},[605,31790,628],{"class":610},[605,31792,632],{"class":631},[605,31794,628],{"class":610},[605,31796,637],{"class":610},[605,31798,31799,31801,31803,31805,31807,31809,31811,31813,31815,31817],{"class":607,"line":546},[605,31800,645],{"class":644},[605,31802,648],{"class":610},[605,31804,30671],{"class":651},[605,31806,655],{"class":610},[605,31808,10472],{"class":651},[605,31810,661],{"class":610},[605,31812,664],{"class":644},[605,31814,667],{"class":610},[605,31816,670],{"class":631},[605,31818,673],{"class":610},[605,31820,31821],{"class":607,"line":676},[605,31822,710],{"emptyLinePlaceholder":562},[605,31824,31825,31827,31829,31831,31833,31835,31837,31839,31841,31843,31845,31848,31850,31852],{"class":607,"line":697},[605,31826,2689],{"class":618},[605,31828,648],{"class":610},[605,31830,10512],{"class":614},[605,31832,1190],{"class":610},[605,31834,14349],{"class":651},[605,31836,5544],{"class":610},[605,31838,2766],{"class":610},[605,31840,10472],{"class":2800},[605,31842,2970],{"class":651},[605,31844,5536],{"class":610},[605,31846,31847],{"class":631},"/models/high-poly-model.glb",[605,31849,5536],{"class":610},[605,31851,655],{"class":610},[605,31853,1176],{"class":610},[605,31855,31856,31859,31861],{"class":607,"line":707},[605,31857,31858],{"class":614},"  draco",[605,31860,1190],{"class":610},[605,31862,31863],{"class":3870}," true\n",[605,31865,31866,31868],{"class":607,"line":713},[605,31867,5544],{"class":610},[605,31869,5539],{"class":651},[605,31871,31872],{"class":607,"line":723},[605,31873,710],{"emptyLinePlaceholder":562},[605,31875,31876,31878],{"class":607,"line":746},[605,31877,303],{"class":2800},[605,31879,28924],{"class":651},[605,31881,31882,31884,31886,31888,31890,31892,31894,31896],{"class":607,"line":758},[605,31883,30909],{"class":610},[605,31885,5501],{"class":618},[605,31887,14400],{"class":651},[605,31889,1118],{"class":610},[605,31891,5496],{"class":651},[605,31893,10582],{"class":610},[605,31895,10585],{"class":651},[605,31897,14031],{"class":610},[605,31899,31900,31903,31906,31908,31910,31912,31914],{"class":607,"line":768},[605,31901,31902],{"class":610},"  {",[605,31904,31905],{"class":614}," splitStrategy",[605,31907,1190],{"class":610},[605,31909,667],{"class":610},[605,31911,31565],{"class":631},[605,31913,5536],{"class":610},[605,31915,15640],{"class":610},[605,31917,31918],{"class":607,"line":773},[605,31919,5539],{"class":651},[605,31921,31922,31924,31926],{"class":607,"line":799},[605,31923,700],{"class":610},[605,31925,615],{"class":614},[605,31927,637],{"class":610},[472,31929,18260],{"id":18259},[7473,31931,31933],{"id":31932},"bvh-not-applying-to-some-meshes","BVH not applying to some meshes",[3136,31935,31936,31939,31946],{},[3139,31937,31938],{},"Ensure meshes have valid geometry with position attributes",[3139,31940,31941,31942,31945],{},"Check console with ",[586,31943,31944],{},"verbose: true"," to see which meshes are skipped",[3139,31947,31948,31949,31951,31952,31954],{},"Verify the object is an ",[586,31950,2578],{}," (use ",[586,31953,10558],{}," in templates)",[7473,31956,31958],{"id":31957},"performance-not-improving","Performance not improving",[3136,31960,31961,31966,31972,31975],{},[3139,31962,11890,31963,31965],{},[586,31964,31374],{}," if you only need one intersection",[3139,31967,31968,31969,31971],{},"Try different split strategies (",[586,31970,31565],{}," is usually best)",[3139,31973,31974],{},"Verify raycasting is the bottleneck (use Stats/StatsGl)",[3139,31976,31977],{},"Consider LOD for very distant objects",[1299,31979,31980],{},"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":544,"searchDepth":545,"depth":546,"links":31982},[31983,31984,31989,31994,31998,31999,32000,32001],{"id":30606,"depth":546,"text":30607},{"id":592,"depth":546,"text":15,"children":31985},[31986,31987,31988],{"id":30095,"depth":676,"text":30631},{"id":30805,"depth":676,"text":30806},{"id":30961,"depth":676,"text":30962},{"id":11049,"depth":546,"text":7487,"children":31990},[31991,31992,31993],{"id":31287,"depth":676,"text":31288},{"id":31344,"depth":676,"text":31345},{"id":31501,"depth":676,"text":31502},{"id":17209,"depth":546,"text":17210,"children":31995},[31996,31997],{"id":31527,"depth":676,"text":31528},{"id":31626,"depth":676,"text":31627},{"id":31679,"depth":546,"text":31680},{"id":31734,"depth":546,"text":31735},{"id":31764,"depth":546,"text":31765},{"id":18259,"depth":546,"text":18260,"children":32002},[32003,32004],{"id":31932,"depth":676,"text":31933},{"id":31957,"depth":676,"text":31958},"Speed up raycasting with Bounding Volume Hierarchy (BVH) optimization.",{},{"title":303,"description":32005},"j_yBTwISSBvt9p_jtL1KmVLzoSoFUX_NTuLQBbuRDIs",[32010,32578,33200,33612,34107,35644,36341],{"id":32011,"title":313,"body":32012,"description":32574,"extension":559,"links":560,"meta":32575,"navigation":562,"path":314,"seo":32576,"stem":315,"__hash__":32577},"docs/2.api/7.light-shadow/accumulative-shadows.md",{"type":469,"value":32013,"toc":32569},[32014,32019,32034,32036,32338,32340,32534,32536,32546,32566],[576,32015,32016],{},[32017,32018],"light-shadow-accumulative-shadows",{},[582,32020,32021,32024,32025,32028,32029,1118],{},[586,32022,32023],{},"\u003CAccumulativeShadows />"," is a ",[586,32026,32027],{},"THREE.DirectionalLight","-based shadow component. It displays shadows on a single shadow catcher plane, included in the component. It is based on ",[1112,32030,32033],{"href":32031,"rel":32032},"http://drei.docs.pmnd.rs/staging/accumulative-shadows",[1116],"Drei component of the same name",[472,32035,15],{"id":592},[594,32037,32040],{"className":596,"code":32038,"highlights":32039,"language":601,"meta":544,"style":544},"\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",[546,833,844,854,600,874],[586,32041,32042,32062,32082,32100,32108,32112,32120,32151,32157,32183,32187,32233,32242,32250,32258,32266,32282,32295,32301,32318,32322,32330],{"__ignoreMap":544},[605,32043,32044,32046,32048,32050,32052,32054,32056,32058,32060],{"class":607,"line":545},[605,32045,611],{"class":610},[605,32047,615],{"class":614},[605,32049,619],{"class":618},[605,32051,622],{"class":618},[605,32053,625],{"class":610},[605,32055,628],{"class":610},[605,32057,632],{"class":631},[605,32059,628],{"class":610},[605,32061,637],{"class":610},[605,32063,32065,32067,32069,32072,32074,32076,32078,32080],{"class":32064,"line":546},[607,641],[605,32066,645],{"class":644},[605,32068,648],{"class":610},[605,32070,32071],{"class":651}," AccumulativeShadows",[605,32073,661],{"class":610},[605,32075,664],{"class":644},[605,32077,667],{"class":610},[605,32079,670],{"class":631},[605,32081,673],{"class":610},[605,32083,32084,32086,32088,32090,32092,32094,32096,32098],{"class":607,"line":676},[605,32085,645],{"class":644},[605,32087,648],{"class":610},[605,32089,683],{"class":651},[605,32091,661],{"class":610},[605,32093,664],{"class":644},[605,32095,667],{"class":610},[605,32097,692],{"class":631},[605,32099,673],{"class":610},[605,32101,32102,32104,32106],{"class":607,"line":697},[605,32103,700],{"class":610},[605,32105,615],{"class":614},[605,32107,637],{"class":610},[605,32109,32110],{"class":607,"line":707},[605,32111,710],{"emptyLinePlaceholder":562},[605,32113,32114,32116,32118],{"class":607,"line":713},[605,32115,611],{"class":610},[605,32117,718],{"class":614},[605,32119,637],{"class":610},[605,32121,32122,32124,32126,32128,32130,32132,32134,32136,32138,32141,32143,32145,32147,32149],{"class":607,"line":723},[605,32123,726],{"class":610},[605,32125,729],{"class":614},[605,32127,732],{"class":618},[605,32129,625],{"class":610},[605,32131,628],{"class":610},[605,32133,4045],{"class":631},[605,32135,628],{"class":610},[605,32137,781],{"class":610},[605,32139,32140],{"class":618},"shadows",[605,32142,625],{"class":610},[605,32144,628],{"class":610},[605,32146,933],{"class":3870},[605,32148,628],{"class":610},[605,32150,637],{"class":610},[605,32152,32153,32155],{"class":607,"line":746},[605,32154,825],{"class":610},[605,32156,19126],{"class":614},[605,32158,32159,32161,32163,32165,32167,32169,32171,32173,32175,32177,32179,32181],{"class":607,"line":758},[605,32160,5693],{"class":610},[605,32162,3440],{"class":618},[605,32164,625],{"class":610},[605,32166,628],{"class":610},[605,32168,1466],{"class":610},[605,32170,937],{"class":791},[605,32172,1471],{"class":610},[605,32174,937],{"class":791},[605,32176,1471],{"class":610},[605,32178,937],{"class":791},[605,32180,1481],{"class":610},[605,32182,2987],{"class":610},[605,32184,32185],{"class":607,"line":768},[605,32186,10816],{"class":610},[605,32188,32189,32191,32193,32195,32197,32199,32201,32204,32206,32208,32210,32212,32214,32217,32219,32221,32223,32225,32227,32229,32231],{"class":607,"line":773},[605,32190,749],{"class":610},[605,32192,828],{"class":614},[605,32194,781],{"class":610},[605,32196,1968],{"class":618},[605,32198,625],{"class":610},[605,32200,628],{"class":610},[605,32202,32203],{"class":791},"0.3",[605,32205,628],{"class":610},[605,32207,781],{"class":610},[605,32209,784],{"class":618},[605,32211,625],{"class":610},[605,32213,628],{"class":610},[605,32215,32216],{"class":791},"0.4",[605,32218,628],{"class":610},[605,32220,781],{"class":610},[605,32222,11924],{"class":618},[605,32224,625],{"class":610},[605,32226,628],{"class":610},[605,32228,933],{"class":3870},[605,32230,628],{"class":610},[605,32232,637],{"class":610},[605,32234,32235,32237,32240],{"class":607,"line":799},[605,32236,825],{"class":610},[605,32238,32239],{"class":614},"TresTorusKnotGeometry",[605,32241,755],{"class":610},[605,32243,32244,32246,32248],{"class":607,"line":599},[605,32245,825],{"class":610},[605,32247,849],{"class":614},[605,32249,755],{"class":610},[605,32251,32252,32254,32256],{"class":607,"line":822},[605,32253,867],{"class":610},[605,32255,828],{"class":614},[605,32257,637],{"class":610},[605,32259,32261,32263],{"class":32260,"line":833},[607,641],[605,32262,749],{"class":610},[605,32264,32265],{"class":614},"AccumulativeShadows\n",[605,32267,32269,32271,32274,32276,32278,32280],{"class":32268,"line":844},[607,641],[605,32270,5693],{"class":610},[605,32272,32273],{"class":618},"blend",[605,32275,625],{"class":610},[605,32277,628],{"class":610},[605,32279,6028],{"class":791},[605,32281,2987],{"class":610},[605,32283,32285,32287,32289,32291,32293],{"class":32284,"line":854},[607,641],[605,32286,23371],{"class":618},[605,32288,625],{"class":610},[605,32290,628],{"class":610},[605,32292,4045],{"class":631},[605,32294,2987],{"class":610},[605,32296,32298],{"class":32297,"line":600},[607,641],[605,32299,32300],{"class":618},"      once\n",[605,32302,32304,32306,32308,32310,32312,32314,32316],{"class":32303,"line":874},[607,641],[605,32305,5693],{"class":610},[605,32307,1968],{"class":618},[605,32309,625],{"class":610},[605,32311,628],{"class":610},[605,32313,4088],{"class":610},[605,32315,32216],{"class":791},[605,32317,2987],{"class":610},[605,32319,32320],{"class":607,"line":884},[605,32321,10816],{"class":610},[605,32323,32324,32326,32328],{"class":607,"line":2952},[605,32325,877],{"class":610},[605,32327,729],{"class":614},[605,32329,637],{"class":610},[605,32331,32332,32334,32336],{"class":607,"line":2960},[605,32333,700],{"class":610},[605,32335,718],{"class":614},[605,32337,637],{"class":610},[472,32339,894],{"id":893},[899,32341,32342,32352],{},[902,32343,32344],{},[905,32345,32346,32348,32350],{},[908,32347,910],{},[908,32349,913],{},[908,32351,916],{},[918,32353,32354,32368,32382,32406,32421,32438,32451,32464,32478,32491,32506,32520],{},[905,32355,32356,32361,32364],{},[923,32357,32358],{},[586,32359,32360],{},"once",[923,32362,32363],{},"Whether shadow creation only happens once (resets after props change)",[923,32365,32366],{},[586,32367,943],{},[905,32369,32370,32375,32378],{},[923,32371,32372],{},[586,32373,32374],{},"accumulate",[923,32376,32377],{},"Whether shadows accumulate progressively over several frames",[923,32379,32380],{},[586,32381,933],{},[905,32383,32384,32389,32402],{},[923,32385,32386],{},[586,32387,32388],{},"frames",[923,32390,32391,32392,32395,32396,32398,32399,32401],{},"Number of frames to render. More yields cleaner results but takes more time. If ",[586,32393,32394],{},"accumulate && once",", 1 frame will be consumed every update for ",[586,32397,32388],{}," updates. Otherwise, ",[586,32400,32388],{}," frames are consumed for every update.",[923,32403,32404],{},[586,32405,28007],{},[905,32407,32408,32412,32417],{},[923,32409,32410],{},[586,32411,32273],{},[923,32413,930,32414,32416],{},[586,32415,32374],{},", controls the refresh ratio",[923,32418,32419],{},[586,32420,6028],{},[905,32422,32423,32428,32434],{},[923,32424,32425],{},[586,32426,32427],{},"limit",[923,32429,32430,32431,32433],{},"If less than ",[586,32432,6938],{},", limits the amount of frames rendered. Use this to increase performance once a movable scene has settled",[923,32435,32436],{},[586,32437,6938],{},[905,32439,32440,32444,32447],{},[923,32441,32442],{},[586,32443,784],{},[923,32445,32446],{},"Scale of the plane",[923,32448,32449],{},[586,32450,1478],{},[905,32452,32453,32457,32460],{},[923,32454,32455],{},[586,32456,4861],{},[923,32458,32459],{},"Opacity of the plane",[923,32461,32462],{},[586,32463,1893],{},[905,32465,32466,32471,32474],{},[923,32467,32468],{},[586,32469,32470],{},"alphaTest",[923,32472,32473],{},"Discards alpha pixels",[923,32475,32476],{},[586,32477,2146],{},[905,32479,32480,32484,32487],{},[923,32481,32482],{},[586,32483,2500],{},[923,32485,32486],{},"Shadow color",[923,32488,32489],{},[586,32490,4844],{},[905,32492,32493,32498,32502],{},[923,32494,32495],{},[586,32496,32497],{},"colorBlend",[923,32499,32430,32500,32433],{},[586,32501,6938],{},[923,32503,32504],{},[586,32505,6938],{},[905,32507,32508,32512,32515],{},[923,32509,32510],{},[586,32511,21937],{},[923,32513,32514],{},"Buffer resolution",[923,32516,32517],{},[586,32518,32519],{},"1024",[905,32521,32522,32527,32530],{},[923,32523,32524],{},[586,32525,32526],{},"toneMapped",[923,32528,32529],{},"Texture tonemapping",[923,32531,32532],{},[586,32533,933],{},[472,32535,28222],{"id":28221},[582,32537,32538,32539,32542,32543,1118],{},"You can bring your own lights to ",[586,32540,32541],{},"\u003CAccumulatedShadows />",", but it's designed to be used with ",[586,32544,32545],{},"\u003CRandomizedLights />",[582,32547,32548,32549,32553,32554,32556,32557,32560,32561,32565],{},"By default, there's a ",[1112,32550,32551],{"href":334},[586,32552,32545],{}," instance provided in ",[586,32555,32541],{},"'s ",[586,32558,32559],{},"\u003Cslot />",". You can replace it with your own ",[1112,32562,32563],{"href":334},[586,32564,32545],{}," or an alternative by passing it as a child component.",[1299,32567,32568],{},"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":544,"searchDepth":545,"depth":546,"links":32570},[32571,32572,32573],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},{"id":28221,"depth":546,"text":28222},"DirectionalLight-based shadow component with progressive accumulation.",{},{"title":313,"description":32574},"VdtFCKwQ2ZyFv-ZyG0covi7a2nS1DuskCV9MJO6BaDQ",{"id":32579,"title":317,"body":32580,"description":33196,"extension":559,"links":560,"meta":33197,"navigation":562,"path":318,"seo":33198,"stem":319,"__hash__":33199},"docs/2.api/7.light-shadow/bake-shadows.md",{"type":469,"value":32581,"toc":33193},[32582,32587,32598,32600,32605,33190],[2558,32583,32584],{},[32585,32586],"light-shadow-bake-shadows",{},[582,32588,32589,30089,32591,32594,32595,32597],{},[1673,32590,30088],{},[586,32592,32593],{},"BakeShadows",". Basically this component set the renderer.shadowMap.autoUpdate to ",[586,32596,943],{},", 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.",[472,32599,30096],{"id":30095},[3725,32601,32602],{},[582,32603,32604],{},"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.",[594,32606,32609],{"className":596,"code":32607,"highlights":32608,"language":601,"meta":544,"style":544},"\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",[546,3047],[586,32610,32611,32631,32651,32669,32687,32691,32704,32708,32738,32755,32783,32807,32811,32815,32823,32827,32835,32842,32855,32860,32875,32879,32885,32911,32937,32941,32950,32956,32968,32973,32977,32985,33003,33011,33017,33022,33048,33073,33077,33105,33126,33134,33140,33144,33170,33174,33182],{"__ignoreMap":544},[605,32612,32613,32615,32617,32619,32621,32623,32625,32627,32629],{"class":607,"line":545},[605,32614,611],{"class":610},[605,32616,615],{"class":614},[605,32618,619],{"class":618},[605,32620,622],{"class":618},[605,32622,625],{"class":610},[605,32624,628],{"class":610},[605,32626,632],{"class":631},[605,32628,628],{"class":610},[605,32630,637],{"class":610},[605,32632,32634,32636,32638,32641,32643,32645,32647,32649],{"class":32633,"line":546},[607,641],[605,32635,645],{"class":644},[605,32637,648],{"class":610},[605,32639,32640],{"class":651}," BakeShadows",[605,32642,661],{"class":610},[605,32644,664],{"class":644},[605,32646,667],{"class":610},[605,32648,670],{"class":631},[605,32650,673],{"class":610},[605,32652,32653,32655,32657,32659,32661,32663,32665,32667],{"class":607,"line":676},[605,32654,645],{"class":644},[605,32656,648],{"class":610},[605,32658,683],{"class":651},[605,32660,661],{"class":610},[605,32662,664],{"class":644},[605,32664,667],{"class":610},[605,32666,692],{"class":631},[605,32668,673],{"class":610},[605,32670,32671,32673,32675,32677,32679,32681,32683,32685],{"class":607,"line":697},[605,32672,645],{"class":644},[605,32674,648],{"class":610},[605,32676,9716],{"class":651},[605,32678,661],{"class":610},[605,32680,664],{"class":644},[605,32682,667],{"class":610},[605,32684,601],{"class":631},[605,32686,673],{"class":610},[605,32688,32689],{"class":607,"line":707},[605,32690,710],{"emptyLinePlaceholder":562},[605,32692,32693,32695,32698,32700,32702],{"class":607,"line":713},[605,32694,2689],{"class":618},[605,32696,32697],{"class":651}," cubeRef ",[605,32699,625],{"class":610},[605,32701,9716],{"class":2800},[605,32703,2846],{"class":651},[605,32705,32706],{"class":607,"line":723},[605,32707,710],{"emptyLinePlaceholder":562},[605,32709,32710,32713,32716,32719,32722,32725,32727,32729,32731,32733,32736],{"class":607,"line":746},[605,32711,32712],{"class":618},"function",[605,32714,32715],{"class":2800}," onLoop",[605,32717,32718],{"class":610},"({",[605,32720,32721],{"class":5495}," elapsed",[605,32723,32724],{"class":610}," }:",[605,32726,648],{"class":610},[605,32728,32721],{"class":614},[605,32730,1190],{"class":610},[605,32732,2697],{"class":1172},[605,32734,32735],{"class":610}," })",[605,32737,1176],{"class":610},[605,32739,32740,32742,32744,32747,32749,32751,32753],{"class":607,"line":758},[605,32741,14598],{"class":644},[605,32743,2713],{"class":614},[605,32745,32746],{"class":651},"cubeRef",[605,32748,1118],{"class":610},[605,32750,5496],{"class":651},[605,32752,2748],{"class":614},[605,32754,2751],{"class":610},[605,32756,32757,32760,32762,32764,32766,32768,32770,32773,32775,32777,32780],{"class":607,"line":768},[605,32758,32759],{"class":651},"    cubeRef",[605,32761,1118],{"class":610},[605,32763,5496],{"class":651},[605,32765,1118],{"class":610},[605,32767,21584],{"class":651},[605,32769,1118],{"class":610},[605,32771,32772],{"class":651},"y",[605,32774,2766],{"class":610},[605,32776,32721],{"class":651},[605,32778,32779],{"class":610}," *",[605,32781,32782],{"class":791}," 0.5\n",[605,32784,32785,32787,32789,32791,32793,32795,32797,32799,32801,32803,32805],{"class":607,"line":773},[605,32786,32759],{"class":651},[605,32788,1118],{"class":610},[605,32790,5496],{"class":651},[605,32792,1118],{"class":610},[605,32794,21584],{"class":651},[605,32796,1118],{"class":610},[605,32798,2807],{"class":651},[605,32800,2766],{"class":610},[605,32802,32721],{"class":651},[605,32804,32779],{"class":610},[605,32806,32782],{"class":791},[605,32808,32809],{"class":607,"line":799},[605,32810,2825],{"class":610},[605,32812,32813],{"class":607,"line":599},[605,32814,1297],{"class":610},[605,32816,32817,32819,32821],{"class":607,"line":822},[605,32818,700],{"class":610},[605,32820,615],{"class":614},[605,32822,637],{"class":610},[605,32824,32825],{"class":607,"line":833},[605,32826,710],{"emptyLinePlaceholder":562},[605,32828,32829,32831,32833],{"class":607,"line":844},[605,32830,611],{"class":610},[605,32832,718],{"class":614},[605,32834,637],{"class":610},[605,32836,32837,32839],{"class":607,"line":854},[605,32838,726],{"class":610},[605,32840,32841],{"class":614},"TresCanvas\n",[605,32843,32844,32847,32849,32851,32853],{"class":607,"line":600},[605,32845,32846],{"class":618},"    clear-color",[605,32848,625],{"class":610},[605,32850,628],{"class":610},[605,32852,5040],{"class":631},[605,32854,2987],{"class":610},[605,32856,32857],{"class":607,"line":874},[605,32858,32859],{"class":618},"    shadows\n",[605,32861,32862,32864,32866,32868,32870,32873],{"class":607,"line":884},[605,32863,13824],{"class":610},[605,32865,19561],{"class":618},[605,32867,625],{"class":610},[605,32869,628],{"class":610},[605,32871,32872],{"class":651},"onLoop",[605,32874,2987],{"class":610},[605,32876,32877],{"class":607,"line":2952},[605,32878,13858],{"class":610},[605,32880,32881,32883],{"class":607,"line":2960},[605,32882,749],{"class":610},[605,32884,19126],{"class":614},[605,32886,32887,32889,32891,32893,32895,32897,32899,32901,32903,32905,32907,32909],{"class":607,"line":2990},[605,32888,5693],{"class":610},[605,32890,1459],{"class":618},[605,32892,625],{"class":610},[605,32894,628],{"class":610},[605,32896,1466],{"class":610},[605,32898,937],{"class":791},[605,32900,1471],{"class":610},[605,32902,792],{"class":791},[605,32904,1471],{"class":610},[605,32906,2396],{"class":791},[605,32908,1481],{"class":610},[605,32910,2987],{"class":610},[605,32912,32913,32915,32917,32919,32921,32923,32925,32927,32929,32931,32933,32935],{"class":607,"line":3007},[605,32914,5693],{"class":610},[605,32916,3440],{"class":618},[605,32918,625],{"class":610},[605,32920,628],{"class":610},[605,32922,1466],{"class":610},[605,32924,937],{"class":791},[605,32926,1471],{"class":610},[605,32928,937],{"class":791},[605,32930,1471],{"class":610},[605,32932,937],{"class":791},[605,32934,1481],{"class":610},[605,32936,2987],{"class":610},[605,32938,32939],{"class":607,"line":3022},[605,32940,10816],{"class":610},[605,32942,32944,32946,32948],{"class":32943,"line":3047},[607,641],[605,32945,749],{"class":610},[605,32947,32593],{"class":614},[605,32949,755],{"class":610},[605,32951,32952,32954],{"class":607,"line":2591},[605,32953,749],{"class":610},[605,32955,2957],{"class":614},[605,32957,32958,32960,32962,32964,32966],{"class":607,"line":3062},[605,32959,5679],{"class":618},[605,32961,625],{"class":610},[605,32963,628],{"class":610},[605,32965,32746],{"class":631},[605,32967,2987],{"class":610},[605,32969,32970],{"class":607,"line":3092},[605,32971,32972],{"class":618},"      cast-shadow\n",[605,32974,32975],{"class":607,"line":3101},[605,32976,5713],{"class":610},[605,32978,32979,32981,32983],{"class":607,"line":4207},[605,32980,825],{"class":610},[605,32982,839],{"class":614},[605,32984,755],{"class":610},[605,32986,32987,32989,32991,32993,32995,32997,32999,33001],{"class":607,"line":4212},[605,32988,825],{"class":610},[605,32990,13421],{"class":614},[605,32992,3978],{"class":618},[605,32994,625],{"class":610},[605,32996,628],{"class":610},[605,32998,6738],{"class":631},[605,33000,628],{"class":610},[605,33002,755],{"class":610},[605,33004,33005,33007,33009],{"class":607,"line":4235},[605,33006,867],{"class":610},[605,33008,828],{"class":614},[605,33010,637],{"class":610},[605,33012,33013,33015],{"class":607,"line":4244},[605,33014,749],{"class":610},[605,33016,2957],{"class":614},[605,33018,33019],{"class":607,"line":4253},[605,33020,33021],{"class":618},"      receive-shadow\n",[605,33023,33024,33026,33028,33030,33032,33034,33036,33038,33040,33042,33044,33046],{"class":607,"line":4262},[605,33025,5693],{"class":610},[605,33027,1459],{"class":618},[605,33029,625],{"class":610},[605,33031,628],{"class":610},[605,33033,1466],{"class":610},[605,33035,937],{"class":791},[605,33037,3598],{"class":610},[605,33039,792],{"class":791},[605,33041,1471],{"class":610},[605,33043,937],{"class":791},[605,33045,1481],{"class":610},[605,33047,2987],{"class":610},[605,33049,33050,33052,33055,33057,33059,33061,33063,33065,33067,33069,33071],{"class":607,"line":4271},[605,33051,5693],{"class":610},[605,33053,33054],{"class":618},"rotation-x",[605,33056,625],{"class":610},[605,33058,628],{"class":610},[605,33060,4088],{"class":610},[605,33062,21593],{"class":651},[605,33064,1118],{"class":610},[605,33066,21598],{"class":651},[605,33068,21601],{"class":610},[605,33070,792],{"class":791},[605,33072,2987],{"class":610},[605,33074,33075],{"class":607,"line":14784},[605,33076,5713],{"class":610},[605,33078,33079,33081,33083,33085,33087,33089,33091,33093,33095,33097,33099,33101,33103],{"class":607,"line":14799},[605,33080,825],{"class":610},[605,33082,21624],{"class":614},[605,33084,781],{"class":610},[605,33086,1989],{"class":618},[605,33088,625],{"class":610},[605,33090,628],{"class":610},[605,33092,1466],{"class":610},[605,33094,2396],{"class":791},[605,33096,1471],{"class":610},[605,33098,2396],{"class":791},[605,33100,1481],{"class":610},[605,33102,628],{"class":610},[605,33104,755],{"class":610},[605,33106,33107,33109,33111,33113,33115,33117,33119,33122,33124],{"class":607,"line":14814},[605,33108,825],{"class":610},[605,33110,13421],{"class":614},[605,33112,781],{"class":610},[605,33114,2500],{"class":618},[605,33116,625],{"class":610},[605,33118,628],{"class":610},[605,33120,33121],{"class":791},"0xF7F7F7",[605,33123,628],{"class":610},[605,33125,755],{"class":610},[605,33127,33128,33130,33132],{"class":607,"line":14819},[605,33129,867],{"class":610},[605,33131,828],{"class":614},[605,33133,637],{"class":610},[605,33135,33136,33138],{"class":607,"line":14826},[605,33137,749],{"class":610},[605,33139,10771],{"class":614},[605,33141,33142],{"class":607,"line":14831},[605,33143,32972],{"class":618},[605,33145,33146,33148,33150,33152,33154,33156,33158,33160,33162,33164,33166,33168],{"class":607,"line":14837},[605,33147,5693],{"class":610},[605,33149,1459],{"class":618},[605,33151,625],{"class":610},[605,33153,628],{"class":610},[605,33155,1466],{"class":610},[605,33157,937],{"class":791},[605,33159,1471],{"class":610},[605,33161,1478],{"class":791},[605,33163,1471],{"class":610},[605,33165,937],{"class":791},[605,33167,1481],{"class":610},[605,33169,2987],{"class":610},[605,33171,33172],{"class":607,"line":14858},[605,33173,10816],{"class":610},[605,33175,33176,33178,33180],{"class":607,"line":14864},[605,33177,877],{"class":610},[605,33179,729],{"class":614},[605,33181,637],{"class":610},[605,33183,33184,33186,33188],{"class":607,"line":14871},[605,33185,700],{"class":610},[605,33187,718],{"class":614},[605,33189,637],{"class":610},[1299,33191,33192],{},"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":544,"searchDepth":545,"depth":546,"links":33194},[33195],{"id":30095,"depth":546,"text":30096},"Bakes shadows in the first frame for performance optimization.",{},{"title":317,"description":33196},"QK3DUMpIehZIpD5u6Zp41TLp1-R6Kjjc-USX_iID0V8",{"id":33201,"title":321,"body":33202,"description":33608,"extension":559,"links":560,"meta":33609,"navigation":562,"path":322,"seo":33610,"stem":323,"__hash__":33611},"docs/2.api/7.light-shadow/circle-shadow.md",{"type":469,"value":33203,"toc":33604},[33204,33209,33218,33220,33508,33510,33512,33602],[576,33205,33206],{},[33207,33208],"light-shadow-circle-shadow",{},[582,33210,33211,33214,33215,1118],{},[586,33212,33213],{},"\u003CCircleShadow />"," is a cheap, texture-based radial gradient on a ",[586,33216,33217],{},"THREE.PlaneGeometry",[472,33219,15],{"id":592},[594,33221,33224],{"className":596,"code":33222,"highlights":33223,"language":601,"meta":544,"style":544},"\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",[546,833],[586,33225,33226,33246,33272,33292,33300,33304,33312,33330,33338,33346,33368,33388,33396,33414,33422,33444,33452,33460,33492,33500],{"__ignoreMap":544},[605,33227,33228,33230,33232,33234,33236,33238,33240,33242,33244],{"class":607,"line":545},[605,33229,611],{"class":610},[605,33231,615],{"class":614},[605,33233,619],{"class":618},[605,33235,622],{"class":618},[605,33237,625],{"class":610},[605,33239,628],{"class":610},[605,33241,632],{"class":631},[605,33243,628],{"class":610},[605,33245,637],{"class":610},[605,33247,33249,33251,33253,33256,33258,33260,33262,33264,33266,33268,33270],{"class":33248,"line":546},[607,641],[605,33250,645],{"class":644},[605,33252,648],{"class":610},[605,33254,33255],{"class":651}," CircleShadow",[605,33257,655],{"class":610},[605,33259,658],{"class":651},[605,33261,661],{"class":610},[605,33263,664],{"class":644},[605,33265,3322],{"class":610},[605,33267,670],{"class":631},[605,33269,628],{"class":610},[605,33271,3329],{"class":610},[605,33273,33274,33276,33278,33280,33282,33284,33286,33288,33290],{"class":607,"line":676},[605,33275,645],{"class":644},[605,33277,648],{"class":610},[605,33279,683],{"class":651},[605,33281,661],{"class":610},[605,33283,664],{"class":644},[605,33285,3322],{"class":610},[605,33287,692],{"class":631},[605,33289,628],{"class":610},[605,33291,3329],{"class":610},[605,33293,33294,33296,33298],{"class":607,"line":697},[605,33295,700],{"class":610},[605,33297,615],{"class":614},[605,33299,637],{"class":610},[605,33301,33302],{"class":607,"line":707},[605,33303,710],{"emptyLinePlaceholder":562},[605,33305,33306,33308,33310],{"class":607,"line":713},[605,33307,611],{"class":610},[605,33309,718],{"class":614},[605,33311,637],{"class":610},[605,33313,33314,33316,33318,33320,33322,33324,33326,33328],{"class":607,"line":723},[605,33315,726],{"class":610},[605,33317,729],{"class":614},[605,33319,732],{"class":618},[605,33321,625],{"class":610},[605,33323,628],{"class":610},[605,33325,5040],{"class":631},[605,33327,628],{"class":610},[605,33329,637],{"class":610},[605,33331,33332,33334,33336],{"class":607,"line":746},[605,33333,749],{"class":610},[605,33335,752],{"class":614},[605,33337,755],{"class":610},[605,33339,33340,33342,33344],{"class":607,"line":758},[605,33341,749],{"class":610},[605,33343,763],{"class":614},[605,33345,755],{"class":610},[605,33347,33348,33350,33352,33354,33356,33358,33360,33362,33364,33366],{"class":607,"line":768},[605,33349,749],{"class":610},[605,33351,3912],{"class":614},[605,33353,781],{"class":610},[605,33355,1968],{"class":618},[605,33357,625],{"class":610},[605,33359,628],{"class":610},[605,33361,4088],{"class":610},[605,33363,1513],{"class":791},[605,33365,628],{"class":610},[605,33367,637],{"class":610},[605,33369,33370,33372,33374,33376,33378,33380,33382,33384,33386],{"class":607,"line":773},[605,33371,825],{"class":610},[605,33373,828],{"class":614},[605,33375,781],{"class":610},[605,33377,1968],{"class":618},[605,33379,625],{"class":610},[605,33381,628],{"class":610},[605,33383,1893],{"class":791},[605,33385,628],{"class":610},[605,33387,637],{"class":610},[605,33389,33390,33392,33394],{"class":607,"line":799},[605,33391,836],{"class":610},[605,33393,839],{"class":614},[605,33395,755],{"class":610},[605,33397,33398,33400,33402,33404,33406,33408,33410,33412],{"class":607,"line":599},[605,33399,836],{"class":610},[605,33401,6729],{"class":614},[605,33403,3978],{"class":618},[605,33405,625],{"class":610},[605,33407,628],{"class":610},[605,33409,6738],{"class":631},[605,33411,628],{"class":610},[605,33413,755],{"class":610},[605,33415,33416,33418,33420],{"class":607,"line":822},[605,33417,857],{"class":610},[605,33419,828],{"class":614},[605,33421,637],{"class":610},[605,33423,33425,33427,33430,33432,33434,33436,33438,33440,33442],{"class":33424,"line":833},[607,641],[605,33426,825],{"class":610},[605,33428,33429],{"class":614},"CircleShadow",[605,33431,781],{"class":610},[605,33433,784],{"class":618},[605,33435,625],{"class":610},[605,33437,628],{"class":610},[605,33439,9877],{"class":791},[605,33441,628],{"class":610},[605,33443,755],{"class":610},[605,33445,33446,33448,33450],{"class":607,"line":844},[605,33447,867],{"class":610},[605,33449,3912],{"class":614},[605,33451,637],{"class":610},[605,33453,33454,33456,33458],{"class":607,"line":854},[605,33455,749],{"class":610},[605,33457,3518],{"class":614},[605,33459,755],{"class":610},[605,33461,33462,33464,33466,33468,33470,33472,33474,33476,33478,33480,33482,33484,33486,33488,33490],{"class":607,"line":600},[605,33463,749],{"class":610},[605,33465,3539],{"class":614},[605,33467,781],{"class":610},[605,33469,1459],{"class":618},[605,33471,625],{"class":610},[605,33473,628],{"class":610},[605,33475,1466],{"class":610},[605,33477,937],{"class":791},[605,33479,1471],{"class":610},[605,33481,792],{"class":791},[605,33483,1471],{"class":610},[605,33485,3490],{"class":791},[605,33487,1481],{"class":610},[605,33489,628],{"class":610},[605,33491,755],{"class":610},[605,33493,33494,33496,33498],{"class":607,"line":874},[605,33495,877],{"class":610},[605,33497,729],{"class":614},[605,33499,637],{"class":610},[605,33501,33502,33504,33506],{"class":607,"line":884},[605,33503,700],{"class":610},[605,33505,718],{"class":614},[605,33507,637],{"class":610},[472,33509,894],{"id":893},[582,33511,897],{},[899,33513,33514,33524],{},[902,33515,33516],{},[905,33517,33518,33520,33522],{},[908,33519,3118],{"align":969},[908,33521,913],{"align":969},[908,33523,916],{},[918,33525,33526,33542,33555,33575,33589],{},[905,33527,33528,33532,33538],{},[923,33529,33530],{"align":969},[586,33531,2500],{},[923,33533,33534,33535],{"align":969},"Color of the shadow as a ",[586,33536,33537],{},"Color | number | string",[923,33539,33540],{},[586,33541,4844],{},[905,33543,33544,33548,33551],{},[923,33545,33546],{"align":969},[586,33547,4861],{},[923,33549,33550],{"align":969},"Opacity of the shadow",[923,33552,33553],{},[586,33554,1513],{},[905,33556,33557,33562,33571],{},[923,33558,33559],{"align":969},[586,33560,33561],{},"offset",[923,33563,33564,33565,33567,33568,33570],{"align":969},"Placement of the first radial gradient color stop. ",[586,33566,7207],{}," is the center of the circle. ",[586,33569,7085],{}," is edge.",[923,33572,33573],{},[586,33574,937],{},[905,33576,33577,33582,33585],{},[923,33578,33579],{"align":969},[586,33580,33581],{},"fog",[923,33583,33584],{"align":969},"Whether the material is affected by fog",[923,33586,33587],{},[586,33588,943],{},[905,33590,33591,33595,33598],{},[923,33592,33593],{"align":969},[586,33594,4334],{},[923,33596,33597],{"align":969},"Whether rendering the material has any effect on the depth buffer",[923,33599,33600],{},[586,33601,943],{},[1299,33603,1648],{},{"title":544,"searchDepth":545,"depth":546,"links":33605},[33606,33607],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},"Cheap, texture-based radial gradient shadow on a plane geometry.",{},{"title":321,"description":33608},"jex1uKNCt29jCPBXUCSBNgtrQ_7FSemdGlLVzRCeKOs",{"id":33613,"title":325,"body":33614,"description":34103,"extension":559,"links":560,"meta":34104,"navigation":562,"path":326,"seo":34105,"stem":327,"__hash__":34106},"docs/2.api/7.light-shadow/contact-shadows.md",{"type":469,"value":33615,"toc":34099},[33616,33621,33637,33639,33911,33913,34097],[576,33617,33618],{},[33619,33620],"light-shadow-contact-shadow",{},[582,33622,33623,33626,33627,30598,33632,1118],{},[586,33624,33625],{},"\u003CContactShadows />"," is a \"fake\", non-lighting-based shadow component. It displays shadows on a single plane. The component is based on the ",[1112,33628,33631],{"href":33629,"rel":33630},"https://threejs.org/examples/webgl_shadow_contact.html",[1116],"THREE.js contact shadows example",[1112,33633,33636],{"href":33634,"rel":33635},"https://twitter.com/mrdoob",[1116],"@mrdoob",[472,33638,15],{"id":592},[594,33640,33643],{"className":596,"code":33641,"highlights":33642,"language":601,"meta":544,"style":544},"\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",[546,599],[586,33644,33645,33665,33694,33712,33720,33724,33732,33750,33804,33824,33832,33840,33848,33895,33903],{"__ignoreMap":544},[605,33646,33647,33649,33651,33653,33655,33657,33659,33661,33663],{"class":607,"line":545},[605,33648,611],{"class":610},[605,33650,615],{"class":614},[605,33652,619],{"class":618},[605,33654,622],{"class":618},[605,33656,625],{"class":610},[605,33658,628],{"class":610},[605,33660,632],{"class":631},[605,33662,628],{"class":610},[605,33664,637],{"class":610},[605,33666,33668,33670,33672,33675,33677,33679,33681,33684,33686,33688,33690,33692],{"class":33667,"line":546},[607,641],[605,33669,645],{"class":644},[605,33671,648],{"class":610},[605,33673,33674],{"class":651}," ContactShadows",[605,33676,655],{"class":610},[605,33678,3339],{"class":651},[605,33680,655],{"class":610},[605,33682,33683],{"class":651}," TorusKnot",[605,33685,661],{"class":610},[605,33687,664],{"class":644},[605,33689,667],{"class":610},[605,33691,670],{"class":631},[605,33693,673],{"class":610},[605,33695,33696,33698,33700,33702,33704,33706,33708,33710],{"class":607,"line":676},[605,33697,645],{"class":644},[605,33699,648],{"class":610},[605,33701,683],{"class":651},[605,33703,661],{"class":610},[605,33705,664],{"class":644},[605,33707,667],{"class":610},[605,33709,692],{"class":631},[605,33711,673],{"class":610},[605,33713,33714,33716,33718],{"class":607,"line":697},[605,33715,700],{"class":610},[605,33717,615],{"class":614},[605,33719,637],{"class":610},[605,33721,33722],{"class":607,"line":707},[605,33723,710],{"emptyLinePlaceholder":562},[605,33725,33726,33728,33730],{"class":607,"line":713},[605,33727,611],{"class":610},[605,33729,718],{"class":614},[605,33731,637],{"class":610},[605,33733,33734,33736,33738,33740,33742,33744,33746,33748],{"class":607,"line":723},[605,33735,726],{"class":610},[605,33737,729],{"class":614},[605,33739,732],{"class":618},[605,33741,625],{"class":610},[605,33743,628],{"class":610},[605,33745,3985],{"class":631},[605,33747,628],{"class":610},[605,33749,637],{"class":610},[605,33751,33752,33754,33756,33758,33760,33762,33764,33766,33768,33770,33772,33774,33776,33778,33780,33782,33785,33787,33789,33791,33794,33796,33798,33800,33802],{"class":607,"line":746},[605,33753,749],{"class":610},[605,33755,3478],{"class":614},[605,33757,781],{"class":610},[605,33759,3483],{"class":618},[605,33761,625],{"class":610},[605,33763,628],{"class":610},[605,33765,792],{"class":791},[605,33767,628],{"class":610},[605,33769,781],{"class":610},[605,33771,3690],{"class":618},[605,33773,625],{"class":610},[605,33775,628],{"class":610},[605,33777,1466],{"class":610},[605,33779,937],{"class":791},[605,33781,1471],{"class":610},[605,33783,33784],{"class":791},"0.7",[605,33786,1481],{"class":610},[605,33788,628],{"class":610},[605,33790,781],{"class":610},[605,33792,33793],{"class":618},"rotation-factor",[605,33795,625],{"class":610},[605,33797,628],{"class":610},[605,33799,19149],{"class":791},[605,33801,628],{"class":610},[605,33803,637],{"class":610},[605,33805,33806,33808,33810,33812,33814,33816,33818,33820,33822],{"class":607,"line":758},[605,33807,825],{"class":610},[605,33809,28642],{"class":614},[605,33811,781],{"class":610},[605,33813,784],{"class":618},[605,33815,625],{"class":610},[605,33817,628],{"class":610},[605,33819,21019],{"class":791},[605,33821,628],{"class":610},[605,33823,637],{"class":610},[605,33825,33826,33828,33830],{"class":607,"line":768},[605,33827,836],{"class":610},[605,33829,849],{"class":614},[605,33831,755],{"class":610},[605,33833,33834,33836,33838],{"class":607,"line":773},[605,33835,857],{"class":610},[605,33837,28642],{"class":614},[605,33839,637],{"class":610},[605,33841,33842,33844,33846],{"class":607,"line":799},[605,33843,867],{"class":610},[605,33845,3478],{"class":614},[605,33847,637],{"class":610},[605,33849,33851,33853,33856,33858,33860,33862,33864,33866,33868,33870,33872,33874,33876,33879,33881,33883,33885,33887,33889,33891,33893],{"class":33850,"line":599},[607,641],[605,33852,749],{"class":610},[605,33854,33855],{"class":614},"ContactShadows",[605,33857,781],{"class":610},[605,33859,1968],{"class":618},[605,33861,625],{"class":610},[605,33863,628],{"class":610},[605,33865,4088],{"class":610},[605,33867,1893],{"class":791},[605,33869,628],{"class":610},[605,33871,3978],{"class":618},[605,33873,625],{"class":610},[605,33875,628],{"class":610},[605,33877,33878],{"class":631},"#335",[605,33880,628],{"class":610},[605,33882,781],{"class":610},[605,33884,784],{"class":618},[605,33886,625],{"class":610},[605,33888,628],{"class":610},[605,33890,23469],{"class":791},[605,33892,628],{"class":610},[605,33894,755],{"class":610},[605,33896,33897,33899,33901],{"class":607,"line":822},[605,33898,877],{"class":610},[605,33900,729],{"class":614},[605,33902,637],{"class":610},[605,33904,33905,33907,33909],{"class":607,"line":833},[605,33906,700],{"class":610},[605,33908,718],{"class":614},[605,33910,637],{"class":610},[472,33912,894],{"id":893},[899,33914,33915,33925],{},[902,33916,33917],{},[905,33918,33919,33921,33923],{},[908,33920,910],{},[908,33922,913],{},[908,33924,916],{},[918,33926,33927,33940,33953,33967,33983,33997,34011,34025,34039,34053,34067,34084],{},[905,33928,33929,33933,33936],{},[923,33930,33931],{},[586,33932,4861],{},[923,33934,33935],{},"The opacity of the shadows.",[923,33937,33938],{},[586,33939,1893],{},[905,33941,33942,33946,33949],{},[923,33943,33944],{},[586,33945,15024],{},[923,33947,33948],{},"The blur of the shadows.",[923,33950,33951],{},[586,33952,1893],{},[905,33954,33955,33959,33962],{},[923,33956,33957],{},[586,33958,2500],{},[923,33960,33961],{},"The color of the shadows.",[923,33963,33964],{},[586,33965,33966],{},"'#000000'",[905,33968,33969,33974,33979],{},[923,33970,33971],{},[586,33972,33973],{},"tint",[923,33975,33976,33977,1118],{},"If provided, the color of the \"core\" of the shadows. \"Added\" to ",[586,33978,2500],{},[923,33980,33981],{},[586,33982,1151],{},[905,33984,33985,33989,33995],{},[923,33986,33987],{},[586,33988,784],{},[923,33990,33991,33992,1118],{},"The scale of the shadows/shadow plane. Can be a number or an array of two numbers ",[586,33993,33994],{},"[x, y]",[923,33996,1478],{},[905,33998,33999,34004,34007],{},[923,34000,34001],{},[586,34002,34003],{},"width",[923,34005,34006],{},"The width of the shadow plane.",[923,34008,34009],{},[586,34010,1893],{},[905,34012,34013,34018,34021],{},[923,34014,34015],{},[586,34016,34017],{},"height",[923,34019,34020],{},"The height of the shadow plane.",[923,34022,34023],{},[586,34024,1893],{},[905,34026,34027,34032,34035],{},[923,34028,34029],{},[586,34030,34031],{},"far",[923,34033,34034],{},"The distance of the orthographic shadow camera extends above the shadow plane.",[923,34036,34037],{},[586,34038,1478],{},[905,34040,34041,34046,34049],{},[923,34042,34043],{},[586,34044,34045],{},"smooth",[923,34047,34048],{},"Whether the shadows should be smoothed to reduce artifacts.",[923,34050,34051],{},[586,34052,933],{},[905,34054,34055,34059,34062],{},[923,34056,34057],{},[586,34058,21937],{},[923,34060,34061],{},"The resolution of the shadow textures.",[923,34063,34064],{},[586,34065,34066],{},"512",[905,34068,34069,34073,34079],{},[923,34070,34071],{},[586,34072,32388],{},[923,34074,34075,34076,34078],{},"For performance, optionally stop updating shadows after ",[586,34077,32388],{}," frames.",[923,34080,34081],{},[586,34082,34083],{},"Math.POSITIVE_INFINITY",[905,34085,34086,34090,34093],{},[923,34087,34088],{},[586,34089,4334],{},[923,34091,34092],{},"Whether the shadows should write to the depth buffer or not.",[923,34094,34095],{},[586,34096,943],{},[1299,34098,1648],{},{"title":544,"searchDepth":545,"depth":546,"links":34100},[34101,34102],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},"Fake, non-lighting-based shadow component for single plane shadows.",{},{"title":325,"description":34103},"GlP_c3YfJGbj-GdkLh3rJZBnRODHYnU3bR-kC-LP69o",{"id":34108,"title":329,"body":34109,"description":35640,"extension":559,"links":560,"meta":35641,"navigation":562,"path":330,"seo":35642,"stem":331,"__hash__":35643},"docs/2.api/7.light-shadow/lensflare.md",{"type":469,"value":34110,"toc":35624},[34111,34116,34127,34129,34262,34264,34404,34408,34414,34422,34428,34485,34489,34495,34509,34516,34520,34546,34563,34569,34574,34579,34586,34592,34684,34689,34693,34698,34711,34715,34723,34780,34790,34793,34813,34822,34829,34833,34836,34844,34856,34864,34890,34897,34930,34934,34937,34981,34995,35000,35003,35006,35033,35038,35042,35045,35191,35196,35201,35390,35396,35402,35405,35408,35621],[576,34112,34113],{},[34114,34115],"light-shadow-lensflare",{},[582,34117,34118,34121,34122,1118],{},[586,34119,34120],{},"\u003CLensflare />"," wraps the ",[1112,34123,34126],{"href":34124,"rel":34125},"https://threejs.org/docs/#examples/en/objects/Lensflare",[1116],"three.js Lensflare",[472,34128,15],{"id":592},[594,34130,34133],{"className":596,"code":34131,"highlights":34132,"language":601,"meta":544,"style":544},"\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",[676,758],[586,34134,34135,34155,34173,34193,34201,34205,34213,34221,34229,34238,34246,34254],{"__ignoreMap":544},[605,34136,34137,34139,34141,34143,34145,34147,34149,34151,34153],{"class":607,"line":545},[605,34138,611],{"class":610},[605,34140,615],{"class":614},[605,34142,619],{"class":618},[605,34144,622],{"class":618},[605,34146,625],{"class":610},[605,34148,628],{"class":610},[605,34150,632],{"class":631},[605,34152,628],{"class":610},[605,34154,637],{"class":610},[605,34156,34157,34159,34161,34163,34165,34167,34169,34171],{"class":607,"line":546},[605,34158,645],{"class":644},[605,34160,648],{"class":610},[605,34162,683],{"class":651},[605,34164,661],{"class":610},[605,34166,664],{"class":644},[605,34168,667],{"class":610},[605,34170,692],{"class":631},[605,34172,673],{"class":610},[605,34174,34176,34178,34180,34183,34185,34187,34189,34191],{"class":34175,"line":676},[607,641],[605,34177,645],{"class":644},[605,34179,648],{"class":610},[605,34181,34182],{"class":651}," Lensflare",[605,34184,661],{"class":610},[605,34186,664],{"class":644},[605,34188,667],{"class":610},[605,34190,670],{"class":631},[605,34192,673],{"class":610},[605,34194,34195,34197,34199],{"class":607,"line":697},[605,34196,700],{"class":610},[605,34198,615],{"class":614},[605,34200,637],{"class":610},[605,34202,34203],{"class":607,"line":707},[605,34204,710],{"emptyLinePlaceholder":562},[605,34206,34207,34209,34211],{"class":607,"line":713},[605,34208,611],{"class":610},[605,34210,718],{"class":614},[605,34212,637],{"class":610},[605,34214,34215,34217,34219],{"class":607,"line":723},[605,34216,726],{"class":610},[605,34218,729],{"class":614},[605,34220,637],{"class":610},[605,34222,34223,34225,34227],{"class":607,"line":746},[605,34224,749],{"class":610},[605,34226,4586],{"class":614},[605,34228,637],{"class":610},[605,34230,34232,34234,34236],{"class":34231,"line":758},[607,641],[605,34233,825],{"class":610},[605,34235,329],{"class":614},[605,34237,755],{"class":610},[605,34239,34240,34242,34244],{"class":607,"line":768},[605,34241,867],{"class":610},[605,34243,4586],{"class":614},[605,34245,637],{"class":610},[605,34247,34248,34250,34252],{"class":607,"line":773},[605,34249,877],{"class":610},[605,34251,729],{"class":614},[605,34253,637],{"class":610},[605,34255,34256,34258,34260],{"class":607,"line":799},[605,34257,700],{"class":610},[605,34259,718],{"class":614},[605,34261,637],{"class":610},[472,34263,894],{"id":893},[899,34265,34266,34276],{},[902,34267,34268],{},[905,34269,34270,34272,34274],{},[908,34271,3118],{"align":969},[908,34273,913],{"align":969},[908,34275,916],{"align":969},[918,34277,34278,34293,34310,34326,34343,34358,34373,34388],{},[905,34279,34280,34284,34289],{},[923,34281,34282],{"align":969},[1673,34283,784],{},[923,34285,34286,34288],{"align":969},[586,34287,2537],{}," – scale of the lensflare",[923,34290,34291],{"align":969},[586,34292,7085],{},[905,34294,34295,34300,34306],{},[923,34296,34297],{"align":969},[1673,34298,34299],{},"elements",[923,34301,34302,34305],{"align":969},[586,34303,34304],{},"Partial<LensflareElementProps>[]"," – array of lensflare element properties",[923,34307,34308],{"align":969},[586,34309,1151],{},[905,34311,34312,34317,34322],{},[923,34313,34314],{"align":969},[1673,34315,34316],{},"seed",[923,34318,34319,34321],{"align":969},[586,34320,2537],{}," – random seed for generating random seeded elements",[923,34323,34324],{"align":969},[586,34325,1151],{},[905,34327,34328,34333,34339],{},[923,34329,34330],{"align":969},[1673,34331,34332],{},"seedProps",[923,34334,34335,34338],{"align":969},[586,34336,34337],{},"SeedProps[]"," – specifications for generating random seeded elements",[923,34340,34341],{"align":969},[586,34342,1151],{},[905,34344,34345,34349,34354],{},[923,34346,34347],{"align":969},[1673,34348,2500],{},[923,34350,34351,34353],{"align":969},[586,34352,2515],{}," – default color of lensflare elements",[923,34355,34356],{"align":969},[586,34357,1151],{},[905,34359,34360,34364,34369],{},[923,34361,34362],{"align":969},[1673,34363,6945],{},[923,34365,34366,34368],{"align":969},[586,34367,2537],{}," – default distance of lensflare elements from flare center",[923,34370,34371],{"align":969},[586,34372,1151],{},[905,34374,34375,34379,34384],{},[923,34376,34377],{"align":969},[1673,34378,10233],{},[923,34380,34381,34383],{"align":969},[586,34382,2537],{}," – default size of lensflare elements",[923,34385,34386],{"align":969},[586,34387,1151],{},[905,34389,34390,34394,34400],{},[923,34391,34392],{"align":969},[1673,34393,13433],{},[923,34395,34396,34399],{"align":969},[586,34397,34398],{},"Texture string[]"," – default texture of lensflare elements",[923,34401,34402],{"align":969},[586,34403,1151],{},[472,34405,34406],{"id":34299},[586,34407,34299],{},[582,34409,34410,34411,34413],{},"You can specify individual lensflare element properties directly using the component's ",[586,34412,34299],{}," prop.",[582,34415,2253,34416,34418,34419,1118],{},[586,34417,34299],{}," prop expects an instance of ",[586,34420,34421],{},"(Partial\u003CLensflareElementProps>)[]",[582,34423,34424,34425,34427],{},"Every object in ",[586,34426,34299],{}," may have any (or none) of the following properties.",[899,34429,34430,34438],{},[902,34431,34432],{},[905,34433,34434,34436],{},[908,34435,3118],{"align":969},[908,34437,913],{"align":969},[918,34439,34440,34452,34463,34474],{},[905,34441,34442,34446],{},[923,34443,34444],{"align":969},[1673,34445,13433],{},[923,34447,34448,34451],{"align":969},[586,34449,34450],{},"string | Texture"," - an image URL or texture to use on the lensflare element",[905,34453,34454,34458],{},[923,34455,34456],{"align":969},[1673,34457,2500],{},[923,34459,34460,34462],{"align":969},[586,34461,2515],{}," - color of the lensflare element",[905,34464,34465,34469],{},[923,34466,34467],{"align":969},[1673,34468,6945],{},[923,34470,34471,34473],{"align":969},[586,34472,2537],{}," - distance of the lensflare element from the lensflare center",[905,34475,34476,34480],{},[923,34477,34478],{"align":969},[1673,34479,10233],{},[923,34481,34482,34484],{"align":969},[586,34483,2537],{}," - size of the lensflare element",[472,34486,34487],{"id":34316},[586,34488,34316],{},[582,34490,34491,34492,34494],{},"Adding a ",[586,34493,34316],{}," prop to a component enables seeded random element generation.",[582,34496,2253,34497,34499,34500,34505,34506,1118],{},[586,34498,34316],{}," prop is used as the \"seed\" in a ",[1112,34501,34504],{"href":34502,"rel":34503},"https://en.wikipedia.org/wiki/Pseudorandom_number_generator",[1116],"pseudorandom number generator (PRNG)",". The PRNG is in turn used to build lensflare elements, by selecting values from an array of ",[586,34507,34508],{},"SeedProps",[2046,34510,34511],{},[582,34512,34513,34514,1118],{},"If you set a seed but not seedProps, the component will fall back to the default, built-in SeedProps",[605,34515],{},[7473,34517,34519],{"id":34518},"example","Example",[594,34521,34523],{"className":596,"code":34522,"language":601,"meta":544,"style":544},"\u003CLensflare :seed=\"seedRef\" />\n",[586,34524,34525],{"__ignoreMap":544},[605,34526,34527,34529,34531,34533,34535,34537,34539,34542,34544],{"class":607,"line":545},[605,34528,611],{"class":610},[605,34530,329],{"class":614},[605,34532,781],{"class":610},[605,34534,34316],{"class":618},[605,34536,625],{"class":610},[605,34538,628],{"class":610},[605,34540,34541],{"class":651},"seedRef",[605,34543,628],{"class":610},[605,34545,755],{"class":610},[582,34547,34548,34549,16781,34552,1471,34554,1471,34556,1471,34558,1471,34560,34562],{},"Below, the results of setting ",[586,34550,34551],{},"seedRef.value",[586,34553,937],{},[586,34555,1893],{},[586,34557,792],{},[586,34559,4160],{},[586,34561,3490],{},", respectively.",[582,34564,34565],{},[3267,34566],{"alt":34567,"src":34568},"Lensflare seeds 0-4","/cientos/lensflare_seeds.png",[472,34570,34572],{"id":34571},"seedprops",[586,34573,34332],{},[582,34575,34491,34576,34578],{},[586,34577,34332],{}," prop to the component enables seeded random element generation.",[582,34580,2253,34581,34418,34583,34585],{},[586,34582,34332],{},[586,34584,34337],{},". It specifies rules and acceptable values for creating random lensflare elements.",[582,34587,34588,34589,34591],{},"Every element in ",[586,34590,34332],{}," has this shape.",[899,34593,34594,34604],{},[902,34595,34596],{},[905,34597,34598,34600,34602],{},[908,34599,3118],{"align":969},[908,34601,913],{"align":969},[908,34603,26998],{},[918,34605,34606,34619,34632,34645,34658,34671],{},[905,34607,34608,34612,34617],{},[923,34609,34610],{"align":969},[1673,34611,13433],{},[923,34613,34614,34616],{"align":969},[586,34615,15348],{}," - array of 1 or more image URLs; a single texture will be selected per generated element",[923,34618,27017],{},[905,34620,34621,34625,34630],{},[923,34622,34623],{"align":969},[1673,34624,2500],{},[923,34626,34627,34629],{"align":969},[586,34628,23523],{}," - array of 1 or more colors; a single color will be selected per generated element",[923,34631,27017],{},[905,34633,34634,34638,34643],{},[923,34635,34636],{"align":969},[1673,34637,6945],{},[923,34639,34640,34642],{"align":969},[586,34641,22132],{}," - minimum and maximum allowable distance from the flare center",[923,34644,27017],{},[905,34646,34647,34651,34656],{},[923,34648,34649],{"align":969},[1673,34650,10233],{},[923,34652,34653,34655],{"align":969},[586,34654,22132],{}," - minimum and maximum allowable size",[923,34657,27017],{},[905,34659,34660,34664,34669],{},[923,34661,34662],{"align":969},[1673,34663,14616],{},[923,34665,34666,34668],{"align":969},[586,34667,22132],{}," - minimum and maximum allowable number of elements to generate",[923,34670,27017],{},[905,34672,34673,34677,34682],{},[923,34674,34675],{"align":969},[1673,34676,34316],{},[923,34678,34679,34681],{"align":969},[586,34680,2537],{}," - if set, when this entry is processed, the random number generator with a combination of the incoming seed and this seed",[923,34683,27051],{},[2046,34685,34686],{},[582,34687,34688],{},"If you set seedProps but not seed, the component will fall back to a default seed of 0.",[472,34690,34692],{"id":34691},"random-elements-and-non-random-properties","Random elements and non-random properties",[582,34694,34695,34697],{},[586,34696,34120],{}," 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.",[594,34699,34701],{"className":596,"code":34700,"language":601,"meta":544,"style":544},"\u003CLensflare />\n",[586,34702,34703],{"__ignoreMap":544},[605,34704,34705,34707,34709],{"class":607,"line":545},[605,34706,611],{"class":610},[605,34708,329],{"class":614},[605,34710,755],{"class":610},[7473,34712,34714],{"id":34713},"non-random-properties","Non-random properties",[582,34716,34717,34718,34413],{},"You can provide a list of lensflare element properties using the ",[1112,34719,34721],{"href":34720},"#elements",[586,34722,34299],{},[594,34724,34726],{"className":596,"code":34725,"language":601,"meta":544,"style":544},"\u003CLensflare :elements=\"[{ color: 'red' }, { color: 'yellow' }]\" />\n",[586,34727,34728],{"__ignoreMap":544},[605,34729,34730,34732,34734,34736,34738,34740,34742,34744,34747,34749,34751,34753,34755,34757,34760,34762,34764,34766,34768,34770,34772,34774,34776,34778],{"class":607,"line":545},[605,34731,611],{"class":610},[605,34733,329],{"class":614},[605,34735,781],{"class":610},[605,34737,34299],{"class":618},[605,34739,625],{"class":610},[605,34741,628],{"class":610},[605,34743,1466],{"class":651},[605,34745,34746],{"class":610},"{",[605,34748,3978],{"class":614},[605,34750,1190],{"class":610},[605,34752,667],{"class":610},[605,34754,29784],{"class":631},[605,34756,5536],{"class":610},[605,34758,34759],{"class":610}," },",[605,34761,648],{"class":610},[605,34763,3978],{"class":614},[605,34765,1190],{"class":610},[605,34767,667],{"class":610},[605,34769,29928],{"class":631},[605,34771,5536],{"class":610},[605,34773,661],{"class":610},[605,34775,1481],{"class":651},[605,34777,628],{"class":610},[605,34779,755],{"class":610},[582,34781,34782,34783,1471,34785,1471,34787,34789],{},"This will produce a lensflare with 2 elements. The first element will be red. The second will be yellow. The unspecified properties – ",[586,34784,6945],{},[586,34786,10233],{},[586,34788,13433],{}," – will be filled in by the built-in defaults in this case.",[582,34791,34792],{},"You can also provide default props which will overwrite random generated props.",[594,34794,34796],{"className":596,"code":34795,"language":601,"meta":544,"style":544},"\u003CLensflare color:\"red\" />\n",[586,34797,34798],{"__ignoreMap":544},[605,34799,34800,34802,34804,34807,34810],{"class":607,"line":545},[605,34801,611],{"class":610},[605,34803,329],{"class":614},[605,34805,34806],{"class":618}," color:",[605,34808,34809],{"class":651},"\"red\" ",[605,34811,34812],{"class":610},"/>\n",[582,34814,34815,34816,34818,34819,34821],{},"Since ",[586,34817,34299],{}," is not defined here, the component will generate random lensflare elements. The specified ",[586,34820,2500],{}," prop – \"red\" – will overwrite the color property of the generated lensflare elements.",[582,34823,1110,34824,34828],{},[1112,34825,34827],{"href":34826},"#precedence","precedence"," for details about how properties are filled in.",[7473,34830,34832],{"id":34831},"random-elements","Random elements",[582,34834,34835],{},"You can let the component generate random elements ...",[582,34837,34838,34839],{},"... by not adding an ",[1112,34840,34841,34843],{"href":34720},[586,34842,34299],{}," prop",[594,34845,34846],{"className":596,"code":34700,"language":601,"meta":544,"style":544},[586,34847,34848],{"__ignoreMap":544},[605,34849,34850,34852,34854],{"class":607,"line":545},[605,34851,611],{"class":610},[605,34853,329],{"class":614},[605,34855,755],{"class":610},[582,34857,34858,34859],{},"... by adding a ",[1112,34860,34862,34843],{"href":34861},"#seed",[586,34863,34316],{},[594,34865,34867],{"className":596,"code":34866,"language":601,"meta":544,"style":544},"\u003CLensflare :seed=\"7127\" />\n",[586,34868,34869],{"__ignoreMap":544},[605,34870,34871,34873,34875,34877,34879,34881,34883,34886,34888],{"class":607,"line":545},[605,34872,611],{"class":610},[605,34874,329],{"class":614},[605,34876,781],{"class":610},[605,34878,34316],{"class":618},[605,34880,625],{"class":610},[605,34882,628],{"class":610},[605,34884,34885],{"class":791},"7127",[605,34887,628],{"class":610},[605,34889,755],{"class":610},[582,34891,34858,34892],{},[1112,34893,34895,34843],{"href":34894},"#seedprops",[586,34896,34332],{},[594,34898,34900],{"className":596,"code":34899,"language":601,"meta":544,"style":544},"\u003CLensflare :seedProps=\"[{...}, {...}]\" />\n",[586,34901,34902],{"__ignoreMap":544},[605,34903,34904,34906,34908,34910,34912,34914,34916,34918,34921,34924,34926,34928],{"class":607,"line":545},[605,34905,611],{"class":610},[605,34907,329],{"class":614},[605,34909,781],{"class":610},[605,34911,34332],{"class":618},[605,34913,625],{"class":610},[605,34915,628],{"class":610},[605,34917,1466],{"class":651},[605,34919,34920],{"class":610},"{...},",[605,34922,34923],{"class":610}," {...}",[605,34925,1481],{"class":651},[605,34927,628],{"class":610},[605,34929,755],{"class":610},[7473,34931,34933],{"id":34932},"mixing-random-elements-and-non-random-properties","Mixing random elements and non-random properties",[582,34935,34936],{},"You can mix your own properties and random elements.",[594,34938,34940],{"className":596,"code":34939,"language":601,"meta":544,"style":544},"\u003CLensflare :elements=\"[{...}, {...}]\" :seed=\"8193\" />\n",[586,34941,34942],{"__ignoreMap":544},[605,34943,34944,34946,34948,34950,34952,34954,34956,34958,34960,34962,34964,34966,34968,34970,34972,34974,34977,34979],{"class":607,"line":545},[605,34945,611],{"class":610},[605,34947,329],{"class":614},[605,34949,781],{"class":610},[605,34951,34299],{"class":618},[605,34953,625],{"class":610},[605,34955,628],{"class":610},[605,34957,1466],{"class":651},[605,34959,34920],{"class":610},[605,34961,34923],{"class":610},[605,34963,1481],{"class":651},[605,34965,628],{"class":610},[605,34967,781],{"class":610},[605,34969,34316],{"class":618},[605,34971,625],{"class":610},[605,34973,628],{"class":610},[605,34975,34976],{"class":791},"8193",[605,34978,628],{"class":610},[605,34980,755],{"class":610},[582,34982,34983,34984,4431,34986,34988,34989,34991,34992,1118],{},"Here, both ",[586,34985,34299],{},[586,34987,34316],{}," are defined. The component will generate random elements and overwrite their properties with the contents of ",[586,34990,34299],{},", according to the ",[1112,34993,34994],{"href":34826},"order of precedence",[2046,34996,34997],{},[582,34998,34999],{},"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.",[7473,35001,35002],{"id":34827},"Precedence",[582,35004,35005],{},"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.",[7605,35007,35008,35012,35023,35030],{},[3139,35009,35010],{},[586,35011,34299],{},[3139,35013,35014,1471,35016,1471,35018,1471,35020,35022],{},[586,35015,2500],{},[586,35017,6945],{},[586,35019,10233],{},[586,35021,13433],{}," – default element properties",[3139,35024,35025,1471,35027,35029],{},[586,35026,34316],{},[586,35028,34332],{}," – generated random elements",[3139,35031,35032],{},"built-in default element properties",[2046,35034,35035],{},[582,35036,35037],{},"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.",[7473,35039,35041],{"id":35040},"precedence-example","Precedence example",[582,35043,35044],{},"Here's an example of precedence. Assume this is in our vue template.",[594,35046,35048],{"className":596,"code":35047,"language":601,"meta":544,"style":544},"\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  :size=\"256\"\n  :seed=\"1\"\n/>\n",[586,35049,35050,35057,35071,35098,35123,35130,35146,35159,35173,35187],{"__ignoreMap":544},[605,35051,35052,35054],{"class":607,"line":545},[605,35053,611],{"class":610},[605,35055,35056],{"class":614},"Lensflare\n",[605,35058,35059,35062,35064,35066,35068],{"class":607,"line":546},[605,35060,35061],{"class":610},"  :",[605,35063,34299],{"class":618},[605,35065,625],{"class":610},[605,35067,628],{"class":610},[605,35069,35070],{"class":651},"[\n",[605,35072,35073,35076,35078,35080,35082,35084,35086,35088,35090,35093,35095],{"class":607,"line":676},[605,35074,35075],{"class":610},"    {",[605,35077,10233],{"class":614},[605,35079,1190],{"class":610},[605,35081,34066],{"class":791},[605,35083,655],{"class":610},[605,35085,13359],{"class":651},[605,35087,625],{"class":610},[605,35089,5536],{"class":610},[605,35091,35092],{"class":631},"http://example.net/circle.png",[605,35094,5536],{"class":610},[605,35096,35097],{"class":610},"},\n",[605,35099,35100,35102,35104,35106,35108,35110,35112,35114,35117,35119,35121],{"class":607,"line":697},[605,35101,35075],{"class":610},[605,35103,2500],{"class":614},[605,35105,1190],{"class":610},[605,35107,5536],{"class":610},[605,35109,29928],{"class":631},[605,35111,5536],{"class":610},[605,35113,655],{"class":610},[605,35115,35116],{"class":614}," distance",[605,35118,1190],{"class":610},[605,35120,1513],{"class":791},[605,35122,1297],{"class":610},[605,35124,35125,35128],{"class":607,"line":707},[605,35126,35127],{"class":651},"  ]",[605,35129,2987],{"class":610},[605,35131,35132,35134,35136,35138,35140,35143],{"class":607,"line":713},[605,35133,35061],{"class":610},[605,35135,13433],{"class":618},[605,35137,625],{"class":610},[605,35139,628],{"class":610},[605,35141,35142],{"class":651},"http:",[605,35144,35145],{"class":1181},"//example.net/ring.png\"\n",[605,35147,35148,35151,35153,35155,35157],{"class":607,"line":723},[605,35149,35150],{"class":651},"  color",[605,35152,625],{"class":610},[605,35154,628],{"class":610},[605,35156,29784],{"class":618},[605,35158,2987],{"class":651},[605,35160,35161,35163,35165,35167,35169,35171],{"class":607,"line":746},[605,35162,35061],{"class":610},[605,35164,10233],{"class":618},[605,35166,625],{"class":610},[605,35168,628],{"class":610},[605,35170,21945],{"class":791},[605,35172,2987],{"class":610},[605,35174,35175,35177,35179,35181,35183,35185],{"class":607,"line":758},[605,35176,35061],{"class":610},[605,35178,34316],{"class":618},[605,35180,625],{"class":610},[605,35182,628],{"class":610},[605,35184,1893],{"class":791},[605,35186,2987],{"class":610},[605,35188,35189],{"class":607,"line":768},[605,35190,34812],{"class":651},[582,35192,35193,35195],{},[586,35194,34316],{}," is defined, so the component will produce random elements.",[582,35197,35198,35199,1190],{},"Assume the random element generator produces this, based on ",[586,35200,34316],{},[594,35202,35206],{"className":35203,"code":35204,"language":35205,"meta":544,"style":544},"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",[586,35207,35208,35212,35216,35230,35241,35253,35269,35273,35277,35291,35301,35312,35326,35330,35334,35348,35358,35368,35382,35386],{"__ignoreMap":544},[605,35209,35210],{"class":607,"line":545},[605,35211,35070],{"class":651},[605,35213,35214],{"class":607,"line":546},[605,35215,30928],{"class":610},[605,35217,35218,35220,35222,35224,35226,35228],{"class":607,"line":676},[605,35219,17685],{"class":614},[605,35221,1190],{"class":610},[605,35223,667],{"class":610},[605,35225,3985],{"class":631},[605,35227,5536],{"class":610},[605,35229,14031],{"class":610},[605,35231,35232,35235,35237,35239],{"class":607,"line":697},[605,35233,35234],{"class":614},"    distance",[605,35236,1190],{"class":610},[605,35238,11773],{"class":791},[605,35240,14031],{"class":610},[605,35242,35243,35246,35248,35251],{"class":607,"line":707},[605,35244,35245],{"class":614},"    size",[605,35247,1190],{"class":610},[605,35249,35250],{"class":791}," 1024",[605,35252,14031],{"class":610},[605,35254,35255,35258,35260,35262,35265,35267],{"class":607,"line":713},[605,35256,35257],{"class":614},"    texture",[605,35259,1190],{"class":610},[605,35261,667],{"class":610},[605,35263,35264],{"class":631},"http://example.net/rays.png",[605,35266,5536],{"class":610},[605,35268,14031],{"class":610},[605,35270,35271],{"class":607,"line":723},[605,35272,17650],{"class":610},[605,35274,35275],{"class":607,"line":746},[605,35276,30928],{"class":610},[605,35278,35279,35281,35283,35285,35287,35289],{"class":607,"line":758},[605,35280,17685],{"class":614},[605,35282,1190],{"class":610},[605,35284,667],{"class":610},[605,35286,3985],{"class":631},[605,35288,5536],{"class":610},[605,35290,14031],{"class":610},[605,35292,35293,35295,35297,35299],{"class":607,"line":768},[605,35294,35234],{"class":614},[605,35296,1190],{"class":610},[605,35298,22969],{"class":791},[605,35300,14031],{"class":610},[605,35302,35303,35305,35307,35310],{"class":607,"line":773},[605,35304,35245],{"class":614},[605,35306,1190],{"class":610},[605,35308,35309],{"class":791}," 512",[605,35311,14031],{"class":610},[605,35313,35314,35316,35318,35320,35322,35324],{"class":607,"line":799},[605,35315,35257],{"class":614},[605,35317,1190],{"class":610},[605,35319,667],{"class":610},[605,35321,35092],{"class":631},[605,35323,5536],{"class":610},[605,35325,14031],{"class":610},[605,35327,35328],{"class":607,"line":599},[605,35329,17650],{"class":610},[605,35331,35332],{"class":607,"line":822},[605,35333,30928],{"class":610},[605,35335,35336,35338,35340,35342,35344,35346],{"class":607,"line":833},[605,35337,17685],{"class":614},[605,35339,1190],{"class":610},[605,35341,667],{"class":610},[605,35343,3985],{"class":631},[605,35345,5536],{"class":610},[605,35347,14031],{"class":610},[605,35349,35350,35352,35354,35356],{"class":607,"line":844},[605,35351,35234],{"class":614},[605,35353,1190],{"class":610},[605,35355,24579],{"class":791},[605,35357,14031],{"class":610},[605,35359,35360,35362,35364,35366],{"class":607,"line":854},[605,35361,35245],{"class":614},[605,35363,1190],{"class":610},[605,35365,35309],{"class":791},[605,35367,14031],{"class":610},[605,35369,35370,35372,35374,35376,35378,35380],{"class":607,"line":600},[605,35371,35257],{"class":614},[605,35373,1190],{"class":610},[605,35375,667],{"class":610},[605,35377,35092],{"class":631},[605,35379,5536],{"class":610},[605,35381,14031],{"class":610},[605,35383,35384],{"class":607,"line":874},[605,35385,17650],{"class":610},[605,35387,35388],{"class":607,"line":884},[605,35389,14056],{"class":651},[582,35391,35392,35393,35395],{},"When random elements are mixed with ",[586,35394,34299],{},", the final number of elements in the lensflare is determined by whichever is longer.",[582,35397,35398,35399,35401],{},"Here, ",[586,35400,34299],{}," contains 2 entries. The random element generator produced 3. So the resulting lensflare will have 3 elements.",[582,35403,35404],{},"Therefore, resulting lensflare will have 3 elements.",[582,35406,35407],{},"The resulting 3 lensflare elements will have the following properties, from the following sources:",[594,35409,35411],{"className":35203,"code":35410,"language":35205,"meta":544,"style":544},"[\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: 256, // from component prop `size`\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: 256, // from component prop `size`\n    texture: 'http://example.net/ring.png', // from component prop `texture`\n  },\n]\n",[586,35412,35413,35417,35421,35438,35451,35463,35479,35483,35487,35504,35517,35531,35549,35553,35557,35573,35585,35597,35613,35617],{"__ignoreMap":544},[605,35414,35415],{"class":607,"line":545},[605,35416,35070],{"class":651},[605,35418,35419],{"class":607,"line":546},[605,35420,30928],{"class":610},[605,35422,35423,35425,35427,35429,35431,35433,35435],{"class":607,"line":676},[605,35424,17685],{"class":614},[605,35426,1190],{"class":610},[605,35428,667],{"class":610},[605,35430,29928],{"class":631},[605,35432,5536],{"class":610},[605,35434,655],{"class":610},[605,35436,35437],{"class":1181}," // from `elements`\n",[605,35439,35440,35442,35444,35446,35448],{"class":607,"line":697},[605,35441,35234],{"class":614},[605,35443,1190],{"class":610},[605,35445,11773],{"class":791},[605,35447,655],{"class":610},[605,35449,35450],{"class":1181}," // from random element generator\n",[605,35452,35453,35455,35457,35459,35461],{"class":607,"line":707},[605,35454,35245],{"class":614},[605,35456,1190],{"class":610},[605,35458,35309],{"class":791},[605,35460,655],{"class":610},[605,35462,35437],{"class":1181},[605,35464,35465,35467,35469,35471,35473,35475,35477],{"class":607,"line":713},[605,35466,35257],{"class":614},[605,35468,1190],{"class":610},[605,35470,667],{"class":610},[605,35472,35092],{"class":631},[605,35474,5536],{"class":610},[605,35476,655],{"class":610},[605,35478,35437],{"class":1181},[605,35480,35481],{"class":607,"line":723},[605,35482,17650],{"class":610},[605,35484,35485],{"class":607,"line":746},[605,35486,30928],{"class":610},[605,35488,35489,35491,35493,35495,35497,35499,35501],{"class":607,"line":758},[605,35490,17685],{"class":614},[605,35492,1190],{"class":610},[605,35494,667],{"class":610},[605,35496,29784],{"class":631},[605,35498,5536],{"class":610},[605,35500,655],{"class":610},[605,35502,35503],{"class":1181}," // from component prop `color`\n",[605,35505,35506,35508,35510,35513,35515],{"class":607,"line":768},[605,35507,35234],{"class":614},[605,35509,1190],{"class":610},[605,35511,35512],{"class":791}," 0.5",[605,35514,655],{"class":610},[605,35516,35437],{"class":1181},[605,35518,35519,35521,35523,35526,35528],{"class":607,"line":773},[605,35520,35245],{"class":614},[605,35522,1190],{"class":610},[605,35524,35525],{"class":791}," 256",[605,35527,655],{"class":610},[605,35529,35530],{"class":1181}," // from component prop `size`\n",[605,35532,35533,35535,35537,35539,35542,35544,35546],{"class":607,"line":799},[605,35534,35257],{"class":614},[605,35536,1190],{"class":610},[605,35538,667],{"class":610},[605,35540,35541],{"class":631},"http://example.net/ring.png",[605,35543,5536],{"class":610},[605,35545,655],{"class":610},[605,35547,35548],{"class":1181}," // from component prop `texture`\n",[605,35550,35551],{"class":607,"line":599},[605,35552,17650],{"class":610},[605,35554,35555],{"class":607,"line":822},[605,35556,30928],{"class":610},[605,35558,35559,35561,35563,35565,35567,35569,35571],{"class":607,"line":833},[605,35560,17685],{"class":614},[605,35562,1190],{"class":610},[605,35564,667],{"class":610},[605,35566,29784],{"class":631},[605,35568,5536],{"class":610},[605,35570,655],{"class":610},[605,35572,35503],{"class":1181},[605,35574,35575,35577,35579,35581,35583],{"class":607,"line":844},[605,35576,35234],{"class":614},[605,35578,1190],{"class":610},[605,35580,24579],{"class":791},[605,35582,655],{"class":610},[605,35584,35450],{"class":1181},[605,35586,35587,35589,35591,35593,35595],{"class":607,"line":854},[605,35588,35245],{"class":614},[605,35590,1190],{"class":610},[605,35592,35525],{"class":791},[605,35594,655],{"class":610},[605,35596,35530],{"class":1181},[605,35598,35599,35601,35603,35605,35607,35609,35611],{"class":607,"line":600},[605,35600,35257],{"class":614},[605,35602,1190],{"class":610},[605,35604,667],{"class":610},[605,35606,35541],{"class":631},[605,35608,5536],{"class":610},[605,35610,655],{"class":610},[605,35612,35548],{"class":1181},[605,35614,35615],{"class":607,"line":874},[605,35616,17650],{"class":610},[605,35618,35619],{"class":607,"line":884},[605,35620,14056],{"class":651},[1299,35622,35623],{},"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":544,"searchDepth":545,"depth":546,"links":35625},[35626,35627,35628,35629,35632,35633],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},{"id":34299,"depth":546,"text":34299},{"id":34316,"depth":546,"text":34316,"children":35630},[35631],{"id":34518,"depth":676,"text":34519},{"id":34571,"depth":546,"text":34332},{"id":34691,"depth":546,"text":34692,"children":35634},[35635,35636,35637,35638,35639],{"id":34713,"depth":676,"text":34714},{"id":34831,"depth":676,"text":34832},{"id":34932,"depth":676,"text":34933},{"id":34827,"depth":676,"text":35002},{"id":35040,"depth":676,"text":35041},"Wraps the three.js Lensflare with seeded random element generation.",{},{"title":329,"description":35640},"ZLWCWc8GAVxup0UJ0m5K5kbMFYzCmnCrtI4fB97ZQW4",{"id":35645,"title":333,"body":35646,"description":36337,"extension":559,"links":560,"meta":36338,"navigation":562,"path":334,"seo":36339,"stem":335,"__hash__":36340},"docs/2.api/7.light-shadow/randomized-lights.md",{"type":469,"value":35647,"toc":36333},[35648,35653,35660,35668,35670,36168,36170,36331],[2558,35649,35650],{},[35651,35652],"light-shadow-randomized-lights",{},[582,35654,35655,35657,35658,1118],{},[586,35656,32545],{}," internally creates multiple lights and jiggles them. You would normally add it as a child of ",[586,35659,32023],{},[582,35661,35662,35663,1118],{},"It is based on this ",[1112,35664,35667],{"href":35665,"rel":35666},"http://drei.docs.pmnd.rs/staging/randomized-light",[1116],"Drei component",[472,35669,15],{"id":592},[594,35671,35674],{"className":596,"code":35672,"highlights":35673,"language":601,"meta":544,"style":544},"\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",[697,844,854,600,874,884,2952,2960,2990],[586,35675,35676,35696,35716,35722,35730,35737,35744,35751,35765,35773,35777,35785,35796,35828,35836,35884,35892,35908,35924,35939,35958,35974,36001,36017,36021,36029,36039,36047,36065,36073,36128,36136,36144,36152,36160],{"__ignoreMap":544},[605,35677,35678,35680,35682,35684,35686,35688,35690,35692,35694],{"class":607,"line":545},[605,35679,611],{"class":610},[605,35681,615],{"class":614},[605,35683,619],{"class":618},[605,35685,622],{"class":618},[605,35687,625],{"class":610},[605,35689,628],{"class":610},[605,35691,632],{"class":631},[605,35693,628],{"class":610},[605,35695,637],{"class":610},[605,35697,35698,35700,35702,35704,35706,35708,35710,35712,35714],{"class":607,"line":546},[605,35699,645],{"class":644},[605,35701,648],{"class":610},[605,35703,683],{"class":651},[605,35705,661],{"class":610},[605,35707,664],{"class":644},[605,35709,3322],{"class":610},[605,35711,692],{"class":631},[605,35713,628],{"class":610},[605,35715,3329],{"class":610},[605,35717,35718,35720],{"class":607,"line":676},[605,35719,645],{"class":644},[605,35721,1176],{"class":610},[605,35723,35725,35728],{"class":35724,"line":697},[607,641],[605,35726,35727],{"class":651},"  RandomizedLights",[605,35729,14031],{"class":610},[605,35731,35732,35735],{"class":607,"line":707},[605,35733,35734],{"class":651},"  AccumulativeShadows",[605,35736,14031],{"class":610},[605,35738,35739,35742],{"class":607,"line":713},[605,35740,35741],{"class":651},"  OrbitControls",[605,35743,14031],{"class":610},[605,35745,35746,35749],{"class":607,"line":723},[605,35747,35748],{"class":651},"  Plane",[605,35750,14031],{"class":610},[605,35752,35753,35755,35757,35759,35761,35763],{"class":607,"line":746},[605,35754,5544],{"class":610},[605,35756,664],{"class":644},[605,35758,3322],{"class":610},[605,35760,670],{"class":631},[605,35762,628],{"class":610},[605,35764,3329],{"class":610},[605,35766,35767,35769,35771],{"class":607,"line":758},[605,35768,700],{"class":610},[605,35770,615],{"class":614},[605,35772,637],{"class":610},[605,35774,35775],{"class":607,"line":768},[605,35776,710],{"emptyLinePlaceholder":562},[605,35778,35779,35781,35783],{"class":607,"line":773},[605,35780,611],{"class":610},[605,35782,718],{"class":614},[605,35784,637],{"class":610},[605,35786,35787,35789,35791,35794],{"class":607,"line":799},[605,35788,726],{"class":610},[605,35790,729],{"class":614},[605,35792,35793],{"class":618}," shadows",[605,35795,637],{"class":610},[605,35797,35798,35800,35802,35804,35806,35808,35810,35812,35814,35816,35818,35820,35822,35824,35826],{"class":607,"line":599},[605,35799,749],{"class":610},[605,35801,752],{"class":614},[605,35803,781],{"class":610},[605,35805,1459],{"class":618},[605,35807,625],{"class":610},[605,35809,628],{"class":610},[605,35811,1466],{"class":610},[605,35813,937],{"class":791},[605,35815,1471],{"class":610},[605,35817,4160],{"class":791},[605,35819,1471],{"class":610},[605,35821,2396],{"class":791},[605,35823,1481],{"class":610},[605,35825,628],{"class":610},[605,35827,755],{"class":610},[605,35829,35830,35832,35834],{"class":607,"line":822},[605,35831,749],{"class":610},[605,35833,763],{"class":614},[605,35835,755],{"class":610},[605,35837,35838,35840,35843,35845,35847,35849,35851,35853,35855,35857,35859,35861,35863,35865,35868,35870,35872,35874,35876,35878,35880,35882],{"class":607,"line":833},[605,35839,749],{"class":610},[605,35841,35842],{"class":614},"AccumulativeShadows",[605,35844,781],{"class":610},[605,35846,32273],{"class":618},[605,35848,625],{"class":610},[605,35850,628],{"class":610},[605,35852,6028],{"class":791},[605,35854,628],{"class":610},[605,35856,3978],{"class":618},[605,35858,625],{"class":610},[605,35860,628],{"class":610},[605,35862,4045],{"class":631},[605,35864,628],{"class":610},[605,35866,35867],{"class":618}," once",[605,35869,781],{"class":610},[605,35871,1968],{"class":618},[605,35873,625],{"class":610},[605,35875,628],{"class":610},[605,35877,4088],{"class":610},[605,35879,1893],{"class":791},[605,35881,628],{"class":610},[605,35883,637],{"class":610},[605,35885,35887,35889],{"class":35886,"line":844},[607,641],[605,35888,825],{"class":610},[605,35890,35891],{"class":614},"RandomizedLights\n",[605,35893,35895,35897,35900,35902,35904,35906],{"class":35894,"line":854},[607,641],[605,35896,2993],{"class":610},[605,35898,35899],{"class":618},"ambient",[605,35901,625],{"class":610},[605,35903,628],{"class":610},[605,35905,7041],{"class":791},[605,35907,2987],{"class":610},[605,35909,35911,35913,35916,35918,35920,35922],{"class":35910,"line":600},[607,641],[605,35912,2993],{"class":610},[605,35914,35915],{"class":618},"bias",[605,35917,625],{"class":610},[605,35919,628],{"class":610},[605,35921,1522],{"class":791},[605,35923,2987],{"class":610},[605,35925,35927,35929,35931,35933,35935,35937],{"class":35926,"line":874},[607,641],[605,35928,2993],{"class":610},[605,35930,5100],{"class":618},[605,35932,625],{"class":610},[605,35934,628],{"class":610},[605,35936,15063],{"class":791},[605,35938,2987],{"class":610},[605,35940,35942,35944,35946,35948,35950,35952,35954,35956],{"class":35941,"line":884},[607,641],[605,35943,2993],{"class":610},[605,35945,1886],{"class":618},[605,35947,625],{"class":610},[605,35949,628],{"class":610},[605,35951,21593],{"class":651},[605,35953,1118],{"class":610},[605,35955,21598],{"class":651},[605,35957,2987],{"class":610},[605,35959,35961,35963,35966,35968,35970,35972],{"class":35960,"line":2952},[607,641],[605,35962,2993],{"class":610},[605,35964,35965],{"class":618},"map-size",[605,35967,625],{"class":610},[605,35969,628],{"class":610},[605,35971,32519],{"class":791},[605,35973,2987],{"class":610},[605,35975,35977,35979,35981,35983,35985,35987,35989,35991,35993,35995,35997,35999],{"class":35976,"line":2960},[607,641],[605,35978,2993],{"class":610},[605,35980,1459],{"class":618},[605,35982,625],{"class":610},[605,35984,628],{"class":610},[605,35986,1466],{"class":610},[605,35988,2396],{"class":791},[605,35990,1471],{"class":610},[605,35992,2396],{"class":791},[605,35994,3598],{"class":610},[605,35996,1478],{"class":791},[605,35998,1481],{"class":610},[605,36000,2987],{"class":610},[605,36002,36004,36006,36009,36011,36013,36015],{"class":36003,"line":2990},[607,641],[605,36005,2993],{"class":610},[605,36007,36008],{"class":618},"radius",[605,36010,625],{"class":610},[605,36012,628],{"class":610},[605,36014,792],{"class":791},[605,36016,2987],{"class":610},[605,36018,36019],{"class":607,"line":3007},[605,36020,3050],{"class":610},[605,36022,36023,36025,36027],{"class":607,"line":3022},[605,36024,867],{"class":610},[605,36026,35842],{"class":614},[605,36028,637],{"class":610},[605,36030,36031,36033,36035,36037],{"class":607,"line":3047},[605,36032,749],{"class":610},[605,36034,828],{"class":614},[605,36036,9856],{"class":618},[605,36038,637],{"class":610},[605,36040,36041,36043,36045],{"class":607,"line":2591},[605,36042,825],{"class":610},[605,36044,839],{"class":614},[605,36046,755],{"class":610},[605,36048,36049,36051,36053,36055,36057,36059,36061,36063],{"class":607,"line":3062},[605,36050,825],{"class":610},[605,36052,6729],{"class":614},[605,36054,3978],{"class":618},[605,36056,625],{"class":610},[605,36058,628],{"class":610},[605,36060,6738],{"class":631},[605,36062,628],{"class":610},[605,36064,755],{"class":610},[605,36066,36067,36069,36071],{"class":607,"line":3092},[605,36068,867],{"class":610},[605,36070,828],{"class":614},[605,36072,637],{"class":610},[605,36074,36075,36077,36079,36081,36083,36085,36087,36089,36091,36093,36095,36097,36099,36101,36103,36106,36108,36110,36112,36114,36116,36118,36120,36122,36124,36126],{"class":607,"line":3101},[605,36076,749],{"class":610},[605,36078,237],{"class":614},[605,36080,781],{"class":610},[605,36082,1459],{"class":618},[605,36084,625],{"class":610},[605,36086,628],{"class":610},[605,36088,1466],{"class":610},[605,36090,937],{"class":791},[605,36092,3598],{"class":610},[605,36094,792],{"class":791},[605,36096,1471],{"class":610},[605,36098,937],{"class":791},[605,36100,1481],{"class":610},[605,36102,628],{"class":610},[605,36104,36105],{"class":618}," receive-shadow",[605,36107,781],{"class":610},[605,36109,1989],{"class":618},[605,36111,625],{"class":610},[605,36113,628],{"class":610},[605,36115,1466],{"class":610},[605,36117,1478],{"class":791},[605,36119,1471],{"class":610},[605,36121,1478],{"class":791},[605,36123,1481],{"class":610},[605,36125,628],{"class":610},[605,36127,637],{"class":610},[605,36129,36130,36132,36134],{"class":607,"line":4207},[605,36131,825],{"class":610},[605,36133,13421],{"class":614},[605,36135,755],{"class":610},[605,36137,36138,36140,36142],{"class":607,"line":4212},[605,36139,867],{"class":610},[605,36141,237],{"class":614},[605,36143,637],{"class":610},[605,36145,36146,36148,36150],{"class":607,"line":4235},[605,36147,749],{"class":610},[605,36149,3518],{"class":614},[605,36151,755],{"class":610},[605,36153,36154,36156,36158],{"class":607,"line":4244},[605,36155,877],{"class":610},[605,36157,729],{"class":614},[605,36159,637],{"class":610},[605,36161,36162,36164,36166],{"class":607,"line":4253},[605,36163,700],{"class":610},[605,36165,718],{"class":614},[605,36167,637],{"class":610},[472,36169,894],{"id":893},[899,36171,36172,36182],{},[902,36173,36174],{},[905,36175,36176,36178,36180],{},[908,36177,910],{},[908,36179,913],{},[908,36181,916],{},[918,36183,36184,36197,36210,36223,36236,36249,36262,36276,36289,36303,36317],{},[905,36185,36186,36190,36193],{},[923,36187,36188],{},[586,36189,5100],{},[923,36191,36192],{},"Number of lights",[923,36194,36195],{},[586,36196,15063],{},[905,36198,36199,36203,36206],{},[923,36200,36201],{},[586,36202,36008],{},[923,36204,36205],{},"Radius of the jiggle, higher values make softer light",[923,36207,36208],{},[586,36209,1893],{},[905,36211,36212,36216,36219],{},[923,36213,36214],{},[586,36215,1886],{},[923,36217,36218],{},"Light intensity",[923,36220,36221],{},[586,36222,4913],{},[905,36224,36225,36229,36232],{},[923,36226,36227],{},[586,36228,35899],{},[923,36230,36231],{},"\"Ambient occlusion\" to directional light ratio, lower values mean less AO",[923,36233,36234],{},[586,36235,1513],{},[905,36237,36238,36242,36245],{},[923,36239,36240],{},[586,36241,11918],{},[923,36243,36244],{},"If the lights cast shadows",[923,36246,36247],{},[586,36248,933],{},[905,36250,36251,36255,36258],{},[923,36252,36253],{},[586,36254,35915],{},[923,36256,36257],{},"Default shadow bias",[923,36259,36260],{},[586,36261,937],{},[905,36263,36264,36269,36272],{},[923,36265,36266],{},[586,36267,36268],{},"mapSize",[923,36270,36271],{},"Size of the lights' shadow map",[923,36273,36274],{},[586,36275,34066],{},[905,36277,36278,36282,36285],{},[923,36279,36280],{},[586,36281,10233],{},[923,36283,36284],{},"Size of the lights' shadow camera frustum",[923,36286,36287],{},[586,36288,1478],{},[905,36290,36291,36296,36299],{},[923,36292,36293],{},[586,36294,36295],{},"near",[923,36297,36298],{},"Lights' shadow camera near value",[923,36300,36301],{},[586,36302,1513],{},[905,36304,36305,36309,36312],{},[923,36306,36307],{},[586,36308,34031],{},[923,36310,36311],{},"Lights' shadow camera far value",[923,36313,36314],{},[586,36315,36316],{},"500",[905,36318,36319,36323,36326],{},[923,36320,36321],{},[586,36322,1459],{},[923,36324,36325],{},"Position",[923,36327,36328],{},[586,36329,36330],{},"[5, 5, -10]",[1299,36332,1648],{},{"title":544,"searchDepth":545,"depth":546,"links":36334},[36335,36336],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},"Creates multiple lights and jiggles them for softer shadows.",{},{"title":333,"description":36337},"baGOsq_IYKuFBxflpLvSmGExVBUODXQrO5EKfecXWks",{"id":36342,"title":337,"body":36343,"description":36792,"extension":559,"links":560,"meta":36793,"navigation":562,"path":338,"seo":36794,"stem":339,"__hash__":36795},"docs/2.api/7.light-shadow/soft-shadows.md",{"type":469,"value":36344,"toc":36788},[36345,36350,36353,36355,36734,36736,36786],[576,36346,36347],{},[36348,36349],"light-shadow-soft-shadows",{},[582,36351,36352],{},"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.",[472,36354,15],{"id":592},[594,36356,36359],{"className":596,"code":36357,"highlights":36358,"language":601,"meta":544,"style":544},"\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",[546,600],[586,36360,36361,36381,36416,36436,36444,36448,36456,36476,36528,36550,36568,36576,36584,36638,36646,36654,36688,36708,36718,36726],{"__ignoreMap":544},[605,36362,36363,36365,36367,36369,36371,36373,36375,36377,36379],{"class":607,"line":545},[605,36364,611],{"class":610},[605,36366,615],{"class":614},[605,36368,619],{"class":618},[605,36370,622],{"class":618},[605,36372,625],{"class":610},[605,36374,628],{"class":610},[605,36376,632],{"class":631},[605,36378,628],{"class":610},[605,36380,637],{"class":610},[605,36382,36384,36386,36388,36391,36393,36395,36397,36399,36401,36404,36406,36408,36410,36412,36414],{"class":36383,"line":546},[607,641],[605,36385,645],{"class":644},[605,36387,648],{"class":610},[605,36389,36390],{"class":651}," SoftShadows",[605,36392,655],{"class":610},[605,36394,3339],{"class":651},[605,36396,655],{"class":610},[605,36398,33683],{"class":651},[605,36400,655],{"class":610},[605,36402,36403],{"class":651}," Plane",[605,36405,661],{"class":610},[605,36407,664],{"class":644},[605,36409,3322],{"class":610},[605,36411,670],{"class":631},[605,36413,628],{"class":610},[605,36415,3329],{"class":610},[605,36417,36418,36420,36422,36424,36426,36428,36430,36432,36434],{"class":607,"line":676},[605,36419,645],{"class":644},[605,36421,648],{"class":610},[605,36423,683],{"class":651},[605,36425,661],{"class":610},[605,36427,664],{"class":644},[605,36429,3322],{"class":610},[605,36431,692],{"class":631},[605,36433,628],{"class":610},[605,36435,3329],{"class":610},[605,36437,36438,36440,36442],{"class":607,"line":697},[605,36439,700],{"class":610},[605,36441,615],{"class":614},[605,36443,637],{"class":610},[605,36445,36446],{"class":607,"line":707},[605,36447,710],{"emptyLinePlaceholder":562},[605,36449,36450,36452,36454],{"class":607,"line":713},[605,36451,611],{"class":610},[605,36453,718],{"class":614},[605,36455,637],{"class":610},[605,36457,36458,36460,36462,36464,36466,36468,36470,36472,36474],{"class":607,"line":723},[605,36459,726],{"class":610},[605,36461,729],{"class":614},[605,36463,35793],{"class":618},[605,36465,732],{"class":618},[605,36467,625],{"class":610},[605,36469,628],{"class":610},[605,36471,5040],{"class":631},[605,36473,628],{"class":610},[605,36475,637],{"class":610},[605,36477,36478,36480,36482,36484,36486,36488,36490,36492,36494,36496,36498,36500,36502,36504,36506,36508,36510,36512,36514,36516,36518,36520,36522,36524,36526],{"class":607,"line":746},[605,36479,749],{"class":610},[605,36481,3478],{"class":614},[605,36483,781],{"class":610},[605,36485,3483],{"class":618},[605,36487,625],{"class":610},[605,36489,628],{"class":610},[605,36491,3490],{"class":791},[605,36493,628],{"class":610},[605,36495,781],{"class":610},[605,36497,3690],{"class":618},[605,36499,625],{"class":610},[605,36501,628],{"class":610},[605,36503,1466],{"class":610},[605,36505,937],{"class":791},[605,36507,1471],{"class":610},[605,36509,33784],{"class":791},[605,36511,1481],{"class":610},[605,36513,628],{"class":610},[605,36515,781],{"class":610},[605,36517,33793],{"class":618},[605,36519,625],{"class":610},[605,36521,628],{"class":610},[605,36523,19149],{"class":791},[605,36525,628],{"class":610},[605,36527,637],{"class":610},[605,36529,36530,36532,36534,36536,36538,36540,36542,36544,36546,36548],{"class":607,"line":758},[605,36531,825],{"class":610},[605,36533,28642],{"class":614},[605,36535,9856],{"class":618},[605,36537,781],{"class":610},[605,36539,784],{"class":618},[605,36541,625],{"class":610},[605,36543,628],{"class":610},[605,36545,21019],{"class":791},[605,36547,628],{"class":610},[605,36549,637],{"class":610},[605,36551,36552,36554,36556,36558,36560,36562,36564,36566],{"class":607,"line":768},[605,36553,836],{"class":610},[605,36555,13421],{"class":614},[605,36557,3978],{"class":618},[605,36559,625],{"class":610},[605,36561,628],{"class":610},[605,36563,6738],{"class":631},[605,36565,628],{"class":610},[605,36567,755],{"class":610},[605,36569,36570,36572,36574],{"class":607,"line":773},[605,36571,857],{"class":610},[605,36573,28642],{"class":614},[605,36575,637],{"class":610},[605,36577,36578,36580,36582],{"class":607,"line":799},[605,36579,867],{"class":610},[605,36581,3478],{"class":614},[605,36583,637],{"class":610},[605,36585,36586,36588,36590,36592,36594,36596,36598,36600,36602,36604,36606,36608,36610,36612,36614,36616,36618,36620,36622,36624,36626,36628,36630,36632,36634,36636],{"class":607,"line":599},[605,36587,749],{"class":610},[605,36589,237],{"class":614},[605,36591,781],{"class":610},[605,36593,1459],{"class":618},[605,36595,625],{"class":610},[605,36597,628],{"class":610},[605,36599,1466],{"class":610},[605,36601,937],{"class":791},[605,36603,3598],{"class":610},[605,36605,792],{"class":791},[605,36607,1471],{"class":610},[605,36609,937],{"class":791},[605,36611,1481],{"class":610},[605,36613,628],{"class":610},[605,36615,36105],{"class":618},[605,36617,781],{"class":610},[605,36619,1989],{"class":618},[605,36621,625],{"class":610},[605,36623,628],{"class":610},[605,36625,1466],{"class":610},[605,36627,1478],{"class":791},[605,36629,1471],{"class":610},[605,36631,1478],{"class":791},[605,36633,1481],{"class":610},[605,36635,628],{"class":610},[605,36637,637],{"class":610},[605,36639,36640,36642,36644],{"class":607,"line":822},[605,36641,825],{"class":610},[605,36643,13421],{"class":614},[605,36645,755],{"class":610},[605,36647,36648,36650,36652],{"class":607,"line":833},[605,36649,867],{"class":610},[605,36651,237],{"class":614},[605,36653,637],{"class":610},[605,36655,36656,36658,36660,36662,36664,36666,36668,36670,36672,36674,36676,36678,36680,36682,36684,36686],{"class":607,"line":844},[605,36657,749],{"class":610},[605,36659,3539],{"class":614},[605,36661,9856],{"class":618},[605,36663,781],{"class":610},[605,36665,1459],{"class":618},[605,36667,625],{"class":610},[605,36669,628],{"class":610},[605,36671,1466],{"class":610},[605,36673,937],{"class":791},[605,36675,1471],{"class":610},[605,36677,4160],{"class":791},[605,36679,1471],{"class":610},[605,36681,937],{"class":791},[605,36683,1481],{"class":610},[605,36685,628],{"class":610},[605,36687,755],{"class":610},[605,36689,36690,36692,36694,36696,36698,36700,36702,36704,36706],{"class":607,"line":854},[605,36691,749],{"class":610},[605,36693,3518],{"class":614},[605,36695,781],{"class":610},[605,36697,1886],{"class":618},[605,36699,625],{"class":610},[605,36701,628],{"class":610},[605,36703,1513],{"class":791},[605,36705,628],{"class":610},[605,36707,755],{"class":610},[605,36709,36711,36713,36716],{"class":36710,"line":600},[607,641],[605,36712,749],{"class":610},[605,36714,36715],{"class":614},"SoftShadows",[605,36717,755],{"class":610},[605,36719,36720,36722,36724],{"class":607,"line":874},[605,36721,877],{"class":610},[605,36723,729],{"class":614},[605,36725,637],{"class":610},[605,36727,36728,36730,36732],{"class":607,"line":884},[605,36729,700],{"class":610},[605,36731,718],{"class":614},[605,36733,637],{"class":610},[472,36735,894],{"id":893},[899,36737,36738,36748],{},[902,36739,36740],{},[905,36741,36742,36744,36746],{},[908,36743,3118],{"align":969},[908,36745,913],{"align":969},[908,36747,916],{},[918,36749,36750,36761,36773],{},[905,36751,36752,36754,36757],{},[923,36753,10233],{"align":969},[923,36755,36756],{"align":969},"Size of the light source (the larger the softer the light)",[923,36758,36759],{},[586,36760,25056],{},[905,36762,36763,36766,36769],{},[923,36764,36765],{"align":969},"samples",[923,36767,36768],{"align":969},"Number of samples (more samples less noise but more expensive)",[923,36770,36771],{},[586,36772,1478],{},[905,36774,36775,36778,36781],{},[923,36776,36777],{"align":969},"focus",[923,36779,36780],{"align":969},"Depth focus, use it to shift the focal point (where the shadow is the sharpest)",[923,36782,36783,36785],{},[586,36784,937],{}," (the beginning)",[1299,36787,1648],{},{"title":544,"searchDepth":545,"depth":546,"links":36789},[36790,36791],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},"Injects percent closer soft shadows (PCSS) into THREE's shader chunk.",{},{"title":337,"description":36792},"Jcog66jVOp0ZbwScDyRmLoOj7ZJPGe-FsPG7UiW8n8I",[36797,37827,38397,38692,39046,39591,40637,41053,41464,43372,44065],{"id":36798,"title":347,"body":36799,"description":37823,"extension":559,"links":560,"meta":37824,"navigation":562,"path":348,"seo":37825,"stem":349,"__hash__":37826},"docs/2.api/8.staging/1.environment.md",{"type":469,"value":36800,"toc":37812},[36801,36806,36816,36822,36824,37041,37048,37074,37079,37083,37090,37288,37292,37298,37322,37326,37329,37458,37462,37468,37574,37580,37591,37593,37800,37803,37809],[576,36802,36803],{},[36804,36805],"staging-environment",{},[582,36807,36808,36809,36812,36813,1118],{},"Is a component abstraction that automatically sets up a global cubemap, which affects the default ",[586,36810,36811],{},"scene.environment",", and optionally ",[586,36814,36815],{},"scene.background",[582,36817,36818,36819,36821],{},"It uses the composable ",[1112,36820,351],{"href":352}," under the hood to load the cubemap.",[472,36823,15],{"id":592},[594,36825,36827],{"className":596,"code":36826,"language":601,"meta":544,"style":544},"\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",[586,36828,36829,36849,36867,36885,36893,36897,36905,36913,36921,36927,36939,36951,36962,36973,36984,36995,37006,37013,37017,37025,37033],{"__ignoreMap":544},[605,36830,36831,36833,36835,36837,36839,36841,36843,36845,36847],{"class":607,"line":545},[605,36832,611],{"class":610},[605,36834,615],{"class":614},[605,36836,619],{"class":618},[605,36838,622],{"class":618},[605,36840,625],{"class":610},[605,36842,628],{"class":610},[605,36844,632],{"class":631},[605,36846,628],{"class":610},[605,36848,637],{"class":610},[605,36850,36851,36853,36855,36857,36859,36861,36863,36865],{"class":607,"line":546},[605,36852,645],{"class":644},[605,36854,648],{"class":610},[605,36856,683],{"class":651},[605,36858,661],{"class":610},[605,36860,664],{"class":644},[605,36862,667],{"class":610},[605,36864,692],{"class":631},[605,36866,673],{"class":610},[605,36868,36869,36871,36873,36875,36877,36879,36881,36883],{"class":607,"line":676},[605,36870,645],{"class":644},[605,36872,648],{"class":610},[605,36874,14286],{"class":651},[605,36876,661],{"class":610},[605,36878,664],{"class":644},[605,36880,667],{"class":610},[605,36882,670],{"class":631},[605,36884,673],{"class":610},[605,36886,36887,36889,36891],{"class":607,"line":697},[605,36888,700],{"class":610},[605,36890,615],{"class":614},[605,36892,637],{"class":610},[605,36894,36895],{"class":607,"line":707},[605,36896,710],{"emptyLinePlaceholder":562},[605,36898,36899,36901,36903],{"class":607,"line":713},[605,36900,611],{"class":610},[605,36902,718],{"class":614},[605,36904,637],{"class":610},[605,36906,36907,36909,36911],{"class":607,"line":723},[605,36908,726],{"class":610},[605,36910,729],{"class":614},[605,36912,637],{"class":610},[605,36914,36915,36917,36919],{"class":607,"line":746},[605,36916,749],{"class":610},[605,36918,14995],{"class":614},[605,36920,637],{"class":610},[605,36922,36923,36925],{"class":607,"line":758},[605,36924,825],{"class":610},[605,36926,18825],{"class":614},[605,36928,36929,36931,36933,36935,36937],{"class":607,"line":768},[605,36930,2993],{"class":610},[605,36932,18837],{"class":618},[605,36934,625],{"class":610},[605,36936,628],{"class":610},[605,36938,35070],{"class":610},[605,36940,36941,36944,36947,36949],{"class":607,"line":773},[605,36942,36943],{"class":610},"          '",[605,36945,36946],{"class":631},"/px.jpg",[605,36948,5536],{"class":610},[605,36950,14031],{"class":610},[605,36952,36953,36955,36958,36960],{"class":607,"line":799},[605,36954,36943],{"class":610},[605,36956,36957],{"class":631},"/nx.jpg",[605,36959,5536],{"class":610},[605,36961,14031],{"class":610},[605,36963,36964,36966,36969,36971],{"class":607,"line":599},[605,36965,36943],{"class":610},[605,36967,36968],{"class":631},"/py.jpg",[605,36970,5536],{"class":610},[605,36972,14031],{"class":610},[605,36974,36975,36977,36980,36982],{"class":607,"line":822},[605,36976,36943],{"class":610},[605,36978,36979],{"class":631},"/ny.jpg",[605,36981,5536],{"class":610},[605,36983,14031],{"class":610},[605,36985,36986,36988,36991,36993],{"class":607,"line":833},[605,36987,36943],{"class":610},[605,36989,36990],{"class":631},"/pz.jpg",[605,36992,5536],{"class":610},[605,36994,14031],{"class":610},[605,36996,36997,36999,37002,37004],{"class":607,"line":844},[605,36998,36943],{"class":610},[605,37000,37001],{"class":631},"/nz.jpg",[605,37003,5536],{"class":610},[605,37005,14031],{"class":610},[605,37007,37008,37011],{"class":607,"line":854},[605,37009,37010],{"class":610},"        ]",[605,37012,2987],{"class":610},[605,37014,37015],{"class":607,"line":600},[605,37016,3050],{"class":610},[605,37018,37019,37021,37023],{"class":607,"line":874},[605,37020,867],{"class":610},[605,37022,14995],{"class":614},[605,37024,637],{"class":610},[605,37026,37027,37029,37031],{"class":607,"line":884},[605,37028,877],{"class":610},[605,37030,729],{"class":614},[605,37032,637],{"class":610},[605,37034,37035,37037,37039],{"class":607,"line":2952},[605,37036,700],{"class":610},[605,37038,718],{"class":614},[605,37040,637],{"class":610},[582,37042,37043,37044,37047],{},"You can also pass the ",[586,37045,37046],{},".hdr"," file directly:",[594,37049,37051],{"className":596,"code":37050,"language":601,"meta":544,"style":544},"\u003CSuspense>\n   \u003CEnvironment files=\"/sunset.hdr\" />\n\u003C/Suspense>\n",[586,37052,37053,37061,37066],{"__ignoreMap":544},[605,37054,37055,37057,37059],{"class":607,"line":545},[605,37056,611],{"class":610},[605,37058,14995],{"class":614},[605,37060,637],{"class":610},[605,37062,37063],{"class":607,"line":546},[605,37064,37065],{"class":651},"   \u003CEnvironment files=\"/sunset.hdr\" />\n",[605,37067,37068,37070,37072],{"class":607,"line":676},[605,37069,700],{"class":610},[605,37071,14995],{"class":614},[605,37073,637],{"class":610},[582,37075,37076],{},[3267,37077],{"alt":347,"src":37078},"/cientos/envmaps.png",[472,37080,37082],{"id":37081},"texture-reference","Texture reference",[582,37084,11624,37085,1680,37087,34843],{},[586,37086,11627],{},[586,37088,37089],{},"\u003CEnvironment />",[594,37091,37094],{"className":596,"code":37092,"highlights":37093,"language":601,"meta":544,"style":544},"\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",[697,713,758,822,854],[586,37095,37096,37116,37134,37138,37152,37156,37172,37186,37192,37201,37205,37213,37232,37240,37249,37271,37279],{"__ignoreMap":544},[605,37097,37098,37100,37102,37104,37106,37108,37110,37112,37114],{"class":607,"line":545},[605,37099,611],{"class":610},[605,37101,615],{"class":614},[605,37103,619],{"class":618},[605,37105,622],{"class":618},[605,37107,625],{"class":610},[605,37109,628],{"class":610},[605,37111,632],{"class":631},[605,37113,628],{"class":610},[605,37115,637],{"class":610},[605,37117,37118,37120,37122,37124,37126,37128,37130,37132],{"class":607,"line":546},[605,37119,645],{"class":644},[605,37121,648],{"class":610},[605,37123,14286],{"class":651},[605,37125,661],{"class":610},[605,37127,664],{"class":644},[605,37129,667],{"class":610},[605,37131,670],{"class":631},[605,37133,673],{"class":610},[605,37135,37136],{"class":607,"line":676},[605,37137,710],{"emptyLinePlaceholder":562},[605,37139,37141,37143,37146,37148,37150],{"class":37140,"line":697},[607,641],[605,37142,2689],{"class":618},[605,37144,37145],{"class":651}," environmentRef ",[605,37147,625],{"class":610},[605,37149,9716],{"class":2800},[605,37151,2846],{"class":651},[605,37153,37154],{"class":607,"line":707},[605,37155,710],{"emptyLinePlaceholder":562},[605,37157,37159,37161,37164,37166,37168,37170],{"class":37158,"line":713},[607,641],[605,37160,5485],{"class":2800},[605,37162,37163],{"class":651},"(environmentRef",[605,37165,655],{"class":610},[605,37167,13359],{"class":5495},[605,37169,5501],{"class":618},[605,37171,1176],{"class":610},[605,37173,37174,37176,37178,37180,37182,37184],{"class":607,"line":723},[605,37175,13674],{"class":651},[605,37177,1118],{"class":610},[605,37179,13679],{"class":2800},[605,37181,2970],{"class":614},[605,37183,13433],{"class":651},[605,37185,5539],{"class":614},[605,37187,37188,37190],{"class":607,"line":746},[605,37189,5544],{"class":610},[605,37191,5539],{"class":651},[605,37193,37195,37197,37199],{"class":37194,"line":758},[607,641],[605,37196,700],{"class":610},[605,37198,615],{"class":614},[605,37200,637],{"class":610},[605,37202,37203],{"class":607,"line":768},[605,37204,710],{"emptyLinePlaceholder":562},[605,37206,37207,37209,37211],{"class":607,"line":773},[605,37208,611],{"class":610},[605,37210,718],{"class":614},[605,37212,637],{"class":610},[605,37214,37215,37217,37219,37221,37223,37225,37228,37230],{"class":607,"line":799},[605,37216,726],{"class":610},[605,37218,347],{"class":614},[605,37220,5431],{"class":618},[605,37222,625],{"class":610},[605,37224,628],{"class":610},[605,37226,37227],{"class":631},"environmentRef",[605,37229,628],{"class":610},[605,37231,755],{"class":610},[605,37233,37234,37236,37238],{"class":607,"line":599},[605,37235,726],{"class":610},[605,37237,828],{"class":614},[605,37239,637],{"class":610},[605,37241,37243,37245,37247],{"class":37242,"line":822},[607,641],[605,37244,749],{"class":610},[605,37246,4735],{"class":614},[605,37248,755],{"class":610},[605,37250,37251,37253,37255,37257,37260,37262,37264,37267,37269],{"class":607,"line":833},[605,37252,749],{"class":610},[605,37254,13421],{"class":614},[605,37256,781],{"class":610},[605,37258,37259],{"class":618},"env-map",[605,37261,625],{"class":610},[605,37263,628],{"class":610},[605,37265,37266],{"class":651},"envMap",[605,37268,628],{"class":610},[605,37270,755],{"class":610},[605,37272,37273,37275,37277],{"class":607,"line":844},[605,37274,877],{"class":610},[605,37276,828],{"class":614},[605,37278,637],{"class":610},[605,37280,37282,37284,37286],{"class":37281,"line":854},[607,641],[605,37283,700],{"class":610},[605,37285,718],{"class":614},[605,37287,637],{"class":610},[472,37289,37291],{"id":37290},"presets","Presets",[582,37293,37294,37295,2068],{},"You can use one of the available presets by passing the ",[586,37296,37297],{},"preset",[594,37299,37301],{"className":596,"code":37300,"language":601,"meta":544,"style":544},"\u003CEnvironment preset=\"city\" />\n",[586,37302,37303],{"__ignoreMap":544},[605,37304,37305,37307,37309,37311,37313,37315,37318,37320],{"class":607,"line":545},[605,37306,611],{"class":610},[605,37308,347],{"class":614},[605,37310,15007],{"class":618},[605,37312,625],{"class":610},[605,37314,628],{"class":610},[605,37316,37317],{"class":631},"city",[605,37319,628],{"class":610},[605,37321,755],{"class":610},[472,37323,37325],{"id":37324},"environment-rotation","Environment Rotation",[582,37327,37328],{},"The environment component supports both background and environment rotation. You can control them independently or sync them together:",[594,37330,37332],{"className":596,"code":37331,"language":601,"meta":544,"style":544},"\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",[586,37333,37334,37342,37348,37362,37377,37412,37446,37450],{"__ignoreMap":544},[605,37335,37336,37338,37340],{"class":607,"line":545},[605,37337,611],{"class":610},[605,37339,718],{"class":614},[605,37341,637],{"class":610},[605,37343,37344,37346],{"class":607,"line":546},[605,37345,726],{"class":610},[605,37347,18825],{"class":614},[605,37349,37350,37353,37355,37357,37360],{"class":607,"line":676},[605,37351,37352],{"class":618},"    preset",[605,37354,625],{"class":610},[605,37356,628],{"class":610},[605,37358,37359],{"class":631},"sunset",[605,37361,2987],{"class":610},[605,37363,37364,37366,37369,37371,37373,37375],{"class":607,"line":697},[605,37365,7392],{"class":610},[605,37367,37368],{"class":618},"background",[605,37370,625],{"class":610},[605,37372,628],{"class":610},[605,37374,933],{"class":3870},[605,37376,2987],{"class":610},[605,37378,37379,37381,37384,37386,37388,37390,37392,37394,37396,37398,37400,37402,37404,37406,37408,37410],{"class":607,"line":707},[605,37380,7392],{"class":610},[605,37382,37383],{"class":618},"background-rotation",[605,37385,625],{"class":610},[605,37387,628],{"class":610},[605,37389,1466],{"class":610},[605,37391,937],{"class":791},[605,37393,1471],{"class":610},[605,37395,21593],{"class":651},[605,37397,1118],{"class":610},[605,37399,21598],{"class":651},[605,37401,21601],{"class":610},[605,37403,792],{"class":791},[605,37405,1471],{"class":610},[605,37407,937],{"class":791},[605,37409,1481],{"class":610},[605,37411,2987],{"class":610},[605,37413,37414,37416,37418,37420,37422,37424,37426,37428,37430,37432,37434,37436,37438,37440,37442,37444],{"class":607,"line":713},[605,37415,7392],{"class":610},[605,37417,37324],{"class":618},[605,37419,625],{"class":610},[605,37421,628],{"class":610},[605,37423,1466],{"class":610},[605,37425,937],{"class":791},[605,37427,1471],{"class":610},[605,37429,21593],{"class":651},[605,37431,1118],{"class":610},[605,37433,21598],{"class":651},[605,37435,21601],{"class":610},[605,37437,3490],{"class":791},[605,37439,1471],{"class":610},[605,37441,937],{"class":791},[605,37443,1481],{"class":610},[605,37445,2987],{"class":610},[605,37447,37448],{"class":607,"line":723},[605,37449,7459],{"class":610},[605,37451,37452,37454,37456],{"class":607,"line":746},[605,37453,700],{"class":610},[605,37455,718],{"class":614},[605,37457,637],{"class":610},[7473,37459,37461],{"id":37460},"syncing-rotations","Syncing Rotations",[582,37463,37464,37465,2068],{},"You can sync the environment rotation with the background rotation using the ",[586,37466,37467],{},"syncMaterials",[594,37469,37471],{"className":596,"code":37470,"language":601,"meta":544,"style":544},"\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",[586,37472,37473,37481,37487,37499,37513,37528,37562,37566],{"__ignoreMap":544},[605,37474,37475,37477,37479],{"class":607,"line":545},[605,37476,611],{"class":610},[605,37478,718],{"class":614},[605,37480,637],{"class":610},[605,37482,37483,37485],{"class":607,"line":546},[605,37484,726],{"class":610},[605,37486,18825],{"class":614},[605,37488,37489,37491,37493,37495,37497],{"class":607,"line":676},[605,37490,37352],{"class":618},[605,37492,625],{"class":610},[605,37494,628],{"class":610},[605,37496,37359],{"class":631},[605,37498,2987],{"class":610},[605,37500,37501,37503,37505,37507,37509,37511],{"class":607,"line":697},[605,37502,7392],{"class":610},[605,37504,37368],{"class":618},[605,37506,625],{"class":610},[605,37508,628],{"class":610},[605,37510,933],{"class":3870},[605,37512,2987],{"class":610},[605,37514,37515,37517,37520,37522,37524,37526],{"class":607,"line":707},[605,37516,7392],{"class":610},[605,37518,37519],{"class":618},"sync-materials",[605,37521,625],{"class":610},[605,37523,628],{"class":610},[605,37525,933],{"class":3870},[605,37527,2987],{"class":610},[605,37529,37530,37532,37534,37536,37538,37540,37542,37544,37546,37548,37550,37552,37554,37556,37558,37560],{"class":607,"line":713},[605,37531,7392],{"class":610},[605,37533,37383],{"class":618},[605,37535,625],{"class":610},[605,37537,628],{"class":610},[605,37539,1466],{"class":610},[605,37541,937],{"class":791},[605,37543,1471],{"class":610},[605,37545,21593],{"class":651},[605,37547,1118],{"class":610},[605,37549,21598],{"class":651},[605,37551,21601],{"class":610},[605,37553,792],{"class":791},[605,37555,1471],{"class":610},[605,37557,937],{"class":791},[605,37559,1481],{"class":610},[605,37561,2987],{"class":610},[605,37563,37564],{"class":607,"line":723},[605,37565,7459],{"class":610},[605,37567,37568,37570,37572],{"class":607,"line":746},[605,37569,700],{"class":610},[605,37571,718],{"class":614},[605,37573,637],{"class":610},[582,37575,37576,37577,37579],{},"When ",[586,37578,37467],{}," is enabled:",[3136,37581,37582,37585,37588],{},[3139,37583,37584],{},"The environment rotation will automatically match the background rotation",[3139,37586,37587],{},"All materials in the scene will update to reflect the new rotation",[3139,37589,37590],{},"This ensures visual consistency between the background and environment reflections",[472,37592,894],{"id":893},[899,37594,37595,37605],{},[902,37596,37597],{},[905,37598,37599,37601,37603],{},[908,37600,910],{"align":969},[908,37602,913],{"align":969},[908,37604,916],{},[918,37606,37607,37620,37633,37653,37668,37679,37692,37703,37714,37725,37736,37748,37760,37775,37789],{},[905,37608,37609,37613,37616],{},[923,37610,37611],{"align":969},[586,37612,18837],{},[923,37614,37615],{"align":969},"Array of 6 urls to images, one for each side of the CubeTexture, or an HDR file",[923,37617,37618],{},[586,37619,1151],{},[905,37621,37622,37626,37629],{},[923,37623,37624],{"align":969},[586,37625,11353],{},[923,37627,37628],{"align":969},"Path to the environment map files",[923,37630,37631],{},[586,37632,1151],{},[905,37634,37635,37640,37643],{},[923,37636,37637],{"align":969},[586,37638,37639],{},"encoding",[923,37641,37642],{"align":969},"Encoding of the environment map",[923,37644,37645,37648,37649,37652],{},[586,37646,37647],{},"SRGBColorSpace"," for array files, ",[586,37650,37651],{},"LinearEncoding"," for single texture",[905,37654,37655,37659,37664],{},[923,37656,37657],{"align":969},[586,37658,37368],{},[923,37660,930,37661,37663],{"align":969},[586,37662,933],{},", the environment map will be used as the scene background",[923,37665,37666],{},[586,37667,943],{},[905,37669,37670,37674,37677],{},[923,37671,37672],{"align":969},[586,37673,15024],{},[923,37675,37676],{"align":969},"Blur factor between 0 and 1 (only works with three 0.146 and up)",[923,37678,937],{},[905,37680,37681,37685,37688],{},[923,37682,37683],{"align":969},[586,37684,37297],{},[923,37686,37687],{"align":969},"Preset environment map",[923,37689,37690],{},[586,37691,1151],{},[905,37693,37694,37698,37701],{},[923,37695,37696],{"align":969},[586,37697,21937],{},[923,37699,37700],{"align":969},"The resolution of the WebGLCubeRenderTarget",[923,37702,21945],{},[905,37704,37705,37709,37712],{},[923,37706,37707],{"align":969},[586,37708,36295],{},[923,37710,37711],{"align":969},"The near of the CubeCamera",[923,37713,1893],{},[905,37715,37716,37720,37723],{},[923,37717,37718],{"align":969},[586,37719,34031],{},[923,37721,37722],{"align":969},"The far of the CubeCamera",[923,37724,5165],{},[905,37726,37727,37731,37734],{},[923,37728,37729],{"align":969},[586,37730,32388],{},[923,37732,37733],{"align":969},"The frames of the cubeCamera.update",[923,37735,6938],{},[905,37737,37738,37743,37746],{},[923,37739,37740],{"align":969},[586,37741,37742],{},"backgroundIntensity",[923,37744,37745],{"align":969},"Intensity of the background",[923,37747,1893],{},[905,37749,37750,37755,37758],{},[923,37751,37752],{"align":969},[586,37753,37754],{},"environmentIntensity",[923,37756,37757],{"align":969},"Intensity of the environment",[923,37759,1893],{},[905,37761,37762,37767,37770],{},[923,37763,37764],{"align":969},[586,37765,37766],{},"backgroundRotation",[923,37768,37769],{"align":969},"Rotation of the background (in radians)",[923,37771,37772],{},[605,37773,37774],{},"0, 0, 0",[905,37776,37777,37782,37785],{},[923,37778,37779],{"align":969},[586,37780,37781],{},"environmentRotation",[923,37783,37784],{"align":969},"Rotation of the environment (in radians)",[923,37786,37787],{},[605,37788,37774],{},[905,37790,37791,37795,37798],{},[923,37792,37793],{"align":969},[586,37794,37467],{},[923,37796,37797],{"align":969},"If true, environment rotation will sync with background rotation",[923,37799,943],{},[7473,37801,37291],{"id":37802},"presets-1",[594,37804,37807],{"className":37805,"code":37806,"language":22930},[22928],"sunset\nstudio\ncity\numbrellas\nnight\nforest\nsnow\ndawn\nhangar\nurban\nmodern\nshangai\n",[586,37808,37806],{"__ignoreMap":544},[1299,37810,37811],{},"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":544,"searchDepth":545,"depth":546,"links":37813},[37814,37815,37816,37817,37820],{"id":592,"depth":546,"text":15},{"id":37081,"depth":546,"text":37082},{"id":37290,"depth":546,"text":37291},{"id":37324,"depth":546,"text":37325,"children":37818},[37819],{"id":37460,"depth":676,"text":37461},{"id":893,"depth":546,"text":894,"children":37821},[37822],{"id":37802,"depth":676,"text":37291},"Automatically sets up a global cubemap for scene environment and background.",{},{"title":347,"description":37823},"dqLZk4n0fsNI6BVPDBhIxhgyNLq36JyLYtIkuxeINv0",{"id":37828,"title":351,"body":37829,"description":38393,"extension":559,"links":560,"meta":38394,"navigation":562,"path":352,"seo":38395,"stem":353,"__hash__":38396},"docs/2.api/8.staging/2.use-environment.md",{"type":469,"value":37830,"toc":38389},[37831,37835,37844,37853,37855,37860,38062,38067,38100,38105,38189,38191,38386],[2558,37832,37833],{},[36804,37834],{},[582,37836,37837,37839,37840,36812,37842,1118],{},[586,37838,351],{}," composable that automatically sets up a global cubemap, which affects the default ",[586,37841,36811],{},[586,37843,36815],{},[582,37845,37846,37847,37852],{},"It uses the ",[1112,37848,37851],{"href":37849,"rel":37850},"https://threejs.org/docs/#api/en/loaders/CubeTextureLoader",[1116],"CubeTextureLoader"," to load the cubemap",[472,37854,15],{"id":592},[3725,37856,37857],{},[582,37858,37859],{},"UseEnvironment needs to be wrapped by a Suspense component",[594,37861,37863],{"className":596,"code":37862,"language":601,"meta":544,"style":544},"\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",[586,37864,37865,37885,37904,37923,37927,37943,37952,37964,37975,37986,37997,38008,38019,38025,38037,38048,38054],{"__ignoreMap":544},[605,37866,37867,37869,37871,37873,37875,37877,37879,37881,37883],{"class":607,"line":545},[605,37868,611],{"class":610},[605,37870,615],{"class":614},[605,37872,619],{"class":618},[605,37874,622],{"class":618},[605,37876,625],{"class":610},[605,37878,628],{"class":610},[605,37880,632],{"class":631},[605,37882,628],{"class":610},[605,37884,637],{"class":610},[605,37886,37887,37889,37891,37894,37896,37898,37900,37902],{"class":607,"line":546},[605,37888,645],{"class":644},[605,37890,648],{"class":610},[605,37892,37893],{"class":651}," useEnvironment",[605,37895,661],{"class":610},[605,37897,664],{"class":644},[605,37899,667],{"class":610},[605,37901,670],{"class":631},[605,37903,673],{"class":610},[605,37905,37906,37908,37910,37913,37915,37917,37919,37921],{"class":607,"line":676},[605,37907,645],{"class":644},[605,37909,648],{"class":610},[605,37911,37912],{"class":651}," SRGBColorSpace",[605,37914,661],{"class":610},[605,37916,664],{"class":644},[605,37918,667],{"class":610},[605,37920,2678],{"class":631},[605,37922,673],{"class":610},[605,37924,37925],{"class":607,"line":697},[605,37926,710],{"emptyLinePlaceholder":562},[605,37928,37929,37931,37933,37935,37937,37939,37941],{"class":607,"line":707},[605,37930,2689],{"class":618},[605,37932,19354],{"class":651},[605,37934,625],{"class":610},[605,37936,18546],{"class":644},[605,37938,37893],{"class":2800},[605,37940,2970],{"class":651},[605,37942,2751],{"class":610},[605,37944,37945,37948,37950],{"class":607,"line":713},[605,37946,37947],{"class":614},"  files",[605,37949,1190],{"class":610},[605,37951,14018],{"class":651},[605,37953,37954,37957,37960,37962],{"class":607,"line":723},[605,37955,37956],{"class":610},"    '",[605,37958,37959],{"class":631},"/textures/environmentMaps/0/px.jpg",[605,37961,5536],{"class":610},[605,37963,14031],{"class":610},[605,37965,37966,37968,37971,37973],{"class":607,"line":746},[605,37967,37956],{"class":610},[605,37969,37970],{"class":631},"/textures/environmentMaps/0/nx.jpg",[605,37972,5536],{"class":610},[605,37974,14031],{"class":610},[605,37976,37977,37979,37982,37984],{"class":607,"line":758},[605,37978,37956],{"class":610},[605,37980,37981],{"class":631},"/textures/environmentMaps/0/py.jpg",[605,37983,5536],{"class":610},[605,37985,14031],{"class":610},[605,37987,37988,37990,37993,37995],{"class":607,"line":768},[605,37989,37956],{"class":610},[605,37991,37992],{"class":631},"/textures/environmentMaps/0/ny.jpg",[605,37994,5536],{"class":610},[605,37996,14031],{"class":610},[605,37998,37999,38001,38004,38006],{"class":607,"line":773},[605,38000,37956],{"class":610},[605,38002,38003],{"class":631},"/textures/environmentMaps/0/pz.jpg",[605,38005,5536],{"class":610},[605,38007,14031],{"class":610},[605,38009,38010,38012,38015,38017],{"class":607,"line":799},[605,38011,37956],{"class":610},[605,38013,38014],{"class":631},"/textures/environmentMaps/0/nz.jpg",[605,38016,5536],{"class":610},[605,38018,14031],{"class":610},[605,38020,38021,38023],{"class":607,"line":599},[605,38022,35127],{"class":651},[605,38024,14031],{"class":610},[605,38026,38027,38030,38032,38035],{"class":607,"line":822},[605,38028,38029],{"class":614},"  path",[605,38031,1190],{"class":610},[605,38033,38034],{"class":610}," ''",[605,38036,14031],{"class":610},[605,38038,38039,38042,38044,38046],{"class":607,"line":833},[605,38040,38041],{"class":614},"  encoding",[605,38043,1190],{"class":610},[605,38045,37912],{"class":651},[605,38047,14031],{"class":610},[605,38049,38050,38052],{"class":607,"line":844},[605,38051,5544],{"class":610},[605,38053,5539],{"class":651},[605,38055,38056,38058,38060],{"class":607,"line":854},[605,38057,700],{"class":610},[605,38059,615],{"class":614},[605,38061,637],{"class":610},[582,38063,18553,38064,38066],{},[586,38065,13433],{}," in your scene:",[594,38068,38071],{"className":596,"code":38069,"highlights":38070,"language":601,"meta":544,"style":544},"\u003CTresMesh>\n  \u003CTresSphereGeometry />\n  \u003CTresMeshStandardMaterial :map=\"texture\" />\n\u003C/TresMesh>\n",[676],[586,38072,38073,38081,38086,38092],{"__ignoreMap":544},[605,38074,38075,38077,38079],{"class":607,"line":545},[605,38076,611],{"class":610},[605,38078,828],{"class":614},[605,38080,637],{"class":610},[605,38082,38083],{"class":607,"line":546},[605,38084,38085],{"class":651},"  \u003CTresSphereGeometry />\n",[605,38087,38089],{"class":38088,"line":676},[607,641],[605,38090,38091],{"class":651},"  \u003CTresMeshStandardMaterial :map=\"texture\" />\n",[605,38093,38094,38096,38098],{"class":607,"line":697},[605,38095,700],{"class":610},[605,38097,828],{"class":614},[605,38099,637],{"class":610},[582,38101,37043,38102,38104],{},[586,38103,37046],{}," file directly",[594,38106,38108],{"className":1158,"code":38107,"language":632,"meta":544,"style":544},"import { useEnvironment } from '@tresjs/cientos'\n\nconst texture = await useEnvironment({\n  files: '/sunset.hdr',\n  path: '',\n  encoding: SRGBColorSpace,\n})\n",[586,38109,38110,38128,38132,38148,38163,38173,38183],{"__ignoreMap":544},[605,38111,38112,38114,38116,38118,38120,38122,38124,38126],{"class":607,"line":545},[605,38113,645],{"class":644},[605,38115,648],{"class":610},[605,38117,37893],{"class":651},[605,38119,661],{"class":610},[605,38121,664],{"class":644},[605,38123,667],{"class":610},[605,38125,670],{"class":631},[605,38127,673],{"class":610},[605,38129,38130],{"class":607,"line":546},[605,38131,710],{"emptyLinePlaceholder":562},[605,38133,38134,38136,38138,38140,38142,38144,38146],{"class":607,"line":676},[605,38135,2689],{"class":618},[605,38137,19354],{"class":651},[605,38139,625],{"class":610},[605,38141,18546],{"class":644},[605,38143,37893],{"class":2800},[605,38145,2970],{"class":651},[605,38147,2751],{"class":610},[605,38149,38150,38152,38154,38156,38159,38161],{"class":607,"line":697},[605,38151,37947],{"class":614},[605,38153,1190],{"class":610},[605,38155,667],{"class":610},[605,38157,38158],{"class":631},"/sunset.hdr",[605,38160,5536],{"class":610},[605,38162,14031],{"class":610},[605,38164,38165,38167,38169,38171],{"class":607,"line":707},[605,38166,38029],{"class":614},[605,38168,1190],{"class":610},[605,38170,38034],{"class":610},[605,38172,14031],{"class":610},[605,38174,38175,38177,38179,38181],{"class":607,"line":713},[605,38176,38041],{"class":614},[605,38178,1190],{"class":610},[605,38180,37912],{"class":651},[605,38182,14031],{"class":610},[605,38184,38185,38187],{"class":607,"line":723},[605,38186,5544],{"class":610},[605,38188,5539],{"class":651},[472,38190,7487],{"id":11049},[899,38192,38193,38205],{},[902,38194,38195],{},[905,38196,38197,38199,38201,38203],{},[908,38198,3118],{"align":969},[908,38200,10957],{},[908,38202,916],{},[908,38204,913],{},[918,38206,38207,38224,38241,38263,38282,38299,38316,38333,38350,38369],{},[905,38208,38209,38213,38217,38221],{},[923,38210,38211],{"align":969},[1673,38212,18837],{},[923,38214,38215],{},[586,38216,18953],{},[923,38218,38219],{},[586,38220,1151],{},[923,38222,38223],{},"Array of 6 urls to images, one for each side of the CubeTexture. or and HDR",[905,38225,38226,38230,38234,38238],{},[923,38227,38228],{"align":969},[1673,38229,11353],{},[923,38231,38232],{},[586,38233,11014],{},[923,38235,38236],{},[586,38237,943],{},[923,38239,38240],{},"Path to the environment map files.",[905,38242,38243,38247,38252,38260],{},[923,38244,38245],{"align":969},[1673,38246,37639],{},[923,38248,38249],{},[586,38250,38251],{},"Encoding",[923,38253,38254,38256,38257,38259],{},[586,38255,37647],{}," for an array of files and ",[586,38258,37651],{}," for a single texture",[923,38261,38262],{},"Encoding of the environment map.",[905,38264,38265,38269,38273,38277],{},[923,38266,38267],{"align":969},[1673,38268,37368],{},[923,38270,38271],{},[586,38272,11014],{},[923,38274,38275],{},[586,38276,943],{},[923,38278,930,38279,38281],{},[586,38280,933],{}," the texture will be used as the scene background.",[905,38283,38284,38288,38292,38296],{},[923,38285,38286],{"align":969},[1673,38287,15024],{},[923,38289,38290],{},[586,38291,2537],{},[923,38293,38294],{},[586,38295,937],{},[923,38297,38298],{},"Blur factor between 0 and 1. (only works with three 0.146 and up)",[905,38300,38301,38305,38309,38313],{},[923,38302,38303],{"align":969},[1673,38304,37297],{},[923,38306,38307],{},[586,38308,11094],{},[923,38310,38311],{},[586,38312,1151],{},[923,38314,38315],{},"Preset environment map.",[905,38317,38318,38322,38326,38330],{},[923,38319,38320],{"align":969},[1673,38321,37742],{},[923,38323,38324],{},[586,38325,2537],{},[923,38327,38328],{},[586,38329,1893],{},[923,38331,38332],{},"Intensity of the background.",[905,38334,38335,38339,38343,38347],{},[923,38336,38337],{"align":969},[1673,38338,37754],{},[923,38340,38341],{},[586,38342,2537],{},[923,38344,38345],{},[586,38346,1893],{},[923,38348,38349],{},"Intensity of the environment.",[905,38351,38352,38356,38361,38366],{},[923,38353,38354],{"align":969},[1673,38355,37766],{},[923,38357,38358],{},[586,38359,38360],{},"VectorFlexibleParams",[923,38362,38363],{},[586,38364,38365],{},"[0, 0, 0]",[923,38367,38368],{},"Rotation of the background.",[905,38370,38371,38375,38379,38383],{},[923,38372,38373],{"align":969},[1673,38374,37781],{},[923,38376,38377],{},[586,38378,38360],{},[923,38380,38381],{},[586,38382,38365],{},[923,38384,38385],{},"Rotation of the environment.",[1299,38387,38388],{},"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":544,"searchDepth":545,"depth":546,"links":38390},[38391,38392],{"id":592,"depth":546,"text":15},{"id":11049,"depth":546,"text":7487},"Composable that sets up a global cubemap for scene environment and background.",{},{"title":351,"description":38393},"6daKH-E6ICNjAkrFUlcQXUgujIBuYCGJ6Xewfx615-c",{"id":38398,"title":355,"body":38399,"description":38688,"extension":559,"links":560,"meta":38689,"navigation":562,"path":356,"seo":38690,"stem":357,"__hash__":38691},"docs/2.api/8.staging/3.lightformer.md",{"type":469,"value":38400,"toc":38685},[38401,38406,38412,38606,38608,38611,38683],[576,38402,38403],{},[38404,38405],"staging-lightformer",{},[582,38407,38408,38409,38411],{},"You can incorporate ",[586,38410,355],{}," into the environment just like a slot.",[594,38413,38415],{"className":596,"code":38414,"language":601,"meta":544,"style":544},"\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",[586,38416,38417,38427,38452,38460,38464,38472,38480,38524,38590,38598],{"__ignoreMap":544},[605,38418,38419,38421,38423,38425],{"class":607,"line":545},[605,38420,611],{"class":610},[605,38422,615],{"class":614},[605,38424,619],{"class":618},[605,38426,637],{"class":610},[605,38428,38429,38431,38433,38436,38438,38441,38443,38445,38447,38450],{"class":607,"line":546},[605,38430,645],{"class":644},[605,38432,648],{"class":610},[605,38434,38435],{"class":651}," Enviroment",[605,38437,655],{"class":610},[605,38439,38440],{"class":651}," LightFormer",[605,38442,661],{"class":610},[605,38444,664],{"class":644},[605,38446,667],{"class":610},[605,38448,38449],{"class":631},"@tres/cientos",[605,38451,673],{"class":610},[605,38453,38454,38456,38458],{"class":607,"line":676},[605,38455,700],{"class":610},[605,38457,615],{"class":614},[605,38459,637],{"class":610},[605,38461,38462],{"class":607,"line":697},[605,38463,710],{"emptyLinePlaceholder":562},[605,38465,38466,38468,38470],{"class":607,"line":707},[605,38467,611],{"class":610},[605,38469,718],{"class":614},[605,38471,637],{"class":610},[605,38473,38474,38476,38478],{"class":607,"line":713},[605,38475,726],{"class":610},[605,38477,347],{"class":614},[605,38479,637],{"class":610},[605,38481,38482,38484,38486,38488,38490,38492,38494,38496,38498,38500,38502,38504,38506,38508,38510,38512,38514,38516,38518,38520,38522],{"class":607,"line":723},[605,38483,749],{"class":610},[605,38485,355],{"class":614},[605,38487,781],{"class":610},[605,38489,1886],{"class":618},[605,38491,625],{"class":610},[605,38493,628],{"class":610},[605,38495,4645],{"class":791},[605,38497,628],{"class":610},[605,38499,781],{"class":610},[605,38501,1459],{"class":618},[605,38503,625],{"class":610},[605,38505,628],{"class":610},[605,38507,1466],{"class":610},[605,38509,937],{"class":791},[605,38511,1471],{"class":610},[605,38513,2396],{"class":791},[605,38515,3598],{"class":610},[605,38517,19149],{"class":791},[605,38519,1481],{"class":610},[605,38521,628],{"class":610},[605,38523,755],{"class":610},[605,38525,38526,38528,38530,38532,38534,38536,38539,38541,38543,38546,38548,38550,38552,38554,38556,38558,38560,38562,38564,38566,38568,38570,38572,38574,38576,38578,38580,38582,38584,38586,38588],{"class":607,"line":746},[605,38527,749],{"class":610},[605,38529,355],{"class":614},[605,38531,664],{"class":618},[605,38533,625],{"class":610},[605,38535,628],{"class":610},[605,38537,38538],{"class":631},"ring",[605,38540,628],{"class":610},[605,38542,781],{"class":610},[605,38544,38545],{"class":618},"rotation-y",[605,38547,625],{"class":610},[605,38549,628],{"class":610},[605,38551,4088],{"class":610},[605,38553,21593],{"class":651},[605,38555,1118],{"class":610},[605,38557,21598],{"class":651},[605,38559,21601],{"class":610},[605,38561,792],{"class":791},[605,38563,628],{"class":610},[605,38565,781],{"class":610},[605,38567,784],{"class":618},[605,38569,625],{"class":610},[605,38571,628],{"class":610},[605,38573,1466],{"class":610},[605,38575,1478],{"class":791},[605,38577,1471],{"class":610},[605,38579,1478],{"class":791},[605,38581,1471],{"class":610},[605,38583,1893],{"class":791},[605,38585,1481],{"class":610},[605,38587,628],{"class":610},[605,38589,755],{"class":610},[605,38591,38592,38594,38596],{"class":607,"line":758},[605,38593,877],{"class":610},[605,38595,347],{"class":614},[605,38597,637],{"class":610},[605,38599,38600,38602,38604],{"class":607,"line":768},[605,38601,700],{"class":610},[605,38603,718],{"class":614},[605,38605,637],{"class":610},[7473,38607,894],{"id":893},[582,38609,38610],{},"Lightformer inherits from mesh, and its extension parameters include:",[899,38612,38613,38623],{},[902,38614,38615],{},[905,38616,38617,38619,38621],{},[908,38618,910],{"align":969},[908,38620,913],{"align":969},[908,38622,916],{},[918,38624,38625,38646,38657,38671],{},[905,38626,38627,38631,38642],{},[923,38628,38629],{"align":969},[586,38630,10669],{},[923,38632,38633,1471,38636,1471,38638,38641],{"align":969},[586,38634,38635],{},"circle",[586,38637,38538],{},[586,38639,38640],{},"rect",", or any other Mesh type",[923,38643,38644],{},[586,38645,38640],{},[905,38647,38648,38652,38655],{},[923,38649,38650],{"align":969},[586,38651,1886],{},[923,38653,38654],{"align":969},"The intensity of the light",[923,38656,1893],{},[905,38658,38659,38663,38666],{},[923,38660,38661],{"align":969},[586,38662,2500],{},[923,38664,38665],{"align":969},"The color of the light",[923,38667,38668],{},[586,38669,38670],{},"0xffffff",[905,38672,38673,38677,38680],{},[923,38674,38675],{"align":969},[586,38676,1989],{},[923,38678,38679],{"align":969},"The arguments of the Geometry",[923,38681,38682],{},"When using other geometries, set the corresponding arguments",[1299,38684,7841],{},{"title":544,"searchDepth":545,"depth":546,"links":38686},[38687],{"id":893,"depth":676,"text":894},"Addon for environment component that provided you custom lights.",{},{"title":355,"description":38688},"R8P0Oy_2dpWPhe7Wm4S1_IYaBdzzvZXUtE1_rjpxx6o",{"id":38693,"title":359,"body":38694,"description":39042,"extension":559,"links":560,"meta":39043,"navigation":562,"path":360,"seo":39044,"stem":361,"__hash__":39045},"docs/2.api/8.staging/backdrop.md",{"type":469,"value":38695,"toc":39038},[38696,38701,38709,38711,38900,38903,38980,38982,39036],[576,38697,38698],{},[38699,38700],"staging-backdrop",{},[582,38702,2253,38703,3275,38705,38708],{},[586,38704,2256],{},[586,38706,38707],{},"\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.",[472,38710,15],{"id":592},[594,38712,38715],{"className":596,"code":38713,"highlights":38714,"language":601,"meta":544,"style":544},"\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",[676,758],[586,38716,38717,38737,38755,38775,38783,38787,38795,38803,38835,38844,38852,38884,38892],{"__ignoreMap":544},[605,38718,38719,38721,38723,38725,38727,38729,38731,38733,38735],{"class":607,"line":545},[605,38720,611],{"class":610},[605,38722,615],{"class":614},[605,38724,619],{"class":618},[605,38726,622],{"class":618},[605,38728,625],{"class":610},[605,38730,628],{"class":610},[605,38732,632],{"class":631},[605,38734,628],{"class":610},[605,38736,637],{"class":610},[605,38738,38739,38741,38743,38745,38747,38749,38751,38753],{"class":607,"line":546},[605,38740,645],{"class":644},[605,38742,648],{"class":610},[605,38744,683],{"class":651},[605,38746,661],{"class":610},[605,38748,664],{"class":644},[605,38750,667],{"class":610},[605,38752,692],{"class":631},[605,38754,673],{"class":610},[605,38756,38758,38760,38762,38765,38767,38769,38771,38773],{"class":38757,"line":676},[607,641],[605,38759,645],{"class":644},[605,38761,648],{"class":610},[605,38763,38764],{"class":651}," Backdrop",[605,38766,661],{"class":610},[605,38768,664],{"class":644},[605,38770,667],{"class":610},[605,38772,670],{"class":631},[605,38774,673],{"class":610},[605,38776,38777,38779,38781],{"class":607,"line":697},[605,38778,700],{"class":610},[605,38780,615],{"class":614},[605,38782,637],{"class":610},[605,38784,38785],{"class":607,"line":707},[605,38786,710],{"emptyLinePlaceholder":562},[605,38788,38789,38791,38793],{"class":607,"line":713},[605,38790,611],{"class":610},[605,38792,718],{"class":614},[605,38794,637],{"class":610},[605,38796,38797,38799,38801],{"class":607,"line":723},[605,38798,726],{"class":610},[605,38800,729],{"class":614},[605,38802,637],{"class":610},[605,38804,38805,38807,38809,38811,38813,38815,38817,38819,38821,38823,38825,38827,38829,38831,38833],{"class":607,"line":746},[605,38806,749],{"class":610},[605,38808,752],{"class":614},[605,38810,781],{"class":610},[605,38812,1459],{"class":618},[605,38814,625],{"class":610},[605,38816,628],{"class":610},[605,38818,1466],{"class":610},[605,38820,937],{"class":791},[605,38822,1471],{"class":610},[605,38824,4160],{"class":791},[605,38826,1471],{"class":610},[605,38828,2396],{"class":791},[605,38830,1481],{"class":610},[605,38832,628],{"class":610},[605,38834,755],{"class":610},[605,38836,38838,38840,38842],{"class":38837,"line":758},[607,641],[605,38839,749],{"class":610},[605,38841,359],{"class":614},[605,38843,755],{"class":610},[605,38845,38846,38848,38850],{"class":607,"line":768},[605,38847,749],{"class":610},[605,38849,3518],{"class":614},[605,38851,755],{"class":610},[605,38853,38854,38856,38858,38860,38862,38864,38866,38868,38870,38872,38874,38876,38878,38880,38882],{"class":607,"line":773},[605,38855,749],{"class":610},[605,38857,3539],{"class":614},[605,38859,781],{"class":610},[605,38861,1459],{"class":618},[605,38863,625],{"class":610},[605,38865,628],{"class":610},[605,38867,1466],{"class":610},[605,38869,937],{"class":791},[605,38871,1471],{"class":610},[605,38873,792],{"class":791},[605,38875,1471],{"class":610},[605,38877,3490],{"class":791},[605,38879,1481],{"class":610},[605,38881,628],{"class":610},[605,38883,755],{"class":610},[605,38885,38886,38888,38890],{"class":607,"line":799},[605,38887,877],{"class":610},[605,38889,729],{"class":614},[605,38891,637],{"class":610},[605,38893,38894,38896,38898],{"class":607,"line":599},[605,38895,700],{"class":610},[605,38897,718],{"class":614},[605,38899,637],{"class":610},[582,38901,38902],{},"Or with a custom material",[594,38904,38908],{"className":38905,"code":38906,"language":38907,"meta":544,"style":544},"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",[586,38909,38910,38942,38972],{"__ignoreMap":544},[605,38911,38912,38914,38916,38919,38921,38923,38925,38927,38930,38932,38934,38936,38938,38940],{"class":607,"line":545},[605,38913,611],{"class":610},[605,38915,359],{"class":614},[605,38917,38918],{"class":618}," :floor",[605,38920,625],{"class":610},[605,38922,628],{"class":610},[605,38924,9877],{"class":631},[605,38926,628],{"class":610},[605,38928,38929],{"class":618}," :segments",[605,38931,625],{"class":610},[605,38933,628],{"class":610},[605,38935,23469],{"class":631},[605,38937,628],{"class":610},[605,38939,36105],{"class":618},[605,38941,637],{"class":610},[605,38943,38944,38946,38949,38951,38953,38955,38957,38959,38962,38964,38966,38968,38970],{"class":607,"line":546},[605,38945,726],{"class":610},[605,38947,38948],{"class":614},"TresMeshPhysicalMaterial",[605,38950,3978],{"class":618},[605,38952,625],{"class":610},[605,38954,628],{"class":610},[605,38956,6738],{"class":631},[605,38958,628],{"class":610},[605,38960,38961],{"class":618}," :roughness",[605,38963,625],{"class":610},[605,38965,628],{"class":610},[605,38967,1893],{"class":631},[605,38969,628],{"class":610},[605,38971,755],{"class":610},[605,38973,38974,38976,38978],{"class":607,"line":676},[605,38975,700],{"class":610},[605,38977,359],{"class":614},[605,38979,637],{"class":610},[472,38981,894],{"id":893},[899,38983,38984,38996],{},[902,38985,38986],{},[905,38987,38988,38990,38992,38994],{},[908,38989,3118],{"align":969},[908,38991,10957],{"align":969},[908,38993,916],{},[908,38995,26998],{},[918,38997,38998,39012,39024],{},[905,38999,39000,39003,39005,39009],{},[923,39001,39002],{"align":969},"floor",[923,39004,2537],{"align":969},[923,39006,39007],{},[586,39008,7041],{},[923,39010,39011],{},"No",[905,39013,39014,39016,39018,39022],{},[923,39015,23357],{"align":969},[923,39017,2537],{"align":969},[923,39019,39020],{},[586,39021,23469],{},[923,39023,39011],{},[905,39025,39026,39028,39030,39034],{},[923,39027,11936],{"align":969},[923,39029,11014],{"align":969},[923,39031,39032],{},[586,39033,943],{},[923,39035,39011],{},[1299,39037,1648],{},{"title":544,"searchDepth":545,"depth":546,"links":39039},[39040,39041],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},"A curved plane studio backdrop for presentational purposes.",{},{"title":359,"description":39042},"NGh9OweK5ISAF-G6NdgBZKgy35j2Bl_DEl17ABguTXw",{"id":39047,"title":363,"body":39048,"description":39587,"extension":559,"links":560,"meta":39588,"navigation":562,"path":364,"seo":39589,"stem":365,"__hash__":39590},"docs/2.api/8.staging/ocean.md",{"type":469,"value":39049,"toc":39579},[39050,39055,39070,39075,39077,39210,39214,39223,39226,39241,39245,39248,39418,39420,39425,39576],[2558,39051,39052],{},[39053,39054],"staging-ocean",{},[582,39056,39057,39060,39061,1118],{},[586,39058,39059],{},"\u003COcean />"," is a wrapper for the ",[1112,39062,39065,39066,39069],{"href":39063,"rel":39064},"https://threejs.org/examples/?q=ocean#webgl_shaders_ocean",[1116],"Three.js ",[586,39067,39068],{},"Water"," add-on",[3725,39071,39072],{},[582,39073,39074],{},"Ocean comes with a default texture, so it needs to be wrapped in a Suspense component.",[472,39076,15],{"id":592},[594,39078,39081],{"className":596,"code":39079,"highlights":39080,"language":601,"meta":544,"style":544},"\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",[676,758],[586,39082,39083,39103,39121,39141,39149,39153,39161,39169,39177,39186,39194,39202],{"__ignoreMap":544},[605,39084,39085,39087,39089,39091,39093,39095,39097,39099,39101],{"class":607,"line":545},[605,39086,611],{"class":610},[605,39088,615],{"class":614},[605,39090,619],{"class":618},[605,39092,622],{"class":618},[605,39094,625],{"class":610},[605,39096,628],{"class":610},[605,39098,632],{"class":631},[605,39100,628],{"class":610},[605,39102,637],{"class":610},[605,39104,39105,39107,39109,39111,39113,39115,39117,39119],{"class":607,"line":546},[605,39106,645],{"class":644},[605,39108,648],{"class":610},[605,39110,683],{"class":651},[605,39112,661],{"class":610},[605,39114,664],{"class":644},[605,39116,667],{"class":610},[605,39118,692],{"class":631},[605,39120,673],{"class":610},[605,39122,39124,39126,39128,39131,39133,39135,39137,39139],{"class":39123,"line":676},[607,641],[605,39125,645],{"class":644},[605,39127,648],{"class":610},[605,39129,39130],{"class":651}," Ocean",[605,39132,661],{"class":610},[605,39134,664],{"class":644},[605,39136,667],{"class":610},[605,39138,670],{"class":631},[605,39140,673],{"class":610},[605,39142,39143,39145,39147],{"class":607,"line":697},[605,39144,700],{"class":610},[605,39146,615],{"class":614},[605,39148,637],{"class":610},[605,39150,39151],{"class":607,"line":707},[605,39152,710],{"emptyLinePlaceholder":562},[605,39154,39155,39157,39159],{"class":607,"line":713},[605,39156,611],{"class":610},[605,39158,718],{"class":614},[605,39160,637],{"class":610},[605,39162,39163,39165,39167],{"class":607,"line":723},[605,39164,726],{"class":610},[605,39166,729],{"class":614},[605,39168,637],{"class":610},[605,39170,39171,39173,39175],{"class":607,"line":746},[605,39172,749],{"class":610},[605,39174,14995],{"class":614},[605,39176,637],{"class":610},[605,39178,39180,39182,39184],{"class":39179,"line":758},[607,641],[605,39181,825],{"class":610},[605,39183,363],{"class":614},[605,39185,755],{"class":610},[605,39187,39188,39190,39192],{"class":607,"line":768},[605,39189,867],{"class":610},[605,39191,14995],{"class":614},[605,39193,637],{"class":610},[605,39195,39196,39198,39200],{"class":607,"line":773},[605,39197,877],{"class":610},[605,39199,729],{"class":614},[605,39201,637],{"class":610},[605,39203,39204,39206,39208],{"class":607,"line":799},[605,39205,700],{"class":610},[605,39207,718],{"class":614},[605,39209,637],{"class":610},[7473,39211,39213],{"id":39212},"sky","SKY",[582,39215,39216,39218,39219,39222],{},[586,39217,39059],{}," works hand in hand with the Sky component, detecting the position of the sun and reflecting on the water.\n(",[586,39220,39221],{},"\u003CSky />"," is not required for making this component work.)",[7473,39224,39225],{"id":33581},"Fog",[582,39227,2253,39228,39230,39231,10149,39235,39240],{},[586,39229,39059],{}," component also reacts when there's ",[1112,39232,39225],{"href":39233,"rel":39234},"https://threejs.org/docs/index.html?q=fog#api/en/scenes/Fog",[1116],[1112,39236,39239],{"href":39237,"rel":39238},"https://threejs.org/docs/index.html?q=fog#api/en/scenes/FogExp2",[1116],"FogExp2"," in your scene.",[472,39242,39244],{"id":39243},"custom-geometry","Custom Geometry",[582,39246,39247],{},"You can use custom geometry by adding it as a child.",[594,39249,39252],{"className":596,"code":39250,"highlights":39251,"language":601,"meta":544,"style":544},"\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",[676,758,768,773],[586,39253,39254,39274,39292,39311,39319,39323,39331,39339,39347,39356,39385,39394,39402,39410],{"__ignoreMap":544},[605,39255,39256,39258,39260,39262,39264,39266,39268,39270,39272],{"class":607,"line":545},[605,39257,611],{"class":610},[605,39259,615],{"class":614},[605,39261,619],{"class":618},[605,39263,622],{"class":618},[605,39265,625],{"class":610},[605,39267,628],{"class":610},[605,39269,632],{"class":631},[605,39271,628],{"class":610},[605,39273,637],{"class":610},[605,39275,39276,39278,39280,39282,39284,39286,39288,39290],{"class":607,"line":546},[605,39277,645],{"class":644},[605,39279,648],{"class":610},[605,39281,683],{"class":651},[605,39283,661],{"class":610},[605,39285,664],{"class":644},[605,39287,667],{"class":610},[605,39289,692],{"class":631},[605,39291,673],{"class":610},[605,39293,39295,39297,39299,39301,39303,39305,39307,39309],{"class":39294,"line":676},[607,641],[605,39296,645],{"class":644},[605,39298,648],{"class":610},[605,39300,39130],{"class":651},[605,39302,661],{"class":610},[605,39304,664],{"class":644},[605,39306,667],{"class":610},[605,39308,670],{"class":631},[605,39310,673],{"class":610},[605,39312,39313,39315,39317],{"class":607,"line":697},[605,39314,700],{"class":610},[605,39316,615],{"class":614},[605,39318,637],{"class":610},[605,39320,39321],{"class":607,"line":707},[605,39322,710],{"emptyLinePlaceholder":562},[605,39324,39325,39327,39329],{"class":607,"line":713},[605,39326,611],{"class":610},[605,39328,718],{"class":614},[605,39330,637],{"class":610},[605,39332,39333,39335,39337],{"class":607,"line":723},[605,39334,726],{"class":610},[605,39336,729],{"class":614},[605,39338,637],{"class":610},[605,39340,39341,39343,39345],{"class":607,"line":746},[605,39342,749],{"class":610},[605,39344,14995],{"class":614},[605,39346,637],{"class":610},[605,39348,39350,39352,39354],{"class":39349,"line":758},[607,641],[605,39351,825],{"class":610},[605,39353,363],{"class":614},[605,39355,637],{"class":610},[605,39357,39359,39361,39363,39365,39367,39369,39371,39373,39375,39377,39379,39381,39383],{"class":39358,"line":768},[607,641],[605,39360,836],{"class":610},[605,39362,4027],{"class":614},[605,39364,781],{"class":610},[605,39366,1989],{"class":618},[605,39368,625],{"class":610},[605,39370,628],{"class":610},[605,39372,1466],{"class":610},[605,39374,4597],{"class":791},[605,39376,1471],{"class":610},[605,39378,29832],{"class":791},[605,39380,1481],{"class":610},[605,39382,628],{"class":610},[605,39384,755],{"class":610},[605,39386,39388,39390,39392],{"class":39387,"line":773},[607,641],[605,39389,857],{"class":610},[605,39391,363],{"class":614},[605,39393,637],{"class":610},[605,39395,39396,39398,39400],{"class":607,"line":799},[605,39397,867],{"class":610},[605,39399,14995],{"class":614},[605,39401,637],{"class":610},[605,39403,39404,39406,39408],{"class":607,"line":599},[605,39405,877],{"class":610},[605,39407,729],{"class":614},[605,39409,637],{"class":610},[605,39411,39412,39414,39416],{"class":607,"line":822},[605,39413,700],{"class":610},[605,39415,718],{"class":614},[605,39417,637],{"class":610},[472,39419,894],{"id":893},[3725,39421,39422],{},[582,39423,39424],{},"All of the props of this component are not reactive.",[899,39426,39427,39437],{},[902,39428,39429],{},[905,39430,39431,39433,39435],{},[908,39432,910],{"align":969},[908,39434,913],{"align":969},[908,39436,916],{},[918,39438,39439,39451,39463,39479,39492,39504,39517,39530,39541,39553,39565],{},[905,39440,39441,39446,39449],{},[923,39442,39443],{"align":969},[1673,39444,39445],{},"textureWidth",[923,39447,39448],{"align":969},"Width of the mirror texture",[923,39450,34066],{},[905,39452,39453,39458,39461],{},[923,39454,39455],{"align":969},[1673,39456,39457],{},"textureHeight",[923,39459,39460],{"align":969},"Height of the mirror texture",[923,39462,34066],{},[905,39464,39465,39470,39473],{},[923,39466,39467],{"align":969},[1673,39468,39469],{},"waterNormals",[923,39471,39472],{"align":969},"Normals of the water",[923,39474,39475],{},[1112,39476,39477],{"href":39477,"rel":39478},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/water-normals/Water_1_M_Normal.jpg",[1116],[905,39480,39481,39486,39489],{},[923,39482,39483],{"align":969},[1673,39484,39485],{},"sunDirection",[923,39487,39488],{"align":969},"Sun direction to be reflected on the water",[923,39490,39491],{},"Vector3(0,0,0)",[905,39493,39494,39499,39502],{},[923,39495,39496],{"align":969},[1673,39497,39498],{},"sunColor",[923,39500,39501],{"align":969},"Sun color to be reflected on the water",[923,39503,38670],{},[905,39505,39506,39511,39514],{},[923,39507,39508],{"align":969},[1673,39509,39510],{},"waterColor",[923,39512,39513],{"align":969},"Water Color",[923,39515,39516],{},"0x001e0f",[905,39518,39519,39524,39527],{},[923,39520,39521],{"align":969},[1673,39522,39523],{},"distortionScale",[923,39525,39526],{"align":969},"Distortion scale on reflected objects",[923,39528,39529],{},"3.7",[905,39531,39532,39536,39539],{},[923,39533,39534],{"align":969},[1673,39535,10233],{},[923,39537,39538],{"align":969},"Size of the water normals",[923,39540,1893],{},[905,39542,39543,39548,39551],{},[923,39544,39545],{"align":969},[1673,39546,39547],{},"clipBias",[923,39549,39550],{"align":969},"To use the clipBias property",[923,39552,7207],{},[905,39554,39555,39560,39563],{},[923,39556,39557],{"align":969},[1673,39558,39559],{},"alpha",[923,39561,39562],{"align":969},"To use the clipBias Alpha",[923,39564,7085],{},[905,39566,39567,39571,39574],{},[923,39568,39569],{"align":969},[1673,39570,19976],{},[923,39572,39573],{"align":969},"Which size of the mesh will render the water",[923,39575,21204],{},[1299,39577,39578],{},"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":544,"searchDepth":545,"depth":546,"links":39580},[39581,39585,39586],{"id":592,"depth":546,"text":15,"children":39582},[39583,39584],{"id":39212,"depth":676,"text":39213},{"id":33581,"depth":676,"text":39225},{"id":39243,"depth":546,"text":39244},{"id":893,"depth":546,"text":894},"Wrapper for the Three.js Water add-on with sky reflection support.",{},{"title":363,"description":39587},"PlsqVmWWdW6g0Gw3o8T0ocKMTLkrZyHWHr7HgkjrnMk",{"id":39592,"title":367,"body":39593,"description":40633,"extension":559,"links":560,"meta":40634,"navigation":562,"path":368,"seo":40635,"stem":369,"__hash__":40636},"docs/2.api/8.staging/precipitation.md",{"type":469,"value":39594,"toc":40625},[39595,39600,39606,39608,39614,39771,39775,39778,39985,39989,39992,40197,40201,40204,40450,40453,40458,40460,40623],[576,39596,39597],{},[39598,39599],"staging-precipitation",{},[582,39601,39602,39605],{},[586,39603,39604],{},"\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.",[472,39607,15],{"id":592},[582,39609,39610,39611,39613],{},"You can use ",[586,39612,39604],{}," component without passing any props, this will achieve a snowy effect, like the before example.",[594,39615,39618],{"className":596,"code":39616,"highlights":39617,"language":601,"meta":544,"style":544},"\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",[676,758],[586,39619,39620,39640,39658,39678,39686,39690,39698,39706,39738,39747,39755,39763],{"__ignoreMap":544},[605,39621,39622,39624,39626,39628,39630,39632,39634,39636,39638],{"class":607,"line":545},[605,39623,611],{"class":610},[605,39625,615],{"class":614},[605,39627,619],{"class":618},[605,39629,622],{"class":618},[605,39631,625],{"class":610},[605,39633,628],{"class":610},[605,39635,632],{"class":631},[605,39637,628],{"class":610},[605,39639,637],{"class":610},[605,39641,39642,39644,39646,39648,39650,39652,39654,39656],{"class":607,"line":546},[605,39643,645],{"class":644},[605,39645,648],{"class":610},[605,39647,683],{"class":651},[605,39649,661],{"class":610},[605,39651,664],{"class":644},[605,39653,667],{"class":610},[605,39655,692],{"class":631},[605,39657,673],{"class":610},[605,39659,39661,39663,39665,39668,39670,39672,39674,39676],{"class":39660,"line":676},[607,641],[605,39662,645],{"class":644},[605,39664,648],{"class":610},[605,39666,39667],{"class":651}," Precipitation",[605,39669,661],{"class":610},[605,39671,664],{"class":644},[605,39673,667],{"class":610},[605,39675,670],{"class":631},[605,39677,673],{"class":610},[605,39679,39680,39682,39684],{"class":607,"line":697},[605,39681,700],{"class":610},[605,39683,615],{"class":614},[605,39685,637],{"class":610},[605,39687,39688],{"class":607,"line":707},[605,39689,710],{"emptyLinePlaceholder":562},[605,39691,39692,39694,39696],{"class":607,"line":713},[605,39693,611],{"class":610},[605,39695,718],{"class":614},[605,39697,637],{"class":610},[605,39699,39700,39702,39704],{"class":607,"line":723},[605,39701,726],{"class":610},[605,39703,729],{"class":614},[605,39705,637],{"class":610},[605,39707,39708,39710,39712,39714,39716,39718,39720,39722,39724,39726,39728,39730,39732,39734,39736],{"class":607,"line":746},[605,39709,749],{"class":610},[605,39711,752],{"class":614},[605,39713,781],{"class":610},[605,39715,1459],{"class":618},[605,39717,625],{"class":610},[605,39719,628],{"class":610},[605,39721,1466],{"class":610},[605,39723,937],{"class":791},[605,39725,1471],{"class":610},[605,39727,4160],{"class":791},[605,39729,1471],{"class":610},[605,39731,2396],{"class":791},[605,39733,1481],{"class":610},[605,39735,628],{"class":610},[605,39737,755],{"class":610},[605,39739,39741,39743,39745],{"class":39740,"line":758},[607,641],[605,39742,749],{"class":610},[605,39744,367],{"class":614},[605,39746,755],{"class":610},[605,39748,39749,39751,39753],{"class":607,"line":768},[605,39750,749],{"class":610},[605,39752,3518],{"class":614},[605,39754,755],{"class":610},[605,39756,39757,39759,39761],{"class":607,"line":773},[605,39758,877],{"class":610},[605,39760,729],{"class":614},[605,39762,637],{"class":610},[605,39764,39765,39767,39769],{"class":607,"line":799},[605,39766,700],{"class":610},[605,39768,718],{"class":614},[605,39770,637],{"class":610},[7473,39772,39774],{"id":39773},"rain","Rain",[582,39776,39777],{},"By setting the randomness to 0, increase the speed  and reduce the count. You can easily achieve a more rainy effect.",[594,39779,39782],{"className":596,"code":39780,"highlights":39781,"language":601,"meta":544,"style":544},"\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",[676,758,768,773,799,599],[586,39783,39784,39804,39822,39841,39849,39853,39861,39869,39901,39909,39925,39940,39956,39961,39969,39977],{"__ignoreMap":544},[605,39785,39786,39788,39790,39792,39794,39796,39798,39800,39802],{"class":607,"line":545},[605,39787,611],{"class":610},[605,39789,615],{"class":614},[605,39791,619],{"class":618},[605,39793,622],{"class":618},[605,39795,625],{"class":610},[605,39797,628],{"class":610},[605,39799,632],{"class":631},[605,39801,628],{"class":610},[605,39803,637],{"class":610},[605,39805,39806,39808,39810,39812,39814,39816,39818,39820],{"class":607,"line":546},[605,39807,645],{"class":644},[605,39809,648],{"class":610},[605,39811,683],{"class":651},[605,39813,661],{"class":610},[605,39815,664],{"class":644},[605,39817,667],{"class":610},[605,39819,692],{"class":631},[605,39821,673],{"class":610},[605,39823,39825,39827,39829,39831,39833,39835,39837,39839],{"class":39824,"line":676},[607,641],[605,39826,645],{"class":644},[605,39828,648],{"class":610},[605,39830,39667],{"class":651},[605,39832,661],{"class":610},[605,39834,664],{"class":644},[605,39836,667],{"class":610},[605,39838,670],{"class":631},[605,39840,673],{"class":610},[605,39842,39843,39845,39847],{"class":607,"line":697},[605,39844,700],{"class":610},[605,39846,615],{"class":614},[605,39848,637],{"class":610},[605,39850,39851],{"class":607,"line":707},[605,39852,710],{"emptyLinePlaceholder":562},[605,39854,39855,39857,39859],{"class":607,"line":713},[605,39856,611],{"class":610},[605,39858,718],{"class":614},[605,39860,637],{"class":610},[605,39862,39863,39865,39867],{"class":607,"line":723},[605,39864,726],{"class":610},[605,39866,729],{"class":614},[605,39868,637],{"class":610},[605,39870,39871,39873,39875,39877,39879,39881,39883,39885,39887,39889,39891,39893,39895,39897,39899],{"class":607,"line":746},[605,39872,749],{"class":610},[605,39874,752],{"class":614},[605,39876,781],{"class":610},[605,39878,1459],{"class":618},[605,39880,625],{"class":610},[605,39882,628],{"class":610},[605,39884,1466],{"class":610},[605,39886,937],{"class":791},[605,39888,1471],{"class":610},[605,39890,4160],{"class":791},[605,39892,1471],{"class":610},[605,39894,2396],{"class":791},[605,39896,1481],{"class":610},[605,39898,628],{"class":610},[605,39900,755],{"class":610},[605,39902,39904,39906],{"class":39903,"line":758},[607,641],[605,39905,749],{"class":610},[605,39907,39908],{"class":614},"Precipitation\n",[605,39910,39912,39914,39916,39918,39920,39923],{"class":39911,"line":768},[607,641],[605,39913,5693],{"class":610},[605,39915,5100],{"class":618},[605,39917,625],{"class":610},[605,39919,628],{"class":610},[605,39921,39922],{"class":791},"2000",[605,39924,2987],{"class":610},[605,39926,39928,39930,39932,39934,39936,39938],{"class":39927,"line":773},[607,641],[605,39929,5693],{"class":610},[605,39931,3483],{"class":618},[605,39933,625],{"class":610},[605,39935,628],{"class":610},[605,39937,32203],{"class":791},[605,39939,2987],{"class":610},[605,39941,39943,39945,39948,39950,39952,39954],{"class":39942,"line":799},[607,641],[605,39944,5693],{"class":610},[605,39946,39947],{"class":618},"randomness",[605,39949,625],{"class":610},[605,39951,628],{"class":610},[605,39953,937],{"class":791},[605,39955,2987],{"class":610},[605,39957,39959],{"class":39958,"line":599},[607,641],[605,39960,10816],{"class":610},[605,39962,39963,39965,39967],{"class":607,"line":822},[605,39964,749],{"class":610},[605,39966,3518],{"class":614},[605,39968,755],{"class":610},[605,39970,39971,39973,39975],{"class":607,"line":833},[605,39972,877],{"class":610},[605,39974,729],{"class":614},[605,39976,637],{"class":610},[605,39978,39979,39981,39983],{"class":607,"line":844},[605,39980,700],{"class":610},[605,39982,718],{"class":614},[605,39984,637],{"class":610},[7473,39986,39988],{"id":39987},"storm","Storm",[582,39990,39991],{},"A storm effect? Easy just increase the randomness.",[594,39993,39996],{"className":596,"code":39994,"highlights":39995,"language":601,"meta":544,"style":544},"\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",[676,758,768,773,799,599],[586,39997,39998,40018,40036,40055,40063,40067,40075,40083,40115,40122,40138,40153,40168,40173,40181,40189],{"__ignoreMap":544},[605,39999,40000,40002,40004,40006,40008,40010,40012,40014,40016],{"class":607,"line":545},[605,40001,611],{"class":610},[605,40003,615],{"class":614},[605,40005,619],{"class":618},[605,40007,622],{"class":618},[605,40009,625],{"class":610},[605,40011,628],{"class":610},[605,40013,632],{"class":631},[605,40015,628],{"class":610},[605,40017,637],{"class":610},[605,40019,40020,40022,40024,40026,40028,40030,40032,40034],{"class":607,"line":546},[605,40021,645],{"class":644},[605,40023,648],{"class":610},[605,40025,683],{"class":651},[605,40027,661],{"class":610},[605,40029,664],{"class":644},[605,40031,667],{"class":610},[605,40033,692],{"class":631},[605,40035,673],{"class":610},[605,40037,40039,40041,40043,40045,40047,40049,40051,40053],{"class":40038,"line":676},[607,641],[605,40040,645],{"class":644},[605,40042,648],{"class":610},[605,40044,39667],{"class":651},[605,40046,661],{"class":610},[605,40048,664],{"class":644},[605,40050,667],{"class":610},[605,40052,670],{"class":631},[605,40054,673],{"class":610},[605,40056,40057,40059,40061],{"class":607,"line":697},[605,40058,700],{"class":610},[605,40060,615],{"class":614},[605,40062,637],{"class":610},[605,40064,40065],{"class":607,"line":707},[605,40066,710],{"emptyLinePlaceholder":562},[605,40068,40069,40071,40073],{"class":607,"line":713},[605,40070,611],{"class":610},[605,40072,718],{"class":614},[605,40074,637],{"class":610},[605,40076,40077,40079,40081],{"class":607,"line":723},[605,40078,726],{"class":610},[605,40080,729],{"class":614},[605,40082,637],{"class":610},[605,40084,40085,40087,40089,40091,40093,40095,40097,40099,40101,40103,40105,40107,40109,40111,40113],{"class":607,"line":746},[605,40086,749],{"class":610},[605,40088,752],{"class":614},[605,40090,781],{"class":610},[605,40092,1459],{"class":618},[605,40094,625],{"class":610},[605,40096,628],{"class":610},[605,40098,1466],{"class":610},[605,40100,937],{"class":791},[605,40102,1471],{"class":610},[605,40104,4160],{"class":791},[605,40106,1471],{"class":610},[605,40108,2396],{"class":791},[605,40110,1481],{"class":610},[605,40112,628],{"class":610},[605,40114,755],{"class":610},[605,40116,40118,40120],{"class":40117,"line":758},[607,641],[605,40119,749],{"class":610},[605,40121,39908],{"class":614},[605,40123,40125,40127,40129,40131,40133,40136],{"class":40124,"line":768},[607,641],[605,40126,5693],{"class":610},[605,40128,5100],{"class":618},[605,40130,625],{"class":610},[605,40132,628],{"class":610},[605,40134,40135],{"class":791},"3000",[605,40137,2987],{"class":610},[605,40139,40141,40143,40145,40147,40149,40151],{"class":40140,"line":773},[607,641],[605,40142,5693],{"class":610},[605,40144,3483],{"class":618},[605,40146,625],{"class":610},[605,40148,628],{"class":610},[605,40150,1513],{"class":791},[605,40152,2987],{"class":610},[605,40154,40156,40158,40160,40162,40164,40166],{"class":40155,"line":799},[607,641],[605,40157,5693],{"class":610},[605,40159,39947],{"class":618},[605,40161,625],{"class":610},[605,40163,628],{"class":610},[605,40165,9877],{"class":791},[605,40167,2987],{"class":610},[605,40169,40171],{"class":40170,"line":599},[607,641],[605,40172,10816],{"class":610},[605,40174,40175,40177,40179],{"class":607,"line":822},[605,40176,749],{"class":610},[605,40178,3518],{"class":614},[605,40180,755],{"class":610},[605,40182,40183,40185,40187],{"class":607,"line":833},[605,40184,877],{"class":610},[605,40186,729],{"class":614},[605,40188,637],{"class":610},[605,40190,40191,40193,40195],{"class":607,"line":844},[605,40192,700],{"class":610},[605,40194,718],{"class":614},[605,40196,637],{"class":610},[7473,40198,40200],{"id":40199},"beam","Beam",[582,40202,40203],{},"What about an infinite beam? Just set the area, to the axis that you need constrain.",[594,40205,40208],{"className":596,"code":40206,"highlights":40207,"language":601,"meta":544,"style":544},"\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",[676,758,768,773,799,599,822,833],[586,40209,40210,40230,40248,40267,40275,40279,40287,40295,40327,40334,40362,40377,40392,40407,40421,40426,40434,40442],{"__ignoreMap":544},[605,40211,40212,40214,40216,40218,40220,40222,40224,40226,40228],{"class":607,"line":545},[605,40213,611],{"class":610},[605,40215,615],{"class":614},[605,40217,619],{"class":618},[605,40219,622],{"class":618},[605,40221,625],{"class":610},[605,40223,628],{"class":610},[605,40225,632],{"class":631},[605,40227,628],{"class":610},[605,40229,637],{"class":610},[605,40231,40232,40234,40236,40238,40240,40242,40244,40246],{"class":607,"line":546},[605,40233,645],{"class":644},[605,40235,648],{"class":610},[605,40237,683],{"class":651},[605,40239,661],{"class":610},[605,40241,664],{"class":644},[605,40243,667],{"class":610},[605,40245,692],{"class":631},[605,40247,673],{"class":610},[605,40249,40251,40253,40255,40257,40259,40261,40263,40265],{"class":40250,"line":676},[607,641],[605,40252,645],{"class":644},[605,40254,648],{"class":610},[605,40256,39667],{"class":651},[605,40258,661],{"class":610},[605,40260,664],{"class":644},[605,40262,667],{"class":610},[605,40264,670],{"class":631},[605,40266,673],{"class":610},[605,40268,40269,40271,40273],{"class":607,"line":697},[605,40270,700],{"class":610},[605,40272,615],{"class":614},[605,40274,637],{"class":610},[605,40276,40277],{"class":607,"line":707},[605,40278,710],{"emptyLinePlaceholder":562},[605,40280,40281,40283,40285],{"class":607,"line":713},[605,40282,611],{"class":610},[605,40284,718],{"class":614},[605,40286,637],{"class":610},[605,40288,40289,40291,40293],{"class":607,"line":723},[605,40290,726],{"class":610},[605,40292,729],{"class":614},[605,40294,637],{"class":610},[605,40296,40297,40299,40301,40303,40305,40307,40309,40311,40313,40315,40317,40319,40321,40323,40325],{"class":607,"line":746},[605,40298,749],{"class":610},[605,40300,752],{"class":614},[605,40302,781],{"class":610},[605,40304,1459],{"class":618},[605,40306,625],{"class":610},[605,40308,628],{"class":610},[605,40310,1466],{"class":610},[605,40312,937],{"class":791},[605,40314,1471],{"class":610},[605,40316,4160],{"class":791},[605,40318,1471],{"class":610},[605,40320,2396],{"class":791},[605,40322,1481],{"class":610},[605,40324,628],{"class":610},[605,40326,755],{"class":610},[605,40328,40330,40332],{"class":40329,"line":758},[607,641],[605,40331,749],{"class":610},[605,40333,39908],{"class":614},[605,40335,40337,40339,40342,40344,40346,40348,40350,40352,40354,40356,40358,40360],{"class":40336,"line":768},[607,641],[605,40338,5693],{"class":610},[605,40340,40341],{"class":618},"area",[605,40343,625],{"class":610},[605,40345,628],{"class":610},[605,40347,1466],{"class":610},[605,40349,1513],{"class":791},[605,40351,1471],{"class":610},[605,40353,1513],{"class":791},[605,40355,1471],{"class":610},[605,40357,23469],{"class":791},[605,40359,1481],{"class":610},[605,40361,2987],{"class":610},[605,40363,40365,40367,40369,40371,40373,40375],{"class":40364,"line":773},[607,641],[605,40366,5693],{"class":610},[605,40368,5100],{"class":618},[605,40370,625],{"class":610},[605,40372,628],{"class":610},[605,40374,5165],{"class":791},[605,40376,2987],{"class":610},[605,40378,40380,40382,40384,40386,40388,40390],{"class":40379,"line":799},[607,641],[605,40381,5693],{"class":610},[605,40383,3483],{"class":618},[605,40385,625],{"class":610},[605,40387,628],{"class":610},[605,40389,8085],{"class":791},[605,40391,2987],{"class":610},[605,40393,40395,40397,40399,40401,40403,40405],{"class":40394,"line":599},[607,641],[605,40396,5693],{"class":610},[605,40398,10233],{"class":618},[605,40400,625],{"class":610},[605,40402,628],{"class":610},[605,40404,32203],{"class":791},[605,40406,2987],{"class":610},[605,40408,40410,40412,40414,40416,40419],{"class":40409,"line":822},[607,641],[605,40411,23371],{"class":618},[605,40413,625],{"class":610},[605,40415,628],{"class":610},[605,40417,40418],{"class":631},"#00ff00",[605,40420,2987],{"class":610},[605,40422,40424],{"class":40423,"line":833},[607,641],[605,40425,10816],{"class":610},[605,40427,40428,40430,40432],{"class":607,"line":844},[605,40429,749],{"class":610},[605,40431,3518],{"class":614},[605,40433,755],{"class":610},[605,40435,40436,40438,40440],{"class":607,"line":854},[605,40437,877],{"class":610},[605,40439,729],{"class":614},[605,40441,637],{"class":610},[605,40443,40444,40446,40448],{"class":607,"line":600},[605,40445,700],{"class":610},[605,40447,718],{"class":614},[605,40449,637],{"class":610},[582,40451,40452],{},"You can create much more! ☔",[3725,40454,40455],{},[582,40456,40457],{},"Be careful with the performance this components render infinite particles in movement",[472,40459,894],{"id":893},[899,40461,40462,40472],{},[902,40463,40464],{},[905,40465,40466,40468,40470],{},[908,40467,910],{"align":969},[908,40469,913],{"align":969},[908,40471,916],{},[918,40473,40474,40485,40499,40510,40521,40533,40544,40555,40567,40578,40589,40600,40611],{},[905,40475,40476,40480,40483],{},[923,40477,40478],{"align":969},[1673,40479,10233],{},[923,40481,40482],{"align":969},"The size of the drops.",[923,40484,2203],{},[905,40486,40487,40491,40494],{},[923,40488,40489],{"align":969},[1673,40490,40341],{},[923,40492,40493],{"align":969},"The size of the precipitation area.",[923,40495,40496],{},[605,40497,40498],{},"10, 10, 20",[905,40500,40501,40505,40508],{},[923,40502,40503],{"align":969},[1673,40504,2500],{},[923,40506,40507],{"align":969},"The color of the drops.",[923,40509,38670],{},[905,40511,40512,40516,40519],{},[923,40513,40514],{"align":969},[1673,40515,13426],{},[923,40517,40518],{"align":969},"Color texture of the drops.",[923,40520,3152],{},[905,40522,40523,40528,40531],{},[923,40524,40525],{"align":969},[1673,40526,40527],{},"alphaMap",[923,40529,40530],{"align":969},"Alpha texture of the Drops.",[923,40532,3152],{},[905,40534,40535,40539,40542],{},[923,40536,40537],{"align":969},[1673,40538,32470],{},[923,40540,40541],{"align":969},"Enables the WebGL to know when not to render the pixel.",[923,40543,1907],{},[905,40545,40546,40550,40553],{},[923,40547,40548],{"align":969},[1673,40549,4861],{},[923,40551,40552],{"align":969},"Set the opacity of the drops.",[923,40554,18051],{},[905,40556,40557,40561,40564],{},[923,40558,40559],{"align":969},[1673,40560,5100],{},[923,40562,40563],{"align":969},"Number of drops.",[923,40565,40566],{},"5000",[905,40568,40569,40573,40576],{},[923,40570,40571],{"align":969},[1673,40572,3483],{},[923,40574,40575],{"align":969},"Drops speed.",[923,40577,2203],{},[905,40579,40580,40584,40587],{},[923,40581,40582],{"align":969},[1673,40583,39947],{},[923,40585,40586],{"align":969},"Add randomness to the drops.",[923,40588,1513],{},[905,40590,40591,40595,40598],{},[923,40592,40593],{"align":969},[1673,40594,4334],{},[923,40596,40597],{"align":969},"Whether should write to the depth buffer or not. drops.",[923,40599,933],{},[905,40601,40602,40606,40609],{},[923,40603,40604],{"align":969},[1673,40605,4873],{},[923,40607,40608],{"align":969},"Transparency on the drops texture",[923,40610,943],{},[905,40612,40613,40618,40621],{},[923,40614,40615],{"align":969},[1673,40616,40617],{},"sizeAttenuation",[923,40619,40620],{"align":969},"Keep the same size regardless distance. drops.",[923,40622,933],{},[1299,40624,1648],{},{"title":544,"searchDepth":545,"depth":546,"links":40626},[40627,40632],{"id":592,"depth":546,"text":15,"children":40628},[40629,40630,40631],{"id":39773,"depth":676,"text":39774},{"id":39987,"depth":676,"text":39988},{"id":40199,"depth":676,"text":40200},{"id":893,"depth":546,"text":894},"Flexible infinite particle flow for rain, snow, waterfall, and beam effects.",{},{"title":367,"description":40633},"oN0a-7Db4CfLOwRF8vcglYxi0o3twbiI7bqgn-6GqoY",{"id":40638,"title":371,"body":40639,"description":41049,"extension":559,"links":560,"meta":41050,"navigation":562,"path":372,"seo":41051,"stem":373,"__hash__":41052},"docs/2.api/8.staging/sky.md",{"type":469,"value":40640,"toc":41045},[40641,40646,40656,40658,40862,40864,41043],[576,40642,40643],{},[40644,40645],"staging-sky",{},[582,40647,40648,39060,40650,1118],{},[586,40649,39221],{},[1112,40651,39065,40654,39069],{"href":40652,"rel":40653},"https://threejs.org/examples/?q=sky#webgl_shaders_sky",[1116],[586,40655,371],{},[472,40657,15],{"id":592},[594,40659,40662],{"className":596,"code":40660,"highlights":40661,"language":601,"meta":544,"style":544},"\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",[546,758],[586,40663,40664,40684,40708,40726,40734,40738,40746,40767,40801,40810,40818,40846,40854],{"__ignoreMap":544},[605,40665,40666,40668,40670,40672,40674,40676,40678,40680,40682],{"class":607,"line":545},[605,40667,611],{"class":610},[605,40669,615],{"class":614},[605,40671,619],{"class":618},[605,40673,622],{"class":618},[605,40675,625],{"class":610},[605,40677,628],{"class":610},[605,40679,632],{"class":631},[605,40681,628],{"class":610},[605,40683,637],{"class":610},[605,40685,40687,40689,40691,40693,40695,40698,40700,40702,40704,40706],{"class":40686,"line":546},[607,641],[605,40688,645],{"class":644},[605,40690,648],{"class":610},[605,40692,658],{"class":651},[605,40694,655],{"class":610},[605,40696,40697],{"class":651}," Sky",[605,40699,661],{"class":610},[605,40701,664],{"class":644},[605,40703,667],{"class":610},[605,40705,670],{"class":631},[605,40707,673],{"class":610},[605,40709,40710,40712,40714,40716,40718,40720,40722,40724],{"class":607,"line":676},[605,40711,645],{"class":644},[605,40713,648],{"class":610},[605,40715,683],{"class":651},[605,40717,661],{"class":610},[605,40719,664],{"class":644},[605,40721,667],{"class":610},[605,40723,692],{"class":631},[605,40725,673],{"class":610},[605,40727,40728,40730,40732],{"class":607,"line":697},[605,40729,700],{"class":610},[605,40731,615],{"class":614},[605,40733,637],{"class":610},[605,40735,40736],{"class":607,"line":707},[605,40737,710],{"emptyLinePlaceholder":562},[605,40739,40740,40742,40744],{"class":607,"line":713},[605,40741,611],{"class":610},[605,40743,718],{"class":614},[605,40745,637],{"class":610},[605,40747,40748,40750,40752,40754,40757,40759,40761,40763,40765],{"class":607,"line":723},[605,40749,726],{"class":610},[605,40751,729],{"class":614},[605,40753,781],{"class":610},[605,40755,40756],{"class":618},"tone-mapping-exposure",[605,40758,625],{"class":610},[605,40760,628],{"class":610},[605,40762,7041],{"class":791},[605,40764,628],{"class":610},[605,40766,637],{"class":610},[605,40768,40769,40771,40773,40775,40777,40779,40781,40783,40785,40787,40790,40792,40795,40797,40799],{"class":607,"line":746},[605,40770,749],{"class":610},[605,40772,752],{"class":614},[605,40774,781],{"class":610},[605,40776,1459],{"class":618},[605,40778,625],{"class":610},[605,40780,628],{"class":610},[605,40782,1466],{"class":610},[605,40784,937],{"class":791},[605,40786,1471],{"class":610},[605,40788,40789],{"class":791},"15",[605,40791,1471],{"class":610},[605,40793,40794],{"class":791},"200",[605,40796,1481],{"class":610},[605,40798,628],{"class":610},[605,40800,755],{"class":610},[605,40802,40804,40806,40808],{"class":40803,"line":758},[607,641],[605,40805,749],{"class":610},[605,40807,371],{"class":614},[605,40809,755],{"class":610},[605,40811,40812,40814,40816],{"class":607,"line":768},[605,40813,749],{"class":610},[605,40815,763],{"class":614},[605,40817,755],{"class":610},[605,40819,40820,40822,40824,40826,40828,40830,40832,40834,40836,40838,40840,40842,40844],{"class":607,"line":773},[605,40821,749],{"class":610},[605,40823,3067],{"class":614},[605,40825,781],{"class":610},[605,40827,1989],{"class":618},[605,40829,625],{"class":610},[605,40831,628],{"class":610},[605,40833,1466],{"class":610},[605,40835,5165],{"class":791},[605,40837,1471],{"class":610},[605,40839,23469],{"class":791},[605,40841,1481],{"class":610},[605,40843,628],{"class":610},[605,40845,755],{"class":610},[605,40847,40848,40850,40852],{"class":607,"line":799},[605,40849,877],{"class":610},[605,40851,729],{"class":614},[605,40853,637],{"class":610},[605,40855,40856,40858,40860],{"class":607,"line":599},[605,40857,700],{"class":610},[605,40859,718],{"class":614},[605,40861,637],{"class":610},[472,40863,894],{"id":893},[899,40865,40866,40880],{},[902,40867,40868],{},[905,40869,40870,40872,40874,40876,40878],{},[908,40871,3118],{"align":969},[908,40873,10957],{"align":969},[908,40875,913],{"align":969},[908,40877,916],{"align":969},[908,40879,26998],{"align":969},[918,40881,40882,40903,40927,40953,40976,40996,41023],{},[905,40883,40884,40889,40893,40896,40901],{},[923,40885,40886],{"align":969},[1673,40887,40888],{},"turbidity",[923,40890,40891],{"align":969},[586,40892,2537],{},[923,40894,40895],{"align":969},"Haziness",[923,40897,40898],{"align":969},[586,40899,40900],{},"3.4",[923,40902,39011],{"align":969},[905,40904,40905,40910,40914,40921,40925],{},[923,40906,40907],{"align":969},[1673,40908,40909],{},"rayleigh",[923,40911,40912],{"align":969},[586,40913,2537],{},[923,40915,40916],{"align":969},[1112,40917,40920],{"href":40918,"rel":40919},"https://en.wikipedia.org/wiki/Rayleigh_scattering",[1116],"Rayleigh scattering",[923,40922,40923],{"align":969},[586,40924,4160],{},[923,40926,39011],{"align":969},[905,40928,40929,40934,40938,40946,40951],{},[923,40930,40931],{"align":969},[1673,40932,40933],{},"mieCoefficient",[923,40935,40936],{"align":969},[586,40937,2537],{},[923,40939,40940,40945],{"align":969},[1112,40941,40944],{"href":40942,"rel":40943},"https://en.wikipedia.org/wiki/Mie_scattering",[1116],"Mie scattering"," amount",[923,40947,40948],{"align":969},[586,40949,40950],{},"0.005",[923,40952,39011],{"align":969},[905,40954,40955,40960,40964,40970,40974],{},[923,40956,40957],{"align":969},[1673,40958,40959],{},"mieDirectionalG",[923,40961,40962],{"align":969},[586,40963,2537],{},[923,40965,40966,40969],{"align":969},[1112,40967,40944],{"href":40942,"rel":40968},[1116]," direction",[923,40971,40972],{"align":969},[586,40973,33784],{},[923,40975,39011],{"align":969},[905,40977,40978,40983,40987,40990,40994],{},[923,40979,40980],{"align":969},[1673,40981,40982],{},"elevation",[923,40984,40985],{"align":969},[586,40986,2537],{},[923,40988,40989],{"align":969},"Sun's elevation from the horizon, in degrees",[923,40991,40992],{"align":969},[586,40993,22775],{},[923,40995,39011],{"align":969},[905,40997,40998,41003,41007,41016,41021],{},[923,40999,41000],{"align":969},[1673,41001,41002],{},"azimuth",[923,41004,41005],{"align":969},[586,41006,2537],{},[923,41008,41009,41010,41015],{"align":969},"Sun's ",[1112,41011,41014],{"href":41012,"rel":41013},"https://en.wikipedia.org/wiki/Solar_azimuth_angle",[1116],"azimuth angle",", in degrees – its horizontal coordinate on the horizon",[923,41017,41018],{"align":969},[586,41019,41020],{},"180",[923,41022,39011],{"align":969},[905,41024,41025,41029,41033,41036,41041],{},[923,41026,41027],{"align":969},[1673,41028,6945],{},[923,41030,41031],{"align":969},[586,41032,2537],{},[923,41034,41035],{"align":969},"Sky box scale",[923,41037,41038],{"align":969},[586,41039,41040],{},"450000",[923,41042,39011],{"align":969},[1299,41044,1648],{},{"title":544,"searchDepth":545,"depth":546,"links":41046},[41047,41048],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},"Wrapper for the Three.js Sky add-on with sun position controls.",{},{"title":371,"description":41049},"z9xEmwuzWS7Jr3s3_7eT9BeV1McRoKp3ZlWGZa_0yWI",{"id":41054,"title":375,"body":41055,"description":41460,"extension":559,"links":560,"meta":41461,"navigation":562,"path":376,"seo":41462,"stem":377,"__hash__":41463},"docs/2.api/8.staging/smoke.md",{"type":469,"value":41056,"toc":41454},[41057,41062,41068,41070,41075,41080,41250,41252,41444,41448,41452],[2558,41058,41059],{},[41060,41061],"staging-smoke",{},[582,41063,41064,41067],{},[586,41065,41066],{},"\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",[472,41069,15],{"id":592},[3725,41071,41072],{},[582,41073,41074],{},"Smoke component comes with a default texture abstraction it needs to be wrapped by a Suspense component",[582,41076,39610,41077,41079],{},[586,41078,41066],{}," component without passing any props, but still if you want you can tweak the props to find the best setup for you",[594,41081,41083],{"className":596,"code":41082,"language":601,"meta":544,"style":544},"\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",[586,41084,41085,41105,41123,41142,41150,41154,41162,41170,41202,41210,41218,41226,41234,41242],{"__ignoreMap":544},[605,41086,41087,41089,41091,41093,41095,41097,41099,41101,41103],{"class":607,"line":545},[605,41088,611],{"class":610},[605,41090,615],{"class":614},[605,41092,619],{"class":618},[605,41094,622],{"class":618},[605,41096,625],{"class":610},[605,41098,628],{"class":610},[605,41100,632],{"class":631},[605,41102,628],{"class":610},[605,41104,637],{"class":610},[605,41106,41107,41109,41111,41113,41115,41117,41119,41121],{"class":607,"line":546},[605,41108,645],{"class":644},[605,41110,648],{"class":610},[605,41112,683],{"class":651},[605,41114,661],{"class":610},[605,41116,664],{"class":644},[605,41118,667],{"class":610},[605,41120,692],{"class":631},[605,41122,673],{"class":610},[605,41124,41125,41127,41129,41132,41134,41136,41138,41140],{"class":607,"line":676},[605,41126,645],{"class":644},[605,41128,648],{"class":610},[605,41130,41131],{"class":651}," Smoke",[605,41133,661],{"class":610},[605,41135,664],{"class":644},[605,41137,667],{"class":610},[605,41139,670],{"class":631},[605,41141,673],{"class":610},[605,41143,41144,41146,41148],{"class":607,"line":697},[605,41145,700],{"class":610},[605,41147,615],{"class":614},[605,41149,637],{"class":610},[605,41151,41152],{"class":607,"line":707},[605,41153,710],{"emptyLinePlaceholder":562},[605,41155,41156,41158,41160],{"class":607,"line":713},[605,41157,611],{"class":610},[605,41159,718],{"class":614},[605,41161,637],{"class":610},[605,41163,41164,41166,41168],{"class":607,"line":723},[605,41165,726],{"class":610},[605,41167,729],{"class":614},[605,41169,637],{"class":610},[605,41171,41172,41174,41176,41178,41180,41182,41184,41186,41188,41190,41192,41194,41196,41198,41200],{"class":607,"line":746},[605,41173,749],{"class":610},[605,41175,752],{"class":614},[605,41177,781],{"class":610},[605,41179,1459],{"class":618},[605,41181,625],{"class":610},[605,41183,628],{"class":610},[605,41185,1466],{"class":610},[605,41187,937],{"class":791},[605,41189,1471],{"class":610},[605,41191,4160],{"class":791},[605,41193,1471],{"class":610},[605,41195,2396],{"class":791},[605,41197,1481],{"class":610},[605,41199,628],{"class":610},[605,41201,755],{"class":610},[605,41203,41204,41206,41208],{"class":607,"line":758},[605,41205,749],{"class":610},[605,41207,14995],{"class":614},[605,41209,637],{"class":610},[605,41211,41212,41214,41216],{"class":607,"line":768},[605,41213,825],{"class":610},[605,41215,375],{"class":614},[605,41217,755],{"class":610},[605,41219,41220,41222,41224],{"class":607,"line":773},[605,41221,867],{"class":610},[605,41223,14995],{"class":614},[605,41225,637],{"class":610},[605,41227,41228,41230,41232],{"class":607,"line":799},[605,41229,749],{"class":610},[605,41231,3518],{"class":614},[605,41233,755],{"class":610},[605,41235,41236,41238,41240],{"class":607,"line":599},[605,41237,877],{"class":610},[605,41239,729],{"class":614},[605,41241,637],{"class":610},[605,41243,41244,41246,41248],{"class":607,"line":822},[605,41245,700],{"class":610},[605,41247,718],{"class":614},[605,41249,637],{"class":610},[472,41251,894],{"id":893},[899,41253,41254,41266],{},[902,41255,41256],{},[905,41257,41258,41260,41262,41264],{},[908,41259,3118],{"align":969},[908,41261,10957],{"align":969},[908,41263,913],{"align":969},[908,41265,916],{"align":969},[918,41267,41268,41286,41303,41320,41337,41354,41374,41392,41410,41428],{},[905,41269,41270,41274,41278,41281],{},[923,41271,41272],{"align":969},[1673,41273,2500],{},[923,41275,41276],{"align":969},[586,41277,2515],{},[923,41279,41280],{"align":969},"The color of the smoke.",[923,41282,41283],{"align":969},[586,41284,41285],{},"'#ffffff'",[905,41287,41288,41292,41296,41299],{},[923,41289,41290],{"align":969},[1673,41291,4861],{},[923,41293,41294],{"align":969},[586,41295,2537],{},[923,41297,41298],{"align":969},"The strength of the opacity.",[923,41300,41301],{"align":969},[586,41302,1513],{},[905,41304,41305,41309,41313,41316],{},[923,41306,41307],{"align":969},[1673,41308,3483],{},[923,41310,41311],{"align":969},[586,41312,2537],{},[923,41314,41315],{"align":969},"The rotation speed of the smoke.",[923,41317,41318],{"align":969},[586,41319,32216],{},[905,41321,41322,41326,41330,41333],{},[923,41323,41324],{"align":969},[1673,41325,6358],{},[923,41327,41328],{"align":969},[586,41329,2537],{},[923,41331,41332],{"align":969},"The base depth.",[923,41334,41335],{"align":969},[586,41336,32203],{},[905,41338,41339,41343,41347,41350],{},[923,41340,41341],{"align":969},[1673,41342,23357],{},[923,41344,41345],{"align":969},[586,41346,2537],{},[923,41348,41349],{"align":969},"The number of smoke to render.",[923,41351,41352],{"align":969},[586,41353,1478],{},[905,41355,41356,41360,41364,41367],{},[923,41357,41358],{"align":969},[1673,41359,13433],{},[923,41361,41362],{"align":969},[586,41363,11094],{},[923,41365,41366],{"align":969},"The texture of the smoke.",[923,41368,41369],{"align":969},[1112,41370,41373],{"href":41371,"rel":41372},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/clouds/defaultCloud.png",[1116],"link",[905,41375,41376,41381,41385,41388],{},[923,41377,41378],{"align":969},[1673,41379,41380],{},"depthTest",[923,41382,41383],{"align":969},[586,41384,11014],{},[923,41386,41387],{"align":969},"The depthTest.",[923,41389,41390],{"align":969},[586,41391,943],{},[905,41393,41394,41399,41403,41406],{},[923,41395,41396],{"align":969},[1673,41397,41398],{},"spreadY",[923,41400,41401],{"align":969},[586,41402,2537],{},[923,41404,41405],{"align":969},"Spread on the Y axis.",[923,41407,41408],{"align":969},[586,41409,2203],{},[905,41411,41412,41417,41421,41424],{},[923,41413,41414],{"align":969},[1673,41415,41416],{},"spreadX",[923,41418,41419],{"align":969},[586,41420,2537],{},[923,41422,41423],{"align":969},"Spread on the X axis.",[923,41425,41426],{"align":969},[586,41427,1513],{},[905,41429,41430,41434,41438,41440],{},[923,41431,41432],{"align":969},[1673,41433,784],{},[923,41435,41436],{"align":969},[586,41437,2537],{},[923,41439,784],{"align":969},[923,41441,41442],{"align":969},[586,41443,1893],{},[7473,41445,41447],{"id":41446},"default-texture","Default texture",[582,41449,41450],{},[3267,41451],{"alt":41447,"src":41371},[1299,41453,1648],{},{"title":544,"searchDepth":545,"depth":546,"links":41455},[41456,41457],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894,"children":41458},[41459],{"id":41446,"depth":676,"text":41447},"Beautiful smoke, cloud, and fog effect using textures and transparency.",{},{"title":375,"description":41460},"vwnSNX06jUUY3lZUYaNYvnoK84rsl-FxeFCuDKNEtR0",{"id":41465,"title":379,"body":41466,"description":43368,"extension":559,"links":560,"meta":43369,"navigation":562,"path":380,"seo":43370,"stem":381,"__hash__":43371},"docs/2.api/8.staging/sparkles.md",{"type":469,"value":41467,"toc":43359},[41468,41474,41476,41480,41661,41665,41668,41960,41964,41982,42009,42015,42032,42333,42337,42353,42382,42389,42716,42718,43356],[582,41469,41470,41473],{},[586,41471,41472],{},"\u003CSparkles />"," makes sparkles on your geometry's vertices – optionally guided by a directional light.",[472,41475,15],{"id":592},[7473,41477,41479],{"id":41478},"basic","Basic",[594,41481,41484],{"className":596,"code":41482,"highlights":41483,"language":601,"meta":544,"style":544},"\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",[676,773],[586,41485,41486,41506,41524,41544,41552,41556,41564,41572,41604,41612,41620,41629,41637,41645,41653],{"__ignoreMap":544},[605,41487,41488,41490,41492,41494,41496,41498,41500,41502,41504],{"class":607,"line":545},[605,41489,611],{"class":610},[605,41491,615],{"class":614},[605,41493,619],{"class":618},[605,41495,622],{"class":618},[605,41497,625],{"class":610},[605,41499,628],{"class":610},[605,41501,632],{"class":631},[605,41503,628],{"class":610},[605,41505,637],{"class":610},[605,41507,41508,41510,41512,41514,41516,41518,41520,41522],{"class":607,"line":546},[605,41509,645],{"class":644},[605,41511,648],{"class":610},[605,41513,683],{"class":651},[605,41515,661],{"class":610},[605,41517,664],{"class":644},[605,41519,667],{"class":610},[605,41521,692],{"class":631},[605,41523,673],{"class":610},[605,41525,41527,41529,41531,41534,41536,41538,41540,41542],{"class":41526,"line":676},[607,641],[605,41528,645],{"class":644},[605,41530,648],{"class":610},[605,41532,41533],{"class":651}," Sparkles",[605,41535,661],{"class":610},[605,41537,664],{"class":644},[605,41539,667],{"class":610},[605,41541,670],{"class":631},[605,41543,673],{"class":610},[605,41545,41546,41548,41550],{"class":607,"line":697},[605,41547,700],{"class":610},[605,41549,615],{"class":614},[605,41551,637],{"class":610},[605,41553,41554],{"class":607,"line":707},[605,41555,710],{"emptyLinePlaceholder":562},[605,41557,41558,41560,41562],{"class":607,"line":713},[605,41559,611],{"class":610},[605,41561,718],{"class":614},[605,41563,637],{"class":610},[605,41565,41566,41568,41570],{"class":607,"line":723},[605,41567,726],{"class":610},[605,41569,729],{"class":614},[605,41571,637],{"class":610},[605,41573,41574,41576,41578,41580,41582,41584,41586,41588,41590,41592,41594,41596,41598,41600,41602],{"class":607,"line":746},[605,41575,749],{"class":610},[605,41577,752],{"class":614},[605,41579,781],{"class":610},[605,41581,1459],{"class":618},[605,41583,625],{"class":610},[605,41585,628],{"class":610},[605,41587,1466],{"class":610},[605,41589,937],{"class":791},[605,41591,1471],{"class":610},[605,41593,4160],{"class":791},[605,41595,1471],{"class":610},[605,41597,2396],{"class":791},[605,41599,1481],{"class":610},[605,41601,628],{"class":610},[605,41603,755],{"class":610},[605,41605,41606,41608,41610],{"class":607,"line":758},[605,41607,749],{"class":610},[605,41609,828],{"class":614},[605,41611,637],{"class":610},[605,41613,41614,41616,41618],{"class":607,"line":768},[605,41615,825],{"class":610},[605,41617,4735],{"class":614},[605,41619,755],{"class":610},[605,41621,41623,41625,41627],{"class":41622,"line":773},[607,641],[605,41624,825],{"class":610},[605,41626,379],{"class":614},[605,41628,755],{"class":610},[605,41630,41631,41633,41635],{"class":607,"line":799},[605,41632,867],{"class":610},[605,41634,828],{"class":614},[605,41636,637],{"class":610},[605,41638,41639,41641,41643],{"class":607,"line":599},[605,41640,749],{"class":610},[605,41642,3518],{"class":614},[605,41644,755],{"class":610},[605,41646,41647,41649,41651],{"class":607,"line":822},[605,41648,877],{"class":610},[605,41650,729],{"class":614},[605,41652,637],{"class":610},[605,41654,41655,41657,41659],{"class":607,"line":833},[605,41656,700],{"class":610},[605,41658,718],{"class":614},[605,41660,637],{"class":610},[7473,41662,41664],{"id":41663},"with-tresdirectionallight","With TresDirectionalLight",[582,41666,41667],{},"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.",[594,41669,41672],{"className":596,"code":41670,"highlights":41671,"language":601,"meta":544,"style":544},"\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",[713,822,854],[586,41673,41674,41694,41712,41730,41748,41752,41766,41774,41778,41786,41794,41826,41834,41842,41865,41873,41879,41892,41918,41932,41936,41944,41952],{"__ignoreMap":544},[605,41675,41676,41678,41680,41682,41684,41686,41688,41690,41692],{"class":607,"line":545},[605,41677,611],{"class":610},[605,41679,615],{"class":614},[605,41681,619],{"class":618},[605,41683,622],{"class":618},[605,41685,625],{"class":610},[605,41687,628],{"class":610},[605,41689,632],{"class":631},[605,41691,628],{"class":610},[605,41693,637],{"class":610},[605,41695,41696,41698,41700,41702,41704,41706,41708,41710],{"class":607,"line":546},[605,41697,645],{"class":644},[605,41699,648],{"class":610},[605,41701,683],{"class":651},[605,41703,661],{"class":610},[605,41705,664],{"class":644},[605,41707,667],{"class":610},[605,41709,692],{"class":631},[605,41711,673],{"class":610},[605,41713,41714,41716,41718,41720,41722,41724,41726,41728],{"class":607,"line":676},[605,41715,645],{"class":644},[605,41717,648],{"class":610},[605,41719,41533],{"class":651},[605,41721,661],{"class":610},[605,41723,664],{"class":644},[605,41725,667],{"class":610},[605,41727,670],{"class":631},[605,41729,673],{"class":610},[605,41731,41732,41734,41736,41738,41740,41742,41744,41746],{"class":607,"line":697},[605,41733,645],{"class":644},[605,41735,648],{"class":610},[605,41737,9716],{"class":651},[605,41739,661],{"class":610},[605,41741,664],{"class":644},[605,41743,667],{"class":610},[605,41745,601],{"class":631},[605,41747,673],{"class":610},[605,41749,41750],{"class":607,"line":707},[605,41751,710],{"emptyLinePlaceholder":562},[605,41753,41755,41757,41760,41762,41764],{"class":41754,"line":713},[607,641],[605,41756,2689],{"class":618},[605,41758,41759],{"class":651}," directionalLightRef ",[605,41761,625],{"class":610},[605,41763,9716],{"class":2800},[605,41765,2846],{"class":651},[605,41767,41768,41770,41772],{"class":607,"line":723},[605,41769,700],{"class":610},[605,41771,615],{"class":614},[605,41773,637],{"class":610},[605,41775,41776],{"class":607,"line":746},[605,41777,710],{"emptyLinePlaceholder":562},[605,41779,41780,41782,41784],{"class":607,"line":758},[605,41781,611],{"class":610},[605,41783,718],{"class":614},[605,41785,637],{"class":610},[605,41787,41788,41790,41792],{"class":607,"line":768},[605,41789,726],{"class":610},[605,41791,729],{"class":614},[605,41793,637],{"class":610},[605,41795,41796,41798,41800,41802,41804,41806,41808,41810,41812,41814,41816,41818,41820,41822,41824],{"class":607,"line":773},[605,41797,749],{"class":610},[605,41799,752],{"class":614},[605,41801,781],{"class":610},[605,41803,1459],{"class":618},[605,41805,625],{"class":610},[605,41807,628],{"class":610},[605,41809,1466],{"class":610},[605,41811,937],{"class":791},[605,41813,1471],{"class":610},[605,41815,4160],{"class":791},[605,41817,1471],{"class":610},[605,41819,2396],{"class":791},[605,41821,1481],{"class":610},[605,41823,628],{"class":610},[605,41825,755],{"class":610},[605,41827,41828,41830,41832],{"class":607,"line":799},[605,41829,749],{"class":610},[605,41831,828],{"class":614},[605,41833,637],{"class":610},[605,41835,41836,41838,41840],{"class":607,"line":599},[605,41837,825],{"class":610},[605,41839,4735],{"class":614},[605,41841,755],{"class":610},[605,41843,41845,41847,41849,41851,41854,41856,41858,41861,41863],{"class":41844,"line":822},[607,641],[605,41846,825],{"class":610},[605,41848,379],{"class":614},[605,41850,781],{"class":610},[605,41852,41853],{"class":618},"directional-light",[605,41855,625],{"class":610},[605,41857,628],{"class":610},[605,41859,41860],{"class":651},"directionalLightRef",[605,41862,628],{"class":610},[605,41864,755],{"class":610},[605,41866,41867,41869,41871],{"class":607,"line":833},[605,41868,867],{"class":610},[605,41870,828],{"class":614},[605,41872,637],{"class":610},[605,41874,41875,41877],{"class":607,"line":844},[605,41876,749],{"class":610},[605,41878,10771],{"class":614},[605,41880,41882,41884,41886,41888,41890],{"class":41881,"line":854},[607,641],[605,41883,5679],{"class":618},[605,41885,625],{"class":610},[605,41887,628],{"class":610},[605,41889,41860],{"class":631},[605,41891,2987],{"class":610},[605,41893,41894,41896,41898,41900,41902,41904,41906,41908,41910,41912,41914,41916],{"class":607,"line":600},[605,41895,5693],{"class":610},[605,41897,1459],{"class":618},[605,41899,625],{"class":610},[605,41901,628],{"class":610},[605,41903,1466],{"class":610},[605,41905,4160],{"class":791},[605,41907,1471],{"class":610},[605,41909,4160],{"class":791},[605,41911,1471],{"class":610},[605,41913,4160],{"class":791},[605,41915,1481],{"class":610},[605,41917,2987],{"class":610},[605,41919,41920,41922,41924,41926,41928,41930],{"class":607,"line":874},[605,41921,5693],{"class":610},[605,41923,1886],{"class":618},[605,41925,625],{"class":610},[605,41927,628],{"class":610},[605,41929,792],{"class":791},[605,41931,2987],{"class":610},[605,41933,41934],{"class":607,"line":884},[605,41935,10816],{"class":610},[605,41937,41938,41940,41942],{"class":607,"line":2952},[605,41939,749],{"class":610},[605,41941,3518],{"class":614},[605,41943,755],{"class":610},[605,41945,41946,41948,41950],{"class":607,"line":2960},[605,41947,877],{"class":610},[605,41949,729],{"class":614},[605,41951,637],{"class":610},[605,41953,41954,41956,41958],{"class":607,"line":2990},[605,41955,700],{"class":610},[605,41957,718],{"class":614},[605,41959,637],{"class":610},[7473,41961,41963],{"id":41962},"sequences","Sequences",[582,41965,41966,41967,41970,41971,3198,41975,41977,41978,41981],{},"All props beginning with ",[586,41968,41969],{},":sequence-"," are used to define how a particle changes as it progresses ",[1112,41972,41974],{"href":41973},"#mixes","(See also: Mixes)",[586,41976,41969],{}," props are of the type ",[586,41979,41980],{},"Gradient\u003CT>",", which can be any one of:",[3136,41983,41984,41990,41996],{},[3139,41985,41986,41989],{},[586,41987,41988],{},"T",": a single value",[3139,41991,41992,41995],{},[586,41993,41994],{},"[T, T, T, ...]",": an evenly distributed series of values",[3139,41997,41998,42001,42002,42004,42005,16781,42007,1118],{},[586,41999,42000],{},"[[number, T], [number, T], ...]",": an unevently distributed series of values, where ",[586,42003,2537],{}," is a gradient \"stop\" from ",[586,42006,937],{},[586,42008,1893],{},[582,42010,42011,42012,1190],{},"For example, all of these are acceptable values for ",[586,42013,42014],{},"Gradient\u003CTresColor>",[3136,42016,42017,42022,42027],{},[3139,42018,42019],{},[586,42020,42021],{},"'red'",[3139,42023,42024],{},[586,42025,42026],{},"['red', 'blue', 'green']",[3139,42028,42029],{},[586,42030,42031],{},"[[0.1, 'red'], [0.25, 'blue'], [0.5, 'green']]",[594,42033,42036],{"className":596,"code":42034,"highlights":42035,"language":601,"meta":544,"style":544},"\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",[773,799,599,822],[586,42037,42038,42058,42076,42094,42102,42106,42114,42122,42154,42162,42170,42178,42220,42269,42297,42301,42309,42317,42325],{"__ignoreMap":544},[605,42039,42040,42042,42044,42046,42048,42050,42052,42054,42056],{"class":607,"line":545},[605,42041,611],{"class":610},[605,42043,615],{"class":614},[605,42045,619],{"class":618},[605,42047,622],{"class":618},[605,42049,625],{"class":610},[605,42051,628],{"class":610},[605,42053,632],{"class":631},[605,42055,628],{"class":610},[605,42057,637],{"class":610},[605,42059,42060,42062,42064,42066,42068,42070,42072,42074],{"class":607,"line":546},[605,42061,645],{"class":644},[605,42063,648],{"class":610},[605,42065,683],{"class":651},[605,42067,661],{"class":610},[605,42069,664],{"class":644},[605,42071,667],{"class":610},[605,42073,692],{"class":631},[605,42075,673],{"class":610},[605,42077,42078,42080,42082,42084,42086,42088,42090,42092],{"class":607,"line":676},[605,42079,645],{"class":644},[605,42081,648],{"class":610},[605,42083,41533],{"class":651},[605,42085,661],{"class":610},[605,42087,664],{"class":644},[605,42089,667],{"class":610},[605,42091,670],{"class":631},[605,42093,673],{"class":610},[605,42095,42096,42098,42100],{"class":607,"line":697},[605,42097,700],{"class":610},[605,42099,615],{"class":614},[605,42101,637],{"class":610},[605,42103,42104],{"class":607,"line":707},[605,42105,710],{"emptyLinePlaceholder":562},[605,42107,42108,42110,42112],{"class":607,"line":713},[605,42109,611],{"class":610},[605,42111,718],{"class":614},[605,42113,637],{"class":610},[605,42115,42116,42118,42120],{"class":607,"line":723},[605,42117,726],{"class":610},[605,42119,729],{"class":614},[605,42121,637],{"class":610},[605,42123,42124,42126,42128,42130,42132,42134,42136,42138,42140,42142,42144,42146,42148,42150,42152],{"class":607,"line":746},[605,42125,749],{"class":610},[605,42127,752],{"class":614},[605,42129,781],{"class":610},[605,42131,1459],{"class":618},[605,42133,625],{"class":610},[605,42135,628],{"class":610},[605,42137,1466],{"class":610},[605,42139,937],{"class":791},[605,42141,1471],{"class":610},[605,42143,4160],{"class":791},[605,42145,1471],{"class":610},[605,42147,2396],{"class":791},[605,42149,1481],{"class":610},[605,42151,628],{"class":610},[605,42153,755],{"class":610},[605,42155,42156,42158,42160],{"class":607,"line":758},[605,42157,749],{"class":610},[605,42159,828],{"class":614},[605,42161,637],{"class":610},[605,42163,42164,42166,42168],{"class":607,"line":768},[605,42165,825],{"class":610},[605,42167,4735],{"class":614},[605,42169,755],{"class":610},[605,42171,42173,42175],{"class":42172,"line":773},[607,641],[605,42174,825],{"class":610},[605,42176,42177],{"class":614},"Sparkles\n",[605,42179,42181,42183,42186,42188,42190,42192,42194,42196,42198,42200,42202,42205,42207,42209,42211,42214,42216,42218],{"class":42180,"line":799},[607,641],[605,42182,2993],{"class":610},[605,42184,42185],{"class":618},"sequence-color",[605,42187,625],{"class":610},[605,42189,628],{"class":610},[605,42191,1466],{"class":610},[605,42193,5536],{"class":610},[605,42195,29784],{"class":631},[605,42197,5536],{"class":610},[605,42199,1471],{"class":610},[605,42201,5536],{"class":610},[605,42203,42204],{"class":631},"blue",[605,42206,5536],{"class":610},[605,42208,1471],{"class":610},[605,42210,5536],{"class":610},[605,42212,42213],{"class":631},"green",[605,42215,5536],{"class":610},[605,42217,1481],{"class":610},[605,42219,2987],{"class":610},[605,42221,42223,42225,42228,42230,42232,42234,42236,42238,42240,42242,42245,42247,42249,42251,42253,42255,42257,42259,42261,42263,42265,42267],{"class":42222,"line":599},[607,641],[605,42224,2993],{"class":610},[605,42226,42227],{"class":618},"sequence-alpha",[605,42229,625],{"class":610},[605,42231,628],{"class":610},[605,42233,25812],{"class":610},[605,42235,7207],{"class":791},[605,42237,1471],{"class":610},[605,42239,7207],{"class":791},[605,42241,25825],{"class":610},[605,42243,42244],{"class":791},"0.10",[605,42246,1471],{"class":610},[605,42248,7085],{"class":791},[605,42250,25825],{"class":610},[605,42252,1513],{"class":791},[605,42254,1471],{"class":610},[605,42256,7085],{"class":791},[605,42258,25825],{"class":610},[605,42260,28016],{"class":791},[605,42262,1471],{"class":610},[605,42264,7207],{"class":791},[605,42266,25862],{"class":610},[605,42268,2987],{"class":610},[605,42270,42272,42274,42277,42279,42281,42283,42285,42287,42289,42291,42293,42295],{"class":42271,"line":822},[607,641],[605,42273,2993],{"class":610},[605,42275,42276],{"class":618},"sequence-size",[605,42278,625],{"class":610},[605,42280,628],{"class":610},[605,42282,1466],{"class":610},[605,42284,7207],{"class":791},[605,42286,1471],{"class":610},[605,42288,7085],{"class":791},[605,42290,1471],{"class":610},[605,42292,1513],{"class":791},[605,42294,1481],{"class":610},[605,42296,2987],{"class":610},[605,42298,42299],{"class":607,"line":833},[605,42300,3050],{"class":610},[605,42302,42303,42305,42307],{"class":607,"line":844},[605,42304,867],{"class":610},[605,42306,828],{"class":614},[605,42308,637],{"class":610},[605,42310,42311,42313,42315],{"class":607,"line":854},[605,42312,749],{"class":610},[605,42314,3518],{"class":614},[605,42316,755],{"class":610},[605,42318,42319,42321,42323],{"class":607,"line":600},[605,42320,877],{"class":610},[605,42322,729],{"class":614},[605,42324,637],{"class":610},[605,42326,42327,42329,42331],{"class":607,"line":874},[605,42328,700],{"class":610},[605,42330,718],{"class":614},[605,42332,637],{"class":610},[7473,42334,42336],{"id":42335},"mixes","Mixes",[582,42338,41966,42339,42342,42343,42345,42346,42349,42350,1118],{},[586,42340,42341],{},":mix-"," allow you to specify how a particle \"progresses\" through a corresponding ",[586,42344,41969],{}," prop. E.g., ",[586,42347,42348],{},":mix-alpha"," affects ",[586,42351,42352],{},":sequence-alpha",[3136,42354,42355,42373],{},[3139,42356,42357,42358,42360,42361,42363,42364,42366,42367],{},"If the ",[586,42359,42341],{}," prop is ",[586,42362,7207],{},", 'progress' through the ",[586,42365,41969],{}," is determined entirely by the light shining on the surface of the sparkling mesh.",[1112,42368,42370],{"href":42369},"#precisely",[42371,42372,1893],"sup",{},[3139,42374,42357,42375,42360,42377,42363,42379,42381],{},[586,42376,42341],{},[586,42378,7085],{},[586,42380,41969],{}," is determined entirely by the particle's lifetime.",[582,42383,42384,42385,42388],{},"More precisely, the value is determined by the dot product of the ",[586,42386,42387],{},"directionalLight","'s inverted normalized position and each of the sparkling mesh's vertex normals.",[594,42390,42393],{"className":596,"code":42391,"highlights":42392,"language":601,"meta":544,"style":544},"\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",[676,822,833,844,854,600],[586,42394,42395,42415,42433,42452,42470,42474,42486,42494,42498,42506,42514,42546,42554,42562,42569,42584,42600,42616,42632,42636,42644,42650,42662,42688,42692,42700,42708],{"__ignoreMap":544},[605,42396,42397,42399,42401,42403,42405,42407,42409,42411,42413],{"class":607,"line":545},[605,42398,611],{"class":610},[605,42400,615],{"class":614},[605,42402,619],{"class":618},[605,42404,622],{"class":618},[605,42406,625],{"class":610},[605,42408,628],{"class":610},[605,42410,632],{"class":631},[605,42412,628],{"class":610},[605,42414,637],{"class":610},[605,42416,42417,42419,42421,42423,42425,42427,42429,42431],{"class":607,"line":546},[605,42418,645],{"class":644},[605,42420,648],{"class":610},[605,42422,683],{"class":651},[605,42424,661],{"class":610},[605,42426,664],{"class":644},[605,42428,667],{"class":610},[605,42430,692],{"class":631},[605,42432,673],{"class":610},[605,42434,42436,42438,42440,42442,42444,42446,42448,42450],{"class":42435,"line":676},[607,641],[605,42437,645],{"class":644},[605,42439,648],{"class":610},[605,42441,41533],{"class":651},[605,42443,661],{"class":610},[605,42445,664],{"class":644},[605,42447,667],{"class":610},[605,42449,670],{"class":631},[605,42451,673],{"class":610},[605,42453,42454,42456,42458,42460,42462,42464,42466,42468],{"class":607,"line":697},[605,42455,645],{"class":644},[605,42457,648],{"class":610},[605,42459,9716],{"class":651},[605,42461,661],{"class":610},[605,42463,664],{"class":644},[605,42465,667],{"class":610},[605,42467,601],{"class":631},[605,42469,673],{"class":610},[605,42471,42472],{"class":607,"line":707},[605,42473,710],{"emptyLinePlaceholder":562},[605,42475,42476,42478,42480,42482,42484],{"class":607,"line":713},[605,42477,2689],{"class":618},[605,42479,41759],{"class":651},[605,42481,625],{"class":610},[605,42483,9716],{"class":2800},[605,42485,2846],{"class":651},[605,42487,42488,42490,42492],{"class":607,"line":723},[605,42489,700],{"class":610},[605,42491,615],{"class":614},[605,42493,637],{"class":610},[605,42495,42496],{"class":607,"line":746},[605,42497,710],{"emptyLinePlaceholder":562},[605,42499,42500,42502,42504],{"class":607,"line":758},[605,42501,611],{"class":610},[605,42503,718],{"class":614},[605,42505,637],{"class":610},[605,42507,42508,42510,42512],{"class":607,"line":768},[605,42509,726],{"class":610},[605,42511,729],{"class":614},[605,42513,637],{"class":610},[605,42515,42516,42518,42520,42522,42524,42526,42528,42530,42532,42534,42536,42538,42540,42542,42544],{"class":607,"line":773},[605,42517,749],{"class":610},[605,42519,752],{"class":614},[605,42521,781],{"class":610},[605,42523,1459],{"class":618},[605,42525,625],{"class":610},[605,42527,628],{"class":610},[605,42529,1466],{"class":610},[605,42531,937],{"class":791},[605,42533,1471],{"class":610},[605,42535,4160],{"class":791},[605,42537,1471],{"class":610},[605,42539,2396],{"class":791},[605,42541,1481],{"class":610},[605,42543,628],{"class":610},[605,42545,755],{"class":610},[605,42547,42548,42550,42552],{"class":607,"line":799},[605,42549,749],{"class":610},[605,42551,828],{"class":614},[605,42553,637],{"class":610},[605,42555,42556,42558,42560],{"class":607,"line":599},[605,42557,825],{"class":610},[605,42559,4735],{"class":614},[605,42561,755],{"class":610},[605,42563,42565,42567],{"class":42564,"line":822},[607,641],[605,42566,825],{"class":610},[605,42568,42177],{"class":614},[605,42570,42572,42574,42576,42578,42580,42582],{"class":42571,"line":833},[607,641],[605,42573,2993],{"class":610},[605,42575,41853],{"class":618},[605,42577,625],{"class":610},[605,42579,628],{"class":610},[605,42581,41860],{"class":651},[605,42583,2987],{"class":610},[605,42585,42587,42589,42592,42594,42596,42598],{"class":42586,"line":844},[607,641],[605,42588,2993],{"class":610},[605,42590,42591],{"class":618},"mix-color",[605,42593,625],{"class":610},[605,42595,628],{"class":610},[605,42597,18051],{"class":791},[605,42599,2987],{"class":610},[605,42601,42603,42605,42608,42610,42612,42614],{"class":42602,"line":854},[607,641],[605,42604,2993],{"class":610},[605,42606,42607],{"class":618},"mix-alpha",[605,42609,625],{"class":610},[605,42611,628],{"class":610},[605,42613,1513],{"class":791},[605,42615,2987],{"class":610},[605,42617,42619,42621,42624,42626,42628,42630],{"class":42618,"line":600},[607,641],[605,42620,2993],{"class":610},[605,42622,42623],{"class":618},"mix-size",[605,42625,625],{"class":610},[605,42627,628],{"class":610},[605,42629,8085],{"class":791},[605,42631,2987],{"class":610},[605,42633,42634],{"class":607,"line":874},[605,42635,3050],{"class":610},[605,42637,42638,42640,42642],{"class":607,"line":884},[605,42639,867],{"class":610},[605,42641,828],{"class":614},[605,42643,637],{"class":610},[605,42645,42646,42648],{"class":607,"line":2952},[605,42647,749],{"class":610},[605,42649,10771],{"class":614},[605,42651,42652,42654,42656,42658,42660],{"class":607,"line":2960},[605,42653,5679],{"class":618},[605,42655,625],{"class":610},[605,42657,628],{"class":610},[605,42659,41860],{"class":631},[605,42661,2987],{"class":610},[605,42663,42664,42666,42668,42670,42672,42674,42676,42678,42680,42682,42684,42686],{"class":607,"line":2990},[605,42665,5693],{"class":610},[605,42667,1459],{"class":618},[605,42669,625],{"class":610},[605,42671,628],{"class":610},[605,42673,1466],{"class":610},[605,42675,4160],{"class":791},[605,42677,1471],{"class":610},[605,42679,4160],{"class":791},[605,42681,1471],{"class":610},[605,42683,4160],{"class":791},[605,42685,1481],{"class":610},[605,42687,2987],{"class":610},[605,42689,42690],{"class":607,"line":3007},[605,42691,10816],{"class":610},[605,42693,42694,42696,42698],{"class":607,"line":3022},[605,42695,749],{"class":610},[605,42697,3518],{"class":614},[605,42699,755],{"class":610},[605,42701,42702,42704,42706],{"class":607,"line":3047},[605,42703,877],{"class":610},[605,42705,729],{"class":614},[605,42707,637],{"class":610},[605,42709,42710,42712,42714],{"class":607,"line":2591},[605,42711,700],{"class":610},[605,42713,718],{"class":614},[605,42715,637],{"class":610},[472,42717,894],{"id":893},[899,42719,42720,42728],{},[902,42721,42722],{},[905,42723,42724,42726],{},[908,42725,3118],{"align":969},[908,42727,913],{"align":969},[918,42729,42730,42753,42786,42808,42828,42848,42868,42889,42909,42929,42949,42968,42987,43006,43026,43053,43075,43097,43118,43139,43160,43194,43215,43235,43256,43276,43296,43318,43337],{},[905,42731,42732,42736],{},[923,42733,42734],{"align":969},[1673,42735,13426],{},[923,42737,42738,42739,42742,42744,42745,42748,42750,42752],{"align":969},"Type: ",[586,42740,42741],{},"Texture | string",[2508,42743],{},"Default: ",[586,42746,42747],{},"'https://raw.githubusercontent.com/Tresjs/asset...'",[2508,42749],{},[2508,42751],{},"Texture or image path for individual sparkles",[905,42754,42755,42759],{},[923,42756,42757],{"align":969},[1673,42758,15748],{},[923,42760,42738,42761,42764,42744,42766,42768,42770,42772,42773,42775],{"align":969},[586,42762,42763],{},"Object3D | BufferGeometry",[2508,42765],{},[586,42767,1151],{},[2508,42769],{},[2508,42771],{},"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.",[2508,42774],{},[3136,42776,42777,42780,42783],{},[3139,42778,42779],{},"If provided, the component will use the passed geometry.",[3139,42781,42782],{},"If no geometry is provided, the component will try to make a copy of the parent object's geometry.",[3139,42784,42785],{},"If no parent geometry exists, the component will create and use an IcosphereGeometry.",[905,42787,42788,42792],{},[923,42789,42790],{"align":969},[1673,42791,42387],{},[923,42793,42738,42794,42796,42744,42798,42800,42802,42804,42805,42807],{"align":969},[586,42795,2578],{},[2508,42797],{},[586,42799,1151],{},[2508,42801],{},[2508,42803],{},"Particles \"light up\" when their normal \"faces\" the light. If no ",[586,42806,42387],{}," is provided, the default \"up\" vector will be used.",[905,42809,42810,42815],{},[923,42811,42812],{"align":969},[1673,42813,42814],{},"lifetimeSec",[923,42816,42738,42817,42819,42744,42821,42823,42825,42827],{"align":969},[586,42818,2537],{},[2508,42820],{},[586,42822,32216],{},[2508,42824],{},[2508,42826],{},"Particle lifetime in seconds",[905,42829,42830,42835],{},[923,42831,42832],{"align":969},[1673,42833,42834],{},"cooldownSec",[923,42836,42738,42837,42839,42744,42841,42843,42845,42847],{"align":969},[586,42838,2537],{},[2508,42840],{},[586,42842,7144],{},[2508,42844],{},[2508,42846],{},"Particle cooldown in seconds – time between lifetime end and respawn",[905,42849,42850,42855],{},[923,42851,42852],{"align":969},[1673,42853,42854],{},"normalThreshold",[923,42856,42738,42857,42859,42744,42861,42863,42865,42867],{"align":969},[586,42858,2537],{},[2508,42860],{},[586,42862,33784],{},[2508,42864],{},[2508,42866],{},"Number from 0-1 indicating how closely the particle needs to be faced towards the light to \"light up\". (Lower == more flexible)",[905,42869,42870,42875],{},[923,42871,42872],{"align":969},[1673,42873,42874],{},"noiseScale",[923,42876,42738,42877,42879,42744,42881,42884,42886,42888],{"align":969},[586,42878,2537],{},[2508,42880],{},[586,42882,42883],{},"3.0",[2508,42885],{},[2508,42887],{},"Scale of the noise period (lower == more slowly cycling noise)",[905,42890,42891,42896],{},[923,42892,42893],{"align":969},[1673,42894,42895],{},"scaleNoise",[923,42897,42738,42898,42900,42744,42902,42904,42906,42908],{"align":969},[586,42899,2537],{},[2508,42901],{},[586,42903,7085],{},[2508,42905],{},[2508,42907],{},"Noise coefficient applied to particle scale",[905,42910,42911,42916],{},[923,42912,42913],{"align":969},[1673,42914,42915],{},"offsetNoise",[923,42917,42738,42918,42920,42744,42922,42924,42926,42928],{"align":969},[586,42919,2537],{},[2508,42921],{},[586,42923,2203],{},[2508,42925],{},[2508,42927],{},"Noise coefficient applied to particle offset",[905,42930,42931,42936],{},[923,42932,42933],{"align":969},[1673,42934,42935],{},"lifetimeNoise",[923,42937,42738,42938,42940,42744,42942,42944,42946,42948],{"align":969},[586,42939,2537],{},[2508,42941],{},[586,42943,7207],{},[2508,42945],{},[2508,42947],{},"Noise coefficient applied to particle lifetime",[905,42950,42951,42955],{},[923,42952,42953],{"align":969},[1673,42954,10233],{},[923,42956,42738,42957,42959,42744,42961,42963,42965,42967],{"align":969},[586,42958,2537],{},[2508,42960],{},[586,42962,7085],{},[2508,42964],{},[2508,42966],{},"Particle scale multiplier",[905,42969,42970,42974],{},[923,42971,42972],{"align":969},[1673,42973,39559],{},[923,42975,42738,42976,42978,42744,42980,42982,42984,42986],{"align":969},[586,42977,2537],{},[2508,42979],{},[586,42981,7085],{},[2508,42983],{},[2508,42985],{},"Opacity multiplier",[905,42988,42989,42993],{},[923,42990,42991],{"align":969},[1673,42992,33561],{},[923,42994,42738,42995,42997,42744,42999,43001,43003,43005],{"align":969},[586,42996,2537],{},[2508,42998],{},[586,43000,7085],{},[2508,43002],{},[2508,43004],{},"Offset multiplier",[905,43007,43008,43013],{},[923,43009,43010],{"align":969},[1673,43011,43012],{},"surfaceDistance",[923,43014,42738,43015,43017,42744,43019,43021,43023,43025],{"align":969},[586,43016,2537],{},[2508,43018],{},[586,43020,7085],{},[2508,43022],{},[2508,43024],{},"Surface distance multiplier",[905,43027,43028,43033],{},[923,43029,43030],{"align":969},[1673,43031,43032],{},"sequenceColor",[923,43034,42738,43035,43037,42744,43039,43042,43044,5536,43046,43049,43050,43052],{"align":969},[586,43036,42014],{},[2508,43038],{},[586,43040,43041],{},"[[0.7, '#82dbc5'], [0.8, '#fbb03b']]",[2508,43043],{},[2508,43045],{},[1677,43047,43048],{},"Sequence' props: specify how a particle changes as it \"progresses\". See also \"mix","\" props.",[2508,43051],{},"Color sequence as particles progress",[905,43054,43055,43060],{},[923,43056,43057],{"align":969},[1673,43058,43059],{},"sequenceAlpha",[923,43061,42738,43062,43065,42744,43067,43070,43072,43074],{"align":969},[586,43063,43064],{},"Gradient\u003Cnumber>",[2508,43066],{},[586,43068,43069],{},"[[0.0, 0.0], [0.10, 1.0], [0.5, 1.0], [0.9, 0.0]]",[2508,43071],{},[2508,43073],{},"Opacity sequence as particles progress",[905,43076,43077,43082],{},[923,43078,43079],{"align":969},[1673,43080,43081],{},"sequenceOffset",[923,43083,42738,43084,43087,42744,43089,43092,43094,43096],{"align":969},[586,43085,43086],{},"Gradient\u003C[number, number, number]>",[2508,43088],{},[586,43090,43091],{},"[0.0, 0.0, 0.0]",[2508,43093],{},[2508,43095],{},"Distance sequence as particles progress",[905,43098,43099,43104],{},[923,43100,43101],{"align":969},[1673,43102,43103],{},"sequenceNoise",[923,43105,42738,43106,43108,42744,43110,43113,43115,43117],{"align":969},[586,43107,43086],{},[2508,43109],{},[586,43111,43112],{},"[0.1, 0.1, 0.1]",[2508,43114],{},[2508,43116],{},"Noise sequence as particles progress",[905,43119,43120,43125],{},[923,43121,43122],{"align":969},[1673,43123,43124],{},"sequenceSize",[923,43126,42738,43127,43129,42744,43131,43134,43136,43138],{"align":969},[586,43128,43064],{},[2508,43130],{},[586,43132,43133],{},"[0.0, 1.0]",[2508,43135],{},[2508,43137],{},"Size sequence as particles progress",[905,43140,43141,43146],{},[923,43142,43143],{"align":969},[1673,43144,43145],{},"sequenceSurfaceDistance",[923,43147,42738,43148,43150,42744,43152,43155,43157,43159],{"align":969},[586,43149,43064],{},[2508,43151],{},[586,43153,43154],{},"[0.05, 0.08, 0.1]",[2508,43156],{},[2508,43158],{},"Distance from surface (along normal) as particles progress",[905,43161,43162,43167],{},[923,43163,43164],{"align":969},[1673,43165,43166],{},"mixColor",[923,43168,42738,43169,43171,42744,43173,43175,43177,43179,43180,43182,43190,43191,43193],{"align":969},[586,43170,2537],{},[2508,43172],{},[586,43174,1513],{},[2508,43176],{},[2508,43178],{},"'mix*' props: A particle \"progresses\" with a mix of two factors:",[2508,43181],{},[3136,43183,43184,43187],{},[3139,43185,43186],{},"its normal \"facing\" the directionalLight",[3139,43188,43189],{},"its lifetime","'mix*' props specify the relationship between the two factors.",[2508,43192],{},"How is a particle's progress for color calculated? (0: normal, 1: particle lifetime)",[905,43195,43196,43201],{},[923,43197,43198],{"align":969},[1673,43199,43200],{},"mixAlpha",[923,43202,42738,43203,43205,42744,43207,43210,43212,43214],{"align":969},[586,43204,2537],{},[2508,43206],{},[586,43208,43209],{},"1.",[2508,43211],{},[2508,43213],{},"How is a particle's progress for alpha calculated? (0: normal, 1: particle lifetime)",[905,43216,43217,43222],{},[923,43218,43219],{"align":969},[1673,43220,43221],{},"mixOffset",[923,43223,42738,43224,43226,42744,43228,43230,43232,43234],{"align":969},[586,43225,2537],{},[2508,43227],{},[586,43229,43209],{},[2508,43231],{},[2508,43233],{},"How is a particle's progress for offset calculated? (0: normal, 1: particle lifetime)",[905,43236,43237,43242],{},[923,43238,43239],{"align":969},[1673,43240,43241],{},"mixSize",[923,43243,42738,43244,43246,42744,43248,43251,43253,43255],{"align":969},[586,43245,2537],{},[2508,43247],{},[586,43249,43250],{},"0.",[2508,43252],{},[2508,43254],{},"How is a particle's progress for size calculated? (0: normal, 1: particle lifetime)",[905,43257,43258,43263],{},[923,43259,43260],{"align":969},[1673,43261,43262],{},"mixSurfaceDistance",[923,43264,42738,43265,43267,42744,43269,43271,43273,43275],{"align":969},[586,43266,2537],{},[2508,43268],{},[586,43270,43209],{},[2508,43272],{},[2508,43274],{},"How is a particle's progress for surface distance calculated? (0: normal, 1: particle lifetime)",[905,43277,43278,43283],{},[923,43279,43280],{"align":969},[1673,43281,43282],{},"mixNoise",[923,43284,42738,43285,43287,42744,43289,43291,43293,43295],{"align":969},[586,43286,2537],{},[2508,43288],{},[586,43290,43209],{},[2508,43292],{},[2508,43294],{},"How is a particle's progress for lifetime calculated? (0: normal, 1: particle lifetime)",[905,43297,43298,43303],{},[923,43299,43300],{"align":969},[1673,43301,43302],{},"blending",[923,43304,42738,43305,43308,42744,43310,43313,43315,43317],{"align":969},[586,43306,43307],{},"Blending",[2508,43309],{},[586,43311,43312],{},"AdditiveBlending",[2508,43314],{},[2508,43316],{},"Material blending",[905,43319,43320,43324],{},[923,43321,43322],{"align":969},[1673,43323,4873],{},[923,43325,42738,43326,43328,42744,43330,43332,43334,43336],{"align":969},[586,43327,11014],{},[2508,43329],{},[586,43331,933],{},[2508,43333],{},[2508,43335],{},"Material transparency",[905,43338,43339,43343],{},[923,43340,43341],{"align":969},[1673,43342,4334],{},[923,43344,42738,43345,43347,42744,43349,43351,43353,43355],{"align":969},[586,43346,11014],{},[2508,43348],{},[586,43350,943],{},[2508,43352],{},[2508,43354],{},"Material depth write",[1299,43357,43358],{},"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":544,"searchDepth":545,"depth":546,"links":43360},[43361,43367],{"id":592,"depth":546,"text":15,"children":43362},[43363,43364,43365,43366],{"id":41478,"depth":676,"text":41479},{"id":41663,"depth":676,"text":41664},{"id":41962,"depth":676,"text":41963},{"id":42335,"depth":676,"text":42336},{"id":893,"depth":546,"text":894},"Makes sparkles on geometry vertices, optionally guided by directional light.",{},{"title":379,"description":43368},"sidh_wQDMKRUeYy0-MM8UB_NfCo4ClPtPAjr8qECGps",{"id":43373,"title":383,"body":43374,"description":44061,"extension":559,"links":560,"meta":44062,"navigation":562,"path":384,"seo":44063,"stem":385,"__hash__":44064},"docs/2.api/8.staging/stage.md",{"type":469,"value":43375,"toc":44055},[43376,43381,43384,43398,43417,43467,43469,43838,43840,43951,43955,43958,44040,44052],[2558,43377,43378],{},[43379,43380],"staging-stage",{},[582,43382,43383],{},"This component creates a \"stage\" for your models. It sets up:",[3136,43385,43386,43389,43392,43395],{},[3139,43387,43388],{},"model lighting",[3139,43390,43391],{},"ground shadows",[3139,43393,43394],{},"zoom to fit",[3139,43396,43397],{},"environment",[2046,43399,43400,43403],{},[582,43401,43402],{},"If you are using other camera controls, be sure to make them the 'default'.",[594,43404,43405],{"className":596,"code":2071,"language":601,"meta":544,"style":544},[586,43406,43407],{"__ignoreMap":544},[605,43408,43409,43411,43413,43415],{"class":607,"line":545},[605,43410,611],{"class":610},[605,43412,763],{"class":614},[605,43414,1868],{"class":618},[605,43416,755],{"class":610},[2046,43418,43419,43422,43437],{},[582,43420,43421],{},"If you are using shadows='accumulative', enable shadows on your canvas and on your objects.",[594,43423,43425],{"className":596,"code":43424,"language":601,"meta":544,"style":544},"\u003CTresCanvas shadows />\n",[586,43426,43427],{"__ignoreMap":544},[605,43428,43429,43431,43433,43435],{"class":607,"line":545},[605,43430,611],{"class":610},[605,43432,729],{"class":614},[605,43434,35793],{"class":618},[605,43436,755],{"class":610},[594,43438,43440],{"className":596,"code":43439,"language":601,"meta":544,"style":544},"\u003CTresMesh cast-shadow />\n  ...\n\u003C/TresMesh>\n",[586,43441,43442,43452,43456],{"__ignoreMap":544},[605,43443,43444,43446,43448,43450],{"class":607,"line":545},[605,43445,611],{"class":610},[605,43447,828],{"class":614},[605,43449,9856],{"class":618},[605,43451,755],{"class":610},[605,43453,43454],{"class":607,"line":546},[605,43455,7380],{"class":651},[605,43457,43458,43460,43463,43465],{"class":607,"line":676},[605,43459,611],{"class":610},[605,43461,43462],{"class":651},"/",[605,43464,828],{"class":614},[605,43466,637],{"class":610},[472,43468,15],{"id":592},[594,43470,43473],{"className":596,"code":43471,"highlights":43472,"language":601,"meta":544,"style":544},"\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",[676,768,773,799,599,822,833],[586,43474,43475,43495,43513,43541,43549,43553,43561,43571,43603,43613,43621,43636,43651,43667,43681,43696,43700,43710,43718,43736,43744,43798,43806,43814,43822,43830],{"__ignoreMap":544},[605,43476,43477,43479,43481,43483,43485,43487,43489,43491,43493],{"class":607,"line":545},[605,43478,611],{"class":610},[605,43480,615],{"class":614},[605,43482,619],{"class":618},[605,43484,622],{"class":618},[605,43486,625],{"class":610},[605,43488,628],{"class":610},[605,43490,632],{"class":631},[605,43492,628],{"class":610},[605,43494,637],{"class":610},[605,43496,43497,43499,43501,43503,43505,43507,43509,43511],{"class":607,"line":546},[605,43498,645],{"class":644},[605,43500,648],{"class":610},[605,43502,683],{"class":651},[605,43504,661],{"class":610},[605,43506,664],{"class":644},[605,43508,667],{"class":610},[605,43510,692],{"class":631},[605,43512,673],{"class":610},[605,43514,43516,43518,43520,43523,43525,43527,43529,43531,43533,43535,43537,43539],{"class":43515,"line":676},[607,641],[605,43517,645],{"class":644},[605,43519,648],{"class":610},[605,43521,43522],{"class":651}," Stage",[605,43524,655],{"class":610},[605,43526,658],{"class":651},[605,43528,655],{"class":610},[605,43530,36403],{"class":651},[605,43532,661],{"class":610},[605,43534,664],{"class":644},[605,43536,667],{"class":610},[605,43538,670],{"class":631},[605,43540,673],{"class":610},[605,43542,43543,43545,43547],{"class":607,"line":697},[605,43544,700],{"class":610},[605,43546,615],{"class":614},[605,43548,637],{"class":610},[605,43550,43551],{"class":607,"line":707},[605,43552,710],{"emptyLinePlaceholder":562},[605,43554,43555,43557,43559],{"class":607,"line":713},[605,43556,611],{"class":610},[605,43558,718],{"class":614},[605,43560,637],{"class":610},[605,43562,43563,43565,43567,43569],{"class":607,"line":723},[605,43564,726],{"class":610},[605,43566,729],{"class":614},[605,43568,35793],{"class":618},[605,43570,637],{"class":610},[605,43572,43573,43575,43577,43579,43581,43583,43585,43587,43589,43591,43593,43595,43597,43599,43601],{"class":607,"line":746},[605,43574,749],{"class":610},[605,43576,752],{"class":614},[605,43578,781],{"class":610},[605,43580,1459],{"class":618},[605,43582,625],{"class":610},[605,43584,628],{"class":610},[605,43586,1466],{"class":610},[605,43588,937],{"class":791},[605,43590,1471],{"class":610},[605,43592,4160],{"class":791},[605,43594,1471],{"class":610},[605,43596,2396],{"class":791},[605,43598,1481],{"class":610},[605,43600,628],{"class":610},[605,43602,755],{"class":610},[605,43604,43605,43607,43609,43611],{"class":607,"line":758},[605,43606,749],{"class":610},[605,43608,763],{"class":614},[605,43610,1868],{"class":618},[605,43612,755],{"class":610},[605,43614,43616,43618],{"class":43615,"line":768},[607,641],[605,43617,749],{"class":610},[605,43619,43620],{"class":614},"Stage\n",[605,43622,43624,43627,43629,43631,43634],{"class":43623,"line":773},[607,641],[605,43625,43626],{"class":618},"      lighting",[605,43628,625],{"class":610},[605,43630,628],{"class":610},[605,43632,43633],{"class":631},"rembrandt",[605,43635,2987],{"class":610},[605,43637,43639,43642,43644,43646,43649],{"class":43638,"line":799},[607,641],[605,43640,43641],{"class":618},"      shadows",[605,43643,625],{"class":610},[605,43645,628],{"class":610},[605,43647,43648],{"class":631},"contact",[605,43650,2987],{"class":610},[605,43652,43654,43656,43659,43661,43663,43665],{"class":43653,"line":599},[607,641],[605,43655,5693],{"class":610},[605,43657,43658],{"class":618},"adjust-camera",[605,43660,625],{"class":610},[605,43662,628],{"class":610},[605,43664,933],{"class":3870},[605,43666,2987],{"class":610},[605,43668,43670,43673,43675,43677,43679],{"class":43669,"line":822},[607,641],[605,43671,43672],{"class":618},"      environment",[605,43674,625],{"class":610},[605,43676,628],{"class":610},[605,43678,37317],{"class":631},[605,43680,2987],{"class":610},[605,43682,43684,43686,43688,43690,43692,43694],{"class":43683,"line":833},[607,641],[605,43685,5693],{"class":610},[605,43687,1886],{"class":618},[605,43689,625],{"class":610},[605,43691,628],{"class":610},[605,43693,1513],{"class":791},[605,43695,2987],{"class":610},[605,43697,43698],{"class":607,"line":844},[605,43699,5713],{"class":610},[605,43701,43702,43704,43706,43708],{"class":607,"line":854},[605,43703,825],{"class":610},[605,43705,828],{"class":614},[605,43707,9856],{"class":618},[605,43709,637],{"class":610},[605,43711,43712,43714,43716],{"class":607,"line":600},[605,43713,836],{"class":610},[605,43715,839],{"class":614},[605,43717,755],{"class":610},[605,43719,43720,43722,43724,43726,43728,43730,43732,43734],{"class":607,"line":874},[605,43721,836],{"class":610},[605,43723,13421],{"class":614},[605,43725,3978],{"class":618},[605,43727,625],{"class":610},[605,43729,628],{"class":610},[605,43731,6738],{"class":631},[605,43733,628],{"class":610},[605,43735,755],{"class":610},[605,43737,43738,43740,43742],{"class":607,"line":884},[605,43739,857],{"class":610},[605,43741,828],{"class":614},[605,43743,637],{"class":610},[605,43745,43746,43748,43750,43752,43754,43756,43758,43760,43762,43764,43766,43768,43770,43772,43774,43776,43778,43780,43782,43784,43786,43788,43790,43792,43794,43796],{"class":607,"line":2952},[605,43747,825],{"class":610},[605,43749,237],{"class":614},[605,43751,781],{"class":610},[605,43753,1459],{"class":618},[605,43755,625],{"class":610},[605,43757,628],{"class":610},[605,43759,1466],{"class":610},[605,43761,937],{"class":791},[605,43763,3598],{"class":610},[605,43765,792],{"class":791},[605,43767,1471],{"class":610},[605,43769,937],{"class":791},[605,43771,1481],{"class":610},[605,43773,628],{"class":610},[605,43775,36105],{"class":618},[605,43777,781],{"class":610},[605,43779,1989],{"class":618},[605,43781,625],{"class":610},[605,43783,628],{"class":610},[605,43785,1466],{"class":610},[605,43787,2396],{"class":791},[605,43789,1471],{"class":610},[605,43791,2396],{"class":791},[605,43793,1481],{"class":610},[605,43795,628],{"class":610},[605,43797,637],{"class":610},[605,43799,43800,43802,43804],{"class":607,"line":2960},[605,43801,836],{"class":610},[605,43803,13421],{"class":614},[605,43805,755],{"class":610},[605,43807,43808,43810,43812],{"class":607,"line":2990},[605,43809,857],{"class":610},[605,43811,237],{"class":614},[605,43813,637],{"class":610},[605,43815,43816,43818,43820],{"class":607,"line":3007},[605,43817,867],{"class":610},[605,43819,383],{"class":614},[605,43821,637],{"class":610},[605,43823,43824,43826,43828],{"class":607,"line":3022},[605,43825,877],{"class":610},[605,43827,729],{"class":614},[605,43829,637],{"class":610},[605,43831,43832,43834,43836],{"class":607,"line":3047},[605,43833,700],{"class":610},[605,43835,718],{"class":614},[605,43837,637],{"class":610},[472,43839,894],{"id":893},[899,43841,43842,43852],{},[902,43843,43844],{},[905,43845,43846,43848,43850],{},[908,43847,910],{"align":969},[908,43849,913],{"align":969},[908,43851,916],{"align":969},[918,43853,43854,43872,43889,43907,43921,43937],{},[905,43855,43856,43861,43867],{},[923,43857,43858],{"align":969},[1673,43859,43860],{},"lighting",[923,43862,43863,43864],{"align":969},"Lighting setup. Options: ",[586,43865,43866],{},"null | undefined | false | 'rembrandt' | 'portrait' | 'upfront' | 'soft' | { main: [x, y, z], fill: [x, y, z] }",[923,43868,43869],{"align":969},[586,43870,43871],{},"'rembrandt'",[905,43873,43874,43878,43884],{},[923,43875,43876],{"align":969},[1673,43877,32140],{},[923,43879,43880,43881],{"align":969},"Controls the ground shadows. Options: ",[586,43882,43883],{},"boolean | 'contact' | 'accumulative' | StageShadows",[923,43885,43886],{"align":969},[586,43887,43888],{},"'contact'",[905,43890,43891,43896,43903],{},[923,43892,43893],{"align":969},[1673,43894,43895],{},"adjustCamera",[923,43897,43898,43899,43902],{"align":969},"Optionally wraps and thereby centers the models using ",[586,43900,43901],{},"\u003CBounds>",", can also be a camera offset",[923,43904,43905],{"align":969},[586,43906,933],{},[905,43908,43909,43913,43916],{},[923,43910,43911],{"align":969},[1673,43912,43397],{},[923,43914,43915],{"align":969},"The default environment",[923,43917,43918],{"align":969},[586,43919,43920],{},"'city'",[905,43922,43923,43927,43933],{},[923,43924,43925],{"align":969},[1673,43926,1886],{},[923,43928,43929,43930,43932],{"align":969},"Lighting intensity, ",[586,43931,937],{}," removes lights",[923,43934,43935],{"align":969},[586,43936,1513],{},[905,43938,43939,43944,43947],{},[923,43940,43941],{"align":969},[1673,43942,43943],{},"align",[923,43945,43946],{"align":969},"To adjust alignment",[923,43948,43949],{"align":969},[586,43950,1151],{},[7473,43952,43954],{"id":43953},"stageshadows-type","StageShadows Type",[582,43956,43957],{},"When using custom shadow configuration, you can pass an object with the following properties:",[899,43959,43960,43970],{},[902,43961,43962],{},[905,43963,43964,43966,43968],{},[908,43965,910],{"align":969},[908,43967,913],{"align":969},[908,43969,916],{"align":969},[918,43971,43972,43986,43999,44013,44027],{},[905,43973,43974,43978,43984],{},[923,43975,43976],{"align":969},[1673,43977,29435],{},[923,43979,43980,43981],{"align":969},"Shadow type: ",[586,43982,43983],{},"'contact' | 'accumulative'",[923,43985,4088],{"align":969},[905,43987,43988,43992,43995],{},[923,43989,43990],{"align":969},[1673,43991,33561],{},[923,43993,43994],{"align":969},"Shadow plane offset",[923,43996,43997],{"align":969},[586,43998,937],{},[905,44000,44001,44005,44008],{},[923,44002,44003],{"align":969},[1673,44004,35915],{},[923,44006,44007],{"align":969},"Shadow bias",[923,44009,44010],{"align":969},[586,44011,44012],{},"-0.0001",[905,44014,44015,44020,44023],{},[923,44016,44017],{"align":969},[1673,44018,44019],{},"normalBias",[923,44021,44022],{"align":969},"Shadow normal bias",[923,44024,44025],{"align":969},[586,44026,937],{},[905,44028,44029,44033,44036],{},[923,44030,44031],{"align":969},[1673,44032,10233],{},[923,44034,44035],{"align":969},"Shadow map size",[923,44037,44038],{"align":969},[586,44039,32519],{},[582,44041,44042,44043,1471,44046,1691,44049,1118],{},"Additionally inherits all props from ",[586,44044,44045],{},"AccumulativeShadowsProps",[586,44047,44048],{},"RandomizedLightsProps",[586,44050,44051],{},"ContactShadowsProps",[1299,44053,44054],{},"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":544,"searchDepth":545,"depth":546,"links":44056},[44057,44058],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894,"children":44059},[44060],{"id":43953,"depth":676,"text":43954},"Creates a complete stage setup with lighting, shadows, and environment.",{},{"title":383,"description":44061},"ZUAOlQhFpQ_UzI0nm_Ae7_izK4y1v3X6HA7NTC6mQ3o",{"id":44066,"title":387,"body":44067,"description":44354,"extension":559,"links":560,"meta":44355,"navigation":562,"path":388,"seo":44356,"stem":389,"__hash__":44357},"docs/2.api/8.staging/stars.md",{"type":469,"value":44068,"toc":44350},[44069,44074,44080,44082,44087,44244,44246,44348],[576,44070,44071],{},[44072,44073],"staging-stars",{},[582,44075,44076,44079],{},[586,44077,44078],{},"\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",[472,44081,15],{"id":592},[582,44083,39610,44084,44086],{},[586,44085,44078],{}," component without passing any props,",[594,44088,44091],{"className":596,"code":44089,"highlights":44090,"language":601,"meta":544,"style":544},"\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",[676,758],[586,44092,44093,44113,44131,44151,44159,44163,44171,44179,44211,44220,44228,44236],{"__ignoreMap":544},[605,44094,44095,44097,44099,44101,44103,44105,44107,44109,44111],{"class":607,"line":545},[605,44096,611],{"class":610},[605,44098,615],{"class":614},[605,44100,619],{"class":618},[605,44102,622],{"class":618},[605,44104,625],{"class":610},[605,44106,628],{"class":610},[605,44108,632],{"class":631},[605,44110,628],{"class":610},[605,44112,637],{"class":610},[605,44114,44115,44117,44119,44121,44123,44125,44127,44129],{"class":607,"line":546},[605,44116,645],{"class":644},[605,44118,648],{"class":610},[605,44120,683],{"class":651},[605,44122,661],{"class":610},[605,44124,664],{"class":644},[605,44126,667],{"class":610},[605,44128,692],{"class":631},[605,44130,673],{"class":610},[605,44132,44134,44136,44138,44141,44143,44145,44147,44149],{"class":44133,"line":676},[607,641],[605,44135,645],{"class":644},[605,44137,648],{"class":610},[605,44139,44140],{"class":651}," Stars",[605,44142,661],{"class":610},[605,44144,664],{"class":644},[605,44146,667],{"class":610},[605,44148,670],{"class":631},[605,44150,673],{"class":610},[605,44152,44153,44155,44157],{"class":607,"line":697},[605,44154,700],{"class":610},[605,44156,615],{"class":614},[605,44158,637],{"class":610},[605,44160,44161],{"class":607,"line":707},[605,44162,710],{"emptyLinePlaceholder":562},[605,44164,44165,44167,44169],{"class":607,"line":713},[605,44166,611],{"class":610},[605,44168,718],{"class":614},[605,44170,637],{"class":610},[605,44172,44173,44175,44177],{"class":607,"line":723},[605,44174,726],{"class":610},[605,44176,729],{"class":614},[605,44178,637],{"class":610},[605,44180,44181,44183,44185,44187,44189,44191,44193,44195,44197,44199,44201,44203,44205,44207,44209],{"class":607,"line":746},[605,44182,749],{"class":610},[605,44184,752],{"class":614},[605,44186,781],{"class":610},[605,44188,1459],{"class":618},[605,44190,625],{"class":610},[605,44192,628],{"class":610},[605,44194,1466],{"class":610},[605,44196,937],{"class":791},[605,44198,1471],{"class":610},[605,44200,4160],{"class":791},[605,44202,1471],{"class":610},[605,44204,2396],{"class":791},[605,44206,1481],{"class":610},[605,44208,628],{"class":610},[605,44210,755],{"class":610},[605,44212,44214,44216,44218],{"class":44213,"line":758},[607,641],[605,44215,749],{"class":610},[605,44217,387],{"class":614},[605,44219,755],{"class":610},[605,44221,44222,44224,44226],{"class":607,"line":768},[605,44223,749],{"class":610},[605,44225,3518],{"class":614},[605,44227,755],{"class":610},[605,44229,44230,44232,44234],{"class":607,"line":773},[605,44231,877],{"class":610},[605,44233,729],{"class":614},[605,44235,637],{"class":610},[605,44237,44238,44240,44242],{"class":607,"line":799},[605,44239,700],{"class":610},[605,44241,718],{"class":614},[605,44243,637],{"class":610},[472,44245,894],{"id":893},[899,44247,44248,44258],{},[902,44249,44250],{},[905,44251,44252,44254,44256],{},[908,44253,910],{"align":969},[908,44255,913],{"align":969},[908,44257,916],{},[918,44259,44260,44271,44282,44293,44304,44315,44326,44337],{},[905,44261,44262,44266,44269],{},[923,44263,44264],{"align":969},[1673,44265,10233],{},[923,44267,44268],{"align":969},"The size of the stars",[923,44270,2203],{},[905,44272,44273,44277,44280],{},[923,44274,44275],{"align":969},[1673,44276,40617],{},[923,44278,44279],{"align":969},"keep the same size regardless distance.",[923,44281,933],{},[905,44283,44284,44288,44291],{},[923,44285,44286],{"align":969},[1673,44287,4873],{},[923,44289,44290],{"align":969},"show transparency on the stars texture",[923,44292,933],{},[905,44294,44295,44299,44302],{},[923,44296,44297],{"align":969},[1673,44298,32470],{},[923,44300,44301],{"align":969},"enables the WebGL to know when not to render the pixeltext.",[923,44303,1907],{},[905,44305,44306,44310,44313],{},[923,44307,44308],{"align":969},[1673,44309,40527],{},[923,44311,44312],{"align":969},"texture of the stars",[923,44314,3152],{},[905,44316,44317,44321,44324],{},[923,44318,44319],{"align":969},[1673,44320,5100],{},[923,44322,44323],{"align":969},"number of stars",[923,44325,40566],{},[905,44327,44328,44332,44335],{},[923,44329,44330],{"align":969},[1673,44331,6358],{},[923,44333,44334],{"align":969},"depth of star's shape",[923,44336,4597],{},[905,44338,44339,44343,44346],{},[923,44340,44341],{"align":969},[1673,44342,36008],{},[923,44344,44345],{"align":969},"Radius of star's shape",[923,44347,6028],{},[1299,44349,1648],{},{"title":544,"searchDepth":545,"depth":546,"links":44351},[44352,44353],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},"Renders beautiful stars in the sky using Points and BufferGeometry.",{},{"title":387,"description":44354},"Hth9yEzN_KgLKS-QKylR25ofLqF86DItRzJAOv9FBUM",[44359,45303,45752,46961,47385,53384,54006,54847,55849],{"id":44360,"title":397,"body":44361,"description":45299,"extension":559,"links":560,"meta":45300,"navigation":562,"path":398,"seo":45301,"stem":399,"__hash__":45302},"docs/2.api/9.objects/animated-sprite.md",{"type":469,"value":44362,"toc":45281},[44363,44368,44383,44391,44393,44585,44595,44599,44605,44619,44628,44632,44639,44658,44662,44670,44674,44700,44702,45029,45031,45099,45102,45108,45112,45115,45120,45123,45135,45150,45152,45155,45192,45195,45207,45211,45219,45229,45235,45238,45269,45272,45279],[576,44364,44365],{},[44366,44367],"objects-animated-sprite",{},[582,44369,44370,44373,44374,44379,44380,44382],{},[586,44371,44372],{},"\u003CAnimatedSprite />"," displays 2D animations defined in a ",[1112,44375,44378],{"href":44376,"rel":44377},"https://en.wikipedia.org/wiki/Texture_atlas",[1116],"texture atlas",". A typical ",[586,44381,44372],{}," will use:",[3136,44384,44385,44388],{},[3139,44386,44387],{},"An image containing multiple sprites",[3139,44389,44390],{},"A JSON atlas containing the individual sprite coordinates in the image",[472,44392,15],{"id":592},[594,44394,44397],{"className":596,"code":44395,"highlights":44396,"language":601,"meta":544,"style":544},"\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",[546,768,773,799,599,822],[586,44398,44399,44419,44439,44443,44465,44473,44477,44485,44493,44501,44509,44524,44539,44556,44561,44569,44577],{"__ignoreMap":544},[605,44400,44401,44403,44405,44407,44409,44411,44413,44415,44417],{"class":607,"line":545},[605,44402,611],{"class":610},[605,44404,615],{"class":614},[605,44406,619],{"class":618},[605,44408,622],{"class":618},[605,44410,625],{"class":610},[605,44412,628],{"class":610},[605,44414,632],{"class":631},[605,44416,628],{"class":610},[605,44418,637],{"class":610},[605,44420,44422,44424,44426,44429,44431,44433,44435,44437],{"class":44421,"line":546},[607,641],[605,44423,645],{"class":644},[605,44425,648],{"class":610},[605,44427,44428],{"class":651}," AnimatedSprite",[605,44430,661],{"class":610},[605,44432,664],{"class":644},[605,44434,667],{"class":610},[605,44436,670],{"class":631},[605,44438,673],{"class":610},[605,44440,44441],{"class":607,"line":676},[605,44442,710],{"emptyLinePlaceholder":562},[605,44444,44445,44447,44450,44452,44454,44456,44458,44461,44463],{"class":607,"line":697},[605,44446,2689],{"class":618},[605,44448,44449],{"class":651}," currentAnimation ",[605,44451,625],{"class":610},[605,44453,5431],{"class":2800},[605,44455,2970],{"class":651},[605,44457,5536],{"class":610},[605,44459,44460],{"class":631},"cientosIdle",[605,44462,5536],{"class":610},[605,44464,5539],{"class":651},[605,44466,44467,44469,44471],{"class":607,"line":707},[605,44468,700],{"class":610},[605,44470,615],{"class":614},[605,44472,637],{"class":610},[605,44474,44475],{"class":607,"line":713},[605,44476,710],{"emptyLinePlaceholder":562},[605,44478,44479,44481,44483],{"class":607,"line":723},[605,44480,611],{"class":610},[605,44482,718],{"class":614},[605,44484,637],{"class":610},[605,44486,44487,44489,44491],{"class":607,"line":746},[605,44488,726],{"class":610},[605,44490,729],{"class":614},[605,44492,637],{"class":610},[605,44494,44495,44497,44499],{"class":607,"line":758},[605,44496,749],{"class":610},[605,44498,14995],{"class":614},[605,44500,637],{"class":610},[605,44502,44504,44506],{"class":44503,"line":768},[607,641],[605,44505,825],{"class":610},[605,44507,44508],{"class":614},"AnimatedSprite\n",[605,44510,44512,44515,44517,44519,44522],{"class":44511,"line":773},[607,641],[605,44513,44514],{"class":618},"        image",[605,44516,625],{"class":610},[605,44518,628],{"class":610},[605,44520,44521],{"class":631},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosTexture.png",[605,44523,2987],{"class":610},[605,44525,44527,44530,44532,44534,44537],{"class":44526,"line":799},[607,641],[605,44528,44529],{"class":618},"        atlas",[605,44531,625],{"class":610},[605,44533,628],{"class":610},[605,44535,44536],{"class":631},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosAtlas.json",[605,44538,2987],{"class":610},[605,44540,44542,44544,44547,44549,44551,44554],{"class":44541,"line":599},[607,641],[605,44543,2993],{"class":610},[605,44545,44546],{"class":618},"animation",[605,44548,625],{"class":610},[605,44550,628],{"class":610},[605,44552,44553],{"class":651},"currentAnimation",[605,44555,2987],{"class":610},[605,44557,44559],{"class":44558,"line":822},[607,641],[605,44560,3050],{"class":610},[605,44562,44563,44565,44567],{"class":607,"line":833},[605,44564,867],{"class":610},[605,44566,14995],{"class":614},[605,44568,637],{"class":610},[605,44570,44571,44573,44575],{"class":607,"line":844},[605,44572,877],{"class":610},[605,44574,729],{"class":614},[605,44576,637],{"class":610},[605,44578,44579,44581,44583],{"class":607,"line":854},[605,44580,700],{"class":610},[605,44582,718],{"class":614},[605,44584,637],{"class":610},[3725,44586,44587],{},[582,44588,44589,44591,44592,1118],{},[586,44590,44372],{}," loads resources asynchronously, so it must be wrapped in a ",[586,44593,44594],{},"\u003CSuspense />",[472,44596,44598],{"id":44597},"compiling-an-atlas","Compiling an atlas",[582,44600,44601,44602,44604],{},"In typical usage, ",[586,44603,44372],{}," requires both the URL to a texture of compiled sprite images and a JSON atlas containing information about the sprites in the texture.",[3136,44606,44607,44613],{},[3139,44608,44609],{},[1112,44610,44612],{"href":44521,"rel":44611},[1116],"example compiled texture",[3139,44614,44615],{},[1112,44616,44618],{"href":44536,"rel":44617},[1116],"example JSON atlas",[582,44620,44621,44622,44627],{},"Compiling source images into a texture atlas is usually handled by third-party software. You may find ",[1112,44623,44626],{"href":44624,"rel":44625},"https://www.codeandweb.com/texturepacker",[1116],"TexturePacker"," useful.",[472,44629,44631],{"id":44630},"without-an-atlas","Without an atlas",[582,44633,44634,44635,44638],{},"There may be cases where you don't want to supply an atlas to the ",[586,44636,44637],{},"atlas"," prop. To do so:",[3136,44640,44641,44644,44647,44650],{},[3139,44642,44643],{},"Compile your source images into a single image texture.",[3139,44645,44646],{},"Space each sprite into equally sized columns and rows in the compiled image texture.",[3139,44648,44649],{},"Ensure no extra padding has been added to the compiled image texture.",[3139,44651,44652,44653,44655,44656,1118],{},"Set the ",[586,44654,44637],{}," prop to number of columns, number of rows as ",[586,44657,22132],{},[472,44659,44661],{"id":44660},"spritesheets-in-the-wild","Spritesheets in the wild",[3725,44663,44664],{},[582,44665,44666,44667,44669],{},"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 ",[586,44668,44372],{},". In many cases, it's advisable to recompile the spritesheet.",[7473,44671,44673],{"id":44672},"how-to-recompile-an-existing-spritesheet-image","How to recompile an existing spritesheet image",[3136,44675,44676,44679,44682,44685,44697],{},[3139,44677,44678],{},"Cut individual sprites from the spritesheet and paste them into separate layers in an image editing application, e.g., GIMP.",[3139,44680,44681],{},"Align the layers for animation. Toggling layer visibility on/off will show you how the animation will display, frame to frame.",[3139,44683,44684],{},"Export layers as individual images.",[3139,44686,44687,44688,44690,44693,44694,44696],{},"Name the individual images according to the following pattern: ",[2508,44689],{},[586,44691,44692],{},"[animation name][frame number].[extension]"," ",[2508,44695],{},"E.g., walk000.png, walk001.png, idle000.png, idle001.png",[3139,44698,44699],{},"Compile individual images into an image texture and atlas using a texture packing application, like TexturePacker.",[472,44701,894],{"id":893},[899,44703,44704,44714],{},[902,44705,44706],{},[905,44707,44708,44710,44712],{},[908,44709,3118],{"align":969},[908,44711,913],{"align":969},[908,44713,916],{"align":969},[918,44715,44716,44728,44766,44826,44840,44853,44876,44890,44904,44918,44932,44951,44975,44993,45011],{},[905,44717,44718,44721,44726],{},[923,44719,44720],{"align":969},"image",[923,44722,44723,44725],{"align":969},[586,44724,11094],{}," – URL of the image texture or an image dataURL. This prop is not reactive.",[923,44727],{"align":969},[905,44729,44730,44732,44764],{},[923,44731,44637],{"align":969},[923,44733,44734,44737,44738,44761,44763],{"align":969},[586,44735,44736],{},"string | Atlasish"," – ",[3136,44739,44740,44745,44750,44755],{},[3139,44741,930,44742,44744],{},[586,44743,11094],{},", the URL of the JSON atlas.",[3139,44746,930,44747,44749],{},[586,44748,2537],{},", the number of columns in the texture.",[3139,44751,930,44752,44754],{},[586,44753,22132],{},", the number of columns/rows in the texture.",[3139,44756,930,44757,44760],{},[586,44758,44759],{},"AtlasData",", the atlas as a JS object.",[2508,44762],{},"This prop is not reactive.",[923,44765],{"align":969},[905,44767,44768,44771,44824],{},[923,44769,44770],{"align":969},"definitions",[923,44772,44773,44776,44777,44779,44780,44782,44784,44785,44787,44789,44790],{"align":969},[586,44774,44775],{},"Record\u003Cstring, string>"," – Specify playback frame order and repeated frames (delays). ",[586,44778,44770],{}," is a record where keys are atlas animation names and values are strings containing an animation definition.",[2508,44781],{},[2508,44783],{},"A \"animation definition\" comma-separated string of frame numbers with optional parentheses-surrounded durations.",[2508,44786],{},[2508,44788],{},"Here is how various definition strings convert to arrays of frames for playback:",[3136,44791,44792,44799,44806,44812,44818],{},[3139,44793,44794,44795,44798],{},"\"0,2,1\" - ",[605,44796,44797],{},"0,2,1",", i.e., play frame 0, 2, then 1.",[3139,44800,44801,44802,44805],{},"\"2(10)\" - ",[605,44803,44804],{},"2,2,2,2,2,2,2,2,2,2",", i.e., play from 2 10 times.",[3139,44807,44808,44809],{},"\"1-4\" - ",[605,44810,44811],{},"1,2,3,4",[3139,44813,44814,44815],{},"\"10-5(2)\" - ",[605,44816,44817],{},"10,10,9,9,8,8,7,7,6,6,5,5",[3139,44819,44820,44821],{},"\"1-4(3),10(2)\" - ",[605,44822,44823],{},"1,1,1,2,2,2,3,3,3,4,4,4,10,10",[923,44825],{"align":969},[905,44827,44828,44831,44836],{},[923,44829,44830],{"align":969},"fps",[923,44832,44833,44835],{"align":969},[586,44834,2537],{}," – Desired frames per second of the animation.",[923,44837,44838],{"align":969},[586,44839,21690],{},[905,44841,44842,44844,44849],{},[923,44843,19561],{"align":969},[923,44845,44846,44848],{"align":969},[586,44847,11014],{}," – Whether or not the animation should loop.",[923,44850,44851],{"align":969},[586,44852,933],{},[905,44854,44855,44857,44872],{},[923,44856,44546],{"align":969},[923,44858,44859,44862,44863,44865,44866,44868,44869,44871],{"align":969},[586,44860,44861],{},"string | [number, number] | number"," – If ",[586,44864,11094],{},", name of the animation to play. If ",[586,44867,22132],{},", start and end frames of the animation. If ",[586,44870,2537],{},", frame number to display.",[923,44873,44874],{"align":969},[586,44875,937],{},[905,44877,44878,44881,44886],{},[923,44879,44880],{"align":969},"paused",[923,44882,44883,44885],{"align":969},[586,44884,11014],{}," – Whether the animation is paused.",[923,44887,44888],{"align":969},[586,44889,943],{},[905,44891,44892,44895,44900],{},[923,44893,44894],{"align":969},"reversed",[923,44896,44897,44899],{"align":969},[586,44898,11014],{}," – Whether to play the animation in reverse.",[923,44901,44902],{"align":969},[586,44903,943],{},[905,44905,44906,44909,44914],{},[923,44907,44908],{"align":969},"flipX",[923,44910,44911,44913],{"align":969},[586,44912,11014],{}," – Whether the sprite should be flipped, left to right.",[923,44915,44916],{"align":969},[586,44917,943],{},[905,44919,44920,44923,44928],{},[923,44921,44922],{"align":969},"resetOnEnd",[923,44924,44925,44927],{"align":969},[586,44926,11014],{}," – For a non-looping animation, when the animation ends, whether to display the zeroth frame.",[923,44929,44930],{"align":969},[586,44931,943],{},[905,44933,44934,44937,44947],{},[923,44935,44936],{"align":969},"asSprite",[923,44938,44939,44941,44942],{"align":969},[586,44940,11014],{}," – Whether to display the object as a THREE.Sprite. ",[1112,44943,44946],{"href":44944,"rel":44945},"https://threejs.org/docs/?q=sprite#api/en/objects/Sprite",[1116],"See THREE.Sprite",[923,44948,44949],{"align":969},[586,44950,933],{},[905,44952,44953,44956,44970],{},[923,44954,44955],{"align":969},"center",[923,44957,44958,44961,44962,44965,44966,44969],{"align":969},[586,44959,44960],{},"TresVector2"," – Anchor point of the object. A value of ",[605,44963,44964],{},"0.5, 0.5"," corresponds to the center. ",[605,44967,44968],{},"0, 0"," is left, bottom.",[923,44971,44972],{"align":969},[586,44973,44974],{},"[0.5, 0.5]",[905,44976,44977,44979,44989],{},[923,44978,32470],{"align":969},[923,44980,44981,44983,44984],{"align":969},[586,44982,2537],{}," – Alpha test value for the material. ",[1112,44985,44988],{"href":44986,"rel":44987},"https://threejs.org/docs/#api/en/materials/Material.alphaTest",[1116],"See THREE.Material.alphaTest",[923,44990,44991],{"align":969},[586,44992,7207],{},[905,44994,44995,44997,45007],{},[923,44996,41380],{"align":969},[923,44998,44999,45001,45002],{"align":969},[586,45000,11014],{}," – Depth test value for the material. ",[1112,45003,45006],{"href":45004,"rel":45005},"https://threejs.org/docs/#api/en/materials/Material.depthTest",[1116],"See THREE.Material.depthTest",[923,45008,45009],{"align":969},[586,45010,933],{},[905,45012,45013,45015,45025],{},[923,45014,4334],{"align":969},[923,45016,45017,45019,45020],{"align":969},[586,45018,11014],{}," – Depth write value for the material. ",[1112,45021,45024],{"href":45022,"rel":45023},"https://threejs.org/docs/#api/en/materials/Material.depthWrite",[1116],"See THREE.Material.depthWrite",[923,45026,45027],{"align":969},[586,45028,933],{},[472,45030,7742],{"id":7741},[899,45032,45033,45044],{},[902,45034,45035],{},[905,45036,45037,45039,45041],{},[908,45038,7807],{},[908,45040,913],{},[908,45042,45043],{},"Argument",[918,45045,45046,45061,45081],{},[905,45047,45048,45053,45056],{},[923,45049,45050],{},[586,45051,45052],{},"frame",[923,45054,45055],{},"Emitted when the displayed animation frame changes – at most once per tick, frames may be dropped",[923,45057,45058,45060],{},[586,45059,11094],{}," – Name of the newly displayed frame",[905,45062,45063,45067,45076],{},[923,45064,45065],{},[586,45066,7787],{},[923,45068,45069,45070,45073,45074],{},"Emitted when the animation ends – ",[586,45071,45072],{},"props.loop"," must be set to ",[586,45075,943],{},[923,45077,45078,45080],{},[586,45079,11094],{}," – Name of the ending frame",[905,45082,45083,45087,45094],{},[923,45084,45085],{},[586,45086,19561],{},[923,45088,45089,45090,45073,45092],{},"Emitted when the animation loops – ",[586,45091,45072],{},[586,45093,933],{},[923,45095,45096,45098],{},[586,45097,11094],{}," – Name of the frame at the end of the loop",[472,45100,45101],{"id":44546},"Animation",[582,45103,2253,45104,45107],{},[586,45105,45106],{},":animation"," prop holds either the name of the currently playing animation or a range of frames to play, or a frame number to display.",[7473,45109,45111],{"id":45110},"using-named-animations-as-animation","Using named animations as animation",[582,45113,45114],{},"When individual files are converted to a spritesheet/atlas, typically the original images' filenames will be included in the atlas.",[582,45116,45117,45119],{},[586,45118,44372],{}," uses those filenames to automatically group images into animations.",[582,45121,45122],{},"Use either of the following naming conventions for your source images ...",[3136,45124,45125,45130],{},[3139,45126,45127],{},[586,45128,45129],{},"[animation name][frame number].[file_extension]",[3139,45131,45132],{},[586,45133,45134],{},"[animation name]_[frame number].[file_extension]",[582,45136,45137,45138,45140,45141,45144,45145,45147,45148,34413],{},"... then ",[586,45139,44372],{}," will automatically make all ",[586,45142,45143],{},"[animation name]"," available for playback. Just pass ",[586,45146,45143],{}," to the component's ",[586,45149,45106],{},[7473,45151,34519],{"id":34518},[582,45153,45154],{},"For our Cientos heart cartoon character animation, here's how the filenames map to animation names.",[899,45156,45157,45167],{},[902,45158,45159],{},[905,45160,45161,45164],{},[908,45162,45163],{},"Filenames",[908,45165,45166],{},"Animation name",[918,45168,45169,45176,45184],{},[905,45170,45171,45174],{},[923,45172,45173],{},"cientosIdle0000.png, cientosIdle0001.png, ...",[923,45175,44460],{},[905,45177,45178,45181],{},[923,45179,45180],{},"cientosIdleToWalkTransition0000.png",[923,45182,45183],{},"cientosIdleToWalkTransition",[905,45185,45186,45189],{},[923,45187,45188],{},"cientosWalk0000.png, cientosWalk0001.png, ...",[923,45190,45191],{},"cientosWalk",[472,45193,45194],{"id":44770},"Definitions",[582,45196,45197,45198,45201,45202,45206],{},"You can supply an object to the ",[586,45199,45200],{},":definitions"," prop. Any ",[1112,45203,45205],{"href":45204},"#animation","named animation"," can be a key. The value is a string that specifies frame order and delays.",[7473,45208,45210],{"id":45209},"demo","Demo",[582,45212,45213,45214,42360,45216,1118],{},"In this demo, the 'idle' animation is comprised of six different images. By default, those images will play sequentially when the ",[586,45215,45106],{},[586,45217,45218],{},"'idle'",[582,45220,45221,45222,45224,45225,45228],{},"But below, we've added a ",[586,45223,45200],{}," prop with this value for the ",[586,45226,45227],{},"idle"," key:",[594,45230,45233],{"className":45231,"code":45232,"language":22930},[22928],"'0-5, 0(10), 1-2, 3(20), 4-5, 0-5(3)'\n",[586,45234,45232],{"__ignoreMap":544},[582,45236,45237],{},"So, instead of playing images 0-5 sequentially, this animation will play instead:",[3136,45239,45240,45249,45263],{},[3139,45241,45242,45245,45246,45248],{},[586,45243,45244],{},"0-5"," – Play all six images (",[586,45247,45244],{},") of the animation normally.",[3139,45250,45251,45254,45255,45258,45259,45262],{},[586,45252,45253],{},"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 (",[586,45256,45257],{},"0(10)",") and a delay of twenty frames at the top of the bounce (",[586,45260,45261],{},"3(20)",").",[3139,45264,45265,45268],{},[586,45266,45267],{},"0-5(3)"," – Finally, play all six images of the animation with a delay of three frames each.",[472,45270,45271],{"id":44955},"Center",[582,45273,45274,45275,45278],{},"In addition to being the sprite's anchor point, the ",[586,45276,45277],{},":center"," prop also controls how differently sized source images will \"grow\" and \"shrink\". Namely, they \"grow out from\" and \"shrink towards\" the center.",[1299,45280,38388],{},{"title":544,"searchDepth":545,"depth":546,"links":45282},[45283,45284,45285,45286,45289,45290,45291,45295,45298],{"id":592,"depth":546,"text":15},{"id":44597,"depth":546,"text":44598},{"id":44630,"depth":546,"text":44631},{"id":44660,"depth":546,"text":44661,"children":45287},[45288],{"id":44672,"depth":676,"text":44673},{"id":893,"depth":546,"text":894},{"id":7741,"depth":546,"text":7742},{"id":44546,"depth":546,"text":45101,"children":45292},[45293,45294],{"id":45110,"depth":676,"text":45111},{"id":34518,"depth":676,"text":34519},{"id":44770,"depth":546,"text":45194,"children":45296},[45297],{"id":45209,"depth":676,"text":45210},{"id":44955,"depth":546,"text":45271},"Display 2D animations defined in a texture atlas.",{},{"title":397,"description":45299},"TOx2TSEHnQeUR_DoVqP-W-cCHOVI1DisvWaE29LwWYA",{"id":45304,"title":401,"body":45305,"description":45748,"extension":559,"links":560,"meta":45749,"navigation":562,"path":402,"seo":45750,"stem":403,"__hash__":45751},"docs/2.api/9.objects/cube-camera.md",{"type":469,"value":45306,"toc":45744},[45307,45312,45322,45327,45329,45645,45647,45742],[576,45308,45309],{},[45310,45311],"objects-cube-camera",{},[582,45313,45314,45317,45318,45321],{},[586,45315,45316],{},"\u003CCubeCamera />"," creates a ",[586,45319,45320],{},"THREE.CubeCamera"," and uses it to render an environment map of your scene. The environment map is then applied to component's children.",[582,45323,45324,45326],{},[586,45325,45316],{}," makes its children invisible while rendering to the internal buffer so that they are not included in the reflection.",[472,45328,15],{"id":592},[594,45330,45333],{"className":596,"code":45331,"highlights":45332,"language":601,"meta":544,"style":544},"\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",[546,768,833],[586,45334,45335,45355,45379,45387,45391,45399,45407,45439,45447,45451,45484,45492,45524,45556,45564,45573,45577,45597,45629,45637],{"__ignoreMap":544},[605,45336,45337,45339,45341,45343,45345,45347,45349,45351,45353],{"class":607,"line":545},[605,45338,611],{"class":610},[605,45340,615],{"class":614},[605,45342,619],{"class":618},[605,45344,622],{"class":618},[605,45346,625],{"class":610},[605,45348,628],{"class":610},[605,45350,632],{"class":631},[605,45352,628],{"class":610},[605,45354,637],{"class":610},[605,45356,45358,45360,45362,45365,45367,45369,45371,45373,45375,45377],{"class":45357,"line":546},[607,641],[605,45359,645],{"class":644},[605,45361,648],{"class":610},[605,45363,45364],{"class":651}," CubeCamera",[605,45366,655],{"class":610},[605,45368,658],{"class":651},[605,45370,661],{"class":610},[605,45372,664],{"class":644},[605,45374,667],{"class":610},[605,45376,670],{"class":631},[605,45378,673],{"class":610},[605,45380,45381,45383,45385],{"class":607,"line":676},[605,45382,700],{"class":610},[605,45384,615],{"class":614},[605,45386,637],{"class":610},[605,45388,45389],{"class":607,"line":697},[605,45390,710],{"emptyLinePlaceholder":562},[605,45392,45393,45395,45397],{"class":607,"line":707},[605,45394,611],{"class":610},[605,45396,718],{"class":614},[605,45398,637],{"class":610},[605,45400,45401,45403,45405],{"class":607,"line":713},[605,45402,726],{"class":610},[605,45404,729],{"class":614},[605,45406,637],{"class":610},[605,45408,45409,45411,45413,45415,45417,45419,45421,45423,45425,45427,45429,45431,45433,45435,45437],{"class":607,"line":723},[605,45410,749],{"class":610},[605,45412,752],{"class":614},[605,45414,781],{"class":610},[605,45416,1459],{"class":618},[605,45418,625],{"class":610},[605,45420,628],{"class":610},[605,45422,1466],{"class":610},[605,45424,937],{"class":791},[605,45426,1471],{"class":610},[605,45428,792],{"class":791},[605,45430,1471],{"class":610},[605,45432,2396],{"class":791},[605,45434,1481],{"class":610},[605,45436,628],{"class":610},[605,45438,755],{"class":610},[605,45440,45441,45443,45445],{"class":607,"line":746},[605,45442,749],{"class":610},[605,45444,763],{"class":614},[605,45446,755],{"class":610},[605,45448,45449],{"class":607,"line":758},[605,45450,710],{"emptyLinePlaceholder":562},[605,45452,45454,45456,45458,45460,45462,45464,45466,45468,45470,45472,45474,45476,45478,45480,45482],{"class":45453,"line":768},[607,641],[605,45455,749],{"class":610},[605,45457,401],{"class":614},[605,45459,781],{"class":610},[605,45461,21937],{"class":618},[605,45463,625],{"class":610},[605,45465,628],{"class":610},[605,45467,21945],{"class":791},[605,45469,628],{"class":610},[605,45471,781],{"class":610},[605,45473,32388],{"class":618},[605,45475,625],{"class":610},[605,45477,628],{"class":610},[605,45479,6938],{"class":610},[605,45481,628],{"class":610},[605,45483,637],{"class":610},[605,45485,45486,45488,45490],{"class":607,"line":773},[605,45487,825],{"class":610},[605,45489,828],{"class":614},[605,45491,637],{"class":610},[605,45493,45494,45496,45498,45500,45502,45504,45506,45508,45510,45512,45514,45516,45518,45520,45522],{"class":607,"line":799},[605,45495,836],{"class":610},[605,45497,4735],{"class":614},[605,45499,781],{"class":610},[605,45501,1989],{"class":618},[605,45503,625],{"class":610},[605,45505,628],{"class":610},[605,45507,1466],{"class":610},[605,45509,1893],{"class":791},[605,45511,1471],{"class":610},[605,45513,5736],{"class":791},[605,45515,1471],{"class":610},[605,45517,5736],{"class":791},[605,45519,1481],{"class":610},[605,45521,628],{"class":610},[605,45523,755],{"class":610},[605,45525,45526,45528,45530,45532,45534,45536,45538,45540,45542,45544,45546,45548,45550,45552,45554],{"class":607,"line":599},[605,45527,836],{"class":610},[605,45529,13421],{"class":614},[605,45531,781],{"class":610},[605,45533,14791],{"class":618},[605,45535,625],{"class":610},[605,45537,628],{"class":610},[605,45539,1893],{"class":791},[605,45541,628],{"class":610},[605,45543,781],{"class":610},[605,45545,14806],{"class":618},[605,45547,625],{"class":610},[605,45549,628],{"class":610},[605,45551,937],{"class":791},[605,45553,628],{"class":610},[605,45555,755],{"class":610},[605,45557,45558,45560,45562],{"class":607,"line":822},[605,45559,857],{"class":610},[605,45561,828],{"class":614},[605,45563,637],{"class":610},[605,45565,45567,45569,45571],{"class":45566,"line":833},[607,641],[605,45568,867],{"class":610},[605,45570,401],{"class":614},[605,45572,637],{"class":610},[605,45574,45575],{"class":607,"line":844},[605,45576,710],{"emptyLinePlaceholder":562},[605,45578,45579,45581,45583,45585,45587,45589,45591,45593,45595],{"class":607,"line":854},[605,45580,749],{"class":610},[605,45582,3518],{"class":614},[605,45584,781],{"class":610},[605,45586,1886],{"class":618},[605,45588,625],{"class":610},[605,45590,628],{"class":610},[605,45592,1513],{"class":791},[605,45594,628],{"class":610},[605,45596,755],{"class":610},[605,45598,45599,45601,45603,45605,45607,45609,45611,45613,45615,45617,45619,45621,45623,45625,45627],{"class":607,"line":600},[605,45600,749],{"class":610},[605,45602,3539],{"class":614},[605,45604,781],{"class":610},[605,45606,1459],{"class":618},[605,45608,625],{"class":610},[605,45610,628],{"class":610},[605,45612,1466],{"class":610},[605,45614,937],{"class":791},[605,45616,1471],{"class":610},[605,45618,792],{"class":791},[605,45620,1471],{"class":610},[605,45622,3490],{"class":791},[605,45624,1481],{"class":610},[605,45626,628],{"class":610},[605,45628,755],{"class":610},[605,45630,45631,45633,45635],{"class":607,"line":874},[605,45632,877],{"class":610},[605,45634,729],{"class":614},[605,45636,637],{"class":610},[605,45638,45639,45641,45643],{"class":607,"line":884},[605,45640,700],{"class":610},[605,45642,718],{"class":614},[605,45644,637],{"class":610},[472,45646,894],{"id":893},[899,45648,45649,45659],{},[902,45650,45651],{},[905,45652,45653,45655,45657],{},[908,45654,910],{"align":969},[908,45656,913],{"align":969},[908,45658,916],{},[918,45660,45661,45680,45694,45707,45720,45731],{},[905,45662,45663,45667,45676],{},[923,45664,45665],{"align":969},[586,45666,32388],{},[923,45668,45669,45670,45672,45673,45675],{"align":969},"Number of frames to render. Set to ",[586,45671,1893],{}," for a static scene. ",[586,45674,6938],{}," to update continuously.",[923,45677,45678],{},[586,45679,6938],{},[905,45681,45682,45686,45689],{},[923,45683,45684],{"align":969},[586,45685,21937],{},[923,45687,45688],{"align":969},"Resolution of the FBO",[923,45690,45691],{},[586,45692,45693],{},"255",[905,45695,45696,45700,45703],{},[923,45697,45698],{"align":969},[586,45699,36295],{},[923,45701,45702],{"align":969},"Camera near",[923,45704,45705],{},[586,45706,2203],{},[905,45708,45709,45713,45716],{},[923,45710,45711],{"align":969},[586,45712,34031],{},[923,45714,45715],{"align":969},"Camera far",[923,45717,45718],{},[586,45719,5165],{},[905,45721,45722,45726,45729],{},[923,45723,45724],{"align":969},[586,45725,37266],{},[923,45727,45728],{"align":969},"Custom environment map that is temporarily set as the scene's background",[923,45730],{},[905,45732,45733,45737,45740],{},[923,45734,45735],{"align":969},[586,45736,33581],{},[923,45738,45739],{"align":969},"Custom fog that is temporarily set as the scene's fog",[923,45741],{},[1299,45743,1648],{},{"title":544,"searchDepth":545,"depth":546,"links":45745},[45746,45747],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},"Render environment maps for reflective objects.",{},{"title":401,"description":45748},"guPReQbllwq5wU5oLp9_7X7yFZih0xBoLQvebR42uzE",{"id":45753,"title":405,"body":45754,"description":46957,"extension":559,"links":560,"meta":46958,"navigation":562,"path":406,"seo":46959,"stem":407,"__hash__":46960},"docs/2.api/9.objects/fbo.md",{"type":469,"value":45755,"toc":46949},[45756,45761,45764,45771,45773,46464,46466,46579,46583,46585,46591,46598,46601,46860,46862,46946],[2558,45757,45758],{},[45759,45760],"objects-fbo",{},[582,45762,45763],{},"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.",[582,45765,45766,45767,45770],{},"Cientos provides an ",[586,45768,45769],{},"\u003CFbo />"," component make it easy to use FBOs in your application.",[472,45772,15],{"id":592},[594,45774,45777],{"className":596,"code":45775,"highlights":45776,"language":601,"meta":544,"style":544},"\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",[546,2990,3007,3022,3047],[586,45778,45779,45799,45823,45843,45861,45879,45883,45920,45946,45950,45974,45997,46023,46048,46052,46060,46064,46072,46105,46137,46145,46149,46177,46185,46199,46214,46238,46242,46250,46282,46286,46292,46307,46332,46336,46344,46348,46354,46366,46392,46396,46432,46440,46448,46456],{"__ignoreMap":544},[605,45780,45781,45783,45785,45787,45789,45791,45793,45795,45797],{"class":607,"line":545},[605,45782,611],{"class":610},[605,45784,615],{"class":614},[605,45786,619],{"class":618},[605,45788,622],{"class":618},[605,45790,625],{"class":610},[605,45792,628],{"class":610},[605,45794,632],{"class":631},[605,45796,628],{"class":610},[605,45798,637],{"class":610},[605,45800,45802,45804,45806,45809,45811,45813,45815,45817,45819,45821],{"class":45801,"line":546},[607,641],[605,45803,645],{"class":644},[605,45805,648],{"class":610},[605,45807,45808],{"class":651}," Fbo",[605,45810,655],{"class":610},[605,45812,658],{"class":651},[605,45814,661],{"class":610},[605,45816,664],{"class":644},[605,45818,667],{"class":610},[605,45820,670],{"class":631},[605,45822,673],{"class":610},[605,45824,45825,45827,45829,45831,45833,45835,45837,45839,45841],{"class":607,"line":676},[605,45826,645],{"class":644},[605,45828,11663],{"class":644},[605,45830,648],{"class":610},[605,45832,11668],{"class":651},[605,45834,661],{"class":610},[605,45836,664],{"class":644},[605,45838,667],{"class":610},[605,45840,692],{"class":631},[605,45842,673],{"class":610},[605,45844,45845,45847,45849,45851,45853,45855,45857,45859],{"class":607,"line":697},[605,45846,645],{"class":644},[605,45848,648],{"class":610},[605,45850,683],{"class":651},[605,45852,661],{"class":610},[605,45854,664],{"class":644},[605,45856,667],{"class":610},[605,45858,692],{"class":631},[605,45860,673],{"class":610},[605,45862,45863,45865,45867,45869,45871,45873,45875,45877],{"class":607,"line":707},[605,45864,645],{"class":644},[605,45866,648],{"class":610},[605,45868,9716],{"class":651},[605,45870,661],{"class":610},[605,45872,664],{"class":644},[605,45874,667],{"class":610},[605,45876,601],{"class":631},[605,45878,673],{"class":610},[605,45880,45881],{"class":607,"line":713},[605,45882,710],{"emptyLinePlaceholder":562},[605,45884,45885,45887,45890,45892,45894,45896,45899,45902,45904,45906,45909,45912,45914,45916,45918],{"class":607,"line":723},[605,45886,2689],{"class":618},[605,45888,45889],{"class":651}," fboRef ",[605,45891,625],{"class":610},[605,45893,9716],{"class":2800},[605,45895,611],{"class":610},[605,45897,45898],{"class":1172},"InstanceType",[605,45900,45901],{"class":610},"\u003Ctypeof",[605,45903,45808],{"class":651},[605,45905,11720],{"class":610},[605,45907,45908],{"class":610}," |",[605,45910,45911],{"class":1172}," null",[605,45913,11720],{"class":610},[605,45915,2970],{"class":651},[605,45917,3152],{"class":610},[605,45919,5539],{"class":651},[605,45921,45922,45924,45926,45928,45930,45932,45934,45936,45938,45940,45942,45944],{"class":607,"line":746},[605,45923,2689],{"class":618},[605,45925,5457],{"class":651},[605,45927,625],{"class":610},[605,45929,9716],{"class":2800},[605,45931,611],{"class":610},[605,45933,11717],{"class":1172},[605,45935,45908],{"class":610},[605,45937,45911],{"class":1172},[605,45939,11720],{"class":610},[605,45941,2970],{"class":651},[605,45943,3152],{"class":610},[605,45945,5539],{"class":651},[605,45947,45948],{"class":607,"line":758},[605,45949,710],{"emptyLinePlaceholder":562},[605,45951,45952,45954,45956,45958,45960,45962,45964,45966,45968,45970,45972],{"class":607,"line":768},[605,45953,32712],{"class":618},[605,45955,32715],{"class":2800},[605,45957,32718],{"class":610},[605,45959,32721],{"class":5495},[605,45961,32724],{"class":610},[605,45963,648],{"class":610},[605,45965,32721],{"class":614},[605,45967,1190],{"class":610},[605,45969,2697],{"class":1172},[605,45971,32735],{"class":610},[605,45973,1176],{"class":610},[605,45975,45976,45978,45980,45982,45984,45986,45988,45990,45992,45995],{"class":607,"line":773},[605,45977,14598],{"class":644},[605,45979,2713],{"class":614},[605,45981,15682],{"class":610},[605,45983,5643],{"class":651},[605,45985,1118],{"class":610},[605,45987,5496],{"class":651},[605,45989,2748],{"class":614},[605,45991,34746],{"class":610},[605,45993,45994],{"class":644}," return",[605,45996,15640],{"class":610},[605,45998,45999,46002,46004,46006,46008,46010,46012,46014,46016,46018,46020],{"class":607,"line":799},[605,46000,46001],{"class":651},"  torusRef",[605,46003,1118],{"class":610},[605,46005,5496],{"class":651},[605,46007,1118],{"class":610},[605,46009,21584],{"class":651},[605,46011,1118],{"class":610},[605,46013,2807],{"class":651},[605,46015,2766],{"class":610},[605,46017,32721],{"class":651},[605,46019,32779],{"class":610},[605,46021,46022],{"class":791}," 0.745\n",[605,46024,46025,46027,46029,46031,46033,46035,46037,46039,46041,46043,46045],{"class":607,"line":599},[605,46026,46001],{"class":651},[605,46028,1118],{"class":610},[605,46030,5496],{"class":651},[605,46032,1118],{"class":610},[605,46034,21584],{"class":651},[605,46036,1118],{"class":610},[605,46038,32772],{"class":651},[605,46040,2766],{"class":610},[605,46042,32721],{"class":651},[605,46044,32779],{"class":610},[605,46046,46047],{"class":791}," 0.361\n",[605,46049,46050],{"class":607,"line":822},[605,46051,1297],{"class":610},[605,46053,46054,46056,46058],{"class":607,"line":833},[605,46055,700],{"class":610},[605,46057,615],{"class":614},[605,46059,637],{"class":610},[605,46061,46062],{"class":607,"line":844},[605,46063,710],{"emptyLinePlaceholder":562},[605,46065,46066,46068,46070],{"class":607,"line":854},[605,46067,611],{"class":610},[605,46069,718],{"class":614},[605,46071,637],{"class":610},[605,46073,46074,46076,46078,46080,46082,46084,46086,46089,46091,46093,46095,46097,46099,46101,46103],{"class":607,"line":600},[605,46075,726],{"class":610},[605,46077,729],{"class":614},[605,46079,781],{"class":610},[605,46081,3394],{"class":618},[605,46083,625],{"class":610},[605,46085,628],{"class":610},[605,46087,46088],{"class":791},"0x222",[605,46090,628],{"class":610},[605,46092,7756],{"class":610},[605,46094,19561],{"class":618},[605,46096,625],{"class":610},[605,46098,628],{"class":610},[605,46100,32872],{"class":651},[605,46102,628],{"class":610},[605,46104,637],{"class":610},[605,46106,46107,46109,46111,46113,46115,46117,46119,46121,46123,46125,46127,46129,46131,46133,46135],{"class":607,"line":874},[605,46108,749],{"class":610},[605,46110,752],{"class":614},[605,46112,781],{"class":610},[605,46114,1459],{"class":618},[605,46116,625],{"class":610},[605,46118,628],{"class":610},[605,46120,1466],{"class":610},[605,46122,937],{"class":791},[605,46124,1471],{"class":610},[605,46126,1513],{"class":791},[605,46128,1471],{"class":610},[605,46130,2396],{"class":791},[605,46132,1481],{"class":610},[605,46134,628],{"class":610},[605,46136,755],{"class":610},[605,46138,46139,46141,46143],{"class":607,"line":884},[605,46140,749],{"class":610},[605,46142,763],{"class":614},[605,46144,755],{"class":610},[605,46146,46147],{"class":607,"line":2952},[605,46148,710],{"emptyLinePlaceholder":562},[605,46150,46151,46153,46155,46157,46159,46161,46163,46165,46167,46169,46171,46173,46175],{"class":607,"line":2960},[605,46152,749],{"class":610},[605,46154,3067],{"class":614},[605,46156,781],{"class":610},[605,46158,1989],{"class":618},[605,46160,625],{"class":610},[605,46162,628],{"class":610},[605,46164,1466],{"class":610},[605,46166,1478],{"class":791},[605,46168,1471],{"class":610},[605,46170,1478],{"class":791},[605,46172,1481],{"class":610},[605,46174,628],{"class":610},[605,46176,755],{"class":610},[605,46178,46180,46182],{"class":46179,"line":2990},[607,641],[605,46181,749],{"class":610},[605,46183,46184],{"class":614},"Fbo\n",[605,46186,46188,46190,46192,46194,46197],{"class":46187,"line":3007},[607,641],[605,46189,5679],{"class":618},[605,46191,625],{"class":610},[605,46193,628],{"class":610},[605,46195,46196],{"class":631},"fboRef",[605,46198,2987],{"class":610},[605,46200,46202,46204,46206,46208,46210,46212],{"class":46201,"line":3022},[607,641],[605,46203,5693],{"class":610},[605,46205,6358],{"class":618},[605,46207,625],{"class":610},[605,46209,628],{"class":610},[605,46211,943],{"class":3870},[605,46213,2987],{"class":610},[605,46215,46217,46219,46222,46224,46226,46228,46230,46232,46234,46236],{"class":46216,"line":3047},[607,641],[605,46218,5693],{"class":610},[605,46220,46221],{"class":618},"settings",[605,46223,625],{"class":610},[605,46225,628],{"class":610},[605,46227,7402],{"class":610},[605,46229,36765],{"class":614},[605,46231,7407],{"class":610},[605,46233,1893],{"class":791},[605,46235,661],{"class":610},[605,46237,2987],{"class":610},[605,46239,46240],{"class":607,"line":2591},[605,46241,10816],{"class":610},[605,46243,46244,46246,46248],{"class":607,"line":3062},[605,46245,749],{"class":610},[605,46247,828],{"class":614},[605,46249,637],{"class":610},[605,46251,46252,46254,46256,46258,46260,46262,46264,46266,46268,46270,46272,46274,46276,46278,46280],{"class":607,"line":3092},[605,46253,825],{"class":610},[605,46255,839],{"class":614},[605,46257,781],{"class":610},[605,46259,1989],{"class":618},[605,46261,625],{"class":610},[605,46263,628],{"class":610},[605,46265,1466],{"class":610},[605,46267,1893],{"class":791},[605,46269,1471],{"class":610},[605,46271,1893],{"class":791},[605,46273,1471],{"class":610},[605,46275,1893],{"class":791},[605,46277,1481],{"class":610},[605,46279,628],{"class":610},[605,46281,755],{"class":610},[605,46283,46284],{"class":607,"line":3101},[605,46285,710],{"emptyLinePlaceholder":562},[605,46287,46288,46290],{"class":607,"line":4207},[605,46289,825],{"class":610},[605,46291,16679],{"class":614},[605,46293,46294,46296,46298,46300,46302,46305],{"class":607,"line":4212},[605,46295,2993],{"class":610},[605,46297,2500],{"class":618},[605,46299,625],{"class":610},[605,46301,628],{"class":610},[605,46303,46304],{"class":791},"0xFFFFFF",[605,46306,2987],{"class":610},[605,46308,46309,46311,46313,46315,46317,46319,46321,46323,46325,46327,46330],{"class":607,"line":4235},[605,46310,2993],{"class":610},[605,46312,13426],{"class":618},[605,46314,625],{"class":610},[605,46316,628],{"class":610},[605,46318,46196],{"class":651},[605,46320,10582],{"class":610},[605,46322,20549],{"class":651},[605,46324,10582],{"class":610},[605,46326,13433],{"class":651},[605,46328,46329],{"class":610}," ?? null",[605,46331,2987],{"class":610},[605,46333,46334],{"class":607,"line":4244},[605,46335,3050],{"class":610},[605,46337,46338,46340,46342],{"class":607,"line":4253},[605,46339,867],{"class":610},[605,46341,828],{"class":614},[605,46343,637],{"class":610},[605,46345,46346],{"class":607,"line":4262},[605,46347,710],{"emptyLinePlaceholder":562},[605,46349,46350,46352],{"class":607,"line":4271},[605,46351,749],{"class":610},[605,46353,2957],{"class":614},[605,46355,46356,46358,46360,46362,46364],{"class":607,"line":14784},[605,46357,5679],{"class":618},[605,46359,625],{"class":610},[605,46361,628],{"class":610},[605,46363,5643],{"class":631},[605,46365,2987],{"class":610},[605,46367,46368,46370,46372,46374,46376,46378,46380,46382,46384,46386,46388,46390],{"class":607,"line":14799},[605,46369,5693],{"class":610},[605,46371,1459],{"class":618},[605,46373,625],{"class":610},[605,46375,628],{"class":610},[605,46377,1466],{"class":610},[605,46379,4160],{"class":791},[605,46381,1471],{"class":610},[605,46383,937],{"class":791},[605,46385,1471],{"class":610},[605,46387,937],{"class":791},[605,46389,1481],{"class":610},[605,46391,2987],{"class":610},[605,46393,46394],{"class":607,"line":14814},[605,46395,5713],{"class":610},[605,46397,46398,46400,46402,46404,46406,46408,46410,46412,46414,46416,46418,46420,46422,46424,46426,46428,46430],{"class":607,"line":14819},[605,46399,825],{"class":610},[605,46401,5127],{"class":614},[605,46403,781],{"class":610},[605,46405,1989],{"class":618},[605,46407,625],{"class":610},[605,46409,628],{"class":610},[605,46411,1466],{"class":610},[605,46413,1893],{"class":791},[605,46415,1471],{"class":610},[605,46417,1513],{"class":791},[605,46419,1471],{"class":610},[605,46421,29832],{"class":791},[605,46423,1471],{"class":610},[605,46425,6028],{"class":791},[605,46427,1481],{"class":610},[605,46429,628],{"class":610},[605,46431,755],{"class":610},[605,46433,46434,46436,46438],{"class":607,"line":14826},[605,46435,825],{"class":610},[605,46437,849],{"class":614},[605,46439,755],{"class":610},[605,46441,46442,46444,46446],{"class":607,"line":14831},[605,46443,867],{"class":610},[605,46445,828],{"class":614},[605,46447,637],{"class":610},[605,46449,46450,46452,46454],{"class":607,"line":14837},[605,46451,877],{"class":610},[605,46453,729],{"class":614},[605,46455,637],{"class":610},[605,46457,46458,46460,46462],{"class":607,"line":14858},[605,46459,700],{"class":610},[605,46461,718],{"class":614},[605,46463,637],{"class":610},[472,46465,894],{"id":893},[899,46467,46468,46478],{},[902,46469,46470],{},[905,46471,46472,46474,46476],{},[908,46473,910],{"align":969},[908,46475,913],{"align":969},[908,46477,916],{},[918,46479,46480,46496,46512,46536,46561],{},[905,46481,46482,46488,46493],{},[923,46483,46484],{"align":969},[1673,46485,46486],{},[586,46487,34003],{},[923,46489,46490,46492],{"align":969},[586,46491,2537],{}," - The width of the FBO.",[923,46494,46495],{},"Width of the canvas",[905,46497,46498,46504,46509],{},[923,46499,46500],{"align":969},[1673,46501,46502],{},[586,46503,34017],{},[923,46505,46506,46508],{"align":969},[586,46507,2537],{}," - the height of the FBO",[923,46510,46511],{},"Height of the canvas",[905,46513,46514,46520,46532],{},[923,46515,46516],{"align":969},[1673,46517,46518],{},[586,46519,6358],{},[923,46521,46522,46524,46525,1118],{"align":969},[586,46523,11014],{}," - Whether or not the FBO should render the depth to a ",[1112,46526,46529],{"href":46527,"rel":46528},"https://threejs.org/docs/?q=webglre#api/en/renderers/WebGLRenderTarget.depthTexture",[1116],[586,46530,46531],{},"depthTexture",[923,46533,46534],{},[586,46535,943],{},[905,46537,46538,46544,46557],{},[923,46539,46540],{"align":969},[1673,46541,46542],{},[586,46543,46221],{},[923,46545,46546,46549,46550],{"align":969},[586,46547,46548],{},"WebGLRenderTargetOptions"," - Every other configuration property for the ",[1112,46551,46554,18673],{"href":46552,"rel":46553},"https://threejs.org/docs/#api/en/renderers/WebGLRenderTarget",[1116],[586,46555,46556],{},"WebGLRenderTarget",[923,46558,46559],{},[586,46560,16300],{},[905,46562,46563,46570,46575],{},[923,46564,46565],{"align":969},[1673,46566,46567],{},[586,46568,46569],{},"autoRender",[923,46571,46572,46574],{"align":969},[586,46573,11014],{}," - Whether to automatically render the FBO on the default scene.",[923,46576,46577],{},[586,46578,933],{},[472,46580,46582],{"id":46581},"usefbo","useFBO",[582,46584,45763],{},[582,46586,46587,46588,46590],{},"Cientos provides a ",[586,46589,46582],{}," composable to make it easy to use FBOs in your application.",[3725,46592,46593],{},[582,46594,2253,46595,46597],{},[586,46596,46582],{}," composable must be used inside of a child component since it needs the context of TresCanvas.",[7473,46599,15],{"id":46600},"usage-1",[594,46602,46605],{"className":596,"code":46603,"highlights":46604,"language":601,"meta":544,"style":544},"\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",[546,697,707,713,723,746,758,768,773,884],[586,46606,46607,46627,46647,46651,46667,46678,46689,46700,46710,46722,46727,46734,46742,46746,46754,46762,46794,46798,46804,46818,46840,46844,46852],{"__ignoreMap":544},[605,46608,46609,46611,46613,46615,46617,46619,46621,46623,46625],{"class":607,"line":545},[605,46610,611],{"class":610},[605,46612,615],{"class":614},[605,46614,619],{"class":618},[605,46616,622],{"class":618},[605,46618,625],{"class":610},[605,46620,628],{"class":610},[605,46622,632],{"class":631},[605,46624,628],{"class":610},[605,46626,637],{"class":610},[605,46628,46630,46632,46634,46637,46639,46641,46643,46645],{"class":46629,"line":546},[607,641],[605,46631,645],{"class":644},[605,46633,648],{"class":610},[605,46635,46636],{"class":651}," useFBO",[605,46638,661],{"class":610},[605,46640,664],{"class":644},[605,46642,667],{"class":610},[605,46644,670],{"class":631},[605,46646,673],{"class":610},[605,46648,46649],{"class":607,"line":676},[605,46650,710],{"emptyLinePlaceholder":562},[605,46652,46654,46656,46659,46661,46663,46665],{"class":46653,"line":697},[607,641],[605,46655,2689],{"class":618},[605,46657,46658],{"class":651}," fboTarget ",[605,46660,625],{"class":610},[605,46662,46636],{"class":2800},[605,46664,2970],{"class":651},[605,46666,2751],{"class":610},[605,46668,46670,46672,46674,46676],{"class":46669,"line":707},[607,641],[605,46671,1231],{"class":614},[605,46673,1190],{"class":610},[605,46675,10938],{"class":3870},[605,46677,14031],{"class":610},[605,46679,46681,46683,46685,46687],{"class":46680,"line":713},[607,641],[605,46682,1212],{"class":614},[605,46684,1190],{"class":610},[605,46686,35309],{"class":791},[605,46688,14031],{"class":610},[605,46690,46692,46694,46696,46698],{"class":46691,"line":723},[607,641],[605,46693,1222],{"class":614},[605,46695,1190],{"class":610},[605,46697,35309],{"class":791},[605,46699,14031],{"class":610},[605,46701,46703,46706,46708],{"class":46702,"line":746},[607,641],[605,46704,46705],{"class":614},"  settings",[605,46707,1190],{"class":610},[605,46709,1176],{"class":610},[605,46711,46713,46716,46718,46720],{"class":46712,"line":758},[607,641],[605,46714,46715],{"class":614},"    samples",[605,46717,1190],{"class":610},[605,46719,22969],{"class":791},[605,46721,14031],{"class":610},[605,46723,46725],{"class":46724,"line":768},[607,641],[605,46726,17650],{"class":610},[605,46728,46730,46732],{"class":46729,"line":773},[607,641],[605,46731,5544],{"class":610},[605,46733,5539],{"class":651},[605,46735,46736,46738,46740],{"class":607,"line":799},[605,46737,700],{"class":610},[605,46739,615],{"class":614},[605,46741,637],{"class":610},[605,46743,46744],{"class":607,"line":599},[605,46745,710],{"emptyLinePlaceholder":562},[605,46747,46748,46750,46752],{"class":607,"line":822},[605,46749,611],{"class":610},[605,46751,718],{"class":614},[605,46753,637],{"class":610},[605,46755,46756,46758,46760],{"class":607,"line":833},[605,46757,726],{"class":610},[605,46759,828],{"class":614},[605,46761,637],{"class":610},[605,46763,46764,46766,46768,46770,46772,46774,46776,46778,46780,46782,46784,46786,46788,46790,46792],{"class":607,"line":844},[605,46765,749],{"class":610},[605,46767,839],{"class":614},[605,46769,781],{"class":610},[605,46771,1989],{"class":618},[605,46773,625],{"class":610},[605,46775,628],{"class":610},[605,46777,1466],{"class":610},[605,46779,1893],{"class":791},[605,46781,1471],{"class":610},[605,46783,1893],{"class":791},[605,46785,1471],{"class":610},[605,46787,1893],{"class":791},[605,46789,1481],{"class":610},[605,46791,628],{"class":610},[605,46793,755],{"class":610},[605,46795,46796],{"class":607,"line":854},[605,46797,710],{"emptyLinePlaceholder":562},[605,46799,46800,46802],{"class":607,"line":600},[605,46801,749],{"class":610},[605,46803,16679],{"class":614},[605,46805,46806,46808,46810,46812,46814,46816],{"class":607,"line":874},[605,46807,5693],{"class":610},[605,46809,2500],{"class":618},[605,46811,625],{"class":610},[605,46813,628],{"class":610},[605,46815,46304],{"class":791},[605,46817,2987],{"class":610},[605,46819,46821,46823,46825,46827,46829,46832,46834,46836,46838],{"class":46820,"line":884},[607,641],[605,46822,5693],{"class":610},[605,46824,13426],{"class":618},[605,46826,625],{"class":610},[605,46828,628],{"class":610},[605,46830,46831],{"class":651},"fboTarget",[605,46833,10582],{"class":610},[605,46835,13433],{"class":651},[605,46837,46329],{"class":610},[605,46839,2987],{"class":610},[605,46841,46842],{"class":607,"line":2952},[605,46843,10816],{"class":610},[605,46845,46846,46848,46850],{"class":607,"line":2960},[605,46847,877],{"class":610},[605,46849,828],{"class":614},[605,46851,637],{"class":610},[605,46853,46854,46856,46858],{"class":607,"line":2990},[605,46855,700],{"class":610},[605,46857,718],{"class":614},[605,46859,637],{"class":610},[7473,46861,7487],{"id":11049},[899,46863,46864,46874],{},[902,46865,46866],{},[905,46867,46868,46870,46872],{},[908,46869,910],{"align":969},[908,46871,913],{"align":969},[908,46873,916],{},[918,46875,46876,46890,46904,46925],{},[905,46877,46878,46884,46888],{},[923,46879,46880],{"align":969},[1673,46881,46882],{},[586,46883,34003],{},[923,46885,46886,46492],{"align":969},[586,46887,2537],{},[923,46889,46495],{},[905,46891,46892,46898,46902],{},[923,46893,46894],{"align":969},[1673,46895,46896],{},[586,46897,34017],{},[923,46899,46900,46508],{"align":969},[586,46901,2537],{},[923,46903,46511],{},[905,46905,46906,46912,46921],{},[923,46907,46908],{"align":969},[1673,46909,46910],{},[586,46911,6358],{},[923,46913,46914,46524,46916,1118],{"align":969},[586,46915,11014],{},[1112,46917,46919],{"href":46527,"rel":46918},[1116],[586,46920,46531],{},[923,46922,46923],{},[586,46924,943],{},[905,46926,46927,46933,46942],{},[923,46928,46929],{"align":969},[1673,46930,46931],{},[586,46932,46221],{},[923,46934,46935,46549,46937],{"align":969},[586,46936,46548],{},[1112,46938,46940,18673],{"href":46552,"rel":46939},[1116],[586,46941,46556],{},[923,46943,46944],{},[586,46945,16300],{},[1299,46947,46948],{},"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":544,"searchDepth":545,"depth":546,"links":46950},[46951,46952,46953],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},{"id":46581,"depth":546,"text":46582,"children":46954},[46955,46956],{"id":46600,"depth":676,"text":15},{"id":11049,"depth":676,"text":7487},"Render to texture using Frame Buffer Objects.",{},{"title":405,"description":46957},"ch0ffhPITGouVRylpEdp2CmD8Fl-JOZCHt9eio9zKpc",{"id":46962,"title":409,"body":46963,"description":47381,"extension":559,"links":560,"meta":47382,"navigation":562,"path":410,"seo":47383,"stem":411,"__hash__":47384},"docs/2.api/9.objects/gradient-texture.md",{"type":469,"value":46964,"toc":47377},[46965,46970,46979,46981,47232,47234,47375],[2558,46966,46967],{},[46968,46969],"objects-gradient-texture",{},[582,46971,46972,46975,46976,46978],{},[586,46973,46974],{},"\u003CGradientTexture />"," creates a gradient in a THREE.Texture and attaches it to its parent THREE.Material's ",[586,46977,13426],{}," by default.",[472,46980,15],{"id":592},[594,46982,46984],{"className":596,"code":46983,"language":601,"meta":544,"style":544},"\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",[586,46985,46986,47006,47025,47033,47037,47045,47053,47085,47089,47097,47125,47133,47140,47164,47195,47200,47208,47216,47224],{"__ignoreMap":544},[605,46987,46988,46990,46992,46994,46996,46998,47000,47002,47004],{"class":607,"line":545},[605,46989,611],{"class":610},[605,46991,615],{"class":614},[605,46993,619],{"class":618},[605,46995,622],{"class":618},[605,46997,625],{"class":610},[605,46999,628],{"class":610},[605,47001,632],{"class":631},[605,47003,628],{"class":610},[605,47005,637],{"class":610},[605,47007,47008,47010,47012,47015,47017,47019,47021,47023],{"class":607,"line":546},[605,47009,645],{"class":644},[605,47011,648],{"class":610},[605,47013,47014],{"class":651}," GradientTexture",[605,47016,661],{"class":610},[605,47018,664],{"class":644},[605,47020,667],{"class":610},[605,47022,670],{"class":631},[605,47024,673],{"class":610},[605,47026,47027,47029,47031],{"class":607,"line":676},[605,47028,700],{"class":610},[605,47030,615],{"class":614},[605,47032,637],{"class":610},[605,47034,47035],{"class":607,"line":697},[605,47036,710],{"emptyLinePlaceholder":562},[605,47038,47039,47041,47043],{"class":607,"line":707},[605,47040,611],{"class":610},[605,47042,718],{"class":614},[605,47044,637],{"class":610},[605,47046,47047,47049,47051],{"class":607,"line":713},[605,47048,726],{"class":610},[605,47050,729],{"class":614},[605,47052,637],{"class":610},[605,47054,47055,47057,47059,47061,47063,47065,47067,47069,47071,47073,47075,47077,47079,47081,47083],{"class":607,"line":723},[605,47056,749],{"class":610},[605,47058,752],{"class":614},[605,47060,781],{"class":610},[605,47062,1459],{"class":618},[605,47064,625],{"class":610},[605,47066,628],{"class":610},[605,47068,1466],{"class":610},[605,47070,937],{"class":791},[605,47072,1471],{"class":610},[605,47074,937],{"class":791},[605,47076,1471],{"class":610},[605,47078,2396],{"class":791},[605,47080,1481],{"class":610},[605,47082,628],{"class":610},[605,47084,755],{"class":610},[605,47086,47087],{"class":607,"line":746},[605,47088,710],{"emptyLinePlaceholder":562},[605,47090,47091,47093,47095],{"class":607,"line":758},[605,47092,749],{"class":610},[605,47094,828],{"class":614},[605,47096,637],{"class":610},[605,47098,47099,47101,47103,47105,47107,47109,47111,47113,47115,47117,47119,47121,47123],{"class":607,"line":768},[605,47100,825],{"class":610},[605,47102,21624],{"class":614},[605,47104,781],{"class":610},[605,47106,1989],{"class":618},[605,47108,625],{"class":610},[605,47110,628],{"class":610},[605,47112,1466],{"class":610},[605,47114,792],{"class":791},[605,47116,1471],{"class":610},[605,47118,792],{"class":791},[605,47120,1481],{"class":610},[605,47122,628],{"class":610},[605,47124,755],{"class":610},[605,47126,47127,47129,47131],{"class":607,"line":773},[605,47128,825],{"class":610},[605,47130,2425],{"class":614},[605,47132,637],{"class":610},[605,47134,47135,47137],{"class":607,"line":799},[605,47136,836],{"class":610},[605,47138,47139],{"class":614},"GradientTexture\n",[605,47141,47142,47145,47148,47150,47152,47154,47156,47158,47160,47162],{"class":607,"line":599},[605,47143,47144],{"class":610},"          :",[605,47146,47147],{"class":618},"stops",[605,47149,625],{"class":610},[605,47151,628],{"class":610},[605,47153,1466],{"class":610},[605,47155,937],{"class":791},[605,47157,1471],{"class":610},[605,47159,1893],{"class":791},[605,47161,1481],{"class":610},[605,47163,2987],{"class":610},[605,47165,47166,47168,47171,47173,47175,47177,47179,47181,47183,47185,47187,47189,47191,47193],{"class":607,"line":822},[605,47167,47144],{"class":610},[605,47169,47170],{"class":618},"colors",[605,47172,625],{"class":610},[605,47174,628],{"class":610},[605,47176,1466],{"class":610},[605,47178,5536],{"class":610},[605,47180,2525],{"class":631},[605,47182,5536],{"class":610},[605,47184,1471],{"class":610},[605,47186,5536],{"class":610},[605,47188,15229],{"class":631},[605,47190,5536],{"class":610},[605,47192,1481],{"class":610},[605,47194,2987],{"class":610},[605,47196,47197],{"class":607,"line":833},[605,47198,47199],{"class":610},"        />\n",[605,47201,47202,47204,47206],{"class":607,"line":844},[605,47203,857],{"class":610},[605,47205,2425],{"class":614},[605,47207,637],{"class":610},[605,47209,47210,47212,47214],{"class":607,"line":854},[605,47211,867],{"class":610},[605,47213,828],{"class":614},[605,47215,637],{"class":610},[605,47217,47218,47220,47222],{"class":607,"line":600},[605,47219,877],{"class":610},[605,47221,729],{"class":614},[605,47223,637],{"class":610},[605,47225,47226,47228,47230],{"class":607,"line":874},[605,47227,700],{"class":610},[605,47229,718],{"class":614},[605,47231,637],{"class":610},[472,47233,894],{"id":893},[899,47235,47236,47246],{},[902,47237,47238],{},[905,47239,47240,47242,47244],{},[908,47241,910],{"align":969},[908,47243,913],{"align":969},[908,47245,916],{},[918,47247,47248,47274,47288,47303,47316,47329,47346,47360],{},[905,47249,47250,47254,47272],{},[923,47251,47252],{"align":969},[586,47253,47147],{},[923,47255,47256,47257,47259,47260,4431,47262,47264,47265,47268,47269,1118],{"align":969},"A ",[586,47258,30031],{}," of values between ",[586,47261,937],{},[586,47263,1893],{}," representing the color positions in the gradient. ",[586,47266,47267],{},"stops.length"," should match ",[586,47270,47271],{},"color.length",[923,47273],{},[905,47275,47276,47280,47286],{},[923,47277,47278],{"align":969},[586,47279,47170],{},[923,47281,47256,47282,47285],{"align":969},[586,47283,47284],{},"THREE.ColorRepresentation[]"," representing the colors in the gradient.",[923,47287],{},[905,47289,47290,47295,47298],{},[923,47291,47292],{"align":969},[586,47293,47294],{},"attach",[923,47296,47297],{"align":969},"Where the component should be attached within its parent.",[923,47299,47300],{},[586,47301,47302],{},"'map'",[905,47304,47305,47309,47312],{},[923,47306,47307],{"align":969},[586,47308,34017],{},[923,47310,47311],{"align":969},"Height of the canvas used to draw the gradient.",[923,47313,47314],{},[586,47315,32519],{},[905,47317,47318,47322,47325],{},[923,47319,47320],{"align":969},[586,47321,34003],{},[923,47323,47324],{"align":969},"Width of the canvas used to draw the gradient.",[923,47326,47327],{},[586,47328,29832],{},[905,47330,47331,47335,47341],{},[923,47332,47333],{"align":969},[586,47334,29435],{},[923,47336,47337,47340],{"align":969},[586,47338,47339],{},"'linear' | 'radial'"," Type of gradient to draw.",[923,47342,47343],{},[586,47344,47345],{},"'linear'",[905,47347,47348,47353,47356],{},[923,47349,47350],{"align":969},[586,47351,47352],{},"innerCircleRadius",[923,47354,47355],{"align":969},"Radius of the inner circle of a radial gradient.",[923,47357,47358],{},[586,47359,937],{},[905,47361,47362,47367,47370],{},[923,47363,47364],{"align":969},[586,47365,47366],{},"outerCircleRadius",[923,47368,47369],{"align":969},"Radius of the outer circle of a radial gradient.",[923,47371,47372],{},[586,47373,47374],{},"'auto'",[1299,47376,1648],{},{"title":544,"searchDepth":545,"depth":546,"links":47378},[47379,47380],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},"Create gradient textures for materials.",{},{"title":409,"description":47381},"vYfm15fEwNZgRGLtXSYlU49KPYrI7wEBqbJQsM4JeNo",{"id":47386,"title":413,"body":47387,"description":53380,"extension":559,"links":560,"meta":53381,"navigation":562,"path":414,"seo":53382,"stem":415,"__hash__":53383},"docs/2.api/9.objects/html.md",{"type":469,"value":47388,"toc":53361},[47389,47392,47405,47410,47412,47875,47879,47886,47891,47907,47915,47920,48063,48068,48072,48096,48101,48231,48235,48259,48262,48286,48303,48323,48328,48492,48496,48501,48524,48536,48541,50435,50437,50460,50480,50521,50525,50540,50552,50588,50595,50619,50636,50641,52251,52257,52263,52268,52468,52485,52487,52847,52849,52869,52873,52954,52958,53133,53337,53340,53358],[582,47390,47391],{},"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.",[582,47393,47394,47395,4431,47397,47400,47401,47404],{},"🚀 Works seamlessly with both ",[1673,47396,6214],{},[1673,47398,47399],{},"OrthographicCamera"," — the active camera is automatically detected by the ",[586,47402,47403],{},"\u003CHtml>"," component.",[2558,47406,47407],{},[47408,47409],"objects-html",{},[472,47411,15],{"id":592},[594,47413,47416],{"className":596,"code":47414,"highlights":47415,"language":601,"meta":544,"style":544},"\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",[546,599,822,833,844,854,600],[586,47417,47418,47438,47462,47480,47488,47492,47500,47518,47550,47558,47590,47598,47606,47614,47620,47626,47642,47669,47696,47701,47730,47739,47747,47755,47763,47771,47779,47790,47798,47814,47827,47839,47851,47863,47867],{"__ignoreMap":544},[605,47419,47420,47422,47424,47426,47428,47430,47432,47434,47436],{"class":607,"line":545},[605,47421,611],{"class":610},[605,47423,615],{"class":614},[605,47425,619],{"class":618},[605,47427,622],{"class":618},[605,47429,625],{"class":610},[605,47431,628],{"class":610},[605,47433,632],{"class":631},[605,47435,628],{"class":610},[605,47437,637],{"class":610},[605,47439,47441,47443,47445,47448,47450,47452,47454,47456,47458,47460],{"class":47440,"line":546},[607,641],[605,47442,645],{"class":644},[605,47444,648],{"class":610},[605,47446,47447],{"class":651}," Html",[605,47449,655],{"class":610},[605,47451,658],{"class":651},[605,47453,661],{"class":610},[605,47455,664],{"class":644},[605,47457,667],{"class":610},[605,47459,670],{"class":631},[605,47461,673],{"class":610},[605,47463,47464,47466,47468,47470,47472,47474,47476,47478],{"class":607,"line":676},[605,47465,645],{"class":644},[605,47467,648],{"class":610},[605,47469,683],{"class":651},[605,47471,661],{"class":610},[605,47473,664],{"class":644},[605,47475,667],{"class":610},[605,47477,692],{"class":631},[605,47479,673],{"class":610},[605,47481,47482,47484,47486],{"class":607,"line":697},[605,47483,700],{"class":610},[605,47485,615],{"class":614},[605,47487,637],{"class":610},[605,47489,47490],{"class":607,"line":707},[605,47491,710],{"emptyLinePlaceholder":562},[605,47493,47494,47496,47498],{"class":607,"line":713},[605,47495,611],{"class":610},[605,47497,718],{"class":614},[605,47499,637],{"class":610},[605,47501,47502,47504,47506,47508,47510,47512,47514,47516],{"class":607,"line":723},[605,47503,726],{"class":610},[605,47505,729],{"class":614},[605,47507,732],{"class":618},[605,47509,625],{"class":610},[605,47511,628],{"class":610},[605,47513,5040],{"class":631},[605,47515,628],{"class":610},[605,47517,637],{"class":610},[605,47519,47520,47522,47524,47526,47528,47530,47532,47534,47536,47538,47540,47542,47544,47546,47548],{"class":607,"line":746},[605,47521,749],{"class":610},[605,47523,752],{"class":614},[605,47525,781],{"class":610},[605,47527,1459],{"class":618},[605,47529,625],{"class":610},[605,47531,628],{"class":610},[605,47533,1466],{"class":610},[605,47535,792],{"class":791},[605,47537,1471],{"class":610},[605,47539,792],{"class":791},[605,47541,1471],{"class":610},[605,47543,2396],{"class":791},[605,47545,1481],{"class":610},[605,47547,628],{"class":610},[605,47549,755],{"class":610},[605,47551,47552,47554,47556],{"class":607,"line":758},[605,47553,749],{"class":610},[605,47555,763],{"class":614},[605,47557,755],{"class":610},[605,47559,47560,47562,47564,47566,47568,47570,47572,47574,47576,47578,47580,47582,47584,47586,47588],{"class":607,"line":768},[605,47561,749],{"class":610},[605,47563,828],{"class":614},[605,47565,781],{"class":610},[605,47567,1459],{"class":618},[605,47569,625],{"class":610},[605,47571,628],{"class":610},[605,47573,1466],{"class":610},[605,47575,1893],{"class":791},[605,47577,1471],{"class":610},[605,47579,1893],{"class":791},[605,47581,1471],{"class":610},[605,47583,1893],{"class":791},[605,47585,1481],{"class":610},[605,47587,628],{"class":610},[605,47589,637],{"class":610},[605,47591,47592,47594,47596],{"class":607,"line":773},[605,47593,825],{"class":610},[605,47595,839],{"class":614},[605,47597,755],{"class":610},[605,47599,47600,47602,47604],{"class":607,"line":799},[605,47601,825],{"class":610},[605,47603,849],{"class":614},[605,47605,755],{"class":610},[605,47607,47609,47611],{"class":47608,"line":599},[607,641],[605,47610,825],{"class":610},[605,47612,47613],{"class":614},"Html\n",[605,47615,47617],{"class":47616,"line":822},[607,641],[605,47618,47619],{"class":618},"        center\n",[605,47621,47623],{"class":47622,"line":833},[607,641],[605,47624,47625],{"class":618},"        transform\n",[605,47627,47629,47631,47634,47636,47638,47640],{"class":47628,"line":844},[607,641],[605,47630,2993],{"class":610},[605,47632,47633],{"class":618},"distance-factor",[605,47635,625],{"class":610},[605,47637,628],{"class":610},[605,47639,3490],{"class":791},[605,47641,2987],{"class":610},[605,47643,47645,47647,47649,47651,47653,47655,47657,47659,47661,47663,47665,47667],{"class":47644,"line":854},[607,641],[605,47646,2993],{"class":610},[605,47648,1459],{"class":618},[605,47650,625],{"class":610},[605,47652,628],{"class":610},[605,47654,1466],{"class":610},[605,47656,937],{"class":791},[605,47658,1471],{"class":610},[605,47660,937],{"class":791},[605,47662,1471],{"class":610},[605,47664,2146],{"class":791},[605,47666,1481],{"class":610},[605,47668,2987],{"class":610},[605,47670,47672,47674,47676,47678,47680,47682,47684,47686,47688,47690,47692,47694],{"class":47671,"line":600},[607,641],[605,47673,2993],{"class":610},[605,47675,784],{"class":618},[605,47677,625],{"class":610},[605,47679,628],{"class":610},[605,47681,1466],{"class":610},[605,47683,4645],{"class":791},[605,47685,1471],{"class":610},[605,47687,4645],{"class":791},[605,47689,1471],{"class":610},[605,47691,4645],{"class":791},[605,47693,1481],{"class":610},[605,47695,2987],{"class":610},[605,47697,47698],{"class":607,"line":874},[605,47699,47700],{"class":610},"      >\n",[605,47702,47703,47705,47708,47710,47712,47714,47717,47719,47721,47724,47726,47728],{"class":607,"line":884},[605,47704,836],{"class":610},[605,47706,47707],{"class":614},"h1",[605,47709,18673],{"class":618},[605,47711,625],{"class":610},[605,47713,628],{"class":610},[605,47715,47716],{"class":631},"title",[605,47718,628],{"class":610},[605,47720,11720],{"class":610},[605,47722,47723],{"class":651},"I'm a Box 📦",[605,47725,700],{"class":610},[605,47727,47707],{"class":614},[605,47729,637],{"class":610},[605,47731,47732,47734,47737],{"class":607,"line":2952},[605,47733,857],{"class":610},[605,47735,47736],{"class":614},"Html",[605,47738,637],{"class":610},[605,47740,47741,47743,47745],{"class":607,"line":2960},[605,47742,867],{"class":610},[605,47744,828],{"class":614},[605,47746,637],{"class":610},[605,47748,47749,47751,47753],{"class":607,"line":2990},[605,47750,749],{"class":610},[605,47752,3067],{"class":614},[605,47754,755],{"class":610},[605,47756,47757,47759,47761],{"class":607,"line":3007},[605,47758,749],{"class":610},[605,47760,3518],{"class":614},[605,47762,755],{"class":610},[605,47764,47765,47767,47769],{"class":607,"line":3022},[605,47766,877],{"class":610},[605,47768,729],{"class":614},[605,47770,637],{"class":610},[605,47772,47773,47775,47777],{"class":607,"line":3047},[605,47774,700],{"class":610},[605,47776,718],{"class":614},[605,47778,637],{"class":610},[605,47780,47781,47783,47785,47788],{"class":607,"line":2591},[605,47782,611],{"class":610},[605,47784,1299],{"class":614},[605,47786,47787],{"class":618}," scoped",[605,47789,637],{"class":610},[605,47791,47792,47794,47796],{"class":607,"line":3062},[605,47793,1118],{"class":610},[605,47795,47716],{"class":1172},[605,47797,1176],{"class":610},[605,47799,47800,47804,47806,47809,47812],{"class":607,"line":3092},[605,47801,47803],{"class":47802},"sqsOY","  background-color",[605,47805,1190],{"class":610},[605,47807,47808],{"class":610}," #",[605,47810,47811],{"class":651},"1e1e1e",[605,47813,3329],{"class":610},[605,47815,47816,47818,47820,47822,47825],{"class":607,"line":3101},[605,47817,35150],{"class":47802},[605,47819,1190],{"class":610},[605,47821,47808],{"class":610},[605,47823,47824],{"class":651},"ffffff",[605,47826,3329],{"class":610},[605,47828,47829,47832,47834,47837],{"class":607,"line":4207},[605,47830,47831],{"class":47802},"  font-size",[605,47833,1190],{"class":610},[605,47835,47836],{"class":791}," 0.75rem",[605,47838,3329],{"class":610},[605,47840,47841,47844,47846,47849],{"class":607,"line":4212},[605,47842,47843],{"class":47802},"  padding",[605,47845,1190],{"class":610},[605,47847,47848],{"class":791}," 0.25rem",[605,47850,3329],{"class":610},[605,47852,47853,47856,47858,47861],{"class":607,"line":4235},[605,47854,47855],{"class":47802},"  border-radius",[605,47857,1190],{"class":610},[605,47859,47860],{"class":791}," 0.375rem",[605,47862,3329],{"class":610},[605,47864,47865],{"class":607,"line":4244},[605,47866,1297],{"class":610},[605,47868,47869,47871,47873],{"class":607,"line":4253},[605,47870,700],{"class":610},[605,47872,1299],{"class":614},[605,47874,637],{"class":610},[472,47876,47878],{"id":47877},"occlusion","Occlusion",[582,47880,47881,47882,47885],{},"By default, the HTML content will be visible through other objects in the scene. You can use the ",[586,47883,47884],{},"occlude"," prop to make the HTML content occlude other objects in the scene.",[582,47887,47888,47889,34413],{},"Html can be hidden behind one or more objects in your scene using the ",[586,47890,47884],{},[594,47892,47894],{"className":596,"code":47893,"language":601,"meta":544,"style":544},"\u003CHtml occlude>\n",[586,47895,47896],{"__ignoreMap":544},[605,47897,47898,47900,47902,47905],{"class":607,"line":545},[605,47899,611],{"class":610},[605,47901,47736],{"class":614},[605,47903,47904],{"class":618}," occlude",[605,47906,637],{"class":610},[582,47908,930,47909,47911,47912,47914],{},[586,47910,47884],{},", then ",[586,47913,47403],{}," will be hidden by any objects that pass in front of its position.",[2558,47916,47917],{},[47918,47919],"objects-html-occlusion",{},[47921,47922,47923,47924,47928],"details",{},"\n  ",[47925,47926,47927],"summary",{},"Demo code",[594,47929,47931],{"className":38905,"code":47930,"language":38907,"meta":544,"style":544},"\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",[586,47932,47933,47953,47961,47969,48019,48047,48055],{"__ignoreMap":544},[605,47934,47935,47937,47939,47942,47944,47946,47949,47951],{"class":607,"line":545},[605,47936,611],{"class":610},[605,47938,828],{"class":614},[605,47940,47941],{"class":618}," :position",[605,47943,625],{"class":610},[605,47945,628],{"class":610},[605,47947,47948],{"class":631},"[0, 1, -2]",[605,47950,628],{"class":610},[605,47952,637],{"class":610},[605,47954,47955,47957,47959],{"class":607,"line":546},[605,47956,726],{"class":610},[605,47958,839],{"class":614},[605,47960,755],{"class":610},[605,47962,47963,47965,47967],{"class":607,"line":676},[605,47964,726],{"class":610},[605,47966,849],{"class":614},[605,47968,755],{"class":610},[605,47970,47971,47973,47975,47978,47981,47983,47986,47988,47990,47992,47994,47996,47998,48000,48003,48005,48008,48010,48012,48015,48017],{"class":607,"line":697},[605,47972,726],{"class":610},[605,47974,38907],{"class":614},[605,47976,47977],{"class":618}," center",[605,47979,47980],{"class":618}," transform",[605,47982,47904],{"class":618},[605,47984,47985],{"class":618}," :distance-factor",[605,47987,625],{"class":610},[605,47989,628],{"class":610},[605,47991,3490],{"class":631},[605,47993,628],{"class":610},[605,47995,47941],{"class":618},[605,47997,625],{"class":610},[605,47999,628],{"class":610},[605,48001,48002],{"class":631},"[0, 0, 2]",[605,48004,628],{"class":610},[605,48006,48007],{"class":618}," :z-index-range",[605,48009,625],{"class":610},[605,48011,628],{"class":610},[605,48013,48014],{"class":631},"[28, 0]",[605,48016,628],{"class":610},[605,48018,637],{"class":610},[605,48020,48021,48023,48025,48027,48029,48031,48034,48036,48038,48041,48043,48045],{"class":607,"line":707},[605,48022,749],{"class":610},[605,48024,47707],{"class":614},[605,48026,18673],{"class":618},[605,48028,625],{"class":610},[605,48030,628],{"class":610},[605,48032,48033],{"class":631},"bg-white dark:bg-dark text-xs p-1 rounded",[605,48035,628],{"class":610},[605,48037,11720],{"class":610},[605,48039,48040],{"class":651},"Move camera",[605,48042,700],{"class":610},[605,48044,47707],{"class":614},[605,48046,637],{"class":610},[605,48048,48049,48051,48053],{"class":607,"line":713},[605,48050,877],{"class":610},[605,48052,38907],{"class":614},[605,48054,637],{"class":610},[605,48056,48057,48059,48061],{"class":607,"line":723},[605,48058,700],{"class":610},[605,48060,828],{"class":614},[605,48062,637],{"class":610},[582,48064,48065,48066,2068],{},"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 ",[586,48067,47884],{},[7473,48069,48071],{"id":48070},"single-occluder","Single occluder",[594,48073,48075],{"className":596,"code":48074,"language":601,"meta":544,"style":544},"\u003CHtml occlude=\"[mesh]\">\n",[586,48076,48077],{"__ignoreMap":544},[605,48078,48079,48081,48083,48085,48087,48089,48092,48094],{"class":607,"line":545},[605,48080,611],{"class":610},[605,48082,47736],{"class":614},[605,48084,47904],{"class":618},[605,48086,625],{"class":610},[605,48088,628],{"class":610},[605,48090,48091],{"class":631},"[mesh]",[605,48093,628],{"class":610},[605,48095,637],{"class":610},[2558,48097,48098],{},[48099,48100],"objects-html-single-occluder",{},[47921,48102,47923,48103,48105],{},[47925,48104,47927],{},[594,48106,48108],{"className":38905,"code":48107,"language":38907,"meta":544,"style":544},"\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",[586,48109,48110,48129,48137,48145,48189,48215,48223],{"__ignoreMap":544},[605,48111,48112,48114,48116,48118,48120,48122,48125,48127],{"class":607,"line":545},[605,48113,611],{"class":610},[605,48115,828],{"class":614},[605,48117,47941],{"class":618},[605,48119,625],{"class":610},[605,48121,628],{"class":610},[605,48123,48124],{"class":631},"[0, 1, 0]",[605,48126,628],{"class":610},[605,48128,637],{"class":610},[605,48130,48131,48133,48135],{"class":607,"line":546},[605,48132,726],{"class":610},[605,48134,839],{"class":614},[605,48136,755],{"class":610},[605,48138,48139,48141,48143],{"class":607,"line":676},[605,48140,726],{"class":610},[605,48142,849],{"class":614},[605,48144,755],{"class":610},[605,48146,48147,48149,48151,48153,48155,48158,48160,48162,48165,48167,48169,48171,48173,48175,48177,48179,48181,48183,48185,48187],{"class":607,"line":697},[605,48148,726],{"class":610},[605,48150,38907],{"class":614},[605,48152,47977],{"class":618},[605,48154,47980],{"class":618},[605,48156,48157],{"class":618}," :occlude",[605,48159,625],{"class":610},[605,48161,628],{"class":610},[605,48163,48164],{"class":631},"[sphereRef]",[605,48166,628],{"class":610},[605,48168,47985],{"class":618},[605,48170,625],{"class":610},[605,48172,628],{"class":610},[605,48174,3490],{"class":631},[605,48176,628],{"class":610},[605,48178,48007],{"class":618},[605,48180,625],{"class":610},[605,48182,628],{"class":610},[605,48184,48014],{"class":631},[605,48186,628],{"class":610},[605,48188,637],{"class":610},[605,48190,48191,48193,48195,48197,48199,48201,48203,48205,48207,48209,48211,48213],{"class":607,"line":707},[605,48192,749],{"class":610},[605,48194,47707],{"class":614},[605,48196,18673],{"class":618},[605,48198,625],{"class":610},[605,48200,628],{"class":610},[605,48202,48033],{"class":631},[605,48204,628],{"class":610},[605,48206,11720],{"class":610},[605,48208,48040],{"class":651},[605,48210,700],{"class":610},[605,48212,47707],{"class":614},[605,48214,637],{"class":610},[605,48216,48217,48219,48221],{"class":607,"line":713},[605,48218,877],{"class":610},[605,48220,38907],{"class":614},[605,48222,637],{"class":610},[605,48224,48225,48227,48229],{"class":607,"line":723},[605,48226,700],{"class":610},[605,48228,828],{"class":614},[605,48230,637],{"class":610},[7473,48232,48234],{"id":48233},"multiple-occluders","Multiple occluders",[594,48236,48238],{"className":596,"code":48237,"language":601,"meta":544,"style":544},"\u003CHtml occlude=\"[mesh1, mesh2, mesh3, ...]\" />\n",[586,48239,48240],{"__ignoreMap":544},[605,48241,48242,48244,48246,48248,48250,48252,48255,48257],{"class":607,"line":545},[605,48243,611],{"class":610},[605,48245,47736],{"class":614},[605,48247,47904],{"class":618},[605,48249,625],{"class":610},[605,48251,628],{"class":610},[605,48253,48254],{"class":631},"[mesh1, mesh2, mesh3, ...]",[605,48256,628],{"class":610},[605,48258,755],{"class":610},[582,48260,48261],{},"OR",[594,48263,48265],{"className":596,"code":48264,"language":601,"meta":544,"style":544},"\u003CHtml occlude=\"meshesArray\" />\n",[586,48266,48267],{"__ignoreMap":544},[605,48268,48269,48271,48273,48275,48277,48279,48282,48284],{"class":607,"line":545},[605,48270,611],{"class":610},[605,48272,47736],{"class":614},[605,48274,47904],{"class":618},[605,48276,625],{"class":610},[605,48278,628],{"class":610},[605,48280,48281],{"class":631},"meshesArray",[605,48283,628],{"class":610},[605,48285,755],{"class":610},[582,48287,48288,48289,48292,48293,48297,48298,48302],{},"In the demo below, a ",[586,48290,48291],{},"v-for"," loop generates multiple spheres around the cube.\nAll resulting ",[1673,48294,48295],{},[586,48296,5299],{}," instances are collected into an array and passed to the ",[1673,48299,48300],{},[586,48301,47884],{}," prop, allowing each sphere to occlude the HTML content.",[582,48304,48305,48306,48311,48312,48315,48316,4431,48319,48322],{},"This demo also uses the ",[1673,48307,48308],{},[586,48309,48310],{},"on-occlude"," event, which is triggered whenever the occlusion state changes.\nHere, the event updates a ",[1673,48313,48314],{},"reactive value"," to control element styles — for example, toggling between ",[1677,48317,48318],{},"light",[1677,48320,48321],{},"dark"," themes.",[2558,48324,48325],{},[48326,48327],"objects-html-occlude-complex-demo",{},[47921,48329,47923,48330,48332],{},[47925,48331,47927],{},[594,48333,48335],{"className":38905,"code":48334,"language":38907,"meta":544,"style":544},"\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",[586,48336,48337,48355,48363,48371,48378,48392,48406,48419,48432,48446,48450,48476,48484],{"__ignoreMap":544},[605,48338,48339,48341,48343,48345,48347,48349,48351,48353],{"class":607,"line":545},[605,48340,611],{"class":610},[605,48342,828],{"class":614},[605,48344,47941],{"class":618},[605,48346,625],{"class":610},[605,48348,628],{"class":610},[605,48350,48124],{"class":631},[605,48352,628],{"class":610},[605,48354,637],{"class":610},[605,48356,48357,48359,48361],{"class":607,"line":546},[605,48358,726],{"class":610},[605,48360,839],{"class":614},[605,48362,755],{"class":610},[605,48364,48365,48367,48369],{"class":607,"line":676},[605,48366,726],{"class":610},[605,48368,849],{"class":614},[605,48370,755],{"class":610},[605,48372,48373,48375],{"class":607,"line":697},[605,48374,726],{"class":610},[605,48376,48377],{"class":614},"html\n",[605,48379,48380,48383,48385,48387,48390],{"class":607,"line":707},[605,48381,48382],{"class":618},"    v-bind",[605,48384,625],{"class":610},[605,48386,628],{"class":610},[605,48388,48389],{"class":631},"htmlProps",[605,48391,2987],{"class":610},[605,48393,48394,48397,48399,48401,48404],{"class":607,"line":713},[605,48395,48396],{"class":618},"    :occlude",[605,48398,625],{"class":610},[605,48400,628],{"class":610},[605,48402,48403],{"class":631},"occluderRefs",[605,48405,2987],{"class":610},[605,48407,48408,48411,48413,48415,48417],{"class":607,"line":723},[605,48409,48410],{"class":618},"    :distance-factor",[605,48412,625],{"class":610},[605,48414,628],{"class":610},[605,48416,3490],{"class":631},[605,48418,2987],{"class":610},[605,48420,48421,48424,48426,48428,48430],{"class":607,"line":746},[605,48422,48423],{"class":618},"    :z-index-range",[605,48425,625],{"class":610},[605,48427,628],{"class":610},[605,48429,48014],{"class":631},[605,48431,2987],{"class":610},[605,48433,48434,48437,48439,48441,48444],{"class":607,"line":758},[605,48435,48436],{"class":618},"    @on-occlude",[605,48438,625],{"class":610},[605,48440,628],{"class":610},[605,48442,48443],{"class":631},"(event: boolean) => isOccluded = event",[605,48445,2987],{"class":610},[605,48447,48448],{"class":607,"line":768},[605,48449,13858],{"class":610},[605,48451,48452,48454,48456,48458,48460,48462,48464,48466,48468,48470,48472,48474],{"class":607,"line":773},[605,48453,749],{"class":610},[605,48455,47707],{"class":614},[605,48457,18673],{"class":618},[605,48459,625],{"class":610},[605,48461,628],{"class":610},[605,48463,48033],{"class":631},[605,48465,628],{"class":610},[605,48467,11720],{"class":610},[605,48469,48040],{"class":651},[605,48471,700],{"class":610},[605,48473,47707],{"class":614},[605,48475,637],{"class":610},[605,48477,48478,48480,48482],{"class":607,"line":799},[605,48479,877],{"class":610},[605,48481,38907],{"class":614},[605,48483,637],{"class":610},[605,48485,48486,48488,48490],{"class":607,"line":599},[605,48487,700],{"class":610},[605,48489,828],{"class":614},[605,48491,637],{"class":610},[7473,48493,48495],{"id":48494},"blending-occlusion","Blending Occlusion",[582,48497,48498,48500],{},[586,48499,47403],{}," 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.",[594,48502,48504],{"className":596,"code":48503,"language":601,"meta":544,"style":544},"\u003CHtml occlude=\"blending\">\n",[586,48505,48506],{"__ignoreMap":544},[605,48507,48508,48510,48512,48514,48516,48518,48520,48522],{"class":607,"line":545},[605,48509,611],{"class":610},[605,48511,47736],{"class":614},[605,48513,47904],{"class":618},[605,48515,625],{"class":610},[605,48517,628],{"class":610},[605,48519,43302],{"class":631},[605,48521,628],{"class":610},[605,48523,637],{"class":610},[582,48525,2253,48526,44693,48529,48532,48533,1118],{},[1673,48527,48528],{},"demo below ⬇️",[1677,48530,48531],{},"(left black example)"," shows a ",[1673,48534,48535],{},"basic usage example",[2558,48537,48538],{},[48539,48540],"objects-html-occlude-blending-demo",{},[47921,48542,47923,48543,48545],{},[47925,48544,47927],{},[594,48546,48584],{"className":596,"code":48547,"highlights":48548,"language":601,"meta":544,"style":544},"\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",[546,4212,4244,4253,4262,4271,14784,14799,15089,15098,15119,15177,15236,15256,15288,15297,15306,48549,48550,15098,15119,15177,15236,15256,15288,15297,15306,48549,48550,48551,48552,48553,48554,48555,48556,48557,48558,48559,48560,48561,48562,48563,48564,48565,48566,48567,48568,48569,48570,48571,48572,48573,48574,48575,48576,48577,48578,48579,48580,48581,48582,48583],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,[586,48585,48586,48606,48633,48651,48669,48692,48696,48707,48722,48733,48744,48755,48759,48763,48780,48784,48795,48799,48814,48837,48841,48845,48859,48881,48885,48889,48903,48929,48956,48960,48964,48968,48997,49001,49023,49038,49050,49062,49074,49081,49089,49093,49101,49120,49139,49171,49179,49183,49190,49213,49232,49246,49262,49276,49299,49303,49360,49403,49411,49420,49428,49432,49439,49444,49449,49463,49491,49516,49521,49541,49553,49571,49580,49589,49594,49601,49606,49611,49624,49652,49668,49691,49696,49716,49754,49763,49772,49777,49784,49798,49803,49808,49821,49849,49865,49871,49894,49899,49954,49963,49968,49975,49980,49985,49998,50026,50049,50054,50074,50098,50119,50128,50137,50142,50149,50167,50186,50203,50230,50245,50251,50256,50261,50284,50305,50314,50323,50332,50337,50348,50358,50370,50381,50394,50407,50421,50426],{"__ignoreMap":544},[605,48587,48588,48590,48592,48594,48596,48598,48600,48602,48604],{"class":607,"line":545},[605,48589,611],{"class":610},[605,48591,615],{"class":614},[605,48593,619],{"class":618},[605,48595,622],{"class":618},[605,48597,625],{"class":610},[605,48599,628],{"class":610},[605,48601,632],{"class":631},[605,48603,628],{"class":610},[605,48605,637],{"class":610},[605,48607,48609,48611,48613,48615,48617,48619,48621,48623,48625,48627,48629,48631],{"class":48608,"line":546},[607,641],[605,48610,645],{"class":644},[605,48612,648],{"class":610},[605,48614,47447],{"class":651},[605,48616,655],{"class":610},[605,48618,3339],{"class":651},[605,48620,655],{"class":610},[605,48622,658],{"class":651},[605,48624,661],{"class":610},[605,48626,664],{"class":644},[605,48628,667],{"class":610},[605,48630,670],{"class":631},[605,48632,673],{"class":610},[605,48634,48635,48637,48639,48641,48643,48645,48647,48649],{"class":607,"line":676},[605,48636,645],{"class":644},[605,48638,648],{"class":610},[605,48640,683],{"class":651},[605,48642,661],{"class":610},[605,48644,664],{"class":644},[605,48646,667],{"class":610},[605,48648,692],{"class":631},[605,48650,673],{"class":610},[605,48652,48653,48655,48657,48659,48661,48663,48665,48667],{"class":607,"line":697},[605,48654,645],{"class":644},[605,48656,648],{"class":610},[605,48658,9716],{"class":651},[605,48660,661],{"class":610},[605,48662,664],{"class":644},[605,48664,667],{"class":610},[605,48666,601],{"class":631},[605,48668,673],{"class":610},[605,48670,48671,48673,48675,48678,48680,48682,48684,48686,48688,48690],{"class":607,"line":707},[605,48672,645],{"class":644},[605,48674,648],{"class":610},[605,48676,48677],{"class":651}," CircleGeometry",[605,48679,655],{"class":610},[605,48681,14317],{"class":651},[605,48683,661],{"class":610},[605,48685,664],{"class":644},[605,48687,667],{"class":610},[605,48689,2678],{"class":631},[605,48691,673],{"class":610},[605,48693,48694],{"class":607,"line":713},[605,48695,710],{"emptyLinePlaceholder":562},[605,48697,48698,48700,48703,48705],{"class":607,"line":723},[605,48699,2689],{"class":618},[605,48701,48702],{"class":651}," gl ",[605,48704,625],{"class":610},[605,48706,1176],{"class":610},[605,48708,48709,48712,48714,48716,48718,48720],{"class":607,"line":746},[605,48710,48711],{"class":614},"  clearColor",[605,48713,1190],{"class":610},[605,48715,667],{"class":610},[605,48717,5040],{"class":631},[605,48719,5536],{"class":610},[605,48721,14031],{"class":610},[605,48723,48724,48727,48729,48731],{"class":607,"line":758},[605,48725,48726],{"class":614},"  clearAlpha",[605,48728,1190],{"class":610},[605,48730,22969],{"class":791},[605,48732,14031],{"class":610},[605,48734,48735,48738,48740,48742],{"class":607,"line":768},[605,48736,48737],{"class":614},"  shadows",[605,48739,1190],{"class":610},[605,48741,10938],{"class":3870},[605,48743,14031],{"class":610},[605,48745,48746,48749,48751,48753],{"class":607,"line":773},[605,48747,48748],{"class":614},"  alpha",[605,48750,1190],{"class":610},[605,48752,10938],{"class":3870},[605,48754,14031],{"class":610},[605,48756,48757],{"class":607,"line":799},[605,48758,1297],{"class":610},[605,48760,48761],{"class":607,"line":599},[605,48762,710],{"emptyLinePlaceholder":562},[605,48764,48765,48767,48770,48772,48774,48776,48778],{"class":607,"line":822},[605,48766,2689],{"class":618},[605,48768,48769],{"class":651}," targetDirectionLightRef ",[605,48771,625],{"class":610},[605,48773,9716],{"class":2800},[605,48775,2970],{"class":651},[605,48777,3152],{"class":610},[605,48779,5539],{"class":651},[605,48781,48782],{"class":607,"line":833},[605,48783,710],{"emptyLinePlaceholder":562},[605,48785,48786,48788,48791,48793],{"class":607,"line":844},[605,48787,2689],{"class":618},[605,48789,48790],{"class":651}," geometries ",[605,48792,625],{"class":610},[605,48794,14018],{"class":651},[605,48796,48797],{"class":607,"line":854},[605,48798,30928],{"class":610},[605,48800,48801,48804,48806,48808,48810,48812],{"class":607,"line":600},[605,48802,48803],{"class":614},"    component",[605,48805,1190],{"class":610},[605,48807,667],{"class":610},[605,48809,839],{"class":631},[605,48811,5536],{"class":610},[605,48813,14031],{"class":610},[605,48815,48816,48819,48821,48823,48825,48827,48829,48831,48833,48835],{"class":607,"line":874},[605,48817,48818],{"class":614},"    args",[605,48820,1190],{"class":610},[605,48822,26205],{"class":651},[605,48824,1893],{"class":791},[605,48826,655],{"class":610},[605,48828,22969],{"class":791},[605,48830,655],{"class":610},[605,48832,22969],{"class":791},[605,48834,1481],{"class":651},[605,48836,14031],{"class":610},[605,48838,48839],{"class":607,"line":884},[605,48840,17650],{"class":610},[605,48842,48843],{"class":607,"line":2952},[605,48844,30928],{"class":610},[605,48846,48847,48849,48851,48853,48855,48857],{"class":607,"line":2960},[605,48848,48803],{"class":614},[605,48850,1190],{"class":610},[605,48852,667],{"class":610},[605,48854,4735],{"class":631},[605,48856,5536],{"class":610},[605,48858,14031],{"class":610},[605,48860,48861,48863,48865,48867,48869,48871,48873,48875,48877,48879],{"class":607,"line":2990},[605,48862,48818],{"class":614},[605,48864,1190],{"class":610},[605,48866,26205],{"class":651},[605,48868,33784],{"class":791},[605,48870,655],{"class":610},[605,48872,23726],{"class":791},[605,48874,655],{"class":610},[605,48876,23726],{"class":791},[605,48878,1481],{"class":651},[605,48880,14031],{"class":610},[605,48882,48883],{"class":607,"line":3007},[605,48884,17650],{"class":610},[605,48886,48887],{"class":607,"line":3022},[605,48888,30928],{"class":610},[605,48890,48891,48893,48895,48897,48899,48901],{"class":607,"line":3047},[605,48892,48803],{"class":614},[605,48894,1190],{"class":610},[605,48896,667],{"class":610},[605,48898,5127],{"class":631},[605,48900,5536],{"class":610},[605,48902,14031],{"class":610},[605,48904,48905,48907,48909,48911,48913,48915,48917,48919,48921,48923,48925,48927],{"class":607,"line":2591},[605,48906,48818],{"class":614},[605,48908,1190],{"class":610},[605,48910,26205],{"class":651},[605,48912,1513],{"class":791},[605,48914,655],{"class":610},[605,48916,28659],{"class":791},[605,48918,655],{"class":610},[605,48920,28538],{"class":791},[605,48922,655],{"class":610},[605,48924,2724],{"class":791},[605,48926,1481],{"class":651},[605,48928,14031],{"class":610},[605,48930,48931,48934,48936,48938,48941,48943,48945,48947,48950,48952,48954],{"class":607,"line":3062},[605,48932,48933],{"class":614},"    bind",[605,48935,1190],{"class":610},[605,48937,648],{"class":610},[605,48939,48940],{"class":614}," castShadow",[605,48942,1190],{"class":610},[605,48944,10938],{"class":3870},[605,48946,655],{"class":610},[605,48948,48949],{"class":614}," receiveShadow",[605,48951,1190],{"class":610},[605,48953,10938],{"class":3870},[605,48955,19887],{"class":610},[605,48957,48958],{"class":607,"line":3092},[605,48959,17650],{"class":610},[605,48961,48962],{"class":607,"line":3101},[605,48963,14056],{"class":651},[605,48965,48966],{"class":607,"line":4207},[605,48967,710],{"emptyLinePlaceholder":562},[605,48969,48971,48973,48976,48978,48980,48982,48984,48986,48988,48991,48993,48995],{"class":48970,"line":4212},[607,641],[605,48972,2689],{"class":618},[605,48974,48975],{"class":651}," customGeometry ",[605,48977,625],{"class":610},[605,48979,9716],{"class":2800},[605,48981,2970],{"class":651},[605,48983,28919],{"class":610},[605,48985,48677],{"class":2800},[605,48987,2970],{"class":651},[605,48989,48990],{"class":791},"1.25",[605,48992,655],{"class":610},[605,48994,23726],{"class":791},[605,48996,29025],{"class":651},[605,48998,48999],{"class":607,"line":4235},[605,49000,710],{"emptyLinePlaceholder":562},[605,49002,49004,49006,49009,49011,49013,49015,49017,49019,49021],{"class":49003,"line":4244},[607,641],[605,49005,2689],{"class":618},[605,49007,49008],{"class":651}," customMaterial ",[605,49010,625],{"class":610},[605,49012,9716],{"class":2800},[605,49014,2970],{"class":651},[605,49016,28919],{"class":610},[605,49018,14317],{"class":2800},[605,49020,2970],{"class":651},[605,49022,2751],{"class":610},[605,49024,49026,49028,49030,49032,49034,49036],{"class":49025,"line":4253},[607,641],[605,49027,35150],{"class":614},[605,49029,1190],{"class":610},[605,49031,667],{"class":610},[605,49033,29784],{"class":631},[605,49035,5536],{"class":610},[605,49037,14031],{"class":610},[605,49039,49041,49044,49046,49048],{"class":49040,"line":4262},[607,641],[605,49042,49043],{"class":614},"  side",[605,49045,1190],{"class":610},[605,49047,24579],{"class":791},[605,49049,14031],{"class":610},[605,49051,49053,49056,49058,49060],{"class":49052,"line":4271},[607,641],[605,49054,49055],{"class":614},"  opacity",[605,49057,1190],{"class":610},[605,49059,22969],{"class":791},[605,49061,14031],{"class":610},[605,49063,49065,49068,49070,49072],{"class":49064,"line":14784},[607,641],[605,49066,49067],{"class":614},"  transparent",[605,49069,1190],{"class":610},[605,49071,10938],{"class":3870},[605,49073,14031],{"class":610},[605,49075,49077,49079],{"class":49076,"line":14799},[607,641],[605,49078,5544],{"class":610},[605,49080,29025],{"class":651},[605,49082,49083,49085,49087],{"class":607,"line":14814},[605,49084,700],{"class":610},[605,49086,615],{"class":614},[605,49088,637],{"class":610},[605,49090,49091],{"class":607,"line":14819},[605,49092,710],{"emptyLinePlaceholder":562},[605,49094,49095,49097,49099],{"class":607,"line":14826},[605,49096,611],{"class":610},[605,49098,718],{"class":614},[605,49100,637],{"class":610},[605,49102,49103,49105,49107,49109,49111,49113,49116,49118],{"class":607,"line":14831},[605,49104,726],{"class":610},[605,49106,18670],{"class":614},[605,49108,18673],{"class":618},[605,49110,625],{"class":610},[605,49112,628],{"class":610},[605,49114,49115],{"class":631},"html-demo-wrapper aspect-video",[605,49117,628],{"class":610},[605,49119,637],{"class":610},[605,49121,49122,49124,49126,49128,49130,49132,49135,49137],{"class":607,"line":14837},[605,49123,749],{"class":610},[605,49125,729],{"class":614},[605,49127,4111],{"class":618},[605,49129,625],{"class":610},[605,49131,628],{"class":610},[605,49133,49134],{"class":651},"gl",[605,49136,628],{"class":610},[605,49138,637],{"class":610},[605,49140,49141,49143,49145,49147,49149,49151,49153,49155,49157,49159,49161,49163,49165,49167,49169],{"class":607,"line":14858},[605,49142,825],{"class":610},[605,49144,752],{"class":614},[605,49146,781],{"class":610},[605,49148,1459],{"class":618},[605,49150,625],{"class":610},[605,49152,628],{"class":610},[605,49154,1466],{"class":610},[605,49156,937],{"class":791},[605,49158,1471],{"class":610},[605,49160,9877],{"class":791},[605,49162,1471],{"class":610},[605,49164,4685],{"class":791},[605,49166,1481],{"class":610},[605,49168,628],{"class":610},[605,49170,755],{"class":610},[605,49172,49173,49175,49177],{"class":607,"line":14864},[605,49174,825],{"class":610},[605,49176,763],{"class":614},[605,49178,755],{"class":610},[605,49180,49181],{"class":607,"line":14871},[605,49182,710],{"emptyLinePlaceholder":562},[605,49184,49185,49187],{"class":607,"line":14876},[605,49186,825],{"class":610},[605,49188,49189],{"class":614},"Levioso\n",[605,49191,49192,49194,49196,49198,49200,49202,49204,49206,49208,49211],{"class":607,"line":14897},[605,49193,2963],{"class":644},[605,49195,625],{"class":610},[605,49197,628],{"class":610},[605,49199,2970],{"class":610},[605,49201,15748],{"class":651},[605,49203,1471],{"class":610},[605,49205,2978],{"class":651},[605,49207,2981],{"class":610},[605,49209,49210],{"class":651},"geometries",[605,49212,2987],{"class":610},[605,49214,49215,49217,49219,49221,49223,49226,49228,49230],{"class":607,"line":14910},[605,49216,2993],{"class":610},[605,49218,2996],{"class":618},[605,49220,625],{"class":610},[605,49222,15730],{"class":610},[605,49224,49225],{"class":631},"html-occlude-blending-demo-",[605,49227,15736],{"class":610},[605,49229,2978],{"class":651},[605,49231,15741],{"class":610},[605,49233,49234,49236,49238,49240,49242,49244],{"class":607,"line":14936},[605,49235,2993],{"class":610},[605,49237,3483],{"class":618},[605,49239,625],{"class":610},[605,49241,628],{"class":610},[605,49243,4160],{"class":791},[605,49245,2987],{"class":610},[605,49247,49248,49250,49253,49255,49257,49260],{"class":607,"line":14941},[605,49249,2993],{"class":610},[605,49251,49252],{"class":618},"float-factor",[605,49254,625],{"class":610},[605,49256,628],{"class":610},[605,49258,49259],{"class":791},"3.5",[605,49261,2987],{"class":610},[605,49263,49264,49266,49268,49270,49272,49274],{"class":607,"line":14948},[605,49265,2993],{"class":610},[605,49267,33793],{"class":618},[605,49269,625],{"class":610},[605,49271,628],{"class":610},[605,49273,1893],{"class":791},[605,49275,2987],{"class":610},[605,49277,49278,49280,49282,49284,49286,49288,49291,49293,49295,49297],{"class":607,"line":14957},[605,49279,2993],{"class":610},[605,49281,3690],{"class":618},[605,49283,625],{"class":610},[605,49285,628],{"class":610},[605,49287,15194],{"class":610},[605,49289,49290],{"class":791},"0.35",[605,49292,1471],{"class":610},[605,49294,49290],{"class":791},[605,49296,1481],{"class":610},[605,49298,2987],{"class":610},[605,49300,49301],{"class":607,"line":14962},[605,49302,47700],{"class":610},[605,49304,49305,49307,49309,49311,49313,49315,49317,49319,49321,49324,49326,49329,49331,49333,49335,49337,49339,49341,49343,49345,49347,49349,49351,49353,49356,49358],{"class":607,"line":14971},[605,49306,836],{"class":610},[605,49308,828],{"class":614},[605,49310,781],{"class":610},[605,49312,1459],{"class":618},[605,49314,625],{"class":610},[605,49316,628],{"class":610},[605,49318,1466],{"class":610},[605,49320,2978],{"class":651},[605,49322,49323],{"class":610}," * ",[605,49325,49259],{"class":791},[605,49327,49328],{"class":610}," - ",[605,49330,49259],{"class":791},[605,49332,1471],{"class":610},[605,49334,1893],{"class":791},[605,49336,1471],{"class":610},[605,49338,937],{"class":791},[605,49340,1481],{"class":610},[605,49342,628],{"class":610},[605,49344,4111],{"class":618},[605,49346,625],{"class":610},[605,49348,628],{"class":610},[605,49350,15748],{"class":651},[605,49352,1118],{"class":610},[605,49354,49355],{"class":651},"bind",[605,49357,628],{"class":610},[605,49359,637],{"class":610},[605,49361,49362,49365,49368,49370,49373,49375,49377,49379,49381,49383,49385,49387,49389,49391,49393,49395,49397,49399,49401],{"class":607,"line":14990},[605,49363,49364],{"class":610},"          \u003C",[605,49366,49367],{"class":614},"component",[605,49369,781],{"class":610},[605,49371,49372],{"class":618},"is",[605,49374,625],{"class":610},[605,49376,628],{"class":610},[605,49378,15748],{"class":651},[605,49380,1118],{"class":610},[605,49382,49367],{"class":651},[605,49384,628],{"class":610},[605,49386,781],{"class":610},[605,49388,1989],{"class":618},[605,49390,625],{"class":610},[605,49392,628],{"class":610},[605,49394,15748],{"class":651},[605,49396,1118],{"class":610},[605,49398,1989],{"class":651},[605,49400,628],{"class":610},[605,49402,755],{"class":610},[605,49404,49405,49407,49409],{"class":607,"line":15000},[605,49406,49364],{"class":610},[605,49408,849],{"class":614},[605,49410,755],{"class":610},[605,49412,49413,49416,49418],{"class":607,"line":15037},[605,49414,49415],{"class":610},"        \u003C/",[605,49417,828],{"class":614},[605,49419,637],{"class":610},[605,49421,49422,49424,49426],{"class":607,"line":15046},[605,49423,857],{"class":610},[605,49425,3478],{"class":614},[605,49427,637],{"class":610},[605,49429,49430],{"class":607,"line":15080},[605,49431,710],{"emptyLinePlaceholder":562},[605,49433,49435,49437],{"class":49434,"line":15089},[607,641],[605,49436,825],{"class":610},[605,49438,47613],{"class":614},[605,49440,49442],{"class":49441,"line":15098},[607,641],[605,49443,47619],{"class":618},[605,49445,49447],{"class":49446,"line":15119},[607,641],[605,49448,47625],{"class":618},[605,49450,49452,49455,49457,49459,49461],{"class":49451,"line":15177},[607,641],[605,49453,49454],{"class":618},"        occlude",[605,49456,625],{"class":610},[605,49458,628],{"class":610},[605,49460,43302],{"class":631},[605,49462,2987],{"class":610},[605,49464,49466,49468,49470,49472,49474,49476,49478,49480,49483,49485,49487,49489],{"class":49465,"line":15236},[607,641],[605,49467,2993],{"class":610},[605,49469,1459],{"class":618},[605,49471,625],{"class":610},[605,49473,628],{"class":610},[605,49475,15194],{"class":610},[605,49477,3490],{"class":791},[605,49479,1471],{"class":610},[605,49481,49482],{"class":791},".75",[605,49484,3598],{"class":610},[605,49486,792],{"class":791},[605,49488,1481],{"class":610},[605,49490,2987],{"class":610},[605,49492,49494,49496,49499,49501,49503,49505,49508,49510,49512,49514],{"class":49493,"line":15256},[607,641],[605,49495,2993],{"class":610},[605,49497,49498],{"class":618},"z-index-range",[605,49500,625],{"class":610},[605,49502,628],{"class":610},[605,49504,1466],{"class":610},[605,49506,49507],{"class":791},"28",[605,49509,1471],{"class":610},[605,49511,937],{"class":791},[605,49513,1481],{"class":610},[605,49515,2987],{"class":610},[605,49517,49519],{"class":49518,"line":15288},[607,641],[605,49520,47700],{"class":610},[605,49522,49524,49526,49528,49530,49532,49534,49537,49539],{"class":49523,"line":15297},[607,641],[605,49525,836],{"class":610},[605,49527,18670],{"class":614},[605,49529,18673],{"class":618},[605,49531,625],{"class":610},[605,49533,628],{"class":610},[605,49535,49536],{"class":631},"text-center text-s p-2 bg-[#1B1C1E] text-light",[605,49538,628],{"class":610},[605,49540,637],{"class":610},[605,49542,49544,49547,49549,49551],{"class":49543,"line":15306},[607,641],[605,49545,49546],{"class":651},"          BASIC 💛 ",[605,49548,611],{"class":610},[605,49550,2508],{"class":614},[605,49552,755],{"class":610},[605,49554,49556,49558,49560,49562,49565,49567,49569],{"class":49555,"line":48549},[607,641],[605,49557,49364],{"class":610},[605,49559,1677],{"class":614},[605,49561,11720],{"class":610},[605,49563,49564],{"class":651},"occlude=blending",[605,49566,700],{"class":610},[605,49568,1677],{"class":614},[605,49570,637],{"class":610},[605,49572,49574,49576,49578],{"class":49573,"line":48550},[607,641],[605,49575,49415],{"class":610},[605,49577,18670],{"class":614},[605,49579,637],{"class":610},[605,49581,49583,49585,49587],{"class":607,"line":49582},73,[605,49584,857],{"class":610},[605,49586,47736],{"class":614},[605,49588,637],{"class":610},[605,49590,49592],{"class":49591,"line":48551},[607,641],[605,49593,710],{"emptyLinePlaceholder":562},[605,49595,49597,49599],{"class":49596,"line":48552},[607,641],[605,49598,825],{"class":610},[605,49600,47613],{"class":614},[605,49602,49604],{"class":49603,"line":48553},[607,641],[605,49605,47619],{"class":618},[605,49607,49609],{"class":49608,"line":48554},[607,641],[605,49610,47625],{"class":618},[605,49612,49614,49616,49618,49620,49622],{"class":49613,"line":48555},[607,641],[605,49615,49454],{"class":618},[605,49617,625],{"class":610},[605,49619,628],{"class":610},[605,49621,43302],{"class":631},[605,49623,2987],{"class":610},[605,49625,49627,49629,49631,49633,49635,49637,49639,49641,49644,49646,49648,49650],{"class":49626,"line":48556},[607,641],[605,49628,2993],{"class":610},[605,49630,1459],{"class":618},[605,49632,625],{"class":610},[605,49634,628],{"class":610},[605,49636,1466],{"class":610},[605,49638,937],{"class":791},[605,49640,1471],{"class":610},[605,49642,49643],{"class":791},".85",[605,49645,3598],{"class":610},[605,49647,792],{"class":791},[605,49649,1481],{"class":610},[605,49651,2987],{"class":610},[605,49653,49655,49657,49659,49661,49663,49666],{"class":49654,"line":48557},[607,641],[605,49656,2993],{"class":610},[605,49658,15748],{"class":618},[605,49660,625],{"class":610},[605,49662,628],{"class":610},[605,49664,49665],{"class":651},"customGeometry",[605,49667,2987],{"class":610},[605,49669,49671,49673,49675,49677,49679,49681,49683,49685,49687,49689],{"class":49670,"line":48558},[607,641],[605,49672,2993],{"class":610},[605,49674,49498],{"class":618},[605,49676,625],{"class":610},[605,49678,628],{"class":610},[605,49680,1466],{"class":610},[605,49682,49507],{"class":791},[605,49684,1471],{"class":610},[605,49686,937],{"class":791},[605,49688,1481],{"class":610},[605,49690,2987],{"class":610},[605,49692,49694],{"class":49693,"line":48559},[607,641],[605,49695,47700],{"class":610},[605,49697,49699,49701,49703,49705,49707,49709,49712,49714],{"class":49698,"line":48560},[607,641],[605,49700,836],{"class":610},[605,49702,18670],{"class":614},[605,49704,18673],{"class":618},[605,49706,625],{"class":610},[605,49708,628],{"class":610},[605,49710,49711],{"class":631},"text-xs p-8 text-center bg-[#F6B03B] text-dark",[605,49713,628],{"class":610},[605,49715,637],{"class":610},[605,49717,49719,49722,49724,49726,49729,49732,49734,49736,49739,49741,49743,49745,49748,49750,49752],{"class":49718,"line":48561},[607,641],[605,49720,49721],{"class":651},"          CUSTOM ",[605,49723,611],{"class":610},[605,49725,2508],{"class":614},[605,49727,49728],{"class":610}," />",[605,49730,49731],{"class":610}," \u003C",[605,49733,1673],{"class":614},[605,49735,11720],{"class":610},[605,49737,49738],{"class":651},"CIRCLE ",[605,49740,611],{"class":610},[605,49742,2508],{"class":614},[605,49744,49728],{"class":610},[605,49746,49747],{"class":651}," GEOMETRY",[605,49749,700],{"class":610},[605,49751,1673],{"class":614},[605,49753,637],{"class":610},[605,49755,49757,49759,49761],{"class":607,"line":49756},85,[605,49758,49415],{"class":610},[605,49760,18670],{"class":614},[605,49762,637],{"class":610},[605,49764,49766,49768,49770],{"class":49765,"line":48562},[607,641],[605,49767,857],{"class":610},[605,49769,47736],{"class":614},[605,49771,637],{"class":610},[605,49773,49775],{"class":49774,"line":48563},[607,641],[605,49776,710],{"emptyLinePlaceholder":562},[605,49778,49780,49782],{"class":49779,"line":48564},[607,641],[605,49781,825],{"class":610},[605,49783,47613],{"class":614},[605,49785,49787,49789,49791,49793,49796],{"class":49786,"line":48565},[607,641],[605,49788,19812],{"class":618},[605,49790,625],{"class":610},[605,49792,628],{"class":610},[605,49794,49795],{"class":631},"targetDirectionLightRef",[605,49797,2987],{"class":610},[605,49799,49801],{"class":49800,"line":48566},[607,641],[605,49802,47619],{"class":618},[605,49804,49806],{"class":49805,"line":48567},[607,641],[605,49807,47625],{"class":618},[605,49809,49811,49813,49815,49817,49819],{"class":49810,"line":48568},[607,641],[605,49812,49454],{"class":618},[605,49814,625],{"class":610},[605,49816,628],{"class":610},[605,49818,43302],{"class":631},[605,49820,2987],{"class":610},[605,49822,49824,49826,49828,49830,49832,49834,49836,49838,49841,49843,49845,49847],{"class":49823,"line":48569},[607,641],[605,49825,2993],{"class":610},[605,49827,1459],{"class":618},[605,49829,625],{"class":610},[605,49831,628],{"class":610},[605,49833,1466],{"class":610},[605,49835,3490],{"class":791},[605,49837,1471],{"class":610},[605,49839,49840],{"class":791},".5",[605,49842,3598],{"class":610},[605,49844,792],{"class":791},[605,49846,1481],{"class":610},[605,49848,2987],{"class":610},[605,49850,49852,49854,49856,49858,49860,49863],{"class":49851,"line":48570},[607,641],[605,49853,2993],{"class":610},[605,49855,15798],{"class":618},[605,49857,625],{"class":610},[605,49859,628],{"class":610},[605,49861,49862],{"class":651},"customMaterial",[605,49864,2987],{"class":610},[605,49866,49868],{"class":49867,"line":48571},[607,641],[605,49869,49870],{"class":618},"        receive-shadow\n",[605,49872,49874,49876,49878,49880,49882,49884,49886,49888,49890,49892],{"class":49873,"line":48572},[607,641],[605,49875,2993],{"class":610},[605,49877,49498],{"class":618},[605,49879,625],{"class":610},[605,49881,628],{"class":610},[605,49883,1466],{"class":610},[605,49885,49507],{"class":791},[605,49887,1471],{"class":610},[605,49889,937],{"class":791},[605,49891,1481],{"class":610},[605,49893,2987],{"class":610},[605,49895,49897],{"class":607,"line":49896},97,[605,49898,47700],{"class":610},[605,49900,49902,49904,49906,49909,49911,49913,49915,49917,49920,49923,49925,49927,49930,49932,49935,49937,49940,49942,49944,49946,49948,49950,49952],{"class":49901,"line":48573},[607,641],[605,49903,836],{"class":610},[605,49905,18670],{"class":614},[605,49907,49908],{"class":618}," style",[605,49910,625],{"class":610},[605,49912,628],{"class":610},[605,49914,34003],{"class":47802},[605,49916,7407],{"class":610},[605,49918,49919],{"class":791},"100px",[605,49921,49922],{"class":610},"; ",[605,49924,34017],{"class":47802},[605,49926,7407],{"class":610},[605,49928,49929],{"class":651},"auto",[605,49931,49922],{"class":610},[605,49933,49934],{"class":47802},"aspect-ratio",[605,49936,7407],{"class":610},[605,49938,49939],{"class":791},"250",[605,49941,43462],{"class":610},[605,49943,49939],{"class":791},[605,49945,2727],{"class":610},[605,49947,628],{"class":610},[605,49949,18722],{"class":610},[605,49951,18670],{"class":614},[605,49953,637],{"class":610},[605,49955,49957,49959,49961],{"class":49956,"line":48574},[607,641],[605,49958,857],{"class":610},[605,49960,47736],{"class":614},[605,49962,637],{"class":610},[605,49964,49966],{"class":49965,"line":48575},[607,641],[605,49967,710],{"emptyLinePlaceholder":562},[605,49969,49971,49973],{"class":49970,"line":48576},[607,641],[605,49972,825],{"class":610},[605,49974,47613],{"class":614},[605,49976,49978],{"class":49977,"line":48577},[607,641],[605,49979,47619],{"class":618},[605,49981,49983],{"class":49982,"line":48578},[607,641],[605,49984,47625],{"class":618},[605,49986,49988,49990,49992,49994,49996],{"class":49987,"line":48579},[607,641],[605,49989,49454],{"class":618},[605,49991,625],{"class":610},[605,49993,628],{"class":610},[605,49995,43302],{"class":631},[605,49997,2987],{"class":610},[605,49999,50001,50003,50005,50007,50009,50011,50013,50015,50018,50020,50022,50024],{"class":50000,"line":48580},[607,641],[605,50002,2993],{"class":610},[605,50004,1459],{"class":618},[605,50006,625],{"class":610},[605,50008,628],{"class":610},[605,50010,1466],{"class":610},[605,50012,3490],{"class":791},[605,50014,1471],{"class":610},[605,50016,50017],{"class":791},"2.5",[605,50019,3598],{"class":610},[605,50021,792],{"class":791},[605,50023,1481],{"class":610},[605,50025,2987],{"class":610},[605,50027,50029,50031,50033,50035,50037,50039,50041,50043,50045,50047],{"class":50028,"line":48581},[607,641],[605,50030,2993],{"class":610},[605,50032,49498],{"class":618},[605,50034,625],{"class":610},[605,50036,628],{"class":610},[605,50038,1466],{"class":610},[605,50040,49507],{"class":791},[605,50042,1471],{"class":610},[605,50044,937],{"class":791},[605,50046,1481],{"class":610},[605,50048,2987],{"class":610},[605,50050,50052],{"class":50051,"line":48582},[607,641],[605,50053,47700],{"class":610},[605,50055,50057,50059,50061,50063,50065,50067,50070,50072],{"class":50056,"line":48583},[607,641],[605,50058,836],{"class":610},[605,50060,18670],{"class":614},[605,50062,18673],{"class":618},[605,50064,625],{"class":610},[605,50066,628],{"class":610},[605,50068,50069],{"class":631},"text-center text-xs p-2 text-dark bg-[#FF0000]",[605,50071,628],{"class":610},[605,50073,637],{"class":610},[605,50075,50077,50079,50081,50083,50086,50088,50090,50092,50094,50096],{"class":607,"line":50076},109,[605,50078,49364],{"class":610},[605,50080,1673],{"class":614},[605,50082,11720],{"class":610},[605,50084,50085],{"class":651},"HTML + Custom material ",[605,50087,700],{"class":610},[605,50089,1673],{"class":614},[605,50091,11720],{"class":610},[605,50093,49731],{"class":610},[605,50095,2508],{"class":614},[605,50097,755],{"class":610},[605,50099,50101,50103,50105,50107,50110,50112,50114,50116],{"class":607,"line":50100},110,[605,50102,49364],{"class":610},[605,50104,1677],{"class":614},[605,50106,11720],{"class":610},[605,50108,50109],{"class":651},"+ receive-shadow ",[605,50111,700],{"class":610},[605,50113,1677],{"class":614},[605,50115,11720],{"class":610},[605,50117,50118],{"class":651}," ⬇️\n",[605,50120,50122,50124,50126],{"class":607,"line":50121},111,[605,50123,49415],{"class":610},[605,50125,18670],{"class":614},[605,50127,637],{"class":610},[605,50129,50131,50133,50135],{"class":607,"line":50130},112,[605,50132,857],{"class":610},[605,50134,47736],{"class":614},[605,50136,637],{"class":610},[605,50138,50140],{"class":607,"line":50139},113,[605,50141,710],{"emptyLinePlaceholder":562},[605,50143,50145,50147],{"class":607,"line":50144},114,[605,50146,825],{"class":610},[605,50148,10771],{"class":614},[605,50150,50152,50155,50157,50159,50161,50163,50165],{"class":607,"line":50151},115,[605,50153,50154],{"class":644},"        v-if",[605,50156,625],{"class":610},[605,50158,628],{"class":610},[605,50160,49795],{"class":651},[605,50162,10582],{"class":610},[605,50164,20549],{"class":651},[605,50166,2987],{"class":610},[605,50168,50170,50172,50174,50176,50178,50180,50182,50184],{"class":607,"line":50169},116,[605,50171,2993],{"class":610},[605,50173,8871],{"class":618},[605,50175,625],{"class":610},[605,50177,628],{"class":610},[605,50179,49795],{"class":651},[605,50181,10582],{"class":610},[605,50183,20549],{"class":651},[605,50185,2987],{"class":610},[605,50187,50189,50191,50194,50196,50198,50201],{"class":607,"line":50188},117,[605,50190,2993],{"class":610},[605,50192,50193],{"class":618},"shadow-normalBias",[605,50195,625],{"class":610},[605,50197,628],{"class":610},[605,50199,50200],{"class":791},"0.075",[605,50202,2987],{"class":610},[605,50204,50206,50208,50210,50212,50214,50216,50218,50220,50222,50224,50226,50228],{"class":607,"line":50205},118,[605,50207,2993],{"class":610},[605,50209,1459],{"class":618},[605,50211,625],{"class":610},[605,50213,628],{"class":610},[605,50215,1466],{"class":610},[605,50217,2396],{"class":791},[605,50219,1471],{"class":610},[605,50221,937],{"class":791},[605,50223,1471],{"class":610},[605,50225,2396],{"class":791},[605,50227,1481],{"class":610},[605,50229,2987],{"class":610},[605,50231,50233,50235,50237,50239,50241,50243],{"class":607,"line":50232},119,[605,50234,2993],{"class":610},[605,50236,1886],{"class":618},[605,50238,625],{"class":610},[605,50240,628],{"class":610},[605,50242,792],{"class":791},[605,50244,2987],{"class":610},[605,50246,50248],{"class":607,"line":50247},120,[605,50249,50250],{"class":618},"        cast-shadow\n",[605,50252,50254],{"class":607,"line":50253},121,[605,50255,3050],{"class":610},[605,50257,50259],{"class":607,"line":50258},122,[605,50260,710],{"emptyLinePlaceholder":562},[605,50262,50264,50266,50268,50270,50272,50274,50276,50278,50280,50282],{"class":607,"line":50263},123,[605,50265,825],{"class":610},[605,50267,3067],{"class":614},[605,50269,781],{"class":610},[605,50271,1968],{"class":618},[605,50273,625],{"class":610},[605,50275,628],{"class":610},[605,50277,4088],{"class":610},[605,50279,1893],{"class":791},[605,50281,628],{"class":610},[605,50283,755],{"class":610},[605,50285,50287,50289,50291,50293,50295,50297,50299,50301,50303],{"class":607,"line":50286},124,[605,50288,825],{"class":610},[605,50290,3518],{"class":614},[605,50292,781],{"class":610},[605,50294,1886],{"class":618},[605,50296,625],{"class":610},[605,50298,628],{"class":610},[605,50300,1893],{"class":791},[605,50302,628],{"class":610},[605,50304,755],{"class":610},[605,50306,50308,50310,50312],{"class":607,"line":50307},125,[605,50309,867],{"class":610},[605,50311,729],{"class":614},[605,50313,637],{"class":610},[605,50315,50317,50319,50321],{"class":607,"line":50316},126,[605,50318,877],{"class":610},[605,50320,18670],{"class":614},[605,50322,637],{"class":610},[605,50324,50326,50328,50330],{"class":607,"line":50325},127,[605,50327,700],{"class":610},[605,50329,718],{"class":614},[605,50331,637],{"class":610},[605,50333,50335],{"class":607,"line":50334},128,[605,50336,710],{"emptyLinePlaceholder":562},[605,50338,50340,50342,50344,50346],{"class":607,"line":50339},129,[605,50341,611],{"class":610},[605,50343,1299],{"class":614},[605,50345,47787],{"class":618},[605,50347,637],{"class":610},[605,50349,50351,50353,50356],{"class":607,"line":50350},130,[605,50352,1118],{"class":610},[605,50354,50355],{"class":1172},"html-demo-wrapper",[605,50357,1176],{"class":610},[605,50359,50361,50363,50365,50368],{"class":607,"line":50360},131,[605,50362,1212],{"class":47802},[605,50364,1190],{"class":610},[605,50366,50367],{"class":791}," 100%",[605,50369,3329],{"class":610},[605,50371,50373,50375,50377,50379],{"class":607,"line":50372},132,[605,50374,1222],{"class":47802},[605,50376,1190],{"class":610},[605,50378,50367],{"class":791},[605,50380,3329],{"class":610},[605,50382,50384,50387,50389,50392],{"class":607,"line":50383},133,[605,50385,50386],{"class":47802},"  position",[605,50388,1190],{"class":610},[605,50390,50391],{"class":651}," relative",[605,50393,3329],{"class":610},[605,50395,50397,50400,50402,50405],{"class":607,"line":50396},134,[605,50398,50399],{"class":47802},"  overflow",[605,50401,1190],{"class":610},[605,50403,50404],{"class":651}," hidden",[605,50406,3329],{"class":610},[605,50408,50410,50412,50414,50416,50419],{"class":607,"line":50409},135,[605,50411,47803],{"class":47802},[605,50413,1190],{"class":610},[605,50415,47808],{"class":610},[605,50417,50418],{"class":651},"82dbc5",[605,50420,3329],{"class":610},[605,50422,50424],{"class":607,"line":50423},136,[605,50425,1297],{"class":610},[605,50427,50429,50431,50433],{"class":607,"line":50428},137,[605,50430,700],{"class":610},[605,50432,1299],{"class":614},[605,50434,637],{"class":610},[472,50436,39244],{"id":39243},[582,50438,50439,50440,50443,50444,50447,50448,50450,50451,50454,50455,50459],{},"By default, when using ",[586,50441,50442],{},"occlude=\"blending\"",", occlusion works correctly only with ",[1673,50445,50446],{},"rectangular HTML elements"," (using a ",[586,50449,26491],{},").\nFor ",[1677,50452,50453],{},"non-rectangular content",", you can use the ",[1673,50456,50457],{},[586,50458,15748],{}," prop to provide a matching custom geometry.",[582,50461,50462,50463,44693,50466,50469,50470,50476,50477,1118],{},"In the ",[1673,50464,50465],{},"demo above ⬆️",[1677,50467,50468],{},"(middle yellow example)",", a ",[1112,50471,50474],{"href":50472,"rel":50473},"https://threejs.org/docs/#api/en/geometries/CircleGeometry",[1116],[586,50475,23684],{}," is used as a ",[1673,50478,50479],{},"custom geometry",[50481,50482,50483],"prose-list",{},[3136,50484,50485,50494],{},[3139,50486,2253,50487,50489,50490,50493],{},[586,50488,15748],{}," prop only defines the ",[1673,50491,50492],{},"occlusion shape"," in 3D and does not modify your HTML content.",[3139,50495,50496,50497,50504,50505,50508,50509,50512,50513,50520],{},"You can provide any ",[1112,50498,50501],{"href":50499,"rel":50500},"https://threejs.org/docs/#api/en/core/BufferGeometry",[1116],[586,50502,50503],{},"BufferGeometry",", for example to simulate ",[1673,50506,50507],{},"CSS-like styles"," such as ",[586,50510,50511],{},"border-radius"," using a rounded rectangle or squircle geometry (see ",[1112,50514,50517],{"href":50515,"rel":50516},"https://discourse.threejs.org/t/roundedrectangle-squircle/28645",[1116],[586,50518,50519],{},"RoundedRectangle / Squircle geometry"," for example).",[16409,50522,50524],{"id":50523},"custom-material","Custom Material",[582,50526,50527,50528,50530,50531,44693,50533,50469,50536,50539],{},"You can also assign material properties to the HTML content using the ",[586,50529,15798],{}," prop.\nIn the ",[1673,50532,50465],{},[1677,50534,50535],{},"(right red example)",[1673,50537,50538],{},"custom material"," is used with shadow.",[2046,50541,50542],{},[582,50543,2253,50544,50546,50547,50549,50550,1118],{},[586,50545,15798],{}," prop is only available when ",[586,50548,50442],{}," is ",[1673,50551,10162],{},[2046,50553,50554],{},[582,50555,50556,50557,4431,50561,50565,50566,50569,50570,50572,50573,50576,50577,10149,50581,3198,50586],{},"Enable shadows using the ",[1673,50558,50559],{},[586,50560,11918],{},[1673,50562,50563],{},[586,50564,11936],{}," props.\nShadows are supported ",[1673,50567,50568],{},"only"," when using a ",[1673,50571,50538],{},". By default, shadows do ",[1673,50574,50575],{},"not"," work with ",[1677,50578,50579],{},[586,50580,20701],{},[1677,50582,50583],{},[586,50584,50585],{},"ShaderMaterial",[2508,50587],{},[472,50589,50591,50592],{"id":50590},"using-transition","Using ",[586,50593,50594],{},"\u003CTransition>",[582,50596,50597,50598,50604,50605,50607,50608,50611,50612,4431,50615,50618],{},"The native Vue ",[1112,50599,50602],{"href":50600,"rel":50601},"https://vuejs.org/guide/built-ins/transition",[1116],[586,50603,50594],{}," component works seamlessly with ",[586,50606,47403],{},".\nThis means you can ",[1673,50609,50610],{},"animate"," how your projected HTML content ",[1677,50613,50614],{},"enters",[1677,50616,50617],{},"leaves"," the scene, exactly as you would in a regular Vue application.",[2046,50620,50621],{},[582,50622,22519,50623,50626,50627,1471,50630,1691,50632,50635],{},[1673,50624,50625],{},"standard interactions"," are supported just like on a regular HTML element — ",[1673,50628,50629],{},"hover effects",[1673,50631,7741],{},[1677,50633,50634],{},"any kind of DOM interaction"," are fully possible.",[576,50637,50638],{},[50639,50640],"objects-html-transition-demo",{},[47921,50642,47923,50643,50645],{},[47925,50644,47927],{},[594,50646,50649],{"className":596,"code":50647,"highlights":50648,"language":601,"meta":544,"style":544},"\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",[546,49582,48551,48552,48553,48554,48555,48556,48557,48558,48559,48560,48561,49756,48562,48563,48564,48565,48566,48567,48568],[586,50650,50651,50671,50698,50716,50734,50738,50748,50762,50772,50782,50792,50803,50807,50811,50831,50835,50857,50861,50871,50875,50889,50911,50915,50919,50933,50955,50959,50963,50977,51003,51007,51011,51026,51049,51053,51057,51061,51080,51153,51190,51213,51217,51221,51237,51253,51257,51265,51269,51277,51306,51335,51367,51388,51392,51398,51420,51438,51452,51466,51480,51502,51506,51562,51602,51610,51618,51626,51630,51636,51640,51644,51656,51682,51698,51721,51726,51747,51755,51770,51796,51811,51828,51834,51858,51876,51886,51895,51904,51909,51932,51953,51962,51971,51979,51983,51993,52001,52011,52021,52031,52041,52053,52057,52061,52075,52093,52097,52101,52110,52119,52129,52145,52149,52153,52162,52171,52189,52193,52197,52206,52215,52225,52239,52243],{"__ignoreMap":544},[605,50652,50653,50655,50657,50659,50661,50663,50665,50667,50669],{"class":607,"line":545},[605,50654,611],{"class":610},[605,50656,615],{"class":614},[605,50658,619],{"class":618},[605,50660,622],{"class":618},[605,50662,625],{"class":610},[605,50664,628],{"class":610},[605,50666,632],{"class":631},[605,50668,628],{"class":610},[605,50670,637],{"class":610},[605,50672,50674,50676,50678,50680,50682,50684,50686,50688,50690,50692,50694,50696],{"class":50673,"line":546},[607,641],[605,50675,645],{"class":644},[605,50677,648],{"class":610},[605,50679,47447],{"class":651},[605,50681,655],{"class":610},[605,50683,3339],{"class":651},[605,50685,655],{"class":610},[605,50687,658],{"class":651},[605,50689,661],{"class":610},[605,50691,664],{"class":644},[605,50693,667],{"class":610},[605,50695,670],{"class":631},[605,50697,673],{"class":610},[605,50699,50700,50702,50704,50706,50708,50710,50712,50714],{"class":607,"line":676},[605,50701,645],{"class":644},[605,50703,648],{"class":610},[605,50705,683],{"class":651},[605,50707,661],{"class":610},[605,50709,664],{"class":644},[605,50711,667],{"class":610},[605,50713,692],{"class":631},[605,50715,673],{"class":610},[605,50717,50718,50720,50722,50724,50726,50728,50730,50732],{"class":607,"line":697},[605,50719,645],{"class":644},[605,50721,648],{"class":610},[605,50723,5431],{"class":651},[605,50725,661],{"class":610},[605,50727,664],{"class":644},[605,50729,667],{"class":610},[605,50731,601],{"class":631},[605,50733,673],{"class":610},[605,50735,50736],{"class":607,"line":707},[605,50737,710],{"emptyLinePlaceholder":562},[605,50739,50740,50742,50744,50746],{"class":607,"line":713},[605,50741,2689],{"class":618},[605,50743,48702],{"class":651},[605,50745,625],{"class":610},[605,50747,1176],{"class":610},[605,50749,50750,50752,50754,50756,50758,50760],{"class":607,"line":723},[605,50751,48711],{"class":614},[605,50753,1190],{"class":610},[605,50755,667],{"class":610},[605,50757,5040],{"class":631},[605,50759,5536],{"class":610},[605,50761,14031],{"class":610},[605,50763,50764,50766,50768,50770],{"class":607,"line":746},[605,50765,48726],{"class":614},[605,50767,1190],{"class":610},[605,50769,11773],{"class":791},[605,50771,14031],{"class":610},[605,50773,50774,50776,50778,50780],{"class":607,"line":758},[605,50775,48737],{"class":614},[605,50777,1190],{"class":610},[605,50779,10938],{"class":3870},[605,50781,14031],{"class":610},[605,50783,50784,50786,50788,50790],{"class":607,"line":768},[605,50785,48748],{"class":614},[605,50787,1190],{"class":610},[605,50789,10938],{"class":3870},[605,50791,14031],{"class":610},[605,50793,50794,50797,50799,50801],{"class":607,"line":773},[605,50795,50796],{"class":614},"  antialias",[605,50798,1190],{"class":610},[605,50800,10938],{"class":3870},[605,50802,14031],{"class":610},[605,50804,50805],{"class":607,"line":799},[605,50806,1297],{"class":610},[605,50808,50809],{"class":607,"line":599},[605,50810,710],{"emptyLinePlaceholder":562},[605,50812,50813,50815,50818,50820,50822,50824,50827,50829],{"class":607,"line":822},[605,50814,2689],{"class":618},[605,50816,50817],{"class":651}," rootRef ",[605,50819,625],{"class":610},[605,50821,5431],{"class":2800},[605,50823,611],{"class":610},[605,50825,50826],{"class":1172},"HTMLElement",[605,50828,11720],{"class":610},[605,50830,2846],{"class":651},[605,50832,50833],{"class":607,"line":833},[605,50834,710],{"emptyLinePlaceholder":562},[605,50836,50837,50839,50842,50844,50846,50848,50850,50853,50855],{"class":607,"line":844},[605,50838,2689],{"class":618},[605,50840,50841],{"class":651}," bgColor ",[605,50843,625],{"class":610},[605,50845,5431],{"class":2800},[605,50847,2970],{"class":651},[605,50849,5536],{"class":610},[605,50851,50852],{"class":631},"#F6B03B",[605,50854,5536],{"class":610},[605,50856,5539],{"class":651},[605,50858,50859],{"class":607,"line":854},[605,50860,710],{"emptyLinePlaceholder":562},[605,50862,50863,50865,50867,50869],{"class":607,"line":600},[605,50864,2689],{"class":618},[605,50866,48790],{"class":651},[605,50868,625],{"class":610},[605,50870,14018],{"class":651},[605,50872,50873],{"class":607,"line":874},[605,50874,30928],{"class":610},[605,50876,50877,50879,50881,50883,50885,50887],{"class":607,"line":884},[605,50878,48803],{"class":614},[605,50880,1190],{"class":610},[605,50882,667],{"class":610},[605,50884,839],{"class":631},[605,50886,5536],{"class":610},[605,50888,14031],{"class":610},[605,50890,50891,50893,50895,50897,50899,50901,50903,50905,50907,50909],{"class":607,"line":2952},[605,50892,48818],{"class":614},[605,50894,1190],{"class":610},[605,50896,26205],{"class":651},[605,50898,1893],{"class":791},[605,50900,655],{"class":610},[605,50902,22969],{"class":791},[605,50904,655],{"class":610},[605,50906,22969],{"class":791},[605,50908,1481],{"class":651},[605,50910,14031],{"class":610},[605,50912,50913],{"class":607,"line":2960},[605,50914,17650],{"class":610},[605,50916,50917],{"class":607,"line":2990},[605,50918,30928],{"class":610},[605,50920,50921,50923,50925,50927,50929,50931],{"class":607,"line":3007},[605,50922,48803],{"class":614},[605,50924,1190],{"class":610},[605,50926,667],{"class":610},[605,50928,4735],{"class":631},[605,50930,5536],{"class":610},[605,50932,14031],{"class":610},[605,50934,50935,50937,50939,50941,50943,50945,50947,50949,50951,50953],{"class":607,"line":3022},[605,50936,48818],{"class":614},[605,50938,1190],{"class":610},[605,50940,26205],{"class":651},[605,50942,33784],{"class":791},[605,50944,655],{"class":610},[605,50946,23726],{"class":791},[605,50948,655],{"class":610},[605,50950,23726],{"class":791},[605,50952,1481],{"class":651},[605,50954,14031],{"class":610},[605,50956,50957],{"class":607,"line":3047},[605,50958,17650],{"class":610},[605,50960,50961],{"class":607,"line":2591},[605,50962,30928],{"class":610},[605,50964,50965,50967,50969,50971,50973,50975],{"class":607,"line":3062},[605,50966,48803],{"class":614},[605,50968,1190],{"class":610},[605,50970,667],{"class":610},[605,50972,5127],{"class":631},[605,50974,5536],{"class":610},[605,50976,14031],{"class":610},[605,50978,50979,50981,50983,50985,50987,50989,50991,50993,50995,50997,50999,51001],{"class":607,"line":3092},[605,50980,48818],{"class":614},[605,50982,1190],{"class":610},[605,50984,26205],{"class":651},[605,50986,1513],{"class":791},[605,50988,655],{"class":610},[605,50990,28659],{"class":791},[605,50992,655],{"class":610},[605,50994,28538],{"class":791},[605,50996,655],{"class":610},[605,50998,2724],{"class":791},[605,51000,1481],{"class":651},[605,51002,14031],{"class":610},[605,51004,51005],{"class":607,"line":3101},[605,51006,17650],{"class":610},[605,51008,51009],{"class":607,"line":4207},[605,51010,30928],{"class":610},[605,51012,51013,51015,51017,51019,51022,51024],{"class":607,"line":4212},[605,51014,48803],{"class":614},[605,51016,1190],{"class":610},[605,51018,667],{"class":610},[605,51020,51021],{"class":631},"TresConeGeometry",[605,51023,5536],{"class":610},[605,51025,14031],{"class":610},[605,51027,51028,51030,51032,51034,51036,51038,51041,51043,51045,51047],{"class":607,"line":4235},[605,51029,48818],{"class":614},[605,51031,1190],{"class":610},[605,51033,26205],{"class":651},[605,51035,33784],{"class":791},[605,51037,655],{"class":610},[605,51039,51040],{"class":791}," 1.4",[605,51042,655],{"class":610},[605,51044,23726],{"class":791},[605,51046,1481],{"class":651},[605,51048,14031],{"class":610},[605,51050,51051],{"class":607,"line":4244},[605,51052,17650],{"class":610},[605,51054,51055],{"class":607,"line":4253},[605,51056,14056],{"class":651},[605,51058,51059],{"class":607,"line":4262},[605,51060,710],{"emptyLinePlaceholder":562},[605,51062,51063,51065,51068,51070,51073,51076,51078],{"class":607,"line":4271},[605,51064,2689],{"class":618},[605,51066,51067],{"class":651}," getRandomBackgroundColor ",[605,51069,625],{"class":610},[605,51071,51072],{"class":610}," ():",[605,51074,51075],{"class":1172}," string",[605,51077,5501],{"class":618},[605,51079,1176],{"class":610},[605,51081,51082,51085,51088,51090,51092,51094,51096,51098,51100,51102,51104,51106,51108,51110,51113,51115,51117,51119,51122,51124,51126,51128,51131,51133,51135,51137,51140,51142,51144,51146,51149,51151],{"class":607,"line":14784},[605,51083,51084],{"class":618},"  const",[605,51086,51087],{"class":651}," colors",[605,51089,2766],{"class":610},[605,51091,26205],{"class":614},[605,51093,5536],{"class":610},[605,51095,50852],{"class":631},[605,51097,5536],{"class":610},[605,51099,655],{"class":610},[605,51101,667],{"class":610},[605,51103,5040],{"class":631},[605,51105,5536],{"class":610},[605,51107,655],{"class":610},[605,51109,667],{"class":610},[605,51111,51112],{"class":631},"#FF5733",[605,51114,5536],{"class":610},[605,51116,655],{"class":610},[605,51118,667],{"class":610},[605,51120,51121],{"class":631},"#33FF57",[605,51123,5536],{"class":610},[605,51125,655],{"class":610},[605,51127,667],{"class":610},[605,51129,51130],{"class":631},"#3357FF",[605,51132,5536],{"class":610},[605,51134,655],{"class":610},[605,51136,667],{"class":610},[605,51138,51139],{"class":631},"#F333FF",[605,51141,5536],{"class":610},[605,51143,655],{"class":610},[605,51145,667],{"class":610},[605,51147,51148],{"class":631},"#33FFF5",[605,51150,5536],{"class":610},[605,51152,14056],{"class":614},[605,51154,51155,51157,51160,51162,51164,51166,51168,51170,51172,51174,51177,51180,51182,51184,51186,51188],{"class":607,"line":14799},[605,51156,51084],{"class":618},[605,51158,51159],{"class":651}," idx",[605,51161,2766],{"class":610},[605,51163,24569],{"class":651},[605,51165,1118],{"class":610},[605,51167,39002],{"class":2800},[605,51169,2970],{"class":614},[605,51171,21593],{"class":651},[605,51173,1118],{"class":610},[605,51175,51176],{"class":2800},"random",[605,51178,51179],{"class":614},"() ",[605,51181,16566],{"class":610},[605,51183,51087],{"class":651},[605,51185,1118],{"class":610},[605,51187,14616],{"class":651},[605,51189,5539],{"class":614},[605,51191,51192,51194,51196,51198,51201,51204,51207,51209,51211],{"class":607,"line":14814},[605,51193,16533],{"class":644},[605,51195,51087],{"class":651},[605,51197,1466],{"class":614},[605,51199,51200],{"class":651},"idx",[605,51202,51203],{"class":614},"] ",[605,51205,51206],{"class":610},"??",[605,51208,667],{"class":610},[605,51210,50852],{"class":631},[605,51212,673],{"class":610},[605,51214,51215],{"class":607,"line":14819},[605,51216,1297],{"class":610},[605,51218,51219],{"class":607,"line":14826},[605,51220,710],{"emptyLinePlaceholder":562},[605,51222,51223,51225,51228,51230,51233,51235],{"class":607,"line":14831},[605,51224,2689],{"class":618},[605,51226,51227],{"class":651}," updateBackgroundColor ",[605,51229,625],{"class":610},[605,51231,51232],{"class":610}," ()",[605,51234,5501],{"class":618},[605,51236,1176],{"class":610},[605,51238,51239,51242,51244,51246,51248,51251],{"class":607,"line":14837},[605,51240,51241],{"class":651},"  bgColor",[605,51243,1118],{"class":610},[605,51245,5496],{"class":651},[605,51247,2766],{"class":610},[605,51249,51250],{"class":2800}," getRandomBackgroundColor",[605,51252,2846],{"class":614},[605,51254,51255],{"class":607,"line":14858},[605,51256,1297],{"class":610},[605,51258,51259,51261,51263],{"class":607,"line":14864},[605,51260,700],{"class":610},[605,51262,615],{"class":614},[605,51264,637],{"class":610},[605,51266,51267],{"class":607,"line":14871},[605,51268,710],{"emptyLinePlaceholder":562},[605,51270,51271,51273,51275],{"class":607,"line":14876},[605,51272,611],{"class":610},[605,51274,718],{"class":614},[605,51276,637],{"class":610},[605,51278,51279,51281,51283,51285,51287,51289,51292,51294,51296,51298,51300,51302,51304],{"class":607,"line":14897},[605,51280,726],{"class":610},[605,51282,18670],{"class":614},[605,51284,5431],{"class":618},[605,51286,625],{"class":610},[605,51288,628],{"class":610},[605,51290,51291],{"class":631},"rootRef",[605,51293,628],{"class":610},[605,51295,18673],{"class":618},[605,51297,625],{"class":610},[605,51299,628],{"class":610},[605,51301,50355],{"class":631},[605,51303,628],{"class":610},[605,51305,637],{"class":610},[605,51307,51308,51310,51312,51314,51316,51318,51320,51322,51324,51326,51328,51331,51333],{"class":607,"line":14910},[605,51309,749],{"class":610},[605,51311,729],{"class":614},[605,51313,4111],{"class":618},[605,51315,625],{"class":610},[605,51317,628],{"class":610},[605,51319,49134],{"class":651},[605,51321,628],{"class":610},[605,51323,18673],{"class":618},[605,51325,625],{"class":610},[605,51327,628],{"class":610},[605,51329,51330],{"class":631},"!pointer-events-none",[605,51332,628],{"class":610},[605,51334,637],{"class":610},[605,51336,51337,51339,51341,51343,51345,51347,51349,51351,51353,51355,51357,51359,51361,51363,51365],{"class":607,"line":14936},[605,51338,825],{"class":610},[605,51340,752],{"class":614},[605,51342,781],{"class":610},[605,51344,1459],{"class":618},[605,51346,625],{"class":610},[605,51348,628],{"class":610},[605,51350,1466],{"class":610},[605,51352,937],{"class":791},[605,51354,1471],{"class":610},[605,51356,9877],{"class":791},[605,51358,1471],{"class":610},[605,51360,4685],{"class":791},[605,51362,1481],{"class":610},[605,51364,628],{"class":610},[605,51366,755],{"class":610},[605,51368,51369,51371,51373,51375,51378,51380,51382,51384,51386],{"class":607,"line":14941},[605,51370,825],{"class":610},[605,51372,763],{"class":614},[605,51374,781],{"class":610},[605,51376,51377],{"class":618},"dom-element",[605,51379,625],{"class":610},[605,51381,628],{"class":610},[605,51383,51291],{"class":651},[605,51385,628],{"class":610},[605,51387,755],{"class":610},[605,51389,51390],{"class":607,"line":14948},[605,51391,710],{"emptyLinePlaceholder":562},[605,51393,51394,51396],{"class":607,"line":14957},[605,51395,825],{"class":610},[605,51397,49189],{"class":614},[605,51399,51400,51402,51404,51406,51408,51410,51412,51414,51416,51418],{"class":607,"line":14962},[605,51401,2963],{"class":644},[605,51403,625],{"class":610},[605,51405,628],{"class":610},[605,51407,2970],{"class":610},[605,51409,15748],{"class":651},[605,51411,1471],{"class":610},[605,51413,2978],{"class":651},[605,51415,2981],{"class":610},[605,51417,49210],{"class":651},[605,51419,2987],{"class":610},[605,51421,51422,51424,51426,51428,51430,51432,51434,51436],{"class":607,"line":14971},[605,51423,2993],{"class":610},[605,51425,2996],{"class":618},[605,51427,625],{"class":610},[605,51429,15730],{"class":610},[605,51431,49225],{"class":631},[605,51433,15736],{"class":610},[605,51435,2978],{"class":651},[605,51437,15741],{"class":610},[605,51439,51440,51442,51444,51446,51448,51450],{"class":607,"line":14990},[605,51441,2993],{"class":610},[605,51443,3483],{"class":618},[605,51445,625],{"class":610},[605,51447,628],{"class":610},[605,51449,4160],{"class":791},[605,51451,2987],{"class":610},[605,51453,51454,51456,51458,51460,51462,51464],{"class":607,"line":15000},[605,51455,2993],{"class":610},[605,51457,49252],{"class":618},[605,51459,625],{"class":610},[605,51461,628],{"class":610},[605,51463,49259],{"class":791},[605,51465,2987],{"class":610},[605,51467,51468,51470,51472,51474,51476,51478],{"class":607,"line":15037},[605,51469,2993],{"class":610},[605,51471,33793],{"class":618},[605,51473,625],{"class":610},[605,51475,628],{"class":610},[605,51477,1893],{"class":791},[605,51479,2987],{"class":610},[605,51481,51482,51484,51486,51488,51490,51492,51494,51496,51498,51500],{"class":607,"line":15046},[605,51483,2993],{"class":610},[605,51485,3690],{"class":618},[605,51487,625],{"class":610},[605,51489,628],{"class":610},[605,51491,15194],{"class":610},[605,51493,32216],{"class":791},[605,51495,1471],{"class":610},[605,51497,32216],{"class":791},[605,51499,1481],{"class":610},[605,51501,2987],{"class":610},[605,51503,51504],{"class":607,"line":15080},[605,51505,47700],{"class":610},[605,51507,51508,51510,51512,51514,51516,51518,51520,51523,51525,51528,51530,51532,51534,51536,51538,51541,51543,51546,51548,51550,51552,51554,51556,51558,51560],{"class":607,"line":15089},[605,51509,836],{"class":610},[605,51511,828],{"class":614},[605,51513,781],{"class":610},[605,51515,1459],{"class":618},[605,51517,625],{"class":610},[605,51519,628],{"class":610},[605,51521,51522],{"class":610},"[(",[605,51524,2978],{"class":651},[605,51526,51527],{"class":610}," - (",[605,51529,49210],{"class":651},[605,51531,1118],{"class":610},[605,51533,14616],{"class":651},[605,51535,49328],{"class":610},[605,51537,1893],{"class":791},[605,51539,51540],{"class":610},") / ",[605,51542,792],{"class":791},[605,51544,51545],{"class":610},") * ",[605,51547,792],{"class":791},[605,51549,1471],{"class":610},[605,51551,1893],{"class":791},[605,51553,1471],{"class":610},[605,51555,937],{"class":791},[605,51557,1481],{"class":610},[605,51559,628],{"class":610},[605,51561,637],{"class":610},[605,51563,51564,51566,51568,51570,51572,51574,51576,51578,51580,51582,51584,51586,51588,51590,51592,51594,51596,51598,51600],{"class":607,"line":15098},[605,51565,49364],{"class":610},[605,51567,49367],{"class":614},[605,51569,781],{"class":610},[605,51571,49372],{"class":618},[605,51573,625],{"class":610},[605,51575,628],{"class":610},[605,51577,15748],{"class":651},[605,51579,1118],{"class":610},[605,51581,49367],{"class":651},[605,51583,628],{"class":610},[605,51585,781],{"class":610},[605,51587,1989],{"class":618},[605,51589,625],{"class":610},[605,51591,628],{"class":610},[605,51593,15748],{"class":651},[605,51595,1118],{"class":610},[605,51597,1989],{"class":651},[605,51599,628],{"class":610},[605,51601,755],{"class":610},[605,51603,51604,51606,51608],{"class":607,"line":15119},[605,51605,49364],{"class":610},[605,51607,849],{"class":614},[605,51609,755],{"class":610},[605,51611,51612,51614,51616],{"class":607,"line":15177},[605,51613,49415],{"class":610},[605,51615,828],{"class":614},[605,51617,637],{"class":610},[605,51619,51620,51622,51624],{"class":607,"line":15236},[605,51621,857],{"class":610},[605,51623,3478],{"class":614},[605,51625,637],{"class":610},[605,51627,51628],{"class":607,"line":15256},[605,51629,710],{"emptyLinePlaceholder":562},[605,51631,51632,51634],{"class":607,"line":15288},[605,51633,825],{"class":610},[605,51635,47613],{"class":614},[605,51637,51638],{"class":607,"line":15297},[605,51639,47619],{"class":618},[605,51641,51642],{"class":607,"line":15306},[605,51643,47625],{"class":618},[605,51645,51646,51648,51650,51652,51654],{"class":607,"line":48549},[605,51647,49454],{"class":618},[605,51649,625],{"class":610},[605,51651,628],{"class":610},[605,51653,43302],{"class":631},[605,51655,2987],{"class":610},[605,51657,51658,51660,51662,51664,51666,51668,51670,51672,51674,51676,51678,51680],{"class":607,"line":48550},[605,51659,2993],{"class":610},[605,51661,1459],{"class":618},[605,51663,625],{"class":610},[605,51665,628],{"class":610},[605,51667,1466],{"class":610},[605,51669,937],{"class":791},[605,51671,1471],{"class":610},[605,51673,49482],{"class":791},[605,51675,3598],{"class":610},[605,51677,792],{"class":791},[605,51679,1481],{"class":610},[605,51681,2987],{"class":610},[605,51683,51685,51687,51689,51691,51693,51696],{"class":51684,"line":49582},[607,641],[605,51686,2993],{"class":610},[605,51688,784],{"class":618},[605,51690,625],{"class":610},[605,51692,628],{"class":610},[605,51694,51695],{"class":791},"1.15",[605,51697,2987],{"class":610},[605,51699,51701,51703,51705,51707,51709,51711,51713,51715,51717,51719],{"class":51700,"line":48551},[607,641],[605,51702,2993],{"class":610},[605,51704,49498],{"class":618},[605,51706,625],{"class":610},[605,51708,628],{"class":610},[605,51710,1466],{"class":610},[605,51712,49507],{"class":791},[605,51714,1471],{"class":610},[605,51716,937],{"class":791},[605,51718,1481],{"class":610},[605,51720,2987],{"class":610},[605,51722,51724],{"class":51723,"line":48552},[607,641],[605,51725,47700],{"class":610},[605,51727,51729,51731,51733,51736,51738,51740,51743,51745],{"class":51728,"line":48553},[607,641],[605,51730,836],{"class":610},[605,51732,18749],{"class":614},[605,51734,51735],{"class":618}," name",[605,51737,625],{"class":610},[605,51739,628],{"class":610},[605,51741,51742],{"class":631},"transition-basic",[605,51744,628],{"class":610},[605,51746,637],{"class":610},[605,51748,51750,51752],{"class":51749,"line":48554},[607,641],[605,51751,49364],{"class":610},[605,51753,51754],{"class":614},"h1\n",[605,51756,51758,51761,51763,51765,51768],{"class":51757,"line":48555},[607,641],[605,51759,51760],{"class":644},"            v-if",[605,51762,625],{"class":610},[605,51764,628],{"class":610},[605,51766,51767],{"class":651},"showTransition",[605,51769,2987],{"class":610},[605,51771,51773,51776,51778,51780,51782,51784,51787,51789,51792,51794],{"class":51772,"line":48556},[607,641],[605,51774,51775],{"class":610},"            :",[605,51777,1299],{"class":618},[605,51779,625],{"class":610},[605,51781,628],{"class":610},[605,51783,7402],{"class":610},[605,51785,51786],{"class":614},"backgroundColor",[605,51788,7407],{"class":610},[605,51790,51791],{"class":651},"bgColor",[605,51793,661],{"class":610},[605,51795,2987],{"class":610},[605,51797,51799,51802,51804,51806,51809],{"class":51798,"line":48557},[607,641],[605,51800,51801],{"class":618},"            class",[605,51803,625],{"class":610},[605,51805,628],{"class":610},[605,51807,51808],{"class":631},"html-demo-transition-heading will-change-transform transition-transform,background-color cursor-pointer duration-500 text-center p-2 text-light shadow-lg",[605,51810,2987],{"class":610},[605,51812,51814,51817,51819,51821,51823,51826],{"class":51813,"line":48558},[607,641],[605,51815,51816],{"class":610},"            @",[605,51818,31189],{"class":618},[605,51820,625],{"class":610},[605,51822,628],{"class":610},[605,51824,51825],{"class":651},"updateBackgroundColor",[605,51827,2987],{"class":610},[605,51829,51831],{"class":51830,"line":48559},[607,641],[605,51832,51833],{"class":610},"          >\n",[605,51835,51837,51840,51842,51844,51847,51849,51851,51854,51856],{"class":51836,"line":48560},[607,641],[605,51838,51839],{"class":610},"            \u003C",[605,51841,1673],{"class":614},[605,51843,11720],{"class":610},[605,51845,51846],{"class":651},"TRANSITION + ",[605,51848,700],{"class":610},[605,51850,1673],{"class":614},[605,51852,51853],{"class":610},">\u003C",[605,51855,2508],{"class":614},[605,51857,755],{"class":610},[605,51859,51861,51863,51865,51867,51870,51872,51874],{"class":51860,"line":48561},[607,641],[605,51862,51839],{"class":610},[605,51864,1677],{"class":614},[605,51866,11720],{"class":610},[605,51868,51869],{"class":651},"occlude=blending 💛",[605,51871,700],{"class":610},[605,51873,1677],{"class":614},[605,51875,637],{"class":610},[605,51877,51879,51882,51884],{"class":51878,"line":49756},[607,641],[605,51880,51881],{"class":610},"          \u003C/",[605,51883,47707],{"class":614},[605,51885,637],{"class":610},[605,51887,51889,51891,51893],{"class":51888,"line":48562},[607,641],[605,51890,49415],{"class":610},[605,51892,18749],{"class":614},[605,51894,637],{"class":610},[605,51896,51898,51900,51902],{"class":51897,"line":48563},[607,641],[605,51899,857],{"class":610},[605,51901,47736],{"class":614},[605,51903,637],{"class":610},[605,51905,51907],{"class":51906,"line":48564},[607,641],[605,51908,710],{"emptyLinePlaceholder":562},[605,51910,51912,51914,51916,51918,51920,51922,51924,51926,51928,51930],{"class":51911,"line":48565},[607,641],[605,51913,825],{"class":610},[605,51915,3067],{"class":614},[605,51917,781],{"class":610},[605,51919,1968],{"class":618},[605,51921,625],{"class":610},[605,51923,628],{"class":610},[605,51925,4088],{"class":610},[605,51927,48990],{"class":791},[605,51929,628],{"class":610},[605,51931,755],{"class":610},[605,51933,51935,51937,51939,51941,51943,51945,51947,51949,51951],{"class":51934,"line":48566},[607,641],[605,51936,825],{"class":610},[605,51938,3518],{"class":614},[605,51940,781],{"class":610},[605,51942,1886],{"class":618},[605,51944,625],{"class":610},[605,51946,628],{"class":610},[605,51948,1893],{"class":791},[605,51950,628],{"class":610},[605,51952,755],{"class":610},[605,51954,51956,51958,51960],{"class":51955,"line":48567},[607,641],[605,51957,867],{"class":610},[605,51959,729],{"class":614},[605,51961,637],{"class":610},[605,51963,51965,51967,51969],{"class":51964,"line":48568},[607,641],[605,51966,877],{"class":610},[605,51968,18670],{"class":614},[605,51970,637],{"class":610},[605,51972,51973,51975,51977],{"class":607,"line":48569},[605,51974,700],{"class":610},[605,51976,718],{"class":614},[605,51978,637],{"class":610},[605,51980,51981],{"class":607,"line":48570},[605,51982,710],{"emptyLinePlaceholder":562},[605,51984,51985,51987,51989,51991],{"class":607,"line":48571},[605,51986,611],{"class":610},[605,51988,1299],{"class":614},[605,51990,47787],{"class":618},[605,51992,637],{"class":610},[605,51994,51995,51997,51999],{"class":607,"line":48572},[605,51996,1118],{"class":610},[605,51998,50355],{"class":1172},[605,52000,1176],{"class":610},[605,52002,52003,52005,52007,52009],{"class":607,"line":49896},[605,52004,1212],{"class":47802},[605,52006,1190],{"class":610},[605,52008,50367],{"class":791},[605,52010,3329],{"class":610},[605,52012,52013,52015,52017,52019],{"class":607,"line":48573},[605,52014,1222],{"class":47802},[605,52016,1190],{"class":610},[605,52018,50367],{"class":791},[605,52020,3329],{"class":610},[605,52022,52023,52025,52027,52029],{"class":607,"line":48574},[605,52024,50386],{"class":47802},[605,52026,1190],{"class":610},[605,52028,50391],{"class":651},[605,52030,3329],{"class":610},[605,52032,52033,52035,52037,52039],{"class":607,"line":48575},[605,52034,50399],{"class":47802},[605,52036,1190],{"class":610},[605,52038,50404],{"class":651},[605,52040,3329],{"class":610},[605,52042,52043,52045,52047,52049,52051],{"class":607,"line":48576},[605,52044,47803],{"class":47802},[605,52046,1190],{"class":610},[605,52048,47808],{"class":610},[605,52050,50418],{"class":651},[605,52052,3329],{"class":610},[605,52054,52055],{"class":607,"line":48577},[605,52056,1297],{"class":610},[605,52058,52059],{"class":607,"line":48578},[605,52060,710],{"emptyLinePlaceholder":562},[605,52062,52063,52065,52068,52070,52073],{"class":607,"line":48579},[605,52064,1118],{"class":610},[605,52066,52067],{"class":1172},"html-demo-transition-heading",[605,52069,1190],{"class":610},[605,52071,52072],{"class":618},"hover",[605,52074,1176],{"class":610},[605,52076,52077,52080,52082,52085,52087,52090],{"class":607,"line":48580},[605,52078,52079],{"class":47802},"  transform",[605,52081,1190],{"class":610},[605,52083,52084],{"class":2800}," scale",[605,52086,2970],{"class":610},[605,52088,52089],{"class":791},"1.05",[605,52091,52092],{"class":610},");\n",[605,52094,52095],{"class":607,"line":48581},[605,52096,1297],{"class":610},[605,52098,52099],{"class":607,"line":48582},[605,52100,710],{"emptyLinePlaceholder":562},[605,52102,52103,52105,52108],{"class":607,"line":48583},[605,52104,1118],{"class":610},[605,52106,52107],{"class":1172},"transition-basic-enter-from",[605,52109,14031],{"class":610},[605,52111,52112,52114,52117],{"class":607,"line":50076},[605,52113,1118],{"class":610},[605,52115,52116],{"class":1172},"transition-basic-leave-to",[605,52118,1176],{"class":610},[605,52120,52121,52123,52125,52127],{"class":607,"line":50100},[605,52122,49055],{"class":47802},[605,52124,1190],{"class":610},[605,52126,11773],{"class":791},[605,52128,3329],{"class":610},[605,52130,52131,52133,52135,52138,52140,52143],{"class":607,"line":50121},[605,52132,52079],{"class":47802},[605,52134,1190],{"class":610},[605,52136,52137],{"class":2800}," translateY",[605,52139,2970],{"class":610},[605,52141,52142],{"class":791},"-20px",[605,52144,52092],{"class":610},[605,52146,52147],{"class":607,"line":50130},[605,52148,1297],{"class":610},[605,52150,52151],{"class":607,"line":50139},[605,52152,710],{"emptyLinePlaceholder":562},[605,52154,52155,52157,52160],{"class":607,"line":50144},[605,52156,1118],{"class":610},[605,52158,52159],{"class":1172},"transition-basic-enter-active",[605,52161,14031],{"class":610},[605,52163,52164,52166,52169],{"class":607,"line":50151},[605,52165,1118],{"class":610},[605,52167,52168],{"class":1172},"transition-basic-leave-active",[605,52170,1176],{"class":610},[605,52172,52173,52176,52178,52181,52184,52187],{"class":607,"line":50169},[605,52174,52175],{"class":47802},"  transition",[605,52177,1190],{"class":610},[605,52179,52180],{"class":651}," all ",[605,52182,52183],{"class":791},"0.5s",[605,52185,52186],{"class":651}," ease",[605,52188,3329],{"class":610},[605,52190,52191],{"class":607,"line":50188},[605,52192,1297],{"class":610},[605,52194,52195],{"class":607,"line":50205},[605,52196,710],{"emptyLinePlaceholder":562},[605,52198,52199,52201,52204],{"class":607,"line":50232},[605,52200,1118],{"class":610},[605,52202,52203],{"class":1172},"transition-basic-enter-to",[605,52205,14031],{"class":610},[605,52207,52208,52210,52213],{"class":607,"line":50247},[605,52209,1118],{"class":610},[605,52211,52212],{"class":1172},"transition-basic-leave-from",[605,52214,1176],{"class":610},[605,52216,52217,52219,52221,52223],{"class":607,"line":50253},[605,52218,49055],{"class":47802},[605,52220,1190],{"class":610},[605,52222,22969],{"class":791},[605,52224,3329],{"class":610},[605,52226,52227,52229,52231,52233,52235,52237],{"class":607,"line":50258},[605,52228,52079],{"class":47802},[605,52230,1190],{"class":610},[605,52232,52137],{"class":2800},[605,52234,2970],{"class":610},[605,52236,937],{"class":791},[605,52238,52092],{"class":610},[605,52240,52241],{"class":607,"line":50263},[605,52242,1297],{"class":610},[605,52244,52245,52247,52249],{"class":607,"line":50286},[605,52246,700],{"class":610},[605,52248,1299],{"class":614},[605,52250,637],{"class":610},[7473,52252,50591,52254],{"id":52253},"using-iframes",[586,52255,52256],{},"iframes",[582,52258,52259,52260,52262],{},"You can achieve pretty cool results with the ",[586,52261,47736],{}," 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.",[2558,52264,52265],{},[52266,52267],"objects-html-iframe-demo",{},[47921,52269,47923,52270,52272],{},[47925,52271,47927],{},[594,52273,52275],{"className":38905,"code":52274,"language":38907,"meta":544,"style":544},"\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",[586,52276,52277,52283,52288,52293,52306,52319,52332,52345,52358,52372,52386,52390,52460],{"__ignoreMap":544},[605,52278,52279,52281],{"class":607,"line":545},[605,52280,611],{"class":610},[605,52282,48377],{"class":614},[605,52284,52285],{"class":607,"line":546},[605,52286,52287],{"class":618},"  transform\n",[605,52289,52290],{"class":607,"line":676},[605,52291,52292],{"class":618},"  center\n",[605,52294,52295,52298,52300,52302,52304],{"class":607,"line":697},[605,52296,52297],{"class":618},"  :cast-shadow",[605,52299,625],{"class":610},[605,52301,628],{"class":610},[605,52303,933],{"class":631},[605,52305,2987],{"class":610},[605,52307,52308,52311,52313,52315,52317],{"class":607,"line":707},[605,52309,52310],{"class":618},"  :receive-shadow",[605,52312,625],{"class":610},[605,52314,628],{"class":610},[605,52316,933],{"class":631},[605,52318,2987],{"class":610},[605,52320,52321,52324,52326,52328,52330],{"class":607,"line":713},[605,52322,52323],{"class":618},"  occlude",[605,52325,625],{"class":610},[605,52327,628],{"class":610},[605,52329,43302],{"class":631},[605,52331,2987],{"class":610},[605,52333,52334,52337,52339,52341,52343],{"class":607,"line":723},[605,52335,52336],{"class":618},"  :z-index-range",[605,52338,625],{"class":610},[605,52340,628],{"class":610},[605,52342,48014],{"class":631},[605,52344,2987],{"class":610},[605,52346,52347,52350,52352,52354,52356],{"class":607,"line":746},[605,52348,52349],{"class":618},"  :position-y",[605,52351,625],{"class":610},[605,52353,628],{"class":610},[605,52355,50017],{"class":631},[605,52357,2987],{"class":610},[605,52359,52360,52363,52365,52367,52370],{"class":607,"line":758},[605,52361,52362],{"class":618},"  :portal",[605,52364,625],{"class":610},[605,52366,628],{"class":610},[605,52368,52369],{"class":631},"portalRef",[605,52371,2987],{"class":610},[605,52373,52374,52377,52379,52381,52384],{"class":607,"line":768},[605,52375,52376],{"class":618},"  :style",[605,52378,625],{"class":610},[605,52380,628],{"class":610},[605,52382,52383],{"class":631},"{ userSelect: 'none' }",[605,52385,2987],{"class":610},[605,52387,52388],{"class":607,"line":773},[605,52389,637],{"class":610},[605,52391,52392,52394,52397,52399,52401,52403,52406,52408,52411,52413,52415,52418,52420,52423,52425,52427,52429,52431,52434,52436,52438,52441,52443,52446,52448,52450,52452,52454,52456,52458],{"class":607,"line":799},[605,52393,726],{"class":610},[605,52395,52396],{"class":614},"iframe",[605,52398,18673],{"class":618},[605,52400,625],{"class":610},[605,52402,628],{"class":610},[605,52404,52405],{"class":631},"w-[700px] h-[500px]",[605,52407,628],{"class":610},[605,52409,52410],{"class":618}," src",[605,52412,625],{"class":610},[605,52414,628],{"class":610},[605,52416,52417],{"class":631},"https://tresjs.org",[605,52419,628],{"class":610},[605,52421,52422],{"class":618}," frameborder",[605,52424,625],{"class":610},[605,52426,628],{"class":610},[605,52428,937],{"class":631},[605,52430,628],{"class":610},[605,52432,52433],{"class":618}," :width",[605,52435,625],{"class":610},[605,52437,628],{"class":610},[605,52439,52440],{"class":631},"700",[605,52442,628],{"class":610},[605,52444,52445],{"class":618}," :height",[605,52447,625],{"class":610},[605,52449,628],{"class":610},[605,52451,36316],{"class":631},[605,52453,628],{"class":610},[605,52455,18722],{"class":610},[605,52457,52396],{"class":614},[605,52459,637],{"class":610},[605,52461,52462,52464,52466],{"class":607,"line":599},[605,52463,700],{"class":610},[605,52465,38907],{"class":614},[605,52467,637],{"class":610},[52469,52470,52471],"info",{},[582,52472,52473,52474,52477,52478,52481,52482],{},"The demos use ",[586,52475,52476],{},":z-index-range=\"[28, 0]\""," simply to ensure the HTML elements stay below the documentation header (which uses ",[586,52479,52480],{},"z-index: 30",").\n",[1673,52483,52484],{},"This value is for the docs only — you can ignore it or adjust it as needed.",[472,52486,894],{"id":893},[899,52488,52489,52499],{},[902,52490,52491],{},[905,52492,52493,52495,52497],{},[908,52494,910],{},[908,52496,913],{},[908,52498,916],{},[918,52500,52501,52519,52534,52552,52576,52596,52613,52631,52643,52662,52685,52725,52762,52782,52815],{},[905,52502,52503,52508,52514],{},[923,52504,52505],{},[1673,52506,52507],{},"as",[923,52509,52510,52511,1118],{},"Wrapping ",[1677,52512,52513],{},"HTML element",[923,52515,52516],{},[586,52517,52518],{},"'div'",[905,52520,52521,52526,52532],{},[923,52522,52523],{},[1673,52524,52525],{},"wrapperClass",[923,52527,2253,52528,52531],{},[586,52529,52530],{},"className"," of the wrapping element. element.",[923,52533],{},[905,52535,52536,52541,52548],{},[923,52537,52538],{},[1673,52539,52540],{},"prepend",[923,52542,52543,52544,52547],{},"Projects content ",[1677,52545,52546],{},"behind"," the canvas.",[923,52549,52550],{},[586,52551,943],{},[905,52553,52554,52558,52572],{},[923,52555,52556],{},[1673,52557,44955],{},[923,52559,1322,52560,3198,52563,52565,52566],{},[586,52561,52562],{},"transform: translate(-50%, -50%)",[2508,52564],{},"➡️ ",[1677,52567,52568,52569,52571],{},"Ignored in ",[1673,52570,5337],{}," mode.",[923,52573,52574],{},[586,52575,943],{},[905,52577,52578,52583,52592],{},[923,52579,52580],{},[1673,52581,52582],{},"fullscreen",[923,52584,52585,52586,52565,52588],{},"Aligns to the upper-left corner and fills the screen. ",[2508,52587],{},[1677,52589,52568,52590,52571],{},[1673,52591,5337],{},[923,52593,52594],{},[586,52595,943],{},[905,52597,52598,52603,52611],{},[923,52599,52600],{},[1673,52601,52602],{},"distanceFactor",[923,52604,52605,52606,52608,52609,1118],{},"Children are scaled by this factor and also by distance to a ",[586,52607,6214],{},", or zoom when using an ",[586,52610,47399],{},[923,52612],{},[905,52614,52615,52620,52626],{},[923,52616,52617],{},[1673,52618,52619],{},"zIndexRange",[923,52621,52622,52623,1118],{},"Defines the ",[1677,52624,52625],{},"Z-order range",[923,52627,52628],{},[586,52629,52630],{},"[16777271, 0]",[905,52632,52633,52638,52641],{},[923,52634,52635],{},[1673,52636,52637],{},"portal",[923,52639,52640],{},"Reference to a target container (for rendering into a different DOM node). container.",[923,52642],{},[905,52644,52645,52649,52658],{},[923,52646,52647],{},[1673,52648,5337],{},[923,52650,930,52651,52653,52654,52657],{},[586,52652,933],{},", applies ",[586,52655,52656],{},"matrix3d"," transformations — the element appears as if it is inside the 3D scene.",[923,52659,52660],{},[586,52661,943],{},[905,52663,52664,52669,52681],{},[923,52665,52666],{},[1673,52667,52668],{},"sprite",[923,52670,52671,52672,3198,52674,52565,52676],{},"Renders as a ",[1677,52673,52668],{},[2508,52675],{},[1677,52677,52678,52679,52571],{},"Only in ",[1673,52680,5337],{},[923,52682,52683],{},[586,52684,943],{},[905,52686,52687,52692,52716],{},[923,52688,52689],{},[1673,52690,52691],{},"calculatePosition",[923,52693,52694,52695,52697,44693,52700,44693,52703,52705,52706,52709,52710,52565,52712],{},"Callback function to override the default positioning logic. ",[2508,52696],{},[1673,52698,52699],{},"Type:",[586,52701,52702],{},"(object: Object3D, camera: Camera, size: { width: number; height: number }) => [number, number, number]",[2508,52704],{},"Receives the related 3D object, the active camera, and the current viewport size, and must return ",[586,52707,52708],{},"[x, y, z]"," pixel coordinates for placing the HTML element. ",[2508,52711],{},[1677,52713,52568,52714,52571],{},[1673,52715,5337],{},[923,52717,52718],{},[1112,52719,52722,52723],{"href":52720,"rel":52721},"https://github.com/Tresjs/cientos/blob/main/src/core/misc/html/utils.ts#L9-L19",[1116],"Default ",[586,52724,52691],{},[905,52726,52727,52731,52760],{},[923,52728,52729],{},[1673,52730,47884],{},[923,52732,52733,52734,52736,52737,52739,52740,52743,52744,49328,52746,52749,52750,52736,52752,52755,52756,52759],{},"Enables occlusion. Possible values: ",[2508,52735],{},"- ",[586,52738,933],{}," → Occlusion against ",[1677,52741,52742],{},"all"," scene objects ",[2508,52745],{},[586,52747,52748],{},"Ref\u003CTresObject3D>[]"," → Occlusion is enabled only against the specified objects. ",[2508,52751],{},[586,52753,52754],{},"'blending'"," → Uses a ",[1677,52757,52758],{},"blending-based"," occlusion method (CSS-like depth blending).",[923,52761],{},[905,52763,52764,52768,52774],{},[923,52765,52766],{},[1673,52767,15748],{},[923,52769,52770,52771,52773],{},"Custom ",[586,52772,15748],{}," to be used.",[923,52775,52776],{},[1112,52777,52780],{"href":52778,"rel":52779},"https://threejs.org/docs/?q=geometry#api/en/geometries/PlaneGeometry",[1116],[586,52781,26491],{},[905,52783,52784,52788,52813],{},[923,52785,52786],{},[1673,52787,15798],{},[923,52789,52790,44693,52796,44693,52798,52804,52805,44693,52807],{},[1673,52791,52792,52793,52795],{},"Custom shader ",[1677,52794,15798],{}," used for the occlusion mesh.",[2508,52797],{},[1673,52799,52800,52801,52803],{},"Only applies when ",[586,52802,50442],{}," is enabled"," (an occlusion mesh is created). ",[2508,52806],{},[1677,52808,52809,52810,52812],{},"Ignored in raycast occlusion modes (",[586,52811,933],{},", object refs).",[923,52814],{},[905,52816,52817,52822,52843],{},[923,52818,52819],{},[1673,52820,52821],{},"transparentMaterial",[923,52823,52824,44693,52830,44693,52832,44693,52837,44693,52839],{},[1673,52825,52826,52827,52829],{},"Enables ",[1677,52828,4873],{}," rendering for the occlusion material.",[2508,52831],{},[1673,52833,52800,52834,52836],{},[586,52835,50442],{}," creates an occlusion mesh.",[2508,52838],{},[1677,52840,52809,52841,52812],{},[586,52842,933],{},[923,52844,52845],{},[586,52846,943],{},[472,52848,7742],{"id":7741},[899,52850,52851,52859],{},[902,52852,52853],{},[905,52854,52855,52857],{},[908,52856,7807],{},[908,52858,913],{},[918,52860,52861],{},[905,52862,52863,52866],{},[923,52864,52865],{},"onOcclude",[923,52867,52868],{},"Called when the occlusion state changes.",[472,52870,52872],{"id":52871},"exposed-properties","Exposed properties",[899,52874,52875,52886],{},[902,52876,52877],{},[905,52878,52879,52882,52884],{},[908,52880,52881],{},"Property",[908,52883,10957],{},[908,52885,913],{},[918,52887,52888,52910,52931],{},[905,52889,52890,52894,52899],{},[923,52891,52892],{},[1673,52893,20549],{},[923,52895,52896],{},[586,52897,52898],{},"Ref\u003CTresObject3D | null>",[923,52900,52901,52902,52907,52908,1118],{},"Reference to the root ",[1673,52903,52904],{},[586,52905,52906],{},"\u003CTresGroup>"," used by ",[586,52909,47403],{},[905,52911,52912,52917,52922],{},[923,52913,52914],{},[1673,52915,52916],{},"isVisible",[923,52918,52919],{},[586,52920,52921],{},"Ref\u003Cboolean>",[923,52923,52924,52925,10149,52928,1118],{},"Reactive value that indicates whether the HTML content is ",[1673,52926,52927],{},"currently visible",[1673,52929,52930],{},"occluded",[905,52932,52933,52938,52942],{},[923,52934,52935],{},[1673,52936,52937],{},"occlusionMesh",[923,52939,52940],{},[586,52941,52898],{},[923,52943,52944,52945,52948,52949,50549,52951,52953],{},"Reference to the ",[1673,52946,52947],{},"occlusion mesh"," created when ",[586,52950,50442],{},[1673,52952,10162],{},". Used internally for geometry-based occlusion.",[472,52955,52957],{"id":52956},"caveats","Caveats",[3136,52959,52960,52993,53010,53067,53085],{},[3139,52961,52962,52963,52968,52969,52971,52972,10149,52975,52978,52979,52981,52982,52985,52986,52989,52990,52992],{},"✨ When using ",[1673,52964,52965],{},[586,52966,52967],{},"\u003CHtml occlude>",", if the ",[586,52970,47403],{}," component is ",[1673,52973,52974],{},"overlapping",[1673,52976,52977],{},"inside a 3D object",", it will be considered ",[1673,52980,52930],{}," and therefore ",[1673,52983,52984],{},"hidden",". To avoid this, ",[1673,52987,52988],{},"adjust the position"," of the ",[586,52991,47403],{}," component in your scene.",[3139,52994,52995,52996,53001,53002,53005,53006,53009],{},"🎨 When using ",[1673,52997,52998],{},[586,52999,53000],{},"\u003CHtml occlude=\"blending\">",", the HTML content is no longer ",[1673,53003,53004],{},"selectable"," because it is rendered ",[1673,53007,53008],{},"behind the canvas",". This is required to achieve the blending effect.",[3139,53011,53012,53013,53015,53016,53018,53019],{},"⚙️ When using a ",[1673,53014,50538],{}," with occlusion in ",[586,53017,43302],{}," mode, there are a few important requirements to ensure the HTML content renders correctly ⬇️",[47921,53020,47923,53021,53024],{},[47925,53022,53023],{},"See more information",[7605,53025,53026,53038,53046,53053],{},[3139,53027,53028,53029,2713,53031,53034,53035,1118],{},"If you provide your own material, it must be ",[1673,53030,4873],{},[586,53032,53033],{},"transparent: true",") with an ",[1673,53036,53037],{},"opacity \u003C 1",[3139,53039,53040,53041,53045],{},"If you are not providing a custom material, enable ",[1673,53042,53043],{},[586,53044,52821],{}," so the internal shader becomes transparent.",[3139,53047,53048,53049,53052],{},"The occlusion mesh requires a ",[1673,53050,53051],{},"fully transparent canvas background","; otherwise, thin borders or halo artifacts may appear.",[3139,53054,53055,53056,9949,53059,1471,53061,53064,53065,1118],{},"To compensate for the transparent canvas, you may ",[1673,53057,53058],{},"reapply your previous clear-color as a CSS background",[586,53060,38907],{},[586,53062,53063],{},"body",", or a wrapper ",[586,53066,18670],{},[3139,53068,53069,53070,53074,53075,53077,53078,53080,53081,53084],{},"🔶 When using ",[1673,53071,53072],{},[586,53073,52821],{},", overlapping ",[586,53076,47403],{}," elements (especially multiple ",[586,53079,50442],{}," instances) may cause ",[1673,53082,53083],{},"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.",[3139,53086,53087,53088,53090,53091,53094,53095],{},"🔵 To avoid thin border artifacts when using ",[586,53089,50442],{},", make sure your ",[586,53092,53093],{},"\u003CTresCanvas>"," is fully transparent:",[594,53096,53098],{"className":596,"code":53097,"language":601,"meta":544,"style":544},"\u003CTresCanvas :alpha=\"true\" :clearAlpha=\"0\" />\n",[586,53099,53100],{"__ignoreMap":544},[605,53101,53102,53104,53106,53108,53110,53112,53114,53116,53118,53120,53123,53125,53127,53129,53131],{"class":607,"line":545},[605,53103,611],{"class":610},[605,53105,729],{"class":614},[605,53107,781],{"class":610},[605,53109,39559],{"class":618},[605,53111,625],{"class":610},[605,53113,628],{"class":610},[605,53115,933],{"class":3870},[605,53117,628],{"class":610},[605,53119,781],{"class":610},[605,53121,53122],{"class":618},"clearAlpha",[605,53124,625],{"class":610},[605,53126,628],{"class":610},[605,53128,937],{"class":791},[605,53130,628],{"class":610},[605,53132,755],{"class":610},[899,53134,53135,53145],{},[902,53136,53137],{},[905,53138,53139,53141,53143],{},[908,53140,910],{},[908,53142,913],{},[908,53144,916],{},[918,53146,53147,53160,53171,53184,53200,53215,53226,53239,53250,53263,53276,53289,53310,53325],{},[905,53148,53149,53153,53156],{},[923,53150,53151],{},[1673,53152,52507],{},[923,53154,53155],{},"Wrapping html element.",[923,53157,53158],{},[586,53159,52518],{},[905,53161,53162,53166,53169],{},[923,53163,53164],{},[1673,53165,52525],{},[923,53167,53168],{},"The className of the wrapping element.",[923,53170],{},[905,53172,53173,53177,53180],{},[923,53174,53175],{},[1673,53176,52540],{},[923,53178,53179],{},"Project content behind the canvas.",[923,53181,53182],{},[586,53183,943],{},[905,53185,53186,53190,53196],{},[923,53187,53188],{},[1673,53189,44955],{},[923,53191,53192,53193],{},"Adds a -50%/-50% CSS transform. ",[605,53194,53195],{},"Ignored in transform mode",[923,53197,53198],{},[586,53199,943],{},[905,53201,53202,53206,53211],{},[923,53203,53204],{},[1673,53205,52582],{},[923,53207,53208,53209],{},"Aligns to the upper-left corner, fills the screen. ",[605,53210,53195],{},[923,53212,53213],{},[586,53214,943],{},[905,53216,53217,53221,53224],{},[923,53218,53219],{},[1673,53220,52602],{},[923,53222,53223],{},"Children will be scaled by this factor, and also by distance to a PerspectiveCamera / zoom by an OrthographicCamera.",[923,53225],{},[905,53227,53228,53232,53235],{},[923,53229,53230],{},[1673,53231,52619],{},[923,53233,53234],{},"Z-order range.",[923,53236,53237],{},[586,53238,52630],{},[905,53240,53241,53245,53248],{},[923,53242,53243],{},[1673,53244,52637],{},[923,53246,53247],{},"Reference to target container.",[923,53249],{},[905,53251,53252,53256,53259],{},[923,53253,53254],{},[1673,53255,5337],{},[923,53257,53258],{},"If true, applies matrix3d transformations.",[923,53260,53261],{},[586,53262,943],{},[905,53264,53265,53269,53272],{},[923,53266,53267],{},[1673,53268,52668],{},[923,53270,53271],{},"Renders as sprite, but only in transform mode.",[923,53273,53274],{},[586,53275,943],{},[905,53277,53278,53282,53287],{},[923,53279,53280],{},[1673,53281,52691],{},[923,53283,53284,53285],{},"Override default positioning function. ",[605,53286,53195],{},[923,53288],{},[905,53290,53291,53295,53308],{},[923,53292,53293],{},[1673,53294,47884],{},[923,53296,53297,53298,1471,53300,1471,53302,1705,53305,53307],{},"Can be ",[586,53299,933],{},[586,53301,52748],{},[586,53303,53304],{},"'raycast'",[586,53306,52754],{},". True occludes the entire scene.",[923,53309],{},[905,53311,53312,53316,53321],{},[923,53313,53314],{},[1673,53315,15748],{},[923,53317,52770,53318,53320],{},[586,53319,15748],{}," to be use",[923,53322,53323],{},[586,53324,26491],{},[905,53326,53327,53331,53335],{},[923,53328,53329],{},[1673,53330,15798],{},[923,53332,52792,53333,53320],{},[586,53334,15798],{},[923,53336],{},[472,53338,7742],{"id":53339},"events-1",[899,53341,53342,53350],{},[902,53343,53344],{},[905,53345,53346,53348],{},[908,53347,7807],{},[908,53349,913],{},[918,53351,53352],{},[905,53353,53354,53356],{},[923,53355,52865],{},[923,53357,52868],{},[1299,53359,53360],{},"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":544,"searchDepth":545,"depth":546,"links":53362},[53363,53364,53369,53370,53375,53376,53377,53378,53379],{"id":592,"depth":546,"text":15},{"id":47877,"depth":546,"text":47878,"children":53365},[53366,53367,53368],{"id":48070,"depth":676,"text":48071},{"id":48233,"depth":676,"text":48234},{"id":48494,"depth":676,"text":48495},{"id":39243,"depth":546,"text":39244},{"id":50590,"depth":546,"text":53371,"children":53372},"Using \u003CTransition>",[53373],{"id":52253,"depth":676,"text":53374},"Using iframes",{"id":893,"depth":546,"text":894},{"id":7741,"depth":546,"text":7742},{"id":52871,"depth":546,"text":52872},{"id":52956,"depth":546,"text":52957},{"id":53339,"depth":546,"text":7742},"Allows you put DOM elements in your Tres.js scene.",{},{"title":413,"description":53380},"ywp4dBumrlkuSeTPICaWKzd__5F5_TaWhwF0rVH0VWc",{"id":53385,"title":417,"body":53386,"description":54002,"extension":559,"links":560,"meta":54003,"navigation":562,"path":418,"seo":54004,"stem":419,"__hash__":54005},"docs/2.api/9.objects/image.md",{"type":469,"value":53387,"toc":53997},[53388,53393,53399,53401,53595,53597,53604,53812,53814,53837,53995],[576,53389,53390],{},[53391,53392],"objects-image",{},[582,53394,53395,53398],{},[586,53396,53397],{},"\u003CImage />"," is a shader-based component that optionally loads then displays an image texture on a default plane or on your custom geometry.",[472,53400,15],{"id":592},[594,53402,53405],{"className":596,"code":53403,"highlights":53404,"language":601,"meta":544,"style":544},"\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",[676,768,773,799],[586,53406,53407,53427,53445,53465,53473,53477,53485,53493,53525,53529,53537,53552,53575,53579,53587],{"__ignoreMap":544},[605,53408,53409,53411,53413,53415,53417,53419,53421,53423,53425],{"class":607,"line":545},[605,53410,611],{"class":610},[605,53412,615],{"class":614},[605,53414,619],{"class":618},[605,53416,622],{"class":618},[605,53418,625],{"class":610},[605,53420,628],{"class":610},[605,53422,632],{"class":631},[605,53424,628],{"class":610},[605,53426,637],{"class":610},[605,53428,53429,53431,53433,53435,53437,53439,53441,53443],{"class":607,"line":546},[605,53430,645],{"class":644},[605,53432,648],{"class":610},[605,53434,683],{"class":651},[605,53436,661],{"class":610},[605,53438,664],{"class":644},[605,53440,667],{"class":610},[605,53442,692],{"class":631},[605,53444,673],{"class":610},[605,53446,53448,53450,53452,53455,53457,53459,53461,53463],{"class":53447,"line":676},[607,641],[605,53449,645],{"class":644},[605,53451,648],{"class":610},[605,53453,53454],{"class":651}," Image",[605,53456,661],{"class":610},[605,53458,664],{"class":644},[605,53460,667],{"class":610},[605,53462,670],{"class":631},[605,53464,673],{"class":610},[605,53466,53467,53469,53471],{"class":607,"line":697},[605,53468,700],{"class":610},[605,53470,615],{"class":614},[605,53472,637],{"class":610},[605,53474,53475],{"class":607,"line":707},[605,53476,710],{"emptyLinePlaceholder":562},[605,53478,53479,53481,53483],{"class":607,"line":713},[605,53480,611],{"class":610},[605,53482,718],{"class":614},[605,53484,637],{"class":610},[605,53486,53487,53489,53491],{"class":607,"line":723},[605,53488,726],{"class":610},[605,53490,729],{"class":614},[605,53492,637],{"class":610},[605,53494,53495,53497,53499,53501,53503,53505,53507,53509,53511,53513,53515,53517,53519,53521,53523],{"class":607,"line":746},[605,53496,749],{"class":610},[605,53498,752],{"class":614},[605,53500,781],{"class":610},[605,53502,1459],{"class":618},[605,53504,625],{"class":610},[605,53506,628],{"class":610},[605,53508,1466],{"class":610},[605,53510,937],{"class":791},[605,53512,1471],{"class":610},[605,53514,937],{"class":791},[605,53516,1471],{"class":610},[605,53518,2396],{"class":791},[605,53520,1481],{"class":610},[605,53522,628],{"class":610},[605,53524,755],{"class":610},[605,53526,53527],{"class":607,"line":758},[605,53528,710],{"emptyLinePlaceholder":562},[605,53530,53532,53534],{"class":53531,"line":768},[607,641],[605,53533,749],{"class":610},[605,53535,53536],{"class":614},"Image\n",[605,53538,53540,53543,53545,53547,53550],{"class":53539,"line":773},[607,641],[605,53541,53542],{"class":618},"      url",[605,53544,625],{"class":610},[605,53546,628],{"class":610},[605,53548,53549],{"class":631},"https://upload.wikimedia.org/wikipedia/commons/f/f0/Cyanistes_caeruleus_Oulu_20150516.JPG",[605,53551,2987],{"class":610},[605,53553,53555,53557,53559,53561,53563,53565,53567,53569,53571,53573],{"class":53554,"line":799},[607,641],[605,53556,5693],{"class":610},[605,53558,784],{"class":618},[605,53560,625],{"class":610},[605,53562,628],{"class":610},[605,53564,1466],{"class":610},[605,53566,792],{"class":791},[605,53568,1471],{"class":610},[605,53570,792],{"class":791},[605,53572,1481],{"class":610},[605,53574,2987],{"class":610},[605,53576,53577],{"class":607,"line":599},[605,53578,10816],{"class":610},[605,53580,53581,53583,53585],{"class":607,"line":822},[605,53582,877],{"class":610},[605,53584,729],{"class":614},[605,53586,637],{"class":610},[605,53588,53589,53591,53593],{"class":607,"line":833},[605,53590,700],{"class":610},[605,53592,718],{"class":614},[605,53594,637],{"class":610},[472,53596,894],{"id":893},[3725,53598,53599],{},[582,53600,53601,53603],{},[586,53602,53397],{}," is a THREE.Mesh and most Mesh attributes can be used as props on the component.",[899,53605,53606,53616],{},[902,53607,53608],{},[905,53609,53610,53612,53614],{},[908,53611,910],{"align":969},[908,53613,913],{"align":969},[908,53615,916],{},[918,53617,53618,53631,53647,53660,53674,53690,53704,53722,53740,53755,53771,53789,53800],{},[905,53619,53620,53624,53627],{},[923,53621,53622],{"align":969},[586,53623,23357],{},[923,53625,53626],{"align":969},"Number of divisions in the default geometry.",[923,53628,53629],{},[586,53630,1893],{},[905,53632,53633,53637,53643],{},[923,53634,53635],{"align":969},[586,53636,784],{},[923,53638,53639,53640],{"align":969},"Scale of the geometry. ",[586,53641,53642],{},"number | [number, number]",[923,53644,53645],{},[586,53646,1893],{},[905,53648,53649,53653,53656],{},[923,53650,53651],{"align":969},[586,53652,2500],{},[923,53654,53655],{"align":969},"Color multiplied into the image texture.",[923,53657,53658],{},[586,53659,23542],{},[905,53661,53662,53667,53670],{},[923,53663,53664],{"align":969},[586,53665,53666],{},"zoom",[923,53668,53669],{"align":969},"Shrinks or enlarges the image texture.",[923,53671,53672],{},[586,53673,1893],{},[905,53675,53676,53680,53686],{},[923,53677,53678],{"align":969},[586,53679,36008],{},[923,53681,53682,53683,53685],{"align":969},"Border radius applied to the image texture. (Intended for rectangular geometries. Use with ",[586,53684,4873],{},".)",[923,53687,53688],{},[586,53689,937],{},[905,53691,53692,53697,53700],{},[923,53693,53694],{"align":969},[586,53695,53696],{},"grayscale",[923,53698,53699],{"align":969},"Power of grayscale effect. 0 is off. 1 is full grayscale.",[923,53701,53702],{},[586,53703,937],{},[905,53705,53706,53710,53718],{},[923,53707,53708],{"align":969},[586,53709,32526],{},[923,53711,53712,53713],{"align":969},"Whether this material is tone mapped according to the renderers toneMapping settings. ",[1112,53714,53717],{"href":53715,"rel":53716},"https://threejs.org/docs/?q=material#api/en/materials/Material.toneMapped",[1116],"See THREE.material.tonemapped",[923,53719,53720],{},[586,53721,937],{},[905,53723,53724,53728,53736],{},[923,53725,53726],{"align":969},[586,53727,4873],{},[923,53729,53730,53731],{"align":969},"Whether the image material should be transparent. ",[1112,53732,53735],{"href":53733,"rel":53734},"https://threejs.org/docs/?q=material#api/en/materials/Material.transparent",[1116],"See THREE.material.transparent",[923,53737,53738],{},[586,53739,943],{},[905,53741,53742,53746,53751],{},[923,53743,53744],{"align":969},[586,53745,4873],{},[923,53747,53730,53748],{"align":969},[1112,53749,53735],{"href":53733,"rel":53750},[1116],[923,53752,53753],{},[586,53754,943],{},[905,53756,53757,53761,53767],{},[923,53758,53759],{"align":969},[586,53760,4861],{},[923,53762,53763,53764],{"align":969},"Opacity of the image material. ",[1112,53765,53735],{"href":53733,"rel":53766},[1116],[923,53768,53769],{},[586,53770,1893],{},[905,53772,53773,53777,53785],{},[923,53774,53775],{"align":969},[586,53776,19976],{},[923,53778,53779,53780],{"align":969},"THREE.Side of the image material. ",[1112,53781,53784],{"href":53782,"rel":53783},"https://threejs.org/docs/?q=material#api/en/materials/Material.side",[1116],"See THREE.material.side",[923,53786,53787],{},[586,53788,21204],{},[905,53790,53791,53795,53798],{},[923,53792,53793],{"align":969},[586,53794,13433],{},[923,53796,53797],{"align":969},"Image texture to display on the geometry.",[923,53799],{},[905,53801,53802,53807,53810],{},[923,53803,53804],{"align":969},[586,53805,53806],{},"url",[923,53808,53809],{"align":969},"Image URL to load and display on the geometry.",[923,53811],{},[472,53813,52957],{"id":52956},[582,53815,53816,53817,53819,53820,53823,53824,53826,53827,53830,53831,10149,53834,45262],{},"By default, images loaded via the ",[586,53818,53806],{}," prop use the renderer’s output color space. For advanced control, pass a ",[586,53821,53822],{},"THREE.Texture"," via the ",[586,53825,13433],{}," prop and set its ",[586,53828,53829],{},"colorSpace"," (e.g., ",[586,53832,53833],{},"THREE.SRGBColorSpace",[586,53835,53836],{},"THREE.LinearSRGBColorSpace",[594,53838,53840],{"className":596,"code":53839,"language":601,"meta":544,"style":544},"\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",[586,53841,53842,53852,53870,53888,53906,53925,53941,53947,53955,53959,53967,53987],{"__ignoreMap":544},[605,53843,53844,53846,53848,53850],{"class":607,"line":545},[605,53845,611],{"class":610},[605,53847,615],{"class":614},[605,53849,619],{"class":618},[605,53851,637],{"class":610},[605,53853,53854,53856,53858,53860,53862,53864,53866,53868],{"class":607,"line":546},[605,53855,645],{"class":644},[605,53857,648],{"class":610},[605,53859,13331],{"class":651},[605,53861,661],{"class":610},[605,53863,664],{"class":644},[605,53865,667],{"class":610},[605,53867,670],{"class":631},[605,53869,673],{"class":610},[605,53871,53872,53874,53876,53878,53880,53882,53884,53886],{"class":607,"line":676},[605,53873,645],{"class":644},[605,53875,648],{"class":610},[605,53877,37912],{"class":651},[605,53879,661],{"class":610},[605,53881,664],{"class":644},[605,53883,667],{"class":610},[605,53885,2678],{"class":631},[605,53887,673],{"class":610},[605,53889,53890,53892,53894,53897,53899,53901,53903],{"class":607,"line":697},[605,53891,2689],{"class":618},[605,53893,648],{"class":610},[605,53895,53896],{"class":651}," state ",[605,53898,5544],{"class":610},[605,53900,2766],{"class":610},[605,53902,13331],{"class":2800},[605,53904,53905],{"class":651},"(URL)\n",[605,53907,53908,53910,53913,53915,53917,53919,53921,53923],{"class":607,"line":707},[605,53909,5485],{"class":2800},[605,53911,53912],{"class":651},"(state",[605,53914,655],{"class":610},[605,53916,2713],{"class":610},[605,53918,13433],{"class":5495},[605,53920,4125],{"class":610},[605,53922,5501],{"class":618},[605,53924,1176],{"class":610},[605,53926,53927,53930,53932,53934,53936,53938],{"class":607,"line":713},[605,53928,53929],{"class":651},"  texture",[605,53931,1118],{"class":610},[605,53933,53829],{"class":651},[605,53935,2766],{"class":610},[605,53937,37912],{"class":651},[605,53939,53940],{"class":1181}," // assign a custom color space\n",[605,53942,53943,53945],{"class":607,"line":723},[605,53944,5544],{"class":610},[605,53946,5539],{"class":651},[605,53948,53949,53951,53953],{"class":607,"line":746},[605,53950,700],{"class":610},[605,53952,615],{"class":614},[605,53954,637],{"class":610},[605,53956,53957],{"class":607,"line":758},[605,53958,710],{"emptyLinePlaceholder":562},[605,53960,53961,53963,53965],{"class":607,"line":768},[605,53962,611],{"class":610},[605,53964,718],{"class":614},[605,53966,637],{"class":610},[605,53968,53969,53971,53973,53975,53977,53979,53981,53983,53985],{"class":607,"line":773},[605,53970,726],{"class":610},[605,53972,417],{"class":614},[605,53974,781],{"class":610},[605,53976,13433],{"class":618},[605,53978,625],{"class":610},[605,53980,628],{"class":610},[605,53982,13433],{"class":651},[605,53984,628],{"class":610},[605,53986,755],{"class":610},[605,53988,53989,53991,53993],{"class":607,"line":799},[605,53990,700],{"class":610},[605,53992,718],{"class":614},[605,53994,637],{"class":610},[1299,53996,20734],{},{"title":544,"searchDepth":545,"depth":546,"links":53998},[53999,54000,54001],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},{"id":52956,"depth":546,"text":52957},"Display image textures with shader-based effects.",{},{"title":417,"description":54002},"jEAPHxilh9_Gg2oZg9-kp8JsJ1tSjkYRBYlGbuY9YbM",{"id":54007,"title":421,"body":54008,"description":54843,"extension":559,"links":560,"meta":54844,"navigation":562,"path":422,"seo":54845,"stem":423,"__hash__":54846},"docs/2.api/9.objects/marching-cubes.md",{"type":469,"value":54009,"toc":54837},[54010,54015,54026,54029,54054,54056,54650,54652,54722,54726,54771,54775,54834],[576,54011,54012],{},[54013,54014],"objects-marching-cubes",{},[582,54016,54017,54020,54021,1118],{},[586,54018,54019],{},"\u003CMarchingCubes />"," is a wrapper around ",[1112,54022,54025],{"href":54023,"rel":54024},"https://threejs.org/examples/#webgl_marchingcubes",[1116],"THREE's Marching Cubes",[582,54027,54028],{},"It includes 3 components:",[3136,54030,54031,54044,54049],{},[3139,54032,54033,54035,54036,54039,54040,54043],{},[586,54034,54019],{}," – container element for ",[586,54037,54038],{},"\u003CMarchingCube />","s and ",[586,54041,54042],{},"\u003CMarchingPlane />","s",[3139,54045,54046,54048],{},[586,54047,54038],{}," - an individual metaball",[3139,54050,54051,54053],{},[586,54052,54042],{}," – optional bounding plane that interacts with the metaballs",[472,54055,15],{"id":592},[594,54057,54060],{"className":596,"code":54058,"highlights":54059,"language":601,"meta":544,"style":544},"\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",[546,833,844,854,600,874,884,2952,2960,2990],[586,54061,54062,54082,54116,54134,54157,54161,54194,54253,54261,54265,54273,54305,54313,54321,54325,54360,54381,54389,54411,54426,54441,54446,54504,54513,54517,54525,54580,54634,54642],{"__ignoreMap":544},[605,54063,54064,54066,54068,54070,54072,54074,54076,54078,54080],{"class":607,"line":545},[605,54065,611],{"class":610},[605,54067,615],{"class":614},[605,54069,619],{"class":618},[605,54071,622],{"class":618},[605,54073,625],{"class":610},[605,54075,628],{"class":610},[605,54077,632],{"class":631},[605,54079,628],{"class":610},[605,54081,637],{"class":610},[605,54083,54085,54087,54089,54092,54094,54097,54099,54102,54104,54106,54108,54110,54112,54114],{"class":54084,"line":546},[607,641],[605,54086,645],{"class":644},[605,54088,648],{"class":610},[605,54090,54091],{"class":651}," MarchingCube",[605,54093,655],{"class":610},[605,54095,54096],{"class":651}," MarchingCubes",[605,54098,655],{"class":610},[605,54100,54101],{"class":651}," MarchingPlane",[605,54103,655],{"class":610},[605,54105,658],{"class":651},[605,54107,661],{"class":610},[605,54109,664],{"class":644},[605,54111,667],{"class":610},[605,54113,670],{"class":631},[605,54115,673],{"class":610},[605,54117,54118,54120,54122,54124,54126,54128,54130,54132],{"class":607,"line":676},[605,54119,645],{"class":644},[605,54121,648],{"class":610},[605,54123,683],{"class":651},[605,54125,661],{"class":610},[605,54127,664],{"class":644},[605,54129,667],{"class":610},[605,54131,692],{"class":631},[605,54133,673],{"class":610},[605,54135,54136,54138,54140,54143,54145,54147,54149,54151,54153,54155],{"class":607,"line":697},[605,54137,645],{"class":644},[605,54139,648],{"class":610},[605,54141,54142],{"class":651}," NoToneMapping",[605,54144,655],{"class":610},[605,54146,23203],{"class":651},[605,54148,661],{"class":610},[605,54150,664],{"class":644},[605,54152,667],{"class":610},[605,54154,2678],{"class":631},[605,54156,673],{"class":610},[605,54158,54159],{"class":607,"line":707},[605,54160,710],{"emptyLinePlaceholder":562},[605,54162,54163,54165,54168,54170,54172,54174,54177,54179,54181,54183,54185,54187,54189,54191],{"class":607,"line":713},[605,54164,2689],{"class":618},[605,54166,54167],{"class":651}," rand ",[605,54169,625],{"class":610},[605,54171,51232],{"class":610},[605,54173,5501],{"class":618},[605,54175,54176],{"class":651}," (Math",[605,54178,1118],{"class":610},[605,54180,51176],{"class":2800},[605,54182,51179],{"class":651},[605,54184,4088],{"class":610},[605,54186,35512],{"class":791},[605,54188,2748],{"class":651},[605,54190,16566],{"class":610},[605,54192,54193],{"class":791}," 1.25\n",[605,54195,54196,54198,54201,54203,54206,54208,54210,54212,54214,54217,54219,54222,54224,54226,54228,54230,54232,54234,54237,54239,54241,54244,54246,54248,54250],{"class":607,"line":723},[605,54197,2689],{"class":618},[605,54199,54200],{"class":651}," positions ",[605,54202,625],{"class":610},[605,54204,54205],{"class":651}," Array",[605,54207,1118],{"class":610},[605,54209,10669],{"class":2800},[605,54211,2970],{"class":651},[605,54213,34746],{"class":610},[605,54215,54216],{"class":614}," length",[605,54218,1190],{"class":610},[605,54220,54221],{"class":791}," 40",[605,54223,34759],{"class":610},[605,54225,51232],{"class":610},[605,54227,5501],{"class":618},[605,54229,2841],{"class":610},[605,54231,23203],{"class":2800},[605,54233,2970],{"class":651},[605,54235,54236],{"class":2800},"rand",[605,54238,14395],{"class":651},[605,54240,655],{"class":610},[605,54242,54243],{"class":2800}," rand",[605,54245,14395],{"class":651},[605,54247,655],{"class":610},[605,54249,54243],{"class":2800},[605,54251,54252],{"class":651},"()))\n",[605,54254,54255,54257,54259],{"class":607,"line":746},[605,54256,700],{"class":610},[605,54258,615],{"class":614},[605,54260,637],{"class":610},[605,54262,54263],{"class":607,"line":758},[605,54264,710],{"emptyLinePlaceholder":562},[605,54266,54267,54269,54271],{"class":607,"line":768},[605,54268,611],{"class":610},[605,54270,718],{"class":614},[605,54272,637],{"class":610},[605,54274,54275,54277,54279,54281,54283,54285,54287,54289,54291,54294,54296,54298,54301,54303],{"class":607,"line":773},[605,54276,726],{"class":610},[605,54278,729],{"class":614},[605,54280,732],{"class":618},[605,54282,625],{"class":610},[605,54284,628],{"class":610},[605,54286,739],{"class":631},[605,54288,628],{"class":610},[605,54290,781],{"class":610},[605,54292,54293],{"class":618},"tone-mapping",[605,54295,625],{"class":610},[605,54297,628],{"class":610},[605,54299,54300],{"class":651},"NoToneMapping",[605,54302,628],{"class":610},[605,54304,637],{"class":610},[605,54306,54307,54309,54311],{"class":607,"line":799},[605,54308,749],{"class":610},[605,54310,752],{"class":614},[605,54312,755],{"class":610},[605,54314,54315,54317,54319],{"class":607,"line":599},[605,54316,749],{"class":610},[605,54318,763],{"class":614},[605,54320,755],{"class":610},[605,54322,54323],{"class":607,"line":822},[605,54324,710],{"emptyLinePlaceholder":562},[605,54326,54328,54330,54332,54334,54336,54338,54340,54342,54344,54346,54349,54351,54353,54356,54358],{"class":54327,"line":833},[607,641],[605,54329,749],{"class":610},[605,54331,421],{"class":614},[605,54333,781],{"class":610},[605,54335,21937],{"class":618},[605,54337,625],{"class":610},[605,54339,628],{"class":610},[605,54341,28007],{"class":791},[605,54343,628],{"class":610},[605,54345,781],{"class":610},[605,54347,54348],{"class":618},"max-poly-count",[605,54350,625],{"class":610},[605,54352,628],{"class":610},[605,54354,54355],{"class":791},"40000",[605,54357,628],{"class":610},[605,54359,637],{"class":610},[605,54361,54363,54365,54368,54371,54373,54375,54377,54379],{"class":54362,"line":844},[607,641],[605,54364,825],{"class":610},[605,54366,54367],{"class":614},"MarchingPlane",[605,54369,54370],{"class":618}," plane-type",[605,54372,625],{"class":610},[605,54374,628],{"class":610},[605,54376,32772],{"class":631},[605,54378,628],{"class":610},[605,54380,755],{"class":610},[605,54382,54384,54386],{"class":54383,"line":854},[607,641],[605,54385,825],{"class":610},[605,54387,54388],{"class":614},"MarchingCube\n",[605,54390,54392,54394,54396,54398,54400,54402,54404,54407,54409],{"class":54391,"line":600},[607,641],[605,54393,2963],{"class":644},[605,54395,625],{"class":610},[605,54397,628],{"class":610},[605,54399,1459],{"class":651},[605,54401,1471],{"class":610},[605,54403,18708],{"class":651},[605,54405,54406],{"class":610}," of ",[605,54408,2984],{"class":651},[605,54410,2987],{"class":610},[605,54412,54414,54416,54418,54420,54422,54424],{"class":54413,"line":874},[607,641],[605,54415,2993],{"class":610},[605,54417,2996],{"class":618},[605,54419,625],{"class":610},[605,54421,628],{"class":610},[605,54423,18708],{"class":651},[605,54425,2987],{"class":610},[605,54427,54429,54431,54433,54435,54437,54439],{"class":54428,"line":884},[607,641],[605,54430,2993],{"class":610},[605,54432,1459],{"class":618},[605,54434,625],{"class":610},[605,54436,628],{"class":610},[605,54438,1459],{"class":651},[605,54440,2987],{"class":610},[605,54442,54444],{"class":54443,"line":2952},[607,641],[605,54445,3050],{"class":610},[605,54447,54449,54451,54453,54456,54458,54460,54463,54465,54467,54470,54472,54474,54476,54478,54480,54482,54484,54487,54489,54491,54494,54496,54498,54500,54502],{"class":54448,"line":2960},[607,641],[605,54450,825],{"class":610},[605,54452,4664],{"class":614},[605,54454,54455],{"class":618}," specular",[605,54457,625],{"class":610},[605,54459,628],{"class":610},[605,54461,54462],{"class":631},"#111111",[605,54464,628],{"class":610},[605,54466,781],{"class":610},[605,54468,54469],{"class":618},"shininess",[605,54471,625],{"class":610},[605,54473,628],{"class":610},[605,54475,21690],{"class":791},[605,54477,628],{"class":610},[605,54479,3978],{"class":618},[605,54481,625],{"class":610},[605,54483,628],{"class":610},[605,54485,54486],{"class":631},"#049ef4",[605,54488,628],{"class":610},[605,54490,781],{"class":610},[605,54492,54493],{"class":618},"reflectivity",[605,54495,625],{"class":610},[605,54497,628],{"class":610},[605,54499,1893],{"class":791},[605,54501,628],{"class":610},[605,54503,755],{"class":610},[605,54505,54507,54509,54511],{"class":54506,"line":2990},[607,641],[605,54508,867],{"class":610},[605,54510,421],{"class":614},[605,54512,637],{"class":610},[605,54514,54515],{"class":607,"line":3007},[605,54516,710],{"emptyLinePlaceholder":562},[605,54518,54519,54521,54523],{"class":607,"line":3022},[605,54520,749],{"class":610},[605,54522,778],{"class":614},[605,54524,755],{"class":610},[605,54526,54527,54529,54531,54533,54535,54537,54540,54542,54544,54546,54548,54550,54552,54554,54556,54558,54560,54562,54564,54566,54568,54570,54572,54574,54576,54578],{"class":607,"line":3047},[605,54528,749],{"class":610},[605,54530,3539],{"class":614},[605,54532,3978],{"class":618},[605,54534,625],{"class":610},[605,54536,628],{"class":610},[605,54538,54539],{"class":631},"#ffffff",[605,54541,628],{"class":610},[605,54543,781],{"class":610},[605,54545,1886],{"class":618},[605,54547,625],{"class":610},[605,54549,628],{"class":610},[605,54551,4160],{"class":791},[605,54553,628],{"class":610},[605,54555,781],{"class":610},[605,54557,1459],{"class":618},[605,54559,625],{"class":610},[605,54561,628],{"class":610},[605,54563,1466],{"class":610},[605,54565,937],{"class":791},[605,54567,1471],{"class":610},[605,54569,40794],{"class":791},[605,54571,1471],{"class":610},[605,54573,937],{"class":791},[605,54575,1481],{"class":610},[605,54577,628],{"class":610},[605,54579,755],{"class":610},[605,54581,54582,54584,54586,54588,54590,54592,54594,54596,54598,54600,54602,54604,54606,54608,54610,54612,54614,54616,54618,54620,54622,54624,54626,54628,54630,54632],{"class":607,"line":2591},[605,54583,749],{"class":610},[605,54585,3539],{"class":614},[605,54587,3978],{"class":618},[605,54589,625],{"class":610},[605,54591,628],{"class":610},[605,54593,54539],{"class":631},[605,54595,628],{"class":610},[605,54597,781],{"class":610},[605,54599,1886],{"class":618},[605,54601,625],{"class":610},[605,54603,628],{"class":610},[605,54605,4160],{"class":791},[605,54607,628],{"class":610},[605,54609,781],{"class":610},[605,54611,1459],{"class":618},[605,54613,625],{"class":610},[605,54615,628],{"class":610},[605,54617,1466],{"class":610},[605,54619,6028],{"class":791},[605,54621,1471],{"class":610},[605,54623,40794],{"class":791},[605,54625,1471],{"class":610},[605,54627,6028],{"class":791},[605,54629,1481],{"class":610},[605,54631,628],{"class":610},[605,54633,755],{"class":610},[605,54635,54636,54638,54640],{"class":607,"line":3062},[605,54637,877],{"class":610},[605,54639,729],{"class":614},[605,54641,637],{"class":610},[605,54643,54644,54646,54648],{"class":607,"line":3092},[605,54645,700],{"class":610},[605,54647,718],{"class":614},[605,54649,637],{"class":610},[472,54651,894],{"id":893},[899,54653,54654,54664],{},[902,54655,54656],{},[905,54657,54658,54660,54662],{},[908,54659,910],{"align":969},[908,54661,913],{"align":969},[908,54663,916],{},[918,54665,54666,54679,54694,54708],{},[905,54667,54668,54672,54675],{},[923,54669,54670],{"align":969},[586,54671,21937],{},[923,54673,54674],{"align":969},"Resolution of the marching cube field. Higher resolution produces smoother meshes at the cost of performance and memory.",[923,54676,54677],{},[586,54678,49507],{},[905,54680,54681,54686,54689],{},[923,54682,54683],{"align":969},[586,54684,54685],{},"maxPolyCount",[923,54687,54688],{"align":969},"Maximum number of polygons to generate.",[923,54690,54691],{},[586,54692,54693],{},"10000",[905,54695,54696,54701,54704],{},[923,54697,54698],{"align":969},[586,54699,54700],{},"enableUvs",[923,54702,54703],{"align":969},"Whether UVs are enabled.",[923,54705,54706],{},[586,54707,943],{},[905,54709,54710,54715,54718],{},[923,54711,54712],{"align":969},[586,54713,54714],{},"enableColors",[923,54716,54717],{"align":969},"Whether vertex colors are enabled.",[923,54719,54720],{},[586,54721,943],{},[472,54723,54725],{"id":54724},"marchingcube-props","MarchingCube Props",[899,54727,54728,54738],{},[902,54729,54730],{},[905,54731,54732,54734,54736],{},[908,54733,910],{"align":969},[908,54735,913],{"align":969},[908,54737,916],{},[918,54739,54740,54754],{},[905,54741,54742,54747,54750],{},[923,54743,54744],{"align":969},[586,54745,54746],{},"strength",[923,54748,54749],{"align":969},"How strongly this cube affects the marching cube field.",[923,54751,54752],{},[586,54753,1513],{},[905,54755,54756,54761,54767],{},[923,54757,54758],{"align":969},[586,54759,54760],{},"subtract",[923,54762,54763,54764,54766],{"align":969},"How quickly strength moves to ",[586,54765,937],{}," over distance.",[923,54768,54769],{},[586,54770,25240],{},[472,54772,54774],{"id":54773},"marchingplane-props","MarchingPlane Props",[899,54776,54777,54787],{},[902,54778,54779],{},[905,54780,54781,54783,54785],{},[908,54782,910],{"align":969},[908,54784,913],{"align":969},[908,54786,916],{},[918,54788,54789,54807,54820],{},[905,54790,54791,54796,54802],{},[923,54792,54793],{"align":969},[586,54794,54795],{},"planeType",[923,54797,54798,54799],{"align":969},"Which axis the plane appears on. ",[586,54800,54801],{},"'x' | 'y' | 'z'",[923,54803,54804],{},[586,54805,54806],{},"'x'",[905,54808,54809,54813,54816],{},[923,54810,54811],{"align":969},[586,54812,54746],{},[923,54814,54815],{"align":969},"How strongly this plane affects the marching cube field.",[923,54817,54818],{},[586,54819,1513],{},[905,54821,54822,54826,54830],{},[923,54823,54824],{"align":969},[586,54825,54760],{},[923,54827,54763,54828,54766],{"align":969},[586,54829,937],{},[923,54831,54832],{},[586,54833,25240],{},[1299,54835,54836],{},"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":544,"searchDepth":545,"depth":546,"links":54838},[54839,54840,54841,54842],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},{"id":54724,"depth":546,"text":54725},{"id":54773,"depth":546,"text":54774},"Create organic blob-like shapes using metaballs.",{},{"title":421,"description":54843},"dt9UUvCiy--PP6CSMtwwdcksel8iajosft8nxTQtolk",{"id":54848,"title":425,"body":54849,"description":55845,"extension":559,"links":560,"meta":55846,"navigation":562,"path":426,"seo":55847,"stem":427,"__hash__":55848},"docs/2.api/9.objects/reflector.md",{"type":469,"value":54850,"toc":55838},[54851,54856,54870,54872,55135,55137,55220,55228,55232,55235,55512,55515,55518,55522,55836],[576,54852,54853],{},[54854,54855],"objects-reflector",{},[582,54857,2253,54858,54860,54861,54866,54867,54869],{},[586,54859,2256],{}," package provides an abstraction of the ",[1112,54862,54865],{"href":54863,"rel":54864},"https://github.com/mrdoob/three.js/blob/dev/examples/jsm/objects/Reflector.js",[1116],"Reflector class",", which creates a Mesh showing a real-time reflection of your scene.  This Mesh extends from ",[586,54868,5299],{}," so all the default props can be passed as well:",[472,54871,15],{"id":592},[594,54873,54875],{"className":596,"code":54874,"language":601,"meta":544,"style":544},"\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",[586,54876,54877,54897,54916,54924,54928,54936,54949,54981,54989,54993,55001,55008,55042,55058,55071,55075,55103,55111,55119,55127],{"__ignoreMap":544},[605,54878,54879,54881,54883,54885,54887,54889,54891,54893,54895],{"class":607,"line":545},[605,54880,611],{"class":610},[605,54882,615],{"class":614},[605,54884,619],{"class":618},[605,54886,622],{"class":618},[605,54888,625],{"class":610},[605,54890,628],{"class":610},[605,54892,632],{"class":631},[605,54894,628],{"class":610},[605,54896,637],{"class":610},[605,54898,54899,54901,54903,54906,54908,54910,54912,54914],{"class":607,"line":546},[605,54900,645],{"class":644},[605,54902,648],{"class":610},[605,54904,54905],{"class":651}," Reflector",[605,54907,661],{"class":610},[605,54909,664],{"class":644},[605,54911,667],{"class":610},[605,54913,670],{"class":631},[605,54915,673],{"class":610},[605,54917,54918,54920,54922],{"class":607,"line":676},[605,54919,700],{"class":610},[605,54921,615],{"class":614},[605,54923,637],{"class":610},[605,54925,54926],{"class":607,"line":697},[605,54927,710],{"emptyLinePlaceholder":562},[605,54929,54930,54932,54934],{"class":607,"line":707},[605,54931,611],{"class":610},[605,54933,718],{"class":614},[605,54935,637],{"class":610},[605,54937,54938,54940,54942,54944,54947],{"class":607,"line":713},[605,54939,726],{"class":610},[605,54941,729],{"class":614},[605,54943,35793],{"class":618},[605,54945,54946],{"class":618}," alpha",[605,54948,637],{"class":610},[605,54950,54951,54953,54955,54957,54959,54961,54963,54965,54967,54969,54971,54973,54975,54977,54979],{"class":607,"line":723},[605,54952,749],{"class":610},[605,54954,752],{"class":614},[605,54956,781],{"class":610},[605,54958,1459],{"class":618},[605,54960,625],{"class":610},[605,54962,628],{"class":610},[605,54964,1466],{"class":610},[605,54966,937],{"class":791},[605,54968,1471],{"class":610},[605,54970,937],{"class":791},[605,54972,1471],{"class":610},[605,54974,4160],{"class":791},[605,54976,1481],{"class":610},[605,54978,628],{"class":610},[605,54980,755],{"class":610},[605,54982,54983,54985,54987],{"class":607,"line":746},[605,54984,749],{"class":610},[605,54986,763],{"class":614},[605,54988,755],{"class":610},[605,54990,54991],{"class":607,"line":758},[605,54992,710],{"emptyLinePlaceholder":562},[605,54994,54995,54997,54999],{"class":607,"line":768},[605,54996,749],{"class":610},[605,54998,14995],{"class":614},[605,55000,637],{"class":610},[605,55002,55003,55005],{"class":607,"line":773},[605,55004,825],{"class":610},[605,55006,55007],{"class":614},"Reflector\n",[605,55009,55010,55012,55014,55016,55018,55020,55022,55024,55026,55028,55030,55032,55034,55036,55038,55040],{"class":607,"line":799},[605,55011,2993],{"class":610},[605,55013,21584],{"class":618},[605,55015,625],{"class":610},[605,55017,628],{"class":610},[605,55019,15194],{"class":610},[605,55021,21593],{"class":651},[605,55023,1118],{"class":610},[605,55025,21598],{"class":651},[605,55027,49323],{"class":610},[605,55029,1513],{"class":791},[605,55031,1471],{"class":610},[605,55033,937],{"class":791},[605,55035,1471],{"class":610},[605,55037,937],{"class":791},[605,55039,1481],{"class":610},[605,55041,2987],{"class":610},[605,55043,55044,55046,55048,55050,55052,55054,55056],{"class":607,"line":599},[605,55045,2993],{"class":610},[605,55047,1968],{"class":618},[605,55049,625],{"class":610},[605,55051,628],{"class":610},[605,55053,4088],{"class":610},[605,55055,792],{"class":791},[605,55057,2987],{"class":610},[605,55059,55060,55062,55064,55066,55069],{"class":607,"line":822},[605,55061,21729],{"class":618},[605,55063,625],{"class":610},[605,55065,628],{"class":610},[605,55067,55068],{"class":631},"#fff",[605,55070,2987],{"class":610},[605,55072,55073],{"class":607,"line":833},[605,55074,47700],{"class":610},[605,55076,55077,55079,55081,55083,55085,55087,55089,55091,55093,55095,55097,55099,55101],{"class":607,"line":844},[605,55078,836],{"class":610},[605,55080,4027],{"class":614},[605,55082,781],{"class":610},[605,55084,1989],{"class":618},[605,55086,625],{"class":610},[605,55088,628],{"class":610},[605,55090,1466],{"class":610},[605,55092,1478],{"class":791},[605,55094,1471],{"class":610},[605,55096,1478],{"class":791},[605,55098,1481],{"class":610},[605,55100,628],{"class":610},[605,55102,755],{"class":610},[605,55104,55105,55107,55109],{"class":607,"line":854},[605,55106,857],{"class":610},[605,55108,425],{"class":614},[605,55110,637],{"class":610},[605,55112,55113,55115,55117],{"class":607,"line":600},[605,55114,867],{"class":610},[605,55116,14995],{"class":614},[605,55118,637],{"class":610},[605,55120,55121,55123,55125],{"class":607,"line":874},[605,55122,877],{"class":610},[605,55124,729],{"class":614},[605,55126,637],{"class":610},[605,55128,55129,55131,55133],{"class":607,"line":884},[605,55130,700],{"class":610},[605,55132,718],{"class":614},[605,55134,637],{"class":610},[472,55136,894],{"id":893},[899,55138,55139,55149],{},[902,55140,55141],{},[905,55142,55143,55145,55147],{},[908,55144,910],{"align":969},[908,55146,913],{"align":969},[908,55148,916],{},[918,55150,55151,55163,55174,55185,55196,55208],{},[905,55152,55153,55157,55160],{},[923,55154,55155],{"align":969},[1673,55156,2500],{},[923,55158,55159],{"align":969},"The base color that's combine with the mirror effect",[923,55161,55162],{},"'#333'",[905,55164,55165,55169,55172],{},[923,55166,55167],{"align":969},[1673,55168,39445],{},[923,55170,55171],{"align":969},"the width of the texture to render on the mirror",[923,55173,34066],{},[905,55175,55176,55180,55183],{},[923,55177,55178],{"align":969},[1673,55179,39457],{},[923,55181,55182],{"align":969},"the height of the texture to render on the mirror",[923,55184,34066],{},[905,55186,55187,55191,55194],{},[923,55188,55189],{"align":969},[1673,55190,39547],{},[923,55192,55193],{"align":969},"to use the clipBias property",[923,55195,937],{},[905,55197,55198,55203,55206],{},[923,55199,55200],{"align":969},[1673,55201,55202],{},"multisample",[923,55204,55205],{"align":969},"how many samplers will be render",[923,55207,3490],{},[905,55209,55210,55215,55217],{},[923,55211,55212],{"align":969},[1673,55213,55214],{},"shader",[923,55216,41366],{"align":969},[923,55218,55219],{},"Reflector.ReflectorShader",[3725,55221,55222],{},[582,55223,55224,55225,55227],{},"All the props except the ",[586,55226,2500],{},", are not reactive",[472,55229,55231],{"id":55230},"custom-mirror-effect","Custom mirror effect",[582,55233,55234],{},"For more complex effect you can provide your own shaders, you could do this creating an object and pass the uniforms, vertexShaders or fragmentShaders:",[594,55236,55238],{"className":596,"code":55237,"language":601,"meta":544,"style":544},"\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",[586,55239,55240,55260,55276,55280,55291,55296,55300,55308,55312,55320,55332,55364,55369,55375,55409,55425,55437,55452,55456,55484,55492,55496,55504],{"__ignoreMap":544},[605,55241,55242,55244,55246,55248,55250,55252,55254,55256,55258],{"class":607,"line":545},[605,55243,611],{"class":610},[605,55245,615],{"class":614},[605,55247,619],{"class":618},[605,55249,622],{"class":618},[605,55251,625],{"class":610},[605,55253,628],{"class":610},[605,55255,632],{"class":631},[605,55257,628],{"class":610},[605,55259,637],{"class":610},[605,55261,55262,55264,55267,55269,55271,55274],{"class":607,"line":546},[605,55263,645],{"class":644},[605,55265,55266],{"class":651}," vertexShader ",[605,55268,10669],{"class":644},[605,55270,667],{"class":610},[605,55272,55273],{"class":631},"MyCustomVertexShader.glsl",[605,55275,673],{"class":610},[605,55277,55278],{"class":607,"line":676},[605,55279,710],{"emptyLinePlaceholder":562},[605,55281,55282,55284,55287,55289],{"class":607,"line":697},[605,55283,2689],{"class":618},[605,55285,55286],{"class":651}," customShader ",[605,55288,625],{"class":610},[605,55290,1176],{"class":610},[605,55292,55293],{"class":607,"line":707},[605,55294,55295],{"class":651},"  vertexShader\n",[605,55297,55298],{"class":607,"line":713},[605,55299,1297],{"class":610},[605,55301,55302,55304,55306],{"class":607,"line":723},[605,55303,700],{"class":610},[605,55305,615],{"class":614},[605,55307,637],{"class":610},[605,55309,55310],{"class":607,"line":746},[605,55311,710],{"emptyLinePlaceholder":562},[605,55313,55314,55316,55318],{"class":607,"line":758},[605,55315,611],{"class":610},[605,55317,718],{"class":614},[605,55319,637],{"class":610},[605,55321,55322,55324,55326,55328,55330],{"class":607,"line":768},[605,55323,726],{"class":610},[605,55325,729],{"class":614},[605,55327,35793],{"class":618},[605,55329,54946],{"class":618},[605,55331,637],{"class":610},[605,55333,55334,55336,55338,55340,55342,55344,55346,55348,55350,55352,55354,55356,55358,55360,55362],{"class":607,"line":773},[605,55335,749],{"class":610},[605,55337,752],{"class":614},[605,55339,781],{"class":610},[605,55341,1459],{"class":618},[605,55343,625],{"class":610},[605,55345,628],{"class":610},[605,55347,1466],{"class":610},[605,55349,937],{"class":791},[605,55351,1471],{"class":610},[605,55353,937],{"class":791},[605,55355,1471],{"class":610},[605,55357,4160],{"class":791},[605,55359,1481],{"class":610},[605,55361,628],{"class":610},[605,55363,755],{"class":610},[605,55365,55366],{"class":607,"line":799},[605,55367,55368],{"class":651},"    ...\n",[605,55370,55371,55373],{"class":607,"line":599},[605,55372,749],{"class":610},[605,55374,55007],{"class":614},[605,55376,55377,55379,55381,55383,55385,55387,55389,55391,55393,55395,55397,55399,55401,55403,55405,55407],{"class":607,"line":822},[605,55378,5693],{"class":610},[605,55380,21584],{"class":618},[605,55382,625],{"class":610},[605,55384,628],{"class":610},[605,55386,15194],{"class":610},[605,55388,21593],{"class":651},[605,55390,1118],{"class":610},[605,55392,21598],{"class":651},[605,55394,49323],{"class":610},[605,55396,1513],{"class":791},[605,55398,1471],{"class":610},[605,55400,937],{"class":791},[605,55402,1471],{"class":610},[605,55404,937],{"class":791},[605,55406,1481],{"class":610},[605,55408,2987],{"class":610},[605,55410,55411,55413,55415,55417,55419,55421,55423],{"class":607,"line":833},[605,55412,5693],{"class":610},[605,55414,1968],{"class":618},[605,55416,625],{"class":610},[605,55418,628],{"class":610},[605,55420,4088],{"class":610},[605,55422,792],{"class":791},[605,55424,2987],{"class":610},[605,55426,55427,55429,55431,55433,55435],{"class":607,"line":844},[605,55428,23371],{"class":618},[605,55430,625],{"class":610},[605,55432,628],{"class":610},[605,55434,55068],{"class":631},[605,55436,2987],{"class":610},[605,55438,55439,55441,55443,55445,55447,55450],{"class":607,"line":854},[605,55440,5693],{"class":610},[605,55442,55214],{"class":618},[605,55444,625],{"class":610},[605,55446,628],{"class":610},[605,55448,55449],{"class":651},"customShader",[605,55451,2987],{"class":610},[605,55453,55454],{"class":607,"line":600},[605,55455,5713],{"class":610},[605,55457,55458,55460,55462,55464,55466,55468,55470,55472,55474,55476,55478,55480,55482],{"class":607,"line":874},[605,55459,825],{"class":610},[605,55461,4027],{"class":614},[605,55463,781],{"class":610},[605,55465,1989],{"class":618},[605,55467,625],{"class":610},[605,55469,628],{"class":610},[605,55471,1466],{"class":610},[605,55473,1478],{"class":791},[605,55475,1471],{"class":610},[605,55477,1478],{"class":791},[605,55479,1481],{"class":610},[605,55481,628],{"class":610},[605,55483,755],{"class":610},[605,55485,55486,55488,55490],{"class":607,"line":884},[605,55487,867],{"class":610},[605,55489,425],{"class":614},[605,55491,637],{"class":610},[605,55493,55494],{"class":607,"line":2952},[605,55495,55368],{"class":651},[605,55497,55498,55500,55502],{"class":607,"line":2960},[605,55499,877],{"class":610},[605,55501,729],{"class":614},[605,55503,637],{"class":610},[605,55505,55506,55508,55510],{"class":607,"line":2990},[605,55507,700],{"class":610},[605,55509,718],{"class":614},[605,55511,637],{"class":610},[582,55513,55514],{},"The Reflector shader use the following configuration by default:",[582,55516,55517],{},"You can extend, modify or just play with them",[7473,55519,55521],{"id":55520},"default-shader","Default shader",[594,55523,55525],{"className":35203,"code":55524,"language":35205,"meta":544,"style":544},"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",[586,55526,55527,55538,55554,55563,55571,55581,55586,55595,55603,55607,55616,55624,55629,55633,55645,55650,55655,55659,55664,55669,55673,55678,55683,55688,55692,55697,55701,55711,55722,55727,55732,55736,55740,55745,55749,55754,55759,55763,55767,55772,55777,55781,55785,55789,55794,55798,55803,55808,55812,55817,55822,55828,55832],{"__ignoreMap":544},[605,55528,55529,55531,55534,55536],{"class":607,"line":545},[605,55530,2689],{"class":618},[605,55532,55533],{"class":651}," shader ",[605,55535,625],{"class":610},[605,55537,1176],{"class":610},[605,55539,55540,55543,55545,55547,55550,55552],{"class":607,"line":546},[605,55541,55542],{"class":614},"  name",[605,55544,1190],{"class":610},[605,55546,667],{"class":610},[605,55548,55549],{"class":631},"ReflectorShader",[605,55551,5536],{"class":610},[605,55553,14031],{"class":610},[605,55555,55556,55559,55561],{"class":607,"line":676},[605,55557,55558],{"class":614},"  uniforms",[605,55560,1190],{"class":610},[605,55562,1176],{"class":610},[605,55564,55565,55567,55569],{"class":607,"line":697},[605,55566,17685],{"class":614},[605,55568,1190],{"class":610},[605,55570,1176],{"class":610},[605,55572,55573,55576,55578],{"class":607,"line":707},[605,55574,55575],{"class":614},"      value",[605,55577,1190],{"class":610},[605,55579,55580],{"class":610}," null\n",[605,55582,55583],{"class":607,"line":713},[605,55584,55585],{"class":610},"    },\n",[605,55587,55588,55591,55593],{"class":607,"line":723},[605,55589,55590],{"class":614},"    tDiffuse",[605,55592,1190],{"class":610},[605,55594,1176],{"class":610},[605,55596,55597,55599,55601],{"class":607,"line":746},[605,55598,55575],{"class":614},[605,55600,1190],{"class":610},[605,55602,55580],{"class":610},[605,55604,55605],{"class":607,"line":758},[605,55606,55585],{"class":610},[605,55608,55609,55612,55614],{"class":607,"line":768},[605,55610,55611],{"class":614},"    textureMatrix",[605,55613,1190],{"class":610},[605,55615,1176],{"class":610},[605,55617,55618,55620,55622],{"class":607,"line":773},[605,55619,55575],{"class":614},[605,55621,1190],{"class":610},[605,55623,55580],{"class":610},[605,55625,55626],{"class":607,"line":799},[605,55627,55628],{"class":610},"    }\n",[605,55630,55631],{"class":607,"line":599},[605,55632,17650],{"class":610},[605,55634,55635,55638,55640,55643],{"class":607,"line":822},[605,55636,55637],{"class":614},"  vertexShader",[605,55639,1190],{"class":610},[605,55641,55642],{"class":1181}," /* glsl */",[605,55644,16140],{"class":610},[605,55646,55647],{"class":607,"line":833},[605,55648,55649],{"class":631},"  uniform mat4 textureMatrix;\n",[605,55651,55652],{"class":607,"line":844},[605,55653,55654],{"class":631},"  varying vec4 vUv;\n",[605,55656,55657],{"class":607,"line":854},[605,55658,710],{"emptyLinePlaceholder":562},[605,55660,55661],{"class":607,"line":600},[605,55662,55663],{"class":631},"  #include \u003Ccommon>\n",[605,55665,55666],{"class":607,"line":874},[605,55667,55668],{"class":631},"  #include \u003Clogdepthbuf_pars_vertex>\n",[605,55670,55671],{"class":607,"line":884},[605,55672,710],{"emptyLinePlaceholder":562},[605,55674,55675],{"class":607,"line":2952},[605,55676,55677],{"class":631},"  void main() {\n",[605,55679,55680],{"class":607,"line":2960},[605,55681,55682],{"class":631},"    vUv = textureMatrix * vec4( position, 1.0 );\n",[605,55684,55685],{"class":607,"line":2990},[605,55686,55687],{"class":631},"    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n",[605,55689,55690],{"class":607,"line":3007},[605,55691,710],{"emptyLinePlaceholder":562},[605,55693,55694],{"class":607,"line":3022},[605,55695,55696],{"class":631},"    #include \u003Clogdepthbuf_vertex>\n",[605,55698,55699],{"class":607,"line":3047},[605,55700,710],{"emptyLinePlaceholder":562},[605,55702,55703,55706,55709],{"class":607,"line":2591},[605,55704,55705],{"class":631},"  }",[605,55707,55708],{"class":610},"`",[605,55710,14031],{"class":610},[605,55712,55713,55716,55718,55720],{"class":607,"line":3062},[605,55714,55715],{"class":614},"  fragmentShader",[605,55717,1190],{"class":610},[605,55719,55642],{"class":1181},[605,55721,16140],{"class":610},[605,55723,55724],{"class":607,"line":3092},[605,55725,55726],{"class":631},"  uniform vec3 color;\n",[605,55728,55729],{"class":607,"line":3101},[605,55730,55731],{"class":631},"  uniform sampler2D tDiffuse;\n",[605,55733,55734],{"class":607,"line":4207},[605,55735,55654],{"class":631},[605,55737,55738],{"class":607,"line":4212},[605,55739,710],{"emptyLinePlaceholder":562},[605,55741,55742],{"class":607,"line":4235},[605,55743,55744],{"class":631},"  #include \u003Clogdepthbuf_pars_fragment>\n",[605,55746,55747],{"class":607,"line":4244},[605,55748,710],{"emptyLinePlaceholder":562},[605,55750,55751],{"class":607,"line":4253},[605,55752,55753],{"class":631},"  float blendOverlay( float base, float blend ) {\n",[605,55755,55756],{"class":607,"line":4262},[605,55757,55758],{"class":631},"    return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n",[605,55760,55761],{"class":607,"line":4271},[605,55762,2825],{"class":631},[605,55764,55765],{"class":607,"line":14784},[605,55766,710],{"emptyLinePlaceholder":562},[605,55768,55769],{"class":607,"line":14799},[605,55770,55771],{"class":631},"  vec3 blendOverlay( vec3 base, vec3 blend ) {\n",[605,55773,55774],{"class":607,"line":14814},[605,55775,55776],{"class":631},"    return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n",[605,55778,55779],{"class":607,"line":14819},[605,55780,2825],{"class":631},[605,55782,55783],{"class":607,"line":14826},[605,55784,710],{"emptyLinePlaceholder":562},[605,55786,55787],{"class":607,"line":14831},[605,55788,55677],{"class":631},[605,55790,55791],{"class":607,"line":14837},[605,55792,55793],{"class":631},"    #include \u003Clogdepthbuf_fragment>\n",[605,55795,55796],{"class":607,"line":14858},[605,55797,710],{"emptyLinePlaceholder":562},[605,55799,55800],{"class":607,"line":14864},[605,55801,55802],{"class":631},"    vec4 base = texture2DProj( tDiffuse, vUv );\n",[605,55804,55805],{"class":607,"line":14871},[605,55806,55807],{"class":631},"    gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n",[605,55809,55810],{"class":607,"line":14876},[605,55811,710],{"emptyLinePlaceholder":562},[605,55813,55814],{"class":607,"line":14897},[605,55815,55816],{"class":631},"    #include \u003Ctonemapping_fragment>\n",[605,55818,55819],{"class":607,"line":14910},[605,55820,55821],{"class":631},"    #include \u003Ccolorspace_fragment>\n",[605,55823,55824,55826],{"class":607,"line":14936},[605,55825,55705],{"class":631},[605,55827,16140],{"class":610},[605,55829,55830],{"class":607,"line":14941},[605,55831,710],{"emptyLinePlaceholder":562},[605,55833,55834],{"class":607,"line":14948},[605,55835,1297],{"class":610},[1299,55837,26295],{},{"title":544,"searchDepth":545,"depth":546,"links":55839},[55840,55841,55842],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},{"id":55230,"depth":546,"text":55231,"children":55843},[55844],{"id":55520,"depth":676,"text":55521},"Create real-time reflections of your scene.",{},{"title":425,"description":55845},"24igh7rDYMu_PMUA2O2RSz3ThFBClmpHnB0dGe1M0hI",{"id":55850,"title":429,"body":55851,"description":56390,"extension":559,"links":560,"meta":56391,"navigation":562,"path":430,"seo":56392,"stem":431,"__hash__":56393},"docs/2.api/9.objects/text-3d.md",{"type":469,"value":55852,"toc":56386},[55853,55858,55869,55871,55890,55997,56012,56105,56108,56227,56229,56383],[576,55854,55855],{},[55856,55857],"objects-text",{},[582,55859,55860,55863,55864,29567],{},[586,55861,55862],{},"\u003CText3D />"," is a component that renders text in 3D. It is a wrapper around the ",[1112,55865,55868],{"href":55866,"rel":55867},"https://threejs.org/docs/#api/en/geometries/TextGeometry",[1116],"TextGeometry",[472,55870,15],{"id":592},[582,55872,55873,55874,55876,55877,55880,55881,55884,55885],{},"To use the ",[586,55875,55862],{}," component you need to pass the ",[586,55878,55879],{},"font"," prop with the URL of the font JSON file you want to use. TextGeometry uses ",[586,55882,55883],{},"typeface",".json generated fonts, you can generate yours ",[1112,55886,55889],{"href":55887,"rel":55888},"http://gero3.github.io/facetype.js/",[1116],"here",[594,55891,55893],{"className":596,"code":55892,"language":601,"meta":544,"style":544},"\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",[586,55894,55895,55903,55911,55919,55926,55939,55953,55957,55965,55973,55981,55989],{"__ignoreMap":544},[605,55896,55897,55899,55901],{"class":607,"line":545},[605,55898,611],{"class":610},[605,55900,718],{"class":614},[605,55902,637],{"class":610},[605,55904,55905,55907,55909],{"class":607,"line":546},[605,55906,726],{"class":610},[605,55908,729],{"class":614},[605,55910,637],{"class":610},[605,55912,55913,55915,55917],{"class":607,"line":676},[605,55914,749],{"class":610},[605,55916,14995],{"class":614},[605,55918,637],{"class":610},[605,55920,55921,55923],{"class":607,"line":697},[605,55922,825],{"class":610},[605,55924,55925],{"class":614},"Text3D\n",[605,55927,55928,55931,55933,55935,55937],{"class":607,"line":707},[605,55929,55930],{"class":618},"        text",[605,55932,625],{"class":610},[605,55934,628],{"class":610},[605,55936,10429],{"class":631},[605,55938,2987],{"class":610},[605,55940,55941,55944,55946,55948,55951],{"class":607,"line":713},[605,55942,55943],{"class":618},"        font",[605,55945,625],{"class":610},[605,55947,628],{"class":610},[605,55949,55950],{"class":631},"/fonts/FiraCodeRegular.json",[605,55952,2987],{"class":610},[605,55954,55955],{"class":607,"line":723},[605,55956,47700],{"class":610},[605,55958,55959,55961,55963],{"class":607,"line":746},[605,55960,836],{"class":610},[605,55962,849],{"class":614},[605,55964,755],{"class":610},[605,55966,55967,55969,55971],{"class":607,"line":758},[605,55968,857],{"class":610},[605,55970,429],{"class":614},[605,55972,637],{"class":610},[605,55974,55975,55977,55979],{"class":607,"line":768},[605,55976,867],{"class":610},[605,55978,14995],{"class":614},[605,55980,637],{"class":610},[605,55982,55983,55985,55987],{"class":607,"line":773},[605,55984,877],{"class":610},[605,55986,729],{"class":614},[605,55988,637],{"class":610},[605,55990,55991,55993,55995],{"class":607,"line":799},[605,55992,700],{"class":610},[605,55994,718],{"class":614},[605,55996,637],{"class":610},[582,55998,55999,56000,56003,56004,56006,56007,32024,56009,56011],{},"Notice that you need to pass the ",[586,56001,56002],{},"\u003CTresMeshNormalMaterial />"," component as a child of the ",[586,56005,55862],{}," component. This is because ",[586,56008,55862],{},[586,56010,5299],{}," 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:",[594,56013,56015],{"className":596,"code":56014,"language":601,"meta":544,"style":544},"\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",[586,56016,56017,56025,56033,56041,56060,56065,56073,56081,56089,56097],{"__ignoreMap":544},[605,56018,56019,56021,56023],{"class":607,"line":545},[605,56020,611],{"class":610},[605,56022,718],{"class":614},[605,56024,637],{"class":610},[605,56026,56027,56029,56031],{"class":607,"line":546},[605,56028,726],{"class":610},[605,56030,729],{"class":614},[605,56032,637],{"class":610},[605,56034,56035,56037,56039],{"class":607,"line":676},[605,56036,749],{"class":610},[605,56038,14995],{"class":614},[605,56040,637],{"class":610},[605,56042,56043,56045,56047,56050,56052,56054,56056,56058],{"class":607,"line":697},[605,56044,825],{"class":610},[605,56046,429],{"class":614},[605,56048,56049],{"class":618}," font",[605,56051,625],{"class":610},[605,56053,628],{"class":610},[605,56055,55950],{"class":631},[605,56057,628],{"class":610},[605,56059,637],{"class":610},[605,56061,56062],{"class":607,"line":707},[605,56063,56064],{"class":651},"        TresJS\n",[605,56066,56067,56069,56071],{"class":607,"line":713},[605,56068,836],{"class":610},[605,56070,849],{"class":614},[605,56072,755],{"class":610},[605,56074,56075,56077,56079],{"class":607,"line":723},[605,56076,857],{"class":610},[605,56078,429],{"class":614},[605,56080,637],{"class":610},[605,56082,56083,56085,56087],{"class":607,"line":746},[605,56084,867],{"class":610},[605,56086,14995],{"class":614},[605,56088,637],{"class":610},[605,56090,56091,56093,56095],{"class":607,"line":758},[605,56092,877],{"class":610},[605,56094,729],{"class":614},[605,56096,637],{"class":610},[605,56098,56099,56101,56103],{"class":607,"line":768},[605,56100,700],{"class":610},[605,56102,718],{"class":614},[605,56104,637],{"class":610},[582,56106,56107],{},"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",[594,56109,56111],{"className":596,"code":56110,"language":601,"meta":544,"style":544},"\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",[586,56112,56113,56121,56142,56150,56158,56164,56178,56190,56194,56199,56203,56211,56219],{"__ignoreMap":544},[605,56114,56115,56117,56119],{"class":607,"line":545},[605,56116,611],{"class":610},[605,56118,718],{"class":614},[605,56120,637],{"class":610},[605,56122,56123,56125,56128,56131,56133,56135,56138,56140],{"class":607,"line":546},[605,56124,726],{"class":610},[605,56126,56127],{"class":614},"input",[605,56129,56130],{"class":618}," v-model",[605,56132,625],{"class":610},[605,56134,628],{"class":610},[605,56136,56137],{"class":651},"myReactiveText",[605,56139,628],{"class":610},[605,56141,755],{"class":610},[605,56143,56144,56146,56148],{"class":607,"line":676},[605,56145,726],{"class":610},[605,56147,729],{"class":614},[605,56149,637],{"class":610},[605,56151,56152,56154,56156],{"class":607,"line":697},[605,56153,749],{"class":610},[605,56155,14995],{"class":614},[605,56157,637],{"class":610},[605,56159,56160,56162],{"class":607,"line":707},[605,56161,825],{"class":610},[605,56163,55925],{"class":614},[605,56165,56166,56168,56170,56172,56174,56176],{"class":607,"line":713},[605,56167,2993],{"class":610},[605,56169,22930],{"class":618},[605,56171,625],{"class":610},[605,56173,628],{"class":610},[605,56175,56137],{"class":651},[605,56177,2987],{"class":610},[605,56179,56180,56182,56184,56186,56188],{"class":607,"line":723},[605,56181,55943],{"class":618},[605,56183,625],{"class":610},[605,56185,628],{"class":610},[605,56187,55950],{"class":631},[605,56189,2987],{"class":610},[605,56191,56192],{"class":607,"line":746},[605,56193,47619],{"class":618},[605,56195,56196],{"class":607,"line":758},[605,56197,56198],{"class":618},"        need-updates\n",[605,56200,56201],{"class":607,"line":768},[605,56202,3050],{"class":610},[605,56204,56205,56207,56209],{"class":607,"line":773},[605,56206,867],{"class":610},[605,56208,14995],{"class":614},[605,56210,637],{"class":610},[605,56212,56213,56215,56217],{"class":607,"line":799},[605,56214,877],{"class":610},[605,56216,729],{"class":614},[605,56218,637],{"class":610},[605,56220,56221,56223,56225],{"class":607,"line":599},[605,56222,700],{"class":610},[605,56224,718],{"class":614},[605,56226,637],{"class":610},[472,56228,894],{"id":893},[899,56230,56231,56241],{},[902,56232,56233],{},[905,56234,56235,56237,56239],{},[908,56236,910],{"align":969},[908,56238,913],{"align":969},[908,56240,916],{},[918,56242,56243,56254,56265,56276,56287,56299,56311,56323,56336,56348,56360,56371],{},[905,56244,56245,56249,56252],{},[923,56246,56247],{"align":969},[1673,56248,55879],{},[923,56250,56251],{"align":969},"The font data or font name to use for the text.",[923,56253],{},[905,56255,56256,56260,56263],{},[923,56257,56258],{"align":969},[1673,56259,22930],{},[923,56261,56262],{"align":969},"The text to display.",[923,56264],{},[905,56266,56267,56271,56274],{},[923,56268,56269],{"align":969},[1673,56270,10233],{},[923,56272,56273],{"align":969},"The size of the text.",[923,56275,1513],{},[905,56277,56278,56282,56285],{},[923,56279,56280],{"align":969},[1673,56281,34017],{},[923,56283,56284],{"align":969},"The height of the text.",[923,56286,8085],{},[905,56288,56289,56294,56297],{},[923,56290,56291],{"align":969},[1673,56292,56293],{},"curveSegments",[923,56295,56296],{"align":969},"The number of curve segments to use when generating the text geometry.",[923,56298,2396],{},[905,56300,56301,56306,56309],{},[923,56302,56303],{"align":969},[1673,56304,56305],{},"bevelEnabled",[923,56307,56308],{"align":969},"A flag indicating whether beveling should be enabled for the text.",[923,56310,933],{},[905,56312,56313,56318,56321],{},[923,56314,56315],{"align":969},[1673,56316,56317],{},"bevelThickness",[923,56319,56320],{"align":969},"The thickness of the beveled edge on the text.",[923,56322,4892],{},[905,56324,56325,56330,56333],{},[923,56326,56327],{"align":969},[1673,56328,56329],{},"bevelSize",[923,56331,56332],{"align":969},"The size of the beveled edge on the text.",[923,56334,56335],{},"0.02",[905,56337,56338,56343,56346],{},[923,56339,56340],{"align":969},[1673,56341,56342],{},"bevelOffset",[923,56344,56345],{"align":969},"The offset of the beveled edge on the text.",[923,56347,937],{},[905,56349,56350,56355,56358],{},[923,56351,56352],{"align":969},[1673,56353,56354],{},"bevelSegments",[923,56356,56357],{"align":969},"The number of bevel segments to use when generating the text geometry.",[923,56359,3490],{},[905,56361,56362,56366,56369],{},[923,56363,56364],{"align":969},[1673,56365,44955],{},[923,56367,56368],{"align":969},"To center the text",[923,56370,943],{},[905,56372,56373,56378,56381],{},[923,56374,56375],{"align":969},[1673,56376,56377],{},"needUpdates",[923,56379,56380],{"align":969},"This props add reactivity",[923,56382,943],{},[1299,56384,56385],{},"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":544,"searchDepth":545,"depth":546,"links":56387},[56388,56389],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},"Render text in 3D using TextGeometry.",{},{"title":429,"description":56390},"t6bahOskD-ojOxftya8MrETrI6LWNTRBawqfzv7mouA",[56395,56970,57279,57687,58791,59428,60076],{"id":56396,"title":439,"body":56397,"description":56966,"extension":559,"links":560,"meta":56967,"navigation":562,"path":440,"seo":56968,"stem":441,"__hash__":56969},"docs/2.api/miscellaneous/bounds.md",{"type":469,"value":56398,"toc":56959},[56399,56404,56411,56429,56431,56798,56800,56929,56932,56946,56950,56956],[2558,56400,56401],{},[56402,56403],"miscellaneous-bounds",{},[582,56405,56406,56407,56410],{},"Calculates a boundary box and centers the camera accordingly. Its ",[586,56408,56409],{},"lookAt"," method accepts a target to look at imperatively e.g., after a click.",[2046,56412,56413,56415],{},[582,56414,43402],{},[594,56416,56417],{"className":596,"code":2071,"language":601,"meta":544,"style":544},[586,56418,56419],{"__ignoreMap":544},[605,56420,56421,56423,56425,56427],{"class":607,"line":545},[605,56422,611],{"class":610},[605,56424,763],{"class":614},[605,56426,1868],{"class":618},[605,56428,755],{"class":610},[472,56430,15],{"id":592},[594,56432,56435],{"className":596,"code":56433,"highlights":56434,"language":601,"meta":544,"style":544},"\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",[676,713,723,758,768,773,600,2990],[586,56436,56437,56457,56475,56499,56517,56521,56535,56549,56553,56565,56594,56599,56607,56611,56619,56627,56659,56669,56707,56749,56757,56765,56773,56782,56790],{"__ignoreMap":544},[605,56438,56439,56441,56443,56445,56447,56449,56451,56453,56455],{"class":607,"line":545},[605,56440,611],{"class":610},[605,56442,615],{"class":614},[605,56444,619],{"class":618},[605,56446,622],{"class":618},[605,56448,625],{"class":610},[605,56450,628],{"class":610},[605,56452,632],{"class":631},[605,56454,628],{"class":610},[605,56456,637],{"class":610},[605,56458,56459,56461,56463,56465,56467,56469,56471,56473],{"class":607,"line":546},[605,56460,645],{"class":644},[605,56462,648],{"class":610},[605,56464,683],{"class":651},[605,56466,661],{"class":610},[605,56468,664],{"class":644},[605,56470,667],{"class":610},[605,56472,692],{"class":631},[605,56474,673],{"class":610},[605,56476,56478,56480,56482,56485,56487,56489,56491,56493,56495,56497],{"class":56477,"line":676},[607,641],[605,56479,645],{"class":644},[605,56481,648],{"class":610},[605,56483,56484],{"class":651}," Bounds",[605,56486,655],{"class":610},[605,56488,658],{"class":651},[605,56490,661],{"class":610},[605,56492,664],{"class":644},[605,56494,667],{"class":610},[605,56496,670],{"class":631},[605,56498,673],{"class":610},[605,56500,56501,56503,56505,56507,56509,56511,56513,56515],{"class":607,"line":697},[605,56502,645],{"class":644},[605,56504,648],{"class":610},[605,56506,9716],{"class":651},[605,56508,661],{"class":610},[605,56510,664],{"class":644},[605,56512,667],{"class":610},[605,56514,601],{"class":631},[605,56516,673],{"class":610},[605,56518,56519],{"class":607,"line":707},[605,56520,710],{"emptyLinePlaceholder":562},[605,56522,56524,56526,56529,56531,56533],{"class":56523,"line":713},[607,641],[605,56525,2689],{"class":618},[605,56527,56528],{"class":651}," boundsRef ",[605,56530,625],{"class":610},[605,56532,9716],{"class":2800},[605,56534,2846],{"class":651},[605,56536,56538,56540,56543,56545,56547],{"class":56537,"line":723},[607,641],[605,56539,2689],{"class":618},[605,56541,56542],{"class":651}," objectRef ",[605,56544,625],{"class":610},[605,56546,9716],{"class":2800},[605,56548,2846],{"class":651},[605,56550,56551],{"class":607,"line":746},[605,56552,710],{"emptyLinePlaceholder":562},[605,56554,56556,56558,56561,56563],{"class":56555,"line":758},[607,641],[605,56557,32712],{"class":618},[605,56559,56560],{"class":2800}," focusObject",[605,56562,14395],{"class":610},[605,56564,1176],{"class":610},[605,56566,56568,56571,56573,56575,56577,56579,56581,56583,56585,56588,56590,56592],{"class":56567,"line":768},[607,641],[605,56569,56570],{"class":651},"  boundsRef",[605,56572,1118],{"class":610},[605,56574,5496],{"class":651},[605,56576,10582],{"class":610},[605,56578,20549],{"class":651},[605,56580,1118],{"class":610},[605,56582,56409],{"class":2800},[605,56584,2970],{"class":614},[605,56586,56587],{"class":651},"objectRef",[605,56589,1118],{"class":610},[605,56591,5496],{"class":651},[605,56593,5539],{"class":614},[605,56595,56597],{"class":56596,"line":773},[607,641],[605,56598,1297],{"class":610},[605,56600,56601,56603,56605],{"class":607,"line":799},[605,56602,700],{"class":610},[605,56604,615],{"class":614},[605,56606,637],{"class":610},[605,56608,56609],{"class":607,"line":599},[605,56610,710],{"emptyLinePlaceholder":562},[605,56612,56613,56615,56617],{"class":607,"line":822},[605,56614,611],{"class":610},[605,56616,718],{"class":614},[605,56618,637],{"class":610},[605,56620,56621,56623,56625],{"class":607,"line":833},[605,56622,726],{"class":610},[605,56624,729],{"class":614},[605,56626,637],{"class":610},[605,56628,56629,56631,56633,56635,56637,56639,56641,56643,56645,56647,56649,56651,56653,56655,56657],{"class":607,"line":844},[605,56630,749],{"class":610},[605,56632,752],{"class":614},[605,56634,781],{"class":610},[605,56636,1459],{"class":618},[605,56638,625],{"class":610},[605,56640,628],{"class":610},[605,56642,1466],{"class":610},[605,56644,937],{"class":791},[605,56646,1471],{"class":610},[605,56648,792],{"class":791},[605,56650,1471],{"class":610},[605,56652,2396],{"class":791},[605,56654,1481],{"class":610},[605,56656,628],{"class":610},[605,56658,755],{"class":610},[605,56660,56661,56663,56665,56667],{"class":607,"line":854},[605,56662,749],{"class":610},[605,56664,763],{"class":614},[605,56666,1868],{"class":618},[605,56668,755],{"class":610},[605,56670,56672,56674,56676,56678,56680,56682,56685,56687,56690,56693,56695,56697,56699,56701,56703,56705],{"class":56671,"line":600},[607,641],[605,56673,749],{"class":610},[605,56675,439],{"class":614},[605,56677,5431],{"class":618},[605,56679,625],{"class":610},[605,56681,628],{"class":610},[605,56683,56684],{"class":631},"boundsRef",[605,56686,628],{"class":610},[605,56688,56689],{"class":618}," clip",[605,56691,56692],{"class":618}," use-mounted",[605,56694,781],{"class":610},[605,56696,33561],{"class":618},[605,56698,625],{"class":610},[605,56700,628],{"class":610},[605,56702,4645],{"class":791},[605,56704,628],{"class":610},[605,56706,637],{"class":610},[605,56708,56709,56711,56713,56715,56717,56719,56721,56723,56725,56727,56729,56731,56733,56736,56738,56741,56743,56745,56747],{"class":607,"line":874},[605,56710,825],{"class":610},[605,56712,828],{"class":614},[605,56714,5431],{"class":618},[605,56716,625],{"class":610},[605,56718,628],{"class":610},[605,56720,56587],{"class":631},[605,56722,628],{"class":610},[605,56724,7756],{"class":610},[605,56726,31189],{"class":618},[605,56728,625],{"class":610},[605,56730,628],{"class":610},[605,56732,2970],{"class":610},[605,56734,56735],{"class":5495},"e",[605,56737,2748],{"class":610},[605,56739,56740],{"class":618},"=>",[605,56742,56560],{"class":2800},[605,56744,14395],{"class":610},[605,56746,628],{"class":610},[605,56748,637],{"class":610},[605,56750,56751,56753,56755],{"class":607,"line":884},[605,56752,836],{"class":610},[605,56754,839],{"class":614},[605,56756,755],{"class":610},[605,56758,56759,56761,56763],{"class":607,"line":2952},[605,56760,836],{"class":610},[605,56762,849],{"class":614},[605,56764,755],{"class":610},[605,56766,56767,56769,56771],{"class":607,"line":2960},[605,56768,857],{"class":610},[605,56770,828],{"class":614},[605,56772,637],{"class":610},[605,56774,56776,56778,56780],{"class":56775,"line":2990},[607,641],[605,56777,867],{"class":610},[605,56779,439],{"class":614},[605,56781,637],{"class":610},[605,56783,56784,56786,56788],{"class":607,"line":3007},[605,56785,877],{"class":610},[605,56787,729],{"class":614},[605,56789,637],{"class":610},[605,56791,56792,56794,56796],{"class":607,"line":3022},[605,56793,700],{"class":610},[605,56795,718],{"class":614},[605,56797,637],{"class":610},[472,56799,894],{"id":893},[899,56801,56802,56812],{},[902,56803,56804],{},[905,56805,56806,56808,56810],{},[908,56807,3118],{"align":969},[908,56809,913],{"align":969},[908,56811,916],{},[918,56813,56814,56831,56851,56868,56888,56909],{},[905,56815,56816,56821,56827],{},[923,56817,56818],{"align":969},[586,56819,56820],{},"duration",[923,56822,56823,56824,56826],{"align":969},"Duration of the ",[586,56825,56409],{}," animation in seconds",[923,56828,56829],{},[586,56830,7085],{},[905,56832,56833,56837,56847],{},[923,56834,56835],{"align":969},[586,56836,33561],{},[923,56838,56839,56840,56842,56843,10149,56845],{"align":969},"Additional distance from the target when using ",[586,56841,56409],{}," with a ",[586,56844,2574],{},[586,56846,2578],{},[923,56848,56849],{},[586,56850,8085],{},[905,56852,56853,56858,56864],{},[923,56854,56855],{"align":969},[586,56856,56857],{},"useResize",[923,56859,56860,56861,56863],{"align":969},"Whether to re",[586,56862,56409],{}," the last target when the screen is resized",[923,56865,56866],{},[586,56867,943],{},[905,56869,56870,56875,56884],{},[923,56871,56872],{"align":969},[586,56873,56874],{},"useMounted",[923,56876,56877,56878,56880,56881,56883],{"align":969},"Whether to ",[586,56879,56409],{}," the ",[586,56882,439],{}," object when the component is mounts",[923,56885,56886],{},[586,56887,943],{},[905,56889,56890,56895,56905],{},[923,56891,56892],{"align":969},[586,56893,56894],{},"clip",[923,56896,56897,56898,4431,56900,56902,56903],{"align":969},"Whether to adjust the camera's ",[586,56899,36295],{},[586,56901,34031],{}," settings when using ",[586,56904,56409],{},[923,56906,56907],{},[586,56908,943],{},[905,56910,56911,56916,56926],{},[923,56912,56913],{"align":969},[586,56914,56915],{},"easing",[923,56917,56918,56919,56922,56923],{"align":969},"Animation's easing function. ",[586,56920,56921],{},"t"," and the returned value should be in the interval ",[586,56924,56925],{},"[0, 1]",[923,56927,56928],{},"Cubic ease out",[472,56930,56409],{"id":56931},"lookat",[582,56933,56934,44693,56937,56939,56940,1471,56942,10149,56944,1118],{},[586,56935,56936],{},"\u003CBounds />",[586,56938,56409],{}," points the camera at its first argument: an ",[586,56941,2578],{},[586,56943,2574],{},[586,56945,3172],{},[7473,56947,56949],{"id":56948},"method-signatures","Method Signatures",[594,56951,56954],{"className":56952,"code":56953,"language":22930},[22928],"/**\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",[586,56955,56953],{"__ignoreMap":544},[1299,56957,56958],{},"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":544,"searchDepth":545,"depth":546,"links":56960},[56961,56962,56963],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},{"id":56931,"depth":546,"text":56409,"children":56964},[56965],{"id":56948,"depth":676,"text":56949},"Calculate boundary box and center camera accordingly.",{},{"title":439,"description":56966},"99p1FD8mbl4hP9wZB60es2RXMg_34kRJyloKHcDBk80",{"id":56971,"title":443,"body":56972,"description":57275,"extension":559,"links":560,"meta":57276,"navigation":562,"path":444,"seo":57277,"stem":445,"__hash__":57278},"docs/2.api/miscellaneous/global-audio.md",{"type":469,"value":56973,"toc":57270},[56974,56982,56989,56991,57143,57149,57151,57244,57246,57268],[582,56975,2253,56976,3275,56978,56981],{},[586,56977,2256],{},[586,56979,56980],{},"\u003CGlobalAudio />"," component that serves to easily add a global sound to your scene.",[582,56983,22935,56984],{},[1112,56985,56988],{"href":56986,"rel":56987},"https://threejs.org/docs/index.html?q=audio#api/en/audio/Audio",[1116],"Audio",[472,56990,15],{"id":592},[594,56992,56995],{"className":596,"code":56993,"highlights":56994,"language":601,"meta":544,"style":544},"\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",[676,758],[586,56996,56997,57007,57025,57045,57053,57057,57065,57073,57105,57127,57135],{"__ignoreMap":544},[605,56998,56999,57001,57003,57005],{"class":607,"line":545},[605,57000,611],{"class":610},[605,57002,615],{"class":614},[605,57004,619],{"class":618},[605,57006,637],{"class":610},[605,57008,57009,57011,57013,57015,57017,57019,57021,57023],{"class":607,"line":546},[605,57010,645],{"class":644},[605,57012,648],{"class":610},[605,57014,683],{"class":651},[605,57016,661],{"class":610},[605,57018,664],{"class":644},[605,57020,667],{"class":610},[605,57022,692],{"class":631},[605,57024,673],{"class":610},[605,57026,57028,57030,57032,57035,57037,57039,57041,57043],{"class":57027,"line":676},[607,641],[605,57029,645],{"class":644},[605,57031,648],{"class":610},[605,57033,57034],{"class":651}," GlobalAudio",[605,57036,661],{"class":610},[605,57038,664],{"class":644},[605,57040,667],{"class":610},[605,57042,670],{"class":631},[605,57044,673],{"class":610},[605,57046,57047,57049,57051],{"class":607,"line":697},[605,57048,700],{"class":610},[605,57050,615],{"class":614},[605,57052,637],{"class":610},[605,57054,57055],{"class":607,"line":707},[605,57056,710],{"emptyLinePlaceholder":562},[605,57058,57059,57061,57063],{"class":607,"line":713},[605,57060,611],{"class":610},[605,57062,718],{"class":614},[605,57064,637],{"class":610},[605,57066,57067,57069,57071],{"class":607,"line":723},[605,57068,726],{"class":610},[605,57070,729],{"class":614},[605,57072,637],{"class":610},[605,57074,57075,57077,57079,57081,57083,57085,57087,57089,57091,57093,57095,57097,57099,57101,57103],{"class":607,"line":746},[605,57076,749],{"class":610},[605,57078,752],{"class":614},[605,57080,781],{"class":610},[605,57082,1459],{"class":618},[605,57084,625],{"class":610},[605,57086,628],{"class":610},[605,57088,1466],{"class":610},[605,57090,937],{"class":791},[605,57092,1471],{"class":610},[605,57094,937],{"class":791},[605,57096,1471],{"class":610},[605,57098,4685],{"class":791},[605,57100,1481],{"class":610},[605,57102,628],{"class":610},[605,57104,755],{"class":610},[605,57106,57108,57110,57112,57114,57116,57118,57120,57123,57125],{"class":57107,"line":758},[607,641],[605,57109,749],{"class":610},[605,57111,443],{"class":614},[605,57113,781],{"class":610},[605,57115,18113],{"class":618},[605,57117,625],{"class":610},[605,57119,628],{"class":610},[605,57121,57122],{"class":651},"exampleAudio",[605,57124,628],{"class":610},[605,57126,755],{"class":610},[605,57128,57129,57131,57133],{"class":607,"line":768},[605,57130,877],{"class":610},[605,57132,729],{"class":614},[605,57134,637],{"class":610},[605,57136,57137,57139,57141],{"class":607,"line":773},[605,57138,700],{"class":610},[605,57140,718],{"class":614},[605,57142,637],{"class":610},[582,57144,57145,57146,57148],{},"*The ",[586,57147,18113],{}," prop is required",[472,57150,894],{"id":893},[899,57152,57153,57163],{},[902,57154,57155],{},[905,57156,57157,57159,57161],{},[908,57158,910],{"align":969},[908,57160,913],{"align":969},[908,57162,916],{},[918,57164,57165,57176,57191,57203,57216,57230],{},[905,57166,57167,57171,57174],{},[923,57168,57169],{"align":969},[586,57170,18113],{},[923,57172,57173],{"align":969},"Path to your audio file",[923,57175],{},[905,57177,57178,57183,57186],{},[923,57179,57180],{"align":969},[586,57181,57182],{},"playTrigger",[923,57184,57185],{"align":969},"Id of the DOM element that triggers the play/pause state",[923,57187,57188],{},[586,57189,57190],{},"renderer.domElement",[905,57192,57193,57198,57201],{},[923,57194,57195],{"align":969},[586,57196,57197],{},"stopTrigger",[923,57199,57200],{"align":969},"Id of the DOM element that triggers the stop state",[923,57202],{},[905,57204,57205,57209,57212],{},[923,57206,57207],{"align":969},[586,57208,19561],{},[923,57210,57211],{"align":969},"If the audio must be replayed when ends",[923,57213,57214],{},[586,57215,943],{},[905,57217,57218,57223,57226],{},[923,57219,57220],{"align":969},[586,57221,57222],{},"volume",[923,57224,57225],{"align":969},"Volume of the audio",[923,57227,57228],{},[586,57229,1513],{},[905,57231,57232,57237,57240],{},[923,57233,57234],{"align":969},[586,57235,57236],{},"playbackRate",[923,57238,57239],{"align":969},"PlaybackRate of the audio",[923,57241,57242],{},[586,57243,1893],{},[472,57245,7742],{"id":7741},[899,57247,57248,57256],{},[902,57249,57250],{},[905,57251,57252,57254],{},[908,57253,7807],{"align":969},[908,57255,913],{"align":969},[918,57257,57258],{},[905,57259,57260,57265],{},[923,57261,57262],{"align":969},[586,57263,57264],{},"isPlaying",[923,57266,57267],{"align":969},"Dispatched when the Audio change its state (play, pause or stop)",[1299,57269,7841],{},{"title":544,"searchDepth":545,"depth":546,"links":57271},[57272,57273,57274],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},{"id":7741,"depth":546,"text":7742},"Add global sound to your scene.",{},{"title":443,"description":57275},"XaoiVKl16tz4uOX0ZskSCuPQUgYB0CYUZjEEuh4q_uU",{"id":57280,"title":447,"body":57281,"description":57683,"extension":559,"links":560,"meta":57684,"navigation":562,"path":448,"seo":57685,"stem":449,"__hash__":57686},"docs/2.api/miscellaneous/mouse-parallax.md",{"type":469,"value":57282,"toc":57679},[57283,57288,57300,57302,57308,57316,57325,57330,57616,57618,57677],[576,57284,57285],{},[57286,57287],"miscellaneous-mouse-parallax",{},[582,57289,57290,57293,57294,57299],{},[586,57291,57292],{},"\u003CMouseParallax />"," is a component that allows you to easily create a ",[1112,57295,57298],{"href":57296,"rel":57297},"https://en.wikipedia.org/wiki/Parallax",[1116],"parallax"," effect. The camera will update automatically according to the mouse position.",[472,57301,15],{"id":592},[582,57303,57304,57305,57307],{},"You only need to import it and add it to your template as ",[586,57306,57292],{},". Additionally, you can pass the following props:",[582,57309,57310,57312,57313,1118],{},[586,57311,22768],{}," 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: ",[586,57314,57315],{},":factor=[x,y]",[582,57317,57318,57321,57322,1118],{},[586,57319,57320],{},"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: ",[586,57323,57324],{},":ease=[x,y]",[582,57326,57327,57329],{},[586,57328,10219],{}," is a boolean that enables movement based on the position of the mouse on the canvas rather than the window.",[594,57331,57334],{"className":596,"code":57332,"highlights":57333,"language":601,"meta":544,"style":544},"\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",[546,799],[586,57335,57336,57356,57382,57402,57410,57414,57422,57440,57485,57493,57511,57519,57560,57568,57600,57608],{"__ignoreMap":544},[605,57337,57338,57340,57342,57344,57346,57348,57350,57352,57354],{"class":607,"line":545},[605,57339,611],{"class":610},[605,57341,615],{"class":614},[605,57343,619],{"class":618},[605,57345,622],{"class":618},[605,57347,625],{"class":610},[605,57349,628],{"class":610},[605,57351,632],{"class":631},[605,57353,628],{"class":610},[605,57355,637],{"class":610},[605,57357,57359,57361,57363,57366,57368,57370,57372,57374,57376,57378,57380],{"class":57358,"line":546},[607,641],[605,57360,645],{"class":644},[605,57362,648],{"class":610},[605,57364,57365],{"class":651}," MouseParallax",[605,57367,655],{"class":610},[605,57369,33683],{"class":651},[605,57371,661],{"class":610},[605,57373,664],{"class":644},[605,57375,3322],{"class":610},[605,57377,670],{"class":631},[605,57379,628],{"class":610},[605,57381,3329],{"class":610},[605,57383,57384,57386,57388,57390,57392,57394,57396,57398,57400],{"class":607,"line":676},[605,57385,645],{"class":644},[605,57387,648],{"class":610},[605,57389,683],{"class":651},[605,57391,661],{"class":610},[605,57393,664],{"class":644},[605,57395,3322],{"class":610},[605,57397,692],{"class":631},[605,57399,628],{"class":610},[605,57401,3329],{"class":610},[605,57403,57404,57406,57408],{"class":607,"line":697},[605,57405,700],{"class":610},[605,57407,615],{"class":614},[605,57409,637],{"class":610},[605,57411,57412],{"class":607,"line":707},[605,57413,710],{"emptyLinePlaceholder":562},[605,57415,57416,57418,57420],{"class":607,"line":713},[605,57417,611],{"class":610},[605,57419,718],{"class":614},[605,57421,637],{"class":610},[605,57423,57424,57426,57428,57430,57432,57434,57436,57438],{"class":607,"line":723},[605,57425,726],{"class":610},[605,57427,729],{"class":614},[605,57429,732],{"class":618},[605,57431,625],{"class":610},[605,57433,628],{"class":610},[605,57435,5040],{"class":631},[605,57437,628],{"class":610},[605,57439,637],{"class":610},[605,57441,57442,57444,57446,57448,57450,57452,57454,57456,57458,57460,57462,57464,57466,57468,57470,57472,57474,57476,57478,57481,57483],{"class":607,"line":746},[605,57443,749],{"class":610},[605,57445,752],{"class":614},[605,57447,781],{"class":610},[605,57449,1459],{"class":618},[605,57451,625],{"class":610},[605,57453,628],{"class":610},[605,57455,1466],{"class":610},[605,57457,937],{"class":791},[605,57459,1471],{"class":610},[605,57461,937],{"class":791},[605,57463,1471],{"class":610},[605,57465,4685],{"class":791},[605,57467,1481],{"class":610},[605,57469,628],{"class":610},[605,57471,781],{"class":610},[605,57473,25049],{"class":618},[605,57475,625],{"class":610},[605,57477,628],{"class":610},[605,57479,57480],{"class":791},"75",[605,57482,628],{"class":610},[605,57484,755],{"class":610},[605,57486,57487,57489,57491],{"class":607,"line":758},[605,57488,749],{"class":610},[605,57490,28642],{"class":614},[605,57492,637],{"class":610},[605,57494,57495,57497,57499,57501,57503,57505,57507,57509],{"class":607,"line":768},[605,57496,825],{"class":610},[605,57498,6729],{"class":614},[605,57500,3978],{"class":618},[605,57502,625],{"class":610},[605,57504,628],{"class":610},[605,57506,6738],{"class":631},[605,57508,628],{"class":610},[605,57510,755],{"class":610},[605,57512,57513,57515,57517],{"class":607,"line":773},[605,57514,867],{"class":610},[605,57516,28642],{"class":614},[605,57518,637],{"class":610},[605,57520,57522,57524,57526,57528,57530,57532,57534,57536,57538,57540,57542,57544,57546,57548,57550,57552,57554,57556,57558],{"class":57521,"line":799},[607,641],[605,57523,749],{"class":610},[605,57525,447],{"class":614},[605,57527,781],{"class":610},[605,57529,22768],{"class":618},[605,57531,625],{"class":610},[605,57533,628],{"class":610},[605,57535,2396],{"class":791},[605,57537,628],{"class":610},[605,57539,781],{"class":610},[605,57541,57320],{"class":618},[605,57543,625],{"class":610},[605,57545,628],{"class":610},[605,57547,1466],{"class":610},[605,57549,4160],{"class":791},[605,57551,1471],{"class":610},[605,57553,2203],{"class":791},[605,57555,1481],{"class":610},[605,57557,628],{"class":610},[605,57559,755],{"class":610},[605,57561,57562,57564,57566],{"class":607,"line":599},[605,57563,749],{"class":610},[605,57565,3518],{"class":614},[605,57567,755],{"class":610},[605,57569,57570,57572,57574,57576,57578,57580,57582,57584,57586,57588,57590,57592,57594,57596,57598],{"class":607,"line":822},[605,57571,749],{"class":610},[605,57573,3539],{"class":614},[605,57575,781],{"class":610},[605,57577,1459],{"class":618},[605,57579,625],{"class":610},[605,57581,628],{"class":610},[605,57583,1466],{"class":610},[605,57585,937],{"class":791},[605,57587,1471],{"class":610},[605,57589,792],{"class":791},[605,57591,1471],{"class":610},[605,57593,3490],{"class":791},[605,57595,1481],{"class":610},[605,57597,628],{"class":610},[605,57599,755],{"class":610},[605,57601,57602,57604,57606],{"class":607,"line":833},[605,57603,877],{"class":610},[605,57605,729],{"class":614},[605,57607,637],{"class":610},[605,57609,57610,57612,57614],{"class":607,"line":844},[605,57611,700],{"class":610},[605,57613,718],{"class":614},[605,57615,637],{"class":610},[472,57617,894],{"id":893},[899,57619,57620,57630],{},[902,57621,57622],{},[905,57623,57624,57626,57628],{},[908,57625,910],{"align":969},[908,57627,913],{"align":969},[908,57629,916],{},[918,57631,57632,57644,57655,57666],{},[905,57633,57634,57639,57642],{},[923,57635,57636],{"align":969},[1673,57637,57638],{},"disabled",[923,57640,57641],{"align":969},"Enable or disable the effect",[923,57643,943],{},[905,57645,57646,57650,57653],{},[923,57647,57648],{"align":969},[1673,57649,22768],{},[923,57651,57652],{"align":969},"Increase the range of the parallax",[923,57654,50017],{},[905,57656,57657,57661,57664],{},[923,57658,57659],{"align":969},[1673,57660,57320],{},[923,57662,57663],{"align":969},"Increase the camera movement speed",[923,57665,2203],{},[905,57667,57668,57672,57675],{},[923,57669,57670],{"align":969},[1673,57671,10219],{},[923,57673,57674],{"align":969},"Whether the mouse coordinates are calculated from the element or the window",[923,57676,943],{},[1299,57678,1648],{},{"title":544,"searchDepth":545,"depth":546,"links":57680},[57681,57682],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},"Create parallax effects based on mouse movement.",{},{"title":447,"description":57683},"zv4ymbjp8tAh2V9VwEVi4JhsEhfQefLNJbTL0FgMK7Q",{"id":57688,"title":451,"body":57689,"description":58787,"extension":559,"links":560,"meta":58788,"navigation":562,"path":452,"seo":58789,"stem":453,"__hash__":58790},"docs/2.api/miscellaneous/positional-audio.md",{"type":469,"value":57690,"toc":58780},[57691,57696,57708,57718,57720,57735,58015,58043,58047,58052,58054,58248,58250,58322,58552,58748,58750,58777],[576,57692,57693],{},[57694,57695],"miscellaneous-positional-audio",{},[582,57697,2253,57698,54860,57700,1471,57704,57707],{},[586,57699,2256],{},[1112,57701,451],{"href":57702,"rel":57703},"https://threejs.org/docs/index.html?q=posi#api/en/audio/PositionalAudio",[1116],[586,57705,57706],{},"\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.",[582,57709,57710,57712,57713,29567],{},[586,57711,57706],{}," includes a helper 🛠️ that allows you to view the directional cone of te audio. The helper is based on the ",[1112,57714,57717],{"href":57715,"rel":57716},"https://threejs.org/docs/#examples/en/helpers/PositionalAudioHelper",[1116],"PositionalAudioHelper",[472,57719,15],{"id":592},[582,57721,2253,57722,57724,57725,57727,57728,57730,57731,57734],{},[586,57723,57706],{}," 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 ",[586,57726,57706],{}," component and set the ",[586,57729,53806],{},". It must be wrapped around the ",[586,57732,57733],{},"\u003CSuspense>"," component to enable it to load your audio asynchronously. 💥",[594,57736,57739],{"className":596,"code":57737,"highlights":57738,"language":601,"meta":544,"style":544},"\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",[546,854,600,874],[586,57740,57741,57761,57785,57807,57811,57828,57832,57844,57859,57865,57873,57877,57885,57893,57925,57933,57941,57949,57964,57979,57983,57991,57999,58007],{"__ignoreMap":544},[605,57742,57743,57745,57747,57749,57751,57753,57755,57757,57759],{"class":607,"line":545},[605,57744,611],{"class":610},[605,57746,615],{"class":614},[605,57748,619],{"class":618},[605,57750,622],{"class":618},[605,57752,625],{"class":610},[605,57754,628],{"class":610},[605,57756,632],{"class":631},[605,57758,628],{"class":610},[605,57760,637],{"class":610},[605,57762,57764,57766,57768,57770,57772,57775,57777,57779,57781,57783],{"class":57763,"line":546},[607,641],[605,57765,645],{"class":644},[605,57767,648],{"class":610},[605,57769,1369],{"class":651},[605,57771,655],{"class":610},[605,57773,57774],{"class":651}," PositionalAudio",[605,57776,661],{"class":610},[605,57778,664],{"class":644},[605,57780,667],{"class":610},[605,57782,670],{"class":631},[605,57784,673],{"class":610},[605,57786,57787,57789,57791,57793,57795,57797,57799,57801,57803,57805],{"class":607,"line":676},[605,57788,645],{"class":644},[605,57790,648],{"class":610},[605,57792,17130],{"class":651},[605,57794,655],{"class":610},[605,57796,9716],{"class":651},[605,57798,661],{"class":610},[605,57800,664],{"class":644},[605,57802,667],{"class":610},[605,57804,601],{"class":631},[605,57806,673],{"class":610},[605,57808,57809],{"class":607,"line":697},[605,57810,710],{"emptyLinePlaceholder":562},[605,57812,57813,57815,57818,57820,57822,57824,57826],{"class":607,"line":707},[605,57814,2689],{"class":618},[605,57816,57817],{"class":651}," positionalAudioRef ",[605,57819,625],{"class":610},[605,57821,9716],{"class":2800},[605,57823,2970],{"class":651},[605,57825,3152],{"class":610},[605,57827,5539],{"class":651},[605,57829,57830],{"class":607,"line":713},[605,57831,710],{"emptyLinePlaceholder":562},[605,57833,57834,57836,57838,57840,57842],{"class":607,"line":723},[605,57835,17177],{"class":2800},[605,57837,2970],{"class":651},[605,57839,14395],{"class":610},[605,57841,5501],{"class":618},[605,57843,1176],{"class":610},[605,57845,57846,57849,57851,57853,57855,57857],{"class":607,"line":746},[605,57847,57848],{"class":651},"  positionalAudioRef",[605,57850,10582],{"class":610},[605,57852,5496],{"class":651},[605,57854,10582],{"class":610},[605,57856,16221],{"class":2800},[605,57858,2846],{"class":614},[605,57860,57861,57863],{"class":607,"line":758},[605,57862,5544],{"class":610},[605,57864,5539],{"class":651},[605,57866,57867,57869,57871],{"class":607,"line":768},[605,57868,700],{"class":610},[605,57870,615],{"class":614},[605,57872,637],{"class":610},[605,57874,57875],{"class":607,"line":773},[605,57876,710],{"emptyLinePlaceholder":562},[605,57878,57879,57881,57883],{"class":607,"line":799},[605,57880,611],{"class":610},[605,57882,718],{"class":614},[605,57884,637],{"class":610},[605,57886,57887,57889,57891],{"class":607,"line":599},[605,57888,726],{"class":610},[605,57890,729],{"class":614},[605,57892,637],{"class":610},[605,57894,57895,57897,57899,57901,57903,57905,57907,57909,57911,57913,57915,57917,57919,57921,57923],{"class":607,"line":822},[605,57896,749],{"class":610},[605,57898,193],{"class":614},[605,57900,781],{"class":610},[605,57902,1989],{"class":618},[605,57904,625],{"class":610},[605,57906,628],{"class":610},[605,57908,1466],{"class":610},[605,57910,1893],{"class":791},[605,57912,1471],{"class":610},[605,57914,1893],{"class":791},[605,57916,1471],{"class":610},[605,57918,1893],{"class":791},[605,57920,1481],{"class":610},[605,57922,628],{"class":610},[605,57924,637],{"class":610},[605,57926,57927,57929,57931],{"class":607,"line":833},[605,57928,825],{"class":610},[605,57930,849],{"class":614},[605,57932,755],{"class":610},[605,57934,57935,57937,57939],{"class":607,"line":844},[605,57936,825],{"class":610},[605,57938,14995],{"class":614},[605,57940,637],{"class":610},[605,57942,57944,57946],{"class":57943,"line":854},[607,641],[605,57945,836],{"class":610},[605,57947,57948],{"class":614},"PositionalAudio\n",[605,57950,57952,57955,57957,57959,57962],{"class":57951,"line":600},[607,641],[605,57953,57954],{"class":618},"          ref",[605,57956,625],{"class":610},[605,57958,628],{"class":610},[605,57960,57961],{"class":631},"positionalAudioRef",[605,57963,2987],{"class":610},[605,57965,57967,57970,57972,57974,57977],{"class":57966,"line":874},[607,641],[605,57968,57969],{"class":618},"          url",[605,57971,625],{"class":610},[605,57973,628],{"class":610},[605,57975,57976],{"class":631},"your-sound.mp3",[605,57978,2987],{"class":610},[605,57980,57981],{"class":607,"line":884},[605,57982,47199],{"class":610},[605,57984,57985,57987,57989],{"class":607,"line":2952},[605,57986,857],{"class":610},[605,57988,14995],{"class":614},[605,57990,637],{"class":610},[605,57992,57993,57995,57997],{"class":607,"line":2960},[605,57994,867],{"class":610},[605,57996,193],{"class":614},[605,57998,637],{"class":610},[605,58000,58001,58003,58005],{"class":607,"line":2990},[605,58002,877],{"class":610},[605,58004,729],{"class":614},[605,58006,637],{"class":610},[605,58008,58009,58011,58013],{"class":607,"line":3007},[605,58010,700],{"class":610},[605,58012,718],{"class":614},[605,58014,637],{"class":610},[3725,58016,58017],{},[582,58018,58019,58020,58023,58024,58031,58032,58035,58036,4431,58039,58042],{},"AudioContext is authorised when an user gesture has been made on the page. ",[586,58021,58022],{},":autoplay=\"true\""," cannot be activated if no user gesture has been made previously ",[1112,58025,58028],{"href":58026,"rel":58027},"https://goo.gl/7K7WLu",[1116],[586,58029,58030],{},"read more",".\nIf you are sure that there will be a user gesture before your ",[586,58033,58034],{},"\u003CPositionAudio>"," component appears/is created, you can directly add ",[586,58037,58038],{},":ready=\"true\"",[586,58040,58041],{},"autoplay=\"true\""," for a direct launch.",[472,58044,58046],{"id":58045},"how-does-it-work","How does it work?",[3267,58048],{"className":58049,"src":58051},[58050],"mx-auto","/cientos/sketch.jpg",[472,58053,894],{"id":893},[899,58055,58056,58066],{},[902,58057,58058],{},[905,58059,58060,58062,58064],{},[908,58061,910],{"align":969},[908,58063,913],{"align":969},[908,58065,916],{},[918,58067,58068,58084,58105,58125,58158,58176,58191,58208,58227],{},[905,58069,58070,58074,58082],{},[923,58071,58072],{"align":969},[1673,58073,53806],{},[923,58075,58076,49328,58078,58081],{"align":969},[586,58077,11094],{},[1673,58079,58080],{},"required"," — The path or URL to the file.",[923,58083],{},[905,58085,58086,58091,58101],{},[923,58087,58088],{"align":969},[1673,58089,58090],{},"helper",[923,58092,58093,58095,58096,44693,58098],{"align":969},[586,58094,11014],{}," — Selects whether helper mode is enabled. ",[2508,58097],{},[1677,58099,58100],{},"(Useful for visualising the angle of sound propagation)",[923,58102,58103],{},[586,58104,943],{},[905,58106,58107,58111,58121],{},[923,58108,58109],{"align":969},[1673,58110,6945],{},[923,58112,58113,58115,58116],{"align":969},[586,58114,2537],{}," — The distance at which the volume reduction starts taking effect. ",[1677,58117,58118],{},[1673,58119,58120],{},"A non-negative number.",[923,58122,58123],{},[586,58124,1893],{},[905,58126,58127,58132,58154],{},[923,58128,58129],{"align":969},[1673,58130,58131],{},"ready",[923,58133,58134,58136,58137,58139,58140,58143,58144,58147,58148,58151,58152],{"align":969},[586,58135,11014],{}," — Tells ",[586,58138,57706],{}," that ",[586,58141,58142],{},"AudioContext"," is authorised because an user gesture has been made on the page. This is imperative, as ",[586,58145,58146],{},"autoplay"," cannot be activated if no user gesture has been made previously (",[1112,58149,58026],{"href":58026,"rel":58150},[1116],"). ",[2508,58153],{},[923,58155,58156],{},[586,58157,943],{},[905,58159,58160,58164,58172],{},[923,58161,58162],{"align":969},[1673,58163,58146],{},[923,58165,58166,58168,58169,58171],{"align":969},[586,58167,11014],{}," — Selects whether the audio is launched automatically. Please refer to the ",[586,58170,58131],{}," prop for a better understanding of how to use autoplay.",[923,58173,58174],{},[586,58175,943],{},[905,58177,58178,58182,58187],{},[923,58179,58180],{"align":969},[1673,58181,19561],{},[923,58183,58184,58186],{"align":969},[586,58185,11014],{}," — Specifies whether the audio should loop.",[923,58188,58189],{},[586,58190,943],{},[905,58192,58193,58198,58203],{},[923,58194,58195],{"align":969},[1673,58196,58197],{},"innerAngle",[923,58199,58200,58202],{"align":969},[586,58201,2537],{}," —  A parameter for directional audio sources, this is an angle, inside of which there will be no volume reduction.",[923,58204,58205],{},[586,58206,58207],{},"360",[905,58209,58210,58215,58223],{},[923,58211,58212],{"align":969},[1673,58213,58214],{},"outerAngle",[923,58216,58217,58219,58220,34413],{"align":969},[586,58218,2537],{}," —  A parameter for directional audio sources, this is an angle, outside of which the volume will be reduced to a constant value of ",[586,58221,58222],{},"outerGain",[923,58224,58225],{},[586,58226,937],{},[905,58228,58229,58233,58244],{},[923,58230,58231],{"align":969},[1673,58232,58222],{},[923,58234,58235,58237,58238,58240,58241,58243],{"align":969},[586,58236,2537],{}," —  A parameter for directional audio sources, this is the amount of volume reduction outside of the ",[586,58239,58214],{}," prop. When the value is ",[586,58242,937],{}," no sound can be heard.",[923,58245,58246],{},[586,58247,937],{},[472,58249,52872],{"id":52871},[899,58251,58252,58260],{},[902,58253,58254],{},[905,58255,58256,58258],{},[908,58257,7807],{"align":969},[908,58259,913],{"align":969},[918,58261,58262,58274,58287,58300,58313],{},[905,58263,58264,58268],{},[923,58265,58266],{"align":969},[586,58267,20549],{},[923,58269,58270,58271,1118],{"align":969},"Instance reference — Inheritance of ",[1112,58272,451],{"href":57702,"rel":58273},[1116],[905,58275,58276,58281],{},[923,58277,58278],{"align":969},[586,58279,58280],{},"play()",[923,58282,58283,58284],{"align":969},"Play audio — ",[1677,58285,58286],{},"Cannot be fired if audio is already running.",[905,58288,58289,58294],{},[923,58290,58291],{"align":969},[586,58292,58293],{},"pause()",[923,58295,58296,58297],{"align":969},"Pause audio — ",[1677,58298,58299],{},"Cannot be fired if audio is already paused.",[905,58301,58302,58307],{},[923,58303,58304],{"align":969},[586,58305,58306],{},"stop()",[923,58308,58309,58310],{"align":969},"Stop audio — ",[1677,58311,58312],{},"Cannot be fired if audio is already stopped.",[905,58314,58315,58319],{},[923,58316,58317],{"align":969},[586,58318,18376],{},[923,58320,58321],{"align":969},"Dispose component — Deletion of the AudioListener in the camera, disconnection of the audio source and deletion of the PositionalAudioHelper (if it exists).",[594,58323,58327],{"className":58324,"code":58325,"language":58326,"meta":544,"style":544},"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",[586,58328,58329,58345,58349,58373,58377,58401,58423,58427,58457,58461,58488,58519,58548],{"__ignoreMap":544},[605,58330,58331,58333,58335,58337,58339,58341,58343],{"class":607,"line":545},[605,58332,2689],{"class":618},[605,58334,57817],{"class":651},[605,58336,625],{"class":610},[605,58338,9716],{"class":2800},[605,58340,2970],{"class":651},[605,58342,3152],{"class":610},[605,58344,5539],{"class":651},[605,58346,58347],{"class":607,"line":546},[605,58348,710],{"emptyLinePlaceholder":562},[605,58350,58351,58354,58356,58358,58361,58363,58365,58367,58370],{"class":607,"line":676},[605,58352,58353],{"class":651},"console",[605,58355,1118],{"class":610},[605,58357,13679],{"class":2800},[605,58359,58360],{"class":651},"(positionalAudioRef",[605,58362,1118],{"class":610},[605,58364,5496],{"class":651},[605,58366,1118],{"class":610},[605,58368,58369],{"class":651},"instance) ",[605,58371,58372],{"class":1181},"// instance properties\n",[605,58374,58375],{"class":607,"line":697},[605,58376,710],{"emptyLinePlaceholder":562},[605,58378,58379,58381,58384,58386,58388,58391,58393,58395,58397,58399],{"class":607,"line":707},[605,58380,2689],{"class":618},[605,58382,58383],{"class":651}," handlerAudio ",[605,58385,625],{"class":610},[605,58387,2713],{"class":610},[605,58389,58390],{"class":5495},"action",[605,58392,1190],{"class":610},[605,58394,51075],{"class":1172},[605,58396,4125],{"class":610},[605,58398,5501],{"class":618},[605,58400,1176],{"class":610},[605,58402,58403,58405,58407,58409,58411,58413,58415,58417,58419,58421],{"class":607,"line":713},[605,58404,14598],{"class":644},[605,58406,2713],{"class":614},[605,58408,15682],{"class":610},[605,58410,57961],{"class":651},[605,58412,1118],{"class":610},[605,58414,5496],{"class":651},[605,58416,2748],{"class":614},[605,58418,34746],{"class":610},[605,58420,45994],{"class":644},[605,58422,15640],{"class":610},[605,58424,58425],{"class":607,"line":723},[605,58426,710],{"emptyLinePlaceholder":562},[605,58428,58429,58431,58433,58436,58438,58441,58443,58446,58448,58450,58453,58455],{"class":607,"line":746},[605,58430,51084],{"class":618},[605,58432,648],{"class":610},[605,58434,58435],{"class":651}," play",[605,58437,655],{"class":610},[605,58439,58440],{"class":651}," pause",[605,58442,655],{"class":610},[605,58444,58445],{"class":651}," stop",[605,58447,661],{"class":610},[605,58449,2766],{"class":610},[605,58451,58452],{"class":651}," positionalAudioRef",[605,58454,1118],{"class":610},[605,58456,17353],{"class":651},[605,58458,58459],{"class":607,"line":758},[605,58460,710],{"emptyLinePlaceholder":562},[605,58462,58463,58465,58467,58469,58471,58473,58476,58478,58480,58482,58484,58486],{"class":607,"line":768},[605,58464,14598],{"class":644},[605,58466,2713],{"class":614},[605,58468,58390],{"class":651},[605,58470,14619],{"class":610},[605,58472,667],{"class":610},[605,58474,58475],{"class":631},"play",[605,58477,5536],{"class":610},[605,58479,2748],{"class":614},[605,58481,34746],{"class":610},[605,58483,58435],{"class":2800},[605,58485,51179],{"class":614},[605,58487,1297],{"class":610},[605,58489,58490,58493,58496,58498,58500,58502,58504,58507,58509,58511,58513,58515,58517],{"class":607,"line":773},[605,58491,58492],{"class":644},"  else",[605,58494,58495],{"class":644}," if",[605,58497,2713],{"class":614},[605,58499,58390],{"class":651},[605,58501,14619],{"class":610},[605,58503,667],{"class":610},[605,58505,58506],{"class":631},"pause",[605,58508,5536],{"class":610},[605,58510,2748],{"class":614},[605,58512,34746],{"class":610},[605,58514,58440],{"class":2800},[605,58516,51179],{"class":614},[605,58518,1297],{"class":610},[605,58520,58521,58523,58525,58527,58529,58531,58533,58536,58538,58540,58542,58544,58546],{"class":607,"line":799},[605,58522,58492],{"class":644},[605,58524,58495],{"class":644},[605,58526,2713],{"class":614},[605,58528,58390],{"class":651},[605,58530,14619],{"class":610},[605,58532,667],{"class":610},[605,58534,58535],{"class":631},"stop",[605,58537,5536],{"class":610},[605,58539,2748],{"class":614},[605,58541,34746],{"class":610},[605,58543,58445],{"class":2800},[605,58545,51179],{"class":614},[605,58547,1297],{"class":610},[605,58549,58550],{"class":607,"line":599},[605,58551,1297],{"class":610},[594,58553,58555],{"className":596,"code":58554,"language":601,"meta":544,"style":544},"\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",[586,58556,58557,58565,58604,58642,58680,58684,58692,58700,58708,58716,58724,58732,58740],{"__ignoreMap":544},[605,58558,58559,58561,58563],{"class":607,"line":545},[605,58560,611],{"class":610},[605,58562,718],{"class":614},[605,58564,637],{"class":610},[605,58566,58567,58569,58571,58573,58575,58577,58579,58582,58584,58586,58588,58590,58592,58594,58596,58598,58600,58602],{"class":607,"line":546},[605,58568,726],{"class":610},[605,58570,31184],{"class":614},[605,58572,7756],{"class":610},[605,58574,31189],{"class":618},[605,58576,625],{"class":610},[605,58578,628],{"class":610},[605,58580,58581],{"class":2800},"handlerAudio",[605,58583,2970],{"class":610},[605,58585,5536],{"class":610},[605,58587,58475],{"class":631},[605,58589,5536],{"class":610},[605,58591,4125],{"class":610},[605,58593,628],{"class":610},[605,58595,11720],{"class":610},[605,58597,58475],{"class":651},[605,58599,700],{"class":610},[605,58601,31184],{"class":614},[605,58603,637],{"class":610},[605,58605,58606,58608,58610,58612,58614,58616,58618,58620,58622,58624,58626,58628,58630,58632,58634,58636,58638,58640],{"class":607,"line":676},[605,58607,726],{"class":610},[605,58609,31184],{"class":614},[605,58611,7756],{"class":610},[605,58613,31189],{"class":618},[605,58615,625],{"class":610},[605,58617,628],{"class":610},[605,58619,58581],{"class":2800},[605,58621,2970],{"class":610},[605,58623,5536],{"class":610},[605,58625,58506],{"class":631},[605,58627,5536],{"class":610},[605,58629,4125],{"class":610},[605,58631,628],{"class":610},[605,58633,11720],{"class":610},[605,58635,58506],{"class":651},[605,58637,700],{"class":610},[605,58639,31184],{"class":614},[605,58641,637],{"class":610},[605,58643,58644,58646,58648,58650,58652,58654,58656,58658,58660,58662,58664,58666,58668,58670,58672,58674,58676,58678],{"class":607,"line":697},[605,58645,726],{"class":610},[605,58647,31184],{"class":614},[605,58649,7756],{"class":610},[605,58651,31189],{"class":618},[605,58653,625],{"class":610},[605,58655,628],{"class":610},[605,58657,58581],{"class":2800},[605,58659,2970],{"class":610},[605,58661,5536],{"class":610},[605,58663,58535],{"class":631},[605,58665,5536],{"class":610},[605,58667,4125],{"class":610},[605,58669,628],{"class":610},[605,58671,11720],{"class":610},[605,58673,58535],{"class":651},[605,58675,700],{"class":610},[605,58677,31184],{"class":614},[605,58679,637],{"class":610},[605,58681,58682],{"class":607,"line":707},[605,58683,710],{"emptyLinePlaceholder":562},[605,58685,58686,58688,58690],{"class":607,"line":713},[605,58687,726],{"class":610},[605,58689,729],{"class":614},[605,58691,637],{"class":610},[605,58693,58694,58696,58698],{"class":607,"line":723},[605,58695,749],{"class":610},[605,58697,257],{"class":614},[605,58699,637],{"class":610},[605,58701,58702,58704,58706],{"class":607,"line":746},[605,58703,825],{"class":610},[605,58705,14995],{"class":614},[605,58707,637],{"class":610},[605,58709,58710,58712,58714],{"class":607,"line":758},[605,58711,836],{"class":610},[605,58713,451],{"class":614},[605,58715,755],{"class":610},[605,58717,58718,58720,58722],{"class":607,"line":768},[605,58719,857],{"class":610},[605,58721,14995],{"class":614},[605,58723,637],{"class":610},[605,58725,58726,58728,58730],{"class":607,"line":773},[605,58727,867],{"class":610},[605,58729,257],{"class":614},[605,58731,637],{"class":610},[605,58733,58734,58736,58738],{"class":607,"line":799},[605,58735,877],{"class":610},[605,58737,729],{"class":614},[605,58739,637],{"class":610},[605,58741,58742,58744,58746],{"class":607,"line":599},[605,58743,700],{"class":610},[605,58745,718],{"class":614},[605,58747,637],{"class":610},[472,58749,7742],{"id":7741},[899,58751,58752,58760],{},[902,58753,58754],{},[905,58755,58756,58758],{},[908,58757,7807],{"align":969},[908,58759,913],{"align":969},[918,58761,58762],{},[905,58763,58764,58769],{},[923,58765,58766],{"align":969},[586,58767,58768],{},"is-playing",[923,58770,58771,58772,44693,58774],{"align":969},"Triggered when the audio changes its state (play, pause, or stop) ",[2508,58773],{},[586,58775,58776],{},"@is-playing=\"(e) => yourIsPlayingRef = e\"",[1299,58778,58779],{},"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":544,"searchDepth":545,"depth":546,"links":58781},[58782,58783,58784,58785,58786],{"id":592,"depth":546,"text":15},{"id":58045,"depth":546,"text":58046},{"id":893,"depth":546,"text":894},{"id":52871,"depth":546,"text":52872},{"id":7741,"depth":546,"text":7742},"Spatially positioned audio in 3D space.",{},{"title":451,"description":58787},"TLFQL2ek641fwQvQF_PgbsOO_fbHNr2ddRXy2dnZAUk",{"id":58792,"title":455,"body":58793,"description":59424,"extension":559,"links":560,"meta":59425,"navigation":562,"path":456,"seo":59426,"stem":457,"__hash__":59427},"docs/2.api/miscellaneous/use-animations.md",{"type":469,"value":58794,"toc":59417},[58795,58809,58811,58815,58825,59052,59056,59063,59395,59397,59414],[582,58796,58797,58799,58800,58803,58804,29567],{},[586,58798,455],{}," is a composable that returns a ",[586,58801,58802],{},"shallowReactive"," with all the models actions based on the animations provided. It is a wrapper around the ",[1112,58805,58808],{"href":58806,"rel":58807},"https://threejs.org/docs/#api/en/animation/AnimationMixer",[1116],"AnimationMixer",[472,58810,15],{"id":592},[7473,58812,58814],{"id":58813},"basic-usage-automatic-updates","Basic Usage (Automatic Updates)",[582,58816,58817,58818,58820,58821,58824],{},"By default, ",[586,58819,455],{}," automatically updates the animation mixer on each frame using the ",[586,58822,58823],{},"useLoop"," composable:",[594,58826,58829],{"className":1158,"code":58827,"highlights":58828,"language":632,"meta":544,"style":544},"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",[545,723],[586,58830,58831,58855,58859,58884,58888,58922,58948,58972,58976,58989,58993,59013,59032,59046],{"__ignoreMap":544},[605,58832,58834,58836,58838,58841,58843,58845,58847,58849,58851,58853],{"class":58833,"line":545},[607,641],[605,58835,645],{"class":644},[605,58837,648],{"class":610},[605,58839,58840],{"class":651}," useAnimations",[605,58842,655],{"class":610},[605,58844,10472],{"class":651},[605,58846,661],{"class":610},[605,58848,664],{"class":644},[605,58850,667],{"class":610},[605,58852,670],{"class":631},[605,58854,673],{"class":610},[605,58856,58857],{"class":607,"line":546},[605,58858,710],{"emptyLinePlaceholder":562},[605,58860,58861,58863,58865,58867,58869,58871,58873,58875,58877,58880,58882],{"class":607,"line":676},[605,58862,2689],{"class":618},[605,58864,648],{"class":610},[605,58866,53896],{"class":651},[605,58868,5544],{"class":610},[605,58870,2766],{"class":610},[605,58872,10472],{"class":2800},[605,58874,2970],{"class":651},[605,58876,5536],{"class":610},[605,58878,58879],{"class":631},"/models/ugly-naked-bunny.gltf",[605,58881,5536],{"class":610},[605,58883,5539],{"class":651},[605,58885,58886],{"class":607,"line":697},[605,58887,710],{"emptyLinePlaceholder":562},[605,58889,58890,58892,58895,58897,58899,58901,58903,58905,58907,58909,58911,58913,58916,58919],{"class":607,"line":707},[605,58891,2689],{"class":618},[605,58893,58894],{"class":651}," animations ",[605,58896,625],{"class":610},[605,58898,14390],{"class":2800},[605,58900,2970],{"class":651},[605,58902,14395],{"class":610},[605,58904,5501],{"class":618},[605,58906,10512],{"class":651},[605,58908,1118],{"class":610},[605,58910,5496],{"class":651},[605,58912,10582],{"class":610},[605,58914,58915],{"class":651},"animations ",[605,58917,58918],{"class":610},"||",[605,58920,58921],{"class":651}," [])\n",[605,58923,58924,58926,58928,58930,58932,58934,58936,58938,58940,58942,58944,58946],{"class":607,"line":713},[605,58925,2689],{"class":618},[605,58927,14349],{"class":651},[605,58929,625],{"class":610},[605,58931,14390],{"class":2800},[605,58933,2970],{"class":651},[605,58935,14395],{"class":610},[605,58937,5501],{"class":618},[605,58939,10512],{"class":651},[605,58941,10582],{"class":610},[605,58943,5496],{"class":651},[605,58945,10582],{"class":610},[605,58947,30736],{"class":651},[605,58949,58951,58953,58955,58958,58960,58962,58964,58967,58969],{"class":58950,"line":723},[607,641],[605,58952,2689],{"class":618},[605,58954,648],{"class":610},[605,58956,58957],{"class":651}," actions ",[605,58959,5544],{"class":610},[605,58961,2766],{"class":610},[605,58963,58840],{"class":2800},[605,58965,58966],{"class":651},"(animations",[605,58968,655],{"class":610},[605,58970,58971],{"class":651}," model)\n",[605,58973,58974],{"class":607,"line":746},[605,58975,710],{"emptyLinePlaceholder":562},[605,58977,58978,58980,58983,58985,58987],{"class":607,"line":758},[605,58979,2689],{"class":618},[605,58981,58982],{"class":651}," currentAction ",[605,58984,625],{"class":610},[605,58986,5431],{"class":2800},[605,58988,2846],{"class":651},[605,58990,58991],{"class":607,"line":768},[605,58992,710],{"emptyLinePlaceholder":562},[605,58994,58995,58997,59000,59002,59004,59007,59009,59011],{"class":607,"line":773},[605,58996,5485],{"class":2800},[605,58998,58999],{"class":651},"(actions",[605,59001,655],{"class":610},[605,59003,2713],{"class":610},[605,59005,59006],{"class":5495},"newActions",[605,59008,4125],{"class":610},[605,59010,5501],{"class":618},[605,59012,1176],{"class":610},[605,59014,59015,59018,59020,59022,59024,59027,59029],{"class":607,"line":799},[605,59016,59017],{"class":651},"  currentAction",[605,59019,1118],{"class":610},[605,59021,5496],{"class":651},[605,59023,2766],{"class":610},[605,59025,59026],{"class":651}," newActions",[605,59028,1118],{"class":610},[605,59030,59031],{"class":651},"Greeting\n",[605,59033,59034,59036,59038,59040,59042,59044],{"class":607,"line":599},[605,59035,59017],{"class":651},[605,59037,1118],{"class":610},[605,59039,5496],{"class":651},[605,59041,1118],{"class":610},[605,59043,58475],{"class":2800},[605,59045,2846],{"class":614},[605,59047,59048,59050],{"class":607,"line":822},[605,59049,5544],{"class":610},[605,59051,5539],{"class":651},[7473,59053,59055],{"id":59054},"manual-updates","Manual Updates",[582,59057,59058,59059,59062],{},"For more control over when the animation mixer updates, you can set ",[586,59060,59061],{},"manualUpdate: true"," and handle the updates yourself:",[594,59064,59067],{"className":1158,"code":59065,"highlights":59066,"language":632,"meta":544,"style":544},"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",[545,746,758,768,833],[586,59068,59069,59092,59111,59115,59139,59143,59173,59199,59230,59242,59249,59253,59258,59275,59293,59315,59321,59325,59337,59341,59359,59375,59389],{"__ignoreMap":544},[605,59070,59072,59074,59076,59078,59080,59082,59084,59086,59088,59090],{"class":59071,"line":545},[607,641],[605,59073,645],{"class":644},[605,59075,648],{"class":610},[605,59077,58840],{"class":651},[605,59079,655],{"class":610},[605,59081,10472],{"class":651},[605,59083,661],{"class":610},[605,59085,664],{"class":644},[605,59087,667],{"class":610},[605,59089,670],{"class":631},[605,59091,673],{"class":610},[605,59093,59094,59096,59098,59101,59103,59105,59107,59109],{"class":607,"line":546},[605,59095,645],{"class":644},[605,59097,648],{"class":610},[605,59099,59100],{"class":651}," useLoop",[605,59102,661],{"class":610},[605,59104,664],{"class":644},[605,59106,667],{"class":610},[605,59108,692],{"class":631},[605,59110,673],{"class":610},[605,59112,59113],{"class":607,"line":676},[605,59114,710],{"emptyLinePlaceholder":562},[605,59116,59117,59119,59121,59123,59125,59127,59129,59131,59133,59135,59137],{"class":607,"line":697},[605,59118,2689],{"class":618},[605,59120,648],{"class":610},[605,59122,53896],{"class":651},[605,59124,5544],{"class":610},[605,59126,2766],{"class":610},[605,59128,10472],{"class":2800},[605,59130,2970],{"class":651},[605,59132,5536],{"class":610},[605,59134,58879],{"class":631},[605,59136,5536],{"class":610},[605,59138,5539],{"class":651},[605,59140,59141],{"class":607,"line":707},[605,59142,710],{"emptyLinePlaceholder":562},[605,59144,59145,59147,59149,59151,59153,59155,59157,59159,59161,59163,59165,59167,59169,59171],{"class":607,"line":713},[605,59146,2689],{"class":618},[605,59148,58894],{"class":651},[605,59150,625],{"class":610},[605,59152,14390],{"class":2800},[605,59154,2970],{"class":651},[605,59156,14395],{"class":610},[605,59158,5501],{"class":618},[605,59160,10512],{"class":651},[605,59162,1118],{"class":610},[605,59164,5496],{"class":651},[605,59166,10582],{"class":610},[605,59168,58915],{"class":651},[605,59170,58918],{"class":610},[605,59172,58921],{"class":651},[605,59174,59175,59177,59179,59181,59183,59185,59187,59189,59191,59193,59195,59197],{"class":607,"line":723},[605,59176,2689],{"class":618},[605,59178,14349],{"class":651},[605,59180,625],{"class":610},[605,59182,14390],{"class":2800},[605,59184,2970],{"class":651},[605,59186,14395],{"class":610},[605,59188,5501],{"class":618},[605,59190,10512],{"class":651},[605,59192,10582],{"class":610},[605,59194,5496],{"class":651},[605,59196,10582],{"class":610},[605,59198,30736],{"class":651},[605,59200,59202,59204,59206,59209,59211,59214,59216,59218,59220,59222,59224,59226,59228],{"class":59201,"line":746},[607,641],[605,59203,2689],{"class":618},[605,59205,648],{"class":610},[605,59207,59208],{"class":651}," actions",[605,59210,655],{"class":610},[605,59212,59213],{"class":651}," mixer ",[605,59215,5544],{"class":610},[605,59217,2766],{"class":610},[605,59219,58840],{"class":2800},[605,59221,58966],{"class":651},[605,59223,655],{"class":610},[605,59225,14400],{"class":651},[605,59227,655],{"class":610},[605,59229,1176],{"class":610},[605,59231,59233,59236,59238,59240],{"class":59232,"line":758},[607,641],[605,59234,59235],{"class":614},"  manualUpdate",[605,59237,1190],{"class":610},[605,59239,10938],{"class":3870},[605,59241,14031],{"class":610},[605,59243,59245,59247],{"class":59244,"line":768},[607,641],[605,59246,5544],{"class":610},[605,59248,5539],{"class":651},[605,59250,59251],{"class":607,"line":773},[605,59252,710],{"emptyLinePlaceholder":562},[605,59254,59255],{"class":607,"line":799},[605,59256,59257],{"class":1181},"// Handle updates manually\n",[605,59259,59260,59262,59264,59267,59269,59271,59273],{"class":607,"line":599},[605,59261,2689],{"class":618},[605,59263,648],{"class":610},[605,59265,59266],{"class":651}," onBeforeRender ",[605,59268,5544],{"class":610},[605,59270,2766],{"class":610},[605,59272,59100],{"class":2800},[605,59274,2846],{"class":651},[605,59276,59277,59280,59282,59284,59287,59289,59291],{"class":607,"line":822},[605,59278,59279],{"class":2800},"onBeforeRender",[605,59281,2970],{"class":651},[605,59283,32718],{"class":610},[605,59285,59286],{"class":5495}," delta",[605,59288,32735],{"class":610},[605,59290,5501],{"class":618},[605,59292,1176],{"class":610},[605,59294,59296,59299,59301,59303,59305,59308,59310,59313],{"class":59295,"line":833},[607,641],[605,59297,59298],{"class":651},"  mixer",[605,59300,1118],{"class":610},[605,59302,5496],{"class":651},[605,59304,1118],{"class":610},[605,59306,59307],{"class":2800},"update",[605,59309,2970],{"class":614},[605,59311,59312],{"class":651},"delta",[605,59314,5539],{"class":614},[605,59316,59317,59319],{"class":607,"line":844},[605,59318,5544],{"class":610},[605,59320,5539],{"class":651},[605,59322,59323],{"class":607,"line":854},[605,59324,710],{"emptyLinePlaceholder":562},[605,59326,59327,59329,59331,59333,59335],{"class":607,"line":600},[605,59328,2689],{"class":618},[605,59330,58982],{"class":651},[605,59332,625],{"class":610},[605,59334,5431],{"class":2800},[605,59336,2846],{"class":651},[605,59338,59339],{"class":607,"line":874},[605,59340,710],{"emptyLinePlaceholder":562},[605,59342,59343,59345,59347,59349,59351,59353,59355,59357],{"class":607,"line":884},[605,59344,5485],{"class":2800},[605,59346,58999],{"class":651},[605,59348,655],{"class":610},[605,59350,2713],{"class":610},[605,59352,59006],{"class":5495},[605,59354,4125],{"class":610},[605,59356,5501],{"class":618},[605,59358,1176],{"class":610},[605,59360,59361,59363,59365,59367,59369,59371,59373],{"class":607,"line":2952},[605,59362,59017],{"class":651},[605,59364,1118],{"class":610},[605,59366,5496],{"class":651},[605,59368,2766],{"class":610},[605,59370,59026],{"class":651},[605,59372,1118],{"class":610},[605,59374,59031],{"class":651},[605,59376,59377,59379,59381,59383,59385,59387],{"class":607,"line":2960},[605,59378,59017],{"class":651},[605,59380,1118],{"class":610},[605,59382,5496],{"class":651},[605,59384,1118],{"class":610},[605,59386,58475],{"class":2800},[605,59388,2846],{"class":614},[605,59390,59391,59393],{"class":607,"line":2990},[605,59392,5544],{"class":610},[605,59394,5539],{"class":651},[472,59396,7487],{"id":11049},[3136,59398,59399],{},[3139,59400,59401,59404,59405,59407,59408,59411,59412,1118],{},[586,59402,59403],{},"manualUpdate"," (optional): When set to ",[586,59406,933],{},", disables automatic animation mixer updates. You'll need to call ",[586,59409,59410],{},"mixer.value.update(delta)"," manually. Default is ",[586,59413,943],{},[1299,59415,59416],{},"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":544,"searchDepth":545,"depth":546,"links":59418},[59419,59423],{"id":592,"depth":546,"text":15,"children":59420},[59421,59422],{"id":58813,"depth":676,"text":58814},{"id":59054,"depth":676,"text":59055},{"id":11049,"depth":546,"text":7487},"Composable for managing model animations with AnimationMixer.",{},{"title":455,"description":59424},"iCyBwuF5jrzPOjMLnx9xDEofW-eBBjmSEN5Y-EmIYb4",{"id":59429,"title":459,"body":59430,"description":60072,"extension":559,"links":560,"meta":60073,"navigation":562,"path":460,"seo":60074,"stem":461,"__hash__":60075},"docs/2.api/miscellaneous/use-gltf-exporter.md",{"type":469,"value":59431,"toc":60066},[59432,59448,59450,59863,59867,59916,59918,60063],[582,59433,59434,59439,59440,59444,59445,59447],{},[1112,59435,59438],{"href":59436,"rel":59437},"https://threejs.org/docs/index.html?q=expo#examples/en/exporters/GLTFExporter",[1116],"GLTFExporter"," is an addon in threeJs that allows you to download any object3D in a ",[1112,59441,10972],{"href":59442,"rel":59443},"https://www.khronos.org/gltf",[1116]," format. ",[1673,59446,10429],{}," provides a composable that simplifies this process with just a few lines of code.",[472,59449,30096],{"id":30095},[594,59451,59454],{"className":596,"code":59452,"highlights":59453,"language":601,"meta":544,"style":544},"\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",[676,768],[586,59455,59456,59476,59494,59514,59532,59536,59548,59552,59557,59572,59614,59618,59626,59634,59656,59688,59694,59706,59720,59734,59750,59754,59786,59807,59815,59847,59855],{"__ignoreMap":544},[605,59457,59458,59460,59462,59464,59466,59468,59470,59472,59474],{"class":607,"line":545},[605,59459,611],{"class":610},[605,59461,615],{"class":614},[605,59463,619],{"class":618},[605,59465,622],{"class":618},[605,59467,625],{"class":610},[605,59469,628],{"class":610},[605,59471,632],{"class":631},[605,59473,628],{"class":610},[605,59475,637],{"class":610},[605,59477,59478,59480,59482,59484,59486,59488,59490,59492],{"class":607,"line":546},[605,59479,645],{"class":644},[605,59481,648],{"class":610},[605,59483,683],{"class":651},[605,59485,661],{"class":610},[605,59487,664],{"class":644},[605,59489,667],{"class":610},[605,59491,692],{"class":631},[605,59493,673],{"class":610},[605,59495,59497,59499,59501,59504,59506,59508,59510,59512],{"class":59496,"line":676},[607,641],[605,59498,645],{"class":644},[605,59500,648],{"class":610},[605,59502,59503],{"class":651}," useGLTFExporter",[605,59505,661],{"class":610},[605,59507,664],{"class":644},[605,59509,667],{"class":610},[605,59511,670],{"class":631},[605,59513,673],{"class":610},[605,59515,59516,59518,59520,59522,59524,59526,59528,59530],{"class":607,"line":697},[605,59517,645],{"class":644},[605,59519,648],{"class":610},[605,59521,9716],{"class":651},[605,59523,661],{"class":610},[605,59525,664],{"class":644},[605,59527,667],{"class":610},[605,59529,601],{"class":631},[605,59531,673],{"class":610},[605,59533,59534],{"class":607,"line":707},[605,59535,710],{"emptyLinePlaceholder":562},[605,59537,59538,59540,59542,59544,59546],{"class":607,"line":713},[605,59539,2689],{"class":618},[605,59541,9711],{"class":651},[605,59543,625],{"class":610},[605,59545,9716],{"class":2800},[605,59547,2846],{"class":651},[605,59549,59550],{"class":607,"line":723},[605,59551,710],{"emptyLinePlaceholder":562},[605,59553,59554],{"class":607,"line":746},[605,59555,59556],{"class":1181},"// the second argument – options – is not required\n",[605,59558,59559,59561,59564,59566,59568,59570],{"class":607,"line":758},[605,59560,2689],{"class":618},[605,59562,59563],{"class":651}," downloadBox ",[605,59565,625],{"class":610},[605,59567,51232],{"class":610},[605,59569,5501],{"class":618},[605,59571,1176],{"class":610},[605,59573,59575,59578,59580,59582,59584,59586,59588,59590,59593,59595,59597,59599,59601,59603,59606,59608,59610,59612],{"class":59574,"line":768},[607,641],[605,59576,59577],{"class":2800},"  useGLTFExporter",[605,59579,2970],{"class":614},[605,59581,9809],{"class":651},[605,59583,1118],{"class":610},[605,59585,5496],{"class":651},[605,59587,655],{"class":610},[605,59589,648],{"class":610},[605,59591,59592],{"class":614}," fileName",[605,59594,1190],{"class":610},[605,59596,667],{"class":610},[605,59598,15269],{"class":631},[605,59600,5536],{"class":610},[605,59602,655],{"class":610},[605,59604,59605],{"class":614}," binary",[605,59607,1190],{"class":610},[605,59609,10938],{"class":3870},[605,59611,661],{"class":610},[605,59613,5539],{"class":614},[605,59615,59616],{"class":607,"line":773},[605,59617,1297],{"class":610},[605,59619,59620,59622,59624],{"class":607,"line":799},[605,59621,700],{"class":610},[605,59623,615],{"class":614},[605,59625,637],{"class":610},[605,59627,59628,59630,59632],{"class":607,"line":599},[605,59629,611],{"class":610},[605,59631,718],{"class":614},[605,59633,637],{"class":610},[605,59635,59636,59638,59640,59642,59644,59646,59648,59650,59653],{"class":607,"line":822},[605,59637,726],{"class":610},[605,59639,729],{"class":614},[605,59641,732],{"class":618},[605,59643,625],{"class":610},[605,59645,628],{"class":610},[605,59647,5040],{"class":631},[605,59649,628],{"class":610},[605,59651,59652],{"class":618}," window-size",[605,59654,59655],{"class":610}," >\n",[605,59657,59658,59660,59662,59664,59666,59668,59670,59672,59674,59676,59678,59680,59682,59684,59686],{"class":607,"line":833},[605,59659,749],{"class":610},[605,59661,752],{"class":614},[605,59663,781],{"class":610},[605,59665,1459],{"class":618},[605,59667,625],{"class":610},[605,59669,628],{"class":610},[605,59671,1466],{"class":610},[605,59673,937],{"class":791},[605,59675,1471],{"class":610},[605,59677,792],{"class":791},[605,59679,1471],{"class":610},[605,59681,2396],{"class":791},[605,59683,1481],{"class":610},[605,59685,628],{"class":610},[605,59687,755],{"class":610},[605,59689,59690,59692],{"class":607,"line":844},[605,59691,749],{"class":610},[605,59693,2957],{"class":614},[605,59695,59696,59698,59700,59702,59704],{"class":607,"line":854},[605,59697,5679],{"class":618},[605,59699,625],{"class":610},[605,59701,628],{"class":610},[605,59703,9809],{"class":631},[605,59705,2987],{"class":610},[605,59707,59708,59710,59712,59714,59716,59718],{"class":607,"line":600},[605,59709,5693],{"class":610},[605,59711,4081],{"class":618},[605,59713,625],{"class":610},[605,59715,628],{"class":610},[605,59717,21690],{"class":791},[605,59719,2987],{"class":610},[605,59721,59722,59724,59726,59728,59730,59732],{"class":607,"line":874},[605,59723,5693],{"class":610},[605,59725,784],{"class":618},[605,59727,625],{"class":610},[605,59729,628],{"class":610},[605,59731,1478],{"class":791},[605,59733,2987],{"class":610},[605,59735,59736,59739,59741,59743,59745,59748],{"class":607,"line":884},[605,59737,59738],{"class":610},"      @",[605,59740,31189],{"class":618},[605,59742,625],{"class":610},[605,59744,628],{"class":610},[605,59746,59747],{"class":651},"downloadBox",[605,59749,2987],{"class":610},[605,59751,59752],{"class":607,"line":2952},[605,59753,5713],{"class":610},[605,59755,59756,59758,59760,59762,59764,59766,59768,59770,59772,59774,59776,59778,59780,59782,59784],{"class":607,"line":2960},[605,59757,825],{"class":610},[605,59759,839],{"class":614},[605,59761,781],{"class":610},[605,59763,1989],{"class":618},[605,59765,625],{"class":610},[605,59767,628],{"class":610},[605,59769,1466],{"class":610},[605,59771,1893],{"class":791},[605,59773,1471],{"class":610},[605,59775,1893],{"class":791},[605,59777,1471],{"class":610},[605,59779,1893],{"class":791},[605,59781,1481],{"class":610},[605,59783,628],{"class":610},[605,59785,755],{"class":610},[605,59787,59788,59790,59792,59794,59796,59798,59800,59803,59805],{"class":607,"line":2990},[605,59789,825],{"class":610},[605,59791,13421],{"class":614},[605,59793,781],{"class":610},[605,59795,2500],{"class":618},[605,59797,625],{"class":610},[605,59799,628],{"class":610},[605,59801,59802],{"class":791},"0x00ff00",[605,59804,628],{"class":610},[605,59806,755],{"class":610},[605,59808,59809,59811,59813],{"class":607,"line":3007},[605,59810,867],{"class":610},[605,59812,828],{"class":614},[605,59814,637],{"class":610},[605,59816,59817,59819,59821,59823,59825,59827,59829,59831,59833,59835,59837,59839,59841,59843,59845],{"class":607,"line":3022},[605,59818,749],{"class":610},[605,59820,3539],{"class":614},[605,59822,781],{"class":610},[605,59824,1459],{"class":618},[605,59826,625],{"class":610},[605,59828,628],{"class":610},[605,59830,1466],{"class":610},[605,59832,937],{"class":791},[605,59834,1471],{"class":610},[605,59836,1478],{"class":791},[605,59838,1471],{"class":610},[605,59840,1478],{"class":791},[605,59842,1481],{"class":610},[605,59844,628],{"class":610},[605,59846,755],{"class":610},[605,59848,59849,59851,59853],{"class":607,"line":3047},[605,59850,877],{"class":610},[605,59852,729],{"class":614},[605,59854,637],{"class":610},[605,59856,59857,59859,59861],{"class":607,"line":2591},[605,59858,700],{"class":610},[605,59860,718],{"class":614},[605,59862,637],{"class":610},[472,59864,59866],{"id":59865},"arguments","Arguments",[899,59868,59869,59881],{},[902,59870,59871],{},[905,59872,59873,59875,59877,59879],{},[908,59874,3118],{"align":969},[908,59876,10957],{},[908,59878,916],{},[908,59880,913],{},[918,59882,59883,59899],{},[905,59884,59885,59890,59894,59896],{},[923,59886,59887],{"align":969},[1673,59888,59889],{},"Selector",[923,59891,59892],{},[586,59893,2578],{},[923,59895,26998],{},[923,59897,59898],{},"The object to download. Could be an array of objects",[905,59900,59901,59905,59909,59913],{},[923,59902,59903],{"align":969},[1673,59904,7487],{},[923,59906,59907],{},[586,59908,7487],{},[923,59910,59911],{},[586,59912,1151],{},[923,59914,59915],{},"Description below",[7473,59917,7487],{"id":11049},[899,59919,59920,59932],{},[902,59921,59922],{},[905,59923,59924,59926,59928,59930],{},[908,59925,3118],{"align":969},[908,59927,10957],{"align":969},[908,59929,916],{"align":969},[908,59931,913],{"align":969},[918,59933,59934,59953,59971,59989,60007,60026,60044],{},[905,59935,59936,59941,59946,59950],{},[923,59937,59938],{"align":969},[1673,59939,59940],{},"trs",[923,59942,59943],{"align":969},[586,59944,59945],{},"bool",[923,59947,59948],{"align":969},[586,59949,943],{},[923,59951,59952],{"align":969},"Export position, rotation and scale instead of matrix per node",[905,59954,59955,59960,59964,59968],{},[923,59956,59957],{"align":969},[1673,59958,59959],{},"onlyVisible",[923,59961,59962],{"align":969},[586,59963,59945],{},[923,59965,59966],{"align":969},[586,59967,933],{},[923,59969,59970],{"align":969},"Export only visible objects",[905,59972,59973,59978,59982,59986],{},[923,59974,59975],{"align":969},[1673,59976,59977],{},"binary",[923,59979,59980],{"align":969},[586,59981,59945],{},[923,59983,59984],{"align":969},[586,59985,943],{},[923,59987,59988],{"align":969},"Export in binary (.glb) format, returning an ArrayBuffer",[905,59990,59991,59996,60000,60004],{},[923,59992,59993],{"align":969},[1673,59994,59995],{},"maxTextureSize",[923,59997,59998],{"align":969},[586,59999,2537],{},[923,60001,60002],{"align":969},[586,60003,6938],{},[923,60005,60006],{"align":969},"Restricts the image maximum size (both width and height) to the given value",[905,60008,60009,60014,60019,60023],{},[923,60010,60011],{"align":969},[1673,60012,60013],{},"animations",[923,60015,60016],{"align":969},[586,60017,60018],{},"Array\u003CAnimationClip>",[923,60020,60021],{"align":969},[586,60022,1151],{},[923,60024,60025],{"align":969},"List of animations to be included in the export",[905,60027,60028,60033,60037,60041],{},[923,60029,60030],{"align":969},[1673,60031,60032],{},"includeCustomExtensions",[923,60034,60035],{"align":969},[586,60036,59945],{},[923,60038,60039],{"align":969},[586,60040,943],{},[923,60042,60043],{"align":969},"Export custom glTF extensions defined on an object's userData.gltfExtensions",[905,60045,60046,60051,60055,60060],{},[923,60047,60048],{"align":969},[1673,60049,60050],{},"fileName",[923,60052,60053],{"align":969},[586,60054,11094],{},[923,60056,60057],{"align":969},[586,60058,60059],{},"Object name",[923,60061,60062],{"align":969},"Name of the generated file",[1299,60064,60065],{},"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":544,"searchDepth":545,"depth":546,"links":60067},[60068,60069],{"id":30095,"depth":546,"text":30096},{"id":59865,"depth":546,"text":59866,"children":60070},[60071],{"id":11049,"depth":676,"text":7487},"Export 3D objects to GLTF format.",{},{"title":459,"description":60072},"3QIj-mzj5A7IeWk0Vkq2It6oF4RUDzhG6kHTbRNKYAY",{"id":60077,"title":463,"body":60078,"description":60367,"extension":559,"links":560,"meta":60368,"navigation":562,"path":464,"seo":60369,"stem":465,"__hash__":60370},"docs/2.api/miscellaneous/use-intersect.md",{"type":469,"value":60079,"toc":60362},[60080,60097,60099,60115,60259,60261,60289,60293,60360],[582,60081,60082,60084,60085,50469,60088,60090,60091,60096],{},[586,60083,463],{}," is a function that returns ",[586,60086,60087],{},"intersect",[586,60089,52921],{}," that's updated when the observed object enters or leaves the screen. This relies on ",[1112,60092,60095],{"href":60093,"rel":60094},"https://threejs.org/docs/#api/en/core/Object3D.onBeforeRender",[1116],"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.",[472,60098,15],{"id":592},[3725,60100,60101],{},[582,60102,60103,60105,60106,60108,60109,60111,60112,1118],{},[586,60104,463],{}," requires a ",[586,60107,729],{}," context, so it is only available in ",[586,60110,729],{}," descendant components' ",[586,60113,60114],{},"\u003Cscript setup>",[594,60116,60119],{"className":596,"code":60117,"highlights":60118,"language":601,"meta":544,"style":544},"\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",[546,697],[586,60120,60121,60141,60166,60170,60197,60205,60209,60217,60235,60243,60251],{"__ignoreMap":544},[605,60122,60123,60125,60127,60129,60131,60133,60135,60137,60139],{"class":607,"line":545},[605,60124,611],{"class":610},[605,60126,615],{"class":614},[605,60128,619],{"class":618},[605,60130,622],{"class":618},[605,60132,625],{"class":610},[605,60134,628],{"class":610},[605,60136,632],{"class":631},[605,60138,628],{"class":610},[605,60140,637],{"class":610},[605,60142,60144,60146,60148,60151,60153,60156,60158,60160,60162,60164],{"class":60143,"line":546},[607,641],[605,60145,645],{"class":644},[605,60147,648],{"class":610},[605,60149,60150],{"class":651}," Torus",[605,60152,655],{"class":610},[605,60154,60155],{"class":651}," useIntersect",[605,60157,661],{"class":610},[605,60159,664],{"class":644},[605,60161,667],{"class":610},[605,60163,670],{"class":631},[605,60165,673],{"class":610},[605,60167,60168],{"class":607,"line":676},[605,60169,710],{"emptyLinePlaceholder":562},[605,60171,60173,60175,60177,60179,60181,60184,60186,60189,60191,60193,60195],{"class":60172,"line":697},[607,641],[605,60174,2689],{"class":618},[605,60176,648],{"class":610},[605,60178,5431],{"class":651},[605,60180,655],{"class":610},[605,60182,60183],{"class":651}," intersect",[605,60185,655],{"class":610},[605,60187,60188],{"class":651}," off ",[605,60190,5544],{"class":610},[605,60192,2766],{"class":610},[605,60194,60155],{"class":2800},[605,60196,2846],{"class":651},[605,60198,60199,60201,60203],{"class":607,"line":707},[605,60200,700],{"class":610},[605,60202,615],{"class":614},[605,60204,637],{"class":610},[605,60206,60207],{"class":607,"line":713},[605,60208,710],{"emptyLinePlaceholder":562},[605,60210,60211,60213,60215],{"class":607,"line":723},[605,60212,611],{"class":610},[605,60214,718],{"class":614},[605,60216,637],{"class":610},[605,60218,60219,60221,60223,60225,60227,60229,60231,60233],{"class":607,"line":746},[605,60220,726],{"class":610},[605,60222,269],{"class":614},[605,60224,5431],{"class":618},[605,60226,625],{"class":610},[605,60228,628],{"class":610},[605,60230,11627],{"class":631},[605,60232,628],{"class":610},[605,60234,637],{"class":610},[605,60236,60237,60239,60241],{"class":607,"line":758},[605,60238,749],{"class":610},[605,60240,849],{"class":614},[605,60242,755],{"class":610},[605,60244,60245,60247,60249],{"class":607,"line":768},[605,60246,877],{"class":610},[605,60248,269],{"class":614},[605,60250,637],{"class":610},[605,60252,60253,60255,60257],{"class":607,"line":773},[605,60254,700],{"class":610},[605,60256,718],{"class":614},[605,60258,637],{"class":610},[472,60260,59866],{"id":59865},[899,60262,60263,60273],{},[902,60264,60265],{},[905,60266,60267,60269,60271],{},[908,60268,3118],{"align":969},[908,60270,913],{},[908,60272,10957],{},[918,60274,60275],{},[905,60276,60277,60281,60284],{},[923,60278,60279],{"align":969},[1673,60280,7766],{},[923,60282,60283],{},"Optional callback function triggered when the observed object enters or leaves the screen.",[923,60285,60286],{},[586,60287,60288],{},"(isIntersected: boolean) => void",[472,60290,60292],{"id":60291},"return","Return",[899,60294,60295,60305],{},[902,60296,60297],{},[905,60298,60299,60301,60303],{},[908,60300,3118],{"align":969},[908,60302,913],{},[908,60304,10957],{},[918,60306,60307,60325,60340],{},[905,60308,60309,60313,60320],{},[923,60310,60311],{"align":969},[1673,60312,11627],{},[923,60314,60315,60316,60319],{},"Vue ",[586,60317,60318],{},"ShallowRef"," to pass to the object to be observed.",[923,60321,60322],{},[586,60323,60324],{},"ShallowRef\u003CObject3D>",[905,60326,60327,60332,60335],{},[923,60328,60329],{"align":969},[1673,60330,60331],{},"intersects",[923,60333,60334],{},"Updates when the observed object's intersect status changes.",[923,60336,60337],{},[586,60338,60339],{},"ShallowRef\u003Cboolean>",[905,60341,60342,60347,60356],{},[923,60343,60344],{"align":969},[1673,60345,60346],{},"off",[923,60348,60349,60350,60352,60353,60355],{},"Calling this function stops ",[586,60351,463],{}," until ",[586,60354,11627],{}," changes.",[923,60357,60358],{},[586,60359,16226],{},[1299,60361,38388],{},{"title":544,"searchDepth":545,"depth":546,"links":60363},[60364,60365,60366],{"id":592,"depth":546,"text":15},{"id":59865,"depth":546,"text":59866},{"id":60291,"depth":546,"text":60292},"Detect when objects enter or leave the screen.",{},{"title":463,"description":60367},"QAcMQnGWf_fxqwXEeZxQJtNfPCiyyVyBtXuwXAh1Cg4",1771328668958]