[{"data":1,"prerenderedAt":60356},["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":36780,"objects-list":44341,"misc-list":56377},[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},"Er67NB_D9l-p90cx_F8Ueo3oYf_90DhOHx1q_8YgH3g",{"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},"eWpsm_0O2uskMZJ3Ht1Sb5JPGHO3WvELbtkQ2LoRQO0",{"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},"9FTfBPclSGZMDwzt-akBsJF1ppNDXZK3MP6nddxg3dg",{"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},"qI6m7jV8AEZ5_Ruhn6hSlmpTi7LrcHgetMD_vYArm8Y",{"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},"7AUdT-SMH4R5MsKpuypi4UzVsHt7S7ryCNHpJVv28A8",{"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,35628,36325],{"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},"TB1Ehaki9I6r1J_wGeA_UAl3knLim1b5GHqTm1K7PNY",{"id":34108,"title":329,"body":34109,"description":35624,"extension":559,"links":560,"meta":35625,"navigation":562,"path":330,"seo":35626,"stem":331,"__hash__":35627},"docs/2.api/7.light-shadow/lensflare.md",{"type":469,"value":34110,"toc":35608},[34111,34116,34127,34129,34262,34264,34389,34393,34399,34407,34413,34470,34474,34480,34494,34501,34505,34531,34548,34554,34559,34564,34571,34577,34669,34674,34678,34683,34696,34700,34708,34765,34775,34778,34798,34807,34814,34818,34821,34829,34841,34849,34875,34882,34915,34919,34922,34966,34980,34985,34988,34991,35014,35033,35038,35042,35045,35177,35182,35187,35376,35382,35388,35391,35394,35605],[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,34308,34325,34341,34358,34373],{},[905,34279,34280,34284,34289],{},[923,34281,34282],{"align":969},[1673,34283,784],{},[923,34285,34286,34288],{"align":969},[586,34287,2537],{}," – multiplier for lensflare element sizes",[923,34290,34291],{"align":969},[586,34292,7085],{},[905,34294,34295,34299,34304],{},[923,34296,34297],{"align":969},[1673,34298,6945],{},[923,34300,34301,34303],{"align":969},[586,34302,2537],{}," – multiplier for element distances from flare center",[923,34305,34306],{"align":969},[586,34307,7085],{},[905,34309,34310,34315,34321],{},[923,34311,34312],{"align":969},[1673,34313,34314],{},"elements",[923,34316,34317,34320],{"align":969},[586,34318,34319],{},"Partial<LensflareElementProps>[]"," – array of lensflare element properties",[923,34322,34323],{"align":969},[586,34324,1151],{},[905,34326,34327,34332,34337],{},[923,34328,34329],{"align":969},[1673,34330,34331],{},"seed",[923,34333,34334,34336],{"align":969},[586,34335,2537],{}," – random seed for generating random seeded elements",[923,34338,34339],{"align":969},[586,34340,1151],{},[905,34342,34343,34348,34354],{},[923,34344,34345],{"align":969},[1673,34346,34347],{},"seedProps",[923,34349,34350,34353],{"align":969},[586,34351,34352],{},"SeedProps[]"," – specifications for generating random seeded elements",[923,34355,34356],{"align":969},[586,34357,1151],{},[905,34359,34360,34364,34369],{},[923,34361,34362],{"align":969},[1673,34363,2500],{},[923,34365,34366,34368],{"align":969},[586,34367,2515],{}," – default color of lensflare elements",[923,34370,34371],{"align":969},[586,34372,1151],{},[905,34374,34375,34379,34385],{},[923,34376,34377],{"align":969},[1673,34378,13433],{},[923,34380,34381,34384],{"align":969},[586,34382,34383],{},"Texture | string"," – default texture of lensflare elements",[923,34386,34387],{"align":969},[586,34388,1151],{},[472,34390,34391],{"id":34314},[586,34392,34314],{},[582,34394,34395,34396,34398],{},"You can specify individual lensflare element properties directly using the component's ",[586,34397,34314],{}," prop.",[582,34400,2253,34401,34403,34404,1118],{},[586,34402,34314],{}," prop expects an instance of ",[586,34405,34406],{},"(Partial\u003CLensflareElementProps>)[]",[582,34408,34409,34410,34412],{},"Every object in ",[586,34411,34314],{}," may have any (or none) of the following properties.",[899,34414,34415,34423],{},[902,34416,34417],{},[905,34418,34419,34421],{},[908,34420,3118],{"align":969},[908,34422,913],{"align":969},[918,34424,34425,34437,34448,34459],{},[905,34426,34427,34431],{},[923,34428,34429],{"align":969},[1673,34430,13433],{},[923,34432,34433,34436],{"align":969},[586,34434,34435],{},"string | Texture"," - an image URL or texture to use on the lensflare element",[905,34438,34439,34443],{},[923,34440,34441],{"align":969},[1673,34442,2500],{},[923,34444,34445,34447],{"align":969},[586,34446,2515],{}," - color of the lensflare element",[905,34449,34450,34454],{},[923,34451,34452],{"align":969},[1673,34453,6945],{},[923,34455,34456,34458],{"align":969},[586,34457,2537],{}," - distance of the lensflare element from the lensflare center",[905,34460,34461,34465],{},[923,34462,34463],{"align":969},[1673,34464,10233],{},[923,34466,34467,34469],{"align":969},[586,34468,2537],{}," - size of the lensflare element",[472,34471,34472],{"id":34331},[586,34473,34331],{},[582,34475,34476,34477,34479],{},"Adding a ",[586,34478,34331],{}," prop to a component enables seeded random element generation.",[582,34481,2253,34482,34484,34485,34490,34491,1118],{},[586,34483,34331],{}," prop is used as the \"seed\" in a ",[1112,34486,34489],{"href":34487,"rel":34488},"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,34492,34493],{},"SeedProps",[2046,34495,34496],{},[582,34497,34498,34499,1118],{},"If you set a seed but not seedProps, the component will fall back to the default, built-in SeedProps",[605,34500],{},[7473,34502,34504],{"id":34503},"example","Example",[594,34506,34508],{"className":596,"code":34507,"language":601,"meta":544,"style":544},"\u003CLensflare :seed=\"seedRef\" />\n",[586,34509,34510],{"__ignoreMap":544},[605,34511,34512,34514,34516,34518,34520,34522,34524,34527,34529],{"class":607,"line":545},[605,34513,611],{"class":610},[605,34515,329],{"class":614},[605,34517,781],{"class":610},[605,34519,34331],{"class":618},[605,34521,625],{"class":610},[605,34523,628],{"class":610},[605,34525,34526],{"class":651},"seedRef",[605,34528,628],{"class":610},[605,34530,755],{"class":610},[582,34532,34533,34534,16781,34537,1471,34539,1471,34541,1471,34543,1471,34545,34547],{},"Below, the results of setting ",[586,34535,34536],{},"seedRef.value",[586,34538,937],{},[586,34540,1893],{},[586,34542,792],{},[586,34544,4160],{},[586,34546,3490],{},", respectively.",[582,34549,34550],{},[3267,34551],{"alt":34552,"src":34553},"Lensflare seeds 0-4","/cientos/lensflare_seeds.png",[472,34555,34557],{"id":34556},"seedprops",[586,34558,34347],{},[582,34560,34476,34561,34563],{},[586,34562,34347],{}," prop to the component enables seeded random element generation.",[582,34565,2253,34566,34403,34568,34570],{},[586,34567,34347],{},[586,34569,34352],{},". It specifies rules and acceptable values for creating random lensflare elements.",[582,34572,34573,34574,34576],{},"Every element in ",[586,34575,34347],{}," has this shape.",[899,34578,34579,34589],{},[902,34580,34581],{},[905,34582,34583,34585,34587],{},[908,34584,3118],{"align":969},[908,34586,913],{"align":969},[908,34588,26998],{},[918,34590,34591,34604,34617,34630,34643,34656],{},[905,34592,34593,34597,34602],{},[923,34594,34595],{"align":969},[1673,34596,13433],{},[923,34598,34599,34601],{"align":969},[586,34600,15348],{}," - array of 1 or more image URLs; a single texture will be selected per generated element",[923,34603,27017],{},[905,34605,34606,34610,34615],{},[923,34607,34608],{"align":969},[1673,34609,2500],{},[923,34611,34612,34614],{"align":969},[586,34613,23523],{}," - array of 1 or more colors; a single color will be selected per generated element",[923,34616,27017],{},[905,34618,34619,34623,34628],{},[923,34620,34621],{"align":969},[1673,34622,6945],{},[923,34624,34625,34627],{"align":969},[586,34626,22132],{}," - minimum and maximum allowable distance from the flare center",[923,34629,27017],{},[905,34631,34632,34636,34641],{},[923,34633,34634],{"align":969},[1673,34635,10233],{},[923,34637,34638,34640],{"align":969},[586,34639,22132],{}," - minimum and maximum allowable size",[923,34642,27017],{},[905,34644,34645,34649,34654],{},[923,34646,34647],{"align":969},[1673,34648,14616],{},[923,34650,34651,34653],{"align":969},[586,34652,22132],{}," - minimum and maximum allowable number of elements to generate",[923,34655,27017],{},[905,34657,34658,34662,34667],{},[923,34659,34660],{"align":969},[1673,34661,34331],{},[923,34663,34664,34666],{"align":969},[586,34665,2537],{}," - if set, when this entry is processed, the random number generator with a combination of the incoming seed and this seed",[923,34668,27051],{},[2046,34670,34671],{},[582,34672,34673],{},"If you set seedProps but not seed, the component will fall back to a default seed of 0.",[472,34675,34677],{"id":34676},"random-elements-and-non-random-properties","Random elements and non-random properties",[582,34679,34680,34682],{},[586,34681,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,34684,34686],{"className":596,"code":34685,"language":601,"meta":544,"style":544},"\u003CLensflare />\n",[586,34687,34688],{"__ignoreMap":544},[605,34689,34690,34692,34694],{"class":607,"line":545},[605,34691,611],{"class":610},[605,34693,329],{"class":614},[605,34695,755],{"class":610},[7473,34697,34699],{"id":34698},"non-random-properties","Non-random properties",[582,34701,34702,34703,34398],{},"You can provide a list of lensflare element properties using the ",[1112,34704,34706],{"href":34705},"#elements",[586,34707,34314],{},[594,34709,34711],{"className":596,"code":34710,"language":601,"meta":544,"style":544},"\u003CLensflare :elements=\"[{ color: 'red' }, { color: 'yellow' }]\" />\n",[586,34712,34713],{"__ignoreMap":544},[605,34714,34715,34717,34719,34721,34723,34725,34727,34729,34732,34734,34736,34738,34740,34742,34745,34747,34749,34751,34753,34755,34757,34759,34761,34763],{"class":607,"line":545},[605,34716,611],{"class":610},[605,34718,329],{"class":614},[605,34720,781],{"class":610},[605,34722,34314],{"class":618},[605,34724,625],{"class":610},[605,34726,628],{"class":610},[605,34728,1466],{"class":651},[605,34730,34731],{"class":610},"{",[605,34733,3978],{"class":614},[605,34735,1190],{"class":610},[605,34737,667],{"class":610},[605,34739,29784],{"class":631},[605,34741,5536],{"class":610},[605,34743,34744],{"class":610}," },",[605,34746,648],{"class":610},[605,34748,3978],{"class":614},[605,34750,1190],{"class":610},[605,34752,667],{"class":610},[605,34754,29928],{"class":631},[605,34756,5536],{"class":610},[605,34758,661],{"class":610},[605,34760,1481],{"class":651},[605,34762,628],{"class":610},[605,34764,755],{"class":610},[582,34766,34767,34768,1471,34770,1471,34772,34774],{},"This will produce a lensflare with 2 elements. The first element will be red. The second will be yellow. The unspecified properties – ",[586,34769,6945],{},[586,34771,10233],{},[586,34773,13433],{}," – will be filled in by the built-in defaults in this case.",[582,34776,34777],{},"You can also provide default props which will overwrite random generated props.",[594,34779,34781],{"className":596,"code":34780,"language":601,"meta":544,"style":544},"\u003CLensflare color:\"red\" />\n",[586,34782,34783],{"__ignoreMap":544},[605,34784,34785,34787,34789,34792,34795],{"class":607,"line":545},[605,34786,611],{"class":610},[605,34788,329],{"class":614},[605,34790,34791],{"class":618}," color:",[605,34793,34794],{"class":651},"\"red\" ",[605,34796,34797],{"class":610},"/>\n",[582,34799,34800,34801,34803,34804,34806],{},"Since ",[586,34802,34314],{}," is not defined here, the component will generate random lensflare elements. The specified ",[586,34805,2500],{}," prop – \"red\" – will overwrite the color property of the generated lensflare elements.",[582,34808,1110,34809,34813],{},[1112,34810,34812],{"href":34811},"#precedence","precedence"," for details about how properties are filled in.",[7473,34815,34817],{"id":34816},"random-elements","Random elements",[582,34819,34820],{},"You can let the component generate random elements ...",[582,34822,34823,34824],{},"... by not adding an ",[1112,34825,34826,34828],{"href":34705},[586,34827,34314],{}," prop",[594,34830,34831],{"className":596,"code":34685,"language":601,"meta":544,"style":544},[586,34832,34833],{"__ignoreMap":544},[605,34834,34835,34837,34839],{"class":607,"line":545},[605,34836,611],{"class":610},[605,34838,329],{"class":614},[605,34840,755],{"class":610},[582,34842,34843,34844],{},"... by adding a ",[1112,34845,34847,34828],{"href":34846},"#seed",[586,34848,34331],{},[594,34850,34852],{"className":596,"code":34851,"language":601,"meta":544,"style":544},"\u003CLensflare :seed=\"7127\" />\n",[586,34853,34854],{"__ignoreMap":544},[605,34855,34856,34858,34860,34862,34864,34866,34868,34871,34873],{"class":607,"line":545},[605,34857,611],{"class":610},[605,34859,329],{"class":614},[605,34861,781],{"class":610},[605,34863,34331],{"class":618},[605,34865,625],{"class":610},[605,34867,628],{"class":610},[605,34869,34870],{"class":791},"7127",[605,34872,628],{"class":610},[605,34874,755],{"class":610},[582,34876,34843,34877],{},[1112,34878,34880,34828],{"href":34879},"#seedprops",[586,34881,34347],{},[594,34883,34885],{"className":596,"code":34884,"language":601,"meta":544,"style":544},"\u003CLensflare :seedProps=\"[{...}, {...}]\" />\n",[586,34886,34887],{"__ignoreMap":544},[605,34888,34889,34891,34893,34895,34897,34899,34901,34903,34906,34909,34911,34913],{"class":607,"line":545},[605,34890,611],{"class":610},[605,34892,329],{"class":614},[605,34894,781],{"class":610},[605,34896,34347],{"class":618},[605,34898,625],{"class":610},[605,34900,628],{"class":610},[605,34902,1466],{"class":651},[605,34904,34905],{"class":610},"{...},",[605,34907,34908],{"class":610}," {...}",[605,34910,1481],{"class":651},[605,34912,628],{"class":610},[605,34914,755],{"class":610},[7473,34916,34918],{"id":34917},"mixing-random-elements-and-non-random-properties","Mixing random elements and non-random properties",[582,34920,34921],{},"You can mix your own properties and random elements.",[594,34923,34925],{"className":596,"code":34924,"language":601,"meta":544,"style":544},"\u003CLensflare :elements=\"[{...}, {...}]\" :seed=\"8193\" />\n",[586,34926,34927],{"__ignoreMap":544},[605,34928,34929,34931,34933,34935,34937,34939,34941,34943,34945,34947,34949,34951,34953,34955,34957,34959,34962,34964],{"class":607,"line":545},[605,34930,611],{"class":610},[605,34932,329],{"class":614},[605,34934,781],{"class":610},[605,34936,34314],{"class":618},[605,34938,625],{"class":610},[605,34940,628],{"class":610},[605,34942,1466],{"class":651},[605,34944,34905],{"class":610},[605,34946,34908],{"class":610},[605,34948,1481],{"class":651},[605,34950,628],{"class":610},[605,34952,781],{"class":610},[605,34954,34331],{"class":618},[605,34956,625],{"class":610},[605,34958,628],{"class":610},[605,34960,34961],{"class":791},"8193",[605,34963,628],{"class":610},[605,34965,755],{"class":610},[582,34967,34968,34969,4431,34971,34973,34974,34976,34977,1118],{},"Here, both ",[586,34970,34314],{},[586,34972,34331],{}," are defined. The component will generate random elements and overwrite their properties with the contents of ",[586,34975,34314],{},", according to the ",[1112,34978,34979],{"href":34811},"order of precedence",[2046,34981,34982],{},[582,34983,34984],{},"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,34986,34987],{"id":34812},"Precedence",[582,34989,34990],{},"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,34992,34993,34997,35004,35011],{},[3139,34994,34995],{},[586,34996,34314],{},[3139,34998,34999,1471,35001,35003],{},[586,35000,2500],{},[586,35002,13433],{}," – default element properties",[3139,35005,35006,1471,35008,35010],{},[586,35007,34331],{},[586,35009,34347],{}," – generated random elements",[3139,35012,35013],{},"built-in default element properties",[2046,35015,35016],{},[582,35017,35018,4431,35020,35022,35023,35026,35027,35029,35030,35032],{},[586,35019,784],{},[586,35021,6945],{}," are applied as ",[1673,35024,35025],{},"multipliers"," at render time, not as default values. They proportionally adjust all element sizes and distances respectively, preserving the variation between elements. Use ",[586,35028,784],{}," to make the entire lensflare larger or smaller, and ",[586,35031,6945],{}," to spread or compress the scattered elements.",[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  :seed=\"1\"\n/>\n",[586,35049,35050,35057,35071,35098,35123,35130,35146,35159,35173],{"__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,34314],{"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,34331],{"class":618},[605,35166,625],{"class":610},[605,35168,628],{"class":610},[605,35170,1893],{"class":791},[605,35172,2987],{"class":610},[605,35174,35175],{"class":607,"line":758},[605,35176,34797],{"class":651},[582,35178,35179,35181],{},[586,35180,34331],{}," is defined, so the component will produce random elements.",[582,35183,35184,35185,1190],{},"Assume the random element generator produces this, based on ",[586,35186,34331],{},[594,35188,35192],{"className":35189,"code":35190,"language":35191,"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,35193,35194,35198,35202,35216,35227,35239,35255,35259,35263,35277,35287,35298,35312,35316,35320,35334,35344,35354,35368,35372],{"__ignoreMap":544},[605,35195,35196],{"class":607,"line":545},[605,35197,35070],{"class":651},[605,35199,35200],{"class":607,"line":546},[605,35201,30928],{"class":610},[605,35203,35204,35206,35208,35210,35212,35214],{"class":607,"line":676},[605,35205,17685],{"class":614},[605,35207,1190],{"class":610},[605,35209,667],{"class":610},[605,35211,3985],{"class":631},[605,35213,5536],{"class":610},[605,35215,14031],{"class":610},[605,35217,35218,35221,35223,35225],{"class":607,"line":697},[605,35219,35220],{"class":614},"    distance",[605,35222,1190],{"class":610},[605,35224,11773],{"class":791},[605,35226,14031],{"class":610},[605,35228,35229,35232,35234,35237],{"class":607,"line":707},[605,35230,35231],{"class":614},"    size",[605,35233,1190],{"class":610},[605,35235,35236],{"class":791}," 1024",[605,35238,14031],{"class":610},[605,35240,35241,35244,35246,35248,35251,35253],{"class":607,"line":713},[605,35242,35243],{"class":614},"    texture",[605,35245,1190],{"class":610},[605,35247,667],{"class":610},[605,35249,35250],{"class":631},"http://example.net/rays.png",[605,35252,5536],{"class":610},[605,35254,14031],{"class":610},[605,35256,35257],{"class":607,"line":723},[605,35258,17650],{"class":610},[605,35260,35261],{"class":607,"line":746},[605,35262,30928],{"class":610},[605,35264,35265,35267,35269,35271,35273,35275],{"class":607,"line":758},[605,35266,17685],{"class":614},[605,35268,1190],{"class":610},[605,35270,667],{"class":610},[605,35272,3985],{"class":631},[605,35274,5536],{"class":610},[605,35276,14031],{"class":610},[605,35278,35279,35281,35283,35285],{"class":607,"line":768},[605,35280,35220],{"class":614},[605,35282,1190],{"class":610},[605,35284,22969],{"class":791},[605,35286,14031],{"class":610},[605,35288,35289,35291,35293,35296],{"class":607,"line":773},[605,35290,35231],{"class":614},[605,35292,1190],{"class":610},[605,35294,35295],{"class":791}," 512",[605,35297,14031],{"class":610},[605,35299,35300,35302,35304,35306,35308,35310],{"class":607,"line":799},[605,35301,35243],{"class":614},[605,35303,1190],{"class":610},[605,35305,667],{"class":610},[605,35307,35092],{"class":631},[605,35309,5536],{"class":610},[605,35311,14031],{"class":610},[605,35313,35314],{"class":607,"line":599},[605,35315,17650],{"class":610},[605,35317,35318],{"class":607,"line":822},[605,35319,30928],{"class":610},[605,35321,35322,35324,35326,35328,35330,35332],{"class":607,"line":833},[605,35323,17685],{"class":614},[605,35325,1190],{"class":610},[605,35327,667],{"class":610},[605,35329,3985],{"class":631},[605,35331,5536],{"class":610},[605,35333,14031],{"class":610},[605,35335,35336,35338,35340,35342],{"class":607,"line":844},[605,35337,35220],{"class":614},[605,35339,1190],{"class":610},[605,35341,24579],{"class":791},[605,35343,14031],{"class":610},[605,35345,35346,35348,35350,35352],{"class":607,"line":854},[605,35347,35231],{"class":614},[605,35349,1190],{"class":610},[605,35351,35295],{"class":791},[605,35353,14031],{"class":610},[605,35355,35356,35358,35360,35362,35364,35366],{"class":607,"line":600},[605,35357,35243],{"class":614},[605,35359,1190],{"class":610},[605,35361,667],{"class":610},[605,35363,35092],{"class":631},[605,35365,5536],{"class":610},[605,35367,14031],{"class":610},[605,35369,35370],{"class":607,"line":874},[605,35371,17650],{"class":610},[605,35373,35374],{"class":607,"line":884},[605,35375,14056],{"class":651},[582,35377,35378,35379,35381],{},"When random elements are mixed with ",[586,35380,34314],{},", the final number of elements in the lensflare is determined by whichever is longer.",[582,35383,35384,35385,35387],{},"Here, ",[586,35386,34314],{}," contains 2 entries. The random element generator produced 3. So the resulting lensflare will have 3 elements.",[582,35389,35390],{},"Therefore, resulting lensflare will have 3 elements.",[582,35392,35393],{},"The resulting 3 lensflare elements will have the following properties, from the following sources:",[594,35395,35397],{"className":35189,"code":35396,"language":35191,"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: 512, // from random element generator\n    texture: 'http://example.net/ring.png', // from component prop `texture`\n  },\n  {\n    color: 'red', // from component prop `color`\n    distance: 2, // from random element generator\n    size: 512, // from random element generator\n    texture: 'http://example.net/ring.png', // from component prop `texture`\n  },\n]\n",[586,35398,35399,35403,35407,35424,35437,35449,35465,35469,35473,35490,35503,35515,35533,35537,35541,35557,35569,35581,35597,35601],{"__ignoreMap":544},[605,35400,35401],{"class":607,"line":545},[605,35402,35070],{"class":651},[605,35404,35405],{"class":607,"line":546},[605,35406,30928],{"class":610},[605,35408,35409,35411,35413,35415,35417,35419,35421],{"class":607,"line":676},[605,35410,17685],{"class":614},[605,35412,1190],{"class":610},[605,35414,667],{"class":610},[605,35416,29928],{"class":631},[605,35418,5536],{"class":610},[605,35420,655],{"class":610},[605,35422,35423],{"class":1181}," // from `elements`\n",[605,35425,35426,35428,35430,35432,35434],{"class":607,"line":697},[605,35427,35220],{"class":614},[605,35429,1190],{"class":610},[605,35431,11773],{"class":791},[605,35433,655],{"class":610},[605,35435,35436],{"class":1181}," // from random element generator\n",[605,35438,35439,35441,35443,35445,35447],{"class":607,"line":707},[605,35440,35231],{"class":614},[605,35442,1190],{"class":610},[605,35444,35295],{"class":791},[605,35446,655],{"class":610},[605,35448,35423],{"class":1181},[605,35450,35451,35453,35455,35457,35459,35461,35463],{"class":607,"line":713},[605,35452,35243],{"class":614},[605,35454,1190],{"class":610},[605,35456,667],{"class":610},[605,35458,35092],{"class":631},[605,35460,5536],{"class":610},[605,35462,655],{"class":610},[605,35464,35423],{"class":1181},[605,35466,35467],{"class":607,"line":723},[605,35468,17650],{"class":610},[605,35470,35471],{"class":607,"line":746},[605,35472,30928],{"class":610},[605,35474,35475,35477,35479,35481,35483,35485,35487],{"class":607,"line":758},[605,35476,17685],{"class":614},[605,35478,1190],{"class":610},[605,35480,667],{"class":610},[605,35482,29784],{"class":631},[605,35484,5536],{"class":610},[605,35486,655],{"class":610},[605,35488,35489],{"class":1181}," // from component prop `color`\n",[605,35491,35492,35494,35496,35499,35501],{"class":607,"line":768},[605,35493,35220],{"class":614},[605,35495,1190],{"class":610},[605,35497,35498],{"class":791}," 0.5",[605,35500,655],{"class":610},[605,35502,35423],{"class":1181},[605,35504,35505,35507,35509,35511,35513],{"class":607,"line":773},[605,35506,35231],{"class":614},[605,35508,1190],{"class":610},[605,35510,35295],{"class":791},[605,35512,655],{"class":610},[605,35514,35436],{"class":1181},[605,35516,35517,35519,35521,35523,35526,35528,35530],{"class":607,"line":799},[605,35518,35243],{"class":614},[605,35520,1190],{"class":610},[605,35522,667],{"class":610},[605,35524,35525],{"class":631},"http://example.net/ring.png",[605,35527,5536],{"class":610},[605,35529,655],{"class":610},[605,35531,35532],{"class":1181}," // from component prop `texture`\n",[605,35534,35535],{"class":607,"line":599},[605,35536,17650],{"class":610},[605,35538,35539],{"class":607,"line":822},[605,35540,30928],{"class":610},[605,35542,35543,35545,35547,35549,35551,35553,35555],{"class":607,"line":833},[605,35544,17685],{"class":614},[605,35546,1190],{"class":610},[605,35548,667],{"class":610},[605,35550,29784],{"class":631},[605,35552,5536],{"class":610},[605,35554,655],{"class":610},[605,35556,35489],{"class":1181},[605,35558,35559,35561,35563,35565,35567],{"class":607,"line":844},[605,35560,35220],{"class":614},[605,35562,1190],{"class":610},[605,35564,24579],{"class":791},[605,35566,655],{"class":610},[605,35568,35436],{"class":1181},[605,35570,35571,35573,35575,35577,35579],{"class":607,"line":854},[605,35572,35231],{"class":614},[605,35574,1190],{"class":610},[605,35576,35295],{"class":791},[605,35578,655],{"class":610},[605,35580,35436],{"class":1181},[605,35582,35583,35585,35587,35589,35591,35593,35595],{"class":607,"line":600},[605,35584,35243],{"class":614},[605,35586,1190],{"class":610},[605,35588,667],{"class":610},[605,35590,35525],{"class":631},[605,35592,5536],{"class":610},[605,35594,655],{"class":610},[605,35596,35532],{"class":1181},[605,35598,35599],{"class":607,"line":874},[605,35600,17650],{"class":610},[605,35602,35603],{"class":607,"line":884},[605,35604,14056],{"class":651},[1299,35606,35607],{},"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":35609},[35610,35611,35612,35613,35616,35617],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},{"id":34314,"depth":546,"text":34314},{"id":34331,"depth":546,"text":34331,"children":35614},[35615],{"id":34503,"depth":676,"text":34504},{"id":34556,"depth":546,"text":34347},{"id":34676,"depth":546,"text":34677,"children":35618},[35619,35620,35621,35622,35623],{"id":34698,"depth":676,"text":34699},{"id":34816,"depth":676,"text":34817},{"id":34917,"depth":676,"text":34918},{"id":34812,"depth":676,"text":34987},{"id":35040,"depth":676,"text":35041},"Wraps the Three.js Lensflare with seeded random element generation.",{},{"title":329,"description":35624},"IPTu6ltIJ84TUkEk77xCaQa3Z9Y35mfjfjyH23AjLG0",{"id":35629,"title":333,"body":35630,"description":36321,"extension":559,"links":560,"meta":36322,"navigation":562,"path":334,"seo":36323,"stem":335,"__hash__":36324},"docs/2.api/7.light-shadow/randomized-lights.md",{"type":469,"value":35631,"toc":36317},[35632,35637,35644,35652,35654,36152,36154,36315],[2558,35633,35634],{},[35635,35636],"light-shadow-randomized-lights",{},[582,35638,35639,35641,35642,1118],{},[586,35640,32545],{}," internally creates multiple lights and jiggles them. You would normally add it as a child of ",[586,35643,32023],{},[582,35645,35646,35647,1118],{},"It is based on this ",[1112,35648,35651],{"href":35649,"rel":35650},"http://drei.docs.pmnd.rs/staging/randomized-light",[1116],"Drei component",[472,35653,15],{"id":592},[594,35655,35658],{"className":596,"code":35656,"highlights":35657,"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,35659,35660,35680,35700,35706,35714,35721,35728,35735,35749,35757,35761,35769,35780,35812,35820,35868,35876,35892,35908,35923,35942,35958,35985,36001,36005,36013,36023,36031,36049,36057,36112,36120,36128,36136,36144],{"__ignoreMap":544},[605,35661,35662,35664,35666,35668,35670,35672,35674,35676,35678],{"class":607,"line":545},[605,35663,611],{"class":610},[605,35665,615],{"class":614},[605,35667,619],{"class":618},[605,35669,622],{"class":618},[605,35671,625],{"class":610},[605,35673,628],{"class":610},[605,35675,632],{"class":631},[605,35677,628],{"class":610},[605,35679,637],{"class":610},[605,35681,35682,35684,35686,35688,35690,35692,35694,35696,35698],{"class":607,"line":546},[605,35683,645],{"class":644},[605,35685,648],{"class":610},[605,35687,683],{"class":651},[605,35689,661],{"class":610},[605,35691,664],{"class":644},[605,35693,3322],{"class":610},[605,35695,692],{"class":631},[605,35697,628],{"class":610},[605,35699,3329],{"class":610},[605,35701,35702,35704],{"class":607,"line":676},[605,35703,645],{"class":644},[605,35705,1176],{"class":610},[605,35707,35709,35712],{"class":35708,"line":697},[607,641],[605,35710,35711],{"class":651},"  RandomizedLights",[605,35713,14031],{"class":610},[605,35715,35716,35719],{"class":607,"line":707},[605,35717,35718],{"class":651},"  AccumulativeShadows",[605,35720,14031],{"class":610},[605,35722,35723,35726],{"class":607,"line":713},[605,35724,35725],{"class":651},"  OrbitControls",[605,35727,14031],{"class":610},[605,35729,35730,35733],{"class":607,"line":723},[605,35731,35732],{"class":651},"  Plane",[605,35734,14031],{"class":610},[605,35736,35737,35739,35741,35743,35745,35747],{"class":607,"line":746},[605,35738,5544],{"class":610},[605,35740,664],{"class":644},[605,35742,3322],{"class":610},[605,35744,670],{"class":631},[605,35746,628],{"class":610},[605,35748,3329],{"class":610},[605,35750,35751,35753,35755],{"class":607,"line":758},[605,35752,700],{"class":610},[605,35754,615],{"class":614},[605,35756,637],{"class":610},[605,35758,35759],{"class":607,"line":768},[605,35760,710],{"emptyLinePlaceholder":562},[605,35762,35763,35765,35767],{"class":607,"line":773},[605,35764,611],{"class":610},[605,35766,718],{"class":614},[605,35768,637],{"class":610},[605,35770,35771,35773,35775,35778],{"class":607,"line":799},[605,35772,726],{"class":610},[605,35774,729],{"class":614},[605,35776,35777],{"class":618}," shadows",[605,35779,637],{"class":610},[605,35781,35782,35784,35786,35788,35790,35792,35794,35796,35798,35800,35802,35804,35806,35808,35810],{"class":607,"line":599},[605,35783,749],{"class":610},[605,35785,752],{"class":614},[605,35787,781],{"class":610},[605,35789,1459],{"class":618},[605,35791,625],{"class":610},[605,35793,628],{"class":610},[605,35795,1466],{"class":610},[605,35797,937],{"class":791},[605,35799,1471],{"class":610},[605,35801,4160],{"class":791},[605,35803,1471],{"class":610},[605,35805,2396],{"class":791},[605,35807,1481],{"class":610},[605,35809,628],{"class":610},[605,35811,755],{"class":610},[605,35813,35814,35816,35818],{"class":607,"line":822},[605,35815,749],{"class":610},[605,35817,763],{"class":614},[605,35819,755],{"class":610},[605,35821,35822,35824,35827,35829,35831,35833,35835,35837,35839,35841,35843,35845,35847,35849,35852,35854,35856,35858,35860,35862,35864,35866],{"class":607,"line":833},[605,35823,749],{"class":610},[605,35825,35826],{"class":614},"AccumulativeShadows",[605,35828,781],{"class":610},[605,35830,32273],{"class":618},[605,35832,625],{"class":610},[605,35834,628],{"class":610},[605,35836,6028],{"class":791},[605,35838,628],{"class":610},[605,35840,3978],{"class":618},[605,35842,625],{"class":610},[605,35844,628],{"class":610},[605,35846,4045],{"class":631},[605,35848,628],{"class":610},[605,35850,35851],{"class":618}," once",[605,35853,781],{"class":610},[605,35855,1968],{"class":618},[605,35857,625],{"class":610},[605,35859,628],{"class":610},[605,35861,4088],{"class":610},[605,35863,1893],{"class":791},[605,35865,628],{"class":610},[605,35867,637],{"class":610},[605,35869,35871,35873],{"class":35870,"line":844},[607,641],[605,35872,825],{"class":610},[605,35874,35875],{"class":614},"RandomizedLights\n",[605,35877,35879,35881,35884,35886,35888,35890],{"class":35878,"line":854},[607,641],[605,35880,2993],{"class":610},[605,35882,35883],{"class":618},"ambient",[605,35885,625],{"class":610},[605,35887,628],{"class":610},[605,35889,7041],{"class":791},[605,35891,2987],{"class":610},[605,35893,35895,35897,35900,35902,35904,35906],{"class":35894,"line":600},[607,641],[605,35896,2993],{"class":610},[605,35898,35899],{"class":618},"bias",[605,35901,625],{"class":610},[605,35903,628],{"class":610},[605,35905,1522],{"class":791},[605,35907,2987],{"class":610},[605,35909,35911,35913,35915,35917,35919,35921],{"class":35910,"line":874},[607,641],[605,35912,2993],{"class":610},[605,35914,5100],{"class":618},[605,35916,625],{"class":610},[605,35918,628],{"class":610},[605,35920,15063],{"class":791},[605,35922,2987],{"class":610},[605,35924,35926,35928,35930,35932,35934,35936,35938,35940],{"class":35925,"line":884},[607,641],[605,35927,2993],{"class":610},[605,35929,1886],{"class":618},[605,35931,625],{"class":610},[605,35933,628],{"class":610},[605,35935,21593],{"class":651},[605,35937,1118],{"class":610},[605,35939,21598],{"class":651},[605,35941,2987],{"class":610},[605,35943,35945,35947,35950,35952,35954,35956],{"class":35944,"line":2952},[607,641],[605,35946,2993],{"class":610},[605,35948,35949],{"class":618},"map-size",[605,35951,625],{"class":610},[605,35953,628],{"class":610},[605,35955,32519],{"class":791},[605,35957,2987],{"class":610},[605,35959,35961,35963,35965,35967,35969,35971,35973,35975,35977,35979,35981,35983],{"class":35960,"line":2960},[607,641],[605,35962,2993],{"class":610},[605,35964,1459],{"class":618},[605,35966,625],{"class":610},[605,35968,628],{"class":610},[605,35970,1466],{"class":610},[605,35972,2396],{"class":791},[605,35974,1471],{"class":610},[605,35976,2396],{"class":791},[605,35978,3598],{"class":610},[605,35980,1478],{"class":791},[605,35982,1481],{"class":610},[605,35984,2987],{"class":610},[605,35986,35988,35990,35993,35995,35997,35999],{"class":35987,"line":2990},[607,641],[605,35989,2993],{"class":610},[605,35991,35992],{"class":618},"radius",[605,35994,625],{"class":610},[605,35996,628],{"class":610},[605,35998,792],{"class":791},[605,36000,2987],{"class":610},[605,36002,36003],{"class":607,"line":3007},[605,36004,3050],{"class":610},[605,36006,36007,36009,36011],{"class":607,"line":3022},[605,36008,867],{"class":610},[605,36010,35826],{"class":614},[605,36012,637],{"class":610},[605,36014,36015,36017,36019,36021],{"class":607,"line":3047},[605,36016,749],{"class":610},[605,36018,828],{"class":614},[605,36020,9856],{"class":618},[605,36022,637],{"class":610},[605,36024,36025,36027,36029],{"class":607,"line":2591},[605,36026,825],{"class":610},[605,36028,839],{"class":614},[605,36030,755],{"class":610},[605,36032,36033,36035,36037,36039,36041,36043,36045,36047],{"class":607,"line":3062},[605,36034,825],{"class":610},[605,36036,6729],{"class":614},[605,36038,3978],{"class":618},[605,36040,625],{"class":610},[605,36042,628],{"class":610},[605,36044,6738],{"class":631},[605,36046,628],{"class":610},[605,36048,755],{"class":610},[605,36050,36051,36053,36055],{"class":607,"line":3092},[605,36052,867],{"class":610},[605,36054,828],{"class":614},[605,36056,637],{"class":610},[605,36058,36059,36061,36063,36065,36067,36069,36071,36073,36075,36077,36079,36081,36083,36085,36087,36090,36092,36094,36096,36098,36100,36102,36104,36106,36108,36110],{"class":607,"line":3101},[605,36060,749],{"class":610},[605,36062,237],{"class":614},[605,36064,781],{"class":610},[605,36066,1459],{"class":618},[605,36068,625],{"class":610},[605,36070,628],{"class":610},[605,36072,1466],{"class":610},[605,36074,937],{"class":791},[605,36076,3598],{"class":610},[605,36078,792],{"class":791},[605,36080,1471],{"class":610},[605,36082,937],{"class":791},[605,36084,1481],{"class":610},[605,36086,628],{"class":610},[605,36088,36089],{"class":618}," receive-shadow",[605,36091,781],{"class":610},[605,36093,1989],{"class":618},[605,36095,625],{"class":610},[605,36097,628],{"class":610},[605,36099,1466],{"class":610},[605,36101,1478],{"class":791},[605,36103,1471],{"class":610},[605,36105,1478],{"class":791},[605,36107,1481],{"class":610},[605,36109,628],{"class":610},[605,36111,637],{"class":610},[605,36113,36114,36116,36118],{"class":607,"line":4207},[605,36115,825],{"class":610},[605,36117,13421],{"class":614},[605,36119,755],{"class":610},[605,36121,36122,36124,36126],{"class":607,"line":4212},[605,36123,867],{"class":610},[605,36125,237],{"class":614},[605,36127,637],{"class":610},[605,36129,36130,36132,36134],{"class":607,"line":4235},[605,36131,749],{"class":610},[605,36133,3518],{"class":614},[605,36135,755],{"class":610},[605,36137,36138,36140,36142],{"class":607,"line":4244},[605,36139,877],{"class":610},[605,36141,729],{"class":614},[605,36143,637],{"class":610},[605,36145,36146,36148,36150],{"class":607,"line":4253},[605,36147,700],{"class":610},[605,36149,718],{"class":614},[605,36151,637],{"class":610},[472,36153,894],{"id":893},[899,36155,36156,36166],{},[902,36157,36158],{},[905,36159,36160,36162,36164],{},[908,36161,910],{},[908,36163,913],{},[908,36165,916],{},[918,36167,36168,36181,36194,36207,36220,36233,36246,36260,36273,36287,36301],{},[905,36169,36170,36174,36177],{},[923,36171,36172],{},[586,36173,5100],{},[923,36175,36176],{},"Number of lights",[923,36178,36179],{},[586,36180,15063],{},[905,36182,36183,36187,36190],{},[923,36184,36185],{},[586,36186,35992],{},[923,36188,36189],{},"Radius of the jiggle, higher values make softer light",[923,36191,36192],{},[586,36193,1893],{},[905,36195,36196,36200,36203],{},[923,36197,36198],{},[586,36199,1886],{},[923,36201,36202],{},"Light intensity",[923,36204,36205],{},[586,36206,4913],{},[905,36208,36209,36213,36216],{},[923,36210,36211],{},[586,36212,35883],{},[923,36214,36215],{},"\"Ambient occlusion\" to directional light ratio, lower values mean less AO",[923,36217,36218],{},[586,36219,1513],{},[905,36221,36222,36226,36229],{},[923,36223,36224],{},[586,36225,11918],{},[923,36227,36228],{},"If the lights cast shadows",[923,36230,36231],{},[586,36232,933],{},[905,36234,36235,36239,36242],{},[923,36236,36237],{},[586,36238,35899],{},[923,36240,36241],{},"Default shadow bias",[923,36243,36244],{},[586,36245,937],{},[905,36247,36248,36253,36256],{},[923,36249,36250],{},[586,36251,36252],{},"mapSize",[923,36254,36255],{},"Size of the lights' shadow map",[923,36257,36258],{},[586,36259,34066],{},[905,36261,36262,36266,36269],{},[923,36263,36264],{},[586,36265,10233],{},[923,36267,36268],{},"Size of the lights' shadow camera frustum",[923,36270,36271],{},[586,36272,1478],{},[905,36274,36275,36280,36283],{},[923,36276,36277],{},[586,36278,36279],{},"near",[923,36281,36282],{},"Lights' shadow camera near value",[923,36284,36285],{},[586,36286,1513],{},[905,36288,36289,36293,36296],{},[923,36290,36291],{},[586,36292,34031],{},[923,36294,36295],{},"Lights' shadow camera far value",[923,36297,36298],{},[586,36299,36300],{},"500",[905,36302,36303,36307,36310],{},[923,36304,36305],{},[586,36306,1459],{},[923,36308,36309],{},"Position",[923,36311,36312],{},[586,36313,36314],{},"[5, 5, -10]",[1299,36316,1648],{},{"title":544,"searchDepth":545,"depth":546,"links":36318},[36319,36320],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},"Creates multiple lights and jiggles them for softer shadows.",{},{"title":333,"description":36321},"baGOsq_IYKuFBxflpLvSmGExVBUODXQrO5EKfecXWks",{"id":36326,"title":337,"body":36327,"description":36776,"extension":559,"links":560,"meta":36777,"navigation":562,"path":338,"seo":36778,"stem":339,"__hash__":36779},"docs/2.api/7.light-shadow/soft-shadows.md",{"type":469,"value":36328,"toc":36772},[36329,36334,36337,36339,36718,36720,36770],[576,36330,36331],{},[36332,36333],"light-shadow-soft-shadows",{},[582,36335,36336],{},"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,36338,15],{"id":592},[594,36340,36343],{"className":596,"code":36341,"highlights":36342,"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,36344,36345,36365,36400,36420,36428,36432,36440,36460,36512,36534,36552,36560,36568,36622,36630,36638,36672,36692,36702,36710],{"__ignoreMap":544},[605,36346,36347,36349,36351,36353,36355,36357,36359,36361,36363],{"class":607,"line":545},[605,36348,611],{"class":610},[605,36350,615],{"class":614},[605,36352,619],{"class":618},[605,36354,622],{"class":618},[605,36356,625],{"class":610},[605,36358,628],{"class":610},[605,36360,632],{"class":631},[605,36362,628],{"class":610},[605,36364,637],{"class":610},[605,36366,36368,36370,36372,36375,36377,36379,36381,36383,36385,36388,36390,36392,36394,36396,36398],{"class":36367,"line":546},[607,641],[605,36369,645],{"class":644},[605,36371,648],{"class":610},[605,36373,36374],{"class":651}," SoftShadows",[605,36376,655],{"class":610},[605,36378,3339],{"class":651},[605,36380,655],{"class":610},[605,36382,33683],{"class":651},[605,36384,655],{"class":610},[605,36386,36387],{"class":651}," Plane",[605,36389,661],{"class":610},[605,36391,664],{"class":644},[605,36393,3322],{"class":610},[605,36395,670],{"class":631},[605,36397,628],{"class":610},[605,36399,3329],{"class":610},[605,36401,36402,36404,36406,36408,36410,36412,36414,36416,36418],{"class":607,"line":676},[605,36403,645],{"class":644},[605,36405,648],{"class":610},[605,36407,683],{"class":651},[605,36409,661],{"class":610},[605,36411,664],{"class":644},[605,36413,3322],{"class":610},[605,36415,692],{"class":631},[605,36417,628],{"class":610},[605,36419,3329],{"class":610},[605,36421,36422,36424,36426],{"class":607,"line":697},[605,36423,700],{"class":610},[605,36425,615],{"class":614},[605,36427,637],{"class":610},[605,36429,36430],{"class":607,"line":707},[605,36431,710],{"emptyLinePlaceholder":562},[605,36433,36434,36436,36438],{"class":607,"line":713},[605,36435,611],{"class":610},[605,36437,718],{"class":614},[605,36439,637],{"class":610},[605,36441,36442,36444,36446,36448,36450,36452,36454,36456,36458],{"class":607,"line":723},[605,36443,726],{"class":610},[605,36445,729],{"class":614},[605,36447,35777],{"class":618},[605,36449,732],{"class":618},[605,36451,625],{"class":610},[605,36453,628],{"class":610},[605,36455,5040],{"class":631},[605,36457,628],{"class":610},[605,36459,637],{"class":610},[605,36461,36462,36464,36466,36468,36470,36472,36474,36476,36478,36480,36482,36484,36486,36488,36490,36492,36494,36496,36498,36500,36502,36504,36506,36508,36510],{"class":607,"line":746},[605,36463,749],{"class":610},[605,36465,3478],{"class":614},[605,36467,781],{"class":610},[605,36469,3483],{"class":618},[605,36471,625],{"class":610},[605,36473,628],{"class":610},[605,36475,3490],{"class":791},[605,36477,628],{"class":610},[605,36479,781],{"class":610},[605,36481,3690],{"class":618},[605,36483,625],{"class":610},[605,36485,628],{"class":610},[605,36487,1466],{"class":610},[605,36489,937],{"class":791},[605,36491,1471],{"class":610},[605,36493,33784],{"class":791},[605,36495,1481],{"class":610},[605,36497,628],{"class":610},[605,36499,781],{"class":610},[605,36501,33793],{"class":618},[605,36503,625],{"class":610},[605,36505,628],{"class":610},[605,36507,19149],{"class":791},[605,36509,628],{"class":610},[605,36511,637],{"class":610},[605,36513,36514,36516,36518,36520,36522,36524,36526,36528,36530,36532],{"class":607,"line":758},[605,36515,825],{"class":610},[605,36517,28642],{"class":614},[605,36519,9856],{"class":618},[605,36521,781],{"class":610},[605,36523,784],{"class":618},[605,36525,625],{"class":610},[605,36527,628],{"class":610},[605,36529,21019],{"class":791},[605,36531,628],{"class":610},[605,36533,637],{"class":610},[605,36535,36536,36538,36540,36542,36544,36546,36548,36550],{"class":607,"line":768},[605,36537,836],{"class":610},[605,36539,13421],{"class":614},[605,36541,3978],{"class":618},[605,36543,625],{"class":610},[605,36545,628],{"class":610},[605,36547,6738],{"class":631},[605,36549,628],{"class":610},[605,36551,755],{"class":610},[605,36553,36554,36556,36558],{"class":607,"line":773},[605,36555,857],{"class":610},[605,36557,28642],{"class":614},[605,36559,637],{"class":610},[605,36561,36562,36564,36566],{"class":607,"line":799},[605,36563,867],{"class":610},[605,36565,3478],{"class":614},[605,36567,637],{"class":610},[605,36569,36570,36572,36574,36576,36578,36580,36582,36584,36586,36588,36590,36592,36594,36596,36598,36600,36602,36604,36606,36608,36610,36612,36614,36616,36618,36620],{"class":607,"line":599},[605,36571,749],{"class":610},[605,36573,237],{"class":614},[605,36575,781],{"class":610},[605,36577,1459],{"class":618},[605,36579,625],{"class":610},[605,36581,628],{"class":610},[605,36583,1466],{"class":610},[605,36585,937],{"class":791},[605,36587,3598],{"class":610},[605,36589,792],{"class":791},[605,36591,1471],{"class":610},[605,36593,937],{"class":791},[605,36595,1481],{"class":610},[605,36597,628],{"class":610},[605,36599,36089],{"class":618},[605,36601,781],{"class":610},[605,36603,1989],{"class":618},[605,36605,625],{"class":610},[605,36607,628],{"class":610},[605,36609,1466],{"class":610},[605,36611,1478],{"class":791},[605,36613,1471],{"class":610},[605,36615,1478],{"class":791},[605,36617,1481],{"class":610},[605,36619,628],{"class":610},[605,36621,637],{"class":610},[605,36623,36624,36626,36628],{"class":607,"line":822},[605,36625,825],{"class":610},[605,36627,13421],{"class":614},[605,36629,755],{"class":610},[605,36631,36632,36634,36636],{"class":607,"line":833},[605,36633,867],{"class":610},[605,36635,237],{"class":614},[605,36637,637],{"class":610},[605,36639,36640,36642,36644,36646,36648,36650,36652,36654,36656,36658,36660,36662,36664,36666,36668,36670],{"class":607,"line":844},[605,36641,749],{"class":610},[605,36643,3539],{"class":614},[605,36645,9856],{"class":618},[605,36647,781],{"class":610},[605,36649,1459],{"class":618},[605,36651,625],{"class":610},[605,36653,628],{"class":610},[605,36655,1466],{"class":610},[605,36657,937],{"class":791},[605,36659,1471],{"class":610},[605,36661,4160],{"class":791},[605,36663,1471],{"class":610},[605,36665,937],{"class":791},[605,36667,1481],{"class":610},[605,36669,628],{"class":610},[605,36671,755],{"class":610},[605,36673,36674,36676,36678,36680,36682,36684,36686,36688,36690],{"class":607,"line":854},[605,36675,749],{"class":610},[605,36677,3518],{"class":614},[605,36679,781],{"class":610},[605,36681,1886],{"class":618},[605,36683,625],{"class":610},[605,36685,628],{"class":610},[605,36687,1513],{"class":791},[605,36689,628],{"class":610},[605,36691,755],{"class":610},[605,36693,36695,36697,36700],{"class":36694,"line":600},[607,641],[605,36696,749],{"class":610},[605,36698,36699],{"class":614},"SoftShadows",[605,36701,755],{"class":610},[605,36703,36704,36706,36708],{"class":607,"line":874},[605,36705,877],{"class":610},[605,36707,729],{"class":614},[605,36709,637],{"class":610},[605,36711,36712,36714,36716],{"class":607,"line":884},[605,36713,700],{"class":610},[605,36715,718],{"class":614},[605,36717,637],{"class":610},[472,36719,894],{"id":893},[899,36721,36722,36732],{},[902,36723,36724],{},[905,36725,36726,36728,36730],{},[908,36727,3118],{"align":969},[908,36729,913],{"align":969},[908,36731,916],{},[918,36733,36734,36745,36757],{},[905,36735,36736,36738,36741],{},[923,36737,10233],{"align":969},[923,36739,36740],{"align":969},"Size of the light source (the larger the softer the light)",[923,36742,36743],{},[586,36744,25056],{},[905,36746,36747,36750,36753],{},[923,36748,36749],{"align":969},"samples",[923,36751,36752],{"align":969},"Number of samples (more samples less noise but more expensive)",[923,36754,36755],{},[586,36756,1478],{},[905,36758,36759,36762,36765],{},[923,36760,36761],{"align":969},"focus",[923,36763,36764],{"align":969},"Depth focus, use it to shift the focal point (where the shadow is the sharpest)",[923,36766,36767,36769],{},[586,36768,937],{}," (the beginning)",[1299,36771,1648],{},{"title":544,"searchDepth":545,"depth":546,"links":36773},[36774,36775],{"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":36776},"Jcog66jVOp0ZbwScDyRmLoOj7ZJPGe-FsPG7UiW8n8I",[36781,37811,38381,38676,39030,39575,40621,41037,41448,43355,44048],{"id":36782,"title":347,"body":36783,"description":37807,"extension":559,"links":560,"meta":37808,"navigation":562,"path":348,"seo":37809,"stem":349,"__hash__":37810},"docs/2.api/8.staging/1.environment.md",{"type":469,"value":36784,"toc":37796},[36785,36790,36800,36806,36808,37025,37032,37058,37063,37067,37074,37272,37276,37282,37306,37310,37313,37442,37446,37452,37558,37564,37575,37577,37784,37787,37793],[576,36786,36787],{},[36788,36789],"staging-environment",{},[582,36791,36792,36793,36796,36797,1118],{},"Is a component abstraction that automatically sets up a global cubemap, which affects the default ",[586,36794,36795],{},"scene.environment",", and optionally ",[586,36798,36799],{},"scene.background",[582,36801,36802,36803,36805],{},"It uses the composable ",[1112,36804,351],{"href":352}," under the hood to load the cubemap.",[472,36807,15],{"id":592},[594,36809,36811],{"className":596,"code":36810,"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,36812,36813,36833,36851,36869,36877,36881,36889,36897,36905,36911,36923,36935,36946,36957,36968,36979,36990,36997,37001,37009,37017],{"__ignoreMap":544},[605,36814,36815,36817,36819,36821,36823,36825,36827,36829,36831],{"class":607,"line":545},[605,36816,611],{"class":610},[605,36818,615],{"class":614},[605,36820,619],{"class":618},[605,36822,622],{"class":618},[605,36824,625],{"class":610},[605,36826,628],{"class":610},[605,36828,632],{"class":631},[605,36830,628],{"class":610},[605,36832,637],{"class":610},[605,36834,36835,36837,36839,36841,36843,36845,36847,36849],{"class":607,"line":546},[605,36836,645],{"class":644},[605,36838,648],{"class":610},[605,36840,683],{"class":651},[605,36842,661],{"class":610},[605,36844,664],{"class":644},[605,36846,667],{"class":610},[605,36848,692],{"class":631},[605,36850,673],{"class":610},[605,36852,36853,36855,36857,36859,36861,36863,36865,36867],{"class":607,"line":676},[605,36854,645],{"class":644},[605,36856,648],{"class":610},[605,36858,14286],{"class":651},[605,36860,661],{"class":610},[605,36862,664],{"class":644},[605,36864,667],{"class":610},[605,36866,670],{"class":631},[605,36868,673],{"class":610},[605,36870,36871,36873,36875],{"class":607,"line":697},[605,36872,700],{"class":610},[605,36874,615],{"class":614},[605,36876,637],{"class":610},[605,36878,36879],{"class":607,"line":707},[605,36880,710],{"emptyLinePlaceholder":562},[605,36882,36883,36885,36887],{"class":607,"line":713},[605,36884,611],{"class":610},[605,36886,718],{"class":614},[605,36888,637],{"class":610},[605,36890,36891,36893,36895],{"class":607,"line":723},[605,36892,726],{"class":610},[605,36894,729],{"class":614},[605,36896,637],{"class":610},[605,36898,36899,36901,36903],{"class":607,"line":746},[605,36900,749],{"class":610},[605,36902,14995],{"class":614},[605,36904,637],{"class":610},[605,36906,36907,36909],{"class":607,"line":758},[605,36908,825],{"class":610},[605,36910,18825],{"class":614},[605,36912,36913,36915,36917,36919,36921],{"class":607,"line":768},[605,36914,2993],{"class":610},[605,36916,18837],{"class":618},[605,36918,625],{"class":610},[605,36920,628],{"class":610},[605,36922,35070],{"class":610},[605,36924,36925,36928,36931,36933],{"class":607,"line":773},[605,36926,36927],{"class":610},"          '",[605,36929,36930],{"class":631},"/px.jpg",[605,36932,5536],{"class":610},[605,36934,14031],{"class":610},[605,36936,36937,36939,36942,36944],{"class":607,"line":799},[605,36938,36927],{"class":610},[605,36940,36941],{"class":631},"/nx.jpg",[605,36943,5536],{"class":610},[605,36945,14031],{"class":610},[605,36947,36948,36950,36953,36955],{"class":607,"line":599},[605,36949,36927],{"class":610},[605,36951,36952],{"class":631},"/py.jpg",[605,36954,5536],{"class":610},[605,36956,14031],{"class":610},[605,36958,36959,36961,36964,36966],{"class":607,"line":822},[605,36960,36927],{"class":610},[605,36962,36963],{"class":631},"/ny.jpg",[605,36965,5536],{"class":610},[605,36967,14031],{"class":610},[605,36969,36970,36972,36975,36977],{"class":607,"line":833},[605,36971,36927],{"class":610},[605,36973,36974],{"class":631},"/pz.jpg",[605,36976,5536],{"class":610},[605,36978,14031],{"class":610},[605,36980,36981,36983,36986,36988],{"class":607,"line":844},[605,36982,36927],{"class":610},[605,36984,36985],{"class":631},"/nz.jpg",[605,36987,5536],{"class":610},[605,36989,14031],{"class":610},[605,36991,36992,36995],{"class":607,"line":854},[605,36993,36994],{"class":610},"        ]",[605,36996,2987],{"class":610},[605,36998,36999],{"class":607,"line":600},[605,37000,3050],{"class":610},[605,37002,37003,37005,37007],{"class":607,"line":874},[605,37004,867],{"class":610},[605,37006,14995],{"class":614},[605,37008,637],{"class":610},[605,37010,37011,37013,37015],{"class":607,"line":884},[605,37012,877],{"class":610},[605,37014,729],{"class":614},[605,37016,637],{"class":610},[605,37018,37019,37021,37023],{"class":607,"line":2952},[605,37020,700],{"class":610},[605,37022,718],{"class":614},[605,37024,637],{"class":610},[582,37026,37027,37028,37031],{},"You can also pass the ",[586,37029,37030],{},".hdr"," file directly:",[594,37033,37035],{"className":596,"code":37034,"language":601,"meta":544,"style":544},"\u003CSuspense>\n   \u003CEnvironment files=\"/sunset.hdr\" />\n\u003C/Suspense>\n",[586,37036,37037,37045,37050],{"__ignoreMap":544},[605,37038,37039,37041,37043],{"class":607,"line":545},[605,37040,611],{"class":610},[605,37042,14995],{"class":614},[605,37044,637],{"class":610},[605,37046,37047],{"class":607,"line":546},[605,37048,37049],{"class":651},"   \u003CEnvironment files=\"/sunset.hdr\" />\n",[605,37051,37052,37054,37056],{"class":607,"line":676},[605,37053,700],{"class":610},[605,37055,14995],{"class":614},[605,37057,637],{"class":610},[582,37059,37060],{},[3267,37061],{"alt":347,"src":37062},"/cientos/envmaps.png",[472,37064,37066],{"id":37065},"texture-reference","Texture reference",[582,37068,11624,37069,1680,37071,34828],{},[586,37070,11627],{},[586,37072,37073],{},"\u003CEnvironment />",[594,37075,37078],{"className":596,"code":37076,"highlights":37077,"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,37079,37080,37100,37118,37122,37136,37140,37156,37170,37176,37185,37189,37197,37216,37224,37233,37255,37263],{"__ignoreMap":544},[605,37081,37082,37084,37086,37088,37090,37092,37094,37096,37098],{"class":607,"line":545},[605,37083,611],{"class":610},[605,37085,615],{"class":614},[605,37087,619],{"class":618},[605,37089,622],{"class":618},[605,37091,625],{"class":610},[605,37093,628],{"class":610},[605,37095,632],{"class":631},[605,37097,628],{"class":610},[605,37099,637],{"class":610},[605,37101,37102,37104,37106,37108,37110,37112,37114,37116],{"class":607,"line":546},[605,37103,645],{"class":644},[605,37105,648],{"class":610},[605,37107,14286],{"class":651},[605,37109,661],{"class":610},[605,37111,664],{"class":644},[605,37113,667],{"class":610},[605,37115,670],{"class":631},[605,37117,673],{"class":610},[605,37119,37120],{"class":607,"line":676},[605,37121,710],{"emptyLinePlaceholder":562},[605,37123,37125,37127,37130,37132,37134],{"class":37124,"line":697},[607,641],[605,37126,2689],{"class":618},[605,37128,37129],{"class":651}," environmentRef ",[605,37131,625],{"class":610},[605,37133,9716],{"class":2800},[605,37135,2846],{"class":651},[605,37137,37138],{"class":607,"line":707},[605,37139,710],{"emptyLinePlaceholder":562},[605,37141,37143,37145,37148,37150,37152,37154],{"class":37142,"line":713},[607,641],[605,37144,5485],{"class":2800},[605,37146,37147],{"class":651},"(environmentRef",[605,37149,655],{"class":610},[605,37151,13359],{"class":5495},[605,37153,5501],{"class":618},[605,37155,1176],{"class":610},[605,37157,37158,37160,37162,37164,37166,37168],{"class":607,"line":723},[605,37159,13674],{"class":651},[605,37161,1118],{"class":610},[605,37163,13679],{"class":2800},[605,37165,2970],{"class":614},[605,37167,13433],{"class":651},[605,37169,5539],{"class":614},[605,37171,37172,37174],{"class":607,"line":746},[605,37173,5544],{"class":610},[605,37175,5539],{"class":651},[605,37177,37179,37181,37183],{"class":37178,"line":758},[607,641],[605,37180,700],{"class":610},[605,37182,615],{"class":614},[605,37184,637],{"class":610},[605,37186,37187],{"class":607,"line":768},[605,37188,710],{"emptyLinePlaceholder":562},[605,37190,37191,37193,37195],{"class":607,"line":773},[605,37192,611],{"class":610},[605,37194,718],{"class":614},[605,37196,637],{"class":610},[605,37198,37199,37201,37203,37205,37207,37209,37212,37214],{"class":607,"line":799},[605,37200,726],{"class":610},[605,37202,347],{"class":614},[605,37204,5431],{"class":618},[605,37206,625],{"class":610},[605,37208,628],{"class":610},[605,37210,37211],{"class":631},"environmentRef",[605,37213,628],{"class":610},[605,37215,755],{"class":610},[605,37217,37218,37220,37222],{"class":607,"line":599},[605,37219,726],{"class":610},[605,37221,828],{"class":614},[605,37223,637],{"class":610},[605,37225,37227,37229,37231],{"class":37226,"line":822},[607,641],[605,37228,749],{"class":610},[605,37230,4735],{"class":614},[605,37232,755],{"class":610},[605,37234,37235,37237,37239,37241,37244,37246,37248,37251,37253],{"class":607,"line":833},[605,37236,749],{"class":610},[605,37238,13421],{"class":614},[605,37240,781],{"class":610},[605,37242,37243],{"class":618},"env-map",[605,37245,625],{"class":610},[605,37247,628],{"class":610},[605,37249,37250],{"class":651},"envMap",[605,37252,628],{"class":610},[605,37254,755],{"class":610},[605,37256,37257,37259,37261],{"class":607,"line":844},[605,37258,877],{"class":610},[605,37260,828],{"class":614},[605,37262,637],{"class":610},[605,37264,37266,37268,37270],{"class":37265,"line":854},[607,641],[605,37267,700],{"class":610},[605,37269,718],{"class":614},[605,37271,637],{"class":610},[472,37273,37275],{"id":37274},"presets","Presets",[582,37277,37278,37279,2068],{},"You can use one of the available presets by passing the ",[586,37280,37281],{},"preset",[594,37283,37285],{"className":596,"code":37284,"language":601,"meta":544,"style":544},"\u003CEnvironment preset=\"city\" />\n",[586,37286,37287],{"__ignoreMap":544},[605,37288,37289,37291,37293,37295,37297,37299,37302,37304],{"class":607,"line":545},[605,37290,611],{"class":610},[605,37292,347],{"class":614},[605,37294,15007],{"class":618},[605,37296,625],{"class":610},[605,37298,628],{"class":610},[605,37300,37301],{"class":631},"city",[605,37303,628],{"class":610},[605,37305,755],{"class":610},[472,37307,37309],{"id":37308},"environment-rotation","Environment Rotation",[582,37311,37312],{},"The environment component supports both background and environment rotation. You can control them independently or sync them together:",[594,37314,37316],{"className":596,"code":37315,"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,37317,37318,37326,37332,37346,37361,37396,37430,37434],{"__ignoreMap":544},[605,37319,37320,37322,37324],{"class":607,"line":545},[605,37321,611],{"class":610},[605,37323,718],{"class":614},[605,37325,637],{"class":610},[605,37327,37328,37330],{"class":607,"line":546},[605,37329,726],{"class":610},[605,37331,18825],{"class":614},[605,37333,37334,37337,37339,37341,37344],{"class":607,"line":676},[605,37335,37336],{"class":618},"    preset",[605,37338,625],{"class":610},[605,37340,628],{"class":610},[605,37342,37343],{"class":631},"sunset",[605,37345,2987],{"class":610},[605,37347,37348,37350,37353,37355,37357,37359],{"class":607,"line":697},[605,37349,7392],{"class":610},[605,37351,37352],{"class":618},"background",[605,37354,625],{"class":610},[605,37356,628],{"class":610},[605,37358,933],{"class":3870},[605,37360,2987],{"class":610},[605,37362,37363,37365,37368,37370,37372,37374,37376,37378,37380,37382,37384,37386,37388,37390,37392,37394],{"class":607,"line":707},[605,37364,7392],{"class":610},[605,37366,37367],{"class":618},"background-rotation",[605,37369,625],{"class":610},[605,37371,628],{"class":610},[605,37373,1466],{"class":610},[605,37375,937],{"class":791},[605,37377,1471],{"class":610},[605,37379,21593],{"class":651},[605,37381,1118],{"class":610},[605,37383,21598],{"class":651},[605,37385,21601],{"class":610},[605,37387,792],{"class":791},[605,37389,1471],{"class":610},[605,37391,937],{"class":791},[605,37393,1481],{"class":610},[605,37395,2987],{"class":610},[605,37397,37398,37400,37402,37404,37406,37408,37410,37412,37414,37416,37418,37420,37422,37424,37426,37428],{"class":607,"line":713},[605,37399,7392],{"class":610},[605,37401,37308],{"class":618},[605,37403,625],{"class":610},[605,37405,628],{"class":610},[605,37407,1466],{"class":610},[605,37409,937],{"class":791},[605,37411,1471],{"class":610},[605,37413,21593],{"class":651},[605,37415,1118],{"class":610},[605,37417,21598],{"class":651},[605,37419,21601],{"class":610},[605,37421,3490],{"class":791},[605,37423,1471],{"class":610},[605,37425,937],{"class":791},[605,37427,1481],{"class":610},[605,37429,2987],{"class":610},[605,37431,37432],{"class":607,"line":723},[605,37433,7459],{"class":610},[605,37435,37436,37438,37440],{"class":607,"line":746},[605,37437,700],{"class":610},[605,37439,718],{"class":614},[605,37441,637],{"class":610},[7473,37443,37445],{"id":37444},"syncing-rotations","Syncing Rotations",[582,37447,37448,37449,2068],{},"You can sync the environment rotation with the background rotation using the ",[586,37450,37451],{},"syncMaterials",[594,37453,37455],{"className":596,"code":37454,"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,37456,37457,37465,37471,37483,37497,37512,37546,37550],{"__ignoreMap":544},[605,37458,37459,37461,37463],{"class":607,"line":545},[605,37460,611],{"class":610},[605,37462,718],{"class":614},[605,37464,637],{"class":610},[605,37466,37467,37469],{"class":607,"line":546},[605,37468,726],{"class":610},[605,37470,18825],{"class":614},[605,37472,37473,37475,37477,37479,37481],{"class":607,"line":676},[605,37474,37336],{"class":618},[605,37476,625],{"class":610},[605,37478,628],{"class":610},[605,37480,37343],{"class":631},[605,37482,2987],{"class":610},[605,37484,37485,37487,37489,37491,37493,37495],{"class":607,"line":697},[605,37486,7392],{"class":610},[605,37488,37352],{"class":618},[605,37490,625],{"class":610},[605,37492,628],{"class":610},[605,37494,933],{"class":3870},[605,37496,2987],{"class":610},[605,37498,37499,37501,37504,37506,37508,37510],{"class":607,"line":707},[605,37500,7392],{"class":610},[605,37502,37503],{"class":618},"sync-materials",[605,37505,625],{"class":610},[605,37507,628],{"class":610},[605,37509,933],{"class":3870},[605,37511,2987],{"class":610},[605,37513,37514,37516,37518,37520,37522,37524,37526,37528,37530,37532,37534,37536,37538,37540,37542,37544],{"class":607,"line":713},[605,37515,7392],{"class":610},[605,37517,37367],{"class":618},[605,37519,625],{"class":610},[605,37521,628],{"class":610},[605,37523,1466],{"class":610},[605,37525,937],{"class":791},[605,37527,1471],{"class":610},[605,37529,21593],{"class":651},[605,37531,1118],{"class":610},[605,37533,21598],{"class":651},[605,37535,21601],{"class":610},[605,37537,792],{"class":791},[605,37539,1471],{"class":610},[605,37541,937],{"class":791},[605,37543,1481],{"class":610},[605,37545,2987],{"class":610},[605,37547,37548],{"class":607,"line":723},[605,37549,7459],{"class":610},[605,37551,37552,37554,37556],{"class":607,"line":746},[605,37553,700],{"class":610},[605,37555,718],{"class":614},[605,37557,637],{"class":610},[582,37559,37560,37561,37563],{},"When ",[586,37562,37451],{}," is enabled:",[3136,37565,37566,37569,37572],{},[3139,37567,37568],{},"The environment rotation will automatically match the background rotation",[3139,37570,37571],{},"All materials in the scene will update to reflect the new rotation",[3139,37573,37574],{},"This ensures visual consistency between the background and environment reflections",[472,37576,894],{"id":893},[899,37578,37579,37589],{},[902,37580,37581],{},[905,37582,37583,37585,37587],{},[908,37584,910],{"align":969},[908,37586,913],{"align":969},[908,37588,916],{},[918,37590,37591,37604,37617,37637,37652,37663,37676,37687,37698,37709,37720,37732,37744,37759,37773],{},[905,37592,37593,37597,37600],{},[923,37594,37595],{"align":969},[586,37596,18837],{},[923,37598,37599],{"align":969},"Array of 6 urls to images, one for each side of the CubeTexture, or an HDR file",[923,37601,37602],{},[586,37603,1151],{},[905,37605,37606,37610,37613],{},[923,37607,37608],{"align":969},[586,37609,11353],{},[923,37611,37612],{"align":969},"Path to the environment map files",[923,37614,37615],{},[586,37616,1151],{},[905,37618,37619,37624,37627],{},[923,37620,37621],{"align":969},[586,37622,37623],{},"encoding",[923,37625,37626],{"align":969},"Encoding of the environment map",[923,37628,37629,37632,37633,37636],{},[586,37630,37631],{},"SRGBColorSpace"," for array files, ",[586,37634,37635],{},"LinearEncoding"," for single texture",[905,37638,37639,37643,37648],{},[923,37640,37641],{"align":969},[586,37642,37352],{},[923,37644,930,37645,37647],{"align":969},[586,37646,933],{},", the environment map will be used as the scene background",[923,37649,37650],{},[586,37651,943],{},[905,37653,37654,37658,37661],{},[923,37655,37656],{"align":969},[586,37657,15024],{},[923,37659,37660],{"align":969},"Blur factor between 0 and 1 (only works with three 0.146 and up)",[923,37662,937],{},[905,37664,37665,37669,37672],{},[923,37666,37667],{"align":969},[586,37668,37281],{},[923,37670,37671],{"align":969},"Preset environment map",[923,37673,37674],{},[586,37675,1151],{},[905,37677,37678,37682,37685],{},[923,37679,37680],{"align":969},[586,37681,21937],{},[923,37683,37684],{"align":969},"The resolution of the WebGLCubeRenderTarget",[923,37686,21945],{},[905,37688,37689,37693,37696],{},[923,37690,37691],{"align":969},[586,37692,36279],{},[923,37694,37695],{"align":969},"The near of the CubeCamera",[923,37697,1893],{},[905,37699,37700,37704,37707],{},[923,37701,37702],{"align":969},[586,37703,34031],{},[923,37705,37706],{"align":969},"The far of the CubeCamera",[923,37708,5165],{},[905,37710,37711,37715,37718],{},[923,37712,37713],{"align":969},[586,37714,32388],{},[923,37716,37717],{"align":969},"The frames of the cubeCamera.update",[923,37719,6938],{},[905,37721,37722,37727,37730],{},[923,37723,37724],{"align":969},[586,37725,37726],{},"backgroundIntensity",[923,37728,37729],{"align":969},"Intensity of the background",[923,37731,1893],{},[905,37733,37734,37739,37742],{},[923,37735,37736],{"align":969},[586,37737,37738],{},"environmentIntensity",[923,37740,37741],{"align":969},"Intensity of the environment",[923,37743,1893],{},[905,37745,37746,37751,37754],{},[923,37747,37748],{"align":969},[586,37749,37750],{},"backgroundRotation",[923,37752,37753],{"align":969},"Rotation of the background (in radians)",[923,37755,37756],{},[605,37757,37758],{},"0, 0, 0",[905,37760,37761,37766,37769],{},[923,37762,37763],{"align":969},[586,37764,37765],{},"environmentRotation",[923,37767,37768],{"align":969},"Rotation of the environment (in radians)",[923,37770,37771],{},[605,37772,37758],{},[905,37774,37775,37779,37782],{},[923,37776,37777],{"align":969},[586,37778,37451],{},[923,37780,37781],{"align":969},"If true, environment rotation will sync with background rotation",[923,37783,943],{},[7473,37785,37275],{"id":37786},"presets-1",[594,37788,37791],{"className":37789,"code":37790,"language":22930},[22928],"sunset\nstudio\ncity\numbrellas\nnight\nforest\nsnow\ndawn\nhangar\nurban\nmodern\nshangai\n",[586,37792,37790],{"__ignoreMap":544},[1299,37794,37795],{},"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":37797},[37798,37799,37800,37801,37804],{"id":592,"depth":546,"text":15},{"id":37065,"depth":546,"text":37066},{"id":37274,"depth":546,"text":37275},{"id":37308,"depth":546,"text":37309,"children":37802},[37803],{"id":37444,"depth":676,"text":37445},{"id":893,"depth":546,"text":894,"children":37805},[37806],{"id":37786,"depth":676,"text":37275},"Automatically sets up a global cubemap for scene environment and background.",{},{"title":347,"description":37807},"dqLZk4n0fsNI6BVPDBhIxhgyNLq36JyLYtIkuxeINv0",{"id":37812,"title":351,"body":37813,"description":38377,"extension":559,"links":560,"meta":38378,"navigation":562,"path":352,"seo":38379,"stem":353,"__hash__":38380},"docs/2.api/8.staging/2.use-environment.md",{"type":469,"value":37814,"toc":38373},[37815,37819,37828,37837,37839,37844,38046,38051,38084,38089,38173,38175,38370],[2558,37816,37817],{},[36788,37818],{},[582,37820,37821,37823,37824,36796,37826,1118],{},[586,37822,351],{}," composable that automatically sets up a global cubemap, which affects the default ",[586,37825,36795],{},[586,37827,36799],{},[582,37829,37830,37831,37836],{},"It uses the ",[1112,37832,37835],{"href":37833,"rel":37834},"https://threejs.org/docs/#api/en/loaders/CubeTextureLoader",[1116],"CubeTextureLoader"," to load the cubemap",[472,37838,15],{"id":592},[3725,37840,37841],{},[582,37842,37843],{},"UseEnvironment needs to be wrapped by a Suspense component",[594,37845,37847],{"className":596,"code":37846,"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,37848,37849,37869,37888,37907,37911,37927,37936,37948,37959,37970,37981,37992,38003,38009,38021,38032,38038],{"__ignoreMap":544},[605,37850,37851,37853,37855,37857,37859,37861,37863,37865,37867],{"class":607,"line":545},[605,37852,611],{"class":610},[605,37854,615],{"class":614},[605,37856,619],{"class":618},[605,37858,622],{"class":618},[605,37860,625],{"class":610},[605,37862,628],{"class":610},[605,37864,632],{"class":631},[605,37866,628],{"class":610},[605,37868,637],{"class":610},[605,37870,37871,37873,37875,37878,37880,37882,37884,37886],{"class":607,"line":546},[605,37872,645],{"class":644},[605,37874,648],{"class":610},[605,37876,37877],{"class":651}," useEnvironment",[605,37879,661],{"class":610},[605,37881,664],{"class":644},[605,37883,667],{"class":610},[605,37885,670],{"class":631},[605,37887,673],{"class":610},[605,37889,37890,37892,37894,37897,37899,37901,37903,37905],{"class":607,"line":676},[605,37891,645],{"class":644},[605,37893,648],{"class":610},[605,37895,37896],{"class":651}," SRGBColorSpace",[605,37898,661],{"class":610},[605,37900,664],{"class":644},[605,37902,667],{"class":610},[605,37904,2678],{"class":631},[605,37906,673],{"class":610},[605,37908,37909],{"class":607,"line":697},[605,37910,710],{"emptyLinePlaceholder":562},[605,37912,37913,37915,37917,37919,37921,37923,37925],{"class":607,"line":707},[605,37914,2689],{"class":618},[605,37916,19354],{"class":651},[605,37918,625],{"class":610},[605,37920,18546],{"class":644},[605,37922,37877],{"class":2800},[605,37924,2970],{"class":651},[605,37926,2751],{"class":610},[605,37928,37929,37932,37934],{"class":607,"line":713},[605,37930,37931],{"class":614},"  files",[605,37933,1190],{"class":610},[605,37935,14018],{"class":651},[605,37937,37938,37941,37944,37946],{"class":607,"line":723},[605,37939,37940],{"class":610},"    '",[605,37942,37943],{"class":631},"/textures/environmentMaps/0/px.jpg",[605,37945,5536],{"class":610},[605,37947,14031],{"class":610},[605,37949,37950,37952,37955,37957],{"class":607,"line":746},[605,37951,37940],{"class":610},[605,37953,37954],{"class":631},"/textures/environmentMaps/0/nx.jpg",[605,37956,5536],{"class":610},[605,37958,14031],{"class":610},[605,37960,37961,37963,37966,37968],{"class":607,"line":758},[605,37962,37940],{"class":610},[605,37964,37965],{"class":631},"/textures/environmentMaps/0/py.jpg",[605,37967,5536],{"class":610},[605,37969,14031],{"class":610},[605,37971,37972,37974,37977,37979],{"class":607,"line":768},[605,37973,37940],{"class":610},[605,37975,37976],{"class":631},"/textures/environmentMaps/0/ny.jpg",[605,37978,5536],{"class":610},[605,37980,14031],{"class":610},[605,37982,37983,37985,37988,37990],{"class":607,"line":773},[605,37984,37940],{"class":610},[605,37986,37987],{"class":631},"/textures/environmentMaps/0/pz.jpg",[605,37989,5536],{"class":610},[605,37991,14031],{"class":610},[605,37993,37994,37996,37999,38001],{"class":607,"line":799},[605,37995,37940],{"class":610},[605,37997,37998],{"class":631},"/textures/environmentMaps/0/nz.jpg",[605,38000,5536],{"class":610},[605,38002,14031],{"class":610},[605,38004,38005,38007],{"class":607,"line":599},[605,38006,35127],{"class":651},[605,38008,14031],{"class":610},[605,38010,38011,38014,38016,38019],{"class":607,"line":822},[605,38012,38013],{"class":614},"  path",[605,38015,1190],{"class":610},[605,38017,38018],{"class":610}," ''",[605,38020,14031],{"class":610},[605,38022,38023,38026,38028,38030],{"class":607,"line":833},[605,38024,38025],{"class":614},"  encoding",[605,38027,1190],{"class":610},[605,38029,37896],{"class":651},[605,38031,14031],{"class":610},[605,38033,38034,38036],{"class":607,"line":844},[605,38035,5544],{"class":610},[605,38037,5539],{"class":651},[605,38039,38040,38042,38044],{"class":607,"line":854},[605,38041,700],{"class":610},[605,38043,615],{"class":614},[605,38045,637],{"class":610},[582,38047,18553,38048,38050],{},[586,38049,13433],{}," in your scene:",[594,38052,38055],{"className":596,"code":38053,"highlights":38054,"language":601,"meta":544,"style":544},"\u003CTresMesh>\n  \u003CTresSphereGeometry />\n  \u003CTresMeshStandardMaterial :map=\"texture\" />\n\u003C/TresMesh>\n",[676],[586,38056,38057,38065,38070,38076],{"__ignoreMap":544},[605,38058,38059,38061,38063],{"class":607,"line":545},[605,38060,611],{"class":610},[605,38062,828],{"class":614},[605,38064,637],{"class":610},[605,38066,38067],{"class":607,"line":546},[605,38068,38069],{"class":651},"  \u003CTresSphereGeometry />\n",[605,38071,38073],{"class":38072,"line":676},[607,641],[605,38074,38075],{"class":651},"  \u003CTresMeshStandardMaterial :map=\"texture\" />\n",[605,38077,38078,38080,38082],{"class":607,"line":697},[605,38079,700],{"class":610},[605,38081,828],{"class":614},[605,38083,637],{"class":610},[582,38085,37027,38086,38088],{},[586,38087,37030],{}," file directly",[594,38090,38092],{"className":1158,"code":38091,"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,38093,38094,38112,38116,38132,38147,38157,38167],{"__ignoreMap":544},[605,38095,38096,38098,38100,38102,38104,38106,38108,38110],{"class":607,"line":545},[605,38097,645],{"class":644},[605,38099,648],{"class":610},[605,38101,37877],{"class":651},[605,38103,661],{"class":610},[605,38105,664],{"class":644},[605,38107,667],{"class":610},[605,38109,670],{"class":631},[605,38111,673],{"class":610},[605,38113,38114],{"class":607,"line":546},[605,38115,710],{"emptyLinePlaceholder":562},[605,38117,38118,38120,38122,38124,38126,38128,38130],{"class":607,"line":676},[605,38119,2689],{"class":618},[605,38121,19354],{"class":651},[605,38123,625],{"class":610},[605,38125,18546],{"class":644},[605,38127,37877],{"class":2800},[605,38129,2970],{"class":651},[605,38131,2751],{"class":610},[605,38133,38134,38136,38138,38140,38143,38145],{"class":607,"line":697},[605,38135,37931],{"class":614},[605,38137,1190],{"class":610},[605,38139,667],{"class":610},[605,38141,38142],{"class":631},"/sunset.hdr",[605,38144,5536],{"class":610},[605,38146,14031],{"class":610},[605,38148,38149,38151,38153,38155],{"class":607,"line":707},[605,38150,38013],{"class":614},[605,38152,1190],{"class":610},[605,38154,38018],{"class":610},[605,38156,14031],{"class":610},[605,38158,38159,38161,38163,38165],{"class":607,"line":713},[605,38160,38025],{"class":614},[605,38162,1190],{"class":610},[605,38164,37896],{"class":651},[605,38166,14031],{"class":610},[605,38168,38169,38171],{"class":607,"line":723},[605,38170,5544],{"class":610},[605,38172,5539],{"class":651},[472,38174,7487],{"id":11049},[899,38176,38177,38189],{},[902,38178,38179],{},[905,38180,38181,38183,38185,38187],{},[908,38182,3118],{"align":969},[908,38184,10957],{},[908,38186,916],{},[908,38188,913],{},[918,38190,38191,38208,38225,38247,38266,38283,38300,38317,38334,38353],{},[905,38192,38193,38197,38201,38205],{},[923,38194,38195],{"align":969},[1673,38196,18837],{},[923,38198,38199],{},[586,38200,18953],{},[923,38202,38203],{},[586,38204,1151],{},[923,38206,38207],{},"Array of 6 urls to images, one for each side of the CubeTexture. or and HDR",[905,38209,38210,38214,38218,38222],{},[923,38211,38212],{"align":969},[1673,38213,11353],{},[923,38215,38216],{},[586,38217,11014],{},[923,38219,38220],{},[586,38221,943],{},[923,38223,38224],{},"Path to the environment map files.",[905,38226,38227,38231,38236,38244],{},[923,38228,38229],{"align":969},[1673,38230,37623],{},[923,38232,38233],{},[586,38234,38235],{},"Encoding",[923,38237,38238,38240,38241,38243],{},[586,38239,37631],{}," for an array of files and ",[586,38242,37635],{}," for a single texture",[923,38245,38246],{},"Encoding of the environment map.",[905,38248,38249,38253,38257,38261],{},[923,38250,38251],{"align":969},[1673,38252,37352],{},[923,38254,38255],{},[586,38256,11014],{},[923,38258,38259],{},[586,38260,943],{},[923,38262,930,38263,38265],{},[586,38264,933],{}," the texture will be used as the scene background.",[905,38267,38268,38272,38276,38280],{},[923,38269,38270],{"align":969},[1673,38271,15024],{},[923,38273,38274],{},[586,38275,2537],{},[923,38277,38278],{},[586,38279,937],{},[923,38281,38282],{},"Blur factor between 0 and 1. (only works with three 0.146 and up)",[905,38284,38285,38289,38293,38297],{},[923,38286,38287],{"align":969},[1673,38288,37281],{},[923,38290,38291],{},[586,38292,11094],{},[923,38294,38295],{},[586,38296,1151],{},[923,38298,38299],{},"Preset environment map.",[905,38301,38302,38306,38310,38314],{},[923,38303,38304],{"align":969},[1673,38305,37726],{},[923,38307,38308],{},[586,38309,2537],{},[923,38311,38312],{},[586,38313,1893],{},[923,38315,38316],{},"Intensity of the background.",[905,38318,38319,38323,38327,38331],{},[923,38320,38321],{"align":969},[1673,38322,37738],{},[923,38324,38325],{},[586,38326,2537],{},[923,38328,38329],{},[586,38330,1893],{},[923,38332,38333],{},"Intensity of the environment.",[905,38335,38336,38340,38345,38350],{},[923,38337,38338],{"align":969},[1673,38339,37750],{},[923,38341,38342],{},[586,38343,38344],{},"VectorFlexibleParams",[923,38346,38347],{},[586,38348,38349],{},"[0, 0, 0]",[923,38351,38352],{},"Rotation of the background.",[905,38354,38355,38359,38363,38367],{},[923,38356,38357],{"align":969},[1673,38358,37765],{},[923,38360,38361],{},[586,38362,38344],{},[923,38364,38365],{},[586,38366,38349],{},[923,38368,38369],{},"Rotation of the environment.",[1299,38371,38372],{},"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":38374},[38375,38376],{"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":38377},"6daKH-E6ICNjAkrFUlcQXUgujIBuYCGJ6Xewfx615-c",{"id":38382,"title":355,"body":38383,"description":38672,"extension":559,"links":560,"meta":38673,"navigation":562,"path":356,"seo":38674,"stem":357,"__hash__":38675},"docs/2.api/8.staging/3.lightformer.md",{"type":469,"value":38384,"toc":38669},[38385,38390,38396,38590,38592,38595,38667],[576,38386,38387],{},[38388,38389],"staging-lightformer",{},[582,38391,38392,38393,38395],{},"You can incorporate ",[586,38394,355],{}," into the environment just like a slot.",[594,38397,38399],{"className":596,"code":38398,"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,38400,38401,38411,38436,38444,38448,38456,38464,38508,38574,38582],{"__ignoreMap":544},[605,38402,38403,38405,38407,38409],{"class":607,"line":545},[605,38404,611],{"class":610},[605,38406,615],{"class":614},[605,38408,619],{"class":618},[605,38410,637],{"class":610},[605,38412,38413,38415,38417,38420,38422,38425,38427,38429,38431,38434],{"class":607,"line":546},[605,38414,645],{"class":644},[605,38416,648],{"class":610},[605,38418,38419],{"class":651}," Enviroment",[605,38421,655],{"class":610},[605,38423,38424],{"class":651}," LightFormer",[605,38426,661],{"class":610},[605,38428,664],{"class":644},[605,38430,667],{"class":610},[605,38432,38433],{"class":631},"@tres/cientos",[605,38435,673],{"class":610},[605,38437,38438,38440,38442],{"class":607,"line":676},[605,38439,700],{"class":610},[605,38441,615],{"class":614},[605,38443,637],{"class":610},[605,38445,38446],{"class":607,"line":697},[605,38447,710],{"emptyLinePlaceholder":562},[605,38449,38450,38452,38454],{"class":607,"line":707},[605,38451,611],{"class":610},[605,38453,718],{"class":614},[605,38455,637],{"class":610},[605,38457,38458,38460,38462],{"class":607,"line":713},[605,38459,726],{"class":610},[605,38461,347],{"class":614},[605,38463,637],{"class":610},[605,38465,38466,38468,38470,38472,38474,38476,38478,38480,38482,38484,38486,38488,38490,38492,38494,38496,38498,38500,38502,38504,38506],{"class":607,"line":723},[605,38467,749],{"class":610},[605,38469,355],{"class":614},[605,38471,781],{"class":610},[605,38473,1886],{"class":618},[605,38475,625],{"class":610},[605,38477,628],{"class":610},[605,38479,4645],{"class":791},[605,38481,628],{"class":610},[605,38483,781],{"class":610},[605,38485,1459],{"class":618},[605,38487,625],{"class":610},[605,38489,628],{"class":610},[605,38491,1466],{"class":610},[605,38493,937],{"class":791},[605,38495,1471],{"class":610},[605,38497,2396],{"class":791},[605,38499,3598],{"class":610},[605,38501,19149],{"class":791},[605,38503,1481],{"class":610},[605,38505,628],{"class":610},[605,38507,755],{"class":610},[605,38509,38510,38512,38514,38516,38518,38520,38523,38525,38527,38530,38532,38534,38536,38538,38540,38542,38544,38546,38548,38550,38552,38554,38556,38558,38560,38562,38564,38566,38568,38570,38572],{"class":607,"line":746},[605,38511,749],{"class":610},[605,38513,355],{"class":614},[605,38515,664],{"class":618},[605,38517,625],{"class":610},[605,38519,628],{"class":610},[605,38521,38522],{"class":631},"ring",[605,38524,628],{"class":610},[605,38526,781],{"class":610},[605,38528,38529],{"class":618},"rotation-y",[605,38531,625],{"class":610},[605,38533,628],{"class":610},[605,38535,4088],{"class":610},[605,38537,21593],{"class":651},[605,38539,1118],{"class":610},[605,38541,21598],{"class":651},[605,38543,21601],{"class":610},[605,38545,792],{"class":791},[605,38547,628],{"class":610},[605,38549,781],{"class":610},[605,38551,784],{"class":618},[605,38553,625],{"class":610},[605,38555,628],{"class":610},[605,38557,1466],{"class":610},[605,38559,1478],{"class":791},[605,38561,1471],{"class":610},[605,38563,1478],{"class":791},[605,38565,1471],{"class":610},[605,38567,1893],{"class":791},[605,38569,1481],{"class":610},[605,38571,628],{"class":610},[605,38573,755],{"class":610},[605,38575,38576,38578,38580],{"class":607,"line":758},[605,38577,877],{"class":610},[605,38579,347],{"class":614},[605,38581,637],{"class":610},[605,38583,38584,38586,38588],{"class":607,"line":768},[605,38585,700],{"class":610},[605,38587,718],{"class":614},[605,38589,637],{"class":610},[7473,38591,894],{"id":893},[582,38593,38594],{},"Lightformer inherits from mesh, and its extension parameters include:",[899,38596,38597,38607],{},[902,38598,38599],{},[905,38600,38601,38603,38605],{},[908,38602,910],{"align":969},[908,38604,913],{"align":969},[908,38606,916],{},[918,38608,38609,38630,38641,38655],{},[905,38610,38611,38615,38626],{},[923,38612,38613],{"align":969},[586,38614,10669],{},[923,38616,38617,1471,38620,1471,38622,38625],{"align":969},[586,38618,38619],{},"circle",[586,38621,38522],{},[586,38623,38624],{},"rect",", or any other Mesh type",[923,38627,38628],{},[586,38629,38624],{},[905,38631,38632,38636,38639],{},[923,38633,38634],{"align":969},[586,38635,1886],{},[923,38637,38638],{"align":969},"The intensity of the light",[923,38640,1893],{},[905,38642,38643,38647,38650],{},[923,38644,38645],{"align":969},[586,38646,2500],{},[923,38648,38649],{"align":969},"The color of the light",[923,38651,38652],{},[586,38653,38654],{},"0xffffff",[905,38656,38657,38661,38664],{},[923,38658,38659],{"align":969},[586,38660,1989],{},[923,38662,38663],{"align":969},"The arguments of the Geometry",[923,38665,38666],{},"When using other geometries, set the corresponding arguments",[1299,38668,7841],{},{"title":544,"searchDepth":545,"depth":546,"links":38670},[38671],{"id":893,"depth":676,"text":894},"Addon for environment component that provided you custom lights.",{},{"title":355,"description":38672},"R8P0Oy_2dpWPhe7Wm4S1_IYaBdzzvZXUtE1_rjpxx6o",{"id":38677,"title":359,"body":38678,"description":39026,"extension":559,"links":560,"meta":39027,"navigation":562,"path":360,"seo":39028,"stem":361,"__hash__":39029},"docs/2.api/8.staging/backdrop.md",{"type":469,"value":38679,"toc":39022},[38680,38685,38693,38695,38884,38887,38964,38966,39020],[576,38681,38682],{},[38683,38684],"staging-backdrop",{},[582,38686,2253,38687,3275,38689,38692],{},[586,38688,2256],{},[586,38690,38691],{},"\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,38694,15],{"id":592},[594,38696,38699],{"className":596,"code":38697,"highlights":38698,"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,38700,38701,38721,38739,38759,38767,38771,38779,38787,38819,38828,38836,38868,38876],{"__ignoreMap":544},[605,38702,38703,38705,38707,38709,38711,38713,38715,38717,38719],{"class":607,"line":545},[605,38704,611],{"class":610},[605,38706,615],{"class":614},[605,38708,619],{"class":618},[605,38710,622],{"class":618},[605,38712,625],{"class":610},[605,38714,628],{"class":610},[605,38716,632],{"class":631},[605,38718,628],{"class":610},[605,38720,637],{"class":610},[605,38722,38723,38725,38727,38729,38731,38733,38735,38737],{"class":607,"line":546},[605,38724,645],{"class":644},[605,38726,648],{"class":610},[605,38728,683],{"class":651},[605,38730,661],{"class":610},[605,38732,664],{"class":644},[605,38734,667],{"class":610},[605,38736,692],{"class":631},[605,38738,673],{"class":610},[605,38740,38742,38744,38746,38749,38751,38753,38755,38757],{"class":38741,"line":676},[607,641],[605,38743,645],{"class":644},[605,38745,648],{"class":610},[605,38747,38748],{"class":651}," Backdrop",[605,38750,661],{"class":610},[605,38752,664],{"class":644},[605,38754,667],{"class":610},[605,38756,670],{"class":631},[605,38758,673],{"class":610},[605,38760,38761,38763,38765],{"class":607,"line":697},[605,38762,700],{"class":610},[605,38764,615],{"class":614},[605,38766,637],{"class":610},[605,38768,38769],{"class":607,"line":707},[605,38770,710],{"emptyLinePlaceholder":562},[605,38772,38773,38775,38777],{"class":607,"line":713},[605,38774,611],{"class":610},[605,38776,718],{"class":614},[605,38778,637],{"class":610},[605,38780,38781,38783,38785],{"class":607,"line":723},[605,38782,726],{"class":610},[605,38784,729],{"class":614},[605,38786,637],{"class":610},[605,38788,38789,38791,38793,38795,38797,38799,38801,38803,38805,38807,38809,38811,38813,38815,38817],{"class":607,"line":746},[605,38790,749],{"class":610},[605,38792,752],{"class":614},[605,38794,781],{"class":610},[605,38796,1459],{"class":618},[605,38798,625],{"class":610},[605,38800,628],{"class":610},[605,38802,1466],{"class":610},[605,38804,937],{"class":791},[605,38806,1471],{"class":610},[605,38808,4160],{"class":791},[605,38810,1471],{"class":610},[605,38812,2396],{"class":791},[605,38814,1481],{"class":610},[605,38816,628],{"class":610},[605,38818,755],{"class":610},[605,38820,38822,38824,38826],{"class":38821,"line":758},[607,641],[605,38823,749],{"class":610},[605,38825,359],{"class":614},[605,38827,755],{"class":610},[605,38829,38830,38832,38834],{"class":607,"line":768},[605,38831,749],{"class":610},[605,38833,3518],{"class":614},[605,38835,755],{"class":610},[605,38837,38838,38840,38842,38844,38846,38848,38850,38852,38854,38856,38858,38860,38862,38864,38866],{"class":607,"line":773},[605,38839,749],{"class":610},[605,38841,3539],{"class":614},[605,38843,781],{"class":610},[605,38845,1459],{"class":618},[605,38847,625],{"class":610},[605,38849,628],{"class":610},[605,38851,1466],{"class":610},[605,38853,937],{"class":791},[605,38855,1471],{"class":610},[605,38857,792],{"class":791},[605,38859,1471],{"class":610},[605,38861,3490],{"class":791},[605,38863,1481],{"class":610},[605,38865,628],{"class":610},[605,38867,755],{"class":610},[605,38869,38870,38872,38874],{"class":607,"line":799},[605,38871,877],{"class":610},[605,38873,729],{"class":614},[605,38875,637],{"class":610},[605,38877,38878,38880,38882],{"class":607,"line":599},[605,38879,700],{"class":610},[605,38881,718],{"class":614},[605,38883,637],{"class":610},[582,38885,38886],{},"Or with a custom material",[594,38888,38892],{"className":38889,"code":38890,"language":38891,"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,38893,38894,38926,38956],{"__ignoreMap":544},[605,38895,38896,38898,38900,38903,38905,38907,38909,38911,38914,38916,38918,38920,38922,38924],{"class":607,"line":545},[605,38897,611],{"class":610},[605,38899,359],{"class":614},[605,38901,38902],{"class":618}," :floor",[605,38904,625],{"class":610},[605,38906,628],{"class":610},[605,38908,9877],{"class":631},[605,38910,628],{"class":610},[605,38912,38913],{"class":618}," :segments",[605,38915,625],{"class":610},[605,38917,628],{"class":610},[605,38919,23469],{"class":631},[605,38921,628],{"class":610},[605,38923,36089],{"class":618},[605,38925,637],{"class":610},[605,38927,38928,38930,38933,38935,38937,38939,38941,38943,38946,38948,38950,38952,38954],{"class":607,"line":546},[605,38929,726],{"class":610},[605,38931,38932],{"class":614},"TresMeshPhysicalMaterial",[605,38934,3978],{"class":618},[605,38936,625],{"class":610},[605,38938,628],{"class":610},[605,38940,6738],{"class":631},[605,38942,628],{"class":610},[605,38944,38945],{"class":618}," :roughness",[605,38947,625],{"class":610},[605,38949,628],{"class":610},[605,38951,1893],{"class":631},[605,38953,628],{"class":610},[605,38955,755],{"class":610},[605,38957,38958,38960,38962],{"class":607,"line":676},[605,38959,700],{"class":610},[605,38961,359],{"class":614},[605,38963,637],{"class":610},[472,38965,894],{"id":893},[899,38967,38968,38980],{},[902,38969,38970],{},[905,38971,38972,38974,38976,38978],{},[908,38973,3118],{"align":969},[908,38975,10957],{"align":969},[908,38977,916],{},[908,38979,26998],{},[918,38981,38982,38996,39008],{},[905,38983,38984,38987,38989,38993],{},[923,38985,38986],{"align":969},"floor",[923,38988,2537],{"align":969},[923,38990,38991],{},[586,38992,7041],{},[923,38994,38995],{},"No",[905,38997,38998,39000,39002,39006],{},[923,38999,23357],{"align":969},[923,39001,2537],{"align":969},[923,39003,39004],{},[586,39005,23469],{},[923,39007,38995],{},[905,39009,39010,39012,39014,39018],{},[923,39011,11936],{"align":969},[923,39013,11014],{"align":969},[923,39015,39016],{},[586,39017,943],{},[923,39019,38995],{},[1299,39021,1648],{},{"title":544,"searchDepth":545,"depth":546,"links":39023},[39024,39025],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},"A curved plane studio backdrop for presentational purposes.",{},{"title":359,"description":39026},"NGh9OweK5ISAF-G6NdgBZKgy35j2Bl_DEl17ABguTXw",{"id":39031,"title":363,"body":39032,"description":39571,"extension":559,"links":560,"meta":39572,"navigation":562,"path":364,"seo":39573,"stem":365,"__hash__":39574},"docs/2.api/8.staging/ocean.md",{"type":469,"value":39033,"toc":39563},[39034,39039,39054,39059,39061,39194,39198,39207,39210,39225,39229,39232,39402,39404,39409,39560],[2558,39035,39036],{},[39037,39038],"staging-ocean",{},[582,39040,39041,39044,39045,1118],{},[586,39042,39043],{},"\u003COcean />"," is a wrapper for the ",[1112,39046,39049,39050,39053],{"href":39047,"rel":39048},"https://threejs.org/examples/?q=ocean#webgl_shaders_ocean",[1116],"Three.js ",[586,39051,39052],{},"Water"," add-on",[3725,39055,39056],{},[582,39057,39058],{},"Ocean comes with a default texture, so it needs to be wrapped in a Suspense component.",[472,39060,15],{"id":592},[594,39062,39065],{"className":596,"code":39063,"highlights":39064,"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,39066,39067,39087,39105,39125,39133,39137,39145,39153,39161,39170,39178,39186],{"__ignoreMap":544},[605,39068,39069,39071,39073,39075,39077,39079,39081,39083,39085],{"class":607,"line":545},[605,39070,611],{"class":610},[605,39072,615],{"class":614},[605,39074,619],{"class":618},[605,39076,622],{"class":618},[605,39078,625],{"class":610},[605,39080,628],{"class":610},[605,39082,632],{"class":631},[605,39084,628],{"class":610},[605,39086,637],{"class":610},[605,39088,39089,39091,39093,39095,39097,39099,39101,39103],{"class":607,"line":546},[605,39090,645],{"class":644},[605,39092,648],{"class":610},[605,39094,683],{"class":651},[605,39096,661],{"class":610},[605,39098,664],{"class":644},[605,39100,667],{"class":610},[605,39102,692],{"class":631},[605,39104,673],{"class":610},[605,39106,39108,39110,39112,39115,39117,39119,39121,39123],{"class":39107,"line":676},[607,641],[605,39109,645],{"class":644},[605,39111,648],{"class":610},[605,39113,39114],{"class":651}," Ocean",[605,39116,661],{"class":610},[605,39118,664],{"class":644},[605,39120,667],{"class":610},[605,39122,670],{"class":631},[605,39124,673],{"class":610},[605,39126,39127,39129,39131],{"class":607,"line":697},[605,39128,700],{"class":610},[605,39130,615],{"class":614},[605,39132,637],{"class":610},[605,39134,39135],{"class":607,"line":707},[605,39136,710],{"emptyLinePlaceholder":562},[605,39138,39139,39141,39143],{"class":607,"line":713},[605,39140,611],{"class":610},[605,39142,718],{"class":614},[605,39144,637],{"class":610},[605,39146,39147,39149,39151],{"class":607,"line":723},[605,39148,726],{"class":610},[605,39150,729],{"class":614},[605,39152,637],{"class":610},[605,39154,39155,39157,39159],{"class":607,"line":746},[605,39156,749],{"class":610},[605,39158,14995],{"class":614},[605,39160,637],{"class":610},[605,39162,39164,39166,39168],{"class":39163,"line":758},[607,641],[605,39165,825],{"class":610},[605,39167,363],{"class":614},[605,39169,755],{"class":610},[605,39171,39172,39174,39176],{"class":607,"line":768},[605,39173,867],{"class":610},[605,39175,14995],{"class":614},[605,39177,637],{"class":610},[605,39179,39180,39182,39184],{"class":607,"line":773},[605,39181,877],{"class":610},[605,39183,729],{"class":614},[605,39185,637],{"class":610},[605,39187,39188,39190,39192],{"class":607,"line":799},[605,39189,700],{"class":610},[605,39191,718],{"class":614},[605,39193,637],{"class":610},[7473,39195,39197],{"id":39196},"sky","SKY",[582,39199,39200,39202,39203,39206],{},[586,39201,39043],{}," works hand in hand with the Sky component, detecting the position of the sun and reflecting on the water.\n(",[586,39204,39205],{},"\u003CSky />"," is not required for making this component work.)",[7473,39208,39209],{"id":33581},"Fog",[582,39211,2253,39212,39214,39215,10149,39219,39224],{},[586,39213,39043],{}," component also reacts when there's ",[1112,39216,39209],{"href":39217,"rel":39218},"https://threejs.org/docs/index.html?q=fog#api/en/scenes/Fog",[1116],[1112,39220,39223],{"href":39221,"rel":39222},"https://threejs.org/docs/index.html?q=fog#api/en/scenes/FogExp2",[1116],"FogExp2"," in your scene.",[472,39226,39228],{"id":39227},"custom-geometry","Custom Geometry",[582,39230,39231],{},"You can use custom geometry by adding it as a child.",[594,39233,39236],{"className":596,"code":39234,"highlights":39235,"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,39237,39238,39258,39276,39295,39303,39307,39315,39323,39331,39340,39369,39378,39386,39394],{"__ignoreMap":544},[605,39239,39240,39242,39244,39246,39248,39250,39252,39254,39256],{"class":607,"line":545},[605,39241,611],{"class":610},[605,39243,615],{"class":614},[605,39245,619],{"class":618},[605,39247,622],{"class":618},[605,39249,625],{"class":610},[605,39251,628],{"class":610},[605,39253,632],{"class":631},[605,39255,628],{"class":610},[605,39257,637],{"class":610},[605,39259,39260,39262,39264,39266,39268,39270,39272,39274],{"class":607,"line":546},[605,39261,645],{"class":644},[605,39263,648],{"class":610},[605,39265,683],{"class":651},[605,39267,661],{"class":610},[605,39269,664],{"class":644},[605,39271,667],{"class":610},[605,39273,692],{"class":631},[605,39275,673],{"class":610},[605,39277,39279,39281,39283,39285,39287,39289,39291,39293],{"class":39278,"line":676},[607,641],[605,39280,645],{"class":644},[605,39282,648],{"class":610},[605,39284,39114],{"class":651},[605,39286,661],{"class":610},[605,39288,664],{"class":644},[605,39290,667],{"class":610},[605,39292,670],{"class":631},[605,39294,673],{"class":610},[605,39296,39297,39299,39301],{"class":607,"line":697},[605,39298,700],{"class":610},[605,39300,615],{"class":614},[605,39302,637],{"class":610},[605,39304,39305],{"class":607,"line":707},[605,39306,710],{"emptyLinePlaceholder":562},[605,39308,39309,39311,39313],{"class":607,"line":713},[605,39310,611],{"class":610},[605,39312,718],{"class":614},[605,39314,637],{"class":610},[605,39316,39317,39319,39321],{"class":607,"line":723},[605,39318,726],{"class":610},[605,39320,729],{"class":614},[605,39322,637],{"class":610},[605,39324,39325,39327,39329],{"class":607,"line":746},[605,39326,749],{"class":610},[605,39328,14995],{"class":614},[605,39330,637],{"class":610},[605,39332,39334,39336,39338],{"class":39333,"line":758},[607,641],[605,39335,825],{"class":610},[605,39337,363],{"class":614},[605,39339,637],{"class":610},[605,39341,39343,39345,39347,39349,39351,39353,39355,39357,39359,39361,39363,39365,39367],{"class":39342,"line":768},[607,641],[605,39344,836],{"class":610},[605,39346,4027],{"class":614},[605,39348,781],{"class":610},[605,39350,1989],{"class":618},[605,39352,625],{"class":610},[605,39354,628],{"class":610},[605,39356,1466],{"class":610},[605,39358,4597],{"class":791},[605,39360,1471],{"class":610},[605,39362,29832],{"class":791},[605,39364,1481],{"class":610},[605,39366,628],{"class":610},[605,39368,755],{"class":610},[605,39370,39372,39374,39376],{"class":39371,"line":773},[607,641],[605,39373,857],{"class":610},[605,39375,363],{"class":614},[605,39377,637],{"class":610},[605,39379,39380,39382,39384],{"class":607,"line":799},[605,39381,867],{"class":610},[605,39383,14995],{"class":614},[605,39385,637],{"class":610},[605,39387,39388,39390,39392],{"class":607,"line":599},[605,39389,877],{"class":610},[605,39391,729],{"class":614},[605,39393,637],{"class":610},[605,39395,39396,39398,39400],{"class":607,"line":822},[605,39397,700],{"class":610},[605,39399,718],{"class":614},[605,39401,637],{"class":610},[472,39403,894],{"id":893},[3725,39405,39406],{},[582,39407,39408],{},"All of the props of this component are not reactive.",[899,39410,39411,39421],{},[902,39412,39413],{},[905,39414,39415,39417,39419],{},[908,39416,910],{"align":969},[908,39418,913],{"align":969},[908,39420,916],{},[918,39422,39423,39435,39447,39463,39476,39488,39501,39514,39525,39537,39549],{},[905,39424,39425,39430,39433],{},[923,39426,39427],{"align":969},[1673,39428,39429],{},"textureWidth",[923,39431,39432],{"align":969},"Width of the mirror texture",[923,39434,34066],{},[905,39436,39437,39442,39445],{},[923,39438,39439],{"align":969},[1673,39440,39441],{},"textureHeight",[923,39443,39444],{"align":969},"Height of the mirror texture",[923,39446,34066],{},[905,39448,39449,39454,39457],{},[923,39450,39451],{"align":969},[1673,39452,39453],{},"waterNormals",[923,39455,39456],{"align":969},"Normals of the water",[923,39458,39459],{},[1112,39460,39461],{"href":39461,"rel":39462},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/water-normals/Water_1_M_Normal.jpg",[1116],[905,39464,39465,39470,39473],{},[923,39466,39467],{"align":969},[1673,39468,39469],{},"sunDirection",[923,39471,39472],{"align":969},"Sun direction to be reflected on the water",[923,39474,39475],{},"Vector3(0,0,0)",[905,39477,39478,39483,39486],{},[923,39479,39480],{"align":969},[1673,39481,39482],{},"sunColor",[923,39484,39485],{"align":969},"Sun color to be reflected on the water",[923,39487,38654],{},[905,39489,39490,39495,39498],{},[923,39491,39492],{"align":969},[1673,39493,39494],{},"waterColor",[923,39496,39497],{"align":969},"Water Color",[923,39499,39500],{},"0x001e0f",[905,39502,39503,39508,39511],{},[923,39504,39505],{"align":969},[1673,39506,39507],{},"distortionScale",[923,39509,39510],{"align":969},"Distortion scale on reflected objects",[923,39512,39513],{},"3.7",[905,39515,39516,39520,39523],{},[923,39517,39518],{"align":969},[1673,39519,10233],{},[923,39521,39522],{"align":969},"Size of the water normals",[923,39524,1893],{},[905,39526,39527,39532,39535],{},[923,39528,39529],{"align":969},[1673,39530,39531],{},"clipBias",[923,39533,39534],{"align":969},"To use the clipBias property",[923,39536,7207],{},[905,39538,39539,39544,39547],{},[923,39540,39541],{"align":969},[1673,39542,39543],{},"alpha",[923,39545,39546],{"align":969},"To use the clipBias Alpha",[923,39548,7085],{},[905,39550,39551,39555,39558],{},[923,39552,39553],{"align":969},[1673,39554,19976],{},[923,39556,39557],{"align":969},"Which size of the mesh will render the water",[923,39559,21204],{},[1299,39561,39562],{},"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":39564},[39565,39569,39570],{"id":592,"depth":546,"text":15,"children":39566},[39567,39568],{"id":39196,"depth":676,"text":39197},{"id":33581,"depth":676,"text":39209},{"id":39227,"depth":546,"text":39228},{"id":893,"depth":546,"text":894},"Wrapper for the Three.js Water add-on with sky reflection support.",{},{"title":363,"description":39571},"PlsqVmWWdW6g0Gw3o8T0ocKMTLkrZyHWHr7HgkjrnMk",{"id":39576,"title":367,"body":39577,"description":40617,"extension":559,"links":560,"meta":40618,"navigation":562,"path":368,"seo":40619,"stem":369,"__hash__":40620},"docs/2.api/8.staging/precipitation.md",{"type":469,"value":39578,"toc":40609},[39579,39584,39590,39592,39598,39755,39759,39762,39969,39973,39976,40181,40185,40188,40434,40437,40442,40444,40607],[576,39580,39581],{},[39582,39583],"staging-precipitation",{},[582,39585,39586,39589],{},[586,39587,39588],{},"\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,39591,15],{"id":592},[582,39593,39594,39595,39597],{},"You can use ",[586,39596,39588],{}," component without passing any props, this will achieve a snowy effect, like the before example.",[594,39599,39602],{"className":596,"code":39600,"highlights":39601,"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,39603,39604,39624,39642,39662,39670,39674,39682,39690,39722,39731,39739,39747],{"__ignoreMap":544},[605,39605,39606,39608,39610,39612,39614,39616,39618,39620,39622],{"class":607,"line":545},[605,39607,611],{"class":610},[605,39609,615],{"class":614},[605,39611,619],{"class":618},[605,39613,622],{"class":618},[605,39615,625],{"class":610},[605,39617,628],{"class":610},[605,39619,632],{"class":631},[605,39621,628],{"class":610},[605,39623,637],{"class":610},[605,39625,39626,39628,39630,39632,39634,39636,39638,39640],{"class":607,"line":546},[605,39627,645],{"class":644},[605,39629,648],{"class":610},[605,39631,683],{"class":651},[605,39633,661],{"class":610},[605,39635,664],{"class":644},[605,39637,667],{"class":610},[605,39639,692],{"class":631},[605,39641,673],{"class":610},[605,39643,39645,39647,39649,39652,39654,39656,39658,39660],{"class":39644,"line":676},[607,641],[605,39646,645],{"class":644},[605,39648,648],{"class":610},[605,39650,39651],{"class":651}," Precipitation",[605,39653,661],{"class":610},[605,39655,664],{"class":644},[605,39657,667],{"class":610},[605,39659,670],{"class":631},[605,39661,673],{"class":610},[605,39663,39664,39666,39668],{"class":607,"line":697},[605,39665,700],{"class":610},[605,39667,615],{"class":614},[605,39669,637],{"class":610},[605,39671,39672],{"class":607,"line":707},[605,39673,710],{"emptyLinePlaceholder":562},[605,39675,39676,39678,39680],{"class":607,"line":713},[605,39677,611],{"class":610},[605,39679,718],{"class":614},[605,39681,637],{"class":610},[605,39683,39684,39686,39688],{"class":607,"line":723},[605,39685,726],{"class":610},[605,39687,729],{"class":614},[605,39689,637],{"class":610},[605,39691,39692,39694,39696,39698,39700,39702,39704,39706,39708,39710,39712,39714,39716,39718,39720],{"class":607,"line":746},[605,39693,749],{"class":610},[605,39695,752],{"class":614},[605,39697,781],{"class":610},[605,39699,1459],{"class":618},[605,39701,625],{"class":610},[605,39703,628],{"class":610},[605,39705,1466],{"class":610},[605,39707,937],{"class":791},[605,39709,1471],{"class":610},[605,39711,4160],{"class":791},[605,39713,1471],{"class":610},[605,39715,2396],{"class":791},[605,39717,1481],{"class":610},[605,39719,628],{"class":610},[605,39721,755],{"class":610},[605,39723,39725,39727,39729],{"class":39724,"line":758},[607,641],[605,39726,749],{"class":610},[605,39728,367],{"class":614},[605,39730,755],{"class":610},[605,39732,39733,39735,39737],{"class":607,"line":768},[605,39734,749],{"class":610},[605,39736,3518],{"class":614},[605,39738,755],{"class":610},[605,39740,39741,39743,39745],{"class":607,"line":773},[605,39742,877],{"class":610},[605,39744,729],{"class":614},[605,39746,637],{"class":610},[605,39748,39749,39751,39753],{"class":607,"line":799},[605,39750,700],{"class":610},[605,39752,718],{"class":614},[605,39754,637],{"class":610},[7473,39756,39758],{"id":39757},"rain","Rain",[582,39760,39761],{},"By setting the randomness to 0, increase the speed  and reduce the count. You can easily achieve a more rainy effect.",[594,39763,39766],{"className":596,"code":39764,"highlights":39765,"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,39767,39768,39788,39806,39825,39833,39837,39845,39853,39885,39893,39909,39924,39940,39945,39953,39961],{"__ignoreMap":544},[605,39769,39770,39772,39774,39776,39778,39780,39782,39784,39786],{"class":607,"line":545},[605,39771,611],{"class":610},[605,39773,615],{"class":614},[605,39775,619],{"class":618},[605,39777,622],{"class":618},[605,39779,625],{"class":610},[605,39781,628],{"class":610},[605,39783,632],{"class":631},[605,39785,628],{"class":610},[605,39787,637],{"class":610},[605,39789,39790,39792,39794,39796,39798,39800,39802,39804],{"class":607,"line":546},[605,39791,645],{"class":644},[605,39793,648],{"class":610},[605,39795,683],{"class":651},[605,39797,661],{"class":610},[605,39799,664],{"class":644},[605,39801,667],{"class":610},[605,39803,692],{"class":631},[605,39805,673],{"class":610},[605,39807,39809,39811,39813,39815,39817,39819,39821,39823],{"class":39808,"line":676},[607,641],[605,39810,645],{"class":644},[605,39812,648],{"class":610},[605,39814,39651],{"class":651},[605,39816,661],{"class":610},[605,39818,664],{"class":644},[605,39820,667],{"class":610},[605,39822,670],{"class":631},[605,39824,673],{"class":610},[605,39826,39827,39829,39831],{"class":607,"line":697},[605,39828,700],{"class":610},[605,39830,615],{"class":614},[605,39832,637],{"class":610},[605,39834,39835],{"class":607,"line":707},[605,39836,710],{"emptyLinePlaceholder":562},[605,39838,39839,39841,39843],{"class":607,"line":713},[605,39840,611],{"class":610},[605,39842,718],{"class":614},[605,39844,637],{"class":610},[605,39846,39847,39849,39851],{"class":607,"line":723},[605,39848,726],{"class":610},[605,39850,729],{"class":614},[605,39852,637],{"class":610},[605,39854,39855,39857,39859,39861,39863,39865,39867,39869,39871,39873,39875,39877,39879,39881,39883],{"class":607,"line":746},[605,39856,749],{"class":610},[605,39858,752],{"class":614},[605,39860,781],{"class":610},[605,39862,1459],{"class":618},[605,39864,625],{"class":610},[605,39866,628],{"class":610},[605,39868,1466],{"class":610},[605,39870,937],{"class":791},[605,39872,1471],{"class":610},[605,39874,4160],{"class":791},[605,39876,1471],{"class":610},[605,39878,2396],{"class":791},[605,39880,1481],{"class":610},[605,39882,628],{"class":610},[605,39884,755],{"class":610},[605,39886,39888,39890],{"class":39887,"line":758},[607,641],[605,39889,749],{"class":610},[605,39891,39892],{"class":614},"Precipitation\n",[605,39894,39896,39898,39900,39902,39904,39907],{"class":39895,"line":768},[607,641],[605,39897,5693],{"class":610},[605,39899,5100],{"class":618},[605,39901,625],{"class":610},[605,39903,628],{"class":610},[605,39905,39906],{"class":791},"2000",[605,39908,2987],{"class":610},[605,39910,39912,39914,39916,39918,39920,39922],{"class":39911,"line":773},[607,641],[605,39913,5693],{"class":610},[605,39915,3483],{"class":618},[605,39917,625],{"class":610},[605,39919,628],{"class":610},[605,39921,32203],{"class":791},[605,39923,2987],{"class":610},[605,39925,39927,39929,39932,39934,39936,39938],{"class":39926,"line":799},[607,641],[605,39928,5693],{"class":610},[605,39930,39931],{"class":618},"randomness",[605,39933,625],{"class":610},[605,39935,628],{"class":610},[605,39937,937],{"class":791},[605,39939,2987],{"class":610},[605,39941,39943],{"class":39942,"line":599},[607,641],[605,39944,10816],{"class":610},[605,39946,39947,39949,39951],{"class":607,"line":822},[605,39948,749],{"class":610},[605,39950,3518],{"class":614},[605,39952,755],{"class":610},[605,39954,39955,39957,39959],{"class":607,"line":833},[605,39956,877],{"class":610},[605,39958,729],{"class":614},[605,39960,637],{"class":610},[605,39962,39963,39965,39967],{"class":607,"line":844},[605,39964,700],{"class":610},[605,39966,718],{"class":614},[605,39968,637],{"class":610},[7473,39970,39972],{"id":39971},"storm","Storm",[582,39974,39975],{},"A storm effect? Easy just increase the randomness.",[594,39977,39980],{"className":596,"code":39978,"highlights":39979,"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,39981,39982,40002,40020,40039,40047,40051,40059,40067,40099,40106,40122,40137,40152,40157,40165,40173],{"__ignoreMap":544},[605,39983,39984,39986,39988,39990,39992,39994,39996,39998,40000],{"class":607,"line":545},[605,39985,611],{"class":610},[605,39987,615],{"class":614},[605,39989,619],{"class":618},[605,39991,622],{"class":618},[605,39993,625],{"class":610},[605,39995,628],{"class":610},[605,39997,632],{"class":631},[605,39999,628],{"class":610},[605,40001,637],{"class":610},[605,40003,40004,40006,40008,40010,40012,40014,40016,40018],{"class":607,"line":546},[605,40005,645],{"class":644},[605,40007,648],{"class":610},[605,40009,683],{"class":651},[605,40011,661],{"class":610},[605,40013,664],{"class":644},[605,40015,667],{"class":610},[605,40017,692],{"class":631},[605,40019,673],{"class":610},[605,40021,40023,40025,40027,40029,40031,40033,40035,40037],{"class":40022,"line":676},[607,641],[605,40024,645],{"class":644},[605,40026,648],{"class":610},[605,40028,39651],{"class":651},[605,40030,661],{"class":610},[605,40032,664],{"class":644},[605,40034,667],{"class":610},[605,40036,670],{"class":631},[605,40038,673],{"class":610},[605,40040,40041,40043,40045],{"class":607,"line":697},[605,40042,700],{"class":610},[605,40044,615],{"class":614},[605,40046,637],{"class":610},[605,40048,40049],{"class":607,"line":707},[605,40050,710],{"emptyLinePlaceholder":562},[605,40052,40053,40055,40057],{"class":607,"line":713},[605,40054,611],{"class":610},[605,40056,718],{"class":614},[605,40058,637],{"class":610},[605,40060,40061,40063,40065],{"class":607,"line":723},[605,40062,726],{"class":610},[605,40064,729],{"class":614},[605,40066,637],{"class":610},[605,40068,40069,40071,40073,40075,40077,40079,40081,40083,40085,40087,40089,40091,40093,40095,40097],{"class":607,"line":746},[605,40070,749],{"class":610},[605,40072,752],{"class":614},[605,40074,781],{"class":610},[605,40076,1459],{"class":618},[605,40078,625],{"class":610},[605,40080,628],{"class":610},[605,40082,1466],{"class":610},[605,40084,937],{"class":791},[605,40086,1471],{"class":610},[605,40088,4160],{"class":791},[605,40090,1471],{"class":610},[605,40092,2396],{"class":791},[605,40094,1481],{"class":610},[605,40096,628],{"class":610},[605,40098,755],{"class":610},[605,40100,40102,40104],{"class":40101,"line":758},[607,641],[605,40103,749],{"class":610},[605,40105,39892],{"class":614},[605,40107,40109,40111,40113,40115,40117,40120],{"class":40108,"line":768},[607,641],[605,40110,5693],{"class":610},[605,40112,5100],{"class":618},[605,40114,625],{"class":610},[605,40116,628],{"class":610},[605,40118,40119],{"class":791},"3000",[605,40121,2987],{"class":610},[605,40123,40125,40127,40129,40131,40133,40135],{"class":40124,"line":773},[607,641],[605,40126,5693],{"class":610},[605,40128,3483],{"class":618},[605,40130,625],{"class":610},[605,40132,628],{"class":610},[605,40134,1513],{"class":791},[605,40136,2987],{"class":610},[605,40138,40140,40142,40144,40146,40148,40150],{"class":40139,"line":799},[607,641],[605,40141,5693],{"class":610},[605,40143,39931],{"class":618},[605,40145,625],{"class":610},[605,40147,628],{"class":610},[605,40149,9877],{"class":791},[605,40151,2987],{"class":610},[605,40153,40155],{"class":40154,"line":599},[607,641],[605,40156,10816],{"class":610},[605,40158,40159,40161,40163],{"class":607,"line":822},[605,40160,749],{"class":610},[605,40162,3518],{"class":614},[605,40164,755],{"class":610},[605,40166,40167,40169,40171],{"class":607,"line":833},[605,40168,877],{"class":610},[605,40170,729],{"class":614},[605,40172,637],{"class":610},[605,40174,40175,40177,40179],{"class":607,"line":844},[605,40176,700],{"class":610},[605,40178,718],{"class":614},[605,40180,637],{"class":610},[7473,40182,40184],{"id":40183},"beam","Beam",[582,40186,40187],{},"What about an infinite beam? Just set the area, to the axis that you need constrain.",[594,40189,40192],{"className":596,"code":40190,"highlights":40191,"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,40193,40194,40214,40232,40251,40259,40263,40271,40279,40311,40318,40346,40361,40376,40391,40405,40410,40418,40426],{"__ignoreMap":544},[605,40195,40196,40198,40200,40202,40204,40206,40208,40210,40212],{"class":607,"line":545},[605,40197,611],{"class":610},[605,40199,615],{"class":614},[605,40201,619],{"class":618},[605,40203,622],{"class":618},[605,40205,625],{"class":610},[605,40207,628],{"class":610},[605,40209,632],{"class":631},[605,40211,628],{"class":610},[605,40213,637],{"class":610},[605,40215,40216,40218,40220,40222,40224,40226,40228,40230],{"class":607,"line":546},[605,40217,645],{"class":644},[605,40219,648],{"class":610},[605,40221,683],{"class":651},[605,40223,661],{"class":610},[605,40225,664],{"class":644},[605,40227,667],{"class":610},[605,40229,692],{"class":631},[605,40231,673],{"class":610},[605,40233,40235,40237,40239,40241,40243,40245,40247,40249],{"class":40234,"line":676},[607,641],[605,40236,645],{"class":644},[605,40238,648],{"class":610},[605,40240,39651],{"class":651},[605,40242,661],{"class":610},[605,40244,664],{"class":644},[605,40246,667],{"class":610},[605,40248,670],{"class":631},[605,40250,673],{"class":610},[605,40252,40253,40255,40257],{"class":607,"line":697},[605,40254,700],{"class":610},[605,40256,615],{"class":614},[605,40258,637],{"class":610},[605,40260,40261],{"class":607,"line":707},[605,40262,710],{"emptyLinePlaceholder":562},[605,40264,40265,40267,40269],{"class":607,"line":713},[605,40266,611],{"class":610},[605,40268,718],{"class":614},[605,40270,637],{"class":610},[605,40272,40273,40275,40277],{"class":607,"line":723},[605,40274,726],{"class":610},[605,40276,729],{"class":614},[605,40278,637],{"class":610},[605,40280,40281,40283,40285,40287,40289,40291,40293,40295,40297,40299,40301,40303,40305,40307,40309],{"class":607,"line":746},[605,40282,749],{"class":610},[605,40284,752],{"class":614},[605,40286,781],{"class":610},[605,40288,1459],{"class":618},[605,40290,625],{"class":610},[605,40292,628],{"class":610},[605,40294,1466],{"class":610},[605,40296,937],{"class":791},[605,40298,1471],{"class":610},[605,40300,4160],{"class":791},[605,40302,1471],{"class":610},[605,40304,2396],{"class":791},[605,40306,1481],{"class":610},[605,40308,628],{"class":610},[605,40310,755],{"class":610},[605,40312,40314,40316],{"class":40313,"line":758},[607,641],[605,40315,749],{"class":610},[605,40317,39892],{"class":614},[605,40319,40321,40323,40326,40328,40330,40332,40334,40336,40338,40340,40342,40344],{"class":40320,"line":768},[607,641],[605,40322,5693],{"class":610},[605,40324,40325],{"class":618},"area",[605,40327,625],{"class":610},[605,40329,628],{"class":610},[605,40331,1466],{"class":610},[605,40333,1513],{"class":791},[605,40335,1471],{"class":610},[605,40337,1513],{"class":791},[605,40339,1471],{"class":610},[605,40341,23469],{"class":791},[605,40343,1481],{"class":610},[605,40345,2987],{"class":610},[605,40347,40349,40351,40353,40355,40357,40359],{"class":40348,"line":773},[607,641],[605,40350,5693],{"class":610},[605,40352,5100],{"class":618},[605,40354,625],{"class":610},[605,40356,628],{"class":610},[605,40358,5165],{"class":791},[605,40360,2987],{"class":610},[605,40362,40364,40366,40368,40370,40372,40374],{"class":40363,"line":799},[607,641],[605,40365,5693],{"class":610},[605,40367,3483],{"class":618},[605,40369,625],{"class":610},[605,40371,628],{"class":610},[605,40373,8085],{"class":791},[605,40375,2987],{"class":610},[605,40377,40379,40381,40383,40385,40387,40389],{"class":40378,"line":599},[607,641],[605,40380,5693],{"class":610},[605,40382,10233],{"class":618},[605,40384,625],{"class":610},[605,40386,628],{"class":610},[605,40388,32203],{"class":791},[605,40390,2987],{"class":610},[605,40392,40394,40396,40398,40400,40403],{"class":40393,"line":822},[607,641],[605,40395,23371],{"class":618},[605,40397,625],{"class":610},[605,40399,628],{"class":610},[605,40401,40402],{"class":631},"#00ff00",[605,40404,2987],{"class":610},[605,40406,40408],{"class":40407,"line":833},[607,641],[605,40409,10816],{"class":610},[605,40411,40412,40414,40416],{"class":607,"line":844},[605,40413,749],{"class":610},[605,40415,3518],{"class":614},[605,40417,755],{"class":610},[605,40419,40420,40422,40424],{"class":607,"line":854},[605,40421,877],{"class":610},[605,40423,729],{"class":614},[605,40425,637],{"class":610},[605,40427,40428,40430,40432],{"class":607,"line":600},[605,40429,700],{"class":610},[605,40431,718],{"class":614},[605,40433,637],{"class":610},[582,40435,40436],{},"You can create much more! ☔",[3725,40438,40439],{},[582,40440,40441],{},"Be careful with the performance this components render infinite particles in movement",[472,40443,894],{"id":893},[899,40445,40446,40456],{},[902,40447,40448],{},[905,40449,40450,40452,40454],{},[908,40451,910],{"align":969},[908,40453,913],{"align":969},[908,40455,916],{},[918,40457,40458,40469,40483,40494,40505,40517,40528,40539,40551,40562,40573,40584,40595],{},[905,40459,40460,40464,40467],{},[923,40461,40462],{"align":969},[1673,40463,10233],{},[923,40465,40466],{"align":969},"The size of the drops.",[923,40468,2203],{},[905,40470,40471,40475,40478],{},[923,40472,40473],{"align":969},[1673,40474,40325],{},[923,40476,40477],{"align":969},"The size of the precipitation area.",[923,40479,40480],{},[605,40481,40482],{},"10, 10, 20",[905,40484,40485,40489,40492],{},[923,40486,40487],{"align":969},[1673,40488,2500],{},[923,40490,40491],{"align":969},"The color of the drops.",[923,40493,38654],{},[905,40495,40496,40500,40503],{},[923,40497,40498],{"align":969},[1673,40499,13426],{},[923,40501,40502],{"align":969},"Color texture of the drops.",[923,40504,3152],{},[905,40506,40507,40512,40515],{},[923,40508,40509],{"align":969},[1673,40510,40511],{},"alphaMap",[923,40513,40514],{"align":969},"Alpha texture of the Drops.",[923,40516,3152],{},[905,40518,40519,40523,40526],{},[923,40520,40521],{"align":969},[1673,40522,32470],{},[923,40524,40525],{"align":969},"Enables the WebGL to know when not to render the pixel.",[923,40527,1907],{},[905,40529,40530,40534,40537],{},[923,40531,40532],{"align":969},[1673,40533,4861],{},[923,40535,40536],{"align":969},"Set the opacity of the drops.",[923,40538,18051],{},[905,40540,40541,40545,40548],{},[923,40542,40543],{"align":969},[1673,40544,5100],{},[923,40546,40547],{"align":969},"Number of drops.",[923,40549,40550],{},"5000",[905,40552,40553,40557,40560],{},[923,40554,40555],{"align":969},[1673,40556,3483],{},[923,40558,40559],{"align":969},"Drops speed.",[923,40561,2203],{},[905,40563,40564,40568,40571],{},[923,40565,40566],{"align":969},[1673,40567,39931],{},[923,40569,40570],{"align":969},"Add randomness to the drops.",[923,40572,1513],{},[905,40574,40575,40579,40582],{},[923,40576,40577],{"align":969},[1673,40578,4334],{},[923,40580,40581],{"align":969},"Whether should write to the depth buffer or not. drops.",[923,40583,933],{},[905,40585,40586,40590,40593],{},[923,40587,40588],{"align":969},[1673,40589,4873],{},[923,40591,40592],{"align":969},"Transparency on the drops texture",[923,40594,943],{},[905,40596,40597,40602,40605],{},[923,40598,40599],{"align":969},[1673,40600,40601],{},"sizeAttenuation",[923,40603,40604],{"align":969},"Keep the same size regardless distance. drops.",[923,40606,933],{},[1299,40608,1648],{},{"title":544,"searchDepth":545,"depth":546,"links":40610},[40611,40616],{"id":592,"depth":546,"text":15,"children":40612},[40613,40614,40615],{"id":39757,"depth":676,"text":39758},{"id":39971,"depth":676,"text":39972},{"id":40183,"depth":676,"text":40184},{"id":893,"depth":546,"text":894},"Flexible infinite particle flow for rain, snow, waterfall, and beam effects.",{},{"title":367,"description":40617},"oN0a-7Db4CfLOwRF8vcglYxi0o3twbiI7bqgn-6GqoY",{"id":40622,"title":371,"body":40623,"description":41033,"extension":559,"links":560,"meta":41034,"navigation":562,"path":372,"seo":41035,"stem":373,"__hash__":41036},"docs/2.api/8.staging/sky.md",{"type":469,"value":40624,"toc":41029},[40625,40630,40640,40642,40846,40848,41027],[576,40626,40627],{},[40628,40629],"staging-sky",{},[582,40631,40632,39044,40634,1118],{},[586,40633,39205],{},[1112,40635,39049,40638,39053],{"href":40636,"rel":40637},"https://threejs.org/examples/?q=sky#webgl_shaders_sky",[1116],[586,40639,371],{},[472,40641,15],{"id":592},[594,40643,40646],{"className":596,"code":40644,"highlights":40645,"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,40647,40648,40668,40692,40710,40718,40722,40730,40751,40785,40794,40802,40830,40838],{"__ignoreMap":544},[605,40649,40650,40652,40654,40656,40658,40660,40662,40664,40666],{"class":607,"line":545},[605,40651,611],{"class":610},[605,40653,615],{"class":614},[605,40655,619],{"class":618},[605,40657,622],{"class":618},[605,40659,625],{"class":610},[605,40661,628],{"class":610},[605,40663,632],{"class":631},[605,40665,628],{"class":610},[605,40667,637],{"class":610},[605,40669,40671,40673,40675,40677,40679,40682,40684,40686,40688,40690],{"class":40670,"line":546},[607,641],[605,40672,645],{"class":644},[605,40674,648],{"class":610},[605,40676,658],{"class":651},[605,40678,655],{"class":610},[605,40680,40681],{"class":651}," Sky",[605,40683,661],{"class":610},[605,40685,664],{"class":644},[605,40687,667],{"class":610},[605,40689,670],{"class":631},[605,40691,673],{"class":610},[605,40693,40694,40696,40698,40700,40702,40704,40706,40708],{"class":607,"line":676},[605,40695,645],{"class":644},[605,40697,648],{"class":610},[605,40699,683],{"class":651},[605,40701,661],{"class":610},[605,40703,664],{"class":644},[605,40705,667],{"class":610},[605,40707,692],{"class":631},[605,40709,673],{"class":610},[605,40711,40712,40714,40716],{"class":607,"line":697},[605,40713,700],{"class":610},[605,40715,615],{"class":614},[605,40717,637],{"class":610},[605,40719,40720],{"class":607,"line":707},[605,40721,710],{"emptyLinePlaceholder":562},[605,40723,40724,40726,40728],{"class":607,"line":713},[605,40725,611],{"class":610},[605,40727,718],{"class":614},[605,40729,637],{"class":610},[605,40731,40732,40734,40736,40738,40741,40743,40745,40747,40749],{"class":607,"line":723},[605,40733,726],{"class":610},[605,40735,729],{"class":614},[605,40737,781],{"class":610},[605,40739,40740],{"class":618},"tone-mapping-exposure",[605,40742,625],{"class":610},[605,40744,628],{"class":610},[605,40746,7041],{"class":791},[605,40748,628],{"class":610},[605,40750,637],{"class":610},[605,40752,40753,40755,40757,40759,40761,40763,40765,40767,40769,40771,40774,40776,40779,40781,40783],{"class":607,"line":746},[605,40754,749],{"class":610},[605,40756,752],{"class":614},[605,40758,781],{"class":610},[605,40760,1459],{"class":618},[605,40762,625],{"class":610},[605,40764,628],{"class":610},[605,40766,1466],{"class":610},[605,40768,937],{"class":791},[605,40770,1471],{"class":610},[605,40772,40773],{"class":791},"15",[605,40775,1471],{"class":610},[605,40777,40778],{"class":791},"200",[605,40780,1481],{"class":610},[605,40782,628],{"class":610},[605,40784,755],{"class":610},[605,40786,40788,40790,40792],{"class":40787,"line":758},[607,641],[605,40789,749],{"class":610},[605,40791,371],{"class":614},[605,40793,755],{"class":610},[605,40795,40796,40798,40800],{"class":607,"line":768},[605,40797,749],{"class":610},[605,40799,763],{"class":614},[605,40801,755],{"class":610},[605,40803,40804,40806,40808,40810,40812,40814,40816,40818,40820,40822,40824,40826,40828],{"class":607,"line":773},[605,40805,749],{"class":610},[605,40807,3067],{"class":614},[605,40809,781],{"class":610},[605,40811,1989],{"class":618},[605,40813,625],{"class":610},[605,40815,628],{"class":610},[605,40817,1466],{"class":610},[605,40819,5165],{"class":791},[605,40821,1471],{"class":610},[605,40823,23469],{"class":791},[605,40825,1481],{"class":610},[605,40827,628],{"class":610},[605,40829,755],{"class":610},[605,40831,40832,40834,40836],{"class":607,"line":799},[605,40833,877],{"class":610},[605,40835,729],{"class":614},[605,40837,637],{"class":610},[605,40839,40840,40842,40844],{"class":607,"line":599},[605,40841,700],{"class":610},[605,40843,718],{"class":614},[605,40845,637],{"class":610},[472,40847,894],{"id":893},[899,40849,40850,40864],{},[902,40851,40852],{},[905,40853,40854,40856,40858,40860,40862],{},[908,40855,3118],{"align":969},[908,40857,10957],{"align":969},[908,40859,913],{"align":969},[908,40861,916],{"align":969},[908,40863,26998],{"align":969},[918,40865,40866,40887,40911,40937,40960,40980,41007],{},[905,40867,40868,40873,40877,40880,40885],{},[923,40869,40870],{"align":969},[1673,40871,40872],{},"turbidity",[923,40874,40875],{"align":969},[586,40876,2537],{},[923,40878,40879],{"align":969},"Haziness",[923,40881,40882],{"align":969},[586,40883,40884],{},"3.4",[923,40886,38995],{"align":969},[905,40888,40889,40894,40898,40905,40909],{},[923,40890,40891],{"align":969},[1673,40892,40893],{},"rayleigh",[923,40895,40896],{"align":969},[586,40897,2537],{},[923,40899,40900],{"align":969},[1112,40901,40904],{"href":40902,"rel":40903},"https://en.wikipedia.org/wiki/Rayleigh_scattering",[1116],"Rayleigh scattering",[923,40906,40907],{"align":969},[586,40908,4160],{},[923,40910,38995],{"align":969},[905,40912,40913,40918,40922,40930,40935],{},[923,40914,40915],{"align":969},[1673,40916,40917],{},"mieCoefficient",[923,40919,40920],{"align":969},[586,40921,2537],{},[923,40923,40924,40929],{"align":969},[1112,40925,40928],{"href":40926,"rel":40927},"https://en.wikipedia.org/wiki/Mie_scattering",[1116],"Mie scattering"," amount",[923,40931,40932],{"align":969},[586,40933,40934],{},"0.005",[923,40936,38995],{"align":969},[905,40938,40939,40944,40948,40954,40958],{},[923,40940,40941],{"align":969},[1673,40942,40943],{},"mieDirectionalG",[923,40945,40946],{"align":969},[586,40947,2537],{},[923,40949,40950,40953],{"align":969},[1112,40951,40928],{"href":40926,"rel":40952},[1116]," direction",[923,40955,40956],{"align":969},[586,40957,33784],{},[923,40959,38995],{"align":969},[905,40961,40962,40967,40971,40974,40978],{},[923,40963,40964],{"align":969},[1673,40965,40966],{},"elevation",[923,40968,40969],{"align":969},[586,40970,2537],{},[923,40972,40973],{"align":969},"Sun's elevation from the horizon, in degrees",[923,40975,40976],{"align":969},[586,40977,22775],{},[923,40979,38995],{"align":969},[905,40981,40982,40987,40991,41000,41005],{},[923,40983,40984],{"align":969},[1673,40985,40986],{},"azimuth",[923,40988,40989],{"align":969},[586,40990,2537],{},[923,40992,40993,40994,40999],{"align":969},"Sun's ",[1112,40995,40998],{"href":40996,"rel":40997},"https://en.wikipedia.org/wiki/Solar_azimuth_angle",[1116],"azimuth angle",", in degrees – its horizontal coordinate on the horizon",[923,41001,41002],{"align":969},[586,41003,41004],{},"180",[923,41006,38995],{"align":969},[905,41008,41009,41013,41017,41020,41025],{},[923,41010,41011],{"align":969},[1673,41012,6945],{},[923,41014,41015],{"align":969},[586,41016,2537],{},[923,41018,41019],{"align":969},"Sky box scale",[923,41021,41022],{"align":969},[586,41023,41024],{},"450000",[923,41026,38995],{"align":969},[1299,41028,1648],{},{"title":544,"searchDepth":545,"depth":546,"links":41030},[41031,41032],{"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":41033},"z9xEmwuzWS7Jr3s3_7eT9BeV1McRoKp3ZlWGZa_0yWI",{"id":41038,"title":375,"body":41039,"description":41444,"extension":559,"links":560,"meta":41445,"navigation":562,"path":376,"seo":41446,"stem":377,"__hash__":41447},"docs/2.api/8.staging/smoke.md",{"type":469,"value":41040,"toc":41438},[41041,41046,41052,41054,41059,41064,41234,41236,41428,41432,41436],[2558,41042,41043],{},[41044,41045],"staging-smoke",{},[582,41047,41048,41051],{},[586,41049,41050],{},"\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,41053,15],{"id":592},[3725,41055,41056],{},[582,41057,41058],{},"Smoke component comes with a default texture abstraction it needs to be wrapped by a Suspense component",[582,41060,39594,41061,41063],{},[586,41062,41050],{}," component without passing any props, but still if you want you can tweak the props to find the best setup for you",[594,41065,41067],{"className":596,"code":41066,"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,41068,41069,41089,41107,41126,41134,41138,41146,41154,41186,41194,41202,41210,41218,41226],{"__ignoreMap":544},[605,41070,41071,41073,41075,41077,41079,41081,41083,41085,41087],{"class":607,"line":545},[605,41072,611],{"class":610},[605,41074,615],{"class":614},[605,41076,619],{"class":618},[605,41078,622],{"class":618},[605,41080,625],{"class":610},[605,41082,628],{"class":610},[605,41084,632],{"class":631},[605,41086,628],{"class":610},[605,41088,637],{"class":610},[605,41090,41091,41093,41095,41097,41099,41101,41103,41105],{"class":607,"line":546},[605,41092,645],{"class":644},[605,41094,648],{"class":610},[605,41096,683],{"class":651},[605,41098,661],{"class":610},[605,41100,664],{"class":644},[605,41102,667],{"class":610},[605,41104,692],{"class":631},[605,41106,673],{"class":610},[605,41108,41109,41111,41113,41116,41118,41120,41122,41124],{"class":607,"line":676},[605,41110,645],{"class":644},[605,41112,648],{"class":610},[605,41114,41115],{"class":651}," Smoke",[605,41117,661],{"class":610},[605,41119,664],{"class":644},[605,41121,667],{"class":610},[605,41123,670],{"class":631},[605,41125,673],{"class":610},[605,41127,41128,41130,41132],{"class":607,"line":697},[605,41129,700],{"class":610},[605,41131,615],{"class":614},[605,41133,637],{"class":610},[605,41135,41136],{"class":607,"line":707},[605,41137,710],{"emptyLinePlaceholder":562},[605,41139,41140,41142,41144],{"class":607,"line":713},[605,41141,611],{"class":610},[605,41143,718],{"class":614},[605,41145,637],{"class":610},[605,41147,41148,41150,41152],{"class":607,"line":723},[605,41149,726],{"class":610},[605,41151,729],{"class":614},[605,41153,637],{"class":610},[605,41155,41156,41158,41160,41162,41164,41166,41168,41170,41172,41174,41176,41178,41180,41182,41184],{"class":607,"line":746},[605,41157,749],{"class":610},[605,41159,752],{"class":614},[605,41161,781],{"class":610},[605,41163,1459],{"class":618},[605,41165,625],{"class":610},[605,41167,628],{"class":610},[605,41169,1466],{"class":610},[605,41171,937],{"class":791},[605,41173,1471],{"class":610},[605,41175,4160],{"class":791},[605,41177,1471],{"class":610},[605,41179,2396],{"class":791},[605,41181,1481],{"class":610},[605,41183,628],{"class":610},[605,41185,755],{"class":610},[605,41187,41188,41190,41192],{"class":607,"line":758},[605,41189,749],{"class":610},[605,41191,14995],{"class":614},[605,41193,637],{"class":610},[605,41195,41196,41198,41200],{"class":607,"line":768},[605,41197,825],{"class":610},[605,41199,375],{"class":614},[605,41201,755],{"class":610},[605,41203,41204,41206,41208],{"class":607,"line":773},[605,41205,867],{"class":610},[605,41207,14995],{"class":614},[605,41209,637],{"class":610},[605,41211,41212,41214,41216],{"class":607,"line":799},[605,41213,749],{"class":610},[605,41215,3518],{"class":614},[605,41217,755],{"class":610},[605,41219,41220,41222,41224],{"class":607,"line":599},[605,41221,877],{"class":610},[605,41223,729],{"class":614},[605,41225,637],{"class":610},[605,41227,41228,41230,41232],{"class":607,"line":822},[605,41229,700],{"class":610},[605,41231,718],{"class":614},[605,41233,637],{"class":610},[472,41235,894],{"id":893},[899,41237,41238,41250],{},[902,41239,41240],{},[905,41241,41242,41244,41246,41248],{},[908,41243,3118],{"align":969},[908,41245,10957],{"align":969},[908,41247,913],{"align":969},[908,41249,916],{"align":969},[918,41251,41252,41270,41287,41304,41321,41338,41358,41376,41394,41412],{},[905,41253,41254,41258,41262,41265],{},[923,41255,41256],{"align":969},[1673,41257,2500],{},[923,41259,41260],{"align":969},[586,41261,2515],{},[923,41263,41264],{"align":969},"The color of the smoke.",[923,41266,41267],{"align":969},[586,41268,41269],{},"'#ffffff'",[905,41271,41272,41276,41280,41283],{},[923,41273,41274],{"align":969},[1673,41275,4861],{},[923,41277,41278],{"align":969},[586,41279,2537],{},[923,41281,41282],{"align":969},"The strength of the opacity.",[923,41284,41285],{"align":969},[586,41286,1513],{},[905,41288,41289,41293,41297,41300],{},[923,41290,41291],{"align":969},[1673,41292,3483],{},[923,41294,41295],{"align":969},[586,41296,2537],{},[923,41298,41299],{"align":969},"The rotation speed of the smoke.",[923,41301,41302],{"align":969},[586,41303,32216],{},[905,41305,41306,41310,41314,41317],{},[923,41307,41308],{"align":969},[1673,41309,6358],{},[923,41311,41312],{"align":969},[586,41313,2537],{},[923,41315,41316],{"align":969},"The base depth.",[923,41318,41319],{"align":969},[586,41320,32203],{},[905,41322,41323,41327,41331,41334],{},[923,41324,41325],{"align":969},[1673,41326,23357],{},[923,41328,41329],{"align":969},[586,41330,2537],{},[923,41332,41333],{"align":969},"The number of smoke to render.",[923,41335,41336],{"align":969},[586,41337,1478],{},[905,41339,41340,41344,41348,41351],{},[923,41341,41342],{"align":969},[1673,41343,13433],{},[923,41345,41346],{"align":969},[586,41347,11094],{},[923,41349,41350],{"align":969},"The texture of the smoke.",[923,41352,41353],{"align":969},[1112,41354,41357],{"href":41355,"rel":41356},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/clouds/defaultCloud.png",[1116],"link",[905,41359,41360,41365,41369,41372],{},[923,41361,41362],{"align":969},[1673,41363,41364],{},"depthTest",[923,41366,41367],{"align":969},[586,41368,11014],{},[923,41370,41371],{"align":969},"The depthTest.",[923,41373,41374],{"align":969},[586,41375,943],{},[905,41377,41378,41383,41387,41390],{},[923,41379,41380],{"align":969},[1673,41381,41382],{},"spreadY",[923,41384,41385],{"align":969},[586,41386,2537],{},[923,41388,41389],{"align":969},"Spread on the Y axis.",[923,41391,41392],{"align":969},[586,41393,2203],{},[905,41395,41396,41401,41405,41408],{},[923,41397,41398],{"align":969},[1673,41399,41400],{},"spreadX",[923,41402,41403],{"align":969},[586,41404,2537],{},[923,41406,41407],{"align":969},"Spread on the X axis.",[923,41409,41410],{"align":969},[586,41411,1513],{},[905,41413,41414,41418,41422,41424],{},[923,41415,41416],{"align":969},[1673,41417,784],{},[923,41419,41420],{"align":969},[586,41421,2537],{},[923,41423,784],{"align":969},[923,41425,41426],{"align":969},[586,41427,1893],{},[7473,41429,41431],{"id":41430},"default-texture","Default texture",[582,41433,41434],{},[3267,41435],{"alt":41431,"src":41355},[1299,41437,1648],{},{"title":544,"searchDepth":545,"depth":546,"links":41439},[41440,41441],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894,"children":41442},[41443],{"id":41430,"depth":676,"text":41431},"Beautiful smoke, cloud, and fog effect using textures and transparency.",{},{"title":375,"description":41444},"vwnSNX06jUUY3lZUYaNYvnoK84rsl-FxeFCuDKNEtR0",{"id":41449,"title":379,"body":41450,"description":43351,"extension":559,"links":560,"meta":43352,"navigation":562,"path":380,"seo":43353,"stem":381,"__hash__":43354},"docs/2.api/8.staging/sparkles.md",{"type":469,"value":41451,"toc":43342},[41452,41458,41460,41464,41645,41649,41652,41944,41948,41966,41993,41999,42016,42317,42321,42337,42366,42373,42700,42702,43339],[582,41453,41454,41457],{},[586,41455,41456],{},"\u003CSparkles />"," makes sparkles on your geometry's vertices – optionally guided by a directional light.",[472,41459,15],{"id":592},[7473,41461,41463],{"id":41462},"basic","Basic",[594,41465,41468],{"className":596,"code":41466,"highlights":41467,"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,41469,41470,41490,41508,41528,41536,41540,41548,41556,41588,41596,41604,41613,41621,41629,41637],{"__ignoreMap":544},[605,41471,41472,41474,41476,41478,41480,41482,41484,41486,41488],{"class":607,"line":545},[605,41473,611],{"class":610},[605,41475,615],{"class":614},[605,41477,619],{"class":618},[605,41479,622],{"class":618},[605,41481,625],{"class":610},[605,41483,628],{"class":610},[605,41485,632],{"class":631},[605,41487,628],{"class":610},[605,41489,637],{"class":610},[605,41491,41492,41494,41496,41498,41500,41502,41504,41506],{"class":607,"line":546},[605,41493,645],{"class":644},[605,41495,648],{"class":610},[605,41497,683],{"class":651},[605,41499,661],{"class":610},[605,41501,664],{"class":644},[605,41503,667],{"class":610},[605,41505,692],{"class":631},[605,41507,673],{"class":610},[605,41509,41511,41513,41515,41518,41520,41522,41524,41526],{"class":41510,"line":676},[607,641],[605,41512,645],{"class":644},[605,41514,648],{"class":610},[605,41516,41517],{"class":651}," Sparkles",[605,41519,661],{"class":610},[605,41521,664],{"class":644},[605,41523,667],{"class":610},[605,41525,670],{"class":631},[605,41527,673],{"class":610},[605,41529,41530,41532,41534],{"class":607,"line":697},[605,41531,700],{"class":610},[605,41533,615],{"class":614},[605,41535,637],{"class":610},[605,41537,41538],{"class":607,"line":707},[605,41539,710],{"emptyLinePlaceholder":562},[605,41541,41542,41544,41546],{"class":607,"line":713},[605,41543,611],{"class":610},[605,41545,718],{"class":614},[605,41547,637],{"class":610},[605,41549,41550,41552,41554],{"class":607,"line":723},[605,41551,726],{"class":610},[605,41553,729],{"class":614},[605,41555,637],{"class":610},[605,41557,41558,41560,41562,41564,41566,41568,41570,41572,41574,41576,41578,41580,41582,41584,41586],{"class":607,"line":746},[605,41559,749],{"class":610},[605,41561,752],{"class":614},[605,41563,781],{"class":610},[605,41565,1459],{"class":618},[605,41567,625],{"class":610},[605,41569,628],{"class":610},[605,41571,1466],{"class":610},[605,41573,937],{"class":791},[605,41575,1471],{"class":610},[605,41577,4160],{"class":791},[605,41579,1471],{"class":610},[605,41581,2396],{"class":791},[605,41583,1481],{"class":610},[605,41585,628],{"class":610},[605,41587,755],{"class":610},[605,41589,41590,41592,41594],{"class":607,"line":758},[605,41591,749],{"class":610},[605,41593,828],{"class":614},[605,41595,637],{"class":610},[605,41597,41598,41600,41602],{"class":607,"line":768},[605,41599,825],{"class":610},[605,41601,4735],{"class":614},[605,41603,755],{"class":610},[605,41605,41607,41609,41611],{"class":41606,"line":773},[607,641],[605,41608,825],{"class":610},[605,41610,379],{"class":614},[605,41612,755],{"class":610},[605,41614,41615,41617,41619],{"class":607,"line":799},[605,41616,867],{"class":610},[605,41618,828],{"class":614},[605,41620,637],{"class":610},[605,41622,41623,41625,41627],{"class":607,"line":599},[605,41624,749],{"class":610},[605,41626,3518],{"class":614},[605,41628,755],{"class":610},[605,41630,41631,41633,41635],{"class":607,"line":822},[605,41632,877],{"class":610},[605,41634,729],{"class":614},[605,41636,637],{"class":610},[605,41638,41639,41641,41643],{"class":607,"line":833},[605,41640,700],{"class":610},[605,41642,718],{"class":614},[605,41644,637],{"class":610},[7473,41646,41648],{"id":41647},"with-tresdirectionallight","With TresDirectionalLight",[582,41650,41651],{},"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,41653,41656],{"className":596,"code":41654,"highlights":41655,"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,41657,41658,41678,41696,41714,41732,41736,41750,41758,41762,41770,41778,41810,41818,41826,41849,41857,41863,41876,41902,41916,41920,41928,41936],{"__ignoreMap":544},[605,41659,41660,41662,41664,41666,41668,41670,41672,41674,41676],{"class":607,"line":545},[605,41661,611],{"class":610},[605,41663,615],{"class":614},[605,41665,619],{"class":618},[605,41667,622],{"class":618},[605,41669,625],{"class":610},[605,41671,628],{"class":610},[605,41673,632],{"class":631},[605,41675,628],{"class":610},[605,41677,637],{"class":610},[605,41679,41680,41682,41684,41686,41688,41690,41692,41694],{"class":607,"line":546},[605,41681,645],{"class":644},[605,41683,648],{"class":610},[605,41685,683],{"class":651},[605,41687,661],{"class":610},[605,41689,664],{"class":644},[605,41691,667],{"class":610},[605,41693,692],{"class":631},[605,41695,673],{"class":610},[605,41697,41698,41700,41702,41704,41706,41708,41710,41712],{"class":607,"line":676},[605,41699,645],{"class":644},[605,41701,648],{"class":610},[605,41703,41517],{"class":651},[605,41705,661],{"class":610},[605,41707,664],{"class":644},[605,41709,667],{"class":610},[605,41711,670],{"class":631},[605,41713,673],{"class":610},[605,41715,41716,41718,41720,41722,41724,41726,41728,41730],{"class":607,"line":697},[605,41717,645],{"class":644},[605,41719,648],{"class":610},[605,41721,9716],{"class":651},[605,41723,661],{"class":610},[605,41725,664],{"class":644},[605,41727,667],{"class":610},[605,41729,601],{"class":631},[605,41731,673],{"class":610},[605,41733,41734],{"class":607,"line":707},[605,41735,710],{"emptyLinePlaceholder":562},[605,41737,41739,41741,41744,41746,41748],{"class":41738,"line":713},[607,641],[605,41740,2689],{"class":618},[605,41742,41743],{"class":651}," directionalLightRef ",[605,41745,625],{"class":610},[605,41747,9716],{"class":2800},[605,41749,2846],{"class":651},[605,41751,41752,41754,41756],{"class":607,"line":723},[605,41753,700],{"class":610},[605,41755,615],{"class":614},[605,41757,637],{"class":610},[605,41759,41760],{"class":607,"line":746},[605,41761,710],{"emptyLinePlaceholder":562},[605,41763,41764,41766,41768],{"class":607,"line":758},[605,41765,611],{"class":610},[605,41767,718],{"class":614},[605,41769,637],{"class":610},[605,41771,41772,41774,41776],{"class":607,"line":768},[605,41773,726],{"class":610},[605,41775,729],{"class":614},[605,41777,637],{"class":610},[605,41779,41780,41782,41784,41786,41788,41790,41792,41794,41796,41798,41800,41802,41804,41806,41808],{"class":607,"line":773},[605,41781,749],{"class":610},[605,41783,752],{"class":614},[605,41785,781],{"class":610},[605,41787,1459],{"class":618},[605,41789,625],{"class":610},[605,41791,628],{"class":610},[605,41793,1466],{"class":610},[605,41795,937],{"class":791},[605,41797,1471],{"class":610},[605,41799,4160],{"class":791},[605,41801,1471],{"class":610},[605,41803,2396],{"class":791},[605,41805,1481],{"class":610},[605,41807,628],{"class":610},[605,41809,755],{"class":610},[605,41811,41812,41814,41816],{"class":607,"line":799},[605,41813,749],{"class":610},[605,41815,828],{"class":614},[605,41817,637],{"class":610},[605,41819,41820,41822,41824],{"class":607,"line":599},[605,41821,825],{"class":610},[605,41823,4735],{"class":614},[605,41825,755],{"class":610},[605,41827,41829,41831,41833,41835,41838,41840,41842,41845,41847],{"class":41828,"line":822},[607,641],[605,41830,825],{"class":610},[605,41832,379],{"class":614},[605,41834,781],{"class":610},[605,41836,41837],{"class":618},"directional-light",[605,41839,625],{"class":610},[605,41841,628],{"class":610},[605,41843,41844],{"class":651},"directionalLightRef",[605,41846,628],{"class":610},[605,41848,755],{"class":610},[605,41850,41851,41853,41855],{"class":607,"line":833},[605,41852,867],{"class":610},[605,41854,828],{"class":614},[605,41856,637],{"class":610},[605,41858,41859,41861],{"class":607,"line":844},[605,41860,749],{"class":610},[605,41862,10771],{"class":614},[605,41864,41866,41868,41870,41872,41874],{"class":41865,"line":854},[607,641],[605,41867,5679],{"class":618},[605,41869,625],{"class":610},[605,41871,628],{"class":610},[605,41873,41844],{"class":631},[605,41875,2987],{"class":610},[605,41877,41878,41880,41882,41884,41886,41888,41890,41892,41894,41896,41898,41900],{"class":607,"line":600},[605,41879,5693],{"class":610},[605,41881,1459],{"class":618},[605,41883,625],{"class":610},[605,41885,628],{"class":610},[605,41887,1466],{"class":610},[605,41889,4160],{"class":791},[605,41891,1471],{"class":610},[605,41893,4160],{"class":791},[605,41895,1471],{"class":610},[605,41897,4160],{"class":791},[605,41899,1481],{"class":610},[605,41901,2987],{"class":610},[605,41903,41904,41906,41908,41910,41912,41914],{"class":607,"line":874},[605,41905,5693],{"class":610},[605,41907,1886],{"class":618},[605,41909,625],{"class":610},[605,41911,628],{"class":610},[605,41913,792],{"class":791},[605,41915,2987],{"class":610},[605,41917,41918],{"class":607,"line":884},[605,41919,10816],{"class":610},[605,41921,41922,41924,41926],{"class":607,"line":2952},[605,41923,749],{"class":610},[605,41925,3518],{"class":614},[605,41927,755],{"class":610},[605,41929,41930,41932,41934],{"class":607,"line":2960},[605,41931,877],{"class":610},[605,41933,729],{"class":614},[605,41935,637],{"class":610},[605,41937,41938,41940,41942],{"class":607,"line":2990},[605,41939,700],{"class":610},[605,41941,718],{"class":614},[605,41943,637],{"class":610},[7473,41945,41947],{"id":41946},"sequences","Sequences",[582,41949,41950,41951,41954,41955,3198,41959,41961,41962,41965],{},"All props beginning with ",[586,41952,41953],{},":sequence-"," are used to define how a particle changes as it progresses ",[1112,41956,41958],{"href":41957},"#mixes","(See also: Mixes)",[586,41960,41953],{}," props are of the type ",[586,41963,41964],{},"Gradient\u003CT>",", which can be any one of:",[3136,41967,41968,41974,41980],{},[3139,41969,41970,41973],{},[586,41971,41972],{},"T",": a single value",[3139,41975,41976,41979],{},[586,41977,41978],{},"[T, T, T, ...]",": an evenly distributed series of values",[3139,41981,41982,41985,41986,41988,41989,16781,41991,1118],{},[586,41983,41984],{},"[[number, T], [number, T], ...]",": an unevently distributed series of values, where ",[586,41987,2537],{}," is a gradient \"stop\" from ",[586,41990,937],{},[586,41992,1893],{},[582,41994,41995,41996,1190],{},"For example, all of these are acceptable values for ",[586,41997,41998],{},"Gradient\u003CTresColor>",[3136,42000,42001,42006,42011],{},[3139,42002,42003],{},[586,42004,42005],{},"'red'",[3139,42007,42008],{},[586,42009,42010],{},"['red', 'blue', 'green']",[3139,42012,42013],{},[586,42014,42015],{},"[[0.1, 'red'], [0.25, 'blue'], [0.5, 'green']]",[594,42017,42020],{"className":596,"code":42018,"highlights":42019,"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,42021,42022,42042,42060,42078,42086,42090,42098,42106,42138,42146,42154,42162,42204,42253,42281,42285,42293,42301,42309],{"__ignoreMap":544},[605,42023,42024,42026,42028,42030,42032,42034,42036,42038,42040],{"class":607,"line":545},[605,42025,611],{"class":610},[605,42027,615],{"class":614},[605,42029,619],{"class":618},[605,42031,622],{"class":618},[605,42033,625],{"class":610},[605,42035,628],{"class":610},[605,42037,632],{"class":631},[605,42039,628],{"class":610},[605,42041,637],{"class":610},[605,42043,42044,42046,42048,42050,42052,42054,42056,42058],{"class":607,"line":546},[605,42045,645],{"class":644},[605,42047,648],{"class":610},[605,42049,683],{"class":651},[605,42051,661],{"class":610},[605,42053,664],{"class":644},[605,42055,667],{"class":610},[605,42057,692],{"class":631},[605,42059,673],{"class":610},[605,42061,42062,42064,42066,42068,42070,42072,42074,42076],{"class":607,"line":676},[605,42063,645],{"class":644},[605,42065,648],{"class":610},[605,42067,41517],{"class":651},[605,42069,661],{"class":610},[605,42071,664],{"class":644},[605,42073,667],{"class":610},[605,42075,670],{"class":631},[605,42077,673],{"class":610},[605,42079,42080,42082,42084],{"class":607,"line":697},[605,42081,700],{"class":610},[605,42083,615],{"class":614},[605,42085,637],{"class":610},[605,42087,42088],{"class":607,"line":707},[605,42089,710],{"emptyLinePlaceholder":562},[605,42091,42092,42094,42096],{"class":607,"line":713},[605,42093,611],{"class":610},[605,42095,718],{"class":614},[605,42097,637],{"class":610},[605,42099,42100,42102,42104],{"class":607,"line":723},[605,42101,726],{"class":610},[605,42103,729],{"class":614},[605,42105,637],{"class":610},[605,42107,42108,42110,42112,42114,42116,42118,42120,42122,42124,42126,42128,42130,42132,42134,42136],{"class":607,"line":746},[605,42109,749],{"class":610},[605,42111,752],{"class":614},[605,42113,781],{"class":610},[605,42115,1459],{"class":618},[605,42117,625],{"class":610},[605,42119,628],{"class":610},[605,42121,1466],{"class":610},[605,42123,937],{"class":791},[605,42125,1471],{"class":610},[605,42127,4160],{"class":791},[605,42129,1471],{"class":610},[605,42131,2396],{"class":791},[605,42133,1481],{"class":610},[605,42135,628],{"class":610},[605,42137,755],{"class":610},[605,42139,42140,42142,42144],{"class":607,"line":758},[605,42141,749],{"class":610},[605,42143,828],{"class":614},[605,42145,637],{"class":610},[605,42147,42148,42150,42152],{"class":607,"line":768},[605,42149,825],{"class":610},[605,42151,4735],{"class":614},[605,42153,755],{"class":610},[605,42155,42157,42159],{"class":42156,"line":773},[607,641],[605,42158,825],{"class":610},[605,42160,42161],{"class":614},"Sparkles\n",[605,42163,42165,42167,42170,42172,42174,42176,42178,42180,42182,42184,42186,42189,42191,42193,42195,42198,42200,42202],{"class":42164,"line":799},[607,641],[605,42166,2993],{"class":610},[605,42168,42169],{"class":618},"sequence-color",[605,42171,625],{"class":610},[605,42173,628],{"class":610},[605,42175,1466],{"class":610},[605,42177,5536],{"class":610},[605,42179,29784],{"class":631},[605,42181,5536],{"class":610},[605,42183,1471],{"class":610},[605,42185,5536],{"class":610},[605,42187,42188],{"class":631},"blue",[605,42190,5536],{"class":610},[605,42192,1471],{"class":610},[605,42194,5536],{"class":610},[605,42196,42197],{"class":631},"green",[605,42199,5536],{"class":610},[605,42201,1481],{"class":610},[605,42203,2987],{"class":610},[605,42205,42207,42209,42212,42214,42216,42218,42220,42222,42224,42226,42229,42231,42233,42235,42237,42239,42241,42243,42245,42247,42249,42251],{"class":42206,"line":599},[607,641],[605,42208,2993],{"class":610},[605,42210,42211],{"class":618},"sequence-alpha",[605,42213,625],{"class":610},[605,42215,628],{"class":610},[605,42217,25812],{"class":610},[605,42219,7207],{"class":791},[605,42221,1471],{"class":610},[605,42223,7207],{"class":791},[605,42225,25825],{"class":610},[605,42227,42228],{"class":791},"0.10",[605,42230,1471],{"class":610},[605,42232,7085],{"class":791},[605,42234,25825],{"class":610},[605,42236,1513],{"class":791},[605,42238,1471],{"class":610},[605,42240,7085],{"class":791},[605,42242,25825],{"class":610},[605,42244,28016],{"class":791},[605,42246,1471],{"class":610},[605,42248,7207],{"class":791},[605,42250,25862],{"class":610},[605,42252,2987],{"class":610},[605,42254,42256,42258,42261,42263,42265,42267,42269,42271,42273,42275,42277,42279],{"class":42255,"line":822},[607,641],[605,42257,2993],{"class":610},[605,42259,42260],{"class":618},"sequence-size",[605,42262,625],{"class":610},[605,42264,628],{"class":610},[605,42266,1466],{"class":610},[605,42268,7207],{"class":791},[605,42270,1471],{"class":610},[605,42272,7085],{"class":791},[605,42274,1471],{"class":610},[605,42276,1513],{"class":791},[605,42278,1481],{"class":610},[605,42280,2987],{"class":610},[605,42282,42283],{"class":607,"line":833},[605,42284,3050],{"class":610},[605,42286,42287,42289,42291],{"class":607,"line":844},[605,42288,867],{"class":610},[605,42290,828],{"class":614},[605,42292,637],{"class":610},[605,42294,42295,42297,42299],{"class":607,"line":854},[605,42296,749],{"class":610},[605,42298,3518],{"class":614},[605,42300,755],{"class":610},[605,42302,42303,42305,42307],{"class":607,"line":600},[605,42304,877],{"class":610},[605,42306,729],{"class":614},[605,42308,637],{"class":610},[605,42310,42311,42313,42315],{"class":607,"line":874},[605,42312,700],{"class":610},[605,42314,718],{"class":614},[605,42316,637],{"class":610},[7473,42318,42320],{"id":42319},"mixes","Mixes",[582,42322,41950,42323,42326,42327,42329,42330,42333,42334,1118],{},[586,42324,42325],{},":mix-"," allow you to specify how a particle \"progresses\" through a corresponding ",[586,42328,41953],{}," prop. E.g., ",[586,42331,42332],{},":mix-alpha"," affects ",[586,42335,42336],{},":sequence-alpha",[3136,42338,42339,42357],{},[3139,42340,42341,42342,42344,42345,42347,42348,42350,42351],{},"If the ",[586,42343,42325],{}," prop is ",[586,42346,7207],{},", 'progress' through the ",[586,42349,41953],{}," is determined entirely by the light shining on the surface of the sparkling mesh.",[1112,42352,42354],{"href":42353},"#precisely",[42355,42356,1893],"sup",{},[3139,42358,42341,42359,42344,42361,42347,42363,42365],{},[586,42360,42325],{},[586,42362,7085],{},[586,42364,41953],{}," is determined entirely by the particle's lifetime.",[582,42367,42368,42369,42372],{},"More precisely, the value is determined by the dot product of the ",[586,42370,42371],{},"directionalLight","'s inverted normalized position and each of the sparkling mesh's vertex normals.",[594,42374,42377],{"className":596,"code":42375,"highlights":42376,"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,42378,42379,42399,42417,42436,42454,42458,42470,42478,42482,42490,42498,42530,42538,42546,42553,42568,42584,42600,42616,42620,42628,42634,42646,42672,42676,42684,42692],{"__ignoreMap":544},[605,42380,42381,42383,42385,42387,42389,42391,42393,42395,42397],{"class":607,"line":545},[605,42382,611],{"class":610},[605,42384,615],{"class":614},[605,42386,619],{"class":618},[605,42388,622],{"class":618},[605,42390,625],{"class":610},[605,42392,628],{"class":610},[605,42394,632],{"class":631},[605,42396,628],{"class":610},[605,42398,637],{"class":610},[605,42400,42401,42403,42405,42407,42409,42411,42413,42415],{"class":607,"line":546},[605,42402,645],{"class":644},[605,42404,648],{"class":610},[605,42406,683],{"class":651},[605,42408,661],{"class":610},[605,42410,664],{"class":644},[605,42412,667],{"class":610},[605,42414,692],{"class":631},[605,42416,673],{"class":610},[605,42418,42420,42422,42424,42426,42428,42430,42432,42434],{"class":42419,"line":676},[607,641],[605,42421,645],{"class":644},[605,42423,648],{"class":610},[605,42425,41517],{"class":651},[605,42427,661],{"class":610},[605,42429,664],{"class":644},[605,42431,667],{"class":610},[605,42433,670],{"class":631},[605,42435,673],{"class":610},[605,42437,42438,42440,42442,42444,42446,42448,42450,42452],{"class":607,"line":697},[605,42439,645],{"class":644},[605,42441,648],{"class":610},[605,42443,9716],{"class":651},[605,42445,661],{"class":610},[605,42447,664],{"class":644},[605,42449,667],{"class":610},[605,42451,601],{"class":631},[605,42453,673],{"class":610},[605,42455,42456],{"class":607,"line":707},[605,42457,710],{"emptyLinePlaceholder":562},[605,42459,42460,42462,42464,42466,42468],{"class":607,"line":713},[605,42461,2689],{"class":618},[605,42463,41743],{"class":651},[605,42465,625],{"class":610},[605,42467,9716],{"class":2800},[605,42469,2846],{"class":651},[605,42471,42472,42474,42476],{"class":607,"line":723},[605,42473,700],{"class":610},[605,42475,615],{"class":614},[605,42477,637],{"class":610},[605,42479,42480],{"class":607,"line":746},[605,42481,710],{"emptyLinePlaceholder":562},[605,42483,42484,42486,42488],{"class":607,"line":758},[605,42485,611],{"class":610},[605,42487,718],{"class":614},[605,42489,637],{"class":610},[605,42491,42492,42494,42496],{"class":607,"line":768},[605,42493,726],{"class":610},[605,42495,729],{"class":614},[605,42497,637],{"class":610},[605,42499,42500,42502,42504,42506,42508,42510,42512,42514,42516,42518,42520,42522,42524,42526,42528],{"class":607,"line":773},[605,42501,749],{"class":610},[605,42503,752],{"class":614},[605,42505,781],{"class":610},[605,42507,1459],{"class":618},[605,42509,625],{"class":610},[605,42511,628],{"class":610},[605,42513,1466],{"class":610},[605,42515,937],{"class":791},[605,42517,1471],{"class":610},[605,42519,4160],{"class":791},[605,42521,1471],{"class":610},[605,42523,2396],{"class":791},[605,42525,1481],{"class":610},[605,42527,628],{"class":610},[605,42529,755],{"class":610},[605,42531,42532,42534,42536],{"class":607,"line":799},[605,42533,749],{"class":610},[605,42535,828],{"class":614},[605,42537,637],{"class":610},[605,42539,42540,42542,42544],{"class":607,"line":599},[605,42541,825],{"class":610},[605,42543,4735],{"class":614},[605,42545,755],{"class":610},[605,42547,42549,42551],{"class":42548,"line":822},[607,641],[605,42550,825],{"class":610},[605,42552,42161],{"class":614},[605,42554,42556,42558,42560,42562,42564,42566],{"class":42555,"line":833},[607,641],[605,42557,2993],{"class":610},[605,42559,41837],{"class":618},[605,42561,625],{"class":610},[605,42563,628],{"class":610},[605,42565,41844],{"class":651},[605,42567,2987],{"class":610},[605,42569,42571,42573,42576,42578,42580,42582],{"class":42570,"line":844},[607,641],[605,42572,2993],{"class":610},[605,42574,42575],{"class":618},"mix-color",[605,42577,625],{"class":610},[605,42579,628],{"class":610},[605,42581,18051],{"class":791},[605,42583,2987],{"class":610},[605,42585,42587,42589,42592,42594,42596,42598],{"class":42586,"line":854},[607,641],[605,42588,2993],{"class":610},[605,42590,42591],{"class":618},"mix-alpha",[605,42593,625],{"class":610},[605,42595,628],{"class":610},[605,42597,1513],{"class":791},[605,42599,2987],{"class":610},[605,42601,42603,42605,42608,42610,42612,42614],{"class":42602,"line":600},[607,641],[605,42604,2993],{"class":610},[605,42606,42607],{"class":618},"mix-size",[605,42609,625],{"class":610},[605,42611,628],{"class":610},[605,42613,8085],{"class":791},[605,42615,2987],{"class":610},[605,42617,42618],{"class":607,"line":874},[605,42619,3050],{"class":610},[605,42621,42622,42624,42626],{"class":607,"line":884},[605,42623,867],{"class":610},[605,42625,828],{"class":614},[605,42627,637],{"class":610},[605,42629,42630,42632],{"class":607,"line":2952},[605,42631,749],{"class":610},[605,42633,10771],{"class":614},[605,42635,42636,42638,42640,42642,42644],{"class":607,"line":2960},[605,42637,5679],{"class":618},[605,42639,625],{"class":610},[605,42641,628],{"class":610},[605,42643,41844],{"class":631},[605,42645,2987],{"class":610},[605,42647,42648,42650,42652,42654,42656,42658,42660,42662,42664,42666,42668,42670],{"class":607,"line":2990},[605,42649,5693],{"class":610},[605,42651,1459],{"class":618},[605,42653,625],{"class":610},[605,42655,628],{"class":610},[605,42657,1466],{"class":610},[605,42659,4160],{"class":791},[605,42661,1471],{"class":610},[605,42663,4160],{"class":791},[605,42665,1471],{"class":610},[605,42667,4160],{"class":791},[605,42669,1481],{"class":610},[605,42671,2987],{"class":610},[605,42673,42674],{"class":607,"line":3007},[605,42675,10816],{"class":610},[605,42677,42678,42680,42682],{"class":607,"line":3022},[605,42679,749],{"class":610},[605,42681,3518],{"class":614},[605,42683,755],{"class":610},[605,42685,42686,42688,42690],{"class":607,"line":3047},[605,42687,877],{"class":610},[605,42689,729],{"class":614},[605,42691,637],{"class":610},[605,42693,42694,42696,42698],{"class":607,"line":2591},[605,42695,700],{"class":610},[605,42697,718],{"class":614},[605,42699,637],{"class":610},[472,42701,894],{"id":893},[899,42703,42704,42712],{},[902,42705,42706],{},[905,42707,42708,42710],{},[908,42709,3118],{"align":969},[908,42711,913],{"align":969},[918,42713,42714,42736,42769,42791,42811,42831,42851,42872,42892,42912,42932,42951,42970,42989,43009,43036,43058,43080,43101,43122,43143,43177,43198,43218,43239,43259,43279,43301,43320],{},[905,42715,42716,42720],{},[923,42717,42718],{"align":969},[1673,42719,13426],{},[923,42721,42722,42723,42725,42727,42728,42731,42733,42735],{"align":969},"Type: ",[586,42724,34383],{},[2508,42726],{},"Default: ",[586,42729,42730],{},"'https://raw.githubusercontent.com/Tresjs/asset...'",[2508,42732],{},[2508,42734],{},"Texture or image path for individual sparkles",[905,42737,42738,42742],{},[923,42739,42740],{"align":969},[1673,42741,15748],{},[923,42743,42722,42744,42747,42727,42749,42751,42753,42755,42756,42758],{"align":969},[586,42745,42746],{},"Object3D | BufferGeometry",[2508,42748],{},[586,42750,1151],{},[2508,42752],{},[2508,42754],{},"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,42757],{},[3136,42759,42760,42763,42766],{},[3139,42761,42762],{},"If provided, the component will use the passed geometry.",[3139,42764,42765],{},"If no geometry is provided, the component will try to make a copy of the parent object's geometry.",[3139,42767,42768],{},"If no parent geometry exists, the component will create and use an IcosphereGeometry.",[905,42770,42771,42775],{},[923,42772,42773],{"align":969},[1673,42774,42371],{},[923,42776,42722,42777,42779,42727,42781,42783,42785,42787,42788,42790],{"align":969},[586,42778,2578],{},[2508,42780],{},[586,42782,1151],{},[2508,42784],{},[2508,42786],{},"Particles \"light up\" when their normal \"faces\" the light. If no ",[586,42789,42371],{}," is provided, the default \"up\" vector will be used.",[905,42792,42793,42798],{},[923,42794,42795],{"align":969},[1673,42796,42797],{},"lifetimeSec",[923,42799,42722,42800,42802,42727,42804,42806,42808,42810],{"align":969},[586,42801,2537],{},[2508,42803],{},[586,42805,32216],{},[2508,42807],{},[2508,42809],{},"Particle lifetime in seconds",[905,42812,42813,42818],{},[923,42814,42815],{"align":969},[1673,42816,42817],{},"cooldownSec",[923,42819,42722,42820,42822,42727,42824,42826,42828,42830],{"align":969},[586,42821,2537],{},[2508,42823],{},[586,42825,7144],{},[2508,42827],{},[2508,42829],{},"Particle cooldown in seconds – time between lifetime end and respawn",[905,42832,42833,42838],{},[923,42834,42835],{"align":969},[1673,42836,42837],{},"normalThreshold",[923,42839,42722,42840,42842,42727,42844,42846,42848,42850],{"align":969},[586,42841,2537],{},[2508,42843],{},[586,42845,33784],{},[2508,42847],{},[2508,42849],{},"Number from 0-1 indicating how closely the particle needs to be faced towards the light to \"light up\". (Lower == more flexible)",[905,42852,42853,42858],{},[923,42854,42855],{"align":969},[1673,42856,42857],{},"noiseScale",[923,42859,42722,42860,42862,42727,42864,42867,42869,42871],{"align":969},[586,42861,2537],{},[2508,42863],{},[586,42865,42866],{},"3.0",[2508,42868],{},[2508,42870],{},"Scale of the noise period (lower == more slowly cycling noise)",[905,42873,42874,42879],{},[923,42875,42876],{"align":969},[1673,42877,42878],{},"scaleNoise",[923,42880,42722,42881,42883,42727,42885,42887,42889,42891],{"align":969},[586,42882,2537],{},[2508,42884],{},[586,42886,7085],{},[2508,42888],{},[2508,42890],{},"Noise coefficient applied to particle scale",[905,42893,42894,42899],{},[923,42895,42896],{"align":969},[1673,42897,42898],{},"offsetNoise",[923,42900,42722,42901,42903,42727,42905,42907,42909,42911],{"align":969},[586,42902,2537],{},[2508,42904],{},[586,42906,2203],{},[2508,42908],{},[2508,42910],{},"Noise coefficient applied to particle offset",[905,42913,42914,42919],{},[923,42915,42916],{"align":969},[1673,42917,42918],{},"lifetimeNoise",[923,42920,42722,42921,42923,42727,42925,42927,42929,42931],{"align":969},[586,42922,2537],{},[2508,42924],{},[586,42926,7207],{},[2508,42928],{},[2508,42930],{},"Noise coefficient applied to particle lifetime",[905,42933,42934,42938],{},[923,42935,42936],{"align":969},[1673,42937,10233],{},[923,42939,42722,42940,42942,42727,42944,42946,42948,42950],{"align":969},[586,42941,2537],{},[2508,42943],{},[586,42945,7085],{},[2508,42947],{},[2508,42949],{},"Particle scale multiplier",[905,42952,42953,42957],{},[923,42954,42955],{"align":969},[1673,42956,39543],{},[923,42958,42722,42959,42961,42727,42963,42965,42967,42969],{"align":969},[586,42960,2537],{},[2508,42962],{},[586,42964,7085],{},[2508,42966],{},[2508,42968],{},"Opacity multiplier",[905,42971,42972,42976],{},[923,42973,42974],{"align":969},[1673,42975,33561],{},[923,42977,42722,42978,42980,42727,42982,42984,42986,42988],{"align":969},[586,42979,2537],{},[2508,42981],{},[586,42983,7085],{},[2508,42985],{},[2508,42987],{},"Offset multiplier",[905,42990,42991,42996],{},[923,42992,42993],{"align":969},[1673,42994,42995],{},"surfaceDistance",[923,42997,42722,42998,43000,42727,43002,43004,43006,43008],{"align":969},[586,42999,2537],{},[2508,43001],{},[586,43003,7085],{},[2508,43005],{},[2508,43007],{},"Surface distance multiplier",[905,43010,43011,43016],{},[923,43012,43013],{"align":969},[1673,43014,43015],{},"sequenceColor",[923,43017,42722,43018,43020,42727,43022,43025,43027,5536,43029,43032,43033,43035],{"align":969},[586,43019,41998],{},[2508,43021],{},[586,43023,43024],{},"[[0.7, '#82dbc5'], [0.8, '#fbb03b']]",[2508,43026],{},[2508,43028],{},[1677,43030,43031],{},"Sequence' props: specify how a particle changes as it \"progresses\". See also \"mix","\" props.",[2508,43034],{},"Color sequence as particles progress",[905,43037,43038,43043],{},[923,43039,43040],{"align":969},[1673,43041,43042],{},"sequenceAlpha",[923,43044,42722,43045,43048,42727,43050,43053,43055,43057],{"align":969},[586,43046,43047],{},"Gradient\u003Cnumber>",[2508,43049],{},[586,43051,43052],{},"[[0.0, 0.0], [0.10, 1.0], [0.5, 1.0], [0.9, 0.0]]",[2508,43054],{},[2508,43056],{},"Opacity sequence as particles progress",[905,43059,43060,43065],{},[923,43061,43062],{"align":969},[1673,43063,43064],{},"sequenceOffset",[923,43066,42722,43067,43070,42727,43072,43075,43077,43079],{"align":969},[586,43068,43069],{},"Gradient\u003C[number, number, number]>",[2508,43071],{},[586,43073,43074],{},"[0.0, 0.0, 0.0]",[2508,43076],{},[2508,43078],{},"Distance sequence as particles progress",[905,43081,43082,43087],{},[923,43083,43084],{"align":969},[1673,43085,43086],{},"sequenceNoise",[923,43088,42722,43089,43091,42727,43093,43096,43098,43100],{"align":969},[586,43090,43069],{},[2508,43092],{},[586,43094,43095],{},"[0.1, 0.1, 0.1]",[2508,43097],{},[2508,43099],{},"Noise sequence as particles progress",[905,43102,43103,43108],{},[923,43104,43105],{"align":969},[1673,43106,43107],{},"sequenceSize",[923,43109,42722,43110,43112,42727,43114,43117,43119,43121],{"align":969},[586,43111,43047],{},[2508,43113],{},[586,43115,43116],{},"[0.0, 1.0]",[2508,43118],{},[2508,43120],{},"Size sequence as particles progress",[905,43123,43124,43129],{},[923,43125,43126],{"align":969},[1673,43127,43128],{},"sequenceSurfaceDistance",[923,43130,42722,43131,43133,42727,43135,43138,43140,43142],{"align":969},[586,43132,43047],{},[2508,43134],{},[586,43136,43137],{},"[0.05, 0.08, 0.1]",[2508,43139],{},[2508,43141],{},"Distance from surface (along normal) as particles progress",[905,43144,43145,43150],{},[923,43146,43147],{"align":969},[1673,43148,43149],{},"mixColor",[923,43151,42722,43152,43154,42727,43156,43158,43160,43162,43163,43165,43173,43174,43176],{"align":969},[586,43153,2537],{},[2508,43155],{},[586,43157,1513],{},[2508,43159],{},[2508,43161],{},"'mix*' props: A particle \"progresses\" with a mix of two factors:",[2508,43164],{},[3136,43166,43167,43170],{},[3139,43168,43169],{},"its normal \"facing\" the directionalLight",[3139,43171,43172],{},"its lifetime","'mix*' props specify the relationship between the two factors.",[2508,43175],{},"How is a particle's progress for color calculated? (0: normal, 1: particle lifetime)",[905,43178,43179,43184],{},[923,43180,43181],{"align":969},[1673,43182,43183],{},"mixAlpha",[923,43185,42722,43186,43188,42727,43190,43193,43195,43197],{"align":969},[586,43187,2537],{},[2508,43189],{},[586,43191,43192],{},"1.",[2508,43194],{},[2508,43196],{},"How is a particle's progress for alpha calculated? (0: normal, 1: particle lifetime)",[905,43199,43200,43205],{},[923,43201,43202],{"align":969},[1673,43203,43204],{},"mixOffset",[923,43206,42722,43207,43209,42727,43211,43213,43215,43217],{"align":969},[586,43208,2537],{},[2508,43210],{},[586,43212,43192],{},[2508,43214],{},[2508,43216],{},"How is a particle's progress for offset calculated? (0: normal, 1: particle lifetime)",[905,43219,43220,43225],{},[923,43221,43222],{"align":969},[1673,43223,43224],{},"mixSize",[923,43226,42722,43227,43229,42727,43231,43234,43236,43238],{"align":969},[586,43228,2537],{},[2508,43230],{},[586,43232,43233],{},"0.",[2508,43235],{},[2508,43237],{},"How is a particle's progress for size calculated? (0: normal, 1: particle lifetime)",[905,43240,43241,43246],{},[923,43242,43243],{"align":969},[1673,43244,43245],{},"mixSurfaceDistance",[923,43247,42722,43248,43250,42727,43252,43254,43256,43258],{"align":969},[586,43249,2537],{},[2508,43251],{},[586,43253,43192],{},[2508,43255],{},[2508,43257],{},"How is a particle's progress for surface distance calculated? (0: normal, 1: particle lifetime)",[905,43260,43261,43266],{},[923,43262,43263],{"align":969},[1673,43264,43265],{},"mixNoise",[923,43267,42722,43268,43270,42727,43272,43274,43276,43278],{"align":969},[586,43269,2537],{},[2508,43271],{},[586,43273,43192],{},[2508,43275],{},[2508,43277],{},"How is a particle's progress for lifetime calculated? (0: normal, 1: particle lifetime)",[905,43280,43281,43286],{},[923,43282,43283],{"align":969},[1673,43284,43285],{},"blending",[923,43287,42722,43288,43291,42727,43293,43296,43298,43300],{"align":969},[586,43289,43290],{},"Blending",[2508,43292],{},[586,43294,43295],{},"AdditiveBlending",[2508,43297],{},[2508,43299],{},"Material blending",[905,43302,43303,43307],{},[923,43304,43305],{"align":969},[1673,43306,4873],{},[923,43308,42722,43309,43311,42727,43313,43315,43317,43319],{"align":969},[586,43310,11014],{},[2508,43312],{},[586,43314,933],{},[2508,43316],{},[2508,43318],{},"Material transparency",[905,43321,43322,43326],{},[923,43323,43324],{"align":969},[1673,43325,4334],{},[923,43327,42722,43328,43330,42727,43332,43334,43336,43338],{"align":969},[586,43329,11014],{},[2508,43331],{},[586,43333,943],{},[2508,43335],{},[2508,43337],{},"Material depth write",[1299,43340,43341],{},"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":43343},[43344,43350],{"id":592,"depth":546,"text":15,"children":43345},[43346,43347,43348,43349],{"id":41462,"depth":676,"text":41463},{"id":41647,"depth":676,"text":41648},{"id":41946,"depth":676,"text":41947},{"id":42319,"depth":676,"text":42320},{"id":893,"depth":546,"text":894},"Makes sparkles on geometry vertices, optionally guided by directional light.",{},{"title":379,"description":43351},"sidh_wQDMKRUeYy0-MM8UB_NfCo4ClPtPAjr8qECGps",{"id":43356,"title":383,"body":43357,"description":44044,"extension":559,"links":560,"meta":44045,"navigation":562,"path":384,"seo":44046,"stem":385,"__hash__":44047},"docs/2.api/8.staging/stage.md",{"type":469,"value":43358,"toc":44038},[43359,43364,43367,43381,43400,43450,43452,43821,43823,43934,43938,43941,44023,44035],[2558,43360,43361],{},[43362,43363],"staging-stage",{},[582,43365,43366],{},"This component creates a \"stage\" for your models. It sets up:",[3136,43368,43369,43372,43375,43378],{},[3139,43370,43371],{},"model lighting",[3139,43373,43374],{},"ground shadows",[3139,43376,43377],{},"zoom to fit",[3139,43379,43380],{},"environment",[2046,43382,43383,43386],{},[582,43384,43385],{},"If you are using other camera controls, be sure to make them the 'default'.",[594,43387,43388],{"className":596,"code":2071,"language":601,"meta":544,"style":544},[586,43389,43390],{"__ignoreMap":544},[605,43391,43392,43394,43396,43398],{"class":607,"line":545},[605,43393,611],{"class":610},[605,43395,763],{"class":614},[605,43397,1868],{"class":618},[605,43399,755],{"class":610},[2046,43401,43402,43405,43420],{},[582,43403,43404],{},"If you are using shadows='accumulative', enable shadows on your canvas and on your objects.",[594,43406,43408],{"className":596,"code":43407,"language":601,"meta":544,"style":544},"\u003CTresCanvas shadows />\n",[586,43409,43410],{"__ignoreMap":544},[605,43411,43412,43414,43416,43418],{"class":607,"line":545},[605,43413,611],{"class":610},[605,43415,729],{"class":614},[605,43417,35777],{"class":618},[605,43419,755],{"class":610},[594,43421,43423],{"className":596,"code":43422,"language":601,"meta":544,"style":544},"\u003CTresMesh cast-shadow />\n  ...\n\u003C/TresMesh>\n",[586,43424,43425,43435,43439],{"__ignoreMap":544},[605,43426,43427,43429,43431,43433],{"class":607,"line":545},[605,43428,611],{"class":610},[605,43430,828],{"class":614},[605,43432,9856],{"class":618},[605,43434,755],{"class":610},[605,43436,43437],{"class":607,"line":546},[605,43438,7380],{"class":651},[605,43440,43441,43443,43446,43448],{"class":607,"line":676},[605,43442,611],{"class":610},[605,43444,43445],{"class":651},"/",[605,43447,828],{"class":614},[605,43449,637],{"class":610},[472,43451,15],{"id":592},[594,43453,43456],{"className":596,"code":43454,"highlights":43455,"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,43457,43458,43478,43496,43524,43532,43536,43544,43554,43586,43596,43604,43619,43634,43650,43664,43679,43683,43693,43701,43719,43727,43781,43789,43797,43805,43813],{"__ignoreMap":544},[605,43459,43460,43462,43464,43466,43468,43470,43472,43474,43476],{"class":607,"line":545},[605,43461,611],{"class":610},[605,43463,615],{"class":614},[605,43465,619],{"class":618},[605,43467,622],{"class":618},[605,43469,625],{"class":610},[605,43471,628],{"class":610},[605,43473,632],{"class":631},[605,43475,628],{"class":610},[605,43477,637],{"class":610},[605,43479,43480,43482,43484,43486,43488,43490,43492,43494],{"class":607,"line":546},[605,43481,645],{"class":644},[605,43483,648],{"class":610},[605,43485,683],{"class":651},[605,43487,661],{"class":610},[605,43489,664],{"class":644},[605,43491,667],{"class":610},[605,43493,692],{"class":631},[605,43495,673],{"class":610},[605,43497,43499,43501,43503,43506,43508,43510,43512,43514,43516,43518,43520,43522],{"class":43498,"line":676},[607,641],[605,43500,645],{"class":644},[605,43502,648],{"class":610},[605,43504,43505],{"class":651}," Stage",[605,43507,655],{"class":610},[605,43509,658],{"class":651},[605,43511,655],{"class":610},[605,43513,36387],{"class":651},[605,43515,661],{"class":610},[605,43517,664],{"class":644},[605,43519,667],{"class":610},[605,43521,670],{"class":631},[605,43523,673],{"class":610},[605,43525,43526,43528,43530],{"class":607,"line":697},[605,43527,700],{"class":610},[605,43529,615],{"class":614},[605,43531,637],{"class":610},[605,43533,43534],{"class":607,"line":707},[605,43535,710],{"emptyLinePlaceholder":562},[605,43537,43538,43540,43542],{"class":607,"line":713},[605,43539,611],{"class":610},[605,43541,718],{"class":614},[605,43543,637],{"class":610},[605,43545,43546,43548,43550,43552],{"class":607,"line":723},[605,43547,726],{"class":610},[605,43549,729],{"class":614},[605,43551,35777],{"class":618},[605,43553,637],{"class":610},[605,43555,43556,43558,43560,43562,43564,43566,43568,43570,43572,43574,43576,43578,43580,43582,43584],{"class":607,"line":746},[605,43557,749],{"class":610},[605,43559,752],{"class":614},[605,43561,781],{"class":610},[605,43563,1459],{"class":618},[605,43565,625],{"class":610},[605,43567,628],{"class":610},[605,43569,1466],{"class":610},[605,43571,937],{"class":791},[605,43573,1471],{"class":610},[605,43575,4160],{"class":791},[605,43577,1471],{"class":610},[605,43579,2396],{"class":791},[605,43581,1481],{"class":610},[605,43583,628],{"class":610},[605,43585,755],{"class":610},[605,43587,43588,43590,43592,43594],{"class":607,"line":758},[605,43589,749],{"class":610},[605,43591,763],{"class":614},[605,43593,1868],{"class":618},[605,43595,755],{"class":610},[605,43597,43599,43601],{"class":43598,"line":768},[607,641],[605,43600,749],{"class":610},[605,43602,43603],{"class":614},"Stage\n",[605,43605,43607,43610,43612,43614,43617],{"class":43606,"line":773},[607,641],[605,43608,43609],{"class":618},"      lighting",[605,43611,625],{"class":610},[605,43613,628],{"class":610},[605,43615,43616],{"class":631},"rembrandt",[605,43618,2987],{"class":610},[605,43620,43622,43625,43627,43629,43632],{"class":43621,"line":799},[607,641],[605,43623,43624],{"class":618},"      shadows",[605,43626,625],{"class":610},[605,43628,628],{"class":610},[605,43630,43631],{"class":631},"contact",[605,43633,2987],{"class":610},[605,43635,43637,43639,43642,43644,43646,43648],{"class":43636,"line":599},[607,641],[605,43638,5693],{"class":610},[605,43640,43641],{"class":618},"adjust-camera",[605,43643,625],{"class":610},[605,43645,628],{"class":610},[605,43647,933],{"class":3870},[605,43649,2987],{"class":610},[605,43651,43653,43656,43658,43660,43662],{"class":43652,"line":822},[607,641],[605,43654,43655],{"class":618},"      environment",[605,43657,625],{"class":610},[605,43659,628],{"class":610},[605,43661,37301],{"class":631},[605,43663,2987],{"class":610},[605,43665,43667,43669,43671,43673,43675,43677],{"class":43666,"line":833},[607,641],[605,43668,5693],{"class":610},[605,43670,1886],{"class":618},[605,43672,625],{"class":610},[605,43674,628],{"class":610},[605,43676,1513],{"class":791},[605,43678,2987],{"class":610},[605,43680,43681],{"class":607,"line":844},[605,43682,5713],{"class":610},[605,43684,43685,43687,43689,43691],{"class":607,"line":854},[605,43686,825],{"class":610},[605,43688,828],{"class":614},[605,43690,9856],{"class":618},[605,43692,637],{"class":610},[605,43694,43695,43697,43699],{"class":607,"line":600},[605,43696,836],{"class":610},[605,43698,839],{"class":614},[605,43700,755],{"class":610},[605,43702,43703,43705,43707,43709,43711,43713,43715,43717],{"class":607,"line":874},[605,43704,836],{"class":610},[605,43706,13421],{"class":614},[605,43708,3978],{"class":618},[605,43710,625],{"class":610},[605,43712,628],{"class":610},[605,43714,6738],{"class":631},[605,43716,628],{"class":610},[605,43718,755],{"class":610},[605,43720,43721,43723,43725],{"class":607,"line":884},[605,43722,857],{"class":610},[605,43724,828],{"class":614},[605,43726,637],{"class":610},[605,43728,43729,43731,43733,43735,43737,43739,43741,43743,43745,43747,43749,43751,43753,43755,43757,43759,43761,43763,43765,43767,43769,43771,43773,43775,43777,43779],{"class":607,"line":2952},[605,43730,825],{"class":610},[605,43732,237],{"class":614},[605,43734,781],{"class":610},[605,43736,1459],{"class":618},[605,43738,625],{"class":610},[605,43740,628],{"class":610},[605,43742,1466],{"class":610},[605,43744,937],{"class":791},[605,43746,3598],{"class":610},[605,43748,792],{"class":791},[605,43750,1471],{"class":610},[605,43752,937],{"class":791},[605,43754,1481],{"class":610},[605,43756,628],{"class":610},[605,43758,36089],{"class":618},[605,43760,781],{"class":610},[605,43762,1989],{"class":618},[605,43764,625],{"class":610},[605,43766,628],{"class":610},[605,43768,1466],{"class":610},[605,43770,2396],{"class":791},[605,43772,1471],{"class":610},[605,43774,2396],{"class":791},[605,43776,1481],{"class":610},[605,43778,628],{"class":610},[605,43780,637],{"class":610},[605,43782,43783,43785,43787],{"class":607,"line":2960},[605,43784,836],{"class":610},[605,43786,13421],{"class":614},[605,43788,755],{"class":610},[605,43790,43791,43793,43795],{"class":607,"line":2990},[605,43792,857],{"class":610},[605,43794,237],{"class":614},[605,43796,637],{"class":610},[605,43798,43799,43801,43803],{"class":607,"line":3007},[605,43800,867],{"class":610},[605,43802,383],{"class":614},[605,43804,637],{"class":610},[605,43806,43807,43809,43811],{"class":607,"line":3022},[605,43808,877],{"class":610},[605,43810,729],{"class":614},[605,43812,637],{"class":610},[605,43814,43815,43817,43819],{"class":607,"line":3047},[605,43816,700],{"class":610},[605,43818,718],{"class":614},[605,43820,637],{"class":610},[472,43822,894],{"id":893},[899,43824,43825,43835],{},[902,43826,43827],{},[905,43828,43829,43831,43833],{},[908,43830,910],{"align":969},[908,43832,913],{"align":969},[908,43834,916],{"align":969},[918,43836,43837,43855,43872,43890,43904,43920],{},[905,43838,43839,43844,43850],{},[923,43840,43841],{"align":969},[1673,43842,43843],{},"lighting",[923,43845,43846,43847],{"align":969},"Lighting setup. Options: ",[586,43848,43849],{},"null | undefined | false | 'rembrandt' | 'portrait' | 'upfront' | 'soft' | { main: [x, y, z], fill: [x, y, z] }",[923,43851,43852],{"align":969},[586,43853,43854],{},"'rembrandt'",[905,43856,43857,43861,43867],{},[923,43858,43859],{"align":969},[1673,43860,32140],{},[923,43862,43863,43864],{"align":969},"Controls the ground shadows. Options: ",[586,43865,43866],{},"boolean | 'contact' | 'accumulative' | StageShadows",[923,43868,43869],{"align":969},[586,43870,43871],{},"'contact'",[905,43873,43874,43879,43886],{},[923,43875,43876],{"align":969},[1673,43877,43878],{},"adjustCamera",[923,43880,43881,43882,43885],{"align":969},"Optionally wraps and thereby centers the models using ",[586,43883,43884],{},"\u003CBounds>",", can also be a camera offset",[923,43887,43888],{"align":969},[586,43889,933],{},[905,43891,43892,43896,43899],{},[923,43893,43894],{"align":969},[1673,43895,43380],{},[923,43897,43898],{"align":969},"The default environment",[923,43900,43901],{"align":969},[586,43902,43903],{},"'city'",[905,43905,43906,43910,43916],{},[923,43907,43908],{"align":969},[1673,43909,1886],{},[923,43911,43912,43913,43915],{"align":969},"Lighting intensity, ",[586,43914,937],{}," removes lights",[923,43917,43918],{"align":969},[586,43919,1513],{},[905,43921,43922,43927,43930],{},[923,43923,43924],{"align":969},[1673,43925,43926],{},"align",[923,43928,43929],{"align":969},"To adjust alignment",[923,43931,43932],{"align":969},[586,43933,1151],{},[7473,43935,43937],{"id":43936},"stageshadows-type","StageShadows Type",[582,43939,43940],{},"When using custom shadow configuration, you can pass an object with the following properties:",[899,43942,43943,43953],{},[902,43944,43945],{},[905,43946,43947,43949,43951],{},[908,43948,910],{"align":969},[908,43950,913],{"align":969},[908,43952,916],{"align":969},[918,43954,43955,43969,43982,43996,44010],{},[905,43956,43957,43961,43967],{},[923,43958,43959],{"align":969},[1673,43960,29435],{},[923,43962,43963,43964],{"align":969},"Shadow type: ",[586,43965,43966],{},"'contact' | 'accumulative'",[923,43968,4088],{"align":969},[905,43970,43971,43975,43978],{},[923,43972,43973],{"align":969},[1673,43974,33561],{},[923,43976,43977],{"align":969},"Shadow plane offset",[923,43979,43980],{"align":969},[586,43981,937],{},[905,43983,43984,43988,43991],{},[923,43985,43986],{"align":969},[1673,43987,35899],{},[923,43989,43990],{"align":969},"Shadow bias",[923,43992,43993],{"align":969},[586,43994,43995],{},"-0.0001",[905,43997,43998,44003,44006],{},[923,43999,44000],{"align":969},[1673,44001,44002],{},"normalBias",[923,44004,44005],{"align":969},"Shadow normal bias",[923,44007,44008],{"align":969},[586,44009,937],{},[905,44011,44012,44016,44019],{},[923,44013,44014],{"align":969},[1673,44015,10233],{},[923,44017,44018],{"align":969},"Shadow map size",[923,44020,44021],{"align":969},[586,44022,32519],{},[582,44024,44025,44026,1471,44029,1691,44032,1118],{},"Additionally inherits all props from ",[586,44027,44028],{},"AccumulativeShadowsProps",[586,44030,44031],{},"RandomizedLightsProps",[586,44033,44034],{},"ContactShadowsProps",[1299,44036,44037],{},"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":44039},[44040,44041],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894,"children":44042},[44043],{"id":43936,"depth":676,"text":43937},"Creates a complete stage setup with lighting, shadows, and environment.",{},{"title":383,"description":44044},"ZUAOlQhFpQ_UzI0nm_Ae7_izK4y1v3X6HA7NTC6mQ3o",{"id":44049,"title":387,"body":44050,"description":44337,"extension":559,"links":560,"meta":44338,"navigation":562,"path":388,"seo":44339,"stem":389,"__hash__":44340},"docs/2.api/8.staging/stars.md",{"type":469,"value":44051,"toc":44333},[44052,44057,44063,44065,44070,44227,44229,44331],[576,44053,44054],{},[44055,44056],"staging-stars",{},[582,44058,44059,44062],{},[586,44060,44061],{},"\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,44064,15],{"id":592},[582,44066,39594,44067,44069],{},[586,44068,44061],{}," component without passing any props,",[594,44071,44074],{"className":596,"code":44072,"highlights":44073,"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,44075,44076,44096,44114,44134,44142,44146,44154,44162,44194,44203,44211,44219],{"__ignoreMap":544},[605,44077,44078,44080,44082,44084,44086,44088,44090,44092,44094],{"class":607,"line":545},[605,44079,611],{"class":610},[605,44081,615],{"class":614},[605,44083,619],{"class":618},[605,44085,622],{"class":618},[605,44087,625],{"class":610},[605,44089,628],{"class":610},[605,44091,632],{"class":631},[605,44093,628],{"class":610},[605,44095,637],{"class":610},[605,44097,44098,44100,44102,44104,44106,44108,44110,44112],{"class":607,"line":546},[605,44099,645],{"class":644},[605,44101,648],{"class":610},[605,44103,683],{"class":651},[605,44105,661],{"class":610},[605,44107,664],{"class":644},[605,44109,667],{"class":610},[605,44111,692],{"class":631},[605,44113,673],{"class":610},[605,44115,44117,44119,44121,44124,44126,44128,44130,44132],{"class":44116,"line":676},[607,641],[605,44118,645],{"class":644},[605,44120,648],{"class":610},[605,44122,44123],{"class":651}," Stars",[605,44125,661],{"class":610},[605,44127,664],{"class":644},[605,44129,667],{"class":610},[605,44131,670],{"class":631},[605,44133,673],{"class":610},[605,44135,44136,44138,44140],{"class":607,"line":697},[605,44137,700],{"class":610},[605,44139,615],{"class":614},[605,44141,637],{"class":610},[605,44143,44144],{"class":607,"line":707},[605,44145,710],{"emptyLinePlaceholder":562},[605,44147,44148,44150,44152],{"class":607,"line":713},[605,44149,611],{"class":610},[605,44151,718],{"class":614},[605,44153,637],{"class":610},[605,44155,44156,44158,44160],{"class":607,"line":723},[605,44157,726],{"class":610},[605,44159,729],{"class":614},[605,44161,637],{"class":610},[605,44163,44164,44166,44168,44170,44172,44174,44176,44178,44180,44182,44184,44186,44188,44190,44192],{"class":607,"line":746},[605,44165,749],{"class":610},[605,44167,752],{"class":614},[605,44169,781],{"class":610},[605,44171,1459],{"class":618},[605,44173,625],{"class":610},[605,44175,628],{"class":610},[605,44177,1466],{"class":610},[605,44179,937],{"class":791},[605,44181,1471],{"class":610},[605,44183,4160],{"class":791},[605,44185,1471],{"class":610},[605,44187,2396],{"class":791},[605,44189,1481],{"class":610},[605,44191,628],{"class":610},[605,44193,755],{"class":610},[605,44195,44197,44199,44201],{"class":44196,"line":758},[607,641],[605,44198,749],{"class":610},[605,44200,387],{"class":614},[605,44202,755],{"class":610},[605,44204,44205,44207,44209],{"class":607,"line":768},[605,44206,749],{"class":610},[605,44208,3518],{"class":614},[605,44210,755],{"class":610},[605,44212,44213,44215,44217],{"class":607,"line":773},[605,44214,877],{"class":610},[605,44216,729],{"class":614},[605,44218,637],{"class":610},[605,44220,44221,44223,44225],{"class":607,"line":799},[605,44222,700],{"class":610},[605,44224,718],{"class":614},[605,44226,637],{"class":610},[472,44228,894],{"id":893},[899,44230,44231,44241],{},[902,44232,44233],{},[905,44234,44235,44237,44239],{},[908,44236,910],{"align":969},[908,44238,913],{"align":969},[908,44240,916],{},[918,44242,44243,44254,44265,44276,44287,44298,44309,44320],{},[905,44244,44245,44249,44252],{},[923,44246,44247],{"align":969},[1673,44248,10233],{},[923,44250,44251],{"align":969},"The size of the stars",[923,44253,2203],{},[905,44255,44256,44260,44263],{},[923,44257,44258],{"align":969},[1673,44259,40601],{},[923,44261,44262],{"align":969},"keep the same size regardless distance.",[923,44264,933],{},[905,44266,44267,44271,44274],{},[923,44268,44269],{"align":969},[1673,44270,4873],{},[923,44272,44273],{"align":969},"show transparency on the stars texture",[923,44275,933],{},[905,44277,44278,44282,44285],{},[923,44279,44280],{"align":969},[1673,44281,32470],{},[923,44283,44284],{"align":969},"enables the WebGL to know when not to render the pixeltext.",[923,44286,1907],{},[905,44288,44289,44293,44296],{},[923,44290,44291],{"align":969},[1673,44292,40511],{},[923,44294,44295],{"align":969},"texture of the stars",[923,44297,3152],{},[905,44299,44300,44304,44307],{},[923,44301,44302],{"align":969},[1673,44303,5100],{},[923,44305,44306],{"align":969},"number of stars",[923,44308,40550],{},[905,44310,44311,44315,44318],{},[923,44312,44313],{"align":969},[1673,44314,6358],{},[923,44316,44317],{"align":969},"depth of star's shape",[923,44319,4597],{},[905,44321,44322,44326,44329],{},[923,44323,44324],{"align":969},[1673,44325,35992],{},[923,44327,44328],{"align":969},"Radius of star's shape",[923,44330,6028],{},[1299,44332,1648],{},{"title":544,"searchDepth":545,"depth":546,"links":44334},[44335,44336],{"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":44337},"Hth9yEzN_KgLKS-QKylR25ofLqF86DItRzJAOv9FBUM",[44342,45286,45735,46944,47368,53367,53989,54830,55832],{"id":44343,"title":397,"body":44344,"description":45282,"extension":559,"links":560,"meta":45283,"navigation":562,"path":398,"seo":45284,"stem":399,"__hash__":45285},"docs/2.api/9.objects/animated-sprite.md",{"type":469,"value":44345,"toc":45264},[44346,44351,44366,44374,44376,44568,44578,44582,44588,44602,44611,44615,44622,44641,44645,44653,44657,44683,44685,45012,45014,45082,45085,45091,45095,45098,45103,45106,45118,45133,45135,45138,45175,45178,45190,45194,45202,45212,45218,45221,45252,45255,45262],[576,44347,44348],{},[44349,44350],"objects-animated-sprite",{},[582,44352,44353,44356,44357,44362,44363,44365],{},[586,44354,44355],{},"\u003CAnimatedSprite />"," displays 2D animations defined in a ",[1112,44358,44361],{"href":44359,"rel":44360},"https://en.wikipedia.org/wiki/Texture_atlas",[1116],"texture atlas",". A typical ",[586,44364,44355],{}," will use:",[3136,44367,44368,44371],{},[3139,44369,44370],{},"An image containing multiple sprites",[3139,44372,44373],{},"A JSON atlas containing the individual sprite coordinates in the image",[472,44375,15],{"id":592},[594,44377,44380],{"className":596,"code":44378,"highlights":44379,"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,44381,44382,44402,44422,44426,44448,44456,44460,44468,44476,44484,44492,44507,44522,44539,44544,44552,44560],{"__ignoreMap":544},[605,44383,44384,44386,44388,44390,44392,44394,44396,44398,44400],{"class":607,"line":545},[605,44385,611],{"class":610},[605,44387,615],{"class":614},[605,44389,619],{"class":618},[605,44391,622],{"class":618},[605,44393,625],{"class":610},[605,44395,628],{"class":610},[605,44397,632],{"class":631},[605,44399,628],{"class":610},[605,44401,637],{"class":610},[605,44403,44405,44407,44409,44412,44414,44416,44418,44420],{"class":44404,"line":546},[607,641],[605,44406,645],{"class":644},[605,44408,648],{"class":610},[605,44410,44411],{"class":651}," AnimatedSprite",[605,44413,661],{"class":610},[605,44415,664],{"class":644},[605,44417,667],{"class":610},[605,44419,670],{"class":631},[605,44421,673],{"class":610},[605,44423,44424],{"class":607,"line":676},[605,44425,710],{"emptyLinePlaceholder":562},[605,44427,44428,44430,44433,44435,44437,44439,44441,44444,44446],{"class":607,"line":697},[605,44429,2689],{"class":618},[605,44431,44432],{"class":651}," currentAnimation ",[605,44434,625],{"class":610},[605,44436,5431],{"class":2800},[605,44438,2970],{"class":651},[605,44440,5536],{"class":610},[605,44442,44443],{"class":631},"cientosIdle",[605,44445,5536],{"class":610},[605,44447,5539],{"class":651},[605,44449,44450,44452,44454],{"class":607,"line":707},[605,44451,700],{"class":610},[605,44453,615],{"class":614},[605,44455,637],{"class":610},[605,44457,44458],{"class":607,"line":713},[605,44459,710],{"emptyLinePlaceholder":562},[605,44461,44462,44464,44466],{"class":607,"line":723},[605,44463,611],{"class":610},[605,44465,718],{"class":614},[605,44467,637],{"class":610},[605,44469,44470,44472,44474],{"class":607,"line":746},[605,44471,726],{"class":610},[605,44473,729],{"class":614},[605,44475,637],{"class":610},[605,44477,44478,44480,44482],{"class":607,"line":758},[605,44479,749],{"class":610},[605,44481,14995],{"class":614},[605,44483,637],{"class":610},[605,44485,44487,44489],{"class":44486,"line":768},[607,641],[605,44488,825],{"class":610},[605,44490,44491],{"class":614},"AnimatedSprite\n",[605,44493,44495,44498,44500,44502,44505],{"class":44494,"line":773},[607,641],[605,44496,44497],{"class":618},"        image",[605,44499,625],{"class":610},[605,44501,628],{"class":610},[605,44503,44504],{"class":631},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosTexture.png",[605,44506,2987],{"class":610},[605,44508,44510,44513,44515,44517,44520],{"class":44509,"line":799},[607,641],[605,44511,44512],{"class":618},"        atlas",[605,44514,625],{"class":610},[605,44516,628],{"class":610},[605,44518,44519],{"class":631},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosAtlas.json",[605,44521,2987],{"class":610},[605,44523,44525,44527,44530,44532,44534,44537],{"class":44524,"line":599},[607,641],[605,44526,2993],{"class":610},[605,44528,44529],{"class":618},"animation",[605,44531,625],{"class":610},[605,44533,628],{"class":610},[605,44535,44536],{"class":651},"currentAnimation",[605,44538,2987],{"class":610},[605,44540,44542],{"class":44541,"line":822},[607,641],[605,44543,3050],{"class":610},[605,44545,44546,44548,44550],{"class":607,"line":833},[605,44547,867],{"class":610},[605,44549,14995],{"class":614},[605,44551,637],{"class":610},[605,44553,44554,44556,44558],{"class":607,"line":844},[605,44555,877],{"class":610},[605,44557,729],{"class":614},[605,44559,637],{"class":610},[605,44561,44562,44564,44566],{"class":607,"line":854},[605,44563,700],{"class":610},[605,44565,718],{"class":614},[605,44567,637],{"class":610},[3725,44569,44570],{},[582,44571,44572,44574,44575,1118],{},[586,44573,44355],{}," loads resources asynchronously, so it must be wrapped in a ",[586,44576,44577],{},"\u003CSuspense />",[472,44579,44581],{"id":44580},"compiling-an-atlas","Compiling an atlas",[582,44583,44584,44585,44587],{},"In typical usage, ",[586,44586,44355],{}," requires both the URL to a texture of compiled sprite images and a JSON atlas containing information about the sprites in the texture.",[3136,44589,44590,44596],{},[3139,44591,44592],{},[1112,44593,44595],{"href":44504,"rel":44594},[1116],"example compiled texture",[3139,44597,44598],{},[1112,44599,44601],{"href":44519,"rel":44600},[1116],"example JSON atlas",[582,44603,44604,44605,44610],{},"Compiling source images into a texture atlas is usually handled by third-party software. You may find ",[1112,44606,44609],{"href":44607,"rel":44608},"https://www.codeandweb.com/texturepacker",[1116],"TexturePacker"," useful.",[472,44612,44614],{"id":44613},"without-an-atlas","Without an atlas",[582,44616,44617,44618,44621],{},"There may be cases where you don't want to supply an atlas to the ",[586,44619,44620],{},"atlas"," prop. To do so:",[3136,44623,44624,44627,44630,44633],{},[3139,44625,44626],{},"Compile your source images into a single image texture.",[3139,44628,44629],{},"Space each sprite into equally sized columns and rows in the compiled image texture.",[3139,44631,44632],{},"Ensure no extra padding has been added to the compiled image texture.",[3139,44634,44635,44636,44638,44639,1118],{},"Set the ",[586,44637,44620],{}," prop to number of columns, number of rows as ",[586,44640,22132],{},[472,44642,44644],{"id":44643},"spritesheets-in-the-wild","Spritesheets in the wild",[3725,44646,44647],{},[582,44648,44649,44650,44652],{},"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,44651,44355],{},". In many cases, it's advisable to recompile the spritesheet.",[7473,44654,44656],{"id":44655},"how-to-recompile-an-existing-spritesheet-image","How to recompile an existing spritesheet image",[3136,44658,44659,44662,44665,44668,44680],{},[3139,44660,44661],{},"Cut individual sprites from the spritesheet and paste them into separate layers in an image editing application, e.g., GIMP.",[3139,44663,44664],{},"Align the layers for animation. Toggling layer visibility on/off will show you how the animation will display, frame to frame.",[3139,44666,44667],{},"Export layers as individual images.",[3139,44669,44670,44671,44673,44676,44677,44679],{},"Name the individual images according to the following pattern: ",[2508,44672],{},[586,44674,44675],{},"[animation name][frame number].[extension]"," ",[2508,44678],{},"E.g., walk000.png, walk001.png, idle000.png, idle001.png",[3139,44681,44682],{},"Compile individual images into an image texture and atlas using a texture packing application, like TexturePacker.",[472,44684,894],{"id":893},[899,44686,44687,44697],{},[902,44688,44689],{},[905,44690,44691,44693,44695],{},[908,44692,3118],{"align":969},[908,44694,913],{"align":969},[908,44696,916],{"align":969},[918,44698,44699,44711,44749,44809,44823,44836,44859,44873,44887,44901,44915,44934,44958,44976,44994],{},[905,44700,44701,44704,44709],{},[923,44702,44703],{"align":969},"image",[923,44705,44706,44708],{"align":969},[586,44707,11094],{}," – URL of the image texture or an image dataURL. This prop is not reactive.",[923,44710],{"align":969},[905,44712,44713,44715,44747],{},[923,44714,44620],{"align":969},[923,44716,44717,44720,44721,44744,44746],{"align":969},[586,44718,44719],{},"string | Atlasish"," – ",[3136,44722,44723,44728,44733,44738],{},[3139,44724,930,44725,44727],{},[586,44726,11094],{},", the URL of the JSON atlas.",[3139,44729,930,44730,44732],{},[586,44731,2537],{},", the number of columns in the texture.",[3139,44734,930,44735,44737],{},[586,44736,22132],{},", the number of columns/rows in the texture.",[3139,44739,930,44740,44743],{},[586,44741,44742],{},"AtlasData",", the atlas as a JS object.",[2508,44745],{},"This prop is not reactive.",[923,44748],{"align":969},[905,44750,44751,44754,44807],{},[923,44752,44753],{"align":969},"definitions",[923,44755,44756,44759,44760,44762,44763,44765,44767,44768,44770,44772,44773],{"align":969},[586,44757,44758],{},"Record\u003Cstring, string>"," – Specify playback frame order and repeated frames (delays). ",[586,44761,44753],{}," is a record where keys are atlas animation names and values are strings containing an animation definition.",[2508,44764],{},[2508,44766],{},"A \"animation definition\" comma-separated string of frame numbers with optional parentheses-surrounded durations.",[2508,44769],{},[2508,44771],{},"Here is how various definition strings convert to arrays of frames for playback:",[3136,44774,44775,44782,44789,44795,44801],{},[3139,44776,44777,44778,44781],{},"\"0,2,1\" - ",[605,44779,44780],{},"0,2,1",", i.e., play frame 0, 2, then 1.",[3139,44783,44784,44785,44788],{},"\"2(10)\" - ",[605,44786,44787],{},"2,2,2,2,2,2,2,2,2,2",", i.e., play from 2 10 times.",[3139,44790,44791,44792],{},"\"1-4\" - ",[605,44793,44794],{},"1,2,3,4",[3139,44796,44797,44798],{},"\"10-5(2)\" - ",[605,44799,44800],{},"10,10,9,9,8,8,7,7,6,6,5,5",[3139,44802,44803,44804],{},"\"1-4(3),10(2)\" - ",[605,44805,44806],{},"1,1,1,2,2,2,3,3,3,4,4,4,10,10",[923,44808],{"align":969},[905,44810,44811,44814,44819],{},[923,44812,44813],{"align":969},"fps",[923,44815,44816,44818],{"align":969},[586,44817,2537],{}," – Desired frames per second of the animation.",[923,44820,44821],{"align":969},[586,44822,21690],{},[905,44824,44825,44827,44832],{},[923,44826,19561],{"align":969},[923,44828,44829,44831],{"align":969},[586,44830,11014],{}," – Whether or not the animation should loop.",[923,44833,44834],{"align":969},[586,44835,933],{},[905,44837,44838,44840,44855],{},[923,44839,44529],{"align":969},[923,44841,44842,44845,44846,44848,44849,44851,44852,44854],{"align":969},[586,44843,44844],{},"string | [number, number] | number"," – If ",[586,44847,11094],{},", name of the animation to play. If ",[586,44850,22132],{},", start and end frames of the animation. If ",[586,44853,2537],{},", frame number to display.",[923,44856,44857],{"align":969},[586,44858,937],{},[905,44860,44861,44864,44869],{},[923,44862,44863],{"align":969},"paused",[923,44865,44866,44868],{"align":969},[586,44867,11014],{}," – Whether the animation is paused.",[923,44870,44871],{"align":969},[586,44872,943],{},[905,44874,44875,44878,44883],{},[923,44876,44877],{"align":969},"reversed",[923,44879,44880,44882],{"align":969},[586,44881,11014],{}," – Whether to play the animation in reverse.",[923,44884,44885],{"align":969},[586,44886,943],{},[905,44888,44889,44892,44897],{},[923,44890,44891],{"align":969},"flipX",[923,44893,44894,44896],{"align":969},[586,44895,11014],{}," – Whether the sprite should be flipped, left to right.",[923,44898,44899],{"align":969},[586,44900,943],{},[905,44902,44903,44906,44911],{},[923,44904,44905],{"align":969},"resetOnEnd",[923,44907,44908,44910],{"align":969},[586,44909,11014],{}," – For a non-looping animation, when the animation ends, whether to display the zeroth frame.",[923,44912,44913],{"align":969},[586,44914,943],{},[905,44916,44917,44920,44930],{},[923,44918,44919],{"align":969},"asSprite",[923,44921,44922,44924,44925],{"align":969},[586,44923,11014],{}," – Whether to display the object as a THREE.Sprite. ",[1112,44926,44929],{"href":44927,"rel":44928},"https://threejs.org/docs/?q=sprite#api/en/objects/Sprite",[1116],"See THREE.Sprite",[923,44931,44932],{"align":969},[586,44933,933],{},[905,44935,44936,44939,44953],{},[923,44937,44938],{"align":969},"center",[923,44940,44941,44944,44945,44948,44949,44952],{"align":969},[586,44942,44943],{},"TresVector2"," – Anchor point of the object. A value of ",[605,44946,44947],{},"0.5, 0.5"," corresponds to the center. ",[605,44950,44951],{},"0, 0"," is left, bottom.",[923,44954,44955],{"align":969},[586,44956,44957],{},"[0.5, 0.5]",[905,44959,44960,44962,44972],{},[923,44961,32470],{"align":969},[923,44963,44964,44966,44967],{"align":969},[586,44965,2537],{}," – Alpha test value for the material. ",[1112,44968,44971],{"href":44969,"rel":44970},"https://threejs.org/docs/#api/en/materials/Material.alphaTest",[1116],"See THREE.Material.alphaTest",[923,44973,44974],{"align":969},[586,44975,7207],{},[905,44977,44978,44980,44990],{},[923,44979,41364],{"align":969},[923,44981,44982,44984,44985],{"align":969},[586,44983,11014],{}," – Depth test value for the material. ",[1112,44986,44989],{"href":44987,"rel":44988},"https://threejs.org/docs/#api/en/materials/Material.depthTest",[1116],"See THREE.Material.depthTest",[923,44991,44992],{"align":969},[586,44993,933],{},[905,44995,44996,44998,45008],{},[923,44997,4334],{"align":969},[923,44999,45000,45002,45003],{"align":969},[586,45001,11014],{}," – Depth write value for the material. ",[1112,45004,45007],{"href":45005,"rel":45006},"https://threejs.org/docs/#api/en/materials/Material.depthWrite",[1116],"See THREE.Material.depthWrite",[923,45009,45010],{"align":969},[586,45011,933],{},[472,45013,7742],{"id":7741},[899,45015,45016,45027],{},[902,45017,45018],{},[905,45019,45020,45022,45024],{},[908,45021,7807],{},[908,45023,913],{},[908,45025,45026],{},"Argument",[918,45028,45029,45044,45064],{},[905,45030,45031,45036,45039],{},[923,45032,45033],{},[586,45034,45035],{},"frame",[923,45037,45038],{},"Emitted when the displayed animation frame changes – at most once per tick, frames may be dropped",[923,45040,45041,45043],{},[586,45042,11094],{}," – Name of the newly displayed frame",[905,45045,45046,45050,45059],{},[923,45047,45048],{},[586,45049,7787],{},[923,45051,45052,45053,45056,45057],{},"Emitted when the animation ends – ",[586,45054,45055],{},"props.loop"," must be set to ",[586,45058,943],{},[923,45060,45061,45063],{},[586,45062,11094],{}," – Name of the ending frame",[905,45065,45066,45070,45077],{},[923,45067,45068],{},[586,45069,19561],{},[923,45071,45072,45073,45056,45075],{},"Emitted when the animation loops – ",[586,45074,45055],{},[586,45076,933],{},[923,45078,45079,45081],{},[586,45080,11094],{}," – Name of the frame at the end of the loop",[472,45083,45084],{"id":44529},"Animation",[582,45086,2253,45087,45090],{},[586,45088,45089],{},":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,45092,45094],{"id":45093},"using-named-animations-as-animation","Using named animations as animation",[582,45096,45097],{},"When individual files are converted to a spritesheet/atlas, typically the original images' filenames will be included in the atlas.",[582,45099,45100,45102],{},[586,45101,44355],{}," uses those filenames to automatically group images into animations.",[582,45104,45105],{},"Use either of the following naming conventions for your source images ...",[3136,45107,45108,45113],{},[3139,45109,45110],{},[586,45111,45112],{},"[animation name][frame number].[file_extension]",[3139,45114,45115],{},[586,45116,45117],{},"[animation name]_[frame number].[file_extension]",[582,45119,45120,45121,45123,45124,45127,45128,45130,45131,34398],{},"... then ",[586,45122,44355],{}," will automatically make all ",[586,45125,45126],{},"[animation name]"," available for playback. Just pass ",[586,45129,45126],{}," to the component's ",[586,45132,45089],{},[7473,45134,34504],{"id":34503},[582,45136,45137],{},"For our Cientos heart cartoon character animation, here's how the filenames map to animation names.",[899,45139,45140,45150],{},[902,45141,45142],{},[905,45143,45144,45147],{},[908,45145,45146],{},"Filenames",[908,45148,45149],{},"Animation name",[918,45151,45152,45159,45167],{},[905,45153,45154,45157],{},[923,45155,45156],{},"cientosIdle0000.png, cientosIdle0001.png, ...",[923,45158,44443],{},[905,45160,45161,45164],{},[923,45162,45163],{},"cientosIdleToWalkTransition0000.png",[923,45165,45166],{},"cientosIdleToWalkTransition",[905,45168,45169,45172],{},[923,45170,45171],{},"cientosWalk0000.png, cientosWalk0001.png, ...",[923,45173,45174],{},"cientosWalk",[472,45176,45177],{"id":44753},"Definitions",[582,45179,45180,45181,45184,45185,45189],{},"You can supply an object to the ",[586,45182,45183],{},":definitions"," prop. Any ",[1112,45186,45188],{"href":45187},"#animation","named animation"," can be a key. The value is a string that specifies frame order and delays.",[7473,45191,45193],{"id":45192},"demo","Demo",[582,45195,45196,45197,42344,45199,1118],{},"In this demo, the 'idle' animation is comprised of six different images. By default, those images will play sequentially when the ",[586,45198,45089],{},[586,45200,45201],{},"'idle'",[582,45203,45204,45205,45207,45208,45211],{},"But below, we've added a ",[586,45206,45183],{}," prop with this value for the ",[586,45209,45210],{},"idle"," key:",[594,45213,45216],{"className":45214,"code":45215,"language":22930},[22928],"'0-5, 0(10), 1-2, 3(20), 4-5, 0-5(3)'\n",[586,45217,45215],{"__ignoreMap":544},[582,45219,45220],{},"So, instead of playing images 0-5 sequentially, this animation will play instead:",[3136,45222,45223,45232,45246],{},[3139,45224,45225,45228,45229,45231],{},[586,45226,45227],{},"0-5"," – Play all six images (",[586,45230,45227],{},") of the animation normally.",[3139,45233,45234,45237,45238,45241,45242,45245],{},[586,45235,45236],{},"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,45239,45240],{},"0(10)",") and a delay of twenty frames at the top of the bounce (",[586,45243,45244],{},"3(20)",").",[3139,45247,45248,45251],{},[586,45249,45250],{},"0-5(3)"," – Finally, play all six images of the animation with a delay of three frames each.",[472,45253,45254],{"id":44938},"Center",[582,45256,45257,45258,45261],{},"In addition to being the sprite's anchor point, the ",[586,45259,45260],{},":center"," prop also controls how differently sized source images will \"grow\" and \"shrink\". Namely, they \"grow out from\" and \"shrink towards\" the center.",[1299,45263,38372],{},{"title":544,"searchDepth":545,"depth":546,"links":45265},[45266,45267,45268,45269,45272,45273,45274,45278,45281],{"id":592,"depth":546,"text":15},{"id":44580,"depth":546,"text":44581},{"id":44613,"depth":546,"text":44614},{"id":44643,"depth":546,"text":44644,"children":45270},[45271],{"id":44655,"depth":676,"text":44656},{"id":893,"depth":546,"text":894},{"id":7741,"depth":546,"text":7742},{"id":44529,"depth":546,"text":45084,"children":45275},[45276,45277],{"id":45093,"depth":676,"text":45094},{"id":34503,"depth":676,"text":34504},{"id":44753,"depth":546,"text":45177,"children":45279},[45280],{"id":45192,"depth":676,"text":45193},{"id":44938,"depth":546,"text":45254},"Display 2D animations defined in a texture atlas.",{},{"title":397,"description":45282},"TOx2TSEHnQeUR_DoVqP-W-cCHOVI1DisvWaE29LwWYA",{"id":45287,"title":401,"body":45288,"description":45731,"extension":559,"links":560,"meta":45732,"navigation":562,"path":402,"seo":45733,"stem":403,"__hash__":45734},"docs/2.api/9.objects/cube-camera.md",{"type":469,"value":45289,"toc":45727},[45290,45295,45305,45310,45312,45628,45630,45725],[576,45291,45292],{},[45293,45294],"objects-cube-camera",{},[582,45296,45297,45300,45301,45304],{},[586,45298,45299],{},"\u003CCubeCamera />"," creates a ",[586,45302,45303],{},"THREE.CubeCamera"," and uses it to render an environment map of your scene. The environment map is then applied to component's children.",[582,45306,45307,45309],{},[586,45308,45299],{}," makes its children invisible while rendering to the internal buffer so that they are not included in the reflection.",[472,45311,15],{"id":592},[594,45313,45316],{"className":596,"code":45314,"highlights":45315,"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,45317,45318,45338,45362,45370,45374,45382,45390,45422,45430,45434,45467,45475,45507,45539,45547,45556,45560,45580,45612,45620],{"__ignoreMap":544},[605,45319,45320,45322,45324,45326,45328,45330,45332,45334,45336],{"class":607,"line":545},[605,45321,611],{"class":610},[605,45323,615],{"class":614},[605,45325,619],{"class":618},[605,45327,622],{"class":618},[605,45329,625],{"class":610},[605,45331,628],{"class":610},[605,45333,632],{"class":631},[605,45335,628],{"class":610},[605,45337,637],{"class":610},[605,45339,45341,45343,45345,45348,45350,45352,45354,45356,45358,45360],{"class":45340,"line":546},[607,641],[605,45342,645],{"class":644},[605,45344,648],{"class":610},[605,45346,45347],{"class":651}," CubeCamera",[605,45349,655],{"class":610},[605,45351,658],{"class":651},[605,45353,661],{"class":610},[605,45355,664],{"class":644},[605,45357,667],{"class":610},[605,45359,670],{"class":631},[605,45361,673],{"class":610},[605,45363,45364,45366,45368],{"class":607,"line":676},[605,45365,700],{"class":610},[605,45367,615],{"class":614},[605,45369,637],{"class":610},[605,45371,45372],{"class":607,"line":697},[605,45373,710],{"emptyLinePlaceholder":562},[605,45375,45376,45378,45380],{"class":607,"line":707},[605,45377,611],{"class":610},[605,45379,718],{"class":614},[605,45381,637],{"class":610},[605,45383,45384,45386,45388],{"class":607,"line":713},[605,45385,726],{"class":610},[605,45387,729],{"class":614},[605,45389,637],{"class":610},[605,45391,45392,45394,45396,45398,45400,45402,45404,45406,45408,45410,45412,45414,45416,45418,45420],{"class":607,"line":723},[605,45393,749],{"class":610},[605,45395,752],{"class":614},[605,45397,781],{"class":610},[605,45399,1459],{"class":618},[605,45401,625],{"class":610},[605,45403,628],{"class":610},[605,45405,1466],{"class":610},[605,45407,937],{"class":791},[605,45409,1471],{"class":610},[605,45411,792],{"class":791},[605,45413,1471],{"class":610},[605,45415,2396],{"class":791},[605,45417,1481],{"class":610},[605,45419,628],{"class":610},[605,45421,755],{"class":610},[605,45423,45424,45426,45428],{"class":607,"line":746},[605,45425,749],{"class":610},[605,45427,763],{"class":614},[605,45429,755],{"class":610},[605,45431,45432],{"class":607,"line":758},[605,45433,710],{"emptyLinePlaceholder":562},[605,45435,45437,45439,45441,45443,45445,45447,45449,45451,45453,45455,45457,45459,45461,45463,45465],{"class":45436,"line":768},[607,641],[605,45438,749],{"class":610},[605,45440,401],{"class":614},[605,45442,781],{"class":610},[605,45444,21937],{"class":618},[605,45446,625],{"class":610},[605,45448,628],{"class":610},[605,45450,21945],{"class":791},[605,45452,628],{"class":610},[605,45454,781],{"class":610},[605,45456,32388],{"class":618},[605,45458,625],{"class":610},[605,45460,628],{"class":610},[605,45462,6938],{"class":610},[605,45464,628],{"class":610},[605,45466,637],{"class":610},[605,45468,45469,45471,45473],{"class":607,"line":773},[605,45470,825],{"class":610},[605,45472,828],{"class":614},[605,45474,637],{"class":610},[605,45476,45477,45479,45481,45483,45485,45487,45489,45491,45493,45495,45497,45499,45501,45503,45505],{"class":607,"line":799},[605,45478,836],{"class":610},[605,45480,4735],{"class":614},[605,45482,781],{"class":610},[605,45484,1989],{"class":618},[605,45486,625],{"class":610},[605,45488,628],{"class":610},[605,45490,1466],{"class":610},[605,45492,1893],{"class":791},[605,45494,1471],{"class":610},[605,45496,5736],{"class":791},[605,45498,1471],{"class":610},[605,45500,5736],{"class":791},[605,45502,1481],{"class":610},[605,45504,628],{"class":610},[605,45506,755],{"class":610},[605,45508,45509,45511,45513,45515,45517,45519,45521,45523,45525,45527,45529,45531,45533,45535,45537],{"class":607,"line":599},[605,45510,836],{"class":610},[605,45512,13421],{"class":614},[605,45514,781],{"class":610},[605,45516,14791],{"class":618},[605,45518,625],{"class":610},[605,45520,628],{"class":610},[605,45522,1893],{"class":791},[605,45524,628],{"class":610},[605,45526,781],{"class":610},[605,45528,14806],{"class":618},[605,45530,625],{"class":610},[605,45532,628],{"class":610},[605,45534,937],{"class":791},[605,45536,628],{"class":610},[605,45538,755],{"class":610},[605,45540,45541,45543,45545],{"class":607,"line":822},[605,45542,857],{"class":610},[605,45544,828],{"class":614},[605,45546,637],{"class":610},[605,45548,45550,45552,45554],{"class":45549,"line":833},[607,641],[605,45551,867],{"class":610},[605,45553,401],{"class":614},[605,45555,637],{"class":610},[605,45557,45558],{"class":607,"line":844},[605,45559,710],{"emptyLinePlaceholder":562},[605,45561,45562,45564,45566,45568,45570,45572,45574,45576,45578],{"class":607,"line":854},[605,45563,749],{"class":610},[605,45565,3518],{"class":614},[605,45567,781],{"class":610},[605,45569,1886],{"class":618},[605,45571,625],{"class":610},[605,45573,628],{"class":610},[605,45575,1513],{"class":791},[605,45577,628],{"class":610},[605,45579,755],{"class":610},[605,45581,45582,45584,45586,45588,45590,45592,45594,45596,45598,45600,45602,45604,45606,45608,45610],{"class":607,"line":600},[605,45583,749],{"class":610},[605,45585,3539],{"class":614},[605,45587,781],{"class":610},[605,45589,1459],{"class":618},[605,45591,625],{"class":610},[605,45593,628],{"class":610},[605,45595,1466],{"class":610},[605,45597,937],{"class":791},[605,45599,1471],{"class":610},[605,45601,792],{"class":791},[605,45603,1471],{"class":610},[605,45605,3490],{"class":791},[605,45607,1481],{"class":610},[605,45609,628],{"class":610},[605,45611,755],{"class":610},[605,45613,45614,45616,45618],{"class":607,"line":874},[605,45615,877],{"class":610},[605,45617,729],{"class":614},[605,45619,637],{"class":610},[605,45621,45622,45624,45626],{"class":607,"line":884},[605,45623,700],{"class":610},[605,45625,718],{"class":614},[605,45627,637],{"class":610},[472,45629,894],{"id":893},[899,45631,45632,45642],{},[902,45633,45634],{},[905,45635,45636,45638,45640],{},[908,45637,910],{"align":969},[908,45639,913],{"align":969},[908,45641,916],{},[918,45643,45644,45663,45677,45690,45703,45714],{},[905,45645,45646,45650,45659],{},[923,45647,45648],{"align":969},[586,45649,32388],{},[923,45651,45652,45653,45655,45656,45658],{"align":969},"Number of frames to render. Set to ",[586,45654,1893],{}," for a static scene. ",[586,45657,6938],{}," to update continuously.",[923,45660,45661],{},[586,45662,6938],{},[905,45664,45665,45669,45672],{},[923,45666,45667],{"align":969},[586,45668,21937],{},[923,45670,45671],{"align":969},"Resolution of the FBO",[923,45673,45674],{},[586,45675,45676],{},"255",[905,45678,45679,45683,45686],{},[923,45680,45681],{"align":969},[586,45682,36279],{},[923,45684,45685],{"align":969},"Camera near",[923,45687,45688],{},[586,45689,2203],{},[905,45691,45692,45696,45699],{},[923,45693,45694],{"align":969},[586,45695,34031],{},[923,45697,45698],{"align":969},"Camera far",[923,45700,45701],{},[586,45702,5165],{},[905,45704,45705,45709,45712],{},[923,45706,45707],{"align":969},[586,45708,37250],{},[923,45710,45711],{"align":969},"Custom environment map that is temporarily set as the scene's background",[923,45713],{},[905,45715,45716,45720,45723],{},[923,45717,45718],{"align":969},[586,45719,33581],{},[923,45721,45722],{"align":969},"Custom fog that is temporarily set as the scene's fog",[923,45724],{},[1299,45726,1648],{},{"title":544,"searchDepth":545,"depth":546,"links":45728},[45729,45730],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},"Render environment maps for reflective objects.",{},{"title":401,"description":45731},"guPReQbllwq5wU5oLp9_7X7yFZih0xBoLQvebR42uzE",{"id":45736,"title":405,"body":45737,"description":46940,"extension":559,"links":560,"meta":46941,"navigation":562,"path":406,"seo":46942,"stem":407,"__hash__":46943},"docs/2.api/9.objects/fbo.md",{"type":469,"value":45738,"toc":46932},[45739,45744,45747,45754,45756,46447,46449,46562,46566,46568,46574,46581,46584,46843,46845,46929],[2558,45740,45741],{},[45742,45743],"objects-fbo",{},[582,45745,45746],{},"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,45748,45749,45750,45753],{},"Cientos provides an ",[586,45751,45752],{},"\u003CFbo />"," component make it easy to use FBOs in your application.",[472,45755,15],{"id":592},[594,45757,45760],{"className":596,"code":45758,"highlights":45759,"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,45761,45762,45782,45806,45826,45844,45862,45866,45903,45929,45933,45957,45980,46006,46031,46035,46043,46047,46055,46088,46120,46128,46132,46160,46168,46182,46197,46221,46225,46233,46265,46269,46275,46290,46315,46319,46327,46331,46337,46349,46375,46379,46415,46423,46431,46439],{"__ignoreMap":544},[605,45763,45764,45766,45768,45770,45772,45774,45776,45778,45780],{"class":607,"line":545},[605,45765,611],{"class":610},[605,45767,615],{"class":614},[605,45769,619],{"class":618},[605,45771,622],{"class":618},[605,45773,625],{"class":610},[605,45775,628],{"class":610},[605,45777,632],{"class":631},[605,45779,628],{"class":610},[605,45781,637],{"class":610},[605,45783,45785,45787,45789,45792,45794,45796,45798,45800,45802,45804],{"class":45784,"line":546},[607,641],[605,45786,645],{"class":644},[605,45788,648],{"class":610},[605,45790,45791],{"class":651}," Fbo",[605,45793,655],{"class":610},[605,45795,658],{"class":651},[605,45797,661],{"class":610},[605,45799,664],{"class":644},[605,45801,667],{"class":610},[605,45803,670],{"class":631},[605,45805,673],{"class":610},[605,45807,45808,45810,45812,45814,45816,45818,45820,45822,45824],{"class":607,"line":676},[605,45809,645],{"class":644},[605,45811,11663],{"class":644},[605,45813,648],{"class":610},[605,45815,11668],{"class":651},[605,45817,661],{"class":610},[605,45819,664],{"class":644},[605,45821,667],{"class":610},[605,45823,692],{"class":631},[605,45825,673],{"class":610},[605,45827,45828,45830,45832,45834,45836,45838,45840,45842],{"class":607,"line":697},[605,45829,645],{"class":644},[605,45831,648],{"class":610},[605,45833,683],{"class":651},[605,45835,661],{"class":610},[605,45837,664],{"class":644},[605,45839,667],{"class":610},[605,45841,692],{"class":631},[605,45843,673],{"class":610},[605,45845,45846,45848,45850,45852,45854,45856,45858,45860],{"class":607,"line":707},[605,45847,645],{"class":644},[605,45849,648],{"class":610},[605,45851,9716],{"class":651},[605,45853,661],{"class":610},[605,45855,664],{"class":644},[605,45857,667],{"class":610},[605,45859,601],{"class":631},[605,45861,673],{"class":610},[605,45863,45864],{"class":607,"line":713},[605,45865,710],{"emptyLinePlaceholder":562},[605,45867,45868,45870,45873,45875,45877,45879,45882,45885,45887,45889,45892,45895,45897,45899,45901],{"class":607,"line":723},[605,45869,2689],{"class":618},[605,45871,45872],{"class":651}," fboRef ",[605,45874,625],{"class":610},[605,45876,9716],{"class":2800},[605,45878,611],{"class":610},[605,45880,45881],{"class":1172},"InstanceType",[605,45883,45884],{"class":610},"\u003Ctypeof",[605,45886,45791],{"class":651},[605,45888,11720],{"class":610},[605,45890,45891],{"class":610}," |",[605,45893,45894],{"class":1172}," null",[605,45896,11720],{"class":610},[605,45898,2970],{"class":651},[605,45900,3152],{"class":610},[605,45902,5539],{"class":651},[605,45904,45905,45907,45909,45911,45913,45915,45917,45919,45921,45923,45925,45927],{"class":607,"line":746},[605,45906,2689],{"class":618},[605,45908,5457],{"class":651},[605,45910,625],{"class":610},[605,45912,9716],{"class":2800},[605,45914,611],{"class":610},[605,45916,11717],{"class":1172},[605,45918,45891],{"class":610},[605,45920,45894],{"class":1172},[605,45922,11720],{"class":610},[605,45924,2970],{"class":651},[605,45926,3152],{"class":610},[605,45928,5539],{"class":651},[605,45930,45931],{"class":607,"line":758},[605,45932,710],{"emptyLinePlaceholder":562},[605,45934,45935,45937,45939,45941,45943,45945,45947,45949,45951,45953,45955],{"class":607,"line":768},[605,45936,32712],{"class":618},[605,45938,32715],{"class":2800},[605,45940,32718],{"class":610},[605,45942,32721],{"class":5495},[605,45944,32724],{"class":610},[605,45946,648],{"class":610},[605,45948,32721],{"class":614},[605,45950,1190],{"class":610},[605,45952,2697],{"class":1172},[605,45954,32735],{"class":610},[605,45956,1176],{"class":610},[605,45958,45959,45961,45963,45965,45967,45969,45971,45973,45975,45978],{"class":607,"line":773},[605,45960,14598],{"class":644},[605,45962,2713],{"class":614},[605,45964,15682],{"class":610},[605,45966,5643],{"class":651},[605,45968,1118],{"class":610},[605,45970,5496],{"class":651},[605,45972,2748],{"class":614},[605,45974,34731],{"class":610},[605,45976,45977],{"class":644}," return",[605,45979,15640],{"class":610},[605,45981,45982,45985,45987,45989,45991,45993,45995,45997,45999,46001,46003],{"class":607,"line":799},[605,45983,45984],{"class":651},"  torusRef",[605,45986,1118],{"class":610},[605,45988,5496],{"class":651},[605,45990,1118],{"class":610},[605,45992,21584],{"class":651},[605,45994,1118],{"class":610},[605,45996,2807],{"class":651},[605,45998,2766],{"class":610},[605,46000,32721],{"class":651},[605,46002,32779],{"class":610},[605,46004,46005],{"class":791}," 0.745\n",[605,46007,46008,46010,46012,46014,46016,46018,46020,46022,46024,46026,46028],{"class":607,"line":599},[605,46009,45984],{"class":651},[605,46011,1118],{"class":610},[605,46013,5496],{"class":651},[605,46015,1118],{"class":610},[605,46017,21584],{"class":651},[605,46019,1118],{"class":610},[605,46021,32772],{"class":651},[605,46023,2766],{"class":610},[605,46025,32721],{"class":651},[605,46027,32779],{"class":610},[605,46029,46030],{"class":791}," 0.361\n",[605,46032,46033],{"class":607,"line":822},[605,46034,1297],{"class":610},[605,46036,46037,46039,46041],{"class":607,"line":833},[605,46038,700],{"class":610},[605,46040,615],{"class":614},[605,46042,637],{"class":610},[605,46044,46045],{"class":607,"line":844},[605,46046,710],{"emptyLinePlaceholder":562},[605,46048,46049,46051,46053],{"class":607,"line":854},[605,46050,611],{"class":610},[605,46052,718],{"class":614},[605,46054,637],{"class":610},[605,46056,46057,46059,46061,46063,46065,46067,46069,46072,46074,46076,46078,46080,46082,46084,46086],{"class":607,"line":600},[605,46058,726],{"class":610},[605,46060,729],{"class":614},[605,46062,781],{"class":610},[605,46064,3394],{"class":618},[605,46066,625],{"class":610},[605,46068,628],{"class":610},[605,46070,46071],{"class":791},"0x222",[605,46073,628],{"class":610},[605,46075,7756],{"class":610},[605,46077,19561],{"class":618},[605,46079,625],{"class":610},[605,46081,628],{"class":610},[605,46083,32872],{"class":651},[605,46085,628],{"class":610},[605,46087,637],{"class":610},[605,46089,46090,46092,46094,46096,46098,46100,46102,46104,46106,46108,46110,46112,46114,46116,46118],{"class":607,"line":874},[605,46091,749],{"class":610},[605,46093,752],{"class":614},[605,46095,781],{"class":610},[605,46097,1459],{"class":618},[605,46099,625],{"class":610},[605,46101,628],{"class":610},[605,46103,1466],{"class":610},[605,46105,937],{"class":791},[605,46107,1471],{"class":610},[605,46109,1513],{"class":791},[605,46111,1471],{"class":610},[605,46113,2396],{"class":791},[605,46115,1481],{"class":610},[605,46117,628],{"class":610},[605,46119,755],{"class":610},[605,46121,46122,46124,46126],{"class":607,"line":884},[605,46123,749],{"class":610},[605,46125,763],{"class":614},[605,46127,755],{"class":610},[605,46129,46130],{"class":607,"line":2952},[605,46131,710],{"emptyLinePlaceholder":562},[605,46133,46134,46136,46138,46140,46142,46144,46146,46148,46150,46152,46154,46156,46158],{"class":607,"line":2960},[605,46135,749],{"class":610},[605,46137,3067],{"class":614},[605,46139,781],{"class":610},[605,46141,1989],{"class":618},[605,46143,625],{"class":610},[605,46145,628],{"class":610},[605,46147,1466],{"class":610},[605,46149,1478],{"class":791},[605,46151,1471],{"class":610},[605,46153,1478],{"class":791},[605,46155,1481],{"class":610},[605,46157,628],{"class":610},[605,46159,755],{"class":610},[605,46161,46163,46165],{"class":46162,"line":2990},[607,641],[605,46164,749],{"class":610},[605,46166,46167],{"class":614},"Fbo\n",[605,46169,46171,46173,46175,46177,46180],{"class":46170,"line":3007},[607,641],[605,46172,5679],{"class":618},[605,46174,625],{"class":610},[605,46176,628],{"class":610},[605,46178,46179],{"class":631},"fboRef",[605,46181,2987],{"class":610},[605,46183,46185,46187,46189,46191,46193,46195],{"class":46184,"line":3022},[607,641],[605,46186,5693],{"class":610},[605,46188,6358],{"class":618},[605,46190,625],{"class":610},[605,46192,628],{"class":610},[605,46194,943],{"class":3870},[605,46196,2987],{"class":610},[605,46198,46200,46202,46205,46207,46209,46211,46213,46215,46217,46219],{"class":46199,"line":3047},[607,641],[605,46201,5693],{"class":610},[605,46203,46204],{"class":618},"settings",[605,46206,625],{"class":610},[605,46208,628],{"class":610},[605,46210,7402],{"class":610},[605,46212,36749],{"class":614},[605,46214,7407],{"class":610},[605,46216,1893],{"class":791},[605,46218,661],{"class":610},[605,46220,2987],{"class":610},[605,46222,46223],{"class":607,"line":2591},[605,46224,10816],{"class":610},[605,46226,46227,46229,46231],{"class":607,"line":3062},[605,46228,749],{"class":610},[605,46230,828],{"class":614},[605,46232,637],{"class":610},[605,46234,46235,46237,46239,46241,46243,46245,46247,46249,46251,46253,46255,46257,46259,46261,46263],{"class":607,"line":3092},[605,46236,825],{"class":610},[605,46238,839],{"class":614},[605,46240,781],{"class":610},[605,46242,1989],{"class":618},[605,46244,625],{"class":610},[605,46246,628],{"class":610},[605,46248,1466],{"class":610},[605,46250,1893],{"class":791},[605,46252,1471],{"class":610},[605,46254,1893],{"class":791},[605,46256,1471],{"class":610},[605,46258,1893],{"class":791},[605,46260,1481],{"class":610},[605,46262,628],{"class":610},[605,46264,755],{"class":610},[605,46266,46267],{"class":607,"line":3101},[605,46268,710],{"emptyLinePlaceholder":562},[605,46270,46271,46273],{"class":607,"line":4207},[605,46272,825],{"class":610},[605,46274,16679],{"class":614},[605,46276,46277,46279,46281,46283,46285,46288],{"class":607,"line":4212},[605,46278,2993],{"class":610},[605,46280,2500],{"class":618},[605,46282,625],{"class":610},[605,46284,628],{"class":610},[605,46286,46287],{"class":791},"0xFFFFFF",[605,46289,2987],{"class":610},[605,46291,46292,46294,46296,46298,46300,46302,46304,46306,46308,46310,46313],{"class":607,"line":4235},[605,46293,2993],{"class":610},[605,46295,13426],{"class":618},[605,46297,625],{"class":610},[605,46299,628],{"class":610},[605,46301,46179],{"class":651},[605,46303,10582],{"class":610},[605,46305,20549],{"class":651},[605,46307,10582],{"class":610},[605,46309,13433],{"class":651},[605,46311,46312],{"class":610}," ?? null",[605,46314,2987],{"class":610},[605,46316,46317],{"class":607,"line":4244},[605,46318,3050],{"class":610},[605,46320,46321,46323,46325],{"class":607,"line":4253},[605,46322,867],{"class":610},[605,46324,828],{"class":614},[605,46326,637],{"class":610},[605,46328,46329],{"class":607,"line":4262},[605,46330,710],{"emptyLinePlaceholder":562},[605,46332,46333,46335],{"class":607,"line":4271},[605,46334,749],{"class":610},[605,46336,2957],{"class":614},[605,46338,46339,46341,46343,46345,46347],{"class":607,"line":14784},[605,46340,5679],{"class":618},[605,46342,625],{"class":610},[605,46344,628],{"class":610},[605,46346,5643],{"class":631},[605,46348,2987],{"class":610},[605,46350,46351,46353,46355,46357,46359,46361,46363,46365,46367,46369,46371,46373],{"class":607,"line":14799},[605,46352,5693],{"class":610},[605,46354,1459],{"class":618},[605,46356,625],{"class":610},[605,46358,628],{"class":610},[605,46360,1466],{"class":610},[605,46362,4160],{"class":791},[605,46364,1471],{"class":610},[605,46366,937],{"class":791},[605,46368,1471],{"class":610},[605,46370,937],{"class":791},[605,46372,1481],{"class":610},[605,46374,2987],{"class":610},[605,46376,46377],{"class":607,"line":14814},[605,46378,5713],{"class":610},[605,46380,46381,46383,46385,46387,46389,46391,46393,46395,46397,46399,46401,46403,46405,46407,46409,46411,46413],{"class":607,"line":14819},[605,46382,825],{"class":610},[605,46384,5127],{"class":614},[605,46386,781],{"class":610},[605,46388,1989],{"class":618},[605,46390,625],{"class":610},[605,46392,628],{"class":610},[605,46394,1466],{"class":610},[605,46396,1893],{"class":791},[605,46398,1471],{"class":610},[605,46400,1513],{"class":791},[605,46402,1471],{"class":610},[605,46404,29832],{"class":791},[605,46406,1471],{"class":610},[605,46408,6028],{"class":791},[605,46410,1481],{"class":610},[605,46412,628],{"class":610},[605,46414,755],{"class":610},[605,46416,46417,46419,46421],{"class":607,"line":14826},[605,46418,825],{"class":610},[605,46420,849],{"class":614},[605,46422,755],{"class":610},[605,46424,46425,46427,46429],{"class":607,"line":14831},[605,46426,867],{"class":610},[605,46428,828],{"class":614},[605,46430,637],{"class":610},[605,46432,46433,46435,46437],{"class":607,"line":14837},[605,46434,877],{"class":610},[605,46436,729],{"class":614},[605,46438,637],{"class":610},[605,46440,46441,46443,46445],{"class":607,"line":14858},[605,46442,700],{"class":610},[605,46444,718],{"class":614},[605,46446,637],{"class":610},[472,46448,894],{"id":893},[899,46450,46451,46461],{},[902,46452,46453],{},[905,46454,46455,46457,46459],{},[908,46456,910],{"align":969},[908,46458,913],{"align":969},[908,46460,916],{},[918,46462,46463,46479,46495,46519,46544],{},[905,46464,46465,46471,46476],{},[923,46466,46467],{"align":969},[1673,46468,46469],{},[586,46470,34003],{},[923,46472,46473,46475],{"align":969},[586,46474,2537],{}," - The width of the FBO.",[923,46477,46478],{},"Width of the canvas",[905,46480,46481,46487,46492],{},[923,46482,46483],{"align":969},[1673,46484,46485],{},[586,46486,34017],{},[923,46488,46489,46491],{"align":969},[586,46490,2537],{}," - the height of the FBO",[923,46493,46494],{},"Height of the canvas",[905,46496,46497,46503,46515],{},[923,46498,46499],{"align":969},[1673,46500,46501],{},[586,46502,6358],{},[923,46504,46505,46507,46508,1118],{"align":969},[586,46506,11014],{}," - Whether or not the FBO should render the depth to a ",[1112,46509,46512],{"href":46510,"rel":46511},"https://threejs.org/docs/?q=webglre#api/en/renderers/WebGLRenderTarget.depthTexture",[1116],[586,46513,46514],{},"depthTexture",[923,46516,46517],{},[586,46518,943],{},[905,46520,46521,46527,46540],{},[923,46522,46523],{"align":969},[1673,46524,46525],{},[586,46526,46204],{},[923,46528,46529,46532,46533],{"align":969},[586,46530,46531],{},"WebGLRenderTargetOptions"," - Every other configuration property for the ",[1112,46534,46537,18673],{"href":46535,"rel":46536},"https://threejs.org/docs/#api/en/renderers/WebGLRenderTarget",[1116],[586,46538,46539],{},"WebGLRenderTarget",[923,46541,46542],{},[586,46543,16300],{},[905,46545,46546,46553,46558],{},[923,46547,46548],{"align":969},[1673,46549,46550],{},[586,46551,46552],{},"autoRender",[923,46554,46555,46557],{"align":969},[586,46556,11014],{}," - Whether to automatically render the FBO on the default scene.",[923,46559,46560],{},[586,46561,933],{},[472,46563,46565],{"id":46564},"usefbo","useFBO",[582,46567,45746],{},[582,46569,46570,46571,46573],{},"Cientos provides a ",[586,46572,46565],{}," composable to make it easy to use FBOs in your application.",[3725,46575,46576],{},[582,46577,2253,46578,46580],{},[586,46579,46565],{}," composable must be used inside of a child component since it needs the context of TresCanvas.",[7473,46582,15],{"id":46583},"usage-1",[594,46585,46588],{"className":596,"code":46586,"highlights":46587,"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,46589,46590,46610,46630,46634,46650,46661,46672,46683,46693,46705,46710,46717,46725,46729,46737,46745,46777,46781,46787,46801,46823,46827,46835],{"__ignoreMap":544},[605,46591,46592,46594,46596,46598,46600,46602,46604,46606,46608],{"class":607,"line":545},[605,46593,611],{"class":610},[605,46595,615],{"class":614},[605,46597,619],{"class":618},[605,46599,622],{"class":618},[605,46601,625],{"class":610},[605,46603,628],{"class":610},[605,46605,632],{"class":631},[605,46607,628],{"class":610},[605,46609,637],{"class":610},[605,46611,46613,46615,46617,46620,46622,46624,46626,46628],{"class":46612,"line":546},[607,641],[605,46614,645],{"class":644},[605,46616,648],{"class":610},[605,46618,46619],{"class":651}," useFBO",[605,46621,661],{"class":610},[605,46623,664],{"class":644},[605,46625,667],{"class":610},[605,46627,670],{"class":631},[605,46629,673],{"class":610},[605,46631,46632],{"class":607,"line":676},[605,46633,710],{"emptyLinePlaceholder":562},[605,46635,46637,46639,46642,46644,46646,46648],{"class":46636,"line":697},[607,641],[605,46638,2689],{"class":618},[605,46640,46641],{"class":651}," fboTarget ",[605,46643,625],{"class":610},[605,46645,46619],{"class":2800},[605,46647,2970],{"class":651},[605,46649,2751],{"class":610},[605,46651,46653,46655,46657,46659],{"class":46652,"line":707},[607,641],[605,46654,1231],{"class":614},[605,46656,1190],{"class":610},[605,46658,10938],{"class":3870},[605,46660,14031],{"class":610},[605,46662,46664,46666,46668,46670],{"class":46663,"line":713},[607,641],[605,46665,1212],{"class":614},[605,46667,1190],{"class":610},[605,46669,35295],{"class":791},[605,46671,14031],{"class":610},[605,46673,46675,46677,46679,46681],{"class":46674,"line":723},[607,641],[605,46676,1222],{"class":614},[605,46678,1190],{"class":610},[605,46680,35295],{"class":791},[605,46682,14031],{"class":610},[605,46684,46686,46689,46691],{"class":46685,"line":746},[607,641],[605,46687,46688],{"class":614},"  settings",[605,46690,1190],{"class":610},[605,46692,1176],{"class":610},[605,46694,46696,46699,46701,46703],{"class":46695,"line":758},[607,641],[605,46697,46698],{"class":614},"    samples",[605,46700,1190],{"class":610},[605,46702,22969],{"class":791},[605,46704,14031],{"class":610},[605,46706,46708],{"class":46707,"line":768},[607,641],[605,46709,17650],{"class":610},[605,46711,46713,46715],{"class":46712,"line":773},[607,641],[605,46714,5544],{"class":610},[605,46716,5539],{"class":651},[605,46718,46719,46721,46723],{"class":607,"line":799},[605,46720,700],{"class":610},[605,46722,615],{"class":614},[605,46724,637],{"class":610},[605,46726,46727],{"class":607,"line":599},[605,46728,710],{"emptyLinePlaceholder":562},[605,46730,46731,46733,46735],{"class":607,"line":822},[605,46732,611],{"class":610},[605,46734,718],{"class":614},[605,46736,637],{"class":610},[605,46738,46739,46741,46743],{"class":607,"line":833},[605,46740,726],{"class":610},[605,46742,828],{"class":614},[605,46744,637],{"class":610},[605,46746,46747,46749,46751,46753,46755,46757,46759,46761,46763,46765,46767,46769,46771,46773,46775],{"class":607,"line":844},[605,46748,749],{"class":610},[605,46750,839],{"class":614},[605,46752,781],{"class":610},[605,46754,1989],{"class":618},[605,46756,625],{"class":610},[605,46758,628],{"class":610},[605,46760,1466],{"class":610},[605,46762,1893],{"class":791},[605,46764,1471],{"class":610},[605,46766,1893],{"class":791},[605,46768,1471],{"class":610},[605,46770,1893],{"class":791},[605,46772,1481],{"class":610},[605,46774,628],{"class":610},[605,46776,755],{"class":610},[605,46778,46779],{"class":607,"line":854},[605,46780,710],{"emptyLinePlaceholder":562},[605,46782,46783,46785],{"class":607,"line":600},[605,46784,749],{"class":610},[605,46786,16679],{"class":614},[605,46788,46789,46791,46793,46795,46797,46799],{"class":607,"line":874},[605,46790,5693],{"class":610},[605,46792,2500],{"class":618},[605,46794,625],{"class":610},[605,46796,628],{"class":610},[605,46798,46287],{"class":791},[605,46800,2987],{"class":610},[605,46802,46804,46806,46808,46810,46812,46815,46817,46819,46821],{"class":46803,"line":884},[607,641],[605,46805,5693],{"class":610},[605,46807,13426],{"class":618},[605,46809,625],{"class":610},[605,46811,628],{"class":610},[605,46813,46814],{"class":651},"fboTarget",[605,46816,10582],{"class":610},[605,46818,13433],{"class":651},[605,46820,46312],{"class":610},[605,46822,2987],{"class":610},[605,46824,46825],{"class":607,"line":2952},[605,46826,10816],{"class":610},[605,46828,46829,46831,46833],{"class":607,"line":2960},[605,46830,877],{"class":610},[605,46832,828],{"class":614},[605,46834,637],{"class":610},[605,46836,46837,46839,46841],{"class":607,"line":2990},[605,46838,700],{"class":610},[605,46840,718],{"class":614},[605,46842,637],{"class":610},[7473,46844,7487],{"id":11049},[899,46846,46847,46857],{},[902,46848,46849],{},[905,46850,46851,46853,46855],{},[908,46852,910],{"align":969},[908,46854,913],{"align":969},[908,46856,916],{},[918,46858,46859,46873,46887,46908],{},[905,46860,46861,46867,46871],{},[923,46862,46863],{"align":969},[1673,46864,46865],{},[586,46866,34003],{},[923,46868,46869,46475],{"align":969},[586,46870,2537],{},[923,46872,46478],{},[905,46874,46875,46881,46885],{},[923,46876,46877],{"align":969},[1673,46878,46879],{},[586,46880,34017],{},[923,46882,46883,46491],{"align":969},[586,46884,2537],{},[923,46886,46494],{},[905,46888,46889,46895,46904],{},[923,46890,46891],{"align":969},[1673,46892,46893],{},[586,46894,6358],{},[923,46896,46897,46507,46899,1118],{"align":969},[586,46898,11014],{},[1112,46900,46902],{"href":46510,"rel":46901},[1116],[586,46903,46514],{},[923,46905,46906],{},[586,46907,943],{},[905,46909,46910,46916,46925],{},[923,46911,46912],{"align":969},[1673,46913,46914],{},[586,46915,46204],{},[923,46917,46918,46532,46920],{"align":969},[586,46919,46531],{},[1112,46921,46923,18673],{"href":46535,"rel":46922},[1116],[586,46924,46539],{},[923,46926,46927],{},[586,46928,16300],{},[1299,46930,46931],{},"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":46933},[46934,46935,46936],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},{"id":46564,"depth":546,"text":46565,"children":46937},[46938,46939],{"id":46583,"depth":676,"text":15},{"id":11049,"depth":676,"text":7487},"Render to texture using Frame Buffer Objects.",{},{"title":405,"description":46940},"ch0ffhPITGouVRylpEdp2CmD8Fl-JOZCHt9eio9zKpc",{"id":46945,"title":409,"body":46946,"description":47364,"extension":559,"links":560,"meta":47365,"navigation":562,"path":410,"seo":47366,"stem":411,"__hash__":47367},"docs/2.api/9.objects/gradient-texture.md",{"type":469,"value":46947,"toc":47360},[46948,46953,46962,46964,47215,47217,47358],[2558,46949,46950],{},[46951,46952],"objects-gradient-texture",{},[582,46954,46955,46958,46959,46961],{},[586,46956,46957],{},"\u003CGradientTexture />"," creates a gradient in a THREE.Texture and attaches it to its parent THREE.Material's ",[586,46960,13426],{}," by default.",[472,46963,15],{"id":592},[594,46965,46967],{"className":596,"code":46966,"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,46968,46969,46989,47008,47016,47020,47028,47036,47068,47072,47080,47108,47116,47123,47147,47178,47183,47191,47199,47207],{"__ignoreMap":544},[605,46970,46971,46973,46975,46977,46979,46981,46983,46985,46987],{"class":607,"line":545},[605,46972,611],{"class":610},[605,46974,615],{"class":614},[605,46976,619],{"class":618},[605,46978,622],{"class":618},[605,46980,625],{"class":610},[605,46982,628],{"class":610},[605,46984,632],{"class":631},[605,46986,628],{"class":610},[605,46988,637],{"class":610},[605,46990,46991,46993,46995,46998,47000,47002,47004,47006],{"class":607,"line":546},[605,46992,645],{"class":644},[605,46994,648],{"class":610},[605,46996,46997],{"class":651}," GradientTexture",[605,46999,661],{"class":610},[605,47001,664],{"class":644},[605,47003,667],{"class":610},[605,47005,670],{"class":631},[605,47007,673],{"class":610},[605,47009,47010,47012,47014],{"class":607,"line":676},[605,47011,700],{"class":610},[605,47013,615],{"class":614},[605,47015,637],{"class":610},[605,47017,47018],{"class":607,"line":697},[605,47019,710],{"emptyLinePlaceholder":562},[605,47021,47022,47024,47026],{"class":607,"line":707},[605,47023,611],{"class":610},[605,47025,718],{"class":614},[605,47027,637],{"class":610},[605,47029,47030,47032,47034],{"class":607,"line":713},[605,47031,726],{"class":610},[605,47033,729],{"class":614},[605,47035,637],{"class":610},[605,47037,47038,47040,47042,47044,47046,47048,47050,47052,47054,47056,47058,47060,47062,47064,47066],{"class":607,"line":723},[605,47039,749],{"class":610},[605,47041,752],{"class":614},[605,47043,781],{"class":610},[605,47045,1459],{"class":618},[605,47047,625],{"class":610},[605,47049,628],{"class":610},[605,47051,1466],{"class":610},[605,47053,937],{"class":791},[605,47055,1471],{"class":610},[605,47057,937],{"class":791},[605,47059,1471],{"class":610},[605,47061,2396],{"class":791},[605,47063,1481],{"class":610},[605,47065,628],{"class":610},[605,47067,755],{"class":610},[605,47069,47070],{"class":607,"line":746},[605,47071,710],{"emptyLinePlaceholder":562},[605,47073,47074,47076,47078],{"class":607,"line":758},[605,47075,749],{"class":610},[605,47077,828],{"class":614},[605,47079,637],{"class":610},[605,47081,47082,47084,47086,47088,47090,47092,47094,47096,47098,47100,47102,47104,47106],{"class":607,"line":768},[605,47083,825],{"class":610},[605,47085,21624],{"class":614},[605,47087,781],{"class":610},[605,47089,1989],{"class":618},[605,47091,625],{"class":610},[605,47093,628],{"class":610},[605,47095,1466],{"class":610},[605,47097,792],{"class":791},[605,47099,1471],{"class":610},[605,47101,792],{"class":791},[605,47103,1481],{"class":610},[605,47105,628],{"class":610},[605,47107,755],{"class":610},[605,47109,47110,47112,47114],{"class":607,"line":773},[605,47111,825],{"class":610},[605,47113,2425],{"class":614},[605,47115,637],{"class":610},[605,47117,47118,47120],{"class":607,"line":799},[605,47119,836],{"class":610},[605,47121,47122],{"class":614},"GradientTexture\n",[605,47124,47125,47128,47131,47133,47135,47137,47139,47141,47143,47145],{"class":607,"line":599},[605,47126,47127],{"class":610},"          :",[605,47129,47130],{"class":618},"stops",[605,47132,625],{"class":610},[605,47134,628],{"class":610},[605,47136,1466],{"class":610},[605,47138,937],{"class":791},[605,47140,1471],{"class":610},[605,47142,1893],{"class":791},[605,47144,1481],{"class":610},[605,47146,2987],{"class":610},[605,47148,47149,47151,47154,47156,47158,47160,47162,47164,47166,47168,47170,47172,47174,47176],{"class":607,"line":822},[605,47150,47127],{"class":610},[605,47152,47153],{"class":618},"colors",[605,47155,625],{"class":610},[605,47157,628],{"class":610},[605,47159,1466],{"class":610},[605,47161,5536],{"class":610},[605,47163,2525],{"class":631},[605,47165,5536],{"class":610},[605,47167,1471],{"class":610},[605,47169,5536],{"class":610},[605,47171,15229],{"class":631},[605,47173,5536],{"class":610},[605,47175,1481],{"class":610},[605,47177,2987],{"class":610},[605,47179,47180],{"class":607,"line":833},[605,47181,47182],{"class":610},"        />\n",[605,47184,47185,47187,47189],{"class":607,"line":844},[605,47186,857],{"class":610},[605,47188,2425],{"class":614},[605,47190,637],{"class":610},[605,47192,47193,47195,47197],{"class":607,"line":854},[605,47194,867],{"class":610},[605,47196,828],{"class":614},[605,47198,637],{"class":610},[605,47200,47201,47203,47205],{"class":607,"line":600},[605,47202,877],{"class":610},[605,47204,729],{"class":614},[605,47206,637],{"class":610},[605,47208,47209,47211,47213],{"class":607,"line":874},[605,47210,700],{"class":610},[605,47212,718],{"class":614},[605,47214,637],{"class":610},[472,47216,894],{"id":893},[899,47218,47219,47229],{},[902,47220,47221],{},[905,47222,47223,47225,47227],{},[908,47224,910],{"align":969},[908,47226,913],{"align":969},[908,47228,916],{},[918,47230,47231,47257,47271,47286,47299,47312,47329,47343],{},[905,47232,47233,47237,47255],{},[923,47234,47235],{"align":969},[586,47236,47130],{},[923,47238,47239,47240,47242,47243,4431,47245,47247,47248,47251,47252,1118],{"align":969},"A ",[586,47241,30031],{}," of values between ",[586,47244,937],{},[586,47246,1893],{}," representing the color positions in the gradient. ",[586,47249,47250],{},"stops.length"," should match ",[586,47253,47254],{},"color.length",[923,47256],{},[905,47258,47259,47263,47269],{},[923,47260,47261],{"align":969},[586,47262,47153],{},[923,47264,47239,47265,47268],{"align":969},[586,47266,47267],{},"THREE.ColorRepresentation[]"," representing the colors in the gradient.",[923,47270],{},[905,47272,47273,47278,47281],{},[923,47274,47275],{"align":969},[586,47276,47277],{},"attach",[923,47279,47280],{"align":969},"Where the component should be attached within its parent.",[923,47282,47283],{},[586,47284,47285],{},"'map'",[905,47287,47288,47292,47295],{},[923,47289,47290],{"align":969},[586,47291,34017],{},[923,47293,47294],{"align":969},"Height of the canvas used to draw the gradient.",[923,47296,47297],{},[586,47298,32519],{},[905,47300,47301,47305,47308],{},[923,47302,47303],{"align":969},[586,47304,34003],{},[923,47306,47307],{"align":969},"Width of the canvas used to draw the gradient.",[923,47309,47310],{},[586,47311,29832],{},[905,47313,47314,47318,47324],{},[923,47315,47316],{"align":969},[586,47317,29435],{},[923,47319,47320,47323],{"align":969},[586,47321,47322],{},"'linear' | 'radial'"," Type of gradient to draw.",[923,47325,47326],{},[586,47327,47328],{},"'linear'",[905,47330,47331,47336,47339],{},[923,47332,47333],{"align":969},[586,47334,47335],{},"innerCircleRadius",[923,47337,47338],{"align":969},"Radius of the inner circle of a radial gradient.",[923,47340,47341],{},[586,47342,937],{},[905,47344,47345,47350,47353],{},[923,47346,47347],{"align":969},[586,47348,47349],{},"outerCircleRadius",[923,47351,47352],{"align":969},"Radius of the outer circle of a radial gradient.",[923,47354,47355],{},[586,47356,47357],{},"'auto'",[1299,47359,1648],{},{"title":544,"searchDepth":545,"depth":546,"links":47361},[47362,47363],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},"Create gradient textures for materials.",{},{"title":409,"description":47364},"vYfm15fEwNZgRGLtXSYlU49KPYrI7wEBqbJQsM4JeNo",{"id":47369,"title":413,"body":47370,"description":53363,"extension":559,"links":560,"meta":53364,"navigation":562,"path":414,"seo":53365,"stem":415,"__hash__":53366},"docs/2.api/9.objects/html.md",{"type":469,"value":47371,"toc":53344},[47372,47375,47388,47393,47395,47858,47862,47869,47874,47890,47898,47903,48046,48051,48055,48079,48084,48214,48218,48242,48245,48269,48286,48306,48311,48475,48479,48484,48507,48519,48524,50418,50420,50443,50463,50504,50508,50523,50535,50571,50578,50602,50619,50624,52234,52240,52246,52251,52451,52468,52470,52830,52832,52852,52856,52937,52941,53116,53320,53323,53341],[582,47373,47374],{},"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,47376,47377,47378,4431,47380,47383,47384,47387],{},"🚀 Works seamlessly with both ",[1673,47379,6214],{},[1673,47381,47382],{},"OrthographicCamera"," — the active camera is automatically detected by the ",[586,47385,47386],{},"\u003CHtml>"," component.",[2558,47389,47390],{},[47391,47392],"objects-html",{},[472,47394,15],{"id":592},[594,47396,47399],{"className":596,"code":47397,"highlights":47398,"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,47400,47401,47421,47445,47463,47471,47475,47483,47501,47533,47541,47573,47581,47589,47597,47603,47609,47625,47652,47679,47684,47713,47722,47730,47738,47746,47754,47762,47773,47781,47797,47810,47822,47834,47846,47850],{"__ignoreMap":544},[605,47402,47403,47405,47407,47409,47411,47413,47415,47417,47419],{"class":607,"line":545},[605,47404,611],{"class":610},[605,47406,615],{"class":614},[605,47408,619],{"class":618},[605,47410,622],{"class":618},[605,47412,625],{"class":610},[605,47414,628],{"class":610},[605,47416,632],{"class":631},[605,47418,628],{"class":610},[605,47420,637],{"class":610},[605,47422,47424,47426,47428,47431,47433,47435,47437,47439,47441,47443],{"class":47423,"line":546},[607,641],[605,47425,645],{"class":644},[605,47427,648],{"class":610},[605,47429,47430],{"class":651}," Html",[605,47432,655],{"class":610},[605,47434,658],{"class":651},[605,47436,661],{"class":610},[605,47438,664],{"class":644},[605,47440,667],{"class":610},[605,47442,670],{"class":631},[605,47444,673],{"class":610},[605,47446,47447,47449,47451,47453,47455,47457,47459,47461],{"class":607,"line":676},[605,47448,645],{"class":644},[605,47450,648],{"class":610},[605,47452,683],{"class":651},[605,47454,661],{"class":610},[605,47456,664],{"class":644},[605,47458,667],{"class":610},[605,47460,692],{"class":631},[605,47462,673],{"class":610},[605,47464,47465,47467,47469],{"class":607,"line":697},[605,47466,700],{"class":610},[605,47468,615],{"class":614},[605,47470,637],{"class":610},[605,47472,47473],{"class":607,"line":707},[605,47474,710],{"emptyLinePlaceholder":562},[605,47476,47477,47479,47481],{"class":607,"line":713},[605,47478,611],{"class":610},[605,47480,718],{"class":614},[605,47482,637],{"class":610},[605,47484,47485,47487,47489,47491,47493,47495,47497,47499],{"class":607,"line":723},[605,47486,726],{"class":610},[605,47488,729],{"class":614},[605,47490,732],{"class":618},[605,47492,625],{"class":610},[605,47494,628],{"class":610},[605,47496,5040],{"class":631},[605,47498,628],{"class":610},[605,47500,637],{"class":610},[605,47502,47503,47505,47507,47509,47511,47513,47515,47517,47519,47521,47523,47525,47527,47529,47531],{"class":607,"line":746},[605,47504,749],{"class":610},[605,47506,752],{"class":614},[605,47508,781],{"class":610},[605,47510,1459],{"class":618},[605,47512,625],{"class":610},[605,47514,628],{"class":610},[605,47516,1466],{"class":610},[605,47518,792],{"class":791},[605,47520,1471],{"class":610},[605,47522,792],{"class":791},[605,47524,1471],{"class":610},[605,47526,2396],{"class":791},[605,47528,1481],{"class":610},[605,47530,628],{"class":610},[605,47532,755],{"class":610},[605,47534,47535,47537,47539],{"class":607,"line":758},[605,47536,749],{"class":610},[605,47538,763],{"class":614},[605,47540,755],{"class":610},[605,47542,47543,47545,47547,47549,47551,47553,47555,47557,47559,47561,47563,47565,47567,47569,47571],{"class":607,"line":768},[605,47544,749],{"class":610},[605,47546,828],{"class":614},[605,47548,781],{"class":610},[605,47550,1459],{"class":618},[605,47552,625],{"class":610},[605,47554,628],{"class":610},[605,47556,1466],{"class":610},[605,47558,1893],{"class":791},[605,47560,1471],{"class":610},[605,47562,1893],{"class":791},[605,47564,1471],{"class":610},[605,47566,1893],{"class":791},[605,47568,1481],{"class":610},[605,47570,628],{"class":610},[605,47572,637],{"class":610},[605,47574,47575,47577,47579],{"class":607,"line":773},[605,47576,825],{"class":610},[605,47578,839],{"class":614},[605,47580,755],{"class":610},[605,47582,47583,47585,47587],{"class":607,"line":799},[605,47584,825],{"class":610},[605,47586,849],{"class":614},[605,47588,755],{"class":610},[605,47590,47592,47594],{"class":47591,"line":599},[607,641],[605,47593,825],{"class":610},[605,47595,47596],{"class":614},"Html\n",[605,47598,47600],{"class":47599,"line":822},[607,641],[605,47601,47602],{"class":618},"        center\n",[605,47604,47606],{"class":47605,"line":833},[607,641],[605,47607,47608],{"class":618},"        transform\n",[605,47610,47612,47614,47617,47619,47621,47623],{"class":47611,"line":844},[607,641],[605,47613,2993],{"class":610},[605,47615,47616],{"class":618},"distance-factor",[605,47618,625],{"class":610},[605,47620,628],{"class":610},[605,47622,3490],{"class":791},[605,47624,2987],{"class":610},[605,47626,47628,47630,47632,47634,47636,47638,47640,47642,47644,47646,47648,47650],{"class":47627,"line":854},[607,641],[605,47629,2993],{"class":610},[605,47631,1459],{"class":618},[605,47633,625],{"class":610},[605,47635,628],{"class":610},[605,47637,1466],{"class":610},[605,47639,937],{"class":791},[605,47641,1471],{"class":610},[605,47643,937],{"class":791},[605,47645,1471],{"class":610},[605,47647,2146],{"class":791},[605,47649,1481],{"class":610},[605,47651,2987],{"class":610},[605,47653,47655,47657,47659,47661,47663,47665,47667,47669,47671,47673,47675,47677],{"class":47654,"line":600},[607,641],[605,47656,2993],{"class":610},[605,47658,784],{"class":618},[605,47660,625],{"class":610},[605,47662,628],{"class":610},[605,47664,1466],{"class":610},[605,47666,4645],{"class":791},[605,47668,1471],{"class":610},[605,47670,4645],{"class":791},[605,47672,1471],{"class":610},[605,47674,4645],{"class":791},[605,47676,1481],{"class":610},[605,47678,2987],{"class":610},[605,47680,47681],{"class":607,"line":874},[605,47682,47683],{"class":610},"      >\n",[605,47685,47686,47688,47691,47693,47695,47697,47700,47702,47704,47707,47709,47711],{"class":607,"line":884},[605,47687,836],{"class":610},[605,47689,47690],{"class":614},"h1",[605,47692,18673],{"class":618},[605,47694,625],{"class":610},[605,47696,628],{"class":610},[605,47698,47699],{"class":631},"title",[605,47701,628],{"class":610},[605,47703,11720],{"class":610},[605,47705,47706],{"class":651},"I'm a Box 📦",[605,47708,700],{"class":610},[605,47710,47690],{"class":614},[605,47712,637],{"class":610},[605,47714,47715,47717,47720],{"class":607,"line":2952},[605,47716,857],{"class":610},[605,47718,47719],{"class":614},"Html",[605,47721,637],{"class":610},[605,47723,47724,47726,47728],{"class":607,"line":2960},[605,47725,867],{"class":610},[605,47727,828],{"class":614},[605,47729,637],{"class":610},[605,47731,47732,47734,47736],{"class":607,"line":2990},[605,47733,749],{"class":610},[605,47735,3067],{"class":614},[605,47737,755],{"class":610},[605,47739,47740,47742,47744],{"class":607,"line":3007},[605,47741,749],{"class":610},[605,47743,3518],{"class":614},[605,47745,755],{"class":610},[605,47747,47748,47750,47752],{"class":607,"line":3022},[605,47749,877],{"class":610},[605,47751,729],{"class":614},[605,47753,637],{"class":610},[605,47755,47756,47758,47760],{"class":607,"line":3047},[605,47757,700],{"class":610},[605,47759,718],{"class":614},[605,47761,637],{"class":610},[605,47763,47764,47766,47768,47771],{"class":607,"line":2591},[605,47765,611],{"class":610},[605,47767,1299],{"class":614},[605,47769,47770],{"class":618}," scoped",[605,47772,637],{"class":610},[605,47774,47775,47777,47779],{"class":607,"line":3062},[605,47776,1118],{"class":610},[605,47778,47699],{"class":1172},[605,47780,1176],{"class":610},[605,47782,47783,47787,47789,47792,47795],{"class":607,"line":3092},[605,47784,47786],{"class":47785},"sqsOY","  background-color",[605,47788,1190],{"class":610},[605,47790,47791],{"class":610}," #",[605,47793,47794],{"class":651},"1e1e1e",[605,47796,3329],{"class":610},[605,47798,47799,47801,47803,47805,47808],{"class":607,"line":3101},[605,47800,35150],{"class":47785},[605,47802,1190],{"class":610},[605,47804,47791],{"class":610},[605,47806,47807],{"class":651},"ffffff",[605,47809,3329],{"class":610},[605,47811,47812,47815,47817,47820],{"class":607,"line":4207},[605,47813,47814],{"class":47785},"  font-size",[605,47816,1190],{"class":610},[605,47818,47819],{"class":791}," 0.75rem",[605,47821,3329],{"class":610},[605,47823,47824,47827,47829,47832],{"class":607,"line":4212},[605,47825,47826],{"class":47785},"  padding",[605,47828,1190],{"class":610},[605,47830,47831],{"class":791}," 0.25rem",[605,47833,3329],{"class":610},[605,47835,47836,47839,47841,47844],{"class":607,"line":4235},[605,47837,47838],{"class":47785},"  border-radius",[605,47840,1190],{"class":610},[605,47842,47843],{"class":791}," 0.375rem",[605,47845,3329],{"class":610},[605,47847,47848],{"class":607,"line":4244},[605,47849,1297],{"class":610},[605,47851,47852,47854,47856],{"class":607,"line":4253},[605,47853,700],{"class":610},[605,47855,1299],{"class":614},[605,47857,637],{"class":610},[472,47859,47861],{"id":47860},"occlusion","Occlusion",[582,47863,47864,47865,47868],{},"By default, the HTML content will be visible through other objects in the scene. You can use the ",[586,47866,47867],{},"occlude"," prop to make the HTML content occlude other objects in the scene.",[582,47870,47871,47872,34398],{},"Html can be hidden behind one or more objects in your scene using the ",[586,47873,47867],{},[594,47875,47877],{"className":596,"code":47876,"language":601,"meta":544,"style":544},"\u003CHtml occlude>\n",[586,47878,47879],{"__ignoreMap":544},[605,47880,47881,47883,47885,47888],{"class":607,"line":545},[605,47882,611],{"class":610},[605,47884,47719],{"class":614},[605,47886,47887],{"class":618}," occlude",[605,47889,637],{"class":610},[582,47891,930,47892,47894,47895,47897],{},[586,47893,47867],{},", then ",[586,47896,47386],{}," will be hidden by any objects that pass in front of its position.",[2558,47899,47900],{},[47901,47902],"objects-html-occlusion",{},[47904,47905,47906,47907,47911],"details",{},"\n  ",[47908,47909,47910],"summary",{},"Demo code",[594,47912,47914],{"className":38889,"code":47913,"language":38891,"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,47915,47916,47936,47944,47952,48002,48030,48038],{"__ignoreMap":544},[605,47917,47918,47920,47922,47925,47927,47929,47932,47934],{"class":607,"line":545},[605,47919,611],{"class":610},[605,47921,828],{"class":614},[605,47923,47924],{"class":618}," :position",[605,47926,625],{"class":610},[605,47928,628],{"class":610},[605,47930,47931],{"class":631},"[0, 1, -2]",[605,47933,628],{"class":610},[605,47935,637],{"class":610},[605,47937,47938,47940,47942],{"class":607,"line":546},[605,47939,726],{"class":610},[605,47941,839],{"class":614},[605,47943,755],{"class":610},[605,47945,47946,47948,47950],{"class":607,"line":676},[605,47947,726],{"class":610},[605,47949,849],{"class":614},[605,47951,755],{"class":610},[605,47953,47954,47956,47958,47961,47964,47966,47969,47971,47973,47975,47977,47979,47981,47983,47986,47988,47991,47993,47995,47998,48000],{"class":607,"line":697},[605,47955,726],{"class":610},[605,47957,38891],{"class":614},[605,47959,47960],{"class":618}," center",[605,47962,47963],{"class":618}," transform",[605,47965,47887],{"class":618},[605,47967,47968],{"class":618}," :distance-factor",[605,47970,625],{"class":610},[605,47972,628],{"class":610},[605,47974,3490],{"class":631},[605,47976,628],{"class":610},[605,47978,47924],{"class":618},[605,47980,625],{"class":610},[605,47982,628],{"class":610},[605,47984,47985],{"class":631},"[0, 0, 2]",[605,47987,628],{"class":610},[605,47989,47990],{"class":618}," :z-index-range",[605,47992,625],{"class":610},[605,47994,628],{"class":610},[605,47996,47997],{"class":631},"[28, 0]",[605,47999,628],{"class":610},[605,48001,637],{"class":610},[605,48003,48004,48006,48008,48010,48012,48014,48017,48019,48021,48024,48026,48028],{"class":607,"line":707},[605,48005,749],{"class":610},[605,48007,47690],{"class":614},[605,48009,18673],{"class":618},[605,48011,625],{"class":610},[605,48013,628],{"class":610},[605,48015,48016],{"class":631},"bg-white dark:bg-dark text-xs p-1 rounded",[605,48018,628],{"class":610},[605,48020,11720],{"class":610},[605,48022,48023],{"class":651},"Move camera",[605,48025,700],{"class":610},[605,48027,47690],{"class":614},[605,48029,637],{"class":610},[605,48031,48032,48034,48036],{"class":607,"line":713},[605,48033,877],{"class":610},[605,48035,38891],{"class":614},[605,48037,637],{"class":610},[605,48039,48040,48042,48044],{"class":607,"line":723},[605,48041,700],{"class":610},[605,48043,828],{"class":614},[605,48045,637],{"class":610},[582,48047,48048,48049,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,48050,47867],{},[7473,48052,48054],{"id":48053},"single-occluder","Single occluder",[594,48056,48058],{"className":596,"code":48057,"language":601,"meta":544,"style":544},"\u003CHtml occlude=\"[mesh]\">\n",[586,48059,48060],{"__ignoreMap":544},[605,48061,48062,48064,48066,48068,48070,48072,48075,48077],{"class":607,"line":545},[605,48063,611],{"class":610},[605,48065,47719],{"class":614},[605,48067,47887],{"class":618},[605,48069,625],{"class":610},[605,48071,628],{"class":610},[605,48073,48074],{"class":631},"[mesh]",[605,48076,628],{"class":610},[605,48078,637],{"class":610},[2558,48080,48081],{},[48082,48083],"objects-html-single-occluder",{},[47904,48085,47906,48086,48088],{},[47908,48087,47910],{},[594,48089,48091],{"className":38889,"code":48090,"language":38891,"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,48092,48093,48112,48120,48128,48172,48198,48206],{"__ignoreMap":544},[605,48094,48095,48097,48099,48101,48103,48105,48108,48110],{"class":607,"line":545},[605,48096,611],{"class":610},[605,48098,828],{"class":614},[605,48100,47924],{"class":618},[605,48102,625],{"class":610},[605,48104,628],{"class":610},[605,48106,48107],{"class":631},"[0, 1, 0]",[605,48109,628],{"class":610},[605,48111,637],{"class":610},[605,48113,48114,48116,48118],{"class":607,"line":546},[605,48115,726],{"class":610},[605,48117,839],{"class":614},[605,48119,755],{"class":610},[605,48121,48122,48124,48126],{"class":607,"line":676},[605,48123,726],{"class":610},[605,48125,849],{"class":614},[605,48127,755],{"class":610},[605,48129,48130,48132,48134,48136,48138,48141,48143,48145,48148,48150,48152,48154,48156,48158,48160,48162,48164,48166,48168,48170],{"class":607,"line":697},[605,48131,726],{"class":610},[605,48133,38891],{"class":614},[605,48135,47960],{"class":618},[605,48137,47963],{"class":618},[605,48139,48140],{"class":618}," :occlude",[605,48142,625],{"class":610},[605,48144,628],{"class":610},[605,48146,48147],{"class":631},"[sphereRef]",[605,48149,628],{"class":610},[605,48151,47968],{"class":618},[605,48153,625],{"class":610},[605,48155,628],{"class":610},[605,48157,3490],{"class":631},[605,48159,628],{"class":610},[605,48161,47990],{"class":618},[605,48163,625],{"class":610},[605,48165,628],{"class":610},[605,48167,47997],{"class":631},[605,48169,628],{"class":610},[605,48171,637],{"class":610},[605,48173,48174,48176,48178,48180,48182,48184,48186,48188,48190,48192,48194,48196],{"class":607,"line":707},[605,48175,749],{"class":610},[605,48177,47690],{"class":614},[605,48179,18673],{"class":618},[605,48181,625],{"class":610},[605,48183,628],{"class":610},[605,48185,48016],{"class":631},[605,48187,628],{"class":610},[605,48189,11720],{"class":610},[605,48191,48023],{"class":651},[605,48193,700],{"class":610},[605,48195,47690],{"class":614},[605,48197,637],{"class":610},[605,48199,48200,48202,48204],{"class":607,"line":713},[605,48201,877],{"class":610},[605,48203,38891],{"class":614},[605,48205,637],{"class":610},[605,48207,48208,48210,48212],{"class":607,"line":723},[605,48209,700],{"class":610},[605,48211,828],{"class":614},[605,48213,637],{"class":610},[7473,48215,48217],{"id":48216},"multiple-occluders","Multiple occluders",[594,48219,48221],{"className":596,"code":48220,"language":601,"meta":544,"style":544},"\u003CHtml occlude=\"[mesh1, mesh2, mesh3, ...]\" />\n",[586,48222,48223],{"__ignoreMap":544},[605,48224,48225,48227,48229,48231,48233,48235,48238,48240],{"class":607,"line":545},[605,48226,611],{"class":610},[605,48228,47719],{"class":614},[605,48230,47887],{"class":618},[605,48232,625],{"class":610},[605,48234,628],{"class":610},[605,48236,48237],{"class":631},"[mesh1, mesh2, mesh3, ...]",[605,48239,628],{"class":610},[605,48241,755],{"class":610},[582,48243,48244],{},"OR",[594,48246,48248],{"className":596,"code":48247,"language":601,"meta":544,"style":544},"\u003CHtml occlude=\"meshesArray\" />\n",[586,48249,48250],{"__ignoreMap":544},[605,48251,48252,48254,48256,48258,48260,48262,48265,48267],{"class":607,"line":545},[605,48253,611],{"class":610},[605,48255,47719],{"class":614},[605,48257,47887],{"class":618},[605,48259,625],{"class":610},[605,48261,628],{"class":610},[605,48263,48264],{"class":631},"meshesArray",[605,48266,628],{"class":610},[605,48268,755],{"class":610},[582,48270,48271,48272,48275,48276,48280,48281,48285],{},"In the demo below, a ",[586,48273,48274],{},"v-for"," loop generates multiple spheres around the cube.\nAll resulting ",[1673,48277,48278],{},[586,48279,5299],{}," instances are collected into an array and passed to the ",[1673,48282,48283],{},[586,48284,47867],{}," prop, allowing each sphere to occlude the HTML content.",[582,48287,48288,48289,48294,48295,48298,48299,4431,48302,48305],{},"This demo also uses the ",[1673,48290,48291],{},[586,48292,48293],{},"on-occlude"," event, which is triggered whenever the occlusion state changes.\nHere, the event updates a ",[1673,48296,48297],{},"reactive value"," to control element styles — for example, toggling between ",[1677,48300,48301],{},"light",[1677,48303,48304],{},"dark"," themes.",[2558,48307,48308],{},[48309,48310],"objects-html-occlude-complex-demo",{},[47904,48312,47906,48313,48315],{},[47908,48314,47910],{},[594,48316,48318],{"className":38889,"code":48317,"language":38891,"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,48319,48320,48338,48346,48354,48361,48375,48389,48402,48415,48429,48433,48459,48467],{"__ignoreMap":544},[605,48321,48322,48324,48326,48328,48330,48332,48334,48336],{"class":607,"line":545},[605,48323,611],{"class":610},[605,48325,828],{"class":614},[605,48327,47924],{"class":618},[605,48329,625],{"class":610},[605,48331,628],{"class":610},[605,48333,48107],{"class":631},[605,48335,628],{"class":610},[605,48337,637],{"class":610},[605,48339,48340,48342,48344],{"class":607,"line":546},[605,48341,726],{"class":610},[605,48343,839],{"class":614},[605,48345,755],{"class":610},[605,48347,48348,48350,48352],{"class":607,"line":676},[605,48349,726],{"class":610},[605,48351,849],{"class":614},[605,48353,755],{"class":610},[605,48355,48356,48358],{"class":607,"line":697},[605,48357,726],{"class":610},[605,48359,48360],{"class":614},"html\n",[605,48362,48363,48366,48368,48370,48373],{"class":607,"line":707},[605,48364,48365],{"class":618},"    v-bind",[605,48367,625],{"class":610},[605,48369,628],{"class":610},[605,48371,48372],{"class":631},"htmlProps",[605,48374,2987],{"class":610},[605,48376,48377,48380,48382,48384,48387],{"class":607,"line":713},[605,48378,48379],{"class":618},"    :occlude",[605,48381,625],{"class":610},[605,48383,628],{"class":610},[605,48385,48386],{"class":631},"occluderRefs",[605,48388,2987],{"class":610},[605,48390,48391,48394,48396,48398,48400],{"class":607,"line":723},[605,48392,48393],{"class":618},"    :distance-factor",[605,48395,625],{"class":610},[605,48397,628],{"class":610},[605,48399,3490],{"class":631},[605,48401,2987],{"class":610},[605,48403,48404,48407,48409,48411,48413],{"class":607,"line":746},[605,48405,48406],{"class":618},"    :z-index-range",[605,48408,625],{"class":610},[605,48410,628],{"class":610},[605,48412,47997],{"class":631},[605,48414,2987],{"class":610},[605,48416,48417,48420,48422,48424,48427],{"class":607,"line":758},[605,48418,48419],{"class":618},"    @on-occlude",[605,48421,625],{"class":610},[605,48423,628],{"class":610},[605,48425,48426],{"class":631},"(event: boolean) => isOccluded = event",[605,48428,2987],{"class":610},[605,48430,48431],{"class":607,"line":768},[605,48432,13858],{"class":610},[605,48434,48435,48437,48439,48441,48443,48445,48447,48449,48451,48453,48455,48457],{"class":607,"line":773},[605,48436,749],{"class":610},[605,48438,47690],{"class":614},[605,48440,18673],{"class":618},[605,48442,625],{"class":610},[605,48444,628],{"class":610},[605,48446,48016],{"class":631},[605,48448,628],{"class":610},[605,48450,11720],{"class":610},[605,48452,48023],{"class":651},[605,48454,700],{"class":610},[605,48456,47690],{"class":614},[605,48458,637],{"class":610},[605,48460,48461,48463,48465],{"class":607,"line":799},[605,48462,877],{"class":610},[605,48464,38891],{"class":614},[605,48466,637],{"class":610},[605,48468,48469,48471,48473],{"class":607,"line":599},[605,48470,700],{"class":610},[605,48472,828],{"class":614},[605,48474,637],{"class":610},[7473,48476,48478],{"id":48477},"blending-occlusion","Blending Occlusion",[582,48480,48481,48483],{},[586,48482,47386],{}," 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,48485,48487],{"className":596,"code":48486,"language":601,"meta":544,"style":544},"\u003CHtml occlude=\"blending\">\n",[586,48488,48489],{"__ignoreMap":544},[605,48490,48491,48493,48495,48497,48499,48501,48503,48505],{"class":607,"line":545},[605,48492,611],{"class":610},[605,48494,47719],{"class":614},[605,48496,47887],{"class":618},[605,48498,625],{"class":610},[605,48500,628],{"class":610},[605,48502,43285],{"class":631},[605,48504,628],{"class":610},[605,48506,637],{"class":610},[582,48508,2253,48509,44676,48512,48515,48516,1118],{},[1673,48510,48511],{},"demo below ⬇️",[1677,48513,48514],{},"(left black example)"," shows a ",[1673,48517,48518],{},"basic usage example",[2558,48520,48521],{},[48522,48523],"objects-html-occlude-blending-demo",{},[47904,48525,47906,48526,48528],{},[47908,48527,47910],{},[594,48529,48567],{"className":596,"code":48530,"highlights":48531,"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,48532,48533,15098,15119,15177,15236,15256,15288,15297,15306,48532,48533,48534,48535,48536,48537,48538,48539,48540,48541,48542,48543,48544,48545,48546,48547,48548,48549,48550,48551,48552,48553,48554,48555,48556,48557,48558,48559,48560,48561,48562,48563,48564,48565,48566],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,48568,48569,48589,48616,48634,48652,48675,48679,48690,48705,48716,48727,48738,48742,48746,48763,48767,48778,48782,48797,48820,48824,48828,48842,48864,48868,48872,48886,48912,48939,48943,48947,48951,48980,48984,49006,49021,49033,49045,49057,49064,49072,49076,49084,49103,49122,49154,49162,49166,49173,49196,49215,49229,49245,49259,49282,49286,49343,49386,49394,49403,49411,49415,49422,49427,49432,49446,49474,49499,49504,49524,49536,49554,49563,49572,49577,49584,49589,49594,49607,49635,49651,49674,49679,49699,49737,49746,49755,49760,49767,49781,49786,49791,49804,49832,49848,49854,49877,49882,49937,49946,49951,49958,49963,49968,49981,50009,50032,50037,50057,50081,50102,50111,50120,50125,50132,50150,50169,50186,50213,50228,50234,50239,50244,50267,50288,50297,50306,50315,50320,50331,50341,50353,50364,50377,50390,50404,50409],{"__ignoreMap":544},[605,48570,48571,48573,48575,48577,48579,48581,48583,48585,48587],{"class":607,"line":545},[605,48572,611],{"class":610},[605,48574,615],{"class":614},[605,48576,619],{"class":618},[605,48578,622],{"class":618},[605,48580,625],{"class":610},[605,48582,628],{"class":610},[605,48584,632],{"class":631},[605,48586,628],{"class":610},[605,48588,637],{"class":610},[605,48590,48592,48594,48596,48598,48600,48602,48604,48606,48608,48610,48612,48614],{"class":48591,"line":546},[607,641],[605,48593,645],{"class":644},[605,48595,648],{"class":610},[605,48597,47430],{"class":651},[605,48599,655],{"class":610},[605,48601,3339],{"class":651},[605,48603,655],{"class":610},[605,48605,658],{"class":651},[605,48607,661],{"class":610},[605,48609,664],{"class":644},[605,48611,667],{"class":610},[605,48613,670],{"class":631},[605,48615,673],{"class":610},[605,48617,48618,48620,48622,48624,48626,48628,48630,48632],{"class":607,"line":676},[605,48619,645],{"class":644},[605,48621,648],{"class":610},[605,48623,683],{"class":651},[605,48625,661],{"class":610},[605,48627,664],{"class":644},[605,48629,667],{"class":610},[605,48631,692],{"class":631},[605,48633,673],{"class":610},[605,48635,48636,48638,48640,48642,48644,48646,48648,48650],{"class":607,"line":697},[605,48637,645],{"class":644},[605,48639,648],{"class":610},[605,48641,9716],{"class":651},[605,48643,661],{"class":610},[605,48645,664],{"class":644},[605,48647,667],{"class":610},[605,48649,601],{"class":631},[605,48651,673],{"class":610},[605,48653,48654,48656,48658,48661,48663,48665,48667,48669,48671,48673],{"class":607,"line":707},[605,48655,645],{"class":644},[605,48657,648],{"class":610},[605,48659,48660],{"class":651}," CircleGeometry",[605,48662,655],{"class":610},[605,48664,14317],{"class":651},[605,48666,661],{"class":610},[605,48668,664],{"class":644},[605,48670,667],{"class":610},[605,48672,2678],{"class":631},[605,48674,673],{"class":610},[605,48676,48677],{"class":607,"line":713},[605,48678,710],{"emptyLinePlaceholder":562},[605,48680,48681,48683,48686,48688],{"class":607,"line":723},[605,48682,2689],{"class":618},[605,48684,48685],{"class":651}," gl ",[605,48687,625],{"class":610},[605,48689,1176],{"class":610},[605,48691,48692,48695,48697,48699,48701,48703],{"class":607,"line":746},[605,48693,48694],{"class":614},"  clearColor",[605,48696,1190],{"class":610},[605,48698,667],{"class":610},[605,48700,5040],{"class":631},[605,48702,5536],{"class":610},[605,48704,14031],{"class":610},[605,48706,48707,48710,48712,48714],{"class":607,"line":758},[605,48708,48709],{"class":614},"  clearAlpha",[605,48711,1190],{"class":610},[605,48713,22969],{"class":791},[605,48715,14031],{"class":610},[605,48717,48718,48721,48723,48725],{"class":607,"line":768},[605,48719,48720],{"class":614},"  shadows",[605,48722,1190],{"class":610},[605,48724,10938],{"class":3870},[605,48726,14031],{"class":610},[605,48728,48729,48732,48734,48736],{"class":607,"line":773},[605,48730,48731],{"class":614},"  alpha",[605,48733,1190],{"class":610},[605,48735,10938],{"class":3870},[605,48737,14031],{"class":610},[605,48739,48740],{"class":607,"line":799},[605,48741,1297],{"class":610},[605,48743,48744],{"class":607,"line":599},[605,48745,710],{"emptyLinePlaceholder":562},[605,48747,48748,48750,48753,48755,48757,48759,48761],{"class":607,"line":822},[605,48749,2689],{"class":618},[605,48751,48752],{"class":651}," targetDirectionLightRef ",[605,48754,625],{"class":610},[605,48756,9716],{"class":2800},[605,48758,2970],{"class":651},[605,48760,3152],{"class":610},[605,48762,5539],{"class":651},[605,48764,48765],{"class":607,"line":833},[605,48766,710],{"emptyLinePlaceholder":562},[605,48768,48769,48771,48774,48776],{"class":607,"line":844},[605,48770,2689],{"class":618},[605,48772,48773],{"class":651}," geometries ",[605,48775,625],{"class":610},[605,48777,14018],{"class":651},[605,48779,48780],{"class":607,"line":854},[605,48781,30928],{"class":610},[605,48783,48784,48787,48789,48791,48793,48795],{"class":607,"line":600},[605,48785,48786],{"class":614},"    component",[605,48788,1190],{"class":610},[605,48790,667],{"class":610},[605,48792,839],{"class":631},[605,48794,5536],{"class":610},[605,48796,14031],{"class":610},[605,48798,48799,48802,48804,48806,48808,48810,48812,48814,48816,48818],{"class":607,"line":874},[605,48800,48801],{"class":614},"    args",[605,48803,1190],{"class":610},[605,48805,26205],{"class":651},[605,48807,1893],{"class":791},[605,48809,655],{"class":610},[605,48811,22969],{"class":791},[605,48813,655],{"class":610},[605,48815,22969],{"class":791},[605,48817,1481],{"class":651},[605,48819,14031],{"class":610},[605,48821,48822],{"class":607,"line":884},[605,48823,17650],{"class":610},[605,48825,48826],{"class":607,"line":2952},[605,48827,30928],{"class":610},[605,48829,48830,48832,48834,48836,48838,48840],{"class":607,"line":2960},[605,48831,48786],{"class":614},[605,48833,1190],{"class":610},[605,48835,667],{"class":610},[605,48837,4735],{"class":631},[605,48839,5536],{"class":610},[605,48841,14031],{"class":610},[605,48843,48844,48846,48848,48850,48852,48854,48856,48858,48860,48862],{"class":607,"line":2990},[605,48845,48801],{"class":614},[605,48847,1190],{"class":610},[605,48849,26205],{"class":651},[605,48851,33784],{"class":791},[605,48853,655],{"class":610},[605,48855,23726],{"class":791},[605,48857,655],{"class":610},[605,48859,23726],{"class":791},[605,48861,1481],{"class":651},[605,48863,14031],{"class":610},[605,48865,48866],{"class":607,"line":3007},[605,48867,17650],{"class":610},[605,48869,48870],{"class":607,"line":3022},[605,48871,30928],{"class":610},[605,48873,48874,48876,48878,48880,48882,48884],{"class":607,"line":3047},[605,48875,48786],{"class":614},[605,48877,1190],{"class":610},[605,48879,667],{"class":610},[605,48881,5127],{"class":631},[605,48883,5536],{"class":610},[605,48885,14031],{"class":610},[605,48887,48888,48890,48892,48894,48896,48898,48900,48902,48904,48906,48908,48910],{"class":607,"line":2591},[605,48889,48801],{"class":614},[605,48891,1190],{"class":610},[605,48893,26205],{"class":651},[605,48895,1513],{"class":791},[605,48897,655],{"class":610},[605,48899,28659],{"class":791},[605,48901,655],{"class":610},[605,48903,28538],{"class":791},[605,48905,655],{"class":610},[605,48907,2724],{"class":791},[605,48909,1481],{"class":651},[605,48911,14031],{"class":610},[605,48913,48914,48917,48919,48921,48924,48926,48928,48930,48933,48935,48937],{"class":607,"line":3062},[605,48915,48916],{"class":614},"    bind",[605,48918,1190],{"class":610},[605,48920,648],{"class":610},[605,48922,48923],{"class":614}," castShadow",[605,48925,1190],{"class":610},[605,48927,10938],{"class":3870},[605,48929,655],{"class":610},[605,48931,48932],{"class":614}," receiveShadow",[605,48934,1190],{"class":610},[605,48936,10938],{"class":3870},[605,48938,19887],{"class":610},[605,48940,48941],{"class":607,"line":3092},[605,48942,17650],{"class":610},[605,48944,48945],{"class":607,"line":3101},[605,48946,14056],{"class":651},[605,48948,48949],{"class":607,"line":4207},[605,48950,710],{"emptyLinePlaceholder":562},[605,48952,48954,48956,48959,48961,48963,48965,48967,48969,48971,48974,48976,48978],{"class":48953,"line":4212},[607,641],[605,48955,2689],{"class":618},[605,48957,48958],{"class":651}," customGeometry ",[605,48960,625],{"class":610},[605,48962,9716],{"class":2800},[605,48964,2970],{"class":651},[605,48966,28919],{"class":610},[605,48968,48660],{"class":2800},[605,48970,2970],{"class":651},[605,48972,48973],{"class":791},"1.25",[605,48975,655],{"class":610},[605,48977,23726],{"class":791},[605,48979,29025],{"class":651},[605,48981,48982],{"class":607,"line":4235},[605,48983,710],{"emptyLinePlaceholder":562},[605,48985,48987,48989,48992,48994,48996,48998,49000,49002,49004],{"class":48986,"line":4244},[607,641],[605,48988,2689],{"class":618},[605,48990,48991],{"class":651}," customMaterial ",[605,48993,625],{"class":610},[605,48995,9716],{"class":2800},[605,48997,2970],{"class":651},[605,48999,28919],{"class":610},[605,49001,14317],{"class":2800},[605,49003,2970],{"class":651},[605,49005,2751],{"class":610},[605,49007,49009,49011,49013,49015,49017,49019],{"class":49008,"line":4253},[607,641],[605,49010,35150],{"class":614},[605,49012,1190],{"class":610},[605,49014,667],{"class":610},[605,49016,29784],{"class":631},[605,49018,5536],{"class":610},[605,49020,14031],{"class":610},[605,49022,49024,49027,49029,49031],{"class":49023,"line":4262},[607,641],[605,49025,49026],{"class":614},"  side",[605,49028,1190],{"class":610},[605,49030,24579],{"class":791},[605,49032,14031],{"class":610},[605,49034,49036,49039,49041,49043],{"class":49035,"line":4271},[607,641],[605,49037,49038],{"class":614},"  opacity",[605,49040,1190],{"class":610},[605,49042,22969],{"class":791},[605,49044,14031],{"class":610},[605,49046,49048,49051,49053,49055],{"class":49047,"line":14784},[607,641],[605,49049,49050],{"class":614},"  transparent",[605,49052,1190],{"class":610},[605,49054,10938],{"class":3870},[605,49056,14031],{"class":610},[605,49058,49060,49062],{"class":49059,"line":14799},[607,641],[605,49061,5544],{"class":610},[605,49063,29025],{"class":651},[605,49065,49066,49068,49070],{"class":607,"line":14814},[605,49067,700],{"class":610},[605,49069,615],{"class":614},[605,49071,637],{"class":610},[605,49073,49074],{"class":607,"line":14819},[605,49075,710],{"emptyLinePlaceholder":562},[605,49077,49078,49080,49082],{"class":607,"line":14826},[605,49079,611],{"class":610},[605,49081,718],{"class":614},[605,49083,637],{"class":610},[605,49085,49086,49088,49090,49092,49094,49096,49099,49101],{"class":607,"line":14831},[605,49087,726],{"class":610},[605,49089,18670],{"class":614},[605,49091,18673],{"class":618},[605,49093,625],{"class":610},[605,49095,628],{"class":610},[605,49097,49098],{"class":631},"html-demo-wrapper aspect-video",[605,49100,628],{"class":610},[605,49102,637],{"class":610},[605,49104,49105,49107,49109,49111,49113,49115,49118,49120],{"class":607,"line":14837},[605,49106,749],{"class":610},[605,49108,729],{"class":614},[605,49110,4111],{"class":618},[605,49112,625],{"class":610},[605,49114,628],{"class":610},[605,49116,49117],{"class":651},"gl",[605,49119,628],{"class":610},[605,49121,637],{"class":610},[605,49123,49124,49126,49128,49130,49132,49134,49136,49138,49140,49142,49144,49146,49148,49150,49152],{"class":607,"line":14858},[605,49125,825],{"class":610},[605,49127,752],{"class":614},[605,49129,781],{"class":610},[605,49131,1459],{"class":618},[605,49133,625],{"class":610},[605,49135,628],{"class":610},[605,49137,1466],{"class":610},[605,49139,937],{"class":791},[605,49141,1471],{"class":610},[605,49143,9877],{"class":791},[605,49145,1471],{"class":610},[605,49147,4685],{"class":791},[605,49149,1481],{"class":610},[605,49151,628],{"class":610},[605,49153,755],{"class":610},[605,49155,49156,49158,49160],{"class":607,"line":14864},[605,49157,825],{"class":610},[605,49159,763],{"class":614},[605,49161,755],{"class":610},[605,49163,49164],{"class":607,"line":14871},[605,49165,710],{"emptyLinePlaceholder":562},[605,49167,49168,49170],{"class":607,"line":14876},[605,49169,825],{"class":610},[605,49171,49172],{"class":614},"Levioso\n",[605,49174,49175,49177,49179,49181,49183,49185,49187,49189,49191,49194],{"class":607,"line":14897},[605,49176,2963],{"class":644},[605,49178,625],{"class":610},[605,49180,628],{"class":610},[605,49182,2970],{"class":610},[605,49184,15748],{"class":651},[605,49186,1471],{"class":610},[605,49188,2978],{"class":651},[605,49190,2981],{"class":610},[605,49192,49193],{"class":651},"geometries",[605,49195,2987],{"class":610},[605,49197,49198,49200,49202,49204,49206,49209,49211,49213],{"class":607,"line":14910},[605,49199,2993],{"class":610},[605,49201,2996],{"class":618},[605,49203,625],{"class":610},[605,49205,15730],{"class":610},[605,49207,49208],{"class":631},"html-occlude-blending-demo-",[605,49210,15736],{"class":610},[605,49212,2978],{"class":651},[605,49214,15741],{"class":610},[605,49216,49217,49219,49221,49223,49225,49227],{"class":607,"line":14936},[605,49218,2993],{"class":610},[605,49220,3483],{"class":618},[605,49222,625],{"class":610},[605,49224,628],{"class":610},[605,49226,4160],{"class":791},[605,49228,2987],{"class":610},[605,49230,49231,49233,49236,49238,49240,49243],{"class":607,"line":14941},[605,49232,2993],{"class":610},[605,49234,49235],{"class":618},"float-factor",[605,49237,625],{"class":610},[605,49239,628],{"class":610},[605,49241,49242],{"class":791},"3.5",[605,49244,2987],{"class":610},[605,49246,49247,49249,49251,49253,49255,49257],{"class":607,"line":14948},[605,49248,2993],{"class":610},[605,49250,33793],{"class":618},[605,49252,625],{"class":610},[605,49254,628],{"class":610},[605,49256,1893],{"class":791},[605,49258,2987],{"class":610},[605,49260,49261,49263,49265,49267,49269,49271,49274,49276,49278,49280],{"class":607,"line":14957},[605,49262,2993],{"class":610},[605,49264,3690],{"class":618},[605,49266,625],{"class":610},[605,49268,628],{"class":610},[605,49270,15194],{"class":610},[605,49272,49273],{"class":791},"0.35",[605,49275,1471],{"class":610},[605,49277,49273],{"class":791},[605,49279,1481],{"class":610},[605,49281,2987],{"class":610},[605,49283,49284],{"class":607,"line":14962},[605,49285,47683],{"class":610},[605,49287,49288,49290,49292,49294,49296,49298,49300,49302,49304,49307,49309,49312,49314,49316,49318,49320,49322,49324,49326,49328,49330,49332,49334,49336,49339,49341],{"class":607,"line":14971},[605,49289,836],{"class":610},[605,49291,828],{"class":614},[605,49293,781],{"class":610},[605,49295,1459],{"class":618},[605,49297,625],{"class":610},[605,49299,628],{"class":610},[605,49301,1466],{"class":610},[605,49303,2978],{"class":651},[605,49305,49306],{"class":610}," * ",[605,49308,49242],{"class":791},[605,49310,49311],{"class":610}," - ",[605,49313,49242],{"class":791},[605,49315,1471],{"class":610},[605,49317,1893],{"class":791},[605,49319,1471],{"class":610},[605,49321,937],{"class":791},[605,49323,1481],{"class":610},[605,49325,628],{"class":610},[605,49327,4111],{"class":618},[605,49329,625],{"class":610},[605,49331,628],{"class":610},[605,49333,15748],{"class":651},[605,49335,1118],{"class":610},[605,49337,49338],{"class":651},"bind",[605,49340,628],{"class":610},[605,49342,637],{"class":610},[605,49344,49345,49348,49351,49353,49356,49358,49360,49362,49364,49366,49368,49370,49372,49374,49376,49378,49380,49382,49384],{"class":607,"line":14990},[605,49346,49347],{"class":610},"          \u003C",[605,49349,49350],{"class":614},"component",[605,49352,781],{"class":610},[605,49354,49355],{"class":618},"is",[605,49357,625],{"class":610},[605,49359,628],{"class":610},[605,49361,15748],{"class":651},[605,49363,1118],{"class":610},[605,49365,49350],{"class":651},[605,49367,628],{"class":610},[605,49369,781],{"class":610},[605,49371,1989],{"class":618},[605,49373,625],{"class":610},[605,49375,628],{"class":610},[605,49377,15748],{"class":651},[605,49379,1118],{"class":610},[605,49381,1989],{"class":651},[605,49383,628],{"class":610},[605,49385,755],{"class":610},[605,49387,49388,49390,49392],{"class":607,"line":15000},[605,49389,49347],{"class":610},[605,49391,849],{"class":614},[605,49393,755],{"class":610},[605,49395,49396,49399,49401],{"class":607,"line":15037},[605,49397,49398],{"class":610},"        \u003C/",[605,49400,828],{"class":614},[605,49402,637],{"class":610},[605,49404,49405,49407,49409],{"class":607,"line":15046},[605,49406,857],{"class":610},[605,49408,3478],{"class":614},[605,49410,637],{"class":610},[605,49412,49413],{"class":607,"line":15080},[605,49414,710],{"emptyLinePlaceholder":562},[605,49416,49418,49420],{"class":49417,"line":15089},[607,641],[605,49419,825],{"class":610},[605,49421,47596],{"class":614},[605,49423,49425],{"class":49424,"line":15098},[607,641],[605,49426,47602],{"class":618},[605,49428,49430],{"class":49429,"line":15119},[607,641],[605,49431,47608],{"class":618},[605,49433,49435,49438,49440,49442,49444],{"class":49434,"line":15177},[607,641],[605,49436,49437],{"class":618},"        occlude",[605,49439,625],{"class":610},[605,49441,628],{"class":610},[605,49443,43285],{"class":631},[605,49445,2987],{"class":610},[605,49447,49449,49451,49453,49455,49457,49459,49461,49463,49466,49468,49470,49472],{"class":49448,"line":15236},[607,641],[605,49450,2993],{"class":610},[605,49452,1459],{"class":618},[605,49454,625],{"class":610},[605,49456,628],{"class":610},[605,49458,15194],{"class":610},[605,49460,3490],{"class":791},[605,49462,1471],{"class":610},[605,49464,49465],{"class":791},".75",[605,49467,3598],{"class":610},[605,49469,792],{"class":791},[605,49471,1481],{"class":610},[605,49473,2987],{"class":610},[605,49475,49477,49479,49482,49484,49486,49488,49491,49493,49495,49497],{"class":49476,"line":15256},[607,641],[605,49478,2993],{"class":610},[605,49480,49481],{"class":618},"z-index-range",[605,49483,625],{"class":610},[605,49485,628],{"class":610},[605,49487,1466],{"class":610},[605,49489,49490],{"class":791},"28",[605,49492,1471],{"class":610},[605,49494,937],{"class":791},[605,49496,1481],{"class":610},[605,49498,2987],{"class":610},[605,49500,49502],{"class":49501,"line":15288},[607,641],[605,49503,47683],{"class":610},[605,49505,49507,49509,49511,49513,49515,49517,49520,49522],{"class":49506,"line":15297},[607,641],[605,49508,836],{"class":610},[605,49510,18670],{"class":614},[605,49512,18673],{"class":618},[605,49514,625],{"class":610},[605,49516,628],{"class":610},[605,49518,49519],{"class":631},"text-center text-s p-2 bg-[#1B1C1E] text-light",[605,49521,628],{"class":610},[605,49523,637],{"class":610},[605,49525,49527,49530,49532,49534],{"class":49526,"line":15306},[607,641],[605,49528,49529],{"class":651},"          BASIC 💛 ",[605,49531,611],{"class":610},[605,49533,2508],{"class":614},[605,49535,755],{"class":610},[605,49537,49539,49541,49543,49545,49548,49550,49552],{"class":49538,"line":48532},[607,641],[605,49540,49347],{"class":610},[605,49542,1677],{"class":614},[605,49544,11720],{"class":610},[605,49546,49547],{"class":651},"occlude=blending",[605,49549,700],{"class":610},[605,49551,1677],{"class":614},[605,49553,637],{"class":610},[605,49555,49557,49559,49561],{"class":49556,"line":48533},[607,641],[605,49558,49398],{"class":610},[605,49560,18670],{"class":614},[605,49562,637],{"class":610},[605,49564,49566,49568,49570],{"class":607,"line":49565},73,[605,49567,857],{"class":610},[605,49569,47719],{"class":614},[605,49571,637],{"class":610},[605,49573,49575],{"class":49574,"line":48534},[607,641],[605,49576,710],{"emptyLinePlaceholder":562},[605,49578,49580,49582],{"class":49579,"line":48535},[607,641],[605,49581,825],{"class":610},[605,49583,47596],{"class":614},[605,49585,49587],{"class":49586,"line":48536},[607,641],[605,49588,47602],{"class":618},[605,49590,49592],{"class":49591,"line":48537},[607,641],[605,49593,47608],{"class":618},[605,49595,49597,49599,49601,49603,49605],{"class":49596,"line":48538},[607,641],[605,49598,49437],{"class":618},[605,49600,625],{"class":610},[605,49602,628],{"class":610},[605,49604,43285],{"class":631},[605,49606,2987],{"class":610},[605,49608,49610,49612,49614,49616,49618,49620,49622,49624,49627,49629,49631,49633],{"class":49609,"line":48539},[607,641],[605,49611,2993],{"class":610},[605,49613,1459],{"class":618},[605,49615,625],{"class":610},[605,49617,628],{"class":610},[605,49619,1466],{"class":610},[605,49621,937],{"class":791},[605,49623,1471],{"class":610},[605,49625,49626],{"class":791},".85",[605,49628,3598],{"class":610},[605,49630,792],{"class":791},[605,49632,1481],{"class":610},[605,49634,2987],{"class":610},[605,49636,49638,49640,49642,49644,49646,49649],{"class":49637,"line":48540},[607,641],[605,49639,2993],{"class":610},[605,49641,15748],{"class":618},[605,49643,625],{"class":610},[605,49645,628],{"class":610},[605,49647,49648],{"class":651},"customGeometry",[605,49650,2987],{"class":610},[605,49652,49654,49656,49658,49660,49662,49664,49666,49668,49670,49672],{"class":49653,"line":48541},[607,641],[605,49655,2993],{"class":610},[605,49657,49481],{"class":618},[605,49659,625],{"class":610},[605,49661,628],{"class":610},[605,49663,1466],{"class":610},[605,49665,49490],{"class":791},[605,49667,1471],{"class":610},[605,49669,937],{"class":791},[605,49671,1481],{"class":610},[605,49673,2987],{"class":610},[605,49675,49677],{"class":49676,"line":48542},[607,641],[605,49678,47683],{"class":610},[605,49680,49682,49684,49686,49688,49690,49692,49695,49697],{"class":49681,"line":48543},[607,641],[605,49683,836],{"class":610},[605,49685,18670],{"class":614},[605,49687,18673],{"class":618},[605,49689,625],{"class":610},[605,49691,628],{"class":610},[605,49693,49694],{"class":631},"text-xs p-8 text-center bg-[#F6B03B] text-dark",[605,49696,628],{"class":610},[605,49698,637],{"class":610},[605,49700,49702,49705,49707,49709,49712,49715,49717,49719,49722,49724,49726,49728,49731,49733,49735],{"class":49701,"line":48544},[607,641],[605,49703,49704],{"class":651},"          CUSTOM ",[605,49706,611],{"class":610},[605,49708,2508],{"class":614},[605,49710,49711],{"class":610}," />",[605,49713,49714],{"class":610}," \u003C",[605,49716,1673],{"class":614},[605,49718,11720],{"class":610},[605,49720,49721],{"class":651},"CIRCLE ",[605,49723,611],{"class":610},[605,49725,2508],{"class":614},[605,49727,49711],{"class":610},[605,49729,49730],{"class":651}," GEOMETRY",[605,49732,700],{"class":610},[605,49734,1673],{"class":614},[605,49736,637],{"class":610},[605,49738,49740,49742,49744],{"class":607,"line":49739},85,[605,49741,49398],{"class":610},[605,49743,18670],{"class":614},[605,49745,637],{"class":610},[605,49747,49749,49751,49753],{"class":49748,"line":48545},[607,641],[605,49750,857],{"class":610},[605,49752,47719],{"class":614},[605,49754,637],{"class":610},[605,49756,49758],{"class":49757,"line":48546},[607,641],[605,49759,710],{"emptyLinePlaceholder":562},[605,49761,49763,49765],{"class":49762,"line":48547},[607,641],[605,49764,825],{"class":610},[605,49766,47596],{"class":614},[605,49768,49770,49772,49774,49776,49779],{"class":49769,"line":48548},[607,641],[605,49771,19812],{"class":618},[605,49773,625],{"class":610},[605,49775,628],{"class":610},[605,49777,49778],{"class":631},"targetDirectionLightRef",[605,49780,2987],{"class":610},[605,49782,49784],{"class":49783,"line":48549},[607,641],[605,49785,47602],{"class":618},[605,49787,49789],{"class":49788,"line":48550},[607,641],[605,49790,47608],{"class":618},[605,49792,49794,49796,49798,49800,49802],{"class":49793,"line":48551},[607,641],[605,49795,49437],{"class":618},[605,49797,625],{"class":610},[605,49799,628],{"class":610},[605,49801,43285],{"class":631},[605,49803,2987],{"class":610},[605,49805,49807,49809,49811,49813,49815,49817,49819,49821,49824,49826,49828,49830],{"class":49806,"line":48552},[607,641],[605,49808,2993],{"class":610},[605,49810,1459],{"class":618},[605,49812,625],{"class":610},[605,49814,628],{"class":610},[605,49816,1466],{"class":610},[605,49818,3490],{"class":791},[605,49820,1471],{"class":610},[605,49822,49823],{"class":791},".5",[605,49825,3598],{"class":610},[605,49827,792],{"class":791},[605,49829,1481],{"class":610},[605,49831,2987],{"class":610},[605,49833,49835,49837,49839,49841,49843,49846],{"class":49834,"line":48553},[607,641],[605,49836,2993],{"class":610},[605,49838,15798],{"class":618},[605,49840,625],{"class":610},[605,49842,628],{"class":610},[605,49844,49845],{"class":651},"customMaterial",[605,49847,2987],{"class":610},[605,49849,49851],{"class":49850,"line":48554},[607,641],[605,49852,49853],{"class":618},"        receive-shadow\n",[605,49855,49857,49859,49861,49863,49865,49867,49869,49871,49873,49875],{"class":49856,"line":48555},[607,641],[605,49858,2993],{"class":610},[605,49860,49481],{"class":618},[605,49862,625],{"class":610},[605,49864,628],{"class":610},[605,49866,1466],{"class":610},[605,49868,49490],{"class":791},[605,49870,1471],{"class":610},[605,49872,937],{"class":791},[605,49874,1481],{"class":610},[605,49876,2987],{"class":610},[605,49878,49880],{"class":607,"line":49879},97,[605,49881,47683],{"class":610},[605,49883,49885,49887,49889,49892,49894,49896,49898,49900,49903,49906,49908,49910,49913,49915,49918,49920,49923,49925,49927,49929,49931,49933,49935],{"class":49884,"line":48556},[607,641],[605,49886,836],{"class":610},[605,49888,18670],{"class":614},[605,49890,49891],{"class":618}," style",[605,49893,625],{"class":610},[605,49895,628],{"class":610},[605,49897,34003],{"class":47785},[605,49899,7407],{"class":610},[605,49901,49902],{"class":791},"100px",[605,49904,49905],{"class":610},"; ",[605,49907,34017],{"class":47785},[605,49909,7407],{"class":610},[605,49911,49912],{"class":651},"auto",[605,49914,49905],{"class":610},[605,49916,49917],{"class":47785},"aspect-ratio",[605,49919,7407],{"class":610},[605,49921,49922],{"class":791},"250",[605,49924,43445],{"class":610},[605,49926,49922],{"class":791},[605,49928,2727],{"class":610},[605,49930,628],{"class":610},[605,49932,18722],{"class":610},[605,49934,18670],{"class":614},[605,49936,637],{"class":610},[605,49938,49940,49942,49944],{"class":49939,"line":48557},[607,641],[605,49941,857],{"class":610},[605,49943,47719],{"class":614},[605,49945,637],{"class":610},[605,49947,49949],{"class":49948,"line":48558},[607,641],[605,49950,710],{"emptyLinePlaceholder":562},[605,49952,49954,49956],{"class":49953,"line":48559},[607,641],[605,49955,825],{"class":610},[605,49957,47596],{"class":614},[605,49959,49961],{"class":49960,"line":48560},[607,641],[605,49962,47602],{"class":618},[605,49964,49966],{"class":49965,"line":48561},[607,641],[605,49967,47608],{"class":618},[605,49969,49971,49973,49975,49977,49979],{"class":49970,"line":48562},[607,641],[605,49972,49437],{"class":618},[605,49974,625],{"class":610},[605,49976,628],{"class":610},[605,49978,43285],{"class":631},[605,49980,2987],{"class":610},[605,49982,49984,49986,49988,49990,49992,49994,49996,49998,50001,50003,50005,50007],{"class":49983,"line":48563},[607,641],[605,49985,2993],{"class":610},[605,49987,1459],{"class":618},[605,49989,625],{"class":610},[605,49991,628],{"class":610},[605,49993,1466],{"class":610},[605,49995,3490],{"class":791},[605,49997,1471],{"class":610},[605,49999,50000],{"class":791},"2.5",[605,50002,3598],{"class":610},[605,50004,792],{"class":791},[605,50006,1481],{"class":610},[605,50008,2987],{"class":610},[605,50010,50012,50014,50016,50018,50020,50022,50024,50026,50028,50030],{"class":50011,"line":48564},[607,641],[605,50013,2993],{"class":610},[605,50015,49481],{"class":618},[605,50017,625],{"class":610},[605,50019,628],{"class":610},[605,50021,1466],{"class":610},[605,50023,49490],{"class":791},[605,50025,1471],{"class":610},[605,50027,937],{"class":791},[605,50029,1481],{"class":610},[605,50031,2987],{"class":610},[605,50033,50035],{"class":50034,"line":48565},[607,641],[605,50036,47683],{"class":610},[605,50038,50040,50042,50044,50046,50048,50050,50053,50055],{"class":50039,"line":48566},[607,641],[605,50041,836],{"class":610},[605,50043,18670],{"class":614},[605,50045,18673],{"class":618},[605,50047,625],{"class":610},[605,50049,628],{"class":610},[605,50051,50052],{"class":631},"text-center text-xs p-2 text-dark bg-[#FF0000]",[605,50054,628],{"class":610},[605,50056,637],{"class":610},[605,50058,50060,50062,50064,50066,50069,50071,50073,50075,50077,50079],{"class":607,"line":50059},109,[605,50061,49347],{"class":610},[605,50063,1673],{"class":614},[605,50065,11720],{"class":610},[605,50067,50068],{"class":651},"HTML + Custom material ",[605,50070,700],{"class":610},[605,50072,1673],{"class":614},[605,50074,11720],{"class":610},[605,50076,49714],{"class":610},[605,50078,2508],{"class":614},[605,50080,755],{"class":610},[605,50082,50084,50086,50088,50090,50093,50095,50097,50099],{"class":607,"line":50083},110,[605,50085,49347],{"class":610},[605,50087,1677],{"class":614},[605,50089,11720],{"class":610},[605,50091,50092],{"class":651},"+ receive-shadow ",[605,50094,700],{"class":610},[605,50096,1677],{"class":614},[605,50098,11720],{"class":610},[605,50100,50101],{"class":651}," ⬇️\n",[605,50103,50105,50107,50109],{"class":607,"line":50104},111,[605,50106,49398],{"class":610},[605,50108,18670],{"class":614},[605,50110,637],{"class":610},[605,50112,50114,50116,50118],{"class":607,"line":50113},112,[605,50115,857],{"class":610},[605,50117,47719],{"class":614},[605,50119,637],{"class":610},[605,50121,50123],{"class":607,"line":50122},113,[605,50124,710],{"emptyLinePlaceholder":562},[605,50126,50128,50130],{"class":607,"line":50127},114,[605,50129,825],{"class":610},[605,50131,10771],{"class":614},[605,50133,50135,50138,50140,50142,50144,50146,50148],{"class":607,"line":50134},115,[605,50136,50137],{"class":644},"        v-if",[605,50139,625],{"class":610},[605,50141,628],{"class":610},[605,50143,49778],{"class":651},[605,50145,10582],{"class":610},[605,50147,20549],{"class":651},[605,50149,2987],{"class":610},[605,50151,50153,50155,50157,50159,50161,50163,50165,50167],{"class":607,"line":50152},116,[605,50154,2993],{"class":610},[605,50156,8871],{"class":618},[605,50158,625],{"class":610},[605,50160,628],{"class":610},[605,50162,49778],{"class":651},[605,50164,10582],{"class":610},[605,50166,20549],{"class":651},[605,50168,2987],{"class":610},[605,50170,50172,50174,50177,50179,50181,50184],{"class":607,"line":50171},117,[605,50173,2993],{"class":610},[605,50175,50176],{"class":618},"shadow-normalBias",[605,50178,625],{"class":610},[605,50180,628],{"class":610},[605,50182,50183],{"class":791},"0.075",[605,50185,2987],{"class":610},[605,50187,50189,50191,50193,50195,50197,50199,50201,50203,50205,50207,50209,50211],{"class":607,"line":50188},118,[605,50190,2993],{"class":610},[605,50192,1459],{"class":618},[605,50194,625],{"class":610},[605,50196,628],{"class":610},[605,50198,1466],{"class":610},[605,50200,2396],{"class":791},[605,50202,1471],{"class":610},[605,50204,937],{"class":791},[605,50206,1471],{"class":610},[605,50208,2396],{"class":791},[605,50210,1481],{"class":610},[605,50212,2987],{"class":610},[605,50214,50216,50218,50220,50222,50224,50226],{"class":607,"line":50215},119,[605,50217,2993],{"class":610},[605,50219,1886],{"class":618},[605,50221,625],{"class":610},[605,50223,628],{"class":610},[605,50225,792],{"class":791},[605,50227,2987],{"class":610},[605,50229,50231],{"class":607,"line":50230},120,[605,50232,50233],{"class":618},"        cast-shadow\n",[605,50235,50237],{"class":607,"line":50236},121,[605,50238,3050],{"class":610},[605,50240,50242],{"class":607,"line":50241},122,[605,50243,710],{"emptyLinePlaceholder":562},[605,50245,50247,50249,50251,50253,50255,50257,50259,50261,50263,50265],{"class":607,"line":50246},123,[605,50248,825],{"class":610},[605,50250,3067],{"class":614},[605,50252,781],{"class":610},[605,50254,1968],{"class":618},[605,50256,625],{"class":610},[605,50258,628],{"class":610},[605,50260,4088],{"class":610},[605,50262,1893],{"class":791},[605,50264,628],{"class":610},[605,50266,755],{"class":610},[605,50268,50270,50272,50274,50276,50278,50280,50282,50284,50286],{"class":607,"line":50269},124,[605,50271,825],{"class":610},[605,50273,3518],{"class":614},[605,50275,781],{"class":610},[605,50277,1886],{"class":618},[605,50279,625],{"class":610},[605,50281,628],{"class":610},[605,50283,1893],{"class":791},[605,50285,628],{"class":610},[605,50287,755],{"class":610},[605,50289,50291,50293,50295],{"class":607,"line":50290},125,[605,50292,867],{"class":610},[605,50294,729],{"class":614},[605,50296,637],{"class":610},[605,50298,50300,50302,50304],{"class":607,"line":50299},126,[605,50301,877],{"class":610},[605,50303,18670],{"class":614},[605,50305,637],{"class":610},[605,50307,50309,50311,50313],{"class":607,"line":50308},127,[605,50310,700],{"class":610},[605,50312,718],{"class":614},[605,50314,637],{"class":610},[605,50316,50318],{"class":607,"line":50317},128,[605,50319,710],{"emptyLinePlaceholder":562},[605,50321,50323,50325,50327,50329],{"class":607,"line":50322},129,[605,50324,611],{"class":610},[605,50326,1299],{"class":614},[605,50328,47770],{"class":618},[605,50330,637],{"class":610},[605,50332,50334,50336,50339],{"class":607,"line":50333},130,[605,50335,1118],{"class":610},[605,50337,50338],{"class":1172},"html-demo-wrapper",[605,50340,1176],{"class":610},[605,50342,50344,50346,50348,50351],{"class":607,"line":50343},131,[605,50345,1212],{"class":47785},[605,50347,1190],{"class":610},[605,50349,50350],{"class":791}," 100%",[605,50352,3329],{"class":610},[605,50354,50356,50358,50360,50362],{"class":607,"line":50355},132,[605,50357,1222],{"class":47785},[605,50359,1190],{"class":610},[605,50361,50350],{"class":791},[605,50363,3329],{"class":610},[605,50365,50367,50370,50372,50375],{"class":607,"line":50366},133,[605,50368,50369],{"class":47785},"  position",[605,50371,1190],{"class":610},[605,50373,50374],{"class":651}," relative",[605,50376,3329],{"class":610},[605,50378,50380,50383,50385,50388],{"class":607,"line":50379},134,[605,50381,50382],{"class":47785},"  overflow",[605,50384,1190],{"class":610},[605,50386,50387],{"class":651}," hidden",[605,50389,3329],{"class":610},[605,50391,50393,50395,50397,50399,50402],{"class":607,"line":50392},135,[605,50394,47786],{"class":47785},[605,50396,1190],{"class":610},[605,50398,47791],{"class":610},[605,50400,50401],{"class":651},"82dbc5",[605,50403,3329],{"class":610},[605,50405,50407],{"class":607,"line":50406},136,[605,50408,1297],{"class":610},[605,50410,50412,50414,50416],{"class":607,"line":50411},137,[605,50413,700],{"class":610},[605,50415,1299],{"class":614},[605,50417,637],{"class":610},[472,50419,39228],{"id":39227},[582,50421,50422,50423,50426,50427,50430,50431,50433,50434,50437,50438,50442],{},"By default, when using ",[586,50424,50425],{},"occlude=\"blending\"",", occlusion works correctly only with ",[1673,50428,50429],{},"rectangular HTML elements"," (using a ",[586,50432,26491],{},").\nFor ",[1677,50435,50436],{},"non-rectangular content",", you can use the ",[1673,50439,50440],{},[586,50441,15748],{}," prop to provide a matching custom geometry.",[582,50444,50445,50446,44676,50449,50452,50453,50459,50460,1118],{},"In the ",[1673,50447,50448],{},"demo above ⬆️",[1677,50450,50451],{},"(middle yellow example)",", a ",[1112,50454,50457],{"href":50455,"rel":50456},"https://threejs.org/docs/#api/en/geometries/CircleGeometry",[1116],[586,50458,23684],{}," is used as a ",[1673,50461,50462],{},"custom geometry",[50464,50465,50466],"prose-list",{},[3136,50467,50468,50477],{},[3139,50469,2253,50470,50472,50473,50476],{},[586,50471,15748],{}," prop only defines the ",[1673,50474,50475],{},"occlusion shape"," in 3D and does not modify your HTML content.",[3139,50478,50479,50480,50487,50488,50491,50492,50495,50496,50503],{},"You can provide any ",[1112,50481,50484],{"href":50482,"rel":50483},"https://threejs.org/docs/#api/en/core/BufferGeometry",[1116],[586,50485,50486],{},"BufferGeometry",", for example to simulate ",[1673,50489,50490],{},"CSS-like styles"," such as ",[586,50493,50494],{},"border-radius"," using a rounded rectangle or squircle geometry (see ",[1112,50497,50500],{"href":50498,"rel":50499},"https://discourse.threejs.org/t/roundedrectangle-squircle/28645",[1116],[586,50501,50502],{},"RoundedRectangle / Squircle geometry"," for example).",[16409,50505,50507],{"id":50506},"custom-material","Custom Material",[582,50509,50510,50511,50513,50514,44676,50516,50452,50519,50522],{},"You can also assign material properties to the HTML content using the ",[586,50512,15798],{}," prop.\nIn the ",[1673,50515,50448],{},[1677,50517,50518],{},"(right red example)",[1673,50520,50521],{},"custom material"," is used with shadow.",[2046,50524,50525],{},[582,50526,2253,50527,50529,50530,50532,50533,1118],{},[586,50528,15798],{}," prop is only available when ",[586,50531,50425],{}," is ",[1673,50534,10162],{},[2046,50536,50537],{},[582,50538,50539,50540,4431,50544,50548,50549,50552,50553,50555,50556,50559,50560,10149,50564,3198,50569],{},"Enable shadows using the ",[1673,50541,50542],{},[586,50543,11918],{},[1673,50545,50546],{},[586,50547,11936],{}," props.\nShadows are supported ",[1673,50550,50551],{},"only"," when using a ",[1673,50554,50521],{},". By default, shadows do ",[1673,50557,50558],{},"not"," work with ",[1677,50561,50562],{},[586,50563,20701],{},[1677,50565,50566],{},[586,50567,50568],{},"ShaderMaterial",[2508,50570],{},[472,50572,50574,50575],{"id":50573},"using-transition","Using ",[586,50576,50577],{},"\u003CTransition>",[582,50579,50580,50581,50587,50588,50590,50591,50594,50595,4431,50598,50601],{},"The native Vue ",[1112,50582,50585],{"href":50583,"rel":50584},"https://vuejs.org/guide/built-ins/transition",[1116],[586,50586,50577],{}," component works seamlessly with ",[586,50589,47386],{},".\nThis means you can ",[1673,50592,50593],{},"animate"," how your projected HTML content ",[1677,50596,50597],{},"enters",[1677,50599,50600],{},"leaves"," the scene, exactly as you would in a regular Vue application.",[2046,50603,50604],{},[582,50605,22519,50606,50609,50610,1471,50613,1691,50615,50618],{},[1673,50607,50608],{},"standard interactions"," are supported just like on a regular HTML element — ",[1673,50611,50612],{},"hover effects",[1673,50614,7741],{},[1677,50616,50617],{},"any kind of DOM interaction"," are fully possible.",[576,50620,50621],{},[50622,50623],"objects-html-transition-demo",{},[47904,50625,47906,50626,50628],{},[47908,50627,47910],{},[594,50629,50632],{"className":596,"code":50630,"highlights":50631,"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,49565,48534,48535,48536,48537,48538,48539,48540,48541,48542,48543,48544,49739,48545,48546,48547,48548,48549,48550,48551],[586,50633,50634,50654,50681,50699,50717,50721,50731,50745,50755,50765,50775,50786,50790,50794,50814,50818,50840,50844,50854,50858,50872,50894,50898,50902,50916,50938,50942,50946,50960,50986,50990,50994,51009,51032,51036,51040,51044,51063,51136,51173,51196,51200,51204,51220,51236,51240,51248,51252,51260,51289,51318,51350,51371,51375,51381,51403,51421,51435,51449,51463,51485,51489,51545,51585,51593,51601,51609,51613,51619,51623,51627,51639,51665,51681,51704,51709,51730,51738,51753,51779,51794,51811,51817,51841,51859,51869,51878,51887,51892,51915,51936,51945,51954,51962,51966,51976,51984,51994,52004,52014,52024,52036,52040,52044,52058,52076,52080,52084,52093,52102,52112,52128,52132,52136,52145,52154,52172,52176,52180,52189,52198,52208,52222,52226],{"__ignoreMap":544},[605,50635,50636,50638,50640,50642,50644,50646,50648,50650,50652],{"class":607,"line":545},[605,50637,611],{"class":610},[605,50639,615],{"class":614},[605,50641,619],{"class":618},[605,50643,622],{"class":618},[605,50645,625],{"class":610},[605,50647,628],{"class":610},[605,50649,632],{"class":631},[605,50651,628],{"class":610},[605,50653,637],{"class":610},[605,50655,50657,50659,50661,50663,50665,50667,50669,50671,50673,50675,50677,50679],{"class":50656,"line":546},[607,641],[605,50658,645],{"class":644},[605,50660,648],{"class":610},[605,50662,47430],{"class":651},[605,50664,655],{"class":610},[605,50666,3339],{"class":651},[605,50668,655],{"class":610},[605,50670,658],{"class":651},[605,50672,661],{"class":610},[605,50674,664],{"class":644},[605,50676,667],{"class":610},[605,50678,670],{"class":631},[605,50680,673],{"class":610},[605,50682,50683,50685,50687,50689,50691,50693,50695,50697],{"class":607,"line":676},[605,50684,645],{"class":644},[605,50686,648],{"class":610},[605,50688,683],{"class":651},[605,50690,661],{"class":610},[605,50692,664],{"class":644},[605,50694,667],{"class":610},[605,50696,692],{"class":631},[605,50698,673],{"class":610},[605,50700,50701,50703,50705,50707,50709,50711,50713,50715],{"class":607,"line":697},[605,50702,645],{"class":644},[605,50704,648],{"class":610},[605,50706,5431],{"class":651},[605,50708,661],{"class":610},[605,50710,664],{"class":644},[605,50712,667],{"class":610},[605,50714,601],{"class":631},[605,50716,673],{"class":610},[605,50718,50719],{"class":607,"line":707},[605,50720,710],{"emptyLinePlaceholder":562},[605,50722,50723,50725,50727,50729],{"class":607,"line":713},[605,50724,2689],{"class":618},[605,50726,48685],{"class":651},[605,50728,625],{"class":610},[605,50730,1176],{"class":610},[605,50732,50733,50735,50737,50739,50741,50743],{"class":607,"line":723},[605,50734,48694],{"class":614},[605,50736,1190],{"class":610},[605,50738,667],{"class":610},[605,50740,5040],{"class":631},[605,50742,5536],{"class":610},[605,50744,14031],{"class":610},[605,50746,50747,50749,50751,50753],{"class":607,"line":746},[605,50748,48709],{"class":614},[605,50750,1190],{"class":610},[605,50752,11773],{"class":791},[605,50754,14031],{"class":610},[605,50756,50757,50759,50761,50763],{"class":607,"line":758},[605,50758,48720],{"class":614},[605,50760,1190],{"class":610},[605,50762,10938],{"class":3870},[605,50764,14031],{"class":610},[605,50766,50767,50769,50771,50773],{"class":607,"line":768},[605,50768,48731],{"class":614},[605,50770,1190],{"class":610},[605,50772,10938],{"class":3870},[605,50774,14031],{"class":610},[605,50776,50777,50780,50782,50784],{"class":607,"line":773},[605,50778,50779],{"class":614},"  antialias",[605,50781,1190],{"class":610},[605,50783,10938],{"class":3870},[605,50785,14031],{"class":610},[605,50787,50788],{"class":607,"line":799},[605,50789,1297],{"class":610},[605,50791,50792],{"class":607,"line":599},[605,50793,710],{"emptyLinePlaceholder":562},[605,50795,50796,50798,50801,50803,50805,50807,50810,50812],{"class":607,"line":822},[605,50797,2689],{"class":618},[605,50799,50800],{"class":651}," rootRef ",[605,50802,625],{"class":610},[605,50804,5431],{"class":2800},[605,50806,611],{"class":610},[605,50808,50809],{"class":1172},"HTMLElement",[605,50811,11720],{"class":610},[605,50813,2846],{"class":651},[605,50815,50816],{"class":607,"line":833},[605,50817,710],{"emptyLinePlaceholder":562},[605,50819,50820,50822,50825,50827,50829,50831,50833,50836,50838],{"class":607,"line":844},[605,50821,2689],{"class":618},[605,50823,50824],{"class":651}," bgColor ",[605,50826,625],{"class":610},[605,50828,5431],{"class":2800},[605,50830,2970],{"class":651},[605,50832,5536],{"class":610},[605,50834,50835],{"class":631},"#F6B03B",[605,50837,5536],{"class":610},[605,50839,5539],{"class":651},[605,50841,50842],{"class":607,"line":854},[605,50843,710],{"emptyLinePlaceholder":562},[605,50845,50846,50848,50850,50852],{"class":607,"line":600},[605,50847,2689],{"class":618},[605,50849,48773],{"class":651},[605,50851,625],{"class":610},[605,50853,14018],{"class":651},[605,50855,50856],{"class":607,"line":874},[605,50857,30928],{"class":610},[605,50859,50860,50862,50864,50866,50868,50870],{"class":607,"line":884},[605,50861,48786],{"class":614},[605,50863,1190],{"class":610},[605,50865,667],{"class":610},[605,50867,839],{"class":631},[605,50869,5536],{"class":610},[605,50871,14031],{"class":610},[605,50873,50874,50876,50878,50880,50882,50884,50886,50888,50890,50892],{"class":607,"line":2952},[605,50875,48801],{"class":614},[605,50877,1190],{"class":610},[605,50879,26205],{"class":651},[605,50881,1893],{"class":791},[605,50883,655],{"class":610},[605,50885,22969],{"class":791},[605,50887,655],{"class":610},[605,50889,22969],{"class":791},[605,50891,1481],{"class":651},[605,50893,14031],{"class":610},[605,50895,50896],{"class":607,"line":2960},[605,50897,17650],{"class":610},[605,50899,50900],{"class":607,"line":2990},[605,50901,30928],{"class":610},[605,50903,50904,50906,50908,50910,50912,50914],{"class":607,"line":3007},[605,50905,48786],{"class":614},[605,50907,1190],{"class":610},[605,50909,667],{"class":610},[605,50911,4735],{"class":631},[605,50913,5536],{"class":610},[605,50915,14031],{"class":610},[605,50917,50918,50920,50922,50924,50926,50928,50930,50932,50934,50936],{"class":607,"line":3022},[605,50919,48801],{"class":614},[605,50921,1190],{"class":610},[605,50923,26205],{"class":651},[605,50925,33784],{"class":791},[605,50927,655],{"class":610},[605,50929,23726],{"class":791},[605,50931,655],{"class":610},[605,50933,23726],{"class":791},[605,50935,1481],{"class":651},[605,50937,14031],{"class":610},[605,50939,50940],{"class":607,"line":3047},[605,50941,17650],{"class":610},[605,50943,50944],{"class":607,"line":2591},[605,50945,30928],{"class":610},[605,50947,50948,50950,50952,50954,50956,50958],{"class":607,"line":3062},[605,50949,48786],{"class":614},[605,50951,1190],{"class":610},[605,50953,667],{"class":610},[605,50955,5127],{"class":631},[605,50957,5536],{"class":610},[605,50959,14031],{"class":610},[605,50961,50962,50964,50966,50968,50970,50972,50974,50976,50978,50980,50982,50984],{"class":607,"line":3092},[605,50963,48801],{"class":614},[605,50965,1190],{"class":610},[605,50967,26205],{"class":651},[605,50969,1513],{"class":791},[605,50971,655],{"class":610},[605,50973,28659],{"class":791},[605,50975,655],{"class":610},[605,50977,28538],{"class":791},[605,50979,655],{"class":610},[605,50981,2724],{"class":791},[605,50983,1481],{"class":651},[605,50985,14031],{"class":610},[605,50987,50988],{"class":607,"line":3101},[605,50989,17650],{"class":610},[605,50991,50992],{"class":607,"line":4207},[605,50993,30928],{"class":610},[605,50995,50996,50998,51000,51002,51005,51007],{"class":607,"line":4212},[605,50997,48786],{"class":614},[605,50999,1190],{"class":610},[605,51001,667],{"class":610},[605,51003,51004],{"class":631},"TresConeGeometry",[605,51006,5536],{"class":610},[605,51008,14031],{"class":610},[605,51010,51011,51013,51015,51017,51019,51021,51024,51026,51028,51030],{"class":607,"line":4235},[605,51012,48801],{"class":614},[605,51014,1190],{"class":610},[605,51016,26205],{"class":651},[605,51018,33784],{"class":791},[605,51020,655],{"class":610},[605,51022,51023],{"class":791}," 1.4",[605,51025,655],{"class":610},[605,51027,23726],{"class":791},[605,51029,1481],{"class":651},[605,51031,14031],{"class":610},[605,51033,51034],{"class":607,"line":4244},[605,51035,17650],{"class":610},[605,51037,51038],{"class":607,"line":4253},[605,51039,14056],{"class":651},[605,51041,51042],{"class":607,"line":4262},[605,51043,710],{"emptyLinePlaceholder":562},[605,51045,51046,51048,51051,51053,51056,51059,51061],{"class":607,"line":4271},[605,51047,2689],{"class":618},[605,51049,51050],{"class":651}," getRandomBackgroundColor ",[605,51052,625],{"class":610},[605,51054,51055],{"class":610}," ():",[605,51057,51058],{"class":1172}," string",[605,51060,5501],{"class":618},[605,51062,1176],{"class":610},[605,51064,51065,51068,51071,51073,51075,51077,51079,51081,51083,51085,51087,51089,51091,51093,51096,51098,51100,51102,51105,51107,51109,51111,51114,51116,51118,51120,51123,51125,51127,51129,51132,51134],{"class":607,"line":14784},[605,51066,51067],{"class":618},"  const",[605,51069,51070],{"class":651}," colors",[605,51072,2766],{"class":610},[605,51074,26205],{"class":614},[605,51076,5536],{"class":610},[605,51078,50835],{"class":631},[605,51080,5536],{"class":610},[605,51082,655],{"class":610},[605,51084,667],{"class":610},[605,51086,5040],{"class":631},[605,51088,5536],{"class":610},[605,51090,655],{"class":610},[605,51092,667],{"class":610},[605,51094,51095],{"class":631},"#FF5733",[605,51097,5536],{"class":610},[605,51099,655],{"class":610},[605,51101,667],{"class":610},[605,51103,51104],{"class":631},"#33FF57",[605,51106,5536],{"class":610},[605,51108,655],{"class":610},[605,51110,667],{"class":610},[605,51112,51113],{"class":631},"#3357FF",[605,51115,5536],{"class":610},[605,51117,655],{"class":610},[605,51119,667],{"class":610},[605,51121,51122],{"class":631},"#F333FF",[605,51124,5536],{"class":610},[605,51126,655],{"class":610},[605,51128,667],{"class":610},[605,51130,51131],{"class":631},"#33FFF5",[605,51133,5536],{"class":610},[605,51135,14056],{"class":614},[605,51137,51138,51140,51143,51145,51147,51149,51151,51153,51155,51157,51160,51163,51165,51167,51169,51171],{"class":607,"line":14799},[605,51139,51067],{"class":618},[605,51141,51142],{"class":651}," idx",[605,51144,2766],{"class":610},[605,51146,24569],{"class":651},[605,51148,1118],{"class":610},[605,51150,38986],{"class":2800},[605,51152,2970],{"class":614},[605,51154,21593],{"class":651},[605,51156,1118],{"class":610},[605,51158,51159],{"class":2800},"random",[605,51161,51162],{"class":614},"() ",[605,51164,16566],{"class":610},[605,51166,51070],{"class":651},[605,51168,1118],{"class":610},[605,51170,14616],{"class":651},[605,51172,5539],{"class":614},[605,51174,51175,51177,51179,51181,51184,51187,51190,51192,51194],{"class":607,"line":14814},[605,51176,16533],{"class":644},[605,51178,51070],{"class":651},[605,51180,1466],{"class":614},[605,51182,51183],{"class":651},"idx",[605,51185,51186],{"class":614},"] ",[605,51188,51189],{"class":610},"??",[605,51191,667],{"class":610},[605,51193,50835],{"class":631},[605,51195,673],{"class":610},[605,51197,51198],{"class":607,"line":14819},[605,51199,1297],{"class":610},[605,51201,51202],{"class":607,"line":14826},[605,51203,710],{"emptyLinePlaceholder":562},[605,51205,51206,51208,51211,51213,51216,51218],{"class":607,"line":14831},[605,51207,2689],{"class":618},[605,51209,51210],{"class":651}," updateBackgroundColor ",[605,51212,625],{"class":610},[605,51214,51215],{"class":610}," ()",[605,51217,5501],{"class":618},[605,51219,1176],{"class":610},[605,51221,51222,51225,51227,51229,51231,51234],{"class":607,"line":14837},[605,51223,51224],{"class":651},"  bgColor",[605,51226,1118],{"class":610},[605,51228,5496],{"class":651},[605,51230,2766],{"class":610},[605,51232,51233],{"class":2800}," getRandomBackgroundColor",[605,51235,2846],{"class":614},[605,51237,51238],{"class":607,"line":14858},[605,51239,1297],{"class":610},[605,51241,51242,51244,51246],{"class":607,"line":14864},[605,51243,700],{"class":610},[605,51245,615],{"class":614},[605,51247,637],{"class":610},[605,51249,51250],{"class":607,"line":14871},[605,51251,710],{"emptyLinePlaceholder":562},[605,51253,51254,51256,51258],{"class":607,"line":14876},[605,51255,611],{"class":610},[605,51257,718],{"class":614},[605,51259,637],{"class":610},[605,51261,51262,51264,51266,51268,51270,51272,51275,51277,51279,51281,51283,51285,51287],{"class":607,"line":14897},[605,51263,726],{"class":610},[605,51265,18670],{"class":614},[605,51267,5431],{"class":618},[605,51269,625],{"class":610},[605,51271,628],{"class":610},[605,51273,51274],{"class":631},"rootRef",[605,51276,628],{"class":610},[605,51278,18673],{"class":618},[605,51280,625],{"class":610},[605,51282,628],{"class":610},[605,51284,50338],{"class":631},[605,51286,628],{"class":610},[605,51288,637],{"class":610},[605,51290,51291,51293,51295,51297,51299,51301,51303,51305,51307,51309,51311,51314,51316],{"class":607,"line":14910},[605,51292,749],{"class":610},[605,51294,729],{"class":614},[605,51296,4111],{"class":618},[605,51298,625],{"class":610},[605,51300,628],{"class":610},[605,51302,49117],{"class":651},[605,51304,628],{"class":610},[605,51306,18673],{"class":618},[605,51308,625],{"class":610},[605,51310,628],{"class":610},[605,51312,51313],{"class":631},"!pointer-events-none",[605,51315,628],{"class":610},[605,51317,637],{"class":610},[605,51319,51320,51322,51324,51326,51328,51330,51332,51334,51336,51338,51340,51342,51344,51346,51348],{"class":607,"line":14936},[605,51321,825],{"class":610},[605,51323,752],{"class":614},[605,51325,781],{"class":610},[605,51327,1459],{"class":618},[605,51329,625],{"class":610},[605,51331,628],{"class":610},[605,51333,1466],{"class":610},[605,51335,937],{"class":791},[605,51337,1471],{"class":610},[605,51339,9877],{"class":791},[605,51341,1471],{"class":610},[605,51343,4685],{"class":791},[605,51345,1481],{"class":610},[605,51347,628],{"class":610},[605,51349,755],{"class":610},[605,51351,51352,51354,51356,51358,51361,51363,51365,51367,51369],{"class":607,"line":14941},[605,51353,825],{"class":610},[605,51355,763],{"class":614},[605,51357,781],{"class":610},[605,51359,51360],{"class":618},"dom-element",[605,51362,625],{"class":610},[605,51364,628],{"class":610},[605,51366,51274],{"class":651},[605,51368,628],{"class":610},[605,51370,755],{"class":610},[605,51372,51373],{"class":607,"line":14948},[605,51374,710],{"emptyLinePlaceholder":562},[605,51376,51377,51379],{"class":607,"line":14957},[605,51378,825],{"class":610},[605,51380,49172],{"class":614},[605,51382,51383,51385,51387,51389,51391,51393,51395,51397,51399,51401],{"class":607,"line":14962},[605,51384,2963],{"class":644},[605,51386,625],{"class":610},[605,51388,628],{"class":610},[605,51390,2970],{"class":610},[605,51392,15748],{"class":651},[605,51394,1471],{"class":610},[605,51396,2978],{"class":651},[605,51398,2981],{"class":610},[605,51400,49193],{"class":651},[605,51402,2987],{"class":610},[605,51404,51405,51407,51409,51411,51413,51415,51417,51419],{"class":607,"line":14971},[605,51406,2993],{"class":610},[605,51408,2996],{"class":618},[605,51410,625],{"class":610},[605,51412,15730],{"class":610},[605,51414,49208],{"class":631},[605,51416,15736],{"class":610},[605,51418,2978],{"class":651},[605,51420,15741],{"class":610},[605,51422,51423,51425,51427,51429,51431,51433],{"class":607,"line":14990},[605,51424,2993],{"class":610},[605,51426,3483],{"class":618},[605,51428,625],{"class":610},[605,51430,628],{"class":610},[605,51432,4160],{"class":791},[605,51434,2987],{"class":610},[605,51436,51437,51439,51441,51443,51445,51447],{"class":607,"line":15000},[605,51438,2993],{"class":610},[605,51440,49235],{"class":618},[605,51442,625],{"class":610},[605,51444,628],{"class":610},[605,51446,49242],{"class":791},[605,51448,2987],{"class":610},[605,51450,51451,51453,51455,51457,51459,51461],{"class":607,"line":15037},[605,51452,2993],{"class":610},[605,51454,33793],{"class":618},[605,51456,625],{"class":610},[605,51458,628],{"class":610},[605,51460,1893],{"class":791},[605,51462,2987],{"class":610},[605,51464,51465,51467,51469,51471,51473,51475,51477,51479,51481,51483],{"class":607,"line":15046},[605,51466,2993],{"class":610},[605,51468,3690],{"class":618},[605,51470,625],{"class":610},[605,51472,628],{"class":610},[605,51474,15194],{"class":610},[605,51476,32216],{"class":791},[605,51478,1471],{"class":610},[605,51480,32216],{"class":791},[605,51482,1481],{"class":610},[605,51484,2987],{"class":610},[605,51486,51487],{"class":607,"line":15080},[605,51488,47683],{"class":610},[605,51490,51491,51493,51495,51497,51499,51501,51503,51506,51508,51511,51513,51515,51517,51519,51521,51524,51526,51529,51531,51533,51535,51537,51539,51541,51543],{"class":607,"line":15089},[605,51492,836],{"class":610},[605,51494,828],{"class":614},[605,51496,781],{"class":610},[605,51498,1459],{"class":618},[605,51500,625],{"class":610},[605,51502,628],{"class":610},[605,51504,51505],{"class":610},"[(",[605,51507,2978],{"class":651},[605,51509,51510],{"class":610}," - (",[605,51512,49193],{"class":651},[605,51514,1118],{"class":610},[605,51516,14616],{"class":651},[605,51518,49311],{"class":610},[605,51520,1893],{"class":791},[605,51522,51523],{"class":610},") / ",[605,51525,792],{"class":791},[605,51527,51528],{"class":610},") * ",[605,51530,792],{"class":791},[605,51532,1471],{"class":610},[605,51534,1893],{"class":791},[605,51536,1471],{"class":610},[605,51538,937],{"class":791},[605,51540,1481],{"class":610},[605,51542,628],{"class":610},[605,51544,637],{"class":610},[605,51546,51547,51549,51551,51553,51555,51557,51559,51561,51563,51565,51567,51569,51571,51573,51575,51577,51579,51581,51583],{"class":607,"line":15098},[605,51548,49347],{"class":610},[605,51550,49350],{"class":614},[605,51552,781],{"class":610},[605,51554,49355],{"class":618},[605,51556,625],{"class":610},[605,51558,628],{"class":610},[605,51560,15748],{"class":651},[605,51562,1118],{"class":610},[605,51564,49350],{"class":651},[605,51566,628],{"class":610},[605,51568,781],{"class":610},[605,51570,1989],{"class":618},[605,51572,625],{"class":610},[605,51574,628],{"class":610},[605,51576,15748],{"class":651},[605,51578,1118],{"class":610},[605,51580,1989],{"class":651},[605,51582,628],{"class":610},[605,51584,755],{"class":610},[605,51586,51587,51589,51591],{"class":607,"line":15119},[605,51588,49347],{"class":610},[605,51590,849],{"class":614},[605,51592,755],{"class":610},[605,51594,51595,51597,51599],{"class":607,"line":15177},[605,51596,49398],{"class":610},[605,51598,828],{"class":614},[605,51600,637],{"class":610},[605,51602,51603,51605,51607],{"class":607,"line":15236},[605,51604,857],{"class":610},[605,51606,3478],{"class":614},[605,51608,637],{"class":610},[605,51610,51611],{"class":607,"line":15256},[605,51612,710],{"emptyLinePlaceholder":562},[605,51614,51615,51617],{"class":607,"line":15288},[605,51616,825],{"class":610},[605,51618,47596],{"class":614},[605,51620,51621],{"class":607,"line":15297},[605,51622,47602],{"class":618},[605,51624,51625],{"class":607,"line":15306},[605,51626,47608],{"class":618},[605,51628,51629,51631,51633,51635,51637],{"class":607,"line":48532},[605,51630,49437],{"class":618},[605,51632,625],{"class":610},[605,51634,628],{"class":610},[605,51636,43285],{"class":631},[605,51638,2987],{"class":610},[605,51640,51641,51643,51645,51647,51649,51651,51653,51655,51657,51659,51661,51663],{"class":607,"line":48533},[605,51642,2993],{"class":610},[605,51644,1459],{"class":618},[605,51646,625],{"class":610},[605,51648,628],{"class":610},[605,51650,1466],{"class":610},[605,51652,937],{"class":791},[605,51654,1471],{"class":610},[605,51656,49465],{"class":791},[605,51658,3598],{"class":610},[605,51660,792],{"class":791},[605,51662,1481],{"class":610},[605,51664,2987],{"class":610},[605,51666,51668,51670,51672,51674,51676,51679],{"class":51667,"line":49565},[607,641],[605,51669,2993],{"class":610},[605,51671,784],{"class":618},[605,51673,625],{"class":610},[605,51675,628],{"class":610},[605,51677,51678],{"class":791},"1.15",[605,51680,2987],{"class":610},[605,51682,51684,51686,51688,51690,51692,51694,51696,51698,51700,51702],{"class":51683,"line":48534},[607,641],[605,51685,2993],{"class":610},[605,51687,49481],{"class":618},[605,51689,625],{"class":610},[605,51691,628],{"class":610},[605,51693,1466],{"class":610},[605,51695,49490],{"class":791},[605,51697,1471],{"class":610},[605,51699,937],{"class":791},[605,51701,1481],{"class":610},[605,51703,2987],{"class":610},[605,51705,51707],{"class":51706,"line":48535},[607,641],[605,51708,47683],{"class":610},[605,51710,51712,51714,51716,51719,51721,51723,51726,51728],{"class":51711,"line":48536},[607,641],[605,51713,836],{"class":610},[605,51715,18749],{"class":614},[605,51717,51718],{"class":618}," name",[605,51720,625],{"class":610},[605,51722,628],{"class":610},[605,51724,51725],{"class":631},"transition-basic",[605,51727,628],{"class":610},[605,51729,637],{"class":610},[605,51731,51733,51735],{"class":51732,"line":48537},[607,641],[605,51734,49347],{"class":610},[605,51736,51737],{"class":614},"h1\n",[605,51739,51741,51744,51746,51748,51751],{"class":51740,"line":48538},[607,641],[605,51742,51743],{"class":644},"            v-if",[605,51745,625],{"class":610},[605,51747,628],{"class":610},[605,51749,51750],{"class":651},"showTransition",[605,51752,2987],{"class":610},[605,51754,51756,51759,51761,51763,51765,51767,51770,51772,51775,51777],{"class":51755,"line":48539},[607,641],[605,51757,51758],{"class":610},"            :",[605,51760,1299],{"class":618},[605,51762,625],{"class":610},[605,51764,628],{"class":610},[605,51766,7402],{"class":610},[605,51768,51769],{"class":614},"backgroundColor",[605,51771,7407],{"class":610},[605,51773,51774],{"class":651},"bgColor",[605,51776,661],{"class":610},[605,51778,2987],{"class":610},[605,51780,51782,51785,51787,51789,51792],{"class":51781,"line":48540},[607,641],[605,51783,51784],{"class":618},"            class",[605,51786,625],{"class":610},[605,51788,628],{"class":610},[605,51790,51791],{"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,51793,2987],{"class":610},[605,51795,51797,51800,51802,51804,51806,51809],{"class":51796,"line":48541},[607,641],[605,51798,51799],{"class":610},"            @",[605,51801,31189],{"class":618},[605,51803,625],{"class":610},[605,51805,628],{"class":610},[605,51807,51808],{"class":651},"updateBackgroundColor",[605,51810,2987],{"class":610},[605,51812,51814],{"class":51813,"line":48542},[607,641],[605,51815,51816],{"class":610},"          >\n",[605,51818,51820,51823,51825,51827,51830,51832,51834,51837,51839],{"class":51819,"line":48543},[607,641],[605,51821,51822],{"class":610},"            \u003C",[605,51824,1673],{"class":614},[605,51826,11720],{"class":610},[605,51828,51829],{"class":651},"TRANSITION + ",[605,51831,700],{"class":610},[605,51833,1673],{"class":614},[605,51835,51836],{"class":610},">\u003C",[605,51838,2508],{"class":614},[605,51840,755],{"class":610},[605,51842,51844,51846,51848,51850,51853,51855,51857],{"class":51843,"line":48544},[607,641],[605,51845,51822],{"class":610},[605,51847,1677],{"class":614},[605,51849,11720],{"class":610},[605,51851,51852],{"class":651},"occlude=blending 💛",[605,51854,700],{"class":610},[605,51856,1677],{"class":614},[605,51858,637],{"class":610},[605,51860,51862,51865,51867],{"class":51861,"line":49739},[607,641],[605,51863,51864],{"class":610},"          \u003C/",[605,51866,47690],{"class":614},[605,51868,637],{"class":610},[605,51870,51872,51874,51876],{"class":51871,"line":48545},[607,641],[605,51873,49398],{"class":610},[605,51875,18749],{"class":614},[605,51877,637],{"class":610},[605,51879,51881,51883,51885],{"class":51880,"line":48546},[607,641],[605,51882,857],{"class":610},[605,51884,47719],{"class":614},[605,51886,637],{"class":610},[605,51888,51890],{"class":51889,"line":48547},[607,641],[605,51891,710],{"emptyLinePlaceholder":562},[605,51893,51895,51897,51899,51901,51903,51905,51907,51909,51911,51913],{"class":51894,"line":48548},[607,641],[605,51896,825],{"class":610},[605,51898,3067],{"class":614},[605,51900,781],{"class":610},[605,51902,1968],{"class":618},[605,51904,625],{"class":610},[605,51906,628],{"class":610},[605,51908,4088],{"class":610},[605,51910,48973],{"class":791},[605,51912,628],{"class":610},[605,51914,755],{"class":610},[605,51916,51918,51920,51922,51924,51926,51928,51930,51932,51934],{"class":51917,"line":48549},[607,641],[605,51919,825],{"class":610},[605,51921,3518],{"class":614},[605,51923,781],{"class":610},[605,51925,1886],{"class":618},[605,51927,625],{"class":610},[605,51929,628],{"class":610},[605,51931,1893],{"class":791},[605,51933,628],{"class":610},[605,51935,755],{"class":610},[605,51937,51939,51941,51943],{"class":51938,"line":48550},[607,641],[605,51940,867],{"class":610},[605,51942,729],{"class":614},[605,51944,637],{"class":610},[605,51946,51948,51950,51952],{"class":51947,"line":48551},[607,641],[605,51949,877],{"class":610},[605,51951,18670],{"class":614},[605,51953,637],{"class":610},[605,51955,51956,51958,51960],{"class":607,"line":48552},[605,51957,700],{"class":610},[605,51959,718],{"class":614},[605,51961,637],{"class":610},[605,51963,51964],{"class":607,"line":48553},[605,51965,710],{"emptyLinePlaceholder":562},[605,51967,51968,51970,51972,51974],{"class":607,"line":48554},[605,51969,611],{"class":610},[605,51971,1299],{"class":614},[605,51973,47770],{"class":618},[605,51975,637],{"class":610},[605,51977,51978,51980,51982],{"class":607,"line":48555},[605,51979,1118],{"class":610},[605,51981,50338],{"class":1172},[605,51983,1176],{"class":610},[605,51985,51986,51988,51990,51992],{"class":607,"line":49879},[605,51987,1212],{"class":47785},[605,51989,1190],{"class":610},[605,51991,50350],{"class":791},[605,51993,3329],{"class":610},[605,51995,51996,51998,52000,52002],{"class":607,"line":48556},[605,51997,1222],{"class":47785},[605,51999,1190],{"class":610},[605,52001,50350],{"class":791},[605,52003,3329],{"class":610},[605,52005,52006,52008,52010,52012],{"class":607,"line":48557},[605,52007,50369],{"class":47785},[605,52009,1190],{"class":610},[605,52011,50374],{"class":651},[605,52013,3329],{"class":610},[605,52015,52016,52018,52020,52022],{"class":607,"line":48558},[605,52017,50382],{"class":47785},[605,52019,1190],{"class":610},[605,52021,50387],{"class":651},[605,52023,3329],{"class":610},[605,52025,52026,52028,52030,52032,52034],{"class":607,"line":48559},[605,52027,47786],{"class":47785},[605,52029,1190],{"class":610},[605,52031,47791],{"class":610},[605,52033,50401],{"class":651},[605,52035,3329],{"class":610},[605,52037,52038],{"class":607,"line":48560},[605,52039,1297],{"class":610},[605,52041,52042],{"class":607,"line":48561},[605,52043,710],{"emptyLinePlaceholder":562},[605,52045,52046,52048,52051,52053,52056],{"class":607,"line":48562},[605,52047,1118],{"class":610},[605,52049,52050],{"class":1172},"html-demo-transition-heading",[605,52052,1190],{"class":610},[605,52054,52055],{"class":618},"hover",[605,52057,1176],{"class":610},[605,52059,52060,52063,52065,52068,52070,52073],{"class":607,"line":48563},[605,52061,52062],{"class":47785},"  transform",[605,52064,1190],{"class":610},[605,52066,52067],{"class":2800}," scale",[605,52069,2970],{"class":610},[605,52071,52072],{"class":791},"1.05",[605,52074,52075],{"class":610},");\n",[605,52077,52078],{"class":607,"line":48564},[605,52079,1297],{"class":610},[605,52081,52082],{"class":607,"line":48565},[605,52083,710],{"emptyLinePlaceholder":562},[605,52085,52086,52088,52091],{"class":607,"line":48566},[605,52087,1118],{"class":610},[605,52089,52090],{"class":1172},"transition-basic-enter-from",[605,52092,14031],{"class":610},[605,52094,52095,52097,52100],{"class":607,"line":50059},[605,52096,1118],{"class":610},[605,52098,52099],{"class":1172},"transition-basic-leave-to",[605,52101,1176],{"class":610},[605,52103,52104,52106,52108,52110],{"class":607,"line":50083},[605,52105,49038],{"class":47785},[605,52107,1190],{"class":610},[605,52109,11773],{"class":791},[605,52111,3329],{"class":610},[605,52113,52114,52116,52118,52121,52123,52126],{"class":607,"line":50104},[605,52115,52062],{"class":47785},[605,52117,1190],{"class":610},[605,52119,52120],{"class":2800}," translateY",[605,52122,2970],{"class":610},[605,52124,52125],{"class":791},"-20px",[605,52127,52075],{"class":610},[605,52129,52130],{"class":607,"line":50113},[605,52131,1297],{"class":610},[605,52133,52134],{"class":607,"line":50122},[605,52135,710],{"emptyLinePlaceholder":562},[605,52137,52138,52140,52143],{"class":607,"line":50127},[605,52139,1118],{"class":610},[605,52141,52142],{"class":1172},"transition-basic-enter-active",[605,52144,14031],{"class":610},[605,52146,52147,52149,52152],{"class":607,"line":50134},[605,52148,1118],{"class":610},[605,52150,52151],{"class":1172},"transition-basic-leave-active",[605,52153,1176],{"class":610},[605,52155,52156,52159,52161,52164,52167,52170],{"class":607,"line":50152},[605,52157,52158],{"class":47785},"  transition",[605,52160,1190],{"class":610},[605,52162,52163],{"class":651}," all ",[605,52165,52166],{"class":791},"0.5s",[605,52168,52169],{"class":651}," ease",[605,52171,3329],{"class":610},[605,52173,52174],{"class":607,"line":50171},[605,52175,1297],{"class":610},[605,52177,52178],{"class":607,"line":50188},[605,52179,710],{"emptyLinePlaceholder":562},[605,52181,52182,52184,52187],{"class":607,"line":50215},[605,52183,1118],{"class":610},[605,52185,52186],{"class":1172},"transition-basic-enter-to",[605,52188,14031],{"class":610},[605,52190,52191,52193,52196],{"class":607,"line":50230},[605,52192,1118],{"class":610},[605,52194,52195],{"class":1172},"transition-basic-leave-from",[605,52197,1176],{"class":610},[605,52199,52200,52202,52204,52206],{"class":607,"line":50236},[605,52201,49038],{"class":47785},[605,52203,1190],{"class":610},[605,52205,22969],{"class":791},[605,52207,3329],{"class":610},[605,52209,52210,52212,52214,52216,52218,52220],{"class":607,"line":50241},[605,52211,52062],{"class":47785},[605,52213,1190],{"class":610},[605,52215,52120],{"class":2800},[605,52217,2970],{"class":610},[605,52219,937],{"class":791},[605,52221,52075],{"class":610},[605,52223,52224],{"class":607,"line":50246},[605,52225,1297],{"class":610},[605,52227,52228,52230,52232],{"class":607,"line":50269},[605,52229,700],{"class":610},[605,52231,1299],{"class":614},[605,52233,637],{"class":610},[7473,52235,50574,52237],{"id":52236},"using-iframes",[586,52238,52239],{},"iframes",[582,52241,52242,52243,52245],{},"You can achieve pretty cool results with the ",[586,52244,47719],{}," 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,52247,52248],{},[52249,52250],"objects-html-iframe-demo",{},[47904,52252,47906,52253,52255],{},[47908,52254,47910],{},[594,52256,52258],{"className":38889,"code":52257,"language":38891,"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,52259,52260,52266,52271,52276,52289,52302,52315,52328,52341,52355,52369,52373,52443],{"__ignoreMap":544},[605,52261,52262,52264],{"class":607,"line":545},[605,52263,611],{"class":610},[605,52265,48360],{"class":614},[605,52267,52268],{"class":607,"line":546},[605,52269,52270],{"class":618},"  transform\n",[605,52272,52273],{"class":607,"line":676},[605,52274,52275],{"class":618},"  center\n",[605,52277,52278,52281,52283,52285,52287],{"class":607,"line":697},[605,52279,52280],{"class":618},"  :cast-shadow",[605,52282,625],{"class":610},[605,52284,628],{"class":610},[605,52286,933],{"class":631},[605,52288,2987],{"class":610},[605,52290,52291,52294,52296,52298,52300],{"class":607,"line":707},[605,52292,52293],{"class":618},"  :receive-shadow",[605,52295,625],{"class":610},[605,52297,628],{"class":610},[605,52299,933],{"class":631},[605,52301,2987],{"class":610},[605,52303,52304,52307,52309,52311,52313],{"class":607,"line":713},[605,52305,52306],{"class":618},"  occlude",[605,52308,625],{"class":610},[605,52310,628],{"class":610},[605,52312,43285],{"class":631},[605,52314,2987],{"class":610},[605,52316,52317,52320,52322,52324,52326],{"class":607,"line":723},[605,52318,52319],{"class":618},"  :z-index-range",[605,52321,625],{"class":610},[605,52323,628],{"class":610},[605,52325,47997],{"class":631},[605,52327,2987],{"class":610},[605,52329,52330,52333,52335,52337,52339],{"class":607,"line":746},[605,52331,52332],{"class":618},"  :position-y",[605,52334,625],{"class":610},[605,52336,628],{"class":610},[605,52338,50000],{"class":631},[605,52340,2987],{"class":610},[605,52342,52343,52346,52348,52350,52353],{"class":607,"line":758},[605,52344,52345],{"class":618},"  :portal",[605,52347,625],{"class":610},[605,52349,628],{"class":610},[605,52351,52352],{"class":631},"portalRef",[605,52354,2987],{"class":610},[605,52356,52357,52360,52362,52364,52367],{"class":607,"line":768},[605,52358,52359],{"class":618},"  :style",[605,52361,625],{"class":610},[605,52363,628],{"class":610},[605,52365,52366],{"class":631},"{ userSelect: 'none' }",[605,52368,2987],{"class":610},[605,52370,52371],{"class":607,"line":773},[605,52372,637],{"class":610},[605,52374,52375,52377,52380,52382,52384,52386,52389,52391,52394,52396,52398,52401,52403,52406,52408,52410,52412,52414,52417,52419,52421,52424,52426,52429,52431,52433,52435,52437,52439,52441],{"class":607,"line":799},[605,52376,726],{"class":610},[605,52378,52379],{"class":614},"iframe",[605,52381,18673],{"class":618},[605,52383,625],{"class":610},[605,52385,628],{"class":610},[605,52387,52388],{"class":631},"w-[700px] h-[500px]",[605,52390,628],{"class":610},[605,52392,52393],{"class":618}," src",[605,52395,625],{"class":610},[605,52397,628],{"class":610},[605,52399,52400],{"class":631},"https://tresjs.org",[605,52402,628],{"class":610},[605,52404,52405],{"class":618}," frameborder",[605,52407,625],{"class":610},[605,52409,628],{"class":610},[605,52411,937],{"class":631},[605,52413,628],{"class":610},[605,52415,52416],{"class":618}," :width",[605,52418,625],{"class":610},[605,52420,628],{"class":610},[605,52422,52423],{"class":631},"700",[605,52425,628],{"class":610},[605,52427,52428],{"class":618}," :height",[605,52430,625],{"class":610},[605,52432,628],{"class":610},[605,52434,36300],{"class":631},[605,52436,628],{"class":610},[605,52438,18722],{"class":610},[605,52440,52379],{"class":614},[605,52442,637],{"class":610},[605,52444,52445,52447,52449],{"class":607,"line":599},[605,52446,700],{"class":610},[605,52448,38891],{"class":614},[605,52450,637],{"class":610},[52452,52453,52454],"info",{},[582,52455,52456,52457,52460,52461,52464,52465],{},"The demos use ",[586,52458,52459],{},":z-index-range=\"[28, 0]\""," simply to ensure the HTML elements stay below the documentation header (which uses ",[586,52462,52463],{},"z-index: 30",").\n",[1673,52466,52467],{},"This value is for the docs only — you can ignore it or adjust it as needed.",[472,52469,894],{"id":893},[899,52471,52472,52482],{},[902,52473,52474],{},[905,52475,52476,52478,52480],{},[908,52477,910],{},[908,52479,913],{},[908,52481,916],{},[918,52483,52484,52502,52517,52535,52559,52579,52596,52614,52626,52645,52668,52708,52745,52765,52798],{},[905,52485,52486,52491,52497],{},[923,52487,52488],{},[1673,52489,52490],{},"as",[923,52492,52493,52494,1118],{},"Wrapping ",[1677,52495,52496],{},"HTML element",[923,52498,52499],{},[586,52500,52501],{},"'div'",[905,52503,52504,52509,52515],{},[923,52505,52506],{},[1673,52507,52508],{},"wrapperClass",[923,52510,2253,52511,52514],{},[586,52512,52513],{},"className"," of the wrapping element. element.",[923,52516],{},[905,52518,52519,52524,52531],{},[923,52520,52521],{},[1673,52522,52523],{},"prepend",[923,52525,52526,52527,52530],{},"Projects content ",[1677,52528,52529],{},"behind"," the canvas.",[923,52532,52533],{},[586,52534,943],{},[905,52536,52537,52541,52555],{},[923,52538,52539],{},[1673,52540,44938],{},[923,52542,1322,52543,3198,52546,52548,52549],{},[586,52544,52545],{},"transform: translate(-50%, -50%)",[2508,52547],{},"➡️ ",[1677,52550,52551,52552,52554],{},"Ignored in ",[1673,52553,5337],{}," mode.",[923,52556,52557],{},[586,52558,943],{},[905,52560,52561,52566,52575],{},[923,52562,52563],{},[1673,52564,52565],{},"fullscreen",[923,52567,52568,52569,52548,52571],{},"Aligns to the upper-left corner and fills the screen. ",[2508,52570],{},[1677,52572,52551,52573,52554],{},[1673,52574,5337],{},[923,52576,52577],{},[586,52578,943],{},[905,52580,52581,52586,52594],{},[923,52582,52583],{},[1673,52584,52585],{},"distanceFactor",[923,52587,52588,52589,52591,52592,1118],{},"Children are scaled by this factor and also by distance to a ",[586,52590,6214],{},", or zoom when using an ",[586,52593,47382],{},[923,52595],{},[905,52597,52598,52603,52609],{},[923,52599,52600],{},[1673,52601,52602],{},"zIndexRange",[923,52604,52605,52606,1118],{},"Defines the ",[1677,52607,52608],{},"Z-order range",[923,52610,52611],{},[586,52612,52613],{},"[16777271, 0]",[905,52615,52616,52621,52624],{},[923,52617,52618],{},[1673,52619,52620],{},"portal",[923,52622,52623],{},"Reference to a target container (for rendering into a different DOM node). container.",[923,52625],{},[905,52627,52628,52632,52641],{},[923,52629,52630],{},[1673,52631,5337],{},[923,52633,930,52634,52636,52637,52640],{},[586,52635,933],{},", applies ",[586,52638,52639],{},"matrix3d"," transformations — the element appears as if it is inside the 3D scene.",[923,52642,52643],{},[586,52644,943],{},[905,52646,52647,52652,52664],{},[923,52648,52649],{},[1673,52650,52651],{},"sprite",[923,52653,52654,52655,3198,52657,52548,52659],{},"Renders as a ",[1677,52656,52651],{},[2508,52658],{},[1677,52660,52661,52662,52554],{},"Only in ",[1673,52663,5337],{},[923,52665,52666],{},[586,52667,943],{},[905,52669,52670,52675,52699],{},[923,52671,52672],{},[1673,52673,52674],{},"calculatePosition",[923,52676,52677,52678,52680,44676,52683,44676,52686,52688,52689,52692,52693,52548,52695],{},"Callback function to override the default positioning logic. ",[2508,52679],{},[1673,52681,52682],{},"Type:",[586,52684,52685],{},"(object: Object3D, camera: Camera, size: { width: number; height: number }) => [number, number, number]",[2508,52687],{},"Receives the related 3D object, the active camera, and the current viewport size, and must return ",[586,52690,52691],{},"[x, y, z]"," pixel coordinates for placing the HTML element. ",[2508,52694],{},[1677,52696,52551,52697,52554],{},[1673,52698,5337],{},[923,52700,52701],{},[1112,52702,52705,52706],{"href":52703,"rel":52704},"https://github.com/Tresjs/cientos/blob/main/src/core/misc/html/utils.ts#L9-L19",[1116],"Default ",[586,52707,52674],{},[905,52709,52710,52714,52743],{},[923,52711,52712],{},[1673,52713,47867],{},[923,52715,52716,52717,52719,52720,52722,52723,52726,52727,49311,52729,52732,52733,52719,52735,52738,52739,52742],{},"Enables occlusion. Possible values: ",[2508,52718],{},"- ",[586,52721,933],{}," → Occlusion against ",[1677,52724,52725],{},"all"," scene objects ",[2508,52728],{},[586,52730,52731],{},"Ref\u003CTresObject3D>[]"," → Occlusion is enabled only against the specified objects. ",[2508,52734],{},[586,52736,52737],{},"'blending'"," → Uses a ",[1677,52740,52741],{},"blending-based"," occlusion method (CSS-like depth blending).",[923,52744],{},[905,52746,52747,52751,52757],{},[923,52748,52749],{},[1673,52750,15748],{},[923,52752,52753,52754,52756],{},"Custom ",[586,52755,15748],{}," to be used.",[923,52758,52759],{},[1112,52760,52763],{"href":52761,"rel":52762},"https://threejs.org/docs/?q=geometry#api/en/geometries/PlaneGeometry",[1116],[586,52764,26491],{},[905,52766,52767,52771,52796],{},[923,52768,52769],{},[1673,52770,15798],{},[923,52772,52773,44676,52779,44676,52781,52787,52788,44676,52790],{},[1673,52774,52775,52776,52778],{},"Custom shader ",[1677,52777,15798],{}," used for the occlusion mesh.",[2508,52780],{},[1673,52782,52783,52784,52786],{},"Only applies when ",[586,52785,50425],{}," is enabled"," (an occlusion mesh is created). ",[2508,52789],{},[1677,52791,52792,52793,52795],{},"Ignored in raycast occlusion modes (",[586,52794,933],{},", object refs).",[923,52797],{},[905,52799,52800,52805,52826],{},[923,52801,52802],{},[1673,52803,52804],{},"transparentMaterial",[923,52806,52807,44676,52813,44676,52815,44676,52820,44676,52822],{},[1673,52808,52809,52810,52812],{},"Enables ",[1677,52811,4873],{}," rendering for the occlusion material.",[2508,52814],{},[1673,52816,52783,52817,52819],{},[586,52818,50425],{}," creates an occlusion mesh.",[2508,52821],{},[1677,52823,52792,52824,52795],{},[586,52825,933],{},[923,52827,52828],{},[586,52829,943],{},[472,52831,7742],{"id":7741},[899,52833,52834,52842],{},[902,52835,52836],{},[905,52837,52838,52840],{},[908,52839,7807],{},[908,52841,913],{},[918,52843,52844],{},[905,52845,52846,52849],{},[923,52847,52848],{},"onOcclude",[923,52850,52851],{},"Called when the occlusion state changes.",[472,52853,52855],{"id":52854},"exposed-properties","Exposed properties",[899,52857,52858,52869],{},[902,52859,52860],{},[905,52861,52862,52865,52867],{},[908,52863,52864],{},"Property",[908,52866,10957],{},[908,52868,913],{},[918,52870,52871,52893,52914],{},[905,52872,52873,52877,52882],{},[923,52874,52875],{},[1673,52876,20549],{},[923,52878,52879],{},[586,52880,52881],{},"Ref\u003CTresObject3D | null>",[923,52883,52884,52885,52890,52891,1118],{},"Reference to the root ",[1673,52886,52887],{},[586,52888,52889],{},"\u003CTresGroup>"," used by ",[586,52892,47386],{},[905,52894,52895,52900,52905],{},[923,52896,52897],{},[1673,52898,52899],{},"isVisible",[923,52901,52902],{},[586,52903,52904],{},"Ref\u003Cboolean>",[923,52906,52907,52908,10149,52911,1118],{},"Reactive value that indicates whether the HTML content is ",[1673,52909,52910],{},"currently visible",[1673,52912,52913],{},"occluded",[905,52915,52916,52921,52925],{},[923,52917,52918],{},[1673,52919,52920],{},"occlusionMesh",[923,52922,52923],{},[586,52924,52881],{},[923,52926,52927,52928,52931,52932,50532,52934,52936],{},"Reference to the ",[1673,52929,52930],{},"occlusion mesh"," created when ",[586,52933,50425],{},[1673,52935,10162],{},". Used internally for geometry-based occlusion.",[472,52938,52940],{"id":52939},"caveats","Caveats",[3136,52942,52943,52976,52993,53050,53068],{},[3139,52944,52945,52946,52951,52952,52954,52955,10149,52958,52961,52962,52964,52965,52968,52969,52972,52973,52975],{},"✨ When using ",[1673,52947,52948],{},[586,52949,52950],{},"\u003CHtml occlude>",", if the ",[586,52953,47386],{}," component is ",[1673,52956,52957],{},"overlapping",[1673,52959,52960],{},"inside a 3D object",", it will be considered ",[1673,52963,52913],{}," and therefore ",[1673,52966,52967],{},"hidden",". To avoid this, ",[1673,52970,52971],{},"adjust the position"," of the ",[586,52974,47386],{}," component in your scene.",[3139,52977,52978,52979,52984,52985,52988,52989,52992],{},"🎨 When using ",[1673,52980,52981],{},[586,52982,52983],{},"\u003CHtml occlude=\"blending\">",", the HTML content is no longer ",[1673,52986,52987],{},"selectable"," because it is rendered ",[1673,52990,52991],{},"behind the canvas",". This is required to achieve the blending effect.",[3139,52994,52995,52996,52998,52999,53001,53002],{},"⚙️ When using a ",[1673,52997,50521],{}," with occlusion in ",[586,53000,43285],{}," mode, there are a few important requirements to ensure the HTML content renders correctly ⬇️",[47904,53003,47906,53004,53007],{},[47908,53005,53006],{},"See more information",[7605,53008,53009,53021,53029,53036],{},[3139,53010,53011,53012,2713,53014,53017,53018,1118],{},"If you provide your own material, it must be ",[1673,53013,4873],{},[586,53015,53016],{},"transparent: true",") with an ",[1673,53019,53020],{},"opacity \u003C 1",[3139,53022,53023,53024,53028],{},"If you are not providing a custom material, enable ",[1673,53025,53026],{},[586,53027,52804],{}," so the internal shader becomes transparent.",[3139,53030,53031,53032,53035],{},"The occlusion mesh requires a ",[1673,53033,53034],{},"fully transparent canvas background","; otherwise, thin borders or halo artifacts may appear.",[3139,53037,53038,53039,9949,53042,1471,53044,53047,53048,1118],{},"To compensate for the transparent canvas, you may ",[1673,53040,53041],{},"reapply your previous clear-color as a CSS background",[586,53043,38891],{},[586,53045,53046],{},"body",", or a wrapper ",[586,53049,18670],{},[3139,53051,53052,53053,53057,53058,53060,53061,53063,53064,53067],{},"🔶 When using ",[1673,53054,53055],{},[586,53056,52804],{},", overlapping ",[586,53059,47386],{}," elements (especially multiple ",[586,53062,50425],{}," instances) may cause ",[1673,53065,53066],{},"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,53069,53070,53071,53073,53074,53077,53078],{},"🔵 To avoid thin border artifacts when using ",[586,53072,50425],{},", make sure your ",[586,53075,53076],{},"\u003CTresCanvas>"," is fully transparent:",[594,53079,53081],{"className":596,"code":53080,"language":601,"meta":544,"style":544},"\u003CTresCanvas :alpha=\"true\" :clearAlpha=\"0\" />\n",[586,53082,53083],{"__ignoreMap":544},[605,53084,53085,53087,53089,53091,53093,53095,53097,53099,53101,53103,53106,53108,53110,53112,53114],{"class":607,"line":545},[605,53086,611],{"class":610},[605,53088,729],{"class":614},[605,53090,781],{"class":610},[605,53092,39543],{"class":618},[605,53094,625],{"class":610},[605,53096,628],{"class":610},[605,53098,933],{"class":3870},[605,53100,628],{"class":610},[605,53102,781],{"class":610},[605,53104,53105],{"class":618},"clearAlpha",[605,53107,625],{"class":610},[605,53109,628],{"class":610},[605,53111,937],{"class":791},[605,53113,628],{"class":610},[605,53115,755],{"class":610},[899,53117,53118,53128],{},[902,53119,53120],{},[905,53121,53122,53124,53126],{},[908,53123,910],{},[908,53125,913],{},[908,53127,916],{},[918,53129,53130,53143,53154,53167,53183,53198,53209,53222,53233,53246,53259,53272,53293,53308],{},[905,53131,53132,53136,53139],{},[923,53133,53134],{},[1673,53135,52490],{},[923,53137,53138],{},"Wrapping html element.",[923,53140,53141],{},[586,53142,52501],{},[905,53144,53145,53149,53152],{},[923,53146,53147],{},[1673,53148,52508],{},[923,53150,53151],{},"The className of the wrapping element.",[923,53153],{},[905,53155,53156,53160,53163],{},[923,53157,53158],{},[1673,53159,52523],{},[923,53161,53162],{},"Project content behind the canvas.",[923,53164,53165],{},[586,53166,943],{},[905,53168,53169,53173,53179],{},[923,53170,53171],{},[1673,53172,44938],{},[923,53174,53175,53176],{},"Adds a -50%/-50% CSS transform. ",[605,53177,53178],{},"Ignored in transform mode",[923,53180,53181],{},[586,53182,943],{},[905,53184,53185,53189,53194],{},[923,53186,53187],{},[1673,53188,52565],{},[923,53190,53191,53192],{},"Aligns to the upper-left corner, fills the screen. ",[605,53193,53178],{},[923,53195,53196],{},[586,53197,943],{},[905,53199,53200,53204,53207],{},[923,53201,53202],{},[1673,53203,52585],{},[923,53205,53206],{},"Children will be scaled by this factor, and also by distance to a PerspectiveCamera / zoom by an OrthographicCamera.",[923,53208],{},[905,53210,53211,53215,53218],{},[923,53212,53213],{},[1673,53214,52602],{},[923,53216,53217],{},"Z-order range.",[923,53219,53220],{},[586,53221,52613],{},[905,53223,53224,53228,53231],{},[923,53225,53226],{},[1673,53227,52620],{},[923,53229,53230],{},"Reference to target container.",[923,53232],{},[905,53234,53235,53239,53242],{},[923,53236,53237],{},[1673,53238,5337],{},[923,53240,53241],{},"If true, applies matrix3d transformations.",[923,53243,53244],{},[586,53245,943],{},[905,53247,53248,53252,53255],{},[923,53249,53250],{},[1673,53251,52651],{},[923,53253,53254],{},"Renders as sprite, but only in transform mode.",[923,53256,53257],{},[586,53258,943],{},[905,53260,53261,53265,53270],{},[923,53262,53263],{},[1673,53264,52674],{},[923,53266,53267,53268],{},"Override default positioning function. ",[605,53269,53178],{},[923,53271],{},[905,53273,53274,53278,53291],{},[923,53275,53276],{},[1673,53277,47867],{},[923,53279,53280,53281,1471,53283,1471,53285,1705,53288,53290],{},"Can be ",[586,53282,933],{},[586,53284,52731],{},[586,53286,53287],{},"'raycast'",[586,53289,52737],{},". True occludes the entire scene.",[923,53292],{},[905,53294,53295,53299,53304],{},[923,53296,53297],{},[1673,53298,15748],{},[923,53300,52753,53301,53303],{},[586,53302,15748],{}," to be use",[923,53305,53306],{},[586,53307,26491],{},[905,53309,53310,53314,53318],{},[923,53311,53312],{},[1673,53313,15798],{},[923,53315,52775,53316,53303],{},[586,53317,15798],{},[923,53319],{},[472,53321,7742],{"id":53322},"events-1",[899,53324,53325,53333],{},[902,53326,53327],{},[905,53328,53329,53331],{},[908,53330,7807],{},[908,53332,913],{},[918,53334,53335],{},[905,53336,53337,53339],{},[923,53338,52848],{},[923,53340,52851],{},[1299,53342,53343],{},"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":53345},[53346,53347,53352,53353,53358,53359,53360,53361,53362],{"id":592,"depth":546,"text":15},{"id":47860,"depth":546,"text":47861,"children":53348},[53349,53350,53351],{"id":48053,"depth":676,"text":48054},{"id":48216,"depth":676,"text":48217},{"id":48477,"depth":676,"text":48478},{"id":39227,"depth":546,"text":39228},{"id":50573,"depth":546,"text":53354,"children":53355},"Using \u003CTransition>",[53356],{"id":52236,"depth":676,"text":53357},"Using iframes",{"id":893,"depth":546,"text":894},{"id":7741,"depth":546,"text":7742},{"id":52854,"depth":546,"text":52855},{"id":52939,"depth":546,"text":52940},{"id":53322,"depth":546,"text":7742},"Allows you put DOM elements in your Tres.js scene.",{},{"title":413,"description":53363},"ywp4dBumrlkuSeTPICaWKzd__5F5_TaWhwF0rVH0VWc",{"id":53368,"title":417,"body":53369,"description":53985,"extension":559,"links":560,"meta":53986,"navigation":562,"path":418,"seo":53987,"stem":419,"__hash__":53988},"docs/2.api/9.objects/image.md",{"type":469,"value":53370,"toc":53980},[53371,53376,53382,53384,53578,53580,53587,53795,53797,53820,53978],[576,53372,53373],{},[53374,53375],"objects-image",{},[582,53377,53378,53381],{},[586,53379,53380],{},"\u003CImage />"," is a shader-based component that optionally loads then displays an image texture on a default plane or on your custom geometry.",[472,53383,15],{"id":592},[594,53385,53388],{"className":596,"code":53386,"highlights":53387,"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,53389,53390,53410,53428,53448,53456,53460,53468,53476,53508,53512,53520,53535,53558,53562,53570],{"__ignoreMap":544},[605,53391,53392,53394,53396,53398,53400,53402,53404,53406,53408],{"class":607,"line":545},[605,53393,611],{"class":610},[605,53395,615],{"class":614},[605,53397,619],{"class":618},[605,53399,622],{"class":618},[605,53401,625],{"class":610},[605,53403,628],{"class":610},[605,53405,632],{"class":631},[605,53407,628],{"class":610},[605,53409,637],{"class":610},[605,53411,53412,53414,53416,53418,53420,53422,53424,53426],{"class":607,"line":546},[605,53413,645],{"class":644},[605,53415,648],{"class":610},[605,53417,683],{"class":651},[605,53419,661],{"class":610},[605,53421,664],{"class":644},[605,53423,667],{"class":610},[605,53425,692],{"class":631},[605,53427,673],{"class":610},[605,53429,53431,53433,53435,53438,53440,53442,53444,53446],{"class":53430,"line":676},[607,641],[605,53432,645],{"class":644},[605,53434,648],{"class":610},[605,53436,53437],{"class":651}," Image",[605,53439,661],{"class":610},[605,53441,664],{"class":644},[605,53443,667],{"class":610},[605,53445,670],{"class":631},[605,53447,673],{"class":610},[605,53449,53450,53452,53454],{"class":607,"line":697},[605,53451,700],{"class":610},[605,53453,615],{"class":614},[605,53455,637],{"class":610},[605,53457,53458],{"class":607,"line":707},[605,53459,710],{"emptyLinePlaceholder":562},[605,53461,53462,53464,53466],{"class":607,"line":713},[605,53463,611],{"class":610},[605,53465,718],{"class":614},[605,53467,637],{"class":610},[605,53469,53470,53472,53474],{"class":607,"line":723},[605,53471,726],{"class":610},[605,53473,729],{"class":614},[605,53475,637],{"class":610},[605,53477,53478,53480,53482,53484,53486,53488,53490,53492,53494,53496,53498,53500,53502,53504,53506],{"class":607,"line":746},[605,53479,749],{"class":610},[605,53481,752],{"class":614},[605,53483,781],{"class":610},[605,53485,1459],{"class":618},[605,53487,625],{"class":610},[605,53489,628],{"class":610},[605,53491,1466],{"class":610},[605,53493,937],{"class":791},[605,53495,1471],{"class":610},[605,53497,937],{"class":791},[605,53499,1471],{"class":610},[605,53501,2396],{"class":791},[605,53503,1481],{"class":610},[605,53505,628],{"class":610},[605,53507,755],{"class":610},[605,53509,53510],{"class":607,"line":758},[605,53511,710],{"emptyLinePlaceholder":562},[605,53513,53515,53517],{"class":53514,"line":768},[607,641],[605,53516,749],{"class":610},[605,53518,53519],{"class":614},"Image\n",[605,53521,53523,53526,53528,53530,53533],{"class":53522,"line":773},[607,641],[605,53524,53525],{"class":618},"      url",[605,53527,625],{"class":610},[605,53529,628],{"class":610},[605,53531,53532],{"class":631},"https://upload.wikimedia.org/wikipedia/commons/f/f0/Cyanistes_caeruleus_Oulu_20150516.JPG",[605,53534,2987],{"class":610},[605,53536,53538,53540,53542,53544,53546,53548,53550,53552,53554,53556],{"class":53537,"line":799},[607,641],[605,53539,5693],{"class":610},[605,53541,784],{"class":618},[605,53543,625],{"class":610},[605,53545,628],{"class":610},[605,53547,1466],{"class":610},[605,53549,792],{"class":791},[605,53551,1471],{"class":610},[605,53553,792],{"class":791},[605,53555,1481],{"class":610},[605,53557,2987],{"class":610},[605,53559,53560],{"class":607,"line":599},[605,53561,10816],{"class":610},[605,53563,53564,53566,53568],{"class":607,"line":822},[605,53565,877],{"class":610},[605,53567,729],{"class":614},[605,53569,637],{"class":610},[605,53571,53572,53574,53576],{"class":607,"line":833},[605,53573,700],{"class":610},[605,53575,718],{"class":614},[605,53577,637],{"class":610},[472,53579,894],{"id":893},[3725,53581,53582],{},[582,53583,53584,53586],{},[586,53585,53380],{}," is a THREE.Mesh and most Mesh attributes can be used as props on the component.",[899,53588,53589,53599],{},[902,53590,53591],{},[905,53592,53593,53595,53597],{},[908,53594,910],{"align":969},[908,53596,913],{"align":969},[908,53598,916],{},[918,53600,53601,53614,53630,53643,53657,53673,53687,53705,53723,53738,53754,53772,53783],{},[905,53602,53603,53607,53610],{},[923,53604,53605],{"align":969},[586,53606,23357],{},[923,53608,53609],{"align":969},"Number of divisions in the default geometry.",[923,53611,53612],{},[586,53613,1893],{},[905,53615,53616,53620,53626],{},[923,53617,53618],{"align":969},[586,53619,784],{},[923,53621,53622,53623],{"align":969},"Scale of the geometry. ",[586,53624,53625],{},"number | [number, number]",[923,53627,53628],{},[586,53629,1893],{},[905,53631,53632,53636,53639],{},[923,53633,53634],{"align":969},[586,53635,2500],{},[923,53637,53638],{"align":969},"Color multiplied into the image texture.",[923,53640,53641],{},[586,53642,23542],{},[905,53644,53645,53650,53653],{},[923,53646,53647],{"align":969},[586,53648,53649],{},"zoom",[923,53651,53652],{"align":969},"Shrinks or enlarges the image texture.",[923,53654,53655],{},[586,53656,1893],{},[905,53658,53659,53663,53669],{},[923,53660,53661],{"align":969},[586,53662,35992],{},[923,53664,53665,53666,53668],{"align":969},"Border radius applied to the image texture. (Intended for rectangular geometries. Use with ",[586,53667,4873],{},".)",[923,53670,53671],{},[586,53672,937],{},[905,53674,53675,53680,53683],{},[923,53676,53677],{"align":969},[586,53678,53679],{},"grayscale",[923,53681,53682],{"align":969},"Power of grayscale effect. 0 is off. 1 is full grayscale.",[923,53684,53685],{},[586,53686,937],{},[905,53688,53689,53693,53701],{},[923,53690,53691],{"align":969},[586,53692,32526],{},[923,53694,53695,53696],{"align":969},"Whether this material is tone mapped according to the renderers toneMapping settings. ",[1112,53697,53700],{"href":53698,"rel":53699},"https://threejs.org/docs/?q=material#api/en/materials/Material.toneMapped",[1116],"See THREE.material.tonemapped",[923,53702,53703],{},[586,53704,937],{},[905,53706,53707,53711,53719],{},[923,53708,53709],{"align":969},[586,53710,4873],{},[923,53712,53713,53714],{"align":969},"Whether the image material should be transparent. ",[1112,53715,53718],{"href":53716,"rel":53717},"https://threejs.org/docs/?q=material#api/en/materials/Material.transparent",[1116],"See THREE.material.transparent",[923,53720,53721],{},[586,53722,943],{},[905,53724,53725,53729,53734],{},[923,53726,53727],{"align":969},[586,53728,4873],{},[923,53730,53713,53731],{"align":969},[1112,53732,53718],{"href":53716,"rel":53733},[1116],[923,53735,53736],{},[586,53737,943],{},[905,53739,53740,53744,53750],{},[923,53741,53742],{"align":969},[586,53743,4861],{},[923,53745,53746,53747],{"align":969},"Opacity of the image material. ",[1112,53748,53718],{"href":53716,"rel":53749},[1116],[923,53751,53752],{},[586,53753,1893],{},[905,53755,53756,53760,53768],{},[923,53757,53758],{"align":969},[586,53759,19976],{},[923,53761,53762,53763],{"align":969},"THREE.Side of the image material. ",[1112,53764,53767],{"href":53765,"rel":53766},"https://threejs.org/docs/?q=material#api/en/materials/Material.side",[1116],"See THREE.material.side",[923,53769,53770],{},[586,53771,21204],{},[905,53773,53774,53778,53781],{},[923,53775,53776],{"align":969},[586,53777,13433],{},[923,53779,53780],{"align":969},"Image texture to display on the geometry.",[923,53782],{},[905,53784,53785,53790,53793],{},[923,53786,53787],{"align":969},[586,53788,53789],{},"url",[923,53791,53792],{"align":969},"Image URL to load and display on the geometry.",[923,53794],{},[472,53796,52940],{"id":52939},[582,53798,53799,53800,53802,53803,53806,53807,53809,53810,53813,53814,10149,53817,45245],{},"By default, images loaded via the ",[586,53801,53789],{}," prop use the renderer’s output color space. For advanced control, pass a ",[586,53804,53805],{},"THREE.Texture"," via the ",[586,53808,13433],{}," prop and set its ",[586,53811,53812],{},"colorSpace"," (e.g., ",[586,53815,53816],{},"THREE.SRGBColorSpace",[586,53818,53819],{},"THREE.LinearSRGBColorSpace",[594,53821,53823],{"className":596,"code":53822,"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,53824,53825,53835,53853,53871,53889,53908,53924,53930,53938,53942,53950,53970],{"__ignoreMap":544},[605,53826,53827,53829,53831,53833],{"class":607,"line":545},[605,53828,611],{"class":610},[605,53830,615],{"class":614},[605,53832,619],{"class":618},[605,53834,637],{"class":610},[605,53836,53837,53839,53841,53843,53845,53847,53849,53851],{"class":607,"line":546},[605,53838,645],{"class":644},[605,53840,648],{"class":610},[605,53842,13331],{"class":651},[605,53844,661],{"class":610},[605,53846,664],{"class":644},[605,53848,667],{"class":610},[605,53850,670],{"class":631},[605,53852,673],{"class":610},[605,53854,53855,53857,53859,53861,53863,53865,53867,53869],{"class":607,"line":676},[605,53856,645],{"class":644},[605,53858,648],{"class":610},[605,53860,37896],{"class":651},[605,53862,661],{"class":610},[605,53864,664],{"class":644},[605,53866,667],{"class":610},[605,53868,2678],{"class":631},[605,53870,673],{"class":610},[605,53872,53873,53875,53877,53880,53882,53884,53886],{"class":607,"line":697},[605,53874,2689],{"class":618},[605,53876,648],{"class":610},[605,53878,53879],{"class":651}," state ",[605,53881,5544],{"class":610},[605,53883,2766],{"class":610},[605,53885,13331],{"class":2800},[605,53887,53888],{"class":651},"(URL)\n",[605,53890,53891,53893,53896,53898,53900,53902,53904,53906],{"class":607,"line":707},[605,53892,5485],{"class":2800},[605,53894,53895],{"class":651},"(state",[605,53897,655],{"class":610},[605,53899,2713],{"class":610},[605,53901,13433],{"class":5495},[605,53903,4125],{"class":610},[605,53905,5501],{"class":618},[605,53907,1176],{"class":610},[605,53909,53910,53913,53915,53917,53919,53921],{"class":607,"line":713},[605,53911,53912],{"class":651},"  texture",[605,53914,1118],{"class":610},[605,53916,53812],{"class":651},[605,53918,2766],{"class":610},[605,53920,37896],{"class":651},[605,53922,53923],{"class":1181}," // assign a custom color space\n",[605,53925,53926,53928],{"class":607,"line":723},[605,53927,5544],{"class":610},[605,53929,5539],{"class":651},[605,53931,53932,53934,53936],{"class":607,"line":746},[605,53933,700],{"class":610},[605,53935,615],{"class":614},[605,53937,637],{"class":610},[605,53939,53940],{"class":607,"line":758},[605,53941,710],{"emptyLinePlaceholder":562},[605,53943,53944,53946,53948],{"class":607,"line":768},[605,53945,611],{"class":610},[605,53947,718],{"class":614},[605,53949,637],{"class":610},[605,53951,53952,53954,53956,53958,53960,53962,53964,53966,53968],{"class":607,"line":773},[605,53953,726],{"class":610},[605,53955,417],{"class":614},[605,53957,781],{"class":610},[605,53959,13433],{"class":618},[605,53961,625],{"class":610},[605,53963,628],{"class":610},[605,53965,13433],{"class":651},[605,53967,628],{"class":610},[605,53969,755],{"class":610},[605,53971,53972,53974,53976],{"class":607,"line":799},[605,53973,700],{"class":610},[605,53975,718],{"class":614},[605,53977,637],{"class":610},[1299,53979,20734],{},{"title":544,"searchDepth":545,"depth":546,"links":53981},[53982,53983,53984],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},{"id":52939,"depth":546,"text":52940},"Display image textures with shader-based effects.",{},{"title":417,"description":53985},"jEAPHxilh9_Gg2oZg9-kp8JsJ1tSjkYRBYlGbuY9YbM",{"id":53990,"title":421,"body":53991,"description":54826,"extension":559,"links":560,"meta":54827,"navigation":562,"path":422,"seo":54828,"stem":423,"__hash__":54829},"docs/2.api/9.objects/marching-cubes.md",{"type":469,"value":53992,"toc":54820},[53993,53998,54009,54012,54037,54039,54633,54635,54705,54709,54754,54758,54817],[576,53994,53995],{},[53996,53997],"objects-marching-cubes",{},[582,53999,54000,54003,54004,1118],{},[586,54001,54002],{},"\u003CMarchingCubes />"," is a wrapper around ",[1112,54005,54008],{"href":54006,"rel":54007},"https://threejs.org/examples/#webgl_marchingcubes",[1116],"THREE's Marching Cubes",[582,54010,54011],{},"It includes 3 components:",[3136,54013,54014,54027,54032],{},[3139,54015,54016,54018,54019,54022,54023,54026],{},[586,54017,54002],{}," – container element for ",[586,54020,54021],{},"\u003CMarchingCube />","s and ",[586,54024,54025],{},"\u003CMarchingPlane />","s",[3139,54028,54029,54031],{},[586,54030,54021],{}," - an individual metaball",[3139,54033,54034,54036],{},[586,54035,54025],{}," – optional bounding plane that interacts with the metaballs",[472,54038,15],{"id":592},[594,54040,54043],{"className":596,"code":54041,"highlights":54042,"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,54044,54045,54065,54099,54117,54140,54144,54177,54236,54244,54248,54256,54288,54296,54304,54308,54343,54364,54372,54394,54409,54424,54429,54487,54496,54500,54508,54563,54617,54625],{"__ignoreMap":544},[605,54046,54047,54049,54051,54053,54055,54057,54059,54061,54063],{"class":607,"line":545},[605,54048,611],{"class":610},[605,54050,615],{"class":614},[605,54052,619],{"class":618},[605,54054,622],{"class":618},[605,54056,625],{"class":610},[605,54058,628],{"class":610},[605,54060,632],{"class":631},[605,54062,628],{"class":610},[605,54064,637],{"class":610},[605,54066,54068,54070,54072,54075,54077,54080,54082,54085,54087,54089,54091,54093,54095,54097],{"class":54067,"line":546},[607,641],[605,54069,645],{"class":644},[605,54071,648],{"class":610},[605,54073,54074],{"class":651}," MarchingCube",[605,54076,655],{"class":610},[605,54078,54079],{"class":651}," MarchingCubes",[605,54081,655],{"class":610},[605,54083,54084],{"class":651}," MarchingPlane",[605,54086,655],{"class":610},[605,54088,658],{"class":651},[605,54090,661],{"class":610},[605,54092,664],{"class":644},[605,54094,667],{"class":610},[605,54096,670],{"class":631},[605,54098,673],{"class":610},[605,54100,54101,54103,54105,54107,54109,54111,54113,54115],{"class":607,"line":676},[605,54102,645],{"class":644},[605,54104,648],{"class":610},[605,54106,683],{"class":651},[605,54108,661],{"class":610},[605,54110,664],{"class":644},[605,54112,667],{"class":610},[605,54114,692],{"class":631},[605,54116,673],{"class":610},[605,54118,54119,54121,54123,54126,54128,54130,54132,54134,54136,54138],{"class":607,"line":697},[605,54120,645],{"class":644},[605,54122,648],{"class":610},[605,54124,54125],{"class":651}," NoToneMapping",[605,54127,655],{"class":610},[605,54129,23203],{"class":651},[605,54131,661],{"class":610},[605,54133,664],{"class":644},[605,54135,667],{"class":610},[605,54137,2678],{"class":631},[605,54139,673],{"class":610},[605,54141,54142],{"class":607,"line":707},[605,54143,710],{"emptyLinePlaceholder":562},[605,54145,54146,54148,54151,54153,54155,54157,54160,54162,54164,54166,54168,54170,54172,54174],{"class":607,"line":713},[605,54147,2689],{"class":618},[605,54149,54150],{"class":651}," rand ",[605,54152,625],{"class":610},[605,54154,51215],{"class":610},[605,54156,5501],{"class":618},[605,54158,54159],{"class":651}," (Math",[605,54161,1118],{"class":610},[605,54163,51159],{"class":2800},[605,54165,51162],{"class":651},[605,54167,4088],{"class":610},[605,54169,35498],{"class":791},[605,54171,2748],{"class":651},[605,54173,16566],{"class":610},[605,54175,54176],{"class":791}," 1.25\n",[605,54178,54179,54181,54184,54186,54189,54191,54193,54195,54197,54200,54202,54205,54207,54209,54211,54213,54215,54217,54220,54222,54224,54227,54229,54231,54233],{"class":607,"line":723},[605,54180,2689],{"class":618},[605,54182,54183],{"class":651}," positions ",[605,54185,625],{"class":610},[605,54187,54188],{"class":651}," Array",[605,54190,1118],{"class":610},[605,54192,10669],{"class":2800},[605,54194,2970],{"class":651},[605,54196,34731],{"class":610},[605,54198,54199],{"class":614}," length",[605,54201,1190],{"class":610},[605,54203,54204],{"class":791}," 40",[605,54206,34744],{"class":610},[605,54208,51215],{"class":610},[605,54210,5501],{"class":618},[605,54212,2841],{"class":610},[605,54214,23203],{"class":2800},[605,54216,2970],{"class":651},[605,54218,54219],{"class":2800},"rand",[605,54221,14395],{"class":651},[605,54223,655],{"class":610},[605,54225,54226],{"class":2800}," rand",[605,54228,14395],{"class":651},[605,54230,655],{"class":610},[605,54232,54226],{"class":2800},[605,54234,54235],{"class":651},"()))\n",[605,54237,54238,54240,54242],{"class":607,"line":746},[605,54239,700],{"class":610},[605,54241,615],{"class":614},[605,54243,637],{"class":610},[605,54245,54246],{"class":607,"line":758},[605,54247,710],{"emptyLinePlaceholder":562},[605,54249,54250,54252,54254],{"class":607,"line":768},[605,54251,611],{"class":610},[605,54253,718],{"class":614},[605,54255,637],{"class":610},[605,54257,54258,54260,54262,54264,54266,54268,54270,54272,54274,54277,54279,54281,54284,54286],{"class":607,"line":773},[605,54259,726],{"class":610},[605,54261,729],{"class":614},[605,54263,732],{"class":618},[605,54265,625],{"class":610},[605,54267,628],{"class":610},[605,54269,739],{"class":631},[605,54271,628],{"class":610},[605,54273,781],{"class":610},[605,54275,54276],{"class":618},"tone-mapping",[605,54278,625],{"class":610},[605,54280,628],{"class":610},[605,54282,54283],{"class":651},"NoToneMapping",[605,54285,628],{"class":610},[605,54287,637],{"class":610},[605,54289,54290,54292,54294],{"class":607,"line":799},[605,54291,749],{"class":610},[605,54293,752],{"class":614},[605,54295,755],{"class":610},[605,54297,54298,54300,54302],{"class":607,"line":599},[605,54299,749],{"class":610},[605,54301,763],{"class":614},[605,54303,755],{"class":610},[605,54305,54306],{"class":607,"line":822},[605,54307,710],{"emptyLinePlaceholder":562},[605,54309,54311,54313,54315,54317,54319,54321,54323,54325,54327,54329,54332,54334,54336,54339,54341],{"class":54310,"line":833},[607,641],[605,54312,749],{"class":610},[605,54314,421],{"class":614},[605,54316,781],{"class":610},[605,54318,21937],{"class":618},[605,54320,625],{"class":610},[605,54322,628],{"class":610},[605,54324,28007],{"class":791},[605,54326,628],{"class":610},[605,54328,781],{"class":610},[605,54330,54331],{"class":618},"max-poly-count",[605,54333,625],{"class":610},[605,54335,628],{"class":610},[605,54337,54338],{"class":791},"40000",[605,54340,628],{"class":610},[605,54342,637],{"class":610},[605,54344,54346,54348,54351,54354,54356,54358,54360,54362],{"class":54345,"line":844},[607,641],[605,54347,825],{"class":610},[605,54349,54350],{"class":614},"MarchingPlane",[605,54352,54353],{"class":618}," plane-type",[605,54355,625],{"class":610},[605,54357,628],{"class":610},[605,54359,32772],{"class":631},[605,54361,628],{"class":610},[605,54363,755],{"class":610},[605,54365,54367,54369],{"class":54366,"line":854},[607,641],[605,54368,825],{"class":610},[605,54370,54371],{"class":614},"MarchingCube\n",[605,54373,54375,54377,54379,54381,54383,54385,54387,54390,54392],{"class":54374,"line":600},[607,641],[605,54376,2963],{"class":644},[605,54378,625],{"class":610},[605,54380,628],{"class":610},[605,54382,1459],{"class":651},[605,54384,1471],{"class":610},[605,54386,18708],{"class":651},[605,54388,54389],{"class":610}," of ",[605,54391,2984],{"class":651},[605,54393,2987],{"class":610},[605,54395,54397,54399,54401,54403,54405,54407],{"class":54396,"line":874},[607,641],[605,54398,2993],{"class":610},[605,54400,2996],{"class":618},[605,54402,625],{"class":610},[605,54404,628],{"class":610},[605,54406,18708],{"class":651},[605,54408,2987],{"class":610},[605,54410,54412,54414,54416,54418,54420,54422],{"class":54411,"line":884},[607,641],[605,54413,2993],{"class":610},[605,54415,1459],{"class":618},[605,54417,625],{"class":610},[605,54419,628],{"class":610},[605,54421,1459],{"class":651},[605,54423,2987],{"class":610},[605,54425,54427],{"class":54426,"line":2952},[607,641],[605,54428,3050],{"class":610},[605,54430,54432,54434,54436,54439,54441,54443,54446,54448,54450,54453,54455,54457,54459,54461,54463,54465,54467,54470,54472,54474,54477,54479,54481,54483,54485],{"class":54431,"line":2960},[607,641],[605,54433,825],{"class":610},[605,54435,4664],{"class":614},[605,54437,54438],{"class":618}," specular",[605,54440,625],{"class":610},[605,54442,628],{"class":610},[605,54444,54445],{"class":631},"#111111",[605,54447,628],{"class":610},[605,54449,781],{"class":610},[605,54451,54452],{"class":618},"shininess",[605,54454,625],{"class":610},[605,54456,628],{"class":610},[605,54458,21690],{"class":791},[605,54460,628],{"class":610},[605,54462,3978],{"class":618},[605,54464,625],{"class":610},[605,54466,628],{"class":610},[605,54468,54469],{"class":631},"#049ef4",[605,54471,628],{"class":610},[605,54473,781],{"class":610},[605,54475,54476],{"class":618},"reflectivity",[605,54478,625],{"class":610},[605,54480,628],{"class":610},[605,54482,1893],{"class":791},[605,54484,628],{"class":610},[605,54486,755],{"class":610},[605,54488,54490,54492,54494],{"class":54489,"line":2990},[607,641],[605,54491,867],{"class":610},[605,54493,421],{"class":614},[605,54495,637],{"class":610},[605,54497,54498],{"class":607,"line":3007},[605,54499,710],{"emptyLinePlaceholder":562},[605,54501,54502,54504,54506],{"class":607,"line":3022},[605,54503,749],{"class":610},[605,54505,778],{"class":614},[605,54507,755],{"class":610},[605,54509,54510,54512,54514,54516,54518,54520,54523,54525,54527,54529,54531,54533,54535,54537,54539,54541,54543,54545,54547,54549,54551,54553,54555,54557,54559,54561],{"class":607,"line":3047},[605,54511,749],{"class":610},[605,54513,3539],{"class":614},[605,54515,3978],{"class":618},[605,54517,625],{"class":610},[605,54519,628],{"class":610},[605,54521,54522],{"class":631},"#ffffff",[605,54524,628],{"class":610},[605,54526,781],{"class":610},[605,54528,1886],{"class":618},[605,54530,625],{"class":610},[605,54532,628],{"class":610},[605,54534,4160],{"class":791},[605,54536,628],{"class":610},[605,54538,781],{"class":610},[605,54540,1459],{"class":618},[605,54542,625],{"class":610},[605,54544,628],{"class":610},[605,54546,1466],{"class":610},[605,54548,937],{"class":791},[605,54550,1471],{"class":610},[605,54552,40778],{"class":791},[605,54554,1471],{"class":610},[605,54556,937],{"class":791},[605,54558,1481],{"class":610},[605,54560,628],{"class":610},[605,54562,755],{"class":610},[605,54564,54565,54567,54569,54571,54573,54575,54577,54579,54581,54583,54585,54587,54589,54591,54593,54595,54597,54599,54601,54603,54605,54607,54609,54611,54613,54615],{"class":607,"line":2591},[605,54566,749],{"class":610},[605,54568,3539],{"class":614},[605,54570,3978],{"class":618},[605,54572,625],{"class":610},[605,54574,628],{"class":610},[605,54576,54522],{"class":631},[605,54578,628],{"class":610},[605,54580,781],{"class":610},[605,54582,1886],{"class":618},[605,54584,625],{"class":610},[605,54586,628],{"class":610},[605,54588,4160],{"class":791},[605,54590,628],{"class":610},[605,54592,781],{"class":610},[605,54594,1459],{"class":618},[605,54596,625],{"class":610},[605,54598,628],{"class":610},[605,54600,1466],{"class":610},[605,54602,6028],{"class":791},[605,54604,1471],{"class":610},[605,54606,40778],{"class":791},[605,54608,1471],{"class":610},[605,54610,6028],{"class":791},[605,54612,1481],{"class":610},[605,54614,628],{"class":610},[605,54616,755],{"class":610},[605,54618,54619,54621,54623],{"class":607,"line":3062},[605,54620,877],{"class":610},[605,54622,729],{"class":614},[605,54624,637],{"class":610},[605,54626,54627,54629,54631],{"class":607,"line":3092},[605,54628,700],{"class":610},[605,54630,718],{"class":614},[605,54632,637],{"class":610},[472,54634,894],{"id":893},[899,54636,54637,54647],{},[902,54638,54639],{},[905,54640,54641,54643,54645],{},[908,54642,910],{"align":969},[908,54644,913],{"align":969},[908,54646,916],{},[918,54648,54649,54662,54677,54691],{},[905,54650,54651,54655,54658],{},[923,54652,54653],{"align":969},[586,54654,21937],{},[923,54656,54657],{"align":969},"Resolution of the marching cube field. Higher resolution produces smoother meshes at the cost of performance and memory.",[923,54659,54660],{},[586,54661,49490],{},[905,54663,54664,54669,54672],{},[923,54665,54666],{"align":969},[586,54667,54668],{},"maxPolyCount",[923,54670,54671],{"align":969},"Maximum number of polygons to generate.",[923,54673,54674],{},[586,54675,54676],{},"10000",[905,54678,54679,54684,54687],{},[923,54680,54681],{"align":969},[586,54682,54683],{},"enableUvs",[923,54685,54686],{"align":969},"Whether UVs are enabled.",[923,54688,54689],{},[586,54690,943],{},[905,54692,54693,54698,54701],{},[923,54694,54695],{"align":969},[586,54696,54697],{},"enableColors",[923,54699,54700],{"align":969},"Whether vertex colors are enabled.",[923,54702,54703],{},[586,54704,943],{},[472,54706,54708],{"id":54707},"marchingcube-props","MarchingCube Props",[899,54710,54711,54721],{},[902,54712,54713],{},[905,54714,54715,54717,54719],{},[908,54716,910],{"align":969},[908,54718,913],{"align":969},[908,54720,916],{},[918,54722,54723,54737],{},[905,54724,54725,54730,54733],{},[923,54726,54727],{"align":969},[586,54728,54729],{},"strength",[923,54731,54732],{"align":969},"How strongly this cube affects the marching cube field.",[923,54734,54735],{},[586,54736,1513],{},[905,54738,54739,54744,54750],{},[923,54740,54741],{"align":969},[586,54742,54743],{},"subtract",[923,54745,54746,54747,54749],{"align":969},"How quickly strength moves to ",[586,54748,937],{}," over distance.",[923,54751,54752],{},[586,54753,25240],{},[472,54755,54757],{"id":54756},"marchingplane-props","MarchingPlane Props",[899,54759,54760,54770],{},[902,54761,54762],{},[905,54763,54764,54766,54768],{},[908,54765,910],{"align":969},[908,54767,913],{"align":969},[908,54769,916],{},[918,54771,54772,54790,54803],{},[905,54773,54774,54779,54785],{},[923,54775,54776],{"align":969},[586,54777,54778],{},"planeType",[923,54780,54781,54782],{"align":969},"Which axis the plane appears on. ",[586,54783,54784],{},"'x' | 'y' | 'z'",[923,54786,54787],{},[586,54788,54789],{},"'x'",[905,54791,54792,54796,54799],{},[923,54793,54794],{"align":969},[586,54795,54729],{},[923,54797,54798],{"align":969},"How strongly this plane affects the marching cube field.",[923,54800,54801],{},[586,54802,1513],{},[905,54804,54805,54809,54813],{},[923,54806,54807],{"align":969},[586,54808,54743],{},[923,54810,54746,54811,54749],{"align":969},[586,54812,937],{},[923,54814,54815],{},[586,54816,25240],{},[1299,54818,54819],{},"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":54821},[54822,54823,54824,54825],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},{"id":54707,"depth":546,"text":54708},{"id":54756,"depth":546,"text":54757},"Create organic blob-like shapes using metaballs.",{},{"title":421,"description":54826},"dt9UUvCiy--PP6CSMtwwdcksel8iajosft8nxTQtolk",{"id":54831,"title":425,"body":54832,"description":55828,"extension":559,"links":560,"meta":55829,"navigation":562,"path":426,"seo":55830,"stem":427,"__hash__":55831},"docs/2.api/9.objects/reflector.md",{"type":469,"value":54833,"toc":55821},[54834,54839,54853,54855,55118,55120,55203,55211,55215,55218,55495,55498,55501,55505,55819],[576,54835,54836],{},[54837,54838],"objects-reflector",{},[582,54840,2253,54841,54843,54844,54849,54850,54852],{},[586,54842,2256],{}," package provides an abstraction of the ",[1112,54845,54848],{"href":54846,"rel":54847},"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,54851,5299],{}," so all the default props can be passed as well:",[472,54854,15],{"id":592},[594,54856,54858],{"className":596,"code":54857,"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,54859,54860,54880,54899,54907,54911,54919,54932,54964,54972,54976,54984,54991,55025,55041,55054,55058,55086,55094,55102,55110],{"__ignoreMap":544},[605,54861,54862,54864,54866,54868,54870,54872,54874,54876,54878],{"class":607,"line":545},[605,54863,611],{"class":610},[605,54865,615],{"class":614},[605,54867,619],{"class":618},[605,54869,622],{"class":618},[605,54871,625],{"class":610},[605,54873,628],{"class":610},[605,54875,632],{"class":631},[605,54877,628],{"class":610},[605,54879,637],{"class":610},[605,54881,54882,54884,54886,54889,54891,54893,54895,54897],{"class":607,"line":546},[605,54883,645],{"class":644},[605,54885,648],{"class":610},[605,54887,54888],{"class":651}," Reflector",[605,54890,661],{"class":610},[605,54892,664],{"class":644},[605,54894,667],{"class":610},[605,54896,670],{"class":631},[605,54898,673],{"class":610},[605,54900,54901,54903,54905],{"class":607,"line":676},[605,54902,700],{"class":610},[605,54904,615],{"class":614},[605,54906,637],{"class":610},[605,54908,54909],{"class":607,"line":697},[605,54910,710],{"emptyLinePlaceholder":562},[605,54912,54913,54915,54917],{"class":607,"line":707},[605,54914,611],{"class":610},[605,54916,718],{"class":614},[605,54918,637],{"class":610},[605,54920,54921,54923,54925,54927,54930],{"class":607,"line":713},[605,54922,726],{"class":610},[605,54924,729],{"class":614},[605,54926,35777],{"class":618},[605,54928,54929],{"class":618}," alpha",[605,54931,637],{"class":610},[605,54933,54934,54936,54938,54940,54942,54944,54946,54948,54950,54952,54954,54956,54958,54960,54962],{"class":607,"line":723},[605,54935,749],{"class":610},[605,54937,752],{"class":614},[605,54939,781],{"class":610},[605,54941,1459],{"class":618},[605,54943,625],{"class":610},[605,54945,628],{"class":610},[605,54947,1466],{"class":610},[605,54949,937],{"class":791},[605,54951,1471],{"class":610},[605,54953,937],{"class":791},[605,54955,1471],{"class":610},[605,54957,4160],{"class":791},[605,54959,1481],{"class":610},[605,54961,628],{"class":610},[605,54963,755],{"class":610},[605,54965,54966,54968,54970],{"class":607,"line":746},[605,54967,749],{"class":610},[605,54969,763],{"class":614},[605,54971,755],{"class":610},[605,54973,54974],{"class":607,"line":758},[605,54975,710],{"emptyLinePlaceholder":562},[605,54977,54978,54980,54982],{"class":607,"line":768},[605,54979,749],{"class":610},[605,54981,14995],{"class":614},[605,54983,637],{"class":610},[605,54985,54986,54988],{"class":607,"line":773},[605,54987,825],{"class":610},[605,54989,54990],{"class":614},"Reflector\n",[605,54992,54993,54995,54997,54999,55001,55003,55005,55007,55009,55011,55013,55015,55017,55019,55021,55023],{"class":607,"line":799},[605,54994,2993],{"class":610},[605,54996,21584],{"class":618},[605,54998,625],{"class":610},[605,55000,628],{"class":610},[605,55002,15194],{"class":610},[605,55004,21593],{"class":651},[605,55006,1118],{"class":610},[605,55008,21598],{"class":651},[605,55010,49306],{"class":610},[605,55012,1513],{"class":791},[605,55014,1471],{"class":610},[605,55016,937],{"class":791},[605,55018,1471],{"class":610},[605,55020,937],{"class":791},[605,55022,1481],{"class":610},[605,55024,2987],{"class":610},[605,55026,55027,55029,55031,55033,55035,55037,55039],{"class":607,"line":599},[605,55028,2993],{"class":610},[605,55030,1968],{"class":618},[605,55032,625],{"class":610},[605,55034,628],{"class":610},[605,55036,4088],{"class":610},[605,55038,792],{"class":791},[605,55040,2987],{"class":610},[605,55042,55043,55045,55047,55049,55052],{"class":607,"line":822},[605,55044,21729],{"class":618},[605,55046,625],{"class":610},[605,55048,628],{"class":610},[605,55050,55051],{"class":631},"#fff",[605,55053,2987],{"class":610},[605,55055,55056],{"class":607,"line":833},[605,55057,47683],{"class":610},[605,55059,55060,55062,55064,55066,55068,55070,55072,55074,55076,55078,55080,55082,55084],{"class":607,"line":844},[605,55061,836],{"class":610},[605,55063,4027],{"class":614},[605,55065,781],{"class":610},[605,55067,1989],{"class":618},[605,55069,625],{"class":610},[605,55071,628],{"class":610},[605,55073,1466],{"class":610},[605,55075,1478],{"class":791},[605,55077,1471],{"class":610},[605,55079,1478],{"class":791},[605,55081,1481],{"class":610},[605,55083,628],{"class":610},[605,55085,755],{"class":610},[605,55087,55088,55090,55092],{"class":607,"line":854},[605,55089,857],{"class":610},[605,55091,425],{"class":614},[605,55093,637],{"class":610},[605,55095,55096,55098,55100],{"class":607,"line":600},[605,55097,867],{"class":610},[605,55099,14995],{"class":614},[605,55101,637],{"class":610},[605,55103,55104,55106,55108],{"class":607,"line":874},[605,55105,877],{"class":610},[605,55107,729],{"class":614},[605,55109,637],{"class":610},[605,55111,55112,55114,55116],{"class":607,"line":884},[605,55113,700],{"class":610},[605,55115,718],{"class":614},[605,55117,637],{"class":610},[472,55119,894],{"id":893},[899,55121,55122,55132],{},[902,55123,55124],{},[905,55125,55126,55128,55130],{},[908,55127,910],{"align":969},[908,55129,913],{"align":969},[908,55131,916],{},[918,55133,55134,55146,55157,55168,55179,55191],{},[905,55135,55136,55140,55143],{},[923,55137,55138],{"align":969},[1673,55139,2500],{},[923,55141,55142],{"align":969},"The base color that's combine with the mirror effect",[923,55144,55145],{},"'#333'",[905,55147,55148,55152,55155],{},[923,55149,55150],{"align":969},[1673,55151,39429],{},[923,55153,55154],{"align":969},"the width of the texture to render on the mirror",[923,55156,34066],{},[905,55158,55159,55163,55166],{},[923,55160,55161],{"align":969},[1673,55162,39441],{},[923,55164,55165],{"align":969},"the height of the texture to render on the mirror",[923,55167,34066],{},[905,55169,55170,55174,55177],{},[923,55171,55172],{"align":969},[1673,55173,39531],{},[923,55175,55176],{"align":969},"to use the clipBias property",[923,55178,937],{},[905,55180,55181,55186,55189],{},[923,55182,55183],{"align":969},[1673,55184,55185],{},"multisample",[923,55187,55188],{"align":969},"how many samplers will be render",[923,55190,3490],{},[905,55192,55193,55198,55200],{},[923,55194,55195],{"align":969},[1673,55196,55197],{},"shader",[923,55199,41350],{"align":969},[923,55201,55202],{},"Reflector.ReflectorShader",[3725,55204,55205],{},[582,55206,55207,55208,55210],{},"All the props except the ",[586,55209,2500],{},", are not reactive",[472,55212,55214],{"id":55213},"custom-mirror-effect","Custom mirror effect",[582,55216,55217],{},"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,55219,55221],{"className":596,"code":55220,"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,55222,55223,55243,55259,55263,55274,55279,55283,55291,55295,55303,55315,55347,55352,55358,55392,55408,55420,55435,55439,55467,55475,55479,55487],{"__ignoreMap":544},[605,55224,55225,55227,55229,55231,55233,55235,55237,55239,55241],{"class":607,"line":545},[605,55226,611],{"class":610},[605,55228,615],{"class":614},[605,55230,619],{"class":618},[605,55232,622],{"class":618},[605,55234,625],{"class":610},[605,55236,628],{"class":610},[605,55238,632],{"class":631},[605,55240,628],{"class":610},[605,55242,637],{"class":610},[605,55244,55245,55247,55250,55252,55254,55257],{"class":607,"line":546},[605,55246,645],{"class":644},[605,55248,55249],{"class":651}," vertexShader ",[605,55251,10669],{"class":644},[605,55253,667],{"class":610},[605,55255,55256],{"class":631},"MyCustomVertexShader.glsl",[605,55258,673],{"class":610},[605,55260,55261],{"class":607,"line":676},[605,55262,710],{"emptyLinePlaceholder":562},[605,55264,55265,55267,55270,55272],{"class":607,"line":697},[605,55266,2689],{"class":618},[605,55268,55269],{"class":651}," customShader ",[605,55271,625],{"class":610},[605,55273,1176],{"class":610},[605,55275,55276],{"class":607,"line":707},[605,55277,55278],{"class":651},"  vertexShader\n",[605,55280,55281],{"class":607,"line":713},[605,55282,1297],{"class":610},[605,55284,55285,55287,55289],{"class":607,"line":723},[605,55286,700],{"class":610},[605,55288,615],{"class":614},[605,55290,637],{"class":610},[605,55292,55293],{"class":607,"line":746},[605,55294,710],{"emptyLinePlaceholder":562},[605,55296,55297,55299,55301],{"class":607,"line":758},[605,55298,611],{"class":610},[605,55300,718],{"class":614},[605,55302,637],{"class":610},[605,55304,55305,55307,55309,55311,55313],{"class":607,"line":768},[605,55306,726],{"class":610},[605,55308,729],{"class":614},[605,55310,35777],{"class":618},[605,55312,54929],{"class":618},[605,55314,637],{"class":610},[605,55316,55317,55319,55321,55323,55325,55327,55329,55331,55333,55335,55337,55339,55341,55343,55345],{"class":607,"line":773},[605,55318,749],{"class":610},[605,55320,752],{"class":614},[605,55322,781],{"class":610},[605,55324,1459],{"class":618},[605,55326,625],{"class":610},[605,55328,628],{"class":610},[605,55330,1466],{"class":610},[605,55332,937],{"class":791},[605,55334,1471],{"class":610},[605,55336,937],{"class":791},[605,55338,1471],{"class":610},[605,55340,4160],{"class":791},[605,55342,1481],{"class":610},[605,55344,628],{"class":610},[605,55346,755],{"class":610},[605,55348,55349],{"class":607,"line":799},[605,55350,55351],{"class":651},"    ...\n",[605,55353,55354,55356],{"class":607,"line":599},[605,55355,749],{"class":610},[605,55357,54990],{"class":614},[605,55359,55360,55362,55364,55366,55368,55370,55372,55374,55376,55378,55380,55382,55384,55386,55388,55390],{"class":607,"line":822},[605,55361,5693],{"class":610},[605,55363,21584],{"class":618},[605,55365,625],{"class":610},[605,55367,628],{"class":610},[605,55369,15194],{"class":610},[605,55371,21593],{"class":651},[605,55373,1118],{"class":610},[605,55375,21598],{"class":651},[605,55377,49306],{"class":610},[605,55379,1513],{"class":791},[605,55381,1471],{"class":610},[605,55383,937],{"class":791},[605,55385,1471],{"class":610},[605,55387,937],{"class":791},[605,55389,1481],{"class":610},[605,55391,2987],{"class":610},[605,55393,55394,55396,55398,55400,55402,55404,55406],{"class":607,"line":833},[605,55395,5693],{"class":610},[605,55397,1968],{"class":618},[605,55399,625],{"class":610},[605,55401,628],{"class":610},[605,55403,4088],{"class":610},[605,55405,792],{"class":791},[605,55407,2987],{"class":610},[605,55409,55410,55412,55414,55416,55418],{"class":607,"line":844},[605,55411,23371],{"class":618},[605,55413,625],{"class":610},[605,55415,628],{"class":610},[605,55417,55051],{"class":631},[605,55419,2987],{"class":610},[605,55421,55422,55424,55426,55428,55430,55433],{"class":607,"line":854},[605,55423,5693],{"class":610},[605,55425,55197],{"class":618},[605,55427,625],{"class":610},[605,55429,628],{"class":610},[605,55431,55432],{"class":651},"customShader",[605,55434,2987],{"class":610},[605,55436,55437],{"class":607,"line":600},[605,55438,5713],{"class":610},[605,55440,55441,55443,55445,55447,55449,55451,55453,55455,55457,55459,55461,55463,55465],{"class":607,"line":874},[605,55442,825],{"class":610},[605,55444,4027],{"class":614},[605,55446,781],{"class":610},[605,55448,1989],{"class":618},[605,55450,625],{"class":610},[605,55452,628],{"class":610},[605,55454,1466],{"class":610},[605,55456,1478],{"class":791},[605,55458,1471],{"class":610},[605,55460,1478],{"class":791},[605,55462,1481],{"class":610},[605,55464,628],{"class":610},[605,55466,755],{"class":610},[605,55468,55469,55471,55473],{"class":607,"line":884},[605,55470,867],{"class":610},[605,55472,425],{"class":614},[605,55474,637],{"class":610},[605,55476,55477],{"class":607,"line":2952},[605,55478,55351],{"class":651},[605,55480,55481,55483,55485],{"class":607,"line":2960},[605,55482,877],{"class":610},[605,55484,729],{"class":614},[605,55486,637],{"class":610},[605,55488,55489,55491,55493],{"class":607,"line":2990},[605,55490,700],{"class":610},[605,55492,718],{"class":614},[605,55494,637],{"class":610},[582,55496,55497],{},"The Reflector shader use the following configuration by default:",[582,55499,55500],{},"You can extend, modify or just play with them",[7473,55502,55504],{"id":55503},"default-shader","Default shader",[594,55506,55508],{"className":35189,"code":55507,"language":35191,"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,55509,55510,55521,55537,55546,55554,55564,55569,55578,55586,55590,55599,55607,55612,55616,55628,55633,55638,55642,55647,55652,55656,55661,55666,55671,55675,55680,55684,55694,55705,55710,55715,55719,55723,55728,55732,55737,55742,55746,55750,55755,55760,55764,55768,55772,55777,55781,55786,55791,55795,55800,55805,55811,55815],{"__ignoreMap":544},[605,55511,55512,55514,55517,55519],{"class":607,"line":545},[605,55513,2689],{"class":618},[605,55515,55516],{"class":651}," shader ",[605,55518,625],{"class":610},[605,55520,1176],{"class":610},[605,55522,55523,55526,55528,55530,55533,55535],{"class":607,"line":546},[605,55524,55525],{"class":614},"  name",[605,55527,1190],{"class":610},[605,55529,667],{"class":610},[605,55531,55532],{"class":631},"ReflectorShader",[605,55534,5536],{"class":610},[605,55536,14031],{"class":610},[605,55538,55539,55542,55544],{"class":607,"line":676},[605,55540,55541],{"class":614},"  uniforms",[605,55543,1190],{"class":610},[605,55545,1176],{"class":610},[605,55547,55548,55550,55552],{"class":607,"line":697},[605,55549,17685],{"class":614},[605,55551,1190],{"class":610},[605,55553,1176],{"class":610},[605,55555,55556,55559,55561],{"class":607,"line":707},[605,55557,55558],{"class":614},"      value",[605,55560,1190],{"class":610},[605,55562,55563],{"class":610}," null\n",[605,55565,55566],{"class":607,"line":713},[605,55567,55568],{"class":610},"    },\n",[605,55570,55571,55574,55576],{"class":607,"line":723},[605,55572,55573],{"class":614},"    tDiffuse",[605,55575,1190],{"class":610},[605,55577,1176],{"class":610},[605,55579,55580,55582,55584],{"class":607,"line":746},[605,55581,55558],{"class":614},[605,55583,1190],{"class":610},[605,55585,55563],{"class":610},[605,55587,55588],{"class":607,"line":758},[605,55589,55568],{"class":610},[605,55591,55592,55595,55597],{"class":607,"line":768},[605,55593,55594],{"class":614},"    textureMatrix",[605,55596,1190],{"class":610},[605,55598,1176],{"class":610},[605,55600,55601,55603,55605],{"class":607,"line":773},[605,55602,55558],{"class":614},[605,55604,1190],{"class":610},[605,55606,55563],{"class":610},[605,55608,55609],{"class":607,"line":799},[605,55610,55611],{"class":610},"    }\n",[605,55613,55614],{"class":607,"line":599},[605,55615,17650],{"class":610},[605,55617,55618,55621,55623,55626],{"class":607,"line":822},[605,55619,55620],{"class":614},"  vertexShader",[605,55622,1190],{"class":610},[605,55624,55625],{"class":1181}," /* glsl */",[605,55627,16140],{"class":610},[605,55629,55630],{"class":607,"line":833},[605,55631,55632],{"class":631},"  uniform mat4 textureMatrix;\n",[605,55634,55635],{"class":607,"line":844},[605,55636,55637],{"class":631},"  varying vec4 vUv;\n",[605,55639,55640],{"class":607,"line":854},[605,55641,710],{"emptyLinePlaceholder":562},[605,55643,55644],{"class":607,"line":600},[605,55645,55646],{"class":631},"  #include \u003Ccommon>\n",[605,55648,55649],{"class":607,"line":874},[605,55650,55651],{"class":631},"  #include \u003Clogdepthbuf_pars_vertex>\n",[605,55653,55654],{"class":607,"line":884},[605,55655,710],{"emptyLinePlaceholder":562},[605,55657,55658],{"class":607,"line":2952},[605,55659,55660],{"class":631},"  void main() {\n",[605,55662,55663],{"class":607,"line":2960},[605,55664,55665],{"class":631},"    vUv = textureMatrix * vec4( position, 1.0 );\n",[605,55667,55668],{"class":607,"line":2990},[605,55669,55670],{"class":631},"    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n",[605,55672,55673],{"class":607,"line":3007},[605,55674,710],{"emptyLinePlaceholder":562},[605,55676,55677],{"class":607,"line":3022},[605,55678,55679],{"class":631},"    #include \u003Clogdepthbuf_vertex>\n",[605,55681,55682],{"class":607,"line":3047},[605,55683,710],{"emptyLinePlaceholder":562},[605,55685,55686,55689,55692],{"class":607,"line":2591},[605,55687,55688],{"class":631},"  }",[605,55690,55691],{"class":610},"`",[605,55693,14031],{"class":610},[605,55695,55696,55699,55701,55703],{"class":607,"line":3062},[605,55697,55698],{"class":614},"  fragmentShader",[605,55700,1190],{"class":610},[605,55702,55625],{"class":1181},[605,55704,16140],{"class":610},[605,55706,55707],{"class":607,"line":3092},[605,55708,55709],{"class":631},"  uniform vec3 color;\n",[605,55711,55712],{"class":607,"line":3101},[605,55713,55714],{"class":631},"  uniform sampler2D tDiffuse;\n",[605,55716,55717],{"class":607,"line":4207},[605,55718,55637],{"class":631},[605,55720,55721],{"class":607,"line":4212},[605,55722,710],{"emptyLinePlaceholder":562},[605,55724,55725],{"class":607,"line":4235},[605,55726,55727],{"class":631},"  #include \u003Clogdepthbuf_pars_fragment>\n",[605,55729,55730],{"class":607,"line":4244},[605,55731,710],{"emptyLinePlaceholder":562},[605,55733,55734],{"class":607,"line":4253},[605,55735,55736],{"class":631},"  float blendOverlay( float base, float blend ) {\n",[605,55738,55739],{"class":607,"line":4262},[605,55740,55741],{"class":631},"    return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n",[605,55743,55744],{"class":607,"line":4271},[605,55745,2825],{"class":631},[605,55747,55748],{"class":607,"line":14784},[605,55749,710],{"emptyLinePlaceholder":562},[605,55751,55752],{"class":607,"line":14799},[605,55753,55754],{"class":631},"  vec3 blendOverlay( vec3 base, vec3 blend ) {\n",[605,55756,55757],{"class":607,"line":14814},[605,55758,55759],{"class":631},"    return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n",[605,55761,55762],{"class":607,"line":14819},[605,55763,2825],{"class":631},[605,55765,55766],{"class":607,"line":14826},[605,55767,710],{"emptyLinePlaceholder":562},[605,55769,55770],{"class":607,"line":14831},[605,55771,55660],{"class":631},[605,55773,55774],{"class":607,"line":14837},[605,55775,55776],{"class":631},"    #include \u003Clogdepthbuf_fragment>\n",[605,55778,55779],{"class":607,"line":14858},[605,55780,710],{"emptyLinePlaceholder":562},[605,55782,55783],{"class":607,"line":14864},[605,55784,55785],{"class":631},"    vec4 base = texture2DProj( tDiffuse, vUv );\n",[605,55787,55788],{"class":607,"line":14871},[605,55789,55790],{"class":631},"    gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n",[605,55792,55793],{"class":607,"line":14876},[605,55794,710],{"emptyLinePlaceholder":562},[605,55796,55797],{"class":607,"line":14897},[605,55798,55799],{"class":631},"    #include \u003Ctonemapping_fragment>\n",[605,55801,55802],{"class":607,"line":14910},[605,55803,55804],{"class":631},"    #include \u003Ccolorspace_fragment>\n",[605,55806,55807,55809],{"class":607,"line":14936},[605,55808,55688],{"class":631},[605,55810,16140],{"class":610},[605,55812,55813],{"class":607,"line":14941},[605,55814,710],{"emptyLinePlaceholder":562},[605,55816,55817],{"class":607,"line":14948},[605,55818,1297],{"class":610},[1299,55820,26295],{},{"title":544,"searchDepth":545,"depth":546,"links":55822},[55823,55824,55825],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},{"id":55213,"depth":546,"text":55214,"children":55826},[55827],{"id":55503,"depth":676,"text":55504},"Create real-time reflections of your scene.",{},{"title":425,"description":55828},"24igh7rDYMu_PMUA2O2RSz3ThFBClmpHnB0dGe1M0hI",{"id":55833,"title":429,"body":55834,"description":56373,"extension":559,"links":560,"meta":56374,"navigation":562,"path":430,"seo":56375,"stem":431,"__hash__":56376},"docs/2.api/9.objects/text-3d.md",{"type":469,"value":55835,"toc":56369},[55836,55841,55852,55854,55873,55980,55995,56088,56091,56210,56212,56366],[576,55837,55838],{},[55839,55840],"objects-text",{},[582,55842,55843,55846,55847,29567],{},[586,55844,55845],{},"\u003CText3D />"," is a component that renders text in 3D. It is a wrapper around the ",[1112,55848,55851],{"href":55849,"rel":55850},"https://threejs.org/docs/#api/en/geometries/TextGeometry",[1116],"TextGeometry",[472,55853,15],{"id":592},[582,55855,55856,55857,55859,55860,55863,55864,55867,55868],{},"To use the ",[586,55858,55845],{}," component you need to pass the ",[586,55861,55862],{},"font"," prop with the URL of the font JSON file you want to use. TextGeometry uses ",[586,55865,55866],{},"typeface",".json generated fonts, you can generate yours ",[1112,55869,55872],{"href":55870,"rel":55871},"http://gero3.github.io/facetype.js/",[1116],"here",[594,55874,55876],{"className":596,"code":55875,"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,55877,55878,55886,55894,55902,55909,55922,55936,55940,55948,55956,55964,55972],{"__ignoreMap":544},[605,55879,55880,55882,55884],{"class":607,"line":545},[605,55881,611],{"class":610},[605,55883,718],{"class":614},[605,55885,637],{"class":610},[605,55887,55888,55890,55892],{"class":607,"line":546},[605,55889,726],{"class":610},[605,55891,729],{"class":614},[605,55893,637],{"class":610},[605,55895,55896,55898,55900],{"class":607,"line":676},[605,55897,749],{"class":610},[605,55899,14995],{"class":614},[605,55901,637],{"class":610},[605,55903,55904,55906],{"class":607,"line":697},[605,55905,825],{"class":610},[605,55907,55908],{"class":614},"Text3D\n",[605,55910,55911,55914,55916,55918,55920],{"class":607,"line":707},[605,55912,55913],{"class":618},"        text",[605,55915,625],{"class":610},[605,55917,628],{"class":610},[605,55919,10429],{"class":631},[605,55921,2987],{"class":610},[605,55923,55924,55927,55929,55931,55934],{"class":607,"line":713},[605,55925,55926],{"class":618},"        font",[605,55928,625],{"class":610},[605,55930,628],{"class":610},[605,55932,55933],{"class":631},"/fonts/FiraCodeRegular.json",[605,55935,2987],{"class":610},[605,55937,55938],{"class":607,"line":723},[605,55939,47683],{"class":610},[605,55941,55942,55944,55946],{"class":607,"line":746},[605,55943,836],{"class":610},[605,55945,849],{"class":614},[605,55947,755],{"class":610},[605,55949,55950,55952,55954],{"class":607,"line":758},[605,55951,857],{"class":610},[605,55953,429],{"class":614},[605,55955,637],{"class":610},[605,55957,55958,55960,55962],{"class":607,"line":768},[605,55959,867],{"class":610},[605,55961,14995],{"class":614},[605,55963,637],{"class":610},[605,55965,55966,55968,55970],{"class":607,"line":773},[605,55967,877],{"class":610},[605,55969,729],{"class":614},[605,55971,637],{"class":610},[605,55973,55974,55976,55978],{"class":607,"line":799},[605,55975,700],{"class":610},[605,55977,718],{"class":614},[605,55979,637],{"class":610},[582,55981,55982,55983,55986,55987,55989,55990,32024,55992,55994],{},"Notice that you need to pass the ",[586,55984,55985],{},"\u003CTresMeshNormalMaterial />"," component as a child of the ",[586,55988,55845],{}," component. This is because ",[586,55991,55845],{},[586,55993,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,55996,55998],{"className":596,"code":55997,"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,55999,56000,56008,56016,56024,56043,56048,56056,56064,56072,56080],{"__ignoreMap":544},[605,56001,56002,56004,56006],{"class":607,"line":545},[605,56003,611],{"class":610},[605,56005,718],{"class":614},[605,56007,637],{"class":610},[605,56009,56010,56012,56014],{"class":607,"line":546},[605,56011,726],{"class":610},[605,56013,729],{"class":614},[605,56015,637],{"class":610},[605,56017,56018,56020,56022],{"class":607,"line":676},[605,56019,749],{"class":610},[605,56021,14995],{"class":614},[605,56023,637],{"class":610},[605,56025,56026,56028,56030,56033,56035,56037,56039,56041],{"class":607,"line":697},[605,56027,825],{"class":610},[605,56029,429],{"class":614},[605,56031,56032],{"class":618}," font",[605,56034,625],{"class":610},[605,56036,628],{"class":610},[605,56038,55933],{"class":631},[605,56040,628],{"class":610},[605,56042,637],{"class":610},[605,56044,56045],{"class":607,"line":707},[605,56046,56047],{"class":651},"        TresJS\n",[605,56049,56050,56052,56054],{"class":607,"line":713},[605,56051,836],{"class":610},[605,56053,849],{"class":614},[605,56055,755],{"class":610},[605,56057,56058,56060,56062],{"class":607,"line":723},[605,56059,857],{"class":610},[605,56061,429],{"class":614},[605,56063,637],{"class":610},[605,56065,56066,56068,56070],{"class":607,"line":746},[605,56067,867],{"class":610},[605,56069,14995],{"class":614},[605,56071,637],{"class":610},[605,56073,56074,56076,56078],{"class":607,"line":758},[605,56075,877],{"class":610},[605,56077,729],{"class":614},[605,56079,637],{"class":610},[605,56081,56082,56084,56086],{"class":607,"line":768},[605,56083,700],{"class":610},[605,56085,718],{"class":614},[605,56087,637],{"class":610},[582,56089,56090],{},"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,56092,56094],{"className":596,"code":56093,"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,56095,56096,56104,56125,56133,56141,56147,56161,56173,56177,56182,56186,56194,56202],{"__ignoreMap":544},[605,56097,56098,56100,56102],{"class":607,"line":545},[605,56099,611],{"class":610},[605,56101,718],{"class":614},[605,56103,637],{"class":610},[605,56105,56106,56108,56111,56114,56116,56118,56121,56123],{"class":607,"line":546},[605,56107,726],{"class":610},[605,56109,56110],{"class":614},"input",[605,56112,56113],{"class":618}," v-model",[605,56115,625],{"class":610},[605,56117,628],{"class":610},[605,56119,56120],{"class":651},"myReactiveText",[605,56122,628],{"class":610},[605,56124,755],{"class":610},[605,56126,56127,56129,56131],{"class":607,"line":676},[605,56128,726],{"class":610},[605,56130,729],{"class":614},[605,56132,637],{"class":610},[605,56134,56135,56137,56139],{"class":607,"line":697},[605,56136,749],{"class":610},[605,56138,14995],{"class":614},[605,56140,637],{"class":610},[605,56142,56143,56145],{"class":607,"line":707},[605,56144,825],{"class":610},[605,56146,55908],{"class":614},[605,56148,56149,56151,56153,56155,56157,56159],{"class":607,"line":713},[605,56150,2993],{"class":610},[605,56152,22930],{"class":618},[605,56154,625],{"class":610},[605,56156,628],{"class":610},[605,56158,56120],{"class":651},[605,56160,2987],{"class":610},[605,56162,56163,56165,56167,56169,56171],{"class":607,"line":723},[605,56164,55926],{"class":618},[605,56166,625],{"class":610},[605,56168,628],{"class":610},[605,56170,55933],{"class":631},[605,56172,2987],{"class":610},[605,56174,56175],{"class":607,"line":746},[605,56176,47602],{"class":618},[605,56178,56179],{"class":607,"line":758},[605,56180,56181],{"class":618},"        need-updates\n",[605,56183,56184],{"class":607,"line":768},[605,56185,3050],{"class":610},[605,56187,56188,56190,56192],{"class":607,"line":773},[605,56189,867],{"class":610},[605,56191,14995],{"class":614},[605,56193,637],{"class":610},[605,56195,56196,56198,56200],{"class":607,"line":799},[605,56197,877],{"class":610},[605,56199,729],{"class":614},[605,56201,637],{"class":610},[605,56203,56204,56206,56208],{"class":607,"line":599},[605,56205,700],{"class":610},[605,56207,718],{"class":614},[605,56209,637],{"class":610},[472,56211,894],{"id":893},[899,56213,56214,56224],{},[902,56215,56216],{},[905,56217,56218,56220,56222],{},[908,56219,910],{"align":969},[908,56221,913],{"align":969},[908,56223,916],{},[918,56225,56226,56237,56248,56259,56270,56282,56294,56306,56319,56331,56343,56354],{},[905,56227,56228,56232,56235],{},[923,56229,56230],{"align":969},[1673,56231,55862],{},[923,56233,56234],{"align":969},"The font data or font name to use for the text.",[923,56236],{},[905,56238,56239,56243,56246],{},[923,56240,56241],{"align":969},[1673,56242,22930],{},[923,56244,56245],{"align":969},"The text to display.",[923,56247],{},[905,56249,56250,56254,56257],{},[923,56251,56252],{"align":969},[1673,56253,10233],{},[923,56255,56256],{"align":969},"The size of the text.",[923,56258,1513],{},[905,56260,56261,56265,56268],{},[923,56262,56263],{"align":969},[1673,56264,34017],{},[923,56266,56267],{"align":969},"The height of the text.",[923,56269,8085],{},[905,56271,56272,56277,56280],{},[923,56273,56274],{"align":969},[1673,56275,56276],{},"curveSegments",[923,56278,56279],{"align":969},"The number of curve segments to use when generating the text geometry.",[923,56281,2396],{},[905,56283,56284,56289,56292],{},[923,56285,56286],{"align":969},[1673,56287,56288],{},"bevelEnabled",[923,56290,56291],{"align":969},"A flag indicating whether beveling should be enabled for the text.",[923,56293,933],{},[905,56295,56296,56301,56304],{},[923,56297,56298],{"align":969},[1673,56299,56300],{},"bevelThickness",[923,56302,56303],{"align":969},"The thickness of the beveled edge on the text.",[923,56305,4892],{},[905,56307,56308,56313,56316],{},[923,56309,56310],{"align":969},[1673,56311,56312],{},"bevelSize",[923,56314,56315],{"align":969},"The size of the beveled edge on the text.",[923,56317,56318],{},"0.02",[905,56320,56321,56326,56329],{},[923,56322,56323],{"align":969},[1673,56324,56325],{},"bevelOffset",[923,56327,56328],{"align":969},"The offset of the beveled edge on the text.",[923,56330,937],{},[905,56332,56333,56338,56341],{},[923,56334,56335],{"align":969},[1673,56336,56337],{},"bevelSegments",[923,56339,56340],{"align":969},"The number of bevel segments to use when generating the text geometry.",[923,56342,3490],{},[905,56344,56345,56349,56352],{},[923,56346,56347],{"align":969},[1673,56348,44938],{},[923,56350,56351],{"align":969},"To center the text",[923,56353,943],{},[905,56355,56356,56361,56364],{},[923,56357,56358],{"align":969},[1673,56359,56360],{},"needUpdates",[923,56362,56363],{"align":969},"This props add reactivity",[923,56365,943],{},[1299,56367,56368],{},"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":56370},[56371,56372],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},"Render text in 3D using TextGeometry.",{},{"title":429,"description":56373},"t6bahOskD-ojOxftya8MrETrI6LWNTRBawqfzv7mouA",[56378,56953,57262,57670,58775,59413,60061],{"id":56379,"title":439,"body":56380,"description":56949,"extension":559,"links":560,"meta":56950,"navigation":562,"path":440,"seo":56951,"stem":441,"__hash__":56952},"docs/2.api/miscellaneous/bounds.md",{"type":469,"value":56381,"toc":56942},[56382,56387,56394,56412,56414,56781,56783,56912,56915,56929,56933,56939],[2558,56383,56384],{},[56385,56386],"miscellaneous-bounds",{},[582,56388,56389,56390,56393],{},"Calculates a boundary box and centers the camera accordingly. Its ",[586,56391,56392],{},"lookAt"," method accepts a target to look at imperatively e.g., after a click.",[2046,56395,56396,56398],{},[582,56397,43385],{},[594,56399,56400],{"className":596,"code":2071,"language":601,"meta":544,"style":544},[586,56401,56402],{"__ignoreMap":544},[605,56403,56404,56406,56408,56410],{"class":607,"line":545},[605,56405,611],{"class":610},[605,56407,763],{"class":614},[605,56409,1868],{"class":618},[605,56411,755],{"class":610},[472,56413,15],{"id":592},[594,56415,56418],{"className":596,"code":56416,"highlights":56417,"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,56419,56420,56440,56458,56482,56500,56504,56518,56532,56536,56548,56577,56582,56590,56594,56602,56610,56642,56652,56690,56732,56740,56748,56756,56765,56773],{"__ignoreMap":544},[605,56421,56422,56424,56426,56428,56430,56432,56434,56436,56438],{"class":607,"line":545},[605,56423,611],{"class":610},[605,56425,615],{"class":614},[605,56427,619],{"class":618},[605,56429,622],{"class":618},[605,56431,625],{"class":610},[605,56433,628],{"class":610},[605,56435,632],{"class":631},[605,56437,628],{"class":610},[605,56439,637],{"class":610},[605,56441,56442,56444,56446,56448,56450,56452,56454,56456],{"class":607,"line":546},[605,56443,645],{"class":644},[605,56445,648],{"class":610},[605,56447,683],{"class":651},[605,56449,661],{"class":610},[605,56451,664],{"class":644},[605,56453,667],{"class":610},[605,56455,692],{"class":631},[605,56457,673],{"class":610},[605,56459,56461,56463,56465,56468,56470,56472,56474,56476,56478,56480],{"class":56460,"line":676},[607,641],[605,56462,645],{"class":644},[605,56464,648],{"class":610},[605,56466,56467],{"class":651}," Bounds",[605,56469,655],{"class":610},[605,56471,658],{"class":651},[605,56473,661],{"class":610},[605,56475,664],{"class":644},[605,56477,667],{"class":610},[605,56479,670],{"class":631},[605,56481,673],{"class":610},[605,56483,56484,56486,56488,56490,56492,56494,56496,56498],{"class":607,"line":697},[605,56485,645],{"class":644},[605,56487,648],{"class":610},[605,56489,9716],{"class":651},[605,56491,661],{"class":610},[605,56493,664],{"class":644},[605,56495,667],{"class":610},[605,56497,601],{"class":631},[605,56499,673],{"class":610},[605,56501,56502],{"class":607,"line":707},[605,56503,710],{"emptyLinePlaceholder":562},[605,56505,56507,56509,56512,56514,56516],{"class":56506,"line":713},[607,641],[605,56508,2689],{"class":618},[605,56510,56511],{"class":651}," boundsRef ",[605,56513,625],{"class":610},[605,56515,9716],{"class":2800},[605,56517,2846],{"class":651},[605,56519,56521,56523,56526,56528,56530],{"class":56520,"line":723},[607,641],[605,56522,2689],{"class":618},[605,56524,56525],{"class":651}," objectRef ",[605,56527,625],{"class":610},[605,56529,9716],{"class":2800},[605,56531,2846],{"class":651},[605,56533,56534],{"class":607,"line":746},[605,56535,710],{"emptyLinePlaceholder":562},[605,56537,56539,56541,56544,56546],{"class":56538,"line":758},[607,641],[605,56540,32712],{"class":618},[605,56542,56543],{"class":2800}," focusObject",[605,56545,14395],{"class":610},[605,56547,1176],{"class":610},[605,56549,56551,56554,56556,56558,56560,56562,56564,56566,56568,56571,56573,56575],{"class":56550,"line":768},[607,641],[605,56552,56553],{"class":651},"  boundsRef",[605,56555,1118],{"class":610},[605,56557,5496],{"class":651},[605,56559,10582],{"class":610},[605,56561,20549],{"class":651},[605,56563,1118],{"class":610},[605,56565,56392],{"class":2800},[605,56567,2970],{"class":614},[605,56569,56570],{"class":651},"objectRef",[605,56572,1118],{"class":610},[605,56574,5496],{"class":651},[605,56576,5539],{"class":614},[605,56578,56580],{"class":56579,"line":773},[607,641],[605,56581,1297],{"class":610},[605,56583,56584,56586,56588],{"class":607,"line":799},[605,56585,700],{"class":610},[605,56587,615],{"class":614},[605,56589,637],{"class":610},[605,56591,56592],{"class":607,"line":599},[605,56593,710],{"emptyLinePlaceholder":562},[605,56595,56596,56598,56600],{"class":607,"line":822},[605,56597,611],{"class":610},[605,56599,718],{"class":614},[605,56601,637],{"class":610},[605,56603,56604,56606,56608],{"class":607,"line":833},[605,56605,726],{"class":610},[605,56607,729],{"class":614},[605,56609,637],{"class":610},[605,56611,56612,56614,56616,56618,56620,56622,56624,56626,56628,56630,56632,56634,56636,56638,56640],{"class":607,"line":844},[605,56613,749],{"class":610},[605,56615,752],{"class":614},[605,56617,781],{"class":610},[605,56619,1459],{"class":618},[605,56621,625],{"class":610},[605,56623,628],{"class":610},[605,56625,1466],{"class":610},[605,56627,937],{"class":791},[605,56629,1471],{"class":610},[605,56631,792],{"class":791},[605,56633,1471],{"class":610},[605,56635,2396],{"class":791},[605,56637,1481],{"class":610},[605,56639,628],{"class":610},[605,56641,755],{"class":610},[605,56643,56644,56646,56648,56650],{"class":607,"line":854},[605,56645,749],{"class":610},[605,56647,763],{"class":614},[605,56649,1868],{"class":618},[605,56651,755],{"class":610},[605,56653,56655,56657,56659,56661,56663,56665,56668,56670,56673,56676,56678,56680,56682,56684,56686,56688],{"class":56654,"line":600},[607,641],[605,56656,749],{"class":610},[605,56658,439],{"class":614},[605,56660,5431],{"class":618},[605,56662,625],{"class":610},[605,56664,628],{"class":610},[605,56666,56667],{"class":631},"boundsRef",[605,56669,628],{"class":610},[605,56671,56672],{"class":618}," clip",[605,56674,56675],{"class":618}," use-mounted",[605,56677,781],{"class":610},[605,56679,33561],{"class":618},[605,56681,625],{"class":610},[605,56683,628],{"class":610},[605,56685,4645],{"class":791},[605,56687,628],{"class":610},[605,56689,637],{"class":610},[605,56691,56692,56694,56696,56698,56700,56702,56704,56706,56708,56710,56712,56714,56716,56719,56721,56724,56726,56728,56730],{"class":607,"line":874},[605,56693,825],{"class":610},[605,56695,828],{"class":614},[605,56697,5431],{"class":618},[605,56699,625],{"class":610},[605,56701,628],{"class":610},[605,56703,56570],{"class":631},[605,56705,628],{"class":610},[605,56707,7756],{"class":610},[605,56709,31189],{"class":618},[605,56711,625],{"class":610},[605,56713,628],{"class":610},[605,56715,2970],{"class":610},[605,56717,56718],{"class":5495},"e",[605,56720,2748],{"class":610},[605,56722,56723],{"class":618},"=>",[605,56725,56543],{"class":2800},[605,56727,14395],{"class":610},[605,56729,628],{"class":610},[605,56731,637],{"class":610},[605,56733,56734,56736,56738],{"class":607,"line":884},[605,56735,836],{"class":610},[605,56737,839],{"class":614},[605,56739,755],{"class":610},[605,56741,56742,56744,56746],{"class":607,"line":2952},[605,56743,836],{"class":610},[605,56745,849],{"class":614},[605,56747,755],{"class":610},[605,56749,56750,56752,56754],{"class":607,"line":2960},[605,56751,857],{"class":610},[605,56753,828],{"class":614},[605,56755,637],{"class":610},[605,56757,56759,56761,56763],{"class":56758,"line":2990},[607,641],[605,56760,867],{"class":610},[605,56762,439],{"class":614},[605,56764,637],{"class":610},[605,56766,56767,56769,56771],{"class":607,"line":3007},[605,56768,877],{"class":610},[605,56770,729],{"class":614},[605,56772,637],{"class":610},[605,56774,56775,56777,56779],{"class":607,"line":3022},[605,56776,700],{"class":610},[605,56778,718],{"class":614},[605,56780,637],{"class":610},[472,56782,894],{"id":893},[899,56784,56785,56795],{},[902,56786,56787],{},[905,56788,56789,56791,56793],{},[908,56790,3118],{"align":969},[908,56792,913],{"align":969},[908,56794,916],{},[918,56796,56797,56814,56834,56851,56871,56892],{},[905,56798,56799,56804,56810],{},[923,56800,56801],{"align":969},[586,56802,56803],{},"duration",[923,56805,56806,56807,56809],{"align":969},"Duration of the ",[586,56808,56392],{}," animation in seconds",[923,56811,56812],{},[586,56813,7085],{},[905,56815,56816,56820,56830],{},[923,56817,56818],{"align":969},[586,56819,33561],{},[923,56821,56822,56823,56825,56826,10149,56828],{"align":969},"Additional distance from the target when using ",[586,56824,56392],{}," with a ",[586,56827,2574],{},[586,56829,2578],{},[923,56831,56832],{},[586,56833,8085],{},[905,56835,56836,56841,56847],{},[923,56837,56838],{"align":969},[586,56839,56840],{},"useResize",[923,56842,56843,56844,56846],{"align":969},"Whether to re",[586,56845,56392],{}," the last target when the screen is resized",[923,56848,56849],{},[586,56850,943],{},[905,56852,56853,56858,56867],{},[923,56854,56855],{"align":969},[586,56856,56857],{},"useMounted",[923,56859,56860,56861,56863,56864,56866],{"align":969},"Whether to ",[586,56862,56392],{}," the ",[586,56865,439],{}," object when the component is mounts",[923,56868,56869],{},[586,56870,943],{},[905,56872,56873,56878,56888],{},[923,56874,56875],{"align":969},[586,56876,56877],{},"clip",[923,56879,56880,56881,4431,56883,56885,56886],{"align":969},"Whether to adjust the camera's ",[586,56882,36279],{},[586,56884,34031],{}," settings when using ",[586,56887,56392],{},[923,56889,56890],{},[586,56891,943],{},[905,56893,56894,56899,56909],{},[923,56895,56896],{"align":969},[586,56897,56898],{},"easing",[923,56900,56901,56902,56905,56906],{"align":969},"Animation's easing function. ",[586,56903,56904],{},"t"," and the returned value should be in the interval ",[586,56907,56908],{},"[0, 1]",[923,56910,56911],{},"Cubic ease out",[472,56913,56392],{"id":56914},"lookat",[582,56916,56917,44676,56920,56922,56923,1471,56925,10149,56927,1118],{},[586,56918,56919],{},"\u003CBounds />",[586,56921,56392],{}," points the camera at its first argument: an ",[586,56924,2578],{},[586,56926,2574],{},[586,56928,3172],{},[7473,56930,56932],{"id":56931},"method-signatures","Method Signatures",[594,56934,56937],{"className":56935,"code":56936,"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,56938,56936],{"__ignoreMap":544},[1299,56940,56941],{},"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":56943},[56944,56945,56946],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},{"id":56914,"depth":546,"text":56392,"children":56947},[56948],{"id":56931,"depth":676,"text":56932},"Calculate boundary box and center camera accordingly.",{},{"title":439,"description":56949},"99p1FD8mbl4hP9wZB60es2RXMg_34kRJyloKHcDBk80",{"id":56954,"title":443,"body":56955,"description":57258,"extension":559,"links":560,"meta":57259,"navigation":562,"path":444,"seo":57260,"stem":445,"__hash__":57261},"docs/2.api/miscellaneous/global-audio.md",{"type":469,"value":56956,"toc":57253},[56957,56965,56972,56974,57126,57132,57134,57227,57229,57251],[582,56958,2253,56959,3275,56961,56964],{},[586,56960,2256],{},[586,56962,56963],{},"\u003CGlobalAudio />"," component that serves to easily add a global sound to your scene.",[582,56966,22935,56967],{},[1112,56968,56971],{"href":56969,"rel":56970},"https://threejs.org/docs/index.html?q=audio#api/en/audio/Audio",[1116],"Audio",[472,56973,15],{"id":592},[594,56975,56978],{"className":596,"code":56976,"highlights":56977,"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,56979,56980,56990,57008,57028,57036,57040,57048,57056,57088,57110,57118],{"__ignoreMap":544},[605,56981,56982,56984,56986,56988],{"class":607,"line":545},[605,56983,611],{"class":610},[605,56985,615],{"class":614},[605,56987,619],{"class":618},[605,56989,637],{"class":610},[605,56991,56992,56994,56996,56998,57000,57002,57004,57006],{"class":607,"line":546},[605,56993,645],{"class":644},[605,56995,648],{"class":610},[605,56997,683],{"class":651},[605,56999,661],{"class":610},[605,57001,664],{"class":644},[605,57003,667],{"class":610},[605,57005,692],{"class":631},[605,57007,673],{"class":610},[605,57009,57011,57013,57015,57018,57020,57022,57024,57026],{"class":57010,"line":676},[607,641],[605,57012,645],{"class":644},[605,57014,648],{"class":610},[605,57016,57017],{"class":651}," GlobalAudio",[605,57019,661],{"class":610},[605,57021,664],{"class":644},[605,57023,667],{"class":610},[605,57025,670],{"class":631},[605,57027,673],{"class":610},[605,57029,57030,57032,57034],{"class":607,"line":697},[605,57031,700],{"class":610},[605,57033,615],{"class":614},[605,57035,637],{"class":610},[605,57037,57038],{"class":607,"line":707},[605,57039,710],{"emptyLinePlaceholder":562},[605,57041,57042,57044,57046],{"class":607,"line":713},[605,57043,611],{"class":610},[605,57045,718],{"class":614},[605,57047,637],{"class":610},[605,57049,57050,57052,57054],{"class":607,"line":723},[605,57051,726],{"class":610},[605,57053,729],{"class":614},[605,57055,637],{"class":610},[605,57057,57058,57060,57062,57064,57066,57068,57070,57072,57074,57076,57078,57080,57082,57084,57086],{"class":607,"line":746},[605,57059,749],{"class":610},[605,57061,752],{"class":614},[605,57063,781],{"class":610},[605,57065,1459],{"class":618},[605,57067,625],{"class":610},[605,57069,628],{"class":610},[605,57071,1466],{"class":610},[605,57073,937],{"class":791},[605,57075,1471],{"class":610},[605,57077,937],{"class":791},[605,57079,1471],{"class":610},[605,57081,4685],{"class":791},[605,57083,1481],{"class":610},[605,57085,628],{"class":610},[605,57087,755],{"class":610},[605,57089,57091,57093,57095,57097,57099,57101,57103,57106,57108],{"class":57090,"line":758},[607,641],[605,57092,749],{"class":610},[605,57094,443],{"class":614},[605,57096,781],{"class":610},[605,57098,18113],{"class":618},[605,57100,625],{"class":610},[605,57102,628],{"class":610},[605,57104,57105],{"class":651},"exampleAudio",[605,57107,628],{"class":610},[605,57109,755],{"class":610},[605,57111,57112,57114,57116],{"class":607,"line":768},[605,57113,877],{"class":610},[605,57115,729],{"class":614},[605,57117,637],{"class":610},[605,57119,57120,57122,57124],{"class":607,"line":773},[605,57121,700],{"class":610},[605,57123,718],{"class":614},[605,57125,637],{"class":610},[582,57127,57128,57129,57131],{},"*The ",[586,57130,18113],{}," prop is required",[472,57133,894],{"id":893},[899,57135,57136,57146],{},[902,57137,57138],{},[905,57139,57140,57142,57144],{},[908,57141,910],{"align":969},[908,57143,913],{"align":969},[908,57145,916],{},[918,57147,57148,57159,57174,57186,57199,57213],{},[905,57149,57150,57154,57157],{},[923,57151,57152],{"align":969},[586,57153,18113],{},[923,57155,57156],{"align":969},"Path to your audio file",[923,57158],{},[905,57160,57161,57166,57169],{},[923,57162,57163],{"align":969},[586,57164,57165],{},"playTrigger",[923,57167,57168],{"align":969},"Id of the DOM element that triggers the play/pause state",[923,57170,57171],{},[586,57172,57173],{},"renderer.domElement",[905,57175,57176,57181,57184],{},[923,57177,57178],{"align":969},[586,57179,57180],{},"stopTrigger",[923,57182,57183],{"align":969},"Id of the DOM element that triggers the stop state",[923,57185],{},[905,57187,57188,57192,57195],{},[923,57189,57190],{"align":969},[586,57191,19561],{},[923,57193,57194],{"align":969},"If the audio must be replayed when ends",[923,57196,57197],{},[586,57198,943],{},[905,57200,57201,57206,57209],{},[923,57202,57203],{"align":969},[586,57204,57205],{},"volume",[923,57207,57208],{"align":969},"Volume of the audio",[923,57210,57211],{},[586,57212,1513],{},[905,57214,57215,57220,57223],{},[923,57216,57217],{"align":969},[586,57218,57219],{},"playbackRate",[923,57221,57222],{"align":969},"PlaybackRate of the audio",[923,57224,57225],{},[586,57226,1893],{},[472,57228,7742],{"id":7741},[899,57230,57231,57239],{},[902,57232,57233],{},[905,57234,57235,57237],{},[908,57236,7807],{"align":969},[908,57238,913],{"align":969},[918,57240,57241],{},[905,57242,57243,57248],{},[923,57244,57245],{"align":969},[586,57246,57247],{},"isPlaying",[923,57249,57250],{"align":969},"Dispatched when the Audio change its state (play, pause or stop)",[1299,57252,7841],{},{"title":544,"searchDepth":545,"depth":546,"links":57254},[57255,57256,57257],{"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":57258},"XaoiVKl16tz4uOX0ZskSCuPQUgYB0CYUZjEEuh4q_uU",{"id":57263,"title":447,"body":57264,"description":57666,"extension":559,"links":560,"meta":57667,"navigation":562,"path":448,"seo":57668,"stem":449,"__hash__":57669},"docs/2.api/miscellaneous/mouse-parallax.md",{"type":469,"value":57265,"toc":57662},[57266,57271,57283,57285,57291,57299,57308,57313,57599,57601,57660],[576,57267,57268],{},[57269,57270],"miscellaneous-mouse-parallax",{},[582,57272,57273,57276,57277,57282],{},[586,57274,57275],{},"\u003CMouseParallax />"," is a component that allows you to easily create a ",[1112,57278,57281],{"href":57279,"rel":57280},"https://en.wikipedia.org/wiki/Parallax",[1116],"parallax"," effect. The camera will update automatically according to the mouse position.",[472,57284,15],{"id":592},[582,57286,57287,57288,57290],{},"You only need to import and add it to your template as ",[586,57289,57275],{},". Additionally, you can pass the following props:",[582,57292,57293,57295,57296,1118],{},[586,57294,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,57297,57298],{},":factor=[x,y]",[582,57300,57301,57304,57305,1118],{},[586,57302,57303],{},"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,57306,57307],{},":ease=[x,y]",[582,57309,57310,57312],{},[586,57311,10219],{}," is a boolean that enables movement based on the position of the mouse on the canvas rather than the window.",[594,57314,57317],{"className":596,"code":57315,"highlights":57316,"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,57318,57319,57339,57365,57385,57393,57397,57405,57423,57468,57476,57494,57502,57543,57551,57583,57591],{"__ignoreMap":544},[605,57320,57321,57323,57325,57327,57329,57331,57333,57335,57337],{"class":607,"line":545},[605,57322,611],{"class":610},[605,57324,615],{"class":614},[605,57326,619],{"class":618},[605,57328,622],{"class":618},[605,57330,625],{"class":610},[605,57332,628],{"class":610},[605,57334,632],{"class":631},[605,57336,628],{"class":610},[605,57338,637],{"class":610},[605,57340,57342,57344,57346,57349,57351,57353,57355,57357,57359,57361,57363],{"class":57341,"line":546},[607,641],[605,57343,645],{"class":644},[605,57345,648],{"class":610},[605,57347,57348],{"class":651}," MouseParallax",[605,57350,655],{"class":610},[605,57352,33683],{"class":651},[605,57354,661],{"class":610},[605,57356,664],{"class":644},[605,57358,3322],{"class":610},[605,57360,670],{"class":631},[605,57362,628],{"class":610},[605,57364,3329],{"class":610},[605,57366,57367,57369,57371,57373,57375,57377,57379,57381,57383],{"class":607,"line":676},[605,57368,645],{"class":644},[605,57370,648],{"class":610},[605,57372,683],{"class":651},[605,57374,661],{"class":610},[605,57376,664],{"class":644},[605,57378,3322],{"class":610},[605,57380,692],{"class":631},[605,57382,628],{"class":610},[605,57384,3329],{"class":610},[605,57386,57387,57389,57391],{"class":607,"line":697},[605,57388,700],{"class":610},[605,57390,615],{"class":614},[605,57392,637],{"class":610},[605,57394,57395],{"class":607,"line":707},[605,57396,710],{"emptyLinePlaceholder":562},[605,57398,57399,57401,57403],{"class":607,"line":713},[605,57400,611],{"class":610},[605,57402,718],{"class":614},[605,57404,637],{"class":610},[605,57406,57407,57409,57411,57413,57415,57417,57419,57421],{"class":607,"line":723},[605,57408,726],{"class":610},[605,57410,729],{"class":614},[605,57412,732],{"class":618},[605,57414,625],{"class":610},[605,57416,628],{"class":610},[605,57418,5040],{"class":631},[605,57420,628],{"class":610},[605,57422,637],{"class":610},[605,57424,57425,57427,57429,57431,57433,57435,57437,57439,57441,57443,57445,57447,57449,57451,57453,57455,57457,57459,57461,57464,57466],{"class":607,"line":746},[605,57426,749],{"class":610},[605,57428,752],{"class":614},[605,57430,781],{"class":610},[605,57432,1459],{"class":618},[605,57434,625],{"class":610},[605,57436,628],{"class":610},[605,57438,1466],{"class":610},[605,57440,937],{"class":791},[605,57442,1471],{"class":610},[605,57444,937],{"class":791},[605,57446,1471],{"class":610},[605,57448,4685],{"class":791},[605,57450,1481],{"class":610},[605,57452,628],{"class":610},[605,57454,781],{"class":610},[605,57456,25049],{"class":618},[605,57458,625],{"class":610},[605,57460,628],{"class":610},[605,57462,57463],{"class":791},"75",[605,57465,628],{"class":610},[605,57467,755],{"class":610},[605,57469,57470,57472,57474],{"class":607,"line":758},[605,57471,749],{"class":610},[605,57473,28642],{"class":614},[605,57475,637],{"class":610},[605,57477,57478,57480,57482,57484,57486,57488,57490,57492],{"class":607,"line":768},[605,57479,825],{"class":610},[605,57481,6729],{"class":614},[605,57483,3978],{"class":618},[605,57485,625],{"class":610},[605,57487,628],{"class":610},[605,57489,6738],{"class":631},[605,57491,628],{"class":610},[605,57493,755],{"class":610},[605,57495,57496,57498,57500],{"class":607,"line":773},[605,57497,867],{"class":610},[605,57499,28642],{"class":614},[605,57501,637],{"class":610},[605,57503,57505,57507,57509,57511,57513,57515,57517,57519,57521,57523,57525,57527,57529,57531,57533,57535,57537,57539,57541],{"class":57504,"line":799},[607,641],[605,57506,749],{"class":610},[605,57508,447],{"class":614},[605,57510,781],{"class":610},[605,57512,22768],{"class":618},[605,57514,625],{"class":610},[605,57516,628],{"class":610},[605,57518,2396],{"class":791},[605,57520,628],{"class":610},[605,57522,781],{"class":610},[605,57524,57303],{"class":618},[605,57526,625],{"class":610},[605,57528,628],{"class":610},[605,57530,1466],{"class":610},[605,57532,4160],{"class":791},[605,57534,1471],{"class":610},[605,57536,2203],{"class":791},[605,57538,1481],{"class":610},[605,57540,628],{"class":610},[605,57542,755],{"class":610},[605,57544,57545,57547,57549],{"class":607,"line":599},[605,57546,749],{"class":610},[605,57548,3518],{"class":614},[605,57550,755],{"class":610},[605,57552,57553,57555,57557,57559,57561,57563,57565,57567,57569,57571,57573,57575,57577,57579,57581],{"class":607,"line":822},[605,57554,749],{"class":610},[605,57556,3539],{"class":614},[605,57558,781],{"class":610},[605,57560,1459],{"class":618},[605,57562,625],{"class":610},[605,57564,628],{"class":610},[605,57566,1466],{"class":610},[605,57568,937],{"class":791},[605,57570,1471],{"class":610},[605,57572,792],{"class":791},[605,57574,1471],{"class":610},[605,57576,3490],{"class":791},[605,57578,1481],{"class":610},[605,57580,628],{"class":610},[605,57582,755],{"class":610},[605,57584,57585,57587,57589],{"class":607,"line":833},[605,57586,877],{"class":610},[605,57588,729],{"class":614},[605,57590,637],{"class":610},[605,57592,57593,57595,57597],{"class":607,"line":844},[605,57594,700],{"class":610},[605,57596,718],{"class":614},[605,57598,637],{"class":610},[472,57600,894],{"id":893},[899,57602,57603,57613],{},[902,57604,57605],{},[905,57606,57607,57609,57611],{},[908,57608,910],{"align":969},[908,57610,913],{"align":969},[908,57612,916],{},[918,57614,57615,57627,57638,57649],{},[905,57616,57617,57622,57625],{},[923,57618,57619],{"align":969},[1673,57620,57621],{},"disabled",[923,57623,57624],{"align":969},"Enable or disable the effect",[923,57626,943],{},[905,57628,57629,57633,57636],{},[923,57630,57631],{"align":969},[1673,57632,22768],{},[923,57634,57635],{"align":969},"Increase the range of the parallax",[923,57637,50000],{},[905,57639,57640,57644,57647],{},[923,57641,57642],{"align":969},[1673,57643,57303],{},[923,57645,57646],{"align":969},"Increase the camera movement speed",[923,57648,2203],{},[905,57650,57651,57655,57658],{},[923,57652,57653],{"align":969},[1673,57654,10219],{},[923,57656,57657],{"align":969},"Whether the mouse coordinates are calculated from the element or the window",[923,57659,943],{},[1299,57661,1648],{},{"title":544,"searchDepth":545,"depth":546,"links":57663},[57664,57665],{"id":592,"depth":546,"text":15},{"id":893,"depth":546,"text":894},"Create parallax effects based on mouse movement.",{},{"title":447,"description":57666},"-wMRikeU1CMiiuet3URQZ7L0rwjhY5Q0pVMViyyOwK0",{"id":57671,"title":451,"body":57672,"description":58771,"extension":559,"links":560,"meta":58772,"navigation":562,"path":452,"seo":58773,"stem":453,"__hash__":58774},"docs/2.api/miscellaneous/positional-audio.md",{"type":469,"value":57673,"toc":58764},[57674,57679,57692,57702,57704,57719,57999,58027,58031,58036,58038,58232,58234,58306,58536,58732,58734,58761],[576,57675,57676],{},[57677,57678],"miscellaneous-positional-audio",{},[582,57680,2253,57681,54843,57683,57687,57688,57691],{},[586,57682,2256],{},[1112,57684,451],{"href":57685,"rel":57686},"https://threejs.org/docs/index.html?q=posi#api/en/audio/PositionalAudio",[1116],".\n",[586,57689,57690],{},"\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,57693,57694,57696,57697,29567],{},[586,57695,57690],{}," includes a helper 🛠️ that allows you to view the directional cone of te audio. The helper is based on the ",[1112,57698,57701],{"href":57699,"rel":57700},"https://threejs.org/docs/#examples/en/helpers/PositionalAudioHelper",[1116],"PositionalAudioHelper",[472,57703,15],{"id":592},[582,57705,2253,57706,57708,57709,57711,57712,57714,57715,57718],{},[586,57707,57690],{}," 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,57710,57690],{}," component and set the ",[586,57713,53789],{},". It must be wrapped around the ",[586,57716,57717],{},"\u003CSuspense>"," component to enable it to load your audio asynchronously. 💥",[594,57720,57723],{"className":596,"code":57721,"highlights":57722,"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,57724,57725,57745,57769,57791,57795,57812,57816,57828,57843,57849,57857,57861,57869,57877,57909,57917,57925,57933,57948,57963,57967,57975,57983,57991],{"__ignoreMap":544},[605,57726,57727,57729,57731,57733,57735,57737,57739,57741,57743],{"class":607,"line":545},[605,57728,611],{"class":610},[605,57730,615],{"class":614},[605,57732,619],{"class":618},[605,57734,622],{"class":618},[605,57736,625],{"class":610},[605,57738,628],{"class":610},[605,57740,632],{"class":631},[605,57742,628],{"class":610},[605,57744,637],{"class":610},[605,57746,57748,57750,57752,57754,57756,57759,57761,57763,57765,57767],{"class":57747,"line":546},[607,641],[605,57749,645],{"class":644},[605,57751,648],{"class":610},[605,57753,1369],{"class":651},[605,57755,655],{"class":610},[605,57757,57758],{"class":651}," PositionalAudio",[605,57760,661],{"class":610},[605,57762,664],{"class":644},[605,57764,667],{"class":610},[605,57766,670],{"class":631},[605,57768,673],{"class":610},[605,57770,57771,57773,57775,57777,57779,57781,57783,57785,57787,57789],{"class":607,"line":676},[605,57772,645],{"class":644},[605,57774,648],{"class":610},[605,57776,17130],{"class":651},[605,57778,655],{"class":610},[605,57780,9716],{"class":651},[605,57782,661],{"class":610},[605,57784,664],{"class":644},[605,57786,667],{"class":610},[605,57788,601],{"class":631},[605,57790,673],{"class":610},[605,57792,57793],{"class":607,"line":697},[605,57794,710],{"emptyLinePlaceholder":562},[605,57796,57797,57799,57802,57804,57806,57808,57810],{"class":607,"line":707},[605,57798,2689],{"class":618},[605,57800,57801],{"class":651}," positionalAudioRef ",[605,57803,625],{"class":610},[605,57805,9716],{"class":2800},[605,57807,2970],{"class":651},[605,57809,3152],{"class":610},[605,57811,5539],{"class":651},[605,57813,57814],{"class":607,"line":713},[605,57815,710],{"emptyLinePlaceholder":562},[605,57817,57818,57820,57822,57824,57826],{"class":607,"line":723},[605,57819,17177],{"class":2800},[605,57821,2970],{"class":651},[605,57823,14395],{"class":610},[605,57825,5501],{"class":618},[605,57827,1176],{"class":610},[605,57829,57830,57833,57835,57837,57839,57841],{"class":607,"line":746},[605,57831,57832],{"class":651},"  positionalAudioRef",[605,57834,10582],{"class":610},[605,57836,5496],{"class":651},[605,57838,10582],{"class":610},[605,57840,16221],{"class":2800},[605,57842,2846],{"class":614},[605,57844,57845,57847],{"class":607,"line":758},[605,57846,5544],{"class":610},[605,57848,5539],{"class":651},[605,57850,57851,57853,57855],{"class":607,"line":768},[605,57852,700],{"class":610},[605,57854,615],{"class":614},[605,57856,637],{"class":610},[605,57858,57859],{"class":607,"line":773},[605,57860,710],{"emptyLinePlaceholder":562},[605,57862,57863,57865,57867],{"class":607,"line":799},[605,57864,611],{"class":610},[605,57866,718],{"class":614},[605,57868,637],{"class":610},[605,57870,57871,57873,57875],{"class":607,"line":599},[605,57872,726],{"class":610},[605,57874,729],{"class":614},[605,57876,637],{"class":610},[605,57878,57879,57881,57883,57885,57887,57889,57891,57893,57895,57897,57899,57901,57903,57905,57907],{"class":607,"line":822},[605,57880,749],{"class":610},[605,57882,193],{"class":614},[605,57884,781],{"class":610},[605,57886,1989],{"class":618},[605,57888,625],{"class":610},[605,57890,628],{"class":610},[605,57892,1466],{"class":610},[605,57894,1893],{"class":791},[605,57896,1471],{"class":610},[605,57898,1893],{"class":791},[605,57900,1471],{"class":610},[605,57902,1893],{"class":791},[605,57904,1481],{"class":610},[605,57906,628],{"class":610},[605,57908,637],{"class":610},[605,57910,57911,57913,57915],{"class":607,"line":833},[605,57912,825],{"class":610},[605,57914,849],{"class":614},[605,57916,755],{"class":610},[605,57918,57919,57921,57923],{"class":607,"line":844},[605,57920,825],{"class":610},[605,57922,14995],{"class":614},[605,57924,637],{"class":610},[605,57926,57928,57930],{"class":57927,"line":854},[607,641],[605,57929,836],{"class":610},[605,57931,57932],{"class":614},"PositionalAudio\n",[605,57934,57936,57939,57941,57943,57946],{"class":57935,"line":600},[607,641],[605,57937,57938],{"class":618},"          ref",[605,57940,625],{"class":610},[605,57942,628],{"class":610},[605,57944,57945],{"class":631},"positionalAudioRef",[605,57947,2987],{"class":610},[605,57949,57951,57954,57956,57958,57961],{"class":57950,"line":874},[607,641],[605,57952,57953],{"class":618},"          url",[605,57955,625],{"class":610},[605,57957,628],{"class":610},[605,57959,57960],{"class":631},"your-sound.mp3",[605,57962,2987],{"class":610},[605,57964,57965],{"class":607,"line":884},[605,57966,47182],{"class":610},[605,57968,57969,57971,57973],{"class":607,"line":2952},[605,57970,857],{"class":610},[605,57972,14995],{"class":614},[605,57974,637],{"class":610},[605,57976,57977,57979,57981],{"class":607,"line":2960},[605,57978,867],{"class":610},[605,57980,193],{"class":614},[605,57982,637],{"class":610},[605,57984,57985,57987,57989],{"class":607,"line":2990},[605,57986,877],{"class":610},[605,57988,729],{"class":614},[605,57990,637],{"class":610},[605,57992,57993,57995,57997],{"class":607,"line":3007},[605,57994,700],{"class":610},[605,57996,718],{"class":614},[605,57998,637],{"class":610},[3725,58000,58001],{},[582,58002,58003,58004,58007,58008,58015,58016,58019,58020,4431,58023,58026],{},"AudioContext is authorized when a user gesture has been made on the page. The property ",[586,58005,58006],{},":autoplay=\"true\""," cannot be activated if no user gesture has been made previously ",[1112,58009,58012],{"href":58010,"rel":58011},"https://goo.gl/7K7WLu",[1116],[586,58013,58014],{},"read more",".\nIf you are sure that there will be a user gesture before your ",[586,58017,58018],{},"\u003CPositionAudio>"," component appears/is created, you can directly add ",[586,58021,58022],{},":ready=\"true\"",[586,58024,58025],{},"autoplay=\"true\""," for a direct launch.",[472,58028,58030],{"id":58029},"how-does-it-work","How does it work?",[3267,58032],{"className":58033,"src":58035},[58034],"mx-auto","/cientos/sketch.jpg",[472,58037,894],{"id":893},[899,58039,58040,58050],{},[902,58041,58042],{},[905,58043,58044,58046,58048],{},[908,58045,910],{"align":969},[908,58047,913],{"align":969},[908,58049,916],{},[918,58051,58052,58068,58089,58109,58142,58160,58175,58192,58211],{},[905,58053,58054,58058,58066],{},[923,58055,58056],{"align":969},[1673,58057,53789],{},[923,58059,58060,49311,58062,58065],{"align":969},[586,58061,11094],{},[1673,58063,58064],{},"required"," — The path or URL to the file.",[923,58067],{},[905,58069,58070,58075,58085],{},[923,58071,58072],{"align":969},[1673,58073,58074],{},"helper",[923,58076,58077,58079,58080,44676,58082],{"align":969},[586,58078,11014],{}," — Selects whether helper mode is enabled. ",[2508,58081],{},[1677,58083,58084],{},"(Useful for visualising the angle of sound propagation)",[923,58086,58087],{},[586,58088,943],{},[905,58090,58091,58095,58105],{},[923,58092,58093],{"align":969},[1673,58094,6945],{},[923,58096,58097,58099,58100],{"align":969},[586,58098,2537],{}," — The distance at which the volume reduction starts taking effect. ",[1677,58101,58102],{},[1673,58103,58104],{},"A non-negative number.",[923,58106,58107],{},[586,58108,1893],{},[905,58110,58111,58116,58138],{},[923,58112,58113],{"align":969},[1673,58114,58115],{},"ready",[923,58117,58118,58120,58121,58123,58124,58127,58128,58131,58132,58135,58136],{"align":969},[586,58119,11014],{}," — Tells ",[586,58122,57690],{}," that ",[586,58125,58126],{},"AudioContext"," is authorised because an user gesture has been made on the page. This is imperative, as ",[586,58129,58130],{},"autoplay"," cannot be activated if no user gesture has been made previously (",[1112,58133,58010],{"href":58010,"rel":58134},[1116],"). ",[2508,58137],{},[923,58139,58140],{},[586,58141,943],{},[905,58143,58144,58148,58156],{},[923,58145,58146],{"align":969},[1673,58147,58130],{},[923,58149,58150,58152,58153,58155],{"align":969},[586,58151,11014],{}," — Selects whether the audio is launched automatically. Please refer to the ",[586,58154,58115],{}," prop for a better understanding of how to use autoplay.",[923,58157,58158],{},[586,58159,943],{},[905,58161,58162,58166,58171],{},[923,58163,58164],{"align":969},[1673,58165,19561],{},[923,58167,58168,58170],{"align":969},[586,58169,11014],{}," — Specifies whether the audio should loop.",[923,58172,58173],{},[586,58174,943],{},[905,58176,58177,58182,58187],{},[923,58178,58179],{"align":969},[1673,58180,58181],{},"innerAngle",[923,58183,58184,58186],{"align":969},[586,58185,2537],{}," —  A parameter for directional audio sources, this is an angle, inside of which there will be no volume reduction.",[923,58188,58189],{},[586,58190,58191],{},"360",[905,58193,58194,58199,58207],{},[923,58195,58196],{"align":969},[1673,58197,58198],{},"outerAngle",[923,58200,58201,58203,58204,34398],{"align":969},[586,58202,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,58205,58206],{},"outerGain",[923,58208,58209],{},[586,58210,937],{},[905,58212,58213,58217,58228],{},[923,58214,58215],{"align":969},[1673,58216,58206],{},[923,58218,58219,58221,58222,58224,58225,58227],{"align":969},[586,58220,2537],{}," —  A parameter for directional audio sources, this is the amount of volume reduction outside of the ",[586,58223,58198],{}," prop. When the value is ",[586,58226,937],{}," no sound can be heard.",[923,58229,58230],{},[586,58231,937],{},[472,58233,52855],{"id":52854},[899,58235,58236,58244],{},[902,58237,58238],{},[905,58239,58240,58242],{},[908,58241,7807],{"align":969},[908,58243,913],{"align":969},[918,58245,58246,58258,58271,58284,58297],{},[905,58247,58248,58252],{},[923,58249,58250],{"align":969},[586,58251,20549],{},[923,58253,58254,58255,1118],{"align":969},"Instance reference — Inheritance of ",[1112,58256,451],{"href":57685,"rel":58257},[1116],[905,58259,58260,58265],{},[923,58261,58262],{"align":969},[586,58263,58264],{},"play()",[923,58266,58267,58268],{"align":969},"Play audio — ",[1677,58269,58270],{},"Cannot be fired if audio is already running.",[905,58272,58273,58278],{},[923,58274,58275],{"align":969},[586,58276,58277],{},"pause()",[923,58279,58280,58281],{"align":969},"Pause audio — ",[1677,58282,58283],{},"Cannot be fired if audio is already paused.",[905,58285,58286,58291],{},[923,58287,58288],{"align":969},[586,58289,58290],{},"stop()",[923,58292,58293,58294],{"align":969},"Stop audio — ",[1677,58295,58296],{},"Cannot be fired if audio is already stopped.",[905,58298,58299,58303],{},[923,58300,58301],{"align":969},[586,58302,18376],{},[923,58304,58305],{"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,58307,58311],{"className":58308,"code":58309,"language":58310,"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,58312,58313,58329,58333,58357,58361,58385,58407,58411,58441,58445,58472,58503,58532],{"__ignoreMap":544},[605,58314,58315,58317,58319,58321,58323,58325,58327],{"class":607,"line":545},[605,58316,2689],{"class":618},[605,58318,57801],{"class":651},[605,58320,625],{"class":610},[605,58322,9716],{"class":2800},[605,58324,2970],{"class":651},[605,58326,3152],{"class":610},[605,58328,5539],{"class":651},[605,58330,58331],{"class":607,"line":546},[605,58332,710],{"emptyLinePlaceholder":562},[605,58334,58335,58338,58340,58342,58345,58347,58349,58351,58354],{"class":607,"line":676},[605,58336,58337],{"class":651},"console",[605,58339,1118],{"class":610},[605,58341,13679],{"class":2800},[605,58343,58344],{"class":651},"(positionalAudioRef",[605,58346,1118],{"class":610},[605,58348,5496],{"class":651},[605,58350,1118],{"class":610},[605,58352,58353],{"class":651},"instance) ",[605,58355,58356],{"class":1181},"// instance properties\n",[605,58358,58359],{"class":607,"line":697},[605,58360,710],{"emptyLinePlaceholder":562},[605,58362,58363,58365,58368,58370,58372,58375,58377,58379,58381,58383],{"class":607,"line":707},[605,58364,2689],{"class":618},[605,58366,58367],{"class":651}," handlerAudio ",[605,58369,625],{"class":610},[605,58371,2713],{"class":610},[605,58373,58374],{"class":5495},"action",[605,58376,1190],{"class":610},[605,58378,51058],{"class":1172},[605,58380,4125],{"class":610},[605,58382,5501],{"class":618},[605,58384,1176],{"class":610},[605,58386,58387,58389,58391,58393,58395,58397,58399,58401,58403,58405],{"class":607,"line":713},[605,58388,14598],{"class":644},[605,58390,2713],{"class":614},[605,58392,15682],{"class":610},[605,58394,57945],{"class":651},[605,58396,1118],{"class":610},[605,58398,5496],{"class":651},[605,58400,2748],{"class":614},[605,58402,34731],{"class":610},[605,58404,45977],{"class":644},[605,58406,15640],{"class":610},[605,58408,58409],{"class":607,"line":723},[605,58410,710],{"emptyLinePlaceholder":562},[605,58412,58413,58415,58417,58420,58422,58425,58427,58430,58432,58434,58437,58439],{"class":607,"line":746},[605,58414,51067],{"class":618},[605,58416,648],{"class":610},[605,58418,58419],{"class":651}," play",[605,58421,655],{"class":610},[605,58423,58424],{"class":651}," pause",[605,58426,655],{"class":610},[605,58428,58429],{"class":651}," stop",[605,58431,661],{"class":610},[605,58433,2766],{"class":610},[605,58435,58436],{"class":651}," positionalAudioRef",[605,58438,1118],{"class":610},[605,58440,17353],{"class":651},[605,58442,58443],{"class":607,"line":758},[605,58444,710],{"emptyLinePlaceholder":562},[605,58446,58447,58449,58451,58453,58455,58457,58460,58462,58464,58466,58468,58470],{"class":607,"line":768},[605,58448,14598],{"class":644},[605,58450,2713],{"class":614},[605,58452,58374],{"class":651},[605,58454,14619],{"class":610},[605,58456,667],{"class":610},[605,58458,58459],{"class":631},"play",[605,58461,5536],{"class":610},[605,58463,2748],{"class":614},[605,58465,34731],{"class":610},[605,58467,58419],{"class":2800},[605,58469,51162],{"class":614},[605,58471,1297],{"class":610},[605,58473,58474,58477,58480,58482,58484,58486,58488,58491,58493,58495,58497,58499,58501],{"class":607,"line":773},[605,58475,58476],{"class":644},"  else",[605,58478,58479],{"class":644}," if",[605,58481,2713],{"class":614},[605,58483,58374],{"class":651},[605,58485,14619],{"class":610},[605,58487,667],{"class":610},[605,58489,58490],{"class":631},"pause",[605,58492,5536],{"class":610},[605,58494,2748],{"class":614},[605,58496,34731],{"class":610},[605,58498,58424],{"class":2800},[605,58500,51162],{"class":614},[605,58502,1297],{"class":610},[605,58504,58505,58507,58509,58511,58513,58515,58517,58520,58522,58524,58526,58528,58530],{"class":607,"line":799},[605,58506,58476],{"class":644},[605,58508,58479],{"class":644},[605,58510,2713],{"class":614},[605,58512,58374],{"class":651},[605,58514,14619],{"class":610},[605,58516,667],{"class":610},[605,58518,58519],{"class":631},"stop",[605,58521,5536],{"class":610},[605,58523,2748],{"class":614},[605,58525,34731],{"class":610},[605,58527,58429],{"class":2800},[605,58529,51162],{"class":614},[605,58531,1297],{"class":610},[605,58533,58534],{"class":607,"line":599},[605,58535,1297],{"class":610},[594,58537,58539],{"className":596,"code":58538,"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,58540,58541,58549,58588,58626,58664,58668,58676,58684,58692,58700,58708,58716,58724],{"__ignoreMap":544},[605,58542,58543,58545,58547],{"class":607,"line":545},[605,58544,611],{"class":610},[605,58546,718],{"class":614},[605,58548,637],{"class":610},[605,58550,58551,58553,58555,58557,58559,58561,58563,58566,58568,58570,58572,58574,58576,58578,58580,58582,58584,58586],{"class":607,"line":546},[605,58552,726],{"class":610},[605,58554,31184],{"class":614},[605,58556,7756],{"class":610},[605,58558,31189],{"class":618},[605,58560,625],{"class":610},[605,58562,628],{"class":610},[605,58564,58565],{"class":2800},"handlerAudio",[605,58567,2970],{"class":610},[605,58569,5536],{"class":610},[605,58571,58459],{"class":631},[605,58573,5536],{"class":610},[605,58575,4125],{"class":610},[605,58577,628],{"class":610},[605,58579,11720],{"class":610},[605,58581,58459],{"class":651},[605,58583,700],{"class":610},[605,58585,31184],{"class":614},[605,58587,637],{"class":610},[605,58589,58590,58592,58594,58596,58598,58600,58602,58604,58606,58608,58610,58612,58614,58616,58618,58620,58622,58624],{"class":607,"line":676},[605,58591,726],{"class":610},[605,58593,31184],{"class":614},[605,58595,7756],{"class":610},[605,58597,31189],{"class":618},[605,58599,625],{"class":610},[605,58601,628],{"class":610},[605,58603,58565],{"class":2800},[605,58605,2970],{"class":610},[605,58607,5536],{"class":610},[605,58609,58490],{"class":631},[605,58611,5536],{"class":610},[605,58613,4125],{"class":610},[605,58615,628],{"class":610},[605,58617,11720],{"class":610},[605,58619,58490],{"class":651},[605,58621,700],{"class":610},[605,58623,31184],{"class":614},[605,58625,637],{"class":610},[605,58627,58628,58630,58632,58634,58636,58638,58640,58642,58644,58646,58648,58650,58652,58654,58656,58658,58660,58662],{"class":607,"line":697},[605,58629,726],{"class":610},[605,58631,31184],{"class":614},[605,58633,7756],{"class":610},[605,58635,31189],{"class":618},[605,58637,625],{"class":610},[605,58639,628],{"class":610},[605,58641,58565],{"class":2800},[605,58643,2970],{"class":610},[605,58645,5536],{"class":610},[605,58647,58519],{"class":631},[605,58649,5536],{"class":610},[605,58651,4125],{"class":610},[605,58653,628],{"class":610},[605,58655,11720],{"class":610},[605,58657,58519],{"class":651},[605,58659,700],{"class":610},[605,58661,31184],{"class":614},[605,58663,637],{"class":610},[605,58665,58666],{"class":607,"line":707},[605,58667,710],{"emptyLinePlaceholder":562},[605,58669,58670,58672,58674],{"class":607,"line":713},[605,58671,726],{"class":610},[605,58673,729],{"class":614},[605,58675,637],{"class":610},[605,58677,58678,58680,58682],{"class":607,"line":723},[605,58679,749],{"class":610},[605,58681,257],{"class":614},[605,58683,637],{"class":610},[605,58685,58686,58688,58690],{"class":607,"line":746},[605,58687,825],{"class":610},[605,58689,14995],{"class":614},[605,58691,637],{"class":610},[605,58693,58694,58696,58698],{"class":607,"line":758},[605,58695,836],{"class":610},[605,58697,451],{"class":614},[605,58699,755],{"class":610},[605,58701,58702,58704,58706],{"class":607,"line":768},[605,58703,857],{"class":610},[605,58705,14995],{"class":614},[605,58707,637],{"class":610},[605,58709,58710,58712,58714],{"class":607,"line":773},[605,58711,867],{"class":610},[605,58713,257],{"class":614},[605,58715,637],{"class":610},[605,58717,58718,58720,58722],{"class":607,"line":799},[605,58719,877],{"class":610},[605,58721,729],{"class":614},[605,58723,637],{"class":610},[605,58725,58726,58728,58730],{"class":607,"line":599},[605,58727,700],{"class":610},[605,58729,718],{"class":614},[605,58731,637],{"class":610},[472,58733,7742],{"id":7741},[899,58735,58736,58744],{},[902,58737,58738],{},[905,58739,58740,58742],{},[908,58741,7807],{"align":969},[908,58743,913],{"align":969},[918,58745,58746],{},[905,58747,58748,58753],{},[923,58749,58750],{"align":969},[586,58751,58752],{},"is-playing",[923,58754,58755,58756,44676,58758],{"align":969},"Triggered when the audio changes its state (play, pause, or stop) ",[2508,58757],{},[586,58759,58760],{},"@is-playing=\"(e) => yourIsPlayingRef = e\"",[1299,58762,58763],{},"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":58765},[58766,58767,58768,58769,58770],{"id":592,"depth":546,"text":15},{"id":58029,"depth":546,"text":58030},{"id":893,"depth":546,"text":894},{"id":52854,"depth":546,"text":52855},{"id":7741,"depth":546,"text":7742},"Spatially positioned audio in 3D space.",{},{"title":451,"description":58771},"LsmuqynUpKNFwOEvnJJepUiBRKPh7SYxe1fcp-_mrT4",{"id":58776,"title":455,"body":58777,"description":59409,"extension":559,"links":560,"meta":59410,"navigation":562,"path":456,"seo":59411,"stem":457,"__hash__":59412},"docs/2.api/miscellaneous/use-animations.md",{"type":469,"value":58778,"toc":59402},[58779,58793,58795,58799,58809,59036,59040,59047,59379,59381,59399],[582,58780,58781,58783,58784,58787,58788,29567],{},[586,58782,455],{}," is a composable that returns a ",[586,58785,58786],{},"shallowReactive"," with all the models actions based on the animations provided. It is a wrapper around the ",[1112,58789,58792],{"href":58790,"rel":58791},"https://threejs.org/docs/#api/en/animation/AnimationMixer",[1116],"AnimationMixer",[472,58794,15],{"id":592},[7473,58796,58798],{"id":58797},"basic-usage-automatic-updates","Basic Usage (Automatic Updates)",[582,58800,58801,58802,58804,58805,58808],{},"By default, ",[586,58803,455],{}," automatically updates the animation mixer on each frame using the ",[586,58806,58807],{},"useLoop"," composable:",[594,58810,58813],{"className":1158,"code":58811,"highlights":58812,"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,58814,58815,58839,58843,58868,58872,58906,58932,58956,58960,58973,58977,58997,59016,59030],{"__ignoreMap":544},[605,58816,58818,58820,58822,58825,58827,58829,58831,58833,58835,58837],{"class":58817,"line":545},[607,641],[605,58819,645],{"class":644},[605,58821,648],{"class":610},[605,58823,58824],{"class":651}," useAnimations",[605,58826,655],{"class":610},[605,58828,10472],{"class":651},[605,58830,661],{"class":610},[605,58832,664],{"class":644},[605,58834,667],{"class":610},[605,58836,670],{"class":631},[605,58838,673],{"class":610},[605,58840,58841],{"class":607,"line":546},[605,58842,710],{"emptyLinePlaceholder":562},[605,58844,58845,58847,58849,58851,58853,58855,58857,58859,58861,58864,58866],{"class":607,"line":676},[605,58846,2689],{"class":618},[605,58848,648],{"class":610},[605,58850,53879],{"class":651},[605,58852,5544],{"class":610},[605,58854,2766],{"class":610},[605,58856,10472],{"class":2800},[605,58858,2970],{"class":651},[605,58860,5536],{"class":610},[605,58862,58863],{"class":631},"/models/ugly-naked-bunny.gltf",[605,58865,5536],{"class":610},[605,58867,5539],{"class":651},[605,58869,58870],{"class":607,"line":697},[605,58871,710],{"emptyLinePlaceholder":562},[605,58873,58874,58876,58879,58881,58883,58885,58887,58889,58891,58893,58895,58897,58900,58903],{"class":607,"line":707},[605,58875,2689],{"class":618},[605,58877,58878],{"class":651}," animations ",[605,58880,625],{"class":610},[605,58882,14390],{"class":2800},[605,58884,2970],{"class":651},[605,58886,14395],{"class":610},[605,58888,5501],{"class":618},[605,58890,10512],{"class":651},[605,58892,1118],{"class":610},[605,58894,5496],{"class":651},[605,58896,10582],{"class":610},[605,58898,58899],{"class":651},"animations ",[605,58901,58902],{"class":610},"||",[605,58904,58905],{"class":651}," [])\n",[605,58907,58908,58910,58912,58914,58916,58918,58920,58922,58924,58926,58928,58930],{"class":607,"line":713},[605,58909,2689],{"class":618},[605,58911,14349],{"class":651},[605,58913,625],{"class":610},[605,58915,14390],{"class":2800},[605,58917,2970],{"class":651},[605,58919,14395],{"class":610},[605,58921,5501],{"class":618},[605,58923,10512],{"class":651},[605,58925,10582],{"class":610},[605,58927,5496],{"class":651},[605,58929,10582],{"class":610},[605,58931,30736],{"class":651},[605,58933,58935,58937,58939,58942,58944,58946,58948,58951,58953],{"class":58934,"line":723},[607,641],[605,58936,2689],{"class":618},[605,58938,648],{"class":610},[605,58940,58941],{"class":651}," actions ",[605,58943,5544],{"class":610},[605,58945,2766],{"class":610},[605,58947,58824],{"class":2800},[605,58949,58950],{"class":651},"(animations",[605,58952,655],{"class":610},[605,58954,58955],{"class":651}," model)\n",[605,58957,58958],{"class":607,"line":746},[605,58959,710],{"emptyLinePlaceholder":562},[605,58961,58962,58964,58967,58969,58971],{"class":607,"line":758},[605,58963,2689],{"class":618},[605,58965,58966],{"class":651}," currentAction ",[605,58968,625],{"class":610},[605,58970,5431],{"class":2800},[605,58972,2846],{"class":651},[605,58974,58975],{"class":607,"line":768},[605,58976,710],{"emptyLinePlaceholder":562},[605,58978,58979,58981,58984,58986,58988,58991,58993,58995],{"class":607,"line":773},[605,58980,5485],{"class":2800},[605,58982,58983],{"class":651},"(actions",[605,58985,655],{"class":610},[605,58987,2713],{"class":610},[605,58989,58990],{"class":5495},"newActions",[605,58992,4125],{"class":610},[605,58994,5501],{"class":618},[605,58996,1176],{"class":610},[605,58998,58999,59002,59004,59006,59008,59011,59013],{"class":607,"line":799},[605,59000,59001],{"class":651},"  currentAction",[605,59003,1118],{"class":610},[605,59005,5496],{"class":651},[605,59007,2766],{"class":610},[605,59009,59010],{"class":651}," newActions",[605,59012,1118],{"class":610},[605,59014,59015],{"class":651},"Greeting\n",[605,59017,59018,59020,59022,59024,59026,59028],{"class":607,"line":599},[605,59019,59001],{"class":651},[605,59021,1118],{"class":610},[605,59023,5496],{"class":651},[605,59025,1118],{"class":610},[605,59027,58459],{"class":2800},[605,59029,2846],{"class":614},[605,59031,59032,59034],{"class":607,"line":822},[605,59033,5544],{"class":610},[605,59035,5539],{"class":651},[7473,59037,59039],{"id":59038},"manual-updates","Manual Updates",[582,59041,59042,59043,59046],{},"To gain finer control over animation mixer updates, enable ",[586,59044,59045],{},"manualUpdate: true"," and manage the update cycle manually.",[594,59048,59051],{"className":1158,"code":59049,"highlights":59050,"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,59052,59053,59076,59095,59099,59123,59127,59157,59183,59214,59226,59233,59237,59242,59259,59277,59299,59305,59309,59321,59325,59343,59359,59373],{"__ignoreMap":544},[605,59054,59056,59058,59060,59062,59064,59066,59068,59070,59072,59074],{"class":59055,"line":545},[607,641],[605,59057,645],{"class":644},[605,59059,648],{"class":610},[605,59061,58824],{"class":651},[605,59063,655],{"class":610},[605,59065,10472],{"class":651},[605,59067,661],{"class":610},[605,59069,664],{"class":644},[605,59071,667],{"class":610},[605,59073,670],{"class":631},[605,59075,673],{"class":610},[605,59077,59078,59080,59082,59085,59087,59089,59091,59093],{"class":607,"line":546},[605,59079,645],{"class":644},[605,59081,648],{"class":610},[605,59083,59084],{"class":651}," useLoop",[605,59086,661],{"class":610},[605,59088,664],{"class":644},[605,59090,667],{"class":610},[605,59092,692],{"class":631},[605,59094,673],{"class":610},[605,59096,59097],{"class":607,"line":676},[605,59098,710],{"emptyLinePlaceholder":562},[605,59100,59101,59103,59105,59107,59109,59111,59113,59115,59117,59119,59121],{"class":607,"line":697},[605,59102,2689],{"class":618},[605,59104,648],{"class":610},[605,59106,53879],{"class":651},[605,59108,5544],{"class":610},[605,59110,2766],{"class":610},[605,59112,10472],{"class":2800},[605,59114,2970],{"class":651},[605,59116,5536],{"class":610},[605,59118,58863],{"class":631},[605,59120,5536],{"class":610},[605,59122,5539],{"class":651},[605,59124,59125],{"class":607,"line":707},[605,59126,710],{"emptyLinePlaceholder":562},[605,59128,59129,59131,59133,59135,59137,59139,59141,59143,59145,59147,59149,59151,59153,59155],{"class":607,"line":713},[605,59130,2689],{"class":618},[605,59132,58878],{"class":651},[605,59134,625],{"class":610},[605,59136,14390],{"class":2800},[605,59138,2970],{"class":651},[605,59140,14395],{"class":610},[605,59142,5501],{"class":618},[605,59144,10512],{"class":651},[605,59146,1118],{"class":610},[605,59148,5496],{"class":651},[605,59150,10582],{"class":610},[605,59152,58899],{"class":651},[605,59154,58902],{"class":610},[605,59156,58905],{"class":651},[605,59158,59159,59161,59163,59165,59167,59169,59171,59173,59175,59177,59179,59181],{"class":607,"line":723},[605,59160,2689],{"class":618},[605,59162,14349],{"class":651},[605,59164,625],{"class":610},[605,59166,14390],{"class":2800},[605,59168,2970],{"class":651},[605,59170,14395],{"class":610},[605,59172,5501],{"class":618},[605,59174,10512],{"class":651},[605,59176,10582],{"class":610},[605,59178,5496],{"class":651},[605,59180,10582],{"class":610},[605,59182,30736],{"class":651},[605,59184,59186,59188,59190,59193,59195,59198,59200,59202,59204,59206,59208,59210,59212],{"class":59185,"line":746},[607,641],[605,59187,2689],{"class":618},[605,59189,648],{"class":610},[605,59191,59192],{"class":651}," actions",[605,59194,655],{"class":610},[605,59196,59197],{"class":651}," mixer ",[605,59199,5544],{"class":610},[605,59201,2766],{"class":610},[605,59203,58824],{"class":2800},[605,59205,58950],{"class":651},[605,59207,655],{"class":610},[605,59209,14400],{"class":651},[605,59211,655],{"class":610},[605,59213,1176],{"class":610},[605,59215,59217,59220,59222,59224],{"class":59216,"line":758},[607,641],[605,59218,59219],{"class":614},"  manualUpdate",[605,59221,1190],{"class":610},[605,59223,10938],{"class":3870},[605,59225,14031],{"class":610},[605,59227,59229,59231],{"class":59228,"line":768},[607,641],[605,59230,5544],{"class":610},[605,59232,5539],{"class":651},[605,59234,59235],{"class":607,"line":773},[605,59236,710],{"emptyLinePlaceholder":562},[605,59238,59239],{"class":607,"line":799},[605,59240,59241],{"class":1181},"// Handle updates manually\n",[605,59243,59244,59246,59248,59251,59253,59255,59257],{"class":607,"line":599},[605,59245,2689],{"class":618},[605,59247,648],{"class":610},[605,59249,59250],{"class":651}," onBeforeRender ",[605,59252,5544],{"class":610},[605,59254,2766],{"class":610},[605,59256,59084],{"class":2800},[605,59258,2846],{"class":651},[605,59260,59261,59264,59266,59268,59271,59273,59275],{"class":607,"line":822},[605,59262,59263],{"class":2800},"onBeforeRender",[605,59265,2970],{"class":651},[605,59267,32718],{"class":610},[605,59269,59270],{"class":5495}," delta",[605,59272,32735],{"class":610},[605,59274,5501],{"class":618},[605,59276,1176],{"class":610},[605,59278,59280,59283,59285,59287,59289,59292,59294,59297],{"class":59279,"line":833},[607,641],[605,59281,59282],{"class":651},"  mixer",[605,59284,1118],{"class":610},[605,59286,5496],{"class":651},[605,59288,1118],{"class":610},[605,59290,59291],{"class":2800},"update",[605,59293,2970],{"class":614},[605,59295,59296],{"class":651},"delta",[605,59298,5539],{"class":614},[605,59300,59301,59303],{"class":607,"line":844},[605,59302,5544],{"class":610},[605,59304,5539],{"class":651},[605,59306,59307],{"class":607,"line":854},[605,59308,710],{"emptyLinePlaceholder":562},[605,59310,59311,59313,59315,59317,59319],{"class":607,"line":600},[605,59312,2689],{"class":618},[605,59314,58966],{"class":651},[605,59316,625],{"class":610},[605,59318,5431],{"class":2800},[605,59320,2846],{"class":651},[605,59322,59323],{"class":607,"line":874},[605,59324,710],{"emptyLinePlaceholder":562},[605,59326,59327,59329,59331,59333,59335,59337,59339,59341],{"class":607,"line":884},[605,59328,5485],{"class":2800},[605,59330,58983],{"class":651},[605,59332,655],{"class":610},[605,59334,2713],{"class":610},[605,59336,58990],{"class":5495},[605,59338,4125],{"class":610},[605,59340,5501],{"class":618},[605,59342,1176],{"class":610},[605,59344,59345,59347,59349,59351,59353,59355,59357],{"class":607,"line":2952},[605,59346,59001],{"class":651},[605,59348,1118],{"class":610},[605,59350,5496],{"class":651},[605,59352,2766],{"class":610},[605,59354,59010],{"class":651},[605,59356,1118],{"class":610},[605,59358,59015],{"class":651},[605,59360,59361,59363,59365,59367,59369,59371],{"class":607,"line":2960},[605,59362,59001],{"class":651},[605,59364,1118],{"class":610},[605,59366,5496],{"class":651},[605,59368,1118],{"class":610},[605,59370,58459],{"class":2800},[605,59372,2846],{"class":614},[605,59374,59375,59377],{"class":607,"line":2990},[605,59376,5544],{"class":610},[605,59378,5539],{"class":651},[472,59380,7487],{"id":11049},[3136,59382,59383],{},[3139,59384,59385,59388,59389,59391,59392,59394,59395,59398],{},[586,59386,59387],{},"manualUpdate"," (optional): Default is ",[586,59390,943],{},". If set to ",[586,59393,933],{},", disables automatic animation mixer updates. You'll need to call ",[586,59396,59397],{},"mixer.value.update(delta)"," manually.",[1299,59400,59401],{},"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":59403},[59404,59408],{"id":592,"depth":546,"text":15,"children":59405},[59406,59407],{"id":58797,"depth":676,"text":58798},{"id":59038,"depth":676,"text":59039},{"id":11049,"depth":546,"text":7487},"Composable for managing model animations with AnimationMixer.",{},{"title":455,"description":59409},"TJcEqtFqnepbieID3hzHGMd0QylrwTz-3E1RokTEGoY",{"id":59414,"title":459,"body":59415,"description":60057,"extension":559,"links":560,"meta":60058,"navigation":562,"path":460,"seo":60059,"stem":461,"__hash__":60060},"docs/2.api/miscellaneous/use-gltf-exporter.md",{"type":469,"value":59416,"toc":60051},[59417,59433,59435,59848,59852,59901,59903,60048],[582,59418,59419,59424,59425,59429,59430,59432],{},[1112,59420,59423],{"href":59421,"rel":59422},"https://threejs.org/docs/index.html?q=expo#examples/en/exporters/GLTFExporter",[1116],"GLTFExporter"," is an addon in Three.js that allows you to download any object3D in a ",[1112,59426,10972],{"href":59427,"rel":59428},"https://www.khronos.org/gltf",[1116]," format. ",[1673,59431,10429],{}," provides a composable that simplifies this process with just a few lines of code.",[472,59434,30096],{"id":30095},[594,59436,59439],{"className":596,"code":59437,"highlights":59438,"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,59440,59441,59461,59479,59499,59517,59521,59533,59537,59542,59557,59599,59603,59611,59619,59641,59673,59679,59691,59705,59719,59735,59739,59771,59792,59800,59832,59840],{"__ignoreMap":544},[605,59442,59443,59445,59447,59449,59451,59453,59455,59457,59459],{"class":607,"line":545},[605,59444,611],{"class":610},[605,59446,615],{"class":614},[605,59448,619],{"class":618},[605,59450,622],{"class":618},[605,59452,625],{"class":610},[605,59454,628],{"class":610},[605,59456,632],{"class":631},[605,59458,628],{"class":610},[605,59460,637],{"class":610},[605,59462,59463,59465,59467,59469,59471,59473,59475,59477],{"class":607,"line":546},[605,59464,645],{"class":644},[605,59466,648],{"class":610},[605,59468,683],{"class":651},[605,59470,661],{"class":610},[605,59472,664],{"class":644},[605,59474,667],{"class":610},[605,59476,692],{"class":631},[605,59478,673],{"class":610},[605,59480,59482,59484,59486,59489,59491,59493,59495,59497],{"class":59481,"line":676},[607,641],[605,59483,645],{"class":644},[605,59485,648],{"class":610},[605,59487,59488],{"class":651}," useGLTFExporter",[605,59490,661],{"class":610},[605,59492,664],{"class":644},[605,59494,667],{"class":610},[605,59496,670],{"class":631},[605,59498,673],{"class":610},[605,59500,59501,59503,59505,59507,59509,59511,59513,59515],{"class":607,"line":697},[605,59502,645],{"class":644},[605,59504,648],{"class":610},[605,59506,9716],{"class":651},[605,59508,661],{"class":610},[605,59510,664],{"class":644},[605,59512,667],{"class":610},[605,59514,601],{"class":631},[605,59516,673],{"class":610},[605,59518,59519],{"class":607,"line":707},[605,59520,710],{"emptyLinePlaceholder":562},[605,59522,59523,59525,59527,59529,59531],{"class":607,"line":713},[605,59524,2689],{"class":618},[605,59526,9711],{"class":651},[605,59528,625],{"class":610},[605,59530,9716],{"class":2800},[605,59532,2846],{"class":651},[605,59534,59535],{"class":607,"line":723},[605,59536,710],{"emptyLinePlaceholder":562},[605,59538,59539],{"class":607,"line":746},[605,59540,59541],{"class":1181},"// the second argument – options – is not required\n",[605,59543,59544,59546,59549,59551,59553,59555],{"class":607,"line":758},[605,59545,2689],{"class":618},[605,59547,59548],{"class":651}," downloadBox ",[605,59550,625],{"class":610},[605,59552,51215],{"class":610},[605,59554,5501],{"class":618},[605,59556,1176],{"class":610},[605,59558,59560,59563,59565,59567,59569,59571,59573,59575,59578,59580,59582,59584,59586,59588,59591,59593,59595,59597],{"class":59559,"line":768},[607,641],[605,59561,59562],{"class":2800},"  useGLTFExporter",[605,59564,2970],{"class":614},[605,59566,9809],{"class":651},[605,59568,1118],{"class":610},[605,59570,5496],{"class":651},[605,59572,655],{"class":610},[605,59574,648],{"class":610},[605,59576,59577],{"class":614}," fileName",[605,59579,1190],{"class":610},[605,59581,667],{"class":610},[605,59583,15269],{"class":631},[605,59585,5536],{"class":610},[605,59587,655],{"class":610},[605,59589,59590],{"class":614}," binary",[605,59592,1190],{"class":610},[605,59594,10938],{"class":3870},[605,59596,661],{"class":610},[605,59598,5539],{"class":614},[605,59600,59601],{"class":607,"line":773},[605,59602,1297],{"class":610},[605,59604,59605,59607,59609],{"class":607,"line":799},[605,59606,700],{"class":610},[605,59608,615],{"class":614},[605,59610,637],{"class":610},[605,59612,59613,59615,59617],{"class":607,"line":599},[605,59614,611],{"class":610},[605,59616,718],{"class":614},[605,59618,637],{"class":610},[605,59620,59621,59623,59625,59627,59629,59631,59633,59635,59638],{"class":607,"line":822},[605,59622,726],{"class":610},[605,59624,729],{"class":614},[605,59626,732],{"class":618},[605,59628,625],{"class":610},[605,59630,628],{"class":610},[605,59632,5040],{"class":631},[605,59634,628],{"class":610},[605,59636,59637],{"class":618}," window-size",[605,59639,59640],{"class":610}," >\n",[605,59642,59643,59645,59647,59649,59651,59653,59655,59657,59659,59661,59663,59665,59667,59669,59671],{"class":607,"line":833},[605,59644,749],{"class":610},[605,59646,752],{"class":614},[605,59648,781],{"class":610},[605,59650,1459],{"class":618},[605,59652,625],{"class":610},[605,59654,628],{"class":610},[605,59656,1466],{"class":610},[605,59658,937],{"class":791},[605,59660,1471],{"class":610},[605,59662,792],{"class":791},[605,59664,1471],{"class":610},[605,59666,2396],{"class":791},[605,59668,1481],{"class":610},[605,59670,628],{"class":610},[605,59672,755],{"class":610},[605,59674,59675,59677],{"class":607,"line":844},[605,59676,749],{"class":610},[605,59678,2957],{"class":614},[605,59680,59681,59683,59685,59687,59689],{"class":607,"line":854},[605,59682,5679],{"class":618},[605,59684,625],{"class":610},[605,59686,628],{"class":610},[605,59688,9809],{"class":631},[605,59690,2987],{"class":610},[605,59692,59693,59695,59697,59699,59701,59703],{"class":607,"line":600},[605,59694,5693],{"class":610},[605,59696,4081],{"class":618},[605,59698,625],{"class":610},[605,59700,628],{"class":610},[605,59702,21690],{"class":791},[605,59704,2987],{"class":610},[605,59706,59707,59709,59711,59713,59715,59717],{"class":607,"line":874},[605,59708,5693],{"class":610},[605,59710,784],{"class":618},[605,59712,625],{"class":610},[605,59714,628],{"class":610},[605,59716,1478],{"class":791},[605,59718,2987],{"class":610},[605,59720,59721,59724,59726,59728,59730,59733],{"class":607,"line":884},[605,59722,59723],{"class":610},"      @",[605,59725,31189],{"class":618},[605,59727,625],{"class":610},[605,59729,628],{"class":610},[605,59731,59732],{"class":651},"downloadBox",[605,59734,2987],{"class":610},[605,59736,59737],{"class":607,"line":2952},[605,59738,5713],{"class":610},[605,59740,59741,59743,59745,59747,59749,59751,59753,59755,59757,59759,59761,59763,59765,59767,59769],{"class":607,"line":2960},[605,59742,825],{"class":610},[605,59744,839],{"class":614},[605,59746,781],{"class":610},[605,59748,1989],{"class":618},[605,59750,625],{"class":610},[605,59752,628],{"class":610},[605,59754,1466],{"class":610},[605,59756,1893],{"class":791},[605,59758,1471],{"class":610},[605,59760,1893],{"class":791},[605,59762,1471],{"class":610},[605,59764,1893],{"class":791},[605,59766,1481],{"class":610},[605,59768,628],{"class":610},[605,59770,755],{"class":610},[605,59772,59773,59775,59777,59779,59781,59783,59785,59788,59790],{"class":607,"line":2990},[605,59774,825],{"class":610},[605,59776,13421],{"class":614},[605,59778,781],{"class":610},[605,59780,2500],{"class":618},[605,59782,625],{"class":610},[605,59784,628],{"class":610},[605,59786,59787],{"class":791},"0x00ff00",[605,59789,628],{"class":610},[605,59791,755],{"class":610},[605,59793,59794,59796,59798],{"class":607,"line":3007},[605,59795,867],{"class":610},[605,59797,828],{"class":614},[605,59799,637],{"class":610},[605,59801,59802,59804,59806,59808,59810,59812,59814,59816,59818,59820,59822,59824,59826,59828,59830],{"class":607,"line":3022},[605,59803,749],{"class":610},[605,59805,3539],{"class":614},[605,59807,781],{"class":610},[605,59809,1459],{"class":618},[605,59811,625],{"class":610},[605,59813,628],{"class":610},[605,59815,1466],{"class":610},[605,59817,937],{"class":791},[605,59819,1471],{"class":610},[605,59821,1478],{"class":791},[605,59823,1471],{"class":610},[605,59825,1478],{"class":791},[605,59827,1481],{"class":610},[605,59829,628],{"class":610},[605,59831,755],{"class":610},[605,59833,59834,59836,59838],{"class":607,"line":3047},[605,59835,877],{"class":610},[605,59837,729],{"class":614},[605,59839,637],{"class":610},[605,59841,59842,59844,59846],{"class":607,"line":2591},[605,59843,700],{"class":610},[605,59845,718],{"class":614},[605,59847,637],{"class":610},[472,59849,59851],{"id":59850},"arguments","Arguments",[899,59853,59854,59866],{},[902,59855,59856],{},[905,59857,59858,59860,59862,59864],{},[908,59859,3118],{"align":969},[908,59861,10957],{},[908,59863,916],{},[908,59865,913],{},[918,59867,59868,59884],{},[905,59869,59870,59875,59879,59881],{},[923,59871,59872],{"align":969},[1673,59873,59874],{},"Selector",[923,59876,59877],{},[586,59878,2578],{},[923,59880,26998],{},[923,59882,59883],{},"The object to download. Could be an array of objects",[905,59885,59886,59890,59894,59898],{},[923,59887,59888],{"align":969},[1673,59889,7487],{},[923,59891,59892],{},[586,59893,7487],{},[923,59895,59896],{},[586,59897,1151],{},[923,59899,59900],{},"Description below",[7473,59902,7487],{"id":11049},[899,59904,59905,59917],{},[902,59906,59907],{},[905,59908,59909,59911,59913,59915],{},[908,59910,3118],{"align":969},[908,59912,10957],{"align":969},[908,59914,916],{"align":969},[908,59916,913],{"align":969},[918,59918,59919,59938,59956,59974,59992,60011,60029],{},[905,59920,59921,59926,59931,59935],{},[923,59922,59923],{"align":969},[1673,59924,59925],{},"trs",[923,59927,59928],{"align":969},[586,59929,59930],{},"bool",[923,59932,59933],{"align":969},[586,59934,943],{},[923,59936,59937],{"align":969},"Export position, rotation and scale instead of matrix per node",[905,59939,59940,59945,59949,59953],{},[923,59941,59942],{"align":969},[1673,59943,59944],{},"onlyVisible",[923,59946,59947],{"align":969},[586,59948,59930],{},[923,59950,59951],{"align":969},[586,59952,933],{},[923,59954,59955],{"align":969},"Export only visible objects",[905,59957,59958,59963,59967,59971],{},[923,59959,59960],{"align":969},[1673,59961,59962],{},"binary",[923,59964,59965],{"align":969},[586,59966,59930],{},[923,59968,59969],{"align":969},[586,59970,943],{},[923,59972,59973],{"align":969},"Export in binary (.glb) format, returning an ArrayBuffer",[905,59975,59976,59981,59985,59989],{},[923,59977,59978],{"align":969},[1673,59979,59980],{},"maxTextureSize",[923,59982,59983],{"align":969},[586,59984,2537],{},[923,59986,59987],{"align":969},[586,59988,6938],{},[923,59990,59991],{"align":969},"Restricts the image maximum size (both width and height) to the given value",[905,59993,59994,59999,60004,60008],{},[923,59995,59996],{"align":969},[1673,59997,59998],{},"animations",[923,60000,60001],{"align":969},[586,60002,60003],{},"Array\u003CAnimationClip>",[923,60005,60006],{"align":969},[586,60007,1151],{},[923,60009,60010],{"align":969},"List of animations to be included in the export",[905,60012,60013,60018,60022,60026],{},[923,60014,60015],{"align":969},[1673,60016,60017],{},"includeCustomExtensions",[923,60019,60020],{"align":969},[586,60021,59930],{},[923,60023,60024],{"align":969},[586,60025,943],{},[923,60027,60028],{"align":969},"Export custom glTF extensions defined on an object's userData.gltfExtensions",[905,60030,60031,60036,60040,60045],{},[923,60032,60033],{"align":969},[1673,60034,60035],{},"fileName",[923,60037,60038],{"align":969},[586,60039,11094],{},[923,60041,60042],{"align":969},[586,60043,60044],{},"Object name",[923,60046,60047],{"align":969},"Name of the generated file",[1299,60049,60050],{},"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":60052},[60053,60054],{"id":30095,"depth":546,"text":30096},{"id":59850,"depth":546,"text":59851,"children":60055},[60056],{"id":11049,"depth":676,"text":7487},"Export 3D objects to GLTF format.",{},{"title":459,"description":60057},"RMYlhgEenD2JjVSHoqXD_ilu6cdNNok5afbVcapEUPE",{"id":60062,"title":463,"body":60063,"description":60352,"extension":559,"links":560,"meta":60353,"navigation":562,"path":464,"seo":60354,"stem":465,"__hash__":60355},"docs/2.api/miscellaneous/use-intersect.md",{"type":469,"value":60064,"toc":60347},[60065,60082,60084,60100,60244,60246,60274,60278,60345],[582,60066,60067,60069,60070,50452,60073,60075,60076,60081],{},[586,60068,463],{}," is a function that returns ",[586,60071,60072],{},"intersect",[586,60074,52904],{}," that's updated when the observed object enters or leaves the screen. This relies on ",[1112,60077,60080],{"href":60078,"rel":60079},"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,60083,15],{"id":592},[3725,60085,60086],{},[582,60087,60088,60090,60091,60093,60094,60096,60097,1118],{},[586,60089,463],{}," requires a ",[586,60092,729],{}," context, so it is only available in ",[586,60095,729],{}," descendant components' ",[586,60098,60099],{},"\u003Cscript setup>",[594,60101,60104],{"className":596,"code":60102,"highlights":60103,"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,60105,60106,60126,60151,60155,60182,60190,60194,60202,60220,60228,60236],{"__ignoreMap":544},[605,60107,60108,60110,60112,60114,60116,60118,60120,60122,60124],{"class":607,"line":545},[605,60109,611],{"class":610},[605,60111,615],{"class":614},[605,60113,619],{"class":618},[605,60115,622],{"class":618},[605,60117,625],{"class":610},[605,60119,628],{"class":610},[605,60121,632],{"class":631},[605,60123,628],{"class":610},[605,60125,637],{"class":610},[605,60127,60129,60131,60133,60136,60138,60141,60143,60145,60147,60149],{"class":60128,"line":546},[607,641],[605,60130,645],{"class":644},[605,60132,648],{"class":610},[605,60134,60135],{"class":651}," Torus",[605,60137,655],{"class":610},[605,60139,60140],{"class":651}," useIntersect",[605,60142,661],{"class":610},[605,60144,664],{"class":644},[605,60146,667],{"class":610},[605,60148,670],{"class":631},[605,60150,673],{"class":610},[605,60152,60153],{"class":607,"line":676},[605,60154,710],{"emptyLinePlaceholder":562},[605,60156,60158,60160,60162,60164,60166,60169,60171,60174,60176,60178,60180],{"class":60157,"line":697},[607,641],[605,60159,2689],{"class":618},[605,60161,648],{"class":610},[605,60163,5431],{"class":651},[605,60165,655],{"class":610},[605,60167,60168],{"class":651}," intersect",[605,60170,655],{"class":610},[605,60172,60173],{"class":651}," off ",[605,60175,5544],{"class":610},[605,60177,2766],{"class":610},[605,60179,60140],{"class":2800},[605,60181,2846],{"class":651},[605,60183,60184,60186,60188],{"class":607,"line":707},[605,60185,700],{"class":610},[605,60187,615],{"class":614},[605,60189,637],{"class":610},[605,60191,60192],{"class":607,"line":713},[605,60193,710],{"emptyLinePlaceholder":562},[605,60195,60196,60198,60200],{"class":607,"line":723},[605,60197,611],{"class":610},[605,60199,718],{"class":614},[605,60201,637],{"class":610},[605,60203,60204,60206,60208,60210,60212,60214,60216,60218],{"class":607,"line":746},[605,60205,726],{"class":610},[605,60207,269],{"class":614},[605,60209,5431],{"class":618},[605,60211,625],{"class":610},[605,60213,628],{"class":610},[605,60215,11627],{"class":631},[605,60217,628],{"class":610},[605,60219,637],{"class":610},[605,60221,60222,60224,60226],{"class":607,"line":758},[605,60223,749],{"class":610},[605,60225,849],{"class":614},[605,60227,755],{"class":610},[605,60229,60230,60232,60234],{"class":607,"line":768},[605,60231,877],{"class":610},[605,60233,269],{"class":614},[605,60235,637],{"class":610},[605,60237,60238,60240,60242],{"class":607,"line":773},[605,60239,700],{"class":610},[605,60241,718],{"class":614},[605,60243,637],{"class":610},[472,60245,59851],{"id":59850},[899,60247,60248,60258],{},[902,60249,60250],{},[905,60251,60252,60254,60256],{},[908,60253,3118],{"align":969},[908,60255,913],{},[908,60257,10957],{},[918,60259,60260],{},[905,60261,60262,60266,60269],{},[923,60263,60264],{"align":969},[1673,60265,7766],{},[923,60267,60268],{},"Optional callback function triggered when the observed object enters or leaves the screen.",[923,60270,60271],{},[586,60272,60273],{},"(isIntersected: boolean) => void",[472,60275,60277],{"id":60276},"return","Return",[899,60279,60280,60290],{},[902,60281,60282],{},[905,60283,60284,60286,60288],{},[908,60285,3118],{"align":969},[908,60287,913],{},[908,60289,10957],{},[918,60291,60292,60310,60325],{},[905,60293,60294,60298,60305],{},[923,60295,60296],{"align":969},[1673,60297,11627],{},[923,60299,60300,60301,60304],{},"Vue ",[586,60302,60303],{},"ShallowRef"," to pass to the object to be observed.",[923,60306,60307],{},[586,60308,60309],{},"ShallowRef\u003CObject3D>",[905,60311,60312,60317,60320],{},[923,60313,60314],{"align":969},[1673,60315,60316],{},"intersects",[923,60318,60319],{},"Updates when the observed object's intersect status changes.",[923,60321,60322],{},[586,60323,60324],{},"ShallowRef\u003Cboolean>",[905,60326,60327,60332,60341],{},[923,60328,60329],{"align":969},[1673,60330,60331],{},"off",[923,60333,60334,60335,60337,60338,60340],{},"Calling this function stops ",[586,60336,463],{}," until ",[586,60339,11627],{}," changes.",[923,60342,60343],{},[586,60344,16226],{},[1299,60346,38372],{},{"title":544,"searchDepth":545,"depth":546,"links":60348},[60349,60350,60351],{"id":592,"depth":546,"text":15},{"id":59850,"depth":546,"text":59851},{"id":60276,"depth":546,"text":60277},"Detect when objects enter or leave the screen.",{},{"title":463,"description":60352},"QAcMQnGWf_fxqwXEeZxQJtNfPCiyyVyBtXuwXAh1Cg4",1774953652811]