[{"data":1,"prerenderedAt":63581},["ShallowReactive",2],{"navigation":3,"/api":478,"/api-surround":577,"abstraction-list":582,"controls-list":11216,"loaders-list":14884,"materials-list":23587,"shapes-list":27311,"debug-list":33199,"light-list":35859,"staging-list":40357,"objects-list":47627,"misc-list":59781},[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,84,114,156,194,288,314,348,398,444],{"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,80],{"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},"Decal","/api/abstractions/decal","2.api/1.abstractions/decal",{"title":53,"path":54,"stem":55},"Edges","/api/abstractions/edges","2.api/1.abstractions/edges",{"title":57,"path":58,"stem":59},"Fit","/api/abstractions/fit","2.api/1.abstractions/fit",{"title":61,"path":62,"stem":63},"Levioso (Float)","/api/abstractions/levioso","2.api/1.abstractions/levioso",{"title":65,"path":66,"stem":67},"Mask","/api/abstractions/mask","2.api/1.abstractions/mask",{"title":69,"path":70,"stem":71},"Outline","/api/abstractions/outline","2.api/1.abstractions/outline",{"title":73,"path":74,"stem":75},"Sampler","/api/abstractions/sampler","2.api/1.abstractions/sampler",{"title":77,"path":78,"stem":79},"ScreenSizer","/api/abstractions/screen-sizer","2.api/1.abstractions/screen-sizer",{"title":81,"path":82,"stem":83},"ScreenSpace","/api/abstractions/screen-space","2.api/1.abstractions/screen-space",{"title":85,"path":86,"stem":87,"children":88},"Controls","/api/controls","2.api/2.controls/index",[89,90,94,98,102,106,110],{"title":85,"path":86,"stem":87},{"title":91,"path":92,"stem":93},"Camera Controls","/api/controls/camera-controls","2.api/2.controls/camera-controls",{"title":95,"path":96,"stem":97},"Keyboard Controls","/api/controls/keyboard-controls","2.api/2.controls/keyboard-controls",{"title":99,"path":100,"stem":101},"Map Controls","/api/controls/map-controls","2.api/2.controls/map-controls",{"title":103,"path":104,"stem":105},"Orbit Controls","/api/controls/orbit-controls","2.api/2.controls/orbit-controls",{"title":107,"path":108,"stem":109},"PointerLock Controls","/api/controls/pointer-lock-controls","2.api/2.controls/pointer-lock-controls",{"title":111,"path":112,"stem":113},"Transform Controls","/api/controls/transform-controls","2.api/2.controls/transform-controls",{"title":115,"path":116,"stem":117,"children":118},"Loaders","/api/loaders","2.api/3.loaders/index",[119,120,124,128,132,136,140,144,148,152],{"title":115,"path":116,"stem":117},{"title":121,"path":122,"stem":123},"useGLTF","/api/loaders/use-gltf","2.api/3.loaders/1.use-gltf",{"title":125,"path":126,"stem":127},"GLTFModel","/api/loaders/gltf-model","2.api/3.loaders/2.gltf-model",{"title":129,"path":130,"stem":131},"useFBX","/api/loaders/use-fbx","2.api/3.loaders/3.use-fbx",{"title":133,"path":134,"stem":135},"FBXModel","/api/loaders/fbx-model","2.api/3.loaders/4.fbx-model",{"title":137,"path":138,"stem":139},"useTexture","/api/loaders/use-texture","2.api/3.loaders/5.use-texture",{"title":141,"path":142,"stem":143},"useTextures","/api/loaders/use-textures","2.api/3.loaders/6.use-textures",{"title":145,"path":146,"stem":147},"useSVG","/api/loaders/use-svg","2.api/3.loaders/7.use-svg",{"title":149,"path":150,"stem":151},"useProgress","/api/loaders/use-progress","2.api/3.loaders/use-progress",{"title":153,"path":154,"stem":155},"useVideoTexture","/api/loaders/use-video-texture","2.api/3.loaders/use-video-texture",{"title":157,"path":158,"stem":159,"children":160},"Materials","/api/materials","2.api/4.materials/index",[161,162,166,170,174,178,182,186,190],{"title":157,"path":158,"stem":159},{"title":163,"path":164,"stem":165},"Custom Shader Material","/api/materials/custom-shader-material","2.api/4.materials/custom-shader-material",{"title":167,"path":168,"stem":169},"Mesh Glass Material","/api/materials/glass-material","2.api/4.materials/glass-material",{"title":171,"path":172,"stem":173},"Holographic Material","/api/materials/holographic-material","2.api/4.materials/holographic-material",{"title":175,"path":176,"stem":177},"Mesh Discard Material","/api/materials/mesh-discard-material","2.api/4.materials/mesh-discard-material",{"title":179,"path":180,"stem":181},"Mesh Reflection Material","/api/materials/mesh-reflection-material","2.api/4.materials/mesh-reflection-material",{"title":183,"path":184,"stem":185},"Mesh Transmission Material","/api/materials/mesh-transmission-material","2.api/4.materials/mesh-transmission-material",{"title":187,"path":188,"stem":189},"Point Material","/api/materials/point-material","2.api/4.materials/point-material",{"title":191,"path":192,"stem":193},"Wobble Material","/api/materials/wobble-material","2.api/4.materials/wobble-material",{"title":195,"path":196,"stem":197,"children":198},"Shapes","/api/shapes","2.api/5.shapes/index",[199,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284],{"title":195,"path":196,"stem":197},{"title":201,"path":202,"stem":203},"Box","/api/shapes/box","2.api/5.shapes/box",{"title":205,"path":206,"stem":207},"CatmullRomCurve3","/api/shapes/catmullromcurve3","2.api/5.shapes/catmullromcurve3",{"title":209,"path":210,"stem":211},"Circle","/api/shapes/circle","2.api/5.shapes/circle",{"title":213,"path":214,"stem":215},"Cone","/api/shapes/cone","2.api/5.shapes/cone",{"title":217,"path":218,"stem":219},"Cubic Bezier Line","/api/shapes/cubic-bezier-line","2.api/5.shapes/cubic-bezier-line",{"title":221,"path":222,"stem":223},"Cylinder","/api/shapes/cylinder","2.api/5.shapes/cylinder",{"title":225,"path":226,"stem":227},"Dodecahedron","/api/shapes/dodecahedron","2.api/5.shapes/dodecahedron",{"title":229,"path":230,"stem":231},"Grid","/api/shapes/grid","2.api/5.shapes/grid",{"title":233,"path":234,"stem":235},"Icosahedron","/api/shapes/icosahedron","2.api/5.shapes/icosahedron",{"title":237,"path":238,"stem":239},"Line2","/api/shapes/line2","2.api/5.shapes/line2",{"title":241,"path":242,"stem":243},"Octahedron","/api/shapes/octahedron","2.api/5.shapes/octahedron",{"title":245,"path":246,"stem":247},"Plane","/api/shapes/plane","2.api/5.shapes/plane",{"title":249,"path":250,"stem":251},"Quadratic Bezier Line","/api/shapes/quadratic-bezier-line","2.api/5.shapes/quadratic-bezier-line",{"title":253,"path":254,"stem":255},"Ring","/api/shapes/ring","2.api/5.shapes/ring",{"title":257,"path":258,"stem":259},"Rounded Box","/api/shapes/rounded-box","2.api/5.shapes/rounded-box",{"title":261,"path":262,"stem":263},"Screen Quad","/api/shapes/screen-quad","2.api/5.shapes/screen-quad",{"title":265,"path":266,"stem":267},"Sphere","/api/shapes/sphere","2.api/5.shapes/sphere",{"title":269,"path":270,"stem":271},"Superformula","/api/shapes/superformula","2.api/5.shapes/superformula",{"title":273,"path":274,"stem":275},"Tetrahedron","/api/shapes/tetrahedron","2.api/5.shapes/tetrahedron",{"title":277,"path":278,"stem":279},"Torus","/api/shapes/torus","2.api/5.shapes/torus",{"title":281,"path":282,"stem":283},"Torus Knot","/api/shapes/torus-knot","2.api/5.shapes/torus-knot",{"title":285,"path":286,"stem":287},"Tube","/api/shapes/tube","2.api/5.shapes/tube",{"title":289,"path":290,"stem":291,"children":292},"Debug/Performance","/api/debug-performance","2.api/6.debug-performance/index",[293,294,298,302,306,310],{"title":289,"path":290,"stem":291},{"title":295,"path":296,"stem":297},"Helper","/api/debug-performance/helper","2.api/6.debug-performance/helper",{"title":299,"path":300,"stem":301},"LOD","/api/debug-performance/lod","2.api/6.debug-performance/lod",{"title":303,"path":304,"stem":305},"Stats","/api/debug-performance/stats","2.api/6.debug-performance/stats",{"title":307,"path":308,"stem":309},"StatsGl","/api/debug-performance/stats-gl","2.api/6.debug-performance/stats-gl",{"title":311,"path":312,"stem":313},"useBVH","/api/debug-performance/use-bvh","2.api/6.debug-performance/use-bvh",{"title":315,"path":316,"stem":317,"children":318},"Light/Shadow","/api/light-shadow","2.api/7.light-shadow/index",[319,320,324,328,332,336,340,344],{"title":315,"path":316,"stem":317},{"title":321,"path":322,"stem":323},"Accumulative Shadows","/api/light-shadow/accumulative-shadows","2.api/7.light-shadow/accumulative-shadows",{"title":325,"path":326,"stem":327},"Bake Shadows","/api/light-shadow/bake-shadows","2.api/7.light-shadow/bake-shadows",{"title":329,"path":330,"stem":331},"Circle Shadow","/api/light-shadow/circle-shadow","2.api/7.light-shadow/circle-shadow",{"title":333,"path":334,"stem":335},"Contact Shadows","/api/light-shadow/contact-shadows","2.api/7.light-shadow/contact-shadows",{"title":337,"path":338,"stem":339},"Lensflare","/api/light-shadow/lensflare","2.api/7.light-shadow/lensflare",{"title":341,"path":342,"stem":343},"Randomized Lights","/api/light-shadow/randomized-lights","2.api/7.light-shadow/randomized-lights",{"title":345,"path":346,"stem":347},"Soft Shadows","/api/light-shadow/soft-shadows","2.api/7.light-shadow/soft-shadows",{"title":349,"path":350,"stem":351,"children":352},"Staging","/api/staging","2.api/8.staging/index",[353,354,358,362,366,370,374,378,382,386,390,394],{"title":349,"path":350,"stem":351},{"title":355,"path":356,"stem":357},"Environment","/api/staging/environment","2.api/8.staging/1.environment",{"title":359,"path":360,"stem":361},"useEnvironment","/api/staging/use-environment","2.api/8.staging/2.use-environment",{"title":363,"path":364,"stem":365},"Lightformer","/api/staging/lightformer","2.api/8.staging/3.lightformer",{"title":367,"path":368,"stem":369},"Backdrop","/api/staging/backdrop","2.api/8.staging/backdrop",{"title":371,"path":372,"stem":373},"Ocean","/api/staging/ocean","2.api/8.staging/ocean",{"title":375,"path":376,"stem":377},"Precipitation","/api/staging/precipitation","2.api/8.staging/precipitation",{"title":379,"path":380,"stem":381},"Sky","/api/staging/sky","2.api/8.staging/sky",{"title":383,"path":384,"stem":385},"Smoke","/api/staging/smoke","2.api/8.staging/smoke",{"title":387,"path":388,"stem":389},"Sparkles","/api/staging/sparkles","2.api/8.staging/sparkles",{"title":391,"path":392,"stem":393},"Stage","/api/staging/stage","2.api/8.staging/stage",{"title":395,"path":396,"stem":397},"Stars","/api/staging/stars","2.api/8.staging/stars",{"title":399,"path":400,"stem":401,"children":402},"Objects","/api/objects","2.api/9.objects/index",[403,404,408,412,416,420,424,428,432,436,440],{"title":399,"path":400,"stem":401},{"title":405,"path":406,"stem":407},"AnimatedSprite","/api/objects/animated-sprite","2.api/9.objects/animated-sprite",{"title":409,"path":410,"stem":411},"CubeCamera","/api/objects/cube-camera","2.api/9.objects/cube-camera",{"title":413,"path":414,"stem":415},"Fbo","/api/objects/fbo","2.api/9.objects/fbo",{"title":417,"path":418,"stem":419},"GradientTexture","/api/objects/gradient-texture","2.api/9.objects/gradient-texture",{"title":421,"path":422,"stem":423},"HTML","/api/objects/html","2.api/9.objects/html",{"title":425,"path":426,"stem":427},"Image","/api/objects/image","2.api/9.objects/image",{"title":429,"path":430,"stem":431},"MarchingCubes","/api/objects/marching-cubes","2.api/9.objects/marching-cubes",{"title":433,"path":434,"stem":435},"Reflector","/api/objects/reflector","2.api/9.objects/reflector",{"title":437,"path":438,"stem":439},"Text","/api/objects/text","2.api/9.objects/text",{"title":441,"path":442,"stem":443},"Text3D","/api/objects/text-3d","2.api/9.objects/text-3d",{"title":445,"path":446,"stem":447,"children":448},"Miscellaneous","/api/miscellaneous","2.api/miscellaneous/index",[449,450,454,458,462,466,470,474],{"title":445,"path":446,"stem":447},{"title":451,"path":452,"stem":453},"Bounds","/api/miscellaneous/bounds","2.api/miscellaneous/bounds",{"title":455,"path":456,"stem":457},"GlobalAudio","/api/miscellaneous/global-audio","2.api/miscellaneous/global-audio",{"title":459,"path":460,"stem":461},"MouseParallax","/api/miscellaneous/mouse-parallax","2.api/miscellaneous/mouse-parallax",{"title":463,"path":464,"stem":465},"PositionalAudio","/api/miscellaneous/positional-audio","2.api/miscellaneous/positional-audio",{"title":467,"path":468,"stem":469},"useAnimations","/api/miscellaneous/use-animations","2.api/miscellaneous/use-animations",{"title":471,"path":472,"stem":473},"useGLTFExporter","/api/miscellaneous/use-gltf-exporter","2.api/miscellaneous/use-gltf-exporter",{"title":475,"path":476,"stem":477},"useIntersect","/api/miscellaneous/use-intersect","2.api/miscellaneous/use-intersect",{"id":479,"title":28,"body":480,"description":570,"extension":571,"links":572,"meta":573,"navigation":574,"path":24,"seo":575,"stem":29,"__hash__":576},"docs/2.api/index.md",{"type":481,"value":482,"toc":555},"minimark",[483,488,492,496,499,503,506,510,513,517,520,524,527,531,534,538,541,545,548,552],[484,485,487],"h2",{"id":486},"abstraction","📦 Abstraction",[489,490],"api-list",{"list-name":491,"path":32},"abstraction-list",[484,493,495],{"id":494},"controls","🎮 Controls",[489,497],{"list-name":498,"path":86},"controls-list",[484,500,502],{"id":501},"loaders","📂 Loaders",[489,504],{"list-name":505,"path":116},"loaders-list",[484,507,509],{"id":508},"materials","🎨 Materials",[489,511],{"list-name":512,"path":158},"materials-list",[484,514,516],{"id":515},"shapes","🔷 Shapes",[489,518],{"list-name":519,"path":196},"shapes-list",[484,521,523],{"id":522},"debug-performance","📊 Debug & Performance",[489,525],{"list-name":526,"path":290},"debug-list",[484,528,530],{"id":529},"light-shadow","💡 Light & Shadow",[489,532],{"list-name":533,"path":316},"light-list",[484,535,537],{"id":536},"staging","🎭 Staging",[489,539],{"list-name":540,"path":350},"staging-list",[484,542,544],{"id":543},"objects","🎬 Objects",[489,546],{"list-name":547,"path":400},"objects-list",[484,549,551],{"id":550},"️-miscellaneous","🛠️ Miscellaneous",[489,553],{"list-name":554,"path":446},"misc-list",{"title":556,"searchDepth":557,"depth":558,"links":559},"",1,2,[560,561,562,563,564,565,566,567,568,569],{"id":486,"depth":558,"text":487},{"id":494,"depth":558,"text":495},{"id":501,"depth":558,"text":502},{"id":508,"depth":558,"text":509},{"id":515,"depth":558,"text":516},{"id":522,"depth":558,"text":523},{"id":529,"depth":558,"text":530},{"id":536,"depth":558,"text":537},{"id":543,"depth":558,"text":544},{"id":550,"depth":558,"text":551},"Explore the complete API reference","md",null,{},true,{"title":28,"description":570},"sw9kHYPeTK3xIXtV7tt103OdjppzE9OpuYL8etJhS4o",[578,580],{"title":19,"path":20,"stem":21,"description":579,"children":-1},"Migration guide for cientos",{"title":31,"path":32,"stem":33,"description":581,"children":-1},"UI components reference",[583,1319,1633,2182,7284,7578,8203,8597,9247,9724,10527,10840],{"id":584,"title":37,"body":585,"description":1315,"extension":571,"links":572,"meta":1316,"navigation":574,"path":38,"seo":1317,"stem":39,"__hash__":1318},"docs/2.api/1.abstractions/align.md",{"type":481,"value":586,"toc":1310},[587,593,602,605,899,903,906,1160,1164,1306],[588,589,590],"scene-controls-wrapper",{},[591,592],"abstractions-align",{},[594,595,596,597,601],"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 ",[598,599,600],"code",{},"cacheKey"," is set.",[484,603,15],{"id":604},"usage",[606,607,614],"pre",{"className":608,"code":609,"highlights":610,"language":613,"meta":556,"style":556},"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",[558,611,612],13,18,"vue",[598,615,616,650,686,707,717,723,733,756,768,778,783,805,810,828,839,850,860,870,880,890],{"__ignoreMap":556},[617,618,620,624,628,632,635,638,641,645,647],"span",{"class":619,"line":557},"line",[617,621,623],{"class":622},"sMK4o","\u003C",[617,625,627],{"class":626},"swJcz","script",[617,629,631],{"class":630},"spNyl"," setup",[617,633,634],{"class":630}," lang",[617,636,637],{"class":622},"=",[617,639,640],{"class":622},"\"",[617,642,644],{"class":643},"sfazB","ts",[617,646,640],{"class":622},[617,648,649],{"class":622},">\n",[617,651,654,658,661,665,668,671,674,677,680,683],{"class":652,"line":558},[619,653],"highlight",[617,655,657],{"class":656},"s7zQu","import",[617,659,660],{"class":622}," {",[617,662,664],{"class":663},"sTEyZ"," Align",[617,666,667],{"class":622},",",[617,669,670],{"class":663}," OrbitControls",[617,672,673],{"class":622}," }",[617,675,676],{"class":656}," from",[617,678,679],{"class":622}," '",[617,681,682],{"class":643},"@tresjs/cientos",[617,684,685],{"class":622},"'\n",[617,687,689,691,693,696,698,700,702,705],{"class":619,"line":688},3,[617,690,657],{"class":656},[617,692,660],{"class":622},[617,694,695],{"class":663}," TresCanvas",[617,697,673],{"class":622},[617,699,676],{"class":656},[617,701,679],{"class":622},[617,703,704],{"class":643},"@tresjs/core",[617,706,685],{"class":622},[617,708,710,713,715],{"class":619,"line":709},4,[617,711,712],{"class":622},"\u003C/",[617,714,627],{"class":626},[617,716,649],{"class":622},[617,718,720],{"class":619,"line":719},5,[617,721,722],{"emptyLinePlaceholder":574},"\n",[617,724,726,728,731],{"class":619,"line":725},6,[617,727,623],{"class":622},[617,729,730],{"class":626},"template",[617,732,649],{"class":622},[617,734,736,739,742,745,747,749,752,754],{"class":619,"line":735},7,[617,737,738],{"class":622}," \u003C",[617,740,741],{"class":626},"TresCanvas",[617,743,744],{"class":630}," clear-color",[617,746,637],{"class":622},[617,748,640],{"class":622},[617,750,751],{"class":643},"#222",[617,753,640],{"class":622},[617,755,649],{"class":622},[617,757,759,762,765],{"class":619,"line":758},8,[617,760,761],{"class":622}," \u003C",[617,763,764],{"class":626},"TresPerspectiveCamera",[617,766,767],{"class":622}," />\n",[617,769,771,773,776],{"class":619,"line":770},9,[617,772,761],{"class":622},[617,774,775],{"class":626},"OrbitControls",[617,777,767],{"class":622},[617,779,781],{"class":619,"line":780},10,[617,782,722],{"emptyLinePlaceholder":574},[617,784,786,788,791,794,796,798,801,803],{"class":619,"line":785},11,[617,787,761],{"class":622},[617,789,790],{"class":626},"TresAxesHelper",[617,792,793],{"class":630}," :scale",[617,795,637],{"class":622},[617,797,640],{"class":622},[617,799,800],{"class":643},"2",[617,802,640],{"class":622},[617,804,767],{"class":622},[617,806,808],{"class":619,"line":807},12,[617,809,722],{"emptyLinePlaceholder":574},[617,811,813,815,817,820,823,826],{"class":812,"line":611},[619,653],[617,814,761],{"class":622},[617,816,37],{"class":626},[617,818,819],{"class":630}," top",[617,821,822],{"class":630}," right",[617,824,825],{"class":630}," back",[617,827,649],{"class":622},[617,829,831,834,837],{"class":619,"line":830},14,[617,832,833],{"class":622}," \u003C",[617,835,836],{"class":626},"TresMesh",[617,838,649],{"class":622},[617,840,842,845,848],{"class":619,"line":841},15,[617,843,844],{"class":622}," \u003C",[617,846,847],{"class":626},"TresBoxGeometry",[617,849,767],{"class":622},[617,851,853,855,858],{"class":619,"line":852},16,[617,854,844],{"class":622},[617,856,857],{"class":626},"TresMeshNormalMaterial",[617,859,767],{"class":622},[617,861,863,866,868],{"class":619,"line":862},17,[617,864,865],{"class":622}," \u003C/",[617,867,836],{"class":626},[617,869,649],{"class":622},[617,871,873,876,878],{"class":872,"line":612},[619,653],[617,874,875],{"class":622}," \u003C/",[617,877,37],{"class":626},[617,879,649],{"class":622},[617,881,883,886,888],{"class":619,"line":882},19,[617,884,885],{"class":622}," \u003C/",[617,887,741],{"class":626},[617,889,649],{"class":622},[617,891,893,895,897],{"class":619,"line":892},20,[617,894,712],{"class":622},[617,896,730],{"class":626},[617,898,649],{"class":622},[484,900,902],{"id":901},"props","Props",[594,904,905],{},"All props are optional.",[907,908,909,925],"table",{},[910,911,912],"thead",{},[913,914,915,919,922],"tr",{},[916,917,918],"th",{},"Prop",[916,920,921],{},"Description",[916,923,924],{},"Default",[926,927,928,952,971,990,1008,1027,1045,1061,1077,1093,1109,1131,1143],"tbody",{},[913,929,930,936,947],{},[931,932,933],"td",{},[598,934,935],{},"top",[931,937,938,939,942,943,946],{},"If ",[598,940,941],{},"true",", aligns bounding box bottom to ",[598,944,945],{},"0"," on the y-axis",[931,948,949],{},[598,950,951],{},"false",[913,953,954,959,967],{},[931,955,956],{},[598,957,958],{},"bottom",[931,960,938,961,963,964,966],{},[598,962,941],{},", aligns bounding box top to ",[598,965,945],{}," on the y-axis.",[931,968,969],{},[598,970,951],{},[913,972,973,978,986],{},[931,974,975],{},[598,976,977],{},"left",[931,979,938,980,982,983,985],{},[598,981,941],{},", aligns bounding box right to ",[598,984,945],{}," on the x-axis.",[931,987,988],{},[598,989,951],{},[913,991,992,997,1004],{},[931,993,994],{},[598,995,996],{},"right",[931,998,938,999,1001,1002,985],{},[598,1000,941],{},", aligns bounding box left to ",[598,1003,945],{},[931,1005,1006],{},[598,1007,951],{},[913,1009,1010,1015,1023],{},[931,1011,1012],{},[598,1013,1014],{},"front",[931,1016,938,1017,1019,1020,1022],{},[598,1018,941],{},", aligns bounding box back to ",[598,1021,945],{}," on the z-axis.",[931,1024,1025],{},[598,1026,951],{},[913,1028,1029,1034,1041],{},[931,1030,1031],{},[598,1032,1033],{},"back",[931,1035,938,1036,1038,1039,1022],{},[598,1037,941],{},", aligns bounding box front to ",[598,1040,945],{},[931,1042,1043],{},[598,1044,951],{},[913,1046,1047,1052,1057],{},[931,1048,1049],{},[598,1050,1051],{},"disable",[931,1053,938,1054,1056],{},[598,1055,941],{},", disables alignment on all axes.",[931,1058,1059],{},[598,1060,951],{},[913,1062,1063,1068,1073],{},[931,1064,1065],{},[598,1066,1067],{},"disableX",[931,1069,938,1070,1072],{},[598,1071,941],{},", disables alignment on the x-axis.",[931,1074,1075],{},[598,1076,951],{},[913,1078,1079,1084,1089],{},[931,1080,1081],{},[598,1082,1083],{},"disableY",[931,1085,938,1086,1088],{},[598,1087,941],{},", disables alignment on the y-axis.",[931,1090,1091],{},[598,1092,951],{},[913,1094,1095,1100,1105],{},[931,1096,1097],{},[598,1098,1099],{},"disableZ",[931,1101,938,1102,1104],{},[598,1103,941],{},", disables alignment on the z-axis.",[931,1106,1107],{},[598,1108,951],{},[913,1110,1111,1116,1127],{},[931,1112,1113],{},[598,1114,1115],{},"precise",[931,1117,1118,1119,1126],{},"See ",[1120,1121,1125],"a",{"href":1122,"rel":1123},"https://threejs.org/docs/index.html?q=box3#api/en/math/Box3.setFromObject",[1124],"nofollow","Box3.setFromObject",".",[931,1128,1129],{},[598,1130,941],{},[913,1132,1133,1138,1141],{},[931,1134,1135],{},[598,1136,1137],{},"onAlign",[931,1139,1140],{},"Callback that fires when updating, after measurement.",[931,1142],{},[913,1144,1145,1149,1155],{},[931,1146,1147],{},[598,1148,600],{},[931,1150,1151,1152,1154],{},"If set, component will only update when ",[598,1153,600],{},"'s value changes. If unset, component will update every frame.",[931,1156,1157],{},[598,1158,1159],{},"undefined",[484,1161,1163],{"id":1162},"aligncallbackoptions","AlignCallbackOptions",[606,1165,1168],{"className":1166,"code":1167,"language":644,"meta":556,"style":556},"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",[598,1169,1170,1185,1191,1202,1207,1216,1226,1235,1244,1254,1264,1274,1283,1292,1301],{"__ignoreMap":556},[617,1171,1172,1175,1178,1182],{"class":619,"line":557},[617,1173,1174],{"class":656},"export",[617,1176,1177],{"class":630}," interface",[617,1179,1181],{"class":1180},"sBMFI"," AlignCallbackOptions",[617,1183,1184],{"class":622}," {\n",[617,1186,1187],{"class":619,"line":558},[617,1188,1190],{"class":1189},"sHwdD"," /** The next parent above \u003CAlign /> */\n",[617,1192,1193,1196,1199],{"class":619,"line":688},[617,1194,1195],{"class":626}," parent",[617,1197,1198],{"class":622},":",[617,1200,1201],{"class":1180}," Object3D\n",[617,1203,1204],{"class":619,"line":709},[617,1205,1206],{"class":1189}," /** The outmost container group of the \u003CAlign/> component */\n",[617,1208,1209,1212,1214],{"class":619,"line":719},[617,1210,1211],{"class":626}," container",[617,1213,1198],{"class":622},[617,1215,1201],{"class":1180},[617,1217,1218,1221,1223],{"class":619,"line":725},[617,1219,1220],{"class":626}," width",[617,1222,1198],{"class":622},[617,1224,1225],{"class":1180}," number\n",[617,1227,1228,1231,1233],{"class":619,"line":735},[617,1229,1230],{"class":626}," height",[617,1232,1198],{"class":622},[617,1234,1225],{"class":1180},[617,1236,1237,1240,1242],{"class":619,"line":758},[617,1238,1239],{"class":626}," depth",[617,1241,1198],{"class":622},[617,1243,1225],{"class":1180},[617,1245,1246,1249,1251],{"class":619,"line":770},[617,1247,1248],{"class":626}," boundingBox",[617,1250,1198],{"class":622},[617,1252,1253],{"class":1180}," Box3\n",[617,1255,1256,1259,1261],{"class":619,"line":780},[617,1257,1258],{"class":626}," boundingSphere",[617,1260,1198],{"class":622},[617,1262,1263],{"class":1180}," Sphere\n",[617,1265,1266,1269,1271],{"class":619,"line":785},[617,1267,1268],{"class":626}," center",[617,1270,1198],{"class":622},[617,1272,1273],{"class":1180}," Vector3\n",[617,1275,1276,1279,1281],{"class":619,"line":807},[617,1277,1278],{"class":626}," verticalAlignment",[617,1280,1198],{"class":622},[617,1282,1225],{"class":1180},[617,1284,1285,1288,1290],{"class":619,"line":611},[617,1286,1287],{"class":626}," horizontalAlignment",[617,1289,1198],{"class":622},[617,1291,1225],{"class":1180},[617,1293,1294,1297,1299],{"class":619,"line":830},[617,1295,1296],{"class":626}," depthAlignment",[617,1298,1198],{"class":622},[617,1300,1225],{"class":1180},[617,1302,1303],{"class":619,"line":841},[617,1304,1305],{"class":622},"}\n",[1307,1308,1309],"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 .light .shiki span {color: var(--shiki-light);background: var(--shiki-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":556,"searchDepth":557,"depth":558,"links":1311},[1312,1313,1314],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},{"id":1162,"depth":558,"text":1163},"Calculate and align children within their parent using bounding boxes.",{},{"title":37,"description":1315},"2TNilwT1BiWwam7y0leE_VBx46wcrMjjhvIXPvGWsNg",{"id":1320,"title":41,"body":1321,"description":1629,"extension":571,"links":572,"meta":1630,"navigation":574,"path":42,"seo":1631,"stem":43,"__hash__":1632},"docs/2.api/1.abstractions/billboard.md",{"type":481,"value":1322,"toc":1625},[1323,1328,1335,1337,1546,1548,1622],[588,1324,1325],{},[1326,1327],"abstractions-billboard",{},[594,1329,1330,1331,1334],{},"Adds a ",[598,1332,1333],{},"THREE.Group"," that always faces the camera.",[484,1336,15],{"id":604},[606,1338,1341],{"className":608,"code":1339,"highlights":1340,"language":613,"meta":556,"style":556},"\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",[558,780,830],[598,1342,1343,1363,1392,1410,1418,1422,1430,1449,1457,1477,1486,1505,1513,1521,1530,1538],{"__ignoreMap":556},[617,1344,1345,1347,1349,1351,1353,1355,1357,1359,1361],{"class":619,"line":557},[617,1346,623],{"class":622},[617,1348,627],{"class":626},[617,1350,631],{"class":630},[617,1352,634],{"class":630},[617,1354,637],{"class":622},[617,1356,640],{"class":622},[617,1358,644],{"class":643},[617,1360,640],{"class":622},[617,1362,649],{"class":622},[617,1364,1366,1368,1370,1373,1375,1378,1380,1382,1384,1386,1388,1390],{"class":1365,"line":558},[619,653],[617,1367,657],{"class":656},[617,1369,660],{"class":622},[617,1371,1372],{"class":663}," Billboard",[617,1374,667],{"class":622},[617,1376,1377],{"class":663}," Box",[617,1379,667],{"class":622},[617,1381,670],{"class":663},[617,1383,673],{"class":622},[617,1385,676],{"class":656},[617,1387,679],{"class":622},[617,1389,682],{"class":643},[617,1391,685],{"class":622},[617,1393,1394,1396,1398,1400,1402,1404,1406,1408],{"class":619,"line":688},[617,1395,657],{"class":656},[617,1397,660],{"class":622},[617,1399,695],{"class":663},[617,1401,673],{"class":622},[617,1403,676],{"class":656},[617,1405,679],{"class":622},[617,1407,704],{"class":643},[617,1409,685],{"class":622},[617,1411,1412,1414,1416],{"class":619,"line":709},[617,1413,712],{"class":622},[617,1415,627],{"class":626},[617,1417,649],{"class":622},[617,1419,1420],{"class":619,"line":719},[617,1421,722],{"emptyLinePlaceholder":574},[617,1423,1424,1426,1428],{"class":619,"line":725},[617,1425,623],{"class":622},[617,1427,730],{"class":626},[617,1429,649],{"class":622},[617,1431,1432,1434,1436,1438,1440,1442,1445,1447],{"class":619,"line":735},[617,1433,738],{"class":622},[617,1435,741],{"class":626},[617,1437,744],{"class":630},[617,1439,637],{"class":622},[617,1441,640],{"class":622},[617,1443,1444],{"class":643},"#333333",[617,1446,640],{"class":622},[617,1448,649],{"class":622},[617,1450,1451,1453,1455],{"class":619,"line":758},[617,1452,761],{"class":622},[617,1454,775],{"class":626},[617,1456,767],{"class":622},[617,1458,1459,1461,1463,1466,1468,1470,1473,1475],{"class":619,"line":770},[617,1460,761],{"class":622},[617,1462,764],{"class":626},[617,1464,1465],{"class":630}," :position",[617,1467,637],{"class":622},[617,1469,640],{"class":622},[617,1471,1472],{"class":643},"[0, 0, 10]",[617,1474,640],{"class":622},[617,1476,767],{"class":622},[617,1478,1480,1482,1484],{"class":1479,"line":780},[619,653],[617,1481,761],{"class":622},[617,1483,41],{"class":626},[617,1485,649],{"class":622},[617,1487,1488,1490,1492,1494,1496,1498,1501,1503],{"class":619,"line":785},[617,1489,833],{"class":622},[617,1491,201],{"class":626},[617,1493,793],{"class":630},[617,1495,637],{"class":622},[617,1497,640],{"class":622},[617,1499,1500],{"class":643},"[0.5, 0.5, 0.001]",[617,1502,640],{"class":622},[617,1504,649],{"class":622},[617,1506,1507,1509,1511],{"class":619,"line":807},[617,1508,844],{"class":622},[617,1510,857],{"class":626},[617,1512,767],{"class":622},[617,1514,1515,1517,1519],{"class":619,"line":611},[617,1516,865],{"class":622},[617,1518,201],{"class":626},[617,1520,649],{"class":622},[617,1522,1524,1526,1528],{"class":1523,"line":830},[619,653],[617,1525,875],{"class":622},[617,1527,41],{"class":626},[617,1529,649],{"class":622},[617,1531,1532,1534,1536],{"class":619,"line":841},[617,1533,885],{"class":622},[617,1535,741],{"class":626},[617,1537,649],{"class":622},[617,1539,1540,1542,1544],{"class":619,"line":852},[617,1541,712],{"class":622},[617,1543,730],{"class":626},[617,1545,649],{"class":622},[484,1547,902],{"id":901},[907,1549,1550,1560],{},[910,1551,1552],{},[913,1553,1554,1556,1558],{},[916,1555,918],{"align":977},[916,1557,921],{"align":977},[916,1559,924],{},[926,1561,1562,1580,1594,1608],{},[913,1563,1564,1569,1576],{},[931,1565,1566],{"align":977},[598,1567,1568],{},"autoUpdate",[931,1570,1571,1572,1575],{"align":977},"Whether the ",[598,1573,1574],{},"\u003CBillboard />"," should face the camera automatically on every frame.",[931,1577,1578],{},[598,1579,941],{},[913,1581,1582,1587,1590],{},[931,1583,1584],{"align":977},[598,1585,1586],{},"lockX",[931,1588,1589],{"align":977},"Whether to lock the x-axis.",[931,1591,1592],{},[598,1593,951],{},[913,1595,1596,1601,1604],{},[931,1597,1598],{"align":977},[598,1599,1600],{},"lockY",[931,1602,1603],{"align":977},"Whether to lock the y-axis.",[931,1605,1606],{},[598,1607,951],{},[913,1609,1610,1615,1618],{},[931,1611,1612],{"align":977},[598,1613,1614],{},"lockZ",[931,1616,1617],{"align":977},"Whether to lock the z-axis.",[931,1619,1620],{},[598,1621,951],{},[1307,1623,1624],{},"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":556,"searchDepth":557,"depth":558,"links":1626},[1627,1628],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},"Make objects always face the camera automatically.",{},{"title":41,"description":1629},"wCDOC5MhR7Q22tA0BbCcbJXpmTRTkGj75EHC3nFIzjA",{"id":1634,"title":45,"body":1635,"description":2178,"extension":571,"links":572,"meta":2179,"navigation":574,"path":46,"seo":2180,"stem":47,"__hash__":2181},"docs/2.api/1.abstractions/camera-shake.md",{"type":481,"value":1636,"toc":2174},[1637,1642,1696,1698,1984,2023,2025,2172],[588,1638,1639],{},[1640,1641],"abstractions-camera-shake",{},[594,1643,1644,1647,1648,1652,1653,1657,1658,1661,1662,1652,1665,1668,1669,1672,1673,1652,1676,1652,1679,1682,1683,1686,1687,1126],{},[598,1645,1646],{},"\u003CCameraShake />"," is a component that adds ",[1649,1650,1651],"strong",{},"natural",", ",[1654,1655,1656],"em",{},"noise-driven motion"," to the ",[1649,1659,1660],{},"active camera",".\nIt offers ",[1649,1663,1664],{},"per-axis control",[1649,1666,1667],{},"adjustable intensity",", and ",[1654,1670,1671],{},"optional decay"," — perfect for ",[1654,1674,1675],{},"handheld feel",[1654,1677,1678],{},"footsteps",[1654,1680,1681],{},"impacts",", or ",[1654,1684,1685],{},"engine rumble"," — and is based on the ",[1120,1688,1691,1692,1695],{"href":1689,"rel":1690},"https://drei.docs.pmnd.rs/staging/camera-shake#camerashake",[1124],"Drei ",[598,1693,1694],{},"CameraShake"," component",[484,1697,15],{"id":604},[606,1699,1702],{"className":608,"code":1700,"highlights":1701,"language":613,"meta":556,"style":556},"\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",[558,785,852],[598,1703,1704,1724,1748,1766,1774,1778,1786,1804,1823,1834,1838,1893,1911,1931,1951,1959,1968,1976],{"__ignoreMap":556},[617,1705,1706,1708,1710,1712,1714,1716,1718,1720,1722],{"class":619,"line":557},[617,1707,623],{"class":622},[617,1709,627],{"class":626},[617,1711,631],{"class":630},[617,1713,634],{"class":630},[617,1715,637],{"class":622},[617,1717,640],{"class":622},[617,1719,644],{"class":643},[617,1721,640],{"class":622},[617,1723,649],{"class":622},[617,1725,1727,1729,1731,1734,1736,1738,1740,1742,1744,1746],{"class":1726,"line":558},[619,653],[617,1728,657],{"class":656},[617,1730,660],{"class":622},[617,1732,1733],{"class":663}," CameraShake",[617,1735,667],{"class":622},[617,1737,670],{"class":663},[617,1739,673],{"class":622},[617,1741,676],{"class":656},[617,1743,679],{"class":622},[617,1745,682],{"class":643},[617,1747,685],{"class":622},[617,1749,1750,1752,1754,1756,1758,1760,1762,1764],{"class":619,"line":688},[617,1751,657],{"class":656},[617,1753,660],{"class":622},[617,1755,695],{"class":663},[617,1757,673],{"class":622},[617,1759,676],{"class":656},[617,1761,679],{"class":622},[617,1763,704],{"class":643},[617,1765,685],{"class":622},[617,1767,1768,1770,1772],{"class":619,"line":709},[617,1769,712],{"class":622},[617,1771,627],{"class":626},[617,1773,649],{"class":622},[617,1775,1776],{"class":619,"line":719},[617,1777,722],{"emptyLinePlaceholder":574},[617,1779,1780,1782,1784],{"class":619,"line":725},[617,1781,623],{"class":622},[617,1783,730],{"class":626},[617,1785,649],{"class":622},[617,1787,1788,1790,1792,1794,1796,1798,1800,1802],{"class":619,"line":735},[617,1789,738],{"class":622},[617,1791,741],{"class":626},[617,1793,744],{"class":630},[617,1795,637],{"class":622},[617,1797,640],{"class":622},[617,1799,751],{"class":643},[617,1801,640],{"class":622},[617,1803,649],{"class":622},[617,1805,1806,1808,1810,1812,1814,1816,1819,1821],{"class":619,"line":758},[617,1807,761],{"class":622},[617,1809,764],{"class":626},[617,1811,1465],{"class":630},[617,1813,637],{"class":622},[617,1815,640],{"class":622},[617,1817,1818],{"class":643},"[0, 2, 6]",[617,1820,640],{"class":622},[617,1822,767],{"class":622},[617,1824,1825,1827,1829,1832],{"class":619,"line":770},[617,1826,761],{"class":622},[617,1828,775],{"class":626},[617,1830,1831],{"class":630}," make-default",[617,1833,767],{"class":622},[617,1835,1836],{"class":619,"line":780},[617,1837,722],{"emptyLinePlaceholder":574},[617,1839,1841,1843,1845,1848,1850,1852,1855,1857,1860,1862,1864,1867,1869,1872,1874,1876,1878,1880,1883,1885,1887,1889,1891],{"class":1840,"line":785},[619,653],[617,1842,761],{"class":622},[617,1844,1694],{"class":626},[617,1846,1847],{"class":630}," :intensity",[617,1849,637],{"class":622},[617,1851,640],{"class":622},[617,1853,1854],{"class":643},"1",[617,1856,640],{"class":622},[617,1858,1859],{"class":630}," :max-yaw",[617,1861,637],{"class":622},[617,1863,640],{"class":622},[617,1865,1866],{"class":643},"0.01",[617,1868,640],{"class":622},[617,1870,1871],{"class":630}," :max-pitch",[617,1873,637],{"class":622},[617,1875,640],{"class":622},[617,1877,1866],{"class":643},[617,1879,640],{"class":622},[617,1881,1882],{"class":630}," :max-roll",[617,1884,637],{"class":622},[617,1886,640],{"class":622},[617,1888,1866],{"class":643},[617,1890,640],{"class":622},[617,1892,767],{"class":622},[617,1894,1895,1897,1899,1901,1903,1905,1907,1909],{"class":619,"line":807},[617,1896,833],{"class":622},[617,1898,790],{"class":626},[617,1900,793],{"class":630},[617,1902,637],{"class":622},[617,1904,640],{"class":622},[617,1906,800],{"class":643},[617,1908,640],{"class":622},[617,1910,767],{"class":622},[617,1912,1913,1915,1917,1920,1922,1924,1927,1929],{"class":619,"line":611},[617,1914,833],{"class":622},[617,1916,836],{"class":626},[617,1918,1919],{"class":630}," :position-y",[617,1921,637],{"class":622},[617,1923,640],{"class":622},[617,1925,1926],{"class":643},"0.5",[617,1928,640],{"class":622},[617,1930,649],{"class":622},[617,1932,1933,1935,1937,1940,1942,1944,1947,1949],{"class":619,"line":830},[617,1934,844],{"class":622},[617,1936,847],{"class":626},[617,1938,1939],{"class":630}," :args",[617,1941,637],{"class":622},[617,1943,640],{"class":622},[617,1945,1946],{"class":643},"[1, 1, 1]",[617,1948,640],{"class":622},[617,1950,767],{"class":622},[617,1952,1953,1955,1957],{"class":619,"line":841},[617,1954,844],{"class":622},[617,1956,857],{"class":626},[617,1958,767],{"class":622},[617,1960,1962,1964,1966],{"class":1961,"line":852},[619,653],[617,1963,865],{"class":622},[617,1965,836],{"class":626},[617,1967,649],{"class":622},[617,1969,1970,1972,1974],{"class":619,"line":862},[617,1971,885],{"class":622},[617,1973,741],{"class":626},[617,1975,649],{"class":622},[617,1977,1978,1980,1982],{"class":619,"line":612},[617,1979,712],{"class":622},[617,1981,730],{"class":626},[617,1983,649],{"class":622},[1985,1986,1987,2008],"prose-note",{},[594,1988,1989,1991,1992,1997,1998,2001,2002,2007],{},[598,1990,1646],{}," is fully compatible with ",[1649,1993,1994],{},[598,1995,1996],{},"\u003COrbitControls />",".\nTo ensure it works ",[1654,1999,2000],{},"as expected",", make sure to add the ",[1649,2003,2004],{},[598,2005,2006],{},"make-default"," prop:",[606,2009,2011],{"className":608,"code":2010,"language":613,"meta":556,"style":556},"\u003COrbitControls make-default />\n",[598,2012,2013],{"__ignoreMap":556},[617,2014,2015,2017,2019,2021],{"class":619,"line":557},[617,2016,623],{"class":622},[617,2018,775],{"class":626},[617,2020,1831],{"class":630},[617,2022,767],{"class":622},[484,2024,902],{"id":901},[907,2026,2027,2037],{},[910,2028,2029],{},[913,2030,2031,2033,2035],{},[916,2032,918],{},[916,2034,921],{},[916,2036,924],{},[926,2038,2039,2053,2069,2087,2101,2115,2129,2144,2158],{},[913,2040,2041,2046,2049],{},[931,2042,2043],{},[598,2044,2045],{},"intensity",[931,2047,2048],{},"The intensity of the shake (0–1).",[931,2050,2051],{},[598,2052,1854],{},[913,2054,2055,2060,2065],{},[931,2056,2057],{},[598,2058,2059],{},"decay",[931,2061,938,2062,2064],{},[598,2063,941],{},", intensity decays over time.",[931,2066,2067],{},[598,2068,951],{},[913,2070,2071,2076,2082],{},[931,2072,2073],{},[598,2074,2075],{},"decayRate",[931,2077,2078,2079,2081],{},"How fast intensity changes when ",[598,2080,2059],{}," is enabled.",[931,2083,2084],{},[598,2085,2086],{},"0.65",[913,2088,2089,2094,2097],{},[931,2090,2091],{},[598,2092,2093],{},"maxYaw",[931,2095,2096],{},"Maximum yaw angle in radians.",[931,2098,2099],{},[598,2100,1866],{},[913,2102,2103,2108,2111],{},[931,2104,2105],{},[598,2106,2107],{},"maxPitch",[931,2109,2110],{},"Maximum pitch angle in radians.",[931,2112,2113],{},[598,2114,1866],{},[913,2116,2117,2122,2125],{},[931,2118,2119],{},[598,2120,2121],{},"maxRoll",[931,2123,2124],{},"Maximum roll angle in radians.",[931,2126,2127],{},[598,2128,1866],{},[913,2130,2131,2136,2139],{},[931,2132,2133],{},[598,2134,2135],{},"yawFrequency",[931,2137,2138],{},"Frequency of yaw oscillation.",[931,2140,2141],{},[598,2142,2143],{},"0.1",[913,2145,2146,2151,2154],{},[931,2147,2148],{},[598,2149,2150],{},"pitchFrequency",[931,2152,2153],{},"Frequency of pitch oscillation.",[931,2155,2156],{},[598,2157,2143],{},[913,2159,2160,2165,2168],{},[931,2161,2162],{},[598,2163,2164],{},"rollFrequency",[931,2166,2167],{},"Frequency of roll oscillation.",[931,2169,2170],{},[598,2171,2143],{},[1307,2173,1624],{},{"title":556,"searchDepth":557,"depth":558,"links":2175},[2176,2177],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},"Apply smooth camera shake to the active camera.",{},{"title":45,"description":2178},"_LkwoWvv_PX4M3TXVjPQu0NxYXzfoa26E2WQGUlWZPY",{"id":2183,"title":49,"body":2184,"description":7280,"extension":571,"links":572,"meta":7281,"navigation":574,"path":50,"seo":7282,"stem":51,"__hash__":7283},"docs/2.api/1.abstractions/decal.md",{"type":481,"value":2185,"toc":7245},[2186,2192,2274,2280,2282,2297,2752,2768,2772,2783,2946,2963,2966,2980,3035,3060,3064,3077,3082,3148,3155,3161,3178,3266,3271,3285,3360,4030,4035,4075,4088,4151,4154,4164,4250,4257,4277,4287,4290,4487,4499,4507,4522,4840,4844,4868,5231,5246,5266,5270,5286,5523,5529,5725,5731,5866,5875,5882,5938,6039,6044,6190,6195,6236,6240,6296,6300,6371,6375,6453,6460,6475,6516,6565,7242],[594,2187,2188,2191],{},[598,2189,2190],{},"\u003CDecal>"," projects a flat texture onto the surface of a parent mesh,\nconforming to its geometry. Multiple decals can stack on the same mesh\nwith explicit z-layering, the JSON layout round-trips losslessly, and\nthe entry-by-entry shape stays human-readable.",[2193,2194,2195,2207,2220,2234,2241,2252,2264],"ul",{},[2196,2197,2198,2199,2202,2203,2206],"li",{},"🎨 Drop-in ",[1649,2200,2201],{},"editor UI"," via ",[598,2204,2205],{},"\u003CDecalDebugUI>"," — placement, rotate / scale / snap, tint, flip, layers, undo / redo, import / export.",[2196,2208,2209,2210,2202,2213,2219],{},"🛠 ",[1649,2211,2212],{},"Programmatic API",[1120,2214,2216],{"href":2215},"#programmatic-api-usedecaleditor",[598,2217,2218],{},"useDecalEditor()"," for custom panels and automation.",[2196,2221,2222,2223,2226,2227,2230,2231,1126],{},"🖼️ ",[1649,2224,2225],{},"Texture palette"," — pass an array of ",[598,2228,2229],{},"Texture"," to ",[598,2232,2233],{},":map",[2196,2235,2236,2237,2240],{},"🧩 ",[1649,2238,2239],{},"Custom material"," — override the default via the slot.",[2196,2242,2243,2244,2247,2248,2251],{},"💾 ",[1649,2245,2246],{},"Lossless JSON"," — ",[598,2249,2250],{},"v-model:data"," round-trips to plain JSON.",[2196,2253,2254,2255,2258,2259,2263],{},"⚡ ",[1649,2256,2257],{},"BVH-accelerated"," — auto-detected via ",[1120,2260,2261],{"href":312},[598,2262,311],{},"; 10–100× faster on dense meshes.",[2196,2265,2266,2267,2247,2270,2273],{},"📚 ",[1649,2268,2269],{},"Per-mesh stacking",[598,2271,2272],{},"zIndex"," with automatic polygon-offset.",[2275,2276,2277],"scene-wrapper",{},[2278,2279],"abstractions-decal",{},[484,2281,15],{"id":604},[594,2283,2284,2285,2287,2288,2291,2292,2294,2295,1126],{},"The minimal setup is a ",[598,2286,2190],{}," placed as a child of any ",[598,2289,2290],{},"\u003CTresMesh>",",\nwith a JSON list of stamped decals bound via ",[598,2293,2250],{}," and one or\nmore textures via ",[598,2296,2233],{},[606,2298,2300],{"className":608,"code":2299,"language":613,"meta":556,"style":556},"\u003Cscript setup lang=\"ts\">\nimport { Decal, OrbitControls, useTexture } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport { reactive } from 'vue'\n\nconst { state: texture } = useTexture('/textures/logo.png')\n\nconst decals = reactive([\n {\n id: 'logo-1',\n position: [0, 0, 0.5],\n orientation: [0, 0, 0],\n size: [0.75, 0.17, 1],\n zIndex: 0,\n map: 'logo.png',\n },\n])\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[2, 2, 3]\" />\n \u003COrbitControls />\n \u003CTresMesh>\n \u003CTresBoxGeometry />\n \u003CTresMeshStandardMaterial color=\"white\" />\n \u003CDecal v-if=\"texture\" v-model:data=\"decals\" :map=\"texture\" />\n \u003C/TresMesh>\n \u003C/TresCanvas>\n\u003C/template>\n",[598,2301,2302,2322,2350,2368,2387,2391,2429,2433,2447,2452,2469,2497,2520,2546,2557,2573,2578,2583,2591,2595,2603,2612,2632,2641,2650,2659,2681,2725,2734,2743],{"__ignoreMap":556},[617,2303,2304,2306,2308,2310,2312,2314,2316,2318,2320],{"class":619,"line":557},[617,2305,623],{"class":622},[617,2307,627],{"class":626},[617,2309,631],{"class":630},[617,2311,634],{"class":630},[617,2313,637],{"class":622},[617,2315,640],{"class":622},[617,2317,644],{"class":643},[617,2319,640],{"class":622},[617,2321,649],{"class":622},[617,2323,2324,2326,2328,2331,2333,2335,2337,2340,2342,2344,2346,2348],{"class":619,"line":558},[617,2325,657],{"class":656},[617,2327,660],{"class":622},[617,2329,2330],{"class":663}," Decal",[617,2332,667],{"class":622},[617,2334,670],{"class":663},[617,2336,667],{"class":622},[617,2338,2339],{"class":663}," useTexture",[617,2341,673],{"class":622},[617,2343,676],{"class":656},[617,2345,679],{"class":622},[617,2347,682],{"class":643},[617,2349,685],{"class":622},[617,2351,2352,2354,2356,2358,2360,2362,2364,2366],{"class":619,"line":688},[617,2353,657],{"class":656},[617,2355,660],{"class":622},[617,2357,695],{"class":663},[617,2359,673],{"class":622},[617,2361,676],{"class":656},[617,2363,679],{"class":622},[617,2365,704],{"class":643},[617,2367,685],{"class":622},[617,2369,2370,2372,2374,2377,2379,2381,2383,2385],{"class":619,"line":709},[617,2371,657],{"class":656},[617,2373,660],{"class":622},[617,2375,2376],{"class":663}," reactive",[617,2378,673],{"class":622},[617,2380,676],{"class":656},[617,2382,679],{"class":622},[617,2384,613],{"class":643},[617,2386,685],{"class":622},[617,2388,2389],{"class":619,"line":719},[617,2390,722],{"emptyLinePlaceholder":574},[617,2392,2393,2396,2398,2401,2403,2406,2409,2412,2415,2418,2421,2424,2426],{"class":619,"line":725},[617,2394,2395],{"class":630},"const",[617,2397,660],{"class":622},[617,2399,2400],{"class":626}," state",[617,2402,1198],{"class":622},[617,2404,2405],{"class":663}," texture ",[617,2407,2408],{"class":622},"}",[617,2410,2411],{"class":622}," =",[617,2413,2339],{"class":2414},"s2Zo4",[617,2416,2417],{"class":663},"(",[617,2419,2420],{"class":622},"'",[617,2422,2423],{"class":643},"/textures/logo.png",[617,2425,2420],{"class":622},[617,2427,2428],{"class":663},")\n",[617,2430,2431],{"class":619,"line":735},[617,2432,722],{"emptyLinePlaceholder":574},[617,2434,2435,2437,2440,2442,2444],{"class":619,"line":758},[617,2436,2395],{"class":630},[617,2438,2439],{"class":663}," decals ",[617,2441,637],{"class":622},[617,2443,2376],{"class":2414},[617,2445,2446],{"class":663},"([\n",[617,2448,2449],{"class":619,"line":770},[617,2450,2451],{"class":622}," {\n",[617,2453,2454,2457,2459,2461,2464,2466],{"class":619,"line":780},[617,2455,2456],{"class":626}," id",[617,2458,1198],{"class":622},[617,2460,679],{"class":622},[617,2462,2463],{"class":643},"logo-1",[617,2465,2420],{"class":622},[617,2467,2468],{"class":622},",\n",[617,2470,2471,2474,2476,2479,2482,2484,2487,2489,2492,2495],{"class":619,"line":785},[617,2472,2473],{"class":626}," position",[617,2475,1198],{"class":622},[617,2477,2478],{"class":663}," [",[617,2480,945],{"class":2481},"sbssI",[617,2483,667],{"class":622},[617,2485,2486],{"class":2481}," 0",[617,2488,667],{"class":622},[617,2490,2491],{"class":2481}," 0.5",[617,2493,2494],{"class":663},"]",[617,2496,2468],{"class":622},[617,2498,2499,2502,2504,2506,2508,2510,2512,2514,2516,2518],{"class":619,"line":807},[617,2500,2501],{"class":626}," orientation",[617,2503,1198],{"class":622},[617,2505,2478],{"class":663},[617,2507,945],{"class":2481},[617,2509,667],{"class":622},[617,2511,2486],{"class":2481},[617,2513,667],{"class":622},[617,2515,2486],{"class":2481},[617,2517,2494],{"class":663},[617,2519,2468],{"class":622},[617,2521,2522,2525,2527,2529,2532,2534,2537,2539,2542,2544],{"class":619,"line":611},[617,2523,2524],{"class":626}," size",[617,2526,1198],{"class":622},[617,2528,2478],{"class":663},[617,2530,2531],{"class":2481},"0.75",[617,2533,667],{"class":622},[617,2535,2536],{"class":2481}," 0.17",[617,2538,667],{"class":622},[617,2540,2541],{"class":2481}," 1",[617,2543,2494],{"class":663},[617,2545,2468],{"class":622},[617,2547,2548,2551,2553,2555],{"class":619,"line":830},[617,2549,2550],{"class":626}," zIndex",[617,2552,1198],{"class":622},[617,2554,2486],{"class":2481},[617,2556,2468],{"class":622},[617,2558,2559,2562,2564,2566,2569,2571],{"class":619,"line":841},[617,2560,2561],{"class":626}," map",[617,2563,1198],{"class":622},[617,2565,679],{"class":622},[617,2567,2568],{"class":643},"logo.png",[617,2570,2420],{"class":622},[617,2572,2468],{"class":622},[617,2574,2575],{"class":619,"line":852},[617,2576,2577],{"class":622}," },\n",[617,2579,2580],{"class":619,"line":862},[617,2581,2582],{"class":663},"])\n",[617,2584,2585,2587,2589],{"class":619,"line":612},[617,2586,712],{"class":622},[617,2588,627],{"class":626},[617,2590,649],{"class":622},[617,2592,2593],{"class":619,"line":882},[617,2594,722],{"emptyLinePlaceholder":574},[617,2596,2597,2599,2601],{"class":619,"line":892},[617,2598,623],{"class":622},[617,2600,730],{"class":626},[617,2602,649],{"class":622},[617,2604,2606,2608,2610],{"class":619,"line":2605},21,[617,2607,738],{"class":622},[617,2609,741],{"class":626},[617,2611,649],{"class":622},[617,2613,2615,2617,2619,2621,2623,2625,2628,2630],{"class":619,"line":2614},22,[617,2616,761],{"class":622},[617,2618,764],{"class":626},[617,2620,1465],{"class":630},[617,2622,637],{"class":622},[617,2624,640],{"class":622},[617,2626,2627],{"class":643},"[2, 2, 3]",[617,2629,640],{"class":622},[617,2631,767],{"class":622},[617,2633,2635,2637,2639],{"class":619,"line":2634},23,[617,2636,761],{"class":622},[617,2638,775],{"class":626},[617,2640,767],{"class":622},[617,2642,2644,2646,2648],{"class":619,"line":2643},24,[617,2645,761],{"class":622},[617,2647,836],{"class":626},[617,2649,649],{"class":622},[617,2651,2653,2655,2657],{"class":619,"line":2652},25,[617,2654,833],{"class":622},[617,2656,847],{"class":626},[617,2658,767],{"class":622},[617,2660,2662,2664,2667,2670,2672,2674,2677,2679],{"class":619,"line":2661},26,[617,2663,833],{"class":622},[617,2665,2666],{"class":626},"TresMeshStandardMaterial",[617,2668,2669],{"class":630}," color",[617,2671,637],{"class":622},[617,2673,640],{"class":622},[617,2675,2676],{"class":643},"white",[617,2678,640],{"class":622},[617,2680,767],{"class":622},[617,2682,2684,2686,2688,2691,2693,2695,2698,2700,2703,2705,2707,2710,2712,2715,2717,2719,2721,2723],{"class":619,"line":2683},27,[617,2685,833],{"class":622},[617,2687,49],{"class":626},[617,2689,2690],{"class":630}," v-if",[617,2692,637],{"class":622},[617,2694,640],{"class":622},[617,2696,2697],{"class":643},"texture",[617,2699,640],{"class":622},[617,2701,2702],{"class":630}," v-model:data",[617,2704,637],{"class":622},[617,2706,640],{"class":622},[617,2708,2709],{"class":643},"decals",[617,2711,640],{"class":622},[617,2713,2714],{"class":630}," :map",[617,2716,637],{"class":622},[617,2718,640],{"class":622},[617,2720,2697],{"class":643},[617,2722,640],{"class":622},[617,2724,767],{"class":622},[617,2726,2728,2730,2732],{"class":619,"line":2727},28,[617,2729,875],{"class":622},[617,2731,836],{"class":626},[617,2733,649],{"class":622},[617,2735,2737,2739,2741],{"class":619,"line":2736},29,[617,2738,885],{"class":622},[617,2740,741],{"class":626},[617,2742,649],{"class":622},[617,2744,2746,2748,2750],{"class":619,"line":2745},30,[617,2747,712],{"class":622},[617,2749,730],{"class":626},[617,2751,649],{"class":622},[1985,2753,2754],{},[594,2755,2756,2757,2759,2760,2763,2764,2767],{},"The ",[598,2758,2250],{}," array is the ",[1649,2761,2762],{},"single source of truth"," — every\ndecal you can see lives in it. It serializes to plain JSON so you can\nsave / load it from a backend, localStorage, or a ",[598,2765,2766],{},".json"," file.",[484,2769,2771],{"id":2770},"multiple-textures-palette","Multiple textures (palette)",[594,2773,2774,2775,2777,2778,2782],{},"Pass an array to ",[598,2776,2233],{}," to give users a palette of textures to pick\nfrom. The array returned by ",[1120,2779,2780],{"href":142},[598,2781,141],{},"\nplugs in directly:",[606,2784,2786],{"className":608,"code":2785,"language":613,"meta":556,"style":556},"\u003Cscript setup lang=\"ts\">\nimport { Decal, useTextures } from '@tresjs/cientos'\n\nconst { textures } = useTextures([\n '/textures/logo.png',\n '/textures/badge.png',\n '/textures/sticker.png',\n])\n\u003C/script>\n\n\u003Ctemplate>\n \u003CDecal v-model:data=\"decals\" :map=\"textures\" />\n\u003C/template>\n",[598,2787,2788,2808,2831,2835,2852,2863,2874,2885,2889,2897,2901,2909,2938],{"__ignoreMap":556},[617,2789,2790,2792,2794,2796,2798,2800,2802,2804,2806],{"class":619,"line":557},[617,2791,623],{"class":622},[617,2793,627],{"class":626},[617,2795,631],{"class":630},[617,2797,634],{"class":630},[617,2799,637],{"class":622},[617,2801,640],{"class":622},[617,2803,644],{"class":643},[617,2805,640],{"class":622},[617,2807,649],{"class":622},[617,2809,2810,2812,2814,2816,2818,2821,2823,2825,2827,2829],{"class":619,"line":558},[617,2811,657],{"class":656},[617,2813,660],{"class":622},[617,2815,2330],{"class":663},[617,2817,667],{"class":622},[617,2819,2820],{"class":663}," useTextures",[617,2822,673],{"class":622},[617,2824,676],{"class":656},[617,2826,679],{"class":622},[617,2828,682],{"class":643},[617,2830,685],{"class":622},[617,2832,2833],{"class":619,"line":688},[617,2834,722],{"emptyLinePlaceholder":574},[617,2836,2837,2839,2841,2844,2846,2848,2850],{"class":619,"line":709},[617,2838,2395],{"class":630},[617,2840,660],{"class":622},[617,2842,2843],{"class":663}," textures ",[617,2845,2408],{"class":622},[617,2847,2411],{"class":622},[617,2849,2820],{"class":2414},[617,2851,2446],{"class":663},[617,2853,2854,2857,2859,2861],{"class":619,"line":719},[617,2855,2856],{"class":622}," '",[617,2858,2423],{"class":643},[617,2860,2420],{"class":622},[617,2862,2468],{"class":622},[617,2864,2865,2867,2870,2872],{"class":619,"line":725},[617,2866,2856],{"class":622},[617,2868,2869],{"class":643},"/textures/badge.png",[617,2871,2420],{"class":622},[617,2873,2468],{"class":622},[617,2875,2876,2878,2881,2883],{"class":619,"line":735},[617,2877,2856],{"class":622},[617,2879,2880],{"class":643},"/textures/sticker.png",[617,2882,2420],{"class":622},[617,2884,2468],{"class":622},[617,2886,2887],{"class":619,"line":758},[617,2888,2582],{"class":663},[617,2890,2891,2893,2895],{"class":619,"line":770},[617,2892,712],{"class":622},[617,2894,627],{"class":626},[617,2896,649],{"class":622},[617,2898,2899],{"class":619,"line":780},[617,2900,722],{"emptyLinePlaceholder":574},[617,2902,2903,2905,2907],{"class":619,"line":785},[617,2904,623],{"class":622},[617,2906,730],{"class":626},[617,2908,649],{"class":622},[617,2910,2911,2913,2915,2917,2919,2921,2923,2925,2927,2929,2931,2934,2936],{"class":619,"line":807},[617,2912,738],{"class":622},[617,2914,49],{"class":626},[617,2916,2702],{"class":630},[617,2918,637],{"class":622},[617,2920,640],{"class":622},[617,2922,2709],{"class":643},[617,2924,640],{"class":622},[617,2926,2714],{"class":630},[617,2928,637],{"class":622},[617,2930,640],{"class":622},[617,2932,2933],{"class":643},"textures",[617,2935,640],{"class":622},[617,2937,767],{"class":622},[617,2939,2940,2942,2944],{"class":619,"line":611},[617,2941,712],{"class":622},[617,2943,730],{"class":626},[617,2945,649],{"class":622},[594,2947,2948,2949,2247,2952,2954,2955,2958,2959,2962],{},"Each entry references its texture by ",[598,2950,2951],{},"name",[598,2953,2190],{}," auto-fills\n",[598,2956,2957],{},"texture.name"," from the URL filename when missing, so JSON ",[598,2960,2961],{},"map","\nfields round-trip cleanly.",[484,2964,2239],{"id":2965},"custom-material",[594,2967,2968,2969,2972,2973,2468,2976,2979],{},"The default material is ",[598,2970,2971],{},"MeshBasicMaterial",". Override it via the slot\nto plug in any Three.js material — ",[598,2974,2975],{},"MeshStandardMaterial",[598,2977,2978],{},"MeshPhysicalMaterial",", or a custom shader.",[606,2981,2983],{"className":608,"code":2982,"language":613,"meta":556,"style":556},"\u003CDecal v-model:data=\"decals\" :map=\"texture\">\n \u003CTresMeshStandardMaterial :transparent=\"true\" :polygon-offset=\"true\" />\n\u003C/Decal>\n",[598,2984,2985,3022,3027],{"__ignoreMap":556},[617,2986,2987,2989,2991,2994,2996,2999,3001,3003,3005,3007,3010,3012,3014,3016,3018,3020],{"class":619,"line":557},[617,2988,623],{"class":622},[617,2990,49],{"class":626},[617,2992,2993],{"class":630}," v-model",[617,2995,1198],{"class":622},[617,2997,2998],{"class":630},"data",[617,3000,637],{"class":622},[617,3002,640],{"class":622},[617,3004,2709],{"class":663},[617,3006,640],{"class":622},[617,3008,3009],{"class":622}," :",[617,3011,2961],{"class":630},[617,3013,637],{"class":622},[617,3015,640],{"class":622},[617,3017,2697],{"class":663},[617,3019,640],{"class":622},[617,3021,649],{"class":622},[617,3023,3024],{"class":619,"line":558},[617,3025,3026],{"class":663}," \u003CTresMeshStandardMaterial :transparent=\"true\" :polygon-offset=\"true\" />\n",[617,3028,3029,3031,3033],{"class":619,"line":688},[617,3030,712],{"class":622},[617,3032,49],{"class":626},[617,3034,649],{"class":622},[1985,3036,3037],{},[594,3038,3039,3040,3043,3044,3047,3048,3043,3051,3054,3055,2468,3057,3059],{},"Keep ",[598,3041,3042],{},"transparent: true"," and ",[598,3045,3046],{},"polygonOffset: true"," on any custom\nmaterial, otherwise stacking and alpha handling won't work as expected.\nColor / opacity tint from the editor only applies to materials\nexposing ",[598,3049,3050],{},".color",[598,3052,3053],{},".opacity"," (",[598,3056,2971],{},[598,3058,2975],{},", …) — bespoke shader materials are skipped\nsilently.",[484,3061,3063],{"id":3062},"stacking-decals-z-layering","Stacking decals (z-layering)",[594,3065,3066,3067,3069,3070,3073,3074,1126],{},"Each decal has a ",[598,3068,2272],{}," controlling its draw order on the parent\nmesh. Higher = on top. The component handles z-fighting via\n",[598,3071,3072],{},"polygonOffset"," automatically — but if you stack many decals near\nparallel surfaces and still see flicker, raise ",[598,3075,3076],{},"layerGap",[2275,3078,3079],{},[3080,3081],"abstractions-decal-stacking",{},[606,3083,3085],{"className":608,"code":3084,"language":613,"meta":556,"style":556},"\u003CDecal\n v-model:data=\"decals\"\n :map=\"textures\"\n :layer-gap=\"0.002\"\n/>\n",[598,3086,3087,3094,3112,3127,3143],{"__ignoreMap":556},[617,3088,3089,3091],{"class":619,"line":557},[617,3090,623],{"class":622},[617,3092,3093],{"class":626},"Decal\n",[617,3095,3096,3099,3101,3103,3105,3107,3109],{"class":619,"line":558},[617,3097,3098],{"class":630}," v-model",[617,3100,1198],{"class":622},[617,3102,2998],{"class":630},[617,3104,637],{"class":622},[617,3106,640],{"class":622},[617,3108,2709],{"class":663},[617,3110,3111],{"class":622},"\"\n",[617,3113,3114,3117,3119,3121,3123,3125],{"class":619,"line":688},[617,3115,3116],{"class":622}," :",[617,3118,2961],{"class":630},[617,3120,637],{"class":622},[617,3122,640],{"class":622},[617,3124,2933],{"class":663},[617,3126,3111],{"class":622},[617,3128,3129,3131,3134,3136,3138,3141],{"class":619,"line":709},[617,3130,3116],{"class":622},[617,3132,3133],{"class":630},"layer-gap",[617,3135,637],{"class":622},[617,3137,640],{"class":622},[617,3139,3140],{"class":2481},"0.002",[617,3142,3111],{"class":622},[617,3144,3145],{"class":619,"line":719},[617,3146,3147],{"class":663},"/>\n",[594,3149,3150,3151,3154],{},"zIndex stacks are ",[1649,3152,3153],{},"per-mesh"," — two decals on different meshes never\ncompete for the same layer slot.",[484,3156,3158,3159],{"id":3157},"editable-mode-decaldebugui","Editable mode + ",[598,3160,2205],{},[594,3162,3163,3164,3167,3168,3170,3171,3174,3175,1126],{},"Add the ",[598,3165,3166],{},"editable"," prop to mount the interactive editor, then pair it\nwith ",[598,3169,2205],{}," — a full in-canvas editor that ships as a drop-in\nHTML overlay sitting ",[1649,3172,3173],{},"outside"," ",[598,3176,3177],{},"\u003CTresCanvas>",[3179,3180,3181,3195,3216],"prose-warning",{},[594,3182,3183,3185,3186,3189,3190,3192,3193,1126],{},[598,3184,2205],{}," needs its stylesheet — import it ",[1649,3187,3188],{},"once"," at your app\nentry. ",[598,3191,2190],{}," itself is style-less, so this is only needed when you\nmount ",[598,3194,2205],{},[606,3196,3198],{"className":1166,"code":3197,"language":644,"meta":556,"style":556},"// Vite / Vue — in main.ts\nimport '@tresjs/cientos/styles.css'\n",[598,3199,3200,3205],{"__ignoreMap":556},[617,3201,3202],{"class":619,"line":557},[617,3203,3204],{"class":1189},"// Vite / Vue — in main.ts\n",[617,3206,3207,3209,3211,3214],{"class":619,"line":558},[617,3208,657],{"class":656},[617,3210,679],{"class":622},[617,3212,3213],{"class":643},"@tresjs/cientos/styles.css",[617,3215,685],{"class":622},[606,3217,3219],{"className":1166,"code":3218,"language":644,"meta":556,"style":556},"// Nuxt — in nuxt.config.ts\nexport default defineNuxtConfig({\n css: ['@tresjs/cientos/styles.css'],\n})\n",[598,3220,3221,3226,3241,3260],{"__ignoreMap":556},[617,3222,3223],{"class":619,"line":557},[617,3224,3225],{"class":1189},"// Nuxt — in nuxt.config.ts\n",[617,3227,3228,3230,3233,3236,3238],{"class":619,"line":558},[617,3229,1174],{"class":656},[617,3231,3232],{"class":656}," default",[617,3234,3235],{"class":2414}," defineNuxtConfig",[617,3237,2417],{"class":663},[617,3239,3240],{"class":622},"{\n",[617,3242,3243,3246,3248,3250,3252,3254,3256,3258],{"class":619,"line":688},[617,3244,3245],{"class":626}," css",[617,3247,1198],{"class":622},[617,3249,2478],{"class":663},[617,3251,2420],{"class":622},[617,3253,3213],{"class":643},[617,3255,2420],{"class":622},[617,3257,2494],{"class":663},[617,3259,2468],{"class":622},[617,3261,3262,3264],{"class":619,"line":709},[617,3263,2408],{"class":622},[617,3265,2428],{"class":663},[2275,3267,3268],{},[3269,3270],"abstractions-decal-editable",{},[594,3272,3273,3274,3277,3278,3281,3282,1126],{},"Three panels: a floating ",[1649,3275,3276],{},"handle"," anchored to the editing decal, a\nbottom ",[1649,3279,3280],{},"dock"," (texture picker + edit tools), a right-side ",[1649,3283,3284],{},"layer\npanel",[2193,3286,3287,3297,3302,3308,3321,3326,3331,3337,3343,3349,3355],{},[2196,3288,3289,3292,3293,3296],{},[1649,3290,3291],{},"Floating handle"," (rotate + scale + snap + live ",[598,3294,3295],{},"scale% · rotation° · L\u003Cn>"," badge)",[2196,3298,3299],{},[1649,3300,3301],{},"Color tint & opacity",[2196,3303,3304,3307],{},[1649,3305,3306],{},"Mirror"," (flip X / flip Y)",[2196,3309,3310,3054,3313,3316,3317,3320],{},[1649,3311,3312],{},"Layer controls",[598,3314,3315],{},"L+"," / ",[598,3318,3319],{},"L-",")",[2196,3322,3323],{},[1649,3324,3325],{},"Visibility toggle",[2196,3327,3328],{},[1649,3329,3330],{},"Per-row remove",[2196,3332,3333,3336],{},[1649,3334,3335],{},"Layer panel"," (mesh-grouped, drag-to-reorder)",[2196,3338,3339,3342],{},[1649,3340,3341],{},"Texture picker"," (drag or click-to-arm)",[2196,3344,3345,3348],{},[1649,3346,3347],{},"Mode badge"," (placing / editing status)",[2196,3350,3351,3354],{},[1649,3352,3353],{},"Undo / Redo"," buttons",[2196,3356,3357,3354],{},[1649,3358,3359],{},"Import / Export",[606,3361,3363],{"className":608,"code":3362,"language":613,"meta":556,"style":556},"\u003Cscript setup lang=\"ts\">\nimport { Decal, DecalDebugUI, OrbitControls, useTextures } from '@tresjs/cientos'\nimport type { DecalEditorSession, DecalJsonEntry } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport { computed, reactive, shallowRef } from 'vue'\n\nconst { textures } = useTextures(['/textures/a.png', '/textures/b.png'])\n\nconst layout = reactive\u003CRecord\u003Cstring, DecalJsonEntry[]>>({\n cube: [],\n sphere: [],\n})\n\nconst decalRef = shallowRef\u003C{ editor: DecalEditorSession } | null>(null)\nconst session = computed(() => decalRef.value?.editor ?? null)\n\u003C/script>\n\n\u003Ctemplate>\n \u003CDecalDebugUI :session=\"session\" :textures=\"textures ?? []\" :data=\"layout\" />\n\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[2, 2, 4]\" />\n \u003COrbitControls />\n\n \u003CTresMesh name=\"cube\" :position=\"[-1.2, 0, 0]\">\n \u003CTresBoxGeometry />\n \u003CTresMeshStandardMaterial color=\"white\" />\n \u003CDecal ref=\"decalRef\" v-model:data=\"layout.cube\" :map=\"textures\" editable />\n \u003C/TresMesh>\n\n \u003CTresMesh name=\"sphere\" :position=\"[1.2, 0, 0]\">\n \u003CTresSphereGeometry :args=\"[0.7]\" />\n \u003CTresMeshStandardMaterial color=\"white\" />\n \u003CDecal v-model:data=\"layout.sphere\" :map=\"textures\" editable />\n \u003C/TresMesh>\n \u003C/TresCanvas>\n\u003C/template>\n",[598,3364,3365,3385,3416,3443,3461,3489,3493,3528,3532,3567,3579,3590,3596,3600,3639,3679,3687,3691,3699,3744,3748,3756,3775,3783,3787,3818,3826,3844,3888,3896,3900,3931,3952,3971,4003,4012,4021],{"__ignoreMap":556},[617,3366,3367,3369,3371,3373,3375,3377,3379,3381,3383],{"class":619,"line":557},[617,3368,623],{"class":622},[617,3370,627],{"class":626},[617,3372,631],{"class":630},[617,3374,634],{"class":630},[617,3376,637],{"class":622},[617,3378,640],{"class":622},[617,3380,644],{"class":643},[617,3382,640],{"class":622},[617,3384,649],{"class":622},[617,3386,3387,3389,3391,3393,3395,3398,3400,3402,3404,3406,3408,3410,3412,3414],{"class":619,"line":558},[617,3388,657],{"class":656},[617,3390,660],{"class":622},[617,3392,2330],{"class":663},[617,3394,667],{"class":622},[617,3396,3397],{"class":663}," DecalDebugUI",[617,3399,667],{"class":622},[617,3401,670],{"class":663},[617,3403,667],{"class":622},[617,3405,2820],{"class":663},[617,3407,673],{"class":622},[617,3409,676],{"class":656},[617,3411,679],{"class":622},[617,3413,682],{"class":643},[617,3415,685],{"class":622},[617,3417,3418,3420,3423,3425,3428,3430,3433,3435,3437,3439,3441],{"class":619,"line":688},[617,3419,657],{"class":656},[617,3421,3422],{"class":656}," type",[617,3424,660],{"class":622},[617,3426,3427],{"class":663}," DecalEditorSession",[617,3429,667],{"class":622},[617,3431,3432],{"class":663}," DecalJsonEntry",[617,3434,673],{"class":622},[617,3436,676],{"class":656},[617,3438,679],{"class":622},[617,3440,682],{"class":643},[617,3442,685],{"class":622},[617,3444,3445,3447,3449,3451,3453,3455,3457,3459],{"class":619,"line":709},[617,3446,657],{"class":656},[617,3448,660],{"class":622},[617,3450,695],{"class":663},[617,3452,673],{"class":622},[617,3454,676],{"class":656},[617,3456,679],{"class":622},[617,3458,704],{"class":643},[617,3460,685],{"class":622},[617,3462,3463,3465,3467,3470,3472,3474,3476,3479,3481,3483,3485,3487],{"class":619,"line":719},[617,3464,657],{"class":656},[617,3466,660],{"class":622},[617,3468,3469],{"class":663}," computed",[617,3471,667],{"class":622},[617,3473,2376],{"class":663},[617,3475,667],{"class":622},[617,3477,3478],{"class":663}," shallowRef",[617,3480,673],{"class":622},[617,3482,676],{"class":656},[617,3484,679],{"class":622},[617,3486,613],{"class":643},[617,3488,685],{"class":622},[617,3490,3491],{"class":619,"line":725},[617,3492,722],{"emptyLinePlaceholder":574},[617,3494,3495,3497,3499,3501,3503,3505,3507,3510,3512,3515,3517,3519,3521,3524,3526],{"class":619,"line":735},[617,3496,2395],{"class":630},[617,3498,660],{"class":622},[617,3500,2843],{"class":663},[617,3502,2408],{"class":622},[617,3504,2411],{"class":622},[617,3506,2820],{"class":2414},[617,3508,3509],{"class":663},"([",[617,3511,2420],{"class":622},[617,3513,3514],{"class":643},"/textures/a.png",[617,3516,2420],{"class":622},[617,3518,667],{"class":622},[617,3520,679],{"class":622},[617,3522,3523],{"class":643},"/textures/b.png",[617,3525,2420],{"class":622},[617,3527,2582],{"class":663},[617,3529,3530],{"class":619,"line":758},[617,3531,722],{"emptyLinePlaceholder":574},[617,3533,3534,3536,3539,3541,3543,3545,3548,3550,3553,3555,3557,3560,3563,3565],{"class":619,"line":770},[617,3535,2395],{"class":630},[617,3537,3538],{"class":663}," layout ",[617,3540,637],{"class":622},[617,3542,2376],{"class":2414},[617,3544,623],{"class":622},[617,3546,3547],{"class":1180},"Record",[617,3549,623],{"class":622},[617,3551,3552],{"class":1180},"string",[617,3554,667],{"class":622},[617,3556,3432],{"class":1180},[617,3558,3559],{"class":663},"[]",[617,3561,3562],{"class":622},">>",[617,3564,2417],{"class":663},[617,3566,3240],{"class":622},[617,3568,3569,3572,3574,3577],{"class":619,"line":780},[617,3570,3571],{"class":626}," cube",[617,3573,1198],{"class":622},[617,3575,3576],{"class":663}," []",[617,3578,2468],{"class":622},[617,3580,3581,3584,3586,3588],{"class":619,"line":785},[617,3582,3583],{"class":626}," sphere",[617,3585,1198],{"class":622},[617,3587,3576],{"class":663},[617,3589,2468],{"class":622},[617,3591,3592,3594],{"class":619,"line":807},[617,3593,2408],{"class":622},[617,3595,2428],{"class":663},[617,3597,3598],{"class":619,"line":611},[617,3599,722],{"emptyLinePlaceholder":574},[617,3601,3602,3604,3607,3609,3611,3614,3617,3619,3621,3623,3626,3629,3632,3634,3637],{"class":619,"line":830},[617,3603,2395],{"class":630},[617,3605,3606],{"class":663}," decalRef ",[617,3608,637],{"class":622},[617,3610,3478],{"class":2414},[617,3612,3613],{"class":622},"\u003C{",[617,3615,3616],{"class":626}," editor",[617,3618,1198],{"class":622},[617,3620,3427],{"class":1180},[617,3622,673],{"class":622},[617,3624,3625],{"class":622}," |",[617,3627,3628],{"class":1180}," null",[617,3630,3631],{"class":622},">",[617,3633,2417],{"class":663},[617,3635,3636],{"class":622},"null",[617,3638,2428],{"class":663},[617,3640,3641,3643,3646,3648,3650,3652,3655,3658,3661,3663,3666,3669,3672,3675,3677],{"class":619,"line":841},[617,3642,2395],{"class":630},[617,3644,3645],{"class":663}," session ",[617,3647,637],{"class":622},[617,3649,3469],{"class":2414},[617,3651,2417],{"class":663},[617,3653,3654],{"class":622},"()",[617,3656,3657],{"class":630}," =>",[617,3659,3660],{"class":663}," decalRef",[617,3662,1126],{"class":622},[617,3664,3665],{"class":663},"value",[617,3667,3668],{"class":622},"?.",[617,3670,3671],{"class":663},"editor ",[617,3673,3674],{"class":622},"??",[617,3676,3628],{"class":622},[617,3678,2428],{"class":663},[617,3680,3681,3683,3685],{"class":619,"line":852},[617,3682,712],{"class":622},[617,3684,627],{"class":626},[617,3686,649],{"class":622},[617,3688,3689],{"class":619,"line":862},[617,3690,722],{"emptyLinePlaceholder":574},[617,3692,3693,3695,3697],{"class":619,"line":612},[617,3694,623],{"class":622},[617,3696,730],{"class":626},[617,3698,649],{"class":622},[617,3700,3701,3703,3706,3709,3711,3713,3716,3718,3721,3723,3725,3728,3730,3733,3735,3737,3740,3742],{"class":619,"line":882},[617,3702,738],{"class":622},[617,3704,3705],{"class":626},"DecalDebugUI",[617,3707,3708],{"class":630}," :session",[617,3710,637],{"class":622},[617,3712,640],{"class":622},[617,3714,3715],{"class":643},"session",[617,3717,640],{"class":622},[617,3719,3720],{"class":630}," :textures",[617,3722,637],{"class":622},[617,3724,640],{"class":622},[617,3726,3727],{"class":643},"textures ?? []",[617,3729,640],{"class":622},[617,3731,3732],{"class":630}," :data",[617,3734,637],{"class":622},[617,3736,640],{"class":622},[617,3738,3739],{"class":643},"layout",[617,3741,640],{"class":622},[617,3743,767],{"class":622},[617,3745,3746],{"class":619,"line":892},[617,3747,722],{"emptyLinePlaceholder":574},[617,3749,3750,3752,3754],{"class":619,"line":2605},[617,3751,738],{"class":622},[617,3753,741],{"class":626},[617,3755,649],{"class":622},[617,3757,3758,3760,3762,3764,3766,3768,3771,3773],{"class":619,"line":2614},[617,3759,761],{"class":622},[617,3761,764],{"class":626},[617,3763,1465],{"class":630},[617,3765,637],{"class":622},[617,3767,640],{"class":622},[617,3769,3770],{"class":643},"[2, 2, 4]",[617,3772,640],{"class":622},[617,3774,767],{"class":622},[617,3776,3777,3779,3781],{"class":619,"line":2634},[617,3778,761],{"class":622},[617,3780,775],{"class":626},[617,3782,767],{"class":622},[617,3784,3785],{"class":619,"line":2643},[617,3786,722],{"emptyLinePlaceholder":574},[617,3788,3789,3791,3793,3796,3798,3800,3803,3805,3807,3809,3811,3814,3816],{"class":619,"line":2652},[617,3790,761],{"class":622},[617,3792,836],{"class":626},[617,3794,3795],{"class":630}," name",[617,3797,637],{"class":622},[617,3799,640],{"class":622},[617,3801,3802],{"class":643},"cube",[617,3804,640],{"class":622},[617,3806,1465],{"class":630},[617,3808,637],{"class":622},[617,3810,640],{"class":622},[617,3812,3813],{"class":643},"[-1.2, 0, 0]",[617,3815,640],{"class":622},[617,3817,649],{"class":622},[617,3819,3820,3822,3824],{"class":619,"line":2661},[617,3821,833],{"class":622},[617,3823,847],{"class":626},[617,3825,767],{"class":622},[617,3827,3828,3830,3832,3834,3836,3838,3840,3842],{"class":619,"line":2683},[617,3829,833],{"class":622},[617,3831,2666],{"class":626},[617,3833,2669],{"class":630},[617,3835,637],{"class":622},[617,3837,640],{"class":622},[617,3839,2676],{"class":643},[617,3841,640],{"class":622},[617,3843,767],{"class":622},[617,3845,3846,3848,3850,3853,3855,3857,3860,3862,3864,3866,3868,3871,3873,3875,3877,3879,3881,3883,3886],{"class":619,"line":2727},[617,3847,833],{"class":622},[617,3849,49],{"class":626},[617,3851,3852],{"class":630}," ref",[617,3854,637],{"class":622},[617,3856,640],{"class":622},[617,3858,3859],{"class":643},"decalRef",[617,3861,640],{"class":622},[617,3863,2702],{"class":630},[617,3865,637],{"class":622},[617,3867,640],{"class":622},[617,3869,3870],{"class":643},"layout.cube",[617,3872,640],{"class":622},[617,3874,2714],{"class":630},[617,3876,637],{"class":622},[617,3878,640],{"class":622},[617,3880,2933],{"class":643},[617,3882,640],{"class":622},[617,3884,3885],{"class":630}," editable",[617,3887,767],{"class":622},[617,3889,3890,3892,3894],{"class":619,"line":2736},[617,3891,875],{"class":622},[617,3893,836],{"class":626},[617,3895,649],{"class":622},[617,3897,3898],{"class":619,"line":2745},[617,3899,722],{"emptyLinePlaceholder":574},[617,3901,3903,3905,3907,3909,3911,3913,3916,3918,3920,3922,3924,3927,3929],{"class":619,"line":3902},31,[617,3904,761],{"class":622},[617,3906,836],{"class":626},[617,3908,3795],{"class":630},[617,3910,637],{"class":622},[617,3912,640],{"class":622},[617,3914,3915],{"class":643},"sphere",[617,3917,640],{"class":622},[617,3919,1465],{"class":630},[617,3921,637],{"class":622},[617,3923,640],{"class":622},[617,3925,3926],{"class":643},"[1.2, 0, 0]",[617,3928,640],{"class":622},[617,3930,649],{"class":622},[617,3932,3934,3936,3939,3941,3943,3945,3948,3950],{"class":619,"line":3933},32,[617,3935,833],{"class":622},[617,3937,3938],{"class":626},"TresSphereGeometry",[617,3940,1939],{"class":630},[617,3942,637],{"class":622},[617,3944,640],{"class":622},[617,3946,3947],{"class":643},"[0.7]",[617,3949,640],{"class":622},[617,3951,767],{"class":622},[617,3953,3955,3957,3959,3961,3963,3965,3967,3969],{"class":619,"line":3954},33,[617,3956,833],{"class":622},[617,3958,2666],{"class":626},[617,3960,2669],{"class":630},[617,3962,637],{"class":622},[617,3964,640],{"class":622},[617,3966,2676],{"class":643},[617,3968,640],{"class":622},[617,3970,767],{"class":622},[617,3972,3974,3976,3978,3980,3982,3984,3987,3989,3991,3993,3995,3997,3999,4001],{"class":619,"line":3973},34,[617,3975,833],{"class":622},[617,3977,49],{"class":626},[617,3979,2702],{"class":630},[617,3981,637],{"class":622},[617,3983,640],{"class":622},[617,3985,3986],{"class":643},"layout.sphere",[617,3988,640],{"class":622},[617,3990,2714],{"class":630},[617,3992,637],{"class":622},[617,3994,640],{"class":622},[617,3996,2933],{"class":643},[617,3998,640],{"class":622},[617,4000,3885],{"class":630},[617,4002,767],{"class":622},[617,4004,4006,4008,4010],{"class":619,"line":4005},35,[617,4007,875],{"class":622},[617,4009,836],{"class":626},[617,4011,649],{"class":622},[617,4013,4015,4017,4019],{"class":619,"line":4014},36,[617,4016,885],{"class":622},[617,4018,741],{"class":626},[617,4020,649],{"class":622},[617,4022,4024,4026,4028],{"class":619,"line":4023},37,[617,4025,712],{"class":622},[617,4027,730],{"class":626},[617,4029,649],{"class":622},[4031,4032,4034],"h3",{"id":4033},"how-the-wiring-works","How the wiring works",[2193,4036,4037,4048,4057,4066],{},[2196,4038,4039,4042,4043,4045,4046,1126],{},[598,4040,4041],{},"v-model:data=\"layout.cube\""," — each ",[598,4044,2190],{}," owns one slice of the\nlayout object. The slice's key matches the parent mesh's ",[598,4047,2951],{},[2196,4049,4050,4053,4054,4056],{},[598,4051,4052],{},"ref=\"decalRef\""," — grab a reference to any ",[598,4055,2190],{}," in the canvas;\nthe session is canvas-shared so it doesn't matter which.",[2196,4058,4059,4062,4063,4065],{},[598,4060,4061],{},"session = decalRef.value?.editor"," — the editor session powers\n",[598,4064,2205],{},". Pass it through.",[2196,4067,4068,4071,4072,4074],{},[598,4069,4070],{},":data=\"layout\""," on ",[598,4073,2205],{}," — the full mesh-keyed layout, so\nthe overlay can render the layer panel and route imports back to each\nDecal by name.",[1985,4076,4077],{},[594,4078,4079,4080,4083,4084,4087],{},"The overlay is full-viewport (",[598,4081,4082],{},"position: fixed; inset: 0",") by default.\nWhen embedding inside a bounded stage (docs, modal, sidebar preview),\npass ",[598,4085,4086],{},"contained"," so the overlay positions itself absolutely against\nthe nearest positioned ancestor instead.",[606,4089,4091],{"className":608,"code":4090,"language":613,"meta":556,"style":556},"\u003Cdiv style=\"position: relative; height: 500px;\">\n \u003CDecalDebugUI contained ... />\n \u003CTresCanvas>...\u003C/TresCanvas>\n\u003C/div>\n",[598,4092,4093,4133,4138,4143],{"__ignoreMap":556},[617,4094,4095,4097,4100,4103,4105,4107,4111,4113,4116,4119,4122,4124,4127,4129,4131],{"class":619,"line":557},[617,4096,623],{"class":622},[617,4098,4099],{"class":626},"div",[617,4101,4102],{"class":630}," style",[617,4104,637],{"class":622},[617,4106,640],{"class":622},[617,4108,4110],{"class":4109},"sqsOY","position",[617,4112,1198],{"class":622},[617,4114,4115],{"class":663}," relative",[617,4117,4118],{"class":622},";",[617,4120,4121],{"class":4109}," height",[617,4123,1198],{"class":622},[617,4125,4126],{"class":2481}," 500px",[617,4128,4118],{"class":622},[617,4130,640],{"class":622},[617,4132,649],{"class":622},[617,4134,4135],{"class":619,"line":558},[617,4136,4137],{"class":663}," \u003CDecalDebugUI contained ... />\n",[617,4139,4140],{"class":619,"line":688},[617,4141,4142],{"class":663}," \u003CTresCanvas>...\u003C/TresCanvas>\n",[617,4144,4145,4147,4149],{"class":619,"line":709},[617,4146,712],{"class":622},[617,4148,4099],{"class":626},[617,4150,649],{"class":622},[484,4152,3359],{"id":4153},"import-export",[594,4155,4156,4157,4160,4161,4163],{},"The Export button in the dock auto-downloads the current layout as\n",[598,4158,4159],{},"decal-layout-YYYY-MM-DD.json",". The Import button opens a file picker;\nthe loaded JSON is sanitised (unknown mesh keys and unknown texture\nnames are dropped with a warning) and routed back through each\n",[598,4162,2190],{}," automatically — no extra host code needed.",[606,4165,4167],{"className":608,"code":4166,"language":613,"meta":556,"style":556},"\u003C!-- Custom filename -->\n\u003CDecalDebugUI :export-filename=\"`${sceneName}.json`\" ... />\n\n\u003C!-- Disable the built-in download — handle export yourself -->\n\u003CDecalDebugUI :export-filename=\"null\" @export=\"postToBackend\" ... />\n",[598,4168,4169,4174,4205,4209,4214],{"__ignoreMap":556},[617,4170,4171],{"class":619,"line":557},[617,4172,4173],{"class":1189},"\u003C!-- Custom filename -->\n",[617,4175,4176,4178,4180,4182,4185,4187,4190,4193,4195,4197,4200,4203],{"class":619,"line":558},[617,4177,623],{"class":622},[617,4179,3705],{"class":626},[617,4181,3009],{"class":622},[617,4183,4184],{"class":630},"export-filename",[617,4186,637],{"class":622},[617,4188,4189],{"class":622},"\"`${",[617,4191,4192],{"class":663},"sceneName",[617,4194,2408],{"class":622},[617,4196,2766],{"class":643},[617,4198,4199],{"class":622},"`\"",[617,4201,4202],{"class":622}," ...",[617,4204,767],{"class":622},[617,4206,4207],{"class":619,"line":688},[617,4208,722],{"emptyLinePlaceholder":574},[617,4210,4211],{"class":619,"line":709},[617,4212,4213],{"class":1189},"\u003C!-- Disable the built-in download — handle export yourself -->\n",[617,4215,4216,4218,4220,4222,4224,4226,4228,4230,4232,4235,4237,4239,4241,4244,4246,4248],{"class":619,"line":719},[617,4217,623],{"class":622},[617,4219,3705],{"class":626},[617,4221,3009],{"class":622},[617,4223,4184],{"class":630},[617,4225,637],{"class":622},[617,4227,640],{"class":622},[617,4229,3636],{"class":622},[617,4231,640],{"class":622},[617,4233,4234],{"class":622}," @",[617,4236,1174],{"class":630},[617,4238,637],{"class":622},[617,4240,640],{"class":622},[617,4242,4243],{"class":663},"postToBackend",[617,4245,640],{"class":622},[617,4247,4202],{"class":622},[617,4249,767],{"class":622},[484,4251,4253,4254,3320],{"id":4252},"targeting-a-loaded-model-glb","Targeting a loaded model (",[598,4255,4256],{},".glb",[594,4258,4259,4260,4262,4263,4269,4270,4273,4274,4276],{},"A ",[598,4261,2190],{}," can be a ",[1649,4264,4265,4266],{},"direct child of ",[598,4267,4268],{},"\u003Cprimitive>",". Auto-resolution\nwalks one step up the scene graph and only accepts a ",[598,4271,4272],{},"Mesh"," — so the\nbehaviour depends on what the ",[598,4275,4268],{}," wraps.",[4031,4278,4280,4281,4284,4285],{"id":4279},"when-object-is-a-mesh","When ",[598,4282,4283],{},":object"," is a ",[598,4286,4272],{},[594,4288,4289],{},"The decal auto-resolves the wrapped mesh as its target. This is the\nsimplest option for a single-mesh asset:",[606,4291,4293],{"className":608,"code":4292,"language":613,"meta":556,"style":556},"\u003Cscript setup lang=\"ts\">\nimport { Decal, useGLTF } from '@tresjs/cientos'\n\nconst { nodes } = useGLTF('/models/helmet.glb', { draco: true })\n// nodes.Helmet is a Mesh in this asset.\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cprimitive v-if=\"nodes?.Helmet\" :object=\"nodes.Helmet\">\n \u003CDecal v-model:data=\"layout.helmet\" :map=\"textures\" editable />\n \u003C/primitive>\n\u003C/template>\n",[598,4294,4295,4315,4338,4342,4383,4388,4396,4400,4408,4440,4471,4479],{"__ignoreMap":556},[617,4296,4297,4299,4301,4303,4305,4307,4309,4311,4313],{"class":619,"line":557},[617,4298,623],{"class":622},[617,4300,627],{"class":626},[617,4302,631],{"class":630},[617,4304,634],{"class":630},[617,4306,637],{"class":622},[617,4308,640],{"class":622},[617,4310,644],{"class":643},[617,4312,640],{"class":622},[617,4314,649],{"class":622},[617,4316,4317,4319,4321,4323,4325,4328,4330,4332,4334,4336],{"class":619,"line":558},[617,4318,657],{"class":656},[617,4320,660],{"class":622},[617,4322,2330],{"class":663},[617,4324,667],{"class":622},[617,4326,4327],{"class":663}," useGLTF",[617,4329,673],{"class":622},[617,4331,676],{"class":656},[617,4333,679],{"class":622},[617,4335,682],{"class":643},[617,4337,685],{"class":622},[617,4339,4340],{"class":619,"line":688},[617,4341,722],{"emptyLinePlaceholder":574},[617,4343,4344,4346,4348,4351,4353,4355,4357,4359,4361,4364,4366,4368,4370,4373,4375,4379,4381],{"class":619,"line":709},[617,4345,2395],{"class":630},[617,4347,660],{"class":622},[617,4349,4350],{"class":663}," nodes ",[617,4352,2408],{"class":622},[617,4354,2411],{"class":622},[617,4356,4327],{"class":2414},[617,4358,2417],{"class":663},[617,4360,2420],{"class":622},[617,4362,4363],{"class":643},"/models/helmet.glb",[617,4365,2420],{"class":622},[617,4367,667],{"class":622},[617,4369,660],{"class":622},[617,4371,4372],{"class":626}," draco",[617,4374,1198],{"class":622},[617,4376,4378],{"class":4377},"sfNiH"," true",[617,4380,673],{"class":622},[617,4382,2428],{"class":663},[617,4384,4385],{"class":619,"line":719},[617,4386,4387],{"class":1189},"// nodes.Helmet is a Mesh in this asset.\n",[617,4389,4390,4392,4394],{"class":619,"line":725},[617,4391,712],{"class":622},[617,4393,627],{"class":626},[617,4395,649],{"class":622},[617,4397,4398],{"class":619,"line":735},[617,4399,722],{"emptyLinePlaceholder":574},[617,4401,4402,4404,4406],{"class":619,"line":758},[617,4403,623],{"class":622},[617,4405,730],{"class":626},[617,4407,649],{"class":622},[617,4409,4410,4412,4415,4417,4419,4421,4424,4426,4429,4431,4433,4436,4438],{"class":619,"line":770},[617,4411,738],{"class":622},[617,4413,4414],{"class":626},"primitive",[617,4416,2690],{"class":630},[617,4418,637],{"class":622},[617,4420,640],{"class":622},[617,4422,4423],{"class":643},"nodes?.Helmet",[617,4425,640],{"class":622},[617,4427,4428],{"class":630}," :object",[617,4430,637],{"class":622},[617,4432,640],{"class":622},[617,4434,4435],{"class":643},"nodes.Helmet",[617,4437,640],{"class":622},[617,4439,649],{"class":622},[617,4441,4442,4444,4446,4448,4450,4452,4455,4457,4459,4461,4463,4465,4467,4469],{"class":619,"line":780},[617,4443,761],{"class":622},[617,4445,49],{"class":626},[617,4447,2702],{"class":630},[617,4449,637],{"class":622},[617,4451,640],{"class":622},[617,4453,4454],{"class":643},"layout.helmet",[617,4456,640],{"class":622},[617,4458,2714],{"class":630},[617,4460,637],{"class":622},[617,4462,640],{"class":622},[617,4464,2933],{"class":643},[617,4466,640],{"class":622},[617,4468,3885],{"class":630},[617,4470,767],{"class":622},[617,4472,4473,4475,4477],{"class":619,"line":785},[617,4474,885],{"class":622},[617,4476,4414],{"class":626},[617,4478,649],{"class":622},[617,4480,4481,4483,4485],{"class":619,"line":807},[617,4482,712],{"class":622},[617,4484,730],{"class":626},[617,4486,649],{"class":622},[1985,4488,4489],{},[594,4490,4491,4492,4494,4495,4498],{},"The resolved parent is the ",[598,4493,4268],{},"'s retargeting proxy rather than\nthe raw object. This is transparent in practice — geometry, ",[598,4496,4497],{},"matrixWorld","\nand raycasting all forward to the wrapped object — so the decal projects\nand follows transforms correctly.",[4031,4500,4280,4502,4284,4504],{"id":4501},"when-object-is-a-group",[598,4503,4283],{},[598,4505,4506],{},"Group",[594,4508,4509,4510,4512,4513,4515,4516,4518,4519,1198],{},"A named node in a ",[598,4511,4256],{}," is often a ",[598,4514,4506],{}," containing several child\nmeshes (e.g. a ceramic body + a metallic interior). Auto-resolution\nreturns ",[598,4517,3636],{}," in that case and the decal silently does nothing — pass\nthe actual target child via ",[598,4520,4521],{},":mesh",[606,4523,4525],{"className":608,"code":4524,"language":613,"meta":556,"style":556},"\u003Cscript setup lang=\"ts\">\nimport { Decal, useGLTF } from '@tresjs/cientos'\nimport { computed } from 'vue'\nimport type { Mesh } from 'three'\n\nconst { nodes } = useGLTF('/models/mug.glb', { draco: true })\n// nodes.Mug is a Group — pick the child you want to decal.\nconst body = computed\u003CMesh | null>(\n () => (nodes.value?.Mug?.getObjectByName('Body') as Mesh) ?? null,\n)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cprimitive v-if=\"nodes?.Mug\" :object=\"nodes.Mug\">\n \u003CDecal v-model:data=\"layout.mug\" :map=\"textures\" :mesh=\"body\" editable />\n \u003C/primitive>\n\u003C/template>\n",[598,4526,4527,4547,4569,4587,4609,4613,4650,4655,4679,4727,4731,4739,4743,4751,4781,4824,4832],{"__ignoreMap":556},[617,4528,4529,4531,4533,4535,4537,4539,4541,4543,4545],{"class":619,"line":557},[617,4530,623],{"class":622},[617,4532,627],{"class":626},[617,4534,631],{"class":630},[617,4536,634],{"class":630},[617,4538,637],{"class":622},[617,4540,640],{"class":622},[617,4542,644],{"class":643},[617,4544,640],{"class":622},[617,4546,649],{"class":622},[617,4548,4549,4551,4553,4555,4557,4559,4561,4563,4565,4567],{"class":619,"line":558},[617,4550,657],{"class":656},[617,4552,660],{"class":622},[617,4554,2330],{"class":663},[617,4556,667],{"class":622},[617,4558,4327],{"class":663},[617,4560,673],{"class":622},[617,4562,676],{"class":656},[617,4564,679],{"class":622},[617,4566,682],{"class":643},[617,4568,685],{"class":622},[617,4570,4571,4573,4575,4577,4579,4581,4583,4585],{"class":619,"line":688},[617,4572,657],{"class":656},[617,4574,660],{"class":622},[617,4576,3469],{"class":663},[617,4578,673],{"class":622},[617,4580,676],{"class":656},[617,4582,679],{"class":622},[617,4584,613],{"class":643},[617,4586,685],{"class":622},[617,4588,4589,4591,4593,4595,4598,4600,4602,4604,4607],{"class":619,"line":709},[617,4590,657],{"class":656},[617,4592,3422],{"class":656},[617,4594,660],{"class":622},[617,4596,4597],{"class":663}," Mesh",[617,4599,673],{"class":622},[617,4601,676],{"class":656},[617,4603,679],{"class":622},[617,4605,4606],{"class":643},"three",[617,4608,685],{"class":622},[617,4610,4611],{"class":619,"line":719},[617,4612,722],{"emptyLinePlaceholder":574},[617,4614,4615,4617,4619,4621,4623,4625,4627,4629,4631,4634,4636,4638,4640,4642,4644,4646,4648],{"class":619,"line":725},[617,4616,2395],{"class":630},[617,4618,660],{"class":622},[617,4620,4350],{"class":663},[617,4622,2408],{"class":622},[617,4624,2411],{"class":622},[617,4626,4327],{"class":2414},[617,4628,2417],{"class":663},[617,4630,2420],{"class":622},[617,4632,4633],{"class":643},"/models/mug.glb",[617,4635,2420],{"class":622},[617,4637,667],{"class":622},[617,4639,660],{"class":622},[617,4641,4372],{"class":626},[617,4643,1198],{"class":622},[617,4645,4378],{"class":4377},[617,4647,673],{"class":622},[617,4649,2428],{"class":663},[617,4651,4652],{"class":619,"line":735},[617,4653,4654],{"class":1189},"// nodes.Mug is a Group — pick the child you want to decal.\n",[617,4656,4657,4659,4662,4664,4666,4668,4670,4672,4674,4676],{"class":619,"line":758},[617,4658,2395],{"class":630},[617,4660,4661],{"class":663}," body ",[617,4663,637],{"class":622},[617,4665,3469],{"class":2414},[617,4667,623],{"class":622},[617,4669,4272],{"class":1180},[617,4671,3625],{"class":622},[617,4673,3628],{"class":1180},[617,4675,3631],{"class":622},[617,4677,4678],{"class":663},"(\n",[617,4680,4681,4684,4686,4689,4691,4693,4695,4698,4700,4703,4705,4707,4710,4712,4715,4718,4720,4722,4724],{"class":619,"line":770},[617,4682,4683],{"class":622}," ()",[617,4685,3657],{"class":630},[617,4687,4688],{"class":663}," (nodes",[617,4690,1126],{"class":622},[617,4692,3665],{"class":663},[617,4694,3668],{"class":622},[617,4696,4697],{"class":663},"Mug",[617,4699,3668],{"class":622},[617,4701,4702],{"class":2414},"getObjectByName",[617,4704,2417],{"class":663},[617,4706,2420],{"class":622},[617,4708,4709],{"class":643},"Body",[617,4711,2420],{"class":622},[617,4713,4714],{"class":663},") ",[617,4716,4717],{"class":656},"as",[617,4719,4597],{"class":1180},[617,4721,4714],{"class":663},[617,4723,3674],{"class":622},[617,4725,4726],{"class":622}," null,\n",[617,4728,4729],{"class":619,"line":780},[617,4730,2428],{"class":663},[617,4732,4733,4735,4737],{"class":619,"line":785},[617,4734,712],{"class":622},[617,4736,627],{"class":626},[617,4738,649],{"class":622},[617,4740,4741],{"class":619,"line":807},[617,4742,722],{"emptyLinePlaceholder":574},[617,4744,4745,4747,4749],{"class":619,"line":611},[617,4746,623],{"class":622},[617,4748,730],{"class":626},[617,4750,649],{"class":622},[617,4752,4753,4755,4757,4759,4761,4763,4766,4768,4770,4772,4774,4777,4779],{"class":619,"line":830},[617,4754,738],{"class":622},[617,4756,4414],{"class":626},[617,4758,2690],{"class":630},[617,4760,637],{"class":622},[617,4762,640],{"class":622},[617,4764,4765],{"class":643},"nodes?.Mug",[617,4767,640],{"class":622},[617,4769,4428],{"class":630},[617,4771,637],{"class":622},[617,4773,640],{"class":622},[617,4775,4776],{"class":643},"nodes.Mug",[617,4778,640],{"class":622},[617,4780,649],{"class":622},[617,4782,4783,4785,4787,4789,4791,4793,4796,4798,4800,4802,4804,4806,4808,4811,4813,4815,4818,4820,4822],{"class":619,"line":841},[617,4784,761],{"class":622},[617,4786,49],{"class":626},[617,4788,2702],{"class":630},[617,4790,637],{"class":622},[617,4792,640],{"class":622},[617,4794,4795],{"class":643},"layout.mug",[617,4797,640],{"class":622},[617,4799,2714],{"class":630},[617,4801,637],{"class":622},[617,4803,640],{"class":622},[617,4805,2933],{"class":643},[617,4807,640],{"class":622},[617,4809,4810],{"class":630}," :mesh",[617,4812,637],{"class":622},[617,4814,640],{"class":622},[617,4816,4817],{"class":643},"body",[617,4819,640],{"class":622},[617,4821,3885],{"class":630},[617,4823,767],{"class":622},[617,4825,4826,4828,4830],{"class":619,"line":852},[617,4827,885],{"class":622},[617,4829,4414],{"class":626},[617,4831,649],{"class":622},[617,4833,4834,4836,4838],{"class":619,"line":862},[617,4835,712],{"class":622},[617,4837,730],{"class":626},[617,4839,649],{"class":622},[4031,4841,4843],{"id":4842},"targeting-an-extracted-sub-mesh","Targeting an extracted sub-mesh",[594,4845,4846,4847,4853,4854,4861,4862,4864,4865,1198],{},"Alternatively, ",[1649,4848,4849,4850,4852],{},"wrap a ",[598,4851,2290],{}," around an extracted sub-mesh",". Reach\nfor this when you need to target one named sub-mesh of a larger model (and\nkeep its material): use\n",[1120,4855,4858],{"href":4856,"rel":4857},"https://docs.tresjs.org/api/composables.html#usegraph",[1124],[598,4859,4860],{},"useGraph"," to\npull the sub-mesh, then build a regular ",[598,4863,2290],{}," around its\n",[598,4866,4867],{},":geometry",[606,4869,4871],{"className":608,"code":4870,"language":613,"meta":556,"style":556},"\u003Cscript setup lang=\"ts\">\nimport { useGraph, useLoader } from '@tresjs/core'\nimport { Decal } from '@tresjs/cientos'\nimport { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'\nimport { computed } from 'vue'\n\nconst { state: model } = useLoader(GLTFLoader, '/models/helmet.glb')\nconst scene = computed(() => model.value?.scene)\nconst graph = useGraph(scene)\nconst nodes = computed(() => graph.value?.nodes)\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresMesh\n v-if=\"nodes?.Helmet.geometry\"\n name=\"helmet\"\n :geometry=\"nodes.Helmet.geometry\"\n >\n \u003Cprimitive :object=\"nodes.Helmet.material\" attach=\"material\" />\n \u003CDecal v-model:data=\"layout.helmet\" :map=\"textures\" editable />\n \u003C/TresMesh>\n\u003C/template>\n",[598,4872,4873,4893,4917,4935,4955,4973,4977,5009,5038,5052,5080,5088,5092,5100,5107,5121,5135,5149,5154,5185,5215,5223],{"__ignoreMap":556},[617,4874,4875,4877,4879,4881,4883,4885,4887,4889,4891],{"class":619,"line":557},[617,4876,623],{"class":622},[617,4878,627],{"class":626},[617,4880,631],{"class":630},[617,4882,634],{"class":630},[617,4884,637],{"class":622},[617,4886,640],{"class":622},[617,4888,644],{"class":643},[617,4890,640],{"class":622},[617,4892,649],{"class":622},[617,4894,4895,4897,4899,4902,4904,4907,4909,4911,4913,4915],{"class":619,"line":558},[617,4896,657],{"class":656},[617,4898,660],{"class":622},[617,4900,4901],{"class":663}," useGraph",[617,4903,667],{"class":622},[617,4905,4906],{"class":663}," useLoader",[617,4908,673],{"class":622},[617,4910,676],{"class":656},[617,4912,679],{"class":622},[617,4914,704],{"class":643},[617,4916,685],{"class":622},[617,4918,4919,4921,4923,4925,4927,4929,4931,4933],{"class":619,"line":688},[617,4920,657],{"class":656},[617,4922,660],{"class":622},[617,4924,2330],{"class":663},[617,4926,673],{"class":622},[617,4928,676],{"class":656},[617,4930,679],{"class":622},[617,4932,682],{"class":643},[617,4934,685],{"class":622},[617,4936,4937,4939,4941,4944,4946,4948,4950,4953],{"class":619,"line":709},[617,4938,657],{"class":656},[617,4940,660],{"class":622},[617,4942,4943],{"class":663}," GLTFLoader",[617,4945,673],{"class":622},[617,4947,676],{"class":656},[617,4949,679],{"class":622},[617,4951,4952],{"class":643},"three/examples/jsm/loaders/GLTFLoader.js",[617,4954,685],{"class":622},[617,4956,4957,4959,4961,4963,4965,4967,4969,4971],{"class":619,"line":719},[617,4958,657],{"class":656},[617,4960,660],{"class":622},[617,4962,3469],{"class":663},[617,4964,673],{"class":622},[617,4966,676],{"class":656},[617,4968,679],{"class":622},[617,4970,613],{"class":643},[617,4972,685],{"class":622},[617,4974,4975],{"class":619,"line":725},[617,4976,722],{"emptyLinePlaceholder":574},[617,4978,4979,4981,4983,4985,4987,4990,4992,4994,4996,4999,5001,5003,5005,5007],{"class":619,"line":735},[617,4980,2395],{"class":630},[617,4982,660],{"class":622},[617,4984,2400],{"class":626},[617,4986,1198],{"class":622},[617,4988,4989],{"class":663}," model ",[617,4991,2408],{"class":622},[617,4993,2411],{"class":622},[617,4995,4906],{"class":2414},[617,4997,4998],{"class":663},"(GLTFLoader",[617,5000,667],{"class":622},[617,5002,679],{"class":622},[617,5004,4363],{"class":643},[617,5006,2420],{"class":622},[617,5008,2428],{"class":663},[617,5010,5011,5013,5016,5018,5020,5022,5024,5026,5029,5031,5033,5035],{"class":619,"line":758},[617,5012,2395],{"class":630},[617,5014,5015],{"class":663}," scene ",[617,5017,637],{"class":622},[617,5019,3469],{"class":2414},[617,5021,2417],{"class":663},[617,5023,3654],{"class":622},[617,5025,3657],{"class":630},[617,5027,5028],{"class":663}," model",[617,5030,1126],{"class":622},[617,5032,3665],{"class":663},[617,5034,3668],{"class":622},[617,5036,5037],{"class":663},"scene)\n",[617,5039,5040,5042,5045,5047,5049],{"class":619,"line":770},[617,5041,2395],{"class":630},[617,5043,5044],{"class":663}," graph ",[617,5046,637],{"class":622},[617,5048,4901],{"class":2414},[617,5050,5051],{"class":663},"(scene)\n",[617,5053,5054,5056,5058,5060,5062,5064,5066,5068,5071,5073,5075,5077],{"class":619,"line":780},[617,5055,2395],{"class":630},[617,5057,4350],{"class":663},[617,5059,637],{"class":622},[617,5061,3469],{"class":2414},[617,5063,2417],{"class":663},[617,5065,3654],{"class":622},[617,5067,3657],{"class":630},[617,5069,5070],{"class":663}," graph",[617,5072,1126],{"class":622},[617,5074,3665],{"class":663},[617,5076,3668],{"class":622},[617,5078,5079],{"class":663},"nodes)\n",[617,5081,5082,5084,5086],{"class":619,"line":785},[617,5083,712],{"class":622},[617,5085,627],{"class":626},[617,5087,649],{"class":622},[617,5089,5090],{"class":619,"line":807},[617,5091,722],{"emptyLinePlaceholder":574},[617,5093,5094,5096,5098],{"class":619,"line":611},[617,5095,623],{"class":622},[617,5097,730],{"class":626},[617,5099,649],{"class":622},[617,5101,5102,5104],{"class":619,"line":830},[617,5103,738],{"class":622},[617,5105,5106],{"class":626},"TresMesh\n",[617,5108,5109,5112,5114,5116,5119],{"class":619,"line":841},[617,5110,5111],{"class":630}," v-if",[617,5113,637],{"class":622},[617,5115,640],{"class":622},[617,5117,5118],{"class":643},"nodes?.Helmet.geometry",[617,5120,3111],{"class":622},[617,5122,5123,5126,5128,5130,5133],{"class":619,"line":852},[617,5124,5125],{"class":630}," name",[617,5127,637],{"class":622},[617,5129,640],{"class":622},[617,5131,5132],{"class":643},"helmet",[617,5134,3111],{"class":622},[617,5136,5137,5140,5142,5144,5147],{"class":619,"line":862},[617,5138,5139],{"class":630}," :geometry",[617,5141,637],{"class":622},[617,5143,640],{"class":622},[617,5145,5146],{"class":643},"nodes.Helmet.geometry",[617,5148,3111],{"class":622},[617,5150,5151],{"class":619,"line":612},[617,5152,5153],{"class":622}," >\n",[617,5155,5156,5158,5160,5162,5164,5166,5169,5171,5174,5176,5178,5181,5183],{"class":619,"line":882},[617,5157,761],{"class":622},[617,5159,4414],{"class":626},[617,5161,4428],{"class":630},[617,5163,637],{"class":622},[617,5165,640],{"class":622},[617,5167,5168],{"class":643},"nodes.Helmet.material",[617,5170,640],{"class":622},[617,5172,5173],{"class":630}," attach",[617,5175,637],{"class":622},[617,5177,640],{"class":622},[617,5179,5180],{"class":643},"material",[617,5182,640],{"class":622},[617,5184,767],{"class":622},[617,5186,5187,5189,5191,5193,5195,5197,5199,5201,5203,5205,5207,5209,5211,5213],{"class":619,"line":892},[617,5188,761],{"class":622},[617,5190,49],{"class":626},[617,5192,2702],{"class":630},[617,5194,637],{"class":622},[617,5196,640],{"class":622},[617,5198,4454],{"class":643},[617,5200,640],{"class":622},[617,5202,2714],{"class":630},[617,5204,637],{"class":622},[617,5206,640],{"class":622},[617,5208,2933],{"class":643},[617,5210,640],{"class":622},[617,5212,3885],{"class":630},[617,5214,767],{"class":622},[617,5216,5217,5219,5221],{"class":619,"line":2605},[617,5218,885],{"class":622},[617,5220,836],{"class":626},[617,5222,649],{"class":622},[617,5224,5225,5227,5229],{"class":619,"line":2614},[617,5226,712],{"class":622},[617,5228,730],{"class":626},[617,5230,649],{"class":622},[594,5232,5233,5234,3043,5237,5239,5240,5242,5243,5245],{},"The mesh's ",[598,5235,5236],{},"geometry",[598,5238,5180],{}," come from the loaded model; the\n",[598,5241,2190],{}," lives inside a regular ",[598,5244,2290],{}," with a clean scene-graph\nparent.",[3179,5247,5248],{},[594,5249,5250,5251,5253,5254,5257,5258,5261,5262,5265],{},"A saved decal's ",[598,5252,4110],{}," is stored in ",[1649,5255,5256],{},"world space",", so it is\nre-projected onto the parent using the parent's transform ",[1649,5259,5260],{},"at load\ntime",". A persisted layout therefore only round-trips if the parent sits\nat the same transform it had when the decal was authored. Parents under a\ncontinuously- or randomly-animated wrapper (e.g. ",[598,5263,5264],{},"\u003CLevioso>",", which starts\nat a random phase each reload) move out from under the saved point, so the\nprojection clips to nothing and the decal vanishes. Author and persist\ndecals on parents whose transform is deterministic at load time, or apply\nthe animation only after the layout has mounted.",[484,5267,5269],{"id":5268},"json-schema","JSON schema",[594,5271,5272,5273,5275,5276,5279,5280,5282,5283,1126],{},"Each entry in the ",[598,5274,2998],{}," array follows the ",[598,5277,5278],{},"DecalJsonEntry"," shape; the\nlayout passed to ",[598,5281,2205],{}," groups these by mesh name as\n",[598,5284,5285],{},"DecalLayout = Record\u003Cstring, DecalJsonEntry[]>",[5287,5288,5289,5290,5294],"details",{},"\n ",[5291,5292,5293],"summary",{},"Full schema",[606,5295,5297],{"className":1166,"code":5296,"language":644,"meta":556,"style":556},"interface DecalJsonEntry {\n id: string // stable UUID\n position: [number, number, number] // target-mesh local space (raycast hit, baked into the parent's frame)\n orientation: [number, number, number] // Euler XYZ\n size: [number, number, number] // extents along X/Y; Z = projection depth\n zIndex: number // per-mesh layer order, ≥ 0\n map: string | null // matches a texture's .name\n flipX?: boolean // omitted when false\n flipY?: boolean // omitted when false\n color?: string // hex (e.g. '#ff6b35'), omitted when no tint\n opacity?: number // 0..1, omitted when 1\n visible?: boolean // omitted when true; false hides the decal\n}\n\ntype DecalLayout = Record\u003Cstring, DecalJsonEntry[]>\n// { sphere: [...], cube: [...] }\n",[598,5298,5299,5308,5321,5348,5372,5396,5408,5424,5438,5449,5461,5473,5485,5489,5493,5518],{"__ignoreMap":556},[617,5300,5301,5304,5306],{"class":619,"line":557},[617,5302,5303],{"class":630},"interface",[617,5305,3432],{"class":1180},[617,5307,1184],{"class":622},[617,5309,5310,5313,5315,5318],{"class":619,"line":558},[617,5311,5312],{"class":626}," id",[617,5314,1198],{"class":622},[617,5316,5317],{"class":1180}," string",[617,5319,5320],{"class":1189}," // stable UUID\n",[617,5322,5323,5326,5328,5330,5333,5335,5338,5340,5342,5345],{"class":619,"line":688},[617,5324,5325],{"class":626}," position",[617,5327,1198],{"class":622},[617,5329,2478],{"class":663},[617,5331,5332],{"class":1180},"number",[617,5334,667],{"class":622},[617,5336,5337],{"class":1180}," number",[617,5339,667],{"class":622},[617,5341,5337],{"class":1180},[617,5343,5344],{"class":663},"] ",[617,5346,5347],{"class":1189},"// target-mesh local space (raycast hit, baked into the parent's frame)\n",[617,5349,5350,5353,5355,5357,5359,5361,5363,5365,5367,5369],{"class":619,"line":709},[617,5351,5352],{"class":626}," orientation",[617,5354,1198],{"class":622},[617,5356,2478],{"class":663},[617,5358,5332],{"class":1180},[617,5360,667],{"class":622},[617,5362,5337],{"class":1180},[617,5364,667],{"class":622},[617,5366,5337],{"class":1180},[617,5368,5344],{"class":663},[617,5370,5371],{"class":1189},"// Euler XYZ\n",[617,5373,5374,5377,5379,5381,5383,5385,5387,5389,5391,5393],{"class":619,"line":719},[617,5375,5376],{"class":626}," size",[617,5378,1198],{"class":622},[617,5380,2478],{"class":663},[617,5382,5332],{"class":1180},[617,5384,667],{"class":622},[617,5386,5337],{"class":1180},[617,5388,667],{"class":622},[617,5390,5337],{"class":1180},[617,5392,5344],{"class":663},[617,5394,5395],{"class":1189},"// extents along X/Y; Z = projection depth\n",[617,5397,5398,5401,5403,5405],{"class":619,"line":725},[617,5399,5400],{"class":626}," zIndex",[617,5402,1198],{"class":622},[617,5404,5337],{"class":1180},[617,5406,5407],{"class":1189}," // per-mesh layer order, ≥ 0\n",[617,5409,5410,5413,5415,5417,5419,5421],{"class":619,"line":735},[617,5411,5412],{"class":626}," map",[617,5414,1198],{"class":622},[617,5416,5317],{"class":1180},[617,5418,3625],{"class":622},[617,5420,3628],{"class":1180},[617,5422,5423],{"class":1189}," // matches a texture's .name\n",[617,5425,5426,5429,5432,5435],{"class":619,"line":758},[617,5427,5428],{"class":626}," flipX",[617,5430,5431],{"class":622},"?:",[617,5433,5434],{"class":1180}," boolean",[617,5436,5437],{"class":1189}," // omitted when false\n",[617,5439,5440,5443,5445,5447],{"class":619,"line":770},[617,5441,5442],{"class":626}," flipY",[617,5444,5431],{"class":622},[617,5446,5434],{"class":1180},[617,5448,5437],{"class":1189},[617,5450,5451,5454,5456,5458],{"class":619,"line":780},[617,5452,5453],{"class":626}," color",[617,5455,5431],{"class":622},[617,5457,5317],{"class":1180},[617,5459,5460],{"class":1189}," // hex (e.g. '#ff6b35'), omitted when no tint\n",[617,5462,5463,5466,5468,5470],{"class":619,"line":785},[617,5464,5465],{"class":626}," opacity",[617,5467,5431],{"class":622},[617,5469,5337],{"class":1180},[617,5471,5472],{"class":1189}," // 0..1, omitted when 1\n",[617,5474,5475,5478,5480,5482],{"class":619,"line":807},[617,5476,5477],{"class":626}," visible",[617,5479,5431],{"class":622},[617,5481,5434],{"class":1180},[617,5483,5484],{"class":1189}," // omitted when true; false hides the decal\n",[617,5486,5487],{"class":619,"line":611},[617,5488,1305],{"class":622},[617,5490,5491],{"class":619,"line":830},[617,5492,722],{"emptyLinePlaceholder":574},[617,5494,5495,5498,5501,5503,5506,5508,5510,5512,5514,5516],{"class":619,"line":841},[617,5496,5497],{"class":630},"type",[617,5499,5500],{"class":1180}," DecalLayout",[617,5502,2411],{"class":622},[617,5504,5505],{"class":1180}," Record",[617,5507,623],{"class":622},[617,5509,3552],{"class":1180},[617,5511,667],{"class":622},[617,5513,3432],{"class":1180},[617,5515,3559],{"class":663},[617,5517,649],{"class":622},[617,5519,5520],{"class":619,"line":852},[617,5521,5522],{"class":1189},"// { sphere: [...], cube: [...] }\n",[484,5524,5526,5528],{"id":5525},"decal-props",[598,5527,2190],{}," props",[907,5530,5531,5541],{},[910,5532,5533],{},[913,5534,5535,5537,5539],{},[916,5536,918],{},[916,5538,921],{},[916,5540,924],{},[926,5542,5543,5559,5579,5616,5634,5648,5662,5682,5710],{},[913,5544,5545,5549,5555],{},[931,5546,5547],{},[1649,5548,2998],{},[931,5550,5551,5552,5554],{},"Two-way list of stamped decals (use with ",[598,5553,2250],{},").",[931,5556,5557],{},[598,5558,3559],{},[913,5560,5561,5565,5575],{},[931,5562,5563],{},[1649,5564,2961],{},[931,5566,5567,5568,5570,5571,5574],{},"A single ",[598,5569,2229],{}," or array of ",[598,5572,5573],{},"Texture[]",". With multiple, the editor lets the user cycle through them as a palette.",[931,5576,5577],{},[598,5578,3636],{},[913,5580,5581,5586,5612],{},[931,5582,5583],{},[1649,5584,5585],{},"mesh",[931,5587,5588,5589,5591,5592,5595,5596,5598,5599,5602,5603,3316,5605,3316,5608,5611],{},"Optional explicit target mesh (",[598,5590,4272],{}," or ",[598,5593,5594],{},"ShallowRef\u003CMesh>","). When omitted, the scene-graph parent of ",[598,5597,2190],{}," is auto-resolved via a hidden anchor ",[598,5600,5601],{},"\u003CTresGroup>",". The decal mesh is imperatively parented to the target so it follows the target's runtime ",[598,5604,4110],{},[598,5606,5607],{},"rotation",[598,5609,5610],{},"scale"," via the scene-graph hierarchy.",[931,5613,5614],{},[598,5615,3636],{},[913,5617,5618,5622,5630],{},[931,5619,5620],{},[1649,5621,3166],{},[931,5623,4280,5624,5626,5627,5629],{},[598,5625,941],{},", mounts the interactive editor (raycast, hover, click-to-place, drag-from-thumbnail). Required for ",[598,5628,2205],{}," interactions to work on this Decal.",[931,5631,5632],{},[598,5633,951],{},[913,5635,5636,5641,5644],{},[931,5637,5638],{},[1649,5639,5640],{},"baseSize",[931,5642,5643],{},"Reference size used to derive each decal's size from the texture aspect ratio.",[931,5645,5646],{},[598,5647,1854],{},[913,5649,5650,5655,5658],{},[931,5651,5652],{},[1649,5653,5654],{},"baseOffset",[931,5656,5657],{},"Distance along the surface normal (parent units) to avoid z-fighting between the decal and the host mesh.",[931,5659,5660],{},[598,5661,1866],{},[913,5663,5664,5668,5677],{},[931,5665,5666],{},[1649,5667,3076],{},[931,5669,5670,5671,5673,5674,5676],{},"Extra offset added per ",[598,5672,2272],{}," step on top of ",[598,5675,5654],{},". Increase if stacked decals still flicker.",[931,5678,5679],{},[598,5680,5681],{},"0.001",[913,5683,5684,5689,5705],{},[931,5685,5686],{},[1649,5687,5688],{},"cullThreshold",[931,5690,5691,5692,5695,5696,5701,5702,5704],{},"Drops projected triangles whose face normal makes an angle steeper than ",[598,5693,5694],{},"acos(threshold)"," with the projector. Mitigates ",[1120,5697,5700],{"href":5698,"rel":5699},"https://github.com/mrdoob/three.js/issues/21187",[1124],"#21187",". Pass ",[598,5703,945],{}," to disable.",[931,5706,5707],{},[598,5708,5709],{},"0.2",[913,5711,5712,5717,5720],{},[931,5713,5714],{},[1649,5715,5716],{},"edgeColor",[931,5718,5719],{},"Color of the edge outline drawn around a decal while it is hovered (pointer or layer panel) in editable mode.",[931,5721,5722],{},[598,5723,5724],{},"#0000ff",[484,5726,5728,5730],{"id":5727},"decal-events",[598,5729,2190],{}," events",[907,5732,5733,5745],{},[910,5734,5735],{},[913,5736,5737,5740,5743],{},[916,5738,5739],{},"Event",[916,5741,5742],{},"Payload",[916,5744,921],{},[926,5746,5747,5762,5777,5791,5811,5829,5846],{},[913,5748,5749,5754,5759],{},[931,5750,5751],{},[598,5752,5753],{},"update:data",[931,5755,5756],{},[598,5757,5758],{},"DecalJsonEntry[]",[931,5760,5761],{},"v-model partner — fires whenever the JSON list changes.",[913,5763,5764,5769,5774],{},[931,5765,5766],{},[598,5767,5768],{},"add",[931,5770,5771],{},[598,5772,5773],{},"DecalEntry",[931,5775,5776],{},"A new decal has been committed (create mode → confirm).",[913,5778,5779,5784,5788],{},[931,5780,5781],{},[598,5782,5783],{},"update",[931,5785,5786],{},[598,5787,5773],{},[931,5789,5790],{},"An existing decal has been committed (update mode → confirm).",[913,5792,5793,5798,5802],{},[931,5794,5795],{},[598,5796,5797],{},"delete",[931,5799,5800],{},[598,5801,5773],{},[931,5803,5804,5805,3316,5808,5554],{},"A decal has been removed (delete button or ",[598,5806,5807],{},"Del",[598,5809,5810],{},"Backspace",[913,5812,5813,5818,5822],{},[931,5814,5815],{},[598,5816,5817],{},"select",[931,5819,5820],{},[598,5821,5773],{},[931,5823,5824,5825,5828],{},"Edition began on ",[598,5826,5827],{},"entry"," (panel click, 3D click, or programmatic).",[913,5830,5831,5836,5839],{},[931,5832,5833],{},[598,5834,5835],{},"cancel",[931,5837,5838],{},"—",[931,5840,5841,5842,5845],{},"Edition was aborted without commit (",[598,5843,5844],{},"Esc",", click-outside in create mode).",[913,5847,5848,5853,5858],{},[931,5849,5850],{},[598,5851,5852],{},"decalClick",[931,5854,5855],{},[598,5856,5857],{},"{ entry: DecalEntry, event: MouseEvent }",[931,5859,5860,5861,5863,5864,1126],{},"Fires on click of any stamped decal, even when ",[598,5862,3166],{}," is ",[598,5865,951],{},[484,5867,5869,5871,5872,3320],{"id":5868},"decal-exposed-via-ref",[598,5870,2190],{}," exposed (via ",[598,5873,5874],{},"ref",[594,5876,5877,5878,5881],{},"The template ref resolves to ",[598,5879,5880],{},"DecalImperativeApi"," — import the type for\nfull autocompletion:",[606,5883,5885],{"className":1166,"code":5884,"language":644,"meta":556,"style":556},"import type { DecalImperativeApi } from '@tresjs/cientos'\n\nconst decalRef = ref\u003CDecalImperativeApi | null>(null)\n",[598,5886,5887,5908,5912],{"__ignoreMap":556},[617,5888,5889,5891,5893,5895,5898,5900,5902,5904,5906],{"class":619,"line":557},[617,5890,657],{"class":656},[617,5892,3422],{"class":656},[617,5894,660],{"class":622},[617,5896,5897],{"class":663}," DecalImperativeApi",[617,5899,673],{"class":622},[617,5901,676],{"class":656},[617,5903,679],{"class":622},[617,5905,682],{"class":643},[617,5907,685],{"class":622},[617,5909,5910],{"class":619,"line":558},[617,5911,722],{"emptyLinePlaceholder":574},[617,5913,5914,5916,5918,5920,5922,5924,5926,5928,5930,5932,5934,5936],{"class":619,"line":688},[617,5915,2395],{"class":630},[617,5917,3606],{"class":663},[617,5919,637],{"class":622},[617,5921,3852],{"class":2414},[617,5923,623],{"class":622},[617,5925,5880],{"class":1180},[617,5927,3625],{"class":622},[617,5929,3628],{"class":1180},[617,5931,3631],{"class":622},[617,5933,2417],{"class":663},[617,5935,3636],{"class":622},[617,5937,2428],{"class":663},[907,5939,5940,5952],{},[910,5941,5942],{},[913,5943,5944,5947,5950],{},[916,5945,5946],{},"Property",[916,5948,5949],{},"Type",[916,5951,921],{},[926,5953,5954,5972,5990,6008,6023],{},[913,5955,5956,5961,5966],{},[931,5957,5958],{},[598,5959,5960],{},"editor",[931,5962,5963],{},[598,5964,5965],{},"DecalEditorSession",[931,5967,5968,5969,1126],{},"The canvas-shared editor session. Pass it to ",[598,5970,5971],{},"\u003CDecalDebugUI :session>",[913,5973,5974,5979,5984],{},[931,5975,5976],{},[598,5977,5978],{},"beginEditById",[931,5980,5981],{},[598,5982,5983],{},"(id: string) => boolean",[931,5985,5986,5987,5989],{},"Programmatically start editing a specific decal. Returns ",[598,5988,951],{}," if the id is unknown.",[913,5991,5992,5997,6002],{},[931,5993,5994],{},[598,5995,5996],{},"commit",[931,5998,5999],{},[598,6000,6001],{},"() => void",[931,6003,6004,6005,5554],{},"Commit the in-flight edit (same as ",[598,6006,6007],{},"Enter",[913,6009,6010,6014,6018],{},[931,6011,6012],{},[598,6013,5835],{},[931,6015,6016],{},[598,6017,6001],{},[931,6019,6020,6021,5554],{},"Abort the in-flight edit (same as ",[598,6022,5844],{},[913,6024,6025,6030,6034],{},[931,6026,6027],{},[598,6028,6029],{},"remove",[931,6031,6032],{},[598,6033,6001],{},[931,6035,6036,6037,5554],{},"Delete the currently edited decal (same as ",[598,6038,5807],{},[484,6040,6042,5528],{"id":6041},"decaldebugui-props",[598,6043,2205],{},[907,6045,6046,6056],{},[910,6047,6048],{},[913,6049,6050,6052,6054],{},[916,6051,918],{},[916,6053,921],{},[916,6055,924],{},[926,6057,6058,6081,6106,6119,6139,6154,6177],{},[913,6059,6060,6064,6077],{},[931,6061,6062],{},[1649,6063,3715],{},[931,6065,6066,6069,6070,6072,6073,6076],{},[598,6067,6068],{},"DecalEditorSession | null"," — obtained from any ",[598,6071,2190],{}," ref via ",[598,6074,6075],{},"decalRef.value?.editor",". Mandatory for the overlay to wire up the interactive logic.",[931,6078,6079],{},[598,6080,3636],{},[913,6082,6083,6087,6101],{},[931,6084,6085],{},[1649,6086,2998],{},[931,6088,6089,6090,6093,6094,6097,6098,6100],{},"Mesh-name-keyed map of decal slices — ",[598,6091,6092],{},"{ sphere: [...], cube: [...] }",". Each key matches a ",[598,6095,6096],{},"\u003CTresMesh name=\"...\">"," whose child ",[598,6099,2190],{}," owns the slice.",[931,6102,6103],{},[598,6104,6105],{},"{}",[913,6107,6108,6112,6115],{},[931,6109,6110],{},[1649,6111,2933],{},[931,6113,6114],{},"The full texture palette shown in the dock's picker.",[931,6116,6117],{},[598,6118,3559],{},[913,6120,6121,6126,6135],{},[931,6122,6123],{},[1649,6124,6125],{},"theme",[931,6127,6128,5591,6131,6134],{},[598,6129,6130],{},"'light'",[598,6132,6133],{},"'dark'"," — overlay theme tokens.",[931,6136,6137],{},[598,6138,6130],{},[913,6140,6141,6146,6149],{},[931,6142,6143],{},[1649,6144,6145],{},"snapAngle",[931,6147,6148],{},"Rotation step (degrees) applied when the snap toggle is on. Snap-tick ring on the handle adapts automatically.",[931,6150,6151],{},[598,6152,6153],{},"15",[913,6155,6156,6161,6173],{},[931,6157,6158],{},[1649,6159,6160],{},"exportFilename",[931,6162,6163,6164,5701,6166,6168,6169,6172],{},"Filename for the built-in JSON download. When omitted, defaults to ",[598,6165,4159],{},[598,6167,3636],{}," to skip the auto-download (the ",[598,6170,6171],{},"@export"," event still fires).",[931,6174,6175],{},[598,6176,4159],{},[913,6178,6179,6183,6186],{},[931,6180,6181],{},[1649,6182,4086],{},[931,6184,6185],{},"Scope the overlay to the nearest positioned ancestor instead of pinning it to the viewport. Useful for embedding the editor inside a docs page or a bounded host stage.",[931,6187,6188],{},[598,6189,951],{},[484,6191,6193,5730],{"id":6192},"decaldebugui-events",[598,6194,2205],{},[907,6196,6197,6207],{},[910,6198,6199],{},[913,6200,6201,6203,6205],{},[916,6202,5739],{},[916,6204,5742],{},[916,6206,921],{},[926,6208,6209,6223],{},[913,6210,6211,6215,6220],{},[931,6212,6213],{},[598,6214,1174],{},[931,6216,6217],{},[598,6218,6219],{},"DecalLayout",[931,6221,6222],{},"Fires after the user clicks Export. The download (if enabled) has already been triggered — use this for side effects (POST, analytics…).",[913,6224,6225,6229,6233],{},[931,6226,6227],{},[598,6228,657],{},[931,6230,6231],{},[598,6232,6219],{},[931,6234,6235],{},"Fires after the user picks a JSON file. The layout has been sanitised (unknown keys dropped) and already applied to the bound Decals.",[484,6237,6239],{"id":6238},"caveats","Caveats",[2193,6241,6242,6257,6274,6290],{},[2196,6243,6244,6245,6248,6249,6252,6253,6256],{},"✨ The overlay sits at ",[598,6246,6247],{},"position: fixed; inset: 0; pointer-events: none"," with\nindividual panels opting back in. It sits ",[1649,6250,6251],{},"above"," the canvas by default\n(",[598,6254,6255],{},"z-index: 1000000",") — adjust via host CSS if needed.",[2196,6258,6259,6260,6262,6263,6266,6267,1652,6270,6273],{},"🎨 ",[598,6261,2205],{}," ships its own theme in a global stylesheet under the\n",[598,6264,6265],{},".cientos-decal-ui"," namespace, so host styles aren't affected. The CSS\nvariables (",[598,6268,6269],{},"--accent",[598,6271,6272],{},"--dock-bg",", etc.) can be overridden by targeting\nthe namespace.",[2196,6275,6276,6277,6280,6281,6283,6284,6286,6287,6289],{},"🔶 Decals are ",[1649,6278,6279],{},"per-canvas"," — if you have multiple ",[598,6282,3177],{}," in your\napp, each one has its own independent session. Pair each ",[598,6285,2205],{},"\nwith the right ",[598,6288,3715],{}," (from one of the Decals inside that canvas).",[2196,6291,6292,6293,1126],{},"🧩 The parent mesh resolution defaults to the scene-graph parent. If your\nsetup needs a different target (e.g. a mesh referenced from outside the\nDecal's parent slot), pass ",[598,6294,6295],{},":mesh=\"meshRef\"",[484,6297,6299],{"id":6298},"limitations","Limitations",[1985,6301,6302,6316,6323,6366],{},[594,6303,6304,6305,6308,6309,3316,6311,3316,6313,6315],{},"Decal vertices are baked into the ",[1649,6306,6307],{},"target mesh's local space"," at\nbuild time (the decal mesh is imperatively re-parented to the target,\nso ",[598,6310,4110],{},[598,6312,5607],{},[598,6314,5610],{}," on the parent are followed via\nthe scene graph — no rebuild needed).",[594,6317,6318,6319,6322],{},"Runtime deformations that change vertex positions outside of a\ntransform are ",[1649,6320,6321],{},"not"," followed:",[2193,6324,6325,6338,6346,6353],{},[2196,6326,6327,6332,6333,1126],{},[1649,6328,6329],{},[598,6330,6331],{},"SkinnedMesh"," skinning is not applied — the decal stays in rest\npose. See ",[1120,6334,6337],{"href":6335,"rel":6336},"https://github.com/mrdoob/three.js/issues/7926",[1124],"three.js#7926",[2196,6339,6340,6345],{},[1649,6341,6342],{},[598,6343,6344],{},"morphAttributes"," on the parent are ignored.",[2196,6347,6348,6349,6352],{},"Direct mutations of the parent's ",[598,6350,6351],{},"geometry.attributes.position","\n(e.g. CPU wave displacement, GPGPU) — the projection is baked once.",[2196,6354,6355,6356,6360,6361,6363,6364,1126],{},"Decals near silhouettes can wrap around onto opposite faces (see\n",[1120,6357,6359],{"href":5698,"rel":6358},[1124],"three.js#21187",") —\nmitigated by the ",[598,6362,5688],{}," prop, default ",[598,6365,5709],{},[594,6367,6368,6370],{},[598,6369,2190],{}," warns once per parent mesh when it detects these conditions.",[484,6372,6374],{"id":6373},"keyboard-shortcuts","Keyboard shortcuts",[907,6376,6377,6387],{},[910,6378,6379],{},[913,6380,6381,6384],{},[916,6382,6383],{},"Shortcut",[916,6385,6386],{},"Action",[926,6388,6389,6398,6407,6419,6432,6445],{},[913,6390,6391,6395],{},[931,6392,6393],{},[598,6394,6007],{},[931,6396,6397],{},"Confirm the in-flight edit",[913,6399,6400,6404],{},[931,6401,6402],{},[598,6403,5844],{},[931,6405,6406],{},"Cancel (revert updates, drop pending placements)",[913,6408,6409,6416],{},[931,6410,6411,3316,6413],{},[598,6412,5807],{},[598,6414,6415],{},"⌫",[931,6417,6418],{},"Delete the edited decal (or cancel a create)",[913,6420,6421,6429],{},[931,6422,6423,3316,6426],{},[598,6424,6425],{},"⌘Z",[598,6427,6428],{},"Ctrl+Z",[931,6430,6431],{},"Undo",[913,6433,6434,6442],{},[931,6435,6436,3316,6439],{},[598,6437,6438],{},"⇧⌘Z",[598,6440,6441],{},"Ctrl+⇧Z",[931,6443,6444],{},"Redo",[913,6446,6447,6450],{},[931,6448,6449],{},"Click outside",[931,6451,6452],{},"Auto-commit an in-flight update; cancel a create",[484,6454,6456,6457,3320],{"id":6455},"programmatic-api-usedecaleditor","Programmatic API (",[598,6458,6459],{},"useDecalEditor",[594,6461,6462,6463,6465,6466,6468,6469,6471,6472,6474],{},"Skip ",[598,6464,2205],{}," entirely or augment it with custom panels —\n",[598,6467,2218],{}," returns the same canvas-scoped session every Decal\nshares. Call it from any component inside ",[598,6470,3177],{}," (after at\nleast one ",[598,6473,2190],{}," has mounted).",[606,6476,6478],{"className":1166,"code":6477,"language":644,"meta":556,"style":556},"import { useDecalEditor } from '@tresjs/cientos'\n\nconst session = useDecalEditor()\n",[598,6479,6480,6499,6503],{"__ignoreMap":556},[617,6481,6482,6484,6486,6489,6491,6493,6495,6497],{"class":619,"line":557},[617,6483,657],{"class":656},[617,6485,660],{"class":622},[617,6487,6488],{"class":663}," useDecalEditor",[617,6490,673],{"class":622},[617,6492,676],{"class":656},[617,6494,679],{"class":622},[617,6496,682],{"class":643},[617,6498,685],{"class":622},[617,6500,6501],{"class":619,"line":558},[617,6502,722],{"emptyLinePlaceholder":574},[617,6504,6505,6507,6509,6511,6513],{"class":619,"line":688},[617,6506,2395],{"class":630},[617,6508,3645],{"class":663},[617,6510,637],{"class":622},[617,6512,6488],{"class":2414},[617,6514,6515],{"class":663},"()\n",[594,6517,6518,6519,1652,6522,2468,6525,1652,6528,6531,6532,2468,6534,1652,6537,1652,6540,6543,6544,6547,6548,6551,6552,1652,6555,1652,6558,2468,6561,6564],{},"The session exposes reactive state (",[598,6520,6521],{},"editingEntry",[598,6523,6524],{},"editingMode",[598,6526,6527],{},"canUndo",[598,6529,6530],{},"canRedo",", …), by-id mutators (",[598,6533,5978],{},[598,6535,6536],{},"setZIndexById",[598,6538,6539],{},"setVisibilityById",[598,6541,6542],{},"removeById","), batched updates\n(",[598,6545,6546],{},"setMeshData","), commit / delete / cancel listeners, undo / redo, and\na ",[598,6549,6550],{},"registerDecalEntry"," hook for external entries. Helper utilities\n(",[598,6553,6554],{},"ensureTextureNames",[598,6556,6557],{},"getTextureName",[598,6559,6560],{},"getTextureAspect",[598,6562,6563],{},"invalidateDecalGeometry",") are exported alongside.",[5287,6566,5289,6567,6570,6574,6649,6653,6724,6740,6744,6780,6786,6790,6929,6933,6979,6982,6986,7000,7170,7174],{},[5291,6568,6569],{},"Full API reference",[4031,6571,6573],{"id":6572},"reactive-state","Reactive state",[606,6575,6577],{"className":1166,"code":6576,"language":644,"meta":556,"style":556},"session.editingEntry // ShallowRef\u003CDecalEntry | null>\nsession.editingMode // Ref\u003C'create' | 'update' | null>\nsession.lockedMeshUuid // Ref\u003Cstring | null>\nsession.hoveredEntry // ShallowRef\u003CDecalEntry | null>\nsession.canUndo // Ref\u003Cboolean>\nsession.canRedo // Ref\u003Cboolean>\n",[598,6578,6579,6591,6603,6615,6626,6638],{"__ignoreMap":556},[617,6580,6581,6583,6585,6588],{"class":619,"line":557},[617,6582,3715],{"class":663},[617,6584,1126],{"class":622},[617,6586,6587],{"class":663},"editingEntry ",[617,6589,6590],{"class":1189},"// ShallowRef\u003CDecalEntry | null>\n",[617,6592,6593,6595,6597,6600],{"class":619,"line":558},[617,6594,3715],{"class":663},[617,6596,1126],{"class":622},[617,6598,6599],{"class":663},"editingMode ",[617,6601,6602],{"class":1189},"// Ref\u003C'create' | 'update' | null>\n",[617,6604,6605,6607,6609,6612],{"class":619,"line":688},[617,6606,3715],{"class":663},[617,6608,1126],{"class":622},[617,6610,6611],{"class":663},"lockedMeshUuid ",[617,6613,6614],{"class":1189},"// Ref\u003Cstring | null>\n",[617,6616,6617,6619,6621,6624],{"class":619,"line":709},[617,6618,3715],{"class":663},[617,6620,1126],{"class":622},[617,6622,6623],{"class":663},"hoveredEntry ",[617,6625,6590],{"class":1189},[617,6627,6628,6630,6632,6635],{"class":619,"line":719},[617,6629,3715],{"class":663},[617,6631,1126],{"class":622},[617,6633,6634],{"class":663},"canUndo ",[617,6636,6637],{"class":1189},"// Ref\u003Cboolean>\n",[617,6639,6640,6642,6644,6647],{"class":619,"line":725},[617,6641,3715],{"class":663},[617,6643,1126],{"class":622},[617,6645,6646],{"class":663},"canRedo ",[617,6648,6637],{"class":1189},[4031,6650,6652],{"id":6651},"mutating-decals-by-id","Mutating decals by id",[606,6654,6656],{"className":1166,"code":6655,"language":644,"meta":556,"style":556},"session.beginEditById(id) // start editing a placed decal\nsession.setZIndexById(id, newZ) // reorder one decal\nsession.setVisibilityById(id, false) // hide / show\nsession.removeById(id) // delete\n",[598,6657,6658,6672,6691,6711],{"__ignoreMap":556},[617,6659,6660,6662,6664,6666,6669],{"class":619,"line":557},[617,6661,3715],{"class":663},[617,6663,1126],{"class":622},[617,6665,5978],{"class":2414},[617,6667,6668],{"class":663},"(id) ",[617,6670,6671],{"class":1189},"// start editing a placed decal\n",[617,6673,6674,6676,6678,6680,6683,6685,6688],{"class":619,"line":558},[617,6675,3715],{"class":663},[617,6677,1126],{"class":622},[617,6679,6536],{"class":2414},[617,6681,6682],{"class":663},"(id",[617,6684,667],{"class":622},[617,6686,6687],{"class":663}," newZ) ",[617,6689,6690],{"class":1189},"// reorder one decal\n",[617,6692,6693,6695,6697,6699,6701,6703,6706,6708],{"class":619,"line":688},[617,6694,3715],{"class":663},[617,6696,1126],{"class":622},[617,6698,6539],{"class":2414},[617,6700,6682],{"class":663},[617,6702,667],{"class":622},[617,6704,6705],{"class":4377}," false",[617,6707,4714],{"class":663},[617,6709,6710],{"class":1189},"// hide / show\n",[617,6712,6713,6715,6717,6719,6721],{"class":619,"line":709},[617,6714,3715],{"class":663},[617,6716,1126],{"class":622},[617,6718,6542],{"class":2414},[617,6720,6668],{"class":663},[617,6722,6723],{"class":1189},"// delete\n",[594,6725,6726,6727,6730,6731,6733,6734,6736,6737,6739],{},"When the targeted id matches the ",[1649,6728,6729],{},"currently editing"," entry, mutations\nland on the in-flight buffer (committed on ",[598,6732,6007],{},", reverted on ",[598,6735,5844],{},").\nOtherwise they update ",[598,6738,2998],{}," immediately and record history.",[4031,6741,6743],{"id":6742},"batched-mesh-updates","Batched mesh updates",[606,6745,6747],{"className":1166,"code":6746,"language":644,"meta":556,"style":556},"session.setMeshData(meshName, nextEntries, { recordHistory: true })\n",[598,6748,6749],{"__ignoreMap":556},[617,6750,6751,6753,6755,6757,6760,6762,6765,6767,6769,6772,6774,6776,6778],{"class":619,"line":557},[617,6752,3715],{"class":663},[617,6754,1126],{"class":622},[617,6756,6546],{"class":2414},[617,6758,6759],{"class":663},"(meshName",[617,6761,667],{"class":622},[617,6763,6764],{"class":663}," nextEntries",[617,6766,667],{"class":622},[617,6768,660],{"class":622},[617,6770,6771],{"class":626}," recordHistory",[617,6773,1198],{"class":622},[617,6775,4378],{"class":4377},[617,6777,673],{"class":622},[617,6779,2428],{"class":663},[594,6781,6782,6783,6785],{},"A single emit avoids the stale-snapshot race that hits multiple\nback-to-back ",[598,6784,6536],{}," calls in the same tick.",[4031,6787,6789],{"id":6788},"listening-to-commits","Listening to commits",[606,6791,6793],{"className":1166,"code":6792,"language":644,"meta":556,"style":556},"const off = session.onCommit((entry, mode) => {\n console.log(mode, entry) // mode: 'create' | 'update'\n})\nsession.onDelete((entry) => { /* … */ })\nsession.onCancel(() => { /* … */ })\n\n// All return an unsubscribe function:\nonBeforeUnmount(off)\n",[598,6794,6795,6830,6855,6861,6889,6912,6916,6921],{"__ignoreMap":556},[617,6796,6797,6799,6802,6804,6807,6809,6812,6814,6816,6819,6821,6824,6826,6828],{"class":619,"line":557},[617,6798,2395],{"class":630},[617,6800,6801],{"class":663}," off ",[617,6803,637],{"class":622},[617,6805,6806],{"class":663}," session",[617,6808,1126],{"class":622},[617,6810,6811],{"class":2414},"onCommit",[617,6813,2417],{"class":663},[617,6815,2417],{"class":622},[617,6817,5827],{"class":6818},"sHdIc",[617,6820,667],{"class":622},[617,6822,6823],{"class":6818}," mode",[617,6825,3320],{"class":622},[617,6827,3657],{"class":630},[617,6829,1184],{"class":622},[617,6831,6832,6835,6837,6840,6842,6845,6847,6850,6852],{"class":619,"line":558},[617,6833,6834],{"class":663}," console",[617,6836,1126],{"class":622},[617,6838,6839],{"class":2414},"log",[617,6841,2417],{"class":626},[617,6843,6844],{"class":663},"mode",[617,6846,667],{"class":622},[617,6848,6849],{"class":663}," entry",[617,6851,4714],{"class":626},[617,6853,6854],{"class":1189},"// mode: 'create' | 'update'\n",[617,6856,6857,6859],{"class":619,"line":688},[617,6858,2408],{"class":622},[617,6860,2428],{"class":663},[617,6862,6863,6865,6867,6870,6872,6874,6876,6878,6880,6882,6885,6887],{"class":619,"line":709},[617,6864,3715],{"class":663},[617,6866,1126],{"class":622},[617,6868,6869],{"class":2414},"onDelete",[617,6871,2417],{"class":663},[617,6873,2417],{"class":622},[617,6875,5827],{"class":6818},[617,6877,3320],{"class":622},[617,6879,3657],{"class":630},[617,6881,660],{"class":622},[617,6883,6884],{"class":1189}," /* … */",[617,6886,673],{"class":622},[617,6888,2428],{"class":663},[617,6890,6891,6893,6895,6898,6900,6902,6904,6906,6908,6910],{"class":619,"line":719},[617,6892,3715],{"class":663},[617,6894,1126],{"class":622},[617,6896,6897],{"class":2414},"onCancel",[617,6899,2417],{"class":663},[617,6901,3654],{"class":622},[617,6903,3657],{"class":630},[617,6905,660],{"class":622},[617,6907,6884],{"class":1189},[617,6909,673],{"class":622},[617,6911,2428],{"class":663},[617,6913,6914],{"class":619,"line":725},[617,6915,722],{"emptyLinePlaceholder":574},[617,6917,6918],{"class":619,"line":735},[617,6919,6920],{"class":1189},"// All return an unsubscribe function:\n",[617,6922,6923,6926],{"class":619,"line":758},[617,6924,6925],{"class":2414},"onBeforeUnmount",[617,6927,6928],{"class":663},"(off)\n",[4031,6930,6932],{"id":6931},"undo-redo","Undo / redo",[606,6934,6936],{"className":1166,"code":6935,"language":644,"meta":556,"style":556},"session.canUndo.value // Ref\u003Cboolean>\nsession.undo() // returns true if something was undone\nsession.redo()\n",[598,6937,6938,6953,6968],{"__ignoreMap":556},[617,6939,6940,6942,6944,6946,6948,6951],{"class":619,"line":557},[617,6941,3715],{"class":663},[617,6943,1126],{"class":622},[617,6945,6527],{"class":663},[617,6947,1126],{"class":622},[617,6949,6950],{"class":663},"value ",[617,6952,6637],{"class":1189},[617,6954,6955,6957,6959,6962,6965],{"class":619,"line":558},[617,6956,3715],{"class":663},[617,6958,1126],{"class":622},[617,6960,6961],{"class":2414},"undo",[617,6963,6964],{"class":663},"() ",[617,6966,6967],{"class":1189},"// returns true if something was undone\n",[617,6969,6970,6972,6974,6977],{"class":619,"line":688},[617,6971,3715],{"class":663},[617,6973,1126],{"class":622},[617,6975,6976],{"class":2414},"redo",[617,6978,6515],{"class":663},[594,6980,6981],{},"History is per-canvas, capped at 100 operations, disabled mid-edit.",[4031,6983,6985],{"id":6984},"power-user-external-entries","Power user — external entries",[594,6987,6988,6989,6991,6992,6995,6996,6999],{},"Plug a decal-like object that lives outside a ",[598,6990,2190],{}," (custom data\nsource, server snapshot, fake entry for tests) by registering a\n",[598,6993,6994],{},"DecalEntryActions"," bundle so the ",[598,6997,6998],{},"*ById"," session methods route to it:",[606,7001,7003],{"className":1166,"code":7002,"language":644,"meta":556,"style":556},"import type { DecalEntryActions } from '@tresjs/cientos'\n\nsession.registerDecalEntry('decal-7', {\n beginEdit: () => { /* … */ },\n setZIndex: (newZ) => { /* … */ },\n setVisibility: (visible) => { /* … */ },\n remove: () => { /* … */ },\n} satisfies DecalEntryActions)\nonBeforeUnmount(() => session.unregisterDecalEntry('decal-7'))\n",[598,7004,7005,7026,7030,7051,7070,7092,7114,7131,7142],{"__ignoreMap":556},[617,7006,7007,7009,7011,7013,7016,7018,7020,7022,7024],{"class":619,"line":557},[617,7008,657],{"class":656},[617,7010,3422],{"class":656},[617,7012,660],{"class":622},[617,7014,7015],{"class":663}," DecalEntryActions",[617,7017,673],{"class":622},[617,7019,676],{"class":656},[617,7021,679],{"class":622},[617,7023,682],{"class":643},[617,7025,685],{"class":622},[617,7027,7028],{"class":619,"line":558},[617,7029,722],{"emptyLinePlaceholder":574},[617,7031,7032,7034,7036,7038,7040,7042,7045,7047,7049],{"class":619,"line":688},[617,7033,3715],{"class":663},[617,7035,1126],{"class":622},[617,7037,6550],{"class":2414},[617,7039,2417],{"class":663},[617,7041,2420],{"class":622},[617,7043,7044],{"class":643},"decal-7",[617,7046,2420],{"class":622},[617,7048,667],{"class":622},[617,7050,1184],{"class":622},[617,7052,7053,7056,7058,7061,7063,7065,7067],{"class":619,"line":709},[617,7054,7055],{"class":2414}," beginEdit",[617,7057,1198],{"class":622},[617,7059,7060],{"class":622}," ()",[617,7062,3657],{"class":630},[617,7064,660],{"class":622},[617,7066,6884],{"class":1189},[617,7068,7069],{"class":622}," },\n",[617,7071,7072,7075,7077,7079,7082,7084,7086,7088,7090],{"class":619,"line":719},[617,7073,7074],{"class":2414}," setZIndex",[617,7076,1198],{"class":622},[617,7078,3054],{"class":622},[617,7080,7081],{"class":6818},"newZ",[617,7083,3320],{"class":622},[617,7085,3657],{"class":630},[617,7087,660],{"class":622},[617,7089,6884],{"class":1189},[617,7091,7069],{"class":622},[617,7093,7094,7097,7099,7101,7104,7106,7108,7110,7112],{"class":619,"line":725},[617,7095,7096],{"class":2414}," setVisibility",[617,7098,1198],{"class":622},[617,7100,3054],{"class":622},[617,7102,7103],{"class":6818},"visible",[617,7105,3320],{"class":622},[617,7107,3657],{"class":630},[617,7109,660],{"class":622},[617,7111,6884],{"class":1189},[617,7113,7069],{"class":622},[617,7115,7116,7119,7121,7123,7125,7127,7129],{"class":619,"line":735},[617,7117,7118],{"class":2414}," remove",[617,7120,1198],{"class":622},[617,7122,7060],{"class":622},[617,7124,3657],{"class":630},[617,7126,660],{"class":622},[617,7128,6884],{"class":1189},[617,7130,7069],{"class":622},[617,7132,7133,7135,7138,7140],{"class":619,"line":758},[617,7134,2408],{"class":622},[617,7136,7137],{"class":656}," satisfies",[617,7139,7015],{"class":1180},[617,7141,2428],{"class":663},[617,7143,7144,7146,7148,7150,7152,7154,7156,7159,7161,7163,7165,7167],{"class":619,"line":770},[617,7145,6925],{"class":2414},[617,7147,2417],{"class":663},[617,7149,3654],{"class":622},[617,7151,3657],{"class":630},[617,7153,6806],{"class":663},[617,7155,1126],{"class":622},[617,7157,7158],{"class":2414},"unregisterDecalEntry",[617,7160,2417],{"class":663},[617,7162,2420],{"class":622},[617,7164,7044],{"class":643},[617,7166,2420],{"class":622},[617,7168,7169],{"class":663},"))\n",[4031,7171,7173],{"id":7172},"helper-utilities","Helper utilities",[907,7175,7176,7185],{},[910,7177,7178],{},[913,7179,7180,7182],{},[916,7181,295],{},[916,7183,7184],{},"Use",[926,7186,7187,7207,7219,7232],{},[913,7188,7189,7194],{},[931,7190,7191],{},[598,7192,7193],{},"ensureTextureNames(textures)",[931,7195,7196,7197,7199,7200,7203,7204,1126],{},"Back-fills ",[598,7198,2957],{}," from ",[598,7201,7202],{},"userData.name"," or the filename in ",[598,7205,7206],{},"image.src",[913,7208,7209,7214],{},[931,7210,7211],{},[598,7212,7213],{},"getTextureName(texture)",[931,7215,7216,7217,1126],{},"Single-texture variant — returns a stable name or ",[598,7218,3636],{},[913,7220,7221,7226],{},[931,7222,7223],{},[598,7224,7225],{},"getTextureAspect(texture)",[931,7227,7228,7231],{},[598,7229,7230],{},"{ x, y }"," aspect ratio for custom-sized decals.",[913,7233,7234,7239],{},[931,7235,7236],{},[598,7237,7238],{},"invalidateDecalGeometry(mesh)",[931,7240,7241],{},"Force a rebuild on the next frame — call when the parent mesh moved or swapped.",[1307,7243,7244],{},"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 .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 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}",{"title":556,"searchDepth":557,"depth":558,"links":7246},[7247,7248,7249,7250,7251,7255,7256,7264,7265,7267,7269,7271,7273,7275,7276,7277,7278],{"id":604,"depth":558,"text":15},{"id":2770,"depth":558,"text":2771},{"id":2965,"depth":558,"text":2239},{"id":3062,"depth":558,"text":3063},{"id":3157,"depth":558,"text":7252,"children":7253},"Editable mode + \u003CDecalDebugUI>",[7254],{"id":4033,"depth":688,"text":4034},{"id":4153,"depth":558,"text":3359},{"id":4252,"depth":558,"text":7257,"children":7258},"Targeting a loaded model (.glb)",[7259,7261,7263],{"id":4279,"depth":688,"text":7260},"When :object is a Mesh",{"id":4501,"depth":688,"text":7262},"When :object is a Group",{"id":4842,"depth":688,"text":4843},{"id":5268,"depth":558,"text":5269},{"id":5525,"depth":558,"text":7266},"\u003CDecal> props",{"id":5727,"depth":558,"text":7268},"\u003CDecal> events",{"id":5868,"depth":558,"text":7270},"\u003CDecal> exposed (via ref)",{"id":6041,"depth":558,"text":7272},"\u003CDecalDebugUI> props",{"id":6192,"depth":558,"text":7274},"\u003CDecalDebugUI> events",{"id":6238,"depth":558,"text":6239},{"id":6298,"depth":558,"text":6299},{"id":6373,"depth":558,"text":6374},{"id":6455,"depth":558,"text":7279},"Programmatic API (useDecalEditor)","Project a texture onto a mesh's surface — with an optional in-canvas editor UI.",{},{"title":49,"description":7280},"nqt2hDhRcN1seFAcvm0knRwz3m-KmMDv-8VwRbWGyfQ",{"id":7285,"title":53,"body":7286,"description":7574,"extension":571,"links":572,"meta":7575,"navigation":574,"path":54,"seo":7576,"stem":55,"__hash__":7577},"docs/2.api/1.abstractions/edges.md",{"type":481,"value":7287,"toc":7570},[7288,7293,7309,7311,7488,7490,7507,7568],[588,7289,7290],{},[7291,7292],"abstractions-edges",{},[594,7294,2756,7295,7298,7299,7304,7305,7308],{},[598,7296,7297],{},"cientos"," package provides an abstraction of ",[1120,7300,7303],{"href":7301,"rel":7302},"https://threejs.org/docs/#api/en/geometries/EdgesGeometry",[1124],"EdgesGeometry"," from Three.js, ",[598,7306,7307],{},"\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.",[484,7310,15],{"id":604},[606,7312,7315],{"className":608,"code":7313,"highlights":7314,"language":613,"meta":556,"style":556},"\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",[688,807],[598,7316,7317,7337,7355,7383,7391,7395,7403,7411,7430,7438,7446,7455,7464,7472,7480],{"__ignoreMap":556},[617,7318,7319,7321,7323,7325,7327,7329,7331,7333,7335],{"class":619,"line":557},[617,7320,623],{"class":622},[617,7322,627],{"class":626},[617,7324,631],{"class":630},[617,7326,634],{"class":630},[617,7328,637],{"class":622},[617,7330,640],{"class":622},[617,7332,644],{"class":643},[617,7334,640],{"class":622},[617,7336,649],{"class":622},[617,7338,7339,7341,7343,7345,7347,7349,7351,7353],{"class":619,"line":558},[617,7340,657],{"class":656},[617,7342,660],{"class":622},[617,7344,695],{"class":663},[617,7346,673],{"class":622},[617,7348,676],{"class":656},[617,7350,679],{"class":622},[617,7352,704],{"class":643},[617,7354,685],{"class":622},[617,7356,7358,7360,7362,7364,7366,7369,7371,7373,7375,7377,7379,7381],{"class":7357,"line":688},[619,653],[617,7359,657],{"class":656},[617,7361,660],{"class":622},[617,7363,1377],{"class":663},[617,7365,667],{"class":622},[617,7367,7368],{"class":663}," Edges",[617,7370,667],{"class":622},[617,7372,670],{"class":663},[617,7374,673],{"class":622},[617,7376,676],{"class":656},[617,7378,679],{"class":622},[617,7380,682],{"class":643},[617,7382,685],{"class":622},[617,7384,7385,7387,7389],{"class":619,"line":709},[617,7386,712],{"class":622},[617,7388,627],{"class":626},[617,7390,649],{"class":622},[617,7392,7393],{"class":619,"line":719},[617,7394,722],{"emptyLinePlaceholder":574},[617,7396,7397,7399,7401],{"class":619,"line":725},[617,7398,623],{"class":622},[617,7400,730],{"class":626},[617,7402,649],{"class":622},[617,7404,7405,7407,7409],{"class":619,"line":735},[617,7406,738],{"class":622},[617,7408,741],{"class":626},[617,7410,649],{"class":622},[617,7412,7413,7415,7417,7419,7421,7423,7426,7428],{"class":619,"line":758},[617,7414,761],{"class":622},[617,7416,764],{"class":626},[617,7418,1465],{"class":630},[617,7420,637],{"class":622},[617,7422,640],{"class":622},[617,7424,7425],{"class":643},"[0, 2, 5]",[617,7427,640],{"class":622},[617,7429,767],{"class":622},[617,7431,7432,7434,7436],{"class":619,"line":770},[617,7433,761],{"class":622},[617,7435,775],{"class":626},[617,7437,767],{"class":622},[617,7439,7440,7442,7444],{"class":619,"line":780},[617,7441,761],{"class":622},[617,7443,201],{"class":626},[617,7445,649],{"class":622},[617,7447,7448,7450,7453],{"class":619,"line":785},[617,7449,833],{"class":622},[617,7451,7452],{"class":626},"TresMeshBasicMaterial",[617,7454,767],{"class":622},[617,7456,7458,7460,7462],{"class":7457,"line":807},[619,653],[617,7459,833],{"class":622},[617,7461,53],{"class":626},[617,7463,767],{"class":622},[617,7465,7466,7468,7470],{"class":619,"line":611},[617,7467,875],{"class":622},[617,7469,201],{"class":626},[617,7471,649],{"class":622},[617,7473,7474,7476,7478],{"class":619,"line":830},[617,7475,885],{"class":622},[617,7477,741],{"class":626},[617,7479,649],{"class":622},[617,7481,7482,7484,7486],{"class":619,"line":841},[617,7483,712],{"class":622},[617,7485,730],{"class":626},[617,7487,649],{"class":622},[484,7489,902],{"id":901},[594,7491,7492,7494,7495,7500,7501,7506],{},[598,7493,7307],{}," is based on ",[1120,7496,7499],{"href":7497,"rel":7498},"https://threejs.org/docs/#api/en/objects/LineSegments",[1124],"LineSegments"," & ",[1120,7502,7505],{"href":7503,"rel":7504},"https://threejs.org/docs/#api/en/objects/Line",[1124],"Line"," and supports all of its props.",[907,7508,7509,7519],{},[910,7510,7511],{},[913,7512,7513,7515,7517],{},[916,7514,918],{"align":977},[916,7516,921],{"align":977},[916,7518,924],{},[926,7520,7521,7552],{},[913,7522,7523,7528,7547],{},[931,7524,7525],{"align":977},[1649,7526,7527],{},"color",[931,7529,7530,7533,7534,7537,7538,2247,7543],{"align":977},[598,7531,7532],{},"THREE.Color"," — Color of the edges. ",[7535,7536],"br",{}," More informations : ",[1120,7539,7542],{"href":7540,"rel":7541},"https://docs.tresjs.org/api/instances-arguments-and-props.html#colors",[1124],"TresColor",[1120,7544,7532],{"href":7545,"rel":7546},"https://threejs.org/docs/#api/en/math/Color",[1124],[931,7548,7549],{},[598,7550,7551],{},"#ff0000",[913,7553,7554,7559,7564],{},[931,7555,7556],{"align":977},[1649,7557,7558],{},"threshold",[931,7560,7561,7563],{"align":977},[598,7562,5332],{}," — An edge is only rendered if the angle (in degrees) between the face normals of the adjoining faces exceeds this value",[931,7565,7566],{},[598,7567,1854],{},[1307,7569,1624],{},{"title":556,"searchDepth":557,"depth":558,"links":7571},[7572,7573],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},"Render visible edges of objects with enhanced visual quality.",{},{"title":53,"description":7574},"mRAeZ9k02RaCisz4JzfTtekMB9_pkyMIRW_17D1E3qo",{"id":7579,"title":57,"body":7580,"description":8199,"extension":571,"links":572,"meta":8200,"navigation":574,"path":58,"seo":8201,"stem":59,"__hash__":8202},"docs/2.api/1.abstractions/fit.md",{"type":481,"value":7581,"toc":8195},[7582,7587,7593,7603,7609,7611,8059,8061,8192],[2275,7583,7584],{},[7585,7586],"abstractions-fit",{},[594,7588,7589,7592],{},[598,7590,7591],{},"\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.",[594,7594,7595,7596,7599,7600,1126],{},"Alternatively, the children can be fit into a ",[598,7597,7598],{},"Box3"," or an ",[598,7601,7602],{},"Object3D",[594,7604,7605,7606,7608],{},"Or the children can simply be resized. With ",[598,7607,7591],{}," the children are scaled relative to the center of their calculated bounding box.",[484,7610,15],{"id":604},[606,7612,7615],{"className":608,"code":7613,"highlights":7614,"language":613,"meta":556,"style":556},"\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",[558,892,2683],[598,7616,7617,7637,7661,7679,7703,7707,7726,7768,7806,7833,7838,7842,7858,7873,7881,7885,7893,7912,7930,7938,7947,7953,7967,7981,7995,8009,8014,8023,8043,8051],{"__ignoreMap":556},[617,7618,7619,7621,7623,7625,7627,7629,7631,7633,7635],{"class":619,"line":557},[617,7620,623],{"class":622},[617,7622,627],{"class":626},[617,7624,631],{"class":630},[617,7626,634],{"class":630},[617,7628,637],{"class":622},[617,7630,640],{"class":622},[617,7632,644],{"class":643},[617,7634,640],{"class":622},[617,7636,649],{"class":622},[617,7638,7640,7642,7644,7647,7649,7651,7653,7655,7657,7659],{"class":7639,"line":558},[619,653],[617,7641,657],{"class":656},[617,7643,660],{"class":622},[617,7645,7646],{"class":663}," Fit",[617,7648,667],{"class":622},[617,7650,670],{"class":663},[617,7652,673],{"class":622},[617,7654,676],{"class":656},[617,7656,679],{"class":622},[617,7658,682],{"class":643},[617,7660,685],{"class":622},[617,7662,7663,7665,7667,7669,7671,7673,7675,7677],{"class":619,"line":688},[617,7664,657],{"class":656},[617,7666,660],{"class":622},[617,7668,695],{"class":663},[617,7670,673],{"class":622},[617,7672,676],{"class":656},[617,7674,679],{"class":622},[617,7676,704],{"class":643},[617,7678,685],{"class":622},[617,7680,7681,7683,7685,7688,7690,7693,7695,7697,7699,7701],{"class":619,"line":709},[617,7682,657],{"class":656},[617,7684,660],{"class":622},[617,7686,7687],{"class":663}," BoxGeometry",[617,7689,667],{"class":622},[617,7691,7692],{"class":663}," MeshNormalMaterial",[617,7694,673],{"class":622},[617,7696,676],{"class":656},[617,7698,679],{"class":622},[617,7700,4606],{"class":643},[617,7702,685],{"class":622},[617,7704,7705],{"class":619,"line":719},[617,7706,722],{"emptyLinePlaceholder":574},[617,7708,7709,7711,7714,7716,7718,7721,7723],{"class":619,"line":725},[617,7710,2395],{"class":630},[617,7712,7713],{"class":663}," positions",[617,7715,1198],{"class":622},[617,7717,5337],{"class":1180},[617,7719,7720],{"class":663},"[][] ",[617,7722,637],{"class":622},[617,7724,7725],{"class":663}," []\n",[617,7727,7728,7731,7733,7736,7739,7741,7744,7746,7748,7751,7754,7756,7758,7761,7764,7766],{"class":619,"line":735},[617,7729,7730],{"class":656},"for",[617,7732,3054],{"class":663},[617,7734,7735],{"class":630},"let",[617,7737,7738],{"class":663}," y ",[617,7740,637],{"class":622},[617,7742,7743],{"class":2481}," 100",[617,7745,4118],{"class":622},[617,7747,7738],{"class":663},[617,7749,7750],{"class":622},"\u003C=",[617,7752,7753],{"class":2481}," 120",[617,7755,4118],{"class":622},[617,7757,7738],{"class":663},[617,7759,7760],{"class":622},"+=",[617,7762,7763],{"class":2481}," 10",[617,7765,4714],{"class":663},[617,7767,3240],{"class":622},[617,7769,7770,7773,7775,7777,7780,7782,7784,7786,7788,7791,7793,7795,7797,7800,7802,7804],{"class":619,"line":758},[617,7771,7772],{"class":656}," for",[617,7774,3054],{"class":626},[617,7776,7735],{"class":630},[617,7778,7779],{"class":663}," x",[617,7781,2411],{"class":622},[617,7783,7743],{"class":2481},[617,7785,4118],{"class":622},[617,7787,7779],{"class":663},[617,7789,7790],{"class":622}," \u003C=",[617,7792,7753],{"class":2481},[617,7794,4118],{"class":622},[617,7796,7779],{"class":663},[617,7798,7799],{"class":622}," +=",[617,7801,7763],{"class":2481},[617,7803,4714],{"class":626},[617,7805,3240],{"class":622},[617,7807,7808,7811,7813,7816,7818,7821,7823,7826,7828,7831],{"class":619,"line":770},[617,7809,7810],{"class":663}," positions",[617,7812,1126],{"class":622},[617,7814,7815],{"class":2414},"push",[617,7817,3509],{"class":626},[617,7819,7820],{"class":663},"x",[617,7822,667],{"class":622},[617,7824,7825],{"class":663}," y",[617,7827,667],{"class":622},[617,7829,7830],{"class":2481}," 9999",[617,7832,2582],{"class":626},[617,7834,7835],{"class":619,"line":780},[617,7836,7837],{"class":622}," }\n",[617,7839,7840],{"class":619,"line":785},[617,7841,1305],{"class":622},[617,7843,7844,7846,7849,7851,7854,7856],{"class":619,"line":807},[617,7845,2395],{"class":630},[617,7847,7848],{"class":663}," geom ",[617,7850,637],{"class":622},[617,7852,7853],{"class":622}," new",[617,7855,7687],{"class":2414},[617,7857,6515],{"class":663},[617,7859,7860,7862,7865,7867,7869,7871],{"class":619,"line":611},[617,7861,2395],{"class":630},[617,7863,7864],{"class":663}," mat ",[617,7866,637],{"class":622},[617,7868,7853],{"class":622},[617,7870,7692],{"class":2414},[617,7872,6515],{"class":663},[617,7874,7875,7877,7879],{"class":619,"line":830},[617,7876,712],{"class":622},[617,7878,627],{"class":626},[617,7880,649],{"class":622},[617,7882,7883],{"class":619,"line":841},[617,7884,722],{"emptyLinePlaceholder":574},[617,7886,7887,7889,7891],{"class":619,"line":852},[617,7888,623],{"class":622},[617,7890,730],{"class":626},[617,7892,649],{"class":622},[617,7894,7895,7897,7899,7901,7903,7905,7908,7910],{"class":619,"line":862},[617,7896,738],{"class":622},[617,7898,741],{"class":626},[617,7900,744],{"class":630},[617,7902,637],{"class":622},[617,7904,640],{"class":622},[617,7906,7907],{"class":643},"#4F4F4F",[617,7909,640],{"class":622},[617,7911,649],{"class":622},[617,7913,7914,7916,7918,7920,7922,7924,7926,7928],{"class":619,"line":612},[617,7915,761],{"class":622},[617,7917,764],{"class":626},[617,7919,1465],{"class":630},[617,7921,637],{"class":622},[617,7923,640],{"class":622},[617,7925,1946],{"class":643},[617,7927,640],{"class":622},[617,7929,767],{"class":622},[617,7931,7932,7934,7936],{"class":619,"line":882},[617,7933,761],{"class":622},[617,7935,775],{"class":626},[617,7937,767],{"class":622},[617,7939,7941,7943,7945],{"class":7940,"line":892},[619,653],[617,7942,761],{"class":622},[617,7944,57],{"class":626},[617,7946,649],{"class":622},[617,7948,7949,7951],{"class":619,"line":2605},[617,7950,833],{"class":622},[617,7952,5106],{"class":626},[617,7954,7955,7958,7960,7962,7965],{"class":619,"line":2614},[617,7956,7957],{"class":630}," v-for",[617,7959,637],{"class":622},[617,7961,640],{"class":622},[617,7963,7964],{"class":643},"(pos, index) in positions",[617,7966,3111],{"class":622},[617,7968,7969,7972,7974,7976,7979],{"class":619,"line":2634},[617,7970,7971],{"class":630}," :key",[617,7973,637],{"class":622},[617,7975,640],{"class":622},[617,7977,7978],{"class":643},"index",[617,7980,3111],{"class":622},[617,7982,7983,7986,7988,7990,7993],{"class":619,"line":2643},[617,7984,7985],{"class":630}," :position",[617,7987,637],{"class":622},[617,7989,640],{"class":622},[617,7991,7992],{"class":643},"pos",[617,7994,3111],{"class":622},[617,7996,7997,8000,8002,8004,8007],{"class":619,"line":2652},[617,7998,7999],{"class":630}," :args",[617,8001,637],{"class":622},[617,8003,640],{"class":622},[617,8005,8006],{"class":643},"[geom, mat]",[617,8008,3111],{"class":622},[617,8010,8011],{"class":619,"line":2661},[617,8012,8013],{"class":622}," />\n",[617,8015,8017,8019,8021],{"class":8016,"line":2683},[619,653],[617,8018,875],{"class":622},[617,8020,57],{"class":626},[617,8022,649],{"class":622},[617,8024,8025,8027,8030,8032,8034,8036,8039,8041],{"class":619,"line":2727},[617,8026,761],{"class":622},[617,8028,8029],{"class":626},"TresGridHelper",[617,8031,1939],{"class":630},[617,8033,637],{"class":622},[617,8035,640],{"class":622},[617,8037,8038],{"class":643},"[1, 1]",[617,8040,640],{"class":622},[617,8042,767],{"class":622},[617,8044,8045,8047,8049],{"class":619,"line":2736},[617,8046,885],{"class":622},[617,8048,741],{"class":626},[617,8050,649],{"class":622},[617,8052,8053,8055,8057],{"class":619,"line":2745},[617,8054,712],{"class":622},[617,8056,730],{"class":626},[617,8058,649],{"class":622},[484,8060,902],{"id":901},[907,8062,8063,8072],{},[910,8064,8065],{},[913,8066,8067,8070],{},[916,8068,8069],{"align":977},"Name",[916,8071,921],{"align":977},[926,8073,8074,8168],{},[913,8075,8076,8081],{},[931,8077,8078],{"align":977},[1649,8079,8080],{},"into",[931,8082,938,8083,8085,8086,8160,8162,8163,8165],{"align":977},[598,8084,8080],{}," is:",[2193,8087,8088,8097,8105,8113,8121,8132,8139],{},[2196,8089,8090,8091,8093,8094,8096],{},"omitted or explicitly ",[598,8092,1159],{},": position/scale children to fit into a 1 × 1 × 1 ",[598,8095,7598],{}," at world origin.",[2196,8098,8099,8101,8102,8104],{},[598,8100,3636],{},": turn off ",[598,8103,7591],{},"; reset scale/position of children.",[2196,8106,8107,8109,8110,1126],{},[598,8108,5332],{},": convert argument to ",[598,8111,8112],{},"Vector3(number, number, number)",[2196,8114,8115,8109,8118,1126],{},[598,8116,8117],{},"[number, number, number]",[598,8119,8120],{},"Vector3",[2196,8122,8123,8125,8126,8128,8129,8131],{},[598,8124,8120],{},": position/scale children to fit inside a ",[598,8127,7598],{}," of size ",[598,8130,8120],{}," at target objects' cumulative center.",[2196,8133,8134,8136,8137,1126],{},[598,8135,7598],{},": position/scale children to fit inside ",[598,8138,7598],{},[2196,8140,8141,8143,8144,8146,8147,8146,8154,8156,8157,8159],{},[598,8142,7602],{},": position/scale children to fit inside calculated ",[598,8145,7598],{},". ",[1120,8148,1118,8151],{"href":8149,"rel":8150},"https://threejs.org/docs/#api/en/math/Box3.setFromObject",[1124],[598,8152,8153],{},"THREE.Box3.setFromObject",[598,8155,7591],{}," must not contain the ",[598,8158,7602],{}," and vice-versa.",[7535,8161],{},"default:",[7535,8164],{},[598,8166,8167],{},"new Box3(new Vector3(-0.5, -0.5, -0.5), new Vector3(0.5, 0.5, 0.5))",[913,8169,8170,8174],{},[931,8171,8172],{"align":977},[1649,8173,1115],{},[931,8175,8176,8184,8186,8162,8188,8190],{"align":977},[1120,8177,1118,8179,8181,8182],{"href":1122,"rel":8178},[1124],[598,8180,1115],{}," argument in ",[598,8183,8153],{},[7535,8185],{},[7535,8187],{},[7535,8189],{},[598,8191,951],{},[1307,8193,8194],{},"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":556,"searchDepth":557,"depth":558,"links":8196},[8197,8198],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},"Uniformly scale and position children to fit into a defined space.",{},{"title":57,"description":8199},"8AurvuiiZvTbSuZQKf_ksydDO09mH9Fnt7AaTb_9ZtA",{"id":8204,"title":61,"body":8205,"description":8593,"extension":571,"links":572,"meta":8594,"navigation":574,"path":62,"seo":8595,"stem":63,"__hash__":8596},"docs/2.api/1.abstractions/levioso.md",{"type":481,"value":8206,"toc":8589},[8207,8212,8219,8228,8230,8514,8516,8587],[588,8208,8209],{},[8210,8211],"abstractions-levioso",{},[594,8213,8214],{},[8215,8216],"img",{"alt":8217,"src":8218},"Leviosa","https://media.giphy.com/media/HaCFT5ghY6L1m/giphy.gif",[594,8220,2756,8221,8223,8224,8227],{},[598,8222,7297],{}," package provides a ",[598,8225,8226],{},"\u003CLevioso />"," wrapper that makes its content … float, just like Magic 🪄✨",[484,8229,15],{"id":604},[606,8231,8234],{"className":608,"code":8232,"highlights":8233,"language":613,"meta":556,"style":556},"\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",[688,785,611],[598,8235,8236,8256,8278,8308,8312,8320,8324,8332,8352,8383,8391,8413,8421,8430,8449,8479,8498,8506],{"__ignoreMap":556},[617,8237,8238,8240,8242,8244,8246,8248,8250,8252,8254],{"class":619,"line":557},[617,8239,623],{"class":622},[617,8241,627],{"class":626},[617,8243,631],{"class":630},[617,8245,634],{"class":630},[617,8247,637],{"class":622},[617,8249,640],{"class":622},[617,8251,644],{"class":643},[617,8253,640],{"class":622},[617,8255,649],{"class":622},[617,8257,8258,8260,8262,8264,8266,8268,8271,8273,8275],{"class":619,"line":558},[617,8259,657],{"class":656},[617,8261,660],{"class":622},[617,8263,695],{"class":663},[617,8265,673],{"class":622},[617,8267,676],{"class":656},[617,8269,8270],{"class":622}," \"",[617,8272,704],{"class":643},[617,8274,640],{"class":622},[617,8276,8277],{"class":622},";\n",[617,8279,8281,8283,8285,8288,8290,8292,8294,8296,8298,8300,8302,8304,8306],{"class":8280,"line":688},[619,653],[617,8282,657],{"class":656},[617,8284,660],{"class":622},[617,8286,8287],{"class":663}," Levioso",[617,8289,667],{"class":622},[617,8291,670],{"class":663},[617,8293,667],{"class":622},[617,8295,1377],{"class":663},[617,8297,673],{"class":622},[617,8299,676],{"class":656},[617,8301,8270],{"class":622},[617,8303,682],{"class":643},[617,8305,640],{"class":622},[617,8307,8277],{"class":622},[617,8309,8310],{"class":619,"line":709},[617,8311,722],{"emptyLinePlaceholder":574},[617,8313,8314,8316,8318],{"class":619,"line":719},[617,8315,712],{"class":622},[617,8317,627],{"class":626},[617,8319,649],{"class":622},[617,8321,8322],{"class":619,"line":725},[617,8323,722],{"emptyLinePlaceholder":574},[617,8325,8326,8328,8330],{"class":619,"line":735},[617,8327,623],{"class":622},[617,8329,730],{"class":626},[617,8331,649],{"class":622},[617,8333,8334,8336,8338,8341,8343,8345,8348,8350],{"class":619,"line":758},[617,8335,738],{"class":622},[617,8337,741],{"class":626},[617,8339,8340],{"class":630}," :clear-color",[617,8342,637],{"class":622},[617,8344,640],{"class":622},[617,8346,8347],{"class":643},"0x82dbc5",[617,8349,640],{"class":622},[617,8351,649],{"class":622},[617,8353,8354,8356,8358,8360,8362,8364,8367,8369,8372,8374,8376,8379,8381],{"class":619,"line":770},[617,8355,761],{"class":622},[617,8357,764],{"class":626},[617,8359,1465],{"class":630},[617,8361,637],{"class":622},[617,8363,640],{"class":622},[617,8365,8366],{"class":643},"[0, 0, 5]",[617,8368,640],{"class":622},[617,8370,8371],{"class":630}," :look-at",[617,8373,637],{"class":622},[617,8375,640],{"class":622},[617,8377,8378],{"class":643},"[0, 0, 0]",[617,8380,640],{"class":622},[617,8382,767],{"class":622},[617,8384,8385,8387,8389],{"class":619,"line":780},[617,8386,761],{"class":622},[617,8388,775],{"class":626},[617,8390,767],{"class":622},[617,8392,8394,8396,8399,8402,8404,8406,8409,8411],{"class":8393,"line":785},[619,653],[617,8395,761],{"class":622},[617,8397,8398],{"class":626},"Levioso",[617,8400,8401],{"class":630}," :speed",[617,8403,637],{"class":622},[617,8405,640],{"class":622},[617,8407,8408],{"class":643},"4",[617,8410,640],{"class":622},[617,8412,649],{"class":622},[617,8414,8415,8417,8419],{"class":619,"line":807},[617,8416,833],{"class":622},[617,8418,201],{"class":626},[617,8420,767],{"class":622},[617,8422,8424,8426,8428],{"class":8423,"line":611},[619,653],[617,8425,875],{"class":622},[617,8427,8398],{"class":626},[617,8429,649],{"class":622},[617,8431,8432,8434,8437,8439,8441,8443,8445,8447],{"class":619,"line":830},[617,8433,761],{"class":622},[617,8435,8436],{"class":626},"TresAmbientLight",[617,8438,1847],{"class":630},[617,8440,637],{"class":622},[617,8442,640],{"class":622},[617,8444,1854],{"class":643},[617,8446,640],{"class":622},[617,8448,767],{"class":622},[617,8450,8451,8453,8456,8458,8460,8462,8464,8466,8468,8470,8472,8475,8477],{"class":619,"line":841},[617,8452,761],{"class":622},[617,8454,8455],{"class":626},"TresDirectionalLight",[617,8457,1847],{"class":630},[617,8459,637],{"class":622},[617,8461,640],{"class":622},[617,8463,1854],{"class":643},[617,8465,640],{"class":622},[617,8467,1465],{"class":630},[617,8469,637],{"class":622},[617,8471,640],{"class":622},[617,8473,8474],{"class":643},"[2, 2, 2]",[617,8476,640],{"class":622},[617,8478,767],{"class":622},[617,8480,8481,8483,8485,8487,8489,8491,8494,8496],{"class":619,"line":852},[617,8482,761],{"class":622},[617,8484,8029],{"class":626},[617,8486,1465],{"class":630},[617,8488,637],{"class":622},[617,8490,640],{"class":622},[617,8492,8493],{"class":643},"[0, -1, 0]",[617,8495,640],{"class":622},[617,8497,767],{"class":622},[617,8499,8500,8502,8504],{"class":619,"line":862},[617,8501,885],{"class":622},[617,8503,741],{"class":626},[617,8505,649],{"class":622},[617,8507,8508,8510,8512],{"class":619,"line":612},[617,8509,712],{"class":622},[617,8511,730],{"class":626},[617,8513,649],{"class":622},[484,8515,902],{"id":901},[907,8517,8518,8528],{},[910,8519,8520],{},[913,8521,8522,8524,8526],{},[916,8523,918],{"align":977},[916,8525,921],{"align":977},[916,8527,924],{},[926,8529,8530,8544,8558,8572],{},[913,8531,8532,8537,8540],{},[931,8533,8534],{"align":977},[598,8535,8536],{},"speed",[931,8538,8539],{"align":977},"Floating speed, higher it rocks more 🤘.",[931,8541,8542],{},[598,8543,1854],{},[913,8545,8546,8551,8554],{},[931,8547,8548],{"align":977},[598,8549,8550],{},"rotationFactor",[931,8552,8553],{"align":977},"Factor for Euler rotation.",[931,8555,8556],{},[598,8557,1854],{},[913,8559,8560,8565,8568],{},[931,8561,8562],{"align":977},[598,8563,8564],{},"floatFactor",[931,8566,8567],{"align":977},"Factor for Up/down movement.",[931,8569,8570],{},[598,8571,1854],{},[913,8573,8574,8579,8582],{},[931,8575,8576],{"align":977},[598,8577,8578],{},"range",[931,8580,8581],{"align":977},"Range of y-axis values the object will float within.",[931,8583,8584],{},[598,8585,8586],{},"[-0.1, 0.1]",[1307,8588,1624],{},{"title":556,"searchDepth":557,"depth":558,"links":8590},[8591,8592],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},"Make content float like magic with smooth animations.",{},{"title":61,"description":8593},"ua7tauTYcB_xqNVlXaBIkTupNCoAiUCKWGlTSK5eTSk",{"id":8598,"title":65,"body":8599,"description":9243,"extension":571,"links":572,"meta":9244,"navigation":574,"path":66,"seo":9245,"stem":67,"__hash__":9246},"docs/2.api/1.abstractions/mask.md",{"type":481,"value":8600,"toc":9238},[8601,8606,8612,8645,8647,9110,9112,9175,9179,9186,9191,9206,9235],[588,8602,8603],{},[8604,8605],"abstractions-mask",{},[594,8607,8608,8611],{},[598,8609,8610],{},"\u003CMask/>"," uses the stencil buffer to cut out areas of the screen.",[3179,8613,8614,8632],{},[594,8615,8616,8617,8620,8621,8624,8625,8628,8629,1126],{},"To use ",[598,8618,8619],{},"\u003CMask />"," you ",[1654,8622,8623],{},"must"," add ",[598,8626,8627],{},":stencil=\"true\""," to your ",[598,8630,8631],{},"\u003CTresCanvas />",[594,8633,8634,8636,8637,8644],{},[598,8635,8619],{}," relies on the ",[1120,8638,8641],{"href":8639,"rel":8640},"https://threejs.org/docs/#api/en/renderers/WebGLRenderer",[1124],[598,8642,8643],{},"stencil buffer",". In recent versions of THREE.js, by default, the stencil buffer is not created.",[484,8646,15],{"id":604},[606,8648,8651],{"className":608,"code":8649,"highlights":8650,"language":613,"meta":556,"style":556},"\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",[558,852,862,612,882],[598,8652,8653,8673,8702,8720,8728,8732,8740,8770,8778,8786,8790,8809,8817,8837,8855,8863,8883,8893,8913,8922,8930,8934,8954,8962,8982,8990,8994,9013,9021,9039,9047,9051,9070,9078,9086,9094,9102],{"__ignoreMap":556},[617,8654,8655,8657,8659,8661,8663,8665,8667,8669,8671],{"class":619,"line":557},[617,8656,623],{"class":622},[617,8658,627],{"class":626},[617,8660,631],{"class":630},[617,8662,634],{"class":630},[617,8664,637],{"class":622},[617,8666,640],{"class":622},[617,8668,644],{"class":643},[617,8670,640],{"class":622},[617,8672,649],{"class":622},[617,8674,8676,8678,8680,8683,8685,8687,8689,8692,8694,8696,8698,8700],{"class":8675,"line":558},[619,653],[617,8677,657],{"class":656},[617,8679,660],{"class":622},[617,8681,8682],{"class":663}," Mask",[617,8684,667],{"class":622},[617,8686,670],{"class":663},[617,8688,667],{"class":622},[617,8690,8691],{"class":663}," useMask",[617,8693,673],{"class":622},[617,8695,676],{"class":656},[617,8697,679],{"class":622},[617,8699,682],{"class":643},[617,8701,685],{"class":622},[617,8703,8704,8706,8708,8710,8712,8714,8716,8718],{"class":619,"line":688},[617,8705,657],{"class":656},[617,8707,660],{"class":622},[617,8709,695],{"class":663},[617,8711,673],{"class":622},[617,8713,676],{"class":656},[617,8715,679],{"class":622},[617,8717,704],{"class":643},[617,8719,685],{"class":622},[617,8721,8722,8724,8726],{"class":619,"line":709},[617,8723,712],{"class":622},[617,8725,627],{"class":626},[617,8727,649],{"class":622},[617,8729,8730],{"class":619,"line":719},[617,8731,722],{"emptyLinePlaceholder":574},[617,8733,8734,8736,8738],{"class":619,"line":725},[617,8735,623],{"class":622},[617,8737,730],{"class":626},[617,8739,649],{"class":622},[617,8741,8742,8744,8746,8749,8751,8753,8755,8757,8759,8761,8763,8766,8768],{"class":619,"line":735},[617,8743,738],{"class":622},[617,8745,741],{"class":626},[617,8747,8748],{"class":630}," :stencil",[617,8750,637],{"class":622},[617,8752,640],{"class":622},[617,8754,941],{"class":643},[617,8756,640],{"class":622},[617,8758,744],{"class":630},[617,8760,637],{"class":622},[617,8762,640],{"class":622},[617,8764,8765],{"class":643},"#4f4f4f",[617,8767,640],{"class":622},[617,8769,649],{"class":622},[617,8771,8772,8774,8776],{"class":619,"line":758},[617,8773,761],{"class":622},[617,8775,764],{"class":626},[617,8777,767],{"class":622},[617,8779,8780,8782,8784],{"class":619,"line":770},[617,8781,761],{"class":622},[617,8783,775],{"class":626},[617,8785,767],{"class":622},[617,8787,8788],{"class":619,"line":780},[617,8789,722],{"emptyLinePlaceholder":574},[617,8791,8792,8794,8797,8799,8801,8803,8805,8807],{"class":619,"line":785},[617,8793,761],{"class":622},[617,8795,8796],{"class":626},"TresGroup",[617,8798,793],{"class":630},[617,8800,637],{"class":622},[617,8802,640],{"class":622},[617,8804,800],{"class":643},[617,8806,640],{"class":622},[617,8808,649],{"class":622},[617,8810,8811,8813,8815],{"class":619,"line":807},[617,8812,833],{"class":622},[617,8814,836],{"class":626},[617,8816,649],{"class":622},[617,8818,8819,8821,8824,8826,8828,8830,8833,8835],{"class":619,"line":611},[617,8820,844],{"class":622},[617,8822,8823],{"class":626},"TresRingGeometry",[617,8825,1939],{"class":630},[617,8827,637],{"class":622},[617,8829,640],{"class":622},[617,8831,8832],{"class":643},"[0.95, 1, 64]",[617,8834,640],{"class":622},[617,8836,767],{"class":622},[617,8838,8839,8841,8843,8845,8847,8849,8851,8853],{"class":619,"line":830},[617,8840,844],{"class":622},[617,8842,7452],{"class":626},[617,8844,2669],{"class":630},[617,8846,637],{"class":622},[617,8848,640],{"class":622},[617,8850,2676],{"class":643},[617,8852,640],{"class":622},[617,8854,767],{"class":622},[617,8856,8857,8859,8861],{"class":619,"line":841},[617,8858,865],{"class":622},[617,8860,836],{"class":626},[617,8862,649],{"class":622},[617,8864,8866,8868,8870,8873,8875,8877,8879,8881],{"class":8865,"line":852},[619,653],[617,8867,833],{"class":622},[617,8869,65],{"class":626},[617,8871,8872],{"class":630}," :id",[617,8874,637],{"class":622},[617,8876,640],{"class":622},[617,8878,1854],{"class":643},[617,8880,640],{"class":622},[617,8882,649],{"class":622},[617,8884,8886,8888,8891],{"class":8885,"line":862},[619,653],[617,8887,844],{"class":622},[617,8889,8890],{"class":626},"TresCircleGeometry",[617,8892,767],{"class":622},[617,8894,8896,8898,8900,8902,8904,8906,8909,8911],{"class":8895,"line":612},[619,653],[617,8897,844],{"class":622},[617,8899,7452],{"class":626},[617,8901,2669],{"class":630},[617,8903,637],{"class":622},[617,8905,640],{"class":622},[617,8907,8908],{"class":643},"#fbb03b",[617,8910,640],{"class":622},[617,8912,767],{"class":622},[617,8914,8916,8918,8920],{"class":8915,"line":882},[619,653],[617,8917,865],{"class":622},[617,8919,65],{"class":626},[617,8921,649],{"class":622},[617,8923,8924,8926,8928],{"class":619,"line":892},[617,8925,875],{"class":622},[617,8927,8796],{"class":626},[617,8929,649],{"class":622},[617,8931,8932],{"class":619,"line":2605},[617,8933,722],{"emptyLinePlaceholder":574},[617,8935,8936,8938,8940,8943,8945,8947,8950,8952],{"class":619,"line":2614},[617,8937,761],{"class":622},[617,8939,836],{"class":626},[617,8941,8942],{"class":630}," :position-z",[617,8944,637],{"class":622},[617,8946,640],{"class":622},[617,8948,8949],{"class":643},"-1",[617,8951,640],{"class":622},[617,8953,649],{"class":622},[617,8955,8956,8958,8960],{"class":619,"line":2634},[617,8957,833],{"class":622},[617,8959,847],{"class":626},[617,8961,767],{"class":622},[617,8963,8964,8966,8968,8971,8973,8975,8978,8980],{"class":619,"line":2643},[617,8965,833],{"class":622},[617,8967,857],{"class":626},[617,8969,8970],{"class":630}," v-bind",[617,8972,637],{"class":622},[617,8974,640],{"class":622},[617,8976,8977],{"class":643},"useMask(1)",[617,8979,640],{"class":622},[617,8981,767],{"class":622},[617,8983,8984,8986,8988],{"class":619,"line":2652},[617,8985,875],{"class":622},[617,8987,836],{"class":626},[617,8989,649],{"class":622},[617,8991,8992],{"class":619,"line":2661},[617,8993,722],{"emptyLinePlaceholder":574},[617,8995,8996,8998,9000,9002,9004,9006,9009,9011],{"class":619,"line":2683},[617,8997,761],{"class":622},[617,8999,836],{"class":626},[617,9001,8942],{"class":630},[617,9003,637],{"class":622},[617,9005,640],{"class":622},[617,9007,9008],{"class":643},"-3",[617,9010,640],{"class":622},[617,9012,649],{"class":622},[617,9014,9015,9017,9019],{"class":619,"line":2727},[617,9016,833],{"class":622},[617,9018,847],{"class":626},[617,9020,767],{"class":622},[617,9022,9023,9025,9027,9029,9031,9033,9035,9037],{"class":619,"line":2736},[617,9024,833],{"class":622},[617,9026,857],{"class":626},[617,9028,8970],{"class":630},[617,9030,637],{"class":622},[617,9032,640],{"class":622},[617,9034,8977],{"class":643},[617,9036,640],{"class":622},[617,9038,767],{"class":622},[617,9040,9041,9043,9045],{"class":619,"line":2745},[617,9042,875],{"class":622},[617,9044,836],{"class":626},[617,9046,649],{"class":622},[617,9048,9049],{"class":619,"line":3902},[617,9050,722],{"emptyLinePlaceholder":574},[617,9052,9053,9055,9057,9059,9061,9063,9066,9068],{"class":619,"line":3933},[617,9054,761],{"class":622},[617,9056,836],{"class":626},[617,9058,8942],{"class":630},[617,9060,637],{"class":622},[617,9062,640],{"class":622},[617,9064,9065],{"class":643},"-5",[617,9067,640],{"class":622},[617,9069,649],{"class":622},[617,9071,9072,9074,9076],{"class":619,"line":3954},[617,9073,833],{"class":622},[617,9075,847],{"class":626},[617,9077,767],{"class":622},[617,9079,9080,9082,9084],{"class":619,"line":3973},[617,9081,833],{"class":622},[617,9083,857],{"class":626},[617,9085,767],{"class":622},[617,9087,9088,9090,9092],{"class":619,"line":4005},[617,9089,875],{"class":622},[617,9091,836],{"class":626},[617,9093,649],{"class":622},[617,9095,9096,9098,9100],{"class":619,"line":4014},[617,9097,885],{"class":622},[617,9099,741],{"class":626},[617,9101,649],{"class":622},[617,9103,9104,9106,9108],{"class":619,"line":4023},[617,9105,712],{"class":622},[617,9107,730],{"class":626},[617,9109,649],{"class":622},[484,9111,902],{"id":901},[907,9113,9114,9124],{},[910,9115,9116],{},[913,9117,9118,9120,9122],{},[916,9119,918],{"align":977},[916,9121,921],{"align":977},[916,9123,924],{},[926,9125,9126,9143,9159],{},[913,9127,9128,9135,9141],{},[931,9129,9130],{"align":977},[1649,9131,9132],{},[598,9133,9134],{},"id",[931,9136,9137,9138,9140],{"align":977},"Id of the stencil buffer to use. Each mask must have a ",[598,9139,5332],{}," id. Multiple masks can refer to the same id.",[931,9142],{},[913,9144,9145,9152,9155],{},[931,9146,9147],{"align":977},[1649,9148,9149],{},[598,9150,9151],{},"colorWrite",[931,9153,9154],{"align":977},"Whether the colors of the mask's own material will leak through.",[931,9156,9157],{},[598,9158,951],{},[913,9160,9161,9168,9171],{},[931,9162,9163],{"align":977},[1649,9164,9165],{},[598,9166,9167],{},"depthWrite",[931,9169,9170],{"align":977},"Whether the depth of the mask's own material will leak through.",[931,9172,9173],{},[598,9174,951],{},[484,9176,9178],{"id":9177},"usemask","useMask",[594,9180,9181,9182,9185],{},"Composable that returns the stencil configuration to apply a mask to a material. Use it with ",[598,9183,9184],{},"v-bind"," on materials that should be affected by the mask.",[594,9187,9188],{},[1649,9189,9190],{},"Parameters:",[2193,9192,9193,9198],{},[2196,9194,9195,9197],{},[598,9196,9134],{}," - The mask id to use (number or Ref)",[2196,9199,9200,9203,9204],{},[598,9201,9202],{},"inverse"," - Whether to invert the mask (boolean or Ref), defaults to ",[598,9205,951],{},[606,9207,9209],{"className":608,"code":9208,"language":613,"meta":556,"style":556},"\u003CTresMeshNormalMaterial v-bind=\"useMask(1)\" />\n",[598,9210,9211],{"__ignoreMap":556},[617,9212,9213,9215,9217,9219,9221,9223,9225,9227,9229,9231,9233],{"class":619,"line":557},[617,9214,623],{"class":622},[617,9216,857],{"class":626},[617,9218,8970],{"class":630},[617,9220,637],{"class":622},[617,9222,640],{"class":622},[617,9224,9178],{"class":2414},[617,9226,2417],{"class":663},[617,9228,1854],{"class":2481},[617,9230,3320],{"class":663},[617,9232,640],{"class":622},[617,9234,767],{"class":622},[1307,9236,9237],{},"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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":556,"searchDepth":557,"depth":558,"links":9239},[9240,9241,9242],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},{"id":9177,"depth":558,"text":9178},"Cut out areas of the screen using the stencil buffer.",{},{"title":65,"description":9243},"R8IKeS_cog0AR5hyMVg359sjKmupKD2bH-5ixZXY8zY",{"id":9248,"title":69,"body":9249,"description":9720,"extension":571,"links":572,"meta":9721,"navigation":574,"path":70,"seo":9722,"stem":71,"__hash__":9723},"docs/2.api/1.abstractions/outline.md",{"type":481,"value":9250,"toc":9716},[9251,9256,9267,9269,9616,9618,9714],[588,9252,9253],{},[9254,9255],"abstractions-outline",{},[594,9257,9258,9261,9262,3043,9264,1126],{},[598,9259,9260],{},"\u003COutline />"," creates an inverted-hull outline using its parent's geometry. Supported parents are ",[598,9263,2290],{},[598,9265,9266],{},"\u003CTresSkinnedMesh>",[484,9268,15],{"id":604},[606,9270,9273],{"className":608,"code":9271,"highlights":9272,"language":613,"meta":556,"style":556},"\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",[688,841,892],[598,9274,9275,9295,9313,9337,9345,9349,9357,9375,9383,9391,9410,9441,9461,9469,9478,9510,9518,9536,9555,9563,9592,9600,9608],{"__ignoreMap":556},[617,9276,9277,9279,9281,9283,9285,9287,9289,9291,9293],{"class":619,"line":557},[617,9278,623],{"class":622},[617,9280,627],{"class":626},[617,9282,631],{"class":630},[617,9284,634],{"class":630},[617,9286,637],{"class":622},[617,9288,640],{"class":622},[617,9290,644],{"class":643},[617,9292,640],{"class":622},[617,9294,649],{"class":622},[617,9296,9297,9299,9301,9303,9305,9307,9309,9311],{"class":619,"line":558},[617,9298,657],{"class":656},[617,9300,660],{"class":622},[617,9302,695],{"class":663},[617,9304,673],{"class":622},[617,9306,676],{"class":656},[617,9308,679],{"class":622},[617,9310,704],{"class":643},[617,9312,685],{"class":622},[617,9314,9316,9318,9320,9322,9324,9327,9329,9331,9333,9335],{"class":9315,"line":688},[619,653],[617,9317,657],{"class":656},[617,9319,660],{"class":622},[617,9321,670],{"class":663},[617,9323,667],{"class":622},[617,9325,9326],{"class":663}," Outline",[617,9328,673],{"class":622},[617,9330,676],{"class":656},[617,9332,679],{"class":622},[617,9334,682],{"class":643},[617,9336,685],{"class":622},[617,9338,9339,9341,9343],{"class":619,"line":709},[617,9340,712],{"class":622},[617,9342,627],{"class":626},[617,9344,649],{"class":622},[617,9346,9347],{"class":619,"line":719},[617,9348,722],{"emptyLinePlaceholder":574},[617,9350,9351,9353,9355],{"class":619,"line":725},[617,9352,623],{"class":622},[617,9354,730],{"class":626},[617,9356,649],{"class":622},[617,9358,9359,9361,9363,9365,9367,9369,9371,9373],{"class":619,"line":735},[617,9360,738],{"class":622},[617,9362,741],{"class":626},[617,9364,744],{"class":630},[617,9366,637],{"class":622},[617,9368,640],{"class":622},[617,9370,8765],{"class":643},[617,9372,640],{"class":622},[617,9374,649],{"class":622},[617,9376,9377,9379,9381],{"class":619,"line":758},[617,9378,761],{"class":622},[617,9380,764],{"class":626},[617,9382,767],{"class":622},[617,9384,9385,9387,9389],{"class":619,"line":770},[617,9386,761],{"class":622},[617,9388,775],{"class":626},[617,9390,767],{"class":622},[617,9392,9393,9395,9397,9399,9401,9403,9406,9408],{"class":619,"line":780},[617,9394,761],{"class":622},[617,9396,8436],{"class":626},[617,9398,1847],{"class":630},[617,9400,637],{"class":622},[617,9402,640],{"class":622},[617,9404,9405],{"class":643},"3.14",[617,9407,640],{"class":622},[617,9409,767],{"class":622},[617,9411,9412,9414,9417,9419,9421,9423,9426,9428,9430,9432,9434,9437,9439],{"class":619,"line":785},[617,9413,761],{"class":622},[617,9415,9416],{"class":626},"TresPointLight",[617,9418,1847],{"class":630},[617,9420,637],{"class":622},[617,9422,640],{"class":622},[617,9424,9425],{"class":643},"50",[617,9427,640],{"class":622},[617,9429,1465],{"class":630},[617,9431,637],{"class":622},[617,9433,640],{"class":622},[617,9435,9436],{"class":643},"[2, 2, 0]",[617,9438,640],{"class":622},[617,9440,767],{"class":622},[617,9442,9443,9445,9447,9450,9452,9454,9457,9459],{"class":619,"line":807},[617,9444,761],{"class":622},[617,9446,836],{"class":626},[617,9448,9449],{"class":630}," :position-x",[617,9451,637],{"class":622},[617,9453,640],{"class":622},[617,9455,9456],{"class":643},"-0.75",[617,9458,640],{"class":622},[617,9460,649],{"class":622},[617,9462,9463,9465,9467],{"class":619,"line":611},[617,9464,833],{"class":622},[617,9466,847],{"class":626},[617,9468,767],{"class":622},[617,9470,9471,9473,9476],{"class":619,"line":830},[617,9472,833],{"class":622},[617,9474,9475],{"class":626},"TresMeshPhongMaterial",[617,9477,767],{"class":622},[617,9479,9481,9483,9485,9488,9490,9492,9495,9497,9499,9501,9503,9506,9508],{"class":9480,"line":841},[619,653],[617,9482,833],{"class":622},[617,9484,69],{"class":626},[617,9486,9487],{"class":630}," :thickness",[617,9489,637],{"class":622},[617,9491,640],{"class":622},[617,9493,9494],{"class":643},"7.5",[617,9496,640],{"class":622},[617,9498,2669],{"class":630},[617,9500,637],{"class":622},[617,9502,640],{"class":622},[617,9504,9505],{"class":643},"#82dbc5",[617,9507,640],{"class":622},[617,9509,767],{"class":622},[617,9511,9512,9514,9516],{"class":619,"line":852},[617,9513,875],{"class":622},[617,9515,836],{"class":626},[617,9517,649],{"class":622},[617,9519,9520,9522,9524,9526,9528,9530,9532,9534],{"class":619,"line":862},[617,9521,761],{"class":622},[617,9523,836],{"class":626},[617,9525,9449],{"class":630},[617,9527,637],{"class":622},[617,9529,640],{"class":622},[617,9531,2531],{"class":643},[617,9533,640],{"class":622},[617,9535,649],{"class":622},[617,9537,9538,9540,9542,9544,9546,9548,9551,9553],{"class":619,"line":612},[617,9539,833],{"class":622},[617,9541,3938],{"class":626},[617,9543,1939],{"class":630},[617,9545,637],{"class":622},[617,9547,640],{"class":622},[617,9549,9550],{"class":643},"[0.5]",[617,9552,640],{"class":622},[617,9554,767],{"class":622},[617,9556,9557,9559,9561],{"class":619,"line":882},[617,9558,833],{"class":622},[617,9560,9475],{"class":626},[617,9562,767],{"class":622},[617,9564,9566,9568,9570,9572,9574,9576,9578,9580,9582,9584,9586,9588,9590],{"class":9565,"line":892},[619,653],[617,9567,833],{"class":622},[617,9569,69],{"class":626},[617,9571,9487],{"class":630},[617,9573,637],{"class":622},[617,9575,640],{"class":622},[617,9577,9494],{"class":643},[617,9579,640],{"class":622},[617,9581,2669],{"class":630},[617,9583,637],{"class":622},[617,9585,640],{"class":622},[617,9587,8908],{"class":643},[617,9589,640],{"class":622},[617,9591,767],{"class":622},[617,9593,9594,9596,9598],{"class":619,"line":2605},[617,9595,875],{"class":622},[617,9597,836],{"class":626},[617,9599,649],{"class":622},[617,9601,9602,9604,9606],{"class":619,"line":2614},[617,9603,885],{"class":622},[617,9605,741],{"class":626},[617,9607,649],{"class":622},[617,9609,9610,9612,9614],{"class":619,"line":2634},[617,9611,712],{"class":622},[617,9613,730],{"class":626},[617,9615,649],{"class":622},[484,9617,902],{"id":901},[907,9619,9620,9630],{},[910,9621,9622],{},[913,9623,9624,9626,9628],{},[916,9625,902],{},[916,9627,921],{},[916,9629,924],{},[926,9631,9632,9644,9656,9668,9680,9693],{},[913,9633,9634,9636,9639],{},[931,9635,7527],{},[931,9637,9638],{},"Outline color",[931,9640,9641],{},[598,9642,9643],{},"'black'",[913,9645,9646,9649,9652],{},[931,9647,9648],{},"screenspace",[931,9650,9651],{},"Whether line thickness is independent of zoom",[931,9653,9654],{},[598,9655,951],{},[913,9657,9658,9661,9664],{},[931,9659,9660],{},"opacity",[931,9662,9663],{},"Outline opacity",[931,9665,9666],{},[598,9667,1854],{},[913,9669,9670,9673,9676],{},[931,9671,9672],{},"transparent",[931,9674,9675],{},"Outline transparency",[931,9677,9678],{},[598,9679,951],{},[913,9681,9682,9685,9688],{},[931,9683,9684],{},"thickness",[931,9686,9687],{},"Outline thickness",[931,9689,9690],{},[598,9691,9692],{},"0.05",[913,9694,9695,9698,9709],{},[931,9696,9697],{},"angle",[931,9699,9700,9701,9703,9704],{},"Geometry crease angle (",[598,9702,945],{}," is no crease). See ",[1120,9705,9708],{"href":9706,"rel":9707},"https://threejs.org/docs/#examples/en/utils/BufferGeometryUtils.toCreasedNormals",[1124],"BufferGeometryUtils.toCreasedNormals",[931,9710,9711],{},[598,9712,9713],{},"Math.PI",[1307,9715,1624],{},{"title":556,"searchDepth":557,"depth":558,"links":9717},[9718,9719],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},"Create inverted-hull outlines using parent geometry.",{},{"title":69,"description":9720},"Qb5LM-UoZ_zkrRGWyAbuOtaH4q-8vTeY2hMA8LObyAM",{"id":9725,"title":73,"body":9726,"description":10523,"extension":571,"links":572,"meta":10524,"navigation":574,"path":74,"seo":10525,"stem":75,"__hash__":10526},"docs/2.api/1.abstractions/sampler.md",{"type":481,"value":9727,"toc":10518},[9728,9733,9736,9738,10032,10034,10099,10103,10110,10515],[588,9729,9730],{},[9731,9732],"abstractions-sampler",{},[594,9734,9735],{},"Declarative abstraction around MeshSurfaceSampler & InstancedMesh. It samples points from the passed mesh and transforms an InstancedMesh's matrix to distribute instances on the points.",[484,9737,15],{"id":604},[606,9739,9742],{"className":608,"code":9740,"highlights":9741,"language":613,"meta":556,"style":556},"\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",[558,785,807,611,830,841,852,862,612,882,892],[598,9743,9744,9764,9788,9806,9814,9818,9826,9845,9864,9872,9876,9896,9905,9915,9924,9929,9950,9970,9979,9988,9997,10016,10024],{"__ignoreMap":556},[617,9745,9746,9748,9750,9752,9754,9756,9758,9760,9762],{"class":619,"line":557},[617,9747,623],{"class":622},[617,9749,627],{"class":626},[617,9751,631],{"class":630},[617,9753,634],{"class":630},[617,9755,637],{"class":622},[617,9757,640],{"class":622},[617,9759,644],{"class":643},[617,9761,640],{"class":622},[617,9763,649],{"class":622},[617,9765,9767,9769,9771,9773,9775,9778,9780,9782,9784,9786],{"class":9766,"line":558},[619,653],[617,9768,657],{"class":656},[617,9770,660],{"class":622},[617,9772,670],{"class":663},[617,9774,667],{"class":622},[617,9776,9777],{"class":663}," Sampler",[617,9779,673],{"class":622},[617,9781,676],{"class":656},[617,9783,679],{"class":622},[617,9785,682],{"class":643},[617,9787,685],{"class":622},[617,9789,9790,9792,9794,9796,9798,9800,9802,9804],{"class":619,"line":688},[617,9791,657],{"class":656},[617,9793,660],{"class":622},[617,9795,695],{"class":663},[617,9797,673],{"class":622},[617,9799,676],{"class":656},[617,9801,679],{"class":622},[617,9803,704],{"class":643},[617,9805,685],{"class":622},[617,9807,9808,9810,9812],{"class":619,"line":709},[617,9809,712],{"class":622},[617,9811,627],{"class":626},[617,9813,649],{"class":622},[617,9815,9816],{"class":619,"line":719},[617,9817,722],{"emptyLinePlaceholder":574},[617,9819,9820,9822,9824],{"class":619,"line":725},[617,9821,623],{"class":622},[617,9823,730],{"class":626},[617,9825,649],{"class":622},[617,9827,9828,9830,9832,9834,9836,9838,9841,9843],{"class":619,"line":735},[617,9829,738],{"class":622},[617,9831,741],{"class":626},[617,9833,744],{"class":630},[617,9835,637],{"class":622},[617,9837,640],{"class":622},[617,9839,9840],{"class":643},"#82DBC5",[617,9842,640],{"class":622},[617,9844,649],{"class":622},[617,9846,9847,9849,9851,9853,9855,9857,9860,9862],{"class":619,"line":758},[617,9848,761],{"class":622},[617,9850,764],{"class":626},[617,9852,1465],{"class":630},[617,9854,637],{"class":622},[617,9856,640],{"class":622},[617,9858,9859],{"class":643},"[0, 0.5, 5]",[617,9861,640],{"class":622},[617,9863,767],{"class":622},[617,9865,9866,9868,9870],{"class":619,"line":770},[617,9867,761],{"class":622},[617,9869,775],{"class":626},[617,9871,767],{"class":622},[617,9873,9874],{"class":619,"line":780},[617,9875,722],{"emptyLinePlaceholder":574},[617,9877,9879,9881,9883,9886,9888,9890,9892,9894],{"class":9878,"line":785},[619,653],[617,9880,761],{"class":622},[617,9882,73],{"class":626},[617,9884,9885],{"class":630}," :count",[617,9887,637],{"class":622},[617,9889,640],{"class":622},[617,9891,9425],{"class":643},[617,9893,640],{"class":622},[617,9895,649],{"class":622},[617,9897,9899,9901,9903],{"class":9898,"line":807},[619,653],[617,9900,833],{"class":622},[617,9902,836],{"class":626},[617,9904,649],{"class":622},[617,9906,9908,9910,9913],{"class":9907,"line":611},[619,653],[617,9909,844],{"class":622},[617,9911,9912],{"class":626},"TresTorusGeometry",[617,9914,767],{"class":622},[617,9916,9918,9920,9922],{"class":9917,"line":830},[619,653],[617,9919,865],{"class":622},[617,9921,836],{"class":626},[617,9923,649],{"class":622},[617,9925,9927],{"class":9926,"line":841},[619,653],[617,9928,722],{"emptyLinePlaceholder":574},[617,9930,9932,9934,9937,9939,9941,9943,9946,9948],{"class":9931,"line":852},[619,653],[617,9933,833],{"class":622},[617,9935,9936],{"class":626},"TresInstancedMesh",[617,9938,1939],{"class":630},[617,9940,637],{"class":622},[617,9942,640],{"class":622},[617,9944,9945],{"class":643},"[null!, null!, 1000]",[617,9947,640],{"class":622},[617,9949,649],{"class":622},[617,9951,9953,9955,9957,9959,9961,9963,9966,9968],{"class":9952,"line":862},[619,653],[617,9954,844],{"class":622},[617,9956,847],{"class":626},[617,9958,1939],{"class":630},[617,9960,637],{"class":622},[617,9962,640],{"class":622},[617,9964,9965],{"class":643},"[0.1, 0.1, 0.1]",[617,9967,640],{"class":622},[617,9969,767],{"class":622},[617,9971,9973,9975,9977],{"class":9972,"line":612},[619,653],[617,9974,844],{"class":622},[617,9976,857],{"class":626},[617,9978,767],{"class":622},[617,9980,9982,9984,9986],{"class":9981,"line":882},[619,653],[617,9983,865],{"class":622},[617,9985,9936],{"class":626},[617,9987,649],{"class":622},[617,9989,9991,9993,9995],{"class":9990,"line":892},[619,653],[617,9992,875],{"class":622},[617,9994,73],{"class":626},[617,9996,649],{"class":622},[617,9998,9999,10001,10003,10005,10007,10009,10012,10014],{"class":619,"line":2605},[617,10000,761],{"class":622},[617,10002,8029],{"class":626},[617,10004,1939],{"class":630},[617,10006,637],{"class":622},[617,10008,640],{"class":622},[617,10010,10011],{"class":643},"[10, 10]",[617,10013,640],{"class":622},[617,10015,767],{"class":622},[617,10017,10018,10020,10022],{"class":619,"line":2614},[617,10019,885],{"class":622},[617,10021,741],{"class":626},[617,10023,649],{"class":622},[617,10025,10026,10028,10030],{"class":619,"line":2634},[617,10027,712],{"class":622},[617,10029,730],{"class":626},[617,10031,649],{"class":622},[484,10033,902],{"id":901},[907,10035,10036,10044],{},[910,10037,10038],{},[913,10039,10040,10042],{},[916,10041,902],{},[916,10043,921],{},[926,10045,10046,10055,10066,10077,10088],{},[913,10047,10048,10050],{},[931,10049,5585],{},[931,10051,10052,10054],{},[1649,10053,4272],{}," Surface mesh from which to sample",[913,10056,10057,10060],{},[931,10058,10059],{},"count",[931,10061,10062,10065],{},[1649,10063,10064],{},"Number"," Number of samples",[913,10067,10068,10071],{},[931,10069,10070],{},"instanceMesh",[931,10072,10073,10076],{},[1649,10074,10075],{},"InstanceMesh"," InstanceMesh to scatter",[913,10078,10079,10082],{},[931,10080,10081],{},"weight",[931,10083,10084,10087],{},[1649,10085,10086],{},"String"," A vertex attribute to be used as a weight when sampling",[913,10089,10090,10093],{},[931,10091,10092],{},"transform",[931,10094,10095,10098],{},[1649,10096,10097],{},"Function"," A function that can be used as a custom sampling",[484,10100,10102],{"id":10101},"usesurfacesampler","useSurfaceSampler",[594,10104,10105,10106],{},"A hook to obtain the result of the ",[10107,10108,10109],"sampler",{}," as a buffer. Useful for driving anything other than InstancedMesh via the Sampler.",[606,10111,10114],{"className":608,"code":10112,"highlights":10113,"language":613,"meta":556,"style":556},"\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",[558,780],[598,10115,10116,10136,10160,10178,10201,10205,10218,10231,10235,10255,10289,10295,10303,10307,10315,10333,10351,10359,10363,10382,10390,10398,10402,10409,10423,10437,10442,10461,10469,10477,10481,10499,10507],{"__ignoreMap":556},[617,10117,10118,10120,10122,10124,10126,10128,10130,10132,10134],{"class":619,"line":557},[617,10119,623],{"class":622},[617,10121,627],{"class":626},[617,10123,631],{"class":630},[617,10125,634],{"class":630},[617,10127,637],{"class":622},[617,10129,640],{"class":622},[617,10131,644],{"class":643},[617,10133,640],{"class":622},[617,10135,649],{"class":622},[617,10137,10139,10141,10143,10145,10147,10150,10152,10154,10156,10158],{"class":10138,"line":558},[619,653],[617,10140,657],{"class":656},[617,10142,660],{"class":622},[617,10144,670],{"class":663},[617,10146,667],{"class":622},[617,10148,10149],{"class":663}," useSurfaceSampler",[617,10151,673],{"class":622},[617,10153,676],{"class":656},[617,10155,679],{"class":622},[617,10157,682],{"class":643},[617,10159,685],{"class":622},[617,10161,10162,10164,10166,10168,10170,10172,10174,10176],{"class":619,"line":688},[617,10163,657],{"class":656},[617,10165,660],{"class":622},[617,10167,695],{"class":663},[617,10169,673],{"class":622},[617,10171,676],{"class":656},[617,10173,679],{"class":622},[617,10175,704],{"class":643},[617,10177,685],{"class":622},[617,10179,10180,10182,10184,10186,10188,10191,10193,10195,10197,10199],{"class":619,"line":709},[617,10181,657],{"class":656},[617,10183,660],{"class":622},[617,10185,3852],{"class":663},[617,10187,667],{"class":622},[617,10189,10190],{"class":663}," watch",[617,10192,673],{"class":622},[617,10194,676],{"class":656},[617,10196,679],{"class":622},[617,10198,613],{"class":643},[617,10200,685],{"class":622},[617,10202,10203],{"class":619,"line":719},[617,10204,722],{"emptyLinePlaceholder":574},[617,10206,10207,10209,10212,10214,10216],{"class":619,"line":725},[617,10208,2395],{"class":630},[617,10210,10211],{"class":663}," torusRef ",[617,10213,637],{"class":622},[617,10215,3852],{"class":2414},[617,10217,6515],{"class":663},[617,10219,10220,10222,10225,10227,10229],{"class":619,"line":735},[617,10221,2395],{"class":630},[617,10223,10224],{"class":663}," instancesRef ",[617,10226,637],{"class":622},[617,10228,3852],{"class":2414},[617,10230,6515],{"class":663},[617,10232,10233],{"class":619,"line":758},[617,10234,722],{"emptyLinePlaceholder":574},[617,10236,10237,10240,10243,10245,10247,10249,10251,10253],{"class":619,"line":770},[617,10238,10239],{"class":2414},"watch",[617,10241,10242],{"class":663},"(torusRef",[617,10244,667],{"class":622},[617,10246,3054],{"class":622},[617,10248,3665],{"class":6818},[617,10250,3320],{"class":622},[617,10252,3657],{"class":630},[617,10254,1184],{"class":622},[617,10256,10258,10261,10263,10265,10267,10270,10272,10275,10277,10279,10281,10283,10285,10287],{"class":10257,"line":780},[619,653],[617,10259,10260],{"class":2414}," useSurfaceSampler",[617,10262,2417],{"class":626},[617,10264,3665],{"class":663},[617,10266,667],{"class":622},[617,10268,10269],{"class":2481}," 50",[617,10271,667],{"class":622},[617,10273,10274],{"class":663}," instancesRef",[617,10276,1126],{"class":622},[617,10278,3665],{"class":663},[617,10280,667],{"class":622},[617,10282,679],{"class":622},[617,10284,7527],{"class":643},[617,10286,2420],{"class":622},[617,10288,2428],{"class":626},[617,10290,10291,10293],{"class":619,"line":785},[617,10292,2408],{"class":622},[617,10294,2428],{"class":663},[617,10296,10297,10299,10301],{"class":619,"line":807},[617,10298,712],{"class":622},[617,10300,627],{"class":626},[617,10302,649],{"class":622},[617,10304,10305],{"class":619,"line":611},[617,10306,722],{"emptyLinePlaceholder":574},[617,10308,10309,10311,10313],{"class":619,"line":830},[617,10310,623],{"class":622},[617,10312,730],{"class":626},[617,10314,649],{"class":622},[617,10316,10317,10319,10321,10323,10325,10327,10329,10331],{"class":619,"line":841},[617,10318,738],{"class":622},[617,10320,741],{"class":626},[617,10322,744],{"class":630},[617,10324,637],{"class":622},[617,10326,640],{"class":622},[617,10328,9840],{"class":643},[617,10330,640],{"class":622},[617,10332,649],{"class":622},[617,10334,10335,10337,10339,10341,10343,10345,10347,10349],{"class":619,"line":852},[617,10336,761],{"class":622},[617,10338,764],{"class":626},[617,10340,1465],{"class":630},[617,10342,637],{"class":622},[617,10344,640],{"class":622},[617,10346,9859],{"class":643},[617,10348,640],{"class":622},[617,10350,767],{"class":622},[617,10352,10353,10355,10357],{"class":619,"line":862},[617,10354,761],{"class":622},[617,10356,775],{"class":626},[617,10358,767],{"class":622},[617,10360,10361],{"class":619,"line":612},[617,10362,722],{"emptyLinePlaceholder":574},[617,10364,10365,10367,10369,10371,10373,10375,10378,10380],{"class":619,"line":882},[617,10366,761],{"class":622},[617,10368,836],{"class":626},[617,10370,3852],{"class":630},[617,10372,637],{"class":622},[617,10374,640],{"class":622},[617,10376,10377],{"class":643},"torusRef",[617,10379,640],{"class":622},[617,10381,649],{"class":622},[617,10383,10384,10386,10388],{"class":619,"line":892},[617,10385,833],{"class":622},[617,10387,9912],{"class":626},[617,10389,767],{"class":622},[617,10391,10392,10394,10396],{"class":619,"line":2605},[617,10393,875],{"class":622},[617,10395,836],{"class":626},[617,10397,649],{"class":622},[617,10399,10400],{"class":619,"line":2614},[617,10401,722],{"emptyLinePlaceholder":574},[617,10403,10404,10406],{"class":619,"line":2634},[617,10405,761],{"class":622},[617,10407,10408],{"class":626},"TresInstancedMesh\n",[617,10410,10411,10414,10416,10418,10421],{"class":619,"line":2643},[617,10412,10413],{"class":630}," ref",[617,10415,637],{"class":622},[617,10417,640],{"class":622},[617,10419,10420],{"class":643},"instancesRef",[617,10422,3111],{"class":622},[617,10424,10425,10428,10430,10432,10435],{"class":619,"line":2652},[617,10426,10427],{"class":630}," :args",[617,10429,637],{"class":622},[617,10431,640],{"class":622},[617,10433,10434],{"class":643},"[null!, null!, 1_000]",[617,10436,3111],{"class":622},[617,10438,10439],{"class":619,"line":2661},[617,10440,10441],{"class":622}," >\n",[617,10443,10444,10446,10448,10450,10452,10454,10457,10459],{"class":619,"line":2683},[617,10445,833],{"class":622},[617,10447,3938],{"class":626},[617,10449,1939],{"class":630},[617,10451,637],{"class":622},[617,10453,640],{"class":622},[617,10455,10456],{"class":643},"[0.1, 32, 32]",[617,10458,640],{"class":622},[617,10460,767],{"class":622},[617,10462,10463,10465,10467],{"class":619,"line":2727},[617,10464,833],{"class":622},[617,10466,857],{"class":626},[617,10468,767],{"class":622},[617,10470,10471,10473,10475],{"class":619,"line":2736},[617,10472,875],{"class":622},[617,10474,9936],{"class":626},[617,10476,649],{"class":622},[617,10478,10479],{"class":619,"line":2745},[617,10480,722],{"emptyLinePlaceholder":574},[617,10482,10483,10485,10487,10489,10491,10493,10495,10497],{"class":619,"line":3902},[617,10484,761],{"class":622},[617,10486,8029],{"class":626},[617,10488,1939],{"class":630},[617,10490,637],{"class":622},[617,10492,640],{"class":622},[617,10494,10011],{"class":643},[617,10496,640],{"class":622},[617,10498,767],{"class":622},[617,10500,10501,10503,10505],{"class":619,"line":3933},[617,10502,885],{"class":622},[617,10504,741],{"class":626},[617,10506,649],{"class":622},[617,10508,10509,10511,10513],{"class":619,"line":3954},[617,10510,712],{"class":622},[617,10512,730],{"class":626},[617,10514,649],{"class":622},[1307,10516,10517],{},"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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":556,"searchDepth":557,"depth":558,"links":10519},[10520,10521,10522],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},{"id":10101,"depth":558,"text":10102},"Distribute instances on mesh surfaces using MeshSurfaceSampler.",{},{"title":73,"description":10523},"xQHwbKTVWdqSN1pcdzaa4wwWk4iBXV0lk_0HL4ZdPuo",{"id":10528,"title":77,"body":10529,"description":10836,"extension":571,"links":572,"meta":10837,"navigation":574,"path":78,"seo":10838,"stem":79,"__hash__":10839},"docs/2.api/1.abstractions/screen-sizer.md",{"type":481,"value":10530,"toc":10832},[10531,10536,10545,10548,10550,10822,10824,10830],[2275,10532,10533],{},[10534,10535],"abstractions-screen-sizer",{},[594,10537,1330,10538,10541,10542,10544],{},[598,10539,10540],{},"\u003CTresObject3D />"," wrapper that scales to \"screen space\". By default ",[598,10543,1854],{}," THREE world unit will be translated to 1 screen pixel.",[594,10546,10547],{},"E.g. a BoxGeometry with a height, width, and depth of 100 each, will be scaled to 100 screen pixels in each dimension.",[484,10549,15],{"id":604},[606,10551,10554],{"className":608,"code":10552,"highlights":10553,"language":613,"meta":556,"style":556},"\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",[688,780,841],[598,10555,10556,10576,10594,10618,10626,10630,10638,10657,10676,10684,10693,10701,10720,10728,10736,10745,10764,10772,10780,10788,10806,10814],{"__ignoreMap":556},[617,10557,10558,10560,10562,10564,10566,10568,10570,10572,10574],{"class":619,"line":557},[617,10559,623],{"class":622},[617,10561,627],{"class":626},[617,10563,631],{"class":630},[617,10565,634],{"class":630},[617,10567,637],{"class":622},[617,10569,640],{"class":622},[617,10571,644],{"class":643},[617,10573,640],{"class":622},[617,10575,649],{"class":622},[617,10577,10578,10580,10582,10584,10586,10588,10590,10592],{"class":619,"line":558},[617,10579,657],{"class":656},[617,10581,660],{"class":622},[617,10583,695],{"class":663},[617,10585,673],{"class":622},[617,10587,676],{"class":656},[617,10589,679],{"class":622},[617,10591,704],{"class":643},[617,10593,685],{"class":622},[617,10595,10597,10599,10601,10603,10605,10608,10610,10612,10614,10616],{"class":10596,"line":688},[619,653],[617,10598,657],{"class":656},[617,10600,660],{"class":622},[617,10602,670],{"class":663},[617,10604,667],{"class":622},[617,10606,10607],{"class":663}," ScreenSizer",[617,10609,673],{"class":622},[617,10611,676],{"class":656},[617,10613,679],{"class":622},[617,10615,682],{"class":643},[617,10617,685],{"class":622},[617,10619,10620,10622,10624],{"class":619,"line":709},[617,10621,712],{"class":622},[617,10623,627],{"class":626},[617,10625,649],{"class":622},[617,10627,10628],{"class":619,"line":719},[617,10629,722],{"emptyLinePlaceholder":574},[617,10631,10632,10634,10636],{"class":619,"line":725},[617,10633,623],{"class":622},[617,10635,730],{"class":626},[617,10637,649],{"class":622},[617,10639,10640,10642,10644,10646,10648,10650,10653,10655],{"class":619,"line":735},[617,10641,738],{"class":622},[617,10643,741],{"class":626},[617,10645,744],{"class":630},[617,10647,637],{"class":622},[617,10649,640],{"class":622},[617,10651,10652],{"class":643},"#3f3f3f",[617,10654,640],{"class":622},[617,10656,649],{"class":622},[617,10658,10659,10661,10663,10665,10667,10669,10672,10674],{"class":619,"line":758},[617,10660,761],{"class":622},[617,10662,764],{"class":626},[617,10664,1465],{"class":630},[617,10666,637],{"class":622},[617,10668,640],{"class":622},[617,10670,10671],{"class":643},"[10, 10, 10]",[617,10673,640],{"class":622},[617,10675,767],{"class":622},[617,10677,10678,10680,10682],{"class":619,"line":770},[617,10679,761],{"class":622},[617,10681,775],{"class":626},[617,10683,767],{"class":622},[617,10685,10687,10689,10691],{"class":10686,"line":780},[619,653],[617,10688,761],{"class":622},[617,10690,77],{"class":626},[617,10692,649],{"class":622},[617,10694,10695,10697,10699],{"class":619,"line":785},[617,10696,833],{"class":622},[617,10698,836],{"class":626},[617,10700,649],{"class":622},[617,10702,10703,10705,10707,10709,10711,10713,10716,10718],{"class":619,"line":807},[617,10704,844],{"class":622},[617,10706,847],{"class":626},[617,10708,1939],{"class":630},[617,10710,637],{"class":622},[617,10712,640],{"class":622},[617,10714,10715],{"class":643},"[100, 100, 100]",[617,10717,640],{"class":622},[617,10719,767],{"class":622},[617,10721,10722,10724,10726],{"class":619,"line":611},[617,10723,844],{"class":622},[617,10725,857],{"class":626},[617,10727,767],{"class":622},[617,10729,10730,10732,10734],{"class":619,"line":830},[617,10731,865],{"class":622},[617,10733,836],{"class":626},[617,10735,649],{"class":622},[617,10737,10739,10741,10743],{"class":10738,"line":841},[619,653],[617,10740,875],{"class":622},[617,10742,77],{"class":626},[617,10744,649],{"class":622},[617,10746,10747,10749,10751,10753,10755,10757,10760,10762],{"class":619,"line":852},[617,10748,761],{"class":622},[617,10750,836],{"class":626},[617,10752,9449],{"class":630},[617,10754,637],{"class":622},[617,10756,640],{"class":622},[617,10758,10759],{"class":643},"5",[617,10761,640],{"class":622},[617,10763,649],{"class":622},[617,10765,10766,10768,10770],{"class":619,"line":862},[617,10767,833],{"class":622},[617,10769,847],{"class":626},[617,10771,767],{"class":622},[617,10773,10774,10776,10778],{"class":619,"line":612},[617,10775,833],{"class":622},[617,10777,857],{"class":626},[617,10779,767],{"class":622},[617,10781,10782,10784,10786],{"class":619,"line":882},[617,10783,875],{"class":622},[617,10785,836],{"class":626},[617,10787,649],{"class":622},[617,10789,10790,10792,10794,10796,10798,10800,10802,10804],{"class":619,"line":892},[617,10791,761],{"class":622},[617,10793,8029],{"class":626},[617,10795,1939],{"class":630},[617,10797,637],{"class":622},[617,10799,640],{"class":622},[617,10801,10011],{"class":643},[617,10803,640],{"class":622},[617,10805,767],{"class":622},[617,10807,10808,10810,10812],{"class":619,"line":2605},[617,10809,885],{"class":622},[617,10811,741],{"class":626},[617,10813,649],{"class":622},[617,10815,10816,10818,10820],{"class":619,"line":2614},[617,10817,712],{"class":622},[617,10819,730],{"class":626},[617,10821,649],{"class":622},[484,10823,902],{"id":901},[594,10825,10826,10827,1126],{},"Inherits all props from ",[598,10828,10829],{},"THREE.Object3D",[1307,10831,1624],{},{"title":556,"searchDepth":557,"depth":558,"links":10833},[10834,10835],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},"Scale objects to screen space where 1 unit equals 1 pixel.",{},{"title":77,"description":10836},"tMjbiq6RDx6TiRe5Yr52gRCjsYdoekkV4e0s25K29s0",{"id":10841,"title":81,"body":10842,"description":11212,"extension":571,"links":572,"meta":11213,"navigation":574,"path":82,"seo":11214,"stem":83,"__hash__":11215},"docs/2.api/1.abstractions/screen-space.md",{"type":481,"value":10843,"toc":11208},[10844,10849,10862,10884,10886,11112,11114,11206],[588,10845,10846],{},[10847,10848],"abstractions-screen-space",{},[594,10850,10851,10854,10855,10858,10859,1126],{},[598,10852,10853],{},"\u003CScreenSpace />"," wraps its children in a ",[598,10856,10857],{},"\u003CTresGroup />"," and positions them in front of the active camera at ",[598,10860,10861],{},":depth",[594,10863,10864,10865,1652,10867,1652,10869,1652,10871,10873,10874,10877,10878,7599,10881,1126],{},"Additionally, the ",[598,10866,935],{},[598,10868,958],{},[598,10870,977],{},[598,10872,996],{}," props can be used to position them similarly to CSS ",[598,10875,10876],{},"position: absolute"," property when using a ",[598,10879,10880],{},"PerspectiveCamera",[598,10882,10883],{},"OrtographicCamera",[484,10885,15],{"id":604},[606,10887,10890],{"className":608,"code":10888,"highlights":10889,"language":613,"meta":556,"style":556},"\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",[558,785,852],[598,10891,10892,10912,10936,10954,10962,10966,10974,10993,11001,11009,11013,11033,11041,11049,11057,11065,11074,11078,11096,11104],{"__ignoreMap":556},[617,10893,10894,10896,10898,10900,10902,10904,10906,10908,10910],{"class":619,"line":557},[617,10895,623],{"class":622},[617,10897,627],{"class":626},[617,10899,631],{"class":630},[617,10901,634],{"class":630},[617,10903,637],{"class":622},[617,10905,640],{"class":622},[617,10907,644],{"class":643},[617,10909,640],{"class":622},[617,10911,649],{"class":622},[617,10913,10915,10917,10919,10921,10923,10926,10928,10930,10932,10934],{"class":10914,"line":558},[619,653],[617,10916,657],{"class":656},[617,10918,660],{"class":622},[617,10920,670],{"class":663},[617,10922,667],{"class":622},[617,10924,10925],{"class":663}," ScreenSpace",[617,10927,673],{"class":622},[617,10929,676],{"class":656},[617,10931,679],{"class":622},[617,10933,682],{"class":643},[617,10935,685],{"class":622},[617,10937,10938,10940,10942,10944,10946,10948,10950,10952],{"class":619,"line":688},[617,10939,657],{"class":656},[617,10941,660],{"class":622},[617,10943,695],{"class":663},[617,10945,673],{"class":622},[617,10947,676],{"class":656},[617,10949,679],{"class":622},[617,10951,704],{"class":643},[617,10953,685],{"class":622},[617,10955,10956,10958,10960],{"class":619,"line":709},[617,10957,712],{"class":622},[617,10959,627],{"class":626},[617,10961,649],{"class":622},[617,10963,10964],{"class":619,"line":719},[617,10965,722],{"emptyLinePlaceholder":574},[617,10967,10968,10970,10972],{"class":619,"line":725},[617,10969,623],{"class":622},[617,10971,730],{"class":626},[617,10973,649],{"class":622},[617,10975,10976,10978,10980,10982,10984,10986,10989,10991],{"class":619,"line":735},[617,10977,738],{"class":622},[617,10979,741],{"class":626},[617,10981,744],{"class":630},[617,10983,637],{"class":622},[617,10985,640],{"class":622},[617,10987,10988],{"class":643},"#333",[617,10990,640],{"class":622},[617,10992,649],{"class":622},[617,10994,10995,10997,10999],{"class":619,"line":758},[617,10996,761],{"class":622},[617,10998,764],{"class":626},[617,11000,767],{"class":622},[617,11002,11003,11005,11007],{"class":619,"line":770},[617,11004,761],{"class":622},[617,11006,775],{"class":626},[617,11008,767],{"class":622},[617,11010,11011],{"class":619,"line":780},[617,11012,722],{"emptyLinePlaceholder":574},[617,11014,11016,11018,11020,11023,11025,11027,11029,11031],{"class":11015,"line":785},[619,653],[617,11017,761],{"class":622},[617,11019,81],{"class":626},[617,11021,11022],{"class":630}," :depth",[617,11024,637],{"class":622},[617,11026,640],{"class":622},[617,11028,10759],{"class":643},[617,11030,640],{"class":622},[617,11032,649],{"class":622},[617,11034,11035,11037,11039],{"class":619,"line":807},[617,11036,833],{"class":622},[617,11038,836],{"class":626},[617,11040,649],{"class":622},[617,11042,11043,11045,11047],{"class":619,"line":611},[617,11044,844],{"class":622},[617,11046,9912],{"class":626},[617,11048,767],{"class":622},[617,11050,11051,11053,11055],{"class":619,"line":830},[617,11052,844],{"class":622},[617,11054,857],{"class":626},[617,11056,767],{"class":622},[617,11058,11059,11061,11063],{"class":619,"line":841},[617,11060,865],{"class":622},[617,11062,836],{"class":626},[617,11064,649],{"class":622},[617,11066,11068,11070,11072],{"class":11067,"line":852},[619,653],[617,11069,875],{"class":622},[617,11071,81],{"class":626},[617,11073,649],{"class":622},[617,11075,11076],{"class":619,"line":862},[617,11077,722],{"emptyLinePlaceholder":574},[617,11079,11080,11082,11084,11086,11088,11090,11092,11094],{"class":619,"line":612},[617,11081,761],{"class":622},[617,11083,8029],{"class":626},[617,11085,1939],{"class":630},[617,11087,637],{"class":622},[617,11089,640],{"class":622},[617,11091,10011],{"class":643},[617,11093,640],{"class":622},[617,11095,767],{"class":622},[617,11097,11098,11100,11102],{"class":619,"line":882},[617,11099,885],{"class":622},[617,11101,741],{"class":626},[617,11103,649],{"class":622},[617,11105,11106,11108,11110],{"class":619,"line":892},[617,11107,712],{"class":622},[617,11109,730],{"class":626},[617,11111,649],{"class":622},[484,11113,902],{"id":901},[907,11115,11116,11126],{},[910,11117,11118],{},[913,11119,11120,11122,11124],{},[916,11121,918],{"align":977},[916,11123,921],{"align":977},[916,11125,924],{},[926,11127,11128,11142,11161,11175,11192],{},[913,11129,11130,11135,11138],{},[931,11131,11132],{"align":977},[598,11133,11134],{},"depth",[931,11136,11137],{"align":977},"Distance from the camera",[931,11139,11140],{},[598,11141,8949],{},[913,11143,11144,11148,11156],{},[931,11145,11146],{"align":977},[598,11147,935],{},[931,11149,11150,11151,11153,11154],{"align":977},"Similar to CSS ",[598,11152,935],{}," property. Cannot be used with ",[598,11155,958],{},[931,11157,11158,11160],{},[598,11159,1926],{}," (vertical center of the screen)",[913,11162,11163,11167,11173],{},[931,11164,11165],{"align":977},[598,11166,958],{},[931,11168,11150,11169,11153,11171],{"align":977},[598,11170,958],{},[598,11172,935],{},[931,11174],{},[913,11176,11177,11181,11187],{},[931,11178,11179],{"align":977},[598,11180,977],{},[931,11182,11150,11183,11153,11185],{"align":977},[598,11184,977],{},[598,11186,996],{},[931,11188,11189,11191],{},[598,11190,1926],{}," (horizontal center of the screen)",[913,11193,11194,11198,11204],{},[931,11195,11196],{"align":977},[598,11197,996],{},[931,11199,11150,11200,11153,11202],{"align":977},[598,11201,996],{},[598,11203,977],{},[931,11205],{},[1307,11207,1624],{},{"title":556,"searchDepth":557,"depth":558,"links":11209},[11210,11211],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},"Position objects in front of the camera with CSS-like positioning.",{},{"title":81,"description":11212},"HsnjizzUu-Otw_0NXfsXgH-NRKdmkNQdklnC4aRzjC8",[11217,12441,12822,13123,13825,14181],{"id":11218,"title":91,"body":11219,"description":12437,"extension":571,"links":572,"meta":12438,"navigation":574,"path":92,"seo":12439,"stem":93,"__hash__":12440},"docs/2.api/2.controls/camera-controls.md",{"type":481,"value":11220,"toc":12428},[11221,11226,11237,11245,11247,11441,11446,11448,11451,11901,11904,11933,12058,12062,12191,12200,12203,12327,12331,12386,12425],[588,11222,11223],{},[11224,11225],"controls-camera-controls",{},[594,11227,11228,11233,11234,11236],{},[1120,11229,11232],{"href":11230,"rel":11231},"https://github.com/yomotsu/camera-controls",[1124],"CameraControls"," is a camera controller similar to ",[1120,11235,775],{"href":104}," yet supports smooth transitions and more features.",[594,11238,11239,11240,1126],{},"However, it is thirty party library for ThreeJS. So to use it you would need to install and import using ",[1120,11241,11244],{"href":11242,"rel":11243},"https://www.npmjs.com/package/camera-controls",[1124],"npm",[484,11246,15],{"id":604},[606,11248,11251],{"className":608,"code":11249,"highlights":11250,"language":613,"meta":556,"style":556},"\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",[735],[598,11252,11253,11263,11282,11290,11298,11316,11335,11344,11362,11382,11390,11398,11417,11425,11433],{"__ignoreMap":556},[617,11254,11255,11257,11259,11261],{"class":619,"line":557},[617,11256,623],{"class":622},[617,11258,627],{"class":626},[617,11260,631],{"class":630},[617,11262,649],{"class":622},[617,11264,11265,11267,11269,11272,11274,11276,11278,11280],{"class":619,"line":558},[617,11266,657],{"class":656},[617,11268,660],{"class":622},[617,11270,11271],{"class":663}," CameraControls",[617,11273,673],{"class":622},[617,11275,676],{"class":656},[617,11277,8270],{"class":622},[617,11279,682],{"class":643},[617,11281,3111],{"class":622},[617,11283,11284,11286,11288],{"class":619,"line":688},[617,11285,712],{"class":622},[617,11287,627],{"class":626},[617,11289,649],{"class":622},[617,11291,11292,11294,11296],{"class":619,"line":709},[617,11293,623],{"class":622},[617,11295,730],{"class":626},[617,11297,649],{"class":622},[617,11299,11300,11302,11304,11306,11308,11310,11312,11314],{"class":619,"line":719},[617,11301,738],{"class":622},[617,11303,741],{"class":626},[617,11305,744],{"class":630},[617,11307,637],{"class":622},[617,11309,640],{"class":622},[617,11311,9840],{"class":643},[617,11313,640],{"class":622},[617,11315,649],{"class":622},[617,11317,11318,11320,11322,11324,11326,11328,11331,11333],{"class":619,"line":725},[617,11319,761],{"class":622},[617,11321,764],{"class":626},[617,11323,1465],{"class":630},[617,11325,637],{"class":622},[617,11327,640],{"class":622},[617,11329,11330],{"class":643},"[3, 3, 3]",[617,11332,640],{"class":622},[617,11334,767],{"class":622},[617,11336,11338,11340,11342],{"class":11337,"line":735},[619,653],[617,11339,761],{"class":622},[617,11341,11232],{"class":626},[617,11343,767],{"class":622},[617,11345,11346,11348,11350,11352,11354,11356,11358,11360],{"class":619,"line":758},[617,11347,761],{"class":622},[617,11349,201],{"class":626},[617,11351,793],{"class":630},[617,11353,637],{"class":622},[617,11355,640],{"class":622},[617,11357,800],{"class":643},[617,11359,640],{"class":622},[617,11361,649],{"class":622},[617,11363,11364,11366,11369,11371,11373,11375,11378,11380],{"class":619,"line":770},[617,11365,833],{"class":622},[617,11367,11368],{"class":626},"TresMeshToonMaterial",[617,11370,2669],{"class":630},[617,11372,637],{"class":622},[617,11374,640],{"class":622},[617,11376,11377],{"class":643},"orange",[617,11379,640],{"class":622},[617,11381,767],{"class":622},[617,11383,11384,11386,11388],{"class":619,"line":780},[617,11385,875],{"class":622},[617,11387,201],{"class":626},[617,11389,649],{"class":622},[617,11391,11392,11394,11396],{"class":619,"line":785},[617,11393,761],{"class":622},[617,11395,8436],{"class":626},[617,11397,767],{"class":622},[617,11399,11400,11402,11404,11406,11408,11410,11413,11415],{"class":619,"line":807},[617,11401,761],{"class":622},[617,11403,8455],{"class":626},[617,11405,1465],{"class":630},[617,11407,637],{"class":622},[617,11409,640],{"class":622},[617,11411,11412],{"class":643},"[0, 2, 4]",[617,11414,640],{"class":622},[617,11416,767],{"class":622},[617,11418,11419,11421,11423],{"class":619,"line":611},[617,11420,761],{"class":622},[617,11422,8029],{"class":626},[617,11424,767],{"class":622},[617,11426,11427,11429,11431],{"class":619,"line":830},[617,11428,885],{"class":622},[617,11430,741],{"class":626},[617,11432,649],{"class":622},[617,11434,11435,11437,11439],{"class":619,"line":841},[617,11436,712],{"class":622},[617,11438,730],{"class":626},[617,11440,649],{"class":622},[3179,11442,11443],{},[594,11444,11445],{},"Is really important that the Perspective camera is set first in the canvas. Otherwise might break.",[484,11447,902],{"id":901},[594,11449,11450],{},"Certainly! Here's the properties of the object in raw markdown table format:",[907,11452,11453,11463],{},[910,11454,11455],{},[913,11456,11457,11459,11461],{},[916,11458,918],{"align":977},[916,11460,921],{"align":977},[916,11462,924],{},[926,11464,11465,11479,11493,11507,11521,11535,11550,11565,11580,11595,11609,11625,11639,11653,11668,11683,11697,11712,11726,11740,11756,11771,11787,11801,11819,11834,11852,11866,11885],{},[913,11466,11467,11472,11475],{},[931,11468,11469],{"align":977},[1649,11470,11471],{},"makeDefault",[931,11473,11474],{"align":977},"Whether to make this the default controls.",[931,11476,11477],{},[598,11478,951],{},[913,11480,11481,11486,11489],{},[931,11482,11483],{"align":977},[1649,11484,11485],{},"camera",[931,11487,11488],{"align":977},"The camera to control.",[931,11490,11491],{},[598,11492,1159],{},[913,11494,11495,11500,11503],{},[931,11496,11497],{"align":977},[1649,11498,11499],{},"domElement",[931,11501,11502],{"align":977},"The DOM element to listen to.",[931,11504,11505],{},[598,11506,1159],{},[913,11508,11509,11514,11517],{},[931,11510,11511],{"align":977},[1649,11512,11513],{},"minPolarAngle",[931,11515,11516],{"align":977},"Minimum vertical angle in radians.",[931,11518,11519],{},[598,11520,945],{},[913,11522,11523,11528,11531],{},[931,11524,11525],{"align":977},[1649,11526,11527],{},"maxPolarAngle",[931,11529,11530],{"align":977},"Maximum vertical angle in radians.",[931,11532,11533],{},[598,11534,9713],{},[913,11536,11537,11542,11545],{},[931,11538,11539],{"align":977},[1649,11540,11541],{},"minAzimuthAngle",[931,11543,11544],{"align":977},"Minimum horizontal angle in radians.",[931,11546,11547],{},[598,11548,11549],{},"-Infinity",[913,11551,11552,11557,11560],{},[931,11553,11554],{"align":977},[1649,11555,11556],{},"maxAzimuthAngle",[931,11558,11559],{"align":977},"Maximum horizontal angle in radians.",[931,11561,11562],{},[598,11563,11564],{},"Infinity",[913,11566,11567,11572,11575],{},[931,11568,11569],{"align":977},[1649,11570,11571],{},"distance",[931,11573,11574],{"align":977},"Current distance.",[931,11576,11577],{},[598,11578,11579],{},"camera.position.z",[913,11581,11582,11587,11590],{},[931,11583,11584],{"align":977},[1649,11585,11586],{},"minDistance",[931,11588,11589],{"align":977},"Minimum distance for dolly. PerspectiveCamera only.",[931,11591,11592],{},[598,11593,11594],{},"Number.EPSILON",[913,11596,11597,11602,11605],{},[931,11598,11599],{"align":977},[1649,11600,11601],{},"maxDistance",[931,11603,11604],{"align":977},"Maximum distance for dolly. PerspectiveCamera only.",[931,11606,11607],{},[598,11608,11564],{},[913,11610,11611,11616,11621],{},[931,11612,11613],{"align":977},[1649,11614,11615],{},"infinityDolly",[931,11617,11618,11620],{"align":977},[598,11619,941],{}," to enable Infinity Dolly for wheel and pinch.",[931,11622,11623],{},[598,11624,951],{},[913,11626,11627,11632,11635],{},[931,11628,11629],{"align":977},[1649,11630,11631],{},"minZoom",[931,11633,11634],{"align":977},"Minimum camera zoom.",[931,11636,11637],{},[598,11638,1866],{},[913,11640,11641,11646,11649],{},[931,11642,11643],{"align":977},[1649,11644,11645],{},"maxZoom",[931,11647,11648],{"align":977},"Maximum camera zoom.",[931,11650,11651],{},[598,11652,11564],{},[913,11654,11655,11660,11663],{},[931,11656,11657],{"align":977},[1649,11658,11659],{},"smoothTime",[931,11661,11662],{"align":977},"Approximate time in seconds to reach the target. A smaller value will reach the target faster.",[931,11664,11665],{},[598,11666,11667],{},"0.25",[913,11669,11670,11675,11678],{},[931,11671,11672],{"align":977},[1649,11673,11674],{},"draggingSmoothTime",[931,11676,11677],{"align":977},"The smoothTime while dragging.",[931,11679,11680],{},[598,11681,11682],{},"0.125",[913,11684,11685,11690,11693],{},[931,11686,11687],{"align":977},[1649,11688,11689],{},"maxSpeed",[931,11691,11692],{"align":977},"Max transition speed in units per second.",[931,11694,11695],{},[598,11696,11564],{},[913,11698,11699,11704,11707],{},[931,11700,11701],{"align":977},[1649,11702,11703],{},"azimuthRotateSpeed",[931,11705,11706],{"align":977},"Speed of azimuth (horizontal) rotation.",[931,11708,11709],{},[598,11710,11711],{},"1.0",[913,11713,11714,11719,11722],{},[931,11715,11716],{"align":977},[1649,11717,11718],{},"polarRotateSpeed",[931,11720,11721],{"align":977},"Speed of polar (vertical) rotation.",[931,11723,11724],{},[598,11725,11711],{},[913,11727,11728,11733,11736],{},[931,11729,11730],{"align":977},[1649,11731,11732],{},"dollySpeed",[931,11734,11735],{"align":977},"Speed of mouse-wheel dollying.",[931,11737,11738],{},[598,11739,11711],{},[913,11741,11742,11747,11752],{},[931,11743,11744],{"align":977},[1649,11745,11746],{},"dollyDragInverted",[931,11748,11749,11751],{"align":977},[598,11750,941],{}," to invert direction when dollying or zooming via drag.",[931,11753,11754],{},[598,11755,951],{},[913,11757,11758,11763,11766],{},[931,11759,11760],{"align":977},[1649,11761,11762],{},"truckSpeed",[931,11764,11765],{"align":977},"Speed of drag for truck and pedestal.",[931,11767,11768],{},[598,11769,11770],{},"2.0",[913,11772,11773,11778,11783],{},[931,11774,11775],{"align":977},[1649,11776,11777],{},"dollyToCursor",[931,11779,11780,11782],{"align":977},[598,11781,941],{}," to enable Dolly-in to the mouse cursor coords.",[931,11784,11785],{},[598,11786,951],{},[913,11788,11789,11794,11797],{},[931,11790,11791],{"align":977},[1649,11792,11793],{},"dragToOffset",[931,11795,11796],{"align":977},"Whether to drag to offset.",[931,11798,11799],{},[598,11800,951],{},[913,11802,11803,11808,11815],{},[931,11804,11805],{"align":977},[1649,11806,11807],{},"verticalDragToForward",[931,11809,11810,11811,11814],{"align":977},"The same as ",[598,11812,11813],{},".screenSpacePanning"," in Three.js's OrbitControls.",[931,11816,11817],{},[598,11818,951],{},[913,11820,11821,11826,11829],{},[931,11822,11823],{"align":977},[1649,11824,11825],{},"boundaryFriction",[931,11827,11828],{"align":977},"Friction ratio of the boundary.",[931,11830,11831],{},[598,11832,11833],{},"0.0",[913,11835,11836,11841,11848],{},[931,11837,11838],{"align":977},[1649,11839,11840],{},"restThreshold",[931,11842,11843,11844,11847],{"align":977},"Controls how soon the ",[598,11845,11846],{},"rest"," event fires as the camera slows.",[931,11849,11850],{},[598,11851,1866],{},[913,11853,11854,11859,11862],{},[931,11855,11856],{"align":977},[1649,11857,11858],{},"colliderMeshes",[931,11860,11861],{"align":977},"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.",[931,11863,11864],{},[598,11865,3559],{},[913,11867,11868,11873,11876],{},[931,11869,11870],{"align":977},[1649,11871,11872],{},"mouseButtons",[931,11874,11875],{"align":977},"Configuration of actions on mouse input.",[931,11877,1118,11878,11884],{},[1120,11879,11881],{"href":11880},"#user-input-config",[598,11882,11883],{},"User input config"," for details",[913,11886,11887,11892,11895],{},[931,11888,11889],{"align":977},[1649,11890,11891],{},"touches",[931,11893,11894],{"align":977},"Configuration of actions on touch.",[931,11896,1118,11897,11884],{},[1120,11898,11899],{"href":11880},[598,11900,11883],{},[484,11902,11883],{"id":11903},"user-input-config",[594,11905,11906,11907,11909,11910,11912,11913,11921,11922,11924,11925,11928,11929,11932],{},"You can easily override the default user input config by defining ",[598,11908,11872],{}," and/or ",[598,11911,11891],{}," props that correspond to ",[1120,11914,11917,11920],{"href":11915,"rel":11916},"https://github.com/yomotsu/camera-controls?#user-input-config",[1124],[598,11918,11919],{},"camera-controls"," settings",". For ease of use, we're re-exporting the ",[598,11923,11232],{}," class as ",[598,11926,11927],{},"BaseCameraControls"," which gives you access to the ",[598,11930,11931],{},"ACTION"," enum.",[606,11934,11936],{"className":608,"code":11935,"language":613,"meta":556,"style":556},"\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",[598,11937,11938,11958,11981,11989,11993,12001,12006,12013,12027,12041,12046,12050],{"__ignoreMap":556},[617,11939,11940,11942,11944,11946,11948,11950,11952,11954,11956],{"class":619,"line":557},[617,11941,623],{"class":622},[617,11943,627],{"class":626},[617,11945,634],{"class":630},[617,11947,637],{"class":622},[617,11949,640],{"class":622},[617,11951,644],{"class":643},[617,11953,640],{"class":622},[617,11955,631],{"class":630},[617,11957,649],{"class":622},[617,11959,11960,11962,11964,11967,11969,11971,11973,11975,11977,11979],{"class":619,"line":558},[617,11961,657],{"class":656},[617,11963,660],{"class":622},[617,11965,11966],{"class":663}," BaseCameraControls",[617,11968,667],{"class":622},[617,11970,11271],{"class":663},[617,11972,673],{"class":622},[617,11974,676],{"class":656},[617,11976,679],{"class":622},[617,11978,682],{"class":643},[617,11980,685],{"class":622},[617,11982,11983,11985,11987],{"class":619,"line":688},[617,11984,712],{"class":622},[617,11986,627],{"class":626},[617,11988,649],{"class":622},[617,11990,11991],{"class":619,"line":709},[617,11992,722],{"emptyLinePlaceholder":574},[617,11994,11995,11997,11999],{"class":619,"line":719},[617,11996,623],{"class":622},[617,11998,730],{"class":626},[617,12000,649],{"class":622},[617,12002,12003],{"class":619,"line":725},[617,12004,12005],{"class":663}," ...\n",[617,12007,12008,12010],{"class":619,"line":735},[617,12009,738],{"class":622},[617,12011,12012],{"class":626},"CameraControls\n",[617,12014,12015,12018,12020,12022,12025],{"class":619,"line":758},[617,12016,12017],{"class":630}," :mouse-buttons",[617,12019,637],{"class":622},[617,12021,640],{"class":622},[617,12023,12024],{"class":643},"{ left: BaseCameraControls.ACTION.DOLLY }",[617,12026,3111],{"class":622},[617,12028,12029,12032,12034,12036,12039],{"class":619,"line":770},[617,12030,12031],{"class":630}," :touches",[617,12033,637],{"class":622},[617,12035,640],{"class":622},[617,12037,12038],{"class":643},"{ one: BaseCameraControls.ACTION.TOUCH_TRUCK }",[617,12040,3111],{"class":622},[617,12042,12043],{"class":619,"line":780},[617,12044,12045],{"class":622}," />\n",[617,12047,12048],{"class":619,"line":785},[617,12049,12005],{"class":663},[617,12051,12052,12054,12056],{"class":619,"line":807},[617,12053,712],{"class":622},[617,12055,730],{"class":626},[617,12057,649],{"class":622},[4031,12059,12061],{"id":12060},"mouse-buttons","Mouse buttons",[907,12063,12064,12076],{},[910,12065,12066],{},[913,12067,12068,12071,12074],{},[916,12069,12070],{},"Button to assign",[916,12072,12073],{},"Options",[916,12075,924],{},[926,12077,12078,12110,12135,12165],{},[913,12079,12080,12085,12106],{},[931,12081,12082],{},[598,12083,12084],{},"mouseButtons.left",[931,12086,12087,12090,12091,12090,12094,12090,12097,12090,12100,12090,12103],{},[598,12088,12089],{},"ROTATE"," | ",[598,12092,12093],{},"TRUCK",[598,12095,12096],{},"OFFSET",[598,12098,12099],{},"DOLLY",[598,12101,12102],{},"ZOOM",[598,12104,12105],{},"NONE",[931,12107,12108],{},[598,12109,12089],{},[913,12111,12112,12117,12131],{},[931,12113,12114],{},[598,12115,12116],{},"mouseButtons.right",[931,12118,12119,12090,12121,12090,12123,12090,12125,12090,12127,12090,12129],{},[598,12120,12089],{},[598,12122,12093],{},[598,12124,12096],{},[598,12126,12099],{},[598,12128,12102],{},[598,12130,12105],{},[931,12132,12133],{},[598,12134,12093],{},[913,12136,12137,12143,12157],{},[931,12138,12139,12142],{},[598,12140,12141],{},"mouseButtons.wheel"," ¹",[931,12144,12145,12090,12147,12090,12149,12090,12151,12090,12153,12090,12155],{},[598,12146,12089],{},[598,12148,12093],{},[598,12150,12096],{},[598,12152,12099],{},[598,12154,12102],{},[598,12156,12105],{},[931,12158,12159,12161,12162,12164],{},[598,12160,12099],{}," for Perspective camera, ",[598,12163,12102],{}," for Orthographic camera.",[913,12166,12167,12173,12187],{},[931,12168,12169,12172],{},[598,12170,12171],{},"mouseButtons.middle"," ²",[931,12174,12175,12090,12177,12090,12179,12090,12181,12090,12183,12090,12185],{},[598,12176,12089],{},[598,12178,12093],{},[598,12180,12096],{},[598,12182,12099],{},[598,12184,12102],{},[598,12186,12105],{},[931,12188,12189],{},[598,12190,12099],{},[12192,12193,12194,12197],"ol",{},[2196,12195,12196],{},"Mouse wheel event for scroll \"up/down\", on mac \"up/down/left/right\".",[2196,12198,12199],{},"Mouse wheel \"button\" click event.",[4031,12201,12202],{"id":11891},"Touches",[907,12204,12205,12216],{},[910,12206,12207],{},[913,12208,12209,12212,12214],{},[916,12210,12211],{},"Fingers to assign",[916,12213,12073],{},[916,12215,924],{},[926,12217,12218,12246,12294],{},[913,12219,12220,12225,12242],{},[931,12221,12222],{},[598,12223,12224],{},"touches.one",[931,12226,12227,12090,12230,12090,12233,12090,12236,12090,12238,12090,12240],{},[598,12228,12229],{},"TOUCH_ROTATE",[598,12231,12232],{},"TOUCH_TRUCK",[598,12234,12235],{},"TOUCH_OFFSET",[598,12237,12099],{},[598,12239,12102],{},[598,12241,12105],{},[931,12243,12244],{},[598,12245,12229],{},[913,12247,12248,12253,12287],{},[931,12249,12250],{},[598,12251,12252],{},"touches.two",[931,12254,12255,12090,12258,12090,12261,12090,12264,12090,12267,12090,12270,12090,12273,12090,12276,12090,12279,12090,12281,12090,12283,12090,12285],{},[598,12256,12257],{},"TOUCH_DOLLY_TRUCK",[598,12259,12260],{},"TOUCH_DOLLY_OFFSET",[598,12262,12263],{},"TOUCH_DOLLY_ROTATE",[598,12265,12266],{},"TOUCH_ZOOM_TRUCK",[598,12268,12269],{},"TOUCH_ZOOM_OFFSET",[598,12271,12272],{},"TOUCH_ZOOM_ROTATE",[598,12274,12275],{},"TOUCH_DOLLY",[598,12277,12278],{},"TOUCH_ZOOM",[598,12280,12229],{},[598,12282,12232],{},[598,12284,12235],{},[598,12286,12105],{},[931,12288,12289,12161,12291,12293],{},[598,12290,12257],{},[598,12292,12266],{}," for Othographic camera.",[913,12295,12296,12301,12323],{},[931,12297,12298],{},[598,12299,12300],{},"touches.three",[931,12302,12303,12090,12305,12090,12307,12090,12309,12090,12311,12090,12313,12090,12315,12090,12317,12090,12319,12090,12321],{},[598,12304,12257],{},[598,12306,12260],{},[598,12308,12263],{},[598,12310,12266],{},[598,12312,12269],{},[598,12314,12272],{},[598,12316,12229],{},[598,12318,12232],{},[598,12320,12235],{},[598,12322,12105],{},[931,12324,12325],{},[598,12326,12232],{},[484,12328,12330],{"id":12329},"events","Events",[606,12332,12334],{"className":608,"code":12333,"language":613,"meta":556,"style":556},"\u003CCameraControls @change=\"onChange\" @start=\"onStart\" @end=\"onEnd\" />\n",[598,12335,12336],{"__ignoreMap":556},[617,12337,12338,12340,12342,12344,12347,12349,12351,12354,12356,12358,12361,12363,12365,12368,12370,12372,12375,12377,12379,12382,12384],{"class":619,"line":557},[617,12339,623],{"class":622},[617,12341,11232],{"class":626},[617,12343,4234],{"class":622},[617,12345,12346],{"class":630},"change",[617,12348,637],{"class":622},[617,12350,640],{"class":622},[617,12352,12353],{"class":663},"onChange",[617,12355,640],{"class":622},[617,12357,4234],{"class":622},[617,12359,12360],{"class":630},"start",[617,12362,637],{"class":622},[617,12364,640],{"class":622},[617,12366,12367],{"class":663},"onStart",[617,12369,640],{"class":622},[617,12371,4234],{"class":622},[617,12373,12374],{"class":630},"end",[617,12376,637],{"class":622},[617,12378,640],{"class":622},[617,12380,12381],{"class":663},"onEnd",[617,12383,640],{"class":622},[617,12385,767],{"class":622},[907,12387,12388,12396],{},[910,12389,12390],{},[913,12391,12392,12394],{},[916,12393,5739],{"align":977},[916,12395,921],{"align":977},[926,12397,12398,12407,12416],{},[913,12399,12400,12404],{},[931,12401,12402],{"align":977},[1649,12403,12360],{},[931,12405,12406],{"align":977},"Dispatched when the control starts to change.",[913,12408,12409,12413],{},[931,12410,12411],{"align":977},[1649,12412,12346],{},[931,12414,12415],{"align":977},"Dispatched when the control changes.",[913,12417,12418,12422],{},[931,12419,12420],{"align":977},[1649,12421,12374],{},[931,12423,12424],{"align":977},"Dispatched when the control ends to change.",[1307,12426,12427],{},"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 .light .shiki span {color: var(--shiki-light);background: var(--shiki-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":556,"searchDepth":557,"depth":558,"links":12429},[12430,12431,12432,12436],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},{"id":11903,"depth":558,"text":11883,"children":12433},[12434,12435],{"id":12060,"depth":688,"text":12061},{"id":11891,"depth":688,"text":12202},{"id":12329,"depth":558,"text":12330},"Is similar to OrbitControls yet supports smooth transitions and more features.",{},{"title":91,"description":12437},"2hfwAcOw9kCB60pKAgItRmaKk8A71rNBCTtreEGn7EI",{"id":12442,"title":95,"body":12443,"description":12460,"extension":571,"links":572,"meta":12819,"navigation":574,"path":96,"seo":12820,"stem":97,"__hash__":12821},"docs/2.api/2.controls/keyboard-controls.md",{"type":481,"value":12444,"toc":12814},[12445,12450,12456,12464,12480,12482,12637,12641,12643,12722,12724,12775,12811],[588,12446,12447],{},[12448,12449],"controls-keyboard-controls",{},[594,12451,12452,12455],{},[598,12453,12454],{},"\u003CKeyboardControls />"," is a simple keyboard controller for the camera. The camera's movements are bound to:",[2193,12457,12458,12461],{},[2196,12459,12460],{},"WASD on QWERTY keyboards or equivalent keys on non-QWERTY keyboards",[2196,12462,12463],{},"Arrow keys",[1985,12465,12466],{},[594,12467,12468,12471,12472,12475,12476,1126],{},[598,12469,12470],{},"KeyboardControls"," uses ",[598,12473,12474],{},"PointerLockControls"," under the hood. You can use ",[1120,12477,12479],{"href":12478},"pointer-lock-controls#props","PointerLockControls props and events",[484,12481,15],{"id":604},[606,12483,12486],{"className":608,"code":12484,"highlights":12485,"language":613,"meta":556,"style":556},"\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",[688,780],[598,12487,12488,12508,12526,12550,12558,12562,12570,12578,12586,12604,12613,12621,12629],{"__ignoreMap":556},[617,12489,12490,12492,12494,12496,12498,12500,12502,12504,12506],{"class":619,"line":557},[617,12491,623],{"class":622},[617,12493,627],{"class":626},[617,12495,631],{"class":630},[617,12497,634],{"class":630},[617,12499,637],{"class":622},[617,12501,640],{"class":622},[617,12503,644],{"class":643},[617,12505,640],{"class":622},[617,12507,649],{"class":622},[617,12509,12510,12512,12514,12516,12518,12520,12522,12524],{"class":619,"line":558},[617,12511,657],{"class":656},[617,12513,660],{"class":622},[617,12515,695],{"class":663},[617,12517,673],{"class":622},[617,12519,676],{"class":656},[617,12521,679],{"class":622},[617,12523,704],{"class":643},[617,12525,685],{"class":622},[617,12527,12529,12531,12533,12536,12538,12540,12542,12544,12546,12548],{"class":12528,"line":688},[619,653],[617,12530,657],{"class":656},[617,12532,660],{"class":622},[617,12534,12535],{"class":663}," KeyboardControls",[617,12537,667],{"class":622},[617,12539,1377],{"class":663},[617,12541,673],{"class":622},[617,12543,676],{"class":656},[617,12545,679],{"class":622},[617,12547,682],{"class":643},[617,12549,685],{"class":622},[617,12551,12552,12554,12556],{"class":619,"line":709},[617,12553,712],{"class":622},[617,12555,627],{"class":626},[617,12557,649],{"class":622},[617,12559,12560],{"class":619,"line":719},[617,12561,722],{"emptyLinePlaceholder":574},[617,12563,12564,12566,12568],{"class":619,"line":725},[617,12565,623],{"class":622},[617,12567,730],{"class":626},[617,12569,649],{"class":622},[617,12571,12572,12574,12576],{"class":619,"line":735},[617,12573,738],{"class":622},[617,12575,741],{"class":626},[617,12577,649],{"class":622},[617,12579,12580,12582,12584],{"class":619,"line":758},[617,12581,761],{"class":622},[617,12583,764],{"class":626},[617,12585,767],{"class":622},[617,12587,12588,12590,12592,12594,12596,12598,12600,12602],{"class":619,"line":770},[617,12589,761],{"class":622},[617,12591,201],{"class":626},[617,12593,1919],{"class":630},[617,12595,637],{"class":622},[617,12597,640],{"class":622},[617,12599,1926],{"class":643},[617,12601,640],{"class":622},[617,12603,767],{"class":622},[617,12605,12607,12609,12611],{"class":12606,"line":780},[619,653],[617,12608,761],{"class":622},[617,12610,12470],{"class":626},[617,12612,767],{"class":622},[617,12614,12615,12617,12619],{"class":619,"line":785},[617,12616,761],{"class":622},[617,12618,8029],{"class":626},[617,12620,767],{"class":622},[617,12622,12623,12625,12627],{"class":619,"line":807},[617,12624,885],{"class":622},[617,12626,741],{"class":626},[617,12628,649],{"class":622},[617,12630,12631,12633,12635],{"class":619,"line":611},[617,12632,712],{"class":622},[617,12634,730],{"class":626},[617,12636,649],{"class":622},[3179,12638,12639],{},[594,12640,11445],{},[484,12642,902],{"id":901},[907,12644,12645,12655],{},[910,12646,12647],{},[913,12648,12649,12651,12653],{},[916,12650,918],{"align":977},[916,12652,921],{"align":977},[916,12654,924],{},[926,12656,12657,12669,12684,12696,12708],{},[913,12658,12659,12664,12667],{},[931,12660,12661],{"align":977},[1649,12662,12663],{},"moveSpeed",[931,12665,12666],{"align":977},"Speed movement.",[931,12668,5709],{},[913,12670,12671,12675,12680],{},[931,12672,12673],{"align":977},[1649,12674,11471],{},[931,12676,938,12677,12679],{"align":977},[598,12678,941],{},", the controls will be set as the default controls for the scene.",[931,12681,12682],{},[598,12683,941],{},[913,12685,12686,12690,12692],{},[931,12687,12688],{"align":977},[1649,12689,11485],{},[931,12691,11488],{"align":977},[931,12693,12694],{},[598,12695,1159],{},[913,12697,12698,12702,12704],{},[931,12699,12700],{"align":977},[1649,12701,11499],{},[931,12703,11502],{"align":977},[931,12705,12706],{},[598,12707,1159],{},[913,12709,12710,12715,12718],{},[931,12711,12712],{"align":977},[1649,12713,12714],{},"selector",[931,12716,12717],{"align":977},"Accept an id element as string. If set, the new element will be used as the trigger",[931,12719,12720],{},[598,12721,1159],{},[484,12723,12330],{"id":12329},[606,12725,12727],{"className":608,"code":12726,"language":613,"meta":556,"style":556},"\u003CKeyboardControls @change=\"onChange\" @is-lock=\"(state) => isActive(state)\" />\n",[598,12728,12729],{"__ignoreMap":556},[617,12730,12731,12733,12735,12737,12739,12741,12743,12745,12747,12749,12752,12754,12756,12758,12761,12763,12765,12768,12771,12773],{"class":619,"line":557},[617,12732,623],{"class":622},[617,12734,12470],{"class":626},[617,12736,4234],{"class":622},[617,12738,12346],{"class":630},[617,12740,637],{"class":622},[617,12742,640],{"class":622},[617,12744,12353],{"class":663},[617,12746,640],{"class":622},[617,12748,4234],{"class":622},[617,12750,12751],{"class":630},"is-lock",[617,12753,637],{"class":622},[617,12755,640],{"class":622},[617,12757,2417],{"class":622},[617,12759,12760],{"class":6818},"state",[617,12762,3320],{"class":622},[617,12764,3657],{"class":630},[617,12766,12767],{"class":2414}," isActive",[617,12769,12770],{"class":663},"(state)",[617,12772,640],{"class":622},[617,12774,767],{"class":663},[907,12776,12777,12785],{},[910,12778,12779],{},[913,12780,12781,12783],{},[916,12782,5739],{"align":977},[916,12784,921],{"align":977},[926,12786,12787,12803],{},[913,12788,12789,12794],{},[931,12790,12791],{"align":977},[1649,12792,12793],{},"isLock",[931,12795,12796,12797,12799,12800,12802],{"align":977},"Return ",[598,12798,941],{}," if \"lock\", ",[598,12801,951],{}," if \"unlock\" events are triggered.",[913,12804,12805,12809],{},[931,12806,12807],{"align":977},[1649,12808,12346],{},[931,12810,12415],{"align":977},[1307,12812,12813],{},"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 .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":556,"searchDepth":557,"depth":558,"links":12815},[12816,12817,12818],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},{"id":12329,"depth":558,"text":12330},{},{"title":95,"description":12460},"it5OHUitkTH5lkk35Xy-NQitAzH5KAYajRkEsScL4R4",{"id":12823,"title":99,"body":12824,"description":13119,"extension":571,"links":572,"meta":13120,"navigation":574,"path":100,"seo":13121,"stem":101,"__hash__":13122},"docs/2.api/2.controls/map-controls.md",{"type":481,"value":12825,"toc":13115},[12826,12831,12839,12841,13031,13036,13038,13108,13113],[588,12827,12828],{},[12829,12830],"controls-map-controls",{},[594,12832,12833,12838],{},[1120,12834,12837],{"href":12835,"rel":12836},"https://threejs.org/docs/index.html?q=controls#examples/en/controls/MapControls",[1124],"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.",[484,12840,15],{"id":604},[606,12842,12845],{"className":608,"code":12843,"highlights":12844,"language":613,"meta":556,"style":556},"\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",[735],[598,12846,12847,12857,12876,12884,12892,12910,12928,12937,12955,12973,12981,12989,13007,13015,13023],{"__ignoreMap":556},[617,12848,12849,12851,12853,12855],{"class":619,"line":557},[617,12850,623],{"class":622},[617,12852,627],{"class":626},[617,12854,631],{"class":630},[617,12856,649],{"class":622},[617,12858,12859,12861,12863,12866,12868,12870,12872,12874],{"class":619,"line":558},[617,12860,657],{"class":656},[617,12862,660],{"class":622},[617,12864,12865],{"class":663}," MapControls",[617,12867,673],{"class":622},[617,12869,676],{"class":656},[617,12871,8270],{"class":622},[617,12873,682],{"class":643},[617,12875,3111],{"class":622},[617,12877,12878,12880,12882],{"class":619,"line":688},[617,12879,712],{"class":622},[617,12881,627],{"class":626},[617,12883,649],{"class":622},[617,12885,12886,12888,12890],{"class":619,"line":709},[617,12887,623],{"class":622},[617,12889,730],{"class":626},[617,12891,649],{"class":622},[617,12893,12894,12896,12898,12900,12902,12904,12906,12908],{"class":619,"line":719},[617,12895,738],{"class":622},[617,12897,741],{"class":626},[617,12899,744],{"class":630},[617,12901,637],{"class":622},[617,12903,640],{"class":622},[617,12905,9840],{"class":643},[617,12907,640],{"class":622},[617,12909,649],{"class":622},[617,12911,12912,12914,12916,12918,12920,12922,12924,12926],{"class":619,"line":725},[617,12913,761],{"class":622},[617,12915,764],{"class":626},[617,12917,1465],{"class":630},[617,12919,637],{"class":622},[617,12921,640],{"class":622},[617,12923,11330],{"class":643},[617,12925,640],{"class":622},[617,12927,767],{"class":622},[617,12929,12931,12933,12935],{"class":12930,"line":735},[619,653],[617,12932,761],{"class":622},[617,12934,12837],{"class":626},[617,12936,767],{"class":622},[617,12938,12939,12941,12943,12945,12947,12949,12951,12953],{"class":619,"line":758},[617,12940,761],{"class":622},[617,12942,201],{"class":626},[617,12944,793],{"class":630},[617,12946,637],{"class":622},[617,12948,640],{"class":622},[617,12950,800],{"class":643},[617,12952,640],{"class":622},[617,12954,649],{"class":622},[617,12956,12957,12959,12961,12963,12965,12967,12969,12971],{"class":619,"line":770},[617,12958,833],{"class":622},[617,12960,11368],{"class":626},[617,12962,2669],{"class":630},[617,12964,637],{"class":622},[617,12966,640],{"class":622},[617,12968,11377],{"class":643},[617,12970,640],{"class":622},[617,12972,767],{"class":622},[617,12974,12975,12977,12979],{"class":619,"line":780},[617,12976,875],{"class":622},[617,12978,201],{"class":626},[617,12980,649],{"class":622},[617,12982,12983,12985,12987],{"class":619,"line":785},[617,12984,761],{"class":622},[617,12986,8436],{"class":626},[617,12988,767],{"class":622},[617,12990,12991,12993,12995,12997,12999,13001,13003,13005],{"class":619,"line":807},[617,12992,761],{"class":622},[617,12994,8455],{"class":626},[617,12996,1465],{"class":630},[617,12998,637],{"class":622},[617,13000,640],{"class":622},[617,13002,11412],{"class":643},[617,13004,640],{"class":622},[617,13006,767],{"class":622},[617,13008,13009,13011,13013],{"class":619,"line":611},[617,13010,761],{"class":622},[617,13012,8029],{"class":626},[617,13014,767],{"class":622},[617,13016,13017,13019,13021],{"class":619,"line":830},[617,13018,885],{"class":622},[617,13020,741],{"class":626},[617,13022,649],{"class":622},[617,13024,13025,13027,13029],{"class":619,"line":841},[617,13026,712],{"class":622},[617,13028,730],{"class":626},[617,13030,649],{"class":622},[3179,13032,13033],{},[594,13034,13035],{},"It is really important that the perspective camera is set first in the canvas. Otherwise the scene might break.",[484,13037,902],{"id":901},[907,13039,13040,13050],{},[910,13041,13042],{},[913,13043,13044,13046,13048],{},[916,13045,918],{"align":977},[916,13047,921],{"align":977},[916,13049,924],{},[926,13051,13052,13066,13078,13091],{},[913,13053,13054,13058,13062],{},[931,13055,13056],{"align":977},[1649,13057,11471],{},[931,13059,938,13060,12679],{"align":977},[598,13061,941],{},[931,13063,13064],{},[598,13065,951],{},[913,13067,13068,13072,13074],{},[931,13069,13070],{"align":977},[1649,13071,11485],{},[931,13073,11488],{"align":977},[931,13075,13076],{},[598,13077,1159],{},[913,13079,13080,13084,13087],{},[931,13081,13082],{"align":977},[1649,13083,11499],{},[931,13085,13086],{"align":977},"The dom element to listen to.",[931,13088,13089],{},[598,13090,1159],{},[913,13092,13093,13098,13104],{},[931,13094,13095],{"align":977},[1649,13096,13097],{},"screenSpacePanning",[931,13099,13100,13101,13103],{"align":977},"Defines how the camera's position is translated when panning. If ",[598,13102,941],{},", the camera pans in screen space. Otherwise, the camera pans in the plane orthogonal to the camera's up direction.",[931,13105,13106],{},[598,13107,951],{},[1985,13109,13110],{},[594,13111,13112],{},"All the props of the orbit controls component apply here too.",[1307,13114,12427],{},{"title":556,"searchDepth":557,"depth":558,"links":13116},[13117,13118],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},"similar to OrbitControls but for map views",{},{"title":99,"description":13119},"kfzpqZnb7itAV_eVKFqO6wVSm6EFixFWw9fpJO8O0ac",{"id":13124,"title":103,"body":13125,"description":13821,"extension":571,"links":572,"meta":13822,"navigation":574,"path":104,"seo":13823,"stem":105,"__hash__":13824},"docs/2.api/2.controls/orbit-controls.md",{"type":481,"value":13126,"toc":13816},[13127,13132,13139,13141,13330,13334,13336,13727,13729,13778,13814],[588,13128,13129],{},[13130,13131],"controls-orbit-controls",{},[594,13133,13134,13138],{},[1120,13135,775],{"href":13136,"rel":13137},"https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls",[1124]," is a camera controller that allows you to orbit around a target. It's a great way to explore your scene.",[484,13140,15],{"id":604},[606,13142,13145],{"className":608,"code":13143,"highlights":13144,"language":613,"meta":556,"style":556},"\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",[735],[598,13146,13147,13157,13175,13183,13191,13209,13227,13236,13254,13272,13280,13288,13306,13314,13322],{"__ignoreMap":556},[617,13148,13149,13151,13153,13155],{"class":619,"line":557},[617,13150,623],{"class":622},[617,13152,627],{"class":626},[617,13154,631],{"class":630},[617,13156,649],{"class":622},[617,13158,13159,13161,13163,13165,13167,13169,13171,13173],{"class":619,"line":558},[617,13160,657],{"class":656},[617,13162,660],{"class":622},[617,13164,670],{"class":663},[617,13166,673],{"class":622},[617,13168,676],{"class":656},[617,13170,8270],{"class":622},[617,13172,682],{"class":643},[617,13174,3111],{"class":622},[617,13176,13177,13179,13181],{"class":619,"line":688},[617,13178,712],{"class":622},[617,13180,627],{"class":626},[617,13182,649],{"class":622},[617,13184,13185,13187,13189],{"class":619,"line":709},[617,13186,623],{"class":622},[617,13188,730],{"class":626},[617,13190,649],{"class":622},[617,13192,13193,13195,13197,13199,13201,13203,13205,13207],{"class":619,"line":719},[617,13194,738],{"class":622},[617,13196,741],{"class":626},[617,13198,744],{"class":630},[617,13200,637],{"class":622},[617,13202,640],{"class":622},[617,13204,9840],{"class":643},[617,13206,640],{"class":622},[617,13208,649],{"class":622},[617,13210,13211,13213,13215,13217,13219,13221,13223,13225],{"class":619,"line":725},[617,13212,761],{"class":622},[617,13214,764],{"class":626},[617,13216,1465],{"class":630},[617,13218,637],{"class":622},[617,13220,640],{"class":622},[617,13222,11330],{"class":643},[617,13224,640],{"class":622},[617,13226,767],{"class":622},[617,13228,13230,13232,13234],{"class":13229,"line":735},[619,653],[617,13231,761],{"class":622},[617,13233,775],{"class":626},[617,13235,767],{"class":622},[617,13237,13238,13240,13242,13244,13246,13248,13250,13252],{"class":619,"line":758},[617,13239,761],{"class":622},[617,13241,201],{"class":626},[617,13243,793],{"class":630},[617,13245,637],{"class":622},[617,13247,640],{"class":622},[617,13249,800],{"class":643},[617,13251,640],{"class":622},[617,13253,649],{"class":622},[617,13255,13256,13258,13260,13262,13264,13266,13268,13270],{"class":619,"line":770},[617,13257,833],{"class":622},[617,13259,11368],{"class":626},[617,13261,2669],{"class":630},[617,13263,637],{"class":622},[617,13265,640],{"class":622},[617,13267,11377],{"class":643},[617,13269,640],{"class":622},[617,13271,767],{"class":622},[617,13273,13274,13276,13278],{"class":619,"line":780},[617,13275,875],{"class":622},[617,13277,201],{"class":626},[617,13279,649],{"class":622},[617,13281,13282,13284,13286],{"class":619,"line":785},[617,13283,761],{"class":622},[617,13285,8436],{"class":626},[617,13287,767],{"class":622},[617,13289,13290,13292,13294,13296,13298,13300,13302,13304],{"class":619,"line":807},[617,13291,761],{"class":622},[617,13293,8455],{"class":626},[617,13295,1465],{"class":630},[617,13297,637],{"class":622},[617,13299,640],{"class":622},[617,13301,11412],{"class":643},[617,13303,640],{"class":622},[617,13305,767],{"class":622},[617,13307,13308,13310,13312],{"class":619,"line":611},[617,13309,761],{"class":622},[617,13311,8029],{"class":626},[617,13313,767],{"class":622},[617,13315,13316,13318,13320],{"class":619,"line":830},[617,13317,885],{"class":622},[617,13319,741],{"class":626},[617,13321,649],{"class":622},[617,13323,13324,13326,13328],{"class":619,"line":841},[617,13325,712],{"class":622},[617,13327,730],{"class":626},[617,13329,649],{"class":622},[3179,13331,13332],{},[594,13333,11445],{},[484,13335,902],{"id":901},[907,13337,13338,13348],{},[910,13339,13340],{},[913,13341,13342,13344,13346],{},[916,13343,918],{"align":977},[916,13345,921],{"align":977},[916,13347,924],{},[926,13349,13350,13364,13376,13388,13402,13418,13436,13450,13468,13482,13497,13512,13533,13551,13564,13577,13590,13603,13616,13629,13643,13657,13671,13685,13699,13713],{},[913,13351,13352,13356,13360],{},[931,13353,13354],{"align":977},[1649,13355,11471],{},[931,13357,938,13358,12679],{"align":977},[598,13359,941],{},[931,13361,13362],{},[598,13363,951],{},[913,13365,13366,13370,13372],{},[931,13367,13368],{"align":977},[1649,13369,11485],{},[931,13371,11488],{"align":977},[931,13373,13374],{},[598,13375,1159],{},[913,13377,13378,13382,13384],{},[931,13379,13380],{"align":977},[1649,13381,11499],{},[931,13383,13086],{"align":977},[931,13385,13386],{},[598,13387,1159],{},[913,13389,13390,13395,13398],{},[931,13391,13392],{"align":977},[1649,13393,13394],{},"target",[931,13396,13397],{"align":977},"The target to orbit around.",[931,13399,13400],{},[598,13401,1159],{},[913,13403,13404,13409,13414],{},[931,13405,13406],{"align":977},[1649,13407,13408],{},"enableDamping",[931,13410,938,13411,13413],{"align":977},[598,13412,941],{},", the controls will use damping (inertia), which can be used to give a sense of weight to the controls.",[931,13415,13416],{},[598,13417,941],{},[913,13419,13420,13425,13432],{},[931,13421,13422],{"align":977},[1649,13423,13424],{},"dampingFactor",[931,13426,13427,13428,13431],{"align":977},"The damping inertia used if ",[598,13429,13430],{},".enableDamping"," is set to true.",[931,13433,13434],{},[598,13435,9692],{},[913,13437,13438,13443,13446],{},[931,13439,13440],{"align":977},[1649,13441,13442],{},"autoRotate",[931,13444,13445],{"align":977},"Set to true to automatically rotate around the target.",[931,13447,13448],{},[598,13449,951],{},[913,13451,13452,13457,13464],{},[931,13453,13454],{"align":977},[1649,13455,13456],{},"autoRotateSpeed",[931,13458,13459,13460,13463],{"align":977},"How fast to rotate around the target if ",[598,13461,13462],{},".autoRotate"," is true.",[931,13465,13466],{},[598,13467,800],{},[913,13469,13470,13475,13478],{},[931,13471,13472],{"align":977},[1649,13473,13474],{},"enablePan",[931,13476,13477],{"align":977},"Whether to enable panning.",[931,13479,13480],{},[598,13481,941],{},[913,13483,13484,13489,13492],{},[931,13485,13486],{"align":977},[1649,13487,13488],{},"keyPanSpeed",[931,13490,13491],{"align":977},"How fast to pan the camera when the keyboard is used. Default is 7.0 pixels per keypress.",[931,13493,13494],{},[598,13495,13496],{},"7.0",[913,13498,13499,13504,13507],{},[931,13500,13501],{"align":977},[1649,13502,13503],{},"keys",[931,13505,13506],{"align":977},"This object contains references to the keycodes for controlling camera panning. Default is the 4 arrow keys.",[931,13508,13509],{},[598,13510,13511],{},"{ LEFT: 'ArrowLeft', UP: 'ArrowUp', RIGHT: 'ArrowRight', BOTTOM: 'ArrowDown' }",[913,13513,13514,13518,13529],{},[931,13515,13516],{"align":977},[1649,13517,11556],{},[931,13519,13520,13521,13524,13525,13528],{"align":977},"How far you can orbit horizontally, upper limit. If set, the interval ",[617,13522,13523],{}," min, max"," must be a sub-interval of ",[617,13526,13527],{}," - 2 PI, 2 PI",", with ( max - min \u003C 2 PI ). Default is Infinity.",[931,13530,13531],{},[598,13532,11564],{},[913,13534,13535,13539,13547],{},[931,13536,13537],{"align":977},[1649,13538,11541],{},[931,13540,13541,13542,13524,13544,13546],{"align":977},"How far you can orbit horizontally, lower limit. If set, the interval ",[617,13543,13523],{},[617,13545,13527],{},", with ( max - min \u003C 2 PI ). Default is - Infinity.",[931,13548,13549],{},[598,13550,11549],{},[913,13552,13553,13557,13560],{},[931,13554,13555],{"align":977},[1649,13556,11527],{},[931,13558,13559],{"align":977},"How far you can orbit vertically, upper limit. Range is 0 to Math.PI radians, and default is Math.PI.",[931,13561,13562],{},[598,13563,9713],{},[913,13565,13566,13570,13573],{},[931,13567,13568],{"align":977},[1649,13569,11513],{},[931,13571,13572],{"align":977},"How far you can orbit vertically, lower limit. Range is 0 to Math.PI radians, and default is 0.",[931,13574,13575],{},[598,13576,945],{},[913,13578,13579,13583,13586],{},[931,13580,13581],{"align":977},[1649,13582,11586],{},[931,13584,13585],{"align":977},"The minimum distance of the camera to the target. Default is 0.",[931,13587,13588],{},[598,13589,945],{},[913,13591,13592,13596,13599],{},[931,13593,13594],{"align":977},[1649,13595,11601],{},[931,13597,13598],{"align":977},"The maximum distance of the camera to the target. Default is Infinity.",[931,13600,13601],{},[598,13602,11564],{},[913,13604,13605,13609,13612],{},[931,13606,13607],{"align":977},[1649,13608,11631],{},[931,13610,13611],{"align":977},"The minimum field of view angle, in radians. Default is 0.",[931,13613,13614],{},[598,13615,945],{},[913,13617,13618,13622,13625],{},[931,13619,13620],{"align":977},[1649,13621,11645],{},[931,13623,13624],{"align":977},"The maximum field of view angle, in radians. ( OrthographicCamera only ). Default is Infinity.",[931,13626,13627],{},[598,13628,11564],{},[913,13630,13631,13635,13638],{},[931,13632,13633],{"align":977},[1649,13634,11891],{},[931,13636,13637],{"align":977},"This object contains references to the touch actions used by the controls.",[931,13639,13640],{},[598,13641,13642],{},"{ ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_PAN }",[913,13644,13645,13649,13652],{},[931,13646,13647],{"align":977},[1649,13648,11872],{},[931,13650,13651],{"align":977},"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.",[931,13653,13654],{},[598,13655,13656],{},"{ LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN }",[913,13658,13659,13664,13667],{},[931,13660,13661],{"align":977},[1649,13662,13663],{},"enableZoom",[931,13665,13666],{"align":977},"Whether to enable zooming.",[931,13668,13669],{},[598,13670,941],{},[913,13672,13673,13678,13681],{},[931,13674,13675],{"align":977},[1649,13676,13677],{},"zoomSpeed",[931,13679,13680],{"align":977},"How fast to zoom in and out. Default is 1.",[931,13682,13683],{},[598,13684,1854],{},[913,13686,13687,13692,13695],{},[931,13688,13689],{"align":977},[1649,13690,13691],{},"enableRotate",[931,13693,13694],{"align":977},"Whether to enable rotating.",[931,13696,13697],{},[598,13698,941],{},[913,13700,13701,13706,13709],{},[931,13702,13703],{"align":977},[1649,13704,13705],{},"rotateSpeed",[931,13707,13708],{"align":977},"How fast to rotate around the target. Default is 1.",[931,13710,13711],{},[598,13712,1854],{},[913,13714,13715,13719,13723],{},[931,13716,13717],{"align":977},[1649,13718,13097],{},[931,13720,13100,13721,13103],{"align":977},[598,13722,941],{},[931,13724,13725],{},[598,13726,941],{},[484,13728,12330],{"id":12329},[606,13730,13732],{"className":608,"code":13731,"language":613,"meta":556,"style":556},"\u003COrbitControls @change=\"onChange\" @start=\"onStart\" @end=\"onEnd\" />\n",[598,13733,13734],{"__ignoreMap":556},[617,13735,13736,13738,13740,13742,13744,13746,13748,13750,13752,13754,13756,13758,13760,13762,13764,13766,13768,13770,13772,13774,13776],{"class":619,"line":557},[617,13737,623],{"class":622},[617,13739,775],{"class":626},[617,13741,4234],{"class":622},[617,13743,12346],{"class":630},[617,13745,637],{"class":622},[617,13747,640],{"class":622},[617,13749,12353],{"class":663},[617,13751,640],{"class":622},[617,13753,4234],{"class":622},[617,13755,12360],{"class":630},[617,13757,637],{"class":622},[617,13759,640],{"class":622},[617,13761,12367],{"class":663},[617,13763,640],{"class":622},[617,13765,4234],{"class":622},[617,13767,12374],{"class":630},[617,13769,637],{"class":622},[617,13771,640],{"class":622},[617,13773,12381],{"class":663},[617,13775,640],{"class":622},[617,13777,767],{"class":622},[907,13779,13780,13788],{},[910,13781,13782],{},[913,13783,13784,13786],{},[916,13785,5739],{"align":977},[916,13787,921],{"align":977},[926,13789,13790,13798,13806],{},[913,13791,13792,13796],{},[931,13793,13794],{"align":977},[1649,13795,12360],{},[931,13797,12406],{"align":977},[913,13799,13800,13804],{},[931,13801,13802],{"align":977},[1649,13803,12346],{},[931,13805,12415],{"align":977},[913,13807,13808,13812],{},[931,13809,13810],{"align":977},[1649,13811,12374],{},[931,13813,12424],{"align":977},[1307,13815,12427],{},{"title":556,"searchDepth":557,"depth":558,"links":13817},[13818,13819,13820],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},{"id":12329,"depth":558,"text":12330},"Allows you to orbit around the scene",{},{"title":103,"description":13821},"XWrClwQmT_iqfXhEFazDO2swYkiJCagLQjTOAb5xuyM",{"id":13826,"title":107,"body":13827,"description":14177,"extension":571,"links":572,"meta":14178,"navigation":574,"path":108,"seo":14179,"stem":109,"__hash__":14180},"docs/2.api/2.controls/pointer-lock-controls.md",{"type":481,"value":13828,"toc":14172},[13829,13834,13841,13860,13862,14017,14021,14023,14088,14090,14137,14170],[588,13830,13831],{},[13832,13833],"controls-pointer-lock-controls",{},[594,13835,13836,13840],{},[1120,13837,12474],{"href":13838,"rel":13839},"https://threejs.org/docs/index.html?q=pointe#examples/en/controls/PointerLockControls",[1124]," 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.",[3179,13842,13843],{},[594,13844,13845,13846,13859],{},"This control uses the ",[617,13847,13849,13852],{"style":13848},"background-color:#222;padding:0.25rem;border-radius:4px;",[1120,13850],{"href":104,"style":13851},"color:#f7f7f7;text-decoration:none",[1120,13853,13856],{"href":13854,"rel":13855},"https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API",[1124],[598,13857,13858],{},"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",[484,13861,15],{"id":604},[606,13863,13866],{"className":608,"code":13864,"highlights":13865,"language":613,"meta":556,"style":556},"\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",[688,780],[598,13867,13868,13888,13906,13930,13938,13942,13950,13958,13966,13984,13993,14001,14009],{"__ignoreMap":556},[617,13869,13870,13872,13874,13876,13878,13880,13882,13884,13886],{"class":619,"line":557},[617,13871,623],{"class":622},[617,13873,627],{"class":626},[617,13875,631],{"class":630},[617,13877,634],{"class":630},[617,13879,637],{"class":622},[617,13881,640],{"class":622},[617,13883,644],{"class":643},[617,13885,640],{"class":622},[617,13887,649],{"class":622},[617,13889,13890,13892,13894,13896,13898,13900,13902,13904],{"class":619,"line":558},[617,13891,657],{"class":656},[617,13893,660],{"class":622},[617,13895,695],{"class":663},[617,13897,673],{"class":622},[617,13899,676],{"class":656},[617,13901,679],{"class":622},[617,13903,704],{"class":643},[617,13905,685],{"class":622},[617,13907,13909,13911,13913,13916,13918,13920,13922,13924,13926,13928],{"class":13908,"line":688},[619,653],[617,13910,657],{"class":656},[617,13912,660],{"class":622},[617,13914,13915],{"class":663}," PointerLockControls",[617,13917,667],{"class":622},[617,13919,1377],{"class":663},[617,13921,673],{"class":622},[617,13923,676],{"class":656},[617,13925,679],{"class":622},[617,13927,682],{"class":643},[617,13929,685],{"class":622},[617,13931,13932,13934,13936],{"class":619,"line":709},[617,13933,712],{"class":622},[617,13935,627],{"class":626},[617,13937,649],{"class":622},[617,13939,13940],{"class":619,"line":719},[617,13941,722],{"emptyLinePlaceholder":574},[617,13943,13944,13946,13948],{"class":619,"line":725},[617,13945,623],{"class":622},[617,13947,730],{"class":626},[617,13949,649],{"class":622},[617,13951,13952,13954,13956],{"class":619,"line":735},[617,13953,738],{"class":622},[617,13955,741],{"class":626},[617,13957,649],{"class":622},[617,13959,13960,13962,13964],{"class":619,"line":758},[617,13961,761],{"class":622},[617,13963,764],{"class":626},[617,13965,767],{"class":622},[617,13967,13968,13970,13972,13974,13976,13978,13980,13982],{"class":619,"line":770},[617,13969,761],{"class":622},[617,13971,201],{"class":626},[617,13973,1919],{"class":630},[617,13975,637],{"class":622},[617,13977,640],{"class":622},[617,13979,1926],{"class":643},[617,13981,640],{"class":622},[617,13983,767],{"class":622},[617,13985,13987,13989,13991],{"class":13986,"line":780},[619,653],[617,13988,761],{"class":622},[617,13990,12474],{"class":626},[617,13992,767],{"class":622},[617,13994,13995,13997,13999],{"class":619,"line":785},[617,13996,761],{"class":622},[617,13998,8029],{"class":626},[617,14000,767],{"class":622},[617,14002,14003,14005,14007],{"class":619,"line":807},[617,14004,885],{"class":622},[617,14006,741],{"class":626},[617,14008,649],{"class":622},[617,14010,14011,14013,14015],{"class":619,"line":611},[617,14012,712],{"class":622},[617,14014,730],{"class":626},[617,14016,649],{"class":622},[3179,14018,14019],{},[594,14020,11445],{},[484,14022,902],{"id":901},[907,14024,14025,14035],{},[910,14026,14027],{},[913,14028,14029,14031,14033],{},[916,14030,918],{"align":977},[916,14032,921],{"align":977},[916,14034,924],{},[926,14036,14037,14051,14063,14075],{},[913,14038,14039,14043,14047],{},[931,14040,14041],{"align":977},[1649,14042,11471],{},[931,14044,938,14045,12679],{"align":977},[598,14046,941],{},[931,14048,14049],{},[598,14050,951],{},[913,14052,14053,14057,14059],{},[931,14054,14055],{"align":977},[1649,14056,11485],{},[931,14058,11488],{"align":977},[931,14060,14061],{},[598,14062,1159],{},[913,14064,14065,14069,14071],{},[931,14066,14067],{"align":977},[1649,14068,11499],{},[931,14070,13086],{"align":977},[931,14072,14073],{},[598,14074,1159],{},[913,14076,14077,14081,14084],{},[931,14078,14079],{"align":977},[1649,14080,12714],{},[931,14082,14083],{"align":977},"Accept an id element as string, if it is set, the new element will be used as the trigger",[931,14085,14086],{},[598,14087,1159],{},[484,14089,12330],{"id":12329},[606,14091,14093],{"className":608,"code":14092,"language":613,"meta":556,"style":556},"\u003CPointerLockControls @change=\"onChange\" @is-lock=\"(state) => isActive(state)\" />\n",[598,14094,14095],{"__ignoreMap":556},[617,14096,14097,14099,14101,14103,14105,14107,14109,14111,14113,14115,14117,14119,14121,14123,14125,14127,14129,14131,14133,14135],{"class":619,"line":557},[617,14098,623],{"class":622},[617,14100,12474],{"class":626},[617,14102,4234],{"class":622},[617,14104,12346],{"class":630},[617,14106,637],{"class":622},[617,14108,640],{"class":622},[617,14110,12353],{"class":663},[617,14112,640],{"class":622},[617,14114,4234],{"class":622},[617,14116,12751],{"class":630},[617,14118,637],{"class":622},[617,14120,640],{"class":622},[617,14122,2417],{"class":622},[617,14124,12760],{"class":6818},[617,14126,3320],{"class":622},[617,14128,3657],{"class":630},[617,14130,12767],{"class":2414},[617,14132,12770],{"class":663},[617,14134,640],{"class":622},[617,14136,767],{"class":663},[907,14138,14139,14147],{},[910,14140,14141],{},[913,14142,14143,14145],{},[916,14144,5739],{"align":977},[916,14146,921],{"align":977},[926,14148,14149,14162],{},[913,14150,14151,14155],{},[931,14152,14153],{"align":977},[1649,14154,12793],{},[931,14156,12796,14157,12799,14159,14161],{"align":977},[598,14158,941],{},[598,14160,951],{}," if \"unlock\" events are trigger.",[913,14163,14164,14168],{},[931,14165,14166],{"align":977},[1649,14167,12346],{},[931,14169,12415],{"align":977},[1307,14171,12813],{},{"title":556,"searchDepth":557,"depth":558,"links":14173},[14174,14175,14176],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},{"id":12329,"depth":558,"text":12330},"Allows you to capture the mouse movement and simulate a first person camera",{},{"title":107,"description":14177},"vV10imj42ZYLgsDF4-C_pkzy24eb_ucQLr8NOacrAsg",{"id":14182,"title":111,"body":14183,"description":14880,"extension":571,"links":572,"meta":14881,"navigation":574,"path":112,"seo":14882,"stem":113,"__hash__":14883},"docs/2.api/2.controls/transform-controls.md",{"type":481,"value":14184,"toc":14870},[14185,14192,14197,14199,14210,14406,14424,14428,14431,14435,14440,14443,14480,14484,14489,14492,14527,14530,14535,14538,14573,14575,14801,14803,14864,14867],[594,14186,2756,14187,14191],{},[1120,14188,111],{"href":14189,"rel":14190},"https://threejs.org/docs/#examples/en/controls/TransformControls",[1124]," 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",[588,14193,14194],{},[14195,14196],"controls-transform-controls",{},[484,14198,15],{"id":604},[594,14200,14201,14202,14205,14206,14209],{},"To use the Transform Controls, simply add the ",[598,14203,14204],{},"TransformControls"," component to your scene. You can pass the ",[598,14207,14208],{},"templateRef","of the instance you want to control as a prop.",[606,14211,14214],{"className":608,"code":14212,"highlights":14213,"language":613,"meta":556,"style":556},"\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",[735,758],[598,14215,14216,14226,14239,14247,14255,14263,14282,14293,14313,14345,14364,14382,14390,14398],{"__ignoreMap":556},[617,14217,14218,14220,14222,14224],{"class":619,"line":557},[617,14219,623],{"class":622},[617,14221,627],{"class":626},[617,14223,631],{"class":630},[617,14225,649],{"class":622},[617,14227,14228,14230,14233,14235,14237],{"class":619,"line":558},[617,14229,2395],{"class":630},[617,14231,14232],{"class":663}," boxRef ",[617,14234,637],{"class":622},[617,14236,3478],{"class":2414},[617,14238,6515],{"class":663},[617,14240,14241,14243,14245],{"class":619,"line":688},[617,14242,712],{"class":622},[617,14244,627],{"class":626},[617,14246,649],{"class":622},[617,14248,14249,14251,14253],{"class":619,"line":709},[617,14250,623],{"class":622},[617,14252,730],{"class":626},[617,14254,649],{"class":622},[617,14256,14257,14259,14261],{"class":619,"line":719},[617,14258,738],{"class":622},[617,14260,741],{"class":626},[617,14262,649],{"class":622},[617,14264,14265,14267,14269,14271,14273,14275,14278,14280],{"class":619,"line":725},[617,14266,761],{"class":622},[617,14268,764],{"class":626},[617,14270,1939],{"class":630},[617,14272,637],{"class":622},[617,14274,640],{"class":622},[617,14276,14277],{"class":643},"[45, 1, 0.1, 1000]",[617,14279,640],{"class":622},[617,14281,767],{"class":622},[617,14283,14285,14287,14289,14291],{"class":14284,"line":735},[619,653],[617,14286,761],{"class":622},[617,14288,775],{"class":626},[617,14290,1831],{"class":630},[617,14292,767],{"class":622},[617,14294,14296,14298,14300,14302,14304,14306,14309,14311],{"class":14295,"line":758},[619,653],[617,14297,761],{"class":622},[617,14299,14204],{"class":626},[617,14301,4428],{"class":630},[617,14303,637],{"class":622},[617,14305,640],{"class":622},[617,14307,14308],{"class":643},"boxRef",[617,14310,640],{"class":622},[617,14312,767],{"class":622},[617,14314,14315,14317,14319,14321,14323,14325,14327,14329,14331,14333,14335,14338,14340,14343],{"class":619,"line":770},[617,14316,761],{"class":622},[617,14318,836],{"class":626},[617,14320,3852],{"class":630},[617,14322,637],{"class":622},[617,14324,640],{"class":622},[617,14326,14308],{"class":643},[617,14328,640],{"class":622},[617,14330,1465],{"class":630},[617,14332,637],{"class":622},[617,14334,640],{"class":622},[617,14336,14337],{"class":643},"[0, 4, 0]",[617,14339,640],{"class":622},[617,14341,14342],{"class":630}," cast-shadow",[617,14344,649],{"class":622},[617,14346,14347,14349,14351,14353,14355,14357,14360,14362],{"class":619,"line":780},[617,14348,833],{"class":622},[617,14350,847],{"class":626},[617,14352,1939],{"class":630},[617,14354,637],{"class":622},[617,14356,640],{"class":622},[617,14358,14359],{"class":643},"[1.5, 1.5, 1.5]",[617,14361,640],{"class":622},[617,14363,767],{"class":622},[617,14365,14366,14368,14370,14372,14374,14376,14378,14380],{"class":619,"line":785},[617,14367,833],{"class":622},[617,14369,11368],{"class":626},[617,14371,2669],{"class":630},[617,14373,637],{"class":622},[617,14375,640],{"class":622},[617,14377,7907],{"class":643},[617,14379,640],{"class":622},[617,14381,767],{"class":622},[617,14383,14384,14386,14388],{"class":619,"line":807},[617,14385,875],{"class":622},[617,14387,836],{"class":626},[617,14389,649],{"class":622},[617,14391,14392,14394,14396],{"class":619,"line":611},[617,14393,885],{"class":622},[617,14395,741],{"class":626},[617,14397,649],{"class":622},[617,14399,14400,14402,14404],{"class":619,"line":830},[617,14401,712],{"class":622},[617,14403,730],{"class":626},[617,14405,649],{"class":622},[3179,14407,14408],{},[594,14409,14410,14411,14415,14416,14418,14419,14421,14422,1126],{},"If you are using other controls ",[617,14412,14413],{"style":13848},[1120,14414,775],{"href":104,"style":13851}," they will interfere with each other when dragging. To avoid this, you can set the ",[598,14417,11471],{}," prop to ",[598,14420,941],{}," on the ",[1649,14423,775],{},[484,14425,14427],{"id":14426},"modes","Modes",[594,14429,14430],{},"The Transform Controls can be used in three different modes:",[4031,14432,14434],{"id":14433},"translate","Translate",[594,14436,14437],{},[8215,14438],{"alt":14434,"src":14439},"/cientos/transform-controls-translate.png",[594,14441,14442],{},"The default mode allows you to move the object around the scene.",[606,14444,14446],{"className":608,"code":14445,"language":613,"meta":556,"style":556},"\u003CTransformControls mode=\"translate\" :object=\"sphereRef\" />\n",[598,14447,14448],{"__ignoreMap":556},[617,14449,14450,14452,14454,14456,14458,14460,14462,14464,14466,14469,14471,14473,14476,14478],{"class":619,"line":557},[617,14451,623],{"class":622},[617,14453,14204],{"class":626},[617,14455,6823],{"class":630},[617,14457,637],{"class":622},[617,14459,640],{"class":622},[617,14461,14433],{"class":643},[617,14463,640],{"class":622},[617,14465,3009],{"class":622},[617,14467,14468],{"class":630},"object",[617,14470,637],{"class":622},[617,14472,640],{"class":622},[617,14474,14475],{"class":663},"sphereRef",[617,14477,640],{"class":622},[617,14479,767],{"class":622},[4031,14481,14483],{"id":14482},"rotate","Rotate",[594,14485,14486],{},[8215,14487],{"alt":14483,"src":14488},"/cientos/transform-controls-rotate.png",[594,14490,14491],{},"The rotate mode allows you to rotate the object around the scene.",[606,14493,14495],{"className":608,"code":14494,"language":613,"meta":556,"style":556},"\u003CTransformControls mode=\"rotate\" :object=\"boxRef\" />\n",[598,14496,14497],{"__ignoreMap":556},[617,14498,14499,14501,14503,14505,14507,14509,14511,14513,14515,14517,14519,14521,14523,14525],{"class":619,"line":557},[617,14500,623],{"class":622},[617,14502,14204],{"class":626},[617,14504,6823],{"class":630},[617,14506,637],{"class":622},[617,14508,640],{"class":622},[617,14510,14482],{"class":643},[617,14512,640],{"class":622},[617,14514,3009],{"class":622},[617,14516,14468],{"class":630},[617,14518,637],{"class":622},[617,14520,640],{"class":622},[617,14522,14308],{"class":663},[617,14524,640],{"class":622},[617,14526,767],{"class":622},[4031,14528,14529],{"id":5610},"Scale",[594,14531,14532],{},[8215,14533],{"alt":14529,"src":14534},"/cientos/transform-controls-scale.png",[594,14536,14537],{},"The scale mode allows you to scale the object around the scene.",[606,14539,14541],{"className":608,"code":14540,"language":613,"meta":556,"style":556},"\u003CTransformControls mode=\"scale\" :object=\"sphereRef\" />\n",[598,14542,14543],{"__ignoreMap":556},[617,14544,14545,14547,14549,14551,14553,14555,14557,14559,14561,14563,14565,14567,14569,14571],{"class":619,"line":557},[617,14546,623],{"class":622},[617,14548,14204],{"class":626},[617,14550,6823],{"class":630},[617,14552,637],{"class":622},[617,14554,640],{"class":622},[617,14556,5610],{"class":643},[617,14558,640],{"class":622},[617,14560,3009],{"class":622},[617,14562,14468],{"class":630},[617,14564,637],{"class":622},[617,14566,640],{"class":622},[617,14568,14475],{"class":663},[617,14570,640],{"class":622},[617,14572,767],{"class":622},[484,14574,902],{"id":901},[907,14576,14577,14587],{},[910,14578,14579],{},[913,14580,14581,14583,14585],{},[916,14582,918],{"align":977},[916,14584,921],{"align":977},[916,14586,924],{},[926,14588,14589,14607,14626,14642,14677,14697,14711,14725,14739,14753,14769,14785],{},[913,14590,14591,14595,14603],{},[931,14592,14593],{"align":977},[1649,14594,14468],{},[931,14596,14597,14598,14602],{"align":977},"The instance ",[1120,14599,7602],{"href":14600,"rel":14601},"https://threejs.org/docs/index.html#api/en/core/Object3D",[1124]," to control.",[931,14604,14605],{},[598,14606,3636],{},[913,14608,14609,14613,14622],{},[931,14610,14611],{"align":977},[1649,14612,6844],{},[931,14614,14615,14616,1652,14618,5591,14620,1126],{"align":977},"The mode of the controls. Can be ",[598,14617,14433],{},[598,14619,14482],{},[598,14621,5610],{},[931,14623,14624],{},[598,14625,14433],{},[913,14627,14628,14633,14638],{},[931,14629,14630],{"align":977},[1649,14631,14632],{},"enabled",[931,14634,938,14635,14637],{"align":977},[598,14636,941],{},", the controls will be enabled.",[931,14639,14640],{},[598,14641,941],{},[913,14643,14644,14649,14673],{},[931,14645,14646],{"align":977},[1649,14647,14648],{},"axis",[931,14650,14651,14652,1652,14655,1652,14658,1652,14661,1652,14664,1652,14667,1652,14670,1126],{"align":977},"The axis to use for the controls. Can be ",[598,14653,14654],{},"X",[598,14656,14657],{},"Y",[598,14659,14660],{},"Z",[598,14662,14663],{},"XY",[598,14665,14666],{},"YZ",[598,14668,14669],{},"XZ",[598,14671,14672],{},"XYZ",[931,14674,14675],{},[598,14676,14672],{},[913,14678,14679,14684,14693],{},[931,14680,14681],{"align":977},[1649,14682,14683],{},"space",[931,14685,14686,14687,5591,14690,1126],{"align":977},"The space to use for the controls. Can be ",[598,14688,14689],{},"local",[598,14691,14692],{},"world",[931,14694,14695],{},[598,14696,14689],{},[913,14698,14699,14704,14707],{},[931,14700,14701],{"align":977},[1649,14702,14703],{},"size",[931,14705,14706],{"align":977},"The size of the controls.",[931,14708,14709],{},[598,14710,1854],{},[913,14712,14713,14718,14721],{},[931,14714,14715],{"align":977},[1649,14716,14717],{},"translationSnap",[931,14719,14720],{"align":977},"The distance to snap to when translating. (World units)",[931,14722,14723],{},[598,14724,3636],{},[913,14726,14727,14732,14735],{},[931,14728,14729],{"align":977},[1649,14730,14731],{},"rotationSnap",[931,14733,14734],{"align":977},"The angle to snap to when rotating. (Radians)",[931,14736,14737],{},[598,14738,3636],{},[913,14740,14741,14746,14749],{},[931,14742,14743],{"align":977},[1649,14744,14745],{},"scaleSnap",[931,14747,14748],{"align":977},"The scale to snap to when scaling.",[931,14750,14751],{},[598,14752,3636],{},[913,14754,14755,14760,14765],{},[931,14756,14757],{"align":977},[1649,14758,14759],{},"showX",[931,14761,938,14762,14764],{"align":977},[598,14763,941],{},", the X-axis helper will be shown.",[931,14766,14767],{},[598,14768,941],{},[913,14770,14771,14776,14781],{},[931,14772,14773],{"align":977},[1649,14774,14775],{},"showY",[931,14777,938,14778,14780],{"align":977},[598,14779,941],{},", the Y-axis helper will be shown.",[931,14782,14783],{},[598,14784,941],{},[913,14786,14787,14792,14797],{},[931,14788,14789],{"align":977},[1649,14790,14791],{},"showZ",[931,14793,938,14794,14796],{"align":977},[598,14795,941],{},", the Z-axis helper will be shown.",[931,14798,14799],{},[598,14800,941],{},[484,14802,12330],{"id":12329},[907,14804,14805,14813],{},[910,14806,14807],{},[913,14808,14809,14811],{},[916,14810,5739],{"align":977},[916,14812,921],{"align":977},[926,14814,14815,14825,14834,14844,14854],{},[913,14816,14817,14822],{},[931,14818,14819],{"align":977},[1649,14820,14821],{},"dragging",[931,14823,14824],{"align":977},"Fired when the user starts or stops dragging the controls.",[913,14826,14827,14831],{},[931,14828,14829],{"align":977},[1649,14830,12346],{},[931,14832,14833],{"align":977},"Fired when the user changes the controls.",[913,14835,14836,14841],{},[931,14837,14838],{"align":977},[1649,14839,14840],{},"mouseDown",[931,14842,14843],{"align":977},"Fired when the user clicks on the controls.",[913,14845,14846,14851],{},[931,14847,14848],{"align":977},[1649,14849,14850],{},"mouseUp",[931,14852,14853],{"align":977},"Fired when the user releases the mouse button on the controls.",[913,14855,14856,14861],{},[931,14857,14858],{"align":977},[1649,14859,14860],{},"objectChange",[931,14862,14863],{"align":977},"Fired when the user changes the object.",[1307,14865,14866],{"scoped":574},"\nimg {\n aspect-ratio: 16/9;\n object-fit: cover;\n object-position: top;\n border-radius: 8px;\n}\n",[1307,14868,14869],{},"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 .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":556,"searchDepth":557,"depth":558,"links":14871},[14872,14873,14878,14879],{"id":604,"depth":558,"text":15},{"id":14426,"depth":558,"text":14427,"children":14874},[14875,14876,14877],{"id":14433,"depth":688,"text":14434},{"id":14482,"depth":688,"text":14483},{"id":5610,"depth":688,"text":14529},{"id":901,"depth":558,"text":902},{"id":12329,"depth":558,"text":12330},"Set of three gizmos that can be used to translate, rotate and scale objects",{},{"title":111,"description":14880},"rtA5mRjWCioaInPfcKtnEcdh3kG88FfwUz7CBNeBOWs",[14885,15661,16347,16962,17592,18228,19676,22528,23004],{"id":14886,"title":121,"body":14887,"description":15657,"extension":571,"links":572,"meta":15658,"navigation":574,"path":122,"seo":15659,"stem":123,"__hash__":15660},"docs/2.api/3.loaders/1.use-gltf.md",{"type":481,"value":14888,"toc":15651},[14889,14894,14901,14903,15283,15299,15371,15375,15474,15477,15545,15549,15552,15645,15648],[2275,14890,14891],{},[14892,14893],"loaders-gltf",{},[594,14895,14896,14897,14900],{},"A composable that allows you to easily load glb/glTF models into your ",[1649,14898,14899],{},"TresJS"," scene.",[484,14902,15],{"id":604},[14904,14905,14906,15057],"code-group",{},[606,14907,14911],{"className":608,"code":14908,"filename":14909,"highlights":14910,"language":613,"meta":556,"style":556},"\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",[558,719],[598,14912,14913,14933,14952,14956,14972,15000,15008,15012,15020,15049],{"__ignoreMap":556},[617,14914,14915,14917,14919,14921,14923,14925,14927,14929,14931],{"class":619,"line":557},[617,14916,623],{"class":622},[617,14918,627],{"class":626},[617,14920,631],{"class":630},[617,14922,634],{"class":630},[617,14924,637],{"class":622},[617,14926,640],{"class":622},[617,14928,644],{"class":643},[617,14930,640],{"class":622},[617,14932,649],{"class":622},[617,14934,14936,14938,14940,14942,14944,14946,14948,14950],{"class":14935,"line":558},[619,653],[617,14937,657],{"class":656},[617,14939,660],{"class":622},[617,14941,4327],{"class":663},[617,14943,673],{"class":622},[617,14945,676],{"class":656},[617,14947,679],{"class":622},[617,14949,682],{"class":643},[617,14951,685],{"class":622},[617,14953,14954],{"class":619,"line":688},[617,14955,722],{"emptyLinePlaceholder":574},[617,14957,14958,14960,14963,14965,14967,14970],{"class":619,"line":709},[617,14959,2395],{"class":630},[617,14961,14962],{"class":663}," path ",[617,14964,637],{"class":622},[617,14966,679],{"class":622},[617,14968,14969],{"class":643},"./blender-cube.glb",[617,14971,685],{"class":622},[617,14973,14975,14977,14979,14981,14983,14986,14988,14991,14993,14995,14997],{"class":14974,"line":719},[619,653],[617,14976,2395],{"class":630},[617,14978,660],{"class":622},[617,14980,2400],{"class":663},[617,14982,667],{"class":622},[617,14984,14985],{"class":663}," nodes",[617,14987,667],{"class":622},[617,14989,14990],{"class":663}," materials ",[617,14992,2408],{"class":622},[617,14994,2411],{"class":622},[617,14996,4327],{"class":2414},[617,14998,14999],{"class":663},"(path)\n",[617,15001,15002,15004,15006],{"class":619,"line":725},[617,15003,712],{"class":622},[617,15005,627],{"class":626},[617,15007,649],{"class":622},[617,15009,15010],{"class":619,"line":735},[617,15011,722],{"emptyLinePlaceholder":574},[617,15013,15014,15016,15018],{"class":619,"line":758},[617,15015,623],{"class":622},[617,15017,730],{"class":626},[617,15019,649],{"class":622},[617,15021,15022,15024,15026,15028,15030,15032,15034,15036,15038,15040,15042,15045,15047],{"class":619,"line":770},[617,15023,738],{"class":622},[617,15025,4414],{"class":626},[617,15027,2690],{"class":630},[617,15029,637],{"class":622},[617,15031,640],{"class":622},[617,15033,12760],{"class":643},[617,15035,640],{"class":622},[617,15037,4428],{"class":630},[617,15039,637],{"class":622},[617,15041,640],{"class":622},[617,15043,15044],{"class":643},"state?.scene",[617,15046,640],{"class":622},[617,15048,767],{"class":622},[617,15050,15051,15053,15055],{"class":619,"line":780},[617,15052,712],{"class":622},[617,15054,730],{"class":626},[617,15056,649],{"class":622},[606,15058,15061],{"className":608,"code":15059,"filename":15060,"language":613,"meta":556,"style":556},"\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",[598,15062,15063,15083,15101,15119,15136,15144,15148,15156,15175,15194,15202,15211,15218,15231,15244,15249,15267,15275],{"__ignoreMap":556},[617,15064,15065,15067,15069,15071,15073,15075,15077,15079,15081],{"class":619,"line":557},[617,15066,623],{"class":622},[617,15068,627],{"class":626},[617,15070,631],{"class":630},[617,15072,634],{"class":630},[617,15074,637],{"class":622},[617,15076,640],{"class":622},[617,15078,644],{"class":643},[617,15080,640],{"class":622},[617,15082,649],{"class":622},[617,15084,15085,15087,15089,15091,15093,15095,15097,15099],{"class":619,"line":558},[617,15086,657],{"class":656},[617,15088,660],{"class":622},[617,15090,670],{"class":663},[617,15092,673],{"class":622},[617,15094,676],{"class":656},[617,15096,679],{"class":622},[617,15098,682],{"class":643},[617,15100,685],{"class":622},[617,15102,15103,15105,15107,15109,15111,15113,15115,15117],{"class":619,"line":688},[617,15104,657],{"class":656},[617,15106,660],{"class":622},[617,15108,695],{"class":663},[617,15110,673],{"class":622},[617,15112,676],{"class":656},[617,15114,679],{"class":622},[617,15116,704],{"class":643},[617,15118,685],{"class":622},[617,15120,15121,15123,15126,15129,15131,15134],{"class":619,"line":709},[617,15122,657],{"class":656},[617,15124,15125],{"class":663}," TheModel ",[617,15127,15128],{"class":656},"from",[617,15130,679],{"class":622},[617,15132,15133],{"class":643},"./TheModel.vue",[617,15135,685],{"class":622},[617,15137,15138,15140,15142],{"class":619,"line":719},[617,15139,712],{"class":622},[617,15141,627],{"class":626},[617,15143,649],{"class":622},[617,15145,15146],{"class":619,"line":725},[617,15147,722],{"emptyLinePlaceholder":574},[617,15149,15150,15152,15154],{"class":619,"line":735},[617,15151,623],{"class":622},[617,15153,730],{"class":626},[617,15155,649],{"class":622},[617,15157,15158,15160,15162,15164,15166,15168,15171,15173],{"class":619,"line":758},[617,15159,738],{"class":622},[617,15161,741],{"class":626},[617,15163,744],{"class":630},[617,15165,637],{"class":622},[617,15167,640],{"class":622},[617,15169,15170],{"class":643},"#F78B3D",[617,15172,640],{"class":622},[617,15174,649],{"class":622},[617,15176,15177,15179,15181,15183,15185,15187,15190,15192],{"class":619,"line":770},[617,15178,761],{"class":622},[617,15180,764],{"class":626},[617,15182,1465],{"class":630},[617,15184,637],{"class":622},[617,15186,640],{"class":622},[617,15188,15189],{"class":643},"[3, 2, 5]",[617,15191,640],{"class":622},[617,15193,767],{"class":622},[617,15195,15196,15198,15200],{"class":619,"line":780},[617,15197,761],{"class":622},[617,15199,775],{"class":626},[617,15201,767],{"class":622},[617,15203,15204,15206,15209],{"class":619,"line":785},[617,15205,761],{"class":622},[617,15207,15208],{"class":626},"TheModel",[617,15210,767],{"class":622},[617,15212,15213,15215],{"class":619,"line":807},[617,15214,761],{"class":622},[617,15216,15217],{"class":626},"TresDirectionalLight\n",[617,15219,15220,15223,15225,15227,15229],{"class":619,"line":611},[617,15221,15222],{"class":630}," :intensity",[617,15224,637],{"class":622},[617,15226,640],{"class":622},[617,15228,800],{"class":643},[617,15230,3111],{"class":622},[617,15232,15233,15236,15238,15240,15242],{"class":619,"line":830},[617,15234,15235],{"class":630}," :position",[617,15237,637],{"class":622},[617,15239,640],{"class":622},[617,15241,11330],{"class":643},[617,15243,3111],{"class":622},[617,15245,15246],{"class":619,"line":841},[617,15247,15248],{"class":622}," />\n",[617,15250,15251,15253,15255,15257,15259,15261,15263,15265],{"class":619,"line":852},[617,15252,761],{"class":622},[617,15254,8436],{"class":626},[617,15256,1847],{"class":630},[617,15258,637],{"class":622},[617,15260,640],{"class":622},[617,15262,1854],{"class":643},[617,15264,640],{"class":622},[617,15266,767],{"class":622},[617,15268,15269,15271,15273],{"class":619,"line":862},[617,15270,885],{"class":622},[617,15272,741],{"class":626},[617,15274,649],{"class":622},[617,15276,15277,15279,15281],{"class":619,"line":612},[617,15278,712],{"class":622},[617,15280,730],{"class":626},[617,15282,649],{"class":622},[594,15284,15285,15286,15288,15289,15292,15293,15298],{},"An advantage of using ",[598,15287,121],{}," is that you can pass a ",[598,15290,15291],{},"draco"," prop to enable ",[1120,15294,15297],{"href":15295,"rel":15296},"https://threejs.org/docs/index.html?q=drac#examples/en/loaders/DRACOLoader",[1124],"Draco compression"," for the model. This will reduce the size of the model and improve performance.",[606,15300,15302],{"className":1166,"code":15301,"language":644,"meta":556,"style":556},"import { useGLTF } from '@tresjs/cientos'\n\nconst { state, nodes, materials } = useGLTF('/models/AkuAku.gltf', { draco: true })\n",[598,15303,15304,15322,15326],{"__ignoreMap":556},[617,15305,15306,15308,15310,15312,15314,15316,15318,15320],{"class":619,"line":557},[617,15307,657],{"class":656},[617,15309,660],{"class":622},[617,15311,4327],{"class":663},[617,15313,673],{"class":622},[617,15315,676],{"class":656},[617,15317,679],{"class":622},[617,15319,682],{"class":643},[617,15321,685],{"class":622},[617,15323,15324],{"class":619,"line":558},[617,15325,722],{"emptyLinePlaceholder":574},[617,15327,15328,15330,15332,15334,15336,15338,15340,15342,15344,15346,15348,15350,15352,15355,15357,15359,15361,15363,15365,15367,15369],{"class":619,"line":688},[617,15329,2395],{"class":630},[617,15331,660],{"class":622},[617,15333,2400],{"class":663},[617,15335,667],{"class":622},[617,15337,14985],{"class":663},[617,15339,667],{"class":622},[617,15341,14990],{"class":663},[617,15343,2408],{"class":622},[617,15345,2411],{"class":622},[617,15347,4327],{"class":2414},[617,15349,2417],{"class":663},[617,15351,2420],{"class":622},[617,15353,15354],{"class":643},"/models/AkuAku.gltf",[617,15356,2420],{"class":622},[617,15358,667],{"class":622},[617,15360,660],{"class":622},[617,15362,4372],{"class":626},[617,15364,1198],{"class":622},[617,15366,4378],{"class":4377},[617,15368,673],{"class":622},[617,15370,2428],{"class":663},[484,15372,15374],{"id":15373},"return-values","Return Values",[907,15376,15377,15387],{},[910,15378,15379],{},[913,15380,15381,15383,15385],{},[916,15382,8069],{"align":977},[916,15384,5949],{},[916,15386,921],{},[926,15388,15389,15403,15417,15430,15445,15459],{},[913,15390,15391,15395,15400],{},[931,15392,15393],{"align":977},[1649,15394,12760],{},[931,15396,15397],{},[598,15398,15399],{},"GLTF",[931,15401,15402],{},"The loaded GLTF model state",[913,15404,15405,15410,15414],{},[931,15406,15407],{"align":977},[1649,15408,15409],{},"nodes",[931,15411,15412],{},[598,15413,14468],{},[931,15415,15416],{},"Computed object containing all nodes in the scene",[913,15418,15419,15423,15427],{},[931,15420,15421],{"align":977},[1649,15422,508],{},[931,15424,15425],{},[598,15426,14468],{},[931,15428,15429],{},"Computed object containing all materials in the scene",[913,15431,15432,15437,15442],{},[931,15433,15434],{"align":977},[1649,15435,15436],{},"isLoading",[931,15438,15439],{},[598,15440,15441],{},"boolean",[931,15443,15444],{},"Whether the model is currently loading",[913,15446,15447,15452,15456],{},[931,15448,15449],{"align":977},[1649,15450,15451],{},"progress",[931,15453,15454],{},[598,15455,5332],{},[931,15457,15458],{},"The progress of the model loading",[913,15460,15461,15466,15471],{},[931,15462,15463],{"align":977},[1649,15464,15465],{},"load",[931,15467,15468],{},[598,15469,15470],{},"() => Promise\u003Cvoid>",[931,15472,15473],{},"Function to reload the model",[484,15475,12073],{"id":15476},"options",[907,15478,15479,15491],{},[910,15480,15481],{},[913,15482,15483,15485,15487,15489],{},[916,15484,8069],{"align":977},[916,15486,5949],{},[916,15488,924],{},[916,15490,921],{},[926,15492,15493,15510,15529],{},[913,15494,15495,15499,15503,15507],{},[931,15496,15497],{"align":977},[1649,15498,15291],{},[931,15500,15501],{},[598,15502,15441],{},[931,15504,15505],{},[598,15506,951],{},[931,15508,15509],{},"Whether to enable Draco compression.",[913,15511,15512,15517,15521,15526],{},[931,15513,15514],{"align":977},[1649,15515,15516],{},"decoderPath",[931,15518,15519],{},[598,15520,3552],{},[931,15522,15523],{},[598,15524,15525],{},"'https://www.gstatic.com/draco/versioned/decoders/1.5.6/'",[931,15527,15528],{},"Path to the Draco decoder.",[913,15530,15531,15536,15540,15542],{},[931,15532,15533],{"align":977},[1649,15534,15535],{},"traverse",[931,15537,15538],{},[598,15539,10097],{},[931,15541],{},[931,15543,15544],{},"A traverse function applied to the scene upon loading the model.",[484,15546,15548],{"id":15547},"accessing-nodes-and-materials","Accessing Nodes and Materials",[594,15550,15551],{},"The composable provides computed properties to easily access nodes and materials in your scene:",[606,15553,15555],{"className":1166,"code":15554,"language":644,"meta":556,"style":556},"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",[598,15556,15557,15586,15590,15595,15615,15619,15624],{"__ignoreMap":556},[617,15558,15559,15561,15563,15565,15567,15569,15571,15573,15575,15577,15579,15582,15584],{"class":619,"line":557},[617,15560,2395],{"class":630},[617,15562,660],{"class":622},[617,15564,14985],{"class":663},[617,15566,667],{"class":622},[617,15568,14990],{"class":663},[617,15570,2408],{"class":622},[617,15572,2411],{"class":622},[617,15574,4327],{"class":2414},[617,15576,2417],{"class":663},[617,15578,2420],{"class":622},[617,15580,15581],{"class":643},"/model.glb",[617,15583,2420],{"class":622},[617,15585,2428],{"class":663},[617,15587,15588],{"class":619,"line":558},[617,15589,722],{"emptyLinePlaceholder":574},[617,15591,15592],{"class":619,"line":688},[617,15593,15594],{"class":1189},"// Access a specific node\n",[617,15596,15597,15599,15602,15604,15606,15608,15610,15612],{"class":619,"line":709},[617,15598,2395],{"class":630},[617,15600,15601],{"class":663}," mesh ",[617,15603,637],{"class":622},[617,15605,14985],{"class":663},[617,15607,1126],{"class":622},[617,15609,3665],{"class":663},[617,15611,1126],{"class":622},[617,15613,15614],{"class":663},"MeshName\n",[617,15616,15617],{"class":619,"line":719},[617,15618,722],{"emptyLinePlaceholder":574},[617,15620,15621],{"class":619,"line":725},[617,15622,15623],{"class":1189},"// Access a specific material\n",[617,15625,15626,15628,15631,15633,15636,15638,15640,15642],{"class":619,"line":735},[617,15627,2395],{"class":630},[617,15629,15630],{"class":663}," material ",[617,15632,637],{"class":622},[617,15634,15635],{"class":663}," materials",[617,15637,1126],{"class":622},[617,15639,3665],{"class":663},[617,15641,1126],{"class":622},[617,15643,15644],{"class":663},"MaterialName\n",[594,15646,15647],{},"This makes it easier to manipulate specific parts of your model or apply materials programmatically.",[1307,15649,15650],{},"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}",{"title":556,"searchDepth":557,"depth":558,"links":15652},[15653,15654,15655,15656],{"id":604,"depth":558,"text":15},{"id":15373,"depth":558,"text":15374},{"id":15476,"depth":558,"text":12073},{"id":15547,"depth":558,"text":15548},"A composable to load GLTF models in TresJS scenes.",{},{"title":121,"description":15657},"fYq4jVQpA7_-e8vVyrsxzacgjfPSPV_-K5TgUiq8APE",{"id":15662,"title":125,"body":15663,"description":16343,"extension":571,"links":572,"meta":16344,"navigation":574,"path":126,"seo":16345,"stem":127,"__hash__":16346},"docs/2.api/3.loaders/2.gltf-model.md",{"type":481,"value":15664,"toc":16338},[15665,15669,15680,15682,16011,16015,16024,16242,16244,16335],[2275,15666,15667],{},[14892,15668],{},[594,15670,2756,15671,15673,15674,15679],{},[598,15672,125],{}," component is a wrapper around ",[1120,15675,15677],{"href":15676},"./use-gltf",[598,15678,121],{}," composable and accepts the same options as props.",[484,15681,15],{"id":604},[14904,15683,15684,15797],{},[606,15685,15688],{"className":608,"code":15686,"filename":14909,"highlights":15687,"language":613,"meta":556,"style":556},"\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",[558,758],[598,15689,15690,15710,15730,15734,15748,15756,15760,15768,15789],{"__ignoreMap":556},[617,15691,15692,15694,15696,15698,15700,15702,15704,15706,15708],{"class":619,"line":557},[617,15693,623],{"class":622},[617,15695,627],{"class":626},[617,15697,631],{"class":630},[617,15699,634],{"class":630},[617,15701,637],{"class":622},[617,15703,640],{"class":622},[617,15705,644],{"class":643},[617,15707,640],{"class":622},[617,15709,649],{"class":622},[617,15711,15713,15715,15717,15720,15722,15724,15726,15728],{"class":15712,"line":558},[619,653],[617,15714,657],{"class":656},[617,15716,660],{"class":622},[617,15718,15719],{"class":663}," GLTFModel",[617,15721,673],{"class":622},[617,15723,676],{"class":656},[617,15725,679],{"class":622},[617,15727,682],{"class":643},[617,15729,685],{"class":622},[617,15731,15732],{"class":619,"line":688},[617,15733,722],{"emptyLinePlaceholder":574},[617,15735,15736,15738,15740,15742,15744,15746],{"class":619,"line":709},[617,15737,2395],{"class":630},[617,15739,14962],{"class":663},[617,15741,637],{"class":622},[617,15743,679],{"class":622},[617,15745,14969],{"class":643},[617,15747,685],{"class":622},[617,15749,15750,15752,15754],{"class":619,"line":719},[617,15751,712],{"class":622},[617,15753,627],{"class":626},[617,15755,649],{"class":622},[617,15757,15758],{"class":619,"line":725},[617,15759,722],{"emptyLinePlaceholder":574},[617,15761,15762,15764,15766],{"class":619,"line":735},[617,15763,623],{"class":622},[617,15765,730],{"class":626},[617,15767,649],{"class":622},[617,15769,15771,15773,15775,15778,15780,15782,15785,15787],{"class":15770,"line":758},[619,653],[617,15772,738],{"class":622},[617,15774,125],{"class":626},[617,15776,15777],{"class":630}," :path",[617,15779,637],{"class":622},[617,15781,640],{"class":622},[617,15783,15784],{"class":643},"path",[617,15786,640],{"class":622},[617,15788,767],{"class":622},[617,15790,15791,15793,15795],{"class":619,"line":770},[617,15792,712],{"class":622},[617,15794,730],{"class":626},[617,15796,649],{"class":622},[606,15798,15799],{"className":608,"code":15059,"filename":15060,"language":613,"meta":556,"style":556},[598,15800,15801,15821,15839,15857,15871,15879,15883,15891,15909,15927,15935,15943,15949,15961,15973,15977,15995,16003],{"__ignoreMap":556},[617,15802,15803,15805,15807,15809,15811,15813,15815,15817,15819],{"class":619,"line":557},[617,15804,623],{"class":622},[617,15806,627],{"class":626},[617,15808,631],{"class":630},[617,15810,634],{"class":630},[617,15812,637],{"class":622},[617,15814,640],{"class":622},[617,15816,644],{"class":643},[617,15818,640],{"class":622},[617,15820,649],{"class":622},[617,15822,15823,15825,15827,15829,15831,15833,15835,15837],{"class":619,"line":558},[617,15824,657],{"class":656},[617,15826,660],{"class":622},[617,15828,670],{"class":663},[617,15830,673],{"class":622},[617,15832,676],{"class":656},[617,15834,679],{"class":622},[617,15836,682],{"class":643},[617,15838,685],{"class":622},[617,15840,15841,15843,15845,15847,15849,15851,15853,15855],{"class":619,"line":688},[617,15842,657],{"class":656},[617,15844,660],{"class":622},[617,15846,695],{"class":663},[617,15848,673],{"class":622},[617,15850,676],{"class":656},[617,15852,679],{"class":622},[617,15854,704],{"class":643},[617,15856,685],{"class":622},[617,15858,15859,15861,15863,15865,15867,15869],{"class":619,"line":709},[617,15860,657],{"class":656},[617,15862,15125],{"class":663},[617,15864,15128],{"class":656},[617,15866,679],{"class":622},[617,15868,15133],{"class":643},[617,15870,685],{"class":622},[617,15872,15873,15875,15877],{"class":619,"line":719},[617,15874,712],{"class":622},[617,15876,627],{"class":626},[617,15878,649],{"class":622},[617,15880,15881],{"class":619,"line":725},[617,15882,722],{"emptyLinePlaceholder":574},[617,15884,15885,15887,15889],{"class":619,"line":735},[617,15886,623],{"class":622},[617,15888,730],{"class":626},[617,15890,649],{"class":622},[617,15892,15893,15895,15897,15899,15901,15903,15905,15907],{"class":619,"line":758},[617,15894,738],{"class":622},[617,15896,741],{"class":626},[617,15898,744],{"class":630},[617,15900,637],{"class":622},[617,15902,640],{"class":622},[617,15904,15170],{"class":643},[617,15906,640],{"class":622},[617,15908,649],{"class":622},[617,15910,15911,15913,15915,15917,15919,15921,15923,15925],{"class":619,"line":770},[617,15912,761],{"class":622},[617,15914,764],{"class":626},[617,15916,1465],{"class":630},[617,15918,637],{"class":622},[617,15920,640],{"class":622},[617,15922,15189],{"class":643},[617,15924,640],{"class":622},[617,15926,767],{"class":622},[617,15928,15929,15931,15933],{"class":619,"line":780},[617,15930,761],{"class":622},[617,15932,775],{"class":626},[617,15934,767],{"class":622},[617,15936,15937,15939,15941],{"class":619,"line":785},[617,15938,761],{"class":622},[617,15940,15208],{"class":626},[617,15942,767],{"class":622},[617,15944,15945,15947],{"class":619,"line":807},[617,15946,761],{"class":622},[617,15948,15217],{"class":626},[617,15950,15951,15953,15955,15957,15959],{"class":619,"line":611},[617,15952,15222],{"class":630},[617,15954,637],{"class":622},[617,15956,640],{"class":622},[617,15958,800],{"class":643},[617,15960,3111],{"class":622},[617,15962,15963,15965,15967,15969,15971],{"class":619,"line":830},[617,15964,15235],{"class":630},[617,15966,637],{"class":622},[617,15968,640],{"class":622},[617,15970,11330],{"class":643},[617,15972,3111],{"class":622},[617,15974,15975],{"class":619,"line":841},[617,15976,15248],{"class":622},[617,15978,15979,15981,15983,15985,15987,15989,15991,15993],{"class":619,"line":852},[617,15980,761],{"class":622},[617,15982,8436],{"class":626},[617,15984,1847],{"class":630},[617,15986,637],{"class":622},[617,15988,640],{"class":622},[617,15990,1854],{"class":643},[617,15992,640],{"class":622},[617,15994,767],{"class":622},[617,15996,15997,15999,16001],{"class":619,"line":862},[617,15998,885],{"class":622},[617,16000,741],{"class":626},[617,16002,649],{"class":622},[617,16004,16005,16007,16009],{"class":619,"line":612},[617,16006,712],{"class":622},[617,16008,730],{"class":626},[617,16010,649],{"class":622},[484,16012,16014],{"id":16013},"model-reference","Model reference",[594,16016,16017,16018,1657,16020,16023],{},"You can access the model reference by passing a ",[598,16019,5874],{},[598,16021,16022],{},"model"," prop and then using to get the object.",[606,16025,16027],{"className":608,"code":16026,"language":613,"meta":556,"style":556},"\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",[598,16028,16029,16049,16071,16089,16093,16113,16117,16136,16141,16169,16175,16183,16187,16195,16202,16216,16230,16234],{"__ignoreMap":556},[617,16030,16031,16033,16035,16037,16039,16041,16043,16045,16047],{"class":619,"line":557},[617,16032,623],{"class":622},[617,16034,627],{"class":626},[617,16036,631],{"class":630},[617,16038,634],{"class":630},[617,16040,637],{"class":622},[617,16042,640],{"class":622},[617,16044,644],{"class":643},[617,16046,640],{"class":622},[617,16048,649],{"class":622},[617,16050,16051,16053,16055,16057,16060,16062,16064,16066,16069],{"class":619,"line":558},[617,16052,657],{"class":656},[617,16054,3422],{"class":656},[617,16056,660],{"class":622},[617,16058,16059],{"class":663}," TresObject",[617,16061,673],{"class":622},[617,16063,676],{"class":656},[617,16065,679],{"class":622},[617,16067,16068],{"class":643},"tresjs",[617,16070,685],{"class":622},[617,16072,16073,16075,16077,16079,16081,16083,16085,16087],{"class":619,"line":688},[617,16074,657],{"class":656},[617,16076,660],{"class":622},[617,16078,15719],{"class":663},[617,16080,673],{"class":622},[617,16082,676],{"class":656},[617,16084,679],{"class":622},[617,16086,682],{"class":643},[617,16088,685],{"class":622},[617,16090,16091],{"class":619,"line":709},[617,16092,722],{"emptyLinePlaceholder":574},[617,16094,16095,16097,16100,16102,16104,16106,16109,16111],{"class":619,"line":719},[617,16096,2395],{"class":630},[617,16098,16099],{"class":663}," modelRef ",[617,16101,637],{"class":622},[617,16103,3478],{"class":2414},[617,16105,623],{"class":622},[617,16107,16108],{"class":1180},"TresObject",[617,16110,3631],{"class":622},[617,16112,6515],{"class":663},[617,16114,16115],{"class":619,"line":725},[617,16116,722],{"emptyLinePlaceholder":574},[617,16118,16119,16121,16124,16126,16128,16130,16132,16134],{"class":619,"line":735},[617,16120,10239],{"class":2414},[617,16122,16123],{"class":663},"(modelRef",[617,16125,667],{"class":622},[617,16127,3054],{"class":622},[617,16129,16022],{"class":6818},[617,16131,3320],{"class":622},[617,16133,3657],{"class":630},[617,16135,1184],{"class":622},[617,16137,16138],{"class":619,"line":758},[617,16139,16140],{"class":1189}," // Do something with the model\n",[617,16142,16143,16146,16148,16150,16152,16155,16157,16159,16161,16163,16165,16167],{"class":619,"line":770},[617,16144,16145],{"class":663}," model",[617,16147,1126],{"class":622},[617,16149,4110],{"class":663},[617,16151,1126],{"class":622},[617,16153,16154],{"class":2414},"set",[617,16156,2417],{"class":626},[617,16158,945],{"class":2481},[617,16160,667],{"class":622},[617,16162,2486],{"class":2481},[617,16164,667],{"class":622},[617,16166,2486],{"class":2481},[617,16168,2428],{"class":626},[617,16170,16171,16173],{"class":619,"line":780},[617,16172,2408],{"class":622},[617,16174,2428],{"class":663},[617,16176,16177,16179,16181],{"class":619,"line":785},[617,16178,712],{"class":622},[617,16180,627],{"class":626},[617,16182,649],{"class":622},[617,16184,16185],{"class":619,"line":807},[617,16186,722],{"emptyLinePlaceholder":574},[617,16188,16189,16191,16193],{"class":619,"line":611},[617,16190,623],{"class":622},[617,16192,730],{"class":626},[617,16194,649],{"class":622},[617,16196,16197,16199],{"class":619,"line":830},[617,16198,738],{"class":622},[617,16200,16201],{"class":626},"GLTFModel\n",[617,16203,16204,16207,16209,16211,16214],{"class":619,"line":841},[617,16205,16206],{"class":630}," ref",[617,16208,637],{"class":622},[617,16210,640],{"class":622},[617,16212,16213],{"class":643},"modelRef",[617,16215,3111],{"class":622},[617,16217,16218,16221,16223,16225,16228],{"class":619,"line":852},[617,16219,16220],{"class":630}," path",[617,16222,637],{"class":622},[617,16224,640],{"class":622},[617,16226,16227],{"class":643},"https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb",[617,16229,3111],{"class":622},[617,16231,16232],{"class":619,"line":862},[617,16233,12045],{"class":622},[617,16235,16236,16238,16240],{"class":619,"line":612},[617,16237,712],{"class":622},[617,16239,730],{"class":626},[617,16241,649],{"class":622},[484,16243,902],{"id":901},[907,16245,16246,16256],{},[910,16247,16248],{},[913,16249,16250,16252,16254],{},[916,16251,918],{"align":977},[916,16253,921],{"align":977},[916,16255,924],{},[926,16257,16258,16271,16288,16301,16319],{},[913,16259,16260,16264,16267],{},[931,16261,16262],{"align":977},[598,16263,15784],{},[931,16265,16266],{"align":977},"Path to the model file.",[931,16268,16269],{},[598,16270,1159],{},[913,16272,16273,16277,16284],{},[931,16274,16275],{"align":977},[598,16276,15291],{},[931,16278,16279,16280,16283],{"align":977},"Enable ",[1120,16281,15297],{"href":15295,"rel":16282},[1124]," for the model.",[931,16285,16286],{},[598,16287,951],{},[913,16289,16290,16294,16297],{},[931,16291,16292],{"align":977},[598,16293,15516],{},[931,16295,16296],{"align":977},"Path to a local Draco decoder.",[931,16298,16299],{},[598,16300,1159],{},[913,16302,16303,16308,16315],{},[931,16304,16305],{"align":977},[598,16306,16307],{},"castShadow",[931,16309,16310,16311,16314],{"align":977},"Apply ",[598,16312,16313],{},"cast-shadow"," to all meshes inside your model.",[931,16316,16317],{},[598,16318,951],{},[913,16320,16321,16326,16331],{},[931,16322,16323],{"align":977},[598,16324,16325],{},"receiveShadow",[931,16327,16310,16328,16314],{"align":977},[598,16329,16330],{},"receive-shadow",[931,16332,16333],{},[598,16334,951],{},[1307,16336,16337],{},"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 .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}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":556,"searchDepth":557,"depth":558,"links":16339},[16340,16341,16342],{"id":604,"depth":558,"text":15},{"id":16013,"depth":558,"text":16014},{"id":901,"depth":558,"text":902},"A component based on useGLTF to load models in TresJS scenes.",{},{"title":125,"description":16343},"lRyhNL0pf8eBfYV4d7t404TdfGFfcEoS_MDZiFicoAw",{"id":16348,"title":129,"body":16349,"description":16958,"extension":571,"links":572,"meta":16959,"navigation":574,"path":130,"seo":16960,"stem":131,"__hash__":16961},"docs/2.api/3.loaders/3.use-fbx.md",{"type":481,"value":16350,"toc":16952},[16351,16356,16361,16363,16751,16753,16829,16831,16857,16859,16861,16947,16949],[2275,16352,16353],{},[16354,16355],"loaders-fbx",{},[594,16357,16358,16359,14900],{},"A composable that allows you to easily load FBX models into your ",[1649,16360,14899],{},[484,16362,15],{"id":604},[14904,16364,16365,16534],{},[606,16366,16369],{"className":608,"code":16367,"filename":14909,"highlights":16368,"language":613,"meta":556,"style":556},"\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",[558,725],[598,16370,16371,16391,16411,16415,16430,16442,16467,16475,16479,16487,16526],{"__ignoreMap":556},[617,16372,16373,16375,16377,16379,16381,16383,16385,16387,16389],{"class":619,"line":557},[617,16374,623],{"class":622},[617,16376,627],{"class":626},[617,16378,631],{"class":630},[617,16380,634],{"class":630},[617,16382,637],{"class":622},[617,16384,640],{"class":622},[617,16386,644],{"class":643},[617,16388,640],{"class":622},[617,16390,649],{"class":622},[617,16392,16394,16396,16398,16401,16403,16405,16407,16409],{"class":16393,"line":558},[619,653],[617,16395,657],{"class":656},[617,16397,660],{"class":622},[617,16399,16400],{"class":663}," useFBX",[617,16402,673],{"class":622},[617,16404,676],{"class":656},[617,16406,679],{"class":622},[617,16408,682],{"class":643},[617,16410,685],{"class":622},[617,16412,16413],{"class":619,"line":688},[617,16414,722],{"emptyLinePlaceholder":574},[617,16416,16417,16419,16421,16423,16425,16428],{"class":619,"line":709},[617,16418,2395],{"class":630},[617,16420,14962],{"class":663},[617,16422,637],{"class":622},[617,16424,679],{"class":622},[617,16426,16427],{"class":643},"https://raw.githubusercontent.com/",[617,16429,685],{"class":622},[617,16431,16432,16435,16437,16440],{"class":619,"line":719},[617,16433,16434],{"class":622}," +",[617,16436,679],{"class":622},[617,16438,16439],{"class":643},"Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx",[617,16441,685],{"class":622},[617,16443,16445,16447,16449,16451,16453,16455,16457,16459,16461,16463,16465],{"class":16444,"line":725},[619,653],[617,16446,2395],{"class":630},[617,16448,660],{"class":622},[617,16450,2400],{"class":663},[617,16452,667],{"class":622},[617,16454,14985],{"class":663},[617,16456,667],{"class":622},[617,16458,14990],{"class":663},[617,16460,2408],{"class":622},[617,16462,2411],{"class":622},[617,16464,16400],{"class":2414},[617,16466,14999],{"class":663},[617,16468,16469,16471,16473],{"class":619,"line":735},[617,16470,712],{"class":622},[617,16472,627],{"class":626},[617,16474,649],{"class":622},[617,16476,16477],{"class":619,"line":758},[617,16478,722],{"emptyLinePlaceholder":574},[617,16480,16481,16483,16485],{"class":619,"line":770},[617,16482,623],{"class":622},[617,16484,730],{"class":626},[617,16486,649],{"class":622},[617,16488,16489,16491,16493,16495,16497,16499,16501,16503,16505,16507,16509,16511,16513,16515,16517,16519,16522,16524],{"class":619,"line":780},[617,16490,738],{"class":622},[617,16492,4414],{"class":626},[617,16494,2690],{"class":630},[617,16496,637],{"class":622},[617,16498,640],{"class":622},[617,16500,12760],{"class":643},[617,16502,640],{"class":622},[617,16504,4428],{"class":630},[617,16506,637],{"class":622},[617,16508,640],{"class":622},[617,16510,12760],{"class":643},[617,16512,640],{"class":622},[617,16514,793],{"class":630},[617,16516,637],{"class":622},[617,16518,640],{"class":622},[617,16520,16521],{"class":643},"0.025",[617,16523,640],{"class":622},[617,16525,767],{"class":622},[617,16527,16528,16530,16532],{"class":619,"line":785},[617,16529,712],{"class":622},[617,16531,730],{"class":626},[617,16533,649],{"class":622},[606,16535,16537],{"className":608,"code":16536,"filename":15060,"language":613,"meta":556,"style":556},"\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",[598,16538,16539,16559,16577,16595,16609,16617,16621,16629,16648,16667,16675,16683,16689,16701,16713,16717,16735,16743],{"__ignoreMap":556},[617,16540,16541,16543,16545,16547,16549,16551,16553,16555,16557],{"class":619,"line":557},[617,16542,623],{"class":622},[617,16544,627],{"class":626},[617,16546,631],{"class":630},[617,16548,634],{"class":630},[617,16550,637],{"class":622},[617,16552,640],{"class":622},[617,16554,644],{"class":643},[617,16556,640],{"class":622},[617,16558,649],{"class":622},[617,16560,16561,16563,16565,16567,16569,16571,16573,16575],{"class":619,"line":558},[617,16562,657],{"class":656},[617,16564,660],{"class":622},[617,16566,670],{"class":663},[617,16568,673],{"class":622},[617,16570,676],{"class":656},[617,16572,679],{"class":622},[617,16574,682],{"class":643},[617,16576,685],{"class":622},[617,16578,16579,16581,16583,16585,16587,16589,16591,16593],{"class":619,"line":688},[617,16580,657],{"class":656},[617,16582,660],{"class":622},[617,16584,695],{"class":663},[617,16586,673],{"class":622},[617,16588,676],{"class":656},[617,16590,679],{"class":622},[617,16592,704],{"class":643},[617,16594,685],{"class":622},[617,16596,16597,16599,16601,16603,16605,16607],{"class":619,"line":709},[617,16598,657],{"class":656},[617,16600,15125],{"class":663},[617,16602,15128],{"class":656},[617,16604,679],{"class":622},[617,16606,15133],{"class":643},[617,16608,685],{"class":622},[617,16610,16611,16613,16615],{"class":619,"line":719},[617,16612,712],{"class":622},[617,16614,627],{"class":626},[617,16616,649],{"class":622},[617,16618,16619],{"class":619,"line":725},[617,16620,722],{"emptyLinePlaceholder":574},[617,16622,16623,16625,16627],{"class":619,"line":735},[617,16624,623],{"class":622},[617,16626,730],{"class":626},[617,16628,649],{"class":622},[617,16630,16631,16633,16635,16637,16639,16641,16644,16646],{"class":619,"line":758},[617,16632,738],{"class":622},[617,16634,741],{"class":626},[617,16636,744],{"class":630},[617,16638,637],{"class":622},[617,16640,640],{"class":622},[617,16642,16643],{"class":643},"#1F90FF",[617,16645,640],{"class":622},[617,16647,649],{"class":622},[617,16649,16650,16652,16654,16656,16658,16660,16663,16665],{"class":619,"line":770},[617,16651,761],{"class":622},[617,16653,764],{"class":626},[617,16655,1465],{"class":630},[617,16657,637],{"class":622},[617,16659,640],{"class":622},[617,16661,16662],{"class":643},"[11, 11, 11]",[617,16664,640],{"class":622},[617,16666,767],{"class":622},[617,16668,16669,16671,16673],{"class":619,"line":780},[617,16670,761],{"class":622},[617,16672,775],{"class":626},[617,16674,767],{"class":622},[617,16676,16677,16679,16681],{"class":619,"line":785},[617,16678,761],{"class":622},[617,16680,15208],{"class":626},[617,16682,767],{"class":622},[617,16684,16685,16687],{"class":619,"line":807},[617,16686,761],{"class":622},[617,16688,15217],{"class":626},[617,16690,16691,16693,16695,16697,16699],{"class":619,"line":611},[617,16692,15222],{"class":630},[617,16694,637],{"class":622},[617,16696,640],{"class":622},[617,16698,800],{"class":643},[617,16700,3111],{"class":622},[617,16702,16703,16705,16707,16709,16711],{"class":619,"line":830},[617,16704,15235],{"class":630},[617,16706,637],{"class":622},[617,16708,640],{"class":622},[617,16710,11330],{"class":643},[617,16712,3111],{"class":622},[617,16714,16715],{"class":619,"line":841},[617,16716,15248],{"class":622},[617,16718,16719,16721,16723,16725,16727,16729,16731,16733],{"class":619,"line":852},[617,16720,761],{"class":622},[617,16722,8436],{"class":626},[617,16724,1847],{"class":630},[617,16726,637],{"class":622},[617,16728,640],{"class":622},[617,16730,1854],{"class":643},[617,16732,640],{"class":622},[617,16734,767],{"class":622},[617,16736,16737,16739,16741],{"class":619,"line":862},[617,16738,885],{"class":622},[617,16740,741],{"class":626},[617,16742,649],{"class":622},[617,16744,16745,16747,16749],{"class":619,"line":612},[617,16746,712],{"class":622},[617,16748,730],{"class":626},[617,16750,649],{"class":622},[484,16752,15374],{"id":15373},[907,16754,16755,16765],{},[910,16756,16757],{},[913,16758,16759,16761,16763],{},[916,16760,8069],{"align":977},[916,16762,5949],{},[916,16764,921],{},[926,16766,16767,16780,16792,16804,16816],{},[913,16768,16769,16773,16777],{},[931,16770,16771],{"align":977},[1649,16772,12760],{},[931,16774,16775],{},[598,16776,4506],{},[931,16778,16779],{},"The loaded FBX model state",[913,16781,16782,16786,16790],{},[931,16783,16784],{"align":977},[1649,16785,15409],{},[931,16787,16788],{},[598,16789,14468],{},[931,16791,15416],{},[913,16793,16794,16798,16802],{},[931,16795,16796],{"align":977},[1649,16797,508],{},[931,16799,16800],{},[598,16801,14468],{},[931,16803,15429],{},[913,16805,16806,16810,16814],{},[931,16807,16808],{"align":977},[1649,16809,15436],{},[931,16811,16812],{},[598,16813,15441],{},[931,16815,15444],{},[913,16817,16818,16823,16827],{},[931,16819,16820],{"align":977},[1649,16821,16822],{},"execute",[931,16824,16825],{},[598,16826,15470],{},[931,16828,15473],{},[484,16830,12073],{"id":15476},[907,16832,16833,16843],{},[910,16834,16835],{},[913,16836,16837,16839,16841],{},[916,16838,8069],{"align":977},[916,16840,5949],{},[916,16842,921],{},[926,16844,16845],{},[913,16846,16847,16851,16855],{},[931,16848,16849],{"align":977},[1649,16850,15535],{},[931,16852,16853],{},[598,16854,10097],{},[931,16856,15544],{},[484,16858,15548],{"id":15547},[594,16860,15551],{},[606,16862,16864],{"className":1166,"code":16863,"language":644,"meta":556,"style":556},"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",[598,16865,16866,16895,16899,16903,16921,16925,16929],{"__ignoreMap":556},[617,16867,16868,16870,16872,16874,16876,16878,16880,16882,16884,16886,16888,16891,16893],{"class":619,"line":557},[617,16869,2395],{"class":630},[617,16871,660],{"class":622},[617,16873,14985],{"class":663},[617,16875,667],{"class":622},[617,16877,14990],{"class":663},[617,16879,2408],{"class":622},[617,16881,2411],{"class":622},[617,16883,16400],{"class":2414},[617,16885,2417],{"class":663},[617,16887,2420],{"class":622},[617,16889,16890],{"class":643},"/model.fbx",[617,16892,2420],{"class":622},[617,16894,2428],{"class":663},[617,16896,16897],{"class":619,"line":558},[617,16898,722],{"emptyLinePlaceholder":574},[617,16900,16901],{"class":619,"line":688},[617,16902,15594],{"class":1189},[617,16904,16905,16907,16909,16911,16913,16915,16917,16919],{"class":619,"line":709},[617,16906,2395],{"class":630},[617,16908,15601],{"class":663},[617,16910,637],{"class":622},[617,16912,14985],{"class":663},[617,16914,1126],{"class":622},[617,16916,3665],{"class":663},[617,16918,1126],{"class":622},[617,16920,15614],{"class":663},[617,16922,16923],{"class":619,"line":719},[617,16924,722],{"emptyLinePlaceholder":574},[617,16926,16927],{"class":619,"line":725},[617,16928,15623],{"class":1189},[617,16930,16931,16933,16935,16937,16939,16941,16943,16945],{"class":619,"line":735},[617,16932,2395],{"class":630},[617,16934,15630],{"class":663},[617,16936,637],{"class":622},[617,16938,15635],{"class":663},[617,16940,1126],{"class":622},[617,16942,3665],{"class":663},[617,16944,1126],{"class":622},[617,16946,15644],{"class":663},[594,16948,15647],{},[1307,16950,16951],{},"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 .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":556,"searchDepth":557,"depth":558,"links":16953},[16954,16955,16956,16957],{"id":604,"depth":558,"text":15},{"id":15373,"depth":558,"text":15374},{"id":15476,"depth":558,"text":12073},{"id":15547,"depth":558,"text":15548},"A composable to load FBX models in TresJS scenes.",{},{"title":129,"description":16958},"a0FODUjY-1cIilnPPnu0dmaRDyIq0-nUrGnriL5rksc",{"id":16963,"title":133,"body":16964,"description":17588,"extension":571,"links":572,"meta":17589,"navigation":574,"path":134,"seo":17590,"stem":135,"__hash__":17591},"docs/2.api/3.loaders/4.fbx-model.md",{"type":481,"value":16965,"toc":17583},[16966,16970,16979,16981,17309,17311,17318,17525,17527,17581],[2275,16967,16968],{},[16354,16969],{},[594,16971,2756,16972,15673,16974,15679],{},[598,16973,133],{},[1120,16975,16977],{"href":16976},"./use-fbx",[598,16978,129],{},[484,16980,15],{"id":604},[14904,16982,16983,17095],{},[606,16984,16987],{"className":608,"code":16985,"filename":14909,"highlights":16986,"language":613,"meta":556,"style":556},"\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",[558,758],[598,16988,16989,17009,17029,17033,17048,17056,17060,17068,17087],{"__ignoreMap":556},[617,16990,16991,16993,16995,16997,16999,17001,17003,17005,17007],{"class":619,"line":557},[617,16992,623],{"class":622},[617,16994,627],{"class":626},[617,16996,631],{"class":630},[617,16998,634],{"class":630},[617,17000,637],{"class":622},[617,17002,640],{"class":622},[617,17004,644],{"class":643},[617,17006,640],{"class":622},[617,17008,649],{"class":622},[617,17010,17012,17014,17016,17019,17021,17023,17025,17027],{"class":17011,"line":558},[619,653],[617,17013,657],{"class":656},[617,17015,660],{"class":622},[617,17017,17018],{"class":663}," FBXModel",[617,17020,673],{"class":622},[617,17022,676],{"class":656},[617,17024,679],{"class":622},[617,17026,682],{"class":643},[617,17028,685],{"class":622},[617,17030,17031],{"class":619,"line":688},[617,17032,722],{"emptyLinePlaceholder":574},[617,17034,17035,17037,17039,17041,17043,17046],{"class":619,"line":709},[617,17036,2395],{"class":630},[617,17038,14962],{"class":663},[617,17040,637],{"class":622},[617,17042,679],{"class":622},[617,17044,17045],{"class":643},"./Jeep_done.fbx",[617,17047,685],{"class":622},[617,17049,17050,17052,17054],{"class":619,"line":719},[617,17051,712],{"class":622},[617,17053,627],{"class":626},[617,17055,649],{"class":622},[617,17057,17058],{"class":619,"line":725},[617,17059,722],{"emptyLinePlaceholder":574},[617,17061,17062,17064,17066],{"class":619,"line":735},[617,17063,623],{"class":622},[617,17065,730],{"class":626},[617,17067,649],{"class":622},[617,17069,17071,17073,17075,17077,17079,17081,17083,17085],{"class":17070,"line":758},[619,653],[617,17072,738],{"class":622},[617,17074,133],{"class":626},[617,17076,15777],{"class":630},[617,17078,637],{"class":622},[617,17080,640],{"class":622},[617,17082,15784],{"class":643},[617,17084,640],{"class":622},[617,17086,767],{"class":622},[617,17088,17089,17091,17093],{"class":619,"line":770},[617,17090,712],{"class":622},[617,17092,730],{"class":626},[617,17094,649],{"class":622},[606,17096,17097],{"className":608,"code":15059,"filename":15060,"language":613,"meta":556,"style":556},[598,17098,17099,17119,17137,17155,17169,17177,17181,17189,17207,17225,17233,17241,17247,17259,17271,17275,17293,17301],{"__ignoreMap":556},[617,17100,17101,17103,17105,17107,17109,17111,17113,17115,17117],{"class":619,"line":557},[617,17102,623],{"class":622},[617,17104,627],{"class":626},[617,17106,631],{"class":630},[617,17108,634],{"class":630},[617,17110,637],{"class":622},[617,17112,640],{"class":622},[617,17114,644],{"class":643},[617,17116,640],{"class":622},[617,17118,649],{"class":622},[617,17120,17121,17123,17125,17127,17129,17131,17133,17135],{"class":619,"line":558},[617,17122,657],{"class":656},[617,17124,660],{"class":622},[617,17126,670],{"class":663},[617,17128,673],{"class":622},[617,17130,676],{"class":656},[617,17132,679],{"class":622},[617,17134,682],{"class":643},[617,17136,685],{"class":622},[617,17138,17139,17141,17143,17145,17147,17149,17151,17153],{"class":619,"line":688},[617,17140,657],{"class":656},[617,17142,660],{"class":622},[617,17144,695],{"class":663},[617,17146,673],{"class":622},[617,17148,676],{"class":656},[617,17150,679],{"class":622},[617,17152,704],{"class":643},[617,17154,685],{"class":622},[617,17156,17157,17159,17161,17163,17165,17167],{"class":619,"line":709},[617,17158,657],{"class":656},[617,17160,15125],{"class":663},[617,17162,15128],{"class":656},[617,17164,679],{"class":622},[617,17166,15133],{"class":643},[617,17168,685],{"class":622},[617,17170,17171,17173,17175],{"class":619,"line":719},[617,17172,712],{"class":622},[617,17174,627],{"class":626},[617,17176,649],{"class":622},[617,17178,17179],{"class":619,"line":725},[617,17180,722],{"emptyLinePlaceholder":574},[617,17182,17183,17185,17187],{"class":619,"line":735},[617,17184,623],{"class":622},[617,17186,730],{"class":626},[617,17188,649],{"class":622},[617,17190,17191,17193,17195,17197,17199,17201,17203,17205],{"class":619,"line":758},[617,17192,738],{"class":622},[617,17194,741],{"class":626},[617,17196,744],{"class":630},[617,17198,637],{"class":622},[617,17200,640],{"class":622},[617,17202,15170],{"class":643},[617,17204,640],{"class":622},[617,17206,649],{"class":622},[617,17208,17209,17211,17213,17215,17217,17219,17221,17223],{"class":619,"line":770},[617,17210,761],{"class":622},[617,17212,764],{"class":626},[617,17214,1465],{"class":630},[617,17216,637],{"class":622},[617,17218,640],{"class":622},[617,17220,15189],{"class":643},[617,17222,640],{"class":622},[617,17224,767],{"class":622},[617,17226,17227,17229,17231],{"class":619,"line":780},[617,17228,761],{"class":622},[617,17230,775],{"class":626},[617,17232,767],{"class":622},[617,17234,17235,17237,17239],{"class":619,"line":785},[617,17236,761],{"class":622},[617,17238,15208],{"class":626},[617,17240,767],{"class":622},[617,17242,17243,17245],{"class":619,"line":807},[617,17244,761],{"class":622},[617,17246,15217],{"class":626},[617,17248,17249,17251,17253,17255,17257],{"class":619,"line":611},[617,17250,15222],{"class":630},[617,17252,637],{"class":622},[617,17254,640],{"class":622},[617,17256,800],{"class":643},[617,17258,3111],{"class":622},[617,17260,17261,17263,17265,17267,17269],{"class":619,"line":830},[617,17262,15235],{"class":630},[617,17264,637],{"class":622},[617,17266,640],{"class":622},[617,17268,11330],{"class":643},[617,17270,3111],{"class":622},[617,17272,17273],{"class":619,"line":841},[617,17274,15248],{"class":622},[617,17276,17277,17279,17281,17283,17285,17287,17289,17291],{"class":619,"line":852},[617,17278,761],{"class":622},[617,17280,8436],{"class":626},[617,17282,1847],{"class":630},[617,17284,637],{"class":622},[617,17286,640],{"class":622},[617,17288,1854],{"class":643},[617,17290,640],{"class":622},[617,17292,767],{"class":622},[617,17294,17295,17297,17299],{"class":619,"line":862},[617,17296,885],{"class":622},[617,17298,741],{"class":626},[617,17300,649],{"class":622},[617,17302,17303,17305,17307],{"class":619,"line":612},[617,17304,712],{"class":622},[617,17306,730],{"class":626},[617,17308,649],{"class":622},[484,17310,16014],{"id":16013},[594,17312,16017,17313,1657,17315,17317],{},[598,17314,5874],{},[598,17316,133],{}," component and then using it to get the object.",[606,17319,17321],{"className":608,"code":17320,"language":613,"meta":556,"style":556},"\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",[598,17322,17323,17343,17363,17381,17385,17403,17407,17425,17429,17455,17461,17469,17473,17481,17488,17500,17513,17517],{"__ignoreMap":556},[617,17324,17325,17327,17329,17331,17333,17335,17337,17339,17341],{"class":619,"line":557},[617,17326,623],{"class":622},[617,17328,627],{"class":626},[617,17330,631],{"class":630},[617,17332,634],{"class":630},[617,17334,637],{"class":622},[617,17336,640],{"class":622},[617,17338,644],{"class":643},[617,17340,640],{"class":622},[617,17342,649],{"class":622},[617,17344,17345,17347,17349,17351,17353,17355,17357,17359,17361],{"class":619,"line":558},[617,17346,657],{"class":656},[617,17348,3422],{"class":656},[617,17350,660],{"class":622},[617,17352,16059],{"class":663},[617,17354,673],{"class":622},[617,17356,676],{"class":656},[617,17358,679],{"class":622},[617,17360,704],{"class":643},[617,17362,685],{"class":622},[617,17364,17365,17367,17369,17371,17373,17375,17377,17379],{"class":619,"line":688},[617,17366,657],{"class":656},[617,17368,660],{"class":622},[617,17370,17018],{"class":663},[617,17372,673],{"class":622},[617,17374,676],{"class":656},[617,17376,679],{"class":622},[617,17378,682],{"class":643},[617,17380,685],{"class":622},[617,17382,17383],{"class":619,"line":709},[617,17384,722],{"emptyLinePlaceholder":574},[617,17386,17387,17389,17391,17393,17395,17397,17399,17401],{"class":619,"line":719},[617,17388,2395],{"class":630},[617,17390,16099],{"class":663},[617,17392,637],{"class":622},[617,17394,3478],{"class":2414},[617,17396,623],{"class":622},[617,17398,16108],{"class":1180},[617,17400,3631],{"class":622},[617,17402,6515],{"class":663},[617,17404,17405],{"class":619,"line":725},[617,17406,722],{"emptyLinePlaceholder":574},[617,17408,17409,17411,17413,17415,17417,17419,17421,17423],{"class":619,"line":735},[617,17410,10239],{"class":2414},[617,17412,16123],{"class":663},[617,17414,667],{"class":622},[617,17416,3054],{"class":622},[617,17418,16022],{"class":6818},[617,17420,3320],{"class":622},[617,17422,3657],{"class":630},[617,17424,1184],{"class":622},[617,17426,17427],{"class":619,"line":758},[617,17428,16140],{"class":1189},[617,17430,17431,17433,17435,17437,17439,17441,17443,17445,17447,17449,17451,17453],{"class":619,"line":770},[617,17432,16145],{"class":663},[617,17434,1126],{"class":622},[617,17436,4110],{"class":663},[617,17438,1126],{"class":622},[617,17440,16154],{"class":2414},[617,17442,2417],{"class":626},[617,17444,945],{"class":2481},[617,17446,667],{"class":622},[617,17448,2486],{"class":2481},[617,17450,667],{"class":622},[617,17452,2486],{"class":2481},[617,17454,2428],{"class":626},[617,17456,17457,17459],{"class":619,"line":780},[617,17458,2408],{"class":622},[617,17460,2428],{"class":663},[617,17462,17463,17465,17467],{"class":619,"line":785},[617,17464,712],{"class":622},[617,17466,627],{"class":626},[617,17468,649],{"class":622},[617,17470,17471],{"class":619,"line":807},[617,17472,722],{"emptyLinePlaceholder":574},[617,17474,17475,17477,17479],{"class":619,"line":611},[617,17476,623],{"class":622},[617,17478,730],{"class":626},[617,17480,649],{"class":622},[617,17482,17483,17485],{"class":619,"line":830},[617,17484,738],{"class":622},[617,17486,17487],{"class":626},"FBXModel\n",[617,17489,17490,17492,17494,17496,17498],{"class":619,"line":841},[617,17491,16206],{"class":630},[617,17493,637],{"class":622},[617,17495,640],{"class":622},[617,17497,16213],{"class":643},[617,17499,3111],{"class":622},[617,17501,17502,17504,17506,17508,17511],{"class":619,"line":852},[617,17503,16220],{"class":630},[617,17505,637],{"class":622},[617,17507,640],{"class":622},[617,17509,17510],{"class":643},"https://raw.githubusercontent.com/Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx",[617,17512,3111],{"class":622},[617,17514,17515],{"class":619,"line":862},[617,17516,12045],{"class":622},[617,17518,17519,17521,17523],{"class":619,"line":612},[617,17520,712],{"class":622},[617,17522,730],{"class":626},[617,17524,649],{"class":622},[484,17526,902],{"id":901},[907,17528,17529,17539],{},[910,17530,17531],{},[913,17532,17533,17535,17537],{},[916,17534,918],{"align":977},[916,17536,921],{"align":977},[916,17538,924],{},[926,17540,17541,17553,17567],{},[913,17542,17543,17547,17549],{},[931,17544,17545],{"align":977},[598,17546,15784],{},[931,17548,16266],{"align":977},[931,17550,17551],{},[598,17552,1159],{},[913,17554,17555,17559,17563],{},[931,17556,17557],{"align":977},[598,17558,16307],{},[931,17560,16310,17561,16314],{"align":977},[598,17562,16313],{},[931,17564,17565],{},[598,17566,951],{},[913,17568,17569,17573,17577],{},[931,17570,17571],{"align":977},[598,17572,16325],{},[931,17574,16310,17575,16314],{"align":977},[598,17576,16330],{},[931,17578,17579],{},[598,17580,951],{},[1307,17582,16337],{},{"title":556,"searchDepth":557,"depth":558,"links":17584},[17585,17586,17587],{"id":604,"depth":558,"text":15},{"id":16013,"depth":558,"text":16014},{"id":901,"depth":558,"text":902},"A component based on useFBX to load models in TresJS scenes.",{},{"title":133,"description":17588},"TBLk7umsoiJ37LzeU-f61yMZeJFhhM1KU9F-kfrD_I8",{"id":17593,"title":137,"body":17594,"description":18224,"extension":571,"links":572,"meta":18225,"navigation":574,"path":138,"seo":18226,"stem":139,"__hash__":18227},"docs/2.api/3.loaders/5.use-texture.md",{"type":481,"value":17595,"toc":18218},[17596,17601,17612,17614,17766,17768,17820,17822,17878,17882,17889,18215],[2275,17597,17598],{},[17599,17600],"loaders-use-texture",{},[594,17602,17603,17604,17609,17610,14900],{},"A composable that allows you to load textures using the ",[1120,17605,17608],{"href":17606,"rel":17607},"https://threejs.org/docs/#api/en/loaders/TextureLoader",[1124],"Three.js texture loader"," into your ",[1649,17611,14899],{},[484,17613,15],{"id":604},[606,17615,17618],{"className":608,"code":17616,"highlights":17617,"language":613,"meta":556,"style":556},"\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",[558,709,780],[598,17619,17620,17640,17659,17663,17695,17703,17707,17715,17723,17731,17750,17758],{"__ignoreMap":556},[617,17621,17622,17624,17626,17628,17630,17632,17634,17636,17638],{"class":619,"line":557},[617,17623,623],{"class":622},[617,17625,627],{"class":626},[617,17627,631],{"class":630},[617,17629,634],{"class":630},[617,17631,637],{"class":622},[617,17633,640],{"class":622},[617,17635,644],{"class":643},[617,17637,640],{"class":622},[617,17639,649],{"class":622},[617,17641,17643,17645,17647,17649,17651,17653,17655,17657],{"class":17642,"line":558},[619,653],[617,17644,657],{"class":656},[617,17646,660],{"class":622},[617,17648,2339],{"class":663},[617,17650,673],{"class":622},[617,17652,676],{"class":656},[617,17654,679],{"class":622},[617,17656,682],{"class":643},[617,17658,685],{"class":622},[617,17660,17661],{"class":619,"line":688},[617,17662,722],{"emptyLinePlaceholder":574},[617,17664,17666,17668,17670,17672,17674,17677,17679,17682,17684,17687,17689,17691,17693],{"class":17665,"line":709},[619,653],[617,17667,2395],{"class":630},[617,17669,660],{"class":622},[617,17671,2400],{"class":626},[617,17673,1198],{"class":622},[617,17675,17676],{"class":663}," texture",[617,17678,667],{"class":622},[617,17680,17681],{"class":663}," isLoading",[617,17683,667],{"class":622},[617,17685,17686],{"class":663}," error ",[617,17688,2408],{"class":622},[617,17690,2411],{"class":622},[617,17692,2339],{"class":2414},[617,17694,14999],{"class":663},[617,17696,17697,17699,17701],{"class":619,"line":719},[617,17698,712],{"class":622},[617,17700,627],{"class":626},[617,17702,649],{"class":622},[617,17704,17705],{"class":619,"line":725},[617,17706,722],{"emptyLinePlaceholder":574},[617,17708,17709,17711,17713],{"class":619,"line":735},[617,17710,623],{"class":622},[617,17712,730],{"class":626},[617,17714,649],{"class":622},[617,17716,17717,17719,17721],{"class":619,"line":758},[617,17718,738],{"class":622},[617,17720,836],{"class":626},[617,17722,649],{"class":622},[617,17724,17725,17727,17729],{"class":619,"line":770},[617,17726,761],{"class":622},[617,17728,3938],{"class":626},[617,17730,767],{"class":622},[617,17732,17734,17736,17738,17740,17742,17744,17746,17748],{"class":17733,"line":780},[619,653],[617,17735,761],{"class":622},[617,17737,2666],{"class":626},[617,17739,2714],{"class":630},[617,17741,637],{"class":622},[617,17743,640],{"class":622},[617,17745,2697],{"class":643},[617,17747,640],{"class":622},[617,17749,767],{"class":622},[617,17751,17752,17754,17756],{"class":619,"line":785},[617,17753,885],{"class":622},[617,17755,836],{"class":626},[617,17757,649],{"class":622},[617,17759,17760,17762,17764],{"class":619,"line":807},[617,17761,712],{"class":622},[617,17763,730],{"class":626},[617,17765,649],{"class":622},[484,17767,12073],{"id":15476},[907,17769,17770,17782],{},[910,17771,17772],{},[913,17773,17774,17776,17778,17780],{},[916,17775,8069],{"align":977},[916,17777,5949],{},[916,17779,924],{},[916,17781,921],{},[926,17783,17784,17801],{},[913,17785,17786,17790,17794,17798],{},[931,17787,17788],{"align":977},[1649,17789,15784],{},[931,17791,17792],{},[598,17793,3552],{},[931,17795,17796],{},[598,17797,1159],{},[931,17799,17800],{},"The path to the texture.",[913,17802,17803,17808,17813,17817],{},[931,17804,17805],{"align":977},[1649,17806,17807],{},"manager",[931,17809,17810],{},[598,17811,17812],{},"THREE.LoadingManager",[931,17814,17815],{},[598,17816,1159],{},[931,17818,17819],{},"The loading manager to use for the texture.",[484,17821,15374],{"id":15373},[907,17823,17824,17834],{},[910,17825,17826],{},[913,17827,17828,17830,17832],{},[916,17829,8069],{"align":977},[916,17831,5949],{"align":977},[916,17833,921],{"align":977},[926,17835,17836,17850,17863],{},[913,17837,17838,17842,17847],{},[931,17839,17840],{"align":977},[598,17841,12760],{},[931,17843,17844],{"align":977},[598,17845,17846],{},"Texture | null",[931,17848,17849],{"align":977},"The loaded texture",[913,17851,17852,17856,17860],{},[931,17853,17854],{"align":977},[598,17855,15436],{},[931,17857,17858],{"align":977},[598,17859,15441],{},[931,17861,17862],{"align":977},"Whether the texture is loading",[913,17864,17865,17870,17875],{},[931,17866,17867],{"align":977},[598,17868,17869],{},"error",[931,17871,17872],{"align":977},[598,17873,17874],{},"string | null",[931,17876,17877],{"align":977},"Error message if loading failed",[484,17879,17881],{"id":17880},"component-usage","Component Usage",[594,17883,17884,17885,17888],{},"You can also use the ",[598,17886,17887],{},"UseTexture"," component directly in your template:",[606,17890,17893],{"className":608,"code":17891,"highlights":17892,"language":613,"meta":556,"style":556},"\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",[558,852,862,612,882,892,2605,2661],[598,17894,17895,17915,17935,17939,17954,17958,17982,18005,18009,18013,18037,18060,18064,18072,18076,18084,18092,18107,18121,18136,18151,18156,18164,18172,18190,18198,18207],{"__ignoreMap":556},[617,17896,17897,17899,17901,17903,17905,17907,17909,17911,17913],{"class":619,"line":557},[617,17898,623],{"class":622},[617,17900,627],{"class":626},[617,17902,631],{"class":630},[617,17904,634],{"class":630},[617,17906,637],{"class":622},[617,17908,640],{"class":622},[617,17910,644],{"class":643},[617,17912,640],{"class":622},[617,17914,649],{"class":622},[617,17916,17918,17920,17922,17925,17927,17929,17931,17933],{"class":17917,"line":558},[619,653],[617,17919,657],{"class":656},[617,17921,660],{"class":622},[617,17923,17924],{"class":663}," UseTexture",[617,17926,673],{"class":622},[617,17928,676],{"class":656},[617,17930,679],{"class":622},[617,17932,682],{"class":643},[617,17934,685],{"class":622},[617,17936,17937],{"class":619,"line":688},[617,17938,722],{"emptyLinePlaceholder":574},[617,17940,17941,17943,17945,17947,17949,17952],{"class":619,"line":709},[617,17942,2395],{"class":630},[617,17944,14962],{"class":663},[617,17946,637],{"class":622},[617,17948,679],{"class":622},[617,17950,17951],{"class":643},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Color.jpg",[617,17953,685],{"class":622},[617,17955,17956],{"class":619,"line":719},[617,17957,722],{"emptyLinePlaceholder":574},[617,17959,17960,17962,17965,17967,17969,17971,17973,17976,17978,17980],{"class":619,"line":725},[617,17961,2395],{"class":630},[617,17963,17964],{"class":663}," handleLoaded ",[617,17966,637],{"class":622},[617,17968,3054],{"class":622},[617,17970,2697],{"class":6818},[617,17972,1198],{"class":622},[617,17974,17975],{"class":1180}," Texture",[617,17977,3320],{"class":622},[617,17979,3657],{"class":630},[617,17981,1184],{"class":622},[617,17983,17984,17986,17988,17990,17992,17994,17997,17999,18001,18003],{"class":619,"line":735},[617,17985,6834],{"class":663},[617,17987,1126],{"class":622},[617,17989,6839],{"class":2414},[617,17991,2417],{"class":626},[617,17993,2420],{"class":622},[617,17995,17996],{"class":643},"Loaded texture",[617,17998,2420],{"class":622},[617,18000,667],{"class":622},[617,18002,17676],{"class":663},[617,18004,2428],{"class":626},[617,18006,18007],{"class":619,"line":758},[617,18008,1305],{"class":622},[617,18010,18011],{"class":619,"line":770},[617,18012,722],{"emptyLinePlaceholder":574},[617,18014,18015,18017,18020,18022,18024,18026,18028,18031,18033,18035],{"class":619,"line":780},[617,18016,2395],{"class":630},[617,18018,18019],{"class":663}," handleError ",[617,18021,637],{"class":622},[617,18023,3054],{"class":622},[617,18025,17869],{"class":6818},[617,18027,1198],{"class":622},[617,18029,18030],{"class":1180}," unknown",[617,18032,3320],{"class":622},[617,18034,3657],{"class":630},[617,18036,1184],{"class":622},[617,18038,18039,18041,18043,18045,18047,18049,18051,18053,18055,18058],{"class":619,"line":785},[617,18040,6834],{"class":663},[617,18042,1126],{"class":622},[617,18044,17869],{"class":2414},[617,18046,2417],{"class":626},[617,18048,2420],{"class":622},[617,18050,17869],{"class":643},[617,18052,2420],{"class":622},[617,18054,667],{"class":622},[617,18056,18057],{"class":663}," error",[617,18059,2428],{"class":626},[617,18061,18062],{"class":619,"line":807},[617,18063,1305],{"class":622},[617,18065,18066,18068,18070],{"class":619,"line":611},[617,18067,712],{"class":622},[617,18069,627],{"class":626},[617,18071,649],{"class":622},[617,18073,18074],{"class":619,"line":830},[617,18075,722],{"emptyLinePlaceholder":574},[617,18077,18078,18080,18082],{"class":619,"line":841},[617,18079,623],{"class":622},[617,18081,730],{"class":626},[617,18083,649],{"class":622},[617,18085,18087,18089],{"class":18086,"line":852},[619,653],[617,18088,738],{"class":622},[617,18090,18091],{"class":626},"UseTexture\n",[617,18093,18095,18098,18100,18102,18105],{"class":18094,"line":862},[619,653],[617,18096,18097],{"class":630}," v-slot",[617,18099,637],{"class":622},[617,18101,640],{"class":622},[617,18103,18104],{"class":643},"{ state: texture }",[617,18106,3111],{"class":622},[617,18108,18110,18113,18115,18117,18119],{"class":18109,"line":612},[619,653],[617,18111,18112],{"class":630}," :path",[617,18114,637],{"class":622},[617,18116,640],{"class":622},[617,18118,15784],{"class":643},[617,18120,3111],{"class":622},[617,18122,18124,18127,18129,18131,18134],{"class":18123,"line":882},[619,653],[617,18125,18126],{"class":630}," @loaded",[617,18128,637],{"class":622},[617,18130,640],{"class":622},[617,18132,18133],{"class":643},"handleLoaded",[617,18135,3111],{"class":622},[617,18137,18139,18142,18144,18146,18149],{"class":18138,"line":892},[619,653],[617,18140,18141],{"class":630}," @error",[617,18143,637],{"class":622},[617,18145,640],{"class":622},[617,18147,18148],{"class":643},"handleError",[617,18150,3111],{"class":622},[617,18152,18154],{"class":18153,"line":2605},[619,653],[617,18155,5153],{"class":622},[617,18157,18158,18160,18162],{"class":619,"line":2614},[617,18159,761],{"class":622},[617,18161,836],{"class":626},[617,18163,649],{"class":622},[617,18165,18166,18168,18170],{"class":619,"line":2634},[617,18167,833],{"class":622},[617,18169,3938],{"class":626},[617,18171,767],{"class":622},[617,18173,18174,18176,18178,18180,18182,18184,18186,18188],{"class":619,"line":2643},[617,18175,833],{"class":622},[617,18177,2666],{"class":626},[617,18179,2714],{"class":630},[617,18181,637],{"class":622},[617,18183,640],{"class":622},[617,18185,2697],{"class":643},[617,18187,640],{"class":622},[617,18189,767],{"class":622},[617,18191,18192,18194,18196],{"class":619,"line":2652},[617,18193,875],{"class":622},[617,18195,836],{"class":626},[617,18197,649],{"class":622},[617,18199,18201,18203,18205],{"class":18200,"line":2661},[619,653],[617,18202,885],{"class":622},[617,18204,17887],{"class":626},[617,18206,649],{"class":622},[617,18208,18209,18211,18213],{"class":619,"line":2683},[617,18210,712],{"class":622},[617,18212,730],{"class":626},[617,18214,649],{"class":622},[1307,18216,18217],{},"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":556,"searchDepth":557,"depth":558,"links":18219},[18220,18221,18222,18223],{"id":604,"depth":558,"text":15},{"id":15476,"depth":558,"text":12073},{"id":15373,"depth":558,"text":15374},{"id":17880,"depth":558,"text":17881},"A composable to load textures in TresJS scenes.",{},{"title":137,"description":18224},"l_rJPS1esq3wmeHFxC2Nl14B5pGSLe_sPmpKSPgbazk",{"id":18229,"title":141,"body":18230,"description":19672,"extension":571,"links":572,"meta":19673,"navigation":574,"path":142,"seo":19674,"stem":143,"__hash__":19675},"docs/2.api/3.loaders/6.use-textures.md",{"type":481,"value":18231,"toc":19663},[18232,18237,18245,18247,18493,18497,18500,19529,19533,19537,19572,19576,19630,19634,19660],[2275,18233,18234],{},[18235,18236],"loaders-use-textures",{},[594,18238,18239,18240,17609,18243,14900],{},"A composable that allows you to load multiple textures at once using the ",[1120,18241,17608],{"href":17606,"rel":18242},[1124],[1649,18244,14899],{},[484,18246,15],{"id":604},[606,18248,18251],{"className":608,"code":18249,"highlights":18250,"language":613,"meta":556,"style":556},"\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",[558,807,882,892,2605],[598,18252,18253,18273,18292,18296,18301,18313,18324,18335,18344,18349,18353,18358,18385,18393,18397,18405,18413,18421,18428,18443,18458,18473,18477,18485],{"__ignoreMap":556},[617,18254,18255,18257,18259,18261,18263,18265,18267,18269,18271],{"class":619,"line":557},[617,18256,623],{"class":622},[617,18258,627],{"class":626},[617,18260,631],{"class":630},[617,18262,634],{"class":630},[617,18264,637],{"class":622},[617,18266,640],{"class":622},[617,18268,644],{"class":643},[617,18270,640],{"class":622},[617,18272,649],{"class":622},[617,18274,18276,18278,18280,18282,18284,18286,18288,18290],{"class":18275,"line":558},[619,653],[617,18277,657],{"class":656},[617,18279,660],{"class":622},[617,18281,2820],{"class":663},[617,18283,673],{"class":622},[617,18285,676],{"class":656},[617,18287,679],{"class":622},[617,18289,682],{"class":643},[617,18291,685],{"class":622},[617,18293,18294],{"class":619,"line":688},[617,18295,722],{"emptyLinePlaceholder":574},[617,18297,18298],{"class":619,"line":709},[617,18299,18300],{"class":1189},"// Define an array of texture paths\n",[617,18302,18303,18305,18308,18310],{"class":619,"line":719},[617,18304,2395],{"class":630},[617,18306,18307],{"class":663}," texturePaths ",[617,18309,637],{"class":622},[617,18311,18312],{"class":663}," [\n",[617,18314,18315,18317,18320,18322],{"class":619,"line":725},[617,18316,2856],{"class":622},[617,18318,18319],{"class":643},"/textures/color.jpg",[617,18321,2420],{"class":622},[617,18323,2468],{"class":622},[617,18325,18326,18328,18331,18333],{"class":619,"line":735},[617,18327,2856],{"class":622},[617,18329,18330],{"class":643},"/textures/normal.jpg",[617,18332,2420],{"class":622},[617,18334,2468],{"class":622},[617,18336,18337,18339,18342],{"class":619,"line":758},[617,18338,2856],{"class":622},[617,18340,18341],{"class":643},"/textures/roughness.jpg",[617,18343,685],{"class":622},[617,18345,18346],{"class":619,"line":770},[617,18347,18348],{"class":663},"]\n",[617,18350,18351],{"class":619,"line":780},[617,18352,722],{"emptyLinePlaceholder":574},[617,18354,18355],{"class":619,"line":785},[617,18356,18357],{"class":1189},"// Load all textures at once\n",[617,18359,18361,18363,18365,18368,18370,18372,18374,18376,18378,18380,18382],{"class":18360,"line":807},[619,653],[617,18362,2395],{"class":630},[617,18364,660],{"class":622},[617,18366,18367],{"class":663}," textures",[617,18369,667],{"class":622},[617,18371,17681],{"class":663},[617,18373,667],{"class":622},[617,18375,17686],{"class":663},[617,18377,2408],{"class":622},[617,18379,2411],{"class":622},[617,18381,2820],{"class":2414},[617,18383,18384],{"class":663},"(texturePaths)\n",[617,18386,18387,18389,18391],{"class":619,"line":611},[617,18388,712],{"class":622},[617,18390,627],{"class":626},[617,18392,649],{"class":622},[617,18394,18395],{"class":619,"line":830},[617,18396,722],{"emptyLinePlaceholder":574},[617,18398,18399,18401,18403],{"class":619,"line":841},[617,18400,623],{"class":622},[617,18402,730],{"class":626},[617,18404,649],{"class":622},[617,18406,18407,18409,18411],{"class":619,"line":852},[617,18408,738],{"class":622},[617,18410,836],{"class":626},[617,18412,649],{"class":622},[617,18414,18415,18417,18419],{"class":619,"line":862},[617,18416,761],{"class":622},[617,18418,3938],{"class":626},[617,18420,767],{"class":622},[617,18422,18423,18425],{"class":619,"line":612},[617,18424,761],{"class":622},[617,18426,18427],{"class":626},"TresMeshStandardMaterial\n",[617,18429,18431,18434,18436,18438,18441],{"class":18430,"line":882},[619,653],[617,18432,18433],{"class":630}," :map",[617,18435,637],{"class":622},[617,18437,640],{"class":622},[617,18439,18440],{"class":643},"textures[0]",[617,18442,3111],{"class":622},[617,18444,18446,18449,18451,18453,18456],{"class":18445,"line":892},[619,653],[617,18447,18448],{"class":630}," :normal-map",[617,18450,637],{"class":622},[617,18452,640],{"class":622},[617,18454,18455],{"class":643},"textures[1]",[617,18457,3111],{"class":622},[617,18459,18461,18464,18466,18468,18471],{"class":18460,"line":2605},[619,653],[617,18462,18463],{"class":630}," :roughness-map",[617,18465,637],{"class":622},[617,18467,640],{"class":622},[617,18469,18470],{"class":643},"textures[2]",[617,18472,3111],{"class":622},[617,18474,18475],{"class":619,"line":2614},[617,18476,15248],{"class":622},[617,18478,18479,18481,18483],{"class":619,"line":2634},[617,18480,885],{"class":622},[617,18482,836],{"class":626},[617,18484,649],{"class":622},[617,18486,18487,18489,18491],{"class":619,"line":2643},[617,18488,712],{"class":622},[617,18490,730],{"class":626},[617,18492,649],{"class":622},[484,18494,18496],{"id":18495},"pbr-textures-example","PBR Textures Example",[594,18498,18499],{},"Here's a more advanced example showing how to load and apply PBR (Physically Based Rendering) textures to a material:",[606,18501,18504],{"className":608,"code":18502,"filename":18503,"language":613,"meta":556,"style":556},"\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",[598,18505,18506,18526,18549,18580,18599,18603,18608,18649,18681,18712,18716,18721,18731,18742,18753,18764,18775,18784,18788,18792,18797,18821,18825,18830,18861,18898,18903,18922,18926,18931,18951,18970,18989,19009,19028,19032,19037,19051,19066,19081,19086,19093,19098,19104,19125,19131,19138,19143,19164,19177,19203,19208,19215,19224,19229,19238,19257,19267,19302,19311,19331,19340,19349,19368,19411,19453,19473,19502,19511,19520],{"__ignoreMap":556},[617,18507,18508,18510,18512,18514,18516,18518,18520,18522,18524],{"class":619,"line":557},[617,18509,623],{"class":622},[617,18511,627],{"class":626},[617,18513,631],{"class":630},[617,18515,634],{"class":630},[617,18517,637],{"class":622},[617,18519,640],{"class":622},[617,18521,644],{"class":643},[617,18523,640],{"class":622},[617,18525,649],{"class":622},[617,18527,18528,18530,18532,18534,18536,18539,18541,18543,18545,18547],{"class":619,"line":558},[617,18529,657],{"class":656},[617,18531,660],{"class":622},[617,18533,695],{"class":663},[617,18535,667],{"class":622},[617,18537,18538],{"class":663}," vLightHelper",[617,18540,673],{"class":622},[617,18542,676],{"class":656},[617,18544,679],{"class":622},[617,18546,704],{"class":643},[617,18548,685],{"class":622},[617,18550,18551,18553,18555,18558,18560,18562,18564,18566,18568,18570,18572,18574,18576,18578],{"class":619,"line":688},[617,18552,657],{"class":656},[617,18554,660],{"class":622},[617,18556,18557],{"class":663}," Environment",[617,18559,667],{"class":622},[617,18561,670],{"class":663},[617,18563,667],{"class":622},[617,18565,4327],{"class":663},[617,18567,667],{"class":622},[617,18569,2820],{"class":663},[617,18571,673],{"class":622},[617,18573,676],{"class":656},[617,18575,679],{"class":622},[617,18577,682],{"class":643},[617,18579,685],{"class":622},[617,18581,18582,18584,18586,18589,18591,18593,18595,18597],{"class":619,"line":709},[617,18583,657],{"class":656},[617,18585,660],{"class":622},[617,18587,18588],{"class":663}," MeshStandardMaterial",[617,18590,673],{"class":622},[617,18592,676],{"class":656},[617,18594,679],{"class":622},[617,18596,4606],{"class":643},[617,18598,685],{"class":622},[617,18600,18601],{"class":619,"line":719},[617,18602,722],{"emptyLinePlaceholder":574},[617,18604,18605],{"class":619,"line":725},[617,18606,18607],{"class":1189},"// Load the 3D model\n",[617,18609,18610,18612,18614,18616,18618,18620,18622,18624,18626,18628,18630,18633,18635,18637,18639,18641,18643,18645,18647],{"class":619,"line":735},[617,18611,2395],{"class":630},[617,18613,660],{"class":622},[617,18615,2400],{"class":626},[617,18617,1198],{"class":622},[617,18619,4989],{"class":663},[617,18621,2408],{"class":622},[617,18623,2411],{"class":622},[617,18625,4327],{"class":2414},[617,18627,2417],{"class":663},[617,18629,2420],{"class":622},[617,18631,18632],{"class":643},"/blender-cube-draco.glb",[617,18634,2420],{"class":622},[617,18636,667],{"class":622},[617,18638,660],{"class":622},[617,18640,4372],{"class":626},[617,18642,1198],{"class":622},[617,18644,4378],{"class":4377},[617,18646,673],{"class":622},[617,18648,2428],{"class":663},[617,18650,18651,18653,18656,18658,18660,18662,18664,18666,18668,18670,18672,18674,18676,18678],{"class":619,"line":758},[617,18652,2395],{"class":630},[617,18654,18655],{"class":663}," cube ",[617,18657,637],{"class":622},[617,18659,3469],{"class":2414},[617,18661,2417],{"class":663},[617,18663,3654],{"class":622},[617,18665,3657],{"class":630},[617,18667,5028],{"class":663},[617,18669,1126],{"class":622},[617,18671,3665],{"class":663},[617,18673,3668],{"class":622},[617,18675,15409],{"class":663},[617,18677,3668],{"class":622},[617,18679,18680],{"class":663},"BlenderCube)\n",[617,18682,18683,18685,18687,18689,18691,18693,18695,18697,18699,18701,18703,18705,18707,18709],{"class":619,"line":770},[617,18684,2395],{"class":630},[617,18686,15630],{"class":663},[617,18688,637],{"class":622},[617,18690,3469],{"class":2414},[617,18692,2417],{"class":663},[617,18694,3654],{"class":622},[617,18696,3657],{"class":630},[617,18698,5028],{"class":663},[617,18700,1126],{"class":622},[617,18702,3665],{"class":663},[617,18704,3668],{"class":622},[617,18706,508],{"class":663},[617,18708,3668],{"class":622},[617,18710,18711],{"class":663},"Material)\n",[617,18713,18714],{"class":619,"line":780},[617,18715,722],{"emptyLinePlaceholder":574},[617,18717,18718],{"class":619,"line":785},[617,18719,18720],{"class":1189},"// Define texture paths\n",[617,18722,18723,18725,18727,18729],{"class":619,"line":807},[617,18724,2395],{"class":630},[617,18726,18307],{"class":663},[617,18728,637],{"class":622},[617,18730,18312],{"class":663},[617,18732,18733,18735,18738,18740],{"class":619,"line":611},[617,18734,2856],{"class":622},[617,18736,18737],{"class":643},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Color.jpg",[617,18739,2420],{"class":622},[617,18741,2468],{"class":622},[617,18743,18744,18746,18749,18751],{"class":619,"line":830},[617,18745,2856],{"class":622},[617,18747,18748],{"class":643},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_NormalGL.jpg",[617,18750,2420],{"class":622},[617,18752,2468],{"class":622},[617,18754,18755,18757,18760,18762],{"class":619,"line":841},[617,18756,2856],{"class":622},[617,18758,18759],{"class":643},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Roughness.jpg",[617,18761,2420],{"class":622},[617,18763,2468],{"class":622},[617,18765,18766,18768,18771,18773],{"class":619,"line":852},[617,18767,2856],{"class":622},[617,18769,18770],{"class":643},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Metalness.jpg",[617,18772,2420],{"class":622},[617,18774,2468],{"class":622},[617,18776,18777,18779,18782],{"class":619,"line":862},[617,18778,2856],{"class":622},[617,18780,18781],{"class":643},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Displacement.jpg",[617,18783,685],{"class":622},[617,18785,18786],{"class":619,"line":612},[617,18787,18348],{"class":663},[617,18789,18790],{"class":619,"line":882},[617,18791,722],{"emptyLinePlaceholder":574},[617,18793,18794],{"class":619,"line":892},[617,18795,18796],{"class":1189},"// Load all PBR textures at once\n",[617,18798,18799,18801,18803,18805,18807,18809,18811,18813,18815,18817,18819],{"class":619,"line":2605},[617,18800,2395],{"class":630},[617,18802,660],{"class":622},[617,18804,18367],{"class":663},[617,18806,667],{"class":622},[617,18808,17681],{"class":663},[617,18810,667],{"class":622},[617,18812,17686],{"class":663},[617,18814,2408],{"class":622},[617,18816,2411],{"class":622},[617,18818,2820],{"class":2414},[617,18820,18384],{"class":663},[617,18822,18823],{"class":619,"line":2614},[617,18824,722],{"emptyLinePlaceholder":574},[617,18826,18827],{"class":619,"line":2634},[617,18828,18829],{"class":1189},"// Apply textures to material when loaded\n",[617,18831,18832,18834,18837,18839,18842,18844,18847,18850,18852,18854,18857,18859],{"class":619,"line":2643},[617,18833,10239],{"class":2414},[617,18835,18836],{"class":663},"([material",[617,18838,667],{"class":622},[617,18840,18841],{"class":663}," textures]",[617,18843,667],{"class":622},[617,18845,18846],{"class":622}," ([",[617,18848,18849],{"class":6818},"modelMaterial",[617,18851,667],{"class":622},[617,18853,18367],{"class":6818},[617,18855,18856],{"class":622},"])",[617,18858,3657],{"class":630},[617,18860,1184],{"class":622},[617,18862,18863,18866,18868,18870,18873,18875,18877,18879,18881,18884,18887,18890,18892,18894,18896],{"class":619,"line":2652},[617,18864,18865],{"class":656}," if",[617,18867,3054],{"class":626},[617,18869,18849],{"class":663},[617,18871,18872],{"class":622}," &&",[617,18874,18367],{"class":663},[617,18876,18872],{"class":622},[617,18878,18367],{"class":663},[617,18880,1126],{"class":622},[617,18882,18883],{"class":663},"length",[617,18885,18886],{"class":622}," ===",[617,18888,18889],{"class":663}," texturePaths",[617,18891,1126],{"class":622},[617,18893,18883],{"class":663},[617,18895,4714],{"class":626},[617,18897,3240],{"class":622},[617,18899,18900],{"class":619,"line":2661},[617,18901,18902],{"class":1189}," // Cast to MeshStandardMaterial to access PBR properties\n",[617,18904,18905,18908,18911,18913,18916,18919],{"class":619,"line":2683},[617,18906,18907],{"class":630}," const",[617,18909,18910],{"class":663}," pbrMaterial",[617,18912,2411],{"class":622},[617,18914,18915],{"class":663}," modelMaterial",[617,18917,18918],{"class":656}," as",[617,18920,18921],{"class":1180}," MeshStandardMaterial\n",[617,18923,18924],{"class":619,"line":2727},[617,18925,722],{"emptyLinePlaceholder":574},[617,18927,18928],{"class":619,"line":2736},[617,18929,18930],{"class":1189}," // Apply textures\n",[617,18932,18933,18936,18938,18940,18942,18944,18947,18949],{"class":619,"line":2745},[617,18934,18935],{"class":663}," pbrMaterial",[617,18937,1126],{"class":622},[617,18939,2961],{"class":663},[617,18941,2411],{"class":622},[617,18943,18367],{"class":663},[617,18945,18946],{"class":626},"[",[617,18948,945],{"class":2481},[617,18950,18348],{"class":626},[617,18952,18953,18955,18957,18960,18962,18964,18966,18968],{"class":619,"line":3902},[617,18954,18935],{"class":663},[617,18956,1126],{"class":622},[617,18958,18959],{"class":663},"normalMap",[617,18961,2411],{"class":622},[617,18963,18367],{"class":663},[617,18965,18946],{"class":626},[617,18967,1854],{"class":2481},[617,18969,18348],{"class":626},[617,18971,18972,18974,18976,18979,18981,18983,18985,18987],{"class":619,"line":3933},[617,18973,18935],{"class":663},[617,18975,1126],{"class":622},[617,18977,18978],{"class":663},"roughnessMap",[617,18980,2411],{"class":622},[617,18982,18367],{"class":663},[617,18984,18946],{"class":626},[617,18986,800],{"class":2481},[617,18988,18348],{"class":626},[617,18990,18991,18993,18995,18998,19000,19002,19004,19007],{"class":619,"line":3954},[617,18992,18935],{"class":663},[617,18994,1126],{"class":622},[617,18996,18997],{"class":663},"metalnessMap",[617,18999,2411],{"class":622},[617,19001,18367],{"class":663},[617,19003,18946],{"class":626},[617,19005,19006],{"class":2481},"3",[617,19008,18348],{"class":626},[617,19010,19011,19013,19015,19018,19020,19022,19024,19026],{"class":619,"line":3973},[617,19012,18935],{"class":663},[617,19014,1126],{"class":622},[617,19016,19017],{"class":663},"displacementMap",[617,19019,2411],{"class":622},[617,19021,18367],{"class":663},[617,19023,18946],{"class":626},[617,19025,8408],{"class":2481},[617,19027,18348],{"class":626},[617,19029,19030],{"class":619,"line":4005},[617,19031,722],{"emptyLinePlaceholder":574},[617,19033,19034],{"class":619,"line":4014},[617,19035,19036],{"class":1189}," // Set material properties\n",[617,19038,19039,19041,19043,19046,19048],{"class":619,"line":4023},[617,19040,18935],{"class":663},[617,19042,1126],{"class":622},[617,19044,19045],{"class":663},"displacementScale",[617,19047,2411],{"class":622},[617,19049,19050],{"class":2481}," 0\n",[617,19052,19054,19056,19058,19061,19063],{"class":619,"line":19053},38,[617,19055,18935],{"class":663},[617,19057,1126],{"class":622},[617,19059,19060],{"class":663},"metalness",[617,19062,2411],{"class":622},[617,19064,19065],{"class":2481}," 0.8\n",[617,19067,19069,19071,19073,19076,19078],{"class":619,"line":19068},39,[617,19070,18935],{"class":663},[617,19072,1126],{"class":622},[617,19074,19075],{"class":663},"roughness",[617,19077,2411],{"class":622},[617,19079,19080],{"class":2481}," 0.2\n",[617,19082,19084],{"class":619,"line":19083},40,[617,19085,7837],{"class":622},[617,19087,19089,19091],{"class":619,"line":19088},41,[617,19090,2408],{"class":622},[617,19092,2428],{"class":663},[617,19094,19096],{"class":619,"line":19095},42,[617,19097,722],{"emptyLinePlaceholder":574},[617,19099,19101],{"class":619,"line":19100},43,[617,19102,19103],{"class":1189},"// Handle loading state and errors\n",[617,19105,19107,19109,19112,19114,19116,19119,19121,19123],{"class":619,"line":19106},44,[617,19108,10239],{"class":2414},[617,19110,19111],{"class":663},"(isLoading",[617,19113,667],{"class":622},[617,19115,3054],{"class":622},[617,19117,19118],{"class":6818},"_loading",[617,19120,3320],{"class":622},[617,19122,3657],{"class":630},[617,19124,1184],{"class":622},[617,19126,19128],{"class":619,"line":19127},45,[617,19129,19130],{"class":1189}," // Handle loading state\n",[617,19132,19134,19136],{"class":619,"line":19133},46,[617,19135,2408],{"class":622},[617,19137,2428],{"class":663},[617,19139,19141],{"class":619,"line":19140},47,[617,19142,722],{"emptyLinePlaceholder":574},[617,19144,19146,19148,19151,19153,19155,19158,19160,19162],{"class":619,"line":19145},48,[617,19147,10239],{"class":2414},[617,19149,19150],{"class":663},"(error",[617,19152,667],{"class":622},[617,19154,3054],{"class":622},[617,19156,19157],{"class":6818},"errs",[617,19159,3320],{"class":622},[617,19161,3657],{"class":630},[617,19163,1184],{"class":622},[617,19165,19167,19169,19171,19173,19175],{"class":619,"line":19166},49,[617,19168,18865],{"class":656},[617,19170,3054],{"class":626},[617,19172,19157],{"class":663},[617,19174,4714],{"class":626},[617,19176,3240],{"class":622},[617,19178,19180,19183,19185,19187,19189,19191,19194,19196,19198,19201],{"class":619,"line":19179},50,[617,19181,19182],{"class":663}," console",[617,19184,1126],{"class":622},[617,19186,17869],{"class":2414},[617,19188,2417],{"class":626},[617,19190,2420],{"class":622},[617,19192,19193],{"class":643},"Error loading textures:",[617,19195,2420],{"class":622},[617,19197,667],{"class":622},[617,19199,19200],{"class":663}," errs",[617,19202,2428],{"class":626},[617,19204,19206],{"class":619,"line":19205},51,[617,19207,7837],{"class":622},[617,19209,19211,19213],{"class":619,"line":19210},52,[617,19212,2408],{"class":622},[617,19214,2428],{"class":663},[617,19216,19218,19220,19222],{"class":619,"line":19217},53,[617,19219,712],{"class":622},[617,19221,627],{"class":626},[617,19223,649],{"class":622},[617,19225,19227],{"class":619,"line":19226},54,[617,19228,722],{"emptyLinePlaceholder":574},[617,19230,19232,19234,19236],{"class":619,"line":19231},55,[617,19233,623],{"class":622},[617,19235,730],{"class":626},[617,19237,649],{"class":622},[617,19239,19241,19243,19245,19247,19249,19251,19253,19255],{"class":619,"line":19240},56,[617,19242,738],{"class":622},[617,19244,741],{"class":626},[617,19246,744],{"class":630},[617,19248,637],{"class":622},[617,19250,640],{"class":622},[617,19252,8765],{"class":643},[617,19254,640],{"class":622},[617,19256,649],{"class":622},[617,19258,19260,19262,19265],{"class":619,"line":19259},57,[617,19261,761],{"class":622},[617,19263,19264],{"class":626},"Suspense",[617,19266,649],{"class":622},[617,19268,19270,19272,19274,19277,19279,19281,19284,19286,19289,19292,19294,19296,19298,19300],{"class":619,"line":19269},58,[617,19271,833],{"class":622},[617,19273,355],{"class":626},[617,19275,19276],{"class":630}," preset",[617,19278,637],{"class":622},[617,19280,640],{"class":622},[617,19282,19283],{"class":643},"studio",[617,19285,640],{"class":622},[617,19287,19288],{"class":630}," background",[617,19290,19291],{"class":630}," :blur",[617,19293,637],{"class":622},[617,19295,640],{"class":622},[617,19297,1854],{"class":643},[617,19299,640],{"class":622},[617,19301,767],{"class":622},[617,19303,19305,19307,19309],{"class":619,"line":19304},59,[617,19306,875],{"class":622},[617,19308,19264],{"class":626},[617,19310,649],{"class":622},[617,19312,19314,19316,19318,19320,19322,19324,19327,19329],{"class":619,"line":19313},60,[617,19315,761],{"class":622},[617,19317,764],{"class":626},[617,19319,1465],{"class":630},[617,19321,637],{"class":622},[617,19323,640],{"class":622},[617,19325,19326],{"class":643},"[8, 8, 8]",[617,19328,640],{"class":622},[617,19330,767],{"class":622},[617,19332,19334,19336,19338],{"class":619,"line":19333},61,[617,19335,761],{"class":622},[617,19337,775],{"class":626},[617,19339,767],{"class":622},[617,19341,19343,19345,19347],{"class":619,"line":19342},62,[617,19344,761],{"class":622},[617,19346,8029],{"class":626},[617,19348,767],{"class":622},[617,19350,19352,19354,19356,19358,19360,19362,19364,19366],{"class":619,"line":19351},63,[617,19353,761],{"class":622},[617,19355,8436],{"class":626},[617,19357,1847],{"class":630},[617,19359,637],{"class":622},[617,19361,640],{"class":622},[617,19363,800],{"class":643},[617,19365,640],{"class":622},[617,19367,767],{"class":622},[617,19369,19371,19373,19375,19378,19380,19382,19384,19387,19389,19391,19393,19395,19397,19399,19401,19403,19405,19407,19409],{"class":619,"line":19370},64,[617,19372,761],{"class":622},[617,19374,8455],{"class":626},[617,19376,19377],{"class":630}," v-light-helper",[617,19379,1465],{"class":630},[617,19381,637],{"class":622},[617,19383,640],{"class":622},[617,19385,19386],{"class":643},"[5, 5, 5]",[617,19388,640],{"class":622},[617,19390,1847],{"class":630},[617,19392,637],{"class":622},[617,19394,640],{"class":622},[617,19396,1926],{"class":643},[617,19398,640],{"class":622},[617,19400,2669],{"class":630},[617,19402,637],{"class":622},[617,19404,640],{"class":622},[617,19406,7551],{"class":643},[617,19408,640],{"class":622},[617,19410,767],{"class":622},[617,19412,19414,19416,19418,19420,19422,19424,19426,19429,19431,19433,19435,19437,19439,19441,19443,19445,19447,19449,19451],{"class":619,"line":19413},65,[617,19415,761],{"class":622},[617,19417,8455],{"class":626},[617,19419,19377],{"class":630},[617,19421,1465],{"class":630},[617,19423,637],{"class":622},[617,19425,640],{"class":622},[617,19427,19428],{"class":643},"[-5, 2, 2]",[617,19430,640],{"class":622},[617,19432,1847],{"class":630},[617,19434,637],{"class":622},[617,19436,640],{"class":622},[617,19438,1926],{"class":643},[617,19440,640],{"class":622},[617,19442,2669],{"class":630},[617,19444,637],{"class":622},[617,19446,640],{"class":622},[617,19448,5724],{"class":643},[617,19450,640],{"class":622},[617,19452,767],{"class":622},[617,19454,19456,19458,19460,19463,19465,19467,19469,19471],{"class":619,"line":19455},66,[617,19457,761],{"class":622},[617,19459,8796],{"class":626},[617,19461,19462],{"class":630}," position-y",[617,19464,637],{"class":622},[617,19466,640],{"class":622},[617,19468,800],{"class":643},[617,19470,640],{"class":622},[617,19472,649],{"class":622},[617,19474,19476,19478,19480,19482,19484,19486,19488,19490,19492,19494,19496,19498,19500],{"class":619,"line":19475},67,[617,19477,833],{"class":622},[617,19479,4414],{"class":626},[617,19481,2690],{"class":630},[617,19483,637],{"class":622},[617,19485,640],{"class":622},[617,19487,3802],{"class":643},[617,19489,640],{"class":622},[617,19491,4428],{"class":630},[617,19493,637],{"class":622},[617,19495,640],{"class":622},[617,19497,3802],{"class":643},[617,19499,640],{"class":622},[617,19501,767],{"class":622},[617,19503,19505,19507,19509],{"class":619,"line":19504},68,[617,19506,875],{"class":622},[617,19508,8796],{"class":626},[617,19510,649],{"class":622},[617,19512,19514,19516,19518],{"class":619,"line":19513},69,[617,19515,885],{"class":622},[617,19517,741],{"class":626},[617,19519,649],{"class":622},[617,19521,19523,19525,19527],{"class":619,"line":19522},70,[617,19524,712],{"class":622},[617,19526,730],{"class":626},[617,19528,649],{"class":622},[484,19530,19532],{"id":19531},"api","API",[4031,19534,19536],{"id":19535},"parameters","Parameters",[907,19538,19539,19551],{},[910,19540,19541],{},[913,19542,19543,19545,19547,19549],{},[916,19544,8069],{"align":977},[916,19546,5949],{},[916,19548,924],{},[916,19550,921],{},[926,19552,19553],{},[913,19554,19555,19560,19565,19569],{},[931,19556,19557],{"align":977},[1649,19558,19559],{},"paths",[931,19561,19562],{},[598,19563,19564],{},"string[]",[931,19566,19567],{},[598,19568,1159],{},[931,19570,19571],{},"Array of paths to the textures.",[4031,19573,19575],{"id":19574},"returns","Returns",[907,19577,19578,19588],{},[910,19579,19580],{},[913,19581,19582,19584,19586],{},[916,19583,8069],{"align":977},[916,19585,5949],{},[916,19587,921],{},[926,19589,19590,19603,19616],{},[913,19591,19592,19596,19600],{},[931,19593,19594],{"align":977},[1649,19595,2933],{},[931,19597,19598],{},[598,19599,5573],{},[931,19601,19602],{},"Array of loaded textures.",[913,19604,19605,19609,19613],{},[931,19606,19607],{"align":977},[1649,19608,15436],{},[931,19610,19611],{},[598,19612,15441],{},[931,19614,19615],{},"Whether any textures are still loading.",[913,19617,19618,19622,19627],{},[931,19619,19620],{"align":977},[1649,19621,17869],{},[931,19623,19624],{},[598,19625,19626],{},"Error[] | null",[931,19628,19629],{},"Array of errors if any occurred during loading.",[484,19631,19633],{"id":19632},"benefits","Benefits",[2193,19635,19636,19642,19648,19654],{},[2196,19637,19638,19641],{},[1649,19639,19640],{},"Simplified API",": Load multiple textures with a single function call",[2196,19643,19644,19647],{},[1649,19645,19646],{},"Consolidated loading state",": Track loading state for all textures at once",[2196,19649,19650,19653],{},[1649,19651,19652],{},"Unified error handling",": Collect and report errors from all texture loads",[2196,19655,19656,19659],{},[1649,19657,19658],{},"Type safety",": Proper TypeScript typing throughout the implementation",[1307,19661,19662],{},"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 .light .shiki span {color: var(--shiki-light);background: var(--shiki-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}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":556,"searchDepth":557,"depth":558,"links":19664},[19665,19666,19667,19671],{"id":604,"depth":558,"text":15},{"id":18495,"depth":558,"text":18496},{"id":19531,"depth":558,"text":19532,"children":19668},[19669,19670],{"id":19535,"depth":688,"text":19536},{"id":19574,"depth":688,"text":19575},{"id":19632,"depth":558,"text":19633},"A composable to load multiple textures efficiently in TresJS scenes.",{},{"title":141,"description":19672},"SGyfTzTHdLIy26Zf2q6_7GqcLLq8MvwoPurvEYXBwUI",{"id":19677,"title":145,"body":19678,"description":22524,"extension":571,"links":572,"meta":22525,"navigation":574,"path":146,"seo":22526,"stem":147,"__hash__":22527},"docs/2.api/3.loaders/7.use-svg.md",{"type":481,"value":19679,"toc":22499},[19680,19685,19698,19702,19707,19709,20189,20194,20208,20212,20215,20327,20329,20399,20401,20509,20513,20518,20574,20579,20885,20889,20894,20900,20905,20911,20927,20933,20948,20995,20998,21003,21014,21019,21022,21067,21071,21076,21079,21084,21093,21138,21142,21147,21159,21164,21206,21210,21213,21341,21345,21349,21652,21656,21950,21954,21961,22140,22142,22308,22312,22319,22322,22326,22336,22340,22364,22372,22385,22389,22416,22420,22440,22450,22458,22475,22482,22496],[2275,19681,19682],{},[19683,19684],"loaders-use-svg",{},[594,19686,19687,19688,19690,19691,19693,19694,19697],{},"Load and display SVG elements in your ",[1649,19689,14899],{}," scene. This guide covers both the ",[598,19692,145],{}," composable for advanced use cases and the ",[598,19695,19696],{},"SVG"," component for simple declarative rendering.",[484,19699,19701],{"id":19700},"usesvg-composable","useSVG Composable",[594,19703,2756,19704,19706],{},[598,19705,145],{}," composable provides direct access to processed SVG layers, giving you full control over the resulting geometries and materials.",[4031,19708,15],{"id":604},[14904,19710,19711,20009],{},[606,19712,19715],{"className":608,"code":19713,"filename":14909,"highlights":19714,"language":613,"meta":556,"style":556},"\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",[558,719,725,735,758],[598,19716,19717,19737,19757,19761,19777,19813,19825,19855,19862,19870,19874,19882,19901,19907,19921,19935,19949,19962,19966,19985,19993,20001],{"__ignoreMap":556},[617,19718,19719,19721,19723,19725,19727,19729,19731,19733,19735],{"class":619,"line":557},[617,19720,623],{"class":622},[617,19722,627],{"class":626},[617,19724,631],{"class":630},[617,19726,634],{"class":630},[617,19728,637],{"class":622},[617,19730,640],{"class":622},[617,19732,644],{"class":643},[617,19734,640],{"class":622},[617,19736,649],{"class":622},[617,19738,19740,19742,19744,19747,19749,19751,19753,19755],{"class":19739,"line":558},[619,653],[617,19741,657],{"class":656},[617,19743,660],{"class":622},[617,19745,19746],{"class":663}," useSVG",[617,19748,673],{"class":622},[617,19750,676],{"class":656},[617,19752,679],{"class":622},[617,19754,682],{"class":643},[617,19756,685],{"class":622},[617,19758,19759],{"class":619,"line":688},[617,19760,722],{"emptyLinePlaceholder":574},[617,19762,19763,19765,19768,19770,19772,19775],{"class":619,"line":709},[617,19764,2395],{"class":630},[617,19766,19767],{"class":663}," svgPath ",[617,19769,637],{"class":622},[617,19771,679],{"class":622},[617,19773,19774],{"class":643},"./logo.svg",[617,19776,685],{"class":622},[617,19778,19780,19782,19784,19786,19788,19791,19793,19795,19797,19800,19802,19804,19806,19809,19811],{"class":19779,"line":719},[619,653],[617,19781,2395],{"class":630},[617,19783,660],{"class":622},[617,19785,2400],{"class":663},[617,19787,667],{"class":622},[617,19789,19790],{"class":663}," layers",[617,19792,667],{"class":622},[617,19794,17681],{"class":663},[617,19796,667],{"class":622},[617,19798,19799],{"class":663}," dispose ",[617,19801,2408],{"class":622},[617,19803,2411],{"class":622},[617,19805,19746],{"class":2414},[617,19807,19808],{"class":663},"(svgPath",[617,19810,667],{"class":622},[617,19812,1184],{"class":622},[617,19814,19816,19819,19821,19823],{"class":19815,"line":725},[619,653],[617,19817,19818],{"class":626}," skipFills",[617,19820,1198],{"class":622},[617,19822,6705],{"class":4377},[617,19824,2468],{"class":622},[617,19826,19828,19831,19833,19835,19838,19840,19842,19844,19847,19849,19852],{"class":19827,"line":735},[619,653],[617,19829,19830],{"class":626}," fillMaterial",[617,19832,1198],{"class":622},[617,19834,660],{"class":622},[617,19836,19837],{"class":626}," transparent",[617,19839,1198],{"class":622},[617,19841,4378],{"class":4377},[617,19843,667],{"class":622},[617,19845,19846],{"class":626}," opacity",[617,19848,1198],{"class":622},[617,19850,19851],{"class":2481}," 0.8",[617,19853,19854],{"class":622}," }\n",[617,19856,19858,19860],{"class":19857,"line":758},[619,653],[617,19859,2408],{"class":622},[617,19861,2428],{"class":663},[617,19863,19864,19866,19868],{"class":619,"line":770},[617,19865,712],{"class":622},[617,19867,627],{"class":626},[617,19869,649],{"class":622},[617,19871,19872],{"class":619,"line":780},[617,19873,722],{"emptyLinePlaceholder":574},[617,19875,19876,19878,19880],{"class":619,"line":785},[617,19877,623],{"class":622},[617,19879,730],{"class":626},[617,19881,649],{"class":622},[617,19883,19884,19886,19888,19890,19892,19894,19897,19899],{"class":619,"line":807},[617,19885,738],{"class":622},[617,19887,8796],{"class":626},[617,19889,2690],{"class":630},[617,19891,637],{"class":622},[617,19893,640],{"class":622},[617,19895,19896],{"class":643},"!isLoading",[617,19898,640],{"class":622},[617,19900,649],{"class":622},[617,19902,19903,19905],{"class":619,"line":611},[617,19904,761],{"class":622},[617,19906,5106],{"class":626},[617,19908,19909,19912,19914,19916,19919],{"class":619,"line":830},[617,19910,19911],{"class":630}," v-for",[617,19913,637],{"class":622},[617,19915,640],{"class":622},[617,19917,19918],{"class":643},"(layer, index) in layers",[617,19920,3111],{"class":622},[617,19922,19923,19926,19928,19930,19933],{"class":619,"line":841},[617,19924,19925],{"class":630}," :key",[617,19927,637],{"class":622},[617,19929,640],{"class":622},[617,19931,19932],{"class":643},"`layer-${index}`",[617,19934,3111],{"class":622},[617,19936,19937,19940,19942,19944,19947],{"class":619,"line":852},[617,19938,19939],{"class":630}," :geometry",[617,19941,637],{"class":622},[617,19943,640],{"class":622},[617,19945,19946],{"class":643},"layer.geometry",[617,19948,3111],{"class":622},[617,19950,19951,19954,19956,19958,19960],{"class":619,"line":862},[617,19952,19953],{"class":630}," :render-order",[617,19955,637],{"class":622},[617,19957,640],{"class":622},[617,19959,7978],{"class":643},[617,19961,3111],{"class":622},[617,19963,19964],{"class":619,"line":612},[617,19965,10441],{"class":622},[617,19967,19968,19970,19972,19974,19976,19978,19981,19983],{"class":619,"line":882},[617,19969,833],{"class":622},[617,19971,7452],{"class":626},[617,19973,8970],{"class":630},[617,19975,637],{"class":622},[617,19977,640],{"class":622},[617,19979,19980],{"class":643},"layer.material",[617,19982,640],{"class":622},[617,19984,767],{"class":622},[617,19986,19987,19989,19991],{"class":619,"line":892},[617,19988,875],{"class":622},[617,19990,836],{"class":626},[617,19992,649],{"class":622},[617,19994,19995,19997,19999],{"class":619,"line":2605},[617,19996,885],{"class":622},[617,19998,8796],{"class":626},[617,20000,649],{"class":622},[617,20002,20003,20005,20007],{"class":619,"line":2614},[617,20004,712],{"class":622},[617,20006,730],{"class":626},[617,20008,649],{"class":622},[606,20010,20012],{"className":608,"code":20011,"filename":15060,"language":613,"meta":556,"style":556},"\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",[598,20013,20014,20034,20052,20070,20084,20092,20096,20104,20122,20141,20149,20157,20165,20173,20181],{"__ignoreMap":556},[617,20015,20016,20018,20020,20022,20024,20026,20028,20030,20032],{"class":619,"line":557},[617,20017,623],{"class":622},[617,20019,627],{"class":626},[617,20021,631],{"class":630},[617,20023,634],{"class":630},[617,20025,637],{"class":622},[617,20027,640],{"class":622},[617,20029,644],{"class":643},[617,20031,640],{"class":622},[617,20033,649],{"class":622},[617,20035,20036,20038,20040,20042,20044,20046,20048,20050],{"class":619,"line":558},[617,20037,657],{"class":656},[617,20039,660],{"class":622},[617,20041,670],{"class":663},[617,20043,673],{"class":622},[617,20045,676],{"class":656},[617,20047,679],{"class":622},[617,20049,682],{"class":643},[617,20051,685],{"class":622},[617,20053,20054,20056,20058,20060,20062,20064,20066,20068],{"class":619,"line":688},[617,20055,657],{"class":656},[617,20057,660],{"class":622},[617,20059,695],{"class":663},[617,20061,673],{"class":622},[617,20063,676],{"class":656},[617,20065,679],{"class":622},[617,20067,704],{"class":643},[617,20069,685],{"class":622},[617,20071,20072,20074,20076,20078,20080,20082],{"class":619,"line":709},[617,20073,657],{"class":656},[617,20075,15125],{"class":663},[617,20077,15128],{"class":656},[617,20079,679],{"class":622},[617,20081,15133],{"class":643},[617,20083,685],{"class":622},[617,20085,20086,20088,20090],{"class":619,"line":719},[617,20087,712],{"class":622},[617,20089,627],{"class":626},[617,20091,649],{"class":622},[617,20093,20094],{"class":619,"line":725},[617,20095,722],{"emptyLinePlaceholder":574},[617,20097,20098,20100,20102],{"class":619,"line":735},[617,20099,623],{"class":622},[617,20101,730],{"class":626},[617,20103,649],{"class":622},[617,20105,20106,20108,20110,20112,20114,20116,20118,20120],{"class":619,"line":758},[617,20107,738],{"class":622},[617,20109,741],{"class":626},[617,20111,744],{"class":630},[617,20113,637],{"class":622},[617,20115,640],{"class":622},[617,20117,10988],{"class":643},[617,20119,640],{"class":622},[617,20121,649],{"class":622},[617,20123,20124,20126,20128,20130,20132,20134,20137,20139],{"class":619,"line":770},[617,20125,761],{"class":622},[617,20127,764],{"class":626},[617,20129,1465],{"class":630},[617,20131,637],{"class":622},[617,20133,640],{"class":622},[617,20135,20136],{"class":643},"[0, 2, 10]",[617,20138,640],{"class":622},[617,20140,767],{"class":622},[617,20142,20143,20145,20147],{"class":619,"line":780},[617,20144,761],{"class":622},[617,20146,775],{"class":626},[617,20148,767],{"class":622},[617,20150,20151,20153,20155],{"class":619,"line":785},[617,20152,761],{"class":622},[617,20154,15208],{"class":626},[617,20156,767],{"class":622},[617,20158,20159,20161,20163],{"class":619,"line":807},[617,20160,761],{"class":622},[617,20162,8436],{"class":626},[617,20164,767],{"class":622},[617,20166,20167,20169,20171],{"class":619,"line":611},[617,20168,761],{"class":622},[617,20170,8455],{"class":626},[617,20172,767],{"class":622},[617,20174,20175,20177,20179],{"class":619,"line":830},[617,20176,885],{"class":622},[617,20178,741],{"class":626},[617,20180,649],{"class":622},[617,20182,20183,20185,20187],{"class":619,"line":841},[617,20184,712],{"class":622},[617,20186,730],{"class":626},[617,20188,649],{"class":622},[594,20190,2756,20191,20193],{},[598,20192,145],{}," composable provides direct access to processed SVG layers, giving you full control over how they're rendered. This is particularly useful when you need to:",[2193,20195,20196,20199,20202,20205],{},[2196,20197,20198],{},"Manually control layer rendering",[2196,20200,20201],{},"Apply custom animations to individual layers",[2196,20203,20204],{},"Access geometry data programmatically",[2196,20206,20207],{},"Implement complex material logic",[4031,20209,20211],{"id":20210},"svg-data-sources","SVG Data Sources",[594,20213,20214],{},"The composable accepts both file paths and inline SVG strings:",[606,20216,20218],{"className":1166,"code":20217,"language":644,"meta":556,"style":556},"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",[598,20219,20220,20238,20242,20247,20273,20277,20282,20297,20302,20310],{"__ignoreMap":556},[617,20221,20222,20224,20226,20228,20230,20232,20234,20236],{"class":619,"line":557},[617,20223,657],{"class":656},[617,20225,660],{"class":622},[617,20227,19746],{"class":663},[617,20229,673],{"class":622},[617,20231,676],{"class":656},[617,20233,679],{"class":622},[617,20235,682],{"class":643},[617,20237,685],{"class":622},[617,20239,20240],{"class":619,"line":558},[617,20241,722],{"emptyLinePlaceholder":574},[617,20243,20244],{"class":619,"line":688},[617,20245,20246],{"class":1189},"// From file\n",[617,20248,20249,20251,20253,20256,20258,20260,20262,20264,20266,20269,20271],{"class":619,"line":709},[617,20250,2395],{"class":630},[617,20252,660],{"class":622},[617,20254,20255],{"class":663}," layers ",[617,20257,2408],{"class":622},[617,20259,2411],{"class":622},[617,20261,19746],{"class":2414},[617,20263,2417],{"class":663},[617,20265,2420],{"class":622},[617,20267,20268],{"class":643},"/path/to/file.svg",[617,20270,2420],{"class":622},[617,20272,2428],{"class":663},[617,20274,20275],{"class":619,"line":719},[617,20276,722],{"emptyLinePlaceholder":574},[617,20278,20279],{"class":619,"line":725},[617,20280,20281],{"class":1189},"// Inline SVG string\n",[617,20283,20284,20286,20289,20291,20294],{"class":619,"line":735},[617,20285,2395],{"class":630},[617,20287,20288],{"class":663}," svgString ",[617,20290,637],{"class":622},[617,20292,20293],{"class":622}," `",[617,20295,20296],{"class":643},"\u003Csvg viewBox=\"0 0 100 100\">\n",[617,20298,20299],{"class":619,"line":758},[617,20300,20301],{"class":643}," \u003Ccircle cx=\"50\" cy=\"50\" r=\"40\" fill=\"red\" />\n",[617,20303,20304,20307],{"class":619,"line":770},[617,20305,20306],{"class":643},"\u003C/svg>",[617,20308,20309],{"class":622},"`\n",[617,20311,20312,20314,20316,20318,20320,20322,20324],{"class":619,"line":780},[617,20313,2395],{"class":630},[617,20315,660],{"class":622},[617,20317,20255],{"class":663},[617,20319,2408],{"class":622},[617,20321,2411],{"class":622},[617,20323,19746],{"class":2414},[617,20325,20326],{"class":663},"(svgString)\n",[4031,20328,15374],{"id":15373},[907,20330,20331,20341],{},[910,20332,20333],{},[913,20334,20335,20337,20339],{},[916,20336,8069],{"align":977},[916,20338,5949],{},[916,20340,921],{},[926,20342,20343,20357,20372,20385],{},[913,20344,20345,20349,20354],{},[931,20346,20347],{"align":977},[1649,20348,12760],{},[931,20350,20351],{},[598,20352,20353],{},"SVGResult",[931,20355,20356],{},"The loaded SVG state from SVGLoader",[913,20358,20359,20364,20369],{},[931,20360,20361],{"align":977},[1649,20362,20363],{},"layers",[931,20365,20366],{},[598,20367,20368],{},"SVGLayer[]",[931,20370,20371],{},"Computed array of processed geometries and materials",[913,20373,20374,20378,20382],{},[931,20375,20376],{"align":977},[1649,20377,15436],{},[931,20379,20380],{},[598,20381,15441],{},[931,20383,20384],{},"Whether the SVG is currently loading",[913,20386,20387,20392,20396],{},[931,20388,20389],{"align":977},[1649,20390,20391],{},"dispose",[931,20393,20394],{},[598,20395,6001],{},[931,20397,20398],{},"Function to dispose of all geometries",[4031,20400,12073],{"id":15476},[907,20402,20403,20415],{},[910,20404,20405],{},[913,20406,20407,20409,20411,20413],{},[916,20408,8069],{"align":977},[916,20410,5949],{},[916,20412,924],{},[916,20414,921],{},[926,20416,20417,20435,20453,20472,20490],{},[913,20418,20419,20424,20428,20432],{},[931,20420,20421],{"align":977},[1649,20422,20423],{},"skipStrokes",[931,20425,20426],{},[598,20427,15441],{},[931,20429,20430],{},[598,20431,951],{},[931,20433,20434],{},"Whether to skip rendering strokes",[913,20436,20437,20442,20446,20450],{},[931,20438,20439],{"align":977},[1649,20440,20441],{},"skipFills",[931,20443,20444],{},[598,20445,15441],{},[931,20447,20448],{},[598,20449,951],{},[931,20451,20452],{},"Whether to skip rendering fills",[913,20454,20455,20460,20465,20469],{},[931,20456,20457],{"align":977},[1649,20458,20459],{},"fillMaterial",[931,20461,20462],{},[598,20463,20464],{},"MeshBasicMaterialParameters",[931,20466,20467],{},[598,20468,6105],{},[931,20470,20471],{},"Material properties for fill layers",[913,20473,20474,20479,20483,20487],{},[931,20475,20476],{"align":977},[1649,20477,20478],{},"strokeMaterial",[931,20480,20481],{},[598,20482,20464],{},[931,20484,20485],{},[598,20486,6105],{},[931,20488,20489],{},"Material properties for stroke layers",[913,20491,20492,20496,20501,20506],{},[931,20493,20494],{"align":977},[1649,20495,11134],{},[931,20497,20498],{},[598,20499,20500],{},"'renderOrder' | 'flat' | 'offsetZ' | number",[931,20502,20503],{},[598,20504,20505],{},"'renderOrder'",[931,20507,20508],{},"How layers should be rendered in 3D space",[4031,20510,20512],{"id":20511},"working-with-layers","Working with Layers",[594,20514,2756,20515,20517],{},[598,20516,20363],{}," computed property returns an array of processed SVG elements, each containing:",[606,20519,20521],{"className":1166,"code":20520,"language":644,"meta":556,"style":556},"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",[598,20522,20523,20532,20545,20558,20570],{"__ignoreMap":556},[617,20524,20525,20527,20530],{"class":619,"line":557},[617,20526,5303],{"class":630},[617,20528,20529],{"class":1180}," SVGLayer",[617,20531,1184],{"class":622},[617,20533,20534,20537,20539,20542],{"class":619,"line":558},[617,20535,20536],{"class":626}," geometry",[617,20538,1198],{"class":622},[617,20540,20541],{"class":1180}," BufferGeometry",[617,20543,20544],{"class":1189}," // Three.js geometry for the layer\n",[617,20546,20547,20550,20552,20555],{"class":619,"line":688},[617,20548,20549],{"class":626}," material",[617,20551,1198],{"class":622},[617,20553,20554],{"class":1180}," MeshBasicMaterialParameters",[617,20556,20557],{"class":1189}," // Material properties\n",[617,20559,20560,20563,20565,20567],{"class":619,"line":709},[617,20561,20562],{"class":626}," isStroke",[617,20564,1198],{"class":622},[617,20566,5434],{"class":1180},[617,20568,20569],{"class":1189}," // Whether this layer is a stroke or fill\n",[617,20571,20572],{"class":619,"line":719},[617,20573,1305],{"class":622},[20575,20576,20578],"h4",{"id":20577},"accessing-individual-layers","Accessing Individual Layers",[606,20580,20583],{"className":608,"code":20581,"highlights":20582,"language":613,"meta":556,"style":556},"\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",[558,709],[598,20584,20585,20605,20624,20628,20654,20658,20663,20696,20745,20749,20757,20761,20769,20777,20783,20795,20807,20819,20823,20830,20843,20857,20861,20869,20877],{"__ignoreMap":556},[617,20586,20587,20589,20591,20593,20595,20597,20599,20601,20603],{"class":619,"line":557},[617,20588,623],{"class":622},[617,20590,627],{"class":626},[617,20592,631],{"class":630},[617,20594,634],{"class":630},[617,20596,637],{"class":622},[617,20598,640],{"class":622},[617,20600,644],{"class":643},[617,20602,640],{"class":622},[617,20604,649],{"class":622},[617,20606,20608,20610,20612,20614,20616,20618,20620,20622],{"class":20607,"line":558},[619,653],[617,20609,657],{"class":656},[617,20611,660],{"class":622},[617,20613,19746],{"class":663},[617,20615,673],{"class":622},[617,20617,676],{"class":656},[617,20619,679],{"class":622},[617,20621,682],{"class":643},[617,20623,685],{"class":622},[617,20625,20626],{"class":619,"line":688},[617,20627,722],{"emptyLinePlaceholder":574},[617,20629,20631,20633,20635,20637,20639,20641,20643,20645,20647,20650,20652],{"class":20630,"line":709},[619,653],[617,20632,2395],{"class":630},[617,20634,660],{"class":622},[617,20636,20255],{"class":663},[617,20638,2408],{"class":622},[617,20640,2411],{"class":622},[617,20642,19746],{"class":2414},[617,20644,2417],{"class":663},[617,20646,2420],{"class":622},[617,20648,20649],{"class":643},"/complex-icon.svg",[617,20651,2420],{"class":622},[617,20653,2428],{"class":663},[617,20655,20656],{"class":619,"line":719},[617,20657,722],{"emptyLinePlaceholder":574},[617,20659,20660],{"class":619,"line":725},[617,20661,20662],{"class":1189},"// Apply different materials based on layer type\n",[617,20664,20665,20667,20670,20672,20674,20677,20679,20681,20683,20686,20688,20690,20692,20694],{"class":619,"line":735},[617,20666,2395],{"class":630},[617,20668,20669],{"class":663}," getFillColor ",[617,20671,637],{"class":622},[617,20673,3054],{"class":622},[617,20675,20676],{"class":6818},"layer",[617,20678,1198],{"class":622},[617,20680,20529],{"class":1180},[617,20682,667],{"class":622},[617,20684,20685],{"class":6818}," index",[617,20687,1198],{"class":622},[617,20689,5337],{"class":1180},[617,20691,3320],{"class":622},[617,20693,3657],{"class":630},[617,20695,1184],{"class":622},[617,20697,20698,20701,20704,20706,20709,20712,20714,20717,20719,20721,20723,20726,20729,20732,20735,20738,20740,20743],{"class":619,"line":758},[617,20699,20700],{"class":656}," return",[617,20702,20703],{"class":663}," layer",[617,20705,1126],{"class":622},[617,20707,20708],{"class":663},"isStroke",[617,20710,20711],{"class":622}," ?",[617,20713,679],{"class":622},[617,20715,20716],{"class":643},"#000000",[617,20718,2420],{"class":622},[617,20720,3009],{"class":622},[617,20722,20293],{"class":622},[617,20724,20725],{"class":643},"hsl(",[617,20727,20728],{"class":622},"${",[617,20730,20731],{"class":663},"index ",[617,20733,20734],{"class":622},"*",[617,20736,20737],{"class":2481}," 30",[617,20739,2408],{"class":622},[617,20741,20742],{"class":643},", 70%, 50%)",[617,20744,20309],{"class":622},[617,20746,20747],{"class":619,"line":770},[617,20748,1305],{"class":622},[617,20750,20751,20753,20755],{"class":619,"line":780},[617,20752,712],{"class":622},[617,20754,627],{"class":626},[617,20756,649],{"class":622},[617,20758,20759],{"class":619,"line":785},[617,20760,722],{"emptyLinePlaceholder":574},[617,20762,20763,20765,20767],{"class":619,"line":807},[617,20764,623],{"class":622},[617,20766,730],{"class":626},[617,20768,649],{"class":622},[617,20770,20771,20773,20775],{"class":619,"line":611},[617,20772,738],{"class":622},[617,20774,8796],{"class":626},[617,20776,649],{"class":622},[617,20778,20779,20781],{"class":619,"line":830},[617,20780,761],{"class":622},[617,20782,5106],{"class":626},[617,20784,20785,20787,20789,20791,20793],{"class":619,"line":841},[617,20786,19911],{"class":630},[617,20788,637],{"class":622},[617,20790,640],{"class":622},[617,20792,19918],{"class":643},[617,20794,3111],{"class":622},[617,20796,20797,20799,20801,20803,20805],{"class":619,"line":852},[617,20798,19925],{"class":630},[617,20800,637],{"class":622},[617,20802,640],{"class":622},[617,20804,7978],{"class":643},[617,20806,3111],{"class":622},[617,20808,20809,20811,20813,20815,20817],{"class":619,"line":862},[617,20810,19939],{"class":630},[617,20812,637],{"class":622},[617,20814,640],{"class":622},[617,20816,19946],{"class":643},[617,20818,3111],{"class":622},[617,20820,20821],{"class":619,"line":612},[617,20822,10441],{"class":622},[617,20824,20825,20827],{"class":619,"line":882},[617,20826,833],{"class":622},[617,20828,20829],{"class":626},"TresMeshBasicMaterial\n",[617,20831,20832,20835,20837,20839,20841],{"class":619,"line":892},[617,20833,20834],{"class":630}," v-bind",[617,20836,637],{"class":622},[617,20838,640],{"class":622},[617,20840,19980],{"class":643},[617,20842,3111],{"class":622},[617,20844,20845,20848,20850,20852,20855],{"class":619,"line":2605},[617,20846,20847],{"class":630}," :color",[617,20849,637],{"class":622},[617,20851,640],{"class":622},[617,20853,20854],{"class":643},"getFillColor(layer, index)",[617,20856,3111],{"class":622},[617,20858,20859],{"class":619,"line":2614},[617,20860,8013],{"class":622},[617,20862,20863,20865,20867],{"class":619,"line":2634},[617,20864,875],{"class":622},[617,20866,836],{"class":626},[617,20868,649],{"class":622},[617,20870,20871,20873,20875],{"class":619,"line":2643},[617,20872,885],{"class":622},[617,20874,8796],{"class":626},[617,20876,649],{"class":622},[617,20878,20879,20881,20883],{"class":619,"line":2652},[617,20880,712],{"class":622},[617,20882,730],{"class":626},[617,20884,649],{"class":622},[4031,20886,20888],{"id":20887},"depth-handling","Depth Handling",[594,20890,2756,20891,20893],{},[598,20892,11134],{}," option controls how SVG layers are rendered in 3D space. It accepts the following values:",[20575,20895,20897,20899],{"id":20896},"renderorder-default",[598,20898,20505],{}," (Default)",[594,20901,20902],{},[1649,20903,20904],{},"Use case: Lone SVGs or applications that don't rely on stacked SVGs",[594,20906,20907,20908,20910],{},"This is the default ",[598,20909,11134],{}," option.",[594,20912,20913,20914,2230,20916,20918,20919,20926],{},"This value sets the materials' ",[598,20915,9167],{},[598,20917,951],{}," and increments the mesh layers ",[1120,20920,20923],{"href":20921,"rel":20922},"https://threejs.org/docs/?q=mesh#api/en/core/Object3D.renderOrder",[1124],[598,20924,20925],{},"renderOrder",". This makes the SVG layers render dependably regardless of perspective.",[594,20928,20929,20932],{},[1649,20930,20931],{},"Disadvantage",": Scene objects may render out of order.",[594,20934,20935,20936,20941,20942,20947],{},"SVG layers with higher ",[1120,20937,20939],{"href":20921,"rel":20938},[1124],[598,20940,20925],{}," will be rendered after (i.e., sometimes \"on top of\") other objects in the scene graph with a lower ",[1120,20943,20945],{"href":20921,"rel":20944},[1124],[598,20946,20925],{},". Depending on their settings, those other objects may render behind the SVG, even if they are closer to the camera.",[606,20949,20951],{"className":1166,"code":20950,"language":644,"meta":556,"style":556},"const { layers } = useSVG('/icon.svg', { depth: 'renderOrder' })\n",[598,20952,20953],{"__ignoreMap":556},[617,20954,20955,20957,20959,20961,20963,20965,20967,20969,20971,20974,20976,20978,20980,20983,20985,20987,20989,20991,20993],{"class":619,"line":557},[617,20956,2395],{"class":630},[617,20958,660],{"class":622},[617,20960,20255],{"class":663},[617,20962,2408],{"class":622},[617,20964,2411],{"class":622},[617,20966,19746],{"class":2414},[617,20968,2417],{"class":663},[617,20970,2420],{"class":622},[617,20972,20973],{"class":643},"/icon.svg",[617,20975,2420],{"class":622},[617,20977,667],{"class":622},[617,20979,660],{"class":622},[617,20981,20982],{"class":626}," depth",[617,20984,1198],{"class":622},[617,20986,679],{"class":622},[617,20988,20925],{"class":643},[617,20990,2420],{"class":622},[617,20992,673],{"class":622},[617,20994,2428],{"class":663},[20575,20996,20997],{"id":20997},"flat",[594,20999,21000],{},[1649,21001,21002],{},"Use case: simple SVGs",[594,21004,21005,21006,2230,21012,1126],{},"This option sets the materials ",[1120,21007,21010],{"href":21008,"rel":21009},"https://threejs.org/docs/?q=mesh#api/en/materials/Material.depthWrite",[1124],[598,21011,9167],{},[598,21013,951],{},[594,21015,21016,21018],{},[1649,21017,20931],{},": SVG layers may render out of order.",[594,21020,21021],{},"Overlapping layers in an SVG may be drawn out of order, depending on viewing perspective.",[606,21023,21025],{"className":1166,"code":21024,"language":644,"meta":556,"style":556},"const { layers } = useSVG('/icon.svg', { depth: 'flat' })\n",[598,21026,21027],{"__ignoreMap":556},[617,21028,21029,21031,21033,21035,21037,21039,21041,21043,21045,21047,21049,21051,21053,21055,21057,21059,21061,21063,21065],{"class":619,"line":557},[617,21030,2395],{"class":630},[617,21032,660],{"class":622},[617,21034,20255],{"class":663},[617,21036,2408],{"class":622},[617,21038,2411],{"class":622},[617,21040,19746],{"class":2414},[617,21042,2417],{"class":663},[617,21044,2420],{"class":622},[617,21046,20973],{"class":643},[617,21048,2420],{"class":622},[617,21050,667],{"class":622},[617,21052,660],{"class":622},[617,21054,20982],{"class":626},[617,21056,1198],{"class":622},[617,21058,679],{"class":622},[617,21060,20997],{"class":643},[617,21062,2420],{"class":622},[617,21064,673],{"class":622},[617,21066,2428],{"class":663},[20575,21068,21070],{"id":21069},"offsetz","offsetZ",[594,21072,21073],{},[1649,21074,21075],{},"Use case: unscaled SVGs seen from the front",[594,21077,21078],{},"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\".",[594,21080,21081,21083],{},[1649,21082,20931],{},": \"Bottom\" of the \"stack\" is visible; layers may z-fight.",[594,21085,21086,21087,21092],{},"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 ",[1120,21088,21091],{"href":21089,"rel":21090},"https://en.wikipedia.org/wiki/Z-fighting",[1124],"z-fight",", particularly if the SVG is scaled down.",[606,21094,21096],{"className":1166,"code":21095,"language":644,"meta":556,"style":556},"const { layers } = useSVG('/icon.svg', { depth: 'offsetZ' })\n",[598,21097,21098],{"__ignoreMap":556},[617,21099,21100,21102,21104,21106,21108,21110,21112,21114,21116,21118,21120,21122,21124,21126,21128,21130,21132,21134,21136],{"class":619,"line":557},[617,21101,2395],{"class":630},[617,21103,660],{"class":622},[617,21105,20255],{"class":663},[617,21107,2408],{"class":622},[617,21109,2411],{"class":622},[617,21111,19746],{"class":2414},[617,21113,2417],{"class":663},[617,21115,2420],{"class":622},[617,21117,20973],{"class":643},[617,21119,2420],{"class":622},[617,21121,667],{"class":622},[617,21123,660],{"class":622},[617,21125,20982],{"class":626},[617,21127,1198],{"class":622},[617,21129,679],{"class":622},[617,21131,21070],{"class":643},[617,21133,2420],{"class":622},[617,21135,673],{"class":622},[617,21137,2428],{"class":663},[20575,21139,21140],{"id":5332},[598,21141,5332],{},[594,21143,21144],{},[1649,21145,21146],{},"Use case: SVGs seen from the front",[594,21148,21149,21150,21153,21154,21158],{},"This is the same as ",[598,21151,21152],{},"'offsetZ'"," but allows you to specify how much space is added between each layer, in order to eliminate ",[1120,21155,21157],{"href":21089,"rel":21156},[1124],"z-fighting",". For most use cases, this should be a value greater than 0.025 and less than 1.",[594,21160,21161,21163],{},[1649,21162,20931],{},": \"Bottom\" of the \"stack\" is visible.",[606,21165,21167],{"className":1166,"code":21166,"language":644,"meta":556,"style":556},"const { layers } = useSVG('/icon.svg', { depth: 0.1 })\n",[598,21168,21169],{"__ignoreMap":556},[617,21170,21171,21173,21175,21177,21179,21181,21183,21185,21187,21189,21191,21193,21195,21197,21199,21202,21204],{"class":619,"line":557},[617,21172,2395],{"class":630},[617,21174,660],{"class":622},[617,21176,20255],{"class":663},[617,21178,2408],{"class":622},[617,21180,2411],{"class":622},[617,21182,19746],{"class":2414},[617,21184,2417],{"class":663},[617,21186,2420],{"class":622},[617,21188,20973],{"class":643},[617,21190,2420],{"class":622},[617,21192,667],{"class":622},[617,21194,660],{"class":622},[617,21196,20982],{"class":626},[617,21198,1198],{"class":622},[617,21200,21201],{"class":2481}," 0.1",[617,21203,673],{"class":622},[617,21205,2428],{"class":663},[4031,21207,21209],{"id":21208},"memory-management","Memory Management",[594,21211,21212],{},"Always dispose of geometries when the component unmounts:",[606,21214,21216],{"className":608,"code":21215,"language":613,"meta":556,"style":556},"\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",[598,21217,21218,21238,21256,21275,21279,21303,21307,21320,21327,21333],{"__ignoreMap":556},[617,21219,21220,21222,21224,21226,21228,21230,21232,21234,21236],{"class":619,"line":557},[617,21221,623],{"class":622},[617,21223,627],{"class":626},[617,21225,631],{"class":630},[617,21227,634],{"class":630},[617,21229,637],{"class":622},[617,21231,640],{"class":622},[617,21233,644],{"class":643},[617,21235,640],{"class":622},[617,21237,649],{"class":622},[617,21239,21240,21242,21244,21246,21248,21250,21252,21254],{"class":619,"line":558},[617,21241,657],{"class":656},[617,21243,660],{"class":622},[617,21245,19746],{"class":663},[617,21247,673],{"class":622},[617,21249,676],{"class":656},[617,21251,679],{"class":622},[617,21253,682],{"class":643},[617,21255,685],{"class":622},[617,21257,21258,21260,21262,21265,21267,21269,21271,21273],{"class":619,"line":688},[617,21259,657],{"class":656},[617,21261,660],{"class":622},[617,21263,21264],{"class":663}," onUnmounted",[617,21266,673],{"class":622},[617,21268,676],{"class":656},[617,21270,679],{"class":622},[617,21272,613],{"class":643},[617,21274,685],{"class":622},[617,21276,21277],{"class":619,"line":709},[617,21278,722],{"emptyLinePlaceholder":574},[617,21280,21281,21283,21285,21287,21289,21291,21293,21295,21297,21299,21301],{"class":619,"line":719},[617,21282,2395],{"class":630},[617,21284,660],{"class":622},[617,21286,19799],{"class":663},[617,21288,2408],{"class":622},[617,21290,2411],{"class":622},[617,21292,19746],{"class":2414},[617,21294,2417],{"class":663},[617,21296,2420],{"class":622},[617,21298,20973],{"class":643},[617,21300,2420],{"class":622},[617,21302,2428],{"class":663},[617,21304,21305],{"class":619,"line":725},[617,21306,722],{"emptyLinePlaceholder":574},[617,21308,21309,21312,21314,21316,21318],{"class":619,"line":735},[617,21310,21311],{"class":2414},"onUnmounted",[617,21313,2417],{"class":663},[617,21315,3654],{"class":622},[617,21317,3657],{"class":630},[617,21319,1184],{"class":622},[617,21321,21322,21325],{"class":619,"line":758},[617,21323,21324],{"class":2414}," dispose",[617,21326,6515],{"class":626},[617,21328,21329,21331],{"class":619,"line":770},[617,21330,2408],{"class":622},[617,21332,2428],{"class":663},[617,21334,21335,21337,21339],{"class":619,"line":780},[617,21336,712],{"class":622},[617,21338,627],{"class":626},[617,21340,649],{"class":622},[4031,21342,21344],{"id":21343},"advanced-usage","Advanced Usage",[20575,21346,21348],{"id":21347},"conditional-layer-rendering","Conditional Layer Rendering",[606,21350,21352],{"className":608,"code":21351,"language":613,"meta":556,"style":556},"\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",[598,21353,21354,21374,21392,21410,21414,21431,21456,21460,21478,21488,21499,21531,21535,21543,21547,21555,21563,21569,21582,21594,21606,21610,21628,21636,21644],{"__ignoreMap":556},[617,21355,21356,21358,21360,21362,21364,21366,21368,21370,21372],{"class":619,"line":557},[617,21357,623],{"class":622},[617,21359,627],{"class":626},[617,21361,631],{"class":630},[617,21363,634],{"class":630},[617,21365,637],{"class":622},[617,21367,640],{"class":622},[617,21369,644],{"class":643},[617,21371,640],{"class":622},[617,21373,649],{"class":622},[617,21375,21376,21378,21380,21382,21384,21386,21388,21390],{"class":619,"line":558},[617,21377,657],{"class":656},[617,21379,660],{"class":622},[617,21381,19746],{"class":663},[617,21383,673],{"class":622},[617,21385,676],{"class":656},[617,21387,679],{"class":622},[617,21389,682],{"class":643},[617,21391,685],{"class":622},[617,21393,21394,21396,21398,21400,21402,21404,21406,21408],{"class":619,"line":688},[617,21395,657],{"class":656},[617,21397,660],{"class":622},[617,21399,3469],{"class":663},[617,21401,673],{"class":622},[617,21403,676],{"class":656},[617,21405,679],{"class":622},[617,21407,613],{"class":643},[617,21409,685],{"class":622},[617,21411,21412],{"class":619,"line":709},[617,21413,722],{"emptyLinePlaceholder":574},[617,21415,21416,21418,21421,21423,21425,21427,21429],{"class":619,"line":719},[617,21417,2395],{"class":630},[617,21419,21420],{"class":663}," showDetails ",[617,21422,637],{"class":622},[617,21424,3852],{"class":2414},[617,21426,2417],{"class":663},[617,21428,941],{"class":4377},[617,21430,2428],{"class":663},[617,21432,21433,21435,21437,21439,21441,21443,21445,21447,21449,21452,21454],{"class":619,"line":725},[617,21434,2395],{"class":630},[617,21436,660],{"class":622},[617,21438,20255],{"class":663},[617,21440,2408],{"class":622},[617,21442,2411],{"class":622},[617,21444,19746],{"class":2414},[617,21446,2417],{"class":663},[617,21448,2420],{"class":622},[617,21450,21451],{"class":643},"/detailed-icon.svg",[617,21453,2420],{"class":622},[617,21455,2428],{"class":663},[617,21457,21458],{"class":619,"line":735},[617,21459,722],{"emptyLinePlaceholder":574},[617,21461,21462,21464,21467,21469,21471,21473,21475],{"class":619,"line":758},[617,21463,2395],{"class":630},[617,21465,21466],{"class":663}," visibleLayers ",[617,21468,637],{"class":622},[617,21470,3469],{"class":2414},[617,21472,2417],{"class":663},[617,21474,3654],{"class":622},[617,21476,21477],{"class":630}," =>\n",[617,21479,21480,21483,21485],{"class":619,"line":770},[617,21481,21482],{"class":663}," showDetails",[617,21484,1126],{"class":622},[617,21486,21487],{"class":663},"value\n",[617,21489,21490,21493,21495,21497],{"class":619,"line":780},[617,21491,21492],{"class":622}," ?",[617,21494,19790],{"class":663},[617,21496,1126],{"class":622},[617,21498,21487],{"class":663},[617,21500,21501,21504,21506,21508,21510,21512,21515,21517,21519,21521,21524,21526,21528],{"class":619,"line":785},[617,21502,21503],{"class":622}," :",[617,21505,19790],{"class":663},[617,21507,1126],{"class":622},[617,21509,3665],{"class":663},[617,21511,1126],{"class":622},[617,21513,21514],{"class":2414},"filter",[617,21516,2417],{"class":663},[617,21518,20676],{"class":6818},[617,21520,3657],{"class":630},[617,21522,21523],{"class":622}," !",[617,21525,20676],{"class":663},[617,21527,1126],{"class":622},[617,21529,21530],{"class":663},"isStroke)\n",[617,21532,21533],{"class":619,"line":807},[617,21534,2428],{"class":663},[617,21536,21537,21539,21541],{"class":619,"line":611},[617,21538,712],{"class":622},[617,21540,627],{"class":626},[617,21542,649],{"class":622},[617,21544,21545],{"class":619,"line":830},[617,21546,722],{"emptyLinePlaceholder":574},[617,21548,21549,21551,21553],{"class":619,"line":841},[617,21550,623],{"class":622},[617,21552,730],{"class":626},[617,21554,649],{"class":622},[617,21556,21557,21559,21561],{"class":619,"line":852},[617,21558,738],{"class":622},[617,21560,8796],{"class":626},[617,21562,649],{"class":622},[617,21564,21565,21567],{"class":619,"line":862},[617,21566,761],{"class":622},[617,21568,5106],{"class":626},[617,21570,21571,21573,21575,21577,21580],{"class":619,"line":612},[617,21572,19911],{"class":630},[617,21574,637],{"class":622},[617,21576,640],{"class":622},[617,21578,21579],{"class":643},"(layer, index) in visibleLayers",[617,21581,3111],{"class":622},[617,21583,21584,21586,21588,21590,21592],{"class":619,"line":882},[617,21585,19925],{"class":630},[617,21587,637],{"class":622},[617,21589,640],{"class":622},[617,21591,7978],{"class":643},[617,21593,3111],{"class":622},[617,21595,21596,21598,21600,21602,21604],{"class":619,"line":892},[617,21597,19939],{"class":630},[617,21599,637],{"class":622},[617,21601,640],{"class":622},[617,21603,19946],{"class":643},[617,21605,3111],{"class":622},[617,21607,21608],{"class":619,"line":2605},[617,21609,10441],{"class":622},[617,21611,21612,21614,21616,21618,21620,21622,21624,21626],{"class":619,"line":2614},[617,21613,833],{"class":622},[617,21615,7452],{"class":626},[617,21617,8970],{"class":630},[617,21619,637],{"class":622},[617,21621,640],{"class":622},[617,21623,19980],{"class":643},[617,21625,640],{"class":622},[617,21627,767],{"class":622},[617,21629,21630,21632,21634],{"class":619,"line":2634},[617,21631,875],{"class":622},[617,21633,836],{"class":626},[617,21635,649],{"class":622},[617,21637,21638,21640,21642],{"class":619,"line":2643},[617,21639,885],{"class":622},[617,21641,8796],{"class":626},[617,21643,649],{"class":622},[617,21645,21646,21648,21650],{"class":619,"line":2652},[617,21647,712],{"class":622},[617,21649,730],{"class":626},[617,21651,649],{"class":622},[20575,21653,21655],{"id":21654},"material-customization-per-layer","Material Customization per Layer",[606,21657,21659],{"className":608,"code":21658,"language":613,"meta":556,"style":556},"\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",[598,21660,21661,21681,21699,21703,21730,21738,21749,21759,21763,21772,21782,21793,21806,21810,21816,21824,21828,21836,21844,21850,21862,21874,21886,21890,21896,21908,21922,21926,21934,21942],{"__ignoreMap":556},[617,21662,21663,21665,21667,21669,21671,21673,21675,21677,21679],{"class":619,"line":557},[617,21664,623],{"class":622},[617,21666,627],{"class":626},[617,21668,631],{"class":630},[617,21670,634],{"class":630},[617,21672,637],{"class":622},[617,21674,640],{"class":622},[617,21676,644],{"class":643},[617,21678,640],{"class":622},[617,21680,649],{"class":622},[617,21682,21683,21685,21687,21689,21691,21693,21695,21697],{"class":619,"line":558},[617,21684,657],{"class":656},[617,21686,660],{"class":622},[617,21688,19746],{"class":663},[617,21690,673],{"class":622},[617,21692,676],{"class":656},[617,21694,679],{"class":622},[617,21696,682],{"class":643},[617,21698,685],{"class":622},[617,21700,21701],{"class":619,"line":688},[617,21702,722],{"emptyLinePlaceholder":574},[617,21704,21705,21707,21709,21711,21713,21715,21717,21719,21721,21724,21726,21728],{"class":619,"line":709},[617,21706,2395],{"class":630},[617,21708,660],{"class":622},[617,21710,20255],{"class":663},[617,21712,2408],{"class":622},[617,21714,2411],{"class":622},[617,21716,19746],{"class":2414},[617,21718,2417],{"class":663},[617,21720,2420],{"class":622},[617,21722,21723],{"class":643},"/logo.svg",[617,21725,2420],{"class":622},[617,21727,667],{"class":622},[617,21729,1184],{"class":622},[617,21731,21732,21734,21736],{"class":619,"line":719},[617,21733,19830],{"class":626},[617,21735,1198],{"class":622},[617,21737,1184],{"class":622},[617,21739,21740,21743,21745,21747],{"class":619,"line":725},[617,21741,21742],{"class":626}," transparent",[617,21744,1198],{"class":622},[617,21746,4378],{"class":4377},[617,21748,2468],{"class":622},[617,21750,21751,21754,21756],{"class":619,"line":735},[617,21752,21753],{"class":626}," opacity",[617,21755,1198],{"class":622},[617,21757,21758],{"class":2481}," 0.9\n",[617,21760,21761],{"class":619,"line":758},[617,21762,2577],{"class":622},[617,21764,21765,21768,21770],{"class":619,"line":770},[617,21766,21767],{"class":626}," strokeMaterial",[617,21769,1198],{"class":622},[617,21771,1184],{"class":622},[617,21773,21774,21776,21778,21780],{"class":619,"line":780},[617,21775,21742],{"class":626},[617,21777,1198],{"class":622},[617,21779,4378],{"class":4377},[617,21781,2468],{"class":622},[617,21783,21784,21786,21788,21791],{"class":619,"line":785},[617,21785,21753],{"class":626},[617,21787,1198],{"class":622},[617,21789,21790],{"class":2481}," 1.0",[617,21792,2468],{"class":622},[617,21794,21795,21798,21800,21802,21804],{"class":619,"line":807},[617,21796,21797],{"class":626}," color",[617,21799,1198],{"class":622},[617,21801,679],{"class":622},[617,21803,20716],{"class":643},[617,21805,685],{"class":622},[617,21807,21808],{"class":619,"line":611},[617,21809,7837],{"class":622},[617,21811,21812,21814],{"class":619,"line":830},[617,21813,2408],{"class":622},[617,21815,2428],{"class":663},[617,21817,21818,21820,21822],{"class":619,"line":841},[617,21819,712],{"class":622},[617,21821,627],{"class":626},[617,21823,649],{"class":622},[617,21825,21826],{"class":619,"line":852},[617,21827,722],{"emptyLinePlaceholder":574},[617,21829,21830,21832,21834],{"class":619,"line":862},[617,21831,623],{"class":622},[617,21833,730],{"class":626},[617,21835,649],{"class":622},[617,21837,21838,21840,21842],{"class":619,"line":612},[617,21839,738],{"class":622},[617,21841,8796],{"class":626},[617,21843,649],{"class":622},[617,21845,21846,21848],{"class":619,"line":882},[617,21847,761],{"class":622},[617,21849,5106],{"class":626},[617,21851,21852,21854,21856,21858,21860],{"class":619,"line":892},[617,21853,19911],{"class":630},[617,21855,637],{"class":622},[617,21857,640],{"class":622},[617,21859,19918],{"class":643},[617,21861,3111],{"class":622},[617,21863,21864,21866,21868,21870,21872],{"class":619,"line":2605},[617,21865,19925],{"class":630},[617,21867,637],{"class":622},[617,21869,640],{"class":622},[617,21871,7978],{"class":643},[617,21873,3111],{"class":622},[617,21875,21876,21878,21880,21882,21884],{"class":619,"line":2614},[617,21877,19939],{"class":630},[617,21879,637],{"class":622},[617,21881,640],{"class":622},[617,21883,19946],{"class":643},[617,21885,3111],{"class":622},[617,21887,21888],{"class":619,"line":2634},[617,21889,10441],{"class":622},[617,21891,21892,21894],{"class":619,"line":2643},[617,21893,833],{"class":622},[617,21895,20829],{"class":626},[617,21897,21898,21900,21902,21904,21906],{"class":619,"line":2652},[617,21899,20834],{"class":630},[617,21901,637],{"class":622},[617,21903,640],{"class":622},[617,21905,19980],{"class":643},[617,21907,3111],{"class":622},[617,21909,21910,21913,21915,21917,21920],{"class":619,"line":2661},[617,21911,21912],{"class":630}," :wireframe",[617,21914,637],{"class":622},[617,21916,640],{"class":622},[617,21918,21919],{"class":643},"layer.isStroke",[617,21921,3111],{"class":622},[617,21923,21924],{"class":619,"line":2683},[617,21925,8013],{"class":622},[617,21927,21928,21930,21932],{"class":619,"line":2727},[617,21929,875],{"class":622},[617,21931,836],{"class":626},[617,21933,649],{"class":622},[617,21935,21936,21938,21940],{"class":619,"line":2736},[617,21937,885],{"class":622},[617,21939,8796],{"class":626},[617,21941,649],{"class":622},[617,21943,21944,21946,21948],{"class":619,"line":2745},[617,21945,712],{"class":622},[617,21947,730],{"class":626},[617,21949,649],{"class":622},[484,21951,21953],{"id":21952},"usesvg-component","UseSVG Component",[594,21955,21956,21957,21960],{},"For simple, declarative SVG rendering without the need for programmatic control, you can use the ",[598,21958,21959],{},"UseSVG"," component:",[606,21962,21964],{"className":608,"code":21963,"language":613,"meta":556,"style":556},"\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",[598,21965,21966,21986,22005,22013,22017,22025,22054,22061,22075,22088,22100,22107,22120,22124,22132],{"__ignoreMap":556},[617,21967,21968,21970,21972,21974,21976,21978,21980,21982,21984],{"class":619,"line":557},[617,21969,623],{"class":622},[617,21971,627],{"class":626},[617,21973,631],{"class":630},[617,21975,634],{"class":630},[617,21977,637],{"class":622},[617,21979,640],{"class":622},[617,21981,644],{"class":643},[617,21983,640],{"class":622},[617,21985,649],{"class":622},[617,21987,21988,21990,21992,21995,21997,21999,22001,22003],{"class":619,"line":558},[617,21989,657],{"class":656},[617,21991,660],{"class":622},[617,21993,21994],{"class":663}," UseSVG",[617,21996,673],{"class":622},[617,21998,676],{"class":656},[617,22000,679],{"class":622},[617,22002,682],{"class":643},[617,22004,685],{"class":622},[617,22006,22007,22009,22011],{"class":619,"line":688},[617,22008,712],{"class":622},[617,22010,627],{"class":626},[617,22012,649],{"class":622},[617,22014,22015],{"class":619,"line":709},[617,22016,722],{"emptyLinePlaceholder":574},[617,22018,22019,22021,22023],{"class":619,"line":719},[617,22020,623],{"class":622},[617,22022,730],{"class":626},[617,22024,649],{"class":622},[617,22026,22027,22029,22031,22033,22035,22037,22039,22041,22043,22045,22047,22050,22052],{"class":619,"line":725},[617,22028,738],{"class":622},[617,22030,8796],{"class":626},[617,22032,793],{"class":630},[617,22034,637],{"class":622},[617,22036,640],{"class":622},[617,22038,1866],{"class":643},[617,22040,640],{"class":622},[617,22042,1465],{"class":630},[617,22044,637],{"class":622},[617,22046,640],{"class":622},[617,22048,22049],{"class":643},"[-2.1, 1, 0]",[617,22051,640],{"class":622},[617,22053,649],{"class":622},[617,22055,22056,22058],{"class":619,"line":735},[617,22057,761],{"class":622},[617,22059,22060],{"class":626},"UseSVG\n",[617,22062,22063,22066,22068,22070,22073],{"class":619,"line":758},[617,22064,22065],{"class":630}," src",[617,22067,637],{"class":622},[617,22069,640],{"class":622},[617,22071,22072],{"class":643},"/path/to/logo.svg",[617,22074,3111],{"class":622},[617,22076,22077,22080,22082,22084,22086],{"class":619,"line":770},[617,22078,22079],{"class":630}," :skip-fills",[617,22081,637],{"class":622},[617,22083,640],{"class":622},[617,22085,951],{"class":643},[617,22087,3111],{"class":622},[617,22089,22090,22093,22095,22097],{"class":619,"line":780},[617,22091,22092],{"class":630}," :fill-material",[617,22094,637],{"class":622},[617,22096,640],{"class":622},[617,22098,22099],{"class":643},"{ transparent: true,\n",[617,22101,22102,22105],{"class":619,"line":785},[617,22103,22104],{"class":643}," opacity: 0.8 }",[617,22106,3111],{"class":622},[617,22108,22109,22112,22114,22116,22118],{"class":619,"line":807},[617,22110,22111],{"class":630}," depth",[617,22113,637],{"class":622},[617,22115,640],{"class":622},[617,22117,20925],{"class":643},[617,22119,3111],{"class":622},[617,22121,22122],{"class":619,"line":611},[617,22123,15248],{"class":622},[617,22125,22126,22128,22130],{"class":619,"line":830},[617,22127,885],{"class":622},[617,22129,8796],{"class":626},[617,22131,649],{"class":622},[617,22133,22134,22136,22138],{"class":619,"line":841},[617,22135,712],{"class":622},[617,22137,730],{"class":626},[617,22139,649],{"class":622},[4031,22141,902],{"id":901},[907,22143,22144,22156],{},[910,22145,22146],{},[913,22147,22148,22150,22152,22154],{},[916,22149,918],{"align":977},[916,22151,5949],{},[916,22153,921],{"align":977},[916,22155,924],{},[926,22157,22158,22178,22197,22216,22233,22250,22269,22287],{},[913,22159,22160,22165,22169,22176],{},[931,22161,22162],{"align":977},[1649,22163,22164],{},"src",[931,22166,22167],{},[598,22168,3552],{},[931,22170,22171,22172,22175],{"align":977},"Either a path to an SVG ",[1654,22173,22174],{},"or"," an SVG string",[931,22177],{},[913,22179,22180,22184,22188,22193],{},[931,22181,22182],{"align":977},[1649,22183,20423],{},[931,22185,22186],{},[598,22187,15441],{},[931,22189,938,22190,22192],{"align":977},[598,22191,941],{},", the SVG strokes will not be rendered.",[931,22194,22195],{},[598,22196,951],{},[913,22198,22199,22203,22207,22212],{},[931,22200,22201],{"align":977},[1649,22202,20441],{},[931,22204,22205],{},[598,22206,15441],{},[931,22208,938,22209,22211],{"align":977},[598,22210,941],{},", the SVG fills will not be rendered.",[931,22213,22214],{},[598,22215,951],{},[913,22217,22218,22222,22226,22229],{},[931,22219,22220],{"align":977},[1649,22221,20478],{},[931,22223,22224],{},[598,22225,20464],{},[931,22227,22228],{"align":977},"Props to assign to the stroke materials of the resulting meshes.",[931,22230,22231],{},[598,22232,1159],{},[913,22234,22235,22239,22243,22246],{},[931,22236,22237],{"align":977},[1649,22238,20459],{},[931,22240,22241],{},[598,22242,20464],{},[931,22244,22245],{"align":977},"Props to assign to the fill materials of the resulting meshes.",[931,22247,22248],{},[598,22249,1159],{},[913,22251,22252,22257,22262,22265],{},[931,22253,22254],{"align":977},[1649,22255,22256],{},"strokeMeshProps",[931,22258,22259],{},[598,22260,22261],{},"TresOptions",[931,22263,22264],{"align":977},"Props to assign to the resulting stroke meshes.",[931,22266,22267],{},[598,22268,1159],{},[913,22270,22271,22276,22280,22283],{},[931,22272,22273],{"align":977},[1649,22274,22275],{},"fillMeshProps",[931,22277,22278],{},[598,22279,22261],{},[931,22281,22282],{"align":977},"Props to assign to the resulting fill meshes.",[931,22284,22285],{},[598,22286,1159],{},[913,22288,22289,22293,22297,22304],{},[931,22290,22291],{"align":977},[1649,22292,11134],{},[931,22294,22295],{},[598,22296,20500],{},[931,22298,22299,22300,3320],{"align":977},"Specify how SVG layers are to be rendered. (",[1120,22301,22303],{"href":22302},"#depth-handling","See \"Depth\"",[931,22305,22306],{},[598,22307,20925],{},[484,22309,22311],{"id":22310},"troubleshooting","Troubleshooting",[22313,22314,22316],"alert",{"type":22315},"warning",[594,22317,22318],{},"This is not a general-purpose SVG renderer. Many SVG features are unsupported.",[594,22320,22321],{},"Here are some things to try if you run into problems:",[4031,22323,22325],{"id":22324},"error-xml-parsing-error-unclosed-token","Error: \"XML Parsing Error: unclosed token\"",[2193,22327,22328],{},[2196,22329,22330,22331,2230,22333,1126],{},"In the SVG source, convert hex colors to rgb, e.g., convert ",[598,22332,7551],{},[598,22334,22335],{},"rgb(255, 0, 0)",[4031,22337,22339],{"id":22338},"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",[2193,22341,22342,22354],{},[2196,22343,22344,22345,22347,22348,1126],{},"In your ",[598,22346,145],{}," options, ",[1120,22349,22350,22351,22353],{"href":22302},"change the ",[598,22352,11134],{}," option",[2196,22355,22356,22357,22360,22361,1126],{},"In the SVG source, use ",[598,22358,22359],{},"fill=\"none\""," rather than ",[598,22362,22363],{},"fill-opacity=\"0\"",[4031,22365,22367,22368],{"id":22366},"parts-of-the-svg-z-fight","Parts of the SVG ",[1120,22369,22371],{"href":21089,"rel":22370},[1124],"\"z-fight\"",[2193,22373,22374,22382],{},[2196,22375,22344,22376,22347,22378,1126],{},[598,22377,145],{},[1120,22379,22350,22380,22353],{"href":22302},[598,22381,11134],{},[2196,22383,22384],{},"Increase the distance between the SVG and other on-screen elements.",[4031,22386,22388],{"id":22387},"the-svg-is-not-visible","The SVG is not visible",[2193,22390,22391,22394,22403,22409],{},[2196,22392,22393],{},"If importing an SVG, make sure the path is correct – check the console for loading errors.",[2196,22395,22396,22397,22399,22400,1126],{},"Try scaling the SVG down, e.g., wrap it in a ",[598,22398,8796],{}," with ",[598,22401,22402],{},":scale=\"0.01\"",[2196,22404,22405,22406,1126],{},"Try moving the SVG up (+y), e.g., ",[598,22407,22408],{},":position=\"[0,2,0]\"",[2196,22410,22411,22412,22415],{},"Check that ",[598,22413,22414],{},"layers.length > 0"," before rendering.",[4031,22417,22419],{"id":22418},"performance-issues-with-many-layers","Performance issues with many layers",[2193,22421,22422,22429,22437],{},[2196,22423,22424,22425,22428],{},"Use the ",[598,22426,22427],{},"dispose()"," function when components unmount to clean up geometries.",[2196,22430,22431,22432,5591,22434,22436],{},"Consider using ",[598,22433,20423],{},[598,22435,20441],{}," to reduce the number of rendered layers.",[2196,22438,22439],{},"For complex SVGs with many layers, consider simplifying the SVG source.",[484,22441,22443,22444,22446,22447,22449],{"id":22442},"when-to-use-usesvg-vs-svg-component","When to Use ",[598,22445,145],{}," vs ",[598,22448,19696],{}," Component",[594,22451,22452],{},[1649,22453,22454,22455,22457],{},"Use ",[598,22456,145],{}," when you need:",[2193,22459,22460,22463,22466,22469,22472],{},[2196,22461,22462],{},"Direct access to individual SVG layers",[2196,22464,22465],{},"Custom rendering logic",[2196,22467,22468],{},"Layer-specific animations",[2196,22470,22471],{},"Programmatic geometry manipulation",[2196,22473,22474],{},"Advanced material customization per layer",[594,22476,22477],{},[1649,22478,22424,22479,22481],{},[598,22480,19696],{}," component when you need:",[2193,22483,22484,22487,22490,22493],{},[2196,22485,22486],{},"Simple, declarative SVG rendering",[2196,22488,22489],{},"Quick prototyping",[2196,22491,22492],{},"Standard SVG display without custom logic",[2196,22494,22495],{},"Less code and setup",[1307,22497,22498],{},"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":556,"searchDepth":557,"depth":558,"links":22500},[22501,22511,22514,22522],{"id":19700,"depth":558,"text":19701,"children":22502},[22503,22504,22505,22506,22507,22508,22509,22510],{"id":604,"depth":688,"text":15},{"id":20210,"depth":688,"text":20211},{"id":15373,"depth":688,"text":15374},{"id":15476,"depth":688,"text":12073},{"id":20511,"depth":688,"text":20512},{"id":20887,"depth":688,"text":20888},{"id":21208,"depth":688,"text":21209},{"id":21343,"depth":688,"text":21344},{"id":21952,"depth":558,"text":21953,"children":22512},[22513],{"id":901,"depth":688,"text":902},{"id":22310,"depth":558,"text":22311,"children":22515},[22516,22517,22518,22520,22521],{"id":22324,"depth":688,"text":22325},{"id":22338,"depth":688,"text":22339},{"id":22366,"depth":688,"text":22519},"Parts of the SVG \"z-fight\"",{"id":22387,"depth":688,"text":22388},{"id":22418,"depth":688,"text":22419},{"id":22442,"depth":558,"text":22523},"When to Use useSVG vs SVG Component","A composable to load and render SVG files as 3D geometry in TresJS scenes.",{},{"title":145,"description":22524},"t3a1fKjOyasXtDyXY3XrpW0clG4ZuIfM5SpFO_CMPZM",{"id":22529,"title":149,"body":22530,"description":23000,"extension":571,"links":572,"meta":23001,"navigation":574,"path":150,"seo":23002,"stem":151,"__hash__":23003},"docs/2.api/3.loaders/use-progress.md",{"type":481,"value":22531,"toc":22996},[22532,22539,22542,22544,22602,22608,22908,22919,22921,22977,22993],[594,22533,22534,22535,22538],{},"A composable to convenience wrap ",[598,22536,22537],{},"THREE.DefaultLoadingManager"," and returns the progress of the loading assets into the scene.",[594,22540,22541],{},"This comes handy to show an HTML loading bar or a spinner while the assets are being loaded.",[484,22543,15],{"id":604},[606,22545,22547],{"className":1166,"code":22546,"language":644,"meta":556,"style":556},"import { useProgress } from '@tresjs/cientos'\n\nconst { hasFinishLoading, progress, items } = await useProgress()\n",[598,22548,22549,22568,22572],{"__ignoreMap":556},[617,22550,22551,22553,22555,22558,22560,22562,22564,22566],{"class":619,"line":557},[617,22552,657],{"class":656},[617,22554,660],{"class":622},[617,22556,22557],{"class":663}," useProgress",[617,22559,673],{"class":622},[617,22561,676],{"class":656},[617,22563,679],{"class":622},[617,22565,682],{"class":643},[617,22567,685],{"class":622},[617,22569,22570],{"class":619,"line":558},[617,22571,722],{"emptyLinePlaceholder":574},[617,22573,22574,22576,22578,22581,22583,22586,22588,22591,22593,22595,22598,22600],{"class":619,"line":688},[617,22575,2395],{"class":630},[617,22577,660],{"class":622},[617,22579,22580],{"class":663}," hasFinishLoading",[617,22582,667],{"class":622},[617,22584,22585],{"class":663}," progress",[617,22587,667],{"class":622},[617,22589,22590],{"class":663}," items ",[617,22592,2408],{"class":622},[617,22594,2411],{"class":622},[617,22596,22597],{"class":656}," await",[617,22599,22557],{"class":2414},[617,22601,6515],{"class":663},[594,22603,22604,22605,22607],{},"Then you can use the ",[598,22606,15451],{}," value to show a loading bar or a spinner:",[606,22609,22611],{"className":608,"code":22610,"language":613,"meta":556,"style":556},"\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",[598,22612,22613,22621,22628,22641,22655,22669,22673,22680,22694,22708,22712,22732,22737,22762,22770,22778,22787,22806,22824,22832,22840,22847,22852,22866,22880,22884,22892,22900],{"__ignoreMap":556},[617,22614,22615,22617,22619],{"class":619,"line":557},[617,22616,623],{"class":622},[617,22618,730],{"class":626},[617,22620,649],{"class":622},[617,22622,22623,22625],{"class":619,"line":558},[617,22624,738],{"class":622},[617,22626,22627],{"class":626},"Transition\n",[617,22629,22630,22632,22634,22636,22639],{"class":619,"line":688},[617,22631,5125],{"class":630},[617,22633,637],{"class":622},[617,22635,640],{"class":622},[617,22637,22638],{"class":643},"fade-overlay",[617,22640,3111],{"class":622},[617,22642,22643,22646,22648,22650,22653],{"class":619,"line":709},[617,22644,22645],{"class":630}," enter-active-class",[617,22647,637],{"class":622},[617,22649,640],{"class":622},[617,22651,22652],{"class":643},"opacity-1 transition-opacity duration-200",[617,22654,3111],{"class":622},[617,22656,22657,22660,22662,22664,22667],{"class":619,"line":719},[617,22658,22659],{"class":630}," leave-active-class",[617,22661,637],{"class":622},[617,22663,640],{"class":622},[617,22665,22666],{"class":643},"opacity-0 transition-opacity duration-200",[617,22668,3111],{"class":622},[617,22670,22671],{"class":619,"line":725},[617,22672,5153],{"class":622},[617,22674,22675,22677],{"class":619,"line":735},[617,22676,761],{"class":622},[617,22678,22679],{"class":626},"div\n",[617,22681,22682,22685,22687,22689,22692],{"class":619,"line":758},[617,22683,22684],{"class":630}," v-show",[617,22686,637],{"class":622},[617,22688,640],{"class":622},[617,22690,22691],{"class":643},"!hasFinishLoading",[617,22693,3111],{"class":622},[617,22695,22696,22699,22701,22703,22706],{"class":619,"line":770},[617,22697,22698],{"class":630}," class",[617,22700,637],{"class":622},[617,22702,640],{"class":622},[617,22704,22705],{"class":643},"absolute bg-grey-600 t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono",[617,22707,3111],{"class":622},[617,22709,22710],{"class":619,"line":780},[617,22711,10441],{"class":622},[617,22713,22714,22716,22718,22721,22723,22725,22728,22730],{"class":619,"line":785},[617,22715,833],{"class":622},[617,22717,4099],{"class":626},[617,22719,22720],{"class":630}," class",[617,22722,637],{"class":622},[617,22724,640],{"class":622},[617,22726,22727],{"class":643},"w-200px",[617,22729,640],{"class":622},[617,22731,649],{"class":622},[617,22733,22734],{"class":619,"line":807},[617,22735,22736],{"class":663}," Loading... {{ progress }} %\n",[617,22738,22739,22741,22744,22746,22748,22750,22753,22755,22758,22760],{"class":619,"line":611},[617,22740,844],{"class":622},[617,22742,22743],{"class":626},"i",[617,22745,22720],{"class":630},[617,22747,637],{"class":622},[617,22749,640],{"class":622},[617,22751,22752],{"class":643},"i-ic-twotone-catching-pokemon animate-rotate-in",[617,22754,640],{"class":622},[617,22756,22757],{"class":622},">\u003C/",[617,22759,22743],{"class":626},[617,22761,649],{"class":622},[617,22763,22764,22766,22768],{"class":619,"line":830},[617,22765,865],{"class":622},[617,22767,4099],{"class":626},[617,22769,649],{"class":622},[617,22771,22772,22774,22776],{"class":619,"line":841},[617,22773,875],{"class":622},[617,22775,4099],{"class":626},[617,22777,649],{"class":622},[617,22779,22780,22782,22785],{"class":619,"line":852},[617,22781,885],{"class":622},[617,22783,22784],{"class":626},"Transition",[617,22786,649],{"class":622},[617,22788,22789,22791,22793,22795,22797,22799,22802,22804],{"class":619,"line":862},[617,22790,738],{"class":622},[617,22792,741],{"class":626},[617,22794,19276],{"class":630},[617,22796,637],{"class":622},[617,22798,640],{"class":622},[617,22800,22801],{"class":643},"realistic",[617,22803,640],{"class":622},[617,22805,649],{"class":622},[617,22807,22808,22810,22812,22814,22816,22818,22820,22822],{"class":619,"line":612},[617,22809,761],{"class":622},[617,22811,764],{"class":626},[617,22813,1465],{"class":630},[617,22815,637],{"class":622},[617,22817,640],{"class":622},[617,22819,16662],{"class":643},[617,22821,640],{"class":622},[617,22823,767],{"class":622},[617,22825,22826,22828,22830],{"class":619,"line":882},[617,22827,761],{"class":622},[617,22829,775],{"class":626},[617,22831,767],{"class":622},[617,22833,22834,22836,22838],{"class":619,"line":892},[617,22835,761],{"class":622},[617,22837,19264],{"class":626},[617,22839,649],{"class":622},[617,22841,22842,22844],{"class":619,"line":2605},[617,22843,833],{"class":622},[617,22845,22846],{"class":626},"Environment\n",[617,22848,22849],{"class":619,"line":2614},[617,22850,22851],{"class":630}," background\n",[617,22853,22854,22857,22859,22861,22864],{"class":619,"line":2634},[617,22855,22856],{"class":630}," :files",[617,22858,637],{"class":622},[617,22860,640],{"class":622},[617,22862,22863],{"class":643},"environmentFiles",[617,22865,3111],{"class":622},[617,22867,22868,22871,22873,22875,22878],{"class":619,"line":2643},[617,22869,22870],{"class":630}," path",[617,22872,637],{"class":622},[617,22874,640],{"class":622},[617,22876,22877],{"class":643},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap",[617,22879,3111],{"class":622},[617,22881,22882],{"class":619,"line":2652},[617,22883,8013],{"class":622},[617,22885,22886,22888,22890],{"class":619,"line":2661},[617,22887,875],{"class":622},[617,22889,19264],{"class":626},[617,22891,649],{"class":622},[617,22893,22894,22896,22898],{"class":619,"line":2683},[617,22895,885],{"class":622},[617,22897,741],{"class":626},[617,22899,649],{"class":622},[617,22901,22902,22904,22906],{"class":619,"line":2727},[617,22903,712],{"class":622},[617,22905,730],{"class":626},[617,22907,649],{"class":622},[22313,22909,22910],{"type":22315},[594,22911,22912,22913,22918],{},"This component use top level await. Please check the ",[1120,22914,22917],{"href":22915,"rel":22916},"https://vuejs.org/guide/built-ins/suspense.html#suspense",[1124],"Suspense API"," for more info",[484,22920,15374],{"id":15373},[907,22922,22923,22933],{},[910,22924,22925],{},[913,22926,22927,22929,22931],{},[916,22928,8069],{"align":977},[916,22930,5949],{"align":977},[916,22932,921],{"align":977},[926,22934,22935,22949,22962],{},[913,22936,22937,22942,22946],{},[931,22938,22939],{"align":977},[598,22940,22941],{},"hasFinishLoading",[931,22943,22944],{"align":977},[598,22945,15441],{},[931,22947,22948],{"align":977},"Whether all items have finished loading",[913,22950,22951,22955,22959],{},[931,22952,22953],{"align":977},[598,22954,15451],{},[931,22956,22957],{"align":977},[598,22958,5332],{},[931,22960,22961],{"align":977},"Loading progress as percentage (0-100)",[913,22963,22964,22969,22974],{},[931,22965,22966],{"align":977},[598,22967,22968],{},"items",[931,22970,22971],{"align":977},[598,22972,22973],{},"Array",[931,22975,22976],{"align":977},"Array of loading items with their status",[3179,22978,22979],{},[594,22980,22981,22982,22987,22988,22918],{},"This component use top level await it needs to be wrapped on a ",[1120,22983,22985],{"href":22915,"rel":22984},[1124],[598,22986,19264],{},". Please check the ",[1120,22989,22991],{"href":22915,"rel":22990},[1124],[598,22992,22917],{},[1307,22994,22995],{},"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}",{"title":556,"searchDepth":557,"depth":558,"links":22997},[22998,22999],{"id":604,"depth":558,"text":15},{"id":15373,"depth":558,"text":15374},"A composable to track loading progress of assets in TresJS scenes.",{},{"title":149,"description":23000},"PFf0YjSNRSbqzDb9syMCMnsAwscEEcbNUMD8BOfhg6A",{"id":23005,"title":153,"body":23006,"description":23583,"extension":571,"links":572,"meta":23584,"navigation":574,"path":154,"seo":23585,"stem":155,"__hash__":23586},"docs/2.api/3.loaders/use-video-texture.md",{"type":481,"value":23007,"toc":23579},[23008,23013,23016,23023,23025,23462,23464,23567,23576],[2275,23009,23010],{},[23011,23012],"loaders-use-video-texture",{},[594,23014,23015],{},"A composable to easily use videos as textures in your meshes.",[594,23017,23018,23019],{},"This composable is based on the Drei ",[1120,23020,153],{"href":23021,"rel":23022},"https://github.com/pmndrs/drei/tree/master#usevideotexture",[1124],[484,23024,15],{"id":604},[14904,23026,23027,23242],{},[606,23028,23030],{"className":608,"code":23029,"filename":15060,"language":613,"meta":556,"style":556},"\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",[598,23031,23032,23052,23070,23088,23102,23110,23114,23122,23140,23147,23160,23174,23178,23186,23194,23202,23210,23218,23226,23234],{"__ignoreMap":556},[617,23033,23034,23036,23038,23040,23042,23044,23046,23048,23050],{"class":619,"line":557},[617,23035,623],{"class":622},[617,23037,627],{"class":626},[617,23039,631],{"class":630},[617,23041,634],{"class":630},[617,23043,637],{"class":622},[617,23045,640],{"class":622},[617,23047,644],{"class":643},[617,23049,640],{"class":622},[617,23051,649],{"class":622},[617,23053,23054,23056,23058,23060,23062,23064,23066,23068],{"class":619,"line":558},[617,23055,657],{"class":656},[617,23057,660],{"class":622},[617,23059,670],{"class":663},[617,23061,673],{"class":622},[617,23063,676],{"class":656},[617,23065,679],{"class":622},[617,23067,682],{"class":643},[617,23069,685],{"class":622},[617,23071,23072,23074,23076,23078,23080,23082,23084,23086],{"class":619,"line":688},[617,23073,657],{"class":656},[617,23075,660],{"class":622},[617,23077,695],{"class":663},[617,23079,673],{"class":622},[617,23081,676],{"class":656},[617,23083,679],{"class":622},[617,23085,704],{"class":643},[617,23087,685],{"class":622},[617,23089,23090,23092,23094,23096,23098,23100],{"class":619,"line":709},[617,23091,657],{"class":656},[617,23093,15125],{"class":663},[617,23095,15128],{"class":656},[617,23097,679],{"class":622},[617,23099,15133],{"class":643},[617,23101,685],{"class":622},[617,23103,23104,23106,23108],{"class":619,"line":719},[617,23105,712],{"class":622},[617,23107,627],{"class":626},[617,23109,649],{"class":622},[617,23111,23112],{"class":619,"line":725},[617,23113,722],{"emptyLinePlaceholder":574},[617,23115,23116,23118,23120],{"class":619,"line":735},[617,23117,623],{"class":622},[617,23119,730],{"class":626},[617,23121,649],{"class":622},[617,23123,23124,23126,23128,23130,23132,23134,23136,23138],{"class":619,"line":758},[617,23125,738],{"class":622},[617,23127,741],{"class":626},[617,23129,744],{"class":630},[617,23131,637],{"class":622},[617,23133,640],{"class":622},[617,23135,10988],{"class":643},[617,23137,640],{"class":622},[617,23139,649],{"class":622},[617,23141,23142,23144],{"class":619,"line":770},[617,23143,761],{"class":622},[617,23145,23146],{"class":626},"TresPerspectiveCamera\n",[617,23148,23149,23151,23153,23155,23158],{"class":619,"line":780},[617,23150,15235],{"class":630},[617,23152,637],{"class":622},[617,23154,640],{"class":622},[617,23156,23157],{"class":643},"[0, 5, 9]",[617,23159,3111],{"class":622},[617,23161,23162,23165,23167,23169,23172],{"class":619,"line":785},[617,23163,23164],{"class":630}," :look-at",[617,23166,637],{"class":622},[617,23168,640],{"class":622},[617,23170,23171],{"class":643},"[0, 1, 0]",[617,23173,3111],{"class":622},[617,23175,23176],{"class":619,"line":807},[617,23177,15248],{"class":622},[617,23179,23180,23182,23184],{"class":619,"line":611},[617,23181,761],{"class":622},[617,23183,775],{"class":626},[617,23185,767],{"class":622},[617,23187,23188,23190,23192],{"class":619,"line":830},[617,23189,761],{"class":622},[617,23191,19264],{"class":626},[617,23193,649],{"class":622},[617,23195,23196,23198,23200],{"class":619,"line":841},[617,23197,833],{"class":622},[617,23199,15208],{"class":626},[617,23201,767],{"class":622},[617,23203,23204,23206,23208],{"class":619,"line":852},[617,23205,875],{"class":622},[617,23207,19264],{"class":626},[617,23209,649],{"class":622},[617,23211,23212,23214,23216],{"class":619,"line":862},[617,23213,761],{"class":622},[617,23215,8029],{"class":626},[617,23217,767],{"class":622},[617,23219,23220,23222,23224],{"class":619,"line":612},[617,23221,761],{"class":622},[617,23223,8436],{"class":626},[617,23225,767],{"class":622},[617,23227,23228,23230,23232],{"class":619,"line":882},[617,23229,885],{"class":622},[617,23231,741],{"class":626},[617,23233,649],{"class":622},[617,23235,23236,23238,23240],{"class":619,"line":892},[617,23237,712],{"class":622},[617,23239,730],{"class":626},[617,23241,649],{"class":622},[606,23243,23247],{"className":608,"code":23244,"filename":23245,"highlights":23246,"language":613,"meta":556,"style":556},"\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",[688,758,611],[598,23248,23249,23269,23287,23312,23316,23331,23342,23354,23387,23395,23399,23407,23427,23446,23454],{"__ignoreMap":556},[617,23250,23251,23253,23255,23257,23259,23261,23263,23265,23267],{"class":619,"line":557},[617,23252,623],{"class":622},[617,23254,627],{"class":626},[617,23256,631],{"class":630},[617,23258,634],{"class":630},[617,23260,637],{"class":622},[617,23262,640],{"class":622},[617,23264,644],{"class":643},[617,23266,640],{"class":622},[617,23268,649],{"class":622},[617,23270,23271,23273,23275,23277,23279,23281,23283,23285],{"class":619,"line":558},[617,23272,657],{"class":656},[617,23274,660],{"class":622},[617,23276,3852],{"class":663},[617,23278,673],{"class":622},[617,23280,676],{"class":656},[617,23282,679],{"class":622},[617,23284,613],{"class":643},[617,23286,685],{"class":622},[617,23288,23290,23292,23294,23297,23299,23302,23304,23306,23308,23310],{"class":23289,"line":688},[619,653],[617,23291,657],{"class":656},[617,23293,660],{"class":622},[617,23295,23296],{"class":663}," Sphere",[617,23298,667],{"class":622},[617,23300,23301],{"class":663}," useVideoTexture",[617,23303,673],{"class":622},[617,23305,676],{"class":656},[617,23307,679],{"class":622},[617,23309,682],{"class":643},[617,23311,685],{"class":622},[617,23313,23314],{"class":619,"line":709},[617,23315,722],{"emptyLinePlaceholder":574},[617,23317,23318,23320,23323,23325,23327,23329],{"class":619,"line":719},[617,23319,2395],{"class":630},[617,23321,23322],{"class":663}," videoPath ",[617,23324,637],{"class":622},[617,23326,679],{"class":622},[617,23328,16427],{"class":643},[617,23330,685],{"class":622},[617,23332,23333,23335,23337,23340],{"class":619,"line":725},[617,23334,16434],{"class":622},[617,23336,679],{"class":622},[617,23338,23339],{"class":643},"Tresjs/assets/main/textures/video-textures/useVideoTexture.mp4",[617,23341,685],{"class":622},[617,23343,23344,23346,23348,23350,23352],{"class":619,"line":735},[617,23345,2395],{"class":630},[617,23347,2405],{"class":663},[617,23349,637],{"class":622},[617,23351,3852],{"class":2414},[617,23353,6515],{"class":663},[617,23355,23357,23359,23361,23363,23365,23367,23369,23372,23374,23376,23379,23381,23383,23385],{"class":23356,"line":758},[619,653],[617,23358,2697],{"class":663},[617,23360,1126],{"class":622},[617,23362,6950],{"class":663},[617,23364,637],{"class":622},[617,23366,22597],{"class":656},[617,23368,23301],{"class":2414},[617,23370,23371],{"class":663},"(videoPath",[617,23373,667],{"class":622},[617,23375,660],{"class":622},[617,23377,23378],{"class":626}," loop",[617,23380,1198],{"class":622},[617,23382,6705],{"class":4377},[617,23384,673],{"class":622},[617,23386,2428],{"class":663},[617,23388,23389,23391,23393],{"class":619,"line":770},[617,23390,712],{"class":622},[617,23392,627],{"class":626},[617,23394,649],{"class":622},[617,23396,23397],{"class":619,"line":780},[617,23398,722],{"emptyLinePlaceholder":574},[617,23400,23401,23403,23405],{"class":619,"line":785},[617,23402,623],{"class":622},[617,23404,730],{"class":626},[617,23406,649],{"class":622},[617,23408,23409,23412,23414,23416,23418,23420,23423,23425],{"class":619,"line":807},[617,23410,23411],{"class":622}," \u003C",[617,23413,265],{"class":626},[617,23415,1465],{"class":630},[617,23417,637],{"class":622},[617,23419,640],{"class":622},[617,23421,23422],{"class":643},"[0, 2, 0]",[617,23424,640],{"class":622},[617,23426,649],{"class":622},[617,23428,23430,23432,23434,23436,23438,23440,23442,23444],{"class":23429,"line":611},[619,653],[617,23431,833],{"class":622},[617,23433,7452],{"class":626},[617,23435,2714],{"class":630},[617,23437,637],{"class":622},[617,23439,640],{"class":622},[617,23441,2697],{"class":643},[617,23443,640],{"class":622},[617,23445,767],{"class":622},[617,23447,23448,23450,23452],{"class":619,"line":830},[617,23449,875],{"class":622},[617,23451,265],{"class":626},[617,23453,649],{"class":622},[617,23455,23456,23458,23460],{"class":619,"line":841},[617,23457,712],{"class":622},[617,23459,730],{"class":626},[617,23461,649],{"class":622},[484,23463,902],{"id":901},[907,23465,23466,23476],{},[910,23467,23468],{},[913,23469,23470,23472,23474],{},[916,23471,918],{"align":977},[916,23473,921],{"align":977},[916,23475,924],{},[926,23477,23478,23491,23505,23520,23532,23544,23555],{},[913,23479,23480,23484,23487],{},[931,23481,23482],{"align":977},[598,23483,22164],{},[931,23485,23486],{"align":977},"Path to the video.",[931,23488,23489],{},[598,23490,1159],{},[913,23492,23493,23498,23500],{},[931,23494,23495],{"align":977},[598,23496,23497],{},"unsuspend",[931,23499,16266],{"align":977},[931,23501,23502],{},[598,23503,23504],{},"loadedmetadata",[913,23506,23507,23512,23515],{},[931,23508,23509],{"align":977},[598,23510,23511],{},"crossOrigin",[931,23513,23514],{"align":977},"Whether to use CORS to fetch the related video.",[931,23516,23517],{},[598,23518,23519],{},"Anonymous",[913,23521,23522,23527,23530],{},[931,23523,23524],{"align":977},[598,23525,23526],{},"muted",[931,23528,23529],{"align":977},"Whether to set the audio silenced.",[931,23531,941],{},[913,23533,23534,23539,23542],{},[931,23535,23536],{"align":977},[598,23537,23538],{},"loop",[931,23540,23541],{"align":977},"Automatically seek back to the start upon reaching the end of the video.",[931,23543,941],{},[913,23545,23546,23550,23553],{},[931,23547,23548],{"align":977},[598,23549,12360],{},[931,23551,23552],{"align":977},"To play to the video once loaded or not.",[931,23554,941],{},[913,23556,23557,23562,23565],{},[931,23558,23559],{"align":977},[598,23560,23561],{},"playsInline",[931,23563,23564],{"align":977},"To be play the video inline or not.",[931,23566,941],{},[2193,23568,23569],{},[2196,23570,23571,23572,23575],{},"Any other attribute for a ",[598,23573,23574],{},"\u003Cvideo>"," tag is accepted and will automatically set",[1307,23577,23578],{},"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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":556,"searchDepth":557,"depth":558,"links":23580},[23581,23582],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},"A composable to load video textures in TresJS scenes.",{},{"title":153,"description":23583},"rMFSi2yAMooLExAPvBtE0Q5kUzTXUwdWiqixCh7u4KA",[23588,23994,24593,25035,25206,25932,26708,26992],{"id":23589,"title":163,"body":23590,"description":23990,"extension":571,"links":572,"meta":23991,"navigation":574,"path":164,"seo":23992,"stem":165,"__hash__":23993},"docs/2.api/4.materials/custom-shader-material.md",{"type":481,"value":23591,"toc":23986},[23592,23597,23617,23619,23967,23969,23983],[2275,23593,23594],{},[23595,23596],"materials-custom-shader-material",{},[594,23598,2756,23599,23601,23602,23605,23606,23613,23614,1126],{},[598,23600,7297],{}," package provides ",[598,23603,23604],{},"\u003CTresCustomShaderMaterial />"," component which is a wrapper around the ",[1120,23607,23610],{"href":23608,"rel":23609},"https://github.com/FarazzShaikh/THREE-CustomShaderMaterial",[1124],[598,23611,23612],{},"three-custom-shader-material"," class. As states in the repo, it ",[1654,23615,23616],{},"\"lets you extend Three.js' material library with your own Vertex and Fragment shaders\"",[484,23618,15],{"id":604},[606,23620,23623],{"className":608,"code":23621,"highlights":23622,"language":613,"meta":556,"style":556},"\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",[558,611,830,841,852,862,612,882,892,2605,2614,2634,2643,2652,2661,2683],[598,23624,23625,23645,23665,23683,23687,23700,23708,23712,23720,23728,23746,23754,23762,23770,23785,23800,23815,23827,23833,23839,23845,23853,23867,23882,23897,23903,23917,23931,23935,23943,23951,23959],{"__ignoreMap":556},[617,23626,23627,23629,23631,23633,23635,23637,23639,23641,23643],{"class":619,"line":557},[617,23628,623],{"class":622},[617,23630,627],{"class":626},[617,23632,631],{"class":630},[617,23634,634],{"class":630},[617,23636,637],{"class":622},[617,23638,640],{"class":622},[617,23640,644],{"class":643},[617,23642,640],{"class":622},[617,23644,649],{"class":622},[617,23646,23648,23650,23652,23655,23657,23659,23661,23663],{"class":23647,"line":558},[619,653],[617,23649,657],{"class":656},[617,23651,660],{"class":622},[617,23653,23654],{"class":663}," TresCustomShaderMaterial",[617,23656,673],{"class":622},[617,23658,676],{"class":656},[617,23660,679],{"class":622},[617,23662,682],{"class":643},[617,23664,685],{"class":622},[617,23666,23667,23669,23671,23673,23675,23677,23679,23681],{"class":619,"line":688},[617,23668,657],{"class":656},[617,23670,660],{"class":622},[617,23672,3478],{"class":663},[617,23674,673],{"class":622},[617,23676,676],{"class":656},[617,23678,679],{"class":622},[617,23680,613],{"class":643},[617,23682,685],{"class":622},[617,23684,23685],{"class":619,"line":709},[617,23686,722],{"emptyLinePlaceholder":574},[617,23688,23689,23691,23694,23696,23698],{"class":619,"line":719},[617,23690,2395],{"class":630},[617,23692,23693],{"class":663}," customShaderMaterialRef ",[617,23695,637],{"class":622},[617,23697,3478],{"class":2414},[617,23699,6515],{"class":663},[617,23701,23702,23704,23706],{"class":619,"line":725},[617,23703,712],{"class":622},[617,23705,627],{"class":626},[617,23707,649],{"class":622},[617,23709,23710],{"class":619,"line":735},[617,23711,722],{"emptyLinePlaceholder":574},[617,23713,23714,23716,23718],{"class":619,"line":758},[617,23715,623],{"class":622},[617,23717,730],{"class":626},[617,23719,649],{"class":622},[617,23721,23722,23724,23726],{"class":619,"line":770},[617,23723,738],{"class":622},[617,23725,741],{"class":626},[617,23727,649],{"class":622},[617,23729,23730,23732,23734,23736,23738,23740,23742,23744],{"class":619,"line":780},[617,23731,761],{"class":622},[617,23733,764],{"class":626},[617,23735,1465],{"class":630},[617,23737,637],{"class":622},[617,23739,640],{"class":622},[617,23741,11330],{"class":643},[617,23743,640],{"class":622},[617,23745,767],{"class":622},[617,23747,23748,23750,23752],{"class":619,"line":785},[617,23749,761],{"class":622},[617,23751,836],{"class":626},[617,23753,649],{"class":622},[617,23755,23756,23758,23760],{"class":619,"line":807},[617,23757,833],{"class":622},[617,23759,847],{"class":626},[617,23761,767],{"class":622},[617,23763,23765,23767],{"class":23764,"line":611},[619,653],[617,23766,833],{"class":622},[617,23768,23769],{"class":626},"TresCustomShaderMaterial\n",[617,23771,23773,23776,23778,23780,23783],{"class":23772,"line":830},[619,653],[617,23774,23775],{"class":630}," ref",[617,23777,637],{"class":622},[617,23779,640],{"class":622},[617,23781,23782],{"class":643},"customShaderMaterialRef",[617,23784,3111],{"class":622},[617,23786,23788,23791,23793,23795,23798],{"class":23787,"line":841},[619,653],[617,23789,23790],{"class":630}," :vertex-shader",[617,23792,637],{"class":622},[617,23794,640],{"class":622},[617,23796,23797],{"class":643},"vertexShader",[617,23799,3111],{"class":622},[617,23801,23803,23806,23808,23810,23813],{"class":23802,"line":852},[619,653],[617,23804,23805],{"class":630}," :fragment-shader",[617,23807,637],{"class":622},[617,23809,640],{"class":622},[617,23811,23812],{"class":643},"fragmentShader",[617,23814,3111],{"class":622},[617,23816,23818,23821,23823,23825],{"class":23817,"line":862},[619,653],[617,23819,23820],{"class":630}," :uniforms",[617,23822,637],{"class":622},[617,23824,640],{"class":622},[617,23826,3240],{"class":643},[617,23828,23830],{"class":23829,"line":612},[619,653],[617,23831,23832],{"class":643}," u_time: { value: 0 },\n",[617,23834,23836],{"class":23835,"line":882},[619,653],[617,23837,23838],{"class":643}," u_color: { value: new THREE.Color(0.2, 0.0, 0.1) },\n",[617,23840,23842],{"class":23841,"line":892},[619,653],[617,23843,23844],{"class":643}," u_resolution: { value: new THREE.Vector2() }\n",[617,23846,23848,23851],{"class":23847,"line":2605},[619,653],[617,23849,23850],{"class":643}," }",[617,23852,3111],{"class":622},[617,23854,23856,23859,23861,23863,23865],{"class":23855,"line":2614},[619,653],[617,23857,23858],{"class":630}," :transparent",[617,23860,637],{"class":622},[617,23862,640],{"class":622},[617,23864,941],{"class":643},[617,23866,3111],{"class":622},[617,23868,23870,23873,23875,23877,23880],{"class":23869,"line":2634},[619,653],[617,23871,23872],{"class":630}," :side",[617,23874,637],{"class":622},[617,23876,640],{"class":622},[617,23878,23879],{"class":643},"THREE.DoubleSide",[617,23881,3111],{"class":622},[617,23883,23885,23888,23890,23892,23895],{"class":23884,"line":2643},[619,653],[617,23886,23887],{"class":630}," base-material",[617,23889,637],{"class":622},[617,23891,640],{"class":622},[617,23893,23894],{"class":643},"MeshLambertMaterial",[617,23896,3111],{"class":622},[617,23898,23900],{"class":23899,"line":2652},[619,653],[617,23901,23902],{"class":630}," silent\n",[617,23904,23906,23909,23911,23913,23915],{"class":23905,"line":2661},[619,653],[617,23907,23908],{"class":630}," :map",[617,23910,637],{"class":622},[617,23912,640],{"class":622},[617,23914,2697],{"class":643},[617,23916,3111],{"class":622},[617,23918,23920,23922,23924,23926,23929],{"class":23919,"line":2683},[619,653],[617,23921,20847],{"class":630},[617,23923,637],{"class":622},[617,23925,640],{"class":622},[617,23927,23928],{"class":643},"0xff0000",[617,23930,3111],{"class":622},[617,23932,23933],{"class":619,"line":2727},[617,23934,8013],{"class":622},[617,23936,23937,23939,23941],{"class":619,"line":2736},[617,23938,875],{"class":622},[617,23940,836],{"class":626},[617,23942,649],{"class":622},[617,23944,23945,23947,23949],{"class":619,"line":2745},[617,23946,761],{"class":622},[617,23948,8436],{"class":626},[617,23950,767],{"class":622},[617,23952,23953,23955,23957],{"class":619,"line":3902},[617,23954,885],{"class":622},[617,23956,741],{"class":626},[617,23958,649],{"class":622},[617,23960,23961,23963,23965],{"class":619,"line":3933},[617,23962,712],{"class":622},[617,23964,730],{"class":626},[617,23966,649],{"class":622},[484,23968,902],{"id":901},[594,23970,23971,23972,23975,23976,23978,23979,1126],{},"Being a wrapper around the ",[598,23973,23974],{},"CustomShaderMaterial"," class, the ",[598,23977,23604],{}," component accepts all the props that the class does. You can find the full list of props in the ",[1120,23980,23982],{"href":23608,"rel":23981},[1124],"official repo",[1307,23984,23985],{},"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":556,"searchDepth":557,"depth":558,"links":23987},[23988,23989],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},"Extends Three.js' material library with your own Vertex and Fragment shaders.",{},{"title":163,"description":23990},"_HOuAJQ5DQ9SpzOn3sJ32tgM-mbRXc16CsR6Pu3n5Bg",{"id":23995,"title":167,"body":23996,"description":24589,"extension":571,"links":572,"meta":24590,"navigation":574,"path":168,"seo":24591,"stem":169,"__hash__":24592},"docs/2.api/4.materials/glass-material.md",{"type":481,"value":23997,"toc":24580},[23998,24003,24014,24016,24020,24216,24218,24225,24229,24565,24569,24577],[2275,23999,24000],{},[24001,24002],"materials-glass-material",{},[594,24004,2756,24005,24007,24008,24011,24012,1126],{},[598,24006,7297],{}," package provides a new",[598,24009,24010],{},"\u003CMeshGlassMaterial />"," component that makes a geometry look like glass. This is achieved by re-defining the ",[598,24013,2978],{},[484,24015,15],{"id":604},[4031,24017,24019],{"id":24018},"you-can-use-it-like-you-normally-do-with-tresjs","You can use it like you normally do with TresJs",[606,24021,24024],{"className":608,"code":24022,"highlights":24023,"language":613,"meta":556,"style":556},"\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",[558,780],[598,24025,24026,24046,24065,24084,24092,24096,24104,24112,24140,24148,24157,24166,24174,24182,24200,24208],{"__ignoreMap":556},[617,24027,24028,24030,24032,24034,24036,24038,24040,24042,24044],{"class":619,"line":557},[617,24029,623],{"class":622},[617,24031,627],{"class":626},[617,24033,631],{"class":630},[617,24035,634],{"class":630},[617,24037,637],{"class":622},[617,24039,640],{"class":622},[617,24041,644],{"class":643},[617,24043,640],{"class":622},[617,24045,649],{"class":622},[617,24047,24049,24051,24053,24055,24057,24059,24061,24063],{"class":24048,"line":558},[619,653],[617,24050,657],{"class":656},[617,24052,660],{"class":622},[617,24054,695],{"class":663},[617,24056,673],{"class":622},[617,24058,676],{"class":656},[617,24060,679],{"class":622},[617,24062,704],{"class":643},[617,24064,685],{"class":622},[617,24066,24067,24069,24071,24074,24076,24078,24080,24082],{"class":619,"line":688},[617,24068,657],{"class":656},[617,24070,660],{"class":622},[617,24072,24073],{"class":663}," MeshGlassMaterial",[617,24075,673],{"class":622},[617,24077,676],{"class":656},[617,24079,679],{"class":622},[617,24081,682],{"class":643},[617,24083,685],{"class":622},[617,24085,24086,24088,24090],{"class":619,"line":709},[617,24087,712],{"class":622},[617,24089,627],{"class":626},[617,24091,649],{"class":622},[617,24093,24094],{"class":619,"line":719},[617,24095,722],{"emptyLinePlaceholder":574},[617,24097,24098,24100,24102],{"class":619,"line":725},[617,24099,623],{"class":622},[617,24101,730],{"class":626},[617,24103,649],{"class":622},[617,24105,24106,24108,24110],{"class":619,"line":735},[617,24107,738],{"class":622},[617,24109,741],{"class":626},[617,24111,649],{"class":622},[617,24113,24114,24116,24118,24120,24122,24124,24126,24128,24130,24132,24134,24136,24138],{"class":619,"line":758},[617,24115,761],{"class":622},[617,24117,764],{"class":626},[617,24119,1465],{"class":630},[617,24121,637],{"class":622},[617,24123,640],{"class":622},[617,24125,11330],{"class":643},[617,24127,640],{"class":622},[617,24129,8371],{"class":630},[617,24131,637],{"class":622},[617,24133,640],{"class":622},[617,24135,8378],{"class":643},[617,24137,640],{"class":622},[617,24139,767],{"class":622},[617,24141,24142,24144,24146],{"class":619,"line":770},[617,24143,761],{"class":622},[617,24145,836],{"class":626},[617,24147,649],{"class":622},[617,24149,24151,24153,24155],{"class":24150,"line":780},[619,653],[617,24152,833],{"class":622},[617,24154,9912],{"class":626},[617,24156,767],{"class":622},[617,24158,24159,24161,24164],{"class":619,"line":785},[617,24160,833],{"class":622},[617,24162,24163],{"class":626},"MeshGlassMaterial",[617,24165,767],{"class":622},[617,24167,24168,24170,24172],{"class":619,"line":807},[617,24169,875],{"class":622},[617,24171,836],{"class":626},[617,24173,649],{"class":622},[617,24175,24176,24178,24180],{"class":619,"line":611},[617,24177,761],{"class":622},[617,24179,8436],{"class":626},[617,24181,767],{"class":622},[617,24183,24184,24186,24188,24190,24192,24194,24196,24198],{"class":619,"line":830},[617,24185,761],{"class":622},[617,24187,8455],{"class":626},[617,24189,1465],{"class":630},[617,24191,637],{"class":622},[617,24193,640],{"class":622},[617,24195,11412],{"class":643},[617,24197,640],{"class":622},[617,24199,767],{"class":622},[617,24201,24202,24204,24206],{"class":619,"line":841},[617,24203,885],{"class":622},[617,24205,741],{"class":626},[617,24207,649],{"class":622},[617,24209,24210,24212,24214],{"class":619,"line":852},[617,24211,712],{"class":622},[617,24213,730],{"class":626},[617,24215,649],{"class":622},[484,24217,902],{"id":901},[594,24219,24220,24221,24224],{},"No props are required. The component extends ",[598,24222,24223],{},"THREE.MeshPhysicalMaterial"," and accepts all the same props plus additional reflection-specific properties.",[4031,24226,24228],{"id":24227},"you-can-also-replace-the-material-of-an-existing-mesh-like-this","You can also replace the material of an existing mesh like this:",[606,24230,24233],{"className":608,"code":24231,"highlights":24232,"language":613,"meta":556,"style":556},"\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",[709,725,735,758,770,780,785,807,611,830,841,892],[598,24234,24235,24255,24281,24299,24322,24326,24340,24353,24358,24375,24381,24406,24411,24417,24443,24450,24458,24466,24474,24482,24502,24510,24515,24533,24541,24549,24557],{"__ignoreMap":556},[617,24236,24237,24239,24241,24243,24245,24247,24249,24251,24253],{"class":619,"line":557},[617,24238,623],{"class":622},[617,24240,627],{"class":626},[617,24242,631],{"class":630},[617,24244,634],{"class":630},[617,24246,637],{"class":622},[617,24248,640],{"class":622},[617,24250,644],{"class":643},[617,24252,640],{"class":622},[617,24254,649],{"class":622},[617,24256,24257,24259,24261,24263,24265,24267,24269,24271,24273,24275,24277,24279],{"class":619,"line":558},[617,24258,657],{"class":656},[617,24260,660],{"class":622},[617,24262,3852],{"class":663},[617,24264,667],{"class":622},[617,24266,3478],{"class":663},[617,24268,667],{"class":622},[617,24270,10190],{"class":663},[617,24272,673],{"class":622},[617,24274,676],{"class":656},[617,24276,679],{"class":622},[617,24278,613],{"class":643},[617,24280,685],{"class":622},[617,24282,24283,24285,24287,24289,24291,24293,24295,24297],{"class":619,"line":688},[617,24284,657],{"class":656},[617,24286,660],{"class":622},[617,24288,695],{"class":663},[617,24290,673],{"class":622},[617,24292,676],{"class":656},[617,24294,679],{"class":622},[617,24296,704],{"class":643},[617,24298,685],{"class":622},[617,24300,24302,24304,24306,24308,24310,24312,24314,24316,24318,24320],{"class":24301,"line":709},[619,653],[617,24303,657],{"class":656},[617,24305,660],{"class":622},[617,24307,24073],{"class":663},[617,24309,667],{"class":622},[617,24311,1377],{"class":663},[617,24313,673],{"class":622},[617,24315,676],{"class":656},[617,24317,679],{"class":622},[617,24319,682],{"class":643},[617,24321,685],{"class":622},[617,24323,24324],{"class":619,"line":719},[617,24325,722],{"emptyLinePlaceholder":574},[617,24327,24329,24331,24334,24336,24338],{"class":24328,"line":725},[619,653],[617,24330,2395],{"class":630},[617,24332,24333],{"class":663}," glassMaterialRef ",[617,24335,637],{"class":622},[617,24337,3478],{"class":2414},[617,24339,6515],{"class":663},[617,24341,24343,24345,24347,24349,24351],{"class":24342,"line":735},[619,653],[617,24344,2395],{"class":630},[617,24346,14232],{"class":663},[617,24348,637],{"class":622},[617,24350,3478],{"class":2414},[617,24352,6515],{"class":663},[617,24354,24356],{"class":24355,"line":758},[619,653],[617,24357,722],{"emptyLinePlaceholder":574},[617,24359,24361,24363,24366,24368,24371,24373],{"class":24360,"line":770},[619,653],[617,24362,10239],{"class":2414},[617,24364,24365],{"class":663},"(glassMaterialRef",[617,24367,667],{"class":622},[617,24369,24370],{"class":6818}," value",[617,24372,3657],{"class":630},[617,24374,1184],{"class":622},[617,24376,24378],{"class":24377,"line":780},[619,653],[617,24379,24380],{"class":1189}," // For good practice we dispose the old material\n",[617,24382,24384,24387,24389,24391,24393,24396,24398,24400,24402,24404],{"class":24383,"line":785},[619,653],[617,24385,24386],{"class":663}," boxRef",[617,24388,1126],{"class":622},[617,24390,3665],{"class":663},[617,24392,1126],{"class":622},[617,24394,24395],{"class":663},"instance",[617,24397,1126],{"class":622},[617,24399,5180],{"class":663},[617,24401,1126],{"class":622},[617,24403,20391],{"class":2414},[617,24405,6515],{"class":626},[617,24407,24409],{"class":24408,"line":807},[619,653],[617,24410,722],{"emptyLinePlaceholder":574},[617,24412,24414],{"class":24413,"line":611},[619,653],[617,24415,24416],{"class":1189}," // We assign the new MeshGlassMaterialClass\n",[617,24418,24420,24422,24424,24426,24428,24430,24432,24434,24436,24438,24440],{"class":24419,"line":830},[619,653],[617,24421,24386],{"class":663},[617,24423,1126],{"class":622},[617,24425,3665],{"class":663},[617,24427,1126],{"class":622},[617,24429,24395],{"class":663},[617,24431,1126],{"class":622},[617,24433,5180],{"class":663},[617,24435,2411],{"class":622},[617,24437,24370],{"class":663},[617,24439,1126],{"class":622},[617,24441,24442],{"class":663},"MeshGlassMaterialClass\n",[617,24444,24446,24448],{"class":24445,"line":841},[619,653],[617,24447,2408],{"class":622},[617,24449,2428],{"class":663},[617,24451,24452,24454,24456],{"class":619,"line":852},[617,24453,712],{"class":622},[617,24455,627],{"class":626},[617,24457,649],{"class":622},[617,24459,24460,24462,24464],{"class":619,"line":862},[617,24461,623],{"class":622},[617,24463,730],{"class":626},[617,24465,649],{"class":622},[617,24467,24468,24470,24472],{"class":619,"line":612},[617,24469,738],{"class":622},[617,24471,836],{"class":626},[617,24473,649],{"class":622},[617,24475,24476,24478,24480],{"class":619,"line":882},[617,24477,761],{"class":622},[617,24479,9912],{"class":626},[617,24481,767],{"class":622},[617,24483,24485,24487,24489,24491,24493,24495,24498,24500],{"class":24484,"line":892},[619,653],[617,24486,761],{"class":622},[617,24488,24163],{"class":626},[617,24490,3852],{"class":630},[617,24492,637],{"class":622},[617,24494,640],{"class":622},[617,24496,24497],{"class":643},"glassMaterialRef",[617,24499,640],{"class":622},[617,24501,767],{"class":622},[617,24503,24504,24506,24508],{"class":619,"line":2605},[617,24505,885],{"class":622},[617,24507,836],{"class":626},[617,24509,649],{"class":622},[617,24511,24512],{"class":619,"line":2614},[617,24513,24514],{"class":1189}," \u003C!-- Mesh to be replaced -->\n",[617,24516,24517,24519,24521,24523,24525,24527,24529,24531],{"class":619,"line":2634},[617,24518,738],{"class":622},[617,24520,836],{"class":626},[617,24522,3852],{"class":630},[617,24524,637],{"class":622},[617,24526,640],{"class":622},[617,24528,14308],{"class":643},[617,24530,640],{"class":622},[617,24532,649],{"class":622},[617,24534,24535,24537,24539],{"class":619,"line":2643},[617,24536,761],{"class":622},[617,24538,847],{"class":626},[617,24540,767],{"class":622},[617,24542,24543,24545,24547],{"class":619,"line":2652},[617,24544,761],{"class":622},[617,24546,2971],{"class":626},[617,24548,12045],{"class":622},[617,24550,24551,24553,24555],{"class":619,"line":2661},[617,24552,885],{"class":622},[617,24554,836],{"class":626},[617,24556,649],{"class":622},[617,24558,24559,24561,24563],{"class":619,"line":2683},[617,24560,712],{"class":622},[617,24562,730],{"class":626},[617,24564,649],{"class":622},[484,24566,24568],{"id":24567},"tips","Tips",[2193,24570,24571,24574],{},[2196,24572,24573],{},"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",[2196,24575,24576],{},"Another good option is to provide a normal texture as clearcoatNormalMap to add different results",[1307,24578,24579],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":556,"searchDepth":557,"depth":558,"links":24581},[24582,24585,24588],{"id":604,"depth":558,"text":15,"children":24583},[24584],{"id":24018,"depth":688,"text":24019},{"id":901,"depth":558,"text":902,"children":24586},[24587],{"id":24227,"depth":688,"text":24228},{"id":24567,"depth":558,"text":24568},"Makes a geometry look like glass by re-defining the MeshPhysicalMaterial.",{},{"title":167,"description":24589},"oLHskfHH-pJ6DBy0QJ2dNa5baMGuKNpEQRJ-5FVmwvI",{"id":24594,"title":171,"body":24595,"description":25031,"extension":571,"links":572,"meta":25032,"navigation":574,"path":172,"seo":25033,"stem":173,"__hash__":25034},"docs/2.api/4.materials/holographic-material.md",{"type":481,"value":24596,"toc":25026},[24597,24602,24606,24609,24612,24617,24619,24800,24802,25024],[588,24598,24599],{},[24600,24601],"materials-holographic-material",{},[484,24603,24605],{"id":24604},"a-simple-to-use-holographic-material-for-tresjs","A simple to use holographic material for TresJS",[594,24607,24608],{},"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.",[594,24610,24611],{},"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.",[1985,24613,24614],{},[594,24615,24616],{},"This component ports Anderson Mancini's threejs-vanilla-holographic-material to TresJS. All credit goes to him.",[484,24618,15],{"id":604},[606,24620,24623],{"className":608,"code":24621,"highlights":24622,"language":613,"meta":556,"style":556},"\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",[688,780],[598,24624,24625,24645,24663,24687,24691,24699,24707,24715,24740,24758,24768,24776,24784,24792],{"__ignoreMap":556},[617,24626,24627,24629,24631,24633,24635,24637,24639,24641,24643],{"class":619,"line":557},[617,24628,623],{"class":622},[617,24630,627],{"class":626},[617,24632,631],{"class":630},[617,24634,634],{"class":630},[617,24636,637],{"class":622},[617,24638,640],{"class":622},[617,24640,644],{"class":643},[617,24642,640],{"class":622},[617,24644,649],{"class":622},[617,24646,24647,24649,24651,24653,24655,24657,24659,24661],{"class":619,"line":558},[617,24648,657],{"class":656},[617,24650,660],{"class":622},[617,24652,695],{"class":663},[617,24654,673],{"class":622},[617,24656,676],{"class":656},[617,24658,679],{"class":622},[617,24660,704],{"class":643},[617,24662,685],{"class":622},[617,24664,24666,24668,24670,24673,24675,24677,24679,24681,24683,24685],{"class":24665,"line":688},[619,653],[617,24667,657],{"class":656},[617,24669,660],{"class":622},[617,24671,24672],{"class":663}," HolographicMaterial",[617,24674,667],{"class":622},[617,24676,23296],{"class":663},[617,24678,673],{"class":622},[617,24680,676],{"class":656},[617,24682,679],{"class":622},[617,24684,682],{"class":643},[617,24686,685],{"class":622},[617,24688,24689],{"class":619,"line":709},[617,24690,722],{"emptyLinePlaceholder":574},[617,24692,24693,24695,24697],{"class":619,"line":719},[617,24694,712],{"class":622},[617,24696,627],{"class":626},[617,24698,649],{"class":622},[617,24700,24701,24703,24705],{"class":619,"line":725},[617,24702,623],{"class":622},[617,24704,730],{"class":626},[617,24706,649],{"class":622},[617,24708,24709,24711,24713],{"class":619,"line":735},[617,24710,738],{"class":622},[617,24712,741],{"class":626},[617,24714,649],{"class":622},[617,24716,24717,24719,24721,24723,24725,24727,24729,24731,24733,24735,24738],{"class":619,"line":758},[617,24718,761],{"class":622},[617,24720,764],{"class":626},[617,24722,1465],{"class":630},[617,24724,637],{"class":622},[617,24726,640],{"class":622},[617,24728,11330],{"class":643},[617,24730,640],{"class":622},[617,24732,8371],{"class":630},[617,24734,637],{"class":622},[617,24736,24737],{"class":643},"[0,0,0]",[617,24739,767],{"class":622},[617,24741,24742,24744,24746,24748,24750,24752,24754,24756],{"class":619,"line":770},[617,24743,761],{"class":622},[617,24745,265],{"class":626},[617,24747,793],{"class":630},[617,24749,637],{"class":622},[617,24751,640],{"class":622},[617,24753,1926],{"class":643},[617,24755,640],{"class":622},[617,24757,649],{"class":622},[617,24759,24761,24763,24766],{"class":24760,"line":780},[619,653],[617,24762,833],{"class":622},[617,24764,24765],{"class":626},"HolographicMaterial",[617,24767,767],{"class":622},[617,24769,24770,24772,24774],{"class":619,"line":785},[617,24771,875],{"class":622},[617,24773,265],{"class":626},[617,24775,649],{"class":622},[617,24777,24778,24780,24782],{"class":619,"line":807},[617,24779,761],{"class":622},[617,24781,8436],{"class":626},[617,24783,767],{"class":622},[617,24785,24786,24788,24790],{"class":619,"line":611},[617,24787,885],{"class":622},[617,24789,741],{"class":626},[617,24791,649],{"class":622},[617,24793,24794,24796,24798],{"class":619,"line":830},[617,24795,712],{"class":622},[617,24797,730],{"class":626},[617,24799,649],{"class":622},[484,24801,902],{"id":901},[907,24803,24804,24817],{},[910,24805,24806],{},[913,24807,24808,24810,24812,24814],{},[916,24809,918],{"align":977},[916,24811,921],{"align":977},[916,24813,5949],{},[916,24815,24816],{},"default",[926,24818,24819,24838,24856,24875,24894,24912,24931,24950,24968,24986,25004],{},[913,24820,24821,24826,24829,24833],{},[931,24822,24823],{"align":977},[1649,24824,24825],{},"fresnelAmount",[931,24827,24828],{"align":977},"Value of the Fresnel effect. Ranges from 0.0 to 1.0.",[931,24830,24831],{},[598,24832,10064],{},[931,24834,24835],{},[598,24836,24837],{},"0.45",[913,24839,24840,24845,24848,24852],{},[931,24841,24842],{"align":977},[1649,24843,24844],{},"fresnelOpacity",[931,24846,24847],{"align":977},"Opacity of the Fresnel effect. Ranges from 0.0 to 1.0.",[931,24849,24850],{},[598,24851,10064],{},[931,24853,24854],{},[598,24855,11711],{},[913,24857,24858,24863,24866,24870],{},[931,24859,24860],{"align":977},[1649,24861,24862],{},"scanlineSize",[931,24864,24865],{"align":977},"Size of the scanlines. Ranges from 1 to 15.",[931,24867,24868],{},[598,24869,10064],{},[931,24871,24872],{},[598,24873,24874],{},"8.0",[913,24876,24877,24882,24885,24889],{},[931,24878,24879],{"align":977},[1649,24880,24881],{},"hologramBrightness",[931,24883,24884],{"align":977},"Brightness of the hologram. Ranges from 0.0 to 2.0.",[931,24886,24887],{},[598,24888,10064],{},[931,24890,24891],{},[598,24892,24893],{},"1.2",[913,24895,24896,24901,24904,24908],{},[931,24897,24898],{"align":977},[1649,24899,24900],{},"signalSpeed",[931,24902,24903],{"align":977},"Speed of the signal effect. Ranges from 0.0 to 2.0.",[931,24905,24906],{},[598,24907,10064],{},[931,24909,24910],{},[598,24911,24837],{},[913,24913,24914,24919,24922,24926],{},[931,24915,24916],{"align":977},[1649,24917,24918],{},"hologramColor",[931,24920,24921],{"align":977},"Specifies the color of the hologram.",[931,24923,24924],{},[598,24925,10086],{},[931,24927,24928],{},[598,24929,24930],{},"\"#00d5ff\"",[913,24932,24933,24938,24941,24946],{},[931,24934,24935],{"align":977},[1649,24936,24937],{},"enableBlinking",[931,24939,24940],{"align":977},"Enables or disables the blinking effect.",[931,24942,24943],{},[598,24944,24945],{},"Boolean",[931,24947,24948],{},[598,24949,941],{},[913,24951,24952,24957,24960,24964],{},[931,24953,24954],{"align":977},[1649,24955,24956],{},"hologramOpacity",[931,24958,24959],{"align":977},"Specifies the opacity of the hologram.",[931,24961,24962],{},[598,24963,10064],{},[931,24965,24966],{},[598,24967,11711],{},[913,24969,24970,24975,24978,24982],{},[931,24971,24972],{"align":977},[1649,24973,24974],{},"blinkFresnelOnly",[931,24976,24977],{"align":977},"Enables or disables the blinking effect for the Fresnel only.",[931,24979,24980],{},[598,24981,24945],{},[931,24983,24984],{},[598,24985,941],{},[913,24987,24988,24993,24996,25000],{},[931,24989,24990],{"align":977},[1649,24991,24992],{},"enableAdditive",[931,24994,24995],{"align":977},"Enables or disables the Additive Blend Mode.",[931,24997,24998],{},[598,24999,24945],{},[931,25001,25002],{},[598,25003,941],{},[913,25005,25006,25011,25014,25019],{},[931,25007,25008],{"align":977},[1649,25009,25010],{},"side",[931,25012,25013],{"align":977},"Specifies side for the material, as String.",[931,25015,25016],{},[598,25017,25018],{},"THREE.FrontSide, THREE.BackSide, THREE.DoubleSide",[931,25020,25021],{},[598,25022,25023],{},"FrontSide",[1307,25025,1624],{},{"title":556,"searchDepth":557,"depth":558,"links":25027},[25028,25029,25030],{"id":24604,"depth":558,"text":24605},{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},"A simple to use holographic material for TresJS with vibrant colors, dynamic scanlines, and futuristic brilliance.",{},{"title":171,"description":25031},"xIEPkRUmuLTvzMRufIpFP12igw1vvqL43oWczW_i5i4",{"id":25036,"title":175,"body":25037,"description":25202,"extension":571,"links":572,"meta":25203,"navigation":574,"path":176,"seo":25204,"stem":177,"__hash__":25205},"docs/2.api/4.materials/mesh-discard-material.md",{"type":481,"value":25038,"toc":25199},[25039,25045,25047,25197],[594,25040,25041,25044],{},[598,25042,25043],{},"\u003CMeshDiscardMaterial />"," hides the object it's attached to. The object's shadows and children will be rendered.",[484,25046,15],{"id":604},[606,25048,25051],{"className":608,"code":25049,"highlights":25050,"language":613,"meta":556,"style":556},"\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",[688,785],[598,25052,25053,25073,25091,25111,25119,25123,25131,25139,25147,25155,25163,25173,25181,25189],{"__ignoreMap":556},[617,25054,25055,25057,25059,25061,25063,25065,25067,25069,25071],{"class":619,"line":557},[617,25056,623],{"class":622},[617,25058,627],{"class":626},[617,25060,631],{"class":630},[617,25062,634],{"class":630},[617,25064,637],{"class":622},[617,25066,640],{"class":622},[617,25068,644],{"class":643},[617,25070,640],{"class":622},[617,25072,649],{"class":622},[617,25074,25075,25077,25079,25081,25083,25085,25087,25089],{"class":619,"line":558},[617,25076,657],{"class":656},[617,25078,660],{"class":622},[617,25080,695],{"class":663},[617,25082,673],{"class":622},[617,25084,676],{"class":656},[617,25086,679],{"class":622},[617,25088,704],{"class":643},[617,25090,685],{"class":622},[617,25092,25094,25096,25098,25101,25103,25105,25107,25109],{"class":25093,"line":688},[619,653],[617,25095,657],{"class":656},[617,25097,660],{"class":622},[617,25099,25100],{"class":663}," MeshDiscardMaterial",[617,25102,673],{"class":622},[617,25104,676],{"class":656},[617,25106,679],{"class":622},[617,25108,682],{"class":643},[617,25110,685],{"class":622},[617,25112,25113,25115,25117],{"class":619,"line":709},[617,25114,712],{"class":622},[617,25116,627],{"class":626},[617,25118,649],{"class":622},[617,25120,25121],{"class":619,"line":719},[617,25122,722],{"emptyLinePlaceholder":574},[617,25124,25125,25127,25129],{"class":619,"line":725},[617,25126,623],{"class":622},[617,25128,730],{"class":626},[617,25130,649],{"class":622},[617,25132,25133,25135,25137],{"class":619,"line":735},[617,25134,738],{"class":622},[617,25136,741],{"class":626},[617,25138,649],{"class":622},[617,25140,25141,25143,25145],{"class":619,"line":758},[617,25142,761],{"class":622},[617,25144,764],{"class":626},[617,25146,767],{"class":622},[617,25148,25149,25151,25153],{"class":619,"line":770},[617,25150,761],{"class":622},[617,25152,836],{"class":626},[617,25154,649],{"class":622},[617,25156,25157,25159,25161],{"class":619,"line":780},[617,25158,833],{"class":622},[617,25160,847],{"class":626},[617,25162,767],{"class":622},[617,25164,25166,25168,25171],{"class":25165,"line":785},[619,653],[617,25167,833],{"class":622},[617,25169,25170],{"class":626},"MeshDiscardMaterial",[617,25172,767],{"class":622},[617,25174,25175,25177,25179],{"class":619,"line":807},[617,25176,875],{"class":622},[617,25178,836],{"class":626},[617,25180,649],{"class":622},[617,25182,25183,25185,25187],{"class":619,"line":611},[617,25184,885],{"class":622},[617,25186,741],{"class":626},[617,25188,649],{"class":622},[617,25190,25191,25193,25195],{"class":619,"line":830},[617,25192,712],{"class":622},[617,25194,730],{"class":626},[617,25196,649],{"class":622},[1307,25198,1624],{},{"title":556,"searchDepth":557,"depth":558,"links":25200},[25201],{"id":604,"depth":558,"text":15},"Hides the object it's attached to while keeping shadows and children visible.",{},{"title":175,"description":25202},"ivSz3UBTzifkzor3XvoS_5CUJD_0d-7Dh7JvwBwFh80",{"id":25207,"title":179,"body":25208,"description":25928,"extension":571,"links":572,"meta":25929,"navigation":574,"path":180,"seo":25930,"stem":181,"__hash__":25931},"docs/2.api/4.materials/mesh-reflection-material.md",{"type":481,"value":25209,"toc":25924},[25210,25215,25226,25235,25242,25244,25628,25630,25901,25922],[588,25211,25212],{},[25213,25214],"materials-mesh-reflection-material",{},[594,25216,2756,25217,8223,25219,25222,25223,1126],{},[598,25218,7297],{},[598,25220,25221],{},"\u003CMeshReflectionMaterial />"," component for making floors or walls that reflect the objects in your ",[598,25224,25225],{},"Scene",[594,25227,25228,25229,25234],{},"The component is based on the excellent ",[1120,25230,25233],{"href":25231,"rel":25232},"https://github.com/pmndrs/drei",[1124],"Drei"," component of the same name.",[594,25236,25237,25238,25241],{},"It extends ",[598,25239,25240],{},"THREE.MeshStandardMaterial"," and accepts all the same props.",[484,25243,15],{"id":604},[606,25245,25248],{"className":608,"code":25246,"highlights":25247,"language":613,"meta":556,"style":556},"\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",[688,852,862,612,882],[598,25249,25250,25270,25288,25308,25316,25320,25328,25336,25364,25384,25403,25410,25424,25438,25452,25465,25480,25494,25508,25522,25526,25534,25552,25560,25578,25586,25594,25612,25620],{"__ignoreMap":556},[617,25251,25252,25254,25256,25258,25260,25262,25264,25266,25268],{"class":619,"line":557},[617,25253,623],{"class":622},[617,25255,627],{"class":626},[617,25257,631],{"class":630},[617,25259,634],{"class":630},[617,25261,637],{"class":622},[617,25263,640],{"class":622},[617,25265,644],{"class":643},[617,25267,640],{"class":622},[617,25269,649],{"class":622},[617,25271,25272,25274,25276,25278,25280,25282,25284,25286],{"class":619,"line":558},[617,25273,657],{"class":656},[617,25275,660],{"class":622},[617,25277,695],{"class":663},[617,25279,673],{"class":622},[617,25281,676],{"class":656},[617,25283,679],{"class":622},[617,25285,704],{"class":643},[617,25287,685],{"class":622},[617,25289,25291,25293,25295,25298,25300,25302,25304,25306],{"class":25290,"line":688},[619,653],[617,25292,657],{"class":656},[617,25294,660],{"class":622},[617,25296,25297],{"class":663}," MeshReflectionMaterial",[617,25299,673],{"class":622},[617,25301,676],{"class":656},[617,25303,679],{"class":622},[617,25305,682],{"class":643},[617,25307,685],{"class":622},[617,25309,25310,25312,25314],{"class":619,"line":709},[617,25311,712],{"class":622},[617,25313,627],{"class":626},[617,25315,649],{"class":622},[617,25317,25318],{"class":619,"line":719},[617,25319,722],{"emptyLinePlaceholder":574},[617,25321,25322,25324,25326],{"class":619,"line":725},[617,25323,623],{"class":622},[617,25325,730],{"class":626},[617,25327,649],{"class":622},[617,25329,25330,25332,25334],{"class":619,"line":735},[617,25331,738],{"class":622},[617,25333,741],{"class":626},[617,25335,649],{"class":622},[617,25337,25338,25340,25342,25344,25346,25348,25350,25352,25354,25356,25358,25360,25362],{"class":619,"line":758},[617,25339,761],{"class":622},[617,25341,764],{"class":626},[617,25343,1465],{"class":630},[617,25345,637],{"class":622},[617,25347,640],{"class":622},[617,25349,11330],{"class":643},[617,25351,640],{"class":622},[617,25353,8371],{"class":630},[617,25355,637],{"class":622},[617,25357,640],{"class":622},[617,25359,8378],{"class":643},[617,25361,640],{"class":622},[617,25363,767],{"class":622},[617,25365,25366,25368,25370,25373,25375,25377,25380,25382],{"class":619,"line":770},[617,25367,761],{"class":622},[617,25369,836],{"class":626},[617,25371,25372],{"class":630}," :rotation",[617,25374,637],{"class":622},[617,25376,640],{"class":622},[617,25378,25379],{"class":643},"[-Math.PI / 2, 0, 0]",[617,25381,640],{"class":622},[617,25383,649],{"class":622},[617,25385,25386,25388,25391,25393,25395,25397,25399,25401],{"class":619,"line":780},[617,25387,833],{"class":622},[617,25389,25390],{"class":626},"TresPlaneGeometry",[617,25392,1939],{"class":630},[617,25394,637],{"class":622},[617,25396,640],{"class":622},[617,25398,10011],{"class":643},[617,25400,640],{"class":622},[617,25402,767],{"class":622},[617,25404,25405,25407],{"class":619,"line":785},[617,25406,833],{"class":622},[617,25408,25409],{"class":626},"MeshReflectionMaterial\n",[617,25411,25412,25415,25417,25419,25422],{"class":619,"line":807},[617,25413,25414],{"class":630}," :blur",[617,25416,637],{"class":622},[617,25418,640],{"class":622},[617,25420,25421],{"class":643},"[300, 100]",[617,25423,3111],{"class":622},[617,25425,25426,25429,25431,25433,25436],{"class":619,"line":611},[617,25427,25428],{"class":630}," :mixBlur",[617,25430,637],{"class":622},[617,25432,640],{"class":622},[617,25434,25435],{"class":643},"30",[617,25437,3111],{"class":622},[617,25439,25440,25443,25445,25447,25450],{"class":619,"line":830},[617,25441,25442],{"class":630}," :mixStrength",[617,25444,637],{"class":622},[617,25446,640],{"class":622},[617,25448,25449],{"class":643},"80",[617,25451,3111],{"class":622},[617,25453,25454,25457,25459,25461,25463],{"class":619,"line":841},[617,25455,25456],{"class":630}," :mixContrast",[617,25458,637],{"class":622},[617,25460,640],{"class":622},[617,25462,1854],{"class":643},[617,25464,3111],{"class":622},[617,25466,25468,25471,25473,25475,25478],{"class":25467,"line":852},[619,653],[617,25469,25470],{"class":630}," color",[617,25472,637],{"class":622},[617,25474,640],{"class":622},[617,25476,25477],{"class":643},"#a0a0a0",[617,25479,3111],{"class":622},[617,25481,25483,25486,25488,25490,25492],{"class":25482,"line":862},[619,653],[617,25484,25485],{"class":630}," metalness",[617,25487,637],{"class":622},[617,25489,640],{"class":622},[617,25491,1926],{"class":643},[617,25493,3111],{"class":622},[617,25495,25497,25500,25502,25504,25506],{"class":25496,"line":612},[619,653],[617,25498,25499],{"class":630}," roughness",[617,25501,637],{"class":622},[617,25503,640],{"class":622},[617,25505,1854],{"class":643},[617,25507,3111],{"class":622},[617,25509,25511,25514,25516,25518,25520],{"class":25510,"line":882},[619,653],[617,25512,25513],{"class":630}," mirror",[617,25515,637],{"class":622},[617,25517,640],{"class":622},[617,25519,945],{"class":643},[617,25521,3111],{"class":622},[617,25523,25524],{"class":619,"line":892},[617,25525,8013],{"class":622},[617,25527,25528,25530,25532],{"class":619,"line":2605},[617,25529,875],{"class":622},[617,25531,836],{"class":626},[617,25533,649],{"class":622},[617,25535,25536,25538,25540,25542,25544,25546,25548,25550],{"class":619,"line":2614},[617,25537,761],{"class":622},[617,25539,836],{"class":626},[617,25541,1465],{"class":630},[617,25543,637],{"class":622},[617,25545,640],{"class":622},[617,25547,23171],{"class":643},[617,25549,640],{"class":622},[617,25551,649],{"class":622},[617,25553,25554,25556,25558],{"class":619,"line":2634},[617,25555,833],{"class":622},[617,25557,847],{"class":626},[617,25559,767],{"class":622},[617,25561,25562,25564,25566,25568,25570,25572,25574,25576],{"class":619,"line":2643},[617,25563,833],{"class":622},[617,25565,2666],{"class":626},[617,25567,2669],{"class":630},[617,25569,637],{"class":622},[617,25571,640],{"class":622},[617,25573,11377],{"class":643},[617,25575,640],{"class":622},[617,25577,767],{"class":622},[617,25579,25580,25582,25584],{"class":619,"line":2652},[617,25581,875],{"class":622},[617,25583,836],{"class":626},[617,25585,649],{"class":622},[617,25587,25588,25590,25592],{"class":619,"line":2661},[617,25589,761],{"class":622},[617,25591,8436],{"class":626},[617,25593,767],{"class":622},[617,25595,25596,25598,25600,25602,25604,25606,25608,25610],{"class":619,"line":2683},[617,25597,761],{"class":622},[617,25599,8455],{"class":626},[617,25601,1465],{"class":630},[617,25603,637],{"class":622},[617,25605,640],{"class":622},[617,25607,11412],{"class":643},[617,25609,640],{"class":622},[617,25611,767],{"class":622},[617,25613,25614,25616,25618],{"class":619,"line":2727},[617,25615,885],{"class":622},[617,25617,741],{"class":626},[617,25619,649],{"class":622},[617,25621,25622,25624,25626],{"class":619,"line":2736},[617,25623,712],{"class":622},[617,25625,730],{"class":626},[617,25627,649],{"class":622},[484,25629,902],{"id":901},[907,25631,25632,25642],{},[910,25633,25634],{},[913,25635,25636,25638,25640],{},[916,25637,8069],{"align":977},[916,25639,921],{"align":977},[916,25641,924],{},[926,25643,25644,25659,25673,25687,25704,25718,25732,25746,25760,25774,25791,25805,25819,25833,25857,25871,25887],{},[913,25645,25646,25651,25654],{},[931,25647,25648],{"align":977},[598,25649,25650],{},"resolution",[931,25652,25653],{"align":977},"Length in pixels of one side of the square reflective textures",[931,25655,25656],{},[598,25657,25658],{},"256",[913,25660,25661,25666,25669],{},[931,25662,25663],{"align":977},[598,25664,25665],{},"mix",[931,25667,25668],{"align":977},"Overall strength of the reflection",[931,25670,25671],{},[598,25672,1854],{},[913,25674,25675,25680,25683],{},[931,25676,25677],{"align":977},[598,25678,25679],{},"sharpMix",[931,25681,25682],{"align":977},"Strength of the sharp reflection on smooth surfaces",[931,25684,25685],{},[598,25686,1854],{},[913,25688,25689,25694,25700],{},[931,25690,25691],{"align":977},[598,25692,25693],{},"sharpDepthScale",[931,25695,25696,25697,25699],{"align":977},"Sharp reflection can be faded out by depth – distance from the reflective surface. Performance note: if the value is greater than ",[598,25698,945],{},", a depth texture will be created",[931,25701,25702],{},[598,25703,1854],{},[913,25705,25706,25711,25714],{},[931,25707,25708],{"align":977},[598,25709,25710],{},"sharpDepthBias",[931,25712,25713],{"align":977},"Sharp reflection depth falloff bias",[931,25715,25716],{},[598,25717,945],{},[913,25719,25720,25725,25728],{},[931,25721,25722],{"align":977},[598,25723,25724],{},"sharpDepthEdgeMin",[931,25726,25727],{"align":977},"Sharp reflection depth falloff start",[931,25729,25730],{},[598,25731,945],{},[913,25733,25734,25739,25742],{},[931,25735,25736],{"align":977},[598,25737,25738],{},"sharpDepthEdgeMax",[931,25740,25741],{"align":977},"Sharp reflection depth falloff end",[931,25743,25744],{},[598,25745,5709],{},[913,25747,25748,25753,25756],{},[931,25749,25750],{"align":977},[598,25751,25752],{},"blurMixSmooth",[931,25754,25755],{"align":977},"Strength of the blurred reflection on smooth surfaces",[931,25757,25758],{},[598,25759,1854],{},[913,25761,25762,25767,25770],{},[931,25763,25764],{"align":977},[598,25765,25766],{},"blurMixRough",[931,25768,25769],{"align":977},"Strength of the blurred reflection on rough surfaces",[931,25771,25772],{},[598,25773,1854],{},[913,25775,25776,25781,25787],{},[931,25777,25778],{"align":977},[598,25779,25780],{},"blurDepthScale",[931,25782,25783,25784,25786],{"align":977},"Blurred reflection can spread out by depth – distance from the reflective surface. Performance note: if the value is greater than ",[598,25785,945],{},", depth texture will be rendered",[931,25788,25789],{},[598,25790,1854],{},[913,25792,25793,25798,25801],{},[931,25794,25795],{"align":977},[598,25796,25797],{},"blurDepthBias",[931,25799,25800],{"align":977},"Blurred reflection depth spread bias",[931,25802,25803],{},[598,25804,945],{},[913,25806,25807,25812,25815],{},[931,25808,25809],{"align":977},[598,25810,25811],{},"blurDepthEdgeMin",[931,25813,25814],{"align":977},"Blurred reflection depth spread start",[931,25816,25817],{},[598,25818,945],{},[913,25820,25821,25826,25829],{},[931,25822,25823],{"align":977},[598,25824,25825],{},"blurDepthEdgeMax",[931,25827,25828],{"align":977},"Blurred reflection depth spread end",[931,25830,25831],{},[598,25832,5709],{},[913,25834,25835,25840,25853],{},[931,25836,25837],{"align":977},[598,25838,25839],{},"blurSize",[931,25841,25842,25843,25846,25847,5591,25850,25852],{"align":977},"Size of the blur. If ",[598,25844,25845],{},"[number, number]",", first number is width, second is height. Performance note: if other than ",[598,25848,25849],{},"[0, 0]",[598,25851,945],{},", a blur texture will be rendered",[931,25854,25855],{},[598,25856,25849],{},[913,25858,25859,25864,25867],{},[931,25860,25861],{"align":977},[598,25862,25863],{},"distortionMap",[931,25865,25866],{"align":977},"Texture for offsetting the reflection",[931,25868,25869],{},[598,25870,1159],{},[913,25872,25873,25878,25883],{},[931,25874,25875],{"align":977},[598,25876,25877],{},"distortion",[931,25879,25880,25881],{"align":977},"Influence of ",[598,25882,25863],{},[931,25884,25885],{},[598,25886,945],{},[913,25888,25889,25894,25897],{},[931,25890,25891],{"align":977},[598,25892,25893],{},"reflectorOffset",[931,25895,25896],{"align":977},"Offsets the reflection",[931,25898,25899],{},[598,25900,945],{},[594,25902,25903,25904,25906,25907,1652,25909,1652,25911,1652,25913,1652,25915,1652,25917,1652,25919,25921],{},"Additionally, the component extends ",[598,25905,25240],{}," and accepts all the same props including ",[598,25908,7527],{},[598,25910,19075],{},[598,25912,19060],{},[598,25914,2961],{},[598,25916,18959],{},[598,25918,18978],{},[598,25920,18997],{},", and more.",[1307,25923,1624],{},{"title":556,"searchDepth":557,"depth":558,"links":25925},[25926,25927],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},"Makes floors or walls that reflect the objects in your Scene.",{},{"title":179,"description":25928},"-dhKiUbKV5dPMARGNmTRwR-6x_sfsh0AlnXCQ6x3KUM",{"id":25933,"title":183,"body":25934,"description":26704,"extension":571,"links":572,"meta":26705,"navigation":574,"path":184,"seo":26706,"stem":185,"__hash__":26707},"docs/2.api/4.materials/mesh-transmission-material.md",{"type":481,"value":25935,"toc":26699},[25936,25941,25949,25956,25968,25970,26227,26229,26653,26658,26660,26697],[588,25937,25938],{},[25939,25940],"materials-mesh-transmission-material",{},[594,25942,2756,25943,8223,25945,25948],{},[598,25944,7297],{},[598,25946,25947],{},"\u003CMeshTransmissionMaterial />"," component that produces high-quality glass and transmission effects.",[594,25950,25951,25952,25955],{},"The material renders the scene into a buffer texture each frame to simulate refraction, chromatic aberration, distortion, and anisotropic blur, effects that ",[598,25953,25954],{},"\u003CTresMeshPhysicalMaterial>"," alone cannot achieve.",[1985,25957,25958],{},[594,25959,25960,25961,25967],{},"This component is a port of the ",[1120,25962,25966],{"href":25963,"rel":25964,"target":25965},"https://drei.docs.pmnd.rs/shaders/mesh-transmission-material",[1124],"_blank","drei MeshTransmissionMaterial",". All credit goes to the original authors.",[484,25969,15],{"id":604},[606,25971,25974],{"className":608,"code":25972,"highlights":25973,"language":613,"meta":556,"style":556},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { MeshTransmissionMaterial, Environment } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 0, 5]\" />\n \u003CEnvironment preset=\"city\" />\n \u003CTresMesh>\n \u003CTresTorusKnotGeometry :args=\"[1, 0.3, 128, 32]\" />\n \u003CMeshTransmissionMaterial\n :transmission=\"1\"\n :thickness=\"0.5\"\n :chromatic-aberration=\"0.03\"\n :resolution=\"512\"\n />\n \u003C/TresMesh>\n \u003C/TresCanvas>\n\u003C/template>\n",[688,780,785,807,611,830,841,852],[598,25975,25976,25996,26014,26038,26046,26050,26058,26066,26084,26103,26112,26133,26141,26155,26169,26184,26199,26203,26211,26219],{"__ignoreMap":556},[617,25977,25978,25980,25982,25984,25986,25988,25990,25992,25994],{"class":619,"line":557},[617,25979,623],{"class":622},[617,25981,627],{"class":626},[617,25983,631],{"class":630},[617,25985,634],{"class":630},[617,25987,637],{"class":622},[617,25989,640],{"class":622},[617,25991,644],{"class":643},[617,25993,640],{"class":622},[617,25995,649],{"class":622},[617,25997,25998,26000,26002,26004,26006,26008,26010,26012],{"class":619,"line":558},[617,25999,657],{"class":656},[617,26001,660],{"class":622},[617,26003,695],{"class":663},[617,26005,673],{"class":622},[617,26007,676],{"class":656},[617,26009,679],{"class":622},[617,26011,704],{"class":643},[617,26013,685],{"class":622},[617,26015,26017,26019,26021,26024,26026,26028,26030,26032,26034,26036],{"class":26016,"line":688},[619,653],[617,26018,657],{"class":656},[617,26020,660],{"class":622},[617,26022,26023],{"class":663}," MeshTransmissionMaterial",[617,26025,667],{"class":622},[617,26027,18557],{"class":663},[617,26029,673],{"class":622},[617,26031,676],{"class":656},[617,26033,679],{"class":622},[617,26035,682],{"class":643},[617,26037,685],{"class":622},[617,26039,26040,26042,26044],{"class":619,"line":709},[617,26041,712],{"class":622},[617,26043,627],{"class":626},[617,26045,649],{"class":622},[617,26047,26048],{"class":619,"line":719},[617,26049,722],{"emptyLinePlaceholder":574},[617,26051,26052,26054,26056],{"class":619,"line":725},[617,26053,623],{"class":622},[617,26055,730],{"class":626},[617,26057,649],{"class":622},[617,26059,26060,26062,26064],{"class":619,"line":735},[617,26061,738],{"class":622},[617,26063,741],{"class":626},[617,26065,649],{"class":622},[617,26067,26068,26070,26072,26074,26076,26078,26080,26082],{"class":619,"line":758},[617,26069,761],{"class":622},[617,26071,764],{"class":626},[617,26073,1465],{"class":630},[617,26075,637],{"class":622},[617,26077,640],{"class":622},[617,26079,8366],{"class":643},[617,26081,640],{"class":622},[617,26083,767],{"class":622},[617,26085,26086,26088,26090,26092,26094,26096,26099,26101],{"class":619,"line":770},[617,26087,761],{"class":622},[617,26089,355],{"class":626},[617,26091,19276],{"class":630},[617,26093,637],{"class":622},[617,26095,640],{"class":622},[617,26097,26098],{"class":643},"city",[617,26100,640],{"class":622},[617,26102,767],{"class":622},[617,26104,26106,26108,26110],{"class":26105,"line":780},[619,653],[617,26107,761],{"class":622},[617,26109,836],{"class":626},[617,26111,649],{"class":622},[617,26113,26115,26117,26120,26122,26124,26126,26129,26131],{"class":26114,"line":785},[619,653],[617,26116,833],{"class":622},[617,26118,26119],{"class":626},"TresTorusKnotGeometry",[617,26121,1939],{"class":630},[617,26123,637],{"class":622},[617,26125,640],{"class":622},[617,26127,26128],{"class":643},"[1, 0.3, 128, 32]",[617,26130,640],{"class":622},[617,26132,767],{"class":622},[617,26134,26136,26138],{"class":26135,"line":807},[619,653],[617,26137,833],{"class":622},[617,26139,26140],{"class":626},"MeshTransmissionMaterial\n",[617,26142,26144,26147,26149,26151,26153],{"class":26143,"line":611},[619,653],[617,26145,26146],{"class":630}," :transmission",[617,26148,637],{"class":622},[617,26150,640],{"class":622},[617,26152,1854],{"class":643},[617,26154,3111],{"class":622},[617,26156,26158,26161,26163,26165,26167],{"class":26157,"line":830},[619,653],[617,26159,26160],{"class":630}," :thickness",[617,26162,637],{"class":622},[617,26164,640],{"class":622},[617,26166,1926],{"class":643},[617,26168,3111],{"class":622},[617,26170,26172,26175,26177,26179,26182],{"class":26171,"line":841},[619,653],[617,26173,26174],{"class":630}," :chromatic-aberration",[617,26176,637],{"class":622},[617,26178,640],{"class":622},[617,26180,26181],{"class":643},"0.03",[617,26183,3111],{"class":622},[617,26185,26187,26190,26192,26194,26197],{"class":26186,"line":852},[619,653],[617,26188,26189],{"class":630}," :resolution",[617,26191,637],{"class":622},[617,26193,640],{"class":622},[617,26195,26196],{"class":643},"512",[617,26198,3111],{"class":622},[617,26200,26201],{"class":619,"line":862},[617,26202,8013],{"class":622},[617,26204,26205,26207,26209],{"class":619,"line":612},[617,26206,875],{"class":622},[617,26208,836],{"class":626},[617,26210,649],{"class":622},[617,26212,26213,26215,26217],{"class":619,"line":882},[617,26214,885],{"class":622},[617,26216,741],{"class":626},[617,26218,649],{"class":622},[617,26220,26221,26223,26225],{"class":619,"line":892},[617,26222,712],{"class":622},[617,26224,730],{"class":626},[617,26226,649],{"class":622},[484,26228,902],{"id":901},[907,26230,26231,26244],{},[910,26232,26233],{},[913,26234,26235,26237,26239,26241],{},[916,26236,918],{"align":977},[916,26238,921],{"align":977},[916,26240,5949],{"align":977},[916,26242,924],{"align":26243},"center",[926,26245,26246,26268,26285,26302,26320,26338,26355,26373,26391,26410,26427,26445,26463,26481,26499,26517,26535,26552,26572,26591,26610,26632],{},[913,26247,26248,26253,26260,26264],{},[931,26249,26250],{"align":977},[598,26251,26252],{},"transmission",[931,26254,26255,26256,26259],{"align":977},"Glass opacity (maps to the internal ",[598,26257,26258],{},"_transmission"," uniform)",[931,26261,26262],{"align":977},[598,26263,5332],{},[931,26265,26266],{"align":26243},[598,26267,1854],{},[913,26269,26270,26274,26277,26281],{},[931,26271,26272],{"align":977},[598,26273,9684],{},[931,26275,26276],{"align":977},"Thickness of the glass volume",[931,26278,26279],{"align":977},[598,26280,5332],{},[931,26282,26283],{"align":26243},[598,26284,945],{},[913,26286,26287,26291,26294,26298],{},[931,26288,26289],{"align":977},[598,26290,19075],{},[931,26292,26293],{"align":977},"Surface roughness",[931,26295,26296],{"align":977},[598,26297,5332],{},[931,26299,26300],{"align":26243},[598,26301,945],{},[913,26303,26304,26309,26312,26316],{},[931,26305,26306],{"align":977},[598,26307,26308],{},"chromaticAberration",[931,26310,26311],{"align":977},"Chromatic aberration intensity",[931,26313,26314],{"align":977},[598,26315,5332],{},[931,26317,26318],{"align":26243},[598,26319,26181],{},[913,26321,26322,26327,26330,26334],{},[931,26323,26324],{"align":977},[598,26325,26326],{},"anisotropicBlur",[931,26328,26329],{"align":977},"Anisotropic blur amount",[931,26331,26332],{"align":977},[598,26333,5332],{},[931,26335,26336],{"align":26243},[598,26337,2143],{},[913,26339,26340,26344,26347,26351],{},[931,26341,26342],{"align":977},[598,26343,25877],{},[931,26345,26346],{"align":977},"Distortion amount",[931,26348,26349],{"align":977},[598,26350,5332],{},[931,26352,26353],{"align":26243},[598,26354,945],{},[913,26356,26357,26362,26365,26369],{},[931,26358,26359],{"align":977},[598,26360,26361],{},"distortionScale",[931,26363,26364],{"align":977},"Scale of the distortion noise",[931,26366,26367],{"align":977},[598,26368,5332],{},[931,26370,26371],{"align":26243},[598,26372,1926],{},[913,26374,26375,26380,26383,26387],{},[931,26376,26377],{"align":977},[598,26378,26379],{},"temporalDistortion",[931,26381,26382],{"align":977},"Animates the distortion over time",[931,26384,26385],{"align":977},[598,26386,5332],{},[931,26388,26389],{"align":26243},[598,26390,945],{},[913,26392,26393,26398,26401,26405],{},[931,26394,26395],{"align":977},[598,26396,26397],{},"ior",[931,26399,26400],{"align":977},"Index of refraction",[931,26402,26403],{"align":977},[598,26404,5332],{},[931,26406,26407],{"align":26243},[598,26408,26409],{},"1.5",[913,26411,26412,26416,26419,26423],{},[931,26413,26414],{"align":977},[598,26415,7527],{},[931,26417,26418],{"align":977},"Base color of the glass",[931,26420,26421],{"align":977},[598,26422,7542],{},[931,26424,26425],{"align":26243},[598,26426,2676],{},[913,26428,26429,26434,26437,26441],{},[931,26430,26431],{"align":977},[598,26432,26433],{},"clearcoat",[931,26435,26436],{"align":977},"Clearcoat layer intensity",[931,26438,26439],{"align":977},[598,26440,5332],{},[931,26442,26443],{"align":26243},[598,26444,945],{},[913,26446,26447,26452,26455,26459],{},[931,26448,26449],{"align":977},[598,26450,26451],{},"clearcoatRoughness",[931,26453,26454],{"align":977},"Clearcoat roughness",[931,26456,26457],{"align":977},[598,26458,5332],{},[931,26460,26461],{"align":26243},[598,26462,945],{},[913,26464,26465,26470,26473,26477],{},[931,26466,26467],{"align":977},[598,26468,26469],{},"attenuationDistance",[931,26471,26472],{"align":977},"Distance at which light is attenuated through the volume",[931,26474,26475],{"align":977},[598,26476,5332],{},[931,26478,26479],{"align":26243},[598,26480,11564],{},[913,26482,26483,26488,26491,26495],{},[931,26484,26485],{"align":977},[598,26486,26487],{},"attenuationColor",[931,26489,26490],{"align":977},"Color the light shifts to as it passes through the volume",[931,26492,26493],{"align":977},[598,26494,7542],{},[931,26496,26497],{"align":26243},[598,26498,2676],{},[913,26500,26501,26506,26509,26513],{},[931,26502,26503],{"align":977},[598,26504,26505],{},"backside",[931,26507,26508],{"align":977},"Render back faces into a separate buffer for proper glass thickness",[931,26510,26511],{"align":977},[598,26512,15441],{},[931,26514,26515],{"align":26243},[598,26516,951],{},[913,26518,26519,26524,26527,26531],{},[931,26520,26521],{"align":977},[598,26522,26523],{},"backsideThickness",[931,26525,26526],{"align":977},"Thickness used during the backside pass",[931,26528,26529],{"align":977},[598,26530,5332],{},[931,26532,26533],{"align":26243},[598,26534,945],{},[913,26536,26537,26541,26544,26548],{},[931,26538,26539],{"align":977},[598,26540,25650],{},[931,26542,26543],{"align":977},"Resolution of the FBO render target in pixels",[931,26545,26546],{"align":977},[598,26547,5332],{},[931,26549,26550],{"align":26243},[598,26551,25658],{},[913,26553,26554,26559,26564,26568],{},[931,26555,26556],{"align":977},[598,26557,26558],{},"backsideResolution",[931,26560,26561,26562],{"align":977},"Resolution of the backside FBO. Defaults to ",[598,26563,25650],{},[931,26565,26566],{"align":977},[598,26567,5332],{},[931,26569,26570],{"align":26243},[598,26571,25650],{},[913,26573,26574,26579,26582,26587],{},[931,26575,26576],{"align":977},[598,26577,26578],{},"background",[931,26580,26581],{"align":977},"Override the scene background during the FBO pass",[931,26583,26584],{"align":977},[598,26585,26586],{},"THREE.Color | null",[931,26588,26589],{"align":26243},[598,26590,1159],{},[913,26592,26593,26598,26601,26606],{},[931,26594,26595],{"align":977},[598,26596,26597],{},"buffer",[931,26599,26600],{"align":977},"Supply your own render-target texture, skipping the internal FBO pass",[931,26602,26603],{"align":977},[598,26604,26605],{},"THREE.Texture | null",[931,26607,26608],{"align":26243},[598,26609,1159],{},[913,26611,26612,26617,26623,26627],{},[931,26613,26614],{"align":977},[598,26615,26616],{},"samples",[931,26618,26619,26620],{"align":977},"Number of refraction samples. ",[1649,26621,26622],{},"Baked at compile time — changing requires remount.",[931,26624,26625],{"align":977},[598,26626,5332],{},[931,26628,26629],{"align":26243},[598,26630,26631],{},"6",[913,26633,26634,26639,26645,26649],{},[931,26635,26636],{"align":977},[598,26637,26638],{},"transmissionSampler",[931,26640,26641,26642],{"align":977},"Use THREE's built-in transmission sampler instead of an FBO pass. ",[1649,26643,26644],{},"Baked at compile time.",[931,26646,26647],{"align":977},[598,26648,15441],{},[931,26650,26651],{"align":26243},[598,26652,951],{},[594,26654,26655,26656,25241],{},"The component extends ",[598,26657,24223],{},[484,26659,24568],{"id":24567},[2193,26661,26662,26672,26679,26687],{},[2196,26663,26664,26665,5591,26668,26671],{},"An ",[598,26666,26667],{},"\u003CEnvironment>",[598,26669,26670],{},"envMap"," on the scene is strongly recommended. Without one, the material will render dark.",[2196,26673,26674,3043,26676,26678],{},[598,26675,26616],{},[598,26677,26638],{}," are baked into the shader at compile time. Changing them at runtime triggers a remount automatically.",[2196,26680,16279,26681,26683,26684,26686],{},[598,26682,26505],{}," with a non-zero ",[598,26685,26523],{}," for more convincing thick-glass effects.",[2196,26688,26689,26690,26692,26693,26696],{},"Lower ",[598,26691,25650],{}," (e.g. ",[598,26694,26695],{},"128",") improves performance at the cost of refraction sharpness.",[1307,26698,1624],{},{"title":556,"searchDepth":557,"depth":558,"links":26700},[26701,26702,26703],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},{"id":24567,"depth":558,"text":24568},"A glass-like transmission material with chromatic aberration, distortion, and backside support. Ported from drei.",{},{"title":183,"description":26704},"MSm1cDIVGWOO8lvYX_2hfQL4QLQbohqGi_4-iSPYgOA",{"id":26709,"title":187,"body":26710,"description":26988,"extension":571,"links":572,"meta":26989,"navigation":574,"path":188,"seo":26990,"stem":189,"__hash__":26991},"docs/2.api/4.materials/point-material.md",{"type":481,"value":26711,"toc":26984},[26712,26717,26727,26732,26734,26966,26968,26982],[2275,26713,26714],{},[26715,26716],"materials-point-material",{},[594,26718,26719,26722,26723,26726],{},[598,26720,26721],{},"\u003CPointMaterial />"," extends ",[598,26724,26725],{},"THREE.PointsMaterial",". It renders the points as dots, rather than the default squares.",[3179,26728,26729],{},[594,26730,26731],{},"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.",[484,26733,15],{"id":604},[606,26735,26738],{"className":608,"code":26736,"highlights":26737,"language":613,"meta":556,"style":556},"\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",[688,807,611,830],[598,26739,26740,26760,26778,26802,26810,26814,26822,26830,26858,26866,26875,26895,26903,26917,26930,26934,26942,26950,26958],{"__ignoreMap":556},[617,26741,26742,26744,26746,26748,26750,26752,26754,26756,26758],{"class":619,"line":557},[617,26743,623],{"class":622},[617,26745,627],{"class":626},[617,26747,631],{"class":630},[617,26749,634],{"class":630},[617,26751,637],{"class":622},[617,26753,640],{"class":622},[617,26755,644],{"class":643},[617,26757,640],{"class":622},[617,26759,649],{"class":622},[617,26761,26762,26764,26766,26768,26770,26772,26774,26776],{"class":619,"line":558},[617,26763,657],{"class":656},[617,26765,660],{"class":622},[617,26767,695],{"class":663},[617,26769,673],{"class":622},[617,26771,676],{"class":656},[617,26773,679],{"class":622},[617,26775,704],{"class":643},[617,26777,685],{"class":622},[617,26779,26781,26783,26785,26788,26790,26792,26794,26796,26798,26800],{"class":26780,"line":688},[619,653],[617,26782,657],{"class":656},[617,26784,660],{"class":622},[617,26786,26787],{"class":663}," PointMaterial",[617,26789,667],{"class":622},[617,26791,670],{"class":663},[617,26793,673],{"class":622},[617,26795,676],{"class":656},[617,26797,679],{"class":622},[617,26799,682],{"class":643},[617,26801,685],{"class":622},[617,26803,26804,26806,26808],{"class":619,"line":709},[617,26805,712],{"class":622},[617,26807,627],{"class":626},[617,26809,649],{"class":622},[617,26811,26812],{"class":619,"line":719},[617,26813,722],{"emptyLinePlaceholder":574},[617,26815,26816,26818,26820],{"class":619,"line":725},[617,26817,623],{"class":622},[617,26819,730],{"class":626},[617,26821,649],{"class":622},[617,26823,26824,26826,26828],{"class":619,"line":735},[617,26825,738],{"class":622},[617,26827,741],{"class":626},[617,26829,649],{"class":622},[617,26831,26832,26834,26836,26838,26840,26842,26844,26846,26848,26850,26852,26854,26856],{"class":619,"line":758},[617,26833,761],{"class":622},[617,26835,764],{"class":626},[617,26837,1465],{"class":630},[617,26839,637],{"class":622},[617,26841,640],{"class":622},[617,26843,11330],{"class":643},[617,26845,640],{"class":622},[617,26847,8371],{"class":630},[617,26849,637],{"class":622},[617,26851,640],{"class":622},[617,26853,8378],{"class":643},[617,26855,640],{"class":622},[617,26857,767],{"class":622},[617,26859,26860,26862,26864],{"class":619,"line":770},[617,26861,761],{"class":622},[617,26863,775],{"class":626},[617,26865,767],{"class":622},[617,26867,26868,26870,26873],{"class":619,"line":780},[617,26869,761],{"class":622},[617,26871,26872],{"class":626},"TresPoints",[617,26874,649],{"class":622},[617,26876,26877,26879,26882,26884,26886,26888,26891,26893],{"class":619,"line":785},[617,26878,833],{"class":622},[617,26880,26881],{"class":626},"TresIcosahedronGeometry",[617,26883,1939],{"class":630},[617,26885,637],{"class":622},[617,26887,640],{"class":622},[617,26889,26890],{"class":643},"[1, 4]",[617,26892,640],{"class":622},[617,26894,767],{"class":622},[617,26896,26898,26900],{"class":26897,"line":807},[619,653],[617,26899,833],{"class":622},[617,26901,26902],{"class":626},"PointMaterial\n",[617,26904,26906,26909,26911,26913,26915],{"class":26905,"line":611},[619,653],[617,26907,26908],{"class":630}," :size",[617,26910,637],{"class":622},[617,26912,640],{"class":622},[617,26914,10759],{"class":643},[617,26916,3111],{"class":622},[617,26918,26920,26922,26924,26926,26928],{"class":26919,"line":830},[619,653],[617,26921,25470],{"class":630},[617,26923,637],{"class":622},[617,26925,640],{"class":622},[617,26927,11377],{"class":643},[617,26929,3111],{"class":622},[617,26931,26932],{"class":619,"line":841},[617,26933,8013],{"class":622},[617,26935,26936,26938,26940],{"class":619,"line":852},[617,26937,875],{"class":622},[617,26939,26872],{"class":626},[617,26941,649],{"class":622},[617,26943,26944,26946,26948],{"class":619,"line":862},[617,26945,761],{"class":622},[617,26947,8436],{"class":626},[617,26949,767],{"class":622},[617,26951,26952,26954,26956],{"class":619,"line":612},[617,26953,885],{"class":622},[617,26955,741],{"class":626},[617,26957,649],{"class":622},[617,26959,26960,26962,26964],{"class":619,"line":882},[617,26961,712],{"class":622},[617,26963,730],{"class":626},[617,26965,649],{"class":622},[484,26967,902],{"id":901},[594,26969,26970,26971,26978,26979,1126],{},"All ",[1120,26972,26975,26977],{"href":26973,"rel":26974},"https://threejs.org/docs/#api/en/materials/PointsMaterial",[1124],[598,26976,26725],{}," properties"," are inherited by ",[598,26980,26981],{},"PointMaterial",[1307,26983,1624],{},{"title":556,"searchDepth":557,"depth":558,"links":26985},[26986,26987],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},"Extends THREE.PointsMaterial to render points as dots rather than squares.",{},{"title":187,"description":26988},"KQarQWFbe_ZShVTsHEKL-hBviOOcUTm-CtCNsZFQ3jo",{"id":26993,"title":191,"body":26994,"description":27307,"extension":571,"links":572,"meta":27308,"navigation":574,"path":192,"seo":27309,"stem":193,"__hash__":27310},"docs/2.api/4.materials/wobble-material.md",{"type":481,"value":26995,"toc":27303},[26996,27001,27009,27011,27253,27255,27296,27301],[588,26997,26998],{},[26999,27000],"materials-wobble-material",{},[594,27002,2756,27003,8223,27005,27008],{},[598,27004,7297],{},[598,27006,27007],{},"\u003CMeshWobbleMaterial />"," component that makes a geometry wobble and wave around.",[484,27010,15],{"id":604},[606,27012,27015],{"className":608,"code":27013,"highlights":27014,"language":613,"meta":556,"style":556},"\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",[688,785,807,611,830,841],[598,27016,27017,27037,27055,27075,27083,27087,27095,27103,27131,27139,27147,27155,27169,27183,27198,27203,27211,27219,27237,27245],{"__ignoreMap":556},[617,27018,27019,27021,27023,27025,27027,27029,27031,27033,27035],{"class":619,"line":557},[617,27020,623],{"class":622},[617,27022,627],{"class":626},[617,27024,631],{"class":630},[617,27026,634],{"class":630},[617,27028,637],{"class":622},[617,27030,640],{"class":622},[617,27032,644],{"class":643},[617,27034,640],{"class":622},[617,27036,649],{"class":622},[617,27038,27039,27041,27043,27045,27047,27049,27051,27053],{"class":619,"line":558},[617,27040,657],{"class":656},[617,27042,660],{"class":622},[617,27044,695],{"class":663},[617,27046,673],{"class":622},[617,27048,676],{"class":656},[617,27050,679],{"class":622},[617,27052,704],{"class":643},[617,27054,685],{"class":622},[617,27056,27058,27060,27062,27065,27067,27069,27071,27073],{"class":27057,"line":688},[619,653],[617,27059,657],{"class":656},[617,27061,660],{"class":622},[617,27063,27064],{"class":663}," MeshWobbleMaterial",[617,27066,673],{"class":622},[617,27068,676],{"class":656},[617,27070,679],{"class":622},[617,27072,682],{"class":643},[617,27074,685],{"class":622},[617,27076,27077,27079,27081],{"class":619,"line":709},[617,27078,712],{"class":622},[617,27080,627],{"class":626},[617,27082,649],{"class":622},[617,27084,27085],{"class":619,"line":719},[617,27086,722],{"emptyLinePlaceholder":574},[617,27088,27089,27091,27093],{"class":619,"line":725},[617,27090,623],{"class":622},[617,27092,730],{"class":626},[617,27094,649],{"class":622},[617,27096,27097,27099,27101],{"class":619,"line":735},[617,27098,738],{"class":622},[617,27100,741],{"class":626},[617,27102,649],{"class":622},[617,27104,27105,27107,27109,27111,27113,27115,27117,27119,27121,27123,27125,27127,27129],{"class":619,"line":758},[617,27106,761],{"class":622},[617,27108,764],{"class":626},[617,27110,1465],{"class":630},[617,27112,637],{"class":622},[617,27114,640],{"class":622},[617,27116,11330],{"class":643},[617,27118,640],{"class":622},[617,27120,8371],{"class":630},[617,27122,637],{"class":622},[617,27124,640],{"class":622},[617,27126,8378],{"class":643},[617,27128,640],{"class":622},[617,27130,767],{"class":622},[617,27132,27133,27135,27137],{"class":619,"line":770},[617,27134,761],{"class":622},[617,27136,836],{"class":626},[617,27138,649],{"class":622},[617,27140,27141,27143,27145],{"class":619,"line":780},[617,27142,833],{"class":622},[617,27144,9912],{"class":626},[617,27146,767],{"class":622},[617,27148,27150,27152],{"class":27149,"line":785},[619,653],[617,27151,833],{"class":622},[617,27153,27154],{"class":626},"MeshWobbleMaterial\n",[617,27156,27158,27160,27162,27164,27167],{"class":27157,"line":807},[619,653],[617,27159,25470],{"class":630},[617,27161,637],{"class":622},[617,27163,640],{"class":622},[617,27165,27166],{"class":643},"#f25042",[617,27168,3111],{"class":622},[617,27170,27172,27175,27177,27179,27181],{"class":27171,"line":611},[619,653],[617,27173,27174],{"class":630}," :speed",[617,27176,637],{"class":622},[617,27178,640],{"class":622},[617,27180,1854],{"class":643},[617,27182,3111],{"class":622},[617,27184,27186,27189,27191,27193,27196],{"class":27185,"line":830},[619,653],[617,27187,27188],{"class":630}," :factor",[617,27190,637],{"class":622},[617,27192,640],{"class":622},[617,27194,27195],{"class":643},"0.6",[617,27197,3111],{"class":622},[617,27199,27201],{"class":27200,"line":841},[619,653],[617,27202,8013],{"class":622},[617,27204,27205,27207,27209],{"class":619,"line":852},[617,27206,875],{"class":622},[617,27208,836],{"class":626},[617,27210,649],{"class":622},[617,27212,27213,27215,27217],{"class":619,"line":862},[617,27214,761],{"class":622},[617,27216,8436],{"class":626},[617,27218,767],{"class":622},[617,27220,27221,27223,27225,27227,27229,27231,27233,27235],{"class":619,"line":612},[617,27222,761],{"class":622},[617,27224,8455],{"class":626},[617,27226,1465],{"class":630},[617,27228,637],{"class":622},[617,27230,640],{"class":622},[617,27232,11412],{"class":643},[617,27234,640],{"class":622},[617,27236,767],{"class":622},[617,27238,27239,27241,27243],{"class":619,"line":882},[617,27240,885],{"class":622},[617,27242,741],{"class":626},[617,27244,649],{"class":622},[617,27246,27247,27249,27251],{"class":619,"line":892},[617,27248,712],{"class":622},[617,27250,730],{"class":626},[617,27252,649],{"class":622},[484,27254,902],{"id":901},[907,27256,27257,27267],{},[910,27258,27259],{},[913,27260,27261,27263,27265],{},[916,27262,918],{"align":977},[916,27264,921],{"align":977},[916,27266,924],{},[926,27268,27269,27282],{},[913,27270,27271,27275,27278],{},[931,27272,27273],{"align":977},[1649,27274,8536],{},[931,27276,27277],{"align":977},"how fast the wobble effect would be.",[931,27279,27280],{},[598,27281,1854],{},[913,27283,27284,27289,27292],{},[931,27285,27286],{"align":977},[1649,27287,27288],{},"factor",[931,27290,27291],{"align":977},"how strong the wobble effect will deform the geometry",[931,27293,27294],{},[598,27295,1854],{},[594,27297,27298,27299,24224],{},"This material extends ",[598,27300,25240],{},[1307,27302,1624],{},{"title":556,"searchDepth":557,"depth":558,"links":27304},[27305,27306],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},"Makes a geometry wobble and wave around with customizable speed and factor.",{},{"title":191,"description":27307},"FcmdcQOb0wna_07P1wVmXmyOFm6O2rnxJE44Peni4w8",[27312,27496,28003,28173,28351,28738,28975,29144,29686,29854,30452,30619,30794,31155,31332,31494,31688,31864,32268,32436,32628,32818],{"id":27313,"title":201,"body":27314,"description":27492,"extension":571,"links":572,"meta":27493,"navigation":574,"path":202,"seo":27494,"stem":203,"__hash__":27495},"docs/2.api/5.shapes/box.md",{"type":481,"value":27315,"toc":27489},[27316,27321,27332,27340,27347,27349,27486],[588,27317,27318],{},[27319,27320],"shapes-box",{},[594,27322,2756,27323,8223,27325,27328,27329,1126],{},[598,27324,7297],{},[598,27326,27327],{},"\u003CBox />"," component that serves as a short-cut for a ",[598,27330,27331],{},"BoxGeometry",[606,27333,27338],{"className":27334,"code":27336,"language":27337},[27335],"language-text","args: [\n width: number,\n height: number,\n depth: number,\n widthSegments: number,\n heightSegments: number,\n depthSegments: number\n]\n","text",[598,27339,27336],{"__ignoreMap":556},[594,27341,27342,27343],{},"Reference: ",[1120,27344,27331],{"href":27345,"rel":27346},"https://threejs.org/docs/?q=box#api/en/geometries/BoxGeometry",[1124],[484,27348,15],{"id":604},[606,27350,27352],{"className":608,"code":27351,"language":613,"meta":556,"style":556},"\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",[598,27353,27354,27397,27401,27406,27473,27478],{"__ignoreMap":556},[617,27355,27356,27358,27360,27362,27365,27367,27369,27371,27373,27375,27377,27379,27381,27383,27385,27387,27389,27391,27393,27395],{"class":619,"line":557},[617,27357,623],{"class":622},[617,27359,201],{"class":626},[617,27361,3009],{"class":622},[617,27363,27364],{"class":630},"args",[617,27366,637],{"class":622},[617,27368,640],{"class":622},[617,27370,18946],{"class":663},[617,27372,1854],{"class":2481},[617,27374,667],{"class":622},[617,27376,2541],{"class":2481},[617,27378,667],{"class":622},[617,27380,2541],{"class":2481},[617,27382,2494],{"class":663},[617,27384,640],{"class":622},[617,27386,2669],{"class":630},[617,27388,637],{"class":622},[617,27390,640],{"class":622},[617,27392,11377],{"class":643},[617,27394,640],{"class":622},[617,27396,767],{"class":622},[617,27398,27399],{"class":619,"line":558},[617,27400,722],{"emptyLinePlaceholder":574},[617,27402,27403],{"class":619,"line":688},[617,27404,27405],{"class":663},"// Box with a custom material transformations\n",[617,27407,27408,27410,27412,27414,27416,27418,27420,27422,27424,27426,27428,27430,27432,27434,27436,27438,27440,27442,27444,27446,27448,27450,27452,27454,27456,27458,27460,27463,27465,27467,27469,27471],{"class":619,"line":709},[617,27409,623],{"class":622},[617,27411,201],{"class":626},[617,27413,3852],{"class":630},[617,27415,637],{"class":622},[617,27417,640],{"class":622},[617,27419,14308],{"class":643},[617,27421,640],{"class":622},[617,27423,3009],{"class":622},[617,27425,27364],{"class":630},[617,27427,637],{"class":622},[617,27429,640],{"class":622},[617,27431,18946],{"class":663},[617,27433,1854],{"class":2481},[617,27435,667],{"class":622},[617,27437,2541],{"class":2481},[617,27439,667],{"class":622},[617,27441,2541],{"class":2481},[617,27443,2494],{"class":663},[617,27445,640],{"class":622},[617,27447,3009],{"class":622},[617,27449,4110],{"class":630},[617,27451,637],{"class":622},[617,27453,640],{"class":622},[617,27455,18946],{"class":663},[617,27457,945],{"class":2481},[617,27459,667],{"class":622},[617,27461,27462],{"class":2481}," 4",[617,27464,667],{"class":622},[617,27466,2486],{"class":2481},[617,27468,2494],{"class":663},[617,27470,640],{"class":622},[617,27472,649],{"class":622},[617,27474,27475],{"class":619,"line":719},[617,27476,27477],{"class":663}," \u003CTresMeshToonMaterial color=\"orange\" />\n",[617,27479,27480,27482,27484],{"class":619,"line":725},[617,27481,712],{"class":622},[617,27483,201],{"class":626},[617,27485,649],{"class":622},[1307,27487,27488],{},"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":556,"searchDepth":557,"depth":558,"links":27490},[27491],{"id":604,"depth":558,"text":15},"Short-cut for a BoxGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":201,"description":27492},"EvaXEC2iSPj1-74ZRQEV-iGoScGBI5kq_mAZQoDjltE",{"id":27497,"title":205,"body":27498,"description":27999,"extension":571,"links":572,"meta":28000,"navigation":574,"path":206,"seo":28001,"stem":207,"__hash__":28002},"docs/2.api/5.shapes/catmullromcurve3.md",{"type":481,"value":27499,"toc":27995},[27500,27505,27513,27536,27538,27760,27762,27993],[2275,27501,27502],{},[27503,27504],"shapes-catmull-rom-curve3",{},[594,27506,2756,27507,8223,27509,27512],{},[598,27508,7297],{},[598,27510,27511],{},"\u003CCatmullRomCurve3 />"," component that allows you to make smooth(ish) 3D lines.",[594,27514,27515,27517,27518,27525,27526,27529,27530],{},[598,27516,27511],{}," wraps ",[1120,27519,27522,27523],{"href":27520,"rel":27521},"https://threejs.org/docs/index.html?q=catmu#api/en/extras/curves/CatmullRomCurve3",[1124],"Three.js's ",[598,27524,205],{}," functionality, but applies it to Cientos' ",[598,27527,27528],{},"\u003CLine2 />"," under the hood, meaning you can use ",[1120,27531,27533,27534,1126],{"href":27532},"line2#props","all the props from ",[598,27535,27528],{},[484,27537,15],{"id":604},[606,27539,27542],{"className":608,"code":27540,"highlights":27541,"language":613,"meta":556,"style":556},"\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",[688,780,785,807,611,830],[598,27543,27544,27564,27582,27602,27621,27629,27633,27641,27649,27667,27675,27690,27704,27718,27732,27736,27744,27752],{"__ignoreMap":556},[617,27545,27546,27548,27550,27552,27554,27556,27558,27560,27562],{"class":619,"line":557},[617,27547,623],{"class":622},[617,27549,627],{"class":626},[617,27551,631],{"class":630},[617,27553,634],{"class":630},[617,27555,637],{"class":622},[617,27557,640],{"class":622},[617,27559,644],{"class":643},[617,27561,640],{"class":622},[617,27563,649],{"class":622},[617,27565,27566,27568,27570,27572,27574,27576,27578,27580],{"class":619,"line":558},[617,27567,657],{"class":656},[617,27569,660],{"class":622},[617,27571,695],{"class":663},[617,27573,673],{"class":622},[617,27575,676],{"class":656},[617,27577,679],{"class":622},[617,27579,704],{"class":643},[617,27581,685],{"class":622},[617,27583,27585,27587,27589,27592,27594,27596,27598,27600],{"class":27584,"line":688},[619,653],[617,27586,657],{"class":656},[617,27588,660],{"class":622},[617,27590,27591],{"class":663}," CatmullRomCurve3",[617,27593,673],{"class":622},[617,27595,676],{"class":656},[617,27597,679],{"class":622},[617,27599,682],{"class":643},[617,27601,685],{"class":622},[617,27603,27604,27606,27608,27611,27613,27615,27617,27619],{"class":619,"line":709},[617,27605,657],{"class":656},[617,27607,660],{"class":622},[617,27609,27610],{"class":663}," Vector3",[617,27612,673],{"class":622},[617,27614,676],{"class":656},[617,27616,679],{"class":622},[617,27618,4606],{"class":643},[617,27620,685],{"class":622},[617,27622,27623,27625,27627],{"class":619,"line":719},[617,27624,712],{"class":622},[617,27626,627],{"class":626},[617,27628,649],{"class":622},[617,27630,27631],{"class":619,"line":725},[617,27632,722],{"emptyLinePlaceholder":574},[617,27634,27635,27637,27639],{"class":619,"line":735},[617,27636,623],{"class":622},[617,27638,730],{"class":626},[617,27640,649],{"class":622},[617,27642,27643,27645,27647],{"class":619,"line":758},[617,27644,738],{"class":622},[617,27646,741],{"class":626},[617,27648,649],{"class":622},[617,27650,27651,27653,27655,27657,27659,27661,27663,27665],{"class":619,"line":770},[617,27652,761],{"class":622},[617,27654,764],{"class":626},[617,27656,1465],{"class":630},[617,27658,637],{"class":622},[617,27660,640],{"class":622},[617,27662,11330],{"class":643},[617,27664,640],{"class":622},[617,27666,767],{"class":622},[617,27668,27670,27672],{"class":27669,"line":780},[619,653],[617,27671,761],{"class":622},[617,27673,27674],{"class":626},"CatmullRomCurve3\n",[617,27676,27678,27681,27683,27685,27688],{"class":27677,"line":785},[619,653],[617,27679,27680],{"class":630}," :points",[617,27682,637],{"class":622},[617,27684,640],{"class":622},[617,27686,27687],{"class":643},"[new Vector3(-1, 0, 0), new Vector3(0, 1, 0), new Vector3(1, 0, 0)]",[617,27689,3111],{"class":622},[617,27691,27693,27696,27698,27700,27702],{"class":27692,"line":807},[619,653],[617,27694,27695],{"class":630}," :segments",[617,27697,637],{"class":622},[617,27699,640],{"class":622},[617,27701,9425],{"class":643},[617,27703,3111],{"class":622},[617,27705,27707,27710,27712,27714,27716],{"class":27706,"line":611},[619,653],[617,27708,27709],{"class":630}," color",[617,27711,637],{"class":622},[617,27713,640],{"class":622},[617,27715,11377],{"class":643},[617,27717,3111],{"class":622},[617,27719,27721,27724,27726,27728,27730],{"class":27720,"line":830},[619,653],[617,27722,27723],{"class":630}," :line-width",[617,27725,637],{"class":622},[617,27727,640],{"class":622},[617,27729,19006],{"class":643},[617,27731,3111],{"class":622},[617,27733,27734],{"class":619,"line":841},[617,27735,15248],{"class":622},[617,27737,27738,27740,27742],{"class":619,"line":852},[617,27739,761],{"class":622},[617,27741,8436],{"class":626},[617,27743,767],{"class":622},[617,27745,27746,27748,27750],{"class":619,"line":862},[617,27747,885],{"class":622},[617,27749,741],{"class":626},[617,27751,649],{"class":622},[617,27753,27754,27756,27758],{"class":619,"line":612},[617,27755,712],{"class":622},[617,27757,730],{"class":626},[617,27759,649],{"class":622},[484,27761,902],{"id":901},[907,27763,27764,27776],{},[910,27765,27766],{},[913,27767,27768,27770,27772,27774],{},[916,27769,918],{},[916,27771,5949],{},[916,27773,921],{},[916,27775,924],{},[926,27777,27778,27793,27808,27822,27838,27852,27867,27881,27895,27909,27923,27937,27951,27965,27979],{},[913,27779,27780,27783,27788,27791],{},[931,27781,27782],{},"points",[931,27784,27785],{},[598,27786,27787],{},"Array\u003CVector3 | [number, number, number]>",[931,27789,27790],{},"Curve's control points",[931,27792],{},[913,27794,27795,27798,27802,27805],{},[931,27796,27797],{},"segments",[931,27799,27800],{},[598,27801,5332],{},[931,27803,27804],{},"Number of segments in the resulting curve (higher = smoother)",[931,27806,27807],{},"20",[913,27809,27810,27813,27817,27820],{},[931,27811,27812],{},"closed",[931,27814,27815],{},[598,27816,15441],{},[931,27818,27819],{},"The curve will loop back onto itself when this is true.",[931,27821,951],{},[913,27823,27824,27827,27832,27835],{},[931,27825,27826],{},"curveType",[931,27828,27829],{},[598,27830,27831],{},"'centripetal' | 'chordal' | 'catmullrom'",[931,27833,27834],{},"Curve type",[931,27836,27837],{},"'centripetal'",[913,27839,27840,27843,27847,27850],{},[931,27841,27842],{},"tension",[931,27844,27845],{},[598,27846,5332],{},[931,27848,27849],{},"Catmullrom's tension, when curveType is 'catmullrom'",[931,27851,1926],{},[913,27853,27854,27857,27862,27865],{},[931,27855,27856],{},"vertexColors",[931,27858,27859],{},[598,27860,27861],{},"TresColor[]",[931,27863,27864],{},"Vertex colors, if using",[931,27866,3636],{},[913,27868,27869,27871,27875,27878],{},[931,27870,7527],{},[931,27872,27873],{},[598,27874,7542],{},[931,27876,27877],{},"Color for the line – multiplies vertex colors",[931,27879,27880],{},"'white'",[913,27882,27883,27886,27890,27893],{},[931,27884,27885],{},"lineWidth",[931,27887,27888],{},[598,27889,5332],{},[931,27891,27892],{},"Width of the line – in world units with size attenuation, pixels otherwise",[931,27894,1854],{},[913,27896,27897,27900,27904,27907],{},[931,27898,27899],{},"worldUnits",[931,27901,27902],{},[598,27903,15441],{},[931,27905,27906],{},"Whether the line width is in world units or pixels",[931,27908,951],{},[913,27910,27911,27914,27918,27921],{},[931,27912,27913],{},"alphaToCoverage",[931,27915,27916],{},[598,27917,15441],{},[931,27919,27920],{},"Enables alpha to coverage. Can only be used with MSAA-enabled contexts (meaning when the renderer was created with antialias parameter set to true).",[931,27922,951],{},[913,27924,27925,27928,27932,27935],{},[931,27926,27927],{},"dashed",[931,27929,27930],{},[598,27931,15441],{},[931,27933,27934],{},"Whether the line is dashed",[931,27936,951],{},[913,27938,27939,27942,27946,27949],{},[931,27940,27941],{},"dashSize",[931,27943,27944],{},[598,27945,5332],{},[931,27947,27948],{},"Dash size",[931,27950,1854],{},[913,27952,27953,27956,27960,27963],{},[931,27954,27955],{},"gapSize",[931,27957,27958],{},[598,27959,5332],{},[931,27961,27962],{},"Gap size in dashed line",[931,27964,1854],{},[913,27966,27967,27970,27974,27977],{},[931,27968,27969],{},"dashScale",[931,27971,27972],{},[598,27973,5332],{},[931,27975,27976],{},"Scale of the dashes/gaps",[931,27978,1854],{},[913,27980,27981,27984,27988,27991],{},[931,27982,27983],{},"dashOffset",[931,27985,27986],{},[598,27987,5332],{},[931,27989,27990],{},"Dash offset",[931,27992,945],{},[1307,27994,1624],{},{"title":556,"searchDepth":557,"depth":558,"links":27996},[27997,27998],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},"Allows you to make smooth 3D lines using Catmull-Rom curves.",{},{"title":205,"description":27999},"qeOP9WBmpA_w2Yd5qceOSBKv-l797GiqondBBAasbSM",{"id":28004,"title":209,"body":28005,"description":28169,"extension":571,"links":572,"meta":28170,"navigation":574,"path":210,"seo":28171,"stem":211,"__hash__":28172},"docs/2.api/5.shapes/circle.md",{"type":481,"value":28006,"toc":28166},[28007,28012,28022,28028,28034,28036,28164],[588,28008,28009],{},[28010,28011],"shapes-circle",{},[594,28013,2756,28014,8223,28016,27328,28019,1126],{},[598,28015,7297],{},[598,28017,28018],{},"\u003CCircle />",[598,28020,28021],{},"CircleGeometry",[606,28023,28026],{"className":28024,"code":28025,"language":27337},[27335],"args: [radius: number, segments: number, thetaStart: number, thetaLength: number]\n",[598,28027,28025],{"__ignoreMap":556},[594,28029,27342,28030],{},[1120,28031,28021],{"href":28032,"rel":28033},"https://threejs.org/docs/?q=circle#api/en/geometries/CircleGeometry",[1124],[484,28035,15],{"id":604},[606,28037,28039],{"className":608,"code":28038,"language":613,"meta":556,"style":556},"\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",[598,28040,28041,28080,28084,28089,28152,28156],{"__ignoreMap":556},[617,28042,28043,28045,28047,28049,28051,28053,28055,28057,28059,28061,28064,28066,28068,28070,28072,28074,28076,28078],{"class":619,"line":557},[617,28044,623],{"class":622},[617,28046,209],{"class":626},[617,28048,3009],{"class":622},[617,28050,27364],{"class":630},[617,28052,637],{"class":622},[617,28054,640],{"class":622},[617,28056,18946],{"class":663},[617,28058,1854],{"class":2481},[617,28060,667],{"class":622},[617,28062,28063],{"class":2481}," 32",[617,28065,2494],{"class":663},[617,28067,640],{"class":622},[617,28069,2669],{"class":630},[617,28071,637],{"class":622},[617,28073,640],{"class":622},[617,28075,11377],{"class":643},[617,28077,640],{"class":622},[617,28079,767],{"class":622},[617,28081,28082],{"class":619,"line":558},[617,28083,722],{"emptyLinePlaceholder":574},[617,28085,28086],{"class":619,"line":688},[617,28087,28088],{"class":663},"// Circle with a custom material transformations\n",[617,28090,28091,28093,28095,28097,28099,28101,28104,28106,28108,28110,28112,28114,28116,28118,28120,28122,28124,28126,28128,28130,28132,28134,28136,28138,28140,28142,28144,28146,28148,28150],{"class":619,"line":709},[617,28092,623],{"class":622},[617,28094,209],{"class":626},[617,28096,3852],{"class":630},[617,28098,637],{"class":622},[617,28100,640],{"class":622},[617,28102,28103],{"class":643},"circleRef",[617,28105,640],{"class":622},[617,28107,3009],{"class":622},[617,28109,27364],{"class":630},[617,28111,637],{"class":622},[617,28113,640],{"class":622},[617,28115,18946],{"class":663},[617,28117,1854],{"class":2481},[617,28119,667],{"class":622},[617,28121,28063],{"class":2481},[617,28123,2494],{"class":663},[617,28125,640],{"class":622},[617,28127,3009],{"class":622},[617,28129,4110],{"class":630},[617,28131,637],{"class":622},[617,28133,640],{"class":622},[617,28135,18946],{"class":663},[617,28137,945],{"class":2481},[617,28139,667],{"class":622},[617,28141,2486],{"class":2481},[617,28143,667],{"class":622},[617,28145,2486],{"class":2481},[617,28147,2494],{"class":663},[617,28149,640],{"class":622},[617,28151,649],{"class":622},[617,28153,28154],{"class":619,"line":719},[617,28155,27477],{"class":663},[617,28157,28158,28160,28162],{"class":619,"line":725},[617,28159,712],{"class":622},[617,28161,209],{"class":626},[617,28163,649],{"class":622},[1307,28165,27488],{},{"title":556,"searchDepth":557,"depth":558,"links":28167},[28168],{"id":604,"depth":558,"text":15},"Short-cut for a CircleGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":209,"description":28169},"wQLfnhseui4b7Q0fQxQzwX-2D_yemIZgwYA9Cpmtxvo",{"id":28174,"title":213,"body":28175,"description":28347,"extension":571,"links":572,"meta":28348,"navigation":574,"path":214,"seo":28349,"stem":215,"__hash__":28350},"docs/2.api/5.shapes/cone.md",{"type":481,"value":28176,"toc":28344},[28177,28182,28192,28198,28204,28206,28342],[588,28178,28179],{},[28180,28181],"shapes-cone",{},[594,28183,2756,28184,8223,28186,27328,28189,1126],{},[598,28185,7297],{},[598,28187,28188],{},"\u003CCone />",[598,28190,28191],{},"ConeGeometry",[606,28193,28196],{"className":28194,"code":28195,"language":27337},[27335],"args: [\n radius: number,\n height: number,\n radialSegments: number,\n heightSegments: number,\n openEnded: boolean,\n thetaStart: number,\n thetaLength: number\n]\n",[598,28197,28195],{"__ignoreMap":556},[594,28199,27342,28200],{},[1120,28201,28191],{"href":28202,"rel":28203},"https://threejs.org/docs/?q=cone#api/en/geometries/ConeGeometry",[1124],[484,28205,15],{"id":604},[606,28207,28209],{"className":608,"code":28208,"language":613,"meta":556,"style":556},"\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",[598,28210,28211,28254,28258,28263,28330,28334],{"__ignoreMap":556},[617,28212,28213,28215,28217,28219,28221,28223,28225,28227,28229,28231,28233,28235,28238,28240,28242,28244,28246,28248,28250,28252],{"class":619,"line":557},[617,28214,623],{"class":622},[617,28216,213],{"class":626},[617,28218,3009],{"class":622},[617,28220,27364],{"class":630},[617,28222,637],{"class":622},[617,28224,640],{"class":622},[617,28226,18946],{"class":663},[617,28228,1854],{"class":2481},[617,28230,667],{"class":622},[617,28232,2541],{"class":2481},[617,28234,667],{"class":622},[617,28236,28237],{"class":2481}," 8",[617,28239,2494],{"class":663},[617,28241,640],{"class":622},[617,28243,2669],{"class":630},[617,28245,637],{"class":622},[617,28247,640],{"class":622},[617,28249,11377],{"class":643},[617,28251,640],{"class":622},[617,28253,767],{"class":622},[617,28255,28256],{"class":619,"line":558},[617,28257,722],{"emptyLinePlaceholder":574},[617,28259,28260],{"class":619,"line":688},[617,28261,28262],{"class":663},"// Cone with a custom material transformations\n",[617,28264,28265,28267,28269,28271,28273,28275,28278,28280,28282,28284,28286,28288,28290,28292,28294,28296,28298,28300,28302,28304,28306,28308,28310,28312,28314,28316,28318,28320,28322,28324,28326,28328],{"class":619,"line":709},[617,28266,623],{"class":622},[617,28268,213],{"class":626},[617,28270,3852],{"class":630},[617,28272,637],{"class":622},[617,28274,640],{"class":622},[617,28276,28277],{"class":643},"coneRef",[617,28279,640],{"class":622},[617,28281,3009],{"class":622},[617,28283,27364],{"class":630},[617,28285,637],{"class":622},[617,28287,640],{"class":622},[617,28289,18946],{"class":663},[617,28291,1854],{"class":2481},[617,28293,667],{"class":622},[617,28295,2541],{"class":2481},[617,28297,667],{"class":622},[617,28299,28237],{"class":2481},[617,28301,2494],{"class":663},[617,28303,640],{"class":622},[617,28305,3009],{"class":622},[617,28307,4110],{"class":630},[617,28309,637],{"class":622},[617,28311,640],{"class":622},[617,28313,18946],{"class":663},[617,28315,945],{"class":2481},[617,28317,667],{"class":622},[617,28319,27462],{"class":2481},[617,28321,667],{"class":622},[617,28323,2486],{"class":2481},[617,28325,2494],{"class":663},[617,28327,640],{"class":622},[617,28329,649],{"class":622},[617,28331,28332],{"class":619,"line":719},[617,28333,27477],{"class":663},[617,28335,28336,28338,28340],{"class":619,"line":725},[617,28337,712],{"class":622},[617,28339,213],{"class":626},[617,28341,649],{"class":622},[1307,28343,27488],{},{"title":556,"searchDepth":557,"depth":558,"links":28345},[28346],{"id":604,"depth":558,"text":15},"Short-cut for a ConeGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":213,"description":28347},"LobanFD68GY4U45rEkqMogA7guX1DZi5E6MMnCuki0k",{"id":28352,"title":217,"body":28353,"description":28734,"extension":571,"links":572,"meta":28735,"navigation":574,"path":218,"seo":28736,"stem":219,"__hash__":28737},"docs/2.api/5.shapes/cubic-bezier-line.md",{"type":481,"value":28354,"toc":28730},[28355,28360,28369,28371,28624,28626,28635,28728],[2275,28356,28357],{},[28358,28359],"shapes-cubic-bezier-line",{},[594,28361,28362,28365,28366,28368],{},[598,28363,28364],{},"\u003CCubicBezierLine />"," renders a ",[598,28367,27528],{}," between start and end points, with additional 2 control points.",[484,28370,15],{"id":604},[606,28372,28374],{"className":608,"code":28373,"language":613,"meta":556,"style":556},"\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",[598,28375,28376,28396,28414,28433,28451,28459,28463,28471,28479,28497,28504,28518,28532,28546,28560,28572,28584,28596,28600,28608,28616],{"__ignoreMap":556},[617,28377,28378,28380,28382,28384,28386,28388,28390,28392,28394],{"class":619,"line":557},[617,28379,623],{"class":622},[617,28381,627],{"class":626},[617,28383,631],{"class":630},[617,28385,634],{"class":630},[617,28387,637],{"class":622},[617,28389,640],{"class":622},[617,28391,644],{"class":643},[617,28393,640],{"class":622},[617,28395,649],{"class":622},[617,28397,28398,28400,28402,28404,28406,28408,28410,28412],{"class":619,"line":558},[617,28399,657],{"class":656},[617,28401,660],{"class":622},[617,28403,695],{"class":663},[617,28405,673],{"class":622},[617,28407,676],{"class":656},[617,28409,679],{"class":622},[617,28411,704],{"class":643},[617,28413,685],{"class":622},[617,28415,28416,28418,28420,28423,28425,28427,28429,28431],{"class":619,"line":688},[617,28417,657],{"class":656},[617,28419,660],{"class":622},[617,28421,28422],{"class":663}," CubicBezierLine",[617,28424,673],{"class":622},[617,28426,676],{"class":656},[617,28428,679],{"class":622},[617,28430,682],{"class":643},[617,28432,685],{"class":622},[617,28434,28435,28437,28439,28441,28443,28445,28447,28449],{"class":619,"line":709},[617,28436,657],{"class":656},[617,28438,660],{"class":622},[617,28440,27610],{"class":663},[617,28442,673],{"class":622},[617,28444,676],{"class":656},[617,28446,679],{"class":622},[617,28448,4606],{"class":643},[617,28450,685],{"class":622},[617,28452,28453,28455,28457],{"class":619,"line":719},[617,28454,712],{"class":622},[617,28456,627],{"class":626},[617,28458,649],{"class":622},[617,28460,28461],{"class":619,"line":725},[617,28462,722],{"emptyLinePlaceholder":574},[617,28464,28465,28467,28469],{"class":619,"line":735},[617,28466,623],{"class":622},[617,28468,730],{"class":626},[617,28470,649],{"class":622},[617,28472,28473,28475,28477],{"class":619,"line":758},[617,28474,738],{"class":622},[617,28476,741],{"class":626},[617,28478,649],{"class":622},[617,28480,28481,28483,28485,28487,28489,28491,28493,28495],{"class":619,"line":770},[617,28482,761],{"class":622},[617,28484,764],{"class":626},[617,28486,1465],{"class":630},[617,28488,637],{"class":622},[617,28490,640],{"class":622},[617,28492,11330],{"class":643},[617,28494,640],{"class":622},[617,28496,767],{"class":622},[617,28498,28499,28501],{"class":619,"line":780},[617,28500,761],{"class":622},[617,28502,28503],{"class":626},"CubicBezierLine\n",[617,28505,28506,28509,28511,28513,28516],{"class":619,"line":785},[617,28507,28508],{"class":630}," :start",[617,28510,637],{"class":622},[617,28512,640],{"class":622},[617,28514,28515],{"class":643},"new Vector3(-1, 0, 0)",[617,28517,3111],{"class":622},[617,28519,28520,28523,28525,28527,28530],{"class":619,"line":807},[617,28521,28522],{"class":630}," :end",[617,28524,637],{"class":622},[617,28526,640],{"class":622},[617,28528,28529],{"class":643},"new Vector3(1, 0, 0)",[617,28531,3111],{"class":622},[617,28533,28534,28537,28539,28541,28544],{"class":619,"line":611},[617,28535,28536],{"class":630}," :midA",[617,28538,637],{"class":622},[617,28540,640],{"class":622},[617,28542,28543],{"class":643},"new Vector3(-0.5, 1, 0)",[617,28545,3111],{"class":622},[617,28547,28548,28551,28553,28555,28558],{"class":619,"line":830},[617,28549,28550],{"class":630}," :midB",[617,28552,637],{"class":622},[617,28554,640],{"class":622},[617,28556,28557],{"class":643},"new Vector3(0.5, 1, 0)",[617,28559,3111],{"class":622},[617,28561,28562,28564,28566,28568,28570],{"class":619,"line":841},[617,28563,27695],{"class":630},[617,28565,637],{"class":622},[617,28567,640],{"class":622},[617,28569,9425],{"class":643},[617,28571,3111],{"class":622},[617,28573,28574,28576,28578,28580,28582],{"class":619,"line":852},[617,28575,27709],{"class":630},[617,28577,637],{"class":622},[617,28579,640],{"class":622},[617,28581,11377],{"class":643},[617,28583,3111],{"class":622},[617,28585,28586,28588,28590,28592,28594],{"class":619,"line":862},[617,28587,27723],{"class":630},[617,28589,637],{"class":622},[617,28591,640],{"class":622},[617,28593,19006],{"class":643},[617,28595,3111],{"class":622},[617,28597,28598],{"class":619,"line":612},[617,28599,15248],{"class":622},[617,28601,28602,28604,28606],{"class":619,"line":882},[617,28603,761],{"class":622},[617,28605,8436],{"class":626},[617,28607,767],{"class":622},[617,28609,28610,28612,28614],{"class":619,"line":892},[617,28611,885],{"class":622},[617,28613,741],{"class":626},[617,28615,649],{"class":622},[617,28617,28618,28620,28622],{"class":619,"line":2605},[617,28619,712],{"class":622},[617,28621,730],{"class":626},[617,28623,649],{"class":622},[484,28625,902],{"id":901},[594,28627,28628,28630,28631,7199,28633,1126],{},[598,28629,28364],{}," inherits all props but ",[598,28632,27782],{},[598,28634,27528],{},[907,28636,28637,28649],{},[910,28638,28639],{},[913,28640,28641,28643,28645,28647],{},[916,28642,918],{},[916,28644,5949],{},[916,28646,921],{},[916,28648,924],{},[926,28650,28651,28667,28682,28698,28714],{},[913,28652,28653,28657,28662,28665],{},[931,28654,28655],{},[598,28656,12360],{},[931,28658,28659],{},[598,28660,28661],{},"Vector3 | [number, number, number]",[931,28663,28664],{},"Starting point",[931,28666],{},[913,28668,28669,28673,28677,28680],{},[931,28670,28671],{},[598,28672,12374],{},[931,28674,28675],{},[598,28676,28661],{},[931,28678,28679],{},"Ending point",[931,28681],{},[913,28683,28684,28689,28693,28696],{},[931,28685,28686],{},[598,28687,28688],{},"midA",[931,28690,28691],{},[598,28692,28661],{},[931,28694,28695],{},"First control point",[931,28697],{},[913,28699,28700,28705,28709,28712],{},[931,28701,28702],{},[598,28703,28704],{},"midB",[931,28706,28707],{},[598,28708,28661],{},[931,28710,28711],{},"Second control point",[931,28713],{},[913,28715,28716,28720,28724,28726],{},[931,28717,28718],{},[598,28719,27797],{},[931,28721,28722],{},[598,28723,5332],{},[931,28725,27804],{},[931,28727,27807],{},[1307,28729,1624],{},{"title":556,"searchDepth":557,"depth":558,"links":28731},[28732,28733],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},"Renders a Line2 between start and end points with two control points.",{},{"title":217,"description":28734},"Bi4-z99FCo5x_LjzwKRj0meHtbAxC8tTMsvdiP4y5sU",{"id":28739,"title":221,"body":28740,"description":28971,"extension":571,"links":572,"meta":28972,"navigation":574,"path":222,"seo":28973,"stem":223,"__hash__":28974},"docs/2.api/5.shapes/cylinder.md",{"type":481,"value":28741,"toc":28968},[28742,28747,28757,28763,28769,28771,28965],[588,28743,28744],{},[28745,28746],"shapes-cylinder",{},[594,28748,2756,28749,8223,28751,27328,28754,1126],{},[598,28750,7297],{},[598,28752,28753],{},"\u003CCylinder />",[598,28755,28756],{},"CylinderGeometry",[606,28758,28761],{"className":28759,"code":28760,"language":27337},[27335],"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",[598,28762,28760],{"__ignoreMap":556},[594,28764,27342,28765],{},[1120,28766,28756],{"href":28767,"rel":28768},"https://threejs.org/docs/?q=cylinder#api/en/geometries/CylinderGeometry",[1124],[484,28770,15],{"id":604},[606,28772,28774],{"className":608,"code":28773,"language":613,"meta":556,"style":556},"\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",[598,28775,28776,28849,28853,28858,28953,28957],{"__ignoreMap":556},[617,28777,28778,28780,28782,28784,28786,28788,28790,28792,28794,28796,28798,28800,28802,28804,28806,28808,28810,28812,28814,28816,28818,28820,28823,28825,28828,28830,28833,28835,28837,28839,28841,28843,28845,28847],{"class":619,"line":557},[617,28779,623],{"class":622},[617,28781,221],{"class":626},[617,28783,3009],{"class":622},[617,28785,27364],{"class":630},[617,28787,637],{"class":622},[617,28789,640],{"class":622},[617,28791,18946],{"class":663},[617,28793,1854],{"class":2481},[617,28795,667],{"class":622},[617,28797,2541],{"class":2481},[617,28799,667],{"class":622},[617,28801,2541],{"class":2481},[617,28803,667],{"class":622},[617,28805,28063],{"class":2481},[617,28807,667],{"class":622},[617,28809,2541],{"class":2481},[617,28811,667],{"class":622},[617,28813,6705],{"class":4377},[617,28815,667],{"class":622},[617,28817,2486],{"class":2481},[617,28819,667],{"class":622},[617,28821,28822],{"class":663}," Math",[617,28824,1126],{"class":622},[617,28826,28827],{"class":663},"PI ",[617,28829,20734],{"class":622},[617,28831,28832],{"class":2481}," 2",[617,28834,2494],{"class":663},[617,28836,640],{"class":622},[617,28838,2669],{"class":630},[617,28840,637],{"class":622},[617,28842,640],{"class":622},[617,28844,11377],{"class":643},[617,28846,640],{"class":622},[617,28848,767],{"class":622},[617,28850,28851],{"class":619,"line":558},[617,28852,722],{"emptyLinePlaceholder":574},[617,28854,28855],{"class":619,"line":688},[617,28856,28857],{"class":663},"// Cylinder with a custom material transformations\n",[617,28859,28860,28862,28864,28866,28868,28870,28873,28875,28877,28879,28881,28883,28885,28887,28889,28891,28893,28895,28897,28899,28901,28903,28905,28907,28909,28911,28913,28915,28917,28919,28921,28923,28925,28927,28929,28931,28933,28935,28937,28939,28941,28943,28945,28947,28949,28951],{"class":619,"line":709},[617,28861,623],{"class":622},[617,28863,221],{"class":626},[617,28865,3852],{"class":630},[617,28867,637],{"class":622},[617,28869,640],{"class":622},[617,28871,28872],{"class":643},"cylinderRef",[617,28874,640],{"class":622},[617,28876,3009],{"class":622},[617,28878,27364],{"class":630},[617,28880,637],{"class":622},[617,28882,640],{"class":622},[617,28884,18946],{"class":663},[617,28886,1854],{"class":2481},[617,28888,667],{"class":622},[617,28890,2541],{"class":2481},[617,28892,667],{"class":622},[617,28894,2541],{"class":2481},[617,28896,667],{"class":622},[617,28898,28063],{"class":2481},[617,28900,667],{"class":622},[617,28902,2541],{"class":2481},[617,28904,667],{"class":622},[617,28906,6705],{"class":4377},[617,28908,667],{"class":622},[617,28910,2486],{"class":2481},[617,28912,667],{"class":622},[617,28914,28822],{"class":663},[617,28916,1126],{"class":622},[617,28918,28827],{"class":663},[617,28920,20734],{"class":622},[617,28922,28832],{"class":2481},[617,28924,2494],{"class":663},[617,28926,640],{"class":622},[617,28928,3009],{"class":622},[617,28930,4110],{"class":630},[617,28932,637],{"class":622},[617,28934,640],{"class":622},[617,28936,18946],{"class":663},[617,28938,945],{"class":2481},[617,28940,667],{"class":622},[617,28942,27462],{"class":2481},[617,28944,667],{"class":622},[617,28946,2486],{"class":2481},[617,28948,2494],{"class":663},[617,28950,640],{"class":622},[617,28952,649],{"class":622},[617,28954,28955],{"class":619,"line":719},[617,28956,27477],{"class":663},[617,28958,28959,28961,28963],{"class":619,"line":725},[617,28960,712],{"class":622},[617,28962,221],{"class":626},[617,28964,649],{"class":622},[1307,28966,28967],{},"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":556,"searchDepth":557,"depth":558,"links":28969},[28970],{"id":604,"depth":558,"text":15},"Short-cut for a CylinderGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":221,"description":28971},"YTuULikIuPOFc-aN9KEgAYGN8T0QxNG4817fqzStsM0",{"id":28976,"title":225,"body":28977,"description":29140,"extension":571,"links":572,"meta":29141,"navigation":574,"path":226,"seo":29142,"stem":227,"__hash__":29143},"docs/2.api/5.shapes/dodecahedron.md",{"type":481,"value":28978,"toc":29137},[28979,28984,28994,29000,29006,29008,29135],[588,28980,28981],{},[28982,28983],"shapes-dodecahedron",{},[594,28985,2756,28986,8223,28988,27328,28991,1126],{},[598,28987,7297],{},[598,28989,28990],{},"\u003CDodecahedron />",[598,28992,28993],{},"DodecahedronGeometry",[606,28995,28998],{"className":28996,"code":28997,"language":27337},[27335],"args: [radius: number, detail: number]\n",[598,28999,28997],{"__ignoreMap":556},[594,29001,27342,29002],{},[1120,29003,28993],{"href":29004,"rel":29005},"https://threejs.org/docs/?q=dode#api/en/geometries/DodecahedronGeometry",[1124],[484,29007,15],{"id":604},[606,29009,29011],{"className":608,"code":29010,"language":613,"meta":556,"style":556},"\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",[598,29012,29013,29051,29055,29060,29123,29127],{"__ignoreMap":556},[617,29014,29015,29017,29019,29021,29023,29025,29027,29029,29031,29033,29035,29037,29039,29041,29043,29045,29047,29049],{"class":619,"line":557},[617,29016,623],{"class":622},[617,29018,225],{"class":626},[617,29020,3009],{"class":622},[617,29022,27364],{"class":630},[617,29024,637],{"class":622},[617,29026,640],{"class":622},[617,29028,18946],{"class":663},[617,29030,1854],{"class":2481},[617,29032,667],{"class":622},[617,29034,2486],{"class":2481},[617,29036,2494],{"class":663},[617,29038,640],{"class":622},[617,29040,2669],{"class":630},[617,29042,637],{"class":622},[617,29044,640],{"class":622},[617,29046,11377],{"class":643},[617,29048,640],{"class":622},[617,29050,767],{"class":622},[617,29052,29053],{"class":619,"line":558},[617,29054,722],{"emptyLinePlaceholder":574},[617,29056,29057],{"class":619,"line":688},[617,29058,29059],{"class":663},"// Dodecahedron with a custom material transformations\n",[617,29061,29062,29064,29066,29068,29070,29072,29075,29077,29079,29081,29083,29085,29087,29089,29091,29093,29095,29097,29099,29101,29103,29105,29107,29109,29111,29113,29115,29117,29119,29121],{"class":619,"line":709},[617,29063,623],{"class":622},[617,29065,225],{"class":626},[617,29067,3852],{"class":630},[617,29069,637],{"class":622},[617,29071,640],{"class":622},[617,29073,29074],{"class":643},"dodecahedronRef",[617,29076,640],{"class":622},[617,29078,3009],{"class":622},[617,29080,27364],{"class":630},[617,29082,637],{"class":622},[617,29084,640],{"class":622},[617,29086,18946],{"class":663},[617,29088,1854],{"class":2481},[617,29090,667],{"class":622},[617,29092,2486],{"class":2481},[617,29094,2494],{"class":663},[617,29096,640],{"class":622},[617,29098,3009],{"class":622},[617,29100,4110],{"class":630},[617,29102,637],{"class":622},[617,29104,640],{"class":622},[617,29106,18946],{"class":663},[617,29108,800],{"class":2481},[617,29110,667],{"class":622},[617,29112,27462],{"class":2481},[617,29114,667],{"class":622},[617,29116,2486],{"class":2481},[617,29118,2494],{"class":663},[617,29120,640],{"class":622},[617,29122,649],{"class":622},[617,29124,29125],{"class":619,"line":719},[617,29126,27477],{"class":663},[617,29128,29129,29131,29133],{"class":619,"line":725},[617,29130,712],{"class":622},[617,29132,225],{"class":626},[617,29134,649],{"class":622},[1307,29136,27488],{},{"title":556,"searchDepth":557,"depth":558,"links":29138},[29139],{"id":604,"depth":558,"text":15},"Short-cut for a DodecahedronGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":225,"description":29140},"9Gw9CLOluoUzozbppxnr0DGwqvfyqgSPCC05IqHhr00",{"id":29145,"title":229,"body":29146,"description":29682,"extension":571,"links":572,"meta":29683,"navigation":574,"path":230,"seo":29684,"stem":231,"__hash__":29685},"docs/2.api/5.shapes/grid.md",{"type":481,"value":29147,"toc":29678},[29148,29153,29159,29161,29491,29493,29676],[588,29149,29150],{},[29151,29152],"shapes-grid",{},[594,29154,29155,29158],{},[598,29156,29157],{},"\u003CGrid />"," creates a shader-based grid plane. It has customizable grid cell and section lines, as well as fade out.",[484,29160,15],{"id":604},[606,29162,29165],{"className":608,"code":29163,"highlights":29164,"language":613,"meta":556,"style":556},"\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",[558,780,785,807,611,830,841,852,862,612,882,892,2605],[598,29166,29167,29187,29211,29229,29237,29241,29249,29268,29299,29307,29315,29329,29343,29357,29371,29385,29399,29414,29428,29442,29457,29471,29475,29483],{"__ignoreMap":556},[617,29168,29169,29171,29173,29175,29177,29179,29181,29183,29185],{"class":619,"line":557},[617,29170,623],{"class":622},[617,29172,627],{"class":626},[617,29174,631],{"class":630},[617,29176,634],{"class":630},[617,29178,637],{"class":622},[617,29180,640],{"class":622},[617,29182,644],{"class":643},[617,29184,640],{"class":622},[617,29186,649],{"class":622},[617,29188,29190,29192,29194,29197,29199,29201,29203,29205,29207,29209],{"class":29189,"line":558},[619,653],[617,29191,657],{"class":656},[617,29193,660],{"class":622},[617,29195,29196],{"class":663}," Grid",[617,29198,667],{"class":622},[617,29200,670],{"class":663},[617,29202,673],{"class":622},[617,29204,676],{"class":656},[617,29206,679],{"class":622},[617,29208,682],{"class":643},[617,29210,685],{"class":622},[617,29212,29213,29215,29217,29219,29221,29223,29225,29227],{"class":619,"line":688},[617,29214,657],{"class":656},[617,29216,660],{"class":622},[617,29218,695],{"class":663},[617,29220,673],{"class":622},[617,29222,676],{"class":656},[617,29224,679],{"class":622},[617,29226,704],{"class":643},[617,29228,685],{"class":622},[617,29230,29231,29233,29235],{"class":619,"line":709},[617,29232,712],{"class":622},[617,29234,627],{"class":626},[617,29236,649],{"class":622},[617,29238,29239],{"class":619,"line":719},[617,29240,722],{"emptyLinePlaceholder":574},[617,29242,29243,29245,29247],{"class":619,"line":725},[617,29244,623],{"class":622},[617,29246,730],{"class":626},[617,29248,649],{"class":622},[617,29250,29251,29253,29255,29257,29259,29261,29264,29266],{"class":619,"line":735},[617,29252,738],{"class":622},[617,29254,741],{"class":626},[617,29256,744],{"class":630},[617,29258,637],{"class":622},[617,29260,640],{"class":622},[617,29262,29263],{"class":643},"#222222",[617,29265,640],{"class":622},[617,29267,649],{"class":622},[617,29269,29270,29272,29274,29276,29278,29280,29283,29285,29288,29290,29292,29295,29297],{"class":619,"line":758},[617,29271,761],{"class":622},[617,29273,764],{"class":626},[617,29275,1465],{"class":630},[617,29277,637],{"class":622},[617,29279,640],{"class":622},[617,29281,29282],{"class":643},"[8, 10, 10]",[617,29284,640],{"class":622},[617,29286,29287],{"class":630}," :fov",[617,29289,637],{"class":622},[617,29291,640],{"class":622},[617,29293,29294],{"class":643},"25",[617,29296,640],{"class":622},[617,29298,767],{"class":622},[617,29300,29301,29303,29305],{"class":619,"line":770},[617,29302,761],{"class":622},[617,29304,775],{"class":626},[617,29306,767],{"class":622},[617,29308,29310,29312],{"class":29309,"line":780},[619,653],[617,29311,761],{"class":622},[617,29313,29314],{"class":626},"Grid\n",[617,29316,29318,29320,29322,29324,29327],{"class":29317,"line":785},[619,653],[617,29319,10427],{"class":630},[617,29321,637],{"class":622},[617,29323,640],{"class":622},[617,29325,29326],{"class":643},"[10.5, 10.5]",[617,29328,3111],{"class":622},[617,29330,29332,29335,29337,29339,29341],{"class":29331,"line":807},[619,653],[617,29333,29334],{"class":630}," cell-color",[617,29336,637],{"class":622},[617,29338,640],{"class":622},[617,29340,9505],{"class":643},[617,29342,3111],{"class":622},[617,29344,29346,29349,29351,29353,29355],{"class":29345,"line":611},[619,653],[617,29347,29348],{"class":630}," :cell-size",[617,29350,637],{"class":622},[617,29352,640],{"class":622},[617,29354,27195],{"class":643},[617,29356,3111],{"class":622},[617,29358,29360,29363,29365,29367,29369],{"class":29359,"line":830},[619,653],[617,29361,29362],{"class":630}," :cell-thickness",[617,29364,637],{"class":622},[617,29366,640],{"class":622},[617,29368,1926],{"class":643},[617,29370,3111],{"class":622},[617,29372,29374,29377,29379,29381,29383],{"class":29373,"line":841},[619,653],[617,29375,29376],{"class":630}," section-color",[617,29378,637],{"class":622},[617,29380,640],{"class":622},[617,29382,8908],{"class":643},[617,29384,3111],{"class":622},[617,29386,29388,29391,29393,29395,29397],{"class":29387,"line":852},[619,653],[617,29389,29390],{"class":630}," :section-size",[617,29392,637],{"class":622},[617,29394,640],{"class":622},[617,29396,800],{"class":643},[617,29398,3111],{"class":622},[617,29400,29402,29405,29407,29409,29412],{"class":29401,"line":862},[619,653],[617,29403,29404],{"class":630}," :section-thickness",[617,29406,637],{"class":622},[617,29408,640],{"class":622},[617,29410,29411],{"class":643},"1.3",[617,29413,3111],{"class":622},[617,29415,29417,29420,29422,29424,29426],{"class":29416,"line":612},[619,653],[617,29418,29419],{"class":630}," :infinite-grid",[617,29421,637],{"class":622},[617,29423,640],{"class":622},[617,29425,941],{"class":643},[617,29427,3111],{"class":622},[617,29429,29431,29434,29436,29438,29440],{"class":29430,"line":882},[619,653],[617,29432,29433],{"class":630}," :fade-from",[617,29435,637],{"class":622},[617,29437,640],{"class":622},[617,29439,945],{"class":643},[617,29441,3111],{"class":622},[617,29443,29445,29448,29450,29452,29455],{"class":29444,"line":892},[619,653],[617,29446,29447],{"class":630}," :fade-distance",[617,29449,637],{"class":622},[617,29451,640],{"class":622},[617,29453,29454],{"class":643},"12",[617,29456,3111],{"class":622},[617,29458,29460,29463,29465,29467,29469],{"class":29459,"line":2605},[619,653],[617,29461,29462],{"class":630}," :fade-strength",[617,29464,637],{"class":622},[617,29466,640],{"class":622},[617,29468,1854],{"class":643},[617,29470,3111],{"class":622},[617,29472,29473],{"class":619,"line":2614},[617,29474,15248],{"class":622},[617,29476,29477,29479,29481],{"class":619,"line":2634},[617,29478,885],{"class":622},[617,29480,741],{"class":626},[617,29482,649],{"class":622},[617,29484,29485,29487,29489],{"class":619,"line":2643},[617,29486,712],{"class":622},[617,29488,730],{"class":626},[617,29490,649],{"class":622},[484,29492,902],{"id":901},[907,29494,29495,29505],{},[910,29496,29497],{},[913,29498,29499,29501,29503],{},[916,29500,918],{"align":977},[916,29502,921],{"align":977},[916,29504,924],{},[926,29506,29507,29521,29535,29549,29563,29577,29591,29605,29619,29634,29648,29662],{},[913,29508,29509,29514,29517],{},[931,29510,29511],{"align":977},[1649,29512,29513],{},"cellSize",[931,29515,29516],{"align":977},"Cell size",[931,29518,29519],{},[598,29520,1926],{},[913,29522,29523,29528,29531],{},[931,29524,29525],{"align":977},[1649,29526,29527],{},"cellThickness",[931,29529,29530],{"align":977},"Thickness of cell lines",[931,29532,29533],{},[598,29534,1926],{},[913,29536,29537,29542,29545],{},[931,29538,29539],{"align":977},[1649,29540,29541],{},"cellColor",[931,29543,29544],{"align":977},"Color of cell lines",[931,29546,29547],{},[598,29548,9643],{},[913,29550,29551,29556,29559],{},[931,29552,29553],{"align":977},[1649,29554,29555],{},"sectionSize",[931,29557,29558],{"align":977},"Section size",[931,29560,29561],{},[598,29562,1854],{},[913,29564,29565,29570,29573],{},[931,29566,29567],{"align":977},[1649,29568,29569],{},"sectionThickness",[931,29571,29572],{"align":977},"Thickness of section lines",[931,29574,29575],{},[598,29576,1854],{},[913,29578,29579,29584,29586],{},[931,29580,29581],{"align":977},[1649,29582,29583],{},"sectionColor",[931,29585,29544],{"align":977},[931,29587,29588],{},[598,29589,29590],{},"'blue'",[913,29592,29593,29598,29601],{},[931,29594,29595],{"align":977},[1649,29596,29597],{},"followCamera",[931,29599,29600],{"align":977},"Whether to follow camera",[931,29602,29603],{},[598,29604,951],{},[913,29606,29607,29612,29615],{},[931,29608,29609],{"align":977},[1649,29610,29611],{},"infiniteGrid",[931,29613,29614],{"align":977},"Whether to display an infinite grid",[931,29616,29617],{},[598,29618,951],{},[913,29620,29621,29626,29629],{},[931,29622,29623],{"align":977},[1649,29624,29625],{},"fadeDistance",[931,29627,29628],{"align":977},"Fade distance",[931,29630,29631],{},[598,29632,29633],{},"100",[913,29635,29636,29641,29644],{},[931,29637,29638],{"align":977},[1649,29639,29640],{},"fadeStrength",[931,29642,29643],{"align":977},"Fade strength",[931,29645,29646],{},[598,29647,1854],{},[913,29649,29650,29655,29658],{},[931,29651,29652],{"align":977},[1649,29653,29654],{},"fadeFrom",[931,29656,29657],{"align":977},"Fade from camera (1) or origin (0) or in between",[931,29659,29660],{},[598,29661,1854],{},[913,29663,29664,29668,29671],{},[931,29665,29666],{"align":977},[1649,29667,25010],{},[931,29669,29670],{"align":977},"Material side",[931,29672,29673],{},[598,29674,29675],{},"THREE.BackSide",[1307,29677,1624],{},{"title":556,"searchDepth":557,"depth":558,"links":29679},[29680,29681],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},"Shader-based grid plane with customizable cell and section lines.",{},{"title":229,"description":29682},"gUhcCJXpeIhlg4aOnkCR0HsAX8-yKo0ddjfKc6h8BKY",{"id":29687,"title":233,"body":29688,"description":29850,"extension":571,"links":572,"meta":29851,"navigation":574,"path":234,"seo":29852,"stem":235,"__hash__":29853},"docs/2.api/5.shapes/icosahedron.md",{"type":481,"value":29689,"toc":29847},[29690,29695,29705,29710,29716,29718,29845],[588,29691,29692],{},[29693,29694],"shapes-icosahedron",{},[594,29696,2756,29697,8223,29699,27328,29702,1126],{},[598,29698,7297],{},[598,29700,29701],{},"\u003CIcosahedron />",[598,29703,29704],{},"IcosahedronGeometry",[606,29706,29708],{"className":29707,"code":28997,"language":27337},[27335],[598,29709,28997],{"__ignoreMap":556},[594,29711,27342,29712],{},[1120,29713,29704],{"href":29714,"rel":29715},"https://threejs.org/docs/?q=ico#api/en/geometries/IcosahedronGeometry",[1124],[484,29717,15],{"id":604},[606,29719,29721],{"className":608,"code":29720,"language":613,"meta":556,"style":556},"\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",[598,29722,29723,29761,29765,29770,29833,29837],{"__ignoreMap":556},[617,29724,29725,29727,29729,29731,29733,29735,29737,29739,29741,29743,29745,29747,29749,29751,29753,29755,29757,29759],{"class":619,"line":557},[617,29726,623],{"class":622},[617,29728,233],{"class":626},[617,29730,3009],{"class":622},[617,29732,27364],{"class":630},[617,29734,637],{"class":622},[617,29736,640],{"class":622},[617,29738,18946],{"class":663},[617,29740,1854],{"class":2481},[617,29742,667],{"class":622},[617,29744,2486],{"class":2481},[617,29746,2494],{"class":663},[617,29748,640],{"class":622},[617,29750,2669],{"class":630},[617,29752,637],{"class":622},[617,29754,640],{"class":622},[617,29756,11377],{"class":643},[617,29758,640],{"class":622},[617,29760,767],{"class":622},[617,29762,29763],{"class":619,"line":558},[617,29764,722],{"emptyLinePlaceholder":574},[617,29766,29767],{"class":619,"line":688},[617,29768,29769],{"class":663},"// Icosahedron with a custom material transformations\n",[617,29771,29772,29774,29776,29778,29780,29782,29785,29787,29789,29791,29793,29795,29797,29799,29801,29803,29805,29807,29809,29811,29813,29815,29817,29819,29821,29823,29825,29827,29829,29831],{"class":619,"line":709},[617,29773,623],{"class":622},[617,29775,233],{"class":626},[617,29777,3852],{"class":630},[617,29779,637],{"class":622},[617,29781,640],{"class":622},[617,29783,29784],{"class":643},"icosahedronRef",[617,29786,640],{"class":622},[617,29788,3009],{"class":622},[617,29790,27364],{"class":630},[617,29792,637],{"class":622},[617,29794,640],{"class":622},[617,29796,18946],{"class":663},[617,29798,1854],{"class":2481},[617,29800,667],{"class":622},[617,29802,2486],{"class":2481},[617,29804,2494],{"class":663},[617,29806,640],{"class":622},[617,29808,3009],{"class":622},[617,29810,4110],{"class":630},[617,29812,637],{"class":622},[617,29814,640],{"class":622},[617,29816,18946],{"class":663},[617,29818,800],{"class":2481},[617,29820,667],{"class":622},[617,29822,27462],{"class":2481},[617,29824,667],{"class":622},[617,29826,2486],{"class":2481},[617,29828,2494],{"class":663},[617,29830,640],{"class":622},[617,29832,649],{"class":622},[617,29834,29835],{"class":619,"line":719},[617,29836,27477],{"class":663},[617,29838,29839,29841,29843],{"class":619,"line":725},[617,29840,712],{"class":622},[617,29842,233],{"class":626},[617,29844,649],{"class":622},[1307,29846,27488],{},{"title":556,"searchDepth":557,"depth":558,"links":29848},[29849],{"id":604,"depth":558,"text":15},"Short-cut for a IcosahedronGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":233,"description":29850},"8yFEbasoREduB_hHH4IqpVmHiF3zCgvuXNtzkba_4Jg",{"id":29855,"title":237,"body":29856,"description":30448,"extension":571,"links":572,"meta":30449,"navigation":574,"path":238,"seo":30450,"stem":239,"__hash__":30451},"docs/2.api/5.shapes/line2.md",{"type":481,"value":29857,"toc":30442},[29858,29863,29876,29878,30065,30067,30218,30221,30224,30229,30236,30299,30304,30436,30439],[2275,29859,29860],{},[29861,29862],"shapes-line2",{},[594,29864,2756,29865,8223,29867,29869,29870,1126],{},[598,29866,7297],{},[598,29868,27528],{}," component for creating 3-D lines. It wraps ",[1120,29871,27522,29874],{"href":29872,"rel":29873},"https://github.com/mrdoob/three.js/blob/e2bcdfff6427c2f106cb819b18d88d1e13aa508a/examples/jsm/lines/Line2.js",[1124],[598,29875,237],{},[484,29877,15],{"id":604},[606,29879,29882],{"className":608,"code":29880,"highlights":29881,"language":613,"meta":556,"style":556},"\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",[688,758,770,780,785,807],[598,29883,29884,29904,29922,29942,29950,29954,29962,29970,29989,29997,30011,30024,30037,30041,30049,30057],{"__ignoreMap":556},[617,29885,29886,29888,29890,29892,29894,29896,29898,29900,29902],{"class":619,"line":557},[617,29887,623],{"class":622},[617,29889,627],{"class":626},[617,29891,631],{"class":630},[617,29893,634],{"class":630},[617,29895,637],{"class":622},[617,29897,640],{"class":622},[617,29899,644],{"class":643},[617,29901,640],{"class":622},[617,29903,649],{"class":622},[617,29905,29906,29908,29910,29912,29914,29916,29918,29920],{"class":619,"line":558},[617,29907,657],{"class":656},[617,29909,660],{"class":622},[617,29911,695],{"class":663},[617,29913,673],{"class":622},[617,29915,676],{"class":656},[617,29917,679],{"class":622},[617,29919,704],{"class":643},[617,29921,685],{"class":622},[617,29923,29925,29927,29929,29932,29934,29936,29938,29940],{"class":29924,"line":688},[619,653],[617,29926,657],{"class":656},[617,29928,660],{"class":622},[617,29930,29931],{"class":663}," Line2",[617,29933,673],{"class":622},[617,29935,676],{"class":656},[617,29937,679],{"class":622},[617,29939,682],{"class":643},[617,29941,685],{"class":622},[617,29943,29944,29946,29948],{"class":619,"line":709},[617,29945,712],{"class":622},[617,29947,627],{"class":626},[617,29949,649],{"class":622},[617,29951,29952],{"class":619,"line":719},[617,29953,722],{"emptyLinePlaceholder":574},[617,29955,29956,29958,29960],{"class":619,"line":725},[617,29957,623],{"class":622},[617,29959,730],{"class":626},[617,29961,649],{"class":622},[617,29963,29964,29966,29968],{"class":619,"line":735},[617,29965,738],{"class":622},[617,29967,741],{"class":626},[617,29969,649],{"class":622},[617,29971,29973,29975,29977,29979,29981,29983,29985,29987],{"class":29972,"line":758},[619,653],[617,29974,761],{"class":622},[617,29976,764],{"class":626},[617,29978,1465],{"class":630},[617,29980,637],{"class":622},[617,29982,640],{"class":622},[617,29984,11330],{"class":643},[617,29986,640],{"class":622},[617,29988,767],{"class":622},[617,29990,29992,29994],{"class":29991,"line":770},[619,653],[617,29993,761],{"class":622},[617,29995,29996],{"class":626},"Line2\n",[617,29998,30000,30002,30004,30006,30009],{"class":29999,"line":780},[619,653],[617,30001,27680],{"class":630},[617,30003,637],{"class":622},[617,30005,640],{"class":622},[617,30007,30008],{"class":643},"[[0, 0, 0], [1, 1, 0], [1, 1, 1], [0, 0, 1]]",[617,30010,3111],{"class":622},[617,30012,30014,30016,30018,30020,30022],{"class":30013,"line":785},[619,653],[617,30015,27709],{"class":630},[617,30017,637],{"class":622},[617,30019,640],{"class":622},[617,30021,11377],{"class":643},[617,30023,3111],{"class":622},[617,30025,30027,30029,30031,30033,30035],{"class":30026,"line":807},[619,653],[617,30028,27723],{"class":630},[617,30030,637],{"class":622},[617,30032,640],{"class":622},[617,30034,19006],{"class":643},[617,30036,3111],{"class":622},[617,30038,30039],{"class":619,"line":611},[617,30040,15248],{"class":622},[617,30042,30043,30045,30047],{"class":619,"line":830},[617,30044,761],{"class":622},[617,30046,8436],{"class":626},[617,30048,767],{"class":622},[617,30050,30051,30053,30055],{"class":619,"line":841},[617,30052,885],{"class":622},[617,30054,741],{"class":626},[617,30056,649],{"class":622},[617,30058,30059,30061,30063],{"class":619,"line":852},[617,30060,712],{"class":622},[617,30062,730],{"class":626},[617,30064,649],{"class":622},[484,30066,902],{"id":901},[907,30068,30069,30081],{},[910,30070,30071],{},[913,30072,30073,30075,30077,30079],{},[916,30074,918],{},[916,30076,5949],{},[916,30078,921],{},[916,30080,924],{},[926,30082,30083,30098,30110,30122,30134,30146,30158,30170,30182,30194,30206],{},[913,30084,30085,30087,30093,30096],{},[931,30086,27782],{},[931,30088,30089],{},[1120,30090,30092],{"href":30091},"#points","See below",[931,30094,30095],{},"Points representing the line",[931,30097],{},[913,30099,30100,30102,30106,30108],{},[931,30101,27856],{},[931,30103,30104],{},[598,30105,27861],{},[931,30107,27864],{},[931,30109,3636],{},[913,30111,30112,30114,30118,30120],{},[931,30113,7527],{},[931,30115,30116],{},[598,30117,7542],{},[931,30119,27877],{},[931,30121,27880],{},[913,30123,30124,30126,30130,30132],{},[931,30125,27885],{},[931,30127,30128],{},[598,30129,5332],{},[931,30131,27892],{},[931,30133,1854],{},[913,30135,30136,30138,30142,30144],{},[931,30137,27899],{},[931,30139,30140],{},[598,30141,15441],{},[931,30143,27906],{},[931,30145,951],{},[913,30147,30148,30150,30154,30156],{},[931,30149,27913],{},[931,30151,30152],{},[598,30153,15441],{},[931,30155,27920],{},[931,30157,951],{},[913,30159,30160,30162,30166,30168],{},[931,30161,27927],{},[931,30163,30164],{},[598,30165,15441],{},[931,30167,27934],{},[931,30169,951],{},[913,30171,30172,30174,30178,30180],{},[931,30173,27941],{},[931,30175,30176],{},[598,30177,5332],{},[931,30179,27948],{},[931,30181,1854],{},[913,30183,30184,30186,30190,30192],{},[931,30185,27955],{},[931,30187,30188],{},[598,30189,5332],{},[931,30191,27962],{},[931,30193,1854],{},[913,30195,30196,30198,30202,30204],{},[931,30197,27969],{},[931,30199,30200],{},[598,30201,5332],{},[931,30203,27976],{},[931,30205,1854],{},[913,30207,30208,30210,30214,30216],{},[931,30209,27983],{},[931,30211,30212],{},[598,30213,5332],{},[931,30215,27990],{},[931,30217,945],{},[4031,30219,30220],{"id":27782},"Points",[594,30222,30223],{},"The points prop has the following type:",[594,30225,30226],{},[598,30227,30228],{},"Array\u003CVector3 | Vector2 | [number, number, number] | [number, number] | number>",[594,30230,30231,30232,30235],{},"The passed array is converted to ",[598,30233,30234],{},"Array\u003Cnumber>"," – i.e., a series of x, y, z vertex coordinates. This is done array entry by array entry, as follows:",[907,30237,30238,30248],{},[910,30239,30240],{},[913,30241,30242,30245],{},[916,30243,30244],{},"Entry type",[916,30246,30247],{},"Interpretation",[926,30249,30250,30259,30271,30281,30290],{},[913,30251,30252,30256],{},[931,30253,30254],{},[598,30255,8120],{},[931,30257,30258],{},"Insert the vector's x, y, z into the result array",[913,30260,30261,30268],{},[931,30262,30263],{},[30264,30265,30266],"nobr",{},[598,30267,8117],{},[931,30269,30270],{},"Insert the array values into the result array",[913,30272,30273,30278],{},[931,30274,30275],{},[598,30276,30277],{},"Vector2",[931,30279,30280],{},"Insert the vector's x, y, then 0 into the result array",[913,30282,30283,30287],{},[931,30284,30285],{},[598,30286,25845],{},[931,30288,30289],{},"Insert the array values, then 0 into the result array",[913,30291,30292,30296],{},[931,30293,30294],{},[598,30295,5332],{},[931,30297,30298],{},"Insert the number into the result array",[3179,30300,30301],{},[594,30302,30303],{},"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.",[606,30305,30307],{"className":608,"code":30306,"language":613,"meta":556,"style":556},"\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",[598,30308,30309,30314,30364,30369,30373,30378,30431],{"__ignoreMap":556},[617,30310,30311],{"class":619,"line":557},[617,30312,30313],{"class":1189},"\u003C!-- Wrong -->\n",[617,30315,30316,30318,30320,30322,30324,30326,30328,30331,30333,30335,30337,30339,30341,30343,30345,30347,30349,30351,30353,30355,30357,30360,30362],{"class":619,"line":558},[617,30317,623],{"class":622},[617,30319,237],{"class":626},[617,30321,3009],{"class":622},[617,30323,27782],{"class":630},[617,30325,637],{"class":622},[617,30327,640],{"class":622},[617,30329,30330],{"class":663},"[[",[617,30332,1854],{"class":2481},[617,30334,667],{"class":622},[617,30336,1854],{"class":2481},[617,30338,2494],{"class":663},[617,30340,667],{"class":622},[617,30342,28832],{"class":2481},[617,30344,667],{"class":622},[617,30346,28832],{"class":2481},[617,30348,667],{"class":622},[617,30350,2478],{"class":663},[617,30352,19006],{"class":2481},[617,30354,667],{"class":622},[617,30356,19006],{"class":2481},[617,30358,30359],{"class":663},"]]",[617,30361,640],{"class":622},[617,30363,767],{"class":622},[617,30365,30366],{"class":619,"line":688},[617,30367,30368],{"class":1189},"\u003C!-- result: (1,1,0) (2,2,3) (3,0,❌) -->\n",[617,30370,30371],{"class":619,"line":709},[617,30372,722],{"emptyLinePlaceholder":574},[617,30374,30375],{"class":619,"line":719},[617,30376,30377],{"class":1189},"\u003C!-- Right -->\n",[617,30379,30380,30382,30384,30386,30388,30390,30392,30394,30396,30398,30400,30402,30404,30406,30408,30410,30412,30414,30416,30418,30420,30422,30425,30427,30429],{"class":619,"line":725},[617,30381,623],{"class":622},[617,30383,237],{"class":626},[617,30385,3009],{"class":622},[617,30387,27782],{"class":630},[617,30389,637],{"class":622},[617,30391,640],{"class":622},[617,30393,30330],{"class":663},[617,30395,1854],{"class":2481},[617,30397,667],{"class":622},[617,30399,2541],{"class":2481},[617,30401,2494],{"class":663},[617,30403,667],{"class":622},[617,30405,28832],{"class":2481},[617,30407,667],{"class":622},[617,30409,28832],{"class":2481},[617,30411,667],{"class":622},[617,30413,2486],{"class":2481},[617,30415,667],{"class":622},[617,30417,2478],{"class":663},[617,30419,19006],{"class":2481},[617,30421,667],{"class":622},[617,30423,30424],{"class":2481}," 3",[617,30426,30359],{"class":663},[617,30428,640],{"class":622},[617,30430,767],{"class":622},[617,30432,30433],{"class":619,"line":735},[617,30434,30435],{"class":1189},"\u003C!-- result: (1,1,0) (2,2,0) (3,3,0) -->\n",[594,30437,30438],{},"The component, like Three.js, will not keep you from shooting yourself in the foot.",[1307,30440,30441],{},"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 .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":556,"searchDepth":557,"depth":558,"links":30443},[30444,30445],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902,"children":30446},[30447],{"id":27782,"depth":688,"text":30220},"Component for creating 3D lines using Three.js's Line2.",{},{"title":237,"description":30448},"3_PA8PNLJqkUe1WxI0VGct3uJ9JTkMiGeSxC7ZRsjNc",{"id":30453,"title":241,"body":30454,"description":30615,"extension":571,"links":572,"meta":30616,"navigation":574,"path":242,"seo":30617,"stem":243,"__hash__":30618},"docs/2.api/5.shapes/octahedron.md",{"type":481,"value":30455,"toc":30612},[30456,30461,30471,30476,30482,30484,30610],[588,30457,30458],{},[30459,30460],"shapes-octahedron",{},[594,30462,2756,30463,8223,30465,27328,30468,1126],{},[598,30464,7297],{},[598,30466,30467],{},"\u003COctahedron />",[598,30469,30470],{},"OctahedronGeometry",[606,30472,30474],{"className":30473,"code":28997,"language":27337},[27335],[598,30475,28997],{"__ignoreMap":556},[594,30477,27342,30478],{},[1120,30479,30470],{"href":30480,"rel":30481},"https://threejs.org/docs/?q=octa#api/en/geometries/OctahedronGeometry",[1124],[484,30483,15],{"id":604},[606,30485,30487],{"className":608,"code":30486,"language":613,"meta":556,"style":556},"\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",[598,30488,30489,30527,30531,30536,30598,30602],{"__ignoreMap":556},[617,30490,30491,30493,30495,30497,30499,30501,30503,30505,30507,30509,30511,30513,30515,30517,30519,30521,30523,30525],{"class":619,"line":557},[617,30492,623],{"class":622},[617,30494,241],{"class":626},[617,30496,3009],{"class":622},[617,30498,27364],{"class":630},[617,30500,637],{"class":622},[617,30502,640],{"class":622},[617,30504,18946],{"class":663},[617,30506,1854],{"class":2481},[617,30508,667],{"class":622},[617,30510,2486],{"class":2481},[617,30512,2494],{"class":663},[617,30514,640],{"class":622},[617,30516,2669],{"class":630},[617,30518,637],{"class":622},[617,30520,640],{"class":622},[617,30522,11377],{"class":643},[617,30524,640],{"class":622},[617,30526,767],{"class":622},[617,30528,30529],{"class":619,"line":558},[617,30530,722],{"emptyLinePlaceholder":574},[617,30532,30533],{"class":619,"line":688},[617,30534,30535],{"class":663},"// Octahedron with a custom material transformations\n",[617,30537,30538,30540,30542,30544,30546,30548,30550,30552,30554,30556,30558,30560,30562,30564,30566,30568,30570,30572,30574,30576,30578,30580,30582,30584,30586,30588,30590,30592,30594,30596],{"class":619,"line":709},[617,30539,623],{"class":622},[617,30541,241],{"class":626},[617,30543,3852],{"class":630},[617,30545,637],{"class":622},[617,30547,640],{"class":622},[617,30549,29784],{"class":643},[617,30551,640],{"class":622},[617,30553,3009],{"class":622},[617,30555,27364],{"class":630},[617,30557,637],{"class":622},[617,30559,640],{"class":622},[617,30561,18946],{"class":663},[617,30563,1854],{"class":2481},[617,30565,667],{"class":622},[617,30567,2486],{"class":2481},[617,30569,2494],{"class":663},[617,30571,640],{"class":622},[617,30573,3009],{"class":622},[617,30575,4110],{"class":630},[617,30577,637],{"class":622},[617,30579,640],{"class":622},[617,30581,18946],{"class":663},[617,30583,800],{"class":2481},[617,30585,667],{"class":622},[617,30587,27462],{"class":2481},[617,30589,667],{"class":622},[617,30591,2486],{"class":2481},[617,30593,2494],{"class":663},[617,30595,640],{"class":622},[617,30597,649],{"class":622},[617,30599,30600],{"class":619,"line":719},[617,30601,27477],{"class":663},[617,30603,30604,30606,30608],{"class":619,"line":725},[617,30605,712],{"class":622},[617,30607,241],{"class":626},[617,30609,649],{"class":622},[1307,30611,27488],{},{"title":556,"searchDepth":557,"depth":558,"links":30613},[30614],{"id":604,"depth":558,"text":15},"Short-cut for a OctahedronGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":241,"description":30615},"Oz79qfy3nukSma4rHutQfO-XwSxFFirqgE7OHz_8-MQ",{"id":30620,"title":245,"body":30621,"description":30790,"extension":571,"links":572,"meta":30791,"navigation":574,"path":246,"seo":30792,"stem":247,"__hash__":30793},"docs/2.api/5.shapes/plane.md",{"type":481,"value":30622,"toc":30787},[30623,30628,30638,30644,30650,30655,30657,30785],[588,30624,30625],{},[30626,30627],"shapes-plane",{},[594,30629,2756,30630,8223,30632,27328,30635,1126],{},[598,30631,7297],{},[598,30633,30634],{},"\u003CPlane />",[598,30636,30637],{},"PlaneGeometry",[606,30639,30642],{"className":30640,"code":30641,"language":27337},[27335],"args: [width: number, height: number, widthSegments: number, heightSegments: number]\n",[598,30643,30641],{"__ignoreMap":556},[594,30645,27342,30646],{},[1120,30647,30637],{"href":30648,"rel":30649},"https://threejs.org/docs/?q=plane#api/en/geometries/PlaneGeometry",[1124],[1985,30651,30652],{},[594,30653,30654],{},"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).",[484,30656,15],{"id":604},[606,30658,30660],{"className":608,"code":30659,"language":613,"meta":556,"style":556},"\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",[598,30661,30662,30700,30704,30709,30773,30777],{"__ignoreMap":556},[617,30663,30664,30666,30668,30670,30672,30674,30676,30678,30680,30682,30684,30686,30688,30690,30692,30694,30696,30698],{"class":619,"line":557},[617,30665,623],{"class":622},[617,30667,245],{"class":626},[617,30669,3009],{"class":622},[617,30671,27364],{"class":630},[617,30673,637],{"class":622},[617,30675,640],{"class":622},[617,30677,18946],{"class":663},[617,30679,1854],{"class":2481},[617,30681,667],{"class":622},[617,30683,2541],{"class":2481},[617,30685,2494],{"class":663},[617,30687,640],{"class":622},[617,30689,2669],{"class":630},[617,30691,637],{"class":622},[617,30693,640],{"class":622},[617,30695,11377],{"class":643},[617,30697,640],{"class":622},[617,30699,767],{"class":622},[617,30701,30702],{"class":619,"line":558},[617,30703,722],{"emptyLinePlaceholder":574},[617,30705,30706],{"class":619,"line":688},[617,30707,30708],{"class":663},"// Plane with a custom material transformations\n",[617,30710,30711,30713,30715,30717,30719,30721,30724,30726,30728,30730,30732,30734,30736,30739,30741,30743,30745,30747,30749,30751,30753,30755,30757,30759,30761,30763,30765,30767,30769,30771],{"class":619,"line":709},[617,30712,623],{"class":622},[617,30714,245],{"class":626},[617,30716,3852],{"class":630},[617,30718,637],{"class":622},[617,30720,640],{"class":622},[617,30722,30723],{"class":643},"planeRef",[617,30725,640],{"class":622},[617,30727,3009],{"class":622},[617,30729,27364],{"class":630},[617,30731,637],{"class":622},[617,30733,640],{"class":622},[617,30735,18946],{"class":663},[617,30737,30738],{"class":2481},"8",[617,30740,667],{"class":622},[617,30742,28237],{"class":2481},[617,30744,2494],{"class":663},[617,30746,640],{"class":622},[617,30748,3009],{"class":622},[617,30750,4110],{"class":630},[617,30752,637],{"class":622},[617,30754,640],{"class":622},[617,30756,18946],{"class":663},[617,30758,945],{"class":2481},[617,30760,667],{"class":622},[617,30762,27462],{"class":2481},[617,30764,667],{"class":622},[617,30766,2486],{"class":2481},[617,30768,2494],{"class":663},[617,30770,640],{"class":622},[617,30772,649],{"class":622},[617,30774,30775],{"class":619,"line":719},[617,30776,27477],{"class":663},[617,30778,30779,30781,30783],{"class":619,"line":725},[617,30780,712],{"class":622},[617,30782,245],{"class":626},[617,30784,649],{"class":622},[1307,30786,27488],{},{"title":556,"searchDepth":557,"depth":558,"links":30788},[30789],{"id":604,"depth":558,"text":15},"Short-cut for a PlaneGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":245,"description":30790},"5OBrHmZXTQoZvxuG3DLZ3euGfAYR51mvVTntqkflx80",{"id":30795,"title":249,"body":30796,"description":31151,"extension":571,"links":572,"meta":31152,"navigation":574,"path":250,"seo":31153,"stem":251,"__hash__":31154},"docs/2.api/5.shapes/quadratic-bezier-line.md",{"type":481,"value":30797,"toc":31147},[30798,30803,30811,30813,31048,31050,31058,31145],[2275,30799,30800],{},[30801,30802],"shapes-quadratic-bezier-line",{},[594,30804,30805,28365,30808,30810],{},[598,30806,30807],{},"\u003CQuadraticBezierLine />",[598,30809,27528],{}," between start and end points, with an optional control point.",[484,30812,15],{"id":604},[606,30814,30816],{"className":608,"code":30815,"language":613,"meta":556,"style":556},"\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",[598,30817,30818,30838,30856,30875,30893,30901,30905,30913,30921,30939,30946,30958,30970,30984,30996,31008,31020,31024,31032,31040],{"__ignoreMap":556},[617,30819,30820,30822,30824,30826,30828,30830,30832,30834,30836],{"class":619,"line":557},[617,30821,623],{"class":622},[617,30823,627],{"class":626},[617,30825,631],{"class":630},[617,30827,634],{"class":630},[617,30829,637],{"class":622},[617,30831,640],{"class":622},[617,30833,644],{"class":643},[617,30835,640],{"class":622},[617,30837,649],{"class":622},[617,30839,30840,30842,30844,30846,30848,30850,30852,30854],{"class":619,"line":558},[617,30841,657],{"class":656},[617,30843,660],{"class":622},[617,30845,695],{"class":663},[617,30847,673],{"class":622},[617,30849,676],{"class":656},[617,30851,679],{"class":622},[617,30853,704],{"class":643},[617,30855,685],{"class":622},[617,30857,30858,30860,30862,30865,30867,30869,30871,30873],{"class":619,"line":688},[617,30859,657],{"class":656},[617,30861,660],{"class":622},[617,30863,30864],{"class":663}," QuadraticBezierLine",[617,30866,673],{"class":622},[617,30868,676],{"class":656},[617,30870,679],{"class":622},[617,30872,682],{"class":643},[617,30874,685],{"class":622},[617,30876,30877,30879,30881,30883,30885,30887,30889,30891],{"class":619,"line":709},[617,30878,657],{"class":656},[617,30880,660],{"class":622},[617,30882,27610],{"class":663},[617,30884,673],{"class":622},[617,30886,676],{"class":656},[617,30888,679],{"class":622},[617,30890,4606],{"class":643},[617,30892,685],{"class":622},[617,30894,30895,30897,30899],{"class":619,"line":719},[617,30896,712],{"class":622},[617,30898,627],{"class":626},[617,30900,649],{"class":622},[617,30902,30903],{"class":619,"line":725},[617,30904,722],{"emptyLinePlaceholder":574},[617,30906,30907,30909,30911],{"class":619,"line":735},[617,30908,623],{"class":622},[617,30910,730],{"class":626},[617,30912,649],{"class":622},[617,30914,30915,30917,30919],{"class":619,"line":758},[617,30916,738],{"class":622},[617,30918,741],{"class":626},[617,30920,649],{"class":622},[617,30922,30923,30925,30927,30929,30931,30933,30935,30937],{"class":619,"line":770},[617,30924,761],{"class":622},[617,30926,764],{"class":626},[617,30928,1465],{"class":630},[617,30930,637],{"class":622},[617,30932,640],{"class":622},[617,30934,11330],{"class":643},[617,30936,640],{"class":622},[617,30938,767],{"class":622},[617,30940,30941,30943],{"class":619,"line":780},[617,30942,761],{"class":622},[617,30944,30945],{"class":626},"QuadraticBezierLine\n",[617,30947,30948,30950,30952,30954,30956],{"class":619,"line":785},[617,30949,28508],{"class":630},[617,30951,637],{"class":622},[617,30953,640],{"class":622},[617,30955,28515],{"class":643},[617,30957,3111],{"class":622},[617,30959,30960,30962,30964,30966,30968],{"class":619,"line":807},[617,30961,28522],{"class":630},[617,30963,637],{"class":622},[617,30965,640],{"class":622},[617,30967,28529],{"class":643},[617,30969,3111],{"class":622},[617,30971,30972,30975,30977,30979,30982],{"class":619,"line":611},[617,30973,30974],{"class":630}," :mid",[617,30976,637],{"class":622},[617,30978,640],{"class":622},[617,30980,30981],{"class":643},"new Vector3(0, 1, 0)",[617,30983,3111],{"class":622},[617,30985,30986,30988,30990,30992,30994],{"class":619,"line":830},[617,30987,27695],{"class":630},[617,30989,637],{"class":622},[617,30991,640],{"class":622},[617,30993,9425],{"class":643},[617,30995,3111],{"class":622},[617,30997,30998,31000,31002,31004,31006],{"class":619,"line":841},[617,30999,27709],{"class":630},[617,31001,637],{"class":622},[617,31003,640],{"class":622},[617,31005,11377],{"class":643},[617,31007,3111],{"class":622},[617,31009,31010,31012,31014,31016,31018],{"class":619,"line":852},[617,31011,27723],{"class":630},[617,31013,637],{"class":622},[617,31015,640],{"class":622},[617,31017,19006],{"class":643},[617,31019,3111],{"class":622},[617,31021,31022],{"class":619,"line":862},[617,31023,15248],{"class":622},[617,31025,31026,31028,31030],{"class":619,"line":612},[617,31027,761],{"class":622},[617,31029,8436],{"class":626},[617,31031,767],{"class":622},[617,31033,31034,31036,31038],{"class":619,"line":882},[617,31035,885],{"class":622},[617,31037,741],{"class":626},[617,31039,649],{"class":622},[617,31041,31042,31044,31046],{"class":619,"line":892},[617,31043,712],{"class":622},[617,31045,730],{"class":626},[617,31047,649],{"class":622},[484,31049,902],{"id":901},[594,31051,31052,28630,31054,7199,31056,1126],{},[598,31053,30807],{},[598,31055,27782],{},[598,31057,27528],{},[907,31059,31060,31075],{},[910,31061,31062],{},[913,31063,31064,31066,31068,31070,31072],{},[916,31065,918],{},[916,31067,5949],{},[916,31069,921],{},[916,31071,924],{},[916,31073,31074],{},"Required",[926,31076,31077,31094,31110,31129],{},[913,31078,31079,31083,31087,31089,31091],{},[931,31080,31081],{},[598,31082,12360],{},[931,31084,31085],{},[598,31086,28661],{},[931,31088,28664],{},[931,31090],{},[931,31092,31093],{},"yes",[913,31095,31096,31100,31104,31106,31108],{},[931,31097,31098],{},[598,31099,12374],{},[931,31101,31102],{},[598,31103,28661],{},[931,31105,28679],{},[931,31107],{},[931,31109,31093],{},[913,31111,31112,31117,31121,31124,31126],{},[931,31113,31114],{},[598,31115,31116],{},"mid",[931,31118,31119],{},[598,31120,28661],{},[931,31122,31123],{},"Control point",[931,31125],{},[931,31127,31128],{},"no",[913,31130,31131,31135,31139,31141,31143],{},[931,31132,31133],{},[598,31134,27797],{},[931,31136,31137],{},[598,31138,5332],{},[931,31140,27804],{},[931,31142,27807],{},[931,31144,31128],{},[1307,31146,1624],{},{"title":556,"searchDepth":557,"depth":558,"links":31148},[31149,31150],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},"Renders a Line2 between start and end points with an optional control point.",{},{"title":249,"description":31151},"hH6Hhkz4HlI9pLG1_7W6Yd5ehTKlLTzjWtTfZEcye0I",{"id":31156,"title":253,"body":31157,"description":31328,"extension":571,"links":572,"meta":31329,"navigation":574,"path":254,"seo":31330,"stem":255,"__hash__":31331},"docs/2.api/5.shapes/ring.md",{"type":481,"value":31158,"toc":31325},[31159,31164,31174,31180,31186,31188,31323],[588,31160,31161],{},[31162,31163],"shapes-ring",{},[594,31165,2756,31166,8223,31168,27328,31171,1126],{},[598,31167,7297],{},[598,31169,31170],{},"\u003CRing />",[598,31172,31173],{},"RingGeometry",[606,31175,31178],{"className":31176,"code":31177,"language":27337},[27335],"args: [\n innerRadius: number,\n outerRadius: number,\n thetaSegments: number,\n phiSegments: number,\n thetaStart: number,\n thetaLength: number\n]\n",[598,31179,31177],{"__ignoreMap":556},[594,31181,27342,31182],{},[1120,31183,31173],{"href":31184,"rel":31185},"https://threejs.org/docs/?q=ring#api/en/geometries/RingGeometry",[1124],[484,31187,15],{"id":604},[606,31189,31191],{"className":608,"code":31190,"language":613,"meta":556,"style":556},"\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",[598,31192,31193,31235,31239,31244,31311,31315],{"__ignoreMap":556},[617,31194,31195,31197,31199,31201,31203,31205,31207,31209,31211,31213,31215,31217,31219,31221,31223,31225,31227,31229,31231,31233],{"class":619,"line":557},[617,31196,623],{"class":622},[617,31198,253],{"class":626},[617,31200,3009],{"class":622},[617,31202,27364],{"class":630},[617,31204,637],{"class":622},[617,31206,640],{"class":622},[617,31208,18946],{"class":663},[617,31210,1926],{"class":2481},[617,31212,667],{"class":622},[617,31214,2541],{"class":2481},[617,31216,667],{"class":622},[617,31218,28063],{"class":2481},[617,31220,2494],{"class":663},[617,31222,640],{"class":622},[617,31224,2669],{"class":630},[617,31226,637],{"class":622},[617,31228,640],{"class":622},[617,31230,11377],{"class":643},[617,31232,640],{"class":622},[617,31234,767],{"class":622},[617,31236,31237],{"class":619,"line":558},[617,31238,722],{"emptyLinePlaceholder":574},[617,31240,31241],{"class":619,"line":688},[617,31242,31243],{"class":663},"// Ring with a custom material transformations\n",[617,31245,31246,31248,31250,31252,31254,31256,31259,31261,31263,31265,31267,31269,31271,31273,31275,31277,31279,31281,31283,31285,31287,31289,31291,31293,31295,31297,31299,31301,31303,31305,31307,31309],{"class":619,"line":709},[617,31247,623],{"class":622},[617,31249,253],{"class":626},[617,31251,3852],{"class":630},[617,31253,637],{"class":622},[617,31255,640],{"class":622},[617,31257,31258],{"class":643},"ringRef",[617,31260,640],{"class":622},[617,31262,3009],{"class":622},[617,31264,27364],{"class":630},[617,31266,637],{"class":622},[617,31268,640],{"class":622},[617,31270,18946],{"class":663},[617,31272,1926],{"class":2481},[617,31274,667],{"class":622},[617,31276,2541],{"class":2481},[617,31278,667],{"class":622},[617,31280,28063],{"class":2481},[617,31282,2494],{"class":663},[617,31284,640],{"class":622},[617,31286,3009],{"class":622},[617,31288,4110],{"class":630},[617,31290,637],{"class":622},[617,31292,640],{"class":622},[617,31294,18946],{"class":663},[617,31296,800],{"class":2481},[617,31298,667],{"class":622},[617,31300,27462],{"class":2481},[617,31302,667],{"class":622},[617,31304,2486],{"class":2481},[617,31306,2494],{"class":663},[617,31308,640],{"class":622},[617,31310,649],{"class":622},[617,31312,31313],{"class":619,"line":719},[617,31314,27477],{"class":663},[617,31316,31317,31319,31321],{"class":619,"line":725},[617,31318,712],{"class":622},[617,31320,253],{"class":626},[617,31322,649],{"class":622},[1307,31324,27488],{},{"title":556,"searchDepth":557,"depth":558,"links":31326},[31327],{"id":604,"depth":558,"text":15},"Short-cut for a RingGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":253,"description":31328},"sjdJr8WfSUL8VppV0tIyFALL7j5Mg1IJmmVLISwAI9U",{"id":31333,"title":257,"body":31334,"description":31490,"extension":571,"links":572,"meta":31491,"navigation":574,"path":258,"seo":31492,"stem":259,"__hash__":31493},"docs/2.api/5.shapes/rounded-box.md",{"type":481,"value":31335,"toc":31487},[31336,31341,31352,31358,31364,31366,31485],[588,31337,31338],{},[31339,31340],"shapes-rounded-box",{},[594,31342,2756,31343,8223,31345,27328,31348,31351],{},[598,31344,7297],{},[598,31346,31347],{},"\u003CRoundedBox />",[598,31349,31350],{},"RoundedBoxGeometry"," .",[606,31353,31356],{"className":31354,"code":31355,"language":27337},[27335],"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",[598,31357,31355],{"__ignoreMap":556},[594,31359,27342,31360],{},[1120,31361,31350],{"href":31362,"rel":31363},"https://github.com/mrdoob/three.js/blob/master/examples/jsm/geometries/RoundedBoxGeometry.js",[1124],[484,31365,15],{"id":604},[606,31367,31369],{"className":608,"code":31368,"language":613,"meta":556,"style":556},"\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",[598,31370,31371,31422,31426,31431,31473,31477],{"__ignoreMap":556},[617,31372,31373,31375,31378,31380,31382,31384,31386,31388,31390,31392,31394,31396,31398,31400,31402,31404,31406,31408,31410,31412,31414,31416,31418,31420],{"class":619,"line":557},[617,31374,623],{"class":622},[617,31376,31377],{"class":626},"RoundedBox",[617,31379,3009],{"class":622},[617,31381,27364],{"class":630},[617,31383,637],{"class":622},[617,31385,640],{"class":622},[617,31387,18946],{"class":663},[617,31389,1854],{"class":2481},[617,31391,667],{"class":622},[617,31393,2541],{"class":2481},[617,31395,667],{"class":622},[617,31397,2541],{"class":2481},[617,31399,667],{"class":622},[617,31401,28832],{"class":2481},[617,31403,667],{"class":622},[617,31405,21201],{"class":2481},[617,31407,2494],{"class":663},[617,31409,640],{"class":622},[617,31411,2669],{"class":630},[617,31413,637],{"class":622},[617,31415,640],{"class":622},[617,31417,11377],{"class":643},[617,31419,640],{"class":622},[617,31421,767],{"class":622},[617,31423,31424],{"class":619,"line":558},[617,31425,722],{"emptyLinePlaceholder":574},[617,31427,31428],{"class":619,"line":688},[617,31429,31430],{"class":663},"// RoundedBox with a custom material transformations\n",[617,31432,31433,31435,31437,31439,31441,31443,31445,31447,31449,31451,31453,31455,31457,31459,31461,31463,31465,31467,31469,31471],{"class":619,"line":709},[617,31434,623],{"class":622},[617,31436,31377],{"class":626},[617,31438,3852],{"class":630},[617,31440,637],{"class":622},[617,31442,640],{"class":622},[617,31444,14308],{"class":643},[617,31446,640],{"class":622},[617,31448,3009],{"class":622},[617,31450,4110],{"class":630},[617,31452,637],{"class":622},[617,31454,640],{"class":622},[617,31456,18946],{"class":663},[617,31458,945],{"class":2481},[617,31460,667],{"class":622},[617,31462,27462],{"class":2481},[617,31464,667],{"class":622},[617,31466,2486],{"class":2481},[617,31468,2494],{"class":663},[617,31470,640],{"class":622},[617,31472,649],{"class":622},[617,31474,31475],{"class":619,"line":719},[617,31476,27477],{"class":663},[617,31478,31479,31481,31483],{"class":619,"line":725},[617,31480,712],{"class":622},[617,31482,31377],{"class":626},[617,31484,649],{"class":622},[1307,31486,27488],{},{"title":556,"searchDepth":557,"depth":558,"links":31488},[31489],{"id":604,"depth":558,"text":15},"Short-cut for a RoundedBoxGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":257,"description":31490},"6uRmRs4RGOfq4lQeUlAm3DycDFH9FnKYbwGuk5ODp5k",{"id":31495,"title":261,"body":31496,"description":31684,"extension":571,"links":572,"meta":31685,"navigation":574,"path":262,"seo":31686,"stem":263,"__hash__":31687},"docs/2.api/5.shapes/screen-quad.md",{"type":481,"value":31497,"toc":31680},[31498,31503,31506,31508,31658,31662,31678],[2275,31499,31500],{},[31501,31502],"shapes-screen-quad",{},[594,31504,31505],{},"A triangle that fills the screen when using a THREE.OrthographicCamera. Useful for full-screen fragment shader work.",[484,31507,15],{"id":604},[606,31509,31511],{"className":608,"code":31510,"language":613,"meta":556,"style":556},"\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",[598,31512,31513,31533,31551,31570,31578,31582,31590,31598,31607,31616,31634,31642,31650],{"__ignoreMap":556},[617,31514,31515,31517,31519,31521,31523,31525,31527,31529,31531],{"class":619,"line":557},[617,31516,623],{"class":622},[617,31518,627],{"class":626},[617,31520,631],{"class":630},[617,31522,634],{"class":630},[617,31524,637],{"class":622},[617,31526,640],{"class":622},[617,31528,644],{"class":643},[617,31530,640],{"class":622},[617,31532,649],{"class":622},[617,31534,31535,31537,31539,31541,31543,31545,31547,31549],{"class":619,"line":558},[617,31536,657],{"class":656},[617,31538,660],{"class":622},[617,31540,695],{"class":663},[617,31542,673],{"class":622},[617,31544,676],{"class":656},[617,31546,679],{"class":622},[617,31548,704],{"class":643},[617,31550,685],{"class":622},[617,31552,31553,31555,31557,31560,31562,31564,31566,31568],{"class":619,"line":688},[617,31554,657],{"class":656},[617,31556,660],{"class":622},[617,31558,31559],{"class":663}," ScreenQuad",[617,31561,673],{"class":622},[617,31563,676],{"class":656},[617,31565,679],{"class":622},[617,31567,682],{"class":643},[617,31569,685],{"class":622},[617,31571,31572,31574,31576],{"class":619,"line":709},[617,31573,712],{"class":622},[617,31575,627],{"class":626},[617,31577,649],{"class":622},[617,31579,31580],{"class":619,"line":719},[617,31581,722],{"emptyLinePlaceholder":574},[617,31583,31584,31586,31588],{"class":619,"line":725},[617,31585,623],{"class":622},[617,31587,730],{"class":626},[617,31589,649],{"class":622},[617,31591,31592,31594,31596],{"class":619,"line":735},[617,31593,738],{"class":622},[617,31595,741],{"class":626},[617,31597,649],{"class":622},[617,31599,31600,31602,31605],{"class":619,"line":758},[617,31601,761],{"class":622},[617,31603,31604],{"class":626},"TresOrthographicCamera",[617,31606,767],{"class":622},[617,31608,31609,31611,31614],{"class":619,"line":770},[617,31610,761],{"class":622},[617,31612,31613],{"class":626},"ScreenQuad",[617,31615,649],{"class":622},[617,31617,31618,31620,31622,31624,31626,31628,31630,31632],{"class":619,"line":780},[617,31619,833],{"class":622},[617,31621,11368],{"class":626},[617,31623,2669],{"class":630},[617,31625,637],{"class":622},[617,31627,640],{"class":622},[617,31629,11377],{"class":643},[617,31631,640],{"class":622},[617,31633,767],{"class":622},[617,31635,31636,31638,31640],{"class":619,"line":785},[617,31637,875],{"class":622},[617,31639,31613],{"class":626},[617,31641,649],{"class":622},[617,31643,31644,31646,31648],{"class":619,"line":807},[617,31645,885],{"class":622},[617,31647,741],{"class":626},[617,31649,649],{"class":622},[617,31651,31652,31654,31656],{"class":619,"line":611},[617,31653,712],{"class":622},[617,31655,730],{"class":626},[617,31657,649],{"class":622},[484,31659,31661],{"id":31660},"references","References",[2193,31663,31664,31671],{},[2196,31665,31666],{},[1120,31667,31670],{"href":31668,"rel":31669},"https://www.cginternals.com/en/blog/2018-01-10-screen-aligned-quads-and-triangles.html",[1124],"Why a triangle?",[2196,31672,31673],{},[1120,31674,31677],{"href":31675,"rel":31676},"https://luruke.medium.com/simple-postprocessing-in-three-js-91936ecadfb7",[1124],"Simple postprocessing in Three.js",[1307,31679,1624],{},{"title":556,"searchDepth":557,"depth":558,"links":31681},[31682,31683],{"id":604,"depth":558,"text":15},{"id":31660,"depth":558,"text":31661},"A triangle that fills the screen for full-screen fragment shader work.",{},{"title":261,"description":31684},"7AUdT-SMH4R5MsKpuypi4UzVsHt7S7ryCNHpJVv28A8",{"id":31689,"title":265,"body":31690,"description":31860,"extension":571,"links":572,"meta":31861,"navigation":574,"path":266,"seo":31862,"stem":267,"__hash__":31863},"docs/2.api/5.shapes/sphere.md",{"type":481,"value":31691,"toc":31857},[31692,31697,31707,31713,31719,31721,31855],[588,31693,31694],{},[31695,31696],"shapes-sphere",{},[594,31698,2756,31699,8223,31701,27328,31704,1126],{},[598,31700,7297],{},[598,31702,31703],{},"\u003CSphere />",[598,31705,31706],{},"SphereGeometry",[606,31708,31711],{"className":31709,"code":31710,"language":27337},[27335],"args: [\n radius: number,\n widthSegments: number,\n heightSegments: number,\n phiStart: number,\n phiLength: number,\n thetaStart: number,\n thetaLength: number\n]\n",[598,31712,31710],{"__ignoreMap":556},[594,31714,27342,31715],{},[1120,31716,31706],{"href":31717,"rel":31718},"https://threejs.org/docs/?q=sphere#api/en/geometries/SphereGeometry",[1124],[484,31720,15],{"id":604},[606,31722,31724],{"className":608,"code":31723,"language":613,"meta":556,"style":556},"\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",[598,31725,31726,31768,31772,31777,31843,31847],{"__ignoreMap":556},[617,31727,31728,31730,31732,31734,31736,31738,31740,31742,31744,31746,31748,31750,31752,31754,31756,31758,31760,31762,31764,31766],{"class":619,"line":557},[617,31729,623],{"class":622},[617,31731,265],{"class":626},[617,31733,3009],{"class":622},[617,31735,27364],{"class":630},[617,31737,637],{"class":622},[617,31739,640],{"class":622},[617,31741,18946],{"class":663},[617,31743,1854],{"class":2481},[617,31745,667],{"class":622},[617,31747,2541],{"class":2481},[617,31749,667],{"class":622},[617,31751,2541],{"class":2481},[617,31753,2494],{"class":663},[617,31755,640],{"class":622},[617,31757,2669],{"class":630},[617,31759,637],{"class":622},[617,31761,640],{"class":622},[617,31763,11377],{"class":643},[617,31765,640],{"class":622},[617,31767,767],{"class":622},[617,31769,31770],{"class":619,"line":558},[617,31771,722],{"emptyLinePlaceholder":574},[617,31773,31774],{"class":619,"line":688},[617,31775,31776],{"class":663},"// Sphere with a custom material transformations\n",[617,31778,31779,31781,31783,31785,31787,31789,31791,31793,31795,31797,31799,31801,31803,31805,31807,31809,31811,31813,31815,31817,31819,31821,31823,31825,31827,31829,31831,31833,31835,31837,31839,31841],{"class":619,"line":709},[617,31780,623],{"class":622},[617,31782,265],{"class":626},[617,31784,3852],{"class":630},[617,31786,637],{"class":622},[617,31788,640],{"class":622},[617,31790,30723],{"class":643},[617,31792,640],{"class":622},[617,31794,3009],{"class":622},[617,31796,27364],{"class":630},[617,31798,637],{"class":622},[617,31800,640],{"class":622},[617,31802,18946],{"class":663},[617,31804,1854],{"class":2481},[617,31806,667],{"class":622},[617,31808,2541],{"class":2481},[617,31810,667],{"class":622},[617,31812,2541],{"class":2481},[617,31814,2494],{"class":663},[617,31816,640],{"class":622},[617,31818,3009],{"class":622},[617,31820,4110],{"class":630},[617,31822,637],{"class":622},[617,31824,640],{"class":622},[617,31826,18946],{"class":663},[617,31828,800],{"class":2481},[617,31830,667],{"class":622},[617,31832,27462],{"class":2481},[617,31834,667],{"class":622},[617,31836,2486],{"class":2481},[617,31838,2494],{"class":663},[617,31840,640],{"class":622},[617,31842,649],{"class":622},[617,31844,31845],{"class":619,"line":719},[617,31846,27477],{"class":663},[617,31848,31849,31851,31853],{"class":619,"line":725},[617,31850,712],{"class":622},[617,31852,265],{"class":626},[617,31854,649],{"class":622},[1307,31856,27488],{},{"title":556,"searchDepth":557,"depth":558,"links":31858},[31859],{"id":604,"depth":558,"text":15},"Short-cut for a SphereGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":265,"description":31860},"CXqQd226fbRLkf86b33CXbH-uGM-cwo2HQNRB4Pt8Xs",{"id":31865,"title":269,"body":31866,"description":32264,"extension":571,"links":572,"meta":32265,"navigation":574,"path":270,"seo":32266,"stem":271,"__hash__":32267},"docs/2.api/5.shapes/superformula.md",{"type":481,"value":31867,"toc":32259},[31868,31873,31886,31888,32124,32126,32136,32248,32252,32257],[588,31869,31870],{},[31871,31872],"shapes-super-formula",{},[594,31874,2756,31875,8223,31877,31880,31881,1126],{},[598,31876,7297],{},[598,31878,31879],{},"\u003CSuperformula />"," component that produces a configurable ",[1120,31882,31885],{"href":31883,"rel":31884},"https://en.wikipedia.org/wiki/Superformula",[1124],"3D plot of the superformula",[484,31887,15],{"id":604},[606,31889,31892],{"className":608,"code":31890,"highlights":31891,"language":613,"meta":556,"style":556},"\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",[688,770,780,785,807,611,830],[598,31893,31894,31914,31932,31952,31960,31964,31972,31980,31998,32006,32021,32035,32049,32064,32078,32082,32090,32108,32116],{"__ignoreMap":556},[617,31895,31896,31898,31900,31902,31904,31906,31908,31910,31912],{"class":619,"line":557},[617,31897,623],{"class":622},[617,31899,627],{"class":626},[617,31901,631],{"class":630},[617,31903,634],{"class":630},[617,31905,637],{"class":622},[617,31907,640],{"class":622},[617,31909,644],{"class":643},[617,31911,640],{"class":622},[617,31913,649],{"class":622},[617,31915,31916,31918,31920,31922,31924,31926,31928,31930],{"class":619,"line":558},[617,31917,657],{"class":656},[617,31919,660],{"class":622},[617,31921,695],{"class":663},[617,31923,673],{"class":622},[617,31925,676],{"class":656},[617,31927,679],{"class":622},[617,31929,704],{"class":643},[617,31931,685],{"class":622},[617,31933,31935,31937,31939,31942,31944,31946,31948,31950],{"class":31934,"line":688},[619,653],[617,31936,657],{"class":656},[617,31938,660],{"class":622},[617,31940,31941],{"class":663}," Superformula",[617,31943,673],{"class":622},[617,31945,676],{"class":656},[617,31947,679],{"class":622},[617,31949,682],{"class":643},[617,31951,685],{"class":622},[617,31953,31954,31956,31958],{"class":619,"line":709},[617,31955,712],{"class":622},[617,31957,627],{"class":626},[617,31959,649],{"class":622},[617,31961,31962],{"class":619,"line":719},[617,31963,722],{"emptyLinePlaceholder":574},[617,31965,31966,31968,31970],{"class":619,"line":725},[617,31967,623],{"class":622},[617,31969,730],{"class":626},[617,31971,649],{"class":622},[617,31973,31974,31976,31978],{"class":619,"line":735},[617,31975,738],{"class":622},[617,31977,741],{"class":626},[617,31979,649],{"class":622},[617,31981,31982,31984,31986,31988,31990,31992,31994,31996],{"class":619,"line":758},[617,31983,761],{"class":622},[617,31985,764],{"class":626},[617,31987,1465],{"class":630},[617,31989,637],{"class":622},[617,31991,640],{"class":622},[617,31993,11330],{"class":643},[617,31995,640],{"class":622},[617,31997,767],{"class":622},[617,31999,32001,32003],{"class":32000,"line":770},[619,653],[617,32002,761],{"class":622},[617,32004,32005],{"class":626},"Superformula\n",[617,32007,32009,32012,32014,32016,32019],{"class":32008,"line":780},[619,653],[617,32010,32011],{"class":630}," :width-segments",[617,32013,637],{"class":622},[617,32015,640],{"class":622},[617,32017,32018],{"class":643},"64",[617,32020,3111],{"class":622},[617,32022,32024,32027,32029,32031,32033],{"class":32023,"line":785},[619,653],[617,32025,32026],{"class":630}," :height-segments",[617,32028,637],{"class":622},[617,32030,640],{"class":622},[617,32032,32018],{"class":643},[617,32034,3111],{"class":622},[617,32036,32038,32041,32043,32045,32047],{"class":32037,"line":807},[619,653],[617,32039,32040],{"class":630}," :num-arms-a",[617,32042,637],{"class":622},[617,32044,640],{"class":622},[617,32046,10759],{"class":643},[617,32048,3111],{"class":622},[617,32050,32052,32055,32057,32059,32062],{"class":32051,"line":611},[619,653],[617,32053,32054],{"class":630}," :exp-a",[617,32056,637],{"class":622},[617,32058,640],{"class":622},[617,32060,32061],{"class":643},"[40, 1.3, 0.9]",[617,32063,3111],{"class":622},[617,32065,32067,32069,32071,32073,32076],{"class":32066,"line":830},[619,653],[617,32068,27709],{"class":630},[617,32070,637],{"class":622},[617,32072,640],{"class":622},[617,32074,32075],{"class":643},"#ff6b6b",[617,32077,3111],{"class":622},[617,32079,32080],{"class":619,"line":841},[617,32081,15248],{"class":622},[617,32083,32084,32086,32088],{"class":619,"line":852},[617,32085,761],{"class":622},[617,32087,8436],{"class":626},[617,32089,767],{"class":622},[617,32091,32092,32094,32096,32098,32100,32102,32104,32106],{"class":619,"line":862},[617,32093,761],{"class":622},[617,32095,8455],{"class":626},[617,32097,1465],{"class":630},[617,32099,637],{"class":622},[617,32101,640],{"class":622},[617,32103,11412],{"class":643},[617,32105,640],{"class":622},[617,32107,767],{"class":622},[617,32109,32110,32112,32114],{"class":619,"line":612},[617,32111,885],{"class":622},[617,32113,741],{"class":626},[617,32115,649],{"class":622},[617,32117,32118,32120,32122],{"class":619,"line":882},[617,32119,712],{"class":622},[617,32121,730],{"class":626},[617,32123,649],{"class":622},[484,32125,902],{"id":901},[594,32127,2756,32128,32130,32131,32135],{},[598,32129,31879],{}," 3D plot is the product of 2 2D superformulas, referred to as \"A\" and \"B\" in the props. See this ",[1120,32132,32134],{"href":31883,"rel":32133},[1124],"Wikipedia article about the superformula"," for more information about the function's arguments.",[907,32137,32138,32148],{},[910,32139,32140],{},[913,32141,32142,32144,32146],{},[916,32143,8069],{"align":977},[916,32145,921],{"align":977},[916,32147,924],{"align":977},[926,32149,32150,32165,32179,32193,32207,32221,32235],{},[913,32151,32152,32157,32160],{},[931,32153,32154],{"align":977},[1649,32155,32156],{},"widthSegments",[931,32158,32159],{"align":977},"Number of horizontal mesh segments",[931,32161,32162],{"align":977},[598,32163,32164],{},"32",[913,32166,32167,32172,32175],{},[931,32168,32169],{"align":977},[1649,32170,32171],{},"heightSegments",[931,32173,32174],{"align":977},"Number of vertical mesh segments",[931,32176,32177],{"align":977},[598,32178,32164],{},[913,32180,32181,32186,32189],{},[931,32182,32183],{"align":977},[1649,32184,32185],{},"numArmsA",[931,32187,32188],{"align":977},"For A, number of radial arms/ripples",[931,32190,32191],{"align":977},[598,32192,8408],{},[913,32194,32195,32200,32203],{},[931,32196,32197],{"align":977},[1649,32198,32199],{},"expA",[931,32201,32202],{"align":977},"A's 3 exponents",[931,32204,32205],{"align":977},[598,32206,32061],{},[913,32208,32209,32214,32217],{},[931,32210,32211],{"align":977},[1649,32212,32213],{},"numArmsB",[931,32215,32216],{"align":977},"For B, number of radial arms/ripples",[931,32218,32219],{"align":977},[598,32220,8408],{},[913,32222,32223,32228,32231],{},[931,32224,32225],{"align":977},[1649,32226,32227],{},"expB",[931,32229,32230],{"align":977},"B's 3 exponents",[931,32232,32233],{"align":977},[598,32234,32061],{},[913,32236,32237,32241,32244],{},[931,32238,32239],{"align":977},[1649,32240,7527],{},[931,32242,32243],{"align":977},"If no material is provided, a color for the default material",[931,32245,32246],{"align":977},[598,32247,27880],{},[484,32249,32251],{"id":32250},"slot","Slot",[594,32253,32254,32256],{},[598,32255,31879],{}," has a single slot for an optional material.",[1307,32258,1624],{},{"title":556,"searchDepth":557,"depth":558,"links":32260},[32261,32262,32263],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},{"id":32250,"depth":558,"text":32251},"Produces a configurable 3D plot of the superformula.",{},{"title":269,"description":32264},"MwKL1T459MzFaCW-z9Syi59B9UEjgZjpfCi8goXNYmQ",{"id":32269,"title":273,"body":32270,"description":32432,"extension":571,"links":572,"meta":32433,"navigation":574,"path":274,"seo":32434,"stem":275,"__hash__":32435},"docs/2.api/5.shapes/tetrahedron.md",{"type":481,"value":32271,"toc":32429},[32272,32277,32287,32292,32298,32300,32427],[588,32273,32274],{},[32275,32276],"shapes-tetrahedron",{},[594,32278,2756,32279,8223,32281,27328,32284,1126],{},[598,32280,7297],{},[598,32282,32283],{},"\u003CTetrahedron />",[598,32285,32286],{},"TetrahedronGeometry",[606,32288,32290],{"className":32289,"code":28997,"language":27337},[27335],[598,32291,28997],{"__ignoreMap":556},[594,32293,27342,32294],{},[1120,32295,32286],{"href":32296,"rel":32297},"https://threejs.org/docs/?q=tetr#api/en/geometries/TetrahedronGeometry",[1124],[484,32299,15],{"id":604},[606,32301,32303],{"className":608,"code":32302,"language":613,"meta":556,"style":556},"\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",[598,32304,32305,32343,32347,32352,32415,32419],{"__ignoreMap":556},[617,32306,32307,32309,32311,32313,32315,32317,32319,32321,32323,32325,32327,32329,32331,32333,32335,32337,32339,32341],{"class":619,"line":557},[617,32308,623],{"class":622},[617,32310,273],{"class":626},[617,32312,3009],{"class":622},[617,32314,27364],{"class":630},[617,32316,637],{"class":622},[617,32318,640],{"class":622},[617,32320,18946],{"class":663},[617,32322,1854],{"class":2481},[617,32324,667],{"class":622},[617,32326,2486],{"class":2481},[617,32328,2494],{"class":663},[617,32330,640],{"class":622},[617,32332,2669],{"class":630},[617,32334,637],{"class":622},[617,32336,640],{"class":622},[617,32338,11377],{"class":643},[617,32340,640],{"class":622},[617,32342,767],{"class":622},[617,32344,32345],{"class":619,"line":558},[617,32346,722],{"emptyLinePlaceholder":574},[617,32348,32349],{"class":619,"line":688},[617,32350,32351],{"class":663},"// Tetrahedron with a custom material transformations\n",[617,32353,32354,32356,32358,32360,32362,32364,32367,32369,32371,32373,32375,32377,32379,32381,32383,32385,32387,32389,32391,32393,32395,32397,32399,32401,32403,32405,32407,32409,32411,32413],{"class":619,"line":709},[617,32355,623],{"class":622},[617,32357,273],{"class":626},[617,32359,3852],{"class":630},[617,32361,637],{"class":622},[617,32363,640],{"class":622},[617,32365,32366],{"class":643},"tetrahedronRef",[617,32368,640],{"class":622},[617,32370,3009],{"class":622},[617,32372,27364],{"class":630},[617,32374,637],{"class":622},[617,32376,640],{"class":622},[617,32378,18946],{"class":663},[617,32380,1854],{"class":2481},[617,32382,667],{"class":622},[617,32384,2486],{"class":2481},[617,32386,2494],{"class":663},[617,32388,640],{"class":622},[617,32390,3009],{"class":622},[617,32392,4110],{"class":630},[617,32394,637],{"class":622},[617,32396,640],{"class":622},[617,32398,18946],{"class":663},[617,32400,800],{"class":2481},[617,32402,667],{"class":622},[617,32404,27462],{"class":2481},[617,32406,667],{"class":622},[617,32408,2486],{"class":2481},[617,32410,2494],{"class":663},[617,32412,640],{"class":622},[617,32414,649],{"class":622},[617,32416,32417],{"class":619,"line":719},[617,32418,27477],{"class":663},[617,32420,32421,32423,32425],{"class":619,"line":725},[617,32422,712],{"class":622},[617,32424,273],{"class":626},[617,32426,649],{"class":622},[1307,32428,27488],{},{"title":556,"searchDepth":557,"depth":558,"links":32430},[32431],{"id":604,"depth":558,"text":15},"Short-cut for a TetrahedronGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":273,"description":32432},"6ZMY_90iSBZYMdJF00ih1rbyX9sFMIXEk1iKSd_AFMc",{"id":32437,"title":277,"body":32438,"description":32624,"extension":571,"links":572,"meta":32625,"navigation":574,"path":278,"seo":32626,"stem":279,"__hash__":32627},"docs/2.api/5.shapes/torus.md",{"type":481,"value":32439,"toc":32621},[32440,32445,32455,32461,32467,32469,32619],[588,32441,32442],{},[32443,32444],"shapes-torus",{},[594,32446,2756,32447,8223,32449,27328,32452,1126],{},[598,32448,7297],{},[598,32450,32451],{},"\u003CTorus />",[598,32453,32454],{},"TorusGeometry",[606,32456,32459],{"className":32457,"code":32458,"language":27337},[27335],"args: [\n radius: number,\n tube: number,\n radialSegments: number,\n tubularSegments: number,\n arc: number\n]\n",[598,32460,32458],{"__ignoreMap":556},[594,32462,27342,32463],{},[1120,32464,32454],{"href":32465,"rel":32466},"https://threejs.org/docs/?q=torus#api/en/geometries/TorusGeometry",[1124],[484,32468,15],{"id":604},[606,32470,32472],{"className":608,"code":32471,"language":613,"meta":556,"style":556},"\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",[598,32473,32474,32522,32526,32531,32607,32611],{"__ignoreMap":556},[617,32475,32476,32478,32480,32482,32484,32486,32488,32490,32492,32494,32497,32499,32502,32504,32506,32508,32510,32512,32514,32516,32518,32520],{"class":619,"line":557},[617,32477,623],{"class":622},[617,32479,277],{"class":626},[617,32481,3009],{"class":622},[617,32483,27364],{"class":630},[617,32485,637],{"class":622},[617,32487,640],{"class":622},[617,32489,18946],{"class":663},[617,32491,800],{"class":2481},[617,32493,667],{"class":622},[617,32495,32496],{"class":2481}," 0.4",[617,32498,667],{"class":622},[617,32500,32501],{"class":2481}," 42",[617,32503,667],{"class":622},[617,32505,7743],{"class":2481},[617,32507,2494],{"class":663},[617,32509,640],{"class":622},[617,32511,2669],{"class":630},[617,32513,637],{"class":622},[617,32515,640],{"class":622},[617,32517,11377],{"class":643},[617,32519,640],{"class":622},[617,32521,767],{"class":622},[617,32523,32524],{"class":619,"line":558},[617,32525,722],{"emptyLinePlaceholder":574},[617,32527,32528],{"class":619,"line":688},[617,32529,32530],{"class":663},"// Torus with a custom material transformations\n",[617,32532,32533,32535,32537,32539,32541,32543,32545,32547,32549,32551,32553,32555,32557,32559,32561,32563,32565,32568,32570,32573,32575,32577,32579,32581,32583,32585,32587,32590,32592,32594,32597,32599,32601,32603,32605],{"class":619,"line":709},[617,32534,623],{"class":622},[617,32536,277],{"class":626},[617,32538,3852],{"class":630},[617,32540,637],{"class":622},[617,32542,640],{"class":622},[617,32544,10377],{"class":643},[617,32546,640],{"class":622},[617,32548,3009],{"class":622},[617,32550,27364],{"class":630},[617,32552,637],{"class":622},[617,32554,640],{"class":622},[617,32556,18946],{"class":663},[617,32558,2531],{"class":2481},[617,32560,667],{"class":622},[617,32562,32496],{"class":2481},[617,32564,667],{"class":622},[617,32566,32567],{"class":2481}," 16",[617,32569,667],{"class":622},[617,32571,32572],{"class":2481}," 80",[617,32574,2494],{"class":663},[617,32576,640],{"class":622},[617,32578,3009],{"class":622},[617,32580,4110],{"class":630},[617,32582,637],{"class":622},[617,32584,640],{"class":622},[617,32586,18946],{"class":663},[617,32588,32589],{"class":622},"-",[617,32591,800],{"class":2481},[617,32593,667],{"class":622},[617,32595,32596],{"class":2481}," 6",[617,32598,667],{"class":622},[617,32600,2486],{"class":2481},[617,32602,2494],{"class":663},[617,32604,640],{"class":622},[617,32606,649],{"class":622},[617,32608,32609],{"class":619,"line":719},[617,32610,27477],{"class":663},[617,32612,32613,32615,32617],{"class":619,"line":725},[617,32614,712],{"class":622},[617,32616,277],{"class":626},[617,32618,649],{"class":622},[1307,32620,27488],{},{"title":556,"searchDepth":557,"depth":558,"links":32622},[32623],{"id":604,"depth":558,"text":15},"Short-cut for a TorusGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":277,"description":32624},"yySx0l9wZ0o7oTaUN9FO6Q3RIbMpJeR5NAvohXoIacY",{"id":32629,"title":281,"body":32630,"description":32814,"extension":571,"links":572,"meta":32815,"navigation":574,"path":282,"seo":32816,"stem":283,"__hash__":32817},"docs/2.api/5.shapes/torus-knot.md",{"type":481,"value":32631,"toc":32811},[32632,32637,32647,32653,32659,32661,32809],[588,32633,32634],{},[32635,32636],"shapes-torus-knot",{},[594,32638,2756,32639,8223,32641,27328,32644,1126],{},[598,32640,7297],{},[598,32642,32643],{},"\u003CTorusKnot />",[598,32645,32646],{},"TorusKnotGeometry",[606,32648,32651],{"className":32649,"code":32650,"language":27337},[27335],"args: [\n radius: number,\n tube: number,\n tubularSegments: number,\n radialSegments: number,\n p: number,\n q: number\n]\n",[598,32652,32650],{"__ignoreMap":556},[594,32654,27342,32655],{},[1120,32656,32646],{"href":32657,"rel":32658},"https://threejs.org/docs/?q=torus#api/en/geometries/TorusKnotGeometry",[1124],[484,32660,15],{"id":604},[606,32662,32664],{"className":608,"code":32663,"language":613,"meta":556,"style":556},"\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",[598,32665,32666,32715,32719,32724,32797,32801],{"__ignoreMap":556},[617,32667,32668,32670,32673,32675,32677,32679,32681,32683,32685,32687,32690,32692,32695,32697,32699,32701,32703,32705,32707,32709,32711,32713],{"class":619,"line":557},[617,32669,623],{"class":622},[617,32671,32672],{"class":626},"TorusKnot",[617,32674,3009],{"class":622},[617,32676,27364],{"class":630},[617,32678,637],{"class":622},[617,32680,640],{"class":622},[617,32682,18946],{"class":663},[617,32684,27195],{"class":2481},[617,32686,667],{"class":622},[617,32688,32689],{"class":2481}," 0.2",[617,32691,667],{"class":622},[617,32693,32694],{"class":2481}," 64",[617,32696,667],{"class":622},[617,32698,28237],{"class":2481},[617,32700,2494],{"class":663},[617,32702,640],{"class":622},[617,32704,2669],{"class":630},[617,32706,637],{"class":622},[617,32708,640],{"class":622},[617,32710,11377],{"class":643},[617,32712,640],{"class":622},[617,32714,767],{"class":622},[617,32716,32717],{"class":619,"line":558},[617,32718,722],{"emptyLinePlaceholder":574},[617,32720,32721],{"class":619,"line":688},[617,32722,32723],{"class":663},"// TorusKnot with a custom material transformations\n",[617,32725,32726,32728,32730,32732,32734,32736,32739,32741,32743,32745,32747,32749,32751,32753,32755,32757,32759,32761,32763,32765,32767,32769,32771,32773,32775,32777,32779,32781,32783,32785,32787,32789,32791,32793,32795],{"class":619,"line":709},[617,32727,623],{"class":622},[617,32729,32672],{"class":626},[617,32731,3852],{"class":630},[617,32733,637],{"class":622},[617,32735,640],{"class":622},[617,32737,32738],{"class":643},"torusKnotRef",[617,32740,640],{"class":622},[617,32742,3009],{"class":622},[617,32744,27364],{"class":630},[617,32746,637],{"class":622},[617,32748,640],{"class":622},[617,32750,18946],{"class":663},[617,32752,27195],{"class":2481},[617,32754,667],{"class":622},[617,32756,32689],{"class":2481},[617,32758,667],{"class":622},[617,32760,32694],{"class":2481},[617,32762,667],{"class":622},[617,32764,28237],{"class":2481},[617,32766,2494],{"class":663},[617,32768,640],{"class":622},[617,32770,3009],{"class":622},[617,32772,4110],{"class":630},[617,32774,637],{"class":622},[617,32776,640],{"class":622},[617,32778,18946],{"class":663},[617,32780,32589],{"class":622},[617,32782,800],{"class":2481},[617,32784,667],{"class":622},[617,32786,32596],{"class":2481},[617,32788,667],{"class":622},[617,32790,28832],{"class":2481},[617,32792,2494],{"class":663},[617,32794,640],{"class":622},[617,32796,649],{"class":622},[617,32798,32799],{"class":619,"line":719},[617,32800,27477],{"class":663},[617,32802,32803,32805,32807],{"class":619,"line":725},[617,32804,712],{"class":622},[617,32806,32672],{"class":626},[617,32808,649],{"class":622},[1307,32810,27488],{},{"title":556,"searchDepth":557,"depth":558,"links":32812},[32813],{"id":604,"depth":558,"text":15},"Short-cut for a TorusKnotGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":281,"description":32814},"OlUiMxF35Ud6Y1uh8PxYgHq7DDQtWj0nint0vp1wx2U",{"id":32819,"title":285,"body":32820,"description":33195,"extension":571,"links":572,"meta":33196,"navigation":574,"path":286,"seo":33197,"stem":287,"__hash__":33198},"docs/2.api/5.shapes/tube.md",{"type":481,"value":32821,"toc":33191},[32822,32827,32837,32843,32845,33179,33182,33188],[588,32823,32824],{},[32825,32826],"shapes-tube",{},[594,32828,2756,32829,8223,32831,27328,32834,1126],{},[598,32830,7297],{},[598,32832,32833],{},"\u003CTube />",[598,32835,32836],{},"TubeGeometry",[594,32838,27342,32839],{},[1120,32840,32836],{"href":32841,"rel":32842},"https://threejs.org/docs/?q=tube#api/en/geometries/TubeGeometry",[1124],[484,32844,15],{"id":604},[606,32846,32848],{"className":608,"code":32847,"language":613,"meta":556,"style":556},"\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",[598,32849,32850,32870,32889,32912,32930,32934,32954,32979,33006,33028,33050,33054,33062,33066,33074,33079,33108,33112,33117,33145,33163,33171],{"__ignoreMap":556},[617,32851,32852,32854,32856,32858,32860,32862,32864,32866,32868],{"class":619,"line":557},[617,32853,623],{"class":622},[617,32855,627],{"class":626},[617,32857,631],{"class":630},[617,32859,634],{"class":630},[617,32861,637],{"class":622},[617,32863,640],{"class":622},[617,32865,644],{"class":643},[617,32867,640],{"class":622},[617,32869,649],{"class":622},[617,32871,32872,32874,32876,32879,32881,32883,32885,32887],{"class":619,"line":558},[617,32873,657],{"class":656},[617,32875,660],{"class":622},[617,32877,32878],{"class":663}," Tube",[617,32880,673],{"class":622},[617,32882,676],{"class":656},[617,32884,679],{"class":622},[617,32886,682],{"class":643},[617,32888,685],{"class":622},[617,32890,32891,32893,32895,32898,32900,32902,32904,32906,32908,32910],{"class":619,"line":688},[617,32892,657],{"class":656},[617,32894,660],{"class":622},[617,32896,32897],{"class":663}," CubicBezierCurve3",[617,32899,667],{"class":622},[617,32901,27610],{"class":663},[617,32903,673],{"class":622},[617,32905,676],{"class":656},[617,32907,679],{"class":622},[617,32909,4606],{"class":643},[617,32911,685],{"class":622},[617,32913,32914,32916,32918,32920,32922,32924,32926,32928],{"class":619,"line":709},[617,32915,657],{"class":656},[617,32917,660],{"class":622},[617,32919,3852],{"class":663},[617,32921,673],{"class":622},[617,32923,676],{"class":656},[617,32925,679],{"class":622},[617,32927,613],{"class":643},[617,32929,685],{"class":622},[617,32931,32932],{"class":619,"line":719},[617,32933,722],{"emptyLinePlaceholder":574},[617,32935,32936,32938,32941,32943,32945,32947,32950,32952],{"class":619,"line":725},[617,32937,2395],{"class":630},[617,32939,32940],{"class":663}," tubePath ",[617,32942,637],{"class":622},[617,32944,3852],{"class":2414},[617,32946,2417],{"class":663},[617,32948,32949],{"class":622},"new",[617,32951,32897],{"class":2414},[617,32953,4678],{"class":663},[617,32955,32956,32959,32961,32963,32965,32967,32969,32971,32973,32975,32977],{"class":619,"line":735},[617,32957,32958],{"class":622}," new",[617,32960,27610],{"class":2414},[617,32962,2417],{"class":663},[617,32964,32589],{"class":622},[617,32966,1854],{"class":2481},[617,32968,667],{"class":622},[617,32970,2486],{"class":2481},[617,32972,667],{"class":622},[617,32974,2486],{"class":2481},[617,32976,3320],{"class":663},[617,32978,2468],{"class":622},[617,32980,32981,32983,32985,32987,32989,32991,32993,32996,32998,33000,33002,33004],{"class":619,"line":758},[617,32982,32958],{"class":622},[617,32984,27610],{"class":2414},[617,32986,2417],{"class":663},[617,32988,32589],{"class":622},[617,32990,1926],{"class":2481},[617,32992,667],{"class":622},[617,32994,32995],{"class":622}," -",[617,32997,1854],{"class":2481},[617,32999,667],{"class":622},[617,33001,2486],{"class":2481},[617,33003,3320],{"class":663},[617,33005,2468],{"class":622},[617,33007,33008,33010,33012,33014,33016,33018,33020,33022,33024,33026],{"class":619,"line":770},[617,33009,32958],{"class":622},[617,33011,27610],{"class":2414},[617,33013,2417],{"class":663},[617,33015,1926],{"class":2481},[617,33017,667],{"class":622},[617,33019,2541],{"class":2481},[617,33021,667],{"class":622},[617,33023,2486],{"class":2481},[617,33025,3320],{"class":663},[617,33027,2468],{"class":622},[617,33029,33030,33032,33034,33036,33038,33040,33042,33044,33046,33048],{"class":619,"line":780},[617,33031,32958],{"class":622},[617,33033,27610],{"class":2414},[617,33035,2417],{"class":663},[617,33037,1854],{"class":2481},[617,33039,667],{"class":622},[617,33041,2486],{"class":2481},[617,33043,667],{"class":622},[617,33045,2486],{"class":2481},[617,33047,3320],{"class":663},[617,33049,2468],{"class":622},[617,33051,33052],{"class":619,"line":785},[617,33053,7169],{"class":663},[617,33055,33056,33058,33060],{"class":619,"line":807},[617,33057,712],{"class":622},[617,33059,627],{"class":626},[617,33061,649],{"class":622},[617,33063,33064],{"class":619,"line":611},[617,33065,722],{"emptyLinePlaceholder":574},[617,33067,33068,33070,33072],{"class":619,"line":830},[617,33069,623],{"class":622},[617,33071,730],{"class":626},[617,33073,649],{"class":622},[617,33075,33076],{"class":619,"line":841},[617,33077,33078],{"class":1189}," \u003C!-- TubeGeometry needs a curve path to be construct -->\n",[617,33080,33081,33083,33085,33087,33089,33091,33094,33096,33098,33100,33102,33104,33106],{"class":619,"line":852},[617,33082,738],{"class":622},[617,33084,285],{"class":626},[617,33086,1939],{"class":630},[617,33088,637],{"class":622},[617,33090,640],{"class":622},[617,33092,33093],{"class":643},"[tubePath, 20, 0.2, 8, false]",[617,33095,640],{"class":622},[617,33097,2669],{"class":630},[617,33099,637],{"class":622},[617,33101,640],{"class":622},[617,33103,11377],{"class":643},[617,33105,640],{"class":622},[617,33107,767],{"class":622},[617,33109,33110],{"class":619,"line":862},[617,33111,722],{"emptyLinePlaceholder":574},[617,33113,33114],{"class":619,"line":612},[617,33115,33116],{"class":1189}," \u003C!-- Tube with a custom material transformations -->\n",[617,33118,33119,33121,33123,33125,33127,33129,33131,33133,33135,33137,33139,33141,33143],{"class":619,"line":882},[617,33120,738],{"class":622},[617,33122,285],{"class":626},[617,33124,1939],{"class":630},[617,33126,637],{"class":622},[617,33128,640],{"class":622},[617,33130,33093],{"class":643},[617,33132,640],{"class":622},[617,33134,1465],{"class":630},[617,33136,637],{"class":622},[617,33138,640],{"class":622},[617,33140,14337],{"class":643},[617,33142,640],{"class":622},[617,33144,649],{"class":622},[617,33146,33147,33149,33151,33153,33155,33157,33159,33161],{"class":619,"line":892},[617,33148,761],{"class":622},[617,33150,11368],{"class":626},[617,33152,2669],{"class":630},[617,33154,637],{"class":622},[617,33156,640],{"class":622},[617,33158,11377],{"class":643},[617,33160,640],{"class":622},[617,33162,767],{"class":622},[617,33164,33165,33167,33169],{"class":619,"line":2605},[617,33166,885],{"class":622},[617,33168,285],{"class":626},[617,33170,649],{"class":622},[617,33172,33173,33175,33177],{"class":619,"line":2614},[617,33174,712],{"class":622},[617,33176,730],{"class":626},[617,33178,649],{"class":622},[484,33180,33181],{"id":27364},"Args",[606,33183,33186],{"className":33184,"code":33185,"language":27337},[27335],"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",[598,33187,33185],{"__ignoreMap":556},[1307,33189,33190],{},"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 .light .shiki span {color: var(--shiki-light);background: var(--shiki-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":556,"searchDepth":557,"depth":558,"links":33192},[33193,33194],{"id":604,"depth":558,"text":15},{"id":27364,"depth":558,"text":33181},"Short-cut for a TubeGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":285,"description":33195},"zVAYQCaOg4ZLIRgpfR02Fdo7jK-GAaHqfNXcfRiMzEs",[33200,33494,33935,34146,34444],{"id":33201,"title":295,"body":33202,"description":33490,"extension":571,"links":572,"meta":33491,"navigation":574,"path":296,"seo":33492,"stem":297,"__hash__":33493},"docs/2.api/6.debug-performance/helper.md",{"type":481,"value":33203,"toc":33486},[33204,33209,33215,33217,33444,33446,33484],[2275,33205,33206],{},[33207,33208],"debug-performance-helper",{},[594,33210,33211,33214],{},[598,33212,33213],{},"\u003CHelper />"," handles instantiation, updates, and removal/disposal of THREE Helpers.",[484,33216,15],{"id":604},[606,33218,33221],{"className":608,"code":33219,"highlights":33220,"language":613,"meta":556,"style":556},"\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",[688,611],[598,33222,33223,33243,33261,33281,33300,33308,33312,33320,33328,33346,33364,33372,33380,33412,33420,33428,33436],{"__ignoreMap":556},[617,33224,33225,33227,33229,33231,33233,33235,33237,33239,33241],{"class":619,"line":557},[617,33226,623],{"class":622},[617,33228,627],{"class":626},[617,33230,631],{"class":630},[617,33232,634],{"class":630},[617,33234,637],{"class":622},[617,33236,640],{"class":622},[617,33238,644],{"class":643},[617,33240,640],{"class":622},[617,33242,649],{"class":622},[617,33244,33245,33247,33249,33251,33253,33255,33257,33259],{"class":619,"line":558},[617,33246,657],{"class":656},[617,33248,660],{"class":622},[617,33250,695],{"class":663},[617,33252,673],{"class":622},[617,33254,676],{"class":656},[617,33256,679],{"class":622},[617,33258,704],{"class":643},[617,33260,685],{"class":622},[617,33262,33264,33266,33268,33271,33273,33275,33277,33279],{"class":33263,"line":688},[619,653],[617,33265,657],{"class":656},[617,33267,660],{"class":622},[617,33269,33270],{"class":663}," Helper",[617,33272,673],{"class":622},[617,33274,676],{"class":656},[617,33276,679],{"class":622},[617,33278,682],{"class":643},[617,33280,685],{"class":622},[617,33282,33283,33285,33287,33290,33292,33294,33296,33298],{"class":619,"line":709},[617,33284,657],{"class":656},[617,33286,660],{"class":622},[617,33288,33289],{"class":663}," BoxHelper",[617,33291,673],{"class":622},[617,33293,676],{"class":656},[617,33295,679],{"class":622},[617,33297,4606],{"class":643},[617,33299,685],{"class":622},[617,33301,33302,33304,33306],{"class":619,"line":719},[617,33303,712],{"class":622},[617,33305,627],{"class":626},[617,33307,649],{"class":622},[617,33309,33310],{"class":619,"line":725},[617,33311,722],{"emptyLinePlaceholder":574},[617,33313,33314,33316,33318],{"class":619,"line":735},[617,33315,623],{"class":622},[617,33317,730],{"class":626},[617,33319,649],{"class":622},[617,33321,33322,33324,33326],{"class":619,"line":758},[617,33323,738],{"class":622},[617,33325,741],{"class":626},[617,33327,649],{"class":622},[617,33329,33330,33332,33334,33336,33338,33340,33342,33344],{"class":619,"line":770},[617,33331,761],{"class":622},[617,33333,764],{"class":626},[617,33335,1465],{"class":630},[617,33337,637],{"class":622},[617,33339,640],{"class":622},[617,33341,11330],{"class":643},[617,33343,640],{"class":622},[617,33345,767],{"class":622},[617,33347,33348,33350,33352,33354,33356,33358,33360,33362],{"class":619,"line":780},[617,33349,761],{"class":622},[617,33351,836],{"class":626},[617,33353,3852],{"class":630},[617,33355,637],{"class":622},[617,33357,640],{"class":622},[617,33359,14308],{"class":643},[617,33361,640],{"class":622},[617,33363,649],{"class":622},[617,33365,33366,33368,33370],{"class":619,"line":785},[617,33367,833],{"class":622},[617,33369,847],{"class":626},[617,33371,767],{"class":622},[617,33373,33374,33376,33378],{"class":619,"line":807},[617,33375,833],{"class":622},[617,33377,857],{"class":626},[617,33379,767],{"class":622},[617,33381,33383,33385,33387,33390,33392,33394,33397,33399,33401,33403,33405,33408,33410],{"class":33382,"line":611},[619,653],[617,33384,833],{"class":622},[617,33386,295],{"class":626},[617,33388,33389],{"class":630}," :type",[617,33391,637],{"class":622},[617,33393,640],{"class":622},[617,33395,33396],{"class":643},"BoxHelper",[617,33398,640],{"class":622},[617,33400,1939],{"class":630},[617,33402,637],{"class":622},[617,33404,640],{"class":622},[617,33406,33407],{"class":643},"[0xff0000]",[617,33409,640],{"class":622},[617,33411,767],{"class":622},[617,33413,33414,33416,33418],{"class":619,"line":830},[617,33415,875],{"class":622},[617,33417,836],{"class":626},[617,33419,649],{"class":622},[617,33421,33422,33424,33426],{"class":619,"line":841},[617,33423,761],{"class":622},[617,33425,8436],{"class":626},[617,33427,767],{"class":622},[617,33429,33430,33432,33434],{"class":619,"line":852},[617,33431,885],{"class":622},[617,33433,741],{"class":626},[617,33435,649],{"class":622},[617,33437,33438,33440,33442],{"class":619,"line":862},[617,33439,712],{"class":622},[617,33441,730],{"class":626},[617,33443,649],{"class":622},[484,33445,902],{"id":901},[907,33447,33448,33458],{},[910,33449,33450],{},[913,33451,33452,33454,33456],{},[916,33453,918],{"align":977},[916,33455,921],{"align":977},[916,33457,924],{},[926,33459,33460,33471],{},[913,33461,33462,33466,33469],{},[931,33463,33464],{"align":977},[1649,33465,5497],{},[931,33467,33468],{"align":977},"Helper constructor - required",[931,33470],{},[913,33472,33473,33477,33480],{},[931,33474,33475],{"align":977},[1649,33476,27364],{},[931,33478,33479],{"align":977},"Helper constructor args",[931,33481,33482],{},[598,33483,3559],{},[1307,33485,1624],{},{"title":556,"searchDepth":557,"depth":558,"links":33487},[33488,33489],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},"Handles instantiation, updates, and removal/disposal of THREE Helpers.",{},{"title":295,"description":33490},"sOeaxtC-_woCHM-l_CN1ntMywo7uC7PTbXeoO7-e15E",{"id":33495,"title":299,"body":33496,"description":33931,"extension":571,"links":572,"meta":33932,"navigation":574,"path":300,"seo":33933,"stem":301,"__hash__":33934},"docs/2.api/6.debug-performance/lod.md",{"type":481,"value":33497,"toc":33927},[33498,33503,33506,33517,33519,33873,33875,33924],[2275,33499,33500],{},[33501,33502],"debug-performance-lod",{},[594,33504,33505],{},"Level of Detail - show meshes with more or less geometry based on distance from the camera.",[594,33507,33508,33511,33512,33516],{},[598,33509,33510],{},"\u003CLOD />"," is a wrapper for THREE's ",[1120,33513,299],{"href":33514,"rel":33515},"https://threejs.org/docs/?q=LOD#api/en/objects/LOD",[1124]," class.",[484,33518,15],{"id":604},[606,33520,33522],{"className":608,"code":33521,"language":613,"meta":556,"style":556},"\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",[598,33523,33524,33544,33562,33581,33589,33593,33601,33609,33627,33647,33652,33660,33679,33698,33706,33711,33719,33738,33756,33764,33769,33777,33796,33815,33823,33831,33839,33857,33865],{"__ignoreMap":556},[617,33525,33526,33528,33530,33532,33534,33536,33538,33540,33542],{"class":619,"line":557},[617,33527,623],{"class":622},[617,33529,627],{"class":626},[617,33531,631],{"class":630},[617,33533,634],{"class":630},[617,33535,637],{"class":622},[617,33537,640],{"class":622},[617,33539,644],{"class":643},[617,33541,640],{"class":622},[617,33543,649],{"class":622},[617,33545,33546,33548,33550,33552,33554,33556,33558,33560],{"class":619,"line":558},[617,33547,657],{"class":656},[617,33549,660],{"class":622},[617,33551,695],{"class":663},[617,33553,673],{"class":622},[617,33555,676],{"class":656},[617,33557,679],{"class":622},[617,33559,704],{"class":643},[617,33561,685],{"class":622},[617,33563,33564,33566,33568,33571,33573,33575,33577,33579],{"class":619,"line":688},[617,33565,657],{"class":656},[617,33567,660],{"class":622},[617,33569,33570],{"class":663}," LOD",[617,33572,673],{"class":622},[617,33574,676],{"class":656},[617,33576,679],{"class":622},[617,33578,682],{"class":643},[617,33580,685],{"class":622},[617,33582,33583,33585,33587],{"class":619,"line":709},[617,33584,712],{"class":622},[617,33586,627],{"class":626},[617,33588,649],{"class":622},[617,33590,33591],{"class":619,"line":719},[617,33592,722],{"emptyLinePlaceholder":574},[617,33594,33595,33597,33599],{"class":619,"line":725},[617,33596,623],{"class":622},[617,33598,730],{"class":626},[617,33600,649],{"class":622},[617,33602,33603,33605,33607],{"class":619,"line":735},[617,33604,738],{"class":622},[617,33606,741],{"class":626},[617,33608,649],{"class":622},[617,33610,33611,33613,33615,33617,33619,33621,33623,33625],{"class":619,"line":758},[617,33612,761],{"class":622},[617,33614,764],{"class":626},[617,33616,1465],{"class":630},[617,33618,637],{"class":622},[617,33620,640],{"class":622},[617,33622,7425],{"class":643},[617,33624,640],{"class":622},[617,33626,767],{"class":622},[617,33628,33629,33631,33633,33636,33638,33640,33643,33645],{"class":619,"line":770},[617,33630,761],{"class":622},[617,33632,299],{"class":626},[617,33634,33635],{"class":630}," :levels",[617,33637,637],{"class":622},[617,33639,640],{"class":622},[617,33641,33642],{"class":643},"[0, 5, 10]",[617,33644,640],{"class":622},[617,33646,649],{"class":622},[617,33648,33649],{"class":619,"line":780},[617,33650,33651],{"class":1189}," \u003C!-- High detail mesh - shown when close -->\n",[617,33653,33654,33656,33658],{"class":619,"line":785},[617,33655,833],{"class":622},[617,33657,836],{"class":626},[617,33659,649],{"class":622},[617,33661,33662,33664,33666,33668,33670,33672,33675,33677],{"class":619,"line":807},[617,33663,844],{"class":622},[617,33665,3938],{"class":626},[617,33667,1939],{"class":630},[617,33669,637],{"class":622},[617,33671,640],{"class":622},[617,33673,33674],{"class":643},"[1, 32, 32]",[617,33676,640],{"class":622},[617,33678,767],{"class":622},[617,33680,33681,33683,33685,33687,33689,33691,33694,33696],{"class":619,"line":611},[617,33682,844],{"class":622},[617,33684,2666],{"class":626},[617,33686,2669],{"class":630},[617,33688,637],{"class":622},[617,33690,640],{"class":622},[617,33692,33693],{"class":643},"red",[617,33695,640],{"class":622},[617,33697,767],{"class":622},[617,33699,33700,33702,33704],{"class":619,"line":830},[617,33701,865],{"class":622},[617,33703,836],{"class":626},[617,33705,649],{"class":622},[617,33707,33708],{"class":619,"line":841},[617,33709,33710],{"class":1189}," \u003C!-- Medium detail mesh - shown at mid distance -->\n",[617,33712,33713,33715,33717],{"class":619,"line":852},[617,33714,833],{"class":622},[617,33716,836],{"class":626},[617,33718,649],{"class":622},[617,33720,33721,33723,33725,33727,33729,33731,33734,33736],{"class":619,"line":862},[617,33722,844],{"class":622},[617,33724,3938],{"class":626},[617,33726,1939],{"class":630},[617,33728,637],{"class":622},[617,33730,640],{"class":622},[617,33732,33733],{"class":643},"[1, 16, 16]",[617,33735,640],{"class":622},[617,33737,767],{"class":622},[617,33739,33740,33742,33744,33746,33748,33750,33752,33754],{"class":619,"line":612},[617,33741,844],{"class":622},[617,33743,2666],{"class":626},[617,33745,2669],{"class":630},[617,33747,637],{"class":622},[617,33749,640],{"class":622},[617,33751,11377],{"class":643},[617,33753,640],{"class":622},[617,33755,767],{"class":622},[617,33757,33758,33760,33762],{"class":619,"line":882},[617,33759,865],{"class":622},[617,33761,836],{"class":626},[617,33763,649],{"class":622},[617,33765,33766],{"class":619,"line":892},[617,33767,33768],{"class":1189}," \u003C!-- Low detail mesh - shown when far -->\n",[617,33770,33771,33773,33775],{"class":619,"line":2605},[617,33772,833],{"class":622},[617,33774,836],{"class":626},[617,33776,649],{"class":622},[617,33778,33779,33781,33783,33785,33787,33789,33792,33794],{"class":619,"line":2614},[617,33780,844],{"class":622},[617,33782,3938],{"class":626},[617,33784,1939],{"class":630},[617,33786,637],{"class":622},[617,33788,640],{"class":622},[617,33790,33791],{"class":643},"[1, 8, 8]",[617,33793,640],{"class":622},[617,33795,767],{"class":622},[617,33797,33798,33800,33802,33804,33806,33808,33811,33813],{"class":619,"line":2634},[617,33799,844],{"class":622},[617,33801,2666],{"class":626},[617,33803,2669],{"class":630},[617,33805,637],{"class":622},[617,33807,640],{"class":622},[617,33809,33810],{"class":643},"yellow",[617,33812,640],{"class":622},[617,33814,767],{"class":622},[617,33816,33817,33819,33821],{"class":619,"line":2643},[617,33818,865],{"class":622},[617,33820,836],{"class":626},[617,33822,649],{"class":622},[617,33824,33825,33827,33829],{"class":619,"line":2652},[617,33826,875],{"class":622},[617,33828,299],{"class":626},[617,33830,649],{"class":622},[617,33832,33833,33835,33837],{"class":619,"line":2661},[617,33834,761],{"class":622},[617,33836,8436],{"class":626},[617,33838,767],{"class":622},[617,33840,33841,33843,33845,33847,33849,33851,33853,33855],{"class":619,"line":2683},[617,33842,761],{"class":622},[617,33844,8455],{"class":626},[617,33846,1465],{"class":630},[617,33848,637],{"class":622},[617,33850,640],{"class":622},[617,33852,11412],{"class":643},[617,33854,640],{"class":622},[617,33856,767],{"class":622},[617,33858,33859,33861,33863],{"class":619,"line":2727},[617,33860,885],{"class":622},[617,33862,741],{"class":626},[617,33864,649],{"class":622},[617,33866,33867,33869,33871],{"class":619,"line":2736},[617,33868,712],{"class":622},[617,33870,730],{"class":626},[617,33872,649],{"class":622},[484,33874,902],{"id":901},[907,33876,33877,33887],{},[910,33878,33879],{},[913,33880,33881,33883,33885],{},[916,33882,918],{"align":977},[916,33884,921],{"align":977},[916,33886,924],{},[926,33888,33889,33910],{},[913,33890,33891,33896,33908],{},[931,33892,33893],{"align":977},[1649,33894,33895],{},"levels",[931,33897,33898,33901,33902,33904,33905,33907],{"align":977},[598,33899,33900],{},"number[]"," - The distances at which to display each level of detail. There should be one ",[598,33903,33895],{}," value for each ",[598,33906,299],{}," child.",[931,33909],{},[913,33911,33912,33917,33920],{},[931,33913,33914],{"align":977},[1649,33915,33916],{},"hysteresis",[931,33918,33919],{"align":977},"Threshold used to avoid flickering at LOD boundaries, as a fraction of distance.",[931,33921,33922],{},[598,33923,11833],{},[1307,33925,33926],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":556,"searchDepth":557,"depth":558,"links":33928},[33929,33930],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},"Level of Detail - show meshes with more or less geometry based on distance from camera.",{},{"title":299,"description":33931},"Vf93ORp5sHYAGbVs0PWkO2EoHaFKA4HQ5pb0l8rQxoQ",{"id":33936,"title":303,"body":33937,"description":34142,"extension":571,"links":572,"meta":34143,"navigation":574,"path":304,"seo":34144,"stem":305,"__hash__":34145},"docs/2.api/6.debug-performance/stats.md",{"type":481,"value":33938,"toc":34138},[33939,33953,33962,33966,34083,34085,34119,34136],[594,33940,33941,33946,33947,33952],{},[1120,33942,33945],{"href":33943,"rel":33944},"https://github.com/mrdoob/stats.js/",[1124],"stats.js"," is a JavaScript performance monitor, made by ",[1120,33948,33951],{"href":33949,"rel":33950},"https://github.com/mrdoob",[1124],"mrdoob",". stats.js provides a simple info box that will help you monitor your code performance.",[594,33954,33955,33958,33959,33961],{},[1649,33956,33957],{},"Cientos"," provides a component called ",[598,33960,303],{}," that creates a panel without effort or configuration in the top left corner where you'll be able to monitor your app.",[484,33963,33965],{"id":33964},"basic-usage","Basic usage",[606,33967,33970],{"className":608,"code":33968,"highlights":33969,"language":613,"meta":556,"style":556},"\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",[688,758],[598,33971,33972,33992,34010,34030,34038,34042,34050,34058,34067,34075],{"__ignoreMap":556},[617,33973,33974,33976,33978,33980,33982,33984,33986,33988,33990],{"class":619,"line":557},[617,33975,623],{"class":622},[617,33977,627],{"class":626},[617,33979,631],{"class":630},[617,33981,634],{"class":630},[617,33983,637],{"class":622},[617,33985,640],{"class":622},[617,33987,644],{"class":643},[617,33989,640],{"class":622},[617,33991,649],{"class":622},[617,33993,33994,33996,33998,34000,34002,34004,34006,34008],{"class":619,"line":558},[617,33995,657],{"class":656},[617,33997,660],{"class":622},[617,33999,695],{"class":663},[617,34001,673],{"class":622},[617,34003,676],{"class":656},[617,34005,679],{"class":622},[617,34007,704],{"class":643},[617,34009,685],{"class":622},[617,34011,34013,34015,34017,34020,34022,34024,34026,34028],{"class":34012,"line":688},[619,653],[617,34014,657],{"class":656},[617,34016,660],{"class":622},[617,34018,34019],{"class":663}," Stats",[617,34021,673],{"class":622},[617,34023,676],{"class":656},[617,34025,679],{"class":622},[617,34027,682],{"class":643},[617,34029,685],{"class":622},[617,34031,34032,34034,34036],{"class":619,"line":709},[617,34033,712],{"class":622},[617,34035,627],{"class":626},[617,34037,649],{"class":622},[617,34039,34040],{"class":619,"line":719},[617,34041,722],{"emptyLinePlaceholder":574},[617,34043,34044,34046,34048],{"class":619,"line":725},[617,34045,623],{"class":622},[617,34047,730],{"class":626},[617,34049,649],{"class":622},[617,34051,34052,34054,34056],{"class":619,"line":735},[617,34053,738],{"class":622},[617,34055,741],{"class":626},[617,34057,649],{"class":622},[617,34059,34061,34063,34065],{"class":34060,"line":758},[619,653],[617,34062,761],{"class":622},[617,34064,303],{"class":626},[617,34066,767],{"class":622},[617,34068,34069,34071,34073],{"class":619,"line":770},[617,34070,885],{"class":622},[617,34072,741],{"class":626},[617,34074,649],{"class":622},[617,34076,34077,34079,34081],{"class":619,"line":780},[617,34078,712],{"class":622},[617,34080,730],{"class":626},[617,34082,649],{"class":622},[484,34084,902],{"id":901},[907,34086,34087,34099],{},[910,34088,34089],{},[913,34090,34091,34093,34095,34097],{},[916,34092,918],{"align":977},[916,34094,5949],{},[916,34096,924],{},[916,34098,921],{},[926,34100,34101],{},[913,34102,34103,34108,34112,34116],{},[931,34104,34105],{"align":977},[1649,34106,34107],{},"showPanel",[931,34109,34110],{},[598,34111,5332],{},[931,34113,34114],{},[598,34115,945],{},[931,34117,34118],{},"FPS monitor.",[2193,34120,34121,34124,34127,34130],{},[2196,34122,34123],{},"0: FPS Frames rendered in the last second. The higher the number the better.",[2196,34125,34126],{},"1: MS Milliseconds needed to render a frame. The lower the number the better.",[2196,34128,34129],{},"2: MB MBytes of allocated memory. (Run Chrome with --enable-precise-memory-info)",[2196,34131,34132,34133,1126],{},"3+: CUSTOM User-defined panel support. For more info please check ",[1120,34134,33945],{"href":33943,"rel":34135},[1124],[1307,34137,1624],{},{"title":556,"searchDepth":557,"depth":558,"links":34139},[34140,34141],{"id":33964,"depth":558,"text":33965},{"id":901,"depth":558,"text":902},"JavaScript performance monitor to track FPS, MS, and memory usage.",{},{"title":303,"description":34142},"CEx2GwVgDehipIa_mCiC4Mpq7SAIqbwq61OScXwW86c",{"id":34147,"title":307,"body":34148,"description":34440,"extension":571,"links":572,"meta":34441,"navigation":574,"path":308,"seo":34442,"stem":309,"__hash__":34443},"docs/2.api/6.debug-performance/stats-gl.md",{"type":481,"value":34149,"toc":34436},[34150,34168,34171,34173,34290,34292,34434],[594,34151,34152,34157,34158,34163,34164,34167],{},[1120,34153,34156],{"href":34154,"rel":34155},"https://github.com/RenaudRohlinger/stats-gl",[1124],"stats-gl"," is a powerful WebGL performance monitoring tool created by ",[1120,34159,34162],{"href":34160,"rel":34161},"https://github.com/RenaudRohlinger",[1124],"RenaudRohlinger",".\nIt offers simple information boxes to track code performance and serves as a more advanced alternative to ",[1120,34165,33945],{"href":33943,"rel":34166},[1124],", capable of displaying CPU and GPU metrics.",[594,34169,34170],{},"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.",[484,34172,33965],{"id":33964},[606,34174,34177],{"className":608,"code":34175,"highlights":34176,"language":613,"meta":556,"style":556},"\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",[688,758],[598,34178,34179,34199,34217,34237,34245,34249,34257,34265,34274,34282],{"__ignoreMap":556},[617,34180,34181,34183,34185,34187,34189,34191,34193,34195,34197],{"class":619,"line":557},[617,34182,623],{"class":622},[617,34184,627],{"class":626},[617,34186,631],{"class":630},[617,34188,634],{"class":630},[617,34190,637],{"class":622},[617,34192,640],{"class":622},[617,34194,644],{"class":643},[617,34196,640],{"class":622},[617,34198,649],{"class":622},[617,34200,34201,34203,34205,34207,34209,34211,34213,34215],{"class":619,"line":558},[617,34202,657],{"class":656},[617,34204,660],{"class":622},[617,34206,695],{"class":663},[617,34208,673],{"class":622},[617,34210,676],{"class":656},[617,34212,679],{"class":622},[617,34214,704],{"class":643},[617,34216,685],{"class":622},[617,34218,34220,34222,34224,34227,34229,34231,34233,34235],{"class":34219,"line":688},[619,653],[617,34221,657],{"class":656},[617,34223,660],{"class":622},[617,34225,34226],{"class":663}," StatsGl",[617,34228,673],{"class":622},[617,34230,676],{"class":656},[617,34232,679],{"class":622},[617,34234,682],{"class":643},[617,34236,685],{"class":622},[617,34238,34239,34241,34243],{"class":619,"line":709},[617,34240,712],{"class":622},[617,34242,627],{"class":626},[617,34244,649],{"class":622},[617,34246,34247],{"class":619,"line":719},[617,34248,722],{"emptyLinePlaceholder":574},[617,34250,34251,34253,34255],{"class":619,"line":725},[617,34252,623],{"class":622},[617,34254,730],{"class":626},[617,34256,649],{"class":622},[617,34258,34259,34261,34263],{"class":619,"line":735},[617,34260,738],{"class":622},[617,34262,741],{"class":626},[617,34264,649],{"class":622},[617,34266,34268,34270,34272],{"class":34267,"line":758},[619,653],[617,34269,761],{"class":622},[617,34271,307],{"class":626},[617,34273,767],{"class":622},[617,34275,34276,34278,34280],{"class":619,"line":770},[617,34277,885],{"class":622},[617,34279,741],{"class":626},[617,34281,649],{"class":622},[617,34283,34284,34286,34288],{"class":619,"line":780},[617,34285,712],{"class":622},[617,34287,730],{"class":626},[617,34289,649],{"class":622},[484,34291,12073],{"id":15476},[907,34293,34294,34306],{},[910,34295,34296],{},[913,34297,34298,34300,34302,34304],{},[916,34299,8069],{"align":977},[916,34301,5949],{},[916,34303,924],{},[916,34305,921],{},[926,34307,34308,34326,34344,34363,34381,34399,34417],{},[913,34309,34310,34315,34319,34323],{},[931,34311,34312],{"align":977},[1649,34313,34314],{},"logsPerSecond",[931,34316,34317],{},[598,34318,5332],{},[931,34320,34321],{},[598,34322,27807],{},[931,34324,34325],{},"How often to log performance data, in logs per second.",[913,34327,34328,34333,34337,34341],{},[931,34329,34330],{"align":977},[1649,34331,34332],{},"samplesLog",[931,34334,34335],{},[598,34336,5332],{},[931,34338,34339],{},[598,34340,29633],{},[931,34342,34343],{},"Number of recent log samples to keep for computing averages.",[913,34345,34346,34351,34355,34360],{},[931,34347,34348],{"align":977},[1649,34349,34350],{},"samplesGraph",[931,34352,34353],{},[598,34354,5332],{},[931,34356,34357],{},[598,34358,34359],{},"10",[931,34361,34362],{},"Number of recent graph samples to keep for computing averages.",[913,34364,34365,34370,34374,34378],{},[931,34366,34367],{"align":977},[1649,34368,34369],{},"precision",[931,34371,34372],{},[598,34373,5332],{},[931,34375,34376],{},[598,34377,800],{},[931,34379,34380],{},"Precision of the data, in the number of decimal places (only affects CPU and GPU).",[913,34382,34383,34388,34392,34396],{},[931,34384,34385],{"align":977},[1649,34386,34387],{},"horizontal",[931,34389,34390],{},[598,34391,15441],{},[931,34393,34394],{},[598,34395,941],{},[931,34397,34398],{},"Display the canvases on the X-axis, set to align on the vertical axis.",[913,34400,34401,34406,34410,34414],{},[931,34402,34403],{"align":977},[1649,34404,34405],{},"minimal",[931,34407,34408],{},[598,34409,15441],{},[931,34411,34412],{},[598,34413,951],{},[931,34415,34416],{},"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.",[913,34418,34419,34423,34427,34431],{},[931,34420,34421],{"align":977},[1649,34422,6844],{},[931,34424,34425],{},[598,34426,5332],{},[931,34428,34429],{},[598,34430,945],{},[931,34432,34433],{},"Sets the initial panel to display - 0 for FPS, 1 for CPU, and 2 for GPU (if supported).",[1307,34435,1624],{},{"title":556,"searchDepth":557,"depth":558,"links":34437},[34438,34439],{"id":33964,"depth":558,"text":33965},{"id":15476,"depth":558,"text":12073},"WebGL performance monitoring tool displaying CPU and GPU metrics.",{},{"title":307,"description":34440},"U7tHg9fUc_rOVhwBvVzqjDp7pPwOLcUprEa_GiH5-Uc",{"id":34445,"title":311,"body":34446,"description":35855,"extension":571,"links":572,"meta":35856,"navigation":574,"path":312,"seo":35857,"stem":313,"__hash__":35858},"docs/2.api/6.debug-performance/use-bvh.md",{"type":481,"value":34447,"toc":35831},[34448,34453,34460,34474,34478,34481,34486,34497,34499,34502,34667,34671,34674,34822,34826,34829,35119,35121,35135,35139,35192,35196,35202,35350,35354,35374,35376,35380,35383,35475,35479,35482,35525,35528,35532,35582,35586,35612,35616,35622,35778,35780,35784,35805,35809,35828],[588,34449,34450],{},[34451,34452],"debug-performance-use-bounding-volume-hierarchy",{},[594,34454,34455,34456,34459],{},"A composable that dramatically improves raycasting performance by building a Bounding Volume Hierarchy (BVH) for your meshes. This can speed up raycasting by ",[1649,34457,34458],{},"orders of magnitude",", especially for complex models with many triangles.",[594,34461,34462,34463,34468,34469,1126],{},"Built on top of ",[1120,34464,34467],{"href":34465,"rel":34466},"https://github.com/gkjohnson/three-mesh-bvh",[1124],"three-mesh-bvh"," by ",[1120,34470,34473],{"href":34471,"rel":34472},"https://github.com/gkjohnson",[1124],"Garrett Johnson",[484,34475,34477],{"id":34476},"what-is-bvh","What is BVH?",[594,34479,34480],{},"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).",[594,34482,34483],{},[1649,34484,34485],{},"Use cases:",[2193,34487,34488,34491,34494],{},[2196,34489,34490],{},"Interactive 3D applications with raycasting (mouse picking, selection)",[2196,34492,34493],{},"Complex models with thousands of triangles",[2196,34495,34496],{},"Scenes with multiple raycasting operations per frame",[484,34498,15],{"id":604},[4031,34500,34501],{"id":33964},"Basic Usage",[606,34503,34506],{"className":608,"code":34504,"highlights":34505,"language":613,"meta":556,"style":556},"\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",[558,719,725,735,758,780],[598,34507,34508,34528,34552,34556,34585,34606,34615,34620,34629,34658],{"__ignoreMap":556},[617,34509,34510,34512,34514,34516,34518,34520,34522,34524,34526],{"class":619,"line":557},[617,34511,623],{"class":622},[617,34513,627],{"class":626},[617,34515,631],{"class":630},[617,34517,634],{"class":630},[617,34519,637],{"class":622},[617,34521,640],{"class":622},[617,34523,644],{"class":643},[617,34525,640],{"class":622},[617,34527,649],{"class":622},[617,34529,34531,34533,34535,34537,34539,34542,34544,34546,34548,34550],{"class":34530,"line":558},[619,653],[617,34532,657],{"class":656},[617,34534,660],{"class":622},[617,34536,4327],{"class":663},[617,34538,667],{"class":622},[617,34540,34541],{"class":663}," useBVH",[617,34543,673],{"class":622},[617,34545,676],{"class":656},[617,34547,679],{"class":622},[617,34549,682],{"class":643},[617,34551,685],{"class":622},[617,34553,34554],{"class":619,"line":688},[617,34555,722],{"emptyLinePlaceholder":574},[617,34557,34558,34560,34562,34564,34566,34568,34570,34572,34574,34576,34578,34581,34583],{"class":619,"line":709},[617,34559,2395],{"class":630},[617,34561,660],{"class":622},[617,34563,2400],{"class":626},[617,34565,1198],{"class":622},[617,34567,4989],{"class":663},[617,34569,2408],{"class":622},[617,34571,2411],{"class":622},[617,34573,4327],{"class":2414},[617,34575,2417],{"class":663},[617,34577,2420],{"class":622},[617,34579,34580],{"class":643},"/models/complex-model.glb",[617,34582,2420],{"class":622},[617,34584,2428],{"class":663},[617,34586,34588,34590,34592,34594,34596,34598,34600,34602,34604],{"class":34587,"line":719},[619,653],[617,34589,311],{"class":2414},[617,34591,2417],{"class":663},[617,34593,3654],{"class":622},[617,34595,3657],{"class":630},[617,34597,5028],{"class":663},[617,34599,1126],{"class":622},[617,34601,3665],{"class":663},[617,34603,3668],{"class":622},[617,34605,5037],{"class":663},[617,34607,34609,34611,34613],{"class":34608,"line":725},[619,653],[617,34610,712],{"class":622},[617,34612,627],{"class":626},[617,34614,649],{"class":622},[617,34616,34618],{"class":34617,"line":735},[619,653],[617,34619,722],{"emptyLinePlaceholder":574},[617,34621,34623,34625,34627],{"class":34622,"line":758},[619,653],[617,34624,623],{"class":622},[617,34626,730],{"class":626},[617,34628,649],{"class":622},[617,34630,34631,34633,34635,34637,34639,34641,34643,34645,34647,34649,34651,34654,34656],{"class":619,"line":770},[617,34632,738],{"class":622},[617,34634,4414],{"class":626},[617,34636,2690],{"class":630},[617,34638,637],{"class":622},[617,34640,640],{"class":622},[617,34642,16022],{"class":643},[617,34644,640],{"class":622},[617,34646,4428],{"class":630},[617,34648,637],{"class":622},[617,34650,640],{"class":622},[617,34652,34653],{"class":643},"model.scene",[617,34655,640],{"class":622},[617,34657,767],{"class":622},[617,34659,34661,34663,34665],{"class":34660,"line":780},[619,653],[617,34662,712],{"class":622},[617,34664,730],{"class":626},[617,34666,649],{"class":622},[4031,34668,34670],{"id":34669},"with-debug-visualization","With Debug Visualization",[594,34672,34673],{},"Enable debug mode to visualize the BVH bounding boxes:",[606,34675,34678],{"className":608,"code":34676,"highlights":34677,"language":613,"meta":556,"style":556},"\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",[709,719,725,735],[598,34679,34680,34700,34722,34726,34756,34761,34768,34788,34792,34806,34810,34814],{"__ignoreMap":556},[617,34681,34682,34684,34686,34688,34690,34692,34694,34696,34698],{"class":619,"line":557},[617,34683,623],{"class":622},[617,34685,627],{"class":626},[617,34687,631],{"class":630},[617,34689,634],{"class":630},[617,34691,637],{"class":622},[617,34693,640],{"class":622},[617,34695,644],{"class":643},[617,34697,640],{"class":622},[617,34699,649],{"class":622},[617,34701,34702,34704,34706,34708,34710,34712,34714,34716,34718,34720],{"class":619,"line":558},[617,34703,657],{"class":656},[617,34705,660],{"class":622},[617,34707,4327],{"class":663},[617,34709,667],{"class":622},[617,34711,34541],{"class":663},[617,34713,673],{"class":622},[617,34715,676],{"class":656},[617,34717,679],{"class":622},[617,34719,682],{"class":643},[617,34721,685],{"class":622},[617,34723,34724],{"class":619,"line":688},[617,34725,722],{"emptyLinePlaceholder":574},[617,34727,34729,34731,34733,34735,34737,34739,34741,34743,34745,34747,34749,34752,34754],{"class":34728,"line":709},[619,653],[617,34730,2395],{"class":630},[617,34732,660],{"class":622},[617,34734,2400],{"class":626},[617,34736,1198],{"class":622},[617,34738,4989],{"class":663},[617,34740,2408],{"class":622},[617,34742,2411],{"class":622},[617,34744,4327],{"class":2414},[617,34746,2417],{"class":663},[617,34748,2420],{"class":622},[617,34750,34751],{"class":643},"/models/model.glb",[617,34753,2420],{"class":622},[617,34755,2428],{"class":663},[617,34757,34759],{"class":34758,"line":719},[619,653],[617,34760,722],{"emptyLinePlaceholder":574},[617,34762,34764,34766],{"class":34763,"line":725},[619,653],[617,34765,311],{"class":2414},[617,34767,4678],{"class":663},[617,34769,34771,34773,34775,34777,34779,34781,34783,34786],{"class":34770,"line":735},[619,653],[617,34772,4683],{"class":622},[617,34774,3657],{"class":630},[617,34776,5028],{"class":663},[617,34778,1126],{"class":622},[617,34780,3665],{"class":663},[617,34782,3668],{"class":622},[617,34784,34785],{"class":663},"scene",[617,34787,2468],{"class":622},[617,34789,34790],{"class":619,"line":758},[617,34791,2451],{"class":622},[617,34793,34794,34797,34799,34801,34803],{"class":619,"line":770},[617,34795,34796],{"class":626}," debug",[617,34798,1198],{"class":622},[617,34800,4378],{"class":4377},[617,34802,667],{"class":622},[617,34804,34805],{"class":1189}," // Show BVH bounding boxes\n",[617,34807,34808],{"class":619,"line":780},[617,34809,7837],{"class":622},[617,34811,34812],{"class":619,"line":785},[617,34813,2428],{"class":663},[617,34815,34816,34818,34820],{"class":619,"line":807},[617,34817,712],{"class":622},[617,34819,627],{"class":626},[617,34821,649],{"class":622},[4031,34823,34825],{"id":34824},"reactive-enabled-state","Reactive Enabled State",[594,34827,34828],{},"Control BVH optimization dynamically:",[606,34830,34833],{"className":608,"code":34831,"highlights":34832,"language":613,"meta":556,"style":556},"\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",[709,725,735,758,770],[598,34834,34835,34855,34877,34899,34904,34921,34926,34955,34960,34967,34985,34989,35001,35005,35009,35013,35021,35025,35033,35041,35062,35067,35075,35103,35111],{"__ignoreMap":556},[617,34836,34837,34839,34841,34843,34845,34847,34849,34851,34853],{"class":619,"line":557},[617,34838,623],{"class":622},[617,34840,627],{"class":626},[617,34842,631],{"class":630},[617,34844,634],{"class":630},[617,34846,637],{"class":622},[617,34848,640],{"class":622},[617,34850,644],{"class":643},[617,34852,640],{"class":622},[617,34854,649],{"class":622},[617,34856,34857,34859,34861,34863,34865,34867,34869,34871,34873,34875],{"class":619,"line":558},[617,34858,657],{"class":656},[617,34860,660],{"class":622},[617,34862,3852],{"class":663},[617,34864,667],{"class":622},[617,34866,3469],{"class":663},[617,34868,673],{"class":622},[617,34870,676],{"class":656},[617,34872,679],{"class":622},[617,34874,613],{"class":643},[617,34876,685],{"class":622},[617,34878,34879,34881,34883,34885,34887,34889,34891,34893,34895,34897],{"class":619,"line":688},[617,34880,657],{"class":656},[617,34882,660],{"class":622},[617,34884,4327],{"class":663},[617,34886,667],{"class":622},[617,34888,34541],{"class":663},[617,34890,673],{"class":622},[617,34892,676],{"class":656},[617,34894,679],{"class":622},[617,34896,682],{"class":643},[617,34898,685],{"class":622},[617,34900,34902],{"class":34901,"line":709},[619,653],[617,34903,722],{"emptyLinePlaceholder":574},[617,34905,34906,34908,34911,34913,34915,34917,34919],{"class":619,"line":719},[617,34907,2395],{"class":630},[617,34909,34910],{"class":663}," bvhEnabled ",[617,34912,637],{"class":622},[617,34914,3852],{"class":2414},[617,34916,2417],{"class":663},[617,34918,941],{"class":4377},[617,34920,2428],{"class":663},[617,34922,34924],{"class":34923,"line":725},[619,653],[617,34925,722],{"emptyLinePlaceholder":574},[617,34927,34929,34931,34933,34935,34937,34939,34941,34943,34945,34947,34949,34951,34953],{"class":34928,"line":735},[619,653],[617,34930,2395],{"class":630},[617,34932,660],{"class":622},[617,34934,2400],{"class":626},[617,34936,1198],{"class":622},[617,34938,4989],{"class":663},[617,34940,2408],{"class":622},[617,34942,2411],{"class":622},[617,34944,4327],{"class":2414},[617,34946,2417],{"class":663},[617,34948,2420],{"class":622},[617,34950,34751],{"class":643},[617,34952,2420],{"class":622},[617,34954,2428],{"class":663},[617,34956,34958],{"class":34957,"line":758},[619,653],[617,34959,722],{"emptyLinePlaceholder":574},[617,34961,34963,34965],{"class":34962,"line":770},[619,653],[617,34964,311],{"class":2414},[617,34966,4678],{"class":663},[617,34968,34969,34971,34973,34975,34977,34979,34981,34983],{"class":619,"line":780},[617,34970,4683],{"class":622},[617,34972,3657],{"class":630},[617,34974,5028],{"class":663},[617,34976,1126],{"class":622},[617,34978,3665],{"class":663},[617,34980,3668],{"class":622},[617,34982,34785],{"class":663},[617,34984,2468],{"class":622},[617,34986,34987],{"class":619,"line":785},[617,34988,2451],{"class":622},[617,34990,34991,34994,34996,34999],{"class":619,"line":807},[617,34992,34993],{"class":626}," enabled",[617,34995,1198],{"class":622},[617,34997,34998],{"class":663}," bvhEnabled",[617,35000,2468],{"class":622},[617,35002,35003],{"class":619,"line":611},[617,35004,7837],{"class":622},[617,35006,35007],{"class":619,"line":830},[617,35008,2428],{"class":663},[617,35010,35011],{"class":619,"line":841},[617,35012,722],{"emptyLinePlaceholder":574},[617,35014,35015,35017,35019],{"class":619,"line":852},[617,35016,712],{"class":622},[617,35018,627],{"class":626},[617,35020,649],{"class":622},[617,35022,35023],{"class":619,"line":862},[617,35024,722],{"emptyLinePlaceholder":574},[617,35026,35027,35029,35031],{"class":619,"line":612},[617,35028,623],{"class":622},[617,35030,730],{"class":626},[617,35032,649],{"class":622},[617,35034,35035,35037,35039],{"class":619,"line":882},[617,35036,738],{"class":622},[617,35038,4099],{"class":626},[617,35040,649],{"class":622},[617,35042,35043,35045,35048,35051,35053,35055,35058,35060],{"class":619,"line":892},[617,35044,761],{"class":622},[617,35046,35047],{"class":626},"button",[617,35049,35050],{"class":630}," @click",[617,35052,637],{"class":622},[617,35054,640],{"class":622},[617,35056,35057],{"class":643},"bvhEnabled = !bvhEnabled",[617,35059,640],{"class":622},[617,35061,649],{"class":622},[617,35063,35064],{"class":619,"line":2605},[617,35065,35066],{"class":663}," Toggle BVH\n",[617,35068,35069,35071,35073],{"class":619,"line":2614},[617,35070,875],{"class":622},[617,35072,35047],{"class":626},[617,35074,649],{"class":622},[617,35076,35077,35079,35081,35083,35085,35087,35089,35091,35093,35095,35097,35099,35101],{"class":619,"line":2634},[617,35078,761],{"class":622},[617,35080,4414],{"class":626},[617,35082,2690],{"class":630},[617,35084,637],{"class":622},[617,35086,640],{"class":622},[617,35088,16022],{"class":643},[617,35090,640],{"class":622},[617,35092,4428],{"class":630},[617,35094,637],{"class":622},[617,35096,640],{"class":622},[617,35098,34653],{"class":643},[617,35100,640],{"class":622},[617,35102,767],{"class":622},[617,35104,35105,35107,35109],{"class":619,"line":2643},[617,35106,885],{"class":622},[617,35108,4099],{"class":626},[617,35110,649],{"class":622},[617,35112,35113,35115,35117],{"class":619,"line":2652},[617,35114,712],{"class":622},[617,35116,730],{"class":626},[617,35118,649],{"class":622},[484,35120,12073],{"id":15476},[594,35122,35123,35124,35127,35128,35131,35132,35134],{},"Options are divided into ",[1649,35125,35126],{},"reactive"," (can change at runtime) and ",[1649,35129,35130],{},"static"," (set once at creation - changing requires toggling ",[598,35133,14632],{}," off/on to rebuild).",[4031,35136,35138],{"id":35137},"reactive-options","Reactive Options",[907,35140,35141,35154],{},[910,35142,35143],{},[913,35144,35145,35148,35150,35152],{},[916,35146,35147],{"align":977},"Option",[916,35149,5949],{"align":977},[916,35151,924],{"align":977},[916,35153,921],{"align":977},[926,35155,35156,35174],{},[913,35157,35158,35162,35167,35171],{},[931,35159,35160],{"align":977},[1649,35161,14632],{},[931,35163,35164],{"align":977},[598,35165,35166],{},"MaybeRefOrGetter\u003Cboolean>",[931,35168,35169],{"align":977},[598,35170,941],{},[931,35172,35173],{"align":977},"Enable/disable BVH optimization. Toggling rebuilds BVH structures.",[913,35175,35176,35181,35185,35189],{},[931,35177,35178],{"align":977},[1649,35179,35180],{},"debug",[931,35182,35183],{"align":977},[598,35184,35166],{},[931,35186,35187],{"align":977},[598,35188,951],{},[931,35190,35191],{"align":977},"Show debug visualization of BVH bounding boxes.",[4031,35193,35195],{"id":35194},"static-options-bvh-construction","Static Options (BVH Construction)",[594,35197,35198,35199,35201],{},"These options configure how the BVH is built. Changing them after creation has no effect - toggle ",[598,35200,14632],{}," off/on to rebuild with new values.",[907,35203,35204,35216],{},[910,35205,35206],{},[913,35207,35208,35210,35212,35214],{},[916,35209,35147],{"align":977},[916,35211,5949],{"align":977},[916,35213,924],{"align":977},[916,35215,921],{"align":977},[926,35217,35218,35239,35259,35278,35296,35314,35332],{},[913,35219,35220,35225,35229,35233],{},[931,35221,35222],{"align":977},[1649,35223,35224],{},"firstHitOnly",[931,35226,35227],{"align":977},[598,35228,15441],{},[931,35230,35231],{"align":977},[598,35232,951],{},[931,35234,22454,35235,35238],{"align":977},[598,35236,35237],{},"raycastFirst"," for better performance when only the first hit is needed.",[913,35240,35241,35246,35251,35256],{},[931,35242,35243],{"align":977},[1649,35244,35245],{},"splitStrategy",[931,35247,35248],{"align":977},[598,35249,35250],{},"'CENTER' | 'AVERAGE' | 'SAH'",[931,35252,35253],{"align":977},[598,35254,35255],{},"'SAH'",[931,35257,35258],{"align":977},"BVH build strategy. See section below.",[913,35260,35261,35266,35270,35275],{},[931,35262,35263],{"align":977},[1649,35264,35265],{},"maxDepth",[931,35267,35268],{"align":977},[598,35269,5332],{},[931,35271,35272],{"align":977},[598,35273,35274],{},"40",[931,35276,35277],{"align":977},"Maximum tree depth for the BVH structure.",[913,35279,35280,35285,35289,35293],{},[931,35281,35282],{"align":977},[1649,35283,35284],{},"maxLeafSize",[931,35286,35287],{"align":977},[598,35288,5332],{},[931,35290,35291],{"align":977},[598,35292,34359],{},[931,35294,35295],{"align":977},"Target number of triangles per leaf node.",[913,35297,35298,35303,35307,35311],{},[931,35299,35300],{"align":977},[1649,35301,35302],{},"verbose",[931,35304,35305],{"align":977},[598,35306,15441],{},[931,35308,35309],{"align":977},[598,35310,951],{},[931,35312,35313],{"align":977},"Print construction warnings and progress to console.",[913,35315,35316,35321,35325,35329],{},[931,35317,35318],{"align":977},[1649,35319,35320],{},"setBoundingBox",[931,35322,35323],{"align":977},[598,35324,15441],{},[931,35326,35327],{"align":977},[598,35328,941],{},[931,35330,35331],{"align":977},"Automatically set geometry bounding box after BVH construction.",[913,35333,35334,35339,35343,35347],{},[931,35335,35336],{"align":977},[1649,35337,35338],{},"indirect",[931,35340,35341],{"align":977},[598,35342,15441],{},[931,35344,35345],{"align":977},[598,35346,951],{},[931,35348,35349],{"align":977},"If false, creates and rearranges index buffer for better performance.",[4031,35351,35353],{"id":35352},"split-strategies","Split Strategies",[2193,35355,35356,35362,35368],{},[2196,35357,35358,35361],{},[1649,35359,35360],{},"SAH (Surface Area Heuristic)"," - Slowest to build, fastest at runtime, uses least memory. Best for production.",[2196,35363,35364,35367],{},[1649,35365,35366],{},"AVERAGE"," - Balanced build time and runtime performance.",[2196,35369,35370,35373],{},[1649,35371,35372],{},"CENTER"," - Fastest to build, slower at runtime.",[484,35375,21344],{"id":21343},[4031,35377,35379],{"id":35378},"fine-tuning-performance","Fine-tuning Performance",[594,35381,35382],{},"Adjust BVH construction parameters for your use case:",[606,35384,35386],{"className":1166,"code":35385,"language":644,"meta":556,"style":556},"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",[598,35387,35388,35394,35401,35405,35424,35438,35453,35467,35471],{"__ignoreMap":556},[617,35389,35390,35392],{"class":619,"line":557},[617,35391,311],{"class":2414},[617,35393,4678],{"class":663},[617,35395,35396,35399],{"class":619,"line":558},[617,35397,35398],{"class":663}," target",[617,35400,2468],{"class":622},[617,35402,35403],{"class":619,"line":688},[617,35404,2451],{"class":622},[617,35406,35407,35410,35412,35414,35417,35419,35421],{"class":619,"line":709},[617,35408,35409],{"class":626}," splitStrategy",[617,35411,1198],{"class":622},[617,35413,679],{"class":622},[617,35415,35416],{"class":643},"SAH",[617,35418,2420],{"class":622},[617,35420,667],{"class":622},[617,35422,35423],{"class":1189}," // Best runtime performance\n",[617,35425,35426,35429,35431,35433,35435],{"class":619,"line":719},[617,35427,35428],{"class":626}," maxDepth",[617,35430,1198],{"class":622},[617,35432,20737],{"class":2481},[617,35434,667],{"class":622},[617,35436,35437],{"class":1189}," // Shallower tree (faster build)\n",[617,35439,35440,35443,35445,35448,35450],{"class":619,"line":725},[617,35441,35442],{"class":626}," maxLeafSize",[617,35444,1198],{"class":622},[617,35446,35447],{"class":2481}," 5",[617,35449,667],{"class":622},[617,35451,35452],{"class":1189}," // Smaller leaves (better culling)\n",[617,35454,35455,35458,35460,35462,35464],{"class":619,"line":735},[617,35456,35457],{"class":626}," verbose",[617,35459,1198],{"class":622},[617,35461,4378],{"class":4377},[617,35463,667],{"class":622},[617,35465,35466],{"class":1189}," // Debug construction\n",[617,35468,35469],{"class":619,"line":758},[617,35470,7837],{"class":622},[617,35472,35473],{"class":619,"line":770},[617,35474,2428],{"class":663},[4031,35476,35478],{"id":35477},"first-hit-only-mode","First Hit Only Mode",[594,35480,35481],{},"When you only need the closest intersection (e.g., mouse picking):",[606,35483,35485],{"className":1166,"code":35484,"language":644,"meta":556,"style":556},"useBVH(\n target,\n {\n firstHitOnly: true, // Uses raycastFirst internally\n }\n)\n",[598,35486,35487,35493,35499,35503,35517,35521],{"__ignoreMap":556},[617,35488,35489,35491],{"class":619,"line":557},[617,35490,311],{"class":2414},[617,35492,4678],{"class":663},[617,35494,35495,35497],{"class":619,"line":558},[617,35496,35398],{"class":663},[617,35498,2468],{"class":622},[617,35500,35501],{"class":619,"line":688},[617,35502,2451],{"class":622},[617,35504,35505,35508,35510,35512,35514],{"class":619,"line":709},[617,35506,35507],{"class":626}," firstHitOnly",[617,35509,1198],{"class":622},[617,35511,4378],{"class":4377},[617,35513,667],{"class":622},[617,35515,35516],{"class":1189}," // Uses raycastFirst internally\n",[617,35518,35519],{"class":619,"line":719},[617,35520,7837],{"class":622},[617,35522,35523],{"class":619,"line":725},[617,35524,2428],{"class":663},[594,35526,35527],{},"This is significantly faster than computing all intersections when you only need one.",[484,35529,35531],{"id":35530},"important-notes","Important Notes",[2193,35533,35534,35540,35559,35565,35576],{},[2196,35535,35536,35539],{},[1649,35537,35538],{},"Side-effect free",": BVH is automatically removed on unmount and when disabled.",[2196,35541,35542,35545,35546,3043,35548,35550,35551,1652,35553,35555,35556,35558],{},[1649,35543,35544],{},"Reactive options",": Only ",[598,35547,14632],{},[598,35549,35180],{}," are reactive. Construction options (",[598,35552,35245],{},[598,35554,35265],{},", etc.) are static - to apply new values, toggle ",[598,35557,14632],{}," off/on.",[2196,35560,35561,35564],{},[1649,35562,35563],{},"Memory efficient",": BVH structures are properly disposed when removed.",[2196,35566,35567,35570,35571,3043,35573,35575],{},[1649,35568,35569],{},"Automatic mesh detection",": Works with ",[598,35572,4272],{},[598,35574,6331],{}," instances.",[2196,35577,35578,35581],{},[1649,35579,35580],{},"Draco models",": Works seamlessly with Draco-compressed GLTF models.",[484,35583,35585],{"id":35584},"performance-tips","Performance Tips",[12192,35587,35588,35594,35600,35606],{},[2196,35589,35590,35593],{},[1649,35591,35592],{},"Use firstHitOnly"," when you only need the closest intersection",[2196,35595,35596,35599],{},[1649,35597,35598],{},"SAH strategy"," gives best runtime performance for production",[2196,35601,35602,35605],{},[1649,35603,35604],{},"Adjust maxLeafSize"," based on triangle density (smaller for dense meshes)",[2196,35607,35608,35611],{},[1649,35609,35610],{},"Enable debug mode"," during development to verify BVH coverage",[484,35613,35615],{"id":35614},"integration-with-usegltf","Integration with useGLTF",[594,35617,35618,35619,35621],{},"Perfect pairing with ",[598,35620,121],{}," for optimized model loading:",[606,35623,35625],{"className":608,"code":35624,"language":613,"meta":556,"style":556},"\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",[598,35626,35627,35647,35669,35673,35704,35714,35720,35724,35730,35748,35766,35770],{"__ignoreMap":556},[617,35628,35629,35631,35633,35635,35637,35639,35641,35643,35645],{"class":619,"line":557},[617,35630,623],{"class":622},[617,35632,627],{"class":626},[617,35634,631],{"class":630},[617,35636,634],{"class":630},[617,35638,637],{"class":622},[617,35640,640],{"class":622},[617,35642,644],{"class":643},[617,35644,640],{"class":622},[617,35646,649],{"class":622},[617,35648,35649,35651,35653,35655,35657,35659,35661,35663,35665,35667],{"class":619,"line":558},[617,35650,657],{"class":656},[617,35652,660],{"class":622},[617,35654,34541],{"class":663},[617,35656,667],{"class":622},[617,35658,4327],{"class":663},[617,35660,673],{"class":622},[617,35662,676],{"class":656},[617,35664,679],{"class":622},[617,35666,682],{"class":643},[617,35668,685],{"class":622},[617,35670,35671],{"class":619,"line":688},[617,35672,722],{"emptyLinePlaceholder":574},[617,35674,35675,35677,35679,35681,35683,35685,35687,35689,35691,35693,35695,35698,35700,35702],{"class":619,"line":709},[617,35676,2395],{"class":630},[617,35678,660],{"class":622},[617,35680,2400],{"class":626},[617,35682,1198],{"class":622},[617,35684,4989],{"class":663},[617,35686,2408],{"class":622},[617,35688,2411],{"class":622},[617,35690,4327],{"class":2414},[617,35692,2417],{"class":663},[617,35694,2420],{"class":622},[617,35696,35697],{"class":643},"/models/high-poly-model.glb",[617,35699,2420],{"class":622},[617,35701,667],{"class":622},[617,35703,1184],{"class":622},[617,35705,35706,35709,35711],{"class":619,"line":719},[617,35707,35708],{"class":626}," draco",[617,35710,1198],{"class":622},[617,35712,35713],{"class":4377}," true\n",[617,35715,35716,35718],{"class":619,"line":725},[617,35717,2408],{"class":622},[617,35719,2428],{"class":663},[617,35721,35722],{"class":619,"line":735},[617,35723,722],{"emptyLinePlaceholder":574},[617,35725,35726,35728],{"class":619,"line":758},[617,35727,311],{"class":2414},[617,35729,4678],{"class":663},[617,35731,35732,35734,35736,35738,35740,35742,35744,35746],{"class":619,"line":770},[617,35733,4683],{"class":622},[617,35735,3657],{"class":630},[617,35737,5028],{"class":663},[617,35739,1126],{"class":622},[617,35741,3665],{"class":663},[617,35743,3668],{"class":622},[617,35745,34785],{"class":663},[617,35747,2468],{"class":622},[617,35749,35750,35753,35756,35758,35760,35762,35764],{"class":619,"line":780},[617,35751,35752],{"class":622}," {",[617,35754,35755],{"class":626}," splitStrategy",[617,35757,1198],{"class":622},[617,35759,679],{"class":622},[617,35761,35416],{"class":643},[617,35763,2420],{"class":622},[617,35765,19854],{"class":622},[617,35767,35768],{"class":619,"line":785},[617,35769,2428],{"class":663},[617,35771,35772,35774,35776],{"class":619,"line":807},[617,35773,712],{"class":622},[617,35775,627],{"class":626},[617,35777,649],{"class":622},[484,35779,22311],{"id":22310},[4031,35781,35783],{"id":35782},"bvh-not-applying-to-some-meshes","BVH not applying to some meshes",[2193,35785,35786,35789,35796],{},[2196,35787,35788],{},"Ensure meshes have valid geometry with position attributes",[2196,35790,35791,35792,35795],{},"Check console with ",[598,35793,35794],{},"verbose: true"," to see which meshes are skipped",[2196,35797,35798,35799,35801,35802,35804],{},"Verify the object is an ",[598,35800,7602],{}," (use ",[598,35803,4414],{}," in templates)",[4031,35806,35808],{"id":35807},"performance-not-improving","Performance not improving",[2193,35810,35811,35816,35822,35825],{},[2196,35812,16279,35813,35815],{},[598,35814,35224],{}," if you only need one intersection",[2196,35817,35818,35819,35821],{},"Try different split strategies (",[598,35820,35416],{}," is usually best)",[2196,35823,35824],{},"Verify raycasting is the bottleneck (use Stats/StatsGl)",[2196,35826,35827],{},"Consider LOD for very distant objects",[1307,35829,35830],{},"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":556,"searchDepth":557,"depth":558,"links":35832},[35833,35834,35839,35844,35848,35849,35850,35851],{"id":34476,"depth":558,"text":34477},{"id":604,"depth":558,"text":15,"children":35835},[35836,35837,35838],{"id":33964,"depth":688,"text":34501},{"id":34669,"depth":688,"text":34670},{"id":34824,"depth":688,"text":34825},{"id":15476,"depth":558,"text":12073,"children":35840},[35841,35842,35843],{"id":35137,"depth":688,"text":35138},{"id":35194,"depth":688,"text":35195},{"id":35352,"depth":688,"text":35353},{"id":21343,"depth":558,"text":21344,"children":35845},[35846,35847],{"id":35378,"depth":688,"text":35379},{"id":35477,"depth":688,"text":35478},{"id":35530,"depth":558,"text":35531},{"id":35584,"depth":558,"text":35585},{"id":35614,"depth":558,"text":35615},{"id":22310,"depth":558,"text":22311,"children":35852},[35853,35854],{"id":35782,"depth":688,"text":35783},{"id":35807,"depth":688,"text":35808},"Speed up raycasting with Bounding Volume Hierarchy (BVH) optimization.",{},{"title":311,"description":35855},"Ubx_HIq-xEI-Pv2T8zVe8LT3sJ_wBF7VmDcGGpLgBYs",[35860,36400,36946,37337,37812,39328,39958],{"id":35861,"title":321,"body":35862,"description":36396,"extension":571,"links":572,"meta":36397,"navigation":574,"path":322,"seo":36398,"stem":323,"__hash__":36399},"docs/2.api/7.light-shadow/accumulative-shadows.md",{"type":481,"value":35863,"toc":36391},[35864,35869,35883,35885,36161,36163,36357,36359,36369,36389],[588,35865,35866],{},[35867,35868],"light-shadow-accumulative-shadows",{},[594,35870,35871,4284,35874,35877,35878,1126],{},[598,35872,35873],{},"\u003CAccumulativeShadows />",[598,35875,35876],{},"THREE.DirectionalLight","-based shadow component. It displays shadows on a single shadow catcher plane, included in the component. It is based on ",[1120,35879,35882],{"href":35880,"rel":35881},"http://drei.docs.pmnd.rs/staging/accumulative-shadows",[1124],"Drei component of the same name",[484,35884,15],{"id":604},[606,35886,35889],{"className":608,"code":35887,"highlights":35888,"language":613,"meta":556,"style":556},"\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",[558,841,852,862,612,882],[598,35890,35891,35911,35931,35949,35957,35961,35969,35998,36004,36016,36020,36061,36069,36077,36085,36093,36107,36120,36126,36141,36145,36153],{"__ignoreMap":556},[617,35892,35893,35895,35897,35899,35901,35903,35905,35907,35909],{"class":619,"line":557},[617,35894,623],{"class":622},[617,35896,627],{"class":626},[617,35898,631],{"class":630},[617,35900,634],{"class":630},[617,35902,637],{"class":622},[617,35904,640],{"class":622},[617,35906,644],{"class":643},[617,35908,640],{"class":622},[617,35910,649],{"class":622},[617,35912,35914,35916,35918,35921,35923,35925,35927,35929],{"class":35913,"line":558},[619,653],[617,35915,657],{"class":656},[617,35917,660],{"class":622},[617,35919,35920],{"class":663}," AccumulativeShadows",[617,35922,673],{"class":622},[617,35924,676],{"class":656},[617,35926,679],{"class":622},[617,35928,682],{"class":643},[617,35930,685],{"class":622},[617,35932,35933,35935,35937,35939,35941,35943,35945,35947],{"class":619,"line":688},[617,35934,657],{"class":656},[617,35936,660],{"class":622},[617,35938,695],{"class":663},[617,35940,673],{"class":622},[617,35942,676],{"class":656},[617,35944,679],{"class":622},[617,35946,704],{"class":643},[617,35948,685],{"class":622},[617,35950,35951,35953,35955],{"class":619,"line":709},[617,35952,712],{"class":622},[617,35954,627],{"class":626},[617,35956,649],{"class":622},[617,35958,35959],{"class":619,"line":719},[617,35960,722],{"emptyLinePlaceholder":574},[617,35962,35963,35965,35967],{"class":619,"line":725},[617,35964,623],{"class":622},[617,35966,730],{"class":626},[617,35968,649],{"class":622},[617,35970,35971,35973,35975,35977,35979,35981,35983,35985,35988,35990,35992,35994,35996],{"class":619,"line":735},[617,35972,738],{"class":622},[617,35974,741],{"class":626},[617,35976,744],{"class":630},[617,35978,637],{"class":622},[617,35980,640],{"class":622},[617,35982,8908],{"class":643},[617,35984,640],{"class":622},[617,35986,35987],{"class":630}," :shadows",[617,35989,637],{"class":622},[617,35991,640],{"class":622},[617,35993,941],{"class":643},[617,35995,640],{"class":622},[617,35997,649],{"class":622},[617,35999,36000,36002],{"class":619,"line":758},[617,36001,833],{"class":622},[617,36003,23146],{"class":626},[617,36005,36006,36008,36010,36012,36014],{"class":619,"line":770},[617,36007,23164],{"class":630},[617,36009,637],{"class":622},[617,36011,640],{"class":622},[617,36013,8378],{"class":643},[617,36015,3111],{"class":622},[617,36017,36018],{"class":619,"line":780},[617,36019,15248],{"class":622},[617,36021,36022,36024,36026,36028,36030,36032,36035,36037,36039,36041,36043,36046,36048,36051,36053,36055,36057,36059],{"class":619,"line":785},[617,36023,761],{"class":622},[617,36025,836],{"class":626},[617,36027,1919],{"class":630},[617,36029,637],{"class":622},[617,36031,640],{"class":622},[617,36033,36034],{"class":643},"0.3",[617,36036,640],{"class":622},[617,36038,793],{"class":630},[617,36040,637],{"class":622},[617,36042,640],{"class":622},[617,36044,36045],{"class":643},"0.4",[617,36047,640],{"class":622},[617,36049,36050],{"class":630}," :cast-shadow",[617,36052,637],{"class":622},[617,36054,640],{"class":622},[617,36056,941],{"class":643},[617,36058,640],{"class":622},[617,36060,649],{"class":622},[617,36062,36063,36065,36067],{"class":619,"line":807},[617,36064,833],{"class":622},[617,36066,26119],{"class":626},[617,36068,767],{"class":622},[617,36070,36071,36073,36075],{"class":619,"line":611},[617,36072,833],{"class":622},[617,36074,857],{"class":626},[617,36076,767],{"class":622},[617,36078,36079,36081,36083],{"class":619,"line":830},[617,36080,875],{"class":622},[617,36082,836],{"class":626},[617,36084,649],{"class":622},[617,36086,36088,36090],{"class":36087,"line":841},[619,653],[617,36089,761],{"class":622},[617,36091,36092],{"class":626},"AccumulativeShadows\n",[617,36094,36096,36099,36101,36103,36105],{"class":36095,"line":852},[619,653],[617,36097,36098],{"class":630}," :blend",[617,36100,637],{"class":622},[617,36102,640],{"class":622},[617,36104,29633],{"class":643},[617,36106,3111],{"class":622},[617,36108,36110,36112,36114,36116,36118],{"class":36109,"line":862},[619,653],[617,36111,27709],{"class":630},[617,36113,637],{"class":622},[617,36115,640],{"class":622},[617,36117,8908],{"class":643},[617,36119,3111],{"class":622},[617,36121,36123],{"class":36122,"line":612},[619,653],[617,36124,36125],{"class":630}," once\n",[617,36127,36129,36132,36134,36136,36139],{"class":36128,"line":882},[619,653],[617,36130,36131],{"class":630}," :position-y",[617,36133,637],{"class":622},[617,36135,640],{"class":622},[617,36137,36138],{"class":643},"-0.4",[617,36140,3111],{"class":622},[617,36142,36143],{"class":619,"line":892},[617,36144,15248],{"class":622},[617,36146,36147,36149,36151],{"class":619,"line":2605},[617,36148,885],{"class":622},[617,36150,741],{"class":626},[617,36152,649],{"class":622},[617,36154,36155,36157,36159],{"class":619,"line":2614},[617,36156,712],{"class":622},[617,36158,730],{"class":626},[617,36160,649],{"class":622},[484,36162,902],{"id":901},[907,36164,36165,36175],{},[910,36166,36167],{},[913,36168,36169,36171,36173],{},[916,36170,918],{},[916,36172,921],{},[916,36174,924],{},[926,36176,36177,36190,36204,36228,36244,36261,36274,36287,36301,36314,36329,36343],{},[913,36178,36179,36183,36186],{},[931,36180,36181],{},[598,36182,3188],{},[931,36184,36185],{},"Whether shadow creation only happens once (resets after props change)",[931,36187,36188],{},[598,36189,951],{},[913,36191,36192,36197,36200],{},[931,36193,36194],{},[598,36195,36196],{},"accumulate",[931,36198,36199],{},"Whether shadows accumulate progressively over several frames",[931,36201,36202],{},[598,36203,941],{},[913,36205,36206,36211,36224],{},[931,36207,36208],{},[598,36209,36210],{},"frames",[931,36212,36213,36214,36217,36218,36220,36221,36223],{},"Number of frames to render. More yields cleaner results but takes more time. If ",[598,36215,36216],{},"accumulate && once",", 1 frame will be consumed every update for ",[598,36219,36210],{}," updates. Otherwise, ",[598,36222,36210],{}," frames are consumed for every update.",[931,36225,36226],{},[598,36227,35274],{},[913,36229,36230,36235,36240],{},[931,36231,36232],{},[598,36233,36234],{},"blend",[931,36236,938,36237,36239],{},[598,36238,36196],{},", controls the refresh ratio",[931,36241,36242],{},[598,36243,29633],{},[913,36245,36246,36251,36257],{},[931,36247,36248],{},[598,36249,36250],{},"limit",[931,36252,36253,36254,36256],{},"If less than ",[598,36255,11564],{},", limits the amount of frames rendered. Use this to increase performance once a movable scene has settled",[931,36258,36259],{},[598,36260,11564],{},[913,36262,36263,36267,36270],{},[931,36264,36265],{},[598,36266,5610],{},[931,36268,36269],{},"Scale of the plane",[931,36271,36272],{},[598,36273,34359],{},[913,36275,36276,36280,36283],{},[931,36277,36278],{},[598,36279,9660],{},[931,36281,36282],{},"Opacity of the plane",[931,36284,36285],{},[598,36286,1854],{},[913,36288,36289,36294,36297],{},[931,36290,36291],{},[598,36292,36293],{},"alphaTest",[931,36295,36296],{},"Discards alpha pixels",[931,36298,36299],{},[598,36300,2086],{},[913,36302,36303,36307,36310],{},[931,36304,36305],{},[598,36306,7527],{},[931,36308,36309],{},"Shadow color",[931,36311,36312],{},[598,36313,9643],{},[913,36315,36316,36321,36325],{},[931,36317,36318],{},[598,36319,36320],{},"colorBlend",[931,36322,36253,36323,36256],{},[598,36324,11564],{},[931,36326,36327],{},[598,36328,11564],{},[913,36330,36331,36335,36338],{},[931,36332,36333],{},[598,36334,25650],{},[931,36336,36337],{},"Buffer resolution",[931,36339,36340],{},[598,36341,36342],{},"1024",[913,36344,36345,36350,36353],{},[931,36346,36347],{},[598,36348,36349],{},"toneMapped",[931,36351,36352],{},"Texture tonemapping",[931,36354,36355],{},[598,36356,941],{},[484,36358,32251],{"id":32250},[594,36360,36361,36362,36365,36366,1126],{},"You can bring your own lights to ",[598,36363,36364],{},"\u003CAccumulatedShadows />",", but it's designed to be used with ",[598,36367,36368],{},"\u003CRandomizedLights />",[594,36370,36371,36372,36376,36377,36379,36380,36383,36384,36388],{},"By default, there's a ",[1120,36373,36374],{"href":342},[598,36375,36368],{}," instance provided in ",[598,36378,36364],{},"'s ",[598,36381,36382],{},"\u003Cslot />",". You can replace it with your own ",[1120,36385,36386],{"href":342},[598,36387,36368],{}," or an alternative by passing it as a child component.",[1307,36390,1624],{},{"title":556,"searchDepth":557,"depth":558,"links":36392},[36393,36394,36395],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},{"id":32250,"depth":558,"text":32251},"DirectionalLight-based shadow component with progressive accumulation.",{},{"title":321,"description":36396},"52wZKp-YdSVGNT5yYFR1FOUZnGMwxDTUxyUOljm6OBA",{"id":36401,"title":325,"body":36402,"description":36942,"extension":571,"links":572,"meta":36943,"navigation":574,"path":326,"seo":36944,"stem":327,"__hash__":36945},"docs/2.api/7.light-shadow/bake-shadows.md",{"type":481,"value":36403,"toc":36939},[36404,36409,36420,36422,36427,36936],[2275,36405,36406],{},[36407,36408],"light-shadow-bake-shadows",{},[594,36410,36411,33958,36413,36416,36417,36419],{},[1649,36412,33957],{},[598,36414,36415],{},"BakeShadows",". Basically this component set the renderer.shadowMap.autoUpdate to ",[598,36418,951],{},", 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.",[484,36421,33965],{"id":33964},[3179,36423,36424],{},[594,36425,36426],{},"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.",[606,36428,36431],{"className":608,"code":36429,"highlights":36430,"language":613,"meta":556,"style":556},"\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",[558,2661],[598,36432,36433,36453,36473,36491,36509,36513,36526,36530,36560,36577,36605,36629,36633,36637,36645,36649,36657,36664,36677,36682,36696,36700,36706,36718,36730,36734,36743,36749,36761,36766,36770,36778,36796,36804,36810,36815,36828,36842,36846,36865,36885,36893,36899,36903,36916,36920,36928],{"__ignoreMap":556},[617,36434,36435,36437,36439,36441,36443,36445,36447,36449,36451],{"class":619,"line":557},[617,36436,623],{"class":622},[617,36438,627],{"class":626},[617,36440,631],{"class":630},[617,36442,634],{"class":630},[617,36444,637],{"class":622},[617,36446,640],{"class":622},[617,36448,644],{"class":643},[617,36450,640],{"class":622},[617,36452,649],{"class":622},[617,36454,36456,36458,36460,36463,36465,36467,36469,36471],{"class":36455,"line":558},[619,653],[617,36457,657],{"class":656},[617,36459,660],{"class":622},[617,36461,36462],{"class":663}," BakeShadows",[617,36464,673],{"class":622},[617,36466,676],{"class":656},[617,36468,679],{"class":622},[617,36470,682],{"class":643},[617,36472,685],{"class":622},[617,36474,36475,36477,36479,36481,36483,36485,36487,36489],{"class":619,"line":688},[617,36476,657],{"class":656},[617,36478,660],{"class":622},[617,36480,695],{"class":663},[617,36482,673],{"class":622},[617,36484,676],{"class":656},[617,36486,679],{"class":622},[617,36488,704],{"class":643},[617,36490,685],{"class":622},[617,36492,36493,36495,36497,36499,36501,36503,36505,36507],{"class":619,"line":709},[617,36494,657],{"class":656},[617,36496,660],{"class":622},[617,36498,3478],{"class":663},[617,36500,673],{"class":622},[617,36502,676],{"class":656},[617,36504,679],{"class":622},[617,36506,613],{"class":643},[617,36508,685],{"class":622},[617,36510,36511],{"class":619,"line":719},[617,36512,722],{"emptyLinePlaceholder":574},[617,36514,36515,36517,36520,36522,36524],{"class":619,"line":725},[617,36516,2395],{"class":630},[617,36518,36519],{"class":663}," cubeRef ",[617,36521,637],{"class":622},[617,36523,3478],{"class":2414},[617,36525,6515],{"class":663},[617,36527,36528],{"class":619,"line":735},[617,36529,722],{"emptyLinePlaceholder":574},[617,36531,36532,36535,36538,36541,36544,36547,36549,36551,36553,36555,36558],{"class":619,"line":758},[617,36533,36534],{"class":630},"function",[617,36536,36537],{"class":2414}," onLoop",[617,36539,36540],{"class":622},"({",[617,36542,36543],{"class":6818}," elapsed",[617,36545,36546],{"class":622}," }:",[617,36548,660],{"class":622},[617,36550,36543],{"class":626},[617,36552,1198],{"class":622},[617,36554,5337],{"class":1180},[617,36556,36557],{"class":622}," })",[617,36559,1184],{"class":622},[617,36561,36562,36564,36566,36569,36571,36573,36575],{"class":619,"line":770},[617,36563,18865],{"class":656},[617,36565,3054],{"class":626},[617,36567,36568],{"class":663},"cubeRef",[617,36570,1126],{"class":622},[617,36572,3665],{"class":663},[617,36574,4714],{"class":626},[617,36576,3240],{"class":622},[617,36578,36579,36582,36584,36586,36588,36590,36592,36595,36597,36599,36602],{"class":619,"line":780},[617,36580,36581],{"class":663}," cubeRef",[617,36583,1126],{"class":622},[617,36585,3665],{"class":663},[617,36587,1126],{"class":622},[617,36589,5607],{"class":663},[617,36591,1126],{"class":622},[617,36593,36594],{"class":663},"y",[617,36596,2411],{"class":622},[617,36598,36543],{"class":663},[617,36600,36601],{"class":622}," *",[617,36603,36604],{"class":2481}," 0.5\n",[617,36606,36607,36609,36611,36613,36615,36617,36619,36621,36623,36625,36627],{"class":619,"line":785},[617,36608,36581],{"class":663},[617,36610,1126],{"class":622},[617,36612,3665],{"class":663},[617,36614,1126],{"class":622},[617,36616,5607],{"class":663},[617,36618,1126],{"class":622},[617,36620,7820],{"class":663},[617,36622,2411],{"class":622},[617,36624,36543],{"class":663},[617,36626,36601],{"class":622},[617,36628,36604],{"class":2481},[617,36630,36631],{"class":619,"line":807},[617,36632,7837],{"class":622},[617,36634,36635],{"class":619,"line":611},[617,36636,1305],{"class":622},[617,36638,36639,36641,36643],{"class":619,"line":830},[617,36640,712],{"class":622},[617,36642,627],{"class":626},[617,36644,649],{"class":622},[617,36646,36647],{"class":619,"line":841},[617,36648,722],{"emptyLinePlaceholder":574},[617,36650,36651,36653,36655],{"class":619,"line":852},[617,36652,623],{"class":622},[617,36654,730],{"class":626},[617,36656,649],{"class":622},[617,36658,36659,36661],{"class":619,"line":862},[617,36660,738],{"class":622},[617,36662,36663],{"class":626},"TresCanvas\n",[617,36665,36666,36669,36671,36673,36675],{"class":619,"line":612},[617,36667,36668],{"class":630}," clear-color",[617,36670,637],{"class":622},[617,36672,640],{"class":622},[617,36674,9840],{"class":643},[617,36676,3111],{"class":622},[617,36678,36679],{"class":619,"line":882},[617,36680,36681],{"class":630}," shadows\n",[617,36683,36684,36687,36689,36691,36694],{"class":619,"line":892},[617,36685,36686],{"class":630}," @loop",[617,36688,637],{"class":622},[617,36690,640],{"class":622},[617,36692,36693],{"class":643},"onLoop",[617,36695,3111],{"class":622},[617,36697,36698],{"class":619,"line":2605},[617,36699,5153],{"class":622},[617,36701,36702,36704],{"class":619,"line":2614},[617,36703,761],{"class":622},[617,36705,23146],{"class":626},[617,36707,36708,36710,36712,36714,36716],{"class":619,"line":2634},[617,36709,15235],{"class":630},[617,36711,637],{"class":622},[617,36713,640],{"class":622},[617,36715,7425],{"class":643},[617,36717,3111],{"class":622},[617,36719,36720,36722,36724,36726,36728],{"class":619,"line":2643},[617,36721,23164],{"class":630},[617,36723,637],{"class":622},[617,36725,640],{"class":622},[617,36727,8378],{"class":643},[617,36729,3111],{"class":622},[617,36731,36732],{"class":619,"line":2652},[617,36733,15248],{"class":622},[617,36735,36737,36739,36741],{"class":36736,"line":2661},[619,653],[617,36738,761],{"class":622},[617,36740,36415],{"class":626},[617,36742,767],{"class":622},[617,36744,36745,36747],{"class":619,"line":2683},[617,36746,761],{"class":622},[617,36748,5106],{"class":626},[617,36750,36751,36753,36755,36757,36759],{"class":619,"line":2727},[617,36752,10413],{"class":630},[617,36754,637],{"class":622},[617,36756,640],{"class":622},[617,36758,36568],{"class":643},[617,36760,3111],{"class":622},[617,36762,36763],{"class":619,"line":2736},[617,36764,36765],{"class":630}," cast-shadow\n",[617,36767,36768],{"class":619,"line":2745},[617,36769,10441],{"class":622},[617,36771,36772,36774,36776],{"class":619,"line":3902},[617,36773,833],{"class":622},[617,36775,847],{"class":626},[617,36777,767],{"class":622},[617,36779,36780,36782,36784,36786,36788,36790,36792,36794],{"class":619,"line":3933},[617,36781,833],{"class":622},[617,36783,2666],{"class":626},[617,36785,2669],{"class":630},[617,36787,637],{"class":622},[617,36789,640],{"class":622},[617,36791,11377],{"class":643},[617,36793,640],{"class":622},[617,36795,767],{"class":622},[617,36797,36798,36800,36802],{"class":619,"line":3954},[617,36799,875],{"class":622},[617,36801,836],{"class":626},[617,36803,649],{"class":622},[617,36805,36806,36808],{"class":619,"line":3973},[617,36807,761],{"class":622},[617,36809,5106],{"class":626},[617,36811,36812],{"class":619,"line":4005},[617,36813,36814],{"class":630}," receive-shadow\n",[617,36816,36817,36819,36821,36823,36826],{"class":619,"line":4014},[617,36818,15235],{"class":630},[617,36820,637],{"class":622},[617,36822,640],{"class":622},[617,36824,36825],{"class":643},"[0, -2, 0]",[617,36827,3111],{"class":622},[617,36829,36830,36833,36835,36837,36840],{"class":619,"line":4023},[617,36831,36832],{"class":630}," :rotation-x",[617,36834,637],{"class":622},[617,36836,640],{"class":622},[617,36838,36839],{"class":643},"-Math.PI / 2",[617,36841,3111],{"class":622},[617,36843,36844],{"class":619,"line":19053},[617,36845,10441],{"class":622},[617,36847,36848,36850,36852,36854,36856,36858,36861,36863],{"class":619,"line":19068},[617,36849,833],{"class":622},[617,36851,25390],{"class":626},[617,36853,1939],{"class":630},[617,36855,637],{"class":622},[617,36857,640],{"class":622},[617,36859,36860],{"class":643},"[5, 5]",[617,36862,640],{"class":622},[617,36864,767],{"class":622},[617,36866,36867,36869,36871,36874,36876,36878,36881,36883],{"class":619,"line":19083},[617,36868,833],{"class":622},[617,36870,2666],{"class":626},[617,36872,36873],{"class":630}," :color",[617,36875,637],{"class":622},[617,36877,640],{"class":622},[617,36879,36880],{"class":643},"0xF7F7F7",[617,36882,640],{"class":622},[617,36884,767],{"class":622},[617,36886,36887,36889,36891],{"class":619,"line":19088},[617,36888,875],{"class":622},[617,36890,836],{"class":626},[617,36892,649],{"class":622},[617,36894,36895,36897],{"class":619,"line":19095},[617,36896,761],{"class":622},[617,36898,15217],{"class":626},[617,36900,36901],{"class":619,"line":19100},[617,36902,36765],{"class":630},[617,36904,36905,36907,36909,36911,36914],{"class":619,"line":19106},[617,36906,15235],{"class":630},[617,36908,637],{"class":622},[617,36910,640],{"class":622},[617,36912,36913],{"class":643},"[0, 10, 0]",[617,36915,3111],{"class":622},[617,36917,36918],{"class":619,"line":19127},[617,36919,15248],{"class":622},[617,36921,36922,36924,36926],{"class":619,"line":19133},[617,36923,885],{"class":622},[617,36925,741],{"class":626},[617,36927,649],{"class":622},[617,36929,36930,36932,36934],{"class":619,"line":19140},[617,36931,712],{"class":622},[617,36933,730],{"class":626},[617,36935,649],{"class":622},[1307,36937,36938],{},"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":556,"searchDepth":557,"depth":558,"links":36940},[36941],{"id":33964,"depth":558,"text":33965},"Bakes shadows in the first frame for performance optimization.",{},{"title":325,"description":36942},"hU2MwhHPZEp5uQ1ZY4cZSmx8JjSu1SZkY7M14ckgtTM",{"id":36947,"title":329,"body":36948,"description":37333,"extension":571,"links":572,"meta":37334,"navigation":574,"path":330,"seo":37335,"stem":331,"__hash__":37336},"docs/2.api/7.light-shadow/circle-shadow.md",{"type":481,"value":36949,"toc":37329},[36950,36955,36964,36966,37233,37235,37237,37327],[588,36951,36952],{},[36953,36954],"light-shadow-circle-shadow",{},[594,36956,36957,36960,36961,1126],{},[598,36958,36959],{},"\u003CCircleShadow />"," is a cheap, texture-based radial gradient on a ",[598,36962,36963],{},"THREE.PlaneGeometry",[484,36965,15],{"id":604},[606,36967,36970],{"className":608,"code":36968,"highlights":36969,"language":613,"meta":556,"style":556},"\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",[558,841],[598,36971,36972,36992,37018,37038,37046,37050,37058,37076,37084,37092,37111,37129,37137,37155,37163,37183,37191,37199,37217,37225],{"__ignoreMap":556},[617,36973,36974,36976,36978,36980,36982,36984,36986,36988,36990],{"class":619,"line":557},[617,36975,623],{"class":622},[617,36977,627],{"class":626},[617,36979,631],{"class":630},[617,36981,634],{"class":630},[617,36983,637],{"class":622},[617,36985,640],{"class":622},[617,36987,644],{"class":643},[617,36989,640],{"class":622},[617,36991,649],{"class":622},[617,36993,36995,36997,36999,37002,37004,37006,37008,37010,37012,37014,37016],{"class":36994,"line":558},[619,653],[617,36996,657],{"class":656},[617,36998,660],{"class":622},[617,37000,37001],{"class":663}," CircleShadow",[617,37003,667],{"class":622},[617,37005,670],{"class":663},[617,37007,673],{"class":622},[617,37009,676],{"class":656},[617,37011,8270],{"class":622},[617,37013,682],{"class":643},[617,37015,640],{"class":622},[617,37017,8277],{"class":622},[617,37019,37020,37022,37024,37026,37028,37030,37032,37034,37036],{"class":619,"line":688},[617,37021,657],{"class":656},[617,37023,660],{"class":622},[617,37025,695],{"class":663},[617,37027,673],{"class":622},[617,37029,676],{"class":656},[617,37031,8270],{"class":622},[617,37033,704],{"class":643},[617,37035,640],{"class":622},[617,37037,8277],{"class":622},[617,37039,37040,37042,37044],{"class":619,"line":709},[617,37041,712],{"class":622},[617,37043,627],{"class":626},[617,37045,649],{"class":622},[617,37047,37048],{"class":619,"line":719},[617,37049,722],{"emptyLinePlaceholder":574},[617,37051,37052,37054,37056],{"class":619,"line":725},[617,37053,623],{"class":622},[617,37055,730],{"class":626},[617,37057,649],{"class":622},[617,37059,37060,37062,37064,37066,37068,37070,37072,37074],{"class":619,"line":735},[617,37061,738],{"class":622},[617,37063,741],{"class":626},[617,37065,744],{"class":630},[617,37067,637],{"class":622},[617,37069,640],{"class":622},[617,37071,9840],{"class":643},[617,37073,640],{"class":622},[617,37075,649],{"class":622},[617,37077,37078,37080,37082],{"class":619,"line":758},[617,37079,761],{"class":622},[617,37081,764],{"class":626},[617,37083,767],{"class":622},[617,37085,37086,37088,37090],{"class":619,"line":770},[617,37087,761],{"class":622},[617,37089,775],{"class":626},[617,37091,767],{"class":622},[617,37093,37094,37096,37098,37100,37102,37104,37107,37109],{"class":619,"line":780},[617,37095,761],{"class":622},[617,37097,8796],{"class":626},[617,37099,1919],{"class":630},[617,37101,637],{"class":622},[617,37103,640],{"class":622},[617,37105,37106],{"class":643},"-0.5",[617,37108,640],{"class":622},[617,37110,649],{"class":622},[617,37112,37113,37115,37117,37119,37121,37123,37125,37127],{"class":619,"line":785},[617,37114,833],{"class":622},[617,37116,836],{"class":626},[617,37118,1919],{"class":630},[617,37120,637],{"class":622},[617,37122,640],{"class":622},[617,37124,1854],{"class":643},[617,37126,640],{"class":622},[617,37128,649],{"class":622},[617,37130,37131,37133,37135],{"class":619,"line":807},[617,37132,844],{"class":622},[617,37134,847],{"class":626},[617,37136,767],{"class":622},[617,37138,37139,37141,37143,37145,37147,37149,37151,37153],{"class":619,"line":611},[617,37140,844],{"class":622},[617,37142,11368],{"class":626},[617,37144,2669],{"class":630},[617,37146,637],{"class":622},[617,37148,640],{"class":622},[617,37150,11377],{"class":643},[617,37152,640],{"class":622},[617,37154,767],{"class":622},[617,37156,37157,37159,37161],{"class":619,"line":830},[617,37158,865],{"class":622},[617,37160,836],{"class":626},[617,37162,649],{"class":622},[617,37164,37166,37168,37171,37173,37175,37177,37179,37181],{"class":37165,"line":841},[619,653],[617,37167,833],{"class":622},[617,37169,37170],{"class":626},"CircleShadow",[617,37172,793],{"class":630},[617,37174,637],{"class":622},[617,37176,640],{"class":622},[617,37178,26409],{"class":643},[617,37180,640],{"class":622},[617,37182,767],{"class":622},[617,37184,37185,37187,37189],{"class":619,"line":852},[617,37186,875],{"class":622},[617,37188,8796],{"class":626},[617,37190,649],{"class":622},[617,37192,37193,37195,37197],{"class":619,"line":862},[617,37194,761],{"class":622},[617,37196,8436],{"class":626},[617,37198,767],{"class":622},[617,37200,37201,37203,37205,37207,37209,37211,37213,37215],{"class":619,"line":612},[617,37202,761],{"class":622},[617,37204,8455],{"class":626},[617,37206,1465],{"class":630},[617,37208,637],{"class":622},[617,37210,640],{"class":622},[617,37212,11412],{"class":643},[617,37214,640],{"class":622},[617,37216,767],{"class":622},[617,37218,37219,37221,37223],{"class":619,"line":882},[617,37220,885],{"class":622},[617,37222,741],{"class":626},[617,37224,649],{"class":622},[617,37226,37227,37229,37231],{"class":619,"line":892},[617,37228,712],{"class":622},[617,37230,730],{"class":626},[617,37232,649],{"class":622},[484,37234,902],{"id":901},[594,37236,905],{},[907,37238,37239,37249],{},[910,37240,37241],{},[913,37242,37243,37245,37247],{},[916,37244,8069],{"align":977},[916,37246,921],{"align":977},[916,37248,924],{},[926,37250,37251,37267,37280,37300,37314],{},[913,37252,37253,37257,37263],{},[931,37254,37255],{"align":977},[598,37256,7527],{},[931,37258,37259,37260],{"align":977},"Color of the shadow as a ",[598,37261,37262],{},"Color | number | string",[931,37264,37265],{},[598,37266,9643],{},[913,37268,37269,37273,37276],{},[931,37270,37271],{"align":977},[598,37272,9660],{},[931,37274,37275],{"align":977},"Opacity of the shadow",[931,37277,37278],{},[598,37279,1926],{},[913,37281,37282,37287,37296],{},[931,37283,37284],{"align":977},[598,37285,37286],{},"offset",[931,37288,37289,37290,37292,37293,37295],{"align":977},"Placement of the first radial gradient color stop. ",[598,37291,11833],{}," is the center of the circle. ",[598,37294,11711],{}," is edge.",[931,37297,37298],{},[598,37299,945],{},[913,37301,37302,37307,37310],{},[931,37303,37304],{"align":977},[598,37305,37306],{},"fog",[931,37308,37309],{"align":977},"Whether the material is affected by fog",[931,37311,37312],{},[598,37313,951],{},[913,37315,37316,37320,37323],{},[931,37317,37318],{"align":977},[598,37319,9167],{},[931,37321,37322],{"align":977},"Whether rendering the material has any effect on the depth buffer",[931,37324,37325],{},[598,37326,951],{},[1307,37328,1624],{},{"title":556,"searchDepth":557,"depth":558,"links":37330},[37331,37332],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},"Cheap, texture-based radial gradient shadow on a plane geometry.",{},{"title":329,"description":37333},"TUy3Uz9v0MKp5WFl-uNVQ_T1BiUHugE-_tL8tI71jFo",{"id":37338,"title":333,"body":37339,"description":37808,"extension":571,"links":572,"meta":37809,"navigation":574,"path":334,"seo":37810,"stem":335,"__hash__":37811},"docs/2.api/7.light-shadow/contact-shadows.md",{"type":481,"value":37340,"toc":37804},[37341,37346,37362,37364,37616,37618,37802],[588,37342,37343],{},[37344,37345],"light-shadow-contact-shadow",{},[594,37347,37348,37351,37352,34468,37357,1126],{},[598,37349,37350],{},"\u003CContactShadows />"," is a \"fake\", non-lighting-based shadow component. It displays shadows on a single plane. The component is based on the ",[1120,37353,37356],{"href":37354,"rel":37355},"https://threejs.org/examples/webgl_shadow_contact.html",[1124],"Three.js contact shadows example",[1120,37358,37361],{"href":37359,"rel":37360},"https://twitter.com/mrdoob",[1124],"@mrdoob",[484,37363,15],{"id":604},[606,37365,37368],{"className":608,"code":37366,"highlights":37367,"language":613,"meta":556,"style":556},"\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",[558,611],[598,37369,37370,37390,37419,37437,37445,37449,37457,37475,37517,37535,37543,37551,37559,37600,37608],{"__ignoreMap":556},[617,37371,37372,37374,37376,37378,37380,37382,37384,37386,37388],{"class":619,"line":557},[617,37373,623],{"class":622},[617,37375,627],{"class":626},[617,37377,631],{"class":630},[617,37379,634],{"class":630},[617,37381,637],{"class":622},[617,37383,640],{"class":622},[617,37385,644],{"class":643},[617,37387,640],{"class":622},[617,37389,649],{"class":622},[617,37391,37393,37395,37397,37400,37402,37404,37406,37409,37411,37413,37415,37417],{"class":37392,"line":558},[619,653],[617,37394,657],{"class":656},[617,37396,660],{"class":622},[617,37398,37399],{"class":663}," ContactShadows",[617,37401,667],{"class":622},[617,37403,8287],{"class":663},[617,37405,667],{"class":622},[617,37407,37408],{"class":663}," TorusKnot",[617,37410,673],{"class":622},[617,37412,676],{"class":656},[617,37414,679],{"class":622},[617,37416,682],{"class":643},[617,37418,685],{"class":622},[617,37420,37421,37423,37425,37427,37429,37431,37433,37435],{"class":619,"line":688},[617,37422,657],{"class":656},[617,37424,660],{"class":622},[617,37426,695],{"class":663},[617,37428,673],{"class":622},[617,37430,676],{"class":656},[617,37432,679],{"class":622},[617,37434,704],{"class":643},[617,37436,685],{"class":622},[617,37438,37439,37441,37443],{"class":619,"line":709},[617,37440,712],{"class":622},[617,37442,627],{"class":626},[617,37444,649],{"class":622},[617,37446,37447],{"class":619,"line":719},[617,37448,722],{"emptyLinePlaceholder":574},[617,37450,37451,37453,37455],{"class":619,"line":725},[617,37452,623],{"class":622},[617,37454,730],{"class":626},[617,37456,649],{"class":622},[617,37458,37459,37461,37463,37465,37467,37469,37471,37473],{"class":619,"line":735},[617,37460,738],{"class":622},[617,37462,741],{"class":626},[617,37464,744],{"class":630},[617,37466,637],{"class":622},[617,37468,640],{"class":622},[617,37470,2676],{"class":643},[617,37472,640],{"class":622},[617,37474,649],{"class":622},[617,37476,37477,37479,37481,37483,37485,37487,37489,37491,37494,37496,37498,37501,37503,37506,37508,37510,37513,37515],{"class":619,"line":758},[617,37478,761],{"class":622},[617,37480,8398],{"class":626},[617,37482,8401],{"class":630},[617,37484,637],{"class":622},[617,37486,640],{"class":622},[617,37488,800],{"class":643},[617,37490,640],{"class":622},[617,37492,37493],{"class":630}," :range",[617,37495,637],{"class":622},[617,37497,640],{"class":622},[617,37499,37500],{"class":643},"[0, 0.7]",[617,37502,640],{"class":622},[617,37504,37505],{"class":630}," :rotation-factor",[617,37507,637],{"class":622},[617,37509,640],{"class":622},[617,37511,37512],{"class":643},"9",[617,37514,640],{"class":622},[617,37516,649],{"class":622},[617,37518,37519,37521,37523,37525,37527,37529,37531,37533],{"class":619,"line":770},[617,37520,833],{"class":622},[617,37522,32672],{"class":626},[617,37524,793],{"class":630},[617,37526,637],{"class":622},[617,37528,640],{"class":622},[617,37530,24837],{"class":643},[617,37532,640],{"class":622},[617,37534,649],{"class":622},[617,37536,37537,37539,37541],{"class":619,"line":780},[617,37538,844],{"class":622},[617,37540,857],{"class":626},[617,37542,767],{"class":622},[617,37544,37545,37547,37549],{"class":619,"line":785},[617,37546,865],{"class":622},[617,37548,32672],{"class":626},[617,37550,649],{"class":622},[617,37552,37553,37555,37557],{"class":619,"line":807},[617,37554,875],{"class":622},[617,37556,8398],{"class":626},[617,37558,649],{"class":622},[617,37560,37562,37564,37567,37569,37571,37573,37575,37577,37579,37581,37583,37586,37588,37590,37592,37594,37596,37598],{"class":37561,"line":611},[619,653],[617,37563,761],{"class":622},[617,37565,37566],{"class":626},"ContactShadows",[617,37568,1919],{"class":630},[617,37570,637],{"class":622},[617,37572,640],{"class":622},[617,37574,8949],{"class":643},[617,37576,640],{"class":622},[617,37578,2669],{"class":630},[617,37580,637],{"class":622},[617,37582,640],{"class":622},[617,37584,37585],{"class":643},"#335",[617,37587,640],{"class":622},[617,37589,793],{"class":630},[617,37591,637],{"class":622},[617,37593,640],{"class":622},[617,37595,27807],{"class":643},[617,37597,640],{"class":622},[617,37599,767],{"class":622},[617,37601,37602,37604,37606],{"class":619,"line":830},[617,37603,885],{"class":622},[617,37605,741],{"class":626},[617,37607,649],{"class":622},[617,37609,37610,37612,37614],{"class":619,"line":841},[617,37611,712],{"class":622},[617,37613,730],{"class":626},[617,37615,649],{"class":622},[484,37617,902],{"id":901},[907,37619,37620,37630],{},[910,37621,37622],{},[913,37623,37624,37626,37628],{},[916,37625,918],{},[916,37627,921],{},[916,37629,924],{},[926,37631,37632,37645,37659,37673,37689,37703,37717,37731,37745,37759,37772,37789],{},[913,37633,37634,37638,37641],{},[931,37635,37636],{},[598,37637,9660],{},[931,37639,37640],{},"The opacity of the shadows.",[931,37642,37643],{},[598,37644,1854],{},[913,37646,37647,37652,37655],{},[931,37648,37649],{},[598,37650,37651],{},"blur",[931,37653,37654],{},"The blur of the shadows.",[931,37656,37657],{},[598,37658,1854],{},[913,37660,37661,37665,37668],{},[931,37662,37663],{},[598,37664,7527],{},[931,37666,37667],{},"The color of the shadows.",[931,37669,37670],{},[598,37671,37672],{},"'#000000'",[913,37674,37675,37680,37685],{},[931,37676,37677],{},[598,37678,37679],{},"tint",[931,37681,37682,37683,1126],{},"If provided, the color of the \"core\" of the shadows. \"Added\" to ",[598,37684,7527],{},[931,37686,37687],{},[598,37688,1159],{},[913,37690,37691,37695,37701],{},[931,37692,37693],{},[598,37694,5610],{},[931,37696,37697,37698,1126],{},"The scale of the shadows/shadow plane. Can be a number or an array of two numbers ",[598,37699,37700],{},"[x, y]",[931,37702,34359],{},[913,37704,37705,37710,37713],{},[931,37706,37707],{},[598,37708,37709],{},"width",[931,37711,37712],{},"The width of the shadow plane.",[931,37714,37715],{},[598,37716,1854],{},[913,37718,37719,37724,37727],{},[931,37720,37721],{},[598,37722,37723],{},"height",[931,37725,37726],{},"The height of the shadow plane.",[931,37728,37729],{},[598,37730,1854],{},[913,37732,37733,37738,37741],{},[931,37734,37735],{},[598,37736,37737],{},"far",[931,37739,37740],{},"The distance of the orthographic shadow camera extends above the shadow plane.",[931,37742,37743],{},[598,37744,34359],{},[913,37746,37747,37752,37755],{},[931,37748,37749],{},[598,37750,37751],{},"smooth",[931,37753,37754],{},"Whether the shadows should be smoothed to reduce artifacts.",[931,37756,37757],{},[598,37758,941],{},[913,37760,37761,37765,37768],{},[931,37762,37763],{},[598,37764,25650],{},[931,37766,37767],{},"The resolution of the shadow textures.",[931,37769,37770],{},[598,37771,26196],{},[913,37773,37774,37778,37784],{},[931,37775,37776],{},[598,37777,36210],{},[931,37779,37780,37781,37783],{},"For performance, optionally stop updating shadows after ",[598,37782,36210],{}," frames.",[931,37785,37786],{},[598,37787,37788],{},"Math.POSITIVE_INFINITY",[913,37790,37791,37795,37798],{},[931,37792,37793],{},[598,37794,9167],{},[931,37796,37797],{},"Whether the shadows should write to the depth buffer or not.",[931,37799,37800],{},[598,37801,951],{},[1307,37803,1624],{},{"title":556,"searchDepth":557,"depth":558,"links":37805},[37806,37807],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},"Fake, non-lighting-based shadow component for single plane shadows.",{},{"title":333,"description":37808},"o8ix90CI6-yelSPJOMj3eTHEv1PqdpDiKiRrYUJfBHQ",{"id":37813,"title":337,"body":37814,"description":39324,"extension":571,"links":572,"meta":39325,"navigation":574,"path":338,"seo":39326,"stem":339,"__hash__":39327},"docs/2.api/7.light-shadow/lensflare.md",{"type":481,"value":37815,"toc":39308},[37816,37821,37832,37834,37967,37969,38094,38098,38104,38112,38118,38175,38179,38185,38199,38206,38210,38236,38253,38259,38264,38269,38276,38282,38374,38379,38383,38388,38401,38405,38413,38470,38480,38483,38502,38511,38518,38522,38525,38533,38545,38553,38579,38586,38619,38623,38626,38670,38684,38689,38692,38695,38718,38737,38742,38746,38749,38879,38884,38889,39077,39083,39089,39092,39095,39305],[588,37817,37818],{},[37819,37820],"light-shadow-lensflare",{},[594,37822,37823,37826,37827,1126],{},[598,37824,37825],{},"\u003CLensflare />"," wraps the ",[1120,37828,37831],{"href":37829,"rel":37830},"https://threejs.org/docs/#examples/en/objects/Lensflare",[1124],"Three.js Lensflare",[484,37833,15],{"id":604},[606,37835,37838],{"className":608,"code":37836,"highlights":37837,"language":613,"meta":556,"style":556},"\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",[688,770],[598,37839,37840,37860,37878,37898,37906,37910,37918,37926,37934,37943,37951,37959],{"__ignoreMap":556},[617,37841,37842,37844,37846,37848,37850,37852,37854,37856,37858],{"class":619,"line":557},[617,37843,623],{"class":622},[617,37845,627],{"class":626},[617,37847,631],{"class":630},[617,37849,634],{"class":630},[617,37851,637],{"class":622},[617,37853,640],{"class":622},[617,37855,644],{"class":643},[617,37857,640],{"class":622},[617,37859,649],{"class":622},[617,37861,37862,37864,37866,37868,37870,37872,37874,37876],{"class":619,"line":558},[617,37863,657],{"class":656},[617,37865,660],{"class":622},[617,37867,695],{"class":663},[617,37869,673],{"class":622},[617,37871,676],{"class":656},[617,37873,679],{"class":622},[617,37875,704],{"class":643},[617,37877,685],{"class":622},[617,37879,37881,37883,37885,37888,37890,37892,37894,37896],{"class":37880,"line":688},[619,653],[617,37882,657],{"class":656},[617,37884,660],{"class":622},[617,37886,37887],{"class":663}," Lensflare",[617,37889,673],{"class":622},[617,37891,676],{"class":656},[617,37893,679],{"class":622},[617,37895,682],{"class":643},[617,37897,685],{"class":622},[617,37899,37900,37902,37904],{"class":619,"line":709},[617,37901,712],{"class":622},[617,37903,627],{"class":626},[617,37905,649],{"class":622},[617,37907,37908],{"class":619,"line":719},[617,37909,722],{"emptyLinePlaceholder":574},[617,37911,37912,37914,37916],{"class":619,"line":725},[617,37913,623],{"class":622},[617,37915,730],{"class":626},[617,37917,649],{"class":622},[617,37919,37920,37922,37924],{"class":619,"line":735},[617,37921,738],{"class":622},[617,37923,741],{"class":626},[617,37925,649],{"class":622},[617,37927,37928,37930,37932],{"class":619,"line":758},[617,37929,761],{"class":622},[617,37931,9416],{"class":626},[617,37933,649],{"class":622},[617,37935,37937,37939,37941],{"class":37936,"line":770},[619,653],[617,37938,833],{"class":622},[617,37940,337],{"class":626},[617,37942,767],{"class":622},[617,37944,37945,37947,37949],{"class":619,"line":780},[617,37946,875],{"class":622},[617,37948,9416],{"class":626},[617,37950,649],{"class":622},[617,37952,37953,37955,37957],{"class":619,"line":785},[617,37954,885],{"class":622},[617,37956,741],{"class":626},[617,37958,649],{"class":622},[617,37960,37961,37963,37965],{"class":619,"line":807},[617,37962,712],{"class":622},[617,37964,730],{"class":626},[617,37966,649],{"class":622},[484,37968,902],{"id":901},[907,37970,37971,37981],{},[910,37972,37973],{},[913,37974,37975,37977,37979],{},[916,37976,8069],{"align":977},[916,37978,921],{"align":977},[916,37980,924],{"align":977},[926,37982,37983,37998,38013,38030,38046,38063,38078],{},[913,37984,37985,37989,37994],{},[931,37986,37987],{"align":977},[1649,37988,5610],{},[931,37990,37991,37993],{"align":977},[598,37992,5332],{}," – multiplier for lensflare element sizes",[931,37995,37996],{"align":977},[598,37997,11711],{},[913,37999,38000,38004,38009],{},[931,38001,38002],{"align":977},[1649,38003,11571],{},[931,38005,38006,38008],{"align":977},[598,38007,5332],{}," – multiplier for element distances from flare center",[931,38010,38011],{"align":977},[598,38012,11711],{},[913,38014,38015,38020,38026],{},[931,38016,38017],{"align":977},[1649,38018,38019],{},"elements",[931,38021,38022,38025],{"align":977},[598,38023,38024],{},"Partial<LensflareElementProps>[]"," – array of lensflare element properties",[931,38027,38028],{"align":977},[598,38029,1159],{},[913,38031,38032,38037,38042],{},[931,38033,38034],{"align":977},[1649,38035,38036],{},"seed",[931,38038,38039,38041],{"align":977},[598,38040,5332],{}," – random seed for generating random seeded elements",[931,38043,38044],{"align":977},[598,38045,1159],{},[913,38047,38048,38053,38059],{},[931,38049,38050],{"align":977},[1649,38051,38052],{},"seedProps",[931,38054,38055,38058],{"align":977},[598,38056,38057],{},"SeedProps[]"," – specifications for generating random seeded elements",[931,38060,38061],{"align":977},[598,38062,1159],{},[913,38064,38065,38069,38074],{},[931,38066,38067],{"align":977},[1649,38068,7527],{},[931,38070,38071,38073],{"align":977},[598,38072,7542],{}," – default color of lensflare elements",[931,38075,38076],{"align":977},[598,38077,1159],{},[913,38079,38080,38084,38090],{},[931,38081,38082],{"align":977},[1649,38083,2697],{},[931,38085,38086,38089],{"align":977},[598,38087,38088],{},"Texture | string"," – default texture of lensflare elements",[931,38091,38092],{"align":977},[598,38093,1159],{},[484,38095,38096],{"id":38019},[598,38097,38019],{},[594,38099,38100,38101,38103],{},"You can specify individual lensflare element properties directly using the component's ",[598,38102,38019],{}," prop.",[594,38105,2756,38106,38108,38109,1126],{},[598,38107,38019],{}," prop expects an instance of ",[598,38110,38111],{},"(Partial\u003CLensflareElementProps>)[]",[594,38113,38114,38115,38117],{},"Every object in ",[598,38116,38019],{}," may have any (or none) of the following properties.",[907,38119,38120,38128],{},[910,38121,38122],{},[913,38123,38124,38126],{},[916,38125,8069],{"align":977},[916,38127,921],{"align":977},[926,38129,38130,38142,38153,38164],{},[913,38131,38132,38136],{},[931,38133,38134],{"align":977},[1649,38135,2697],{},[931,38137,38138,38141],{"align":977},[598,38139,38140],{},"string | Texture"," - an image URL or texture to use on the lensflare element",[913,38143,38144,38148],{},[931,38145,38146],{"align":977},[1649,38147,7527],{},[931,38149,38150,38152],{"align":977},[598,38151,7542],{}," - color of the lensflare element",[913,38154,38155,38159],{},[931,38156,38157],{"align":977},[1649,38158,11571],{},[931,38160,38161,38163],{"align":977},[598,38162,5332],{}," - distance of the lensflare element from the lensflare center",[913,38165,38166,38170],{},[931,38167,38168],{"align":977},[1649,38169,14703],{},[931,38171,38172,38174],{"align":977},[598,38173,5332],{}," - size of the lensflare element",[484,38176,38177],{"id":38036},[598,38178,38036],{},[594,38180,38181,38182,38184],{},"Adding a ",[598,38183,38036],{}," prop to a component enables seeded random element generation.",[594,38186,2756,38187,38189,38190,38195,38196,1126],{},[598,38188,38036],{}," prop is used as the \"seed\" in a ",[1120,38191,38194],{"href":38192,"rel":38193},"https://en.wikipedia.org/wiki/Pseudorandom_number_generator",[1124],"pseudorandom number generator (PRNG)",". The PRNG is in turn used to build lensflare elements, by selecting values from an array of ",[598,38197,38198],{},"SeedProps",[1985,38200,38201],{},[594,38202,38203,38204,1126],{},"If you set a seed but not seedProps, the component will fall back to the default, built-in SeedProps",[617,38205],{},[4031,38207,38209],{"id":38208},"example","Example",[606,38211,38213],{"className":608,"code":38212,"language":613,"meta":556,"style":556},"\u003CLensflare :seed=\"seedRef\" />\n",[598,38214,38215],{"__ignoreMap":556},[617,38216,38217,38219,38221,38223,38225,38227,38229,38232,38234],{"class":619,"line":557},[617,38218,623],{"class":622},[617,38220,337],{"class":626},[617,38222,3009],{"class":622},[617,38224,38036],{"class":630},[617,38226,637],{"class":622},[617,38228,640],{"class":622},[617,38230,38231],{"class":663},"seedRef",[617,38233,640],{"class":622},[617,38235,767],{"class":622},[594,38237,38238,38239,2230,38242,1652,38244,1652,38246,1652,38248,1652,38250,38252],{},"Below, the results of setting ",[598,38240,38241],{},"seedRef.value",[598,38243,945],{},[598,38245,1854],{},[598,38247,800],{},[598,38249,19006],{},[598,38251,8408],{},", respectively.",[594,38254,38255],{},[8215,38256],{"alt":38257,"src":38258},"Lensflare seeds 0-4","/cientos/lensflare_seeds.png",[484,38260,38262],{"id":38261},"seedprops",[598,38263,38052],{},[594,38265,38181,38266,38268],{},[598,38267,38052],{}," prop to the component enables seeded random element generation.",[594,38270,2756,38271,38108,38273,38275],{},[598,38272,38052],{},[598,38274,38057],{},". It specifies rules and acceptable values for creating random lensflare elements.",[594,38277,38278,38279,38281],{},"Every element in ",[598,38280,38052],{}," has this shape.",[907,38283,38284,38294],{},[910,38285,38286],{},[913,38287,38288,38290,38292],{},[916,38289,8069],{"align":977},[916,38291,921],{"align":977},[916,38293,31074],{},[926,38295,38296,38309,38322,38335,38348,38361],{},[913,38297,38298,38302,38307],{},[931,38299,38300],{"align":977},[1649,38301,2697],{},[931,38303,38304,38306],{"align":977},[598,38305,19564],{}," - array of 1 or more image URLs; a single texture will be selected per generated element",[931,38308,31093],{},[913,38310,38311,38315,38320],{},[931,38312,38313],{"align":977},[1649,38314,7527],{},[931,38316,38317,38319],{"align":977},[598,38318,27861],{}," - array of 1 or more colors; a single color will be selected per generated element",[931,38321,31093],{},[913,38323,38324,38328,38333],{},[931,38325,38326],{"align":977},[1649,38327,11571],{},[931,38329,38330,38332],{"align":977},[598,38331,25845],{}," - minimum and maximum allowable distance from the flare center",[931,38334,31093],{},[913,38336,38337,38341,38346],{},[931,38338,38339],{"align":977},[1649,38340,14703],{},[931,38342,38343,38345],{"align":977},[598,38344,25845],{}," - minimum and maximum allowable size",[931,38347,31093],{},[913,38349,38350,38354,38359],{},[931,38351,38352],{"align":977},[1649,38353,18883],{},[931,38355,38356,38358],{"align":977},[598,38357,25845],{}," - minimum and maximum allowable number of elements to generate",[931,38360,31093],{},[913,38362,38363,38367,38372],{},[931,38364,38365],{"align":977},[1649,38366,38036],{},[931,38368,38369,38371],{"align":977},[598,38370,5332],{}," - if set, when this entry is processed, the random number generator with a combination of the incoming seed and this seed",[931,38373,31128],{},[1985,38375,38376],{},[594,38377,38378],{},"If you set seedProps but not seed, the component will fall back to a default seed of 0.",[484,38380,38382],{"id":38381},"random-elements-and-non-random-properties","Random elements and non-random properties",[594,38384,38385,38387],{},[598,38386,37825],{}," 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.",[606,38389,38391],{"className":608,"code":38390,"language":613,"meta":556,"style":556},"\u003CLensflare />\n",[598,38392,38393],{"__ignoreMap":556},[617,38394,38395,38397,38399],{"class":619,"line":557},[617,38396,623],{"class":622},[617,38398,337],{"class":626},[617,38400,767],{"class":622},[4031,38402,38404],{"id":38403},"non-random-properties","Non-random properties",[594,38406,38407,38408,38103],{},"You can provide a list of lensflare element properties using the ",[1120,38409,38411],{"href":38410},"#elements",[598,38412,38019],{},[606,38414,38416],{"className":608,"code":38415,"language":613,"meta":556,"style":556},"\u003CLensflare :elements=\"[{ color: 'red' }, { color: 'yellow' }]\" />\n",[598,38417,38418],{"__ignoreMap":556},[617,38419,38420,38422,38424,38426,38428,38430,38432,38434,38437,38439,38441,38443,38445,38447,38450,38452,38454,38456,38458,38460,38462,38464,38466,38468],{"class":619,"line":557},[617,38421,623],{"class":622},[617,38423,337],{"class":626},[617,38425,3009],{"class":622},[617,38427,38019],{"class":630},[617,38429,637],{"class":622},[617,38431,640],{"class":622},[617,38433,18946],{"class":663},[617,38435,38436],{"class":622},"{",[617,38438,2669],{"class":626},[617,38440,1198],{"class":622},[617,38442,679],{"class":622},[617,38444,33693],{"class":643},[617,38446,2420],{"class":622},[617,38448,38449],{"class":622}," },",[617,38451,660],{"class":622},[617,38453,2669],{"class":626},[617,38455,1198],{"class":622},[617,38457,679],{"class":622},[617,38459,33810],{"class":643},[617,38461,2420],{"class":622},[617,38463,673],{"class":622},[617,38465,2494],{"class":663},[617,38467,640],{"class":622},[617,38469,767],{"class":622},[594,38471,38472,38473,1652,38475,1652,38477,38479],{},"This will produce a lensflare with 2 elements. The first element will be red. The second will be yellow. The unspecified properties – ",[598,38474,11571],{},[598,38476,14703],{},[598,38478,2697],{}," – will be filled in by the built-in defaults in this case.",[594,38481,38482],{},"You can also provide default props which will overwrite random generated props.",[606,38484,38486],{"className":608,"code":38485,"language":613,"meta":556,"style":556},"\u003CLensflare color:\"red\" />\n",[598,38487,38488],{"__ignoreMap":556},[617,38489,38490,38492,38494,38497,38500],{"class":619,"line":557},[617,38491,623],{"class":622},[617,38493,337],{"class":626},[617,38495,38496],{"class":630}," color:",[617,38498,38499],{"class":663},"\"red\" ",[617,38501,3147],{"class":622},[594,38503,38504,38505,38507,38508,38510],{},"Since ",[598,38506,38019],{}," is not defined here, the component will generate random lensflare elements. The specified ",[598,38509,7527],{}," prop – \"red\" – will overwrite the color property of the generated lensflare elements.",[594,38512,1118,38513,38517],{},[1120,38514,38516],{"href":38515},"#precedence","precedence"," for details about how properties are filled in.",[4031,38519,38521],{"id":38520},"random-elements","Random elements",[594,38523,38524],{},"You can let the component generate random elements ...",[594,38526,38527,38528],{},"... by not adding an ",[1120,38529,38530,38532],{"href":38410},[598,38531,38019],{}," prop",[606,38534,38535],{"className":608,"code":38390,"language":613,"meta":556,"style":556},[598,38536,38537],{"__ignoreMap":556},[617,38538,38539,38541,38543],{"class":619,"line":557},[617,38540,623],{"class":622},[617,38542,337],{"class":626},[617,38544,767],{"class":622},[594,38546,38547,38548],{},"... by adding a ",[1120,38549,38551,38532],{"href":38550},"#seed",[598,38552,38036],{},[606,38554,38556],{"className":608,"code":38555,"language":613,"meta":556,"style":556},"\u003CLensflare :seed=\"7127\" />\n",[598,38557,38558],{"__ignoreMap":556},[617,38559,38560,38562,38564,38566,38568,38570,38572,38575,38577],{"class":619,"line":557},[617,38561,623],{"class":622},[617,38563,337],{"class":626},[617,38565,3009],{"class":622},[617,38567,38036],{"class":630},[617,38569,637],{"class":622},[617,38571,640],{"class":622},[617,38573,38574],{"class":2481},"7127",[617,38576,640],{"class":622},[617,38578,767],{"class":622},[594,38580,38547,38581],{},[1120,38582,38584,38532],{"href":38583},"#seedprops",[598,38585,38052],{},[606,38587,38589],{"className":608,"code":38588,"language":613,"meta":556,"style":556},"\u003CLensflare :seedProps=\"[{...}, {...}]\" />\n",[598,38590,38591],{"__ignoreMap":556},[617,38592,38593,38595,38597,38599,38601,38603,38605,38607,38610,38613,38615,38617],{"class":619,"line":557},[617,38594,623],{"class":622},[617,38596,337],{"class":626},[617,38598,3009],{"class":622},[617,38600,38052],{"class":630},[617,38602,637],{"class":622},[617,38604,640],{"class":622},[617,38606,18946],{"class":663},[617,38608,38609],{"class":622},"{...},",[617,38611,38612],{"class":622}," {...}",[617,38614,2494],{"class":663},[617,38616,640],{"class":622},[617,38618,767],{"class":622},[4031,38620,38622],{"id":38621},"mixing-random-elements-and-non-random-properties","Mixing random elements and non-random properties",[594,38624,38625],{},"You can mix your own properties and random elements.",[606,38627,38629],{"className":608,"code":38628,"language":613,"meta":556,"style":556},"\u003CLensflare :elements=\"[{...}, {...}]\" :seed=\"8193\" />\n",[598,38630,38631],{"__ignoreMap":556},[617,38632,38633,38635,38637,38639,38641,38643,38645,38647,38649,38651,38653,38655,38657,38659,38661,38663,38666,38668],{"class":619,"line":557},[617,38634,623],{"class":622},[617,38636,337],{"class":626},[617,38638,3009],{"class":622},[617,38640,38019],{"class":630},[617,38642,637],{"class":622},[617,38644,640],{"class":622},[617,38646,18946],{"class":663},[617,38648,38609],{"class":622},[617,38650,38612],{"class":622},[617,38652,2494],{"class":663},[617,38654,640],{"class":622},[617,38656,3009],{"class":622},[617,38658,38036],{"class":630},[617,38660,637],{"class":622},[617,38662,640],{"class":622},[617,38664,38665],{"class":2481},"8193",[617,38667,640],{"class":622},[617,38669,767],{"class":622},[594,38671,38672,38673,3043,38675,38677,38678,38680,38681,1126],{},"Here, both ",[598,38674,38019],{},[598,38676,38036],{}," are defined. The component will generate random elements and overwrite their properties with the contents of ",[598,38679,38019],{},", according to the ",[1120,38682,38683],{"href":38515},"order of precedence",[1985,38685,38686],{},[594,38687,38688],{},"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.",[4031,38690,38691],{"id":38516},"Precedence",[594,38693,38694],{},"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.",[12192,38696,38697,38701,38708,38715],{},[2196,38698,38699],{},[598,38700,38019],{},[2196,38702,38703,1652,38705,38707],{},[598,38704,7527],{},[598,38706,2697],{}," – default element properties",[2196,38709,38710,1652,38712,38714],{},[598,38711,38036],{},[598,38713,38052],{}," – generated random elements",[2196,38716,38717],{},"built-in default element properties",[1985,38719,38720],{},[594,38721,38722,3043,38724,38726,38727,38730,38731,38733,38734,38736],{},[598,38723,5610],{},[598,38725,11571],{}," are applied as ",[1649,38728,38729],{},"multipliers"," at render time, not as default values. They proportionally adjust all element sizes and distances respectively, preserving the variation between elements. Use ",[598,38732,5610],{}," to make the entire lensflare larger or smaller, and ",[598,38735,11571],{}," to spread or compress the scattered elements.",[1985,38738,38739],{},[594,38740,38741],{},"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.",[4031,38743,38745],{"id":38744},"precedence-example","Precedence example",[594,38747,38748],{},"Here's an example of precedence. Assume this is in our vue template.",[606,38750,38752],{"className":608,"code":38751,"language":613,"meta":556,"style":556},"\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",[598,38753,38754,38761,38774,38801,38826,38833,38849,38861,38875],{"__ignoreMap":556},[617,38755,38756,38758],{"class":619,"line":557},[617,38757,623],{"class":622},[617,38759,38760],{"class":626},"Lensflare\n",[617,38762,38763,38765,38767,38769,38771],{"class":619,"line":558},[617,38764,3116],{"class":622},[617,38766,38019],{"class":630},[617,38768,637],{"class":622},[617,38770,640],{"class":622},[617,38772,38773],{"class":663},"[\n",[617,38775,38776,38779,38781,38783,38785,38787,38789,38791,38793,38796,38798],{"class":619,"line":688},[617,38777,38778],{"class":622}," {",[617,38780,14703],{"class":626},[617,38782,1198],{"class":622},[617,38784,26196],{"class":2481},[617,38786,667],{"class":622},[617,38788,17676],{"class":663},[617,38790,637],{"class":622},[617,38792,2420],{"class":622},[617,38794,38795],{"class":643},"http://example.net/circle.png",[617,38797,2420],{"class":622},[617,38799,38800],{"class":622},"},\n",[617,38802,38803,38805,38807,38809,38811,38813,38815,38817,38820,38822,38824],{"class":619,"line":709},[617,38804,38778],{"class":622},[617,38806,7527],{"class":626},[617,38808,1198],{"class":622},[617,38810,2420],{"class":622},[617,38812,33810],{"class":643},[617,38814,2420],{"class":622},[617,38816,667],{"class":622},[617,38818,38819],{"class":626}," distance",[617,38821,1198],{"class":622},[617,38823,1926],{"class":2481},[617,38825,1305],{"class":622},[617,38827,38828,38831],{"class":619,"line":719},[617,38829,38830],{"class":663}," ]",[617,38832,3111],{"class":622},[617,38834,38835,38837,38839,38841,38843,38846],{"class":619,"line":725},[617,38836,3116],{"class":622},[617,38838,2697],{"class":630},[617,38840,637],{"class":622},[617,38842,640],{"class":622},[617,38844,38845],{"class":663},"http:",[617,38847,38848],{"class":1189},"//example.net/ring.png\"\n",[617,38850,38851,38853,38855,38857,38859],{"class":619,"line":735},[617,38852,5453],{"class":663},[617,38854,637],{"class":622},[617,38856,640],{"class":622},[617,38858,33693],{"class":630},[617,38860,3111],{"class":663},[617,38862,38863,38865,38867,38869,38871,38873],{"class":619,"line":758},[617,38864,3116],{"class":622},[617,38866,38036],{"class":630},[617,38868,637],{"class":622},[617,38870,640],{"class":622},[617,38872,1854],{"class":2481},[617,38874,3111],{"class":622},[617,38876,38877],{"class":619,"line":770},[617,38878,3147],{"class":663},[594,38880,38881,38883],{},[598,38882,38036],{}," is defined, so the component will produce random elements.",[594,38885,38886,38887,1198],{},"Assume the random element generator produces this, based on ",[598,38888,38036],{},[606,38890,38894],{"className":38891,"code":38892,"language":38893,"meta":556,"style":556},"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",[598,38895,38896,38900,38904,38918,38929,38940,38956,38960,38964,38978,38988,38999,39013,39017,39021,39035,39045,39055,39069,39073],{"__ignoreMap":556},[617,38897,38898],{"class":619,"line":557},[617,38899,38773],{"class":663},[617,38901,38902],{"class":619,"line":558},[617,38903,2451],{"class":622},[617,38905,38906,38908,38910,38912,38914,38916],{"class":619,"line":688},[617,38907,21797],{"class":626},[617,38909,1198],{"class":622},[617,38911,679],{"class":622},[617,38913,2676],{"class":643},[617,38915,2420],{"class":622},[617,38917,2468],{"class":622},[617,38919,38920,38923,38925,38927],{"class":619,"line":709},[617,38921,38922],{"class":626}," distance",[617,38924,1198],{"class":622},[617,38926,2486],{"class":2481},[617,38928,2468],{"class":622},[617,38930,38931,38933,38935,38938],{"class":619,"line":719},[617,38932,2524],{"class":626},[617,38934,1198],{"class":622},[617,38936,38937],{"class":2481}," 1024",[617,38939,2468],{"class":622},[617,38941,38942,38945,38947,38949,38952,38954],{"class":619,"line":725},[617,38943,38944],{"class":626}," texture",[617,38946,1198],{"class":622},[617,38948,679],{"class":622},[617,38950,38951],{"class":643},"http://example.net/rays.png",[617,38953,2420],{"class":622},[617,38955,2468],{"class":622},[617,38957,38958],{"class":619,"line":735},[617,38959,2577],{"class":622},[617,38961,38962],{"class":619,"line":758},[617,38963,2451],{"class":622},[617,38965,38966,38968,38970,38972,38974,38976],{"class":619,"line":770},[617,38967,21797],{"class":626},[617,38969,1198],{"class":622},[617,38971,679],{"class":622},[617,38973,2676],{"class":643},[617,38975,2420],{"class":622},[617,38977,2468],{"class":622},[617,38979,38980,38982,38984,38986],{"class":619,"line":780},[617,38981,38922],{"class":626},[617,38983,1198],{"class":622},[617,38985,2541],{"class":2481},[617,38987,2468],{"class":622},[617,38989,38990,38992,38994,38997],{"class":619,"line":785},[617,38991,2524],{"class":626},[617,38993,1198],{"class":622},[617,38995,38996],{"class":2481}," 512",[617,38998,2468],{"class":622},[617,39000,39001,39003,39005,39007,39009,39011],{"class":619,"line":807},[617,39002,38944],{"class":626},[617,39004,1198],{"class":622},[617,39006,679],{"class":622},[617,39008,38795],{"class":643},[617,39010,2420],{"class":622},[617,39012,2468],{"class":622},[617,39014,39015],{"class":619,"line":611},[617,39016,2577],{"class":622},[617,39018,39019],{"class":619,"line":830},[617,39020,2451],{"class":622},[617,39022,39023,39025,39027,39029,39031,39033],{"class":619,"line":841},[617,39024,21797],{"class":626},[617,39026,1198],{"class":622},[617,39028,679],{"class":622},[617,39030,2676],{"class":643},[617,39032,2420],{"class":622},[617,39034,2468],{"class":622},[617,39036,39037,39039,39041,39043],{"class":619,"line":852},[617,39038,38922],{"class":626},[617,39040,1198],{"class":622},[617,39042,28832],{"class":2481},[617,39044,2468],{"class":622},[617,39046,39047,39049,39051,39053],{"class":619,"line":862},[617,39048,2524],{"class":626},[617,39050,1198],{"class":622},[617,39052,38996],{"class":2481},[617,39054,2468],{"class":622},[617,39056,39057,39059,39061,39063,39065,39067],{"class":619,"line":612},[617,39058,38944],{"class":626},[617,39060,1198],{"class":622},[617,39062,679],{"class":622},[617,39064,38795],{"class":643},[617,39066,2420],{"class":622},[617,39068,2468],{"class":622},[617,39070,39071],{"class":619,"line":882},[617,39072,2577],{"class":622},[617,39074,39075],{"class":619,"line":892},[617,39076,18348],{"class":663},[594,39078,39079,39080,39082],{},"When random elements are mixed with ",[598,39081,38019],{},", the final number of elements in the lensflare is determined by whichever is longer.",[594,39084,39085,39086,39088],{},"Here, ",[598,39087,38019],{}," contains 2 entries. The random element generator produced 3. So the resulting lensflare will have 3 elements.",[594,39090,39091],{},"Therefore, resulting lensflare will have 3 elements.",[594,39093,39094],{},"The resulting 3 lensflare elements will have the following properties, from the following sources:",[606,39096,39098],{"className":38891,"code":39097,"language":38893,"meta":556,"style":556},"[\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",[598,39099,39100,39104,39108,39125,39138,39150,39166,39170,39174,39191,39203,39215,39233,39237,39241,39257,39269,39281,39297,39301],{"__ignoreMap":556},[617,39101,39102],{"class":619,"line":557},[617,39103,38773],{"class":663},[617,39105,39106],{"class":619,"line":558},[617,39107,2451],{"class":622},[617,39109,39110,39112,39114,39116,39118,39120,39122],{"class":619,"line":688},[617,39111,21797],{"class":626},[617,39113,1198],{"class":622},[617,39115,679],{"class":622},[617,39117,33810],{"class":643},[617,39119,2420],{"class":622},[617,39121,667],{"class":622},[617,39123,39124],{"class":1189}," // from `elements`\n",[617,39126,39127,39129,39131,39133,39135],{"class":619,"line":709},[617,39128,38922],{"class":626},[617,39130,1198],{"class":622},[617,39132,2486],{"class":2481},[617,39134,667],{"class":622},[617,39136,39137],{"class":1189}," // from random element generator\n",[617,39139,39140,39142,39144,39146,39148],{"class":619,"line":719},[617,39141,2524],{"class":626},[617,39143,1198],{"class":622},[617,39145,38996],{"class":2481},[617,39147,667],{"class":622},[617,39149,39124],{"class":1189},[617,39151,39152,39154,39156,39158,39160,39162,39164],{"class":619,"line":725},[617,39153,38944],{"class":626},[617,39155,1198],{"class":622},[617,39157,679],{"class":622},[617,39159,38795],{"class":643},[617,39161,2420],{"class":622},[617,39163,667],{"class":622},[617,39165,39124],{"class":1189},[617,39167,39168],{"class":619,"line":735},[617,39169,2577],{"class":622},[617,39171,39172],{"class":619,"line":758},[617,39173,2451],{"class":622},[617,39175,39176,39178,39180,39182,39184,39186,39188],{"class":619,"line":770},[617,39177,21797],{"class":626},[617,39179,1198],{"class":622},[617,39181,679],{"class":622},[617,39183,33693],{"class":643},[617,39185,2420],{"class":622},[617,39187,667],{"class":622},[617,39189,39190],{"class":1189}," // from component prop `color`\n",[617,39192,39193,39195,39197,39199,39201],{"class":619,"line":780},[617,39194,38922],{"class":626},[617,39196,1198],{"class":622},[617,39198,2491],{"class":2481},[617,39200,667],{"class":622},[617,39202,39124],{"class":1189},[617,39204,39205,39207,39209,39211,39213],{"class":619,"line":785},[617,39206,2524],{"class":626},[617,39208,1198],{"class":622},[617,39210,38996],{"class":2481},[617,39212,667],{"class":622},[617,39214,39137],{"class":1189},[617,39216,39217,39219,39221,39223,39226,39228,39230],{"class":619,"line":807},[617,39218,38944],{"class":626},[617,39220,1198],{"class":622},[617,39222,679],{"class":622},[617,39224,39225],{"class":643},"http://example.net/ring.png",[617,39227,2420],{"class":622},[617,39229,667],{"class":622},[617,39231,39232],{"class":1189}," // from component prop `texture`\n",[617,39234,39235],{"class":619,"line":611},[617,39236,2577],{"class":622},[617,39238,39239],{"class":619,"line":830},[617,39240,2451],{"class":622},[617,39242,39243,39245,39247,39249,39251,39253,39255],{"class":619,"line":841},[617,39244,21797],{"class":626},[617,39246,1198],{"class":622},[617,39248,679],{"class":622},[617,39250,33693],{"class":643},[617,39252,2420],{"class":622},[617,39254,667],{"class":622},[617,39256,39190],{"class":1189},[617,39258,39259,39261,39263,39265,39267],{"class":619,"line":852},[617,39260,38922],{"class":626},[617,39262,1198],{"class":622},[617,39264,28832],{"class":2481},[617,39266,667],{"class":622},[617,39268,39137],{"class":1189},[617,39270,39271,39273,39275,39277,39279],{"class":619,"line":862},[617,39272,2524],{"class":626},[617,39274,1198],{"class":622},[617,39276,38996],{"class":2481},[617,39278,667],{"class":622},[617,39280,39137],{"class":1189},[617,39282,39283,39285,39287,39289,39291,39293,39295],{"class":619,"line":612},[617,39284,38944],{"class":626},[617,39286,1198],{"class":622},[617,39288,679],{"class":622},[617,39290,39225],{"class":643},[617,39292,2420],{"class":622},[617,39294,667],{"class":622},[617,39296,39232],{"class":1189},[617,39298,39299],{"class":619,"line":882},[617,39300,2577],{"class":622},[617,39302,39303],{"class":619,"line":892},[617,39304,18348],{"class":663},[1307,39306,39307],{},"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":556,"searchDepth":557,"depth":558,"links":39309},[39310,39311,39312,39313,39316,39317],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},{"id":38019,"depth":558,"text":38019},{"id":38036,"depth":558,"text":38036,"children":39314},[39315],{"id":38208,"depth":688,"text":38209},{"id":38261,"depth":558,"text":38052},{"id":38381,"depth":558,"text":38382,"children":39318},[39319,39320,39321,39322,39323],{"id":38403,"depth":688,"text":38404},{"id":38520,"depth":688,"text":38521},{"id":38621,"depth":688,"text":38622},{"id":38516,"depth":688,"text":38691},{"id":38744,"depth":688,"text":38745},"Wraps the Three.js Lensflare with seeded random element generation.",{},{"title":337,"description":39324},"IPTu6ltIJ84TUkEk77xCaQa3Z9Y35mfjfjyH23AjLG0",{"id":39329,"title":341,"body":39330,"description":39954,"extension":571,"links":572,"meta":39955,"navigation":574,"path":342,"seo":39956,"stem":343,"__hash__":39957},"docs/2.api/7.light-shadow/randomized-lights.md",{"type":481,"value":39331,"toc":39950},[39332,39337,39344,39352,39354,39783,39785,39948],[2275,39333,39334],{},[39335,39336],"light-shadow-randomized-lights",{},[594,39338,39339,39341,39342,1126],{},[598,39340,36368],{}," internally creates multiple lights and jiggles them. You would normally add it as a child of ",[598,39343,35873],{},[594,39345,39346,39347,1126],{},"It is based on this ",[1120,39348,39351],{"href":39349,"rel":39350},"http://drei.docs.pmnd.rs/staging/randomized-light",[1124],"Drei component",[484,39353,15],{"id":604},[606,39355,39358],{"className":608,"code":39356,"highlights":39357,"language":613,"meta":556,"style":556},"\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",[709,852,862,612,882,892,2605,2614,2634],[598,39359,39360,39380,39400,39406,39414,39421,39428,39435,39449,39457,39461,39469,39480,39499,39507,39550,39558,39572,39586,39600,39614,39628,39642,39656,39660,39668,39678,39686,39704,39712,39743,39751,39759,39767,39775],{"__ignoreMap":556},[617,39361,39362,39364,39366,39368,39370,39372,39374,39376,39378],{"class":619,"line":557},[617,39363,623],{"class":622},[617,39365,627],{"class":626},[617,39367,631],{"class":630},[617,39369,634],{"class":630},[617,39371,637],{"class":622},[617,39373,640],{"class":622},[617,39375,644],{"class":643},[617,39377,640],{"class":622},[617,39379,649],{"class":622},[617,39381,39382,39384,39386,39388,39390,39392,39394,39396,39398],{"class":619,"line":558},[617,39383,657],{"class":656},[617,39385,660],{"class":622},[617,39387,695],{"class":663},[617,39389,673],{"class":622},[617,39391,676],{"class":656},[617,39393,8270],{"class":622},[617,39395,704],{"class":643},[617,39397,640],{"class":622},[617,39399,8277],{"class":622},[617,39401,39402,39404],{"class":619,"line":688},[617,39403,657],{"class":656},[617,39405,1184],{"class":622},[617,39407,39409,39412],{"class":39408,"line":709},[619,653],[617,39410,39411],{"class":663}," RandomizedLights",[617,39413,2468],{"class":622},[617,39415,39416,39419],{"class":619,"line":719},[617,39417,39418],{"class":663}," AccumulativeShadows",[617,39420,2468],{"class":622},[617,39422,39423,39426],{"class":619,"line":725},[617,39424,39425],{"class":663}," OrbitControls",[617,39427,2468],{"class":622},[617,39429,39430,39433],{"class":619,"line":735},[617,39431,39432],{"class":663}," Plane",[617,39434,2468],{"class":622},[617,39436,39437,39439,39441,39443,39445,39447],{"class":619,"line":758},[617,39438,2408],{"class":622},[617,39440,676],{"class":656},[617,39442,8270],{"class":622},[617,39444,682],{"class":643},[617,39446,640],{"class":622},[617,39448,8277],{"class":622},[617,39450,39451,39453,39455],{"class":619,"line":770},[617,39452,712],{"class":622},[617,39454,627],{"class":626},[617,39456,649],{"class":622},[617,39458,39459],{"class":619,"line":780},[617,39460,722],{"emptyLinePlaceholder":574},[617,39462,39463,39465,39467],{"class":619,"line":785},[617,39464,623],{"class":622},[617,39466,730],{"class":626},[617,39468,649],{"class":622},[617,39470,39471,39473,39475,39478],{"class":619,"line":807},[617,39472,738],{"class":622},[617,39474,741],{"class":626},[617,39476,39477],{"class":630}," shadows",[617,39479,649],{"class":622},[617,39481,39482,39484,39486,39488,39490,39492,39495,39497],{"class":619,"line":611},[617,39483,761],{"class":622},[617,39485,764],{"class":626},[617,39487,1465],{"class":630},[617,39489,637],{"class":622},[617,39491,640],{"class":622},[617,39493,39494],{"class":643},"[0, 3, 5]",[617,39496,640],{"class":622},[617,39498,767],{"class":622},[617,39500,39501,39503,39505],{"class":619,"line":830},[617,39502,761],{"class":622},[617,39504,775],{"class":626},[617,39506,767],{"class":622},[617,39508,39509,39511,39514,39517,39519,39521,39523,39525,39527,39529,39531,39533,39535,39538,39540,39542,39544,39546,39548],{"class":619,"line":841},[617,39510,761],{"class":622},[617,39512,39513],{"class":626},"AccumulativeShadows",[617,39515,39516],{"class":630}," :blend",[617,39518,637],{"class":622},[617,39520,640],{"class":622},[617,39522,29633],{"class":643},[617,39524,640],{"class":622},[617,39526,2669],{"class":630},[617,39528,637],{"class":622},[617,39530,640],{"class":622},[617,39532,8908],{"class":643},[617,39534,640],{"class":622},[617,39536,39537],{"class":630}," once",[617,39539,1919],{"class":630},[617,39541,637],{"class":622},[617,39543,640],{"class":622},[617,39545,8949],{"class":643},[617,39547,640],{"class":622},[617,39549,649],{"class":622},[617,39551,39553,39555],{"class":39552,"line":852},[619,653],[617,39554,833],{"class":622},[617,39556,39557],{"class":626},"RandomizedLights\n",[617,39559,39561,39564,39566,39568,39570],{"class":39560,"line":862},[619,653],[617,39562,39563],{"class":630}," :ambient",[617,39565,637],{"class":622},[617,39567,640],{"class":622},[617,39569,11667],{"class":643},[617,39571,3111],{"class":622},[617,39573,39575,39578,39580,39582,39584],{"class":39574,"line":612},[619,653],[617,39576,39577],{"class":630}," :bias",[617,39579,637],{"class":622},[617,39581,640],{"class":622},[617,39583,5681],{"class":643},[617,39585,3111],{"class":622},[617,39587,39589,39592,39594,39596,39598],{"class":39588,"line":882},[619,653],[617,39590,39591],{"class":630}," :count",[617,39593,637],{"class":622},[617,39595,640],{"class":622},[617,39597,30738],{"class":643},[617,39599,3111],{"class":622},[617,39601,39603,39606,39608,39610,39612],{"class":39602,"line":892},[619,653],[617,39604,39605],{"class":630}," :intensity",[617,39607,637],{"class":622},[617,39609,640],{"class":622},[617,39611,9713],{"class":643},[617,39613,3111],{"class":622},[617,39615,39617,39620,39622,39624,39626],{"class":39616,"line":2605},[619,653],[617,39618,39619],{"class":630}," :map-size",[617,39621,637],{"class":622},[617,39623,640],{"class":622},[617,39625,36342],{"class":643},[617,39627,3111],{"class":622},[617,39629,39631,39633,39635,39637,39640],{"class":39630,"line":2614},[619,653],[617,39632,7985],{"class":630},[617,39634,637],{"class":622},[617,39636,640],{"class":622},[617,39638,39639],{"class":643},"[5, 5, -10]",[617,39641,3111],{"class":622},[617,39643,39645,39648,39650,39652,39654],{"class":39644,"line":2634},[619,653],[617,39646,39647],{"class":630}," :radius",[617,39649,637],{"class":622},[617,39651,640],{"class":622},[617,39653,800],{"class":643},[617,39655,3111],{"class":622},[617,39657,39658],{"class":619,"line":2643},[617,39659,8013],{"class":622},[617,39661,39662,39664,39666],{"class":619,"line":2652},[617,39663,875],{"class":622},[617,39665,39513],{"class":626},[617,39667,649],{"class":622},[617,39669,39670,39672,39674,39676],{"class":619,"line":2661},[617,39671,761],{"class":622},[617,39673,836],{"class":626},[617,39675,14342],{"class":630},[617,39677,649],{"class":622},[617,39679,39680,39682,39684],{"class":619,"line":2683},[617,39681,833],{"class":622},[617,39683,847],{"class":626},[617,39685,767],{"class":622},[617,39687,39688,39690,39692,39694,39696,39698,39700,39702],{"class":619,"line":2727},[617,39689,833],{"class":622},[617,39691,11368],{"class":626},[617,39693,2669],{"class":630},[617,39695,637],{"class":622},[617,39697,640],{"class":622},[617,39699,11377],{"class":643},[617,39701,640],{"class":622},[617,39703,767],{"class":622},[617,39705,39706,39708,39710],{"class":619,"line":2736},[617,39707,875],{"class":622},[617,39709,836],{"class":626},[617,39711,649],{"class":622},[617,39713,39714,39716,39718,39720,39722,39724,39726,39728,39731,39733,39735,39737,39739,39741],{"class":619,"line":2745},[617,39715,761],{"class":622},[617,39717,245],{"class":626},[617,39719,1465],{"class":630},[617,39721,637],{"class":622},[617,39723,640],{"class":622},[617,39725,36825],{"class":643},[617,39727,640],{"class":622},[617,39729,39730],{"class":630}," receive-shadow",[617,39732,1939],{"class":630},[617,39734,637],{"class":622},[617,39736,640],{"class":622},[617,39738,10011],{"class":643},[617,39740,640],{"class":622},[617,39742,649],{"class":622},[617,39744,39745,39747,39749],{"class":619,"line":3902},[617,39746,833],{"class":622},[617,39748,2666],{"class":626},[617,39750,767],{"class":622},[617,39752,39753,39755,39757],{"class":619,"line":3933},[617,39754,875],{"class":622},[617,39756,245],{"class":626},[617,39758,649],{"class":622},[617,39760,39761,39763,39765],{"class":619,"line":3954},[617,39762,761],{"class":622},[617,39764,8436],{"class":626},[617,39766,767],{"class":622},[617,39768,39769,39771,39773],{"class":619,"line":3973},[617,39770,885],{"class":622},[617,39772,741],{"class":626},[617,39774,649],{"class":622},[617,39776,39777,39779,39781],{"class":619,"line":4005},[617,39778,712],{"class":622},[617,39780,730],{"class":626},[617,39782,649],{"class":622},[484,39784,902],{"id":901},[907,39786,39787,39797],{},[910,39788,39789],{},[913,39790,39791,39793,39795],{},[916,39792,918],{},[916,39794,921],{},[916,39796,924],{},[926,39798,39799,39812,39826,39839,39853,39866,39880,39894,39907,39921,39935],{},[913,39800,39801,39805,39808],{},[931,39802,39803],{},[598,39804,10059],{},[931,39806,39807],{},"Number of lights",[931,39809,39810],{},[598,39811,30738],{},[913,39813,39814,39819,39822],{},[931,39815,39816],{},[598,39817,39818],{},"radius",[931,39820,39821],{},"Radius of the jiggle, higher values make softer light",[931,39823,39824],{},[598,39825,1854],{},[913,39827,39828,39832,39835],{},[931,39829,39830],{},[598,39831,2045],{},[931,39833,39834],{},"Light intensity",[931,39836,39837],{},[598,39838,9713],{},[913,39840,39841,39846,39849],{},[931,39842,39843],{},[598,39844,39845],{},"ambient",[931,39847,39848],{},"\"Ambient occlusion\" to directional light ratio, lower values mean less AO",[931,39850,39851],{},[598,39852,1926],{},[913,39854,39855,39859,39862],{},[931,39856,39857],{},[598,39858,16307],{},[931,39860,39861],{},"If the lights cast shadows",[931,39863,39864],{},[598,39865,941],{},[913,39867,39868,39873,39876],{},[931,39869,39870],{},[598,39871,39872],{},"bias",[931,39874,39875],{},"Default shadow bias",[931,39877,39878],{},[598,39879,945],{},[913,39881,39882,39887,39890],{},[931,39883,39884],{},[598,39885,39886],{},"mapSize",[931,39888,39889],{},"Size of the lights' shadow map",[931,39891,39892],{},[598,39893,26196],{},[913,39895,39896,39900,39903],{},[931,39897,39898],{},[598,39899,14703],{},[931,39901,39902],{},"Size of the lights' shadow camera frustum",[931,39904,39905],{},[598,39906,34359],{},[913,39908,39909,39914,39917],{},[931,39910,39911],{},[598,39912,39913],{},"near",[931,39915,39916],{},"Lights' shadow camera near value",[931,39918,39919],{},[598,39920,1926],{},[913,39922,39923,39927,39930],{},[931,39924,39925],{},[598,39926,37737],{},[931,39928,39929],{},"Lights' shadow camera far value",[931,39931,39932],{},[598,39933,39934],{},"500",[913,39936,39937,39941,39944],{},[931,39938,39939],{},[598,39940,4110],{},[931,39942,39943],{},"Position",[931,39945,39946],{},[598,39947,39639],{},[1307,39949,1624],{},{"title":556,"searchDepth":557,"depth":558,"links":39951},[39952,39953],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},"Creates multiple lights and jiggles them for softer shadows.",{},{"title":341,"description":39954},"79Dz6CbGDB6whT9LqG15v15q-nHtJLggTb7-YTnIEEE",{"id":39959,"title":345,"body":39960,"description":40353,"extension":571,"links":572,"meta":40354,"navigation":574,"path":346,"seo":40355,"stem":347,"__hash__":40356},"docs/2.api/7.light-shadow/soft-shadows.md",{"type":481,"value":39961,"toc":40349},[39962,39967,39970,39972,40296,40298,40347],[588,39963,39964],{},[39965,39966],"light-shadow-soft-shadows",{},[594,39968,39969],{},"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.",[484,39971,15],{"id":604},[606,39973,39976],{"className":608,"code":39974,"highlights":39975,"language":613,"meta":556,"style":556},"\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",[558,612],[598,39977,39978,39998,40033,40053,40061,40065,40073,40093,40131,40151,40169,40177,40185,40215,40223,40231,40252,40270,40280,40288],{"__ignoreMap":556},[617,39979,39980,39982,39984,39986,39988,39990,39992,39994,39996],{"class":619,"line":557},[617,39981,623],{"class":622},[617,39983,627],{"class":626},[617,39985,631],{"class":630},[617,39987,634],{"class":630},[617,39989,637],{"class":622},[617,39991,640],{"class":622},[617,39993,644],{"class":643},[617,39995,640],{"class":622},[617,39997,649],{"class":622},[617,39999,40001,40003,40005,40008,40010,40012,40014,40016,40018,40021,40023,40025,40027,40029,40031],{"class":40000,"line":558},[619,653],[617,40002,657],{"class":656},[617,40004,660],{"class":622},[617,40006,40007],{"class":663}," SoftShadows",[617,40009,667],{"class":622},[617,40011,8287],{"class":663},[617,40013,667],{"class":622},[617,40015,37408],{"class":663},[617,40017,667],{"class":622},[617,40019,40020],{"class":663}," Plane",[617,40022,673],{"class":622},[617,40024,676],{"class":656},[617,40026,8270],{"class":622},[617,40028,682],{"class":643},[617,40030,640],{"class":622},[617,40032,8277],{"class":622},[617,40034,40035,40037,40039,40041,40043,40045,40047,40049,40051],{"class":619,"line":688},[617,40036,657],{"class":656},[617,40038,660],{"class":622},[617,40040,695],{"class":663},[617,40042,673],{"class":622},[617,40044,676],{"class":656},[617,40046,8270],{"class":622},[617,40048,704],{"class":643},[617,40050,640],{"class":622},[617,40052,8277],{"class":622},[617,40054,40055,40057,40059],{"class":619,"line":709},[617,40056,712],{"class":622},[617,40058,627],{"class":626},[617,40060,649],{"class":622},[617,40062,40063],{"class":619,"line":719},[617,40064,722],{"emptyLinePlaceholder":574},[617,40066,40067,40069,40071],{"class":619,"line":725},[617,40068,623],{"class":622},[617,40070,730],{"class":626},[617,40072,649],{"class":622},[617,40074,40075,40077,40079,40081,40083,40085,40087,40089,40091],{"class":619,"line":735},[617,40076,738],{"class":622},[617,40078,741],{"class":626},[617,40080,39477],{"class":630},[617,40082,744],{"class":630},[617,40084,637],{"class":622},[617,40086,640],{"class":622},[617,40088,9840],{"class":643},[617,40090,640],{"class":622},[617,40092,649],{"class":622},[617,40094,40095,40097,40099,40101,40103,40105,40107,40109,40111,40113,40115,40117,40119,40121,40123,40125,40127,40129],{"class":619,"line":758},[617,40096,761],{"class":622},[617,40098,8398],{"class":626},[617,40100,8401],{"class":630},[617,40102,637],{"class":622},[617,40104,640],{"class":622},[617,40106,8408],{"class":643},[617,40108,640],{"class":622},[617,40110,37493],{"class":630},[617,40112,637],{"class":622},[617,40114,640],{"class":622},[617,40116,37500],{"class":643},[617,40118,640],{"class":622},[617,40120,37505],{"class":630},[617,40122,637],{"class":622},[617,40124,640],{"class":622},[617,40126,37512],{"class":643},[617,40128,640],{"class":622},[617,40130,649],{"class":622},[617,40132,40133,40135,40137,40139,40141,40143,40145,40147,40149],{"class":619,"line":770},[617,40134,833],{"class":622},[617,40136,32672],{"class":626},[617,40138,14342],{"class":630},[617,40140,793],{"class":630},[617,40142,637],{"class":622},[617,40144,640],{"class":622},[617,40146,24837],{"class":643},[617,40148,640],{"class":622},[617,40150,649],{"class":622},[617,40152,40153,40155,40157,40159,40161,40163,40165,40167],{"class":619,"line":780},[617,40154,844],{"class":622},[617,40156,2666],{"class":626},[617,40158,2669],{"class":630},[617,40160,637],{"class":622},[617,40162,640],{"class":622},[617,40164,11377],{"class":643},[617,40166,640],{"class":622},[617,40168,767],{"class":622},[617,40170,40171,40173,40175],{"class":619,"line":785},[617,40172,865],{"class":622},[617,40174,32672],{"class":626},[617,40176,649],{"class":622},[617,40178,40179,40181,40183],{"class":619,"line":807},[617,40180,875],{"class":622},[617,40182,8398],{"class":626},[617,40184,649],{"class":622},[617,40186,40187,40189,40191,40193,40195,40197,40199,40201,40203,40205,40207,40209,40211,40213],{"class":619,"line":611},[617,40188,761],{"class":622},[617,40190,245],{"class":626},[617,40192,1465],{"class":630},[617,40194,637],{"class":622},[617,40196,640],{"class":622},[617,40198,36825],{"class":643},[617,40200,640],{"class":622},[617,40202,39730],{"class":630},[617,40204,1939],{"class":630},[617,40206,637],{"class":622},[617,40208,640],{"class":622},[617,40210,10011],{"class":643},[617,40212,640],{"class":622},[617,40214,649],{"class":622},[617,40216,40217,40219,40221],{"class":619,"line":830},[617,40218,833],{"class":622},[617,40220,2666],{"class":626},[617,40222,767],{"class":622},[617,40224,40225,40227,40229],{"class":619,"line":841},[617,40226,875],{"class":622},[617,40228,245],{"class":626},[617,40230,649],{"class":622},[617,40232,40233,40235,40237,40239,40241,40243,40245,40248,40250],{"class":619,"line":852},[617,40234,761],{"class":622},[617,40236,8455],{"class":626},[617,40238,14342],{"class":630},[617,40240,1465],{"class":630},[617,40242,637],{"class":622},[617,40244,640],{"class":622},[617,40246,40247],{"class":643},"[0, 3, 0]",[617,40249,640],{"class":622},[617,40251,767],{"class":622},[617,40253,40254,40256,40258,40260,40262,40264,40266,40268],{"class":619,"line":862},[617,40255,761],{"class":622},[617,40257,8436],{"class":626},[617,40259,1847],{"class":630},[617,40261,637],{"class":622},[617,40263,640],{"class":622},[617,40265,1926],{"class":643},[617,40267,640],{"class":622},[617,40269,767],{"class":622},[617,40271,40273,40275,40278],{"class":40272,"line":612},[619,653],[617,40274,761],{"class":622},[617,40276,40277],{"class":626},"SoftShadows",[617,40279,767],{"class":622},[617,40281,40282,40284,40286],{"class":619,"line":882},[617,40283,885],{"class":622},[617,40285,741],{"class":626},[617,40287,649],{"class":622},[617,40289,40290,40292,40294],{"class":619,"line":892},[617,40291,712],{"class":622},[617,40293,730],{"class":626},[617,40295,649],{"class":622},[484,40297,902],{"id":901},[907,40299,40300,40310],{},[910,40301,40302],{},[913,40303,40304,40306,40308],{},[916,40305,8069],{"align":977},[916,40307,921],{"align":977},[916,40309,924],{},[926,40311,40312,40323,40334],{},[913,40313,40314,40316,40319],{},[931,40315,14703],{"align":977},[931,40317,40318],{"align":977},"Size of the light source (the larger the softer the light)",[931,40320,40321],{},[598,40322,29294],{},[913,40324,40325,40327,40330],{},[931,40326,26616],{"align":977},[931,40328,40329],{"align":977},"Number of samples (more samples less noise but more expensive)",[931,40331,40332],{},[598,40333,34359],{},[913,40335,40336,40339,40342],{},[931,40337,40338],{"align":977},"focus",[931,40340,40341],{"align":977},"Depth focus, use it to shift the focal point (where the shadow is the sharpest)",[931,40343,40344,40346],{},[598,40345,945],{}," (the beginning)",[1307,40348,1624],{},{"title":556,"searchDepth":557,"depth":558,"links":40350},[40351,40352],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},"Injects percent closer soft shadows (PCSS) into THREE's shader chunk.",{},{"title":345,"description":40353},"WFVp3-okOdmyoKfWIXSoGlyt-AidaFEgkQYSqpSVti0",[40358,41437,42026,42281,42607,43205,44170,44561,44958,46696,47348],{"id":40359,"title":355,"body":40360,"description":41433,"extension":571,"links":572,"meta":41434,"navigation":574,"path":356,"seo":41435,"stem":357,"__hash__":41436},"docs/2.api/8.staging/1.environment.md",{"type":481,"value":40361,"toc":41420},[40362,40367,40377,40383,40385,40563,40570,40596,40601,40605,40612,40807,40811,40817,40840,40844,40862,40898,40911,40925,40942,40975,40979,40982,41067,41071,41077,41157,41162,41173,41175,41408,41411,41417],[588,40363,40364],{},[40365,40366],"staging-environment",{},[594,40368,40369,40370,40373,40374,1126],{},"Is a component abstraction that automatically sets up a global cubemap, which affects the default ",[598,40371,40372],{},"scene.environment",", and optionally ",[598,40375,40376],{},"scene.background",[594,40378,40379,40380,40382],{},"It uses the composable ",[1120,40381,359],{"href":360}," under the hood to load the cubemap.",[484,40384,15],{"id":604},[606,40386,40388],{"className":608,"code":40387,"language":613,"meta":556,"style":556},"\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",[598,40389,40390,40410,40428,40446,40454,40458,40466,40474,40482,40488,40498,40503,40508,40513,40518,40523,40528,40535,40539,40547,40555],{"__ignoreMap":556},[617,40391,40392,40394,40396,40398,40400,40402,40404,40406,40408],{"class":619,"line":557},[617,40393,623],{"class":622},[617,40395,627],{"class":626},[617,40397,631],{"class":630},[617,40399,634],{"class":630},[617,40401,637],{"class":622},[617,40403,640],{"class":622},[617,40405,644],{"class":643},[617,40407,640],{"class":622},[617,40409,649],{"class":622},[617,40411,40412,40414,40416,40418,40420,40422,40424,40426],{"class":619,"line":558},[617,40413,657],{"class":656},[617,40415,660],{"class":622},[617,40417,695],{"class":663},[617,40419,673],{"class":622},[617,40421,676],{"class":656},[617,40423,679],{"class":622},[617,40425,704],{"class":643},[617,40427,685],{"class":622},[617,40429,40430,40432,40434,40436,40438,40440,40442,40444],{"class":619,"line":688},[617,40431,657],{"class":656},[617,40433,660],{"class":622},[617,40435,18557],{"class":663},[617,40437,673],{"class":622},[617,40439,676],{"class":656},[617,40441,679],{"class":622},[617,40443,682],{"class":643},[617,40445,685],{"class":622},[617,40447,40448,40450,40452],{"class":619,"line":709},[617,40449,712],{"class":622},[617,40451,627],{"class":626},[617,40453,649],{"class":622},[617,40455,40456],{"class":619,"line":719},[617,40457,722],{"emptyLinePlaceholder":574},[617,40459,40460,40462,40464],{"class":619,"line":725},[617,40461,623],{"class":622},[617,40463,730],{"class":626},[617,40465,649],{"class":622},[617,40467,40468,40470,40472],{"class":619,"line":735},[617,40469,738],{"class":622},[617,40471,741],{"class":626},[617,40473,649],{"class":622},[617,40475,40476,40478,40480],{"class":619,"line":758},[617,40477,761],{"class":622},[617,40479,19264],{"class":626},[617,40481,649],{"class":622},[617,40483,40484,40486],{"class":619,"line":770},[617,40485,833],{"class":622},[617,40487,22846],{"class":626},[617,40489,40490,40492,40494,40496],{"class":619,"line":780},[617,40491,22856],{"class":630},[617,40493,637],{"class":622},[617,40495,640],{"class":622},[617,40497,38773],{"class":643},[617,40499,40500],{"class":619,"line":785},[617,40501,40502],{"class":643}," '/px.jpg',\n",[617,40504,40505],{"class":619,"line":807},[617,40506,40507],{"class":643}," '/nx.jpg',\n",[617,40509,40510],{"class":619,"line":611},[617,40511,40512],{"class":643}," '/py.jpg',\n",[617,40514,40515],{"class":619,"line":830},[617,40516,40517],{"class":643}," '/ny.jpg',\n",[617,40519,40520],{"class":619,"line":841},[617,40521,40522],{"class":643}," '/pz.jpg',\n",[617,40524,40525],{"class":619,"line":852},[617,40526,40527],{"class":643}," '/nz.jpg',\n",[617,40529,40530,40533],{"class":619,"line":862},[617,40531,40532],{"class":643}," ]",[617,40534,3111],{"class":622},[617,40536,40537],{"class":619,"line":612},[617,40538,8013],{"class":622},[617,40540,40541,40543,40545],{"class":619,"line":882},[617,40542,875],{"class":622},[617,40544,19264],{"class":626},[617,40546,649],{"class":622},[617,40548,40549,40551,40553],{"class":619,"line":892},[617,40550,885],{"class":622},[617,40552,741],{"class":626},[617,40554,649],{"class":622},[617,40556,40557,40559,40561],{"class":619,"line":2605},[617,40558,712],{"class":622},[617,40560,730],{"class":626},[617,40562,649],{"class":622},[594,40564,40565,40566,40569],{},"You can also pass the ",[598,40567,40568],{},".hdr"," file directly:",[606,40571,40573],{"className":608,"code":40572,"language":613,"meta":556,"style":556},"\u003CSuspense>\n \u003CEnvironment files=\"/sunset.hdr\" />\n\u003C/Suspense>\n",[598,40574,40575,40583,40588],{"__ignoreMap":556},[617,40576,40577,40579,40581],{"class":619,"line":557},[617,40578,623],{"class":622},[617,40580,19264],{"class":626},[617,40582,649],{"class":622},[617,40584,40585],{"class":619,"line":558},[617,40586,40587],{"class":663}," \u003CEnvironment files=\"/sunset.hdr\" />\n",[617,40589,40590,40592,40594],{"class":619,"line":688},[617,40591,712],{"class":622},[617,40593,19264],{"class":626},[617,40595,649],{"class":622},[594,40597,40598],{},[8215,40599],{"alt":355,"src":40600},"/cientos/envmaps.png",[484,40602,40604],{"id":40603},"texture-reference","Texture reference",[594,40606,16017,40607,1657,40609,38532],{},[598,40608,5874],{},[598,40610,40611],{},"\u003CEnvironment />",[606,40613,40616],{"className":608,"code":40614,"highlights":40615,"language":613,"meta":556,"style":556},"\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",[709,725,770,830,862],[598,40617,40618,40638,40656,40660,40674,40678,40694,40708,40714,40723,40727,40735,40754,40762,40771,40790,40798],{"__ignoreMap":556},[617,40619,40620,40622,40624,40626,40628,40630,40632,40634,40636],{"class":619,"line":557},[617,40621,623],{"class":622},[617,40623,627],{"class":626},[617,40625,631],{"class":630},[617,40627,634],{"class":630},[617,40629,637],{"class":622},[617,40631,640],{"class":622},[617,40633,644],{"class":643},[617,40635,640],{"class":622},[617,40637,649],{"class":622},[617,40639,40640,40642,40644,40646,40648,40650,40652,40654],{"class":619,"line":558},[617,40641,657],{"class":656},[617,40643,660],{"class":622},[617,40645,18557],{"class":663},[617,40647,673],{"class":622},[617,40649,676],{"class":656},[617,40651,679],{"class":622},[617,40653,682],{"class":643},[617,40655,685],{"class":622},[617,40657,40658],{"class":619,"line":688},[617,40659,722],{"emptyLinePlaceholder":574},[617,40661,40663,40665,40668,40670,40672],{"class":40662,"line":709},[619,653],[617,40664,2395],{"class":630},[617,40666,40667],{"class":663}," environmentRef ",[617,40669,637],{"class":622},[617,40671,3478],{"class":2414},[617,40673,6515],{"class":663},[617,40675,40676],{"class":619,"line":719},[617,40677,722],{"emptyLinePlaceholder":574},[617,40679,40681,40683,40686,40688,40690,40692],{"class":40680,"line":725},[619,653],[617,40682,10239],{"class":2414},[617,40684,40685],{"class":663},"(environmentRef",[617,40687,667],{"class":622},[617,40689,17676],{"class":6818},[617,40691,3657],{"class":630},[617,40693,1184],{"class":622},[617,40695,40696,40698,40700,40702,40704,40706],{"class":619,"line":735},[617,40697,6834],{"class":663},[617,40699,1126],{"class":622},[617,40701,6839],{"class":2414},[617,40703,2417],{"class":626},[617,40705,2697],{"class":663},[617,40707,2428],{"class":626},[617,40709,40710,40712],{"class":619,"line":758},[617,40711,2408],{"class":622},[617,40713,2428],{"class":663},[617,40715,40717,40719,40721],{"class":40716,"line":770},[619,653],[617,40718,712],{"class":622},[617,40720,627],{"class":626},[617,40722,649],{"class":622},[617,40724,40725],{"class":619,"line":780},[617,40726,722],{"emptyLinePlaceholder":574},[617,40728,40729,40731,40733],{"class":619,"line":785},[617,40730,623],{"class":622},[617,40732,730],{"class":626},[617,40734,649],{"class":622},[617,40736,40737,40739,40741,40743,40745,40747,40750,40752],{"class":619,"line":807},[617,40738,738],{"class":622},[617,40740,355],{"class":626},[617,40742,3852],{"class":630},[617,40744,637],{"class":622},[617,40746,640],{"class":622},[617,40748,40749],{"class":643},"environmentRef",[617,40751,640],{"class":622},[617,40753,767],{"class":622},[617,40755,40756,40758,40760],{"class":619,"line":611},[617,40757,738],{"class":622},[617,40759,836],{"class":626},[617,40761,649],{"class":622},[617,40763,40765,40767,40769],{"class":40764,"line":830},[619,653],[617,40766,761],{"class":622},[617,40768,3938],{"class":626},[617,40770,767],{"class":622},[617,40772,40773,40775,40777,40780,40782,40784,40786,40788],{"class":619,"line":841},[617,40774,761],{"class":622},[617,40776,2666],{"class":626},[617,40778,40779],{"class":630}," :env-map",[617,40781,637],{"class":622},[617,40783,640],{"class":622},[617,40785,26670],{"class":643},[617,40787,640],{"class":622},[617,40789,767],{"class":622},[617,40791,40792,40794,40796],{"class":619,"line":852},[617,40793,885],{"class":622},[617,40795,836],{"class":626},[617,40797,649],{"class":622},[617,40799,40801,40803,40805],{"class":40800,"line":862},[619,653],[617,40802,712],{"class":622},[617,40804,730],{"class":626},[617,40806,649],{"class":622},[484,40808,40810],{"id":40809},"presets","Presets",[594,40812,40813,40814,2007],{},"You can use one of the available presets by passing the ",[598,40815,40816],{},"preset",[606,40818,40820],{"className":608,"code":40819,"language":613,"meta":556,"style":556},"\u003CEnvironment preset=\"city\" />\n",[598,40821,40822],{"__ignoreMap":556},[617,40823,40824,40826,40828,40830,40832,40834,40836,40838],{"class":619,"line":557},[617,40825,623],{"class":622},[617,40827,355],{"class":626},[617,40829,19276],{"class":630},[617,40831,637],{"class":622},[617,40833,640],{"class":622},[617,40835,26098],{"class":643},[617,40837,640],{"class":622},[617,40839,767],{"class":622},[4031,40841,40843],{"id":40842},"preset-quality","Preset quality",[594,40845,40846,40847,40854,40855,40858,40859,2007],{},"Presets are served from the ",[1120,40848,40851],{"href":40849,"rel":40850},"https://github.com/Tresjs/assets/tree/main/textures/hdr",[1124],[598,40852,40853],{},"Tresjs/assets"," CDN at ",[1649,40856,40857],{},"1K"," by default. For higher-fidelity scenes — reflective materials, large backgrounds, hero shots — you can opt into a higher-resolution variant with the ",[598,40860,40861],{},"quality",[606,40863,40865],{"className":608,"code":40864,"language":613,"meta":556,"style":556},"\u003CEnvironment preset=\"sunset\" quality=\"4k\" />\n",[598,40866,40867],{"__ignoreMap":556},[617,40868,40869,40871,40873,40875,40877,40879,40882,40884,40887,40889,40891,40894,40896],{"class":619,"line":557},[617,40870,623],{"class":622},[617,40872,355],{"class":626},[617,40874,19276],{"class":630},[617,40876,637],{"class":622},[617,40878,640],{"class":622},[617,40880,40881],{"class":643},"sunset",[617,40883,640],{"class":622},[617,40885,40886],{"class":630}," quality",[617,40888,637],{"class":622},[617,40890,640],{"class":622},[617,40892,40893],{"class":643},"4k",[617,40895,640],{"class":622},[617,40897,767],{"class":622},[594,40899,40900,40901,40904,40905,1652,40908,1126],{},"Available tiers: ",[598,40902,40903],{},"'1k'"," (default), ",[598,40906,40907],{},"'2k'",[598,40909,40910],{},"'4k'",[22315,40912,40913],{},[594,40914,40915,40916,40919,40920,3316,40922,40924],{},"Higher tiers are significantly larger: ",[1649,40917,40918],{},"4K HDRs are ≈30–60MB"," versus ≈1–3MB at 1K. Use ",[598,40921,40907],{},[598,40923,40910],{}," only when you need the extra detail, and prefer lazy-loading for large backgrounds.",[594,40926,2756,40927,40929,40930,40932,40933,3316,40936,40938,40939,40941],{},[598,40928,40861],{}," prop only applies when ",[598,40931,40816],{}," is set — it is ignored when loading via ",[598,40934,40935],{},"files",[598,40937,15784],{},". An unsupported value falls back to ",[598,40940,40903],{}," with a console warning.",[22315,40943,40944],{},[594,40945,40946,40955,40956,40958,40959,40962,40963,40965,40966,40968,40969,40971,40972,40974],{},[1649,40947,40948,40950,40951,40954],{},[598,40949,40861],{}," has no visible effect when you pass ",[1120,40952,40953],{"href":364},"Lightformers"," (or any children)."," With children present, ",[598,40957,26667],{}," bakes the environment and background into a ",[598,40960,40961],{},"WebGLCubeRenderTarget"," sized by the ",[598,40964,25650],{}," prop (default ",[598,40967,25658],{},"), so a high-res preset gets downsampled to that cube — the background will look pixelated regardless of ",[598,40970,40861],{},". For a sharp high-res background, either omit the children or raise ",[598,40973,25650],{}," (a cube big enough to match 4K is expensive to render each frame).",[484,40976,40978],{"id":40977},"environment-rotation","Environment Rotation",[594,40980,40981],{},"The environment component supports both background and environment rotation. You can control them independently or sync them together:",[606,40983,40985],{"className":608,"code":40984,"language":613,"meta":556,"style":556},"\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",[598,40986,40987,40995,41001,41014,41027,41041,41055,41059],{"__ignoreMap":556},[617,40988,40989,40991,40993],{"class":619,"line":557},[617,40990,623],{"class":622},[617,40992,730],{"class":626},[617,40994,649],{"class":622},[617,40996,40997,40999],{"class":619,"line":558},[617,40998,738],{"class":622},[617,41000,22846],{"class":626},[617,41002,41003,41006,41008,41010,41012],{"class":619,"line":688},[617,41004,41005],{"class":630}," preset",[617,41007,637],{"class":622},[617,41009,640],{"class":622},[617,41011,40881],{"class":643},[617,41013,3111],{"class":622},[617,41015,41016,41019,41021,41023,41025],{"class":619,"line":709},[617,41017,41018],{"class":630}," :background",[617,41020,637],{"class":622},[617,41022,640],{"class":622},[617,41024,941],{"class":643},[617,41026,3111],{"class":622},[617,41028,41029,41032,41034,41036,41039],{"class":619,"line":719},[617,41030,41031],{"class":630}," :background-rotation",[617,41033,637],{"class":622},[617,41035,640],{"class":622},[617,41037,41038],{"class":643},"[0, Math.PI / 2, 0]",[617,41040,3111],{"class":622},[617,41042,41043,41046,41048,41050,41053],{"class":619,"line":725},[617,41044,41045],{"class":630}," :environment-rotation",[617,41047,637],{"class":622},[617,41049,640],{"class":622},[617,41051,41052],{"class":643},"[0, Math.PI / 4, 0]",[617,41054,3111],{"class":622},[617,41056,41057],{"class":619,"line":735},[617,41058,12045],{"class":622},[617,41060,41061,41063,41065],{"class":619,"line":758},[617,41062,712],{"class":622},[617,41064,730],{"class":626},[617,41066,649],{"class":622},[4031,41068,41070],{"id":41069},"syncing-rotations","Syncing Rotations",[594,41072,41073,41074,2007],{},"You can sync the environment rotation with the background rotation using the ",[598,41075,41076],{},"syncMaterials",[606,41078,41080],{"className":608,"code":41079,"language":613,"meta":556,"style":556},"\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",[598,41081,41082,41090,41096,41108,41120,41133,41145,41149],{"__ignoreMap":556},[617,41083,41084,41086,41088],{"class":619,"line":557},[617,41085,623],{"class":622},[617,41087,730],{"class":626},[617,41089,649],{"class":622},[617,41091,41092,41094],{"class":619,"line":558},[617,41093,738],{"class":622},[617,41095,22846],{"class":626},[617,41097,41098,41100,41102,41104,41106],{"class":619,"line":688},[617,41099,41005],{"class":630},[617,41101,637],{"class":622},[617,41103,640],{"class":622},[617,41105,40881],{"class":643},[617,41107,3111],{"class":622},[617,41109,41110,41112,41114,41116,41118],{"class":619,"line":709},[617,41111,41018],{"class":630},[617,41113,637],{"class":622},[617,41115,640],{"class":622},[617,41117,941],{"class":643},[617,41119,3111],{"class":622},[617,41121,41122,41125,41127,41129,41131],{"class":619,"line":719},[617,41123,41124],{"class":630}," :sync-materials",[617,41126,637],{"class":622},[617,41128,640],{"class":622},[617,41130,941],{"class":643},[617,41132,3111],{"class":622},[617,41134,41135,41137,41139,41141,41143],{"class":619,"line":725},[617,41136,41031],{"class":630},[617,41138,637],{"class":622},[617,41140,640],{"class":622},[617,41142,41038],{"class":643},[617,41144,3111],{"class":622},[617,41146,41147],{"class":619,"line":735},[617,41148,12045],{"class":622},[617,41150,41151,41153,41155],{"class":619,"line":758},[617,41152,712],{"class":622},[617,41154,730],{"class":626},[617,41156,649],{"class":622},[594,41158,4280,41159,41161],{},[598,41160,41076],{}," is enabled:",[2193,41163,41164,41167,41170],{},[2196,41165,41166],{},"The environment rotation will automatically match the background rotation",[2196,41168,41169],{},"All materials in the scene will update to reflect the new rotation",[2196,41171,41172],{},"This ensures visual consistency between the background and environment reflections",[484,41174,902],{"id":901},[907,41176,41177,41187],{},[910,41178,41179],{},[913,41180,41181,41183,41185],{},[916,41182,918],{"align":977},[916,41184,921],{"align":977},[916,41186,924],{},[926,41188,41189,41202,41215,41235,41250,41261,41274,41299,41310,41321,41333,41344,41356,41368,41383,41397],{},[913,41190,41191,41195,41198],{},[931,41192,41193],{"align":977},[598,41194,40935],{},[931,41196,41197],{"align":977},"Array of 6 urls to images, one for each side of the CubeTexture, or an HDR file",[931,41199,41200],{},[598,41201,1159],{},[913,41203,41204,41208,41211],{},[931,41205,41206],{"align":977},[598,41207,15784],{},[931,41209,41210],{"align":977},"Path to the environment map files",[931,41212,41213],{},[598,41214,1159],{},[913,41216,41217,41222,41225],{},[931,41218,41219],{"align":977},[598,41220,41221],{},"encoding",[931,41223,41224],{"align":977},"Encoding of the environment map",[931,41226,41227,41230,41231,41234],{},[598,41228,41229],{},"SRGBColorSpace"," for array files, ",[598,41232,41233],{},"LinearEncoding"," for single texture",[913,41236,41237,41241,41246],{},[931,41238,41239],{"align":977},[598,41240,26578],{},[931,41242,938,41243,41245],{"align":977},[598,41244,941],{},", the environment map will be used as the scene background",[931,41247,41248],{},[598,41249,951],{},[913,41251,41252,41256,41259],{},[931,41253,41254],{"align":977},[598,41255,37651],{},[931,41257,41258],{"align":977},"Blur factor between 0 and 1 (only works with three 0.146 and up)",[931,41260,945],{},[913,41262,41263,41267,41270],{},[931,41264,41265],{"align":977},[598,41266,40816],{},[931,41268,41269],{"align":977},"Preset environment map",[931,41271,41272],{},[598,41273,1159],{},[913,41275,41276,41280,41295],{},[931,41277,41278],{"align":977},[598,41279,40861],{},[931,41281,41282,41283,12090,41286,12090,41289,41291,41292,41294],{"align":977},"Resolution variant of the preset HDR (",[598,41284,41285],{},"1k",[598,41287,41288],{},"2k",[598,41290,40893],{},"). Only applies when ",[598,41293,40816],{}," is set",[931,41296,41297],{},[598,41298,41285],{},[913,41300,41301,41305,41308],{},[931,41302,41303],{"align":977},[598,41304,25650],{},[931,41306,41307],{"align":977},"The resolution of the WebGLCubeRenderTarget",[931,41309,25658],{},[913,41311,41312,41316,41319],{},[931,41313,41314],{"align":977},[598,41315,39913],{},[931,41317,41318],{"align":977},"The near of the CubeCamera",[931,41320,1854],{},[913,41322,41323,41327,41330],{},[931,41324,41325],{"align":977},[598,41326,37737],{},[931,41328,41329],{"align":977},"The far of the CubeCamera",[931,41331,41332],{},"1000",[913,41334,41335,41339,41342],{},[931,41336,41337],{"align":977},[598,41338,36210],{},[931,41340,41341],{"align":977},"The frames of the cubeCamera.update",[931,41343,11564],{},[913,41345,41346,41351,41354],{},[931,41347,41348],{"align":977},[598,41349,41350],{},"backgroundIntensity",[931,41352,41353],{"align":977},"Intensity of the background",[931,41355,1854],{},[913,41357,41358,41363,41366],{},[931,41359,41360],{"align":977},[598,41361,41362],{},"environmentIntensity",[931,41364,41365],{"align":977},"Intensity of the environment",[931,41367,1854],{},[913,41369,41370,41375,41378],{},[931,41371,41372],{"align":977},[598,41373,41374],{},"backgroundRotation",[931,41376,41377],{"align":977},"Rotation of the background (in radians)",[931,41379,41380],{},[617,41381,41382],{},"0, 0, 0",[913,41384,41385,41390,41393],{},[931,41386,41387],{"align":977},[598,41388,41389],{},"environmentRotation",[931,41391,41392],{"align":977},"Rotation of the environment (in radians)",[931,41394,41395],{},[617,41396,41382],{},[913,41398,41399,41403,41406],{},[931,41400,41401],{"align":977},[598,41402,41076],{},[931,41404,41405],{"align":977},"If true, environment rotation will sync with background rotation",[931,41407,951],{},[4031,41409,40810],{"id":41410},"presets-1",[606,41412,41415],{"className":41413,"code":41414,"language":27337},[27335],"sunset\nstudio\ncity\numbrellas\nnight\nforest\nsnow\ndawn\nhangar\nurban\nmodern\nshangai\n",[598,41416,41414],{"__ignoreMap":556},[1307,41418,41419],{},"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}",{"title":556,"searchDepth":557,"depth":558,"links":41421},[41422,41423,41424,41427,41430],{"id":604,"depth":558,"text":15},{"id":40603,"depth":558,"text":40604},{"id":40809,"depth":558,"text":40810,"children":41425},[41426],{"id":40842,"depth":688,"text":40843},{"id":40977,"depth":558,"text":40978,"children":41428},[41429],{"id":41069,"depth":688,"text":41070},{"id":901,"depth":558,"text":902,"children":41431},[41432],{"id":41410,"depth":688,"text":40810},"Automatically sets up a global cubemap for scene environment and background.",{},{"title":355,"description":41433},"Jmd9cUvs-xIbV-RK7ZZXFZUkOqGMazbMRyhSpIpQ_LY",{"id":41438,"title":359,"body":41439,"description":42022,"extension":571,"links":572,"meta":42023,"navigation":574,"path":360,"seo":42024,"stem":361,"__hash__":42025},"docs/2.api/8.staging/2.use-environment.md",{"type":481,"value":41440,"toc":42018},[41441,41445,41454,41463,41465,41470,41672,41677,41710,41715,41799,41801,42016],[2275,41442,41443],{},[40365,41444],{},[594,41446,41447,41449,41450,40373,41452,1126],{},[598,41448,359],{}," composable that automatically sets up a global cubemap, which affects the default ",[598,41451,40372],{},[598,41453,40376],{},[594,41455,41456,41457,41462],{},"It uses the ",[1120,41458,41461],{"href":41459,"rel":41460},"https://threejs.org/docs/#api/en/loaders/CubeTextureLoader",[1124],"CubeTextureLoader"," to load the cubemap",[484,41464,15],{"id":604},[3179,41466,41467],{},[594,41468,41469],{},"UseEnvironment needs to be wrapped by a Suspense component",[606,41471,41473],{"className":608,"code":41472,"language":613,"meta":556,"style":556},"\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",[598,41474,41475,41495,41514,41533,41537,41553,41562,41574,41585,41596,41607,41618,41629,41635,41647,41658,41664],{"__ignoreMap":556},[617,41476,41477,41479,41481,41483,41485,41487,41489,41491,41493],{"class":619,"line":557},[617,41478,623],{"class":622},[617,41480,627],{"class":626},[617,41482,631],{"class":630},[617,41484,634],{"class":630},[617,41486,637],{"class":622},[617,41488,640],{"class":622},[617,41490,644],{"class":643},[617,41492,640],{"class":622},[617,41494,649],{"class":622},[617,41496,41497,41499,41501,41504,41506,41508,41510,41512],{"class":619,"line":558},[617,41498,657],{"class":656},[617,41500,660],{"class":622},[617,41502,41503],{"class":663}," useEnvironment",[617,41505,673],{"class":622},[617,41507,676],{"class":656},[617,41509,679],{"class":622},[617,41511,682],{"class":643},[617,41513,685],{"class":622},[617,41515,41516,41518,41520,41523,41525,41527,41529,41531],{"class":619,"line":688},[617,41517,657],{"class":656},[617,41519,660],{"class":622},[617,41521,41522],{"class":663}," SRGBColorSpace",[617,41524,673],{"class":622},[617,41526,676],{"class":656},[617,41528,679],{"class":622},[617,41530,4606],{"class":643},[617,41532,685],{"class":622},[617,41534,41535],{"class":619,"line":709},[617,41536,722],{"emptyLinePlaceholder":574},[617,41538,41539,41541,41543,41545,41547,41549,41551],{"class":619,"line":719},[617,41540,2395],{"class":630},[617,41542,2405],{"class":663},[617,41544,637],{"class":622},[617,41546,22597],{"class":656},[617,41548,41503],{"class":2414},[617,41550,2417],{"class":663},[617,41552,3240],{"class":622},[617,41554,41555,41558,41560],{"class":619,"line":725},[617,41556,41557],{"class":626}," files",[617,41559,1198],{"class":622},[617,41561,18312],{"class":663},[617,41563,41564,41567,41570,41572],{"class":619,"line":735},[617,41565,41566],{"class":622}," '",[617,41568,41569],{"class":643},"/textures/environmentMaps/0/px.jpg",[617,41571,2420],{"class":622},[617,41573,2468],{"class":622},[617,41575,41576,41578,41581,41583],{"class":619,"line":758},[617,41577,41566],{"class":622},[617,41579,41580],{"class":643},"/textures/environmentMaps/0/nx.jpg",[617,41582,2420],{"class":622},[617,41584,2468],{"class":622},[617,41586,41587,41589,41592,41594],{"class":619,"line":770},[617,41588,41566],{"class":622},[617,41590,41591],{"class":643},"/textures/environmentMaps/0/py.jpg",[617,41593,2420],{"class":622},[617,41595,2468],{"class":622},[617,41597,41598,41600,41603,41605],{"class":619,"line":780},[617,41599,41566],{"class":622},[617,41601,41602],{"class":643},"/textures/environmentMaps/0/ny.jpg",[617,41604,2420],{"class":622},[617,41606,2468],{"class":622},[617,41608,41609,41611,41614,41616],{"class":619,"line":785},[617,41610,41566],{"class":622},[617,41612,41613],{"class":643},"/textures/environmentMaps/0/pz.jpg",[617,41615,2420],{"class":622},[617,41617,2468],{"class":622},[617,41619,41620,41622,41625,41627],{"class":619,"line":807},[617,41621,41566],{"class":622},[617,41623,41624],{"class":643},"/textures/environmentMaps/0/nz.jpg",[617,41626,2420],{"class":622},[617,41628,2468],{"class":622},[617,41630,41631,41633],{"class":619,"line":611},[617,41632,38830],{"class":663},[617,41634,2468],{"class":622},[617,41636,41637,41640,41642,41645],{"class":619,"line":830},[617,41638,41639],{"class":626}," path",[617,41641,1198],{"class":622},[617,41643,41644],{"class":622}," ''",[617,41646,2468],{"class":622},[617,41648,41649,41652,41654,41656],{"class":619,"line":841},[617,41650,41651],{"class":626}," encoding",[617,41653,1198],{"class":622},[617,41655,41522],{"class":663},[617,41657,2468],{"class":622},[617,41659,41660,41662],{"class":619,"line":852},[617,41661,2408],{"class":622},[617,41663,2428],{"class":663},[617,41665,41666,41668,41670],{"class":619,"line":862},[617,41667,712],{"class":622},[617,41669,627],{"class":626},[617,41671,649],{"class":622},[594,41673,22604,41674,41676],{},[598,41675,2697],{}," in your scene:",[606,41678,41681],{"className":608,"code":41679,"highlights":41680,"language":613,"meta":556,"style":556},"\u003CTresMesh>\n \u003CTresSphereGeometry />\n \u003CTresMeshStandardMaterial :map=\"texture\" />\n\u003C/TresMesh>\n",[688],[598,41682,41683,41691,41696,41702],{"__ignoreMap":556},[617,41684,41685,41687,41689],{"class":619,"line":557},[617,41686,623],{"class":622},[617,41688,836],{"class":626},[617,41690,649],{"class":622},[617,41692,41693],{"class":619,"line":558},[617,41694,41695],{"class":663}," \u003CTresSphereGeometry />\n",[617,41697,41699],{"class":41698,"line":688},[619,653],[617,41700,41701],{"class":663}," \u003CTresMeshStandardMaterial :map=\"texture\" />\n",[617,41703,41704,41706,41708],{"class":619,"line":709},[617,41705,712],{"class":622},[617,41707,836],{"class":626},[617,41709,649],{"class":622},[594,41711,40565,41712,41714],{},[598,41713,40568],{}," file directly",[606,41716,41718],{"className":1166,"code":41717,"language":644,"meta":556,"style":556},"import { useEnvironment } from '@tresjs/cientos'\n\nconst texture = await useEnvironment({\n files: '/sunset.hdr',\n path: '',\n encoding: SRGBColorSpace,\n})\n",[598,41719,41720,41738,41742,41758,41773,41783,41793],{"__ignoreMap":556},[617,41721,41722,41724,41726,41728,41730,41732,41734,41736],{"class":619,"line":557},[617,41723,657],{"class":656},[617,41725,660],{"class":622},[617,41727,41503],{"class":663},[617,41729,673],{"class":622},[617,41731,676],{"class":656},[617,41733,679],{"class":622},[617,41735,682],{"class":643},[617,41737,685],{"class":622},[617,41739,41740],{"class":619,"line":558},[617,41741,722],{"emptyLinePlaceholder":574},[617,41743,41744,41746,41748,41750,41752,41754,41756],{"class":619,"line":688},[617,41745,2395],{"class":630},[617,41747,2405],{"class":663},[617,41749,637],{"class":622},[617,41751,22597],{"class":656},[617,41753,41503],{"class":2414},[617,41755,2417],{"class":663},[617,41757,3240],{"class":622},[617,41759,41760,41762,41764,41766,41769,41771],{"class":619,"line":709},[617,41761,41557],{"class":626},[617,41763,1198],{"class":622},[617,41765,679],{"class":622},[617,41767,41768],{"class":643},"/sunset.hdr",[617,41770,2420],{"class":622},[617,41772,2468],{"class":622},[617,41774,41775,41777,41779,41781],{"class":619,"line":719},[617,41776,41639],{"class":626},[617,41778,1198],{"class":622},[617,41780,41644],{"class":622},[617,41782,2468],{"class":622},[617,41784,41785,41787,41789,41791],{"class":619,"line":725},[617,41786,41651],{"class":626},[617,41788,1198],{"class":622},[617,41790,41522],{"class":663},[617,41792,2468],{"class":622},[617,41794,41795,41797],{"class":619,"line":735},[617,41796,2408],{"class":622},[617,41798,2428],{"class":663},[484,41800,12073],{"id":15476},[907,41802,41803,41815],{},[910,41804,41805],{},[913,41806,41807,41809,41811,41813],{},[916,41808,8069],{"align":977},[916,41810,5949],{},[916,41812,924],{},[916,41814,921],{},[926,41816,41817,41834,41851,41873,41892,41909,41926,41947,41964,41981,41999],{},[913,41818,41819,41823,41827,41831],{},[931,41820,41821],{"align":977},[1649,41822,40935],{},[931,41824,41825],{},[598,41826,22973],{},[931,41828,41829],{},[598,41830,1159],{},[931,41832,41833],{},"Array of 6 urls to images, one for each side of the CubeTexture. or and HDR",[913,41835,41836,41840,41844,41848],{},[931,41837,41838],{"align":977},[1649,41839,15784],{},[931,41841,41842],{},[598,41843,15441],{},[931,41845,41846],{},[598,41847,951],{},[931,41849,41850],{},"Path to the environment map files.",[913,41852,41853,41857,41862,41870],{},[931,41854,41855],{"align":977},[1649,41856,41221],{},[931,41858,41859],{},[598,41860,41861],{},"Encoding",[931,41863,41864,41866,41867,41869],{},[598,41865,41229],{}," for an array of files and ",[598,41868,41233],{}," for a single texture",[931,41871,41872],{},"Encoding of the environment map.",[913,41874,41875,41879,41883,41887],{},[931,41876,41877],{"align":977},[1649,41878,26578],{},[931,41880,41881],{},[598,41882,15441],{},[931,41884,41885],{},[598,41886,951],{},[931,41888,938,41889,41891],{},[598,41890,941],{}," the texture will be used as the scene background.",[913,41893,41894,41898,41902,41906],{},[931,41895,41896],{"align":977},[1649,41897,37651],{},[931,41899,41900],{},[598,41901,5332],{},[931,41903,41904],{},[598,41905,945],{},[931,41907,41908],{},"Blur factor between 0 and 1. (only works with three 0.146 and up)",[913,41910,41911,41915,41919,41923],{},[931,41912,41913],{"align":977},[1649,41914,40816],{},[931,41916,41917],{},[598,41918,3552],{},[931,41920,41921],{},[598,41922,1159],{},[931,41924,41925],{},"Preset environment map.",[913,41927,41928,41932,41937,41941],{},[931,41929,41930],{"align":977},[1649,41931,40861],{},[931,41933,41934],{},[598,41935,41936],{},"'1k' | '2k' | '4k'",[931,41938,41939],{},[598,41940,40903],{},[931,41942,41943,41944,41946],{},"Resolution variant of the preset HDR. Only applies when ",[598,41945,40816],{}," is set. 4K ≈ 30–60MB.",[913,41948,41949,41953,41957,41961],{},[931,41950,41951],{"align":977},[1649,41952,41350],{},[931,41954,41955],{},[598,41956,5332],{},[931,41958,41959],{},[598,41960,1854],{},[931,41962,41963],{},"Intensity of the background.",[913,41965,41966,41970,41974,41978],{},[931,41967,41968],{"align":977},[1649,41969,41362],{},[931,41971,41972],{},[598,41973,5332],{},[931,41975,41976],{},[598,41977,1854],{},[931,41979,41980],{},"Intensity of the environment.",[913,41982,41983,41987,41992,41996],{},[931,41984,41985],{"align":977},[1649,41986,41374],{},[931,41988,41989],{},[598,41990,41991],{},"VectorFlexibleParams",[931,41993,41994],{},[598,41995,8378],{},[931,41997,41998],{},"Rotation of the background.",[913,42000,42001,42005,42009,42013],{},[931,42002,42003],{"align":977},[1649,42004,41389],{},[931,42006,42007],{},[598,42008,41991],{},[931,42010,42011],{},[598,42012,8378],{},[931,42014,42015],{},"Rotation of the environment.",[1307,42017,23985],{},{"title":556,"searchDepth":557,"depth":558,"links":42019},[42020,42021],{"id":604,"depth":558,"text":15},{"id":15476,"depth":558,"text":12073},"Composable that sets up a global cubemap for scene environment and background.",{},{"title":359,"description":42022},"WFsmQOwv-yc23voKTzWwYBxnk1QVtMW5VaFbmbCf-8c",{"id":42027,"title":363,"body":42028,"description":42277,"extension":571,"links":572,"meta":42278,"navigation":574,"path":364,"seo":42279,"stem":365,"__hash__":42280},"docs/2.api/8.staging/3.lightformer.md",{"type":481,"value":42029,"toc":42274},[42030,42035,42041,42195,42197,42200,42272],[588,42031,42032],{},[42033,42034],"staging-lightformer",{},[594,42036,42037,42038,42040],{},"You can incorporate ",[598,42039,363],{}," into the environment just like a slot.",[606,42042,42044],{"className":608,"code":42043,"language":613,"meta":556,"style":556},"\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",[598,42045,42046,42056,42081,42089,42093,42101,42109,42138,42179,42187],{"__ignoreMap":556},[617,42047,42048,42050,42052,42054],{"class":619,"line":557},[617,42049,623],{"class":622},[617,42051,627],{"class":626},[617,42053,631],{"class":630},[617,42055,649],{"class":622},[617,42057,42058,42060,42062,42065,42067,42070,42072,42074,42076,42079],{"class":619,"line":558},[617,42059,657],{"class":656},[617,42061,660],{"class":622},[617,42063,42064],{"class":663}," Enviroment",[617,42066,667],{"class":622},[617,42068,42069],{"class":663}," LightFormer",[617,42071,673],{"class":622},[617,42073,676],{"class":656},[617,42075,679],{"class":622},[617,42077,42078],{"class":643},"@tres/cientos",[617,42080,685],{"class":622},[617,42082,42083,42085,42087],{"class":619,"line":688},[617,42084,712],{"class":622},[617,42086,627],{"class":626},[617,42088,649],{"class":622},[617,42090,42091],{"class":619,"line":709},[617,42092,722],{"emptyLinePlaceholder":574},[617,42094,42095,42097,42099],{"class":619,"line":719},[617,42096,623],{"class":622},[617,42098,730],{"class":626},[617,42100,649],{"class":622},[617,42102,42103,42105,42107],{"class":619,"line":725},[617,42104,738],{"class":622},[617,42106,355],{"class":626},[617,42108,649],{"class":622},[617,42110,42111,42113,42115,42117,42119,42121,42123,42125,42127,42129,42131,42134,42136],{"class":619,"line":735},[617,42112,761],{"class":622},[617,42114,363],{"class":626},[617,42116,1847],{"class":630},[617,42118,637],{"class":622},[617,42120,640],{"class":622},[617,42122,2531],{"class":643},[617,42124,640],{"class":622},[617,42126,1465],{"class":630},[617,42128,637],{"class":622},[617,42130,640],{"class":622},[617,42132,42133],{"class":643},"[0, 5, -9]",[617,42135,640],{"class":622},[617,42137,767],{"class":622},[617,42139,42140,42142,42144,42146,42148,42150,42153,42155,42158,42160,42162,42164,42166,42168,42170,42172,42175,42177],{"class":619,"line":758},[617,42141,761],{"class":622},[617,42143,363],{"class":626},[617,42145,676],{"class":630},[617,42147,637],{"class":622},[617,42149,640],{"class":622},[617,42151,42152],{"class":643},"ring",[617,42154,640],{"class":622},[617,42156,42157],{"class":630}," :rotation-y",[617,42159,637],{"class":622},[617,42161,640],{"class":622},[617,42163,36839],{"class":643},[617,42165,640],{"class":622},[617,42167,793],{"class":630},[617,42169,637],{"class":622},[617,42171,640],{"class":622},[617,42173,42174],{"class":643},"[10, 10, 1]",[617,42176,640],{"class":622},[617,42178,767],{"class":622},[617,42180,42181,42183,42185],{"class":619,"line":770},[617,42182,885],{"class":622},[617,42184,355],{"class":626},[617,42186,649],{"class":622},[617,42188,42189,42191,42193],{"class":619,"line":780},[617,42190,712],{"class":622},[617,42192,730],{"class":626},[617,42194,649],{"class":622},[4031,42196,902],{"id":901},[594,42198,42199],{},"Lightformer inherits from mesh, and its extension parameters include:",[907,42201,42202,42212],{},[910,42203,42204],{},[913,42205,42206,42208,42210],{},[916,42207,918],{"align":977},[916,42209,921],{"align":977},[916,42211,924],{},[926,42213,42214,42235,42246,42260],{},[913,42215,42216,42220,42231],{},[931,42217,42218],{"align":977},[598,42219,15128],{},[931,42221,42222,1652,42225,1652,42227,42230],{"align":977},[598,42223,42224],{},"circle",[598,42226,42152],{},[598,42228,42229],{},"rect",", or any other Mesh type",[931,42232,42233],{},[598,42234,42229],{},[913,42236,42237,42241,42244],{},[931,42238,42239],{"align":977},[598,42240,2045],{},[931,42242,42243],{"align":977},"The intensity of the light",[931,42245,1854],{},[913,42247,42248,42252,42255],{},[931,42249,42250],{"align":977},[598,42251,7527],{},[931,42253,42254],{"align":977},"The color of the light",[931,42256,42257],{},[598,42258,42259],{},"0xffffff",[913,42261,42262,42266,42269],{},[931,42263,42264],{"align":977},[598,42265,27364],{},[931,42267,42268],{"align":977},"The arguments of the Geometry",[931,42270,42271],{},"When using other geometries, set the corresponding arguments",[1307,42273,12427],{},{"title":556,"searchDepth":557,"depth":558,"links":42275},[42276],{"id":901,"depth":688,"text":902},"Addon for environment component that provided you custom lights.",{},{"title":363,"description":42277},"C3TURFuGqCgHegN3UPXdHHYIKEDi-0ACd5UIMvQeHcQ",{"id":42282,"title":367,"body":42283,"description":42603,"extension":571,"links":572,"meta":42604,"navigation":574,"path":368,"seo":42605,"stem":369,"__hash__":42606},"docs/2.api/8.staging/backdrop.md",{"type":481,"value":42284,"toc":42599},[42285,42290,42298,42300,42461,42464,42541,42543,42597],[588,42286,42287],{},[42288,42289],"staging-backdrop",{},[594,42291,2756,42292,8223,42294,42297],{},[598,42293,7297],{},[598,42295,42296],{},"\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.",[484,42299,15],{"id":604},[606,42301,42304],{"className":608,"code":42302,"highlights":42303,"language":613,"meta":556,"style":556},"\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",[688,770],[598,42305,42306,42326,42344,42364,42372,42376,42384,42392,42410,42419,42427,42445,42453],{"__ignoreMap":556},[617,42307,42308,42310,42312,42314,42316,42318,42320,42322,42324],{"class":619,"line":557},[617,42309,623],{"class":622},[617,42311,627],{"class":626},[617,42313,631],{"class":630},[617,42315,634],{"class":630},[617,42317,637],{"class":622},[617,42319,640],{"class":622},[617,42321,644],{"class":643},[617,42323,640],{"class":622},[617,42325,649],{"class":622},[617,42327,42328,42330,42332,42334,42336,42338,42340,42342],{"class":619,"line":558},[617,42329,657],{"class":656},[617,42331,660],{"class":622},[617,42333,695],{"class":663},[617,42335,673],{"class":622},[617,42337,676],{"class":656},[617,42339,679],{"class":622},[617,42341,704],{"class":643},[617,42343,685],{"class":622},[617,42345,42347,42349,42351,42354,42356,42358,42360,42362],{"class":42346,"line":688},[619,653],[617,42348,657],{"class":656},[617,42350,660],{"class":622},[617,42352,42353],{"class":663}," Backdrop",[617,42355,673],{"class":622},[617,42357,676],{"class":656},[617,42359,679],{"class":622},[617,42361,682],{"class":643},[617,42363,685],{"class":622},[617,42365,42366,42368,42370],{"class":619,"line":709},[617,42367,712],{"class":622},[617,42369,627],{"class":626},[617,42371,649],{"class":622},[617,42373,42374],{"class":619,"line":719},[617,42375,722],{"emptyLinePlaceholder":574},[617,42377,42378,42380,42382],{"class":619,"line":725},[617,42379,623],{"class":622},[617,42381,730],{"class":626},[617,42383,649],{"class":622},[617,42385,42386,42388,42390],{"class":619,"line":735},[617,42387,738],{"class":622},[617,42389,741],{"class":626},[617,42391,649],{"class":622},[617,42393,42394,42396,42398,42400,42402,42404,42406,42408],{"class":619,"line":758},[617,42395,761],{"class":622},[617,42397,764],{"class":626},[617,42399,1465],{"class":630},[617,42401,637],{"class":622},[617,42403,640],{"class":622},[617,42405,39494],{"class":643},[617,42407,640],{"class":622},[617,42409,767],{"class":622},[617,42411,42413,42415,42417],{"class":42412,"line":770},[619,653],[617,42414,761],{"class":622},[617,42416,367],{"class":626},[617,42418,767],{"class":622},[617,42420,42421,42423,42425],{"class":619,"line":780},[617,42422,761],{"class":622},[617,42424,8436],{"class":626},[617,42426,767],{"class":622},[617,42428,42429,42431,42433,42435,42437,42439,42441,42443],{"class":619,"line":785},[617,42430,761],{"class":622},[617,42432,8455],{"class":626},[617,42434,1465],{"class":630},[617,42436,637],{"class":622},[617,42438,640],{"class":622},[617,42440,11412],{"class":643},[617,42442,640],{"class":622},[617,42444,767],{"class":622},[617,42446,42447,42449,42451],{"class":619,"line":807},[617,42448,885],{"class":622},[617,42450,741],{"class":626},[617,42452,649],{"class":622},[617,42454,42455,42457,42459],{"class":619,"line":611},[617,42456,712],{"class":622},[617,42458,730],{"class":626},[617,42460,649],{"class":622},[594,42462,42463],{},"Or with a custom material",[606,42465,42469],{"className":42466,"code":42467,"language":42468,"meta":556,"style":556},"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",[598,42470,42471,42503,42533],{"__ignoreMap":556},[617,42472,42473,42475,42477,42480,42482,42484,42486,42488,42491,42493,42495,42497,42499,42501],{"class":619,"line":557},[617,42474,623],{"class":622},[617,42476,367],{"class":626},[617,42478,42479],{"class":630}," :floor",[617,42481,637],{"class":622},[617,42483,640],{"class":622},[617,42485,26409],{"class":643},[617,42487,640],{"class":622},[617,42489,42490],{"class":630}," :segments",[617,42492,637],{"class":622},[617,42494,640],{"class":622},[617,42496,27807],{"class":643},[617,42498,640],{"class":622},[617,42500,39730],{"class":630},[617,42502,649],{"class":622},[617,42504,42505,42507,42510,42512,42514,42516,42518,42520,42523,42525,42527,42529,42531],{"class":619,"line":558},[617,42506,738],{"class":622},[617,42508,42509],{"class":626},"TresMeshPhysicalMaterial",[617,42511,2669],{"class":630},[617,42513,637],{"class":622},[617,42515,640],{"class":622},[617,42517,11377],{"class":643},[617,42519,640],{"class":622},[617,42521,42522],{"class":630}," :roughness",[617,42524,637],{"class":622},[617,42526,640],{"class":622},[617,42528,1854],{"class":643},[617,42530,640],{"class":622},[617,42532,767],{"class":622},[617,42534,42535,42537,42539],{"class":619,"line":688},[617,42536,712],{"class":622},[617,42538,367],{"class":626},[617,42540,649],{"class":622},[484,42542,902],{"id":901},[907,42544,42545,42557],{},[910,42546,42547],{},[913,42548,42549,42551,42553,42555],{},[916,42550,8069],{"align":977},[916,42552,5949],{"align":977},[916,42554,924],{},[916,42556,31074],{},[926,42558,42559,42573,42585],{},[913,42560,42561,42564,42566,42570],{},[931,42562,42563],{"align":977},"floor",[931,42565,5332],{"align":977},[931,42567,42568],{},[598,42569,11667],{},[931,42571,42572],{},"No",[913,42574,42575,42577,42579,42583],{},[931,42576,27797],{"align":977},[931,42578,5332],{"align":977},[931,42580,42581],{},[598,42582,27807],{},[931,42584,42572],{},[913,42586,42587,42589,42591,42595],{},[931,42588,16325],{"align":977},[931,42590,15441],{"align":977},[931,42592,42593],{},[598,42594,951],{},[931,42596,42572],{},[1307,42598,1624],{},{"title":556,"searchDepth":557,"depth":558,"links":42600},[42601,42602],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},"A curved plane studio backdrop for presentational purposes.",{},{"title":367,"description":42603},"H0D0nxhSUngurmG2CpnQ3kEOUzOJchm3LVO_M0_yMnI",{"id":42608,"title":371,"body":42609,"description":43201,"extension":571,"links":572,"meta":43202,"navigation":574,"path":372,"seo":43203,"stem":373,"__hash__":43204},"docs/2.api/8.staging/ocean.md",{"type":481,"value":42610,"toc":43193},[42611,42616,42631,42636,42638,42771,42775,42784,42787,42802,42806,42809,42970,42972,42978,43191],[588,42612,42613],{},[42614,42615],"staging-ocean",{},[594,42617,42618,42621,42622,1126],{},[598,42619,42620],{},"\u003COcean />"," is a wrapper for the ",[1120,42623,42626,42627,42630],{"href":42624,"rel":42625},"https://threejs.org/examples/?q=ocean#webgl_shaders_ocean",[1124],"Three.js ",[598,42628,42629],{},"Water"," add-on",[3179,42632,42633],{},[594,42634,42635],{},"Ocean comes with a default texture, so it needs to be wrapped in a Suspense component.",[484,42637,15],{"id":604},[606,42639,42642],{"className":608,"code":42640,"highlights":42641,"language":613,"meta":556,"style":556},"\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",[688,770],[598,42643,42644,42664,42682,42702,42710,42714,42722,42730,42738,42747,42755,42763],{"__ignoreMap":556},[617,42645,42646,42648,42650,42652,42654,42656,42658,42660,42662],{"class":619,"line":557},[617,42647,623],{"class":622},[617,42649,627],{"class":626},[617,42651,631],{"class":630},[617,42653,634],{"class":630},[617,42655,637],{"class":622},[617,42657,640],{"class":622},[617,42659,644],{"class":643},[617,42661,640],{"class":622},[617,42663,649],{"class":622},[617,42665,42666,42668,42670,42672,42674,42676,42678,42680],{"class":619,"line":558},[617,42667,657],{"class":656},[617,42669,660],{"class":622},[617,42671,695],{"class":663},[617,42673,673],{"class":622},[617,42675,676],{"class":656},[617,42677,679],{"class":622},[617,42679,704],{"class":643},[617,42681,685],{"class":622},[617,42683,42685,42687,42689,42692,42694,42696,42698,42700],{"class":42684,"line":688},[619,653],[617,42686,657],{"class":656},[617,42688,660],{"class":622},[617,42690,42691],{"class":663}," Ocean",[617,42693,673],{"class":622},[617,42695,676],{"class":656},[617,42697,679],{"class":622},[617,42699,682],{"class":643},[617,42701,685],{"class":622},[617,42703,42704,42706,42708],{"class":619,"line":709},[617,42705,712],{"class":622},[617,42707,627],{"class":626},[617,42709,649],{"class":622},[617,42711,42712],{"class":619,"line":719},[617,42713,722],{"emptyLinePlaceholder":574},[617,42715,42716,42718,42720],{"class":619,"line":725},[617,42717,623],{"class":622},[617,42719,730],{"class":626},[617,42721,649],{"class":622},[617,42723,42724,42726,42728],{"class":619,"line":735},[617,42725,738],{"class":622},[617,42727,741],{"class":626},[617,42729,649],{"class":622},[617,42731,42732,42734,42736],{"class":619,"line":758},[617,42733,761],{"class":622},[617,42735,19264],{"class":626},[617,42737,649],{"class":622},[617,42739,42741,42743,42745],{"class":42740,"line":770},[619,653],[617,42742,833],{"class":622},[617,42744,371],{"class":626},[617,42746,767],{"class":622},[617,42748,42749,42751,42753],{"class":619,"line":780},[617,42750,875],{"class":622},[617,42752,19264],{"class":626},[617,42754,649],{"class":622},[617,42756,42757,42759,42761],{"class":619,"line":785},[617,42758,885],{"class":622},[617,42760,741],{"class":626},[617,42762,649],{"class":622},[617,42764,42765,42767,42769],{"class":619,"line":807},[617,42766,712],{"class":622},[617,42768,730],{"class":626},[617,42770,649],{"class":622},[4031,42772,42774],{"id":42773},"sky","SKY",[594,42776,42777,42779,42780,42783],{},[598,42778,42620],{}," works hand in hand with the Sky component, detecting the position of the sun and reflecting on the water.\n(",[598,42781,42782],{},"\u003CSky />"," is not required for making this component work.)",[4031,42785,42786],{"id":37306},"Fog",[594,42788,2756,42789,42791,42792,5591,42796,42801],{},[598,42790,42620],{}," component also reacts when there's ",[1120,42793,42786],{"href":42794,"rel":42795},"https://threejs.org/docs/index.html?q=fog#api/en/scenes/Fog",[1124],[1120,42797,42800],{"href":42798,"rel":42799},"https://threejs.org/docs/index.html?q=fog#api/en/scenes/FogExp2",[1124],"FogExp2"," in your scene.",[484,42803,42805],{"id":42804},"custom-geometry","Custom Geometry",[594,42807,42808],{},"You can use custom geometry by adding it as a child.",[606,42810,42813],{"className":608,"code":42811,"highlights":42812,"language":613,"meta":556,"style":556},"\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",[688,770,780,785],[598,42814,42815,42835,42853,42872,42880,42884,42892,42900,42908,42917,42937,42946,42954,42962],{"__ignoreMap":556},[617,42816,42817,42819,42821,42823,42825,42827,42829,42831,42833],{"class":619,"line":557},[617,42818,623],{"class":622},[617,42820,627],{"class":626},[617,42822,631],{"class":630},[617,42824,634],{"class":630},[617,42826,637],{"class":622},[617,42828,640],{"class":622},[617,42830,644],{"class":643},[617,42832,640],{"class":622},[617,42834,649],{"class":622},[617,42836,42837,42839,42841,42843,42845,42847,42849,42851],{"class":619,"line":558},[617,42838,657],{"class":656},[617,42840,660],{"class":622},[617,42842,695],{"class":663},[617,42844,673],{"class":622},[617,42846,676],{"class":656},[617,42848,679],{"class":622},[617,42850,704],{"class":643},[617,42852,685],{"class":622},[617,42854,42856,42858,42860,42862,42864,42866,42868,42870],{"class":42855,"line":688},[619,653],[617,42857,657],{"class":656},[617,42859,660],{"class":622},[617,42861,42691],{"class":663},[617,42863,673],{"class":622},[617,42865,676],{"class":656},[617,42867,679],{"class":622},[617,42869,682],{"class":643},[617,42871,685],{"class":622},[617,42873,42874,42876,42878],{"class":619,"line":709},[617,42875,712],{"class":622},[617,42877,627],{"class":626},[617,42879,649],{"class":622},[617,42881,42882],{"class":619,"line":719},[617,42883,722],{"emptyLinePlaceholder":574},[617,42885,42886,42888,42890],{"class":619,"line":725},[617,42887,623],{"class":622},[617,42889,730],{"class":626},[617,42891,649],{"class":622},[617,42893,42894,42896,42898],{"class":619,"line":735},[617,42895,738],{"class":622},[617,42897,741],{"class":626},[617,42899,649],{"class":622},[617,42901,42902,42904,42906],{"class":619,"line":758},[617,42903,761],{"class":622},[617,42905,19264],{"class":626},[617,42907,649],{"class":622},[617,42909,42911,42913,42915],{"class":42910,"line":770},[619,653],[617,42912,833],{"class":622},[617,42914,371],{"class":626},[617,42916,649],{"class":622},[617,42918,42920,42922,42924,42926,42928,42930,42933,42935],{"class":42919,"line":780},[619,653],[617,42921,844],{"class":622},[617,42923,8890],{"class":626},[617,42925,1939],{"class":630},[617,42927,637],{"class":622},[617,42929,640],{"class":622},[617,42931,42932],{"class":643},"[50, 16]",[617,42934,640],{"class":622},[617,42936,767],{"class":622},[617,42938,42940,42942,42944],{"class":42939,"line":785},[619,653],[617,42941,865],{"class":622},[617,42943,371],{"class":626},[617,42945,649],{"class":622},[617,42947,42948,42950,42952],{"class":619,"line":807},[617,42949,875],{"class":622},[617,42951,19264],{"class":626},[617,42953,649],{"class":622},[617,42955,42956,42958,42960],{"class":619,"line":611},[617,42957,885],{"class":622},[617,42959,741],{"class":626},[617,42961,649],{"class":622},[617,42963,42964,42966,42968],{"class":619,"line":830},[617,42965,712],{"class":622},[617,42967,730],{"class":626},[617,42969,649],{"class":622},[484,42971,902],{"id":901},[42973,42974,42975],"prose-tip",{},[594,42976,42977],{},"Props marked with ✅ support reactive changes at runtime. Props marked with ❌ are only read at construction time and cannot be changed after the component is mounted.",[907,42979,42980,42993],{},[910,42981,42982],{},[913,42983,42984,42986,42988,42990],{},[916,42985,918],{"align":977},[916,42987,921],{"align":977},[916,42989,924],{},[916,42991,42992],{"align":26243},"Reactive",[926,42994,42995,43012,43028,43047,43064,43081,43098,43114,43129,43145,43161,43176],{},[913,42996,42997,43002,43005,43009],{},[931,42998,42999],{"align":977},[1649,43000,43001],{},"textureWidth",[931,43003,43004],{"align":977},"Width of the mirror texture",[931,43006,43007],{},[598,43008,26196],{},[931,43010,43011],{"align":26243},"❌",[913,43013,43014,43019,43022,43026],{},[931,43015,43016],{"align":977},[1649,43017,43018],{},"textureHeight",[931,43020,43021],{"align":977},"Height of the mirror texture",[931,43023,43024],{},[598,43025,26196],{},[931,43027,43011],{"align":26243},[913,43029,43030,43035,43038,43045],{},[931,43031,43032],{"align":977},[1649,43033,43034],{},"waterNormals",[931,43036,43037],{"align":977},"URL of the water normal texture",[931,43039,43040],{},[1120,43041,43044],{"href":43042,"rel":43043},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/water-normals/Water_1_M_Normal.jpg",[1124],"Water_1_M_Normal.jpg",[931,43046,43011],{"align":26243},[913,43048,43049,43054,43057,43062],{},[931,43050,43051],{"align":977},[1649,43052,43053],{},"sunDirection",[931,43055,43056],{"align":977},"Sun direction to be reflected on the water",[931,43058,43059],{},[598,43060,43061],{},"Vector3(0,0,0)",[931,43063,43011],{"align":26243},[913,43065,43066,43071,43074,43078],{},[931,43067,43068],{"align":977},[1649,43069,43070],{},"sunColor",[931,43072,43073],{"align":977},"Sun color to be reflected on the water",[931,43075,43076],{},[598,43077,42259],{},[931,43079,43080],{"align":26243},"✅",[913,43082,43083,43088,43091,43096],{},[931,43084,43085],{"align":977},[1649,43086,43087],{},"waterColor",[931,43089,43090],{"align":977},"Water color",[931,43092,43093],{},[598,43094,43095],{},"0x001e0f",[931,43097,43080],{"align":26243},[913,43099,43100,43104,43107,43112],{},[931,43101,43102],{"align":977},[1649,43103,26361],{},[931,43105,43106],{"align":977},"Distortion scale on reflected objects",[931,43108,43109],{},[598,43110,43111],{},"3.7",[931,43113,43080],{"align":26243},[913,43115,43116,43120,43123,43127],{},[931,43117,43118],{"align":977},[1649,43119,14703],{},[931,43121,43122],{"align":977},"Size of the water normals",[931,43124,43125],{},[598,43126,1854],{},[931,43128,43080],{"align":26243},[913,43130,43131,43136,43139,43143],{},[931,43132,43133],{"align":977},[1649,43134,43135],{},"clipBias",[931,43137,43138],{"align":977},"Clip bias for the render target",[931,43140,43141],{},[598,43142,11833],{},[931,43144,43011],{"align":26243},[913,43146,43147,43152,43155,43159],{},[931,43148,43149],{"align":977},[1649,43150,43151],{},"alpha",[931,43153,43154],{"align":977},"Alpha transparency of the water",[931,43156,43157],{},[598,43158,11711],{},[931,43160,43080],{"align":26243},[913,43162,43163,43167,43170,43174],{},[931,43164,43165],{"align":977},[1649,43166,25010],{},[931,43168,43169],{"align":977},"Which side of the mesh renders the water",[931,43171,43172],{},[598,43173,25023],{},[931,43175,43011],{"align":26243},[913,43177,43178,43182,43185,43189],{},[931,43179,43180],{"align":977},[1649,43181,8536],{},[931,43183,43184],{"align":977},"Animation speed multiplier applied to the wave animation. Higher values make the water animate faster.",[931,43186,43187],{},[598,43188,1854],{},[931,43190,43080],{"align":26243},[1307,43192,1624],{},{"title":556,"searchDepth":557,"depth":558,"links":43194},[43195,43199,43200],{"id":604,"depth":558,"text":15,"children":43196},[43197,43198],{"id":42773,"depth":688,"text":42774},{"id":37306,"depth":688,"text":42786},{"id":42804,"depth":558,"text":42805},{"id":901,"depth":558,"text":902},"Wrapper for the Three.js Water add-on with sky reflection support.",{},{"title":371,"description":43201},"5q-r3e4Wze0nFZnJd16ECdI8wU7cxHU35-r6Z0qCmhU",{"id":43206,"title":375,"body":43207,"description":44166,"extension":571,"links":572,"meta":44167,"navigation":574,"path":376,"seo":44168,"stem":377,"__hash__":44169},"docs/2.api/8.staging/precipitation.md",{"type":481,"value":43208,"toc":44158},[43209,43214,43220,43222,43228,43371,43375,43378,43567,43571,43574,43759,43763,43766,43980,43983,43988,43990,44156],[588,43210,43211],{},[43212,43213],"staging-precipitation",{},[594,43215,43216,43219],{},[598,43217,43218],{},"\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.",[484,43221,15],{"id":604},[594,43223,43224,43225,43227],{},"You can use ",[598,43226,43218],{}," component without passing any props, this will achieve a snowy effect, like the before example.",[606,43229,43232],{"className":608,"code":43230,"highlights":43231,"language":613,"meta":556,"style":556},"\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",[688,770],[598,43233,43234,43254,43272,43292,43300,43304,43312,43320,43338,43347,43355,43363],{"__ignoreMap":556},[617,43235,43236,43238,43240,43242,43244,43246,43248,43250,43252],{"class":619,"line":557},[617,43237,623],{"class":622},[617,43239,627],{"class":626},[617,43241,631],{"class":630},[617,43243,634],{"class":630},[617,43245,637],{"class":622},[617,43247,640],{"class":622},[617,43249,644],{"class":643},[617,43251,640],{"class":622},[617,43253,649],{"class":622},[617,43255,43256,43258,43260,43262,43264,43266,43268,43270],{"class":619,"line":558},[617,43257,657],{"class":656},[617,43259,660],{"class":622},[617,43261,695],{"class":663},[617,43263,673],{"class":622},[617,43265,676],{"class":656},[617,43267,679],{"class":622},[617,43269,704],{"class":643},[617,43271,685],{"class":622},[617,43273,43275,43277,43279,43282,43284,43286,43288,43290],{"class":43274,"line":688},[619,653],[617,43276,657],{"class":656},[617,43278,660],{"class":622},[617,43280,43281],{"class":663}," Precipitation",[617,43283,673],{"class":622},[617,43285,676],{"class":656},[617,43287,679],{"class":622},[617,43289,682],{"class":643},[617,43291,685],{"class":622},[617,43293,43294,43296,43298],{"class":619,"line":709},[617,43295,712],{"class":622},[617,43297,627],{"class":626},[617,43299,649],{"class":622},[617,43301,43302],{"class":619,"line":719},[617,43303,722],{"emptyLinePlaceholder":574},[617,43305,43306,43308,43310],{"class":619,"line":725},[617,43307,623],{"class":622},[617,43309,730],{"class":626},[617,43311,649],{"class":622},[617,43313,43314,43316,43318],{"class":619,"line":735},[617,43315,738],{"class":622},[617,43317,741],{"class":626},[617,43319,649],{"class":622},[617,43321,43322,43324,43326,43328,43330,43332,43334,43336],{"class":619,"line":758},[617,43323,761],{"class":622},[617,43325,764],{"class":626},[617,43327,1465],{"class":630},[617,43329,637],{"class":622},[617,43331,640],{"class":622},[617,43333,39494],{"class":643},[617,43335,640],{"class":622},[617,43337,767],{"class":622},[617,43339,43341,43343,43345],{"class":43340,"line":770},[619,653],[617,43342,761],{"class":622},[617,43344,375],{"class":626},[617,43346,767],{"class":622},[617,43348,43349,43351,43353],{"class":619,"line":780},[617,43350,761],{"class":622},[617,43352,8436],{"class":626},[617,43354,767],{"class":622},[617,43356,43357,43359,43361],{"class":619,"line":785},[617,43358,885],{"class":622},[617,43360,741],{"class":626},[617,43362,649],{"class":622},[617,43364,43365,43367,43369],{"class":619,"line":807},[617,43366,712],{"class":622},[617,43368,730],{"class":626},[617,43370,649],{"class":622},[4031,43372,43374],{"id":43373},"rain","Rain",[594,43376,43377],{},"By setting the randomness to 0, increase the speed and reduce the count. You can easily achieve a more rainy effect.",[606,43379,43382],{"className":608,"code":43380,"highlights":43381,"language":613,"meta":556,"style":556},"\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",[688,770,780,785,807,611],[598,43383,43384,43404,43422,43441,43449,43453,43461,43469,43487,43495,43510,43524,43538,43543,43551,43559],{"__ignoreMap":556},[617,43385,43386,43388,43390,43392,43394,43396,43398,43400,43402],{"class":619,"line":557},[617,43387,623],{"class":622},[617,43389,627],{"class":626},[617,43391,631],{"class":630},[617,43393,634],{"class":630},[617,43395,637],{"class":622},[617,43397,640],{"class":622},[617,43399,644],{"class":643},[617,43401,640],{"class":622},[617,43403,649],{"class":622},[617,43405,43406,43408,43410,43412,43414,43416,43418,43420],{"class":619,"line":558},[617,43407,657],{"class":656},[617,43409,660],{"class":622},[617,43411,695],{"class":663},[617,43413,673],{"class":622},[617,43415,676],{"class":656},[617,43417,679],{"class":622},[617,43419,704],{"class":643},[617,43421,685],{"class":622},[617,43423,43425,43427,43429,43431,43433,43435,43437,43439],{"class":43424,"line":688},[619,653],[617,43426,657],{"class":656},[617,43428,660],{"class":622},[617,43430,43281],{"class":663},[617,43432,673],{"class":622},[617,43434,676],{"class":656},[617,43436,679],{"class":622},[617,43438,682],{"class":643},[617,43440,685],{"class":622},[617,43442,43443,43445,43447],{"class":619,"line":709},[617,43444,712],{"class":622},[617,43446,627],{"class":626},[617,43448,649],{"class":622},[617,43450,43451],{"class":619,"line":719},[617,43452,722],{"emptyLinePlaceholder":574},[617,43454,43455,43457,43459],{"class":619,"line":725},[617,43456,623],{"class":622},[617,43458,730],{"class":626},[617,43460,649],{"class":622},[617,43462,43463,43465,43467],{"class":619,"line":735},[617,43464,738],{"class":622},[617,43466,741],{"class":626},[617,43468,649],{"class":622},[617,43470,43471,43473,43475,43477,43479,43481,43483,43485],{"class":619,"line":758},[617,43472,761],{"class":622},[617,43474,764],{"class":626},[617,43476,1465],{"class":630},[617,43478,637],{"class":622},[617,43480,640],{"class":622},[617,43482,39494],{"class":643},[617,43484,640],{"class":622},[617,43486,767],{"class":622},[617,43488,43490,43492],{"class":43489,"line":770},[619,653],[617,43491,761],{"class":622},[617,43493,43494],{"class":626},"Precipitation\n",[617,43496,43498,43501,43503,43505,43508],{"class":43497,"line":780},[619,653],[617,43499,43500],{"class":630}," :count",[617,43502,637],{"class":622},[617,43504,640],{"class":622},[617,43506,43507],{"class":643},"2000",[617,43509,3111],{"class":622},[617,43511,43513,43516,43518,43520,43522],{"class":43512,"line":785},[619,653],[617,43514,43515],{"class":630}," :speed",[617,43517,637],{"class":622},[617,43519,640],{"class":622},[617,43521,36034],{"class":643},[617,43523,3111],{"class":622},[617,43525,43527,43530,43532,43534,43536],{"class":43526,"line":807},[619,653],[617,43528,43529],{"class":630}," :randomness",[617,43531,637],{"class":622},[617,43533,640],{"class":622},[617,43535,945],{"class":643},[617,43537,3111],{"class":622},[617,43539,43541],{"class":43540,"line":611},[619,653],[617,43542,15248],{"class":622},[617,43544,43545,43547,43549],{"class":619,"line":830},[617,43546,761],{"class":622},[617,43548,8436],{"class":626},[617,43550,767],{"class":622},[617,43552,43553,43555,43557],{"class":619,"line":841},[617,43554,885],{"class":622},[617,43556,741],{"class":626},[617,43558,649],{"class":622},[617,43560,43561,43563,43565],{"class":619,"line":852},[617,43562,712],{"class":622},[617,43564,730],{"class":626},[617,43566,649],{"class":622},[4031,43568,43570],{"id":43569},"storm","Storm",[594,43572,43573],{},"A storm effect? Easy just increase the randomness.",[606,43575,43578],{"className":608,"code":43576,"highlights":43577,"language":613,"meta":556,"style":556},"\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",[688,770,780,785,807,611],[598,43579,43580,43600,43618,43637,43645,43649,43657,43665,43683,43690,43704,43717,43730,43735,43743,43751],{"__ignoreMap":556},[617,43581,43582,43584,43586,43588,43590,43592,43594,43596,43598],{"class":619,"line":557},[617,43583,623],{"class":622},[617,43585,627],{"class":626},[617,43587,631],{"class":630},[617,43589,634],{"class":630},[617,43591,637],{"class":622},[617,43593,640],{"class":622},[617,43595,644],{"class":643},[617,43597,640],{"class":622},[617,43599,649],{"class":622},[617,43601,43602,43604,43606,43608,43610,43612,43614,43616],{"class":619,"line":558},[617,43603,657],{"class":656},[617,43605,660],{"class":622},[617,43607,695],{"class":663},[617,43609,673],{"class":622},[617,43611,676],{"class":656},[617,43613,679],{"class":622},[617,43615,704],{"class":643},[617,43617,685],{"class":622},[617,43619,43621,43623,43625,43627,43629,43631,43633,43635],{"class":43620,"line":688},[619,653],[617,43622,657],{"class":656},[617,43624,660],{"class":622},[617,43626,43281],{"class":663},[617,43628,673],{"class":622},[617,43630,676],{"class":656},[617,43632,679],{"class":622},[617,43634,682],{"class":643},[617,43636,685],{"class":622},[617,43638,43639,43641,43643],{"class":619,"line":709},[617,43640,712],{"class":622},[617,43642,627],{"class":626},[617,43644,649],{"class":622},[617,43646,43647],{"class":619,"line":719},[617,43648,722],{"emptyLinePlaceholder":574},[617,43650,43651,43653,43655],{"class":619,"line":725},[617,43652,623],{"class":622},[617,43654,730],{"class":626},[617,43656,649],{"class":622},[617,43658,43659,43661,43663],{"class":619,"line":735},[617,43660,738],{"class":622},[617,43662,741],{"class":626},[617,43664,649],{"class":622},[617,43666,43667,43669,43671,43673,43675,43677,43679,43681],{"class":619,"line":758},[617,43668,761],{"class":622},[617,43670,764],{"class":626},[617,43672,1465],{"class":630},[617,43674,637],{"class":622},[617,43676,640],{"class":622},[617,43678,39494],{"class":643},[617,43680,640],{"class":622},[617,43682,767],{"class":622},[617,43684,43686,43688],{"class":43685,"line":770},[619,653],[617,43687,761],{"class":622},[617,43689,43494],{"class":626},[617,43691,43693,43695,43697,43699,43702],{"class":43692,"line":780},[619,653],[617,43694,43500],{"class":630},[617,43696,637],{"class":622},[617,43698,640],{"class":622},[617,43700,43701],{"class":643},"3000",[617,43703,3111],{"class":622},[617,43705,43707,43709,43711,43713,43715],{"class":43706,"line":785},[619,653],[617,43708,43515],{"class":630},[617,43710,637],{"class":622},[617,43712,640],{"class":622},[617,43714,1926],{"class":643},[617,43716,3111],{"class":622},[617,43718,43720,43722,43724,43726,43728],{"class":43719,"line":807},[619,653],[617,43721,43529],{"class":630},[617,43723,637],{"class":622},[617,43725,640],{"class":622},[617,43727,26409],{"class":643},[617,43729,3111],{"class":622},[617,43731,43733],{"class":43732,"line":611},[619,653],[617,43734,15248],{"class":622},[617,43736,43737,43739,43741],{"class":619,"line":830},[617,43738,761],{"class":622},[617,43740,8436],{"class":626},[617,43742,767],{"class":622},[617,43744,43745,43747,43749],{"class":619,"line":841},[617,43746,885],{"class":622},[617,43748,741],{"class":626},[617,43750,649],{"class":622},[617,43752,43753,43755,43757],{"class":619,"line":852},[617,43754,712],{"class":622},[617,43756,730],{"class":626},[617,43758,649],{"class":622},[4031,43760,43762],{"id":43761},"beam","Beam",[594,43764,43765],{},"What about an infinite beam? Just set the area, to the axis that you need constrain.",[606,43767,43770],{"className":608,"code":43768,"highlights":43769,"language":613,"meta":556,"style":556},"\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",[688,770,780,785,807,611,830,841],[598,43771,43772,43792,43810,43829,43837,43841,43849,43857,43875,43882,43897,43910,43923,43937,43951,43956,43964,43972],{"__ignoreMap":556},[617,43773,43774,43776,43778,43780,43782,43784,43786,43788,43790],{"class":619,"line":557},[617,43775,623],{"class":622},[617,43777,627],{"class":626},[617,43779,631],{"class":630},[617,43781,634],{"class":630},[617,43783,637],{"class":622},[617,43785,640],{"class":622},[617,43787,644],{"class":643},[617,43789,640],{"class":622},[617,43791,649],{"class":622},[617,43793,43794,43796,43798,43800,43802,43804,43806,43808],{"class":619,"line":558},[617,43795,657],{"class":656},[617,43797,660],{"class":622},[617,43799,695],{"class":663},[617,43801,673],{"class":622},[617,43803,676],{"class":656},[617,43805,679],{"class":622},[617,43807,704],{"class":643},[617,43809,685],{"class":622},[617,43811,43813,43815,43817,43819,43821,43823,43825,43827],{"class":43812,"line":688},[619,653],[617,43814,657],{"class":656},[617,43816,660],{"class":622},[617,43818,43281],{"class":663},[617,43820,673],{"class":622},[617,43822,676],{"class":656},[617,43824,679],{"class":622},[617,43826,682],{"class":643},[617,43828,685],{"class":622},[617,43830,43831,43833,43835],{"class":619,"line":709},[617,43832,712],{"class":622},[617,43834,627],{"class":626},[617,43836,649],{"class":622},[617,43838,43839],{"class":619,"line":719},[617,43840,722],{"emptyLinePlaceholder":574},[617,43842,43843,43845,43847],{"class":619,"line":725},[617,43844,623],{"class":622},[617,43846,730],{"class":626},[617,43848,649],{"class":622},[617,43850,43851,43853,43855],{"class":619,"line":735},[617,43852,738],{"class":622},[617,43854,741],{"class":626},[617,43856,649],{"class":622},[617,43858,43859,43861,43863,43865,43867,43869,43871,43873],{"class":619,"line":758},[617,43860,761],{"class":622},[617,43862,764],{"class":626},[617,43864,1465],{"class":630},[617,43866,637],{"class":622},[617,43868,640],{"class":622},[617,43870,39494],{"class":643},[617,43872,640],{"class":622},[617,43874,767],{"class":622},[617,43876,43878,43880],{"class":43877,"line":770},[619,653],[617,43879,761],{"class":622},[617,43881,43494],{"class":626},[617,43883,43885,43888,43890,43892,43895],{"class":43884,"line":780},[619,653],[617,43886,43887],{"class":630}," :area",[617,43889,637],{"class":622},[617,43891,640],{"class":622},[617,43893,43894],{"class":643},"[0.5, 0.5, 20]",[617,43896,3111],{"class":622},[617,43898,43900,43902,43904,43906,43908],{"class":43899,"line":785},[619,653],[617,43901,43500],{"class":630},[617,43903,637],{"class":622},[617,43905,640],{"class":622},[617,43907,41332],{"class":643},[617,43909,3111],{"class":622},[617,43911,43913,43915,43917,43919,43921],{"class":43912,"line":807},[619,653],[617,43914,43515],{"class":630},[617,43916,637],{"class":622},[617,43918,640],{"class":622},[617,43920,5709],{"class":643},[617,43922,3111],{"class":622},[617,43924,43926,43929,43931,43933,43935],{"class":43925,"line":611},[619,653],[617,43927,43928],{"class":630}," :size",[617,43930,637],{"class":622},[617,43932,640],{"class":622},[617,43934,36034],{"class":643},[617,43936,3111],{"class":622},[617,43938,43940,43942,43944,43946,43949],{"class":43939,"line":830},[619,653],[617,43941,27709],{"class":630},[617,43943,637],{"class":622},[617,43945,640],{"class":622},[617,43947,43948],{"class":643},"#00ff00",[617,43950,3111],{"class":622},[617,43952,43954],{"class":43953,"line":841},[619,653],[617,43955,15248],{"class":622},[617,43957,43958,43960,43962],{"class":619,"line":852},[617,43959,761],{"class":622},[617,43961,8436],{"class":626},[617,43963,767],{"class":622},[617,43965,43966,43968,43970],{"class":619,"line":862},[617,43967,885],{"class":622},[617,43969,741],{"class":626},[617,43971,649],{"class":622},[617,43973,43974,43976,43978],{"class":619,"line":612},[617,43975,712],{"class":622},[617,43977,730],{"class":626},[617,43979,649],{"class":622},[594,43981,43982],{},"You can create much more! ☔",[3179,43984,43985],{},[594,43986,43987],{},"Be careful with the performance this components render infinite particles in movement",[484,43989,902],{"id":901},[907,43991,43992,44002],{},[910,43993,43994],{},[913,43995,43996,43998,44000],{},[916,43997,918],{"align":977},[916,43999,921],{"align":977},[916,44001,924],{},[926,44003,44004,44015,44030,44041,44052,44064,44075,44087,44099,44110,44122,44133,44144],{},[913,44005,44006,44010,44013],{},[931,44007,44008],{"align":977},[1649,44009,14703],{},[931,44011,44012],{"align":977},"The size of the drops.",[931,44014,2143],{},[913,44016,44017,44022,44025],{},[931,44018,44019],{"align":977},[1649,44020,44021],{},"area",[931,44023,44024],{"align":977},"The size of the precipitation area.",[931,44026,44027],{},[617,44028,44029],{},"10, 10, 20",[913,44031,44032,44036,44039],{},[931,44033,44034],{"align":977},[1649,44035,7527],{},[931,44037,44038],{"align":977},"The color of the drops.",[931,44040,42259],{},[913,44042,44043,44047,44050],{},[931,44044,44045],{"align":977},[1649,44046,2961],{},[931,44048,44049],{"align":977},"Color texture of the drops.",[931,44051,3636],{},[913,44053,44054,44059,44062],{},[931,44055,44056],{"align":977},[1649,44057,44058],{},"alphaMap",[931,44060,44061],{"align":977},"Alpha texture of the Drops.",[931,44063,3636],{},[913,44065,44066,44070,44073],{},[931,44067,44068],{"align":977},[1649,44069,36293],{},[931,44071,44072],{"align":977},"Enables the WebGL to know when not to render the pixel.",[931,44074,1866],{},[913,44076,44077,44081,44084],{},[931,44078,44079],{"align":977},[1649,44080,9660],{},[931,44082,44083],{"align":977},"Set the opacity of the drops.",[931,44085,44086],{},"0.8",[913,44088,44089,44093,44096],{},[931,44090,44091],{"align":977},[1649,44092,10059],{},[931,44094,44095],{"align":977},"Number of drops.",[931,44097,44098],{},"5000",[913,44100,44101,44105,44108],{},[931,44102,44103],{"align":977},[1649,44104,8536],{},[931,44106,44107],{"align":977},"Drops speed.",[931,44109,2143],{},[913,44111,44112,44117,44120],{},[931,44113,44114],{"align":977},[1649,44115,44116],{},"randomness",[931,44118,44119],{"align":977},"Add randomness to the drops.",[931,44121,1926],{},[913,44123,44124,44128,44131],{},[931,44125,44126],{"align":977},[1649,44127,9167],{},[931,44129,44130],{"align":977},"Whether should write to the depth buffer or not. drops.",[931,44132,941],{},[913,44134,44135,44139,44142],{},[931,44136,44137],{"align":977},[1649,44138,9672],{},[931,44140,44141],{"align":977},"Transparency on the drops texture",[931,44143,951],{},[913,44145,44146,44151,44154],{},[931,44147,44148],{"align":977},[1649,44149,44150],{},"sizeAttenuation",[931,44152,44153],{"align":977},"Keep the same size regardless distance. drops.",[931,44155,941],{},[1307,44157,1624],{},{"title":556,"searchDepth":557,"depth":558,"links":44159},[44160,44165],{"id":604,"depth":558,"text":15,"children":44161},[44162,44163,44164],{"id":43373,"depth":688,"text":43374},{"id":43569,"depth":688,"text":43570},{"id":43761,"depth":688,"text":43762},{"id":901,"depth":558,"text":902},"Flexible infinite particle flow for rain, snow, waterfall, and beam effects.",{},{"title":375,"description":44166},"tt7i9fbwRZ4B8AUSIJO4jMNnX2vDH4IJ9qHfravYfLs",{"id":44171,"title":379,"body":44172,"description":44557,"extension":571,"links":572,"meta":44558,"navigation":574,"path":380,"seo":44559,"stem":381,"__hash__":44560},"docs/2.api/8.staging/sky.md",{"type":481,"value":44173,"toc":44553},[44174,44179,44189,44191,44369,44371,44551],[588,44175,44176],{},[44177,44178],"staging-sky",{},[594,44180,44181,42621,44183,1126],{},[598,44182,42782],{},[1120,44184,42626,44187,42630],{"href":44185,"rel":44186},"https://threejs.org/examples/?q=sky#webgl_shaders_sky",[1124],[598,44188,379],{},[484,44190,15],{"id":604},[606,44192,44195],{"className":608,"code":44193,"highlights":44194,"language":613,"meta":556,"style":556},"\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",[558,770],[598,44196,44197,44217,44241,44259,44267,44271,44279,44298,44317,44326,44334,44353,44361],{"__ignoreMap":556},[617,44198,44199,44201,44203,44205,44207,44209,44211,44213,44215],{"class":619,"line":557},[617,44200,623],{"class":622},[617,44202,627],{"class":626},[617,44204,631],{"class":630},[617,44206,634],{"class":630},[617,44208,637],{"class":622},[617,44210,640],{"class":622},[617,44212,644],{"class":643},[617,44214,640],{"class":622},[617,44216,649],{"class":622},[617,44218,44220,44222,44224,44226,44228,44231,44233,44235,44237,44239],{"class":44219,"line":558},[619,653],[617,44221,657],{"class":656},[617,44223,660],{"class":622},[617,44225,670],{"class":663},[617,44227,667],{"class":622},[617,44229,44230],{"class":663}," Sky",[617,44232,673],{"class":622},[617,44234,676],{"class":656},[617,44236,679],{"class":622},[617,44238,682],{"class":643},[617,44240,685],{"class":622},[617,44242,44243,44245,44247,44249,44251,44253,44255,44257],{"class":619,"line":688},[617,44244,657],{"class":656},[617,44246,660],{"class":622},[617,44248,695],{"class":663},[617,44250,673],{"class":622},[617,44252,676],{"class":656},[617,44254,679],{"class":622},[617,44256,704],{"class":643},[617,44258,685],{"class":622},[617,44260,44261,44263,44265],{"class":619,"line":709},[617,44262,712],{"class":622},[617,44264,627],{"class":626},[617,44266,649],{"class":622},[617,44268,44269],{"class":619,"line":719},[617,44270,722],{"emptyLinePlaceholder":574},[617,44272,44273,44275,44277],{"class":619,"line":725},[617,44274,623],{"class":622},[617,44276,730],{"class":626},[617,44278,649],{"class":622},[617,44280,44281,44283,44285,44288,44290,44292,44294,44296],{"class":619,"line":735},[617,44282,738],{"class":622},[617,44284,741],{"class":626},[617,44286,44287],{"class":630}," :tone-mapping-exposure",[617,44289,637],{"class":622},[617,44291,640],{"class":622},[617,44293,11667],{"class":643},[617,44295,640],{"class":622},[617,44297,649],{"class":622},[617,44299,44300,44302,44304,44306,44308,44310,44313,44315],{"class":619,"line":758},[617,44301,761],{"class":622},[617,44303,764],{"class":626},[617,44305,1465],{"class":630},[617,44307,637],{"class":622},[617,44309,640],{"class":622},[617,44311,44312],{"class":643},"[0, 15, 200]",[617,44314,640],{"class":622},[617,44316,767],{"class":622},[617,44318,44320,44322,44324],{"class":44319,"line":770},[619,653],[617,44321,761],{"class":622},[617,44323,379],{"class":626},[617,44325,767],{"class":622},[617,44327,44328,44330,44332],{"class":619,"line":780},[617,44329,761],{"class":622},[617,44331,775],{"class":626},[617,44333,767],{"class":622},[617,44335,44336,44338,44340,44342,44344,44346,44349,44351],{"class":619,"line":785},[617,44337,761],{"class":622},[617,44339,8029],{"class":626},[617,44341,1939],{"class":630},[617,44343,637],{"class":622},[617,44345,640],{"class":622},[617,44347,44348],{"class":643},"[1000, 20]",[617,44350,640],{"class":622},[617,44352,767],{"class":622},[617,44354,44355,44357,44359],{"class":619,"line":807},[617,44356,885],{"class":622},[617,44358,741],{"class":626},[617,44360,649],{"class":622},[617,44362,44363,44365,44367],{"class":619,"line":611},[617,44364,712],{"class":622},[617,44366,730],{"class":626},[617,44368,649],{"class":622},[484,44370,902],{"id":901},[907,44372,44373,44387],{},[910,44374,44375],{},[913,44376,44377,44379,44381,44383,44385],{},[916,44378,8069],{"align":977},[916,44380,5949],{"align":977},[916,44382,921],{"align":977},[916,44384,924],{"align":977},[916,44386,31074],{"align":977},[926,44388,44389,44410,44434,44460,44484,44504,44531],{},[913,44390,44391,44396,44400,44403,44408],{},[931,44392,44393],{"align":977},[1649,44394,44395],{},"turbidity",[931,44397,44398],{"align":977},[598,44399,5332],{},[931,44401,44402],{"align":977},"Haziness",[931,44404,44405],{"align":977},[598,44406,44407],{},"3.4",[931,44409,42572],{"align":977},[913,44411,44412,44417,44421,44428,44432],{},[931,44413,44414],{"align":977},[1649,44415,44416],{},"rayleigh",[931,44418,44419],{"align":977},[598,44420,5332],{},[931,44422,44423],{"align":977},[1120,44424,44427],{"href":44425,"rel":44426},"https://en.wikipedia.org/wiki/Rayleigh_scattering",[1124],"Rayleigh scattering",[931,44429,44430],{"align":977},[598,44431,19006],{},[931,44433,42572],{"align":977},[913,44435,44436,44441,44445,44453,44458],{},[931,44437,44438],{"align":977},[1649,44439,44440],{},"mieCoefficient",[931,44442,44443],{"align":977},[598,44444,5332],{},[931,44446,44447,44452],{"align":977},[1120,44448,44451],{"href":44449,"rel":44450},"https://en.wikipedia.org/wiki/Mie_scattering",[1124],"Mie scattering"," amount",[931,44454,44455],{"align":977},[598,44456,44457],{},"0.005",[931,44459,42572],{"align":977},[913,44461,44462,44467,44471,44477,44482],{},[931,44463,44464],{"align":977},[1649,44465,44466],{},"mieDirectionalG",[931,44468,44469],{"align":977},[598,44470,5332],{},[931,44472,44473,44476],{"align":977},[1120,44474,44451],{"href":44449,"rel":44475},[1124]," direction",[931,44478,44479],{"align":977},[598,44480,44481],{},"0.7",[931,44483,42572],{"align":977},[913,44485,44486,44491,44495,44498,44502],{},[931,44487,44488],{"align":977},[1649,44489,44490],{},"elevation",[931,44492,44493],{"align":977},[598,44494,5332],{},[931,44496,44497],{"align":977},"Sun's elevation from the horizon, in degrees",[931,44499,44500],{"align":977},[598,44501,27195],{},[931,44503,42572],{"align":977},[913,44505,44506,44511,44515,44524,44529],{},[931,44507,44508],{"align":977},[1649,44509,44510],{},"azimuth",[931,44512,44513],{"align":977},[598,44514,5332],{},[931,44516,44517,44518,44523],{"align":977},"Sun's ",[1120,44519,44522],{"href":44520,"rel":44521},"https://en.wikipedia.org/wiki/Solar_azimuth_angle",[1124],"azimuth angle",", in degrees – its horizontal coordinate on the horizon",[931,44525,44526],{"align":977},[598,44527,44528],{},"180",[931,44530,42572],{"align":977},[913,44532,44533,44537,44541,44544,44549],{},[931,44534,44535],{"align":977},[1649,44536,11571],{},[931,44538,44539],{"align":977},[598,44540,5332],{},[931,44542,44543],{"align":977},"Sky box scale",[931,44545,44546],{"align":977},[598,44547,44548],{},"450000",[931,44550,42572],{"align":977},[1307,44552,1624],{},{"title":556,"searchDepth":557,"depth":558,"links":44554},[44555,44556],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},"Wrapper for the Three.js Sky add-on with sun position controls.",{},{"title":379,"description":44557},"gj-nWIhO12GxCs2jecdsUZVQa85u-DxXdL5B9nW79zk",{"id":44562,"title":383,"body":44563,"description":44954,"extension":571,"links":572,"meta":44955,"navigation":574,"path":384,"seo":44956,"stem":385,"__hash__":44957},"docs/2.api/8.staging/smoke.md",{"type":481,"value":44564,"toc":44948},[44565,44570,44576,44578,44583,44588,44744,44746,44938,44942,44946],[2275,44566,44567],{},[44568,44569],"staging-smoke",{},[594,44571,44572,44575],{},[598,44573,44574],{},"\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",[484,44577,15],{"id":604},[3179,44579,44580],{},[594,44581,44582],{},"Smoke component comes with a default texture abstraction it needs to be wrapped by a Suspense component",[594,44584,43224,44585,44587],{},[598,44586,44574],{}," component without passing any props, but still if you want you can tweak the props to find the best setup for you",[606,44589,44591],{"className":608,"code":44590,"language":613,"meta":556,"style":556},"\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",[598,44592,44593,44613,44631,44650,44658,44662,44670,44678,44696,44704,44712,44720,44728,44736],{"__ignoreMap":556},[617,44594,44595,44597,44599,44601,44603,44605,44607,44609,44611],{"class":619,"line":557},[617,44596,623],{"class":622},[617,44598,627],{"class":626},[617,44600,631],{"class":630},[617,44602,634],{"class":630},[617,44604,637],{"class":622},[617,44606,640],{"class":622},[617,44608,644],{"class":643},[617,44610,640],{"class":622},[617,44612,649],{"class":622},[617,44614,44615,44617,44619,44621,44623,44625,44627,44629],{"class":619,"line":558},[617,44616,657],{"class":656},[617,44618,660],{"class":622},[617,44620,695],{"class":663},[617,44622,673],{"class":622},[617,44624,676],{"class":656},[617,44626,679],{"class":622},[617,44628,704],{"class":643},[617,44630,685],{"class":622},[617,44632,44633,44635,44637,44640,44642,44644,44646,44648],{"class":619,"line":688},[617,44634,657],{"class":656},[617,44636,660],{"class":622},[617,44638,44639],{"class":663}," Smoke",[617,44641,673],{"class":622},[617,44643,676],{"class":656},[617,44645,679],{"class":622},[617,44647,682],{"class":643},[617,44649,685],{"class":622},[617,44651,44652,44654,44656],{"class":619,"line":709},[617,44653,712],{"class":622},[617,44655,627],{"class":626},[617,44657,649],{"class":622},[617,44659,44660],{"class":619,"line":719},[617,44661,722],{"emptyLinePlaceholder":574},[617,44663,44664,44666,44668],{"class":619,"line":725},[617,44665,623],{"class":622},[617,44667,730],{"class":626},[617,44669,649],{"class":622},[617,44671,44672,44674,44676],{"class":619,"line":735},[617,44673,738],{"class":622},[617,44675,741],{"class":626},[617,44677,649],{"class":622},[617,44679,44680,44682,44684,44686,44688,44690,44692,44694],{"class":619,"line":758},[617,44681,761],{"class":622},[617,44683,764],{"class":626},[617,44685,1465],{"class":630},[617,44687,637],{"class":622},[617,44689,640],{"class":622},[617,44691,39494],{"class":643},[617,44693,640],{"class":622},[617,44695,767],{"class":622},[617,44697,44698,44700,44702],{"class":619,"line":770},[617,44699,761],{"class":622},[617,44701,19264],{"class":626},[617,44703,649],{"class":622},[617,44705,44706,44708,44710],{"class":619,"line":780},[617,44707,833],{"class":622},[617,44709,383],{"class":626},[617,44711,767],{"class":622},[617,44713,44714,44716,44718],{"class":619,"line":785},[617,44715,875],{"class":622},[617,44717,19264],{"class":626},[617,44719,649],{"class":622},[617,44721,44722,44724,44726],{"class":619,"line":807},[617,44723,761],{"class":622},[617,44725,8436],{"class":626},[617,44727,767],{"class":622},[617,44729,44730,44732,44734],{"class":619,"line":611},[617,44731,885],{"class":622},[617,44733,741],{"class":626},[617,44735,649],{"class":622},[617,44737,44738,44740,44742],{"class":619,"line":830},[617,44739,712],{"class":622},[617,44741,730],{"class":626},[617,44743,649],{"class":622},[484,44745,902],{"id":901},[907,44747,44748,44760],{},[910,44749,44750],{},[913,44751,44752,44754,44756,44758],{},[916,44753,8069],{"align":977},[916,44755,5949],{"align":977},[916,44757,921],{"align":977},[916,44759,924],{"align":977},[926,44761,44762,44780,44797,44814,44831,44848,44868,44886,44904,44922],{},[913,44763,44764,44768,44772,44775],{},[931,44765,44766],{"align":977},[1649,44767,7527],{},[931,44769,44770],{"align":977},[598,44771,7542],{},[931,44773,44774],{"align":977},"The color of the smoke.",[931,44776,44777],{"align":977},[598,44778,44779],{},"'#ffffff'",[913,44781,44782,44786,44790,44793],{},[931,44783,44784],{"align":977},[1649,44785,9660],{},[931,44787,44788],{"align":977},[598,44789,5332],{},[931,44791,44792],{"align":977},"The strength of the opacity.",[931,44794,44795],{"align":977},[598,44796,1926],{},[913,44798,44799,44803,44807,44810],{},[931,44800,44801],{"align":977},[1649,44802,8536],{},[931,44804,44805],{"align":977},[598,44806,5332],{},[931,44808,44809],{"align":977},"The rotation speed of the smoke.",[931,44811,44812],{"align":977},[598,44813,36045],{},[913,44815,44816,44820,44824,44827],{},[931,44817,44818],{"align":977},[1649,44819,11134],{},[931,44821,44822],{"align":977},[598,44823,5332],{},[931,44825,44826],{"align":977},"The base depth.",[931,44828,44829],{"align":977},[598,44830,36034],{},[913,44832,44833,44837,44841,44844],{},[931,44834,44835],{"align":977},[1649,44836,27797],{},[931,44838,44839],{"align":977},[598,44840,5332],{},[931,44842,44843],{"align":977},"The number of smoke to render.",[931,44845,44846],{"align":977},[598,44847,34359],{},[913,44849,44850,44854,44858,44861],{},[931,44851,44852],{"align":977},[1649,44853,2697],{},[931,44855,44856],{"align":977},[598,44857,3552],{},[931,44859,44860],{"align":977},"The texture of the smoke.",[931,44862,44863],{"align":977},[1120,44864,44867],{"href":44865,"rel":44866},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/clouds/defaultCloud.png",[1124],"link",[913,44869,44870,44875,44879,44882],{},[931,44871,44872],{"align":977},[1649,44873,44874],{},"depthTest",[931,44876,44877],{"align":977},[598,44878,15441],{},[931,44880,44881],{"align":977},"The depthTest.",[931,44883,44884],{"align":977},[598,44885,951],{},[913,44887,44888,44893,44897,44900],{},[931,44889,44890],{"align":977},[1649,44891,44892],{},"spreadY",[931,44894,44895],{"align":977},[598,44896,5332],{},[931,44898,44899],{"align":977},"Spread on the Y axis.",[931,44901,44902],{"align":977},[598,44903,2143],{},[913,44905,44906,44911,44915,44918],{},[931,44907,44908],{"align":977},[1649,44909,44910],{},"spreadX",[931,44912,44913],{"align":977},[598,44914,5332],{},[931,44916,44917],{"align":977},"Spread on the X axis.",[931,44919,44920],{"align":977},[598,44921,1926],{},[913,44923,44924,44928,44932,44934],{},[931,44925,44926],{"align":977},[1649,44927,5610],{},[931,44929,44930],{"align":977},[598,44931,5332],{},[931,44933,5610],{"align":977},[931,44935,44936],{"align":977},[598,44937,1854],{},[4031,44939,44941],{"id":44940},"default-texture","Default texture",[594,44943,44944],{},[8215,44945],{"alt":44941,"src":44865},[1307,44947,1624],{},{"title":556,"searchDepth":557,"depth":558,"links":44949},[44950,44951],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902,"children":44952},[44953],{"id":44940,"depth":688,"text":44941},"Beautiful smoke, cloud, and fog effect using textures and transparency.",{},{"title":383,"description":44954},"sbmmZ3rOQ9aBpjlOeEx_ISxnTzHqa7qssAvcFtfGBTQ",{"id":44959,"title":387,"body":44960,"description":46692,"extension":571,"links":572,"meta":46693,"navigation":574,"path":388,"seo":46694,"stem":389,"__hash__":46695},"docs/2.api/8.staging/sparkles.md",{"type":481,"value":44961,"toc":46683},[44962,44968,44970,44974,45141,45145,45148,45408,45412,45430,45457,45463,45480,45692,45696,45712,45741,45751,46043,46045,46680],[594,44963,44964,44967],{},[598,44965,44966],{},"\u003CSparkles />"," makes sparkles on your geometry's vertices – optionally guided by a directional light.",[484,44969,15],{"id":604},[4031,44971,44973],{"id":44972},"basic","Basic",[606,44975,44978],{"className":608,"code":44976,"highlights":44977,"language":613,"meta":556,"style":556},"\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",[688,785],[598,44979,44980,45000,45018,45038,45046,45050,45058,45066,45084,45092,45100,45109,45117,45125,45133],{"__ignoreMap":556},[617,44981,44982,44984,44986,44988,44990,44992,44994,44996,44998],{"class":619,"line":557},[617,44983,623],{"class":622},[617,44985,627],{"class":626},[617,44987,631],{"class":630},[617,44989,634],{"class":630},[617,44991,637],{"class":622},[617,44993,640],{"class":622},[617,44995,644],{"class":643},[617,44997,640],{"class":622},[617,44999,649],{"class":622},[617,45001,45002,45004,45006,45008,45010,45012,45014,45016],{"class":619,"line":558},[617,45003,657],{"class":656},[617,45005,660],{"class":622},[617,45007,695],{"class":663},[617,45009,673],{"class":622},[617,45011,676],{"class":656},[617,45013,679],{"class":622},[617,45015,704],{"class":643},[617,45017,685],{"class":622},[617,45019,45021,45023,45025,45028,45030,45032,45034,45036],{"class":45020,"line":688},[619,653],[617,45022,657],{"class":656},[617,45024,660],{"class":622},[617,45026,45027],{"class":663}," Sparkles",[617,45029,673],{"class":622},[617,45031,676],{"class":656},[617,45033,679],{"class":622},[617,45035,682],{"class":643},[617,45037,685],{"class":622},[617,45039,45040,45042,45044],{"class":619,"line":709},[617,45041,712],{"class":622},[617,45043,627],{"class":626},[617,45045,649],{"class":622},[617,45047,45048],{"class":619,"line":719},[617,45049,722],{"emptyLinePlaceholder":574},[617,45051,45052,45054,45056],{"class":619,"line":725},[617,45053,623],{"class":622},[617,45055,730],{"class":626},[617,45057,649],{"class":622},[617,45059,45060,45062,45064],{"class":619,"line":735},[617,45061,738],{"class":622},[617,45063,741],{"class":626},[617,45065,649],{"class":622},[617,45067,45068,45070,45072,45074,45076,45078,45080,45082],{"class":619,"line":758},[617,45069,761],{"class":622},[617,45071,764],{"class":626},[617,45073,1465],{"class":630},[617,45075,637],{"class":622},[617,45077,640],{"class":622},[617,45079,39494],{"class":643},[617,45081,640],{"class":622},[617,45083,767],{"class":622},[617,45085,45086,45088,45090],{"class":619,"line":770},[617,45087,761],{"class":622},[617,45089,836],{"class":626},[617,45091,649],{"class":622},[617,45093,45094,45096,45098],{"class":619,"line":780},[617,45095,833],{"class":622},[617,45097,3938],{"class":626},[617,45099,767],{"class":622},[617,45101,45103,45105,45107],{"class":45102,"line":785},[619,653],[617,45104,833],{"class":622},[617,45106,387],{"class":626},[617,45108,767],{"class":622},[617,45110,45111,45113,45115],{"class":619,"line":807},[617,45112,875],{"class":622},[617,45114,836],{"class":626},[617,45116,649],{"class":622},[617,45118,45119,45121,45123],{"class":619,"line":611},[617,45120,761],{"class":622},[617,45122,8436],{"class":626},[617,45124,767],{"class":622},[617,45126,45127,45129,45131],{"class":619,"line":830},[617,45128,885],{"class":622},[617,45130,741],{"class":626},[617,45132,649],{"class":622},[617,45134,45135,45137,45139],{"class":619,"line":841},[617,45136,712],{"class":622},[617,45138,730],{"class":626},[617,45140,649],{"class":622},[4031,45142,45144],{"id":45143},"with-tresdirectionallight","With TresDirectionalLight",[594,45146,45147],{},"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.",[606,45149,45152],{"className":608,"code":45150,"highlights":45151,"language":613,"meta":556,"style":556},"\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",[725,830,862],[598,45153,45154,45174,45192,45210,45228,45232,45246,45254,45258,45266,45274,45292,45300,45308,45329,45337,45343,45356,45368,45380,45384,45392,45400],{"__ignoreMap":556},[617,45155,45156,45158,45160,45162,45164,45166,45168,45170,45172],{"class":619,"line":557},[617,45157,623],{"class":622},[617,45159,627],{"class":626},[617,45161,631],{"class":630},[617,45163,634],{"class":630},[617,45165,637],{"class":622},[617,45167,640],{"class":622},[617,45169,644],{"class":643},[617,45171,640],{"class":622},[617,45173,649],{"class":622},[617,45175,45176,45178,45180,45182,45184,45186,45188,45190],{"class":619,"line":558},[617,45177,657],{"class":656},[617,45179,660],{"class":622},[617,45181,695],{"class":663},[617,45183,673],{"class":622},[617,45185,676],{"class":656},[617,45187,679],{"class":622},[617,45189,704],{"class":643},[617,45191,685],{"class":622},[617,45193,45194,45196,45198,45200,45202,45204,45206,45208],{"class":619,"line":688},[617,45195,657],{"class":656},[617,45197,660],{"class":622},[617,45199,45027],{"class":663},[617,45201,673],{"class":622},[617,45203,676],{"class":656},[617,45205,679],{"class":622},[617,45207,682],{"class":643},[617,45209,685],{"class":622},[617,45211,45212,45214,45216,45218,45220,45222,45224,45226],{"class":619,"line":709},[617,45213,657],{"class":656},[617,45215,660],{"class":622},[617,45217,3478],{"class":663},[617,45219,673],{"class":622},[617,45221,676],{"class":656},[617,45223,679],{"class":622},[617,45225,613],{"class":643},[617,45227,685],{"class":622},[617,45229,45230],{"class":619,"line":719},[617,45231,722],{"emptyLinePlaceholder":574},[617,45233,45235,45237,45240,45242,45244],{"class":45234,"line":725},[619,653],[617,45236,2395],{"class":630},[617,45238,45239],{"class":663}," directionalLightRef ",[617,45241,637],{"class":622},[617,45243,3478],{"class":2414},[617,45245,6515],{"class":663},[617,45247,45248,45250,45252],{"class":619,"line":735},[617,45249,712],{"class":622},[617,45251,627],{"class":626},[617,45253,649],{"class":622},[617,45255,45256],{"class":619,"line":758},[617,45257,722],{"emptyLinePlaceholder":574},[617,45259,45260,45262,45264],{"class":619,"line":770},[617,45261,623],{"class":622},[617,45263,730],{"class":626},[617,45265,649],{"class":622},[617,45267,45268,45270,45272],{"class":619,"line":780},[617,45269,738],{"class":622},[617,45271,741],{"class":626},[617,45273,649],{"class":622},[617,45275,45276,45278,45280,45282,45284,45286,45288,45290],{"class":619,"line":785},[617,45277,761],{"class":622},[617,45279,764],{"class":626},[617,45281,1465],{"class":630},[617,45283,637],{"class":622},[617,45285,640],{"class":622},[617,45287,39494],{"class":643},[617,45289,640],{"class":622},[617,45291,767],{"class":622},[617,45293,45294,45296,45298],{"class":619,"line":807},[617,45295,761],{"class":622},[617,45297,836],{"class":626},[617,45299,649],{"class":622},[617,45301,45302,45304,45306],{"class":619,"line":611},[617,45303,833],{"class":622},[617,45305,3938],{"class":626},[617,45307,767],{"class":622},[617,45309,45311,45313,45315,45318,45320,45322,45325,45327],{"class":45310,"line":830},[619,653],[617,45312,833],{"class":622},[617,45314,387],{"class":626},[617,45316,45317],{"class":630}," :directional-light",[617,45319,637],{"class":622},[617,45321,640],{"class":622},[617,45323,45324],{"class":643},"directionalLightRef",[617,45326,640],{"class":622},[617,45328,767],{"class":622},[617,45330,45331,45333,45335],{"class":619,"line":841},[617,45332,875],{"class":622},[617,45334,836],{"class":626},[617,45336,649],{"class":622},[617,45338,45339,45341],{"class":619,"line":852},[617,45340,761],{"class":622},[617,45342,15217],{"class":626},[617,45344,45346,45348,45350,45352,45354],{"class":45345,"line":862},[619,653],[617,45347,10413],{"class":630},[617,45349,637],{"class":622},[617,45351,640],{"class":622},[617,45353,45324],{"class":643},[617,45355,3111],{"class":622},[617,45357,45358,45360,45362,45364,45366],{"class":619,"line":612},[617,45359,15235],{"class":630},[617,45361,637],{"class":622},[617,45363,640],{"class":622},[617,45365,11330],{"class":643},[617,45367,3111],{"class":622},[617,45369,45370,45372,45374,45376,45378],{"class":619,"line":882},[617,45371,15222],{"class":630},[617,45373,637],{"class":622},[617,45375,640],{"class":622},[617,45377,800],{"class":643},[617,45379,3111],{"class":622},[617,45381,45382],{"class":619,"line":892},[617,45383,15248],{"class":622},[617,45385,45386,45388,45390],{"class":619,"line":2605},[617,45387,761],{"class":622},[617,45389,8436],{"class":626},[617,45391,767],{"class":622},[617,45393,45394,45396,45398],{"class":619,"line":2614},[617,45395,885],{"class":622},[617,45397,741],{"class":626},[617,45399,649],{"class":622},[617,45401,45402,45404,45406],{"class":619,"line":2634},[617,45403,712],{"class":622},[617,45405,730],{"class":626},[617,45407,649],{"class":622},[4031,45409,45411],{"id":45410},"sequences","Sequences",[594,45413,45414,45415,45418,45419,8146,45423,45425,45426,45429],{},"All props beginning with ",[598,45416,45417],{},":sequence-"," are used to define how a particle changes as it progresses ",[1120,45420,45422],{"href":45421},"#mixes","(See also: Mixes)",[598,45424,45417],{}," props are of the type ",[598,45427,45428],{},"Gradient\u003CT>",", which can be any one of:",[2193,45431,45432,45438,45444],{},[2196,45433,45434,45437],{},[598,45435,45436],{},"T",": a single value",[2196,45439,45440,45443],{},[598,45441,45442],{},"[T, T, T, ...]",": an evenly distributed series of values",[2196,45445,45446,45449,45450,45452,45453,2230,45455,1126],{},[598,45447,45448],{},"[[number, T], [number, T], ...]",": an unevently distributed series of values, where ",[598,45451,5332],{}," is a gradient \"stop\" from ",[598,45454,945],{},[598,45456,1854],{},[594,45458,45459,45460,1198],{},"For example, all of these are acceptable values for ",[598,45461,45462],{},"Gradient\u003CTresColor>",[2193,45464,45465,45470,45475],{},[2196,45466,45467],{},[598,45468,45469],{},"'red'",[2196,45471,45472],{},[598,45473,45474],{},"['red', 'blue', 'green']",[2196,45476,45477],{},[598,45478,45479],{},"[[0.1, 'red'], [0.25, 'blue'], [0.5, 'green']]",[606,45481,45484],{"className":608,"code":45482,"highlights":45483,"language":613,"meta":556,"style":556},"\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",[785,807,611,830],[598,45485,45486,45506,45524,45542,45550,45554,45562,45570,45588,45596,45604,45612,45626,45641,45656,45660,45668,45676,45684],{"__ignoreMap":556},[617,45487,45488,45490,45492,45494,45496,45498,45500,45502,45504],{"class":619,"line":557},[617,45489,623],{"class":622},[617,45491,627],{"class":626},[617,45493,631],{"class":630},[617,45495,634],{"class":630},[617,45497,637],{"class":622},[617,45499,640],{"class":622},[617,45501,644],{"class":643},[617,45503,640],{"class":622},[617,45505,649],{"class":622},[617,45507,45508,45510,45512,45514,45516,45518,45520,45522],{"class":619,"line":558},[617,45509,657],{"class":656},[617,45511,660],{"class":622},[617,45513,695],{"class":663},[617,45515,673],{"class":622},[617,45517,676],{"class":656},[617,45519,679],{"class":622},[617,45521,704],{"class":643},[617,45523,685],{"class":622},[617,45525,45526,45528,45530,45532,45534,45536,45538,45540],{"class":619,"line":688},[617,45527,657],{"class":656},[617,45529,660],{"class":622},[617,45531,45027],{"class":663},[617,45533,673],{"class":622},[617,45535,676],{"class":656},[617,45537,679],{"class":622},[617,45539,682],{"class":643},[617,45541,685],{"class":622},[617,45543,45544,45546,45548],{"class":619,"line":709},[617,45545,712],{"class":622},[617,45547,627],{"class":626},[617,45549,649],{"class":622},[617,45551,45552],{"class":619,"line":719},[617,45553,722],{"emptyLinePlaceholder":574},[617,45555,45556,45558,45560],{"class":619,"line":725},[617,45557,623],{"class":622},[617,45559,730],{"class":626},[617,45561,649],{"class":622},[617,45563,45564,45566,45568],{"class":619,"line":735},[617,45565,738],{"class":622},[617,45567,741],{"class":626},[617,45569,649],{"class":622},[617,45571,45572,45574,45576,45578,45580,45582,45584,45586],{"class":619,"line":758},[617,45573,761],{"class":622},[617,45575,764],{"class":626},[617,45577,1465],{"class":630},[617,45579,637],{"class":622},[617,45581,640],{"class":622},[617,45583,39494],{"class":643},[617,45585,640],{"class":622},[617,45587,767],{"class":622},[617,45589,45590,45592,45594],{"class":619,"line":770},[617,45591,761],{"class":622},[617,45593,836],{"class":626},[617,45595,649],{"class":622},[617,45597,45598,45600,45602],{"class":619,"line":780},[617,45599,833],{"class":622},[617,45601,3938],{"class":626},[617,45603,767],{"class":622},[617,45605,45607,45609],{"class":45606,"line":785},[619,653],[617,45608,833],{"class":622},[617,45610,45611],{"class":626},"Sparkles\n",[617,45613,45615,45618,45620,45622,45624],{"class":45614,"line":807},[619,653],[617,45616,45617],{"class":630}," :sequence-color",[617,45619,637],{"class":622},[617,45621,640],{"class":622},[617,45623,45474],{"class":643},[617,45625,3111],{"class":622},[617,45627,45629,45632,45634,45636,45639],{"class":45628,"line":611},[619,653],[617,45630,45631],{"class":630}," :sequence-alpha",[617,45633,637],{"class":622},[617,45635,640],{"class":622},[617,45637,45638],{"class":643},"[[0.0, 0.0], [0.10, 1.0], [0.5, 1.0], [0.9, 0.0]]",[617,45640,3111],{"class":622},[617,45642,45644,45647,45649,45651,45654],{"class":45643,"line":830},[619,653],[617,45645,45646],{"class":630}," :sequence-size",[617,45648,637],{"class":622},[617,45650,640],{"class":622},[617,45652,45653],{"class":643},"[0.0, 1.0, 0.5]",[617,45655,3111],{"class":622},[617,45657,45658],{"class":619,"line":841},[617,45659,8013],{"class":622},[617,45661,45662,45664,45666],{"class":619,"line":852},[617,45663,875],{"class":622},[617,45665,836],{"class":626},[617,45667,649],{"class":622},[617,45669,45670,45672,45674],{"class":619,"line":862},[617,45671,761],{"class":622},[617,45673,8436],{"class":626},[617,45675,767],{"class":622},[617,45677,45678,45680,45682],{"class":619,"line":612},[617,45679,885],{"class":622},[617,45681,741],{"class":626},[617,45683,649],{"class":622},[617,45685,45686,45688,45690],{"class":619,"line":882},[617,45687,712],{"class":622},[617,45689,730],{"class":626},[617,45691,649],{"class":622},[4031,45693,45695],{"id":45694},"mixes","Mixes",[594,45697,45414,45698,45701,45702,45704,45705,45708,45709,1126],{},[598,45699,45700],{},":mix-"," allow you to specify how a particle \"progresses\" through a corresponding ",[598,45703,45417],{}," prop. E.g., ",[598,45706,45707],{},":mix-alpha"," affects ",[598,45710,45711],{},":sequence-alpha",[2193,45713,45714,45732],{},[2196,45715,45716,45717,45719,45720,45722,45723,45725,45726],{},"If the ",[598,45718,45700],{}," prop is ",[598,45721,11833],{},", 'progress' through the ",[598,45724,45417],{}," is determined entirely by the light shining on the surface of the sparkling mesh.",[1120,45727,45729],{"href":45728},"#precisely",[45730,45731,1854],"sup",{},[2196,45733,45716,45734,45719,45736,45722,45738,45740],{},[598,45735,45700],{},[598,45737,11711],{},[598,45739,45417],{}," is determined entirely by the particle's lifetime.",[594,45742,45743,45746,45747,45750],{},[1120,45744],{"id":45745},"precisely"," More precisely, the value is determined by the dot product of the ",[598,45748,45749],{},"directionalLight","'s inverted normalized position and each of the sparkling mesh's vertex normals.",[606,45752,45755],{"className":608,"code":45753,"highlights":45754,"language":613,"meta":556,"style":556},"\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",[688,830,841,852,862,612],[598,45756,45757,45777,45795,45814,45832,45836,45848,45856,45860,45868,45876,45894,45902,45910,45917,45931,45945,45959,45973,45977,45985,45991,46003,46015,46019,46027,46035],{"__ignoreMap":556},[617,45758,45759,45761,45763,45765,45767,45769,45771,45773,45775],{"class":619,"line":557},[617,45760,623],{"class":622},[617,45762,627],{"class":626},[617,45764,631],{"class":630},[617,45766,634],{"class":630},[617,45768,637],{"class":622},[617,45770,640],{"class":622},[617,45772,644],{"class":643},[617,45774,640],{"class":622},[617,45776,649],{"class":622},[617,45778,45779,45781,45783,45785,45787,45789,45791,45793],{"class":619,"line":558},[617,45780,657],{"class":656},[617,45782,660],{"class":622},[617,45784,695],{"class":663},[617,45786,673],{"class":622},[617,45788,676],{"class":656},[617,45790,679],{"class":622},[617,45792,704],{"class":643},[617,45794,685],{"class":622},[617,45796,45798,45800,45802,45804,45806,45808,45810,45812],{"class":45797,"line":688},[619,653],[617,45799,657],{"class":656},[617,45801,660],{"class":622},[617,45803,45027],{"class":663},[617,45805,673],{"class":622},[617,45807,676],{"class":656},[617,45809,679],{"class":622},[617,45811,682],{"class":643},[617,45813,685],{"class":622},[617,45815,45816,45818,45820,45822,45824,45826,45828,45830],{"class":619,"line":709},[617,45817,657],{"class":656},[617,45819,660],{"class":622},[617,45821,3478],{"class":663},[617,45823,673],{"class":622},[617,45825,676],{"class":656},[617,45827,679],{"class":622},[617,45829,613],{"class":643},[617,45831,685],{"class":622},[617,45833,45834],{"class":619,"line":719},[617,45835,722],{"emptyLinePlaceholder":574},[617,45837,45838,45840,45842,45844,45846],{"class":619,"line":725},[617,45839,2395],{"class":630},[617,45841,45239],{"class":663},[617,45843,637],{"class":622},[617,45845,3478],{"class":2414},[617,45847,6515],{"class":663},[617,45849,45850,45852,45854],{"class":619,"line":735},[617,45851,712],{"class":622},[617,45853,627],{"class":626},[617,45855,649],{"class":622},[617,45857,45858],{"class":619,"line":758},[617,45859,722],{"emptyLinePlaceholder":574},[617,45861,45862,45864,45866],{"class":619,"line":770},[617,45863,623],{"class":622},[617,45865,730],{"class":626},[617,45867,649],{"class":622},[617,45869,45870,45872,45874],{"class":619,"line":780},[617,45871,738],{"class":622},[617,45873,741],{"class":626},[617,45875,649],{"class":622},[617,45877,45878,45880,45882,45884,45886,45888,45890,45892],{"class":619,"line":785},[617,45879,761],{"class":622},[617,45881,764],{"class":626},[617,45883,1465],{"class":630},[617,45885,637],{"class":622},[617,45887,640],{"class":622},[617,45889,39494],{"class":643},[617,45891,640],{"class":622},[617,45893,767],{"class":622},[617,45895,45896,45898,45900],{"class":619,"line":807},[617,45897,761],{"class":622},[617,45899,836],{"class":626},[617,45901,649],{"class":622},[617,45903,45904,45906,45908],{"class":619,"line":611},[617,45905,833],{"class":622},[617,45907,3938],{"class":626},[617,45909,767],{"class":622},[617,45911,45913,45915],{"class":45912,"line":830},[619,653],[617,45914,833],{"class":622},[617,45916,45611],{"class":626},[617,45918,45920,45923,45925,45927,45929],{"class":45919,"line":841},[619,653],[617,45921,45922],{"class":630}," :directional-light",[617,45924,637],{"class":622},[617,45926,640],{"class":622},[617,45928,45324],{"class":643},[617,45930,3111],{"class":622},[617,45932,45934,45937,45939,45941,45943],{"class":45933,"line":852},[619,653],[617,45935,45936],{"class":630}," :mix-color",[617,45938,637],{"class":622},[617,45940,640],{"class":622},[617,45942,44086],{"class":643},[617,45944,3111],{"class":622},[617,45946,45948,45951,45953,45955,45957],{"class":45947,"line":862},[619,653],[617,45949,45950],{"class":630}," :mix-alpha",[617,45952,637],{"class":622},[617,45954,640],{"class":622},[617,45956,1926],{"class":643},[617,45958,3111],{"class":622},[617,45960,45962,45965,45967,45969,45971],{"class":45961,"line":612},[619,653],[617,45963,45964],{"class":630}," :mix-size",[617,45966,637],{"class":622},[617,45968,640],{"class":622},[617,45970,5709],{"class":643},[617,45972,3111],{"class":622},[617,45974,45975],{"class":619,"line":882},[617,45976,8013],{"class":622},[617,45978,45979,45981,45983],{"class":619,"line":892},[617,45980,875],{"class":622},[617,45982,836],{"class":626},[617,45984,649],{"class":622},[617,45986,45987,45989],{"class":619,"line":2605},[617,45988,761],{"class":622},[617,45990,15217],{"class":626},[617,45992,45993,45995,45997,45999,46001],{"class":619,"line":2614},[617,45994,10413],{"class":630},[617,45996,637],{"class":622},[617,45998,640],{"class":622},[617,46000,45324],{"class":643},[617,46002,3111],{"class":622},[617,46004,46005,46007,46009,46011,46013],{"class":619,"line":2634},[617,46006,15235],{"class":630},[617,46008,637],{"class":622},[617,46010,640],{"class":622},[617,46012,11330],{"class":643},[617,46014,3111],{"class":622},[617,46016,46017],{"class":619,"line":2643},[617,46018,15248],{"class":622},[617,46020,46021,46023,46025],{"class":619,"line":2652},[617,46022,761],{"class":622},[617,46024,8436],{"class":626},[617,46026,767],{"class":622},[617,46028,46029,46031,46033],{"class":619,"line":2661},[617,46030,885],{"class":622},[617,46032,741],{"class":626},[617,46034,649],{"class":622},[617,46036,46037,46039,46041],{"class":619,"line":2683},[617,46038,712],{"class":622},[617,46040,730],{"class":626},[617,46042,649],{"class":622},[484,46044,902],{"id":901},[907,46046,46047,46055],{},[910,46048,46049],{},[913,46050,46051,46053],{},[916,46052,8069],{"align":977},[916,46054,921],{"align":977},[926,46056,46057,46079,46112,46134,46154,46174,46194,46215,46235,46255,46275,46294,46313,46332,46352,46379,46400,46422,46442,46463,46484,46518,46539,46559,46580,46600,46620,46642,46661],{},[913,46058,46059,46063],{},[931,46060,46061],{"align":977},[1649,46062,2961],{},[931,46064,46065,46066,46068,46070,46071,46074,46076,46078],{"align":977},"Type: ",[598,46067,38088],{},[7535,46069],{},"Default: ",[598,46072,46073],{},"'https://raw.githubusercontent.com/Tresjs/asset...'",[7535,46075],{},[7535,46077],{},"Texture or image path for individual sparkles",[913,46080,46081,46085],{},[931,46082,46083],{"align":977},[1649,46084,5236],{},[931,46086,46065,46087,46090,46070,46092,46094,46096,46098,46099,46101],{"align":977},[598,46088,46089],{},"Object3D | BufferGeometry",[7535,46091],{},[598,46093,1159],{},[7535,46095],{},[7535,46097],{},"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.",[7535,46100],{},[2193,46102,46103,46106,46109],{},[2196,46104,46105],{},"If provided, the component will use the passed geometry.",[2196,46107,46108],{},"If no geometry is provided, the component will try to make a copy of the parent object's geometry.",[2196,46110,46111],{},"If no parent geometry exists, the component will create and use an IcosphereGeometry.",[913,46113,46114,46118],{},[931,46115,46116],{"align":977},[1649,46117,45749],{},[931,46119,46065,46120,46122,46070,46124,46126,46128,46130,46131,46133],{"align":977},[598,46121,7602],{},[7535,46123],{},[598,46125,1159],{},[7535,46127],{},[7535,46129],{},"Particles \"light up\" when their normal \"faces\" the light. If no ",[598,46132,45749],{}," is provided, the default \"up\" vector will be used.",[913,46135,46136,46141],{},[931,46137,46138],{"align":977},[1649,46139,46140],{},"lifetimeSec",[931,46142,46065,46143,46145,46070,46147,46149,46151,46153],{"align":977},[598,46144,5332],{},[7535,46146],{},[598,46148,36045],{},[7535,46150],{},[7535,46152],{},"Particle lifetime in seconds",[913,46155,46156,46161],{},[931,46157,46158],{"align":977},[1649,46159,46160],{},"cooldownSec",[931,46162,46065,46163,46165,46070,46167,46169,46171,46173],{"align":977},[598,46164,5332],{},[7535,46166],{},[598,46168,11770],{},[7535,46170],{},[7535,46172],{},"Particle cooldown in seconds – time between lifetime end and respawn",[913,46175,46176,46181],{},[931,46177,46178],{"align":977},[1649,46179,46180],{},"normalThreshold",[931,46182,46065,46183,46185,46070,46187,46189,46191,46193],{"align":977},[598,46184,5332],{},[7535,46186],{},[598,46188,44481],{},[7535,46190],{},[7535,46192],{},"Number from 0-1 indicating how closely the particle needs to be faced towards the light to \"light up\". (Lower == more flexible)",[913,46195,46196,46201],{},[931,46197,46198],{"align":977},[1649,46199,46200],{},"noiseScale",[931,46202,46065,46203,46205,46070,46207,46210,46212,46214],{"align":977},[598,46204,5332],{},[7535,46206],{},[598,46208,46209],{},"3.0",[7535,46211],{},[7535,46213],{},"Scale of the noise period (lower == more slowly cycling noise)",[913,46216,46217,46222],{},[931,46218,46219],{"align":977},[1649,46220,46221],{},"scaleNoise",[931,46223,46065,46224,46226,46070,46228,46230,46232,46234],{"align":977},[598,46225,5332],{},[7535,46227],{},[598,46229,11711],{},[7535,46231],{},[7535,46233],{},"Noise coefficient applied to particle scale",[913,46236,46237,46242],{},[931,46238,46239],{"align":977},[1649,46240,46241],{},"offsetNoise",[931,46243,46065,46244,46246,46070,46248,46250,46252,46254],{"align":977},[598,46245,5332],{},[7535,46247],{},[598,46249,2143],{},[7535,46251],{},[7535,46253],{},"Noise coefficient applied to particle offset",[913,46256,46257,46262],{},[931,46258,46259],{"align":977},[1649,46260,46261],{},"lifetimeNoise",[931,46263,46065,46264,46266,46070,46268,46270,46272,46274],{"align":977},[598,46265,5332],{},[7535,46267],{},[598,46269,11833],{},[7535,46271],{},[7535,46273],{},"Noise coefficient applied to particle lifetime",[913,46276,46277,46281],{},[931,46278,46279],{"align":977},[1649,46280,14703],{},[931,46282,46065,46283,46285,46070,46287,46289,46291,46293],{"align":977},[598,46284,5332],{},[7535,46286],{},[598,46288,11711],{},[7535,46290],{},[7535,46292],{},"Particle scale multiplier",[913,46295,46296,46300],{},[931,46297,46298],{"align":977},[1649,46299,43151],{},[931,46301,46065,46302,46304,46070,46306,46308,46310,46312],{"align":977},[598,46303,5332],{},[7535,46305],{},[598,46307,11711],{},[7535,46309],{},[7535,46311],{},"Opacity multiplier",[913,46314,46315,46319],{},[931,46316,46317],{"align":977},[1649,46318,37286],{},[931,46320,46065,46321,46323,46070,46325,46327,46329,46331],{"align":977},[598,46322,5332],{},[7535,46324],{},[598,46326,11711],{},[7535,46328],{},[7535,46330],{},"Offset multiplier",[913,46333,46334,46339],{},[931,46335,46336],{"align":977},[1649,46337,46338],{},"surfaceDistance",[931,46340,46065,46341,46343,46070,46345,46347,46349,46351],{"align":977},[598,46342,5332],{},[7535,46344],{},[598,46346,11711],{},[7535,46348],{},[7535,46350],{},"Surface distance multiplier",[913,46353,46354,46359],{},[931,46355,46356],{"align":977},[1649,46357,46358],{},"sequenceColor",[931,46360,46065,46361,46363,46070,46365,46368,46370,2420,46372,46375,46376,46378],{"align":977},[598,46362,45462],{},[7535,46364],{},[598,46366,46367],{},"[[0.7, '#82dbc5'], [0.8, '#fbb03b']]",[7535,46369],{},[7535,46371],{},[1654,46373,46374],{},"Sequence' props: specify how a particle changes as it \"progresses\". See also \"mix","\" props.",[7535,46377],{},"Color sequence as particles progress",[913,46380,46381,46386],{},[931,46382,46383],{"align":977},[1649,46384,46385],{},"sequenceAlpha",[931,46387,46065,46388,46391,46070,46393,46395,46397,46399],{"align":977},[598,46389,46390],{},"Gradient\u003Cnumber>",[7535,46392],{},[598,46394,45638],{},[7535,46396],{},[7535,46398],{},"Opacity sequence as particles progress",[913,46401,46402,46407],{},[931,46403,46404],{"align":977},[1649,46405,46406],{},"sequenceOffset",[931,46408,46065,46409,46412,46070,46414,46417,46419,46421],{"align":977},[598,46410,46411],{},"Gradient\u003C[number, number, number]>",[7535,46413],{},[598,46415,46416],{},"[0.0, 0.0, 0.0]",[7535,46418],{},[7535,46420],{},"Distance sequence as particles progress",[913,46423,46424,46429],{},[931,46425,46426],{"align":977},[1649,46427,46428],{},"sequenceNoise",[931,46430,46065,46431,46433,46070,46435,46437,46439,46441],{"align":977},[598,46432,46411],{},[7535,46434],{},[598,46436,9965],{},[7535,46438],{},[7535,46440],{},"Noise sequence as particles progress",[913,46443,46444,46449],{},[931,46445,46446],{"align":977},[1649,46447,46448],{},"sequenceSize",[931,46450,46065,46451,46453,46070,46455,46458,46460,46462],{"align":977},[598,46452,46390],{},[7535,46454],{},[598,46456,46457],{},"[0.0, 1.0]",[7535,46459],{},[7535,46461],{},"Size sequence as particles progress",[913,46464,46465,46470],{},[931,46466,46467],{"align":977},[1649,46468,46469],{},"sequenceSurfaceDistance",[931,46471,46065,46472,46474,46070,46476,46479,46481,46483],{"align":977},[598,46473,46390],{},[7535,46475],{},[598,46477,46478],{},"[0.05, 0.08, 0.1]",[7535,46480],{},[7535,46482],{},"Distance from surface (along normal) as particles progress",[913,46485,46486,46491],{},[931,46487,46488],{"align":977},[1649,46489,46490],{},"mixColor",[931,46492,46065,46493,46495,46070,46497,46499,46501,46503,46504,46506,46514,46515,46517],{"align":977},[598,46494,5332],{},[7535,46496],{},[598,46498,1926],{},[7535,46500],{},[7535,46502],{},"'mix*' props: A particle \"progresses\" with a mix of two factors:",[7535,46505],{},[2193,46507,46508,46511],{},[2196,46509,46510],{},"its normal \"facing\" the directionalLight",[2196,46512,46513],{},"its lifetime","'mix*' props specify the relationship between the two factors.",[7535,46516],{},"How is a particle's progress for color calculated? (0: normal, 1: particle lifetime)",[913,46519,46520,46525],{},[931,46521,46522],{"align":977},[1649,46523,46524],{},"mixAlpha",[931,46526,46065,46527,46529,46070,46531,46534,46536,46538],{"align":977},[598,46528,5332],{},[7535,46530],{},[598,46532,46533],{},"1.",[7535,46535],{},[7535,46537],{},"How is a particle's progress for alpha calculated? (0: normal, 1: particle lifetime)",[913,46540,46541,46546],{},[931,46542,46543],{"align":977},[1649,46544,46545],{},"mixOffset",[931,46547,46065,46548,46550,46070,46552,46554,46556,46558],{"align":977},[598,46549,5332],{},[7535,46551],{},[598,46553,46533],{},[7535,46555],{},[7535,46557],{},"How is a particle's progress for offset calculated? (0: normal, 1: particle lifetime)",[913,46560,46561,46566],{},[931,46562,46563],{"align":977},[1649,46564,46565],{},"mixSize",[931,46567,46065,46568,46570,46070,46572,46575,46577,46579],{"align":977},[598,46569,5332],{},[7535,46571],{},[598,46573,46574],{},"0.",[7535,46576],{},[7535,46578],{},"How is a particle's progress for size calculated? (0: normal, 1: particle lifetime)",[913,46581,46582,46587],{},[931,46583,46584],{"align":977},[1649,46585,46586],{},"mixSurfaceDistance",[931,46588,46065,46589,46591,46070,46593,46595,46597,46599],{"align":977},[598,46590,5332],{},[7535,46592],{},[598,46594,46533],{},[7535,46596],{},[7535,46598],{},"How is a particle's progress for surface distance calculated? (0: normal, 1: particle lifetime)",[913,46601,46602,46607],{},[931,46603,46604],{"align":977},[1649,46605,46606],{},"mixNoise",[931,46608,46065,46609,46611,46070,46613,46615,46617,46619],{"align":977},[598,46610,5332],{},[7535,46612],{},[598,46614,46533],{},[7535,46616],{},[7535,46618],{},"How is a particle's progress for lifetime calculated? (0: normal, 1: particle lifetime)",[913,46621,46622,46627],{},[931,46623,46624],{"align":977},[1649,46625,46626],{},"blending",[931,46628,46065,46629,46632,46070,46634,46637,46639,46641],{"align":977},[598,46630,46631],{},"Blending",[7535,46633],{},[598,46635,46636],{},"AdditiveBlending",[7535,46638],{},[7535,46640],{},"Material blending",[913,46643,46644,46648],{},[931,46645,46646],{"align":977},[1649,46647,9672],{},[931,46649,46065,46650,46652,46070,46654,46656,46658,46660],{"align":977},[598,46651,15441],{},[7535,46653],{},[598,46655,941],{},[7535,46657],{},[7535,46659],{},"Material transparency",[913,46662,46663,46667],{},[931,46664,46665],{"align":977},[1649,46666,9167],{},[931,46668,46065,46669,46671,46070,46673,46675,46677,46679],{"align":977},[598,46670,15441],{},[7535,46672],{},[598,46674,951],{},[7535,46676],{},[7535,46678],{},"Material depth write",[1307,46681,46682],{},"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}",{"title":556,"searchDepth":557,"depth":558,"links":46684},[46685,46691],{"id":604,"depth":558,"text":15,"children":46686},[46687,46688,46689,46690],{"id":44972,"depth":688,"text":44973},{"id":45143,"depth":688,"text":45144},{"id":45410,"depth":688,"text":45411},{"id":45694,"depth":688,"text":45695},{"id":901,"depth":558,"text":902},"Makes sparkles on geometry vertices, optionally guided by directional light.",{},{"title":387,"description":46692},"HM8JeL6MyPB0GIa8xnkj-A_wEWc2xfe0JgLNTCfq1Wg",{"id":46697,"title":391,"body":46698,"description":47344,"extension":571,"links":572,"meta":47345,"navigation":574,"path":392,"seo":47346,"stem":393,"__hash__":47347},"docs/2.api/8.staging/stage.md",{"type":481,"value":46699,"toc":47338},[46700,46705,46708,46722,46741,46791,46793,47120,47122,47234,47238,47241,47323,47335],[2275,46701,46702],{},[46703,46704],"staging-stage",{},[594,46706,46707],{},"This component creates a \"stage\" for your models. It sets up:",[2193,46709,46710,46713,46716,46719],{},[2196,46711,46712],{},"model lighting",[2196,46714,46715],{},"ground shadows",[2196,46717,46718],{},"zoom to fit",[2196,46720,46721],{},"environment",[1985,46723,46724,46727],{},[594,46725,46726],{},"If you are using other camera controls, be sure to make them the 'default'.",[606,46728,46729],{"className":608,"code":2010,"language":613,"meta":556,"style":556},[598,46730,46731],{"__ignoreMap":556},[617,46732,46733,46735,46737,46739],{"class":619,"line":557},[617,46734,623],{"class":622},[617,46736,775],{"class":626},[617,46738,1831],{"class":630},[617,46740,767],{"class":622},[1985,46742,46743,46746,46761],{},[594,46744,46745],{},"If you are using shadows='accumulative', enable shadows on your canvas and on your objects.",[606,46747,46749],{"className":608,"code":46748,"language":613,"meta":556,"style":556},"\u003CTresCanvas shadows />\n",[598,46750,46751],{"__ignoreMap":556},[617,46752,46753,46755,46757,46759],{"class":619,"line":557},[617,46754,623],{"class":622},[617,46756,741],{"class":626},[617,46758,39477],{"class":630},[617,46760,767],{"class":622},[606,46762,46764],{"className":608,"code":46763,"language":613,"meta":556,"style":556},"\u003CTresMesh cast-shadow />\n ...\n\u003C/TresMesh>\n",[598,46765,46766,46776,46780],{"__ignoreMap":556},[617,46767,46768,46770,46772,46774],{"class":619,"line":557},[617,46769,623],{"class":622},[617,46771,836],{"class":626},[617,46773,14342],{"class":630},[617,46775,767],{"class":622},[617,46777,46778],{"class":619,"line":558},[617,46779,12005],{"class":663},[617,46781,46782,46784,46787,46789],{"class":619,"line":688},[617,46783,623],{"class":622},[617,46785,46786],{"class":663},"/",[617,46788,836],{"class":626},[617,46790,649],{"class":622},[484,46792,15],{"id":604},[606,46794,46797],{"className":608,"code":46795,"highlights":46796,"language":613,"meta":556,"style":556},"\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",[688,780,785,807,611,830,841],[598,46798,46799,46819,46837,46865,46873,46877,46885,46895,46913,46923,46931,46946,46961,46975,46989,47002,47006,47016,47024,47042,47050,47080,47088,47096,47104,47112],{"__ignoreMap":556},[617,46800,46801,46803,46805,46807,46809,46811,46813,46815,46817],{"class":619,"line":557},[617,46802,623],{"class":622},[617,46804,627],{"class":626},[617,46806,631],{"class":630},[617,46808,634],{"class":630},[617,46810,637],{"class":622},[617,46812,640],{"class":622},[617,46814,644],{"class":643},[617,46816,640],{"class":622},[617,46818,649],{"class":622},[617,46820,46821,46823,46825,46827,46829,46831,46833,46835],{"class":619,"line":558},[617,46822,657],{"class":656},[617,46824,660],{"class":622},[617,46826,695],{"class":663},[617,46828,673],{"class":622},[617,46830,676],{"class":656},[617,46832,679],{"class":622},[617,46834,704],{"class":643},[617,46836,685],{"class":622},[617,46838,46840,46842,46844,46847,46849,46851,46853,46855,46857,46859,46861,46863],{"class":46839,"line":688},[619,653],[617,46841,657],{"class":656},[617,46843,660],{"class":622},[617,46845,46846],{"class":663}," Stage",[617,46848,667],{"class":622},[617,46850,670],{"class":663},[617,46852,667],{"class":622},[617,46854,40020],{"class":663},[617,46856,673],{"class":622},[617,46858,676],{"class":656},[617,46860,679],{"class":622},[617,46862,682],{"class":643},[617,46864,685],{"class":622},[617,46866,46867,46869,46871],{"class":619,"line":709},[617,46868,712],{"class":622},[617,46870,627],{"class":626},[617,46872,649],{"class":622},[617,46874,46875],{"class":619,"line":719},[617,46876,722],{"emptyLinePlaceholder":574},[617,46878,46879,46881,46883],{"class":619,"line":725},[617,46880,623],{"class":622},[617,46882,730],{"class":626},[617,46884,649],{"class":622},[617,46886,46887,46889,46891,46893],{"class":619,"line":735},[617,46888,738],{"class":622},[617,46890,741],{"class":626},[617,46892,39477],{"class":630},[617,46894,649],{"class":622},[617,46896,46897,46899,46901,46903,46905,46907,46909,46911],{"class":619,"line":758},[617,46898,761],{"class":622},[617,46900,764],{"class":626},[617,46902,1465],{"class":630},[617,46904,637],{"class":622},[617,46906,640],{"class":622},[617,46908,39494],{"class":643},[617,46910,640],{"class":622},[617,46912,767],{"class":622},[617,46914,46915,46917,46919,46921],{"class":619,"line":770},[617,46916,761],{"class":622},[617,46918,775],{"class":626},[617,46920,1831],{"class":630},[617,46922,767],{"class":622},[617,46924,46926,46928],{"class":46925,"line":780},[619,653],[617,46927,761],{"class":622},[617,46929,46930],{"class":626},"Stage\n",[617,46932,46934,46937,46939,46941,46944],{"class":46933,"line":785},[619,653],[617,46935,46936],{"class":630}," lighting",[617,46938,637],{"class":622},[617,46940,640],{"class":622},[617,46942,46943],{"class":643},"rembrandt",[617,46945,3111],{"class":622},[617,46947,46949,46952,46954,46956,46959],{"class":46948,"line":807},[619,653],[617,46950,46951],{"class":630}," shadows",[617,46953,637],{"class":622},[617,46955,640],{"class":622},[617,46957,46958],{"class":643},"contact",[617,46960,3111],{"class":622},[617,46962,46964,46967,46969,46971,46973],{"class":46963,"line":611},[619,653],[617,46965,46966],{"class":630}," :adjust-camera",[617,46968,637],{"class":622},[617,46970,640],{"class":622},[617,46972,941],{"class":643},[617,46974,3111],{"class":622},[617,46976,46978,46981,46983,46985,46987],{"class":46977,"line":830},[619,653],[617,46979,46980],{"class":630}," environment",[617,46982,637],{"class":622},[617,46984,640],{"class":622},[617,46986,26098],{"class":643},[617,46988,3111],{"class":622},[617,46990,46992,46994,46996,46998,47000],{"class":46991,"line":841},[619,653],[617,46993,15222],{"class":630},[617,46995,637],{"class":622},[617,46997,640],{"class":622},[617,46999,1926],{"class":643},[617,47001,3111],{"class":622},[617,47003,47004],{"class":619,"line":852},[617,47005,10441],{"class":622},[617,47007,47008,47010,47012,47014],{"class":619,"line":862},[617,47009,833],{"class":622},[617,47011,836],{"class":626},[617,47013,14342],{"class":630},[617,47015,649],{"class":622},[617,47017,47018,47020,47022],{"class":619,"line":612},[617,47019,844],{"class":622},[617,47021,847],{"class":626},[617,47023,767],{"class":622},[617,47025,47026,47028,47030,47032,47034,47036,47038,47040],{"class":619,"line":882},[617,47027,844],{"class":622},[617,47029,2666],{"class":626},[617,47031,2669],{"class":630},[617,47033,637],{"class":622},[617,47035,640],{"class":622},[617,47037,11377],{"class":643},[617,47039,640],{"class":622},[617,47041,767],{"class":622},[617,47043,47044,47046,47048],{"class":619,"line":892},[617,47045,865],{"class":622},[617,47047,836],{"class":626},[617,47049,649],{"class":622},[617,47051,47052,47054,47056,47058,47060,47062,47064,47066,47068,47070,47072,47074,47076,47078],{"class":619,"line":2605},[617,47053,833],{"class":622},[617,47055,245],{"class":626},[617,47057,1465],{"class":630},[617,47059,637],{"class":622},[617,47061,640],{"class":622},[617,47063,36825],{"class":643},[617,47065,640],{"class":622},[617,47067,39730],{"class":630},[617,47069,1939],{"class":630},[617,47071,637],{"class":622},[617,47073,640],{"class":622},[617,47075,36860],{"class":643},[617,47077,640],{"class":622},[617,47079,649],{"class":622},[617,47081,47082,47084,47086],{"class":619,"line":2614},[617,47083,844],{"class":622},[617,47085,2666],{"class":626},[617,47087,767],{"class":622},[617,47089,47090,47092,47094],{"class":619,"line":2634},[617,47091,865],{"class":622},[617,47093,245],{"class":626},[617,47095,649],{"class":622},[617,47097,47098,47100,47102],{"class":619,"line":2643},[617,47099,875],{"class":622},[617,47101,391],{"class":626},[617,47103,649],{"class":622},[617,47105,47106,47108,47110],{"class":619,"line":2652},[617,47107,885],{"class":622},[617,47109,741],{"class":626},[617,47111,649],{"class":622},[617,47113,47114,47116,47118],{"class":619,"line":2661},[617,47115,712],{"class":622},[617,47117,730],{"class":626},[617,47119,649],{"class":622},[484,47121,902],{"id":901},[907,47123,47124,47134],{},[910,47125,47126],{},[913,47127,47128,47130,47132],{},[916,47129,918],{"align":977},[916,47131,921],{"align":977},[916,47133,924],{"align":977},[926,47135,47136,47154,47172,47190,47204,47220],{},[913,47137,47138,47143,47149],{},[931,47139,47140],{"align":977},[1649,47141,47142],{},"lighting",[931,47144,47145,47146],{"align":977},"Lighting setup. Options: ",[598,47147,47148],{},"null | undefined | false | 'rembrandt' | 'portrait' | 'upfront' | 'soft' | { main: [x, y, z], fill: [x, y, z] }",[931,47150,47151],{"align":977},[598,47152,47153],{},"'rembrandt'",[913,47155,47156,47161,47167],{},[931,47157,47158],{"align":977},[1649,47159,47160],{},"shadows",[931,47162,47163,47164],{"align":977},"Controls the ground shadows. Options: ",[598,47165,47166],{},"boolean | 'contact' | 'accumulative' | StageShadows",[931,47168,47169],{"align":977},[598,47170,47171],{},"'contact'",[913,47173,47174,47179,47186],{},[931,47175,47176],{"align":977},[1649,47177,47178],{},"adjustCamera",[931,47180,47181,47182,47185],{"align":977},"Optionally wraps and thereby centers the models using ",[598,47183,47184],{},"\u003CBounds>",", can also be a camera offset",[931,47187,47188],{"align":977},[598,47189,941],{},[913,47191,47192,47196,47199],{},[931,47193,47194],{"align":977},[1649,47195,46721],{},[931,47197,47198],{"align":977},"The default environment",[931,47200,47201],{"align":977},[598,47202,47203],{},"'city'",[913,47205,47206,47210,47216],{},[931,47207,47208],{"align":977},[1649,47209,2045],{},[931,47211,47212,47213,47215],{"align":977},"Lighting intensity, ",[598,47214,945],{}," removes lights",[931,47217,47218],{"align":977},[598,47219,1926],{},[913,47221,47222,47227,47230],{},[931,47223,47224],{"align":977},[1649,47225,47226],{},"align",[931,47228,47229],{"align":977},"To adjust alignment",[931,47231,47232],{"align":977},[598,47233,1159],{},[4031,47235,47237],{"id":47236},"stageshadows-type","StageShadows Type",[594,47239,47240],{},"When using custom shadow configuration, you can pass an object with the following properties:",[907,47242,47243,47253],{},[910,47244,47245],{},[913,47246,47247,47249,47251],{},[916,47248,918],{"align":977},[916,47250,921],{"align":977},[916,47252,924],{"align":977},[926,47254,47255,47269,47282,47296,47310],{},[913,47256,47257,47261,47267],{},[931,47258,47259],{"align":977},[1649,47260,5497],{},[931,47262,47263,47264],{"align":977},"Shadow type: ",[598,47265,47266],{},"'contact' | 'accumulative'",[931,47268,32589],{"align":977},[913,47270,47271,47275,47278],{},[931,47272,47273],{"align":977},[1649,47274,37286],{},[931,47276,47277],{"align":977},"Shadow plane offset",[931,47279,47280],{"align":977},[598,47281,945],{},[913,47283,47284,47288,47291],{},[931,47285,47286],{"align":977},[1649,47287,39872],{},[931,47289,47290],{"align":977},"Shadow bias",[931,47292,47293],{"align":977},[598,47294,47295],{},"-0.0001",[913,47297,47298,47303,47306],{},[931,47299,47300],{"align":977},[1649,47301,47302],{},"normalBias",[931,47304,47305],{"align":977},"Shadow normal bias",[931,47307,47308],{"align":977},[598,47309,945],{},[913,47311,47312,47316,47319],{},[931,47313,47314],{"align":977},[1649,47315,14703],{},[931,47317,47318],{"align":977},"Shadow map size",[931,47320,47321],{"align":977},[598,47322,36342],{},[594,47324,47325,47326,1652,47329,1668,47332,1126],{},"Additionally inherits all props from ",[598,47327,47328],{},"AccumulativeShadowsProps",[598,47330,47331],{},"RandomizedLightsProps",[598,47333,47334],{},"ContactShadowsProps",[1307,47336,47337],{},"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}",{"title":556,"searchDepth":557,"depth":558,"links":47339},[47340,47341],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902,"children":47342},[47343],{"id":47236,"depth":688,"text":47237},"Creates a complete stage setup with lighting, shadows, and environment.",{},{"title":391,"description":47344},"hSS8yTJaUJKvnoLWg1iE6UZbvoW8pB9UqSUcFjHv5sQ",{"id":47349,"title":395,"body":47350,"description":47623,"extension":571,"links":572,"meta":47624,"navigation":574,"path":396,"seo":47625,"stem":397,"__hash__":47626},"docs/2.api/8.staging/stars.md",{"type":481,"value":47351,"toc":47619},[47352,47357,47363,47365,47370,47513,47515,47617],[588,47353,47354],{},[47355,47356],"staging-stars",{},[594,47358,47359,47362],{},[598,47360,47361],{},"\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",[484,47364,15],{"id":604},[594,47366,43224,47367,47369],{},[598,47368,47361],{}," component without passing any props,",[606,47371,47374],{"className":608,"code":47372,"highlights":47373,"language":613,"meta":556,"style":556},"\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",[688,770],[598,47375,47376,47396,47414,47434,47442,47446,47454,47462,47480,47489,47497,47505],{"__ignoreMap":556},[617,47377,47378,47380,47382,47384,47386,47388,47390,47392,47394],{"class":619,"line":557},[617,47379,623],{"class":622},[617,47381,627],{"class":626},[617,47383,631],{"class":630},[617,47385,634],{"class":630},[617,47387,637],{"class":622},[617,47389,640],{"class":622},[617,47391,644],{"class":643},[617,47393,640],{"class":622},[617,47395,649],{"class":622},[617,47397,47398,47400,47402,47404,47406,47408,47410,47412],{"class":619,"line":558},[617,47399,657],{"class":656},[617,47401,660],{"class":622},[617,47403,695],{"class":663},[617,47405,673],{"class":622},[617,47407,676],{"class":656},[617,47409,679],{"class":622},[617,47411,704],{"class":643},[617,47413,685],{"class":622},[617,47415,47417,47419,47421,47424,47426,47428,47430,47432],{"class":47416,"line":688},[619,653],[617,47418,657],{"class":656},[617,47420,660],{"class":622},[617,47422,47423],{"class":663}," Stars",[617,47425,673],{"class":622},[617,47427,676],{"class":656},[617,47429,679],{"class":622},[617,47431,682],{"class":643},[617,47433,685],{"class":622},[617,47435,47436,47438,47440],{"class":619,"line":709},[617,47437,712],{"class":622},[617,47439,627],{"class":626},[617,47441,649],{"class":622},[617,47443,47444],{"class":619,"line":719},[617,47445,722],{"emptyLinePlaceholder":574},[617,47447,47448,47450,47452],{"class":619,"line":725},[617,47449,623],{"class":622},[617,47451,730],{"class":626},[617,47453,649],{"class":622},[617,47455,47456,47458,47460],{"class":619,"line":735},[617,47457,738],{"class":622},[617,47459,741],{"class":626},[617,47461,649],{"class":622},[617,47463,47464,47466,47468,47470,47472,47474,47476,47478],{"class":619,"line":758},[617,47465,761],{"class":622},[617,47467,764],{"class":626},[617,47469,1465],{"class":630},[617,47471,637],{"class":622},[617,47473,640],{"class":622},[617,47475,39494],{"class":643},[617,47477,640],{"class":622},[617,47479,767],{"class":622},[617,47481,47483,47485,47487],{"class":47482,"line":770},[619,653],[617,47484,761],{"class":622},[617,47486,395],{"class":626},[617,47488,767],{"class":622},[617,47490,47491,47493,47495],{"class":619,"line":780},[617,47492,761],{"class":622},[617,47494,8436],{"class":626},[617,47496,767],{"class":622},[617,47498,47499,47501,47503],{"class":619,"line":785},[617,47500,885],{"class":622},[617,47502,741],{"class":626},[617,47504,649],{"class":622},[617,47506,47507,47509,47511],{"class":619,"line":807},[617,47508,712],{"class":622},[617,47510,730],{"class":626},[617,47512,649],{"class":622},[484,47514,902],{"id":901},[907,47516,47517,47527],{},[910,47518,47519],{},[913,47520,47521,47523,47525],{},[916,47522,918],{"align":977},[916,47524,921],{"align":977},[916,47526,924],{},[926,47528,47529,47540,47551,47562,47573,47584,47595,47606],{},[913,47530,47531,47535,47538],{},[931,47532,47533],{"align":977},[1649,47534,14703],{},[931,47536,47537],{"align":977},"The size of the stars",[931,47539,2143],{},[913,47541,47542,47546,47549],{},[931,47543,47544],{"align":977},[1649,47545,44150],{},[931,47547,47548],{"align":977},"keep the same size regardless distance.",[931,47550,941],{},[913,47552,47553,47557,47560],{},[931,47554,47555],{"align":977},[1649,47556,9672],{},[931,47558,47559],{"align":977},"show transparency on the stars texture",[931,47561,941],{},[913,47563,47564,47568,47571],{},[931,47565,47566],{"align":977},[1649,47567,36293],{},[931,47569,47570],{"align":977},"enables the WebGL to know when not to render the pixeltext.",[931,47572,1866],{},[913,47574,47575,47579,47582],{},[931,47576,47577],{"align":977},[1649,47578,44058],{},[931,47580,47581],{"align":977},"texture of the stars",[931,47583,3636],{},[913,47585,47586,47590,47593],{},[931,47587,47588],{"align":977},[1649,47589,10059],{},[931,47591,47592],{"align":977},"number of stars",[931,47594,44098],{},[913,47596,47597,47601,47604],{},[931,47598,47599],{"align":977},[1649,47600,11134],{},[931,47602,47603],{"align":977},"depth of star's shape",[931,47605,9425],{},[913,47607,47608,47612,47615],{},[931,47609,47610],{"align":977},[1649,47611,39818],{},[931,47613,47614],{"align":977},"Radius of star's shape",[931,47616,29633],{},[1307,47618,1624],{},{"title":556,"searchDepth":557,"depth":558,"links":47620},[47621,47622],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},"Renders beautiful stars in the sky using Points and BufferGeometry.",{},{"title":395,"description":47623},"nf8ELCqPC9wunPJnkUB5dskxDLHX1_sPobCeok4_v9w",[47628,48568,48968,50059,50435,55979,56581,57371,58279,59240],{"id":47629,"title":405,"body":47630,"description":48564,"extension":571,"links":572,"meta":48565,"navigation":574,"path":406,"seo":48566,"stem":407,"__hash__":48567},"docs/2.api/9.objects/animated-sprite.md",{"type":481,"value":47631,"toc":48546},[47632,47637,47652,47660,47662,47852,47862,47866,47872,47886,47895,47899,47906,47925,47929,47937,47941,47966,47968,48295,48297,48365,48368,48374,48378,48381,48386,48389,48401,48416,48418,48421,48458,48461,48473,48477,48485,48495,48501,48504,48534,48537,48544],[588,47633,47634],{},[47635,47636],"objects-animated-sprite",{},[594,47638,47639,47642,47643,47648,47649,47651],{},[598,47640,47641],{},"\u003CAnimatedSprite />"," displays 2D animations defined in a ",[1120,47644,47647],{"href":47645,"rel":47646},"https://en.wikipedia.org/wiki/Texture_atlas",[1124],"texture atlas",". A typical ",[598,47650,47641],{}," will use:",[2193,47653,47654,47657],{},[2196,47655,47656],{},"An image containing multiple sprites",[2196,47658,47659],{},"A JSON atlas containing the individual sprite coordinates in the image",[484,47661,15],{"id":604},[606,47663,47666],{"className":608,"code":47664,"highlights":47665,"language":613,"meta":556,"style":556},"\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",[558,780,785,807,611,830],[598,47667,47668,47688,47708,47712,47734,47742,47746,47754,47762,47770,47778,47793,47808,47823,47828,47836,47844],{"__ignoreMap":556},[617,47669,47670,47672,47674,47676,47678,47680,47682,47684,47686],{"class":619,"line":557},[617,47671,623],{"class":622},[617,47673,627],{"class":626},[617,47675,631],{"class":630},[617,47677,634],{"class":630},[617,47679,637],{"class":622},[617,47681,640],{"class":622},[617,47683,644],{"class":643},[617,47685,640],{"class":622},[617,47687,649],{"class":622},[617,47689,47691,47693,47695,47698,47700,47702,47704,47706],{"class":47690,"line":558},[619,653],[617,47692,657],{"class":656},[617,47694,660],{"class":622},[617,47696,47697],{"class":663}," AnimatedSprite",[617,47699,673],{"class":622},[617,47701,676],{"class":656},[617,47703,679],{"class":622},[617,47705,682],{"class":643},[617,47707,685],{"class":622},[617,47709,47710],{"class":619,"line":688},[617,47711,722],{"emptyLinePlaceholder":574},[617,47713,47714,47716,47719,47721,47723,47725,47727,47730,47732],{"class":619,"line":709},[617,47715,2395],{"class":630},[617,47717,47718],{"class":663}," currentAnimation ",[617,47720,637],{"class":622},[617,47722,3852],{"class":2414},[617,47724,2417],{"class":663},[617,47726,2420],{"class":622},[617,47728,47729],{"class":643},"cientosIdle",[617,47731,2420],{"class":622},[617,47733,2428],{"class":663},[617,47735,47736,47738,47740],{"class":619,"line":719},[617,47737,712],{"class":622},[617,47739,627],{"class":626},[617,47741,649],{"class":622},[617,47743,47744],{"class":619,"line":725},[617,47745,722],{"emptyLinePlaceholder":574},[617,47747,47748,47750,47752],{"class":619,"line":735},[617,47749,623],{"class":622},[617,47751,730],{"class":626},[617,47753,649],{"class":622},[617,47755,47756,47758,47760],{"class":619,"line":758},[617,47757,738],{"class":622},[617,47759,741],{"class":626},[617,47761,649],{"class":622},[617,47763,47764,47766,47768],{"class":619,"line":770},[617,47765,761],{"class":622},[617,47767,19264],{"class":626},[617,47769,649],{"class":622},[617,47771,47773,47775],{"class":47772,"line":780},[619,653],[617,47774,833],{"class":622},[617,47776,47777],{"class":626},"AnimatedSprite\n",[617,47779,47781,47784,47786,47788,47791],{"class":47780,"line":785},[619,653],[617,47782,47783],{"class":630}," image",[617,47785,637],{"class":622},[617,47787,640],{"class":622},[617,47789,47790],{"class":643},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosTexture.png",[617,47792,3111],{"class":622},[617,47794,47796,47799,47801,47803,47806],{"class":47795,"line":807},[619,653],[617,47797,47798],{"class":630}," atlas",[617,47800,637],{"class":622},[617,47802,640],{"class":622},[617,47804,47805],{"class":643},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosAtlas.json",[617,47807,3111],{"class":622},[617,47809,47811,47814,47816,47818,47821],{"class":47810,"line":611},[619,653],[617,47812,47813],{"class":630}," :animation",[617,47815,637],{"class":622},[617,47817,640],{"class":622},[617,47819,47820],{"class":643},"currentAnimation",[617,47822,3111],{"class":622},[617,47824,47826],{"class":47825,"line":830},[619,653],[617,47827,8013],{"class":622},[617,47829,47830,47832,47834],{"class":619,"line":841},[617,47831,875],{"class":622},[617,47833,19264],{"class":626},[617,47835,649],{"class":622},[617,47837,47838,47840,47842],{"class":619,"line":852},[617,47839,885],{"class":622},[617,47841,741],{"class":626},[617,47843,649],{"class":622},[617,47845,47846,47848,47850],{"class":619,"line":862},[617,47847,712],{"class":622},[617,47849,730],{"class":626},[617,47851,649],{"class":622},[3179,47853,47854],{},[594,47855,47856,47858,47859,1126],{},[598,47857,47641],{}," loads resources asynchronously, so it must be wrapped in a ",[598,47860,47861],{},"\u003CSuspense />",[484,47863,47865],{"id":47864},"compiling-an-atlas","Compiling an atlas",[594,47867,47868,47869,47871],{},"In typical usage, ",[598,47870,47641],{}," requires both the URL to a texture of compiled sprite images and a JSON atlas containing information about the sprites in the texture.",[2193,47873,47874,47880],{},[2196,47875,47876],{},[1120,47877,47879],{"href":47790,"rel":47878},[1124],"example compiled texture",[2196,47881,47882],{},[1120,47883,47885],{"href":47805,"rel":47884},[1124],"example JSON atlas",[594,47887,47888,47889,47894],{},"Compiling source images into a texture atlas is usually handled by third-party software. You may find ",[1120,47890,47893],{"href":47891,"rel":47892},"https://www.codeandweb.com/texturepacker",[1124],"TexturePacker"," useful.",[484,47896,47898],{"id":47897},"without-an-atlas","Without an atlas",[594,47900,47901,47902,47905],{},"There may be cases where you don't want to supply an atlas to the ",[598,47903,47904],{},"atlas"," prop. To do so:",[2193,47907,47908,47911,47914,47917],{},[2196,47909,47910],{},"Compile your source images into a single image texture.",[2196,47912,47913],{},"Space each sprite into equally sized columns and rows in the compiled image texture.",[2196,47915,47916],{},"Ensure no extra padding has been added to the compiled image texture.",[2196,47918,47919,47920,47922,47923,1126],{},"Set the ",[598,47921,47904],{}," prop to number of columns, number of rows as ",[598,47924,25845],{},[484,47926,47928],{"id":47927},"spritesheets-in-the-wild","Spritesheets in the wild",[3179,47930,47931],{},[594,47932,47933,47934,47936],{},"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 ",[598,47935,47641],{},". In many cases, it's advisable to recompile the spritesheet.",[4031,47938,47940],{"id":47939},"how-to-recompile-an-existing-spritesheet-image","How to recompile an existing spritesheet image",[2193,47942,47943,47946,47949,47952,47963],{},[2196,47944,47945],{},"Cut individual sprites from the spritesheet and paste them into separate layers in an image editing application, e.g., GIMP.",[2196,47947,47948],{},"Align the layers for animation. Toggling layer visibility on/off will show you how the animation will display, frame to frame.",[2196,47950,47951],{},"Export layers as individual images.",[2196,47953,47954,47955,47957,3174,47960,47962],{},"Name the individual images according to the following pattern: ",[7535,47956],{},[598,47958,47959],{},"[animation name][frame number].[extension]",[7535,47961],{},"E.g., walk000.png, walk001.png, idle000.png, idle001.png",[2196,47964,47965],{},"Compile individual images into an image texture and atlas using a texture packing application, like TexturePacker.",[484,47967,902],{"id":901},[907,47969,47970,47980],{},[910,47971,47972],{},[913,47973,47974,47976,47978],{},[916,47975,8069],{"align":977},[916,47977,921],{"align":977},[916,47979,924],{"align":977},[926,47981,47982,47994,48032,48092,48106,48119,48143,48157,48171,48185,48199,48218,48241,48259,48277],{},[913,47983,47984,47987,47992],{},[931,47985,47986],{"align":977},"image",[931,47988,47989,47991],{"align":977},[598,47990,3552],{}," – URL of the image texture or an image dataURL. This prop is not reactive.",[931,47993],{"align":977},[913,47995,47996,47998,48030],{},[931,47997,47904],{"align":977},[931,47999,48000,48003,48004,48027,48029],{"align":977},[598,48001,48002],{},"string | Atlasish"," – ",[2193,48005,48006,48011,48016,48021],{},[2196,48007,938,48008,48010],{},[598,48009,3552],{},", the URL of the JSON atlas.",[2196,48012,938,48013,48015],{},[598,48014,5332],{},", the number of columns in the texture.",[2196,48017,938,48018,48020],{},[598,48019,25845],{},", the number of columns/rows in the texture.",[2196,48022,938,48023,48026],{},[598,48024,48025],{},"AtlasData",", the atlas as a JS object.",[7535,48028],{},"This prop is not reactive.",[931,48031],{"align":977},[913,48033,48034,48037,48090],{},[931,48035,48036],{"align":977},"definitions",[931,48038,48039,48042,48043,48045,48046,48048,48050,48051,48053,48055,48056],{"align":977},[598,48040,48041],{},"Record\u003Cstring, string>"," – Specify playback frame order and repeated frames (delays). ",[598,48044,48036],{}," is a record where keys are atlas animation names and values are strings containing an animation definition.",[7535,48047],{},[7535,48049],{},"A \"animation definition\" comma-separated string of frame numbers with optional parentheses-surrounded durations.",[7535,48052],{},[7535,48054],{},"Here is how various definition strings convert to arrays of frames for playback:",[2193,48057,48058,48065,48072,48078,48084],{},[2196,48059,48060,48061,48064],{},"\"0,2,1\" - ",[617,48062,48063],{},"0,2,1",", i.e., play frame 0, 2, then 1.",[2196,48066,48067,48068,48071],{},"\"2(10)\" - ",[617,48069,48070],{},"2,2,2,2,2,2,2,2,2,2",", i.e., play from 2 10 times.",[2196,48073,48074,48075],{},"\"1-4\" - ",[617,48076,48077],{},"1,2,3,4",[2196,48079,48080,48081],{},"\"10-5(2)\" - ",[617,48082,48083],{},"10,10,9,9,8,8,7,7,6,6,5,5",[2196,48085,48086,48087],{},"\"1-4(3),10(2)\" - ",[617,48088,48089],{},"1,1,1,2,2,2,3,3,3,4,4,4,10,10",[931,48091],{"align":977},[913,48093,48094,48097,48102],{},[931,48095,48096],{"align":977},"fps",[931,48098,48099,48101],{"align":977},[598,48100,5332],{}," – Desired frames per second of the animation.",[931,48103,48104],{"align":977},[598,48105,25435],{},[913,48107,48108,48110,48115],{},[931,48109,23538],{"align":977},[931,48111,48112,48114],{"align":977},[598,48113,15441],{}," – Whether or not the animation should loop.",[931,48116,48117],{"align":977},[598,48118,941],{},[913,48120,48121,48124,48139],{},[931,48122,48123],{"align":977},"animation",[931,48125,48126,48129,48130,48132,48133,48135,48136,48138],{"align":977},[598,48127,48128],{},"string | [number, number] | number"," – If ",[598,48131,3552],{},", name of the animation to play. If ",[598,48134,25845],{},", start and end frames of the animation. If ",[598,48137,5332],{},", frame number to display.",[931,48140,48141],{"align":977},[598,48142,945],{},[913,48144,48145,48148,48153],{},[931,48146,48147],{"align":977},"paused",[931,48149,48150,48152],{"align":977},[598,48151,15441],{}," – Whether the animation is paused.",[931,48154,48155],{"align":977},[598,48156,951],{},[913,48158,48159,48162,48167],{},[931,48160,48161],{"align":977},"reversed",[931,48163,48164,48166],{"align":977},[598,48165,15441],{}," – Whether to play the animation in reverse.",[931,48168,48169],{"align":977},[598,48170,951],{},[913,48172,48173,48176,48181],{},[931,48174,48175],{"align":977},"flipX",[931,48177,48178,48180],{"align":977},[598,48179,15441],{}," – Whether the sprite should be flipped, left to right.",[931,48182,48183],{"align":977},[598,48184,951],{},[913,48186,48187,48190,48195],{},[931,48188,48189],{"align":977},"resetOnEnd",[931,48191,48192,48194],{"align":977},[598,48193,15441],{}," – For a non-looping animation, when the animation ends, whether to display the zeroth frame.",[931,48196,48197],{"align":977},[598,48198,951],{},[913,48200,48201,48204,48214],{},[931,48202,48203],{"align":977},"asSprite",[931,48205,48206,48208,48209],{"align":977},[598,48207,15441],{}," – Whether to display the object as a THREE.Sprite. ",[1120,48210,48213],{"href":48211,"rel":48212},"https://threejs.org/docs/?q=sprite#api/en/objects/Sprite",[1124],"See THREE.Sprite",[931,48215,48216],{"align":977},[598,48217,941],{},[913,48219,48220,48222,48236],{},[931,48221,26243],{"align":977},[931,48223,48224,48227,48228,48231,48232,48235],{"align":977},[598,48225,48226],{},"TresVector2"," – Anchor point of the object. A value of ",[617,48229,48230],{},"0.5, 0.5"," corresponds to the center. ",[617,48233,48234],{},"0, 0"," is left, bottom.",[931,48237,48238],{"align":977},[598,48239,48240],{},"[0.5, 0.5]",[913,48242,48243,48245,48255],{},[931,48244,36293],{"align":977},[931,48246,48247,48249,48250],{"align":977},[598,48248,5332],{}," – Alpha test value for the material. ",[1120,48251,48254],{"href":48252,"rel":48253},"https://threejs.org/docs/#api/en/materials/Material.alphaTest",[1124],"See THREE.Material.alphaTest",[931,48256,48257],{"align":977},[598,48258,11833],{},[913,48260,48261,48263,48273],{},[931,48262,44874],{"align":977},[931,48264,48265,48267,48268],{"align":977},[598,48266,15441],{}," – Depth test value for the material. ",[1120,48269,48272],{"href":48270,"rel":48271},"https://threejs.org/docs/#api/en/materials/Material.depthTest",[1124],"See THREE.Material.depthTest",[931,48274,48275],{"align":977},[598,48276,941],{},[913,48278,48279,48281,48291],{},[931,48280,9167],{"align":977},[931,48282,48283,48285,48286],{"align":977},[598,48284,15441],{}," – Depth write value for the material. ",[1120,48287,48290],{"href":48288,"rel":48289},"https://threejs.org/docs/#api/en/materials/Material.depthWrite",[1124],"See THREE.Material.depthWrite",[931,48292,48293],{"align":977},[598,48294,941],{},[484,48296,12330],{"id":12329},[907,48298,48299,48310],{},[910,48300,48301],{},[913,48302,48303,48305,48307],{},[916,48304,5739],{},[916,48306,921],{},[916,48308,48309],{},"Argument",[926,48311,48312,48327,48347],{},[913,48313,48314,48319,48322],{},[931,48315,48316],{},[598,48317,48318],{},"frame",[931,48320,48321],{},"Emitted when the displayed animation frame changes – at most once per tick, frames may be dropped",[931,48323,48324,48326],{},[598,48325,3552],{}," – Name of the newly displayed frame",[913,48328,48329,48333,48342],{},[931,48330,48331],{},[598,48332,12374],{},[931,48334,48335,48336,48339,48340],{},"Emitted when the animation ends – ",[598,48337,48338],{},"props.loop"," must be set to ",[598,48341,951],{},[931,48343,48344,48346],{},[598,48345,3552],{}," – Name of the ending frame",[913,48348,48349,48353,48360],{},[931,48350,48351],{},[598,48352,23538],{},[931,48354,48355,48356,48339,48358],{},"Emitted when the animation loops – ",[598,48357,48338],{},[598,48359,941],{},[931,48361,48362,48364],{},[598,48363,3552],{}," – Name of the frame at the end of the loop",[484,48366,48367],{"id":48123},"Animation",[594,48369,2756,48370,48373],{},[598,48371,48372],{},":animation"," prop holds either the name of the currently playing animation or a range of frames to play, or a frame number to display.",[4031,48375,48377],{"id":48376},"using-named-animations-as-animation","Using named animations as animation",[594,48379,48380],{},"When individual files are converted to a spritesheet/atlas, typically the original images' filenames will be included in the atlas.",[594,48382,48383,48385],{},[598,48384,47641],{}," uses those filenames to automatically group images into animations.",[594,48387,48388],{},"Use either of the following naming conventions for your source images ...",[2193,48390,48391,48396],{},[2196,48392,48393],{},[598,48394,48395],{},"[animation name][frame number].[file_extension]",[2196,48397,48398],{},[598,48399,48400],{},"[animation name]_[frame number].[file_extension]",[594,48402,48403,48404,48406,48407,48410,48411,48413,48414,38103],{},"... then ",[598,48405,47641],{}," will automatically make all ",[598,48408,48409],{},"[animation name]"," available for playback. Just pass ",[598,48412,48409],{}," to the component's ",[598,48415,48372],{},[4031,48417,38209],{"id":38208},[594,48419,48420],{},"For our Cientos heart cartoon character animation, here's how the filenames map to animation names.",[907,48422,48423,48433],{},[910,48424,48425],{},[913,48426,48427,48430],{},[916,48428,48429],{},"Filenames",[916,48431,48432],{},"Animation name",[926,48434,48435,48442,48450],{},[913,48436,48437,48440],{},[931,48438,48439],{},"cientosIdle0000.png, cientosIdle0001.png, ...",[931,48441,47729],{},[913,48443,48444,48447],{},[931,48445,48446],{},"cientosIdleToWalkTransition0000.png",[931,48448,48449],{},"cientosIdleToWalkTransition",[913,48451,48452,48455],{},[931,48453,48454],{},"cientosWalk0000.png, cientosWalk0001.png, ...",[931,48456,48457],{},"cientosWalk",[484,48459,48460],{"id":48036},"Definitions",[594,48462,48463,48464,48467,48468,48472],{},"You can supply an object to the ",[598,48465,48466],{},":definitions"," prop. Any ",[1120,48469,48471],{"href":48470},"#animation","named animation"," can be a key. The value is a string that specifies frame order and delays.",[4031,48474,48476],{"id":48475},"demo","Demo",[594,48478,48479,48480,45719,48482,1126],{},"In this demo, the 'idle' animation is comprised of six different images. By default, those images will play sequentially when the ",[598,48481,48372],{},[598,48483,48484],{},"'idle'",[594,48486,48487,48488,48490,48491,48494],{},"But below, we've added a ",[598,48489,48466],{}," prop with this value for the ",[598,48492,48493],{},"idle"," key:",[606,48496,48499],{"className":48497,"code":48498,"language":27337},[27335],"'0-5, 0(10), 1-2, 3(20), 4-5, 0-5(3)'\n",[598,48500,48498],{"__ignoreMap":556},[594,48502,48503],{},"So, instead of playing images 0-5 sequentially, this animation will play instead:",[2193,48505,48506,48515,48528],{},[2196,48507,48508,48511,48512,48514],{},[598,48509,48510],{},"0-5"," – Play all six images (",[598,48513,48510],{},") of the animation normally.",[2196,48516,48517,48520,48521,48524,48525,5554],{},[598,48518,48519],{},"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 (",[598,48522,48523],{},"0(10)",") and a delay of twenty frames at the top of the bounce (",[598,48526,48527],{},"3(20)",[2196,48529,48530,48533],{},[598,48531,48532],{},"0-5(3)"," – Finally, play all six images of the animation with a delay of three frames each.",[484,48535,48536],{"id":26243},"Center",[594,48538,48539,48540,48543],{},"In addition to being the sprite's anchor point, the ",[598,48541,48542],{},":center"," prop also controls how differently sized source images will \"grow\" and \"shrink\". Namely, they \"grow out from\" and \"shrink towards\" the center.",[1307,48545,23985],{},{"title":556,"searchDepth":557,"depth":558,"links":48547},[48548,48549,48550,48551,48554,48555,48556,48560,48563],{"id":604,"depth":558,"text":15},{"id":47864,"depth":558,"text":47865},{"id":47897,"depth":558,"text":47898},{"id":47927,"depth":558,"text":47928,"children":48552},[48553],{"id":47939,"depth":688,"text":47940},{"id":901,"depth":558,"text":902},{"id":12329,"depth":558,"text":12330},{"id":48123,"depth":558,"text":48367,"children":48557},[48558,48559],{"id":48376,"depth":688,"text":48377},{"id":38208,"depth":688,"text":38209},{"id":48036,"depth":558,"text":48460,"children":48561},[48562],{"id":48475,"depth":688,"text":48476},{"id":26243,"depth":558,"text":48536},"Display 2D animations defined in a texture atlas.",{},{"title":405,"description":48564},"1Fefoz-lCiLy_IhyyeC3jSJZXqD9LUr1drneDRIGstI",{"id":48569,"title":409,"body":48570,"description":48964,"extension":571,"links":572,"meta":48965,"navigation":574,"path":410,"seo":48966,"stem":411,"__hash__":48967},"docs/2.api/9.objects/cube-camera.md",{"type":481,"value":48571,"toc":48960},[48572,48577,48587,48592,48594,48861,48863,48958],[588,48573,48574],{},[48575,48576],"objects-cube-camera",{},[594,48578,48579,48582,48583,48586],{},[598,48580,48581],{},"\u003CCubeCamera />"," creates a ",[598,48584,48585],{},"THREE.CubeCamera"," and uses it to render an environment map of your scene. The environment map is then applied to component's children.",[594,48588,48589,48591],{},[598,48590,48581],{}," makes its children invisible while rendering to the internal buffer so that they are not included in the reflection.",[484,48593,15],{"id":604},[606,48595,48598],{"className":608,"code":48596,"highlights":48597,"language":613,"meta":556,"style":556},"\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",[558,780,841],[598,48599,48600,48620,48644,48652,48656,48664,48672,48690,48698,48702,48733,48741,48759,48788,48796,48805,48809,48827,48845,48853],{"__ignoreMap":556},[617,48601,48602,48604,48606,48608,48610,48612,48614,48616,48618],{"class":619,"line":557},[617,48603,623],{"class":622},[617,48605,627],{"class":626},[617,48607,631],{"class":630},[617,48609,634],{"class":630},[617,48611,637],{"class":622},[617,48613,640],{"class":622},[617,48615,644],{"class":643},[617,48617,640],{"class":622},[617,48619,649],{"class":622},[617,48621,48623,48625,48627,48630,48632,48634,48636,48638,48640,48642],{"class":48622,"line":558},[619,653],[617,48624,657],{"class":656},[617,48626,660],{"class":622},[617,48628,48629],{"class":663}," CubeCamera",[617,48631,667],{"class":622},[617,48633,670],{"class":663},[617,48635,673],{"class":622},[617,48637,676],{"class":656},[617,48639,679],{"class":622},[617,48641,682],{"class":643},[617,48643,685],{"class":622},[617,48645,48646,48648,48650],{"class":619,"line":688},[617,48647,712],{"class":622},[617,48649,627],{"class":626},[617,48651,649],{"class":622},[617,48653,48654],{"class":619,"line":709},[617,48655,722],{"emptyLinePlaceholder":574},[617,48657,48658,48660,48662],{"class":619,"line":719},[617,48659,623],{"class":622},[617,48661,730],{"class":626},[617,48663,649],{"class":622},[617,48665,48666,48668,48670],{"class":619,"line":725},[617,48667,738],{"class":622},[617,48669,741],{"class":626},[617,48671,649],{"class":622},[617,48673,48674,48676,48678,48680,48682,48684,48686,48688],{"class":619,"line":735},[617,48675,761],{"class":622},[617,48677,764],{"class":626},[617,48679,1465],{"class":630},[617,48681,637],{"class":622},[617,48683,640],{"class":622},[617,48685,7425],{"class":643},[617,48687,640],{"class":622},[617,48689,767],{"class":622},[617,48691,48692,48694,48696],{"class":619,"line":758},[617,48693,761],{"class":622},[617,48695,775],{"class":626},[617,48697,767],{"class":622},[617,48699,48700],{"class":619,"line":770},[617,48701,722],{"emptyLinePlaceholder":574},[617,48703,48705,48707,48709,48712,48714,48716,48718,48720,48723,48725,48727,48729,48731],{"class":48704,"line":780},[619,653],[617,48706,761],{"class":622},[617,48708,409],{"class":626},[617,48710,48711],{"class":630}," :resolution",[617,48713,637],{"class":622},[617,48715,640],{"class":622},[617,48717,25658],{"class":643},[617,48719,640],{"class":622},[617,48721,48722],{"class":630}," :frames",[617,48724,637],{"class":622},[617,48726,640],{"class":622},[617,48728,11564],{"class":643},[617,48730,640],{"class":622},[617,48732,649],{"class":622},[617,48734,48735,48737,48739],{"class":619,"line":785},[617,48736,833],{"class":622},[617,48738,836],{"class":626},[617,48740,649],{"class":622},[617,48742,48743,48745,48747,48749,48751,48753,48755,48757],{"class":619,"line":807},[617,48744,844],{"class":622},[617,48746,3938],{"class":626},[617,48748,1939],{"class":630},[617,48750,637],{"class":622},[617,48752,640],{"class":622},[617,48754,33674],{"class":643},[617,48756,640],{"class":622},[617,48758,767],{"class":622},[617,48760,48761,48763,48765,48768,48770,48772,48774,48776,48778,48780,48782,48784,48786],{"class":619,"line":611},[617,48762,844],{"class":622},[617,48764,2666],{"class":626},[617,48766,48767],{"class":630}," :metalness",[617,48769,637],{"class":622},[617,48771,640],{"class":622},[617,48773,1854],{"class":643},[617,48775,640],{"class":622},[617,48777,42522],{"class":630},[617,48779,637],{"class":622},[617,48781,640],{"class":622},[617,48783,945],{"class":643},[617,48785,640],{"class":622},[617,48787,767],{"class":622},[617,48789,48790,48792,48794],{"class":619,"line":830},[617,48791,865],{"class":622},[617,48793,836],{"class":626},[617,48795,649],{"class":622},[617,48797,48799,48801,48803],{"class":48798,"line":841},[619,653],[617,48800,875],{"class":622},[617,48802,409],{"class":626},[617,48804,649],{"class":622},[617,48806,48807],{"class":619,"line":852},[617,48808,722],{"emptyLinePlaceholder":574},[617,48810,48811,48813,48815,48817,48819,48821,48823,48825],{"class":619,"line":862},[617,48812,761],{"class":622},[617,48814,8436],{"class":626},[617,48816,1847],{"class":630},[617,48818,637],{"class":622},[617,48820,640],{"class":622},[617,48822,1926],{"class":643},[617,48824,640],{"class":622},[617,48826,767],{"class":622},[617,48828,48829,48831,48833,48835,48837,48839,48841,48843],{"class":619,"line":612},[617,48830,761],{"class":622},[617,48832,8455],{"class":626},[617,48834,1465],{"class":630},[617,48836,637],{"class":622},[617,48838,640],{"class":622},[617,48840,11412],{"class":643},[617,48842,640],{"class":622},[617,48844,767],{"class":622},[617,48846,48847,48849,48851],{"class":619,"line":882},[617,48848,885],{"class":622},[617,48850,741],{"class":626},[617,48852,649],{"class":622},[617,48854,48855,48857,48859],{"class":619,"line":892},[617,48856,712],{"class":622},[617,48858,730],{"class":626},[617,48860,649],{"class":622},[484,48862,902],{"id":901},[907,48864,48865,48875],{},[910,48866,48867],{},[913,48868,48869,48871,48873],{},[916,48870,918],{"align":977},[916,48872,921],{"align":977},[916,48874,924],{},[926,48876,48877,48896,48910,48923,48936,48947],{},[913,48878,48879,48883,48892],{},[931,48880,48881],{"align":977},[598,48882,36210],{},[931,48884,48885,48886,48888,48889,48891],{"align":977},"Number of frames to render. Set to ",[598,48887,1854],{}," for a static scene. ",[598,48890,11564],{}," to update continuously.",[931,48893,48894],{},[598,48895,11564],{},[913,48897,48898,48902,48905],{},[931,48899,48900],{"align":977},[598,48901,25650],{},[931,48903,48904],{"align":977},"Resolution of the FBO",[931,48906,48907],{},[598,48908,48909],{},"255",[913,48911,48912,48916,48919],{},[931,48913,48914],{"align":977},[598,48915,39913],{},[931,48917,48918],{"align":977},"Camera near",[931,48920,48921],{},[598,48922,2143],{},[913,48924,48925,48929,48932],{},[931,48926,48927],{"align":977},[598,48928,37737],{},[931,48930,48931],{"align":977},"Camera far",[931,48933,48934],{},[598,48935,41332],{},[913,48937,48938,48942,48945],{},[931,48939,48940],{"align":977},[598,48941,26670],{},[931,48943,48944],{"align":977},"Custom environment map that is temporarily set as the scene's background",[931,48946],{},[913,48948,48949,48953,48956],{},[931,48950,48951],{"align":977},[598,48952,37306],{},[931,48954,48955],{"align":977},"Custom fog that is temporarily set as the scene's fog",[931,48957],{},[1307,48959,1624],{},{"title":556,"searchDepth":557,"depth":558,"links":48961},[48962,48963],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},"Render environment maps for reflective objects.",{},{"title":409,"description":48964},"Q6v8KV8NG276AtuBPiwOGmcEikpDQU0Z6vAT9ILaU70",{"id":48969,"title":413,"body":48970,"description":50055,"extension":571,"links":572,"meta":50056,"navigation":574,"path":414,"seo":50057,"stem":415,"__hash__":50058},"docs/2.api/9.objects/fbo.md",{"type":481,"value":48971,"toc":50047},[48972,48977,48980,48987,48989,49584,49586,49700,49704,49706,49712,49719,49722,49958,49960,50044],[2275,48973,48974],{},[48975,48976],"objects-fbo",{},[594,48978,48979],{},"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.",[594,48981,48982,48983,48986],{},"Cientos provides an ",[598,48984,48985],{},"\u003CFbo />"," component make it easy to use FBOs in your application.",[484,48988,15],{"id":604},[606,48990,48993],{"className":608,"code":48991,"highlights":48992,"language":613,"meta":556,"style":556},"\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",[558,2634,2643,2652,2661],[598,48994,48995,49015,49039,49059,49077,49095,49099,49134,49160,49164,49188,49212,49238,49263,49267,49275,49279,49287,49317,49335,49343,49347,49365,49373,49387,49401,49416,49420,49428,49446,49450,49456,49469,49482,49486,49494,49498,49504,49516,49529,49533,49552,49560,49568,49576],{"__ignoreMap":556},[617,48996,48997,48999,49001,49003,49005,49007,49009,49011,49013],{"class":619,"line":557},[617,48998,623],{"class":622},[617,49000,627],{"class":626},[617,49002,631],{"class":630},[617,49004,634],{"class":630},[617,49006,637],{"class":622},[617,49008,640],{"class":622},[617,49010,644],{"class":643},[617,49012,640],{"class":622},[617,49014,649],{"class":622},[617,49016,49018,49020,49022,49025,49027,49029,49031,49033,49035,49037],{"class":49017,"line":558},[619,653],[617,49019,657],{"class":656},[617,49021,660],{"class":622},[617,49023,49024],{"class":663}," Fbo",[617,49026,667],{"class":622},[617,49028,670],{"class":663},[617,49030,673],{"class":622},[617,49032,676],{"class":656},[617,49034,679],{"class":622},[617,49036,682],{"class":643},[617,49038,685],{"class":622},[617,49040,49041,49043,49045,49047,49049,49051,49053,49055,49057],{"class":619,"line":688},[617,49042,657],{"class":656},[617,49044,3422],{"class":656},[617,49046,660],{"class":622},[617,49048,16059],{"class":663},[617,49050,673],{"class":622},[617,49052,676],{"class":656},[617,49054,679],{"class":622},[617,49056,704],{"class":643},[617,49058,685],{"class":622},[617,49060,49061,49063,49065,49067,49069,49071,49073,49075],{"class":619,"line":709},[617,49062,657],{"class":656},[617,49064,660],{"class":622},[617,49066,695],{"class":663},[617,49068,673],{"class":622},[617,49070,676],{"class":656},[617,49072,679],{"class":622},[617,49074,704],{"class":643},[617,49076,685],{"class":622},[617,49078,49079,49081,49083,49085,49087,49089,49091,49093],{"class":619,"line":719},[617,49080,657],{"class":656},[617,49082,660],{"class":622},[617,49084,3478],{"class":663},[617,49086,673],{"class":622},[617,49088,676],{"class":656},[617,49090,679],{"class":622},[617,49092,613],{"class":643},[617,49094,685],{"class":622},[617,49096,49097],{"class":619,"line":725},[617,49098,722],{"emptyLinePlaceholder":574},[617,49100,49101,49103,49106,49108,49110,49112,49115,49118,49120,49122,49124,49126,49128,49130,49132],{"class":619,"line":735},[617,49102,2395],{"class":630},[617,49104,49105],{"class":663}," fboRef ",[617,49107,637],{"class":622},[617,49109,3478],{"class":2414},[617,49111,623],{"class":622},[617,49113,49114],{"class":1180},"InstanceType",[617,49116,49117],{"class":622},"\u003Ctypeof",[617,49119,49024],{"class":663},[617,49121,3631],{"class":622},[617,49123,3625],{"class":622},[617,49125,3628],{"class":1180},[617,49127,3631],{"class":622},[617,49129,2417],{"class":663},[617,49131,3636],{"class":622},[617,49133,2428],{"class":663},[617,49135,49136,49138,49140,49142,49144,49146,49148,49150,49152,49154,49156,49158],{"class":619,"line":758},[617,49137,2395],{"class":630},[617,49139,10211],{"class":663},[617,49141,637],{"class":622},[617,49143,3478],{"class":2414},[617,49145,623],{"class":622},[617,49147,16108],{"class":1180},[617,49149,3625],{"class":622},[617,49151,3628],{"class":1180},[617,49153,3631],{"class":622},[617,49155,2417],{"class":663},[617,49157,3636],{"class":622},[617,49159,2428],{"class":663},[617,49161,49162],{"class":619,"line":770},[617,49163,722],{"emptyLinePlaceholder":574},[617,49165,49166,49168,49170,49172,49174,49176,49178,49180,49182,49184,49186],{"class":619,"line":780},[617,49167,36534],{"class":630},[617,49169,36537],{"class":2414},[617,49171,36540],{"class":622},[617,49173,36543],{"class":6818},[617,49175,36546],{"class":622},[617,49177,660],{"class":622},[617,49179,36543],{"class":626},[617,49181,1198],{"class":622},[617,49183,5337],{"class":1180},[617,49185,36557],{"class":622},[617,49187,1184],{"class":622},[617,49189,49190,49192,49194,49197,49199,49201,49203,49205,49207,49210],{"class":619,"line":785},[617,49191,18865],{"class":656},[617,49193,3054],{"class":626},[617,49195,49196],{"class":622},"!",[617,49198,10377],{"class":663},[617,49200,1126],{"class":622},[617,49202,3665],{"class":663},[617,49204,4714],{"class":626},[617,49206,38436],{"class":622},[617,49208,49209],{"class":656}," return",[617,49211,19854],{"class":622},[617,49213,49214,49217,49219,49221,49223,49225,49227,49229,49231,49233,49235],{"class":619,"line":807},[617,49215,49216],{"class":663}," torusRef",[617,49218,1126],{"class":622},[617,49220,3665],{"class":663},[617,49222,1126],{"class":622},[617,49224,5607],{"class":663},[617,49226,1126],{"class":622},[617,49228,7820],{"class":663},[617,49230,2411],{"class":622},[617,49232,36543],{"class":663},[617,49234,36601],{"class":622},[617,49236,49237],{"class":2481}," 0.745\n",[617,49239,49240,49242,49244,49246,49248,49250,49252,49254,49256,49258,49260],{"class":619,"line":611},[617,49241,49216],{"class":663},[617,49243,1126],{"class":622},[617,49245,3665],{"class":663},[617,49247,1126],{"class":622},[617,49249,5607],{"class":663},[617,49251,1126],{"class":622},[617,49253,36594],{"class":663},[617,49255,2411],{"class":622},[617,49257,36543],{"class":663},[617,49259,36601],{"class":622},[617,49261,49262],{"class":2481}," 0.361\n",[617,49264,49265],{"class":619,"line":830},[617,49266,1305],{"class":622},[617,49268,49269,49271,49273],{"class":619,"line":841},[617,49270,712],{"class":622},[617,49272,627],{"class":626},[617,49274,649],{"class":622},[617,49276,49277],{"class":619,"line":852},[617,49278,722],{"emptyLinePlaceholder":574},[617,49280,49281,49283,49285],{"class":619,"line":862},[617,49282,623],{"class":622},[617,49284,730],{"class":626},[617,49286,649],{"class":622},[617,49288,49289,49291,49293,49295,49297,49299,49302,49304,49307,49309,49311,49313,49315],{"class":619,"line":612},[617,49290,738],{"class":622},[617,49292,741],{"class":626},[617,49294,8340],{"class":630},[617,49296,637],{"class":622},[617,49298,640],{"class":622},[617,49300,49301],{"class":643},"0x222",[617,49303,640],{"class":622},[617,49305,49306],{"class":630}," @loop",[617,49308,637],{"class":622},[617,49310,640],{"class":622},[617,49312,36693],{"class":643},[617,49314,640],{"class":622},[617,49316,649],{"class":622},[617,49318,49319,49321,49323,49325,49327,49329,49331,49333],{"class":619,"line":882},[617,49320,761],{"class":622},[617,49322,764],{"class":626},[617,49324,1465],{"class":630},[617,49326,637],{"class":622},[617,49328,640],{"class":622},[617,49330,9859],{"class":643},[617,49332,640],{"class":622},[617,49334,767],{"class":622},[617,49336,49337,49339,49341],{"class":619,"line":892},[617,49338,761],{"class":622},[617,49340,775],{"class":626},[617,49342,767],{"class":622},[617,49344,49345],{"class":619,"line":2605},[617,49346,722],{"emptyLinePlaceholder":574},[617,49348,49349,49351,49353,49355,49357,49359,49361,49363],{"class":619,"line":2614},[617,49350,761],{"class":622},[617,49352,8029],{"class":626},[617,49354,1939],{"class":630},[617,49356,637],{"class":622},[617,49358,640],{"class":622},[617,49360,10011],{"class":643},[617,49362,640],{"class":622},[617,49364,767],{"class":622},[617,49366,49368,49370],{"class":49367,"line":2634},[619,653],[617,49369,761],{"class":622},[617,49371,49372],{"class":626},"Fbo\n",[617,49374,49376,49378,49380,49382,49385],{"class":49375,"line":2643},[619,653],[617,49377,10413],{"class":630},[617,49379,637],{"class":622},[617,49381,640],{"class":622},[617,49383,49384],{"class":643},"fboRef",[617,49386,3111],{"class":622},[617,49388,49390,49393,49395,49397,49399],{"class":49389,"line":2652},[619,653],[617,49391,49392],{"class":630}," :depth",[617,49394,637],{"class":622},[617,49396,640],{"class":622},[617,49398,951],{"class":643},[617,49400,3111],{"class":622},[617,49402,49404,49407,49409,49411,49414],{"class":49403,"line":2661},[619,653],[617,49405,49406],{"class":630}," :settings",[617,49408,637],{"class":622},[617,49410,640],{"class":622},[617,49412,49413],{"class":643},"{ samples: 1 }",[617,49415,3111],{"class":622},[617,49417,49418],{"class":619,"line":2683},[617,49419,15248],{"class":622},[617,49421,49422,49424,49426],{"class":619,"line":2727},[617,49423,761],{"class":622},[617,49425,836],{"class":626},[617,49427,649],{"class":622},[617,49429,49430,49432,49434,49436,49438,49440,49442,49444],{"class":619,"line":2736},[617,49431,833],{"class":622},[617,49433,847],{"class":626},[617,49435,1939],{"class":630},[617,49437,637],{"class":622},[617,49439,640],{"class":622},[617,49441,1946],{"class":643},[617,49443,640],{"class":622},[617,49445,767],{"class":622},[617,49447,49448],{"class":619,"line":2745},[617,49449,722],{"emptyLinePlaceholder":574},[617,49451,49452,49454],{"class":619,"line":3902},[617,49453,833],{"class":622},[617,49455,20829],{"class":626},[617,49457,49458,49460,49462,49464,49467],{"class":619,"line":3933},[617,49459,20847],{"class":630},[617,49461,637],{"class":622},[617,49463,640],{"class":622},[617,49465,49466],{"class":643},"0xFFFFFF",[617,49468,3111],{"class":622},[617,49470,49471,49473,49475,49477,49480],{"class":619,"line":3954},[617,49472,23908],{"class":630},[617,49474,637],{"class":622},[617,49476,640],{"class":622},[617,49478,49479],{"class":643},"fboRef?.instance?.texture ?? null",[617,49481,3111],{"class":622},[617,49483,49484],{"class":619,"line":3973},[617,49485,8013],{"class":622},[617,49487,49488,49490,49492],{"class":619,"line":4005},[617,49489,875],{"class":622},[617,49491,836],{"class":626},[617,49493,649],{"class":622},[617,49495,49496],{"class":619,"line":4014},[617,49497,722],{"emptyLinePlaceholder":574},[617,49499,49500,49502],{"class":619,"line":4023},[617,49501,761],{"class":622},[617,49503,5106],{"class":626},[617,49505,49506,49508,49510,49512,49514],{"class":619,"line":19053},[617,49507,10413],{"class":630},[617,49509,637],{"class":622},[617,49511,640],{"class":622},[617,49513,10377],{"class":643},[617,49515,3111],{"class":622},[617,49517,49518,49520,49522,49524,49527],{"class":619,"line":19068},[617,49519,15235],{"class":630},[617,49521,637],{"class":622},[617,49523,640],{"class":622},[617,49525,49526],{"class":643},"[3, 0, 0]",[617,49528,3111],{"class":622},[617,49530,49531],{"class":619,"line":19083},[617,49532,10441],{"class":622},[617,49534,49535,49537,49539,49541,49543,49545,49548,49550],{"class":619,"line":19088},[617,49536,833],{"class":622},[617,49538,9912],{"class":626},[617,49540,1939],{"class":630},[617,49542,637],{"class":622},[617,49544,640],{"class":622},[617,49546,49547],{"class":643},"[1, 0.5, 16, 100]",[617,49549,640],{"class":622},[617,49551,767],{"class":622},[617,49553,49554,49556,49558],{"class":619,"line":19095},[617,49555,833],{"class":622},[617,49557,857],{"class":626},[617,49559,767],{"class":622},[617,49561,49562,49564,49566],{"class":619,"line":19100},[617,49563,875],{"class":622},[617,49565,836],{"class":626},[617,49567,649],{"class":622},[617,49569,49570,49572,49574],{"class":619,"line":19106},[617,49571,885],{"class":622},[617,49573,741],{"class":626},[617,49575,649],{"class":622},[617,49577,49578,49580,49582],{"class":619,"line":19127},[617,49579,712],{"class":622},[617,49581,730],{"class":626},[617,49583,649],{"class":622},[484,49585,902],{"id":901},[907,49587,49588,49598],{},[910,49589,49590],{},[913,49591,49592,49594,49596],{},[916,49593,918],{"align":977},[916,49595,921],{"align":977},[916,49597,924],{},[926,49599,49600,49616,49632,49656,49682],{},[913,49601,49602,49608,49613],{},[931,49603,49604],{"align":977},[1649,49605,49606],{},[598,49607,37709],{},[931,49609,49610,49612],{"align":977},[598,49611,5332],{}," - The width of the FBO.",[931,49614,49615],{},"Width of the canvas",[913,49617,49618,49624,49629],{},[931,49619,49620],{"align":977},[1649,49621,49622],{},[598,49623,37723],{},[931,49625,49626,49628],{"align":977},[598,49627,5332],{}," - the height of the FBO",[931,49630,49631],{},"Height of the canvas",[913,49633,49634,49640,49652],{},[931,49635,49636],{"align":977},[1649,49637,49638],{},[598,49639,11134],{},[931,49641,49642,49644,49645,1126],{"align":977},[598,49643,15441],{}," - Whether or not the FBO should render the depth to a ",[1120,49646,49649],{"href":49647,"rel":49648},"https://threejs.org/docs/?q=webglre#api/en/renderers/WebGLRenderTarget.depthTexture",[1124],[598,49650,49651],{},"depthTexture",[931,49653,49654],{},[598,49655,951],{},[913,49657,49658,49665,49678],{},[931,49659,49660],{"align":977},[1649,49661,49662],{},[598,49663,49664],{},"settings",[931,49666,49667,49670,49671],{"align":977},[598,49668,49669],{},"WebGLRenderTargetOptions"," - Every other configuration property for the ",[1120,49672,49675,22720],{"href":49673,"rel":49674},"https://threejs.org/docs/#api/en/renderers/WebGLRenderTarget",[1124],[598,49676,49677],{},"WebGLRenderTarget",[931,49679,49680],{},[598,49681,6105],{},[913,49683,49684,49691,49696],{},[931,49685,49686],{"align":977},[1649,49687,49688],{},[598,49689,49690],{},"autoRender",[931,49692,49693,49695],{"align":977},[598,49694,15441],{}," - Whether to automatically render the FBO on the default scene.",[931,49697,49698],{},[598,49699,941],{},[484,49701,49703],{"id":49702},"usefbo","useFBO",[594,49705,48979],{},[594,49707,49708,49709,49711],{},"Cientos provides a ",[598,49710,49703],{}," composable to make it easy to use FBOs in your application.",[3179,49713,49714],{},[594,49715,2756,49716,49718],{},[598,49717,49703],{}," composable must be used inside of a child component since it needs the context of TresCanvas.",[4031,49720,15],{"id":49721},"usage-1",[606,49723,49726],{"className":608,"code":49724,"highlights":49725,"language":613,"meta":556,"style":556},"\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",[558,709,719,725,735,758,770,780,785,892],[598,49727,49728,49748,49768,49772,49788,49799,49810,49821,49831,49843,49848,49855,49863,49867,49875,49883,49901,49905,49911,49924,49938,49942,49950],{"__ignoreMap":556},[617,49729,49730,49732,49734,49736,49738,49740,49742,49744,49746],{"class":619,"line":557},[617,49731,623],{"class":622},[617,49733,627],{"class":626},[617,49735,631],{"class":630},[617,49737,634],{"class":630},[617,49739,637],{"class":622},[617,49741,640],{"class":622},[617,49743,644],{"class":643},[617,49745,640],{"class":622},[617,49747,649],{"class":622},[617,49749,49751,49753,49755,49758,49760,49762,49764,49766],{"class":49750,"line":558},[619,653],[617,49752,657],{"class":656},[617,49754,660],{"class":622},[617,49756,49757],{"class":663}," useFBO",[617,49759,673],{"class":622},[617,49761,676],{"class":656},[617,49763,679],{"class":622},[617,49765,682],{"class":643},[617,49767,685],{"class":622},[617,49769,49770],{"class":619,"line":688},[617,49771,722],{"emptyLinePlaceholder":574},[617,49773,49775,49777,49780,49782,49784,49786],{"class":49774,"line":709},[619,653],[617,49776,2395],{"class":630},[617,49778,49779],{"class":663}," fboTarget ",[617,49781,637],{"class":622},[617,49783,49757],{"class":2414},[617,49785,2417],{"class":663},[617,49787,3240],{"class":622},[617,49789,49791,49793,49795,49797],{"class":49790,"line":719},[619,653],[617,49792,1239],{"class":626},[617,49794,1198],{"class":622},[617,49796,4378],{"class":4377},[617,49798,2468],{"class":622},[617,49800,49802,49804,49806,49808],{"class":49801,"line":725},[619,653],[617,49803,1220],{"class":626},[617,49805,1198],{"class":622},[617,49807,38996],{"class":2481},[617,49809,2468],{"class":622},[617,49811,49813,49815,49817,49819],{"class":49812,"line":735},[619,653],[617,49814,1230],{"class":626},[617,49816,1198],{"class":622},[617,49818,38996],{"class":2481},[617,49820,2468],{"class":622},[617,49822,49824,49827,49829],{"class":49823,"line":758},[619,653],[617,49825,49826],{"class":626}," settings",[617,49828,1198],{"class":622},[617,49830,1184],{"class":622},[617,49832,49834,49837,49839,49841],{"class":49833,"line":770},[619,653],[617,49835,49836],{"class":626}," samples",[617,49838,1198],{"class":622},[617,49840,2541],{"class":2481},[617,49842,2468],{"class":622},[617,49844,49846],{"class":49845,"line":780},[619,653],[617,49847,2577],{"class":622},[617,49849,49851,49853],{"class":49850,"line":785},[619,653],[617,49852,2408],{"class":622},[617,49854,2428],{"class":663},[617,49856,49857,49859,49861],{"class":619,"line":807},[617,49858,712],{"class":622},[617,49860,627],{"class":626},[617,49862,649],{"class":622},[617,49864,49865],{"class":619,"line":611},[617,49866,722],{"emptyLinePlaceholder":574},[617,49868,49869,49871,49873],{"class":619,"line":830},[617,49870,623],{"class":622},[617,49872,730],{"class":626},[617,49874,649],{"class":622},[617,49876,49877,49879,49881],{"class":619,"line":841},[617,49878,738],{"class":622},[617,49880,836],{"class":626},[617,49882,649],{"class":622},[617,49884,49885,49887,49889,49891,49893,49895,49897,49899],{"class":619,"line":852},[617,49886,761],{"class":622},[617,49888,847],{"class":626},[617,49890,1939],{"class":630},[617,49892,637],{"class":622},[617,49894,640],{"class":622},[617,49896,1946],{"class":643},[617,49898,640],{"class":622},[617,49900,767],{"class":622},[617,49902,49903],{"class":619,"line":862},[617,49904,722],{"emptyLinePlaceholder":574},[617,49906,49907,49909],{"class":619,"line":612},[617,49908,761],{"class":622},[617,49910,20829],{"class":626},[617,49912,49913,49916,49918,49920,49922],{"class":619,"line":882},[617,49914,49915],{"class":630}," :color",[617,49917,637],{"class":622},[617,49919,640],{"class":622},[617,49921,49466],{"class":643},[617,49923,3111],{"class":622},[617,49925,49927,49929,49931,49933,49936],{"class":49926,"line":892},[619,653],[617,49928,18433],{"class":630},[617,49930,637],{"class":622},[617,49932,640],{"class":622},[617,49934,49935],{"class":643},"fboTarget?.texture ?? null",[617,49937,3111],{"class":622},[617,49939,49940],{"class":619,"line":2605},[617,49941,15248],{"class":622},[617,49943,49944,49946,49948],{"class":619,"line":2614},[617,49945,885],{"class":622},[617,49947,836],{"class":626},[617,49949,649],{"class":622},[617,49951,49952,49954,49956],{"class":619,"line":2634},[617,49953,712],{"class":622},[617,49955,730],{"class":626},[617,49957,649],{"class":622},[4031,49959,12073],{"id":15476},[907,49961,49962,49972],{},[910,49963,49964],{},[913,49965,49966,49968,49970],{},[916,49967,918],{"align":977},[916,49969,921],{"align":977},[916,49971,924],{},[926,49973,49974,49988,50002,50023],{},[913,49975,49976,49982,49986],{},[931,49977,49978],{"align":977},[1649,49979,49980],{},[598,49981,37709],{},[931,49983,49984,49612],{"align":977},[598,49985,5332],{},[931,49987,49615],{},[913,49989,49990,49996,50000],{},[931,49991,49992],{"align":977},[1649,49993,49994],{},[598,49995,37723],{},[931,49997,49998,49628],{"align":977},[598,49999,5332],{},[931,50001,49631],{},[913,50003,50004,50010,50019],{},[931,50005,50006],{"align":977},[1649,50007,50008],{},[598,50009,11134],{},[931,50011,50012,49644,50014,1126],{"align":977},[598,50013,15441],{},[1120,50015,50017],{"href":49647,"rel":50016},[1124],[598,50018,49651],{},[931,50020,50021],{},[598,50022,951],{},[913,50024,50025,50031,50040],{},[931,50026,50027],{"align":977},[1649,50028,50029],{},[598,50030,49664],{},[931,50032,50033,49670,50035],{"align":977},[598,50034,49669],{},[1120,50036,50038,22720],{"href":49673,"rel":50037},[1124],[598,50039,49677],{},[931,50041,50042],{},[598,50043,6105],{},[1307,50045,50046],{},"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 .light .shiki span {color: var(--shiki-light);background: var(--shiki-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}",{"title":556,"searchDepth":557,"depth":558,"links":50048},[50049,50050,50051],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},{"id":49702,"depth":558,"text":49703,"children":50052},[50053,50054],{"id":49721,"depth":688,"text":15},{"id":15476,"depth":688,"text":12073},"Render to texture using Frame Buffer Objects.",{},{"title":413,"description":50055},"zUF36nsNVRlMP7A5uu65IxZbcmtRV1okKCAlizt0dq4",{"id":50060,"title":417,"body":50061,"description":50431,"extension":571,"links":572,"meta":50432,"navigation":574,"path":418,"seo":50433,"stem":419,"__hash__":50434},"docs/2.api/9.objects/gradient-texture.md",{"type":481,"value":50062,"toc":50427},[50063,50068,50077,50079,50280,50282,50425],[2275,50064,50065],{},[50066,50067],"objects-gradient-texture",{},[594,50069,50070,50073,50074,50076],{},[598,50071,50072],{},"\u003CGradientTexture />"," creates a gradient in a THREE.Texture and attaches it to its parent THREE.Material's ",[598,50075,2961],{}," by default.",[484,50078,15],{"id":604},[606,50080,50082],{"className":608,"code":50081,"language":613,"meta":556,"style":556},"\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",[598,50083,50084,50104,50123,50131,50135,50143,50151,50169,50173,50181,50200,50208,50215,50229,50243,50248,50256,50264,50272],{"__ignoreMap":556},[617,50085,50086,50088,50090,50092,50094,50096,50098,50100,50102],{"class":619,"line":557},[617,50087,623],{"class":622},[617,50089,627],{"class":626},[617,50091,631],{"class":630},[617,50093,634],{"class":630},[617,50095,637],{"class":622},[617,50097,640],{"class":622},[617,50099,644],{"class":643},[617,50101,640],{"class":622},[617,50103,649],{"class":622},[617,50105,50106,50108,50110,50113,50115,50117,50119,50121],{"class":619,"line":558},[617,50107,657],{"class":656},[617,50109,660],{"class":622},[617,50111,50112],{"class":663}," GradientTexture",[617,50114,673],{"class":622},[617,50116,676],{"class":656},[617,50118,679],{"class":622},[617,50120,682],{"class":643},[617,50122,685],{"class":622},[617,50124,50125,50127,50129],{"class":619,"line":688},[617,50126,712],{"class":622},[617,50128,627],{"class":626},[617,50130,649],{"class":622},[617,50132,50133],{"class":619,"line":709},[617,50134,722],{"emptyLinePlaceholder":574},[617,50136,50137,50139,50141],{"class":619,"line":719},[617,50138,623],{"class":622},[617,50140,730],{"class":626},[617,50142,649],{"class":622},[617,50144,50145,50147,50149],{"class":619,"line":725},[617,50146,738],{"class":622},[617,50148,741],{"class":626},[617,50150,649],{"class":622},[617,50152,50153,50155,50157,50159,50161,50163,50165,50167],{"class":619,"line":735},[617,50154,761],{"class":622},[617,50156,764],{"class":626},[617,50158,1465],{"class":630},[617,50160,637],{"class":622},[617,50162,640],{"class":622},[617,50164,8366],{"class":643},[617,50166,640],{"class":622},[617,50168,767],{"class":622},[617,50170,50171],{"class":619,"line":758},[617,50172,722],{"emptyLinePlaceholder":574},[617,50174,50175,50177,50179],{"class":619,"line":770},[617,50176,761],{"class":622},[617,50178,836],{"class":626},[617,50180,649],{"class":622},[617,50182,50183,50185,50187,50189,50191,50193,50196,50198],{"class":619,"line":780},[617,50184,833],{"class":622},[617,50186,25390],{"class":626},[617,50188,1939],{"class":630},[617,50190,637],{"class":622},[617,50192,640],{"class":622},[617,50194,50195],{"class":643},"[2, 2]",[617,50197,640],{"class":622},[617,50199,767],{"class":622},[617,50201,50202,50204,50206],{"class":619,"line":785},[617,50203,833],{"class":622},[617,50205,7452],{"class":626},[617,50207,649],{"class":622},[617,50209,50210,50212],{"class":619,"line":807},[617,50211,844],{"class":622},[617,50213,50214],{"class":626},"GradientTexture\n",[617,50216,50217,50220,50222,50224,50227],{"class":619,"line":611},[617,50218,50219],{"class":630}," :stops",[617,50221,637],{"class":622},[617,50223,640],{"class":622},[617,50225,50226],{"class":643},"[0, 1]",[617,50228,3111],{"class":622},[617,50230,50231,50234,50236,50238,50241],{"class":619,"line":830},[617,50232,50233],{"class":630}," :colors",[617,50235,637],{"class":622},[617,50237,640],{"class":622},[617,50239,50240],{"class":643},"['#ff0000', '#0000ff']",[617,50242,3111],{"class":622},[617,50244,50245],{"class":619,"line":841},[617,50246,50247],{"class":622}," />\n",[617,50249,50250,50252,50254],{"class":619,"line":852},[617,50251,865],{"class":622},[617,50253,7452],{"class":626},[617,50255,649],{"class":622},[617,50257,50258,50260,50262],{"class":619,"line":862},[617,50259,875],{"class":622},[617,50261,836],{"class":626},[617,50263,649],{"class":622},[617,50265,50266,50268,50270],{"class":619,"line":612},[617,50267,885],{"class":622},[617,50269,741],{"class":626},[617,50271,649],{"class":622},[617,50273,50274,50276,50278],{"class":619,"line":882},[617,50275,712],{"class":622},[617,50277,730],{"class":626},[617,50279,649],{"class":622},[484,50281,902],{"id":901},[907,50283,50284,50294],{},[910,50285,50286],{},[913,50287,50288,50290,50292],{},[916,50289,918],{"align":977},[916,50291,921],{"align":977},[916,50293,924],{},[926,50295,50296,50322,50337,50352,50365,50379,50396,50410],{},[913,50297,50298,50303,50320],{},[931,50299,50300],{"align":977},[598,50301,50302],{},"stops",[931,50304,4259,50305,50307,50308,3043,50310,50312,50313,50316,50317,1126],{"align":977},[598,50306,33900],{}," of values between ",[598,50309,945],{},[598,50311,1854],{}," representing the color positions in the gradient. ",[598,50314,50315],{},"stops.length"," should match ",[598,50318,50319],{},"color.length",[931,50321],{},[913,50323,50324,50329,50335],{},[931,50325,50326],{"align":977},[598,50327,50328],{},"colors",[931,50330,4259,50331,50334],{"align":977},[598,50332,50333],{},"THREE.ColorRepresentation[]"," representing the colors in the gradient.",[931,50336],{},[913,50338,50339,50344,50347],{},[931,50340,50341],{"align":977},[598,50342,50343],{},"attach",[931,50345,50346],{"align":977},"Where the component should be attached within its parent.",[931,50348,50349],{},[598,50350,50351],{},"'map'",[913,50353,50354,50358,50361],{},[931,50355,50356],{"align":977},[598,50357,37723],{},[931,50359,50360],{"align":977},"Height of the canvas used to draw the gradient.",[931,50362,50363],{},[598,50364,36342],{},[913,50366,50367,50371,50374],{},[931,50368,50369],{"align":977},[598,50370,37709],{},[931,50372,50373],{"align":977},"Width of the canvas used to draw the gradient.",[931,50375,50376],{},[598,50377,50378],{},"16",[913,50380,50381,50385,50391],{},[931,50382,50383],{"align":977},[598,50384,5497],{},[931,50386,50387,50390],{"align":977},[598,50388,50389],{},"'linear' | 'radial'"," Type of gradient to draw.",[931,50392,50393],{},[598,50394,50395],{},"'linear'",[913,50397,50398,50403,50406],{},[931,50399,50400],{"align":977},[598,50401,50402],{},"innerCircleRadius",[931,50404,50405],{"align":977},"Radius of the inner circle of a radial gradient.",[931,50407,50408],{},[598,50409,945],{},[913,50411,50412,50417,50420],{},[931,50413,50414],{"align":977},[598,50415,50416],{},"outerCircleRadius",[931,50418,50419],{"align":977},"Radius of the outer circle of a radial gradient.",[931,50421,50422],{},[598,50423,50424],{},"'auto'",[1307,50426,1624],{},{"title":556,"searchDepth":557,"depth":558,"links":50428},[50429,50430],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},"Create gradient textures for materials.",{},{"title":417,"description":50431},"NUI7_e9BLX8HMymE1TjQDQS-QQXxuK5bdda9GdveJPw",{"id":50436,"title":421,"body":50437,"description":55975,"extension":571,"links":572,"meta":55976,"navigation":574,"path":422,"seo":55977,"stem":423,"__hash__":55978},"docs/2.api/9.objects/html.md",{"type":481,"value":50438,"toc":55954},[50439,50442,50455,50460,50462,50870,50874,50881,50886,50902,50910,50915,51054,51059,51063,51087,51092,51221,51225,51249,51252,51276,51293,51313,51318,51482,51486,51491,51514,51526,51531,53181,53183,53206,53226,53267,53270,53285,53296,53331,53338,53362,53379,53384,54850,54856,54862,54867,55068,55085,55087,55447,55449,55469,55473,55552,55554,55726,55930,55933,55951],[594,50440,50441],{},"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.",[594,50443,50444,50445,3043,50447,50450,50451,50454],{},"🚀 Works seamlessly with both ",[1649,50446,10880],{},[1649,50448,50449],{},"OrthographicCamera"," — the active camera is automatically detected by the ",[598,50452,50453],{},"\u003CHtml>"," component.",[2275,50456,50457],{},[50458,50459],"objects-html",{},[484,50461,15],{"id":604},[606,50463,50466],{"className":608,"code":50464,"highlights":50465,"language":613,"meta":556,"style":556},"\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",[558,611,830,841,852,862,612],[598,50467,50468,50488,50512,50530,50538,50542,50550,50568,50587,50595,50613,50621,50629,50637,50643,50649,50663,50677,50692,50697,50726,50735,50743,50751,50759,50767,50775,50786,50794,50809,50822,50834,50846,50858,50862],{"__ignoreMap":556},[617,50469,50470,50472,50474,50476,50478,50480,50482,50484,50486],{"class":619,"line":557},[617,50471,623],{"class":622},[617,50473,627],{"class":626},[617,50475,631],{"class":630},[617,50477,634],{"class":630},[617,50479,637],{"class":622},[617,50481,640],{"class":622},[617,50483,644],{"class":643},[617,50485,640],{"class":622},[617,50487,649],{"class":622},[617,50489,50491,50493,50495,50498,50500,50502,50504,50506,50508,50510],{"class":50490,"line":558},[619,653],[617,50492,657],{"class":656},[617,50494,660],{"class":622},[617,50496,50497],{"class":663}," Html",[617,50499,667],{"class":622},[617,50501,670],{"class":663},[617,50503,673],{"class":622},[617,50505,676],{"class":656},[617,50507,679],{"class":622},[617,50509,682],{"class":643},[617,50511,685],{"class":622},[617,50513,50514,50516,50518,50520,50522,50524,50526,50528],{"class":619,"line":688},[617,50515,657],{"class":656},[617,50517,660],{"class":622},[617,50519,695],{"class":663},[617,50521,673],{"class":622},[617,50523,676],{"class":656},[617,50525,679],{"class":622},[617,50527,704],{"class":643},[617,50529,685],{"class":622},[617,50531,50532,50534,50536],{"class":619,"line":709},[617,50533,712],{"class":622},[617,50535,627],{"class":626},[617,50537,649],{"class":622},[617,50539,50540],{"class":619,"line":719},[617,50541,722],{"emptyLinePlaceholder":574},[617,50543,50544,50546,50548],{"class":619,"line":725},[617,50545,623],{"class":622},[617,50547,730],{"class":626},[617,50549,649],{"class":622},[617,50551,50552,50554,50556,50558,50560,50562,50564,50566],{"class":619,"line":735},[617,50553,738],{"class":622},[617,50555,741],{"class":626},[617,50557,744],{"class":630},[617,50559,637],{"class":622},[617,50561,640],{"class":622},[617,50563,9840],{"class":643},[617,50565,640],{"class":622},[617,50567,649],{"class":622},[617,50569,50570,50572,50574,50576,50578,50580,50583,50585],{"class":619,"line":758},[617,50571,761],{"class":622},[617,50573,764],{"class":626},[617,50575,1465],{"class":630},[617,50577,637],{"class":622},[617,50579,640],{"class":622},[617,50581,50582],{"class":643},"[2, 2, 5]",[617,50584,640],{"class":622},[617,50586,767],{"class":622},[617,50588,50589,50591,50593],{"class":619,"line":770},[617,50590,761],{"class":622},[617,50592,775],{"class":626},[617,50594,767],{"class":622},[617,50596,50597,50599,50601,50603,50605,50607,50609,50611],{"class":619,"line":780},[617,50598,761],{"class":622},[617,50600,836],{"class":626},[617,50602,1465],{"class":630},[617,50604,637],{"class":622},[617,50606,640],{"class":622},[617,50608,1946],{"class":643},[617,50610,640],{"class":622},[617,50612,649],{"class":622},[617,50614,50615,50617,50619],{"class":619,"line":785},[617,50616,833],{"class":622},[617,50618,847],{"class":626},[617,50620,767],{"class":622},[617,50622,50623,50625,50627],{"class":619,"line":807},[617,50624,833],{"class":622},[617,50626,857],{"class":626},[617,50628,767],{"class":622},[617,50630,50632,50634],{"class":50631,"line":611},[619,653],[617,50633,833],{"class":622},[617,50635,50636],{"class":626},"Html\n",[617,50638,50640],{"class":50639,"line":830},[619,653],[617,50641,50642],{"class":630}," center\n",[617,50644,50646],{"class":50645,"line":841},[619,653],[617,50647,50648],{"class":630}," transform\n",[617,50650,50652,50655,50657,50659,50661],{"class":50651,"line":852},[619,653],[617,50653,50654],{"class":630}," :distance-factor",[617,50656,637],{"class":622},[617,50658,640],{"class":622},[617,50660,8408],{"class":643},[617,50662,3111],{"class":622},[617,50664,50666,50668,50670,50672,50675],{"class":50665,"line":862},[619,653],[617,50667,7985],{"class":630},[617,50669,637],{"class":622},[617,50671,640],{"class":622},[617,50673,50674],{"class":643},"[0, 0, 0.65]",[617,50676,3111],{"class":622},[617,50678,50680,50683,50685,50687,50690],{"class":50679,"line":612},[619,653],[617,50681,50682],{"class":630}," :scale",[617,50684,637],{"class":622},[617,50686,640],{"class":622},[617,50688,50689],{"class":643},"[0.75, 0.75, 0.75]",[617,50691,3111],{"class":622},[617,50693,50694],{"class":619,"line":882},[617,50695,50696],{"class":622}," >\n",[617,50698,50699,50701,50704,50706,50708,50710,50713,50715,50717,50720,50722,50724],{"class":619,"line":892},[617,50700,844],{"class":622},[617,50702,50703],{"class":626},"h1",[617,50705,22720],{"class":630},[617,50707,637],{"class":622},[617,50709,640],{"class":622},[617,50711,50712],{"class":643},"title",[617,50714,640],{"class":622},[617,50716,3631],{"class":622},[617,50718,50719],{"class":663},"I'm a Box 📦",[617,50721,712],{"class":622},[617,50723,50703],{"class":626},[617,50725,649],{"class":622},[617,50727,50728,50730,50733],{"class":619,"line":2605},[617,50729,865],{"class":622},[617,50731,50732],{"class":626},"Html",[617,50734,649],{"class":622},[617,50736,50737,50739,50741],{"class":619,"line":2614},[617,50738,875],{"class":622},[617,50740,836],{"class":626},[617,50742,649],{"class":622},[617,50744,50745,50747,50749],{"class":619,"line":2634},[617,50746,761],{"class":622},[617,50748,8029],{"class":626},[617,50750,767],{"class":622},[617,50752,50753,50755,50757],{"class":619,"line":2643},[617,50754,761],{"class":622},[617,50756,8436],{"class":626},[617,50758,767],{"class":622},[617,50760,50761,50763,50765],{"class":619,"line":2652},[617,50762,885],{"class":622},[617,50764,741],{"class":626},[617,50766,649],{"class":622},[617,50768,50769,50771,50773],{"class":619,"line":2661},[617,50770,712],{"class":622},[617,50772,730],{"class":626},[617,50774,649],{"class":622},[617,50776,50777,50779,50781,50784],{"class":619,"line":2683},[617,50778,623],{"class":622},[617,50780,1307],{"class":626},[617,50782,50783],{"class":630}," scoped",[617,50785,649],{"class":622},[617,50787,50788,50790,50792],{"class":619,"line":2727},[617,50789,1126],{"class":622},[617,50791,50712],{"class":1180},[617,50793,1184],{"class":622},[617,50795,50796,50799,50801,50804,50807],{"class":619,"line":2736},[617,50797,50798],{"class":4109}," background-color",[617,50800,1198],{"class":622},[617,50802,50803],{"class":622}," #",[617,50805,50806],{"class":663},"1e1e1e",[617,50808,8277],{"class":622},[617,50810,50811,50813,50815,50817,50820],{"class":619,"line":2745},[617,50812,5453],{"class":4109},[617,50814,1198],{"class":622},[617,50816,50803],{"class":622},[617,50818,50819],{"class":663},"ffffff",[617,50821,8277],{"class":622},[617,50823,50824,50827,50829,50832],{"class":619,"line":3902},[617,50825,50826],{"class":4109}," font-size",[617,50828,1198],{"class":622},[617,50830,50831],{"class":2481}," 0.75rem",[617,50833,8277],{"class":622},[617,50835,50836,50839,50841,50844],{"class":619,"line":3933},[617,50837,50838],{"class":4109}," padding",[617,50840,1198],{"class":622},[617,50842,50843],{"class":2481}," 0.25rem",[617,50845,8277],{"class":622},[617,50847,50848,50851,50853,50856],{"class":619,"line":3954},[617,50849,50850],{"class":4109}," border-radius",[617,50852,1198],{"class":622},[617,50854,50855],{"class":2481}," 0.375rem",[617,50857,8277],{"class":622},[617,50859,50860],{"class":619,"line":3973},[617,50861,1305],{"class":622},[617,50863,50864,50866,50868],{"class":619,"line":4005},[617,50865,712],{"class":622},[617,50867,1307],{"class":626},[617,50869,649],{"class":622},[484,50871,50873],{"id":50872},"occlusion","Occlusion",[594,50875,50876,50877,50880],{},"By default, the HTML content will be visible through other objects in the scene. You can use the ",[598,50878,50879],{},"occlude"," prop to make the HTML content occlude other objects in the scene.",[594,50882,50883,50884,38103],{},"Html can be hidden behind one or more objects in your scene using the ",[598,50885,50879],{},[606,50887,50889],{"className":608,"code":50888,"language":613,"meta":556,"style":556},"\u003CHtml occlude>\n",[598,50890,50891],{"__ignoreMap":556},[617,50892,50893,50895,50897,50900],{"class":619,"line":557},[617,50894,623],{"class":622},[617,50896,50732],{"class":626},[617,50898,50899],{"class":630}," occlude",[617,50901,649],{"class":622},[594,50903,938,50904,50906,50907,50909],{},[598,50905,50879],{},", then ",[598,50908,50453],{}," will be hidden by any objects that pass in front of its position.",[2275,50911,50912],{},[50913,50914],"objects-html-occlusion",{},[5287,50916,5289,50917,50920],{},[5291,50918,50919],{},"Demo code",[606,50921,50923],{"className":42466,"code":50922,"language":42468,"meta":556,"style":556},"\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",[598,50924,50925,50944,50952,50960,51010,51038,51046],{"__ignoreMap":556},[617,50926,50927,50929,50931,50933,50935,50937,50940,50942],{"class":619,"line":557},[617,50928,623],{"class":622},[617,50930,836],{"class":626},[617,50932,1465],{"class":630},[617,50934,637],{"class":622},[617,50936,640],{"class":622},[617,50938,50939],{"class":643},"[0, 1, -2]",[617,50941,640],{"class":622},[617,50943,649],{"class":622},[617,50945,50946,50948,50950],{"class":619,"line":558},[617,50947,738],{"class":622},[617,50949,847],{"class":626},[617,50951,767],{"class":622},[617,50953,50954,50956,50958],{"class":619,"line":688},[617,50955,738],{"class":622},[617,50957,857],{"class":626},[617,50959,767],{"class":622},[617,50961,50962,50964,50966,50969,50972,50974,50977,50979,50981,50983,50985,50987,50989,50991,50994,50996,50999,51001,51003,51006,51008],{"class":619,"line":709},[617,50963,738],{"class":622},[617,50965,42468],{"class":626},[617,50967,50968],{"class":630}," center",[617,50970,50971],{"class":630}," transform",[617,50973,50899],{"class":630},[617,50975,50976],{"class":630}," :distance-factor",[617,50978,637],{"class":622},[617,50980,640],{"class":622},[617,50982,8408],{"class":643},[617,50984,640],{"class":622},[617,50986,1465],{"class":630},[617,50988,637],{"class":622},[617,50990,640],{"class":622},[617,50992,50993],{"class":643},"[0, 0, 2]",[617,50995,640],{"class":622},[617,50997,50998],{"class":630}," :z-index-range",[617,51000,637],{"class":622},[617,51002,640],{"class":622},[617,51004,51005],{"class":643},"[28, 0]",[617,51007,640],{"class":622},[617,51009,649],{"class":622},[617,51011,51012,51014,51016,51018,51020,51022,51025,51027,51029,51032,51034,51036],{"class":619,"line":719},[617,51013,761],{"class":622},[617,51015,50703],{"class":626},[617,51017,22720],{"class":630},[617,51019,637],{"class":622},[617,51021,640],{"class":622},[617,51023,51024],{"class":643},"bg-white dark:bg-dark text-xs p-1 rounded",[617,51026,640],{"class":622},[617,51028,3631],{"class":622},[617,51030,51031],{"class":663},"Move camera",[617,51033,712],{"class":622},[617,51035,50703],{"class":626},[617,51037,649],{"class":622},[617,51039,51040,51042,51044],{"class":619,"line":725},[617,51041,885],{"class":622},[617,51043,42468],{"class":626},[617,51045,649],{"class":622},[617,51047,51048,51050,51052],{"class":619,"line":735},[617,51049,712],{"class":622},[617,51051,836],{"class":626},[617,51053,649],{"class":622},[594,51055,51056,51057,2007],{},"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 ",[598,51058,50879],{},[4031,51060,51062],{"id":51061},"single-occluder","Single occluder",[606,51064,51066],{"className":608,"code":51065,"language":613,"meta":556,"style":556},"\u003CHtml occlude=\"[mesh]\">\n",[598,51067,51068],{"__ignoreMap":556},[617,51069,51070,51072,51074,51076,51078,51080,51083,51085],{"class":619,"line":557},[617,51071,623],{"class":622},[617,51073,50732],{"class":626},[617,51075,50899],{"class":630},[617,51077,637],{"class":622},[617,51079,640],{"class":622},[617,51081,51082],{"class":643},"[mesh]",[617,51084,640],{"class":622},[617,51086,649],{"class":622},[2275,51088,51089],{},[51090,51091],"objects-html-single-occluder",{},[5287,51093,5289,51094,51096],{},[5291,51095,50919],{},[606,51097,51099],{"className":42466,"code":51098,"language":42468,"meta":556,"style":556},"\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",[598,51100,51101,51119,51127,51135,51179,51205,51213],{"__ignoreMap":556},[617,51102,51103,51105,51107,51109,51111,51113,51115,51117],{"class":619,"line":557},[617,51104,623],{"class":622},[617,51106,836],{"class":626},[617,51108,1465],{"class":630},[617,51110,637],{"class":622},[617,51112,640],{"class":622},[617,51114,23171],{"class":643},[617,51116,640],{"class":622},[617,51118,649],{"class":622},[617,51120,51121,51123,51125],{"class":619,"line":558},[617,51122,738],{"class":622},[617,51124,847],{"class":626},[617,51126,767],{"class":622},[617,51128,51129,51131,51133],{"class":619,"line":688},[617,51130,738],{"class":622},[617,51132,857],{"class":626},[617,51134,767],{"class":622},[617,51136,51137,51139,51141,51143,51145,51148,51150,51152,51155,51157,51159,51161,51163,51165,51167,51169,51171,51173,51175,51177],{"class":619,"line":709},[617,51138,738],{"class":622},[617,51140,42468],{"class":626},[617,51142,50968],{"class":630},[617,51144,50971],{"class":630},[617,51146,51147],{"class":630}," :occlude",[617,51149,637],{"class":622},[617,51151,640],{"class":622},[617,51153,51154],{"class":643},"[sphereRef]",[617,51156,640],{"class":622},[617,51158,50976],{"class":630},[617,51160,637],{"class":622},[617,51162,640],{"class":622},[617,51164,8408],{"class":643},[617,51166,640],{"class":622},[617,51168,50998],{"class":630},[617,51170,637],{"class":622},[617,51172,640],{"class":622},[617,51174,51005],{"class":643},[617,51176,640],{"class":622},[617,51178,649],{"class":622},[617,51180,51181,51183,51185,51187,51189,51191,51193,51195,51197,51199,51201,51203],{"class":619,"line":719},[617,51182,761],{"class":622},[617,51184,50703],{"class":626},[617,51186,22720],{"class":630},[617,51188,637],{"class":622},[617,51190,640],{"class":622},[617,51192,51024],{"class":643},[617,51194,640],{"class":622},[617,51196,3631],{"class":622},[617,51198,51031],{"class":663},[617,51200,712],{"class":622},[617,51202,50703],{"class":626},[617,51204,649],{"class":622},[617,51206,51207,51209,51211],{"class":619,"line":725},[617,51208,885],{"class":622},[617,51210,42468],{"class":626},[617,51212,649],{"class":622},[617,51214,51215,51217,51219],{"class":619,"line":735},[617,51216,712],{"class":622},[617,51218,836],{"class":626},[617,51220,649],{"class":622},[4031,51222,51224],{"id":51223},"multiple-occluders","Multiple occluders",[606,51226,51228],{"className":608,"code":51227,"language":613,"meta":556,"style":556},"\u003CHtml occlude=\"[mesh1, mesh2, mesh3, ...]\" />\n",[598,51229,51230],{"__ignoreMap":556},[617,51231,51232,51234,51236,51238,51240,51242,51245,51247],{"class":619,"line":557},[617,51233,623],{"class":622},[617,51235,50732],{"class":626},[617,51237,50899],{"class":630},[617,51239,637],{"class":622},[617,51241,640],{"class":622},[617,51243,51244],{"class":643},"[mesh1, mesh2, mesh3, ...]",[617,51246,640],{"class":622},[617,51248,767],{"class":622},[594,51250,51251],{},"OR",[606,51253,51255],{"className":608,"code":51254,"language":613,"meta":556,"style":556},"\u003CHtml occlude=\"meshesArray\" />\n",[598,51256,51257],{"__ignoreMap":556},[617,51258,51259,51261,51263,51265,51267,51269,51272,51274],{"class":619,"line":557},[617,51260,623],{"class":622},[617,51262,50732],{"class":626},[617,51264,50899],{"class":630},[617,51266,637],{"class":622},[617,51268,640],{"class":622},[617,51270,51271],{"class":643},"meshesArray",[617,51273,640],{"class":622},[617,51275,767],{"class":622},[594,51277,51278,51279,51282,51283,51287,51288,51292],{},"In the demo below, a ",[598,51280,51281],{},"v-for"," loop generates multiple spheres around the cube.\nAll resulting ",[1649,51284,51285],{},[598,51286,4272],{}," instances are collected into an array and passed to the ",[1649,51289,51290],{},[598,51291,50879],{}," prop, allowing each sphere to occlude the HTML content.",[594,51294,51295,51296,51301,51302,51305,51306,3043,51309,51312],{},"This demo also uses the ",[1649,51297,51298],{},[598,51299,51300],{},"on-occlude"," event, which is triggered whenever the occlusion state changes.\nHere, the event updates a ",[1649,51303,51304],{},"reactive value"," to control element styles — for example, toggling between ",[1654,51307,51308],{},"light",[1654,51310,51311],{},"dark"," themes.",[2275,51314,51315],{},[51316,51317],"objects-html-occlude-complex-demo",{},[5287,51319,5289,51320,51322],{},[5291,51321,50919],{},[606,51323,51325],{"className":42466,"code":51324,"language":42468,"meta":556,"style":556},"\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",[598,51326,51327,51345,51353,51361,51368,51382,51396,51409,51422,51436,51440,51466,51474],{"__ignoreMap":556},[617,51328,51329,51331,51333,51335,51337,51339,51341,51343],{"class":619,"line":557},[617,51330,623],{"class":622},[617,51332,836],{"class":626},[617,51334,1465],{"class":630},[617,51336,637],{"class":622},[617,51338,640],{"class":622},[617,51340,23171],{"class":643},[617,51342,640],{"class":622},[617,51344,649],{"class":622},[617,51346,51347,51349,51351],{"class":619,"line":558},[617,51348,738],{"class":622},[617,51350,847],{"class":626},[617,51352,767],{"class":622},[617,51354,51355,51357,51359],{"class":619,"line":688},[617,51356,738],{"class":622},[617,51358,857],{"class":626},[617,51360,767],{"class":622},[617,51362,51363,51365],{"class":619,"line":709},[617,51364,738],{"class":622},[617,51366,51367],{"class":626},"html\n",[617,51369,51370,51373,51375,51377,51380],{"class":619,"line":719},[617,51371,51372],{"class":630}," v-bind",[617,51374,637],{"class":622},[617,51376,640],{"class":622},[617,51378,51379],{"class":643},"htmlProps",[617,51381,3111],{"class":622},[617,51383,51384,51387,51389,51391,51394],{"class":619,"line":725},[617,51385,51386],{"class":630}," :occlude",[617,51388,637],{"class":622},[617,51390,640],{"class":622},[617,51392,51393],{"class":643},"occluderRefs",[617,51395,3111],{"class":622},[617,51397,51398,51401,51403,51405,51407],{"class":619,"line":735},[617,51399,51400],{"class":630}," :distance-factor",[617,51402,637],{"class":622},[617,51404,640],{"class":622},[617,51406,8408],{"class":643},[617,51408,3111],{"class":622},[617,51410,51411,51414,51416,51418,51420],{"class":619,"line":758},[617,51412,51413],{"class":630}," :z-index-range",[617,51415,637],{"class":622},[617,51417,640],{"class":622},[617,51419,51005],{"class":643},[617,51421,3111],{"class":622},[617,51423,51424,51427,51429,51431,51434],{"class":619,"line":770},[617,51425,51426],{"class":630}," @on-occlude",[617,51428,637],{"class":622},[617,51430,640],{"class":622},[617,51432,51433],{"class":643},"(event: boolean) => isOccluded = event",[617,51435,3111],{"class":622},[617,51437,51438],{"class":619,"line":780},[617,51439,5153],{"class":622},[617,51441,51442,51444,51446,51448,51450,51452,51454,51456,51458,51460,51462,51464],{"class":619,"line":785},[617,51443,761],{"class":622},[617,51445,50703],{"class":626},[617,51447,22720],{"class":630},[617,51449,637],{"class":622},[617,51451,640],{"class":622},[617,51453,51024],{"class":643},[617,51455,640],{"class":622},[617,51457,3631],{"class":622},[617,51459,51031],{"class":663},[617,51461,712],{"class":622},[617,51463,50703],{"class":626},[617,51465,649],{"class":622},[617,51467,51468,51470,51472],{"class":619,"line":807},[617,51469,885],{"class":622},[617,51471,42468],{"class":626},[617,51473,649],{"class":622},[617,51475,51476,51478,51480],{"class":619,"line":611},[617,51477,712],{"class":622},[617,51479,836],{"class":626},[617,51481,649],{"class":622},[4031,51483,51485],{"id":51484},"blending-occlusion","Blending Occlusion",[594,51487,51488,51490],{},[598,51489,50453],{}," 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.",[606,51492,51494],{"className":608,"code":51493,"language":613,"meta":556,"style":556},"\u003CHtml occlude=\"blending\">\n",[598,51495,51496],{"__ignoreMap":556},[617,51497,51498,51500,51502,51504,51506,51508,51510,51512],{"class":619,"line":557},[617,51499,623],{"class":622},[617,51501,50732],{"class":626},[617,51503,50899],{"class":630},[617,51505,637],{"class":622},[617,51507,640],{"class":622},[617,51509,46626],{"class":643},[617,51511,640],{"class":622},[617,51513,649],{"class":622},[594,51515,2756,51516,3174,51519,51522,51523,1126],{},[1649,51517,51518],{},"demo below ⬇️",[1654,51520,51521],{},"(left black example)"," shows a ",[1649,51524,51525],{},"basic usage example",[2275,51527,51528],{},[51529,51530],"objects-html-occlude-blending-demo",{},[5287,51532,5289,51533,51535],{},[5291,51534,50919],{},[606,51536,51574],{"className":608,"code":51537,"highlights":51538,"language":613,"meta":556,"style":556},"\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",[558,3933,3973,4005,4014,4023,19053,19068,19342,19351,19370,19413,19455,19475,19504,19513,19522,51539,51540,19351,19370,19413,19455,19475,19504,19513,19522,51539,51540,51541,51542,51543,51544,51545,51546,51547,51548,51549,51550,51551,51552,51553,51554,51555,51556,51557,51558,51559,51560,51561,51562,51563,51564,51565,51566,51567,51568,51569,51570,51571,51572,51573],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,[598,51575,51576,51596,51623,51641,51659,51682,51686,51697,51712,51723,51734,51745,51749,51753,51770,51774,51785,51789,51804,51827,51831,51835,51849,51871,51875,51879,51893,51919,51946,51950,51954,51958,51987,51991,52013,52028,52040,52051,52063,52070,52078,52082,52090,52109,52128,52147,52155,52159,52166,52179,52192,52204,52218,52231,52245,52249,52279,52312,52320,52329,52337,52341,52348,52353,52358,52372,52386,52400,52405,52425,52437,52455,52464,52473,52478,52485,52490,52495,52508,52522,52537,52550,52555,52575,52613,52622,52631,52636,52643,52657,52662,52667,52680,52694,52709,52715,52728,52733,52757,52766,52771,52778,52783,52788,52801,52815,52828,52833,52853,52877,52898,52907,52916,52921,52928,52943,52957,52972,52986,52999,53005,53010,53015,53034,53053,53062,53071,53080,53085,53096,53106,53118,53129,53140,53153,53167,53172],{"__ignoreMap":556},[617,51577,51578,51580,51582,51584,51586,51588,51590,51592,51594],{"class":619,"line":557},[617,51579,623],{"class":622},[617,51581,627],{"class":626},[617,51583,631],{"class":630},[617,51585,634],{"class":630},[617,51587,637],{"class":622},[617,51589,640],{"class":622},[617,51591,644],{"class":643},[617,51593,640],{"class":622},[617,51595,649],{"class":622},[617,51597,51599,51601,51603,51605,51607,51609,51611,51613,51615,51617,51619,51621],{"class":51598,"line":558},[619,653],[617,51600,657],{"class":656},[617,51602,660],{"class":622},[617,51604,50497],{"class":663},[617,51606,667],{"class":622},[617,51608,8287],{"class":663},[617,51610,667],{"class":622},[617,51612,670],{"class":663},[617,51614,673],{"class":622},[617,51616,676],{"class":656},[617,51618,679],{"class":622},[617,51620,682],{"class":643},[617,51622,685],{"class":622},[617,51624,51625,51627,51629,51631,51633,51635,51637,51639],{"class":619,"line":688},[617,51626,657],{"class":656},[617,51628,660],{"class":622},[617,51630,695],{"class":663},[617,51632,673],{"class":622},[617,51634,676],{"class":656},[617,51636,679],{"class":622},[617,51638,704],{"class":643},[617,51640,685],{"class":622},[617,51642,51643,51645,51647,51649,51651,51653,51655,51657],{"class":619,"line":709},[617,51644,657],{"class":656},[617,51646,660],{"class":622},[617,51648,3478],{"class":663},[617,51650,673],{"class":622},[617,51652,676],{"class":656},[617,51654,679],{"class":622},[617,51656,613],{"class":643},[617,51658,685],{"class":622},[617,51660,51661,51663,51665,51668,51670,51672,51674,51676,51678,51680],{"class":619,"line":719},[617,51662,657],{"class":656},[617,51664,660],{"class":622},[617,51666,51667],{"class":663}," CircleGeometry",[617,51669,667],{"class":622},[617,51671,18588],{"class":663},[617,51673,673],{"class":622},[617,51675,676],{"class":656},[617,51677,679],{"class":622},[617,51679,4606],{"class":643},[617,51681,685],{"class":622},[617,51683,51684],{"class":619,"line":725},[617,51685,722],{"emptyLinePlaceholder":574},[617,51687,51688,51690,51693,51695],{"class":619,"line":735},[617,51689,2395],{"class":630},[617,51691,51692],{"class":663}," gl ",[617,51694,637],{"class":622},[617,51696,1184],{"class":622},[617,51698,51699,51702,51704,51706,51708,51710],{"class":619,"line":758},[617,51700,51701],{"class":626}," clearColor",[617,51703,1198],{"class":622},[617,51705,679],{"class":622},[617,51707,9840],{"class":643},[617,51709,2420],{"class":622},[617,51711,2468],{"class":622},[617,51713,51714,51717,51719,51721],{"class":619,"line":770},[617,51715,51716],{"class":626}," clearAlpha",[617,51718,1198],{"class":622},[617,51720,2541],{"class":2481},[617,51722,2468],{"class":622},[617,51724,51725,51728,51730,51732],{"class":619,"line":780},[617,51726,51727],{"class":626}," shadows",[617,51729,1198],{"class":622},[617,51731,4378],{"class":4377},[617,51733,2468],{"class":622},[617,51735,51736,51739,51741,51743],{"class":619,"line":785},[617,51737,51738],{"class":626}," alpha",[617,51740,1198],{"class":622},[617,51742,4378],{"class":4377},[617,51744,2468],{"class":622},[617,51746,51747],{"class":619,"line":807},[617,51748,1305],{"class":622},[617,51750,51751],{"class":619,"line":611},[617,51752,722],{"emptyLinePlaceholder":574},[617,51754,51755,51757,51760,51762,51764,51766,51768],{"class":619,"line":830},[617,51756,2395],{"class":630},[617,51758,51759],{"class":663}," targetDirectionLightRef ",[617,51761,637],{"class":622},[617,51763,3478],{"class":2414},[617,51765,2417],{"class":663},[617,51767,3636],{"class":622},[617,51769,2428],{"class":663},[617,51771,51772],{"class":619,"line":841},[617,51773,722],{"emptyLinePlaceholder":574},[617,51775,51776,51778,51781,51783],{"class":619,"line":852},[617,51777,2395],{"class":630},[617,51779,51780],{"class":663}," geometries ",[617,51782,637],{"class":622},[617,51784,18312],{"class":663},[617,51786,51787],{"class":619,"line":862},[617,51788,2451],{"class":622},[617,51790,51791,51794,51796,51798,51800,51802],{"class":619,"line":612},[617,51792,51793],{"class":626}," component",[617,51795,1198],{"class":622},[617,51797,679],{"class":622},[617,51799,847],{"class":643},[617,51801,2420],{"class":622},[617,51803,2468],{"class":622},[617,51805,51806,51809,51811,51813,51815,51817,51819,51821,51823,51825],{"class":619,"line":882},[617,51807,51808],{"class":626}," args",[617,51810,1198],{"class":622},[617,51812,2478],{"class":663},[617,51814,1854],{"class":2481},[617,51816,667],{"class":622},[617,51818,2541],{"class":2481},[617,51820,667],{"class":622},[617,51822,2541],{"class":2481},[617,51824,2494],{"class":663},[617,51826,2468],{"class":622},[617,51828,51829],{"class":619,"line":892},[617,51830,2577],{"class":622},[617,51832,51833],{"class":619,"line":2605},[617,51834,2451],{"class":622},[617,51836,51837,51839,51841,51843,51845,51847],{"class":619,"line":2614},[617,51838,51793],{"class":626},[617,51840,1198],{"class":622},[617,51842,679],{"class":622},[617,51844,3938],{"class":643},[617,51846,2420],{"class":622},[617,51848,2468],{"class":622},[617,51850,51851,51853,51855,51857,51859,51861,51863,51865,51867,51869],{"class":619,"line":2634},[617,51852,51808],{"class":626},[617,51854,1198],{"class":622},[617,51856,2478],{"class":663},[617,51858,44481],{"class":2481},[617,51860,667],{"class":622},[617,51862,28063],{"class":2481},[617,51864,667],{"class":622},[617,51866,28063],{"class":2481},[617,51868,2494],{"class":663},[617,51870,2468],{"class":622},[617,51872,51873],{"class":619,"line":2643},[617,51874,2577],{"class":622},[617,51876,51877],{"class":619,"line":2652},[617,51878,2451],{"class":622},[617,51880,51881,51883,51885,51887,51889,51891],{"class":619,"line":2661},[617,51882,51793],{"class":626},[617,51884,1198],{"class":622},[617,51886,679],{"class":622},[617,51888,9912],{"class":643},[617,51890,2420],{"class":622},[617,51892,2468],{"class":622},[617,51894,51895,51897,51899,51901,51903,51905,51907,51909,51911,51913,51915,51917],{"class":619,"line":2683},[617,51896,51808],{"class":626},[617,51898,1198],{"class":622},[617,51900,2478],{"class":663},[617,51902,1926],{"class":2481},[617,51904,667],{"class":622},[617,51906,32689],{"class":2481},[617,51908,667],{"class":622},[617,51910,32567],{"class":2481},[617,51912,667],{"class":622},[617,51914,7743],{"class":2481},[617,51916,2494],{"class":663},[617,51918,2468],{"class":622},[617,51920,51921,51924,51926,51928,51931,51933,51935,51937,51940,51942,51944],{"class":619,"line":2727},[617,51922,51923],{"class":626}," bind",[617,51925,1198],{"class":622},[617,51927,660],{"class":622},[617,51929,51930],{"class":626}," castShadow",[617,51932,1198],{"class":622},[617,51934,4378],{"class":4377},[617,51936,667],{"class":622},[617,51938,51939],{"class":626}," receiveShadow",[617,51941,1198],{"class":622},[617,51943,4378],{"class":4377},[617,51945,7069],{"class":622},[617,51947,51948],{"class":619,"line":2736},[617,51949,2577],{"class":622},[617,51951,51952],{"class":619,"line":2745},[617,51953,18348],{"class":663},[617,51955,51956],{"class":619,"line":3902},[617,51957,722],{"emptyLinePlaceholder":574},[617,51959,51961,51963,51966,51968,51970,51972,51974,51976,51978,51981,51983,51985],{"class":51960,"line":3933},[619,653],[617,51962,2395],{"class":630},[617,51964,51965],{"class":663}," customGeometry ",[617,51967,637],{"class":622},[617,51969,3478],{"class":2414},[617,51971,2417],{"class":663},[617,51973,32949],{"class":622},[617,51975,51667],{"class":2414},[617,51977,2417],{"class":663},[617,51979,51980],{"class":2481},"1.25",[617,51982,667],{"class":622},[617,51984,28063],{"class":2481},[617,51986,7169],{"class":663},[617,51988,51989],{"class":619,"line":3954},[617,51990,722],{"emptyLinePlaceholder":574},[617,51992,51994,51996,51999,52001,52003,52005,52007,52009,52011],{"class":51993,"line":3973},[619,653],[617,51995,2395],{"class":630},[617,51997,51998],{"class":663}," customMaterial ",[617,52000,637],{"class":622},[617,52002,3478],{"class":2414},[617,52004,2417],{"class":663},[617,52006,32949],{"class":622},[617,52008,18588],{"class":2414},[617,52010,2417],{"class":663},[617,52012,3240],{"class":622},[617,52014,52016,52018,52020,52022,52024,52026],{"class":52015,"line":4005},[619,653],[617,52017,5453],{"class":626},[617,52019,1198],{"class":622},[617,52021,679],{"class":622},[617,52023,33693],{"class":643},[617,52025,2420],{"class":622},[617,52027,2468],{"class":622},[617,52029,52031,52034,52036,52038],{"class":52030,"line":4014},[619,653],[617,52032,52033],{"class":626}," side",[617,52035,1198],{"class":622},[617,52037,28832],{"class":2481},[617,52039,2468],{"class":622},[617,52041,52043,52045,52047,52049],{"class":52042,"line":4023},[619,653],[617,52044,5465],{"class":626},[617,52046,1198],{"class":622},[617,52048,2541],{"class":2481},[617,52050,2468],{"class":622},[617,52052,52054,52057,52059,52061],{"class":52053,"line":19053},[619,653],[617,52055,52056],{"class":626}," transparent",[617,52058,1198],{"class":622},[617,52060,4378],{"class":4377},[617,52062,2468],{"class":622},[617,52064,52066,52068],{"class":52065,"line":19068},[619,653],[617,52067,2408],{"class":622},[617,52069,7169],{"class":663},[617,52071,52072,52074,52076],{"class":619,"line":19083},[617,52073,712],{"class":622},[617,52075,627],{"class":626},[617,52077,649],{"class":622},[617,52079,52080],{"class":619,"line":19088},[617,52081,722],{"emptyLinePlaceholder":574},[617,52083,52084,52086,52088],{"class":619,"line":19095},[617,52085,623],{"class":622},[617,52087,730],{"class":626},[617,52089,649],{"class":622},[617,52091,52092,52094,52096,52098,52100,52102,52105,52107],{"class":619,"line":19100},[617,52093,738],{"class":622},[617,52095,4099],{"class":626},[617,52097,22720],{"class":630},[617,52099,637],{"class":622},[617,52101,640],{"class":622},[617,52103,52104],{"class":643},"html-demo-wrapper aspect-video",[617,52106,640],{"class":622},[617,52108,649],{"class":622},[617,52110,52111,52113,52115,52117,52119,52121,52124,52126],{"class":619,"line":19106},[617,52112,761],{"class":622},[617,52114,741],{"class":626},[617,52116,8970],{"class":630},[617,52118,637],{"class":622},[617,52120,640],{"class":622},[617,52122,52123],{"class":643},"gl",[617,52125,640],{"class":622},[617,52127,649],{"class":622},[617,52129,52130,52132,52134,52136,52138,52140,52143,52145],{"class":619,"line":19127},[617,52131,833],{"class":622},[617,52133,764],{"class":626},[617,52135,1465],{"class":630},[617,52137,637],{"class":622},[617,52139,640],{"class":622},[617,52141,52142],{"class":643},"[0, 1.5, 7.5]",[617,52144,640],{"class":622},[617,52146,767],{"class":622},[617,52148,52149,52151,52153],{"class":619,"line":19133},[617,52150,833],{"class":622},[617,52152,775],{"class":626},[617,52154,767],{"class":622},[617,52156,52157],{"class":619,"line":19140},[617,52158,722],{"emptyLinePlaceholder":574},[617,52160,52161,52163],{"class":619,"line":19145},[617,52162,833],{"class":622},[617,52164,52165],{"class":626},"Levioso\n",[617,52167,52168,52170,52172,52174,52177],{"class":619,"line":19166},[617,52169,7957],{"class":630},[617,52171,637],{"class":622},[617,52173,640],{"class":622},[617,52175,52176],{"class":643},"(geometry, index) in geometries",[617,52178,3111],{"class":622},[617,52180,52181,52183,52185,52187,52190],{"class":619,"line":19179},[617,52182,7971],{"class":630},[617,52184,637],{"class":622},[617,52186,640],{"class":622},[617,52188,52189],{"class":643},"`html-occlude-blending-demo-${index}`",[617,52191,3111],{"class":622},[617,52193,52194,52196,52198,52200,52202],{"class":619,"line":19205},[617,52195,27174],{"class":630},[617,52197,637],{"class":622},[617,52199,640],{"class":622},[617,52201,19006],{"class":643},[617,52203,3111],{"class":622},[617,52205,52206,52209,52211,52213,52216],{"class":619,"line":19210},[617,52207,52208],{"class":630}," :float-factor",[617,52210,637],{"class":622},[617,52212,640],{"class":622},[617,52214,52215],{"class":643},"3.5",[617,52217,3111],{"class":622},[617,52219,52220,52223,52225,52227,52229],{"class":619,"line":19217},[617,52221,52222],{"class":630}," :rotation-factor",[617,52224,637],{"class":622},[617,52226,640],{"class":622},[617,52228,1854],{"class":643},[617,52230,3111],{"class":622},[617,52232,52233,52236,52238,52240,52243],{"class":619,"line":19226},[617,52234,52235],{"class":630}," :range",[617,52237,637],{"class":622},[617,52239,640],{"class":622},[617,52241,52242],{"class":643},"[-0.35, 0.35]",[617,52244,3111],{"class":622},[617,52246,52247],{"class":619,"line":19231},[617,52248,50696],{"class":622},[617,52250,52251,52253,52255,52257,52259,52261,52264,52266,52268,52270,52272,52275,52277],{"class":619,"line":19240},[617,52252,844],{"class":622},[617,52254,836],{"class":626},[617,52256,1465],{"class":630},[617,52258,637],{"class":622},[617,52260,640],{"class":622},[617,52262,52263],{"class":643},"[index * 3.5 - 3.5, 1, 0]",[617,52265,640],{"class":622},[617,52267,8970],{"class":630},[617,52269,637],{"class":622},[617,52271,640],{"class":622},[617,52273,52274],{"class":643},"geometry.bind",[617,52276,640],{"class":622},[617,52278,649],{"class":622},[617,52280,52281,52284,52287,52290,52292,52294,52297,52299,52301,52303,52305,52308,52310],{"class":619,"line":19259},[617,52282,52283],{"class":622}," \u003C",[617,52285,52286],{"class":626},"component",[617,52288,52289],{"class":630}," :is",[617,52291,637],{"class":622},[617,52293,640],{"class":622},[617,52295,52296],{"class":643},"geometry.component",[617,52298,640],{"class":622},[617,52300,1939],{"class":630},[617,52302,637],{"class":622},[617,52304,640],{"class":622},[617,52306,52307],{"class":643},"geometry.args",[617,52309,640],{"class":622},[617,52311,767],{"class":622},[617,52313,52314,52316,52318],{"class":619,"line":19269},[617,52315,52283],{"class":622},[617,52317,857],{"class":626},[617,52319,767],{"class":622},[617,52321,52322,52325,52327],{"class":619,"line":19304},[617,52323,52324],{"class":622}," \u003C/",[617,52326,836],{"class":626},[617,52328,649],{"class":622},[617,52330,52331,52333,52335],{"class":619,"line":19313},[617,52332,865],{"class":622},[617,52334,8398],{"class":626},[617,52336,649],{"class":622},[617,52338,52339],{"class":619,"line":19333},[617,52340,722],{"emptyLinePlaceholder":574},[617,52342,52344,52346],{"class":52343,"line":19342},[619,653],[617,52345,833],{"class":622},[617,52347,50636],{"class":626},[617,52349,52351],{"class":52350,"line":19351},[619,653],[617,52352,50642],{"class":630},[617,52354,52356],{"class":52355,"line":19370},[619,653],[617,52357,50648],{"class":630},[617,52359,52361,52364,52366,52368,52370],{"class":52360,"line":19413},[619,653],[617,52362,52363],{"class":630}," occlude",[617,52365,637],{"class":622},[617,52367,640],{"class":622},[617,52369,46626],{"class":643},[617,52371,3111],{"class":622},[617,52373,52375,52377,52379,52381,52384],{"class":52374,"line":19455},[619,653],[617,52376,7985],{"class":630},[617,52378,637],{"class":622},[617,52380,640],{"class":622},[617,52382,52383],{"class":643},"[-4, .75, -2]",[617,52385,3111],{"class":622},[617,52387,52389,52392,52394,52396,52398],{"class":52388,"line":19475},[619,653],[617,52390,52391],{"class":630}," :z-index-range",[617,52393,637],{"class":622},[617,52395,640],{"class":622},[617,52397,51005],{"class":643},[617,52399,3111],{"class":622},[617,52401,52403],{"class":52402,"line":19504},[619,653],[617,52404,50696],{"class":622},[617,52406,52408,52410,52412,52414,52416,52418,52421,52423],{"class":52407,"line":19513},[619,653],[617,52409,844],{"class":622},[617,52411,4099],{"class":626},[617,52413,22720],{"class":630},[617,52415,637],{"class":622},[617,52417,640],{"class":622},[617,52419,52420],{"class":643},"text-center text-s p-2 bg-[#1B1C1E] text-light",[617,52422,640],{"class":622},[617,52424,649],{"class":622},[617,52426,52428,52431,52433,52435],{"class":52427,"line":19522},[619,653],[617,52429,52430],{"class":663}," BASIC 💛 ",[617,52432,623],{"class":622},[617,52434,7535],{"class":626},[617,52436,767],{"class":622},[617,52438,52440,52442,52444,52446,52449,52451,52453],{"class":52439,"line":51539},[619,653],[617,52441,52283],{"class":622},[617,52443,1654],{"class":626},[617,52445,3631],{"class":622},[617,52447,52448],{"class":663},"occlude=blending",[617,52450,712],{"class":622},[617,52452,1654],{"class":626},[617,52454,649],{"class":622},[617,52456,52458,52460,52462],{"class":52457,"line":51540},[619,653],[617,52459,52324],{"class":622},[617,52461,4099],{"class":626},[617,52463,649],{"class":622},[617,52465,52467,52469,52471],{"class":619,"line":52466},73,[617,52468,865],{"class":622},[617,52470,50732],{"class":626},[617,52472,649],{"class":622},[617,52474,52476],{"class":52475,"line":51541},[619,653],[617,52477,722],{"emptyLinePlaceholder":574},[617,52479,52481,52483],{"class":52480,"line":51542},[619,653],[617,52482,833],{"class":622},[617,52484,50636],{"class":626},[617,52486,52488],{"class":52487,"line":51543},[619,653],[617,52489,50642],{"class":630},[617,52491,52493],{"class":52492,"line":51544},[619,653],[617,52494,50648],{"class":630},[617,52496,52498,52500,52502,52504,52506],{"class":52497,"line":51545},[619,653],[617,52499,52363],{"class":630},[617,52501,637],{"class":622},[617,52503,640],{"class":622},[617,52505,46626],{"class":643},[617,52507,3111],{"class":622},[617,52509,52511,52513,52515,52517,52520],{"class":52510,"line":51546},[619,653],[617,52512,7985],{"class":630},[617,52514,637],{"class":622},[617,52516,640],{"class":622},[617,52518,52519],{"class":643},"[0, .85, -2]",[617,52521,3111],{"class":622},[617,52523,52525,52528,52530,52532,52535],{"class":52524,"line":51547},[619,653],[617,52526,52527],{"class":630}," :geometry",[617,52529,637],{"class":622},[617,52531,640],{"class":622},[617,52533,52534],{"class":643},"customGeometry",[617,52536,3111],{"class":622},[617,52538,52540,52542,52544,52546,52548],{"class":52539,"line":51548},[619,653],[617,52541,52391],{"class":630},[617,52543,637],{"class":622},[617,52545,640],{"class":622},[617,52547,51005],{"class":643},[617,52549,3111],{"class":622},[617,52551,52553],{"class":52552,"line":51549},[619,653],[617,52554,50696],{"class":622},[617,52556,52558,52560,52562,52564,52566,52568,52571,52573],{"class":52557,"line":51550},[619,653],[617,52559,844],{"class":622},[617,52561,4099],{"class":626},[617,52563,22720],{"class":630},[617,52565,637],{"class":622},[617,52567,640],{"class":622},[617,52569,52570],{"class":643},"text-xs p-8 text-center bg-[#F6B03B] text-dark",[617,52572,640],{"class":622},[617,52574,649],{"class":622},[617,52576,52578,52581,52583,52585,52588,52591,52593,52595,52598,52600,52602,52604,52607,52609,52611],{"class":52577,"line":51551},[619,653],[617,52579,52580],{"class":663}," CUSTOM ",[617,52582,623],{"class":622},[617,52584,7535],{"class":626},[617,52586,52587],{"class":622}," />",[617,52589,52590],{"class":622}," \u003C",[617,52592,1649],{"class":626},[617,52594,3631],{"class":622},[617,52596,52597],{"class":663},"CIRCLE ",[617,52599,623],{"class":622},[617,52601,7535],{"class":626},[617,52603,52587],{"class":622},[617,52605,52606],{"class":663}," GEOMETRY",[617,52608,712],{"class":622},[617,52610,1649],{"class":626},[617,52612,649],{"class":622},[617,52614,52616,52618,52620],{"class":619,"line":52615},85,[617,52617,52324],{"class":622},[617,52619,4099],{"class":626},[617,52621,649],{"class":622},[617,52623,52625,52627,52629],{"class":52624,"line":51552},[619,653],[617,52626,865],{"class":622},[617,52628,50732],{"class":626},[617,52630,649],{"class":622},[617,52632,52634],{"class":52633,"line":51553},[619,653],[617,52635,722],{"emptyLinePlaceholder":574},[617,52637,52639,52641],{"class":52638,"line":51554},[619,653],[617,52640,833],{"class":622},[617,52642,50636],{"class":626},[617,52644,52646,52648,52650,52652,52655],{"class":52645,"line":51555},[619,653],[617,52647,23775],{"class":630},[617,52649,637],{"class":622},[617,52651,640],{"class":622},[617,52653,52654],{"class":643},"targetDirectionLightRef",[617,52656,3111],{"class":622},[617,52658,52660],{"class":52659,"line":51556},[619,653],[617,52661,50642],{"class":630},[617,52663,52665],{"class":52664,"line":51557},[619,653],[617,52666,50648],{"class":630},[617,52668,52670,52672,52674,52676,52678],{"class":52669,"line":51558},[619,653],[617,52671,52363],{"class":630},[617,52673,637],{"class":622},[617,52675,640],{"class":622},[617,52677,46626],{"class":643},[617,52679,3111],{"class":622},[617,52681,52683,52685,52687,52689,52692],{"class":52682,"line":51559},[619,653],[617,52684,7985],{"class":630},[617,52686,637],{"class":622},[617,52688,640],{"class":622},[617,52690,52691],{"class":643},"[4, .5, -2]",[617,52693,3111],{"class":622},[617,52695,52697,52700,52702,52704,52707],{"class":52696,"line":51560},[619,653],[617,52698,52699],{"class":630}," :material",[617,52701,637],{"class":622},[617,52703,640],{"class":622},[617,52705,52706],{"class":643},"customMaterial",[617,52708,3111],{"class":622},[617,52710,52712],{"class":52711,"line":51561},[619,653],[617,52713,52714],{"class":630}," receive-shadow\n",[617,52716,52718,52720,52722,52724,52726],{"class":52717,"line":51562},[619,653],[617,52719,52391],{"class":630},[617,52721,637],{"class":622},[617,52723,640],{"class":622},[617,52725,51005],{"class":643},[617,52727,3111],{"class":622},[617,52729,52731],{"class":619,"line":52730},97,[617,52732,50696],{"class":622},[617,52734,52736,52738,52740,52742,52744,52746,52749,52751,52753,52755],{"class":52735,"line":51563},[619,653],[617,52737,844],{"class":622},[617,52739,4099],{"class":626},[617,52741,4102],{"class":630},[617,52743,637],{"class":622},[617,52745,640],{"class":622},[617,52747,52748],{"class":643},"width: 100px; height: auto; aspect-ratio: 250/250;",[617,52750,640],{"class":622},[617,52752,22757],{"class":622},[617,52754,4099],{"class":626},[617,52756,649],{"class":622},[617,52758,52760,52762,52764],{"class":52759,"line":51564},[619,653],[617,52761,865],{"class":622},[617,52763,50732],{"class":626},[617,52765,649],{"class":622},[617,52767,52769],{"class":52768,"line":51565},[619,653],[617,52770,722],{"emptyLinePlaceholder":574},[617,52772,52774,52776],{"class":52773,"line":51566},[619,653],[617,52775,833],{"class":622},[617,52777,50636],{"class":626},[617,52779,52781],{"class":52780,"line":51567},[619,653],[617,52782,50642],{"class":630},[617,52784,52786],{"class":52785,"line":51568},[619,653],[617,52787,50648],{"class":630},[617,52789,52791,52793,52795,52797,52799],{"class":52790,"line":51569},[619,653],[617,52792,52363],{"class":630},[617,52794,637],{"class":622},[617,52796,640],{"class":622},[617,52798,46626],{"class":643},[617,52800,3111],{"class":622},[617,52802,52804,52806,52808,52810,52813],{"class":52803,"line":51570},[619,653],[617,52805,7985],{"class":630},[617,52807,637],{"class":622},[617,52809,640],{"class":622},[617,52811,52812],{"class":643},"[4, 2.5, -2]",[617,52814,3111],{"class":622},[617,52816,52818,52820,52822,52824,52826],{"class":52817,"line":51571},[619,653],[617,52819,52391],{"class":630},[617,52821,637],{"class":622},[617,52823,640],{"class":622},[617,52825,51005],{"class":643},[617,52827,3111],{"class":622},[617,52829,52831],{"class":52830,"line":51572},[619,653],[617,52832,50696],{"class":622},[617,52834,52836,52838,52840,52842,52844,52846,52849,52851],{"class":52835,"line":51573},[619,653],[617,52837,844],{"class":622},[617,52839,4099],{"class":626},[617,52841,22720],{"class":630},[617,52843,637],{"class":622},[617,52845,640],{"class":622},[617,52847,52848],{"class":643},"text-center text-xs p-2 text-dark bg-[#FF0000]",[617,52850,640],{"class":622},[617,52852,649],{"class":622},[617,52854,52856,52858,52860,52862,52865,52867,52869,52871,52873,52875],{"class":619,"line":52855},109,[617,52857,52283],{"class":622},[617,52859,1649],{"class":626},[617,52861,3631],{"class":622},[617,52863,52864],{"class":663},"HTML + Custom material ",[617,52866,712],{"class":622},[617,52868,1649],{"class":626},[617,52870,3631],{"class":622},[617,52872,52590],{"class":622},[617,52874,7535],{"class":626},[617,52876,767],{"class":622},[617,52878,52880,52882,52884,52886,52889,52891,52893,52895],{"class":619,"line":52879},110,[617,52881,52283],{"class":622},[617,52883,1654],{"class":626},[617,52885,3631],{"class":622},[617,52887,52888],{"class":663},"+ receive-shadow ",[617,52890,712],{"class":622},[617,52892,1654],{"class":626},[617,52894,3631],{"class":622},[617,52896,52897],{"class":663}," ⬇️\n",[617,52899,52901,52903,52905],{"class":619,"line":52900},111,[617,52902,52324],{"class":622},[617,52904,4099],{"class":626},[617,52906,649],{"class":622},[617,52908,52910,52912,52914],{"class":619,"line":52909},112,[617,52911,865],{"class":622},[617,52913,50732],{"class":626},[617,52915,649],{"class":622},[617,52917,52919],{"class":619,"line":52918},113,[617,52920,722],{"emptyLinePlaceholder":574},[617,52922,52924,52926],{"class":619,"line":52923},114,[617,52925,833],{"class":622},[617,52927,15217],{"class":626},[617,52929,52931,52934,52936,52938,52941],{"class":619,"line":52930},115,[617,52932,52933],{"class":630}," v-if",[617,52935,637],{"class":622},[617,52937,640],{"class":622},[617,52939,52940],{"class":643},"targetDirectionLightRef?.instance",[617,52942,3111],{"class":622},[617,52944,52946,52949,52951,52953,52955],{"class":619,"line":52945},116,[617,52947,52948],{"class":630}," :target",[617,52950,637],{"class":622},[617,52952,640],{"class":622},[617,52954,52940],{"class":643},[617,52956,3111],{"class":622},[617,52958,52960,52963,52965,52967,52970],{"class":619,"line":52959},117,[617,52961,52962],{"class":630}," :shadow-normalBias",[617,52964,637],{"class":622},[617,52966,640],{"class":622},[617,52968,52969],{"class":643},"0.075",[617,52971,3111],{"class":622},[617,52973,52975,52977,52979,52981,52984],{"class":619,"line":52974},118,[617,52976,7985],{"class":630},[617,52978,637],{"class":622},[617,52980,640],{"class":622},[617,52982,52983],{"class":643},"[5, 0, 5]",[617,52985,3111],{"class":622},[617,52987,52989,52991,52993,52995,52997],{"class":619,"line":52988},119,[617,52990,39605],{"class":630},[617,52992,637],{"class":622},[617,52994,640],{"class":622},[617,52996,800],{"class":643},[617,52998,3111],{"class":622},[617,53000,53002],{"class":619,"line":53001},120,[617,53003,53004],{"class":630}," cast-shadow\n",[617,53006,53008],{"class":619,"line":53007},121,[617,53009,8013],{"class":622},[617,53011,53013],{"class":619,"line":53012},122,[617,53014,722],{"emptyLinePlaceholder":574},[617,53016,53018,53020,53022,53024,53026,53028,53030,53032],{"class":619,"line":53017},123,[617,53019,833],{"class":622},[617,53021,8029],{"class":626},[617,53023,1919],{"class":630},[617,53025,637],{"class":622},[617,53027,640],{"class":622},[617,53029,8949],{"class":643},[617,53031,640],{"class":622},[617,53033,767],{"class":622},[617,53035,53037,53039,53041,53043,53045,53047,53049,53051],{"class":619,"line":53036},124,[617,53038,833],{"class":622},[617,53040,8436],{"class":626},[617,53042,1847],{"class":630},[617,53044,637],{"class":622},[617,53046,640],{"class":622},[617,53048,1854],{"class":643},[617,53050,640],{"class":622},[617,53052,767],{"class":622},[617,53054,53056,53058,53060],{"class":619,"line":53055},125,[617,53057,875],{"class":622},[617,53059,741],{"class":626},[617,53061,649],{"class":622},[617,53063,53065,53067,53069],{"class":619,"line":53064},126,[617,53066,885],{"class":622},[617,53068,4099],{"class":626},[617,53070,649],{"class":622},[617,53072,53074,53076,53078],{"class":619,"line":53073},127,[617,53075,712],{"class":622},[617,53077,730],{"class":626},[617,53079,649],{"class":622},[617,53081,53083],{"class":619,"line":53082},128,[617,53084,722],{"emptyLinePlaceholder":574},[617,53086,53088,53090,53092,53094],{"class":619,"line":53087},129,[617,53089,623],{"class":622},[617,53091,1307],{"class":626},[617,53093,50783],{"class":630},[617,53095,649],{"class":622},[617,53097,53099,53101,53104],{"class":619,"line":53098},130,[617,53100,1126],{"class":622},[617,53102,53103],{"class":1180},"html-demo-wrapper",[617,53105,1184],{"class":622},[617,53107,53109,53111,53113,53116],{"class":619,"line":53108},131,[617,53110,1220],{"class":4109},[617,53112,1198],{"class":622},[617,53114,53115],{"class":2481}," 100%",[617,53117,8277],{"class":622},[617,53119,53121,53123,53125,53127],{"class":619,"line":53120},132,[617,53122,1230],{"class":4109},[617,53124,1198],{"class":622},[617,53126,53115],{"class":2481},[617,53128,8277],{"class":622},[617,53130,53132,53134,53136,53138],{"class":619,"line":53131},133,[617,53133,5325],{"class":4109},[617,53135,1198],{"class":622},[617,53137,4115],{"class":663},[617,53139,8277],{"class":622},[617,53141,53143,53146,53148,53151],{"class":619,"line":53142},134,[617,53144,53145],{"class":4109}," overflow",[617,53147,1198],{"class":622},[617,53149,53150],{"class":663}," hidden",[617,53152,8277],{"class":622},[617,53154,53156,53158,53160,53162,53165],{"class":619,"line":53155},135,[617,53157,50798],{"class":4109},[617,53159,1198],{"class":622},[617,53161,50803],{"class":622},[617,53163,53164],{"class":663},"82dbc5",[617,53166,8277],{"class":622},[617,53168,53170],{"class":619,"line":53169},136,[617,53171,1305],{"class":622},[617,53173,53175,53177,53179],{"class":619,"line":53174},137,[617,53176,712],{"class":622},[617,53178,1307],{"class":626},[617,53180,649],{"class":622},[484,53182,42805],{"id":42804},[594,53184,53185,53186,53189,53190,53193,53194,53196,53197,53200,53201,53205],{},"By default, when using ",[598,53187,53188],{},"occlude=\"blending\"",", occlusion works correctly only with ",[1649,53191,53192],{},"rectangular HTML elements"," (using a ",[598,53195,30637],{},").\nFor ",[1654,53198,53199],{},"non-rectangular content",", you can use the ",[1649,53202,53203],{},[598,53204,5236],{}," prop to provide a matching custom geometry.",[594,53207,53208,53209,3174,53212,53215,53216,53222,53223,1126],{},"In the ",[1649,53210,53211],{},"demo above ⬆️",[1654,53213,53214],{},"(middle yellow example)",", a ",[1120,53217,53220],{"href":53218,"rel":53219},"https://threejs.org/docs/#api/en/geometries/CircleGeometry",[1124],[598,53221,28021],{}," is used as a ",[1649,53224,53225],{},"custom geometry",[53227,53228,53229],"prose-list",{},[2193,53230,53231,53240],{},[2196,53232,2756,53233,53235,53236,53239],{},[598,53234,5236],{}," prop only defines the ",[1649,53237,53238],{},"occlusion shape"," in 3D and does not modify your HTML content.",[2196,53241,53242,53243,53250,53251,53254,53255,53258,53259,53266],{},"You can provide any ",[1120,53244,53247],{"href":53245,"rel":53246},"https://threejs.org/docs/#api/en/core/BufferGeometry",[1124],[598,53248,53249],{},"BufferGeometry",", for example to simulate ",[1649,53252,53253],{},"CSS-like styles"," such as ",[598,53256,53257],{},"border-radius"," using a rounded rectangle or squircle geometry (see ",[1120,53260,53263],{"href":53261,"rel":53262},"https://discourse.threejs.org/t/roundedrectangle-squircle/28645",[1124],[598,53264,53265],{},"RoundedRectangle / Squircle geometry"," for example).",[4031,53268,53269],{"id":2965},"Custom Material",[594,53271,53272,53273,53275,53276,3174,53278,53215,53281,53284],{},"You can also assign material properties to the HTML content using the ",[598,53274,5180],{}," prop.\nIn the ",[1649,53277,53211],{},[1654,53279,53280],{},"(right red example)",[1649,53282,53283],{},"custom material"," is used with shadow.",[1985,53286,53287],{},[594,53288,2756,53289,53291,53292,5863,53294,1126],{},[598,53290,5180],{}," prop is only available when ",[598,53293,53188],{},[1649,53295,14632],{},[1985,53297,53298],{},[594,53299,53300,53301,3043,53305,53309,53310,53313,53314,53316,53317,53319,53320,5591,53324,8146,53329],{},"Enable shadows using the ",[1649,53302,53303],{},[598,53304,16307],{},[1649,53306,53307],{},[598,53308,16325],{}," props.\nShadows are supported ",[1649,53311,53312],{},"only"," when using a ",[1649,53315,53283],{},". By default, shadows do ",[1649,53318,6321],{}," work with ",[1654,53321,53322],{},[598,53323,2971],{},[1654,53325,53326],{},[598,53327,53328],{},"ShaderMaterial",[7535,53330],{},[484,53332,53334,53335],{"id":53333},"using-transition","Using ",[598,53336,53337],{},"\u003CTransition>",[594,53339,53340,53341,53347,53348,53350,53351,53354,53355,3043,53358,53361],{},"The native Vue ",[1120,53342,53345],{"href":53343,"rel":53344},"https://vuejs.org/guide/built-ins/transition",[1124],[598,53346,53337],{}," component works seamlessly with ",[598,53349,50453],{},".\nThis means you can ",[1649,53352,53353],{},"animate"," how your projected HTML content ",[1654,53356,53357],{},"enters",[1654,53359,53360],{},"leaves"," the scene, exactly as you would in a regular Vue application.",[1985,53363,53364],{},[594,53365,26970,53366,53369,53370,1652,53373,1668,53375,53378],{},[1649,53367,53368],{},"standard interactions"," are supported just like on a regular HTML element — ",[1649,53371,53372],{},"hover effects",[1649,53374,12329],{},[1654,53376,53377],{},"any kind of DOM interaction"," are fully possible.",[588,53380,53381],{},[53382,53383],"objects-html-transition-demo",{},[5287,53385,5289,53386,53388],{},[5291,53387,50919],{},[606,53389,53392],{"className":608,"code":53390,"highlights":53391,"language":613,"meta":556,"style":556},"\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",[558,52466,51541,51542,51543,51544,51545,51546,51547,51548,51549,51550,51551,52615,51552,51553,51554,51555,51556,51557,51558],[598,53393,53394,53414,53441,53459,53477,53481,53491,53505,53515,53525,53535,53546,53550,53554,53574,53578,53600,53604,53614,53618,53632,53654,53658,53662,53676,53698,53702,53706,53720,53746,53750,53754,53769,53792,53796,53800,53804,53822,53895,53932,53953,53957,53961,53976,53992,53996,54004,54008,54016,54045,54074,54092,54111,54115,54121,54133,54145,54157,54169,54181,54194,54198,54217,54245,54253,54261,54269,54273,54279,54283,54287,54299,54312,54326,54339,54344,54364,54372,54387,54402,54417,54432,54438,54462,54480,54490,54499,54508,54513,54533,54552,54561,54570,54578,54582,54592,54600,54610,54620,54630,54640,54652,54656,54660,54674,54692,54696,54700,54709,54718,54728,54744,54748,54752,54761,54770,54788,54792,54796,54805,54814,54824,54838,54842],{"__ignoreMap":556},[617,53395,53396,53398,53400,53402,53404,53406,53408,53410,53412],{"class":619,"line":557},[617,53397,623],{"class":622},[617,53399,627],{"class":626},[617,53401,631],{"class":630},[617,53403,634],{"class":630},[617,53405,637],{"class":622},[617,53407,640],{"class":622},[617,53409,644],{"class":643},[617,53411,640],{"class":622},[617,53413,649],{"class":622},[617,53415,53417,53419,53421,53423,53425,53427,53429,53431,53433,53435,53437,53439],{"class":53416,"line":558},[619,653],[617,53418,657],{"class":656},[617,53420,660],{"class":622},[617,53422,50497],{"class":663},[617,53424,667],{"class":622},[617,53426,8287],{"class":663},[617,53428,667],{"class":622},[617,53430,670],{"class":663},[617,53432,673],{"class":622},[617,53434,676],{"class":656},[617,53436,679],{"class":622},[617,53438,682],{"class":643},[617,53440,685],{"class":622},[617,53442,53443,53445,53447,53449,53451,53453,53455,53457],{"class":619,"line":688},[617,53444,657],{"class":656},[617,53446,660],{"class":622},[617,53448,695],{"class":663},[617,53450,673],{"class":622},[617,53452,676],{"class":656},[617,53454,679],{"class":622},[617,53456,704],{"class":643},[617,53458,685],{"class":622},[617,53460,53461,53463,53465,53467,53469,53471,53473,53475],{"class":619,"line":709},[617,53462,657],{"class":656},[617,53464,660],{"class":622},[617,53466,3852],{"class":663},[617,53468,673],{"class":622},[617,53470,676],{"class":656},[617,53472,679],{"class":622},[617,53474,613],{"class":643},[617,53476,685],{"class":622},[617,53478,53479],{"class":619,"line":719},[617,53480,722],{"emptyLinePlaceholder":574},[617,53482,53483,53485,53487,53489],{"class":619,"line":725},[617,53484,2395],{"class":630},[617,53486,51692],{"class":663},[617,53488,637],{"class":622},[617,53490,1184],{"class":622},[617,53492,53493,53495,53497,53499,53501,53503],{"class":619,"line":735},[617,53494,51701],{"class":626},[617,53496,1198],{"class":622},[617,53498,679],{"class":622},[617,53500,9840],{"class":643},[617,53502,2420],{"class":622},[617,53504,2468],{"class":622},[617,53506,53507,53509,53511,53513],{"class":619,"line":758},[617,53508,51716],{"class":626},[617,53510,1198],{"class":622},[617,53512,2486],{"class":2481},[617,53514,2468],{"class":622},[617,53516,53517,53519,53521,53523],{"class":619,"line":770},[617,53518,51727],{"class":626},[617,53520,1198],{"class":622},[617,53522,4378],{"class":4377},[617,53524,2468],{"class":622},[617,53526,53527,53529,53531,53533],{"class":619,"line":780},[617,53528,51738],{"class":626},[617,53530,1198],{"class":622},[617,53532,4378],{"class":4377},[617,53534,2468],{"class":622},[617,53536,53537,53540,53542,53544],{"class":619,"line":785},[617,53538,53539],{"class":626}," antialias",[617,53541,1198],{"class":622},[617,53543,4378],{"class":4377},[617,53545,2468],{"class":622},[617,53547,53548],{"class":619,"line":807},[617,53549,1305],{"class":622},[617,53551,53552],{"class":619,"line":611},[617,53553,722],{"emptyLinePlaceholder":574},[617,53555,53556,53558,53561,53563,53565,53567,53570,53572],{"class":619,"line":830},[617,53557,2395],{"class":630},[617,53559,53560],{"class":663}," rootRef ",[617,53562,637],{"class":622},[617,53564,3852],{"class":2414},[617,53566,623],{"class":622},[617,53568,53569],{"class":1180},"HTMLElement",[617,53571,3631],{"class":622},[617,53573,6515],{"class":663},[617,53575,53576],{"class":619,"line":841},[617,53577,722],{"emptyLinePlaceholder":574},[617,53579,53580,53582,53585,53587,53589,53591,53593,53596,53598],{"class":619,"line":852},[617,53581,2395],{"class":630},[617,53583,53584],{"class":663}," bgColor ",[617,53586,637],{"class":622},[617,53588,3852],{"class":2414},[617,53590,2417],{"class":663},[617,53592,2420],{"class":622},[617,53594,53595],{"class":643},"#F6B03B",[617,53597,2420],{"class":622},[617,53599,2428],{"class":663},[617,53601,53602],{"class":619,"line":862},[617,53603,722],{"emptyLinePlaceholder":574},[617,53605,53606,53608,53610,53612],{"class":619,"line":612},[617,53607,2395],{"class":630},[617,53609,51780],{"class":663},[617,53611,637],{"class":622},[617,53613,18312],{"class":663},[617,53615,53616],{"class":619,"line":882},[617,53617,2451],{"class":622},[617,53619,53620,53622,53624,53626,53628,53630],{"class":619,"line":892},[617,53621,51793],{"class":626},[617,53623,1198],{"class":622},[617,53625,679],{"class":622},[617,53627,847],{"class":643},[617,53629,2420],{"class":622},[617,53631,2468],{"class":622},[617,53633,53634,53636,53638,53640,53642,53644,53646,53648,53650,53652],{"class":619,"line":2605},[617,53635,51808],{"class":626},[617,53637,1198],{"class":622},[617,53639,2478],{"class":663},[617,53641,1854],{"class":2481},[617,53643,667],{"class":622},[617,53645,2541],{"class":2481},[617,53647,667],{"class":622},[617,53649,2541],{"class":2481},[617,53651,2494],{"class":663},[617,53653,2468],{"class":622},[617,53655,53656],{"class":619,"line":2614},[617,53657,2577],{"class":622},[617,53659,53660],{"class":619,"line":2634},[617,53661,2451],{"class":622},[617,53663,53664,53666,53668,53670,53672,53674],{"class":619,"line":2643},[617,53665,51793],{"class":626},[617,53667,1198],{"class":622},[617,53669,679],{"class":622},[617,53671,3938],{"class":643},[617,53673,2420],{"class":622},[617,53675,2468],{"class":622},[617,53677,53678,53680,53682,53684,53686,53688,53690,53692,53694,53696],{"class":619,"line":2652},[617,53679,51808],{"class":626},[617,53681,1198],{"class":622},[617,53683,2478],{"class":663},[617,53685,44481],{"class":2481},[617,53687,667],{"class":622},[617,53689,28063],{"class":2481},[617,53691,667],{"class":622},[617,53693,28063],{"class":2481},[617,53695,2494],{"class":663},[617,53697,2468],{"class":622},[617,53699,53700],{"class":619,"line":2661},[617,53701,2577],{"class":622},[617,53703,53704],{"class":619,"line":2683},[617,53705,2451],{"class":622},[617,53707,53708,53710,53712,53714,53716,53718],{"class":619,"line":2727},[617,53709,51793],{"class":626},[617,53711,1198],{"class":622},[617,53713,679],{"class":622},[617,53715,9912],{"class":643},[617,53717,2420],{"class":622},[617,53719,2468],{"class":622},[617,53721,53722,53724,53726,53728,53730,53732,53734,53736,53738,53740,53742,53744],{"class":619,"line":2736},[617,53723,51808],{"class":626},[617,53725,1198],{"class":622},[617,53727,2478],{"class":663},[617,53729,1926],{"class":2481},[617,53731,667],{"class":622},[617,53733,32689],{"class":2481},[617,53735,667],{"class":622},[617,53737,32567],{"class":2481},[617,53739,667],{"class":622},[617,53741,7743],{"class":2481},[617,53743,2494],{"class":663},[617,53745,2468],{"class":622},[617,53747,53748],{"class":619,"line":2745},[617,53749,2577],{"class":622},[617,53751,53752],{"class":619,"line":3902},[617,53753,2451],{"class":622},[617,53755,53756,53758,53760,53762,53765,53767],{"class":619,"line":3933},[617,53757,51793],{"class":626},[617,53759,1198],{"class":622},[617,53761,679],{"class":622},[617,53763,53764],{"class":643},"TresConeGeometry",[617,53766,2420],{"class":622},[617,53768,2468],{"class":622},[617,53770,53771,53773,53775,53777,53779,53781,53784,53786,53788,53790],{"class":619,"line":3954},[617,53772,51808],{"class":626},[617,53774,1198],{"class":622},[617,53776,2478],{"class":663},[617,53778,44481],{"class":2481},[617,53780,667],{"class":622},[617,53782,53783],{"class":2481}," 1.4",[617,53785,667],{"class":622},[617,53787,28063],{"class":2481},[617,53789,2494],{"class":663},[617,53791,2468],{"class":622},[617,53793,53794],{"class":619,"line":3973},[617,53795,2577],{"class":622},[617,53797,53798],{"class":619,"line":4005},[617,53799,18348],{"class":663},[617,53801,53802],{"class":619,"line":4014},[617,53803,722],{"emptyLinePlaceholder":574},[617,53805,53806,53808,53811,53813,53816,53818,53820],{"class":619,"line":4023},[617,53807,2395],{"class":630},[617,53809,53810],{"class":663}," getRandomBackgroundColor ",[617,53812,637],{"class":622},[617,53814,53815],{"class":622}," ():",[617,53817,5317],{"class":1180},[617,53819,3657],{"class":630},[617,53821,1184],{"class":622},[617,53823,53824,53827,53830,53832,53834,53836,53838,53840,53842,53844,53846,53848,53850,53852,53855,53857,53859,53861,53864,53866,53868,53870,53873,53875,53877,53879,53882,53884,53886,53888,53891,53893],{"class":619,"line":19053},[617,53825,53826],{"class":630}," const",[617,53828,53829],{"class":663}," colors",[617,53831,2411],{"class":622},[617,53833,2478],{"class":626},[617,53835,2420],{"class":622},[617,53837,53595],{"class":643},[617,53839,2420],{"class":622},[617,53841,667],{"class":622},[617,53843,679],{"class":622},[617,53845,9840],{"class":643},[617,53847,2420],{"class":622},[617,53849,667],{"class":622},[617,53851,679],{"class":622},[617,53853,53854],{"class":643},"#FF5733",[617,53856,2420],{"class":622},[617,53858,667],{"class":622},[617,53860,679],{"class":622},[617,53862,53863],{"class":643},"#33FF57",[617,53865,2420],{"class":622},[617,53867,667],{"class":622},[617,53869,679],{"class":622},[617,53871,53872],{"class":643},"#3357FF",[617,53874,2420],{"class":622},[617,53876,667],{"class":622},[617,53878,679],{"class":622},[617,53880,53881],{"class":643},"#F333FF",[617,53883,2420],{"class":622},[617,53885,667],{"class":622},[617,53887,679],{"class":622},[617,53889,53890],{"class":643},"#33FFF5",[617,53892,2420],{"class":622},[617,53894,18348],{"class":626},[617,53896,53897,53899,53902,53904,53906,53908,53910,53912,53915,53917,53920,53922,53924,53926,53928,53930],{"class":619,"line":19068},[617,53898,53826],{"class":630},[617,53900,53901],{"class":663}," idx",[617,53903,2411],{"class":622},[617,53905,28822],{"class":663},[617,53907,1126],{"class":622},[617,53909,42563],{"class":2414},[617,53911,2417],{"class":626},[617,53913,53914],{"class":663},"Math",[617,53916,1126],{"class":622},[617,53918,53919],{"class":2414},"random",[617,53921,6964],{"class":626},[617,53923,20734],{"class":622},[617,53925,53829],{"class":663},[617,53927,1126],{"class":622},[617,53929,18883],{"class":663},[617,53931,2428],{"class":626},[617,53933,53934,53936,53938,53940,53943,53945,53947,53949,53951],{"class":619,"line":19083},[617,53935,20700],{"class":656},[617,53937,53829],{"class":663},[617,53939,18946],{"class":626},[617,53941,53942],{"class":663},"idx",[617,53944,5344],{"class":626},[617,53946,3674],{"class":622},[617,53948,679],{"class":622},[617,53950,53595],{"class":643},[617,53952,685],{"class":622},[617,53954,53955],{"class":619,"line":19088},[617,53956,1305],{"class":622},[617,53958,53959],{"class":619,"line":19095},[617,53960,722],{"emptyLinePlaceholder":574},[617,53962,53963,53965,53968,53970,53972,53974],{"class":619,"line":19100},[617,53964,2395],{"class":630},[617,53966,53967],{"class":663}," updateBackgroundColor ",[617,53969,637],{"class":622},[617,53971,7060],{"class":622},[617,53973,3657],{"class":630},[617,53975,1184],{"class":622},[617,53977,53978,53981,53983,53985,53987,53990],{"class":619,"line":19106},[617,53979,53980],{"class":663}," bgColor",[617,53982,1126],{"class":622},[617,53984,3665],{"class":663},[617,53986,2411],{"class":622},[617,53988,53989],{"class":2414}," getRandomBackgroundColor",[617,53991,6515],{"class":626},[617,53993,53994],{"class":619,"line":19127},[617,53995,1305],{"class":622},[617,53997,53998,54000,54002],{"class":619,"line":19133},[617,53999,712],{"class":622},[617,54001,627],{"class":626},[617,54003,649],{"class":622},[617,54005,54006],{"class":619,"line":19140},[617,54007,722],{"emptyLinePlaceholder":574},[617,54009,54010,54012,54014],{"class":619,"line":19145},[617,54011,623],{"class":622},[617,54013,730],{"class":626},[617,54015,649],{"class":622},[617,54017,54018,54020,54022,54024,54026,54028,54031,54033,54035,54037,54039,54041,54043],{"class":619,"line":19166},[617,54019,738],{"class":622},[617,54021,4099],{"class":626},[617,54023,3852],{"class":630},[617,54025,637],{"class":622},[617,54027,640],{"class":622},[617,54029,54030],{"class":643},"rootRef",[617,54032,640],{"class":622},[617,54034,22720],{"class":630},[617,54036,637],{"class":622},[617,54038,640],{"class":622},[617,54040,53103],{"class":643},[617,54042,640],{"class":622},[617,54044,649],{"class":622},[617,54046,54047,54049,54051,54053,54055,54057,54059,54061,54063,54065,54067,54070,54072],{"class":619,"line":19179},[617,54048,761],{"class":622},[617,54050,741],{"class":626},[617,54052,8970],{"class":630},[617,54054,637],{"class":622},[617,54056,640],{"class":622},[617,54058,52123],{"class":643},[617,54060,640],{"class":622},[617,54062,22720],{"class":630},[617,54064,637],{"class":622},[617,54066,640],{"class":622},[617,54068,54069],{"class":643},"!pointer-events-none",[617,54071,640],{"class":622},[617,54073,649],{"class":622},[617,54075,54076,54078,54080,54082,54084,54086,54088,54090],{"class":619,"line":19205},[617,54077,833],{"class":622},[617,54079,764],{"class":626},[617,54081,1465],{"class":630},[617,54083,637],{"class":622},[617,54085,640],{"class":622},[617,54087,52142],{"class":643},[617,54089,640],{"class":622},[617,54091,767],{"class":622},[617,54093,54094,54096,54098,54101,54103,54105,54107,54109],{"class":619,"line":19210},[617,54095,833],{"class":622},[617,54097,775],{"class":626},[617,54099,54100],{"class":630}," :dom-element",[617,54102,637],{"class":622},[617,54104,640],{"class":622},[617,54106,54030],{"class":643},[617,54108,640],{"class":622},[617,54110,767],{"class":622},[617,54112,54113],{"class":619,"line":19217},[617,54114,722],{"emptyLinePlaceholder":574},[617,54116,54117,54119],{"class":619,"line":19226},[617,54118,833],{"class":622},[617,54120,52165],{"class":626},[617,54122,54123,54125,54127,54129,54131],{"class":619,"line":19231},[617,54124,7957],{"class":630},[617,54126,637],{"class":622},[617,54128,640],{"class":622},[617,54130,52176],{"class":643},[617,54132,3111],{"class":622},[617,54134,54135,54137,54139,54141,54143],{"class":619,"line":19240},[617,54136,7971],{"class":630},[617,54138,637],{"class":622},[617,54140,640],{"class":622},[617,54142,52189],{"class":643},[617,54144,3111],{"class":622},[617,54146,54147,54149,54151,54153,54155],{"class":619,"line":19259},[617,54148,27174],{"class":630},[617,54150,637],{"class":622},[617,54152,640],{"class":622},[617,54154,19006],{"class":643},[617,54156,3111],{"class":622},[617,54158,54159,54161,54163,54165,54167],{"class":619,"line":19269},[617,54160,52208],{"class":630},[617,54162,637],{"class":622},[617,54164,640],{"class":622},[617,54166,52215],{"class":643},[617,54168,3111],{"class":622},[617,54170,54171,54173,54175,54177,54179],{"class":619,"line":19304},[617,54172,52222],{"class":630},[617,54174,637],{"class":622},[617,54176,640],{"class":622},[617,54178,1854],{"class":643},[617,54180,3111],{"class":622},[617,54182,54183,54185,54187,54189,54192],{"class":619,"line":19313},[617,54184,52235],{"class":630},[617,54186,637],{"class":622},[617,54188,640],{"class":622},[617,54190,54191],{"class":643},"[-0.4, 0.4]",[617,54193,3111],{"class":622},[617,54195,54196],{"class":619,"line":19333},[617,54197,50696],{"class":622},[617,54199,54200,54202,54204,54206,54208,54210,54213,54215],{"class":619,"line":19342},[617,54201,844],{"class":622},[617,54203,836],{"class":626},[617,54205,1465],{"class":630},[617,54207,637],{"class":622},[617,54209,640],{"class":622},[617,54211,54212],{"class":643},"[(index - (geometries.length - 1) / 2) * 2, 1, 0]",[617,54214,640],{"class":622},[617,54216,649],{"class":622},[617,54218,54219,54221,54223,54225,54227,54229,54231,54233,54235,54237,54239,54241,54243],{"class":619,"line":19351},[617,54220,52283],{"class":622},[617,54222,52286],{"class":626},[617,54224,52289],{"class":630},[617,54226,637],{"class":622},[617,54228,640],{"class":622},[617,54230,52296],{"class":643},[617,54232,640],{"class":622},[617,54234,1939],{"class":630},[617,54236,637],{"class":622},[617,54238,640],{"class":622},[617,54240,52307],{"class":643},[617,54242,640],{"class":622},[617,54244,767],{"class":622},[617,54246,54247,54249,54251],{"class":619,"line":19370},[617,54248,52283],{"class":622},[617,54250,857],{"class":626},[617,54252,767],{"class":622},[617,54254,54255,54257,54259],{"class":619,"line":19413},[617,54256,52324],{"class":622},[617,54258,836],{"class":626},[617,54260,649],{"class":622},[617,54262,54263,54265,54267],{"class":619,"line":19455},[617,54264,865],{"class":622},[617,54266,8398],{"class":626},[617,54268,649],{"class":622},[617,54270,54271],{"class":619,"line":19475},[617,54272,722],{"emptyLinePlaceholder":574},[617,54274,54275,54277],{"class":619,"line":19504},[617,54276,833],{"class":622},[617,54278,50636],{"class":626},[617,54280,54281],{"class":619,"line":19513},[617,54282,50642],{"class":630},[617,54284,54285],{"class":619,"line":19522},[617,54286,50648],{"class":630},[617,54288,54289,54291,54293,54295,54297],{"class":619,"line":51539},[617,54290,52363],{"class":630},[617,54292,637],{"class":622},[617,54294,640],{"class":622},[617,54296,46626],{"class":643},[617,54298,3111],{"class":622},[617,54300,54301,54303,54305,54307,54310],{"class":619,"line":51540},[617,54302,7985],{"class":630},[617,54304,637],{"class":622},[617,54306,640],{"class":622},[617,54308,54309],{"class":643},"[0, .75, -2]",[617,54311,3111],{"class":622},[617,54313,54315,54317,54319,54321,54324],{"class":54314,"line":52466},[619,653],[617,54316,50682],{"class":630},[617,54318,637],{"class":622},[617,54320,640],{"class":622},[617,54322,54323],{"class":643},"1.15",[617,54325,3111],{"class":622},[617,54327,54329,54331,54333,54335,54337],{"class":54328,"line":51541},[619,653],[617,54330,52391],{"class":630},[617,54332,637],{"class":622},[617,54334,640],{"class":622},[617,54336,51005],{"class":643},[617,54338,3111],{"class":622},[617,54340,54342],{"class":54341,"line":51542},[619,653],[617,54343,50696],{"class":622},[617,54345,54347,54349,54351,54353,54355,54357,54360,54362],{"class":54346,"line":51543},[619,653],[617,54348,844],{"class":622},[617,54350,22784],{"class":626},[617,54352,3795],{"class":630},[617,54354,637],{"class":622},[617,54356,640],{"class":622},[617,54358,54359],{"class":643},"transition-basic",[617,54361,640],{"class":622},[617,54363,649],{"class":622},[617,54365,54367,54369],{"class":54366,"line":51544},[619,653],[617,54368,52283],{"class":622},[617,54370,54371],{"class":626},"h1\n",[617,54373,54375,54378,54380,54382,54385],{"class":54374,"line":51545},[619,653],[617,54376,54377],{"class":630}," v-if",[617,54379,637],{"class":622},[617,54381,640],{"class":622},[617,54383,54384],{"class":643},"showTransition",[617,54386,3111],{"class":622},[617,54388,54390,54393,54395,54397,54400],{"class":54389,"line":51546},[619,653],[617,54391,54392],{"class":630}," :style",[617,54394,637],{"class":622},[617,54396,640],{"class":622},[617,54398,54399],{"class":643},"{ backgroundColor: bgColor }",[617,54401,3111],{"class":622},[617,54403,54405,54408,54410,54412,54415],{"class":54404,"line":51547},[619,653],[617,54406,54407],{"class":630}," class",[617,54409,637],{"class":622},[617,54411,640],{"class":622},[617,54413,54414],{"class":643},"html-demo-transition-heading will-change-transform transition-transform,background-color cursor-pointer duration-500 text-center p-2 text-light shadow-lg",[617,54416,3111],{"class":622},[617,54418,54420,54423,54425,54427,54430],{"class":54419,"line":51548},[619,653],[617,54421,54422],{"class":630}," @click",[617,54424,637],{"class":622},[617,54426,640],{"class":622},[617,54428,54429],{"class":643},"updateBackgroundColor",[617,54431,3111],{"class":622},[617,54433,54435],{"class":54434,"line":51549},[619,653],[617,54436,54437],{"class":622}," >\n",[617,54439,54441,54444,54446,54448,54451,54453,54455,54458,54460],{"class":54440,"line":51550},[619,653],[617,54442,54443],{"class":622}," \u003C",[617,54445,1649],{"class":626},[617,54447,3631],{"class":622},[617,54449,54450],{"class":663},"TRANSITION + ",[617,54452,712],{"class":622},[617,54454,1649],{"class":626},[617,54456,54457],{"class":622},">\u003C",[617,54459,7535],{"class":626},[617,54461,767],{"class":622},[617,54463,54465,54467,54469,54471,54474,54476,54478],{"class":54464,"line":51551},[619,653],[617,54466,54443],{"class":622},[617,54468,1654],{"class":626},[617,54470,3631],{"class":622},[617,54472,54473],{"class":663},"occlude=blending 💛",[617,54475,712],{"class":622},[617,54477,1654],{"class":626},[617,54479,649],{"class":622},[617,54481,54483,54486,54488],{"class":54482,"line":52615},[619,653],[617,54484,54485],{"class":622}," \u003C/",[617,54487,50703],{"class":626},[617,54489,649],{"class":622},[617,54491,54493,54495,54497],{"class":54492,"line":51552},[619,653],[617,54494,52324],{"class":622},[617,54496,22784],{"class":626},[617,54498,649],{"class":622},[617,54500,54502,54504,54506],{"class":54501,"line":51553},[619,653],[617,54503,865],{"class":622},[617,54505,50732],{"class":626},[617,54507,649],{"class":622},[617,54509,54511],{"class":54510,"line":51554},[619,653],[617,54512,722],{"emptyLinePlaceholder":574},[617,54514,54516,54518,54520,54522,54524,54526,54529,54531],{"class":54515,"line":51555},[619,653],[617,54517,833],{"class":622},[617,54519,8029],{"class":626},[617,54521,1919],{"class":630},[617,54523,637],{"class":622},[617,54525,640],{"class":622},[617,54527,54528],{"class":643},"-1.25",[617,54530,640],{"class":622},[617,54532,767],{"class":622},[617,54534,54536,54538,54540,54542,54544,54546,54548,54550],{"class":54535,"line":51556},[619,653],[617,54537,833],{"class":622},[617,54539,8436],{"class":626},[617,54541,1847],{"class":630},[617,54543,637],{"class":622},[617,54545,640],{"class":622},[617,54547,1854],{"class":643},[617,54549,640],{"class":622},[617,54551,767],{"class":622},[617,54553,54555,54557,54559],{"class":54554,"line":51557},[619,653],[617,54556,875],{"class":622},[617,54558,741],{"class":626},[617,54560,649],{"class":622},[617,54562,54564,54566,54568],{"class":54563,"line":51558},[619,653],[617,54565,885],{"class":622},[617,54567,4099],{"class":626},[617,54569,649],{"class":622},[617,54571,54572,54574,54576],{"class":619,"line":51559},[617,54573,712],{"class":622},[617,54575,730],{"class":626},[617,54577,649],{"class":622},[617,54579,54580],{"class":619,"line":51560},[617,54581,722],{"emptyLinePlaceholder":574},[617,54583,54584,54586,54588,54590],{"class":619,"line":51561},[617,54585,623],{"class":622},[617,54587,1307],{"class":626},[617,54589,50783],{"class":630},[617,54591,649],{"class":622},[617,54593,54594,54596,54598],{"class":619,"line":51562},[617,54595,1126],{"class":622},[617,54597,53103],{"class":1180},[617,54599,1184],{"class":622},[617,54601,54602,54604,54606,54608],{"class":619,"line":52730},[617,54603,1220],{"class":4109},[617,54605,1198],{"class":622},[617,54607,53115],{"class":2481},[617,54609,8277],{"class":622},[617,54611,54612,54614,54616,54618],{"class":619,"line":51563},[617,54613,1230],{"class":4109},[617,54615,1198],{"class":622},[617,54617,53115],{"class":2481},[617,54619,8277],{"class":622},[617,54621,54622,54624,54626,54628],{"class":619,"line":51564},[617,54623,5325],{"class":4109},[617,54625,1198],{"class":622},[617,54627,4115],{"class":663},[617,54629,8277],{"class":622},[617,54631,54632,54634,54636,54638],{"class":619,"line":51565},[617,54633,53145],{"class":4109},[617,54635,1198],{"class":622},[617,54637,53150],{"class":663},[617,54639,8277],{"class":622},[617,54641,54642,54644,54646,54648,54650],{"class":619,"line":51566},[617,54643,50798],{"class":4109},[617,54645,1198],{"class":622},[617,54647,50803],{"class":622},[617,54649,53164],{"class":663},[617,54651,8277],{"class":622},[617,54653,54654],{"class":619,"line":51567},[617,54655,1305],{"class":622},[617,54657,54658],{"class":619,"line":51568},[617,54659,722],{"emptyLinePlaceholder":574},[617,54661,54662,54664,54667,54669,54672],{"class":619,"line":51569},[617,54663,1126],{"class":622},[617,54665,54666],{"class":1180},"html-demo-transition-heading",[617,54668,1198],{"class":622},[617,54670,54671],{"class":630},"hover",[617,54673,1184],{"class":622},[617,54675,54676,54679,54681,54684,54686,54689],{"class":619,"line":51570},[617,54677,54678],{"class":4109}," transform",[617,54680,1198],{"class":622},[617,54682,54683],{"class":2414}," scale",[617,54685,2417],{"class":622},[617,54687,54688],{"class":2481},"1.05",[617,54690,54691],{"class":622},");\n",[617,54693,54694],{"class":619,"line":51571},[617,54695,1305],{"class":622},[617,54697,54698],{"class":619,"line":51572},[617,54699,722],{"emptyLinePlaceholder":574},[617,54701,54702,54704,54707],{"class":619,"line":51573},[617,54703,1126],{"class":622},[617,54705,54706],{"class":1180},"transition-basic-enter-from",[617,54708,2468],{"class":622},[617,54710,54711,54713,54716],{"class":619,"line":52855},[617,54712,1126],{"class":622},[617,54714,54715],{"class":1180},"transition-basic-leave-to",[617,54717,1184],{"class":622},[617,54719,54720,54722,54724,54726],{"class":619,"line":52879},[617,54721,5465],{"class":4109},[617,54723,1198],{"class":622},[617,54725,2486],{"class":2481},[617,54727,8277],{"class":622},[617,54729,54730,54732,54734,54737,54739,54742],{"class":619,"line":52900},[617,54731,54678],{"class":4109},[617,54733,1198],{"class":622},[617,54735,54736],{"class":2414}," translateY",[617,54738,2417],{"class":622},[617,54740,54741],{"class":2481},"-20px",[617,54743,54691],{"class":622},[617,54745,54746],{"class":619,"line":52909},[617,54747,1305],{"class":622},[617,54749,54750],{"class":619,"line":52918},[617,54751,722],{"emptyLinePlaceholder":574},[617,54753,54754,54756,54759],{"class":619,"line":52923},[617,54755,1126],{"class":622},[617,54757,54758],{"class":1180},"transition-basic-enter-active",[617,54760,2468],{"class":622},[617,54762,54763,54765,54768],{"class":619,"line":52930},[617,54764,1126],{"class":622},[617,54766,54767],{"class":1180},"transition-basic-leave-active",[617,54769,1184],{"class":622},[617,54771,54772,54775,54777,54780,54783,54786],{"class":619,"line":52945},[617,54773,54774],{"class":4109}," transition",[617,54776,1198],{"class":622},[617,54778,54779],{"class":663}," all ",[617,54781,54782],{"class":2481},"0.5s",[617,54784,54785],{"class":663}," ease",[617,54787,8277],{"class":622},[617,54789,54790],{"class":619,"line":52959},[617,54791,1305],{"class":622},[617,54793,54794],{"class":619,"line":52974},[617,54795,722],{"emptyLinePlaceholder":574},[617,54797,54798,54800,54803],{"class":619,"line":52988},[617,54799,1126],{"class":622},[617,54801,54802],{"class":1180},"transition-basic-enter-to",[617,54804,2468],{"class":622},[617,54806,54807,54809,54812],{"class":619,"line":53001},[617,54808,1126],{"class":622},[617,54810,54811],{"class":1180},"transition-basic-leave-from",[617,54813,1184],{"class":622},[617,54815,54816,54818,54820,54822],{"class":619,"line":53007},[617,54817,5465],{"class":4109},[617,54819,1198],{"class":622},[617,54821,2541],{"class":2481},[617,54823,8277],{"class":622},[617,54825,54826,54828,54830,54832,54834,54836],{"class":619,"line":53012},[617,54827,54678],{"class":4109},[617,54829,1198],{"class":622},[617,54831,54736],{"class":2414},[617,54833,2417],{"class":622},[617,54835,945],{"class":2481},[617,54837,54691],{"class":622},[617,54839,54840],{"class":619,"line":53017},[617,54841,1305],{"class":622},[617,54843,54844,54846,54848],{"class":619,"line":53036},[617,54845,712],{"class":622},[617,54847,1307],{"class":626},[617,54849,649],{"class":622},[4031,54851,53334,54853],{"id":54852},"using-iframes",[598,54854,54855],{},"iframes",[594,54857,54858,54859,54861],{},"You can achieve pretty cool results with the ",[598,54860,50732],{}," 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.",[2275,54863,54864],{},[54865,54866],"objects-html-iframe-demo",{},[5287,54868,5289,54869,54871],{},[5291,54870,50919],{},[606,54872,54874],{"className":42466,"code":54873,"language":42468,"meta":556,"style":556},"\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",[598,54875,54876,54882,54887,54892,54905,54918,54931,54944,54958,54972,54986,54990,55060],{"__ignoreMap":556},[617,54877,54878,54880],{"class":619,"line":557},[617,54879,623],{"class":622},[617,54881,51367],{"class":626},[617,54883,54884],{"class":619,"line":558},[617,54885,54886],{"class":630}," transform\n",[617,54888,54889],{"class":619,"line":688},[617,54890,54891],{"class":630}," center\n",[617,54893,54894,54897,54899,54901,54903],{"class":619,"line":709},[617,54895,54896],{"class":630}," :cast-shadow",[617,54898,637],{"class":622},[617,54900,640],{"class":622},[617,54902,941],{"class":643},[617,54904,3111],{"class":622},[617,54906,54907,54910,54912,54914,54916],{"class":619,"line":719},[617,54908,54909],{"class":630}," :receive-shadow",[617,54911,637],{"class":622},[617,54913,640],{"class":622},[617,54915,941],{"class":643},[617,54917,3111],{"class":622},[617,54919,54920,54923,54925,54927,54929],{"class":619,"line":725},[617,54921,54922],{"class":630}," occlude",[617,54924,637],{"class":622},[617,54926,640],{"class":622},[617,54928,46626],{"class":643},[617,54930,3111],{"class":622},[617,54932,54933,54936,54938,54940,54942],{"class":619,"line":735},[617,54934,54935],{"class":630}," :z-index-range",[617,54937,637],{"class":622},[617,54939,640],{"class":622},[617,54941,51005],{"class":643},[617,54943,3111],{"class":622},[617,54945,54946,54949,54951,54953,54956],{"class":619,"line":758},[617,54947,54948],{"class":630}," :position-y",[617,54950,637],{"class":622},[617,54952,640],{"class":622},[617,54954,54955],{"class":643},"2.5",[617,54957,3111],{"class":622},[617,54959,54960,54963,54965,54967,54970],{"class":619,"line":770},[617,54961,54962],{"class":630}," :portal",[617,54964,637],{"class":622},[617,54966,640],{"class":622},[617,54968,54969],{"class":643},"portalRef",[617,54971,3111],{"class":622},[617,54973,54974,54977,54979,54981,54984],{"class":619,"line":780},[617,54975,54976],{"class":630}," :style",[617,54978,637],{"class":622},[617,54980,640],{"class":622},[617,54982,54983],{"class":643},"{ userSelect: 'none' }",[617,54985,3111],{"class":622},[617,54987,54988],{"class":619,"line":785},[617,54989,649],{"class":622},[617,54991,54992,54994,54997,54999,55001,55003,55006,55008,55011,55013,55015,55018,55020,55023,55025,55027,55029,55031,55034,55036,55038,55041,55043,55046,55048,55050,55052,55054,55056,55058],{"class":619,"line":807},[617,54993,738],{"class":622},[617,54995,54996],{"class":626},"iframe",[617,54998,22720],{"class":630},[617,55000,637],{"class":622},[617,55002,640],{"class":622},[617,55004,55005],{"class":643},"w-[700px] h-[500px]",[617,55007,640],{"class":622},[617,55009,55010],{"class":630}," src",[617,55012,637],{"class":622},[617,55014,640],{"class":622},[617,55016,55017],{"class":643},"https://tresjs.org",[617,55019,640],{"class":622},[617,55021,55022],{"class":630}," frameborder",[617,55024,637],{"class":622},[617,55026,640],{"class":622},[617,55028,945],{"class":643},[617,55030,640],{"class":622},[617,55032,55033],{"class":630}," :width",[617,55035,637],{"class":622},[617,55037,640],{"class":622},[617,55039,55040],{"class":643},"700",[617,55042,640],{"class":622},[617,55044,55045],{"class":630}," :height",[617,55047,637],{"class":622},[617,55049,640],{"class":622},[617,55051,39934],{"class":643},[617,55053,640],{"class":622},[617,55055,22757],{"class":622},[617,55057,54996],{"class":626},[617,55059,649],{"class":622},[617,55061,55062,55064,55066],{"class":619,"line":611},[617,55063,712],{"class":622},[617,55065,42468],{"class":626},[617,55067,649],{"class":622},[55069,55070,55071],"info",{},[594,55072,55073,55074,55077,55078,55081,55082],{},"The demos use ",[598,55075,55076],{},":z-index-range=\"[28, 0]\""," simply to ensure the HTML elements stay below the documentation header (which uses ",[598,55079,55080],{},"z-index: 30",").\n",[1649,55083,55084],{},"This value is for the docs only — you can ignore it or adjust it as needed.",[484,55086,902],{"id":901},[907,55088,55089,55099],{},[910,55090,55091],{},[913,55092,55093,55095,55097],{},[916,55094,918],{},[916,55096,921],{},[916,55098,924],{},[926,55100,55101,55118,55133,55151,55175,55195,55212,55230,55242,55261,55284,55324,55362,55382,55415],{},[913,55102,55103,55107,55113],{},[931,55104,55105],{},[1649,55106,4717],{},[931,55108,55109,55110,1126],{},"Wrapping ",[1654,55111,55112],{},"HTML element",[931,55114,55115],{},[598,55116,55117],{},"'div'",[913,55119,55120,55125,55131],{},[931,55121,55122],{},[1649,55123,55124],{},"wrapperClass",[931,55126,2756,55127,55130],{},[598,55128,55129],{},"className"," of the wrapping element. element.",[931,55132],{},[913,55134,55135,55140,55147],{},[931,55136,55137],{},[1649,55138,55139],{},"prepend",[931,55141,55142,55143,55146],{},"Projects content ",[1654,55144,55145],{},"behind"," the canvas.",[931,55148,55149],{},[598,55150,951],{},[913,55152,55153,55157,55171],{},[931,55154,55155],{},[1649,55156,26243],{},[931,55158,1330,55159,8146,55162,55164,55165],{},[598,55160,55161],{},"transform: translate(-50%, -50%)",[7535,55163],{},"➡️ ",[1654,55166,55167,55168,55170],{},"Ignored in ",[1649,55169,10092],{}," mode.",[931,55172,55173],{},[598,55174,951],{},[913,55176,55177,55182,55191],{},[931,55178,55179],{},[1649,55180,55181],{},"fullscreen",[931,55183,55184,55185,55164,55187],{},"Aligns to the upper-left corner and fills the screen. ",[7535,55186],{},[1654,55188,55167,55189,55170],{},[1649,55190,10092],{},[931,55192,55193],{},[598,55194,951],{},[913,55196,55197,55202,55210],{},[931,55198,55199],{},[1649,55200,55201],{},"distanceFactor",[931,55203,55204,55205,55207,55208,1126],{},"Children are scaled by this factor and also by distance to a ",[598,55206,10880],{},", or zoom when using an ",[598,55209,50449],{},[931,55211],{},[913,55213,55214,55219,55225],{},[931,55215,55216],{},[1649,55217,55218],{},"zIndexRange",[931,55220,55221,55222,1126],{},"Defines the ",[1654,55223,55224],{},"Z-order range",[931,55226,55227],{},[598,55228,55229],{},"[16777271, 0]",[913,55231,55232,55237,55240],{},[931,55233,55234],{},[1649,55235,55236],{},"portal",[931,55238,55239],{},"Reference to a target container (for rendering into a different DOM node). container.",[931,55241],{},[913,55243,55244,55248,55257],{},[931,55245,55246],{},[1649,55247,10092],{},[931,55249,938,55250,55252,55253,55256],{},[598,55251,941],{},", applies ",[598,55254,55255],{},"matrix3d"," transformations — the element appears as if it is inside the 3D scene.",[931,55258,55259],{},[598,55260,951],{},[913,55262,55263,55268,55280],{},[931,55264,55265],{},[1649,55266,55267],{},"sprite",[931,55269,55270,55271,8146,55273,55164,55275],{},"Renders as a ",[1654,55272,55267],{},[7535,55274],{},[1654,55276,55277,55278,55170],{},"Only in ",[1649,55279,10092],{},[931,55281,55282],{},[598,55283,951],{},[913,55285,55286,55291,55315],{},[931,55287,55288],{},[1649,55289,55290],{},"calculatePosition",[931,55292,55293,55294,55296,3174,55299,3174,55302,55304,55305,55308,55309,55164,55311],{},"Callback function to override the default positioning logic. ",[7535,55295],{},[1649,55297,55298],{},"Type:",[598,55300,55301],{},"(object: Object3D, camera: Camera, size: { width: number; height: number }) => [number, number, number]",[7535,55303],{},"Receives the related 3D object, the active camera, and the current viewport size, and must return ",[598,55306,55307],{},"[x, y, z]"," pixel coordinates for placing the HTML element. ",[7535,55310],{},[1654,55312,55167,55313,55170],{},[1649,55314,10092],{},[931,55316,55317],{},[1120,55318,55321,55322],{"href":55319,"rel":55320},"https://github.com/Tresjs/cientos/blob/main/src/core/misc/html/utils.ts#L9-L19",[1124],"Default ",[598,55323,55290],{},[913,55325,55326,55330,55360],{},[931,55327,55328],{},[1649,55329,50879],{},[931,55331,55332,55333,55335,55336,55338,55339,55342,55343,55345,55346,55349,55350,55335,55352,55355,55356,55359],{},"Enables occlusion. Possible values: ",[7535,55334],{},"- ",[598,55337,941],{}," → Occlusion against ",[1654,55340,55341],{},"all"," scene objects ",[7535,55344],{}," - ",[598,55347,55348],{},"Ref\u003CTresObject3D>[]"," → Occlusion is enabled only against the specified objects. ",[7535,55351],{},[598,55353,55354],{},"'blending'"," → Uses a ",[1654,55357,55358],{},"blending-based"," occlusion method (CSS-like depth blending).",[931,55361],{},[913,55363,55364,55368,55374],{},[931,55365,55366],{},[1649,55367,5236],{},[931,55369,55370,55371,55373],{},"Custom ",[598,55372,5236],{}," to be used.",[931,55375,55376],{},[1120,55377,55380],{"href":55378,"rel":55379},"https://threejs.org/docs/?q=geometry#api/en/geometries/PlaneGeometry",[1124],[598,55381,30637],{},[913,55383,55384,55388,55413],{},[931,55385,55386],{},[1649,55387,5180],{},[931,55389,55390,3174,55396,3174,55398,55404,55405,3174,55407],{},[1649,55391,55392,55393,55395],{},"Custom shader ",[1654,55394,5180],{}," used for the occlusion mesh.",[7535,55397],{},[1649,55399,55400,55401,55403],{},"Only applies when ",[598,55402,53188],{}," is enabled"," (an occlusion mesh is created). ",[7535,55406],{},[1654,55408,55409,55410,55412],{},"Ignored in raycast occlusion modes (",[598,55411,941],{},", object refs).",[931,55414],{},[913,55416,55417,55422,55443],{},[931,55418,55419],{},[1649,55420,55421],{},"transparentMaterial",[931,55423,55424,3174,55430,3174,55432,3174,55437,3174,55439],{},[1649,55425,55426,55427,55429],{},"Enables ",[1654,55428,9672],{}," rendering for the occlusion material.",[7535,55431],{},[1649,55433,55400,55434,55436],{},[598,55435,53188],{}," creates an occlusion mesh.",[7535,55438],{},[1654,55440,55409,55441,55412],{},[598,55442,941],{},[931,55444,55445],{},[598,55446,951],{},[484,55448,12330],{"id":12329},[907,55450,55451,55459],{},[910,55452,55453],{},[913,55454,55455,55457],{},[916,55456,5739],{},[916,55458,921],{},[926,55460,55461],{},[913,55462,55463,55466],{},[931,55464,55465],{},"onOcclude",[931,55467,55468],{},"Called when the occlusion state changes.",[484,55470,55472],{"id":55471},"exposed-properties","Exposed properties",[907,55474,55475,55485],{},[910,55476,55477],{},[913,55478,55479,55481,55483],{},[916,55480,5946],{},[916,55482,5949],{},[916,55484,921],{},[926,55486,55487,55508,55529],{},[913,55488,55489,55493,55498],{},[931,55490,55491],{},[1649,55492,24395],{},[931,55494,55495],{},[598,55496,55497],{},"Ref\u003CTresObject3D | null>",[931,55499,55500,55501,55505,55506,1126],{},"Reference to the root ",[1649,55502,55503],{},[598,55504,5601],{}," used by ",[598,55507,50453],{},[913,55509,55510,55515,55520],{},[931,55511,55512],{},[1649,55513,55514],{},"isVisible",[931,55516,55517],{},[598,55518,55519],{},"Ref\u003Cboolean>",[931,55521,55522,55523,5591,55526,1126],{},"Reactive value that indicates whether the HTML content is ",[1649,55524,55525],{},"currently visible",[1649,55527,55528],{},"occluded",[913,55530,55531,55536,55540],{},[931,55532,55533],{},[1649,55534,55535],{},"occlusionMesh",[931,55537,55538],{},[598,55539,55497],{},[931,55541,55542,55543,55546,55547,5863,55549,55551],{},"Reference to the ",[1649,55544,55545],{},"occlusion mesh"," created when ",[598,55548,53188],{},[1649,55550,14632],{},". Used internally for geometry-based occlusion.",[484,55553,6239],{"id":6238},[2193,55555,55556,55589,55606,55661,55679],{},[2196,55557,55558,55559,55564,55565,55567,55568,5591,55571,55574,55575,55577,55578,55581,55582,55585,55586,55588],{},"✨ When using ",[1649,55560,55561],{},[598,55562,55563],{},"\u003CHtml occlude>",", if the ",[598,55566,50453],{}," component is ",[1649,55569,55570],{},"overlapping",[1649,55572,55573],{},"inside a 3D object",", it will be considered ",[1649,55576,55528],{}," and therefore ",[1649,55579,55580],{},"hidden",". To avoid this, ",[1649,55583,55584],{},"adjust the position"," of the ",[598,55587,50453],{}," component in your scene.",[2196,55590,55591,55592,55597,55598,55601,55602,55605],{},"🎨 When using ",[1649,55593,55594],{},[598,55595,55596],{},"\u003CHtml occlude=\"blending\">",", the HTML content is no longer ",[1649,55599,55600],{},"selectable"," because it is rendered ",[1649,55603,55604],{},"behind the canvas",". This is required to achieve the blending effect.",[2196,55607,55608,55609,55611,55612,55614,55615],{},"⚙️ When using a ",[1649,55610,53283],{}," with occlusion in ",[598,55613,46626],{}," mode, there are a few important requirements to ensure the HTML content renders correctly ⬇️",[5287,55616,5289,55617,55620],{},[5291,55618,55619],{},"See more information",[12192,55621,55622,55633,55641,55648],{},[2196,55623,55624,55625,3054,55627,55629,55630,1126],{},"If you provide your own material, it must be ",[1649,55626,9672],{},[598,55628,3042],{},") with an ",[1649,55631,55632],{},"opacity \u003C 1",[2196,55634,55635,55636,55640],{},"If you are not providing a custom material, enable ",[1649,55637,55638],{},[598,55639,55421],{}," so the internal shader becomes transparent.",[2196,55642,55643,55644,55647],{},"The occlusion mesh requires a ",[1649,55645,55646],{},"fully transparent canvas background","; otherwise, thin borders or halo artifacts may appear.",[2196,55649,55650,55651,14421,55654,1652,55656,55658,55659,1126],{},"To compensate for the transparent canvas, you may ",[1649,55652,55653],{},"reapply your previous clear-color as a CSS background",[598,55655,42468],{},[598,55657,4817],{},", or a wrapper ",[598,55660,4099],{},[2196,55662,55663,55664,55668,55669,55671,55672,55674,55675,55678],{},"🔶 When using ",[1649,55665,55666],{},[598,55667,55421],{},", overlapping ",[598,55670,50453],{}," elements (especially multiple ",[598,55673,53188],{}," instances) may cause ",[1649,55676,55677],{},"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.",[2196,55680,55681,55682,55684,55685,55687,55688],{},"🔵 To avoid thin border artifacts when using ",[598,55683,53188],{},", make sure your ",[598,55686,3177],{}," is fully transparent:",[606,55689,55691],{"className":608,"code":55690,"language":613,"meta":556,"style":556},"\u003CTresCanvas :alpha=\"true\" :clearAlpha=\"0\" />\n",[598,55692,55693],{"__ignoreMap":556},[617,55694,55695,55697,55699,55701,55703,55705,55707,55709,55711,55713,55716,55718,55720,55722,55724],{"class":619,"line":557},[617,55696,623],{"class":622},[617,55698,741],{"class":626},[617,55700,3009],{"class":622},[617,55702,43151],{"class":630},[617,55704,637],{"class":622},[617,55706,640],{"class":622},[617,55708,941],{"class":4377},[617,55710,640],{"class":622},[617,55712,3009],{"class":622},[617,55714,55715],{"class":630},"clearAlpha",[617,55717,637],{"class":622},[617,55719,640],{"class":622},[617,55721,945],{"class":2481},[617,55723,640],{"class":622},[617,55725,767],{"class":622},[907,55727,55728,55738],{},[910,55729,55730],{},[913,55731,55732,55734,55736],{},[916,55733,918],{},[916,55735,921],{},[916,55737,924],{},[926,55739,55740,55753,55764,55777,55793,55808,55819,55832,55843,55856,55869,55882,55903,55918],{},[913,55741,55742,55746,55749],{},[931,55743,55744],{},[1649,55745,4717],{},[931,55747,55748],{},"Wrapping html element.",[931,55750,55751],{},[598,55752,55117],{},[913,55754,55755,55759,55762],{},[931,55756,55757],{},[1649,55758,55124],{},[931,55760,55761],{},"The className of the wrapping element.",[931,55763],{},[913,55765,55766,55770,55773],{},[931,55767,55768],{},[1649,55769,55139],{},[931,55771,55772],{},"Project content behind the canvas.",[931,55774,55775],{},[598,55776,951],{},[913,55778,55779,55783,55789],{},[931,55780,55781],{},[1649,55782,26243],{},[931,55784,55785,55786],{},"Adds a -50%/-50% CSS transform. ",[617,55787,55788],{},"Ignored in transform mode",[931,55790,55791],{},[598,55792,951],{},[913,55794,55795,55799,55804],{},[931,55796,55797],{},[1649,55798,55181],{},[931,55800,55801,55802],{},"Aligns to the upper-left corner, fills the screen. ",[617,55803,55788],{},[931,55805,55806],{},[598,55807,951],{},[913,55809,55810,55814,55817],{},[931,55811,55812],{},[1649,55813,55201],{},[931,55815,55816],{},"Children will be scaled by this factor, and also by distance to a PerspectiveCamera / zoom by an OrthographicCamera.",[931,55818],{},[913,55820,55821,55825,55828],{},[931,55822,55823],{},[1649,55824,55218],{},[931,55826,55827],{},"Z-order range.",[931,55829,55830],{},[598,55831,55229],{},[913,55833,55834,55838,55841],{},[931,55835,55836],{},[1649,55837,55236],{},[931,55839,55840],{},"Reference to target container.",[931,55842],{},[913,55844,55845,55849,55852],{},[931,55846,55847],{},[1649,55848,10092],{},[931,55850,55851],{},"If true, applies matrix3d transformations.",[931,55853,55854],{},[598,55855,951],{},[913,55857,55858,55862,55865],{},[931,55859,55860],{},[1649,55861,55267],{},[931,55863,55864],{},"Renders as sprite, but only in transform mode.",[931,55866,55867],{},[598,55868,951],{},[913,55870,55871,55875,55880],{},[931,55872,55873],{},[1649,55874,55290],{},[931,55876,55877,55878],{},"Override default positioning function. ",[617,55879,55788],{},[931,55881],{},[913,55883,55884,55888,55901],{},[931,55885,55886],{},[1649,55887,50879],{},[931,55889,55890,55891,1652,55893,1652,55895,1682,55898,55900],{},"Can be ",[598,55892,941],{},[598,55894,55348],{},[598,55896,55897],{},"'raycast'",[598,55899,55354],{},". True occludes the entire scene.",[931,55902],{},[913,55904,55905,55909,55914],{},[931,55906,55907],{},[1649,55908,5236],{},[931,55910,55370,55911,55913],{},[598,55912,5236],{}," to be use",[931,55915,55916],{},[598,55917,30637],{},[913,55919,55920,55924,55928],{},[931,55921,55922],{},[1649,55923,5180],{},[931,55925,55392,55926,55913],{},[598,55927,5180],{},[931,55929],{},[484,55931,12330],{"id":55932},"events-1",[907,55934,55935,55943],{},[910,55936,55937],{},[913,55938,55939,55941],{},[916,55940,5739],{},[916,55942,921],{},[926,55944,55945],{},[913,55946,55947,55949],{},[931,55948,55465],{},[931,55950,55468],{},[1307,55952,55953],{},"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 .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":556,"searchDepth":557,"depth":558,"links":55955},[55956,55957,55962,55965,55970,55971,55972,55973,55974],{"id":604,"depth":558,"text":15},{"id":50872,"depth":558,"text":50873,"children":55958},[55959,55960,55961],{"id":51061,"depth":688,"text":51062},{"id":51223,"depth":688,"text":51224},{"id":51484,"depth":688,"text":51485},{"id":42804,"depth":558,"text":42805,"children":55963},[55964],{"id":2965,"depth":688,"text":53269},{"id":53333,"depth":558,"text":55966,"children":55967},"Using \u003CTransition>",[55968],{"id":54852,"depth":688,"text":55969},"Using iframes",{"id":901,"depth":558,"text":902},{"id":12329,"depth":558,"text":12330},{"id":55471,"depth":558,"text":55472},{"id":6238,"depth":558,"text":6239},{"id":55932,"depth":558,"text":12330},"Allows you put DOM elements in your Tres.js scene.",{},{"title":421,"description":55975},"sCicSGhX9NlQz2qQXKQDRsp2N33eyO-s6DiY6dGH98s",{"id":55980,"title":425,"body":55981,"description":56577,"extension":571,"links":572,"meta":56578,"navigation":574,"path":426,"seo":56579,"stem":427,"__hash__":56580},"docs/2.api/9.objects/image.md",{"type":481,"value":55982,"toc":56572},[55983,55988,55994,55996,56167,56169,56176,56384,56386,56409,56570],[588,55984,55985],{},[55986,55987],"objects-image",{},[594,55989,55990,55993],{},[598,55991,55992],{},"\u003CImage />"," is a shader-based component that optionally loads then displays an image texture on a default plane or on your custom geometry.",[484,55995,15],{"id":604},[606,55997,56000],{"className":608,"code":55998,"highlights":55999,"language":613,"meta":556,"style":556},"\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",[688,780,785,807],[598,56001,56002,56022,56040,56060,56068,56072,56080,56088,56106,56110,56118,56133,56147,56151,56159],{"__ignoreMap":556},[617,56003,56004,56006,56008,56010,56012,56014,56016,56018,56020],{"class":619,"line":557},[617,56005,623],{"class":622},[617,56007,627],{"class":626},[617,56009,631],{"class":630},[617,56011,634],{"class":630},[617,56013,637],{"class":622},[617,56015,640],{"class":622},[617,56017,644],{"class":643},[617,56019,640],{"class":622},[617,56021,649],{"class":622},[617,56023,56024,56026,56028,56030,56032,56034,56036,56038],{"class":619,"line":558},[617,56025,657],{"class":656},[617,56027,660],{"class":622},[617,56029,695],{"class":663},[617,56031,673],{"class":622},[617,56033,676],{"class":656},[617,56035,679],{"class":622},[617,56037,704],{"class":643},[617,56039,685],{"class":622},[617,56041,56043,56045,56047,56050,56052,56054,56056,56058],{"class":56042,"line":688},[619,653],[617,56044,657],{"class":656},[617,56046,660],{"class":622},[617,56048,56049],{"class":663}," Image",[617,56051,673],{"class":622},[617,56053,676],{"class":656},[617,56055,679],{"class":622},[617,56057,682],{"class":643},[617,56059,685],{"class":622},[617,56061,56062,56064,56066],{"class":619,"line":709},[617,56063,712],{"class":622},[617,56065,627],{"class":626},[617,56067,649],{"class":622},[617,56069,56070],{"class":619,"line":719},[617,56071,722],{"emptyLinePlaceholder":574},[617,56073,56074,56076,56078],{"class":619,"line":725},[617,56075,623],{"class":622},[617,56077,730],{"class":626},[617,56079,649],{"class":622},[617,56081,56082,56084,56086],{"class":619,"line":735},[617,56083,738],{"class":622},[617,56085,741],{"class":626},[617,56087,649],{"class":622},[617,56089,56090,56092,56094,56096,56098,56100,56102,56104],{"class":619,"line":758},[617,56091,761],{"class":622},[617,56093,764],{"class":626},[617,56095,1465],{"class":630},[617,56097,637],{"class":622},[617,56099,640],{"class":622},[617,56101,8366],{"class":643},[617,56103,640],{"class":622},[617,56105,767],{"class":622},[617,56107,56108],{"class":619,"line":770},[617,56109,722],{"emptyLinePlaceholder":574},[617,56111,56113,56115],{"class":56112,"line":780},[619,653],[617,56114,761],{"class":622},[617,56116,56117],{"class":626},"Image\n",[617,56119,56121,56124,56126,56128,56131],{"class":56120,"line":785},[619,653],[617,56122,56123],{"class":630}," url",[617,56125,637],{"class":622},[617,56127,640],{"class":622},[617,56129,56130],{"class":643},"https://upload.wikimedia.org/wikipedia/commons/f/f0/Cyanistes_caeruleus_Oulu_20150516.JPG",[617,56132,3111],{"class":622},[617,56134,56136,56139,56141,56143,56145],{"class":56135,"line":807},[619,653],[617,56137,56138],{"class":630}," :scale",[617,56140,637],{"class":622},[617,56142,640],{"class":622},[617,56144,50195],{"class":643},[617,56146,3111],{"class":622},[617,56148,56149],{"class":619,"line":611},[617,56150,15248],{"class":622},[617,56152,56153,56155,56157],{"class":619,"line":830},[617,56154,885],{"class":622},[617,56156,741],{"class":626},[617,56158,649],{"class":622},[617,56160,56161,56163,56165],{"class":619,"line":841},[617,56162,712],{"class":622},[617,56164,730],{"class":626},[617,56166,649],{"class":622},[484,56168,902],{"id":901},[3179,56170,56171],{},[594,56172,56173,56175],{},[598,56174,55992],{}," is a THREE.Mesh and most Mesh attributes can be used as props on the component.",[907,56177,56178,56188],{},[910,56179,56180],{},[913,56181,56182,56184,56186],{},[916,56183,918],{"align":977},[916,56185,921],{"align":977},[916,56187,924],{},[926,56189,56190,56203,56219,56232,56246,56262,56276,56294,56312,56327,56343,56361,56372],{},[913,56191,56192,56196,56199],{},[931,56193,56194],{"align":977},[598,56195,27797],{},[931,56197,56198],{"align":977},"Number of divisions in the default geometry.",[931,56200,56201],{},[598,56202,1854],{},[913,56204,56205,56209,56215],{},[931,56206,56207],{"align":977},[598,56208,5610],{},[931,56210,56211,56212],{"align":977},"Scale of the geometry. ",[598,56213,56214],{},"number | [number, number]",[931,56216,56217],{},[598,56218,1854],{},[913,56220,56221,56225,56228],{},[931,56222,56223],{"align":977},[598,56224,7527],{},[931,56226,56227],{"align":977},"Color multiplied into the image texture.",[931,56229,56230],{},[598,56231,27880],{},[913,56233,56234,56239,56242],{},[931,56235,56236],{"align":977},[598,56237,56238],{},"zoom",[931,56240,56241],{"align":977},"Shrinks or enlarges the image texture.",[931,56243,56244],{},[598,56245,1854],{},[913,56247,56248,56252,56258],{},[931,56249,56250],{"align":977},[598,56251,39818],{},[931,56253,56254,56255,56257],{"align":977},"Border radius applied to the image texture. (Intended for rectangular geometries. Use with ",[598,56256,9672],{},".)",[931,56259,56260],{},[598,56261,945],{},[913,56263,56264,56269,56272],{},[931,56265,56266],{"align":977},[598,56267,56268],{},"grayscale",[931,56270,56271],{"align":977},"Power of grayscale effect. 0 is off. 1 is full grayscale.",[931,56273,56274],{},[598,56275,945],{},[913,56277,56278,56282,56290],{},[931,56279,56280],{"align":977},[598,56281,36349],{},[931,56283,56284,56285],{"align":977},"Whether this material is tone mapped according to the renderers toneMapping settings. ",[1120,56286,56289],{"href":56287,"rel":56288},"https://threejs.org/docs/?q=material#api/en/materials/Material.toneMapped",[1124],"See THREE.material.tonemapped",[931,56291,56292],{},[598,56293,945],{},[913,56295,56296,56300,56308],{},[931,56297,56298],{"align":977},[598,56299,9672],{},[931,56301,56302,56303],{"align":977},"Whether the image material should be transparent. ",[1120,56304,56307],{"href":56305,"rel":56306},"https://threejs.org/docs/?q=material#api/en/materials/Material.transparent",[1124],"See THREE.material.transparent",[931,56309,56310],{},[598,56311,951],{},[913,56313,56314,56318,56323],{},[931,56315,56316],{"align":977},[598,56317,9672],{},[931,56319,56302,56320],{"align":977},[1120,56321,56307],{"href":56305,"rel":56322},[1124],[931,56324,56325],{},[598,56326,951],{},[913,56328,56329,56333,56339],{},[931,56330,56331],{"align":977},[598,56332,9660],{},[931,56334,56335,56336],{"align":977},"Opacity of the image material. ",[1120,56337,56307],{"href":56305,"rel":56338},[1124],[931,56340,56341],{},[598,56342,1854],{},[913,56344,56345,56349,56357],{},[931,56346,56347],{"align":977},[598,56348,25010],{},[931,56350,56351,56352],{"align":977},"THREE.Side of the image material. ",[1120,56353,56356],{"href":56354,"rel":56355},"https://threejs.org/docs/?q=material#api/en/materials/Material.side",[1124],"See THREE.material.side",[931,56358,56359],{},[598,56360,25023],{},[913,56362,56363,56367,56370],{},[931,56364,56365],{"align":977},[598,56366,2697],{},[931,56368,56369],{"align":977},"Image texture to display on the geometry.",[931,56371],{},[913,56373,56374,56379,56382],{},[931,56375,56376],{"align":977},[598,56377,56378],{},"url",[931,56380,56381],{"align":977},"Image URL to load and display on the geometry.",[931,56383],{},[484,56385,6239],{"id":6238},[594,56387,56388,56389,56391,56392,56395,56396,56398,56399,56402,56403,5591,56406,5554],{},"By default, images loaded via the ",[598,56390,56378],{}," prop use the renderer’s output color space. For advanced control, pass a ",[598,56393,56394],{},"THREE.Texture"," via the ",[598,56397,2697],{}," prop and set its ",[598,56400,56401],{},"colorSpace"," (e.g., ",[598,56404,56405],{},"THREE.SRGBColorSpace",[598,56407,56408],{},"THREE.LinearSRGBColorSpace",[606,56410,56412],{"className":608,"code":56411,"language":613,"meta":556,"style":556},"\u003Cscript setup>\nimport { useTexture } from '@tresjs/cientos'\nimport { SRGBColorSpace } from 'three'\n\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",[598,56413,56414,56424,56442,56460,56464,56482,56501,56517,56523,56531,56535,56543,56562],{"__ignoreMap":556},[617,56415,56416,56418,56420,56422],{"class":619,"line":557},[617,56417,623],{"class":622},[617,56419,627],{"class":626},[617,56421,631],{"class":630},[617,56423,649],{"class":622},[617,56425,56426,56428,56430,56432,56434,56436,56438,56440],{"class":619,"line":558},[617,56427,657],{"class":656},[617,56429,660],{"class":622},[617,56431,2339],{"class":663},[617,56433,673],{"class":622},[617,56435,676],{"class":656},[617,56437,679],{"class":622},[617,56439,682],{"class":643},[617,56441,685],{"class":622},[617,56443,56444,56446,56448,56450,56452,56454,56456,56458],{"class":619,"line":688},[617,56445,657],{"class":656},[617,56447,660],{"class":622},[617,56449,41522],{"class":663},[617,56451,673],{"class":622},[617,56453,676],{"class":656},[617,56455,679],{"class":622},[617,56457,4606],{"class":643},[617,56459,685],{"class":622},[617,56461,56462],{"class":619,"line":709},[617,56463,722],{"emptyLinePlaceholder":574},[617,56465,56466,56468,56470,56473,56475,56477,56479],{"class":619,"line":719},[617,56467,2395],{"class":630},[617,56469,660],{"class":622},[617,56471,56472],{"class":663}," state ",[617,56474,2408],{"class":622},[617,56476,2411],{"class":622},[617,56478,2339],{"class":2414},[617,56480,56481],{"class":663},"(URL)\n",[617,56483,56484,56486,56489,56491,56493,56495,56497,56499],{"class":619,"line":725},[617,56485,10239],{"class":2414},[617,56487,56488],{"class":663},"(state",[617,56490,667],{"class":622},[617,56492,3054],{"class":622},[617,56494,2697],{"class":6818},[617,56496,3320],{"class":622},[617,56498,3657],{"class":630},[617,56500,1184],{"class":622},[617,56502,56503,56506,56508,56510,56512,56514],{"class":619,"line":735},[617,56504,56505],{"class":663}," texture",[617,56507,1126],{"class":622},[617,56509,56401],{"class":663},[617,56511,2411],{"class":622},[617,56513,41522],{"class":663},[617,56515,56516],{"class":1189}," // assign a custom color space\n",[617,56518,56519,56521],{"class":619,"line":758},[617,56520,2408],{"class":622},[617,56522,2428],{"class":663},[617,56524,56525,56527,56529],{"class":619,"line":770},[617,56526,712],{"class":622},[617,56528,627],{"class":626},[617,56530,649],{"class":622},[617,56532,56533],{"class":619,"line":780},[617,56534,722],{"emptyLinePlaceholder":574},[617,56536,56537,56539,56541],{"class":619,"line":785},[617,56538,623],{"class":622},[617,56540,730],{"class":626},[617,56542,649],{"class":622},[617,56544,56545,56547,56549,56552,56554,56556,56558,56560],{"class":619,"line":807},[617,56546,738],{"class":622},[617,56548,425],{"class":626},[617,56550,56551],{"class":630}," :texture",[617,56553,637],{"class":622},[617,56555,640],{"class":622},[617,56557,2697],{"class":643},[617,56559,640],{"class":622},[617,56561,767],{"class":622},[617,56563,56564,56566,56568],{"class":619,"line":611},[617,56565,712],{"class":622},[617,56567,730],{"class":626},[617,56569,649],{"class":622},[1307,56571,24579],{},{"title":556,"searchDepth":557,"depth":558,"links":56573},[56574,56575,56576],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},{"id":6238,"depth":558,"text":6239},"Display image textures with shader-based effects.",{},{"title":425,"description":56577},"X-ToNyUMXQZlkTHUsm9OM76zK6fPjZKmSgrWtCQht4g",{"id":56582,"title":429,"body":56583,"description":57367,"extension":571,"links":572,"meta":57368,"navigation":574,"path":430,"seo":57369,"stem":431,"__hash__":57370},"docs/2.api/9.objects/marching-cubes.md",{"type":481,"value":56584,"toc":57361},[56585,56590,56601,56604,56629,56631,57173,57175,57246,57250,57295,57299,57358],[588,56586,56587],{},[56588,56589],"objects-marching-cubes",{},[594,56591,56592,56595,56596,1126],{},[598,56593,56594],{},"\u003CMarchingCubes />"," is a wrapper around ",[1120,56597,56600],{"href":56598,"rel":56599},"https://threejs.org/examples/#webgl_marchingcubes",[1124],"THREE's Marching Cubes",[594,56602,56603],{},"It includes 3 components:",[2193,56605,56606,56619,56624],{},[2196,56607,56608,56610,56611,56614,56615,56618],{},[598,56609,56594],{}," – container element for ",[598,56612,56613],{},"\u003CMarchingCube />","s and ",[598,56616,56617],{},"\u003CMarchingPlane />","s",[2196,56620,56621,56623],{},[598,56622,56613],{}," - an individual metaball",[2196,56625,56626,56628],{},[598,56627,56617],{}," – optional bounding plane that interacts with the metaballs",[484,56630,15],{"id":604},[606,56632,56635],{"className":608,"code":56633,"highlights":56634,"language":613,"meta":556,"style":556},"\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",[558,841,852,862,612,882,892,2605,2614,2634],[598,56636,56637,56657,56691,56709,56732,56736,56769,56828,56836,56840,56848,56878,56886,56894,56898,56929,56950,56958,56972,56985,56998,57003,57057,57066,57070,57078,57118,57157,57165],{"__ignoreMap":556},[617,56638,56639,56641,56643,56645,56647,56649,56651,56653,56655],{"class":619,"line":557},[617,56640,623],{"class":622},[617,56642,627],{"class":626},[617,56644,631],{"class":630},[617,56646,634],{"class":630},[617,56648,637],{"class":622},[617,56650,640],{"class":622},[617,56652,644],{"class":643},[617,56654,640],{"class":622},[617,56656,649],{"class":622},[617,56658,56660,56662,56664,56667,56669,56672,56674,56677,56679,56681,56683,56685,56687,56689],{"class":56659,"line":558},[619,653],[617,56661,657],{"class":656},[617,56663,660],{"class":622},[617,56665,56666],{"class":663}," MarchingCube",[617,56668,667],{"class":622},[617,56670,56671],{"class":663}," MarchingCubes",[617,56673,667],{"class":622},[617,56675,56676],{"class":663}," MarchingPlane",[617,56678,667],{"class":622},[617,56680,670],{"class":663},[617,56682,673],{"class":622},[617,56684,676],{"class":656},[617,56686,679],{"class":622},[617,56688,682],{"class":643},[617,56690,685],{"class":622},[617,56692,56693,56695,56697,56699,56701,56703,56705,56707],{"class":619,"line":688},[617,56694,657],{"class":656},[617,56696,660],{"class":622},[617,56698,695],{"class":663},[617,56700,673],{"class":622},[617,56702,676],{"class":656},[617,56704,679],{"class":622},[617,56706,704],{"class":643},[617,56708,685],{"class":622},[617,56710,56711,56713,56715,56718,56720,56722,56724,56726,56728,56730],{"class":619,"line":709},[617,56712,657],{"class":656},[617,56714,660],{"class":622},[617,56716,56717],{"class":663}," NoToneMapping",[617,56719,667],{"class":622},[617,56721,27610],{"class":663},[617,56723,673],{"class":622},[617,56725,676],{"class":656},[617,56727,679],{"class":622},[617,56729,4606],{"class":643},[617,56731,685],{"class":622},[617,56733,56734],{"class":619,"line":719},[617,56735,722],{"emptyLinePlaceholder":574},[617,56737,56738,56740,56743,56745,56747,56749,56752,56754,56756,56758,56760,56762,56764,56766],{"class":619,"line":725},[617,56739,2395],{"class":630},[617,56741,56742],{"class":663}," rand ",[617,56744,637],{"class":622},[617,56746,7060],{"class":622},[617,56748,3657],{"class":630},[617,56750,56751],{"class":663}," (Math",[617,56753,1126],{"class":622},[617,56755,53919],{"class":2414},[617,56757,6964],{"class":663},[617,56759,32589],{"class":622},[617,56761,2491],{"class":2481},[617,56763,4714],{"class":663},[617,56765,20734],{"class":622},[617,56767,56768],{"class":2481}," 1.25\n",[617,56770,56771,56773,56776,56778,56781,56783,56785,56787,56789,56792,56794,56797,56799,56801,56803,56805,56807,56809,56812,56814,56816,56819,56821,56823,56825],{"class":619,"line":735},[617,56772,2395],{"class":630},[617,56774,56775],{"class":663}," positions ",[617,56777,637],{"class":622},[617,56779,56780],{"class":663}," Array",[617,56782,1126],{"class":622},[617,56784,15128],{"class":2414},[617,56786,2417],{"class":663},[617,56788,38436],{"class":622},[617,56790,56791],{"class":626}," length",[617,56793,1198],{"class":622},[617,56795,56796],{"class":2481}," 40",[617,56798,38449],{"class":622},[617,56800,7060],{"class":622},[617,56802,3657],{"class":630},[617,56804,7853],{"class":622},[617,56806,27610],{"class":2414},[617,56808,2417],{"class":663},[617,56810,56811],{"class":2414},"rand",[617,56813,3654],{"class":663},[617,56815,667],{"class":622},[617,56817,56818],{"class":2414}," rand",[617,56820,3654],{"class":663},[617,56822,667],{"class":622},[617,56824,56818],{"class":2414},[617,56826,56827],{"class":663},"()))\n",[617,56829,56830,56832,56834],{"class":619,"line":758},[617,56831,712],{"class":622},[617,56833,627],{"class":626},[617,56835,649],{"class":622},[617,56837,56838],{"class":619,"line":770},[617,56839,722],{"emptyLinePlaceholder":574},[617,56841,56842,56844,56846],{"class":619,"line":780},[617,56843,623],{"class":622},[617,56845,730],{"class":626},[617,56847,649],{"class":622},[617,56849,56850,56852,56854,56856,56858,56860,56862,56864,56867,56869,56871,56874,56876],{"class":619,"line":785},[617,56851,738],{"class":622},[617,56853,741],{"class":626},[617,56855,744],{"class":630},[617,56857,637],{"class":622},[617,56859,640],{"class":622},[617,56861,751],{"class":643},[617,56863,640],{"class":622},[617,56865,56866],{"class":630}," :tone-mapping",[617,56868,637],{"class":622},[617,56870,640],{"class":622},[617,56872,56873],{"class":643},"NoToneMapping",[617,56875,640],{"class":622},[617,56877,649],{"class":622},[617,56879,56880,56882,56884],{"class":619,"line":807},[617,56881,761],{"class":622},[617,56883,764],{"class":626},[617,56885,767],{"class":622},[617,56887,56888,56890,56892],{"class":619,"line":611},[617,56889,761],{"class":622},[617,56891,775],{"class":626},[617,56893,767],{"class":622},[617,56895,56896],{"class":619,"line":830},[617,56897,722],{"emptyLinePlaceholder":574},[617,56899,56901,56903,56905,56907,56909,56911,56913,56915,56918,56920,56922,56925,56927],{"class":56900,"line":841},[619,653],[617,56902,761],{"class":622},[617,56904,429],{"class":626},[617,56906,48711],{"class":630},[617,56908,637],{"class":622},[617,56910,640],{"class":622},[617,56912,35274],{"class":643},[617,56914,640],{"class":622},[617,56916,56917],{"class":630}," :max-poly-count",[617,56919,637],{"class":622},[617,56921,640],{"class":622},[617,56923,56924],{"class":643},"40000",[617,56926,640],{"class":622},[617,56928,649],{"class":622},[617,56930,56932,56934,56937,56940,56942,56944,56946,56948],{"class":56931,"line":852},[619,653],[617,56933,833],{"class":622},[617,56935,56936],{"class":626},"MarchingPlane",[617,56938,56939],{"class":630}," plane-type",[617,56941,637],{"class":622},[617,56943,640],{"class":622},[617,56945,36594],{"class":643},[617,56947,640],{"class":622},[617,56949,767],{"class":622},[617,56951,56953,56955],{"class":56952,"line":862},[619,653],[617,56954,833],{"class":622},[617,56956,56957],{"class":626},"MarchingCube\n",[617,56959,56961,56963,56965,56967,56970],{"class":56960,"line":612},[619,653],[617,56962,7957],{"class":630},[617,56964,637],{"class":622},[617,56966,640],{"class":622},[617,56968,56969],{"class":643},"position, i of positions",[617,56971,3111],{"class":622},[617,56973,56975,56977,56979,56981,56983],{"class":56974,"line":882},[619,653],[617,56976,7971],{"class":630},[617,56978,637],{"class":622},[617,56980,640],{"class":622},[617,56982,22743],{"class":643},[617,56984,3111],{"class":622},[617,56986,56988,56990,56992,56994,56996],{"class":56987,"line":892},[619,653],[617,56989,7985],{"class":630},[617,56991,637],{"class":622},[617,56993,640],{"class":622},[617,56995,4110],{"class":643},[617,56997,3111],{"class":622},[617,56999,57001],{"class":57000,"line":2605},[619,653],[617,57002,8013],{"class":622},[617,57004,57006,57008,57010,57013,57015,57017,57020,57022,57025,57027,57029,57031,57033,57035,57037,57039,57042,57044,57047,57049,57051,57053,57055],{"class":57005,"line":2614},[619,653],[617,57007,833],{"class":622},[617,57009,9475],{"class":626},[617,57011,57012],{"class":630}," specular",[617,57014,637],{"class":622},[617,57016,640],{"class":622},[617,57018,57019],{"class":643},"#111111",[617,57021,640],{"class":622},[617,57023,57024],{"class":630}," :shininess",[617,57026,637],{"class":622},[617,57028,640],{"class":622},[617,57030,25435],{"class":643},[617,57032,640],{"class":622},[617,57034,2669],{"class":630},[617,57036,637],{"class":622},[617,57038,640],{"class":622},[617,57040,57041],{"class":643},"#049ef4",[617,57043,640],{"class":622},[617,57045,57046],{"class":630}," :reflectivity",[617,57048,637],{"class":622},[617,57050,640],{"class":622},[617,57052,1854],{"class":643},[617,57054,640],{"class":622},[617,57056,767],{"class":622},[617,57058,57060,57062,57064],{"class":57059,"line":2634},[619,653],[617,57061,875],{"class":622},[617,57063,429],{"class":626},[617,57065,649],{"class":622},[617,57067,57068],{"class":619,"line":2643},[617,57069,722],{"emptyLinePlaceholder":574},[617,57071,57072,57074,57076],{"class":619,"line":2652},[617,57073,761],{"class":622},[617,57075,790],{"class":626},[617,57077,767],{"class":622},[617,57079,57080,57082,57084,57086,57088,57090,57093,57095,57097,57099,57101,57103,57105,57107,57109,57111,57114,57116],{"class":619,"line":2661},[617,57081,761],{"class":622},[617,57083,8455],{"class":626},[617,57085,2669],{"class":630},[617,57087,637],{"class":622},[617,57089,640],{"class":622},[617,57091,57092],{"class":643},"#ffffff",[617,57094,640],{"class":622},[617,57096,1847],{"class":630},[617,57098,637],{"class":622},[617,57100,640],{"class":622},[617,57102,19006],{"class":643},[617,57104,640],{"class":622},[617,57106,1465],{"class":630},[617,57108,637],{"class":622},[617,57110,640],{"class":622},[617,57112,57113],{"class":643},"[0, 200, 0]",[617,57115,640],{"class":622},[617,57117,767],{"class":622},[617,57119,57120,57122,57124,57126,57128,57130,57132,57134,57136,57138,57140,57142,57144,57146,57148,57150,57153,57155],{"class":619,"line":2683},[617,57121,761],{"class":622},[617,57123,8455],{"class":626},[617,57125,2669],{"class":630},[617,57127,637],{"class":622},[617,57129,640],{"class":622},[617,57131,57092],{"class":643},[617,57133,640],{"class":622},[617,57135,1847],{"class":630},[617,57137,637],{"class":622},[617,57139,640],{"class":622},[617,57141,19006],{"class":643},[617,57143,640],{"class":622},[617,57145,1465],{"class":630},[617,57147,637],{"class":622},[617,57149,640],{"class":622},[617,57151,57152],{"class":643},"[100, 200, 100]",[617,57154,640],{"class":622},[617,57156,767],{"class":622},[617,57158,57159,57161,57163],{"class":619,"line":2727},[617,57160,885],{"class":622},[617,57162,741],{"class":626},[617,57164,649],{"class":622},[617,57166,57167,57169,57171],{"class":619,"line":2736},[617,57168,712],{"class":622},[617,57170,730],{"class":626},[617,57172,649],{"class":622},[484,57174,902],{"id":901},[907,57176,57177,57187],{},[910,57178,57179],{},[913,57180,57181,57183,57185],{},[916,57182,918],{"align":977},[916,57184,921],{"align":977},[916,57186,924],{},[926,57188,57189,57203,57218,57232],{},[913,57190,57191,57195,57198],{},[931,57192,57193],{"align":977},[598,57194,25650],{},[931,57196,57197],{"align":977},"Resolution of the marching cube field. Higher resolution produces smoother meshes at the cost of performance and memory.",[931,57199,57200],{},[598,57201,57202],{},"28",[913,57204,57205,57210,57213],{},[931,57206,57207],{"align":977},[598,57208,57209],{},"maxPolyCount",[931,57211,57212],{"align":977},"Maximum number of polygons to generate.",[931,57214,57215],{},[598,57216,57217],{},"10000",[913,57219,57220,57225,57228],{},[931,57221,57222],{"align":977},[598,57223,57224],{},"enableUvs",[931,57226,57227],{"align":977},"Whether UVs are enabled.",[931,57229,57230],{},[598,57231,951],{},[913,57233,57234,57239,57242],{},[931,57235,57236],{"align":977},[598,57237,57238],{},"enableColors",[931,57240,57241],{"align":977},"Whether vertex colors are enabled.",[931,57243,57244],{},[598,57245,951],{},[484,57247,57249],{"id":57248},"marchingcube-props","MarchingCube Props",[907,57251,57252,57262],{},[910,57253,57254],{},[913,57255,57256,57258,57260],{},[916,57257,918],{"align":977},[916,57259,921],{"align":977},[916,57261,924],{},[926,57263,57264,57278],{},[913,57265,57266,57271,57274],{},[931,57267,57268],{"align":977},[598,57269,57270],{},"strength",[931,57272,57273],{"align":977},"How strongly this cube affects the marching cube field.",[931,57275,57276],{},[598,57277,1926],{},[913,57279,57280,57285,57291],{},[931,57281,57282],{"align":977},[598,57283,57284],{},"subtract",[931,57286,57287,57288,57290],{"align":977},"How quickly strength moves to ",[598,57289,945],{}," over distance.",[931,57292,57293],{},[598,57294,29454],{},[484,57296,57298],{"id":57297},"marchingplane-props","MarchingPlane Props",[907,57300,57301,57311],{},[910,57302,57303],{},[913,57304,57305,57307,57309],{},[916,57306,918],{"align":977},[916,57308,921],{"align":977},[916,57310,924],{},[926,57312,57313,57331,57344],{},[913,57314,57315,57320,57326],{},[931,57316,57317],{"align":977},[598,57318,57319],{},"planeType",[931,57321,57322,57323],{"align":977},"Which axis the plane appears on. ",[598,57324,57325],{},"'x' | 'y' | 'z'",[931,57327,57328],{},[598,57329,57330],{},"'x'",[913,57332,57333,57337,57340],{},[931,57334,57335],{"align":977},[598,57336,57270],{},[931,57338,57339],{"align":977},"How strongly this plane affects the marching cube field.",[931,57341,57342],{},[598,57343,1926],{},[913,57345,57346,57350,57354],{},[931,57347,57348],{"align":977},[598,57349,57284],{},[931,57351,57287,57352,57290],{"align":977},[598,57353,945],{},[931,57355,57356],{},[598,57357,29454],{},[1307,57359,57360],{},"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":556,"searchDepth":557,"depth":558,"links":57362},[57363,57364,57365,57366],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},{"id":57248,"depth":558,"text":57249},{"id":57297,"depth":558,"text":57298},"Create organic blob-like shapes using metaballs.",{},{"title":429,"description":57367},"2fMta733jb31sfafa23DwIMPzUQ2f_phq7gswFmuiTw",{"id":57372,"title":433,"body":57373,"description":58275,"extension":571,"links":572,"meta":58276,"navigation":574,"path":434,"seo":58277,"stem":435,"__hash__":58278},"docs/2.api/9.objects/reflector.md",{"type":481,"value":57374,"toc":58268},[57375,57380,57394,57396,57614,57616,57699,57707,57711,57714,57941,57944,57947,57951,58265],[588,57376,57377],{},[57378,57379],"objects-reflector",{},[594,57381,2756,57382,57384,57385,57390,57391,57393],{},[598,57383,7297],{}," package provides an abstraction of the ",[1120,57386,57389],{"href":57387,"rel":57388},"https://github.com/mrdoob/three.js/blob/dev/examples/jsm/objects/Reflector.js",[1124],"Reflector class",", which creates a Mesh showing a real-time reflection of your scene. This Mesh extends from ",[598,57392,4272],{}," so all the default props can be passed as well:",[484,57395,15],{"id":604},[606,57397,57399],{"className":608,"code":57398,"language":613,"meta":556,"style":556},"\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",[598,57400,57401,57421,57440,57448,57452,57460,57473,57492,57500,57504,57512,57519,57533,57547,57560,57564,57582,57590,57598,57606],{"__ignoreMap":556},[617,57402,57403,57405,57407,57409,57411,57413,57415,57417,57419],{"class":619,"line":557},[617,57404,623],{"class":622},[617,57406,627],{"class":626},[617,57408,631],{"class":630},[617,57410,634],{"class":630},[617,57412,637],{"class":622},[617,57414,640],{"class":622},[617,57416,644],{"class":643},[617,57418,640],{"class":622},[617,57420,649],{"class":622},[617,57422,57423,57425,57427,57430,57432,57434,57436,57438],{"class":619,"line":558},[617,57424,657],{"class":656},[617,57426,660],{"class":622},[617,57428,57429],{"class":663}," Reflector",[617,57431,673],{"class":622},[617,57433,676],{"class":656},[617,57435,679],{"class":622},[617,57437,682],{"class":643},[617,57439,685],{"class":622},[617,57441,57442,57444,57446],{"class":619,"line":688},[617,57443,712],{"class":622},[617,57445,627],{"class":626},[617,57447,649],{"class":622},[617,57449,57450],{"class":619,"line":709},[617,57451,722],{"emptyLinePlaceholder":574},[617,57453,57454,57456,57458],{"class":619,"line":719},[617,57455,623],{"class":622},[617,57457,730],{"class":626},[617,57459,649],{"class":622},[617,57461,57462,57464,57466,57468,57471],{"class":619,"line":725},[617,57463,738],{"class":622},[617,57465,741],{"class":626},[617,57467,39477],{"class":630},[617,57469,57470],{"class":630}," alpha",[617,57472,649],{"class":622},[617,57474,57475,57477,57479,57481,57483,57485,57488,57490],{"class":619,"line":735},[617,57476,761],{"class":622},[617,57478,764],{"class":626},[617,57480,1465],{"class":630},[617,57482,637],{"class":622},[617,57484,640],{"class":622},[617,57486,57487],{"class":643},"[0, 0, 3]",[617,57489,640],{"class":622},[617,57491,767],{"class":622},[617,57493,57494,57496,57498],{"class":619,"line":758},[617,57495,761],{"class":622},[617,57497,775],{"class":626},[617,57499,767],{"class":622},[617,57501,57502],{"class":619,"line":770},[617,57503,722],{"emptyLinePlaceholder":574},[617,57505,57506,57508,57510],{"class":619,"line":780},[617,57507,761],{"class":622},[617,57509,19264],{"class":626},[617,57511,649],{"class":622},[617,57513,57514,57516],{"class":619,"line":785},[617,57515,833],{"class":622},[617,57517,57518],{"class":626},"Reflector\n",[617,57520,57521,57524,57526,57528,57531],{"class":619,"line":807},[617,57522,57523],{"class":630}," :rotation",[617,57525,637],{"class":622},[617,57527,640],{"class":622},[617,57529,57530],{"class":643},"[-Math.PI * 0.5, 0, 0]",[617,57532,3111],{"class":622},[617,57534,57535,57538,57540,57542,57545],{"class":619,"line":611},[617,57536,57537],{"class":630}," :position-y",[617,57539,637],{"class":622},[617,57541,640],{"class":622},[617,57543,57544],{"class":643},"-2",[617,57546,3111],{"class":622},[617,57548,57549,57551,57553,57555,57558],{"class":619,"line":830},[617,57550,25470],{"class":630},[617,57552,637],{"class":622},[617,57554,640],{"class":622},[617,57556,57557],{"class":643},"#fff",[617,57559,3111],{"class":622},[617,57561,57562],{"class":619,"line":841},[617,57563,50696],{"class":622},[617,57565,57566,57568,57570,57572,57574,57576,57578,57580],{"class":619,"line":852},[617,57567,844],{"class":622},[617,57569,8890],{"class":626},[617,57571,1939],{"class":630},[617,57573,637],{"class":622},[617,57575,640],{"class":622},[617,57577,10011],{"class":643},[617,57579,640],{"class":622},[617,57581,767],{"class":622},[617,57583,57584,57586,57588],{"class":619,"line":862},[617,57585,865],{"class":622},[617,57587,433],{"class":626},[617,57589,649],{"class":622},[617,57591,57592,57594,57596],{"class":619,"line":612},[617,57593,875],{"class":622},[617,57595,19264],{"class":626},[617,57597,649],{"class":622},[617,57599,57600,57602,57604],{"class":619,"line":882},[617,57601,885],{"class":622},[617,57603,741],{"class":626},[617,57605,649],{"class":622},[617,57607,57608,57610,57612],{"class":619,"line":892},[617,57609,712],{"class":622},[617,57611,730],{"class":626},[617,57613,649],{"class":622},[484,57615,902],{"id":901},[907,57617,57618,57628],{},[910,57619,57620],{},[913,57621,57622,57624,57626],{},[916,57623,918],{"align":977},[916,57625,921],{"align":977},[916,57627,924],{},[926,57629,57630,57642,57653,57664,57675,57687],{},[913,57631,57632,57636,57639],{},[931,57633,57634],{"align":977},[1649,57635,7527],{},[931,57637,57638],{"align":977},"The base color that's combine with the mirror effect",[931,57640,57641],{},"'#333'",[913,57643,57644,57648,57651],{},[931,57645,57646],{"align":977},[1649,57647,43001],{},[931,57649,57650],{"align":977},"the width of the texture to render on the mirror",[931,57652,26196],{},[913,57654,57655,57659,57662],{},[931,57656,57657],{"align":977},[1649,57658,43018],{},[931,57660,57661],{"align":977},"the height of the texture to render on the mirror",[931,57663,26196],{},[913,57665,57666,57670,57673],{},[931,57667,57668],{"align":977},[1649,57669,43135],{},[931,57671,57672],{"align":977},"to use the clipBias property",[931,57674,945],{},[913,57676,57677,57682,57685],{},[931,57678,57679],{"align":977},[1649,57680,57681],{},"multisample",[931,57683,57684],{"align":977},"how many samplers will be render",[931,57686,8408],{},[913,57688,57689,57694,57696],{},[931,57690,57691],{"align":977},[1649,57692,57693],{},"shader",[931,57695,44860],{"align":977},[931,57697,57698],{},"Reflector.ReflectorShader",[3179,57700,57701],{},[594,57702,57703,57704,57706],{},"All the props except the ",[598,57705,7527],{},", are not reactive",[484,57708,57710],{"id":57709},"custom-mirror-effect","Custom mirror effect",[594,57712,57713],{},"For more complex effect you can provide your own shaders, you could do this creating an object and pass the uniforms, vertexShaders or fragmentShaders:",[606,57715,57717],{"className":608,"code":57716,"language":613,"meta":556,"style":556},"\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",[598,57718,57719,57739,57755,57759,57770,57775,57779,57787,57791,57799,57811,57829,57834,57840,57853,57865,57877,57891,57895,57913,57921,57925,57933],{"__ignoreMap":556},[617,57720,57721,57723,57725,57727,57729,57731,57733,57735,57737],{"class":619,"line":557},[617,57722,623],{"class":622},[617,57724,627],{"class":626},[617,57726,631],{"class":630},[617,57728,634],{"class":630},[617,57730,637],{"class":622},[617,57732,640],{"class":622},[617,57734,644],{"class":643},[617,57736,640],{"class":622},[617,57738,649],{"class":622},[617,57740,57741,57743,57746,57748,57750,57753],{"class":619,"line":558},[617,57742,657],{"class":656},[617,57744,57745],{"class":663}," vertexShader ",[617,57747,15128],{"class":656},[617,57749,679],{"class":622},[617,57751,57752],{"class":643},"MyCustomVertexShader.glsl",[617,57754,685],{"class":622},[617,57756,57757],{"class":619,"line":688},[617,57758,722],{"emptyLinePlaceholder":574},[617,57760,57761,57763,57766,57768],{"class":619,"line":709},[617,57762,2395],{"class":630},[617,57764,57765],{"class":663}," customShader ",[617,57767,637],{"class":622},[617,57769,1184],{"class":622},[617,57771,57772],{"class":619,"line":719},[617,57773,57774],{"class":663}," vertexShader\n",[617,57776,57777],{"class":619,"line":725},[617,57778,1305],{"class":622},[617,57780,57781,57783,57785],{"class":619,"line":735},[617,57782,712],{"class":622},[617,57784,627],{"class":626},[617,57786,649],{"class":622},[617,57788,57789],{"class":619,"line":758},[617,57790,722],{"emptyLinePlaceholder":574},[617,57792,57793,57795,57797],{"class":619,"line":770},[617,57794,623],{"class":622},[617,57796,730],{"class":626},[617,57798,649],{"class":622},[617,57800,57801,57803,57805,57807,57809],{"class":619,"line":780},[617,57802,738],{"class":622},[617,57804,741],{"class":626},[617,57806,39477],{"class":630},[617,57808,57470],{"class":630},[617,57810,649],{"class":622},[617,57812,57813,57815,57817,57819,57821,57823,57825,57827],{"class":619,"line":785},[617,57814,761],{"class":622},[617,57816,764],{"class":626},[617,57818,1465],{"class":630},[617,57820,637],{"class":622},[617,57822,640],{"class":622},[617,57824,57487],{"class":643},[617,57826,640],{"class":622},[617,57828,767],{"class":622},[617,57830,57831],{"class":619,"line":807},[617,57832,57833],{"class":663}," ...\n",[617,57835,57836,57838],{"class":619,"line":611},[617,57837,761],{"class":622},[617,57839,57518],{"class":626},[617,57841,57842,57845,57847,57849,57851],{"class":619,"line":830},[617,57843,57844],{"class":630}," :rotation",[617,57846,637],{"class":622},[617,57848,640],{"class":622},[617,57850,57530],{"class":643},[617,57852,3111],{"class":622},[617,57854,57855,57857,57859,57861,57863],{"class":619,"line":841},[617,57856,36131],{"class":630},[617,57858,637],{"class":622},[617,57860,640],{"class":622},[617,57862,57544],{"class":643},[617,57864,3111],{"class":622},[617,57866,57867,57869,57871,57873,57875],{"class":619,"line":852},[617,57868,27709],{"class":630},[617,57870,637],{"class":622},[617,57872,640],{"class":622},[617,57874,57557],{"class":643},[617,57876,3111],{"class":622},[617,57878,57879,57882,57884,57886,57889],{"class":619,"line":862},[617,57880,57881],{"class":630}," :shader",[617,57883,637],{"class":622},[617,57885,640],{"class":622},[617,57887,57888],{"class":643},"customShader",[617,57890,3111],{"class":622},[617,57892,57893],{"class":619,"line":612},[617,57894,10441],{"class":622},[617,57896,57897,57899,57901,57903,57905,57907,57909,57911],{"class":619,"line":882},[617,57898,833],{"class":622},[617,57900,8890],{"class":626},[617,57902,1939],{"class":630},[617,57904,637],{"class":622},[617,57906,640],{"class":622},[617,57908,10011],{"class":643},[617,57910,640],{"class":622},[617,57912,767],{"class":622},[617,57914,57915,57917,57919],{"class":619,"line":892},[617,57916,875],{"class":622},[617,57918,433],{"class":626},[617,57920,649],{"class":622},[617,57922,57923],{"class":619,"line":2605},[617,57924,57833],{"class":663},[617,57926,57927,57929,57931],{"class":619,"line":2614},[617,57928,885],{"class":622},[617,57930,741],{"class":626},[617,57932,649],{"class":622},[617,57934,57935,57937,57939],{"class":619,"line":2634},[617,57936,712],{"class":622},[617,57938,730],{"class":626},[617,57940,649],{"class":622},[594,57942,57943],{},"The Reflector shader use the following configuration by default:",[594,57945,57946],{},"You can extend, modify or just play with them",[4031,57948,57950],{"id":57949},"default-shader","Default shader",[606,57952,57954],{"className":38891,"code":57953,"language":38893,"meta":556,"style":556},"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",[598,57955,57956,57967,57983,57992,58000,58010,58015,58024,58032,58036,58045,58053,58058,58062,58074,58079,58084,58088,58093,58098,58102,58107,58112,58117,58121,58126,58130,58140,58151,58156,58161,58165,58169,58174,58178,58183,58188,58192,58196,58201,58206,58210,58214,58218,58223,58227,58232,58237,58241,58246,58251,58257,58261],{"__ignoreMap":556},[617,57957,57958,57960,57963,57965],{"class":619,"line":557},[617,57959,2395],{"class":630},[617,57961,57962],{"class":663}," shader ",[617,57964,637],{"class":622},[617,57966,1184],{"class":622},[617,57968,57969,57972,57974,57976,57979,57981],{"class":619,"line":558},[617,57970,57971],{"class":626}," name",[617,57973,1198],{"class":622},[617,57975,679],{"class":622},[617,57977,57978],{"class":643},"ReflectorShader",[617,57980,2420],{"class":622},[617,57982,2468],{"class":622},[617,57984,57985,57988,57990],{"class":619,"line":688},[617,57986,57987],{"class":626}," uniforms",[617,57989,1198],{"class":622},[617,57991,1184],{"class":622},[617,57993,57994,57996,57998],{"class":619,"line":709},[617,57995,21797],{"class":626},[617,57997,1198],{"class":622},[617,57999,1184],{"class":622},[617,58001,58002,58005,58007],{"class":619,"line":719},[617,58003,58004],{"class":626}," value",[617,58006,1198],{"class":622},[617,58008,58009],{"class":622}," null\n",[617,58011,58012],{"class":619,"line":725},[617,58013,58014],{"class":622}," },\n",[617,58016,58017,58020,58022],{"class":619,"line":735},[617,58018,58019],{"class":626}," tDiffuse",[617,58021,1198],{"class":622},[617,58023,1184],{"class":622},[617,58025,58026,58028,58030],{"class":619,"line":758},[617,58027,58004],{"class":626},[617,58029,1198],{"class":622},[617,58031,58009],{"class":622},[617,58033,58034],{"class":619,"line":770},[617,58035,58014],{"class":622},[617,58037,58038,58041,58043],{"class":619,"line":780},[617,58039,58040],{"class":626}," textureMatrix",[617,58042,1198],{"class":622},[617,58044,1184],{"class":622},[617,58046,58047,58049,58051],{"class":619,"line":785},[617,58048,58004],{"class":626},[617,58050,1198],{"class":622},[617,58052,58009],{"class":622},[617,58054,58055],{"class":619,"line":807},[617,58056,58057],{"class":622}," }\n",[617,58059,58060],{"class":619,"line":611},[617,58061,2577],{"class":622},[617,58063,58064,58067,58069,58072],{"class":619,"line":830},[617,58065,58066],{"class":626}," vertexShader",[617,58068,1198],{"class":622},[617,58070,58071],{"class":1189}," /* glsl */",[617,58073,20309],{"class":622},[617,58075,58076],{"class":619,"line":841},[617,58077,58078],{"class":643}," uniform mat4 textureMatrix;\n",[617,58080,58081],{"class":619,"line":852},[617,58082,58083],{"class":643}," varying vec4 vUv;\n",[617,58085,58086],{"class":619,"line":862},[617,58087,722],{"emptyLinePlaceholder":574},[617,58089,58090],{"class":619,"line":612},[617,58091,58092],{"class":643}," #include \u003Ccommon>\n",[617,58094,58095],{"class":619,"line":882},[617,58096,58097],{"class":643}," #include \u003Clogdepthbuf_pars_vertex>\n",[617,58099,58100],{"class":619,"line":892},[617,58101,722],{"emptyLinePlaceholder":574},[617,58103,58104],{"class":619,"line":2605},[617,58105,58106],{"class":643}," void main() {\n",[617,58108,58109],{"class":619,"line":2614},[617,58110,58111],{"class":643}," vUv = textureMatrix * vec4( position, 1.0 );\n",[617,58113,58114],{"class":619,"line":2634},[617,58115,58116],{"class":643}," gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n",[617,58118,58119],{"class":619,"line":2643},[617,58120,722],{"emptyLinePlaceholder":574},[617,58122,58123],{"class":619,"line":2652},[617,58124,58125],{"class":643}," #include \u003Clogdepthbuf_vertex>\n",[617,58127,58128],{"class":619,"line":2661},[617,58129,722],{"emptyLinePlaceholder":574},[617,58131,58132,58135,58138],{"class":619,"line":2683},[617,58133,58134],{"class":643}," }",[617,58136,58137],{"class":622},"`",[617,58139,2468],{"class":622},[617,58141,58142,58145,58147,58149],{"class":619,"line":2727},[617,58143,58144],{"class":626}," fragmentShader",[617,58146,1198],{"class":622},[617,58148,58071],{"class":1189},[617,58150,20309],{"class":622},[617,58152,58153],{"class":619,"line":2736},[617,58154,58155],{"class":643}," uniform vec3 color;\n",[617,58157,58158],{"class":619,"line":2745},[617,58159,58160],{"class":643}," uniform sampler2D tDiffuse;\n",[617,58162,58163],{"class":619,"line":3902},[617,58164,58083],{"class":643},[617,58166,58167],{"class":619,"line":3933},[617,58168,722],{"emptyLinePlaceholder":574},[617,58170,58171],{"class":619,"line":3954},[617,58172,58173],{"class":643}," #include \u003Clogdepthbuf_pars_fragment>\n",[617,58175,58176],{"class":619,"line":3973},[617,58177,722],{"emptyLinePlaceholder":574},[617,58179,58180],{"class":619,"line":4005},[617,58181,58182],{"class":643}," float blendOverlay( float base, float blend ) {\n",[617,58184,58185],{"class":619,"line":4014},[617,58186,58187],{"class":643}," return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n",[617,58189,58190],{"class":619,"line":4023},[617,58191,7837],{"class":643},[617,58193,58194],{"class":619,"line":19053},[617,58195,722],{"emptyLinePlaceholder":574},[617,58197,58198],{"class":619,"line":19068},[617,58199,58200],{"class":643}," vec3 blendOverlay( vec3 base, vec3 blend ) {\n",[617,58202,58203],{"class":619,"line":19083},[617,58204,58205],{"class":643}," return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n",[617,58207,58208],{"class":619,"line":19088},[617,58209,7837],{"class":643},[617,58211,58212],{"class":619,"line":19095},[617,58213,722],{"emptyLinePlaceholder":574},[617,58215,58216],{"class":619,"line":19100},[617,58217,58106],{"class":643},[617,58219,58220],{"class":619,"line":19106},[617,58221,58222],{"class":643}," #include \u003Clogdepthbuf_fragment>\n",[617,58224,58225],{"class":619,"line":19127},[617,58226,722],{"emptyLinePlaceholder":574},[617,58228,58229],{"class":619,"line":19133},[617,58230,58231],{"class":643}," vec4 base = texture2DProj( tDiffuse, vUv );\n",[617,58233,58234],{"class":619,"line":19140},[617,58235,58236],{"class":643}," gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n",[617,58238,58239],{"class":619,"line":19145},[617,58240,722],{"emptyLinePlaceholder":574},[617,58242,58243],{"class":619,"line":19166},[617,58244,58245],{"class":643}," #include \u003Ctonemapping_fragment>\n",[617,58247,58248],{"class":619,"line":19179},[617,58249,58250],{"class":643}," #include \u003Ccolorspace_fragment>\n",[617,58252,58253,58255],{"class":619,"line":19205},[617,58254,58134],{"class":643},[617,58256,20309],{"class":622},[617,58258,58259],{"class":619,"line":19210},[617,58260,722],{"emptyLinePlaceholder":574},[617,58262,58263],{"class":619,"line":19217},[617,58264,1305],{"class":622},[1307,58266,58267],{},"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 .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":556,"searchDepth":557,"depth":558,"links":58269},[58270,58271,58272],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},{"id":57709,"depth":558,"text":57710,"children":58273},[58274],{"id":57949,"depth":688,"text":57950},"Create real-time reflections of your scene.",{},{"title":433,"description":58275},"fTyCkcleBhTAlUD12viac9Ksqji4-Me4YbgFoLsJIZY",{"id":58280,"title":437,"body":58281,"description":59236,"extension":571,"links":572,"meta":59237,"navigation":574,"path":438,"seo":59238,"stem":439,"__hash__":59239},"docs/2.api/9.objects/text.md",{"type":481,"value":58282,"toc":59230},[58283,58288,58318,58331,58335,58355,58447,58449,58465,58473,58698,58708,58710,58738,58740,59211,59228],[588,58284,58285],{},[58286,58287],"objects-sdf-text",{},[594,58289,58290,58293,58294,58299,58300,58307,58308,1652,58311,3043,58314,58317],{},[598,58291,58292],{},"\u003CText />"," renders crisp, scalable text using ",[1120,58295,58298],{"href":58296,"rel":58297},"https://en.wikipedia.org/wiki/Signed_distance_function",[1124],"SDF (signed distance field)"," glyphs, wrapping ",[1120,58301,58304],{"href":58302,"rel":58303},"https://github.com/protectwise/troika/tree/main/packages/troika-three-text",[1124],[598,58305,58306],{},"troika-three-text",". It consumes real ",[598,58309,58310],{},".ttf",[598,58312,58313],{},".otf",[598,58315,58316],{},".woff"," font files at runtime and supports kerning, ligatures, RTL/bidi and unicode fallback.",[594,58319,58320,58321,58323,58324,58327,58328,58330],{},"The component owns the underlying troika ",[598,58322,437],{}," instance: it calls ",[598,58325,58326],{},".sync()"," whenever props change and disposes of the instance automatically when unmounted, so you never need the manual ",[598,58329,4268],{}," wiring.",[484,58332,58334],{"id":58333},"text3d-vs-text-which-do-i-use","Text3D vs Text — which do I use?",[1985,58336,58337],{},[594,58338,22454,58339,58344,58345,58348,58349,58354],{},[1649,58340,58341],{},[598,58342,58343],{},"\u003CText3D>"," for chunky, extruded 3D titles from a pre-baked ",[598,58346,58347],{},"typeface.json"," font. Use ",[1649,58350,58351],{},[598,58352,58353],{},"\u003CText>"," for labels, UI, body copy and multilingual content where kerning, wrapping and unicode fallback matter.",[907,58356,58357,58371],{},[910,58358,58359],{},[913,58360,58361,58363,58367],{},[916,58362],{"align":977},[916,58364,58365],{"align":977},[598,58366,58343],{},[916,58368,58369],{"align":977},[598,58370,58353],{},[926,58372,58373,58389,58410,58423,58434],{},[913,58374,58375,58380,58386],{},[931,58376,58377],{"align":977},[1649,58378,58379],{},"Technique",[931,58381,58382,58383],{"align":977},"Extruded ",[598,58384,58385],{},"TextGeometry",[931,58387,58388],{"align":977},"SDF, runtime-generated",[913,58390,58391,58396,58401],{},[931,58392,58393],{"align":977},[1649,58394,58395],{},"Font input",[931,58397,58398,58399],{"align":977},"pre-baked ",[598,58400,58347],{},[931,58402,58403,58404,3316,58406,3316,58408],{"align":977},"real ",[598,58405,58310],{},[598,58407,58313],{},[598,58409,58316],{},[913,58411,58412,58417,58420],{},[931,58413,58414],{"align":977},[1649,58415,58416],{},"Kerning / ligatures / RTL",[931,58418,58419],{"align":977},"✗",[931,58421,58422],{"align":977},"✓",[913,58424,58425,58430,58432],{},[931,58426,58427],{"align":977},[1649,58428,58429],{},"Unicode fallback",[931,58431,58419],{"align":977},[931,58433,58422],{"align":977},[913,58435,58436,58441,58444],{},[931,58437,58438],{"align":977},[1649,58439,58440],{},"Best for",[931,58442,58443],{"align":977},"3D titles",[931,58445,58446],{"align":977},"labels, UI, multilingual",[484,58448,15],{"id":604},[594,58450,58451,58452,58454,58455,58460,58461,58464],{},"The text can be provided through the ",[598,58453,27337],{}," prop or the default slot. By default the ",[1120,58456,58459],{"href":58457,"rel":58458},"https://fonts.google.com/specimen/Roboto",[1124],"Roboto"," font is loaded from Google Fonts; pass the ",[598,58462,58463],{},"font"," prop to use your own font file.",[1985,58466,58467],{},[594,58468,58469,58470,58472],{},"For dynamic or reactive content, prefer the ",[598,58471,27337],{}," prop. The default slot is best for static strings, since reactive values interpolated into the slot may not always re-trigger an update.",[606,58474,58476],{"className":608,"code":58475,"language":613,"meta":556,"style":556},"\u003Cscript setup lang=\"ts\">\nimport { Text } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 0, 6]\" />\n \u003CText\n text=\"Hello TresJS\"\n font=\"/fonts/Inter.woff\"\n :font-size=\"0.5\"\n color=\"#ffffff\"\n anchor-x=\"center\"\n anchor-y=\"middle\"\n :max-width=\"4\"\n @sync=\"onSync\"\n />\n \u003C/TresCanvas>\n\u003C/template>\n",[598,58477,58478,58498,58517,58525,58529,58537,58545,58564,58571,58585,58599,58612,58624,58637,58651,58664,58678,58682,58690],{"__ignoreMap":556},[617,58479,58480,58482,58484,58486,58488,58490,58492,58494,58496],{"class":619,"line":557},[617,58481,623],{"class":622},[617,58483,627],{"class":626},[617,58485,631],{"class":630},[617,58487,634],{"class":630},[617,58489,637],{"class":622},[617,58491,640],{"class":622},[617,58493,644],{"class":643},[617,58495,640],{"class":622},[617,58497,649],{"class":622},[617,58499,58500,58502,58504,58507,58509,58511,58513,58515],{"class":619,"line":558},[617,58501,657],{"class":656},[617,58503,660],{"class":622},[617,58505,58506],{"class":663}," Text",[617,58508,673],{"class":622},[617,58510,676],{"class":656},[617,58512,679],{"class":622},[617,58514,682],{"class":643},[617,58516,685],{"class":622},[617,58518,58519,58521,58523],{"class":619,"line":688},[617,58520,712],{"class":622},[617,58522,627],{"class":626},[617,58524,649],{"class":622},[617,58526,58527],{"class":619,"line":709},[617,58528,722],{"emptyLinePlaceholder":574},[617,58530,58531,58533,58535],{"class":619,"line":719},[617,58532,623],{"class":622},[617,58534,730],{"class":626},[617,58536,649],{"class":622},[617,58538,58539,58541,58543],{"class":619,"line":725},[617,58540,738],{"class":622},[617,58542,741],{"class":626},[617,58544,649],{"class":622},[617,58546,58547,58549,58551,58553,58555,58557,58560,58562],{"class":619,"line":735},[617,58548,761],{"class":622},[617,58550,764],{"class":626},[617,58552,1465],{"class":630},[617,58554,637],{"class":622},[617,58556,640],{"class":622},[617,58558,58559],{"class":643},"[0, 0, 6]",[617,58561,640],{"class":622},[617,58563,767],{"class":622},[617,58565,58566,58568],{"class":619,"line":758},[617,58567,761],{"class":622},[617,58569,58570],{"class":626},"Text\n",[617,58572,58573,58576,58578,58580,58583],{"class":619,"line":770},[617,58574,58575],{"class":630}," text",[617,58577,637],{"class":622},[617,58579,640],{"class":622},[617,58581,58582],{"class":643},"Hello TresJS",[617,58584,3111],{"class":622},[617,58586,58587,58590,58592,58594,58597],{"class":619,"line":780},[617,58588,58589],{"class":630}," font",[617,58591,637],{"class":622},[617,58593,640],{"class":622},[617,58595,58596],{"class":643},"/fonts/Inter.woff",[617,58598,3111],{"class":622},[617,58600,58601,58604,58606,58608,58610],{"class":619,"line":785},[617,58602,58603],{"class":630}," :font-size",[617,58605,637],{"class":622},[617,58607,640],{"class":622},[617,58609,1926],{"class":643},[617,58611,3111],{"class":622},[617,58613,58614,58616,58618,58620,58622],{"class":619,"line":807},[617,58615,27709],{"class":630},[617,58617,637],{"class":622},[617,58619,640],{"class":622},[617,58621,57092],{"class":643},[617,58623,3111],{"class":622},[617,58625,58626,58629,58631,58633,58635],{"class":619,"line":611},[617,58627,58628],{"class":630}," anchor-x",[617,58630,637],{"class":622},[617,58632,640],{"class":622},[617,58634,26243],{"class":643},[617,58636,3111],{"class":622},[617,58638,58639,58642,58644,58646,58649],{"class":619,"line":830},[617,58640,58641],{"class":630}," anchor-y",[617,58643,637],{"class":622},[617,58645,640],{"class":622},[617,58647,58648],{"class":643},"middle",[617,58650,3111],{"class":622},[617,58652,58653,58656,58658,58660,58662],{"class":619,"line":841},[617,58654,58655],{"class":630}," :max-width",[617,58657,637],{"class":622},[617,58659,640],{"class":622},[617,58661,8408],{"class":643},[617,58663,3111],{"class":622},[617,58665,58666,58669,58671,58673,58676],{"class":619,"line":852},[617,58667,58668],{"class":630}," @sync",[617,58670,637],{"class":622},[617,58672,640],{"class":622},[617,58674,58675],{"class":643},"onSync",[617,58677,3111],{"class":622},[617,58679,58680],{"class":619,"line":862},[617,58681,15248],{"class":622},[617,58683,58684,58686,58688],{"class":619,"line":612},[617,58685,885],{"class":622},[617,58687,741],{"class":626},[617,58689,649],{"class":622},[617,58691,58692,58694,58696],{"class":619,"line":882},[617,58693,712],{"class":622},[617,58695,730],{"class":626},[617,58697,649],{"class":622},[594,58699,58700,58701,1652,58703,5591,58705,58707],{},"Any extra props (such as ",[598,58702,4110],{},[598,58704,5607],{},[598,58706,5610],{},") are forwarded to the underlying object.",[484,58709,12330],{"id":12329},[907,58711,58712,58720],{},[910,58713,58714],{},[913,58715,58716,58718],{},[916,58717,5739],{"align":977},[916,58719,921],{"align":977},[926,58721,58722],{},[913,58723,58724,58729],{},[931,58725,58726],{"align":977},[1649,58727,58728],{},"sync",[931,58730,58731,58732,58734,58735,58737],{"align":977},"Fires after the text layout has completed (",[598,58733,58326],{},"). The troika ",[598,58736,437],{}," instance is emitted.",[484,58739,902],{"id":901},[907,58741,58742,58752],{},[910,58743,58744],{},[913,58745,58746,58748,58750],{},[916,58747,918],{"align":977},[916,58749,921],{"align":977},[916,58751,924],{},[926,58753,58754,58765,58779,58790,58804,58819,58838,58852,58868,58882,58905,58922,58937,58952,58970,58984,59007,59026,59045,59059,59073,59087,59101,59114,59128,59142,59155,59169,59183,59197],{},[913,58755,58756,58760,58763],{},[931,58757,58758],{"align":977},[1649,58759,27337],{},[931,58761,58762],{"align":977},"The string of text to render. Can also be provided via the default slot.",[931,58764],{},[913,58766,58767,58772,58775],{},[931,58768,58769],{"align":977},[1649,58770,58771],{},"characters",[931,58773,58774],{"align":977},"The set of characters to pre-generate SDF glyphs for.",[931,58776,58777],{},[598,58778,3636],{},[913,58780,58781,58785,58788],{},[931,58782,58783],{"align":977},[1649,58784,7527],{},[931,58786,58787],{"align":977},"The color of the text.",[931,58789,2676],{},[913,58791,58792,58797,58800],{},[931,58793,58794],{"align":977},[1649,58795,58796],{},"fontSize",[931,58798,58799],{"align":977},"The em-height at which to render the font, in local world units.",[931,58801,58802],{},[598,58803,1854],{},[913,58805,58806,58811,58814],{},[931,58807,58808],{"align":977},[1649,58809,58810],{},"fontWeight",[931,58812,58813],{"align":977},"The weight of the font (variable fonts only).",[931,58815,58816],{},[598,58817,58818],{},"normal",[913,58820,58821,58826,58834],{},[931,58822,58823],{"align":977},[1649,58824,58825],{},"fontStyle",[931,58827,58828,58829,5591,58831,1126],{"align":977},"The style of the font, ",[598,58830,58818],{},[598,58832,58833],{},"italic",[931,58835,58836],{},[598,58837,58818],{},[913,58839,58840,58845,58848],{},[931,58841,58842],{"align":977},[1649,58843,58844],{},"maxWidth",[931,58846,58847],{"align":977},"The maximum width of the text block, above which lines wrap.",[931,58849,58850],{},[598,58851,11564],{},[913,58853,58854,58859,58864],{},[931,58855,58856],{"align":977},[1649,58857,58858],{},"lineHeight",[931,58860,58861,58862,1126],{"align":977},"The height of each line of text, as a multiple of ",[598,58863,58796],{},[931,58865,58866],{},[598,58867,58818],{},[913,58869,58870,58875,58878],{},[931,58871,58872],{"align":977},[1649,58873,58874],{},"letterSpacing",[931,58876,58877],{"align":977},"Spacing between letters after layout, in local world units.",[931,58879,58880],{},[598,58881,945],{},[913,58883,58884,58889,58901],{},[931,58885,58886],{"align":977},[1649,58887,58888],{},"textAlign",[931,58890,58891,58892,1652,58894,1652,58896,5591,58898,1126],{"align":977},"Horizontal alignment: ",[598,58893,977],{},[598,58895,996],{},[598,58897,26243],{},[598,58899,58900],{},"justify",[931,58902,58903],{},[598,58904,977],{},[913,58906,58907,58911,58920],{},[931,58908,58909],{"align":977},[1649,58910,58463],{},[931,58912,58913,58914,1652,58916,1652,58918,5554],{"align":977},"URL of a custom font file (",[598,58915,58310],{},[598,58917,58313],{},[598,58919,58316],{},[931,58921,58459],{},[913,58923,58924,58929,58932],{},[931,58925,58926],{"align":977},[1649,58927,58928],{},"anchorX",[931,58930,58931],{"align":977},"Horizontal position in the text block that lines up with the local origin.",[931,58933,58934],{},[598,58935,58936],{},"'center'",[913,58938,58939,58944,58947],{},[931,58940,58941],{"align":977},[1649,58942,58943],{},"anchorY",[931,58945,58946],{"align":977},"Vertical position in the text block that lines up with the local origin.",[931,58948,58949],{},[598,58950,58951],{},"'middle'",[913,58953,58954,58959,58966],{},[931,58955,58956],{"align":977},[1649,58957,58958],{},"clipRect",[931,58960,58961,58962,58965],{"align":977},"Clipping region ",[598,58963,58964],{},"[minX, minY, maxX, maxY]"," in local units.",[931,58967,58968],{},[598,58969,3636],{},[913,58971,58972,58977,58980],{},[931,58973,58974],{"align":977},[1649,58975,58976],{},"depthOffset",[931,58978,58979],{"align":977},"Fixed offset added to the text's rendered z-depth (helps prevent z-fighting).",[931,58981,58982],{},[598,58983,945],{},[913,58985,58986,58991,59003],{},[931,58987,58988],{"align":977},[1649,58989,58990],{},"direction",[931,58992,58993,58994,1652,58997,5591,59000,1126],{"align":977},"Base text direction: ",[598,58995,58996],{},"auto",[598,58998,58999],{},"ltr",[598,59001,59002],{},"rtl",[931,59004,59005],{},[598,59006,58996],{},[913,59008,59009,59014,59022],{},[931,59010,59011],{"align":977},[1649,59012,59013],{},"overflowWrap",[931,59015,59016,59017,5591,59019,1126],{"align":977},"How text wraps when a word is too long: ",[598,59018,58818],{},[598,59020,59021],{},"break-word",[931,59023,59024],{},[598,59025,58818],{},[913,59027,59028,59033,59041],{},[931,59029,59030],{"align":977},[1649,59031,59032],{},"whiteSpace",[931,59034,59035,59036,5591,59038,1126],{"align":977},"Whitespace handling: ",[598,59037,58818],{},[598,59039,59040],{},"nowrap",[931,59042,59043],{},[598,59044,58818],{},[913,59046,59047,59052,59055],{},[931,59048,59049],{"align":977},[1649,59050,59051],{},"outlineWidth",[931,59053,59054],{"align":977},"Width of an outline/halo drawn around each glyph.",[931,59056,59057],{},[598,59058,945],{},[913,59060,59061,59066,59069],{},[931,59062,59063],{"align":977},[1649,59064,59065],{},"outlineOffsetX",[931,59067,59068],{"align":977},"Horizontal offset of the text outline.",[931,59070,59071],{},[598,59072,945],{},[913,59074,59075,59080,59083],{},[931,59076,59077],{"align":977},[1649,59078,59079],{},"outlineOffsetY",[931,59081,59082],{"align":977},"Vertical offset of the text outline.",[931,59084,59085],{},[598,59086,945],{},[913,59088,59089,59094,59097],{},[931,59090,59091],{"align":977},[1649,59092,59093],{},"outlineBlur",[931,59095,59096],{"align":977},"Blur radius applied to the text outline.",[931,59098,59099],{},[598,59100,945],{},[913,59102,59103,59108,59111],{},[931,59104,59105],{"align":977},[1649,59106,59107],{},"outlineColor",[931,59109,59110],{"align":977},"Color of the text outline.",[931,59112,59113],{},"black",[913,59115,59116,59121,59124],{},[931,59117,59118],{"align":977},[1649,59119,59120],{},"outlineOpacity",[931,59122,59123],{"align":977},"Opacity of the text outline.",[931,59125,59126],{},[598,59127,1854],{},[913,59129,59130,59135,59138],{},[931,59131,59132],{"align":977},[1649,59133,59134],{},"strokeWidth",[931,59136,59137],{"align":977},"Width of an inner stroke drawn on each glyph.",[931,59139,59140],{},[598,59141,945],{},[913,59143,59144,59149,59152],{},[931,59145,59146],{"align":977},[1649,59147,59148],{},"strokeColor",[931,59150,59151],{"align":977},"Color of the glyph stroke.",[931,59153,59154],{},"grey",[913,59156,59157,59162,59165],{},[931,59158,59159],{"align":977},[1649,59160,59161],{},"strokeOpacity",[931,59163,59164],{"align":977},"Opacity of the glyph stroke.",[931,59166,59167],{},[598,59168,1854],{},[913,59170,59171,59176,59179],{},[931,59172,59173],{"align":977},[1649,59174,59175],{},"fillOpacity",[931,59177,59178],{"align":977},"Opacity of the glyph fill.",[931,59180,59181],{},[598,59182,1854],{},[913,59184,59185,59190,59193],{},[931,59186,59187],{"align":977},[1649,59188,59189],{},"sdfGlyphSize",[931,59191,59192],{"align":977},"The size of each glyph's SDF texture, in pixels.",[931,59194,59195],{},[598,59196,32018],{},[913,59198,59199,59204,59207],{},[931,59200,59201],{"align":977},[1649,59202,59203],{},"glyphGeometryDetail",[931,59205,59206],{"align":977},"The level of detail of each glyph's geometry tessellation.",[931,59208,59209],{},[598,59210,1854],{},[1985,59212,59213],{},[594,59214,59215,59216,1652,59218,1652,59220,3043,59222,59224,59225,59227],{},"Only ",[598,59217,58796],{},[598,59219,58928],{},[598,59221,58943],{},[598,59223,59189],{}," are defaulted by the component. All other defaults are applied by ",[598,59226,58306],{}," itself, so the values above reflect troika's behaviour when the prop is left unset.",[1307,59229,1624],{},{"title":556,"searchDepth":557,"depth":558,"links":59231},[59232,59233,59234,59235],{"id":58333,"depth":558,"text":58334},{"id":604,"depth":558,"text":15},{"id":12329,"depth":558,"text":12330},{"id":901,"depth":558,"text":902},"Render high-quality SDF text from real font files using troika-three-text.",{},{"title":437,"description":59236},"BMYiLiRNYCu_1pIo7EPvIyNo19CSoOthV_K98j7oyC0",{"id":59241,"title":441,"body":59242,"description":59777,"extension":571,"links":572,"meta":59778,"navigation":574,"path":442,"seo":59779,"stem":443,"__hash__":59780},"docs/2.api/9.objects/text-3d.md",{"type":481,"value":59243,"toc":59773},[59244,59249,59259,59261,59279,59386,59401,59494,59497,59614,59616,59770],[588,59245,59246],{},[59247,59248],"objects-text",{},[594,59250,59251,59254,59255,33516],{},[598,59252,59253],{},"\u003CText3D />"," is a component that renders text in 3D. It is a wrapper around the ",[1120,59256,58385],{"href":59257,"rel":59258},"https://threejs.org/docs/#api/en/geometries/TextGeometry",[1124],[484,59260,15],{"id":604},[594,59262,59263,59264,59266,59267,59269,59270,59273,59274],{},"To use the ",[598,59265,59253],{}," component you need to pass the ",[598,59268,58463],{}," prop with the URL of the font JSON file you want to use. TextGeometry uses ",[598,59271,59272],{},"typeface",".json generated fonts, you can generate yours ",[1120,59275,59278],{"href":59276,"rel":59277},"http://gero3.github.io/facetype.js/",[1124],"here",[606,59280,59282],{"className":608,"code":59281,"language":613,"meta":556,"style":556},"\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",[598,59283,59284,59292,59300,59308,59315,59328,59342,59346,59354,59362,59370,59378],{"__ignoreMap":556},[617,59285,59286,59288,59290],{"class":619,"line":557},[617,59287,623],{"class":622},[617,59289,730],{"class":626},[617,59291,649],{"class":622},[617,59293,59294,59296,59298],{"class":619,"line":558},[617,59295,738],{"class":622},[617,59297,741],{"class":626},[617,59299,649],{"class":622},[617,59301,59302,59304,59306],{"class":619,"line":688},[617,59303,761],{"class":622},[617,59305,19264],{"class":626},[617,59307,649],{"class":622},[617,59309,59310,59312],{"class":619,"line":709},[617,59311,833],{"class":622},[617,59313,59314],{"class":626},"Text3D\n",[617,59316,59317,59320,59322,59324,59326],{"class":619,"line":719},[617,59318,59319],{"class":630}," text",[617,59321,637],{"class":622},[617,59323,640],{"class":622},[617,59325,14899],{"class":643},[617,59327,3111],{"class":622},[617,59329,59330,59333,59335,59337,59340],{"class":619,"line":725},[617,59331,59332],{"class":630}," font",[617,59334,637],{"class":622},[617,59336,640],{"class":622},[617,59338,59339],{"class":643},"/fonts/FiraCodeRegular.json",[617,59341,3111],{"class":622},[617,59343,59344],{"class":619,"line":735},[617,59345,50696],{"class":622},[617,59347,59348,59350,59352],{"class":619,"line":758},[617,59349,844],{"class":622},[617,59351,857],{"class":626},[617,59353,767],{"class":622},[617,59355,59356,59358,59360],{"class":619,"line":770},[617,59357,865],{"class":622},[617,59359,441],{"class":626},[617,59361,649],{"class":622},[617,59363,59364,59366,59368],{"class":619,"line":780},[617,59365,875],{"class":622},[617,59367,19264],{"class":626},[617,59369,649],{"class":622},[617,59371,59372,59374,59376],{"class":619,"line":785},[617,59373,885],{"class":622},[617,59375,741],{"class":626},[617,59377,649],{"class":622},[617,59379,59380,59382,59384],{"class":619,"line":807},[617,59381,712],{"class":622},[617,59383,730],{"class":626},[617,59385,649],{"class":622},[594,59387,59388,59389,59392,59393,59395,59396,4284,59398,59400],{},"Notice that you need to pass the ",[598,59390,59391],{},"\u003CTresMeshNormalMaterial />"," component as a child of the ",[598,59394,59253],{}," component. This is because ",[598,59397,59253],{},[598,59399,4272],{}," 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:",[606,59402,59404],{"className":608,"code":59403,"language":613,"meta":556,"style":556},"\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",[598,59405,59406,59414,59422,59430,59449,59454,59462,59470,59478,59486],{"__ignoreMap":556},[617,59407,59408,59410,59412],{"class":619,"line":557},[617,59409,623],{"class":622},[617,59411,730],{"class":626},[617,59413,649],{"class":622},[617,59415,59416,59418,59420],{"class":619,"line":558},[617,59417,738],{"class":622},[617,59419,741],{"class":626},[617,59421,649],{"class":622},[617,59423,59424,59426,59428],{"class":619,"line":688},[617,59425,761],{"class":622},[617,59427,19264],{"class":626},[617,59429,649],{"class":622},[617,59431,59432,59434,59436,59439,59441,59443,59445,59447],{"class":619,"line":709},[617,59433,833],{"class":622},[617,59435,441],{"class":626},[617,59437,59438],{"class":630}," font",[617,59440,637],{"class":622},[617,59442,640],{"class":622},[617,59444,59339],{"class":643},[617,59446,640],{"class":622},[617,59448,649],{"class":622},[617,59450,59451],{"class":619,"line":719},[617,59452,59453],{"class":663}," TresJS\n",[617,59455,59456,59458,59460],{"class":619,"line":725},[617,59457,844],{"class":622},[617,59459,857],{"class":626},[617,59461,767],{"class":622},[617,59463,59464,59466,59468],{"class":619,"line":735},[617,59465,865],{"class":622},[617,59467,441],{"class":626},[617,59469,649],{"class":622},[617,59471,59472,59474,59476],{"class":619,"line":758},[617,59473,875],{"class":622},[617,59475,19264],{"class":626},[617,59477,649],{"class":622},[617,59479,59480,59482,59484],{"class":619,"line":770},[617,59481,885],{"class":622},[617,59483,741],{"class":626},[617,59485,649],{"class":622},[617,59487,59488,59490,59492],{"class":619,"line":780},[617,59489,712],{"class":622},[617,59491,730],{"class":626},[617,59493,649],{"class":622},[594,59495,59496],{},"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",[606,59498,59500],{"className":608,"code":59499,"language":613,"meta":556,"style":556},"\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",[598,59501,59502,59510,59530,59538,59546,59552,59565,59577,59581,59586,59590,59598,59606],{"__ignoreMap":556},[617,59503,59504,59506,59508],{"class":619,"line":557},[617,59505,623],{"class":622},[617,59507,730],{"class":626},[617,59509,649],{"class":622},[617,59511,59512,59514,59517,59519,59521,59523,59526,59528],{"class":619,"line":558},[617,59513,738],{"class":622},[617,59515,59516],{"class":626},"input",[617,59518,2993],{"class":630},[617,59520,637],{"class":622},[617,59522,640],{"class":622},[617,59524,59525],{"class":643},"myReactiveText",[617,59527,640],{"class":622},[617,59529,767],{"class":622},[617,59531,59532,59534,59536],{"class":619,"line":688},[617,59533,738],{"class":622},[617,59535,741],{"class":626},[617,59537,649],{"class":622},[617,59539,59540,59542,59544],{"class":619,"line":709},[617,59541,761],{"class":622},[617,59543,19264],{"class":626},[617,59545,649],{"class":622},[617,59547,59548,59550],{"class":619,"line":719},[617,59549,833],{"class":622},[617,59551,59314],{"class":626},[617,59553,59554,59557,59559,59561,59563],{"class":619,"line":725},[617,59555,59556],{"class":630}," :text",[617,59558,637],{"class":622},[617,59560,640],{"class":622},[617,59562,59525],{"class":643},[617,59564,3111],{"class":622},[617,59566,59567,59569,59571,59573,59575],{"class":619,"line":735},[617,59568,59332],{"class":630},[617,59570,637],{"class":622},[617,59572,640],{"class":622},[617,59574,59339],{"class":643},[617,59576,3111],{"class":622},[617,59578,59579],{"class":619,"line":758},[617,59580,50642],{"class":630},[617,59582,59583],{"class":619,"line":770},[617,59584,59585],{"class":630}," need-updates\n",[617,59587,59588],{"class":619,"line":780},[617,59589,8013],{"class":622},[617,59591,59592,59594,59596],{"class":619,"line":785},[617,59593,875],{"class":622},[617,59595,19264],{"class":626},[617,59597,649],{"class":622},[617,59599,59600,59602,59604],{"class":619,"line":807},[617,59601,885],{"class":622},[617,59603,741],{"class":626},[617,59605,649],{"class":622},[617,59607,59608,59610,59612],{"class":619,"line":611},[617,59609,712],{"class":622},[617,59611,730],{"class":626},[617,59613,649],{"class":622},[484,59615,902],{"id":901},[907,59617,59618,59628],{},[910,59619,59620],{},[913,59621,59622,59624,59626],{},[916,59623,918],{"align":977},[916,59625,921],{"align":977},[916,59627,924],{},[926,59629,59630,59641,59652,59663,59674,59686,59698,59710,59723,59735,59747,59758],{},[913,59631,59632,59636,59639],{},[931,59633,59634],{"align":977},[1649,59635,58463],{},[931,59637,59638],{"align":977},"The font data or font name to use for the text.",[931,59640],{},[913,59642,59643,59647,59650],{},[931,59644,59645],{"align":977},[1649,59646,27337],{},[931,59648,59649],{"align":977},"The text to display.",[931,59651],{},[913,59653,59654,59658,59661],{},[931,59655,59656],{"align":977},[1649,59657,14703],{},[931,59659,59660],{"align":977},"The size of the text.",[931,59662,1926],{},[913,59664,59665,59669,59672],{},[931,59666,59667],{"align":977},[1649,59668,37723],{},[931,59670,59671],{"align":977},"The height of the text.",[931,59673,5709],{},[913,59675,59676,59681,59684],{},[931,59677,59678],{"align":977},[1649,59679,59680],{},"curveSegments",[931,59682,59683],{"align":977},"The number of curve segments to use when generating the text geometry.",[931,59685,10759],{},[913,59687,59688,59693,59696],{},[931,59689,59690],{"align":977},[1649,59691,59692],{},"bevelEnabled",[931,59694,59695],{"align":977},"A flag indicating whether beveling should be enabled for the text.",[931,59697,941],{},[913,59699,59700,59705,59708],{},[931,59701,59702],{"align":977},[1649,59703,59704],{},"bevelThickness",[931,59706,59707],{"align":977},"The thickness of the beveled edge on the text.",[931,59709,9692],{},[913,59711,59712,59717,59720],{},[931,59713,59714],{"align":977},[1649,59715,59716],{},"bevelSize",[931,59718,59719],{"align":977},"The size of the beveled edge on the text.",[931,59721,59722],{},"0.02",[913,59724,59725,59730,59733],{},[931,59726,59727],{"align":977},[1649,59728,59729],{},"bevelOffset",[931,59731,59732],{"align":977},"The offset of the beveled edge on the text.",[931,59734,945],{},[913,59736,59737,59742,59745],{},[931,59738,59739],{"align":977},[1649,59740,59741],{},"bevelSegments",[931,59743,59744],{"align":977},"The number of bevel segments to use when generating the text geometry.",[931,59746,8408],{},[913,59748,59749,59753,59756],{},[931,59750,59751],{"align":977},[1649,59752,26243],{},[931,59754,59755],{"align":977},"To center the text",[931,59757,951],{},[913,59759,59760,59765,59768],{},[931,59761,59762],{"align":977},[1649,59763,59764],{},"needUpdates",[931,59766,59767],{"align":977},"This props add reactivity",[931,59769,951],{},[1307,59771,59772],{},"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":556,"searchDepth":557,"depth":558,"links":59774},[59775,59776],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},"Render text in 3D using TextGeometry.",{},{"title":441,"description":59777},"sdYCewwuqrXIt1Ti234B-8w4L1gJgGQcw62huYPBpjc",[59782,60328,60623,60992,62050,62687,63287],{"id":59783,"title":451,"body":59784,"description":60324,"extension":571,"links":572,"meta":60325,"navigation":574,"path":452,"seo":60326,"stem":453,"__hash__":60327},"docs/2.api/miscellaneous/bounds.md",{"type":481,"value":59785,"toc":60317},[59786,59791,59798,59816,59818,60157,60159,60287,60290,60304,60308,60314],[2275,59787,59788],{},[59789,59790],"miscellaneous-bounds",{},[594,59792,59793,59794,59797],{},"Calculates a boundary box and centers the camera accordingly. Its ",[598,59795,59796],{},"lookAt"," method accepts a target to look at imperatively e.g., after a click.",[1985,59799,59800,59802],{},[594,59801,46726],{},[606,59803,59804],{"className":608,"code":2010,"language":613,"meta":556,"style":556},[598,59805,59806],{"__ignoreMap":556},[617,59807,59808,59810,59812,59814],{"class":619,"line":557},[617,59809,623],{"class":622},[617,59811,775],{"class":626},[617,59813,1831],{"class":630},[617,59815,767],{"class":622},[484,59817,15],{"id":604},[606,59819,59822],{"className":608,"code":59820,"highlights":59821,"language":613,"meta":556,"style":556},"\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",[688,725,735,770,780,785,612,2634],[598,59823,59824,59844,59862,59886,59904,59908,59922,59936,59940,59952,59981,59986,59994,59998,60006,60014,60032,60042,60079,60108,60116,60124,60132,60141,60149],{"__ignoreMap":556},[617,59825,59826,59828,59830,59832,59834,59836,59838,59840,59842],{"class":619,"line":557},[617,59827,623],{"class":622},[617,59829,627],{"class":626},[617,59831,631],{"class":630},[617,59833,634],{"class":630},[617,59835,637],{"class":622},[617,59837,640],{"class":622},[617,59839,644],{"class":643},[617,59841,640],{"class":622},[617,59843,649],{"class":622},[617,59845,59846,59848,59850,59852,59854,59856,59858,59860],{"class":619,"line":558},[617,59847,657],{"class":656},[617,59849,660],{"class":622},[617,59851,695],{"class":663},[617,59853,673],{"class":622},[617,59855,676],{"class":656},[617,59857,679],{"class":622},[617,59859,704],{"class":643},[617,59861,685],{"class":622},[617,59863,59865,59867,59869,59872,59874,59876,59878,59880,59882,59884],{"class":59864,"line":688},[619,653],[617,59866,657],{"class":656},[617,59868,660],{"class":622},[617,59870,59871],{"class":663}," Bounds",[617,59873,667],{"class":622},[617,59875,670],{"class":663},[617,59877,673],{"class":622},[617,59879,676],{"class":656},[617,59881,679],{"class":622},[617,59883,682],{"class":643},[617,59885,685],{"class":622},[617,59887,59888,59890,59892,59894,59896,59898,59900,59902],{"class":619,"line":709},[617,59889,657],{"class":656},[617,59891,660],{"class":622},[617,59893,3478],{"class":663},[617,59895,673],{"class":622},[617,59897,676],{"class":656},[617,59899,679],{"class":622},[617,59901,613],{"class":643},[617,59903,685],{"class":622},[617,59905,59906],{"class":619,"line":719},[617,59907,722],{"emptyLinePlaceholder":574},[617,59909,59911,59913,59916,59918,59920],{"class":59910,"line":725},[619,653],[617,59912,2395],{"class":630},[617,59914,59915],{"class":663}," boundsRef ",[617,59917,637],{"class":622},[617,59919,3478],{"class":2414},[617,59921,6515],{"class":663},[617,59923,59925,59927,59930,59932,59934],{"class":59924,"line":735},[619,653],[617,59926,2395],{"class":630},[617,59928,59929],{"class":663}," objectRef ",[617,59931,637],{"class":622},[617,59933,3478],{"class":2414},[617,59935,6515],{"class":663},[617,59937,59938],{"class":619,"line":758},[617,59939,722],{"emptyLinePlaceholder":574},[617,59941,59943,59945,59948,59950],{"class":59942,"line":770},[619,653],[617,59944,36534],{"class":630},[617,59946,59947],{"class":2414}," focusObject",[617,59949,3654],{"class":622},[617,59951,1184],{"class":622},[617,59953,59955,59958,59960,59962,59964,59966,59968,59970,59972,59975,59977,59979],{"class":59954,"line":780},[619,653],[617,59956,59957],{"class":663}," boundsRef",[617,59959,1126],{"class":622},[617,59961,3665],{"class":663},[617,59963,3668],{"class":622},[617,59965,24395],{"class":663},[617,59967,1126],{"class":622},[617,59969,59796],{"class":2414},[617,59971,2417],{"class":626},[617,59973,59974],{"class":663},"objectRef",[617,59976,1126],{"class":622},[617,59978,3665],{"class":663},[617,59980,2428],{"class":626},[617,59982,59984],{"class":59983,"line":785},[619,653],[617,59985,1305],{"class":622},[617,59987,59988,59990,59992],{"class":619,"line":807},[617,59989,712],{"class":622},[617,59991,627],{"class":626},[617,59993,649],{"class":622},[617,59995,59996],{"class":619,"line":611},[617,59997,722],{"emptyLinePlaceholder":574},[617,59999,60000,60002,60004],{"class":619,"line":830},[617,60001,623],{"class":622},[617,60003,730],{"class":626},[617,60005,649],{"class":622},[617,60007,60008,60010,60012],{"class":619,"line":841},[617,60009,738],{"class":622},[617,60011,741],{"class":626},[617,60013,649],{"class":622},[617,60015,60016,60018,60020,60022,60024,60026,60028,60030],{"class":619,"line":852},[617,60017,761],{"class":622},[617,60019,764],{"class":626},[617,60021,1465],{"class":630},[617,60023,637],{"class":622},[617,60025,640],{"class":622},[617,60027,7425],{"class":643},[617,60029,640],{"class":622},[617,60031,767],{"class":622},[617,60033,60034,60036,60038,60040],{"class":619,"line":862},[617,60035,761],{"class":622},[617,60037,775],{"class":626},[617,60039,1831],{"class":630},[617,60041,767],{"class":622},[617,60043,60045,60047,60049,60051,60053,60055,60058,60060,60063,60066,60069,60071,60073,60075,60077],{"class":60044,"line":612},[619,653],[617,60046,761],{"class":622},[617,60048,451],{"class":626},[617,60050,3852],{"class":630},[617,60052,637],{"class":622},[617,60054,640],{"class":622},[617,60056,60057],{"class":643},"boundsRef",[617,60059,640],{"class":622},[617,60061,60062],{"class":630}," clip",[617,60064,60065],{"class":630}," use-mounted",[617,60067,60068],{"class":630}," :offset",[617,60070,637],{"class":622},[617,60072,640],{"class":622},[617,60074,2531],{"class":643},[617,60076,640],{"class":622},[617,60078,649],{"class":622},[617,60080,60081,60083,60085,60087,60089,60091,60093,60095,60097,60099,60101,60104,60106],{"class":619,"line":882},[617,60082,833],{"class":622},[617,60084,836],{"class":626},[617,60086,3852],{"class":630},[617,60088,637],{"class":622},[617,60090,640],{"class":622},[617,60092,59974],{"class":643},[617,60094,640],{"class":622},[617,60096,35050],{"class":630},[617,60098,637],{"class":622},[617,60100,640],{"class":622},[617,60102,60103],{"class":643},"(e) => focusObject()",[617,60105,640],{"class":622},[617,60107,649],{"class":622},[617,60109,60110,60112,60114],{"class":619,"line":892},[617,60111,844],{"class":622},[617,60113,847],{"class":626},[617,60115,767],{"class":622},[617,60117,60118,60120,60122],{"class":619,"line":2605},[617,60119,844],{"class":622},[617,60121,857],{"class":626},[617,60123,767],{"class":622},[617,60125,60126,60128,60130],{"class":619,"line":2614},[617,60127,865],{"class":622},[617,60129,836],{"class":626},[617,60131,649],{"class":622},[617,60133,60135,60137,60139],{"class":60134,"line":2634},[619,653],[617,60136,875],{"class":622},[617,60138,451],{"class":626},[617,60140,649],{"class":622},[617,60142,60143,60145,60147],{"class":619,"line":2643},[617,60144,885],{"class":622},[617,60146,741],{"class":626},[617,60148,649],{"class":622},[617,60150,60151,60153,60155],{"class":619,"line":2652},[617,60152,712],{"class":622},[617,60154,730],{"class":626},[617,60156,649],{"class":622},[484,60158,902],{"id":901},[907,60160,60161,60171],{},[910,60162,60163],{},[913,60164,60165,60167,60169],{},[916,60166,8069],{"align":977},[916,60168,921],{"align":977},[916,60170,924],{},[926,60172,60173,60190,60210,60227,60247,60268],{},[913,60174,60175,60180,60186],{},[931,60176,60177],{"align":977},[598,60178,60179],{},"duration",[931,60181,60182,60183,60185],{"align":977},"Duration of the ",[598,60184,59796],{}," animation in seconds",[931,60187,60188],{},[598,60189,11711],{},[913,60191,60192,60196,60206],{},[931,60193,60194],{"align":977},[598,60195,37286],{},[931,60197,60198,60199,60201,60202,5591,60204],{"align":977},"Additional distance from the target when using ",[598,60200,59796],{}," with a ",[598,60203,7598],{},[598,60205,7602],{},[931,60207,60208],{},[598,60209,5709],{},[913,60211,60212,60217,60223],{},[931,60213,60214],{"align":977},[598,60215,60216],{},"useResize",[931,60218,60219,60220,60222],{"align":977},"Whether to re",[598,60221,59796],{}," the last target when the screen is resized",[931,60224,60225],{},[598,60226,951],{},[913,60228,60229,60234,60243],{},[931,60230,60231],{"align":977},[598,60232,60233],{},"useMounted",[931,60235,60236,60237,60239,60240,60242],{"align":977},"Whether to ",[598,60238,59796],{}," the ",[598,60241,451],{}," object when the component is mounts",[931,60244,60245],{},[598,60246,951],{},[913,60248,60249,60254,60264],{},[931,60250,60251],{"align":977},[598,60252,60253],{},"clip",[931,60255,60256,60257,3043,60259,60261,60262],{"align":977},"Whether to adjust the camera's ",[598,60258,39913],{},[598,60260,37737],{}," settings when using ",[598,60263,59796],{},[931,60265,60266],{},[598,60267,951],{},[913,60269,60270,60275,60284],{},[931,60271,60272],{"align":977},[598,60273,60274],{},"easing",[931,60276,60277,60278,60281,60282],{"align":977},"Animation's easing function. ",[598,60279,60280],{},"t"," and the returned value should be in the interval ",[598,60283,50226],{},[931,60285,60286],{},"Cubic ease out",[484,60288,59796],{"id":60289},"lookat",[594,60291,60292,3174,60295,60297,60298,1652,60300,5591,60302,1126],{},[598,60293,60294],{},"\u003CBounds />",[598,60296,59796],{}," points the camera at its first argument: an ",[598,60299,7602],{},[598,60301,7598],{},[598,60303,8120],{},[4031,60305,60307],{"id":60306},"method-signatures","Method Signatures",[606,60309,60312],{"className":60310,"code":60311,"language":27337},[27335],"/**\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",[598,60313,60311],{"__ignoreMap":556},[1307,60315,60316],{},"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}",{"title":556,"searchDepth":557,"depth":558,"links":60318},[60319,60320,60321],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},{"id":60289,"depth":558,"text":59796,"children":60322},[60323],{"id":60306,"depth":688,"text":60307},"Calculate boundary box and center camera accordingly.",{},{"title":451,"description":60324},"hHyluEwt8akq_4Cca4tkdoVEZlteuogJu8G43SPaETs",{"id":60329,"title":455,"body":60330,"description":60619,"extension":571,"links":572,"meta":60620,"navigation":574,"path":456,"seo":60621,"stem":457,"__hash__":60622},"docs/2.api/miscellaneous/global-audio.md",{"type":481,"value":60331,"toc":60614},[60332,60340,60347,60349,60487,60493,60495,60588,60590,60612],[594,60333,2756,60334,8223,60336,60339],{},[598,60335,7297],{},[598,60337,60338],{},"\u003CGlobalAudio />"," component that serves to easily add a global sound to your scene.",[594,60341,27342,60342],{},[1120,60343,60346],{"href":60344,"rel":60345},"https://threejs.org/docs/index.html?q=audio#api/en/audio/Audio",[1124],"Audio",[484,60348,15],{"id":604},[606,60350,60353],{"className":608,"code":60351,"highlights":60352,"language":613,"meta":556,"style":556},"\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",[688,770],[598,60354,60355,60365,60383,60403,60411,60415,60423,60431,60450,60471,60479],{"__ignoreMap":556},[617,60356,60357,60359,60361,60363],{"class":619,"line":557},[617,60358,623],{"class":622},[617,60360,627],{"class":626},[617,60362,631],{"class":630},[617,60364,649],{"class":622},[617,60366,60367,60369,60371,60373,60375,60377,60379,60381],{"class":619,"line":558},[617,60368,657],{"class":656},[617,60370,660],{"class":622},[617,60372,695],{"class":663},[617,60374,673],{"class":622},[617,60376,676],{"class":656},[617,60378,679],{"class":622},[617,60380,704],{"class":643},[617,60382,685],{"class":622},[617,60384,60386,60388,60390,60393,60395,60397,60399,60401],{"class":60385,"line":688},[619,653],[617,60387,657],{"class":656},[617,60389,660],{"class":622},[617,60391,60392],{"class":663}," GlobalAudio",[617,60394,673],{"class":622},[617,60396,676],{"class":656},[617,60398,679],{"class":622},[617,60400,682],{"class":643},[617,60402,685],{"class":622},[617,60404,60405,60407,60409],{"class":619,"line":709},[617,60406,712],{"class":622},[617,60408,627],{"class":626},[617,60410,649],{"class":622},[617,60412,60413],{"class":619,"line":719},[617,60414,722],{"emptyLinePlaceholder":574},[617,60416,60417,60419,60421],{"class":619,"line":725},[617,60418,623],{"class":622},[617,60420,730],{"class":626},[617,60422,649],{"class":622},[617,60424,60425,60427,60429],{"class":619,"line":735},[617,60426,738],{"class":622},[617,60428,741],{"class":626},[617,60430,649],{"class":622},[617,60432,60433,60435,60437,60439,60441,60443,60446,60448],{"class":619,"line":758},[617,60434,761],{"class":622},[617,60436,764],{"class":626},[617,60438,1465],{"class":630},[617,60440,637],{"class":622},[617,60442,640],{"class":622},[617,60444,60445],{"class":643},"[0, 0, 7.5]",[617,60447,640],{"class":622},[617,60449,767],{"class":622},[617,60451,60453,60455,60457,60460,60462,60464,60467,60469],{"class":60452,"line":770},[619,653],[617,60454,761],{"class":622},[617,60456,455],{"class":626},[617,60458,60459],{"class":630}," :src",[617,60461,637],{"class":622},[617,60463,640],{"class":622},[617,60465,60466],{"class":643},"exampleAudio",[617,60468,640],{"class":622},[617,60470,767],{"class":622},[617,60472,60473,60475,60477],{"class":619,"line":780},[617,60474,885],{"class":622},[617,60476,741],{"class":626},[617,60478,649],{"class":622},[617,60480,60481,60483,60485],{"class":619,"line":785},[617,60482,712],{"class":622},[617,60484,730],{"class":626},[617,60486,649],{"class":622},[594,60488,60489,60490,60492],{},"*The ",[598,60491,22164],{}," prop is required",[484,60494,902],{"id":901},[907,60496,60497,60507],{},[910,60498,60499],{},[913,60500,60501,60503,60505],{},[916,60502,918],{"align":977},[916,60504,921],{"align":977},[916,60506,924],{},[926,60508,60509,60520,60535,60547,60560,60574],{},[913,60510,60511,60515,60518],{},[931,60512,60513],{"align":977},[598,60514,22164],{},[931,60516,60517],{"align":977},"Path to your audio file",[931,60519],{},[913,60521,60522,60527,60530],{},[931,60523,60524],{"align":977},[598,60525,60526],{},"playTrigger",[931,60528,60529],{"align":977},"Id of the DOM element that triggers the play/pause state",[931,60531,60532],{},[598,60533,60534],{},"renderer.domElement",[913,60536,60537,60542,60545],{},[931,60538,60539],{"align":977},[598,60540,60541],{},"stopTrigger",[931,60543,60544],{"align":977},"Id of the DOM element that triggers the stop state",[931,60546],{},[913,60548,60549,60553,60556],{},[931,60550,60551],{"align":977},[598,60552,23538],{},[931,60554,60555],{"align":977},"If the audio must be replayed when ends",[931,60557,60558],{},[598,60559,951],{},[913,60561,60562,60567,60570],{},[931,60563,60564],{"align":977},[598,60565,60566],{},"volume",[931,60568,60569],{"align":977},"Volume of the audio",[931,60571,60572],{},[598,60573,1926],{},[913,60575,60576,60581,60584],{},[931,60577,60578],{"align":977},[598,60579,60580],{},"playbackRate",[931,60582,60583],{"align":977},"PlaybackRate of the audio",[931,60585,60586],{},[598,60587,1854],{},[484,60589,12330],{"id":12329},[907,60591,60592,60600],{},[910,60593,60594],{},[913,60595,60596,60598],{},[916,60597,5739],{"align":977},[916,60599,921],{"align":977},[926,60601,60602],{},[913,60603,60604,60609],{},[931,60605,60606],{"align":977},[598,60607,60608],{},"isPlaying",[931,60610,60611],{"align":977},"Dispatched when the Audio change its state (play, pause or stop)",[1307,60613,12427],{},{"title":556,"searchDepth":557,"depth":558,"links":60615},[60616,60617,60618],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},{"id":12329,"depth":558,"text":12330},"Add global sound to your scene.",{},{"title":455,"description":60619},"3JUUNGnzyd_UYSpUOzquhfgUDt2njg-AUZ8wXPFhXKM",{"id":60624,"title":459,"body":60625,"description":60988,"extension":571,"links":572,"meta":60989,"navigation":574,"path":460,"seo":60990,"stem":461,"__hash__":60991},"docs/2.api/miscellaneous/mouse-parallax.md",{"type":481,"value":60626,"toc":60984},[60627,60632,60644,60646,60652,60660,60669,60674,60921,60923,60982],[588,60628,60629],{},[60630,60631],"miscellaneous-mouse-parallax",{},[594,60633,60634,60637,60638,60643],{},[598,60635,60636],{},"\u003CMouseParallax />"," is a component that allows you to easily create a ",[1120,60639,60642],{"href":60640,"rel":60641},"https://en.wikipedia.org/wiki/Parallax",[1124],"parallax"," effect. The camera will update automatically according to the mouse position.",[484,60645,15],{"id":604},[594,60647,60648,60649,60651],{},"You only need to import and add it to your template as ",[598,60650,60636],{},". Additionally, you can pass the following props:",[594,60653,60654,60656,60657,1126],{},[598,60655,27288],{}," 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: ",[598,60658,60659],{},":factor=[x,y]",[594,60661,60662,60665,60666,1126],{},[598,60663,60664],{},"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: ",[598,60667,60668],{},":ease=[x,y]",[594,60670,60671,60673],{},[598,60672,14689],{}," is a boolean that enables movement based on the position of the mouse on the canvas rather than the window.",[606,60675,60678],{"className":608,"code":60676,"highlights":60677,"language":613,"meta":556,"style":556},"\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",[558,807],[598,60679,60680,60700,60726,60746,60754,60758,60766,60784,60813,60821,60839,60847,60879,60887,60905,60913],{"__ignoreMap":556},[617,60681,60682,60684,60686,60688,60690,60692,60694,60696,60698],{"class":619,"line":557},[617,60683,623],{"class":622},[617,60685,627],{"class":626},[617,60687,631],{"class":630},[617,60689,634],{"class":630},[617,60691,637],{"class":622},[617,60693,640],{"class":622},[617,60695,644],{"class":643},[617,60697,640],{"class":622},[617,60699,649],{"class":622},[617,60701,60703,60705,60707,60710,60712,60714,60716,60718,60720,60722,60724],{"class":60702,"line":558},[619,653],[617,60704,657],{"class":656},[617,60706,660],{"class":622},[617,60708,60709],{"class":663}," MouseParallax",[617,60711,667],{"class":622},[617,60713,37408],{"class":663},[617,60715,673],{"class":622},[617,60717,676],{"class":656},[617,60719,8270],{"class":622},[617,60721,682],{"class":643},[617,60723,640],{"class":622},[617,60725,8277],{"class":622},[617,60727,60728,60730,60732,60734,60736,60738,60740,60742,60744],{"class":619,"line":688},[617,60729,657],{"class":656},[617,60731,660],{"class":622},[617,60733,695],{"class":663},[617,60735,673],{"class":622},[617,60737,676],{"class":656},[617,60739,8270],{"class":622},[617,60741,704],{"class":643},[617,60743,640],{"class":622},[617,60745,8277],{"class":622},[617,60747,60748,60750,60752],{"class":619,"line":709},[617,60749,712],{"class":622},[617,60751,627],{"class":626},[617,60753,649],{"class":622},[617,60755,60756],{"class":619,"line":719},[617,60757,722],{"emptyLinePlaceholder":574},[617,60759,60760,60762,60764],{"class":619,"line":725},[617,60761,623],{"class":622},[617,60763,730],{"class":626},[617,60765,649],{"class":622},[617,60767,60768,60770,60772,60774,60776,60778,60780,60782],{"class":619,"line":735},[617,60769,738],{"class":622},[617,60771,741],{"class":626},[617,60773,744],{"class":630},[617,60775,637],{"class":622},[617,60777,640],{"class":622},[617,60779,9840],{"class":643},[617,60781,640],{"class":622},[617,60783,649],{"class":622},[617,60785,60786,60788,60790,60792,60794,60796,60798,60800,60802,60804,60806,60809,60811],{"class":619,"line":758},[617,60787,761],{"class":622},[617,60789,764],{"class":626},[617,60791,1465],{"class":630},[617,60793,637],{"class":622},[617,60795,640],{"class":622},[617,60797,60445],{"class":643},[617,60799,640],{"class":622},[617,60801,29287],{"class":630},[617,60803,637],{"class":622},[617,60805,640],{"class":622},[617,60807,60808],{"class":643},"75",[617,60810,640],{"class":622},[617,60812,767],{"class":622},[617,60814,60815,60817,60819],{"class":619,"line":770},[617,60816,761],{"class":622},[617,60818,32672],{"class":626},[617,60820,649],{"class":622},[617,60822,60823,60825,60827,60829,60831,60833,60835,60837],{"class":619,"line":780},[617,60824,833],{"class":622},[617,60826,11368],{"class":626},[617,60828,2669],{"class":630},[617,60830,637],{"class":622},[617,60832,640],{"class":622},[617,60834,11377],{"class":643},[617,60836,640],{"class":622},[617,60838,767],{"class":622},[617,60840,60841,60843,60845],{"class":619,"line":785},[617,60842,875],{"class":622},[617,60844,32672],{"class":626},[617,60846,649],{"class":622},[617,60848,60850,60852,60854,60857,60859,60861,60863,60865,60868,60870,60872,60875,60877],{"class":60849,"line":807},[619,653],[617,60851,761],{"class":622},[617,60853,459],{"class":626},[617,60855,60856],{"class":630}," :factor",[617,60858,637],{"class":622},[617,60860,640],{"class":622},[617,60862,10759],{"class":643},[617,60864,640],{"class":622},[617,60866,60867],{"class":630}," :ease",[617,60869,637],{"class":622},[617,60871,640],{"class":622},[617,60873,60874],{"class":643},"[3, 0.1]",[617,60876,640],{"class":622},[617,60878,767],{"class":622},[617,60880,60881,60883,60885],{"class":619,"line":611},[617,60882,761],{"class":622},[617,60884,8436],{"class":626},[617,60886,767],{"class":622},[617,60888,60889,60891,60893,60895,60897,60899,60901,60903],{"class":619,"line":830},[617,60890,761],{"class":622},[617,60892,8455],{"class":626},[617,60894,1465],{"class":630},[617,60896,637],{"class":622},[617,60898,640],{"class":622},[617,60900,11412],{"class":643},[617,60902,640],{"class":622},[617,60904,767],{"class":622},[617,60906,60907,60909,60911],{"class":619,"line":841},[617,60908,885],{"class":622},[617,60910,741],{"class":626},[617,60912,649],{"class":622},[617,60914,60915,60917,60919],{"class":619,"line":852},[617,60916,712],{"class":622},[617,60918,730],{"class":626},[617,60920,649],{"class":622},[484,60922,902],{"id":901},[907,60924,60925,60935],{},[910,60926,60927],{},[913,60928,60929,60931,60933],{},[916,60930,918],{"align":977},[916,60932,921],{"align":977},[916,60934,924],{},[926,60936,60937,60949,60960,60971],{},[913,60938,60939,60944,60947],{},[931,60940,60941],{"align":977},[1649,60942,60943],{},"disabled",[931,60945,60946],{"align":977},"Enable or disable the effect",[931,60948,951],{},[913,60950,60951,60955,60958],{},[931,60952,60953],{"align":977},[1649,60954,27288],{},[931,60956,60957],{"align":977},"Increase the range of the parallax",[931,60959,54955],{},[913,60961,60962,60966,60969],{},[931,60963,60964],{"align":977},[1649,60965,60664],{},[931,60967,60968],{"align":977},"Increase the camera movement speed",[931,60970,2143],{},[913,60972,60973,60977,60980],{},[931,60974,60975],{"align":977},[1649,60976,14689],{},[931,60978,60979],{"align":977},"Whether the mouse coordinates are calculated from the element or the window",[931,60981,951],{},[1307,60983,1624],{},{"title":556,"searchDepth":557,"depth":558,"links":60985},[60986,60987],{"id":604,"depth":558,"text":15},{"id":901,"depth":558,"text":902},"Create parallax effects based on mouse movement.",{},{"title":459,"description":60988},"DlWi-PCiTKTosw5xB5jxhs3p0vmhFRnKBmSiLiGYpy8",{"id":60993,"title":463,"body":60994,"description":62046,"extension":571,"links":572,"meta":62047,"navigation":574,"path":464,"seo":62048,"stem":465,"__hash__":62049},"docs/2.api/miscellaneous/positional-audio.md",{"type":481,"value":60995,"toc":62039},[60996,61001,61014,61024,61026,61041,61307,61335,61339,61345,61347,61541,61543,61615,61845,62007,62009,62036],[588,60997,60998],{},[60999,61000],"miscellaneous-positional-audio",{},[594,61002,2756,61003,57384,61005,61009,61010,61013],{},[598,61004,7297],{},[1120,61006,463],{"href":61007,"rel":61008},"https://threejs.org/docs/index.html?q=posi#api/en/audio/PositionalAudio",[1124],".\n",[598,61011,61012],{},"\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.",[594,61015,61016,61018,61019,33516],{},[598,61017,61012],{}," includes a helper 🛠️ that allows you to view the directional cone of te audio. The helper is based on the ",[1120,61020,61023],{"href":61021,"rel":61022},"https://threejs.org/docs/#examples/en/helpers/PositionalAudioHelper",[1124],"PositionalAudioHelper",[484,61025,15],{"id":604},[594,61027,2756,61028,61030,61031,61033,61034,61036,61037,61040],{},[598,61029,61012],{}," 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 ",[598,61032,61012],{}," component and set the ",[598,61035,56378],{},". It must be wrapped around the ",[598,61038,61039],{},"\u003CSuspense>"," component to enable it to load your audio asynchronously. 💥",[606,61042,61045],{"className":608,"code":61043,"highlights":61044,"language":613,"meta":556,"style":556},"\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",[558,862,612,882],[598,61046,61047,61067,61091,61113,61117,61134,61138,61150,61165,61171,61179,61183,61191,61199,61217,61225,61233,61241,61256,61271,61275,61283,61291,61299],{"__ignoreMap":556},[617,61048,61049,61051,61053,61055,61057,61059,61061,61063,61065],{"class":619,"line":557},[617,61050,623],{"class":622},[617,61052,627],{"class":626},[617,61054,631],{"class":630},[617,61056,634],{"class":630},[617,61058,637],{"class":622},[617,61060,640],{"class":622},[617,61062,644],{"class":643},[617,61064,640],{"class":622},[617,61066,649],{"class":622},[617,61068,61070,61072,61074,61076,61078,61081,61083,61085,61087,61089],{"class":61069,"line":558},[619,653],[617,61071,657],{"class":656},[617,61073,660],{"class":622},[617,61075,1377],{"class":663},[617,61077,667],{"class":622},[617,61079,61080],{"class":663}," PositionalAudio",[617,61082,673],{"class":622},[617,61084,676],{"class":656},[617,61086,679],{"class":622},[617,61088,682],{"class":643},[617,61090,685],{"class":622},[617,61092,61093,61095,61097,61099,61101,61103,61105,61107,61109,61111],{"class":619,"line":688},[617,61094,657],{"class":656},[617,61096,660],{"class":622},[617,61098,21264],{"class":663},[617,61100,667],{"class":622},[617,61102,3478],{"class":663},[617,61104,673],{"class":622},[617,61106,676],{"class":656},[617,61108,679],{"class":622},[617,61110,613],{"class":643},[617,61112,685],{"class":622},[617,61114,61115],{"class":619,"line":709},[617,61116,722],{"emptyLinePlaceholder":574},[617,61118,61119,61121,61124,61126,61128,61130,61132],{"class":619,"line":719},[617,61120,2395],{"class":630},[617,61122,61123],{"class":663}," positionalAudioRef ",[617,61125,637],{"class":622},[617,61127,3478],{"class":2414},[617,61129,2417],{"class":663},[617,61131,3636],{"class":622},[617,61133,2428],{"class":663},[617,61135,61136],{"class":619,"line":725},[617,61137,722],{"emptyLinePlaceholder":574},[617,61139,61140,61142,61144,61146,61148],{"class":619,"line":735},[617,61141,21311],{"class":2414},[617,61143,2417],{"class":663},[617,61145,3654],{"class":622},[617,61147,3657],{"class":630},[617,61149,1184],{"class":622},[617,61151,61152,61155,61157,61159,61161,61163],{"class":619,"line":758},[617,61153,61154],{"class":663}," positionalAudioRef",[617,61156,3668],{"class":622},[617,61158,3665],{"class":663},[617,61160,3668],{"class":622},[617,61162,20391],{"class":2414},[617,61164,6515],{"class":626},[617,61166,61167,61169],{"class":619,"line":770},[617,61168,2408],{"class":622},[617,61170,2428],{"class":663},[617,61172,61173,61175,61177],{"class":619,"line":780},[617,61174,712],{"class":622},[617,61176,627],{"class":626},[617,61178,649],{"class":622},[617,61180,61181],{"class":619,"line":785},[617,61182,722],{"emptyLinePlaceholder":574},[617,61184,61185,61187,61189],{"class":619,"line":807},[617,61186,623],{"class":622},[617,61188,730],{"class":626},[617,61190,649],{"class":622},[617,61192,61193,61195,61197],{"class":619,"line":611},[617,61194,738],{"class":622},[617,61196,741],{"class":626},[617,61198,649],{"class":622},[617,61200,61201,61203,61205,61207,61209,61211,61213,61215],{"class":619,"line":830},[617,61202,761],{"class":622},[617,61204,201],{"class":626},[617,61206,1939],{"class":630},[617,61208,637],{"class":622},[617,61210,640],{"class":622},[617,61212,1946],{"class":643},[617,61214,640],{"class":622},[617,61216,649],{"class":622},[617,61218,61219,61221,61223],{"class":619,"line":841},[617,61220,833],{"class":622},[617,61222,857],{"class":626},[617,61224,767],{"class":622},[617,61226,61227,61229,61231],{"class":619,"line":852},[617,61228,833],{"class":622},[617,61230,19264],{"class":626},[617,61232,649],{"class":622},[617,61234,61236,61238],{"class":61235,"line":862},[619,653],[617,61237,844],{"class":622},[617,61239,61240],{"class":626},"PositionalAudio\n",[617,61242,61244,61247,61249,61251,61254],{"class":61243,"line":612},[619,653],[617,61245,61246],{"class":630}," ref",[617,61248,637],{"class":622},[617,61250,640],{"class":622},[617,61252,61253],{"class":643},"positionalAudioRef",[617,61255,3111],{"class":622},[617,61257,61259,61262,61264,61266,61269],{"class":61258,"line":882},[619,653],[617,61260,61261],{"class":630}," url",[617,61263,637],{"class":622},[617,61265,640],{"class":622},[617,61267,61268],{"class":643},"your-sound.mp3",[617,61270,3111],{"class":622},[617,61272,61273],{"class":619,"line":892},[617,61274,50247],{"class":622},[617,61276,61277,61279,61281],{"class":619,"line":2605},[617,61278,865],{"class":622},[617,61280,19264],{"class":626},[617,61282,649],{"class":622},[617,61284,61285,61287,61289],{"class":619,"line":2614},[617,61286,875],{"class":622},[617,61288,201],{"class":626},[617,61290,649],{"class":622},[617,61292,61293,61295,61297],{"class":619,"line":2634},[617,61294,885],{"class":622},[617,61296,741],{"class":626},[617,61298,649],{"class":622},[617,61300,61301,61303,61305],{"class":619,"line":2643},[617,61302,712],{"class":622},[617,61304,730],{"class":626},[617,61306,649],{"class":622},[3179,61308,61309],{},[594,61310,61311,61312,61315,61316,61323,61324,61327,61328,3043,61331,61334],{},"AudioContext is authorized when a user gesture has been made on the page. The property ",[598,61313,61314],{},":autoplay=\"true\""," cannot be activated if no user gesture has been made previously ",[1120,61317,61320],{"href":61318,"rel":61319},"https://goo.gl/7K7WLu",[1124],[598,61321,61322],{},"read more",".\nIf you are sure that there will be a user gesture before your ",[598,61325,61326],{},"\u003CPositionAudio>"," component appears/is created, you can directly add ",[598,61329,61330],{},":ready=\"true\"",[598,61332,61333],{},"autoplay=\"true\""," for a direct launch.",[484,61336,61338],{"id":61337},"how-does-it-work","How does it work?",[8215,61340],{"className":61341,"src":61343,"alt":61344},[61342],"mx-auto","/cientos/sketch.jpg","Diagram explaining how positional audio works",[484,61346,902],{"id":901},[907,61348,61349,61359],{},[910,61350,61351],{},[913,61352,61353,61355,61357],{},[916,61354,918],{"align":977},[916,61356,921],{"align":977},[916,61358,924],{},[926,61360,61361,61377,61398,61418,61451,61469,61484,61501,61520],{},[913,61362,61363,61367,61375],{},[931,61364,61365],{"align":977},[1649,61366,56378],{},[931,61368,61369,55345,61371,61374],{"align":977},[598,61370,3552],{},[1649,61372,61373],{},"required"," — The path or URL to the file.",[931,61376],{},[913,61378,61379,61384,61394],{},[931,61380,61381],{"align":977},[1649,61382,61383],{},"helper",[931,61385,61386,61388,61389,3174,61391],{"align":977},[598,61387,15441],{}," — Selects whether helper mode is enabled. ",[7535,61390],{},[1654,61392,61393],{},"(Useful for visualising the angle of sound propagation)",[931,61395,61396],{},[598,61397,951],{},[913,61399,61400,61404,61414],{},[931,61401,61402],{"align":977},[1649,61403,11571],{},[931,61405,61406,61408,61409],{"align":977},[598,61407,5332],{}," — The distance at which the volume reduction starts taking effect. ",[1654,61410,61411],{},[1649,61412,61413],{},"A non-negative number.",[931,61415,61416],{},[598,61417,1854],{},[913,61419,61420,61425,61447],{},[931,61421,61422],{"align":977},[1649,61423,61424],{},"ready",[931,61426,61427,61429,61430,61432,61433,61436,61437,61440,61441,61444,61445],{"align":977},[598,61428,15441],{}," — Tells ",[598,61431,61012],{}," that ",[598,61434,61435],{},"AudioContext"," is authorised because an user gesture has been made on the page. This is imperative, as ",[598,61438,61439],{},"autoplay"," cannot be activated if no user gesture has been made previously (",[1120,61442,61318],{"href":61318,"rel":61443},[1124],"). ",[7535,61446],{},[931,61448,61449],{},[598,61450,951],{},[913,61452,61453,61457,61465],{},[931,61454,61455],{"align":977},[1649,61456,61439],{},[931,61458,61459,61461,61462,61464],{"align":977},[598,61460,15441],{}," — Selects whether the audio is launched automatically. Please refer to the ",[598,61463,61424],{}," prop for a better understanding of how to use autoplay.",[931,61466,61467],{},[598,61468,951],{},[913,61470,61471,61475,61480],{},[931,61472,61473],{"align":977},[1649,61474,23538],{},[931,61476,61477,61479],{"align":977},[598,61478,15441],{}," — Specifies whether the audio should loop.",[931,61481,61482],{},[598,61483,951],{},[913,61485,61486,61491,61496],{},[931,61487,61488],{"align":977},[1649,61489,61490],{},"innerAngle",[931,61492,61493,61495],{"align":977},[598,61494,5332],{}," — A parameter for directional audio sources, this is an angle, inside of which there will be no volume reduction.",[931,61497,61498],{},[598,61499,61500],{},"360",[913,61502,61503,61508,61516],{},[931,61504,61505],{"align":977},[1649,61506,61507],{},"outerAngle",[931,61509,61510,61512,61513,38103],{"align":977},[598,61511,5332],{}," — A parameter for directional audio sources, this is an angle, outside of which the volume will be reduced to a constant value of ",[598,61514,61515],{},"outerGain",[931,61517,61518],{},[598,61519,945],{},[913,61521,61522,61526,61537],{},[931,61523,61524],{"align":977},[1649,61525,61515],{},[931,61527,61528,61530,61531,61533,61534,61536],{"align":977},[598,61529,5332],{}," — A parameter for directional audio sources, this is the amount of volume reduction outside of the ",[598,61532,61507],{}," prop. When the value is ",[598,61535,945],{}," no sound can be heard.",[931,61538,61539],{},[598,61540,945],{},[484,61542,55472],{"id":55471},[907,61544,61545,61553],{},[910,61546,61547],{},[913,61548,61549,61551],{},[916,61550,5739],{"align":977},[916,61552,921],{"align":977},[926,61554,61555,61567,61580,61593,61606],{},[913,61556,61557,61561],{},[931,61558,61559],{"align":977},[598,61560,24395],{},[931,61562,61563,61564,1126],{"align":977},"Instance reference — Inheritance of ",[1120,61565,463],{"href":61007,"rel":61566},[1124],[913,61568,61569,61574],{},[931,61570,61571],{"align":977},[598,61572,61573],{},"play()",[931,61575,61576,61577],{"align":977},"Play audio — ",[1654,61578,61579],{},"Cannot be fired if audio is already running.",[913,61581,61582,61587],{},[931,61583,61584],{"align":977},[598,61585,61586],{},"pause()",[931,61588,61589,61590],{"align":977},"Pause audio — ",[1654,61591,61592],{},"Cannot be fired if audio is already paused.",[913,61594,61595,61600],{},[931,61596,61597],{"align":977},[598,61598,61599],{},"stop()",[931,61601,61602,61603],{"align":977},"Stop audio — ",[1654,61604,61605],{},"Cannot be fired if audio is already stopped.",[913,61607,61608,61612],{},[931,61609,61610],{"align":977},[598,61611,22427],{},[931,61613,61614],{"align":977},"Dispose component — Deletion of the AudioListener in the camera, disconnection of the audio source and deletion of the PositionalAudioHelper (if it exists).",[606,61616,61620],{"className":61617,"code":61618,"language":61619,"meta":556,"style":556},"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",[598,61621,61622,61638,61642,61666,61670,61694,61716,61720,61750,61754,61781,61812,61841],{"__ignoreMap":556},[617,61623,61624,61626,61628,61630,61632,61634,61636],{"class":619,"line":557},[617,61625,2395],{"class":630},[617,61627,61123],{"class":663},[617,61629,637],{"class":622},[617,61631,3478],{"class":2414},[617,61633,2417],{"class":663},[617,61635,3636],{"class":622},[617,61637,2428],{"class":663},[617,61639,61640],{"class":619,"line":558},[617,61641,722],{"emptyLinePlaceholder":574},[617,61643,61644,61647,61649,61651,61654,61656,61658,61660,61663],{"class":619,"line":688},[617,61645,61646],{"class":663},"console",[617,61648,1126],{"class":622},[617,61650,6839],{"class":2414},[617,61652,61653],{"class":663},"(positionalAudioRef",[617,61655,1126],{"class":622},[617,61657,3665],{"class":663},[617,61659,1126],{"class":622},[617,61661,61662],{"class":663},"instance) ",[617,61664,61665],{"class":1189},"// instance properties\n",[617,61667,61668],{"class":619,"line":709},[617,61669,722],{"emptyLinePlaceholder":574},[617,61671,61672,61674,61677,61679,61681,61684,61686,61688,61690,61692],{"class":619,"line":719},[617,61673,2395],{"class":630},[617,61675,61676],{"class":663}," handlerAudio ",[617,61678,637],{"class":622},[617,61680,3054],{"class":622},[617,61682,61683],{"class":6818},"action",[617,61685,1198],{"class":622},[617,61687,5317],{"class":1180},[617,61689,3320],{"class":622},[617,61691,3657],{"class":630},[617,61693,1184],{"class":622},[617,61695,61696,61698,61700,61702,61704,61706,61708,61710,61712,61714],{"class":619,"line":725},[617,61697,18865],{"class":656},[617,61699,3054],{"class":626},[617,61701,49196],{"class":622},[617,61703,61253],{"class":663},[617,61705,1126],{"class":622},[617,61707,3665],{"class":663},[617,61709,4714],{"class":626},[617,61711,38436],{"class":622},[617,61713,49209],{"class":656},[617,61715,19854],{"class":622},[617,61717,61718],{"class":619,"line":735},[617,61719,722],{"emptyLinePlaceholder":574},[617,61721,61722,61724,61726,61729,61731,61734,61736,61739,61741,61743,61746,61748],{"class":619,"line":758},[617,61723,53826],{"class":630},[617,61725,660],{"class":622},[617,61727,61728],{"class":663}," play",[617,61730,667],{"class":622},[617,61732,61733],{"class":663}," pause",[617,61735,667],{"class":622},[617,61737,61738],{"class":663}," stop",[617,61740,673],{"class":622},[617,61742,2411],{"class":622},[617,61744,61745],{"class":663}," positionalAudioRef",[617,61747,1126],{"class":622},[617,61749,21487],{"class":663},[617,61751,61752],{"class":619,"line":770},[617,61753,722],{"emptyLinePlaceholder":574},[617,61755,61756,61758,61760,61762,61764,61766,61769,61771,61773,61775,61777,61779],{"class":619,"line":780},[617,61757,18865],{"class":656},[617,61759,3054],{"class":626},[617,61761,61683],{"class":663},[617,61763,18886],{"class":622},[617,61765,679],{"class":622},[617,61767,61768],{"class":643},"play",[617,61770,2420],{"class":622},[617,61772,4714],{"class":626},[617,61774,38436],{"class":622},[617,61776,61728],{"class":2414},[617,61778,6964],{"class":626},[617,61780,1305],{"class":622},[617,61782,61783,61786,61789,61791,61793,61795,61797,61800,61802,61804,61806,61808,61810],{"class":619,"line":785},[617,61784,61785],{"class":656}," else",[617,61787,61788],{"class":656}," if",[617,61790,3054],{"class":626},[617,61792,61683],{"class":663},[617,61794,18886],{"class":622},[617,61796,679],{"class":622},[617,61798,61799],{"class":643},"pause",[617,61801,2420],{"class":622},[617,61803,4714],{"class":626},[617,61805,38436],{"class":622},[617,61807,61733],{"class":2414},[617,61809,6964],{"class":626},[617,61811,1305],{"class":622},[617,61813,61814,61816,61818,61820,61822,61824,61826,61829,61831,61833,61835,61837,61839],{"class":619,"line":807},[617,61815,61785],{"class":656},[617,61817,61788],{"class":656},[617,61819,3054],{"class":626},[617,61821,61683],{"class":663},[617,61823,18886],{"class":622},[617,61825,679],{"class":622},[617,61827,61828],{"class":643},"stop",[617,61830,2420],{"class":622},[617,61832,4714],{"class":626},[617,61834,38436],{"class":622},[617,61836,61738],{"class":2414},[617,61838,6964],{"class":626},[617,61840,1305],{"class":622},[617,61842,61843],{"class":619,"line":611},[617,61844,1305],{"class":622},[606,61846,61848],{"className":608,"code":61847,"language":613,"meta":556,"style":556},"\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",[598,61849,61850,61858,61885,61912,61939,61943,61951,61959,61967,61975,61983,61991,61999],{"__ignoreMap":556},[617,61851,61852,61854,61856],{"class":619,"line":557},[617,61853,623],{"class":622},[617,61855,730],{"class":626},[617,61857,649],{"class":622},[617,61859,61860,61862,61864,61866,61868,61870,61873,61875,61877,61879,61881,61883],{"class":619,"line":558},[617,61861,738],{"class":622},[617,61863,35047],{"class":626},[617,61865,35050],{"class":630},[617,61867,637],{"class":622},[617,61869,640],{"class":622},[617,61871,61872],{"class":643},"handlerAudio('play')",[617,61874,640],{"class":622},[617,61876,3631],{"class":622},[617,61878,61768],{"class":663},[617,61880,712],{"class":622},[617,61882,35047],{"class":626},[617,61884,649],{"class":622},[617,61886,61887,61889,61891,61893,61895,61897,61900,61902,61904,61906,61908,61910],{"class":619,"line":688},[617,61888,738],{"class":622},[617,61890,35047],{"class":626},[617,61892,35050],{"class":630},[617,61894,637],{"class":622},[617,61896,640],{"class":622},[617,61898,61899],{"class":643},"handlerAudio('pause')",[617,61901,640],{"class":622},[617,61903,3631],{"class":622},[617,61905,61799],{"class":663},[617,61907,712],{"class":622},[617,61909,35047],{"class":626},[617,61911,649],{"class":622},[617,61913,61914,61916,61918,61920,61922,61924,61927,61929,61931,61933,61935,61937],{"class":619,"line":709},[617,61915,738],{"class":622},[617,61917,35047],{"class":626},[617,61919,35050],{"class":630},[617,61921,637],{"class":622},[617,61923,640],{"class":622},[617,61925,61926],{"class":643},"handlerAudio('stop')",[617,61928,640],{"class":622},[617,61930,3631],{"class":622},[617,61932,61828],{"class":663},[617,61934,712],{"class":622},[617,61936,35047],{"class":626},[617,61938,649],{"class":622},[617,61940,61941],{"class":619,"line":719},[617,61942,722],{"emptyLinePlaceholder":574},[617,61944,61945,61947,61949],{"class":619,"line":725},[617,61946,738],{"class":622},[617,61948,741],{"class":626},[617,61950,649],{"class":622},[617,61952,61953,61955,61957],{"class":619,"line":735},[617,61954,761],{"class":622},[617,61956,265],{"class":626},[617,61958,649],{"class":622},[617,61960,61961,61963,61965],{"class":619,"line":758},[617,61962,833],{"class":622},[617,61964,19264],{"class":626},[617,61966,649],{"class":622},[617,61968,61969,61971,61973],{"class":619,"line":770},[617,61970,844],{"class":622},[617,61972,463],{"class":626},[617,61974,767],{"class":622},[617,61976,61977,61979,61981],{"class":619,"line":780},[617,61978,865],{"class":622},[617,61980,19264],{"class":626},[617,61982,649],{"class":622},[617,61984,61985,61987,61989],{"class":619,"line":785},[617,61986,875],{"class":622},[617,61988,265],{"class":626},[617,61990,649],{"class":622},[617,61992,61993,61995,61997],{"class":619,"line":807},[617,61994,885],{"class":622},[617,61996,741],{"class":626},[617,61998,649],{"class":622},[617,62000,62001,62003,62005],{"class":619,"line":611},[617,62002,712],{"class":622},[617,62004,730],{"class":626},[617,62006,649],{"class":622},[484,62008,12330],{"id":12329},[907,62010,62011,62019],{},[910,62012,62013],{},[913,62014,62015,62017],{},[916,62016,5739],{"align":977},[916,62018,921],{"align":977},[926,62020,62021],{},[913,62022,62023,62028],{},[931,62024,62025],{"align":977},[598,62026,62027],{},"is-playing",[931,62029,62030,62031,3174,62033],{"align":977},"Triggered when the audio changes its state (play, pause, or stop) ",[7535,62032],{},[598,62034,62035],{},"@is-playing=\"(e) => yourIsPlayingRef = e\"",[1307,62037,62038],{},"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 .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":556,"searchDepth":557,"depth":558,"links":62040},[62041,62042,62043,62044,62045],{"id":604,"depth":558,"text":15},{"id":61337,"depth":558,"text":61338},{"id":901,"depth":558,"text":902},{"id":55471,"depth":558,"text":55472},{"id":12329,"depth":558,"text":12330},"Spatially positioned audio in 3D space.",{},{"title":463,"description":62046},"e2zBGwWkG8BVqvng16FVMXJJwsEQPwApece9Mbbzdjg",{"id":62051,"title":467,"body":62052,"description":62683,"extension":571,"links":572,"meta":62684,"navigation":574,"path":468,"seo":62685,"stem":469,"__hash__":62686},"docs/2.api/miscellaneous/use-animations.md",{"type":481,"value":62053,"toc":62676},[62054,62068,62070,62074,62084,62311,62315,62322,62653,62655,62673],[594,62055,62056,62058,62059,62062,62063,33516],{},[598,62057,467],{}," is a composable that returns a ",[598,62060,62061],{},"shallowReactive"," with all the models actions based on the animations provided. It is a wrapper around the ",[1120,62064,62067],{"href":62065,"rel":62066},"https://threejs.org/docs/#api/en/animation/AnimationMixer",[1124],"AnimationMixer",[484,62069,15],{"id":604},[4031,62071,62073],{"id":62072},"basic-usage-automatic-updates","Basic Usage (Automatic Updates)",[594,62075,62076,62077,62079,62080,62083],{},"By default, ",[598,62078,467],{}," automatically updates the animation mixer on each frame using the ",[598,62081,62082],{},"useLoop"," composable:",[606,62085,62088],{"className":1166,"code":62086,"highlights":62087,"language":644,"meta":556,"style":556},"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",[557,735],[598,62089,62090,62114,62118,62143,62147,62181,62207,62231,62235,62248,62252,62272,62291,62305],{"__ignoreMap":556},[617,62091,62093,62095,62097,62100,62102,62104,62106,62108,62110,62112],{"class":62092,"line":557},[619,653],[617,62094,657],{"class":656},[617,62096,660],{"class":622},[617,62098,62099],{"class":663}," useAnimations",[617,62101,667],{"class":622},[617,62103,4327],{"class":663},[617,62105,673],{"class":622},[617,62107,676],{"class":656},[617,62109,679],{"class":622},[617,62111,682],{"class":643},[617,62113,685],{"class":622},[617,62115,62116],{"class":619,"line":558},[617,62117,722],{"emptyLinePlaceholder":574},[617,62119,62120,62122,62124,62126,62128,62130,62132,62134,62136,62139,62141],{"class":619,"line":688},[617,62121,2395],{"class":630},[617,62123,660],{"class":622},[617,62125,56472],{"class":663},[617,62127,2408],{"class":622},[617,62129,2411],{"class":622},[617,62131,4327],{"class":2414},[617,62133,2417],{"class":663},[617,62135,2420],{"class":622},[617,62137,62138],{"class":643},"/models/ugly-naked-bunny.gltf",[617,62140,2420],{"class":622},[617,62142,2428],{"class":663},[617,62144,62145],{"class":619,"line":709},[617,62146,722],{"emptyLinePlaceholder":574},[617,62148,62149,62151,62154,62156,62158,62160,62162,62164,62166,62168,62170,62172,62175,62178],{"class":619,"line":719},[617,62150,2395],{"class":630},[617,62152,62153],{"class":663}," animations ",[617,62155,637],{"class":622},[617,62157,3469],{"class":2414},[617,62159,2417],{"class":663},[617,62161,3654],{"class":622},[617,62163,3657],{"class":630},[617,62165,2400],{"class":663},[617,62167,1126],{"class":622},[617,62169,3665],{"class":663},[617,62171,3668],{"class":622},[617,62173,62174],{"class":663},"animations ",[617,62176,62177],{"class":622},"||",[617,62179,62180],{"class":663}," [])\n",[617,62182,62183,62185,62187,62189,62191,62193,62195,62197,62199,62201,62203,62205],{"class":619,"line":725},[617,62184,2395],{"class":630},[617,62186,4989],{"class":663},[617,62188,637],{"class":622},[617,62190,3469],{"class":2414},[617,62192,2417],{"class":663},[617,62194,3654],{"class":622},[617,62196,3657],{"class":630},[617,62198,2400],{"class":663},[617,62200,3668],{"class":622},[617,62202,3665],{"class":663},[617,62204,3668],{"class":622},[617,62206,5037],{"class":663},[617,62208,62210,62212,62214,62217,62219,62221,62223,62226,62228],{"class":62209,"line":735},[619,653],[617,62211,2395],{"class":630},[617,62213,660],{"class":622},[617,62215,62216],{"class":663}," actions ",[617,62218,2408],{"class":622},[617,62220,2411],{"class":622},[617,62222,62099],{"class":2414},[617,62224,62225],{"class":663},"(animations",[617,62227,667],{"class":622},[617,62229,62230],{"class":663}," model)\n",[617,62232,62233],{"class":619,"line":758},[617,62234,722],{"emptyLinePlaceholder":574},[617,62236,62237,62239,62242,62244,62246],{"class":619,"line":770},[617,62238,2395],{"class":630},[617,62240,62241],{"class":663}," currentAction ",[617,62243,637],{"class":622},[617,62245,3852],{"class":2414},[617,62247,6515],{"class":663},[617,62249,62250],{"class":619,"line":780},[617,62251,722],{"emptyLinePlaceholder":574},[617,62253,62254,62256,62259,62261,62263,62266,62268,62270],{"class":619,"line":785},[617,62255,10239],{"class":2414},[617,62257,62258],{"class":663},"(actions",[617,62260,667],{"class":622},[617,62262,3054],{"class":622},[617,62264,62265],{"class":6818},"newActions",[617,62267,3320],{"class":622},[617,62269,3657],{"class":630},[617,62271,1184],{"class":622},[617,62273,62274,62277,62279,62281,62283,62286,62288],{"class":619,"line":807},[617,62275,62276],{"class":663}," currentAction",[617,62278,1126],{"class":622},[617,62280,3665],{"class":663},[617,62282,2411],{"class":622},[617,62284,62285],{"class":663}," newActions",[617,62287,1126],{"class":622},[617,62289,62290],{"class":663},"Greeting\n",[617,62292,62293,62295,62297,62299,62301,62303],{"class":619,"line":611},[617,62294,62276],{"class":663},[617,62296,1126],{"class":622},[617,62298,3665],{"class":663},[617,62300,1126],{"class":622},[617,62302,61768],{"class":2414},[617,62304,6515],{"class":626},[617,62306,62307,62309],{"class":619,"line":830},[617,62308,2408],{"class":622},[617,62310,2428],{"class":663},[4031,62312,62314],{"id":62313},"manual-updates","Manual Updates",[594,62316,62317,62318,62321],{},"To gain finer control over animation mixer updates, enable ",[598,62319,62320],{},"manualUpdate: true"," and manage the update cycle manually.",[606,62323,62326],{"className":1166,"code":62324,"highlights":62325,"language":644,"meta":556,"style":556},"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",[557,758,770,780,841],[598,62327,62328,62351,62370,62374,62398,62402,62432,62458,62489,62501,62508,62512,62517,62534,62552,62573,62579,62583,62595,62599,62617,62633,62647],{"__ignoreMap":556},[617,62329,62331,62333,62335,62337,62339,62341,62343,62345,62347,62349],{"class":62330,"line":557},[619,653],[617,62332,657],{"class":656},[617,62334,660],{"class":622},[617,62336,62099],{"class":663},[617,62338,667],{"class":622},[617,62340,4327],{"class":663},[617,62342,673],{"class":622},[617,62344,676],{"class":656},[617,62346,679],{"class":622},[617,62348,682],{"class":643},[617,62350,685],{"class":622},[617,62352,62353,62355,62357,62360,62362,62364,62366,62368],{"class":619,"line":558},[617,62354,657],{"class":656},[617,62356,660],{"class":622},[617,62358,62359],{"class":663}," useLoop",[617,62361,673],{"class":622},[617,62363,676],{"class":656},[617,62365,679],{"class":622},[617,62367,704],{"class":643},[617,62369,685],{"class":622},[617,62371,62372],{"class":619,"line":688},[617,62373,722],{"emptyLinePlaceholder":574},[617,62375,62376,62378,62380,62382,62384,62386,62388,62390,62392,62394,62396],{"class":619,"line":709},[617,62377,2395],{"class":630},[617,62379,660],{"class":622},[617,62381,56472],{"class":663},[617,62383,2408],{"class":622},[617,62385,2411],{"class":622},[617,62387,4327],{"class":2414},[617,62389,2417],{"class":663},[617,62391,2420],{"class":622},[617,62393,62138],{"class":643},[617,62395,2420],{"class":622},[617,62397,2428],{"class":663},[617,62399,62400],{"class":619,"line":719},[617,62401,722],{"emptyLinePlaceholder":574},[617,62403,62404,62406,62408,62410,62412,62414,62416,62418,62420,62422,62424,62426,62428,62430],{"class":619,"line":725},[617,62405,2395],{"class":630},[617,62407,62153],{"class":663},[617,62409,637],{"class":622},[617,62411,3469],{"class":2414},[617,62413,2417],{"class":663},[617,62415,3654],{"class":622},[617,62417,3657],{"class":630},[617,62419,2400],{"class":663},[617,62421,1126],{"class":622},[617,62423,3665],{"class":663},[617,62425,3668],{"class":622},[617,62427,62174],{"class":663},[617,62429,62177],{"class":622},[617,62431,62180],{"class":663},[617,62433,62434,62436,62438,62440,62442,62444,62446,62448,62450,62452,62454,62456],{"class":619,"line":735},[617,62435,2395],{"class":630},[617,62437,4989],{"class":663},[617,62439,637],{"class":622},[617,62441,3469],{"class":2414},[617,62443,2417],{"class":663},[617,62445,3654],{"class":622},[617,62447,3657],{"class":630},[617,62449,2400],{"class":663},[617,62451,3668],{"class":622},[617,62453,3665],{"class":663},[617,62455,3668],{"class":622},[617,62457,5037],{"class":663},[617,62459,62461,62463,62465,62468,62470,62473,62475,62477,62479,62481,62483,62485,62487],{"class":62460,"line":758},[619,653],[617,62462,2395],{"class":630},[617,62464,660],{"class":622},[617,62466,62467],{"class":663}," actions",[617,62469,667],{"class":622},[617,62471,62472],{"class":663}," mixer ",[617,62474,2408],{"class":622},[617,62476,2411],{"class":622},[617,62478,62099],{"class":2414},[617,62480,62225],{"class":663},[617,62482,667],{"class":622},[617,62484,5028],{"class":663},[617,62486,667],{"class":622},[617,62488,1184],{"class":622},[617,62490,62492,62495,62497,62499],{"class":62491,"line":770},[619,653],[617,62493,62494],{"class":626}," manualUpdate",[617,62496,1198],{"class":622},[617,62498,4378],{"class":4377},[617,62500,2468],{"class":622},[617,62502,62504,62506],{"class":62503,"line":780},[619,653],[617,62505,2408],{"class":622},[617,62507,2428],{"class":663},[617,62509,62510],{"class":619,"line":785},[617,62511,722],{"emptyLinePlaceholder":574},[617,62513,62514],{"class":619,"line":807},[617,62515,62516],{"class":1189},"// Handle updates manually\n",[617,62518,62519,62521,62523,62526,62528,62530,62532],{"class":619,"line":611},[617,62520,2395],{"class":630},[617,62522,660],{"class":622},[617,62524,62525],{"class":663}," onBeforeRender ",[617,62527,2408],{"class":622},[617,62529,2411],{"class":622},[617,62531,62359],{"class":2414},[617,62533,6515],{"class":663},[617,62535,62536,62539,62541,62543,62546,62548,62550],{"class":619,"line":830},[617,62537,62538],{"class":2414},"onBeforeRender",[617,62540,2417],{"class":663},[617,62542,36540],{"class":622},[617,62544,62545],{"class":6818}," delta",[617,62547,36557],{"class":622},[617,62549,3657],{"class":630},[617,62551,1184],{"class":622},[617,62553,62555,62558,62560,62562,62564,62566,62568,62571],{"class":62554,"line":841},[619,653],[617,62556,62557],{"class":663}," mixer",[617,62559,1126],{"class":622},[617,62561,3665],{"class":663},[617,62563,1126],{"class":622},[617,62565,5783],{"class":2414},[617,62567,2417],{"class":626},[617,62569,62570],{"class":663},"delta",[617,62572,2428],{"class":626},[617,62574,62575,62577],{"class":619,"line":852},[617,62576,2408],{"class":622},[617,62578,2428],{"class":663},[617,62580,62581],{"class":619,"line":862},[617,62582,722],{"emptyLinePlaceholder":574},[617,62584,62585,62587,62589,62591,62593],{"class":619,"line":612},[617,62586,2395],{"class":630},[617,62588,62241],{"class":663},[617,62590,637],{"class":622},[617,62592,3852],{"class":2414},[617,62594,6515],{"class":663},[617,62596,62597],{"class":619,"line":882},[617,62598,722],{"emptyLinePlaceholder":574},[617,62600,62601,62603,62605,62607,62609,62611,62613,62615],{"class":619,"line":892},[617,62602,10239],{"class":2414},[617,62604,62258],{"class":663},[617,62606,667],{"class":622},[617,62608,3054],{"class":622},[617,62610,62265],{"class":6818},[617,62612,3320],{"class":622},[617,62614,3657],{"class":630},[617,62616,1184],{"class":622},[617,62618,62619,62621,62623,62625,62627,62629,62631],{"class":619,"line":2605},[617,62620,62276],{"class":663},[617,62622,1126],{"class":622},[617,62624,3665],{"class":663},[617,62626,2411],{"class":622},[617,62628,62285],{"class":663},[617,62630,1126],{"class":622},[617,62632,62290],{"class":663},[617,62634,62635,62637,62639,62641,62643,62645],{"class":619,"line":2614},[617,62636,62276],{"class":663},[617,62638,1126],{"class":622},[617,62640,3665],{"class":663},[617,62642,1126],{"class":622},[617,62644,61768],{"class":2414},[617,62646,6515],{"class":626},[617,62648,62649,62651],{"class":619,"line":2634},[617,62650,2408],{"class":622},[617,62652,2428],{"class":663},[484,62654,12073],{"id":15476},[2193,62656,62657],{},[2196,62658,62659,62662,62663,62665,62666,62668,62669,62672],{},[598,62660,62661],{},"manualUpdate"," (optional): Default is ",[598,62664,951],{},". If set to ",[598,62667,941],{},", disables automatic animation mixer updates. You'll need to call ",[598,62670,62671],{},"mixer.value.update(delta)"," manually.",[1307,62674,62675],{},"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":556,"searchDepth":557,"depth":558,"links":62677},[62678,62682],{"id":604,"depth":558,"text":15,"children":62679},[62680,62681],{"id":62072,"depth":688,"text":62073},{"id":62313,"depth":688,"text":62314},{"id":15476,"depth":558,"text":12073},"Composable for managing model animations with AnimationMixer.",{},{"title":467,"description":62683},"TJcEqtFqnepbieID3hzHGMd0QylrwTz-3E1RokTEGoY",{"id":62688,"title":471,"body":62689,"description":63283,"extension":571,"links":572,"meta":63284,"navigation":574,"path":472,"seo":63285,"stem":473,"__hash__":63286},"docs/2.api/miscellaneous/use-gltf-exporter.md",{"type":481,"value":62690,"toc":63277},[62691,62707,62709,63074,63078,63127,63129,63274],[594,62692,62693,62698,62699,62703,62704,62706],{},[1120,62694,62697],{"href":62695,"rel":62696},"https://threejs.org/docs/index.html?q=expo#examples/en/exporters/GLTFExporter",[1124],"GLTFExporter"," is an addon in Three.js that allows you to download any object3D in a ",[1120,62700,15399],{"href":62701,"rel":62702},"https://www.khronos.org/gltf",[1124]," format. ",[1649,62705,14899],{}," provides a composable that simplifies this process with just a few lines of code.",[484,62708,33965],{"id":33964},[606,62710,62713],{"className":608,"code":62711,"highlights":62712,"language":613,"meta":556,"style":556},"\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",[688,780],[598,62714,62715,62735,62753,62773,62791,62795,62807,62811,62816,62831,62873,62877,62885,62893,62915,62933,62939,62951,62964,62976,62990,62994,63012,63031,63039,63058,63066],{"__ignoreMap":556},[617,62716,62717,62719,62721,62723,62725,62727,62729,62731,62733],{"class":619,"line":557},[617,62718,623],{"class":622},[617,62720,627],{"class":626},[617,62722,631],{"class":630},[617,62724,634],{"class":630},[617,62726,637],{"class":622},[617,62728,640],{"class":622},[617,62730,644],{"class":643},[617,62732,640],{"class":622},[617,62734,649],{"class":622},[617,62736,62737,62739,62741,62743,62745,62747,62749,62751],{"class":619,"line":558},[617,62738,657],{"class":656},[617,62740,660],{"class":622},[617,62742,695],{"class":663},[617,62744,673],{"class":622},[617,62746,676],{"class":656},[617,62748,679],{"class":622},[617,62750,704],{"class":643},[617,62752,685],{"class":622},[617,62754,62756,62758,62760,62763,62765,62767,62769,62771],{"class":62755,"line":688},[619,653],[617,62757,657],{"class":656},[617,62759,660],{"class":622},[617,62761,62762],{"class":663}," useGLTFExporter",[617,62764,673],{"class":622},[617,62766,676],{"class":656},[617,62768,679],{"class":622},[617,62770,682],{"class":643},[617,62772,685],{"class":622},[617,62774,62775,62777,62779,62781,62783,62785,62787,62789],{"class":619,"line":709},[617,62776,657],{"class":656},[617,62778,660],{"class":622},[617,62780,3478],{"class":663},[617,62782,673],{"class":622},[617,62784,676],{"class":656},[617,62786,679],{"class":622},[617,62788,613],{"class":643},[617,62790,685],{"class":622},[617,62792,62793],{"class":619,"line":719},[617,62794,722],{"emptyLinePlaceholder":574},[617,62796,62797,62799,62801,62803,62805],{"class":619,"line":725},[617,62798,2395],{"class":630},[617,62800,14232],{"class":663},[617,62802,637],{"class":622},[617,62804,3478],{"class":2414},[617,62806,6515],{"class":663},[617,62808,62809],{"class":619,"line":735},[617,62810,722],{"emptyLinePlaceholder":574},[617,62812,62813],{"class":619,"line":758},[617,62814,62815],{"class":1189},"// the second argument – options – is not required\n",[617,62817,62818,62820,62823,62825,62827,62829],{"class":619,"line":770},[617,62819,2395],{"class":630},[617,62821,62822],{"class":663}," downloadBox ",[617,62824,637],{"class":622},[617,62826,7060],{"class":622},[617,62828,3657],{"class":630},[617,62830,1184],{"class":622},[617,62832,62834,62837,62839,62841,62843,62845,62847,62849,62852,62854,62856,62858,62860,62862,62865,62867,62869,62871],{"class":62833,"line":780},[619,653],[617,62835,62836],{"class":2414}," useGLTFExporter",[617,62838,2417],{"class":626},[617,62840,14308],{"class":663},[617,62842,1126],{"class":622},[617,62844,3665],{"class":663},[617,62846,667],{"class":622},[617,62848,660],{"class":622},[617,62850,62851],{"class":626}," fileName",[617,62853,1198],{"class":622},[617,62855,679],{"class":622},[617,62857,3802],{"class":643},[617,62859,2420],{"class":622},[617,62861,667],{"class":622},[617,62863,62864],{"class":626}," binary",[617,62866,1198],{"class":622},[617,62868,4378],{"class":4377},[617,62870,673],{"class":622},[617,62872,2428],{"class":626},[617,62874,62875],{"class":619,"line":785},[617,62876,1305],{"class":622},[617,62878,62879,62881,62883],{"class":619,"line":807},[617,62880,712],{"class":622},[617,62882,627],{"class":626},[617,62884,649],{"class":622},[617,62886,62887,62889,62891],{"class":619,"line":611},[617,62888,623],{"class":622},[617,62890,730],{"class":626},[617,62892,649],{"class":622},[617,62894,62895,62897,62899,62901,62903,62905,62907,62909,62912],{"class":619,"line":830},[617,62896,738],{"class":622},[617,62898,741],{"class":626},[617,62900,744],{"class":630},[617,62902,637],{"class":622},[617,62904,640],{"class":622},[617,62906,9840],{"class":643},[617,62908,640],{"class":622},[617,62910,62911],{"class":630}," window-size",[617,62913,62914],{"class":622}," >\n",[617,62916,62917,62919,62921,62923,62925,62927,62929,62931],{"class":619,"line":841},[617,62918,761],{"class":622},[617,62920,764],{"class":626},[617,62922,1465],{"class":630},[617,62924,637],{"class":622},[617,62926,640],{"class":622},[617,62928,7425],{"class":643},[617,62930,640],{"class":622},[617,62932,767],{"class":622},[617,62934,62935,62937],{"class":619,"line":852},[617,62936,761],{"class":622},[617,62938,5106],{"class":626},[617,62940,62941,62943,62945,62947,62949],{"class":619,"line":862},[617,62942,10413],{"class":630},[617,62944,637],{"class":622},[617,62946,640],{"class":622},[617,62948,14308],{"class":643},[617,62950,3111],{"class":622},[617,62952,62953,62956,62958,62960,62962],{"class":619,"line":612},[617,62954,62955],{"class":630}," :position-z",[617,62957,637],{"class":622},[617,62959,640],{"class":622},[617,62961,25435],{"class":643},[617,62963,3111],{"class":622},[617,62965,62966,62968,62970,62972,62974],{"class":619,"line":882},[617,62967,56138],{"class":630},[617,62969,637],{"class":622},[617,62971,640],{"class":622},[617,62973,34359],{"class":643},[617,62975,3111],{"class":622},[617,62977,62978,62981,62983,62985,62988],{"class":619,"line":892},[617,62979,62980],{"class":630}," @click",[617,62982,637],{"class":622},[617,62984,640],{"class":622},[617,62986,62987],{"class":643},"downloadBox",[617,62989,3111],{"class":622},[617,62991,62992],{"class":619,"line":2605},[617,62993,10441],{"class":622},[617,62995,62996,62998,63000,63002,63004,63006,63008,63010],{"class":619,"line":2614},[617,62997,833],{"class":622},[617,62999,847],{"class":626},[617,63001,1939],{"class":630},[617,63003,637],{"class":622},[617,63005,640],{"class":622},[617,63007,1946],{"class":643},[617,63009,640],{"class":622},[617,63011,767],{"class":622},[617,63013,63014,63016,63018,63020,63022,63024,63027,63029],{"class":619,"line":2634},[617,63015,833],{"class":622},[617,63017,2666],{"class":626},[617,63019,36873],{"class":630},[617,63021,637],{"class":622},[617,63023,640],{"class":622},[617,63025,63026],{"class":643},"0x00ff00",[617,63028,640],{"class":622},[617,63030,767],{"class":622},[617,63032,63033,63035,63037],{"class":619,"line":2643},[617,63034,875],{"class":622},[617,63036,836],{"class":626},[617,63038,649],{"class":622},[617,63040,63041,63043,63045,63047,63049,63051,63054,63056],{"class":619,"line":2652},[617,63042,761],{"class":622},[617,63044,8455],{"class":626},[617,63046,1465],{"class":630},[617,63048,637],{"class":622},[617,63050,640],{"class":622},[617,63052,63053],{"class":643},"[0, 10, 10]",[617,63055,640],{"class":622},[617,63057,767],{"class":622},[617,63059,63060,63062,63064],{"class":619,"line":2661},[617,63061,885],{"class":622},[617,63063,741],{"class":626},[617,63065,649],{"class":622},[617,63067,63068,63070,63072],{"class":619,"line":2683},[617,63069,712],{"class":622},[617,63071,730],{"class":626},[617,63073,649],{"class":622},[484,63075,63077],{"id":63076},"arguments","Arguments",[907,63079,63080,63092],{},[910,63081,63082],{},[913,63083,63084,63086,63088,63090],{},[916,63085,8069],{"align":977},[916,63087,5949],{},[916,63089,924],{},[916,63091,921],{},[926,63093,63094,63110],{},[913,63095,63096,63101,63105,63107],{},[931,63097,63098],{"align":977},[1649,63099,63100],{},"Selector",[931,63102,63103],{},[598,63104,7602],{},[931,63106,31074],{},[931,63108,63109],{},"The object to download. Could be an array of objects",[913,63111,63112,63116,63120,63124],{},[931,63113,63114],{"align":977},[1649,63115,12073],{},[931,63117,63118],{},[598,63119,12073],{},[931,63121,63122],{},[598,63123,1159],{},[931,63125,63126],{},"Description below",[4031,63128,12073],{"id":15476},[907,63130,63131,63143],{},[910,63132,63133],{},[913,63134,63135,63137,63139,63141],{},[916,63136,8069],{"align":977},[916,63138,5949],{"align":977},[916,63140,924],{"align":977},[916,63142,921],{"align":977},[926,63144,63145,63164,63182,63200,63218,63237,63255],{},[913,63146,63147,63152,63157,63161],{},[931,63148,63149],{"align":977},[1649,63150,63151],{},"trs",[931,63153,63154],{"align":977},[598,63155,63156],{},"bool",[931,63158,63159],{"align":977},[598,63160,951],{},[931,63162,63163],{"align":977},"Export position, rotation and scale instead of matrix per node",[913,63165,63166,63171,63175,63179],{},[931,63167,63168],{"align":977},[1649,63169,63170],{},"onlyVisible",[931,63172,63173],{"align":977},[598,63174,63156],{},[931,63176,63177],{"align":977},[598,63178,941],{},[931,63180,63181],{"align":977},"Export only visible objects",[913,63183,63184,63189,63193,63197],{},[931,63185,63186],{"align":977},[1649,63187,63188],{},"binary",[931,63190,63191],{"align":977},[598,63192,63156],{},[931,63194,63195],{"align":977},[598,63196,951],{},[931,63198,63199],{"align":977},"Export in binary (.glb) format, returning an ArrayBuffer",[913,63201,63202,63207,63211,63215],{},[931,63203,63204],{"align":977},[1649,63205,63206],{},"maxTextureSize",[931,63208,63209],{"align":977},[598,63210,5332],{},[931,63212,63213],{"align":977},[598,63214,11564],{},[931,63216,63217],{"align":977},"Restricts the image maximum size (both width and height) to the given value",[913,63219,63220,63225,63230,63234],{},[931,63221,63222],{"align":977},[1649,63223,63224],{},"animations",[931,63226,63227],{"align":977},[598,63228,63229],{},"Array\u003CAnimationClip>",[931,63231,63232],{"align":977},[598,63233,1159],{},[931,63235,63236],{"align":977},"List of animations to be included in the export",[913,63238,63239,63244,63248,63252],{},[931,63240,63241],{"align":977},[1649,63242,63243],{},"includeCustomExtensions",[931,63245,63246],{"align":977},[598,63247,63156],{},[931,63249,63250],{"align":977},[598,63251,951],{},[931,63253,63254],{"align":977},"Export custom glTF extensions defined on an object's userData.gltfExtensions",[913,63256,63257,63262,63266,63271],{},[931,63258,63259],{"align":977},[1649,63260,63261],{},"fileName",[931,63263,63264],{"align":977},[598,63265,3552],{},[931,63267,63268],{"align":977},[598,63269,63270],{},"Object name",[931,63272,63273],{"align":977},"Name of the generated file",[1307,63275,63276],{},"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 .light .shiki span {color: var(--shiki-light);background: var(--shiki-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":556,"searchDepth":557,"depth":558,"links":63278},[63279,63280],{"id":33964,"depth":558,"text":33965},{"id":63076,"depth":558,"text":63077,"children":63281},[63282],{"id":15476,"depth":688,"text":12073},"Export 3D objects to GLTF format.",{},{"title":471,"description":63283},"ls7xbos-wdqomwboeVd0l1d29JncmAz9XxdqK17moKs",{"id":63288,"title":475,"body":63289,"description":63577,"extension":571,"links":572,"meta":63578,"navigation":574,"path":476,"seo":63579,"stem":477,"__hash__":63580},"docs/2.api/miscellaneous/use-intersect.md",{"type":481,"value":63290,"toc":63572},[63291,63308,63310,63326,63469,63471,63499,63503,63570],[594,63292,63293,63295,63296,53215,63299,63301,63302,63307],{},[598,63294,475],{}," is a function that returns ",[598,63297,63298],{},"intersect",[598,63300,55519],{}," that's updated when the observed object enters or leaves the screen. This relies on ",[1120,63303,63306],{"href":63304,"rel":63305},"https://threejs.org/docs/#api/en/core/Object3D.onBeforeRender",[1124],"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.",[484,63309,15],{"id":604},[3179,63311,63312],{},[594,63313,63314,63316,63317,63319,63320,63322,63323,1126],{},[598,63315,475],{}," requires a ",[598,63318,741],{}," context, so it is only available in ",[598,63321,741],{}," descendant components' ",[598,63324,63325],{},"\u003Cscript setup>",[606,63327,63330],{"className":608,"code":63328,"highlights":63329,"language":613,"meta":556,"style":556},"\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",[558,709],[598,63331,63332,63352,63377,63381,63407,63415,63419,63427,63445,63453,63461],{"__ignoreMap":556},[617,63333,63334,63336,63338,63340,63342,63344,63346,63348,63350],{"class":619,"line":557},[617,63335,623],{"class":622},[617,63337,627],{"class":626},[617,63339,631],{"class":630},[617,63341,634],{"class":630},[617,63343,637],{"class":622},[617,63345,640],{"class":622},[617,63347,644],{"class":643},[617,63349,640],{"class":622},[617,63351,649],{"class":622},[617,63353,63355,63357,63359,63362,63364,63367,63369,63371,63373,63375],{"class":63354,"line":558},[619,653],[617,63356,657],{"class":656},[617,63358,660],{"class":622},[617,63360,63361],{"class":663}," Torus",[617,63363,667],{"class":622},[617,63365,63366],{"class":663}," useIntersect",[617,63368,673],{"class":622},[617,63370,676],{"class":656},[617,63372,679],{"class":622},[617,63374,682],{"class":643},[617,63376,685],{"class":622},[617,63378,63379],{"class":619,"line":688},[617,63380,722],{"emptyLinePlaceholder":574},[617,63382,63384,63386,63388,63390,63392,63395,63397,63399,63401,63403,63405],{"class":63383,"line":709},[619,653],[617,63385,2395],{"class":630},[617,63387,660],{"class":622},[617,63389,3852],{"class":663},[617,63391,667],{"class":622},[617,63393,63394],{"class":663}," intersect",[617,63396,667],{"class":622},[617,63398,6801],{"class":663},[617,63400,2408],{"class":622},[617,63402,2411],{"class":622},[617,63404,63366],{"class":2414},[617,63406,6515],{"class":663},[617,63408,63409,63411,63413],{"class":619,"line":719},[617,63410,712],{"class":622},[617,63412,627],{"class":626},[617,63414,649],{"class":622},[617,63416,63417],{"class":619,"line":725},[617,63418,722],{"emptyLinePlaceholder":574},[617,63420,63421,63423,63425],{"class":619,"line":735},[617,63422,623],{"class":622},[617,63424,730],{"class":626},[617,63426,649],{"class":622},[617,63428,63429,63431,63433,63435,63437,63439,63441,63443],{"class":619,"line":758},[617,63430,738],{"class":622},[617,63432,277],{"class":626},[617,63434,3852],{"class":630},[617,63436,637],{"class":622},[617,63438,640],{"class":622},[617,63440,5874],{"class":643},[617,63442,640],{"class":622},[617,63444,649],{"class":622},[617,63446,63447,63449,63451],{"class":619,"line":770},[617,63448,761],{"class":622},[617,63450,857],{"class":626},[617,63452,767],{"class":622},[617,63454,63455,63457,63459],{"class":619,"line":780},[617,63456,885],{"class":622},[617,63458,277],{"class":626},[617,63460,649],{"class":622},[617,63462,63463,63465,63467],{"class":619,"line":785},[617,63464,712],{"class":622},[617,63466,730],{"class":626},[617,63468,649],{"class":622},[484,63470,63077],{"id":63076},[907,63472,63473,63483],{},[910,63474,63475],{},[913,63476,63477,63479,63481],{},[916,63478,8069],{"align":977},[916,63480,921],{},[916,63482,5949],{},[926,63484,63485],{},[913,63486,63487,63491,63494],{},[931,63488,63489],{"align":977},[1649,63490,12353],{},[931,63492,63493],{},"Optional callback function triggered when the observed object enters or leaves the screen.",[931,63495,63496],{},[598,63497,63498],{},"(isIntersected: boolean) => void",[484,63500,63502],{"id":63501},"return","Return",[907,63504,63505,63515],{},[910,63506,63507],{},[913,63508,63509,63511,63513],{},[916,63510,8069],{"align":977},[916,63512,921],{},[916,63514,5949],{},[926,63516,63517,63535,63550],{},[913,63518,63519,63523,63530],{},[931,63520,63521],{"align":977},[1649,63522,5874],{},[931,63524,63525,63526,63529],{},"Vue ",[598,63527,63528],{},"ShallowRef"," to pass to the object to be observed.",[931,63531,63532],{},[598,63533,63534],{},"ShallowRef\u003CObject3D>",[913,63536,63537,63542,63545],{},[931,63538,63539],{"align":977},[1649,63540,63541],{},"intersects",[931,63543,63544],{},"Updates when the observed object's intersect status changes.",[931,63546,63547],{},[598,63548,63549],{},"ShallowRef\u003Cboolean>",[913,63551,63552,63557,63566],{},[931,63553,63554],{"align":977},[1649,63555,63556],{},"off",[931,63558,63559,63560,63562,63563,63565],{},"Calling this function stops ",[598,63561,475],{}," until ",[598,63564,5874],{}," changes.",[931,63567,63568],{},[598,63569,6001],{},[1307,63571,23985],{},{"title":556,"searchDepth":557,"depth":558,"links":63573},[63574,63575,63576],{"id":604,"depth":558,"text":15},{"id":63076,"depth":558,"text":63077},{"id":63501,"depth":558,"text":63502},"Detect when objects enter or leave the screen.",{},{"title":475,"description":63577},"QAcMQnGWf_fxqwXEeZxQJtNfPCiyyVyBtXuwXAh1Cg4",1782052428281]