[{"data":1,"prerenderedAt":67276},["ShallowReactive",2],{"navigation":3,"/api":474,"/api-surround":573,"abstraction-list":578,"controls-list":11776,"loaders-list":15617,"materials-list":24765,"shapes-list":28053,"debug-list":34373,"light-list":37148,"staging-list":41911,"objects-list":49717,"misc-list":63302},[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,190,284,310,344,394,440],{"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],{"title":157,"path":158,"stem":159},{"title":163,"path":164,"stem":165},"Custom Shader Material","/api/materials/custom-shader-material","2.api/4.materials/custom-shader-material",{"title":167,"path":168,"stem":169},"Mesh Glass Material","/api/materials/glass-material","2.api/4.materials/glass-material",{"title":171,"path":172,"stem":173},"Holographic Material","/api/materials/holographic-material","2.api/4.materials/holographic-material",{"title":175,"path":176,"stem":177},"Mesh Discard Material","/api/materials/mesh-discard-material","2.api/4.materials/mesh-discard-material",{"title":179,"path":180,"stem":181},"Mesh Reflection Material","/api/materials/mesh-reflection-material","2.api/4.materials/mesh-reflection-material",{"title":183,"path":184,"stem":185},"Point Material","/api/materials/point-material","2.api/4.materials/point-material",{"title":187,"path":188,"stem":189},"Wobble Material","/api/materials/wobble-material","2.api/4.materials/wobble-material",{"title":191,"path":192,"stem":193,"children":194},"Shapes","/api/shapes","2.api/5.shapes/index",[195,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280],{"title":191,"path":192,"stem":193},{"title":197,"path":198,"stem":199},"Box","/api/shapes/box","2.api/5.shapes/box",{"title":201,"path":202,"stem":203},"CatmullRomCurve3","/api/shapes/catmullromcurve3","2.api/5.shapes/catmullromcurve3",{"title":205,"path":206,"stem":207},"Circle","/api/shapes/circle","2.api/5.shapes/circle",{"title":209,"path":210,"stem":211},"Cone","/api/shapes/cone","2.api/5.shapes/cone",{"title":213,"path":214,"stem":215},"Cubic Bezier Line","/api/shapes/cubic-bezier-line","2.api/5.shapes/cubic-bezier-line",{"title":217,"path":218,"stem":219},"Cylinder","/api/shapes/cylinder","2.api/5.shapes/cylinder",{"title":221,"path":222,"stem":223},"Dodecahedron","/api/shapes/dodecahedron","2.api/5.shapes/dodecahedron",{"title":225,"path":226,"stem":227},"Grid","/api/shapes/grid","2.api/5.shapes/grid",{"title":229,"path":230,"stem":231},"Icosahedron","/api/shapes/icosahedron","2.api/5.shapes/icosahedron",{"title":233,"path":234,"stem":235},"Line2","/api/shapes/line2","2.api/5.shapes/line2",{"title":237,"path":238,"stem":239},"Octahedron","/api/shapes/octahedron","2.api/5.shapes/octahedron",{"title":241,"path":242,"stem":243},"Plane","/api/shapes/plane","2.api/5.shapes/plane",{"title":245,"path":246,"stem":247},"Quadratic Bezier Line","/api/shapes/quadratic-bezier-line","2.api/5.shapes/quadratic-bezier-line",{"title":249,"path":250,"stem":251},"Ring","/api/shapes/ring","2.api/5.shapes/ring",{"title":253,"path":254,"stem":255},"Rounded Box","/api/shapes/rounded-box","2.api/5.shapes/rounded-box",{"title":257,"path":258,"stem":259},"Screen Quad","/api/shapes/screen-quad","2.api/5.shapes/screen-quad",{"title":261,"path":262,"stem":263},"Sphere","/api/shapes/sphere","2.api/5.shapes/sphere",{"title":265,"path":266,"stem":267},"Superformula","/api/shapes/superformula","2.api/5.shapes/superformula",{"title":269,"path":270,"stem":271},"Tetrahedron","/api/shapes/tetrahedron","2.api/5.shapes/tetrahedron",{"title":273,"path":274,"stem":275},"Torus","/api/shapes/torus","2.api/5.shapes/torus",{"title":277,"path":278,"stem":279},"Torus Knot","/api/shapes/torus-knot","2.api/5.shapes/torus-knot",{"title":281,"path":282,"stem":283},"Tube","/api/shapes/tube","2.api/5.shapes/tube",{"title":285,"path":286,"stem":287,"children":288},"Debug/Performance","/api/debug-performance","2.api/6.debug-performance/index",[289,290,294,298,302,306],{"title":285,"path":286,"stem":287},{"title":291,"path":292,"stem":293},"Helper","/api/debug-performance/helper","2.api/6.debug-performance/helper",{"title":295,"path":296,"stem":297},"LOD","/api/debug-performance/lod","2.api/6.debug-performance/lod",{"title":299,"path":300,"stem":301},"Stats","/api/debug-performance/stats","2.api/6.debug-performance/stats",{"title":303,"path":304,"stem":305},"StatsGl","/api/debug-performance/stats-gl","2.api/6.debug-performance/stats-gl",{"title":307,"path":308,"stem":309},"useBVH","/api/debug-performance/use-bvh","2.api/6.debug-performance/use-bvh",{"title":311,"path":312,"stem":313,"children":314},"Light/Shadow","/api/light-shadow","2.api/7.light-shadow/index",[315,316,320,324,328,332,336,340],{"title":311,"path":312,"stem":313},{"title":317,"path":318,"stem":319},"Accumulative Shadows","/api/light-shadow/accumulative-shadows","2.api/7.light-shadow/accumulative-shadows",{"title":321,"path":322,"stem":323},"Bake Shadows","/api/light-shadow/bake-shadows","2.api/7.light-shadow/bake-shadows",{"title":325,"path":326,"stem":327},"Circle Shadow","/api/light-shadow/circle-shadow","2.api/7.light-shadow/circle-shadow",{"title":329,"path":330,"stem":331},"Contact Shadows","/api/light-shadow/contact-shadows","2.api/7.light-shadow/contact-shadows",{"title":333,"path":334,"stem":335},"Lensflare","/api/light-shadow/lensflare","2.api/7.light-shadow/lensflare",{"title":337,"path":338,"stem":339},"Randomized Lights","/api/light-shadow/randomized-lights","2.api/7.light-shadow/randomized-lights",{"title":341,"path":342,"stem":343},"Soft Shadows","/api/light-shadow/soft-shadows","2.api/7.light-shadow/soft-shadows",{"title":345,"path":346,"stem":347,"children":348},"Staging","/api/staging","2.api/8.staging/index",[349,350,354,358,362,366,370,374,378,382,386,390],{"title":345,"path":346,"stem":347},{"title":351,"path":352,"stem":353},"Environment","/api/staging/environment","2.api/8.staging/1.environment",{"title":355,"path":356,"stem":357},"useEnvironment","/api/staging/use-environment","2.api/8.staging/2.use-environment",{"title":359,"path":360,"stem":361},"Lightformer","/api/staging/lightformer","2.api/8.staging/3.lightformer",{"title":363,"path":364,"stem":365},"Backdrop","/api/staging/backdrop","2.api/8.staging/backdrop",{"title":367,"path":368,"stem":369},"Ocean","/api/staging/ocean","2.api/8.staging/ocean",{"title":371,"path":372,"stem":373},"Precipitation","/api/staging/precipitation","2.api/8.staging/precipitation",{"title":375,"path":376,"stem":377},"Sky","/api/staging/sky","2.api/8.staging/sky",{"title":379,"path":380,"stem":381},"Smoke","/api/staging/smoke","2.api/8.staging/smoke",{"title":383,"path":384,"stem":385},"Sparkles","/api/staging/sparkles","2.api/8.staging/sparkles",{"title":387,"path":388,"stem":389},"Stage","/api/staging/stage","2.api/8.staging/stage",{"title":391,"path":392,"stem":393},"Stars","/api/staging/stars","2.api/8.staging/stars",{"title":395,"path":396,"stem":397,"children":398},"Objects","/api/objects","2.api/9.objects/index",[399,400,404,408,412,416,420,424,428,432,436],{"title":395,"path":396,"stem":397},{"title":401,"path":402,"stem":403},"AnimatedSprite","/api/objects/animated-sprite","2.api/9.objects/animated-sprite",{"title":405,"path":406,"stem":407},"CubeCamera","/api/objects/cube-camera","2.api/9.objects/cube-camera",{"title":409,"path":410,"stem":411},"Fbo","/api/objects/fbo","2.api/9.objects/fbo",{"title":413,"path":414,"stem":415},"GradientTexture","/api/objects/gradient-texture","2.api/9.objects/gradient-texture",{"title":417,"path":418,"stem":419},"HTML","/api/objects/html","2.api/9.objects/html",{"title":421,"path":422,"stem":423},"Image","/api/objects/image","2.api/9.objects/image",{"title":425,"path":426,"stem":427},"MarchingCubes","/api/objects/marching-cubes","2.api/9.objects/marching-cubes",{"title":429,"path":430,"stem":431},"Reflector","/api/objects/reflector","2.api/9.objects/reflector",{"title":433,"path":434,"stem":435},"Refractor","/api/objects/refractor","2.api/9.objects/refractor",{"title":437,"path":438,"stem":439},"Text3D","/api/objects/text-3d","2.api/9.objects/text-3d",{"title":441,"path":442,"stem":443,"children":444},"Miscellaneous","/api/miscellaneous","2.api/miscellaneous/index",[445,446,450,454,458,462,466,470],{"title":441,"path":442,"stem":443},{"title":447,"path":448,"stem":449},"Bounds","/api/miscellaneous/bounds","2.api/miscellaneous/bounds",{"title":451,"path":452,"stem":453},"GlobalAudio","/api/miscellaneous/global-audio","2.api/miscellaneous/global-audio",{"title":455,"path":456,"stem":457},"MouseParallax","/api/miscellaneous/mouse-parallax","2.api/miscellaneous/mouse-parallax",{"title":459,"path":460,"stem":461},"PositionalAudio","/api/miscellaneous/positional-audio","2.api/miscellaneous/positional-audio",{"title":463,"path":464,"stem":465},"useAnimations","/api/miscellaneous/use-animations","2.api/miscellaneous/use-animations",{"title":467,"path":468,"stem":469},"useGLTFExporter","/api/miscellaneous/use-gltf-exporter","2.api/miscellaneous/use-gltf-exporter",{"title":471,"path":472,"stem":473},"useIntersect","/api/miscellaneous/use-intersect","2.api/miscellaneous/use-intersect",{"id":475,"title":28,"body":476,"description":566,"extension":567,"links":568,"meta":569,"navigation":570,"path":24,"seo":571,"stem":29,"__hash__":572},"docs/2.api/index.md",{"type":477,"value":478,"toc":551},"minimark",[479,484,488,492,495,499,502,506,509,513,516,520,523,527,530,534,537,541,544,548],[480,481,483],"h2",{"id":482},"abstraction","📦 Abstraction",[485,486],"api-list",{"list-name":487,"path":32},"abstraction-list",[480,489,491],{"id":490},"controls","🎮 Controls",[485,493],{"list-name":494,"path":86},"controls-list",[480,496,498],{"id":497},"loaders","📂 Loaders",[485,500],{"list-name":501,"path":116},"loaders-list",[480,503,505],{"id":504},"materials","🎨 Materials",[485,507],{"list-name":508,"path":158},"materials-list",[480,510,512],{"id":511},"shapes","🔷 Shapes",[485,514],{"list-name":515,"path":192},"shapes-list",[480,517,519],{"id":518},"debug-performance","📊 Debug & Performance",[485,521],{"list-name":522,"path":286},"debug-list",[480,524,526],{"id":525},"light-shadow","💡 Light & Shadow",[485,528],{"list-name":529,"path":312},"light-list",[480,531,533],{"id":532},"staging","🎭 Staging",[485,535],{"list-name":536,"path":346},"staging-list",[480,538,540],{"id":539},"objects","🎬 Objects",[485,542],{"list-name":543,"path":396},"objects-list",[480,545,547],{"id":546},"️-miscellaneous","🛠️ Miscellaneous",[485,549],{"list-name":550,"path":442},"misc-list",{"title":552,"searchDepth":553,"depth":554,"links":555},"",1,2,[556,557,558,559,560,561,562,563,564,565],{"id":482,"depth":554,"text":483},{"id":490,"depth":554,"text":491},{"id":497,"depth":554,"text":498},{"id":504,"depth":554,"text":505},{"id":511,"depth":554,"text":512},{"id":518,"depth":554,"text":519},{"id":525,"depth":554,"text":526},{"id":532,"depth":554,"text":533},{"id":539,"depth":554,"text":540},{"id":546,"depth":554,"text":547},"Explore the complete API reference","md",null,{},true,{"title":28,"description":566},"sw9kHYPeTK3xIXtV7tt103OdjppzE9OpuYL8etJhS4o",[574,576],{"title":19,"path":20,"stem":21,"description":575,"children":-1},"Migration guide for cientos",{"title":31,"path":32,"stem":33,"description":577,"children":-1},"UI components reference",[579,1319,1665,2250,7515,7823,8496,8949,9640,10147,11037,11388],{"id":580,"title":37,"body":581,"description":1315,"extension":567,"links":568,"meta":1316,"navigation":570,"path":38,"seo":1317,"stem":39,"__hash__":1318},"docs/2.api/1.abstractions/align.md",{"type":477,"value":582,"toc":1310},[583,589,598,601,899,903,906,1160,1164,1306],[584,585,586],"scene-controls-wrapper",{},[587,588],"abstractions-align",{},[590,591,592,593,597],"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 ",[594,595,596],"code",{},"cacheKey"," is set.",[480,599,15],{"id":600},"usage",[602,603,610],"pre",{"className":604,"code":605,"highlights":606,"language":609,"meta":552,"style":552},"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",[554,607,608],13,18,"vue",[594,611,612,646,682,703,713,719,729,752,764,774,779,805,810,828,839,850,860,870,880,890],{"__ignoreMap":552},[613,614,616,620,624,628,631,634,637,641,643],"span",{"class":615,"line":553},"line",[613,617,619],{"class":618},"sMK4o","\u003C",[613,621,623],{"class":622},"swJcz","script",[613,625,627],{"class":626},"spNyl"," setup",[613,629,630],{"class":626}," lang",[613,632,633],{"class":618},"=",[613,635,636],{"class":618},"\"",[613,638,640],{"class":639},"sfazB","ts",[613,642,636],{"class":618},[613,644,645],{"class":618},">\n",[613,647,650,654,657,661,664,667,670,673,676,679],{"class":648,"line":554},[615,649],"highlight",[613,651,653],{"class":652},"s7zQu","import",[613,655,656],{"class":618}," {",[613,658,660],{"class":659},"sTEyZ"," Align",[613,662,663],{"class":618},",",[613,665,666],{"class":659}," OrbitControls",[613,668,669],{"class":618}," }",[613,671,672],{"class":652}," from",[613,674,675],{"class":618}," '",[613,677,678],{"class":639},"@tresjs/cientos",[613,680,681],{"class":618},"'\n",[613,683,685,687,689,692,694,696,698,701],{"class":615,"line":684},3,[613,686,653],{"class":652},[613,688,656],{"class":618},[613,690,691],{"class":659}," TresCanvas",[613,693,669],{"class":618},[613,695,672],{"class":652},[613,697,675],{"class":618},[613,699,700],{"class":639},"@tresjs/core",[613,702,681],{"class":618},[613,704,706,709,711],{"class":615,"line":705},4,[613,707,708],{"class":618},"\u003C/",[613,710,623],{"class":622},[613,712,645],{"class":618},[613,714,716],{"class":615,"line":715},5,[613,717,718],{"emptyLinePlaceholder":570},"\n",[613,720,722,724,727],{"class":615,"line":721},6,[613,723,619],{"class":618},[613,725,726],{"class":622},"template",[613,728,645],{"class":618},[613,730,732,735,738,741,743,745,748,750],{"class":615,"line":731},7,[613,733,734],{"class":618}," \u003C",[613,736,737],{"class":622},"TresCanvas",[613,739,740],{"class":626}," clear-color",[613,742,633],{"class":618},[613,744,636],{"class":618},[613,746,747],{"class":639},"#222",[613,749,636],{"class":618},[613,751,645],{"class":618},[613,753,755,758,761],{"class":615,"line":754},8,[613,756,757],{"class":618}," \u003C",[613,759,760],{"class":622},"TresPerspectiveCamera",[613,762,763],{"class":618}," />\n",[613,765,767,769,772],{"class":615,"line":766},9,[613,768,757],{"class":618},[613,770,771],{"class":622},"OrbitControls",[613,773,763],{"class":618},[613,775,777],{"class":615,"line":776},10,[613,778,718],{"emptyLinePlaceholder":570},[613,780,782,784,787,790,793,795,797,801,803],{"class":615,"line":781},11,[613,783,757],{"class":618},[613,785,786],{"class":622},"TresAxesHelper",[613,788,789],{"class":618}," :",[613,791,792],{"class":626},"scale",[613,794,633],{"class":618},[613,796,636],{"class":618},[613,798,800],{"class":799},"sbssI","2",[613,802,636],{"class":618},[613,804,763],{"class":618},[613,806,808],{"class":615,"line":807},12,[613,809,718],{"emptyLinePlaceholder":570},[613,811,813,815,817,820,823,826],{"class":812,"line":607},[615,649],[613,814,757],{"class":618},[613,816,37],{"class":622},[613,818,819],{"class":626}," top",[613,821,822],{"class":626}," right",[613,824,825],{"class":626}," back",[613,827,645],{"class":618},[613,829,831,834,837],{"class":615,"line":830},14,[613,832,833],{"class":618}," \u003C",[613,835,836],{"class":622},"TresMesh",[613,838,645],{"class":618},[613,840,842,845,848],{"class":615,"line":841},15,[613,843,844],{"class":618}," \u003C",[613,846,847],{"class":622},"TresBoxGeometry",[613,849,763],{"class":618},[613,851,853,855,858],{"class":615,"line":852},16,[613,854,844],{"class":618},[613,856,857],{"class":622},"TresMeshNormalMaterial",[613,859,763],{"class":618},[613,861,863,866,868],{"class":615,"line":862},17,[613,864,865],{"class":618}," \u003C/",[613,867,836],{"class":622},[613,869,645],{"class":618},[613,871,873,876,878],{"class":872,"line":608},[615,649],[613,874,875],{"class":618}," \u003C/",[613,877,37],{"class":622},[613,879,645],{"class":618},[613,881,883,886,888],{"class":615,"line":882},19,[613,884,885],{"class":618}," \u003C/",[613,887,737],{"class":622},[613,889,645],{"class":618},[613,891,893,895,897],{"class":615,"line":892},20,[613,894,708],{"class":618},[613,896,726],{"class":622},[613,898,645],{"class":618},[480,900,902],{"id":901},"props","Props",[590,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",{},[594,934,935],{},"top",[931,937,938,939,942,943,946],{},"If ",[594,940,941],{},"true",", aligns bounding box bottom to ",[594,944,945],{},"0"," on the y-axis",[931,948,949],{},[594,950,951],{},"false",[913,953,954,959,967],{},[931,955,956],{},[594,957,958],{},"bottom",[931,960,938,961,963,964,966],{},[594,962,941],{},", aligns bounding box top to ",[594,965,945],{}," on the y-axis.",[931,968,969],{},[594,970,951],{},[913,972,973,978,986],{},[931,974,975],{},[594,976,977],{},"left",[931,979,938,980,982,983,985],{},[594,981,941],{},", aligns bounding box right to ",[594,984,945],{}," on the x-axis.",[931,987,988],{},[594,989,951],{},[913,991,992,997,1004],{},[931,993,994],{},[594,995,996],{},"right",[931,998,938,999,1001,1002,985],{},[594,1000,941],{},", aligns bounding box left to ",[594,1003,945],{},[931,1005,1006],{},[594,1007,951],{},[913,1009,1010,1015,1023],{},[931,1011,1012],{},[594,1013,1014],{},"front",[931,1016,938,1017,1019,1020,1022],{},[594,1018,941],{},", aligns bounding box back to ",[594,1021,945],{}," on the z-axis.",[931,1024,1025],{},[594,1026,951],{},[913,1028,1029,1034,1041],{},[931,1030,1031],{},[594,1032,1033],{},"back",[931,1035,938,1036,1038,1039,1022],{},[594,1037,941],{},", aligns bounding box front to ",[594,1040,945],{},[931,1042,1043],{},[594,1044,951],{},[913,1046,1047,1052,1057],{},[931,1048,1049],{},[594,1050,1051],{},"disable",[931,1053,938,1054,1056],{},[594,1055,941],{},", disables alignment on all axes.",[931,1058,1059],{},[594,1060,951],{},[913,1062,1063,1068,1073],{},[931,1064,1065],{},[594,1066,1067],{},"disableX",[931,1069,938,1070,1072],{},[594,1071,941],{},", disables alignment on the x-axis.",[931,1074,1075],{},[594,1076,951],{},[913,1078,1079,1084,1089],{},[931,1080,1081],{},[594,1082,1083],{},"disableY",[931,1085,938,1086,1088],{},[594,1087,941],{},", disables alignment on the y-axis.",[931,1090,1091],{},[594,1092,951],{},[913,1094,1095,1100,1105],{},[931,1096,1097],{},[594,1098,1099],{},"disableZ",[931,1101,938,1102,1104],{},[594,1103,941],{},", disables alignment on the z-axis.",[931,1106,1107],{},[594,1108,951],{},[913,1110,1111,1116,1127],{},[931,1112,1113],{},[594,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],{},[594,1130,941],{},[913,1132,1133,1138,1141],{},[931,1134,1135],{},[594,1136,1137],{},"onAlign",[931,1139,1140],{},"Callback that fires when updating, after measurement.",[931,1142],{},[913,1144,1145,1149,1155],{},[931,1146,1147],{},[594,1148,596],{},[931,1150,1151,1152,1154],{},"If set, component will only update when ",[594,1153,596],{},"'s value changes. If unset, component will update every frame.",[931,1156,1157],{},[594,1158,1159],{},"undefined",[480,1161,1163],{"id":1162},"aligncallbackoptions","AlignCallbackOptions",[602,1165,1168],{"className":1166,"code":1167,"language":640,"meta":552,"style":552},"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",[594,1169,1170,1185,1191,1202,1207,1216,1226,1235,1244,1254,1264,1274,1283,1292,1301],{"__ignoreMap":552},[613,1171,1172,1175,1178,1182],{"class":615,"line":553},[613,1173,1174],{"class":652},"export",[613,1176,1177],{"class":626}," interface",[613,1179,1181],{"class":1180},"sBMFI"," AlignCallbackOptions",[613,1183,1184],{"class":618}," {\n",[613,1186,1187],{"class":615,"line":554},[613,1188,1190],{"class":1189},"sHwdD"," /** The next parent above \u003CAlign /> */\n",[613,1192,1193,1196,1199],{"class":615,"line":684},[613,1194,1195],{"class":622}," parent",[613,1197,1198],{"class":618},":",[613,1200,1201],{"class":1180}," Object3D\n",[613,1203,1204],{"class":615,"line":705},[613,1205,1206],{"class":1189}," /** The outmost container group of the \u003CAlign/> component */\n",[613,1208,1209,1212,1214],{"class":615,"line":715},[613,1210,1211],{"class":622}," container",[613,1213,1198],{"class":618},[613,1215,1201],{"class":1180},[613,1217,1218,1221,1223],{"class":615,"line":721},[613,1219,1220],{"class":622}," width",[613,1222,1198],{"class":618},[613,1224,1225],{"class":1180}," number\n",[613,1227,1228,1231,1233],{"class":615,"line":731},[613,1229,1230],{"class":622}," height",[613,1232,1198],{"class":618},[613,1234,1225],{"class":1180},[613,1236,1237,1240,1242],{"class":615,"line":754},[613,1238,1239],{"class":622}," depth",[613,1241,1198],{"class":618},[613,1243,1225],{"class":1180},[613,1245,1246,1249,1251],{"class":615,"line":766},[613,1247,1248],{"class":622}," boundingBox",[613,1250,1198],{"class":618},[613,1252,1253],{"class":1180}," Box3\n",[613,1255,1256,1259,1261],{"class":615,"line":776},[613,1257,1258],{"class":622}," boundingSphere",[613,1260,1198],{"class":618},[613,1262,1263],{"class":1180}," Sphere\n",[613,1265,1266,1269,1271],{"class":615,"line":781},[613,1267,1268],{"class":622}," center",[613,1270,1198],{"class":618},[613,1272,1273],{"class":1180}," Vector3\n",[613,1275,1276,1279,1281],{"class":615,"line":807},[613,1277,1278],{"class":622}," verticalAlignment",[613,1280,1198],{"class":618},[613,1282,1225],{"class":1180},[613,1284,1285,1288,1290],{"class":615,"line":607},[613,1286,1287],{"class":622}," horizontalAlignment",[613,1289,1198],{"class":618},[613,1291,1225],{"class":1180},[613,1293,1294,1297,1299],{"class":615,"line":830},[613,1295,1296],{"class":622}," depthAlignment",[613,1298,1198],{"class":618},[613,1300,1225],{"class":1180},[613,1302,1303],{"class":615,"line":841},[613,1304,1305],{"class":618},"}\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 pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":552,"searchDepth":553,"depth":554,"links":1311},[1312,1313,1314],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},{"id":1162,"depth":554,"text":1163},"Calculate and align children within their parent using bounding boxes.",{},{"title":37,"description":1315},"xKHSzqW-P7t9zP-D9aaYnfHnsXGeMVyRjLNmM0UU0M8",{"id":1320,"title":41,"body":1321,"description":1661,"extension":567,"links":568,"meta":1662,"navigation":570,"path":42,"seo":1663,"stem":43,"__hash__":1664},"docs/2.api/1.abstractions/billboard.md",{"type":477,"value":1322,"toc":1657},[1323,1328,1335,1337,1578,1580,1654],[584,1324,1325],{},[1326,1327],"abstractions-billboard",{},[590,1329,1330,1331,1334],{},"Adds a ",[594,1332,1333],{},"THREE.Group"," that always faces the camera.",[480,1336,15],{"id":600},[602,1338,1341],{"className":604,"code":1339,"highlights":1340,"language":609,"meta":552,"style":552},"\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",[554,776,830],[594,1342,1343,1363,1392,1410,1418,1422,1430,1449,1457,1494,1503,1537,1545,1553,1562,1570],{"__ignoreMap":552},[613,1344,1345,1347,1349,1351,1353,1355,1357,1359,1361],{"class":615,"line":553},[613,1346,619],{"class":618},[613,1348,623],{"class":622},[613,1350,627],{"class":626},[613,1352,630],{"class":626},[613,1354,633],{"class":618},[613,1356,636],{"class":618},[613,1358,640],{"class":639},[613,1360,636],{"class":618},[613,1362,645],{"class":618},[613,1364,1366,1368,1370,1373,1375,1378,1380,1382,1384,1386,1388,1390],{"class":1365,"line":554},[615,649],[613,1367,653],{"class":652},[613,1369,656],{"class":618},[613,1371,1372],{"class":659}," Billboard",[613,1374,663],{"class":618},[613,1376,1377],{"class":659}," Box",[613,1379,663],{"class":618},[613,1381,666],{"class":659},[613,1383,669],{"class":618},[613,1385,672],{"class":652},[613,1387,675],{"class":618},[613,1389,678],{"class":639},[613,1391,681],{"class":618},[613,1393,1394,1396,1398,1400,1402,1404,1406,1408],{"class":615,"line":684},[613,1395,653],{"class":652},[613,1397,656],{"class":618},[613,1399,691],{"class":659},[613,1401,669],{"class":618},[613,1403,672],{"class":652},[613,1405,675],{"class":618},[613,1407,700],{"class":639},[613,1409,681],{"class":618},[613,1411,1412,1414,1416],{"class":615,"line":705},[613,1413,708],{"class":618},[613,1415,623],{"class":622},[613,1417,645],{"class":618},[613,1419,1420],{"class":615,"line":715},[613,1421,718],{"emptyLinePlaceholder":570},[613,1423,1424,1426,1428],{"class":615,"line":721},[613,1425,619],{"class":618},[613,1427,726],{"class":622},[613,1429,645],{"class":618},[613,1431,1432,1434,1436,1438,1440,1442,1445,1447],{"class":615,"line":731},[613,1433,734],{"class":618},[613,1435,737],{"class":622},[613,1437,740],{"class":626},[613,1439,633],{"class":618},[613,1441,636],{"class":618},[613,1443,1444],{"class":639},"#333333",[613,1446,636],{"class":618},[613,1448,645],{"class":618},[613,1450,1451,1453,1455],{"class":615,"line":754},[613,1452,757],{"class":618},[613,1454,771],{"class":622},[613,1456,763],{"class":618},[613,1458,1459,1461,1463,1465,1468,1470,1472,1475,1477,1480,1482,1484,1487,1490,1492],{"class":615,"line":766},[613,1460,757],{"class":618},[613,1462,760],{"class":622},[613,1464,789],{"class":618},[613,1466,1467],{"class":626},"position",[613,1469,633],{"class":618},[613,1471,636],{"class":618},[613,1473,1474],{"class":618},"[",[613,1476,945],{"class":799},[613,1478,1479],{"class":618},", ",[613,1481,945],{"class":799},[613,1483,1479],{"class":618},[613,1485,1486],{"class":799},"10",[613,1488,1489],{"class":618},"]",[613,1491,636],{"class":618},[613,1493,763],{"class":618},[613,1495,1497,1499,1501],{"class":1496,"line":776},[615,649],[613,1498,757],{"class":618},[613,1500,41],{"class":622},[613,1502,645],{"class":618},[613,1504,1505,1507,1509,1511,1513,1515,1517,1519,1522,1524,1526,1528,1531,1533,1535],{"class":615,"line":781},[613,1506,833],{"class":618},[613,1508,197],{"class":622},[613,1510,789],{"class":618},[613,1512,792],{"class":626},[613,1514,633],{"class":618},[613,1516,636],{"class":618},[613,1518,1474],{"class":618},[613,1520,1521],{"class":799},"0.5",[613,1523,1479],{"class":618},[613,1525,1521],{"class":799},[613,1527,1479],{"class":618},[613,1529,1530],{"class":799},"0.001",[613,1532,1489],{"class":618},[613,1534,636],{"class":618},[613,1536,645],{"class":618},[613,1538,1539,1541,1543],{"class":615,"line":807},[613,1540,844],{"class":618},[613,1542,857],{"class":622},[613,1544,763],{"class":618},[613,1546,1547,1549,1551],{"class":615,"line":607},[613,1548,865],{"class":618},[613,1550,197],{"class":622},[613,1552,645],{"class":618},[613,1554,1556,1558,1560],{"class":1555,"line":830},[615,649],[613,1557,875],{"class":618},[613,1559,41],{"class":622},[613,1561,645],{"class":618},[613,1563,1564,1566,1568],{"class":615,"line":841},[613,1565,885],{"class":618},[613,1567,737],{"class":622},[613,1569,645],{"class":618},[613,1571,1572,1574,1576],{"class":615,"line":852},[613,1573,708],{"class":618},[613,1575,726],{"class":622},[613,1577,645],{"class":618},[480,1579,902],{"id":901},[907,1581,1582,1592],{},[910,1583,1584],{},[913,1585,1586,1588,1590],{},[916,1587,918],{"align":977},[916,1589,921],{"align":977},[916,1591,924],{},[926,1593,1594,1612,1626,1640],{},[913,1595,1596,1601,1608],{},[931,1597,1598],{"align":977},[594,1599,1600],{},"autoUpdate",[931,1602,1603,1604,1607],{"align":977},"Whether the ",[594,1605,1606],{},"\u003CBillboard />"," should face the camera automatically on every frame.",[931,1609,1610],{},[594,1611,941],{},[913,1613,1614,1619,1622],{},[931,1615,1616],{"align":977},[594,1617,1618],{},"lockX",[931,1620,1621],{"align":977},"Whether to lock the x-axis.",[931,1623,1624],{},[594,1625,951],{},[913,1627,1628,1633,1636],{},[931,1629,1630],{"align":977},[594,1631,1632],{},"lockY",[931,1634,1635],{"align":977},"Whether to lock the y-axis.",[931,1637,1638],{},[594,1639,951],{},[913,1641,1642,1647,1650],{},[931,1643,1644],{"align":977},[594,1645,1646],{},"lockZ",[931,1648,1649],{"align":977},"Whether to lock the z-axis.",[931,1651,1652],{},[594,1653,951],{},[1307,1655,1656],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":552,"searchDepth":553,"depth":554,"links":1658},[1659,1660],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},"Make objects always face the camera automatically.",{},{"title":41,"description":1661},"H0n9HWJ0zpK9LW-fd3nQd2xaa9PwDLLnVK3zImwMAZs",{"id":1666,"title":45,"body":1667,"description":2246,"extension":567,"links":568,"meta":2247,"navigation":570,"path":46,"seo":2248,"stem":47,"__hash__":2249},"docs/2.api/1.abstractions/camera-shake.md",{"type":477,"value":1668,"toc":2242},[1669,1674,1727,1729,2053,2092,2094,2240],[584,1670,1671],{},[1672,1673],"abstractions-camera-shake",{},[590,1675,1676,1679,1680,1479,1684,1688,1689,1692,1693,1479,1696,1699,1700,1703,1704,1479,1707,1479,1710,1713,1714,1717,1718,1126],{},[594,1677,1678],{},"\u003CCameraShake />"," is a component that adds ",[1681,1682,1683],"strong",{},"natural",[1685,1686,1687],"em",{},"noise-driven motion"," to the ",[1681,1690,1691],{},"active camera",".\nIt offers ",[1681,1694,1695],{},"per-axis control",[1681,1697,1698],{},"adjustable intensity",", and ",[1685,1701,1702],{},"optional decay"," — perfect for ",[1685,1705,1706],{},"handheld feel",[1685,1708,1709],{},"footsteps",[1685,1711,1712],{},"impacts",", or ",[1685,1715,1716],{},"engine rumble"," — and is based on the ",[1120,1719,1722,1723,1726],{"href":1720,"rel":1721},"https://drei.docs.pmnd.rs/staging/camera-shake#camerashake",[1124],"Drei ",[594,1724,1725],{},"CameraShake"," component",[480,1728,15],{"id":600},[602,1730,1733],{"className":604,"code":1731,"highlights":1732,"language":609,"meta":552,"style":552},"\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",[554,781,852],[594,1734,1735,1755,1779,1797,1805,1809,1817,1835,1868,1879,1883,1946,1966,1987,2020,2028,2037,2045],{"__ignoreMap":552},[613,1736,1737,1739,1741,1743,1745,1747,1749,1751,1753],{"class":615,"line":553},[613,1738,619],{"class":618},[613,1740,623],{"class":622},[613,1742,627],{"class":626},[613,1744,630],{"class":626},[613,1746,633],{"class":618},[613,1748,636],{"class":618},[613,1750,640],{"class":639},[613,1752,636],{"class":618},[613,1754,645],{"class":618},[613,1756,1758,1760,1762,1765,1767,1769,1771,1773,1775,1777],{"class":1757,"line":554},[615,649],[613,1759,653],{"class":652},[613,1761,656],{"class":618},[613,1763,1764],{"class":659}," CameraShake",[613,1766,663],{"class":618},[613,1768,666],{"class":659},[613,1770,669],{"class":618},[613,1772,672],{"class":652},[613,1774,675],{"class":618},[613,1776,678],{"class":639},[613,1778,681],{"class":618},[613,1780,1781,1783,1785,1787,1789,1791,1793,1795],{"class":615,"line":684},[613,1782,653],{"class":652},[613,1784,656],{"class":618},[613,1786,691],{"class":659},[613,1788,669],{"class":618},[613,1790,672],{"class":652},[613,1792,675],{"class":618},[613,1794,700],{"class":639},[613,1796,681],{"class":618},[613,1798,1799,1801,1803],{"class":615,"line":705},[613,1800,708],{"class":618},[613,1802,623],{"class":622},[613,1804,645],{"class":618},[613,1806,1807],{"class":615,"line":715},[613,1808,718],{"emptyLinePlaceholder":570},[613,1810,1811,1813,1815],{"class":615,"line":721},[613,1812,619],{"class":618},[613,1814,726],{"class":622},[613,1816,645],{"class":618},[613,1818,1819,1821,1823,1825,1827,1829,1831,1833],{"class":615,"line":731},[613,1820,734],{"class":618},[613,1822,737],{"class":622},[613,1824,740],{"class":626},[613,1826,633],{"class":618},[613,1828,636],{"class":618},[613,1830,747],{"class":639},[613,1832,636],{"class":618},[613,1834,645],{"class":618},[613,1836,1837,1839,1841,1843,1845,1847,1849,1851,1853,1855,1857,1859,1862,1864,1866],{"class":615,"line":754},[613,1838,757],{"class":618},[613,1840,760],{"class":622},[613,1842,789],{"class":618},[613,1844,1467],{"class":626},[613,1846,633],{"class":618},[613,1848,636],{"class":618},[613,1850,1474],{"class":618},[613,1852,945],{"class":799},[613,1854,1479],{"class":618},[613,1856,800],{"class":799},[613,1858,1479],{"class":618},[613,1860,1861],{"class":799},"6",[613,1863,1489],{"class":618},[613,1865,636],{"class":618},[613,1867,763],{"class":618},[613,1869,1870,1872,1874,1877],{"class":615,"line":766},[613,1871,757],{"class":618},[613,1873,771],{"class":622},[613,1875,1876],{"class":626}," make-default",[613,1878,763],{"class":618},[613,1880,1881],{"class":615,"line":776},[613,1882,718],{"emptyLinePlaceholder":570},[613,1884,1886,1888,1890,1892,1895,1897,1899,1902,1904,1906,1909,1911,1913,1916,1918,1920,1923,1925,1927,1929,1931,1933,1936,1938,1940,1942,1944],{"class":1885,"line":781},[615,649],[613,1887,757],{"class":618},[613,1889,1725],{"class":622},[613,1891,789],{"class":618},[613,1893,1894],{"class":626},"intensity",[613,1896,633],{"class":618},[613,1898,636],{"class":618},[613,1900,1901],{"class":799},"1",[613,1903,636],{"class":618},[613,1905,789],{"class":618},[613,1907,1908],{"class":626},"max-yaw",[613,1910,633],{"class":618},[613,1912,636],{"class":618},[613,1914,1915],{"class":799},"0.01",[613,1917,636],{"class":618},[613,1919,789],{"class":618},[613,1921,1922],{"class":626},"max-pitch",[613,1924,633],{"class":618},[613,1926,636],{"class":618},[613,1928,1915],{"class":799},[613,1930,636],{"class":618},[613,1932,789],{"class":618},[613,1934,1935],{"class":626},"max-roll",[613,1937,633],{"class":618},[613,1939,636],{"class":618},[613,1941,1915],{"class":799},[613,1943,636],{"class":618},[613,1945,763],{"class":618},[613,1947,1948,1950,1952,1954,1956,1958,1960,1962,1964],{"class":615,"line":807},[613,1949,833],{"class":618},[613,1951,786],{"class":622},[613,1953,789],{"class":618},[613,1955,792],{"class":626},[613,1957,633],{"class":618},[613,1959,636],{"class":618},[613,1961,800],{"class":799},[613,1963,636],{"class":618},[613,1965,763],{"class":618},[613,1967,1968,1970,1972,1974,1977,1979,1981,1983,1985],{"class":615,"line":607},[613,1969,833],{"class":618},[613,1971,836],{"class":622},[613,1973,789],{"class":618},[613,1975,1976],{"class":626},"position-y",[613,1978,633],{"class":618},[613,1980,636],{"class":618},[613,1982,1521],{"class":799},[613,1984,636],{"class":618},[613,1986,645],{"class":618},[613,1988,1989,1991,1993,1995,1998,2000,2002,2004,2006,2008,2010,2012,2014,2016,2018],{"class":615,"line":830},[613,1990,844],{"class":618},[613,1992,847],{"class":622},[613,1994,789],{"class":618},[613,1996,1997],{"class":626},"args",[613,1999,633],{"class":618},[613,2001,636],{"class":618},[613,2003,1474],{"class":618},[613,2005,1901],{"class":799},[613,2007,1479],{"class":618},[613,2009,1901],{"class":799},[613,2011,1479],{"class":618},[613,2013,1901],{"class":799},[613,2015,1489],{"class":618},[613,2017,636],{"class":618},[613,2019,763],{"class":618},[613,2021,2022,2024,2026],{"class":615,"line":841},[613,2023,844],{"class":618},[613,2025,857],{"class":622},[613,2027,763],{"class":618},[613,2029,2031,2033,2035],{"class":2030,"line":852},[615,649],[613,2032,865],{"class":618},[613,2034,836],{"class":622},[613,2036,645],{"class":618},[613,2038,2039,2041,2043],{"class":615,"line":862},[613,2040,885],{"class":618},[613,2042,737],{"class":622},[613,2044,645],{"class":618},[613,2046,2047,2049,2051],{"class":615,"line":608},[613,2048,708],{"class":618},[613,2050,726],{"class":622},[613,2052,645],{"class":618},[2054,2055,2056,2077],"prose-note",{},[590,2057,2058,2060,2061,2066,2067,2070,2071,2076],{},[594,2059,1678],{}," is fully compatible with ",[1681,2062,2063],{},[594,2064,2065],{},"\u003COrbitControls />",".\nTo ensure it works ",[1685,2068,2069],{},"as expected",", make sure to add the ",[1681,2072,2073],{},[594,2074,2075],{},"make-default"," prop:",[602,2078,2080],{"className":604,"code":2079,"language":609,"meta":552,"style":552},"\u003COrbitControls make-default />\n",[594,2081,2082],{"__ignoreMap":552},[613,2083,2084,2086,2088,2090],{"class":615,"line":553},[613,2085,619],{"class":618},[613,2087,771],{"class":622},[613,2089,1876],{"class":626},[613,2091,763],{"class":618},[480,2093,902],{"id":901},[907,2095,2096,2106],{},[910,2097,2098],{},[913,2099,2100,2102,2104],{},[916,2101,918],{},[916,2103,921],{},[916,2105,924],{},[926,2107,2108,2121,2137,2155,2169,2183,2197,2212,2226],{},[913,2109,2110,2114,2117],{},[931,2111,2112],{},[594,2113,1894],{},[931,2115,2116],{},"The intensity of the shake (0–1).",[931,2118,2119],{},[594,2120,1901],{},[913,2122,2123,2128,2133],{},[931,2124,2125],{},[594,2126,2127],{},"decay",[931,2129,938,2130,2132],{},[594,2131,941],{},", intensity decays over time.",[931,2134,2135],{},[594,2136,951],{},[913,2138,2139,2144,2150],{},[931,2140,2141],{},[594,2142,2143],{},"decayRate",[931,2145,2146,2147,2149],{},"How fast intensity changes when ",[594,2148,2127],{}," is enabled.",[931,2151,2152],{},[594,2153,2154],{},"0.65",[913,2156,2157,2162,2165],{},[931,2158,2159],{},[594,2160,2161],{},"maxYaw",[931,2163,2164],{},"Maximum yaw angle in radians.",[931,2166,2167],{},[594,2168,1915],{},[913,2170,2171,2176,2179],{},[931,2172,2173],{},[594,2174,2175],{},"maxPitch",[931,2177,2178],{},"Maximum pitch angle in radians.",[931,2180,2181],{},[594,2182,1915],{},[913,2184,2185,2190,2193],{},[931,2186,2187],{},[594,2188,2189],{},"maxRoll",[931,2191,2192],{},"Maximum roll angle in radians.",[931,2194,2195],{},[594,2196,1915],{},[913,2198,2199,2204,2207],{},[931,2200,2201],{},[594,2202,2203],{},"yawFrequency",[931,2205,2206],{},"Frequency of yaw oscillation.",[931,2208,2209],{},[594,2210,2211],{},"0.1",[913,2213,2214,2219,2222],{},[931,2215,2216],{},[594,2217,2218],{},"pitchFrequency",[931,2220,2221],{},"Frequency of pitch oscillation.",[931,2223,2224],{},[594,2225,2211],{},[913,2227,2228,2233,2236],{},[931,2229,2230],{},[594,2231,2232],{},"rollFrequency",[931,2234,2235],{},"Frequency of roll oscillation.",[931,2237,2238],{},[594,2239,2211],{},[1307,2241,1656],{},{"title":552,"searchDepth":553,"depth":554,"links":2243},[2244,2245],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},"Apply smooth camera shake to the active camera.",{},{"title":45,"description":2246},"tbo--_1LLyK1wDUHqKdzu8KZiLMIGya4l_8miKZTrMc",{"id":2251,"title":49,"body":2252,"description":7511,"extension":567,"links":568,"meta":7512,"navigation":570,"path":50,"seo":7513,"stem":51,"__hash__":7514},"docs/2.api/1.abstractions/decal.md",{"type":477,"value":2253,"toc":7476},[2254,2260,2342,2348,2350,2365,2839,2855,2859,2870,3039,3055,3058,3072,3124,3149,3153,3166,3171,3237,3244,3250,3267,3355,3360,3374,3449,4190,4195,4235,4248,4310,4313,4323,4409,4416,4436,4446,4449,4666,4678,4686,4701,5039,5043,5067,5465,5479,5499,5503,5519,5756,5762,5955,5961,6096,6105,6112,6168,6269,6274,6420,6425,6466,6470,6526,6530,6601,6605,6683,6690,6705,6746,6795,7473],[590,2255,2256,2259],{},[594,2257,2258],{},"\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.",[2261,2262,2263,2275,2288,2302,2309,2320,2332],"ul",{},[2264,2265,2266,2267,2270,2271,2274],"li",{},"🎨 Drop-in ",[1681,2268,2269],{},"editor UI"," via ",[594,2272,2273],{},"\u003CDecalDebugUI>"," — placement, rotate / scale / snap, tint, flip, layers, undo / redo, import / export.",[2264,2276,2277,2278,2270,2281,2287],{},"🛠 ",[1681,2279,2280],{},"Programmatic API",[1120,2282,2284],{"href":2283},"#programmatic-api-usedecaleditor",[594,2285,2286],{},"useDecalEditor()"," for custom panels and automation.",[2264,2289,2290,2291,2294,2295,2298,2299,1126],{},"🖼️ ",[1681,2292,2293],{},"Texture palette"," — pass an array of ",[594,2296,2297],{},"Texture"," to ",[594,2300,2301],{},":map",[2264,2303,2304,2305,2308],{},"🧩 ",[1681,2306,2307],{},"Custom material"," — override the default via the slot.",[2264,2310,2311,2312,2315,2316,2319],{},"💾 ",[1681,2313,2314],{},"Lossless JSON"," — ",[594,2317,2318],{},"v-model:data"," round-trips to plain JSON.",[2264,2321,2322,2323,2326,2327,2331],{},"⚡ ",[1681,2324,2325],{},"BVH-accelerated"," — auto-detected via ",[1120,2328,2329],{"href":308},[594,2330,307],{},"; 10–100× faster on dense meshes.",[2264,2333,2334,2335,2315,2338,2341],{},"📚 ",[1681,2336,2337],{},"Per-mesh stacking",[594,2339,2340],{},"zIndex"," with automatic polygon-offset.",[2343,2344,2345],"scene-wrapper",{},[2346,2347],"abstractions-decal",{},[480,2349,15],{"id":600},[590,2351,2352,2353,2355,2356,2359,2360,2362,2363,1126],{},"The minimal setup is a ",[594,2354,2258],{}," placed as a child of any ",[594,2357,2358],{},"\u003CTresMesh>",",\nwith a JSON list of stamped decals bound via ",[594,2361,2318],{}," and one or\nmore textures via ",[594,2364,2301],{},[602,2366,2368],{"className":604,"code":2367,"language":609,"meta":552,"style":552},"\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",[594,2369,2370,2390,2418,2436,2455,2459,2497,2501,2515,2520,2537,2563,2586,2612,2623,2639,2644,2649,2657,2661,2669,2678,2712,2721,2730,2739,2761,2812,2821,2830],{"__ignoreMap":552},[613,2371,2372,2374,2376,2378,2380,2382,2384,2386,2388],{"class":615,"line":553},[613,2373,619],{"class":618},[613,2375,623],{"class":622},[613,2377,627],{"class":626},[613,2379,630],{"class":626},[613,2381,633],{"class":618},[613,2383,636],{"class":618},[613,2385,640],{"class":639},[613,2387,636],{"class":618},[613,2389,645],{"class":618},[613,2391,2392,2394,2396,2399,2401,2403,2405,2408,2410,2412,2414,2416],{"class":615,"line":554},[613,2393,653],{"class":652},[613,2395,656],{"class":618},[613,2397,2398],{"class":659}," Decal",[613,2400,663],{"class":618},[613,2402,666],{"class":659},[613,2404,663],{"class":618},[613,2406,2407],{"class":659}," useTexture",[613,2409,669],{"class":618},[613,2411,672],{"class":652},[613,2413,675],{"class":618},[613,2415,678],{"class":639},[613,2417,681],{"class":618},[613,2419,2420,2422,2424,2426,2428,2430,2432,2434],{"class":615,"line":684},[613,2421,653],{"class":652},[613,2423,656],{"class":618},[613,2425,691],{"class":659},[613,2427,669],{"class":618},[613,2429,672],{"class":652},[613,2431,675],{"class":618},[613,2433,700],{"class":639},[613,2435,681],{"class":618},[613,2437,2438,2440,2442,2445,2447,2449,2451,2453],{"class":615,"line":705},[613,2439,653],{"class":652},[613,2441,656],{"class":618},[613,2443,2444],{"class":659}," reactive",[613,2446,669],{"class":618},[613,2448,672],{"class":652},[613,2450,675],{"class":618},[613,2452,609],{"class":639},[613,2454,681],{"class":618},[613,2456,2457],{"class":615,"line":715},[613,2458,718],{"emptyLinePlaceholder":570},[613,2460,2461,2464,2466,2469,2471,2474,2477,2480,2483,2486,2489,2492,2494],{"class":615,"line":721},[613,2462,2463],{"class":626},"const",[613,2465,656],{"class":618},[613,2467,2468],{"class":622}," state",[613,2470,1198],{"class":618},[613,2472,2473],{"class":659}," texture ",[613,2475,2476],{"class":618},"}",[613,2478,2479],{"class":618}," =",[613,2481,2407],{"class":2482},"s2Zo4",[613,2484,2485],{"class":659},"(",[613,2487,2488],{"class":618},"'",[613,2490,2491],{"class":639},"/textures/logo.png",[613,2493,2488],{"class":618},[613,2495,2496],{"class":659},")\n",[613,2498,2499],{"class":615,"line":731},[613,2500,718],{"emptyLinePlaceholder":570},[613,2502,2503,2505,2508,2510,2512],{"class":615,"line":754},[613,2504,2463],{"class":626},[613,2506,2507],{"class":659}," decals ",[613,2509,633],{"class":618},[613,2511,2444],{"class":2482},[613,2513,2514],{"class":659},"([\n",[613,2516,2517],{"class":615,"line":766},[613,2518,2519],{"class":618}," {\n",[613,2521,2522,2525,2527,2529,2532,2534],{"class":615,"line":776},[613,2523,2524],{"class":622}," id",[613,2526,1198],{"class":618},[613,2528,675],{"class":618},[613,2530,2531],{"class":639},"logo-1",[613,2533,2488],{"class":618},[613,2535,2536],{"class":618},",\n",[613,2538,2539,2542,2544,2547,2549,2551,2554,2556,2559,2561],{"class":615,"line":781},[613,2540,2541],{"class":622}," position",[613,2543,1198],{"class":618},[613,2545,2546],{"class":659}," [",[613,2548,945],{"class":799},[613,2550,663],{"class":618},[613,2552,2553],{"class":799}," 0",[613,2555,663],{"class":618},[613,2557,2558],{"class":799}," 0.5",[613,2560,1489],{"class":659},[613,2562,2536],{"class":618},[613,2564,2565,2568,2570,2572,2574,2576,2578,2580,2582,2584],{"class":615,"line":807},[613,2566,2567],{"class":622}," orientation",[613,2569,1198],{"class":618},[613,2571,2546],{"class":659},[613,2573,945],{"class":799},[613,2575,663],{"class":618},[613,2577,2553],{"class":799},[613,2579,663],{"class":618},[613,2581,2553],{"class":799},[613,2583,1489],{"class":659},[613,2585,2536],{"class":618},[613,2587,2588,2591,2593,2595,2598,2600,2603,2605,2608,2610],{"class":615,"line":607},[613,2589,2590],{"class":622}," size",[613,2592,1198],{"class":618},[613,2594,2546],{"class":659},[613,2596,2597],{"class":799},"0.75",[613,2599,663],{"class":618},[613,2601,2602],{"class":799}," 0.17",[613,2604,663],{"class":618},[613,2606,2607],{"class":799}," 1",[613,2609,1489],{"class":659},[613,2611,2536],{"class":618},[613,2613,2614,2617,2619,2621],{"class":615,"line":830},[613,2615,2616],{"class":622}," zIndex",[613,2618,1198],{"class":618},[613,2620,2553],{"class":799},[613,2622,2536],{"class":618},[613,2624,2625,2628,2630,2632,2635,2637],{"class":615,"line":841},[613,2626,2627],{"class":622}," map",[613,2629,1198],{"class":618},[613,2631,675],{"class":618},[613,2633,2634],{"class":639},"logo.png",[613,2636,2488],{"class":618},[613,2638,2536],{"class":618},[613,2640,2641],{"class":615,"line":852},[613,2642,2643],{"class":618}," },\n",[613,2645,2646],{"class":615,"line":862},[613,2647,2648],{"class":659},"])\n",[613,2650,2651,2653,2655],{"class":615,"line":608},[613,2652,708],{"class":618},[613,2654,623],{"class":622},[613,2656,645],{"class":618},[613,2658,2659],{"class":615,"line":882},[613,2660,718],{"emptyLinePlaceholder":570},[613,2662,2663,2665,2667],{"class":615,"line":892},[613,2664,619],{"class":618},[613,2666,726],{"class":622},[613,2668,645],{"class":618},[613,2670,2672,2674,2676],{"class":615,"line":2671},21,[613,2673,734],{"class":618},[613,2675,737],{"class":622},[613,2677,645],{"class":618},[613,2679,2681,2683,2685,2687,2689,2691,2693,2695,2697,2699,2701,2703,2706,2708,2710],{"class":615,"line":2680},22,[613,2682,757],{"class":618},[613,2684,760],{"class":622},[613,2686,789],{"class":618},[613,2688,1467],{"class":626},[613,2690,633],{"class":618},[613,2692,636],{"class":618},[613,2694,1474],{"class":618},[613,2696,800],{"class":799},[613,2698,1479],{"class":618},[613,2700,800],{"class":799},[613,2702,1479],{"class":618},[613,2704,2705],{"class":799},"3",[613,2707,1489],{"class":618},[613,2709,636],{"class":618},[613,2711,763],{"class":618},[613,2713,2715,2717,2719],{"class":615,"line":2714},23,[613,2716,757],{"class":618},[613,2718,771],{"class":622},[613,2720,763],{"class":618},[613,2722,2724,2726,2728],{"class":615,"line":2723},24,[613,2725,757],{"class":618},[613,2727,836],{"class":622},[613,2729,645],{"class":618},[613,2731,2733,2735,2737],{"class":615,"line":2732},25,[613,2734,833],{"class":618},[613,2736,847],{"class":622},[613,2738,763],{"class":618},[613,2740,2742,2744,2747,2750,2752,2754,2757,2759],{"class":615,"line":2741},26,[613,2743,833],{"class":618},[613,2745,2746],{"class":622},"TresMeshStandardMaterial",[613,2748,2749],{"class":626}," color",[613,2751,633],{"class":618},[613,2753,636],{"class":618},[613,2755,2756],{"class":639},"white",[613,2758,636],{"class":618},[613,2760,763],{"class":618},[613,2762,2764,2766,2768,2771,2773,2775,2778,2780,2783,2785,2788,2790,2792,2795,2797,2799,2802,2804,2806,2808,2810],{"class":615,"line":2763},27,[613,2765,833],{"class":618},[613,2767,49],{"class":622},[613,2769,2770],{"class":652}," v-if",[613,2772,633],{"class":618},[613,2774,636],{"class":618},[613,2776,2777],{"class":659},"texture",[613,2779,636],{"class":618},[613,2781,2782],{"class":626}," v-model",[613,2784,1198],{"class":618},[613,2786,2787],{"class":626},"data",[613,2789,633],{"class":618},[613,2791,636],{"class":618},[613,2793,2794],{"class":659},"decals",[613,2796,636],{"class":618},[613,2798,789],{"class":618},[613,2800,2801],{"class":626},"map",[613,2803,633],{"class":618},[613,2805,636],{"class":618},[613,2807,2777],{"class":659},[613,2809,636],{"class":618},[613,2811,763],{"class":618},[613,2813,2815,2817,2819],{"class":615,"line":2814},28,[613,2816,875],{"class":618},[613,2818,836],{"class":622},[613,2820,645],{"class":618},[613,2822,2824,2826,2828],{"class":615,"line":2823},29,[613,2825,885],{"class":618},[613,2827,737],{"class":622},[613,2829,645],{"class":618},[613,2831,2833,2835,2837],{"class":615,"line":2832},30,[613,2834,708],{"class":618},[613,2836,726],{"class":622},[613,2838,645],{"class":618},[2054,2840,2841],{},[590,2842,2843,2844,2846,2847,2850,2851,2854],{},"The ",[594,2845,2318],{}," array is the ",[1681,2848,2849],{},"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 ",[594,2852,2853],{},".json"," file.",[480,2856,2858],{"id":2857},"multiple-textures-palette","Multiple textures (palette)",[590,2860,2861,2862,2864,2865,2869],{},"Pass an array to ",[594,2863,2301],{}," to give users a palette of textures to pick\nfrom. The array returned by ",[1120,2866,2867],{"href":142},[594,2868,141],{},"\nplugs in directly:",[602,2871,2873],{"className":604,"code":2872,"language":609,"meta":552,"style":552},"\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",[594,2874,2875,2895,2918,2922,2939,2950,2961,2972,2976,2984,2988,2996,3031],{"__ignoreMap":552},[613,2876,2877,2879,2881,2883,2885,2887,2889,2891,2893],{"class":615,"line":553},[613,2878,619],{"class":618},[613,2880,623],{"class":622},[613,2882,627],{"class":626},[613,2884,630],{"class":626},[613,2886,633],{"class":618},[613,2888,636],{"class":618},[613,2890,640],{"class":639},[613,2892,636],{"class":618},[613,2894,645],{"class":618},[613,2896,2897,2899,2901,2903,2905,2908,2910,2912,2914,2916],{"class":615,"line":554},[613,2898,653],{"class":652},[613,2900,656],{"class":618},[613,2902,2398],{"class":659},[613,2904,663],{"class":618},[613,2906,2907],{"class":659}," useTextures",[613,2909,669],{"class":618},[613,2911,672],{"class":652},[613,2913,675],{"class":618},[613,2915,678],{"class":639},[613,2917,681],{"class":618},[613,2919,2920],{"class":615,"line":684},[613,2921,718],{"emptyLinePlaceholder":570},[613,2923,2924,2926,2928,2931,2933,2935,2937],{"class":615,"line":705},[613,2925,2463],{"class":626},[613,2927,656],{"class":618},[613,2929,2930],{"class":659}," textures ",[613,2932,2476],{"class":618},[613,2934,2479],{"class":618},[613,2936,2907],{"class":2482},[613,2938,2514],{"class":659},[613,2940,2941,2944,2946,2948],{"class":615,"line":715},[613,2942,2943],{"class":618}," '",[613,2945,2491],{"class":639},[613,2947,2488],{"class":618},[613,2949,2536],{"class":618},[613,2951,2952,2954,2957,2959],{"class":615,"line":721},[613,2953,2943],{"class":618},[613,2955,2956],{"class":639},"/textures/badge.png",[613,2958,2488],{"class":618},[613,2960,2536],{"class":618},[613,2962,2963,2965,2968,2970],{"class":615,"line":731},[613,2964,2943],{"class":618},[613,2966,2967],{"class":639},"/textures/sticker.png",[613,2969,2488],{"class":618},[613,2971,2536],{"class":618},[613,2973,2974],{"class":615,"line":754},[613,2975,2648],{"class":659},[613,2977,2978,2980,2982],{"class":615,"line":766},[613,2979,708],{"class":618},[613,2981,623],{"class":622},[613,2983,645],{"class":618},[613,2985,2986],{"class":615,"line":776},[613,2987,718],{"emptyLinePlaceholder":570},[613,2989,2990,2992,2994],{"class":615,"line":781},[613,2991,619],{"class":618},[613,2993,726],{"class":622},[613,2995,645],{"class":618},[613,2997,2998,3000,3002,3004,3006,3008,3010,3012,3014,3016,3018,3020,3022,3024,3027,3029],{"class":615,"line":807},[613,2999,734],{"class":618},[613,3001,49],{"class":622},[613,3003,2782],{"class":626},[613,3005,1198],{"class":618},[613,3007,2787],{"class":626},[613,3009,633],{"class":618},[613,3011,636],{"class":618},[613,3013,2794],{"class":659},[613,3015,636],{"class":618},[613,3017,789],{"class":618},[613,3019,2801],{"class":626},[613,3021,633],{"class":618},[613,3023,636],{"class":618},[613,3025,3026],{"class":659},"textures",[613,3028,636],{"class":618},[613,3030,763],{"class":618},[613,3032,3033,3035,3037],{"class":615,"line":607},[613,3034,708],{"class":618},[613,3036,726],{"class":622},[613,3038,645],{"class":618},[590,3040,3041,3042,2315,3045,3047,3048,3051,3052,3054],{},"Each entry references its texture by ",[594,3043,3044],{},"name",[594,3046,2258],{}," auto-fills\n",[594,3049,3050],{},"texture.name"," from the URL filename when missing, so JSON ",[594,3053,2801],{},"\nfields round-trip cleanly.",[480,3056,2307],{"id":3057},"custom-material",[590,3059,3060,3061,3064,3065,2536,3068,3071],{},"The default material is ",[594,3062,3063],{},"MeshBasicMaterial",". Override it via the slot\nto plug in any Three.js material — ",[594,3066,3067],{},"MeshStandardMaterial",[594,3069,3070],{},"MeshPhysicalMaterial",", or a custom shader.",[602,3073,3075],{"className":604,"code":3074,"language":609,"meta":552,"style":552},"\u003CDecal v-model:data=\"decals\" :map=\"texture\">\n \u003CTresMeshStandardMaterial :transparent=\"true\" :polygon-offset=\"true\" />\n\u003C/Decal>\n",[594,3076,3077,3111,3116],{"__ignoreMap":552},[613,3078,3079,3081,3083,3085,3087,3089,3091,3093,3095,3097,3099,3101,3103,3105,3107,3109],{"class":615,"line":553},[613,3080,619],{"class":618},[613,3082,49],{"class":622},[613,3084,2782],{"class":626},[613,3086,1198],{"class":618},[613,3088,2787],{"class":626},[613,3090,633],{"class":618},[613,3092,636],{"class":618},[613,3094,2794],{"class":659},[613,3096,636],{"class":618},[613,3098,789],{"class":618},[613,3100,2801],{"class":626},[613,3102,633],{"class":618},[613,3104,636],{"class":618},[613,3106,2777],{"class":659},[613,3108,636],{"class":618},[613,3110,645],{"class":618},[613,3112,3113],{"class":615,"line":554},[613,3114,3115],{"class":659}," \u003CTresMeshStandardMaterial :transparent=\"true\" :polygon-offset=\"true\" />\n",[613,3117,3118,3120,3122],{"class":615,"line":684},[613,3119,708],{"class":618},[613,3121,49],{"class":622},[613,3123,645],{"class":618},[2054,3125,3126],{},[590,3127,3128,3129,3132,3133,3136,3137,3132,3140,3143,3144,2536,3146,3148],{},"Keep ",[594,3130,3131],{},"transparent: true"," and ",[594,3134,3135],{},"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 ",[594,3138,3139],{},".color",[594,3141,3142],{},".opacity"," (",[594,3145,3063],{},[594,3147,3067],{},", …) — bespoke shader materials are skipped\nsilently.",[480,3150,3152],{"id":3151},"stacking-decals-z-layering","Stacking decals (z-layering)",[590,3154,3155,3156,3158,3159,3162,3163,1126],{},"Each decal has a ",[594,3157,2340],{}," controlling its draw order on the parent\nmesh. Higher = on top. The component handles z-fighting via\n",[594,3160,3161],{},"polygonOffset"," automatically — but if you stack many decals near\nparallel surfaces and still see flicker, raise ",[594,3164,3165],{},"layerGap",[2343,3167,3168],{},[3169,3170],"abstractions-decal-stacking",{},[602,3172,3174],{"className":604,"code":3173,"language":609,"meta":552,"style":552},"\u003CDecal\n v-model:data=\"decals\"\n :map=\"textures\"\n :layer-gap=\"0.002\"\n/>\n",[594,3175,3176,3183,3201,3216,3232],{"__ignoreMap":552},[613,3177,3178,3180],{"class":615,"line":553},[613,3179,619],{"class":618},[613,3181,3182],{"class":622},"Decal\n",[613,3184,3185,3188,3190,3192,3194,3196,3198],{"class":615,"line":554},[613,3186,3187],{"class":626}," v-model",[613,3189,1198],{"class":618},[613,3191,2787],{"class":626},[613,3193,633],{"class":618},[613,3195,636],{"class":618},[613,3197,2794],{"class":659},[613,3199,3200],{"class":618},"\"\n",[613,3202,3203,3206,3208,3210,3212,3214],{"class":615,"line":684},[613,3204,3205],{"class":618}," :",[613,3207,2801],{"class":626},[613,3209,633],{"class":618},[613,3211,636],{"class":618},[613,3213,3026],{"class":659},[613,3215,3200],{"class":618},[613,3217,3218,3220,3223,3225,3227,3230],{"class":615,"line":705},[613,3219,3205],{"class":618},[613,3221,3222],{"class":626},"layer-gap",[613,3224,633],{"class":618},[613,3226,636],{"class":618},[613,3228,3229],{"class":799},"0.002",[613,3231,3200],{"class":618},[613,3233,3234],{"class":615,"line":715},[613,3235,3236],{"class":659},"/>\n",[590,3238,3239,3240,3243],{},"zIndex stacks are ",[1681,3241,3242],{},"per-mesh"," — two decals on different meshes never\ncompete for the same layer slot.",[480,3245,3247,3248],{"id":3246},"editable-mode-decaldebugui","Editable mode + ",[594,3249,2273],{},[590,3251,3252,3253,3256,3257,3259,3260,3263,3264,1126],{},"Add the ",[594,3254,3255],{},"editable"," prop to mount the interactive editor, then pair it\nwith ",[594,3258,2273],{}," — a full in-canvas editor that ships as a drop-in\nHTML overlay sitting ",[1681,3261,3262],{},"outside"," ",[594,3265,3266],{},"\u003CTresCanvas>",[3268,3269,3270,3284,3305],"prose-warning",{},[590,3271,3272,3274,3275,3278,3279,3281,3282,1126],{},[594,3273,2273],{}," needs its stylesheet — import it ",[1681,3276,3277],{},"once"," at your app\nentry. ",[594,3280,2258],{}," itself is style-less, so this is only needed when you\nmount ",[594,3283,2273],{},[602,3285,3287],{"className":1166,"code":3286,"language":640,"meta":552,"style":552},"// Vite / Vue — in main.ts\nimport '@tresjs/cientos/styles.css'\n",[594,3288,3289,3294],{"__ignoreMap":552},[613,3290,3291],{"class":615,"line":553},[613,3292,3293],{"class":1189},"// Vite / Vue — in main.ts\n",[613,3295,3296,3298,3300,3303],{"class":615,"line":554},[613,3297,653],{"class":652},[613,3299,675],{"class":618},[613,3301,3302],{"class":639},"@tresjs/cientos/styles.css",[613,3304,681],{"class":618},[602,3306,3308],{"className":1166,"code":3307,"language":640,"meta":552,"style":552},"// Nuxt — in nuxt.config.ts\nexport default defineNuxtConfig({\n css: ['@tresjs/cientos/styles.css'],\n})\n",[594,3309,3310,3315,3330,3349],{"__ignoreMap":552},[613,3311,3312],{"class":615,"line":553},[613,3313,3314],{"class":1189},"// Nuxt — in nuxt.config.ts\n",[613,3316,3317,3319,3322,3325,3327],{"class":615,"line":554},[613,3318,1174],{"class":652},[613,3320,3321],{"class":652}," default",[613,3323,3324],{"class":2482}," defineNuxtConfig",[613,3326,2485],{"class":659},[613,3328,3329],{"class":618},"{\n",[613,3331,3332,3335,3337,3339,3341,3343,3345,3347],{"class":615,"line":684},[613,3333,3334],{"class":622}," css",[613,3336,1198],{"class":618},[613,3338,2546],{"class":659},[613,3340,2488],{"class":618},[613,3342,3302],{"class":639},[613,3344,2488],{"class":618},[613,3346,1489],{"class":659},[613,3348,2536],{"class":618},[613,3350,3351,3353],{"class":615,"line":705},[613,3352,2476],{"class":618},[613,3354,2496],{"class":659},[2343,3356,3357],{},[3358,3359],"abstractions-decal-editable",{},[590,3361,3362,3363,3366,3367,3370,3371,1126],{},"Three panels: a floating ",[1681,3364,3365],{},"handle"," anchored to the editing decal, a\nbottom ",[1681,3368,3369],{},"dock"," (texture picker + edit tools), a right-side ",[1681,3372,3373],{},"layer\npanel",[2261,3375,3376,3386,3391,3397,3410,3415,3420,3426,3432,3438,3444],{},[2264,3377,3378,3381,3382,3385],{},[1681,3379,3380],{},"Floating handle"," (rotate + scale + snap + live ",[594,3383,3384],{},"scale% · rotation° · L\u003Cn>"," badge)",[2264,3387,3388],{},[1681,3389,3390],{},"Color tint & opacity",[2264,3392,3393,3396],{},[1681,3394,3395],{},"Mirror"," (flip X / flip Y)",[2264,3398,3399,3143,3402,3405,3406,3409],{},[1681,3400,3401],{},"Layer controls",[594,3403,3404],{},"L+"," / ",[594,3407,3408],{},"L-",")",[2264,3411,3412],{},[1681,3413,3414],{},"Visibility toggle",[2264,3416,3417],{},[1681,3418,3419],{},"Per-row remove",[2264,3421,3422,3425],{},[1681,3423,3424],{},"Layer panel"," (mesh-grouped, drag-to-reorder)",[2264,3427,3428,3431],{},[1681,3429,3430],{},"Texture picker"," (drag or click-to-arm)",[2264,3433,3434,3437],{},[1681,3435,3436],{},"Mode badge"," (placing / editing status)",[2264,3439,3440,3443],{},[1681,3441,3442],{},"Undo / Redo"," buttons",[2264,3445,3446,3443],{},[1681,3447,3448],{},"Import / Export",[602,3450,3452],{"className":604,"code":3451,"language":609,"meta":552,"style":552},"\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",[594,3453,3454,3474,3505,3532,3550,3578,3582,3617,3621,3656,3668,3679,3685,3689,3728,3768,3776,3780,3788,3838,3842,3850,3883,3891,3895,3941,3949,3967,4020,4028,4032,4076,4103,4122,4163,4172,4181],{"__ignoreMap":552},[613,3455,3456,3458,3460,3462,3464,3466,3468,3470,3472],{"class":615,"line":553},[613,3457,619],{"class":618},[613,3459,623],{"class":622},[613,3461,627],{"class":626},[613,3463,630],{"class":626},[613,3465,633],{"class":618},[613,3467,636],{"class":618},[613,3469,640],{"class":639},[613,3471,636],{"class":618},[613,3473,645],{"class":618},[613,3475,3476,3478,3480,3482,3484,3487,3489,3491,3493,3495,3497,3499,3501,3503],{"class":615,"line":554},[613,3477,653],{"class":652},[613,3479,656],{"class":618},[613,3481,2398],{"class":659},[613,3483,663],{"class":618},[613,3485,3486],{"class":659}," DecalDebugUI",[613,3488,663],{"class":618},[613,3490,666],{"class":659},[613,3492,663],{"class":618},[613,3494,2907],{"class":659},[613,3496,669],{"class":618},[613,3498,672],{"class":652},[613,3500,675],{"class":618},[613,3502,678],{"class":639},[613,3504,681],{"class":618},[613,3506,3507,3509,3512,3514,3517,3519,3522,3524,3526,3528,3530],{"class":615,"line":684},[613,3508,653],{"class":652},[613,3510,3511],{"class":652}," type",[613,3513,656],{"class":618},[613,3515,3516],{"class":659}," DecalEditorSession",[613,3518,663],{"class":618},[613,3520,3521],{"class":659}," DecalJsonEntry",[613,3523,669],{"class":618},[613,3525,672],{"class":652},[613,3527,675],{"class":618},[613,3529,678],{"class":639},[613,3531,681],{"class":618},[613,3533,3534,3536,3538,3540,3542,3544,3546,3548],{"class":615,"line":705},[613,3535,653],{"class":652},[613,3537,656],{"class":618},[613,3539,691],{"class":659},[613,3541,669],{"class":618},[613,3543,672],{"class":652},[613,3545,675],{"class":618},[613,3547,700],{"class":639},[613,3549,681],{"class":618},[613,3551,3552,3554,3556,3559,3561,3563,3565,3568,3570,3572,3574,3576],{"class":615,"line":715},[613,3553,653],{"class":652},[613,3555,656],{"class":618},[613,3557,3558],{"class":659}," computed",[613,3560,663],{"class":618},[613,3562,2444],{"class":659},[613,3564,663],{"class":618},[613,3566,3567],{"class":659}," shallowRef",[613,3569,669],{"class":618},[613,3571,672],{"class":652},[613,3573,675],{"class":618},[613,3575,609],{"class":639},[613,3577,681],{"class":618},[613,3579,3580],{"class":615,"line":721},[613,3581,718],{"emptyLinePlaceholder":570},[613,3583,3584,3586,3588,3590,3592,3594,3596,3599,3601,3604,3606,3608,3610,3613,3615],{"class":615,"line":731},[613,3585,2463],{"class":626},[613,3587,656],{"class":618},[613,3589,2930],{"class":659},[613,3591,2476],{"class":618},[613,3593,2479],{"class":618},[613,3595,2907],{"class":2482},[613,3597,3598],{"class":659},"([",[613,3600,2488],{"class":618},[613,3602,3603],{"class":639},"/textures/a.png",[613,3605,2488],{"class":618},[613,3607,663],{"class":618},[613,3609,675],{"class":618},[613,3611,3612],{"class":639},"/textures/b.png",[613,3614,2488],{"class":618},[613,3616,2648],{"class":659},[613,3618,3619],{"class":615,"line":754},[613,3620,718],{"emptyLinePlaceholder":570},[613,3622,3623,3625,3628,3630,3632,3634,3637,3639,3642,3644,3646,3649,3652,3654],{"class":615,"line":766},[613,3624,2463],{"class":626},[613,3626,3627],{"class":659}," layout ",[613,3629,633],{"class":618},[613,3631,2444],{"class":2482},[613,3633,619],{"class":618},[613,3635,3636],{"class":1180},"Record",[613,3638,619],{"class":618},[613,3640,3641],{"class":1180},"string",[613,3643,663],{"class":618},[613,3645,3521],{"class":1180},[613,3647,3648],{"class":659},"[]",[613,3650,3651],{"class":618},">>",[613,3653,2485],{"class":659},[613,3655,3329],{"class":618},[613,3657,3658,3661,3663,3666],{"class":615,"line":776},[613,3659,3660],{"class":622}," cube",[613,3662,1198],{"class":618},[613,3664,3665],{"class":659}," []",[613,3667,2536],{"class":618},[613,3669,3670,3673,3675,3677],{"class":615,"line":781},[613,3671,3672],{"class":622}," sphere",[613,3674,1198],{"class":618},[613,3676,3665],{"class":659},[613,3678,2536],{"class":618},[613,3680,3681,3683],{"class":615,"line":807},[613,3682,2476],{"class":618},[613,3684,2496],{"class":659},[613,3686,3687],{"class":615,"line":607},[613,3688,718],{"emptyLinePlaceholder":570},[613,3690,3691,3693,3696,3698,3700,3703,3706,3708,3710,3712,3715,3718,3721,3723,3726],{"class":615,"line":830},[613,3692,2463],{"class":626},[613,3694,3695],{"class":659}," decalRef ",[613,3697,633],{"class":618},[613,3699,3567],{"class":2482},[613,3701,3702],{"class":618},"\u003C{",[613,3704,3705],{"class":622}," editor",[613,3707,1198],{"class":618},[613,3709,3516],{"class":1180},[613,3711,669],{"class":618},[613,3713,3714],{"class":618}," |",[613,3716,3717],{"class":1180}," null",[613,3719,3720],{"class":618},">",[613,3722,2485],{"class":659},[613,3724,3725],{"class":618},"null",[613,3727,2496],{"class":659},[613,3729,3730,3732,3735,3737,3739,3741,3744,3747,3750,3752,3755,3758,3761,3764,3766],{"class":615,"line":841},[613,3731,2463],{"class":626},[613,3733,3734],{"class":659}," session ",[613,3736,633],{"class":618},[613,3738,3558],{"class":2482},[613,3740,2485],{"class":659},[613,3742,3743],{"class":618},"()",[613,3745,3746],{"class":626}," =>",[613,3748,3749],{"class":659}," decalRef",[613,3751,1126],{"class":618},[613,3753,3754],{"class":659},"value",[613,3756,3757],{"class":618},"?.",[613,3759,3760],{"class":659},"editor ",[613,3762,3763],{"class":618},"??",[613,3765,3717],{"class":618},[613,3767,2496],{"class":659},[613,3769,3770,3772,3774],{"class":615,"line":852},[613,3771,708],{"class":618},[613,3773,623],{"class":622},[613,3775,645],{"class":618},[613,3777,3778],{"class":615,"line":862},[613,3779,718],{"emptyLinePlaceholder":570},[613,3781,3782,3784,3786],{"class":615,"line":608},[613,3783,619],{"class":618},[613,3785,726],{"class":622},[613,3787,645],{"class":618},[613,3789,3790,3792,3795,3797,3800,3802,3804,3806,3808,3810,3812,3814,3816,3818,3821,3823,3825,3827,3829,3831,3834,3836],{"class":615,"line":882},[613,3791,734],{"class":618},[613,3793,3794],{"class":622},"DecalDebugUI",[613,3796,789],{"class":618},[613,3798,3799],{"class":626},"session",[613,3801,633],{"class":618},[613,3803,636],{"class":618},[613,3805,3799],{"class":659},[613,3807,636],{"class":618},[613,3809,789],{"class":618},[613,3811,3026],{"class":626},[613,3813,633],{"class":618},[613,3815,636],{"class":618},[613,3817,3026],{"class":659},[613,3819,3820],{"class":618}," ?? []",[613,3822,636],{"class":618},[613,3824,789],{"class":618},[613,3826,2787],{"class":626},[613,3828,633],{"class":618},[613,3830,636],{"class":618},[613,3832,3833],{"class":659},"layout",[613,3835,636],{"class":618},[613,3837,763],{"class":618},[613,3839,3840],{"class":615,"line":892},[613,3841,718],{"emptyLinePlaceholder":570},[613,3843,3844,3846,3848],{"class":615,"line":2671},[613,3845,734],{"class":618},[613,3847,737],{"class":622},[613,3849,645],{"class":618},[613,3851,3852,3854,3856,3858,3860,3862,3864,3866,3868,3870,3872,3874,3877,3879,3881],{"class":615,"line":2680},[613,3853,757],{"class":618},[613,3855,760],{"class":622},[613,3857,789],{"class":618},[613,3859,1467],{"class":626},[613,3861,633],{"class":618},[613,3863,636],{"class":618},[613,3865,1474],{"class":618},[613,3867,800],{"class":799},[613,3869,1479],{"class":618},[613,3871,800],{"class":799},[613,3873,1479],{"class":618},[613,3875,3876],{"class":799},"4",[613,3878,1489],{"class":618},[613,3880,636],{"class":618},[613,3882,763],{"class":618},[613,3884,3885,3887,3889],{"class":615,"line":2714},[613,3886,757],{"class":618},[613,3888,771],{"class":622},[613,3890,763],{"class":618},[613,3892,3893],{"class":615,"line":2723},[613,3894,718],{"emptyLinePlaceholder":570},[613,3896,3897,3899,3901,3904,3906,3908,3911,3913,3915,3917,3919,3921,3924,3927,3929,3931,3933,3935,3937,3939],{"class":615,"line":2732},[613,3898,757],{"class":618},[613,3900,836],{"class":622},[613,3902,3903],{"class":626}," name",[613,3905,633],{"class":618},[613,3907,636],{"class":618},[613,3909,3910],{"class":639},"cube",[613,3912,636],{"class":618},[613,3914,789],{"class":618},[613,3916,1467],{"class":626},[613,3918,633],{"class":618},[613,3920,636],{"class":618},[613,3922,3923],{"class":618},"[-",[613,3925,3926],{"class":799},"1.2",[613,3928,1479],{"class":618},[613,3930,945],{"class":799},[613,3932,1479],{"class":618},[613,3934,945],{"class":799},[613,3936,1489],{"class":618},[613,3938,636],{"class":618},[613,3940,645],{"class":618},[613,3942,3943,3945,3947],{"class":615,"line":2741},[613,3944,833],{"class":618},[613,3946,847],{"class":622},[613,3948,763],{"class":618},[613,3950,3951,3953,3955,3957,3959,3961,3963,3965],{"class":615,"line":2763},[613,3952,833],{"class":618},[613,3954,2746],{"class":622},[613,3956,2749],{"class":626},[613,3958,633],{"class":618},[613,3960,636],{"class":618},[613,3962,2756],{"class":639},[613,3964,636],{"class":618},[613,3966,763],{"class":618},[613,3968,3969,3971,3973,3976,3978,3980,3983,3985,3987,3989,3991,3993,3995,3997,3999,4001,4003,4005,4007,4009,4011,4013,4015,4018],{"class":615,"line":2814},[613,3970,833],{"class":618},[613,3972,49],{"class":622},[613,3974,3975],{"class":626}," ref",[613,3977,633],{"class":618},[613,3979,636],{"class":618},[613,3981,3982],{"class":639},"decalRef",[613,3984,636],{"class":618},[613,3986,2782],{"class":626},[613,3988,1198],{"class":618},[613,3990,2787],{"class":626},[613,3992,633],{"class":618},[613,3994,636],{"class":618},[613,3996,3833],{"class":659},[613,3998,1126],{"class":618},[613,4000,3910],{"class":659},[613,4002,636],{"class":618},[613,4004,789],{"class":618},[613,4006,2801],{"class":626},[613,4008,633],{"class":618},[613,4010,636],{"class":618},[613,4012,3026],{"class":659},[613,4014,636],{"class":618},[613,4016,4017],{"class":626}," editable",[613,4019,763],{"class":618},[613,4021,4022,4024,4026],{"class":615,"line":2823},[613,4023,875],{"class":618},[613,4025,836],{"class":622},[613,4027,645],{"class":618},[613,4029,4030],{"class":615,"line":2832},[613,4031,718],{"emptyLinePlaceholder":570},[613,4033,4035,4037,4039,4041,4043,4045,4048,4050,4052,4054,4056,4058,4060,4062,4064,4066,4068,4070,4072,4074],{"class":615,"line":4034},31,[613,4036,757],{"class":618},[613,4038,836],{"class":622},[613,4040,3903],{"class":626},[613,4042,633],{"class":618},[613,4044,636],{"class":618},[613,4046,4047],{"class":639},"sphere",[613,4049,636],{"class":618},[613,4051,789],{"class":618},[613,4053,1467],{"class":626},[613,4055,633],{"class":618},[613,4057,636],{"class":618},[613,4059,1474],{"class":618},[613,4061,3926],{"class":799},[613,4063,1479],{"class":618},[613,4065,945],{"class":799},[613,4067,1479],{"class":618},[613,4069,945],{"class":799},[613,4071,1489],{"class":618},[613,4073,636],{"class":618},[613,4075,645],{"class":618},[613,4077,4079,4081,4084,4086,4088,4090,4092,4094,4097,4099,4101],{"class":615,"line":4078},32,[613,4080,833],{"class":618},[613,4082,4083],{"class":622},"TresSphereGeometry",[613,4085,789],{"class":618},[613,4087,1997],{"class":626},[613,4089,633],{"class":618},[613,4091,636],{"class":618},[613,4093,1474],{"class":618},[613,4095,4096],{"class":799},"0.7",[613,4098,1489],{"class":618},[613,4100,636],{"class":618},[613,4102,763],{"class":618},[613,4104,4106,4108,4110,4112,4114,4116,4118,4120],{"class":615,"line":4105},33,[613,4107,833],{"class":618},[613,4109,2746],{"class":622},[613,4111,2749],{"class":626},[613,4113,633],{"class":618},[613,4115,636],{"class":618},[613,4117,2756],{"class":639},[613,4119,636],{"class":618},[613,4121,763],{"class":618},[613,4123,4125,4127,4129,4131,4133,4135,4137,4139,4141,4143,4145,4147,4149,4151,4153,4155,4157,4159,4161],{"class":615,"line":4124},34,[613,4126,833],{"class":618},[613,4128,49],{"class":622},[613,4130,2782],{"class":626},[613,4132,1198],{"class":618},[613,4134,2787],{"class":626},[613,4136,633],{"class":618},[613,4138,636],{"class":618},[613,4140,3833],{"class":659},[613,4142,1126],{"class":618},[613,4144,4047],{"class":659},[613,4146,636],{"class":618},[613,4148,789],{"class":618},[613,4150,2801],{"class":626},[613,4152,633],{"class":618},[613,4154,636],{"class":618},[613,4156,3026],{"class":659},[613,4158,636],{"class":618},[613,4160,4017],{"class":626},[613,4162,763],{"class":618},[613,4164,4166,4168,4170],{"class":615,"line":4165},35,[613,4167,875],{"class":618},[613,4169,836],{"class":622},[613,4171,645],{"class":618},[613,4173,4175,4177,4179],{"class":615,"line":4174},36,[613,4176,885],{"class":618},[613,4178,737],{"class":622},[613,4180,645],{"class":618},[613,4182,4184,4186,4188],{"class":615,"line":4183},37,[613,4185,708],{"class":618},[613,4187,726],{"class":622},[613,4189,645],{"class":618},[4191,4192,4194],"h3",{"id":4193},"how-the-wiring-works","How the wiring works",[2261,4196,4197,4208,4217,4226],{},[2264,4198,4199,4202,4203,4205,4206,1126],{},[594,4200,4201],{},"v-model:data=\"layout.cube\""," — each ",[594,4204,2258],{}," owns one slice of the\nlayout object. The slice's key matches the parent mesh's ",[594,4207,3044],{},[2264,4209,4210,4213,4214,4216],{},[594,4211,4212],{},"ref=\"decalRef\""," — grab a reference to any ",[594,4215,2258],{}," in the canvas;\nthe session is canvas-shared so it doesn't matter which.",[2264,4218,4219,4222,4223,4225],{},[594,4220,4221],{},"session = decalRef.value?.editor"," — the editor session powers\n",[594,4224,2273],{},". Pass it through.",[2264,4227,4228,4231,4232,4234],{},[594,4229,4230],{},":data=\"layout\""," on ",[594,4233,2273],{}," — the full mesh-keyed layout, so\nthe overlay can render the layer panel and route imports back to each\nDecal by name.",[2054,4236,4237],{},[590,4238,4239,4240,4243,4244,4247],{},"The overlay is full-viewport (",[594,4241,4242],{},"position: fixed; inset: 0",") by default.\nWhen embedding inside a bounded stage (docs, modal, sidebar preview),\npass ",[594,4245,4246],{},"contained"," so the overlay positions itself absolutely against\nthe nearest positioned ancestor instead.",[602,4249,4251],{"className":604,"code":4250,"language":609,"meta":552,"style":552},"\u003Cdiv style=\"position: relative; height: 500px;\">\n \u003CDecalDebugUI contained ... />\n \u003CTresCanvas>...\u003C/TresCanvas>\n\u003C/div>\n",[594,4252,4253,4292,4297,4302],{"__ignoreMap":552},[613,4254,4255,4257,4260,4263,4265,4267,4270,4272,4275,4278,4281,4283,4286,4288,4290],{"class":615,"line":553},[613,4256,619],{"class":618},[613,4258,4259],{"class":622},"div",[613,4261,4262],{"class":626}," style",[613,4264,633],{"class":618},[613,4266,636],{"class":618},[613,4268,1467],{"class":4269},"sqsOY",[613,4271,1198],{"class":618},[613,4273,4274],{"class":659}," relative",[613,4276,4277],{"class":618},";",[613,4279,4280],{"class":4269}," height",[613,4282,1198],{"class":618},[613,4284,4285],{"class":799}," 500px",[613,4287,4277],{"class":618},[613,4289,636],{"class":618},[613,4291,645],{"class":618},[613,4293,4294],{"class":615,"line":554},[613,4295,4296],{"class":659}," \u003CDecalDebugUI contained ... />\n",[613,4298,4299],{"class":615,"line":684},[613,4300,4301],{"class":659}," \u003CTresCanvas>...\u003C/TresCanvas>\n",[613,4303,4304,4306,4308],{"class":615,"line":705},[613,4305,708],{"class":618},[613,4307,4259],{"class":622},[613,4309,645],{"class":618},[480,4311,3448],{"id":4312},"import-export",[590,4314,4315,4316,4319,4320,4322],{},"The Export button in the dock auto-downloads the current layout as\n",[594,4317,4318],{},"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",[594,4321,2258],{}," automatically — no extra host code needed.",[602,4324,4326],{"className":604,"code":4325,"language":609,"meta":552,"style":552},"\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",[594,4327,4328,4333,4364,4368,4373],{"__ignoreMap":552},[613,4329,4330],{"class":615,"line":553},[613,4331,4332],{"class":1189},"\u003C!-- Custom filename -->\n",[613,4334,4335,4337,4339,4341,4344,4346,4349,4352,4354,4356,4359,4362],{"class":615,"line":554},[613,4336,619],{"class":618},[613,4338,3794],{"class":622},[613,4340,789],{"class":618},[613,4342,4343],{"class":626},"export-filename",[613,4345,633],{"class":618},[613,4347,4348],{"class":618},"\"`${",[613,4350,4351],{"class":659},"sceneName",[613,4353,2476],{"class":618},[613,4355,2853],{"class":639},[613,4357,4358],{"class":618},"`\"",[613,4360,4361],{"class":618}," ...",[613,4363,763],{"class":618},[613,4365,4366],{"class":615,"line":684},[613,4367,718],{"emptyLinePlaceholder":570},[613,4369,4370],{"class":615,"line":705},[613,4371,4372],{"class":1189},"\u003C!-- Disable the built-in download — handle export yourself -->\n",[613,4374,4375,4377,4379,4381,4383,4385,4387,4389,4391,4394,4396,4398,4400,4403,4405,4407],{"class":615,"line":715},[613,4376,619],{"class":618},[613,4378,3794],{"class":622},[613,4380,789],{"class":618},[613,4382,4343],{"class":626},[613,4384,633],{"class":618},[613,4386,636],{"class":618},[613,4388,3725],{"class":618},[613,4390,636],{"class":618},[613,4392,4393],{"class":618}," @",[613,4395,1174],{"class":626},[613,4397,633],{"class":618},[613,4399,636],{"class":618},[613,4401,4402],{"class":659},"postToBackend",[613,4404,636],{"class":618},[613,4406,4361],{"class":618},[613,4408,763],{"class":618},[480,4410,4412,4413,3409],{"id":4411},"targeting-a-loaded-model-glb","Targeting a loaded model (",[594,4414,4415],{},".glb",[590,4417,4418,4419,4421,4422,4428,4429,4432,4433,4435],{},"A ",[594,4420,2258],{}," can be a ",[1681,4423,4424,4425],{},"direct child of ",[594,4426,4427],{},"\u003Cprimitive>",". Auto-resolution\nwalks one step up the scene graph and only accepts a ",[594,4430,4431],{},"Mesh"," — so the\nbehaviour depends on what the ",[594,4434,4427],{}," wraps.",[4191,4437,4439,4440,4443,4444],{"id":4438},"when-object-is-a-mesh","When ",[594,4441,4442],{},":object"," is a ",[594,4445,4431],{},[590,4447,4448],{},"The decal auto-resolves the wrapped mesh as its target. This is the\nsimplest option for a single-mesh asset:",[602,4450,4452],{"className":604,"code":4451,"language":609,"meta":552,"style":552},"\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",[594,4453,4454,4474,4497,4501,4542,4547,4555,4559,4567,4609,4650,4658],{"__ignoreMap":552},[613,4455,4456,4458,4460,4462,4464,4466,4468,4470,4472],{"class":615,"line":553},[613,4457,619],{"class":618},[613,4459,623],{"class":622},[613,4461,627],{"class":626},[613,4463,630],{"class":626},[613,4465,633],{"class":618},[613,4467,636],{"class":618},[613,4469,640],{"class":639},[613,4471,636],{"class":618},[613,4473,645],{"class":618},[613,4475,4476,4478,4480,4482,4484,4487,4489,4491,4493,4495],{"class":615,"line":554},[613,4477,653],{"class":652},[613,4479,656],{"class":618},[613,4481,2398],{"class":659},[613,4483,663],{"class":618},[613,4485,4486],{"class":659}," useGLTF",[613,4488,669],{"class":618},[613,4490,672],{"class":652},[613,4492,675],{"class":618},[613,4494,678],{"class":639},[613,4496,681],{"class":618},[613,4498,4499],{"class":615,"line":684},[613,4500,718],{"emptyLinePlaceholder":570},[613,4502,4503,4505,4507,4510,4512,4514,4516,4518,4520,4523,4525,4527,4529,4532,4534,4538,4540],{"class":615,"line":705},[613,4504,2463],{"class":626},[613,4506,656],{"class":618},[613,4508,4509],{"class":659}," nodes ",[613,4511,2476],{"class":618},[613,4513,2479],{"class":618},[613,4515,4486],{"class":2482},[613,4517,2485],{"class":659},[613,4519,2488],{"class":618},[613,4521,4522],{"class":639},"/models/helmet.glb",[613,4524,2488],{"class":618},[613,4526,663],{"class":618},[613,4528,656],{"class":618},[613,4530,4531],{"class":622}," draco",[613,4533,1198],{"class":618},[613,4535,4537],{"class":4536},"sfNiH"," true",[613,4539,669],{"class":618},[613,4541,2496],{"class":659},[613,4543,4544],{"class":615,"line":715},[613,4545,4546],{"class":1189},"// nodes.Helmet is a Mesh in this asset.\n",[613,4548,4549,4551,4553],{"class":615,"line":721},[613,4550,708],{"class":618},[613,4552,623],{"class":622},[613,4554,645],{"class":618},[613,4556,4557],{"class":615,"line":731},[613,4558,718],{"emptyLinePlaceholder":570},[613,4560,4561,4563,4565],{"class":615,"line":754},[613,4562,619],{"class":618},[613,4564,726],{"class":622},[613,4566,645],{"class":618},[613,4568,4569,4571,4574,4576,4578,4580,4583,4585,4588,4590,4592,4595,4597,4599,4601,4603,4605,4607],{"class":615,"line":766},[613,4570,734],{"class":618},[613,4572,4573],{"class":622},"primitive",[613,4575,2770],{"class":652},[613,4577,633],{"class":618},[613,4579,636],{"class":618},[613,4581,4582],{"class":659},"nodes",[613,4584,3757],{"class":618},[613,4586,4587],{"class":659},"Helmet",[613,4589,636],{"class":618},[613,4591,789],{"class":618},[613,4593,4594],{"class":626},"object",[613,4596,633],{"class":618},[613,4598,636],{"class":618},[613,4600,4582],{"class":659},[613,4602,1126],{"class":618},[613,4604,4587],{"class":659},[613,4606,636],{"class":618},[613,4608,645],{"class":618},[613,4610,4611,4613,4615,4617,4619,4621,4623,4625,4627,4629,4632,4634,4636,4638,4640,4642,4644,4646,4648],{"class":615,"line":776},[613,4612,757],{"class":618},[613,4614,49],{"class":622},[613,4616,2782],{"class":626},[613,4618,1198],{"class":618},[613,4620,2787],{"class":626},[613,4622,633],{"class":618},[613,4624,636],{"class":618},[613,4626,3833],{"class":659},[613,4628,1126],{"class":618},[613,4630,4631],{"class":659},"helmet",[613,4633,636],{"class":618},[613,4635,789],{"class":618},[613,4637,2801],{"class":626},[613,4639,633],{"class":618},[613,4641,636],{"class":618},[613,4643,3026],{"class":659},[613,4645,636],{"class":618},[613,4647,4017],{"class":626},[613,4649,763],{"class":618},[613,4651,4652,4654,4656],{"class":615,"line":781},[613,4653,885],{"class":618},[613,4655,4573],{"class":622},[613,4657,645],{"class":618},[613,4659,4660,4662,4664],{"class":615,"line":807},[613,4661,708],{"class":618},[613,4663,726],{"class":622},[613,4665,645],{"class":618},[2054,4667,4668],{},[590,4669,4670,4671,4673,4674,4677],{},"The resolved parent is the ",[594,4672,4427],{},"'s retargeting proxy rather than\nthe raw object. This is transparent in practice — geometry, ",[594,4675,4676],{},"matrixWorld","\nand raycasting all forward to the wrapped object — so the decal projects\nand follows transforms correctly.",[4191,4679,4439,4681,4443,4683],{"id":4680},"when-object-is-a-group",[594,4682,4442],{},[594,4684,4685],{},"Group",[590,4687,4688,4689,4691,4692,4694,4695,4697,4698,1198],{},"A named node in a ",[594,4690,4415],{}," is often a ",[594,4693,4685],{}," containing several child\nmeshes (e.g. a ceramic body + a metallic interior). Auto-resolution\nreturns ",[594,4696,3725],{}," in that case and the decal silently does nothing — pass\nthe actual target child via ",[594,4699,4700],{},":mesh",[602,4702,4704],{"className":604,"code":4703,"language":609,"meta":552,"style":552},"\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",[594,4705,4706,4726,4748,4766,4788,4792,4829,4834,4858,4906,4910,4918,4922,4930,4968,5023,5031],{"__ignoreMap":552},[613,4707,4708,4710,4712,4714,4716,4718,4720,4722,4724],{"class":615,"line":553},[613,4709,619],{"class":618},[613,4711,623],{"class":622},[613,4713,627],{"class":626},[613,4715,630],{"class":626},[613,4717,633],{"class":618},[613,4719,636],{"class":618},[613,4721,640],{"class":639},[613,4723,636],{"class":618},[613,4725,645],{"class":618},[613,4727,4728,4730,4732,4734,4736,4738,4740,4742,4744,4746],{"class":615,"line":554},[613,4729,653],{"class":652},[613,4731,656],{"class":618},[613,4733,2398],{"class":659},[613,4735,663],{"class":618},[613,4737,4486],{"class":659},[613,4739,669],{"class":618},[613,4741,672],{"class":652},[613,4743,675],{"class":618},[613,4745,678],{"class":639},[613,4747,681],{"class":618},[613,4749,4750,4752,4754,4756,4758,4760,4762,4764],{"class":615,"line":684},[613,4751,653],{"class":652},[613,4753,656],{"class":618},[613,4755,3558],{"class":659},[613,4757,669],{"class":618},[613,4759,672],{"class":652},[613,4761,675],{"class":618},[613,4763,609],{"class":639},[613,4765,681],{"class":618},[613,4767,4768,4770,4772,4774,4777,4779,4781,4783,4786],{"class":615,"line":705},[613,4769,653],{"class":652},[613,4771,3511],{"class":652},[613,4773,656],{"class":618},[613,4775,4776],{"class":659}," Mesh",[613,4778,669],{"class":618},[613,4780,672],{"class":652},[613,4782,675],{"class":618},[613,4784,4785],{"class":639},"three",[613,4787,681],{"class":618},[613,4789,4790],{"class":615,"line":715},[613,4791,718],{"emptyLinePlaceholder":570},[613,4793,4794,4796,4798,4800,4802,4804,4806,4808,4810,4813,4815,4817,4819,4821,4823,4825,4827],{"class":615,"line":721},[613,4795,2463],{"class":626},[613,4797,656],{"class":618},[613,4799,4509],{"class":659},[613,4801,2476],{"class":618},[613,4803,2479],{"class":618},[613,4805,4486],{"class":2482},[613,4807,2485],{"class":659},[613,4809,2488],{"class":618},[613,4811,4812],{"class":639},"/models/mug.glb",[613,4814,2488],{"class":618},[613,4816,663],{"class":618},[613,4818,656],{"class":618},[613,4820,4531],{"class":622},[613,4822,1198],{"class":618},[613,4824,4537],{"class":4536},[613,4826,669],{"class":618},[613,4828,2496],{"class":659},[613,4830,4831],{"class":615,"line":731},[613,4832,4833],{"class":1189},"// nodes.Mug is a Group — pick the child you want to decal.\n",[613,4835,4836,4838,4841,4843,4845,4847,4849,4851,4853,4855],{"class":615,"line":754},[613,4837,2463],{"class":626},[613,4839,4840],{"class":659}," body ",[613,4842,633],{"class":618},[613,4844,3558],{"class":2482},[613,4846,619],{"class":618},[613,4848,4431],{"class":1180},[613,4850,3714],{"class":618},[613,4852,3717],{"class":1180},[613,4854,3720],{"class":618},[613,4856,4857],{"class":659},"(\n",[613,4859,4860,4863,4865,4868,4870,4872,4874,4877,4879,4882,4884,4886,4889,4891,4894,4897,4899,4901,4903],{"class":615,"line":766},[613,4861,4862],{"class":618}," ()",[613,4864,3746],{"class":626},[613,4866,4867],{"class":659}," (nodes",[613,4869,1126],{"class":618},[613,4871,3754],{"class":659},[613,4873,3757],{"class":618},[613,4875,4876],{"class":659},"Mug",[613,4878,3757],{"class":618},[613,4880,4881],{"class":2482},"getObjectByName",[613,4883,2485],{"class":659},[613,4885,2488],{"class":618},[613,4887,4888],{"class":639},"Body",[613,4890,2488],{"class":618},[613,4892,4893],{"class":659},") ",[613,4895,4896],{"class":652},"as",[613,4898,4776],{"class":1180},[613,4900,4893],{"class":659},[613,4902,3763],{"class":618},[613,4904,4905],{"class":618}," null,\n",[613,4907,4908],{"class":615,"line":776},[613,4909,2496],{"class":659},[613,4911,4912,4914,4916],{"class":615,"line":781},[613,4913,708],{"class":618},[613,4915,623],{"class":622},[613,4917,645],{"class":618},[613,4919,4920],{"class":615,"line":807},[613,4921,718],{"emptyLinePlaceholder":570},[613,4923,4924,4926,4928],{"class":615,"line":607},[613,4925,619],{"class":618},[613,4927,726],{"class":622},[613,4929,645],{"class":618},[613,4931,4932,4934,4936,4938,4940,4942,4944,4946,4948,4950,4952,4954,4956,4958,4960,4962,4964,4966],{"class":615,"line":830},[613,4933,734],{"class":618},[613,4935,4573],{"class":622},[613,4937,2770],{"class":652},[613,4939,633],{"class":618},[613,4941,636],{"class":618},[613,4943,4582],{"class":659},[613,4945,3757],{"class":618},[613,4947,4876],{"class":659},[613,4949,636],{"class":618},[613,4951,789],{"class":618},[613,4953,4594],{"class":626},[613,4955,633],{"class":618},[613,4957,636],{"class":618},[613,4959,4582],{"class":659},[613,4961,1126],{"class":618},[613,4963,4876],{"class":659},[613,4965,636],{"class":618},[613,4967,645],{"class":618},[613,4969,4970,4972,4974,4976,4978,4980,4982,4984,4986,4988,4991,4993,4995,4997,4999,5001,5003,5005,5007,5010,5012,5014,5017,5019,5021],{"class":615,"line":841},[613,4971,757],{"class":618},[613,4973,49],{"class":622},[613,4975,2782],{"class":626},[613,4977,1198],{"class":618},[613,4979,2787],{"class":626},[613,4981,633],{"class":618},[613,4983,636],{"class":618},[613,4985,3833],{"class":659},[613,4987,1126],{"class":618},[613,4989,4990],{"class":659},"mug",[613,4992,636],{"class":618},[613,4994,789],{"class":618},[613,4996,2801],{"class":626},[613,4998,633],{"class":618},[613,5000,636],{"class":618},[613,5002,3026],{"class":659},[613,5004,636],{"class":618},[613,5006,789],{"class":618},[613,5008,5009],{"class":626},"mesh",[613,5011,633],{"class":618},[613,5013,636],{"class":618},[613,5015,5016],{"class":659},"body",[613,5018,636],{"class":618},[613,5020,4017],{"class":626},[613,5022,763],{"class":618},[613,5024,5025,5027,5029],{"class":615,"line":852},[613,5026,885],{"class":618},[613,5028,4573],{"class":622},[613,5030,645],{"class":618},[613,5032,5033,5035,5037],{"class":615,"line":862},[613,5034,708],{"class":618},[613,5036,726],{"class":622},[613,5038,645],{"class":618},[4191,5040,5042],{"id":5041},"targeting-an-extracted-sub-mesh","Targeting an extracted sub-mesh",[590,5044,5045,5046,5052,5053,5060,5061,5063,5064,1198],{},"Alternatively, ",[1681,5047,5048,5049,5051],{},"wrap a ",[594,5050,2358],{}," 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,5054,5057],{"href":5055,"rel":5056},"https://docs.tresjs.org/api/composables.html#usegraph",[1124],[594,5058,5059],{},"useGraph"," to\npull the sub-mesh, then build a regular ",[594,5062,2358],{}," around its\n",[594,5065,5066],{},":geometry",[602,5068,5070],{"className":604,"code":5069,"language":609,"meta":552,"style":552},"\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",[594,5071,5072,5092,5116,5134,5154,5172,5176,5208,5237,5251,5279,5287,5291,5299,5306,5328,5341,5364,5369,5409,5449,5457],{"__ignoreMap":552},[613,5073,5074,5076,5078,5080,5082,5084,5086,5088,5090],{"class":615,"line":553},[613,5075,619],{"class":618},[613,5077,623],{"class":622},[613,5079,627],{"class":626},[613,5081,630],{"class":626},[613,5083,633],{"class":618},[613,5085,636],{"class":618},[613,5087,640],{"class":639},[613,5089,636],{"class":618},[613,5091,645],{"class":618},[613,5093,5094,5096,5098,5101,5103,5106,5108,5110,5112,5114],{"class":615,"line":554},[613,5095,653],{"class":652},[613,5097,656],{"class":618},[613,5099,5100],{"class":659}," useGraph",[613,5102,663],{"class":618},[613,5104,5105],{"class":659}," useLoader",[613,5107,669],{"class":618},[613,5109,672],{"class":652},[613,5111,675],{"class":618},[613,5113,700],{"class":639},[613,5115,681],{"class":618},[613,5117,5118,5120,5122,5124,5126,5128,5130,5132],{"class":615,"line":684},[613,5119,653],{"class":652},[613,5121,656],{"class":618},[613,5123,2398],{"class":659},[613,5125,669],{"class":618},[613,5127,672],{"class":652},[613,5129,675],{"class":618},[613,5131,678],{"class":639},[613,5133,681],{"class":618},[613,5135,5136,5138,5140,5143,5145,5147,5149,5152],{"class":615,"line":705},[613,5137,653],{"class":652},[613,5139,656],{"class":618},[613,5141,5142],{"class":659}," GLTFLoader",[613,5144,669],{"class":618},[613,5146,672],{"class":652},[613,5148,675],{"class":618},[613,5150,5151],{"class":639},"three/examples/jsm/loaders/GLTFLoader.js",[613,5153,681],{"class":618},[613,5155,5156,5158,5160,5162,5164,5166,5168,5170],{"class":615,"line":715},[613,5157,653],{"class":652},[613,5159,656],{"class":618},[613,5161,3558],{"class":659},[613,5163,669],{"class":618},[613,5165,672],{"class":652},[613,5167,675],{"class":618},[613,5169,609],{"class":639},[613,5171,681],{"class":618},[613,5173,5174],{"class":615,"line":721},[613,5175,718],{"emptyLinePlaceholder":570},[613,5177,5178,5180,5182,5184,5186,5189,5191,5193,5195,5198,5200,5202,5204,5206],{"class":615,"line":731},[613,5179,2463],{"class":626},[613,5181,656],{"class":618},[613,5183,2468],{"class":622},[613,5185,1198],{"class":618},[613,5187,5188],{"class":659}," model ",[613,5190,2476],{"class":618},[613,5192,2479],{"class":618},[613,5194,5105],{"class":2482},[613,5196,5197],{"class":659},"(GLTFLoader",[613,5199,663],{"class":618},[613,5201,675],{"class":618},[613,5203,4522],{"class":639},[613,5205,2488],{"class":618},[613,5207,2496],{"class":659},[613,5209,5210,5212,5215,5217,5219,5221,5223,5225,5228,5230,5232,5234],{"class":615,"line":754},[613,5211,2463],{"class":626},[613,5213,5214],{"class":659}," scene ",[613,5216,633],{"class":618},[613,5218,3558],{"class":2482},[613,5220,2485],{"class":659},[613,5222,3743],{"class":618},[613,5224,3746],{"class":626},[613,5226,5227],{"class":659}," model",[613,5229,1126],{"class":618},[613,5231,3754],{"class":659},[613,5233,3757],{"class":618},[613,5235,5236],{"class":659},"scene)\n",[613,5238,5239,5241,5244,5246,5248],{"class":615,"line":766},[613,5240,2463],{"class":626},[613,5242,5243],{"class":659}," graph ",[613,5245,633],{"class":618},[613,5247,5100],{"class":2482},[613,5249,5250],{"class":659},"(scene)\n",[613,5252,5253,5255,5257,5259,5261,5263,5265,5267,5270,5272,5274,5276],{"class":615,"line":776},[613,5254,2463],{"class":626},[613,5256,4509],{"class":659},[613,5258,633],{"class":618},[613,5260,3558],{"class":2482},[613,5262,2485],{"class":659},[613,5264,3743],{"class":618},[613,5266,3746],{"class":626},[613,5268,5269],{"class":659}," graph",[613,5271,1126],{"class":618},[613,5273,3754],{"class":659},[613,5275,3757],{"class":618},[613,5277,5278],{"class":659},"nodes)\n",[613,5280,5281,5283,5285],{"class":615,"line":781},[613,5282,708],{"class":618},[613,5284,623],{"class":622},[613,5286,645],{"class":618},[613,5288,5289],{"class":615,"line":807},[613,5290,718],{"emptyLinePlaceholder":570},[613,5292,5293,5295,5297],{"class":615,"line":607},[613,5294,619],{"class":618},[613,5296,726],{"class":622},[613,5298,645],{"class":618},[613,5300,5301,5303],{"class":615,"line":830},[613,5302,734],{"class":618},[613,5304,5305],{"class":622},"TresMesh\n",[613,5307,5308,5311,5313,5315,5317,5319,5321,5323,5326],{"class":615,"line":841},[613,5309,5310],{"class":652}," v-if",[613,5312,633],{"class":618},[613,5314,636],{"class":618},[613,5316,4582],{"class":659},[613,5318,3757],{"class":618},[613,5320,4587],{"class":659},[613,5322,1126],{"class":618},[613,5324,5325],{"class":659},"geometry",[613,5327,3200],{"class":618},[613,5329,5330,5333,5335,5337,5339],{"class":615,"line":852},[613,5331,5332],{"class":626}," name",[613,5334,633],{"class":618},[613,5336,636],{"class":618},[613,5338,4631],{"class":639},[613,5340,3200],{"class":618},[613,5342,5343,5346,5348,5350,5352,5354,5356,5358,5360,5362],{"class":615,"line":862},[613,5344,5345],{"class":618}," :",[613,5347,5325],{"class":626},[613,5349,633],{"class":618},[613,5351,636],{"class":618},[613,5353,4582],{"class":659},[613,5355,1126],{"class":618},[613,5357,4587],{"class":659},[613,5359,1126],{"class":618},[613,5361,5325],{"class":659},[613,5363,3200],{"class":618},[613,5365,5366],{"class":615,"line":608},[613,5367,5368],{"class":618}," >\n",[613,5370,5371,5373,5375,5377,5379,5381,5383,5385,5387,5389,5391,5394,5396,5399,5401,5403,5405,5407],{"class":615,"line":882},[613,5372,757],{"class":618},[613,5374,4573],{"class":622},[613,5376,789],{"class":618},[613,5378,4594],{"class":626},[613,5380,633],{"class":618},[613,5382,636],{"class":618},[613,5384,4582],{"class":659},[613,5386,1126],{"class":618},[613,5388,4587],{"class":659},[613,5390,1126],{"class":618},[613,5392,5393],{"class":659},"material",[613,5395,636],{"class":618},[613,5397,5398],{"class":626}," attach",[613,5400,633],{"class":618},[613,5402,636],{"class":618},[613,5404,5393],{"class":639},[613,5406,636],{"class":618},[613,5408,763],{"class":618},[613,5410,5411,5413,5415,5417,5419,5421,5423,5425,5427,5429,5431,5433,5435,5437,5439,5441,5443,5445,5447],{"class":615,"line":892},[613,5412,757],{"class":618},[613,5414,49],{"class":622},[613,5416,2782],{"class":626},[613,5418,1198],{"class":618},[613,5420,2787],{"class":626},[613,5422,633],{"class":618},[613,5424,636],{"class":618},[613,5426,3833],{"class":659},[613,5428,1126],{"class":618},[613,5430,4631],{"class":659},[613,5432,636],{"class":618},[613,5434,789],{"class":618},[613,5436,2801],{"class":626},[613,5438,633],{"class":618},[613,5440,636],{"class":618},[613,5442,3026],{"class":659},[613,5444,636],{"class":618},[613,5446,4017],{"class":626},[613,5448,763],{"class":618},[613,5450,5451,5453,5455],{"class":615,"line":2671},[613,5452,885],{"class":618},[613,5454,836],{"class":622},[613,5456,645],{"class":618},[613,5458,5459,5461,5463],{"class":615,"line":2680},[613,5460,708],{"class":618},[613,5462,726],{"class":622},[613,5464,645],{"class":618},[590,5466,5467,5468,3132,5470,5472,5473,5475,5476,5478],{},"The mesh's ",[594,5469,5325],{},[594,5471,5393],{}," come from the loaded model; the\n",[594,5474,2258],{}," lives inside a regular ",[594,5477,2358],{}," with a clean scene-graph\nparent.",[3268,5480,5481],{},[590,5482,5483,5484,5486,5487,5490,5491,5494,5495,5498],{},"A saved decal's ",[594,5485,1467],{}," is stored in ",[1681,5488,5489],{},"world space",", so it is\nre-projected onto the parent using the parent's transform ",[1681,5492,5493],{},"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. ",[594,5496,5497],{},"\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.",[480,5500,5502],{"id":5501},"json-schema","JSON schema",[590,5504,5505,5506,5508,5509,5512,5513,5515,5516,1126],{},"Each entry in the ",[594,5507,2787],{}," array follows the ",[594,5510,5511],{},"DecalJsonEntry"," shape; the\nlayout passed to ",[594,5514,2273],{}," groups these by mesh name as\n",[594,5517,5518],{},"DecalLayout = Record\u003Cstring, DecalJsonEntry[]>",[5520,5521,5522,5523,5527],"details",{},"\n ",[5524,5525,5526],"summary",{},"Full schema",[602,5528,5530],{"className":1166,"code":5529,"language":640,"meta":552,"style":552},"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",[594,5531,5532,5541,5554,5581,5605,5629,5641,5657,5671,5682,5694,5706,5718,5722,5726,5751],{"__ignoreMap":552},[613,5533,5534,5537,5539],{"class":615,"line":553},[613,5535,5536],{"class":626},"interface",[613,5538,3521],{"class":1180},[613,5540,1184],{"class":618},[613,5542,5543,5546,5548,5551],{"class":615,"line":554},[613,5544,5545],{"class":622}," id",[613,5547,1198],{"class":618},[613,5549,5550],{"class":1180}," string",[613,5552,5553],{"class":1189}," // stable UUID\n",[613,5555,5556,5559,5561,5563,5566,5568,5571,5573,5575,5578],{"class":615,"line":684},[613,5557,5558],{"class":622}," position",[613,5560,1198],{"class":618},[613,5562,2546],{"class":659},[613,5564,5565],{"class":1180},"number",[613,5567,663],{"class":618},[613,5569,5570],{"class":1180}," number",[613,5572,663],{"class":618},[613,5574,5570],{"class":1180},[613,5576,5577],{"class":659},"] ",[613,5579,5580],{"class":1189},"// target-mesh local space (raycast hit, baked into the parent's frame)\n",[613,5582,5583,5586,5588,5590,5592,5594,5596,5598,5600,5602],{"class":615,"line":705},[613,5584,5585],{"class":622}," orientation",[613,5587,1198],{"class":618},[613,5589,2546],{"class":659},[613,5591,5565],{"class":1180},[613,5593,663],{"class":618},[613,5595,5570],{"class":1180},[613,5597,663],{"class":618},[613,5599,5570],{"class":1180},[613,5601,5577],{"class":659},[613,5603,5604],{"class":1189},"// Euler XYZ\n",[613,5606,5607,5610,5612,5614,5616,5618,5620,5622,5624,5626],{"class":615,"line":715},[613,5608,5609],{"class":622}," size",[613,5611,1198],{"class":618},[613,5613,2546],{"class":659},[613,5615,5565],{"class":1180},[613,5617,663],{"class":618},[613,5619,5570],{"class":1180},[613,5621,663],{"class":618},[613,5623,5570],{"class":1180},[613,5625,5577],{"class":659},[613,5627,5628],{"class":1189},"// extents along X/Y; Z = projection depth\n",[613,5630,5631,5634,5636,5638],{"class":615,"line":721},[613,5632,5633],{"class":622}," zIndex",[613,5635,1198],{"class":618},[613,5637,5570],{"class":1180},[613,5639,5640],{"class":1189}," // per-mesh layer order, ≥ 0\n",[613,5642,5643,5646,5648,5650,5652,5654],{"class":615,"line":731},[613,5644,5645],{"class":622}," map",[613,5647,1198],{"class":618},[613,5649,5550],{"class":1180},[613,5651,3714],{"class":618},[613,5653,3717],{"class":1180},[613,5655,5656],{"class":1189}," // matches a texture's .name\n",[613,5658,5659,5662,5665,5668],{"class":615,"line":754},[613,5660,5661],{"class":622}," flipX",[613,5663,5664],{"class":618},"?:",[613,5666,5667],{"class":1180}," boolean",[613,5669,5670],{"class":1189}," // omitted when false\n",[613,5672,5673,5676,5678,5680],{"class":615,"line":766},[613,5674,5675],{"class":622}," flipY",[613,5677,5664],{"class":618},[613,5679,5667],{"class":1180},[613,5681,5670],{"class":1189},[613,5683,5684,5687,5689,5691],{"class":615,"line":776},[613,5685,5686],{"class":622}," color",[613,5688,5664],{"class":618},[613,5690,5550],{"class":1180},[613,5692,5693],{"class":1189}," // hex (e.g. '#ff6b35'), omitted when no tint\n",[613,5695,5696,5699,5701,5703],{"class":615,"line":781},[613,5697,5698],{"class":622}," opacity",[613,5700,5664],{"class":618},[613,5702,5570],{"class":1180},[613,5704,5705],{"class":1189}," // 0..1, omitted when 1\n",[613,5707,5708,5711,5713,5715],{"class":615,"line":807},[613,5709,5710],{"class":622}," visible",[613,5712,5664],{"class":618},[613,5714,5667],{"class":1180},[613,5716,5717],{"class":1189}," // omitted when true; false hides the decal\n",[613,5719,5720],{"class":615,"line":607},[613,5721,1305],{"class":618},[613,5723,5724],{"class":615,"line":830},[613,5725,718],{"emptyLinePlaceholder":570},[613,5727,5728,5731,5734,5736,5739,5741,5743,5745,5747,5749],{"class":615,"line":841},[613,5729,5730],{"class":626},"type",[613,5732,5733],{"class":1180}," DecalLayout",[613,5735,2479],{"class":618},[613,5737,5738],{"class":1180}," Record",[613,5740,619],{"class":618},[613,5742,3641],{"class":1180},[613,5744,663],{"class":618},[613,5746,3521],{"class":1180},[613,5748,3648],{"class":659},[613,5750,645],{"class":618},[613,5752,5753],{"class":615,"line":852},[613,5754,5755],{"class":1189},"// { sphere: [...], cube: [...] }\n",[480,5757,5759,5761],{"id":5758},"decal-props",[594,5760,2258],{}," props",[907,5763,5764,5774],{},[910,5765,5766],{},[913,5767,5768,5770,5772],{},[916,5769,918],{},[916,5771,921],{},[916,5773,924],{},[926,5775,5776,5792,5812,5847,5865,5879,5893,5912,5940],{},[913,5777,5778,5782,5788],{},[931,5779,5780],{},[1681,5781,2787],{},[931,5783,5784,5785,5787],{},"Two-way list of stamped decals (use with ",[594,5786,2318],{},").",[931,5789,5790],{},[594,5791,3648],{},[913,5793,5794,5798,5808],{},[931,5795,5796],{},[1681,5797,2801],{},[931,5799,5800,5801,5803,5804,5807],{},"A single ",[594,5802,2297],{}," or array of ",[594,5805,5806],{},"Texture[]",". With multiple, the editor lets the user cycle through them as a palette.",[931,5809,5810],{},[594,5811,3725],{},[913,5813,5814,5818,5843],{},[931,5815,5816],{},[1681,5817,5009],{},[931,5819,5820,5821,5823,5824,5827,5828,5830,5831,5834,5835,3405,5837,3405,5840,5842],{},"Optional explicit target mesh (",[594,5822,4431],{}," or ",[594,5825,5826],{},"ShallowRef\u003CMesh>","). When omitted, the scene-graph parent of ",[594,5829,2258],{}," is auto-resolved via a hidden anchor ",[594,5832,5833],{},"\u003CTresGroup>",". The decal mesh is imperatively parented to the target so it follows the target's runtime ",[594,5836,1467],{},[594,5838,5839],{},"rotation",[594,5841,792],{}," via the scene-graph hierarchy.",[931,5844,5845],{},[594,5846,3725],{},[913,5848,5849,5853,5861],{},[931,5850,5851],{},[1681,5852,3255],{},[931,5854,4439,5855,5857,5858,5860],{},[594,5856,941],{},", mounts the interactive editor (raycast, hover, click-to-place, drag-from-thumbnail). Required for ",[594,5859,2273],{}," interactions to work on this Decal.",[931,5862,5863],{},[594,5864,951],{},[913,5866,5867,5872,5875],{},[931,5868,5869],{},[1681,5870,5871],{},"baseSize",[931,5873,5874],{},"Reference size used to derive each decal's size from the texture aspect ratio.",[931,5876,5877],{},[594,5878,1901],{},[913,5880,5881,5886,5889],{},[931,5882,5883],{},[1681,5884,5885],{},"baseOffset",[931,5887,5888],{},"Distance along the surface normal (parent units) to avoid z-fighting between the decal and the host mesh.",[931,5890,5891],{},[594,5892,1915],{},[913,5894,5895,5899,5908],{},[931,5896,5897],{},[1681,5898,3165],{},[931,5900,5901,5902,5904,5905,5907],{},"Extra offset added per ",[594,5903,2340],{}," step on top of ",[594,5906,5885],{},". Increase if stacked decals still flicker.",[931,5909,5910],{},[594,5911,1530],{},[913,5913,5914,5919,5935],{},[931,5915,5916],{},[1681,5917,5918],{},"cullThreshold",[931,5920,5921,5922,5925,5926,5931,5932,5934],{},"Drops projected triangles whose face normal makes an angle steeper than ",[594,5923,5924],{},"acos(threshold)"," with the projector. Mitigates ",[1120,5927,5930],{"href":5928,"rel":5929},"https://github.com/mrdoob/three.js/issues/21187",[1124],"#21187",". Pass ",[594,5933,945],{}," to disable.",[931,5936,5937],{},[594,5938,5939],{},"0.2",[913,5941,5942,5947,5950],{},[931,5943,5944],{},[1681,5945,5946],{},"edgeColor",[931,5948,5949],{},"Color of the edge outline drawn around a decal while it is hovered (pointer or layer panel) in editable mode.",[931,5951,5952],{},[594,5953,5954],{},"#0000ff",[480,5956,5958,5960],{"id":5957},"decal-events",[594,5959,2258],{}," events",[907,5962,5963,5975],{},[910,5964,5965],{},[913,5966,5967,5970,5973],{},[916,5968,5969],{},"Event",[916,5971,5972],{},"Payload",[916,5974,921],{},[926,5976,5977,5992,6007,6021,6041,6059,6076],{},[913,5978,5979,5984,5989],{},[931,5980,5981],{},[594,5982,5983],{},"update:data",[931,5985,5986],{},[594,5987,5988],{},"DecalJsonEntry[]",[931,5990,5991],{},"v-model partner — fires whenever the JSON list changes.",[913,5993,5994,5999,6004],{},[931,5995,5996],{},[594,5997,5998],{},"add",[931,6000,6001],{},[594,6002,6003],{},"DecalEntry",[931,6005,6006],{},"A new decal has been committed (create mode → confirm).",[913,6008,6009,6014,6018],{},[931,6010,6011],{},[594,6012,6013],{},"update",[931,6015,6016],{},[594,6017,6003],{},[931,6019,6020],{},"An existing decal has been committed (update mode → confirm).",[913,6022,6023,6028,6032],{},[931,6024,6025],{},[594,6026,6027],{},"delete",[931,6029,6030],{},[594,6031,6003],{},[931,6033,6034,6035,3405,6038,5787],{},"A decal has been removed (delete button or ",[594,6036,6037],{},"Del",[594,6039,6040],{},"Backspace",[913,6042,6043,6048,6052],{},[931,6044,6045],{},[594,6046,6047],{},"select",[931,6049,6050],{},[594,6051,6003],{},[931,6053,6054,6055,6058],{},"Edition began on ",[594,6056,6057],{},"entry"," (panel click, 3D click, or programmatic).",[913,6060,6061,6066,6069],{},[931,6062,6063],{},[594,6064,6065],{},"cancel",[931,6067,6068],{},"—",[931,6070,6071,6072,6075],{},"Edition was aborted without commit (",[594,6073,6074],{},"Esc",", click-outside in create mode).",[913,6077,6078,6083,6088],{},[931,6079,6080],{},[594,6081,6082],{},"decalClick",[931,6084,6085],{},[594,6086,6087],{},"{ entry: DecalEntry, event: MouseEvent }",[931,6089,6090,6091,6093,6094,1126],{},"Fires on click of any stamped decal, even when ",[594,6092,3255],{}," is ",[594,6095,951],{},[480,6097,6099,6101,6102,3409],{"id":6098},"decal-exposed-via-ref",[594,6100,2258],{}," exposed (via ",[594,6103,6104],{},"ref",[590,6106,6107,6108,6111],{},"The template ref resolves to ",[594,6109,6110],{},"DecalImperativeApi"," — import the type for\nfull autocompletion:",[602,6113,6115],{"className":1166,"code":6114,"language":640,"meta":552,"style":552},"import type { DecalImperativeApi } from '@tresjs/cientos'\n\nconst decalRef = ref\u003CDecalImperativeApi | null>(null)\n",[594,6116,6117,6138,6142],{"__ignoreMap":552},[613,6118,6119,6121,6123,6125,6128,6130,6132,6134,6136],{"class":615,"line":553},[613,6120,653],{"class":652},[613,6122,3511],{"class":652},[613,6124,656],{"class":618},[613,6126,6127],{"class":659}," DecalImperativeApi",[613,6129,669],{"class":618},[613,6131,672],{"class":652},[613,6133,675],{"class":618},[613,6135,678],{"class":639},[613,6137,681],{"class":618},[613,6139,6140],{"class":615,"line":554},[613,6141,718],{"emptyLinePlaceholder":570},[613,6143,6144,6146,6148,6150,6152,6154,6156,6158,6160,6162,6164,6166],{"class":615,"line":684},[613,6145,2463],{"class":626},[613,6147,3695],{"class":659},[613,6149,633],{"class":618},[613,6151,3975],{"class":2482},[613,6153,619],{"class":618},[613,6155,6110],{"class":1180},[613,6157,3714],{"class":618},[613,6159,3717],{"class":1180},[613,6161,3720],{"class":618},[613,6163,2485],{"class":659},[613,6165,3725],{"class":618},[613,6167,2496],{"class":659},[907,6169,6170,6182],{},[910,6171,6172],{},[913,6173,6174,6177,6180],{},[916,6175,6176],{},"Property",[916,6178,6179],{},"Type",[916,6181,921],{},[926,6183,6184,6202,6220,6238,6253],{},[913,6185,6186,6191,6196],{},[931,6187,6188],{},[594,6189,6190],{},"editor",[931,6192,6193],{},[594,6194,6195],{},"DecalEditorSession",[931,6197,6198,6199,1126],{},"The canvas-shared editor session. Pass it to ",[594,6200,6201],{},"\u003CDecalDebugUI :session>",[913,6203,6204,6209,6214],{},[931,6205,6206],{},[594,6207,6208],{},"beginEditById",[931,6210,6211],{},[594,6212,6213],{},"(id: string) => boolean",[931,6215,6216,6217,6219],{},"Programmatically start editing a specific decal. Returns ",[594,6218,951],{}," if the id is unknown.",[913,6221,6222,6227,6232],{},[931,6223,6224],{},[594,6225,6226],{},"commit",[931,6228,6229],{},[594,6230,6231],{},"() => void",[931,6233,6234,6235,5787],{},"Commit the in-flight edit (same as ",[594,6236,6237],{},"Enter",[913,6239,6240,6244,6248],{},[931,6241,6242],{},[594,6243,6065],{},[931,6245,6246],{},[594,6247,6231],{},[931,6249,6250,6251,5787],{},"Abort the in-flight edit (same as ",[594,6252,6074],{},[913,6254,6255,6260,6264],{},[931,6256,6257],{},[594,6258,6259],{},"remove",[931,6261,6262],{},[594,6263,6231],{},[931,6265,6266,6267,5787],{},"Delete the currently edited decal (same as ",[594,6268,6037],{},[480,6270,6272,5761],{"id":6271},"decaldebugui-props",[594,6273,2273],{},[907,6275,6276,6286],{},[910,6277,6278],{},[913,6279,6280,6282,6284],{},[916,6281,918],{},[916,6283,921],{},[916,6285,924],{},[926,6287,6288,6311,6336,6349,6369,6384,6407],{},[913,6289,6290,6294,6307],{},[931,6291,6292],{},[1681,6293,3799],{},[931,6295,6296,6299,6300,6302,6303,6306],{},[594,6297,6298],{},"DecalEditorSession | null"," — obtained from any ",[594,6301,2258],{}," ref via ",[594,6304,6305],{},"decalRef.value?.editor",". Mandatory for the overlay to wire up the interactive logic.",[931,6308,6309],{},[594,6310,3725],{},[913,6312,6313,6317,6331],{},[931,6314,6315],{},[1681,6316,2787],{},[931,6318,6319,6320,6323,6324,6327,6328,6330],{},"Mesh-name-keyed map of decal slices — ",[594,6321,6322],{},"{ sphere: [...], cube: [...] }",". Each key matches a ",[594,6325,6326],{},"\u003CTresMesh name=\"...\">"," whose child ",[594,6329,2258],{}," owns the slice.",[931,6332,6333],{},[594,6334,6335],{},"{}",[913,6337,6338,6342,6345],{},[931,6339,6340],{},[1681,6341,3026],{},[931,6343,6344],{},"The full texture palette shown in the dock's picker.",[931,6346,6347],{},[594,6348,3648],{},[913,6350,6351,6356,6365],{},[931,6352,6353],{},[1681,6354,6355],{},"theme",[931,6357,6358,5823,6361,6364],{},[594,6359,6360],{},"'light'",[594,6362,6363],{},"'dark'"," — overlay theme tokens.",[931,6366,6367],{},[594,6368,6360],{},[913,6370,6371,6376,6379],{},[931,6372,6373],{},[1681,6374,6375],{},"snapAngle",[931,6377,6378],{},"Rotation step (degrees) applied when the snap toggle is on. Snap-tick ring on the handle adapts automatically.",[931,6380,6381],{},[594,6382,6383],{},"15",[913,6385,6386,6391,6403],{},[931,6387,6388],{},[1681,6389,6390],{},"exportFilename",[931,6392,6393,6394,5931,6396,6398,6399,6402],{},"Filename for the built-in JSON download. When omitted, defaults to ",[594,6395,4318],{},[594,6397,3725],{}," to skip the auto-download (the ",[594,6400,6401],{},"@export"," event still fires).",[931,6404,6405],{},[594,6406,4318],{},[913,6408,6409,6413,6416],{},[931,6410,6411],{},[1681,6412,4246],{},[931,6414,6415],{},"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,6417,6418],{},[594,6419,951],{},[480,6421,6423,5960],{"id":6422},"decaldebugui-events",[594,6424,2273],{},[907,6426,6427,6437],{},[910,6428,6429],{},[913,6430,6431,6433,6435],{},[916,6432,5969],{},[916,6434,5972],{},[916,6436,921],{},[926,6438,6439,6453],{},[913,6440,6441,6445,6450],{},[931,6442,6443],{},[594,6444,1174],{},[931,6446,6447],{},[594,6448,6449],{},"DecalLayout",[931,6451,6452],{},"Fires after the user clicks Export. The download (if enabled) has already been triggered — use this for side effects (POST, analytics…).",[913,6454,6455,6459,6463],{},[931,6456,6457],{},[594,6458,653],{},[931,6460,6461],{},[594,6462,6449],{},[931,6464,6465],{},"Fires after the user picks a JSON file. The layout has been sanitised (unknown keys dropped) and already applied to the bound Decals.",[480,6467,6469],{"id":6468},"caveats","Caveats",[2261,6471,6472,6487,6504,6520],{},[2264,6473,6474,6475,6478,6479,6482,6483,6486],{},"✨ The overlay sits at ",[594,6476,6477],{},"position: fixed; inset: 0; pointer-events: none"," with\nindividual panels opting back in. It sits ",[1681,6480,6481],{},"above"," the canvas by default\n(",[594,6484,6485],{},"z-index: 1000000",") — adjust via host CSS if needed.",[2264,6488,6489,6490,6492,6493,6496,6497,1479,6500,6503],{},"🎨 ",[594,6491,2273],{}," ships its own theme in a global stylesheet under the\n",[594,6494,6495],{},".cientos-decal-ui"," namespace, so host styles aren't affected. The CSS\nvariables (",[594,6498,6499],{},"--accent",[594,6501,6502],{},"--dock-bg",", etc.) can be overridden by targeting\nthe namespace.",[2264,6505,6506,6507,6510,6511,6513,6514,6516,6517,6519],{},"🔶 Decals are ",[1681,6508,6509],{},"per-canvas"," — if you have multiple ",[594,6512,3266],{}," in your\napp, each one has its own independent session. Pair each ",[594,6515,2273],{},"\nwith the right ",[594,6518,3799],{}," (from one of the Decals inside that canvas).",[2264,6521,6522,6523,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 ",[594,6524,6525],{},":mesh=\"meshRef\"",[480,6527,6529],{"id":6528},"limitations","Limitations",[2054,6531,6532,6546,6553,6596],{},[590,6533,6534,6535,6538,6539,3405,6541,3405,6543,6545],{},"Decal vertices are baked into the ",[1681,6536,6537],{},"target mesh's local space"," at\nbuild time (the decal mesh is imperatively re-parented to the target,\nso ",[594,6540,1467],{},[594,6542,5839],{},[594,6544,792],{}," on the parent are followed via\nthe scene graph — no rebuild needed).",[590,6547,6548,6549,6552],{},"Runtime deformations that change vertex positions outside of a\ntransform are ",[1681,6550,6551],{},"not"," followed:",[2261,6554,6555,6568,6576,6583],{},[2264,6556,6557,6562,6563,1126],{},[1681,6558,6559],{},[594,6560,6561],{},"SkinnedMesh"," skinning is not applied — the decal stays in rest\npose. See ",[1120,6564,6567],{"href":6565,"rel":6566},"https://github.com/mrdoob/three.js/issues/7926",[1124],"three.js#7926",[2264,6569,6570,6575],{},[1681,6571,6572],{},[594,6573,6574],{},"morphAttributes"," on the parent are ignored.",[2264,6577,6578,6579,6582],{},"Direct mutations of the parent's ",[594,6580,6581],{},"geometry.attributes.position","\n(e.g. CPU wave displacement, GPGPU) — the projection is baked once.",[2264,6584,6585,6586,6590,6591,6593,6594,1126],{},"Decals near silhouettes can wrap around onto opposite faces (see\n",[1120,6587,6589],{"href":5928,"rel":6588},[1124],"three.js#21187",") —\nmitigated by the ",[594,6592,5918],{}," prop, default ",[594,6595,5939],{},[590,6597,6598,6600],{},[594,6599,2258],{}," warns once per parent mesh when it detects these conditions.",[480,6602,6604],{"id":6603},"keyboard-shortcuts","Keyboard shortcuts",[907,6606,6607,6617],{},[910,6608,6609],{},[913,6610,6611,6614],{},[916,6612,6613],{},"Shortcut",[916,6615,6616],{},"Action",[926,6618,6619,6628,6637,6649,6662,6675],{},[913,6620,6621,6625],{},[931,6622,6623],{},[594,6624,6237],{},[931,6626,6627],{},"Confirm the in-flight edit",[913,6629,6630,6634],{},[931,6631,6632],{},[594,6633,6074],{},[931,6635,6636],{},"Cancel (revert updates, drop pending placements)",[913,6638,6639,6646],{},[931,6640,6641,3405,6643],{},[594,6642,6037],{},[594,6644,6645],{},"⌫",[931,6647,6648],{},"Delete the edited decal (or cancel a create)",[913,6650,6651,6659],{},[931,6652,6653,3405,6656],{},[594,6654,6655],{},"⌘Z",[594,6657,6658],{},"Ctrl+Z",[931,6660,6661],{},"Undo",[913,6663,6664,6672],{},[931,6665,6666,3405,6669],{},[594,6667,6668],{},"⇧⌘Z",[594,6670,6671],{},"Ctrl+⇧Z",[931,6673,6674],{},"Redo",[913,6676,6677,6680],{},[931,6678,6679],{},"Click outside",[931,6681,6682],{},"Auto-commit an in-flight update; cancel a create",[480,6684,6686,6687,3409],{"id":6685},"programmatic-api-usedecaleditor","Programmatic API (",[594,6688,6689],{},"useDecalEditor",[590,6691,6692,6693,6695,6696,6698,6699,6701,6702,6704],{},"Skip ",[594,6694,2273],{}," entirely or augment it with custom panels —\n",[594,6697,2286],{}," returns the same canvas-scoped session every Decal\nshares. Call it from any component inside ",[594,6700,3266],{}," (after at\nleast one ",[594,6703,2258],{}," has mounted).",[602,6706,6708],{"className":1166,"code":6707,"language":640,"meta":552,"style":552},"import { useDecalEditor } from '@tresjs/cientos'\n\nconst session = useDecalEditor()\n",[594,6709,6710,6729,6733],{"__ignoreMap":552},[613,6711,6712,6714,6716,6719,6721,6723,6725,6727],{"class":615,"line":553},[613,6713,653],{"class":652},[613,6715,656],{"class":618},[613,6717,6718],{"class":659}," useDecalEditor",[613,6720,669],{"class":618},[613,6722,672],{"class":652},[613,6724,675],{"class":618},[613,6726,678],{"class":639},[613,6728,681],{"class":618},[613,6730,6731],{"class":615,"line":554},[613,6732,718],{"emptyLinePlaceholder":570},[613,6734,6735,6737,6739,6741,6743],{"class":615,"line":684},[613,6736,2463],{"class":626},[613,6738,3734],{"class":659},[613,6740,633],{"class":618},[613,6742,6718],{"class":2482},[613,6744,6745],{"class":659},"()\n",[590,6747,6748,6749,1479,6752,2536,6755,1479,6758,6761,6762,2536,6764,1479,6767,1479,6770,6773,6774,6777,6778,6781,6782,1479,6785,1479,6788,2536,6791,6794],{},"The session exposes reactive state (",[594,6750,6751],{},"editingEntry",[594,6753,6754],{},"editingMode",[594,6756,6757],{},"canUndo",[594,6759,6760],{},"canRedo",", …), by-id mutators (",[594,6763,6208],{},[594,6765,6766],{},"setZIndexById",[594,6768,6769],{},"setVisibilityById",[594,6771,6772],{},"removeById","), batched updates\n(",[594,6775,6776],{},"setMeshData","), commit / delete / cancel listeners, undo / redo, and\na ",[594,6779,6780],{},"registerDecalEntry"," hook for external entries. Helper utilities\n(",[594,6783,6784],{},"ensureTextureNames",[594,6786,6787],{},"getTextureName",[594,6789,6790],{},"getTextureAspect",[594,6792,6793],{},"invalidateDecalGeometry",") are exported alongside.",[5520,6796,5522,6797,6800,6805,6880,6884,6955,6971,6975,7011,7017,7021,7160,7164,7210,7213,7217,7231,7401,7405],{},[5524,6798,6799],{},"Full API reference",[6801,6802,6804],"h4",{"id":6803},"reactive-state","Reactive state",[602,6806,6808],{"className":1166,"code":6807,"language":640,"meta":552,"style":552},"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",[594,6809,6810,6822,6834,6846,6857,6869],{"__ignoreMap":552},[613,6811,6812,6814,6816,6819],{"class":615,"line":553},[613,6813,3799],{"class":659},[613,6815,1126],{"class":618},[613,6817,6818],{"class":659},"editingEntry ",[613,6820,6821],{"class":1189},"// ShallowRef\u003CDecalEntry | null>\n",[613,6823,6824,6826,6828,6831],{"class":615,"line":554},[613,6825,3799],{"class":659},[613,6827,1126],{"class":618},[613,6829,6830],{"class":659},"editingMode ",[613,6832,6833],{"class":1189},"// Ref\u003C'create' | 'update' | null>\n",[613,6835,6836,6838,6840,6843],{"class":615,"line":684},[613,6837,3799],{"class":659},[613,6839,1126],{"class":618},[613,6841,6842],{"class":659},"lockedMeshUuid ",[613,6844,6845],{"class":1189},"// Ref\u003Cstring | null>\n",[613,6847,6848,6850,6852,6855],{"class":615,"line":705},[613,6849,3799],{"class":659},[613,6851,1126],{"class":618},[613,6853,6854],{"class":659},"hoveredEntry ",[613,6856,6821],{"class":1189},[613,6858,6859,6861,6863,6866],{"class":615,"line":715},[613,6860,3799],{"class":659},[613,6862,1126],{"class":618},[613,6864,6865],{"class":659},"canUndo ",[613,6867,6868],{"class":1189},"// Ref\u003Cboolean>\n",[613,6870,6871,6873,6875,6878],{"class":615,"line":721},[613,6872,3799],{"class":659},[613,6874,1126],{"class":618},[613,6876,6877],{"class":659},"canRedo ",[613,6879,6868],{"class":1189},[6801,6881,6883],{"id":6882},"mutating-decals-by-id","Mutating decals by id",[602,6885,6887],{"className":1166,"code":6886,"language":640,"meta":552,"style":552},"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",[594,6888,6889,6903,6922,6942],{"__ignoreMap":552},[613,6890,6891,6893,6895,6897,6900],{"class":615,"line":553},[613,6892,3799],{"class":659},[613,6894,1126],{"class":618},[613,6896,6208],{"class":2482},[613,6898,6899],{"class":659},"(id) ",[613,6901,6902],{"class":1189},"// start editing a placed decal\n",[613,6904,6905,6907,6909,6911,6914,6916,6919],{"class":615,"line":554},[613,6906,3799],{"class":659},[613,6908,1126],{"class":618},[613,6910,6766],{"class":2482},[613,6912,6913],{"class":659},"(id",[613,6915,663],{"class":618},[613,6917,6918],{"class":659}," newZ) ",[613,6920,6921],{"class":1189},"// reorder one decal\n",[613,6923,6924,6926,6928,6930,6932,6934,6937,6939],{"class":615,"line":684},[613,6925,3799],{"class":659},[613,6927,1126],{"class":618},[613,6929,6769],{"class":2482},[613,6931,6913],{"class":659},[613,6933,663],{"class":618},[613,6935,6936],{"class":4536}," false",[613,6938,4893],{"class":659},[613,6940,6941],{"class":1189},"// hide / show\n",[613,6943,6944,6946,6948,6950,6952],{"class":615,"line":705},[613,6945,3799],{"class":659},[613,6947,1126],{"class":618},[613,6949,6772],{"class":2482},[613,6951,6899],{"class":659},[613,6953,6954],{"class":1189},"// delete\n",[590,6956,6957,6958,6961,6962,6964,6965,6967,6968,6970],{},"When the targeted id matches the ",[1681,6959,6960],{},"currently editing"," entry, mutations\nland on the in-flight buffer (committed on ",[594,6963,6237],{},", reverted on ",[594,6966,6074],{},").\nOtherwise they update ",[594,6969,2787],{}," immediately and record history.",[6801,6972,6974],{"id":6973},"batched-mesh-updates","Batched mesh updates",[602,6976,6978],{"className":1166,"code":6977,"language":640,"meta":552,"style":552},"session.setMeshData(meshName, nextEntries, { recordHistory: true })\n",[594,6979,6980],{"__ignoreMap":552},[613,6981,6982,6984,6986,6988,6991,6993,6996,6998,7000,7003,7005,7007,7009],{"class":615,"line":553},[613,6983,3799],{"class":659},[613,6985,1126],{"class":618},[613,6987,6776],{"class":2482},[613,6989,6990],{"class":659},"(meshName",[613,6992,663],{"class":618},[613,6994,6995],{"class":659}," nextEntries",[613,6997,663],{"class":618},[613,6999,656],{"class":618},[613,7001,7002],{"class":622}," recordHistory",[613,7004,1198],{"class":618},[613,7006,4537],{"class":4536},[613,7008,669],{"class":618},[613,7010,2496],{"class":659},[590,7012,7013,7014,7016],{},"A single emit avoids the stale-snapshot race that hits multiple\nback-to-back ",[594,7015,6766],{}," calls in the same tick.",[6801,7018,7020],{"id":7019},"listening-to-commits","Listening to commits",[602,7022,7024],{"className":1166,"code":7023,"language":640,"meta":552,"style":552},"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",[594,7025,7026,7061,7086,7092,7120,7143,7147,7152],{"__ignoreMap":552},[613,7027,7028,7030,7033,7035,7038,7040,7043,7045,7047,7050,7052,7055,7057,7059],{"class":615,"line":553},[613,7029,2463],{"class":626},[613,7031,7032],{"class":659}," off ",[613,7034,633],{"class":618},[613,7036,7037],{"class":659}," session",[613,7039,1126],{"class":618},[613,7041,7042],{"class":2482},"onCommit",[613,7044,2485],{"class":659},[613,7046,2485],{"class":618},[613,7048,6057],{"class":7049},"sHdIc",[613,7051,663],{"class":618},[613,7053,7054],{"class":7049}," mode",[613,7056,3409],{"class":618},[613,7058,3746],{"class":626},[613,7060,1184],{"class":618},[613,7062,7063,7066,7068,7071,7073,7076,7078,7081,7083],{"class":615,"line":554},[613,7064,7065],{"class":659}," console",[613,7067,1126],{"class":618},[613,7069,7070],{"class":2482},"log",[613,7072,2485],{"class":622},[613,7074,7075],{"class":659},"mode",[613,7077,663],{"class":618},[613,7079,7080],{"class":659}," entry",[613,7082,4893],{"class":622},[613,7084,7085],{"class":1189},"// mode: 'create' | 'update'\n",[613,7087,7088,7090],{"class":615,"line":684},[613,7089,2476],{"class":618},[613,7091,2496],{"class":659},[613,7093,7094,7096,7098,7101,7103,7105,7107,7109,7111,7113,7116,7118],{"class":615,"line":705},[613,7095,3799],{"class":659},[613,7097,1126],{"class":618},[613,7099,7100],{"class":2482},"onDelete",[613,7102,2485],{"class":659},[613,7104,2485],{"class":618},[613,7106,6057],{"class":7049},[613,7108,3409],{"class":618},[613,7110,3746],{"class":626},[613,7112,656],{"class":618},[613,7114,7115],{"class":1189}," /* … */",[613,7117,669],{"class":618},[613,7119,2496],{"class":659},[613,7121,7122,7124,7126,7129,7131,7133,7135,7137,7139,7141],{"class":615,"line":715},[613,7123,3799],{"class":659},[613,7125,1126],{"class":618},[613,7127,7128],{"class":2482},"onCancel",[613,7130,2485],{"class":659},[613,7132,3743],{"class":618},[613,7134,3746],{"class":626},[613,7136,656],{"class":618},[613,7138,7115],{"class":1189},[613,7140,669],{"class":618},[613,7142,2496],{"class":659},[613,7144,7145],{"class":615,"line":721},[613,7146,718],{"emptyLinePlaceholder":570},[613,7148,7149],{"class":615,"line":731},[613,7150,7151],{"class":1189},"// All return an unsubscribe function:\n",[613,7153,7154,7157],{"class":615,"line":754},[613,7155,7156],{"class":2482},"onBeforeUnmount",[613,7158,7159],{"class":659},"(off)\n",[6801,7161,7163],{"id":7162},"undo-redo","Undo / redo",[602,7165,7167],{"className":1166,"code":7166,"language":640,"meta":552,"style":552},"session.canUndo.value // Ref\u003Cboolean>\nsession.undo() // returns true if something was undone\nsession.redo()\n",[594,7168,7169,7184,7199],{"__ignoreMap":552},[613,7170,7171,7173,7175,7177,7179,7182],{"class":615,"line":553},[613,7172,3799],{"class":659},[613,7174,1126],{"class":618},[613,7176,6757],{"class":659},[613,7178,1126],{"class":618},[613,7180,7181],{"class":659},"value ",[613,7183,6868],{"class":1189},[613,7185,7186,7188,7190,7193,7196],{"class":615,"line":554},[613,7187,3799],{"class":659},[613,7189,1126],{"class":618},[613,7191,7192],{"class":2482},"undo",[613,7194,7195],{"class":659},"() ",[613,7197,7198],{"class":1189},"// returns true if something was undone\n",[613,7200,7201,7203,7205,7208],{"class":615,"line":684},[613,7202,3799],{"class":659},[613,7204,1126],{"class":618},[613,7206,7207],{"class":2482},"redo",[613,7209,6745],{"class":659},[590,7211,7212],{},"History is per-canvas, capped at 100 operations, disabled mid-edit.",[6801,7214,7216],{"id":7215},"power-user-external-entries","Power user — external entries",[590,7218,7219,7220,7222,7223,7226,7227,7230],{},"Plug a decal-like object that lives outside a ",[594,7221,2258],{}," (custom data\nsource, server snapshot, fake entry for tests) by registering a\n",[594,7224,7225],{},"DecalEntryActions"," bundle so the ",[594,7228,7229],{},"*ById"," session methods route to it:",[602,7232,7234],{"className":1166,"code":7233,"language":640,"meta":552,"style":552},"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",[594,7235,7236,7257,7261,7282,7301,7323,7345,7362,7373],{"__ignoreMap":552},[613,7237,7238,7240,7242,7244,7247,7249,7251,7253,7255],{"class":615,"line":553},[613,7239,653],{"class":652},[613,7241,3511],{"class":652},[613,7243,656],{"class":618},[613,7245,7246],{"class":659}," DecalEntryActions",[613,7248,669],{"class":618},[613,7250,672],{"class":652},[613,7252,675],{"class":618},[613,7254,678],{"class":639},[613,7256,681],{"class":618},[613,7258,7259],{"class":615,"line":554},[613,7260,718],{"emptyLinePlaceholder":570},[613,7262,7263,7265,7267,7269,7271,7273,7276,7278,7280],{"class":615,"line":684},[613,7264,3799],{"class":659},[613,7266,1126],{"class":618},[613,7268,6780],{"class":2482},[613,7270,2485],{"class":659},[613,7272,2488],{"class":618},[613,7274,7275],{"class":639},"decal-7",[613,7277,2488],{"class":618},[613,7279,663],{"class":618},[613,7281,1184],{"class":618},[613,7283,7284,7287,7289,7292,7294,7296,7298],{"class":615,"line":705},[613,7285,7286],{"class":2482}," beginEdit",[613,7288,1198],{"class":618},[613,7290,7291],{"class":618}," ()",[613,7293,3746],{"class":626},[613,7295,656],{"class":618},[613,7297,7115],{"class":1189},[613,7299,7300],{"class":618}," },\n",[613,7302,7303,7306,7308,7310,7313,7315,7317,7319,7321],{"class":615,"line":715},[613,7304,7305],{"class":2482}," setZIndex",[613,7307,1198],{"class":618},[613,7309,3143],{"class":618},[613,7311,7312],{"class":7049},"newZ",[613,7314,3409],{"class":618},[613,7316,3746],{"class":626},[613,7318,656],{"class":618},[613,7320,7115],{"class":1189},[613,7322,7300],{"class":618},[613,7324,7325,7328,7330,7332,7335,7337,7339,7341,7343],{"class":615,"line":721},[613,7326,7327],{"class":2482}," setVisibility",[613,7329,1198],{"class":618},[613,7331,3143],{"class":618},[613,7333,7334],{"class":7049},"visible",[613,7336,3409],{"class":618},[613,7338,3746],{"class":626},[613,7340,656],{"class":618},[613,7342,7115],{"class":1189},[613,7344,7300],{"class":618},[613,7346,7347,7350,7352,7354,7356,7358,7360],{"class":615,"line":731},[613,7348,7349],{"class":2482}," remove",[613,7351,1198],{"class":618},[613,7353,7291],{"class":618},[613,7355,3746],{"class":626},[613,7357,656],{"class":618},[613,7359,7115],{"class":1189},[613,7361,7300],{"class":618},[613,7363,7364,7366,7369,7371],{"class":615,"line":754},[613,7365,2476],{"class":618},[613,7367,7368],{"class":652}," satisfies",[613,7370,7246],{"class":1180},[613,7372,2496],{"class":659},[613,7374,7375,7377,7379,7381,7383,7385,7387,7390,7392,7394,7396,7398],{"class":615,"line":766},[613,7376,7156],{"class":2482},[613,7378,2485],{"class":659},[613,7380,3743],{"class":618},[613,7382,3746],{"class":626},[613,7384,7037],{"class":659},[613,7386,1126],{"class":618},[613,7388,7389],{"class":2482},"unregisterDecalEntry",[613,7391,2485],{"class":659},[613,7393,2488],{"class":618},[613,7395,7275],{"class":639},[613,7397,2488],{"class":618},[613,7399,7400],{"class":659},"))\n",[6801,7402,7404],{"id":7403},"helper-utilities","Helper utilities",[907,7406,7407,7416],{},[910,7408,7409],{},[913,7410,7411,7413],{},[916,7412,291],{},[916,7414,7415],{},"Use",[926,7417,7418,7438,7450,7463],{},[913,7419,7420,7425],{},[931,7421,7422],{},[594,7423,7424],{},"ensureTextureNames(textures)",[931,7426,7427,7428,7430,7431,7434,7435,1126],{},"Back-fills ",[594,7429,3050],{}," from ",[594,7432,7433],{},"userData.name"," or the filename in ",[594,7436,7437],{},"image.src",[913,7439,7440,7445],{},[931,7441,7442],{},[594,7443,7444],{},"getTextureName(texture)",[931,7446,7447,7448,1126],{},"Single-texture variant — returns a stable name or ",[594,7449,3725],{},[913,7451,7452,7457],{},[931,7453,7454],{},[594,7455,7456],{},"getTextureAspect(texture)",[931,7458,7459,7462],{},[594,7460,7461],{},"{ x, y }"," aspect ratio for custom-sized decals.",[913,7464,7465,7470],{},[931,7466,7467],{},[594,7468,7469],{},"invalidateDecalGeometry(mesh)",[931,7471,7472],{},"Force a rebuild on the next frame — call when the parent mesh moved or swapped.",[1307,7474,7475],{},"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":552,"searchDepth":553,"depth":554,"links":7477},[7478,7479,7480,7481,7482,7486,7487,7495,7496,7498,7500,7502,7504,7506,7507,7508,7509],{"id":600,"depth":554,"text":15},{"id":2857,"depth":554,"text":2858},{"id":3057,"depth":554,"text":2307},{"id":3151,"depth":554,"text":3152},{"id":3246,"depth":554,"text":7483,"children":7484},"Editable mode + \u003CDecalDebugUI>",[7485],{"id":4193,"depth":684,"text":4194},{"id":4312,"depth":554,"text":3448},{"id":4411,"depth":554,"text":7488,"children":7489},"Targeting a loaded model (.glb)",[7490,7492,7494],{"id":4438,"depth":684,"text":7491},"When :object is a Mesh",{"id":4680,"depth":684,"text":7493},"When :object is a Group",{"id":5041,"depth":684,"text":5042},{"id":5501,"depth":554,"text":5502},{"id":5758,"depth":554,"text":7497},"\u003CDecal> props",{"id":5957,"depth":554,"text":7499},"\u003CDecal> events",{"id":6098,"depth":554,"text":7501},"\u003CDecal> exposed (via ref)",{"id":6271,"depth":554,"text":7503},"\u003CDecalDebugUI> props",{"id":6422,"depth":554,"text":7505},"\u003CDecalDebugUI> events",{"id":6468,"depth":554,"text":6469},{"id":6528,"depth":554,"text":6529},{"id":6603,"depth":554,"text":6604},{"id":6685,"depth":554,"text":7510},"Programmatic API (useDecalEditor)","Project a texture onto a mesh's surface — with an optional in-canvas editor UI.",{},{"title":49,"description":7511},"UXzJTvWzu0DUebb9Yjx34N2tvhWy1dqXuLm2nippsug",{"id":7516,"title":53,"body":7517,"description":7819,"extension":567,"links":568,"meta":7820,"navigation":570,"path":54,"seo":7821,"stem":55,"__hash__":7822},"docs/2.api/1.abstractions/edges.md",{"type":477,"value":7518,"toc":7815},[7519,7524,7540,7542,7733,7735,7752,7813],[584,7520,7521],{},[7522,7523],"abstractions-edges",{},[590,7525,2843,7526,7529,7530,7535,7536,7539],{},[594,7527,7528],{},"cientos"," package provides an abstraction of ",[1120,7531,7534],{"href":7532,"rel":7533},"https://threejs.org/docs/#api/en/geometries/EdgesGeometry",[1124],"EdgesGeometry"," from Three.js, ",[594,7537,7538],{},"\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.",[480,7541,15],{"id":600},[602,7543,7546],{"className":604,"code":7544,"highlights":7545,"language":609,"meta":552,"style":552},"\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",[684,807],[594,7547,7548,7568,7586,7614,7622,7626,7634,7642,7675,7683,7691,7700,7709,7717,7725],{"__ignoreMap":552},[613,7549,7550,7552,7554,7556,7558,7560,7562,7564,7566],{"class":615,"line":553},[613,7551,619],{"class":618},[613,7553,623],{"class":622},[613,7555,627],{"class":626},[613,7557,630],{"class":626},[613,7559,633],{"class":618},[613,7561,636],{"class":618},[613,7563,640],{"class":639},[613,7565,636],{"class":618},[613,7567,645],{"class":618},[613,7569,7570,7572,7574,7576,7578,7580,7582,7584],{"class":615,"line":554},[613,7571,653],{"class":652},[613,7573,656],{"class":618},[613,7575,691],{"class":659},[613,7577,669],{"class":618},[613,7579,672],{"class":652},[613,7581,675],{"class":618},[613,7583,700],{"class":639},[613,7585,681],{"class":618},[613,7587,7589,7591,7593,7595,7597,7600,7602,7604,7606,7608,7610,7612],{"class":7588,"line":684},[615,649],[613,7590,653],{"class":652},[613,7592,656],{"class":618},[613,7594,1377],{"class":659},[613,7596,663],{"class":618},[613,7598,7599],{"class":659}," Edges",[613,7601,663],{"class":618},[613,7603,666],{"class":659},[613,7605,669],{"class":618},[613,7607,672],{"class":652},[613,7609,675],{"class":618},[613,7611,678],{"class":639},[613,7613,681],{"class":618},[613,7615,7616,7618,7620],{"class":615,"line":705},[613,7617,708],{"class":618},[613,7619,623],{"class":622},[613,7621,645],{"class":618},[613,7623,7624],{"class":615,"line":715},[613,7625,718],{"emptyLinePlaceholder":570},[613,7627,7628,7630,7632],{"class":615,"line":721},[613,7629,619],{"class":618},[613,7631,726],{"class":622},[613,7633,645],{"class":618},[613,7635,7636,7638,7640],{"class":615,"line":731},[613,7637,734],{"class":618},[613,7639,737],{"class":622},[613,7641,645],{"class":618},[613,7643,7644,7646,7648,7650,7652,7654,7656,7658,7660,7662,7664,7666,7669,7671,7673],{"class":615,"line":754},[613,7645,757],{"class":618},[613,7647,760],{"class":622},[613,7649,789],{"class":618},[613,7651,1467],{"class":626},[613,7653,633],{"class":618},[613,7655,636],{"class":618},[613,7657,1474],{"class":618},[613,7659,945],{"class":799},[613,7661,1479],{"class":618},[613,7663,800],{"class":799},[613,7665,1479],{"class":618},[613,7667,7668],{"class":799},"5",[613,7670,1489],{"class":618},[613,7672,636],{"class":618},[613,7674,763],{"class":618},[613,7676,7677,7679,7681],{"class":615,"line":766},[613,7678,757],{"class":618},[613,7680,771],{"class":622},[613,7682,763],{"class":618},[613,7684,7685,7687,7689],{"class":615,"line":776},[613,7686,757],{"class":618},[613,7688,197],{"class":622},[613,7690,645],{"class":618},[613,7692,7693,7695,7698],{"class":615,"line":781},[613,7694,833],{"class":618},[613,7696,7697],{"class":622},"TresMeshBasicMaterial",[613,7699,763],{"class":618},[613,7701,7703,7705,7707],{"class":7702,"line":807},[615,649],[613,7704,833],{"class":618},[613,7706,53],{"class":622},[613,7708,763],{"class":618},[613,7710,7711,7713,7715],{"class":615,"line":607},[613,7712,875],{"class":618},[613,7714,197],{"class":622},[613,7716,645],{"class":618},[613,7718,7719,7721,7723],{"class":615,"line":830},[613,7720,885],{"class":618},[613,7722,737],{"class":622},[613,7724,645],{"class":618},[613,7726,7727,7729,7731],{"class":615,"line":841},[613,7728,708],{"class":618},[613,7730,726],{"class":622},[613,7732,645],{"class":618},[480,7734,902],{"id":901},[590,7736,7737,7739,7740,7745,7746,7751],{},[594,7738,7538],{}," is based on ",[1120,7741,7744],{"href":7742,"rel":7743},"https://threejs.org/docs/#api/en/objects/LineSegments",[1124],"LineSegments"," & ",[1120,7747,7750],{"href":7748,"rel":7749},"https://threejs.org/docs/#api/en/objects/Line",[1124],"Line"," and supports all of its props.",[907,7753,7754,7764],{},[910,7755,7756],{},[913,7757,7758,7760,7762],{},[916,7759,918],{"align":977},[916,7761,921],{"align":977},[916,7763,924],{},[926,7765,7766,7797],{},[913,7767,7768,7773,7792],{},[931,7769,7770],{"align":977},[1681,7771,7772],{},"color",[931,7774,7775,7778,7779,7782,7783,2315,7788],{"align":977},[594,7776,7777],{},"THREE.Color"," — Color of the edges. ",[7780,7781],"br",{}," More informations : ",[1120,7784,7787],{"href":7785,"rel":7786},"https://docs.tresjs.org/api/instances-arguments-and-props.html#colors",[1124],"TresColor",[1120,7789,7777],{"href":7790,"rel":7791},"https://threejs.org/docs/#api/en/math/Color",[1124],[931,7793,7794],{},[594,7795,7796],{},"#ff0000",[913,7798,7799,7804,7809],{},[931,7800,7801],{"align":977},[1681,7802,7803],{},"threshold",[931,7805,7806,7808],{"align":977},[594,7807,5565],{}," — An edge is only rendered if the angle (in degrees) between the face normals of the adjoining faces exceeds this value",[931,7810,7811],{},[594,7812,1901],{},[1307,7814,1656],{},{"title":552,"searchDepth":553,"depth":554,"links":7816},[7817,7818],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},"Render visible edges of objects with enhanced visual quality.",{},{"title":53,"description":7819},"vRk1JMb5etr7hxo-Xvqb4plDDBOVqDhpMNgSnbTVmEE",{"id":7824,"title":57,"body":7825,"description":8492,"extension":567,"links":568,"meta":8493,"navigation":570,"path":58,"seo":8494,"stem":59,"__hash__":8495},"docs/2.api/1.abstractions/fit.md",{"type":477,"value":7826,"toc":8488},[7827,7832,7838,7848,7854,7856,8352,8354,8485],[2343,7828,7829],{},[7830,7831],"abstractions-fit",{},[590,7833,7834,7837],{},[594,7835,7836],{},"\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.",[590,7839,7840,7841,7844,7845,1126],{},"Alternatively, the children can be fit into a ",[594,7842,7843],{},"Box3"," or an ",[594,7846,7847],{},"Object3D",[590,7849,7850,7851,7853],{},"Or the children can simply be resized. With ",[594,7852,7836],{}," the children are scaled relative to the center of their calculated bounding box.",[480,7855,15],{"id":600},[602,7857,7860],{"className":604,"code":7858,"highlights":7859,"language":609,"meta":552,"style":552},"\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",[554,892,2763],[594,7861,7862,7882,7906,7924,7948,7952,7971,8013,8051,8078,8083,8087,8103,8118,8126,8130,8138,8157,8189,8197,8206,8212,8239,8255,8269,8293,8298,8307,8336,8344],{"__ignoreMap":552},[613,7863,7864,7866,7868,7870,7872,7874,7876,7878,7880],{"class":615,"line":553},[613,7865,619],{"class":618},[613,7867,623],{"class":622},[613,7869,627],{"class":626},[613,7871,630],{"class":626},[613,7873,633],{"class":618},[613,7875,636],{"class":618},[613,7877,640],{"class":639},[613,7879,636],{"class":618},[613,7881,645],{"class":618},[613,7883,7885,7887,7889,7892,7894,7896,7898,7900,7902,7904],{"class":7884,"line":554},[615,649],[613,7886,653],{"class":652},[613,7888,656],{"class":618},[613,7890,7891],{"class":659}," Fit",[613,7893,663],{"class":618},[613,7895,666],{"class":659},[613,7897,669],{"class":618},[613,7899,672],{"class":652},[613,7901,675],{"class":618},[613,7903,678],{"class":639},[613,7905,681],{"class":618},[613,7907,7908,7910,7912,7914,7916,7918,7920,7922],{"class":615,"line":684},[613,7909,653],{"class":652},[613,7911,656],{"class":618},[613,7913,691],{"class":659},[613,7915,669],{"class":618},[613,7917,672],{"class":652},[613,7919,675],{"class":618},[613,7921,700],{"class":639},[613,7923,681],{"class":618},[613,7925,7926,7928,7930,7933,7935,7938,7940,7942,7944,7946],{"class":615,"line":705},[613,7927,653],{"class":652},[613,7929,656],{"class":618},[613,7931,7932],{"class":659}," BoxGeometry",[613,7934,663],{"class":618},[613,7936,7937],{"class":659}," MeshNormalMaterial",[613,7939,669],{"class":618},[613,7941,672],{"class":652},[613,7943,675],{"class":618},[613,7945,4785],{"class":639},[613,7947,681],{"class":618},[613,7949,7950],{"class":615,"line":715},[613,7951,718],{"emptyLinePlaceholder":570},[613,7953,7954,7956,7959,7961,7963,7966,7968],{"class":615,"line":721},[613,7955,2463],{"class":626},[613,7957,7958],{"class":659}," positions",[613,7960,1198],{"class":618},[613,7962,5570],{"class":1180},[613,7964,7965],{"class":659},"[][] ",[613,7967,633],{"class":618},[613,7969,7970],{"class":659}," []\n",[613,7972,7973,7976,7978,7981,7984,7986,7989,7991,7993,7996,7999,8001,8003,8006,8009,8011],{"class":615,"line":731},[613,7974,7975],{"class":652},"for",[613,7977,3143],{"class":659},[613,7979,7980],{"class":626},"let",[613,7982,7983],{"class":659}," y ",[613,7985,633],{"class":618},[613,7987,7988],{"class":799}," 100",[613,7990,4277],{"class":618},[613,7992,7983],{"class":659},[613,7994,7995],{"class":618},"\u003C=",[613,7997,7998],{"class":799}," 120",[613,8000,4277],{"class":618},[613,8002,7983],{"class":659},[613,8004,8005],{"class":618},"+=",[613,8007,8008],{"class":799}," 10",[613,8010,4893],{"class":659},[613,8012,3329],{"class":618},[613,8014,8015,8018,8020,8022,8025,8027,8029,8031,8033,8036,8038,8040,8042,8045,8047,8049],{"class":615,"line":754},[613,8016,8017],{"class":652}," for",[613,8019,3143],{"class":622},[613,8021,7980],{"class":626},[613,8023,8024],{"class":659}," x",[613,8026,2479],{"class":618},[613,8028,7988],{"class":799},[613,8030,4277],{"class":618},[613,8032,8024],{"class":659},[613,8034,8035],{"class":618}," \u003C=",[613,8037,7998],{"class":799},[613,8039,4277],{"class":618},[613,8041,8024],{"class":659},[613,8043,8044],{"class":618}," +=",[613,8046,8008],{"class":799},[613,8048,4893],{"class":622},[613,8050,3329],{"class":618},[613,8052,8053,8056,8058,8061,8063,8066,8068,8071,8073,8076],{"class":615,"line":766},[613,8054,8055],{"class":659}," positions",[613,8057,1126],{"class":618},[613,8059,8060],{"class":2482},"push",[613,8062,3598],{"class":622},[613,8064,8065],{"class":659},"x",[613,8067,663],{"class":618},[613,8069,8070],{"class":659}," y",[613,8072,663],{"class":618},[613,8074,8075],{"class":799}," 9999",[613,8077,2648],{"class":622},[613,8079,8080],{"class":615,"line":776},[613,8081,8082],{"class":618}," }\n",[613,8084,8085],{"class":615,"line":781},[613,8086,1305],{"class":618},[613,8088,8089,8091,8094,8096,8099,8101],{"class":615,"line":807},[613,8090,2463],{"class":626},[613,8092,8093],{"class":659}," geom ",[613,8095,633],{"class":618},[613,8097,8098],{"class":618}," new",[613,8100,7932],{"class":2482},[613,8102,6745],{"class":659},[613,8104,8105,8107,8110,8112,8114,8116],{"class":615,"line":607},[613,8106,2463],{"class":626},[613,8108,8109],{"class":659}," mat ",[613,8111,633],{"class":618},[613,8113,8098],{"class":618},[613,8115,7937],{"class":2482},[613,8117,6745],{"class":659},[613,8119,8120,8122,8124],{"class":615,"line":830},[613,8121,708],{"class":618},[613,8123,623],{"class":622},[613,8125,645],{"class":618},[613,8127,8128],{"class":615,"line":841},[613,8129,718],{"emptyLinePlaceholder":570},[613,8131,8132,8134,8136],{"class":615,"line":852},[613,8133,619],{"class":618},[613,8135,726],{"class":622},[613,8137,645],{"class":618},[613,8139,8140,8142,8144,8146,8148,8150,8153,8155],{"class":615,"line":862},[613,8141,734],{"class":618},[613,8143,737],{"class":622},[613,8145,740],{"class":626},[613,8147,633],{"class":618},[613,8149,636],{"class":618},[613,8151,8152],{"class":639},"#4F4F4F",[613,8154,636],{"class":618},[613,8156,645],{"class":618},[613,8158,8159,8161,8163,8165,8167,8169,8171,8173,8175,8177,8179,8181,8183,8185,8187],{"class":615,"line":608},[613,8160,757],{"class":618},[613,8162,760],{"class":622},[613,8164,789],{"class":618},[613,8166,1467],{"class":626},[613,8168,633],{"class":618},[613,8170,636],{"class":618},[613,8172,1474],{"class":618},[613,8174,1901],{"class":799},[613,8176,1479],{"class":618},[613,8178,1901],{"class":799},[613,8180,1479],{"class":618},[613,8182,1901],{"class":799},[613,8184,1489],{"class":618},[613,8186,636],{"class":618},[613,8188,763],{"class":618},[613,8190,8191,8193,8195],{"class":615,"line":882},[613,8192,757],{"class":618},[613,8194,771],{"class":622},[613,8196,763],{"class":618},[613,8198,8200,8202,8204],{"class":8199,"line":892},[615,649],[613,8201,757],{"class":618},[613,8203,57],{"class":622},[613,8205,645],{"class":618},[613,8207,8208,8210],{"class":615,"line":2671},[613,8209,833],{"class":618},[613,8211,5305],{"class":622},[613,8213,8214,8217,8219,8221,8223,8226,8228,8231,8234,8237],{"class":615,"line":2680},[613,8215,8216],{"class":652}," v-for",[613,8218,633],{"class":618},[613,8220,636],{"class":618},[613,8222,2485],{"class":618},[613,8224,8225],{"class":659},"pos",[613,8227,1479],{"class":618},[613,8229,8230],{"class":659},"index",[613,8232,8233],{"class":618},") in ",[613,8235,8236],{"class":659},"positions",[613,8238,3200],{"class":618},[613,8240,8241,8244,8247,8249,8251,8253],{"class":615,"line":2714},[613,8242,8243],{"class":618}," :",[613,8245,8246],{"class":626},"key",[613,8248,633],{"class":618},[613,8250,636],{"class":618},[613,8252,8230],{"class":659},[613,8254,3200],{"class":618},[613,8256,8257,8259,8261,8263,8265,8267],{"class":615,"line":2723},[613,8258,8243],{"class":618},[613,8260,1467],{"class":626},[613,8262,633],{"class":618},[613,8264,636],{"class":618},[613,8266,8225],{"class":659},[613,8268,3200],{"class":618},[613,8270,8271,8273,8275,8277,8279,8281,8284,8286,8289,8291],{"class":615,"line":2732},[613,8272,8243],{"class":618},[613,8274,1997],{"class":626},[613,8276,633],{"class":618},[613,8278,636],{"class":618},[613,8280,1474],{"class":618},[613,8282,8283],{"class":659},"geom",[613,8285,1479],{"class":618},[613,8287,8288],{"class":659},"mat",[613,8290,1489],{"class":618},[613,8292,3200],{"class":618},[613,8294,8295],{"class":615,"line":2741},[613,8296,8297],{"class":618}," />\n",[613,8299,8301,8303,8305],{"class":8300,"line":2763},[615,649],[613,8302,875],{"class":618},[613,8304,57],{"class":622},[613,8306,645],{"class":618},[613,8308,8309,8311,8314,8316,8318,8320,8322,8324,8326,8328,8330,8332,8334],{"class":615,"line":2814},[613,8310,757],{"class":618},[613,8312,8313],{"class":622},"TresGridHelper",[613,8315,789],{"class":618},[613,8317,1997],{"class":626},[613,8319,633],{"class":618},[613,8321,636],{"class":618},[613,8323,1474],{"class":618},[613,8325,1901],{"class":799},[613,8327,1479],{"class":618},[613,8329,1901],{"class":799},[613,8331,1489],{"class":618},[613,8333,636],{"class":618},[613,8335,763],{"class":618},[613,8337,8338,8340,8342],{"class":615,"line":2823},[613,8339,885],{"class":618},[613,8341,737],{"class":622},[613,8343,645],{"class":618},[613,8345,8346,8348,8350],{"class":615,"line":2832},[613,8347,708],{"class":618},[613,8349,726],{"class":622},[613,8351,645],{"class":618},[480,8353,902],{"id":901},[907,8355,8356,8365],{},[910,8357,8358],{},[913,8359,8360,8363],{},[916,8361,8362],{"align":977},"Name",[916,8364,921],{"align":977},[926,8366,8367,8461],{},[913,8368,8369,8374],{},[931,8370,8371],{"align":977},[1681,8372,8373],{},"into",[931,8375,938,8376,8378,8379,8453,8455,8456,8458],{"align":977},[594,8377,8373],{}," is:",[2261,8380,8381,8390,8398,8406,8414,8425,8432],{},[2264,8382,8383,8384,8386,8387,8389],{},"omitted or explicitly ",[594,8385,1159],{},": position/scale children to fit into a 1 × 1 × 1 ",[594,8388,7843],{}," at world origin.",[2264,8391,8392,8394,8395,8397],{},[594,8393,3725],{},": turn off ",[594,8396,7836],{},"; reset scale/position of children.",[2264,8399,8400,8402,8403,1126],{},[594,8401,5565],{},": convert argument to ",[594,8404,8405],{},"Vector3(number, number, number)",[2264,8407,8408,8402,8411,1126],{},[594,8409,8410],{},"[number, number, number]",[594,8412,8413],{},"Vector3",[2264,8415,8416,8418,8419,8421,8422,8424],{},[594,8417,8413],{},": position/scale children to fit inside a ",[594,8420,7843],{}," of size ",[594,8423,8413],{}," at target objects' cumulative center.",[2264,8426,8427,8429,8430,1126],{},[594,8428,7843],{},": position/scale children to fit inside ",[594,8431,7843],{},[2264,8433,8434,8436,8437,8439,8440,8439,8447,8449,8450,8452],{},[594,8435,7847],{},": position/scale children to fit inside calculated ",[594,8438,7843],{},". ",[1120,8441,1118,8444],{"href":8442,"rel":8443},"https://threejs.org/docs/#api/en/math/Box3.setFromObject",[1124],[594,8445,8446],{},"THREE.Box3.setFromObject",[594,8448,7836],{}," must not contain the ",[594,8451,7847],{}," and vice-versa.",[7780,8454],{},"default:",[7780,8457],{},[594,8459,8460],{},"new Box3(new Vector3(-0.5, -0.5, -0.5), new Vector3(0.5, 0.5, 0.5))",[913,8462,8463,8467],{},[931,8464,8465],{"align":977},[1681,8466,1115],{},[931,8468,8469,8477,8479,8455,8481,8483],{"align":977},[1120,8470,1118,8472,8474,8475],{"href":1122,"rel":8471},[1124],[594,8473,1115],{}," argument in ",[594,8476,8446],{},[7780,8478],{},[7780,8480],{},[7780,8482],{},[594,8484,951],{},[1307,8486,8487],{},"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":552,"searchDepth":553,"depth":554,"links":8489},[8490,8491],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},"Uniformly scale and position children to fit into a defined space.",{},{"title":57,"description":8492},"tH6jw7YAXoAU7p9igc7yqRqMHzbHPTChNczZPQOqacI",{"id":8497,"title":61,"body":8498,"description":8945,"extension":567,"links":568,"meta":8946,"navigation":570,"path":62,"seo":8947,"stem":63,"__hash__":8948},"docs/2.api/1.abstractions/levioso.md",{"type":477,"value":8499,"toc":8941},[8500,8505,8512,8521,8523,8867,8869,8939],[584,8501,8502],{},[8503,8504],"abstractions-levioso",{},[590,8506,8507],{},[8508,8509],"img",{"alt":8510,"src":8511},"Leviosa","https://media.giphy.com/media/HaCFT5ghY6L1m/giphy.gif",[590,8513,2843,8514,8516,8517,8520],{},[594,8515,7528],{}," package provides a ",[594,8518,8519],{},"\u003CLevioso />"," wrapper that makes its content … float, just like Magic 🪄✨",[480,8522,15],{"id":600},[602,8524,8527],{"className":604,"code":8525,"highlights":8526,"language":609,"meta":552,"style":552},"\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",[684,781,607],[594,8528,8529,8549,8571,8601,8605,8613,8617,8625,8647,8704,8712,8735,8743,8752,8773,8818,8851,8859],{"__ignoreMap":552},[613,8530,8531,8533,8535,8537,8539,8541,8543,8545,8547],{"class":615,"line":553},[613,8532,619],{"class":618},[613,8534,623],{"class":622},[613,8536,627],{"class":626},[613,8538,630],{"class":626},[613,8540,633],{"class":618},[613,8542,636],{"class":618},[613,8544,640],{"class":639},[613,8546,636],{"class":618},[613,8548,645],{"class":618},[613,8550,8551,8553,8555,8557,8559,8561,8564,8566,8568],{"class":615,"line":554},[613,8552,653],{"class":652},[613,8554,656],{"class":618},[613,8556,691],{"class":659},[613,8558,669],{"class":618},[613,8560,672],{"class":652},[613,8562,8563],{"class":618}," \"",[613,8565,700],{"class":639},[613,8567,636],{"class":618},[613,8569,8570],{"class":618},";\n",[613,8572,8574,8576,8578,8581,8583,8585,8587,8589,8591,8593,8595,8597,8599],{"class":8573,"line":684},[615,649],[613,8575,653],{"class":652},[613,8577,656],{"class":618},[613,8579,8580],{"class":659}," Levioso",[613,8582,663],{"class":618},[613,8584,666],{"class":659},[613,8586,663],{"class":618},[613,8588,1377],{"class":659},[613,8590,669],{"class":618},[613,8592,672],{"class":652},[613,8594,8563],{"class":618},[613,8596,678],{"class":639},[613,8598,636],{"class":618},[613,8600,8570],{"class":618},[613,8602,8603],{"class":615,"line":705},[613,8604,718],{"emptyLinePlaceholder":570},[613,8606,8607,8609,8611],{"class":615,"line":715},[613,8608,708],{"class":618},[613,8610,623],{"class":622},[613,8612,645],{"class":618},[613,8614,8615],{"class":615,"line":721},[613,8616,718],{"emptyLinePlaceholder":570},[613,8618,8619,8621,8623],{"class":615,"line":731},[613,8620,619],{"class":618},[613,8622,726],{"class":622},[613,8624,645],{"class":618},[613,8626,8627,8629,8631,8633,8636,8638,8640,8643,8645],{"class":615,"line":754},[613,8628,734],{"class":618},[613,8630,737],{"class":622},[613,8632,789],{"class":618},[613,8634,8635],{"class":626},"clear-color",[613,8637,633],{"class":618},[613,8639,636],{"class":618},[613,8641,8642],{"class":799},"0x82dbc5",[613,8644,636],{"class":618},[613,8646,645],{"class":618},[613,8648,8649,8651,8653,8655,8657,8659,8661,8663,8665,8667,8669,8671,8673,8675,8677,8679,8682,8684,8686,8688,8690,8692,8694,8696,8698,8700,8702],{"class":615,"line":766},[613,8650,757],{"class":618},[613,8652,760],{"class":622},[613,8654,789],{"class":618},[613,8656,1467],{"class":626},[613,8658,633],{"class":618},[613,8660,636],{"class":618},[613,8662,1474],{"class":618},[613,8664,945],{"class":799},[613,8666,1479],{"class":618},[613,8668,945],{"class":799},[613,8670,1479],{"class":618},[613,8672,7668],{"class":799},[613,8674,1489],{"class":618},[613,8676,636],{"class":618},[613,8678,789],{"class":618},[613,8680,8681],{"class":626},"look-at",[613,8683,633],{"class":618},[613,8685,636],{"class":618},[613,8687,1474],{"class":618},[613,8689,945],{"class":799},[613,8691,1479],{"class":618},[613,8693,945],{"class":799},[613,8695,1479],{"class":618},[613,8697,945],{"class":799},[613,8699,1489],{"class":618},[613,8701,636],{"class":618},[613,8703,763],{"class":618},[613,8705,8706,8708,8710],{"class":615,"line":776},[613,8707,757],{"class":618},[613,8709,771],{"class":622},[613,8711,763],{"class":618},[613,8713,8715,8717,8720,8722,8725,8727,8729,8731,8733],{"class":8714,"line":781},[615,649],[613,8716,757],{"class":618},[613,8718,8719],{"class":622},"Levioso",[613,8721,789],{"class":618},[613,8723,8724],{"class":626},"speed",[613,8726,633],{"class":618},[613,8728,636],{"class":618},[613,8730,3876],{"class":799},[613,8732,636],{"class":618},[613,8734,645],{"class":618},[613,8736,8737,8739,8741],{"class":615,"line":807},[613,8738,833],{"class":618},[613,8740,197],{"class":622},[613,8742,763],{"class":618},[613,8744,8746,8748,8750],{"class":8745,"line":607},[615,649],[613,8747,875],{"class":618},[613,8749,8719],{"class":622},[613,8751,645],{"class":618},[613,8753,8754,8756,8759,8761,8763,8765,8767,8769,8771],{"class":615,"line":830},[613,8755,757],{"class":618},[613,8757,8758],{"class":622},"TresAmbientLight",[613,8760,789],{"class":618},[613,8762,1894],{"class":626},[613,8764,633],{"class":618},[613,8766,636],{"class":618},[613,8768,1901],{"class":799},[613,8770,636],{"class":618},[613,8772,763],{"class":618},[613,8774,8775,8777,8780,8782,8784,8786,8788,8790,8792,8794,8796,8798,8800,8802,8804,8806,8808,8810,8812,8814,8816],{"class":615,"line":841},[613,8776,757],{"class":618},[613,8778,8779],{"class":622},"TresDirectionalLight",[613,8781,789],{"class":618},[613,8783,1894],{"class":626},[613,8785,633],{"class":618},[613,8787,636],{"class":618},[613,8789,1901],{"class":799},[613,8791,636],{"class":618},[613,8793,789],{"class":618},[613,8795,1467],{"class":626},[613,8797,633],{"class":618},[613,8799,636],{"class":618},[613,8801,1474],{"class":618},[613,8803,800],{"class":799},[613,8805,1479],{"class":618},[613,8807,800],{"class":799},[613,8809,1479],{"class":618},[613,8811,800],{"class":799},[613,8813,1489],{"class":618},[613,8815,636],{"class":618},[613,8817,763],{"class":618},[613,8819,8820,8822,8824,8826,8828,8830,8832,8834,8836,8839,8841,8843,8845,8847,8849],{"class":615,"line":852},[613,8821,757],{"class":618},[613,8823,8313],{"class":622},[613,8825,789],{"class":618},[613,8827,1467],{"class":626},[613,8829,633],{"class":618},[613,8831,636],{"class":618},[613,8833,1474],{"class":618},[613,8835,945],{"class":799},[613,8837,8838],{"class":618},", -",[613,8840,1901],{"class":799},[613,8842,1479],{"class":618},[613,8844,945],{"class":799},[613,8846,1489],{"class":618},[613,8848,636],{"class":618},[613,8850,763],{"class":618},[613,8852,8853,8855,8857],{"class":615,"line":862},[613,8854,885],{"class":618},[613,8856,737],{"class":622},[613,8858,645],{"class":618},[613,8860,8861,8863,8865],{"class":615,"line":608},[613,8862,708],{"class":618},[613,8864,726],{"class":622},[613,8866,645],{"class":618},[480,8868,902],{"id":901},[907,8870,8871,8881],{},[910,8872,8873],{},[913,8874,8875,8877,8879],{},[916,8876,918],{"align":977},[916,8878,921],{"align":977},[916,8880,924],{},[926,8882,8883,8896,8910,8924],{},[913,8884,8885,8889,8892],{},[931,8886,8887],{"align":977},[594,8888,8724],{},[931,8890,8891],{"align":977},"Floating speed, higher it rocks more 🤘.",[931,8893,8894],{},[594,8895,1901],{},[913,8897,8898,8903,8906],{},[931,8899,8900],{"align":977},[594,8901,8902],{},"rotationFactor",[931,8904,8905],{"align":977},"Factor for Euler rotation.",[931,8907,8908],{},[594,8909,1901],{},[913,8911,8912,8917,8920],{},[931,8913,8914],{"align":977},[594,8915,8916],{},"floatFactor",[931,8918,8919],{"align":977},"Factor for Up/down movement.",[931,8921,8922],{},[594,8923,1901],{},[913,8925,8926,8931,8934],{},[931,8927,8928],{"align":977},[594,8929,8930],{},"range",[931,8932,8933],{"align":977},"Range of y-axis values the object will float within.",[931,8935,8936],{},[594,8937,8938],{},"[-0.1, 0.1]",[1307,8940,1656],{},{"title":552,"searchDepth":553,"depth":554,"links":8942},[8943,8944],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},"Make content float like magic with smooth animations.",{},{"title":61,"description":8945},"VAdlRyCWTgbZPtL3_7gw5lCESxOAP-g-m4p4X69NI_4",{"id":8950,"title":65,"body":8951,"description":9636,"extension":567,"links":568,"meta":9637,"navigation":570,"path":66,"seo":9638,"stem":67,"__hash__":9639},"docs/2.api/1.abstractions/mask.md",{"type":477,"value":8952,"toc":9631},[8953,8958,8964,8997,8999,9505,9507,9569,9572,9579,9584,9599,9628],[584,8954,8955],{},[8956,8957],"abstractions-mask",{},[590,8959,8960,8963],{},[594,8961,8962],{},"\u003CMask/>"," uses the stencil buffer to cut out areas of the screen.",[3268,8965,8966,8984],{},[590,8967,8968,8969,8972,8973,8976,8977,8980,8981,1126],{},"To use ",[594,8970,8971],{},"\u003CMask />"," you ",[1685,8974,8975],{},"must"," add ",[594,8978,8979],{},":stencil=\"true\""," to your ",[594,8982,8983],{},"\u003CTresCanvas />",[590,8985,8986,8988,8989,8996],{},[594,8987,8971],{}," relies on the ",[1120,8990,8993],{"href":8991,"rel":8992},"https://threejs.org/docs/#api/en/renderers/WebGLRenderer",[1124],[594,8994,8995],{},"stencil buffer",". In recent versions of THREE.js, by default, the stencil buffer is not created.",[480,8998,15],{"id":600},[602,9000,9003],{"className":604,"code":9001,"highlights":9002,"language":609,"meta":552,"style":552},"\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",[554,852,862,608,882],[594,9004,9005,9025,9054,9072,9080,9084,9092,9124,9132,9140,9144,9165,9173,9208,9226,9234,9256,9266,9286,9295,9303,9307,9331,9339,9365,9373,9377,9399,9407,9431,9439,9443,9465,9473,9481,9489,9497],{"__ignoreMap":552},[613,9006,9007,9009,9011,9013,9015,9017,9019,9021,9023],{"class":615,"line":553},[613,9008,619],{"class":618},[613,9010,623],{"class":622},[613,9012,627],{"class":626},[613,9014,630],{"class":626},[613,9016,633],{"class":618},[613,9018,636],{"class":618},[613,9020,640],{"class":639},[613,9022,636],{"class":618},[613,9024,645],{"class":618},[613,9026,9028,9030,9032,9035,9037,9039,9041,9044,9046,9048,9050,9052],{"class":9027,"line":554},[615,649],[613,9029,653],{"class":652},[613,9031,656],{"class":618},[613,9033,9034],{"class":659}," Mask",[613,9036,663],{"class":618},[613,9038,666],{"class":659},[613,9040,663],{"class":618},[613,9042,9043],{"class":659}," useMask",[613,9045,669],{"class":618},[613,9047,672],{"class":652},[613,9049,675],{"class":618},[613,9051,678],{"class":639},[613,9053,681],{"class":618},[613,9055,9056,9058,9060,9062,9064,9066,9068,9070],{"class":615,"line":684},[613,9057,653],{"class":652},[613,9059,656],{"class":618},[613,9061,691],{"class":659},[613,9063,669],{"class":618},[613,9065,672],{"class":652},[613,9067,675],{"class":618},[613,9069,700],{"class":639},[613,9071,681],{"class":618},[613,9073,9074,9076,9078],{"class":615,"line":705},[613,9075,708],{"class":618},[613,9077,623],{"class":622},[613,9079,645],{"class":618},[613,9081,9082],{"class":615,"line":715},[613,9083,718],{"emptyLinePlaceholder":570},[613,9085,9086,9088,9090],{"class":615,"line":721},[613,9087,619],{"class":618},[613,9089,726],{"class":622},[613,9091,645],{"class":618},[613,9093,9094,9096,9098,9100,9103,9105,9107,9109,9111,9113,9115,9117,9120,9122],{"class":615,"line":731},[613,9095,734],{"class":618},[613,9097,737],{"class":622},[613,9099,789],{"class":618},[613,9101,9102],{"class":626},"stencil",[613,9104,633],{"class":618},[613,9106,636],{"class":618},[613,9108,941],{"class":4536},[613,9110,636],{"class":618},[613,9112,740],{"class":626},[613,9114,633],{"class":618},[613,9116,636],{"class":618},[613,9118,9119],{"class":639},"#4f4f4f",[613,9121,636],{"class":618},[613,9123,645],{"class":618},[613,9125,9126,9128,9130],{"class":615,"line":754},[613,9127,757],{"class":618},[613,9129,760],{"class":622},[613,9131,763],{"class":618},[613,9133,9134,9136,9138],{"class":615,"line":766},[613,9135,757],{"class":618},[613,9137,771],{"class":622},[613,9139,763],{"class":618},[613,9141,9142],{"class":615,"line":776},[613,9143,718],{"emptyLinePlaceholder":570},[613,9145,9146,9148,9151,9153,9155,9157,9159,9161,9163],{"class":615,"line":781},[613,9147,757],{"class":618},[613,9149,9150],{"class":622},"TresGroup",[613,9152,789],{"class":618},[613,9154,792],{"class":626},[613,9156,633],{"class":618},[613,9158,636],{"class":618},[613,9160,800],{"class":799},[613,9162,636],{"class":618},[613,9164,645],{"class":618},[613,9166,9167,9169,9171],{"class":615,"line":807},[613,9168,833],{"class":618},[613,9170,836],{"class":622},[613,9172,645],{"class":618},[613,9174,9175,9177,9180,9182,9184,9186,9188,9190,9193,9195,9197,9199,9202,9204,9206],{"class":615,"line":607},[613,9176,844],{"class":618},[613,9178,9179],{"class":622},"TresRingGeometry",[613,9181,789],{"class":618},[613,9183,1997],{"class":626},[613,9185,633],{"class":618},[613,9187,636],{"class":618},[613,9189,1474],{"class":618},[613,9191,9192],{"class":799},"0.95",[613,9194,1479],{"class":618},[613,9196,1901],{"class":799},[613,9198,1479],{"class":618},[613,9200,9201],{"class":799},"64",[613,9203,1489],{"class":618},[613,9205,636],{"class":618},[613,9207,763],{"class":618},[613,9209,9210,9212,9214,9216,9218,9220,9222,9224],{"class":615,"line":830},[613,9211,844],{"class":618},[613,9213,7697],{"class":622},[613,9215,2749],{"class":626},[613,9217,633],{"class":618},[613,9219,636],{"class":618},[613,9221,2756],{"class":639},[613,9223,636],{"class":618},[613,9225,763],{"class":618},[613,9227,9228,9230,9232],{"class":615,"line":841},[613,9229,865],{"class":618},[613,9231,836],{"class":622},[613,9233,645],{"class":618},[613,9235,9237,9239,9241,9243,9246,9248,9250,9252,9254],{"class":9236,"line":852},[615,649],[613,9238,833],{"class":618},[613,9240,65],{"class":622},[613,9242,789],{"class":618},[613,9244,9245],{"class":626},"id",[613,9247,633],{"class":618},[613,9249,636],{"class":618},[613,9251,1901],{"class":799},[613,9253,636],{"class":618},[613,9255,645],{"class":618},[613,9257,9259,9261,9264],{"class":9258,"line":862},[615,649],[613,9260,844],{"class":618},[613,9262,9263],{"class":622},"TresCircleGeometry",[613,9265,763],{"class":618},[613,9267,9269,9271,9273,9275,9277,9279,9282,9284],{"class":9268,"line":608},[615,649],[613,9270,844],{"class":618},[613,9272,7697],{"class":622},[613,9274,2749],{"class":626},[613,9276,633],{"class":618},[613,9278,636],{"class":618},[613,9280,9281],{"class":639},"#fbb03b",[613,9283,636],{"class":618},[613,9285,763],{"class":618},[613,9287,9289,9291,9293],{"class":9288,"line":882},[615,649],[613,9290,865],{"class":618},[613,9292,65],{"class":622},[613,9294,645],{"class":618},[613,9296,9297,9299,9301],{"class":615,"line":892},[613,9298,875],{"class":618},[613,9300,9150],{"class":622},[613,9302,645],{"class":618},[613,9304,9305],{"class":615,"line":2671},[613,9306,718],{"emptyLinePlaceholder":570},[613,9308,9309,9311,9313,9315,9318,9320,9322,9325,9327,9329],{"class":615,"line":2680},[613,9310,757],{"class":618},[613,9312,836],{"class":622},[613,9314,789],{"class":618},[613,9316,9317],{"class":626},"position-z",[613,9319,633],{"class":618},[613,9321,636],{"class":618},[613,9323,9324],{"class":618},"-",[613,9326,1901],{"class":799},[613,9328,636],{"class":618},[613,9330,645],{"class":618},[613,9332,9333,9335,9337],{"class":615,"line":2714},[613,9334,833],{"class":618},[613,9336,847],{"class":622},[613,9338,763],{"class":618},[613,9340,9341,9343,9345,9348,9350,9352,9355,9357,9359,9361,9363],{"class":615,"line":2723},[613,9342,833],{"class":618},[613,9344,857],{"class":622},[613,9346,9347],{"class":626}," v-bind",[613,9349,633],{"class":618},[613,9351,636],{"class":618},[613,9353,9354],{"class":2482},"useMask",[613,9356,2485],{"class":618},[613,9358,1901],{"class":799},[613,9360,3409],{"class":618},[613,9362,636],{"class":618},[613,9364,763],{"class":618},[613,9366,9367,9369,9371],{"class":615,"line":2732},[613,9368,875],{"class":618},[613,9370,836],{"class":622},[613,9372,645],{"class":618},[613,9374,9375],{"class":615,"line":2741},[613,9376,718],{"emptyLinePlaceholder":570},[613,9378,9379,9381,9383,9385,9387,9389,9391,9393,9395,9397],{"class":615,"line":2763},[613,9380,757],{"class":618},[613,9382,836],{"class":622},[613,9384,789],{"class":618},[613,9386,9317],{"class":626},[613,9388,633],{"class":618},[613,9390,636],{"class":618},[613,9392,9324],{"class":618},[613,9394,2705],{"class":799},[613,9396,636],{"class":618},[613,9398,645],{"class":618},[613,9400,9401,9403,9405],{"class":615,"line":2814},[613,9402,833],{"class":618},[613,9404,847],{"class":622},[613,9406,763],{"class":618},[613,9408,9409,9411,9413,9415,9417,9419,9421,9423,9425,9427,9429],{"class":615,"line":2823},[613,9410,833],{"class":618},[613,9412,857],{"class":622},[613,9414,9347],{"class":626},[613,9416,633],{"class":618},[613,9418,636],{"class":618},[613,9420,9354],{"class":2482},[613,9422,2485],{"class":618},[613,9424,1901],{"class":799},[613,9426,3409],{"class":618},[613,9428,636],{"class":618},[613,9430,763],{"class":618},[613,9432,9433,9435,9437],{"class":615,"line":2832},[613,9434,875],{"class":618},[613,9436,836],{"class":622},[613,9438,645],{"class":618},[613,9440,9441],{"class":615,"line":4034},[613,9442,718],{"emptyLinePlaceholder":570},[613,9444,9445,9447,9449,9451,9453,9455,9457,9459,9461,9463],{"class":615,"line":4078},[613,9446,757],{"class":618},[613,9448,836],{"class":622},[613,9450,789],{"class":618},[613,9452,9317],{"class":626},[613,9454,633],{"class":618},[613,9456,636],{"class":618},[613,9458,9324],{"class":618},[613,9460,7668],{"class":799},[613,9462,636],{"class":618},[613,9464,645],{"class":618},[613,9466,9467,9469,9471],{"class":615,"line":4105},[613,9468,833],{"class":618},[613,9470,847],{"class":622},[613,9472,763],{"class":618},[613,9474,9475,9477,9479],{"class":615,"line":4124},[613,9476,833],{"class":618},[613,9478,857],{"class":622},[613,9480,763],{"class":618},[613,9482,9483,9485,9487],{"class":615,"line":4165},[613,9484,875],{"class":618},[613,9486,836],{"class":622},[613,9488,645],{"class":618},[613,9490,9491,9493,9495],{"class":615,"line":4174},[613,9492,885],{"class":618},[613,9494,737],{"class":622},[613,9496,645],{"class":618},[613,9498,9499,9501,9503],{"class":615,"line":4183},[613,9500,708],{"class":618},[613,9502,726],{"class":622},[613,9504,645],{"class":618},[480,9506,902],{"id":901},[907,9508,9509,9519],{},[910,9510,9511],{},[913,9512,9513,9515,9517],{},[916,9514,918],{"align":977},[916,9516,921],{"align":977},[916,9518,924],{},[926,9520,9521,9537,9553],{},[913,9522,9523,9529,9535],{},[931,9524,9525],{"align":977},[1681,9526,9527],{},[594,9528,9245],{},[931,9530,9531,9532,9534],{"align":977},"Id of the stencil buffer to use. Each mask must have a ",[594,9533,5565],{}," id. Multiple masks can refer to the same id.",[931,9536],{},[913,9538,9539,9546,9549],{},[931,9540,9541],{"align":977},[1681,9542,9543],{},[594,9544,9545],{},"colorWrite",[931,9547,9548],{"align":977},"Whether the colors of the mask's own material will leak through.",[931,9550,9551],{},[594,9552,951],{},[913,9554,9555,9562,9565],{},[931,9556,9557],{"align":977},[1681,9558,9559],{},[594,9560,9561],{},"depthWrite",[931,9563,9564],{"align":977},"Whether the depth of the mask's own material will leak through.",[931,9566,9567],{},[594,9568,951],{},[480,9570,9354],{"id":9571},"usemask",[590,9573,9574,9575,9578],{},"Composable that returns the stencil configuration to apply a mask to a material. Use it with ",[594,9576,9577],{},"v-bind"," on materials that should be affected by the mask.",[590,9580,9581],{},[1681,9582,9583],{},"Parameters:",[2261,9585,9586,9591],{},[2264,9587,9588,9590],{},[594,9589,9245],{}," - The mask id to use (number or Ref)",[2264,9592,9593,9596,9597],{},[594,9594,9595],{},"inverse"," - Whether to invert the mask (boolean or Ref), defaults to ",[594,9598,951],{},[602,9600,9602],{"className":604,"code":9601,"language":609,"meta":552,"style":552},"\u003CTresMeshNormalMaterial v-bind=\"useMask(1)\" />\n",[594,9603,9604],{"__ignoreMap":552},[613,9605,9606,9608,9610,9612,9614,9616,9618,9620,9622,9624,9626],{"class":615,"line":553},[613,9607,619],{"class":618},[613,9609,857],{"class":622},[613,9611,9347],{"class":626},[613,9613,633],{"class":618},[613,9615,636],{"class":618},[613,9617,9354],{"class":2482},[613,9619,2485],{"class":659},[613,9621,1901],{"class":799},[613,9623,3409],{"class":659},[613,9625,636],{"class":618},[613,9627,763],{"class":618},[1307,9629,9630],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":552,"searchDepth":553,"depth":554,"links":9632},[9633,9634,9635],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},{"id":9571,"depth":554,"text":9354},"Cut out areas of the screen using the stencil buffer.",{},{"title":65,"description":9636},"G7X7KSfvm9ZBJpENVvMjF0UaBORYjhBMGhf9hH7E7tw",{"id":9641,"title":69,"body":9642,"description":10143,"extension":567,"links":568,"meta":10144,"navigation":570,"path":70,"seo":10145,"stem":71,"__hash__":10146},"docs/2.api/1.abstractions/outline.md",{"type":477,"value":9643,"toc":10139},[9644,9649,9660,9662,10040,10042,10137],[584,9645,9646],{},[9647,9648],"abstractions-outline",{},[590,9650,9651,9654,9655,3132,9657,1126],{},[594,9652,9653],{},"\u003COutline />"," creates an inverted-hull outline using its parent's geometry. Supported parents are ",[594,9656,2358],{},[594,9658,9659],{},"\u003CTresSkinnedMesh>",[480,9661,15],{"id":600},[602,9663,9666],{"className":604,"code":9664,"highlights":9665,"language":609,"meta":552,"style":552},"\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",[684,841,892],[594,9667,9668,9688,9706,9730,9738,9742,9750,9768,9776,9784,9805,9851,9874,9882,9891,9925,9933,9953,9977,9985,10016,10024,10032],{"__ignoreMap":552},[613,9669,9670,9672,9674,9676,9678,9680,9682,9684,9686],{"class":615,"line":553},[613,9671,619],{"class":618},[613,9673,623],{"class":622},[613,9675,627],{"class":626},[613,9677,630],{"class":626},[613,9679,633],{"class":618},[613,9681,636],{"class":618},[613,9683,640],{"class":639},[613,9685,636],{"class":618},[613,9687,645],{"class":618},[613,9689,9690,9692,9694,9696,9698,9700,9702,9704],{"class":615,"line":554},[613,9691,653],{"class":652},[613,9693,656],{"class":618},[613,9695,691],{"class":659},[613,9697,669],{"class":618},[613,9699,672],{"class":652},[613,9701,675],{"class":618},[613,9703,700],{"class":639},[613,9705,681],{"class":618},[613,9707,9709,9711,9713,9715,9717,9720,9722,9724,9726,9728],{"class":9708,"line":684},[615,649],[613,9710,653],{"class":652},[613,9712,656],{"class":618},[613,9714,666],{"class":659},[613,9716,663],{"class":618},[613,9718,9719],{"class":659}," Outline",[613,9721,669],{"class":618},[613,9723,672],{"class":652},[613,9725,675],{"class":618},[613,9727,678],{"class":639},[613,9729,681],{"class":618},[613,9731,9732,9734,9736],{"class":615,"line":705},[613,9733,708],{"class":618},[613,9735,623],{"class":622},[613,9737,645],{"class":618},[613,9739,9740],{"class":615,"line":715},[613,9741,718],{"emptyLinePlaceholder":570},[613,9743,9744,9746,9748],{"class":615,"line":721},[613,9745,619],{"class":618},[613,9747,726],{"class":622},[613,9749,645],{"class":618},[613,9751,9752,9754,9756,9758,9760,9762,9764,9766],{"class":615,"line":731},[613,9753,734],{"class":618},[613,9755,737],{"class":622},[613,9757,740],{"class":626},[613,9759,633],{"class":618},[613,9761,636],{"class":618},[613,9763,9119],{"class":639},[613,9765,636],{"class":618},[613,9767,645],{"class":618},[613,9769,9770,9772,9774],{"class":615,"line":754},[613,9771,757],{"class":618},[613,9773,760],{"class":622},[613,9775,763],{"class":618},[613,9777,9778,9780,9782],{"class":615,"line":766},[613,9779,757],{"class":618},[613,9781,771],{"class":622},[613,9783,763],{"class":618},[613,9785,9786,9788,9790,9792,9794,9796,9798,9801,9803],{"class":615,"line":776},[613,9787,757],{"class":618},[613,9789,8758],{"class":622},[613,9791,789],{"class":618},[613,9793,1894],{"class":626},[613,9795,633],{"class":618},[613,9797,636],{"class":618},[613,9799,9800],{"class":799},"3.14",[613,9802,636],{"class":618},[613,9804,763],{"class":618},[613,9806,9807,9809,9812,9814,9816,9818,9820,9823,9825,9827,9829,9831,9833,9835,9837,9839,9841,9843,9845,9847,9849],{"class":615,"line":781},[613,9808,757],{"class":618},[613,9810,9811],{"class":622},"TresPointLight",[613,9813,789],{"class":618},[613,9815,1894],{"class":626},[613,9817,633],{"class":618},[613,9819,636],{"class":618},[613,9821,9822],{"class":799},"50",[613,9824,636],{"class":618},[613,9826,789],{"class":618},[613,9828,1467],{"class":626},[613,9830,633],{"class":618},[613,9832,636],{"class":618},[613,9834,1474],{"class":618},[613,9836,800],{"class":799},[613,9838,1479],{"class":618},[613,9840,800],{"class":799},[613,9842,1479],{"class":618},[613,9844,945],{"class":799},[613,9846,1489],{"class":618},[613,9848,636],{"class":618},[613,9850,763],{"class":618},[613,9852,9853,9855,9857,9859,9862,9864,9866,9868,9870,9872],{"class":615,"line":807},[613,9854,757],{"class":618},[613,9856,836],{"class":622},[613,9858,789],{"class":618},[613,9860,9861],{"class":626},"position-x",[613,9863,633],{"class":618},[613,9865,636],{"class":618},[613,9867,9324],{"class":618},[613,9869,2597],{"class":799},[613,9871,636],{"class":618},[613,9873,645],{"class":618},[613,9875,9876,9878,9880],{"class":615,"line":607},[613,9877,833],{"class":618},[613,9879,847],{"class":622},[613,9881,763],{"class":618},[613,9883,9884,9886,9889],{"class":615,"line":830},[613,9885,833],{"class":618},[613,9887,9888],{"class":622},"TresMeshPhongMaterial",[613,9890,763],{"class":618},[613,9892,9894,9896,9898,9900,9903,9905,9907,9910,9912,9914,9916,9918,9921,9923],{"class":9893,"line":841},[615,649],[613,9895,833],{"class":618},[613,9897,69],{"class":622},[613,9899,789],{"class":618},[613,9901,9902],{"class":626},"thickness",[613,9904,633],{"class":618},[613,9906,636],{"class":618},[613,9908,9909],{"class":799},"7.5",[613,9911,636],{"class":618},[613,9913,2749],{"class":626},[613,9915,633],{"class":618},[613,9917,636],{"class":618},[613,9919,9920],{"class":639},"#82dbc5",[613,9922,636],{"class":618},[613,9924,763],{"class":618},[613,9926,9927,9929,9931],{"class":615,"line":852},[613,9928,875],{"class":618},[613,9930,836],{"class":622},[613,9932,645],{"class":618},[613,9934,9935,9937,9939,9941,9943,9945,9947,9949,9951],{"class":615,"line":862},[613,9936,757],{"class":618},[613,9938,836],{"class":622},[613,9940,789],{"class":618},[613,9942,9861],{"class":626},[613,9944,633],{"class":618},[613,9946,636],{"class":618},[613,9948,2597],{"class":799},[613,9950,636],{"class":618},[613,9952,645],{"class":618},[613,9954,9955,9957,9959,9961,9963,9965,9967,9969,9971,9973,9975],{"class":615,"line":608},[613,9956,833],{"class":618},[613,9958,4083],{"class":622},[613,9960,789],{"class":618},[613,9962,1997],{"class":626},[613,9964,633],{"class":618},[613,9966,636],{"class":618},[613,9968,1474],{"class":618},[613,9970,1521],{"class":799},[613,9972,1489],{"class":618},[613,9974,636],{"class":618},[613,9976,763],{"class":618},[613,9978,9979,9981,9983],{"class":615,"line":882},[613,9980,833],{"class":618},[613,9982,9888],{"class":622},[613,9984,763],{"class":618},[613,9986,9988,9990,9992,9994,9996,9998,10000,10002,10004,10006,10008,10010,10012,10014],{"class":9987,"line":892},[615,649],[613,9989,833],{"class":618},[613,9991,69],{"class":622},[613,9993,789],{"class":618},[613,9995,9902],{"class":626},[613,9997,633],{"class":618},[613,9999,636],{"class":618},[613,10001,9909],{"class":799},[613,10003,636],{"class":618},[613,10005,2749],{"class":626},[613,10007,633],{"class":618},[613,10009,636],{"class":618},[613,10011,9281],{"class":639},[613,10013,636],{"class":618},[613,10015,763],{"class":618},[613,10017,10018,10020,10022],{"class":615,"line":2671},[613,10019,875],{"class":618},[613,10021,836],{"class":622},[613,10023,645],{"class":618},[613,10025,10026,10028,10030],{"class":615,"line":2680},[613,10027,885],{"class":618},[613,10029,737],{"class":622},[613,10031,645],{"class":618},[613,10033,10034,10036,10038],{"class":615,"line":2714},[613,10035,708],{"class":618},[613,10037,726],{"class":622},[613,10039,645],{"class":618},[480,10041,902],{"id":901},[907,10043,10044,10054],{},[910,10045,10046],{},[913,10047,10048,10050,10052],{},[916,10049,902],{},[916,10051,921],{},[916,10053,924],{},[926,10055,10056,10068,10080,10092,10104,10116],{},[913,10057,10058,10060,10063],{},[931,10059,7772],{},[931,10061,10062],{},"Outline color",[931,10064,10065],{},[594,10066,10067],{},"'black'",[913,10069,10070,10073,10076],{},[931,10071,10072],{},"screenspace",[931,10074,10075],{},"Whether line thickness is independent of zoom",[931,10077,10078],{},[594,10079,951],{},[913,10081,10082,10085,10088],{},[931,10083,10084],{},"opacity",[931,10086,10087],{},"Outline opacity",[931,10089,10090],{},[594,10091,1901],{},[913,10093,10094,10097,10100],{},[931,10095,10096],{},"transparent",[931,10098,10099],{},"Outline transparency",[931,10101,10102],{},[594,10103,951],{},[913,10105,10106,10108,10111],{},[931,10107,9902],{},[931,10109,10110],{},"Outline thickness",[931,10112,10113],{},[594,10114,10115],{},"0.05",[913,10117,10118,10121,10132],{},[931,10119,10120],{},"angle",[931,10122,10123,10124,10126,10127],{},"Geometry crease angle (",[594,10125,945],{}," is no crease). See ",[1120,10128,10131],{"href":10129,"rel":10130},"https://threejs.org/docs/#examples/en/utils/BufferGeometryUtils.toCreasedNormals",[1124],"BufferGeometryUtils.toCreasedNormals",[931,10133,10134],{},[594,10135,10136],{},"Math.PI",[1307,10138,1656],{},{"title":552,"searchDepth":553,"depth":554,"links":10140},[10141,10142],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},"Create inverted-hull outlines using parent geometry.",{},{"title":69,"description":10143},"L_LPQP787liM6IASr51UnMfLs2CRosI1PG5BXlr7m_Q",{"id":10148,"title":73,"body":10149,"description":11033,"extension":567,"links":568,"meta":11034,"navigation":570,"path":74,"seo":11035,"stem":75,"__hash__":11036},"docs/2.api/1.abstractions/sampler.md",{"type":477,"value":10150,"toc":11028},[10151,10156,10159,10161,10499,10501,10565,10569,10576,11025],[584,10152,10153],{},[10154,10155],"abstractions-sampler",{},[590,10157,10158],{},"Declarative abstraction around MeshSurfaceSampler & InstancedMesh. It samples points from the passed mesh and transforms an InstancedMesh's matrix to distribute instances on the points.",[480,10160,15],{"id":600},[602,10162,10165],{"className":604,"code":10163,"highlights":10164,"language":609,"meta":552,"style":552},"\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",[554,781,807,607,830,841,852,862,608,882,892],[594,10166,10167,10187,10211,10229,10237,10241,10249,10268,10300,10308,10312,10334,10343,10353,10362,10367,10395,10428,10437,10446,10455,10483,10491],{"__ignoreMap":552},[613,10168,10169,10171,10173,10175,10177,10179,10181,10183,10185],{"class":615,"line":553},[613,10170,619],{"class":618},[613,10172,623],{"class":622},[613,10174,627],{"class":626},[613,10176,630],{"class":626},[613,10178,633],{"class":618},[613,10180,636],{"class":618},[613,10182,640],{"class":639},[613,10184,636],{"class":618},[613,10186,645],{"class":618},[613,10188,10190,10192,10194,10196,10198,10201,10203,10205,10207,10209],{"class":10189,"line":554},[615,649],[613,10191,653],{"class":652},[613,10193,656],{"class":618},[613,10195,666],{"class":659},[613,10197,663],{"class":618},[613,10199,10200],{"class":659}," Sampler",[613,10202,669],{"class":618},[613,10204,672],{"class":652},[613,10206,675],{"class":618},[613,10208,678],{"class":639},[613,10210,681],{"class":618},[613,10212,10213,10215,10217,10219,10221,10223,10225,10227],{"class":615,"line":684},[613,10214,653],{"class":652},[613,10216,656],{"class":618},[613,10218,691],{"class":659},[613,10220,669],{"class":618},[613,10222,672],{"class":652},[613,10224,675],{"class":618},[613,10226,700],{"class":639},[613,10228,681],{"class":618},[613,10230,10231,10233,10235],{"class":615,"line":705},[613,10232,708],{"class":618},[613,10234,623],{"class":622},[613,10236,645],{"class":618},[613,10238,10239],{"class":615,"line":715},[613,10240,718],{"emptyLinePlaceholder":570},[613,10242,10243,10245,10247],{"class":615,"line":721},[613,10244,619],{"class":618},[613,10246,726],{"class":622},[613,10248,645],{"class":618},[613,10250,10251,10253,10255,10257,10259,10261,10264,10266],{"class":615,"line":731},[613,10252,734],{"class":618},[613,10254,737],{"class":622},[613,10256,740],{"class":626},[613,10258,633],{"class":618},[613,10260,636],{"class":618},[613,10262,10263],{"class":639},"#82DBC5",[613,10265,636],{"class":618},[613,10267,645],{"class":618},[613,10269,10270,10272,10274,10276,10278,10280,10282,10284,10286,10288,10290,10292,10294,10296,10298],{"class":615,"line":754},[613,10271,757],{"class":618},[613,10273,760],{"class":622},[613,10275,789],{"class":618},[613,10277,1467],{"class":626},[613,10279,633],{"class":618},[613,10281,636],{"class":618},[613,10283,1474],{"class":618},[613,10285,945],{"class":799},[613,10287,1479],{"class":618},[613,10289,1521],{"class":799},[613,10291,1479],{"class":618},[613,10293,7668],{"class":799},[613,10295,1489],{"class":618},[613,10297,636],{"class":618},[613,10299,763],{"class":618},[613,10301,10302,10304,10306],{"class":615,"line":766},[613,10303,757],{"class":618},[613,10305,771],{"class":622},[613,10307,763],{"class":618},[613,10309,10310],{"class":615,"line":776},[613,10311,718],{"emptyLinePlaceholder":570},[613,10313,10315,10317,10319,10321,10324,10326,10328,10330,10332],{"class":10314,"line":781},[615,649],[613,10316,757],{"class":618},[613,10318,73],{"class":622},[613,10320,789],{"class":618},[613,10322,10323],{"class":626},"count",[613,10325,633],{"class":618},[613,10327,636],{"class":618},[613,10329,9822],{"class":799},[613,10331,636],{"class":618},[613,10333,645],{"class":618},[613,10335,10337,10339,10341],{"class":10336,"line":807},[615,649],[613,10338,833],{"class":618},[613,10340,836],{"class":622},[613,10342,645],{"class":618},[613,10344,10346,10348,10351],{"class":10345,"line":607},[615,649],[613,10347,844],{"class":618},[613,10349,10350],{"class":622},"TresTorusGeometry",[613,10352,763],{"class":618},[613,10354,10356,10358,10360],{"class":10355,"line":830},[615,649],[613,10357,865],{"class":618},[613,10359,836],{"class":622},[613,10361,645],{"class":618},[613,10363,10365],{"class":10364,"line":841},[615,649],[613,10366,718],{"emptyLinePlaceholder":570},[613,10368,10370,10372,10375,10377,10379,10381,10383,10386,10389,10391,10393],{"class":10369,"line":852},[615,649],[613,10371,833],{"class":618},[613,10373,10374],{"class":622},"TresInstancedMesh",[613,10376,789],{"class":618},[613,10378,1997],{"class":626},[613,10380,633],{"class":618},[613,10382,636],{"class":618},[613,10384,10385],{"class":618},"[null!, null!, ",[613,10387,10388],{"class":799},"1000",[613,10390,1489],{"class":618},[613,10392,636],{"class":618},[613,10394,645],{"class":618},[613,10396,10398,10400,10402,10404,10406,10408,10410,10412,10414,10416,10418,10420,10422,10424,10426],{"class":10397,"line":862},[615,649],[613,10399,844],{"class":618},[613,10401,847],{"class":622},[613,10403,789],{"class":618},[613,10405,1997],{"class":626},[613,10407,633],{"class":618},[613,10409,636],{"class":618},[613,10411,1474],{"class":618},[613,10413,2211],{"class":799},[613,10415,1479],{"class":618},[613,10417,2211],{"class":799},[613,10419,1479],{"class":618},[613,10421,2211],{"class":799},[613,10423,1489],{"class":618},[613,10425,636],{"class":618},[613,10427,763],{"class":618},[613,10429,10431,10433,10435],{"class":10430,"line":608},[615,649],[613,10432,844],{"class":618},[613,10434,857],{"class":622},[613,10436,763],{"class":618},[613,10438,10440,10442,10444],{"class":10439,"line":882},[615,649],[613,10441,865],{"class":618},[613,10443,10374],{"class":622},[613,10445,645],{"class":618},[613,10447,10449,10451,10453],{"class":10448,"line":892},[615,649],[613,10450,875],{"class":618},[613,10452,73],{"class":622},[613,10454,645],{"class":618},[613,10456,10457,10459,10461,10463,10465,10467,10469,10471,10473,10475,10477,10479,10481],{"class":615,"line":2671},[613,10458,757],{"class":618},[613,10460,8313],{"class":622},[613,10462,789],{"class":618},[613,10464,1997],{"class":626},[613,10466,633],{"class":618},[613,10468,636],{"class":618},[613,10470,1474],{"class":618},[613,10472,1486],{"class":799},[613,10474,1479],{"class":618},[613,10476,1486],{"class":799},[613,10478,1489],{"class":618},[613,10480,636],{"class":618},[613,10482,763],{"class":618},[613,10484,10485,10487,10489],{"class":615,"line":2680},[613,10486,885],{"class":618},[613,10488,737],{"class":622},[613,10490,645],{"class":618},[613,10492,10493,10495,10497],{"class":615,"line":2714},[613,10494,708],{"class":618},[613,10496,726],{"class":622},[613,10498,645],{"class":618},[480,10500,902],{"id":901},[907,10502,10503,10511],{},[910,10504,10505],{},[913,10506,10507,10509],{},[916,10508,902],{},[916,10510,921],{},[926,10512,10513,10522,10532,10543,10554],{},[913,10514,10515,10517],{},[931,10516,5009],{},[931,10518,10519,10521],{},[1681,10520,4431],{}," Surface mesh from which to sample",[913,10523,10524,10526],{},[931,10525,10323],{},[931,10527,10528,10531],{},[1681,10529,10530],{},"Number"," Number of samples",[913,10533,10534,10537],{},[931,10535,10536],{},"instanceMesh",[931,10538,10539,10542],{},[1681,10540,10541],{},"InstanceMesh"," InstanceMesh to scatter",[913,10544,10545,10548],{},[931,10546,10547],{},"weight",[931,10549,10550,10553],{},[1681,10551,10552],{},"String"," A vertex attribute to be used as a weight when sampling",[913,10555,10556,10559],{},[931,10557,10558],{},"transform",[931,10560,10561,10564],{},[1681,10562,10563],{},"Function"," A function that can be used as a custom sampling",[480,10566,10568],{"id":10567},"usesurfacesampler","useSurfaceSampler",[590,10570,10571,10572],{},"A hook to obtain the result of the ",[10573,10574,10575],"sampler",{}," as a buffer. Useful for driving anything other than InstancedMesh via the Sampler.",[602,10577,10580],{"className":604,"code":10578,"highlights":10579,"language":609,"meta":552,"style":552},"\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",[554,776],[594,10581,10582,10602,10626,10644,10667,10671,10684,10697,10701,10721,10755,10761,10769,10773,10781,10799,10831,10839,10843,10862,10870,10878,10882,10889,10903,10923,10928,10961,10969,10977,10981,11009,11017],{"__ignoreMap":552},[613,10583,10584,10586,10588,10590,10592,10594,10596,10598,10600],{"class":615,"line":553},[613,10585,619],{"class":618},[613,10587,623],{"class":622},[613,10589,627],{"class":626},[613,10591,630],{"class":626},[613,10593,633],{"class":618},[613,10595,636],{"class":618},[613,10597,640],{"class":639},[613,10599,636],{"class":618},[613,10601,645],{"class":618},[613,10603,10605,10607,10609,10611,10613,10616,10618,10620,10622,10624],{"class":10604,"line":554},[615,649],[613,10606,653],{"class":652},[613,10608,656],{"class":618},[613,10610,666],{"class":659},[613,10612,663],{"class":618},[613,10614,10615],{"class":659}," useSurfaceSampler",[613,10617,669],{"class":618},[613,10619,672],{"class":652},[613,10621,675],{"class":618},[613,10623,678],{"class":639},[613,10625,681],{"class":618},[613,10627,10628,10630,10632,10634,10636,10638,10640,10642],{"class":615,"line":684},[613,10629,653],{"class":652},[613,10631,656],{"class":618},[613,10633,691],{"class":659},[613,10635,669],{"class":618},[613,10637,672],{"class":652},[613,10639,675],{"class":618},[613,10641,700],{"class":639},[613,10643,681],{"class":618},[613,10645,10646,10648,10650,10652,10654,10657,10659,10661,10663,10665],{"class":615,"line":705},[613,10647,653],{"class":652},[613,10649,656],{"class":618},[613,10651,3975],{"class":659},[613,10653,663],{"class":618},[613,10655,10656],{"class":659}," watch",[613,10658,669],{"class":618},[613,10660,672],{"class":652},[613,10662,675],{"class":618},[613,10664,609],{"class":639},[613,10666,681],{"class":618},[613,10668,10669],{"class":615,"line":715},[613,10670,718],{"emptyLinePlaceholder":570},[613,10672,10673,10675,10678,10680,10682],{"class":615,"line":721},[613,10674,2463],{"class":626},[613,10676,10677],{"class":659}," torusRef ",[613,10679,633],{"class":618},[613,10681,3975],{"class":2482},[613,10683,6745],{"class":659},[613,10685,10686,10688,10691,10693,10695],{"class":615,"line":731},[613,10687,2463],{"class":626},[613,10689,10690],{"class":659}," instancesRef ",[613,10692,633],{"class":618},[613,10694,3975],{"class":2482},[613,10696,6745],{"class":659},[613,10698,10699],{"class":615,"line":754},[613,10700,718],{"emptyLinePlaceholder":570},[613,10702,10703,10706,10709,10711,10713,10715,10717,10719],{"class":615,"line":766},[613,10704,10705],{"class":2482},"watch",[613,10707,10708],{"class":659},"(torusRef",[613,10710,663],{"class":618},[613,10712,3143],{"class":618},[613,10714,3754],{"class":7049},[613,10716,3409],{"class":618},[613,10718,3746],{"class":626},[613,10720,1184],{"class":618},[613,10722,10724,10727,10729,10731,10733,10736,10738,10741,10743,10745,10747,10749,10751,10753],{"class":10723,"line":776},[615,649],[613,10725,10726],{"class":2482}," useSurfaceSampler",[613,10728,2485],{"class":622},[613,10730,3754],{"class":659},[613,10732,663],{"class":618},[613,10734,10735],{"class":799}," 50",[613,10737,663],{"class":618},[613,10739,10740],{"class":659}," instancesRef",[613,10742,1126],{"class":618},[613,10744,3754],{"class":659},[613,10746,663],{"class":618},[613,10748,675],{"class":618},[613,10750,7772],{"class":639},[613,10752,2488],{"class":618},[613,10754,2496],{"class":622},[613,10756,10757,10759],{"class":615,"line":781},[613,10758,2476],{"class":618},[613,10760,2496],{"class":659},[613,10762,10763,10765,10767],{"class":615,"line":807},[613,10764,708],{"class":618},[613,10766,623],{"class":622},[613,10768,645],{"class":618},[613,10770,10771],{"class":615,"line":607},[613,10772,718],{"emptyLinePlaceholder":570},[613,10774,10775,10777,10779],{"class":615,"line":830},[613,10776,619],{"class":618},[613,10778,726],{"class":622},[613,10780,645],{"class":618},[613,10782,10783,10785,10787,10789,10791,10793,10795,10797],{"class":615,"line":841},[613,10784,734],{"class":618},[613,10786,737],{"class":622},[613,10788,740],{"class":626},[613,10790,633],{"class":618},[613,10792,636],{"class":618},[613,10794,10263],{"class":639},[613,10796,636],{"class":618},[613,10798,645],{"class":618},[613,10800,10801,10803,10805,10807,10809,10811,10813,10815,10817,10819,10821,10823,10825,10827,10829],{"class":615,"line":852},[613,10802,757],{"class":618},[613,10804,760],{"class":622},[613,10806,789],{"class":618},[613,10808,1467],{"class":626},[613,10810,633],{"class":618},[613,10812,636],{"class":618},[613,10814,1474],{"class":618},[613,10816,945],{"class":799},[613,10818,1479],{"class":618},[613,10820,1521],{"class":799},[613,10822,1479],{"class":618},[613,10824,7668],{"class":799},[613,10826,1489],{"class":618},[613,10828,636],{"class":618},[613,10830,763],{"class":618},[613,10832,10833,10835,10837],{"class":615,"line":862},[613,10834,757],{"class":618},[613,10836,771],{"class":622},[613,10838,763],{"class":618},[613,10840,10841],{"class":615,"line":608},[613,10842,718],{"emptyLinePlaceholder":570},[613,10844,10845,10847,10849,10851,10853,10855,10858,10860],{"class":615,"line":882},[613,10846,757],{"class":618},[613,10848,836],{"class":622},[613,10850,3975],{"class":626},[613,10852,633],{"class":618},[613,10854,636],{"class":618},[613,10856,10857],{"class":639},"torusRef",[613,10859,636],{"class":618},[613,10861,645],{"class":618},[613,10863,10864,10866,10868],{"class":615,"line":892},[613,10865,833],{"class":618},[613,10867,10350],{"class":622},[613,10869,763],{"class":618},[613,10871,10872,10874,10876],{"class":615,"line":2671},[613,10873,875],{"class":618},[613,10875,836],{"class":622},[613,10877,645],{"class":618},[613,10879,10880],{"class":615,"line":2680},[613,10881,718],{"emptyLinePlaceholder":570},[613,10883,10884,10886],{"class":615,"line":2714},[613,10885,757],{"class":618},[613,10887,10888],{"class":622},"TresInstancedMesh\n",[613,10890,10891,10894,10896,10898,10901],{"class":615,"line":2723},[613,10892,10893],{"class":626}," ref",[613,10895,633],{"class":618},[613,10897,636],{"class":618},[613,10899,10900],{"class":639},"instancesRef",[613,10902,3200],{"class":618},[613,10904,10905,10908,10910,10912,10914,10916,10919,10921],{"class":615,"line":2732},[613,10906,10907],{"class":618}," :",[613,10909,1997],{"class":626},[613,10911,633],{"class":618},[613,10913,636],{"class":618},[613,10915,10385],{"class":618},[613,10917,10918],{"class":799},"1_000",[613,10920,1489],{"class":618},[613,10922,3200],{"class":618},[613,10924,10925],{"class":615,"line":2741},[613,10926,10927],{"class":618}," >\n",[613,10929,10930,10932,10934,10936,10938,10940,10942,10944,10946,10948,10951,10953,10955,10957,10959],{"class":615,"line":2763},[613,10931,833],{"class":618},[613,10933,4083],{"class":622},[613,10935,789],{"class":618},[613,10937,1997],{"class":626},[613,10939,633],{"class":618},[613,10941,636],{"class":618},[613,10943,1474],{"class":618},[613,10945,2211],{"class":799},[613,10947,1479],{"class":618},[613,10949,10950],{"class":799},"32",[613,10952,1479],{"class":618},[613,10954,10950],{"class":799},[613,10956,1489],{"class":618},[613,10958,636],{"class":618},[613,10960,763],{"class":618},[613,10962,10963,10965,10967],{"class":615,"line":2814},[613,10964,833],{"class":618},[613,10966,857],{"class":622},[613,10968,763],{"class":618},[613,10970,10971,10973,10975],{"class":615,"line":2823},[613,10972,875],{"class":618},[613,10974,10374],{"class":622},[613,10976,645],{"class":618},[613,10978,10979],{"class":615,"line":2832},[613,10980,718],{"emptyLinePlaceholder":570},[613,10982,10983,10985,10987,10989,10991,10993,10995,10997,10999,11001,11003,11005,11007],{"class":615,"line":4034},[613,10984,757],{"class":618},[613,10986,8313],{"class":622},[613,10988,789],{"class":618},[613,10990,1997],{"class":626},[613,10992,633],{"class":618},[613,10994,636],{"class":618},[613,10996,1474],{"class":618},[613,10998,1486],{"class":799},[613,11000,1479],{"class":618},[613,11002,1486],{"class":799},[613,11004,1489],{"class":618},[613,11006,636],{"class":618},[613,11008,763],{"class":618},[613,11010,11011,11013,11015],{"class":615,"line":4078},[613,11012,885],{"class":618},[613,11014,737],{"class":622},[613,11016,645],{"class":618},[613,11018,11019,11021,11023],{"class":615,"line":4105},[613,11020,708],{"class":618},[613,11022,726],{"class":622},[613,11024,645],{"class":618},[1307,11026,11027],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":552,"searchDepth":553,"depth":554,"links":11029},[11030,11031,11032],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},{"id":10567,"depth":554,"text":10568},"Distribute instances on mesh surfaces using MeshSurfaceSampler.",{},{"title":73,"description":11033},"tp0RMAouxWdIwvGbhPWEaPk4Au2TU5HY1qCtuO9XCUA",{"id":11038,"title":77,"body":11039,"description":11384,"extension":567,"links":568,"meta":11385,"navigation":570,"path":78,"seo":11386,"stem":79,"__hash__":11387},"docs/2.api/1.abstractions/screen-sizer.md",{"type":477,"value":11040,"toc":11380},[11041,11046,11055,11058,11060,11370,11372,11378],[2343,11042,11043],{},[11044,11045],"abstractions-screen-sizer",{},[590,11047,1330,11048,11051,11052,11054],{},[594,11049,11050],{},"\u003CTresObject3D />"," wrapper that scales to \"screen space\". By default ",[594,11053,1901],{}," THREE world unit will be translated to 1 screen pixel.",[590,11056,11057],{},"E.g. a BoxGeometry with a height, width, and depth of 100 each, will be scaled to 100 screen pixels in each dimension.",[480,11059,15],{"id":600},[602,11061,11064],{"className":604,"code":11062,"highlights":11063,"language":609,"meta":552,"style":552},"\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",[684,776,841],[594,11065,11066,11086,11104,11128,11136,11140,11148,11167,11199,11207,11216,11224,11257,11265,11273,11282,11302,11310,11318,11326,11354,11362],{"__ignoreMap":552},[613,11067,11068,11070,11072,11074,11076,11078,11080,11082,11084],{"class":615,"line":553},[613,11069,619],{"class":618},[613,11071,623],{"class":622},[613,11073,627],{"class":626},[613,11075,630],{"class":626},[613,11077,633],{"class":618},[613,11079,636],{"class":618},[613,11081,640],{"class":639},[613,11083,636],{"class":618},[613,11085,645],{"class":618},[613,11087,11088,11090,11092,11094,11096,11098,11100,11102],{"class":615,"line":554},[613,11089,653],{"class":652},[613,11091,656],{"class":618},[613,11093,691],{"class":659},[613,11095,669],{"class":618},[613,11097,672],{"class":652},[613,11099,675],{"class":618},[613,11101,700],{"class":639},[613,11103,681],{"class":618},[613,11105,11107,11109,11111,11113,11115,11118,11120,11122,11124,11126],{"class":11106,"line":684},[615,649],[613,11108,653],{"class":652},[613,11110,656],{"class":618},[613,11112,666],{"class":659},[613,11114,663],{"class":618},[613,11116,11117],{"class":659}," ScreenSizer",[613,11119,669],{"class":618},[613,11121,672],{"class":652},[613,11123,675],{"class":618},[613,11125,678],{"class":639},[613,11127,681],{"class":618},[613,11129,11130,11132,11134],{"class":615,"line":705},[613,11131,708],{"class":618},[613,11133,623],{"class":622},[613,11135,645],{"class":618},[613,11137,11138],{"class":615,"line":715},[613,11139,718],{"emptyLinePlaceholder":570},[613,11141,11142,11144,11146],{"class":615,"line":721},[613,11143,619],{"class":618},[613,11145,726],{"class":622},[613,11147,645],{"class":618},[613,11149,11150,11152,11154,11156,11158,11160,11163,11165],{"class":615,"line":731},[613,11151,734],{"class":618},[613,11153,737],{"class":622},[613,11155,740],{"class":626},[613,11157,633],{"class":618},[613,11159,636],{"class":618},[613,11161,11162],{"class":639},"#3f3f3f",[613,11164,636],{"class":618},[613,11166,645],{"class":618},[613,11168,11169,11171,11173,11175,11177,11179,11181,11183,11185,11187,11189,11191,11193,11195,11197],{"class":615,"line":754},[613,11170,757],{"class":618},[613,11172,760],{"class":622},[613,11174,789],{"class":618},[613,11176,1467],{"class":626},[613,11178,633],{"class":618},[613,11180,636],{"class":618},[613,11182,1474],{"class":618},[613,11184,1486],{"class":799},[613,11186,1479],{"class":618},[613,11188,1486],{"class":799},[613,11190,1479],{"class":618},[613,11192,1486],{"class":799},[613,11194,1489],{"class":618},[613,11196,636],{"class":618},[613,11198,763],{"class":618},[613,11200,11201,11203,11205],{"class":615,"line":766},[613,11202,757],{"class":618},[613,11204,771],{"class":622},[613,11206,763],{"class":618},[613,11208,11210,11212,11214],{"class":11209,"line":776},[615,649],[613,11211,757],{"class":618},[613,11213,77],{"class":622},[613,11215,645],{"class":618},[613,11217,11218,11220,11222],{"class":615,"line":781},[613,11219,833],{"class":618},[613,11221,836],{"class":622},[613,11223,645],{"class":618},[613,11225,11226,11228,11230,11232,11234,11236,11238,11240,11243,11245,11247,11249,11251,11253,11255],{"class":615,"line":807},[613,11227,844],{"class":618},[613,11229,847],{"class":622},[613,11231,789],{"class":618},[613,11233,1997],{"class":626},[613,11235,633],{"class":618},[613,11237,636],{"class":618},[613,11239,1474],{"class":618},[613,11241,11242],{"class":799},"100",[613,11244,1479],{"class":618},[613,11246,11242],{"class":799},[613,11248,1479],{"class":618},[613,11250,11242],{"class":799},[613,11252,1489],{"class":618},[613,11254,636],{"class":618},[613,11256,763],{"class":618},[613,11258,11259,11261,11263],{"class":615,"line":607},[613,11260,844],{"class":618},[613,11262,857],{"class":622},[613,11264,763],{"class":618},[613,11266,11267,11269,11271],{"class":615,"line":830},[613,11268,865],{"class":618},[613,11270,836],{"class":622},[613,11272,645],{"class":618},[613,11274,11276,11278,11280],{"class":11275,"line":841},[615,649],[613,11277,875],{"class":618},[613,11279,77],{"class":622},[613,11281,645],{"class":618},[613,11283,11284,11286,11288,11290,11292,11294,11296,11298,11300],{"class":615,"line":852},[613,11285,757],{"class":618},[613,11287,836],{"class":622},[613,11289,789],{"class":618},[613,11291,9861],{"class":626},[613,11293,633],{"class":618},[613,11295,636],{"class":618},[613,11297,7668],{"class":799},[613,11299,636],{"class":618},[613,11301,645],{"class":618},[613,11303,11304,11306,11308],{"class":615,"line":862},[613,11305,833],{"class":618},[613,11307,847],{"class":622},[613,11309,763],{"class":618},[613,11311,11312,11314,11316],{"class":615,"line":608},[613,11313,833],{"class":618},[613,11315,857],{"class":622},[613,11317,763],{"class":618},[613,11319,11320,11322,11324],{"class":615,"line":882},[613,11321,875],{"class":618},[613,11323,836],{"class":622},[613,11325,645],{"class":618},[613,11327,11328,11330,11332,11334,11336,11338,11340,11342,11344,11346,11348,11350,11352],{"class":615,"line":892},[613,11329,757],{"class":618},[613,11331,8313],{"class":622},[613,11333,789],{"class":618},[613,11335,1997],{"class":626},[613,11337,633],{"class":618},[613,11339,636],{"class":618},[613,11341,1474],{"class":618},[613,11343,1486],{"class":799},[613,11345,1479],{"class":618},[613,11347,1486],{"class":799},[613,11349,1489],{"class":618},[613,11351,636],{"class":618},[613,11353,763],{"class":618},[613,11355,11356,11358,11360],{"class":615,"line":2671},[613,11357,885],{"class":618},[613,11359,737],{"class":622},[613,11361,645],{"class":618},[613,11363,11364,11366,11368],{"class":615,"line":2680},[613,11365,708],{"class":618},[613,11367,726],{"class":622},[613,11369,645],{"class":618},[480,11371,902],{"id":901},[590,11373,11374,11375,1126],{},"Inherits all props from ",[594,11376,11377],{},"THREE.Object3D",[1307,11379,1656],{},{"title":552,"searchDepth":553,"depth":554,"links":11381},[11382,11383],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},"Scale objects to screen space where 1 unit equals 1 pixel.",{},{"title":77,"description":11384},"kz3721y8yAocwgiv4rVn-y48A-pFvSXFLwhVmj14V5k",{"id":11389,"title":81,"body":11390,"description":11772,"extension":567,"links":568,"meta":11773,"navigation":570,"path":82,"seo":11774,"stem":83,"__hash__":11775},"docs/2.api/1.abstractions/screen-space.md",{"type":477,"value":11391,"toc":11768},[11392,11397,11410,11432,11434,11672,11674,11766],[584,11393,11394],{},[11395,11396],"abstractions-screen-space",{},[590,11398,11399,11402,11403,11406,11407,1126],{},[594,11400,11401],{},"\u003CScreenSpace />"," wraps its children in a ",[594,11404,11405],{},"\u003CTresGroup />"," and positions them in front of the active camera at ",[594,11408,11409],{},":depth",[590,11411,11412,11413,1479,11415,1479,11417,1479,11419,11421,11422,11425,11426,7844,11429,1126],{},"Additionally, the ",[594,11414,935],{},[594,11416,958],{},[594,11418,977],{},[594,11420,996],{}," props can be used to position them similarly to CSS ",[594,11423,11424],{},"position: absolute"," property when using a ",[594,11427,11428],{},"PerspectiveCamera",[594,11430,11431],{},"OrtographicCamera",[480,11433,15],{"id":600},[602,11435,11438],{"className":604,"code":11436,"highlights":11437,"language":609,"meta":552,"style":552},"\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",[554,781,852],[594,11439,11440,11460,11484,11502,11510,11514,11522,11541,11549,11557,11561,11583,11591,11599,11607,11615,11624,11628,11656,11664],{"__ignoreMap":552},[613,11441,11442,11444,11446,11448,11450,11452,11454,11456,11458],{"class":615,"line":553},[613,11443,619],{"class":618},[613,11445,623],{"class":622},[613,11447,627],{"class":626},[613,11449,630],{"class":626},[613,11451,633],{"class":618},[613,11453,636],{"class":618},[613,11455,640],{"class":639},[613,11457,636],{"class":618},[613,11459,645],{"class":618},[613,11461,11463,11465,11467,11469,11471,11474,11476,11478,11480,11482],{"class":11462,"line":554},[615,649],[613,11464,653],{"class":652},[613,11466,656],{"class":618},[613,11468,666],{"class":659},[613,11470,663],{"class":618},[613,11472,11473],{"class":659}," ScreenSpace",[613,11475,669],{"class":618},[613,11477,672],{"class":652},[613,11479,675],{"class":618},[613,11481,678],{"class":639},[613,11483,681],{"class":618},[613,11485,11486,11488,11490,11492,11494,11496,11498,11500],{"class":615,"line":684},[613,11487,653],{"class":652},[613,11489,656],{"class":618},[613,11491,691],{"class":659},[613,11493,669],{"class":618},[613,11495,672],{"class":652},[613,11497,675],{"class":618},[613,11499,700],{"class":639},[613,11501,681],{"class":618},[613,11503,11504,11506,11508],{"class":615,"line":705},[613,11505,708],{"class":618},[613,11507,623],{"class":622},[613,11509,645],{"class":618},[613,11511,11512],{"class":615,"line":715},[613,11513,718],{"emptyLinePlaceholder":570},[613,11515,11516,11518,11520],{"class":615,"line":721},[613,11517,619],{"class":618},[613,11519,726],{"class":622},[613,11521,645],{"class":618},[613,11523,11524,11526,11528,11530,11532,11534,11537,11539],{"class":615,"line":731},[613,11525,734],{"class":618},[613,11527,737],{"class":622},[613,11529,740],{"class":626},[613,11531,633],{"class":618},[613,11533,636],{"class":618},[613,11535,11536],{"class":639},"#333",[613,11538,636],{"class":618},[613,11540,645],{"class":618},[613,11542,11543,11545,11547],{"class":615,"line":754},[613,11544,757],{"class":618},[613,11546,760],{"class":622},[613,11548,763],{"class":618},[613,11550,11551,11553,11555],{"class":615,"line":766},[613,11552,757],{"class":618},[613,11554,771],{"class":622},[613,11556,763],{"class":618},[613,11558,11559],{"class":615,"line":776},[613,11560,718],{"emptyLinePlaceholder":570},[613,11562,11564,11566,11568,11570,11573,11575,11577,11579,11581],{"class":11563,"line":781},[615,649],[613,11565,757],{"class":618},[613,11567,81],{"class":622},[613,11569,789],{"class":618},[613,11571,11572],{"class":626},"depth",[613,11574,633],{"class":618},[613,11576,636],{"class":618},[613,11578,7668],{"class":799},[613,11580,636],{"class":618},[613,11582,645],{"class":618},[613,11584,11585,11587,11589],{"class":615,"line":807},[613,11586,833],{"class":618},[613,11588,836],{"class":622},[613,11590,645],{"class":618},[613,11592,11593,11595,11597],{"class":615,"line":607},[613,11594,844],{"class":618},[613,11596,10350],{"class":622},[613,11598,763],{"class":618},[613,11600,11601,11603,11605],{"class":615,"line":830},[613,11602,844],{"class":618},[613,11604,857],{"class":622},[613,11606,763],{"class":618},[613,11608,11609,11611,11613],{"class":615,"line":841},[613,11610,865],{"class":618},[613,11612,836],{"class":622},[613,11614,645],{"class":618},[613,11616,11618,11620,11622],{"class":11617,"line":852},[615,649],[613,11619,875],{"class":618},[613,11621,81],{"class":622},[613,11623,645],{"class":618},[613,11625,11626],{"class":615,"line":862},[613,11627,718],{"emptyLinePlaceholder":570},[613,11629,11630,11632,11634,11636,11638,11640,11642,11644,11646,11648,11650,11652,11654],{"class":615,"line":608},[613,11631,757],{"class":618},[613,11633,8313],{"class":622},[613,11635,789],{"class":618},[613,11637,1997],{"class":626},[613,11639,633],{"class":618},[613,11641,636],{"class":618},[613,11643,1474],{"class":618},[613,11645,1486],{"class":799},[613,11647,1479],{"class":618},[613,11649,1486],{"class":799},[613,11651,1489],{"class":618},[613,11653,636],{"class":618},[613,11655,763],{"class":618},[613,11657,11658,11660,11662],{"class":615,"line":882},[613,11659,885],{"class":618},[613,11661,737],{"class":622},[613,11663,645],{"class":618},[613,11665,11666,11668,11670],{"class":615,"line":892},[613,11667,708],{"class":618},[613,11669,726],{"class":622},[613,11671,645],{"class":618},[480,11673,902],{"id":901},[907,11675,11676,11686],{},[910,11677,11678],{},[913,11679,11680,11682,11684],{},[916,11681,918],{"align":977},[916,11683,921],{"align":977},[916,11685,924],{},[926,11687,11688,11702,11721,11735,11752],{},[913,11689,11690,11694,11697],{},[931,11691,11692],{"align":977},[594,11693,11572],{},[931,11695,11696],{"align":977},"Distance from the camera",[931,11698,11699],{},[594,11700,11701],{},"-1",[913,11703,11704,11708,11716],{},[931,11705,11706],{"align":977},[594,11707,935],{},[931,11709,11710,11711,11713,11714],{"align":977},"Similar to CSS ",[594,11712,935],{}," property. Cannot be used with ",[594,11715,958],{},[931,11717,11718,11720],{},[594,11719,1521],{}," (vertical center of the screen)",[913,11722,11723,11727,11733],{},[931,11724,11725],{"align":977},[594,11726,958],{},[931,11728,11710,11729,11713,11731],{"align":977},[594,11730,958],{},[594,11732,935],{},[931,11734],{},[913,11736,11737,11741,11747],{},[931,11738,11739],{"align":977},[594,11740,977],{},[931,11742,11710,11743,11713,11745],{"align":977},[594,11744,977],{},[594,11746,996],{},[931,11748,11749,11751],{},[594,11750,1521],{}," (horizontal center of the screen)",[913,11753,11754,11758,11764],{},[931,11755,11756],{"align":977},[594,11757,996],{},[931,11759,11710,11760,11713,11762],{"align":977},[594,11761,996],{},[594,11763,977],{},[931,11765],{},[1307,11767,1656],{},{"title":552,"searchDepth":553,"depth":554,"links":11769},[11770,11771],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},"Position objects in front of the camera with CSS-like positioning.",{},{"title":81,"description":11772},"kqBTtDRTjTEQO1CtIqpPWtj4cpsi2JzyDHE4eOsdRvU",[11777,13064,13447,13778,14510,14868],{"id":11778,"title":91,"body":11779,"description":13060,"extension":567,"links":568,"meta":13061,"navigation":570,"path":92,"seo":13062,"stem":93,"__hash__":13063},"docs/2.api/2.controls/camera-controls.md",{"type":477,"value":11780,"toc":13051},[11781,11786,11797,11805,11807,12029,12034,12036,12039,12489,12492,12521,12684,12687,12815,12824,12827,12950,12954,13009,13048],[584,11782,11783],{},[11784,11785],"controls-camera-controls",{},[590,11787,11788,11793,11794,11796],{},[1120,11789,11792],{"href":11790,"rel":11791},"https://github.com/yomotsu/camera-controls",[1124],"CameraControls"," is a camera controller similar to ",[1120,11795,771],{"href":104}," yet supports smooth transitions and more features.",[590,11798,11799,11800,1126],{},"However, it is thirty party library for ThreeJS. So to use it you would need to install and import using ",[1120,11801,11804],{"href":11802,"rel":11803},"https://www.npmjs.com/package/camera-controls",[1124],"npm",[480,11806,15],{"id":600},[602,11808,11811],{"className":604,"code":11809,"highlights":11810,"language":609,"meta":552,"style":552},"\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",[731],[594,11812,11813,11823,11842,11850,11858,11876,11908,11917,11937,11957,11965,11973,12005,12013,12021],{"__ignoreMap":552},[613,11814,11815,11817,11819,11821],{"class":615,"line":553},[613,11816,619],{"class":618},[613,11818,623],{"class":622},[613,11820,627],{"class":626},[613,11822,645],{"class":618},[613,11824,11825,11827,11829,11832,11834,11836,11838,11840],{"class":615,"line":554},[613,11826,653],{"class":652},[613,11828,656],{"class":618},[613,11830,11831],{"class":659}," CameraControls",[613,11833,669],{"class":618},[613,11835,672],{"class":652},[613,11837,8563],{"class":618},[613,11839,678],{"class":639},[613,11841,3200],{"class":618},[613,11843,11844,11846,11848],{"class":615,"line":684},[613,11845,708],{"class":618},[613,11847,623],{"class":622},[613,11849,645],{"class":618},[613,11851,11852,11854,11856],{"class":615,"line":705},[613,11853,619],{"class":618},[613,11855,726],{"class":622},[613,11857,645],{"class":618},[613,11859,11860,11862,11864,11866,11868,11870,11872,11874],{"class":615,"line":715},[613,11861,734],{"class":618},[613,11863,737],{"class":622},[613,11865,740],{"class":626},[613,11867,633],{"class":618},[613,11869,636],{"class":618},[613,11871,10263],{"class":639},[613,11873,636],{"class":618},[613,11875,645],{"class":618},[613,11877,11878,11880,11882,11884,11886,11888,11890,11892,11894,11896,11898,11900,11902,11904,11906],{"class":615,"line":721},[613,11879,757],{"class":618},[613,11881,760],{"class":622},[613,11883,789],{"class":618},[613,11885,1467],{"class":626},[613,11887,633],{"class":618},[613,11889,636],{"class":618},[613,11891,1474],{"class":618},[613,11893,2705],{"class":799},[613,11895,1479],{"class":618},[613,11897,2705],{"class":799},[613,11899,1479],{"class":618},[613,11901,2705],{"class":799},[613,11903,1489],{"class":618},[613,11905,636],{"class":618},[613,11907,763],{"class":618},[613,11909,11911,11913,11915],{"class":11910,"line":731},[615,649],[613,11912,757],{"class":618},[613,11914,11792],{"class":622},[613,11916,763],{"class":618},[613,11918,11919,11921,11923,11925,11927,11929,11931,11933,11935],{"class":615,"line":754},[613,11920,757],{"class":618},[613,11922,197],{"class":622},[613,11924,789],{"class":618},[613,11926,792],{"class":626},[613,11928,633],{"class":618},[613,11930,636],{"class":618},[613,11932,800],{"class":799},[613,11934,636],{"class":618},[613,11936,645],{"class":618},[613,11938,11939,11941,11944,11946,11948,11950,11953,11955],{"class":615,"line":766},[613,11940,833],{"class":618},[613,11942,11943],{"class":622},"TresMeshToonMaterial",[613,11945,2749],{"class":626},[613,11947,633],{"class":618},[613,11949,636],{"class":618},[613,11951,11952],{"class":639},"orange",[613,11954,636],{"class":618},[613,11956,763],{"class":618},[613,11958,11959,11961,11963],{"class":615,"line":776},[613,11960,875],{"class":618},[613,11962,197],{"class":622},[613,11964,645],{"class":618},[613,11966,11967,11969,11971],{"class":615,"line":781},[613,11968,757],{"class":618},[613,11970,8758],{"class":622},[613,11972,763],{"class":618},[613,11974,11975,11977,11979,11981,11983,11985,11987,11989,11991,11993,11995,11997,11999,12001,12003],{"class":615,"line":807},[613,11976,757],{"class":618},[613,11978,8779],{"class":622},[613,11980,789],{"class":618},[613,11982,1467],{"class":626},[613,11984,633],{"class":618},[613,11986,636],{"class":618},[613,11988,1474],{"class":618},[613,11990,945],{"class":799},[613,11992,1479],{"class":618},[613,11994,800],{"class":799},[613,11996,1479],{"class":618},[613,11998,3876],{"class":799},[613,12000,1489],{"class":618},[613,12002,636],{"class":618},[613,12004,763],{"class":618},[613,12006,12007,12009,12011],{"class":615,"line":607},[613,12008,757],{"class":618},[613,12010,8313],{"class":622},[613,12012,763],{"class":618},[613,12014,12015,12017,12019],{"class":615,"line":830},[613,12016,885],{"class":618},[613,12018,737],{"class":622},[613,12020,645],{"class":618},[613,12022,12023,12025,12027],{"class":615,"line":841},[613,12024,708],{"class":618},[613,12026,726],{"class":622},[613,12028,645],{"class":618},[3268,12030,12031],{},[590,12032,12033],{},"Is really important that the Perspective camera is set first in the canvas. Otherwise might break.",[480,12035,902],{"id":901},[590,12037,12038],{},"Certainly! Here's the properties of the object in raw markdown table format:",[907,12040,12041,12051],{},[910,12042,12043],{},[913,12044,12045,12047,12049],{},[916,12046,918],{"align":977},[916,12048,921],{"align":977},[916,12050,924],{},[926,12052,12053,12067,12081,12095,12109,12123,12138,12153,12168,12183,12197,12213,12227,12241,12256,12271,12285,12300,12314,12328,12344,12359,12375,12389,12407,12422,12440,12454,12473],{},[913,12054,12055,12060,12063],{},[931,12056,12057],{"align":977},[1681,12058,12059],{},"makeDefault",[931,12061,12062],{"align":977},"Whether to make this the default controls.",[931,12064,12065],{},[594,12066,951],{},[913,12068,12069,12074,12077],{},[931,12070,12071],{"align":977},[1681,12072,12073],{},"camera",[931,12075,12076],{"align":977},"The camera to control.",[931,12078,12079],{},[594,12080,1159],{},[913,12082,12083,12088,12091],{},[931,12084,12085],{"align":977},[1681,12086,12087],{},"domElement",[931,12089,12090],{"align":977},"The DOM element to listen to.",[931,12092,12093],{},[594,12094,1159],{},[913,12096,12097,12102,12105],{},[931,12098,12099],{"align":977},[1681,12100,12101],{},"minPolarAngle",[931,12103,12104],{"align":977},"Minimum vertical angle in radians.",[931,12106,12107],{},[594,12108,945],{},[913,12110,12111,12116,12119],{},[931,12112,12113],{"align":977},[1681,12114,12115],{},"maxPolarAngle",[931,12117,12118],{"align":977},"Maximum vertical angle in radians.",[931,12120,12121],{},[594,12122,10136],{},[913,12124,12125,12130,12133],{},[931,12126,12127],{"align":977},[1681,12128,12129],{},"minAzimuthAngle",[931,12131,12132],{"align":977},"Minimum horizontal angle in radians.",[931,12134,12135],{},[594,12136,12137],{},"-Infinity",[913,12139,12140,12145,12148],{},[931,12141,12142],{"align":977},[1681,12143,12144],{},"maxAzimuthAngle",[931,12146,12147],{"align":977},"Maximum horizontal angle in radians.",[931,12149,12150],{},[594,12151,12152],{},"Infinity",[913,12154,12155,12160,12163],{},[931,12156,12157],{"align":977},[1681,12158,12159],{},"distance",[931,12161,12162],{"align":977},"Current distance.",[931,12164,12165],{},[594,12166,12167],{},"camera.position.z",[913,12169,12170,12175,12178],{},[931,12171,12172],{"align":977},[1681,12173,12174],{},"minDistance",[931,12176,12177],{"align":977},"Minimum distance for dolly. PerspectiveCamera only.",[931,12179,12180],{},[594,12181,12182],{},"Number.EPSILON",[913,12184,12185,12190,12193],{},[931,12186,12187],{"align":977},[1681,12188,12189],{},"maxDistance",[931,12191,12192],{"align":977},"Maximum distance for dolly. PerspectiveCamera only.",[931,12194,12195],{},[594,12196,12152],{},[913,12198,12199,12204,12209],{},[931,12200,12201],{"align":977},[1681,12202,12203],{},"infinityDolly",[931,12205,12206,12208],{"align":977},[594,12207,941],{}," to enable Infinity Dolly for wheel and pinch.",[931,12210,12211],{},[594,12212,951],{},[913,12214,12215,12220,12223],{},[931,12216,12217],{"align":977},[1681,12218,12219],{},"minZoom",[931,12221,12222],{"align":977},"Minimum camera zoom.",[931,12224,12225],{},[594,12226,1915],{},[913,12228,12229,12234,12237],{},[931,12230,12231],{"align":977},[1681,12232,12233],{},"maxZoom",[931,12235,12236],{"align":977},"Maximum camera zoom.",[931,12238,12239],{},[594,12240,12152],{},[913,12242,12243,12248,12251],{},[931,12244,12245],{"align":977},[1681,12246,12247],{},"smoothTime",[931,12249,12250],{"align":977},"Approximate time in seconds to reach the target. A smaller value will reach the target faster.",[931,12252,12253],{},[594,12254,12255],{},"0.25",[913,12257,12258,12263,12266],{},[931,12259,12260],{"align":977},[1681,12261,12262],{},"draggingSmoothTime",[931,12264,12265],{"align":977},"The smoothTime while dragging.",[931,12267,12268],{},[594,12269,12270],{},"0.125",[913,12272,12273,12278,12281],{},[931,12274,12275],{"align":977},[1681,12276,12277],{},"maxSpeed",[931,12279,12280],{"align":977},"Max transition speed in units per second.",[931,12282,12283],{},[594,12284,12152],{},[913,12286,12287,12292,12295],{},[931,12288,12289],{"align":977},[1681,12290,12291],{},"azimuthRotateSpeed",[931,12293,12294],{"align":977},"Speed of azimuth (horizontal) rotation.",[931,12296,12297],{},[594,12298,12299],{},"1.0",[913,12301,12302,12307,12310],{},[931,12303,12304],{"align":977},[1681,12305,12306],{},"polarRotateSpeed",[931,12308,12309],{"align":977},"Speed of polar (vertical) rotation.",[931,12311,12312],{},[594,12313,12299],{},[913,12315,12316,12321,12324],{},[931,12317,12318],{"align":977},[1681,12319,12320],{},"dollySpeed",[931,12322,12323],{"align":977},"Speed of mouse-wheel dollying.",[931,12325,12326],{},[594,12327,12299],{},[913,12329,12330,12335,12340],{},[931,12331,12332],{"align":977},[1681,12333,12334],{},"dollyDragInverted",[931,12336,12337,12339],{"align":977},[594,12338,941],{}," to invert direction when dollying or zooming via drag.",[931,12341,12342],{},[594,12343,951],{},[913,12345,12346,12351,12354],{},[931,12347,12348],{"align":977},[1681,12349,12350],{},"truckSpeed",[931,12352,12353],{"align":977},"Speed of drag for truck and pedestal.",[931,12355,12356],{},[594,12357,12358],{},"2.0",[913,12360,12361,12366,12371],{},[931,12362,12363],{"align":977},[1681,12364,12365],{},"dollyToCursor",[931,12367,12368,12370],{"align":977},[594,12369,941],{}," to enable Dolly-in to the mouse cursor coords.",[931,12372,12373],{},[594,12374,951],{},[913,12376,12377,12382,12385],{},[931,12378,12379],{"align":977},[1681,12380,12381],{},"dragToOffset",[931,12383,12384],{"align":977},"Whether to drag to offset.",[931,12386,12387],{},[594,12388,951],{},[913,12390,12391,12396,12403],{},[931,12392,12393],{"align":977},[1681,12394,12395],{},"verticalDragToForward",[931,12397,12398,12399,12402],{"align":977},"The same as ",[594,12400,12401],{},".screenSpacePanning"," in Three.js's OrbitControls.",[931,12404,12405],{},[594,12406,951],{},[913,12408,12409,12414,12417],{},[931,12410,12411],{"align":977},[1681,12412,12413],{},"boundaryFriction",[931,12415,12416],{"align":977},"Friction ratio of the boundary.",[931,12418,12419],{},[594,12420,12421],{},"0.0",[913,12423,12424,12429,12436],{},[931,12425,12426],{"align":977},[1681,12427,12428],{},"restThreshold",[931,12430,12431,12432,12435],{"align":977},"Controls how soon the ",[594,12433,12434],{},"rest"," event fires as the camera slows.",[931,12437,12438],{},[594,12439,1915],{},[913,12441,12442,12447,12450],{},[931,12443,12444],{"align":977},[1681,12445,12446],{},"colliderMeshes",[931,12448,12449],{"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,12451,12452],{},[594,12453,3648],{},[913,12455,12456,12461,12464],{},[931,12457,12458],{"align":977},[1681,12459,12460],{},"mouseButtons",[931,12462,12463],{"align":977},"Configuration of actions on mouse input.",[931,12465,1118,12466,12472],{},[1120,12467,12469],{"href":12468},"#user-input-config",[594,12470,12471],{},"User input config"," for details",[913,12474,12475,12480,12483],{},[931,12476,12477],{"align":977},[1681,12478,12479],{},"touches",[931,12481,12482],{"align":977},"Configuration of actions on touch.",[931,12484,1118,12485,12472],{},[1120,12486,12487],{"href":12468},[594,12488,12471],{},[480,12490,12471],{"id":12491},"user-input-config",[590,12493,12494,12495,12497,12498,12500,12501,12509,12510,12512,12513,12516,12517,12520],{},"You can easily override the default user input config by defining ",[594,12496,12460],{}," and/or ",[594,12499,12479],{}," props that correspond to ",[1120,12502,12505,12508],{"href":12503,"rel":12504},"https://github.com/yomotsu/camera-controls?#user-input-config",[1124],[594,12506,12507],{},"camera-controls"," settings",". For ease of use, we're re-exporting the ",[594,12511,11792],{}," class as ",[594,12514,12515],{},"BaseCameraControls"," which gives you access to the ",[594,12518,12519],{},"ACTION"," enum.",[602,12522,12524],{"className":604,"code":12523,"language":609,"meta":552,"style":552},"\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",[594,12525,12526,12546,12569,12577,12581,12589,12594,12601,12635,12667,12672,12676],{"__ignoreMap":552},[613,12527,12528,12530,12532,12534,12536,12538,12540,12542,12544],{"class":615,"line":553},[613,12529,619],{"class":618},[613,12531,623],{"class":622},[613,12533,630],{"class":626},[613,12535,633],{"class":618},[613,12537,636],{"class":618},[613,12539,640],{"class":639},[613,12541,636],{"class":618},[613,12543,627],{"class":626},[613,12545,645],{"class":618},[613,12547,12548,12550,12552,12555,12557,12559,12561,12563,12565,12567],{"class":615,"line":554},[613,12549,653],{"class":652},[613,12551,656],{"class":618},[613,12553,12554],{"class":659}," BaseCameraControls",[613,12556,663],{"class":618},[613,12558,11831],{"class":659},[613,12560,669],{"class":618},[613,12562,672],{"class":652},[613,12564,675],{"class":618},[613,12566,678],{"class":639},[613,12568,681],{"class":618},[613,12570,12571,12573,12575],{"class":615,"line":684},[613,12572,708],{"class":618},[613,12574,623],{"class":622},[613,12576,645],{"class":618},[613,12578,12579],{"class":615,"line":705},[613,12580,718],{"emptyLinePlaceholder":570},[613,12582,12583,12585,12587],{"class":615,"line":715},[613,12584,619],{"class":618},[613,12586,726],{"class":622},[613,12588,645],{"class":618},[613,12590,12591],{"class":615,"line":721},[613,12592,12593],{"class":659}," ...\n",[613,12595,12596,12598],{"class":615,"line":731},[613,12597,734],{"class":618},[613,12599,12600],{"class":622},"CameraControls\n",[613,12602,12603,12605,12608,12610,12612,12615,12617,12620,12622,12624,12626,12628,12631,12633],{"class":615,"line":754},[613,12604,5345],{"class":618},[613,12606,12607],{"class":626},"mouse-buttons",[613,12609,633],{"class":618},[613,12611,636],{"class":618},[613,12613,12614],{"class":618},"{ ",[613,12616,977],{"class":622},[613,12618,12619],{"class":618},": ",[613,12621,12515],{"class":659},[613,12623,1126],{"class":618},[613,12625,12519],{"class":659},[613,12627,1126],{"class":618},[613,12629,12630],{"class":659},"DOLLY",[613,12632,669],{"class":618},[613,12634,3200],{"class":618},[613,12636,12637,12639,12641,12643,12645,12647,12650,12652,12654,12656,12658,12660,12663,12665],{"class":615,"line":766},[613,12638,5345],{"class":618},[613,12640,12479],{"class":626},[613,12642,633],{"class":618},[613,12644,636],{"class":618},[613,12646,12614],{"class":618},[613,12648,12649],{"class":622},"one",[613,12651,12619],{"class":618},[613,12653,12515],{"class":659},[613,12655,1126],{"class":618},[613,12657,12519],{"class":659},[613,12659,1126],{"class":618},[613,12661,12662],{"class":659},"TOUCH_TRUCK",[613,12664,669],{"class":618},[613,12666,3200],{"class":618},[613,12668,12669],{"class":615,"line":776},[613,12670,12671],{"class":618}," />\n",[613,12673,12674],{"class":615,"line":781},[613,12675,12593],{"class":659},[613,12677,12678,12680,12682],{"class":615,"line":807},[613,12679,708],{"class":618},[613,12681,726],{"class":622},[613,12683,645],{"class":618},[4191,12685,12686],{"id":12607},"Mouse buttons",[907,12688,12689,12701],{},[910,12690,12691],{},[913,12692,12693,12696,12699],{},[916,12694,12695],{},"Button to assign",[916,12697,12698],{},"Options",[916,12700,924],{},[926,12702,12703,12734,12759,12789],{},[913,12704,12705,12710,12730],{},[931,12706,12707],{},[594,12708,12709],{},"mouseButtons.left",[931,12711,12712,12715,12716,12715,12719,12715,12722,12715,12724,12715,12727],{},[594,12713,12714],{},"ROTATE"," | ",[594,12717,12718],{},"TRUCK",[594,12720,12721],{},"OFFSET",[594,12723,12630],{},[594,12725,12726],{},"ZOOM",[594,12728,12729],{},"NONE",[931,12731,12732],{},[594,12733,12714],{},[913,12735,12736,12741,12755],{},[931,12737,12738],{},[594,12739,12740],{},"mouseButtons.right",[931,12742,12743,12715,12745,12715,12747,12715,12749,12715,12751,12715,12753],{},[594,12744,12714],{},[594,12746,12718],{},[594,12748,12721],{},[594,12750,12630],{},[594,12752,12726],{},[594,12754,12729],{},[931,12756,12757],{},[594,12758,12718],{},[913,12760,12761,12767,12781],{},[931,12762,12763,12766],{},[594,12764,12765],{},"mouseButtons.wheel"," ¹",[931,12768,12769,12715,12771,12715,12773,12715,12775,12715,12777,12715,12779],{},[594,12770,12714],{},[594,12772,12718],{},[594,12774,12721],{},[594,12776,12630],{},[594,12778,12726],{},[594,12780,12729],{},[931,12782,12783,12785,12786,12788],{},[594,12784,12630],{}," for Perspective camera, ",[594,12787,12726],{}," for Orthographic camera.",[913,12790,12791,12797,12811],{},[931,12792,12793,12796],{},[594,12794,12795],{},"mouseButtons.middle"," ²",[931,12798,12799,12715,12801,12715,12803,12715,12805,12715,12807,12715,12809],{},[594,12800,12714],{},[594,12802,12718],{},[594,12804,12721],{},[594,12806,12630],{},[594,12808,12726],{},[594,12810,12729],{},[931,12812,12813],{},[594,12814,12630],{},[12816,12817,12818,12821],"ol",{},[2264,12819,12820],{},"Mouse wheel event for scroll \"up/down\", on mac \"up/down/left/right\".",[2264,12822,12823],{},"Mouse wheel \"button\" click event.",[4191,12825,12826],{"id":12479},"Touches",[907,12828,12829,12840],{},[910,12830,12831],{},[913,12832,12833,12836,12838],{},[916,12834,12835],{},"Fingers to assign",[916,12837,12698],{},[916,12839,924],{},[926,12841,12842,12869,12917],{},[913,12843,12844,12849,12865],{},[931,12845,12846],{},[594,12847,12848],{},"touches.one",[931,12850,12851,12715,12854,12715,12856,12715,12859,12715,12861,12715,12863],{},[594,12852,12853],{},"TOUCH_ROTATE",[594,12855,12662],{},[594,12857,12858],{},"TOUCH_OFFSET",[594,12860,12630],{},[594,12862,12726],{},[594,12864,12729],{},[931,12866,12867],{},[594,12868,12853],{},[913,12870,12871,12876,12910],{},[931,12872,12873],{},[594,12874,12875],{},"touches.two",[931,12877,12878,12715,12881,12715,12884,12715,12887,12715,12890,12715,12893,12715,12896,12715,12899,12715,12902,12715,12904,12715,12906,12715,12908],{},[594,12879,12880],{},"TOUCH_DOLLY_TRUCK",[594,12882,12883],{},"TOUCH_DOLLY_OFFSET",[594,12885,12886],{},"TOUCH_DOLLY_ROTATE",[594,12888,12889],{},"TOUCH_ZOOM_TRUCK",[594,12891,12892],{},"TOUCH_ZOOM_OFFSET",[594,12894,12895],{},"TOUCH_ZOOM_ROTATE",[594,12897,12898],{},"TOUCH_DOLLY",[594,12900,12901],{},"TOUCH_ZOOM",[594,12903,12853],{},[594,12905,12662],{},[594,12907,12858],{},[594,12909,12729],{},[931,12911,12912,12785,12914,12916],{},[594,12913,12880],{},[594,12915,12889],{}," for Othographic camera.",[913,12918,12919,12924,12946],{},[931,12920,12921],{},[594,12922,12923],{},"touches.three",[931,12925,12926,12715,12928,12715,12930,12715,12932,12715,12934,12715,12936,12715,12938,12715,12940,12715,12942,12715,12944],{},[594,12927,12880],{},[594,12929,12883],{},[594,12931,12886],{},[594,12933,12889],{},[594,12935,12892],{},[594,12937,12895],{},[594,12939,12853],{},[594,12941,12662],{},[594,12943,12858],{},[594,12945,12729],{},[931,12947,12948],{},[594,12949,12662],{},[480,12951,12953],{"id":12952},"events","Events",[602,12955,12957],{"className":604,"code":12956,"language":609,"meta":552,"style":552},"\u003CCameraControls @change=\"onChange\" @start=\"onStart\" @end=\"onEnd\" />\n",[594,12958,12959],{"__ignoreMap":552},[613,12960,12961,12963,12965,12967,12970,12972,12974,12977,12979,12981,12984,12986,12988,12991,12993,12995,12998,13000,13002,13005,13007],{"class":615,"line":553},[613,12962,619],{"class":618},[613,12964,11792],{"class":622},[613,12966,4393],{"class":618},[613,12968,12969],{"class":626},"change",[613,12971,633],{"class":618},[613,12973,636],{"class":618},[613,12975,12976],{"class":659},"onChange",[613,12978,636],{"class":618},[613,12980,4393],{"class":618},[613,12982,12983],{"class":626},"start",[613,12985,633],{"class":618},[613,12987,636],{"class":618},[613,12989,12990],{"class":659},"onStart",[613,12992,636],{"class":618},[613,12994,4393],{"class":618},[613,12996,12997],{"class":626},"end",[613,12999,633],{"class":618},[613,13001,636],{"class":618},[613,13003,13004],{"class":659},"onEnd",[613,13006,636],{"class":618},[613,13008,763],{"class":618},[907,13010,13011,13019],{},[910,13012,13013],{},[913,13014,13015,13017],{},[916,13016,5969],{"align":977},[916,13018,921],{"align":977},[926,13020,13021,13030,13039],{},[913,13022,13023,13027],{},[931,13024,13025],{"align":977},[1681,13026,12983],{},[931,13028,13029],{"align":977},"Dispatched when the control starts to change.",[913,13031,13032,13036],{},[931,13033,13034],{"align":977},[1681,13035,12969],{},[931,13037,13038],{"align":977},"Dispatched when the control changes.",[913,13040,13041,13045],{},[931,13042,13043],{"align":977},[1681,13044,12997],{},[931,13046,13047],{"align":977},"Dispatched when the control ends to change.",[1307,13049,13050],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":552,"searchDepth":553,"depth":554,"links":13052},[13053,13054,13055,13059],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},{"id":12491,"depth":554,"text":12471,"children":13056},[13057,13058],{"id":12607,"depth":684,"text":12686},{"id":12479,"depth":684,"text":12826},{"id":12952,"depth":554,"text":12953},"Is similar to OrbitControls yet supports smooth transitions and more features.",{},{"title":91,"description":13060},"Er67NB_D9l-p90cx_F8Ueo3oYf_90DhOHx1q_8YgH3g",{"id":13065,"title":95,"body":13066,"description":13083,"extension":567,"links":568,"meta":13444,"navigation":570,"path":96,"seo":13445,"stem":97,"__hash__":13446},"docs/2.api/2.controls/keyboard-controls.md",{"type":477,"value":13067,"toc":13439},[13068,13073,13079,13087,13103,13105,13262,13266,13268,13347,13349,13400,13436],[584,13069,13070],{},[13071,13072],"controls-keyboard-controls",{},[590,13074,13075,13078],{},[594,13076,13077],{},"\u003CKeyboardControls />"," is a simple keyboard controller for the camera. The camera's movements are bound to:",[2261,13080,13081,13084],{},[2264,13082,13083],{},"WASD on QWERTY keyboards or equivalent keys on non-QWERTY keyboards",[2264,13085,13086],{},"Arrow keys",[2054,13088,13089],{},[590,13090,13091,13094,13095,13098,13099,1126],{},[594,13092,13093],{},"KeyboardControls"," uses ",[594,13096,13097],{},"PointerLockControls"," under the hood. You can use ",[1120,13100,13102],{"href":13101},"pointer-lock-controls#props","PointerLockControls props and events",[480,13104,15],{"id":600},[602,13106,13109],{"className":604,"code":13107,"highlights":13108,"language":609,"meta":552,"style":552},"\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",[684,776],[594,13110,13111,13131,13149,13173,13181,13185,13193,13201,13209,13229,13238,13246,13254],{"__ignoreMap":552},[613,13112,13113,13115,13117,13119,13121,13123,13125,13127,13129],{"class":615,"line":553},[613,13114,619],{"class":618},[613,13116,623],{"class":622},[613,13118,627],{"class":626},[613,13120,630],{"class":626},[613,13122,633],{"class":618},[613,13124,636],{"class":618},[613,13126,640],{"class":639},[613,13128,636],{"class":618},[613,13130,645],{"class":618},[613,13132,13133,13135,13137,13139,13141,13143,13145,13147],{"class":615,"line":554},[613,13134,653],{"class":652},[613,13136,656],{"class":618},[613,13138,691],{"class":659},[613,13140,669],{"class":618},[613,13142,672],{"class":652},[613,13144,675],{"class":618},[613,13146,700],{"class":639},[613,13148,681],{"class":618},[613,13150,13152,13154,13156,13159,13161,13163,13165,13167,13169,13171],{"class":13151,"line":684},[615,649],[613,13153,653],{"class":652},[613,13155,656],{"class":618},[613,13157,13158],{"class":659}," KeyboardControls",[613,13160,663],{"class":618},[613,13162,1377],{"class":659},[613,13164,669],{"class":618},[613,13166,672],{"class":652},[613,13168,675],{"class":618},[613,13170,678],{"class":639},[613,13172,681],{"class":618},[613,13174,13175,13177,13179],{"class":615,"line":705},[613,13176,708],{"class":618},[613,13178,623],{"class":622},[613,13180,645],{"class":618},[613,13182,13183],{"class":615,"line":715},[613,13184,718],{"emptyLinePlaceholder":570},[613,13186,13187,13189,13191],{"class":615,"line":721},[613,13188,619],{"class":618},[613,13190,726],{"class":622},[613,13192,645],{"class":618},[613,13194,13195,13197,13199],{"class":615,"line":731},[613,13196,734],{"class":618},[613,13198,737],{"class":622},[613,13200,645],{"class":618},[613,13202,13203,13205,13207],{"class":615,"line":754},[613,13204,757],{"class":618},[613,13206,760],{"class":622},[613,13208,763],{"class":618},[613,13210,13211,13213,13215,13217,13219,13221,13223,13225,13227],{"class":615,"line":766},[613,13212,757],{"class":618},[613,13214,197],{"class":622},[613,13216,789],{"class":618},[613,13218,1976],{"class":626},[613,13220,633],{"class":618},[613,13222,636],{"class":618},[613,13224,1521],{"class":799},[613,13226,636],{"class":618},[613,13228,763],{"class":618},[613,13230,13232,13234,13236],{"class":13231,"line":776},[615,649],[613,13233,757],{"class":618},[613,13235,13093],{"class":622},[613,13237,763],{"class":618},[613,13239,13240,13242,13244],{"class":615,"line":781},[613,13241,757],{"class":618},[613,13243,8313],{"class":622},[613,13245,763],{"class":618},[613,13247,13248,13250,13252],{"class":615,"line":807},[613,13249,885],{"class":618},[613,13251,737],{"class":622},[613,13253,645],{"class":618},[613,13255,13256,13258,13260],{"class":615,"line":607},[613,13257,708],{"class":618},[613,13259,726],{"class":622},[613,13261,645],{"class":618},[3268,13263,13264],{},[590,13265,12033],{},[480,13267,902],{"id":901},[907,13269,13270,13280],{},[910,13271,13272],{},[913,13273,13274,13276,13278],{},[916,13275,918],{"align":977},[916,13277,921],{"align":977},[916,13279,924],{},[926,13281,13282,13294,13309,13321,13333],{},[913,13283,13284,13289,13292],{},[931,13285,13286],{"align":977},[1681,13287,13288],{},"moveSpeed",[931,13290,13291],{"align":977},"Speed movement.",[931,13293,5939],{},[913,13295,13296,13300,13305],{},[931,13297,13298],{"align":977},[1681,13299,12059],{},[931,13301,938,13302,13304],{"align":977},[594,13303,941],{},", the controls will be set as the default controls for the scene.",[931,13306,13307],{},[594,13308,941],{},[913,13310,13311,13315,13317],{},[931,13312,13313],{"align":977},[1681,13314,12073],{},[931,13316,12076],{"align":977},[931,13318,13319],{},[594,13320,1159],{},[913,13322,13323,13327,13329],{},[931,13324,13325],{"align":977},[1681,13326,12087],{},[931,13328,12090],{"align":977},[931,13330,13331],{},[594,13332,1159],{},[913,13334,13335,13340,13343],{},[931,13336,13337],{"align":977},[1681,13338,13339],{},"selector",[931,13341,13342],{"align":977},"Accept an id element as string. If set, the new element will be used as the trigger",[931,13344,13345],{},[594,13346,1159],{},[480,13348,12953],{"id":12952},[602,13350,13352],{"className":604,"code":13351,"language":609,"meta":552,"style":552},"\u003CKeyboardControls @change=\"onChange\" @is-lock=\"(state) => isActive(state)\" />\n",[594,13353,13354],{"__ignoreMap":552},[613,13355,13356,13358,13360,13362,13364,13366,13368,13370,13372,13374,13377,13379,13381,13383,13386,13388,13390,13393,13396,13398],{"class":615,"line":553},[613,13357,619],{"class":618},[613,13359,13093],{"class":622},[613,13361,4393],{"class":618},[613,13363,12969],{"class":626},[613,13365,633],{"class":618},[613,13367,636],{"class":618},[613,13369,12976],{"class":659},[613,13371,636],{"class":618},[613,13373,4393],{"class":618},[613,13375,13376],{"class":626},"is-lock",[613,13378,633],{"class":618},[613,13380,636],{"class":618},[613,13382,2485],{"class":618},[613,13384,13385],{"class":7049},"state",[613,13387,3409],{"class":618},[613,13389,3746],{"class":626},[613,13391,13392],{"class":2482}," isActive",[613,13394,13395],{"class":659},"(state)",[613,13397,636],{"class":618},[613,13399,763],{"class":659},[907,13401,13402,13410],{},[910,13403,13404],{},[913,13405,13406,13408],{},[916,13407,5969],{"align":977},[916,13409,921],{"align":977},[926,13411,13412,13428],{},[913,13413,13414,13419],{},[931,13415,13416],{"align":977},[1681,13417,13418],{},"isLock",[931,13420,13421,13422,13424,13425,13427],{"align":977},"Return ",[594,13423,941],{}," if \"lock\", ",[594,13426,951],{}," if \"unlock\" events are triggered.",[913,13429,13430,13434],{},[931,13431,13432],{"align":977},[1681,13433,12969],{},[931,13435,13038],{"align":977},[1307,13437,13438],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":552,"searchDepth":553,"depth":554,"links":13440},[13441,13442,13443],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},{"id":12952,"depth":554,"text":12953},{},{"title":95,"description":13083},"Oix2-Nx3pvTy-NyphfuJ57zwsLs_Vfgz8LsTCMVbO8c",{"id":13448,"title":99,"body":13449,"description":13774,"extension":567,"links":568,"meta":13775,"navigation":570,"path":100,"seo":13776,"stem":101,"__hash__":13777},"docs/2.api/2.controls/map-controls.md",{"type":477,"value":13450,"toc":13770},[13451,13456,13464,13466,13686,13691,13693,13763,13768],[584,13452,13453],{},[13454,13455],"controls-map-controls",{},[590,13457,13458,13463],{},[1120,13459,13462],{"href":13460,"rel":13461},"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.",[480,13465,15],{"id":600},[602,13467,13470],{"className":604,"code":13468,"highlights":13469,"language":609,"meta":552,"style":552},"\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",[731],[594,13471,13472,13482,13501,13509,13517,13535,13567,13576,13596,13614,13622,13630,13662,13670,13678],{"__ignoreMap":552},[613,13473,13474,13476,13478,13480],{"class":615,"line":553},[613,13475,619],{"class":618},[613,13477,623],{"class":622},[613,13479,627],{"class":626},[613,13481,645],{"class":618},[613,13483,13484,13486,13488,13491,13493,13495,13497,13499],{"class":615,"line":554},[613,13485,653],{"class":652},[613,13487,656],{"class":618},[613,13489,13490],{"class":659}," MapControls",[613,13492,669],{"class":618},[613,13494,672],{"class":652},[613,13496,8563],{"class":618},[613,13498,678],{"class":639},[613,13500,3200],{"class":618},[613,13502,13503,13505,13507],{"class":615,"line":684},[613,13504,708],{"class":618},[613,13506,623],{"class":622},[613,13508,645],{"class":618},[613,13510,13511,13513,13515],{"class":615,"line":705},[613,13512,619],{"class":618},[613,13514,726],{"class":622},[613,13516,645],{"class":618},[613,13518,13519,13521,13523,13525,13527,13529,13531,13533],{"class":615,"line":715},[613,13520,734],{"class":618},[613,13522,737],{"class":622},[613,13524,740],{"class":626},[613,13526,633],{"class":618},[613,13528,636],{"class":618},[613,13530,10263],{"class":639},[613,13532,636],{"class":618},[613,13534,645],{"class":618},[613,13536,13537,13539,13541,13543,13545,13547,13549,13551,13553,13555,13557,13559,13561,13563,13565],{"class":615,"line":721},[613,13538,757],{"class":618},[613,13540,760],{"class":622},[613,13542,789],{"class":618},[613,13544,1467],{"class":626},[613,13546,633],{"class":618},[613,13548,636],{"class":618},[613,13550,1474],{"class":618},[613,13552,2705],{"class":799},[613,13554,1479],{"class":618},[613,13556,2705],{"class":799},[613,13558,1479],{"class":618},[613,13560,2705],{"class":799},[613,13562,1489],{"class":618},[613,13564,636],{"class":618},[613,13566,763],{"class":618},[613,13568,13570,13572,13574],{"class":13569,"line":731},[615,649],[613,13571,757],{"class":618},[613,13573,13462],{"class":622},[613,13575,763],{"class":618},[613,13577,13578,13580,13582,13584,13586,13588,13590,13592,13594],{"class":615,"line":754},[613,13579,757],{"class":618},[613,13581,197],{"class":622},[613,13583,789],{"class":618},[613,13585,792],{"class":626},[613,13587,633],{"class":618},[613,13589,636],{"class":618},[613,13591,800],{"class":799},[613,13593,636],{"class":618},[613,13595,645],{"class":618},[613,13597,13598,13600,13602,13604,13606,13608,13610,13612],{"class":615,"line":766},[613,13599,833],{"class":618},[613,13601,11943],{"class":622},[613,13603,2749],{"class":626},[613,13605,633],{"class":618},[613,13607,636],{"class":618},[613,13609,11952],{"class":639},[613,13611,636],{"class":618},[613,13613,763],{"class":618},[613,13615,13616,13618,13620],{"class":615,"line":776},[613,13617,875],{"class":618},[613,13619,197],{"class":622},[613,13621,645],{"class":618},[613,13623,13624,13626,13628],{"class":615,"line":781},[613,13625,757],{"class":618},[613,13627,8758],{"class":622},[613,13629,763],{"class":618},[613,13631,13632,13634,13636,13638,13640,13642,13644,13646,13648,13650,13652,13654,13656,13658,13660],{"class":615,"line":807},[613,13633,757],{"class":618},[613,13635,8779],{"class":622},[613,13637,789],{"class":618},[613,13639,1467],{"class":626},[613,13641,633],{"class":618},[613,13643,636],{"class":618},[613,13645,1474],{"class":618},[613,13647,945],{"class":799},[613,13649,1479],{"class":618},[613,13651,800],{"class":799},[613,13653,1479],{"class":618},[613,13655,3876],{"class":799},[613,13657,1489],{"class":618},[613,13659,636],{"class":618},[613,13661,763],{"class":618},[613,13663,13664,13666,13668],{"class":615,"line":607},[613,13665,757],{"class":618},[613,13667,8313],{"class":622},[613,13669,763],{"class":618},[613,13671,13672,13674,13676],{"class":615,"line":830},[613,13673,885],{"class":618},[613,13675,737],{"class":622},[613,13677,645],{"class":618},[613,13679,13680,13682,13684],{"class":615,"line":841},[613,13681,708],{"class":618},[613,13683,726],{"class":622},[613,13685,645],{"class":618},[3268,13687,13688],{},[590,13689,13690],{},"It is really important that the perspective camera is set first in the canvas. Otherwise the scene might break.",[480,13692,902],{"id":901},[907,13694,13695,13705],{},[910,13696,13697],{},[913,13698,13699,13701,13703],{},[916,13700,918],{"align":977},[916,13702,921],{"align":977},[916,13704,924],{},[926,13706,13707,13721,13733,13746],{},[913,13708,13709,13713,13717],{},[931,13710,13711],{"align":977},[1681,13712,12059],{},[931,13714,938,13715,13304],{"align":977},[594,13716,941],{},[931,13718,13719],{},[594,13720,951],{},[913,13722,13723,13727,13729],{},[931,13724,13725],{"align":977},[1681,13726,12073],{},[931,13728,12076],{"align":977},[931,13730,13731],{},[594,13732,1159],{},[913,13734,13735,13739,13742],{},[931,13736,13737],{"align":977},[1681,13738,12087],{},[931,13740,13741],{"align":977},"The dom element to listen to.",[931,13743,13744],{},[594,13745,1159],{},[913,13747,13748,13753,13759],{},[931,13749,13750],{"align":977},[1681,13751,13752],{},"screenSpacePanning",[931,13754,13755,13756,13758],{"align":977},"Defines how the camera's position is translated when panning. If ",[594,13757,941],{},", the camera pans in screen space. Otherwise, the camera pans in the plane orthogonal to the camera's up direction.",[931,13760,13761],{},[594,13762,951],{},[2054,13764,13765],{},[590,13766,13767],{},"All the props of the orbit controls component apply here too.",[1307,13769,13050],{},{"title":552,"searchDepth":553,"depth":554,"links":13771},[13772,13773],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},"similar to OrbitControls but for map views",{},{"title":99,"description":13774},"3Gr5ZfaS0tXm4RGuh0wLyX1tmIw4ZrdyL-nbg-P_RPU",{"id":13779,"title":103,"body":13780,"description":14506,"extension":567,"links":568,"meta":14507,"navigation":570,"path":104,"seo":14508,"stem":105,"__hash__":14509},"docs/2.api/2.controls/orbit-controls.md",{"type":477,"value":13781,"toc":14501},[13782,13787,13794,13796,14015,14019,14021,14412,14414,14463,14499],[584,13783,13784],{},[13785,13786],"controls-orbit-controls",{},[590,13788,13789,13793],{},[1120,13790,771],{"href":13791,"rel":13792},"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.",[480,13795,15],{"id":600},[602,13797,13800],{"className":604,"code":13798,"highlights":13799,"language":609,"meta":552,"style":552},"\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",[731],[594,13801,13802,13812,13830,13838,13846,13864,13896,13905,13925,13943,13951,13959,13991,13999,14007],{"__ignoreMap":552},[613,13803,13804,13806,13808,13810],{"class":615,"line":553},[613,13805,619],{"class":618},[613,13807,623],{"class":622},[613,13809,627],{"class":626},[613,13811,645],{"class":618},[613,13813,13814,13816,13818,13820,13822,13824,13826,13828],{"class":615,"line":554},[613,13815,653],{"class":652},[613,13817,656],{"class":618},[613,13819,666],{"class":659},[613,13821,669],{"class":618},[613,13823,672],{"class":652},[613,13825,8563],{"class":618},[613,13827,678],{"class":639},[613,13829,3200],{"class":618},[613,13831,13832,13834,13836],{"class":615,"line":684},[613,13833,708],{"class":618},[613,13835,623],{"class":622},[613,13837,645],{"class":618},[613,13839,13840,13842,13844],{"class":615,"line":705},[613,13841,619],{"class":618},[613,13843,726],{"class":622},[613,13845,645],{"class":618},[613,13847,13848,13850,13852,13854,13856,13858,13860,13862],{"class":615,"line":715},[613,13849,734],{"class":618},[613,13851,737],{"class":622},[613,13853,740],{"class":626},[613,13855,633],{"class":618},[613,13857,636],{"class":618},[613,13859,10263],{"class":639},[613,13861,636],{"class":618},[613,13863,645],{"class":618},[613,13865,13866,13868,13870,13872,13874,13876,13878,13880,13882,13884,13886,13888,13890,13892,13894],{"class":615,"line":721},[613,13867,757],{"class":618},[613,13869,760],{"class":622},[613,13871,789],{"class":618},[613,13873,1467],{"class":626},[613,13875,633],{"class":618},[613,13877,636],{"class":618},[613,13879,1474],{"class":618},[613,13881,2705],{"class":799},[613,13883,1479],{"class":618},[613,13885,2705],{"class":799},[613,13887,1479],{"class":618},[613,13889,2705],{"class":799},[613,13891,1489],{"class":618},[613,13893,636],{"class":618},[613,13895,763],{"class":618},[613,13897,13899,13901,13903],{"class":13898,"line":731},[615,649],[613,13900,757],{"class":618},[613,13902,771],{"class":622},[613,13904,763],{"class":618},[613,13906,13907,13909,13911,13913,13915,13917,13919,13921,13923],{"class":615,"line":754},[613,13908,757],{"class":618},[613,13910,197],{"class":622},[613,13912,789],{"class":618},[613,13914,792],{"class":626},[613,13916,633],{"class":618},[613,13918,636],{"class":618},[613,13920,800],{"class":799},[613,13922,636],{"class":618},[613,13924,645],{"class":618},[613,13926,13927,13929,13931,13933,13935,13937,13939,13941],{"class":615,"line":766},[613,13928,833],{"class":618},[613,13930,11943],{"class":622},[613,13932,2749],{"class":626},[613,13934,633],{"class":618},[613,13936,636],{"class":618},[613,13938,11952],{"class":639},[613,13940,636],{"class":618},[613,13942,763],{"class":618},[613,13944,13945,13947,13949],{"class":615,"line":776},[613,13946,875],{"class":618},[613,13948,197],{"class":622},[613,13950,645],{"class":618},[613,13952,13953,13955,13957],{"class":615,"line":781},[613,13954,757],{"class":618},[613,13956,8758],{"class":622},[613,13958,763],{"class":618},[613,13960,13961,13963,13965,13967,13969,13971,13973,13975,13977,13979,13981,13983,13985,13987,13989],{"class":615,"line":807},[613,13962,757],{"class":618},[613,13964,8779],{"class":622},[613,13966,789],{"class":618},[613,13968,1467],{"class":626},[613,13970,633],{"class":618},[613,13972,636],{"class":618},[613,13974,1474],{"class":618},[613,13976,945],{"class":799},[613,13978,1479],{"class":618},[613,13980,800],{"class":799},[613,13982,1479],{"class":618},[613,13984,3876],{"class":799},[613,13986,1489],{"class":618},[613,13988,636],{"class":618},[613,13990,763],{"class":618},[613,13992,13993,13995,13997],{"class":615,"line":607},[613,13994,757],{"class":618},[613,13996,8313],{"class":622},[613,13998,763],{"class":618},[613,14000,14001,14003,14005],{"class":615,"line":830},[613,14002,885],{"class":618},[613,14004,737],{"class":622},[613,14006,645],{"class":618},[613,14008,14009,14011,14013],{"class":615,"line":841},[613,14010,708],{"class":618},[613,14012,726],{"class":622},[613,14014,645],{"class":618},[3268,14016,14017],{},[590,14018,12033],{},[480,14020,902],{"id":901},[907,14022,14023,14033],{},[910,14024,14025],{},[913,14026,14027,14029,14031],{},[916,14028,918],{"align":977},[916,14030,921],{"align":977},[916,14032,924],{},[926,14034,14035,14049,14061,14073,14087,14103,14121,14135,14153,14167,14182,14197,14218,14236,14249,14262,14275,14288,14301,14314,14328,14342,14356,14370,14384,14398],{},[913,14036,14037,14041,14045],{},[931,14038,14039],{"align":977},[1681,14040,12059],{},[931,14042,938,14043,13304],{"align":977},[594,14044,941],{},[931,14046,14047],{},[594,14048,951],{},[913,14050,14051,14055,14057],{},[931,14052,14053],{"align":977},[1681,14054,12073],{},[931,14056,12076],{"align":977},[931,14058,14059],{},[594,14060,1159],{},[913,14062,14063,14067,14069],{},[931,14064,14065],{"align":977},[1681,14066,12087],{},[931,14068,13741],{"align":977},[931,14070,14071],{},[594,14072,1159],{},[913,14074,14075,14080,14083],{},[931,14076,14077],{"align":977},[1681,14078,14079],{},"target",[931,14081,14082],{"align":977},"The target to orbit around.",[931,14084,14085],{},[594,14086,1159],{},[913,14088,14089,14094,14099],{},[931,14090,14091],{"align":977},[1681,14092,14093],{},"enableDamping",[931,14095,938,14096,14098],{"align":977},[594,14097,941],{},", the controls will use damping (inertia), which can be used to give a sense of weight to the controls.",[931,14100,14101],{},[594,14102,941],{},[913,14104,14105,14110,14117],{},[931,14106,14107],{"align":977},[1681,14108,14109],{},"dampingFactor",[931,14111,14112,14113,14116],{"align":977},"The damping inertia used if ",[594,14114,14115],{},".enableDamping"," is set to true.",[931,14118,14119],{},[594,14120,10115],{},[913,14122,14123,14128,14131],{},[931,14124,14125],{"align":977},[1681,14126,14127],{},"autoRotate",[931,14129,14130],{"align":977},"Set to true to automatically rotate around the target.",[931,14132,14133],{},[594,14134,951],{},[913,14136,14137,14142,14149],{},[931,14138,14139],{"align":977},[1681,14140,14141],{},"autoRotateSpeed",[931,14143,14144,14145,14148],{"align":977},"How fast to rotate around the target if ",[594,14146,14147],{},".autoRotate"," is true.",[931,14150,14151],{},[594,14152,800],{},[913,14154,14155,14160,14163],{},[931,14156,14157],{"align":977},[1681,14158,14159],{},"enablePan",[931,14161,14162],{"align":977},"Whether to enable panning.",[931,14164,14165],{},[594,14166,941],{},[913,14168,14169,14174,14177],{},[931,14170,14171],{"align":977},[1681,14172,14173],{},"keyPanSpeed",[931,14175,14176],{"align":977},"How fast to pan the camera when the keyboard is used. Default is 7.0 pixels per keypress.",[931,14178,14179],{},[594,14180,14181],{},"7.0",[913,14183,14184,14189,14192],{},[931,14185,14186],{"align":977},[1681,14187,14188],{},"keys",[931,14190,14191],{"align":977},"This object contains references to the keycodes for controlling camera panning. Default is the 4 arrow keys.",[931,14193,14194],{},[594,14195,14196],{},"{ LEFT: 'ArrowLeft', UP: 'ArrowUp', RIGHT: 'ArrowRight', BOTTOM: 'ArrowDown' }",[913,14198,14199,14203,14214],{},[931,14200,14201],{"align":977},[1681,14202,12144],{},[931,14204,14205,14206,14209,14210,14213],{"align":977},"How far you can orbit horizontally, upper limit. If set, the interval ",[613,14207,14208],{}," min, max"," must be a sub-interval of ",[613,14211,14212],{}," - 2 PI, 2 PI",", with ( max - min \u003C 2 PI ). Default is Infinity.",[931,14215,14216],{},[594,14217,12152],{},[913,14219,14220,14224,14232],{},[931,14221,14222],{"align":977},[1681,14223,12129],{},[931,14225,14226,14227,14209,14229,14231],{"align":977},"How far you can orbit horizontally, lower limit. If set, the interval ",[613,14228,14208],{},[613,14230,14212],{},", with ( max - min \u003C 2 PI ). Default is - Infinity.",[931,14233,14234],{},[594,14235,12137],{},[913,14237,14238,14242,14245],{},[931,14239,14240],{"align":977},[1681,14241,12115],{},[931,14243,14244],{"align":977},"How far you can orbit vertically, upper limit. Range is 0 to Math.PI radians, and default is Math.PI.",[931,14246,14247],{},[594,14248,10136],{},[913,14250,14251,14255,14258],{},[931,14252,14253],{"align":977},[1681,14254,12101],{},[931,14256,14257],{"align":977},"How far you can orbit vertically, lower limit. Range is 0 to Math.PI radians, and default is 0.",[931,14259,14260],{},[594,14261,945],{},[913,14263,14264,14268,14271],{},[931,14265,14266],{"align":977},[1681,14267,12174],{},[931,14269,14270],{"align":977},"The minimum distance of the camera to the target. Default is 0.",[931,14272,14273],{},[594,14274,945],{},[913,14276,14277,14281,14284],{},[931,14278,14279],{"align":977},[1681,14280,12189],{},[931,14282,14283],{"align":977},"The maximum distance of the camera to the target. Default is Infinity.",[931,14285,14286],{},[594,14287,12152],{},[913,14289,14290,14294,14297],{},[931,14291,14292],{"align":977},[1681,14293,12219],{},[931,14295,14296],{"align":977},"The minimum field of view angle, in radians. Default is 0.",[931,14298,14299],{},[594,14300,945],{},[913,14302,14303,14307,14310],{},[931,14304,14305],{"align":977},[1681,14306,12233],{},[931,14308,14309],{"align":977},"The maximum field of view angle, in radians. ( OrthographicCamera only ). Default is Infinity.",[931,14311,14312],{},[594,14313,12152],{},[913,14315,14316,14320,14323],{},[931,14317,14318],{"align":977},[1681,14319,12479],{},[931,14321,14322],{"align":977},"This object contains references to the touch actions used by the controls.",[931,14324,14325],{},[594,14326,14327],{},"{ ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_PAN }",[913,14329,14330,14334,14337],{},[931,14331,14332],{"align":977},[1681,14333,12460],{},[931,14335,14336],{"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,14338,14339],{},[594,14340,14341],{},"{ LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN }",[913,14343,14344,14349,14352],{},[931,14345,14346],{"align":977},[1681,14347,14348],{},"enableZoom",[931,14350,14351],{"align":977},"Whether to enable zooming.",[931,14353,14354],{},[594,14355,941],{},[913,14357,14358,14363,14366],{},[931,14359,14360],{"align":977},[1681,14361,14362],{},"zoomSpeed",[931,14364,14365],{"align":977},"How fast to zoom in and out. Default is 1.",[931,14367,14368],{},[594,14369,1901],{},[913,14371,14372,14377,14380],{},[931,14373,14374],{"align":977},[1681,14375,14376],{},"enableRotate",[931,14378,14379],{"align":977},"Whether to enable rotating.",[931,14381,14382],{},[594,14383,941],{},[913,14385,14386,14391,14394],{},[931,14387,14388],{"align":977},[1681,14389,14390],{},"rotateSpeed",[931,14392,14393],{"align":977},"How fast to rotate around the target. Default is 1.",[931,14395,14396],{},[594,14397,1901],{},[913,14399,14400,14404,14408],{},[931,14401,14402],{"align":977},[1681,14403,13752],{},[931,14405,13755,14406,13758],{"align":977},[594,14407,941],{},[931,14409,14410],{},[594,14411,941],{},[480,14413,12953],{"id":12952},[602,14415,14417],{"className":604,"code":14416,"language":609,"meta":552,"style":552},"\u003COrbitControls @change=\"onChange\" @start=\"onStart\" @end=\"onEnd\" />\n",[594,14418,14419],{"__ignoreMap":552},[613,14420,14421,14423,14425,14427,14429,14431,14433,14435,14437,14439,14441,14443,14445,14447,14449,14451,14453,14455,14457,14459,14461],{"class":615,"line":553},[613,14422,619],{"class":618},[613,14424,771],{"class":622},[613,14426,4393],{"class":618},[613,14428,12969],{"class":626},[613,14430,633],{"class":618},[613,14432,636],{"class":618},[613,14434,12976],{"class":659},[613,14436,636],{"class":618},[613,14438,4393],{"class":618},[613,14440,12983],{"class":626},[613,14442,633],{"class":618},[613,14444,636],{"class":618},[613,14446,12990],{"class":659},[613,14448,636],{"class":618},[613,14450,4393],{"class":618},[613,14452,12997],{"class":626},[613,14454,633],{"class":618},[613,14456,636],{"class":618},[613,14458,13004],{"class":659},[613,14460,636],{"class":618},[613,14462,763],{"class":618},[907,14464,14465,14473],{},[910,14466,14467],{},[913,14468,14469,14471],{},[916,14470,5969],{"align":977},[916,14472,921],{"align":977},[926,14474,14475,14483,14491],{},[913,14476,14477,14481],{},[931,14478,14479],{"align":977},[1681,14480,12983],{},[931,14482,13029],{"align":977},[913,14484,14485,14489],{},[931,14486,14487],{"align":977},[1681,14488,12969],{},[931,14490,13038],{"align":977},[913,14492,14493,14497],{},[931,14494,14495],{"align":977},[1681,14496,12997],{},[931,14498,13047],{"align":977},[1307,14500,13050],{},{"title":552,"searchDepth":553,"depth":554,"links":14502},[14503,14504,14505],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},{"id":12952,"depth":554,"text":12953},"Allows you to orbit around the scene",{},{"title":103,"description":14506},"IQCftiJiGyLobGnbQSjgWE8zZkH7Aq-fMxmuEUs6EWI",{"id":14511,"title":107,"body":14512,"description":14864,"extension":567,"links":568,"meta":14865,"navigation":570,"path":108,"seo":14866,"stem":109,"__hash__":14867},"docs/2.api/2.controls/pointer-lock-controls.md",{"type":477,"value":14513,"toc":14859},[14514,14519,14526,14545,14547,14704,14708,14710,14775,14777,14824,14857],[584,14515,14516],{},[14517,14518],"controls-pointer-lock-controls",{},[590,14520,14521,14525],{},[1120,14522,13097],{"href":14523,"rel":14524},"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.",[3268,14527,14528],{},[590,14529,14530,14531,14544],{},"This control uses the ",[613,14532,14534,14537],{"style":14533},"background-color:#222;padding:0.25rem;border-radius:4px;",[1120,14535],{"href":104,"style":14536},"color:#f7f7f7;text-decoration:none",[1120,14538,14541],{"href":14539,"rel":14540},"https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API",[1124],[594,14542,14543],{},"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",[480,14546,15],{"id":600},[602,14548,14551],{"className":604,"code":14549,"highlights":14550,"language":609,"meta":552,"style":552},"\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",[684,776],[594,14552,14553,14573,14591,14615,14623,14627,14635,14643,14651,14671,14680,14688,14696],{"__ignoreMap":552},[613,14554,14555,14557,14559,14561,14563,14565,14567,14569,14571],{"class":615,"line":553},[613,14556,619],{"class":618},[613,14558,623],{"class":622},[613,14560,627],{"class":626},[613,14562,630],{"class":626},[613,14564,633],{"class":618},[613,14566,636],{"class":618},[613,14568,640],{"class":639},[613,14570,636],{"class":618},[613,14572,645],{"class":618},[613,14574,14575,14577,14579,14581,14583,14585,14587,14589],{"class":615,"line":554},[613,14576,653],{"class":652},[613,14578,656],{"class":618},[613,14580,691],{"class":659},[613,14582,669],{"class":618},[613,14584,672],{"class":652},[613,14586,675],{"class":618},[613,14588,700],{"class":639},[613,14590,681],{"class":618},[613,14592,14594,14596,14598,14601,14603,14605,14607,14609,14611,14613],{"class":14593,"line":684},[615,649],[613,14595,653],{"class":652},[613,14597,656],{"class":618},[613,14599,14600],{"class":659}," PointerLockControls",[613,14602,663],{"class":618},[613,14604,1377],{"class":659},[613,14606,669],{"class":618},[613,14608,672],{"class":652},[613,14610,675],{"class":618},[613,14612,678],{"class":639},[613,14614,681],{"class":618},[613,14616,14617,14619,14621],{"class":615,"line":705},[613,14618,708],{"class":618},[613,14620,623],{"class":622},[613,14622,645],{"class":618},[613,14624,14625],{"class":615,"line":715},[613,14626,718],{"emptyLinePlaceholder":570},[613,14628,14629,14631,14633],{"class":615,"line":721},[613,14630,619],{"class":618},[613,14632,726],{"class":622},[613,14634,645],{"class":618},[613,14636,14637,14639,14641],{"class":615,"line":731},[613,14638,734],{"class":618},[613,14640,737],{"class":622},[613,14642,645],{"class":618},[613,14644,14645,14647,14649],{"class":615,"line":754},[613,14646,757],{"class":618},[613,14648,760],{"class":622},[613,14650,763],{"class":618},[613,14652,14653,14655,14657,14659,14661,14663,14665,14667,14669],{"class":615,"line":766},[613,14654,757],{"class":618},[613,14656,197],{"class":622},[613,14658,789],{"class":618},[613,14660,1976],{"class":626},[613,14662,633],{"class":618},[613,14664,636],{"class":618},[613,14666,1521],{"class":799},[613,14668,636],{"class":618},[613,14670,763],{"class":618},[613,14672,14674,14676,14678],{"class":14673,"line":776},[615,649],[613,14675,757],{"class":618},[613,14677,13097],{"class":622},[613,14679,763],{"class":618},[613,14681,14682,14684,14686],{"class":615,"line":781},[613,14683,757],{"class":618},[613,14685,8313],{"class":622},[613,14687,763],{"class":618},[613,14689,14690,14692,14694],{"class":615,"line":807},[613,14691,885],{"class":618},[613,14693,737],{"class":622},[613,14695,645],{"class":618},[613,14697,14698,14700,14702],{"class":615,"line":607},[613,14699,708],{"class":618},[613,14701,726],{"class":622},[613,14703,645],{"class":618},[3268,14705,14706],{},[590,14707,12033],{},[480,14709,902],{"id":901},[907,14711,14712,14722],{},[910,14713,14714],{},[913,14715,14716,14718,14720],{},[916,14717,918],{"align":977},[916,14719,921],{"align":977},[916,14721,924],{},[926,14723,14724,14738,14750,14762],{},[913,14725,14726,14730,14734],{},[931,14727,14728],{"align":977},[1681,14729,12059],{},[931,14731,938,14732,13304],{"align":977},[594,14733,941],{},[931,14735,14736],{},[594,14737,951],{},[913,14739,14740,14744,14746],{},[931,14741,14742],{"align":977},[1681,14743,12073],{},[931,14745,12076],{"align":977},[931,14747,14748],{},[594,14749,1159],{},[913,14751,14752,14756,14758],{},[931,14753,14754],{"align":977},[1681,14755,12087],{},[931,14757,13741],{"align":977},[931,14759,14760],{},[594,14761,1159],{},[913,14763,14764,14768,14771],{},[931,14765,14766],{"align":977},[1681,14767,13339],{},[931,14769,14770],{"align":977},"Accept an id element as string, if it is set, the new element will be used as the trigger",[931,14772,14773],{},[594,14774,1159],{},[480,14776,12953],{"id":12952},[602,14778,14780],{"className":604,"code":14779,"language":609,"meta":552,"style":552},"\u003CPointerLockControls @change=\"onChange\" @is-lock=\"(state) => isActive(state)\" />\n",[594,14781,14782],{"__ignoreMap":552},[613,14783,14784,14786,14788,14790,14792,14794,14796,14798,14800,14802,14804,14806,14808,14810,14812,14814,14816,14818,14820,14822],{"class":615,"line":553},[613,14785,619],{"class":618},[613,14787,13097],{"class":622},[613,14789,4393],{"class":618},[613,14791,12969],{"class":626},[613,14793,633],{"class":618},[613,14795,636],{"class":618},[613,14797,12976],{"class":659},[613,14799,636],{"class":618},[613,14801,4393],{"class":618},[613,14803,13376],{"class":626},[613,14805,633],{"class":618},[613,14807,636],{"class":618},[613,14809,2485],{"class":618},[613,14811,13385],{"class":7049},[613,14813,3409],{"class":618},[613,14815,3746],{"class":626},[613,14817,13392],{"class":2482},[613,14819,13395],{"class":659},[613,14821,636],{"class":618},[613,14823,763],{"class":659},[907,14825,14826,14834],{},[910,14827,14828],{},[913,14829,14830,14832],{},[916,14831,5969],{"align":977},[916,14833,921],{"align":977},[926,14835,14836,14849],{},[913,14837,14838,14842],{},[931,14839,14840],{"align":977},[1681,14841,13418],{},[931,14843,13421,14844,13424,14846,14848],{"align":977},[594,14845,941],{},[594,14847,951],{}," if \"unlock\" events are trigger.",[913,14850,14851,14855],{},[931,14852,14853],{"align":977},[1681,14854,12969],{},[931,14856,13038],{"align":977},[1307,14858,13438],{},{"title":552,"searchDepth":553,"depth":554,"links":14860},[14861,14862,14863],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},{"id":12952,"depth":554,"text":12953},"Allows you to capture the mouse movement and simulate a first person camera",{},{"title":107,"description":14864},"D_6d4pTGDPfnlucQrxiFcUWuxhufIMPSU-uRuD7K7M4",{"id":14869,"title":111,"body":14870,"description":15613,"extension":567,"links":568,"meta":15614,"navigation":570,"path":112,"seo":15615,"stem":113,"__hash__":15616},"docs/2.api/2.controls/transform-controls.md",{"type":477,"value":14871,"toc":15603},[14872,14879,14884,14886,14897,15140,15158,15162,15165,15169,15174,15177,15213,15217,15222,15225,15260,15263,15268,15271,15306,15308,15534,15536,15597,15600],[590,14873,2843,14874,14878],{},[1120,14875,111],{"href":14876,"rel":14877},"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",[584,14880,14881],{},[14882,14883],"controls-transform-controls",{},[480,14885,15],{"id":600},[590,14887,14888,14889,14892,14893,14896],{},"To use the Transform Controls, simply add the ",[594,14890,14891],{},"TransformControls"," component to your scene. You can pass the ",[594,14894,14895],{},"templateRef","of the instance you want to control as a prop.",[602,14898,14901],{"className":604,"code":14899,"highlights":14900,"language":609,"meta":552,"style":552},"\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",[731,754],[594,14902,14903,14913,14926,14934,14942,14950,14987,14998,15020,15065,15098,15116,15124,15132],{"__ignoreMap":552},[613,14904,14905,14907,14909,14911],{"class":615,"line":553},[613,14906,619],{"class":618},[613,14908,623],{"class":622},[613,14910,627],{"class":626},[613,14912,645],{"class":618},[613,14914,14915,14917,14920,14922,14924],{"class":615,"line":554},[613,14916,2463],{"class":626},[613,14918,14919],{"class":659}," boxRef ",[613,14921,633],{"class":618},[613,14923,3567],{"class":2482},[613,14925,6745],{"class":659},[613,14927,14928,14930,14932],{"class":615,"line":684},[613,14929,708],{"class":618},[613,14931,623],{"class":622},[613,14933,645],{"class":618},[613,14935,14936,14938,14940],{"class":615,"line":705},[613,14937,619],{"class":618},[613,14939,726],{"class":622},[613,14941,645],{"class":618},[613,14943,14944,14946,14948],{"class":615,"line":715},[613,14945,734],{"class":618},[613,14947,737],{"class":622},[613,14949,645],{"class":618},[613,14951,14952,14954,14956,14958,14960,14962,14964,14966,14969,14971,14973,14975,14977,14979,14981,14983,14985],{"class":615,"line":721},[613,14953,757],{"class":618},[613,14955,760],{"class":622},[613,14957,789],{"class":618},[613,14959,1997],{"class":626},[613,14961,633],{"class":618},[613,14963,636],{"class":618},[613,14965,1474],{"class":618},[613,14967,14968],{"class":799},"45",[613,14970,1479],{"class":618},[613,14972,1901],{"class":799},[613,14974,1479],{"class":618},[613,14976,2211],{"class":799},[613,14978,1479],{"class":618},[613,14980,10388],{"class":799},[613,14982,1489],{"class":618},[613,14984,636],{"class":618},[613,14986,763],{"class":618},[613,14988,14990,14992,14994,14996],{"class":14989,"line":731},[615,649],[613,14991,757],{"class":618},[613,14993,771],{"class":622},[613,14995,1876],{"class":626},[613,14997,763],{"class":618},[613,14999,15001,15003,15005,15007,15009,15011,15013,15016,15018],{"class":15000,"line":754},[615,649],[613,15002,757],{"class":618},[613,15004,14891],{"class":622},[613,15006,789],{"class":618},[613,15008,4594],{"class":626},[613,15010,633],{"class":618},[613,15012,636],{"class":618},[613,15014,15015],{"class":659},"boxRef",[613,15017,636],{"class":618},[613,15019,763],{"class":618},[613,15021,15022,15024,15026,15028,15030,15032,15034,15036,15038,15040,15042,15044,15046,15048,15050,15052,15054,15056,15058,15060,15063],{"class":615,"line":766},[613,15023,757],{"class":618},[613,15025,836],{"class":622},[613,15027,3975],{"class":626},[613,15029,633],{"class":618},[613,15031,636],{"class":618},[613,15033,15015],{"class":639},[613,15035,636],{"class":618},[613,15037,789],{"class":618},[613,15039,1467],{"class":626},[613,15041,633],{"class":618},[613,15043,636],{"class":618},[613,15045,1474],{"class":618},[613,15047,945],{"class":799},[613,15049,1479],{"class":618},[613,15051,3876],{"class":799},[613,15053,1479],{"class":618},[613,15055,945],{"class":799},[613,15057,1489],{"class":618},[613,15059,636],{"class":618},[613,15061,15062],{"class":626}," cast-shadow",[613,15064,645],{"class":618},[613,15066,15067,15069,15071,15073,15075,15077,15079,15081,15084,15086,15088,15090,15092,15094,15096],{"class":615,"line":776},[613,15068,833],{"class":618},[613,15070,847],{"class":622},[613,15072,789],{"class":618},[613,15074,1997],{"class":626},[613,15076,633],{"class":618},[613,15078,636],{"class":618},[613,15080,1474],{"class":618},[613,15082,15083],{"class":799},"1.5",[613,15085,1479],{"class":618},[613,15087,15083],{"class":799},[613,15089,1479],{"class":618},[613,15091,15083],{"class":799},[613,15093,1489],{"class":618},[613,15095,636],{"class":618},[613,15097,763],{"class":618},[613,15099,15100,15102,15104,15106,15108,15110,15112,15114],{"class":615,"line":781},[613,15101,833],{"class":618},[613,15103,11943],{"class":622},[613,15105,2749],{"class":626},[613,15107,633],{"class":618},[613,15109,636],{"class":618},[613,15111,8152],{"class":639},[613,15113,636],{"class":618},[613,15115,763],{"class":618},[613,15117,15118,15120,15122],{"class":615,"line":807},[613,15119,875],{"class":618},[613,15121,836],{"class":622},[613,15123,645],{"class":618},[613,15125,15126,15128,15130],{"class":615,"line":607},[613,15127,885],{"class":618},[613,15129,737],{"class":622},[613,15131,645],{"class":618},[613,15133,15134,15136,15138],{"class":615,"line":830},[613,15135,708],{"class":618},[613,15137,726],{"class":622},[613,15139,645],{"class":618},[3268,15141,15142],{},[590,15143,15144,15145,15149,15150,15152,15153,15155,15156,1126],{},"If you are using other controls ",[613,15146,15147],{"style":14533},[1120,15148,771],{"href":104,"style":14536}," they will interfere with each other when dragging. To avoid this, you can set the ",[594,15151,12059],{}," prop to ",[594,15154,941],{}," on the ",[1681,15157,771],{},[480,15159,15161],{"id":15160},"modes","Modes",[590,15163,15164],{},"The Transform Controls can be used in three different modes:",[4191,15166,15168],{"id":15167},"translate","Translate",[590,15170,15171],{},[8508,15172],{"alt":15168,"src":15173},"/cientos/transform-controls-translate.png",[590,15175,15176],{},"The default mode allows you to move the object around the scene.",[602,15178,15180],{"className":604,"code":15179,"language":609,"meta":552,"style":552},"\u003CTransformControls mode=\"translate\" :object=\"sphereRef\" />\n",[594,15181,15182],{"__ignoreMap":552},[613,15183,15184,15186,15188,15190,15192,15194,15196,15198,15200,15202,15204,15206,15209,15211],{"class":615,"line":553},[613,15185,619],{"class":618},[613,15187,14891],{"class":622},[613,15189,7054],{"class":626},[613,15191,633],{"class":618},[613,15193,636],{"class":618},[613,15195,15167],{"class":639},[613,15197,636],{"class":618},[613,15199,789],{"class":618},[613,15201,4594],{"class":626},[613,15203,633],{"class":618},[613,15205,636],{"class":618},[613,15207,15208],{"class":659},"sphereRef",[613,15210,636],{"class":618},[613,15212,763],{"class":618},[4191,15214,15216],{"id":15215},"rotate","Rotate",[590,15218,15219],{},[8508,15220],{"alt":15216,"src":15221},"/cientos/transform-controls-rotate.png",[590,15223,15224],{},"The rotate mode allows you to rotate the object around the scene.",[602,15226,15228],{"className":604,"code":15227,"language":609,"meta":552,"style":552},"\u003CTransformControls mode=\"rotate\" :object=\"boxRef\" />\n",[594,15229,15230],{"__ignoreMap":552},[613,15231,15232,15234,15236,15238,15240,15242,15244,15246,15248,15250,15252,15254,15256,15258],{"class":615,"line":553},[613,15233,619],{"class":618},[613,15235,14891],{"class":622},[613,15237,7054],{"class":626},[613,15239,633],{"class":618},[613,15241,636],{"class":618},[613,15243,15215],{"class":639},[613,15245,636],{"class":618},[613,15247,789],{"class":618},[613,15249,4594],{"class":626},[613,15251,633],{"class":618},[613,15253,636],{"class":618},[613,15255,15015],{"class":659},[613,15257,636],{"class":618},[613,15259,763],{"class":618},[4191,15261,15262],{"id":792},"Scale",[590,15264,15265],{},[8508,15266],{"alt":15262,"src":15267},"/cientos/transform-controls-scale.png",[590,15269,15270],{},"The scale mode allows you to scale the object around the scene.",[602,15272,15274],{"className":604,"code":15273,"language":609,"meta":552,"style":552},"\u003CTransformControls mode=\"scale\" :object=\"sphereRef\" />\n",[594,15275,15276],{"__ignoreMap":552},[613,15277,15278,15280,15282,15284,15286,15288,15290,15292,15294,15296,15298,15300,15302,15304],{"class":615,"line":553},[613,15279,619],{"class":618},[613,15281,14891],{"class":622},[613,15283,7054],{"class":626},[613,15285,633],{"class":618},[613,15287,636],{"class":618},[613,15289,792],{"class":639},[613,15291,636],{"class":618},[613,15293,789],{"class":618},[613,15295,4594],{"class":626},[613,15297,633],{"class":618},[613,15299,636],{"class":618},[613,15301,15208],{"class":659},[613,15303,636],{"class":618},[613,15305,763],{"class":618},[480,15307,902],{"id":901},[907,15309,15310,15320],{},[910,15311,15312],{},[913,15313,15314,15316,15318],{},[916,15315,918],{"align":977},[916,15317,921],{"align":977},[916,15319,924],{},[926,15321,15322,15340,15359,15375,15410,15430,15444,15458,15472,15486,15502,15518],{},[913,15323,15324,15328,15336],{},[931,15325,15326],{"align":977},[1681,15327,4594],{},[931,15329,15330,15331,15335],{"align":977},"The instance ",[1120,15332,7847],{"href":15333,"rel":15334},"https://threejs.org/docs/index.html#api/en/core/Object3D",[1124]," to control.",[931,15337,15338],{},[594,15339,3725],{},[913,15341,15342,15346,15355],{},[931,15343,15344],{"align":977},[1681,15345,7075],{},[931,15347,15348,15349,1479,15351,5823,15353,1126],{"align":977},"The mode of the controls. Can be ",[594,15350,15167],{},[594,15352,15215],{},[594,15354,792],{},[931,15356,15357],{},[594,15358,15167],{},[913,15360,15361,15366,15371],{},[931,15362,15363],{"align":977},[1681,15364,15365],{},"enabled",[931,15367,938,15368,15370],{"align":977},[594,15369,941],{},", the controls will be enabled.",[931,15372,15373],{},[594,15374,941],{},[913,15376,15377,15382,15406],{},[931,15378,15379],{"align":977},[1681,15380,15381],{},"axis",[931,15383,15384,15385,1479,15388,1479,15391,1479,15394,1479,15397,1479,15400,1479,15403,1126],{"align":977},"The axis to use for the controls. Can be ",[594,15386,15387],{},"X",[594,15389,15390],{},"Y",[594,15392,15393],{},"Z",[594,15395,15396],{},"XY",[594,15398,15399],{},"YZ",[594,15401,15402],{},"XZ",[594,15404,15405],{},"XYZ",[931,15407,15408],{},[594,15409,15405],{},[913,15411,15412,15417,15426],{},[931,15413,15414],{"align":977},[1681,15415,15416],{},"space",[931,15418,15419,15420,5823,15423,1126],{"align":977},"The space to use for the controls. Can be ",[594,15421,15422],{},"local",[594,15424,15425],{},"world",[931,15427,15428],{},[594,15429,15422],{},[913,15431,15432,15437,15440],{},[931,15433,15434],{"align":977},[1681,15435,15436],{},"size",[931,15438,15439],{"align":977},"The size of the controls.",[931,15441,15442],{},[594,15443,1901],{},[913,15445,15446,15451,15454],{},[931,15447,15448],{"align":977},[1681,15449,15450],{},"translationSnap",[931,15452,15453],{"align":977},"The distance to snap to when translating. (World units)",[931,15455,15456],{},[594,15457,3725],{},[913,15459,15460,15465,15468],{},[931,15461,15462],{"align":977},[1681,15463,15464],{},"rotationSnap",[931,15466,15467],{"align":977},"The angle to snap to when rotating. (Radians)",[931,15469,15470],{},[594,15471,3725],{},[913,15473,15474,15479,15482],{},[931,15475,15476],{"align":977},[1681,15477,15478],{},"scaleSnap",[931,15480,15481],{"align":977},"The scale to snap to when scaling.",[931,15483,15484],{},[594,15485,3725],{},[913,15487,15488,15493,15498],{},[931,15489,15490],{"align":977},[1681,15491,15492],{},"showX",[931,15494,938,15495,15497],{"align":977},[594,15496,941],{},", the X-axis helper will be shown.",[931,15499,15500],{},[594,15501,941],{},[913,15503,15504,15509,15514],{},[931,15505,15506],{"align":977},[1681,15507,15508],{},"showY",[931,15510,938,15511,15513],{"align":977},[594,15512,941],{},", the Y-axis helper will be shown.",[931,15515,15516],{},[594,15517,941],{},[913,15519,15520,15525,15530],{},[931,15521,15522],{"align":977},[1681,15523,15524],{},"showZ",[931,15526,938,15527,15529],{"align":977},[594,15528,941],{},", the Z-axis helper will be shown.",[931,15531,15532],{},[594,15533,941],{},[480,15535,12953],{"id":12952},[907,15537,15538,15546],{},[910,15539,15540],{},[913,15541,15542,15544],{},[916,15543,5969],{"align":977},[916,15545,921],{"align":977},[926,15547,15548,15558,15567,15577,15587],{},[913,15549,15550,15555],{},[931,15551,15552],{"align":977},[1681,15553,15554],{},"dragging",[931,15556,15557],{"align":977},"Fired when the user starts or stops dragging the controls.",[913,15559,15560,15564],{},[931,15561,15562],{"align":977},[1681,15563,12969],{},[931,15565,15566],{"align":977},"Fired when the user changes the controls.",[913,15568,15569,15574],{},[931,15570,15571],{"align":977},[1681,15572,15573],{},"mouseDown",[931,15575,15576],{"align":977},"Fired when the user clicks on the controls.",[913,15578,15579,15584],{},[931,15580,15581],{"align":977},[1681,15582,15583],{},"mouseUp",[931,15585,15586],{"align":977},"Fired when the user releases the mouse button on the controls.",[913,15588,15589,15594],{},[931,15590,15591],{"align":977},[1681,15592,15593],{},"objectChange",[931,15595,15596],{"align":977},"Fired when the user changes the object.",[1307,15598,15599],{"scoped":570},"\nimg {\n aspect-ratio: 16/9;\n object-fit: cover;\n object-position: top;\n border-radius: 8px;\n}\n",[1307,15601,15602],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":552,"searchDepth":553,"depth":554,"links":15604},[15605,15606,15611,15612],{"id":600,"depth":554,"text":15},{"id":15160,"depth":554,"text":15161,"children":15607},[15608,15609,15610],{"id":15167,"depth":684,"text":15168},{"id":15215,"depth":684,"text":15216},{"id":792,"depth":684,"text":15262},{"id":901,"depth":554,"text":902},{"id":12952,"depth":554,"text":12953},"Set of three gizmos that can be used to translate, rotate and scale objects",{},{"title":111,"description":15613},"_oLjZPc3YQUArU7wqNKfUEMez4NtYo2Rc8q7SCJPpVI",[15618,16428,17147,17798,18462,19114,20630,23636,24141],{"id":15619,"title":121,"body":15620,"description":16424,"extension":567,"links":568,"meta":16425,"navigation":570,"path":122,"seo":16426,"stem":123,"__hash__":16427},"docs/2.api/3.loaders/1.use-gltf.md",{"type":477,"value":15621,"toc":16418},[15622,15627,15634,15636,16051,16067,16139,16143,16241,16244,16312,16316,16319,16412,16415],[2343,15623,15624],{},[15625,15626],"loaders-gltf",{},[590,15628,15629,15630,15633],{},"A composable that allows you to easily load glb/glTF models into your ",[1681,15631,15632],{},"TresJS"," scene.",[480,15635,15],{"id":600},[15637,15638,15639,15796],"code-group",{},[602,15640,15644],{"className":604,"code":15641,"filename":15642,"highlights":15643,"language":609,"meta":552,"style":552},"\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",[554,715],[594,15645,15646,15666,15685,15689,15705,15733,15741,15745,15753,15788],{"__ignoreMap":552},[613,15647,15648,15650,15652,15654,15656,15658,15660,15662,15664],{"class":615,"line":553},[613,15649,619],{"class":618},[613,15651,623],{"class":622},[613,15653,627],{"class":626},[613,15655,630],{"class":626},[613,15657,633],{"class":618},[613,15659,636],{"class":618},[613,15661,640],{"class":639},[613,15663,636],{"class":618},[613,15665,645],{"class":618},[613,15667,15669,15671,15673,15675,15677,15679,15681,15683],{"class":15668,"line":554},[615,649],[613,15670,653],{"class":652},[613,15672,656],{"class":618},[613,15674,4486],{"class":659},[613,15676,669],{"class":618},[613,15678,672],{"class":652},[613,15680,675],{"class":618},[613,15682,678],{"class":639},[613,15684,681],{"class":618},[613,15686,15687],{"class":615,"line":684},[613,15688,718],{"emptyLinePlaceholder":570},[613,15690,15691,15693,15696,15698,15700,15703],{"class":615,"line":705},[613,15692,2463],{"class":626},[613,15694,15695],{"class":659}," path ",[613,15697,633],{"class":618},[613,15699,675],{"class":618},[613,15701,15702],{"class":639},"./blender-cube.glb",[613,15704,681],{"class":618},[613,15706,15708,15710,15712,15714,15716,15719,15721,15724,15726,15728,15730],{"class":15707,"line":715},[615,649],[613,15709,2463],{"class":626},[613,15711,656],{"class":618},[613,15713,2468],{"class":659},[613,15715,663],{"class":618},[613,15717,15718],{"class":659}," nodes",[613,15720,663],{"class":618},[613,15722,15723],{"class":659}," materials ",[613,15725,2476],{"class":618},[613,15727,2479],{"class":618},[613,15729,4486],{"class":2482},[613,15731,15732],{"class":659},"(path)\n",[613,15734,15735,15737,15739],{"class":615,"line":721},[613,15736,708],{"class":618},[613,15738,623],{"class":622},[613,15740,645],{"class":618},[613,15742,15743],{"class":615,"line":731},[613,15744,718],{"emptyLinePlaceholder":570},[613,15746,15747,15749,15751],{"class":615,"line":754},[613,15748,619],{"class":618},[613,15750,726],{"class":622},[613,15752,645],{"class":618},[613,15754,15755,15757,15759,15761,15763,15765,15767,15769,15771,15773,15775,15777,15779,15781,15784,15786],{"class":615,"line":766},[613,15756,734],{"class":618},[613,15758,4573],{"class":622},[613,15760,2770],{"class":652},[613,15762,633],{"class":618},[613,15764,636],{"class":618},[613,15766,13385],{"class":659},[613,15768,636],{"class":618},[613,15770,789],{"class":618},[613,15772,4594],{"class":626},[613,15774,633],{"class":618},[613,15776,636],{"class":618},[613,15778,13385],{"class":659},[613,15780,3757],{"class":618},[613,15782,15783],{"class":659},"scene",[613,15785,636],{"class":618},[613,15787,763],{"class":618},[613,15789,15790,15792,15794],{"class":615,"line":776},[613,15791,708],{"class":618},[613,15793,726],{"class":622},[613,15795,645],{"class":618},[602,15797,15800],{"className":604,"code":15798,"filename":15799,"language":609,"meta":552,"style":552},"\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",[594,15801,15802,15822,15840,15858,15875,15883,15887,15895,15914,15946,15954,15963,15970,15984,16010,16015,16035,16043],{"__ignoreMap":552},[613,15803,15804,15806,15808,15810,15812,15814,15816,15818,15820],{"class":615,"line":553},[613,15805,619],{"class":618},[613,15807,623],{"class":622},[613,15809,627],{"class":626},[613,15811,630],{"class":626},[613,15813,633],{"class":618},[613,15815,636],{"class":618},[613,15817,640],{"class":639},[613,15819,636],{"class":618},[613,15821,645],{"class":618},[613,15823,15824,15826,15828,15830,15832,15834,15836,15838],{"class":615,"line":554},[613,15825,653],{"class":652},[613,15827,656],{"class":618},[613,15829,666],{"class":659},[613,15831,669],{"class":618},[613,15833,672],{"class":652},[613,15835,675],{"class":618},[613,15837,678],{"class":639},[613,15839,681],{"class":618},[613,15841,15842,15844,15846,15848,15850,15852,15854,15856],{"class":615,"line":684},[613,15843,653],{"class":652},[613,15845,656],{"class":618},[613,15847,691],{"class":659},[613,15849,669],{"class":618},[613,15851,672],{"class":652},[613,15853,675],{"class":618},[613,15855,700],{"class":639},[613,15857,681],{"class":618},[613,15859,15860,15862,15865,15868,15870,15873],{"class":615,"line":705},[613,15861,653],{"class":652},[613,15863,15864],{"class":659}," TheModel ",[613,15866,15867],{"class":652},"from",[613,15869,675],{"class":618},[613,15871,15872],{"class":639},"./TheModel.vue",[613,15874,681],{"class":618},[613,15876,15877,15879,15881],{"class":615,"line":715},[613,15878,708],{"class":618},[613,15880,623],{"class":622},[613,15882,645],{"class":618},[613,15884,15885],{"class":615,"line":721},[613,15886,718],{"emptyLinePlaceholder":570},[613,15888,15889,15891,15893],{"class":615,"line":731},[613,15890,619],{"class":618},[613,15892,726],{"class":622},[613,15894,645],{"class":618},[613,15896,15897,15899,15901,15903,15905,15907,15910,15912],{"class":615,"line":754},[613,15898,734],{"class":618},[613,15900,737],{"class":622},[613,15902,740],{"class":626},[613,15904,633],{"class":618},[613,15906,636],{"class":618},[613,15908,15909],{"class":639},"#F78B3D",[613,15911,636],{"class":618},[613,15913,645],{"class":618},[613,15915,15916,15918,15920,15922,15924,15926,15928,15930,15932,15934,15936,15938,15940,15942,15944],{"class":615,"line":766},[613,15917,757],{"class":618},[613,15919,760],{"class":622},[613,15921,789],{"class":618},[613,15923,1467],{"class":626},[613,15925,633],{"class":618},[613,15927,636],{"class":618},[613,15929,1474],{"class":618},[613,15931,2705],{"class":799},[613,15933,1479],{"class":618},[613,15935,800],{"class":799},[613,15937,1479],{"class":618},[613,15939,7668],{"class":799},[613,15941,1489],{"class":618},[613,15943,636],{"class":618},[613,15945,763],{"class":618},[613,15947,15948,15950,15952],{"class":615,"line":776},[613,15949,757],{"class":618},[613,15951,771],{"class":622},[613,15953,763],{"class":618},[613,15955,15956,15958,15961],{"class":615,"line":781},[613,15957,757],{"class":618},[613,15959,15960],{"class":622},"TheModel",[613,15962,763],{"class":618},[613,15964,15965,15967],{"class":615,"line":807},[613,15966,757],{"class":618},[613,15968,15969],{"class":622},"TresDirectionalLight\n",[613,15971,15972,15974,15976,15978,15980,15982],{"class":615,"line":607},[613,15973,10907],{"class":618},[613,15975,1894],{"class":626},[613,15977,633],{"class":618},[613,15979,636],{"class":618},[613,15981,800],{"class":799},[613,15983,3200],{"class":618},[613,15985,15986,15988,15990,15992,15994,15996,15998,16000,16002,16004,16006,16008],{"class":615,"line":830},[613,15987,10907],{"class":618},[613,15989,1467],{"class":626},[613,15991,633],{"class":618},[613,15993,636],{"class":618},[613,15995,1474],{"class":618},[613,15997,2705],{"class":799},[613,15999,1479],{"class":618},[613,16001,2705],{"class":799},[613,16003,1479],{"class":618},[613,16005,2705],{"class":799},[613,16007,1489],{"class":618},[613,16009,3200],{"class":618},[613,16011,16012],{"class":615,"line":841},[613,16013,16014],{"class":618}," />\n",[613,16016,16017,16019,16021,16023,16025,16027,16029,16031,16033],{"class":615,"line":852},[613,16018,757],{"class":618},[613,16020,8758],{"class":622},[613,16022,789],{"class":618},[613,16024,1894],{"class":626},[613,16026,633],{"class":618},[613,16028,636],{"class":618},[613,16030,1901],{"class":799},[613,16032,636],{"class":618},[613,16034,763],{"class":618},[613,16036,16037,16039,16041],{"class":615,"line":862},[613,16038,885],{"class":618},[613,16040,737],{"class":622},[613,16042,645],{"class":618},[613,16044,16045,16047,16049],{"class":615,"line":608},[613,16046,708],{"class":618},[613,16048,726],{"class":622},[613,16050,645],{"class":618},[590,16052,16053,16054,16056,16057,16060,16061,16066],{},"An advantage of using ",[594,16055,121],{}," is that you can pass a ",[594,16058,16059],{},"draco"," prop to enable ",[1120,16062,16065],{"href":16063,"rel":16064},"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.",[602,16068,16070],{"className":1166,"code":16069,"language":640,"meta":552,"style":552},"import { useGLTF } from '@tresjs/cientos'\n\nconst { state, nodes, materials } = useGLTF('/models/AkuAku.gltf', { draco: true })\n",[594,16071,16072,16090,16094],{"__ignoreMap":552},[613,16073,16074,16076,16078,16080,16082,16084,16086,16088],{"class":615,"line":553},[613,16075,653],{"class":652},[613,16077,656],{"class":618},[613,16079,4486],{"class":659},[613,16081,669],{"class":618},[613,16083,672],{"class":652},[613,16085,675],{"class":618},[613,16087,678],{"class":639},[613,16089,681],{"class":618},[613,16091,16092],{"class":615,"line":554},[613,16093,718],{"emptyLinePlaceholder":570},[613,16095,16096,16098,16100,16102,16104,16106,16108,16110,16112,16114,16116,16118,16120,16123,16125,16127,16129,16131,16133,16135,16137],{"class":615,"line":684},[613,16097,2463],{"class":626},[613,16099,656],{"class":618},[613,16101,2468],{"class":659},[613,16103,663],{"class":618},[613,16105,15718],{"class":659},[613,16107,663],{"class":618},[613,16109,15723],{"class":659},[613,16111,2476],{"class":618},[613,16113,2479],{"class":618},[613,16115,4486],{"class":2482},[613,16117,2485],{"class":659},[613,16119,2488],{"class":618},[613,16121,16122],{"class":639},"/models/AkuAku.gltf",[613,16124,2488],{"class":618},[613,16126,663],{"class":618},[613,16128,656],{"class":618},[613,16130,4531],{"class":622},[613,16132,1198],{"class":618},[613,16134,4537],{"class":4536},[613,16136,669],{"class":618},[613,16138,2496],{"class":659},[480,16140,16142],{"id":16141},"return-values","Return Values",[907,16144,16145,16155],{},[910,16146,16147],{},[913,16148,16149,16151,16153],{},[916,16150,8362],{"align":977},[916,16152,6179],{},[916,16154,921],{},[926,16156,16157,16171,16184,16197,16212,16226],{},[913,16158,16159,16163,16168],{},[931,16160,16161],{"align":977},[1681,16162,13385],{},[931,16164,16165],{},[594,16166,16167],{},"GLTF",[931,16169,16170],{},"The loaded GLTF model state",[913,16172,16173,16177,16181],{},[931,16174,16175],{"align":977},[1681,16176,4582],{},[931,16178,16179],{},[594,16180,4594],{},[931,16182,16183],{},"Computed object containing all nodes in the scene",[913,16185,16186,16190,16194],{},[931,16187,16188],{"align":977},[1681,16189,504],{},[931,16191,16192],{},[594,16193,4594],{},[931,16195,16196],{},"Computed object containing all materials in the scene",[913,16198,16199,16204,16209],{},[931,16200,16201],{"align":977},[1681,16202,16203],{},"isLoading",[931,16205,16206],{},[594,16207,16208],{},"boolean",[931,16210,16211],{},"Whether the model is currently loading",[913,16213,16214,16219,16223],{},[931,16215,16216],{"align":977},[1681,16217,16218],{},"progress",[931,16220,16221],{},[594,16222,5565],{},[931,16224,16225],{},"The progress of the model loading",[913,16227,16228,16233,16238],{},[931,16229,16230],{"align":977},[1681,16231,16232],{},"load",[931,16234,16235],{},[594,16236,16237],{},"() => Promise\u003Cvoid>",[931,16239,16240],{},"Function to reload the model",[480,16242,12698],{"id":16243},"options",[907,16245,16246,16258],{},[910,16247,16248],{},[913,16249,16250,16252,16254,16256],{},[916,16251,8362],{"align":977},[916,16253,6179],{},[916,16255,924],{},[916,16257,921],{},[926,16259,16260,16277,16296],{},[913,16261,16262,16266,16270,16274],{},[931,16263,16264],{"align":977},[1681,16265,16059],{},[931,16267,16268],{},[594,16269,16208],{},[931,16271,16272],{},[594,16273,951],{},[931,16275,16276],{},"Whether to enable Draco compression.",[913,16278,16279,16284,16288,16293],{},[931,16280,16281],{"align":977},[1681,16282,16283],{},"decoderPath",[931,16285,16286],{},[594,16287,3641],{},[931,16289,16290],{},[594,16291,16292],{},"'https://www.gstatic.com/draco/versioned/decoders/1.5.6/'",[931,16294,16295],{},"Path to the Draco decoder.",[913,16297,16298,16303,16307,16309],{},[931,16299,16300],{"align":977},[1681,16301,16302],{},"traverse",[931,16304,16305],{},[594,16306,10563],{},[931,16308],{},[931,16310,16311],{},"A traverse function applied to the scene upon loading the model.",[480,16313,16315],{"id":16314},"accessing-nodes-and-materials","Accessing Nodes and Materials",[590,16317,16318],{},"The composable provides computed properties to easily access nodes and materials in your scene:",[602,16320,16322],{"className":1166,"code":16321,"language":640,"meta":552,"style":552},"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",[594,16323,16324,16353,16357,16362,16382,16386,16391],{"__ignoreMap":552},[613,16325,16326,16328,16330,16332,16334,16336,16338,16340,16342,16344,16346,16349,16351],{"class":615,"line":553},[613,16327,2463],{"class":626},[613,16329,656],{"class":618},[613,16331,15718],{"class":659},[613,16333,663],{"class":618},[613,16335,15723],{"class":659},[613,16337,2476],{"class":618},[613,16339,2479],{"class":618},[613,16341,4486],{"class":2482},[613,16343,2485],{"class":659},[613,16345,2488],{"class":618},[613,16347,16348],{"class":639},"/model.glb",[613,16350,2488],{"class":618},[613,16352,2496],{"class":659},[613,16354,16355],{"class":615,"line":554},[613,16356,718],{"emptyLinePlaceholder":570},[613,16358,16359],{"class":615,"line":684},[613,16360,16361],{"class":1189},"// Access a specific node\n",[613,16363,16364,16366,16369,16371,16373,16375,16377,16379],{"class":615,"line":705},[613,16365,2463],{"class":626},[613,16367,16368],{"class":659}," mesh ",[613,16370,633],{"class":618},[613,16372,15718],{"class":659},[613,16374,1126],{"class":618},[613,16376,3754],{"class":659},[613,16378,1126],{"class":618},[613,16380,16381],{"class":659},"MeshName\n",[613,16383,16384],{"class":615,"line":715},[613,16385,718],{"emptyLinePlaceholder":570},[613,16387,16388],{"class":615,"line":721},[613,16389,16390],{"class":1189},"// Access a specific material\n",[613,16392,16393,16395,16398,16400,16403,16405,16407,16409],{"class":615,"line":731},[613,16394,2463],{"class":626},[613,16396,16397],{"class":659}," material ",[613,16399,633],{"class":618},[613,16401,16402],{"class":659}," materials",[613,16404,1126],{"class":618},[613,16406,3754],{"class":659},[613,16408,1126],{"class":618},[613,16410,16411],{"class":659},"MaterialName\n",[590,16413,16414],{},"This makes it easier to manipulate specific parts of your model or apply materials programmatically.",[1307,16416,16417],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":552,"searchDepth":553,"depth":554,"links":16419},[16420,16421,16422,16423],{"id":600,"depth":554,"text":15},{"id":16141,"depth":554,"text":16142},{"id":16243,"depth":554,"text":12698},{"id":16314,"depth":554,"text":16315},"A composable to load GLTF models in TresJS scenes.",{},{"title":121,"description":16424},"a8ph-37nMzF-TmW17rRFWQHDIwN83OfaztvKYiWzP30",{"id":16429,"title":125,"body":16430,"description":17143,"extension":567,"links":568,"meta":17144,"navigation":570,"path":126,"seo":17145,"stem":127,"__hash__":17146},"docs/2.api/3.loaders/2.gltf-model.md",{"type":477,"value":16431,"toc":17138},[16432,16436,16447,16449,16811,16815,16824,17042,17044,17135],[2343,16433,16434],{},[15625,16435],{},[590,16437,2843,16438,16440,16441,16446],{},[594,16439,125],{}," component is a wrapper around ",[1120,16442,16444],{"href":16443},"./use-gltf",[594,16445,121],{}," composable and accepts the same options as props.",[480,16448,15],{"id":600},[15637,16450,16451,16565],{},[602,16452,16455],{"className":604,"code":16453,"filename":15642,"highlights":16454,"language":609,"meta":552,"style":552},"\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",[554,754],[594,16456,16457,16477,16497,16501,16515,16523,16527,16535,16557],{"__ignoreMap":552},[613,16458,16459,16461,16463,16465,16467,16469,16471,16473,16475],{"class":615,"line":553},[613,16460,619],{"class":618},[613,16462,623],{"class":622},[613,16464,627],{"class":626},[613,16466,630],{"class":626},[613,16468,633],{"class":618},[613,16470,636],{"class":618},[613,16472,640],{"class":639},[613,16474,636],{"class":618},[613,16476,645],{"class":618},[613,16478,16480,16482,16484,16487,16489,16491,16493,16495],{"class":16479,"line":554},[615,649],[613,16481,653],{"class":652},[613,16483,656],{"class":618},[613,16485,16486],{"class":659}," GLTFModel",[613,16488,669],{"class":618},[613,16490,672],{"class":652},[613,16492,675],{"class":618},[613,16494,678],{"class":639},[613,16496,681],{"class":618},[613,16498,16499],{"class":615,"line":684},[613,16500,718],{"emptyLinePlaceholder":570},[613,16502,16503,16505,16507,16509,16511,16513],{"class":615,"line":705},[613,16504,2463],{"class":626},[613,16506,15695],{"class":659},[613,16508,633],{"class":618},[613,16510,675],{"class":618},[613,16512,15702],{"class":639},[613,16514,681],{"class":618},[613,16516,16517,16519,16521],{"class":615,"line":715},[613,16518,708],{"class":618},[613,16520,623],{"class":622},[613,16522,645],{"class":618},[613,16524,16525],{"class":615,"line":721},[613,16526,718],{"emptyLinePlaceholder":570},[613,16528,16529,16531,16533],{"class":615,"line":731},[613,16530,619],{"class":618},[613,16532,726],{"class":622},[613,16534,645],{"class":618},[613,16536,16538,16540,16542,16544,16547,16549,16551,16553,16555],{"class":16537,"line":754},[615,649],[613,16539,734],{"class":618},[613,16541,125],{"class":622},[613,16543,789],{"class":618},[613,16545,16546],{"class":626},"path",[613,16548,633],{"class":618},[613,16550,636],{"class":618},[613,16552,16546],{"class":659},[613,16554,636],{"class":618},[613,16556,763],{"class":618},[613,16558,16559,16561,16563],{"class":615,"line":766},[613,16560,708],{"class":618},[613,16562,726],{"class":622},[613,16564,645],{"class":618},[602,16566,16567],{"className":604,"code":15798,"filename":15799,"language":609,"meta":552,"style":552},[594,16568,16569,16589,16607,16625,16639,16647,16651,16659,16677,16709,16717,16725,16731,16745,16771,16775,16795,16803],{"__ignoreMap":552},[613,16570,16571,16573,16575,16577,16579,16581,16583,16585,16587],{"class":615,"line":553},[613,16572,619],{"class":618},[613,16574,623],{"class":622},[613,16576,627],{"class":626},[613,16578,630],{"class":626},[613,16580,633],{"class":618},[613,16582,636],{"class":618},[613,16584,640],{"class":639},[613,16586,636],{"class":618},[613,16588,645],{"class":618},[613,16590,16591,16593,16595,16597,16599,16601,16603,16605],{"class":615,"line":554},[613,16592,653],{"class":652},[613,16594,656],{"class":618},[613,16596,666],{"class":659},[613,16598,669],{"class":618},[613,16600,672],{"class":652},[613,16602,675],{"class":618},[613,16604,678],{"class":639},[613,16606,681],{"class":618},[613,16608,16609,16611,16613,16615,16617,16619,16621,16623],{"class":615,"line":684},[613,16610,653],{"class":652},[613,16612,656],{"class":618},[613,16614,691],{"class":659},[613,16616,669],{"class":618},[613,16618,672],{"class":652},[613,16620,675],{"class":618},[613,16622,700],{"class":639},[613,16624,681],{"class":618},[613,16626,16627,16629,16631,16633,16635,16637],{"class":615,"line":705},[613,16628,653],{"class":652},[613,16630,15864],{"class":659},[613,16632,15867],{"class":652},[613,16634,675],{"class":618},[613,16636,15872],{"class":639},[613,16638,681],{"class":618},[613,16640,16641,16643,16645],{"class":615,"line":715},[613,16642,708],{"class":618},[613,16644,623],{"class":622},[613,16646,645],{"class":618},[613,16648,16649],{"class":615,"line":721},[613,16650,718],{"emptyLinePlaceholder":570},[613,16652,16653,16655,16657],{"class":615,"line":731},[613,16654,619],{"class":618},[613,16656,726],{"class":622},[613,16658,645],{"class":618},[613,16660,16661,16663,16665,16667,16669,16671,16673,16675],{"class":615,"line":754},[613,16662,734],{"class":618},[613,16664,737],{"class":622},[613,16666,740],{"class":626},[613,16668,633],{"class":618},[613,16670,636],{"class":618},[613,16672,15909],{"class":639},[613,16674,636],{"class":618},[613,16676,645],{"class":618},[613,16678,16679,16681,16683,16685,16687,16689,16691,16693,16695,16697,16699,16701,16703,16705,16707],{"class":615,"line":766},[613,16680,757],{"class":618},[613,16682,760],{"class":622},[613,16684,789],{"class":618},[613,16686,1467],{"class":626},[613,16688,633],{"class":618},[613,16690,636],{"class":618},[613,16692,1474],{"class":618},[613,16694,2705],{"class":799},[613,16696,1479],{"class":618},[613,16698,800],{"class":799},[613,16700,1479],{"class":618},[613,16702,7668],{"class":799},[613,16704,1489],{"class":618},[613,16706,636],{"class":618},[613,16708,763],{"class":618},[613,16710,16711,16713,16715],{"class":615,"line":776},[613,16712,757],{"class":618},[613,16714,771],{"class":622},[613,16716,763],{"class":618},[613,16718,16719,16721,16723],{"class":615,"line":781},[613,16720,757],{"class":618},[613,16722,15960],{"class":622},[613,16724,763],{"class":618},[613,16726,16727,16729],{"class":615,"line":807},[613,16728,757],{"class":618},[613,16730,15969],{"class":622},[613,16732,16733,16735,16737,16739,16741,16743],{"class":615,"line":607},[613,16734,10907],{"class":618},[613,16736,1894],{"class":626},[613,16738,633],{"class":618},[613,16740,636],{"class":618},[613,16742,800],{"class":799},[613,16744,3200],{"class":618},[613,16746,16747,16749,16751,16753,16755,16757,16759,16761,16763,16765,16767,16769],{"class":615,"line":830},[613,16748,10907],{"class":618},[613,16750,1467],{"class":626},[613,16752,633],{"class":618},[613,16754,636],{"class":618},[613,16756,1474],{"class":618},[613,16758,2705],{"class":799},[613,16760,1479],{"class":618},[613,16762,2705],{"class":799},[613,16764,1479],{"class":618},[613,16766,2705],{"class":799},[613,16768,1489],{"class":618},[613,16770,3200],{"class":618},[613,16772,16773],{"class":615,"line":841},[613,16774,16014],{"class":618},[613,16776,16777,16779,16781,16783,16785,16787,16789,16791,16793],{"class":615,"line":852},[613,16778,757],{"class":618},[613,16780,8758],{"class":622},[613,16782,789],{"class":618},[613,16784,1894],{"class":626},[613,16786,633],{"class":618},[613,16788,636],{"class":618},[613,16790,1901],{"class":799},[613,16792,636],{"class":618},[613,16794,763],{"class":618},[613,16796,16797,16799,16801],{"class":615,"line":862},[613,16798,885],{"class":618},[613,16800,737],{"class":622},[613,16802,645],{"class":618},[613,16804,16805,16807,16809],{"class":615,"line":608},[613,16806,708],{"class":618},[613,16808,726],{"class":622},[613,16810,645],{"class":618},[480,16812,16814],{"id":16813},"model-reference","Model reference",[590,16816,16817,16818,1688,16820,16823],{},"You can access the model reference by passing a ",[594,16819,6104],{},[594,16821,16822],{},"model"," prop and then using to get the object.",[602,16825,16827],{"className":604,"code":16826,"language":609,"meta":552,"style":552},"\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",[594,16828,16829,16849,16871,16889,16893,16913,16917,16936,16941,16969,16975,16983,16987,16995,17002,17016,17030,17034],{"__ignoreMap":552},[613,16830,16831,16833,16835,16837,16839,16841,16843,16845,16847],{"class":615,"line":553},[613,16832,619],{"class":618},[613,16834,623],{"class":622},[613,16836,627],{"class":626},[613,16838,630],{"class":626},[613,16840,633],{"class":618},[613,16842,636],{"class":618},[613,16844,640],{"class":639},[613,16846,636],{"class":618},[613,16848,645],{"class":618},[613,16850,16851,16853,16855,16857,16860,16862,16864,16866,16869],{"class":615,"line":554},[613,16852,653],{"class":652},[613,16854,3511],{"class":652},[613,16856,656],{"class":618},[613,16858,16859],{"class":659}," TresObject",[613,16861,669],{"class":618},[613,16863,672],{"class":652},[613,16865,675],{"class":618},[613,16867,16868],{"class":639},"tresjs",[613,16870,681],{"class":618},[613,16872,16873,16875,16877,16879,16881,16883,16885,16887],{"class":615,"line":684},[613,16874,653],{"class":652},[613,16876,656],{"class":618},[613,16878,16486],{"class":659},[613,16880,669],{"class":618},[613,16882,672],{"class":652},[613,16884,675],{"class":618},[613,16886,678],{"class":639},[613,16888,681],{"class":618},[613,16890,16891],{"class":615,"line":705},[613,16892,718],{"emptyLinePlaceholder":570},[613,16894,16895,16897,16900,16902,16904,16906,16909,16911],{"class":615,"line":715},[613,16896,2463],{"class":626},[613,16898,16899],{"class":659}," modelRef ",[613,16901,633],{"class":618},[613,16903,3567],{"class":2482},[613,16905,619],{"class":618},[613,16907,16908],{"class":1180},"TresObject",[613,16910,3720],{"class":618},[613,16912,6745],{"class":659},[613,16914,16915],{"class":615,"line":721},[613,16916,718],{"emptyLinePlaceholder":570},[613,16918,16919,16921,16924,16926,16928,16930,16932,16934],{"class":615,"line":731},[613,16920,10705],{"class":2482},[613,16922,16923],{"class":659},"(modelRef",[613,16925,663],{"class":618},[613,16927,3143],{"class":618},[613,16929,16822],{"class":7049},[613,16931,3409],{"class":618},[613,16933,3746],{"class":626},[613,16935,1184],{"class":618},[613,16937,16938],{"class":615,"line":754},[613,16939,16940],{"class":1189}," // Do something with the model\n",[613,16942,16943,16946,16948,16950,16952,16955,16957,16959,16961,16963,16965,16967],{"class":615,"line":766},[613,16944,16945],{"class":659}," model",[613,16947,1126],{"class":618},[613,16949,1467],{"class":659},[613,16951,1126],{"class":618},[613,16953,16954],{"class":2482},"set",[613,16956,2485],{"class":622},[613,16958,945],{"class":799},[613,16960,663],{"class":618},[613,16962,2553],{"class":799},[613,16964,663],{"class":618},[613,16966,2553],{"class":799},[613,16968,2496],{"class":622},[613,16970,16971,16973],{"class":615,"line":776},[613,16972,2476],{"class":618},[613,16974,2496],{"class":659},[613,16976,16977,16979,16981],{"class":615,"line":781},[613,16978,708],{"class":618},[613,16980,623],{"class":622},[613,16982,645],{"class":618},[613,16984,16985],{"class":615,"line":807},[613,16986,718],{"emptyLinePlaceholder":570},[613,16988,16989,16991,16993],{"class":615,"line":607},[613,16990,619],{"class":618},[613,16992,726],{"class":622},[613,16994,645],{"class":618},[613,16996,16997,16999],{"class":615,"line":830},[613,16998,734],{"class":618},[613,17000,17001],{"class":622},"GLTFModel\n",[613,17003,17004,17007,17009,17011,17014],{"class":615,"line":841},[613,17005,17006],{"class":626}," ref",[613,17008,633],{"class":618},[613,17010,636],{"class":618},[613,17012,17013],{"class":639},"modelRef",[613,17015,3200],{"class":618},[613,17017,17018,17021,17023,17025,17028],{"class":615,"line":852},[613,17019,17020],{"class":626}," path",[613,17022,633],{"class":618},[613,17024,636],{"class":618},[613,17026,17027],{"class":639},"https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb",[613,17029,3200],{"class":618},[613,17031,17032],{"class":615,"line":862},[613,17033,12671],{"class":618},[613,17035,17036,17038,17040],{"class":615,"line":608},[613,17037,708],{"class":618},[613,17039,726],{"class":622},[613,17041,645],{"class":618},[480,17043,902],{"id":901},[907,17045,17046,17056],{},[910,17047,17048],{},[913,17049,17050,17052,17054],{},[916,17051,918],{"align":977},[916,17053,921],{"align":977},[916,17055,924],{},[926,17057,17058,17071,17088,17101,17119],{},[913,17059,17060,17064,17067],{},[931,17061,17062],{"align":977},[594,17063,16546],{},[931,17065,17066],{"align":977},"Path to the model file.",[931,17068,17069],{},[594,17070,1159],{},[913,17072,17073,17077,17084],{},[931,17074,17075],{"align":977},[594,17076,16059],{},[931,17078,17079,17080,17083],{"align":977},"Enable ",[1120,17081,16065],{"href":16063,"rel":17082},[1124]," for the model.",[931,17085,17086],{},[594,17087,951],{},[913,17089,17090,17094,17097],{},[931,17091,17092],{"align":977},[594,17093,16283],{},[931,17095,17096],{"align":977},"Path to a local Draco decoder.",[931,17098,17099],{},[594,17100,1159],{},[913,17102,17103,17108,17115],{},[931,17104,17105],{"align":977},[594,17106,17107],{},"castShadow",[931,17109,17110,17111,17114],{"align":977},"Apply ",[594,17112,17113],{},"cast-shadow"," to all meshes inside your model.",[931,17116,17117],{},[594,17118,951],{},[913,17120,17121,17126,17131],{},[931,17122,17123],{"align":977},[594,17124,17125],{},"receiveShadow",[931,17127,17110,17128,17114],{"align":977},[594,17129,17130],{},"receive-shadow",[931,17132,17133],{},[594,17134,951],{},[1307,17136,17137],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":552,"searchDepth":553,"depth":554,"links":17139},[17140,17141,17142],{"id":600,"depth":554,"text":15},{"id":16813,"depth":554,"text":16814},{"id":901,"depth":554,"text":902},"A component based on useGLTF to load models in TresJS scenes.",{},{"title":125,"description":17143},"JWe9EOh88vpjOxxjTHRWWuR-5fc1X6B09G1a16LfXnY",{"id":17148,"title":129,"body":17149,"description":17794,"extension":567,"links":568,"meta":17795,"navigation":570,"path":130,"seo":17796,"stem":131,"__hash__":17797},"docs/2.api/3.loaders/3.use-fbx.md",{"type":477,"value":17150,"toc":17788},[17151,17156,17161,17163,17587,17589,17665,17667,17693,17695,17697,17783,17785],[2343,17152,17153],{},[17154,17155],"loaders-fbx",{},[590,17157,17158,17159,15633],{},"A composable that allows you to easily load FBX models into your ",[1681,17160,15632],{},[480,17162,15],{"id":600},[15637,17164,17165,17338],{},[602,17166,17169],{"className":604,"code":17167,"filename":15642,"highlights":17168,"language":609,"meta":552,"style":552},"\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",[554,721],[594,17170,17171,17191,17211,17215,17230,17242,17267,17275,17279,17287,17330],{"__ignoreMap":552},[613,17172,17173,17175,17177,17179,17181,17183,17185,17187,17189],{"class":615,"line":553},[613,17174,619],{"class":618},[613,17176,623],{"class":622},[613,17178,627],{"class":626},[613,17180,630],{"class":626},[613,17182,633],{"class":618},[613,17184,636],{"class":618},[613,17186,640],{"class":639},[613,17188,636],{"class":618},[613,17190,645],{"class":618},[613,17192,17194,17196,17198,17201,17203,17205,17207,17209],{"class":17193,"line":554},[615,649],[613,17195,653],{"class":652},[613,17197,656],{"class":618},[613,17199,17200],{"class":659}," useFBX",[613,17202,669],{"class":618},[613,17204,672],{"class":652},[613,17206,675],{"class":618},[613,17208,678],{"class":639},[613,17210,681],{"class":618},[613,17212,17213],{"class":615,"line":684},[613,17214,718],{"emptyLinePlaceholder":570},[613,17216,17217,17219,17221,17223,17225,17228],{"class":615,"line":705},[613,17218,2463],{"class":626},[613,17220,15695],{"class":659},[613,17222,633],{"class":618},[613,17224,675],{"class":618},[613,17226,17227],{"class":639},"https://raw.githubusercontent.com/",[613,17229,681],{"class":618},[613,17231,17232,17235,17237,17240],{"class":615,"line":715},[613,17233,17234],{"class":618}," +",[613,17236,675],{"class":618},[613,17238,17239],{"class":639},"Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx",[613,17241,681],{"class":618},[613,17243,17245,17247,17249,17251,17253,17255,17257,17259,17261,17263,17265],{"class":17244,"line":721},[615,649],[613,17246,2463],{"class":626},[613,17248,656],{"class":618},[613,17250,2468],{"class":659},[613,17252,663],{"class":618},[613,17254,15718],{"class":659},[613,17256,663],{"class":618},[613,17258,15723],{"class":659},[613,17260,2476],{"class":618},[613,17262,2479],{"class":618},[613,17264,17200],{"class":2482},[613,17266,15732],{"class":659},[613,17268,17269,17271,17273],{"class":615,"line":731},[613,17270,708],{"class":618},[613,17272,623],{"class":622},[613,17274,645],{"class":618},[613,17276,17277],{"class":615,"line":754},[613,17278,718],{"emptyLinePlaceholder":570},[613,17280,17281,17283,17285],{"class":615,"line":766},[613,17282,619],{"class":618},[613,17284,726],{"class":622},[613,17286,645],{"class":618},[613,17288,17289,17291,17293,17295,17297,17299,17301,17303,17305,17307,17309,17311,17313,17315,17317,17319,17321,17323,17326,17328],{"class":615,"line":776},[613,17290,734],{"class":618},[613,17292,4573],{"class":622},[613,17294,2770],{"class":652},[613,17296,633],{"class":618},[613,17298,636],{"class":618},[613,17300,13385],{"class":659},[613,17302,636],{"class":618},[613,17304,789],{"class":618},[613,17306,4594],{"class":626},[613,17308,633],{"class":618},[613,17310,636],{"class":618},[613,17312,13385],{"class":659},[613,17314,636],{"class":618},[613,17316,789],{"class":618},[613,17318,792],{"class":626},[613,17320,633],{"class":618},[613,17322,636],{"class":618},[613,17324,17325],{"class":799},"0.025",[613,17327,636],{"class":618},[613,17329,763],{"class":618},[613,17331,17332,17334,17336],{"class":615,"line":781},[613,17333,708],{"class":618},[613,17335,726],{"class":622},[613,17337,645],{"class":618},[602,17339,17341],{"className":604,"code":17340,"filename":15799,"language":609,"meta":552,"style":552},"\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",[594,17342,17343,17363,17381,17399,17413,17421,17425,17433,17452,17485,17493,17501,17507,17521,17547,17551,17571,17579],{"__ignoreMap":552},[613,17344,17345,17347,17349,17351,17353,17355,17357,17359,17361],{"class":615,"line":553},[613,17346,619],{"class":618},[613,17348,623],{"class":622},[613,17350,627],{"class":626},[613,17352,630],{"class":626},[613,17354,633],{"class":618},[613,17356,636],{"class":618},[613,17358,640],{"class":639},[613,17360,636],{"class":618},[613,17362,645],{"class":618},[613,17364,17365,17367,17369,17371,17373,17375,17377,17379],{"class":615,"line":554},[613,17366,653],{"class":652},[613,17368,656],{"class":618},[613,17370,666],{"class":659},[613,17372,669],{"class":618},[613,17374,672],{"class":652},[613,17376,675],{"class":618},[613,17378,678],{"class":639},[613,17380,681],{"class":618},[613,17382,17383,17385,17387,17389,17391,17393,17395,17397],{"class":615,"line":684},[613,17384,653],{"class":652},[613,17386,656],{"class":618},[613,17388,691],{"class":659},[613,17390,669],{"class":618},[613,17392,672],{"class":652},[613,17394,675],{"class":618},[613,17396,700],{"class":639},[613,17398,681],{"class":618},[613,17400,17401,17403,17405,17407,17409,17411],{"class":615,"line":705},[613,17402,653],{"class":652},[613,17404,15864],{"class":659},[613,17406,15867],{"class":652},[613,17408,675],{"class":618},[613,17410,15872],{"class":639},[613,17412,681],{"class":618},[613,17414,17415,17417,17419],{"class":615,"line":715},[613,17416,708],{"class":618},[613,17418,623],{"class":622},[613,17420,645],{"class":618},[613,17422,17423],{"class":615,"line":721},[613,17424,718],{"emptyLinePlaceholder":570},[613,17426,17427,17429,17431],{"class":615,"line":731},[613,17428,619],{"class":618},[613,17430,726],{"class":622},[613,17432,645],{"class":618},[613,17434,17435,17437,17439,17441,17443,17445,17448,17450],{"class":615,"line":754},[613,17436,734],{"class":618},[613,17438,737],{"class":622},[613,17440,740],{"class":626},[613,17442,633],{"class":618},[613,17444,636],{"class":618},[613,17446,17447],{"class":639},"#1F90FF",[613,17449,636],{"class":618},[613,17451,645],{"class":618},[613,17453,17454,17456,17458,17460,17462,17464,17466,17468,17471,17473,17475,17477,17479,17481,17483],{"class":615,"line":766},[613,17455,757],{"class":618},[613,17457,760],{"class":622},[613,17459,789],{"class":618},[613,17461,1467],{"class":626},[613,17463,633],{"class":618},[613,17465,636],{"class":618},[613,17467,1474],{"class":618},[613,17469,17470],{"class":799},"11",[613,17472,1479],{"class":618},[613,17474,17470],{"class":799},[613,17476,1479],{"class":618},[613,17478,17470],{"class":799},[613,17480,1489],{"class":618},[613,17482,636],{"class":618},[613,17484,763],{"class":618},[613,17486,17487,17489,17491],{"class":615,"line":776},[613,17488,757],{"class":618},[613,17490,771],{"class":622},[613,17492,763],{"class":618},[613,17494,17495,17497,17499],{"class":615,"line":781},[613,17496,757],{"class":618},[613,17498,15960],{"class":622},[613,17500,763],{"class":618},[613,17502,17503,17505],{"class":615,"line":807},[613,17504,757],{"class":618},[613,17506,15969],{"class":622},[613,17508,17509,17511,17513,17515,17517,17519],{"class":615,"line":607},[613,17510,10907],{"class":618},[613,17512,1894],{"class":626},[613,17514,633],{"class":618},[613,17516,636],{"class":618},[613,17518,800],{"class":799},[613,17520,3200],{"class":618},[613,17522,17523,17525,17527,17529,17531,17533,17535,17537,17539,17541,17543,17545],{"class":615,"line":830},[613,17524,10907],{"class":618},[613,17526,1467],{"class":626},[613,17528,633],{"class":618},[613,17530,636],{"class":618},[613,17532,1474],{"class":618},[613,17534,2705],{"class":799},[613,17536,1479],{"class":618},[613,17538,2705],{"class":799},[613,17540,1479],{"class":618},[613,17542,2705],{"class":799},[613,17544,1489],{"class":618},[613,17546,3200],{"class":618},[613,17548,17549],{"class":615,"line":841},[613,17550,16014],{"class":618},[613,17552,17553,17555,17557,17559,17561,17563,17565,17567,17569],{"class":615,"line":852},[613,17554,757],{"class":618},[613,17556,8758],{"class":622},[613,17558,789],{"class":618},[613,17560,1894],{"class":626},[613,17562,633],{"class":618},[613,17564,636],{"class":618},[613,17566,1901],{"class":799},[613,17568,636],{"class":618},[613,17570,763],{"class":618},[613,17572,17573,17575,17577],{"class":615,"line":862},[613,17574,885],{"class":618},[613,17576,737],{"class":622},[613,17578,645],{"class":618},[613,17580,17581,17583,17585],{"class":615,"line":608},[613,17582,708],{"class":618},[613,17584,726],{"class":622},[613,17586,645],{"class":618},[480,17588,16142],{"id":16141},[907,17590,17591,17601],{},[910,17592,17593],{},[913,17594,17595,17597,17599],{},[916,17596,8362],{"align":977},[916,17598,6179],{},[916,17600,921],{},[926,17602,17603,17616,17628,17640,17652],{},[913,17604,17605,17609,17613],{},[931,17606,17607],{"align":977},[1681,17608,13385],{},[931,17610,17611],{},[594,17612,4685],{},[931,17614,17615],{},"The loaded FBX model state",[913,17617,17618,17622,17626],{},[931,17619,17620],{"align":977},[1681,17621,4582],{},[931,17623,17624],{},[594,17625,4594],{},[931,17627,16183],{},[913,17629,17630,17634,17638],{},[931,17631,17632],{"align":977},[1681,17633,504],{},[931,17635,17636],{},[594,17637,4594],{},[931,17639,16196],{},[913,17641,17642,17646,17650],{},[931,17643,17644],{"align":977},[1681,17645,16203],{},[931,17647,17648],{},[594,17649,16208],{},[931,17651,16211],{},[913,17653,17654,17659,17663],{},[931,17655,17656],{"align":977},[1681,17657,17658],{},"execute",[931,17660,17661],{},[594,17662,16237],{},[931,17664,16240],{},[480,17666,12698],{"id":16243},[907,17668,17669,17679],{},[910,17670,17671],{},[913,17672,17673,17675,17677],{},[916,17674,8362],{"align":977},[916,17676,6179],{},[916,17678,921],{},[926,17680,17681],{},[913,17682,17683,17687,17691],{},[931,17684,17685],{"align":977},[1681,17686,16302],{},[931,17688,17689],{},[594,17690,10563],{},[931,17692,16311],{},[480,17694,16315],{"id":16314},[590,17696,16318],{},[602,17698,17700],{"className":1166,"code":17699,"language":640,"meta":552,"style":552},"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",[594,17701,17702,17731,17735,17739,17757,17761,17765],{"__ignoreMap":552},[613,17703,17704,17706,17708,17710,17712,17714,17716,17718,17720,17722,17724,17727,17729],{"class":615,"line":553},[613,17705,2463],{"class":626},[613,17707,656],{"class":618},[613,17709,15718],{"class":659},[613,17711,663],{"class":618},[613,17713,15723],{"class":659},[613,17715,2476],{"class":618},[613,17717,2479],{"class":618},[613,17719,17200],{"class":2482},[613,17721,2485],{"class":659},[613,17723,2488],{"class":618},[613,17725,17726],{"class":639},"/model.fbx",[613,17728,2488],{"class":618},[613,17730,2496],{"class":659},[613,17732,17733],{"class":615,"line":554},[613,17734,718],{"emptyLinePlaceholder":570},[613,17736,17737],{"class":615,"line":684},[613,17738,16361],{"class":1189},[613,17740,17741,17743,17745,17747,17749,17751,17753,17755],{"class":615,"line":705},[613,17742,2463],{"class":626},[613,17744,16368],{"class":659},[613,17746,633],{"class":618},[613,17748,15718],{"class":659},[613,17750,1126],{"class":618},[613,17752,3754],{"class":659},[613,17754,1126],{"class":618},[613,17756,16381],{"class":659},[613,17758,17759],{"class":615,"line":715},[613,17760,718],{"emptyLinePlaceholder":570},[613,17762,17763],{"class":615,"line":721},[613,17764,16390],{"class":1189},[613,17766,17767,17769,17771,17773,17775,17777,17779,17781],{"class":615,"line":731},[613,17768,2463],{"class":626},[613,17770,16397],{"class":659},[613,17772,633],{"class":618},[613,17774,16402],{"class":659},[613,17776,1126],{"class":618},[613,17778,3754],{"class":659},[613,17780,1126],{"class":618},[613,17782,16411],{"class":659},[590,17784,16414],{},[1307,17786,17787],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":552,"searchDepth":553,"depth":554,"links":17789},[17790,17791,17792,17793],{"id":600,"depth":554,"text":15},{"id":16141,"depth":554,"text":16142},{"id":16243,"depth":554,"text":12698},{"id":16314,"depth":554,"text":16315},"A composable to load FBX models in TresJS scenes.",{},{"title":129,"description":17794},"OZNFq_w0y9fXGIViDTr_a5XFwBaMnXwWDQKWFsdULrs",{"id":17799,"title":133,"body":17800,"description":18458,"extension":567,"links":568,"meta":18459,"navigation":570,"path":134,"seo":18460,"stem":135,"__hash__":18461},"docs/2.api/3.loaders/4.fbx-model.md",{"type":477,"value":17801,"toc":18453},[17802,17806,17815,17817,18179,18181,18188,18395,18397,18451],[2343,17803,17804],{},[17154,17805],{},[590,17807,2843,17808,16440,17810,16446],{},[594,17809,133],{},[1120,17811,17813],{"href":17812},"./use-fbx",[594,17814,129],{},[480,17816,15],{"id":600},[15637,17818,17819,17933],{},[602,17820,17823],{"className":604,"code":17821,"filename":15642,"highlights":17822,"language":609,"meta":552,"style":552},"\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",[554,754],[594,17824,17825,17845,17865,17869,17884,17892,17896,17904,17925],{"__ignoreMap":552},[613,17826,17827,17829,17831,17833,17835,17837,17839,17841,17843],{"class":615,"line":553},[613,17828,619],{"class":618},[613,17830,623],{"class":622},[613,17832,627],{"class":626},[613,17834,630],{"class":626},[613,17836,633],{"class":618},[613,17838,636],{"class":618},[613,17840,640],{"class":639},[613,17842,636],{"class":618},[613,17844,645],{"class":618},[613,17846,17848,17850,17852,17855,17857,17859,17861,17863],{"class":17847,"line":554},[615,649],[613,17849,653],{"class":652},[613,17851,656],{"class":618},[613,17853,17854],{"class":659}," FBXModel",[613,17856,669],{"class":618},[613,17858,672],{"class":652},[613,17860,675],{"class":618},[613,17862,678],{"class":639},[613,17864,681],{"class":618},[613,17866,17867],{"class":615,"line":684},[613,17868,718],{"emptyLinePlaceholder":570},[613,17870,17871,17873,17875,17877,17879,17882],{"class":615,"line":705},[613,17872,2463],{"class":626},[613,17874,15695],{"class":659},[613,17876,633],{"class":618},[613,17878,675],{"class":618},[613,17880,17881],{"class":639},"./Jeep_done.fbx",[613,17883,681],{"class":618},[613,17885,17886,17888,17890],{"class":615,"line":715},[613,17887,708],{"class":618},[613,17889,623],{"class":622},[613,17891,645],{"class":618},[613,17893,17894],{"class":615,"line":721},[613,17895,718],{"emptyLinePlaceholder":570},[613,17897,17898,17900,17902],{"class":615,"line":731},[613,17899,619],{"class":618},[613,17901,726],{"class":622},[613,17903,645],{"class":618},[613,17905,17907,17909,17911,17913,17915,17917,17919,17921,17923],{"class":17906,"line":754},[615,649],[613,17908,734],{"class":618},[613,17910,133],{"class":622},[613,17912,789],{"class":618},[613,17914,16546],{"class":626},[613,17916,633],{"class":618},[613,17918,636],{"class":618},[613,17920,16546],{"class":659},[613,17922,636],{"class":618},[613,17924,763],{"class":618},[613,17926,17927,17929,17931],{"class":615,"line":766},[613,17928,708],{"class":618},[613,17930,726],{"class":622},[613,17932,645],{"class":618},[602,17934,17935],{"className":604,"code":15798,"filename":15799,"language":609,"meta":552,"style":552},[594,17936,17937,17957,17975,17993,18007,18015,18019,18027,18045,18077,18085,18093,18099,18113,18139,18143,18163,18171],{"__ignoreMap":552},[613,17938,17939,17941,17943,17945,17947,17949,17951,17953,17955],{"class":615,"line":553},[613,17940,619],{"class":618},[613,17942,623],{"class":622},[613,17944,627],{"class":626},[613,17946,630],{"class":626},[613,17948,633],{"class":618},[613,17950,636],{"class":618},[613,17952,640],{"class":639},[613,17954,636],{"class":618},[613,17956,645],{"class":618},[613,17958,17959,17961,17963,17965,17967,17969,17971,17973],{"class":615,"line":554},[613,17960,653],{"class":652},[613,17962,656],{"class":618},[613,17964,666],{"class":659},[613,17966,669],{"class":618},[613,17968,672],{"class":652},[613,17970,675],{"class":618},[613,17972,678],{"class":639},[613,17974,681],{"class":618},[613,17976,17977,17979,17981,17983,17985,17987,17989,17991],{"class":615,"line":684},[613,17978,653],{"class":652},[613,17980,656],{"class":618},[613,17982,691],{"class":659},[613,17984,669],{"class":618},[613,17986,672],{"class":652},[613,17988,675],{"class":618},[613,17990,700],{"class":639},[613,17992,681],{"class":618},[613,17994,17995,17997,17999,18001,18003,18005],{"class":615,"line":705},[613,17996,653],{"class":652},[613,17998,15864],{"class":659},[613,18000,15867],{"class":652},[613,18002,675],{"class":618},[613,18004,15872],{"class":639},[613,18006,681],{"class":618},[613,18008,18009,18011,18013],{"class":615,"line":715},[613,18010,708],{"class":618},[613,18012,623],{"class":622},[613,18014,645],{"class":618},[613,18016,18017],{"class":615,"line":721},[613,18018,718],{"emptyLinePlaceholder":570},[613,18020,18021,18023,18025],{"class":615,"line":731},[613,18022,619],{"class":618},[613,18024,726],{"class":622},[613,18026,645],{"class":618},[613,18028,18029,18031,18033,18035,18037,18039,18041,18043],{"class":615,"line":754},[613,18030,734],{"class":618},[613,18032,737],{"class":622},[613,18034,740],{"class":626},[613,18036,633],{"class":618},[613,18038,636],{"class":618},[613,18040,15909],{"class":639},[613,18042,636],{"class":618},[613,18044,645],{"class":618},[613,18046,18047,18049,18051,18053,18055,18057,18059,18061,18063,18065,18067,18069,18071,18073,18075],{"class":615,"line":766},[613,18048,757],{"class":618},[613,18050,760],{"class":622},[613,18052,789],{"class":618},[613,18054,1467],{"class":626},[613,18056,633],{"class":618},[613,18058,636],{"class":618},[613,18060,1474],{"class":618},[613,18062,2705],{"class":799},[613,18064,1479],{"class":618},[613,18066,800],{"class":799},[613,18068,1479],{"class":618},[613,18070,7668],{"class":799},[613,18072,1489],{"class":618},[613,18074,636],{"class":618},[613,18076,763],{"class":618},[613,18078,18079,18081,18083],{"class":615,"line":776},[613,18080,757],{"class":618},[613,18082,771],{"class":622},[613,18084,763],{"class":618},[613,18086,18087,18089,18091],{"class":615,"line":781},[613,18088,757],{"class":618},[613,18090,15960],{"class":622},[613,18092,763],{"class":618},[613,18094,18095,18097],{"class":615,"line":807},[613,18096,757],{"class":618},[613,18098,15969],{"class":622},[613,18100,18101,18103,18105,18107,18109,18111],{"class":615,"line":607},[613,18102,10907],{"class":618},[613,18104,1894],{"class":626},[613,18106,633],{"class":618},[613,18108,636],{"class":618},[613,18110,800],{"class":799},[613,18112,3200],{"class":618},[613,18114,18115,18117,18119,18121,18123,18125,18127,18129,18131,18133,18135,18137],{"class":615,"line":830},[613,18116,10907],{"class":618},[613,18118,1467],{"class":626},[613,18120,633],{"class":618},[613,18122,636],{"class":618},[613,18124,1474],{"class":618},[613,18126,2705],{"class":799},[613,18128,1479],{"class":618},[613,18130,2705],{"class":799},[613,18132,1479],{"class":618},[613,18134,2705],{"class":799},[613,18136,1489],{"class":618},[613,18138,3200],{"class":618},[613,18140,18141],{"class":615,"line":841},[613,18142,16014],{"class":618},[613,18144,18145,18147,18149,18151,18153,18155,18157,18159,18161],{"class":615,"line":852},[613,18146,757],{"class":618},[613,18148,8758],{"class":622},[613,18150,789],{"class":618},[613,18152,1894],{"class":626},[613,18154,633],{"class":618},[613,18156,636],{"class":618},[613,18158,1901],{"class":799},[613,18160,636],{"class":618},[613,18162,763],{"class":618},[613,18164,18165,18167,18169],{"class":615,"line":862},[613,18166,885],{"class":618},[613,18168,737],{"class":622},[613,18170,645],{"class":618},[613,18172,18173,18175,18177],{"class":615,"line":608},[613,18174,708],{"class":618},[613,18176,726],{"class":622},[613,18178,645],{"class":618},[480,18180,16814],{"id":16813},[590,18182,16817,18183,1688,18185,18187],{},[594,18184,6104],{},[594,18186,133],{}," component and then using it to get the object.",[602,18189,18191],{"className":604,"code":18190,"language":609,"meta":552,"style":552},"\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",[594,18192,18193,18213,18233,18251,18255,18273,18277,18295,18299,18325,18331,18339,18343,18351,18358,18370,18383,18387],{"__ignoreMap":552},[613,18194,18195,18197,18199,18201,18203,18205,18207,18209,18211],{"class":615,"line":553},[613,18196,619],{"class":618},[613,18198,623],{"class":622},[613,18200,627],{"class":626},[613,18202,630],{"class":626},[613,18204,633],{"class":618},[613,18206,636],{"class":618},[613,18208,640],{"class":639},[613,18210,636],{"class":618},[613,18212,645],{"class":618},[613,18214,18215,18217,18219,18221,18223,18225,18227,18229,18231],{"class":615,"line":554},[613,18216,653],{"class":652},[613,18218,3511],{"class":652},[613,18220,656],{"class":618},[613,18222,16859],{"class":659},[613,18224,669],{"class":618},[613,18226,672],{"class":652},[613,18228,675],{"class":618},[613,18230,700],{"class":639},[613,18232,681],{"class":618},[613,18234,18235,18237,18239,18241,18243,18245,18247,18249],{"class":615,"line":684},[613,18236,653],{"class":652},[613,18238,656],{"class":618},[613,18240,17854],{"class":659},[613,18242,669],{"class":618},[613,18244,672],{"class":652},[613,18246,675],{"class":618},[613,18248,678],{"class":639},[613,18250,681],{"class":618},[613,18252,18253],{"class":615,"line":705},[613,18254,718],{"emptyLinePlaceholder":570},[613,18256,18257,18259,18261,18263,18265,18267,18269,18271],{"class":615,"line":715},[613,18258,2463],{"class":626},[613,18260,16899],{"class":659},[613,18262,633],{"class":618},[613,18264,3567],{"class":2482},[613,18266,619],{"class":618},[613,18268,16908],{"class":1180},[613,18270,3720],{"class":618},[613,18272,6745],{"class":659},[613,18274,18275],{"class":615,"line":721},[613,18276,718],{"emptyLinePlaceholder":570},[613,18278,18279,18281,18283,18285,18287,18289,18291,18293],{"class":615,"line":731},[613,18280,10705],{"class":2482},[613,18282,16923],{"class":659},[613,18284,663],{"class":618},[613,18286,3143],{"class":618},[613,18288,16822],{"class":7049},[613,18290,3409],{"class":618},[613,18292,3746],{"class":626},[613,18294,1184],{"class":618},[613,18296,18297],{"class":615,"line":754},[613,18298,16940],{"class":1189},[613,18300,18301,18303,18305,18307,18309,18311,18313,18315,18317,18319,18321,18323],{"class":615,"line":766},[613,18302,16945],{"class":659},[613,18304,1126],{"class":618},[613,18306,1467],{"class":659},[613,18308,1126],{"class":618},[613,18310,16954],{"class":2482},[613,18312,2485],{"class":622},[613,18314,945],{"class":799},[613,18316,663],{"class":618},[613,18318,2553],{"class":799},[613,18320,663],{"class":618},[613,18322,2553],{"class":799},[613,18324,2496],{"class":622},[613,18326,18327,18329],{"class":615,"line":776},[613,18328,2476],{"class":618},[613,18330,2496],{"class":659},[613,18332,18333,18335,18337],{"class":615,"line":781},[613,18334,708],{"class":618},[613,18336,623],{"class":622},[613,18338,645],{"class":618},[613,18340,18341],{"class":615,"line":807},[613,18342,718],{"emptyLinePlaceholder":570},[613,18344,18345,18347,18349],{"class":615,"line":607},[613,18346,619],{"class":618},[613,18348,726],{"class":622},[613,18350,645],{"class":618},[613,18352,18353,18355],{"class":615,"line":830},[613,18354,734],{"class":618},[613,18356,18357],{"class":622},"FBXModel\n",[613,18359,18360,18362,18364,18366,18368],{"class":615,"line":841},[613,18361,17006],{"class":626},[613,18363,633],{"class":618},[613,18365,636],{"class":618},[613,18367,17013],{"class":639},[613,18369,3200],{"class":618},[613,18371,18372,18374,18376,18378,18381],{"class":615,"line":852},[613,18373,17020],{"class":626},[613,18375,633],{"class":618},[613,18377,636],{"class":618},[613,18379,18380],{"class":639},"https://raw.githubusercontent.com/Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx",[613,18382,3200],{"class":618},[613,18384,18385],{"class":615,"line":862},[613,18386,12671],{"class":618},[613,18388,18389,18391,18393],{"class":615,"line":608},[613,18390,708],{"class":618},[613,18392,726],{"class":622},[613,18394,645],{"class":618},[480,18396,902],{"id":901},[907,18398,18399,18409],{},[910,18400,18401],{},[913,18402,18403,18405,18407],{},[916,18404,918],{"align":977},[916,18406,921],{"align":977},[916,18408,924],{},[926,18410,18411,18423,18437],{},[913,18412,18413,18417,18419],{},[931,18414,18415],{"align":977},[594,18416,16546],{},[931,18418,17066],{"align":977},[931,18420,18421],{},[594,18422,1159],{},[913,18424,18425,18429,18433],{},[931,18426,18427],{"align":977},[594,18428,17107],{},[931,18430,17110,18431,17114],{"align":977},[594,18432,17113],{},[931,18434,18435],{},[594,18436,951],{},[913,18438,18439,18443,18447],{},[931,18440,18441],{"align":977},[594,18442,17125],{},[931,18444,17110,18445,17114],{"align":977},[594,18446,17130],{},[931,18448,18449],{},[594,18450,951],{},[1307,18452,17137],{},{"title":552,"searchDepth":553,"depth":554,"links":18454},[18455,18456,18457],{"id":600,"depth":554,"text":15},{"id":16813,"depth":554,"text":16814},{"id":901,"depth":554,"text":902},"A component based on useFBX to load models in TresJS scenes.",{},{"title":133,"description":18458},"UvFys7XTw8i8N0823KzOVRUmY9Q9yI0fymMbHpSGEfQ",{"id":18463,"title":137,"body":18464,"description":19110,"extension":567,"links":568,"meta":19111,"navigation":570,"path":138,"seo":19112,"stem":139,"__hash__":19113},"docs/2.api/3.loaders/5.use-texture.md",{"type":477,"value":18465,"toc":19104},[18466,18471,18482,18484,18638,18640,18692,18694,18750,18754,18761,19101],[2343,18467,18468],{},[18469,18470],"loaders-use-texture",{},[590,18472,18473,18474,18479,18480,15633],{},"A composable that allows you to load textures using the ",[1120,18475,18478],{"href":18476,"rel":18477},"https://threejs.org/docs/#api/en/loaders/TextureLoader",[1124],"Three.js texture loader"," into your ",[1681,18481,15632],{},[480,18483,15],{"id":600},[602,18485,18488],{"className":604,"code":18486,"highlights":18487,"language":609,"meta":552,"style":552},"\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",[554,705,776],[594,18489,18490,18510,18529,18533,18565,18573,18577,18585,18593,18601,18622,18630],{"__ignoreMap":552},[613,18491,18492,18494,18496,18498,18500,18502,18504,18506,18508],{"class":615,"line":553},[613,18493,619],{"class":618},[613,18495,623],{"class":622},[613,18497,627],{"class":626},[613,18499,630],{"class":626},[613,18501,633],{"class":618},[613,18503,636],{"class":618},[613,18505,640],{"class":639},[613,18507,636],{"class":618},[613,18509,645],{"class":618},[613,18511,18513,18515,18517,18519,18521,18523,18525,18527],{"class":18512,"line":554},[615,649],[613,18514,653],{"class":652},[613,18516,656],{"class":618},[613,18518,2407],{"class":659},[613,18520,669],{"class":618},[613,18522,672],{"class":652},[613,18524,675],{"class":618},[613,18526,678],{"class":639},[613,18528,681],{"class":618},[613,18530,18531],{"class":615,"line":684},[613,18532,718],{"emptyLinePlaceholder":570},[613,18534,18536,18538,18540,18542,18544,18547,18549,18552,18554,18557,18559,18561,18563],{"class":18535,"line":705},[615,649],[613,18537,2463],{"class":626},[613,18539,656],{"class":618},[613,18541,2468],{"class":622},[613,18543,1198],{"class":618},[613,18545,18546],{"class":659}," texture",[613,18548,663],{"class":618},[613,18550,18551],{"class":659}," isLoading",[613,18553,663],{"class":618},[613,18555,18556],{"class":659}," error ",[613,18558,2476],{"class":618},[613,18560,2479],{"class":618},[613,18562,2407],{"class":2482},[613,18564,15732],{"class":659},[613,18566,18567,18569,18571],{"class":615,"line":715},[613,18568,708],{"class":618},[613,18570,623],{"class":622},[613,18572,645],{"class":618},[613,18574,18575],{"class":615,"line":721},[613,18576,718],{"emptyLinePlaceholder":570},[613,18578,18579,18581,18583],{"class":615,"line":731},[613,18580,619],{"class":618},[613,18582,726],{"class":622},[613,18584,645],{"class":618},[613,18586,18587,18589,18591],{"class":615,"line":754},[613,18588,734],{"class":618},[613,18590,836],{"class":622},[613,18592,645],{"class":618},[613,18594,18595,18597,18599],{"class":615,"line":766},[613,18596,757],{"class":618},[613,18598,4083],{"class":622},[613,18600,763],{"class":618},[613,18602,18604,18606,18608,18610,18612,18614,18616,18618,18620],{"class":18603,"line":776},[615,649],[613,18605,757],{"class":618},[613,18607,2746],{"class":622},[613,18609,789],{"class":618},[613,18611,2801],{"class":626},[613,18613,633],{"class":618},[613,18615,636],{"class":618},[613,18617,2777],{"class":659},[613,18619,636],{"class":618},[613,18621,763],{"class":618},[613,18623,18624,18626,18628],{"class":615,"line":781},[613,18625,885],{"class":618},[613,18627,836],{"class":622},[613,18629,645],{"class":618},[613,18631,18632,18634,18636],{"class":615,"line":807},[613,18633,708],{"class":618},[613,18635,726],{"class":622},[613,18637,645],{"class":618},[480,18639,12698],{"id":16243},[907,18641,18642,18654],{},[910,18643,18644],{},[913,18645,18646,18648,18650,18652],{},[916,18647,8362],{"align":977},[916,18649,6179],{},[916,18651,924],{},[916,18653,921],{},[926,18655,18656,18673],{},[913,18657,18658,18662,18666,18670],{},[931,18659,18660],{"align":977},[1681,18661,16546],{},[931,18663,18664],{},[594,18665,3641],{},[931,18667,18668],{},[594,18669,1159],{},[931,18671,18672],{},"The path to the texture.",[913,18674,18675,18680,18685,18689],{},[931,18676,18677],{"align":977},[1681,18678,18679],{},"manager",[931,18681,18682],{},[594,18683,18684],{},"THREE.LoadingManager",[931,18686,18687],{},[594,18688,1159],{},[931,18690,18691],{},"The loading manager to use for the texture.",[480,18693,16142],{"id":16141},[907,18695,18696,18706],{},[910,18697,18698],{},[913,18699,18700,18702,18704],{},[916,18701,8362],{"align":977},[916,18703,6179],{"align":977},[916,18705,921],{"align":977},[926,18707,18708,18722,18735],{},[913,18709,18710,18714,18719],{},[931,18711,18712],{"align":977},[594,18713,13385],{},[931,18715,18716],{"align":977},[594,18717,18718],{},"Texture | null",[931,18720,18721],{"align":977},"The loaded texture",[913,18723,18724,18728,18732],{},[931,18725,18726],{"align":977},[594,18727,16203],{},[931,18729,18730],{"align":977},[594,18731,16208],{},[931,18733,18734],{"align":977},"Whether the texture is loading",[913,18736,18737,18742,18747],{},[931,18738,18739],{"align":977},[594,18740,18741],{},"error",[931,18743,18744],{"align":977},[594,18745,18746],{},"string | null",[931,18748,18749],{"align":977},"Error message if loading failed",[480,18751,18753],{"id":18752},"component-usage","Component Usage",[590,18755,18756,18757,18760],{},"You can also use the ",[594,18758,18759],{},"UseTexture"," component directly in your template:",[602,18762,18765],{"className":604,"code":18763,"highlights":18764,"language":609,"meta":552,"style":552},"\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",[554,852,862,608,882,892,2671,2741],[594,18766,18767,18787,18807,18811,18826,18830,18854,18877,18881,18885,18909,18932,18936,18944,18948,18956,18964,18986,19001,19019,19035,19040,19048,19056,19076,19084,19093],{"__ignoreMap":552},[613,18768,18769,18771,18773,18775,18777,18779,18781,18783,18785],{"class":615,"line":553},[613,18770,619],{"class":618},[613,18772,623],{"class":622},[613,18774,627],{"class":626},[613,18776,630],{"class":626},[613,18778,633],{"class":618},[613,18780,636],{"class":618},[613,18782,640],{"class":639},[613,18784,636],{"class":618},[613,18786,645],{"class":618},[613,18788,18790,18792,18794,18797,18799,18801,18803,18805],{"class":18789,"line":554},[615,649],[613,18791,653],{"class":652},[613,18793,656],{"class":618},[613,18795,18796],{"class":659}," UseTexture",[613,18798,669],{"class":618},[613,18800,672],{"class":652},[613,18802,675],{"class":618},[613,18804,678],{"class":639},[613,18806,681],{"class":618},[613,18808,18809],{"class":615,"line":684},[613,18810,718],{"emptyLinePlaceholder":570},[613,18812,18813,18815,18817,18819,18821,18824],{"class":615,"line":705},[613,18814,2463],{"class":626},[613,18816,15695],{"class":659},[613,18818,633],{"class":618},[613,18820,675],{"class":618},[613,18822,18823],{"class":639},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Color.jpg",[613,18825,681],{"class":618},[613,18827,18828],{"class":615,"line":715},[613,18829,718],{"emptyLinePlaceholder":570},[613,18831,18832,18834,18837,18839,18841,18843,18845,18848,18850,18852],{"class":615,"line":721},[613,18833,2463],{"class":626},[613,18835,18836],{"class":659}," handleLoaded ",[613,18838,633],{"class":618},[613,18840,3143],{"class":618},[613,18842,2777],{"class":7049},[613,18844,1198],{"class":618},[613,18846,18847],{"class":1180}," Texture",[613,18849,3409],{"class":618},[613,18851,3746],{"class":626},[613,18853,1184],{"class":618},[613,18855,18856,18858,18860,18862,18864,18866,18869,18871,18873,18875],{"class":615,"line":731},[613,18857,7065],{"class":659},[613,18859,1126],{"class":618},[613,18861,7070],{"class":2482},[613,18863,2485],{"class":622},[613,18865,2488],{"class":618},[613,18867,18868],{"class":639},"Loaded texture",[613,18870,2488],{"class":618},[613,18872,663],{"class":618},[613,18874,18546],{"class":659},[613,18876,2496],{"class":622},[613,18878,18879],{"class":615,"line":754},[613,18880,1305],{"class":618},[613,18882,18883],{"class":615,"line":766},[613,18884,718],{"emptyLinePlaceholder":570},[613,18886,18887,18889,18892,18894,18896,18898,18900,18903,18905,18907],{"class":615,"line":776},[613,18888,2463],{"class":626},[613,18890,18891],{"class":659}," handleError ",[613,18893,633],{"class":618},[613,18895,3143],{"class":618},[613,18897,18741],{"class":7049},[613,18899,1198],{"class":618},[613,18901,18902],{"class":1180}," unknown",[613,18904,3409],{"class":618},[613,18906,3746],{"class":626},[613,18908,1184],{"class":618},[613,18910,18911,18913,18915,18917,18919,18921,18923,18925,18927,18930],{"class":615,"line":781},[613,18912,7065],{"class":659},[613,18914,1126],{"class":618},[613,18916,18741],{"class":2482},[613,18918,2485],{"class":622},[613,18920,2488],{"class":618},[613,18922,18741],{"class":639},[613,18924,2488],{"class":618},[613,18926,663],{"class":618},[613,18928,18929],{"class":659}," error",[613,18931,2496],{"class":622},[613,18933,18934],{"class":615,"line":807},[613,18935,1305],{"class":618},[613,18937,18938,18940,18942],{"class":615,"line":607},[613,18939,708],{"class":618},[613,18941,623],{"class":622},[613,18943,645],{"class":618},[613,18945,18946],{"class":615,"line":830},[613,18947,718],{"emptyLinePlaceholder":570},[613,18949,18950,18952,18954],{"class":615,"line":841},[613,18951,619],{"class":618},[613,18953,726],{"class":622},[613,18955,645],{"class":618},[613,18957,18959,18961],{"class":18958,"line":852},[615,649],[613,18960,734],{"class":618},[613,18962,18963],{"class":622},"UseTexture\n",[613,18965,18967,18970,18972,18974,18976,18978,18980,18982,18984],{"class":18966,"line":862},[615,649],[613,18968,18969],{"class":626}," v-slot",[613,18971,633],{"class":618},[613,18973,636],{"class":618},[613,18975,12614],{"class":618},[613,18977,13385],{"class":622},[613,18979,12619],{"class":618},[613,18981,2777],{"class":659},[613,18983,669],{"class":618},[613,18985,3200],{"class":618},[613,18987,18989,18991,18993,18995,18997,18999],{"class":18988,"line":608},[615,649],[613,18990,5345],{"class":618},[613,18992,16546],{"class":626},[613,18994,633],{"class":618},[613,18996,636],{"class":618},[613,18998,16546],{"class":659},[613,19000,3200],{"class":618},[613,19002,19004,19007,19010,19012,19014,19017],{"class":19003,"line":882},[615,649],[613,19005,19006],{"class":618}," @",[613,19008,19009],{"class":626},"loaded",[613,19011,633],{"class":618},[613,19013,636],{"class":618},[613,19015,19016],{"class":659},"handleLoaded",[613,19018,3200],{"class":618},[613,19020,19022,19024,19026,19028,19030,19033],{"class":19021,"line":892},[615,649],[613,19023,19006],{"class":618},[613,19025,18741],{"class":626},[613,19027,633],{"class":618},[613,19029,636],{"class":618},[613,19031,19032],{"class":659},"handleError",[613,19034,3200],{"class":618},[613,19036,19038],{"class":19037,"line":2671},[615,649],[613,19039,5368],{"class":618},[613,19041,19042,19044,19046],{"class":615,"line":2680},[613,19043,757],{"class":618},[613,19045,836],{"class":622},[613,19047,645],{"class":618},[613,19049,19050,19052,19054],{"class":615,"line":2714},[613,19051,833],{"class":618},[613,19053,4083],{"class":622},[613,19055,763],{"class":618},[613,19057,19058,19060,19062,19064,19066,19068,19070,19072,19074],{"class":615,"line":2723},[613,19059,833],{"class":618},[613,19061,2746],{"class":622},[613,19063,789],{"class":618},[613,19065,2801],{"class":626},[613,19067,633],{"class":618},[613,19069,636],{"class":618},[613,19071,2777],{"class":659},[613,19073,636],{"class":618},[613,19075,763],{"class":618},[613,19077,19078,19080,19082],{"class":615,"line":2732},[613,19079,875],{"class":618},[613,19081,836],{"class":622},[613,19083,645],{"class":618},[613,19085,19087,19089,19091],{"class":19086,"line":2741},[615,649],[613,19088,885],{"class":618},[613,19090,18759],{"class":622},[613,19092,645],{"class":618},[613,19094,19095,19097,19099],{"class":615,"line":2763},[613,19096,708],{"class":618},[613,19098,726],{"class":622},[613,19100,645],{"class":618},[1307,19102,19103],{},"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":552,"searchDepth":553,"depth":554,"links":19105},[19106,19107,19108,19109],{"id":600,"depth":554,"text":15},{"id":16243,"depth":554,"text":12698},{"id":16141,"depth":554,"text":16142},{"id":18752,"depth":554,"text":18753},"A composable to load textures in TresJS scenes.",{},{"title":137,"description":19110},"eWpsm_0O2uskMZJ3Ht1Sb5JPGHO3WvELbtkQ2LoRQO0",{"id":19115,"title":141,"body":19116,"description":20626,"extension":567,"links":568,"meta":20627,"navigation":570,"path":142,"seo":20628,"stem":143,"__hash__":20629},"docs/2.api/3.loaders/6.use-textures.md",{"type":477,"value":19117,"toc":20617},[19118,19123,19131,19133,19399,19403,19406,20483,20487,20491,20526,20530,20584,20588,20614],[2343,19119,19120],{},[19121,19122],"loaders-use-textures",{},[590,19124,19125,19126,18479,19129,15633],{},"A composable that allows you to load multiple textures at once using the ",[1120,19127,18478],{"href":18476,"rel":19128},[1124],[1681,19130,15632],{},[480,19132,15],{"id":600},[602,19134,19137],{"className":604,"code":19135,"highlights":19136,"language":609,"meta":552,"style":552},"\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",[554,807,882,892,2671],[594,19138,19139,19159,19178,19182,19187,19199,19210,19221,19230,19235,19239,19244,19271,19279,19283,19291,19299,19307,19314,19335,19357,19379,19383,19391],{"__ignoreMap":552},[613,19140,19141,19143,19145,19147,19149,19151,19153,19155,19157],{"class":615,"line":553},[613,19142,619],{"class":618},[613,19144,623],{"class":622},[613,19146,627],{"class":626},[613,19148,630],{"class":626},[613,19150,633],{"class":618},[613,19152,636],{"class":618},[613,19154,640],{"class":639},[613,19156,636],{"class":618},[613,19158,645],{"class":618},[613,19160,19162,19164,19166,19168,19170,19172,19174,19176],{"class":19161,"line":554},[615,649],[613,19163,653],{"class":652},[613,19165,656],{"class":618},[613,19167,2907],{"class":659},[613,19169,669],{"class":618},[613,19171,672],{"class":652},[613,19173,675],{"class":618},[613,19175,678],{"class":639},[613,19177,681],{"class":618},[613,19179,19180],{"class":615,"line":684},[613,19181,718],{"emptyLinePlaceholder":570},[613,19183,19184],{"class":615,"line":705},[613,19185,19186],{"class":1189},"// Define an array of texture paths\n",[613,19188,19189,19191,19194,19196],{"class":615,"line":715},[613,19190,2463],{"class":626},[613,19192,19193],{"class":659}," texturePaths ",[613,19195,633],{"class":618},[613,19197,19198],{"class":659}," [\n",[613,19200,19201,19203,19206,19208],{"class":615,"line":721},[613,19202,2943],{"class":618},[613,19204,19205],{"class":639},"/textures/color.jpg",[613,19207,2488],{"class":618},[613,19209,2536],{"class":618},[613,19211,19212,19214,19217,19219],{"class":615,"line":731},[613,19213,2943],{"class":618},[613,19215,19216],{"class":639},"/textures/normal.jpg",[613,19218,2488],{"class":618},[613,19220,2536],{"class":618},[613,19222,19223,19225,19228],{"class":615,"line":754},[613,19224,2943],{"class":618},[613,19226,19227],{"class":639},"/textures/roughness.jpg",[613,19229,681],{"class":618},[613,19231,19232],{"class":615,"line":766},[613,19233,19234],{"class":659},"]\n",[613,19236,19237],{"class":615,"line":776},[613,19238,718],{"emptyLinePlaceholder":570},[613,19240,19241],{"class":615,"line":781},[613,19242,19243],{"class":1189},"// Load all textures at once\n",[613,19245,19247,19249,19251,19254,19256,19258,19260,19262,19264,19266,19268],{"class":19246,"line":807},[615,649],[613,19248,2463],{"class":626},[613,19250,656],{"class":618},[613,19252,19253],{"class":659}," textures",[613,19255,663],{"class":618},[613,19257,18551],{"class":659},[613,19259,663],{"class":618},[613,19261,18556],{"class":659},[613,19263,2476],{"class":618},[613,19265,2479],{"class":618},[613,19267,2907],{"class":2482},[613,19269,19270],{"class":659},"(texturePaths)\n",[613,19272,19273,19275,19277],{"class":615,"line":607},[613,19274,708],{"class":618},[613,19276,623],{"class":622},[613,19278,645],{"class":618},[613,19280,19281],{"class":615,"line":830},[613,19282,718],{"emptyLinePlaceholder":570},[613,19284,19285,19287,19289],{"class":615,"line":841},[613,19286,619],{"class":618},[613,19288,726],{"class":622},[613,19290,645],{"class":618},[613,19292,19293,19295,19297],{"class":615,"line":852},[613,19294,734],{"class":618},[613,19296,836],{"class":622},[613,19298,645],{"class":618},[613,19300,19301,19303,19305],{"class":615,"line":862},[613,19302,757],{"class":618},[613,19304,4083],{"class":622},[613,19306,763],{"class":618},[613,19308,19309,19311],{"class":615,"line":608},[613,19310,757],{"class":618},[613,19312,19313],{"class":622},"TresMeshStandardMaterial\n",[613,19315,19317,19319,19321,19323,19325,19327,19329,19331,19333],{"class":19316,"line":882},[615,649],[613,19318,10907],{"class":618},[613,19320,2801],{"class":626},[613,19322,633],{"class":618},[613,19324,636],{"class":618},[613,19326,3026],{"class":659},[613,19328,1474],{"class":618},[613,19330,945],{"class":799},[613,19332,1489],{"class":618},[613,19334,3200],{"class":618},[613,19336,19338,19340,19343,19345,19347,19349,19351,19353,19355],{"class":19337,"line":892},[615,649],[613,19339,10907],{"class":618},[613,19341,19342],{"class":626},"normal-map",[613,19344,633],{"class":618},[613,19346,636],{"class":618},[613,19348,3026],{"class":659},[613,19350,1474],{"class":618},[613,19352,1901],{"class":799},[613,19354,1489],{"class":618},[613,19356,3200],{"class":618},[613,19358,19360,19362,19365,19367,19369,19371,19373,19375,19377],{"class":19359,"line":2671},[615,649],[613,19361,10907],{"class":618},[613,19363,19364],{"class":626},"roughness-map",[613,19366,633],{"class":618},[613,19368,636],{"class":618},[613,19370,3026],{"class":659},[613,19372,1474],{"class":618},[613,19374,800],{"class":799},[613,19376,1489],{"class":618},[613,19378,3200],{"class":618},[613,19380,19381],{"class":615,"line":2680},[613,19382,16014],{"class":618},[613,19384,19385,19387,19389],{"class":615,"line":2714},[613,19386,885],{"class":618},[613,19388,836],{"class":622},[613,19390,645],{"class":618},[613,19392,19393,19395,19397],{"class":615,"line":2723},[613,19394,708],{"class":618},[613,19396,726],{"class":622},[613,19398,645],{"class":618},[480,19400,19402],{"id":19401},"pbr-textures-example","PBR Textures Example",[590,19404,19405],{},"Here's a more advanced example showing how to load and apply PBR (Physically Based Rendering) textures to a material:",[602,19407,19410],{"className":604,"code":19408,"filename":19409,"language":609,"meta":552,"style":552},"\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",[594,19411,19412,19432,19455,19486,19505,19509,19514,19555,19587,19618,19622,19627,19637,19648,19659,19670,19681,19690,19694,19698,19703,19727,19731,19736,19767,19804,19809,19828,19832,19837,19856,19875,19894,19913,19932,19936,19941,19955,19970,19985,19990,19997,20002,20008,20029,20035,20042,20047,20068,20081,20107,20112,20119,20128,20133,20142,20161,20171,20208,20217,20251,20260,20269,20290,20348,20405,20425,20456,20465,20474],{"__ignoreMap":552},[613,19413,19414,19416,19418,19420,19422,19424,19426,19428,19430],{"class":615,"line":553},[613,19415,619],{"class":618},[613,19417,623],{"class":622},[613,19419,627],{"class":626},[613,19421,630],{"class":626},[613,19423,633],{"class":618},[613,19425,636],{"class":618},[613,19427,640],{"class":639},[613,19429,636],{"class":618},[613,19431,645],{"class":618},[613,19433,19434,19436,19438,19440,19442,19445,19447,19449,19451,19453],{"class":615,"line":554},[613,19435,653],{"class":652},[613,19437,656],{"class":618},[613,19439,691],{"class":659},[613,19441,663],{"class":618},[613,19443,19444],{"class":659}," vLightHelper",[613,19446,669],{"class":618},[613,19448,672],{"class":652},[613,19450,675],{"class":618},[613,19452,700],{"class":639},[613,19454,681],{"class":618},[613,19456,19457,19459,19461,19464,19466,19468,19470,19472,19474,19476,19478,19480,19482,19484],{"class":615,"line":684},[613,19458,653],{"class":652},[613,19460,656],{"class":618},[613,19462,19463],{"class":659}," Environment",[613,19465,663],{"class":618},[613,19467,666],{"class":659},[613,19469,663],{"class":618},[613,19471,4486],{"class":659},[613,19473,663],{"class":618},[613,19475,2907],{"class":659},[613,19477,669],{"class":618},[613,19479,672],{"class":652},[613,19481,675],{"class":618},[613,19483,678],{"class":639},[613,19485,681],{"class":618},[613,19487,19488,19490,19492,19495,19497,19499,19501,19503],{"class":615,"line":705},[613,19489,653],{"class":652},[613,19491,656],{"class":618},[613,19493,19494],{"class":659}," MeshStandardMaterial",[613,19496,669],{"class":618},[613,19498,672],{"class":652},[613,19500,675],{"class":618},[613,19502,4785],{"class":639},[613,19504,681],{"class":618},[613,19506,19507],{"class":615,"line":715},[613,19508,718],{"emptyLinePlaceholder":570},[613,19510,19511],{"class":615,"line":721},[613,19512,19513],{"class":1189},"// Load the 3D model\n",[613,19515,19516,19518,19520,19522,19524,19526,19528,19530,19532,19534,19536,19539,19541,19543,19545,19547,19549,19551,19553],{"class":615,"line":731},[613,19517,2463],{"class":626},[613,19519,656],{"class":618},[613,19521,2468],{"class":622},[613,19523,1198],{"class":618},[613,19525,5188],{"class":659},[613,19527,2476],{"class":618},[613,19529,2479],{"class":618},[613,19531,4486],{"class":2482},[613,19533,2485],{"class":659},[613,19535,2488],{"class":618},[613,19537,19538],{"class":639},"/blender-cube-draco.glb",[613,19540,2488],{"class":618},[613,19542,663],{"class":618},[613,19544,656],{"class":618},[613,19546,4531],{"class":622},[613,19548,1198],{"class":618},[613,19550,4537],{"class":4536},[613,19552,669],{"class":618},[613,19554,2496],{"class":659},[613,19556,19557,19559,19562,19564,19566,19568,19570,19572,19574,19576,19578,19580,19582,19584],{"class":615,"line":754},[613,19558,2463],{"class":626},[613,19560,19561],{"class":659}," cube ",[613,19563,633],{"class":618},[613,19565,3558],{"class":2482},[613,19567,2485],{"class":659},[613,19569,3743],{"class":618},[613,19571,3746],{"class":626},[613,19573,5227],{"class":659},[613,19575,1126],{"class":618},[613,19577,3754],{"class":659},[613,19579,3757],{"class":618},[613,19581,4582],{"class":659},[613,19583,3757],{"class":618},[613,19585,19586],{"class":659},"BlenderCube)\n",[613,19588,19589,19591,19593,19595,19597,19599,19601,19603,19605,19607,19609,19611,19613,19615],{"class":615,"line":766},[613,19590,2463],{"class":626},[613,19592,16397],{"class":659},[613,19594,633],{"class":618},[613,19596,3558],{"class":2482},[613,19598,2485],{"class":659},[613,19600,3743],{"class":618},[613,19602,3746],{"class":626},[613,19604,5227],{"class":659},[613,19606,1126],{"class":618},[613,19608,3754],{"class":659},[613,19610,3757],{"class":618},[613,19612,504],{"class":659},[613,19614,3757],{"class":618},[613,19616,19617],{"class":659},"Material)\n",[613,19619,19620],{"class":615,"line":776},[613,19621,718],{"emptyLinePlaceholder":570},[613,19623,19624],{"class":615,"line":781},[613,19625,19626],{"class":1189},"// Define texture paths\n",[613,19628,19629,19631,19633,19635],{"class":615,"line":807},[613,19630,2463],{"class":626},[613,19632,19193],{"class":659},[613,19634,633],{"class":618},[613,19636,19198],{"class":659},[613,19638,19639,19641,19644,19646],{"class":615,"line":607},[613,19640,2943],{"class":618},[613,19642,19643],{"class":639},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Color.jpg",[613,19645,2488],{"class":618},[613,19647,2536],{"class":618},[613,19649,19650,19652,19655,19657],{"class":615,"line":830},[613,19651,2943],{"class":618},[613,19653,19654],{"class":639},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_NormalGL.jpg",[613,19656,2488],{"class":618},[613,19658,2536],{"class":618},[613,19660,19661,19663,19666,19668],{"class":615,"line":841},[613,19662,2943],{"class":618},[613,19664,19665],{"class":639},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Roughness.jpg",[613,19667,2488],{"class":618},[613,19669,2536],{"class":618},[613,19671,19672,19674,19677,19679],{"class":615,"line":852},[613,19673,2943],{"class":618},[613,19675,19676],{"class":639},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Metalness.jpg",[613,19678,2488],{"class":618},[613,19680,2536],{"class":618},[613,19682,19683,19685,19688],{"class":615,"line":862},[613,19684,2943],{"class":618},[613,19686,19687],{"class":639},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Displacement.jpg",[613,19689,681],{"class":618},[613,19691,19692],{"class":615,"line":608},[613,19693,19234],{"class":659},[613,19695,19696],{"class":615,"line":882},[613,19697,718],{"emptyLinePlaceholder":570},[613,19699,19700],{"class":615,"line":892},[613,19701,19702],{"class":1189},"// Load all PBR textures at once\n",[613,19704,19705,19707,19709,19711,19713,19715,19717,19719,19721,19723,19725],{"class":615,"line":2671},[613,19706,2463],{"class":626},[613,19708,656],{"class":618},[613,19710,19253],{"class":659},[613,19712,663],{"class":618},[613,19714,18551],{"class":659},[613,19716,663],{"class":618},[613,19718,18556],{"class":659},[613,19720,2476],{"class":618},[613,19722,2479],{"class":618},[613,19724,2907],{"class":2482},[613,19726,19270],{"class":659},[613,19728,19729],{"class":615,"line":2680},[613,19730,718],{"emptyLinePlaceholder":570},[613,19732,19733],{"class":615,"line":2714},[613,19734,19735],{"class":1189},"// Apply textures to material when loaded\n",[613,19737,19738,19740,19743,19745,19748,19750,19753,19756,19758,19760,19763,19765],{"class":615,"line":2723},[613,19739,10705],{"class":2482},[613,19741,19742],{"class":659},"([material",[613,19744,663],{"class":618},[613,19746,19747],{"class":659}," textures]",[613,19749,663],{"class":618},[613,19751,19752],{"class":618}," ([",[613,19754,19755],{"class":7049},"modelMaterial",[613,19757,663],{"class":618},[613,19759,19253],{"class":7049},[613,19761,19762],{"class":618},"])",[613,19764,3746],{"class":626},[613,19766,1184],{"class":618},[613,19768,19769,19772,19774,19776,19779,19781,19783,19785,19787,19790,19793,19796,19798,19800,19802],{"class":615,"line":2732},[613,19770,19771],{"class":652}," if",[613,19773,3143],{"class":622},[613,19775,19755],{"class":659},[613,19777,19778],{"class":618}," &&",[613,19780,19253],{"class":659},[613,19782,19778],{"class":618},[613,19784,19253],{"class":659},[613,19786,1126],{"class":618},[613,19788,19789],{"class":659},"length",[613,19791,19792],{"class":618}," ===",[613,19794,19795],{"class":659}," texturePaths",[613,19797,1126],{"class":618},[613,19799,19789],{"class":659},[613,19801,4893],{"class":622},[613,19803,3329],{"class":618},[613,19805,19806],{"class":615,"line":2741},[613,19807,19808],{"class":1189}," // Cast to MeshStandardMaterial to access PBR properties\n",[613,19810,19811,19814,19817,19819,19822,19825],{"class":615,"line":2763},[613,19812,19813],{"class":626}," const",[613,19815,19816],{"class":659}," pbrMaterial",[613,19818,2479],{"class":618},[613,19820,19821],{"class":659}," modelMaterial",[613,19823,19824],{"class":652}," as",[613,19826,19827],{"class":1180}," MeshStandardMaterial\n",[613,19829,19830],{"class":615,"line":2814},[613,19831,718],{"emptyLinePlaceholder":570},[613,19833,19834],{"class":615,"line":2823},[613,19835,19836],{"class":1189}," // Apply textures\n",[613,19838,19839,19842,19844,19846,19848,19850,19852,19854],{"class":615,"line":2832},[613,19840,19841],{"class":659}," pbrMaterial",[613,19843,1126],{"class":618},[613,19845,2801],{"class":659},[613,19847,2479],{"class":618},[613,19849,19253],{"class":659},[613,19851,1474],{"class":622},[613,19853,945],{"class":799},[613,19855,19234],{"class":622},[613,19857,19858,19860,19862,19865,19867,19869,19871,19873],{"class":615,"line":4034},[613,19859,19841],{"class":659},[613,19861,1126],{"class":618},[613,19863,19864],{"class":659},"normalMap",[613,19866,2479],{"class":618},[613,19868,19253],{"class":659},[613,19870,1474],{"class":622},[613,19872,1901],{"class":799},[613,19874,19234],{"class":622},[613,19876,19877,19879,19881,19884,19886,19888,19890,19892],{"class":615,"line":4078},[613,19878,19841],{"class":659},[613,19880,1126],{"class":618},[613,19882,19883],{"class":659},"roughnessMap",[613,19885,2479],{"class":618},[613,19887,19253],{"class":659},[613,19889,1474],{"class":622},[613,19891,800],{"class":799},[613,19893,19234],{"class":622},[613,19895,19896,19898,19900,19903,19905,19907,19909,19911],{"class":615,"line":4105},[613,19897,19841],{"class":659},[613,19899,1126],{"class":618},[613,19901,19902],{"class":659},"metalnessMap",[613,19904,2479],{"class":618},[613,19906,19253],{"class":659},[613,19908,1474],{"class":622},[613,19910,2705],{"class":799},[613,19912,19234],{"class":622},[613,19914,19915,19917,19919,19922,19924,19926,19928,19930],{"class":615,"line":4124},[613,19916,19841],{"class":659},[613,19918,1126],{"class":618},[613,19920,19921],{"class":659},"displacementMap",[613,19923,2479],{"class":618},[613,19925,19253],{"class":659},[613,19927,1474],{"class":622},[613,19929,3876],{"class":799},[613,19931,19234],{"class":622},[613,19933,19934],{"class":615,"line":4165},[613,19935,718],{"emptyLinePlaceholder":570},[613,19937,19938],{"class":615,"line":4174},[613,19939,19940],{"class":1189}," // Set material properties\n",[613,19942,19943,19945,19947,19950,19952],{"class":615,"line":4183},[613,19944,19841],{"class":659},[613,19946,1126],{"class":618},[613,19948,19949],{"class":659},"displacementScale",[613,19951,2479],{"class":618},[613,19953,19954],{"class":799}," 0\n",[613,19956,19958,19960,19962,19965,19967],{"class":615,"line":19957},38,[613,19959,19841],{"class":659},[613,19961,1126],{"class":618},[613,19963,19964],{"class":659},"metalness",[613,19966,2479],{"class":618},[613,19968,19969],{"class":799}," 0.8\n",[613,19971,19973,19975,19977,19980,19982],{"class":615,"line":19972},39,[613,19974,19841],{"class":659},[613,19976,1126],{"class":618},[613,19978,19979],{"class":659},"roughness",[613,19981,2479],{"class":618},[613,19983,19984],{"class":799}," 0.2\n",[613,19986,19988],{"class":615,"line":19987},40,[613,19989,8082],{"class":618},[613,19991,19993,19995],{"class":615,"line":19992},41,[613,19994,2476],{"class":618},[613,19996,2496],{"class":659},[613,19998,20000],{"class":615,"line":19999},42,[613,20001,718],{"emptyLinePlaceholder":570},[613,20003,20005],{"class":615,"line":20004},43,[613,20006,20007],{"class":1189},"// Handle loading state and errors\n",[613,20009,20011,20013,20016,20018,20020,20023,20025,20027],{"class":615,"line":20010},44,[613,20012,10705],{"class":2482},[613,20014,20015],{"class":659},"(isLoading",[613,20017,663],{"class":618},[613,20019,3143],{"class":618},[613,20021,20022],{"class":7049},"_loading",[613,20024,3409],{"class":618},[613,20026,3746],{"class":626},[613,20028,1184],{"class":618},[613,20030,20032],{"class":615,"line":20031},45,[613,20033,20034],{"class":1189}," // Handle loading state\n",[613,20036,20038,20040],{"class":615,"line":20037},46,[613,20039,2476],{"class":618},[613,20041,2496],{"class":659},[613,20043,20045],{"class":615,"line":20044},47,[613,20046,718],{"emptyLinePlaceholder":570},[613,20048,20050,20052,20055,20057,20059,20062,20064,20066],{"class":615,"line":20049},48,[613,20051,10705],{"class":2482},[613,20053,20054],{"class":659},"(error",[613,20056,663],{"class":618},[613,20058,3143],{"class":618},[613,20060,20061],{"class":7049},"errs",[613,20063,3409],{"class":618},[613,20065,3746],{"class":626},[613,20067,1184],{"class":618},[613,20069,20071,20073,20075,20077,20079],{"class":615,"line":20070},49,[613,20072,19771],{"class":652},[613,20074,3143],{"class":622},[613,20076,20061],{"class":659},[613,20078,4893],{"class":622},[613,20080,3329],{"class":618},[613,20082,20084,20087,20089,20091,20093,20095,20098,20100,20102,20105],{"class":615,"line":20083},50,[613,20085,20086],{"class":659}," console",[613,20088,1126],{"class":618},[613,20090,18741],{"class":2482},[613,20092,2485],{"class":622},[613,20094,2488],{"class":618},[613,20096,20097],{"class":639},"Error loading textures:",[613,20099,2488],{"class":618},[613,20101,663],{"class":618},[613,20103,20104],{"class":659}," errs",[613,20106,2496],{"class":622},[613,20108,20110],{"class":615,"line":20109},51,[613,20111,8082],{"class":618},[613,20113,20115,20117],{"class":615,"line":20114},52,[613,20116,2476],{"class":618},[613,20118,2496],{"class":659},[613,20120,20122,20124,20126],{"class":615,"line":20121},53,[613,20123,708],{"class":618},[613,20125,623],{"class":622},[613,20127,645],{"class":618},[613,20129,20131],{"class":615,"line":20130},54,[613,20132,718],{"emptyLinePlaceholder":570},[613,20134,20136,20138,20140],{"class":615,"line":20135},55,[613,20137,619],{"class":618},[613,20139,726],{"class":622},[613,20141,645],{"class":618},[613,20143,20145,20147,20149,20151,20153,20155,20157,20159],{"class":615,"line":20144},56,[613,20146,734],{"class":618},[613,20148,737],{"class":622},[613,20150,740],{"class":626},[613,20152,633],{"class":618},[613,20154,636],{"class":618},[613,20156,9119],{"class":639},[613,20158,636],{"class":618},[613,20160,645],{"class":618},[613,20162,20164,20166,20169],{"class":615,"line":20163},57,[613,20165,757],{"class":618},[613,20167,20168],{"class":622},"Suspense",[613,20170,645],{"class":618},[613,20172,20174,20176,20178,20181,20183,20185,20188,20190,20193,20195,20198,20200,20202,20204,20206],{"class":615,"line":20173},58,[613,20175,833],{"class":618},[613,20177,351],{"class":622},[613,20179,20180],{"class":626}," preset",[613,20182,633],{"class":618},[613,20184,636],{"class":618},[613,20186,20187],{"class":639},"studio",[613,20189,636],{"class":618},[613,20191,20192],{"class":626}," background",[613,20194,789],{"class":618},[613,20196,20197],{"class":626},"blur",[613,20199,633],{"class":618},[613,20201,636],{"class":618},[613,20203,1901],{"class":799},[613,20205,636],{"class":618},[613,20207,763],{"class":618},[613,20209,20211,20213,20215],{"class":615,"line":20210},59,[613,20212,875],{"class":618},[613,20214,20168],{"class":622},[613,20216,645],{"class":618},[613,20218,20220,20222,20224,20226,20228,20230,20232,20234,20237,20239,20241,20243,20245,20247,20249],{"class":615,"line":20219},60,[613,20221,757],{"class":618},[613,20223,760],{"class":622},[613,20225,789],{"class":618},[613,20227,1467],{"class":626},[613,20229,633],{"class":618},[613,20231,636],{"class":618},[613,20233,1474],{"class":618},[613,20235,20236],{"class":799},"8",[613,20238,1479],{"class":618},[613,20240,20236],{"class":799},[613,20242,1479],{"class":618},[613,20244,20236],{"class":799},[613,20246,1489],{"class":618},[613,20248,636],{"class":618},[613,20250,763],{"class":618},[613,20252,20254,20256,20258],{"class":615,"line":20253},61,[613,20255,757],{"class":618},[613,20257,771],{"class":622},[613,20259,763],{"class":618},[613,20261,20263,20265,20267],{"class":615,"line":20262},62,[613,20264,757],{"class":618},[613,20266,8313],{"class":622},[613,20268,763],{"class":618},[613,20270,20272,20274,20276,20278,20280,20282,20284,20286,20288],{"class":615,"line":20271},63,[613,20273,757],{"class":618},[613,20275,8758],{"class":622},[613,20277,789],{"class":618},[613,20279,1894],{"class":626},[613,20281,633],{"class":618},[613,20283,636],{"class":618},[613,20285,800],{"class":799},[613,20287,636],{"class":618},[613,20289,763],{"class":618},[613,20291,20293,20295,20297,20300,20302,20304,20306,20308,20310,20312,20314,20316,20318,20320,20322,20324,20326,20328,20330,20332,20334,20336,20338,20340,20342,20344,20346],{"class":615,"line":20292},64,[613,20294,757],{"class":618},[613,20296,8779],{"class":622},[613,20298,20299],{"class":626}," v-light-helper",[613,20301,789],{"class":618},[613,20303,1467],{"class":626},[613,20305,633],{"class":618},[613,20307,636],{"class":618},[613,20309,1474],{"class":618},[613,20311,7668],{"class":799},[613,20313,1479],{"class":618},[613,20315,7668],{"class":799},[613,20317,1479],{"class":618},[613,20319,7668],{"class":799},[613,20321,1489],{"class":618},[613,20323,636],{"class":618},[613,20325,789],{"class":618},[613,20327,1894],{"class":626},[613,20329,633],{"class":618},[613,20331,636],{"class":618},[613,20333,1521],{"class":799},[613,20335,636],{"class":618},[613,20337,2749],{"class":626},[613,20339,633],{"class":618},[613,20341,636],{"class":618},[613,20343,7796],{"class":639},[613,20345,636],{"class":618},[613,20347,763],{"class":618},[613,20349,20351,20353,20355,20357,20359,20361,20363,20365,20367,20369,20371,20373,20375,20377,20379,20381,20383,20385,20387,20389,20391,20393,20395,20397,20399,20401,20403],{"class":615,"line":20350},65,[613,20352,757],{"class":618},[613,20354,8779],{"class":622},[613,20356,20299],{"class":626},[613,20358,789],{"class":618},[613,20360,1467],{"class":626},[613,20362,633],{"class":618},[613,20364,636],{"class":618},[613,20366,3923],{"class":618},[613,20368,7668],{"class":799},[613,20370,1479],{"class":618},[613,20372,800],{"class":799},[613,20374,1479],{"class":618},[613,20376,800],{"class":799},[613,20378,1489],{"class":618},[613,20380,636],{"class":618},[613,20382,789],{"class":618},[613,20384,1894],{"class":626},[613,20386,633],{"class":618},[613,20388,636],{"class":618},[613,20390,1521],{"class":799},[613,20392,636],{"class":618},[613,20394,2749],{"class":626},[613,20396,633],{"class":618},[613,20398,636],{"class":618},[613,20400,5954],{"class":639},[613,20402,636],{"class":618},[613,20404,763],{"class":618},[613,20406,20408,20410,20412,20415,20417,20419,20421,20423],{"class":615,"line":20407},66,[613,20409,757],{"class":618},[613,20411,9150],{"class":622},[613,20413,20414],{"class":626}," position-y",[613,20416,633],{"class":618},[613,20418,636],{"class":618},[613,20420,800],{"class":639},[613,20422,636],{"class":618},[613,20424,645],{"class":618},[613,20426,20428,20430,20432,20434,20436,20438,20440,20442,20444,20446,20448,20450,20452,20454],{"class":615,"line":20427},67,[613,20429,833],{"class":618},[613,20431,4573],{"class":622},[613,20433,2770],{"class":652},[613,20435,633],{"class":618},[613,20437,636],{"class":618},[613,20439,3910],{"class":659},[613,20441,636],{"class":618},[613,20443,789],{"class":618},[613,20445,4594],{"class":626},[613,20447,633],{"class":618},[613,20449,636],{"class":618},[613,20451,3910],{"class":659},[613,20453,636],{"class":618},[613,20455,763],{"class":618},[613,20457,20459,20461,20463],{"class":615,"line":20458},68,[613,20460,875],{"class":618},[613,20462,9150],{"class":622},[613,20464,645],{"class":618},[613,20466,20468,20470,20472],{"class":615,"line":20467},69,[613,20469,885],{"class":618},[613,20471,737],{"class":622},[613,20473,645],{"class":618},[613,20475,20477,20479,20481],{"class":615,"line":20476},70,[613,20478,708],{"class":618},[613,20480,726],{"class":622},[613,20482,645],{"class":618},[480,20484,20486],{"id":20485},"api","API",[4191,20488,20490],{"id":20489},"parameters","Parameters",[907,20492,20493,20505],{},[910,20494,20495],{},[913,20496,20497,20499,20501,20503],{},[916,20498,8362],{"align":977},[916,20500,6179],{},[916,20502,924],{},[916,20504,921],{},[926,20506,20507],{},[913,20508,20509,20514,20519,20523],{},[931,20510,20511],{"align":977},[1681,20512,20513],{},"paths",[931,20515,20516],{},[594,20517,20518],{},"string[]",[931,20520,20521],{},[594,20522,1159],{},[931,20524,20525],{},"Array of paths to the textures.",[4191,20527,20529],{"id":20528},"returns","Returns",[907,20531,20532,20542],{},[910,20533,20534],{},[913,20535,20536,20538,20540],{},[916,20537,8362],{"align":977},[916,20539,6179],{},[916,20541,921],{},[926,20543,20544,20557,20570],{},[913,20545,20546,20550,20554],{},[931,20547,20548],{"align":977},[1681,20549,3026],{},[931,20551,20552],{},[594,20553,5806],{},[931,20555,20556],{},"Array of loaded textures.",[913,20558,20559,20563,20567],{},[931,20560,20561],{"align":977},[1681,20562,16203],{},[931,20564,20565],{},[594,20566,16208],{},[931,20568,20569],{},"Whether any textures are still loading.",[913,20571,20572,20576,20581],{},[931,20573,20574],{"align":977},[1681,20575,18741],{},[931,20577,20578],{},[594,20579,20580],{},"Error[] | null",[931,20582,20583],{},"Array of errors if any occurred during loading.",[480,20585,20587],{"id":20586},"benefits","Benefits",[2261,20589,20590,20596,20602,20608],{},[2264,20591,20592,20595],{},[1681,20593,20594],{},"Simplified API",": Load multiple textures with a single function call",[2264,20597,20598,20601],{},[1681,20599,20600],{},"Consolidated loading state",": Track loading state for all textures at once",[2264,20603,20604,20607],{},[1681,20605,20606],{},"Unified error handling",": Collect and report errors from all texture loads",[2264,20609,20610,20613],{},[1681,20611,20612],{},"Type safety",": Proper TypeScript typing throughout the implementation",[1307,20615,20616],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":552,"searchDepth":553,"depth":554,"links":20618},[20619,20620,20621,20625],{"id":600,"depth":554,"text":15},{"id":19401,"depth":554,"text":19402},{"id":20485,"depth":554,"text":20486,"children":20622},[20623,20624],{"id":20489,"depth":684,"text":20490},{"id":20528,"depth":684,"text":20529},{"id":20586,"depth":554,"text":20587},"A composable to load multiple textures efficiently in TresJS scenes.",{},{"title":141,"description":20626},"9FTfBPclSGZMDwzt-akBsJF1ppNDXZK3MP6nddxg3dg",{"id":20631,"title":145,"body":20632,"description":23632,"extension":567,"links":568,"meta":23633,"navigation":570,"path":146,"seo":23634,"stem":147,"__hash__":23635},"docs/2.api/3.loaders/7.use-svg.md",{"type":477,"value":20633,"toc":23607},[20634,20639,20652,20656,20661,20663,21186,21191,21205,21209,21212,21324,21326,21395,21397,21505,21509,21514,21570,21574,21911,21915,21920,21926,21931,21937,21953,21959,21974,22021,22024,22029,22040,22045,22048,22093,22097,22102,22105,22110,22119,22164,22168,22173,22185,22190,22232,22236,22239,22367,22371,22375,22699,22703,23024,23028,23035,23248,23250,23416,23420,23427,23430,23434,23444,23448,23472,23480,23493,23497,23524,23528,23548,23558,23566,23583,23590,23604],[2343,20635,20636],{},[20637,20638],"loaders-use-svg",{},[590,20640,20641,20642,20644,20645,20647,20648,20651],{},"Load and display SVG elements in your ",[1681,20643,15632],{}," scene. This guide covers both the ",[594,20646,145],{}," composable for advanced use cases and the ",[594,20649,20650],{},"SVG"," component for simple declarative rendering.",[480,20653,20655],{"id":20654},"usesvg-composable","useSVG Composable",[590,20657,2843,20658,20660],{},[594,20659,145],{}," composable provides direct access to processed SVG layers, giving you full control over the resulting geometries and materials.",[4191,20662,15],{"id":600},[15637,20664,20665,20993],{},[602,20666,20669],{"className":604,"code":20667,"filename":15642,"highlights":20668,"language":609,"meta":552,"style":552},"\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",[554,715,721,731,754],[594,20670,20671,20691,20711,20715,20731,20767,20779,20809,20816,20824,20828,20836,20857,20863,20888,20910,20928,20943,20947,20969,20977,20985],{"__ignoreMap":552},[613,20672,20673,20675,20677,20679,20681,20683,20685,20687,20689],{"class":615,"line":553},[613,20674,619],{"class":618},[613,20676,623],{"class":622},[613,20678,627],{"class":626},[613,20680,630],{"class":626},[613,20682,633],{"class":618},[613,20684,636],{"class":618},[613,20686,640],{"class":639},[613,20688,636],{"class":618},[613,20690,645],{"class":618},[613,20692,20694,20696,20698,20701,20703,20705,20707,20709],{"class":20693,"line":554},[615,649],[613,20695,653],{"class":652},[613,20697,656],{"class":618},[613,20699,20700],{"class":659}," useSVG",[613,20702,669],{"class":618},[613,20704,672],{"class":652},[613,20706,675],{"class":618},[613,20708,678],{"class":639},[613,20710,681],{"class":618},[613,20712,20713],{"class":615,"line":684},[613,20714,718],{"emptyLinePlaceholder":570},[613,20716,20717,20719,20722,20724,20726,20729],{"class":615,"line":705},[613,20718,2463],{"class":626},[613,20720,20721],{"class":659}," svgPath ",[613,20723,633],{"class":618},[613,20725,675],{"class":618},[613,20727,20728],{"class":639},"./logo.svg",[613,20730,681],{"class":618},[613,20732,20734,20736,20738,20740,20742,20745,20747,20749,20751,20754,20756,20758,20760,20763,20765],{"class":20733,"line":715},[615,649],[613,20735,2463],{"class":626},[613,20737,656],{"class":618},[613,20739,2468],{"class":659},[613,20741,663],{"class":618},[613,20743,20744],{"class":659}," layers",[613,20746,663],{"class":618},[613,20748,18551],{"class":659},[613,20750,663],{"class":618},[613,20752,20753],{"class":659}," dispose ",[613,20755,2476],{"class":618},[613,20757,2479],{"class":618},[613,20759,20700],{"class":2482},[613,20761,20762],{"class":659},"(svgPath",[613,20764,663],{"class":618},[613,20766,1184],{"class":618},[613,20768,20770,20773,20775,20777],{"class":20769,"line":721},[615,649],[613,20771,20772],{"class":622}," skipFills",[613,20774,1198],{"class":618},[613,20776,6936],{"class":4536},[613,20778,2536],{"class":618},[613,20780,20782,20785,20787,20789,20792,20794,20796,20798,20801,20803,20806],{"class":20781,"line":731},[615,649],[613,20783,20784],{"class":622}," fillMaterial",[613,20786,1198],{"class":618},[613,20788,656],{"class":618},[613,20790,20791],{"class":622}," transparent",[613,20793,1198],{"class":618},[613,20795,4537],{"class":4536},[613,20797,663],{"class":618},[613,20799,20800],{"class":622}," opacity",[613,20802,1198],{"class":618},[613,20804,20805],{"class":799}," 0.8",[613,20807,20808],{"class":618}," }\n",[613,20810,20812,20814],{"class":20811,"line":754},[615,649],[613,20813,2476],{"class":618},[613,20815,2496],{"class":659},[613,20817,20818,20820,20822],{"class":615,"line":766},[613,20819,708],{"class":618},[613,20821,623],{"class":622},[613,20823,645],{"class":618},[613,20825,20826],{"class":615,"line":776},[613,20827,718],{"emptyLinePlaceholder":570},[613,20829,20830,20832,20834],{"class":615,"line":781},[613,20831,619],{"class":618},[613,20833,726],{"class":622},[613,20835,645],{"class":618},[613,20837,20838,20840,20842,20844,20846,20848,20851,20853,20855],{"class":615,"line":807},[613,20839,734],{"class":618},[613,20841,9150],{"class":622},[613,20843,2770],{"class":652},[613,20845,633],{"class":618},[613,20847,636],{"class":618},[613,20849,20850],{"class":618},"!",[613,20852,16203],{"class":659},[613,20854,636],{"class":618},[613,20856,645],{"class":618},[613,20858,20859,20861],{"class":615,"line":607},[613,20860,757],{"class":618},[613,20862,5305],{"class":622},[613,20864,20865,20868,20870,20872,20874,20877,20879,20881,20883,20886],{"class":615,"line":830},[613,20866,20867],{"class":652}," v-for",[613,20869,633],{"class":618},[613,20871,636],{"class":618},[613,20873,2485],{"class":618},[613,20875,20876],{"class":659},"layer",[613,20878,1479],{"class":618},[613,20880,8230],{"class":659},[613,20882,8233],{"class":618},[613,20884,20885],{"class":659},"layers",[613,20887,3200],{"class":618},[613,20889,20890,20892,20894,20896,20899,20902,20905,20907],{"class":615,"line":841},[613,20891,10907],{"class":618},[613,20893,8246],{"class":626},[613,20895,633],{"class":618},[613,20897,20898],{"class":618},"\"`",[613,20900,20901],{"class":639},"layer-",[613,20903,20904],{"class":618},"${",[613,20906,8230],{"class":659},[613,20908,20909],{"class":618},"}`\"\n",[613,20911,20912,20914,20916,20918,20920,20922,20924,20926],{"class":615,"line":852},[613,20913,10907],{"class":618},[613,20915,5325],{"class":626},[613,20917,633],{"class":618},[613,20919,636],{"class":618},[613,20921,20876],{"class":659},[613,20923,1126],{"class":618},[613,20925,5325],{"class":659},[613,20927,3200],{"class":618},[613,20929,20930,20932,20935,20937,20939,20941],{"class":615,"line":862},[613,20931,10907],{"class":618},[613,20933,20934],{"class":626},"render-order",[613,20936,633],{"class":618},[613,20938,636],{"class":618},[613,20940,8230],{"class":659},[613,20942,3200],{"class":618},[613,20944,20945],{"class":615,"line":608},[613,20946,10927],{"class":618},[613,20948,20949,20951,20953,20955,20957,20959,20961,20963,20965,20967],{"class":615,"line":882},[613,20950,833],{"class":618},[613,20952,7697],{"class":622},[613,20954,9347],{"class":626},[613,20956,633],{"class":618},[613,20958,636],{"class":618},[613,20960,20876],{"class":659},[613,20962,1126],{"class":618},[613,20964,5393],{"class":659},[613,20966,636],{"class":618},[613,20968,763],{"class":618},[613,20970,20971,20973,20975],{"class":615,"line":892},[613,20972,875],{"class":618},[613,20974,836],{"class":622},[613,20976,645],{"class":618},[613,20978,20979,20981,20983],{"class":615,"line":2671},[613,20980,885],{"class":618},[613,20982,9150],{"class":622},[613,20984,645],{"class":618},[613,20986,20987,20989,20991],{"class":615,"line":2680},[613,20988,708],{"class":618},[613,20990,726],{"class":622},[613,20992,645],{"class":618},[602,20994,20996],{"className":604,"code":20995,"filename":15799,"language":609,"meta":552,"style":552},"\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",[594,20997,20998,21018,21036,21054,21068,21076,21080,21088,21106,21138,21146,21154,21162,21170,21178],{"__ignoreMap":552},[613,20999,21000,21002,21004,21006,21008,21010,21012,21014,21016],{"class":615,"line":553},[613,21001,619],{"class":618},[613,21003,623],{"class":622},[613,21005,627],{"class":626},[613,21007,630],{"class":626},[613,21009,633],{"class":618},[613,21011,636],{"class":618},[613,21013,640],{"class":639},[613,21015,636],{"class":618},[613,21017,645],{"class":618},[613,21019,21020,21022,21024,21026,21028,21030,21032,21034],{"class":615,"line":554},[613,21021,653],{"class":652},[613,21023,656],{"class":618},[613,21025,666],{"class":659},[613,21027,669],{"class":618},[613,21029,672],{"class":652},[613,21031,675],{"class":618},[613,21033,678],{"class":639},[613,21035,681],{"class":618},[613,21037,21038,21040,21042,21044,21046,21048,21050,21052],{"class":615,"line":684},[613,21039,653],{"class":652},[613,21041,656],{"class":618},[613,21043,691],{"class":659},[613,21045,669],{"class":618},[613,21047,672],{"class":652},[613,21049,675],{"class":618},[613,21051,700],{"class":639},[613,21053,681],{"class":618},[613,21055,21056,21058,21060,21062,21064,21066],{"class":615,"line":705},[613,21057,653],{"class":652},[613,21059,15864],{"class":659},[613,21061,15867],{"class":652},[613,21063,675],{"class":618},[613,21065,15872],{"class":639},[613,21067,681],{"class":618},[613,21069,21070,21072,21074],{"class":615,"line":715},[613,21071,708],{"class":618},[613,21073,623],{"class":622},[613,21075,645],{"class":618},[613,21077,21078],{"class":615,"line":721},[613,21079,718],{"emptyLinePlaceholder":570},[613,21081,21082,21084,21086],{"class":615,"line":731},[613,21083,619],{"class":618},[613,21085,726],{"class":622},[613,21087,645],{"class":618},[613,21089,21090,21092,21094,21096,21098,21100,21102,21104],{"class":615,"line":754},[613,21091,734],{"class":618},[613,21093,737],{"class":622},[613,21095,740],{"class":626},[613,21097,633],{"class":618},[613,21099,636],{"class":618},[613,21101,11536],{"class":639},[613,21103,636],{"class":618},[613,21105,645],{"class":618},[613,21107,21108,21110,21112,21114,21116,21118,21120,21122,21124,21126,21128,21130,21132,21134,21136],{"class":615,"line":766},[613,21109,757],{"class":618},[613,21111,760],{"class":622},[613,21113,789],{"class":618},[613,21115,1467],{"class":626},[613,21117,633],{"class":618},[613,21119,636],{"class":618},[613,21121,1474],{"class":618},[613,21123,945],{"class":799},[613,21125,1479],{"class":618},[613,21127,800],{"class":799},[613,21129,1479],{"class":618},[613,21131,1486],{"class":799},[613,21133,1489],{"class":618},[613,21135,636],{"class":618},[613,21137,763],{"class":618},[613,21139,21140,21142,21144],{"class":615,"line":776},[613,21141,757],{"class":618},[613,21143,771],{"class":622},[613,21145,763],{"class":618},[613,21147,21148,21150,21152],{"class":615,"line":781},[613,21149,757],{"class":618},[613,21151,15960],{"class":622},[613,21153,763],{"class":618},[613,21155,21156,21158,21160],{"class":615,"line":807},[613,21157,757],{"class":618},[613,21159,8758],{"class":622},[613,21161,763],{"class":618},[613,21163,21164,21166,21168],{"class":615,"line":607},[613,21165,757],{"class":618},[613,21167,8779],{"class":622},[613,21169,763],{"class":618},[613,21171,21172,21174,21176],{"class":615,"line":830},[613,21173,885],{"class":618},[613,21175,737],{"class":622},[613,21177,645],{"class":618},[613,21179,21180,21182,21184],{"class":615,"line":841},[613,21181,708],{"class":618},[613,21183,726],{"class":622},[613,21185,645],{"class":618},[590,21187,2843,21188,21190],{},[594,21189,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:",[2261,21192,21193,21196,21199,21202],{},[2264,21194,21195],{},"Manually control layer rendering",[2264,21197,21198],{},"Apply custom animations to individual layers",[2264,21200,21201],{},"Access geometry data programmatically",[2264,21203,21204],{},"Implement complex material logic",[4191,21206,21208],{"id":21207},"svg-data-sources","SVG Data Sources",[590,21210,21211],{},"The composable accepts both file paths and inline SVG strings:",[602,21213,21215],{"className":1166,"code":21214,"language":640,"meta":552,"style":552},"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",[594,21216,21217,21235,21239,21244,21270,21274,21279,21294,21299,21307],{"__ignoreMap":552},[613,21218,21219,21221,21223,21225,21227,21229,21231,21233],{"class":615,"line":553},[613,21220,653],{"class":652},[613,21222,656],{"class":618},[613,21224,20700],{"class":659},[613,21226,669],{"class":618},[613,21228,672],{"class":652},[613,21230,675],{"class":618},[613,21232,678],{"class":639},[613,21234,681],{"class":618},[613,21236,21237],{"class":615,"line":554},[613,21238,718],{"emptyLinePlaceholder":570},[613,21240,21241],{"class":615,"line":684},[613,21242,21243],{"class":1189},"// From file\n",[613,21245,21246,21248,21250,21253,21255,21257,21259,21261,21263,21266,21268],{"class":615,"line":705},[613,21247,2463],{"class":626},[613,21249,656],{"class":618},[613,21251,21252],{"class":659}," layers ",[613,21254,2476],{"class":618},[613,21256,2479],{"class":618},[613,21258,20700],{"class":2482},[613,21260,2485],{"class":659},[613,21262,2488],{"class":618},[613,21264,21265],{"class":639},"/path/to/file.svg",[613,21267,2488],{"class":618},[613,21269,2496],{"class":659},[613,21271,21272],{"class":615,"line":715},[613,21273,718],{"emptyLinePlaceholder":570},[613,21275,21276],{"class":615,"line":721},[613,21277,21278],{"class":1189},"// Inline SVG string\n",[613,21280,21281,21283,21286,21288,21291],{"class":615,"line":731},[613,21282,2463],{"class":626},[613,21284,21285],{"class":659}," svgString ",[613,21287,633],{"class":618},[613,21289,21290],{"class":618}," `",[613,21292,21293],{"class":639},"\u003Csvg viewBox=\"0 0 100 100\">\n",[613,21295,21296],{"class":615,"line":754},[613,21297,21298],{"class":639}," \u003Ccircle cx=\"50\" cy=\"50\" r=\"40\" fill=\"red\" />\n",[613,21300,21301,21304],{"class":615,"line":766},[613,21302,21303],{"class":639},"\u003C/svg>",[613,21305,21306],{"class":618},"`\n",[613,21308,21309,21311,21313,21315,21317,21319,21321],{"class":615,"line":776},[613,21310,2463],{"class":626},[613,21312,656],{"class":618},[613,21314,21252],{"class":659},[613,21316,2476],{"class":618},[613,21318,2479],{"class":618},[613,21320,20700],{"class":2482},[613,21322,21323],{"class":659},"(svgString)\n",[4191,21325,16142],{"id":16141},[907,21327,21328,21338],{},[910,21329,21330],{},[913,21331,21332,21334,21336],{},[916,21333,8362],{"align":977},[916,21335,6179],{},[916,21337,921],{},[926,21339,21340,21354,21368,21381],{},[913,21341,21342,21346,21351],{},[931,21343,21344],{"align":977},[1681,21345,13385],{},[931,21347,21348],{},[594,21349,21350],{},"SVGResult",[931,21352,21353],{},"The loaded SVG state from SVGLoader",[913,21355,21356,21360,21365],{},[931,21357,21358],{"align":977},[1681,21359,20885],{},[931,21361,21362],{},[594,21363,21364],{},"SVGLayer[]",[931,21366,21367],{},"Computed array of processed geometries and materials",[913,21369,21370,21374,21378],{},[931,21371,21372],{"align":977},[1681,21373,16203],{},[931,21375,21376],{},[594,21377,16208],{},[931,21379,21380],{},"Whether the SVG is currently loading",[913,21382,21383,21388,21392],{},[931,21384,21385],{"align":977},[1681,21386,21387],{},"dispose",[931,21389,21390],{},[594,21391,6231],{},[931,21393,21394],{},"Function to dispose of all geometries",[4191,21396,12698],{"id":16243},[907,21398,21399,21411],{},[910,21400,21401],{},[913,21402,21403,21405,21407,21409],{},[916,21404,8362],{"align":977},[916,21406,6179],{},[916,21408,924],{},[916,21410,921],{},[926,21412,21413,21431,21449,21468,21486],{},[913,21414,21415,21420,21424,21428],{},[931,21416,21417],{"align":977},[1681,21418,21419],{},"skipStrokes",[931,21421,21422],{},[594,21423,16208],{},[931,21425,21426],{},[594,21427,951],{},[931,21429,21430],{},"Whether to skip rendering strokes",[913,21432,21433,21438,21442,21446],{},[931,21434,21435],{"align":977},[1681,21436,21437],{},"skipFills",[931,21439,21440],{},[594,21441,16208],{},[931,21443,21444],{},[594,21445,951],{},[931,21447,21448],{},"Whether to skip rendering fills",[913,21450,21451,21456,21461,21465],{},[931,21452,21453],{"align":977},[1681,21454,21455],{},"fillMaterial",[931,21457,21458],{},[594,21459,21460],{},"MeshBasicMaterialParameters",[931,21462,21463],{},[594,21464,6335],{},[931,21466,21467],{},"Material properties for fill layers",[913,21469,21470,21475,21479,21483],{},[931,21471,21472],{"align":977},[1681,21473,21474],{},"strokeMaterial",[931,21476,21477],{},[594,21478,21460],{},[931,21480,21481],{},[594,21482,6335],{},[931,21484,21485],{},"Material properties for stroke layers",[913,21487,21488,21492,21497,21502],{},[931,21489,21490],{"align":977},[1681,21491,11572],{},[931,21493,21494],{},[594,21495,21496],{},"'renderOrder' | 'flat' | 'offsetZ' | number",[931,21498,21499],{},[594,21500,21501],{},"'renderOrder'",[931,21503,21504],{},"How layers should be rendered in 3D space",[4191,21506,21508],{"id":21507},"working-with-layers","Working with Layers",[590,21510,2843,21511,21513],{},[594,21512,20885],{}," computed property returns an array of processed SVG elements, each containing:",[602,21515,21517],{"className":1166,"code":21516,"language":640,"meta":552,"style":552},"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",[594,21518,21519,21528,21541,21554,21566],{"__ignoreMap":552},[613,21520,21521,21523,21526],{"class":615,"line":553},[613,21522,5536],{"class":626},[613,21524,21525],{"class":1180}," SVGLayer",[613,21527,1184],{"class":618},[613,21529,21530,21533,21535,21538],{"class":615,"line":554},[613,21531,21532],{"class":622}," geometry",[613,21534,1198],{"class":618},[613,21536,21537],{"class":1180}," BufferGeometry",[613,21539,21540],{"class":1189}," // Three.js geometry for the layer\n",[613,21542,21543,21546,21548,21551],{"class":615,"line":684},[613,21544,21545],{"class":622}," material",[613,21547,1198],{"class":618},[613,21549,21550],{"class":1180}," MeshBasicMaterialParameters",[613,21552,21553],{"class":1189}," // Material properties\n",[613,21555,21556,21559,21561,21563],{"class":615,"line":705},[613,21557,21558],{"class":622}," isStroke",[613,21560,1198],{"class":618},[613,21562,5667],{"class":1180},[613,21564,21565],{"class":1189}," // Whether this layer is a stroke or fill\n",[613,21567,21568],{"class":615,"line":715},[613,21569,1305],{"class":618},[6801,21571,21573],{"id":21572},"accessing-individual-layers","Accessing Individual Layers",[602,21575,21578],{"className":604,"code":21576,"highlights":21577,"language":609,"meta":552,"style":552},"\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",[554,705],[594,21579,21580,21600,21619,21623,21649,21653,21658,21690,21738,21742,21750,21754,21762,21770,21776,21798,21812,21830,21834,21841,21858,21883,21887,21895,21903],{"__ignoreMap":552},[613,21581,21582,21584,21586,21588,21590,21592,21594,21596,21598],{"class":615,"line":553},[613,21583,619],{"class":618},[613,21585,623],{"class":622},[613,21587,627],{"class":626},[613,21589,630],{"class":626},[613,21591,633],{"class":618},[613,21593,636],{"class":618},[613,21595,640],{"class":639},[613,21597,636],{"class":618},[613,21599,645],{"class":618},[613,21601,21603,21605,21607,21609,21611,21613,21615,21617],{"class":21602,"line":554},[615,649],[613,21604,653],{"class":652},[613,21606,656],{"class":618},[613,21608,20700],{"class":659},[613,21610,669],{"class":618},[613,21612,672],{"class":652},[613,21614,675],{"class":618},[613,21616,678],{"class":639},[613,21618,681],{"class":618},[613,21620,21621],{"class":615,"line":684},[613,21622,718],{"emptyLinePlaceholder":570},[613,21624,21626,21628,21630,21632,21634,21636,21638,21640,21642,21645,21647],{"class":21625,"line":705},[615,649],[613,21627,2463],{"class":626},[613,21629,656],{"class":618},[613,21631,21252],{"class":659},[613,21633,2476],{"class":618},[613,21635,2479],{"class":618},[613,21637,20700],{"class":2482},[613,21639,2485],{"class":659},[613,21641,2488],{"class":618},[613,21643,21644],{"class":639},"/complex-icon.svg",[613,21646,2488],{"class":618},[613,21648,2496],{"class":659},[613,21650,21651],{"class":615,"line":715},[613,21652,718],{"emptyLinePlaceholder":570},[613,21654,21655],{"class":615,"line":721},[613,21656,21657],{"class":1189},"// Apply different materials based on layer type\n",[613,21659,21660,21662,21665,21667,21669,21671,21673,21675,21677,21680,21682,21684,21686,21688],{"class":615,"line":731},[613,21661,2463],{"class":626},[613,21663,21664],{"class":659}," getFillColor ",[613,21666,633],{"class":618},[613,21668,3143],{"class":618},[613,21670,20876],{"class":7049},[613,21672,1198],{"class":618},[613,21674,21525],{"class":1180},[613,21676,663],{"class":618},[613,21678,21679],{"class":7049}," index",[613,21681,1198],{"class":618},[613,21683,5570],{"class":1180},[613,21685,3409],{"class":618},[613,21687,3746],{"class":626},[613,21689,1184],{"class":618},[613,21691,21692,21695,21698,21700,21703,21706,21708,21711,21713,21715,21717,21720,21722,21725,21728,21731,21733,21736],{"class":615,"line":754},[613,21693,21694],{"class":652}," return",[613,21696,21697],{"class":659}," layer",[613,21699,1126],{"class":618},[613,21701,21702],{"class":659},"isStroke",[613,21704,21705],{"class":618}," ?",[613,21707,675],{"class":618},[613,21709,21710],{"class":639},"#000000",[613,21712,2488],{"class":618},[613,21714,789],{"class":618},[613,21716,21290],{"class":618},[613,21718,21719],{"class":639},"hsl(",[613,21721,20904],{"class":618},[613,21723,21724],{"class":659},"index ",[613,21726,21727],{"class":618},"*",[613,21729,21730],{"class":799}," 30",[613,21732,2476],{"class":618},[613,21734,21735],{"class":639},", 70%, 50%)",[613,21737,21306],{"class":618},[613,21739,21740],{"class":615,"line":766},[613,21741,1305],{"class":618},[613,21743,21744,21746,21748],{"class":615,"line":776},[613,21745,708],{"class":618},[613,21747,623],{"class":622},[613,21749,645],{"class":618},[613,21751,21752],{"class":615,"line":781},[613,21753,718],{"emptyLinePlaceholder":570},[613,21755,21756,21758,21760],{"class":615,"line":807},[613,21757,619],{"class":618},[613,21759,726],{"class":622},[613,21761,645],{"class":618},[613,21763,21764,21766,21768],{"class":615,"line":607},[613,21765,734],{"class":618},[613,21767,9150],{"class":622},[613,21769,645],{"class":618},[613,21771,21772,21774],{"class":615,"line":830},[613,21773,757],{"class":618},[613,21775,5305],{"class":622},[613,21777,21778,21780,21782,21784,21786,21788,21790,21792,21794,21796],{"class":615,"line":841},[613,21779,20867],{"class":652},[613,21781,633],{"class":618},[613,21783,636],{"class":618},[613,21785,2485],{"class":618},[613,21787,20876],{"class":659},[613,21789,1479],{"class":618},[613,21791,8230],{"class":659},[613,21793,8233],{"class":618},[613,21795,20885],{"class":659},[613,21797,3200],{"class":618},[613,21799,21800,21802,21804,21806,21808,21810],{"class":615,"line":852},[613,21801,10907],{"class":618},[613,21803,8246],{"class":626},[613,21805,633],{"class":618},[613,21807,636],{"class":618},[613,21809,8230],{"class":659},[613,21811,3200],{"class":618},[613,21813,21814,21816,21818,21820,21822,21824,21826,21828],{"class":615,"line":862},[613,21815,10907],{"class":618},[613,21817,5325],{"class":626},[613,21819,633],{"class":618},[613,21821,636],{"class":618},[613,21823,20876],{"class":659},[613,21825,1126],{"class":618},[613,21827,5325],{"class":659},[613,21829,3200],{"class":618},[613,21831,21832],{"class":615,"line":608},[613,21833,10927],{"class":618},[613,21835,21836,21838],{"class":615,"line":882},[613,21837,833],{"class":618},[613,21839,21840],{"class":622},"TresMeshBasicMaterial\n",[613,21842,21843,21846,21848,21850,21852,21854,21856],{"class":615,"line":892},[613,21844,21845],{"class":626}," v-bind",[613,21847,633],{"class":618},[613,21849,636],{"class":618},[613,21851,20876],{"class":659},[613,21853,1126],{"class":618},[613,21855,5393],{"class":659},[613,21857,3200],{"class":618},[613,21859,21860,21862,21864,21866,21868,21871,21873,21875,21877,21879,21881],{"class":615,"line":2671},[613,21861,8243],{"class":618},[613,21863,7772],{"class":626},[613,21865,633],{"class":618},[613,21867,636],{"class":618},[613,21869,21870],{"class":2482},"getFillColor",[613,21872,2485],{"class":618},[613,21874,20876],{"class":659},[613,21876,1479],{"class":618},[613,21878,8230],{"class":659},[613,21880,3409],{"class":618},[613,21882,3200],{"class":618},[613,21884,21885],{"class":615,"line":2680},[613,21886,8297],{"class":618},[613,21888,21889,21891,21893],{"class":615,"line":2714},[613,21890,875],{"class":618},[613,21892,836],{"class":622},[613,21894,645],{"class":618},[613,21896,21897,21899,21901],{"class":615,"line":2723},[613,21898,885],{"class":618},[613,21900,9150],{"class":622},[613,21902,645],{"class":618},[613,21904,21905,21907,21909],{"class":615,"line":2732},[613,21906,708],{"class":618},[613,21908,726],{"class":622},[613,21910,645],{"class":618},[4191,21912,21914],{"id":21913},"depth-handling","Depth Handling",[590,21916,2843,21917,21919],{},[594,21918,11572],{}," option controls how SVG layers are rendered in 3D space. It accepts the following values:",[6801,21921,21923,21925],{"id":21922},"renderorder-default",[594,21924,21501],{}," (Default)",[590,21927,21928],{},[1681,21929,21930],{},"Use case: Lone SVGs or applications that don't rely on stacked SVGs",[590,21932,21933,21934,21936],{},"This is the default ",[594,21935,11572],{}," option.",[590,21938,21939,21940,2298,21942,21944,21945,21952],{},"This value sets the materials' ",[594,21941,9561],{},[594,21943,951],{}," and increments the mesh layers ",[1120,21946,21949],{"href":21947,"rel":21948},"https://threejs.org/docs/?q=mesh#api/en/core/Object3D.renderOrder",[1124],[594,21950,21951],{},"renderOrder",". This makes the SVG layers render dependably regardless of perspective.",[590,21954,21955,21958],{},[1681,21956,21957],{},"Disadvantage",": Scene objects may render out of order.",[590,21960,21961,21962,21967,21968,21973],{},"SVG layers with higher ",[1120,21963,21965],{"href":21947,"rel":21964},[1124],[594,21966,21951],{}," will be rendered after (i.e., sometimes \"on top of\") other objects in the scene graph with a lower ",[1120,21969,21971],{"href":21947,"rel":21970},[1124],[594,21972,21951],{},". Depending on their settings, those other objects may render behind the SVG, even if they are closer to the camera.",[602,21975,21977],{"className":1166,"code":21976,"language":640,"meta":552,"style":552},"const { layers } = useSVG('/icon.svg', { depth: 'renderOrder' })\n",[594,21978,21979],{"__ignoreMap":552},[613,21980,21981,21983,21985,21987,21989,21991,21993,21995,21997,22000,22002,22004,22006,22009,22011,22013,22015,22017,22019],{"class":615,"line":553},[613,21982,2463],{"class":626},[613,21984,656],{"class":618},[613,21986,21252],{"class":659},[613,21988,2476],{"class":618},[613,21990,2479],{"class":618},[613,21992,20700],{"class":2482},[613,21994,2485],{"class":659},[613,21996,2488],{"class":618},[613,21998,21999],{"class":639},"/icon.svg",[613,22001,2488],{"class":618},[613,22003,663],{"class":618},[613,22005,656],{"class":618},[613,22007,22008],{"class":622}," depth",[613,22010,1198],{"class":618},[613,22012,675],{"class":618},[613,22014,21951],{"class":639},[613,22016,2488],{"class":618},[613,22018,669],{"class":618},[613,22020,2496],{"class":659},[6801,22022,22023],{"id":22023},"flat",[590,22025,22026],{},[1681,22027,22028],{},"Use case: simple SVGs",[590,22030,22031,22032,2298,22038,1126],{},"This option sets the materials ",[1120,22033,22036],{"href":22034,"rel":22035},"https://threejs.org/docs/?q=mesh#api/en/materials/Material.depthWrite",[1124],[594,22037,9561],{},[594,22039,951],{},[590,22041,22042,22044],{},[1681,22043,21957],{},": SVG layers may render out of order.",[590,22046,22047],{},"Overlapping layers in an SVG may be drawn out of order, depending on viewing perspective.",[602,22049,22051],{"className":1166,"code":22050,"language":640,"meta":552,"style":552},"const { layers } = useSVG('/icon.svg', { depth: 'flat' })\n",[594,22052,22053],{"__ignoreMap":552},[613,22054,22055,22057,22059,22061,22063,22065,22067,22069,22071,22073,22075,22077,22079,22081,22083,22085,22087,22089,22091],{"class":615,"line":553},[613,22056,2463],{"class":626},[613,22058,656],{"class":618},[613,22060,21252],{"class":659},[613,22062,2476],{"class":618},[613,22064,2479],{"class":618},[613,22066,20700],{"class":2482},[613,22068,2485],{"class":659},[613,22070,2488],{"class":618},[613,22072,21999],{"class":639},[613,22074,2488],{"class":618},[613,22076,663],{"class":618},[613,22078,656],{"class":618},[613,22080,22008],{"class":622},[613,22082,1198],{"class":618},[613,22084,675],{"class":618},[613,22086,22023],{"class":639},[613,22088,2488],{"class":618},[613,22090,669],{"class":618},[613,22092,2496],{"class":659},[6801,22094,22096],{"id":22095},"offsetz","offsetZ",[590,22098,22099],{},[1681,22100,22101],{},"Use case: unscaled SVGs seen from the front",[590,22103,22104],{},"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\".",[590,22106,22107,22109],{},[1681,22108,21957],{},": \"Bottom\" of the \"stack\" is visible; layers may z-fight.",[590,22111,22112,22113,22118],{},"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,22114,22117],{"href":22115,"rel":22116},"https://en.wikipedia.org/wiki/Z-fighting",[1124],"z-fight",", particularly if the SVG is scaled down.",[602,22120,22122],{"className":1166,"code":22121,"language":640,"meta":552,"style":552},"const { layers } = useSVG('/icon.svg', { depth: 'offsetZ' })\n",[594,22123,22124],{"__ignoreMap":552},[613,22125,22126,22128,22130,22132,22134,22136,22138,22140,22142,22144,22146,22148,22150,22152,22154,22156,22158,22160,22162],{"class":615,"line":553},[613,22127,2463],{"class":626},[613,22129,656],{"class":618},[613,22131,21252],{"class":659},[613,22133,2476],{"class":618},[613,22135,2479],{"class":618},[613,22137,20700],{"class":2482},[613,22139,2485],{"class":659},[613,22141,2488],{"class":618},[613,22143,21999],{"class":639},[613,22145,2488],{"class":618},[613,22147,663],{"class":618},[613,22149,656],{"class":618},[613,22151,22008],{"class":622},[613,22153,1198],{"class":618},[613,22155,675],{"class":618},[613,22157,22096],{"class":639},[613,22159,2488],{"class":618},[613,22161,669],{"class":618},[613,22163,2496],{"class":659},[6801,22165,22166],{"id":5565},[594,22167,5565],{},[590,22169,22170],{},[1681,22171,22172],{},"Use case: SVGs seen from the front",[590,22174,22175,22176,22179,22180,22184],{},"This is the same as ",[594,22177,22178],{},"'offsetZ'"," but allows you to specify how much space is added between each layer, in order to eliminate ",[1120,22181,22183],{"href":22115,"rel":22182},[1124],"z-fighting",". For most use cases, this should be a value greater than 0.025 and less than 1.",[590,22186,22187,22189],{},[1681,22188,21957],{},": \"Bottom\" of the \"stack\" is visible.",[602,22191,22193],{"className":1166,"code":22192,"language":640,"meta":552,"style":552},"const { layers } = useSVG('/icon.svg', { depth: 0.1 })\n",[594,22194,22195],{"__ignoreMap":552},[613,22196,22197,22199,22201,22203,22205,22207,22209,22211,22213,22215,22217,22219,22221,22223,22225,22228,22230],{"class":615,"line":553},[613,22198,2463],{"class":626},[613,22200,656],{"class":618},[613,22202,21252],{"class":659},[613,22204,2476],{"class":618},[613,22206,2479],{"class":618},[613,22208,20700],{"class":2482},[613,22210,2485],{"class":659},[613,22212,2488],{"class":618},[613,22214,21999],{"class":639},[613,22216,2488],{"class":618},[613,22218,663],{"class":618},[613,22220,656],{"class":618},[613,22222,22008],{"class":622},[613,22224,1198],{"class":618},[613,22226,22227],{"class":799}," 0.1",[613,22229,669],{"class":618},[613,22231,2496],{"class":659},[4191,22233,22235],{"id":22234},"memory-management","Memory Management",[590,22237,22238],{},"Always dispose of geometries when the component unmounts:",[602,22240,22242],{"className":604,"code":22241,"language":609,"meta":552,"style":552},"\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",[594,22243,22244,22264,22282,22301,22305,22329,22333,22346,22353,22359],{"__ignoreMap":552},[613,22245,22246,22248,22250,22252,22254,22256,22258,22260,22262],{"class":615,"line":553},[613,22247,619],{"class":618},[613,22249,623],{"class":622},[613,22251,627],{"class":626},[613,22253,630],{"class":626},[613,22255,633],{"class":618},[613,22257,636],{"class":618},[613,22259,640],{"class":639},[613,22261,636],{"class":618},[613,22263,645],{"class":618},[613,22265,22266,22268,22270,22272,22274,22276,22278,22280],{"class":615,"line":554},[613,22267,653],{"class":652},[613,22269,656],{"class":618},[613,22271,20700],{"class":659},[613,22273,669],{"class":618},[613,22275,672],{"class":652},[613,22277,675],{"class":618},[613,22279,678],{"class":639},[613,22281,681],{"class":618},[613,22283,22284,22286,22288,22291,22293,22295,22297,22299],{"class":615,"line":684},[613,22285,653],{"class":652},[613,22287,656],{"class":618},[613,22289,22290],{"class":659}," onUnmounted",[613,22292,669],{"class":618},[613,22294,672],{"class":652},[613,22296,675],{"class":618},[613,22298,609],{"class":639},[613,22300,681],{"class":618},[613,22302,22303],{"class":615,"line":705},[613,22304,718],{"emptyLinePlaceholder":570},[613,22306,22307,22309,22311,22313,22315,22317,22319,22321,22323,22325,22327],{"class":615,"line":715},[613,22308,2463],{"class":626},[613,22310,656],{"class":618},[613,22312,20753],{"class":659},[613,22314,2476],{"class":618},[613,22316,2479],{"class":618},[613,22318,20700],{"class":2482},[613,22320,2485],{"class":659},[613,22322,2488],{"class":618},[613,22324,21999],{"class":639},[613,22326,2488],{"class":618},[613,22328,2496],{"class":659},[613,22330,22331],{"class":615,"line":721},[613,22332,718],{"emptyLinePlaceholder":570},[613,22334,22335,22338,22340,22342,22344],{"class":615,"line":731},[613,22336,22337],{"class":2482},"onUnmounted",[613,22339,2485],{"class":659},[613,22341,3743],{"class":618},[613,22343,3746],{"class":626},[613,22345,1184],{"class":618},[613,22347,22348,22351],{"class":615,"line":754},[613,22349,22350],{"class":2482}," dispose",[613,22352,6745],{"class":622},[613,22354,22355,22357],{"class":615,"line":766},[613,22356,2476],{"class":618},[613,22358,2496],{"class":659},[613,22360,22361,22363,22365],{"class":615,"line":776},[613,22362,708],{"class":618},[613,22364,623],{"class":622},[613,22366,645],{"class":618},[4191,22368,22370],{"id":22369},"advanced-usage","Advanced Usage",[6801,22372,22374],{"id":22373},"conditional-layer-rendering","Conditional Layer Rendering",[602,22376,22378],{"className":604,"code":22377,"language":609,"meta":552,"style":552},"\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",[594,22379,22380,22400,22418,22436,22440,22457,22482,22486,22504,22514,22525,22556,22560,22568,22572,22580,22588,22594,22617,22631,22649,22653,22675,22683,22691],{"__ignoreMap":552},[613,22381,22382,22384,22386,22388,22390,22392,22394,22396,22398],{"class":615,"line":553},[613,22383,619],{"class":618},[613,22385,623],{"class":622},[613,22387,627],{"class":626},[613,22389,630],{"class":626},[613,22391,633],{"class":618},[613,22393,636],{"class":618},[613,22395,640],{"class":639},[613,22397,636],{"class":618},[613,22399,645],{"class":618},[613,22401,22402,22404,22406,22408,22410,22412,22414,22416],{"class":615,"line":554},[613,22403,653],{"class":652},[613,22405,656],{"class":618},[613,22407,20700],{"class":659},[613,22409,669],{"class":618},[613,22411,672],{"class":652},[613,22413,675],{"class":618},[613,22415,678],{"class":639},[613,22417,681],{"class":618},[613,22419,22420,22422,22424,22426,22428,22430,22432,22434],{"class":615,"line":684},[613,22421,653],{"class":652},[613,22423,656],{"class":618},[613,22425,3558],{"class":659},[613,22427,669],{"class":618},[613,22429,672],{"class":652},[613,22431,675],{"class":618},[613,22433,609],{"class":639},[613,22435,681],{"class":618},[613,22437,22438],{"class":615,"line":705},[613,22439,718],{"emptyLinePlaceholder":570},[613,22441,22442,22444,22447,22449,22451,22453,22455],{"class":615,"line":715},[613,22443,2463],{"class":626},[613,22445,22446],{"class":659}," showDetails ",[613,22448,633],{"class":618},[613,22450,3975],{"class":2482},[613,22452,2485],{"class":659},[613,22454,941],{"class":4536},[613,22456,2496],{"class":659},[613,22458,22459,22461,22463,22465,22467,22469,22471,22473,22475,22478,22480],{"class":615,"line":721},[613,22460,2463],{"class":626},[613,22462,656],{"class":618},[613,22464,21252],{"class":659},[613,22466,2476],{"class":618},[613,22468,2479],{"class":618},[613,22470,20700],{"class":2482},[613,22472,2485],{"class":659},[613,22474,2488],{"class":618},[613,22476,22477],{"class":639},"/detailed-icon.svg",[613,22479,2488],{"class":618},[613,22481,2496],{"class":659},[613,22483,22484],{"class":615,"line":731},[613,22485,718],{"emptyLinePlaceholder":570},[613,22487,22488,22490,22493,22495,22497,22499,22501],{"class":615,"line":754},[613,22489,2463],{"class":626},[613,22491,22492],{"class":659}," visibleLayers ",[613,22494,633],{"class":618},[613,22496,3558],{"class":2482},[613,22498,2485],{"class":659},[613,22500,3743],{"class":618},[613,22502,22503],{"class":626}," =>\n",[613,22505,22506,22509,22511],{"class":615,"line":766},[613,22507,22508],{"class":659}," showDetails",[613,22510,1126],{"class":618},[613,22512,22513],{"class":659},"value\n",[613,22515,22516,22519,22521,22523],{"class":615,"line":776},[613,22517,22518],{"class":618}," ?",[613,22520,20744],{"class":659},[613,22522,1126],{"class":618},[613,22524,22513],{"class":659},[613,22526,22527,22529,22531,22533,22535,22537,22540,22542,22544,22546,22549,22551,22553],{"class":615,"line":781},[613,22528,5345],{"class":618},[613,22530,20744],{"class":659},[613,22532,1126],{"class":618},[613,22534,3754],{"class":659},[613,22536,1126],{"class":618},[613,22538,22539],{"class":2482},"filter",[613,22541,2485],{"class":659},[613,22543,20876],{"class":7049},[613,22545,3746],{"class":626},[613,22547,22548],{"class":618}," !",[613,22550,20876],{"class":659},[613,22552,1126],{"class":618},[613,22554,22555],{"class":659},"isStroke)\n",[613,22557,22558],{"class":615,"line":807},[613,22559,2496],{"class":659},[613,22561,22562,22564,22566],{"class":615,"line":607},[613,22563,708],{"class":618},[613,22565,623],{"class":622},[613,22567,645],{"class":618},[613,22569,22570],{"class":615,"line":830},[613,22571,718],{"emptyLinePlaceholder":570},[613,22573,22574,22576,22578],{"class":615,"line":841},[613,22575,619],{"class":618},[613,22577,726],{"class":622},[613,22579,645],{"class":618},[613,22581,22582,22584,22586],{"class":615,"line":852},[613,22583,734],{"class":618},[613,22585,9150],{"class":622},[613,22587,645],{"class":618},[613,22589,22590,22592],{"class":615,"line":862},[613,22591,757],{"class":618},[613,22593,5305],{"class":622},[613,22595,22596,22598,22600,22602,22604,22606,22608,22610,22612,22615],{"class":615,"line":608},[613,22597,20867],{"class":652},[613,22599,633],{"class":618},[613,22601,636],{"class":618},[613,22603,2485],{"class":618},[613,22605,20876],{"class":659},[613,22607,1479],{"class":618},[613,22609,8230],{"class":659},[613,22611,8233],{"class":618},[613,22613,22614],{"class":659},"visibleLayers",[613,22616,3200],{"class":618},[613,22618,22619,22621,22623,22625,22627,22629],{"class":615,"line":882},[613,22620,10907],{"class":618},[613,22622,8246],{"class":626},[613,22624,633],{"class":618},[613,22626,636],{"class":618},[613,22628,8230],{"class":659},[613,22630,3200],{"class":618},[613,22632,22633,22635,22637,22639,22641,22643,22645,22647],{"class":615,"line":892},[613,22634,10907],{"class":618},[613,22636,5325],{"class":626},[613,22638,633],{"class":618},[613,22640,636],{"class":618},[613,22642,20876],{"class":659},[613,22644,1126],{"class":618},[613,22646,5325],{"class":659},[613,22648,3200],{"class":618},[613,22650,22651],{"class":615,"line":2671},[613,22652,10927],{"class":618},[613,22654,22655,22657,22659,22661,22663,22665,22667,22669,22671,22673],{"class":615,"line":2680},[613,22656,833],{"class":618},[613,22658,7697],{"class":622},[613,22660,9347],{"class":626},[613,22662,633],{"class":618},[613,22664,636],{"class":618},[613,22666,20876],{"class":659},[613,22668,1126],{"class":618},[613,22670,5393],{"class":659},[613,22672,636],{"class":618},[613,22674,763],{"class":618},[613,22676,22677,22679,22681],{"class":615,"line":2714},[613,22678,875],{"class":618},[613,22680,836],{"class":622},[613,22682,645],{"class":618},[613,22684,22685,22687,22689],{"class":615,"line":2723},[613,22686,885],{"class":618},[613,22688,9150],{"class":622},[613,22690,645],{"class":618},[613,22692,22693,22695,22697],{"class":615,"line":2732},[613,22694,708],{"class":618},[613,22696,726],{"class":622},[613,22698,645],{"class":618},[6801,22700,22702],{"id":22701},"material-customization-per-layer","Material Customization per Layer",[602,22704,22706],{"className":604,"code":22705,"language":609,"meta":552,"style":552},"\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",[594,22707,22708,22728,22746,22750,22777,22785,22796,22806,22810,22819,22829,22840,22853,22857,22863,22871,22875,22883,22891,22897,22919,22933,22951,22955,22961,22977,22996,23000,23008,23016],{"__ignoreMap":552},[613,22709,22710,22712,22714,22716,22718,22720,22722,22724,22726],{"class":615,"line":553},[613,22711,619],{"class":618},[613,22713,623],{"class":622},[613,22715,627],{"class":626},[613,22717,630],{"class":626},[613,22719,633],{"class":618},[613,22721,636],{"class":618},[613,22723,640],{"class":639},[613,22725,636],{"class":618},[613,22727,645],{"class":618},[613,22729,22730,22732,22734,22736,22738,22740,22742,22744],{"class":615,"line":554},[613,22731,653],{"class":652},[613,22733,656],{"class":618},[613,22735,20700],{"class":659},[613,22737,669],{"class":618},[613,22739,672],{"class":652},[613,22741,675],{"class":618},[613,22743,678],{"class":639},[613,22745,681],{"class":618},[613,22747,22748],{"class":615,"line":684},[613,22749,718],{"emptyLinePlaceholder":570},[613,22751,22752,22754,22756,22758,22760,22762,22764,22766,22768,22771,22773,22775],{"class":615,"line":705},[613,22753,2463],{"class":626},[613,22755,656],{"class":618},[613,22757,21252],{"class":659},[613,22759,2476],{"class":618},[613,22761,2479],{"class":618},[613,22763,20700],{"class":2482},[613,22765,2485],{"class":659},[613,22767,2488],{"class":618},[613,22769,22770],{"class":639},"/logo.svg",[613,22772,2488],{"class":618},[613,22774,663],{"class":618},[613,22776,1184],{"class":618},[613,22778,22779,22781,22783],{"class":615,"line":715},[613,22780,20784],{"class":622},[613,22782,1198],{"class":618},[613,22784,1184],{"class":618},[613,22786,22787,22790,22792,22794],{"class":615,"line":721},[613,22788,22789],{"class":622}," transparent",[613,22791,1198],{"class":618},[613,22793,4537],{"class":4536},[613,22795,2536],{"class":618},[613,22797,22798,22801,22803],{"class":615,"line":731},[613,22799,22800],{"class":622}," opacity",[613,22802,1198],{"class":618},[613,22804,22805],{"class":799}," 0.9\n",[613,22807,22808],{"class":615,"line":754},[613,22809,2643],{"class":618},[613,22811,22812,22815,22817],{"class":615,"line":766},[613,22813,22814],{"class":622}," strokeMaterial",[613,22816,1198],{"class":618},[613,22818,1184],{"class":618},[613,22820,22821,22823,22825,22827],{"class":615,"line":776},[613,22822,22789],{"class":622},[613,22824,1198],{"class":618},[613,22826,4537],{"class":4536},[613,22828,2536],{"class":618},[613,22830,22831,22833,22835,22838],{"class":615,"line":781},[613,22832,22800],{"class":622},[613,22834,1198],{"class":618},[613,22836,22837],{"class":799}," 1.0",[613,22839,2536],{"class":618},[613,22841,22842,22845,22847,22849,22851],{"class":615,"line":807},[613,22843,22844],{"class":622}," color",[613,22846,1198],{"class":618},[613,22848,675],{"class":618},[613,22850,21710],{"class":639},[613,22852,681],{"class":618},[613,22854,22855],{"class":615,"line":607},[613,22856,8082],{"class":618},[613,22858,22859,22861],{"class":615,"line":830},[613,22860,2476],{"class":618},[613,22862,2496],{"class":659},[613,22864,22865,22867,22869],{"class":615,"line":841},[613,22866,708],{"class":618},[613,22868,623],{"class":622},[613,22870,645],{"class":618},[613,22872,22873],{"class":615,"line":852},[613,22874,718],{"emptyLinePlaceholder":570},[613,22876,22877,22879,22881],{"class":615,"line":862},[613,22878,619],{"class":618},[613,22880,726],{"class":622},[613,22882,645],{"class":618},[613,22884,22885,22887,22889],{"class":615,"line":608},[613,22886,734],{"class":618},[613,22888,9150],{"class":622},[613,22890,645],{"class":618},[613,22892,22893,22895],{"class":615,"line":882},[613,22894,757],{"class":618},[613,22896,5305],{"class":622},[613,22898,22899,22901,22903,22905,22907,22909,22911,22913,22915,22917],{"class":615,"line":892},[613,22900,20867],{"class":652},[613,22902,633],{"class":618},[613,22904,636],{"class":618},[613,22906,2485],{"class":618},[613,22908,20876],{"class":659},[613,22910,1479],{"class":618},[613,22912,8230],{"class":659},[613,22914,8233],{"class":618},[613,22916,20885],{"class":659},[613,22918,3200],{"class":618},[613,22920,22921,22923,22925,22927,22929,22931],{"class":615,"line":2671},[613,22922,10907],{"class":618},[613,22924,8246],{"class":626},[613,22926,633],{"class":618},[613,22928,636],{"class":618},[613,22930,8230],{"class":659},[613,22932,3200],{"class":618},[613,22934,22935,22937,22939,22941,22943,22945,22947,22949],{"class":615,"line":2680},[613,22936,10907],{"class":618},[613,22938,5325],{"class":626},[613,22940,633],{"class":618},[613,22942,636],{"class":618},[613,22944,20876],{"class":659},[613,22946,1126],{"class":618},[613,22948,5325],{"class":659},[613,22950,3200],{"class":618},[613,22952,22953],{"class":615,"line":2714},[613,22954,10927],{"class":618},[613,22956,22957,22959],{"class":615,"line":2723},[613,22958,833],{"class":618},[613,22960,21840],{"class":622},[613,22962,22963,22965,22967,22969,22971,22973,22975],{"class":615,"line":2732},[613,22964,21845],{"class":626},[613,22966,633],{"class":618},[613,22968,636],{"class":618},[613,22970,20876],{"class":659},[613,22972,1126],{"class":618},[613,22974,5393],{"class":659},[613,22976,3200],{"class":618},[613,22978,22979,22981,22984,22986,22988,22990,22992,22994],{"class":615,"line":2741},[613,22980,8243],{"class":618},[613,22982,22983],{"class":626},"wireframe",[613,22985,633],{"class":618},[613,22987,636],{"class":618},[613,22989,20876],{"class":659},[613,22991,1126],{"class":618},[613,22993,21702],{"class":659},[613,22995,3200],{"class":618},[613,22997,22998],{"class":615,"line":2763},[613,22999,8297],{"class":618},[613,23001,23002,23004,23006],{"class":615,"line":2814},[613,23003,875],{"class":618},[613,23005,836],{"class":622},[613,23007,645],{"class":618},[613,23009,23010,23012,23014],{"class":615,"line":2823},[613,23011,885],{"class":618},[613,23013,9150],{"class":622},[613,23015,645],{"class":618},[613,23017,23018,23020,23022],{"class":615,"line":2832},[613,23019,708],{"class":618},[613,23021,726],{"class":622},[613,23023,645],{"class":618},[480,23025,23027],{"id":23026},"usesvg-component","UseSVG Component",[590,23029,23030,23031,23034],{},"For simple, declarative SVG rendering without the need for programmatic control, you can use the ",[594,23032,23033],{},"UseSVG"," component:",[602,23036,23038],{"className":604,"code":23037,"language":609,"meta":552,"style":552},"\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",[594,23039,23040,23060,23079,23087,23091,23099,23144,23151,23165,23180,23201,23215,23228,23232,23240],{"__ignoreMap":552},[613,23041,23042,23044,23046,23048,23050,23052,23054,23056,23058],{"class":615,"line":553},[613,23043,619],{"class":618},[613,23045,623],{"class":622},[613,23047,627],{"class":626},[613,23049,630],{"class":626},[613,23051,633],{"class":618},[613,23053,636],{"class":618},[613,23055,640],{"class":639},[613,23057,636],{"class":618},[613,23059,645],{"class":618},[613,23061,23062,23064,23066,23069,23071,23073,23075,23077],{"class":615,"line":554},[613,23063,653],{"class":652},[613,23065,656],{"class":618},[613,23067,23068],{"class":659}," UseSVG",[613,23070,669],{"class":618},[613,23072,672],{"class":652},[613,23074,675],{"class":618},[613,23076,678],{"class":639},[613,23078,681],{"class":618},[613,23080,23081,23083,23085],{"class":615,"line":684},[613,23082,708],{"class":618},[613,23084,623],{"class":622},[613,23086,645],{"class":618},[613,23088,23089],{"class":615,"line":705},[613,23090,718],{"emptyLinePlaceholder":570},[613,23092,23093,23095,23097],{"class":615,"line":715},[613,23094,619],{"class":618},[613,23096,726],{"class":622},[613,23098,645],{"class":618},[613,23100,23101,23103,23105,23107,23109,23111,23113,23115,23117,23119,23121,23123,23125,23127,23130,23132,23134,23136,23138,23140,23142],{"class":615,"line":721},[613,23102,734],{"class":618},[613,23104,9150],{"class":622},[613,23106,789],{"class":618},[613,23108,792],{"class":626},[613,23110,633],{"class":618},[613,23112,636],{"class":618},[613,23114,1915],{"class":799},[613,23116,636],{"class":618},[613,23118,789],{"class":618},[613,23120,1467],{"class":626},[613,23122,633],{"class":618},[613,23124,636],{"class":618},[613,23126,3923],{"class":618},[613,23128,23129],{"class":799},"2.1",[613,23131,1479],{"class":618},[613,23133,1901],{"class":799},[613,23135,1479],{"class":618},[613,23137,945],{"class":799},[613,23139,1489],{"class":618},[613,23141,636],{"class":618},[613,23143,645],{"class":618},[613,23145,23146,23148],{"class":615,"line":731},[613,23147,757],{"class":618},[613,23149,23150],{"class":622},"UseSVG\n",[613,23152,23153,23156,23158,23160,23163],{"class":615,"line":754},[613,23154,23155],{"class":626}," src",[613,23157,633],{"class":618},[613,23159,636],{"class":618},[613,23161,23162],{"class":639},"/path/to/logo.svg",[613,23164,3200],{"class":618},[613,23166,23167,23169,23172,23174,23176,23178],{"class":615,"line":766},[613,23168,10907],{"class":618},[613,23170,23171],{"class":626},"skip-fills",[613,23173,633],{"class":618},[613,23175,636],{"class":618},[613,23177,951],{"class":4536},[613,23179,3200],{"class":618},[613,23181,23182,23184,23187,23189,23191,23193,23195,23197,23199],{"class":615,"line":776},[613,23183,10907],{"class":618},[613,23185,23186],{"class":626},"fill-material",[613,23188,633],{"class":618},[613,23190,636],{"class":618},[613,23192,12614],{"class":618},[613,23194,10096],{"class":622},[613,23196,12619],{"class":618},[613,23198,941],{"class":4536},[613,23200,2536],{"class":618},[613,23202,23203,23206,23208,23211,23213],{"class":615,"line":781},[613,23204,23205],{"class":622}," opacity",[613,23207,12619],{"class":618},[613,23209,23210],{"class":799},"0.8",[613,23212,669],{"class":618},[613,23214,3200],{"class":618},[613,23216,23217,23220,23222,23224,23226],{"class":615,"line":807},[613,23218,23219],{"class":626}," depth",[613,23221,633],{"class":618},[613,23223,636],{"class":618},[613,23225,21951],{"class":639},[613,23227,3200],{"class":618},[613,23229,23230],{"class":615,"line":607},[613,23231,16014],{"class":618},[613,23233,23234,23236,23238],{"class":615,"line":830},[613,23235,885],{"class":618},[613,23237,9150],{"class":622},[613,23239,645],{"class":618},[613,23241,23242,23244,23246],{"class":615,"line":841},[613,23243,708],{"class":618},[613,23245,726],{"class":622},[613,23247,645],{"class":618},[4191,23249,902],{"id":901},[907,23251,23252,23264],{},[910,23253,23254],{},[913,23255,23256,23258,23260,23262],{},[916,23257,918],{"align":977},[916,23259,6179],{},[916,23261,921],{"align":977},[916,23263,924],{},[926,23265,23266,23286,23305,23324,23341,23358,23377,23395],{},[913,23267,23268,23273,23277,23284],{},[931,23269,23270],{"align":977},[1681,23271,23272],{},"src",[931,23274,23275],{},[594,23276,3641],{},[931,23278,23279,23280,23283],{"align":977},"Either a path to an SVG ",[1685,23281,23282],{},"or"," an SVG string",[931,23285],{},[913,23287,23288,23292,23296,23301],{},[931,23289,23290],{"align":977},[1681,23291,21419],{},[931,23293,23294],{},[594,23295,16208],{},[931,23297,938,23298,23300],{"align":977},[594,23299,941],{},", the SVG strokes will not be rendered.",[931,23302,23303],{},[594,23304,951],{},[913,23306,23307,23311,23315,23320],{},[931,23308,23309],{"align":977},[1681,23310,21437],{},[931,23312,23313],{},[594,23314,16208],{},[931,23316,938,23317,23319],{"align":977},[594,23318,941],{},", the SVG fills will not be rendered.",[931,23321,23322],{},[594,23323,951],{},[913,23325,23326,23330,23334,23337],{},[931,23327,23328],{"align":977},[1681,23329,21474],{},[931,23331,23332],{},[594,23333,21460],{},[931,23335,23336],{"align":977},"Props to assign to the stroke materials of the resulting meshes.",[931,23338,23339],{},[594,23340,1159],{},[913,23342,23343,23347,23351,23354],{},[931,23344,23345],{"align":977},[1681,23346,21455],{},[931,23348,23349],{},[594,23350,21460],{},[931,23352,23353],{"align":977},"Props to assign to the fill materials of the resulting meshes.",[931,23355,23356],{},[594,23357,1159],{},[913,23359,23360,23365,23370,23373],{},[931,23361,23362],{"align":977},[1681,23363,23364],{},"strokeMeshProps",[931,23366,23367],{},[594,23368,23369],{},"TresOptions",[931,23371,23372],{"align":977},"Props to assign to the resulting stroke meshes.",[931,23374,23375],{},[594,23376,1159],{},[913,23378,23379,23384,23388,23391],{},[931,23380,23381],{"align":977},[1681,23382,23383],{},"fillMeshProps",[931,23385,23386],{},[594,23387,23369],{},[931,23389,23390],{"align":977},"Props to assign to the resulting fill meshes.",[931,23392,23393],{},[594,23394,1159],{},[913,23396,23397,23401,23405,23412],{},[931,23398,23399],{"align":977},[1681,23400,11572],{},[931,23402,23403],{},[594,23404,21496],{},[931,23406,23407,23408,3409],{"align":977},"Specify how SVG layers are to be rendered. (",[1120,23409,23411],{"href":23410},"#depth-handling","See \"Depth\"",[931,23413,23414],{},[594,23415,21951],{},[480,23417,23419],{"id":23418},"troubleshooting","Troubleshooting",[23421,23422,23424],"alert",{"type":23423},"warning",[590,23425,23426],{},"This is not a general-purpose SVG renderer. Many SVG features are unsupported.",[590,23428,23429],{},"Here are some things to try if you run into problems:",[4191,23431,23433],{"id":23432},"error-xml-parsing-error-unclosed-token","Error: \"XML Parsing Error: unclosed token\"",[2261,23435,23436],{},[2264,23437,23438,23439,2298,23441,1126],{},"In the SVG source, convert hex colors to rgb, e.g., convert ",[594,23440,7796],{},[594,23442,23443],{},"rgb(255, 0, 0)",[4191,23445,23447],{"id":23446},"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",[2261,23449,23450,23462],{},[2264,23451,23452,23453,23455,23456,1126],{},"In your ",[594,23454,145],{}," options, ",[1120,23457,23458,23459,23461],{"href":23410},"change the ",[594,23460,11572],{}," option",[2264,23463,23464,23465,23468,23469,1126],{},"In the SVG source, use ",[594,23466,23467],{},"fill=\"none\""," rather than ",[594,23470,23471],{},"fill-opacity=\"0\"",[4191,23473,23475,23476],{"id":23474},"parts-of-the-svg-z-fight","Parts of the SVG ",[1120,23477,23479],{"href":22115,"rel":23478},[1124],"\"z-fight\"",[2261,23481,23482,23490],{},[2264,23483,23452,23484,23455,23486,1126],{},[594,23485,145],{},[1120,23487,23458,23488,23461],{"href":23410},[594,23489,11572],{},[2264,23491,23492],{},"Increase the distance between the SVG and other on-screen elements.",[4191,23494,23496],{"id":23495},"the-svg-is-not-visible","The SVG is not visible",[2261,23498,23499,23502,23511,23517],{},[2264,23500,23501],{},"If importing an SVG, make sure the path is correct – check the console for loading errors.",[2264,23503,23504,23505,23507,23508,1126],{},"Try scaling the SVG down, e.g., wrap it in a ",[594,23506,9150],{}," with ",[594,23509,23510],{},":scale=\"0.01\"",[2264,23512,23513,23514,1126],{},"Try moving the SVG up (+y), e.g., ",[594,23515,23516],{},":position=\"[0,2,0]\"",[2264,23518,23519,23520,23523],{},"Check that ",[594,23521,23522],{},"layers.length > 0"," before rendering.",[4191,23525,23527],{"id":23526},"performance-issues-with-many-layers","Performance issues with many layers",[2261,23529,23530,23537,23545],{},[2264,23531,23532,23533,23536],{},"Use the ",[594,23534,23535],{},"dispose()"," function when components unmount to clean up geometries.",[2264,23538,23539,23540,5823,23542,23544],{},"Consider using ",[594,23541,21419],{},[594,23543,21437],{}," to reduce the number of rendered layers.",[2264,23546,23547],{},"For complex SVGs with many layers, consider simplifying the SVG source.",[480,23549,23551,23552,23554,23555,23557],{"id":23550},"when-to-use-usesvg-vs-svg-component","When to Use ",[594,23553,145],{}," vs ",[594,23556,20650],{}," Component",[590,23559,23560],{},[1681,23561,23562,23563,23565],{},"Use ",[594,23564,145],{}," when you need:",[2261,23567,23568,23571,23574,23577,23580],{},[2264,23569,23570],{},"Direct access to individual SVG layers",[2264,23572,23573],{},"Custom rendering logic",[2264,23575,23576],{},"Layer-specific animations",[2264,23578,23579],{},"Programmatic geometry manipulation",[2264,23581,23582],{},"Advanced material customization per layer",[590,23584,23585],{},[1681,23586,23532,23587,23589],{},[594,23588,20650],{}," component when you need:",[2261,23591,23592,23595,23598,23601],{},[2264,23593,23594],{},"Simple, declarative SVG rendering",[2264,23596,23597],{},"Quick prototyping",[2264,23599,23600],{},"Standard SVG display without custom logic",[2264,23602,23603],{},"Less code and setup",[1307,23605,23606],{},"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":552,"searchDepth":553,"depth":554,"links":23608},[23609,23619,23622,23630],{"id":20654,"depth":554,"text":20655,"children":23610},[23611,23612,23613,23614,23615,23616,23617,23618],{"id":600,"depth":684,"text":15},{"id":21207,"depth":684,"text":21208},{"id":16141,"depth":684,"text":16142},{"id":16243,"depth":684,"text":12698},{"id":21507,"depth":684,"text":21508},{"id":21913,"depth":684,"text":21914},{"id":22234,"depth":684,"text":22235},{"id":22369,"depth":684,"text":22370},{"id":23026,"depth":554,"text":23027,"children":23620},[23621],{"id":901,"depth":684,"text":902},{"id":23418,"depth":554,"text":23419,"children":23623},[23624,23625,23626,23628,23629],{"id":23432,"depth":684,"text":23433},{"id":23446,"depth":684,"text":23447},{"id":23474,"depth":684,"text":23627},"Parts of the SVG \"z-fight\"",{"id":23495,"depth":684,"text":23496},{"id":23526,"depth":684,"text":23527},{"id":23550,"depth":554,"text":23631},"When to Use useSVG vs SVG Component","A composable to load and render SVG files as 3D geometry in TresJS scenes.",{},{"title":145,"description":23632},"Bpey5SMrTLv2yytWL0t_9C4cqa_4Vc__F5o4YEN3jZA",{"id":23637,"title":149,"body":23638,"description":24137,"extension":567,"links":568,"meta":24138,"navigation":570,"path":150,"seo":24139,"stem":151,"__hash__":24140},"docs/2.api/3.loaders/use-progress.md",{"type":477,"value":23639,"toc":24133},[23640,23647,23650,23652,23710,23716,24046,24057,24059,24114,24130],[590,23641,23642,23643,23646],{},"A composable to convenience wrap ",[594,23644,23645],{},"THREE.DefaultLoadingManager"," and returns the progress of the loading assets into the scene.",[590,23648,23649],{},"This comes handy to show an HTML loading bar or a spinner while the assets are being loaded.",[480,23651,15],{"id":600},[602,23653,23655],{"className":1166,"code":23654,"language":640,"meta":552,"style":552},"import { useProgress } from '@tresjs/cientos'\n\nconst { hasFinishLoading, progress, items } = await useProgress()\n",[594,23656,23657,23676,23680],{"__ignoreMap":552},[613,23658,23659,23661,23663,23666,23668,23670,23672,23674],{"class":615,"line":553},[613,23660,653],{"class":652},[613,23662,656],{"class":618},[613,23664,23665],{"class":659}," useProgress",[613,23667,669],{"class":618},[613,23669,672],{"class":652},[613,23671,675],{"class":618},[613,23673,678],{"class":639},[613,23675,681],{"class":618},[613,23677,23678],{"class":615,"line":554},[613,23679,718],{"emptyLinePlaceholder":570},[613,23681,23682,23684,23686,23689,23691,23694,23696,23699,23701,23703,23706,23708],{"class":615,"line":684},[613,23683,2463],{"class":626},[613,23685,656],{"class":618},[613,23687,23688],{"class":659}," hasFinishLoading",[613,23690,663],{"class":618},[613,23692,23693],{"class":659}," progress",[613,23695,663],{"class":618},[613,23697,23698],{"class":659}," items ",[613,23700,2476],{"class":618},[613,23702,2479],{"class":618},[613,23704,23705],{"class":652}," await",[613,23707,23665],{"class":2482},[613,23709,6745],{"class":659},[590,23711,23712,23713,23715],{},"Then you can use the ",[594,23714,16218],{}," value to show a loading bar or a spinner:",[602,23717,23719],{"className":604,"code":23718,"language":609,"meta":552,"style":552},"\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",[594,23720,23721,23729,23736,23749,23763,23777,23781,23788,23804,23818,23822,23842,23859,23884,23892,23900,23909,23928,23960,23968,23976,23983,23988,24004,24018,24022,24030,24038],{"__ignoreMap":552},[613,23722,23723,23725,23727],{"class":615,"line":553},[613,23724,619],{"class":618},[613,23726,726],{"class":622},[613,23728,645],{"class":618},[613,23730,23731,23733],{"class":615,"line":554},[613,23732,734],{"class":618},[613,23734,23735],{"class":622},"Transition\n",[613,23737,23738,23740,23742,23744,23747],{"class":615,"line":684},[613,23739,5332],{"class":626},[613,23741,633],{"class":618},[613,23743,636],{"class":618},[613,23745,23746],{"class":639},"fade-overlay",[613,23748,3200],{"class":618},[613,23750,23751,23754,23756,23758,23761],{"class":615,"line":705},[613,23752,23753],{"class":626}," enter-active-class",[613,23755,633],{"class":618},[613,23757,636],{"class":618},[613,23759,23760],{"class":639},"opacity-1 transition-opacity duration-200",[613,23762,3200],{"class":618},[613,23764,23765,23768,23770,23772,23775],{"class":615,"line":715},[613,23766,23767],{"class":626}," leave-active-class",[613,23769,633],{"class":618},[613,23771,636],{"class":618},[613,23773,23774],{"class":639},"opacity-0 transition-opacity duration-200",[613,23776,3200],{"class":618},[613,23778,23779],{"class":615,"line":721},[613,23780,5368],{"class":618},[613,23782,23783,23785],{"class":615,"line":731},[613,23784,757],{"class":618},[613,23786,23787],{"class":622},"div\n",[613,23789,23790,23793,23795,23797,23799,23802],{"class":615,"line":754},[613,23791,23792],{"class":626}," v-show",[613,23794,633],{"class":618},[613,23796,636],{"class":618},[613,23798,20850],{"class":618},[613,23800,23801],{"class":659},"hasFinishLoading",[613,23803,3200],{"class":618},[613,23805,23806,23809,23811,23813,23816],{"class":615,"line":766},[613,23807,23808],{"class":626}," class",[613,23810,633],{"class":618},[613,23812,636],{"class":618},[613,23814,23815],{"class":639},"absolute bg-grey-600 t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono",[613,23817,3200],{"class":618},[613,23819,23820],{"class":615,"line":776},[613,23821,10927],{"class":618},[613,23823,23824,23826,23828,23831,23833,23835,23838,23840],{"class":615,"line":781},[613,23825,833],{"class":618},[613,23827,4259],{"class":622},[613,23829,23830],{"class":626}," class",[613,23832,633],{"class":618},[613,23834,636],{"class":618},[613,23836,23837],{"class":639},"w-200px",[613,23839,636],{"class":618},[613,23841,645],{"class":618},[613,23843,23844,23847,23850,23853,23856],{"class":615,"line":807},[613,23845,23846],{"class":659}," Loading... ",[613,23848,23849],{"class":618},"{{",[613,23851,23852],{"class":659}," progress ",[613,23854,23855],{"class":618},"}}",[613,23857,23858],{"class":659}," %\n",[613,23860,23861,23863,23866,23868,23870,23872,23875,23877,23880,23882],{"class":615,"line":607},[613,23862,844],{"class":618},[613,23864,23865],{"class":622},"i",[613,23867,23830],{"class":626},[613,23869,633],{"class":618},[613,23871,636],{"class":618},[613,23873,23874],{"class":639},"i-ic-twotone-catching-pokemon animate-rotate-in",[613,23876,636],{"class":618},[613,23878,23879],{"class":618},">\u003C/",[613,23881,23865],{"class":622},[613,23883,645],{"class":618},[613,23885,23886,23888,23890],{"class":615,"line":830},[613,23887,865],{"class":618},[613,23889,4259],{"class":622},[613,23891,645],{"class":618},[613,23893,23894,23896,23898],{"class":615,"line":841},[613,23895,875],{"class":618},[613,23897,4259],{"class":622},[613,23899,645],{"class":618},[613,23901,23902,23904,23907],{"class":615,"line":852},[613,23903,885],{"class":618},[613,23905,23906],{"class":622},"Transition",[613,23908,645],{"class":618},[613,23910,23911,23913,23915,23917,23919,23921,23924,23926],{"class":615,"line":862},[613,23912,734],{"class":618},[613,23914,737],{"class":622},[613,23916,20180],{"class":626},[613,23918,633],{"class":618},[613,23920,636],{"class":618},[613,23922,23923],{"class":639},"realistic",[613,23925,636],{"class":618},[613,23927,645],{"class":618},[613,23929,23930,23932,23934,23936,23938,23940,23942,23944,23946,23948,23950,23952,23954,23956,23958],{"class":615,"line":608},[613,23931,757],{"class":618},[613,23933,760],{"class":622},[613,23935,789],{"class":618},[613,23937,1467],{"class":626},[613,23939,633],{"class":618},[613,23941,636],{"class":618},[613,23943,1474],{"class":618},[613,23945,17470],{"class":799},[613,23947,1479],{"class":618},[613,23949,17470],{"class":799},[613,23951,1479],{"class":618},[613,23953,17470],{"class":799},[613,23955,1489],{"class":618},[613,23957,636],{"class":618},[613,23959,763],{"class":618},[613,23961,23962,23964,23966],{"class":615,"line":882},[613,23963,757],{"class":618},[613,23965,771],{"class":622},[613,23967,763],{"class":618},[613,23969,23970,23972,23974],{"class":615,"line":892},[613,23971,757],{"class":618},[613,23973,20168],{"class":622},[613,23975,645],{"class":618},[613,23977,23978,23980],{"class":615,"line":2671},[613,23979,833],{"class":618},[613,23981,23982],{"class":622},"Environment\n",[613,23984,23985],{"class":615,"line":2680},[613,23986,23987],{"class":626}," background\n",[613,23989,23990,23992,23995,23997,23999,24002],{"class":615,"line":2714},[613,23991,8243],{"class":618},[613,23993,23994],{"class":626},"files",[613,23996,633],{"class":618},[613,23998,636],{"class":618},[613,24000,24001],{"class":659},"environmentFiles",[613,24003,3200],{"class":618},[613,24005,24006,24009,24011,24013,24016],{"class":615,"line":2723},[613,24007,24008],{"class":626}," path",[613,24010,633],{"class":618},[613,24012,636],{"class":618},[613,24014,24015],{"class":639},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap",[613,24017,3200],{"class":618},[613,24019,24020],{"class":615,"line":2732},[613,24021,8297],{"class":618},[613,24023,24024,24026,24028],{"class":615,"line":2741},[613,24025,875],{"class":618},[613,24027,20168],{"class":622},[613,24029,645],{"class":618},[613,24031,24032,24034,24036],{"class":615,"line":2763},[613,24033,885],{"class":618},[613,24035,737],{"class":622},[613,24037,645],{"class":618},[613,24039,24040,24042,24044],{"class":615,"line":2814},[613,24041,708],{"class":618},[613,24043,726],{"class":622},[613,24045,645],{"class":618},[23421,24047,24048],{"type":23423},[590,24049,24050,24051,24056],{},"This component use top level await. Please check the ",[1120,24052,24055],{"href":24053,"rel":24054},"https://vuejs.org/guide/built-ins/suspense.html#suspense",[1124],"Suspense API"," for more info",[480,24058,16142],{"id":16141},[907,24060,24061,24071],{},[910,24062,24063],{},[913,24064,24065,24067,24069],{},[916,24066,8362],{"align":977},[916,24068,6179],{"align":977},[916,24070,921],{"align":977},[926,24072,24073,24086,24099],{},[913,24074,24075,24079,24083],{},[931,24076,24077],{"align":977},[594,24078,23801],{},[931,24080,24081],{"align":977},[594,24082,16208],{},[931,24084,24085],{"align":977},"Whether all items have finished loading",[913,24087,24088,24092,24096],{},[931,24089,24090],{"align":977},[594,24091,16218],{},[931,24093,24094],{"align":977},[594,24095,5565],{},[931,24097,24098],{"align":977},"Loading progress as percentage (0-100)",[913,24100,24101,24106,24111],{},[931,24102,24103],{"align":977},[594,24104,24105],{},"items",[931,24107,24108],{"align":977},[594,24109,24110],{},"Array",[931,24112,24113],{"align":977},"Array of loading items with their status",[3268,24115,24116],{},[590,24117,24118,24119,24124,24125,24056],{},"This component use top level await it needs to be wrapped on a ",[1120,24120,24122],{"href":24053,"rel":24121},[1124],[594,24123,20168],{},". Please check the ",[1120,24126,24128],{"href":24053,"rel":24127},[1124],[594,24129,24055],{},[1307,24131,24132],{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":552,"searchDepth":553,"depth":554,"links":24134},[24135,24136],{"id":600,"depth":554,"text":15},{"id":16141,"depth":554,"text":16142},"A composable to track loading progress of assets in TresJS scenes.",{},{"title":149,"description":24137},"gZhXorzaJ3dTEQJ4uc1arATdnRGEw61UJXrQQOhhIV4",{"id":24142,"title":153,"body":24143,"description":24761,"extension":567,"links":568,"meta":24762,"navigation":570,"path":154,"seo":24763,"stem":155,"__hash__":24764},"docs/2.api/3.loaders/use-video-texture.md",{"type":477,"value":24144,"toc":24757},[24145,24150,24153,24160,24162,24640,24642,24745,24754],[2343,24146,24147],{},[24148,24149],"loaders-use-video-texture",{},[590,24151,24152],{},"A composable to easily use videos as textures in your meshes.",[590,24154,24155,24156],{},"This composable is based on the Drei ",[1120,24157,153],{"href":24158,"rel":24159},"https://github.com/pmndrs/drei/tree/master#usevideotexture",[1124],[480,24161,15],{"id":600},[15637,24163,24164,24405],{},[602,24165,24167],{"className":604,"code":24166,"filename":15799,"language":609,"meta":552,"style":552},"\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",[594,24168,24169,24189,24207,24225,24239,24247,24251,24259,24277,24284,24311,24337,24341,24349,24357,24365,24373,24381,24389,24397],{"__ignoreMap":552},[613,24170,24171,24173,24175,24177,24179,24181,24183,24185,24187],{"class":615,"line":553},[613,24172,619],{"class":618},[613,24174,623],{"class":622},[613,24176,627],{"class":626},[613,24178,630],{"class":626},[613,24180,633],{"class":618},[613,24182,636],{"class":618},[613,24184,640],{"class":639},[613,24186,636],{"class":618},[613,24188,645],{"class":618},[613,24190,24191,24193,24195,24197,24199,24201,24203,24205],{"class":615,"line":554},[613,24192,653],{"class":652},[613,24194,656],{"class":618},[613,24196,666],{"class":659},[613,24198,669],{"class":618},[613,24200,672],{"class":652},[613,24202,675],{"class":618},[613,24204,678],{"class":639},[613,24206,681],{"class":618},[613,24208,24209,24211,24213,24215,24217,24219,24221,24223],{"class":615,"line":684},[613,24210,653],{"class":652},[613,24212,656],{"class":618},[613,24214,691],{"class":659},[613,24216,669],{"class":618},[613,24218,672],{"class":652},[613,24220,675],{"class":618},[613,24222,700],{"class":639},[613,24224,681],{"class":618},[613,24226,24227,24229,24231,24233,24235,24237],{"class":615,"line":705},[613,24228,653],{"class":652},[613,24230,15864],{"class":659},[613,24232,15867],{"class":652},[613,24234,675],{"class":618},[613,24236,15872],{"class":639},[613,24238,681],{"class":618},[613,24240,24241,24243,24245],{"class":615,"line":715},[613,24242,708],{"class":618},[613,24244,623],{"class":622},[613,24246,645],{"class":618},[613,24248,24249],{"class":615,"line":721},[613,24250,718],{"emptyLinePlaceholder":570},[613,24252,24253,24255,24257],{"class":615,"line":731},[613,24254,619],{"class":618},[613,24256,726],{"class":622},[613,24258,645],{"class":618},[613,24260,24261,24263,24265,24267,24269,24271,24273,24275],{"class":615,"line":754},[613,24262,734],{"class":618},[613,24264,737],{"class":622},[613,24266,740],{"class":626},[613,24268,633],{"class":618},[613,24270,636],{"class":618},[613,24272,11536],{"class":639},[613,24274,636],{"class":618},[613,24276,645],{"class":618},[613,24278,24279,24281],{"class":615,"line":766},[613,24280,757],{"class":618},[613,24282,24283],{"class":622},"TresPerspectiveCamera\n",[613,24285,24286,24288,24290,24292,24294,24296,24298,24300,24302,24304,24307,24309],{"class":615,"line":776},[613,24287,10907],{"class":618},[613,24289,1467],{"class":626},[613,24291,633],{"class":618},[613,24293,636],{"class":618},[613,24295,1474],{"class":618},[613,24297,945],{"class":799},[613,24299,1479],{"class":618},[613,24301,7668],{"class":799},[613,24303,1479],{"class":618},[613,24305,24306],{"class":799},"9",[613,24308,1489],{"class":618},[613,24310,3200],{"class":618},[613,24312,24313,24315,24317,24319,24321,24323,24325,24327,24329,24331,24333,24335],{"class":615,"line":781},[613,24314,10907],{"class":618},[613,24316,8681],{"class":626},[613,24318,633],{"class":618},[613,24320,636],{"class":618},[613,24322,1474],{"class":618},[613,24324,945],{"class":799},[613,24326,1479],{"class":618},[613,24328,1901],{"class":799},[613,24330,1479],{"class":618},[613,24332,945],{"class":799},[613,24334,1489],{"class":618},[613,24336,3200],{"class":618},[613,24338,24339],{"class":615,"line":807},[613,24340,16014],{"class":618},[613,24342,24343,24345,24347],{"class":615,"line":607},[613,24344,757],{"class":618},[613,24346,771],{"class":622},[613,24348,763],{"class":618},[613,24350,24351,24353,24355],{"class":615,"line":830},[613,24352,757],{"class":618},[613,24354,20168],{"class":622},[613,24356,645],{"class":618},[613,24358,24359,24361,24363],{"class":615,"line":841},[613,24360,833],{"class":618},[613,24362,15960],{"class":622},[613,24364,763],{"class":618},[613,24366,24367,24369,24371],{"class":615,"line":852},[613,24368,875],{"class":618},[613,24370,20168],{"class":622},[613,24372,645],{"class":618},[613,24374,24375,24377,24379],{"class":615,"line":862},[613,24376,757],{"class":618},[613,24378,8313],{"class":622},[613,24380,763],{"class":618},[613,24382,24383,24385,24387],{"class":615,"line":608},[613,24384,757],{"class":618},[613,24386,8758],{"class":622},[613,24388,763],{"class":618},[613,24390,24391,24393,24395],{"class":615,"line":882},[613,24392,885],{"class":618},[613,24394,737],{"class":622},[613,24396,645],{"class":618},[613,24398,24399,24401,24403],{"class":615,"line":892},[613,24400,708],{"class":618},[613,24402,726],{"class":622},[613,24404,645],{"class":618},[602,24406,24410],{"className":604,"code":24407,"filename":24408,"highlights":24409,"language":609,"meta":552,"style":552},"\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",[684,754,607],[594,24411,24412,24432,24450,24475,24479,24494,24505,24517,24550,24558,24562,24570,24603,24624,24632],{"__ignoreMap":552},[613,24413,24414,24416,24418,24420,24422,24424,24426,24428,24430],{"class":615,"line":553},[613,24415,619],{"class":618},[613,24417,623],{"class":622},[613,24419,627],{"class":626},[613,24421,630],{"class":626},[613,24423,633],{"class":618},[613,24425,636],{"class":618},[613,24427,640],{"class":639},[613,24429,636],{"class":618},[613,24431,645],{"class":618},[613,24433,24434,24436,24438,24440,24442,24444,24446,24448],{"class":615,"line":554},[613,24435,653],{"class":652},[613,24437,656],{"class":618},[613,24439,3975],{"class":659},[613,24441,669],{"class":618},[613,24443,672],{"class":652},[613,24445,675],{"class":618},[613,24447,609],{"class":639},[613,24449,681],{"class":618},[613,24451,24453,24455,24457,24460,24462,24465,24467,24469,24471,24473],{"class":24452,"line":684},[615,649],[613,24454,653],{"class":652},[613,24456,656],{"class":618},[613,24458,24459],{"class":659}," Sphere",[613,24461,663],{"class":618},[613,24463,24464],{"class":659}," useVideoTexture",[613,24466,669],{"class":618},[613,24468,672],{"class":652},[613,24470,675],{"class":618},[613,24472,678],{"class":639},[613,24474,681],{"class":618},[613,24476,24477],{"class":615,"line":705},[613,24478,718],{"emptyLinePlaceholder":570},[613,24480,24481,24483,24486,24488,24490,24492],{"class":615,"line":715},[613,24482,2463],{"class":626},[613,24484,24485],{"class":659}," videoPath ",[613,24487,633],{"class":618},[613,24489,675],{"class":618},[613,24491,17227],{"class":639},[613,24493,681],{"class":618},[613,24495,24496,24498,24500,24503],{"class":615,"line":721},[613,24497,17234],{"class":618},[613,24499,675],{"class":618},[613,24501,24502],{"class":639},"Tresjs/assets/main/textures/video-textures/useVideoTexture.mp4",[613,24504,681],{"class":618},[613,24506,24507,24509,24511,24513,24515],{"class":615,"line":731},[613,24508,2463],{"class":626},[613,24510,2473],{"class":659},[613,24512,633],{"class":618},[613,24514,3975],{"class":2482},[613,24516,6745],{"class":659},[613,24518,24520,24522,24524,24526,24528,24530,24532,24535,24537,24539,24542,24544,24546,24548],{"class":24519,"line":754},[615,649],[613,24521,2777],{"class":659},[613,24523,1126],{"class":618},[613,24525,7181],{"class":659},[613,24527,633],{"class":618},[613,24529,23705],{"class":652},[613,24531,24464],{"class":2482},[613,24533,24534],{"class":659},"(videoPath",[613,24536,663],{"class":618},[613,24538,656],{"class":618},[613,24540,24541],{"class":622}," loop",[613,24543,1198],{"class":618},[613,24545,6936],{"class":4536},[613,24547,669],{"class":618},[613,24549,2496],{"class":659},[613,24551,24552,24554,24556],{"class":615,"line":766},[613,24553,708],{"class":618},[613,24555,623],{"class":622},[613,24557,645],{"class":618},[613,24559,24560],{"class":615,"line":776},[613,24561,718],{"emptyLinePlaceholder":570},[613,24563,24564,24566,24568],{"class":615,"line":781},[613,24565,619],{"class":618},[613,24567,726],{"class":622},[613,24569,645],{"class":618},[613,24571,24572,24575,24577,24579,24581,24583,24585,24587,24589,24591,24593,24595,24597,24599,24601],{"class":615,"line":807},[613,24573,24574],{"class":618}," \u003C",[613,24576,261],{"class":622},[613,24578,789],{"class":618},[613,24580,1467],{"class":626},[613,24582,633],{"class":618},[613,24584,636],{"class":618},[613,24586,1474],{"class":618},[613,24588,945],{"class":799},[613,24590,1479],{"class":618},[613,24592,800],{"class":799},[613,24594,1479],{"class":618},[613,24596,945],{"class":799},[613,24598,1489],{"class":618},[613,24600,636],{"class":618},[613,24602,645],{"class":618},[613,24604,24606,24608,24610,24612,24614,24616,24618,24620,24622],{"class":24605,"line":607},[615,649],[613,24607,833],{"class":618},[613,24609,7697],{"class":622},[613,24611,789],{"class":618},[613,24613,2801],{"class":626},[613,24615,633],{"class":618},[613,24617,636],{"class":618},[613,24619,2777],{"class":659},[613,24621,636],{"class":618},[613,24623,763],{"class":618},[613,24625,24626,24628,24630],{"class":615,"line":830},[613,24627,875],{"class":618},[613,24629,261],{"class":622},[613,24631,645],{"class":618},[613,24633,24634,24636,24638],{"class":615,"line":841},[613,24635,708],{"class":618},[613,24637,726],{"class":622},[613,24639,645],{"class":618},[480,24641,902],{"id":901},[907,24643,24644,24654],{},[910,24645,24646],{},[913,24647,24648,24650,24652],{},[916,24649,918],{"align":977},[916,24651,921],{"align":977},[916,24653,924],{},[926,24655,24656,24669,24683,24698,24710,24722,24733],{},[913,24657,24658,24662,24665],{},[931,24659,24660],{"align":977},[594,24661,23272],{},[931,24663,24664],{"align":977},"Path to the video.",[931,24666,24667],{},[594,24668,1159],{},[913,24670,24671,24676,24678],{},[931,24672,24673],{"align":977},[594,24674,24675],{},"unsuspend",[931,24677,17066],{"align":977},[931,24679,24680],{},[594,24681,24682],{},"loadedmetadata",[913,24684,24685,24690,24693],{},[931,24686,24687],{"align":977},[594,24688,24689],{},"crossOrigin",[931,24691,24692],{"align":977},"Whether to use CORS to fetch the related video.",[931,24694,24695],{},[594,24696,24697],{},"Anonymous",[913,24699,24700,24705,24708],{},[931,24701,24702],{"align":977},[594,24703,24704],{},"muted",[931,24706,24707],{"align":977},"Whether to set the audio silenced.",[931,24709,941],{},[913,24711,24712,24717,24720],{},[931,24713,24714],{"align":977},[594,24715,24716],{},"loop",[931,24718,24719],{"align":977},"Automatically seek back to the start upon reaching the end of the video.",[931,24721,941],{},[913,24723,24724,24728,24731],{},[931,24725,24726],{"align":977},[594,24727,12983],{},[931,24729,24730],{"align":977},"To play to the video once loaded or not.",[931,24732,941],{},[913,24734,24735,24740,24743],{},[931,24736,24737],{"align":977},[594,24738,24739],{},"playsInline",[931,24741,24742],{"align":977},"To be play the video inline or not.",[931,24744,941],{},[2261,24746,24747],{},[2264,24748,24749,24750,24753],{},"Any other attribute for a ",[594,24751,24752],{},"\u003Cvideo>"," tag is accepted and will automatically set",[1307,24755,24756],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":552,"searchDepth":553,"depth":554,"links":24758},[24759,24760],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},"A composable to load video textures in TresJS scenes.",{},{"title":153,"description":24761},"B0IudWGxB6H8-Wl16oRdCL8g07LFjZcBL6tZkeTIFLM",[24766,25259,25900,26367,26539,27368,27690],{"id":24767,"title":163,"body":24768,"description":25255,"extension":567,"links":568,"meta":25256,"navigation":570,"path":164,"seo":25257,"stem":165,"__hash__":25258},"docs/2.api/4.materials/custom-shader-material.md",{"type":477,"value":24769,"toc":25251},[24770,24775,24795,24797,25232,25234,25248],[2343,24771,24772],{},[24773,24774],"materials-custom-shader-material",{},[590,24776,2843,24777,24779,24780,24783,24784,24791,24792,1126],{},[594,24778,7528],{}," package provides ",[594,24781,24782],{},"\u003CTresCustomShaderMaterial />"," component which is a wrapper around the ",[1120,24785,24788],{"href":24786,"rel":24787},"https://github.com/FarazzShaikh/THREE-CustomShaderMaterial",[1124],[594,24789,24790],{},"three-custom-shader-material"," class. As states in the repo, it ",[1685,24793,24794],{},"\"lets you extend Three.js' material library with your own Vertex and Fragment shaders\"",[480,24796,15],{"id":600},[602,24798,24801],{"className":604,"code":24799,"highlights":24800,"language":609,"meta":552,"style":552},"\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",[554,607,830,841,852,862,608,882,892,2671,2680,2714,2723,2732,2741,2763],[594,24802,24803,24823,24843,24861,24865,24878,24886,24890,24898,24906,24938,24946,24954,24962,24977,24994,25011,25025,25042,25078,25100,25108,25123,25144,25159,25165,25180,25196,25200,25208,25216,25224],{"__ignoreMap":552},[613,24804,24805,24807,24809,24811,24813,24815,24817,24819,24821],{"class":615,"line":553},[613,24806,619],{"class":618},[613,24808,623],{"class":622},[613,24810,627],{"class":626},[613,24812,630],{"class":626},[613,24814,633],{"class":618},[613,24816,636],{"class":618},[613,24818,640],{"class":639},[613,24820,636],{"class":618},[613,24822,645],{"class":618},[613,24824,24826,24828,24830,24833,24835,24837,24839,24841],{"class":24825,"line":554},[615,649],[613,24827,653],{"class":652},[613,24829,656],{"class":618},[613,24831,24832],{"class":659}," TresCustomShaderMaterial",[613,24834,669],{"class":618},[613,24836,672],{"class":652},[613,24838,675],{"class":618},[613,24840,678],{"class":639},[613,24842,681],{"class":618},[613,24844,24845,24847,24849,24851,24853,24855,24857,24859],{"class":615,"line":684},[613,24846,653],{"class":652},[613,24848,656],{"class":618},[613,24850,3567],{"class":659},[613,24852,669],{"class":618},[613,24854,672],{"class":652},[613,24856,675],{"class":618},[613,24858,609],{"class":639},[613,24860,681],{"class":618},[613,24862,24863],{"class":615,"line":705},[613,24864,718],{"emptyLinePlaceholder":570},[613,24866,24867,24869,24872,24874,24876],{"class":615,"line":715},[613,24868,2463],{"class":626},[613,24870,24871],{"class":659}," customShaderMaterialRef ",[613,24873,633],{"class":618},[613,24875,3567],{"class":2482},[613,24877,6745],{"class":659},[613,24879,24880,24882,24884],{"class":615,"line":721},[613,24881,708],{"class":618},[613,24883,623],{"class":622},[613,24885,645],{"class":618},[613,24887,24888],{"class":615,"line":731},[613,24889,718],{"emptyLinePlaceholder":570},[613,24891,24892,24894,24896],{"class":615,"line":754},[613,24893,619],{"class":618},[613,24895,726],{"class":622},[613,24897,645],{"class":618},[613,24899,24900,24902,24904],{"class":615,"line":766},[613,24901,734],{"class":618},[613,24903,737],{"class":622},[613,24905,645],{"class":618},[613,24907,24908,24910,24912,24914,24916,24918,24920,24922,24924,24926,24928,24930,24932,24934,24936],{"class":615,"line":776},[613,24909,757],{"class":618},[613,24911,760],{"class":622},[613,24913,789],{"class":618},[613,24915,1467],{"class":626},[613,24917,633],{"class":618},[613,24919,636],{"class":618},[613,24921,1474],{"class":618},[613,24923,2705],{"class":799},[613,24925,1479],{"class":618},[613,24927,2705],{"class":799},[613,24929,1479],{"class":618},[613,24931,2705],{"class":799},[613,24933,1489],{"class":618},[613,24935,636],{"class":618},[613,24937,763],{"class":618},[613,24939,24940,24942,24944],{"class":615,"line":781},[613,24941,757],{"class":618},[613,24943,836],{"class":622},[613,24945,645],{"class":618},[613,24947,24948,24950,24952],{"class":615,"line":807},[613,24949,833],{"class":618},[613,24951,847],{"class":622},[613,24953,763],{"class":618},[613,24955,24957,24959],{"class":24956,"line":607},[615,649],[613,24958,833],{"class":618},[613,24960,24961],{"class":622},"TresCustomShaderMaterial\n",[613,24963,24965,24968,24970,24972,24975],{"class":24964,"line":830},[615,649],[613,24966,24967],{"class":626}," ref",[613,24969,633],{"class":618},[613,24971,636],{"class":618},[613,24973,24974],{"class":639},"customShaderMaterialRef",[613,24976,3200],{"class":618},[613,24978,24980,24982,24985,24987,24989,24992],{"class":24979,"line":841},[615,649],[613,24981,8243],{"class":618},[613,24983,24984],{"class":626},"vertex-shader",[613,24986,633],{"class":618},[613,24988,636],{"class":618},[613,24990,24991],{"class":659},"vertexShader",[613,24993,3200],{"class":618},[613,24995,24997,24999,25002,25004,25006,25009],{"class":24996,"line":852},[615,649],[613,24998,8243],{"class":618},[613,25000,25001],{"class":626},"fragment-shader",[613,25003,633],{"class":618},[613,25005,636],{"class":618},[613,25007,25008],{"class":659},"fragmentShader",[613,25010,3200],{"class":618},[613,25012,25014,25016,25019,25021,25023],{"class":25013,"line":862},[615,649],[613,25015,8243],{"class":618},[613,25017,25018],{"class":626},"uniforms",[613,25020,633],{"class":618},[613,25022,636],{"class":618},[613,25024,3329],{"class":618},[613,25026,25028,25031,25034,25036,25038,25040],{"class":25027,"line":608},[615,649],[613,25029,25030],{"class":622}," u_time",[613,25032,25033],{"class":618},": { ",[613,25035,3754],{"class":622},[613,25037,12619],{"class":618},[613,25039,945],{"class":799},[613,25041,7300],{"class":618},[613,25043,25045,25048,25050,25052,25055,25058,25060,25063,25065,25067,25069,25071,25073,25075],{"class":25044,"line":882},[615,649],[613,25046,25047],{"class":622}," u_color",[613,25049,25033],{"class":618},[613,25051,3754],{"class":622},[613,25053,25054],{"class":618},": new ",[613,25056,25057],{"class":659},"THREE",[613,25059,1126],{"class":618},[613,25061,25062],{"class":2482},"Color",[613,25064,2485],{"class":618},[613,25066,5939],{"class":799},[613,25068,1479],{"class":618},[613,25070,12421],{"class":799},[613,25072,1479],{"class":618},[613,25074,2211],{"class":799},[613,25076,25077],{"class":618},") },\n",[613,25079,25081,25084,25086,25088,25090,25092,25094,25097],{"class":25080,"line":892},[615,649],[613,25082,25083],{"class":622}," u_resolution",[613,25085,25033],{"class":618},[613,25087,3754],{"class":622},[613,25089,25054],{"class":618},[613,25091,25057],{"class":659},[613,25093,1126],{"class":618},[613,25095,25096],{"class":2482},"Vector2",[613,25098,25099],{"class":618},"() }\n",[613,25101,25103,25106],{"class":25102,"line":2671},[615,649],[613,25104,25105],{"class":618}," }",[613,25107,3200],{"class":618},[613,25109,25111,25113,25115,25117,25119,25121],{"class":25110,"line":2680},[615,649],[613,25112,8243],{"class":618},[613,25114,10096],{"class":626},[613,25116,633],{"class":618},[613,25118,636],{"class":618},[613,25120,941],{"class":4536},[613,25122,3200],{"class":618},[613,25124,25126,25128,25131,25133,25135,25137,25139,25142],{"class":25125,"line":2714},[615,649],[613,25127,8243],{"class":618},[613,25129,25130],{"class":626},"side",[613,25132,633],{"class":618},[613,25134,636],{"class":618},[613,25136,25057],{"class":659},[613,25138,1126],{"class":618},[613,25140,25141],{"class":659},"DoubleSide",[613,25143,3200],{"class":618},[613,25145,25147,25150,25152,25154,25157],{"class":25146,"line":2723},[615,649],[613,25148,25149],{"class":626}," base-material",[613,25151,633],{"class":618},[613,25153,636],{"class":618},[613,25155,25156],{"class":639},"MeshLambertMaterial",[613,25158,3200],{"class":618},[613,25160,25162],{"class":25161,"line":2732},[615,649],[613,25163,25164],{"class":626}," silent\n",[613,25166,25168,25170,25172,25174,25176,25178],{"class":25167,"line":2741},[615,649],[613,25169,8243],{"class":618},[613,25171,2801],{"class":626},[613,25173,633],{"class":618},[613,25175,636],{"class":618},[613,25177,2777],{"class":659},[613,25179,3200],{"class":618},[613,25181,25183,25185,25187,25189,25191,25194],{"class":25182,"line":2763},[615,649],[613,25184,8243],{"class":618},[613,25186,7772],{"class":626},[613,25188,633],{"class":618},[613,25190,636],{"class":618},[613,25192,25193],{"class":799},"0xff0000",[613,25195,3200],{"class":618},[613,25197,25198],{"class":615,"line":2814},[613,25199,8297],{"class":618},[613,25201,25202,25204,25206],{"class":615,"line":2823},[613,25203,875],{"class":618},[613,25205,836],{"class":622},[613,25207,645],{"class":618},[613,25209,25210,25212,25214],{"class":615,"line":2832},[613,25211,757],{"class":618},[613,25213,8758],{"class":622},[613,25215,763],{"class":618},[613,25217,25218,25220,25222],{"class":615,"line":4034},[613,25219,885],{"class":618},[613,25221,737],{"class":622},[613,25223,645],{"class":618},[613,25225,25226,25228,25230],{"class":615,"line":4078},[613,25227,708],{"class":618},[613,25229,726],{"class":622},[613,25231,645],{"class":618},[480,25233,902],{"id":901},[590,25235,25236,25237,25240,25241,25243,25244,1126],{},"Being a wrapper around the ",[594,25238,25239],{},"CustomShaderMaterial"," class, the ",[594,25242,24782],{}," component accepts all the props that the class does. You can find the full list of props in the ",[1120,25245,25247],{"href":24786,"rel":25246},[1124],"official repo",[1307,25249,25250],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":552,"searchDepth":553,"depth":554,"links":25252},[25253,25254],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},"Extends Three.js' material library with your own Vertex and Fragment shaders.",{},{"title":163,"description":25255},"WirW-L7fmUIEqDL1ownbJUS8vqN1Ie6ubq6WxZ9mH-o",{"id":25260,"title":167,"body":25261,"description":25896,"extension":567,"links":568,"meta":25897,"navigation":570,"path":168,"seo":25898,"stem":169,"__hash__":25899},"docs/2.api/4.materials/glass-material.md",{"type":477,"value":25262,"toc":25887},[25263,25268,25279,25281,25285,25523,25525,25532,25536,25872,25876,25884],[2343,25264,25265],{},[25266,25267],"materials-glass-material",{},[590,25269,2843,25270,25272,25273,25276,25277,1126],{},[594,25271,7528],{}," package provides a new",[594,25274,25275],{},"\u003CMeshGlassMaterial />"," component that makes a geometry look like glass. This is achieved by re-defining the ",[594,25278,3070],{},[480,25280,15],{"id":600},[4191,25282,25284],{"id":25283},"you-can-use-it-like-you-normally-do-with-tresjs","You can use it like you normally do with TresJs",[602,25286,25289],{"className":604,"code":25287,"highlights":25288,"language":609,"meta":552,"style":552},"\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",[554,776],[594,25290,25291,25311,25330,25349,25357,25361,25369,25377,25433,25441,25450,25459,25467,25475,25507,25515],{"__ignoreMap":552},[613,25292,25293,25295,25297,25299,25301,25303,25305,25307,25309],{"class":615,"line":553},[613,25294,619],{"class":618},[613,25296,623],{"class":622},[613,25298,627],{"class":626},[613,25300,630],{"class":626},[613,25302,633],{"class":618},[613,25304,636],{"class":618},[613,25306,640],{"class":639},[613,25308,636],{"class":618},[613,25310,645],{"class":618},[613,25312,25314,25316,25318,25320,25322,25324,25326,25328],{"class":25313,"line":554},[615,649],[613,25315,653],{"class":652},[613,25317,656],{"class":618},[613,25319,691],{"class":659},[613,25321,669],{"class":618},[613,25323,672],{"class":652},[613,25325,675],{"class":618},[613,25327,700],{"class":639},[613,25329,681],{"class":618},[613,25331,25332,25334,25336,25339,25341,25343,25345,25347],{"class":615,"line":684},[613,25333,653],{"class":652},[613,25335,656],{"class":618},[613,25337,25338],{"class":659}," MeshGlassMaterial",[613,25340,669],{"class":618},[613,25342,672],{"class":652},[613,25344,675],{"class":618},[613,25346,678],{"class":639},[613,25348,681],{"class":618},[613,25350,25351,25353,25355],{"class":615,"line":705},[613,25352,708],{"class":618},[613,25354,623],{"class":622},[613,25356,645],{"class":618},[613,25358,25359],{"class":615,"line":715},[613,25360,718],{"emptyLinePlaceholder":570},[613,25362,25363,25365,25367],{"class":615,"line":721},[613,25364,619],{"class":618},[613,25366,726],{"class":622},[613,25368,645],{"class":618},[613,25370,25371,25373,25375],{"class":615,"line":731},[613,25372,734],{"class":618},[613,25374,737],{"class":622},[613,25376,645],{"class":618},[613,25378,25379,25381,25383,25385,25387,25389,25391,25393,25395,25397,25399,25401,25403,25405,25407,25409,25411,25413,25415,25417,25419,25421,25423,25425,25427,25429,25431],{"class":615,"line":754},[613,25380,757],{"class":618},[613,25382,760],{"class":622},[613,25384,789],{"class":618},[613,25386,1467],{"class":626},[613,25388,633],{"class":618},[613,25390,636],{"class":618},[613,25392,1474],{"class":618},[613,25394,2705],{"class":799},[613,25396,1479],{"class":618},[613,25398,2705],{"class":799},[613,25400,1479],{"class":618},[613,25402,2705],{"class":799},[613,25404,1489],{"class":618},[613,25406,636],{"class":618},[613,25408,789],{"class":618},[613,25410,8681],{"class":626},[613,25412,633],{"class":618},[613,25414,636],{"class":618},[613,25416,1474],{"class":618},[613,25418,945],{"class":799},[613,25420,1479],{"class":618},[613,25422,945],{"class":799},[613,25424,1479],{"class":618},[613,25426,945],{"class":799},[613,25428,1489],{"class":618},[613,25430,636],{"class":618},[613,25432,763],{"class":618},[613,25434,25435,25437,25439],{"class":615,"line":766},[613,25436,757],{"class":618},[613,25438,836],{"class":622},[613,25440,645],{"class":618},[613,25442,25444,25446,25448],{"class":25443,"line":776},[615,649],[613,25445,833],{"class":618},[613,25447,10350],{"class":622},[613,25449,763],{"class":618},[613,25451,25452,25454,25457],{"class":615,"line":781},[613,25453,833],{"class":618},[613,25455,25456],{"class":622},"MeshGlassMaterial",[613,25458,763],{"class":618},[613,25460,25461,25463,25465],{"class":615,"line":807},[613,25462,875],{"class":618},[613,25464,836],{"class":622},[613,25466,645],{"class":618},[613,25468,25469,25471,25473],{"class":615,"line":607},[613,25470,757],{"class":618},[613,25472,8758],{"class":622},[613,25474,763],{"class":618},[613,25476,25477,25479,25481,25483,25485,25487,25489,25491,25493,25495,25497,25499,25501,25503,25505],{"class":615,"line":830},[613,25478,757],{"class":618},[613,25480,8779],{"class":622},[613,25482,789],{"class":618},[613,25484,1467],{"class":626},[613,25486,633],{"class":618},[613,25488,636],{"class":618},[613,25490,1474],{"class":618},[613,25492,945],{"class":799},[613,25494,1479],{"class":618},[613,25496,800],{"class":799},[613,25498,1479],{"class":618},[613,25500,3876],{"class":799},[613,25502,1489],{"class":618},[613,25504,636],{"class":618},[613,25506,763],{"class":618},[613,25508,25509,25511,25513],{"class":615,"line":841},[613,25510,885],{"class":618},[613,25512,737],{"class":622},[613,25514,645],{"class":618},[613,25516,25517,25519,25521],{"class":615,"line":852},[613,25518,708],{"class":618},[613,25520,726],{"class":622},[613,25522,645],{"class":618},[480,25524,902],{"id":901},[590,25526,25527,25528,25531],{},"No props are required. The component extends ",[594,25529,25530],{},"THREE.MeshPhysicalMaterial"," and accepts all the same props plus additional reflection-specific properties.",[4191,25533,25535],{"id":25534},"you-can-also-replace-the-material-of-an-existing-mesh-like-this","You can also replace the material of an existing mesh like this:",[602,25537,25540],{"className":604,"code":25538,"highlights":25539,"language":609,"meta":552,"style":552},"\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",[705,721,731,754,766,776,781,807,607,830,841,892],[594,25541,25542,25562,25588,25606,25629,25633,25647,25660,25665,25682,25688,25713,25718,25724,25750,25757,25765,25773,25781,25789,25809,25817,25822,25840,25848,25856,25864],{"__ignoreMap":552},[613,25543,25544,25546,25548,25550,25552,25554,25556,25558,25560],{"class":615,"line":553},[613,25545,619],{"class":618},[613,25547,623],{"class":622},[613,25549,627],{"class":626},[613,25551,630],{"class":626},[613,25553,633],{"class":618},[613,25555,636],{"class":618},[613,25557,640],{"class":639},[613,25559,636],{"class":618},[613,25561,645],{"class":618},[613,25563,25564,25566,25568,25570,25572,25574,25576,25578,25580,25582,25584,25586],{"class":615,"line":554},[613,25565,653],{"class":652},[613,25567,656],{"class":618},[613,25569,3975],{"class":659},[613,25571,663],{"class":618},[613,25573,3567],{"class":659},[613,25575,663],{"class":618},[613,25577,10656],{"class":659},[613,25579,669],{"class":618},[613,25581,672],{"class":652},[613,25583,675],{"class":618},[613,25585,609],{"class":639},[613,25587,681],{"class":618},[613,25589,25590,25592,25594,25596,25598,25600,25602,25604],{"class":615,"line":684},[613,25591,653],{"class":652},[613,25593,656],{"class":618},[613,25595,691],{"class":659},[613,25597,669],{"class":618},[613,25599,672],{"class":652},[613,25601,675],{"class":618},[613,25603,700],{"class":639},[613,25605,681],{"class":618},[613,25607,25609,25611,25613,25615,25617,25619,25621,25623,25625,25627],{"class":25608,"line":705},[615,649],[613,25610,653],{"class":652},[613,25612,656],{"class":618},[613,25614,25338],{"class":659},[613,25616,663],{"class":618},[613,25618,1377],{"class":659},[613,25620,669],{"class":618},[613,25622,672],{"class":652},[613,25624,675],{"class":618},[613,25626,678],{"class":639},[613,25628,681],{"class":618},[613,25630,25631],{"class":615,"line":715},[613,25632,718],{"emptyLinePlaceholder":570},[613,25634,25636,25638,25641,25643,25645],{"class":25635,"line":721},[615,649],[613,25637,2463],{"class":626},[613,25639,25640],{"class":659}," glassMaterialRef ",[613,25642,633],{"class":618},[613,25644,3567],{"class":2482},[613,25646,6745],{"class":659},[613,25648,25650,25652,25654,25656,25658],{"class":25649,"line":731},[615,649],[613,25651,2463],{"class":626},[613,25653,14919],{"class":659},[613,25655,633],{"class":618},[613,25657,3567],{"class":2482},[613,25659,6745],{"class":659},[613,25661,25663],{"class":25662,"line":754},[615,649],[613,25664,718],{"emptyLinePlaceholder":570},[613,25666,25668,25670,25673,25675,25678,25680],{"class":25667,"line":766},[615,649],[613,25669,10705],{"class":2482},[613,25671,25672],{"class":659},"(glassMaterialRef",[613,25674,663],{"class":618},[613,25676,25677],{"class":7049}," value",[613,25679,3746],{"class":626},[613,25681,1184],{"class":618},[613,25683,25685],{"class":25684,"line":776},[615,649],[613,25686,25687],{"class":1189}," // For good practice we dispose the old material\n",[613,25689,25691,25694,25696,25698,25700,25703,25705,25707,25709,25711],{"class":25690,"line":781},[615,649],[613,25692,25693],{"class":659}," boxRef",[613,25695,1126],{"class":618},[613,25697,3754],{"class":659},[613,25699,1126],{"class":618},[613,25701,25702],{"class":659},"instance",[613,25704,1126],{"class":618},[613,25706,5393],{"class":659},[613,25708,1126],{"class":618},[613,25710,21387],{"class":2482},[613,25712,6745],{"class":622},[613,25714,25716],{"class":25715,"line":807},[615,649],[613,25717,718],{"emptyLinePlaceholder":570},[613,25719,25721],{"class":25720,"line":607},[615,649],[613,25722,25723],{"class":1189}," // We assign the new MeshGlassMaterialClass\n",[613,25725,25727,25729,25731,25733,25735,25737,25739,25741,25743,25745,25747],{"class":25726,"line":830},[615,649],[613,25728,25693],{"class":659},[613,25730,1126],{"class":618},[613,25732,3754],{"class":659},[613,25734,1126],{"class":618},[613,25736,25702],{"class":659},[613,25738,1126],{"class":618},[613,25740,5393],{"class":659},[613,25742,2479],{"class":618},[613,25744,25677],{"class":659},[613,25746,1126],{"class":618},[613,25748,25749],{"class":659},"MeshGlassMaterialClass\n",[613,25751,25753,25755],{"class":25752,"line":841},[615,649],[613,25754,2476],{"class":618},[613,25756,2496],{"class":659},[613,25758,25759,25761,25763],{"class":615,"line":852},[613,25760,708],{"class":618},[613,25762,623],{"class":622},[613,25764,645],{"class":618},[613,25766,25767,25769,25771],{"class":615,"line":862},[613,25768,619],{"class":618},[613,25770,726],{"class":622},[613,25772,645],{"class":618},[613,25774,25775,25777,25779],{"class":615,"line":608},[613,25776,734],{"class":618},[613,25778,836],{"class":622},[613,25780,645],{"class":618},[613,25782,25783,25785,25787],{"class":615,"line":882},[613,25784,757],{"class":618},[613,25786,10350],{"class":622},[613,25788,763],{"class":618},[613,25790,25792,25794,25796,25798,25800,25802,25805,25807],{"class":25791,"line":892},[615,649],[613,25793,757],{"class":618},[613,25795,25456],{"class":622},[613,25797,3975],{"class":626},[613,25799,633],{"class":618},[613,25801,636],{"class":618},[613,25803,25804],{"class":639},"glassMaterialRef",[613,25806,636],{"class":618},[613,25808,763],{"class":618},[613,25810,25811,25813,25815],{"class":615,"line":2671},[613,25812,885],{"class":618},[613,25814,836],{"class":622},[613,25816,645],{"class":618},[613,25818,25819],{"class":615,"line":2680},[613,25820,25821],{"class":1189}," \u003C!-- Mesh to be replaced -->\n",[613,25823,25824,25826,25828,25830,25832,25834,25836,25838],{"class":615,"line":2714},[613,25825,734],{"class":618},[613,25827,836],{"class":622},[613,25829,3975],{"class":626},[613,25831,633],{"class":618},[613,25833,636],{"class":618},[613,25835,15015],{"class":639},[613,25837,636],{"class":618},[613,25839,645],{"class":618},[613,25841,25842,25844,25846],{"class":615,"line":2723},[613,25843,757],{"class":618},[613,25845,847],{"class":622},[613,25847,763],{"class":618},[613,25849,25850,25852,25854],{"class":615,"line":2732},[613,25851,757],{"class":618},[613,25853,3063],{"class":622},[613,25855,12671],{"class":618},[613,25857,25858,25860,25862],{"class":615,"line":2741},[613,25859,885],{"class":618},[613,25861,836],{"class":622},[613,25863,645],{"class":618},[613,25865,25866,25868,25870],{"class":615,"line":2763},[613,25867,708],{"class":618},[613,25869,726],{"class":622},[613,25871,645],{"class":618},[480,25873,25875],{"id":25874},"tips","Tips",[2261,25877,25878,25881],{},[2264,25879,25880],{},"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",[2264,25882,25883],{},"Another good option is to provide a normal texture as clearcoatNormalMap to add different results",[1307,25885,25886],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":552,"searchDepth":553,"depth":554,"links":25888},[25889,25892,25895],{"id":600,"depth":554,"text":15,"children":25890},[25891],{"id":25283,"depth":684,"text":25284},{"id":901,"depth":554,"text":902,"children":25893},[25894],{"id":25534,"depth":684,"text":25535},{"id":25874,"depth":554,"text":25875},"Makes a geometry look like glass by re-defining the MeshPhysicalMaterial.",{},{"title":167,"description":25896},"XeLIOrrqO5hF6DK2JnTAyGusif0o80_d6hTc8m5QJQE",{"id":25901,"title":171,"body":25902,"description":26363,"extension":567,"links":568,"meta":26364,"navigation":570,"path":172,"seo":26365,"stem":173,"__hash__":26366},"docs/2.api/4.materials/holographic-material.md",{"type":477,"value":25903,"toc":26358},[25904,25909,25913,25916,25919,25924,25926,26134,26136,26356],[584,25905,25906],{},[25907,25908],"materials-holographic-material",{},[480,25910,25912],{"id":25911},"a-simple-to-use-holographic-material-for-tresjs","A simple to use holographic material for TresJS",[590,25914,25915],{},"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.",[590,25917,25918],{},"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.",[2054,25920,25921],{},[590,25922,25923],{},"This component ports Anderson Mancini's threejs-vanilla-holographic-material to TresJS. All credit goes to him.",[480,25925,15],{"id":600},[602,25927,25930],{"className":604,"code":25928,"highlights":25929,"language":609,"meta":552,"style":552},"\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",[684,776],[594,25931,25932,25952,25970,25994,25998,26006,26014,26022,26072,26092,26102,26110,26118,26126],{"__ignoreMap":552},[613,25933,25934,25936,25938,25940,25942,25944,25946,25948,25950],{"class":615,"line":553},[613,25935,619],{"class":618},[613,25937,623],{"class":622},[613,25939,627],{"class":626},[613,25941,630],{"class":626},[613,25943,633],{"class":618},[613,25945,636],{"class":618},[613,25947,640],{"class":639},[613,25949,636],{"class":618},[613,25951,645],{"class":618},[613,25953,25954,25956,25958,25960,25962,25964,25966,25968],{"class":615,"line":554},[613,25955,653],{"class":652},[613,25957,656],{"class":618},[613,25959,691],{"class":659},[613,25961,669],{"class":618},[613,25963,672],{"class":652},[613,25965,675],{"class":618},[613,25967,700],{"class":639},[613,25969,681],{"class":618},[613,25971,25973,25975,25977,25980,25982,25984,25986,25988,25990,25992],{"class":25972,"line":684},[615,649],[613,25974,653],{"class":652},[613,25976,656],{"class":618},[613,25978,25979],{"class":659}," HolographicMaterial",[613,25981,663],{"class":618},[613,25983,24459],{"class":659},[613,25985,669],{"class":618},[613,25987,672],{"class":652},[613,25989,675],{"class":618},[613,25991,678],{"class":639},[613,25993,681],{"class":618},[613,25995,25996],{"class":615,"line":705},[613,25997,718],{"emptyLinePlaceholder":570},[613,25999,26000,26002,26004],{"class":615,"line":715},[613,26001,708],{"class":618},[613,26003,623],{"class":622},[613,26005,645],{"class":618},[613,26007,26008,26010,26012],{"class":615,"line":721},[613,26009,619],{"class":618},[613,26011,726],{"class":622},[613,26013,645],{"class":618},[613,26015,26016,26018,26020],{"class":615,"line":731},[613,26017,734],{"class":618},[613,26019,737],{"class":622},[613,26021,645],{"class":618},[613,26023,26024,26026,26028,26030,26032,26034,26036,26038,26040,26042,26044,26046,26048,26050,26052,26054,26056,26059,26061,26063,26065,26067,26069],{"class":615,"line":754},[613,26025,757],{"class":618},[613,26027,760],{"class":622},[613,26029,789],{"class":618},[613,26031,1467],{"class":626},[613,26033,633],{"class":618},[613,26035,636],{"class":618},[613,26037,1474],{"class":618},[613,26039,2705],{"class":799},[613,26041,1479],{"class":618},[613,26043,2705],{"class":799},[613,26045,1479],{"class":618},[613,26047,2705],{"class":799},[613,26049,1489],{"class":618},[613,26051,636],{"class":618},[613,26053,789],{"class":618},[613,26055,8681],{"class":626},[613,26057,26058],{"class":618},"=[",[613,26060,945],{"class":799},[613,26062,663],{"class":618},[613,26064,945],{"class":799},[613,26066,663],{"class":618},[613,26068,945],{"class":799},[613,26070,26071],{"class":618},"] />\n",[613,26073,26074,26076,26078,26080,26082,26084,26086,26088,26090],{"class":615,"line":766},[613,26075,757],{"class":618},[613,26077,261],{"class":622},[613,26079,789],{"class":618},[613,26081,792],{"class":626},[613,26083,633],{"class":618},[613,26085,636],{"class":618},[613,26087,1521],{"class":799},[613,26089,636],{"class":618},[613,26091,645],{"class":618},[613,26093,26095,26097,26100],{"class":26094,"line":776},[615,649],[613,26096,833],{"class":618},[613,26098,26099],{"class":622},"HolographicMaterial",[613,26101,763],{"class":618},[613,26103,26104,26106,26108],{"class":615,"line":781},[613,26105,875],{"class":618},[613,26107,261],{"class":622},[613,26109,645],{"class":618},[613,26111,26112,26114,26116],{"class":615,"line":807},[613,26113,757],{"class":618},[613,26115,8758],{"class":622},[613,26117,763],{"class":618},[613,26119,26120,26122,26124],{"class":615,"line":607},[613,26121,885],{"class":618},[613,26123,737],{"class":622},[613,26125,645],{"class":618},[613,26127,26128,26130,26132],{"class":615,"line":830},[613,26129,708],{"class":618},[613,26131,726],{"class":622},[613,26133,645],{"class":618},[480,26135,902],{"id":901},[907,26137,26138,26151],{},[910,26139,26140],{},[913,26141,26142,26144,26146,26148],{},[916,26143,918],{"align":977},[916,26145,921],{"align":977},[916,26147,6179],{},[916,26149,26150],{},"default",[926,26152,26153,26172,26190,26209,26227,26245,26264,26283,26301,26319,26337],{},[913,26154,26155,26160,26163,26167],{},[931,26156,26157],{"align":977},[1681,26158,26159],{},"fresnelAmount",[931,26161,26162],{"align":977},"Value of the Fresnel effect. Ranges from 0.0 to 1.0.",[931,26164,26165],{},[594,26166,10530],{},[931,26168,26169],{},[594,26170,26171],{},"0.45",[913,26173,26174,26179,26182,26186],{},[931,26175,26176],{"align":977},[1681,26177,26178],{},"fresnelOpacity",[931,26180,26181],{"align":977},"Opacity of the Fresnel effect. Ranges from 0.0 to 1.0.",[931,26183,26184],{},[594,26185,10530],{},[931,26187,26188],{},[594,26189,12299],{},[913,26191,26192,26197,26200,26204],{},[931,26193,26194],{"align":977},[1681,26195,26196],{},"scanlineSize",[931,26198,26199],{"align":977},"Size of the scanlines. Ranges from 1 to 15.",[931,26201,26202],{},[594,26203,10530],{},[931,26205,26206],{},[594,26207,26208],{},"8.0",[913,26210,26211,26216,26219,26223],{},[931,26212,26213],{"align":977},[1681,26214,26215],{},"hologramBrightness",[931,26217,26218],{"align":977},"Brightness of the hologram. Ranges from 0.0 to 2.0.",[931,26220,26221],{},[594,26222,10530],{},[931,26224,26225],{},[594,26226,3926],{},[913,26228,26229,26234,26237,26241],{},[931,26230,26231],{"align":977},[1681,26232,26233],{},"signalSpeed",[931,26235,26236],{"align":977},"Speed of the signal effect. Ranges from 0.0 to 2.0.",[931,26238,26239],{},[594,26240,10530],{},[931,26242,26243],{},[594,26244,26171],{},[913,26246,26247,26252,26255,26259],{},[931,26248,26249],{"align":977},[1681,26250,26251],{},"hologramColor",[931,26253,26254],{"align":977},"Specifies the color of the hologram.",[931,26256,26257],{},[594,26258,10552],{},[931,26260,26261],{},[594,26262,26263],{},"\"#00d5ff\"",[913,26265,26266,26271,26274,26279],{},[931,26267,26268],{"align":977},[1681,26269,26270],{},"enableBlinking",[931,26272,26273],{"align":977},"Enables or disables the blinking effect.",[931,26275,26276],{},[594,26277,26278],{},"Boolean",[931,26280,26281],{},[594,26282,941],{},[913,26284,26285,26290,26293,26297],{},[931,26286,26287],{"align":977},[1681,26288,26289],{},"hologramOpacity",[931,26291,26292],{"align":977},"Specifies the opacity of the hologram.",[931,26294,26295],{},[594,26296,10530],{},[931,26298,26299],{},[594,26300,12299],{},[913,26302,26303,26308,26311,26315],{},[931,26304,26305],{"align":977},[1681,26306,26307],{},"blinkFresnelOnly",[931,26309,26310],{"align":977},"Enables or disables the blinking effect for the Fresnel only.",[931,26312,26313],{},[594,26314,26278],{},[931,26316,26317],{},[594,26318,941],{},[913,26320,26321,26326,26329,26333],{},[931,26322,26323],{"align":977},[1681,26324,26325],{},"enableAdditive",[931,26327,26328],{"align":977},"Enables or disables the Additive Blend Mode.",[931,26330,26331],{},[594,26332,26278],{},[931,26334,26335],{},[594,26336,941],{},[913,26338,26339,26343,26346,26351],{},[931,26340,26341],{"align":977},[1681,26342,25130],{},[931,26344,26345],{"align":977},"Specifies side for the material, as String.",[931,26347,26348],{},[594,26349,26350],{},"THREE.FrontSide, THREE.BackSide, THREE.DoubleSide",[931,26352,26353],{},[594,26354,26355],{},"FrontSide",[1307,26357,1656],{},{"title":552,"searchDepth":553,"depth":554,"links":26359},[26360,26361,26362],{"id":25911,"depth":554,"text":25912},{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},"A simple to use holographic material for TresJS with vibrant colors, dynamic scanlines, and futuristic brilliance.",{},{"title":171,"description":26363},"qI6m7jV8AEZ5_Ruhn6hSlmpTi7LrcHgetMD_vYArm8Y",{"id":26368,"title":175,"body":26369,"description":26535,"extension":567,"links":568,"meta":26536,"navigation":570,"path":176,"seo":26537,"stem":177,"__hash__":26538},"docs/2.api/4.materials/mesh-discard-material.md",{"type":477,"value":26370,"toc":26532},[26371,26377,26379,26529],[590,26372,26373,26376],{},[594,26374,26375],{},"\u003CMeshDiscardMaterial />"," hides the object it's attached to. The object's shadows and children will be rendered.",[480,26378,15],{"id":600},[602,26380,26383],{"className":604,"code":26381,"highlights":26382,"language":609,"meta":552,"style":552},"\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",[684,781],[594,26384,26385,26405,26423,26443,26451,26455,26463,26471,26479,26487,26495,26505,26513,26521],{"__ignoreMap":552},[613,26386,26387,26389,26391,26393,26395,26397,26399,26401,26403],{"class":615,"line":553},[613,26388,619],{"class":618},[613,26390,623],{"class":622},[613,26392,627],{"class":626},[613,26394,630],{"class":626},[613,26396,633],{"class":618},[613,26398,636],{"class":618},[613,26400,640],{"class":639},[613,26402,636],{"class":618},[613,26404,645],{"class":618},[613,26406,26407,26409,26411,26413,26415,26417,26419,26421],{"class":615,"line":554},[613,26408,653],{"class":652},[613,26410,656],{"class":618},[613,26412,691],{"class":659},[613,26414,669],{"class":618},[613,26416,672],{"class":652},[613,26418,675],{"class":618},[613,26420,700],{"class":639},[613,26422,681],{"class":618},[613,26424,26426,26428,26430,26433,26435,26437,26439,26441],{"class":26425,"line":684},[615,649],[613,26427,653],{"class":652},[613,26429,656],{"class":618},[613,26431,26432],{"class":659}," MeshDiscardMaterial",[613,26434,669],{"class":618},[613,26436,672],{"class":652},[613,26438,675],{"class":618},[613,26440,678],{"class":639},[613,26442,681],{"class":618},[613,26444,26445,26447,26449],{"class":615,"line":705},[613,26446,708],{"class":618},[613,26448,623],{"class":622},[613,26450,645],{"class":618},[613,26452,26453],{"class":615,"line":715},[613,26454,718],{"emptyLinePlaceholder":570},[613,26456,26457,26459,26461],{"class":615,"line":721},[613,26458,619],{"class":618},[613,26460,726],{"class":622},[613,26462,645],{"class":618},[613,26464,26465,26467,26469],{"class":615,"line":731},[613,26466,734],{"class":618},[613,26468,737],{"class":622},[613,26470,645],{"class":618},[613,26472,26473,26475,26477],{"class":615,"line":754},[613,26474,757],{"class":618},[613,26476,760],{"class":622},[613,26478,763],{"class":618},[613,26480,26481,26483,26485],{"class":615,"line":766},[613,26482,757],{"class":618},[613,26484,836],{"class":622},[613,26486,645],{"class":618},[613,26488,26489,26491,26493],{"class":615,"line":776},[613,26490,833],{"class":618},[613,26492,847],{"class":622},[613,26494,763],{"class":618},[613,26496,26498,26500,26503],{"class":26497,"line":781},[615,649],[613,26499,833],{"class":618},[613,26501,26502],{"class":622},"MeshDiscardMaterial",[613,26504,763],{"class":618},[613,26506,26507,26509,26511],{"class":615,"line":807},[613,26508,875],{"class":618},[613,26510,836],{"class":622},[613,26512,645],{"class":618},[613,26514,26515,26517,26519],{"class":615,"line":607},[613,26516,885],{"class":618},[613,26518,737],{"class":622},[613,26520,645],{"class":618},[613,26522,26523,26525,26527],{"class":615,"line":830},[613,26524,708],{"class":618},[613,26526,726],{"class":622},[613,26528,645],{"class":618},[1307,26530,26531],{},"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":552,"searchDepth":553,"depth":554,"links":26533},[26534],{"id":600,"depth":554,"text":15},"Hides the object it's attached to while keeping shadows and children visible.",{},{"title":175,"description":26535},"ivSz3UBTzifkzor3XvoS_5CUJD_0d-7Dh7JvwBwFh80",{"id":26540,"title":179,"body":26541,"description":27364,"extension":567,"links":568,"meta":27365,"navigation":570,"path":180,"seo":27366,"stem":181,"__hash__":27367},"docs/2.api/4.materials/mesh-reflection-material.md",{"type":477,"value":26542,"toc":27360},[26543,26548,26559,26568,26575,26577,27064,27066,27337,27358],[584,26544,26545],{},[26546,26547],"materials-mesh-reflection-material",{},[590,26549,2843,26550,8516,26552,26555,26556,1126],{},[594,26551,7528],{},[594,26553,26554],{},"\u003CMeshReflectionMaterial />"," component for making floors or walls that reflect the objects in your ",[594,26557,26558],{},"Scene",[590,26560,26561,26562,26567],{},"The component is based on the excellent ",[1120,26563,26566],{"href":26564,"rel":26565},"https://github.com/pmndrs/drei",[1124],"Drei"," component of the same name.",[590,26569,26570,26571,26574],{},"It extends ",[594,26572,26573],{},"THREE.MeshStandardMaterial"," and accepts all the same props.",[480,26576,15],{"id":600},[602,26578,26581],{"className":604,"code":26579,"highlights":26580,"language":609,"meta":552,"style":552},"\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",[684,852,862,608,882],[594,26582,26583,26603,26621,26641,26649,26653,26661,26669,26725,26767,26796,26803,26826,26842,26858,26873,26888,26902,26916,26930,26934,26942,26974,26982,27000,27008,27016,27048,27056],{"__ignoreMap":552},[613,26584,26585,26587,26589,26591,26593,26595,26597,26599,26601],{"class":615,"line":553},[613,26586,619],{"class":618},[613,26588,623],{"class":622},[613,26590,627],{"class":626},[613,26592,630],{"class":626},[613,26594,633],{"class":618},[613,26596,636],{"class":618},[613,26598,640],{"class":639},[613,26600,636],{"class":618},[613,26602,645],{"class":618},[613,26604,26605,26607,26609,26611,26613,26615,26617,26619],{"class":615,"line":554},[613,26606,653],{"class":652},[613,26608,656],{"class":618},[613,26610,691],{"class":659},[613,26612,669],{"class":618},[613,26614,672],{"class":652},[613,26616,675],{"class":618},[613,26618,700],{"class":639},[613,26620,681],{"class":618},[613,26622,26624,26626,26628,26631,26633,26635,26637,26639],{"class":26623,"line":684},[615,649],[613,26625,653],{"class":652},[613,26627,656],{"class":618},[613,26629,26630],{"class":659}," MeshReflectionMaterial",[613,26632,669],{"class":618},[613,26634,672],{"class":652},[613,26636,675],{"class":618},[613,26638,678],{"class":639},[613,26640,681],{"class":618},[613,26642,26643,26645,26647],{"class":615,"line":705},[613,26644,708],{"class":618},[613,26646,623],{"class":622},[613,26648,645],{"class":618},[613,26650,26651],{"class":615,"line":715},[613,26652,718],{"emptyLinePlaceholder":570},[613,26654,26655,26657,26659],{"class":615,"line":721},[613,26656,619],{"class":618},[613,26658,726],{"class":622},[613,26660,645],{"class":618},[613,26662,26663,26665,26667],{"class":615,"line":731},[613,26664,734],{"class":618},[613,26666,737],{"class":622},[613,26668,645],{"class":618},[613,26670,26671,26673,26675,26677,26679,26681,26683,26685,26687,26689,26691,26693,26695,26697,26699,26701,26703,26705,26707,26709,26711,26713,26715,26717,26719,26721,26723],{"class":615,"line":754},[613,26672,757],{"class":618},[613,26674,760],{"class":622},[613,26676,789],{"class":618},[613,26678,1467],{"class":626},[613,26680,633],{"class":618},[613,26682,636],{"class":618},[613,26684,1474],{"class":618},[613,26686,2705],{"class":799},[613,26688,1479],{"class":618},[613,26690,2705],{"class":799},[613,26692,1479],{"class":618},[613,26694,2705],{"class":799},[613,26696,1489],{"class":618},[613,26698,636],{"class":618},[613,26700,789],{"class":618},[613,26702,8681],{"class":626},[613,26704,633],{"class":618},[613,26706,636],{"class":618},[613,26708,1474],{"class":618},[613,26710,945],{"class":799},[613,26712,1479],{"class":618},[613,26714,945],{"class":799},[613,26716,1479],{"class":618},[613,26718,945],{"class":799},[613,26720,1489],{"class":618},[613,26722,636],{"class":618},[613,26724,763],{"class":618},[613,26726,26727,26729,26731,26733,26735,26737,26739,26741,26744,26746,26749,26751,26753,26755,26757,26759,26761,26763,26765],{"class":615,"line":766},[613,26728,757],{"class":618},[613,26730,836],{"class":622},[613,26732,789],{"class":618},[613,26734,5839],{"class":626},[613,26736,633],{"class":618},[613,26738,636],{"class":618},[613,26740,3923],{"class":618},[613,26742,26743],{"class":659},"Math",[613,26745,1126],{"class":618},[613,26747,26748],{"class":659},"PI",[613,26750,3405],{"class":618},[613,26752,800],{"class":799},[613,26754,1479],{"class":618},[613,26756,945],{"class":799},[613,26758,1479],{"class":618},[613,26760,945],{"class":799},[613,26762,1489],{"class":618},[613,26764,636],{"class":618},[613,26766,645],{"class":618},[613,26768,26769,26771,26774,26776,26778,26780,26782,26784,26786,26788,26790,26792,26794],{"class":615,"line":776},[613,26770,833],{"class":618},[613,26772,26773],{"class":622},"TresPlaneGeometry",[613,26775,789],{"class":618},[613,26777,1997],{"class":626},[613,26779,633],{"class":618},[613,26781,636],{"class":618},[613,26783,1474],{"class":618},[613,26785,1486],{"class":799},[613,26787,1479],{"class":618},[613,26789,1486],{"class":799},[613,26791,1489],{"class":618},[613,26793,636],{"class":618},[613,26795,763],{"class":618},[613,26797,26798,26800],{"class":615,"line":781},[613,26799,833],{"class":618},[613,26801,26802],{"class":622},"MeshReflectionMaterial\n",[613,26804,26805,26807,26809,26811,26813,26815,26818,26820,26822,26824],{"class":615,"line":807},[613,26806,8243],{"class":618},[613,26808,20197],{"class":626},[613,26810,633],{"class":618},[613,26812,636],{"class":618},[613,26814,1474],{"class":618},[613,26816,26817],{"class":799},"300",[613,26819,1479],{"class":618},[613,26821,11242],{"class":799},[613,26823,1489],{"class":618},[613,26825,3200],{"class":618},[613,26827,26828,26830,26833,26835,26837,26840],{"class":615,"line":607},[613,26829,8243],{"class":618},[613,26831,26832],{"class":626},"mixBlur",[613,26834,633],{"class":618},[613,26836,636],{"class":618},[613,26838,26839],{"class":799},"30",[613,26841,3200],{"class":618},[613,26843,26844,26846,26849,26851,26853,26856],{"class":615,"line":830},[613,26845,8243],{"class":618},[613,26847,26848],{"class":626},"mixStrength",[613,26850,633],{"class":618},[613,26852,636],{"class":618},[613,26854,26855],{"class":799},"80",[613,26857,3200],{"class":618},[613,26859,26860,26862,26865,26867,26869,26871],{"class":615,"line":841},[613,26861,8243],{"class":618},[613,26863,26864],{"class":626},"mixContrast",[613,26866,633],{"class":618},[613,26868,636],{"class":618},[613,26870,1901],{"class":799},[613,26872,3200],{"class":618},[613,26874,26876,26879,26881,26883,26886],{"class":26875,"line":852},[615,649],[613,26877,26878],{"class":626}," color",[613,26880,633],{"class":618},[613,26882,636],{"class":618},[613,26884,26885],{"class":639},"#a0a0a0",[613,26887,3200],{"class":618},[613,26889,26891,26894,26896,26898,26900],{"class":26890,"line":862},[615,649],[613,26892,26893],{"class":626}," metalness",[613,26895,633],{"class":618},[613,26897,636],{"class":618},[613,26899,1521],{"class":639},[613,26901,3200],{"class":618},[613,26903,26905,26908,26910,26912,26914],{"class":26904,"line":608},[615,649],[613,26906,26907],{"class":626}," roughness",[613,26909,633],{"class":618},[613,26911,636],{"class":618},[613,26913,1901],{"class":639},[613,26915,3200],{"class":618},[613,26917,26919,26922,26924,26926,26928],{"class":26918,"line":882},[615,649],[613,26920,26921],{"class":626}," mirror",[613,26923,633],{"class":618},[613,26925,636],{"class":618},[613,26927,945],{"class":639},[613,26929,3200],{"class":618},[613,26931,26932],{"class":615,"line":892},[613,26933,8297],{"class":618},[613,26935,26936,26938,26940],{"class":615,"line":2671},[613,26937,875],{"class":618},[613,26939,836],{"class":622},[613,26941,645],{"class":618},[613,26943,26944,26946,26948,26950,26952,26954,26956,26958,26960,26962,26964,26966,26968,26970,26972],{"class":615,"line":2680},[613,26945,757],{"class":618},[613,26947,836],{"class":622},[613,26949,789],{"class":618},[613,26951,1467],{"class":626},[613,26953,633],{"class":618},[613,26955,636],{"class":618},[613,26957,1474],{"class":618},[613,26959,945],{"class":799},[613,26961,1479],{"class":618},[613,26963,1901],{"class":799},[613,26965,1479],{"class":618},[613,26967,945],{"class":799},[613,26969,1489],{"class":618},[613,26971,636],{"class":618},[613,26973,645],{"class":618},[613,26975,26976,26978,26980],{"class":615,"line":2714},[613,26977,833],{"class":618},[613,26979,847],{"class":622},[613,26981,763],{"class":618},[613,26983,26984,26986,26988,26990,26992,26994,26996,26998],{"class":615,"line":2723},[613,26985,833],{"class":618},[613,26987,2746],{"class":622},[613,26989,2749],{"class":626},[613,26991,633],{"class":618},[613,26993,636],{"class":618},[613,26995,11952],{"class":639},[613,26997,636],{"class":618},[613,26999,763],{"class":618},[613,27001,27002,27004,27006],{"class":615,"line":2732},[613,27003,875],{"class":618},[613,27005,836],{"class":622},[613,27007,645],{"class":618},[613,27009,27010,27012,27014],{"class":615,"line":2741},[613,27011,757],{"class":618},[613,27013,8758],{"class":622},[613,27015,763],{"class":618},[613,27017,27018,27020,27022,27024,27026,27028,27030,27032,27034,27036,27038,27040,27042,27044,27046],{"class":615,"line":2763},[613,27019,757],{"class":618},[613,27021,8779],{"class":622},[613,27023,789],{"class":618},[613,27025,1467],{"class":626},[613,27027,633],{"class":618},[613,27029,636],{"class":618},[613,27031,1474],{"class":618},[613,27033,945],{"class":799},[613,27035,1479],{"class":618},[613,27037,800],{"class":799},[613,27039,1479],{"class":618},[613,27041,3876],{"class":799},[613,27043,1489],{"class":618},[613,27045,636],{"class":618},[613,27047,763],{"class":618},[613,27049,27050,27052,27054],{"class":615,"line":2814},[613,27051,885],{"class":618},[613,27053,737],{"class":622},[613,27055,645],{"class":618},[613,27057,27058,27060,27062],{"class":615,"line":2823},[613,27059,708],{"class":618},[613,27061,726],{"class":622},[613,27063,645],{"class":618},[480,27065,902],{"id":901},[907,27067,27068,27078],{},[910,27069,27070],{},[913,27071,27072,27074,27076],{},[916,27073,8362],{"align":977},[916,27075,921],{"align":977},[916,27077,924],{},[926,27079,27080,27095,27109,27123,27140,27154,27168,27182,27196,27210,27227,27241,27255,27269,27293,27307,27323],{},[913,27081,27082,27087,27090],{},[931,27083,27084],{"align":977},[594,27085,27086],{},"resolution",[931,27088,27089],{"align":977},"Length in pixels of one side of the square reflective textures",[931,27091,27092],{},[594,27093,27094],{},"256",[913,27096,27097,27102,27105],{},[931,27098,27099],{"align":977},[594,27100,27101],{},"mix",[931,27103,27104],{"align":977},"Overall strength of the reflection",[931,27106,27107],{},[594,27108,1901],{},[913,27110,27111,27116,27119],{},[931,27112,27113],{"align":977},[594,27114,27115],{},"sharpMix",[931,27117,27118],{"align":977},"Strength of the sharp reflection on smooth surfaces",[931,27120,27121],{},[594,27122,1901],{},[913,27124,27125,27130,27136],{},[931,27126,27127],{"align":977},[594,27128,27129],{},"sharpDepthScale",[931,27131,27132,27133,27135],{"align":977},"Sharp reflection can be faded out by depth – distance from the reflective surface. Performance note: if the value is greater than ",[594,27134,945],{},", a depth texture will be created",[931,27137,27138],{},[594,27139,1901],{},[913,27141,27142,27147,27150],{},[931,27143,27144],{"align":977},[594,27145,27146],{},"sharpDepthBias",[931,27148,27149],{"align":977},"Sharp reflection depth falloff bias",[931,27151,27152],{},[594,27153,945],{},[913,27155,27156,27161,27164],{},[931,27157,27158],{"align":977},[594,27159,27160],{},"sharpDepthEdgeMin",[931,27162,27163],{"align":977},"Sharp reflection depth falloff start",[931,27165,27166],{},[594,27167,945],{},[913,27169,27170,27175,27178],{},[931,27171,27172],{"align":977},[594,27173,27174],{},"sharpDepthEdgeMax",[931,27176,27177],{"align":977},"Sharp reflection depth falloff end",[931,27179,27180],{},[594,27181,5939],{},[913,27183,27184,27189,27192],{},[931,27185,27186],{"align":977},[594,27187,27188],{},"blurMixSmooth",[931,27190,27191],{"align":977},"Strength of the blurred reflection on smooth surfaces",[931,27193,27194],{},[594,27195,1901],{},[913,27197,27198,27203,27206],{},[931,27199,27200],{"align":977},[594,27201,27202],{},"blurMixRough",[931,27204,27205],{"align":977},"Strength of the blurred reflection on rough surfaces",[931,27207,27208],{},[594,27209,1901],{},[913,27211,27212,27217,27223],{},[931,27213,27214],{"align":977},[594,27215,27216],{},"blurDepthScale",[931,27218,27219,27220,27222],{"align":977},"Blurred reflection can spread out by depth – distance from the reflective surface. Performance note: if the value is greater than ",[594,27221,945],{},", depth texture will be rendered",[931,27224,27225],{},[594,27226,1901],{},[913,27228,27229,27234,27237],{},[931,27230,27231],{"align":977},[594,27232,27233],{},"blurDepthBias",[931,27235,27236],{"align":977},"Blurred reflection depth spread bias",[931,27238,27239],{},[594,27240,945],{},[913,27242,27243,27248,27251],{},[931,27244,27245],{"align":977},[594,27246,27247],{},"blurDepthEdgeMin",[931,27249,27250],{"align":977},"Blurred reflection depth spread start",[931,27252,27253],{},[594,27254,945],{},[913,27256,27257,27262,27265],{},[931,27258,27259],{"align":977},[594,27260,27261],{},"blurDepthEdgeMax",[931,27263,27264],{"align":977},"Blurred reflection depth spread end",[931,27266,27267],{},[594,27268,5939],{},[913,27270,27271,27276,27289],{},[931,27272,27273],{"align":977},[594,27274,27275],{},"blurSize",[931,27277,27278,27279,27282,27283,5823,27286,27288],{"align":977},"Size of the blur. If ",[594,27280,27281],{},"[number, number]",", first number is width, second is height. Performance note: if other than ",[594,27284,27285],{},"[0, 0]",[594,27287,945],{},", a blur texture will be rendered",[931,27290,27291],{},[594,27292,27285],{},[913,27294,27295,27300,27303],{},[931,27296,27297],{"align":977},[594,27298,27299],{},"distortionMap",[931,27301,27302],{"align":977},"Texture for offsetting the reflection",[931,27304,27305],{},[594,27306,1159],{},[913,27308,27309,27314,27319],{},[931,27310,27311],{"align":977},[594,27312,27313],{},"distortion",[931,27315,27316,27317],{"align":977},"Influence of ",[594,27318,27299],{},[931,27320,27321],{},[594,27322,945],{},[913,27324,27325,27330,27333],{},[931,27326,27327],{"align":977},[594,27328,27329],{},"reflectorOffset",[931,27331,27332],{"align":977},"Offsets the reflection",[931,27334,27335],{},[594,27336,945],{},[590,27338,27339,27340,27342,27343,1479,27345,1479,27347,1479,27349,1479,27351,1479,27353,1479,27355,27357],{},"Additionally, the component extends ",[594,27341,26573],{}," and accepts all the same props including ",[594,27344,7772],{},[594,27346,19979],{},[594,27348,19964],{},[594,27350,2801],{},[594,27352,19864],{},[594,27354,19883],{},[594,27356,19902],{},", and more.",[1307,27359,1656],{},{"title":552,"searchDepth":553,"depth":554,"links":27361},[27362,27363],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},"Makes floors or walls that reflect the objects in your Scene.",{},{"title":179,"description":27364},"SmQ10ERsYJAK7ytDjV3ZCr9APJRPR6MGXbpwBm6D2G8",{"id":27369,"title":183,"body":27370,"description":27686,"extension":567,"links":568,"meta":27687,"navigation":570,"path":184,"seo":27688,"stem":185,"__hash__":27689},"docs/2.api/4.materials/point-material.md",{"type":477,"value":27371,"toc":27682},[27372,27377,27387,27392,27394,27664,27666,27680],[2343,27373,27374],{},[27375,27376],"materials-point-material",{},[590,27378,27379,27382,27383,27386],{},[594,27380,27381],{},"\u003CPointMaterial />"," extends ",[594,27384,27385],{},"THREE.PointsMaterial",". It renders the points as dots, rather than the default squares.",[3268,27388,27389],{},[590,27390,27391],{},"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.",[480,27393,15],{"id":600},[602,27395,27398],{"className":604,"code":27396,"highlights":27397,"language":609,"meta":552,"style":552},"\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",[684,807,607,830],[594,27399,27400,27420,27438,27462,27470,27474,27482,27490,27546,27554,27563,27592,27600,27615,27628,27632,27640,27648,27656],{"__ignoreMap":552},[613,27401,27402,27404,27406,27408,27410,27412,27414,27416,27418],{"class":615,"line":553},[613,27403,619],{"class":618},[613,27405,623],{"class":622},[613,27407,627],{"class":626},[613,27409,630],{"class":626},[613,27411,633],{"class":618},[613,27413,636],{"class":618},[613,27415,640],{"class":639},[613,27417,636],{"class":618},[613,27419,645],{"class":618},[613,27421,27422,27424,27426,27428,27430,27432,27434,27436],{"class":615,"line":554},[613,27423,653],{"class":652},[613,27425,656],{"class":618},[613,27427,691],{"class":659},[613,27429,669],{"class":618},[613,27431,672],{"class":652},[613,27433,675],{"class":618},[613,27435,700],{"class":639},[613,27437,681],{"class":618},[613,27439,27441,27443,27445,27448,27450,27452,27454,27456,27458,27460],{"class":27440,"line":684},[615,649],[613,27442,653],{"class":652},[613,27444,656],{"class":618},[613,27446,27447],{"class":659}," PointMaterial",[613,27449,663],{"class":618},[613,27451,666],{"class":659},[613,27453,669],{"class":618},[613,27455,672],{"class":652},[613,27457,675],{"class":618},[613,27459,678],{"class":639},[613,27461,681],{"class":618},[613,27463,27464,27466,27468],{"class":615,"line":705},[613,27465,708],{"class":618},[613,27467,623],{"class":622},[613,27469,645],{"class":618},[613,27471,27472],{"class":615,"line":715},[613,27473,718],{"emptyLinePlaceholder":570},[613,27475,27476,27478,27480],{"class":615,"line":721},[613,27477,619],{"class":618},[613,27479,726],{"class":622},[613,27481,645],{"class":618},[613,27483,27484,27486,27488],{"class":615,"line":731},[613,27485,734],{"class":618},[613,27487,737],{"class":622},[613,27489,645],{"class":618},[613,27491,27492,27494,27496,27498,27500,27502,27504,27506,27508,27510,27512,27514,27516,27518,27520,27522,27524,27526,27528,27530,27532,27534,27536,27538,27540,27542,27544],{"class":615,"line":754},[613,27493,757],{"class":618},[613,27495,760],{"class":622},[613,27497,789],{"class":618},[613,27499,1467],{"class":626},[613,27501,633],{"class":618},[613,27503,636],{"class":618},[613,27505,1474],{"class":618},[613,27507,2705],{"class":799},[613,27509,1479],{"class":618},[613,27511,2705],{"class":799},[613,27513,1479],{"class":618},[613,27515,2705],{"class":799},[613,27517,1489],{"class":618},[613,27519,636],{"class":618},[613,27521,789],{"class":618},[613,27523,8681],{"class":626},[613,27525,633],{"class":618},[613,27527,636],{"class":618},[613,27529,1474],{"class":618},[613,27531,945],{"class":799},[613,27533,1479],{"class":618},[613,27535,945],{"class":799},[613,27537,1479],{"class":618},[613,27539,945],{"class":799},[613,27541,1489],{"class":618},[613,27543,636],{"class":618},[613,27545,763],{"class":618},[613,27547,27548,27550,27552],{"class":615,"line":766},[613,27549,757],{"class":618},[613,27551,771],{"class":622},[613,27553,763],{"class":618},[613,27555,27556,27558,27561],{"class":615,"line":776},[613,27557,757],{"class":618},[613,27559,27560],{"class":622},"TresPoints",[613,27562,645],{"class":618},[613,27564,27565,27567,27570,27572,27574,27576,27578,27580,27582,27584,27586,27588,27590],{"class":615,"line":781},[613,27566,833],{"class":618},[613,27568,27569],{"class":622},"TresIcosahedronGeometry",[613,27571,789],{"class":618},[613,27573,1997],{"class":626},[613,27575,633],{"class":618},[613,27577,636],{"class":618},[613,27579,1474],{"class":618},[613,27581,1901],{"class":799},[613,27583,1479],{"class":618},[613,27585,3876],{"class":799},[613,27587,1489],{"class":618},[613,27589,636],{"class":618},[613,27591,763],{"class":618},[613,27593,27595,27597],{"class":27594,"line":807},[615,649],[613,27596,833],{"class":618},[613,27598,27599],{"class":622},"PointMaterial\n",[613,27601,27603,27605,27607,27609,27611,27613],{"class":27602,"line":607},[615,649],[613,27604,8243],{"class":618},[613,27606,15436],{"class":626},[613,27608,633],{"class":618},[613,27610,636],{"class":618},[613,27612,7668],{"class":799},[613,27614,3200],{"class":618},[613,27616,27618,27620,27622,27624,27626],{"class":27617,"line":830},[615,649],[613,27619,26878],{"class":626},[613,27621,633],{"class":618},[613,27623,636],{"class":618},[613,27625,11952],{"class":639},[613,27627,3200],{"class":618},[613,27629,27630],{"class":615,"line":841},[613,27631,8297],{"class":618},[613,27633,27634,27636,27638],{"class":615,"line":852},[613,27635,875],{"class":618},[613,27637,27560],{"class":622},[613,27639,645],{"class":618},[613,27641,27642,27644,27646],{"class":615,"line":862},[613,27643,757],{"class":618},[613,27645,8758],{"class":622},[613,27647,763],{"class":618},[613,27649,27650,27652,27654],{"class":615,"line":608},[613,27651,885],{"class":618},[613,27653,737],{"class":622},[613,27655,645],{"class":618},[613,27657,27658,27660,27662],{"class":615,"line":882},[613,27659,708],{"class":618},[613,27661,726],{"class":622},[613,27663,645],{"class":618},[480,27665,902],{"id":901},[590,27667,27668,27669,27676,27677,1126],{},"All ",[1120,27670,27673,27675],{"href":27671,"rel":27672},"https://threejs.org/docs/#api/en/materials/PointsMaterial",[1124],[594,27674,27385],{}," properties"," are inherited by ",[594,27678,27679],{},"PointMaterial",[1307,27681,1656],{},{"title":552,"searchDepth":553,"depth":554,"links":27683},[27684,27685],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},"Extends THREE.PointsMaterial to render points as dots rather than squares.",{},{"title":183,"description":27686},"Aajs-h_7UFOgfUg69Q5QfqvfyKDHM1UKxS8GfRKzI2U",{"id":27691,"title":187,"body":27692,"description":28049,"extension":567,"links":568,"meta":28050,"navigation":570,"path":188,"seo":28051,"stem":189,"__hash__":28052},"docs/2.api/4.materials/wobble-material.md",{"type":477,"value":27693,"toc":28045},[27694,27699,27707,27709,27996,27998,28038,28043],[584,27695,27696],{},[27697,27698],"materials-wobble-material",{},[590,27700,2843,27701,8516,27703,27706],{},[594,27702,7528],{},[594,27704,27705],{},"\u003CMeshWobbleMaterial />"," component that makes a geometry wobble and wave around.",[480,27708,15],{"id":600},[602,27710,27713],{"className":604,"code":27711,"highlights":27712,"language":609,"meta":552,"style":552},"\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",[684,781,807,607,830,841],[594,27714,27715,27735,27753,27773,27781,27785,27793,27801,27857,27865,27873,27881,27895,27910,27927,27932,27940,27948,27980,27988],{"__ignoreMap":552},[613,27716,27717,27719,27721,27723,27725,27727,27729,27731,27733],{"class":615,"line":553},[613,27718,619],{"class":618},[613,27720,623],{"class":622},[613,27722,627],{"class":626},[613,27724,630],{"class":626},[613,27726,633],{"class":618},[613,27728,636],{"class":618},[613,27730,640],{"class":639},[613,27732,636],{"class":618},[613,27734,645],{"class":618},[613,27736,27737,27739,27741,27743,27745,27747,27749,27751],{"class":615,"line":554},[613,27738,653],{"class":652},[613,27740,656],{"class":618},[613,27742,691],{"class":659},[613,27744,669],{"class":618},[613,27746,672],{"class":652},[613,27748,675],{"class":618},[613,27750,700],{"class":639},[613,27752,681],{"class":618},[613,27754,27756,27758,27760,27763,27765,27767,27769,27771],{"class":27755,"line":684},[615,649],[613,27757,653],{"class":652},[613,27759,656],{"class":618},[613,27761,27762],{"class":659}," MeshWobbleMaterial",[613,27764,669],{"class":618},[613,27766,672],{"class":652},[613,27768,675],{"class":618},[613,27770,678],{"class":639},[613,27772,681],{"class":618},[613,27774,27775,27777,27779],{"class":615,"line":705},[613,27776,708],{"class":618},[613,27778,623],{"class":622},[613,27780,645],{"class":618},[613,27782,27783],{"class":615,"line":715},[613,27784,718],{"emptyLinePlaceholder":570},[613,27786,27787,27789,27791],{"class":615,"line":721},[613,27788,619],{"class":618},[613,27790,726],{"class":622},[613,27792,645],{"class":618},[613,27794,27795,27797,27799],{"class":615,"line":731},[613,27796,734],{"class":618},[613,27798,737],{"class":622},[613,27800,645],{"class":618},[613,27802,27803,27805,27807,27809,27811,27813,27815,27817,27819,27821,27823,27825,27827,27829,27831,27833,27835,27837,27839,27841,27843,27845,27847,27849,27851,27853,27855],{"class":615,"line":754},[613,27804,757],{"class":618},[613,27806,760],{"class":622},[613,27808,789],{"class":618},[613,27810,1467],{"class":626},[613,27812,633],{"class":618},[613,27814,636],{"class":618},[613,27816,1474],{"class":618},[613,27818,2705],{"class":799},[613,27820,1479],{"class":618},[613,27822,2705],{"class":799},[613,27824,1479],{"class":618},[613,27826,2705],{"class":799},[613,27828,1489],{"class":618},[613,27830,636],{"class":618},[613,27832,789],{"class":618},[613,27834,8681],{"class":626},[613,27836,633],{"class":618},[613,27838,636],{"class":618},[613,27840,1474],{"class":618},[613,27842,945],{"class":799},[613,27844,1479],{"class":618},[613,27846,945],{"class":799},[613,27848,1479],{"class":618},[613,27850,945],{"class":799},[613,27852,1489],{"class":618},[613,27854,636],{"class":618},[613,27856,763],{"class":618},[613,27858,27859,27861,27863],{"class":615,"line":766},[613,27860,757],{"class":618},[613,27862,836],{"class":622},[613,27864,645],{"class":618},[613,27866,27867,27869,27871],{"class":615,"line":776},[613,27868,833],{"class":618},[613,27870,10350],{"class":622},[613,27872,763],{"class":618},[613,27874,27876,27878],{"class":27875,"line":781},[615,649],[613,27877,833],{"class":618},[613,27879,27880],{"class":622},"MeshWobbleMaterial\n",[613,27882,27884,27886,27888,27890,27893],{"class":27883,"line":807},[615,649],[613,27885,26878],{"class":626},[613,27887,633],{"class":618},[613,27889,636],{"class":618},[613,27891,27892],{"class":639},"#f25042",[613,27894,3200],{"class":618},[613,27896,27898,27900,27902,27904,27906,27908],{"class":27897,"line":607},[615,649],[613,27899,8243],{"class":618},[613,27901,8724],{"class":626},[613,27903,633],{"class":618},[613,27905,636],{"class":618},[613,27907,1901],{"class":799},[613,27909,3200],{"class":618},[613,27911,27913,27915,27918,27920,27922,27925],{"class":27912,"line":830},[615,649],[613,27914,8243],{"class":618},[613,27916,27917],{"class":626},"factor",[613,27919,633],{"class":618},[613,27921,636],{"class":618},[613,27923,27924],{"class":799},"0.6",[613,27926,3200],{"class":618},[613,27928,27930],{"class":27929,"line":841},[615,649],[613,27931,8297],{"class":618},[613,27933,27934,27936,27938],{"class":615,"line":852},[613,27935,875],{"class":618},[613,27937,836],{"class":622},[613,27939,645],{"class":618},[613,27941,27942,27944,27946],{"class":615,"line":862},[613,27943,757],{"class":618},[613,27945,8758],{"class":622},[613,27947,763],{"class":618},[613,27949,27950,27952,27954,27956,27958,27960,27962,27964,27966,27968,27970,27972,27974,27976,27978],{"class":615,"line":608},[613,27951,757],{"class":618},[613,27953,8779],{"class":622},[613,27955,789],{"class":618},[613,27957,1467],{"class":626},[613,27959,633],{"class":618},[613,27961,636],{"class":618},[613,27963,1474],{"class":618},[613,27965,945],{"class":799},[613,27967,1479],{"class":618},[613,27969,800],{"class":799},[613,27971,1479],{"class":618},[613,27973,3876],{"class":799},[613,27975,1489],{"class":618},[613,27977,636],{"class":618},[613,27979,763],{"class":618},[613,27981,27982,27984,27986],{"class":615,"line":882},[613,27983,885],{"class":618},[613,27985,737],{"class":622},[613,27987,645],{"class":618},[613,27989,27990,27992,27994],{"class":615,"line":892},[613,27991,708],{"class":618},[613,27993,726],{"class":622},[613,27995,645],{"class":618},[480,27997,902],{"id":901},[907,27999,28000,28010],{},[910,28001,28002],{},[913,28003,28004,28006,28008],{},[916,28005,918],{"align":977},[916,28007,921],{"align":977},[916,28009,924],{},[926,28011,28012,28025],{},[913,28013,28014,28018,28021],{},[931,28015,28016],{"align":977},[1681,28017,8724],{},[931,28019,28020],{"align":977},"how fast the wobble effect would be.",[931,28022,28023],{},[594,28024,1901],{},[913,28026,28027,28031,28034],{},[931,28028,28029],{"align":977},[1681,28030,27917],{},[931,28032,28033],{"align":977},"how strong the wobble effect will deform the geometry",[931,28035,28036],{},[594,28037,1901],{},[590,28039,28040,28041,25531],{},"This material extends ",[594,28042,26573],{},[1307,28044,1656],{},{"title":552,"searchDepth":553,"depth":554,"links":28046},[28047,28048],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},"Makes a geometry wobble and wave around with customizable speed and factor.",{},{"title":187,"description":28049},"FCaNs3jjWImwSxNZzcx1r_CPKoNz27JGUgdcUzvQ1Ys",[28054,28237,28814,28984,29162,29632,29869,30038,30621,30789,31452,31619,31793,32224,32401,32563,32757,32933,33385,33553,33744,33934],{"id":28055,"title":197,"body":28056,"description":28233,"extension":567,"links":568,"meta":28234,"navigation":570,"path":198,"seo":28235,"stem":199,"__hash__":28236},"docs/2.api/5.shapes/box.md",{"type":477,"value":28057,"toc":28230},[28058,28063,28074,28082,28089,28091,28227],[584,28059,28060],{},[28061,28062],"shapes-box",{},[590,28064,2843,28065,8516,28067,28070,28071,1126],{},[594,28066,7528],{},[594,28068,28069],{},"\u003CBox />"," component that serves as a short-cut for a ",[594,28072,28073],{},"BoxGeometry",[602,28075,28080],{"className":28076,"code":28078,"language":28079},[28077],"language-text","args: [\n width: number,\n height: number,\n depth: number,\n widthSegments: number,\n heightSegments: number,\n depthSegments: number\n]\n","text",[594,28081,28078],{"__ignoreMap":552},[590,28083,28084,28085],{},"Reference: ",[1120,28086,28073],{"href":28087,"rel":28088},"https://threejs.org/docs/?q=box#api/en/geometries/BoxGeometry",[1124],[480,28090,15],{"id":600},[602,28092,28094],{"className":604,"code":28093,"language":609,"meta":552,"style":552},"\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",[594,28095,28096,28138,28142,28147,28214,28219],{"__ignoreMap":552},[613,28097,28098,28100,28102,28104,28106,28108,28110,28112,28114,28116,28118,28120,28122,28124,28126,28128,28130,28132,28134,28136],{"class":615,"line":553},[613,28099,619],{"class":618},[613,28101,197],{"class":622},[613,28103,789],{"class":618},[613,28105,1997],{"class":626},[613,28107,633],{"class":618},[613,28109,636],{"class":618},[613,28111,1474],{"class":659},[613,28113,1901],{"class":799},[613,28115,663],{"class":618},[613,28117,2607],{"class":799},[613,28119,663],{"class":618},[613,28121,2607],{"class":799},[613,28123,1489],{"class":659},[613,28125,636],{"class":618},[613,28127,2749],{"class":626},[613,28129,633],{"class":618},[613,28131,636],{"class":618},[613,28133,11952],{"class":639},[613,28135,636],{"class":618},[613,28137,763],{"class":618},[613,28139,28140],{"class":615,"line":554},[613,28141,718],{"emptyLinePlaceholder":570},[613,28143,28144],{"class":615,"line":684},[613,28145,28146],{"class":659},"// Box with a custom material transformations\n",[613,28148,28149,28151,28153,28155,28157,28159,28161,28163,28165,28167,28169,28171,28173,28175,28177,28179,28181,28183,28185,28187,28189,28191,28193,28195,28197,28199,28201,28204,28206,28208,28210,28212],{"class":615,"line":705},[613,28150,619],{"class":618},[613,28152,197],{"class":622},[613,28154,3975],{"class":626},[613,28156,633],{"class":618},[613,28158,636],{"class":618},[613,28160,15015],{"class":639},[613,28162,636],{"class":618},[613,28164,789],{"class":618},[613,28166,1997],{"class":626},[613,28168,633],{"class":618},[613,28170,636],{"class":618},[613,28172,1474],{"class":659},[613,28174,1901],{"class":799},[613,28176,663],{"class":618},[613,28178,2607],{"class":799},[613,28180,663],{"class":618},[613,28182,2607],{"class":799},[613,28184,1489],{"class":659},[613,28186,636],{"class":618},[613,28188,789],{"class":618},[613,28190,1467],{"class":626},[613,28192,633],{"class":618},[613,28194,636],{"class":618},[613,28196,1474],{"class":659},[613,28198,945],{"class":799},[613,28200,663],{"class":618},[613,28202,28203],{"class":799}," 4",[613,28205,663],{"class":618},[613,28207,2553],{"class":799},[613,28209,1489],{"class":659},[613,28211,636],{"class":618},[613,28213,645],{"class":618},[613,28215,28216],{"class":615,"line":715},[613,28217,28218],{"class":659}," \u003CTresMeshToonMaterial color=\"orange\" />\n",[613,28220,28221,28223,28225],{"class":615,"line":721},[613,28222,708],{"class":618},[613,28224,197],{"class":622},[613,28226,645],{"class":618},[1307,28228,28229],{},"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":552,"searchDepth":553,"depth":554,"links":28231},[28232],{"id":600,"depth":554,"text":15},"Short-cut for a BoxGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":197,"description":28233},"EvaXEC2iSPj1-74ZRQEV-iGoScGBI5kq_mAZQoDjltE",{"id":28238,"title":201,"body":28239,"description":28810,"extension":567,"links":568,"meta":28811,"navigation":570,"path":202,"seo":28812,"stem":203,"__hash__":28813},"docs/2.api/5.shapes/catmullromcurve3.md",{"type":477,"value":28240,"toc":28806},[28241,28246,28254,28277,28279,28572,28574,28803],[2343,28242,28243],{},[28244,28245],"shapes-catmull-rom-curve3",{},[590,28247,2843,28248,8516,28250,28253],{},[594,28249,7528],{},[594,28251,28252],{},"\u003CCatmullRomCurve3 />"," component that allows you to make smooth(ish) 3D lines.",[590,28255,28256,28258,28259,28266,28267,28270,28271],{},[594,28257,28252],{}," wraps ",[1120,28260,28263,28264],{"href":28261,"rel":28262},"https://threejs.org/docs/index.html?q=catmu#api/en/extras/curves/CatmullRomCurve3",[1124],"Three.js's ",[594,28265,201],{}," functionality, but applies it to Cientos' ",[594,28268,28269],{},"\u003CLine2 />"," under the hood, meaning you can use ",[1120,28272,28274,28275,1126],{"href":28273},"line2#props","all the props from ",[594,28276,28269],{},[480,28278,15],{"id":600},[602,28280,28283],{"className":604,"code":28281,"highlights":28282,"language":609,"meta":552,"style":552},"\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",[684,776,781,807,607,830],[594,28284,28285,28305,28323,28343,28362,28370,28374,28382,28390,28422,28430,28498,28514,28528,28544,28548,28556,28564],{"__ignoreMap":552},[613,28286,28287,28289,28291,28293,28295,28297,28299,28301,28303],{"class":615,"line":553},[613,28288,619],{"class":618},[613,28290,623],{"class":622},[613,28292,627],{"class":626},[613,28294,630],{"class":626},[613,28296,633],{"class":618},[613,28298,636],{"class":618},[613,28300,640],{"class":639},[613,28302,636],{"class":618},[613,28304,645],{"class":618},[613,28306,28307,28309,28311,28313,28315,28317,28319,28321],{"class":615,"line":554},[613,28308,653],{"class":652},[613,28310,656],{"class":618},[613,28312,691],{"class":659},[613,28314,669],{"class":618},[613,28316,672],{"class":652},[613,28318,675],{"class":618},[613,28320,700],{"class":639},[613,28322,681],{"class":618},[613,28324,28326,28328,28330,28333,28335,28337,28339,28341],{"class":28325,"line":684},[615,649],[613,28327,653],{"class":652},[613,28329,656],{"class":618},[613,28331,28332],{"class":659}," CatmullRomCurve3",[613,28334,669],{"class":618},[613,28336,672],{"class":652},[613,28338,675],{"class":618},[613,28340,678],{"class":639},[613,28342,681],{"class":618},[613,28344,28345,28347,28349,28352,28354,28356,28358,28360],{"class":615,"line":705},[613,28346,653],{"class":652},[613,28348,656],{"class":618},[613,28350,28351],{"class":659}," Vector3",[613,28353,669],{"class":618},[613,28355,672],{"class":652},[613,28357,675],{"class":618},[613,28359,4785],{"class":639},[613,28361,681],{"class":618},[613,28363,28364,28366,28368],{"class":615,"line":715},[613,28365,708],{"class":618},[613,28367,623],{"class":622},[613,28369,645],{"class":618},[613,28371,28372],{"class":615,"line":721},[613,28373,718],{"emptyLinePlaceholder":570},[613,28375,28376,28378,28380],{"class":615,"line":731},[613,28377,619],{"class":618},[613,28379,726],{"class":622},[613,28381,645],{"class":618},[613,28383,28384,28386,28388],{"class":615,"line":754},[613,28385,734],{"class":618},[613,28387,737],{"class":622},[613,28389,645],{"class":618},[613,28391,28392,28394,28396,28398,28400,28402,28404,28406,28408,28410,28412,28414,28416,28418,28420],{"class":615,"line":766},[613,28393,757],{"class":618},[613,28395,760],{"class":622},[613,28397,789],{"class":618},[613,28399,1467],{"class":626},[613,28401,633],{"class":618},[613,28403,636],{"class":618},[613,28405,1474],{"class":618},[613,28407,2705],{"class":799},[613,28409,1479],{"class":618},[613,28411,2705],{"class":799},[613,28413,1479],{"class":618},[613,28415,2705],{"class":799},[613,28417,1489],{"class":618},[613,28419,636],{"class":618},[613,28421,763],{"class":618},[613,28423,28425,28427],{"class":28424,"line":776},[615,649],[613,28426,757],{"class":618},[613,28428,28429],{"class":622},"CatmullRomCurve3\n",[613,28431,28433,28435,28438,28440,28442,28445,28447,28450,28452,28454,28456,28458,28460,28463,28465,28467,28469,28471,28473,28475,28477,28479,28481,28483,28485,28487,28489,28491,28493,28496],{"class":28432,"line":781},[615,649],[613,28434,10907],{"class":618},[613,28436,28437],{"class":626},"points",[613,28439,633],{"class":618},[613,28441,636],{"class":618},[613,28443,28444],{"class":618},"[new ",[613,28446,8413],{"class":2482},[613,28448,28449],{"class":618},"(-",[613,28451,1901],{"class":799},[613,28453,1479],{"class":618},[613,28455,945],{"class":799},[613,28457,1479],{"class":618},[613,28459,945],{"class":799},[613,28461,28462],{"class":618},"), new ",[613,28464,8413],{"class":2482},[613,28466,2485],{"class":618},[613,28468,945],{"class":799},[613,28470,1479],{"class":618},[613,28472,1901],{"class":799},[613,28474,1479],{"class":618},[613,28476,945],{"class":799},[613,28478,28462],{"class":618},[613,28480,8413],{"class":2482},[613,28482,2485],{"class":618},[613,28484,1901],{"class":799},[613,28486,1479],{"class":618},[613,28488,945],{"class":799},[613,28490,1479],{"class":618},[613,28492,945],{"class":799},[613,28494,28495],{"class":618},")]",[613,28497,3200],{"class":618},[613,28499,28501,28503,28506,28508,28510,28512],{"class":28500,"line":807},[615,649],[613,28502,10907],{"class":618},[613,28504,28505],{"class":626},"segments",[613,28507,633],{"class":618},[613,28509,636],{"class":618},[613,28511,9822],{"class":799},[613,28513,3200],{"class":618},[613,28515,28517,28520,28522,28524,28526],{"class":28516,"line":607},[615,649],[613,28518,28519],{"class":626}," color",[613,28521,633],{"class":618},[613,28523,636],{"class":618},[613,28525,11952],{"class":639},[613,28527,3200],{"class":618},[613,28529,28531,28533,28536,28538,28540,28542],{"class":28530,"line":830},[615,649],[613,28532,10907],{"class":618},[613,28534,28535],{"class":626},"line-width",[613,28537,633],{"class":618},[613,28539,636],{"class":618},[613,28541,2705],{"class":799},[613,28543,3200],{"class":618},[613,28545,28546],{"class":615,"line":841},[613,28547,16014],{"class":618},[613,28549,28550,28552,28554],{"class":615,"line":852},[613,28551,757],{"class":618},[613,28553,8758],{"class":622},[613,28555,763],{"class":618},[613,28557,28558,28560,28562],{"class":615,"line":862},[613,28559,885],{"class":618},[613,28561,737],{"class":622},[613,28563,645],{"class":618},[613,28565,28566,28568,28570],{"class":615,"line":608},[613,28567,708],{"class":618},[613,28569,726],{"class":622},[613,28571,645],{"class":618},[480,28573,902],{"id":901},[907,28575,28576,28588],{},[910,28577,28578],{},[913,28579,28580,28582,28584,28586],{},[916,28581,918],{},[916,28583,6179],{},[916,28585,921],{},[916,28587,924],{},[926,28589,28590,28604,28618,28632,28648,28662,28677,28691,28705,28719,28733,28747,28761,28775,28789],{},[913,28591,28592,28594,28599,28602],{},[931,28593,28437],{},[931,28595,28596],{},[594,28597,28598],{},"Array\u003CVector3 | [number, number, number]>",[931,28600,28601],{},"Curve's control points",[931,28603],{},[913,28605,28606,28608,28612,28615],{},[931,28607,28505],{},[931,28609,28610],{},[594,28611,5565],{},[931,28613,28614],{},"Number of segments in the resulting curve (higher = smoother)",[931,28616,28617],{},"20",[913,28619,28620,28623,28627,28630],{},[931,28621,28622],{},"closed",[931,28624,28625],{},[594,28626,16208],{},[931,28628,28629],{},"The curve will loop back onto itself when this is true.",[931,28631,951],{},[913,28633,28634,28637,28642,28645],{},[931,28635,28636],{},"curveType",[931,28638,28639],{},[594,28640,28641],{},"'centripetal' | 'chordal' | 'catmullrom'",[931,28643,28644],{},"Curve type",[931,28646,28647],{},"'centripetal'",[913,28649,28650,28653,28657,28660],{},[931,28651,28652],{},"tension",[931,28654,28655],{},[594,28656,5565],{},[931,28658,28659],{},"Catmullrom's tension, when curveType is 'catmullrom'",[931,28661,1521],{},[913,28663,28664,28667,28672,28675],{},[931,28665,28666],{},"vertexColors",[931,28668,28669],{},[594,28670,28671],{},"TresColor[]",[931,28673,28674],{},"Vertex colors, if using",[931,28676,3725],{},[913,28678,28679,28681,28685,28688],{},[931,28680,7772],{},[931,28682,28683],{},[594,28684,7787],{},[931,28686,28687],{},"Color for the line – multiplies vertex colors",[931,28689,28690],{},"'white'",[913,28692,28693,28696,28700,28703],{},[931,28694,28695],{},"lineWidth",[931,28697,28698],{},[594,28699,5565],{},[931,28701,28702],{},"Width of the line – in world units with size attenuation, pixels otherwise",[931,28704,1901],{},[913,28706,28707,28710,28714,28717],{},[931,28708,28709],{},"worldUnits",[931,28711,28712],{},[594,28713,16208],{},[931,28715,28716],{},"Whether the line width is in world units or pixels",[931,28718,951],{},[913,28720,28721,28724,28728,28731],{},[931,28722,28723],{},"alphaToCoverage",[931,28725,28726],{},[594,28727,16208],{},[931,28729,28730],{},"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,28732,951],{},[913,28734,28735,28738,28742,28745],{},[931,28736,28737],{},"dashed",[931,28739,28740],{},[594,28741,16208],{},[931,28743,28744],{},"Whether the line is dashed",[931,28746,951],{},[913,28748,28749,28752,28756,28759],{},[931,28750,28751],{},"dashSize",[931,28753,28754],{},[594,28755,5565],{},[931,28757,28758],{},"Dash size",[931,28760,1901],{},[913,28762,28763,28766,28770,28773],{},[931,28764,28765],{},"gapSize",[931,28767,28768],{},[594,28769,5565],{},[931,28771,28772],{},"Gap size in dashed line",[931,28774,1901],{},[913,28776,28777,28780,28784,28787],{},[931,28778,28779],{},"dashScale",[931,28781,28782],{},[594,28783,5565],{},[931,28785,28786],{},"Scale of the dashes/gaps",[931,28788,1901],{},[913,28790,28791,28794,28798,28801],{},[931,28792,28793],{},"dashOffset",[931,28795,28796],{},[594,28797,5565],{},[931,28799,28800],{},"Dash offset",[931,28802,945],{},[1307,28804,28805],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":552,"searchDepth":553,"depth":554,"links":28807},[28808,28809],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},"Allows you to make smooth 3D lines using Catmull-Rom curves.",{},{"title":201,"description":28810},"pYOe6asnxM2yBwZJgT-M4NxxwDh-pE8XXsD--fBVLqo",{"id":28815,"title":205,"body":28816,"description":28980,"extension":567,"links":568,"meta":28981,"navigation":570,"path":206,"seo":28982,"stem":207,"__hash__":28983},"docs/2.api/5.shapes/circle.md",{"type":477,"value":28817,"toc":28977},[28818,28823,28833,28839,28845,28847,28975],[584,28819,28820],{},[28821,28822],"shapes-circle",{},[590,28824,2843,28825,8516,28827,28070,28830,1126],{},[594,28826,7528],{},[594,28828,28829],{},"\u003CCircle />",[594,28831,28832],{},"CircleGeometry",[602,28834,28837],{"className":28835,"code":28836,"language":28079},[28077],"args: [radius: number, segments: number, thetaStart: number, thetaLength: number]\n",[594,28838,28836],{"__ignoreMap":552},[590,28840,28084,28841],{},[1120,28842,28832],{"href":28843,"rel":28844},"https://threejs.org/docs/?q=circle#api/en/geometries/CircleGeometry",[1124],[480,28846,15],{"id":600},[602,28848,28850],{"className":604,"code":28849,"language":609,"meta":552,"style":552},"\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",[594,28851,28852,28891,28895,28900,28963,28967],{"__ignoreMap":552},[613,28853,28854,28856,28858,28860,28862,28864,28866,28868,28870,28872,28875,28877,28879,28881,28883,28885,28887,28889],{"class":615,"line":553},[613,28855,619],{"class":618},[613,28857,205],{"class":622},[613,28859,789],{"class":618},[613,28861,1997],{"class":626},[613,28863,633],{"class":618},[613,28865,636],{"class":618},[613,28867,1474],{"class":659},[613,28869,1901],{"class":799},[613,28871,663],{"class":618},[613,28873,28874],{"class":799}," 32",[613,28876,1489],{"class":659},[613,28878,636],{"class":618},[613,28880,2749],{"class":626},[613,28882,633],{"class":618},[613,28884,636],{"class":618},[613,28886,11952],{"class":639},[613,28888,636],{"class":618},[613,28890,763],{"class":618},[613,28892,28893],{"class":615,"line":554},[613,28894,718],{"emptyLinePlaceholder":570},[613,28896,28897],{"class":615,"line":684},[613,28898,28899],{"class":659},"// Circle with a custom material transformations\n",[613,28901,28902,28904,28906,28908,28910,28912,28915,28917,28919,28921,28923,28925,28927,28929,28931,28933,28935,28937,28939,28941,28943,28945,28947,28949,28951,28953,28955,28957,28959,28961],{"class":615,"line":705},[613,28903,619],{"class":618},[613,28905,205],{"class":622},[613,28907,3975],{"class":626},[613,28909,633],{"class":618},[613,28911,636],{"class":618},[613,28913,28914],{"class":639},"circleRef",[613,28916,636],{"class":618},[613,28918,789],{"class":618},[613,28920,1997],{"class":626},[613,28922,633],{"class":618},[613,28924,636],{"class":618},[613,28926,1474],{"class":659},[613,28928,1901],{"class":799},[613,28930,663],{"class":618},[613,28932,28874],{"class":799},[613,28934,1489],{"class":659},[613,28936,636],{"class":618},[613,28938,789],{"class":618},[613,28940,1467],{"class":626},[613,28942,633],{"class":618},[613,28944,636],{"class":618},[613,28946,1474],{"class":659},[613,28948,945],{"class":799},[613,28950,663],{"class":618},[613,28952,2553],{"class":799},[613,28954,663],{"class":618},[613,28956,2553],{"class":799},[613,28958,1489],{"class":659},[613,28960,636],{"class":618},[613,28962,645],{"class":618},[613,28964,28965],{"class":615,"line":715},[613,28966,28218],{"class":659},[613,28968,28969,28971,28973],{"class":615,"line":721},[613,28970,708],{"class":618},[613,28972,205],{"class":622},[613,28974,645],{"class":618},[1307,28976,28229],{},{"title":552,"searchDepth":553,"depth":554,"links":28978},[28979],{"id":600,"depth":554,"text":15},"Short-cut for a CircleGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":205,"description":28980},"wQLfnhseui4b7Q0fQxQzwX-2D_yemIZgwYA9Cpmtxvo",{"id":28985,"title":209,"body":28986,"description":29158,"extension":567,"links":568,"meta":29159,"navigation":570,"path":210,"seo":29160,"stem":211,"__hash__":29161},"docs/2.api/5.shapes/cone.md",{"type":477,"value":28987,"toc":29155},[28988,28993,29003,29009,29015,29017,29153],[584,28989,28990],{},[28991,28992],"shapes-cone",{},[590,28994,2843,28995,8516,28997,28070,29000,1126],{},[594,28996,7528],{},[594,28998,28999],{},"\u003CCone />",[594,29001,29002],{},"ConeGeometry",[602,29004,29007],{"className":29005,"code":29006,"language":28079},[28077],"args: [\n radius: number,\n height: number,\n radialSegments: number,\n heightSegments: number,\n openEnded: boolean,\n thetaStart: number,\n thetaLength: number\n]\n",[594,29008,29006],{"__ignoreMap":552},[590,29010,28084,29011],{},[1120,29012,29002],{"href":29013,"rel":29014},"https://threejs.org/docs/?q=cone#api/en/geometries/ConeGeometry",[1124],[480,29016,15],{"id":600},[602,29018,29020],{"className":604,"code":29019,"language":609,"meta":552,"style":552},"\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",[594,29021,29022,29065,29069,29074,29141,29145],{"__ignoreMap":552},[613,29023,29024,29026,29028,29030,29032,29034,29036,29038,29040,29042,29044,29046,29049,29051,29053,29055,29057,29059,29061,29063],{"class":615,"line":553},[613,29025,619],{"class":618},[613,29027,209],{"class":622},[613,29029,789],{"class":618},[613,29031,1997],{"class":626},[613,29033,633],{"class":618},[613,29035,636],{"class":618},[613,29037,1474],{"class":659},[613,29039,1901],{"class":799},[613,29041,663],{"class":618},[613,29043,2607],{"class":799},[613,29045,663],{"class":618},[613,29047,29048],{"class":799}," 8",[613,29050,1489],{"class":659},[613,29052,636],{"class":618},[613,29054,2749],{"class":626},[613,29056,633],{"class":618},[613,29058,636],{"class":618},[613,29060,11952],{"class":639},[613,29062,636],{"class":618},[613,29064,763],{"class":618},[613,29066,29067],{"class":615,"line":554},[613,29068,718],{"emptyLinePlaceholder":570},[613,29070,29071],{"class":615,"line":684},[613,29072,29073],{"class":659},"// Cone with a custom material transformations\n",[613,29075,29076,29078,29080,29082,29084,29086,29089,29091,29093,29095,29097,29099,29101,29103,29105,29107,29109,29111,29113,29115,29117,29119,29121,29123,29125,29127,29129,29131,29133,29135,29137,29139],{"class":615,"line":705},[613,29077,619],{"class":618},[613,29079,209],{"class":622},[613,29081,3975],{"class":626},[613,29083,633],{"class":618},[613,29085,636],{"class":618},[613,29087,29088],{"class":639},"coneRef",[613,29090,636],{"class":618},[613,29092,789],{"class":618},[613,29094,1997],{"class":626},[613,29096,633],{"class":618},[613,29098,636],{"class":618},[613,29100,1474],{"class":659},[613,29102,1901],{"class":799},[613,29104,663],{"class":618},[613,29106,2607],{"class":799},[613,29108,663],{"class":618},[613,29110,29048],{"class":799},[613,29112,1489],{"class":659},[613,29114,636],{"class":618},[613,29116,789],{"class":618},[613,29118,1467],{"class":626},[613,29120,633],{"class":618},[613,29122,636],{"class":618},[613,29124,1474],{"class":659},[613,29126,945],{"class":799},[613,29128,663],{"class":618},[613,29130,28203],{"class":799},[613,29132,663],{"class":618},[613,29134,2553],{"class":799},[613,29136,1489],{"class":659},[613,29138,636],{"class":618},[613,29140,645],{"class":618},[613,29142,29143],{"class":615,"line":715},[613,29144,28218],{"class":659},[613,29146,29147,29149,29151],{"class":615,"line":721},[613,29148,708],{"class":618},[613,29150,209],{"class":622},[613,29152,645],{"class":618},[1307,29154,28229],{},{"title":552,"searchDepth":553,"depth":554,"links":29156},[29157],{"id":600,"depth":554,"text":15},"Short-cut for a ConeGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":209,"description":29158},"LobanFD68GY4U45rEkqMogA7guX1DZi5E6MMnCuki0k",{"id":29163,"title":213,"body":29164,"description":29628,"extension":567,"links":568,"meta":29629,"navigation":570,"path":214,"seo":29630,"stem":215,"__hash__":29631},"docs/2.api/5.shapes/cubic-bezier-line.md",{"type":477,"value":29165,"toc":29624},[29166,29171,29180,29182,29520,29522,29531,29622],[2343,29167,29168],{},[29169,29170],"shapes-cubic-bezier-line",{},[590,29172,29173,29176,29177,29179],{},[594,29174,29175],{},"\u003CCubicBezierLine />"," renders a ",[594,29178,28269],{}," between start and end points, with additional 2 control points.",[480,29181,15],{"id":600},[602,29183,29185],{"className":604,"code":29184,"language":609,"meta":552,"style":552},"\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",[594,29186,29187,29207,29225,29244,29262,29270,29274,29282,29290,29322,29329,29360,29390,29421,29452,29466,29478,29492,29496,29504,29512],{"__ignoreMap":552},[613,29188,29189,29191,29193,29195,29197,29199,29201,29203,29205],{"class":615,"line":553},[613,29190,619],{"class":618},[613,29192,623],{"class":622},[613,29194,627],{"class":626},[613,29196,630],{"class":626},[613,29198,633],{"class":618},[613,29200,636],{"class":618},[613,29202,640],{"class":639},[613,29204,636],{"class":618},[613,29206,645],{"class":618},[613,29208,29209,29211,29213,29215,29217,29219,29221,29223],{"class":615,"line":554},[613,29210,653],{"class":652},[613,29212,656],{"class":618},[613,29214,691],{"class":659},[613,29216,669],{"class":618},[613,29218,672],{"class":652},[613,29220,675],{"class":618},[613,29222,700],{"class":639},[613,29224,681],{"class":618},[613,29226,29227,29229,29231,29234,29236,29238,29240,29242],{"class":615,"line":684},[613,29228,653],{"class":652},[613,29230,656],{"class":618},[613,29232,29233],{"class":659}," CubicBezierLine",[613,29235,669],{"class":618},[613,29237,672],{"class":652},[613,29239,675],{"class":618},[613,29241,678],{"class":639},[613,29243,681],{"class":618},[613,29245,29246,29248,29250,29252,29254,29256,29258,29260],{"class":615,"line":705},[613,29247,653],{"class":652},[613,29249,656],{"class":618},[613,29251,28351],{"class":659},[613,29253,669],{"class":618},[613,29255,672],{"class":652},[613,29257,675],{"class":618},[613,29259,4785],{"class":639},[613,29261,681],{"class":618},[613,29263,29264,29266,29268],{"class":615,"line":715},[613,29265,708],{"class":618},[613,29267,623],{"class":622},[613,29269,645],{"class":618},[613,29271,29272],{"class":615,"line":721},[613,29273,718],{"emptyLinePlaceholder":570},[613,29275,29276,29278,29280],{"class":615,"line":731},[613,29277,619],{"class":618},[613,29279,726],{"class":622},[613,29281,645],{"class":618},[613,29283,29284,29286,29288],{"class":615,"line":754},[613,29285,734],{"class":618},[613,29287,737],{"class":622},[613,29289,645],{"class":618},[613,29291,29292,29294,29296,29298,29300,29302,29304,29306,29308,29310,29312,29314,29316,29318,29320],{"class":615,"line":766},[613,29293,757],{"class":618},[613,29295,760],{"class":622},[613,29297,789],{"class":618},[613,29299,1467],{"class":626},[613,29301,633],{"class":618},[613,29303,636],{"class":618},[613,29305,1474],{"class":618},[613,29307,2705],{"class":799},[613,29309,1479],{"class":618},[613,29311,2705],{"class":799},[613,29313,1479],{"class":618},[613,29315,2705],{"class":799},[613,29317,1489],{"class":618},[613,29319,636],{"class":618},[613,29321,763],{"class":618},[613,29323,29324,29326],{"class":615,"line":776},[613,29325,757],{"class":618},[613,29327,29328],{"class":622},"CubicBezierLine\n",[613,29330,29331,29333,29335,29337,29339,29342,29344,29346,29348,29350,29352,29354,29356,29358],{"class":615,"line":781},[613,29332,10907],{"class":618},[613,29334,12983],{"class":626},[613,29336,633],{"class":618},[613,29338,636],{"class":618},[613,29340,29341],{"class":618},"new ",[613,29343,8413],{"class":2482},[613,29345,28449],{"class":618},[613,29347,1901],{"class":799},[613,29349,1479],{"class":618},[613,29351,945],{"class":799},[613,29353,1479],{"class":618},[613,29355,945],{"class":799},[613,29357,3409],{"class":618},[613,29359,3200],{"class":618},[613,29361,29362,29364,29366,29368,29370,29372,29374,29376,29378,29380,29382,29384,29386,29388],{"class":615,"line":807},[613,29363,10907],{"class":618},[613,29365,12997],{"class":626},[613,29367,633],{"class":618},[613,29369,636],{"class":618},[613,29371,29341],{"class":618},[613,29373,8413],{"class":2482},[613,29375,2485],{"class":618},[613,29377,1901],{"class":799},[613,29379,1479],{"class":618},[613,29381,945],{"class":799},[613,29383,1479],{"class":618},[613,29385,945],{"class":799},[613,29387,3409],{"class":618},[613,29389,3200],{"class":618},[613,29391,29392,29394,29397,29399,29401,29403,29405,29407,29409,29411,29413,29415,29417,29419],{"class":615,"line":607},[613,29393,10907],{"class":618},[613,29395,29396],{"class":626},"midA",[613,29398,633],{"class":618},[613,29400,636],{"class":618},[613,29402,29341],{"class":618},[613,29404,8413],{"class":2482},[613,29406,28449],{"class":618},[613,29408,1521],{"class":799},[613,29410,1479],{"class":618},[613,29412,1901],{"class":799},[613,29414,1479],{"class":618},[613,29416,945],{"class":799},[613,29418,3409],{"class":618},[613,29420,3200],{"class":618},[613,29422,29423,29425,29428,29430,29432,29434,29436,29438,29440,29442,29444,29446,29448,29450],{"class":615,"line":830},[613,29424,10907],{"class":618},[613,29426,29427],{"class":626},"midB",[613,29429,633],{"class":618},[613,29431,636],{"class":618},[613,29433,29341],{"class":618},[613,29435,8413],{"class":2482},[613,29437,2485],{"class":618},[613,29439,1521],{"class":799},[613,29441,1479],{"class":618},[613,29443,1901],{"class":799},[613,29445,1479],{"class":618},[613,29447,945],{"class":799},[613,29449,3409],{"class":618},[613,29451,3200],{"class":618},[613,29453,29454,29456,29458,29460,29462,29464],{"class":615,"line":841},[613,29455,10907],{"class":618},[613,29457,28505],{"class":626},[613,29459,633],{"class":618},[613,29461,636],{"class":618},[613,29463,9822],{"class":799},[613,29465,3200],{"class":618},[613,29467,29468,29470,29472,29474,29476],{"class":615,"line":852},[613,29469,28519],{"class":626},[613,29471,633],{"class":618},[613,29473,636],{"class":618},[613,29475,11952],{"class":639},[613,29477,3200],{"class":618},[613,29479,29480,29482,29484,29486,29488,29490],{"class":615,"line":862},[613,29481,10907],{"class":618},[613,29483,28535],{"class":626},[613,29485,633],{"class":618},[613,29487,636],{"class":618},[613,29489,2705],{"class":799},[613,29491,3200],{"class":618},[613,29493,29494],{"class":615,"line":608},[613,29495,16014],{"class":618},[613,29497,29498,29500,29502],{"class":615,"line":882},[613,29499,757],{"class":618},[613,29501,8758],{"class":622},[613,29503,763],{"class":618},[613,29505,29506,29508,29510],{"class":615,"line":892},[613,29507,885],{"class":618},[613,29509,737],{"class":622},[613,29511,645],{"class":618},[613,29513,29514,29516,29518],{"class":615,"line":2671},[613,29515,708],{"class":618},[613,29517,726],{"class":622},[613,29519,645],{"class":618},[480,29521,902],{"id":901},[590,29523,29524,29526,29527,7430,29529,1126],{},[594,29525,29175],{}," inherits all props but ",[594,29528,28437],{},[594,29530,28269],{},[907,29532,29533,29545],{},[910,29534,29535],{},[913,29536,29537,29539,29541,29543],{},[916,29538,918],{},[916,29540,6179],{},[916,29542,921],{},[916,29544,924],{},[926,29546,29547,29563,29578,29593,29608],{},[913,29548,29549,29553,29558,29561],{},[931,29550,29551],{},[594,29552,12983],{},[931,29554,29555],{},[594,29556,29557],{},"Vector3 | [number, number, number]",[931,29559,29560],{},"Starting point",[931,29562],{},[913,29564,29565,29569,29573,29576],{},[931,29566,29567],{},[594,29568,12997],{},[931,29570,29571],{},[594,29572,29557],{},[931,29574,29575],{},"Ending point",[931,29577],{},[913,29579,29580,29584,29588,29591],{},[931,29581,29582],{},[594,29583,29396],{},[931,29585,29586],{},[594,29587,29557],{},[931,29589,29590],{},"First control point",[931,29592],{},[913,29594,29595,29599,29603,29606],{},[931,29596,29597],{},[594,29598,29427],{},[931,29600,29601],{},[594,29602,29557],{},[931,29604,29605],{},"Second control point",[931,29607],{},[913,29609,29610,29614,29618,29620],{},[931,29611,29612],{},[594,29613,28505],{},[931,29615,29616],{},[594,29617,5565],{},[931,29619,28614],{},[931,29621,28617],{},[1307,29623,28805],{},{"title":552,"searchDepth":553,"depth":554,"links":29625},[29626,29627],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},"Renders a Line2 between start and end points with two control points.",{},{"title":213,"description":29628},"gORWQkfn3pEx_Pr7x_kzEjd_CQoTYM445mILoeX4qjQ",{"id":29633,"title":217,"body":29634,"description":29865,"extension":567,"links":568,"meta":29866,"navigation":570,"path":218,"seo":29867,"stem":219,"__hash__":29868},"docs/2.api/5.shapes/cylinder.md",{"type":477,"value":29635,"toc":29862},[29636,29641,29651,29657,29663,29665,29859],[584,29637,29638],{},[29639,29640],"shapes-cylinder",{},[590,29642,2843,29643,8516,29645,28070,29648,1126],{},[594,29644,7528],{},[594,29646,29647],{},"\u003CCylinder />",[594,29649,29650],{},"CylinderGeometry",[602,29652,29655],{"className":29653,"code":29654,"language":28079},[28077],"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",[594,29656,29654],{"__ignoreMap":552},[590,29658,28084,29659],{},[1120,29660,29650],{"href":29661,"rel":29662},"https://threejs.org/docs/?q=cylinder#api/en/geometries/CylinderGeometry",[1124],[480,29664,15],{"id":600},[602,29666,29668],{"className":604,"code":29667,"language":609,"meta":552,"style":552},"\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",[594,29669,29670,29743,29747,29752,29847,29851],{"__ignoreMap":552},[613,29671,29672,29674,29676,29678,29680,29682,29684,29686,29688,29690,29692,29694,29696,29698,29700,29702,29704,29706,29708,29710,29712,29714,29717,29719,29722,29724,29727,29729,29731,29733,29735,29737,29739,29741],{"class":615,"line":553},[613,29673,619],{"class":618},[613,29675,217],{"class":622},[613,29677,789],{"class":618},[613,29679,1997],{"class":626},[613,29681,633],{"class":618},[613,29683,636],{"class":618},[613,29685,1474],{"class":659},[613,29687,1901],{"class":799},[613,29689,663],{"class":618},[613,29691,2607],{"class":799},[613,29693,663],{"class":618},[613,29695,2607],{"class":799},[613,29697,663],{"class":618},[613,29699,28874],{"class":799},[613,29701,663],{"class":618},[613,29703,2607],{"class":799},[613,29705,663],{"class":618},[613,29707,6936],{"class":4536},[613,29709,663],{"class":618},[613,29711,2553],{"class":799},[613,29713,663],{"class":618},[613,29715,29716],{"class":659}," Math",[613,29718,1126],{"class":618},[613,29720,29721],{"class":659},"PI ",[613,29723,21727],{"class":618},[613,29725,29726],{"class":799}," 2",[613,29728,1489],{"class":659},[613,29730,636],{"class":618},[613,29732,2749],{"class":626},[613,29734,633],{"class":618},[613,29736,636],{"class":618},[613,29738,11952],{"class":639},[613,29740,636],{"class":618},[613,29742,763],{"class":618},[613,29744,29745],{"class":615,"line":554},[613,29746,718],{"emptyLinePlaceholder":570},[613,29748,29749],{"class":615,"line":684},[613,29750,29751],{"class":659},"// Cylinder with a custom material transformations\n",[613,29753,29754,29756,29758,29760,29762,29764,29767,29769,29771,29773,29775,29777,29779,29781,29783,29785,29787,29789,29791,29793,29795,29797,29799,29801,29803,29805,29807,29809,29811,29813,29815,29817,29819,29821,29823,29825,29827,29829,29831,29833,29835,29837,29839,29841,29843,29845],{"class":615,"line":705},[613,29755,619],{"class":618},[613,29757,217],{"class":622},[613,29759,3975],{"class":626},[613,29761,633],{"class":618},[613,29763,636],{"class":618},[613,29765,29766],{"class":639},"cylinderRef",[613,29768,636],{"class":618},[613,29770,789],{"class":618},[613,29772,1997],{"class":626},[613,29774,633],{"class":618},[613,29776,636],{"class":618},[613,29778,1474],{"class":659},[613,29780,1901],{"class":799},[613,29782,663],{"class":618},[613,29784,2607],{"class":799},[613,29786,663],{"class":618},[613,29788,2607],{"class":799},[613,29790,663],{"class":618},[613,29792,28874],{"class":799},[613,29794,663],{"class":618},[613,29796,2607],{"class":799},[613,29798,663],{"class":618},[613,29800,6936],{"class":4536},[613,29802,663],{"class":618},[613,29804,2553],{"class":799},[613,29806,663],{"class":618},[613,29808,29716],{"class":659},[613,29810,1126],{"class":618},[613,29812,29721],{"class":659},[613,29814,21727],{"class":618},[613,29816,29726],{"class":799},[613,29818,1489],{"class":659},[613,29820,636],{"class":618},[613,29822,789],{"class":618},[613,29824,1467],{"class":626},[613,29826,633],{"class":618},[613,29828,636],{"class":618},[613,29830,1474],{"class":659},[613,29832,945],{"class":799},[613,29834,663],{"class":618},[613,29836,28203],{"class":799},[613,29838,663],{"class":618},[613,29840,2553],{"class":799},[613,29842,1489],{"class":659},[613,29844,636],{"class":618},[613,29846,645],{"class":618},[613,29848,29849],{"class":615,"line":715},[613,29850,28218],{"class":659},[613,29852,29853,29855,29857],{"class":615,"line":721},[613,29854,708],{"class":618},[613,29856,217],{"class":622},[613,29858,645],{"class":618},[1307,29860,29861],{},"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":552,"searchDepth":553,"depth":554,"links":29863},[29864],{"id":600,"depth":554,"text":15},"Short-cut for a CylinderGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":217,"description":29865},"YTuULikIuPOFc-aN9KEgAYGN8T0QxNG4817fqzStsM0",{"id":29870,"title":221,"body":29871,"description":30034,"extension":567,"links":568,"meta":30035,"navigation":570,"path":222,"seo":30036,"stem":223,"__hash__":30037},"docs/2.api/5.shapes/dodecahedron.md",{"type":477,"value":29872,"toc":30031},[29873,29878,29888,29894,29900,29902,30029],[584,29874,29875],{},[29876,29877],"shapes-dodecahedron",{},[590,29879,2843,29880,8516,29882,28070,29885,1126],{},[594,29881,7528],{},[594,29883,29884],{},"\u003CDodecahedron />",[594,29886,29887],{},"DodecahedronGeometry",[602,29889,29892],{"className":29890,"code":29891,"language":28079},[28077],"args: [radius: number, detail: number]\n",[594,29893,29891],{"__ignoreMap":552},[590,29895,28084,29896],{},[1120,29897,29887],{"href":29898,"rel":29899},"https://threejs.org/docs/?q=dode#api/en/geometries/DodecahedronGeometry",[1124],[480,29901,15],{"id":600},[602,29903,29905],{"className":604,"code":29904,"language":609,"meta":552,"style":552},"\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",[594,29906,29907,29945,29949,29954,30017,30021],{"__ignoreMap":552},[613,29908,29909,29911,29913,29915,29917,29919,29921,29923,29925,29927,29929,29931,29933,29935,29937,29939,29941,29943],{"class":615,"line":553},[613,29910,619],{"class":618},[613,29912,221],{"class":622},[613,29914,789],{"class":618},[613,29916,1997],{"class":626},[613,29918,633],{"class":618},[613,29920,636],{"class":618},[613,29922,1474],{"class":659},[613,29924,1901],{"class":799},[613,29926,663],{"class":618},[613,29928,2553],{"class":799},[613,29930,1489],{"class":659},[613,29932,636],{"class":618},[613,29934,2749],{"class":626},[613,29936,633],{"class":618},[613,29938,636],{"class":618},[613,29940,11952],{"class":639},[613,29942,636],{"class":618},[613,29944,763],{"class":618},[613,29946,29947],{"class":615,"line":554},[613,29948,718],{"emptyLinePlaceholder":570},[613,29950,29951],{"class":615,"line":684},[613,29952,29953],{"class":659},"// Dodecahedron with a custom material transformations\n",[613,29955,29956,29958,29960,29962,29964,29966,29969,29971,29973,29975,29977,29979,29981,29983,29985,29987,29989,29991,29993,29995,29997,29999,30001,30003,30005,30007,30009,30011,30013,30015],{"class":615,"line":705},[613,29957,619],{"class":618},[613,29959,221],{"class":622},[613,29961,3975],{"class":626},[613,29963,633],{"class":618},[613,29965,636],{"class":618},[613,29967,29968],{"class":639},"dodecahedronRef",[613,29970,636],{"class":618},[613,29972,789],{"class":618},[613,29974,1997],{"class":626},[613,29976,633],{"class":618},[613,29978,636],{"class":618},[613,29980,1474],{"class":659},[613,29982,1901],{"class":799},[613,29984,663],{"class":618},[613,29986,2553],{"class":799},[613,29988,1489],{"class":659},[613,29990,636],{"class":618},[613,29992,789],{"class":618},[613,29994,1467],{"class":626},[613,29996,633],{"class":618},[613,29998,636],{"class":618},[613,30000,1474],{"class":659},[613,30002,800],{"class":799},[613,30004,663],{"class":618},[613,30006,28203],{"class":799},[613,30008,663],{"class":618},[613,30010,2553],{"class":799},[613,30012,1489],{"class":659},[613,30014,636],{"class":618},[613,30016,645],{"class":618},[613,30018,30019],{"class":615,"line":715},[613,30020,28218],{"class":659},[613,30022,30023,30025,30027],{"class":615,"line":721},[613,30024,708],{"class":618},[613,30026,221],{"class":622},[613,30028,645],{"class":618},[1307,30030,28229],{},{"title":552,"searchDepth":553,"depth":554,"links":30032},[30033],{"id":600,"depth":554,"text":15},"Short-cut for a DodecahedronGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":221,"description":30034},"9Gw9CLOluoUzozbppxnr0DGwqvfyqgSPCC05IqHhr00",{"id":30039,"title":225,"body":30040,"description":30617,"extension":567,"links":568,"meta":30618,"navigation":570,"path":226,"seo":30619,"stem":227,"__hash__":30620},"docs/2.api/5.shapes/grid.md",{"type":477,"value":30041,"toc":30613},[30042,30047,30053,30055,30426,30428,30610],[584,30043,30044],{},[30045,30046],"shapes-grid",{},[590,30048,30049,30052],{},[594,30050,30051],{},"\u003CGrid />"," creates a shader-based grid plane. It has customizable grid cell and section lines, as well as fade out.",[480,30054,15],{"id":600},[602,30056,30059],{"className":604,"code":30057,"highlights":30058,"language":609,"meta":552,"style":552},"\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",[554,776,781,807,607,830,841,852,862,608,882,892,2671],[594,30060,30061,30081,30105,30123,30131,30135,30143,30162,30208,30216,30224,30248,30262,30278,30294,30308,30324,30341,30357,30373,30390,30406,30410,30418],{"__ignoreMap":552},[613,30062,30063,30065,30067,30069,30071,30073,30075,30077,30079],{"class":615,"line":553},[613,30064,619],{"class":618},[613,30066,623],{"class":622},[613,30068,627],{"class":626},[613,30070,630],{"class":626},[613,30072,633],{"class":618},[613,30074,636],{"class":618},[613,30076,640],{"class":639},[613,30078,636],{"class":618},[613,30080,645],{"class":618},[613,30082,30084,30086,30088,30091,30093,30095,30097,30099,30101,30103],{"class":30083,"line":554},[615,649],[613,30085,653],{"class":652},[613,30087,656],{"class":618},[613,30089,30090],{"class":659}," Grid",[613,30092,663],{"class":618},[613,30094,666],{"class":659},[613,30096,669],{"class":618},[613,30098,672],{"class":652},[613,30100,675],{"class":618},[613,30102,678],{"class":639},[613,30104,681],{"class":618},[613,30106,30107,30109,30111,30113,30115,30117,30119,30121],{"class":615,"line":684},[613,30108,653],{"class":652},[613,30110,656],{"class":618},[613,30112,691],{"class":659},[613,30114,669],{"class":618},[613,30116,672],{"class":652},[613,30118,675],{"class":618},[613,30120,700],{"class":639},[613,30122,681],{"class":618},[613,30124,30125,30127,30129],{"class":615,"line":705},[613,30126,708],{"class":618},[613,30128,623],{"class":622},[613,30130,645],{"class":618},[613,30132,30133],{"class":615,"line":715},[613,30134,718],{"emptyLinePlaceholder":570},[613,30136,30137,30139,30141],{"class":615,"line":721},[613,30138,619],{"class":618},[613,30140,726],{"class":622},[613,30142,645],{"class":618},[613,30144,30145,30147,30149,30151,30153,30155,30158,30160],{"class":615,"line":731},[613,30146,734],{"class":618},[613,30148,737],{"class":622},[613,30150,740],{"class":626},[613,30152,633],{"class":618},[613,30154,636],{"class":618},[613,30156,30157],{"class":639},"#222222",[613,30159,636],{"class":618},[613,30161,645],{"class":618},[613,30163,30164,30166,30168,30170,30172,30174,30176,30178,30180,30182,30184,30186,30188,30190,30192,30194,30197,30199,30201,30204,30206],{"class":615,"line":754},[613,30165,757],{"class":618},[613,30167,760],{"class":622},[613,30169,789],{"class":618},[613,30171,1467],{"class":626},[613,30173,633],{"class":618},[613,30175,636],{"class":618},[613,30177,1474],{"class":618},[613,30179,20236],{"class":799},[613,30181,1479],{"class":618},[613,30183,1486],{"class":799},[613,30185,1479],{"class":618},[613,30187,1486],{"class":799},[613,30189,1489],{"class":618},[613,30191,636],{"class":618},[613,30193,789],{"class":618},[613,30195,30196],{"class":626},"fov",[613,30198,633],{"class":618},[613,30200,636],{"class":618},[613,30202,30203],{"class":799},"25",[613,30205,636],{"class":618},[613,30207,763],{"class":618},[613,30209,30210,30212,30214],{"class":615,"line":766},[613,30211,757],{"class":618},[613,30213,771],{"class":622},[613,30215,763],{"class":618},[613,30217,30219,30221],{"class":30218,"line":776},[615,649],[613,30220,757],{"class":618},[613,30222,30223],{"class":622},"Grid\n",[613,30225,30227,30229,30231,30233,30235,30237,30240,30242,30244,30246],{"class":30226,"line":781},[615,649],[613,30228,10907],{"class":618},[613,30230,1997],{"class":626},[613,30232,633],{"class":618},[613,30234,636],{"class":618},[613,30236,1474],{"class":618},[613,30238,30239],{"class":799},"10.5",[613,30241,1479],{"class":618},[613,30243,30239],{"class":799},[613,30245,1489],{"class":618},[613,30247,3200],{"class":618},[613,30249,30251,30254,30256,30258,30260],{"class":30250,"line":807},[615,649],[613,30252,30253],{"class":626}," cell-color",[613,30255,633],{"class":618},[613,30257,636],{"class":618},[613,30259,9920],{"class":639},[613,30261,3200],{"class":618},[613,30263,30265,30267,30270,30272,30274,30276],{"class":30264,"line":607},[615,649],[613,30266,10907],{"class":618},[613,30268,30269],{"class":626},"cell-size",[613,30271,633],{"class":618},[613,30273,636],{"class":618},[613,30275,27924],{"class":799},[613,30277,3200],{"class":618},[613,30279,30281,30283,30286,30288,30290,30292],{"class":30280,"line":830},[615,649],[613,30282,10907],{"class":618},[613,30284,30285],{"class":626},"cell-thickness",[613,30287,633],{"class":618},[613,30289,636],{"class":618},[613,30291,1521],{"class":799},[613,30293,3200],{"class":618},[613,30295,30297,30300,30302,30304,30306],{"class":30296,"line":841},[615,649],[613,30298,30299],{"class":626}," section-color",[613,30301,633],{"class":618},[613,30303,636],{"class":618},[613,30305,9281],{"class":639},[613,30307,3200],{"class":618},[613,30309,30311,30313,30316,30318,30320,30322],{"class":30310,"line":852},[615,649],[613,30312,10907],{"class":618},[613,30314,30315],{"class":626},"section-size",[613,30317,633],{"class":618},[613,30319,636],{"class":618},[613,30321,800],{"class":799},[613,30323,3200],{"class":618},[613,30325,30327,30329,30332,30334,30336,30339],{"class":30326,"line":862},[615,649],[613,30328,10907],{"class":618},[613,30330,30331],{"class":626},"section-thickness",[613,30333,633],{"class":618},[613,30335,636],{"class":618},[613,30337,30338],{"class":799},"1.3",[613,30340,3200],{"class":618},[613,30342,30344,30346,30349,30351,30353,30355],{"class":30343,"line":608},[615,649],[613,30345,10907],{"class":618},[613,30347,30348],{"class":626},"infinite-grid",[613,30350,633],{"class":618},[613,30352,636],{"class":618},[613,30354,941],{"class":4536},[613,30356,3200],{"class":618},[613,30358,30360,30362,30365,30367,30369,30371],{"class":30359,"line":882},[615,649],[613,30361,10907],{"class":618},[613,30363,30364],{"class":626},"fade-from",[613,30366,633],{"class":618},[613,30368,636],{"class":618},[613,30370,945],{"class":799},[613,30372,3200],{"class":618},[613,30374,30376,30378,30381,30383,30385,30388],{"class":30375,"line":892},[615,649],[613,30377,10907],{"class":618},[613,30379,30380],{"class":626},"fade-distance",[613,30382,633],{"class":618},[613,30384,636],{"class":618},[613,30386,30387],{"class":799},"12",[613,30389,3200],{"class":618},[613,30391,30393,30395,30398,30400,30402,30404],{"class":30392,"line":2671},[615,649],[613,30394,10907],{"class":618},[613,30396,30397],{"class":626},"fade-strength",[613,30399,633],{"class":618},[613,30401,636],{"class":618},[613,30403,1901],{"class":799},[613,30405,3200],{"class":618},[613,30407,30408],{"class":615,"line":2680},[613,30409,16014],{"class":618},[613,30411,30412,30414,30416],{"class":615,"line":2714},[613,30413,885],{"class":618},[613,30415,737],{"class":622},[613,30417,645],{"class":618},[613,30419,30420,30422,30424],{"class":615,"line":2723},[613,30421,708],{"class":618},[613,30423,726],{"class":622},[613,30425,645],{"class":618},[480,30427,902],{"id":901},[907,30429,30430,30440],{},[910,30431,30432],{},[913,30433,30434,30436,30438],{},[916,30435,918],{"align":977},[916,30437,921],{"align":977},[916,30439,924],{},[926,30441,30442,30456,30470,30484,30498,30512,30526,30540,30554,30568,30582,30596],{},[913,30443,30444,30449,30452],{},[931,30445,30446],{"align":977},[1681,30447,30448],{},"cellSize",[931,30450,30451],{"align":977},"Cell size",[931,30453,30454],{},[594,30455,1521],{},[913,30457,30458,30463,30466],{},[931,30459,30460],{"align":977},[1681,30461,30462],{},"cellThickness",[931,30464,30465],{"align":977},"Thickness of cell lines",[931,30467,30468],{},[594,30469,1521],{},[913,30471,30472,30477,30480],{},[931,30473,30474],{"align":977},[1681,30475,30476],{},"cellColor",[931,30478,30479],{"align":977},"Color of cell lines",[931,30481,30482],{},[594,30483,10067],{},[913,30485,30486,30491,30494],{},[931,30487,30488],{"align":977},[1681,30489,30490],{},"sectionSize",[931,30492,30493],{"align":977},"Section size",[931,30495,30496],{},[594,30497,1901],{},[913,30499,30500,30505,30508],{},[931,30501,30502],{"align":977},[1681,30503,30504],{},"sectionThickness",[931,30506,30507],{"align":977},"Thickness of section lines",[931,30509,30510],{},[594,30511,1901],{},[913,30513,30514,30519,30521],{},[931,30515,30516],{"align":977},[1681,30517,30518],{},"sectionColor",[931,30520,30479],{"align":977},[931,30522,30523],{},[594,30524,30525],{},"'blue'",[913,30527,30528,30533,30536],{},[931,30529,30530],{"align":977},[1681,30531,30532],{},"followCamera",[931,30534,30535],{"align":977},"Whether to follow camera",[931,30537,30538],{},[594,30539,951],{},[913,30541,30542,30547,30550],{},[931,30543,30544],{"align":977},[1681,30545,30546],{},"infiniteGrid",[931,30548,30549],{"align":977},"Whether to display an infinite grid",[931,30551,30552],{},[594,30553,951],{},[913,30555,30556,30561,30564],{},[931,30557,30558],{"align":977},[1681,30559,30560],{},"fadeDistance",[931,30562,30563],{"align":977},"Fade distance",[931,30565,30566],{},[594,30567,11242],{},[913,30569,30570,30575,30578],{},[931,30571,30572],{"align":977},[1681,30573,30574],{},"fadeStrength",[931,30576,30577],{"align":977},"Fade strength",[931,30579,30580],{},[594,30581,1901],{},[913,30583,30584,30589,30592],{},[931,30585,30586],{"align":977},[1681,30587,30588],{},"fadeFrom",[931,30590,30591],{"align":977},"Fade from camera (1) or origin (0) or in between",[931,30593,30594],{},[594,30595,1901],{},[913,30597,30598,30602,30605],{},[931,30599,30600],{"align":977},[1681,30601,25130],{},[931,30603,30604],{"align":977},"Material side",[931,30606,30607],{},[594,30608,30609],{},"THREE.BackSide",[1307,30611,30612],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":552,"searchDepth":553,"depth":554,"links":30614},[30615,30616],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},"Shader-based grid plane with customizable cell and section lines.",{},{"title":225,"description":30617},"v8vI4rVYVnvvadMij1GMf3y8EqHb2jEVQK1i_UillkQ",{"id":30622,"title":229,"body":30623,"description":30785,"extension":567,"links":568,"meta":30786,"navigation":570,"path":230,"seo":30787,"stem":231,"__hash__":30788},"docs/2.api/5.shapes/icosahedron.md",{"type":477,"value":30624,"toc":30782},[30625,30630,30640,30645,30651,30653,30780],[584,30626,30627],{},[30628,30629],"shapes-icosahedron",{},[590,30631,2843,30632,8516,30634,28070,30637,1126],{},[594,30633,7528],{},[594,30635,30636],{},"\u003CIcosahedron />",[594,30638,30639],{},"IcosahedronGeometry",[602,30641,30643],{"className":30642,"code":29891,"language":28079},[28077],[594,30644,29891],{"__ignoreMap":552},[590,30646,28084,30647],{},[1120,30648,30639],{"href":30649,"rel":30650},"https://threejs.org/docs/?q=ico#api/en/geometries/IcosahedronGeometry",[1124],[480,30652,15],{"id":600},[602,30654,30656],{"className":604,"code":30655,"language":609,"meta":552,"style":552},"\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",[594,30657,30658,30696,30700,30705,30768,30772],{"__ignoreMap":552},[613,30659,30660,30662,30664,30666,30668,30670,30672,30674,30676,30678,30680,30682,30684,30686,30688,30690,30692,30694],{"class":615,"line":553},[613,30661,619],{"class":618},[613,30663,229],{"class":622},[613,30665,789],{"class":618},[613,30667,1997],{"class":626},[613,30669,633],{"class":618},[613,30671,636],{"class":618},[613,30673,1474],{"class":659},[613,30675,1901],{"class":799},[613,30677,663],{"class":618},[613,30679,2553],{"class":799},[613,30681,1489],{"class":659},[613,30683,636],{"class":618},[613,30685,2749],{"class":626},[613,30687,633],{"class":618},[613,30689,636],{"class":618},[613,30691,11952],{"class":639},[613,30693,636],{"class":618},[613,30695,763],{"class":618},[613,30697,30698],{"class":615,"line":554},[613,30699,718],{"emptyLinePlaceholder":570},[613,30701,30702],{"class":615,"line":684},[613,30703,30704],{"class":659},"// Icosahedron with a custom material transformations\n",[613,30706,30707,30709,30711,30713,30715,30717,30720,30722,30724,30726,30728,30730,30732,30734,30736,30738,30740,30742,30744,30746,30748,30750,30752,30754,30756,30758,30760,30762,30764,30766],{"class":615,"line":705},[613,30708,619],{"class":618},[613,30710,229],{"class":622},[613,30712,3975],{"class":626},[613,30714,633],{"class":618},[613,30716,636],{"class":618},[613,30718,30719],{"class":639},"icosahedronRef",[613,30721,636],{"class":618},[613,30723,789],{"class":618},[613,30725,1997],{"class":626},[613,30727,633],{"class":618},[613,30729,636],{"class":618},[613,30731,1474],{"class":659},[613,30733,1901],{"class":799},[613,30735,663],{"class":618},[613,30737,2553],{"class":799},[613,30739,1489],{"class":659},[613,30741,636],{"class":618},[613,30743,789],{"class":618},[613,30745,1467],{"class":626},[613,30747,633],{"class":618},[613,30749,636],{"class":618},[613,30751,1474],{"class":659},[613,30753,800],{"class":799},[613,30755,663],{"class":618},[613,30757,28203],{"class":799},[613,30759,663],{"class":618},[613,30761,2553],{"class":799},[613,30763,1489],{"class":659},[613,30765,636],{"class":618},[613,30767,645],{"class":618},[613,30769,30770],{"class":615,"line":715},[613,30771,28218],{"class":659},[613,30773,30774,30776,30778],{"class":615,"line":721},[613,30775,708],{"class":618},[613,30777,229],{"class":622},[613,30779,645],{"class":618},[1307,30781,28229],{},{"title":552,"searchDepth":553,"depth":554,"links":30783},[30784],{"id":600,"depth":554,"text":15},"Short-cut for a IcosahedronGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":229,"description":30785},"8yFEbasoREduB_hHH4IqpVmHiF3zCgvuXNtzkba_4Jg",{"id":30790,"title":233,"body":30791,"description":31448,"extension":567,"links":568,"meta":31449,"navigation":570,"path":234,"seo":31450,"stem":235,"__hash__":31451},"docs/2.api/5.shapes/line2.md",{"type":477,"value":30792,"toc":31442},[30793,30798,30811,30813,31068,31070,31221,31224,31227,31232,31239,31301,31306,31436,31439],[2343,30794,30795],{},[30796,30797],"shapes-line2",{},[590,30799,2843,30800,8516,30802,30804,30805,1126],{},[594,30801,7528],{},[594,30803,28269],{}," component for creating 3-D lines. It wraps ",[1120,30806,28263,30809],{"href":30807,"rel":30808},"https://github.com/mrdoob/three.js/blob/e2bcdfff6427c2f106cb819b18d88d1e13aa508a/examples/jsm/lines/Line2.js",[1124],[594,30810,233],{},[480,30812,15],{"id":600},[602,30814,30817],{"className":604,"code":30815,"highlights":30816,"language":609,"meta":552,"style":552},"\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",[684,754,766,776,781,807],[594,30818,30819,30839,30857,30877,30885,30889,30897,30905,30938,30946,31012,31025,31040,31044,31052,31060],{"__ignoreMap":552},[613,30820,30821,30823,30825,30827,30829,30831,30833,30835,30837],{"class":615,"line":553},[613,30822,619],{"class":618},[613,30824,623],{"class":622},[613,30826,627],{"class":626},[613,30828,630],{"class":626},[613,30830,633],{"class":618},[613,30832,636],{"class":618},[613,30834,640],{"class":639},[613,30836,636],{"class":618},[613,30838,645],{"class":618},[613,30840,30841,30843,30845,30847,30849,30851,30853,30855],{"class":615,"line":554},[613,30842,653],{"class":652},[613,30844,656],{"class":618},[613,30846,691],{"class":659},[613,30848,669],{"class":618},[613,30850,672],{"class":652},[613,30852,675],{"class":618},[613,30854,700],{"class":639},[613,30856,681],{"class":618},[613,30858,30860,30862,30864,30867,30869,30871,30873,30875],{"class":30859,"line":684},[615,649],[613,30861,653],{"class":652},[613,30863,656],{"class":618},[613,30865,30866],{"class":659}," Line2",[613,30868,669],{"class":618},[613,30870,672],{"class":652},[613,30872,675],{"class":618},[613,30874,678],{"class":639},[613,30876,681],{"class":618},[613,30878,30879,30881,30883],{"class":615,"line":705},[613,30880,708],{"class":618},[613,30882,623],{"class":622},[613,30884,645],{"class":618},[613,30886,30887],{"class":615,"line":715},[613,30888,718],{"emptyLinePlaceholder":570},[613,30890,30891,30893,30895],{"class":615,"line":721},[613,30892,619],{"class":618},[613,30894,726],{"class":622},[613,30896,645],{"class":618},[613,30898,30899,30901,30903],{"class":615,"line":731},[613,30900,734],{"class":618},[613,30902,737],{"class":622},[613,30904,645],{"class":618},[613,30906,30908,30910,30912,30914,30916,30918,30920,30922,30924,30926,30928,30930,30932,30934,30936],{"class":30907,"line":754},[615,649],[613,30909,757],{"class":618},[613,30911,760],{"class":622},[613,30913,789],{"class":618},[613,30915,1467],{"class":626},[613,30917,633],{"class":618},[613,30919,636],{"class":618},[613,30921,1474],{"class":618},[613,30923,2705],{"class":799},[613,30925,1479],{"class":618},[613,30927,2705],{"class":799},[613,30929,1479],{"class":618},[613,30931,2705],{"class":799},[613,30933,1489],{"class":618},[613,30935,636],{"class":618},[613,30937,763],{"class":618},[613,30939,30941,30943],{"class":30940,"line":766},[615,649],[613,30942,757],{"class":618},[613,30944,30945],{"class":622},"Line2\n",[613,30947,30949,30951,30953,30955,30957,30960,30962,30964,30966,30968,30970,30973,30975,30977,30979,30981,30983,30985,30987,30989,30991,30993,30995,30997,30999,31001,31003,31005,31007,31010],{"class":30948,"line":776},[615,649],[613,30950,10907],{"class":618},[613,30952,28437],{"class":626},[613,30954,633],{"class":618},[613,30956,636],{"class":618},[613,30958,30959],{"class":618},"[[",[613,30961,945],{"class":799},[613,30963,1479],{"class":618},[613,30965,945],{"class":799},[613,30967,1479],{"class":618},[613,30969,945],{"class":799},[613,30971,30972],{"class":618},"], [",[613,30974,1901],{"class":799},[613,30976,1479],{"class":618},[613,30978,1901],{"class":799},[613,30980,1479],{"class":618},[613,30982,945],{"class":799},[613,30984,30972],{"class":618},[613,30986,1901],{"class":799},[613,30988,1479],{"class":618},[613,30990,1901],{"class":799},[613,30992,1479],{"class":618},[613,30994,1901],{"class":799},[613,30996,30972],{"class":618},[613,30998,945],{"class":799},[613,31000,1479],{"class":618},[613,31002,945],{"class":799},[613,31004,1479],{"class":618},[613,31006,1901],{"class":799},[613,31008,31009],{"class":618},"]]",[613,31011,3200],{"class":618},[613,31013,31015,31017,31019,31021,31023],{"class":31014,"line":781},[615,649],[613,31016,28519],{"class":626},[613,31018,633],{"class":618},[613,31020,636],{"class":618},[613,31022,11952],{"class":639},[613,31024,3200],{"class":618},[613,31026,31028,31030,31032,31034,31036,31038],{"class":31027,"line":807},[615,649],[613,31029,10907],{"class":618},[613,31031,28535],{"class":626},[613,31033,633],{"class":618},[613,31035,636],{"class":618},[613,31037,2705],{"class":799},[613,31039,3200],{"class":618},[613,31041,31042],{"class":615,"line":607},[613,31043,16014],{"class":618},[613,31045,31046,31048,31050],{"class":615,"line":830},[613,31047,757],{"class":618},[613,31049,8758],{"class":622},[613,31051,763],{"class":618},[613,31053,31054,31056,31058],{"class":615,"line":841},[613,31055,885],{"class":618},[613,31057,737],{"class":622},[613,31059,645],{"class":618},[613,31061,31062,31064,31066],{"class":615,"line":852},[613,31063,708],{"class":618},[613,31065,726],{"class":622},[613,31067,645],{"class":618},[480,31069,902],{"id":901},[907,31071,31072,31084],{},[910,31073,31074],{},[913,31075,31076,31078,31080,31082],{},[916,31077,918],{},[916,31079,6179],{},[916,31081,921],{},[916,31083,924],{},[926,31085,31086,31101,31113,31125,31137,31149,31161,31173,31185,31197,31209],{},[913,31087,31088,31090,31096,31099],{},[931,31089,28437],{},[931,31091,31092],{},[1120,31093,31095],{"href":31094},"#points","See below",[931,31097,31098],{},"Points representing the line",[931,31100],{},[913,31102,31103,31105,31109,31111],{},[931,31104,28666],{},[931,31106,31107],{},[594,31108,28671],{},[931,31110,28674],{},[931,31112,3725],{},[913,31114,31115,31117,31121,31123],{},[931,31116,7772],{},[931,31118,31119],{},[594,31120,7787],{},[931,31122,28687],{},[931,31124,28690],{},[913,31126,31127,31129,31133,31135],{},[931,31128,28695],{},[931,31130,31131],{},[594,31132,5565],{},[931,31134,28702],{},[931,31136,1901],{},[913,31138,31139,31141,31145,31147],{},[931,31140,28709],{},[931,31142,31143],{},[594,31144,16208],{},[931,31146,28716],{},[931,31148,951],{},[913,31150,31151,31153,31157,31159],{},[931,31152,28723],{},[931,31154,31155],{},[594,31156,16208],{},[931,31158,28730],{},[931,31160,951],{},[913,31162,31163,31165,31169,31171],{},[931,31164,28737],{},[931,31166,31167],{},[594,31168,16208],{},[931,31170,28744],{},[931,31172,951],{},[913,31174,31175,31177,31181,31183],{},[931,31176,28751],{},[931,31178,31179],{},[594,31180,5565],{},[931,31182,28758],{},[931,31184,1901],{},[913,31186,31187,31189,31193,31195],{},[931,31188,28765],{},[931,31190,31191],{},[594,31192,5565],{},[931,31194,28772],{},[931,31196,1901],{},[913,31198,31199,31201,31205,31207],{},[931,31200,28779],{},[931,31202,31203],{},[594,31204,5565],{},[931,31206,28786],{},[931,31208,1901],{},[913,31210,31211,31213,31217,31219],{},[931,31212,28793],{},[931,31214,31215],{},[594,31216,5565],{},[931,31218,28800],{},[931,31220,945],{},[4191,31222,31223],{"id":28437},"Points",[590,31225,31226],{},"The points prop has the following type:",[590,31228,31229],{},[594,31230,31231],{},"Array\u003CVector3 | Vector2 | [number, number, number] | [number, number] | number>",[590,31233,31234,31235,31238],{},"The passed array is converted to ",[594,31236,31237],{},"Array\u003Cnumber>"," – i.e., a series of x, y, z vertex coordinates. This is done array entry by array entry, as follows:",[907,31240,31241,31251],{},[910,31242,31243],{},[913,31244,31245,31248],{},[916,31246,31247],{},"Entry type",[916,31249,31250],{},"Interpretation",[926,31252,31253,31262,31274,31283,31292],{},[913,31254,31255,31259],{},[931,31256,31257],{},[594,31258,8413],{},[931,31260,31261],{},"Insert the vector's x, y, z into the result array",[913,31263,31264,31271],{},[931,31265,31266],{},[31267,31268,31269],"nobr",{},[594,31270,8410],{},[931,31272,31273],{},"Insert the array values into the result array",[913,31275,31276,31280],{},[931,31277,31278],{},[594,31279,25096],{},[931,31281,31282],{},"Insert the vector's x, y, then 0 into the result array",[913,31284,31285,31289],{},[931,31286,31287],{},[594,31288,27281],{},[931,31290,31291],{},"Insert the array values, then 0 into the result array",[913,31293,31294,31298],{},[931,31295,31296],{},[594,31297,5565],{},[931,31299,31300],{},"Insert the number into the result array",[3268,31302,31303],{},[590,31304,31305],{},"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.",[602,31307,31309],{"className":604,"code":31308,"language":609,"meta":552,"style":552},"\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",[594,31310,31311,31316,31364,31369,31373,31378,31431],{"__ignoreMap":552},[613,31312,31313],{"class":615,"line":553},[613,31314,31315],{"class":1189},"\u003C!-- Wrong -->\n",[613,31317,31318,31320,31322,31324,31326,31328,31330,31332,31334,31336,31338,31340,31342,31344,31346,31348,31350,31352,31354,31356,31358,31360,31362],{"class":615,"line":554},[613,31319,619],{"class":618},[613,31321,233],{"class":622},[613,31323,789],{"class":618},[613,31325,28437],{"class":626},[613,31327,633],{"class":618},[613,31329,636],{"class":618},[613,31331,30959],{"class":659},[613,31333,1901],{"class":799},[613,31335,663],{"class":618},[613,31337,1901],{"class":799},[613,31339,1489],{"class":659},[613,31341,663],{"class":618},[613,31343,29726],{"class":799},[613,31345,663],{"class":618},[613,31347,29726],{"class":799},[613,31349,663],{"class":618},[613,31351,2546],{"class":659},[613,31353,2705],{"class":799},[613,31355,663],{"class":618},[613,31357,2705],{"class":799},[613,31359,31009],{"class":659},[613,31361,636],{"class":618},[613,31363,763],{"class":618},[613,31365,31366],{"class":615,"line":684},[613,31367,31368],{"class":1189},"\u003C!-- result: (1,1,0) (2,2,3) (3,0,❌) -->\n",[613,31370,31371],{"class":615,"line":705},[613,31372,718],{"emptyLinePlaceholder":570},[613,31374,31375],{"class":615,"line":715},[613,31376,31377],{"class":1189},"\u003C!-- Right -->\n",[613,31379,31380,31382,31384,31386,31388,31390,31392,31394,31396,31398,31400,31402,31404,31406,31408,31410,31412,31414,31416,31418,31420,31422,31425,31427,31429],{"class":615,"line":721},[613,31381,619],{"class":618},[613,31383,233],{"class":622},[613,31385,789],{"class":618},[613,31387,28437],{"class":626},[613,31389,633],{"class":618},[613,31391,636],{"class":618},[613,31393,30959],{"class":659},[613,31395,1901],{"class":799},[613,31397,663],{"class":618},[613,31399,2607],{"class":799},[613,31401,1489],{"class":659},[613,31403,663],{"class":618},[613,31405,29726],{"class":799},[613,31407,663],{"class":618},[613,31409,29726],{"class":799},[613,31411,663],{"class":618},[613,31413,2553],{"class":799},[613,31415,663],{"class":618},[613,31417,2546],{"class":659},[613,31419,2705],{"class":799},[613,31421,663],{"class":618},[613,31423,31424],{"class":799}," 3",[613,31426,31009],{"class":659},[613,31428,636],{"class":618},[613,31430,763],{"class":618},[613,31432,31433],{"class":615,"line":731},[613,31434,31435],{"class":1189},"\u003C!-- result: (1,1,0) (2,2,0) (3,3,0) -->\n",[590,31437,31438],{},"The component, like Three.js, will not keep you from shooting yourself in the foot.",[1307,31440,31441],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":552,"searchDepth":553,"depth":554,"links":31443},[31444,31445],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902,"children":31446},[31447],{"id":28437,"depth":684,"text":31223},"Component for creating 3D lines using Three.js's Line2.",{},{"title":233,"description":31448},"YTuT8KgQYLHeyqqWlrzJw6EHsHroohvx3OSFmnm7qB8",{"id":31453,"title":237,"body":31454,"description":31615,"extension":567,"links":568,"meta":31616,"navigation":570,"path":238,"seo":31617,"stem":239,"__hash__":31618},"docs/2.api/5.shapes/octahedron.md",{"type":477,"value":31455,"toc":31612},[31456,31461,31471,31476,31482,31484,31610],[584,31457,31458],{},[31459,31460],"shapes-octahedron",{},[590,31462,2843,31463,8516,31465,28070,31468,1126],{},[594,31464,7528],{},[594,31466,31467],{},"\u003COctahedron />",[594,31469,31470],{},"OctahedronGeometry",[602,31472,31474],{"className":31473,"code":29891,"language":28079},[28077],[594,31475,29891],{"__ignoreMap":552},[590,31477,28084,31478],{},[1120,31479,31470],{"href":31480,"rel":31481},"https://threejs.org/docs/?q=octa#api/en/geometries/OctahedronGeometry",[1124],[480,31483,15],{"id":600},[602,31485,31487],{"className":604,"code":31486,"language":609,"meta":552,"style":552},"\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",[594,31488,31489,31527,31531,31536,31598,31602],{"__ignoreMap":552},[613,31490,31491,31493,31495,31497,31499,31501,31503,31505,31507,31509,31511,31513,31515,31517,31519,31521,31523,31525],{"class":615,"line":553},[613,31492,619],{"class":618},[613,31494,237],{"class":622},[613,31496,789],{"class":618},[613,31498,1997],{"class":626},[613,31500,633],{"class":618},[613,31502,636],{"class":618},[613,31504,1474],{"class":659},[613,31506,1901],{"class":799},[613,31508,663],{"class":618},[613,31510,2553],{"class":799},[613,31512,1489],{"class":659},[613,31514,636],{"class":618},[613,31516,2749],{"class":626},[613,31518,633],{"class":618},[613,31520,636],{"class":618},[613,31522,11952],{"class":639},[613,31524,636],{"class":618},[613,31526,763],{"class":618},[613,31528,31529],{"class":615,"line":554},[613,31530,718],{"emptyLinePlaceholder":570},[613,31532,31533],{"class":615,"line":684},[613,31534,31535],{"class":659},"// Octahedron with a custom material transformations\n",[613,31537,31538,31540,31542,31544,31546,31548,31550,31552,31554,31556,31558,31560,31562,31564,31566,31568,31570,31572,31574,31576,31578,31580,31582,31584,31586,31588,31590,31592,31594,31596],{"class":615,"line":705},[613,31539,619],{"class":618},[613,31541,237],{"class":622},[613,31543,3975],{"class":626},[613,31545,633],{"class":618},[613,31547,636],{"class":618},[613,31549,30719],{"class":639},[613,31551,636],{"class":618},[613,31553,789],{"class":618},[613,31555,1997],{"class":626},[613,31557,633],{"class":618},[613,31559,636],{"class":618},[613,31561,1474],{"class":659},[613,31563,1901],{"class":799},[613,31565,663],{"class":618},[613,31567,2553],{"class":799},[613,31569,1489],{"class":659},[613,31571,636],{"class":618},[613,31573,789],{"class":618},[613,31575,1467],{"class":626},[613,31577,633],{"class":618},[613,31579,636],{"class":618},[613,31581,1474],{"class":659},[613,31583,800],{"class":799},[613,31585,663],{"class":618},[613,31587,28203],{"class":799},[613,31589,663],{"class":618},[613,31591,2553],{"class":799},[613,31593,1489],{"class":659},[613,31595,636],{"class":618},[613,31597,645],{"class":618},[613,31599,31600],{"class":615,"line":715},[613,31601,28218],{"class":659},[613,31603,31604,31606,31608],{"class":615,"line":721},[613,31605,708],{"class":618},[613,31607,237],{"class":622},[613,31609,645],{"class":618},[1307,31611,28229],{},{"title":552,"searchDepth":553,"depth":554,"links":31613},[31614],{"id":600,"depth":554,"text":15},"Short-cut for a OctahedronGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":237,"description":31615},"Oz79qfy3nukSma4rHutQfO-XwSxFFirqgE7OHz_8-MQ",{"id":31620,"title":241,"body":31621,"description":31789,"extension":567,"links":568,"meta":31790,"navigation":570,"path":242,"seo":31791,"stem":243,"__hash__":31792},"docs/2.api/5.shapes/plane.md",{"type":477,"value":31622,"toc":31786},[31623,31628,31638,31644,31650,31655,31657,31784],[584,31624,31625],{},[31626,31627],"shapes-plane",{},[590,31629,2843,31630,8516,31632,28070,31635,1126],{},[594,31631,7528],{},[594,31633,31634],{},"\u003CPlane />",[594,31636,31637],{},"PlaneGeometry",[602,31639,31642],{"className":31640,"code":31641,"language":28079},[28077],"args: [width: number, height: number, widthSegments: number, heightSegments: number]\n",[594,31643,31641],{"__ignoreMap":552},[590,31645,28084,31646],{},[1120,31647,31637],{"href":31648,"rel":31649},"https://threejs.org/docs/?q=plane#api/en/geometries/PlaneGeometry",[1124],[2054,31651,31652],{},[590,31653,31654],{},"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).",[480,31656,15],{"id":600},[602,31658,31660],{"className":604,"code":31659,"language":609,"meta":552,"style":552},"\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",[594,31661,31662,31700,31704,31709,31772,31776],{"__ignoreMap":552},[613,31663,31664,31666,31668,31670,31672,31674,31676,31678,31680,31682,31684,31686,31688,31690,31692,31694,31696,31698],{"class":615,"line":553},[613,31665,619],{"class":618},[613,31667,241],{"class":622},[613,31669,789],{"class":618},[613,31671,1997],{"class":626},[613,31673,633],{"class":618},[613,31675,636],{"class":618},[613,31677,1474],{"class":659},[613,31679,1901],{"class":799},[613,31681,663],{"class":618},[613,31683,2607],{"class":799},[613,31685,1489],{"class":659},[613,31687,636],{"class":618},[613,31689,2749],{"class":626},[613,31691,633],{"class":618},[613,31693,636],{"class":618},[613,31695,11952],{"class":639},[613,31697,636],{"class":618},[613,31699,763],{"class":618},[613,31701,31702],{"class":615,"line":554},[613,31703,718],{"emptyLinePlaceholder":570},[613,31705,31706],{"class":615,"line":684},[613,31707,31708],{"class":659},"// Plane with a custom material transformations\n",[613,31710,31711,31713,31715,31717,31719,31721,31724,31726,31728,31730,31732,31734,31736,31738,31740,31742,31744,31746,31748,31750,31752,31754,31756,31758,31760,31762,31764,31766,31768,31770],{"class":615,"line":705},[613,31712,619],{"class":618},[613,31714,241],{"class":622},[613,31716,3975],{"class":626},[613,31718,633],{"class":618},[613,31720,636],{"class":618},[613,31722,31723],{"class":639},"planeRef",[613,31725,636],{"class":618},[613,31727,789],{"class":618},[613,31729,1997],{"class":626},[613,31731,633],{"class":618},[613,31733,636],{"class":618},[613,31735,1474],{"class":659},[613,31737,20236],{"class":799},[613,31739,663],{"class":618},[613,31741,29048],{"class":799},[613,31743,1489],{"class":659},[613,31745,636],{"class":618},[613,31747,789],{"class":618},[613,31749,1467],{"class":626},[613,31751,633],{"class":618},[613,31753,636],{"class":618},[613,31755,1474],{"class":659},[613,31757,945],{"class":799},[613,31759,663],{"class":618},[613,31761,28203],{"class":799},[613,31763,663],{"class":618},[613,31765,2553],{"class":799},[613,31767,1489],{"class":659},[613,31769,636],{"class":618},[613,31771,645],{"class":618},[613,31773,31774],{"class":615,"line":715},[613,31775,28218],{"class":659},[613,31777,31778,31780,31782],{"class":615,"line":721},[613,31779,708],{"class":618},[613,31781,241],{"class":622},[613,31783,645],{"class":618},[1307,31785,28229],{},{"title":552,"searchDepth":553,"depth":554,"links":31787},[31788],{"id":600,"depth":554,"text":15},"Short-cut for a PlaneGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":241,"description":31789},"5OBrHmZXTQoZvxuG3DLZ3euGfAYR51mvVTntqkflx80",{"id":31794,"title":245,"body":31795,"description":32220,"extension":567,"links":568,"meta":32221,"navigation":570,"path":246,"seo":32222,"stem":247,"__hash__":32223},"docs/2.api/5.shapes/quadratic-bezier-line.md",{"type":477,"value":31796,"toc":32216},[31797,31802,31810,31812,32118,32120,32128,32214],[2343,31798,31799],{},[31800,31801],"shapes-quadratic-bezier-line",{},[590,31803,31804,29176,31807,31809],{},[594,31805,31806],{},"\u003CQuadraticBezierLine />",[594,31808,28269],{}," between start and end points, with an optional control point.",[480,31811,15],{"id":600},[602,31813,31815],{"className":604,"code":31814,"language":609,"meta":552,"style":552},"\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",[594,31816,31817,31837,31855,31874,31892,31900,31904,31912,31920,31952,31959,31989,32019,32050,32064,32076,32090,32094,32102,32110],{"__ignoreMap":552},[613,31818,31819,31821,31823,31825,31827,31829,31831,31833,31835],{"class":615,"line":553},[613,31820,619],{"class":618},[613,31822,623],{"class":622},[613,31824,627],{"class":626},[613,31826,630],{"class":626},[613,31828,633],{"class":618},[613,31830,636],{"class":618},[613,31832,640],{"class":639},[613,31834,636],{"class":618},[613,31836,645],{"class":618},[613,31838,31839,31841,31843,31845,31847,31849,31851,31853],{"class":615,"line":554},[613,31840,653],{"class":652},[613,31842,656],{"class":618},[613,31844,691],{"class":659},[613,31846,669],{"class":618},[613,31848,672],{"class":652},[613,31850,675],{"class":618},[613,31852,700],{"class":639},[613,31854,681],{"class":618},[613,31856,31857,31859,31861,31864,31866,31868,31870,31872],{"class":615,"line":684},[613,31858,653],{"class":652},[613,31860,656],{"class":618},[613,31862,31863],{"class":659}," QuadraticBezierLine",[613,31865,669],{"class":618},[613,31867,672],{"class":652},[613,31869,675],{"class":618},[613,31871,678],{"class":639},[613,31873,681],{"class":618},[613,31875,31876,31878,31880,31882,31884,31886,31888,31890],{"class":615,"line":705},[613,31877,653],{"class":652},[613,31879,656],{"class":618},[613,31881,28351],{"class":659},[613,31883,669],{"class":618},[613,31885,672],{"class":652},[613,31887,675],{"class":618},[613,31889,4785],{"class":639},[613,31891,681],{"class":618},[613,31893,31894,31896,31898],{"class":615,"line":715},[613,31895,708],{"class":618},[613,31897,623],{"class":622},[613,31899,645],{"class":618},[613,31901,31902],{"class":615,"line":721},[613,31903,718],{"emptyLinePlaceholder":570},[613,31905,31906,31908,31910],{"class":615,"line":731},[613,31907,619],{"class":618},[613,31909,726],{"class":622},[613,31911,645],{"class":618},[613,31913,31914,31916,31918],{"class":615,"line":754},[613,31915,734],{"class":618},[613,31917,737],{"class":622},[613,31919,645],{"class":618},[613,31921,31922,31924,31926,31928,31930,31932,31934,31936,31938,31940,31942,31944,31946,31948,31950],{"class":615,"line":766},[613,31923,757],{"class":618},[613,31925,760],{"class":622},[613,31927,789],{"class":618},[613,31929,1467],{"class":626},[613,31931,633],{"class":618},[613,31933,636],{"class":618},[613,31935,1474],{"class":618},[613,31937,2705],{"class":799},[613,31939,1479],{"class":618},[613,31941,2705],{"class":799},[613,31943,1479],{"class":618},[613,31945,2705],{"class":799},[613,31947,1489],{"class":618},[613,31949,636],{"class":618},[613,31951,763],{"class":618},[613,31953,31954,31956],{"class":615,"line":776},[613,31955,757],{"class":618},[613,31957,31958],{"class":622},"QuadraticBezierLine\n",[613,31960,31961,31963,31965,31967,31969,31971,31973,31975,31977,31979,31981,31983,31985,31987],{"class":615,"line":781},[613,31962,10907],{"class":618},[613,31964,12983],{"class":626},[613,31966,633],{"class":618},[613,31968,636],{"class":618},[613,31970,29341],{"class":618},[613,31972,8413],{"class":2482},[613,31974,28449],{"class":618},[613,31976,1901],{"class":799},[613,31978,1479],{"class":618},[613,31980,945],{"class":799},[613,31982,1479],{"class":618},[613,31984,945],{"class":799},[613,31986,3409],{"class":618},[613,31988,3200],{"class":618},[613,31990,31991,31993,31995,31997,31999,32001,32003,32005,32007,32009,32011,32013,32015,32017],{"class":615,"line":807},[613,31992,10907],{"class":618},[613,31994,12997],{"class":626},[613,31996,633],{"class":618},[613,31998,636],{"class":618},[613,32000,29341],{"class":618},[613,32002,8413],{"class":2482},[613,32004,2485],{"class":618},[613,32006,1901],{"class":799},[613,32008,1479],{"class":618},[613,32010,945],{"class":799},[613,32012,1479],{"class":618},[613,32014,945],{"class":799},[613,32016,3409],{"class":618},[613,32018,3200],{"class":618},[613,32020,32021,32023,32026,32028,32030,32032,32034,32036,32038,32040,32042,32044,32046,32048],{"class":615,"line":607},[613,32022,10907],{"class":618},[613,32024,32025],{"class":626},"mid",[613,32027,633],{"class":618},[613,32029,636],{"class":618},[613,32031,29341],{"class":618},[613,32033,8413],{"class":2482},[613,32035,2485],{"class":618},[613,32037,945],{"class":799},[613,32039,1479],{"class":618},[613,32041,1901],{"class":799},[613,32043,1479],{"class":618},[613,32045,945],{"class":799},[613,32047,3409],{"class":618},[613,32049,3200],{"class":618},[613,32051,32052,32054,32056,32058,32060,32062],{"class":615,"line":830},[613,32053,10907],{"class":618},[613,32055,28505],{"class":626},[613,32057,633],{"class":618},[613,32059,636],{"class":618},[613,32061,9822],{"class":799},[613,32063,3200],{"class":618},[613,32065,32066,32068,32070,32072,32074],{"class":615,"line":841},[613,32067,28519],{"class":626},[613,32069,633],{"class":618},[613,32071,636],{"class":618},[613,32073,11952],{"class":639},[613,32075,3200],{"class":618},[613,32077,32078,32080,32082,32084,32086,32088],{"class":615,"line":852},[613,32079,10907],{"class":618},[613,32081,28535],{"class":626},[613,32083,633],{"class":618},[613,32085,636],{"class":618},[613,32087,2705],{"class":799},[613,32089,3200],{"class":618},[613,32091,32092],{"class":615,"line":862},[613,32093,16014],{"class":618},[613,32095,32096,32098,32100],{"class":615,"line":608},[613,32097,757],{"class":618},[613,32099,8758],{"class":622},[613,32101,763],{"class":618},[613,32103,32104,32106,32108],{"class":615,"line":882},[613,32105,885],{"class":618},[613,32107,737],{"class":622},[613,32109,645],{"class":618},[613,32111,32112,32114,32116],{"class":615,"line":892},[613,32113,708],{"class":618},[613,32115,726],{"class":622},[613,32117,645],{"class":618},[480,32119,902],{"id":901},[590,32121,32122,29526,32124,7430,32126,1126],{},[594,32123,31806],{},[594,32125,28437],{},[594,32127,28269],{},[907,32129,32130,32145],{},[910,32131,32132],{},[913,32133,32134,32136,32138,32140,32142],{},[916,32135,918],{},[916,32137,6179],{},[916,32139,921],{},[916,32141,924],{},[916,32143,32144],{},"Required",[926,32146,32147,32164,32180,32198],{},[913,32148,32149,32153,32157,32159,32161],{},[931,32150,32151],{},[594,32152,12983],{},[931,32154,32155],{},[594,32156,29557],{},[931,32158,29560],{},[931,32160],{},[931,32162,32163],{},"yes",[913,32165,32166,32170,32174,32176,32178],{},[931,32167,32168],{},[594,32169,12997],{},[931,32171,32172],{},[594,32173,29557],{},[931,32175,29575],{},[931,32177],{},[931,32179,32163],{},[913,32181,32182,32186,32190,32193,32195],{},[931,32183,32184],{},[594,32185,32025],{},[931,32187,32188],{},[594,32189,29557],{},[931,32191,32192],{},"Control point",[931,32194],{},[931,32196,32197],{},"no",[913,32199,32200,32204,32208,32210,32212],{},[931,32201,32202],{},[594,32203,28505],{},[931,32205,32206],{},[594,32207,5565],{},[931,32209,28614],{},[931,32211,28617],{},[931,32213,32197],{},[1307,32215,28805],{},{"title":552,"searchDepth":553,"depth":554,"links":32217},[32218,32219],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},"Renders a Line2 between start and end points with an optional control point.",{},{"title":245,"description":32220},"x3tvZVc6qkdY7oDfxpxQl2C7EV85RKijXjcoHR_b1q8",{"id":32225,"title":249,"body":32226,"description":32397,"extension":567,"links":568,"meta":32398,"navigation":570,"path":250,"seo":32399,"stem":251,"__hash__":32400},"docs/2.api/5.shapes/ring.md",{"type":477,"value":32227,"toc":32394},[32228,32233,32243,32249,32255,32257,32392],[584,32229,32230],{},[32231,32232],"shapes-ring",{},[590,32234,2843,32235,8516,32237,28070,32240,1126],{},[594,32236,7528],{},[594,32238,32239],{},"\u003CRing />",[594,32241,32242],{},"RingGeometry",[602,32244,32247],{"className":32245,"code":32246,"language":28079},[28077],"args: [\n innerRadius: number,\n outerRadius: number,\n thetaSegments: number,\n phiSegments: number,\n thetaStart: number,\n thetaLength: number\n]\n",[594,32248,32246],{"__ignoreMap":552},[590,32250,28084,32251],{},[1120,32252,32242],{"href":32253,"rel":32254},"https://threejs.org/docs/?q=ring#api/en/geometries/RingGeometry",[1124],[480,32256,15],{"id":600},[602,32258,32260],{"className":604,"code":32259,"language":609,"meta":552,"style":552},"\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",[594,32261,32262,32304,32308,32313,32380,32384],{"__ignoreMap":552},[613,32263,32264,32266,32268,32270,32272,32274,32276,32278,32280,32282,32284,32286,32288,32290,32292,32294,32296,32298,32300,32302],{"class":615,"line":553},[613,32265,619],{"class":618},[613,32267,249],{"class":622},[613,32269,789],{"class":618},[613,32271,1997],{"class":626},[613,32273,633],{"class":618},[613,32275,636],{"class":618},[613,32277,1474],{"class":659},[613,32279,1521],{"class":799},[613,32281,663],{"class":618},[613,32283,2607],{"class":799},[613,32285,663],{"class":618},[613,32287,28874],{"class":799},[613,32289,1489],{"class":659},[613,32291,636],{"class":618},[613,32293,2749],{"class":626},[613,32295,633],{"class":618},[613,32297,636],{"class":618},[613,32299,11952],{"class":639},[613,32301,636],{"class":618},[613,32303,763],{"class":618},[613,32305,32306],{"class":615,"line":554},[613,32307,718],{"emptyLinePlaceholder":570},[613,32309,32310],{"class":615,"line":684},[613,32311,32312],{"class":659},"// Ring with a custom material transformations\n",[613,32314,32315,32317,32319,32321,32323,32325,32328,32330,32332,32334,32336,32338,32340,32342,32344,32346,32348,32350,32352,32354,32356,32358,32360,32362,32364,32366,32368,32370,32372,32374,32376,32378],{"class":615,"line":705},[613,32316,619],{"class":618},[613,32318,249],{"class":622},[613,32320,3975],{"class":626},[613,32322,633],{"class":618},[613,32324,636],{"class":618},[613,32326,32327],{"class":639},"ringRef",[613,32329,636],{"class":618},[613,32331,789],{"class":618},[613,32333,1997],{"class":626},[613,32335,633],{"class":618},[613,32337,636],{"class":618},[613,32339,1474],{"class":659},[613,32341,1521],{"class":799},[613,32343,663],{"class":618},[613,32345,2607],{"class":799},[613,32347,663],{"class":618},[613,32349,28874],{"class":799},[613,32351,1489],{"class":659},[613,32353,636],{"class":618},[613,32355,789],{"class":618},[613,32357,1467],{"class":626},[613,32359,633],{"class":618},[613,32361,636],{"class":618},[613,32363,1474],{"class":659},[613,32365,800],{"class":799},[613,32367,663],{"class":618},[613,32369,28203],{"class":799},[613,32371,663],{"class":618},[613,32373,2553],{"class":799},[613,32375,1489],{"class":659},[613,32377,636],{"class":618},[613,32379,645],{"class":618},[613,32381,32382],{"class":615,"line":715},[613,32383,28218],{"class":659},[613,32385,32386,32388,32390],{"class":615,"line":721},[613,32387,708],{"class":618},[613,32389,249],{"class":622},[613,32391,645],{"class":618},[1307,32393,28229],{},{"title":552,"searchDepth":553,"depth":554,"links":32395},[32396],{"id":600,"depth":554,"text":15},"Short-cut for a RingGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":249,"description":32397},"sjdJr8WfSUL8VppV0tIyFALL7j5Mg1IJmmVLISwAI9U",{"id":32402,"title":253,"body":32403,"description":32559,"extension":567,"links":568,"meta":32560,"navigation":570,"path":254,"seo":32561,"stem":255,"__hash__":32562},"docs/2.api/5.shapes/rounded-box.md",{"type":477,"value":32404,"toc":32556},[32405,32410,32421,32427,32433,32435,32554],[584,32406,32407],{},[32408,32409],"shapes-rounded-box",{},[590,32411,2843,32412,8516,32414,28070,32417,32420],{},[594,32413,7528],{},[594,32415,32416],{},"\u003CRoundedBox />",[594,32418,32419],{},"RoundedBoxGeometry"," .",[602,32422,32425],{"className":32423,"code":32424,"language":28079},[28077],"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",[594,32426,32424],{"__ignoreMap":552},[590,32428,28084,32429],{},[1120,32430,32419],{"href":32431,"rel":32432},"https://github.com/mrdoob/three.js/blob/master/examples/jsm/geometries/RoundedBoxGeometry.js",[1124],[480,32434,15],{"id":600},[602,32436,32438],{"className":604,"code":32437,"language":609,"meta":552,"style":552},"\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",[594,32439,32440,32491,32495,32500,32542,32546],{"__ignoreMap":552},[613,32441,32442,32444,32447,32449,32451,32453,32455,32457,32459,32461,32463,32465,32467,32469,32471,32473,32475,32477,32479,32481,32483,32485,32487,32489],{"class":615,"line":553},[613,32443,619],{"class":618},[613,32445,32446],{"class":622},"RoundedBox",[613,32448,789],{"class":618},[613,32450,1997],{"class":626},[613,32452,633],{"class":618},[613,32454,636],{"class":618},[613,32456,1474],{"class":659},[613,32458,1901],{"class":799},[613,32460,663],{"class":618},[613,32462,2607],{"class":799},[613,32464,663],{"class":618},[613,32466,2607],{"class":799},[613,32468,663],{"class":618},[613,32470,29726],{"class":799},[613,32472,663],{"class":618},[613,32474,22227],{"class":799},[613,32476,1489],{"class":659},[613,32478,636],{"class":618},[613,32480,2749],{"class":626},[613,32482,633],{"class":618},[613,32484,636],{"class":618},[613,32486,11952],{"class":639},[613,32488,636],{"class":618},[613,32490,763],{"class":618},[613,32492,32493],{"class":615,"line":554},[613,32494,718],{"emptyLinePlaceholder":570},[613,32496,32497],{"class":615,"line":684},[613,32498,32499],{"class":659},"// RoundedBox with a custom material transformations\n",[613,32501,32502,32504,32506,32508,32510,32512,32514,32516,32518,32520,32522,32524,32526,32528,32530,32532,32534,32536,32538,32540],{"class":615,"line":705},[613,32503,619],{"class":618},[613,32505,32446],{"class":622},[613,32507,3975],{"class":626},[613,32509,633],{"class":618},[613,32511,636],{"class":618},[613,32513,15015],{"class":639},[613,32515,636],{"class":618},[613,32517,789],{"class":618},[613,32519,1467],{"class":626},[613,32521,633],{"class":618},[613,32523,636],{"class":618},[613,32525,1474],{"class":659},[613,32527,945],{"class":799},[613,32529,663],{"class":618},[613,32531,28203],{"class":799},[613,32533,663],{"class":618},[613,32535,2553],{"class":799},[613,32537,1489],{"class":659},[613,32539,636],{"class":618},[613,32541,645],{"class":618},[613,32543,32544],{"class":615,"line":715},[613,32545,28218],{"class":659},[613,32547,32548,32550,32552],{"class":615,"line":721},[613,32549,708],{"class":618},[613,32551,32446],{"class":622},[613,32553,645],{"class":618},[1307,32555,28229],{},{"title":552,"searchDepth":553,"depth":554,"links":32557},[32558],{"id":600,"depth":554,"text":15},"Short-cut for a RoundedBoxGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":253,"description":32559},"6uRmRs4RGOfq4lQeUlAm3DycDFH9FnKYbwGuk5ODp5k",{"id":32564,"title":257,"body":32565,"description":32753,"extension":567,"links":568,"meta":32754,"navigation":570,"path":258,"seo":32755,"stem":259,"__hash__":32756},"docs/2.api/5.shapes/screen-quad.md",{"type":477,"value":32566,"toc":32749},[32567,32572,32575,32577,32727,32731,32747],[2343,32568,32569],{},[32570,32571],"shapes-screen-quad",{},[590,32573,32574],{},"A triangle that fills the screen when using a THREE.OrthographicCamera. Useful for full-screen fragment shader work.",[480,32576,15],{"id":600},[602,32578,32580],{"className":604,"code":32579,"language":609,"meta":552,"style":552},"\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",[594,32581,32582,32602,32620,32639,32647,32651,32659,32667,32676,32685,32703,32711,32719],{"__ignoreMap":552},[613,32583,32584,32586,32588,32590,32592,32594,32596,32598,32600],{"class":615,"line":553},[613,32585,619],{"class":618},[613,32587,623],{"class":622},[613,32589,627],{"class":626},[613,32591,630],{"class":626},[613,32593,633],{"class":618},[613,32595,636],{"class":618},[613,32597,640],{"class":639},[613,32599,636],{"class":618},[613,32601,645],{"class":618},[613,32603,32604,32606,32608,32610,32612,32614,32616,32618],{"class":615,"line":554},[613,32605,653],{"class":652},[613,32607,656],{"class":618},[613,32609,691],{"class":659},[613,32611,669],{"class":618},[613,32613,672],{"class":652},[613,32615,675],{"class":618},[613,32617,700],{"class":639},[613,32619,681],{"class":618},[613,32621,32622,32624,32626,32629,32631,32633,32635,32637],{"class":615,"line":684},[613,32623,653],{"class":652},[613,32625,656],{"class":618},[613,32627,32628],{"class":659}," ScreenQuad",[613,32630,669],{"class":618},[613,32632,672],{"class":652},[613,32634,675],{"class":618},[613,32636,678],{"class":639},[613,32638,681],{"class":618},[613,32640,32641,32643,32645],{"class":615,"line":705},[613,32642,708],{"class":618},[613,32644,623],{"class":622},[613,32646,645],{"class":618},[613,32648,32649],{"class":615,"line":715},[613,32650,718],{"emptyLinePlaceholder":570},[613,32652,32653,32655,32657],{"class":615,"line":721},[613,32654,619],{"class":618},[613,32656,726],{"class":622},[613,32658,645],{"class":618},[613,32660,32661,32663,32665],{"class":615,"line":731},[613,32662,734],{"class":618},[613,32664,737],{"class":622},[613,32666,645],{"class":618},[613,32668,32669,32671,32674],{"class":615,"line":754},[613,32670,757],{"class":618},[613,32672,32673],{"class":622},"TresOrthographicCamera",[613,32675,763],{"class":618},[613,32677,32678,32680,32683],{"class":615,"line":766},[613,32679,757],{"class":618},[613,32681,32682],{"class":622},"ScreenQuad",[613,32684,645],{"class":618},[613,32686,32687,32689,32691,32693,32695,32697,32699,32701],{"class":615,"line":776},[613,32688,833],{"class":618},[613,32690,11943],{"class":622},[613,32692,2749],{"class":626},[613,32694,633],{"class":618},[613,32696,636],{"class":618},[613,32698,11952],{"class":639},[613,32700,636],{"class":618},[613,32702,763],{"class":618},[613,32704,32705,32707,32709],{"class":615,"line":781},[613,32706,875],{"class":618},[613,32708,32682],{"class":622},[613,32710,645],{"class":618},[613,32712,32713,32715,32717],{"class":615,"line":807},[613,32714,885],{"class":618},[613,32716,737],{"class":622},[613,32718,645],{"class":618},[613,32720,32721,32723,32725],{"class":615,"line":607},[613,32722,708],{"class":618},[613,32724,726],{"class":622},[613,32726,645],{"class":618},[480,32728,32730],{"id":32729},"references","References",[2261,32732,32733,32740],{},[2264,32734,32735],{},[1120,32736,32739],{"href":32737,"rel":32738},"https://www.cginternals.com/en/blog/2018-01-10-screen-aligned-quads-and-triangles.html",[1124],"Why a triangle?",[2264,32741,32742],{},[1120,32743,32746],{"href":32744,"rel":32745},"https://luruke.medium.com/simple-postprocessing-in-three-js-91936ecadfb7",[1124],"Simple postprocessing in Three.js",[1307,32748,26531],{},{"title":552,"searchDepth":553,"depth":554,"links":32750},[32751,32752],{"id":600,"depth":554,"text":15},{"id":32729,"depth":554,"text":32730},"A triangle that fills the screen for full-screen fragment shader work.",{},{"title":257,"description":32753},"7AUdT-SMH4R5MsKpuypi4UzVsHt7S7ryCNHpJVv28A8",{"id":32758,"title":261,"body":32759,"description":32929,"extension":567,"links":568,"meta":32930,"navigation":570,"path":262,"seo":32931,"stem":263,"__hash__":32932},"docs/2.api/5.shapes/sphere.md",{"type":477,"value":32760,"toc":32926},[32761,32766,32776,32782,32788,32790,32924],[584,32762,32763],{},[32764,32765],"shapes-sphere",{},[590,32767,2843,32768,8516,32770,28070,32773,1126],{},[594,32769,7528],{},[594,32771,32772],{},"\u003CSphere />",[594,32774,32775],{},"SphereGeometry",[602,32777,32780],{"className":32778,"code":32779,"language":28079},[28077],"args: [\n radius: number,\n widthSegments: number,\n heightSegments: number,\n phiStart: number,\n phiLength: number,\n thetaStart: number,\n thetaLength: number\n]\n",[594,32781,32779],{"__ignoreMap":552},[590,32783,28084,32784],{},[1120,32785,32775],{"href":32786,"rel":32787},"https://threejs.org/docs/?q=sphere#api/en/geometries/SphereGeometry",[1124],[480,32789,15],{"id":600},[602,32791,32793],{"className":604,"code":32792,"language":609,"meta":552,"style":552},"\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",[594,32794,32795,32837,32841,32846,32912,32916],{"__ignoreMap":552},[613,32796,32797,32799,32801,32803,32805,32807,32809,32811,32813,32815,32817,32819,32821,32823,32825,32827,32829,32831,32833,32835],{"class":615,"line":553},[613,32798,619],{"class":618},[613,32800,261],{"class":622},[613,32802,789],{"class":618},[613,32804,1997],{"class":626},[613,32806,633],{"class":618},[613,32808,636],{"class":618},[613,32810,1474],{"class":659},[613,32812,1901],{"class":799},[613,32814,663],{"class":618},[613,32816,2607],{"class":799},[613,32818,663],{"class":618},[613,32820,2607],{"class":799},[613,32822,1489],{"class":659},[613,32824,636],{"class":618},[613,32826,2749],{"class":626},[613,32828,633],{"class":618},[613,32830,636],{"class":618},[613,32832,11952],{"class":639},[613,32834,636],{"class":618},[613,32836,763],{"class":618},[613,32838,32839],{"class":615,"line":554},[613,32840,718],{"emptyLinePlaceholder":570},[613,32842,32843],{"class":615,"line":684},[613,32844,32845],{"class":659},"// Sphere with a custom material transformations\n",[613,32847,32848,32850,32852,32854,32856,32858,32860,32862,32864,32866,32868,32870,32872,32874,32876,32878,32880,32882,32884,32886,32888,32890,32892,32894,32896,32898,32900,32902,32904,32906,32908,32910],{"class":615,"line":705},[613,32849,619],{"class":618},[613,32851,261],{"class":622},[613,32853,3975],{"class":626},[613,32855,633],{"class":618},[613,32857,636],{"class":618},[613,32859,31723],{"class":639},[613,32861,636],{"class":618},[613,32863,789],{"class":618},[613,32865,1997],{"class":626},[613,32867,633],{"class":618},[613,32869,636],{"class":618},[613,32871,1474],{"class":659},[613,32873,1901],{"class":799},[613,32875,663],{"class":618},[613,32877,2607],{"class":799},[613,32879,663],{"class":618},[613,32881,2607],{"class":799},[613,32883,1489],{"class":659},[613,32885,636],{"class":618},[613,32887,789],{"class":618},[613,32889,1467],{"class":626},[613,32891,633],{"class":618},[613,32893,636],{"class":618},[613,32895,1474],{"class":659},[613,32897,800],{"class":799},[613,32899,663],{"class":618},[613,32901,28203],{"class":799},[613,32903,663],{"class":618},[613,32905,2553],{"class":799},[613,32907,1489],{"class":659},[613,32909,636],{"class":618},[613,32911,645],{"class":618},[613,32913,32914],{"class":615,"line":715},[613,32915,28218],{"class":659},[613,32917,32918,32920,32922],{"class":615,"line":721},[613,32919,708],{"class":618},[613,32921,261],{"class":622},[613,32923,645],{"class":618},[1307,32925,28229],{},{"title":552,"searchDepth":553,"depth":554,"links":32927},[32928],{"id":600,"depth":554,"text":15},"Short-cut for a SphereGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":261,"description":32929},"CXqQd226fbRLkf86b33CXbH-uGM-cwo2HQNRB4Pt8Xs",{"id":32934,"title":265,"body":32935,"description":33381,"extension":567,"links":568,"meta":33382,"navigation":570,"path":266,"seo":33383,"stem":267,"__hash__":33384},"docs/2.api/5.shapes/superformula.md",{"type":477,"value":32936,"toc":33376},[32937,32942,32955,32957,33241,33243,33253,33365,33369,33374],[584,32938,32939],{},[32940,32941],"shapes-super-formula",{},[590,32943,2843,32944,8516,32946,32949,32950,1126],{},[594,32945,7528],{},[594,32947,32948],{},"\u003CSuperformula />"," component that produces a configurable ",[1120,32951,32954],{"href":32952,"rel":32953},"https://en.wikipedia.org/wiki/Superformula",[1124],"3D plot of the superformula",[480,32956,15],{"id":600},[602,32958,32961],{"className":604,"code":32959,"highlights":32960,"language":609,"meta":552,"style":552},"\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",[684,766,776,781,807,607,830],[594,32962,32963,32983,33001,33021,33029,33033,33041,33049,33081,33089,33105,33121,33137,33167,33181,33185,33193,33225,33233],{"__ignoreMap":552},[613,32964,32965,32967,32969,32971,32973,32975,32977,32979,32981],{"class":615,"line":553},[613,32966,619],{"class":618},[613,32968,623],{"class":622},[613,32970,627],{"class":626},[613,32972,630],{"class":626},[613,32974,633],{"class":618},[613,32976,636],{"class":618},[613,32978,640],{"class":639},[613,32980,636],{"class":618},[613,32982,645],{"class":618},[613,32984,32985,32987,32989,32991,32993,32995,32997,32999],{"class":615,"line":554},[613,32986,653],{"class":652},[613,32988,656],{"class":618},[613,32990,691],{"class":659},[613,32992,669],{"class":618},[613,32994,672],{"class":652},[613,32996,675],{"class":618},[613,32998,700],{"class":639},[613,33000,681],{"class":618},[613,33002,33004,33006,33008,33011,33013,33015,33017,33019],{"class":33003,"line":684},[615,649],[613,33005,653],{"class":652},[613,33007,656],{"class":618},[613,33009,33010],{"class":659}," Superformula",[613,33012,669],{"class":618},[613,33014,672],{"class":652},[613,33016,675],{"class":618},[613,33018,678],{"class":639},[613,33020,681],{"class":618},[613,33022,33023,33025,33027],{"class":615,"line":705},[613,33024,708],{"class":618},[613,33026,623],{"class":622},[613,33028,645],{"class":618},[613,33030,33031],{"class":615,"line":715},[613,33032,718],{"emptyLinePlaceholder":570},[613,33034,33035,33037,33039],{"class":615,"line":721},[613,33036,619],{"class":618},[613,33038,726],{"class":622},[613,33040,645],{"class":618},[613,33042,33043,33045,33047],{"class":615,"line":731},[613,33044,734],{"class":618},[613,33046,737],{"class":622},[613,33048,645],{"class":618},[613,33050,33051,33053,33055,33057,33059,33061,33063,33065,33067,33069,33071,33073,33075,33077,33079],{"class":615,"line":754},[613,33052,757],{"class":618},[613,33054,760],{"class":622},[613,33056,789],{"class":618},[613,33058,1467],{"class":626},[613,33060,633],{"class":618},[613,33062,636],{"class":618},[613,33064,1474],{"class":618},[613,33066,2705],{"class":799},[613,33068,1479],{"class":618},[613,33070,2705],{"class":799},[613,33072,1479],{"class":618},[613,33074,2705],{"class":799},[613,33076,1489],{"class":618},[613,33078,636],{"class":618},[613,33080,763],{"class":618},[613,33082,33084,33086],{"class":33083,"line":766},[615,649],[613,33085,757],{"class":618},[613,33087,33088],{"class":622},"Superformula\n",[613,33090,33092,33094,33097,33099,33101,33103],{"class":33091,"line":776},[615,649],[613,33093,10907],{"class":618},[613,33095,33096],{"class":626},"width-segments",[613,33098,633],{"class":618},[613,33100,636],{"class":618},[613,33102,9201],{"class":799},[613,33104,3200],{"class":618},[613,33106,33108,33110,33113,33115,33117,33119],{"class":33107,"line":781},[615,649],[613,33109,10907],{"class":618},[613,33111,33112],{"class":626},"height-segments",[613,33114,633],{"class":618},[613,33116,636],{"class":618},[613,33118,9201],{"class":799},[613,33120,3200],{"class":618},[613,33122,33124,33126,33129,33131,33133,33135],{"class":33123,"line":807},[615,649],[613,33125,10907],{"class":618},[613,33127,33128],{"class":626},"num-arms-a",[613,33130,633],{"class":618},[613,33132,636],{"class":618},[613,33134,7668],{"class":799},[613,33136,3200],{"class":618},[613,33138,33140,33142,33145,33147,33149,33151,33154,33156,33158,33160,33163,33165],{"class":33139,"line":607},[615,649],[613,33141,10907],{"class":618},[613,33143,33144],{"class":626},"exp-a",[613,33146,633],{"class":618},[613,33148,636],{"class":618},[613,33150,1474],{"class":618},[613,33152,33153],{"class":799},"40",[613,33155,1479],{"class":618},[613,33157,30338],{"class":799},[613,33159,1479],{"class":618},[613,33161,33162],{"class":799},"0.9",[613,33164,1489],{"class":618},[613,33166,3200],{"class":618},[613,33168,33170,33172,33174,33176,33179],{"class":33169,"line":830},[615,649],[613,33171,28519],{"class":626},[613,33173,633],{"class":618},[613,33175,636],{"class":618},[613,33177,33178],{"class":639},"#ff6b6b",[613,33180,3200],{"class":618},[613,33182,33183],{"class":615,"line":841},[613,33184,16014],{"class":618},[613,33186,33187,33189,33191],{"class":615,"line":852},[613,33188,757],{"class":618},[613,33190,8758],{"class":622},[613,33192,763],{"class":618},[613,33194,33195,33197,33199,33201,33203,33205,33207,33209,33211,33213,33215,33217,33219,33221,33223],{"class":615,"line":862},[613,33196,757],{"class":618},[613,33198,8779],{"class":622},[613,33200,789],{"class":618},[613,33202,1467],{"class":626},[613,33204,633],{"class":618},[613,33206,636],{"class":618},[613,33208,1474],{"class":618},[613,33210,945],{"class":799},[613,33212,1479],{"class":618},[613,33214,800],{"class":799},[613,33216,1479],{"class":618},[613,33218,3876],{"class":799},[613,33220,1489],{"class":618},[613,33222,636],{"class":618},[613,33224,763],{"class":618},[613,33226,33227,33229,33231],{"class":615,"line":608},[613,33228,885],{"class":618},[613,33230,737],{"class":622},[613,33232,645],{"class":618},[613,33234,33235,33237,33239],{"class":615,"line":882},[613,33236,708],{"class":618},[613,33238,726],{"class":622},[613,33240,645],{"class":618},[480,33242,902],{"id":901},[590,33244,2843,33245,33247,33248,33252],{},[594,33246,32948],{}," 3D plot is the product of 2 2D superformulas, referred to as \"A\" and \"B\" in the props. See this ",[1120,33249,33251],{"href":32952,"rel":33250},[1124],"Wikipedia article about the superformula"," for more information about the function's arguments.",[907,33254,33255,33265],{},[910,33256,33257],{},[913,33258,33259,33261,33263],{},[916,33260,8362],{"align":977},[916,33262,921],{"align":977},[916,33264,924],{"align":977},[926,33266,33267,33281,33295,33309,33324,33338,33352],{},[913,33268,33269,33274,33277],{},[931,33270,33271],{"align":977},[1681,33272,33273],{},"widthSegments",[931,33275,33276],{"align":977},"Number of horizontal mesh segments",[931,33278,33279],{"align":977},[594,33280,10950],{},[913,33282,33283,33288,33291],{},[931,33284,33285],{"align":977},[1681,33286,33287],{},"heightSegments",[931,33289,33290],{"align":977},"Number of vertical mesh segments",[931,33292,33293],{"align":977},[594,33294,10950],{},[913,33296,33297,33302,33305],{},[931,33298,33299],{"align":977},[1681,33300,33301],{},"numArmsA",[931,33303,33304],{"align":977},"For A, number of radial arms/ripples",[931,33306,33307],{"align":977},[594,33308,3876],{},[913,33310,33311,33316,33319],{},[931,33312,33313],{"align":977},[1681,33314,33315],{},"expA",[931,33317,33318],{"align":977},"A's 3 exponents",[931,33320,33321],{"align":977},[594,33322,33323],{},"[40, 1.3, 0.9]",[913,33325,33326,33331,33334],{},[931,33327,33328],{"align":977},[1681,33329,33330],{},"numArmsB",[931,33332,33333],{"align":977},"For B, number of radial arms/ripples",[931,33335,33336],{"align":977},[594,33337,3876],{},[913,33339,33340,33345,33348],{},[931,33341,33342],{"align":977},[1681,33343,33344],{},"expB",[931,33346,33347],{"align":977},"B's 3 exponents",[931,33349,33350],{"align":977},[594,33351,33323],{},[913,33353,33354,33358,33361],{},[931,33355,33356],{"align":977},[1681,33357,7772],{},[931,33359,33360],{"align":977},"If no material is provided, a color for the default material",[931,33362,33363],{"align":977},[594,33364,28690],{},[480,33366,33368],{"id":33367},"slot","Slot",[590,33370,33371,33373],{},[594,33372,32948],{}," has a single slot for an optional material.",[1307,33375,1656],{},{"title":552,"searchDepth":553,"depth":554,"links":33377},[33378,33379,33380],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},{"id":33367,"depth":554,"text":33368},"Produces a configurable 3D plot of the superformula.",{},{"title":265,"description":33381},"e6vrte2Vz6VeiZF2tvUtKAkrmeL55JA0AIEipHcn53Y",{"id":33386,"title":269,"body":33387,"description":33549,"extension":567,"links":568,"meta":33550,"navigation":570,"path":270,"seo":33551,"stem":271,"__hash__":33552},"docs/2.api/5.shapes/tetrahedron.md",{"type":477,"value":33388,"toc":33546},[33389,33394,33404,33409,33415,33417,33544],[584,33390,33391],{},[33392,33393],"shapes-tetrahedron",{},[590,33395,2843,33396,8516,33398,28070,33401,1126],{},[594,33397,7528],{},[594,33399,33400],{},"\u003CTetrahedron />",[594,33402,33403],{},"TetrahedronGeometry",[602,33405,33407],{"className":33406,"code":29891,"language":28079},[28077],[594,33408,29891],{"__ignoreMap":552},[590,33410,28084,33411],{},[1120,33412,33403],{"href":33413,"rel":33414},"https://threejs.org/docs/?q=tetr#api/en/geometries/TetrahedronGeometry",[1124],[480,33416,15],{"id":600},[602,33418,33420],{"className":604,"code":33419,"language":609,"meta":552,"style":552},"\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",[594,33421,33422,33460,33464,33469,33532,33536],{"__ignoreMap":552},[613,33423,33424,33426,33428,33430,33432,33434,33436,33438,33440,33442,33444,33446,33448,33450,33452,33454,33456,33458],{"class":615,"line":553},[613,33425,619],{"class":618},[613,33427,269],{"class":622},[613,33429,789],{"class":618},[613,33431,1997],{"class":626},[613,33433,633],{"class":618},[613,33435,636],{"class":618},[613,33437,1474],{"class":659},[613,33439,1901],{"class":799},[613,33441,663],{"class":618},[613,33443,2553],{"class":799},[613,33445,1489],{"class":659},[613,33447,636],{"class":618},[613,33449,2749],{"class":626},[613,33451,633],{"class":618},[613,33453,636],{"class":618},[613,33455,11952],{"class":639},[613,33457,636],{"class":618},[613,33459,763],{"class":618},[613,33461,33462],{"class":615,"line":554},[613,33463,718],{"emptyLinePlaceholder":570},[613,33465,33466],{"class":615,"line":684},[613,33467,33468],{"class":659},"// Tetrahedron with a custom material transformations\n",[613,33470,33471,33473,33475,33477,33479,33481,33484,33486,33488,33490,33492,33494,33496,33498,33500,33502,33504,33506,33508,33510,33512,33514,33516,33518,33520,33522,33524,33526,33528,33530],{"class":615,"line":705},[613,33472,619],{"class":618},[613,33474,269],{"class":622},[613,33476,3975],{"class":626},[613,33478,633],{"class":618},[613,33480,636],{"class":618},[613,33482,33483],{"class":639},"tetrahedronRef",[613,33485,636],{"class":618},[613,33487,789],{"class":618},[613,33489,1997],{"class":626},[613,33491,633],{"class":618},[613,33493,636],{"class":618},[613,33495,1474],{"class":659},[613,33497,1901],{"class":799},[613,33499,663],{"class":618},[613,33501,2553],{"class":799},[613,33503,1489],{"class":659},[613,33505,636],{"class":618},[613,33507,789],{"class":618},[613,33509,1467],{"class":626},[613,33511,633],{"class":618},[613,33513,636],{"class":618},[613,33515,1474],{"class":659},[613,33517,800],{"class":799},[613,33519,663],{"class":618},[613,33521,28203],{"class":799},[613,33523,663],{"class":618},[613,33525,2553],{"class":799},[613,33527,1489],{"class":659},[613,33529,636],{"class":618},[613,33531,645],{"class":618},[613,33533,33534],{"class":615,"line":715},[613,33535,28218],{"class":659},[613,33537,33538,33540,33542],{"class":615,"line":721},[613,33539,708],{"class":618},[613,33541,269],{"class":622},[613,33543,645],{"class":618},[1307,33545,28229],{},{"title":552,"searchDepth":553,"depth":554,"links":33547},[33548],{"id":600,"depth":554,"text":15},"Short-cut for a TetrahedronGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":269,"description":33549},"6ZMY_90iSBZYMdJF00ih1rbyX9sFMIXEk1iKSd_AFMc",{"id":33554,"title":273,"body":33555,"description":33740,"extension":567,"links":568,"meta":33741,"navigation":570,"path":274,"seo":33742,"stem":275,"__hash__":33743},"docs/2.api/5.shapes/torus.md",{"type":477,"value":33556,"toc":33737},[33557,33562,33572,33578,33584,33586,33735],[584,33558,33559],{},[33560,33561],"shapes-torus",{},[590,33563,2843,33564,8516,33566,28070,33569,1126],{},[594,33565,7528],{},[594,33567,33568],{},"\u003CTorus />",[594,33570,33571],{},"TorusGeometry",[602,33573,33576],{"className":33574,"code":33575,"language":28079},[28077],"args: [\n radius: number,\n tube: number,\n radialSegments: number,\n tubularSegments: number,\n arc: number\n]\n",[594,33577,33575],{"__ignoreMap":552},[590,33579,28084,33580],{},[1120,33581,33571],{"href":33582,"rel":33583},"https://threejs.org/docs/?q=torus#api/en/geometries/TorusGeometry",[1124],[480,33585,15],{"id":600},[602,33587,33589],{"className":604,"code":33588,"language":609,"meta":552,"style":552},"\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",[594,33590,33591,33639,33643,33648,33723,33727],{"__ignoreMap":552},[613,33592,33593,33595,33597,33599,33601,33603,33605,33607,33609,33611,33614,33616,33619,33621,33623,33625,33627,33629,33631,33633,33635,33637],{"class":615,"line":553},[613,33594,619],{"class":618},[613,33596,273],{"class":622},[613,33598,789],{"class":618},[613,33600,1997],{"class":626},[613,33602,633],{"class":618},[613,33604,636],{"class":618},[613,33606,1474],{"class":659},[613,33608,800],{"class":799},[613,33610,663],{"class":618},[613,33612,33613],{"class":799}," 0.4",[613,33615,663],{"class":618},[613,33617,33618],{"class":799}," 42",[613,33620,663],{"class":618},[613,33622,7988],{"class":799},[613,33624,1489],{"class":659},[613,33626,636],{"class":618},[613,33628,2749],{"class":626},[613,33630,633],{"class":618},[613,33632,636],{"class":618},[613,33634,11952],{"class":639},[613,33636,636],{"class":618},[613,33638,763],{"class":618},[613,33640,33641],{"class":615,"line":554},[613,33642,718],{"emptyLinePlaceholder":570},[613,33644,33645],{"class":615,"line":684},[613,33646,33647],{"class":659},"// Torus with a custom material transformations\n",[613,33649,33650,33652,33654,33656,33658,33660,33662,33664,33666,33668,33670,33672,33674,33676,33678,33680,33682,33685,33687,33690,33692,33694,33696,33698,33700,33702,33704,33706,33708,33710,33713,33715,33717,33719,33721],{"class":615,"line":705},[613,33651,619],{"class":618},[613,33653,273],{"class":622},[613,33655,3975],{"class":626},[613,33657,633],{"class":618},[613,33659,636],{"class":618},[613,33661,10857],{"class":639},[613,33663,636],{"class":618},[613,33665,789],{"class":618},[613,33667,1997],{"class":626},[613,33669,633],{"class":618},[613,33671,636],{"class":618},[613,33673,1474],{"class":659},[613,33675,2597],{"class":799},[613,33677,663],{"class":618},[613,33679,33613],{"class":799},[613,33681,663],{"class":618},[613,33683,33684],{"class":799}," 16",[613,33686,663],{"class":618},[613,33688,33689],{"class":799}," 80",[613,33691,1489],{"class":659},[613,33693,636],{"class":618},[613,33695,789],{"class":618},[613,33697,1467],{"class":626},[613,33699,633],{"class":618},[613,33701,636],{"class":618},[613,33703,1474],{"class":659},[613,33705,9324],{"class":618},[613,33707,800],{"class":799},[613,33709,663],{"class":618},[613,33711,33712],{"class":799}," 6",[613,33714,663],{"class":618},[613,33716,2553],{"class":799},[613,33718,1489],{"class":659},[613,33720,636],{"class":618},[613,33722,645],{"class":618},[613,33724,33725],{"class":615,"line":715},[613,33726,28218],{"class":659},[613,33728,33729,33731,33733],{"class":615,"line":721},[613,33730,708],{"class":618},[613,33732,273],{"class":622},[613,33734,645],{"class":618},[1307,33736,28229],{},{"title":552,"searchDepth":553,"depth":554,"links":33738},[33739],{"id":600,"depth":554,"text":15},"Short-cut for a TorusGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":273,"description":33740},"yySx0l9wZ0o7oTaUN9FO6Q3RIbMpJeR5NAvohXoIacY",{"id":33745,"title":277,"body":33746,"description":33930,"extension":567,"links":568,"meta":33931,"navigation":570,"path":278,"seo":33932,"stem":279,"__hash__":33933},"docs/2.api/5.shapes/torus-knot.md",{"type":477,"value":33747,"toc":33927},[33748,33753,33763,33769,33775,33777,33925],[584,33749,33750],{},[33751,33752],"shapes-torus-knot",{},[590,33754,2843,33755,8516,33757,28070,33760,1126],{},[594,33756,7528],{},[594,33758,33759],{},"\u003CTorusKnot />",[594,33761,33762],{},"TorusKnotGeometry",[602,33764,33767],{"className":33765,"code":33766,"language":28079},[28077],"args: [\n radius: number,\n tube: number,\n tubularSegments: number,\n radialSegments: number,\n p: number,\n q: number\n]\n",[594,33768,33766],{"__ignoreMap":552},[590,33770,28084,33771],{},[1120,33772,33762],{"href":33773,"rel":33774},"https://threejs.org/docs/?q=torus#api/en/geometries/TorusKnotGeometry",[1124],[480,33776,15],{"id":600},[602,33778,33780],{"className":604,"code":33779,"language":609,"meta":552,"style":552},"\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",[594,33781,33782,33831,33835,33840,33913,33917],{"__ignoreMap":552},[613,33783,33784,33786,33789,33791,33793,33795,33797,33799,33801,33803,33806,33808,33811,33813,33815,33817,33819,33821,33823,33825,33827,33829],{"class":615,"line":553},[613,33785,619],{"class":618},[613,33787,33788],{"class":622},"TorusKnot",[613,33790,789],{"class":618},[613,33792,1997],{"class":626},[613,33794,633],{"class":618},[613,33796,636],{"class":618},[613,33798,1474],{"class":659},[613,33800,27924],{"class":799},[613,33802,663],{"class":618},[613,33804,33805],{"class":799}," 0.2",[613,33807,663],{"class":618},[613,33809,33810],{"class":799}," 64",[613,33812,663],{"class":618},[613,33814,29048],{"class":799},[613,33816,1489],{"class":659},[613,33818,636],{"class":618},[613,33820,2749],{"class":626},[613,33822,633],{"class":618},[613,33824,636],{"class":618},[613,33826,11952],{"class":639},[613,33828,636],{"class":618},[613,33830,763],{"class":618},[613,33832,33833],{"class":615,"line":554},[613,33834,718],{"emptyLinePlaceholder":570},[613,33836,33837],{"class":615,"line":684},[613,33838,33839],{"class":659},"// TorusKnot with a custom material transformations\n",[613,33841,33842,33844,33846,33848,33850,33852,33855,33857,33859,33861,33863,33865,33867,33869,33871,33873,33875,33877,33879,33881,33883,33885,33887,33889,33891,33893,33895,33897,33899,33901,33903,33905,33907,33909,33911],{"class":615,"line":705},[613,33843,619],{"class":618},[613,33845,33788],{"class":622},[613,33847,3975],{"class":626},[613,33849,633],{"class":618},[613,33851,636],{"class":618},[613,33853,33854],{"class":639},"torusKnotRef",[613,33856,636],{"class":618},[613,33858,789],{"class":618},[613,33860,1997],{"class":626},[613,33862,633],{"class":618},[613,33864,636],{"class":618},[613,33866,1474],{"class":659},[613,33868,27924],{"class":799},[613,33870,663],{"class":618},[613,33872,33805],{"class":799},[613,33874,663],{"class":618},[613,33876,33810],{"class":799},[613,33878,663],{"class":618},[613,33880,29048],{"class":799},[613,33882,1489],{"class":659},[613,33884,636],{"class":618},[613,33886,789],{"class":618},[613,33888,1467],{"class":626},[613,33890,633],{"class":618},[613,33892,636],{"class":618},[613,33894,1474],{"class":659},[613,33896,9324],{"class":618},[613,33898,800],{"class":799},[613,33900,663],{"class":618},[613,33902,33712],{"class":799},[613,33904,663],{"class":618},[613,33906,29726],{"class":799},[613,33908,1489],{"class":659},[613,33910,636],{"class":618},[613,33912,645],{"class":618},[613,33914,33915],{"class":615,"line":715},[613,33916,28218],{"class":659},[613,33918,33919,33921,33923],{"class":615,"line":721},[613,33920,708],{"class":618},[613,33922,33788],{"class":622},[613,33924,645],{"class":618},[1307,33926,28229],{},{"title":552,"searchDepth":553,"depth":554,"links":33928},[33929],{"id":600,"depth":554,"text":15},"Short-cut for a TorusKnotGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":277,"description":33930},"OlUiMxF35Ud6Y1uh8PxYgHq7DDQtWj0nint0vp1wx2U",{"id":33935,"title":281,"body":33936,"description":34369,"extension":567,"links":568,"meta":34370,"navigation":570,"path":282,"seo":34371,"stem":283,"__hash__":34372},"docs/2.api/5.shapes/tube.md",{"type":477,"value":33937,"toc":34365},[33938,33943,33953,33959,33961,34353,34356,34362],[584,33939,33940],{},[33941,33942],"shapes-tube",{},[590,33944,2843,33945,8516,33947,28070,33950,1126],{},[594,33946,7528],{},[594,33948,33949],{},"\u003CTube />",[594,33951,33952],{},"TubeGeometry",[590,33954,28084,33955],{},[1120,33956,33952],{"href":33957,"rel":33958},"https://threejs.org/docs/?q=tube#api/en/geometries/TubeGeometry",[1124],[480,33960,15],{"id":600},[602,33962,33964],{"className":604,"code":33963,"language":609,"meta":552,"style":552},"\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",[594,33965,33966,33986,34005,34028,34046,34050,34070,34095,34122,34144,34166,34170,34178,34182,34190,34195,34246,34250,34255,34319,34337,34345],{"__ignoreMap":552},[613,33967,33968,33970,33972,33974,33976,33978,33980,33982,33984],{"class":615,"line":553},[613,33969,619],{"class":618},[613,33971,623],{"class":622},[613,33973,627],{"class":626},[613,33975,630],{"class":626},[613,33977,633],{"class":618},[613,33979,636],{"class":618},[613,33981,640],{"class":639},[613,33983,636],{"class":618},[613,33985,645],{"class":618},[613,33987,33988,33990,33992,33995,33997,33999,34001,34003],{"class":615,"line":554},[613,33989,653],{"class":652},[613,33991,656],{"class":618},[613,33993,33994],{"class":659}," Tube",[613,33996,669],{"class":618},[613,33998,672],{"class":652},[613,34000,675],{"class":618},[613,34002,678],{"class":639},[613,34004,681],{"class":618},[613,34006,34007,34009,34011,34014,34016,34018,34020,34022,34024,34026],{"class":615,"line":684},[613,34008,653],{"class":652},[613,34010,656],{"class":618},[613,34012,34013],{"class":659}," CubicBezierCurve3",[613,34015,663],{"class":618},[613,34017,28351],{"class":659},[613,34019,669],{"class":618},[613,34021,672],{"class":652},[613,34023,675],{"class":618},[613,34025,4785],{"class":639},[613,34027,681],{"class":618},[613,34029,34030,34032,34034,34036,34038,34040,34042,34044],{"class":615,"line":705},[613,34031,653],{"class":652},[613,34033,656],{"class":618},[613,34035,3975],{"class":659},[613,34037,669],{"class":618},[613,34039,672],{"class":652},[613,34041,675],{"class":618},[613,34043,609],{"class":639},[613,34045,681],{"class":618},[613,34047,34048],{"class":615,"line":715},[613,34049,718],{"emptyLinePlaceholder":570},[613,34051,34052,34054,34057,34059,34061,34063,34066,34068],{"class":615,"line":721},[613,34053,2463],{"class":626},[613,34055,34056],{"class":659}," tubePath ",[613,34058,633],{"class":618},[613,34060,3975],{"class":2482},[613,34062,2485],{"class":659},[613,34064,34065],{"class":618},"new",[613,34067,34013],{"class":2482},[613,34069,4857],{"class":659},[613,34071,34072,34075,34077,34079,34081,34083,34085,34087,34089,34091,34093],{"class":615,"line":731},[613,34073,34074],{"class":618}," new",[613,34076,28351],{"class":2482},[613,34078,2485],{"class":659},[613,34080,9324],{"class":618},[613,34082,1901],{"class":799},[613,34084,663],{"class":618},[613,34086,2553],{"class":799},[613,34088,663],{"class":618},[613,34090,2553],{"class":799},[613,34092,3409],{"class":659},[613,34094,2536],{"class":618},[613,34096,34097,34099,34101,34103,34105,34107,34109,34112,34114,34116,34118,34120],{"class":615,"line":754},[613,34098,34074],{"class":618},[613,34100,28351],{"class":2482},[613,34102,2485],{"class":659},[613,34104,9324],{"class":618},[613,34106,1521],{"class":799},[613,34108,663],{"class":618},[613,34110,34111],{"class":618}," -",[613,34113,1901],{"class":799},[613,34115,663],{"class":618},[613,34117,2553],{"class":799},[613,34119,3409],{"class":659},[613,34121,2536],{"class":618},[613,34123,34124,34126,34128,34130,34132,34134,34136,34138,34140,34142],{"class":615,"line":766},[613,34125,34074],{"class":618},[613,34127,28351],{"class":2482},[613,34129,2485],{"class":659},[613,34131,1521],{"class":799},[613,34133,663],{"class":618},[613,34135,2607],{"class":799},[613,34137,663],{"class":618},[613,34139,2553],{"class":799},[613,34141,3409],{"class":659},[613,34143,2536],{"class":618},[613,34145,34146,34148,34150,34152,34154,34156,34158,34160,34162,34164],{"class":615,"line":776},[613,34147,34074],{"class":618},[613,34149,28351],{"class":2482},[613,34151,2485],{"class":659},[613,34153,1901],{"class":799},[613,34155,663],{"class":618},[613,34157,2553],{"class":799},[613,34159,663],{"class":618},[613,34161,2553],{"class":799},[613,34163,3409],{"class":659},[613,34165,2536],{"class":618},[613,34167,34168],{"class":615,"line":781},[613,34169,7400],{"class":659},[613,34171,34172,34174,34176],{"class":615,"line":807},[613,34173,708],{"class":618},[613,34175,623],{"class":622},[613,34177,645],{"class":618},[613,34179,34180],{"class":615,"line":607},[613,34181,718],{"emptyLinePlaceholder":570},[613,34183,34184,34186,34188],{"class":615,"line":830},[613,34185,619],{"class":618},[613,34187,726],{"class":622},[613,34189,645],{"class":618},[613,34191,34192],{"class":615,"line":841},[613,34193,34194],{"class":1189}," \u003C!-- TubeGeometry needs a curve path to be construct -->\n",[613,34196,34197,34199,34201,34203,34205,34207,34209,34211,34214,34216,34218,34220,34222,34224,34226,34228,34230,34232,34234,34236,34238,34240,34242,34244],{"class":615,"line":852},[613,34198,734],{"class":618},[613,34200,281],{"class":622},[613,34202,789],{"class":618},[613,34204,1997],{"class":626},[613,34206,633],{"class":618},[613,34208,636],{"class":618},[613,34210,1474],{"class":618},[613,34212,34213],{"class":659},"tubePath",[613,34215,1479],{"class":618},[613,34217,28617],{"class":799},[613,34219,1479],{"class":618},[613,34221,5939],{"class":799},[613,34223,1479],{"class":618},[613,34225,20236],{"class":799},[613,34227,1479],{"class":618},[613,34229,951],{"class":4536},[613,34231,1489],{"class":618},[613,34233,636],{"class":618},[613,34235,2749],{"class":626},[613,34237,633],{"class":618},[613,34239,636],{"class":618},[613,34241,11952],{"class":639},[613,34243,636],{"class":618},[613,34245,763],{"class":618},[613,34247,34248],{"class":615,"line":862},[613,34249,718],{"emptyLinePlaceholder":570},[613,34251,34252],{"class":615,"line":608},[613,34253,34254],{"class":1189}," \u003C!-- Tube with a custom material transformations -->\n",[613,34256,34257,34259,34261,34263,34265,34267,34269,34271,34273,34275,34277,34279,34281,34283,34285,34287,34289,34291,34293,34295,34297,34299,34301,34303,34305,34307,34309,34311,34313,34315,34317],{"class":615,"line":882},[613,34258,734],{"class":618},[613,34260,281],{"class":622},[613,34262,789],{"class":618},[613,34264,1997],{"class":626},[613,34266,633],{"class":618},[613,34268,636],{"class":618},[613,34270,1474],{"class":618},[613,34272,34213],{"class":659},[613,34274,1479],{"class":618},[613,34276,28617],{"class":799},[613,34278,1479],{"class":618},[613,34280,5939],{"class":799},[613,34282,1479],{"class":618},[613,34284,20236],{"class":799},[613,34286,1479],{"class":618},[613,34288,951],{"class":4536},[613,34290,1489],{"class":618},[613,34292,636],{"class":618},[613,34294,789],{"class":618},[613,34296,1467],{"class":626},[613,34298,633],{"class":618},[613,34300,636],{"class":618},[613,34302,1474],{"class":618},[613,34304,945],{"class":799},[613,34306,1479],{"class":618},[613,34308,3876],{"class":799},[613,34310,1479],{"class":618},[613,34312,945],{"class":799},[613,34314,1489],{"class":618},[613,34316,636],{"class":618},[613,34318,645],{"class":618},[613,34320,34321,34323,34325,34327,34329,34331,34333,34335],{"class":615,"line":892},[613,34322,757],{"class":618},[613,34324,11943],{"class":622},[613,34326,2749],{"class":626},[613,34328,633],{"class":618},[613,34330,636],{"class":618},[613,34332,11952],{"class":639},[613,34334,636],{"class":618},[613,34336,763],{"class":618},[613,34338,34339,34341,34343],{"class":615,"line":2671},[613,34340,885],{"class":618},[613,34342,281],{"class":622},[613,34344,645],{"class":618},[613,34346,34347,34349,34351],{"class":615,"line":2680},[613,34348,708],{"class":618},[613,34350,726],{"class":622},[613,34352,645],{"class":618},[480,34354,34355],{"id":1997},"Args",[602,34357,34360],{"className":34358,"code":34359,"language":28079},[28077],"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",[594,34361,34359],{"__ignoreMap":552},[1307,34363,34364],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":552,"searchDepth":553,"depth":554,"links":34366},[34367,34368],{"id":600,"depth":554,"text":15},{"id":1997,"depth":554,"text":34355},"Short-cut for a TubeGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":281,"description":34369},"dl45gDobAVZZJ-EiABsXN_ZQHrn_4vSzVw1r8h_AnrY",[34374,34688,35209,35420,35717],{"id":34375,"title":291,"body":34376,"description":34684,"extension":567,"links":568,"meta":34685,"navigation":570,"path":292,"seo":34686,"stem":293,"__hash__":34687},"docs/2.api/6.debug-performance/helper.md",{"type":477,"value":34377,"toc":34680},[34378,34383,34389,34391,34638,34640,34678],[2343,34379,34380],{},[34381,34382],"debug-performance-helper",{},[590,34384,34385,34388],{},[594,34386,34387],{},"\u003CHelper />"," handles instantiation, updates, and removal/disposal of THREE Helpers.",[480,34390,15],{"id":600},[602,34392,34395],{"className":604,"code":34393,"highlights":34394,"language":609,"meta":552,"style":552},"\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",[684,607],[594,34396,34397,34417,34435,34455,34474,34482,34486,34494,34502,34534,34552,34560,34568,34606,34614,34622,34630],{"__ignoreMap":552},[613,34398,34399,34401,34403,34405,34407,34409,34411,34413,34415],{"class":615,"line":553},[613,34400,619],{"class":618},[613,34402,623],{"class":622},[613,34404,627],{"class":626},[613,34406,630],{"class":626},[613,34408,633],{"class":618},[613,34410,636],{"class":618},[613,34412,640],{"class":639},[613,34414,636],{"class":618},[613,34416,645],{"class":618},[613,34418,34419,34421,34423,34425,34427,34429,34431,34433],{"class":615,"line":554},[613,34420,653],{"class":652},[613,34422,656],{"class":618},[613,34424,691],{"class":659},[613,34426,669],{"class":618},[613,34428,672],{"class":652},[613,34430,675],{"class":618},[613,34432,700],{"class":639},[613,34434,681],{"class":618},[613,34436,34438,34440,34442,34445,34447,34449,34451,34453],{"class":34437,"line":684},[615,649],[613,34439,653],{"class":652},[613,34441,656],{"class":618},[613,34443,34444],{"class":659}," Helper",[613,34446,669],{"class":618},[613,34448,672],{"class":652},[613,34450,675],{"class":618},[613,34452,678],{"class":639},[613,34454,681],{"class":618},[613,34456,34457,34459,34461,34464,34466,34468,34470,34472],{"class":615,"line":705},[613,34458,653],{"class":652},[613,34460,656],{"class":618},[613,34462,34463],{"class":659}," BoxHelper",[613,34465,669],{"class":618},[613,34467,672],{"class":652},[613,34469,675],{"class":618},[613,34471,4785],{"class":639},[613,34473,681],{"class":618},[613,34475,34476,34478,34480],{"class":615,"line":715},[613,34477,708],{"class":618},[613,34479,623],{"class":622},[613,34481,645],{"class":618},[613,34483,34484],{"class":615,"line":721},[613,34485,718],{"emptyLinePlaceholder":570},[613,34487,34488,34490,34492],{"class":615,"line":731},[613,34489,619],{"class":618},[613,34491,726],{"class":622},[613,34493,645],{"class":618},[613,34495,34496,34498,34500],{"class":615,"line":754},[613,34497,734],{"class":618},[613,34499,737],{"class":622},[613,34501,645],{"class":618},[613,34503,34504,34506,34508,34510,34512,34514,34516,34518,34520,34522,34524,34526,34528,34530,34532],{"class":615,"line":766},[613,34505,757],{"class":618},[613,34507,760],{"class":622},[613,34509,789],{"class":618},[613,34511,1467],{"class":626},[613,34513,633],{"class":618},[613,34515,636],{"class":618},[613,34517,1474],{"class":618},[613,34519,2705],{"class":799},[613,34521,1479],{"class":618},[613,34523,2705],{"class":799},[613,34525,1479],{"class":618},[613,34527,2705],{"class":799},[613,34529,1489],{"class":618},[613,34531,636],{"class":618},[613,34533,763],{"class":618},[613,34535,34536,34538,34540,34542,34544,34546,34548,34550],{"class":615,"line":776},[613,34537,757],{"class":618},[613,34539,836],{"class":622},[613,34541,3975],{"class":626},[613,34543,633],{"class":618},[613,34545,636],{"class":618},[613,34547,15015],{"class":639},[613,34549,636],{"class":618},[613,34551,645],{"class":618},[613,34553,34554,34556,34558],{"class":615,"line":781},[613,34555,833],{"class":618},[613,34557,847],{"class":622},[613,34559,763],{"class":618},[613,34561,34562,34564,34566],{"class":615,"line":807},[613,34563,833],{"class":618},[613,34565,857],{"class":622},[613,34567,763],{"class":618},[613,34569,34571,34573,34575,34577,34579,34581,34583,34586,34588,34590,34592,34594,34596,34598,34600,34602,34604],{"class":34570,"line":607},[615,649],[613,34572,833],{"class":618},[613,34574,291],{"class":622},[613,34576,789],{"class":618},[613,34578,5730],{"class":626},[613,34580,633],{"class":618},[613,34582,636],{"class":618},[613,34584,34585],{"class":659},"BoxHelper",[613,34587,636],{"class":618},[613,34589,789],{"class":618},[613,34591,1997],{"class":626},[613,34593,633],{"class":618},[613,34595,636],{"class":618},[613,34597,1474],{"class":618},[613,34599,25193],{"class":799},[613,34601,1489],{"class":618},[613,34603,636],{"class":618},[613,34605,763],{"class":618},[613,34607,34608,34610,34612],{"class":615,"line":830},[613,34609,875],{"class":618},[613,34611,836],{"class":622},[613,34613,645],{"class":618},[613,34615,34616,34618,34620],{"class":615,"line":841},[613,34617,757],{"class":618},[613,34619,8758],{"class":622},[613,34621,763],{"class":618},[613,34623,34624,34626,34628],{"class":615,"line":852},[613,34625,885],{"class":618},[613,34627,737],{"class":622},[613,34629,645],{"class":618},[613,34631,34632,34634,34636],{"class":615,"line":862},[613,34633,708],{"class":618},[613,34635,726],{"class":622},[613,34637,645],{"class":618},[480,34639,902],{"id":901},[907,34641,34642,34652],{},[910,34643,34644],{},[913,34645,34646,34648,34650],{},[916,34647,918],{"align":977},[916,34649,921],{"align":977},[916,34651,924],{},[926,34653,34654,34665],{},[913,34655,34656,34660,34663],{},[931,34657,34658],{"align":977},[1681,34659,5730],{},[931,34661,34662],{"align":977},"Helper constructor - required",[931,34664],{},[913,34666,34667,34671,34674],{},[931,34668,34669],{"align":977},[1681,34670,1997],{},[931,34672,34673],{"align":977},"Helper constructor args",[931,34675,34676],{},[594,34677,3648],{},[1307,34679,1656],{},{"title":552,"searchDepth":553,"depth":554,"links":34681},[34682,34683],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},"Handles instantiation, updates, and removal/disposal of THREE Helpers.",{},{"title":291,"description":34684},"eCegCHTXKuWv3dso3PuJHIMliJK_ACUVoEreb2IQT48",{"id":34689,"title":295,"body":34690,"description":35205,"extension":567,"links":568,"meta":35206,"navigation":570,"path":296,"seo":35207,"stem":297,"__hash__":35208},"docs/2.api/6.debug-performance/lod.md",{"type":477,"value":34691,"toc":35201},[34692,34697,34700,34711,34713,35148,35150,35198],[2343,34693,34694],{},[34695,34696],"debug-performance-lod",{},[590,34698,34699],{},"Level of Detail - show meshes with more or less geometry based on distance from the camera.",[590,34701,34702,34705,34706,34710],{},[594,34703,34704],{},"\u003CLOD />"," is a wrapper for THREE's ",[1120,34707,295],{"href":34708,"rel":34709},"https://threejs.org/docs/?q=LOD#api/en/objects/LOD",[1124]," class.",[480,34712,15],{"id":600},[602,34714,34716],{"className":604,"code":34715,"language":609,"meta":552,"style":552},"\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",[594,34717,34718,34738,34756,34775,34783,34787,34795,34803,34835,34868,34873,34881,34913,34932,34940,34945,34953,34986,35004,35012,35017,35025,35057,35076,35084,35092,35100,35132,35140],{"__ignoreMap":552},[613,34719,34720,34722,34724,34726,34728,34730,34732,34734,34736],{"class":615,"line":553},[613,34721,619],{"class":618},[613,34723,623],{"class":622},[613,34725,627],{"class":626},[613,34727,630],{"class":626},[613,34729,633],{"class":618},[613,34731,636],{"class":618},[613,34733,640],{"class":639},[613,34735,636],{"class":618},[613,34737,645],{"class":618},[613,34739,34740,34742,34744,34746,34748,34750,34752,34754],{"class":615,"line":554},[613,34741,653],{"class":652},[613,34743,656],{"class":618},[613,34745,691],{"class":659},[613,34747,669],{"class":618},[613,34749,672],{"class":652},[613,34751,675],{"class":618},[613,34753,700],{"class":639},[613,34755,681],{"class":618},[613,34757,34758,34760,34762,34765,34767,34769,34771,34773],{"class":615,"line":684},[613,34759,653],{"class":652},[613,34761,656],{"class":618},[613,34763,34764],{"class":659}," LOD",[613,34766,669],{"class":618},[613,34768,672],{"class":652},[613,34770,675],{"class":618},[613,34772,678],{"class":639},[613,34774,681],{"class":618},[613,34776,34777,34779,34781],{"class":615,"line":705},[613,34778,708],{"class":618},[613,34780,623],{"class":622},[613,34782,645],{"class":618},[613,34784,34785],{"class":615,"line":715},[613,34786,718],{"emptyLinePlaceholder":570},[613,34788,34789,34791,34793],{"class":615,"line":721},[613,34790,619],{"class":618},[613,34792,726],{"class":622},[613,34794,645],{"class":618},[613,34796,34797,34799,34801],{"class":615,"line":731},[613,34798,734],{"class":618},[613,34800,737],{"class":622},[613,34802,645],{"class":618},[613,34804,34805,34807,34809,34811,34813,34815,34817,34819,34821,34823,34825,34827,34829,34831,34833],{"class":615,"line":754},[613,34806,757],{"class":618},[613,34808,760],{"class":622},[613,34810,789],{"class":618},[613,34812,1467],{"class":626},[613,34814,633],{"class":618},[613,34816,636],{"class":618},[613,34818,1474],{"class":618},[613,34820,945],{"class":799},[613,34822,1479],{"class":618},[613,34824,800],{"class":799},[613,34826,1479],{"class":618},[613,34828,7668],{"class":799},[613,34830,1489],{"class":618},[613,34832,636],{"class":618},[613,34834,763],{"class":618},[613,34836,34837,34839,34841,34843,34846,34848,34850,34852,34854,34856,34858,34860,34862,34864,34866],{"class":615,"line":766},[613,34838,757],{"class":618},[613,34840,295],{"class":622},[613,34842,789],{"class":618},[613,34844,34845],{"class":626},"levels",[613,34847,633],{"class":618},[613,34849,636],{"class":618},[613,34851,1474],{"class":618},[613,34853,945],{"class":799},[613,34855,1479],{"class":618},[613,34857,7668],{"class":799},[613,34859,1479],{"class":618},[613,34861,1486],{"class":799},[613,34863,1489],{"class":618},[613,34865,636],{"class":618},[613,34867,645],{"class":618},[613,34869,34870],{"class":615,"line":776},[613,34871,34872],{"class":1189}," \u003C!-- High detail mesh - shown when close -->\n",[613,34874,34875,34877,34879],{"class":615,"line":781},[613,34876,833],{"class":618},[613,34878,836],{"class":622},[613,34880,645],{"class":618},[613,34882,34883,34885,34887,34889,34891,34893,34895,34897,34899,34901,34903,34905,34907,34909,34911],{"class":615,"line":807},[613,34884,844],{"class":618},[613,34886,4083],{"class":622},[613,34888,789],{"class":618},[613,34890,1997],{"class":626},[613,34892,633],{"class":618},[613,34894,636],{"class":618},[613,34896,1474],{"class":618},[613,34898,1901],{"class":799},[613,34900,1479],{"class":618},[613,34902,10950],{"class":799},[613,34904,1479],{"class":618},[613,34906,10950],{"class":799},[613,34908,1489],{"class":618},[613,34910,636],{"class":618},[613,34912,763],{"class":618},[613,34914,34915,34917,34919,34921,34923,34925,34928,34930],{"class":615,"line":607},[613,34916,844],{"class":618},[613,34918,2746],{"class":622},[613,34920,2749],{"class":626},[613,34922,633],{"class":618},[613,34924,636],{"class":618},[613,34926,34927],{"class":639},"red",[613,34929,636],{"class":618},[613,34931,763],{"class":618},[613,34933,34934,34936,34938],{"class":615,"line":830},[613,34935,865],{"class":618},[613,34937,836],{"class":622},[613,34939,645],{"class":618},[613,34941,34942],{"class":615,"line":841},[613,34943,34944],{"class":1189}," \u003C!-- Medium detail mesh - shown at mid distance -->\n",[613,34946,34947,34949,34951],{"class":615,"line":852},[613,34948,833],{"class":618},[613,34950,836],{"class":622},[613,34952,645],{"class":618},[613,34954,34955,34957,34959,34961,34963,34965,34967,34969,34971,34973,34976,34978,34980,34982,34984],{"class":615,"line":862},[613,34956,844],{"class":618},[613,34958,4083],{"class":622},[613,34960,789],{"class":618},[613,34962,1997],{"class":626},[613,34964,633],{"class":618},[613,34966,636],{"class":618},[613,34968,1474],{"class":618},[613,34970,1901],{"class":799},[613,34972,1479],{"class":618},[613,34974,34975],{"class":799},"16",[613,34977,1479],{"class":618},[613,34979,34975],{"class":799},[613,34981,1489],{"class":618},[613,34983,636],{"class":618},[613,34985,763],{"class":618},[613,34987,34988,34990,34992,34994,34996,34998,35000,35002],{"class":615,"line":608},[613,34989,844],{"class":618},[613,34991,2746],{"class":622},[613,34993,2749],{"class":626},[613,34995,633],{"class":618},[613,34997,636],{"class":618},[613,34999,11952],{"class":639},[613,35001,636],{"class":618},[613,35003,763],{"class":618},[613,35005,35006,35008,35010],{"class":615,"line":882},[613,35007,865],{"class":618},[613,35009,836],{"class":622},[613,35011,645],{"class":618},[613,35013,35014],{"class":615,"line":892},[613,35015,35016],{"class":1189}," \u003C!-- Low detail mesh - shown when far -->\n",[613,35018,35019,35021,35023],{"class":615,"line":2671},[613,35020,833],{"class":618},[613,35022,836],{"class":622},[613,35024,645],{"class":618},[613,35026,35027,35029,35031,35033,35035,35037,35039,35041,35043,35045,35047,35049,35051,35053,35055],{"class":615,"line":2680},[613,35028,844],{"class":618},[613,35030,4083],{"class":622},[613,35032,789],{"class":618},[613,35034,1997],{"class":626},[613,35036,633],{"class":618},[613,35038,636],{"class":618},[613,35040,1474],{"class":618},[613,35042,1901],{"class":799},[613,35044,1479],{"class":618},[613,35046,20236],{"class":799},[613,35048,1479],{"class":618},[613,35050,20236],{"class":799},[613,35052,1489],{"class":618},[613,35054,636],{"class":618},[613,35056,763],{"class":618},[613,35058,35059,35061,35063,35065,35067,35069,35072,35074],{"class":615,"line":2714},[613,35060,844],{"class":618},[613,35062,2746],{"class":622},[613,35064,2749],{"class":626},[613,35066,633],{"class":618},[613,35068,636],{"class":618},[613,35070,35071],{"class":639},"yellow",[613,35073,636],{"class":618},[613,35075,763],{"class":618},[613,35077,35078,35080,35082],{"class":615,"line":2723},[613,35079,865],{"class":618},[613,35081,836],{"class":622},[613,35083,645],{"class":618},[613,35085,35086,35088,35090],{"class":615,"line":2732},[613,35087,875],{"class":618},[613,35089,295],{"class":622},[613,35091,645],{"class":618},[613,35093,35094,35096,35098],{"class":615,"line":2741},[613,35095,757],{"class":618},[613,35097,8758],{"class":622},[613,35099,763],{"class":618},[613,35101,35102,35104,35106,35108,35110,35112,35114,35116,35118,35120,35122,35124,35126,35128,35130],{"class":615,"line":2763},[613,35103,757],{"class":618},[613,35105,8779],{"class":622},[613,35107,789],{"class":618},[613,35109,1467],{"class":626},[613,35111,633],{"class":618},[613,35113,636],{"class":618},[613,35115,1474],{"class":618},[613,35117,945],{"class":799},[613,35119,1479],{"class":618},[613,35121,800],{"class":799},[613,35123,1479],{"class":618},[613,35125,3876],{"class":799},[613,35127,1489],{"class":618},[613,35129,636],{"class":618},[613,35131,763],{"class":618},[613,35133,35134,35136,35138],{"class":615,"line":2814},[613,35135,885],{"class":618},[613,35137,737],{"class":622},[613,35139,645],{"class":618},[613,35141,35142,35144,35146],{"class":615,"line":2823},[613,35143,708],{"class":618},[613,35145,726],{"class":622},[613,35147,645],{"class":618},[480,35149,902],{"id":901},[907,35151,35152,35162],{},[910,35153,35154],{},[913,35155,35156,35158,35160],{},[916,35157,918],{"align":977},[916,35159,921],{"align":977},[916,35161,924],{},[926,35163,35164,35184],{},[913,35165,35166,35170,35182],{},[931,35167,35168],{"align":977},[1681,35169,34845],{},[931,35171,35172,35175,35176,35178,35179,35181],{"align":977},[594,35173,35174],{},"number[]"," - The distances at which to display each level of detail. There should be one ",[594,35177,34845],{}," value for each ",[594,35180,295],{}," child.",[931,35183],{},[913,35185,35186,35191,35194],{},[931,35187,35188],{"align":977},[1681,35189,35190],{},"hysteresis",[931,35192,35193],{"align":977},"Threshold used to avoid flickering at LOD boundaries, as a fraction of distance.",[931,35195,35196],{},[594,35197,12421],{},[1307,35199,35200],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":552,"searchDepth":553,"depth":554,"links":35202},[35203,35204],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},"Level of Detail - show meshes with more or less geometry based on distance from camera.",{},{"title":295,"description":35205},"ue6lcrsKRgNjxBsudKxGB368Ot9yPUV2C-0TWgeZzbE",{"id":35210,"title":299,"body":35211,"description":35416,"extension":567,"links":568,"meta":35417,"navigation":570,"path":300,"seo":35418,"stem":301,"__hash__":35419},"docs/2.api/6.debug-performance/stats.md",{"type":477,"value":35212,"toc":35412},[35213,35227,35236,35240,35357,35359,35393,35410],[590,35214,35215,35220,35221,35226],{},[1120,35216,35219],{"href":35217,"rel":35218},"https://github.com/mrdoob/stats.js/",[1124],"stats.js"," is a JavaScript performance monitor, made by ",[1120,35222,35225],{"href":35223,"rel":35224},"https://github.com/mrdoob",[1124],"mrdoob",". stats.js provides a simple info box that will help you monitor your code performance.",[590,35228,35229,35232,35233,35235],{},[1681,35230,35231],{},"Cientos"," provides a component called ",[594,35234,299],{}," that creates a panel without effort or configuration in the top left corner where you'll be able to monitor your app.",[480,35237,35239],{"id":35238},"basic-usage","Basic usage",[602,35241,35244],{"className":604,"code":35242,"highlights":35243,"language":609,"meta":552,"style":552},"\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",[684,754],[594,35245,35246,35266,35284,35304,35312,35316,35324,35332,35341,35349],{"__ignoreMap":552},[613,35247,35248,35250,35252,35254,35256,35258,35260,35262,35264],{"class":615,"line":553},[613,35249,619],{"class":618},[613,35251,623],{"class":622},[613,35253,627],{"class":626},[613,35255,630],{"class":626},[613,35257,633],{"class":618},[613,35259,636],{"class":618},[613,35261,640],{"class":639},[613,35263,636],{"class":618},[613,35265,645],{"class":618},[613,35267,35268,35270,35272,35274,35276,35278,35280,35282],{"class":615,"line":554},[613,35269,653],{"class":652},[613,35271,656],{"class":618},[613,35273,691],{"class":659},[613,35275,669],{"class":618},[613,35277,672],{"class":652},[613,35279,675],{"class":618},[613,35281,700],{"class":639},[613,35283,681],{"class":618},[613,35285,35287,35289,35291,35294,35296,35298,35300,35302],{"class":35286,"line":684},[615,649],[613,35288,653],{"class":652},[613,35290,656],{"class":618},[613,35292,35293],{"class":659}," Stats",[613,35295,669],{"class":618},[613,35297,672],{"class":652},[613,35299,675],{"class":618},[613,35301,678],{"class":639},[613,35303,681],{"class":618},[613,35305,35306,35308,35310],{"class":615,"line":705},[613,35307,708],{"class":618},[613,35309,623],{"class":622},[613,35311,645],{"class":618},[613,35313,35314],{"class":615,"line":715},[613,35315,718],{"emptyLinePlaceholder":570},[613,35317,35318,35320,35322],{"class":615,"line":721},[613,35319,619],{"class":618},[613,35321,726],{"class":622},[613,35323,645],{"class":618},[613,35325,35326,35328,35330],{"class":615,"line":731},[613,35327,734],{"class":618},[613,35329,737],{"class":622},[613,35331,645],{"class":618},[613,35333,35335,35337,35339],{"class":35334,"line":754},[615,649],[613,35336,757],{"class":618},[613,35338,299],{"class":622},[613,35340,763],{"class":618},[613,35342,35343,35345,35347],{"class":615,"line":766},[613,35344,885],{"class":618},[613,35346,737],{"class":622},[613,35348,645],{"class":618},[613,35350,35351,35353,35355],{"class":615,"line":776},[613,35352,708],{"class":618},[613,35354,726],{"class":622},[613,35356,645],{"class":618},[480,35358,902],{"id":901},[907,35360,35361,35373],{},[910,35362,35363],{},[913,35364,35365,35367,35369,35371],{},[916,35366,918],{"align":977},[916,35368,6179],{},[916,35370,924],{},[916,35372,921],{},[926,35374,35375],{},[913,35376,35377,35382,35386,35390],{},[931,35378,35379],{"align":977},[1681,35380,35381],{},"showPanel",[931,35383,35384],{},[594,35385,5565],{},[931,35387,35388],{},[594,35389,945],{},[931,35391,35392],{},"FPS monitor.",[2261,35394,35395,35398,35401,35404],{},[2264,35396,35397],{},"0: FPS Frames rendered in the last second. The higher the number the better.",[2264,35399,35400],{},"1: MS Milliseconds needed to render a frame. The lower the number the better.",[2264,35402,35403],{},"2: MB MBytes of allocated memory. (Run Chrome with --enable-precise-memory-info)",[2264,35405,35406,35407,1126],{},"3+: CUSTOM User-defined panel support. For more info please check ",[1120,35408,35219],{"href":35217,"rel":35409},[1124],[1307,35411,26531],{},{"title":552,"searchDepth":553,"depth":554,"links":35413},[35414,35415],{"id":35238,"depth":554,"text":35239},{"id":901,"depth":554,"text":902},"JavaScript performance monitor to track FPS, MS, and memory usage.",{},{"title":299,"description":35416},"CEx2GwVgDehipIa_mCiC4Mpq7SAIqbwq61OScXwW86c",{"id":35421,"title":303,"body":35422,"description":35713,"extension":567,"links":568,"meta":35714,"navigation":570,"path":304,"seo":35715,"stem":305,"__hash__":35716},"docs/2.api/6.debug-performance/stats-gl.md",{"type":477,"value":35423,"toc":35709},[35424,35442,35445,35447,35564,35566,35707],[590,35425,35426,35431,35432,35437,35438,35441],{},[1120,35427,35430],{"href":35428,"rel":35429},"https://github.com/RenaudRohlinger/stats-gl",[1124],"stats-gl"," is a powerful WebGL performance monitoring tool created by ",[1120,35433,35436],{"href":35434,"rel":35435},"https://github.com/RenaudRohlinger",[1124],"RenaudRohlinger",".\nIt offers simple information boxes to track code performance and serves as a more advanced alternative to ",[1120,35439,35219],{"href":35217,"rel":35440},[1124],", capable of displaying CPU and GPU metrics.",[590,35443,35444],{},"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.",[480,35446,35239],{"id":35238},[602,35448,35451],{"className":604,"code":35449,"highlights":35450,"language":609,"meta":552,"style":552},"\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",[684,754],[594,35452,35453,35473,35491,35511,35519,35523,35531,35539,35548,35556],{"__ignoreMap":552},[613,35454,35455,35457,35459,35461,35463,35465,35467,35469,35471],{"class":615,"line":553},[613,35456,619],{"class":618},[613,35458,623],{"class":622},[613,35460,627],{"class":626},[613,35462,630],{"class":626},[613,35464,633],{"class":618},[613,35466,636],{"class":618},[613,35468,640],{"class":639},[613,35470,636],{"class":618},[613,35472,645],{"class":618},[613,35474,35475,35477,35479,35481,35483,35485,35487,35489],{"class":615,"line":554},[613,35476,653],{"class":652},[613,35478,656],{"class":618},[613,35480,691],{"class":659},[613,35482,669],{"class":618},[613,35484,672],{"class":652},[613,35486,675],{"class":618},[613,35488,700],{"class":639},[613,35490,681],{"class":618},[613,35492,35494,35496,35498,35501,35503,35505,35507,35509],{"class":35493,"line":684},[615,649],[613,35495,653],{"class":652},[613,35497,656],{"class":618},[613,35499,35500],{"class":659}," StatsGl",[613,35502,669],{"class":618},[613,35504,672],{"class":652},[613,35506,675],{"class":618},[613,35508,678],{"class":639},[613,35510,681],{"class":618},[613,35512,35513,35515,35517],{"class":615,"line":705},[613,35514,708],{"class":618},[613,35516,623],{"class":622},[613,35518,645],{"class":618},[613,35520,35521],{"class":615,"line":715},[613,35522,718],{"emptyLinePlaceholder":570},[613,35524,35525,35527,35529],{"class":615,"line":721},[613,35526,619],{"class":618},[613,35528,726],{"class":622},[613,35530,645],{"class":618},[613,35532,35533,35535,35537],{"class":615,"line":731},[613,35534,734],{"class":618},[613,35536,737],{"class":622},[613,35538,645],{"class":618},[613,35540,35542,35544,35546],{"class":35541,"line":754},[615,649],[613,35543,757],{"class":618},[613,35545,303],{"class":622},[613,35547,763],{"class":618},[613,35549,35550,35552,35554],{"class":615,"line":766},[613,35551,885],{"class":618},[613,35553,737],{"class":622},[613,35555,645],{"class":618},[613,35557,35558,35560,35562],{"class":615,"line":776},[613,35559,708],{"class":618},[613,35561,726],{"class":622},[613,35563,645],{"class":618},[480,35565,12698],{"id":16243},[907,35567,35568,35580],{},[910,35569,35570],{},[913,35571,35572,35574,35576,35578],{},[916,35573,8362],{"align":977},[916,35575,6179],{},[916,35577,924],{},[916,35579,921],{},[926,35581,35582,35600,35618,35636,35654,35672,35690],{},[913,35583,35584,35589,35593,35597],{},[931,35585,35586],{"align":977},[1681,35587,35588],{},"logsPerSecond",[931,35590,35591],{},[594,35592,5565],{},[931,35594,35595],{},[594,35596,28617],{},[931,35598,35599],{},"How often to log performance data, in logs per second.",[913,35601,35602,35607,35611,35615],{},[931,35603,35604],{"align":977},[1681,35605,35606],{},"samplesLog",[931,35608,35609],{},[594,35610,5565],{},[931,35612,35613],{},[594,35614,11242],{},[931,35616,35617],{},"Number of recent log samples to keep for computing averages.",[913,35619,35620,35625,35629,35633],{},[931,35621,35622],{"align":977},[1681,35623,35624],{},"samplesGraph",[931,35626,35627],{},[594,35628,5565],{},[931,35630,35631],{},[594,35632,1486],{},[931,35634,35635],{},"Number of recent graph samples to keep for computing averages.",[913,35637,35638,35643,35647,35651],{},[931,35639,35640],{"align":977},[1681,35641,35642],{},"precision",[931,35644,35645],{},[594,35646,5565],{},[931,35648,35649],{},[594,35650,800],{},[931,35652,35653],{},"Precision of the data, in the number of decimal places (only affects CPU and GPU).",[913,35655,35656,35661,35665,35669],{},[931,35657,35658],{"align":977},[1681,35659,35660],{},"horizontal",[931,35662,35663],{},[594,35664,16208],{},[931,35666,35667],{},[594,35668,941],{},[931,35670,35671],{},"Display the canvases on the X-axis, set to align on the vertical axis.",[913,35673,35674,35679,35683,35687],{},[931,35675,35676],{"align":977},[1681,35677,35678],{},"minimal",[931,35680,35681],{},[594,35682,16208],{},[931,35684,35685],{},[594,35686,951],{},[931,35688,35689],{},"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,35691,35692,35696,35700,35704],{},[931,35693,35694],{"align":977},[1681,35695,7075],{},[931,35697,35698],{},[594,35699,5565],{},[931,35701,35702],{},[594,35703,945],{},[931,35705,35706],{},"Sets the initial panel to display - 0 for FPS, 1 for CPU, and 2 for GPU (if supported).",[1307,35708,26531],{},{"title":552,"searchDepth":553,"depth":554,"links":35710},[35711,35712],{"id":35238,"depth":554,"text":35239},{"id":16243,"depth":554,"text":12698},"WebGL performance monitoring tool displaying CPU and GPU metrics.",{},{"title":303,"description":35713},"U7tHg9fUc_rOVhwBvVzqjDp7pPwOLcUprEa_GiH5-Uc",{"id":35718,"title":307,"body":35719,"description":37144,"extension":567,"links":568,"meta":37145,"navigation":570,"path":308,"seo":37146,"stem":309,"__hash__":37147},"docs/2.api/6.debug-performance/use-bvh.md",{"type":477,"value":35720,"toc":37120},[35721,35726,35733,35747,35751,35754,35759,35770,35772,35775,35945,35949,35952,36099,36103,36106,36409,36411,36425,36429,36482,36486,36492,36639,36643,36663,36665,36669,36672,36764,36768,36771,36814,36817,36821,36871,36875,36901,36905,36911,37067,37069,37073,37094,37098,37117],[584,35722,35723],{},[35724,35725],"debug-performance-use-bounding-volume-hierarchy",{},[590,35727,35728,35729,35732],{},"A composable that dramatically improves raycasting performance by building a Bounding Volume Hierarchy (BVH) for your meshes. This can speed up raycasting by ",[1681,35730,35731],{},"orders of magnitude",", especially for complex models with many triangles.",[590,35734,35735,35736,35741,35742,1126],{},"Built on top of ",[1120,35737,35740],{"href":35738,"rel":35739},"https://github.com/gkjohnson/three-mesh-bvh",[1124],"three-mesh-bvh"," by ",[1120,35743,35746],{"href":35744,"rel":35745},"https://github.com/gkjohnson",[1124],"Garrett Johnson",[480,35748,35750],{"id":35749},"what-is-bvh","What is BVH?",[590,35752,35753],{},"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).",[590,35755,35756],{},[1681,35757,35758],{},"Use cases:",[2261,35760,35761,35764,35767],{},[2264,35762,35763],{},"Interactive 3D applications with raycasting (mouse picking, selection)",[2264,35765,35766],{},"Complex models with thousands of triangles",[2264,35768,35769],{},"Scenes with multiple raycasting operations per frame",[480,35771,15],{"id":600},[4191,35773,35774],{"id":35238},"Basic Usage",[602,35776,35779],{"className":604,"code":35777,"highlights":35778,"language":609,"meta":552,"style":552},"\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",[554,715,721,731,754,776],[594,35780,35781,35801,35825,35829,35858,35879,35888,35893,35902,35936],{"__ignoreMap":552},[613,35782,35783,35785,35787,35789,35791,35793,35795,35797,35799],{"class":615,"line":553},[613,35784,619],{"class":618},[613,35786,623],{"class":622},[613,35788,627],{"class":626},[613,35790,630],{"class":626},[613,35792,633],{"class":618},[613,35794,636],{"class":618},[613,35796,640],{"class":639},[613,35798,636],{"class":618},[613,35800,645],{"class":618},[613,35802,35804,35806,35808,35810,35812,35815,35817,35819,35821,35823],{"class":35803,"line":554},[615,649],[613,35805,653],{"class":652},[613,35807,656],{"class":618},[613,35809,4486],{"class":659},[613,35811,663],{"class":618},[613,35813,35814],{"class":659}," useBVH",[613,35816,669],{"class":618},[613,35818,672],{"class":652},[613,35820,675],{"class":618},[613,35822,678],{"class":639},[613,35824,681],{"class":618},[613,35826,35827],{"class":615,"line":684},[613,35828,718],{"emptyLinePlaceholder":570},[613,35830,35831,35833,35835,35837,35839,35841,35843,35845,35847,35849,35851,35854,35856],{"class":615,"line":705},[613,35832,2463],{"class":626},[613,35834,656],{"class":618},[613,35836,2468],{"class":622},[613,35838,1198],{"class":618},[613,35840,5188],{"class":659},[613,35842,2476],{"class":618},[613,35844,2479],{"class":618},[613,35846,4486],{"class":2482},[613,35848,2485],{"class":659},[613,35850,2488],{"class":618},[613,35852,35853],{"class":639},"/models/complex-model.glb",[613,35855,2488],{"class":618},[613,35857,2496],{"class":659},[613,35859,35861,35863,35865,35867,35869,35871,35873,35875,35877],{"class":35860,"line":715},[615,649],[613,35862,307],{"class":2482},[613,35864,2485],{"class":659},[613,35866,3743],{"class":618},[613,35868,3746],{"class":626},[613,35870,5227],{"class":659},[613,35872,1126],{"class":618},[613,35874,3754],{"class":659},[613,35876,3757],{"class":618},[613,35878,5236],{"class":659},[613,35880,35882,35884,35886],{"class":35881,"line":721},[615,649],[613,35883,708],{"class":618},[613,35885,623],{"class":622},[613,35887,645],{"class":618},[613,35889,35891],{"class":35890,"line":731},[615,649],[613,35892,718],{"emptyLinePlaceholder":570},[613,35894,35896,35898,35900],{"class":35895,"line":754},[615,649],[613,35897,619],{"class":618},[613,35899,726],{"class":622},[613,35901,645],{"class":618},[613,35903,35904,35906,35908,35910,35912,35914,35916,35918,35920,35922,35924,35926,35928,35930,35932,35934],{"class":615,"line":766},[613,35905,734],{"class":618},[613,35907,4573],{"class":622},[613,35909,2770],{"class":652},[613,35911,633],{"class":618},[613,35913,636],{"class":618},[613,35915,16822],{"class":659},[613,35917,636],{"class":618},[613,35919,789],{"class":618},[613,35921,4594],{"class":626},[613,35923,633],{"class":618},[613,35925,636],{"class":618},[613,35927,16822],{"class":659},[613,35929,1126],{"class":618},[613,35931,15783],{"class":659},[613,35933,636],{"class":618},[613,35935,763],{"class":618},[613,35937,35939,35941,35943],{"class":35938,"line":776},[615,649],[613,35940,708],{"class":618},[613,35942,726],{"class":622},[613,35944,645],{"class":618},[4191,35946,35948],{"id":35947},"with-debug-visualization","With Debug Visualization",[590,35950,35951],{},"Enable debug mode to visualize the BVH bounding boxes:",[602,35953,35956],{"className":604,"code":35954,"highlights":35955,"language":609,"meta":552,"style":552},"\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",[705,715,721,731],[594,35957,35958,35978,36000,36004,36034,36039,36046,36065,36069,36083,36087,36091],{"__ignoreMap":552},[613,35959,35960,35962,35964,35966,35968,35970,35972,35974,35976],{"class":615,"line":553},[613,35961,619],{"class":618},[613,35963,623],{"class":622},[613,35965,627],{"class":626},[613,35967,630],{"class":626},[613,35969,633],{"class":618},[613,35971,636],{"class":618},[613,35973,640],{"class":639},[613,35975,636],{"class":618},[613,35977,645],{"class":618},[613,35979,35980,35982,35984,35986,35988,35990,35992,35994,35996,35998],{"class":615,"line":554},[613,35981,653],{"class":652},[613,35983,656],{"class":618},[613,35985,4486],{"class":659},[613,35987,663],{"class":618},[613,35989,35814],{"class":659},[613,35991,669],{"class":618},[613,35993,672],{"class":652},[613,35995,675],{"class":618},[613,35997,678],{"class":639},[613,35999,681],{"class":618},[613,36001,36002],{"class":615,"line":684},[613,36003,718],{"emptyLinePlaceholder":570},[613,36005,36007,36009,36011,36013,36015,36017,36019,36021,36023,36025,36027,36030,36032],{"class":36006,"line":705},[615,649],[613,36008,2463],{"class":626},[613,36010,656],{"class":618},[613,36012,2468],{"class":622},[613,36014,1198],{"class":618},[613,36016,5188],{"class":659},[613,36018,2476],{"class":618},[613,36020,2479],{"class":618},[613,36022,4486],{"class":2482},[613,36024,2485],{"class":659},[613,36026,2488],{"class":618},[613,36028,36029],{"class":639},"/models/model.glb",[613,36031,2488],{"class":618},[613,36033,2496],{"class":659},[613,36035,36037],{"class":36036,"line":715},[615,649],[613,36038,718],{"emptyLinePlaceholder":570},[613,36040,36042,36044],{"class":36041,"line":721},[615,649],[613,36043,307],{"class":2482},[613,36045,4857],{"class":659},[613,36047,36049,36051,36053,36055,36057,36059,36061,36063],{"class":36048,"line":731},[615,649],[613,36050,4862],{"class":618},[613,36052,3746],{"class":626},[613,36054,5227],{"class":659},[613,36056,1126],{"class":618},[613,36058,3754],{"class":659},[613,36060,3757],{"class":618},[613,36062,15783],{"class":659},[613,36064,2536],{"class":618},[613,36066,36067],{"class":615,"line":754},[613,36068,2519],{"class":618},[613,36070,36071,36074,36076,36078,36080],{"class":615,"line":766},[613,36072,36073],{"class":622}," debug",[613,36075,1198],{"class":618},[613,36077,4537],{"class":4536},[613,36079,663],{"class":618},[613,36081,36082],{"class":1189}," // Show BVH bounding boxes\n",[613,36084,36085],{"class":615,"line":776},[613,36086,8082],{"class":618},[613,36088,36089],{"class":615,"line":781},[613,36090,2496],{"class":659},[613,36092,36093,36095,36097],{"class":615,"line":807},[613,36094,708],{"class":618},[613,36096,623],{"class":622},[613,36098,645],{"class":618},[4191,36100,36102],{"id":36101},"reactive-enabled-state","Reactive Enabled State",[590,36104,36105],{},"Control BVH optimization dynamically:",[602,36107,36110],{"className":604,"code":36108,"highlights":36109,"language":609,"meta":552,"style":552},"\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",[705,721,731,754,766],[594,36111,36112,36132,36154,36176,36181,36198,36203,36232,36237,36244,36262,36266,36278,36282,36286,36290,36298,36302,36310,36318,36346,36351,36359,36393,36401],{"__ignoreMap":552},[613,36113,36114,36116,36118,36120,36122,36124,36126,36128,36130],{"class":615,"line":553},[613,36115,619],{"class":618},[613,36117,623],{"class":622},[613,36119,627],{"class":626},[613,36121,630],{"class":626},[613,36123,633],{"class":618},[613,36125,636],{"class":618},[613,36127,640],{"class":639},[613,36129,636],{"class":618},[613,36131,645],{"class":618},[613,36133,36134,36136,36138,36140,36142,36144,36146,36148,36150,36152],{"class":615,"line":554},[613,36135,653],{"class":652},[613,36137,656],{"class":618},[613,36139,3975],{"class":659},[613,36141,663],{"class":618},[613,36143,3558],{"class":659},[613,36145,669],{"class":618},[613,36147,672],{"class":652},[613,36149,675],{"class":618},[613,36151,609],{"class":639},[613,36153,681],{"class":618},[613,36155,36156,36158,36160,36162,36164,36166,36168,36170,36172,36174],{"class":615,"line":684},[613,36157,653],{"class":652},[613,36159,656],{"class":618},[613,36161,4486],{"class":659},[613,36163,663],{"class":618},[613,36165,35814],{"class":659},[613,36167,669],{"class":618},[613,36169,672],{"class":652},[613,36171,675],{"class":618},[613,36173,678],{"class":639},[613,36175,681],{"class":618},[613,36177,36179],{"class":36178,"line":705},[615,649],[613,36180,718],{"emptyLinePlaceholder":570},[613,36182,36183,36185,36188,36190,36192,36194,36196],{"class":615,"line":715},[613,36184,2463],{"class":626},[613,36186,36187],{"class":659}," bvhEnabled ",[613,36189,633],{"class":618},[613,36191,3975],{"class":2482},[613,36193,2485],{"class":659},[613,36195,941],{"class":4536},[613,36197,2496],{"class":659},[613,36199,36201],{"class":36200,"line":721},[615,649],[613,36202,718],{"emptyLinePlaceholder":570},[613,36204,36206,36208,36210,36212,36214,36216,36218,36220,36222,36224,36226,36228,36230],{"class":36205,"line":731},[615,649],[613,36207,2463],{"class":626},[613,36209,656],{"class":618},[613,36211,2468],{"class":622},[613,36213,1198],{"class":618},[613,36215,5188],{"class":659},[613,36217,2476],{"class":618},[613,36219,2479],{"class":618},[613,36221,4486],{"class":2482},[613,36223,2485],{"class":659},[613,36225,2488],{"class":618},[613,36227,36029],{"class":639},[613,36229,2488],{"class":618},[613,36231,2496],{"class":659},[613,36233,36235],{"class":36234,"line":754},[615,649],[613,36236,718],{"emptyLinePlaceholder":570},[613,36238,36240,36242],{"class":36239,"line":766},[615,649],[613,36241,307],{"class":2482},[613,36243,4857],{"class":659},[613,36245,36246,36248,36250,36252,36254,36256,36258,36260],{"class":615,"line":776},[613,36247,4862],{"class":618},[613,36249,3746],{"class":626},[613,36251,5227],{"class":659},[613,36253,1126],{"class":618},[613,36255,3754],{"class":659},[613,36257,3757],{"class":618},[613,36259,15783],{"class":659},[613,36261,2536],{"class":618},[613,36263,36264],{"class":615,"line":781},[613,36265,2519],{"class":618},[613,36267,36268,36271,36273,36276],{"class":615,"line":807},[613,36269,36270],{"class":622}," enabled",[613,36272,1198],{"class":618},[613,36274,36275],{"class":659}," bvhEnabled",[613,36277,2536],{"class":618},[613,36279,36280],{"class":615,"line":607},[613,36281,8082],{"class":618},[613,36283,36284],{"class":615,"line":830},[613,36285,2496],{"class":659},[613,36287,36288],{"class":615,"line":841},[613,36289,718],{"emptyLinePlaceholder":570},[613,36291,36292,36294,36296],{"class":615,"line":852},[613,36293,708],{"class":618},[613,36295,623],{"class":622},[613,36297,645],{"class":618},[613,36299,36300],{"class":615,"line":862},[613,36301,718],{"emptyLinePlaceholder":570},[613,36303,36304,36306,36308],{"class":615,"line":608},[613,36305,619],{"class":618},[613,36307,726],{"class":622},[613,36309,645],{"class":618},[613,36311,36312,36314,36316],{"class":615,"line":882},[613,36313,734],{"class":618},[613,36315,4259],{"class":622},[613,36317,645],{"class":618},[613,36319,36320,36322,36325,36327,36330,36332,36334,36337,36340,36342,36344],{"class":615,"line":892},[613,36321,757],{"class":618},[613,36323,36324],{"class":622},"button",[613,36326,4393],{"class":618},[613,36328,36329],{"class":626},"click",[613,36331,633],{"class":618},[613,36333,636],{"class":618},[613,36335,36336],{"class":659},"bvhEnabled",[613,36338,36339],{"class":618}," = !",[613,36341,36336],{"class":659},[613,36343,636],{"class":618},[613,36345,645],{"class":618},[613,36347,36348],{"class":615,"line":2671},[613,36349,36350],{"class":659}," Toggle BVH\n",[613,36352,36353,36355,36357],{"class":615,"line":2680},[613,36354,875],{"class":618},[613,36356,36324],{"class":622},[613,36358,645],{"class":618},[613,36360,36361,36363,36365,36367,36369,36371,36373,36375,36377,36379,36381,36383,36385,36387,36389,36391],{"class":615,"line":2714},[613,36362,757],{"class":618},[613,36364,4573],{"class":622},[613,36366,2770],{"class":652},[613,36368,633],{"class":618},[613,36370,636],{"class":618},[613,36372,16822],{"class":659},[613,36374,636],{"class":618},[613,36376,789],{"class":618},[613,36378,4594],{"class":626},[613,36380,633],{"class":618},[613,36382,636],{"class":618},[613,36384,16822],{"class":659},[613,36386,1126],{"class":618},[613,36388,15783],{"class":659},[613,36390,636],{"class":618},[613,36392,763],{"class":618},[613,36394,36395,36397,36399],{"class":615,"line":2723},[613,36396,885],{"class":618},[613,36398,4259],{"class":622},[613,36400,645],{"class":618},[613,36402,36403,36405,36407],{"class":615,"line":2732},[613,36404,708],{"class":618},[613,36406,726],{"class":622},[613,36408,645],{"class":618},[480,36410,12698],{"id":16243},[590,36412,36413,36414,36417,36418,36421,36422,36424],{},"Options are divided into ",[1681,36415,36416],{},"reactive"," (can change at runtime) and ",[1681,36419,36420],{},"static"," (set once at creation - changing requires toggling ",[594,36423,15365],{}," off/on to rebuild).",[4191,36426,36428],{"id":36427},"reactive-options","Reactive Options",[907,36430,36431,36444],{},[910,36432,36433],{},[913,36434,36435,36438,36440,36442],{},[916,36436,36437],{"align":977},"Option",[916,36439,6179],{"align":977},[916,36441,924],{"align":977},[916,36443,921],{"align":977},[926,36445,36446,36464],{},[913,36447,36448,36452,36457,36461],{},[931,36449,36450],{"align":977},[1681,36451,15365],{},[931,36453,36454],{"align":977},[594,36455,36456],{},"MaybeRefOrGetter\u003Cboolean>",[931,36458,36459],{"align":977},[594,36460,941],{},[931,36462,36463],{"align":977},"Enable/disable BVH optimization. Toggling rebuilds BVH structures.",[913,36465,36466,36471,36475,36479],{},[931,36467,36468],{"align":977},[1681,36469,36470],{},"debug",[931,36472,36473],{"align":977},[594,36474,36456],{},[931,36476,36477],{"align":977},[594,36478,951],{},[931,36480,36481],{"align":977},"Show debug visualization of BVH bounding boxes.",[4191,36483,36485],{"id":36484},"static-options-bvh-construction","Static Options (BVH Construction)",[590,36487,36488,36489,36491],{},"These options configure how the BVH is built. Changing them after creation has no effect - toggle ",[594,36490,15365],{}," off/on to rebuild with new values.",[907,36493,36494,36506],{},[910,36495,36496],{},[913,36497,36498,36500,36502,36504],{},[916,36499,36437],{"align":977},[916,36501,6179],{"align":977},[916,36503,924],{"align":977},[916,36505,921],{"align":977},[926,36507,36508,36529,36549,36567,36585,36603,36621],{},[913,36509,36510,36515,36519,36523],{},[931,36511,36512],{"align":977},[1681,36513,36514],{},"firstHitOnly",[931,36516,36517],{"align":977},[594,36518,16208],{},[931,36520,36521],{"align":977},[594,36522,951],{},[931,36524,23562,36525,36528],{"align":977},[594,36526,36527],{},"raycastFirst"," for better performance when only the first hit is needed.",[913,36530,36531,36536,36541,36546],{},[931,36532,36533],{"align":977},[1681,36534,36535],{},"splitStrategy",[931,36537,36538],{"align":977},[594,36539,36540],{},"'CENTER' | 'AVERAGE' | 'SAH'",[931,36542,36543],{"align":977},[594,36544,36545],{},"'SAH'",[931,36547,36548],{"align":977},"BVH build strategy. See section below.",[913,36550,36551,36556,36560,36564],{},[931,36552,36553],{"align":977},[1681,36554,36555],{},"maxDepth",[931,36557,36558],{"align":977},[594,36559,5565],{},[931,36561,36562],{"align":977},[594,36563,33153],{},[931,36565,36566],{"align":977},"Maximum tree depth for the BVH structure.",[913,36568,36569,36574,36578,36582],{},[931,36570,36571],{"align":977},[1681,36572,36573],{},"maxLeafSize",[931,36575,36576],{"align":977},[594,36577,5565],{},[931,36579,36580],{"align":977},[594,36581,1486],{},[931,36583,36584],{"align":977},"Target number of triangles per leaf node.",[913,36586,36587,36592,36596,36600],{},[931,36588,36589],{"align":977},[1681,36590,36591],{},"verbose",[931,36593,36594],{"align":977},[594,36595,16208],{},[931,36597,36598],{"align":977},[594,36599,951],{},[931,36601,36602],{"align":977},"Print construction warnings and progress to console.",[913,36604,36605,36610,36614,36618],{},[931,36606,36607],{"align":977},[1681,36608,36609],{},"setBoundingBox",[931,36611,36612],{"align":977},[594,36613,16208],{},[931,36615,36616],{"align":977},[594,36617,941],{},[931,36619,36620],{"align":977},"Automatically set geometry bounding box after BVH construction.",[913,36622,36623,36628,36632,36636],{},[931,36624,36625],{"align":977},[1681,36626,36627],{},"indirect",[931,36629,36630],{"align":977},[594,36631,16208],{},[931,36633,36634],{"align":977},[594,36635,951],{},[931,36637,36638],{"align":977},"If false, creates and rearranges index buffer for better performance.",[4191,36640,36642],{"id":36641},"split-strategies","Split Strategies",[2261,36644,36645,36651,36657],{},[2264,36646,36647,36650],{},[1681,36648,36649],{},"SAH (Surface Area Heuristic)"," - Slowest to build, fastest at runtime, uses least memory. Best for production.",[2264,36652,36653,36656],{},[1681,36654,36655],{},"AVERAGE"," - Balanced build time and runtime performance.",[2264,36658,36659,36662],{},[1681,36660,36661],{},"CENTER"," - Fastest to build, slower at runtime.",[480,36664,22370],{"id":22369},[4191,36666,36668],{"id":36667},"fine-tuning-performance","Fine-tuning Performance",[590,36670,36671],{},"Adjust BVH construction parameters for your use case:",[602,36673,36675],{"className":1166,"code":36674,"language":640,"meta":552,"style":552},"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",[594,36676,36677,36683,36690,36694,36713,36727,36742,36756,36760],{"__ignoreMap":552},[613,36678,36679,36681],{"class":615,"line":553},[613,36680,307],{"class":2482},[613,36682,4857],{"class":659},[613,36684,36685,36688],{"class":615,"line":554},[613,36686,36687],{"class":659}," target",[613,36689,2536],{"class":618},[613,36691,36692],{"class":615,"line":684},[613,36693,2519],{"class":618},[613,36695,36696,36699,36701,36703,36706,36708,36710],{"class":615,"line":705},[613,36697,36698],{"class":622}," splitStrategy",[613,36700,1198],{"class":618},[613,36702,675],{"class":618},[613,36704,36705],{"class":639},"SAH",[613,36707,2488],{"class":618},[613,36709,663],{"class":618},[613,36711,36712],{"class":1189}," // Best runtime performance\n",[613,36714,36715,36718,36720,36722,36724],{"class":615,"line":715},[613,36716,36717],{"class":622}," maxDepth",[613,36719,1198],{"class":618},[613,36721,21730],{"class":799},[613,36723,663],{"class":618},[613,36725,36726],{"class":1189}," // Shallower tree (faster build)\n",[613,36728,36729,36732,36734,36737,36739],{"class":615,"line":721},[613,36730,36731],{"class":622}," maxLeafSize",[613,36733,1198],{"class":618},[613,36735,36736],{"class":799}," 5",[613,36738,663],{"class":618},[613,36740,36741],{"class":1189}," // Smaller leaves (better culling)\n",[613,36743,36744,36747,36749,36751,36753],{"class":615,"line":731},[613,36745,36746],{"class":622}," verbose",[613,36748,1198],{"class":618},[613,36750,4537],{"class":4536},[613,36752,663],{"class":618},[613,36754,36755],{"class":1189}," // Debug construction\n",[613,36757,36758],{"class":615,"line":754},[613,36759,8082],{"class":618},[613,36761,36762],{"class":615,"line":766},[613,36763,2496],{"class":659},[4191,36765,36767],{"id":36766},"first-hit-only-mode","First Hit Only Mode",[590,36769,36770],{},"When you only need the closest intersection (e.g., mouse picking):",[602,36772,36774],{"className":1166,"code":36773,"language":640,"meta":552,"style":552},"useBVH(\n target,\n {\n firstHitOnly: true, // Uses raycastFirst internally\n }\n)\n",[594,36775,36776,36782,36788,36792,36806,36810],{"__ignoreMap":552},[613,36777,36778,36780],{"class":615,"line":553},[613,36779,307],{"class":2482},[613,36781,4857],{"class":659},[613,36783,36784,36786],{"class":615,"line":554},[613,36785,36687],{"class":659},[613,36787,2536],{"class":618},[613,36789,36790],{"class":615,"line":684},[613,36791,2519],{"class":618},[613,36793,36794,36797,36799,36801,36803],{"class":615,"line":705},[613,36795,36796],{"class":622}," firstHitOnly",[613,36798,1198],{"class":618},[613,36800,4537],{"class":4536},[613,36802,663],{"class":618},[613,36804,36805],{"class":1189}," // Uses raycastFirst internally\n",[613,36807,36808],{"class":615,"line":715},[613,36809,8082],{"class":618},[613,36811,36812],{"class":615,"line":721},[613,36813,2496],{"class":659},[590,36815,36816],{},"This is significantly faster than computing all intersections when you only need one.",[480,36818,36820],{"id":36819},"important-notes","Important Notes",[2261,36822,36823,36829,36848,36854,36865],{},[2264,36824,36825,36828],{},[1681,36826,36827],{},"Side-effect free",": BVH is automatically removed on unmount and when disabled.",[2264,36830,36831,36834,36835,3132,36837,36839,36840,1479,36842,36844,36845,36847],{},[1681,36832,36833],{},"Reactive options",": Only ",[594,36836,15365],{},[594,36838,36470],{}," are reactive. Construction options (",[594,36841,36535],{},[594,36843,36555],{},", etc.) are static - to apply new values, toggle ",[594,36846,15365],{}," off/on.",[2264,36849,36850,36853],{},[1681,36851,36852],{},"Memory efficient",": BVH structures are properly disposed when removed.",[2264,36855,36856,36859,36860,3132,36862,36864],{},[1681,36857,36858],{},"Automatic mesh detection",": Works with ",[594,36861,4431],{},[594,36863,6561],{}," instances.",[2264,36866,36867,36870],{},[1681,36868,36869],{},"Draco models",": Works seamlessly with Draco-compressed GLTF models.",[480,36872,36874],{"id":36873},"performance-tips","Performance Tips",[12816,36876,36877,36883,36889,36895],{},[2264,36878,36879,36882],{},[1681,36880,36881],{},"Use firstHitOnly"," when you only need the closest intersection",[2264,36884,36885,36888],{},[1681,36886,36887],{},"SAH strategy"," gives best runtime performance for production",[2264,36890,36891,36894],{},[1681,36892,36893],{},"Adjust maxLeafSize"," based on triangle density (smaller for dense meshes)",[2264,36896,36897,36900],{},[1681,36898,36899],{},"Enable debug mode"," during development to verify BVH coverage",[480,36902,36904],{"id":36903},"integration-with-usegltf","Integration with useGLTF",[590,36906,36907,36908,36910],{},"Perfect pairing with ",[594,36909,121],{}," for optimized model loading:",[602,36912,36914],{"className":604,"code":36913,"language":609,"meta":552,"style":552},"\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",[594,36915,36916,36936,36958,36962,36993,37003,37009,37013,37019,37037,37055,37059],{"__ignoreMap":552},[613,36917,36918,36920,36922,36924,36926,36928,36930,36932,36934],{"class":615,"line":553},[613,36919,619],{"class":618},[613,36921,623],{"class":622},[613,36923,627],{"class":626},[613,36925,630],{"class":626},[613,36927,633],{"class":618},[613,36929,636],{"class":618},[613,36931,640],{"class":639},[613,36933,636],{"class":618},[613,36935,645],{"class":618},[613,36937,36938,36940,36942,36944,36946,36948,36950,36952,36954,36956],{"class":615,"line":554},[613,36939,653],{"class":652},[613,36941,656],{"class":618},[613,36943,35814],{"class":659},[613,36945,663],{"class":618},[613,36947,4486],{"class":659},[613,36949,669],{"class":618},[613,36951,672],{"class":652},[613,36953,675],{"class":618},[613,36955,678],{"class":639},[613,36957,681],{"class":618},[613,36959,36960],{"class":615,"line":684},[613,36961,718],{"emptyLinePlaceholder":570},[613,36963,36964,36966,36968,36970,36972,36974,36976,36978,36980,36982,36984,36987,36989,36991],{"class":615,"line":705},[613,36965,2463],{"class":626},[613,36967,656],{"class":618},[613,36969,2468],{"class":622},[613,36971,1198],{"class":618},[613,36973,5188],{"class":659},[613,36975,2476],{"class":618},[613,36977,2479],{"class":618},[613,36979,4486],{"class":2482},[613,36981,2485],{"class":659},[613,36983,2488],{"class":618},[613,36985,36986],{"class":639},"/models/high-poly-model.glb",[613,36988,2488],{"class":618},[613,36990,663],{"class":618},[613,36992,1184],{"class":618},[613,36994,36995,36998,37000],{"class":615,"line":715},[613,36996,36997],{"class":622}," draco",[613,36999,1198],{"class":618},[613,37001,37002],{"class":4536}," true\n",[613,37004,37005,37007],{"class":615,"line":721},[613,37006,2476],{"class":618},[613,37008,2496],{"class":659},[613,37010,37011],{"class":615,"line":731},[613,37012,718],{"emptyLinePlaceholder":570},[613,37014,37015,37017],{"class":615,"line":754},[613,37016,307],{"class":2482},[613,37018,4857],{"class":659},[613,37020,37021,37023,37025,37027,37029,37031,37033,37035],{"class":615,"line":766},[613,37022,4862],{"class":618},[613,37024,3746],{"class":626},[613,37026,5227],{"class":659},[613,37028,1126],{"class":618},[613,37030,3754],{"class":659},[613,37032,3757],{"class":618},[613,37034,15783],{"class":659},[613,37036,2536],{"class":618},[613,37038,37039,37042,37045,37047,37049,37051,37053],{"class":615,"line":776},[613,37040,37041],{"class":618}," {",[613,37043,37044],{"class":622}," splitStrategy",[613,37046,1198],{"class":618},[613,37048,675],{"class":618},[613,37050,36705],{"class":639},[613,37052,2488],{"class":618},[613,37054,20808],{"class":618},[613,37056,37057],{"class":615,"line":781},[613,37058,2496],{"class":659},[613,37060,37061,37063,37065],{"class":615,"line":807},[613,37062,708],{"class":618},[613,37064,623],{"class":622},[613,37066,645],{"class":618},[480,37068,23419],{"id":23418},[4191,37070,37072],{"id":37071},"bvh-not-applying-to-some-meshes","BVH not applying to some meshes",[2261,37074,37075,37078,37085],{},[2264,37076,37077],{},"Ensure meshes have valid geometry with position attributes",[2264,37079,37080,37081,37084],{},"Check console with ",[594,37082,37083],{},"verbose: true"," to see which meshes are skipped",[2264,37086,37087,37088,37090,37091,37093],{},"Verify the object is an ",[594,37089,7847],{}," (use ",[594,37092,4573],{}," in templates)",[4191,37095,37097],{"id":37096},"performance-not-improving","Performance not improving",[2261,37099,37100,37105,37111,37114],{},[2264,37101,17079,37102,37104],{},[594,37103,36514],{}," if you only need one intersection",[2264,37106,37107,37108,37110],{},"Try different split strategies (",[594,37109,36705],{}," is usually best)",[2264,37112,37113],{},"Verify raycasting is the bottleneck (use Stats/StatsGl)",[2264,37115,37116],{},"Consider LOD for very distant objects",[1307,37118,37119],{},"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":552,"searchDepth":553,"depth":554,"links":37121},[37122,37123,37128,37133,37137,37138,37139,37140],{"id":35749,"depth":554,"text":35750},{"id":600,"depth":554,"text":15,"children":37124},[37125,37126,37127],{"id":35238,"depth":684,"text":35774},{"id":35947,"depth":684,"text":35948},{"id":36101,"depth":684,"text":36102},{"id":16243,"depth":554,"text":12698,"children":37129},[37130,37131,37132],{"id":36427,"depth":684,"text":36428},{"id":36484,"depth":684,"text":36485},{"id":36641,"depth":684,"text":36642},{"id":22369,"depth":554,"text":22370,"children":37134},[37135,37136],{"id":36667,"depth":684,"text":36668},{"id":36766,"depth":684,"text":36767},{"id":36819,"depth":554,"text":36820},{"id":36873,"depth":554,"text":36874},{"id":36903,"depth":554,"text":36904},{"id":23418,"depth":554,"text":23419,"children":37141},[37142,37143],{"id":37071,"depth":684,"text":37072},{"id":37096,"depth":684,"text":37097},"Speed up raycasting with Bounding Volume Hierarchy (BVH) optimization.",{},{"title":307,"description":37144},"j_yBTwISSBvt9p_jtL1KmVLzoSoFUX_NTuLQBbuRDIs",[37149,37715,38337,38749,39243,40759,41456],{"id":37150,"title":317,"body":37151,"description":37711,"extension":567,"links":568,"meta":37712,"navigation":570,"path":318,"seo":37713,"stem":319,"__hash__":37714},"docs/2.api/7.light-shadow/accumulative-shadows.md",{"type":477,"value":37152,"toc":37706},[37153,37158,37172,37174,37476,37478,37671,37673,37683,37703],[584,37154,37155],{},[37156,37157],"light-shadow-accumulative-shadows",{},[590,37159,37160,4443,37163,37166,37167,1126],{},[594,37161,37162],{},"\u003CAccumulativeShadows />",[594,37164,37165],{},"THREE.DirectionalLight","-based shadow component. It displays shadows on a single shadow catcher plane, included in the component. It is based on ",[1120,37168,37171],{"href":37169,"rel":37170},"http://drei.docs.pmnd.rs/staging/accumulative-shadows",[1124],"Drei component of the same name",[480,37173,15],{"id":600},[602,37175,37178],{"className":604,"code":37176,"highlights":37177,"language":609,"meta":552,"style":552},"\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",[554,841,852,862,608,882],[594,37179,37180,37200,37220,37238,37246,37250,37258,37289,37295,37321,37325,37371,37380,37388,37396,37404,37420,37433,37439,37456,37460,37468],{"__ignoreMap":552},[613,37181,37182,37184,37186,37188,37190,37192,37194,37196,37198],{"class":615,"line":553},[613,37183,619],{"class":618},[613,37185,623],{"class":622},[613,37187,627],{"class":626},[613,37189,630],{"class":626},[613,37191,633],{"class":618},[613,37193,636],{"class":618},[613,37195,640],{"class":639},[613,37197,636],{"class":618},[613,37199,645],{"class":618},[613,37201,37203,37205,37207,37210,37212,37214,37216,37218],{"class":37202,"line":554},[615,649],[613,37204,653],{"class":652},[613,37206,656],{"class":618},[613,37208,37209],{"class":659}," AccumulativeShadows",[613,37211,669],{"class":618},[613,37213,672],{"class":652},[613,37215,675],{"class":618},[613,37217,678],{"class":639},[613,37219,681],{"class":618},[613,37221,37222,37224,37226,37228,37230,37232,37234,37236],{"class":615,"line":684},[613,37223,653],{"class":652},[613,37225,656],{"class":618},[613,37227,691],{"class":659},[613,37229,669],{"class":618},[613,37231,672],{"class":652},[613,37233,675],{"class":618},[613,37235,700],{"class":639},[613,37237,681],{"class":618},[613,37239,37240,37242,37244],{"class":615,"line":705},[613,37241,708],{"class":618},[613,37243,623],{"class":622},[613,37245,645],{"class":618},[613,37247,37248],{"class":615,"line":715},[613,37249,718],{"emptyLinePlaceholder":570},[613,37251,37252,37254,37256],{"class":615,"line":721},[613,37253,619],{"class":618},[613,37255,726],{"class":622},[613,37257,645],{"class":618},[613,37259,37260,37262,37264,37266,37268,37270,37272,37274,37276,37279,37281,37283,37285,37287],{"class":615,"line":731},[613,37261,734],{"class":618},[613,37263,737],{"class":622},[613,37265,740],{"class":626},[613,37267,633],{"class":618},[613,37269,636],{"class":618},[613,37271,9281],{"class":639},[613,37273,636],{"class":618},[613,37275,789],{"class":618},[613,37277,37278],{"class":626},"shadows",[613,37280,633],{"class":618},[613,37282,636],{"class":618},[613,37284,941],{"class":4536},[613,37286,636],{"class":618},[613,37288,645],{"class":618},[613,37290,37291,37293],{"class":615,"line":754},[613,37292,833],{"class":618},[613,37294,24283],{"class":622},[613,37296,37297,37299,37301,37303,37305,37307,37309,37311,37313,37315,37317,37319],{"class":615,"line":766},[613,37298,10907],{"class":618},[613,37300,8681],{"class":626},[613,37302,633],{"class":618},[613,37304,636],{"class":618},[613,37306,1474],{"class":618},[613,37308,945],{"class":799},[613,37310,1479],{"class":618},[613,37312,945],{"class":799},[613,37314,1479],{"class":618},[613,37316,945],{"class":799},[613,37318,1489],{"class":618},[613,37320,3200],{"class":618},[613,37322,37323],{"class":615,"line":776},[613,37324,16014],{"class":618},[613,37326,37327,37329,37331,37333,37335,37337,37339,37342,37344,37346,37348,37350,37352,37355,37357,37359,37361,37363,37365,37367,37369],{"class":615,"line":781},[613,37328,757],{"class":618},[613,37330,836],{"class":622},[613,37332,789],{"class":618},[613,37334,1976],{"class":626},[613,37336,633],{"class":618},[613,37338,636],{"class":618},[613,37340,37341],{"class":799},"0.3",[613,37343,636],{"class":618},[613,37345,789],{"class":618},[613,37347,792],{"class":626},[613,37349,633],{"class":618},[613,37351,636],{"class":618},[613,37353,37354],{"class":799},"0.4",[613,37356,636],{"class":618},[613,37358,789],{"class":618},[613,37360,17113],{"class":626},[613,37362,633],{"class":618},[613,37364,636],{"class":618},[613,37366,941],{"class":4536},[613,37368,636],{"class":618},[613,37370,645],{"class":618},[613,37372,37373,37375,37378],{"class":615,"line":807},[613,37374,833],{"class":618},[613,37376,37377],{"class":622},"TresTorusKnotGeometry",[613,37379,763],{"class":618},[613,37381,37382,37384,37386],{"class":615,"line":607},[613,37383,833],{"class":618},[613,37385,857],{"class":622},[613,37387,763],{"class":618},[613,37389,37390,37392,37394],{"class":615,"line":830},[613,37391,875],{"class":618},[613,37393,836],{"class":622},[613,37395,645],{"class":618},[613,37397,37399,37401],{"class":37398,"line":841},[615,649],[613,37400,757],{"class":618},[613,37402,37403],{"class":622},"AccumulativeShadows\n",[613,37405,37407,37409,37412,37414,37416,37418],{"class":37406,"line":852},[615,649],[613,37408,10907],{"class":618},[613,37410,37411],{"class":626},"blend",[613,37413,633],{"class":618},[613,37415,636],{"class":618},[613,37417,11242],{"class":799},[613,37419,3200],{"class":618},[613,37421,37423,37425,37427,37429,37431],{"class":37422,"line":862},[615,649],[613,37424,28519],{"class":626},[613,37426,633],{"class":618},[613,37428,636],{"class":618},[613,37430,9281],{"class":639},[613,37432,3200],{"class":618},[613,37434,37436],{"class":37435,"line":608},[615,649],[613,37437,37438],{"class":626}," once\n",[613,37440,37442,37444,37446,37448,37450,37452,37454],{"class":37441,"line":882},[615,649],[613,37443,10907],{"class":618},[613,37445,1976],{"class":626},[613,37447,633],{"class":618},[613,37449,636],{"class":618},[613,37451,9324],{"class":618},[613,37453,37354],{"class":799},[613,37455,3200],{"class":618},[613,37457,37458],{"class":615,"line":892},[613,37459,16014],{"class":618},[613,37461,37462,37464,37466],{"class":615,"line":2671},[613,37463,885],{"class":618},[613,37465,737],{"class":622},[613,37467,645],{"class":618},[613,37469,37470,37472,37474],{"class":615,"line":2680},[613,37471,708],{"class":618},[613,37473,726],{"class":622},[613,37475,645],{"class":618},[480,37477,902],{"id":901},[907,37479,37480,37490],{},[910,37481,37482],{},[913,37483,37484,37486,37488],{},[916,37485,918],{},[916,37487,921],{},[916,37489,924],{},[926,37491,37492,37505,37519,37543,37558,37575,37588,37601,37615,37628,37643,37657],{},[913,37493,37494,37498,37501],{},[931,37495,37496],{},[594,37497,3277],{},[931,37499,37500],{},"Whether shadow creation only happens once (resets after props change)",[931,37502,37503],{},[594,37504,951],{},[913,37506,37507,37512,37515],{},[931,37508,37509],{},[594,37510,37511],{},"accumulate",[931,37513,37514],{},"Whether shadows accumulate progressively over several frames",[931,37516,37517],{},[594,37518,941],{},[913,37520,37521,37526,37539],{},[931,37522,37523],{},[594,37524,37525],{},"frames",[931,37527,37528,37529,37532,37533,37535,37536,37538],{},"Number of frames to render. More yields cleaner results but takes more time. If ",[594,37530,37531],{},"accumulate && once",", 1 frame will be consumed every update for ",[594,37534,37525],{}," updates. Otherwise, ",[594,37537,37525],{}," frames are consumed for every update.",[931,37540,37541],{},[594,37542,33153],{},[913,37544,37545,37549,37554],{},[931,37546,37547],{},[594,37548,37411],{},[931,37550,938,37551,37553],{},[594,37552,37511],{},", controls the refresh ratio",[931,37555,37556],{},[594,37557,11242],{},[913,37559,37560,37565,37571],{},[931,37561,37562],{},[594,37563,37564],{},"limit",[931,37566,37567,37568,37570],{},"If less than ",[594,37569,12152],{},", limits the amount of frames rendered. Use this to increase performance once a movable scene has settled",[931,37572,37573],{},[594,37574,12152],{},[913,37576,37577,37581,37584],{},[931,37578,37579],{},[594,37580,792],{},[931,37582,37583],{},"Scale of the plane",[931,37585,37586],{},[594,37587,1486],{},[913,37589,37590,37594,37597],{},[931,37591,37592],{},[594,37593,10084],{},[931,37595,37596],{},"Opacity of the plane",[931,37598,37599],{},[594,37600,1901],{},[913,37602,37603,37608,37611],{},[931,37604,37605],{},[594,37606,37607],{},"alphaTest",[931,37609,37610],{},"Discards alpha pixels",[931,37612,37613],{},[594,37614,2154],{},[913,37616,37617,37621,37624],{},[931,37618,37619],{},[594,37620,7772],{},[931,37622,37623],{},"Shadow color",[931,37625,37626],{},[594,37627,10067],{},[913,37629,37630,37635,37639],{},[931,37631,37632],{},[594,37633,37634],{},"colorBlend",[931,37636,37567,37637,37570],{},[594,37638,12152],{},[931,37640,37641],{},[594,37642,12152],{},[913,37644,37645,37649,37652],{},[931,37646,37647],{},[594,37648,27086],{},[931,37650,37651],{},"Buffer resolution",[931,37653,37654],{},[594,37655,37656],{},"1024",[913,37658,37659,37664,37667],{},[931,37660,37661],{},[594,37662,37663],{},"toneMapped",[931,37665,37666],{},"Texture tonemapping",[931,37668,37669],{},[594,37670,941],{},[480,37672,33368],{"id":33367},[590,37674,37675,37676,37679,37680,1126],{},"You can bring your own lights to ",[594,37677,37678],{},"\u003CAccumulatedShadows />",", but it's designed to be used with ",[594,37681,37682],{},"\u003CRandomizedLights />",[590,37684,37685,37686,37690,37691,37693,37694,37697,37698,37702],{},"By default, there's a ",[1120,37687,37688],{"href":338},[594,37689,37682],{}," instance provided in ",[594,37692,37678],{},"'s ",[594,37695,37696],{},"\u003Cslot />",". You can replace it with your own ",[1120,37699,37700],{"href":338},[594,37701,37682],{}," or an alternative by passing it as a child component.",[1307,37704,37705],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":552,"searchDepth":553,"depth":554,"links":37707},[37708,37709,37710],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},{"id":33367,"depth":554,"text":33368},"DirectionalLight-based shadow component with progressive accumulation.",{},{"title":317,"description":37711},"VdtFCKwQ2ZyFv-ZyG0covi7a2nS1DuskCV9MJO6BaDQ",{"id":37716,"title":321,"body":37717,"description":38333,"extension":567,"links":568,"meta":38334,"navigation":570,"path":322,"seo":38335,"stem":323,"__hash__":38336},"docs/2.api/7.light-shadow/bake-shadows.md",{"type":477,"value":37718,"toc":38330},[37719,37724,37735,37737,37742,38327],[2343,37720,37721],{},[37722,37723],"light-shadow-bake-shadows",{},[590,37725,37726,35232,37728,37731,37732,37734],{},[1681,37727,35231],{},[594,37729,37730],{},"BakeShadows",". Basically this component set the renderer.shadowMap.autoUpdate to ",[594,37733,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.",[480,37736,35239],{"id":35238},[3268,37738,37739],{},[590,37740,37741],{},"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.",[602,37743,37746],{"className":604,"code":37744,"highlights":37745,"language":609,"meta":552,"style":552},"\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",[554,2741],[594,37747,37748,37768,37788,37806,37824,37828,37841,37845,37875,37892,37920,37944,37948,37952,37960,37964,37972,37979,37992,37997,38012,38016,38022,38048,38074,38078,38087,38093,38105,38110,38114,38122,38140,38148,38154,38159,38185,38210,38214,38242,38263,38271,38277,38281,38307,38311,38319],{"__ignoreMap":552},[613,37749,37750,37752,37754,37756,37758,37760,37762,37764,37766],{"class":615,"line":553},[613,37751,619],{"class":618},[613,37753,623],{"class":622},[613,37755,627],{"class":626},[613,37757,630],{"class":626},[613,37759,633],{"class":618},[613,37761,636],{"class":618},[613,37763,640],{"class":639},[613,37765,636],{"class":618},[613,37767,645],{"class":618},[613,37769,37771,37773,37775,37778,37780,37782,37784,37786],{"class":37770,"line":554},[615,649],[613,37772,653],{"class":652},[613,37774,656],{"class":618},[613,37776,37777],{"class":659}," BakeShadows",[613,37779,669],{"class":618},[613,37781,672],{"class":652},[613,37783,675],{"class":618},[613,37785,678],{"class":639},[613,37787,681],{"class":618},[613,37789,37790,37792,37794,37796,37798,37800,37802,37804],{"class":615,"line":684},[613,37791,653],{"class":652},[613,37793,656],{"class":618},[613,37795,691],{"class":659},[613,37797,669],{"class":618},[613,37799,672],{"class":652},[613,37801,675],{"class":618},[613,37803,700],{"class":639},[613,37805,681],{"class":618},[613,37807,37808,37810,37812,37814,37816,37818,37820,37822],{"class":615,"line":705},[613,37809,653],{"class":652},[613,37811,656],{"class":618},[613,37813,3567],{"class":659},[613,37815,669],{"class":618},[613,37817,672],{"class":652},[613,37819,675],{"class":618},[613,37821,609],{"class":639},[613,37823,681],{"class":618},[613,37825,37826],{"class":615,"line":715},[613,37827,718],{"emptyLinePlaceholder":570},[613,37829,37830,37832,37835,37837,37839],{"class":615,"line":721},[613,37831,2463],{"class":626},[613,37833,37834],{"class":659}," cubeRef ",[613,37836,633],{"class":618},[613,37838,3567],{"class":2482},[613,37840,6745],{"class":659},[613,37842,37843],{"class":615,"line":731},[613,37844,718],{"emptyLinePlaceholder":570},[613,37846,37847,37850,37853,37856,37859,37862,37864,37866,37868,37870,37873],{"class":615,"line":754},[613,37848,37849],{"class":626},"function",[613,37851,37852],{"class":2482}," onLoop",[613,37854,37855],{"class":618},"({",[613,37857,37858],{"class":7049}," elapsed",[613,37860,37861],{"class":618}," }:",[613,37863,656],{"class":618},[613,37865,37858],{"class":622},[613,37867,1198],{"class":618},[613,37869,5570],{"class":1180},[613,37871,37872],{"class":618}," })",[613,37874,1184],{"class":618},[613,37876,37877,37879,37881,37884,37886,37888,37890],{"class":615,"line":766},[613,37878,19771],{"class":652},[613,37880,3143],{"class":622},[613,37882,37883],{"class":659},"cubeRef",[613,37885,1126],{"class":618},[613,37887,3754],{"class":659},[613,37889,4893],{"class":622},[613,37891,3329],{"class":618},[613,37893,37894,37897,37899,37901,37903,37905,37907,37910,37912,37914,37917],{"class":615,"line":776},[613,37895,37896],{"class":659}," cubeRef",[613,37898,1126],{"class":618},[613,37900,3754],{"class":659},[613,37902,1126],{"class":618},[613,37904,5839],{"class":659},[613,37906,1126],{"class":618},[613,37908,37909],{"class":659},"y",[613,37911,2479],{"class":618},[613,37913,37858],{"class":659},[613,37915,37916],{"class":618}," *",[613,37918,37919],{"class":799}," 0.5\n",[613,37921,37922,37924,37926,37928,37930,37932,37934,37936,37938,37940,37942],{"class":615,"line":781},[613,37923,37896],{"class":659},[613,37925,1126],{"class":618},[613,37927,3754],{"class":659},[613,37929,1126],{"class":618},[613,37931,5839],{"class":659},[613,37933,1126],{"class":618},[613,37935,8065],{"class":659},[613,37937,2479],{"class":618},[613,37939,37858],{"class":659},[613,37941,37916],{"class":618},[613,37943,37919],{"class":799},[613,37945,37946],{"class":615,"line":807},[613,37947,8082],{"class":618},[613,37949,37950],{"class":615,"line":607},[613,37951,1305],{"class":618},[613,37953,37954,37956,37958],{"class":615,"line":830},[613,37955,708],{"class":618},[613,37957,623],{"class":622},[613,37959,645],{"class":618},[613,37961,37962],{"class":615,"line":841},[613,37963,718],{"emptyLinePlaceholder":570},[613,37965,37966,37968,37970],{"class":615,"line":852},[613,37967,619],{"class":618},[613,37969,726],{"class":622},[613,37971,645],{"class":618},[613,37973,37974,37976],{"class":615,"line":862},[613,37975,734],{"class":618},[613,37977,37978],{"class":622},"TresCanvas\n",[613,37980,37981,37984,37986,37988,37990],{"class":615,"line":608},[613,37982,37983],{"class":626}," clear-color",[613,37985,633],{"class":618},[613,37987,636],{"class":618},[613,37989,10263],{"class":639},[613,37991,3200],{"class":618},[613,37993,37994],{"class":615,"line":882},[613,37995,37996],{"class":626}," shadows\n",[613,37998,37999,38001,38003,38005,38007,38010],{"class":615,"line":892},[613,38000,19006],{"class":618},[613,38002,24716],{"class":626},[613,38004,633],{"class":618},[613,38006,636],{"class":618},[613,38008,38009],{"class":659},"onLoop",[613,38011,3200],{"class":618},[613,38013,38014],{"class":615,"line":2671},[613,38015,5368],{"class":618},[613,38017,38018,38020],{"class":615,"line":2680},[613,38019,757],{"class":618},[613,38021,24283],{"class":622},[613,38023,38024,38026,38028,38030,38032,38034,38036,38038,38040,38042,38044,38046],{"class":615,"line":2714},[613,38025,10907],{"class":618},[613,38027,1467],{"class":626},[613,38029,633],{"class":618},[613,38031,636],{"class":618},[613,38033,1474],{"class":618},[613,38035,945],{"class":799},[613,38037,1479],{"class":618},[613,38039,800],{"class":799},[613,38041,1479],{"class":618},[613,38043,7668],{"class":799},[613,38045,1489],{"class":618},[613,38047,3200],{"class":618},[613,38049,38050,38052,38054,38056,38058,38060,38062,38064,38066,38068,38070,38072],{"class":615,"line":2723},[613,38051,10907],{"class":618},[613,38053,8681],{"class":626},[613,38055,633],{"class":618},[613,38057,636],{"class":618},[613,38059,1474],{"class":618},[613,38061,945],{"class":799},[613,38063,1479],{"class":618},[613,38065,945],{"class":799},[613,38067,1479],{"class":618},[613,38069,945],{"class":799},[613,38071,1489],{"class":618},[613,38073,3200],{"class":618},[613,38075,38076],{"class":615,"line":2732},[613,38077,16014],{"class":618},[613,38079,38081,38083,38085],{"class":38080,"line":2741},[615,649],[613,38082,757],{"class":618},[613,38084,37730],{"class":622},[613,38086,763],{"class":618},[613,38088,38089,38091],{"class":615,"line":2763},[613,38090,757],{"class":618},[613,38092,5305],{"class":622},[613,38094,38095,38097,38099,38101,38103],{"class":615,"line":2814},[613,38096,10893],{"class":626},[613,38098,633],{"class":618},[613,38100,636],{"class":618},[613,38102,37883],{"class":639},[613,38104,3200],{"class":618},[613,38106,38107],{"class":615,"line":2823},[613,38108,38109],{"class":626}," cast-shadow\n",[613,38111,38112],{"class":615,"line":2832},[613,38113,10927],{"class":618},[613,38115,38116,38118,38120],{"class":615,"line":4034},[613,38117,833],{"class":618},[613,38119,847],{"class":622},[613,38121,763],{"class":618},[613,38123,38124,38126,38128,38130,38132,38134,38136,38138],{"class":615,"line":4078},[613,38125,833],{"class":618},[613,38127,2746],{"class":622},[613,38129,2749],{"class":626},[613,38131,633],{"class":618},[613,38133,636],{"class":618},[613,38135,11952],{"class":639},[613,38137,636],{"class":618},[613,38139,763],{"class":618},[613,38141,38142,38144,38146],{"class":615,"line":4105},[613,38143,875],{"class":618},[613,38145,836],{"class":622},[613,38147,645],{"class":618},[613,38149,38150,38152],{"class":615,"line":4124},[613,38151,757],{"class":618},[613,38153,5305],{"class":622},[613,38155,38156],{"class":615,"line":4165},[613,38157,38158],{"class":626}," receive-shadow\n",[613,38160,38161,38163,38165,38167,38169,38171,38173,38175,38177,38179,38181,38183],{"class":615,"line":4174},[613,38162,10907],{"class":618},[613,38164,1467],{"class":626},[613,38166,633],{"class":618},[613,38168,636],{"class":618},[613,38170,1474],{"class":618},[613,38172,945],{"class":799},[613,38174,8838],{"class":618},[613,38176,800],{"class":799},[613,38178,1479],{"class":618},[613,38180,945],{"class":799},[613,38182,1489],{"class":618},[613,38184,3200],{"class":618},[613,38186,38187,38189,38192,38194,38196,38198,38200,38202,38204,38206,38208],{"class":615,"line":4183},[613,38188,10907],{"class":618},[613,38190,38191],{"class":626},"rotation-x",[613,38193,633],{"class":618},[613,38195,636],{"class":618},[613,38197,9324],{"class":618},[613,38199,26743],{"class":659},[613,38201,1126],{"class":618},[613,38203,26748],{"class":659},[613,38205,3405],{"class":618},[613,38207,800],{"class":799},[613,38209,3200],{"class":618},[613,38211,38212],{"class":615,"line":19957},[613,38213,10927],{"class":618},[613,38215,38216,38218,38220,38222,38224,38226,38228,38230,38232,38234,38236,38238,38240],{"class":615,"line":19972},[613,38217,833],{"class":618},[613,38219,26773],{"class":622},[613,38221,789],{"class":618},[613,38223,1997],{"class":626},[613,38225,633],{"class":618},[613,38227,636],{"class":618},[613,38229,1474],{"class":618},[613,38231,7668],{"class":799},[613,38233,1479],{"class":618},[613,38235,7668],{"class":799},[613,38237,1489],{"class":618},[613,38239,636],{"class":618},[613,38241,763],{"class":618},[613,38243,38244,38246,38248,38250,38252,38254,38256,38259,38261],{"class":615,"line":19987},[613,38245,833],{"class":618},[613,38247,2746],{"class":622},[613,38249,789],{"class":618},[613,38251,7772],{"class":626},[613,38253,633],{"class":618},[613,38255,636],{"class":618},[613,38257,38258],{"class":799},"0xF7F7F7",[613,38260,636],{"class":618},[613,38262,763],{"class":618},[613,38264,38265,38267,38269],{"class":615,"line":19992},[613,38266,875],{"class":618},[613,38268,836],{"class":622},[613,38270,645],{"class":618},[613,38272,38273,38275],{"class":615,"line":19999},[613,38274,757],{"class":618},[613,38276,15969],{"class":622},[613,38278,38279],{"class":615,"line":20004},[613,38280,38109],{"class":626},[613,38282,38283,38285,38287,38289,38291,38293,38295,38297,38299,38301,38303,38305],{"class":615,"line":20010},[613,38284,10907],{"class":618},[613,38286,1467],{"class":626},[613,38288,633],{"class":618},[613,38290,636],{"class":618},[613,38292,1474],{"class":618},[613,38294,945],{"class":799},[613,38296,1479],{"class":618},[613,38298,1486],{"class":799},[613,38300,1479],{"class":618},[613,38302,945],{"class":799},[613,38304,1489],{"class":618},[613,38306,3200],{"class":618},[613,38308,38309],{"class":615,"line":20031},[613,38310,16014],{"class":618},[613,38312,38313,38315,38317],{"class":615,"line":20037},[613,38314,885],{"class":618},[613,38316,737],{"class":622},[613,38318,645],{"class":618},[613,38320,38321,38323,38325],{"class":615,"line":20044},[613,38322,708],{"class":618},[613,38324,726],{"class":622},[613,38326,645],{"class":618},[1307,38328,38329],{},"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":552,"searchDepth":553,"depth":554,"links":38331},[38332],{"id":35238,"depth":554,"text":35239},"Bakes shadows in the first frame for performance optimization.",{},{"title":321,"description":38333},"QK3DUMpIehZIpD5u6Zp41TLp1-R6Kjjc-USX_iID0V8",{"id":38338,"title":325,"body":38339,"description":38745,"extension":567,"links":568,"meta":38746,"navigation":570,"path":326,"seo":38747,"stem":327,"__hash__":38748},"docs/2.api/7.light-shadow/circle-shadow.md",{"type":477,"value":38340,"toc":38741},[38341,38346,38355,38357,38645,38647,38649,38739],[584,38342,38343],{},[38344,38345],"light-shadow-circle-shadow",{},[590,38347,38348,38351,38352,1126],{},[594,38349,38350],{},"\u003CCircleShadow />"," is a cheap, texture-based radial gradient on a ",[594,38353,38354],{},"THREE.PlaneGeometry",[480,38356,15],{"id":600},[602,38358,38361],{"className":604,"code":38359,"highlights":38360,"language":609,"meta":552,"style":552},"\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",[554,841],[594,38362,38363,38383,38409,38429,38437,38441,38449,38467,38475,38483,38505,38525,38533,38551,38559,38581,38589,38597,38629,38637],{"__ignoreMap":552},[613,38364,38365,38367,38369,38371,38373,38375,38377,38379,38381],{"class":615,"line":553},[613,38366,619],{"class":618},[613,38368,623],{"class":622},[613,38370,627],{"class":626},[613,38372,630],{"class":626},[613,38374,633],{"class":618},[613,38376,636],{"class":618},[613,38378,640],{"class":639},[613,38380,636],{"class":618},[613,38382,645],{"class":618},[613,38384,38386,38388,38390,38393,38395,38397,38399,38401,38403,38405,38407],{"class":38385,"line":554},[615,649],[613,38387,653],{"class":652},[613,38389,656],{"class":618},[613,38391,38392],{"class":659}," CircleShadow",[613,38394,663],{"class":618},[613,38396,666],{"class":659},[613,38398,669],{"class":618},[613,38400,672],{"class":652},[613,38402,8563],{"class":618},[613,38404,678],{"class":639},[613,38406,636],{"class":618},[613,38408,8570],{"class":618},[613,38410,38411,38413,38415,38417,38419,38421,38423,38425,38427],{"class":615,"line":684},[613,38412,653],{"class":652},[613,38414,656],{"class":618},[613,38416,691],{"class":659},[613,38418,669],{"class":618},[613,38420,672],{"class":652},[613,38422,8563],{"class":618},[613,38424,700],{"class":639},[613,38426,636],{"class":618},[613,38428,8570],{"class":618},[613,38430,38431,38433,38435],{"class":615,"line":705},[613,38432,708],{"class":618},[613,38434,623],{"class":622},[613,38436,645],{"class":618},[613,38438,38439],{"class":615,"line":715},[613,38440,718],{"emptyLinePlaceholder":570},[613,38442,38443,38445,38447],{"class":615,"line":721},[613,38444,619],{"class":618},[613,38446,726],{"class":622},[613,38448,645],{"class":618},[613,38450,38451,38453,38455,38457,38459,38461,38463,38465],{"class":615,"line":731},[613,38452,734],{"class":618},[613,38454,737],{"class":622},[613,38456,740],{"class":626},[613,38458,633],{"class":618},[613,38460,636],{"class":618},[613,38462,10263],{"class":639},[613,38464,636],{"class":618},[613,38466,645],{"class":618},[613,38468,38469,38471,38473],{"class":615,"line":754},[613,38470,757],{"class":618},[613,38472,760],{"class":622},[613,38474,763],{"class":618},[613,38476,38477,38479,38481],{"class":615,"line":766},[613,38478,757],{"class":618},[613,38480,771],{"class":622},[613,38482,763],{"class":618},[613,38484,38485,38487,38489,38491,38493,38495,38497,38499,38501,38503],{"class":615,"line":776},[613,38486,757],{"class":618},[613,38488,9150],{"class":622},[613,38490,789],{"class":618},[613,38492,1976],{"class":626},[613,38494,633],{"class":618},[613,38496,636],{"class":618},[613,38498,9324],{"class":618},[613,38500,1521],{"class":799},[613,38502,636],{"class":618},[613,38504,645],{"class":618},[613,38506,38507,38509,38511,38513,38515,38517,38519,38521,38523],{"class":615,"line":781},[613,38508,833],{"class":618},[613,38510,836],{"class":622},[613,38512,789],{"class":618},[613,38514,1976],{"class":626},[613,38516,633],{"class":618},[613,38518,636],{"class":618},[613,38520,1901],{"class":799},[613,38522,636],{"class":618},[613,38524,645],{"class":618},[613,38526,38527,38529,38531],{"class":615,"line":807},[613,38528,844],{"class":618},[613,38530,847],{"class":622},[613,38532,763],{"class":618},[613,38534,38535,38537,38539,38541,38543,38545,38547,38549],{"class":615,"line":607},[613,38536,844],{"class":618},[613,38538,11943],{"class":622},[613,38540,2749],{"class":626},[613,38542,633],{"class":618},[613,38544,636],{"class":618},[613,38546,11952],{"class":639},[613,38548,636],{"class":618},[613,38550,763],{"class":618},[613,38552,38553,38555,38557],{"class":615,"line":830},[613,38554,865],{"class":618},[613,38556,836],{"class":622},[613,38558,645],{"class":618},[613,38560,38562,38564,38567,38569,38571,38573,38575,38577,38579],{"class":38561,"line":841},[615,649],[613,38563,833],{"class":618},[613,38565,38566],{"class":622},"CircleShadow",[613,38568,789],{"class":618},[613,38570,792],{"class":626},[613,38572,633],{"class":618},[613,38574,636],{"class":618},[613,38576,15083],{"class":799},[613,38578,636],{"class":618},[613,38580,763],{"class":618},[613,38582,38583,38585,38587],{"class":615,"line":852},[613,38584,875],{"class":618},[613,38586,9150],{"class":622},[613,38588,645],{"class":618},[613,38590,38591,38593,38595],{"class":615,"line":862},[613,38592,757],{"class":618},[613,38594,8758],{"class":622},[613,38596,763],{"class":618},[613,38598,38599,38601,38603,38605,38607,38609,38611,38613,38615,38617,38619,38621,38623,38625,38627],{"class":615,"line":608},[613,38600,757],{"class":618},[613,38602,8779],{"class":622},[613,38604,789],{"class":618},[613,38606,1467],{"class":626},[613,38608,633],{"class":618},[613,38610,636],{"class":618},[613,38612,1474],{"class":618},[613,38614,945],{"class":799},[613,38616,1479],{"class":618},[613,38618,800],{"class":799},[613,38620,1479],{"class":618},[613,38622,3876],{"class":799},[613,38624,1489],{"class":618},[613,38626,636],{"class":618},[613,38628,763],{"class":618},[613,38630,38631,38633,38635],{"class":615,"line":882},[613,38632,885],{"class":618},[613,38634,737],{"class":622},[613,38636,645],{"class":618},[613,38638,38639,38641,38643],{"class":615,"line":892},[613,38640,708],{"class":618},[613,38642,726],{"class":622},[613,38644,645],{"class":618},[480,38646,902],{"id":901},[590,38648,905],{},[907,38650,38651,38661],{},[910,38652,38653],{},[913,38654,38655,38657,38659],{},[916,38656,8362],{"align":977},[916,38658,921],{"align":977},[916,38660,924],{},[926,38662,38663,38679,38692,38712,38726],{},[913,38664,38665,38669,38675],{},[931,38666,38667],{"align":977},[594,38668,7772],{},[931,38670,38671,38672],{"align":977},"Color of the shadow as a ",[594,38673,38674],{},"Color | number | string",[931,38676,38677],{},[594,38678,10067],{},[913,38680,38681,38685,38688],{},[931,38682,38683],{"align":977},[594,38684,10084],{},[931,38686,38687],{"align":977},"Opacity of the shadow",[931,38689,38690],{},[594,38691,1521],{},[913,38693,38694,38699,38708],{},[931,38695,38696],{"align":977},[594,38697,38698],{},"offset",[931,38700,38701,38702,38704,38705,38707],{"align":977},"Placement of the first radial gradient color stop. ",[594,38703,12421],{}," is the center of the circle. ",[594,38706,12299],{}," is edge.",[931,38709,38710],{},[594,38711,945],{},[913,38713,38714,38719,38722],{},[931,38715,38716],{"align":977},[594,38717,38718],{},"fog",[931,38720,38721],{"align":977},"Whether the material is affected by fog",[931,38723,38724],{},[594,38725,951],{},[913,38727,38728,38732,38735],{},[931,38729,38730],{"align":977},[594,38731,9561],{},[931,38733,38734],{"align":977},"Whether rendering the material has any effect on the depth buffer",[931,38736,38737],{},[594,38738,951],{},[1307,38740,1656],{},{"title":552,"searchDepth":553,"depth":554,"links":38742},[38743,38744],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},"Cheap, texture-based radial gradient shadow on a plane geometry.",{},{"title":325,"description":38745},"jex1uKNCt29jCPBXUCSBNgtrQ_7FSemdGlLVzRCeKOs",{"id":38750,"title":329,"body":38751,"description":39239,"extension":567,"links":568,"meta":39240,"navigation":570,"path":330,"seo":39241,"stem":331,"__hash__":39242},"docs/2.api/7.light-shadow/contact-shadows.md",{"type":477,"value":38752,"toc":39235},[38753,38758,38774,38776,39047,39049,39233],[584,38754,38755],{},[38756,38757],"light-shadow-contact-shadow",{},[590,38759,38760,38763,38764,35741,38769,1126],{},[594,38761,38762],{},"\u003CContactShadows />"," is a \"fake\", non-lighting-based shadow component. It displays shadows on a single plane. The component is based on the ",[1120,38765,38768],{"href":38766,"rel":38767},"https://threejs.org/examples/webgl_shadow_contact.html",[1124],"Three.js contact shadows example",[1120,38770,38773],{"href":38771,"rel":38772},"https://twitter.com/mrdoob",[1124],"@mrdoob",[480,38775,15],{"id":600},[602,38777,38780],{"className":604,"code":38778,"highlights":38779,"language":609,"meta":552,"style":552},"\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",[554,607],[594,38781,38782,38802,38831,38849,38857,38861,38869,38887,38940,38960,38968,38976,38984,39031,39039],{"__ignoreMap":552},[613,38783,38784,38786,38788,38790,38792,38794,38796,38798,38800],{"class":615,"line":553},[613,38785,619],{"class":618},[613,38787,623],{"class":622},[613,38789,627],{"class":626},[613,38791,630],{"class":626},[613,38793,633],{"class":618},[613,38795,636],{"class":618},[613,38797,640],{"class":639},[613,38799,636],{"class":618},[613,38801,645],{"class":618},[613,38803,38805,38807,38809,38812,38814,38816,38818,38821,38823,38825,38827,38829],{"class":38804,"line":554},[615,649],[613,38806,653],{"class":652},[613,38808,656],{"class":618},[613,38810,38811],{"class":659}," ContactShadows",[613,38813,663],{"class":618},[613,38815,8580],{"class":659},[613,38817,663],{"class":618},[613,38819,38820],{"class":659}," TorusKnot",[613,38822,669],{"class":618},[613,38824,672],{"class":652},[613,38826,675],{"class":618},[613,38828,678],{"class":639},[613,38830,681],{"class":618},[613,38832,38833,38835,38837,38839,38841,38843,38845,38847],{"class":615,"line":684},[613,38834,653],{"class":652},[613,38836,656],{"class":618},[613,38838,691],{"class":659},[613,38840,669],{"class":618},[613,38842,672],{"class":652},[613,38844,675],{"class":618},[613,38846,700],{"class":639},[613,38848,681],{"class":618},[613,38850,38851,38853,38855],{"class":615,"line":705},[613,38852,708],{"class":618},[613,38854,623],{"class":622},[613,38856,645],{"class":618},[613,38858,38859],{"class":615,"line":715},[613,38860,718],{"emptyLinePlaceholder":570},[613,38862,38863,38865,38867],{"class":615,"line":721},[613,38864,619],{"class":618},[613,38866,726],{"class":622},[613,38868,645],{"class":618},[613,38870,38871,38873,38875,38877,38879,38881,38883,38885],{"class":615,"line":731},[613,38872,734],{"class":618},[613,38874,737],{"class":622},[613,38876,740],{"class":626},[613,38878,633],{"class":618},[613,38880,636],{"class":618},[613,38882,2756],{"class":639},[613,38884,636],{"class":618},[613,38886,645],{"class":618},[613,38888,38889,38891,38893,38895,38897,38899,38901,38903,38905,38907,38909,38911,38913,38915,38917,38919,38921,38923,38925,38927,38930,38932,38934,38936,38938],{"class":615,"line":754},[613,38890,757],{"class":618},[613,38892,8719],{"class":622},[613,38894,789],{"class":618},[613,38896,8724],{"class":626},[613,38898,633],{"class":618},[613,38900,636],{"class":618},[613,38902,800],{"class":799},[613,38904,636],{"class":618},[613,38906,789],{"class":618},[613,38908,8930],{"class":626},[613,38910,633],{"class":618},[613,38912,636],{"class":618},[613,38914,1474],{"class":618},[613,38916,945],{"class":799},[613,38918,1479],{"class":618},[613,38920,4096],{"class":799},[613,38922,1489],{"class":618},[613,38924,636],{"class":618},[613,38926,789],{"class":618},[613,38928,38929],{"class":626},"rotation-factor",[613,38931,633],{"class":618},[613,38933,636],{"class":618},[613,38935,24306],{"class":799},[613,38937,636],{"class":618},[613,38939,645],{"class":618},[613,38941,38942,38944,38946,38948,38950,38952,38954,38956,38958],{"class":615,"line":766},[613,38943,833],{"class":618},[613,38945,33788],{"class":622},[613,38947,789],{"class":618},[613,38949,792],{"class":626},[613,38951,633],{"class":618},[613,38953,636],{"class":618},[613,38955,26171],{"class":799},[613,38957,636],{"class":618},[613,38959,645],{"class":618},[613,38961,38962,38964,38966],{"class":615,"line":776},[613,38963,844],{"class":618},[613,38965,857],{"class":622},[613,38967,763],{"class":618},[613,38969,38970,38972,38974],{"class":615,"line":781},[613,38971,865],{"class":618},[613,38973,33788],{"class":622},[613,38975,645],{"class":618},[613,38977,38978,38980,38982],{"class":615,"line":807},[613,38979,875],{"class":618},[613,38981,8719],{"class":622},[613,38983,645],{"class":618},[613,38985,38987,38989,38992,38994,38996,38998,39000,39002,39004,39006,39008,39010,39012,39015,39017,39019,39021,39023,39025,39027,39029],{"class":38986,"line":607},[615,649],[613,38988,757],{"class":618},[613,38990,38991],{"class":622},"ContactShadows",[613,38993,789],{"class":618},[613,38995,1976],{"class":626},[613,38997,633],{"class":618},[613,38999,636],{"class":618},[613,39001,9324],{"class":618},[613,39003,1901],{"class":799},[613,39005,636],{"class":618},[613,39007,2749],{"class":626},[613,39009,633],{"class":618},[613,39011,636],{"class":618},[613,39013,39014],{"class":639},"#335",[613,39016,636],{"class":618},[613,39018,789],{"class":618},[613,39020,792],{"class":626},[613,39022,633],{"class":618},[613,39024,636],{"class":618},[613,39026,28617],{"class":799},[613,39028,636],{"class":618},[613,39030,763],{"class":618},[613,39032,39033,39035,39037],{"class":615,"line":830},[613,39034,885],{"class":618},[613,39036,737],{"class":622},[613,39038,645],{"class":618},[613,39040,39041,39043,39045],{"class":615,"line":841},[613,39042,708],{"class":618},[613,39044,726],{"class":622},[613,39046,645],{"class":618},[480,39048,902],{"id":901},[907,39050,39051,39061],{},[910,39052,39053],{},[913,39054,39055,39057,39059],{},[916,39056,918],{},[916,39058,921],{},[916,39060,924],{},[926,39062,39063,39076,39089,39103,39119,39133,39147,39161,39175,39189,39203,39220],{},[913,39064,39065,39069,39072],{},[931,39066,39067],{},[594,39068,10084],{},[931,39070,39071],{},"The opacity of the shadows.",[931,39073,39074],{},[594,39075,1901],{},[913,39077,39078,39082,39085],{},[931,39079,39080],{},[594,39081,20197],{},[931,39083,39084],{},"The blur of the shadows.",[931,39086,39087],{},[594,39088,1901],{},[913,39090,39091,39095,39098],{},[931,39092,39093],{},[594,39094,7772],{},[931,39096,39097],{},"The color of the shadows.",[931,39099,39100],{},[594,39101,39102],{},"'#000000'",[913,39104,39105,39110,39115],{},[931,39106,39107],{},[594,39108,39109],{},"tint",[931,39111,39112,39113,1126],{},"If provided, the color of the \"core\" of the shadows. \"Added\" to ",[594,39114,7772],{},[931,39116,39117],{},[594,39118,1159],{},[913,39120,39121,39125,39131],{},[931,39122,39123],{},[594,39124,792],{},[931,39126,39127,39128,1126],{},"The scale of the shadows/shadow plane. Can be a number or an array of two numbers ",[594,39129,39130],{},"[x, y]",[931,39132,1486],{},[913,39134,39135,39140,39143],{},[931,39136,39137],{},[594,39138,39139],{},"width",[931,39141,39142],{},"The width of the shadow plane.",[931,39144,39145],{},[594,39146,1901],{},[913,39148,39149,39154,39157],{},[931,39150,39151],{},[594,39152,39153],{},"height",[931,39155,39156],{},"The height of the shadow plane.",[931,39158,39159],{},[594,39160,1901],{},[913,39162,39163,39168,39171],{},[931,39164,39165],{},[594,39166,39167],{},"far",[931,39169,39170],{},"The distance of the orthographic shadow camera extends above the shadow plane.",[931,39172,39173],{},[594,39174,1486],{},[913,39176,39177,39182,39185],{},[931,39178,39179],{},[594,39180,39181],{},"smooth",[931,39183,39184],{},"Whether the shadows should be smoothed to reduce artifacts.",[931,39186,39187],{},[594,39188,941],{},[913,39190,39191,39195,39198],{},[931,39192,39193],{},[594,39194,27086],{},[931,39196,39197],{},"The resolution of the shadow textures.",[931,39199,39200],{},[594,39201,39202],{},"512",[913,39204,39205,39209,39215],{},[931,39206,39207],{},[594,39208,37525],{},[931,39210,39211,39212,39214],{},"For performance, optionally stop updating shadows after ",[594,39213,37525],{}," frames.",[931,39216,39217],{},[594,39218,39219],{},"Math.POSITIVE_INFINITY",[913,39221,39222,39226,39229],{},[931,39223,39224],{},[594,39225,9561],{},[931,39227,39228],{},"Whether the shadows should write to the depth buffer or not.",[931,39230,39231],{},[594,39232,951],{},[1307,39234,1656],{},{"title":552,"searchDepth":553,"depth":554,"links":39236},[39237,39238],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},"Fake, non-lighting-based shadow component for single plane shadows.",{},{"title":329,"description":39239},"TB1Ehaki9I6r1J_wGeA_UAl3knLim1b5GHqTm1K7PNY",{"id":39244,"title":333,"body":39245,"description":40755,"extension":567,"links":568,"meta":40756,"navigation":570,"path":334,"seo":40757,"stem":335,"__hash__":40758},"docs/2.api/7.light-shadow/lensflare.md",{"type":477,"value":39246,"toc":40739},[39247,39252,39263,39265,39398,39400,39525,39529,39535,39543,39549,39606,39610,39616,39630,39637,39641,39667,39684,39690,39695,39700,39707,39713,39805,39810,39814,39819,39832,39836,39844,39901,39911,39914,39933,39942,39949,39953,39956,39964,39976,39984,40010,40017,40050,40054,40057,40101,40115,40120,40123,40126,40149,40168,40173,40177,40180,40310,40315,40320,40508,40514,40520,40523,40526,40736],[584,39248,39249],{},[39250,39251],"light-shadow-lensflare",{},[590,39253,39254,39257,39258,1126],{},[594,39255,39256],{},"\u003CLensflare />"," wraps the ",[1120,39259,39262],{"href":39260,"rel":39261},"https://threejs.org/docs/#examples/en/objects/Lensflare",[1124],"Three.js Lensflare",[480,39264,15],{"id":600},[602,39266,39269],{"className":604,"code":39267,"highlights":39268,"language":609,"meta":552,"style":552},"\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",[684,766],[594,39270,39271,39291,39309,39329,39337,39341,39349,39357,39365,39374,39382,39390],{"__ignoreMap":552},[613,39272,39273,39275,39277,39279,39281,39283,39285,39287,39289],{"class":615,"line":553},[613,39274,619],{"class":618},[613,39276,623],{"class":622},[613,39278,627],{"class":626},[613,39280,630],{"class":626},[613,39282,633],{"class":618},[613,39284,636],{"class":618},[613,39286,640],{"class":639},[613,39288,636],{"class":618},[613,39290,645],{"class":618},[613,39292,39293,39295,39297,39299,39301,39303,39305,39307],{"class":615,"line":554},[613,39294,653],{"class":652},[613,39296,656],{"class":618},[613,39298,691],{"class":659},[613,39300,669],{"class":618},[613,39302,672],{"class":652},[613,39304,675],{"class":618},[613,39306,700],{"class":639},[613,39308,681],{"class":618},[613,39310,39312,39314,39316,39319,39321,39323,39325,39327],{"class":39311,"line":684},[615,649],[613,39313,653],{"class":652},[613,39315,656],{"class":618},[613,39317,39318],{"class":659}," Lensflare",[613,39320,669],{"class":618},[613,39322,672],{"class":652},[613,39324,675],{"class":618},[613,39326,678],{"class":639},[613,39328,681],{"class":618},[613,39330,39331,39333,39335],{"class":615,"line":705},[613,39332,708],{"class":618},[613,39334,623],{"class":622},[613,39336,645],{"class":618},[613,39338,39339],{"class":615,"line":715},[613,39340,718],{"emptyLinePlaceholder":570},[613,39342,39343,39345,39347],{"class":615,"line":721},[613,39344,619],{"class":618},[613,39346,726],{"class":622},[613,39348,645],{"class":618},[613,39350,39351,39353,39355],{"class":615,"line":731},[613,39352,734],{"class":618},[613,39354,737],{"class":622},[613,39356,645],{"class":618},[613,39358,39359,39361,39363],{"class":615,"line":754},[613,39360,757],{"class":618},[613,39362,9811],{"class":622},[613,39364,645],{"class":618},[613,39366,39368,39370,39372],{"class":39367,"line":766},[615,649],[613,39369,833],{"class":618},[613,39371,333],{"class":622},[613,39373,763],{"class":618},[613,39375,39376,39378,39380],{"class":615,"line":776},[613,39377,875],{"class":618},[613,39379,9811],{"class":622},[613,39381,645],{"class":618},[613,39383,39384,39386,39388],{"class":615,"line":781},[613,39385,885],{"class":618},[613,39387,737],{"class":622},[613,39389,645],{"class":618},[613,39391,39392,39394,39396],{"class":615,"line":807},[613,39393,708],{"class":618},[613,39395,726],{"class":622},[613,39397,645],{"class":618},[480,39399,902],{"id":901},[907,39401,39402,39412],{},[910,39403,39404],{},[913,39405,39406,39408,39410],{},[916,39407,8362],{"align":977},[916,39409,921],{"align":977},[916,39411,924],{"align":977},[926,39413,39414,39429,39444,39461,39477,39494,39509],{},[913,39415,39416,39420,39425],{},[931,39417,39418],{"align":977},[1681,39419,792],{},[931,39421,39422,39424],{"align":977},[594,39423,5565],{}," – multiplier for lensflare element sizes",[931,39426,39427],{"align":977},[594,39428,12299],{},[913,39430,39431,39435,39440],{},[931,39432,39433],{"align":977},[1681,39434,12159],{},[931,39436,39437,39439],{"align":977},[594,39438,5565],{}," – multiplier for element distances from flare center",[931,39441,39442],{"align":977},[594,39443,12299],{},[913,39445,39446,39451,39457],{},[931,39447,39448],{"align":977},[1681,39449,39450],{},"elements",[931,39452,39453,39456],{"align":977},[594,39454,39455],{},"Partial<LensflareElementProps>[]"," – array of lensflare element properties",[931,39458,39459],{"align":977},[594,39460,1159],{},[913,39462,39463,39468,39473],{},[931,39464,39465],{"align":977},[1681,39466,39467],{},"seed",[931,39469,39470,39472],{"align":977},[594,39471,5565],{}," – random seed for generating random seeded elements",[931,39474,39475],{"align":977},[594,39476,1159],{},[913,39478,39479,39484,39490],{},[931,39480,39481],{"align":977},[1681,39482,39483],{},"seedProps",[931,39485,39486,39489],{"align":977},[594,39487,39488],{},"SeedProps[]"," – specifications for generating random seeded elements",[931,39491,39492],{"align":977},[594,39493,1159],{},[913,39495,39496,39500,39505],{},[931,39497,39498],{"align":977},[1681,39499,7772],{},[931,39501,39502,39504],{"align":977},[594,39503,7787],{}," – default color of lensflare elements",[931,39506,39507],{"align":977},[594,39508,1159],{},[913,39510,39511,39515,39521],{},[931,39512,39513],{"align":977},[1681,39514,2777],{},[931,39516,39517,39520],{"align":977},[594,39518,39519],{},"Texture | string"," – default texture of lensflare elements",[931,39522,39523],{"align":977},[594,39524,1159],{},[480,39526,39527],{"id":39450},[594,39528,39450],{},[590,39530,39531,39532,39534],{},"You can specify individual lensflare element properties directly using the component's ",[594,39533,39450],{}," prop.",[590,39536,2843,39537,39539,39540,1126],{},[594,39538,39450],{}," prop expects an instance of ",[594,39541,39542],{},"(Partial\u003CLensflareElementProps>)[]",[590,39544,39545,39546,39548],{},"Every object in ",[594,39547,39450],{}," may have any (or none) of the following properties.",[907,39550,39551,39559],{},[910,39552,39553],{},[913,39554,39555,39557],{},[916,39556,8362],{"align":977},[916,39558,921],{"align":977},[926,39560,39561,39573,39584,39595],{},[913,39562,39563,39567],{},[931,39564,39565],{"align":977},[1681,39566,2777],{},[931,39568,39569,39572],{"align":977},[594,39570,39571],{},"string | Texture"," - an image URL or texture to use on the lensflare element",[913,39574,39575,39579],{},[931,39576,39577],{"align":977},[1681,39578,7772],{},[931,39580,39581,39583],{"align":977},[594,39582,7787],{}," - color of the lensflare element",[913,39585,39586,39590],{},[931,39587,39588],{"align":977},[1681,39589,12159],{},[931,39591,39592,39594],{"align":977},[594,39593,5565],{}," - distance of the lensflare element from the lensflare center",[913,39596,39597,39601],{},[931,39598,39599],{"align":977},[1681,39600,15436],{},[931,39602,39603,39605],{"align":977},[594,39604,5565],{}," - size of the lensflare element",[480,39607,39608],{"id":39467},[594,39609,39467],{},[590,39611,39612,39613,39615],{},"Adding a ",[594,39614,39467],{}," prop to a component enables seeded random element generation.",[590,39617,2843,39618,39620,39621,39626,39627,1126],{},[594,39619,39467],{}," prop is used as the \"seed\" in a ",[1120,39622,39625],{"href":39623,"rel":39624},"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 ",[594,39628,39629],{},"SeedProps",[2054,39631,39632],{},[590,39633,39634,39635,1126],{},"If you set a seed but not seedProps, the component will fall back to the default, built-in SeedProps",[613,39636],{},[4191,39638,39640],{"id":39639},"example","Example",[602,39642,39644],{"className":604,"code":39643,"language":609,"meta":552,"style":552},"\u003CLensflare :seed=\"seedRef\" />\n",[594,39645,39646],{"__ignoreMap":552},[613,39647,39648,39650,39652,39654,39656,39658,39660,39663,39665],{"class":615,"line":553},[613,39649,619],{"class":618},[613,39651,333],{"class":622},[613,39653,789],{"class":618},[613,39655,39467],{"class":626},[613,39657,633],{"class":618},[613,39659,636],{"class":618},[613,39661,39662],{"class":659},"seedRef",[613,39664,636],{"class":618},[613,39666,763],{"class":618},[590,39668,39669,39670,2298,39673,1479,39675,1479,39677,1479,39679,1479,39681,39683],{},"Below, the results of setting ",[594,39671,39672],{},"seedRef.value",[594,39674,945],{},[594,39676,1901],{},[594,39678,800],{},[594,39680,2705],{},[594,39682,3876],{},", respectively.",[590,39685,39686],{},[8508,39687],{"alt":39688,"src":39689},"Lensflare seeds 0-4","/cientos/lensflare_seeds.png",[480,39691,39693],{"id":39692},"seedprops",[594,39694,39483],{},[590,39696,39612,39697,39699],{},[594,39698,39483],{}," prop to the component enables seeded random element generation.",[590,39701,2843,39702,39539,39704,39706],{},[594,39703,39483],{},[594,39705,39488],{},". It specifies rules and acceptable values for creating random lensflare elements.",[590,39708,39709,39710,39712],{},"Every element in ",[594,39711,39483],{}," has this shape.",[907,39714,39715,39725],{},[910,39716,39717],{},[913,39718,39719,39721,39723],{},[916,39720,8362],{"align":977},[916,39722,921],{"align":977},[916,39724,32144],{},[926,39726,39727,39740,39753,39766,39779,39792],{},[913,39728,39729,39733,39738],{},[931,39730,39731],{"align":977},[1681,39732,2777],{},[931,39734,39735,39737],{"align":977},[594,39736,20518],{}," - array of 1 or more image URLs; a single texture will be selected per generated element",[931,39739,32163],{},[913,39741,39742,39746,39751],{},[931,39743,39744],{"align":977},[1681,39745,7772],{},[931,39747,39748,39750],{"align":977},[594,39749,28671],{}," - array of 1 or more colors; a single color will be selected per generated element",[931,39752,32163],{},[913,39754,39755,39759,39764],{},[931,39756,39757],{"align":977},[1681,39758,12159],{},[931,39760,39761,39763],{"align":977},[594,39762,27281],{}," - minimum and maximum allowable distance from the flare center",[931,39765,32163],{},[913,39767,39768,39772,39777],{},[931,39769,39770],{"align":977},[1681,39771,15436],{},[931,39773,39774,39776],{"align":977},[594,39775,27281],{}," - minimum and maximum allowable size",[931,39778,32163],{},[913,39780,39781,39785,39790],{},[931,39782,39783],{"align":977},[1681,39784,19789],{},[931,39786,39787,39789],{"align":977},[594,39788,27281],{}," - minimum and maximum allowable number of elements to generate",[931,39791,32163],{},[913,39793,39794,39798,39803],{},[931,39795,39796],{"align":977},[1681,39797,39467],{},[931,39799,39800,39802],{"align":977},[594,39801,5565],{}," - if set, when this entry is processed, the random number generator with a combination of the incoming seed and this seed",[931,39804,32197],{},[2054,39806,39807],{},[590,39808,39809],{},"If you set seedProps but not seed, the component will fall back to a default seed of 0.",[480,39811,39813],{"id":39812},"random-elements-and-non-random-properties","Random elements and non-random properties",[590,39815,39816,39818],{},[594,39817,39256],{}," 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.",[602,39820,39822],{"className":604,"code":39821,"language":609,"meta":552,"style":552},"\u003CLensflare />\n",[594,39823,39824],{"__ignoreMap":552},[613,39825,39826,39828,39830],{"class":615,"line":553},[613,39827,619],{"class":618},[613,39829,333],{"class":622},[613,39831,763],{"class":618},[4191,39833,39835],{"id":39834},"non-random-properties","Non-random properties",[590,39837,39838,39839,39534],{},"You can provide a list of lensflare element properties using the ",[1120,39840,39842],{"href":39841},"#elements",[594,39843,39450],{},[602,39845,39847],{"className":604,"code":39846,"language":609,"meta":552,"style":552},"\u003CLensflare :elements=\"[{ color: 'red' }, { color: 'yellow' }]\" />\n",[594,39848,39849],{"__ignoreMap":552},[613,39850,39851,39853,39855,39857,39859,39861,39863,39865,39868,39870,39872,39874,39876,39878,39881,39883,39885,39887,39889,39891,39893,39895,39897,39899],{"class":615,"line":553},[613,39852,619],{"class":618},[613,39854,333],{"class":622},[613,39856,789],{"class":618},[613,39858,39450],{"class":626},[613,39860,633],{"class":618},[613,39862,636],{"class":618},[613,39864,1474],{"class":659},[613,39866,39867],{"class":618},"{",[613,39869,2749],{"class":622},[613,39871,1198],{"class":618},[613,39873,675],{"class":618},[613,39875,34927],{"class":639},[613,39877,2488],{"class":618},[613,39879,39880],{"class":618}," },",[613,39882,656],{"class":618},[613,39884,2749],{"class":622},[613,39886,1198],{"class":618},[613,39888,675],{"class":618},[613,39890,35071],{"class":639},[613,39892,2488],{"class":618},[613,39894,669],{"class":618},[613,39896,1489],{"class":659},[613,39898,636],{"class":618},[613,39900,763],{"class":618},[590,39902,39903,39904,1479,39906,1479,39908,39910],{},"This will produce a lensflare with 2 elements. The first element will be red. The second will be yellow. The unspecified properties – ",[594,39905,12159],{},[594,39907,15436],{},[594,39909,2777],{}," – will be filled in by the built-in defaults in this case.",[590,39912,39913],{},"You can also provide default props which will overwrite random generated props.",[602,39915,39917],{"className":604,"code":39916,"language":609,"meta":552,"style":552},"\u003CLensflare color:\"red\" />\n",[594,39918,39919],{"__ignoreMap":552},[613,39920,39921,39923,39925,39928,39931],{"class":615,"line":553},[613,39922,619],{"class":618},[613,39924,333],{"class":622},[613,39926,39927],{"class":626}," color:",[613,39929,39930],{"class":659},"\"red\" ",[613,39932,3236],{"class":618},[590,39934,39935,39936,39938,39939,39941],{},"Since ",[594,39937,39450],{}," is not defined here, the component will generate random lensflare elements. The specified ",[594,39940,7772],{}," prop – \"red\" – will overwrite the color property of the generated lensflare elements.",[590,39943,1118,39944,39948],{},[1120,39945,39947],{"href":39946},"#precedence","precedence"," for details about how properties are filled in.",[4191,39950,39952],{"id":39951},"random-elements","Random elements",[590,39954,39955],{},"You can let the component generate random elements ...",[590,39957,39958,39959],{},"... by not adding an ",[1120,39960,39961,39963],{"href":39841},[594,39962,39450],{}," prop",[602,39965,39966],{"className":604,"code":39821,"language":609,"meta":552,"style":552},[594,39967,39968],{"__ignoreMap":552},[613,39969,39970,39972,39974],{"class":615,"line":553},[613,39971,619],{"class":618},[613,39973,333],{"class":622},[613,39975,763],{"class":618},[590,39977,39978,39979],{},"... by adding a ",[1120,39980,39982,39963],{"href":39981},"#seed",[594,39983,39467],{},[602,39985,39987],{"className":604,"code":39986,"language":609,"meta":552,"style":552},"\u003CLensflare :seed=\"7127\" />\n",[594,39988,39989],{"__ignoreMap":552},[613,39990,39991,39993,39995,39997,39999,40001,40003,40006,40008],{"class":615,"line":553},[613,39992,619],{"class":618},[613,39994,333],{"class":622},[613,39996,789],{"class":618},[613,39998,39467],{"class":626},[613,40000,633],{"class":618},[613,40002,636],{"class":618},[613,40004,40005],{"class":799},"7127",[613,40007,636],{"class":618},[613,40009,763],{"class":618},[590,40011,39978,40012],{},[1120,40013,40015,39963],{"href":40014},"#seedprops",[594,40016,39483],{},[602,40018,40020],{"className":604,"code":40019,"language":609,"meta":552,"style":552},"\u003CLensflare :seedProps=\"[{...}, {...}]\" />\n",[594,40021,40022],{"__ignoreMap":552},[613,40023,40024,40026,40028,40030,40032,40034,40036,40038,40041,40044,40046,40048],{"class":615,"line":553},[613,40025,619],{"class":618},[613,40027,333],{"class":622},[613,40029,789],{"class":618},[613,40031,39483],{"class":626},[613,40033,633],{"class":618},[613,40035,636],{"class":618},[613,40037,1474],{"class":659},[613,40039,40040],{"class":618},"{...},",[613,40042,40043],{"class":618}," {...}",[613,40045,1489],{"class":659},[613,40047,636],{"class":618},[613,40049,763],{"class":618},[4191,40051,40053],{"id":40052},"mixing-random-elements-and-non-random-properties","Mixing random elements and non-random properties",[590,40055,40056],{},"You can mix your own properties and random elements.",[602,40058,40060],{"className":604,"code":40059,"language":609,"meta":552,"style":552},"\u003CLensflare :elements=\"[{...}, {...}]\" :seed=\"8193\" />\n",[594,40061,40062],{"__ignoreMap":552},[613,40063,40064,40066,40068,40070,40072,40074,40076,40078,40080,40082,40084,40086,40088,40090,40092,40094,40097,40099],{"class":615,"line":553},[613,40065,619],{"class":618},[613,40067,333],{"class":622},[613,40069,789],{"class":618},[613,40071,39450],{"class":626},[613,40073,633],{"class":618},[613,40075,636],{"class":618},[613,40077,1474],{"class":659},[613,40079,40040],{"class":618},[613,40081,40043],{"class":618},[613,40083,1489],{"class":659},[613,40085,636],{"class":618},[613,40087,789],{"class":618},[613,40089,39467],{"class":626},[613,40091,633],{"class":618},[613,40093,636],{"class":618},[613,40095,40096],{"class":799},"8193",[613,40098,636],{"class":618},[613,40100,763],{"class":618},[590,40102,40103,40104,3132,40106,40108,40109,40111,40112,1126],{},"Here, both ",[594,40105,39450],{},[594,40107,39467],{}," are defined. The component will generate random elements and overwrite their properties with the contents of ",[594,40110,39450],{},", according to the ",[1120,40113,40114],{"href":39946},"order of precedence",[2054,40116,40117],{},[590,40118,40119],{},"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.",[4191,40121,40122],{"id":39947},"Precedence",[590,40124,40125],{},"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.",[12816,40127,40128,40132,40139,40146],{},[2264,40129,40130],{},[594,40131,39450],{},[2264,40133,40134,1479,40136,40138],{},[594,40135,7772],{},[594,40137,2777],{}," – default element properties",[2264,40140,40141,1479,40143,40145],{},[594,40142,39467],{},[594,40144,39483],{}," – generated random elements",[2264,40147,40148],{},"built-in default element properties",[2054,40150,40151],{},[590,40152,40153,3132,40155,40157,40158,40161,40162,40164,40165,40167],{},[594,40154,792],{},[594,40156,12159],{}," are applied as ",[1681,40159,40160],{},"multipliers"," at render time, not as default values. They proportionally adjust all element sizes and distances respectively, preserving the variation between elements. Use ",[594,40163,792],{}," to make the entire lensflare larger or smaller, and ",[594,40166,12159],{}," to spread or compress the scattered elements.",[2054,40169,40170],{},[590,40171,40172],{},"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.",[4191,40174,40176],{"id":40175},"precedence-example","Precedence example",[590,40178,40179],{},"Here's an example of precedence. Assume this is in our vue template.",[602,40181,40183],{"className":604,"code":40182,"language":609,"meta":552,"style":552},"\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",[594,40184,40185,40192,40205,40232,40257,40264,40280,40292,40306],{"__ignoreMap":552},[613,40186,40187,40189],{"class":615,"line":553},[613,40188,619],{"class":618},[613,40190,40191],{"class":622},"Lensflare\n",[613,40193,40194,40196,40198,40200,40202],{"class":615,"line":554},[613,40195,3205],{"class":618},[613,40197,39450],{"class":626},[613,40199,633],{"class":618},[613,40201,636],{"class":618},[613,40203,40204],{"class":659},"[\n",[613,40206,40207,40210,40212,40214,40216,40218,40220,40222,40224,40227,40229],{"class":615,"line":684},[613,40208,40209],{"class":618}," {",[613,40211,15436],{"class":622},[613,40213,1198],{"class":618},[613,40215,39202],{"class":799},[613,40217,663],{"class":618},[613,40219,18546],{"class":659},[613,40221,633],{"class":618},[613,40223,2488],{"class":618},[613,40225,40226],{"class":639},"http://example.net/circle.png",[613,40228,2488],{"class":618},[613,40230,40231],{"class":618},"},\n",[613,40233,40234,40236,40238,40240,40242,40244,40246,40248,40251,40253,40255],{"class":615,"line":705},[613,40235,40209],{"class":618},[613,40237,7772],{"class":622},[613,40239,1198],{"class":618},[613,40241,2488],{"class":618},[613,40243,35071],{"class":639},[613,40245,2488],{"class":618},[613,40247,663],{"class":618},[613,40249,40250],{"class":622}," distance",[613,40252,1198],{"class":618},[613,40254,1521],{"class":799},[613,40256,1305],{"class":618},[613,40258,40259,40262],{"class":615,"line":715},[613,40260,40261],{"class":659}," ]",[613,40263,3200],{"class":618},[613,40265,40266,40268,40270,40272,40274,40277],{"class":615,"line":721},[613,40267,3205],{"class":618},[613,40269,2777],{"class":626},[613,40271,633],{"class":618},[613,40273,636],{"class":618},[613,40275,40276],{"class":659},"http:",[613,40278,40279],{"class":1189},"//example.net/ring.png\"\n",[613,40281,40282,40284,40286,40288,40290],{"class":615,"line":731},[613,40283,5686],{"class":659},[613,40285,633],{"class":618},[613,40287,636],{"class":618},[613,40289,34927],{"class":626},[613,40291,3200],{"class":659},[613,40293,40294,40296,40298,40300,40302,40304],{"class":615,"line":754},[613,40295,3205],{"class":618},[613,40297,39467],{"class":626},[613,40299,633],{"class":618},[613,40301,636],{"class":618},[613,40303,1901],{"class":799},[613,40305,3200],{"class":618},[613,40307,40308],{"class":615,"line":766},[613,40309,3236],{"class":659},[590,40311,40312,40314],{},[594,40313,39467],{}," is defined, so the component will produce random elements.",[590,40316,40317,40318,1198],{},"Assume the random element generator produces this, based on ",[594,40319,39467],{},[602,40321,40325],{"className":40322,"code":40323,"language":40324,"meta":552,"style":552},"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",[594,40326,40327,40331,40335,40349,40360,40371,40387,40391,40395,40409,40419,40430,40444,40448,40452,40466,40476,40486,40500,40504],{"__ignoreMap":552},[613,40328,40329],{"class":615,"line":553},[613,40330,40204],{"class":659},[613,40332,40333],{"class":615,"line":554},[613,40334,2519],{"class":618},[613,40336,40337,40339,40341,40343,40345,40347],{"class":615,"line":684},[613,40338,22844],{"class":622},[613,40340,1198],{"class":618},[613,40342,675],{"class":618},[613,40344,2756],{"class":639},[613,40346,2488],{"class":618},[613,40348,2536],{"class":618},[613,40350,40351,40354,40356,40358],{"class":615,"line":705},[613,40352,40353],{"class":622}," distance",[613,40355,1198],{"class":618},[613,40357,2553],{"class":799},[613,40359,2536],{"class":618},[613,40361,40362,40364,40366,40369],{"class":615,"line":715},[613,40363,2590],{"class":622},[613,40365,1198],{"class":618},[613,40367,40368],{"class":799}," 1024",[613,40370,2536],{"class":618},[613,40372,40373,40376,40378,40380,40383,40385],{"class":615,"line":721},[613,40374,40375],{"class":622}," texture",[613,40377,1198],{"class":618},[613,40379,675],{"class":618},[613,40381,40382],{"class":639},"http://example.net/rays.png",[613,40384,2488],{"class":618},[613,40386,2536],{"class":618},[613,40388,40389],{"class":615,"line":731},[613,40390,2643],{"class":618},[613,40392,40393],{"class":615,"line":754},[613,40394,2519],{"class":618},[613,40396,40397,40399,40401,40403,40405,40407],{"class":615,"line":766},[613,40398,22844],{"class":622},[613,40400,1198],{"class":618},[613,40402,675],{"class":618},[613,40404,2756],{"class":639},[613,40406,2488],{"class":618},[613,40408,2536],{"class":618},[613,40410,40411,40413,40415,40417],{"class":615,"line":776},[613,40412,40353],{"class":622},[613,40414,1198],{"class":618},[613,40416,2607],{"class":799},[613,40418,2536],{"class":618},[613,40420,40421,40423,40425,40428],{"class":615,"line":781},[613,40422,2590],{"class":622},[613,40424,1198],{"class":618},[613,40426,40427],{"class":799}," 512",[613,40429,2536],{"class":618},[613,40431,40432,40434,40436,40438,40440,40442],{"class":615,"line":807},[613,40433,40375],{"class":622},[613,40435,1198],{"class":618},[613,40437,675],{"class":618},[613,40439,40226],{"class":639},[613,40441,2488],{"class":618},[613,40443,2536],{"class":618},[613,40445,40446],{"class":615,"line":607},[613,40447,2643],{"class":618},[613,40449,40450],{"class":615,"line":830},[613,40451,2519],{"class":618},[613,40453,40454,40456,40458,40460,40462,40464],{"class":615,"line":841},[613,40455,22844],{"class":622},[613,40457,1198],{"class":618},[613,40459,675],{"class":618},[613,40461,2756],{"class":639},[613,40463,2488],{"class":618},[613,40465,2536],{"class":618},[613,40467,40468,40470,40472,40474],{"class":615,"line":852},[613,40469,40353],{"class":622},[613,40471,1198],{"class":618},[613,40473,29726],{"class":799},[613,40475,2536],{"class":618},[613,40477,40478,40480,40482,40484],{"class":615,"line":862},[613,40479,2590],{"class":622},[613,40481,1198],{"class":618},[613,40483,40427],{"class":799},[613,40485,2536],{"class":618},[613,40487,40488,40490,40492,40494,40496,40498],{"class":615,"line":608},[613,40489,40375],{"class":622},[613,40491,1198],{"class":618},[613,40493,675],{"class":618},[613,40495,40226],{"class":639},[613,40497,2488],{"class":618},[613,40499,2536],{"class":618},[613,40501,40502],{"class":615,"line":882},[613,40503,2643],{"class":618},[613,40505,40506],{"class":615,"line":892},[613,40507,19234],{"class":659},[590,40509,40510,40511,40513],{},"When random elements are mixed with ",[594,40512,39450],{},", the final number of elements in the lensflare is determined by whichever is longer.",[590,40515,40516,40517,40519],{},"Here, ",[594,40518,39450],{}," contains 2 entries. The random element generator produced 3. So the resulting lensflare will have 3 elements.",[590,40521,40522],{},"Therefore, resulting lensflare will have 3 elements.",[590,40524,40525],{},"The resulting 3 lensflare elements will have the following properties, from the following sources:",[602,40527,40529],{"className":40322,"code":40528,"language":40324,"meta":552,"style":552},"[\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",[594,40530,40531,40535,40539,40556,40569,40581,40597,40601,40605,40622,40634,40646,40664,40668,40672,40688,40700,40712,40728,40732],{"__ignoreMap":552},[613,40532,40533],{"class":615,"line":553},[613,40534,40204],{"class":659},[613,40536,40537],{"class":615,"line":554},[613,40538,2519],{"class":618},[613,40540,40541,40543,40545,40547,40549,40551,40553],{"class":615,"line":684},[613,40542,22844],{"class":622},[613,40544,1198],{"class":618},[613,40546,675],{"class":618},[613,40548,35071],{"class":639},[613,40550,2488],{"class":618},[613,40552,663],{"class":618},[613,40554,40555],{"class":1189}," // from `elements`\n",[613,40557,40558,40560,40562,40564,40566],{"class":615,"line":705},[613,40559,40353],{"class":622},[613,40561,1198],{"class":618},[613,40563,2553],{"class":799},[613,40565,663],{"class":618},[613,40567,40568],{"class":1189}," // from random element generator\n",[613,40570,40571,40573,40575,40577,40579],{"class":615,"line":715},[613,40572,2590],{"class":622},[613,40574,1198],{"class":618},[613,40576,40427],{"class":799},[613,40578,663],{"class":618},[613,40580,40555],{"class":1189},[613,40582,40583,40585,40587,40589,40591,40593,40595],{"class":615,"line":721},[613,40584,40375],{"class":622},[613,40586,1198],{"class":618},[613,40588,675],{"class":618},[613,40590,40226],{"class":639},[613,40592,2488],{"class":618},[613,40594,663],{"class":618},[613,40596,40555],{"class":1189},[613,40598,40599],{"class":615,"line":731},[613,40600,2643],{"class":618},[613,40602,40603],{"class":615,"line":754},[613,40604,2519],{"class":618},[613,40606,40607,40609,40611,40613,40615,40617,40619],{"class":615,"line":766},[613,40608,22844],{"class":622},[613,40610,1198],{"class":618},[613,40612,675],{"class":618},[613,40614,34927],{"class":639},[613,40616,2488],{"class":618},[613,40618,663],{"class":618},[613,40620,40621],{"class":1189}," // from component prop `color`\n",[613,40623,40624,40626,40628,40630,40632],{"class":615,"line":776},[613,40625,40353],{"class":622},[613,40627,1198],{"class":618},[613,40629,2558],{"class":799},[613,40631,663],{"class":618},[613,40633,40555],{"class":1189},[613,40635,40636,40638,40640,40642,40644],{"class":615,"line":781},[613,40637,2590],{"class":622},[613,40639,1198],{"class":618},[613,40641,40427],{"class":799},[613,40643,663],{"class":618},[613,40645,40568],{"class":1189},[613,40647,40648,40650,40652,40654,40657,40659,40661],{"class":615,"line":807},[613,40649,40375],{"class":622},[613,40651,1198],{"class":618},[613,40653,675],{"class":618},[613,40655,40656],{"class":639},"http://example.net/ring.png",[613,40658,2488],{"class":618},[613,40660,663],{"class":618},[613,40662,40663],{"class":1189}," // from component prop `texture`\n",[613,40665,40666],{"class":615,"line":607},[613,40667,2643],{"class":618},[613,40669,40670],{"class":615,"line":830},[613,40671,2519],{"class":618},[613,40673,40674,40676,40678,40680,40682,40684,40686],{"class":615,"line":841},[613,40675,22844],{"class":622},[613,40677,1198],{"class":618},[613,40679,675],{"class":618},[613,40681,34927],{"class":639},[613,40683,2488],{"class":618},[613,40685,663],{"class":618},[613,40687,40621],{"class":1189},[613,40689,40690,40692,40694,40696,40698],{"class":615,"line":852},[613,40691,40353],{"class":622},[613,40693,1198],{"class":618},[613,40695,29726],{"class":799},[613,40697,663],{"class":618},[613,40699,40568],{"class":1189},[613,40701,40702,40704,40706,40708,40710],{"class":615,"line":862},[613,40703,2590],{"class":622},[613,40705,1198],{"class":618},[613,40707,40427],{"class":799},[613,40709,663],{"class":618},[613,40711,40568],{"class":1189},[613,40713,40714,40716,40718,40720,40722,40724,40726],{"class":615,"line":608},[613,40715,40375],{"class":622},[613,40717,1198],{"class":618},[613,40719,675],{"class":618},[613,40721,40656],{"class":639},[613,40723,2488],{"class":618},[613,40725,663],{"class":618},[613,40727,40663],{"class":1189},[613,40729,40730],{"class":615,"line":882},[613,40731,2643],{"class":618},[613,40733,40734],{"class":615,"line":892},[613,40735,19234],{"class":659},[1307,40737,40738],{},"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":552,"searchDepth":553,"depth":554,"links":40740},[40741,40742,40743,40744,40747,40748],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},{"id":39450,"depth":554,"text":39450},{"id":39467,"depth":554,"text":39467,"children":40745},[40746],{"id":39639,"depth":684,"text":39640},{"id":39692,"depth":554,"text":39483},{"id":39812,"depth":554,"text":39813,"children":40749},[40750,40751,40752,40753,40754],{"id":39834,"depth":684,"text":39835},{"id":39951,"depth":684,"text":39952},{"id":40052,"depth":684,"text":40053},{"id":39947,"depth":684,"text":40122},{"id":40175,"depth":684,"text":40176},"Wraps the Three.js Lensflare with seeded random element generation.",{},{"title":333,"description":40755},"IPTu6ltIJ84TUkEk77xCaQa3Z9Y35mfjfjyH23AjLG0",{"id":40760,"title":337,"body":40761,"description":41452,"extension":567,"links":568,"meta":41453,"navigation":570,"path":338,"seo":41454,"stem":339,"__hash__":41455},"docs/2.api/7.light-shadow/randomized-lights.md",{"type":477,"value":40762,"toc":41448},[40763,40768,40775,40783,40785,41283,41285,41446],[2343,40764,40765],{},[40766,40767],"light-shadow-randomized-lights",{},[590,40769,40770,40772,40773,1126],{},[594,40771,37682],{}," internally creates multiple lights and jiggles them. You would normally add it as a child of ",[594,40774,37162],{},[590,40776,40777,40778,1126],{},"It is based on this ",[1120,40779,40782],{"href":40780,"rel":40781},"http://drei.docs.pmnd.rs/staging/randomized-light",[1124],"Drei component",[480,40784,15],{"id":600},[602,40786,40789],{"className":604,"code":40787,"highlights":40788,"language":609,"meta":552,"style":552},"\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",[705,852,862,608,882,892,2671,2680,2714],[594,40790,40791,40811,40831,40837,40845,40852,40859,40866,40880,40888,40892,40900,40911,40943,40951,40999,41007,41023,41039,41054,41073,41089,41116,41132,41136,41144,41154,41162,41180,41188,41243,41251,41259,41267,41275],{"__ignoreMap":552},[613,40792,40793,40795,40797,40799,40801,40803,40805,40807,40809],{"class":615,"line":553},[613,40794,619],{"class":618},[613,40796,623],{"class":622},[613,40798,627],{"class":626},[613,40800,630],{"class":626},[613,40802,633],{"class":618},[613,40804,636],{"class":618},[613,40806,640],{"class":639},[613,40808,636],{"class":618},[613,40810,645],{"class":618},[613,40812,40813,40815,40817,40819,40821,40823,40825,40827,40829],{"class":615,"line":554},[613,40814,653],{"class":652},[613,40816,656],{"class":618},[613,40818,691],{"class":659},[613,40820,669],{"class":618},[613,40822,672],{"class":652},[613,40824,8563],{"class":618},[613,40826,700],{"class":639},[613,40828,636],{"class":618},[613,40830,8570],{"class":618},[613,40832,40833,40835],{"class":615,"line":684},[613,40834,653],{"class":652},[613,40836,1184],{"class":618},[613,40838,40840,40843],{"class":40839,"line":705},[615,649],[613,40841,40842],{"class":659}," RandomizedLights",[613,40844,2536],{"class":618},[613,40846,40847,40850],{"class":615,"line":715},[613,40848,40849],{"class":659}," AccumulativeShadows",[613,40851,2536],{"class":618},[613,40853,40854,40857],{"class":615,"line":721},[613,40855,40856],{"class":659}," OrbitControls",[613,40858,2536],{"class":618},[613,40860,40861,40864],{"class":615,"line":731},[613,40862,40863],{"class":659}," Plane",[613,40865,2536],{"class":618},[613,40867,40868,40870,40872,40874,40876,40878],{"class":615,"line":754},[613,40869,2476],{"class":618},[613,40871,672],{"class":652},[613,40873,8563],{"class":618},[613,40875,678],{"class":639},[613,40877,636],{"class":618},[613,40879,8570],{"class":618},[613,40881,40882,40884,40886],{"class":615,"line":766},[613,40883,708],{"class":618},[613,40885,623],{"class":622},[613,40887,645],{"class":618},[613,40889,40890],{"class":615,"line":776},[613,40891,718],{"emptyLinePlaceholder":570},[613,40893,40894,40896,40898],{"class":615,"line":781},[613,40895,619],{"class":618},[613,40897,726],{"class":622},[613,40899,645],{"class":618},[613,40901,40902,40904,40906,40909],{"class":615,"line":807},[613,40903,734],{"class":618},[613,40905,737],{"class":622},[613,40907,40908],{"class":626}," shadows",[613,40910,645],{"class":618},[613,40912,40913,40915,40917,40919,40921,40923,40925,40927,40929,40931,40933,40935,40937,40939,40941],{"class":615,"line":607},[613,40914,757],{"class":618},[613,40916,760],{"class":622},[613,40918,789],{"class":618},[613,40920,1467],{"class":626},[613,40922,633],{"class":618},[613,40924,636],{"class":618},[613,40926,1474],{"class":618},[613,40928,945],{"class":799},[613,40930,1479],{"class":618},[613,40932,2705],{"class":799},[613,40934,1479],{"class":618},[613,40936,7668],{"class":799},[613,40938,1489],{"class":618},[613,40940,636],{"class":618},[613,40942,763],{"class":618},[613,40944,40945,40947,40949],{"class":615,"line":830},[613,40946,757],{"class":618},[613,40948,771],{"class":622},[613,40950,763],{"class":618},[613,40952,40953,40955,40958,40960,40962,40964,40966,40968,40970,40972,40974,40976,40978,40980,40983,40985,40987,40989,40991,40993,40995,40997],{"class":615,"line":841},[613,40954,757],{"class":618},[613,40956,40957],{"class":622},"AccumulativeShadows",[613,40959,789],{"class":618},[613,40961,37411],{"class":626},[613,40963,633],{"class":618},[613,40965,636],{"class":618},[613,40967,11242],{"class":799},[613,40969,636],{"class":618},[613,40971,2749],{"class":626},[613,40973,633],{"class":618},[613,40975,636],{"class":618},[613,40977,9281],{"class":639},[613,40979,636],{"class":618},[613,40981,40982],{"class":626}," once",[613,40984,789],{"class":618},[613,40986,1976],{"class":626},[613,40988,633],{"class":618},[613,40990,636],{"class":618},[613,40992,9324],{"class":618},[613,40994,1901],{"class":799},[613,40996,636],{"class":618},[613,40998,645],{"class":618},[613,41000,41002,41004],{"class":41001,"line":852},[615,649],[613,41003,833],{"class":618},[613,41005,41006],{"class":622},"RandomizedLights\n",[613,41008,41010,41012,41015,41017,41019,41021],{"class":41009,"line":862},[615,649],[613,41011,8243],{"class":618},[613,41013,41014],{"class":626},"ambient",[613,41016,633],{"class":618},[613,41018,636],{"class":618},[613,41020,12255],{"class":799},[613,41022,3200],{"class":618},[613,41024,41026,41028,41031,41033,41035,41037],{"class":41025,"line":608},[615,649],[613,41027,8243],{"class":618},[613,41029,41030],{"class":626},"bias",[613,41032,633],{"class":618},[613,41034,636],{"class":618},[613,41036,1530],{"class":799},[613,41038,3200],{"class":618},[613,41040,41042,41044,41046,41048,41050,41052],{"class":41041,"line":882},[615,649],[613,41043,8243],{"class":618},[613,41045,10323],{"class":626},[613,41047,633],{"class":618},[613,41049,636],{"class":618},[613,41051,20236],{"class":799},[613,41053,3200],{"class":618},[613,41055,41057,41059,41061,41063,41065,41067,41069,41071],{"class":41056,"line":892},[615,649],[613,41058,8243],{"class":618},[613,41060,1894],{"class":626},[613,41062,633],{"class":618},[613,41064,636],{"class":618},[613,41066,26743],{"class":659},[613,41068,1126],{"class":618},[613,41070,26748],{"class":659},[613,41072,3200],{"class":618},[613,41074,41076,41078,41081,41083,41085,41087],{"class":41075,"line":2671},[615,649],[613,41077,8243],{"class":618},[613,41079,41080],{"class":626},"map-size",[613,41082,633],{"class":618},[613,41084,636],{"class":618},[613,41086,37656],{"class":799},[613,41088,3200],{"class":618},[613,41090,41092,41094,41096,41098,41100,41102,41104,41106,41108,41110,41112,41114],{"class":41091,"line":2680},[615,649],[613,41093,8243],{"class":618},[613,41095,1467],{"class":626},[613,41097,633],{"class":618},[613,41099,636],{"class":618},[613,41101,1474],{"class":618},[613,41103,7668],{"class":799},[613,41105,1479],{"class":618},[613,41107,7668],{"class":799},[613,41109,8838],{"class":618},[613,41111,1486],{"class":799},[613,41113,1489],{"class":618},[613,41115,3200],{"class":618},[613,41117,41119,41121,41124,41126,41128,41130],{"class":41118,"line":2714},[615,649],[613,41120,8243],{"class":618},[613,41122,41123],{"class":626},"radius",[613,41125,633],{"class":618},[613,41127,636],{"class":618},[613,41129,800],{"class":799},[613,41131,3200],{"class":618},[613,41133,41134],{"class":615,"line":2723},[613,41135,8297],{"class":618},[613,41137,41138,41140,41142],{"class":615,"line":2732},[613,41139,875],{"class":618},[613,41141,40957],{"class":622},[613,41143,645],{"class":618},[613,41145,41146,41148,41150,41152],{"class":615,"line":2741},[613,41147,757],{"class":618},[613,41149,836],{"class":622},[613,41151,15062],{"class":626},[613,41153,645],{"class":618},[613,41155,41156,41158,41160],{"class":615,"line":2763},[613,41157,833],{"class":618},[613,41159,847],{"class":622},[613,41161,763],{"class":618},[613,41163,41164,41166,41168,41170,41172,41174,41176,41178],{"class":615,"line":2814},[613,41165,833],{"class":618},[613,41167,11943],{"class":622},[613,41169,2749],{"class":626},[613,41171,633],{"class":618},[613,41173,636],{"class":618},[613,41175,11952],{"class":639},[613,41177,636],{"class":618},[613,41179,763],{"class":618},[613,41181,41182,41184,41186],{"class":615,"line":2823},[613,41183,875],{"class":618},[613,41185,836],{"class":622},[613,41187,645],{"class":618},[613,41189,41190,41192,41194,41196,41198,41200,41202,41204,41206,41208,41210,41212,41214,41216,41218,41221,41223,41225,41227,41229,41231,41233,41235,41237,41239,41241],{"class":615,"line":2832},[613,41191,757],{"class":618},[613,41193,241],{"class":622},[613,41195,789],{"class":618},[613,41197,1467],{"class":626},[613,41199,633],{"class":618},[613,41201,636],{"class":618},[613,41203,1474],{"class":618},[613,41205,945],{"class":799},[613,41207,8838],{"class":618},[613,41209,800],{"class":799},[613,41211,1479],{"class":618},[613,41213,945],{"class":799},[613,41215,1489],{"class":618},[613,41217,636],{"class":618},[613,41219,41220],{"class":626}," receive-shadow",[613,41222,789],{"class":618},[613,41224,1997],{"class":626},[613,41226,633],{"class":618},[613,41228,636],{"class":618},[613,41230,1474],{"class":618},[613,41232,1486],{"class":799},[613,41234,1479],{"class":618},[613,41236,1486],{"class":799},[613,41238,1489],{"class":618},[613,41240,636],{"class":618},[613,41242,645],{"class":618},[613,41244,41245,41247,41249],{"class":615,"line":4034},[613,41246,833],{"class":618},[613,41248,2746],{"class":622},[613,41250,763],{"class":618},[613,41252,41253,41255,41257],{"class":615,"line":4078},[613,41254,875],{"class":618},[613,41256,241],{"class":622},[613,41258,645],{"class":618},[613,41260,41261,41263,41265],{"class":615,"line":4105},[613,41262,757],{"class":618},[613,41264,8758],{"class":622},[613,41266,763],{"class":618},[613,41268,41269,41271,41273],{"class":615,"line":4124},[613,41270,885],{"class":618},[613,41272,737],{"class":622},[613,41274,645],{"class":618},[613,41276,41277,41279,41281],{"class":615,"line":4165},[613,41278,708],{"class":618},[613,41280,726],{"class":622},[613,41282,645],{"class":618},[480,41284,902],{"id":901},[907,41286,41287,41297],{},[910,41288,41289],{},[913,41290,41291,41293,41295],{},[916,41292,918],{},[916,41294,921],{},[916,41296,924],{},[926,41298,41299,41312,41325,41338,41351,41364,41377,41391,41404,41418,41432],{},[913,41300,41301,41305,41308],{},[931,41302,41303],{},[594,41304,10323],{},[931,41306,41307],{},"Number of lights",[931,41309,41310],{},[594,41311,20236],{},[913,41313,41314,41318,41321],{},[931,41315,41316],{},[594,41317,41123],{},[931,41319,41320],{},"Radius of the jiggle, higher values make softer light",[931,41322,41323],{},[594,41324,1901],{},[913,41326,41327,41331,41334],{},[931,41328,41329],{},[594,41330,1894],{},[931,41332,41333],{},"Light intensity",[931,41335,41336],{},[594,41337,10136],{},[913,41339,41340,41344,41347],{},[931,41341,41342],{},[594,41343,41014],{},[931,41345,41346],{},"\"Ambient occlusion\" to directional light ratio, lower values mean less AO",[931,41348,41349],{},[594,41350,1521],{},[913,41352,41353,41357,41360],{},[931,41354,41355],{},[594,41356,17107],{},[931,41358,41359],{},"If the lights cast shadows",[931,41361,41362],{},[594,41363,941],{},[913,41365,41366,41370,41373],{},[931,41367,41368],{},[594,41369,41030],{},[931,41371,41372],{},"Default shadow bias",[931,41374,41375],{},[594,41376,945],{},[913,41378,41379,41384,41387],{},[931,41380,41381],{},[594,41382,41383],{},"mapSize",[931,41385,41386],{},"Size of the lights' shadow map",[931,41388,41389],{},[594,41390,39202],{},[913,41392,41393,41397,41400],{},[931,41394,41395],{},[594,41396,15436],{},[931,41398,41399],{},"Size of the lights' shadow camera frustum",[931,41401,41402],{},[594,41403,1486],{},[913,41405,41406,41411,41414],{},[931,41407,41408],{},[594,41409,41410],{},"near",[931,41412,41413],{},"Lights' shadow camera near value",[931,41415,41416],{},[594,41417,1521],{},[913,41419,41420,41424,41427],{},[931,41421,41422],{},[594,41423,39167],{},[931,41425,41426],{},"Lights' shadow camera far value",[931,41428,41429],{},[594,41430,41431],{},"500",[913,41433,41434,41438,41441],{},[931,41435,41436],{},[594,41437,1467],{},[931,41439,41440],{},"Position",[931,41442,41443],{},[594,41444,41445],{},"[5, 5, -10]",[1307,41447,1656],{},{"title":552,"searchDepth":553,"depth":554,"links":41449},[41450,41451],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},"Creates multiple lights and jiggles them for softer shadows.",{},{"title":337,"description":41452},"baGOsq_IYKuFBxflpLvSmGExVBUODXQrO5EKfecXWks",{"id":41457,"title":341,"body":41458,"description":41907,"extension":567,"links":568,"meta":41908,"navigation":570,"path":342,"seo":41909,"stem":343,"__hash__":41910},"docs/2.api/7.light-shadow/soft-shadows.md",{"type":477,"value":41459,"toc":41903},[41460,41465,41468,41470,41849,41851,41901],[584,41461,41462],{},[41463,41464],"light-shadow-soft-shadows",{},[590,41466,41467],{},"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.",[480,41469,15],{"id":600},[602,41471,41474],{"className":604,"code":41472,"highlights":41473,"language":609,"meta":552,"style":552},"\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",[554,608],[594,41475,41476,41496,41531,41551,41559,41563,41571,41591,41643,41665,41683,41691,41699,41753,41761,41769,41803,41823,41833,41841],{"__ignoreMap":552},[613,41477,41478,41480,41482,41484,41486,41488,41490,41492,41494],{"class":615,"line":553},[613,41479,619],{"class":618},[613,41481,623],{"class":622},[613,41483,627],{"class":626},[613,41485,630],{"class":626},[613,41487,633],{"class":618},[613,41489,636],{"class":618},[613,41491,640],{"class":639},[613,41493,636],{"class":618},[613,41495,645],{"class":618},[613,41497,41499,41501,41503,41506,41508,41510,41512,41514,41516,41519,41521,41523,41525,41527,41529],{"class":41498,"line":554},[615,649],[613,41500,653],{"class":652},[613,41502,656],{"class":618},[613,41504,41505],{"class":659}," SoftShadows",[613,41507,663],{"class":618},[613,41509,8580],{"class":659},[613,41511,663],{"class":618},[613,41513,38820],{"class":659},[613,41515,663],{"class":618},[613,41517,41518],{"class":659}," Plane",[613,41520,669],{"class":618},[613,41522,672],{"class":652},[613,41524,8563],{"class":618},[613,41526,678],{"class":639},[613,41528,636],{"class":618},[613,41530,8570],{"class":618},[613,41532,41533,41535,41537,41539,41541,41543,41545,41547,41549],{"class":615,"line":684},[613,41534,653],{"class":652},[613,41536,656],{"class":618},[613,41538,691],{"class":659},[613,41540,669],{"class":618},[613,41542,672],{"class":652},[613,41544,8563],{"class":618},[613,41546,700],{"class":639},[613,41548,636],{"class":618},[613,41550,8570],{"class":618},[613,41552,41553,41555,41557],{"class":615,"line":705},[613,41554,708],{"class":618},[613,41556,623],{"class":622},[613,41558,645],{"class":618},[613,41560,41561],{"class":615,"line":715},[613,41562,718],{"emptyLinePlaceholder":570},[613,41564,41565,41567,41569],{"class":615,"line":721},[613,41566,619],{"class":618},[613,41568,726],{"class":622},[613,41570,645],{"class":618},[613,41572,41573,41575,41577,41579,41581,41583,41585,41587,41589],{"class":615,"line":731},[613,41574,734],{"class":618},[613,41576,737],{"class":622},[613,41578,40908],{"class":626},[613,41580,740],{"class":626},[613,41582,633],{"class":618},[613,41584,636],{"class":618},[613,41586,10263],{"class":639},[613,41588,636],{"class":618},[613,41590,645],{"class":618},[613,41592,41593,41595,41597,41599,41601,41603,41605,41607,41609,41611,41613,41615,41617,41619,41621,41623,41625,41627,41629,41631,41633,41635,41637,41639,41641],{"class":615,"line":754},[613,41594,757],{"class":618},[613,41596,8719],{"class":622},[613,41598,789],{"class":618},[613,41600,8724],{"class":626},[613,41602,633],{"class":618},[613,41604,636],{"class":618},[613,41606,3876],{"class":799},[613,41608,636],{"class":618},[613,41610,789],{"class":618},[613,41612,8930],{"class":626},[613,41614,633],{"class":618},[613,41616,636],{"class":618},[613,41618,1474],{"class":618},[613,41620,945],{"class":799},[613,41622,1479],{"class":618},[613,41624,4096],{"class":799},[613,41626,1489],{"class":618},[613,41628,636],{"class":618},[613,41630,789],{"class":618},[613,41632,38929],{"class":626},[613,41634,633],{"class":618},[613,41636,636],{"class":618},[613,41638,24306],{"class":799},[613,41640,636],{"class":618},[613,41642,645],{"class":618},[613,41644,41645,41647,41649,41651,41653,41655,41657,41659,41661,41663],{"class":615,"line":766},[613,41646,833],{"class":618},[613,41648,33788],{"class":622},[613,41650,15062],{"class":626},[613,41652,789],{"class":618},[613,41654,792],{"class":626},[613,41656,633],{"class":618},[613,41658,636],{"class":618},[613,41660,26171],{"class":799},[613,41662,636],{"class":618},[613,41664,645],{"class":618},[613,41666,41667,41669,41671,41673,41675,41677,41679,41681],{"class":615,"line":776},[613,41668,844],{"class":618},[613,41670,2746],{"class":622},[613,41672,2749],{"class":626},[613,41674,633],{"class":618},[613,41676,636],{"class":618},[613,41678,11952],{"class":639},[613,41680,636],{"class":618},[613,41682,763],{"class":618},[613,41684,41685,41687,41689],{"class":615,"line":781},[613,41686,865],{"class":618},[613,41688,33788],{"class":622},[613,41690,645],{"class":618},[613,41692,41693,41695,41697],{"class":615,"line":807},[613,41694,875],{"class":618},[613,41696,8719],{"class":622},[613,41698,645],{"class":618},[613,41700,41701,41703,41705,41707,41709,41711,41713,41715,41717,41719,41721,41723,41725,41727,41729,41731,41733,41735,41737,41739,41741,41743,41745,41747,41749,41751],{"class":615,"line":607},[613,41702,757],{"class":618},[613,41704,241],{"class":622},[613,41706,789],{"class":618},[613,41708,1467],{"class":626},[613,41710,633],{"class":618},[613,41712,636],{"class":618},[613,41714,1474],{"class":618},[613,41716,945],{"class":799},[613,41718,8838],{"class":618},[613,41720,800],{"class":799},[613,41722,1479],{"class":618},[613,41724,945],{"class":799},[613,41726,1489],{"class":618},[613,41728,636],{"class":618},[613,41730,41220],{"class":626},[613,41732,789],{"class":618},[613,41734,1997],{"class":626},[613,41736,633],{"class":618},[613,41738,636],{"class":618},[613,41740,1474],{"class":618},[613,41742,1486],{"class":799},[613,41744,1479],{"class":618},[613,41746,1486],{"class":799},[613,41748,1489],{"class":618},[613,41750,636],{"class":618},[613,41752,645],{"class":618},[613,41754,41755,41757,41759],{"class":615,"line":830},[613,41756,833],{"class":618},[613,41758,2746],{"class":622},[613,41760,763],{"class":618},[613,41762,41763,41765,41767],{"class":615,"line":841},[613,41764,875],{"class":618},[613,41766,241],{"class":622},[613,41768,645],{"class":618},[613,41770,41771,41773,41775,41777,41779,41781,41783,41785,41787,41789,41791,41793,41795,41797,41799,41801],{"class":615,"line":852},[613,41772,757],{"class":618},[613,41774,8779],{"class":622},[613,41776,15062],{"class":626},[613,41778,789],{"class":618},[613,41780,1467],{"class":626},[613,41782,633],{"class":618},[613,41784,636],{"class":618},[613,41786,1474],{"class":618},[613,41788,945],{"class":799},[613,41790,1479],{"class":618},[613,41792,2705],{"class":799},[613,41794,1479],{"class":618},[613,41796,945],{"class":799},[613,41798,1489],{"class":618},[613,41800,636],{"class":618},[613,41802,763],{"class":618},[613,41804,41805,41807,41809,41811,41813,41815,41817,41819,41821],{"class":615,"line":862},[613,41806,757],{"class":618},[613,41808,8758],{"class":622},[613,41810,789],{"class":618},[613,41812,1894],{"class":626},[613,41814,633],{"class":618},[613,41816,636],{"class":618},[613,41818,1521],{"class":799},[613,41820,636],{"class":618},[613,41822,763],{"class":618},[613,41824,41826,41828,41831],{"class":41825,"line":608},[615,649],[613,41827,757],{"class":618},[613,41829,41830],{"class":622},"SoftShadows",[613,41832,763],{"class":618},[613,41834,41835,41837,41839],{"class":615,"line":882},[613,41836,885],{"class":618},[613,41838,737],{"class":622},[613,41840,645],{"class":618},[613,41842,41843,41845,41847],{"class":615,"line":892},[613,41844,708],{"class":618},[613,41846,726],{"class":622},[613,41848,645],{"class":618},[480,41850,902],{"id":901},[907,41852,41853,41863],{},[910,41854,41855],{},[913,41856,41857,41859,41861],{},[916,41858,8362],{"align":977},[916,41860,921],{"align":977},[916,41862,924],{},[926,41864,41865,41876,41888],{},[913,41866,41867,41869,41872],{},[931,41868,15436],{"align":977},[931,41870,41871],{"align":977},"Size of the light source (the larger the softer the light)",[931,41873,41874],{},[594,41875,30203],{},[913,41877,41878,41881,41884],{},[931,41879,41880],{"align":977},"samples",[931,41882,41883],{"align":977},"Number of samples (more samples less noise but more expensive)",[931,41885,41886],{},[594,41887,1486],{},[913,41889,41890,41893,41896],{},[931,41891,41892],{"align":977},"focus",[931,41894,41895],{"align":977},"Depth focus, use it to shift the focal point (where the shadow is the sharpest)",[931,41897,41898,41900],{},[594,41899,945],{}," (the beginning)",[1307,41902,1656],{},{"title":552,"searchDepth":553,"depth":554,"links":41904},[41905,41906],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},"Injects percent closer soft shadows (PCSS) into THREE's shader chunk.",{},{"title":341,"description":41907},"Jcog66jVOp0ZbwScDyRmLoOj7ZJPGe-FsPG7UiW8n8I",[41912,43102,43693,43988,44342,44952,45998,46413,46824,48731,49424],{"id":41913,"title":351,"body":41914,"description":43098,"extension":567,"links":568,"meta":43099,"navigation":570,"path":352,"seo":43100,"stem":353,"__hash__":43101},"docs/2.api/8.staging/1.environment.md",{"type":477,"value":41915,"toc":43085},[41916,41921,41931,41937,41939,42156,42163,42189,42194,42198,42205,42403,42407,42413,42437,42441,42459,42495,42508,42522,42538,42572,42576,42579,42707,42711,42717,42823,42828,42839,42841,43073,43076,43082],[584,41917,41918],{},[41919,41920],"staging-environment",{},[590,41922,41923,41924,41927,41928,1126],{},"Is a component abstraction that automatically sets up a global cubemap, which affects the default ",[594,41925,41926],{},"scene.environment",", and optionally ",[594,41929,41930],{},"scene.background",[590,41932,41933,41934,41936],{},"It uses the composable ",[1120,41935,355],{"href":356}," under the hood to load the cubemap.",[480,41938,15],{"id":600},[602,41940,41942],{"className":604,"code":41941,"language":609,"meta":552,"style":552},"\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",[594,41943,41944,41964,41982,42000,42008,42012,42020,42028,42036,42042,42054,42066,42077,42088,42099,42110,42121,42128,42132,42140,42148],{"__ignoreMap":552},[613,41945,41946,41948,41950,41952,41954,41956,41958,41960,41962],{"class":615,"line":553},[613,41947,619],{"class":618},[613,41949,623],{"class":622},[613,41951,627],{"class":626},[613,41953,630],{"class":626},[613,41955,633],{"class":618},[613,41957,636],{"class":618},[613,41959,640],{"class":639},[613,41961,636],{"class":618},[613,41963,645],{"class":618},[613,41965,41966,41968,41970,41972,41974,41976,41978,41980],{"class":615,"line":554},[613,41967,653],{"class":652},[613,41969,656],{"class":618},[613,41971,691],{"class":659},[613,41973,669],{"class":618},[613,41975,672],{"class":652},[613,41977,675],{"class":618},[613,41979,700],{"class":639},[613,41981,681],{"class":618},[613,41983,41984,41986,41988,41990,41992,41994,41996,41998],{"class":615,"line":684},[613,41985,653],{"class":652},[613,41987,656],{"class":618},[613,41989,19463],{"class":659},[613,41991,669],{"class":618},[613,41993,672],{"class":652},[613,41995,675],{"class":618},[613,41997,678],{"class":639},[613,41999,681],{"class":618},[613,42001,42002,42004,42006],{"class":615,"line":705},[613,42003,708],{"class":618},[613,42005,623],{"class":622},[613,42007,645],{"class":618},[613,42009,42010],{"class":615,"line":715},[613,42011,718],{"emptyLinePlaceholder":570},[613,42013,42014,42016,42018],{"class":615,"line":721},[613,42015,619],{"class":618},[613,42017,726],{"class":622},[613,42019,645],{"class":618},[613,42021,42022,42024,42026],{"class":615,"line":731},[613,42023,734],{"class":618},[613,42025,737],{"class":622},[613,42027,645],{"class":618},[613,42029,42030,42032,42034],{"class":615,"line":754},[613,42031,757],{"class":618},[613,42033,20168],{"class":622},[613,42035,645],{"class":618},[613,42037,42038,42040],{"class":615,"line":766},[613,42039,833],{"class":618},[613,42041,23982],{"class":622},[613,42043,42044,42046,42048,42050,42052],{"class":615,"line":776},[613,42045,8243],{"class":618},[613,42047,23994],{"class":626},[613,42049,633],{"class":618},[613,42051,636],{"class":618},[613,42053,40204],{"class":618},[613,42055,42056,42059,42062,42064],{"class":615,"line":781},[613,42057,42058],{"class":618}," '",[613,42060,42061],{"class":639},"/px.jpg",[613,42063,2488],{"class":618},[613,42065,2536],{"class":618},[613,42067,42068,42070,42073,42075],{"class":615,"line":807},[613,42069,42058],{"class":618},[613,42071,42072],{"class":639},"/nx.jpg",[613,42074,2488],{"class":618},[613,42076,2536],{"class":618},[613,42078,42079,42081,42084,42086],{"class":615,"line":607},[613,42080,42058],{"class":618},[613,42082,42083],{"class":639},"/py.jpg",[613,42085,2488],{"class":618},[613,42087,2536],{"class":618},[613,42089,42090,42092,42095,42097],{"class":615,"line":830},[613,42091,42058],{"class":618},[613,42093,42094],{"class":639},"/ny.jpg",[613,42096,2488],{"class":618},[613,42098,2536],{"class":618},[613,42100,42101,42103,42106,42108],{"class":615,"line":841},[613,42102,42058],{"class":618},[613,42104,42105],{"class":639},"/pz.jpg",[613,42107,2488],{"class":618},[613,42109,2536],{"class":618},[613,42111,42112,42114,42117,42119],{"class":615,"line":852},[613,42113,42058],{"class":618},[613,42115,42116],{"class":639},"/nz.jpg",[613,42118,2488],{"class":618},[613,42120,2536],{"class":618},[613,42122,42123,42126],{"class":615,"line":862},[613,42124,42125],{"class":618}," ]",[613,42127,3200],{"class":618},[613,42129,42130],{"class":615,"line":608},[613,42131,8297],{"class":618},[613,42133,42134,42136,42138],{"class":615,"line":882},[613,42135,875],{"class":618},[613,42137,20168],{"class":622},[613,42139,645],{"class":618},[613,42141,42142,42144,42146],{"class":615,"line":892},[613,42143,885],{"class":618},[613,42145,737],{"class":622},[613,42147,645],{"class":618},[613,42149,42150,42152,42154],{"class":615,"line":2671},[613,42151,708],{"class":618},[613,42153,726],{"class":622},[613,42155,645],{"class":618},[590,42157,42158,42159,42162],{},"You can also pass the ",[594,42160,42161],{},".hdr"," file directly:",[602,42164,42166],{"className":604,"code":42165,"language":609,"meta":552,"style":552},"\u003CSuspense>\n \u003CEnvironment files=\"/sunset.hdr\" />\n\u003C/Suspense>\n",[594,42167,42168,42176,42181],{"__ignoreMap":552},[613,42169,42170,42172,42174],{"class":615,"line":553},[613,42171,619],{"class":618},[613,42173,20168],{"class":622},[613,42175,645],{"class":618},[613,42177,42178],{"class":615,"line":554},[613,42179,42180],{"class":659}," \u003CEnvironment files=\"/sunset.hdr\" />\n",[613,42182,42183,42185,42187],{"class":615,"line":684},[613,42184,708],{"class":618},[613,42186,20168],{"class":622},[613,42188,645],{"class":618},[590,42190,42191],{},[8508,42192],{"alt":351,"src":42193},"/cientos/envmaps.png",[480,42195,42197],{"id":42196},"texture-reference","Texture reference",[590,42199,16817,42200,1688,42202,39963],{},[594,42201,6104],{},[594,42203,42204],{},"\u003CEnvironment />",[602,42206,42209],{"className":604,"code":42207,"highlights":42208,"language":609,"meta":552,"style":552},"\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",[705,721,766,830,862],[594,42210,42211,42231,42249,42253,42267,42271,42287,42301,42307,42316,42320,42328,42347,42355,42364,42386,42394],{"__ignoreMap":552},[613,42212,42213,42215,42217,42219,42221,42223,42225,42227,42229],{"class":615,"line":553},[613,42214,619],{"class":618},[613,42216,623],{"class":622},[613,42218,627],{"class":626},[613,42220,630],{"class":626},[613,42222,633],{"class":618},[613,42224,636],{"class":618},[613,42226,640],{"class":639},[613,42228,636],{"class":618},[613,42230,645],{"class":618},[613,42232,42233,42235,42237,42239,42241,42243,42245,42247],{"class":615,"line":554},[613,42234,653],{"class":652},[613,42236,656],{"class":618},[613,42238,19463],{"class":659},[613,42240,669],{"class":618},[613,42242,672],{"class":652},[613,42244,675],{"class":618},[613,42246,678],{"class":639},[613,42248,681],{"class":618},[613,42250,42251],{"class":615,"line":684},[613,42252,718],{"emptyLinePlaceholder":570},[613,42254,42256,42258,42261,42263,42265],{"class":42255,"line":705},[615,649],[613,42257,2463],{"class":626},[613,42259,42260],{"class":659}," environmentRef ",[613,42262,633],{"class":618},[613,42264,3567],{"class":2482},[613,42266,6745],{"class":659},[613,42268,42269],{"class":615,"line":715},[613,42270,718],{"emptyLinePlaceholder":570},[613,42272,42274,42276,42279,42281,42283,42285],{"class":42273,"line":721},[615,649],[613,42275,10705],{"class":2482},[613,42277,42278],{"class":659},"(environmentRef",[613,42280,663],{"class":618},[613,42282,18546],{"class":7049},[613,42284,3746],{"class":626},[613,42286,1184],{"class":618},[613,42288,42289,42291,42293,42295,42297,42299],{"class":615,"line":731},[613,42290,7065],{"class":659},[613,42292,1126],{"class":618},[613,42294,7070],{"class":2482},[613,42296,2485],{"class":622},[613,42298,2777],{"class":659},[613,42300,2496],{"class":622},[613,42302,42303,42305],{"class":615,"line":754},[613,42304,2476],{"class":618},[613,42306,2496],{"class":659},[613,42308,42310,42312,42314],{"class":42309,"line":766},[615,649],[613,42311,708],{"class":618},[613,42313,623],{"class":622},[613,42315,645],{"class":618},[613,42317,42318],{"class":615,"line":776},[613,42319,718],{"emptyLinePlaceholder":570},[613,42321,42322,42324,42326],{"class":615,"line":781},[613,42323,619],{"class":618},[613,42325,726],{"class":622},[613,42327,645],{"class":618},[613,42329,42330,42332,42334,42336,42338,42340,42343,42345],{"class":615,"line":807},[613,42331,734],{"class":618},[613,42333,351],{"class":622},[613,42335,3975],{"class":626},[613,42337,633],{"class":618},[613,42339,636],{"class":618},[613,42341,42342],{"class":639},"environmentRef",[613,42344,636],{"class":618},[613,42346,763],{"class":618},[613,42348,42349,42351,42353],{"class":615,"line":607},[613,42350,734],{"class":618},[613,42352,836],{"class":622},[613,42354,645],{"class":618},[613,42356,42358,42360,42362],{"class":42357,"line":830},[615,649],[613,42359,757],{"class":618},[613,42361,4083],{"class":622},[613,42363,763],{"class":618},[613,42365,42366,42368,42370,42372,42375,42377,42379,42382,42384],{"class":615,"line":841},[613,42367,757],{"class":618},[613,42369,2746],{"class":622},[613,42371,789],{"class":618},[613,42373,42374],{"class":626},"env-map",[613,42376,633],{"class":618},[613,42378,636],{"class":618},[613,42380,42381],{"class":659},"envMap",[613,42383,636],{"class":618},[613,42385,763],{"class":618},[613,42387,42388,42390,42392],{"class":615,"line":852},[613,42389,885],{"class":618},[613,42391,836],{"class":622},[613,42393,645],{"class":618},[613,42395,42397,42399,42401],{"class":42396,"line":862},[615,649],[613,42398,708],{"class":618},[613,42400,726],{"class":622},[613,42402,645],{"class":618},[480,42404,42406],{"id":42405},"presets","Presets",[590,42408,42409,42410,2076],{},"You can use one of the available presets by passing the ",[594,42411,42412],{},"preset",[602,42414,42416],{"className":604,"code":42415,"language":609,"meta":552,"style":552},"\u003CEnvironment preset=\"city\" />\n",[594,42417,42418],{"__ignoreMap":552},[613,42419,42420,42422,42424,42426,42428,42430,42433,42435],{"class":615,"line":553},[613,42421,619],{"class":618},[613,42423,351],{"class":622},[613,42425,20180],{"class":626},[613,42427,633],{"class":618},[613,42429,636],{"class":618},[613,42431,42432],{"class":639},"city",[613,42434,636],{"class":618},[613,42436,763],{"class":618},[4191,42438,42440],{"id":42439},"preset-quality","Preset quality",[590,42442,42443,42444,42451,42452,42455,42456,2076],{},"Presets are served from the ",[1120,42445,42448],{"href":42446,"rel":42447},"https://github.com/Tresjs/assets/tree/main/textures/hdr",[1124],[594,42449,42450],{},"Tresjs/assets"," CDN at ",[1681,42453,42454],{},"1K"," by default. For higher-fidelity scenes — reflective materials, large backgrounds, hero shots — you can opt into a higher-resolution variant with the ",[594,42457,42458],{},"quality",[602,42460,42462],{"className":604,"code":42461,"language":609,"meta":552,"style":552},"\u003CEnvironment preset=\"sunset\" quality=\"4k\" />\n",[594,42463,42464],{"__ignoreMap":552},[613,42465,42466,42468,42470,42472,42474,42476,42479,42481,42484,42486,42488,42491,42493],{"class":615,"line":553},[613,42467,619],{"class":618},[613,42469,351],{"class":622},[613,42471,20180],{"class":626},[613,42473,633],{"class":618},[613,42475,636],{"class":618},[613,42477,42478],{"class":639},"sunset",[613,42480,636],{"class":618},[613,42482,42483],{"class":626}," quality",[613,42485,633],{"class":618},[613,42487,636],{"class":618},[613,42489,42490],{"class":639},"4k",[613,42492,636],{"class":618},[613,42494,763],{"class":618},[590,42496,42497,42498,42501,42502,1479,42505,1126],{},"Available tiers: ",[594,42499,42500],{},"'1k'"," (default), ",[594,42503,42504],{},"'2k'",[594,42506,42507],{},"'4k'",[23423,42509,42510],{},[590,42511,42512,42513,42516,42517,3405,42519,42521],{},"Higher tiers are significantly larger: ",[1681,42514,42515],{},"4K HDRs are ≈30–60MB"," versus ≈1–3MB at 1K. Use ",[594,42518,42504],{},[594,42520,42507],{}," only when you need the extra detail, and prefer lazy-loading for large backgrounds.",[590,42523,2843,42524,42526,42527,42529,42530,3405,42532,42534,42535,42537],{},[594,42525,42458],{}," prop only applies when ",[594,42528,42412],{}," is set — it is ignored when loading via ",[594,42531,23994],{},[594,42533,16546],{},". An unsupported value falls back to ",[594,42536,42500],{}," with a console warning.",[23423,42539,42540],{},[590,42541,42542,42551,42552,42555,42556,42559,42560,42562,42563,42565,42566,42568,42569,42571],{},[1681,42543,42544,42546,42547,42550],{},[594,42545,42458],{}," has no visible effect when you pass ",[1120,42548,42549],{"href":360},"Lightformers"," (or any children)."," With children present, ",[594,42553,42554],{},"\u003CEnvironment>"," bakes the environment and background into a ",[594,42557,42558],{},"WebGLCubeRenderTarget"," sized by the ",[594,42561,27086],{}," prop (default ",[594,42564,27094],{},"), so a high-res preset gets downsampled to that cube — the background will look pixelated regardless of ",[594,42567,42458],{},". For a sharp high-res background, either omit the children or raise ",[594,42570,27086],{}," (a cube big enough to match 4K is expensive to render each frame).",[480,42573,42575],{"id":42574},"environment-rotation","Environment Rotation",[590,42577,42578],{},"The environment component supports both background and environment rotation. You can control them independently or sync them together:",[602,42580,42582],{"className":604,"code":42581,"language":609,"meta":552,"style":552},"\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",[594,42583,42584,42592,42598,42611,42626,42661,42695,42699],{"__ignoreMap":552},[613,42585,42586,42588,42590],{"class":615,"line":553},[613,42587,619],{"class":618},[613,42589,726],{"class":622},[613,42591,645],{"class":618},[613,42593,42594,42596],{"class":615,"line":554},[613,42595,734],{"class":618},[613,42597,23982],{"class":622},[613,42599,42600,42603,42605,42607,42609],{"class":615,"line":684},[613,42601,42602],{"class":626}," preset",[613,42604,633],{"class":618},[613,42606,636],{"class":618},[613,42608,42478],{"class":639},[613,42610,3200],{"class":618},[613,42612,42613,42615,42618,42620,42622,42624],{"class":615,"line":705},[613,42614,5345],{"class":618},[613,42616,42617],{"class":626},"background",[613,42619,633],{"class":618},[613,42621,636],{"class":618},[613,42623,941],{"class":4536},[613,42625,3200],{"class":618},[613,42627,42628,42630,42633,42635,42637,42639,42641,42643,42645,42647,42649,42651,42653,42655,42657,42659],{"class":615,"line":715},[613,42629,5345],{"class":618},[613,42631,42632],{"class":626},"background-rotation",[613,42634,633],{"class":618},[613,42636,636],{"class":618},[613,42638,1474],{"class":618},[613,42640,945],{"class":799},[613,42642,1479],{"class":618},[613,42644,26743],{"class":659},[613,42646,1126],{"class":618},[613,42648,26748],{"class":659},[613,42650,3405],{"class":618},[613,42652,800],{"class":799},[613,42654,1479],{"class":618},[613,42656,945],{"class":799},[613,42658,1489],{"class":618},[613,42660,3200],{"class":618},[613,42662,42663,42665,42667,42669,42671,42673,42675,42677,42679,42681,42683,42685,42687,42689,42691,42693],{"class":615,"line":721},[613,42664,5345],{"class":618},[613,42666,42574],{"class":626},[613,42668,633],{"class":618},[613,42670,636],{"class":618},[613,42672,1474],{"class":618},[613,42674,945],{"class":799},[613,42676,1479],{"class":618},[613,42678,26743],{"class":659},[613,42680,1126],{"class":618},[613,42682,26748],{"class":659},[613,42684,3405],{"class":618},[613,42686,3876],{"class":799},[613,42688,1479],{"class":618},[613,42690,945],{"class":799},[613,42692,1489],{"class":618},[613,42694,3200],{"class":618},[613,42696,42697],{"class":615,"line":731},[613,42698,12671],{"class":618},[613,42700,42701,42703,42705],{"class":615,"line":754},[613,42702,708],{"class":618},[613,42704,726],{"class":622},[613,42706,645],{"class":618},[4191,42708,42710],{"id":42709},"syncing-rotations","Syncing Rotations",[590,42712,42713,42714,2076],{},"You can sync the environment rotation with the background rotation using the ",[594,42715,42716],{},"syncMaterials",[602,42718,42720],{"className":604,"code":42719,"language":609,"meta":552,"style":552},"\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",[594,42721,42722,42730,42736,42748,42762,42777,42811,42815],{"__ignoreMap":552},[613,42723,42724,42726,42728],{"class":615,"line":553},[613,42725,619],{"class":618},[613,42727,726],{"class":622},[613,42729,645],{"class":618},[613,42731,42732,42734],{"class":615,"line":554},[613,42733,734],{"class":618},[613,42735,23982],{"class":622},[613,42737,42738,42740,42742,42744,42746],{"class":615,"line":684},[613,42739,42602],{"class":626},[613,42741,633],{"class":618},[613,42743,636],{"class":618},[613,42745,42478],{"class":639},[613,42747,3200],{"class":618},[613,42749,42750,42752,42754,42756,42758,42760],{"class":615,"line":705},[613,42751,5345],{"class":618},[613,42753,42617],{"class":626},[613,42755,633],{"class":618},[613,42757,636],{"class":618},[613,42759,941],{"class":4536},[613,42761,3200],{"class":618},[613,42763,42764,42766,42769,42771,42773,42775],{"class":615,"line":715},[613,42765,5345],{"class":618},[613,42767,42768],{"class":626},"sync-materials",[613,42770,633],{"class":618},[613,42772,636],{"class":618},[613,42774,941],{"class":4536},[613,42776,3200],{"class":618},[613,42778,42779,42781,42783,42785,42787,42789,42791,42793,42795,42797,42799,42801,42803,42805,42807,42809],{"class":615,"line":721},[613,42780,5345],{"class":618},[613,42782,42632],{"class":626},[613,42784,633],{"class":618},[613,42786,636],{"class":618},[613,42788,1474],{"class":618},[613,42790,945],{"class":799},[613,42792,1479],{"class":618},[613,42794,26743],{"class":659},[613,42796,1126],{"class":618},[613,42798,26748],{"class":659},[613,42800,3405],{"class":618},[613,42802,800],{"class":799},[613,42804,1479],{"class":618},[613,42806,945],{"class":799},[613,42808,1489],{"class":618},[613,42810,3200],{"class":618},[613,42812,42813],{"class":615,"line":731},[613,42814,12671],{"class":618},[613,42816,42817,42819,42821],{"class":615,"line":754},[613,42818,708],{"class":618},[613,42820,726],{"class":622},[613,42822,645],{"class":618},[590,42824,4439,42825,42827],{},[594,42826,42716],{}," is enabled:",[2261,42829,42830,42833,42836],{},[2264,42831,42832],{},"The environment rotation will automatically match the background rotation",[2264,42834,42835],{},"All materials in the scene will update to reflect the new rotation",[2264,42837,42838],{},"This ensures visual consistency between the background and environment reflections",[480,42840,902],{"id":901},[907,42842,42843,42853],{},[910,42844,42845],{},[913,42846,42847,42849,42851],{},[916,42848,918],{"align":977},[916,42850,921],{"align":977},[916,42852,924],{},[926,42854,42855,42868,42881,42901,42916,42927,42940,42965,42976,42987,42998,43009,43021,43033,43048,43062],{},[913,42856,42857,42861,42864],{},[931,42858,42859],{"align":977},[594,42860,23994],{},[931,42862,42863],{"align":977},"Array of 6 urls to images, one for each side of the CubeTexture, or an HDR file",[931,42865,42866],{},[594,42867,1159],{},[913,42869,42870,42874,42877],{},[931,42871,42872],{"align":977},[594,42873,16546],{},[931,42875,42876],{"align":977},"Path to the environment map files",[931,42878,42879],{},[594,42880,1159],{},[913,42882,42883,42888,42891],{},[931,42884,42885],{"align":977},[594,42886,42887],{},"encoding",[931,42889,42890],{"align":977},"Encoding of the environment map",[931,42892,42893,42896,42897,42900],{},[594,42894,42895],{},"SRGBColorSpace"," for array files, ",[594,42898,42899],{},"LinearEncoding"," for single texture",[913,42902,42903,42907,42912],{},[931,42904,42905],{"align":977},[594,42906,42617],{},[931,42908,938,42909,42911],{"align":977},[594,42910,941],{},", the environment map will be used as the scene background",[931,42913,42914],{},[594,42915,951],{},[913,42917,42918,42922,42925],{},[931,42919,42920],{"align":977},[594,42921,20197],{},[931,42923,42924],{"align":977},"Blur factor between 0 and 1 (only works with three 0.146 and up)",[931,42926,945],{},[913,42928,42929,42933,42936],{},[931,42930,42931],{"align":977},[594,42932,42412],{},[931,42934,42935],{"align":977},"Preset environment map",[931,42937,42938],{},[594,42939,1159],{},[913,42941,42942,42946,42961],{},[931,42943,42944],{"align":977},[594,42945,42458],{},[931,42947,42948,42949,12715,42952,12715,42955,42957,42958,42960],{"align":977},"Resolution variant of the preset HDR (",[594,42950,42951],{},"1k",[594,42953,42954],{},"2k",[594,42956,42490],{},"). Only applies when ",[594,42959,42412],{}," is set",[931,42962,42963],{},[594,42964,42951],{},[913,42966,42967,42971,42974],{},[931,42968,42969],{"align":977},[594,42970,27086],{},[931,42972,42973],{"align":977},"The resolution of the WebGLCubeRenderTarget",[931,42975,27094],{},[913,42977,42978,42982,42985],{},[931,42979,42980],{"align":977},[594,42981,41410],{},[931,42983,42984],{"align":977},"The near of the CubeCamera",[931,42986,1901],{},[913,42988,42989,42993,42996],{},[931,42990,42991],{"align":977},[594,42992,39167],{},[931,42994,42995],{"align":977},"The far of the CubeCamera",[931,42997,10388],{},[913,42999,43000,43004,43007],{},[931,43001,43002],{"align":977},[594,43003,37525],{},[931,43005,43006],{"align":977},"The frames of the cubeCamera.update",[931,43008,12152],{},[913,43010,43011,43016,43019],{},[931,43012,43013],{"align":977},[594,43014,43015],{},"backgroundIntensity",[931,43017,43018],{"align":977},"Intensity of the background",[931,43020,1901],{},[913,43022,43023,43028,43031],{},[931,43024,43025],{"align":977},[594,43026,43027],{},"environmentIntensity",[931,43029,43030],{"align":977},"Intensity of the environment",[931,43032,1901],{},[913,43034,43035,43040,43043],{},[931,43036,43037],{"align":977},[594,43038,43039],{},"backgroundRotation",[931,43041,43042],{"align":977},"Rotation of the background (in radians)",[931,43044,43045],{},[613,43046,43047],{},"0, 0, 0",[913,43049,43050,43055,43058],{},[931,43051,43052],{"align":977},[594,43053,43054],{},"environmentRotation",[931,43056,43057],{"align":977},"Rotation of the environment (in radians)",[931,43059,43060],{},[613,43061,43047],{},[913,43063,43064,43068,43071],{},[931,43065,43066],{"align":977},[594,43067,42716],{},[931,43069,43070],{"align":977},"If true, environment rotation will sync with background rotation",[931,43072,951],{},[4191,43074,42406],{"id":43075},"presets-1",[602,43077,43080],{"className":43078,"code":43079,"language":28079},[28077],"sunset\nstudio\ncity\numbrellas\nnight\nforest\nsnow\ndawn\nhangar\nurban\nmodern\nshangai\n",[594,43081,43079],{"__ignoreMap":552},[1307,43083,43084],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":552,"searchDepth":553,"depth":554,"links":43086},[43087,43088,43089,43092,43095],{"id":600,"depth":554,"text":15},{"id":42196,"depth":554,"text":42197},{"id":42405,"depth":554,"text":42406,"children":43090},[43091],{"id":42439,"depth":684,"text":42440},{"id":42574,"depth":554,"text":42575,"children":43093},[43094],{"id":42709,"depth":684,"text":42710},{"id":901,"depth":554,"text":902,"children":43096},[43097],{"id":43075,"depth":684,"text":42406},"Automatically sets up a global cubemap for scene environment and background.",{},{"title":351,"description":43098},"qFwBC0gwpmIRV8fAkWJdOJik9gNGfs8Ly3nKoM30G4U",{"id":43103,"title":355,"body":43104,"description":43689,"extension":567,"links":568,"meta":43690,"navigation":570,"path":356,"seo":43691,"stem":357,"__hash__":43692},"docs/2.api/8.staging/2.use-environment.md",{"type":477,"value":43105,"toc":43685},[43106,43110,43119,43128,43130,43135,43337,43342,43375,43380,43464,43466,43682],[2343,43107,43108],{},[41919,43109],{},[590,43111,43112,43114,43115,41927,43117,1126],{},[594,43113,355],{}," composable that automatically sets up a global cubemap, which affects the default ",[594,43116,41926],{},[594,43118,41930],{},[590,43120,43121,43122,43127],{},"It uses the ",[1120,43123,43126],{"href":43124,"rel":43125},"https://threejs.org/docs/#api/en/loaders/CubeTextureLoader",[1124],"CubeTextureLoader"," to load the cubemap",[480,43129,15],{"id":600},[3268,43131,43132],{},[590,43133,43134],{},"UseEnvironment needs to be wrapped by a Suspense component",[602,43136,43138],{"className":604,"code":43137,"language":609,"meta":552,"style":552},"\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",[594,43139,43140,43160,43179,43198,43202,43218,43227,43239,43250,43261,43272,43283,43294,43300,43312,43323,43329],{"__ignoreMap":552},[613,43141,43142,43144,43146,43148,43150,43152,43154,43156,43158],{"class":615,"line":553},[613,43143,619],{"class":618},[613,43145,623],{"class":622},[613,43147,627],{"class":626},[613,43149,630],{"class":626},[613,43151,633],{"class":618},[613,43153,636],{"class":618},[613,43155,640],{"class":639},[613,43157,636],{"class":618},[613,43159,645],{"class":618},[613,43161,43162,43164,43166,43169,43171,43173,43175,43177],{"class":615,"line":554},[613,43163,653],{"class":652},[613,43165,656],{"class":618},[613,43167,43168],{"class":659}," useEnvironment",[613,43170,669],{"class":618},[613,43172,672],{"class":652},[613,43174,675],{"class":618},[613,43176,678],{"class":639},[613,43178,681],{"class":618},[613,43180,43181,43183,43185,43188,43190,43192,43194,43196],{"class":615,"line":684},[613,43182,653],{"class":652},[613,43184,656],{"class":618},[613,43186,43187],{"class":659}," SRGBColorSpace",[613,43189,669],{"class":618},[613,43191,672],{"class":652},[613,43193,675],{"class":618},[613,43195,4785],{"class":639},[613,43197,681],{"class":618},[613,43199,43200],{"class":615,"line":705},[613,43201,718],{"emptyLinePlaceholder":570},[613,43203,43204,43206,43208,43210,43212,43214,43216],{"class":615,"line":715},[613,43205,2463],{"class":626},[613,43207,2473],{"class":659},[613,43209,633],{"class":618},[613,43211,23705],{"class":652},[613,43213,43168],{"class":2482},[613,43215,2485],{"class":659},[613,43217,3329],{"class":618},[613,43219,43220,43223,43225],{"class":615,"line":721},[613,43221,43222],{"class":622}," files",[613,43224,1198],{"class":618},[613,43226,19198],{"class":659},[613,43228,43229,43232,43235,43237],{"class":615,"line":731},[613,43230,43231],{"class":618}," '",[613,43233,43234],{"class":639},"/textures/environmentMaps/0/px.jpg",[613,43236,2488],{"class":618},[613,43238,2536],{"class":618},[613,43240,43241,43243,43246,43248],{"class":615,"line":754},[613,43242,43231],{"class":618},[613,43244,43245],{"class":639},"/textures/environmentMaps/0/nx.jpg",[613,43247,2488],{"class":618},[613,43249,2536],{"class":618},[613,43251,43252,43254,43257,43259],{"class":615,"line":766},[613,43253,43231],{"class":618},[613,43255,43256],{"class":639},"/textures/environmentMaps/0/py.jpg",[613,43258,2488],{"class":618},[613,43260,2536],{"class":618},[613,43262,43263,43265,43268,43270],{"class":615,"line":776},[613,43264,43231],{"class":618},[613,43266,43267],{"class":639},"/textures/environmentMaps/0/ny.jpg",[613,43269,2488],{"class":618},[613,43271,2536],{"class":618},[613,43273,43274,43276,43279,43281],{"class":615,"line":781},[613,43275,43231],{"class":618},[613,43277,43278],{"class":639},"/textures/environmentMaps/0/pz.jpg",[613,43280,2488],{"class":618},[613,43282,2536],{"class":618},[613,43284,43285,43287,43290,43292],{"class":615,"line":807},[613,43286,43231],{"class":618},[613,43288,43289],{"class":639},"/textures/environmentMaps/0/nz.jpg",[613,43291,2488],{"class":618},[613,43293,2536],{"class":618},[613,43295,43296,43298],{"class":615,"line":607},[613,43297,40261],{"class":659},[613,43299,2536],{"class":618},[613,43301,43302,43305,43307,43310],{"class":615,"line":830},[613,43303,43304],{"class":622}," path",[613,43306,1198],{"class":618},[613,43308,43309],{"class":618}," ''",[613,43311,2536],{"class":618},[613,43313,43314,43317,43319,43321],{"class":615,"line":841},[613,43315,43316],{"class":622}," encoding",[613,43318,1198],{"class":618},[613,43320,43187],{"class":659},[613,43322,2536],{"class":618},[613,43324,43325,43327],{"class":615,"line":852},[613,43326,2476],{"class":618},[613,43328,2496],{"class":659},[613,43330,43331,43333,43335],{"class":615,"line":862},[613,43332,708],{"class":618},[613,43334,623],{"class":622},[613,43336,645],{"class":618},[590,43338,23712,43339,43341],{},[594,43340,2777],{}," in your scene:",[602,43343,43346],{"className":604,"code":43344,"highlights":43345,"language":609,"meta":552,"style":552},"\u003CTresMesh>\n \u003CTresSphereGeometry />\n \u003CTresMeshStandardMaterial :map=\"texture\" />\n\u003C/TresMesh>\n",[684],[594,43347,43348,43356,43361,43367],{"__ignoreMap":552},[613,43349,43350,43352,43354],{"class":615,"line":553},[613,43351,619],{"class":618},[613,43353,836],{"class":622},[613,43355,645],{"class":618},[613,43357,43358],{"class":615,"line":554},[613,43359,43360],{"class":659}," \u003CTresSphereGeometry />\n",[613,43362,43364],{"class":43363,"line":684},[615,649],[613,43365,43366],{"class":659}," \u003CTresMeshStandardMaterial :map=\"texture\" />\n",[613,43368,43369,43371,43373],{"class":615,"line":705},[613,43370,708],{"class":618},[613,43372,836],{"class":622},[613,43374,645],{"class":618},[590,43376,42158,43377,43379],{},[594,43378,42161],{}," file directly",[602,43381,43383],{"className":1166,"code":43382,"language":640,"meta":552,"style":552},"import { useEnvironment } from '@tresjs/cientos'\n\nconst texture = await useEnvironment({\n files: '/sunset.hdr',\n path: '',\n encoding: SRGBColorSpace,\n})\n",[594,43384,43385,43403,43407,43423,43438,43448,43458],{"__ignoreMap":552},[613,43386,43387,43389,43391,43393,43395,43397,43399,43401],{"class":615,"line":553},[613,43388,653],{"class":652},[613,43390,656],{"class":618},[613,43392,43168],{"class":659},[613,43394,669],{"class":618},[613,43396,672],{"class":652},[613,43398,675],{"class":618},[613,43400,678],{"class":639},[613,43402,681],{"class":618},[613,43404,43405],{"class":615,"line":554},[613,43406,718],{"emptyLinePlaceholder":570},[613,43408,43409,43411,43413,43415,43417,43419,43421],{"class":615,"line":684},[613,43410,2463],{"class":626},[613,43412,2473],{"class":659},[613,43414,633],{"class":618},[613,43416,23705],{"class":652},[613,43418,43168],{"class":2482},[613,43420,2485],{"class":659},[613,43422,3329],{"class":618},[613,43424,43425,43427,43429,43431,43434,43436],{"class":615,"line":705},[613,43426,43222],{"class":622},[613,43428,1198],{"class":618},[613,43430,675],{"class":618},[613,43432,43433],{"class":639},"/sunset.hdr",[613,43435,2488],{"class":618},[613,43437,2536],{"class":618},[613,43439,43440,43442,43444,43446],{"class":615,"line":715},[613,43441,43304],{"class":622},[613,43443,1198],{"class":618},[613,43445,43309],{"class":618},[613,43447,2536],{"class":618},[613,43449,43450,43452,43454,43456],{"class":615,"line":721},[613,43451,43316],{"class":622},[613,43453,1198],{"class":618},[613,43455,43187],{"class":659},[613,43457,2536],{"class":618},[613,43459,43460,43462],{"class":615,"line":731},[613,43461,2476],{"class":618},[613,43463,2496],{"class":659},[480,43465,12698],{"id":16243},[907,43467,43468,43480],{},[910,43469,43470],{},[913,43471,43472,43474,43476,43478],{},[916,43473,8362],{"align":977},[916,43475,6179],{},[916,43477,924],{},[916,43479,921],{},[926,43481,43482,43499,43516,43538,43557,43574,43591,43612,43629,43646,43665],{},[913,43483,43484,43488,43492,43496],{},[931,43485,43486],{"align":977},[1681,43487,23994],{},[931,43489,43490],{},[594,43491,24110],{},[931,43493,43494],{},[594,43495,1159],{},[931,43497,43498],{},"Array of 6 urls to images, one for each side of the CubeTexture. or and HDR",[913,43500,43501,43505,43509,43513],{},[931,43502,43503],{"align":977},[1681,43504,16546],{},[931,43506,43507],{},[594,43508,16208],{},[931,43510,43511],{},[594,43512,951],{},[931,43514,43515],{},"Path to the environment map files.",[913,43517,43518,43522,43527,43535],{},[931,43519,43520],{"align":977},[1681,43521,42887],{},[931,43523,43524],{},[594,43525,43526],{},"Encoding",[931,43528,43529,43531,43532,43534],{},[594,43530,42895],{}," for an array of files and ",[594,43533,42899],{}," for a single texture",[931,43536,43537],{},"Encoding of the environment map.",[913,43539,43540,43544,43548,43552],{},[931,43541,43542],{"align":977},[1681,43543,42617],{},[931,43545,43546],{},[594,43547,16208],{},[931,43549,43550],{},[594,43551,951],{},[931,43553,938,43554,43556],{},[594,43555,941],{}," the texture will be used as the scene background.",[913,43558,43559,43563,43567,43571],{},[931,43560,43561],{"align":977},[1681,43562,20197],{},[931,43564,43565],{},[594,43566,5565],{},[931,43568,43569],{},[594,43570,945],{},[931,43572,43573],{},"Blur factor between 0 and 1. (only works with three 0.146 and up)",[913,43575,43576,43580,43584,43588],{},[931,43577,43578],{"align":977},[1681,43579,42412],{},[931,43581,43582],{},[594,43583,3641],{},[931,43585,43586],{},[594,43587,1159],{},[931,43589,43590],{},"Preset environment map.",[913,43592,43593,43597,43602,43606],{},[931,43594,43595],{"align":977},[1681,43596,42458],{},[931,43598,43599],{},[594,43600,43601],{},"'1k' | '2k' | '4k'",[931,43603,43604],{},[594,43605,42500],{},[931,43607,43608,43609,43611],{},"Resolution variant of the preset HDR. Only applies when ",[594,43610,42412],{}," is set. 4K ≈ 30–60MB.",[913,43613,43614,43618,43622,43626],{},[931,43615,43616],{"align":977},[1681,43617,43015],{},[931,43619,43620],{},[594,43621,5565],{},[931,43623,43624],{},[594,43625,1901],{},[931,43627,43628],{},"Intensity of the background.",[913,43630,43631,43635,43639,43643],{},[931,43632,43633],{"align":977},[1681,43634,43027],{},[931,43636,43637],{},[594,43638,5565],{},[931,43640,43641],{},[594,43642,1901],{},[931,43644,43645],{},"Intensity of the environment.",[913,43647,43648,43652,43657,43662],{},[931,43649,43650],{"align":977},[1681,43651,43039],{},[931,43653,43654],{},[594,43655,43656],{},"VectorFlexibleParams",[931,43658,43659],{},[594,43660,43661],{},"[0, 0, 0]",[931,43663,43664],{},"Rotation of the background.",[913,43666,43667,43671,43675,43679],{},[931,43668,43669],{"align":977},[1681,43670,43054],{},[931,43672,43673],{},[594,43674,43656],{},[931,43676,43677],{},[594,43678,43661],{},[931,43680,43681],{},"Rotation of the environment.",[1307,43683,43684],{},"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":552,"searchDepth":553,"depth":554,"links":43686},[43687,43688],{"id":600,"depth":554,"text":15},{"id":16243,"depth":554,"text":12698},"Composable that sets up a global cubemap for scene environment and background.",{},{"title":355,"description":43689},"WFsmQOwv-yc23voKTzWwYBxnk1QVtMW5VaFbmbCf-8c",{"id":43694,"title":359,"body":43695,"description":43984,"extension":567,"links":568,"meta":43985,"navigation":570,"path":360,"seo":43986,"stem":361,"__hash__":43987},"docs/2.api/8.staging/3.lightformer.md",{"type":477,"value":43696,"toc":43981},[43697,43702,43708,43902,43904,43907,43979],[584,43698,43699],{},[43700,43701],"staging-lightformer",{},[590,43703,43704,43705,43707],{},"You can incorporate ",[594,43706,359],{}," into the environment just like a slot.",[602,43709,43711],{"className":604,"code":43710,"language":609,"meta":552,"style":552},"\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",[594,43712,43713,43723,43748,43756,43760,43768,43776,43820,43886,43894],{"__ignoreMap":552},[613,43714,43715,43717,43719,43721],{"class":615,"line":553},[613,43716,619],{"class":618},[613,43718,623],{"class":622},[613,43720,627],{"class":626},[613,43722,645],{"class":618},[613,43724,43725,43727,43729,43732,43734,43737,43739,43741,43743,43746],{"class":615,"line":554},[613,43726,653],{"class":652},[613,43728,656],{"class":618},[613,43730,43731],{"class":659}," Enviroment",[613,43733,663],{"class":618},[613,43735,43736],{"class":659}," LightFormer",[613,43738,669],{"class":618},[613,43740,672],{"class":652},[613,43742,675],{"class":618},[613,43744,43745],{"class":639},"@tres/cientos",[613,43747,681],{"class":618},[613,43749,43750,43752,43754],{"class":615,"line":684},[613,43751,708],{"class":618},[613,43753,623],{"class":622},[613,43755,645],{"class":618},[613,43757,43758],{"class":615,"line":705},[613,43759,718],{"emptyLinePlaceholder":570},[613,43761,43762,43764,43766],{"class":615,"line":715},[613,43763,619],{"class":618},[613,43765,726],{"class":622},[613,43767,645],{"class":618},[613,43769,43770,43772,43774],{"class":615,"line":721},[613,43771,734],{"class":618},[613,43773,351],{"class":622},[613,43775,645],{"class":618},[613,43777,43778,43780,43782,43784,43786,43788,43790,43792,43794,43796,43798,43800,43802,43804,43806,43808,43810,43812,43814,43816,43818],{"class":615,"line":731},[613,43779,757],{"class":618},[613,43781,359],{"class":622},[613,43783,789],{"class":618},[613,43785,1894],{"class":626},[613,43787,633],{"class":618},[613,43789,636],{"class":618},[613,43791,2597],{"class":799},[613,43793,636],{"class":618},[613,43795,789],{"class":618},[613,43797,1467],{"class":626},[613,43799,633],{"class":618},[613,43801,636],{"class":618},[613,43803,1474],{"class":618},[613,43805,945],{"class":799},[613,43807,1479],{"class":618},[613,43809,7668],{"class":799},[613,43811,8838],{"class":618},[613,43813,24306],{"class":799},[613,43815,1489],{"class":618},[613,43817,636],{"class":618},[613,43819,763],{"class":618},[613,43821,43822,43824,43826,43828,43830,43832,43835,43837,43839,43842,43844,43846,43848,43850,43852,43854,43856,43858,43860,43862,43864,43866,43868,43870,43872,43874,43876,43878,43880,43882,43884],{"class":615,"line":754},[613,43823,757],{"class":618},[613,43825,359],{"class":622},[613,43827,672],{"class":626},[613,43829,633],{"class":618},[613,43831,636],{"class":618},[613,43833,43834],{"class":639},"ring",[613,43836,636],{"class":618},[613,43838,789],{"class":618},[613,43840,43841],{"class":626},"rotation-y",[613,43843,633],{"class":618},[613,43845,636],{"class":618},[613,43847,9324],{"class":618},[613,43849,26743],{"class":659},[613,43851,1126],{"class":618},[613,43853,26748],{"class":659},[613,43855,3405],{"class":618},[613,43857,800],{"class":799},[613,43859,636],{"class":618},[613,43861,789],{"class":618},[613,43863,792],{"class":626},[613,43865,633],{"class":618},[613,43867,636],{"class":618},[613,43869,1474],{"class":618},[613,43871,1486],{"class":799},[613,43873,1479],{"class":618},[613,43875,1486],{"class":799},[613,43877,1479],{"class":618},[613,43879,1901],{"class":799},[613,43881,1489],{"class":618},[613,43883,636],{"class":618},[613,43885,763],{"class":618},[613,43887,43888,43890,43892],{"class":615,"line":766},[613,43889,885],{"class":618},[613,43891,351],{"class":622},[613,43893,645],{"class":618},[613,43895,43896,43898,43900],{"class":615,"line":776},[613,43897,708],{"class":618},[613,43899,726],{"class":622},[613,43901,645],{"class":618},[4191,43903,902],{"id":901},[590,43905,43906],{},"Lightformer inherits from mesh, and its extension parameters include:",[907,43908,43909,43919],{},[910,43910,43911],{},[913,43912,43913,43915,43917],{},[916,43914,918],{"align":977},[916,43916,921],{"align":977},[916,43918,924],{},[926,43920,43921,43942,43953,43967],{},[913,43922,43923,43927,43938],{},[931,43924,43925],{"align":977},[594,43926,15867],{},[931,43928,43929,1479,43932,1479,43934,43937],{"align":977},[594,43930,43931],{},"circle",[594,43933,43834],{},[594,43935,43936],{},"rect",", or any other Mesh type",[931,43939,43940],{},[594,43941,43936],{},[913,43943,43944,43948,43951],{},[931,43945,43946],{"align":977},[594,43947,1894],{},[931,43949,43950],{"align":977},"The intensity of the light",[931,43952,1901],{},[913,43954,43955,43959,43962],{},[931,43956,43957],{"align":977},[594,43958,7772],{},[931,43960,43961],{"align":977},"The color of the light",[931,43963,43964],{},[594,43965,43966],{},"0xffffff",[913,43968,43969,43973,43976],{},[931,43970,43971],{"align":977},[594,43972,1997],{},[931,43974,43975],{"align":977},"The arguments of the Geometry",[931,43977,43978],{},"When using other geometries, set the corresponding arguments",[1307,43980,13050],{},{"title":552,"searchDepth":553,"depth":554,"links":43982},[43983],{"id":901,"depth":684,"text":902},"Addon for environment component that provided you custom lights.",{},{"title":359,"description":43984},"R8P0Oy_2dpWPhe7Wm4S1_IYaBdzzvZXUtE1_rjpxx6o",{"id":43989,"title":363,"body":43990,"description":44338,"extension":567,"links":568,"meta":44339,"navigation":570,"path":364,"seo":44340,"stem":365,"__hash__":44341},"docs/2.api/8.staging/backdrop.md",{"type":477,"value":43991,"toc":44334},[43992,43997,44005,44007,44196,44199,44276,44278,44332],[584,43993,43994],{},[43995,43996],"staging-backdrop",{},[590,43998,2843,43999,8516,44001,44004],{},[594,44000,7528],{},[594,44002,44003],{},"\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.",[480,44006,15],{"id":600},[602,44008,44011],{"className":604,"code":44009,"highlights":44010,"language":609,"meta":552,"style":552},"\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",[684,766],[594,44012,44013,44033,44051,44071,44079,44083,44091,44099,44131,44140,44148,44180,44188],{"__ignoreMap":552},[613,44014,44015,44017,44019,44021,44023,44025,44027,44029,44031],{"class":615,"line":553},[613,44016,619],{"class":618},[613,44018,623],{"class":622},[613,44020,627],{"class":626},[613,44022,630],{"class":626},[613,44024,633],{"class":618},[613,44026,636],{"class":618},[613,44028,640],{"class":639},[613,44030,636],{"class":618},[613,44032,645],{"class":618},[613,44034,44035,44037,44039,44041,44043,44045,44047,44049],{"class":615,"line":554},[613,44036,653],{"class":652},[613,44038,656],{"class":618},[613,44040,691],{"class":659},[613,44042,669],{"class":618},[613,44044,672],{"class":652},[613,44046,675],{"class":618},[613,44048,700],{"class":639},[613,44050,681],{"class":618},[613,44052,44054,44056,44058,44061,44063,44065,44067,44069],{"class":44053,"line":684},[615,649],[613,44055,653],{"class":652},[613,44057,656],{"class":618},[613,44059,44060],{"class":659}," Backdrop",[613,44062,669],{"class":618},[613,44064,672],{"class":652},[613,44066,675],{"class":618},[613,44068,678],{"class":639},[613,44070,681],{"class":618},[613,44072,44073,44075,44077],{"class":615,"line":705},[613,44074,708],{"class":618},[613,44076,623],{"class":622},[613,44078,645],{"class":618},[613,44080,44081],{"class":615,"line":715},[613,44082,718],{"emptyLinePlaceholder":570},[613,44084,44085,44087,44089],{"class":615,"line":721},[613,44086,619],{"class":618},[613,44088,726],{"class":622},[613,44090,645],{"class":618},[613,44092,44093,44095,44097],{"class":615,"line":731},[613,44094,734],{"class":618},[613,44096,737],{"class":622},[613,44098,645],{"class":618},[613,44100,44101,44103,44105,44107,44109,44111,44113,44115,44117,44119,44121,44123,44125,44127,44129],{"class":615,"line":754},[613,44102,757],{"class":618},[613,44104,760],{"class":622},[613,44106,789],{"class":618},[613,44108,1467],{"class":626},[613,44110,633],{"class":618},[613,44112,636],{"class":618},[613,44114,1474],{"class":618},[613,44116,945],{"class":799},[613,44118,1479],{"class":618},[613,44120,2705],{"class":799},[613,44122,1479],{"class":618},[613,44124,7668],{"class":799},[613,44126,1489],{"class":618},[613,44128,636],{"class":618},[613,44130,763],{"class":618},[613,44132,44134,44136,44138],{"class":44133,"line":766},[615,649],[613,44135,757],{"class":618},[613,44137,363],{"class":622},[613,44139,763],{"class":618},[613,44141,44142,44144,44146],{"class":615,"line":776},[613,44143,757],{"class":618},[613,44145,8758],{"class":622},[613,44147,763],{"class":618},[613,44149,44150,44152,44154,44156,44158,44160,44162,44164,44166,44168,44170,44172,44174,44176,44178],{"class":615,"line":781},[613,44151,757],{"class":618},[613,44153,8779],{"class":622},[613,44155,789],{"class":618},[613,44157,1467],{"class":626},[613,44159,633],{"class":618},[613,44161,636],{"class":618},[613,44163,1474],{"class":618},[613,44165,945],{"class":799},[613,44167,1479],{"class":618},[613,44169,800],{"class":799},[613,44171,1479],{"class":618},[613,44173,3876],{"class":799},[613,44175,1489],{"class":618},[613,44177,636],{"class":618},[613,44179,763],{"class":618},[613,44181,44182,44184,44186],{"class":615,"line":807},[613,44183,885],{"class":618},[613,44185,737],{"class":622},[613,44187,645],{"class":618},[613,44189,44190,44192,44194],{"class":615,"line":607},[613,44191,708],{"class":618},[613,44193,726],{"class":622},[613,44195,645],{"class":618},[590,44197,44198],{},"Or with a custom material",[602,44200,44204],{"className":44201,"code":44202,"language":44203,"meta":552,"style":552},"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",[594,44205,44206,44238,44268],{"__ignoreMap":552},[613,44207,44208,44210,44212,44215,44217,44219,44221,44223,44226,44228,44230,44232,44234,44236],{"class":615,"line":553},[613,44209,619],{"class":618},[613,44211,363],{"class":622},[613,44213,44214],{"class":626}," :floor",[613,44216,633],{"class":618},[613,44218,636],{"class":618},[613,44220,15083],{"class":639},[613,44222,636],{"class":618},[613,44224,44225],{"class":626}," :segments",[613,44227,633],{"class":618},[613,44229,636],{"class":618},[613,44231,28617],{"class":639},[613,44233,636],{"class":618},[613,44235,41220],{"class":626},[613,44237,645],{"class":618},[613,44239,44240,44242,44245,44247,44249,44251,44253,44255,44258,44260,44262,44264,44266],{"class":615,"line":554},[613,44241,734],{"class":618},[613,44243,44244],{"class":622},"TresMeshPhysicalMaterial",[613,44246,2749],{"class":626},[613,44248,633],{"class":618},[613,44250,636],{"class":618},[613,44252,11952],{"class":639},[613,44254,636],{"class":618},[613,44256,44257],{"class":626}," :roughness",[613,44259,633],{"class":618},[613,44261,636],{"class":618},[613,44263,1901],{"class":639},[613,44265,636],{"class":618},[613,44267,763],{"class":618},[613,44269,44270,44272,44274],{"class":615,"line":684},[613,44271,708],{"class":618},[613,44273,363],{"class":622},[613,44275,645],{"class":618},[480,44277,902],{"id":901},[907,44279,44280,44292],{},[910,44281,44282],{},[913,44283,44284,44286,44288,44290],{},[916,44285,8362],{"align":977},[916,44287,6179],{"align":977},[916,44289,924],{},[916,44291,32144],{},[926,44293,44294,44308,44320],{},[913,44295,44296,44299,44301,44305],{},[931,44297,44298],{"align":977},"floor",[931,44300,5565],{"align":977},[931,44302,44303],{},[594,44304,12255],{},[931,44306,44307],{},"No",[913,44309,44310,44312,44314,44318],{},[931,44311,28505],{"align":977},[931,44313,5565],{"align":977},[931,44315,44316],{},[594,44317,28617],{},[931,44319,44307],{},[913,44321,44322,44324,44326,44330],{},[931,44323,17125],{"align":977},[931,44325,16208],{"align":977},[931,44327,44328],{},[594,44329,951],{},[931,44331,44307],{},[1307,44333,1656],{},{"title":552,"searchDepth":553,"depth":554,"links":44335},[44336,44337],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},"A curved plane studio backdrop for presentational purposes.",{},{"title":363,"description":44338},"NGh9OweK5ISAF-G6NdgBZKgy35j2Bl_DEl17ABguTXw",{"id":44343,"title":367,"body":44344,"description":44948,"extension":567,"links":568,"meta":44949,"navigation":570,"path":368,"seo":44950,"stem":369,"__hash__":44951},"docs/2.api/8.staging/ocean.md",{"type":477,"value":44345,"toc":44940},[44346,44351,44366,44371,44373,44506,44510,44519,44522,44537,44541,44544,44714,44716,44722,44937],[584,44347,44348],{},[44349,44350],"staging-ocean",{},[590,44352,44353,44356,44357,1126],{},[594,44354,44355],{},"\u003COcean />"," is a wrapper for the ",[1120,44358,44361,44362,44365],{"href":44359,"rel":44360},"https://threejs.org/examples/?q=ocean#webgl_shaders_ocean",[1124],"Three.js ",[594,44363,44364],{},"Water"," add-on",[3268,44367,44368],{},[590,44369,44370],{},"Ocean comes with a default texture, so it needs to be wrapped in a Suspense component.",[480,44372,15],{"id":600},[602,44374,44377],{"className":604,"code":44375,"highlights":44376,"language":609,"meta":552,"style":552},"\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",[684,766],[594,44378,44379,44399,44417,44437,44445,44449,44457,44465,44473,44482,44490,44498],{"__ignoreMap":552},[613,44380,44381,44383,44385,44387,44389,44391,44393,44395,44397],{"class":615,"line":553},[613,44382,619],{"class":618},[613,44384,623],{"class":622},[613,44386,627],{"class":626},[613,44388,630],{"class":626},[613,44390,633],{"class":618},[613,44392,636],{"class":618},[613,44394,640],{"class":639},[613,44396,636],{"class":618},[613,44398,645],{"class":618},[613,44400,44401,44403,44405,44407,44409,44411,44413,44415],{"class":615,"line":554},[613,44402,653],{"class":652},[613,44404,656],{"class":618},[613,44406,691],{"class":659},[613,44408,669],{"class":618},[613,44410,672],{"class":652},[613,44412,675],{"class":618},[613,44414,700],{"class":639},[613,44416,681],{"class":618},[613,44418,44420,44422,44424,44427,44429,44431,44433,44435],{"class":44419,"line":684},[615,649],[613,44421,653],{"class":652},[613,44423,656],{"class":618},[613,44425,44426],{"class":659}," Ocean",[613,44428,669],{"class":618},[613,44430,672],{"class":652},[613,44432,675],{"class":618},[613,44434,678],{"class":639},[613,44436,681],{"class":618},[613,44438,44439,44441,44443],{"class":615,"line":705},[613,44440,708],{"class":618},[613,44442,623],{"class":622},[613,44444,645],{"class":618},[613,44446,44447],{"class":615,"line":715},[613,44448,718],{"emptyLinePlaceholder":570},[613,44450,44451,44453,44455],{"class":615,"line":721},[613,44452,619],{"class":618},[613,44454,726],{"class":622},[613,44456,645],{"class":618},[613,44458,44459,44461,44463],{"class":615,"line":731},[613,44460,734],{"class":618},[613,44462,737],{"class":622},[613,44464,645],{"class":618},[613,44466,44467,44469,44471],{"class":615,"line":754},[613,44468,757],{"class":618},[613,44470,20168],{"class":622},[613,44472,645],{"class":618},[613,44474,44476,44478,44480],{"class":44475,"line":766},[615,649],[613,44477,833],{"class":618},[613,44479,367],{"class":622},[613,44481,763],{"class":618},[613,44483,44484,44486,44488],{"class":615,"line":776},[613,44485,875],{"class":618},[613,44487,20168],{"class":622},[613,44489,645],{"class":618},[613,44491,44492,44494,44496],{"class":615,"line":781},[613,44493,885],{"class":618},[613,44495,737],{"class":622},[613,44497,645],{"class":618},[613,44499,44500,44502,44504],{"class":615,"line":807},[613,44501,708],{"class":618},[613,44503,726],{"class":622},[613,44505,645],{"class":618},[4191,44507,44509],{"id":44508},"sky","SKY",[590,44511,44512,44514,44515,44518],{},[594,44513,44355],{}," works hand in hand with the Sky component, detecting the position of the sun and reflecting on the water.\n(",[594,44516,44517],{},"\u003CSky />"," is not required for making this component work.)",[4191,44520,44521],{"id":38718},"Fog",[590,44523,2843,44524,44526,44527,5823,44531,44536],{},[594,44525,44355],{}," component also reacts when there's ",[1120,44528,44521],{"href":44529,"rel":44530},"https://threejs.org/docs/index.html?q=fog#api/en/scenes/Fog",[1124],[1120,44532,44535],{"href":44533,"rel":44534},"https://threejs.org/docs/index.html?q=fog#api/en/scenes/FogExp2",[1124],"FogExp2"," in your scene.",[480,44538,44540],{"id":44539},"custom-geometry","Custom Geometry",[590,44542,44543],{},"You can use custom geometry by adding it as a child.",[602,44545,44548],{"className":604,"code":44546,"highlights":44547,"language":609,"meta":552,"style":552},"\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",[684,766,776,781],[594,44549,44550,44570,44588,44607,44615,44619,44627,44635,44643,44652,44681,44690,44698,44706],{"__ignoreMap":552},[613,44551,44552,44554,44556,44558,44560,44562,44564,44566,44568],{"class":615,"line":553},[613,44553,619],{"class":618},[613,44555,623],{"class":622},[613,44557,627],{"class":626},[613,44559,630],{"class":626},[613,44561,633],{"class":618},[613,44563,636],{"class":618},[613,44565,640],{"class":639},[613,44567,636],{"class":618},[613,44569,645],{"class":618},[613,44571,44572,44574,44576,44578,44580,44582,44584,44586],{"class":615,"line":554},[613,44573,653],{"class":652},[613,44575,656],{"class":618},[613,44577,691],{"class":659},[613,44579,669],{"class":618},[613,44581,672],{"class":652},[613,44583,675],{"class":618},[613,44585,700],{"class":639},[613,44587,681],{"class":618},[613,44589,44591,44593,44595,44597,44599,44601,44603,44605],{"class":44590,"line":684},[615,649],[613,44592,653],{"class":652},[613,44594,656],{"class":618},[613,44596,44426],{"class":659},[613,44598,669],{"class":618},[613,44600,672],{"class":652},[613,44602,675],{"class":618},[613,44604,678],{"class":639},[613,44606,681],{"class":618},[613,44608,44609,44611,44613],{"class":615,"line":705},[613,44610,708],{"class":618},[613,44612,623],{"class":622},[613,44614,645],{"class":618},[613,44616,44617],{"class":615,"line":715},[613,44618,718],{"emptyLinePlaceholder":570},[613,44620,44621,44623,44625],{"class":615,"line":721},[613,44622,619],{"class":618},[613,44624,726],{"class":622},[613,44626,645],{"class":618},[613,44628,44629,44631,44633],{"class":615,"line":731},[613,44630,734],{"class":618},[613,44632,737],{"class":622},[613,44634,645],{"class":618},[613,44636,44637,44639,44641],{"class":615,"line":754},[613,44638,757],{"class":618},[613,44640,20168],{"class":622},[613,44642,645],{"class":618},[613,44644,44646,44648,44650],{"class":44645,"line":766},[615,649],[613,44647,833],{"class":618},[613,44649,367],{"class":622},[613,44651,645],{"class":618},[613,44653,44655,44657,44659,44661,44663,44665,44667,44669,44671,44673,44675,44677,44679],{"class":44654,"line":776},[615,649],[613,44656,844],{"class":618},[613,44658,9263],{"class":622},[613,44660,789],{"class":618},[613,44662,1997],{"class":626},[613,44664,633],{"class":618},[613,44666,636],{"class":618},[613,44668,1474],{"class":618},[613,44670,9822],{"class":799},[613,44672,1479],{"class":618},[613,44674,34975],{"class":799},[613,44676,1489],{"class":618},[613,44678,636],{"class":618},[613,44680,763],{"class":618},[613,44682,44684,44686,44688],{"class":44683,"line":781},[615,649],[613,44685,865],{"class":618},[613,44687,367],{"class":622},[613,44689,645],{"class":618},[613,44691,44692,44694,44696],{"class":615,"line":807},[613,44693,875],{"class":618},[613,44695,20168],{"class":622},[613,44697,645],{"class":618},[613,44699,44700,44702,44704],{"class":615,"line":607},[613,44701,885],{"class":618},[613,44703,737],{"class":622},[613,44705,645],{"class":618},[613,44707,44708,44710,44712],{"class":615,"line":830},[613,44709,708],{"class":618},[613,44711,726],{"class":622},[613,44713,645],{"class":618},[480,44715,902],{"id":901},[44717,44718,44719],"prose-tip",{},[590,44720,44721],{},"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,44723,44724,44738],{},[910,44725,44726],{},[913,44727,44728,44730,44732,44734],{},[916,44729,918],{"align":977},[916,44731,921],{"align":977},[916,44733,924],{},[916,44735,44737],{"align":44736},"center","Reactive",[926,44739,44740,44757,44773,44792,44809,44826,44843,44860,44875,44891,44907,44922],{},[913,44741,44742,44747,44750,44754],{},[931,44743,44744],{"align":977},[1681,44745,44746],{},"textureWidth",[931,44748,44749],{"align":977},"Width of the mirror texture",[931,44751,44752],{},[594,44753,39202],{},[931,44755,44756],{"align":44736},"❌",[913,44758,44759,44764,44767,44771],{},[931,44760,44761],{"align":977},[1681,44762,44763],{},"textureHeight",[931,44765,44766],{"align":977},"Height of the mirror texture",[931,44768,44769],{},[594,44770,39202],{},[931,44772,44756],{"align":44736},[913,44774,44775,44780,44783,44790],{},[931,44776,44777],{"align":977},[1681,44778,44779],{},"waterNormals",[931,44781,44782],{"align":977},"URL of the water normal texture",[931,44784,44785],{},[1120,44786,44789],{"href":44787,"rel":44788},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/water-normals/Water_1_M_Normal.jpg",[1124],"Water_1_M_Normal.jpg",[931,44791,44756],{"align":44736},[913,44793,44794,44799,44802,44807],{},[931,44795,44796],{"align":977},[1681,44797,44798],{},"sunDirection",[931,44800,44801],{"align":977},"Sun direction to be reflected on the water",[931,44803,44804],{},[594,44805,44806],{},"Vector3(0,0,0)",[931,44808,44756],{"align":44736},[913,44810,44811,44816,44819,44823],{},[931,44812,44813],{"align":977},[1681,44814,44815],{},"sunColor",[931,44817,44818],{"align":977},"Sun color to be reflected on the water",[931,44820,44821],{},[594,44822,43966],{},[931,44824,44825],{"align":44736},"✅",[913,44827,44828,44833,44836,44841],{},[931,44829,44830],{"align":977},[1681,44831,44832],{},"waterColor",[931,44834,44835],{"align":977},"Water color",[931,44837,44838],{},[594,44839,44840],{},"0x001e0f",[931,44842,44825],{"align":44736},[913,44844,44845,44850,44853,44858],{},[931,44846,44847],{"align":977},[1681,44848,44849],{},"distortionScale",[931,44851,44852],{"align":977},"Distortion scale on reflected objects",[931,44854,44855],{},[594,44856,44857],{},"3.7",[931,44859,44825],{"align":44736},[913,44861,44862,44866,44869,44873],{},[931,44863,44864],{"align":977},[1681,44865,15436],{},[931,44867,44868],{"align":977},"Size of the water normals",[931,44870,44871],{},[594,44872,1901],{},[931,44874,44825],{"align":44736},[913,44876,44877,44882,44885,44889],{},[931,44878,44879],{"align":977},[1681,44880,44881],{},"clipBias",[931,44883,44884],{"align":977},"Clip bias for the render target",[931,44886,44887],{},[594,44888,12421],{},[931,44890,44756],{"align":44736},[913,44892,44893,44898,44901,44905],{},[931,44894,44895],{"align":977},[1681,44896,44897],{},"alpha",[931,44899,44900],{"align":977},"Alpha transparency of the water",[931,44902,44903],{},[594,44904,12299],{},[931,44906,44825],{"align":44736},[913,44908,44909,44913,44916,44920],{},[931,44910,44911],{"align":977},[1681,44912,25130],{},[931,44914,44915],{"align":977},"Which side of the mesh renders the water",[931,44917,44918],{},[594,44919,26355],{},[931,44921,44756],{"align":44736},[913,44923,44924,44928,44931,44935],{},[931,44925,44926],{"align":977},[1681,44927,8724],{},[931,44929,44930],{"align":977},"Animation speed multiplier applied to the wave animation. Higher values make the water animate faster.",[931,44932,44933],{},[594,44934,1901],{},[931,44936,44825],{"align":44736},[1307,44938,44939],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":552,"searchDepth":553,"depth":554,"links":44941},[44942,44946,44947],{"id":600,"depth":554,"text":15,"children":44943},[44944,44945],{"id":44508,"depth":684,"text":44509},{"id":38718,"depth":684,"text":44521},{"id":44539,"depth":554,"text":44540},{"id":901,"depth":554,"text":902},"Wrapper for the Three.js Water add-on with sky reflection support.",{},{"title":367,"description":44948},"H6l4rOaHY0GADZIJpKUedqEaYTaMVIQ_5pXk41qxwJU",{"id":44953,"title":371,"body":44954,"description":45994,"extension":567,"links":568,"meta":45995,"navigation":570,"path":372,"seo":45996,"stem":373,"__hash__":45997},"docs/2.api/8.staging/precipitation.md",{"type":477,"value":44955,"toc":45986},[44956,44961,44967,44969,44975,45132,45136,45139,45346,45350,45353,45558,45562,45565,45811,45814,45819,45821,45984],[584,44957,44958],{},[44959,44960],"staging-precipitation",{},[590,44962,44963,44966],{},[594,44964,44965],{},"\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.",[480,44968,15],{"id":600},[590,44970,44971,44972,44974],{},"You can use ",[594,44973,44965],{}," component without passing any props, this will achieve a snowy effect, like the before example.",[602,44976,44979],{"className":604,"code":44977,"highlights":44978,"language":609,"meta":552,"style":552},"\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",[684,766],[594,44980,44981,45001,45019,45039,45047,45051,45059,45067,45099,45108,45116,45124],{"__ignoreMap":552},[613,44982,44983,44985,44987,44989,44991,44993,44995,44997,44999],{"class":615,"line":553},[613,44984,619],{"class":618},[613,44986,623],{"class":622},[613,44988,627],{"class":626},[613,44990,630],{"class":626},[613,44992,633],{"class":618},[613,44994,636],{"class":618},[613,44996,640],{"class":639},[613,44998,636],{"class":618},[613,45000,645],{"class":618},[613,45002,45003,45005,45007,45009,45011,45013,45015,45017],{"class":615,"line":554},[613,45004,653],{"class":652},[613,45006,656],{"class":618},[613,45008,691],{"class":659},[613,45010,669],{"class":618},[613,45012,672],{"class":652},[613,45014,675],{"class":618},[613,45016,700],{"class":639},[613,45018,681],{"class":618},[613,45020,45022,45024,45026,45029,45031,45033,45035,45037],{"class":45021,"line":684},[615,649],[613,45023,653],{"class":652},[613,45025,656],{"class":618},[613,45027,45028],{"class":659}," Precipitation",[613,45030,669],{"class":618},[613,45032,672],{"class":652},[613,45034,675],{"class":618},[613,45036,678],{"class":639},[613,45038,681],{"class":618},[613,45040,45041,45043,45045],{"class":615,"line":705},[613,45042,708],{"class":618},[613,45044,623],{"class":622},[613,45046,645],{"class":618},[613,45048,45049],{"class":615,"line":715},[613,45050,718],{"emptyLinePlaceholder":570},[613,45052,45053,45055,45057],{"class":615,"line":721},[613,45054,619],{"class":618},[613,45056,726],{"class":622},[613,45058,645],{"class":618},[613,45060,45061,45063,45065],{"class":615,"line":731},[613,45062,734],{"class":618},[613,45064,737],{"class":622},[613,45066,645],{"class":618},[613,45068,45069,45071,45073,45075,45077,45079,45081,45083,45085,45087,45089,45091,45093,45095,45097],{"class":615,"line":754},[613,45070,757],{"class":618},[613,45072,760],{"class":622},[613,45074,789],{"class":618},[613,45076,1467],{"class":626},[613,45078,633],{"class":618},[613,45080,636],{"class":618},[613,45082,1474],{"class":618},[613,45084,945],{"class":799},[613,45086,1479],{"class":618},[613,45088,2705],{"class":799},[613,45090,1479],{"class":618},[613,45092,7668],{"class":799},[613,45094,1489],{"class":618},[613,45096,636],{"class":618},[613,45098,763],{"class":618},[613,45100,45102,45104,45106],{"class":45101,"line":766},[615,649],[613,45103,757],{"class":618},[613,45105,371],{"class":622},[613,45107,763],{"class":618},[613,45109,45110,45112,45114],{"class":615,"line":776},[613,45111,757],{"class":618},[613,45113,8758],{"class":622},[613,45115,763],{"class":618},[613,45117,45118,45120,45122],{"class":615,"line":781},[613,45119,885],{"class":618},[613,45121,737],{"class":622},[613,45123,645],{"class":618},[613,45125,45126,45128,45130],{"class":615,"line":807},[613,45127,708],{"class":618},[613,45129,726],{"class":622},[613,45131,645],{"class":618},[4191,45133,45135],{"id":45134},"rain","Rain",[590,45137,45138],{},"By setting the randomness to 0, increase the speed and reduce the count. You can easily achieve a more rainy effect.",[602,45140,45143],{"className":604,"code":45141,"highlights":45142,"language":609,"meta":552,"style":552},"\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",[684,766,776,781,807,607],[594,45144,45145,45165,45183,45202,45210,45214,45222,45230,45262,45270,45286,45301,45317,45322,45330,45338],{"__ignoreMap":552},[613,45146,45147,45149,45151,45153,45155,45157,45159,45161,45163],{"class":615,"line":553},[613,45148,619],{"class":618},[613,45150,623],{"class":622},[613,45152,627],{"class":626},[613,45154,630],{"class":626},[613,45156,633],{"class":618},[613,45158,636],{"class":618},[613,45160,640],{"class":639},[613,45162,636],{"class":618},[613,45164,645],{"class":618},[613,45166,45167,45169,45171,45173,45175,45177,45179,45181],{"class":615,"line":554},[613,45168,653],{"class":652},[613,45170,656],{"class":618},[613,45172,691],{"class":659},[613,45174,669],{"class":618},[613,45176,672],{"class":652},[613,45178,675],{"class":618},[613,45180,700],{"class":639},[613,45182,681],{"class":618},[613,45184,45186,45188,45190,45192,45194,45196,45198,45200],{"class":45185,"line":684},[615,649],[613,45187,653],{"class":652},[613,45189,656],{"class":618},[613,45191,45028],{"class":659},[613,45193,669],{"class":618},[613,45195,672],{"class":652},[613,45197,675],{"class":618},[613,45199,678],{"class":639},[613,45201,681],{"class":618},[613,45203,45204,45206,45208],{"class":615,"line":705},[613,45205,708],{"class":618},[613,45207,623],{"class":622},[613,45209,645],{"class":618},[613,45211,45212],{"class":615,"line":715},[613,45213,718],{"emptyLinePlaceholder":570},[613,45215,45216,45218,45220],{"class":615,"line":721},[613,45217,619],{"class":618},[613,45219,726],{"class":622},[613,45221,645],{"class":618},[613,45223,45224,45226,45228],{"class":615,"line":731},[613,45225,734],{"class":618},[613,45227,737],{"class":622},[613,45229,645],{"class":618},[613,45231,45232,45234,45236,45238,45240,45242,45244,45246,45248,45250,45252,45254,45256,45258,45260],{"class":615,"line":754},[613,45233,757],{"class":618},[613,45235,760],{"class":622},[613,45237,789],{"class":618},[613,45239,1467],{"class":626},[613,45241,633],{"class":618},[613,45243,636],{"class":618},[613,45245,1474],{"class":618},[613,45247,945],{"class":799},[613,45249,1479],{"class":618},[613,45251,2705],{"class":799},[613,45253,1479],{"class":618},[613,45255,7668],{"class":799},[613,45257,1489],{"class":618},[613,45259,636],{"class":618},[613,45261,763],{"class":618},[613,45263,45265,45267],{"class":45264,"line":766},[615,649],[613,45266,757],{"class":618},[613,45268,45269],{"class":622},"Precipitation\n",[613,45271,45273,45275,45277,45279,45281,45284],{"class":45272,"line":776},[615,649],[613,45274,10907],{"class":618},[613,45276,10323],{"class":626},[613,45278,633],{"class":618},[613,45280,636],{"class":618},[613,45282,45283],{"class":799},"2000",[613,45285,3200],{"class":618},[613,45287,45289,45291,45293,45295,45297,45299],{"class":45288,"line":781},[615,649],[613,45290,10907],{"class":618},[613,45292,8724],{"class":626},[613,45294,633],{"class":618},[613,45296,636],{"class":618},[613,45298,37341],{"class":799},[613,45300,3200],{"class":618},[613,45302,45304,45306,45309,45311,45313,45315],{"class":45303,"line":807},[615,649],[613,45305,10907],{"class":618},[613,45307,45308],{"class":626},"randomness",[613,45310,633],{"class":618},[613,45312,636],{"class":618},[613,45314,945],{"class":799},[613,45316,3200],{"class":618},[613,45318,45320],{"class":45319,"line":607},[615,649],[613,45321,16014],{"class":618},[613,45323,45324,45326,45328],{"class":615,"line":830},[613,45325,757],{"class":618},[613,45327,8758],{"class":622},[613,45329,763],{"class":618},[613,45331,45332,45334,45336],{"class":615,"line":841},[613,45333,885],{"class":618},[613,45335,737],{"class":622},[613,45337,645],{"class":618},[613,45339,45340,45342,45344],{"class":615,"line":852},[613,45341,708],{"class":618},[613,45343,726],{"class":622},[613,45345,645],{"class":618},[4191,45347,45349],{"id":45348},"storm","Storm",[590,45351,45352],{},"A storm effect? Easy just increase the randomness.",[602,45354,45357],{"className":604,"code":45355,"highlights":45356,"language":609,"meta":552,"style":552},"\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",[684,766,776,781,807,607],[594,45358,45359,45379,45397,45416,45424,45428,45436,45444,45476,45483,45499,45514,45529,45534,45542,45550],{"__ignoreMap":552},[613,45360,45361,45363,45365,45367,45369,45371,45373,45375,45377],{"class":615,"line":553},[613,45362,619],{"class":618},[613,45364,623],{"class":622},[613,45366,627],{"class":626},[613,45368,630],{"class":626},[613,45370,633],{"class":618},[613,45372,636],{"class":618},[613,45374,640],{"class":639},[613,45376,636],{"class":618},[613,45378,645],{"class":618},[613,45380,45381,45383,45385,45387,45389,45391,45393,45395],{"class":615,"line":554},[613,45382,653],{"class":652},[613,45384,656],{"class":618},[613,45386,691],{"class":659},[613,45388,669],{"class":618},[613,45390,672],{"class":652},[613,45392,675],{"class":618},[613,45394,700],{"class":639},[613,45396,681],{"class":618},[613,45398,45400,45402,45404,45406,45408,45410,45412,45414],{"class":45399,"line":684},[615,649],[613,45401,653],{"class":652},[613,45403,656],{"class":618},[613,45405,45028],{"class":659},[613,45407,669],{"class":618},[613,45409,672],{"class":652},[613,45411,675],{"class":618},[613,45413,678],{"class":639},[613,45415,681],{"class":618},[613,45417,45418,45420,45422],{"class":615,"line":705},[613,45419,708],{"class":618},[613,45421,623],{"class":622},[613,45423,645],{"class":618},[613,45425,45426],{"class":615,"line":715},[613,45427,718],{"emptyLinePlaceholder":570},[613,45429,45430,45432,45434],{"class":615,"line":721},[613,45431,619],{"class":618},[613,45433,726],{"class":622},[613,45435,645],{"class":618},[613,45437,45438,45440,45442],{"class":615,"line":731},[613,45439,734],{"class":618},[613,45441,737],{"class":622},[613,45443,645],{"class":618},[613,45445,45446,45448,45450,45452,45454,45456,45458,45460,45462,45464,45466,45468,45470,45472,45474],{"class":615,"line":754},[613,45447,757],{"class":618},[613,45449,760],{"class":622},[613,45451,789],{"class":618},[613,45453,1467],{"class":626},[613,45455,633],{"class":618},[613,45457,636],{"class":618},[613,45459,1474],{"class":618},[613,45461,945],{"class":799},[613,45463,1479],{"class":618},[613,45465,2705],{"class":799},[613,45467,1479],{"class":618},[613,45469,7668],{"class":799},[613,45471,1489],{"class":618},[613,45473,636],{"class":618},[613,45475,763],{"class":618},[613,45477,45479,45481],{"class":45478,"line":766},[615,649],[613,45480,757],{"class":618},[613,45482,45269],{"class":622},[613,45484,45486,45488,45490,45492,45494,45497],{"class":45485,"line":776},[615,649],[613,45487,10907],{"class":618},[613,45489,10323],{"class":626},[613,45491,633],{"class":618},[613,45493,636],{"class":618},[613,45495,45496],{"class":799},"3000",[613,45498,3200],{"class":618},[613,45500,45502,45504,45506,45508,45510,45512],{"class":45501,"line":781},[615,649],[613,45503,10907],{"class":618},[613,45505,8724],{"class":626},[613,45507,633],{"class":618},[613,45509,636],{"class":618},[613,45511,1521],{"class":799},[613,45513,3200],{"class":618},[613,45515,45517,45519,45521,45523,45525,45527],{"class":45516,"line":807},[615,649],[613,45518,10907],{"class":618},[613,45520,45308],{"class":626},[613,45522,633],{"class":618},[613,45524,636],{"class":618},[613,45526,15083],{"class":799},[613,45528,3200],{"class":618},[613,45530,45532],{"class":45531,"line":607},[615,649],[613,45533,16014],{"class":618},[613,45535,45536,45538,45540],{"class":615,"line":830},[613,45537,757],{"class":618},[613,45539,8758],{"class":622},[613,45541,763],{"class":618},[613,45543,45544,45546,45548],{"class":615,"line":841},[613,45545,885],{"class":618},[613,45547,737],{"class":622},[613,45549,645],{"class":618},[613,45551,45552,45554,45556],{"class":615,"line":852},[613,45553,708],{"class":618},[613,45555,726],{"class":622},[613,45557,645],{"class":618},[4191,45559,45561],{"id":45560},"beam","Beam",[590,45563,45564],{},"What about an infinite beam? Just set the area, to the axis that you need constrain.",[602,45566,45569],{"className":604,"code":45567,"highlights":45568,"language":609,"meta":552,"style":552},"\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",[684,766,776,781,807,607,830,841],[594,45570,45571,45591,45609,45628,45636,45640,45648,45656,45688,45695,45723,45738,45753,45768,45782,45787,45795,45803],{"__ignoreMap":552},[613,45572,45573,45575,45577,45579,45581,45583,45585,45587,45589],{"class":615,"line":553},[613,45574,619],{"class":618},[613,45576,623],{"class":622},[613,45578,627],{"class":626},[613,45580,630],{"class":626},[613,45582,633],{"class":618},[613,45584,636],{"class":618},[613,45586,640],{"class":639},[613,45588,636],{"class":618},[613,45590,645],{"class":618},[613,45592,45593,45595,45597,45599,45601,45603,45605,45607],{"class":615,"line":554},[613,45594,653],{"class":652},[613,45596,656],{"class":618},[613,45598,691],{"class":659},[613,45600,669],{"class":618},[613,45602,672],{"class":652},[613,45604,675],{"class":618},[613,45606,700],{"class":639},[613,45608,681],{"class":618},[613,45610,45612,45614,45616,45618,45620,45622,45624,45626],{"class":45611,"line":684},[615,649],[613,45613,653],{"class":652},[613,45615,656],{"class":618},[613,45617,45028],{"class":659},[613,45619,669],{"class":618},[613,45621,672],{"class":652},[613,45623,675],{"class":618},[613,45625,678],{"class":639},[613,45627,681],{"class":618},[613,45629,45630,45632,45634],{"class":615,"line":705},[613,45631,708],{"class":618},[613,45633,623],{"class":622},[613,45635,645],{"class":618},[613,45637,45638],{"class":615,"line":715},[613,45639,718],{"emptyLinePlaceholder":570},[613,45641,45642,45644,45646],{"class":615,"line":721},[613,45643,619],{"class":618},[613,45645,726],{"class":622},[613,45647,645],{"class":618},[613,45649,45650,45652,45654],{"class":615,"line":731},[613,45651,734],{"class":618},[613,45653,737],{"class":622},[613,45655,645],{"class":618},[613,45657,45658,45660,45662,45664,45666,45668,45670,45672,45674,45676,45678,45680,45682,45684,45686],{"class":615,"line":754},[613,45659,757],{"class":618},[613,45661,760],{"class":622},[613,45663,789],{"class":618},[613,45665,1467],{"class":626},[613,45667,633],{"class":618},[613,45669,636],{"class":618},[613,45671,1474],{"class":618},[613,45673,945],{"class":799},[613,45675,1479],{"class":618},[613,45677,2705],{"class":799},[613,45679,1479],{"class":618},[613,45681,7668],{"class":799},[613,45683,1489],{"class":618},[613,45685,636],{"class":618},[613,45687,763],{"class":618},[613,45689,45691,45693],{"class":45690,"line":766},[615,649],[613,45692,757],{"class":618},[613,45694,45269],{"class":622},[613,45696,45698,45700,45703,45705,45707,45709,45711,45713,45715,45717,45719,45721],{"class":45697,"line":776},[615,649],[613,45699,10907],{"class":618},[613,45701,45702],{"class":626},"area",[613,45704,633],{"class":618},[613,45706,636],{"class":618},[613,45708,1474],{"class":618},[613,45710,1521],{"class":799},[613,45712,1479],{"class":618},[613,45714,1521],{"class":799},[613,45716,1479],{"class":618},[613,45718,28617],{"class":799},[613,45720,1489],{"class":618},[613,45722,3200],{"class":618},[613,45724,45726,45728,45730,45732,45734,45736],{"class":45725,"line":781},[615,649],[613,45727,10907],{"class":618},[613,45729,10323],{"class":626},[613,45731,633],{"class":618},[613,45733,636],{"class":618},[613,45735,10388],{"class":799},[613,45737,3200],{"class":618},[613,45739,45741,45743,45745,45747,45749,45751],{"class":45740,"line":807},[615,649],[613,45742,10907],{"class":618},[613,45744,8724],{"class":626},[613,45746,633],{"class":618},[613,45748,636],{"class":618},[613,45750,5939],{"class":799},[613,45752,3200],{"class":618},[613,45754,45756,45758,45760,45762,45764,45766],{"class":45755,"line":607},[615,649],[613,45757,10907],{"class":618},[613,45759,15436],{"class":626},[613,45761,633],{"class":618},[613,45763,636],{"class":618},[613,45765,37341],{"class":799},[613,45767,3200],{"class":618},[613,45769,45771,45773,45775,45777,45780],{"class":45770,"line":830},[615,649],[613,45772,28519],{"class":626},[613,45774,633],{"class":618},[613,45776,636],{"class":618},[613,45778,45779],{"class":639},"#00ff00",[613,45781,3200],{"class":618},[613,45783,45785],{"class":45784,"line":841},[615,649],[613,45786,16014],{"class":618},[613,45788,45789,45791,45793],{"class":615,"line":852},[613,45790,757],{"class":618},[613,45792,8758],{"class":622},[613,45794,763],{"class":618},[613,45796,45797,45799,45801],{"class":615,"line":862},[613,45798,885],{"class":618},[613,45800,737],{"class":622},[613,45802,645],{"class":618},[613,45804,45805,45807,45809],{"class":615,"line":608},[613,45806,708],{"class":618},[613,45808,726],{"class":622},[613,45810,645],{"class":618},[590,45812,45813],{},"You can create much more! ☔",[3268,45815,45816],{},[590,45817,45818],{},"Be careful with the performance this components render infinite particles in movement",[480,45820,902],{"id":901},[907,45822,45823,45833],{},[910,45824,45825],{},[913,45826,45827,45829,45831],{},[916,45828,918],{"align":977},[916,45830,921],{"align":977},[916,45832,924],{},[926,45834,45835,45846,45860,45871,45882,45894,45905,45916,45928,45939,45950,45961,45972],{},[913,45836,45837,45841,45844],{},[931,45838,45839],{"align":977},[1681,45840,15436],{},[931,45842,45843],{"align":977},"The size of the drops.",[931,45845,2211],{},[913,45847,45848,45852,45855],{},[931,45849,45850],{"align":977},[1681,45851,45702],{},[931,45853,45854],{"align":977},"The size of the precipitation area.",[931,45856,45857],{},[613,45858,45859],{},"10, 10, 20",[913,45861,45862,45866,45869],{},[931,45863,45864],{"align":977},[1681,45865,7772],{},[931,45867,45868],{"align":977},"The color of the drops.",[931,45870,43966],{},[913,45872,45873,45877,45880],{},[931,45874,45875],{"align":977},[1681,45876,2801],{},[931,45878,45879],{"align":977},"Color texture of the drops.",[931,45881,3725],{},[913,45883,45884,45889,45892],{},[931,45885,45886],{"align":977},[1681,45887,45888],{},"alphaMap",[931,45890,45891],{"align":977},"Alpha texture of the Drops.",[931,45893,3725],{},[913,45895,45896,45900,45903],{},[931,45897,45898],{"align":977},[1681,45899,37607],{},[931,45901,45902],{"align":977},"Enables the WebGL to know when not to render the pixel.",[931,45904,1915],{},[913,45906,45907,45911,45914],{},[931,45908,45909],{"align":977},[1681,45910,10084],{},[931,45912,45913],{"align":977},"Set the opacity of the drops.",[931,45915,23210],{},[913,45917,45918,45922,45925],{},[931,45919,45920],{"align":977},[1681,45921,10323],{},[931,45923,45924],{"align":977},"Number of drops.",[931,45926,45927],{},"5000",[913,45929,45930,45934,45937],{},[931,45931,45932],{"align":977},[1681,45933,8724],{},[931,45935,45936],{"align":977},"Drops speed.",[931,45938,2211],{},[913,45940,45941,45945,45948],{},[931,45942,45943],{"align":977},[1681,45944,45308],{},[931,45946,45947],{"align":977},"Add randomness to the drops.",[931,45949,1521],{},[913,45951,45952,45956,45959],{},[931,45953,45954],{"align":977},[1681,45955,9561],{},[931,45957,45958],{"align":977},"Whether should write to the depth buffer or not. drops.",[931,45960,941],{},[913,45962,45963,45967,45970],{},[931,45964,45965],{"align":977},[1681,45966,10096],{},[931,45968,45969],{"align":977},"Transparency on the drops texture",[931,45971,951],{},[913,45973,45974,45979,45982],{},[931,45975,45976],{"align":977},[1681,45977,45978],{},"sizeAttenuation",[931,45980,45981],{"align":977},"Keep the same size regardless distance. drops.",[931,45983,941],{},[1307,45985,1656],{},{"title":552,"searchDepth":553,"depth":554,"links":45987},[45988,45993],{"id":600,"depth":554,"text":15,"children":45989},[45990,45991,45992],{"id":45134,"depth":684,"text":45135},{"id":45348,"depth":684,"text":45349},{"id":45560,"depth":684,"text":45561},{"id":901,"depth":554,"text":902},"Flexible infinite particle flow for rain, snow, waterfall, and beam effects.",{},{"title":371,"description":45994},"oN0a-7Db4CfLOwRF8vcglYxi0o3twbiI7bqgn-6GqoY",{"id":45999,"title":375,"body":46000,"description":46409,"extension":567,"links":568,"meta":46410,"navigation":570,"path":376,"seo":46411,"stem":377,"__hash__":46412},"docs/2.api/8.staging/sky.md",{"type":477,"value":46001,"toc":46405},[46002,46007,46017,46019,46222,46224,46403],[584,46003,46004],{},[46005,46006],"staging-sky",{},[590,46008,46009,44356,46011,1126],{},[594,46010,44517],{},[1120,46012,44361,46015,44365],{"href":46013,"rel":46014},"https://threejs.org/examples/?q=sky#webgl_shaders_sky",[1124],[594,46016,375],{},[480,46018,15],{"id":600},[602,46020,46023],{"className":604,"code":46021,"highlights":46022,"language":609,"meta":552,"style":552},"\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",[554,766],[594,46024,46025,46045,46069,46087,46095,46099,46107,46128,46161,46170,46178,46206,46214],{"__ignoreMap":552},[613,46026,46027,46029,46031,46033,46035,46037,46039,46041,46043],{"class":615,"line":553},[613,46028,619],{"class":618},[613,46030,623],{"class":622},[613,46032,627],{"class":626},[613,46034,630],{"class":626},[613,46036,633],{"class":618},[613,46038,636],{"class":618},[613,46040,640],{"class":639},[613,46042,636],{"class":618},[613,46044,645],{"class":618},[613,46046,46048,46050,46052,46054,46056,46059,46061,46063,46065,46067],{"class":46047,"line":554},[615,649],[613,46049,653],{"class":652},[613,46051,656],{"class":618},[613,46053,666],{"class":659},[613,46055,663],{"class":618},[613,46057,46058],{"class":659}," Sky",[613,46060,669],{"class":618},[613,46062,672],{"class":652},[613,46064,675],{"class":618},[613,46066,678],{"class":639},[613,46068,681],{"class":618},[613,46070,46071,46073,46075,46077,46079,46081,46083,46085],{"class":615,"line":684},[613,46072,653],{"class":652},[613,46074,656],{"class":618},[613,46076,691],{"class":659},[613,46078,669],{"class":618},[613,46080,672],{"class":652},[613,46082,675],{"class":618},[613,46084,700],{"class":639},[613,46086,681],{"class":618},[613,46088,46089,46091,46093],{"class":615,"line":705},[613,46090,708],{"class":618},[613,46092,623],{"class":622},[613,46094,645],{"class":618},[613,46096,46097],{"class":615,"line":715},[613,46098,718],{"emptyLinePlaceholder":570},[613,46100,46101,46103,46105],{"class":615,"line":721},[613,46102,619],{"class":618},[613,46104,726],{"class":622},[613,46106,645],{"class":618},[613,46108,46109,46111,46113,46115,46118,46120,46122,46124,46126],{"class":615,"line":731},[613,46110,734],{"class":618},[613,46112,737],{"class":622},[613,46114,789],{"class":618},[613,46116,46117],{"class":626},"tone-mapping-exposure",[613,46119,633],{"class":618},[613,46121,636],{"class":618},[613,46123,12255],{"class":799},[613,46125,636],{"class":618},[613,46127,645],{"class":618},[613,46129,46130,46132,46134,46136,46138,46140,46142,46144,46146,46148,46150,46152,46155,46157,46159],{"class":615,"line":754},[613,46131,757],{"class":618},[613,46133,760],{"class":622},[613,46135,789],{"class":618},[613,46137,1467],{"class":626},[613,46139,633],{"class":618},[613,46141,636],{"class":618},[613,46143,1474],{"class":618},[613,46145,945],{"class":799},[613,46147,1479],{"class":618},[613,46149,6383],{"class":799},[613,46151,1479],{"class":618},[613,46153,46154],{"class":799},"200",[613,46156,1489],{"class":618},[613,46158,636],{"class":618},[613,46160,763],{"class":618},[613,46162,46164,46166,46168],{"class":46163,"line":766},[615,649],[613,46165,757],{"class":618},[613,46167,375],{"class":622},[613,46169,763],{"class":618},[613,46171,46172,46174,46176],{"class":615,"line":776},[613,46173,757],{"class":618},[613,46175,771],{"class":622},[613,46177,763],{"class":618},[613,46179,46180,46182,46184,46186,46188,46190,46192,46194,46196,46198,46200,46202,46204],{"class":615,"line":781},[613,46181,757],{"class":618},[613,46183,8313],{"class":622},[613,46185,789],{"class":618},[613,46187,1997],{"class":626},[613,46189,633],{"class":618},[613,46191,636],{"class":618},[613,46193,1474],{"class":618},[613,46195,10388],{"class":799},[613,46197,1479],{"class":618},[613,46199,28617],{"class":799},[613,46201,1489],{"class":618},[613,46203,636],{"class":618},[613,46205,763],{"class":618},[613,46207,46208,46210,46212],{"class":615,"line":807},[613,46209,885],{"class":618},[613,46211,737],{"class":622},[613,46213,645],{"class":618},[613,46215,46216,46218,46220],{"class":615,"line":607},[613,46217,708],{"class":618},[613,46219,726],{"class":622},[613,46221,645],{"class":618},[480,46223,902],{"id":901},[907,46225,46226,46240],{},[910,46227,46228],{},[913,46229,46230,46232,46234,46236,46238],{},[916,46231,8362],{"align":977},[916,46233,6179],{"align":977},[916,46235,921],{"align":977},[916,46237,924],{"align":977},[916,46239,32144],{"align":977},[926,46241,46242,46263,46287,46313,46336,46356,46383],{},[913,46243,46244,46249,46253,46256,46261],{},[931,46245,46246],{"align":977},[1681,46247,46248],{},"turbidity",[931,46250,46251],{"align":977},[594,46252,5565],{},[931,46254,46255],{"align":977},"Haziness",[931,46257,46258],{"align":977},[594,46259,46260],{},"3.4",[931,46262,44307],{"align":977},[913,46264,46265,46270,46274,46281,46285],{},[931,46266,46267],{"align":977},[1681,46268,46269],{},"rayleigh",[931,46271,46272],{"align":977},[594,46273,5565],{},[931,46275,46276],{"align":977},[1120,46277,46280],{"href":46278,"rel":46279},"https://en.wikipedia.org/wiki/Rayleigh_scattering",[1124],"Rayleigh scattering",[931,46282,46283],{"align":977},[594,46284,2705],{},[931,46286,44307],{"align":977},[913,46288,46289,46294,46298,46306,46311],{},[931,46290,46291],{"align":977},[1681,46292,46293],{},"mieCoefficient",[931,46295,46296],{"align":977},[594,46297,5565],{},[931,46299,46300,46305],{"align":977},[1120,46301,46304],{"href":46302,"rel":46303},"https://en.wikipedia.org/wiki/Mie_scattering",[1124],"Mie scattering"," amount",[931,46307,46308],{"align":977},[594,46309,46310],{},"0.005",[931,46312,44307],{"align":977},[913,46314,46315,46320,46324,46330,46334],{},[931,46316,46317],{"align":977},[1681,46318,46319],{},"mieDirectionalG",[931,46321,46322],{"align":977},[594,46323,5565],{},[931,46325,46326,46329],{"align":977},[1120,46327,46304],{"href":46302,"rel":46328},[1124]," direction",[931,46331,46332],{"align":977},[594,46333,4096],{},[931,46335,44307],{"align":977},[913,46337,46338,46343,46347,46350,46354],{},[931,46339,46340],{"align":977},[1681,46341,46342],{},"elevation",[931,46344,46345],{"align":977},[594,46346,5565],{},[931,46348,46349],{"align":977},"Sun's elevation from the horizon, in degrees",[931,46351,46352],{"align":977},[594,46353,27924],{},[931,46355,44307],{"align":977},[913,46357,46358,46363,46367,46376,46381],{},[931,46359,46360],{"align":977},[1681,46361,46362],{},"azimuth",[931,46364,46365],{"align":977},[594,46366,5565],{},[931,46368,46369,46370,46375],{"align":977},"Sun's ",[1120,46371,46374],{"href":46372,"rel":46373},"https://en.wikipedia.org/wiki/Solar_azimuth_angle",[1124],"azimuth angle",", in degrees – its horizontal coordinate on the horizon",[931,46377,46378],{"align":977},[594,46379,46380],{},"180",[931,46382,44307],{"align":977},[913,46384,46385,46389,46393,46396,46401],{},[931,46386,46387],{"align":977},[1681,46388,12159],{},[931,46390,46391],{"align":977},[594,46392,5565],{},[931,46394,46395],{"align":977},"Sky box scale",[931,46397,46398],{"align":977},[594,46399,46400],{},"450000",[931,46402,44307],{"align":977},[1307,46404,1656],{},{"title":552,"searchDepth":553,"depth":554,"links":46406},[46407,46408],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},"Wrapper for the Three.js Sky add-on with sun position controls.",{},{"title":375,"description":46409},"z9xEmwuzWS7Jr3s3_7eT9BeV1McRoKp3ZlWGZa_0yWI",{"id":46414,"title":379,"body":46415,"description":46820,"extension":567,"links":568,"meta":46821,"navigation":570,"path":380,"seo":46822,"stem":381,"__hash__":46823},"docs/2.api/8.staging/smoke.md",{"type":477,"value":46416,"toc":46814},[46417,46422,46428,46430,46435,46440,46610,46612,46804,46808,46812],[2343,46418,46419],{},[46420,46421],"staging-smoke",{},[590,46423,46424,46427],{},[594,46425,46426],{},"\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",[480,46429,15],{"id":600},[3268,46431,46432],{},[590,46433,46434],{},"Smoke component comes with a default texture abstraction it needs to be wrapped by a Suspense component",[590,46436,44971,46437,46439],{},[594,46438,46426],{}," component without passing any props, but still if you want you can tweak the props to find the best setup for you",[602,46441,46443],{"className":604,"code":46442,"language":609,"meta":552,"style":552},"\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",[594,46444,46445,46465,46483,46502,46510,46514,46522,46530,46562,46570,46578,46586,46594,46602],{"__ignoreMap":552},[613,46446,46447,46449,46451,46453,46455,46457,46459,46461,46463],{"class":615,"line":553},[613,46448,619],{"class":618},[613,46450,623],{"class":622},[613,46452,627],{"class":626},[613,46454,630],{"class":626},[613,46456,633],{"class":618},[613,46458,636],{"class":618},[613,46460,640],{"class":639},[613,46462,636],{"class":618},[613,46464,645],{"class":618},[613,46466,46467,46469,46471,46473,46475,46477,46479,46481],{"class":615,"line":554},[613,46468,653],{"class":652},[613,46470,656],{"class":618},[613,46472,691],{"class":659},[613,46474,669],{"class":618},[613,46476,672],{"class":652},[613,46478,675],{"class":618},[613,46480,700],{"class":639},[613,46482,681],{"class":618},[613,46484,46485,46487,46489,46492,46494,46496,46498,46500],{"class":615,"line":684},[613,46486,653],{"class":652},[613,46488,656],{"class":618},[613,46490,46491],{"class":659}," Smoke",[613,46493,669],{"class":618},[613,46495,672],{"class":652},[613,46497,675],{"class":618},[613,46499,678],{"class":639},[613,46501,681],{"class":618},[613,46503,46504,46506,46508],{"class":615,"line":705},[613,46505,708],{"class":618},[613,46507,623],{"class":622},[613,46509,645],{"class":618},[613,46511,46512],{"class":615,"line":715},[613,46513,718],{"emptyLinePlaceholder":570},[613,46515,46516,46518,46520],{"class":615,"line":721},[613,46517,619],{"class":618},[613,46519,726],{"class":622},[613,46521,645],{"class":618},[613,46523,46524,46526,46528],{"class":615,"line":731},[613,46525,734],{"class":618},[613,46527,737],{"class":622},[613,46529,645],{"class":618},[613,46531,46532,46534,46536,46538,46540,46542,46544,46546,46548,46550,46552,46554,46556,46558,46560],{"class":615,"line":754},[613,46533,757],{"class":618},[613,46535,760],{"class":622},[613,46537,789],{"class":618},[613,46539,1467],{"class":626},[613,46541,633],{"class":618},[613,46543,636],{"class":618},[613,46545,1474],{"class":618},[613,46547,945],{"class":799},[613,46549,1479],{"class":618},[613,46551,2705],{"class":799},[613,46553,1479],{"class":618},[613,46555,7668],{"class":799},[613,46557,1489],{"class":618},[613,46559,636],{"class":618},[613,46561,763],{"class":618},[613,46563,46564,46566,46568],{"class":615,"line":766},[613,46565,757],{"class":618},[613,46567,20168],{"class":622},[613,46569,645],{"class":618},[613,46571,46572,46574,46576],{"class":615,"line":776},[613,46573,833],{"class":618},[613,46575,379],{"class":622},[613,46577,763],{"class":618},[613,46579,46580,46582,46584],{"class":615,"line":781},[613,46581,875],{"class":618},[613,46583,20168],{"class":622},[613,46585,645],{"class":618},[613,46587,46588,46590,46592],{"class":615,"line":807},[613,46589,757],{"class":618},[613,46591,8758],{"class":622},[613,46593,763],{"class":618},[613,46595,46596,46598,46600],{"class":615,"line":607},[613,46597,885],{"class":618},[613,46599,737],{"class":622},[613,46601,645],{"class":618},[613,46603,46604,46606,46608],{"class":615,"line":830},[613,46605,708],{"class":618},[613,46607,726],{"class":622},[613,46609,645],{"class":618},[480,46611,902],{"id":901},[907,46613,46614,46626],{},[910,46615,46616],{},[913,46617,46618,46620,46622,46624],{},[916,46619,8362],{"align":977},[916,46621,6179],{"align":977},[916,46623,921],{"align":977},[916,46625,924],{"align":977},[926,46627,46628,46646,46663,46680,46697,46714,46734,46752,46770,46788],{},[913,46629,46630,46634,46638,46641],{},[931,46631,46632],{"align":977},[1681,46633,7772],{},[931,46635,46636],{"align":977},[594,46637,7787],{},[931,46639,46640],{"align":977},"The color of the smoke.",[931,46642,46643],{"align":977},[594,46644,46645],{},"'#ffffff'",[913,46647,46648,46652,46656,46659],{},[931,46649,46650],{"align":977},[1681,46651,10084],{},[931,46653,46654],{"align":977},[594,46655,5565],{},[931,46657,46658],{"align":977},"The strength of the opacity.",[931,46660,46661],{"align":977},[594,46662,1521],{},[913,46664,46665,46669,46673,46676],{},[931,46666,46667],{"align":977},[1681,46668,8724],{},[931,46670,46671],{"align":977},[594,46672,5565],{},[931,46674,46675],{"align":977},"The rotation speed of the smoke.",[931,46677,46678],{"align":977},[594,46679,37354],{},[913,46681,46682,46686,46690,46693],{},[931,46683,46684],{"align":977},[1681,46685,11572],{},[931,46687,46688],{"align":977},[594,46689,5565],{},[931,46691,46692],{"align":977},"The base depth.",[931,46694,46695],{"align":977},[594,46696,37341],{},[913,46698,46699,46703,46707,46710],{},[931,46700,46701],{"align":977},[1681,46702,28505],{},[931,46704,46705],{"align":977},[594,46706,5565],{},[931,46708,46709],{"align":977},"The number of smoke to render.",[931,46711,46712],{"align":977},[594,46713,1486],{},[913,46715,46716,46720,46724,46727],{},[931,46717,46718],{"align":977},[1681,46719,2777],{},[931,46721,46722],{"align":977},[594,46723,3641],{},[931,46725,46726],{"align":977},"The texture of the smoke.",[931,46728,46729],{"align":977},[1120,46730,46733],{"href":46731,"rel":46732},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/clouds/defaultCloud.png",[1124],"link",[913,46735,46736,46741,46745,46748],{},[931,46737,46738],{"align":977},[1681,46739,46740],{},"depthTest",[931,46742,46743],{"align":977},[594,46744,16208],{},[931,46746,46747],{"align":977},"The depthTest.",[931,46749,46750],{"align":977},[594,46751,951],{},[913,46753,46754,46759,46763,46766],{},[931,46755,46756],{"align":977},[1681,46757,46758],{},"spreadY",[931,46760,46761],{"align":977},[594,46762,5565],{},[931,46764,46765],{"align":977},"Spread on the Y axis.",[931,46767,46768],{"align":977},[594,46769,2211],{},[913,46771,46772,46777,46781,46784],{},[931,46773,46774],{"align":977},[1681,46775,46776],{},"spreadX",[931,46778,46779],{"align":977},[594,46780,5565],{},[931,46782,46783],{"align":977},"Spread on the X axis.",[931,46785,46786],{"align":977},[594,46787,1521],{},[913,46789,46790,46794,46798,46800],{},[931,46791,46792],{"align":977},[1681,46793,792],{},[931,46795,46796],{"align":977},[594,46797,5565],{},[931,46799,792],{"align":977},[931,46801,46802],{"align":977},[594,46803,1901],{},[4191,46805,46807],{"id":46806},"default-texture","Default texture",[590,46809,46810],{},[8508,46811],{"alt":46807,"src":46731},[1307,46813,1656],{},{"title":552,"searchDepth":553,"depth":554,"links":46815},[46816,46817],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902,"children":46818},[46819],{"id":46806,"depth":684,"text":46807},"Beautiful smoke, cloud, and fog effect using textures and transparency.",{},{"title":379,"description":46820},"vwnSNX06jUUY3lZUYaNYvnoK84rsl-FxeFCuDKNEtR0",{"id":46825,"title":383,"body":46826,"description":48727,"extension":567,"links":568,"meta":48728,"navigation":570,"path":384,"seo":48729,"stem":385,"__hash__":48730},"docs/2.api/8.staging/sparkles.md",{"type":477,"value":46827,"toc":48718},[46828,46834,46836,46840,47021,47025,47028,47320,47324,47342,47369,47375,47392,47693,47697,47713,47742,47749,48076,48078,48715],[590,46829,46830,46833],{},[594,46831,46832],{},"\u003CSparkles />"," makes sparkles on your geometry's vertices – optionally guided by a directional light.",[480,46835,15],{"id":600},[4191,46837,46839],{"id":46838},"basic","Basic",[602,46841,46844],{"className":604,"code":46842,"highlights":46843,"language":609,"meta":552,"style":552},"\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",[684,781],[594,46845,46846,46866,46884,46904,46912,46916,46924,46932,46964,46972,46980,46989,46997,47005,47013],{"__ignoreMap":552},[613,46847,46848,46850,46852,46854,46856,46858,46860,46862,46864],{"class":615,"line":553},[613,46849,619],{"class":618},[613,46851,623],{"class":622},[613,46853,627],{"class":626},[613,46855,630],{"class":626},[613,46857,633],{"class":618},[613,46859,636],{"class":618},[613,46861,640],{"class":639},[613,46863,636],{"class":618},[613,46865,645],{"class":618},[613,46867,46868,46870,46872,46874,46876,46878,46880,46882],{"class":615,"line":554},[613,46869,653],{"class":652},[613,46871,656],{"class":618},[613,46873,691],{"class":659},[613,46875,669],{"class":618},[613,46877,672],{"class":652},[613,46879,675],{"class":618},[613,46881,700],{"class":639},[613,46883,681],{"class":618},[613,46885,46887,46889,46891,46894,46896,46898,46900,46902],{"class":46886,"line":684},[615,649],[613,46888,653],{"class":652},[613,46890,656],{"class":618},[613,46892,46893],{"class":659}," Sparkles",[613,46895,669],{"class":618},[613,46897,672],{"class":652},[613,46899,675],{"class":618},[613,46901,678],{"class":639},[613,46903,681],{"class":618},[613,46905,46906,46908,46910],{"class":615,"line":705},[613,46907,708],{"class":618},[613,46909,623],{"class":622},[613,46911,645],{"class":618},[613,46913,46914],{"class":615,"line":715},[613,46915,718],{"emptyLinePlaceholder":570},[613,46917,46918,46920,46922],{"class":615,"line":721},[613,46919,619],{"class":618},[613,46921,726],{"class":622},[613,46923,645],{"class":618},[613,46925,46926,46928,46930],{"class":615,"line":731},[613,46927,734],{"class":618},[613,46929,737],{"class":622},[613,46931,645],{"class":618},[613,46933,46934,46936,46938,46940,46942,46944,46946,46948,46950,46952,46954,46956,46958,46960,46962],{"class":615,"line":754},[613,46935,757],{"class":618},[613,46937,760],{"class":622},[613,46939,789],{"class":618},[613,46941,1467],{"class":626},[613,46943,633],{"class":618},[613,46945,636],{"class":618},[613,46947,1474],{"class":618},[613,46949,945],{"class":799},[613,46951,1479],{"class":618},[613,46953,2705],{"class":799},[613,46955,1479],{"class":618},[613,46957,7668],{"class":799},[613,46959,1489],{"class":618},[613,46961,636],{"class":618},[613,46963,763],{"class":618},[613,46965,46966,46968,46970],{"class":615,"line":766},[613,46967,757],{"class":618},[613,46969,836],{"class":622},[613,46971,645],{"class":618},[613,46973,46974,46976,46978],{"class":615,"line":776},[613,46975,833],{"class":618},[613,46977,4083],{"class":622},[613,46979,763],{"class":618},[613,46981,46983,46985,46987],{"class":46982,"line":781},[615,649],[613,46984,833],{"class":618},[613,46986,383],{"class":622},[613,46988,763],{"class":618},[613,46990,46991,46993,46995],{"class":615,"line":807},[613,46992,875],{"class":618},[613,46994,836],{"class":622},[613,46996,645],{"class":618},[613,46998,46999,47001,47003],{"class":615,"line":607},[613,47000,757],{"class":618},[613,47002,8758],{"class":622},[613,47004,763],{"class":618},[613,47006,47007,47009,47011],{"class":615,"line":830},[613,47008,885],{"class":618},[613,47010,737],{"class":622},[613,47012,645],{"class":618},[613,47014,47015,47017,47019],{"class":615,"line":841},[613,47016,708],{"class":618},[613,47018,726],{"class":622},[613,47020,645],{"class":618},[4191,47022,47024],{"id":47023},"with-tresdirectionallight","With TresDirectionalLight",[590,47026,47027],{},"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.",[602,47029,47032],{"className":604,"code":47030,"highlights":47031,"language":609,"meta":552,"style":552},"\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",[721,830,862],[594,47033,47034,47054,47072,47090,47108,47112,47126,47134,47138,47146,47154,47186,47194,47202,47225,47233,47239,47252,47278,47292,47296,47304,47312],{"__ignoreMap":552},[613,47035,47036,47038,47040,47042,47044,47046,47048,47050,47052],{"class":615,"line":553},[613,47037,619],{"class":618},[613,47039,623],{"class":622},[613,47041,627],{"class":626},[613,47043,630],{"class":626},[613,47045,633],{"class":618},[613,47047,636],{"class":618},[613,47049,640],{"class":639},[613,47051,636],{"class":618},[613,47053,645],{"class":618},[613,47055,47056,47058,47060,47062,47064,47066,47068,47070],{"class":615,"line":554},[613,47057,653],{"class":652},[613,47059,656],{"class":618},[613,47061,691],{"class":659},[613,47063,669],{"class":618},[613,47065,672],{"class":652},[613,47067,675],{"class":618},[613,47069,700],{"class":639},[613,47071,681],{"class":618},[613,47073,47074,47076,47078,47080,47082,47084,47086,47088],{"class":615,"line":684},[613,47075,653],{"class":652},[613,47077,656],{"class":618},[613,47079,46893],{"class":659},[613,47081,669],{"class":618},[613,47083,672],{"class":652},[613,47085,675],{"class":618},[613,47087,678],{"class":639},[613,47089,681],{"class":618},[613,47091,47092,47094,47096,47098,47100,47102,47104,47106],{"class":615,"line":705},[613,47093,653],{"class":652},[613,47095,656],{"class":618},[613,47097,3567],{"class":659},[613,47099,669],{"class":618},[613,47101,672],{"class":652},[613,47103,675],{"class":618},[613,47105,609],{"class":639},[613,47107,681],{"class":618},[613,47109,47110],{"class":615,"line":715},[613,47111,718],{"emptyLinePlaceholder":570},[613,47113,47115,47117,47120,47122,47124],{"class":47114,"line":721},[615,649],[613,47116,2463],{"class":626},[613,47118,47119],{"class":659}," directionalLightRef ",[613,47121,633],{"class":618},[613,47123,3567],{"class":2482},[613,47125,6745],{"class":659},[613,47127,47128,47130,47132],{"class":615,"line":731},[613,47129,708],{"class":618},[613,47131,623],{"class":622},[613,47133,645],{"class":618},[613,47135,47136],{"class":615,"line":754},[613,47137,718],{"emptyLinePlaceholder":570},[613,47139,47140,47142,47144],{"class":615,"line":766},[613,47141,619],{"class":618},[613,47143,726],{"class":622},[613,47145,645],{"class":618},[613,47147,47148,47150,47152],{"class":615,"line":776},[613,47149,734],{"class":618},[613,47151,737],{"class":622},[613,47153,645],{"class":618},[613,47155,47156,47158,47160,47162,47164,47166,47168,47170,47172,47174,47176,47178,47180,47182,47184],{"class":615,"line":781},[613,47157,757],{"class":618},[613,47159,760],{"class":622},[613,47161,789],{"class":618},[613,47163,1467],{"class":626},[613,47165,633],{"class":618},[613,47167,636],{"class":618},[613,47169,1474],{"class":618},[613,47171,945],{"class":799},[613,47173,1479],{"class":618},[613,47175,2705],{"class":799},[613,47177,1479],{"class":618},[613,47179,7668],{"class":799},[613,47181,1489],{"class":618},[613,47183,636],{"class":618},[613,47185,763],{"class":618},[613,47187,47188,47190,47192],{"class":615,"line":807},[613,47189,757],{"class":618},[613,47191,836],{"class":622},[613,47193,645],{"class":618},[613,47195,47196,47198,47200],{"class":615,"line":607},[613,47197,833],{"class":618},[613,47199,4083],{"class":622},[613,47201,763],{"class":618},[613,47203,47205,47207,47209,47211,47214,47216,47218,47221,47223],{"class":47204,"line":830},[615,649],[613,47206,833],{"class":618},[613,47208,383],{"class":622},[613,47210,789],{"class":618},[613,47212,47213],{"class":626},"directional-light",[613,47215,633],{"class":618},[613,47217,636],{"class":618},[613,47219,47220],{"class":659},"directionalLightRef",[613,47222,636],{"class":618},[613,47224,763],{"class":618},[613,47226,47227,47229,47231],{"class":615,"line":841},[613,47228,875],{"class":618},[613,47230,836],{"class":622},[613,47232,645],{"class":618},[613,47234,47235,47237],{"class":615,"line":852},[613,47236,757],{"class":618},[613,47238,15969],{"class":622},[613,47240,47242,47244,47246,47248,47250],{"class":47241,"line":862},[615,649],[613,47243,10893],{"class":626},[613,47245,633],{"class":618},[613,47247,636],{"class":618},[613,47249,47220],{"class":639},[613,47251,3200],{"class":618},[613,47253,47254,47256,47258,47260,47262,47264,47266,47268,47270,47272,47274,47276],{"class":615,"line":608},[613,47255,10907],{"class":618},[613,47257,1467],{"class":626},[613,47259,633],{"class":618},[613,47261,636],{"class":618},[613,47263,1474],{"class":618},[613,47265,2705],{"class":799},[613,47267,1479],{"class":618},[613,47269,2705],{"class":799},[613,47271,1479],{"class":618},[613,47273,2705],{"class":799},[613,47275,1489],{"class":618},[613,47277,3200],{"class":618},[613,47279,47280,47282,47284,47286,47288,47290],{"class":615,"line":882},[613,47281,10907],{"class":618},[613,47283,1894],{"class":626},[613,47285,633],{"class":618},[613,47287,636],{"class":618},[613,47289,800],{"class":799},[613,47291,3200],{"class":618},[613,47293,47294],{"class":615,"line":892},[613,47295,16014],{"class":618},[613,47297,47298,47300,47302],{"class":615,"line":2671},[613,47299,757],{"class":618},[613,47301,8758],{"class":622},[613,47303,763],{"class":618},[613,47305,47306,47308,47310],{"class":615,"line":2680},[613,47307,885],{"class":618},[613,47309,737],{"class":622},[613,47311,645],{"class":618},[613,47313,47314,47316,47318],{"class":615,"line":2714},[613,47315,708],{"class":618},[613,47317,726],{"class":622},[613,47319,645],{"class":618},[4191,47321,47323],{"id":47322},"sequences","Sequences",[590,47325,47326,47327,47330,47331,8439,47335,47337,47338,47341],{},"All props beginning with ",[594,47328,47329],{},":sequence-"," are used to define how a particle changes as it progresses ",[1120,47332,47334],{"href":47333},"#mixes","(See also: Mixes)",[594,47336,47329],{}," props are of the type ",[594,47339,47340],{},"Gradient\u003CT>",", which can be any one of:",[2261,47343,47344,47350,47356],{},[2264,47345,47346,47349],{},[594,47347,47348],{},"T",": a single value",[2264,47351,47352,47355],{},[594,47353,47354],{},"[T, T, T, ...]",": an evenly distributed series of values",[2264,47357,47358,47361,47362,47364,47365,2298,47367,1126],{},[594,47359,47360],{},"[[number, T], [number, T], ...]",": an unevently distributed series of values, where ",[594,47363,5565],{}," is a gradient \"stop\" from ",[594,47366,945],{},[594,47368,1901],{},[590,47370,47371,47372,1198],{},"For example, all of these are acceptable values for ",[594,47373,47374],{},"Gradient\u003CTresColor>",[2261,47376,47377,47382,47387],{},[2264,47378,47379],{},[594,47380,47381],{},"'red'",[2264,47383,47384],{},[594,47385,47386],{},"['red', 'blue', 'green']",[2264,47388,47389],{},[594,47390,47391],{},"[[0.1, 'red'], [0.25, 'blue'], [0.5, 'green']]",[602,47393,47396],{"className":604,"code":47394,"highlights":47395,"language":609,"meta":552,"style":552},"\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",[781,807,607,830],[594,47397,47398,47418,47436,47454,47462,47466,47474,47482,47514,47522,47530,47538,47580,47629,47657,47661,47669,47677,47685],{"__ignoreMap":552},[613,47399,47400,47402,47404,47406,47408,47410,47412,47414,47416],{"class":615,"line":553},[613,47401,619],{"class":618},[613,47403,623],{"class":622},[613,47405,627],{"class":626},[613,47407,630],{"class":626},[613,47409,633],{"class":618},[613,47411,636],{"class":618},[613,47413,640],{"class":639},[613,47415,636],{"class":618},[613,47417,645],{"class":618},[613,47419,47420,47422,47424,47426,47428,47430,47432,47434],{"class":615,"line":554},[613,47421,653],{"class":652},[613,47423,656],{"class":618},[613,47425,691],{"class":659},[613,47427,669],{"class":618},[613,47429,672],{"class":652},[613,47431,675],{"class":618},[613,47433,700],{"class":639},[613,47435,681],{"class":618},[613,47437,47438,47440,47442,47444,47446,47448,47450,47452],{"class":615,"line":684},[613,47439,653],{"class":652},[613,47441,656],{"class":618},[613,47443,46893],{"class":659},[613,47445,669],{"class":618},[613,47447,672],{"class":652},[613,47449,675],{"class":618},[613,47451,678],{"class":639},[613,47453,681],{"class":618},[613,47455,47456,47458,47460],{"class":615,"line":705},[613,47457,708],{"class":618},[613,47459,623],{"class":622},[613,47461,645],{"class":618},[613,47463,47464],{"class":615,"line":715},[613,47465,718],{"emptyLinePlaceholder":570},[613,47467,47468,47470,47472],{"class":615,"line":721},[613,47469,619],{"class":618},[613,47471,726],{"class":622},[613,47473,645],{"class":618},[613,47475,47476,47478,47480],{"class":615,"line":731},[613,47477,734],{"class":618},[613,47479,737],{"class":622},[613,47481,645],{"class":618},[613,47483,47484,47486,47488,47490,47492,47494,47496,47498,47500,47502,47504,47506,47508,47510,47512],{"class":615,"line":754},[613,47485,757],{"class":618},[613,47487,760],{"class":622},[613,47489,789],{"class":618},[613,47491,1467],{"class":626},[613,47493,633],{"class":618},[613,47495,636],{"class":618},[613,47497,1474],{"class":618},[613,47499,945],{"class":799},[613,47501,1479],{"class":618},[613,47503,2705],{"class":799},[613,47505,1479],{"class":618},[613,47507,7668],{"class":799},[613,47509,1489],{"class":618},[613,47511,636],{"class":618},[613,47513,763],{"class":618},[613,47515,47516,47518,47520],{"class":615,"line":766},[613,47517,757],{"class":618},[613,47519,836],{"class":622},[613,47521,645],{"class":618},[613,47523,47524,47526,47528],{"class":615,"line":776},[613,47525,833],{"class":618},[613,47527,4083],{"class":622},[613,47529,763],{"class":618},[613,47531,47533,47535],{"class":47532,"line":781},[615,649],[613,47534,833],{"class":618},[613,47536,47537],{"class":622},"Sparkles\n",[613,47539,47541,47543,47546,47548,47550,47552,47554,47556,47558,47560,47562,47565,47567,47569,47571,47574,47576,47578],{"class":47540,"line":807},[615,649],[613,47542,8243],{"class":618},[613,47544,47545],{"class":626},"sequence-color",[613,47547,633],{"class":618},[613,47549,636],{"class":618},[613,47551,1474],{"class":618},[613,47553,2488],{"class":618},[613,47555,34927],{"class":639},[613,47557,2488],{"class":618},[613,47559,1479],{"class":618},[613,47561,2488],{"class":618},[613,47563,47564],{"class":639},"blue",[613,47566,2488],{"class":618},[613,47568,1479],{"class":618},[613,47570,2488],{"class":618},[613,47572,47573],{"class":639},"green",[613,47575,2488],{"class":618},[613,47577,1489],{"class":618},[613,47579,3200],{"class":618},[613,47581,47583,47585,47588,47590,47592,47594,47596,47598,47600,47602,47605,47607,47609,47611,47613,47615,47617,47619,47621,47623,47625,47627],{"class":47582,"line":607},[615,649],[613,47584,8243],{"class":618},[613,47586,47587],{"class":626},"sequence-alpha",[613,47589,633],{"class":618},[613,47591,636],{"class":618},[613,47593,30959],{"class":618},[613,47595,12421],{"class":799},[613,47597,1479],{"class":618},[613,47599,12421],{"class":799},[613,47601,30972],{"class":618},[613,47603,47604],{"class":799},"0.10",[613,47606,1479],{"class":618},[613,47608,12299],{"class":799},[613,47610,30972],{"class":618},[613,47612,1521],{"class":799},[613,47614,1479],{"class":618},[613,47616,12299],{"class":799},[613,47618,30972],{"class":618},[613,47620,33162],{"class":799},[613,47622,1479],{"class":618},[613,47624,12421],{"class":799},[613,47626,31009],{"class":618},[613,47628,3200],{"class":618},[613,47630,47632,47634,47637,47639,47641,47643,47645,47647,47649,47651,47653,47655],{"class":47631,"line":830},[615,649],[613,47633,8243],{"class":618},[613,47635,47636],{"class":626},"sequence-size",[613,47638,633],{"class":618},[613,47640,636],{"class":618},[613,47642,1474],{"class":618},[613,47644,12421],{"class":799},[613,47646,1479],{"class":618},[613,47648,12299],{"class":799},[613,47650,1479],{"class":618},[613,47652,1521],{"class":799},[613,47654,1489],{"class":618},[613,47656,3200],{"class":618},[613,47658,47659],{"class":615,"line":841},[613,47660,8297],{"class":618},[613,47662,47663,47665,47667],{"class":615,"line":852},[613,47664,875],{"class":618},[613,47666,836],{"class":622},[613,47668,645],{"class":618},[613,47670,47671,47673,47675],{"class":615,"line":862},[613,47672,757],{"class":618},[613,47674,8758],{"class":622},[613,47676,763],{"class":618},[613,47678,47679,47681,47683],{"class":615,"line":608},[613,47680,885],{"class":618},[613,47682,737],{"class":622},[613,47684,645],{"class":618},[613,47686,47687,47689,47691],{"class":615,"line":882},[613,47688,708],{"class":618},[613,47690,726],{"class":622},[613,47692,645],{"class":618},[4191,47694,47696],{"id":47695},"mixes","Mixes",[590,47698,47326,47699,47702,47703,47705,47706,47709,47710,1126],{},[594,47700,47701],{},":mix-"," allow you to specify how a particle \"progresses\" through a corresponding ",[594,47704,47329],{}," prop. E.g., ",[594,47707,47708],{},":mix-alpha"," affects ",[594,47711,47712],{},":sequence-alpha",[2261,47714,47715,47733],{},[2264,47716,47717,47718,47720,47721,47723,47724,47726,47727],{},"If the ",[594,47719,47701],{}," prop is ",[594,47722,12421],{},", 'progress' through the ",[594,47725,47329],{}," is determined entirely by the light shining on the surface of the sparkling mesh.",[1120,47728,47730],{"href":47729},"#precisely",[47731,47732,1901],"sup",{},[2264,47734,47717,47735,47720,47737,47723,47739,47741],{},[594,47736,47701],{},[594,47738,12299],{},[594,47740,47329],{}," is determined entirely by the particle's lifetime.",[590,47743,47744,47745,47748],{},"More precisely, the value is determined by the dot product of the ",[594,47746,47747],{},"directionalLight","'s inverted normalized position and each of the sparkling mesh's vertex normals.",[602,47750,47753],{"className":604,"code":47751,"highlights":47752,"language":609,"meta":552,"style":552},"\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",[684,830,841,852,862,608],[594,47754,47755,47775,47793,47812,47830,47834,47846,47854,47858,47866,47874,47906,47914,47922,47929,47944,47960,47976,47992,47996,48004,48010,48022,48048,48052,48060,48068],{"__ignoreMap":552},[613,47756,47757,47759,47761,47763,47765,47767,47769,47771,47773],{"class":615,"line":553},[613,47758,619],{"class":618},[613,47760,623],{"class":622},[613,47762,627],{"class":626},[613,47764,630],{"class":626},[613,47766,633],{"class":618},[613,47768,636],{"class":618},[613,47770,640],{"class":639},[613,47772,636],{"class":618},[613,47774,645],{"class":618},[613,47776,47777,47779,47781,47783,47785,47787,47789,47791],{"class":615,"line":554},[613,47778,653],{"class":652},[613,47780,656],{"class":618},[613,47782,691],{"class":659},[613,47784,669],{"class":618},[613,47786,672],{"class":652},[613,47788,675],{"class":618},[613,47790,700],{"class":639},[613,47792,681],{"class":618},[613,47794,47796,47798,47800,47802,47804,47806,47808,47810],{"class":47795,"line":684},[615,649],[613,47797,653],{"class":652},[613,47799,656],{"class":618},[613,47801,46893],{"class":659},[613,47803,669],{"class":618},[613,47805,672],{"class":652},[613,47807,675],{"class":618},[613,47809,678],{"class":639},[613,47811,681],{"class":618},[613,47813,47814,47816,47818,47820,47822,47824,47826,47828],{"class":615,"line":705},[613,47815,653],{"class":652},[613,47817,656],{"class":618},[613,47819,3567],{"class":659},[613,47821,669],{"class":618},[613,47823,672],{"class":652},[613,47825,675],{"class":618},[613,47827,609],{"class":639},[613,47829,681],{"class":618},[613,47831,47832],{"class":615,"line":715},[613,47833,718],{"emptyLinePlaceholder":570},[613,47835,47836,47838,47840,47842,47844],{"class":615,"line":721},[613,47837,2463],{"class":626},[613,47839,47119],{"class":659},[613,47841,633],{"class":618},[613,47843,3567],{"class":2482},[613,47845,6745],{"class":659},[613,47847,47848,47850,47852],{"class":615,"line":731},[613,47849,708],{"class":618},[613,47851,623],{"class":622},[613,47853,645],{"class":618},[613,47855,47856],{"class":615,"line":754},[613,47857,718],{"emptyLinePlaceholder":570},[613,47859,47860,47862,47864],{"class":615,"line":766},[613,47861,619],{"class":618},[613,47863,726],{"class":622},[613,47865,645],{"class":618},[613,47867,47868,47870,47872],{"class":615,"line":776},[613,47869,734],{"class":618},[613,47871,737],{"class":622},[613,47873,645],{"class":618},[613,47875,47876,47878,47880,47882,47884,47886,47888,47890,47892,47894,47896,47898,47900,47902,47904],{"class":615,"line":781},[613,47877,757],{"class":618},[613,47879,760],{"class":622},[613,47881,789],{"class":618},[613,47883,1467],{"class":626},[613,47885,633],{"class":618},[613,47887,636],{"class":618},[613,47889,1474],{"class":618},[613,47891,945],{"class":799},[613,47893,1479],{"class":618},[613,47895,2705],{"class":799},[613,47897,1479],{"class":618},[613,47899,7668],{"class":799},[613,47901,1489],{"class":618},[613,47903,636],{"class":618},[613,47905,763],{"class":618},[613,47907,47908,47910,47912],{"class":615,"line":807},[613,47909,757],{"class":618},[613,47911,836],{"class":622},[613,47913,645],{"class":618},[613,47915,47916,47918,47920],{"class":615,"line":607},[613,47917,833],{"class":618},[613,47919,4083],{"class":622},[613,47921,763],{"class":618},[613,47923,47925,47927],{"class":47924,"line":830},[615,649],[613,47926,833],{"class":618},[613,47928,47537],{"class":622},[613,47930,47932,47934,47936,47938,47940,47942],{"class":47931,"line":841},[615,649],[613,47933,8243],{"class":618},[613,47935,47213],{"class":626},[613,47937,633],{"class":618},[613,47939,636],{"class":618},[613,47941,47220],{"class":659},[613,47943,3200],{"class":618},[613,47945,47947,47949,47952,47954,47956,47958],{"class":47946,"line":852},[615,649],[613,47948,8243],{"class":618},[613,47950,47951],{"class":626},"mix-color",[613,47953,633],{"class":618},[613,47955,636],{"class":618},[613,47957,23210],{"class":799},[613,47959,3200],{"class":618},[613,47961,47963,47965,47968,47970,47972,47974],{"class":47962,"line":862},[615,649],[613,47964,8243],{"class":618},[613,47966,47967],{"class":626},"mix-alpha",[613,47969,633],{"class":618},[613,47971,636],{"class":618},[613,47973,1521],{"class":799},[613,47975,3200],{"class":618},[613,47977,47979,47981,47984,47986,47988,47990],{"class":47978,"line":608},[615,649],[613,47980,8243],{"class":618},[613,47982,47983],{"class":626},"mix-size",[613,47985,633],{"class":618},[613,47987,636],{"class":618},[613,47989,5939],{"class":799},[613,47991,3200],{"class":618},[613,47993,47994],{"class":615,"line":882},[613,47995,8297],{"class":618},[613,47997,47998,48000,48002],{"class":615,"line":892},[613,47999,875],{"class":618},[613,48001,836],{"class":622},[613,48003,645],{"class":618},[613,48005,48006,48008],{"class":615,"line":2671},[613,48007,757],{"class":618},[613,48009,15969],{"class":622},[613,48011,48012,48014,48016,48018,48020],{"class":615,"line":2680},[613,48013,10893],{"class":626},[613,48015,633],{"class":618},[613,48017,636],{"class":618},[613,48019,47220],{"class":639},[613,48021,3200],{"class":618},[613,48023,48024,48026,48028,48030,48032,48034,48036,48038,48040,48042,48044,48046],{"class":615,"line":2714},[613,48025,10907],{"class":618},[613,48027,1467],{"class":626},[613,48029,633],{"class":618},[613,48031,636],{"class":618},[613,48033,1474],{"class":618},[613,48035,2705],{"class":799},[613,48037,1479],{"class":618},[613,48039,2705],{"class":799},[613,48041,1479],{"class":618},[613,48043,2705],{"class":799},[613,48045,1489],{"class":618},[613,48047,3200],{"class":618},[613,48049,48050],{"class":615,"line":2723},[613,48051,16014],{"class":618},[613,48053,48054,48056,48058],{"class":615,"line":2732},[613,48055,757],{"class":618},[613,48057,8758],{"class":622},[613,48059,763],{"class":618},[613,48061,48062,48064,48066],{"class":615,"line":2741},[613,48063,885],{"class":618},[613,48065,737],{"class":622},[613,48067,645],{"class":618},[613,48069,48070,48072,48074],{"class":615,"line":2763},[613,48071,708],{"class":618},[613,48073,726],{"class":622},[613,48075,645],{"class":618},[480,48077,902],{"id":901},[907,48079,48080,48088],{},[910,48081,48082],{},[913,48083,48084,48086],{},[916,48085,8362],{"align":977},[916,48087,921],{"align":977},[926,48089,48090,48112,48145,48167,48187,48207,48227,48248,48268,48288,48308,48327,48346,48365,48385,48412,48434,48456,48477,48498,48519,48553,48574,48594,48615,48635,48655,48677,48696],{},[913,48091,48092,48096],{},[931,48093,48094],{"align":977},[1681,48095,2801],{},[931,48097,48098,48099,48101,48103,48104,48107,48109,48111],{"align":977},"Type: ",[594,48100,39519],{},[7780,48102],{},"Default: ",[594,48105,48106],{},"'https://raw.githubusercontent.com/Tresjs/asset...'",[7780,48108],{},[7780,48110],{},"Texture or image path for individual sparkles",[913,48113,48114,48118],{},[931,48115,48116],{"align":977},[1681,48117,5325],{},[931,48119,48098,48120,48123,48103,48125,48127,48129,48131,48132,48134],{"align":977},[594,48121,48122],{},"Object3D | BufferGeometry",[7780,48124],{},[594,48126,1159],{},[7780,48128],{},[7780,48130],{},"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.",[7780,48133],{},[2261,48135,48136,48139,48142],{},[2264,48137,48138],{},"If provided, the component will use the passed geometry.",[2264,48140,48141],{},"If no geometry is provided, the component will try to make a copy of the parent object's geometry.",[2264,48143,48144],{},"If no parent geometry exists, the component will create and use an IcosphereGeometry.",[913,48146,48147,48151],{},[931,48148,48149],{"align":977},[1681,48150,47747],{},[931,48152,48098,48153,48155,48103,48157,48159,48161,48163,48164,48166],{"align":977},[594,48154,7847],{},[7780,48156],{},[594,48158,1159],{},[7780,48160],{},[7780,48162],{},"Particles \"light up\" when their normal \"faces\" the light. If no ",[594,48165,47747],{}," is provided, the default \"up\" vector will be used.",[913,48168,48169,48174],{},[931,48170,48171],{"align":977},[1681,48172,48173],{},"lifetimeSec",[931,48175,48098,48176,48178,48103,48180,48182,48184,48186],{"align":977},[594,48177,5565],{},[7780,48179],{},[594,48181,37354],{},[7780,48183],{},[7780,48185],{},"Particle lifetime in seconds",[913,48188,48189,48194],{},[931,48190,48191],{"align":977},[1681,48192,48193],{},"cooldownSec",[931,48195,48098,48196,48198,48103,48200,48202,48204,48206],{"align":977},[594,48197,5565],{},[7780,48199],{},[594,48201,12358],{},[7780,48203],{},[7780,48205],{},"Particle cooldown in seconds – time between lifetime end and respawn",[913,48208,48209,48214],{},[931,48210,48211],{"align":977},[1681,48212,48213],{},"normalThreshold",[931,48215,48098,48216,48218,48103,48220,48222,48224,48226],{"align":977},[594,48217,5565],{},[7780,48219],{},[594,48221,4096],{},[7780,48223],{},[7780,48225],{},"Number from 0-1 indicating how closely the particle needs to be faced towards the light to \"light up\". (Lower == more flexible)",[913,48228,48229,48234],{},[931,48230,48231],{"align":977},[1681,48232,48233],{},"noiseScale",[931,48235,48098,48236,48238,48103,48240,48243,48245,48247],{"align":977},[594,48237,5565],{},[7780,48239],{},[594,48241,48242],{},"3.0",[7780,48244],{},[7780,48246],{},"Scale of the noise period (lower == more slowly cycling noise)",[913,48249,48250,48255],{},[931,48251,48252],{"align":977},[1681,48253,48254],{},"scaleNoise",[931,48256,48098,48257,48259,48103,48261,48263,48265,48267],{"align":977},[594,48258,5565],{},[7780,48260],{},[594,48262,12299],{},[7780,48264],{},[7780,48266],{},"Noise coefficient applied to particle scale",[913,48269,48270,48275],{},[931,48271,48272],{"align":977},[1681,48273,48274],{},"offsetNoise",[931,48276,48098,48277,48279,48103,48281,48283,48285,48287],{"align":977},[594,48278,5565],{},[7780,48280],{},[594,48282,2211],{},[7780,48284],{},[7780,48286],{},"Noise coefficient applied to particle offset",[913,48289,48290,48295],{},[931,48291,48292],{"align":977},[1681,48293,48294],{},"lifetimeNoise",[931,48296,48098,48297,48299,48103,48301,48303,48305,48307],{"align":977},[594,48298,5565],{},[7780,48300],{},[594,48302,12421],{},[7780,48304],{},[7780,48306],{},"Noise coefficient applied to particle lifetime",[913,48309,48310,48314],{},[931,48311,48312],{"align":977},[1681,48313,15436],{},[931,48315,48098,48316,48318,48103,48320,48322,48324,48326],{"align":977},[594,48317,5565],{},[7780,48319],{},[594,48321,12299],{},[7780,48323],{},[7780,48325],{},"Particle scale multiplier",[913,48328,48329,48333],{},[931,48330,48331],{"align":977},[1681,48332,44897],{},[931,48334,48098,48335,48337,48103,48339,48341,48343,48345],{"align":977},[594,48336,5565],{},[7780,48338],{},[594,48340,12299],{},[7780,48342],{},[7780,48344],{},"Opacity multiplier",[913,48347,48348,48352],{},[931,48349,48350],{"align":977},[1681,48351,38698],{},[931,48353,48098,48354,48356,48103,48358,48360,48362,48364],{"align":977},[594,48355,5565],{},[7780,48357],{},[594,48359,12299],{},[7780,48361],{},[7780,48363],{},"Offset multiplier",[913,48366,48367,48372],{},[931,48368,48369],{"align":977},[1681,48370,48371],{},"surfaceDistance",[931,48373,48098,48374,48376,48103,48378,48380,48382,48384],{"align":977},[594,48375,5565],{},[7780,48377],{},[594,48379,12299],{},[7780,48381],{},[7780,48383],{},"Surface distance multiplier",[913,48386,48387,48392],{},[931,48388,48389],{"align":977},[1681,48390,48391],{},"sequenceColor",[931,48393,48098,48394,48396,48103,48398,48401,48403,2488,48405,48408,48409,48411],{"align":977},[594,48395,47374],{},[7780,48397],{},[594,48399,48400],{},"[[0.7, '#82dbc5'], [0.8, '#fbb03b']]",[7780,48402],{},[7780,48404],{},[1685,48406,48407],{},"Sequence' props: specify how a particle changes as it \"progresses\". See also \"mix","\" props.",[7780,48410],{},"Color sequence as particles progress",[913,48413,48414,48419],{},[931,48415,48416],{"align":977},[1681,48417,48418],{},"sequenceAlpha",[931,48420,48098,48421,48424,48103,48426,48429,48431,48433],{"align":977},[594,48422,48423],{},"Gradient\u003Cnumber>",[7780,48425],{},[594,48427,48428],{},"[[0.0, 0.0], [0.10, 1.0], [0.5, 1.0], [0.9, 0.0]]",[7780,48430],{},[7780,48432],{},"Opacity sequence as particles progress",[913,48435,48436,48441],{},[931,48437,48438],{"align":977},[1681,48439,48440],{},"sequenceOffset",[931,48442,48098,48443,48446,48103,48448,48451,48453,48455],{"align":977},[594,48444,48445],{},"Gradient\u003C[number, number, number]>",[7780,48447],{},[594,48449,48450],{},"[0.0, 0.0, 0.0]",[7780,48452],{},[7780,48454],{},"Distance sequence as particles progress",[913,48457,48458,48463],{},[931,48459,48460],{"align":977},[1681,48461,48462],{},"sequenceNoise",[931,48464,48098,48465,48467,48103,48469,48472,48474,48476],{"align":977},[594,48466,48445],{},[7780,48468],{},[594,48470,48471],{},"[0.1, 0.1, 0.1]",[7780,48473],{},[7780,48475],{},"Noise sequence as particles progress",[913,48478,48479,48484],{},[931,48480,48481],{"align":977},[1681,48482,48483],{},"sequenceSize",[931,48485,48098,48486,48488,48103,48490,48493,48495,48497],{"align":977},[594,48487,48423],{},[7780,48489],{},[594,48491,48492],{},"[0.0, 1.0]",[7780,48494],{},[7780,48496],{},"Size sequence as particles progress",[913,48499,48500,48505],{},[931,48501,48502],{"align":977},[1681,48503,48504],{},"sequenceSurfaceDistance",[931,48506,48098,48507,48509,48103,48511,48514,48516,48518],{"align":977},[594,48508,48423],{},[7780,48510],{},[594,48512,48513],{},"[0.05, 0.08, 0.1]",[7780,48515],{},[7780,48517],{},"Distance from surface (along normal) as particles progress",[913,48520,48521,48526],{},[931,48522,48523],{"align":977},[1681,48524,48525],{},"mixColor",[931,48527,48098,48528,48530,48103,48532,48534,48536,48538,48539,48541,48549,48550,48552],{"align":977},[594,48529,5565],{},[7780,48531],{},[594,48533,1521],{},[7780,48535],{},[7780,48537],{},"'mix*' props: A particle \"progresses\" with a mix of two factors:",[7780,48540],{},[2261,48542,48543,48546],{},[2264,48544,48545],{},"its normal \"facing\" the directionalLight",[2264,48547,48548],{},"its lifetime","'mix*' props specify the relationship between the two factors.",[7780,48551],{},"How is a particle's progress for color calculated? (0: normal, 1: particle lifetime)",[913,48554,48555,48560],{},[931,48556,48557],{"align":977},[1681,48558,48559],{},"mixAlpha",[931,48561,48098,48562,48564,48103,48566,48569,48571,48573],{"align":977},[594,48563,5565],{},[7780,48565],{},[594,48567,48568],{},"1.",[7780,48570],{},[7780,48572],{},"How is a particle's progress for alpha calculated? (0: normal, 1: particle lifetime)",[913,48575,48576,48581],{},[931,48577,48578],{"align":977},[1681,48579,48580],{},"mixOffset",[931,48582,48098,48583,48585,48103,48587,48589,48591,48593],{"align":977},[594,48584,5565],{},[7780,48586],{},[594,48588,48568],{},[7780,48590],{},[7780,48592],{},"How is a particle's progress for offset calculated? (0: normal, 1: particle lifetime)",[913,48595,48596,48601],{},[931,48597,48598],{"align":977},[1681,48599,48600],{},"mixSize",[931,48602,48098,48603,48605,48103,48607,48610,48612,48614],{"align":977},[594,48604,5565],{},[7780,48606],{},[594,48608,48609],{},"0.",[7780,48611],{},[7780,48613],{},"How is a particle's progress for size calculated? (0: normal, 1: particle lifetime)",[913,48616,48617,48622],{},[931,48618,48619],{"align":977},[1681,48620,48621],{},"mixSurfaceDistance",[931,48623,48098,48624,48626,48103,48628,48630,48632,48634],{"align":977},[594,48625,5565],{},[7780,48627],{},[594,48629,48568],{},[7780,48631],{},[7780,48633],{},"How is a particle's progress for surface distance calculated? (0: normal, 1: particle lifetime)",[913,48636,48637,48642],{},[931,48638,48639],{"align":977},[1681,48640,48641],{},"mixNoise",[931,48643,48098,48644,48646,48103,48648,48650,48652,48654],{"align":977},[594,48645,5565],{},[7780,48647],{},[594,48649,48568],{},[7780,48651],{},[7780,48653],{},"How is a particle's progress for lifetime calculated? (0: normal, 1: particle lifetime)",[913,48656,48657,48662],{},[931,48658,48659],{"align":977},[1681,48660,48661],{},"blending",[931,48663,48098,48664,48667,48103,48669,48672,48674,48676],{"align":977},[594,48665,48666],{},"Blending",[7780,48668],{},[594,48670,48671],{},"AdditiveBlending",[7780,48673],{},[7780,48675],{},"Material blending",[913,48678,48679,48683],{},[931,48680,48681],{"align":977},[1681,48682,10096],{},[931,48684,48098,48685,48687,48103,48689,48691,48693,48695],{"align":977},[594,48686,16208],{},[7780,48688],{},[594,48690,941],{},[7780,48692],{},[7780,48694],{},"Material transparency",[913,48697,48698,48702],{},[931,48699,48700],{"align":977},[1681,48701,9561],{},[931,48703,48098,48704,48706,48103,48708,48710,48712,48714],{"align":977},[594,48705,16208],{},[7780,48707],{},[594,48709,951],{},[7780,48711],{},[7780,48713],{},"Material depth write",[1307,48716,48717],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":552,"searchDepth":553,"depth":554,"links":48719},[48720,48726],{"id":600,"depth":554,"text":15,"children":48721},[48722,48723,48724,48725],{"id":46838,"depth":684,"text":46839},{"id":47023,"depth":684,"text":47024},{"id":47322,"depth":684,"text":47323},{"id":47695,"depth":684,"text":47696},{"id":901,"depth":554,"text":902},"Makes sparkles on geometry vertices, optionally guided by directional light.",{},{"title":383,"description":48727},"sidh_wQDMKRUeYy0-MM8UB_NfCo4ClPtPAjr8qECGps",{"id":48732,"title":387,"body":48733,"description":49420,"extension":567,"links":568,"meta":49421,"navigation":570,"path":388,"seo":49422,"stem":389,"__hash__":49423},"docs/2.api/8.staging/stage.md",{"type":477,"value":48734,"toc":49414},[48735,48740,48743,48757,48776,48826,48828,49197,49199,49310,49314,49317,49399,49411],[2343,48736,48737],{},[48738,48739],"staging-stage",{},[590,48741,48742],{},"This component creates a \"stage\" for your models. It sets up:",[2261,48744,48745,48748,48751,48754],{},[2264,48746,48747],{},"model lighting",[2264,48749,48750],{},"ground shadows",[2264,48752,48753],{},"zoom to fit",[2264,48755,48756],{},"environment",[2054,48758,48759,48762],{},[590,48760,48761],{},"If you are using other camera controls, be sure to make them the 'default'.",[602,48763,48764],{"className":604,"code":2079,"language":609,"meta":552,"style":552},[594,48765,48766],{"__ignoreMap":552},[613,48767,48768,48770,48772,48774],{"class":615,"line":553},[613,48769,619],{"class":618},[613,48771,771],{"class":622},[613,48773,1876],{"class":626},[613,48775,763],{"class":618},[2054,48777,48778,48781,48796],{},[590,48779,48780],{},"If you are using shadows='accumulative', enable shadows on your canvas and on your objects.",[602,48782,48784],{"className":604,"code":48783,"language":609,"meta":552,"style":552},"\u003CTresCanvas shadows />\n",[594,48785,48786],{"__ignoreMap":552},[613,48787,48788,48790,48792,48794],{"class":615,"line":553},[613,48789,619],{"class":618},[613,48791,737],{"class":622},[613,48793,40908],{"class":626},[613,48795,763],{"class":618},[602,48797,48799],{"className":604,"code":48798,"language":609,"meta":552,"style":552},"\u003CTresMesh cast-shadow />\n ...\n\u003C/TresMesh>\n",[594,48800,48801,48811,48815],{"__ignoreMap":552},[613,48802,48803,48805,48807,48809],{"class":615,"line":553},[613,48804,619],{"class":618},[613,48806,836],{"class":622},[613,48808,15062],{"class":626},[613,48810,763],{"class":618},[613,48812,48813],{"class":615,"line":554},[613,48814,12593],{"class":659},[613,48816,48817,48819,48822,48824],{"class":615,"line":684},[613,48818,619],{"class":618},[613,48820,48821],{"class":659},"/",[613,48823,836],{"class":622},[613,48825,645],{"class":618},[480,48827,15],{"id":600},[602,48829,48832],{"className":604,"code":48830,"highlights":48831,"language":609,"meta":552,"style":552},"\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",[684,776,781,807,607,830,841],[594,48833,48834,48854,48872,48900,48908,48912,48920,48930,48962,48972,48980,48995,49010,49026,49040,49055,49059,49069,49077,49095,49103,49157,49165,49173,49181,49189],{"__ignoreMap":552},[613,48835,48836,48838,48840,48842,48844,48846,48848,48850,48852],{"class":615,"line":553},[613,48837,619],{"class":618},[613,48839,623],{"class":622},[613,48841,627],{"class":626},[613,48843,630],{"class":626},[613,48845,633],{"class":618},[613,48847,636],{"class":618},[613,48849,640],{"class":639},[613,48851,636],{"class":618},[613,48853,645],{"class":618},[613,48855,48856,48858,48860,48862,48864,48866,48868,48870],{"class":615,"line":554},[613,48857,653],{"class":652},[613,48859,656],{"class":618},[613,48861,691],{"class":659},[613,48863,669],{"class":618},[613,48865,672],{"class":652},[613,48867,675],{"class":618},[613,48869,700],{"class":639},[613,48871,681],{"class":618},[613,48873,48875,48877,48879,48882,48884,48886,48888,48890,48892,48894,48896,48898],{"class":48874,"line":684},[615,649],[613,48876,653],{"class":652},[613,48878,656],{"class":618},[613,48880,48881],{"class":659}," Stage",[613,48883,663],{"class":618},[613,48885,666],{"class":659},[613,48887,663],{"class":618},[613,48889,41518],{"class":659},[613,48891,669],{"class":618},[613,48893,672],{"class":652},[613,48895,675],{"class":618},[613,48897,678],{"class":639},[613,48899,681],{"class":618},[613,48901,48902,48904,48906],{"class":615,"line":705},[613,48903,708],{"class":618},[613,48905,623],{"class":622},[613,48907,645],{"class":618},[613,48909,48910],{"class":615,"line":715},[613,48911,718],{"emptyLinePlaceholder":570},[613,48913,48914,48916,48918],{"class":615,"line":721},[613,48915,619],{"class":618},[613,48917,726],{"class":622},[613,48919,645],{"class":618},[613,48921,48922,48924,48926,48928],{"class":615,"line":731},[613,48923,734],{"class":618},[613,48925,737],{"class":622},[613,48927,40908],{"class":626},[613,48929,645],{"class":618},[613,48931,48932,48934,48936,48938,48940,48942,48944,48946,48948,48950,48952,48954,48956,48958,48960],{"class":615,"line":754},[613,48933,757],{"class":618},[613,48935,760],{"class":622},[613,48937,789],{"class":618},[613,48939,1467],{"class":626},[613,48941,633],{"class":618},[613,48943,636],{"class":618},[613,48945,1474],{"class":618},[613,48947,945],{"class":799},[613,48949,1479],{"class":618},[613,48951,2705],{"class":799},[613,48953,1479],{"class":618},[613,48955,7668],{"class":799},[613,48957,1489],{"class":618},[613,48959,636],{"class":618},[613,48961,763],{"class":618},[613,48963,48964,48966,48968,48970],{"class":615,"line":766},[613,48965,757],{"class":618},[613,48967,771],{"class":622},[613,48969,1876],{"class":626},[613,48971,763],{"class":618},[613,48973,48975,48977],{"class":48974,"line":776},[615,649],[613,48976,757],{"class":618},[613,48978,48979],{"class":622},"Stage\n",[613,48981,48983,48986,48988,48990,48993],{"class":48982,"line":781},[615,649],[613,48984,48985],{"class":626}," lighting",[613,48987,633],{"class":618},[613,48989,636],{"class":618},[613,48991,48992],{"class":639},"rembrandt",[613,48994,3200],{"class":618},[613,48996,48998,49001,49003,49005,49008],{"class":48997,"line":807},[615,649],[613,48999,49000],{"class":626}," shadows",[613,49002,633],{"class":618},[613,49004,636],{"class":618},[613,49006,49007],{"class":639},"contact",[613,49009,3200],{"class":618},[613,49011,49013,49015,49018,49020,49022,49024],{"class":49012,"line":607},[615,649],[613,49014,10907],{"class":618},[613,49016,49017],{"class":626},"adjust-camera",[613,49019,633],{"class":618},[613,49021,636],{"class":618},[613,49023,941],{"class":4536},[613,49025,3200],{"class":618},[613,49027,49029,49032,49034,49036,49038],{"class":49028,"line":830},[615,649],[613,49030,49031],{"class":626}," environment",[613,49033,633],{"class":618},[613,49035,636],{"class":618},[613,49037,42432],{"class":639},[613,49039,3200],{"class":618},[613,49041,49043,49045,49047,49049,49051,49053],{"class":49042,"line":841},[615,649],[613,49044,10907],{"class":618},[613,49046,1894],{"class":626},[613,49048,633],{"class":618},[613,49050,636],{"class":618},[613,49052,1521],{"class":799},[613,49054,3200],{"class":618},[613,49056,49057],{"class":615,"line":852},[613,49058,10927],{"class":618},[613,49060,49061,49063,49065,49067],{"class":615,"line":862},[613,49062,833],{"class":618},[613,49064,836],{"class":622},[613,49066,15062],{"class":626},[613,49068,645],{"class":618},[613,49070,49071,49073,49075],{"class":615,"line":608},[613,49072,844],{"class":618},[613,49074,847],{"class":622},[613,49076,763],{"class":618},[613,49078,49079,49081,49083,49085,49087,49089,49091,49093],{"class":615,"line":882},[613,49080,844],{"class":618},[613,49082,2746],{"class":622},[613,49084,2749],{"class":626},[613,49086,633],{"class":618},[613,49088,636],{"class":618},[613,49090,11952],{"class":639},[613,49092,636],{"class":618},[613,49094,763],{"class":618},[613,49096,49097,49099,49101],{"class":615,"line":892},[613,49098,865],{"class":618},[613,49100,836],{"class":622},[613,49102,645],{"class":618},[613,49104,49105,49107,49109,49111,49113,49115,49117,49119,49121,49123,49125,49127,49129,49131,49133,49135,49137,49139,49141,49143,49145,49147,49149,49151,49153,49155],{"class":615,"line":2671},[613,49106,833],{"class":618},[613,49108,241],{"class":622},[613,49110,789],{"class":618},[613,49112,1467],{"class":626},[613,49114,633],{"class":618},[613,49116,636],{"class":618},[613,49118,1474],{"class":618},[613,49120,945],{"class":799},[613,49122,8838],{"class":618},[613,49124,800],{"class":799},[613,49126,1479],{"class":618},[613,49128,945],{"class":799},[613,49130,1489],{"class":618},[613,49132,636],{"class":618},[613,49134,41220],{"class":626},[613,49136,789],{"class":618},[613,49138,1997],{"class":626},[613,49140,633],{"class":618},[613,49142,636],{"class":618},[613,49144,1474],{"class":618},[613,49146,7668],{"class":799},[613,49148,1479],{"class":618},[613,49150,7668],{"class":799},[613,49152,1489],{"class":618},[613,49154,636],{"class":618},[613,49156,645],{"class":618},[613,49158,49159,49161,49163],{"class":615,"line":2680},[613,49160,844],{"class":618},[613,49162,2746],{"class":622},[613,49164,763],{"class":618},[613,49166,49167,49169,49171],{"class":615,"line":2714},[613,49168,865],{"class":618},[613,49170,241],{"class":622},[613,49172,645],{"class":618},[613,49174,49175,49177,49179],{"class":615,"line":2723},[613,49176,875],{"class":618},[613,49178,387],{"class":622},[613,49180,645],{"class":618},[613,49182,49183,49185,49187],{"class":615,"line":2732},[613,49184,885],{"class":618},[613,49186,737],{"class":622},[613,49188,645],{"class":618},[613,49190,49191,49193,49195],{"class":615,"line":2741},[613,49192,708],{"class":618},[613,49194,726],{"class":622},[613,49196,645],{"class":618},[480,49198,902],{"id":901},[907,49200,49201,49211],{},[910,49202,49203],{},[913,49204,49205,49207,49209],{},[916,49206,918],{"align":977},[916,49208,921],{"align":977},[916,49210,924],{"align":977},[926,49212,49213,49231,49248,49266,49280,49296],{},[913,49214,49215,49220,49226],{},[931,49216,49217],{"align":977},[1681,49218,49219],{},"lighting",[931,49221,49222,49223],{"align":977},"Lighting setup. Options: ",[594,49224,49225],{},"null | undefined | false | 'rembrandt' | 'portrait' | 'upfront' | 'soft' | { main: [x, y, z], fill: [x, y, z] }",[931,49227,49228],{"align":977},[594,49229,49230],{},"'rembrandt'",[913,49232,49233,49237,49243],{},[931,49234,49235],{"align":977},[1681,49236,37278],{},[931,49238,49239,49240],{"align":977},"Controls the ground shadows. Options: ",[594,49241,49242],{},"boolean | 'contact' | 'accumulative' | StageShadows",[931,49244,49245],{"align":977},[594,49246,49247],{},"'contact'",[913,49249,49250,49255,49262],{},[931,49251,49252],{"align":977},[1681,49253,49254],{},"adjustCamera",[931,49256,49257,49258,49261],{"align":977},"Optionally wraps and thereby centers the models using ",[594,49259,49260],{},"\u003CBounds>",", can also be a camera offset",[931,49263,49264],{"align":977},[594,49265,941],{},[913,49267,49268,49272,49275],{},[931,49269,49270],{"align":977},[1681,49271,48756],{},[931,49273,49274],{"align":977},"The default environment",[931,49276,49277],{"align":977},[594,49278,49279],{},"'city'",[913,49281,49282,49286,49292],{},[931,49283,49284],{"align":977},[1681,49285,1894],{},[931,49287,49288,49289,49291],{"align":977},"Lighting intensity, ",[594,49290,945],{}," removes lights",[931,49293,49294],{"align":977},[594,49295,1521],{},[913,49297,49298,49303,49306],{},[931,49299,49300],{"align":977},[1681,49301,49302],{},"align",[931,49304,49305],{"align":977},"To adjust alignment",[931,49307,49308],{"align":977},[594,49309,1159],{},[4191,49311,49313],{"id":49312},"stageshadows-type","StageShadows Type",[590,49315,49316],{},"When using custom shadow configuration, you can pass an object with the following properties:",[907,49318,49319,49329],{},[910,49320,49321],{},[913,49322,49323,49325,49327],{},[916,49324,918],{"align":977},[916,49326,921],{"align":977},[916,49328,924],{"align":977},[926,49330,49331,49345,49358,49372,49386],{},[913,49332,49333,49337,49343],{},[931,49334,49335],{"align":977},[1681,49336,5730],{},[931,49338,49339,49340],{"align":977},"Shadow type: ",[594,49341,49342],{},"'contact' | 'accumulative'",[931,49344,9324],{"align":977},[913,49346,49347,49351,49354],{},[931,49348,49349],{"align":977},[1681,49350,38698],{},[931,49352,49353],{"align":977},"Shadow plane offset",[931,49355,49356],{"align":977},[594,49357,945],{},[913,49359,49360,49364,49367],{},[931,49361,49362],{"align":977},[1681,49363,41030],{},[931,49365,49366],{"align":977},"Shadow bias",[931,49368,49369],{"align":977},[594,49370,49371],{},"-0.0001",[913,49373,49374,49379,49382],{},[931,49375,49376],{"align":977},[1681,49377,49378],{},"normalBias",[931,49380,49381],{"align":977},"Shadow normal bias",[931,49383,49384],{"align":977},[594,49385,945],{},[913,49387,49388,49392,49395],{},[931,49389,49390],{"align":977},[1681,49391,15436],{},[931,49393,49394],{"align":977},"Shadow map size",[931,49396,49397],{"align":977},[594,49398,37656],{},[590,49400,49401,49402,1479,49405,1699,49408,1126],{},"Additionally inherits all props from ",[594,49403,49404],{},"AccumulativeShadowsProps",[594,49406,49407],{},"RandomizedLightsProps",[594,49409,49410],{},"ContactShadowsProps",[1307,49412,49413],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":552,"searchDepth":553,"depth":554,"links":49415},[49416,49417],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902,"children":49418},[49419],{"id":49312,"depth":684,"text":49313},"Creates a complete stage setup with lighting, shadows, and environment.",{},{"title":387,"description":49420},"ZUAOlQhFpQ_UzI0nm_Ae7_izK4y1v3X6HA7NTC6mQ3o",{"id":49425,"title":391,"body":49426,"description":49713,"extension":567,"links":568,"meta":49714,"navigation":570,"path":392,"seo":49715,"stem":393,"__hash__":49716},"docs/2.api/8.staging/stars.md",{"type":477,"value":49427,"toc":49709},[49428,49433,49439,49441,49446,49603,49605,49707],[584,49429,49430],{},[49431,49432],"staging-stars",{},[590,49434,49435,49438],{},[594,49436,49437],{},"\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",[480,49440,15],{"id":600},[590,49442,44971,49443,49445],{},[594,49444,49437],{}," component without passing any props,",[602,49447,49450],{"className":604,"code":49448,"highlights":49449,"language":609,"meta":552,"style":552},"\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",[684,766],[594,49451,49452,49472,49490,49510,49518,49522,49530,49538,49570,49579,49587,49595],{"__ignoreMap":552},[613,49453,49454,49456,49458,49460,49462,49464,49466,49468,49470],{"class":615,"line":553},[613,49455,619],{"class":618},[613,49457,623],{"class":622},[613,49459,627],{"class":626},[613,49461,630],{"class":626},[613,49463,633],{"class":618},[613,49465,636],{"class":618},[613,49467,640],{"class":639},[613,49469,636],{"class":618},[613,49471,645],{"class":618},[613,49473,49474,49476,49478,49480,49482,49484,49486,49488],{"class":615,"line":554},[613,49475,653],{"class":652},[613,49477,656],{"class":618},[613,49479,691],{"class":659},[613,49481,669],{"class":618},[613,49483,672],{"class":652},[613,49485,675],{"class":618},[613,49487,700],{"class":639},[613,49489,681],{"class":618},[613,49491,49493,49495,49497,49500,49502,49504,49506,49508],{"class":49492,"line":684},[615,649],[613,49494,653],{"class":652},[613,49496,656],{"class":618},[613,49498,49499],{"class":659}," Stars",[613,49501,669],{"class":618},[613,49503,672],{"class":652},[613,49505,675],{"class":618},[613,49507,678],{"class":639},[613,49509,681],{"class":618},[613,49511,49512,49514,49516],{"class":615,"line":705},[613,49513,708],{"class":618},[613,49515,623],{"class":622},[613,49517,645],{"class":618},[613,49519,49520],{"class":615,"line":715},[613,49521,718],{"emptyLinePlaceholder":570},[613,49523,49524,49526,49528],{"class":615,"line":721},[613,49525,619],{"class":618},[613,49527,726],{"class":622},[613,49529,645],{"class":618},[613,49531,49532,49534,49536],{"class":615,"line":731},[613,49533,734],{"class":618},[613,49535,737],{"class":622},[613,49537,645],{"class":618},[613,49539,49540,49542,49544,49546,49548,49550,49552,49554,49556,49558,49560,49562,49564,49566,49568],{"class":615,"line":754},[613,49541,757],{"class":618},[613,49543,760],{"class":622},[613,49545,789],{"class":618},[613,49547,1467],{"class":626},[613,49549,633],{"class":618},[613,49551,636],{"class":618},[613,49553,1474],{"class":618},[613,49555,945],{"class":799},[613,49557,1479],{"class":618},[613,49559,2705],{"class":799},[613,49561,1479],{"class":618},[613,49563,7668],{"class":799},[613,49565,1489],{"class":618},[613,49567,636],{"class":618},[613,49569,763],{"class":618},[613,49571,49573,49575,49577],{"class":49572,"line":766},[615,649],[613,49574,757],{"class":618},[613,49576,391],{"class":622},[613,49578,763],{"class":618},[613,49580,49581,49583,49585],{"class":615,"line":776},[613,49582,757],{"class":618},[613,49584,8758],{"class":622},[613,49586,763],{"class":618},[613,49588,49589,49591,49593],{"class":615,"line":781},[613,49590,885],{"class":618},[613,49592,737],{"class":622},[613,49594,645],{"class":618},[613,49596,49597,49599,49601],{"class":615,"line":807},[613,49598,708],{"class":618},[613,49600,726],{"class":622},[613,49602,645],{"class":618},[480,49604,902],{"id":901},[907,49606,49607,49617],{},[910,49608,49609],{},[913,49610,49611,49613,49615],{},[916,49612,918],{"align":977},[916,49614,921],{"align":977},[916,49616,924],{},[926,49618,49619,49630,49641,49652,49663,49674,49685,49696],{},[913,49620,49621,49625,49628],{},[931,49622,49623],{"align":977},[1681,49624,15436],{},[931,49626,49627],{"align":977},"The size of the stars",[931,49629,2211],{},[913,49631,49632,49636,49639],{},[931,49633,49634],{"align":977},[1681,49635,45978],{},[931,49637,49638],{"align":977},"keep the same size regardless distance.",[931,49640,941],{},[913,49642,49643,49647,49650],{},[931,49644,49645],{"align":977},[1681,49646,10096],{},[931,49648,49649],{"align":977},"show transparency on the stars texture",[931,49651,941],{},[913,49653,49654,49658,49661],{},[931,49655,49656],{"align":977},[1681,49657,37607],{},[931,49659,49660],{"align":977},"enables the WebGL to know when not to render the pixeltext.",[931,49662,1915],{},[913,49664,49665,49669,49672],{},[931,49666,49667],{"align":977},[1681,49668,45888],{},[931,49670,49671],{"align":977},"texture of the stars",[931,49673,3725],{},[913,49675,49676,49680,49683],{},[931,49677,49678],{"align":977},[1681,49679,10323],{},[931,49681,49682],{"align":977},"number of stars",[931,49684,45927],{},[913,49686,49687,49691,49694],{},[931,49688,49689],{"align":977},[1681,49690,11572],{},[931,49692,49693],{"align":977},"depth of star's shape",[931,49695,9822],{},[913,49697,49698,49702,49705],{},[931,49699,49700],{"align":977},[1681,49701,41123],{},[931,49703,49704],{"align":977},"Radius of star's shape",[931,49706,11242],{},[1307,49708,1656],{},{"title":552,"searchDepth":553,"depth":554,"links":49710},[49711,49712],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},"Renders beautiful stars in the sky using Points and BufferGeometry.",{},{"title":391,"description":49713},"Hth9yEzN_KgLKS-QKylR25ofLqF86DItRzJAOv9FBUM",[49718,50659,51108,52315,52738,58712,59334,60175,61538,62758],{"id":49719,"title":401,"body":49720,"description":50655,"extension":567,"links":568,"meta":50656,"navigation":570,"path":402,"seo":50657,"stem":403,"__hash__":50658},"docs/2.api/9.objects/animated-sprite.md",{"type":477,"value":49721,"toc":50637},[49722,49727,49742,49750,49752,49944,49954,49958,49964,49978,49987,49991,49998,50017,50021,50029,50033,50058,50060,50386,50388,50456,50459,50465,50469,50472,50477,50480,50492,50507,50509,50512,50549,50552,50564,50568,50576,50586,50592,50595,50625,50628,50635],[584,49723,49724],{},[49725,49726],"objects-animated-sprite",{},[590,49728,49729,49732,49733,49738,49739,49741],{},[594,49730,49731],{},"\u003CAnimatedSprite />"," displays 2D animations defined in a ",[1120,49734,49737],{"href":49735,"rel":49736},"https://en.wikipedia.org/wiki/Texture_atlas",[1124],"texture atlas",". A typical ",[594,49740,49731],{}," will use:",[2261,49743,49744,49747],{},[2264,49745,49746],{},"An image containing multiple sprites",[2264,49748,49749],{},"A JSON atlas containing the individual sprite coordinates in the image",[480,49751,15],{"id":600},[602,49753,49756],{"className":604,"code":49754,"highlights":49755,"language":609,"meta":552,"style":552},"\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",[554,776,781,807,607,830],[594,49757,49758,49778,49798,49802,49824,49832,49836,49844,49852,49860,49868,49883,49898,49915,49920,49928,49936],{"__ignoreMap":552},[613,49759,49760,49762,49764,49766,49768,49770,49772,49774,49776],{"class":615,"line":553},[613,49761,619],{"class":618},[613,49763,623],{"class":622},[613,49765,627],{"class":626},[613,49767,630],{"class":626},[613,49769,633],{"class":618},[613,49771,636],{"class":618},[613,49773,640],{"class":639},[613,49775,636],{"class":618},[613,49777,645],{"class":618},[613,49779,49781,49783,49785,49788,49790,49792,49794,49796],{"class":49780,"line":554},[615,649],[613,49782,653],{"class":652},[613,49784,656],{"class":618},[613,49786,49787],{"class":659}," AnimatedSprite",[613,49789,669],{"class":618},[613,49791,672],{"class":652},[613,49793,675],{"class":618},[613,49795,678],{"class":639},[613,49797,681],{"class":618},[613,49799,49800],{"class":615,"line":684},[613,49801,718],{"emptyLinePlaceholder":570},[613,49803,49804,49806,49809,49811,49813,49815,49817,49820,49822],{"class":615,"line":705},[613,49805,2463],{"class":626},[613,49807,49808],{"class":659}," currentAnimation ",[613,49810,633],{"class":618},[613,49812,3975],{"class":2482},[613,49814,2485],{"class":659},[613,49816,2488],{"class":618},[613,49818,49819],{"class":639},"cientosIdle",[613,49821,2488],{"class":618},[613,49823,2496],{"class":659},[613,49825,49826,49828,49830],{"class":615,"line":715},[613,49827,708],{"class":618},[613,49829,623],{"class":622},[613,49831,645],{"class":618},[613,49833,49834],{"class":615,"line":721},[613,49835,718],{"emptyLinePlaceholder":570},[613,49837,49838,49840,49842],{"class":615,"line":731},[613,49839,619],{"class":618},[613,49841,726],{"class":622},[613,49843,645],{"class":618},[613,49845,49846,49848,49850],{"class":615,"line":754},[613,49847,734],{"class":618},[613,49849,737],{"class":622},[613,49851,645],{"class":618},[613,49853,49854,49856,49858],{"class":615,"line":766},[613,49855,757],{"class":618},[613,49857,20168],{"class":622},[613,49859,645],{"class":618},[613,49861,49863,49865],{"class":49862,"line":776},[615,649],[613,49864,833],{"class":618},[613,49866,49867],{"class":622},"AnimatedSprite\n",[613,49869,49871,49874,49876,49878,49881],{"class":49870,"line":781},[615,649],[613,49872,49873],{"class":626}," image",[613,49875,633],{"class":618},[613,49877,636],{"class":618},[613,49879,49880],{"class":639},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosTexture.png",[613,49882,3200],{"class":618},[613,49884,49886,49889,49891,49893,49896],{"class":49885,"line":807},[615,649],[613,49887,49888],{"class":626}," atlas",[613,49890,633],{"class":618},[613,49892,636],{"class":618},[613,49894,49895],{"class":639},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosAtlas.json",[613,49897,3200],{"class":618},[613,49899,49901,49903,49906,49908,49910,49913],{"class":49900,"line":607},[615,649],[613,49902,8243],{"class":618},[613,49904,49905],{"class":626},"animation",[613,49907,633],{"class":618},[613,49909,636],{"class":618},[613,49911,49912],{"class":659},"currentAnimation",[613,49914,3200],{"class":618},[613,49916,49918],{"class":49917,"line":830},[615,649],[613,49919,8297],{"class":618},[613,49921,49922,49924,49926],{"class":615,"line":841},[613,49923,875],{"class":618},[613,49925,20168],{"class":622},[613,49927,645],{"class":618},[613,49929,49930,49932,49934],{"class":615,"line":852},[613,49931,885],{"class":618},[613,49933,737],{"class":622},[613,49935,645],{"class":618},[613,49937,49938,49940,49942],{"class":615,"line":862},[613,49939,708],{"class":618},[613,49941,726],{"class":622},[613,49943,645],{"class":618},[3268,49945,49946],{},[590,49947,49948,49950,49951,1126],{},[594,49949,49731],{}," loads resources asynchronously, so it must be wrapped in a ",[594,49952,49953],{},"\u003CSuspense />",[480,49955,49957],{"id":49956},"compiling-an-atlas","Compiling an atlas",[590,49959,49960,49961,49963],{},"In typical usage, ",[594,49962,49731],{}," requires both the URL to a texture of compiled sprite images and a JSON atlas containing information about the sprites in the texture.",[2261,49965,49966,49972],{},[2264,49967,49968],{},[1120,49969,49971],{"href":49880,"rel":49970},[1124],"example compiled texture",[2264,49973,49974],{},[1120,49975,49977],{"href":49895,"rel":49976},[1124],"example JSON atlas",[590,49979,49980,49981,49986],{},"Compiling source images into a texture atlas is usually handled by third-party software. You may find ",[1120,49982,49985],{"href":49983,"rel":49984},"https://www.codeandweb.com/texturepacker",[1124],"TexturePacker"," useful.",[480,49988,49990],{"id":49989},"without-an-atlas","Without an atlas",[590,49992,49993,49994,49997],{},"There may be cases where you don't want to supply an atlas to the ",[594,49995,49996],{},"atlas"," prop. To do so:",[2261,49999,50000,50003,50006,50009],{},[2264,50001,50002],{},"Compile your source images into a single image texture.",[2264,50004,50005],{},"Space each sprite into equally sized columns and rows in the compiled image texture.",[2264,50007,50008],{},"Ensure no extra padding has been added to the compiled image texture.",[2264,50010,50011,50012,50014,50015,1126],{},"Set the ",[594,50013,49996],{}," prop to number of columns, number of rows as ",[594,50016,27281],{},[480,50018,50020],{"id":50019},"spritesheets-in-the-wild","Spritesheets in the wild",[3268,50022,50023],{},[590,50024,50025,50026,50028],{},"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 ",[594,50027,49731],{},". In many cases, it's advisable to recompile the spritesheet.",[4191,50030,50032],{"id":50031},"how-to-recompile-an-existing-spritesheet-image","How to recompile an existing spritesheet image",[2261,50034,50035,50038,50041,50044,50055],{},[2264,50036,50037],{},"Cut individual sprites from the spritesheet and paste them into separate layers in an image editing application, e.g., GIMP.",[2264,50039,50040],{},"Align the layers for animation. Toggling layer visibility on/off will show you how the animation will display, frame to frame.",[2264,50042,50043],{},"Export layers as individual images.",[2264,50045,50046,50047,50049,3263,50052,50054],{},"Name the individual images according to the following pattern: ",[7780,50048],{},[594,50050,50051],{},"[animation name][frame number].[extension]",[7780,50053],{},"E.g., walk000.png, walk001.png, idle000.png, idle001.png",[2264,50056,50057],{},"Compile individual images into an image texture and atlas using a texture packing application, like TexturePacker.",[480,50059,902],{"id":901},[907,50061,50062,50072],{},[910,50063,50064],{},[913,50065,50066,50068,50070],{},[916,50067,8362],{"align":977},[916,50069,921],{"align":977},[916,50071,924],{"align":977},[926,50073,50074,50086,50124,50184,50198,50211,50234,50248,50262,50276,50290,50309,50332,50350,50368],{},[913,50075,50076,50079,50084],{},[931,50077,50078],{"align":977},"image",[931,50080,50081,50083],{"align":977},[594,50082,3641],{}," – URL of the image texture or an image dataURL. This prop is not reactive.",[931,50085],{"align":977},[913,50087,50088,50090,50122],{},[931,50089,49996],{"align":977},[931,50091,50092,50095,50096,50119,50121],{"align":977},[594,50093,50094],{},"string | Atlasish"," – ",[2261,50097,50098,50103,50108,50113],{},[2264,50099,938,50100,50102],{},[594,50101,3641],{},", the URL of the JSON atlas.",[2264,50104,938,50105,50107],{},[594,50106,5565],{},", the number of columns in the texture.",[2264,50109,938,50110,50112],{},[594,50111,27281],{},", the number of columns/rows in the texture.",[2264,50114,938,50115,50118],{},[594,50116,50117],{},"AtlasData",", the atlas as a JS object.",[7780,50120],{},"This prop is not reactive.",[931,50123],{"align":977},[913,50125,50126,50129,50182],{},[931,50127,50128],{"align":977},"definitions",[931,50130,50131,50134,50135,50137,50138,50140,50142,50143,50145,50147,50148],{"align":977},[594,50132,50133],{},"Record\u003Cstring, string>"," – Specify playback frame order and repeated frames (delays). ",[594,50136,50128],{}," is a record where keys are atlas animation names and values are strings containing an animation definition.",[7780,50139],{},[7780,50141],{},"A \"animation definition\" comma-separated string of frame numbers with optional parentheses-surrounded durations.",[7780,50144],{},[7780,50146],{},"Here is how various definition strings convert to arrays of frames for playback:",[2261,50149,50150,50157,50164,50170,50176],{},[2264,50151,50152,50153,50156],{},"\"0,2,1\" - ",[613,50154,50155],{},"0,2,1",", i.e., play frame 0, 2, then 1.",[2264,50158,50159,50160,50163],{},"\"2(10)\" - ",[613,50161,50162],{},"2,2,2,2,2,2,2,2,2,2",", i.e., play from 2 10 times.",[2264,50165,50166,50167],{},"\"1-4\" - ",[613,50168,50169],{},"1,2,3,4",[2264,50171,50172,50173],{},"\"10-5(2)\" - ",[613,50174,50175],{},"10,10,9,9,8,8,7,7,6,6,5,5",[2264,50177,50178,50179],{},"\"1-4(3),10(2)\" - ",[613,50180,50181],{},"1,1,1,2,2,2,3,3,3,4,4,4,10,10",[931,50183],{"align":977},[913,50185,50186,50189,50194],{},[931,50187,50188],{"align":977},"fps",[931,50190,50191,50193],{"align":977},[594,50192,5565],{}," – Desired frames per second of the animation.",[931,50195,50196],{"align":977},[594,50197,26839],{},[913,50199,50200,50202,50207],{},[931,50201,24716],{"align":977},[931,50203,50204,50206],{"align":977},[594,50205,16208],{}," – Whether or not the animation should loop.",[931,50208,50209],{"align":977},[594,50210,941],{},[913,50212,50213,50215,50230],{},[931,50214,49905],{"align":977},[931,50216,50217,50220,50221,50223,50224,50226,50227,50229],{"align":977},[594,50218,50219],{},"string | [number, number] | number"," – If ",[594,50222,3641],{},", name of the animation to play. If ",[594,50225,27281],{},", start and end frames of the animation. If ",[594,50228,5565],{},", frame number to display.",[931,50231,50232],{"align":977},[594,50233,945],{},[913,50235,50236,50239,50244],{},[931,50237,50238],{"align":977},"paused",[931,50240,50241,50243],{"align":977},[594,50242,16208],{}," – Whether the animation is paused.",[931,50245,50246],{"align":977},[594,50247,951],{},[913,50249,50250,50253,50258],{},[931,50251,50252],{"align":977},"reversed",[931,50254,50255,50257],{"align":977},[594,50256,16208],{}," – Whether to play the animation in reverse.",[931,50259,50260],{"align":977},[594,50261,951],{},[913,50263,50264,50267,50272],{},[931,50265,50266],{"align":977},"flipX",[931,50268,50269,50271],{"align":977},[594,50270,16208],{}," – Whether the sprite should be flipped, left to right.",[931,50273,50274],{"align":977},[594,50275,951],{},[913,50277,50278,50281,50286],{},[931,50279,50280],{"align":977},"resetOnEnd",[931,50282,50283,50285],{"align":977},[594,50284,16208],{}," – For a non-looping animation, when the animation ends, whether to display the zeroth frame.",[931,50287,50288],{"align":977},[594,50289,951],{},[913,50291,50292,50295,50305],{},[931,50293,50294],{"align":977},"asSprite",[931,50296,50297,50299,50300],{"align":977},[594,50298,16208],{}," – Whether to display the object as a THREE.Sprite. ",[1120,50301,50304],{"href":50302,"rel":50303},"https://threejs.org/docs/?q=sprite#api/en/objects/Sprite",[1124],"See THREE.Sprite",[931,50306,50307],{"align":977},[594,50308,941],{},[913,50310,50311,50313,50327],{},[931,50312,44736],{"align":977},[931,50314,50315,50318,50319,50322,50323,50326],{"align":977},[594,50316,50317],{},"TresVector2"," – Anchor point of the object. A value of ",[613,50320,50321],{},"0.5, 0.5"," corresponds to the center. ",[613,50324,50325],{},"0, 0"," is left, bottom.",[931,50328,50329],{"align":977},[594,50330,50331],{},"[0.5, 0.5]",[913,50333,50334,50336,50346],{},[931,50335,37607],{"align":977},[931,50337,50338,50340,50341],{"align":977},[594,50339,5565],{}," – Alpha test value for the material. ",[1120,50342,50345],{"href":50343,"rel":50344},"https://threejs.org/docs/#api/en/materials/Material.alphaTest",[1124],"See THREE.Material.alphaTest",[931,50347,50348],{"align":977},[594,50349,12421],{},[913,50351,50352,50354,50364],{},[931,50353,46740],{"align":977},[931,50355,50356,50358,50359],{"align":977},[594,50357,16208],{}," – Depth test value for the material. ",[1120,50360,50363],{"href":50361,"rel":50362},"https://threejs.org/docs/#api/en/materials/Material.depthTest",[1124],"See THREE.Material.depthTest",[931,50365,50366],{"align":977},[594,50367,941],{},[913,50369,50370,50372,50382],{},[931,50371,9561],{"align":977},[931,50373,50374,50376,50377],{"align":977},[594,50375,16208],{}," – Depth write value for the material. ",[1120,50378,50381],{"href":50379,"rel":50380},"https://threejs.org/docs/#api/en/materials/Material.depthWrite",[1124],"See THREE.Material.depthWrite",[931,50383,50384],{"align":977},[594,50385,941],{},[480,50387,12953],{"id":12952},[907,50389,50390,50401],{},[910,50391,50392],{},[913,50393,50394,50396,50398],{},[916,50395,5969],{},[916,50397,921],{},[916,50399,50400],{},"Argument",[926,50402,50403,50418,50438],{},[913,50404,50405,50410,50413],{},[931,50406,50407],{},[594,50408,50409],{},"frame",[931,50411,50412],{},"Emitted when the displayed animation frame changes – at most once per tick, frames may be dropped",[931,50414,50415,50417],{},[594,50416,3641],{}," – Name of the newly displayed frame",[913,50419,50420,50424,50433],{},[931,50421,50422],{},[594,50423,12997],{},[931,50425,50426,50427,50430,50431],{},"Emitted when the animation ends – ",[594,50428,50429],{},"props.loop"," must be set to ",[594,50432,951],{},[931,50434,50435,50437],{},[594,50436,3641],{}," – Name of the ending frame",[913,50439,50440,50444,50451],{},[931,50441,50442],{},[594,50443,24716],{},[931,50445,50446,50447,50430,50449],{},"Emitted when the animation loops – ",[594,50448,50429],{},[594,50450,941],{},[931,50452,50453,50455],{},[594,50454,3641],{}," – Name of the frame at the end of the loop",[480,50457,50458],{"id":49905},"Animation",[590,50460,2843,50461,50464],{},[594,50462,50463],{},":animation"," prop holds either the name of the currently playing animation or a range of frames to play, or a frame number to display.",[4191,50466,50468],{"id":50467},"using-named-animations-as-animation","Using named animations as animation",[590,50470,50471],{},"When individual files are converted to a spritesheet/atlas, typically the original images' filenames will be included in the atlas.",[590,50473,50474,50476],{},[594,50475,49731],{}," uses those filenames to automatically group images into animations.",[590,50478,50479],{},"Use either of the following naming conventions for your source images ...",[2261,50481,50482,50487],{},[2264,50483,50484],{},[594,50485,50486],{},"[animation name][frame number].[file_extension]",[2264,50488,50489],{},[594,50490,50491],{},"[animation name]_[frame number].[file_extension]",[590,50493,50494,50495,50497,50498,50501,50502,50504,50505,39534],{},"... then ",[594,50496,49731],{}," will automatically make all ",[594,50499,50500],{},"[animation name]"," available for playback. Just pass ",[594,50503,50500],{}," to the component's ",[594,50506,50463],{},[4191,50508,39640],{"id":39639},[590,50510,50511],{},"For our Cientos heart cartoon character animation, here's how the filenames map to animation names.",[907,50513,50514,50524],{},[910,50515,50516],{},[913,50517,50518,50521],{},[916,50519,50520],{},"Filenames",[916,50522,50523],{},"Animation name",[926,50525,50526,50533,50541],{},[913,50527,50528,50531],{},[931,50529,50530],{},"cientosIdle0000.png, cientosIdle0001.png, ...",[931,50532,49819],{},[913,50534,50535,50538],{},[931,50536,50537],{},"cientosIdleToWalkTransition0000.png",[931,50539,50540],{},"cientosIdleToWalkTransition",[913,50542,50543,50546],{},[931,50544,50545],{},"cientosWalk0000.png, cientosWalk0001.png, ...",[931,50547,50548],{},"cientosWalk",[480,50550,50551],{"id":50128},"Definitions",[590,50553,50554,50555,50558,50559,50563],{},"You can supply an object to the ",[594,50556,50557],{},":definitions"," prop. Any ",[1120,50560,50562],{"href":50561},"#animation","named animation"," can be a key. The value is a string that specifies frame order and delays.",[4191,50565,50567],{"id":50566},"demo","Demo",[590,50569,50570,50571,47720,50573,1126],{},"In this demo, the 'idle' animation is comprised of six different images. By default, those images will play sequentially when the ",[594,50572,50463],{},[594,50574,50575],{},"'idle'",[590,50577,50578,50579,50581,50582,50585],{},"But below, we've added a ",[594,50580,50557],{}," prop with this value for the ",[594,50583,50584],{},"idle"," key:",[602,50587,50590],{"className":50588,"code":50589,"language":28079},[28077],"'0-5, 0(10), 1-2, 3(20), 4-5, 0-5(3)'\n",[594,50591,50589],{"__ignoreMap":552},[590,50593,50594],{},"So, instead of playing images 0-5 sequentially, this animation will play instead:",[2261,50596,50597,50606,50619],{},[2264,50598,50599,50602,50603,50605],{},[594,50600,50601],{},"0-5"," – Play all six images (",[594,50604,50601],{},") of the animation normally.",[2264,50607,50608,50611,50612,50615,50616,5787],{},[594,50609,50610],{},"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 (",[594,50613,50614],{},"0(10)",") and a delay of twenty frames at the top of the bounce (",[594,50617,50618],{},"3(20)",[2264,50620,50621,50624],{},[594,50622,50623],{},"0-5(3)"," – Finally, play all six images of the animation with a delay of three frames each.",[480,50626,50627],{"id":44736},"Center",[590,50629,50630,50631,50634],{},"In addition to being the sprite's anchor point, the ",[594,50632,50633],{},":center"," prop also controls how differently sized source images will \"grow\" and \"shrink\". Namely, they \"grow out from\" and \"shrink towards\" the center.",[1307,50636,43684],{},{"title":552,"searchDepth":553,"depth":554,"links":50638},[50639,50640,50641,50642,50645,50646,50647,50651,50654],{"id":600,"depth":554,"text":15},{"id":49956,"depth":554,"text":49957},{"id":49989,"depth":554,"text":49990},{"id":50019,"depth":554,"text":50020,"children":50643},[50644],{"id":50031,"depth":684,"text":50032},{"id":901,"depth":554,"text":902},{"id":12952,"depth":554,"text":12953},{"id":49905,"depth":554,"text":50458,"children":50648},[50649,50650],{"id":50467,"depth":684,"text":50468},{"id":39639,"depth":684,"text":39640},{"id":50128,"depth":554,"text":50551,"children":50652},[50653],{"id":50566,"depth":684,"text":50567},{"id":44736,"depth":554,"text":50627},"Display 2D animations defined in a texture atlas.",{},{"title":401,"description":50655},"TOx2TSEHnQeUR_DoVqP-W-cCHOVI1DisvWaE29LwWYA",{"id":50660,"title":405,"body":50661,"description":51104,"extension":567,"links":568,"meta":51105,"navigation":570,"path":406,"seo":51106,"stem":407,"__hash__":51107},"docs/2.api/9.objects/cube-camera.md",{"type":477,"value":50662,"toc":51100},[50663,50668,50678,50683,50685,51001,51003,51098],[584,50664,50665],{},[50666,50667],"objects-cube-camera",{},[590,50669,50670,50673,50674,50677],{},[594,50671,50672],{},"\u003CCubeCamera />"," creates a ",[594,50675,50676],{},"THREE.CubeCamera"," and uses it to render an environment map of your scene. The environment map is then applied to component's children.",[590,50679,50680,50682],{},[594,50681,50672],{}," makes its children invisible while rendering to the internal buffer so that they are not included in the reflection.",[480,50684,15],{"id":600},[602,50686,50689],{"className":604,"code":50687,"highlights":50688,"language":609,"meta":552,"style":552},"\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",[554,776,841],[594,50690,50691,50711,50735,50743,50747,50755,50763,50795,50803,50807,50840,50848,50880,50912,50920,50929,50933,50953,50985,50993],{"__ignoreMap":552},[613,50692,50693,50695,50697,50699,50701,50703,50705,50707,50709],{"class":615,"line":553},[613,50694,619],{"class":618},[613,50696,623],{"class":622},[613,50698,627],{"class":626},[613,50700,630],{"class":626},[613,50702,633],{"class":618},[613,50704,636],{"class":618},[613,50706,640],{"class":639},[613,50708,636],{"class":618},[613,50710,645],{"class":618},[613,50712,50714,50716,50718,50721,50723,50725,50727,50729,50731,50733],{"class":50713,"line":554},[615,649],[613,50715,653],{"class":652},[613,50717,656],{"class":618},[613,50719,50720],{"class":659}," CubeCamera",[613,50722,663],{"class":618},[613,50724,666],{"class":659},[613,50726,669],{"class":618},[613,50728,672],{"class":652},[613,50730,675],{"class":618},[613,50732,678],{"class":639},[613,50734,681],{"class":618},[613,50736,50737,50739,50741],{"class":615,"line":684},[613,50738,708],{"class":618},[613,50740,623],{"class":622},[613,50742,645],{"class":618},[613,50744,50745],{"class":615,"line":705},[613,50746,718],{"emptyLinePlaceholder":570},[613,50748,50749,50751,50753],{"class":615,"line":715},[613,50750,619],{"class":618},[613,50752,726],{"class":622},[613,50754,645],{"class":618},[613,50756,50757,50759,50761],{"class":615,"line":721},[613,50758,734],{"class":618},[613,50760,737],{"class":622},[613,50762,645],{"class":618},[613,50764,50765,50767,50769,50771,50773,50775,50777,50779,50781,50783,50785,50787,50789,50791,50793],{"class":615,"line":731},[613,50766,757],{"class":618},[613,50768,760],{"class":622},[613,50770,789],{"class":618},[613,50772,1467],{"class":626},[613,50774,633],{"class":618},[613,50776,636],{"class":618},[613,50778,1474],{"class":618},[613,50780,945],{"class":799},[613,50782,1479],{"class":618},[613,50784,800],{"class":799},[613,50786,1479],{"class":618},[613,50788,7668],{"class":799},[613,50790,1489],{"class":618},[613,50792,636],{"class":618},[613,50794,763],{"class":618},[613,50796,50797,50799,50801],{"class":615,"line":754},[613,50798,757],{"class":618},[613,50800,771],{"class":622},[613,50802,763],{"class":618},[613,50804,50805],{"class":615,"line":766},[613,50806,718],{"emptyLinePlaceholder":570},[613,50808,50810,50812,50814,50816,50818,50820,50822,50824,50826,50828,50830,50832,50834,50836,50838],{"class":50809,"line":776},[615,649],[613,50811,757],{"class":618},[613,50813,405],{"class":622},[613,50815,789],{"class":618},[613,50817,27086],{"class":626},[613,50819,633],{"class":618},[613,50821,636],{"class":618},[613,50823,27094],{"class":799},[613,50825,636],{"class":618},[613,50827,789],{"class":618},[613,50829,37525],{"class":626},[613,50831,633],{"class":618},[613,50833,636],{"class":618},[613,50835,12152],{"class":618},[613,50837,636],{"class":618},[613,50839,645],{"class":618},[613,50841,50842,50844,50846],{"class":615,"line":781},[613,50843,833],{"class":618},[613,50845,836],{"class":622},[613,50847,645],{"class":618},[613,50849,50850,50852,50854,50856,50858,50860,50862,50864,50866,50868,50870,50872,50874,50876,50878],{"class":615,"line":807},[613,50851,844],{"class":618},[613,50853,4083],{"class":622},[613,50855,789],{"class":618},[613,50857,1997],{"class":626},[613,50859,633],{"class":618},[613,50861,636],{"class":618},[613,50863,1474],{"class":618},[613,50865,1901],{"class":799},[613,50867,1479],{"class":618},[613,50869,10950],{"class":799},[613,50871,1479],{"class":618},[613,50873,10950],{"class":799},[613,50875,1489],{"class":618},[613,50877,636],{"class":618},[613,50879,763],{"class":618},[613,50881,50882,50884,50886,50888,50890,50892,50894,50896,50898,50900,50902,50904,50906,50908,50910],{"class":615,"line":607},[613,50883,844],{"class":618},[613,50885,2746],{"class":622},[613,50887,789],{"class":618},[613,50889,19964],{"class":626},[613,50891,633],{"class":618},[613,50893,636],{"class":618},[613,50895,1901],{"class":799},[613,50897,636],{"class":618},[613,50899,789],{"class":618},[613,50901,19979],{"class":626},[613,50903,633],{"class":618},[613,50905,636],{"class":618},[613,50907,945],{"class":799},[613,50909,636],{"class":618},[613,50911,763],{"class":618},[613,50913,50914,50916,50918],{"class":615,"line":830},[613,50915,865],{"class":618},[613,50917,836],{"class":622},[613,50919,645],{"class":618},[613,50921,50923,50925,50927],{"class":50922,"line":841},[615,649],[613,50924,875],{"class":618},[613,50926,405],{"class":622},[613,50928,645],{"class":618},[613,50930,50931],{"class":615,"line":852},[613,50932,718],{"emptyLinePlaceholder":570},[613,50934,50935,50937,50939,50941,50943,50945,50947,50949,50951],{"class":615,"line":862},[613,50936,757],{"class":618},[613,50938,8758],{"class":622},[613,50940,789],{"class":618},[613,50942,1894],{"class":626},[613,50944,633],{"class":618},[613,50946,636],{"class":618},[613,50948,1521],{"class":799},[613,50950,636],{"class":618},[613,50952,763],{"class":618},[613,50954,50955,50957,50959,50961,50963,50965,50967,50969,50971,50973,50975,50977,50979,50981,50983],{"class":615,"line":608},[613,50956,757],{"class":618},[613,50958,8779],{"class":622},[613,50960,789],{"class":618},[613,50962,1467],{"class":626},[613,50964,633],{"class":618},[613,50966,636],{"class":618},[613,50968,1474],{"class":618},[613,50970,945],{"class":799},[613,50972,1479],{"class":618},[613,50974,800],{"class":799},[613,50976,1479],{"class":618},[613,50978,3876],{"class":799},[613,50980,1489],{"class":618},[613,50982,636],{"class":618},[613,50984,763],{"class":618},[613,50986,50987,50989,50991],{"class":615,"line":882},[613,50988,885],{"class":618},[613,50990,737],{"class":622},[613,50992,645],{"class":618},[613,50994,50995,50997,50999],{"class":615,"line":892},[613,50996,708],{"class":618},[613,50998,726],{"class":622},[613,51000,645],{"class":618},[480,51002,902],{"id":901},[907,51004,51005,51015],{},[910,51006,51007],{},[913,51008,51009,51011,51013],{},[916,51010,918],{"align":977},[916,51012,921],{"align":977},[916,51014,924],{},[926,51016,51017,51036,51050,51063,51076,51087],{},[913,51018,51019,51023,51032],{},[931,51020,51021],{"align":977},[594,51022,37525],{},[931,51024,51025,51026,51028,51029,51031],{"align":977},"Number of frames to render. Set to ",[594,51027,1901],{}," for a static scene. ",[594,51030,12152],{}," to update continuously.",[931,51033,51034],{},[594,51035,12152],{},[913,51037,51038,51042,51045],{},[931,51039,51040],{"align":977},[594,51041,27086],{},[931,51043,51044],{"align":977},"Resolution of the FBO",[931,51046,51047],{},[594,51048,51049],{},"255",[913,51051,51052,51056,51059],{},[931,51053,51054],{"align":977},[594,51055,41410],{},[931,51057,51058],{"align":977},"Camera near",[931,51060,51061],{},[594,51062,2211],{},[913,51064,51065,51069,51072],{},[931,51066,51067],{"align":977},[594,51068,39167],{},[931,51070,51071],{"align":977},"Camera far",[931,51073,51074],{},[594,51075,10388],{},[913,51077,51078,51082,51085],{},[931,51079,51080],{"align":977},[594,51081,42381],{},[931,51083,51084],{"align":977},"Custom environment map that is temporarily set as the scene's background",[931,51086],{},[913,51088,51089,51093,51096],{},[931,51090,51091],{"align":977},[594,51092,38718],{},[931,51094,51095],{"align":977},"Custom fog that is temporarily set as the scene's fog",[931,51097],{},[1307,51099,1656],{},{"title":552,"searchDepth":553,"depth":554,"links":51101},[51102,51103],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},"Render environment maps for reflective objects.",{},{"title":405,"description":51104},"guPReQbllwq5wU5oLp9_7X7yFZih0xBoLQvebR42uzE",{"id":51109,"title":409,"body":51110,"description":52311,"extension":567,"links":568,"meta":52312,"navigation":570,"path":410,"seo":52313,"stem":411,"__hash__":52314},"docs/2.api/9.objects/fbo.md",{"type":477,"value":51111,"toc":52303},[51112,51117,51120,51127,51129,51818,51820,51933,51937,51939,51945,51952,51955,52214,52216,52300],[2343,51113,51114],{},[51115,51116],"objects-fbo",{},[590,51118,51119],{},"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.",[590,51121,51122,51123,51126],{},"Cientos provides an ",[594,51124,51125],{},"\u003CFbo />"," component make it easy to use FBOs in your application.",[480,51128,15],{"id":600},[602,51130,51133],{"className":604,"code":51131,"highlights":51132,"language":609,"meta":552,"style":552},"\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",[554,2714,2723,2732,2741],[594,51134,51135,51155,51179,51199,51217,51235,51239,51274,51300,51304,51328,51351,51377,51402,51406,51414,51418,51426,51459,51491,51499,51503,51531,51539,51553,51568,51592,51596,51604,51636,51640,51646,51661,51686,51690,51698,51702,51708,51720,51746,51750,51786,51794,51802,51810],{"__ignoreMap":552},[613,51136,51137,51139,51141,51143,51145,51147,51149,51151,51153],{"class":615,"line":553},[613,51138,619],{"class":618},[613,51140,623],{"class":622},[613,51142,627],{"class":626},[613,51144,630],{"class":626},[613,51146,633],{"class":618},[613,51148,636],{"class":618},[613,51150,640],{"class":639},[613,51152,636],{"class":618},[613,51154,645],{"class":618},[613,51156,51158,51160,51162,51165,51167,51169,51171,51173,51175,51177],{"class":51157,"line":554},[615,649],[613,51159,653],{"class":652},[613,51161,656],{"class":618},[613,51163,51164],{"class":659}," Fbo",[613,51166,663],{"class":618},[613,51168,666],{"class":659},[613,51170,669],{"class":618},[613,51172,672],{"class":652},[613,51174,675],{"class":618},[613,51176,678],{"class":639},[613,51178,681],{"class":618},[613,51180,51181,51183,51185,51187,51189,51191,51193,51195,51197],{"class":615,"line":684},[613,51182,653],{"class":652},[613,51184,3511],{"class":652},[613,51186,656],{"class":618},[613,51188,16859],{"class":659},[613,51190,669],{"class":618},[613,51192,672],{"class":652},[613,51194,675],{"class":618},[613,51196,700],{"class":639},[613,51198,681],{"class":618},[613,51200,51201,51203,51205,51207,51209,51211,51213,51215],{"class":615,"line":705},[613,51202,653],{"class":652},[613,51204,656],{"class":618},[613,51206,691],{"class":659},[613,51208,669],{"class":618},[613,51210,672],{"class":652},[613,51212,675],{"class":618},[613,51214,700],{"class":639},[613,51216,681],{"class":618},[613,51218,51219,51221,51223,51225,51227,51229,51231,51233],{"class":615,"line":715},[613,51220,653],{"class":652},[613,51222,656],{"class":618},[613,51224,3567],{"class":659},[613,51226,669],{"class":618},[613,51228,672],{"class":652},[613,51230,675],{"class":618},[613,51232,609],{"class":639},[613,51234,681],{"class":618},[613,51236,51237],{"class":615,"line":721},[613,51238,718],{"emptyLinePlaceholder":570},[613,51240,51241,51243,51246,51248,51250,51252,51255,51258,51260,51262,51264,51266,51268,51270,51272],{"class":615,"line":731},[613,51242,2463],{"class":626},[613,51244,51245],{"class":659}," fboRef ",[613,51247,633],{"class":618},[613,51249,3567],{"class":2482},[613,51251,619],{"class":618},[613,51253,51254],{"class":1180},"InstanceType",[613,51256,51257],{"class":618},"\u003Ctypeof",[613,51259,51164],{"class":659},[613,51261,3720],{"class":618},[613,51263,3714],{"class":618},[613,51265,3717],{"class":1180},[613,51267,3720],{"class":618},[613,51269,2485],{"class":659},[613,51271,3725],{"class":618},[613,51273,2496],{"class":659},[613,51275,51276,51278,51280,51282,51284,51286,51288,51290,51292,51294,51296,51298],{"class":615,"line":754},[613,51277,2463],{"class":626},[613,51279,10677],{"class":659},[613,51281,633],{"class":618},[613,51283,3567],{"class":2482},[613,51285,619],{"class":618},[613,51287,16908],{"class":1180},[613,51289,3714],{"class":618},[613,51291,3717],{"class":1180},[613,51293,3720],{"class":618},[613,51295,2485],{"class":659},[613,51297,3725],{"class":618},[613,51299,2496],{"class":659},[613,51301,51302],{"class":615,"line":766},[613,51303,718],{"emptyLinePlaceholder":570},[613,51305,51306,51308,51310,51312,51314,51316,51318,51320,51322,51324,51326],{"class":615,"line":776},[613,51307,37849],{"class":626},[613,51309,37852],{"class":2482},[613,51311,37855],{"class":618},[613,51313,37858],{"class":7049},[613,51315,37861],{"class":618},[613,51317,656],{"class":618},[613,51319,37858],{"class":622},[613,51321,1198],{"class":618},[613,51323,5570],{"class":1180},[613,51325,37872],{"class":618},[613,51327,1184],{"class":618},[613,51329,51330,51332,51334,51336,51338,51340,51342,51344,51346,51349],{"class":615,"line":781},[613,51331,19771],{"class":652},[613,51333,3143],{"class":622},[613,51335,20850],{"class":618},[613,51337,10857],{"class":659},[613,51339,1126],{"class":618},[613,51341,3754],{"class":659},[613,51343,4893],{"class":622},[613,51345,39867],{"class":618},[613,51347,51348],{"class":652}," return",[613,51350,20808],{"class":618},[613,51352,51353,51356,51358,51360,51362,51364,51366,51368,51370,51372,51374],{"class":615,"line":807},[613,51354,51355],{"class":659}," torusRef",[613,51357,1126],{"class":618},[613,51359,3754],{"class":659},[613,51361,1126],{"class":618},[613,51363,5839],{"class":659},[613,51365,1126],{"class":618},[613,51367,8065],{"class":659},[613,51369,2479],{"class":618},[613,51371,37858],{"class":659},[613,51373,37916],{"class":618},[613,51375,51376],{"class":799}," 0.745\n",[613,51378,51379,51381,51383,51385,51387,51389,51391,51393,51395,51397,51399],{"class":615,"line":607},[613,51380,51355],{"class":659},[613,51382,1126],{"class":618},[613,51384,3754],{"class":659},[613,51386,1126],{"class":618},[613,51388,5839],{"class":659},[613,51390,1126],{"class":618},[613,51392,37909],{"class":659},[613,51394,2479],{"class":618},[613,51396,37858],{"class":659},[613,51398,37916],{"class":618},[613,51400,51401],{"class":799}," 0.361\n",[613,51403,51404],{"class":615,"line":830},[613,51405,1305],{"class":618},[613,51407,51408,51410,51412],{"class":615,"line":841},[613,51409,708],{"class":618},[613,51411,623],{"class":622},[613,51413,645],{"class":618},[613,51415,51416],{"class":615,"line":852},[613,51417,718],{"emptyLinePlaceholder":570},[613,51419,51420,51422,51424],{"class":615,"line":862},[613,51421,619],{"class":618},[613,51423,726],{"class":622},[613,51425,645],{"class":618},[613,51427,51428,51430,51432,51434,51436,51438,51440,51443,51445,51447,51449,51451,51453,51455,51457],{"class":615,"line":608},[613,51429,734],{"class":618},[613,51431,737],{"class":622},[613,51433,789],{"class":618},[613,51435,8635],{"class":626},[613,51437,633],{"class":618},[613,51439,636],{"class":618},[613,51441,51442],{"class":799},"0x222",[613,51444,636],{"class":618},[613,51446,4393],{"class":618},[613,51448,24716],{"class":626},[613,51450,633],{"class":618},[613,51452,636],{"class":618},[613,51454,38009],{"class":659},[613,51456,636],{"class":618},[613,51458,645],{"class":618},[613,51460,51461,51463,51465,51467,51469,51471,51473,51475,51477,51479,51481,51483,51485,51487,51489],{"class":615,"line":882},[613,51462,757],{"class":618},[613,51464,760],{"class":622},[613,51466,789],{"class":618},[613,51468,1467],{"class":626},[613,51470,633],{"class":618},[613,51472,636],{"class":618},[613,51474,1474],{"class":618},[613,51476,945],{"class":799},[613,51478,1479],{"class":618},[613,51480,1521],{"class":799},[613,51482,1479],{"class":618},[613,51484,7668],{"class":799},[613,51486,1489],{"class":618},[613,51488,636],{"class":618},[613,51490,763],{"class":618},[613,51492,51493,51495,51497],{"class":615,"line":892},[613,51494,757],{"class":618},[613,51496,771],{"class":622},[613,51498,763],{"class":618},[613,51500,51501],{"class":615,"line":2671},[613,51502,718],{"emptyLinePlaceholder":570},[613,51504,51505,51507,51509,51511,51513,51515,51517,51519,51521,51523,51525,51527,51529],{"class":615,"line":2680},[613,51506,757],{"class":618},[613,51508,8313],{"class":622},[613,51510,789],{"class":618},[613,51512,1997],{"class":626},[613,51514,633],{"class":618},[613,51516,636],{"class":618},[613,51518,1474],{"class":618},[613,51520,1486],{"class":799},[613,51522,1479],{"class":618},[613,51524,1486],{"class":799},[613,51526,1489],{"class":618},[613,51528,636],{"class":618},[613,51530,763],{"class":618},[613,51532,51534,51536],{"class":51533,"line":2714},[615,649],[613,51535,757],{"class":618},[613,51537,51538],{"class":622},"Fbo\n",[613,51540,51542,51544,51546,51548,51551],{"class":51541,"line":2723},[615,649],[613,51543,10893],{"class":626},[613,51545,633],{"class":618},[613,51547,636],{"class":618},[613,51549,51550],{"class":639},"fboRef",[613,51552,3200],{"class":618},[613,51554,51556,51558,51560,51562,51564,51566],{"class":51555,"line":2732},[615,649],[613,51557,10907],{"class":618},[613,51559,11572],{"class":626},[613,51561,633],{"class":618},[613,51563,636],{"class":618},[613,51565,951],{"class":4536},[613,51567,3200],{"class":618},[613,51569,51571,51573,51576,51578,51580,51582,51584,51586,51588,51590],{"class":51570,"line":2741},[615,649],[613,51572,10907],{"class":618},[613,51574,51575],{"class":626},"settings",[613,51577,633],{"class":618},[613,51579,636],{"class":618},[613,51581,12614],{"class":618},[613,51583,41880],{"class":622},[613,51585,12619],{"class":618},[613,51587,1901],{"class":799},[613,51589,669],{"class":618},[613,51591,3200],{"class":618},[613,51593,51594],{"class":615,"line":2763},[613,51595,16014],{"class":618},[613,51597,51598,51600,51602],{"class":615,"line":2814},[613,51599,757],{"class":618},[613,51601,836],{"class":622},[613,51603,645],{"class":618},[613,51605,51606,51608,51610,51612,51614,51616,51618,51620,51622,51624,51626,51628,51630,51632,51634],{"class":615,"line":2823},[613,51607,833],{"class":618},[613,51609,847],{"class":622},[613,51611,789],{"class":618},[613,51613,1997],{"class":626},[613,51615,633],{"class":618},[613,51617,636],{"class":618},[613,51619,1474],{"class":618},[613,51621,1901],{"class":799},[613,51623,1479],{"class":618},[613,51625,1901],{"class":799},[613,51627,1479],{"class":618},[613,51629,1901],{"class":799},[613,51631,1489],{"class":618},[613,51633,636],{"class":618},[613,51635,763],{"class":618},[613,51637,51638],{"class":615,"line":2832},[613,51639,718],{"emptyLinePlaceholder":570},[613,51641,51642,51644],{"class":615,"line":4034},[613,51643,833],{"class":618},[613,51645,21840],{"class":622},[613,51647,51648,51650,51652,51654,51656,51659],{"class":615,"line":4078},[613,51649,8243],{"class":618},[613,51651,7772],{"class":626},[613,51653,633],{"class":618},[613,51655,636],{"class":618},[613,51657,51658],{"class":799},"0xFFFFFF",[613,51660,3200],{"class":618},[613,51662,51663,51665,51667,51669,51671,51673,51675,51677,51679,51681,51684],{"class":615,"line":4105},[613,51664,8243],{"class":618},[613,51666,2801],{"class":626},[613,51668,633],{"class":618},[613,51670,636],{"class":618},[613,51672,51550],{"class":659},[613,51674,3757],{"class":618},[613,51676,25702],{"class":659},[613,51678,3757],{"class":618},[613,51680,2777],{"class":659},[613,51682,51683],{"class":618}," ?? null",[613,51685,3200],{"class":618},[613,51687,51688],{"class":615,"line":4124},[613,51689,8297],{"class":618},[613,51691,51692,51694,51696],{"class":615,"line":4165},[613,51693,875],{"class":618},[613,51695,836],{"class":622},[613,51697,645],{"class":618},[613,51699,51700],{"class":615,"line":4174},[613,51701,718],{"emptyLinePlaceholder":570},[613,51703,51704,51706],{"class":615,"line":4183},[613,51705,757],{"class":618},[613,51707,5305],{"class":622},[613,51709,51710,51712,51714,51716,51718],{"class":615,"line":19957},[613,51711,10893],{"class":626},[613,51713,633],{"class":618},[613,51715,636],{"class":618},[613,51717,10857],{"class":639},[613,51719,3200],{"class":618},[613,51721,51722,51724,51726,51728,51730,51732,51734,51736,51738,51740,51742,51744],{"class":615,"line":19972},[613,51723,10907],{"class":618},[613,51725,1467],{"class":626},[613,51727,633],{"class":618},[613,51729,636],{"class":618},[613,51731,1474],{"class":618},[613,51733,2705],{"class":799},[613,51735,1479],{"class":618},[613,51737,945],{"class":799},[613,51739,1479],{"class":618},[613,51741,945],{"class":799},[613,51743,1489],{"class":618},[613,51745,3200],{"class":618},[613,51747,51748],{"class":615,"line":19987},[613,51749,10927],{"class":618},[613,51751,51752,51754,51756,51758,51760,51762,51764,51766,51768,51770,51772,51774,51776,51778,51780,51782,51784],{"class":615,"line":19992},[613,51753,833],{"class":618},[613,51755,10350],{"class":622},[613,51757,789],{"class":618},[613,51759,1997],{"class":626},[613,51761,633],{"class":618},[613,51763,636],{"class":618},[613,51765,1474],{"class":618},[613,51767,1901],{"class":799},[613,51769,1479],{"class":618},[613,51771,1521],{"class":799},[613,51773,1479],{"class":618},[613,51775,34975],{"class":799},[613,51777,1479],{"class":618},[613,51779,11242],{"class":799},[613,51781,1489],{"class":618},[613,51783,636],{"class":618},[613,51785,763],{"class":618},[613,51787,51788,51790,51792],{"class":615,"line":19999},[613,51789,833],{"class":618},[613,51791,857],{"class":622},[613,51793,763],{"class":618},[613,51795,51796,51798,51800],{"class":615,"line":20004},[613,51797,875],{"class":618},[613,51799,836],{"class":622},[613,51801,645],{"class":618},[613,51803,51804,51806,51808],{"class":615,"line":20010},[613,51805,885],{"class":618},[613,51807,737],{"class":622},[613,51809,645],{"class":618},[613,51811,51812,51814,51816],{"class":615,"line":20031},[613,51813,708],{"class":618},[613,51815,726],{"class":622},[613,51817,645],{"class":618},[480,51819,902],{"id":901},[907,51821,51822,51832],{},[910,51823,51824],{},[913,51825,51826,51828,51830],{},[916,51827,918],{"align":977},[916,51829,921],{"align":977},[916,51831,924],{},[926,51833,51834,51850,51866,51890,51915],{},[913,51835,51836,51842,51847],{},[931,51837,51838],{"align":977},[1681,51839,51840],{},[594,51841,39139],{},[931,51843,51844,51846],{"align":977},[594,51845,5565],{}," - The width of the FBO.",[931,51848,51849],{},"Width of the canvas",[913,51851,51852,51858,51863],{},[931,51853,51854],{"align":977},[1681,51855,51856],{},[594,51857,39153],{},[931,51859,51860,51862],{"align":977},[594,51861,5565],{}," - the height of the FBO",[931,51864,51865],{},"Height of the canvas",[913,51867,51868,51874,51886],{},[931,51869,51870],{"align":977},[1681,51871,51872],{},[594,51873,11572],{},[931,51875,51876,51878,51879,1126],{"align":977},[594,51877,16208],{}," - Whether or not the FBO should render the depth to a ",[1120,51880,51883],{"href":51881,"rel":51882},"https://threejs.org/docs/?q=webglre#api/en/renderers/WebGLRenderTarget.depthTexture",[1124],[594,51884,51885],{},"depthTexture",[931,51887,51888],{},[594,51889,951],{},[913,51891,51892,51898,51911],{},[931,51893,51894],{"align":977},[1681,51895,51896],{},[594,51897,51575],{},[931,51899,51900,51903,51904],{"align":977},[594,51901,51902],{},"WebGLRenderTargetOptions"," - Every other configuration property for the ",[1120,51905,51908,23830],{"href":51906,"rel":51907},"https://threejs.org/docs/#api/en/renderers/WebGLRenderTarget",[1124],[594,51909,51910],{},"WebGLRenderTarget",[931,51912,51913],{},[594,51914,6335],{},[913,51916,51917,51924,51929],{},[931,51918,51919],{"align":977},[1681,51920,51921],{},[594,51922,51923],{},"autoRender",[931,51925,51926,51928],{"align":977},[594,51927,16208],{}," - Whether to automatically render the FBO on the default scene.",[931,51930,51931],{},[594,51932,941],{},[480,51934,51936],{"id":51935},"usefbo","useFBO",[590,51938,51119],{},[590,51940,51941,51942,51944],{},"Cientos provides a ",[594,51943,51936],{}," composable to make it easy to use FBOs in your application.",[3268,51946,51947],{},[590,51948,2843,51949,51951],{},[594,51950,51936],{}," composable must be used inside of a child component since it needs the context of TresCanvas.",[4191,51953,15],{"id":51954},"usage-1",[602,51956,51959],{"className":604,"code":51957,"highlights":51958,"language":609,"meta":552,"style":552},"\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",[554,705,715,721,731,754,766,776,781,892],[594,51960,51961,51981,52001,52005,52021,52032,52043,52054,52064,52076,52081,52088,52096,52100,52108,52116,52148,52152,52158,52172,52194,52198,52206],{"__ignoreMap":552},[613,51962,51963,51965,51967,51969,51971,51973,51975,51977,51979],{"class":615,"line":553},[613,51964,619],{"class":618},[613,51966,623],{"class":622},[613,51968,627],{"class":626},[613,51970,630],{"class":626},[613,51972,633],{"class":618},[613,51974,636],{"class":618},[613,51976,640],{"class":639},[613,51978,636],{"class":618},[613,51980,645],{"class":618},[613,51982,51984,51986,51988,51991,51993,51995,51997,51999],{"class":51983,"line":554},[615,649],[613,51985,653],{"class":652},[613,51987,656],{"class":618},[613,51989,51990],{"class":659}," useFBO",[613,51992,669],{"class":618},[613,51994,672],{"class":652},[613,51996,675],{"class":618},[613,51998,678],{"class":639},[613,52000,681],{"class":618},[613,52002,52003],{"class":615,"line":684},[613,52004,718],{"emptyLinePlaceholder":570},[613,52006,52008,52010,52013,52015,52017,52019],{"class":52007,"line":705},[615,649],[613,52009,2463],{"class":626},[613,52011,52012],{"class":659}," fboTarget ",[613,52014,633],{"class":618},[613,52016,51990],{"class":2482},[613,52018,2485],{"class":659},[613,52020,3329],{"class":618},[613,52022,52024,52026,52028,52030],{"class":52023,"line":715},[615,649],[613,52025,1239],{"class":622},[613,52027,1198],{"class":618},[613,52029,4537],{"class":4536},[613,52031,2536],{"class":618},[613,52033,52035,52037,52039,52041],{"class":52034,"line":721},[615,649],[613,52036,1220],{"class":622},[613,52038,1198],{"class":618},[613,52040,40427],{"class":799},[613,52042,2536],{"class":618},[613,52044,52046,52048,52050,52052],{"class":52045,"line":731},[615,649],[613,52047,1230],{"class":622},[613,52049,1198],{"class":618},[613,52051,40427],{"class":799},[613,52053,2536],{"class":618},[613,52055,52057,52060,52062],{"class":52056,"line":754},[615,649],[613,52058,52059],{"class":622}," settings",[613,52061,1198],{"class":618},[613,52063,1184],{"class":618},[613,52065,52067,52070,52072,52074],{"class":52066,"line":766},[615,649],[613,52068,52069],{"class":622}," samples",[613,52071,1198],{"class":618},[613,52073,2607],{"class":799},[613,52075,2536],{"class":618},[613,52077,52079],{"class":52078,"line":776},[615,649],[613,52080,2643],{"class":618},[613,52082,52084,52086],{"class":52083,"line":781},[615,649],[613,52085,2476],{"class":618},[613,52087,2496],{"class":659},[613,52089,52090,52092,52094],{"class":615,"line":807},[613,52091,708],{"class":618},[613,52093,623],{"class":622},[613,52095,645],{"class":618},[613,52097,52098],{"class":615,"line":607},[613,52099,718],{"emptyLinePlaceholder":570},[613,52101,52102,52104,52106],{"class":615,"line":830},[613,52103,619],{"class":618},[613,52105,726],{"class":622},[613,52107,645],{"class":618},[613,52109,52110,52112,52114],{"class":615,"line":841},[613,52111,734],{"class":618},[613,52113,836],{"class":622},[613,52115,645],{"class":618},[613,52117,52118,52120,52122,52124,52126,52128,52130,52132,52134,52136,52138,52140,52142,52144,52146],{"class":615,"line":852},[613,52119,757],{"class":618},[613,52121,847],{"class":622},[613,52123,789],{"class":618},[613,52125,1997],{"class":626},[613,52127,633],{"class":618},[613,52129,636],{"class":618},[613,52131,1474],{"class":618},[613,52133,1901],{"class":799},[613,52135,1479],{"class":618},[613,52137,1901],{"class":799},[613,52139,1479],{"class":618},[613,52141,1901],{"class":799},[613,52143,1489],{"class":618},[613,52145,636],{"class":618},[613,52147,763],{"class":618},[613,52149,52150],{"class":615,"line":862},[613,52151,718],{"emptyLinePlaceholder":570},[613,52153,52154,52156],{"class":615,"line":608},[613,52155,757],{"class":618},[613,52157,21840],{"class":622},[613,52159,52160,52162,52164,52166,52168,52170],{"class":615,"line":882},[613,52161,10907],{"class":618},[613,52163,7772],{"class":626},[613,52165,633],{"class":618},[613,52167,636],{"class":618},[613,52169,51658],{"class":799},[613,52171,3200],{"class":618},[613,52173,52175,52177,52179,52181,52183,52186,52188,52190,52192],{"class":52174,"line":892},[615,649],[613,52176,10907],{"class":618},[613,52178,2801],{"class":626},[613,52180,633],{"class":618},[613,52182,636],{"class":618},[613,52184,52185],{"class":659},"fboTarget",[613,52187,3757],{"class":618},[613,52189,2777],{"class":659},[613,52191,51683],{"class":618},[613,52193,3200],{"class":618},[613,52195,52196],{"class":615,"line":2671},[613,52197,16014],{"class":618},[613,52199,52200,52202,52204],{"class":615,"line":2680},[613,52201,885],{"class":618},[613,52203,836],{"class":622},[613,52205,645],{"class":618},[613,52207,52208,52210,52212],{"class":615,"line":2714},[613,52209,708],{"class":618},[613,52211,726],{"class":622},[613,52213,645],{"class":618},[4191,52215,12698],{"id":16243},[907,52217,52218,52228],{},[910,52219,52220],{},[913,52221,52222,52224,52226],{},[916,52223,918],{"align":977},[916,52225,921],{"align":977},[916,52227,924],{},[926,52229,52230,52244,52258,52279],{},[913,52231,52232,52238,52242],{},[931,52233,52234],{"align":977},[1681,52235,52236],{},[594,52237,39139],{},[931,52239,52240,51846],{"align":977},[594,52241,5565],{},[931,52243,51849],{},[913,52245,52246,52252,52256],{},[931,52247,52248],{"align":977},[1681,52249,52250],{},[594,52251,39153],{},[931,52253,52254,51862],{"align":977},[594,52255,5565],{},[931,52257,51865],{},[913,52259,52260,52266,52275],{},[931,52261,52262],{"align":977},[1681,52263,52264],{},[594,52265,11572],{},[931,52267,52268,51878,52270,1126],{"align":977},[594,52269,16208],{},[1120,52271,52273],{"href":51881,"rel":52272},[1124],[594,52274,51885],{},[931,52276,52277],{},[594,52278,951],{},[913,52280,52281,52287,52296],{},[931,52282,52283],{"align":977},[1681,52284,52285],{},[594,52286,51575],{},[931,52288,52289,51903,52291],{"align":977},[594,52290,51902],{},[1120,52292,52294,23830],{"href":51906,"rel":52293},[1124],[594,52295,51910],{},[931,52297,52298],{},[594,52299,6335],{},[1307,52301,52302],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":552,"searchDepth":553,"depth":554,"links":52304},[52305,52306,52307],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},{"id":51935,"depth":554,"text":51936,"children":52308},[52309,52310],{"id":51954,"depth":684,"text":15},{"id":16243,"depth":684,"text":12698},"Render to texture using Frame Buffer Objects.",{},{"title":409,"description":52311},"ch0ffhPITGouVRylpEdp2CmD8Fl-JOZCHt9eio9zKpc",{"id":52316,"title":413,"body":52317,"description":52734,"extension":567,"links":568,"meta":52735,"navigation":570,"path":414,"seo":52736,"stem":415,"__hash__":52737},"docs/2.api/9.objects/gradient-texture.md",{"type":477,"value":52318,"toc":52730},[52319,52324,52333,52335,52586,52588,52728],[2343,52320,52321],{},[52322,52323],"objects-gradient-texture",{},[590,52325,52326,52329,52330,52332],{},[594,52327,52328],{},"\u003CGradientTexture />"," creates a gradient in a THREE.Texture and attaches it to its parent THREE.Material's ",[594,52331,2801],{}," by default.",[480,52334,15],{"id":600},[602,52336,52338],{"className":604,"code":52337,"language":609,"meta":552,"style":552},"\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",[594,52339,52340,52360,52379,52387,52391,52399,52407,52439,52443,52451,52479,52487,52494,52518,52549,52554,52562,52570,52578],{"__ignoreMap":552},[613,52341,52342,52344,52346,52348,52350,52352,52354,52356,52358],{"class":615,"line":553},[613,52343,619],{"class":618},[613,52345,623],{"class":622},[613,52347,627],{"class":626},[613,52349,630],{"class":626},[613,52351,633],{"class":618},[613,52353,636],{"class":618},[613,52355,640],{"class":639},[613,52357,636],{"class":618},[613,52359,645],{"class":618},[613,52361,52362,52364,52366,52369,52371,52373,52375,52377],{"class":615,"line":554},[613,52363,653],{"class":652},[613,52365,656],{"class":618},[613,52367,52368],{"class":659}," GradientTexture",[613,52370,669],{"class":618},[613,52372,672],{"class":652},[613,52374,675],{"class":618},[613,52376,678],{"class":639},[613,52378,681],{"class":618},[613,52380,52381,52383,52385],{"class":615,"line":684},[613,52382,708],{"class":618},[613,52384,623],{"class":622},[613,52386,645],{"class":618},[613,52388,52389],{"class":615,"line":705},[613,52390,718],{"emptyLinePlaceholder":570},[613,52392,52393,52395,52397],{"class":615,"line":715},[613,52394,619],{"class":618},[613,52396,726],{"class":622},[613,52398,645],{"class":618},[613,52400,52401,52403,52405],{"class":615,"line":721},[613,52402,734],{"class":618},[613,52404,737],{"class":622},[613,52406,645],{"class":618},[613,52408,52409,52411,52413,52415,52417,52419,52421,52423,52425,52427,52429,52431,52433,52435,52437],{"class":615,"line":731},[613,52410,757],{"class":618},[613,52412,760],{"class":622},[613,52414,789],{"class":618},[613,52416,1467],{"class":626},[613,52418,633],{"class":618},[613,52420,636],{"class":618},[613,52422,1474],{"class":618},[613,52424,945],{"class":799},[613,52426,1479],{"class":618},[613,52428,945],{"class":799},[613,52430,1479],{"class":618},[613,52432,7668],{"class":799},[613,52434,1489],{"class":618},[613,52436,636],{"class":618},[613,52438,763],{"class":618},[613,52440,52441],{"class":615,"line":754},[613,52442,718],{"emptyLinePlaceholder":570},[613,52444,52445,52447,52449],{"class":615,"line":766},[613,52446,757],{"class":618},[613,52448,836],{"class":622},[613,52450,645],{"class":618},[613,52452,52453,52455,52457,52459,52461,52463,52465,52467,52469,52471,52473,52475,52477],{"class":615,"line":776},[613,52454,833],{"class":618},[613,52456,26773],{"class":622},[613,52458,789],{"class":618},[613,52460,1997],{"class":626},[613,52462,633],{"class":618},[613,52464,636],{"class":618},[613,52466,1474],{"class":618},[613,52468,800],{"class":799},[613,52470,1479],{"class":618},[613,52472,800],{"class":799},[613,52474,1489],{"class":618},[613,52476,636],{"class":618},[613,52478,763],{"class":618},[613,52480,52481,52483,52485],{"class":615,"line":781},[613,52482,833],{"class":618},[613,52484,7697],{"class":622},[613,52486,645],{"class":618},[613,52488,52489,52491],{"class":615,"line":807},[613,52490,844],{"class":618},[613,52492,52493],{"class":622},"GradientTexture\n",[613,52495,52496,52499,52502,52504,52506,52508,52510,52512,52514,52516],{"class":615,"line":607},[613,52497,52498],{"class":618}," :",[613,52500,52501],{"class":626},"stops",[613,52503,633],{"class":618},[613,52505,636],{"class":618},[613,52507,1474],{"class":618},[613,52509,945],{"class":799},[613,52511,1479],{"class":618},[613,52513,1901],{"class":799},[613,52515,1489],{"class":618},[613,52517,3200],{"class":618},[613,52519,52520,52522,52525,52527,52529,52531,52533,52535,52537,52539,52541,52543,52545,52547],{"class":615,"line":830},[613,52521,52498],{"class":618},[613,52523,52524],{"class":626},"colors",[613,52526,633],{"class":618},[613,52528,636],{"class":618},[613,52530,1474],{"class":618},[613,52532,2488],{"class":618},[613,52534,7796],{"class":639},[613,52536,2488],{"class":618},[613,52538,1479],{"class":618},[613,52540,2488],{"class":618},[613,52542,5954],{"class":639},[613,52544,2488],{"class":618},[613,52546,1489],{"class":618},[613,52548,3200],{"class":618},[613,52550,52551],{"class":615,"line":841},[613,52552,52553],{"class":618}," />\n",[613,52555,52556,52558,52560],{"class":615,"line":852},[613,52557,865],{"class":618},[613,52559,7697],{"class":622},[613,52561,645],{"class":618},[613,52563,52564,52566,52568],{"class":615,"line":862},[613,52565,875],{"class":618},[613,52567,836],{"class":622},[613,52569,645],{"class":618},[613,52571,52572,52574,52576],{"class":615,"line":608},[613,52573,885],{"class":618},[613,52575,737],{"class":622},[613,52577,645],{"class":618},[613,52579,52580,52582,52584],{"class":615,"line":882},[613,52581,708],{"class":618},[613,52583,726],{"class":622},[613,52585,645],{"class":618},[480,52587,902],{"id":901},[907,52589,52590,52600],{},[910,52591,52592],{},[913,52593,52594,52596,52598],{},[916,52595,918],{"align":977},[916,52597,921],{"align":977},[916,52599,924],{},[926,52601,52602,52627,52641,52656,52669,52682,52699,52713],{},[913,52603,52604,52608,52625],{},[931,52605,52606],{"align":977},[594,52607,52501],{},[931,52609,4418,52610,52612,52613,3132,52615,52617,52618,52621,52622,1126],{"align":977},[594,52611,35174],{}," of values between ",[594,52614,945],{},[594,52616,1901],{}," representing the color positions in the gradient. ",[594,52619,52620],{},"stops.length"," should match ",[594,52623,52624],{},"color.length",[931,52626],{},[913,52628,52629,52633,52639],{},[931,52630,52631],{"align":977},[594,52632,52524],{},[931,52634,4418,52635,52638],{"align":977},[594,52636,52637],{},"THREE.ColorRepresentation[]"," representing the colors in the gradient.",[931,52640],{},[913,52642,52643,52648,52651],{},[931,52644,52645],{"align":977},[594,52646,52647],{},"attach",[931,52649,52650],{"align":977},"Where the component should be attached within its parent.",[931,52652,52653],{},[594,52654,52655],{},"'map'",[913,52657,52658,52662,52665],{},[931,52659,52660],{"align":977},[594,52661,39153],{},[931,52663,52664],{"align":977},"Height of the canvas used to draw the gradient.",[931,52666,52667],{},[594,52668,37656],{},[913,52670,52671,52675,52678],{},[931,52672,52673],{"align":977},[594,52674,39139],{},[931,52676,52677],{"align":977},"Width of the canvas used to draw the gradient.",[931,52679,52680],{},[594,52681,34975],{},[913,52683,52684,52688,52694],{},[931,52685,52686],{"align":977},[594,52687,5730],{},[931,52689,52690,52693],{"align":977},[594,52691,52692],{},"'linear' | 'radial'"," Type of gradient to draw.",[931,52695,52696],{},[594,52697,52698],{},"'linear'",[913,52700,52701,52706,52709],{},[931,52702,52703],{"align":977},[594,52704,52705],{},"innerCircleRadius",[931,52707,52708],{"align":977},"Radius of the inner circle of a radial gradient.",[931,52710,52711],{},[594,52712,945],{},[913,52714,52715,52720,52723],{},[931,52716,52717],{"align":977},[594,52718,52719],{},"outerCircleRadius",[931,52721,52722],{"align":977},"Radius of the outer circle of a radial gradient.",[931,52724,52725],{},[594,52726,52727],{},"'auto'",[1307,52729,1656],{},{"title":552,"searchDepth":553,"depth":554,"links":52731},[52732,52733],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},"Create gradient textures for materials.",{},{"title":413,"description":52734},"vYfm15fEwNZgRGLtXSYlU49KPYrI7wEBqbJQsM4JeNo",{"id":52739,"title":417,"body":52740,"description":58708,"extension":567,"links":568,"meta":58709,"navigation":570,"path":418,"seo":58710,"stem":419,"__hash__":58711},"docs/2.api/9.objects/html.md",{"type":477,"value":52741,"toc":58689},[52742,52745,52758,52763,52765,53227,53231,53238,53243,53259,53267,53272,53412,53417,53421,53445,53450,53580,53584,53608,53611,53635,53652,53672,53677,53841,53845,53850,53873,53885,53890,55780,55782,55805,55825,55866,55869,55884,55895,55930,55937,55961,55978,55983,57587,57593,57599,57604,57804,57821,57823,58182,58184,58204,58208,58287,58289,58461,58665,58668,58686],[590,52743,52744],{},"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.",[590,52746,52747,52748,3132,52750,52753,52754,52757],{},"🚀 Works seamlessly with both ",[1681,52749,11428],{},[1681,52751,52752],{},"OrthographicCamera"," — the active camera is automatically detected by the ",[594,52755,52756],{},"\u003CHtml>"," component.",[2343,52759,52760],{},[52761,52762],"objects-html",{},[480,52764,15],{"id":600},[602,52766,52769],{"className":604,"code":52767,"highlights":52768,"language":609,"meta":552,"style":552},"\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",[554,607,830,841,852,862,608],[594,52770,52771,52791,52815,52833,52841,52845,52853,52871,52903,52911,52943,52951,52959,52967,52973,52979,52995,53022,53049,53054,53083,53092,53100,53108,53116,53124,53132,53143,53151,53166,53179,53191,53203,53215,53219],{"__ignoreMap":552},[613,52772,52773,52775,52777,52779,52781,52783,52785,52787,52789],{"class":615,"line":553},[613,52774,619],{"class":618},[613,52776,623],{"class":622},[613,52778,627],{"class":626},[613,52780,630],{"class":626},[613,52782,633],{"class":618},[613,52784,636],{"class":618},[613,52786,640],{"class":639},[613,52788,636],{"class":618},[613,52790,645],{"class":618},[613,52792,52794,52796,52798,52801,52803,52805,52807,52809,52811,52813],{"class":52793,"line":554},[615,649],[613,52795,653],{"class":652},[613,52797,656],{"class":618},[613,52799,52800],{"class":659}," Html",[613,52802,663],{"class":618},[613,52804,666],{"class":659},[613,52806,669],{"class":618},[613,52808,672],{"class":652},[613,52810,675],{"class":618},[613,52812,678],{"class":639},[613,52814,681],{"class":618},[613,52816,52817,52819,52821,52823,52825,52827,52829,52831],{"class":615,"line":684},[613,52818,653],{"class":652},[613,52820,656],{"class":618},[613,52822,691],{"class":659},[613,52824,669],{"class":618},[613,52826,672],{"class":652},[613,52828,675],{"class":618},[613,52830,700],{"class":639},[613,52832,681],{"class":618},[613,52834,52835,52837,52839],{"class":615,"line":705},[613,52836,708],{"class":618},[613,52838,623],{"class":622},[613,52840,645],{"class":618},[613,52842,52843],{"class":615,"line":715},[613,52844,718],{"emptyLinePlaceholder":570},[613,52846,52847,52849,52851],{"class":615,"line":721},[613,52848,619],{"class":618},[613,52850,726],{"class":622},[613,52852,645],{"class":618},[613,52854,52855,52857,52859,52861,52863,52865,52867,52869],{"class":615,"line":731},[613,52856,734],{"class":618},[613,52858,737],{"class":622},[613,52860,740],{"class":626},[613,52862,633],{"class":618},[613,52864,636],{"class":618},[613,52866,10263],{"class":639},[613,52868,636],{"class":618},[613,52870,645],{"class":618},[613,52872,52873,52875,52877,52879,52881,52883,52885,52887,52889,52891,52893,52895,52897,52899,52901],{"class":615,"line":754},[613,52874,757],{"class":618},[613,52876,760],{"class":622},[613,52878,789],{"class":618},[613,52880,1467],{"class":626},[613,52882,633],{"class":618},[613,52884,636],{"class":618},[613,52886,1474],{"class":618},[613,52888,800],{"class":799},[613,52890,1479],{"class":618},[613,52892,800],{"class":799},[613,52894,1479],{"class":618},[613,52896,7668],{"class":799},[613,52898,1489],{"class":618},[613,52900,636],{"class":618},[613,52902,763],{"class":618},[613,52904,52905,52907,52909],{"class":615,"line":766},[613,52906,757],{"class":618},[613,52908,771],{"class":622},[613,52910,763],{"class":618},[613,52912,52913,52915,52917,52919,52921,52923,52925,52927,52929,52931,52933,52935,52937,52939,52941],{"class":615,"line":776},[613,52914,757],{"class":618},[613,52916,836],{"class":622},[613,52918,789],{"class":618},[613,52920,1467],{"class":626},[613,52922,633],{"class":618},[613,52924,636],{"class":618},[613,52926,1474],{"class":618},[613,52928,1901],{"class":799},[613,52930,1479],{"class":618},[613,52932,1901],{"class":799},[613,52934,1479],{"class":618},[613,52936,1901],{"class":799},[613,52938,1489],{"class":618},[613,52940,636],{"class":618},[613,52942,645],{"class":618},[613,52944,52945,52947,52949],{"class":615,"line":781},[613,52946,833],{"class":618},[613,52948,847],{"class":622},[613,52950,763],{"class":618},[613,52952,52953,52955,52957],{"class":615,"line":807},[613,52954,833],{"class":618},[613,52956,857],{"class":622},[613,52958,763],{"class":618},[613,52960,52962,52964],{"class":52961,"line":607},[615,649],[613,52963,833],{"class":618},[613,52965,52966],{"class":622},"Html\n",[613,52968,52970],{"class":52969,"line":830},[615,649],[613,52971,52972],{"class":626}," center\n",[613,52974,52976],{"class":52975,"line":841},[615,649],[613,52977,52978],{"class":626}," transform\n",[613,52980,52982,52984,52987,52989,52991,52993],{"class":52981,"line":852},[615,649],[613,52983,8243],{"class":618},[613,52985,52986],{"class":626},"distance-factor",[613,52988,633],{"class":618},[613,52990,636],{"class":618},[613,52992,3876],{"class":799},[613,52994,3200],{"class":618},[613,52996,52998,53000,53002,53004,53006,53008,53010,53012,53014,53016,53018,53020],{"class":52997,"line":862},[615,649],[613,52999,8243],{"class":618},[613,53001,1467],{"class":626},[613,53003,633],{"class":618},[613,53005,636],{"class":618},[613,53007,1474],{"class":618},[613,53009,945],{"class":799},[613,53011,1479],{"class":618},[613,53013,945],{"class":799},[613,53015,1479],{"class":618},[613,53017,2154],{"class":799},[613,53019,1489],{"class":618},[613,53021,3200],{"class":618},[613,53023,53025,53027,53029,53031,53033,53035,53037,53039,53041,53043,53045,53047],{"class":53024,"line":608},[615,649],[613,53026,8243],{"class":618},[613,53028,792],{"class":626},[613,53030,633],{"class":618},[613,53032,636],{"class":618},[613,53034,1474],{"class":618},[613,53036,2597],{"class":799},[613,53038,1479],{"class":618},[613,53040,2597],{"class":799},[613,53042,1479],{"class":618},[613,53044,2597],{"class":799},[613,53046,1489],{"class":618},[613,53048,3200],{"class":618},[613,53050,53051],{"class":615,"line":882},[613,53052,53053],{"class":618}," >\n",[613,53055,53056,53058,53061,53063,53065,53067,53070,53072,53074,53077,53079,53081],{"class":615,"line":892},[613,53057,844],{"class":618},[613,53059,53060],{"class":622},"h1",[613,53062,23830],{"class":626},[613,53064,633],{"class":618},[613,53066,636],{"class":618},[613,53068,53069],{"class":639},"title",[613,53071,636],{"class":618},[613,53073,3720],{"class":618},[613,53075,53076],{"class":659},"I'm a Box 📦",[613,53078,708],{"class":618},[613,53080,53060],{"class":622},[613,53082,645],{"class":618},[613,53084,53085,53087,53090],{"class":615,"line":2671},[613,53086,865],{"class":618},[613,53088,53089],{"class":622},"Html",[613,53091,645],{"class":618},[613,53093,53094,53096,53098],{"class":615,"line":2680},[613,53095,875],{"class":618},[613,53097,836],{"class":622},[613,53099,645],{"class":618},[613,53101,53102,53104,53106],{"class":615,"line":2714},[613,53103,757],{"class":618},[613,53105,8313],{"class":622},[613,53107,763],{"class":618},[613,53109,53110,53112,53114],{"class":615,"line":2723},[613,53111,757],{"class":618},[613,53113,8758],{"class":622},[613,53115,763],{"class":618},[613,53117,53118,53120,53122],{"class":615,"line":2732},[613,53119,885],{"class":618},[613,53121,737],{"class":622},[613,53123,645],{"class":618},[613,53125,53126,53128,53130],{"class":615,"line":2741},[613,53127,708],{"class":618},[613,53129,726],{"class":622},[613,53131,645],{"class":618},[613,53133,53134,53136,53138,53141],{"class":615,"line":2763},[613,53135,619],{"class":618},[613,53137,1307],{"class":622},[613,53139,53140],{"class":626}," scoped",[613,53142,645],{"class":618},[613,53144,53145,53147,53149],{"class":615,"line":2814},[613,53146,1126],{"class":618},[613,53148,53069],{"class":1180},[613,53150,1184],{"class":618},[613,53152,53153,53156,53158,53161,53164],{"class":615,"line":2823},[613,53154,53155],{"class":4269}," background-color",[613,53157,1198],{"class":618},[613,53159,53160],{"class":618}," #",[613,53162,53163],{"class":659},"1e1e1e",[613,53165,8570],{"class":618},[613,53167,53168,53170,53172,53174,53177],{"class":615,"line":2832},[613,53169,5686],{"class":4269},[613,53171,1198],{"class":618},[613,53173,53160],{"class":618},[613,53175,53176],{"class":659},"ffffff",[613,53178,8570],{"class":618},[613,53180,53181,53184,53186,53189],{"class":615,"line":4034},[613,53182,53183],{"class":4269}," font-size",[613,53185,1198],{"class":618},[613,53187,53188],{"class":799}," 0.75rem",[613,53190,8570],{"class":618},[613,53192,53193,53196,53198,53201],{"class":615,"line":4078},[613,53194,53195],{"class":4269}," padding",[613,53197,1198],{"class":618},[613,53199,53200],{"class":799}," 0.25rem",[613,53202,8570],{"class":618},[613,53204,53205,53208,53210,53213],{"class":615,"line":4105},[613,53206,53207],{"class":4269}," border-radius",[613,53209,1198],{"class":618},[613,53211,53212],{"class":799}," 0.375rem",[613,53214,8570],{"class":618},[613,53216,53217],{"class":615,"line":4124},[613,53218,1305],{"class":618},[613,53220,53221,53223,53225],{"class":615,"line":4165},[613,53222,708],{"class":618},[613,53224,1307],{"class":622},[613,53226,645],{"class":618},[480,53228,53230],{"id":53229},"occlusion","Occlusion",[590,53232,53233,53234,53237],{},"By default, the HTML content will be visible through other objects in the scene. You can use the ",[594,53235,53236],{},"occlude"," prop to make the HTML content occlude other objects in the scene.",[590,53239,53240,53241,39534],{},"Html can be hidden behind one or more objects in your scene using the ",[594,53242,53236],{},[602,53244,53246],{"className":604,"code":53245,"language":609,"meta":552,"style":552},"\u003CHtml occlude>\n",[594,53247,53248],{"__ignoreMap":552},[613,53249,53250,53252,53254,53257],{"class":615,"line":553},[613,53251,619],{"class":618},[613,53253,53089],{"class":622},[613,53255,53256],{"class":626}," occlude",[613,53258,645],{"class":618},[590,53260,938,53261,53263,53264,53266],{},[594,53262,53236],{},", then ",[594,53265,52756],{}," will be hidden by any objects that pass in front of its position.",[2343,53268,53269],{},[53270,53271],"objects-html-occlusion",{},[5520,53273,5522,53274,53277],{},[5524,53275,53276],{},"Demo code",[602,53278,53280],{"className":44201,"code":53279,"language":44203,"meta":552,"style":552},"\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",[594,53281,53282,53302,53310,53318,53368,53396,53404],{"__ignoreMap":552},[613,53283,53284,53286,53288,53291,53293,53295,53298,53300],{"class":615,"line":553},[613,53285,619],{"class":618},[613,53287,836],{"class":622},[613,53289,53290],{"class":626}," :position",[613,53292,633],{"class":618},[613,53294,636],{"class":618},[613,53296,53297],{"class":639},"[0, 1, -2]",[613,53299,636],{"class":618},[613,53301,645],{"class":618},[613,53303,53304,53306,53308],{"class":615,"line":554},[613,53305,734],{"class":618},[613,53307,847],{"class":622},[613,53309,763],{"class":618},[613,53311,53312,53314,53316],{"class":615,"line":684},[613,53313,734],{"class":618},[613,53315,857],{"class":622},[613,53317,763],{"class":618},[613,53319,53320,53322,53324,53327,53330,53332,53335,53337,53339,53341,53343,53345,53347,53349,53352,53354,53357,53359,53361,53364,53366],{"class":615,"line":705},[613,53321,734],{"class":618},[613,53323,44203],{"class":622},[613,53325,53326],{"class":626}," center",[613,53328,53329],{"class":626}," transform",[613,53331,53256],{"class":626},[613,53333,53334],{"class":626}," :distance-factor",[613,53336,633],{"class":618},[613,53338,636],{"class":618},[613,53340,3876],{"class":639},[613,53342,636],{"class":618},[613,53344,53290],{"class":626},[613,53346,633],{"class":618},[613,53348,636],{"class":618},[613,53350,53351],{"class":639},"[0, 0, 2]",[613,53353,636],{"class":618},[613,53355,53356],{"class":626}," :z-index-range",[613,53358,633],{"class":618},[613,53360,636],{"class":618},[613,53362,53363],{"class":639},"[28, 0]",[613,53365,636],{"class":618},[613,53367,645],{"class":618},[613,53369,53370,53372,53374,53376,53378,53380,53383,53385,53387,53390,53392,53394],{"class":615,"line":715},[613,53371,757],{"class":618},[613,53373,53060],{"class":622},[613,53375,23830],{"class":626},[613,53377,633],{"class":618},[613,53379,636],{"class":618},[613,53381,53382],{"class":639},"bg-white dark:bg-dark text-xs p-1 rounded",[613,53384,636],{"class":618},[613,53386,3720],{"class":618},[613,53388,53389],{"class":659},"Move camera",[613,53391,708],{"class":618},[613,53393,53060],{"class":622},[613,53395,645],{"class":618},[613,53397,53398,53400,53402],{"class":615,"line":721},[613,53399,885],{"class":618},[613,53401,44203],{"class":622},[613,53403,645],{"class":618},[613,53405,53406,53408,53410],{"class":615,"line":731},[613,53407,708],{"class":618},[613,53409,836],{"class":622},[613,53411,645],{"class":618},[590,53413,53414,53415,2076],{},"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 ",[594,53416,53236],{},[4191,53418,53420],{"id":53419},"single-occluder","Single occluder",[602,53422,53424],{"className":604,"code":53423,"language":609,"meta":552,"style":552},"\u003CHtml occlude=\"[mesh]\">\n",[594,53425,53426],{"__ignoreMap":552},[613,53427,53428,53430,53432,53434,53436,53438,53441,53443],{"class":615,"line":553},[613,53429,619],{"class":618},[613,53431,53089],{"class":622},[613,53433,53256],{"class":626},[613,53435,633],{"class":618},[613,53437,636],{"class":618},[613,53439,53440],{"class":639},"[mesh]",[613,53442,636],{"class":618},[613,53444,645],{"class":618},[2343,53446,53447],{},[53448,53449],"objects-html-single-occluder",{},[5520,53451,5522,53452,53454],{},[5524,53453,53276],{},[602,53455,53457],{"className":44201,"code":53456,"language":44203,"meta":552,"style":552},"\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",[594,53458,53459,53478,53486,53494,53538,53564,53572],{"__ignoreMap":552},[613,53460,53461,53463,53465,53467,53469,53471,53474,53476],{"class":615,"line":553},[613,53462,619],{"class":618},[613,53464,836],{"class":622},[613,53466,53290],{"class":626},[613,53468,633],{"class":618},[613,53470,636],{"class":618},[613,53472,53473],{"class":639},"[0, 1, 0]",[613,53475,636],{"class":618},[613,53477,645],{"class":618},[613,53479,53480,53482,53484],{"class":615,"line":554},[613,53481,734],{"class":618},[613,53483,847],{"class":622},[613,53485,763],{"class":618},[613,53487,53488,53490,53492],{"class":615,"line":684},[613,53489,734],{"class":618},[613,53491,857],{"class":622},[613,53493,763],{"class":618},[613,53495,53496,53498,53500,53502,53504,53507,53509,53511,53514,53516,53518,53520,53522,53524,53526,53528,53530,53532,53534,53536],{"class":615,"line":705},[613,53497,734],{"class":618},[613,53499,44203],{"class":622},[613,53501,53326],{"class":626},[613,53503,53329],{"class":626},[613,53505,53506],{"class":626}," :occlude",[613,53508,633],{"class":618},[613,53510,636],{"class":618},[613,53512,53513],{"class":639},"[sphereRef]",[613,53515,636],{"class":618},[613,53517,53334],{"class":626},[613,53519,633],{"class":618},[613,53521,636],{"class":618},[613,53523,3876],{"class":639},[613,53525,636],{"class":618},[613,53527,53356],{"class":626},[613,53529,633],{"class":618},[613,53531,636],{"class":618},[613,53533,53363],{"class":639},[613,53535,636],{"class":618},[613,53537,645],{"class":618},[613,53539,53540,53542,53544,53546,53548,53550,53552,53554,53556,53558,53560,53562],{"class":615,"line":715},[613,53541,757],{"class":618},[613,53543,53060],{"class":622},[613,53545,23830],{"class":626},[613,53547,633],{"class":618},[613,53549,636],{"class":618},[613,53551,53382],{"class":639},[613,53553,636],{"class":618},[613,53555,3720],{"class":618},[613,53557,53389],{"class":659},[613,53559,708],{"class":618},[613,53561,53060],{"class":622},[613,53563,645],{"class":618},[613,53565,53566,53568,53570],{"class":615,"line":721},[613,53567,885],{"class":618},[613,53569,44203],{"class":622},[613,53571,645],{"class":618},[613,53573,53574,53576,53578],{"class":615,"line":731},[613,53575,708],{"class":618},[613,53577,836],{"class":622},[613,53579,645],{"class":618},[4191,53581,53583],{"id":53582},"multiple-occluders","Multiple occluders",[602,53585,53587],{"className":604,"code":53586,"language":609,"meta":552,"style":552},"\u003CHtml occlude=\"[mesh1, mesh2, mesh3, ...]\" />\n",[594,53588,53589],{"__ignoreMap":552},[613,53590,53591,53593,53595,53597,53599,53601,53604,53606],{"class":615,"line":553},[613,53592,619],{"class":618},[613,53594,53089],{"class":622},[613,53596,53256],{"class":626},[613,53598,633],{"class":618},[613,53600,636],{"class":618},[613,53602,53603],{"class":639},"[mesh1, mesh2, mesh3, ...]",[613,53605,636],{"class":618},[613,53607,763],{"class":618},[590,53609,53610],{},"OR",[602,53612,53614],{"className":604,"code":53613,"language":609,"meta":552,"style":552},"\u003CHtml occlude=\"meshesArray\" />\n",[594,53615,53616],{"__ignoreMap":552},[613,53617,53618,53620,53622,53624,53626,53628,53631,53633],{"class":615,"line":553},[613,53619,619],{"class":618},[613,53621,53089],{"class":622},[613,53623,53256],{"class":626},[613,53625,633],{"class":618},[613,53627,636],{"class":618},[613,53629,53630],{"class":639},"meshesArray",[613,53632,636],{"class":618},[613,53634,763],{"class":618},[590,53636,53637,53638,53641,53642,53646,53647,53651],{},"In the demo below, a ",[594,53639,53640],{},"v-for"," loop generates multiple spheres around the cube.\nAll resulting ",[1681,53643,53644],{},[594,53645,4431],{}," instances are collected into an array and passed to the ",[1681,53648,53649],{},[594,53650,53236],{}," prop, allowing each sphere to occlude the HTML content.",[590,53653,53654,53655,53660,53661,53664,53665,3132,53668,53671],{},"This demo also uses the ",[1681,53656,53657],{},[594,53658,53659],{},"on-occlude"," event, which is triggered whenever the occlusion state changes.\nHere, the event updates a ",[1681,53662,53663],{},"reactive value"," to control element styles — for example, toggling between ",[1685,53666,53667],{},"light",[1685,53669,53670],{},"dark"," themes.",[2343,53673,53674],{},[53675,53676],"objects-html-occlude-complex-demo",{},[5520,53678,5522,53679,53681],{},[5524,53680,53276],{},[602,53682,53684],{"className":44201,"code":53683,"language":44203,"meta":552,"style":552},"\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",[594,53685,53686,53704,53712,53720,53727,53741,53755,53768,53781,53795,53799,53825,53833],{"__ignoreMap":552},[613,53687,53688,53690,53692,53694,53696,53698,53700,53702],{"class":615,"line":553},[613,53689,619],{"class":618},[613,53691,836],{"class":622},[613,53693,53290],{"class":626},[613,53695,633],{"class":618},[613,53697,636],{"class":618},[613,53699,53473],{"class":639},[613,53701,636],{"class":618},[613,53703,645],{"class":618},[613,53705,53706,53708,53710],{"class":615,"line":554},[613,53707,734],{"class":618},[613,53709,847],{"class":622},[613,53711,763],{"class":618},[613,53713,53714,53716,53718],{"class":615,"line":684},[613,53715,734],{"class":618},[613,53717,857],{"class":622},[613,53719,763],{"class":618},[613,53721,53722,53724],{"class":615,"line":705},[613,53723,734],{"class":618},[613,53725,53726],{"class":622},"html\n",[613,53728,53729,53732,53734,53736,53739],{"class":615,"line":715},[613,53730,53731],{"class":626}," v-bind",[613,53733,633],{"class":618},[613,53735,636],{"class":618},[613,53737,53738],{"class":639},"htmlProps",[613,53740,3200],{"class":618},[613,53742,53743,53746,53748,53750,53753],{"class":615,"line":721},[613,53744,53745],{"class":626}," :occlude",[613,53747,633],{"class":618},[613,53749,636],{"class":618},[613,53751,53752],{"class":639},"occluderRefs",[613,53754,3200],{"class":618},[613,53756,53757,53760,53762,53764,53766],{"class":615,"line":731},[613,53758,53759],{"class":626}," :distance-factor",[613,53761,633],{"class":618},[613,53763,636],{"class":618},[613,53765,3876],{"class":639},[613,53767,3200],{"class":618},[613,53769,53770,53773,53775,53777,53779],{"class":615,"line":754},[613,53771,53772],{"class":626}," :z-index-range",[613,53774,633],{"class":618},[613,53776,636],{"class":618},[613,53778,53363],{"class":639},[613,53780,3200],{"class":618},[613,53782,53783,53786,53788,53790,53793],{"class":615,"line":766},[613,53784,53785],{"class":626}," @on-occlude",[613,53787,633],{"class":618},[613,53789,636],{"class":618},[613,53791,53792],{"class":639},"(event: boolean) => isOccluded = event",[613,53794,3200],{"class":618},[613,53796,53797],{"class":615,"line":776},[613,53798,5368],{"class":618},[613,53800,53801,53803,53805,53807,53809,53811,53813,53815,53817,53819,53821,53823],{"class":615,"line":781},[613,53802,757],{"class":618},[613,53804,53060],{"class":622},[613,53806,23830],{"class":626},[613,53808,633],{"class":618},[613,53810,636],{"class":618},[613,53812,53382],{"class":639},[613,53814,636],{"class":618},[613,53816,3720],{"class":618},[613,53818,53389],{"class":659},[613,53820,708],{"class":618},[613,53822,53060],{"class":622},[613,53824,645],{"class":618},[613,53826,53827,53829,53831],{"class":615,"line":807},[613,53828,885],{"class":618},[613,53830,44203],{"class":622},[613,53832,645],{"class":618},[613,53834,53835,53837,53839],{"class":615,"line":607},[613,53836,708],{"class":618},[613,53838,836],{"class":622},[613,53840,645],{"class":618},[4191,53842,53844],{"id":53843},"blending-occlusion","Blending Occlusion",[590,53846,53847,53849],{},[594,53848,52756],{}," 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.",[602,53851,53853],{"className":604,"code":53852,"language":609,"meta":552,"style":552},"\u003CHtml occlude=\"blending\">\n",[594,53854,53855],{"__ignoreMap":552},[613,53856,53857,53859,53861,53863,53865,53867,53869,53871],{"class":615,"line":553},[613,53858,619],{"class":618},[613,53860,53089],{"class":622},[613,53862,53256],{"class":626},[613,53864,633],{"class":618},[613,53866,636],{"class":618},[613,53868,48661],{"class":639},[613,53870,636],{"class":618},[613,53872,645],{"class":618},[590,53874,2843,53875,3263,53878,53881,53882,1126],{},[1681,53876,53877],{},"demo below ⬇️",[1685,53879,53880],{},"(left black example)"," shows a ",[1681,53883,53884],{},"basic usage example",[2343,53886,53887],{},[53888,53889],"objects-html-occlude-blending-demo",{},[5520,53891,5522,53892,53894],{},[5524,53893,53276],{},[602,53895,53933],{"className":604,"code":53896,"highlights":53897,"language":609,"meta":552,"style":552},"\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",[554,4078,4124,4165,4174,4183,19957,19972,20262,20271,20292,20350,20407,20427,20458,20467,20476,53898,53899,20271,20292,20350,20407,20427,20458,20467,20476,53898,53899,53900,53901,53902,53903,53904,53905,53906,53907,53908,53909,53910,53911,53912,53913,53914,53915,53916,53917,53918,53919,53920,53921,53922,53923,53924,53925,53926,53927,53928,53929,53930,53931,53932],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,[594,53934,53935,53955,53982,54000,54018,54041,54045,54056,54071,54082,54093,54104,54108,54112,54129,54133,54144,54148,54163,54186,54190,54194,54208,54230,54234,54238,54252,54278,54305,54309,54313,54317,54346,54350,54372,54387,54399,54410,54422,54429,54437,54441,54449,54468,54487,54519,54527,54531,54538,54561,54580,54594,54610,54624,54647,54651,54708,54751,54759,54768,54776,54780,54787,54792,54797,54811,54839,54864,54869,54889,54901,54919,54928,54937,54942,54949,54954,54959,54972,55000,55016,55039,55044,55064,55102,55111,55120,55125,55132,55146,55151,55156,55169,55197,55213,55219,55242,55247,55301,55310,55315,55322,55327,55332,55345,55373,55396,55401,55421,55445,55466,55475,55484,55489,55496,55514,55533,55550,55577,55592,55598,55603,55608,55631,55652,55661,55670,55679,55684,55695,55705,55717,55728,55739,55752,55766,55771],{"__ignoreMap":552},[613,53936,53937,53939,53941,53943,53945,53947,53949,53951,53953],{"class":615,"line":553},[613,53938,619],{"class":618},[613,53940,623],{"class":622},[613,53942,627],{"class":626},[613,53944,630],{"class":626},[613,53946,633],{"class":618},[613,53948,636],{"class":618},[613,53950,640],{"class":639},[613,53952,636],{"class":618},[613,53954,645],{"class":618},[613,53956,53958,53960,53962,53964,53966,53968,53970,53972,53974,53976,53978,53980],{"class":53957,"line":554},[615,649],[613,53959,653],{"class":652},[613,53961,656],{"class":618},[613,53963,52800],{"class":659},[613,53965,663],{"class":618},[613,53967,8580],{"class":659},[613,53969,663],{"class":618},[613,53971,666],{"class":659},[613,53973,669],{"class":618},[613,53975,672],{"class":652},[613,53977,675],{"class":618},[613,53979,678],{"class":639},[613,53981,681],{"class":618},[613,53983,53984,53986,53988,53990,53992,53994,53996,53998],{"class":615,"line":684},[613,53985,653],{"class":652},[613,53987,656],{"class":618},[613,53989,691],{"class":659},[613,53991,669],{"class":618},[613,53993,672],{"class":652},[613,53995,675],{"class":618},[613,53997,700],{"class":639},[613,53999,681],{"class":618},[613,54001,54002,54004,54006,54008,54010,54012,54014,54016],{"class":615,"line":705},[613,54003,653],{"class":652},[613,54005,656],{"class":618},[613,54007,3567],{"class":659},[613,54009,669],{"class":618},[613,54011,672],{"class":652},[613,54013,675],{"class":618},[613,54015,609],{"class":639},[613,54017,681],{"class":618},[613,54019,54020,54022,54024,54027,54029,54031,54033,54035,54037,54039],{"class":615,"line":715},[613,54021,653],{"class":652},[613,54023,656],{"class":618},[613,54025,54026],{"class":659}," CircleGeometry",[613,54028,663],{"class":618},[613,54030,19494],{"class":659},[613,54032,669],{"class":618},[613,54034,672],{"class":652},[613,54036,675],{"class":618},[613,54038,4785],{"class":639},[613,54040,681],{"class":618},[613,54042,54043],{"class":615,"line":721},[613,54044,718],{"emptyLinePlaceholder":570},[613,54046,54047,54049,54052,54054],{"class":615,"line":731},[613,54048,2463],{"class":626},[613,54050,54051],{"class":659}," gl ",[613,54053,633],{"class":618},[613,54055,1184],{"class":618},[613,54057,54058,54061,54063,54065,54067,54069],{"class":615,"line":754},[613,54059,54060],{"class":622}," clearColor",[613,54062,1198],{"class":618},[613,54064,675],{"class":618},[613,54066,10263],{"class":639},[613,54068,2488],{"class":618},[613,54070,2536],{"class":618},[613,54072,54073,54076,54078,54080],{"class":615,"line":766},[613,54074,54075],{"class":622}," clearAlpha",[613,54077,1198],{"class":618},[613,54079,2607],{"class":799},[613,54081,2536],{"class":618},[613,54083,54084,54087,54089,54091],{"class":615,"line":776},[613,54085,54086],{"class":622}," shadows",[613,54088,1198],{"class":618},[613,54090,4537],{"class":4536},[613,54092,2536],{"class":618},[613,54094,54095,54098,54100,54102],{"class":615,"line":781},[613,54096,54097],{"class":622}," alpha",[613,54099,1198],{"class":618},[613,54101,4537],{"class":4536},[613,54103,2536],{"class":618},[613,54105,54106],{"class":615,"line":807},[613,54107,1305],{"class":618},[613,54109,54110],{"class":615,"line":607},[613,54111,718],{"emptyLinePlaceholder":570},[613,54113,54114,54116,54119,54121,54123,54125,54127],{"class":615,"line":830},[613,54115,2463],{"class":626},[613,54117,54118],{"class":659}," targetDirectionLightRef ",[613,54120,633],{"class":618},[613,54122,3567],{"class":2482},[613,54124,2485],{"class":659},[613,54126,3725],{"class":618},[613,54128,2496],{"class":659},[613,54130,54131],{"class":615,"line":841},[613,54132,718],{"emptyLinePlaceholder":570},[613,54134,54135,54137,54140,54142],{"class":615,"line":852},[613,54136,2463],{"class":626},[613,54138,54139],{"class":659}," geometries ",[613,54141,633],{"class":618},[613,54143,19198],{"class":659},[613,54145,54146],{"class":615,"line":862},[613,54147,2519],{"class":618},[613,54149,54150,54153,54155,54157,54159,54161],{"class":615,"line":608},[613,54151,54152],{"class":622}," component",[613,54154,1198],{"class":618},[613,54156,675],{"class":618},[613,54158,847],{"class":639},[613,54160,2488],{"class":618},[613,54162,2536],{"class":618},[613,54164,54165,54168,54170,54172,54174,54176,54178,54180,54182,54184],{"class":615,"line":882},[613,54166,54167],{"class":622}," args",[613,54169,1198],{"class":618},[613,54171,2546],{"class":659},[613,54173,1901],{"class":799},[613,54175,663],{"class":618},[613,54177,2607],{"class":799},[613,54179,663],{"class":618},[613,54181,2607],{"class":799},[613,54183,1489],{"class":659},[613,54185,2536],{"class":618},[613,54187,54188],{"class":615,"line":892},[613,54189,2643],{"class":618},[613,54191,54192],{"class":615,"line":2671},[613,54193,2519],{"class":618},[613,54195,54196,54198,54200,54202,54204,54206],{"class":615,"line":2680},[613,54197,54152],{"class":622},[613,54199,1198],{"class":618},[613,54201,675],{"class":618},[613,54203,4083],{"class":639},[613,54205,2488],{"class":618},[613,54207,2536],{"class":618},[613,54209,54210,54212,54214,54216,54218,54220,54222,54224,54226,54228],{"class":615,"line":2714},[613,54211,54167],{"class":622},[613,54213,1198],{"class":618},[613,54215,2546],{"class":659},[613,54217,4096],{"class":799},[613,54219,663],{"class":618},[613,54221,28874],{"class":799},[613,54223,663],{"class":618},[613,54225,28874],{"class":799},[613,54227,1489],{"class":659},[613,54229,2536],{"class":618},[613,54231,54232],{"class":615,"line":2723},[613,54233,2643],{"class":618},[613,54235,54236],{"class":615,"line":2732},[613,54237,2519],{"class":618},[613,54239,54240,54242,54244,54246,54248,54250],{"class":615,"line":2741},[613,54241,54152],{"class":622},[613,54243,1198],{"class":618},[613,54245,675],{"class":618},[613,54247,10350],{"class":639},[613,54249,2488],{"class":618},[613,54251,2536],{"class":618},[613,54253,54254,54256,54258,54260,54262,54264,54266,54268,54270,54272,54274,54276],{"class":615,"line":2763},[613,54255,54167],{"class":622},[613,54257,1198],{"class":618},[613,54259,2546],{"class":659},[613,54261,1521],{"class":799},[613,54263,663],{"class":618},[613,54265,33805],{"class":799},[613,54267,663],{"class":618},[613,54269,33684],{"class":799},[613,54271,663],{"class":618},[613,54273,7988],{"class":799},[613,54275,1489],{"class":659},[613,54277,2536],{"class":618},[613,54279,54280,54283,54285,54287,54290,54292,54294,54296,54299,54301,54303],{"class":615,"line":2814},[613,54281,54282],{"class":622}," bind",[613,54284,1198],{"class":618},[613,54286,656],{"class":618},[613,54288,54289],{"class":622}," castShadow",[613,54291,1198],{"class":618},[613,54293,4537],{"class":4536},[613,54295,663],{"class":618},[613,54297,54298],{"class":622}," receiveShadow",[613,54300,1198],{"class":618},[613,54302,4537],{"class":4536},[613,54304,7300],{"class":618},[613,54306,54307],{"class":615,"line":2823},[613,54308,2643],{"class":618},[613,54310,54311],{"class":615,"line":2832},[613,54312,19234],{"class":659},[613,54314,54315],{"class":615,"line":4034},[613,54316,718],{"emptyLinePlaceholder":570},[613,54318,54320,54322,54325,54327,54329,54331,54333,54335,54337,54340,54342,54344],{"class":54319,"line":4078},[615,649],[613,54321,2463],{"class":626},[613,54323,54324],{"class":659}," customGeometry ",[613,54326,633],{"class":618},[613,54328,3567],{"class":2482},[613,54330,2485],{"class":659},[613,54332,34065],{"class":618},[613,54334,54026],{"class":2482},[613,54336,2485],{"class":659},[613,54338,54339],{"class":799},"1.25",[613,54341,663],{"class":618},[613,54343,28874],{"class":799},[613,54345,7400],{"class":659},[613,54347,54348],{"class":615,"line":4105},[613,54349,718],{"emptyLinePlaceholder":570},[613,54351,54353,54355,54358,54360,54362,54364,54366,54368,54370],{"class":54352,"line":4124},[615,649],[613,54354,2463],{"class":626},[613,54356,54357],{"class":659}," customMaterial ",[613,54359,633],{"class":618},[613,54361,3567],{"class":2482},[613,54363,2485],{"class":659},[613,54365,34065],{"class":618},[613,54367,19494],{"class":2482},[613,54369,2485],{"class":659},[613,54371,3329],{"class":618},[613,54373,54375,54377,54379,54381,54383,54385],{"class":54374,"line":4165},[615,649],[613,54376,5686],{"class":622},[613,54378,1198],{"class":618},[613,54380,675],{"class":618},[613,54382,34927],{"class":639},[613,54384,2488],{"class":618},[613,54386,2536],{"class":618},[613,54388,54390,54393,54395,54397],{"class":54389,"line":4174},[615,649],[613,54391,54392],{"class":622}," side",[613,54394,1198],{"class":618},[613,54396,29726],{"class":799},[613,54398,2536],{"class":618},[613,54400,54402,54404,54406,54408],{"class":54401,"line":4183},[615,649],[613,54403,5698],{"class":622},[613,54405,1198],{"class":618},[613,54407,2607],{"class":799},[613,54409,2536],{"class":618},[613,54411,54413,54416,54418,54420],{"class":54412,"line":19957},[615,649],[613,54414,54415],{"class":622}," transparent",[613,54417,1198],{"class":618},[613,54419,4537],{"class":4536},[613,54421,2536],{"class":618},[613,54423,54425,54427],{"class":54424,"line":19972},[615,649],[613,54426,2476],{"class":618},[613,54428,7400],{"class":659},[613,54430,54431,54433,54435],{"class":615,"line":19987},[613,54432,708],{"class":618},[613,54434,623],{"class":622},[613,54436,645],{"class":618},[613,54438,54439],{"class":615,"line":19992},[613,54440,718],{"emptyLinePlaceholder":570},[613,54442,54443,54445,54447],{"class":615,"line":19999},[613,54444,619],{"class":618},[613,54446,726],{"class":622},[613,54448,645],{"class":618},[613,54450,54451,54453,54455,54457,54459,54461,54464,54466],{"class":615,"line":20004},[613,54452,734],{"class":618},[613,54454,4259],{"class":622},[613,54456,23830],{"class":626},[613,54458,633],{"class":618},[613,54460,636],{"class":618},[613,54462,54463],{"class":639},"html-demo-wrapper aspect-video",[613,54465,636],{"class":618},[613,54467,645],{"class":618},[613,54469,54470,54472,54474,54476,54478,54480,54483,54485],{"class":615,"line":20010},[613,54471,757],{"class":618},[613,54473,737],{"class":622},[613,54475,9347],{"class":626},[613,54477,633],{"class":618},[613,54479,636],{"class":618},[613,54481,54482],{"class":659},"gl",[613,54484,636],{"class":618},[613,54486,645],{"class":618},[613,54488,54489,54491,54493,54495,54497,54499,54501,54503,54505,54507,54509,54511,54513,54515,54517],{"class":615,"line":20031},[613,54490,833],{"class":618},[613,54492,760],{"class":622},[613,54494,789],{"class":618},[613,54496,1467],{"class":626},[613,54498,633],{"class":618},[613,54500,636],{"class":618},[613,54502,1474],{"class":618},[613,54504,945],{"class":799},[613,54506,1479],{"class":618},[613,54508,15083],{"class":799},[613,54510,1479],{"class":618},[613,54512,9909],{"class":799},[613,54514,1489],{"class":618},[613,54516,636],{"class":618},[613,54518,763],{"class":618},[613,54520,54521,54523,54525],{"class":615,"line":20037},[613,54522,833],{"class":618},[613,54524,771],{"class":622},[613,54526,763],{"class":618},[613,54528,54529],{"class":615,"line":20044},[613,54530,718],{"emptyLinePlaceholder":570},[613,54532,54533,54535],{"class":615,"line":20049},[613,54534,833],{"class":618},[613,54536,54537],{"class":622},"Levioso\n",[613,54539,54540,54542,54544,54546,54548,54550,54552,54554,54556,54559],{"class":615,"line":20070},[613,54541,8216],{"class":652},[613,54543,633],{"class":618},[613,54545,636],{"class":618},[613,54547,2485],{"class":618},[613,54549,5325],{"class":659},[613,54551,1479],{"class":618},[613,54553,8230],{"class":659},[613,54555,8233],{"class":618},[613,54557,54558],{"class":659},"geometries",[613,54560,3200],{"class":618},[613,54562,54563,54565,54567,54569,54571,54574,54576,54578],{"class":615,"line":20083},[613,54564,8243],{"class":618},[613,54566,8246],{"class":626},[613,54568,633],{"class":618},[613,54570,20898],{"class":618},[613,54572,54573],{"class":639},"html-occlude-blending-demo-",[613,54575,20904],{"class":618},[613,54577,8230],{"class":659},[613,54579,20909],{"class":618},[613,54581,54582,54584,54586,54588,54590,54592],{"class":615,"line":20109},[613,54583,8243],{"class":618},[613,54585,8724],{"class":626},[613,54587,633],{"class":618},[613,54589,636],{"class":618},[613,54591,2705],{"class":799},[613,54593,3200],{"class":618},[613,54595,54596,54598,54601,54603,54605,54608],{"class":615,"line":20114},[613,54597,8243],{"class":618},[613,54599,54600],{"class":626},"float-factor",[613,54602,633],{"class":618},[613,54604,636],{"class":618},[613,54606,54607],{"class":799},"3.5",[613,54609,3200],{"class":618},[613,54611,54612,54614,54616,54618,54620,54622],{"class":615,"line":20121},[613,54613,8243],{"class":618},[613,54615,38929],{"class":626},[613,54617,633],{"class":618},[613,54619,636],{"class":618},[613,54621,1901],{"class":799},[613,54623,3200],{"class":618},[613,54625,54626,54628,54630,54632,54634,54636,54639,54641,54643,54645],{"class":615,"line":20130},[613,54627,8243],{"class":618},[613,54629,8930],{"class":626},[613,54631,633],{"class":618},[613,54633,636],{"class":618},[613,54635,3923],{"class":618},[613,54637,54638],{"class":799},"0.35",[613,54640,1479],{"class":618},[613,54642,54638],{"class":799},[613,54644,1489],{"class":618},[613,54646,3200],{"class":618},[613,54648,54649],{"class":615,"line":20135},[613,54650,53053],{"class":618},[613,54652,54653,54655,54657,54659,54661,54663,54665,54667,54669,54672,54674,54677,54679,54681,54683,54685,54687,54689,54691,54693,54695,54697,54699,54701,54704,54706],{"class":615,"line":20144},[613,54654,844],{"class":618},[613,54656,836],{"class":622},[613,54658,789],{"class":618},[613,54660,1467],{"class":626},[613,54662,633],{"class":618},[613,54664,636],{"class":618},[613,54666,1474],{"class":618},[613,54668,8230],{"class":659},[613,54670,54671],{"class":618}," * ",[613,54673,54607],{"class":799},[613,54675,54676],{"class":618}," - ",[613,54678,54607],{"class":799},[613,54680,1479],{"class":618},[613,54682,1901],{"class":799},[613,54684,1479],{"class":618},[613,54686,945],{"class":799},[613,54688,1489],{"class":618},[613,54690,636],{"class":618},[613,54692,9347],{"class":626},[613,54694,633],{"class":618},[613,54696,636],{"class":618},[613,54698,5325],{"class":659},[613,54700,1126],{"class":618},[613,54702,54703],{"class":659},"bind",[613,54705,636],{"class":618},[613,54707,645],{"class":618},[613,54709,54710,54713,54716,54718,54721,54723,54725,54727,54729,54731,54733,54735,54737,54739,54741,54743,54745,54747,54749],{"class":615,"line":20163},[613,54711,54712],{"class":618}," \u003C",[613,54714,54715],{"class":622},"component",[613,54717,789],{"class":618},[613,54719,54720],{"class":626},"is",[613,54722,633],{"class":618},[613,54724,636],{"class":618},[613,54726,5325],{"class":659},[613,54728,1126],{"class":618},[613,54730,54715],{"class":659},[613,54732,636],{"class":618},[613,54734,789],{"class":618},[613,54736,1997],{"class":626},[613,54738,633],{"class":618},[613,54740,636],{"class":618},[613,54742,5325],{"class":659},[613,54744,1126],{"class":618},[613,54746,1997],{"class":659},[613,54748,636],{"class":618},[613,54750,763],{"class":618},[613,54752,54753,54755,54757],{"class":615,"line":20173},[613,54754,54712],{"class":618},[613,54756,857],{"class":622},[613,54758,763],{"class":618},[613,54760,54761,54764,54766],{"class":615,"line":20210},[613,54762,54763],{"class":618}," \u003C/",[613,54765,836],{"class":622},[613,54767,645],{"class":618},[613,54769,54770,54772,54774],{"class":615,"line":20219},[613,54771,865],{"class":618},[613,54773,8719],{"class":622},[613,54775,645],{"class":618},[613,54777,54778],{"class":615,"line":20253},[613,54779,718],{"emptyLinePlaceholder":570},[613,54781,54783,54785],{"class":54782,"line":20262},[615,649],[613,54784,833],{"class":618},[613,54786,52966],{"class":622},[613,54788,54790],{"class":54789,"line":20271},[615,649],[613,54791,52972],{"class":626},[613,54793,54795],{"class":54794,"line":20292},[615,649],[613,54796,52978],{"class":626},[613,54798,54800,54803,54805,54807,54809],{"class":54799,"line":20350},[615,649],[613,54801,54802],{"class":626}," occlude",[613,54804,633],{"class":618},[613,54806,636],{"class":618},[613,54808,48661],{"class":639},[613,54810,3200],{"class":618},[613,54812,54814,54816,54818,54820,54822,54824,54826,54828,54831,54833,54835,54837],{"class":54813,"line":20407},[615,649],[613,54815,8243],{"class":618},[613,54817,1467],{"class":626},[613,54819,633],{"class":618},[613,54821,636],{"class":618},[613,54823,3923],{"class":618},[613,54825,3876],{"class":799},[613,54827,1479],{"class":618},[613,54829,54830],{"class":799},".75",[613,54832,8838],{"class":618},[613,54834,800],{"class":799},[613,54836,1489],{"class":618},[613,54838,3200],{"class":618},[613,54840,54842,54844,54847,54849,54851,54853,54856,54858,54860,54862],{"class":54841,"line":20427},[615,649],[613,54843,8243],{"class":618},[613,54845,54846],{"class":626},"z-index-range",[613,54848,633],{"class":618},[613,54850,636],{"class":618},[613,54852,1474],{"class":618},[613,54854,54855],{"class":799},"28",[613,54857,1479],{"class":618},[613,54859,945],{"class":799},[613,54861,1489],{"class":618},[613,54863,3200],{"class":618},[613,54865,54867],{"class":54866,"line":20458},[615,649],[613,54868,53053],{"class":618},[613,54870,54872,54874,54876,54878,54880,54882,54885,54887],{"class":54871,"line":20467},[615,649],[613,54873,844],{"class":618},[613,54875,4259],{"class":622},[613,54877,23830],{"class":626},[613,54879,633],{"class":618},[613,54881,636],{"class":618},[613,54883,54884],{"class":639},"text-center text-s p-2 bg-[#1B1C1E] text-light",[613,54886,636],{"class":618},[613,54888,645],{"class":618},[613,54890,54892,54895,54897,54899],{"class":54891,"line":20476},[615,649],[613,54893,54894],{"class":659}," BASIC 💛 ",[613,54896,619],{"class":618},[613,54898,7780],{"class":622},[613,54900,763],{"class":618},[613,54902,54904,54906,54908,54910,54913,54915,54917],{"class":54903,"line":53898},[615,649],[613,54905,54712],{"class":618},[613,54907,1685],{"class":622},[613,54909,3720],{"class":618},[613,54911,54912],{"class":659},"occlude=blending",[613,54914,708],{"class":618},[613,54916,1685],{"class":622},[613,54918,645],{"class":618},[613,54920,54922,54924,54926],{"class":54921,"line":53899},[615,649],[613,54923,54763],{"class":618},[613,54925,4259],{"class":622},[613,54927,645],{"class":618},[613,54929,54931,54933,54935],{"class":615,"line":54930},73,[613,54932,865],{"class":618},[613,54934,53089],{"class":622},[613,54936,645],{"class":618},[613,54938,54940],{"class":54939,"line":53900},[615,649],[613,54941,718],{"emptyLinePlaceholder":570},[613,54943,54945,54947],{"class":54944,"line":53901},[615,649],[613,54946,833],{"class":618},[613,54948,52966],{"class":622},[613,54950,54952],{"class":54951,"line":53902},[615,649],[613,54953,52972],{"class":626},[613,54955,54957],{"class":54956,"line":53903},[615,649],[613,54958,52978],{"class":626},[613,54960,54962,54964,54966,54968,54970],{"class":54961,"line":53904},[615,649],[613,54963,54802],{"class":626},[613,54965,633],{"class":618},[613,54967,636],{"class":618},[613,54969,48661],{"class":639},[613,54971,3200],{"class":618},[613,54973,54975,54977,54979,54981,54983,54985,54987,54989,54992,54994,54996,54998],{"class":54974,"line":53905},[615,649],[613,54976,8243],{"class":618},[613,54978,1467],{"class":626},[613,54980,633],{"class":618},[613,54982,636],{"class":618},[613,54984,1474],{"class":618},[613,54986,945],{"class":799},[613,54988,1479],{"class":618},[613,54990,54991],{"class":799},".85",[613,54993,8838],{"class":618},[613,54995,800],{"class":799},[613,54997,1489],{"class":618},[613,54999,3200],{"class":618},[613,55001,55003,55005,55007,55009,55011,55014],{"class":55002,"line":53906},[615,649],[613,55004,8243],{"class":618},[613,55006,5325],{"class":626},[613,55008,633],{"class":618},[613,55010,636],{"class":618},[613,55012,55013],{"class":659},"customGeometry",[613,55015,3200],{"class":618},[613,55017,55019,55021,55023,55025,55027,55029,55031,55033,55035,55037],{"class":55018,"line":53907},[615,649],[613,55020,8243],{"class":618},[613,55022,54846],{"class":626},[613,55024,633],{"class":618},[613,55026,636],{"class":618},[613,55028,1474],{"class":618},[613,55030,54855],{"class":799},[613,55032,1479],{"class":618},[613,55034,945],{"class":799},[613,55036,1489],{"class":618},[613,55038,3200],{"class":618},[613,55040,55042],{"class":55041,"line":53908},[615,649],[613,55043,53053],{"class":618},[613,55045,55047,55049,55051,55053,55055,55057,55060,55062],{"class":55046,"line":53909},[615,649],[613,55048,844],{"class":618},[613,55050,4259],{"class":622},[613,55052,23830],{"class":626},[613,55054,633],{"class":618},[613,55056,636],{"class":618},[613,55058,55059],{"class":639},"text-xs p-8 text-center bg-[#F6B03B] text-dark",[613,55061,636],{"class":618},[613,55063,645],{"class":618},[613,55065,55067,55070,55072,55074,55077,55080,55082,55084,55087,55089,55091,55093,55096,55098,55100],{"class":55066,"line":53910},[615,649],[613,55068,55069],{"class":659}," CUSTOM ",[613,55071,619],{"class":618},[613,55073,7780],{"class":622},[613,55075,55076],{"class":618}," />",[613,55078,55079],{"class":618}," \u003C",[613,55081,1681],{"class":622},[613,55083,3720],{"class":618},[613,55085,55086],{"class":659},"CIRCLE ",[613,55088,619],{"class":618},[613,55090,7780],{"class":622},[613,55092,55076],{"class":618},[613,55094,55095],{"class":659}," GEOMETRY",[613,55097,708],{"class":618},[613,55099,1681],{"class":622},[613,55101,645],{"class":618},[613,55103,55105,55107,55109],{"class":615,"line":55104},85,[613,55106,54763],{"class":618},[613,55108,4259],{"class":622},[613,55110,645],{"class":618},[613,55112,55114,55116,55118],{"class":55113,"line":53911},[615,649],[613,55115,865],{"class":618},[613,55117,53089],{"class":622},[613,55119,645],{"class":618},[613,55121,55123],{"class":55122,"line":53912},[615,649],[613,55124,718],{"emptyLinePlaceholder":570},[613,55126,55128,55130],{"class":55127,"line":53913},[615,649],[613,55129,833],{"class":618},[613,55131,52966],{"class":622},[613,55133,55135,55137,55139,55141,55144],{"class":55134,"line":53914},[615,649],[613,55136,24967],{"class":626},[613,55138,633],{"class":618},[613,55140,636],{"class":618},[613,55142,55143],{"class":639},"targetDirectionLightRef",[613,55145,3200],{"class":618},[613,55147,55149],{"class":55148,"line":53915},[615,649],[613,55150,52972],{"class":626},[613,55152,55154],{"class":55153,"line":53916},[615,649],[613,55155,52978],{"class":626},[613,55157,55159,55161,55163,55165,55167],{"class":55158,"line":53917},[615,649],[613,55160,54802],{"class":626},[613,55162,633],{"class":618},[613,55164,636],{"class":618},[613,55166,48661],{"class":639},[613,55168,3200],{"class":618},[613,55170,55172,55174,55176,55178,55180,55182,55184,55186,55189,55191,55193,55195],{"class":55171,"line":53918},[615,649],[613,55173,8243],{"class":618},[613,55175,1467],{"class":626},[613,55177,633],{"class":618},[613,55179,636],{"class":618},[613,55181,1474],{"class":618},[613,55183,3876],{"class":799},[613,55185,1479],{"class":618},[613,55187,55188],{"class":799},".5",[613,55190,8838],{"class":618},[613,55192,800],{"class":799},[613,55194,1489],{"class":618},[613,55196,3200],{"class":618},[613,55198,55200,55202,55204,55206,55208,55211],{"class":55199,"line":53919},[615,649],[613,55201,8243],{"class":618},[613,55203,5393],{"class":626},[613,55205,633],{"class":618},[613,55207,636],{"class":618},[613,55209,55210],{"class":659},"customMaterial",[613,55212,3200],{"class":618},[613,55214,55216],{"class":55215,"line":53920},[615,649],[613,55217,55218],{"class":626}," receive-shadow\n",[613,55220,55222,55224,55226,55228,55230,55232,55234,55236,55238,55240],{"class":55221,"line":53921},[615,649],[613,55223,8243],{"class":618},[613,55225,54846],{"class":626},[613,55227,633],{"class":618},[613,55229,636],{"class":618},[613,55231,1474],{"class":618},[613,55233,54855],{"class":799},[613,55235,1479],{"class":618},[613,55237,945],{"class":799},[613,55239,1489],{"class":618},[613,55241,3200],{"class":618},[613,55243,55245],{"class":615,"line":55244},97,[613,55246,53053],{"class":618},[613,55248,55250,55252,55254,55256,55258,55260,55262,55264,55267,55270,55272,55274,55277,55279,55282,55284,55287,55289,55291,55293,55295,55297,55299],{"class":55249,"line":53922},[615,649],[613,55251,844],{"class":618},[613,55253,4259],{"class":622},[613,55255,4262],{"class":626},[613,55257,633],{"class":618},[613,55259,636],{"class":618},[613,55261,39139],{"class":4269},[613,55263,12619],{"class":618},[613,55265,55266],{"class":799},"100px",[613,55268,55269],{"class":618},"; ",[613,55271,39153],{"class":4269},[613,55273,12619],{"class":618},[613,55275,55276],{"class":659},"auto",[613,55278,55269],{"class":618},[613,55280,55281],{"class":4269},"aspect-ratio",[613,55283,12619],{"class":618},[613,55285,55286],{"class":799},"250",[613,55288,48821],{"class":618},[613,55290,55286],{"class":799},[613,55292,4277],{"class":618},[613,55294,636],{"class":618},[613,55296,23879],{"class":618},[613,55298,4259],{"class":622},[613,55300,645],{"class":618},[613,55302,55304,55306,55308],{"class":55303,"line":53923},[615,649],[613,55305,865],{"class":618},[613,55307,53089],{"class":622},[613,55309,645],{"class":618},[613,55311,55313],{"class":55312,"line":53924},[615,649],[613,55314,718],{"emptyLinePlaceholder":570},[613,55316,55318,55320],{"class":55317,"line":53925},[615,649],[613,55319,833],{"class":618},[613,55321,52966],{"class":622},[613,55323,55325],{"class":55324,"line":53926},[615,649],[613,55326,52972],{"class":626},[613,55328,55330],{"class":55329,"line":53927},[615,649],[613,55331,52978],{"class":626},[613,55333,55335,55337,55339,55341,55343],{"class":55334,"line":53928},[615,649],[613,55336,54802],{"class":626},[613,55338,633],{"class":618},[613,55340,636],{"class":618},[613,55342,48661],{"class":639},[613,55344,3200],{"class":618},[613,55346,55348,55350,55352,55354,55356,55358,55360,55362,55365,55367,55369,55371],{"class":55347,"line":53929},[615,649],[613,55349,8243],{"class":618},[613,55351,1467],{"class":626},[613,55353,633],{"class":618},[613,55355,636],{"class":618},[613,55357,1474],{"class":618},[613,55359,3876],{"class":799},[613,55361,1479],{"class":618},[613,55363,55364],{"class":799},"2.5",[613,55366,8838],{"class":618},[613,55368,800],{"class":799},[613,55370,1489],{"class":618},[613,55372,3200],{"class":618},[613,55374,55376,55378,55380,55382,55384,55386,55388,55390,55392,55394],{"class":55375,"line":53930},[615,649],[613,55377,8243],{"class":618},[613,55379,54846],{"class":626},[613,55381,633],{"class":618},[613,55383,636],{"class":618},[613,55385,1474],{"class":618},[613,55387,54855],{"class":799},[613,55389,1479],{"class":618},[613,55391,945],{"class":799},[613,55393,1489],{"class":618},[613,55395,3200],{"class":618},[613,55397,55399],{"class":55398,"line":53931},[615,649],[613,55400,53053],{"class":618},[613,55402,55404,55406,55408,55410,55412,55414,55417,55419],{"class":55403,"line":53932},[615,649],[613,55405,844],{"class":618},[613,55407,4259],{"class":622},[613,55409,23830],{"class":626},[613,55411,633],{"class":618},[613,55413,636],{"class":618},[613,55415,55416],{"class":639},"text-center text-xs p-2 text-dark bg-[#FF0000]",[613,55418,636],{"class":618},[613,55420,645],{"class":618},[613,55422,55424,55426,55428,55430,55433,55435,55437,55439,55441,55443],{"class":615,"line":55423},109,[613,55425,54712],{"class":618},[613,55427,1681],{"class":622},[613,55429,3720],{"class":618},[613,55431,55432],{"class":659},"HTML + Custom material ",[613,55434,708],{"class":618},[613,55436,1681],{"class":622},[613,55438,3720],{"class":618},[613,55440,55079],{"class":618},[613,55442,7780],{"class":622},[613,55444,763],{"class":618},[613,55446,55448,55450,55452,55454,55457,55459,55461,55463],{"class":615,"line":55447},110,[613,55449,54712],{"class":618},[613,55451,1685],{"class":622},[613,55453,3720],{"class":618},[613,55455,55456],{"class":659},"+ receive-shadow ",[613,55458,708],{"class":618},[613,55460,1685],{"class":622},[613,55462,3720],{"class":618},[613,55464,55465],{"class":659}," ⬇️\n",[613,55467,55469,55471,55473],{"class":615,"line":55468},111,[613,55470,54763],{"class":618},[613,55472,4259],{"class":622},[613,55474,645],{"class":618},[613,55476,55478,55480,55482],{"class":615,"line":55477},112,[613,55479,865],{"class":618},[613,55481,53089],{"class":622},[613,55483,645],{"class":618},[613,55485,55487],{"class":615,"line":55486},113,[613,55488,718],{"emptyLinePlaceholder":570},[613,55490,55492,55494],{"class":615,"line":55491},114,[613,55493,833],{"class":618},[613,55495,15969],{"class":622},[613,55497,55499,55502,55504,55506,55508,55510,55512],{"class":615,"line":55498},115,[613,55500,55501],{"class":652}," v-if",[613,55503,633],{"class":618},[613,55505,636],{"class":618},[613,55507,55143],{"class":659},[613,55509,3757],{"class":618},[613,55511,25702],{"class":659},[613,55513,3200],{"class":618},[613,55515,55517,55519,55521,55523,55525,55527,55529,55531],{"class":615,"line":55516},116,[613,55518,8243],{"class":618},[613,55520,14079],{"class":626},[613,55522,633],{"class":618},[613,55524,636],{"class":618},[613,55526,55143],{"class":659},[613,55528,3757],{"class":618},[613,55530,25702],{"class":659},[613,55532,3200],{"class":618},[613,55534,55536,55538,55541,55543,55545,55548],{"class":615,"line":55535},117,[613,55537,8243],{"class":618},[613,55539,55540],{"class":626},"shadow-normalBias",[613,55542,633],{"class":618},[613,55544,636],{"class":618},[613,55546,55547],{"class":799},"0.075",[613,55549,3200],{"class":618},[613,55551,55553,55555,55557,55559,55561,55563,55565,55567,55569,55571,55573,55575],{"class":615,"line":55552},118,[613,55554,8243],{"class":618},[613,55556,1467],{"class":626},[613,55558,633],{"class":618},[613,55560,636],{"class":618},[613,55562,1474],{"class":618},[613,55564,7668],{"class":799},[613,55566,1479],{"class":618},[613,55568,945],{"class":799},[613,55570,1479],{"class":618},[613,55572,7668],{"class":799},[613,55574,1489],{"class":618},[613,55576,3200],{"class":618},[613,55578,55580,55582,55584,55586,55588,55590],{"class":615,"line":55579},119,[613,55581,8243],{"class":618},[613,55583,1894],{"class":626},[613,55585,633],{"class":618},[613,55587,636],{"class":618},[613,55589,800],{"class":799},[613,55591,3200],{"class":618},[613,55593,55595],{"class":615,"line":55594},120,[613,55596,55597],{"class":626}," cast-shadow\n",[613,55599,55601],{"class":615,"line":55600},121,[613,55602,8297],{"class":618},[613,55604,55606],{"class":615,"line":55605},122,[613,55607,718],{"emptyLinePlaceholder":570},[613,55609,55611,55613,55615,55617,55619,55621,55623,55625,55627,55629],{"class":615,"line":55610},123,[613,55612,833],{"class":618},[613,55614,8313],{"class":622},[613,55616,789],{"class":618},[613,55618,1976],{"class":626},[613,55620,633],{"class":618},[613,55622,636],{"class":618},[613,55624,9324],{"class":618},[613,55626,1901],{"class":799},[613,55628,636],{"class":618},[613,55630,763],{"class":618},[613,55632,55634,55636,55638,55640,55642,55644,55646,55648,55650],{"class":615,"line":55633},124,[613,55635,833],{"class":618},[613,55637,8758],{"class":622},[613,55639,789],{"class":618},[613,55641,1894],{"class":626},[613,55643,633],{"class":618},[613,55645,636],{"class":618},[613,55647,1901],{"class":799},[613,55649,636],{"class":618},[613,55651,763],{"class":618},[613,55653,55655,55657,55659],{"class":615,"line":55654},125,[613,55656,875],{"class":618},[613,55658,737],{"class":622},[613,55660,645],{"class":618},[613,55662,55664,55666,55668],{"class":615,"line":55663},126,[613,55665,885],{"class":618},[613,55667,4259],{"class":622},[613,55669,645],{"class":618},[613,55671,55673,55675,55677],{"class":615,"line":55672},127,[613,55674,708],{"class":618},[613,55676,726],{"class":622},[613,55678,645],{"class":618},[613,55680,55682],{"class":615,"line":55681},128,[613,55683,718],{"emptyLinePlaceholder":570},[613,55685,55687,55689,55691,55693],{"class":615,"line":55686},129,[613,55688,619],{"class":618},[613,55690,1307],{"class":622},[613,55692,53140],{"class":626},[613,55694,645],{"class":618},[613,55696,55698,55700,55703],{"class":615,"line":55697},130,[613,55699,1126],{"class":618},[613,55701,55702],{"class":1180},"html-demo-wrapper",[613,55704,1184],{"class":618},[613,55706,55708,55710,55712,55715],{"class":615,"line":55707},131,[613,55709,1220],{"class":4269},[613,55711,1198],{"class":618},[613,55713,55714],{"class":799}," 100%",[613,55716,8570],{"class":618},[613,55718,55720,55722,55724,55726],{"class":615,"line":55719},132,[613,55721,1230],{"class":4269},[613,55723,1198],{"class":618},[613,55725,55714],{"class":799},[613,55727,8570],{"class":618},[613,55729,55731,55733,55735,55737],{"class":615,"line":55730},133,[613,55732,5558],{"class":4269},[613,55734,1198],{"class":618},[613,55736,4274],{"class":659},[613,55738,8570],{"class":618},[613,55740,55742,55745,55747,55750],{"class":615,"line":55741},134,[613,55743,55744],{"class":4269}," overflow",[613,55746,1198],{"class":618},[613,55748,55749],{"class":659}," hidden",[613,55751,8570],{"class":618},[613,55753,55755,55757,55759,55761,55764],{"class":615,"line":55754},135,[613,55756,53155],{"class":4269},[613,55758,1198],{"class":618},[613,55760,53160],{"class":618},[613,55762,55763],{"class":659},"82dbc5",[613,55765,8570],{"class":618},[613,55767,55769],{"class":615,"line":55768},136,[613,55770,1305],{"class":618},[613,55772,55774,55776,55778],{"class":615,"line":55773},137,[613,55775,708],{"class":618},[613,55777,1307],{"class":622},[613,55779,645],{"class":618},[480,55781,44540],{"id":44539},[590,55783,55784,55785,55788,55789,55792,55793,55795,55796,55799,55800,55804],{},"By default, when using ",[594,55786,55787],{},"occlude=\"blending\"",", occlusion works correctly only with ",[1681,55790,55791],{},"rectangular HTML elements"," (using a ",[594,55794,31637],{},").\nFor ",[1685,55797,55798],{},"non-rectangular content",", you can use the ",[1681,55801,55802],{},[594,55803,5325],{}," prop to provide a matching custom geometry.",[590,55806,55807,55808,3263,55811,55814,55815,55821,55822,1126],{},"In the ",[1681,55809,55810],{},"demo above ⬆️",[1685,55812,55813],{},"(middle yellow example)",", a ",[1120,55816,55819],{"href":55817,"rel":55818},"https://threejs.org/docs/#api/en/geometries/CircleGeometry",[1124],[594,55820,28832],{}," is used as a ",[1681,55823,55824],{},"custom geometry",[55826,55827,55828],"prose-list",{},[2261,55829,55830,55839],{},[2264,55831,2843,55832,55834,55835,55838],{},[594,55833,5325],{}," prop only defines the ",[1681,55836,55837],{},"occlusion shape"," in 3D and does not modify your HTML content.",[2264,55840,55841,55842,55849,55850,55853,55854,55857,55858,55865],{},"You can provide any ",[1120,55843,55846],{"href":55844,"rel":55845},"https://threejs.org/docs/#api/en/core/BufferGeometry",[1124],[594,55847,55848],{},"BufferGeometry",", for example to simulate ",[1681,55851,55852],{},"CSS-like styles"," such as ",[594,55855,55856],{},"border-radius"," using a rounded rectangle or squircle geometry (see ",[1120,55859,55862],{"href":55860,"rel":55861},"https://discourse.threejs.org/t/roundedrectangle-squircle/28645",[1124],[594,55863,55864],{},"RoundedRectangle / Squircle geometry"," for example).",[6801,55867,55868],{"id":3057},"Custom Material",[590,55870,55871,55872,55874,55875,3263,55877,55814,55880,55883],{},"You can also assign material properties to the HTML content using the ",[594,55873,5393],{}," prop.\nIn the ",[1681,55876,55810],{},[1685,55878,55879],{},"(right red example)",[1681,55881,55882],{},"custom material"," is used with shadow.",[2054,55885,55886],{},[590,55887,2843,55888,55890,55891,6093,55893,1126],{},[594,55889,5393],{}," prop is only available when ",[594,55892,55787],{},[1681,55894,15365],{},[2054,55896,55897],{},[590,55898,55899,55900,3132,55904,55908,55909,55912,55913,55915,55916,55918,55919,5823,55923,8439,55928],{},"Enable shadows using the ",[1681,55901,55902],{},[594,55903,17107],{},[1681,55905,55906],{},[594,55907,17125],{}," props.\nShadows are supported ",[1681,55910,55911],{},"only"," when using a ",[1681,55914,55882],{},". By default, shadows do ",[1681,55917,6551],{}," work with ",[1685,55920,55921],{},[594,55922,3063],{},[1685,55924,55925],{},[594,55926,55927],{},"ShaderMaterial",[7780,55929],{},[480,55931,55933,55934],{"id":55932},"using-transition","Using ",[594,55935,55936],{},"\u003CTransition>",[590,55938,55939,55940,55946,55947,55949,55950,55953,55954,3132,55957,55960],{},"The native Vue ",[1120,55941,55944],{"href":55942,"rel":55943},"https://vuejs.org/guide/built-ins/transition",[1124],[594,55945,55936],{}," component works seamlessly with ",[594,55948,52756],{},".\nThis means you can ",[1681,55951,55952],{},"animate"," how your projected HTML content ",[1685,55955,55956],{},"enters",[1685,55958,55959],{},"leaves"," the scene, exactly as you would in a regular Vue application.",[2054,55962,55963],{},[590,55964,27668,55965,55968,55969,1479,55972,1699,55974,55977],{},[1681,55966,55967],{},"standard interactions"," are supported just like on a regular HTML element — ",[1681,55970,55971],{},"hover effects",[1681,55973,12952],{},[1685,55975,55976],{},"any kind of DOM interaction"," are fully possible.",[584,55979,55980],{},[55981,55982],"objects-html-transition-demo",{},[5520,55984,5522,55985,55987],{},[5524,55986,53276],{},[602,55988,55991],{"className":604,"code":55989,"highlights":55990,"language":609,"meta":552,"style":552},"\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",[554,54930,53900,53901,53902,53903,53904,53905,53906,53907,53908,53909,53910,55104,53911,53912,53913,53914,53915,53916,53917],[594,55992,55993,56013,56040,56058,56076,56080,56090,56104,56114,56124,56134,56145,56149,56153,56173,56177,56199,56203,56213,56217,56231,56253,56257,56261,56275,56297,56301,56305,56319,56345,56349,56353,56368,56391,56395,56399,56403,56421,56494,56530,56551,56555,56559,56574,56590,56594,56602,56606,56614,56643,56672,56704,56725,56729,56735,56757,56775,56789,56803,56817,56839,56843,56899,56939,56947,56955,56963,56967,56973,56977,56981,56993,57019,57035,57058,57063,57083,57091,57106,57132,57147,57164,57170,57194,57212,57222,57231,57240,57245,57268,57289,57298,57307,57315,57319,57329,57337,57347,57357,57367,57377,57389,57393,57397,57411,57429,57433,57437,57446,57455,57465,57481,57485,57489,57498,57507,57525,57529,57533,57542,57551,57561,57575,57579],{"__ignoreMap":552},[613,55994,55995,55997,55999,56001,56003,56005,56007,56009,56011],{"class":615,"line":553},[613,55996,619],{"class":618},[613,55998,623],{"class":622},[613,56000,627],{"class":626},[613,56002,630],{"class":626},[613,56004,633],{"class":618},[613,56006,636],{"class":618},[613,56008,640],{"class":639},[613,56010,636],{"class":618},[613,56012,645],{"class":618},[613,56014,56016,56018,56020,56022,56024,56026,56028,56030,56032,56034,56036,56038],{"class":56015,"line":554},[615,649],[613,56017,653],{"class":652},[613,56019,656],{"class":618},[613,56021,52800],{"class":659},[613,56023,663],{"class":618},[613,56025,8580],{"class":659},[613,56027,663],{"class":618},[613,56029,666],{"class":659},[613,56031,669],{"class":618},[613,56033,672],{"class":652},[613,56035,675],{"class":618},[613,56037,678],{"class":639},[613,56039,681],{"class":618},[613,56041,56042,56044,56046,56048,56050,56052,56054,56056],{"class":615,"line":684},[613,56043,653],{"class":652},[613,56045,656],{"class":618},[613,56047,691],{"class":659},[613,56049,669],{"class":618},[613,56051,672],{"class":652},[613,56053,675],{"class":618},[613,56055,700],{"class":639},[613,56057,681],{"class":618},[613,56059,56060,56062,56064,56066,56068,56070,56072,56074],{"class":615,"line":705},[613,56061,653],{"class":652},[613,56063,656],{"class":618},[613,56065,3975],{"class":659},[613,56067,669],{"class":618},[613,56069,672],{"class":652},[613,56071,675],{"class":618},[613,56073,609],{"class":639},[613,56075,681],{"class":618},[613,56077,56078],{"class":615,"line":715},[613,56079,718],{"emptyLinePlaceholder":570},[613,56081,56082,56084,56086,56088],{"class":615,"line":721},[613,56083,2463],{"class":626},[613,56085,54051],{"class":659},[613,56087,633],{"class":618},[613,56089,1184],{"class":618},[613,56091,56092,56094,56096,56098,56100,56102],{"class":615,"line":731},[613,56093,54060],{"class":622},[613,56095,1198],{"class":618},[613,56097,675],{"class":618},[613,56099,10263],{"class":639},[613,56101,2488],{"class":618},[613,56103,2536],{"class":618},[613,56105,56106,56108,56110,56112],{"class":615,"line":754},[613,56107,54075],{"class":622},[613,56109,1198],{"class":618},[613,56111,2553],{"class":799},[613,56113,2536],{"class":618},[613,56115,56116,56118,56120,56122],{"class":615,"line":766},[613,56117,54086],{"class":622},[613,56119,1198],{"class":618},[613,56121,4537],{"class":4536},[613,56123,2536],{"class":618},[613,56125,56126,56128,56130,56132],{"class":615,"line":776},[613,56127,54097],{"class":622},[613,56129,1198],{"class":618},[613,56131,4537],{"class":4536},[613,56133,2536],{"class":618},[613,56135,56136,56139,56141,56143],{"class":615,"line":781},[613,56137,56138],{"class":622}," antialias",[613,56140,1198],{"class":618},[613,56142,4537],{"class":4536},[613,56144,2536],{"class":618},[613,56146,56147],{"class":615,"line":807},[613,56148,1305],{"class":618},[613,56150,56151],{"class":615,"line":607},[613,56152,718],{"emptyLinePlaceholder":570},[613,56154,56155,56157,56160,56162,56164,56166,56169,56171],{"class":615,"line":830},[613,56156,2463],{"class":626},[613,56158,56159],{"class":659}," rootRef ",[613,56161,633],{"class":618},[613,56163,3975],{"class":2482},[613,56165,619],{"class":618},[613,56167,56168],{"class":1180},"HTMLElement",[613,56170,3720],{"class":618},[613,56172,6745],{"class":659},[613,56174,56175],{"class":615,"line":841},[613,56176,718],{"emptyLinePlaceholder":570},[613,56178,56179,56181,56184,56186,56188,56190,56192,56195,56197],{"class":615,"line":852},[613,56180,2463],{"class":626},[613,56182,56183],{"class":659}," bgColor ",[613,56185,633],{"class":618},[613,56187,3975],{"class":2482},[613,56189,2485],{"class":659},[613,56191,2488],{"class":618},[613,56193,56194],{"class":639},"#F6B03B",[613,56196,2488],{"class":618},[613,56198,2496],{"class":659},[613,56200,56201],{"class":615,"line":862},[613,56202,718],{"emptyLinePlaceholder":570},[613,56204,56205,56207,56209,56211],{"class":615,"line":608},[613,56206,2463],{"class":626},[613,56208,54139],{"class":659},[613,56210,633],{"class":618},[613,56212,19198],{"class":659},[613,56214,56215],{"class":615,"line":882},[613,56216,2519],{"class":618},[613,56218,56219,56221,56223,56225,56227,56229],{"class":615,"line":892},[613,56220,54152],{"class":622},[613,56222,1198],{"class":618},[613,56224,675],{"class":618},[613,56226,847],{"class":639},[613,56228,2488],{"class":618},[613,56230,2536],{"class":618},[613,56232,56233,56235,56237,56239,56241,56243,56245,56247,56249,56251],{"class":615,"line":2671},[613,56234,54167],{"class":622},[613,56236,1198],{"class":618},[613,56238,2546],{"class":659},[613,56240,1901],{"class":799},[613,56242,663],{"class":618},[613,56244,2607],{"class":799},[613,56246,663],{"class":618},[613,56248,2607],{"class":799},[613,56250,1489],{"class":659},[613,56252,2536],{"class":618},[613,56254,56255],{"class":615,"line":2680},[613,56256,2643],{"class":618},[613,56258,56259],{"class":615,"line":2714},[613,56260,2519],{"class":618},[613,56262,56263,56265,56267,56269,56271,56273],{"class":615,"line":2723},[613,56264,54152],{"class":622},[613,56266,1198],{"class":618},[613,56268,675],{"class":618},[613,56270,4083],{"class":639},[613,56272,2488],{"class":618},[613,56274,2536],{"class":618},[613,56276,56277,56279,56281,56283,56285,56287,56289,56291,56293,56295],{"class":615,"line":2732},[613,56278,54167],{"class":622},[613,56280,1198],{"class":618},[613,56282,2546],{"class":659},[613,56284,4096],{"class":799},[613,56286,663],{"class":618},[613,56288,28874],{"class":799},[613,56290,663],{"class":618},[613,56292,28874],{"class":799},[613,56294,1489],{"class":659},[613,56296,2536],{"class":618},[613,56298,56299],{"class":615,"line":2741},[613,56300,2643],{"class":618},[613,56302,56303],{"class":615,"line":2763},[613,56304,2519],{"class":618},[613,56306,56307,56309,56311,56313,56315,56317],{"class":615,"line":2814},[613,56308,54152],{"class":622},[613,56310,1198],{"class":618},[613,56312,675],{"class":618},[613,56314,10350],{"class":639},[613,56316,2488],{"class":618},[613,56318,2536],{"class":618},[613,56320,56321,56323,56325,56327,56329,56331,56333,56335,56337,56339,56341,56343],{"class":615,"line":2823},[613,56322,54167],{"class":622},[613,56324,1198],{"class":618},[613,56326,2546],{"class":659},[613,56328,1521],{"class":799},[613,56330,663],{"class":618},[613,56332,33805],{"class":799},[613,56334,663],{"class":618},[613,56336,33684],{"class":799},[613,56338,663],{"class":618},[613,56340,7988],{"class":799},[613,56342,1489],{"class":659},[613,56344,2536],{"class":618},[613,56346,56347],{"class":615,"line":2832},[613,56348,2643],{"class":618},[613,56350,56351],{"class":615,"line":4034},[613,56352,2519],{"class":618},[613,56354,56355,56357,56359,56361,56364,56366],{"class":615,"line":4078},[613,56356,54152],{"class":622},[613,56358,1198],{"class":618},[613,56360,675],{"class":618},[613,56362,56363],{"class":639},"TresConeGeometry",[613,56365,2488],{"class":618},[613,56367,2536],{"class":618},[613,56369,56370,56372,56374,56376,56378,56380,56383,56385,56387,56389],{"class":615,"line":4105},[613,56371,54167],{"class":622},[613,56373,1198],{"class":618},[613,56375,2546],{"class":659},[613,56377,4096],{"class":799},[613,56379,663],{"class":618},[613,56381,56382],{"class":799}," 1.4",[613,56384,663],{"class":618},[613,56386,28874],{"class":799},[613,56388,1489],{"class":659},[613,56390,2536],{"class":618},[613,56392,56393],{"class":615,"line":4124},[613,56394,2643],{"class":618},[613,56396,56397],{"class":615,"line":4165},[613,56398,19234],{"class":659},[613,56400,56401],{"class":615,"line":4174},[613,56402,718],{"emptyLinePlaceholder":570},[613,56404,56405,56407,56410,56412,56415,56417,56419],{"class":615,"line":4183},[613,56406,2463],{"class":626},[613,56408,56409],{"class":659}," getRandomBackgroundColor ",[613,56411,633],{"class":618},[613,56413,56414],{"class":618}," ():",[613,56416,5550],{"class":1180},[613,56418,3746],{"class":626},[613,56420,1184],{"class":618},[613,56422,56423,56426,56429,56431,56433,56435,56437,56439,56441,56443,56445,56447,56449,56451,56454,56456,56458,56460,56463,56465,56467,56469,56472,56474,56476,56478,56481,56483,56485,56487,56490,56492],{"class":615,"line":19957},[613,56424,56425],{"class":626}," const",[613,56427,56428],{"class":659}," colors",[613,56430,2479],{"class":618},[613,56432,2546],{"class":622},[613,56434,2488],{"class":618},[613,56436,56194],{"class":639},[613,56438,2488],{"class":618},[613,56440,663],{"class":618},[613,56442,675],{"class":618},[613,56444,10263],{"class":639},[613,56446,2488],{"class":618},[613,56448,663],{"class":618},[613,56450,675],{"class":618},[613,56452,56453],{"class":639},"#FF5733",[613,56455,2488],{"class":618},[613,56457,663],{"class":618},[613,56459,675],{"class":618},[613,56461,56462],{"class":639},"#33FF57",[613,56464,2488],{"class":618},[613,56466,663],{"class":618},[613,56468,675],{"class":618},[613,56470,56471],{"class":639},"#3357FF",[613,56473,2488],{"class":618},[613,56475,663],{"class":618},[613,56477,675],{"class":618},[613,56479,56480],{"class":639},"#F333FF",[613,56482,2488],{"class":618},[613,56484,663],{"class":618},[613,56486,675],{"class":618},[613,56488,56489],{"class":639},"#33FFF5",[613,56491,2488],{"class":618},[613,56493,19234],{"class":622},[613,56495,56496,56498,56501,56503,56505,56507,56509,56511,56513,56515,56518,56520,56522,56524,56526,56528],{"class":615,"line":19972},[613,56497,56425],{"class":626},[613,56499,56500],{"class":659}," idx",[613,56502,2479],{"class":618},[613,56504,29716],{"class":659},[613,56506,1126],{"class":618},[613,56508,44298],{"class":2482},[613,56510,2485],{"class":622},[613,56512,26743],{"class":659},[613,56514,1126],{"class":618},[613,56516,56517],{"class":2482},"random",[613,56519,7195],{"class":622},[613,56521,21727],{"class":618},[613,56523,56428],{"class":659},[613,56525,1126],{"class":618},[613,56527,19789],{"class":659},[613,56529,2496],{"class":622},[613,56531,56532,56534,56536,56538,56541,56543,56545,56547,56549],{"class":615,"line":19987},[613,56533,21694],{"class":652},[613,56535,56428],{"class":659},[613,56537,1474],{"class":622},[613,56539,56540],{"class":659},"idx",[613,56542,5577],{"class":622},[613,56544,3763],{"class":618},[613,56546,675],{"class":618},[613,56548,56194],{"class":639},[613,56550,681],{"class":618},[613,56552,56553],{"class":615,"line":19992},[613,56554,1305],{"class":618},[613,56556,56557],{"class":615,"line":19999},[613,56558,718],{"emptyLinePlaceholder":570},[613,56560,56561,56563,56566,56568,56570,56572],{"class":615,"line":20004},[613,56562,2463],{"class":626},[613,56564,56565],{"class":659}," updateBackgroundColor ",[613,56567,633],{"class":618},[613,56569,7291],{"class":618},[613,56571,3746],{"class":626},[613,56573,1184],{"class":618},[613,56575,56576,56579,56581,56583,56585,56588],{"class":615,"line":20010},[613,56577,56578],{"class":659}," bgColor",[613,56580,1126],{"class":618},[613,56582,3754],{"class":659},[613,56584,2479],{"class":618},[613,56586,56587],{"class":2482}," getRandomBackgroundColor",[613,56589,6745],{"class":622},[613,56591,56592],{"class":615,"line":20031},[613,56593,1305],{"class":618},[613,56595,56596,56598,56600],{"class":615,"line":20037},[613,56597,708],{"class":618},[613,56599,623],{"class":622},[613,56601,645],{"class":618},[613,56603,56604],{"class":615,"line":20044},[613,56605,718],{"emptyLinePlaceholder":570},[613,56607,56608,56610,56612],{"class":615,"line":20049},[613,56609,619],{"class":618},[613,56611,726],{"class":622},[613,56613,645],{"class":618},[613,56615,56616,56618,56620,56622,56624,56626,56629,56631,56633,56635,56637,56639,56641],{"class":615,"line":20070},[613,56617,734],{"class":618},[613,56619,4259],{"class":622},[613,56621,3975],{"class":626},[613,56623,633],{"class":618},[613,56625,636],{"class":618},[613,56627,56628],{"class":639},"rootRef",[613,56630,636],{"class":618},[613,56632,23830],{"class":626},[613,56634,633],{"class":618},[613,56636,636],{"class":618},[613,56638,55702],{"class":639},[613,56640,636],{"class":618},[613,56642,645],{"class":618},[613,56644,56645,56647,56649,56651,56653,56655,56657,56659,56661,56663,56665,56668,56670],{"class":615,"line":20083},[613,56646,757],{"class":618},[613,56648,737],{"class":622},[613,56650,9347],{"class":626},[613,56652,633],{"class":618},[613,56654,636],{"class":618},[613,56656,54482],{"class":659},[613,56658,636],{"class":618},[613,56660,23830],{"class":626},[613,56662,633],{"class":618},[613,56664,636],{"class":618},[613,56666,56667],{"class":639},"!pointer-events-none",[613,56669,636],{"class":618},[613,56671,645],{"class":618},[613,56673,56674,56676,56678,56680,56682,56684,56686,56688,56690,56692,56694,56696,56698,56700,56702],{"class":615,"line":20109},[613,56675,833],{"class":618},[613,56677,760],{"class":622},[613,56679,789],{"class":618},[613,56681,1467],{"class":626},[613,56683,633],{"class":618},[613,56685,636],{"class":618},[613,56687,1474],{"class":618},[613,56689,945],{"class":799},[613,56691,1479],{"class":618},[613,56693,15083],{"class":799},[613,56695,1479],{"class":618},[613,56697,9909],{"class":799},[613,56699,1489],{"class":618},[613,56701,636],{"class":618},[613,56703,763],{"class":618},[613,56705,56706,56708,56710,56712,56715,56717,56719,56721,56723],{"class":615,"line":20114},[613,56707,833],{"class":618},[613,56709,771],{"class":622},[613,56711,789],{"class":618},[613,56713,56714],{"class":626},"dom-element",[613,56716,633],{"class":618},[613,56718,636],{"class":618},[613,56720,56628],{"class":659},[613,56722,636],{"class":618},[613,56724,763],{"class":618},[613,56726,56727],{"class":615,"line":20121},[613,56728,718],{"emptyLinePlaceholder":570},[613,56730,56731,56733],{"class":615,"line":20130},[613,56732,833],{"class":618},[613,56734,54537],{"class":622},[613,56736,56737,56739,56741,56743,56745,56747,56749,56751,56753,56755],{"class":615,"line":20135},[613,56738,8216],{"class":652},[613,56740,633],{"class":618},[613,56742,636],{"class":618},[613,56744,2485],{"class":618},[613,56746,5325],{"class":659},[613,56748,1479],{"class":618},[613,56750,8230],{"class":659},[613,56752,8233],{"class":618},[613,56754,54558],{"class":659},[613,56756,3200],{"class":618},[613,56758,56759,56761,56763,56765,56767,56769,56771,56773],{"class":615,"line":20144},[613,56760,8243],{"class":618},[613,56762,8246],{"class":626},[613,56764,633],{"class":618},[613,56766,20898],{"class":618},[613,56768,54573],{"class":639},[613,56770,20904],{"class":618},[613,56772,8230],{"class":659},[613,56774,20909],{"class":618},[613,56776,56777,56779,56781,56783,56785,56787],{"class":615,"line":20163},[613,56778,8243],{"class":618},[613,56780,8724],{"class":626},[613,56782,633],{"class":618},[613,56784,636],{"class":618},[613,56786,2705],{"class":799},[613,56788,3200],{"class":618},[613,56790,56791,56793,56795,56797,56799,56801],{"class":615,"line":20173},[613,56792,8243],{"class":618},[613,56794,54600],{"class":626},[613,56796,633],{"class":618},[613,56798,636],{"class":618},[613,56800,54607],{"class":799},[613,56802,3200],{"class":618},[613,56804,56805,56807,56809,56811,56813,56815],{"class":615,"line":20210},[613,56806,8243],{"class":618},[613,56808,38929],{"class":626},[613,56810,633],{"class":618},[613,56812,636],{"class":618},[613,56814,1901],{"class":799},[613,56816,3200],{"class":618},[613,56818,56819,56821,56823,56825,56827,56829,56831,56833,56835,56837],{"class":615,"line":20219},[613,56820,8243],{"class":618},[613,56822,8930],{"class":626},[613,56824,633],{"class":618},[613,56826,636],{"class":618},[613,56828,3923],{"class":618},[613,56830,37354],{"class":799},[613,56832,1479],{"class":618},[613,56834,37354],{"class":799},[613,56836,1489],{"class":618},[613,56838,3200],{"class":618},[613,56840,56841],{"class":615,"line":20253},[613,56842,53053],{"class":618},[613,56844,56845,56847,56849,56851,56853,56855,56857,56860,56862,56865,56867,56869,56871,56873,56875,56878,56880,56883,56885,56887,56889,56891,56893,56895,56897],{"class":615,"line":20262},[613,56846,844],{"class":618},[613,56848,836],{"class":622},[613,56850,789],{"class":618},[613,56852,1467],{"class":626},[613,56854,633],{"class":618},[613,56856,636],{"class":618},[613,56858,56859],{"class":618},"[(",[613,56861,8230],{"class":659},[613,56863,56864],{"class":618}," - (",[613,56866,54558],{"class":659},[613,56868,1126],{"class":618},[613,56870,19789],{"class":659},[613,56872,54676],{"class":618},[613,56874,1901],{"class":799},[613,56876,56877],{"class":618},") / ",[613,56879,800],{"class":799},[613,56881,56882],{"class":618},") * ",[613,56884,800],{"class":799},[613,56886,1479],{"class":618},[613,56888,1901],{"class":799},[613,56890,1479],{"class":618},[613,56892,945],{"class":799},[613,56894,1489],{"class":618},[613,56896,636],{"class":618},[613,56898,645],{"class":618},[613,56900,56901,56903,56905,56907,56909,56911,56913,56915,56917,56919,56921,56923,56925,56927,56929,56931,56933,56935,56937],{"class":615,"line":20271},[613,56902,54712],{"class":618},[613,56904,54715],{"class":622},[613,56906,789],{"class":618},[613,56908,54720],{"class":626},[613,56910,633],{"class":618},[613,56912,636],{"class":618},[613,56914,5325],{"class":659},[613,56916,1126],{"class":618},[613,56918,54715],{"class":659},[613,56920,636],{"class":618},[613,56922,789],{"class":618},[613,56924,1997],{"class":626},[613,56926,633],{"class":618},[613,56928,636],{"class":618},[613,56930,5325],{"class":659},[613,56932,1126],{"class":618},[613,56934,1997],{"class":659},[613,56936,636],{"class":618},[613,56938,763],{"class":618},[613,56940,56941,56943,56945],{"class":615,"line":20292},[613,56942,54712],{"class":618},[613,56944,857],{"class":622},[613,56946,763],{"class":618},[613,56948,56949,56951,56953],{"class":615,"line":20350},[613,56950,54763],{"class":618},[613,56952,836],{"class":622},[613,56954,645],{"class":618},[613,56956,56957,56959,56961],{"class":615,"line":20407},[613,56958,865],{"class":618},[613,56960,8719],{"class":622},[613,56962,645],{"class":618},[613,56964,56965],{"class":615,"line":20427},[613,56966,718],{"emptyLinePlaceholder":570},[613,56968,56969,56971],{"class":615,"line":20458},[613,56970,833],{"class":618},[613,56972,52966],{"class":622},[613,56974,56975],{"class":615,"line":20467},[613,56976,52972],{"class":626},[613,56978,56979],{"class":615,"line":20476},[613,56980,52978],{"class":626},[613,56982,56983,56985,56987,56989,56991],{"class":615,"line":53898},[613,56984,54802],{"class":626},[613,56986,633],{"class":618},[613,56988,636],{"class":618},[613,56990,48661],{"class":639},[613,56992,3200],{"class":618},[613,56994,56995,56997,56999,57001,57003,57005,57007,57009,57011,57013,57015,57017],{"class":615,"line":53899},[613,56996,8243],{"class":618},[613,56998,1467],{"class":626},[613,57000,633],{"class":618},[613,57002,636],{"class":618},[613,57004,1474],{"class":618},[613,57006,945],{"class":799},[613,57008,1479],{"class":618},[613,57010,54830],{"class":799},[613,57012,8838],{"class":618},[613,57014,800],{"class":799},[613,57016,1489],{"class":618},[613,57018,3200],{"class":618},[613,57020,57022,57024,57026,57028,57030,57033],{"class":57021,"line":54930},[615,649],[613,57023,8243],{"class":618},[613,57025,792],{"class":626},[613,57027,633],{"class":618},[613,57029,636],{"class":618},[613,57031,57032],{"class":799},"1.15",[613,57034,3200],{"class":618},[613,57036,57038,57040,57042,57044,57046,57048,57050,57052,57054,57056],{"class":57037,"line":53900},[615,649],[613,57039,8243],{"class":618},[613,57041,54846],{"class":626},[613,57043,633],{"class":618},[613,57045,636],{"class":618},[613,57047,1474],{"class":618},[613,57049,54855],{"class":799},[613,57051,1479],{"class":618},[613,57053,945],{"class":799},[613,57055,1489],{"class":618},[613,57057,3200],{"class":618},[613,57059,57061],{"class":57060,"line":53901},[615,649],[613,57062,53053],{"class":618},[613,57064,57066,57068,57070,57072,57074,57076,57079,57081],{"class":57065,"line":53902},[615,649],[613,57067,844],{"class":618},[613,57069,23906],{"class":622},[613,57071,3903],{"class":626},[613,57073,633],{"class":618},[613,57075,636],{"class":618},[613,57077,57078],{"class":639},"transition-basic",[613,57080,636],{"class":618},[613,57082,645],{"class":618},[613,57084,57086,57088],{"class":57085,"line":53903},[615,649],[613,57087,54712],{"class":618},[613,57089,57090],{"class":622},"h1\n",[613,57092,57094,57097,57099,57101,57104],{"class":57093,"line":53904},[615,649],[613,57095,57096],{"class":652}," v-if",[613,57098,633],{"class":618},[613,57100,636],{"class":618},[613,57102,57103],{"class":659},"showTransition",[613,57105,3200],{"class":618},[613,57107,57109,57112,57114,57116,57118,57120,57123,57125,57128,57130],{"class":57108,"line":53905},[615,649],[613,57110,57111],{"class":618}," :",[613,57113,1307],{"class":626},[613,57115,633],{"class":618},[613,57117,636],{"class":618},[613,57119,12614],{"class":618},[613,57121,57122],{"class":622},"backgroundColor",[613,57124,12619],{"class":618},[613,57126,57127],{"class":659},"bgColor",[613,57129,669],{"class":618},[613,57131,3200],{"class":618},[613,57133,57135,57138,57140,57142,57145],{"class":57134,"line":53906},[615,649],[613,57136,57137],{"class":626}," class",[613,57139,633],{"class":618},[613,57141,636],{"class":618},[613,57143,57144],{"class":639},"html-demo-transition-heading will-change-transform transition-transform,background-color cursor-pointer duration-500 text-center p-2 text-light shadow-lg",[613,57146,3200],{"class":618},[613,57148,57150,57153,57155,57157,57159,57162],{"class":57149,"line":53907},[615,649],[613,57151,57152],{"class":618}," @",[613,57154,36329],{"class":626},[613,57156,633],{"class":618},[613,57158,636],{"class":618},[613,57160,57161],{"class":659},"updateBackgroundColor",[613,57163,3200],{"class":618},[613,57165,57167],{"class":57166,"line":53908},[615,649],[613,57168,57169],{"class":618}," >\n",[613,57171,57173,57176,57178,57180,57183,57185,57187,57190,57192],{"class":57172,"line":53909},[615,649],[613,57174,57175],{"class":618}," \u003C",[613,57177,1681],{"class":622},[613,57179,3720],{"class":618},[613,57181,57182],{"class":659},"TRANSITION + ",[613,57184,708],{"class":618},[613,57186,1681],{"class":622},[613,57188,57189],{"class":618},">\u003C",[613,57191,7780],{"class":622},[613,57193,763],{"class":618},[613,57195,57197,57199,57201,57203,57206,57208,57210],{"class":57196,"line":53910},[615,649],[613,57198,57175],{"class":618},[613,57200,1685],{"class":622},[613,57202,3720],{"class":618},[613,57204,57205],{"class":659},"occlude=blending 💛",[613,57207,708],{"class":618},[613,57209,1685],{"class":622},[613,57211,645],{"class":618},[613,57213,57215,57218,57220],{"class":57214,"line":55104},[615,649],[613,57216,57217],{"class":618}," \u003C/",[613,57219,53060],{"class":622},[613,57221,645],{"class":618},[613,57223,57225,57227,57229],{"class":57224,"line":53911},[615,649],[613,57226,54763],{"class":618},[613,57228,23906],{"class":622},[613,57230,645],{"class":618},[613,57232,57234,57236,57238],{"class":57233,"line":53912},[615,649],[613,57235,865],{"class":618},[613,57237,53089],{"class":622},[613,57239,645],{"class":618},[613,57241,57243],{"class":57242,"line":53913},[615,649],[613,57244,718],{"emptyLinePlaceholder":570},[613,57246,57248,57250,57252,57254,57256,57258,57260,57262,57264,57266],{"class":57247,"line":53914},[615,649],[613,57249,833],{"class":618},[613,57251,8313],{"class":622},[613,57253,789],{"class":618},[613,57255,1976],{"class":626},[613,57257,633],{"class":618},[613,57259,636],{"class":618},[613,57261,9324],{"class":618},[613,57263,54339],{"class":799},[613,57265,636],{"class":618},[613,57267,763],{"class":618},[613,57269,57271,57273,57275,57277,57279,57281,57283,57285,57287],{"class":57270,"line":53915},[615,649],[613,57272,833],{"class":618},[613,57274,8758],{"class":622},[613,57276,789],{"class":618},[613,57278,1894],{"class":626},[613,57280,633],{"class":618},[613,57282,636],{"class":618},[613,57284,1901],{"class":799},[613,57286,636],{"class":618},[613,57288,763],{"class":618},[613,57290,57292,57294,57296],{"class":57291,"line":53916},[615,649],[613,57293,875],{"class":618},[613,57295,737],{"class":622},[613,57297,645],{"class":618},[613,57299,57301,57303,57305],{"class":57300,"line":53917},[615,649],[613,57302,885],{"class":618},[613,57304,4259],{"class":622},[613,57306,645],{"class":618},[613,57308,57309,57311,57313],{"class":615,"line":53918},[613,57310,708],{"class":618},[613,57312,726],{"class":622},[613,57314,645],{"class":618},[613,57316,57317],{"class":615,"line":53919},[613,57318,718],{"emptyLinePlaceholder":570},[613,57320,57321,57323,57325,57327],{"class":615,"line":53920},[613,57322,619],{"class":618},[613,57324,1307],{"class":622},[613,57326,53140],{"class":626},[613,57328,645],{"class":618},[613,57330,57331,57333,57335],{"class":615,"line":53921},[613,57332,1126],{"class":618},[613,57334,55702],{"class":1180},[613,57336,1184],{"class":618},[613,57338,57339,57341,57343,57345],{"class":615,"line":55244},[613,57340,1220],{"class":4269},[613,57342,1198],{"class":618},[613,57344,55714],{"class":799},[613,57346,8570],{"class":618},[613,57348,57349,57351,57353,57355],{"class":615,"line":53922},[613,57350,1230],{"class":4269},[613,57352,1198],{"class":618},[613,57354,55714],{"class":799},[613,57356,8570],{"class":618},[613,57358,57359,57361,57363,57365],{"class":615,"line":53923},[613,57360,5558],{"class":4269},[613,57362,1198],{"class":618},[613,57364,4274],{"class":659},[613,57366,8570],{"class":618},[613,57368,57369,57371,57373,57375],{"class":615,"line":53924},[613,57370,55744],{"class":4269},[613,57372,1198],{"class":618},[613,57374,55749],{"class":659},[613,57376,8570],{"class":618},[613,57378,57379,57381,57383,57385,57387],{"class":615,"line":53925},[613,57380,53155],{"class":4269},[613,57382,1198],{"class":618},[613,57384,53160],{"class":618},[613,57386,55763],{"class":659},[613,57388,8570],{"class":618},[613,57390,57391],{"class":615,"line":53926},[613,57392,1305],{"class":618},[613,57394,57395],{"class":615,"line":53927},[613,57396,718],{"emptyLinePlaceholder":570},[613,57398,57399,57401,57404,57406,57409],{"class":615,"line":53928},[613,57400,1126],{"class":618},[613,57402,57403],{"class":1180},"html-demo-transition-heading",[613,57405,1198],{"class":618},[613,57407,57408],{"class":626},"hover",[613,57410,1184],{"class":618},[613,57412,57413,57416,57418,57421,57423,57426],{"class":615,"line":53929},[613,57414,57415],{"class":4269}," transform",[613,57417,1198],{"class":618},[613,57419,57420],{"class":2482}," scale",[613,57422,2485],{"class":618},[613,57424,57425],{"class":799},"1.05",[613,57427,57428],{"class":618},");\n",[613,57430,57431],{"class":615,"line":53930},[613,57432,1305],{"class":618},[613,57434,57435],{"class":615,"line":53931},[613,57436,718],{"emptyLinePlaceholder":570},[613,57438,57439,57441,57444],{"class":615,"line":53932},[613,57440,1126],{"class":618},[613,57442,57443],{"class":1180},"transition-basic-enter-from",[613,57445,2536],{"class":618},[613,57447,57448,57450,57453],{"class":615,"line":55423},[613,57449,1126],{"class":618},[613,57451,57452],{"class":1180},"transition-basic-leave-to",[613,57454,1184],{"class":618},[613,57456,57457,57459,57461,57463],{"class":615,"line":55447},[613,57458,5698],{"class":4269},[613,57460,1198],{"class":618},[613,57462,2553],{"class":799},[613,57464,8570],{"class":618},[613,57466,57467,57469,57471,57474,57476,57479],{"class":615,"line":55468},[613,57468,57415],{"class":4269},[613,57470,1198],{"class":618},[613,57472,57473],{"class":2482}," translateY",[613,57475,2485],{"class":618},[613,57477,57478],{"class":799},"-20px",[613,57480,57428],{"class":618},[613,57482,57483],{"class":615,"line":55477},[613,57484,1305],{"class":618},[613,57486,57487],{"class":615,"line":55486},[613,57488,718],{"emptyLinePlaceholder":570},[613,57490,57491,57493,57496],{"class":615,"line":55491},[613,57492,1126],{"class":618},[613,57494,57495],{"class":1180},"transition-basic-enter-active",[613,57497,2536],{"class":618},[613,57499,57500,57502,57505],{"class":615,"line":55498},[613,57501,1126],{"class":618},[613,57503,57504],{"class":1180},"transition-basic-leave-active",[613,57506,1184],{"class":618},[613,57508,57509,57512,57514,57517,57520,57523],{"class":615,"line":55516},[613,57510,57511],{"class":4269}," transition",[613,57513,1198],{"class":618},[613,57515,57516],{"class":659}," all ",[613,57518,57519],{"class":799},"0.5s",[613,57521,57522],{"class":659}," ease",[613,57524,8570],{"class":618},[613,57526,57527],{"class":615,"line":55535},[613,57528,1305],{"class":618},[613,57530,57531],{"class":615,"line":55552},[613,57532,718],{"emptyLinePlaceholder":570},[613,57534,57535,57537,57540],{"class":615,"line":55579},[613,57536,1126],{"class":618},[613,57538,57539],{"class":1180},"transition-basic-enter-to",[613,57541,2536],{"class":618},[613,57543,57544,57546,57549],{"class":615,"line":55594},[613,57545,1126],{"class":618},[613,57547,57548],{"class":1180},"transition-basic-leave-from",[613,57550,1184],{"class":618},[613,57552,57553,57555,57557,57559],{"class":615,"line":55600},[613,57554,5698],{"class":4269},[613,57556,1198],{"class":618},[613,57558,2607],{"class":799},[613,57560,8570],{"class":618},[613,57562,57563,57565,57567,57569,57571,57573],{"class":615,"line":55605},[613,57564,57415],{"class":4269},[613,57566,1198],{"class":618},[613,57568,57473],{"class":2482},[613,57570,2485],{"class":618},[613,57572,945],{"class":799},[613,57574,57428],{"class":618},[613,57576,57577],{"class":615,"line":55610},[613,57578,1305],{"class":618},[613,57580,57581,57583,57585],{"class":615,"line":55633},[613,57582,708],{"class":618},[613,57584,1307],{"class":622},[613,57586,645],{"class":618},[4191,57588,55933,57590],{"id":57589},"using-iframes",[594,57591,57592],{},"iframes",[590,57594,57595,57596,57598],{},"You can achieve pretty cool results with the ",[594,57597,53089],{}," 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.",[2343,57600,57601],{},[57602,57603],"objects-html-iframe-demo",{},[5520,57605,5522,57606,57608],{},[5524,57607,53276],{},[602,57609,57611],{"className":44201,"code":57610,"language":44203,"meta":552,"style":552},"\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",[594,57612,57613,57619,57624,57629,57642,57655,57668,57681,57694,57708,57722,57726,57796],{"__ignoreMap":552},[613,57614,57615,57617],{"class":615,"line":553},[613,57616,619],{"class":618},[613,57618,53726],{"class":622},[613,57620,57621],{"class":615,"line":554},[613,57622,57623],{"class":626}," transform\n",[613,57625,57626],{"class":615,"line":684},[613,57627,57628],{"class":626}," center\n",[613,57630,57631,57634,57636,57638,57640],{"class":615,"line":705},[613,57632,57633],{"class":626}," :cast-shadow",[613,57635,633],{"class":618},[613,57637,636],{"class":618},[613,57639,941],{"class":639},[613,57641,3200],{"class":618},[613,57643,57644,57647,57649,57651,57653],{"class":615,"line":715},[613,57645,57646],{"class":626}," :receive-shadow",[613,57648,633],{"class":618},[613,57650,636],{"class":618},[613,57652,941],{"class":639},[613,57654,3200],{"class":618},[613,57656,57657,57660,57662,57664,57666],{"class":615,"line":721},[613,57658,57659],{"class":626}," occlude",[613,57661,633],{"class":618},[613,57663,636],{"class":618},[613,57665,48661],{"class":639},[613,57667,3200],{"class":618},[613,57669,57670,57673,57675,57677,57679],{"class":615,"line":731},[613,57671,57672],{"class":626}," :z-index-range",[613,57674,633],{"class":618},[613,57676,636],{"class":618},[613,57678,53363],{"class":639},[613,57680,3200],{"class":618},[613,57682,57683,57686,57688,57690,57692],{"class":615,"line":754},[613,57684,57685],{"class":626}," :position-y",[613,57687,633],{"class":618},[613,57689,636],{"class":618},[613,57691,55364],{"class":639},[613,57693,3200],{"class":618},[613,57695,57696,57699,57701,57703,57706],{"class":615,"line":766},[613,57697,57698],{"class":626}," :portal",[613,57700,633],{"class":618},[613,57702,636],{"class":618},[613,57704,57705],{"class":639},"portalRef",[613,57707,3200],{"class":618},[613,57709,57710,57713,57715,57717,57720],{"class":615,"line":776},[613,57711,57712],{"class":626}," :style",[613,57714,633],{"class":618},[613,57716,636],{"class":618},[613,57718,57719],{"class":639},"{ userSelect: 'none' }",[613,57721,3200],{"class":618},[613,57723,57724],{"class":615,"line":781},[613,57725,645],{"class":618},[613,57727,57728,57730,57733,57735,57737,57739,57742,57744,57747,57749,57751,57754,57756,57759,57761,57763,57765,57767,57770,57772,57774,57777,57779,57782,57784,57786,57788,57790,57792,57794],{"class":615,"line":807},[613,57729,734],{"class":618},[613,57731,57732],{"class":622},"iframe",[613,57734,23830],{"class":626},[613,57736,633],{"class":618},[613,57738,636],{"class":618},[613,57740,57741],{"class":639},"w-[700px] h-[500px]",[613,57743,636],{"class":618},[613,57745,57746],{"class":626}," src",[613,57748,633],{"class":618},[613,57750,636],{"class":618},[613,57752,57753],{"class":639},"https://tresjs.org",[613,57755,636],{"class":618},[613,57757,57758],{"class":626}," frameborder",[613,57760,633],{"class":618},[613,57762,636],{"class":618},[613,57764,945],{"class":639},[613,57766,636],{"class":618},[613,57768,57769],{"class":626}," :width",[613,57771,633],{"class":618},[613,57773,636],{"class":618},[613,57775,57776],{"class":639},"700",[613,57778,636],{"class":618},[613,57780,57781],{"class":626}," :height",[613,57783,633],{"class":618},[613,57785,636],{"class":618},[613,57787,41431],{"class":639},[613,57789,636],{"class":618},[613,57791,23879],{"class":618},[613,57793,57732],{"class":622},[613,57795,645],{"class":618},[613,57797,57798,57800,57802],{"class":615,"line":607},[613,57799,708],{"class":618},[613,57801,44203],{"class":622},[613,57803,645],{"class":618},[57805,57806,57807],"info",{},[590,57808,57809,57810,57813,57814,57817,57818],{},"The demos use ",[594,57811,57812],{},":z-index-range=\"[28, 0]\""," simply to ensure the HTML elements stay below the documentation header (which uses ",[594,57815,57816],{},"z-index: 30",").\n",[1681,57819,57820],{},"This value is for the docs only — you can ignore it or adjust it as needed.",[480,57822,902],{"id":901},[907,57824,57825,57835],{},[910,57826,57827],{},[913,57828,57829,57831,57833],{},[916,57830,918],{},[916,57832,921],{},[916,57834,924],{},[926,57836,57837,57854,57869,57887,57911,57931,57948,57966,57978,57997,58020,58060,58097,58117,58150],{},[913,57838,57839,57843,57849],{},[931,57840,57841],{},[1681,57842,4896],{},[931,57844,57845,57846,1126],{},"Wrapping ",[1685,57847,57848],{},"HTML element",[931,57850,57851],{},[594,57852,57853],{},"'div'",[913,57855,57856,57861,57867],{},[931,57857,57858],{},[1681,57859,57860],{},"wrapperClass",[931,57862,2843,57863,57866],{},[594,57864,57865],{},"className"," of the wrapping element. element.",[931,57868],{},[913,57870,57871,57876,57883],{},[931,57872,57873],{},[1681,57874,57875],{},"prepend",[931,57877,57878,57879,57882],{},"Projects content ",[1685,57880,57881],{},"behind"," the canvas.",[931,57884,57885],{},[594,57886,951],{},[913,57888,57889,57893,57907],{},[931,57890,57891],{},[1681,57892,44736],{},[931,57894,1330,57895,8439,57898,57900,57901],{},[594,57896,57897],{},"transform: translate(-50%, -50%)",[7780,57899],{},"➡️ ",[1685,57902,57903,57904,57906],{},"Ignored in ",[1681,57905,10558],{}," mode.",[931,57908,57909],{},[594,57910,951],{},[913,57912,57913,57918,57927],{},[931,57914,57915],{},[1681,57916,57917],{},"fullscreen",[931,57919,57920,57921,57900,57923],{},"Aligns to the upper-left corner and fills the screen. ",[7780,57922],{},[1685,57924,57903,57925,57906],{},[1681,57926,10558],{},[931,57928,57929],{},[594,57930,951],{},[913,57932,57933,57938,57946],{},[931,57934,57935],{},[1681,57936,57937],{},"distanceFactor",[931,57939,57940,57941,57943,57944,1126],{},"Children are scaled by this factor and also by distance to a ",[594,57942,11428],{},", or zoom when using an ",[594,57945,52752],{},[931,57947],{},[913,57949,57950,57955,57961],{},[931,57951,57952],{},[1681,57953,57954],{},"zIndexRange",[931,57956,57957,57958,1126],{},"Defines the ",[1685,57959,57960],{},"Z-order range",[931,57962,57963],{},[594,57964,57965],{},"[16777271, 0]",[913,57967,57968,57973,57976],{},[931,57969,57970],{},[1681,57971,57972],{},"portal",[931,57974,57975],{},"Reference to a target container (for rendering into a different DOM node). container.",[931,57977],{},[913,57979,57980,57984,57993],{},[931,57981,57982],{},[1681,57983,10558],{},[931,57985,938,57986,57988,57989,57992],{},[594,57987,941],{},", applies ",[594,57990,57991],{},"matrix3d"," transformations — the element appears as if it is inside the 3D scene.",[931,57994,57995],{},[594,57996,951],{},[913,57998,57999,58004,58016],{},[931,58000,58001],{},[1681,58002,58003],{},"sprite",[931,58005,58006,58007,8439,58009,57900,58011],{},"Renders as a ",[1685,58008,58003],{},[7780,58010],{},[1685,58012,58013,58014,57906],{},"Only in ",[1681,58015,10558],{},[931,58017,58018],{},[594,58019,951],{},[913,58021,58022,58027,58051],{},[931,58023,58024],{},[1681,58025,58026],{},"calculatePosition",[931,58028,58029,58030,58032,3263,58035,3263,58038,58040,58041,58044,58045,57900,58047],{},"Callback function to override the default positioning logic. ",[7780,58031],{},[1681,58033,58034],{},"Type:",[594,58036,58037],{},"(object: Object3D, camera: Camera, size: { width: number; height: number }) => [number, number, number]",[7780,58039],{},"Receives the related 3D object, the active camera, and the current viewport size, and must return ",[594,58042,58043],{},"[x, y, z]"," pixel coordinates for placing the HTML element. ",[7780,58046],{},[1685,58048,57903,58049,57906],{},[1681,58050,10558],{},[931,58052,58053],{},[1120,58054,58057,58058],{"href":58055,"rel":58056},"https://github.com/Tresjs/cientos/blob/main/src/core/misc/html/utils.ts#L9-L19",[1124],"Default ",[594,58059,58026],{},[913,58061,58062,58066,58095],{},[931,58063,58064],{},[1681,58065,53236],{},[931,58067,58068,58069,58071,58072,58074,58075,58078,58079,54676,58081,58084,58085,58071,58087,58090,58091,58094],{},"Enables occlusion. Possible values: ",[7780,58070],{},"- ",[594,58073,941],{}," → Occlusion against ",[1685,58076,58077],{},"all"," scene objects ",[7780,58080],{},[594,58082,58083],{},"Ref\u003CTresObject3D>[]"," → Occlusion is enabled only against the specified objects. ",[7780,58086],{},[594,58088,58089],{},"'blending'"," → Uses a ",[1685,58092,58093],{},"blending-based"," occlusion method (CSS-like depth blending).",[931,58096],{},[913,58098,58099,58103,58109],{},[931,58100,58101],{},[1681,58102,5325],{},[931,58104,58105,58106,58108],{},"Custom ",[594,58107,5325],{}," to be used.",[931,58110,58111],{},[1120,58112,58115],{"href":58113,"rel":58114},"https://threejs.org/docs/?q=geometry#api/en/geometries/PlaneGeometry",[1124],[594,58116,31637],{},[913,58118,58119,58123,58148],{},[931,58120,58121],{},[1681,58122,5393],{},[931,58124,58125,3263,58131,3263,58133,58139,58140,3263,58142],{},[1681,58126,58127,58128,58130],{},"Custom shader ",[1685,58129,5393],{}," used for the occlusion mesh.",[7780,58132],{},[1681,58134,58135,58136,58138],{},"Only applies when ",[594,58137,55787],{}," is enabled"," (an occlusion mesh is created). ",[7780,58141],{},[1685,58143,58144,58145,58147],{},"Ignored in raycast occlusion modes (",[594,58146,941],{},", object refs).",[931,58149],{},[913,58151,58152,58157,58178],{},[931,58153,58154],{},[1681,58155,58156],{},"transparentMaterial",[931,58158,58159,3263,58165,3263,58167,3263,58172,3263,58174],{},[1681,58160,58161,58162,58164],{},"Enables ",[1685,58163,10096],{}," rendering for the occlusion material.",[7780,58166],{},[1681,58168,58135,58169,58171],{},[594,58170,55787],{}," creates an occlusion mesh.",[7780,58173],{},[1685,58175,58144,58176,58147],{},[594,58177,941],{},[931,58179,58180],{},[594,58181,951],{},[480,58183,12953],{"id":12952},[907,58185,58186,58194],{},[910,58187,58188],{},[913,58189,58190,58192],{},[916,58191,5969],{},[916,58193,921],{},[926,58195,58196],{},[913,58197,58198,58201],{},[931,58199,58200],{},"onOcclude",[931,58202,58203],{},"Called when the occlusion state changes.",[480,58205,58207],{"id":58206},"exposed-properties","Exposed properties",[907,58209,58210,58220],{},[910,58211,58212],{},[913,58213,58214,58216,58218],{},[916,58215,6176],{},[916,58217,6179],{},[916,58219,921],{},[926,58221,58222,58243,58264],{},[913,58223,58224,58228,58233],{},[931,58225,58226],{},[1681,58227,25702],{},[931,58229,58230],{},[594,58231,58232],{},"Ref\u003CTresObject3D | null>",[931,58234,58235,58236,58240,58241,1126],{},"Reference to the root ",[1681,58237,58238],{},[594,58239,5833],{}," used by ",[594,58242,52756],{},[913,58244,58245,58250,58255],{},[931,58246,58247],{},[1681,58248,58249],{},"isVisible",[931,58251,58252],{},[594,58253,58254],{},"Ref\u003Cboolean>",[931,58256,58257,58258,5823,58261,1126],{},"Reactive value that indicates whether the HTML content is ",[1681,58259,58260],{},"currently visible",[1681,58262,58263],{},"occluded",[913,58265,58266,58271,58275],{},[931,58267,58268],{},[1681,58269,58270],{},"occlusionMesh",[931,58272,58273],{},[594,58274,58232],{},[931,58276,58277,58278,58281,58282,6093,58284,58286],{},"Reference to the ",[1681,58279,58280],{},"occlusion mesh"," created when ",[594,58283,55787],{},[1681,58285,15365],{},". Used internally for geometry-based occlusion.",[480,58288,6469],{"id":6468},[2261,58290,58291,58324,58341,58396,58414],{},[2264,58292,58293,58294,58299,58300,58302,58303,5823,58306,58309,58310,58312,58313,58316,58317,58320,58321,58323],{},"✨ When using ",[1681,58295,58296],{},[594,58297,58298],{},"\u003CHtml occlude>",", if the ",[594,58301,52756],{}," component is ",[1681,58304,58305],{},"overlapping",[1681,58307,58308],{},"inside a 3D object",", it will be considered ",[1681,58311,58263],{}," and therefore ",[1681,58314,58315],{},"hidden",". To avoid this, ",[1681,58318,58319],{},"adjust the position"," of the ",[594,58322,52756],{}," component in your scene.",[2264,58325,58326,58327,58332,58333,58336,58337,58340],{},"🎨 When using ",[1681,58328,58329],{},[594,58330,58331],{},"\u003CHtml occlude=\"blending\">",", the HTML content is no longer ",[1681,58334,58335],{},"selectable"," because it is rendered ",[1681,58338,58339],{},"behind the canvas",". This is required to achieve the blending effect.",[2264,58342,58343,58344,58346,58347,58349,58350],{},"⚙️ When using a ",[1681,58345,55882],{}," with occlusion in ",[594,58348,48661],{}," mode, there are a few important requirements to ensure the HTML content renders correctly ⬇️",[5520,58351,5522,58352,58355],{},[5524,58353,58354],{},"See more information",[12816,58356,58357,58368,58376,58383],{},[2264,58358,58359,58360,3143,58362,58364,58365,1126],{},"If you provide your own material, it must be ",[1681,58361,10096],{},[594,58363,3131],{},") with an ",[1681,58366,58367],{},"opacity \u003C 1",[2264,58369,58370,58371,58375],{},"If you are not providing a custom material, enable ",[1681,58372,58373],{},[594,58374,58156],{}," so the internal shader becomes transparent.",[2264,58377,58378,58379,58382],{},"The occlusion mesh requires a ",[1681,58380,58381],{},"fully transparent canvas background","; otherwise, thin borders or halo artifacts may appear.",[2264,58384,58385,58386,15155,58389,1479,58391,58393,58394,1126],{},"To compensate for the transparent canvas, you may ",[1681,58387,58388],{},"reapply your previous clear-color as a CSS background",[594,58390,44203],{},[594,58392,5016],{},", or a wrapper ",[594,58395,4259],{},[2264,58397,58398,58399,58403,58404,58406,58407,58409,58410,58413],{},"🔶 When using ",[1681,58400,58401],{},[594,58402,58156],{},", overlapping ",[594,58405,52756],{}," elements (especially multiple ",[594,58408,55787],{}," instances) may cause ",[1681,58411,58412],{},"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.",[2264,58415,58416,58417,58419,58420,58422,58423],{},"🔵 To avoid thin border artifacts when using ",[594,58418,55787],{},", make sure your ",[594,58421,3266],{}," is fully transparent:",[602,58424,58426],{"className":604,"code":58425,"language":609,"meta":552,"style":552},"\u003CTresCanvas :alpha=\"true\" :clearAlpha=\"0\" />\n",[594,58427,58428],{"__ignoreMap":552},[613,58429,58430,58432,58434,58436,58438,58440,58442,58444,58446,58448,58451,58453,58455,58457,58459],{"class":615,"line":553},[613,58431,619],{"class":618},[613,58433,737],{"class":622},[613,58435,789],{"class":618},[613,58437,44897],{"class":626},[613,58439,633],{"class":618},[613,58441,636],{"class":618},[613,58443,941],{"class":4536},[613,58445,636],{"class":618},[613,58447,789],{"class":618},[613,58449,58450],{"class":626},"clearAlpha",[613,58452,633],{"class":618},[613,58454,636],{"class":618},[613,58456,945],{"class":799},[613,58458,636],{"class":618},[613,58460,763],{"class":618},[907,58462,58463,58473],{},[910,58464,58465],{},[913,58466,58467,58469,58471],{},[916,58468,918],{},[916,58470,921],{},[916,58472,924],{},[926,58474,58475,58488,58499,58512,58528,58543,58554,58567,58578,58591,58604,58617,58638,58653],{},[913,58476,58477,58481,58484],{},[931,58478,58479],{},[1681,58480,4896],{},[931,58482,58483],{},"Wrapping html element.",[931,58485,58486],{},[594,58487,57853],{},[913,58489,58490,58494,58497],{},[931,58491,58492],{},[1681,58493,57860],{},[931,58495,58496],{},"The className of the wrapping element.",[931,58498],{},[913,58500,58501,58505,58508],{},[931,58502,58503],{},[1681,58504,57875],{},[931,58506,58507],{},"Project content behind the canvas.",[931,58509,58510],{},[594,58511,951],{},[913,58513,58514,58518,58524],{},[931,58515,58516],{},[1681,58517,44736],{},[931,58519,58520,58521],{},"Adds a -50%/-50% CSS transform. ",[613,58522,58523],{},"Ignored in transform mode",[931,58525,58526],{},[594,58527,951],{},[913,58529,58530,58534,58539],{},[931,58531,58532],{},[1681,58533,57917],{},[931,58535,58536,58537],{},"Aligns to the upper-left corner, fills the screen. ",[613,58538,58523],{},[931,58540,58541],{},[594,58542,951],{},[913,58544,58545,58549,58552],{},[931,58546,58547],{},[1681,58548,57937],{},[931,58550,58551],{},"Children will be scaled by this factor, and also by distance to a PerspectiveCamera / zoom by an OrthographicCamera.",[931,58553],{},[913,58555,58556,58560,58563],{},[931,58557,58558],{},[1681,58559,57954],{},[931,58561,58562],{},"Z-order range.",[931,58564,58565],{},[594,58566,57965],{},[913,58568,58569,58573,58576],{},[931,58570,58571],{},[1681,58572,57972],{},[931,58574,58575],{},"Reference to target container.",[931,58577],{},[913,58579,58580,58584,58587],{},[931,58581,58582],{},[1681,58583,10558],{},[931,58585,58586],{},"If true, applies matrix3d transformations.",[931,58588,58589],{},[594,58590,951],{},[913,58592,58593,58597,58600],{},[931,58594,58595],{},[1681,58596,58003],{},[931,58598,58599],{},"Renders as sprite, but only in transform mode.",[931,58601,58602],{},[594,58603,951],{},[913,58605,58606,58610,58615],{},[931,58607,58608],{},[1681,58609,58026],{},[931,58611,58612,58613],{},"Override default positioning function. ",[613,58614,58523],{},[931,58616],{},[913,58618,58619,58623,58636],{},[931,58620,58621],{},[1681,58622,53236],{},[931,58624,58625,58626,1479,58628,1479,58630,1713,58633,58635],{},"Can be ",[594,58627,941],{},[594,58629,58083],{},[594,58631,58632],{},"'raycast'",[594,58634,58089],{},". True occludes the entire scene.",[931,58637],{},[913,58639,58640,58644,58649],{},[931,58641,58642],{},[1681,58643,5325],{},[931,58645,58105,58646,58648],{},[594,58647,5325],{}," to be use",[931,58650,58651],{},[594,58652,31637],{},[913,58654,58655,58659,58663],{},[931,58656,58657],{},[1681,58658,5393],{},[931,58660,58127,58661,58648],{},[594,58662,5393],{},[931,58664],{},[480,58666,12953],{"id":58667},"events-1",[907,58669,58670,58678],{},[910,58671,58672],{},[913,58673,58674,58676],{},[916,58675,5969],{},[916,58677,921],{},[926,58679,58680],{},[913,58681,58682,58684],{},[931,58683,58200],{},[931,58685,58203],{},[1307,58687,58688],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":552,"searchDepth":553,"depth":554,"links":58690},[58691,58692,58697,58698,58703,58704,58705,58706,58707],{"id":600,"depth":554,"text":15},{"id":53229,"depth":554,"text":53230,"children":58693},[58694,58695,58696],{"id":53419,"depth":684,"text":53420},{"id":53582,"depth":684,"text":53583},{"id":53843,"depth":684,"text":53844},{"id":44539,"depth":554,"text":44540},{"id":55932,"depth":554,"text":58699,"children":58700},"Using \u003CTransition>",[58701],{"id":57589,"depth":684,"text":58702},"Using iframes",{"id":901,"depth":554,"text":902},{"id":12952,"depth":554,"text":12953},{"id":58206,"depth":554,"text":58207},{"id":6468,"depth":554,"text":6469},{"id":58667,"depth":554,"text":12953},"Allows you put DOM elements in your Tres.js scene.",{},{"title":417,"description":58708},"ywp4dBumrlkuSeTPICaWKzd__5F5_TaWhwF0rVH0VWc",{"id":58713,"title":421,"body":58714,"description":59330,"extension":567,"links":568,"meta":59331,"navigation":570,"path":422,"seo":59332,"stem":423,"__hash__":59333},"docs/2.api/9.objects/image.md",{"type":477,"value":58715,"toc":59325},[58716,58721,58727,58729,58923,58925,58932,59140,59142,59165,59323],[584,58717,58718],{},[58719,58720],"objects-image",{},[590,58722,58723,58726],{},[594,58724,58725],{},"\u003CImage />"," is a shader-based component that optionally loads then displays an image texture on a default plane or on your custom geometry.",[480,58728,15],{"id":600},[602,58730,58733],{"className":604,"code":58731,"highlights":58732,"language":609,"meta":552,"style":552},"\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",[684,776,781,807],[594,58734,58735,58755,58773,58793,58801,58805,58813,58821,58853,58857,58865,58880,58903,58907,58915],{"__ignoreMap":552},[613,58736,58737,58739,58741,58743,58745,58747,58749,58751,58753],{"class":615,"line":553},[613,58738,619],{"class":618},[613,58740,623],{"class":622},[613,58742,627],{"class":626},[613,58744,630],{"class":626},[613,58746,633],{"class":618},[613,58748,636],{"class":618},[613,58750,640],{"class":639},[613,58752,636],{"class":618},[613,58754,645],{"class":618},[613,58756,58757,58759,58761,58763,58765,58767,58769,58771],{"class":615,"line":554},[613,58758,653],{"class":652},[613,58760,656],{"class":618},[613,58762,691],{"class":659},[613,58764,669],{"class":618},[613,58766,672],{"class":652},[613,58768,675],{"class":618},[613,58770,700],{"class":639},[613,58772,681],{"class":618},[613,58774,58776,58778,58780,58783,58785,58787,58789,58791],{"class":58775,"line":684},[615,649],[613,58777,653],{"class":652},[613,58779,656],{"class":618},[613,58781,58782],{"class":659}," Image",[613,58784,669],{"class":618},[613,58786,672],{"class":652},[613,58788,675],{"class":618},[613,58790,678],{"class":639},[613,58792,681],{"class":618},[613,58794,58795,58797,58799],{"class":615,"line":705},[613,58796,708],{"class":618},[613,58798,623],{"class":622},[613,58800,645],{"class":618},[613,58802,58803],{"class":615,"line":715},[613,58804,718],{"emptyLinePlaceholder":570},[613,58806,58807,58809,58811],{"class":615,"line":721},[613,58808,619],{"class":618},[613,58810,726],{"class":622},[613,58812,645],{"class":618},[613,58814,58815,58817,58819],{"class":615,"line":731},[613,58816,734],{"class":618},[613,58818,737],{"class":622},[613,58820,645],{"class":618},[613,58822,58823,58825,58827,58829,58831,58833,58835,58837,58839,58841,58843,58845,58847,58849,58851],{"class":615,"line":754},[613,58824,757],{"class":618},[613,58826,760],{"class":622},[613,58828,789],{"class":618},[613,58830,1467],{"class":626},[613,58832,633],{"class":618},[613,58834,636],{"class":618},[613,58836,1474],{"class":618},[613,58838,945],{"class":799},[613,58840,1479],{"class":618},[613,58842,945],{"class":799},[613,58844,1479],{"class":618},[613,58846,7668],{"class":799},[613,58848,1489],{"class":618},[613,58850,636],{"class":618},[613,58852,763],{"class":618},[613,58854,58855],{"class":615,"line":766},[613,58856,718],{"emptyLinePlaceholder":570},[613,58858,58860,58862],{"class":58859,"line":776},[615,649],[613,58861,757],{"class":618},[613,58863,58864],{"class":622},"Image\n",[613,58866,58868,58871,58873,58875,58878],{"class":58867,"line":781},[615,649],[613,58869,58870],{"class":626}," url",[613,58872,633],{"class":618},[613,58874,636],{"class":618},[613,58876,58877],{"class":639},"https://upload.wikimedia.org/wikipedia/commons/f/f0/Cyanistes_caeruleus_Oulu_20150516.JPG",[613,58879,3200],{"class":618},[613,58881,58883,58885,58887,58889,58891,58893,58895,58897,58899,58901],{"class":58882,"line":807},[615,649],[613,58884,10907],{"class":618},[613,58886,792],{"class":626},[613,58888,633],{"class":618},[613,58890,636],{"class":618},[613,58892,1474],{"class":618},[613,58894,800],{"class":799},[613,58896,1479],{"class":618},[613,58898,800],{"class":799},[613,58900,1489],{"class":618},[613,58902,3200],{"class":618},[613,58904,58905],{"class":615,"line":607},[613,58906,16014],{"class":618},[613,58908,58909,58911,58913],{"class":615,"line":830},[613,58910,885],{"class":618},[613,58912,737],{"class":622},[613,58914,645],{"class":618},[613,58916,58917,58919,58921],{"class":615,"line":841},[613,58918,708],{"class":618},[613,58920,726],{"class":622},[613,58922,645],{"class":618},[480,58924,902],{"id":901},[3268,58926,58927],{},[590,58928,58929,58931],{},[594,58930,58725],{}," is a THREE.Mesh and most Mesh attributes can be used as props on the component.",[907,58933,58934,58944],{},[910,58935,58936],{},[913,58937,58938,58940,58942],{},[916,58939,918],{"align":977},[916,58941,921],{"align":977},[916,58943,924],{},[926,58945,58946,58959,58975,58988,59002,59018,59032,59050,59068,59083,59099,59117,59128],{},[913,58947,58948,58952,58955],{},[931,58949,58950],{"align":977},[594,58951,28505],{},[931,58953,58954],{"align":977},"Number of divisions in the default geometry.",[931,58956,58957],{},[594,58958,1901],{},[913,58960,58961,58965,58971],{},[931,58962,58963],{"align":977},[594,58964,792],{},[931,58966,58967,58968],{"align":977},"Scale of the geometry. ",[594,58969,58970],{},"number | [number, number]",[931,58972,58973],{},[594,58974,1901],{},[913,58976,58977,58981,58984],{},[931,58978,58979],{"align":977},[594,58980,7772],{},[931,58982,58983],{"align":977},"Color multiplied into the image texture.",[931,58985,58986],{},[594,58987,28690],{},[913,58989,58990,58995,58998],{},[931,58991,58992],{"align":977},[594,58993,58994],{},"zoom",[931,58996,58997],{"align":977},"Shrinks or enlarges the image texture.",[931,58999,59000],{},[594,59001,1901],{},[913,59003,59004,59008,59014],{},[931,59005,59006],{"align":977},[594,59007,41123],{},[931,59009,59010,59011,59013],{"align":977},"Border radius applied to the image texture. (Intended for rectangular geometries. Use with ",[594,59012,10096],{},".)",[931,59015,59016],{},[594,59017,945],{},[913,59019,59020,59025,59028],{},[931,59021,59022],{"align":977},[594,59023,59024],{},"grayscale",[931,59026,59027],{"align":977},"Power of grayscale effect. 0 is off. 1 is full grayscale.",[931,59029,59030],{},[594,59031,945],{},[913,59033,59034,59038,59046],{},[931,59035,59036],{"align":977},[594,59037,37663],{},[931,59039,59040,59041],{"align":977},"Whether this material is tone mapped according to the renderers toneMapping settings. ",[1120,59042,59045],{"href":59043,"rel":59044},"https://threejs.org/docs/?q=material#api/en/materials/Material.toneMapped",[1124],"See THREE.material.tonemapped",[931,59047,59048],{},[594,59049,945],{},[913,59051,59052,59056,59064],{},[931,59053,59054],{"align":977},[594,59055,10096],{},[931,59057,59058,59059],{"align":977},"Whether the image material should be transparent. ",[1120,59060,59063],{"href":59061,"rel":59062},"https://threejs.org/docs/?q=material#api/en/materials/Material.transparent",[1124],"See THREE.material.transparent",[931,59065,59066],{},[594,59067,951],{},[913,59069,59070,59074,59079],{},[931,59071,59072],{"align":977},[594,59073,10096],{},[931,59075,59058,59076],{"align":977},[1120,59077,59063],{"href":59061,"rel":59078},[1124],[931,59080,59081],{},[594,59082,951],{},[913,59084,59085,59089,59095],{},[931,59086,59087],{"align":977},[594,59088,10084],{},[931,59090,59091,59092],{"align":977},"Opacity of the image material. ",[1120,59093,59063],{"href":59061,"rel":59094},[1124],[931,59096,59097],{},[594,59098,1901],{},[913,59100,59101,59105,59113],{},[931,59102,59103],{"align":977},[594,59104,25130],{},[931,59106,59107,59108],{"align":977},"THREE.Side of the image material. ",[1120,59109,59112],{"href":59110,"rel":59111},"https://threejs.org/docs/?q=material#api/en/materials/Material.side",[1124],"See THREE.material.side",[931,59114,59115],{},[594,59116,26355],{},[913,59118,59119,59123,59126],{},[931,59120,59121],{"align":977},[594,59122,2777],{},[931,59124,59125],{"align":977},"Image texture to display on the geometry.",[931,59127],{},[913,59129,59130,59135,59138],{},[931,59131,59132],{"align":977},[594,59133,59134],{},"url",[931,59136,59137],{"align":977},"Image URL to load and display on the geometry.",[931,59139],{},[480,59141,6469],{"id":6468},[590,59143,59144,59145,59147,59148,59151,59152,59154,59155,59158,59159,5823,59162,5787],{},"By default, images loaded via the ",[594,59146,59134],{}," prop use the renderer’s output color space. For advanced control, pass a ",[594,59149,59150],{},"THREE.Texture"," via the ",[594,59153,2777],{}," prop and set its ",[594,59156,59157],{},"colorSpace"," (e.g., ",[594,59160,59161],{},"THREE.SRGBColorSpace",[594,59163,59164],{},"THREE.LinearSRGBColorSpace",[602,59166,59168],{"className":604,"code":59167,"language":609,"meta":552,"style":552},"\u003Cscript setup>\nimport { useTexture } from '@tresjs/cientos'\nimport { SRGBColorSpace } from 'three'\nconst { state } = useTexture(URL)\nwatch(state, (texture) => {\n texture.colorSpace = SRGBColorSpace // assign a custom color space\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003CImage :texture=\"texture\" />\n\u003C/template>\n",[594,59169,59170,59180,59198,59216,59234,59253,59269,59275,59283,59287,59295,59315],{"__ignoreMap":552},[613,59171,59172,59174,59176,59178],{"class":615,"line":553},[613,59173,619],{"class":618},[613,59175,623],{"class":622},[613,59177,627],{"class":626},[613,59179,645],{"class":618},[613,59181,59182,59184,59186,59188,59190,59192,59194,59196],{"class":615,"line":554},[613,59183,653],{"class":652},[613,59185,656],{"class":618},[613,59187,2407],{"class":659},[613,59189,669],{"class":618},[613,59191,672],{"class":652},[613,59193,675],{"class":618},[613,59195,678],{"class":639},[613,59197,681],{"class":618},[613,59199,59200,59202,59204,59206,59208,59210,59212,59214],{"class":615,"line":684},[613,59201,653],{"class":652},[613,59203,656],{"class":618},[613,59205,43187],{"class":659},[613,59207,669],{"class":618},[613,59209,672],{"class":652},[613,59211,675],{"class":618},[613,59213,4785],{"class":639},[613,59215,681],{"class":618},[613,59217,59218,59220,59222,59225,59227,59229,59231],{"class":615,"line":705},[613,59219,2463],{"class":626},[613,59221,656],{"class":618},[613,59223,59224],{"class":659}," state ",[613,59226,2476],{"class":618},[613,59228,2479],{"class":618},[613,59230,2407],{"class":2482},[613,59232,59233],{"class":659},"(URL)\n",[613,59235,59236,59238,59241,59243,59245,59247,59249,59251],{"class":615,"line":715},[613,59237,10705],{"class":2482},[613,59239,59240],{"class":659},"(state",[613,59242,663],{"class":618},[613,59244,3143],{"class":618},[613,59246,2777],{"class":7049},[613,59248,3409],{"class":618},[613,59250,3746],{"class":626},[613,59252,1184],{"class":618},[613,59254,59255,59258,59260,59262,59264,59266],{"class":615,"line":721},[613,59256,59257],{"class":659}," texture",[613,59259,1126],{"class":618},[613,59261,59157],{"class":659},[613,59263,2479],{"class":618},[613,59265,43187],{"class":659},[613,59267,59268],{"class":1189}," // assign a custom color space\n",[613,59270,59271,59273],{"class":615,"line":731},[613,59272,2476],{"class":618},[613,59274,2496],{"class":659},[613,59276,59277,59279,59281],{"class":615,"line":754},[613,59278,708],{"class":618},[613,59280,623],{"class":622},[613,59282,645],{"class":618},[613,59284,59285],{"class":615,"line":766},[613,59286,718],{"emptyLinePlaceholder":570},[613,59288,59289,59291,59293],{"class":615,"line":776},[613,59290,619],{"class":618},[613,59292,726],{"class":622},[613,59294,645],{"class":618},[613,59296,59297,59299,59301,59303,59305,59307,59309,59311,59313],{"class":615,"line":781},[613,59298,734],{"class":618},[613,59300,421],{"class":622},[613,59302,789],{"class":618},[613,59304,2777],{"class":626},[613,59306,633],{"class":618},[613,59308,636],{"class":618},[613,59310,2777],{"class":659},[613,59312,636],{"class":618},[613,59314,763],{"class":618},[613,59316,59317,59319,59321],{"class":615,"line":807},[613,59318,708],{"class":618},[613,59320,726],{"class":622},[613,59322,645],{"class":618},[1307,59324,25886],{},{"title":552,"searchDepth":553,"depth":554,"links":59326},[59327,59328,59329],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},{"id":6468,"depth":554,"text":6469},"Display image textures with shader-based effects.",{},{"title":421,"description":59330},"jEAPHxilh9_Gg2oZg9-kp8JsJ1tSjkYRBYlGbuY9YbM",{"id":59335,"title":425,"body":59336,"description":60171,"extension":567,"links":568,"meta":60172,"navigation":570,"path":426,"seo":60173,"stem":427,"__hash__":60174},"docs/2.api/9.objects/marching-cubes.md",{"type":477,"value":59337,"toc":60165},[59338,59343,59354,59357,59382,59384,59978,59980,60050,60054,60099,60103,60162],[584,59339,59340],{},[59341,59342],"objects-marching-cubes",{},[590,59344,59345,59348,59349,1126],{},[594,59346,59347],{},"\u003CMarchingCubes />"," is a wrapper around ",[1120,59350,59353],{"href":59351,"rel":59352},"https://threejs.org/examples/#webgl_marchingcubes",[1124],"THREE's Marching Cubes",[590,59355,59356],{},"It includes 3 components:",[2261,59358,59359,59372,59377],{},[2264,59360,59361,59363,59364,59367,59368,59371],{},[594,59362,59347],{}," – container element for ",[594,59365,59366],{},"\u003CMarchingCube />","s and ",[594,59369,59370],{},"\u003CMarchingPlane />","s",[2264,59373,59374,59376],{},[594,59375,59366],{}," - an individual metaball",[2264,59378,59379,59381],{},[594,59380,59370],{}," – optional bounding plane that interacts with the metaballs",[480,59383,15],{"id":600},[602,59385,59388],{"className":604,"code":59386,"highlights":59387,"language":609,"meta":552,"style":552},"\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",[554,841,852,862,608,882,892,2671,2680,2714],[594,59389,59390,59410,59444,59462,59485,59489,59522,59581,59589,59593,59601,59633,59641,59649,59653,59688,59709,59717,59739,59754,59769,59774,59832,59841,59845,59853,59908,59962,59970],{"__ignoreMap":552},[613,59391,59392,59394,59396,59398,59400,59402,59404,59406,59408],{"class":615,"line":553},[613,59393,619],{"class":618},[613,59395,623],{"class":622},[613,59397,627],{"class":626},[613,59399,630],{"class":626},[613,59401,633],{"class":618},[613,59403,636],{"class":618},[613,59405,640],{"class":639},[613,59407,636],{"class":618},[613,59409,645],{"class":618},[613,59411,59413,59415,59417,59420,59422,59425,59427,59430,59432,59434,59436,59438,59440,59442],{"class":59412,"line":554},[615,649],[613,59414,653],{"class":652},[613,59416,656],{"class":618},[613,59418,59419],{"class":659}," MarchingCube",[613,59421,663],{"class":618},[613,59423,59424],{"class":659}," MarchingCubes",[613,59426,663],{"class":618},[613,59428,59429],{"class":659}," MarchingPlane",[613,59431,663],{"class":618},[613,59433,666],{"class":659},[613,59435,669],{"class":618},[613,59437,672],{"class":652},[613,59439,675],{"class":618},[613,59441,678],{"class":639},[613,59443,681],{"class":618},[613,59445,59446,59448,59450,59452,59454,59456,59458,59460],{"class":615,"line":684},[613,59447,653],{"class":652},[613,59449,656],{"class":618},[613,59451,691],{"class":659},[613,59453,669],{"class":618},[613,59455,672],{"class":652},[613,59457,675],{"class":618},[613,59459,700],{"class":639},[613,59461,681],{"class":618},[613,59463,59464,59466,59468,59471,59473,59475,59477,59479,59481,59483],{"class":615,"line":705},[613,59465,653],{"class":652},[613,59467,656],{"class":618},[613,59469,59470],{"class":659}," NoToneMapping",[613,59472,663],{"class":618},[613,59474,28351],{"class":659},[613,59476,669],{"class":618},[613,59478,672],{"class":652},[613,59480,675],{"class":618},[613,59482,4785],{"class":639},[613,59484,681],{"class":618},[613,59486,59487],{"class":615,"line":715},[613,59488,718],{"emptyLinePlaceholder":570},[613,59490,59491,59493,59496,59498,59500,59502,59505,59507,59509,59511,59513,59515,59517,59519],{"class":615,"line":721},[613,59492,2463],{"class":626},[613,59494,59495],{"class":659}," rand ",[613,59497,633],{"class":618},[613,59499,7291],{"class":618},[613,59501,3746],{"class":626},[613,59503,59504],{"class":659}," (Math",[613,59506,1126],{"class":618},[613,59508,56517],{"class":2482},[613,59510,7195],{"class":659},[613,59512,9324],{"class":618},[613,59514,2558],{"class":799},[613,59516,4893],{"class":659},[613,59518,21727],{"class":618},[613,59520,59521],{"class":799}," 1.25\n",[613,59523,59524,59526,59529,59531,59534,59536,59538,59540,59542,59545,59547,59550,59552,59554,59556,59558,59560,59562,59565,59567,59569,59572,59574,59576,59578],{"class":615,"line":731},[613,59525,2463],{"class":626},[613,59527,59528],{"class":659}," positions ",[613,59530,633],{"class":618},[613,59532,59533],{"class":659}," Array",[613,59535,1126],{"class":618},[613,59537,15867],{"class":2482},[613,59539,2485],{"class":659},[613,59541,39867],{"class":618},[613,59543,59544],{"class":622}," length",[613,59546,1198],{"class":618},[613,59548,59549],{"class":799}," 40",[613,59551,39880],{"class":618},[613,59553,7291],{"class":618},[613,59555,3746],{"class":626},[613,59557,8098],{"class":618},[613,59559,28351],{"class":2482},[613,59561,2485],{"class":659},[613,59563,59564],{"class":2482},"rand",[613,59566,3743],{"class":659},[613,59568,663],{"class":618},[613,59570,59571],{"class":2482}," rand",[613,59573,3743],{"class":659},[613,59575,663],{"class":618},[613,59577,59571],{"class":2482},[613,59579,59580],{"class":659},"()))\n",[613,59582,59583,59585,59587],{"class":615,"line":754},[613,59584,708],{"class":618},[613,59586,623],{"class":622},[613,59588,645],{"class":618},[613,59590,59591],{"class":615,"line":766},[613,59592,718],{"emptyLinePlaceholder":570},[613,59594,59595,59597,59599],{"class":615,"line":776},[613,59596,619],{"class":618},[613,59598,726],{"class":622},[613,59600,645],{"class":618},[613,59602,59603,59605,59607,59609,59611,59613,59615,59617,59619,59622,59624,59626,59629,59631],{"class":615,"line":781},[613,59604,734],{"class":618},[613,59606,737],{"class":622},[613,59608,740],{"class":626},[613,59610,633],{"class":618},[613,59612,636],{"class":618},[613,59614,747],{"class":639},[613,59616,636],{"class":618},[613,59618,789],{"class":618},[613,59620,59621],{"class":626},"tone-mapping",[613,59623,633],{"class":618},[613,59625,636],{"class":618},[613,59627,59628],{"class":659},"NoToneMapping",[613,59630,636],{"class":618},[613,59632,645],{"class":618},[613,59634,59635,59637,59639],{"class":615,"line":807},[613,59636,757],{"class":618},[613,59638,760],{"class":622},[613,59640,763],{"class":618},[613,59642,59643,59645,59647],{"class":615,"line":607},[613,59644,757],{"class":618},[613,59646,771],{"class":622},[613,59648,763],{"class":618},[613,59650,59651],{"class":615,"line":830},[613,59652,718],{"emptyLinePlaceholder":570},[613,59654,59656,59658,59660,59662,59664,59666,59668,59670,59672,59674,59677,59679,59681,59684,59686],{"class":59655,"line":841},[615,649],[613,59657,757],{"class":618},[613,59659,425],{"class":622},[613,59661,789],{"class":618},[613,59663,27086],{"class":626},[613,59665,633],{"class":618},[613,59667,636],{"class":618},[613,59669,33153],{"class":799},[613,59671,636],{"class":618},[613,59673,789],{"class":618},[613,59675,59676],{"class":626},"max-poly-count",[613,59678,633],{"class":618},[613,59680,636],{"class":618},[613,59682,59683],{"class":799},"40000",[613,59685,636],{"class":618},[613,59687,645],{"class":618},[613,59689,59691,59693,59696,59699,59701,59703,59705,59707],{"class":59690,"line":852},[615,649],[613,59692,833],{"class":618},[613,59694,59695],{"class":622},"MarchingPlane",[613,59697,59698],{"class":626}," plane-type",[613,59700,633],{"class":618},[613,59702,636],{"class":618},[613,59704,37909],{"class":639},[613,59706,636],{"class":618},[613,59708,763],{"class":618},[613,59710,59712,59714],{"class":59711,"line":862},[615,649],[613,59713,833],{"class":618},[613,59715,59716],{"class":622},"MarchingCube\n",[613,59718,59720,59722,59724,59726,59728,59730,59732,59735,59737],{"class":59719,"line":608},[615,649],[613,59721,8216],{"class":652},[613,59723,633],{"class":618},[613,59725,636],{"class":618},[613,59727,1467],{"class":659},[613,59729,1479],{"class":618},[613,59731,23865],{"class":659},[613,59733,59734],{"class":618}," of ",[613,59736,8236],{"class":659},[613,59738,3200],{"class":618},[613,59740,59742,59744,59746,59748,59750,59752],{"class":59741,"line":882},[615,649],[613,59743,8243],{"class":618},[613,59745,8246],{"class":626},[613,59747,633],{"class":618},[613,59749,636],{"class":618},[613,59751,23865],{"class":659},[613,59753,3200],{"class":618},[613,59755,59757,59759,59761,59763,59765,59767],{"class":59756,"line":892},[615,649],[613,59758,8243],{"class":618},[613,59760,1467],{"class":626},[613,59762,633],{"class":618},[613,59764,636],{"class":618},[613,59766,1467],{"class":659},[613,59768,3200],{"class":618},[613,59770,59772],{"class":59771,"line":2671},[615,649],[613,59773,8297],{"class":618},[613,59775,59777,59779,59781,59784,59786,59788,59791,59793,59795,59798,59800,59802,59804,59806,59808,59810,59812,59815,59817,59819,59822,59824,59826,59828,59830],{"class":59776,"line":2680},[615,649],[613,59778,833],{"class":618},[613,59780,9888],{"class":622},[613,59782,59783],{"class":626}," specular",[613,59785,633],{"class":618},[613,59787,636],{"class":618},[613,59789,59790],{"class":639},"#111111",[613,59792,636],{"class":618},[613,59794,789],{"class":618},[613,59796,59797],{"class":626},"shininess",[613,59799,633],{"class":618},[613,59801,636],{"class":618},[613,59803,26839],{"class":799},[613,59805,636],{"class":618},[613,59807,2749],{"class":626},[613,59809,633],{"class":618},[613,59811,636],{"class":618},[613,59813,59814],{"class":639},"#049ef4",[613,59816,636],{"class":618},[613,59818,789],{"class":618},[613,59820,59821],{"class":626},"reflectivity",[613,59823,633],{"class":618},[613,59825,636],{"class":618},[613,59827,1901],{"class":799},[613,59829,636],{"class":618},[613,59831,763],{"class":618},[613,59833,59835,59837,59839],{"class":59834,"line":2714},[615,649],[613,59836,875],{"class":618},[613,59838,425],{"class":622},[613,59840,645],{"class":618},[613,59842,59843],{"class":615,"line":2723},[613,59844,718],{"emptyLinePlaceholder":570},[613,59846,59847,59849,59851],{"class":615,"line":2732},[613,59848,757],{"class":618},[613,59850,786],{"class":622},[613,59852,763],{"class":618},[613,59854,59855,59857,59859,59861,59863,59865,59868,59870,59872,59874,59876,59878,59880,59882,59884,59886,59888,59890,59892,59894,59896,59898,59900,59902,59904,59906],{"class":615,"line":2741},[613,59856,757],{"class":618},[613,59858,8779],{"class":622},[613,59860,2749],{"class":626},[613,59862,633],{"class":618},[613,59864,636],{"class":618},[613,59866,59867],{"class":639},"#ffffff",[613,59869,636],{"class":618},[613,59871,789],{"class":618},[613,59873,1894],{"class":626},[613,59875,633],{"class":618},[613,59877,636],{"class":618},[613,59879,2705],{"class":799},[613,59881,636],{"class":618},[613,59883,789],{"class":618},[613,59885,1467],{"class":626},[613,59887,633],{"class":618},[613,59889,636],{"class":618},[613,59891,1474],{"class":618},[613,59893,945],{"class":799},[613,59895,1479],{"class":618},[613,59897,46154],{"class":799},[613,59899,1479],{"class":618},[613,59901,945],{"class":799},[613,59903,1489],{"class":618},[613,59905,636],{"class":618},[613,59907,763],{"class":618},[613,59909,59910,59912,59914,59916,59918,59920,59922,59924,59926,59928,59930,59932,59934,59936,59938,59940,59942,59944,59946,59948,59950,59952,59954,59956,59958,59960],{"class":615,"line":2763},[613,59911,757],{"class":618},[613,59913,8779],{"class":622},[613,59915,2749],{"class":626},[613,59917,633],{"class":618},[613,59919,636],{"class":618},[613,59921,59867],{"class":639},[613,59923,636],{"class":618},[613,59925,789],{"class":618},[613,59927,1894],{"class":626},[613,59929,633],{"class":618},[613,59931,636],{"class":618},[613,59933,2705],{"class":799},[613,59935,636],{"class":618},[613,59937,789],{"class":618},[613,59939,1467],{"class":626},[613,59941,633],{"class":618},[613,59943,636],{"class":618},[613,59945,1474],{"class":618},[613,59947,11242],{"class":799},[613,59949,1479],{"class":618},[613,59951,46154],{"class":799},[613,59953,1479],{"class":618},[613,59955,11242],{"class":799},[613,59957,1489],{"class":618},[613,59959,636],{"class":618},[613,59961,763],{"class":618},[613,59963,59964,59966,59968],{"class":615,"line":2814},[613,59965,885],{"class":618},[613,59967,737],{"class":622},[613,59969,645],{"class":618},[613,59971,59972,59974,59976],{"class":615,"line":2823},[613,59973,708],{"class":618},[613,59975,726],{"class":622},[613,59977,645],{"class":618},[480,59979,902],{"id":901},[907,59981,59982,59992],{},[910,59983,59984],{},[913,59985,59986,59988,59990],{},[916,59987,918],{"align":977},[916,59989,921],{"align":977},[916,59991,924],{},[926,59993,59994,60007,60022,60036],{},[913,59995,59996,60000,60003],{},[931,59997,59998],{"align":977},[594,59999,27086],{},[931,60001,60002],{"align":977},"Resolution of the marching cube field. Higher resolution produces smoother meshes at the cost of performance and memory.",[931,60004,60005],{},[594,60006,54855],{},[913,60008,60009,60014,60017],{},[931,60010,60011],{"align":977},[594,60012,60013],{},"maxPolyCount",[931,60015,60016],{"align":977},"Maximum number of polygons to generate.",[931,60018,60019],{},[594,60020,60021],{},"10000",[913,60023,60024,60029,60032],{},[931,60025,60026],{"align":977},[594,60027,60028],{},"enableUvs",[931,60030,60031],{"align":977},"Whether UVs are enabled.",[931,60033,60034],{},[594,60035,951],{},[913,60037,60038,60043,60046],{},[931,60039,60040],{"align":977},[594,60041,60042],{},"enableColors",[931,60044,60045],{"align":977},"Whether vertex colors are enabled.",[931,60047,60048],{},[594,60049,951],{},[480,60051,60053],{"id":60052},"marchingcube-props","MarchingCube Props",[907,60055,60056,60066],{},[910,60057,60058],{},[913,60059,60060,60062,60064],{},[916,60061,918],{"align":977},[916,60063,921],{"align":977},[916,60065,924],{},[926,60067,60068,60082],{},[913,60069,60070,60075,60078],{},[931,60071,60072],{"align":977},[594,60073,60074],{},"strength",[931,60076,60077],{"align":977},"How strongly this cube affects the marching cube field.",[931,60079,60080],{},[594,60081,1521],{},[913,60083,60084,60089,60095],{},[931,60085,60086],{"align":977},[594,60087,60088],{},"subtract",[931,60090,60091,60092,60094],{"align":977},"How quickly strength moves to ",[594,60093,945],{}," over distance.",[931,60096,60097],{},[594,60098,30387],{},[480,60100,60102],{"id":60101},"marchingplane-props","MarchingPlane Props",[907,60104,60105,60115],{},[910,60106,60107],{},[913,60108,60109,60111,60113],{},[916,60110,918],{"align":977},[916,60112,921],{"align":977},[916,60114,924],{},[926,60116,60117,60135,60148],{},[913,60118,60119,60124,60130],{},[931,60120,60121],{"align":977},[594,60122,60123],{},"planeType",[931,60125,60126,60127],{"align":977},"Which axis the plane appears on. ",[594,60128,60129],{},"'x' | 'y' | 'z'",[931,60131,60132],{},[594,60133,60134],{},"'x'",[913,60136,60137,60141,60144],{},[931,60138,60139],{"align":977},[594,60140,60074],{},[931,60142,60143],{"align":977},"How strongly this plane affects the marching cube field.",[931,60145,60146],{},[594,60147,1521],{},[913,60149,60150,60154,60158],{},[931,60151,60152],{"align":977},[594,60153,60088],{},[931,60155,60091,60156,60094],{"align":977},[594,60157,945],{},[931,60159,60160],{},[594,60161,30387],{},[1307,60163,60164],{},"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":552,"searchDepth":553,"depth":554,"links":60166},[60167,60168,60169,60170],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},{"id":60052,"depth":554,"text":60053},{"id":60101,"depth":554,"text":60102},"Create organic blob-like shapes using metaballs.",{},{"title":425,"description":60171},"dt9UUvCiy--PP6CSMtwwdcksel8iajosft8nxTQtolk",{"id":60176,"title":429,"body":60177,"description":61534,"extension":567,"links":568,"meta":61535,"navigation":570,"path":430,"seo":61536,"stem":431,"__hash__":61537},"docs/2.api/9.objects/reflector.md",{"type":477,"value":60178,"toc":61527},[60179,60184,60198,60200,60463,60465,60548,60556,60560,60570,61208,61211,61214,61218,61524],[584,60180,60181],{},[60182,60183],"objects-reflector",{},[590,60185,2843,60186,60188,60189,60194,60195,60197],{},[594,60187,7528],{}," package provides an abstraction of the ",[1120,60190,60193],{"href":60191,"rel":60192},"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 ",[594,60196,4431],{}," so all the default props can be passed as well:",[480,60199,15],{"id":600},[602,60201,60203],{"className":604,"code":60202,"language":609,"meta":552,"style":552},"\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",[594,60204,60205,60225,60244,60252,60256,60264,60277,60309,60317,60321,60329,60336,60370,60386,60399,60403,60431,60439,60447,60455],{"__ignoreMap":552},[613,60206,60207,60209,60211,60213,60215,60217,60219,60221,60223],{"class":615,"line":553},[613,60208,619],{"class":618},[613,60210,623],{"class":622},[613,60212,627],{"class":626},[613,60214,630],{"class":626},[613,60216,633],{"class":618},[613,60218,636],{"class":618},[613,60220,640],{"class":639},[613,60222,636],{"class":618},[613,60224,645],{"class":618},[613,60226,60227,60229,60231,60234,60236,60238,60240,60242],{"class":615,"line":554},[613,60228,653],{"class":652},[613,60230,656],{"class":618},[613,60232,60233],{"class":659}," Reflector",[613,60235,669],{"class":618},[613,60237,672],{"class":652},[613,60239,675],{"class":618},[613,60241,678],{"class":639},[613,60243,681],{"class":618},[613,60245,60246,60248,60250],{"class":615,"line":684},[613,60247,708],{"class":618},[613,60249,623],{"class":622},[613,60251,645],{"class":618},[613,60253,60254],{"class":615,"line":705},[613,60255,718],{"emptyLinePlaceholder":570},[613,60257,60258,60260,60262],{"class":615,"line":715},[613,60259,619],{"class":618},[613,60261,726],{"class":622},[613,60263,645],{"class":618},[613,60265,60266,60268,60270,60272,60275],{"class":615,"line":721},[613,60267,734],{"class":618},[613,60269,737],{"class":622},[613,60271,40908],{"class":626},[613,60273,60274],{"class":626}," alpha",[613,60276,645],{"class":618},[613,60278,60279,60281,60283,60285,60287,60289,60291,60293,60295,60297,60299,60301,60303,60305,60307],{"class":615,"line":731},[613,60280,757],{"class":618},[613,60282,760],{"class":622},[613,60284,789],{"class":618},[613,60286,1467],{"class":626},[613,60288,633],{"class":618},[613,60290,636],{"class":618},[613,60292,1474],{"class":618},[613,60294,945],{"class":799},[613,60296,1479],{"class":618},[613,60298,945],{"class":799},[613,60300,1479],{"class":618},[613,60302,2705],{"class":799},[613,60304,1489],{"class":618},[613,60306,636],{"class":618},[613,60308,763],{"class":618},[613,60310,60311,60313,60315],{"class":615,"line":754},[613,60312,757],{"class":618},[613,60314,771],{"class":622},[613,60316,763],{"class":618},[613,60318,60319],{"class":615,"line":766},[613,60320,718],{"emptyLinePlaceholder":570},[613,60322,60323,60325,60327],{"class":615,"line":776},[613,60324,757],{"class":618},[613,60326,20168],{"class":622},[613,60328,645],{"class":618},[613,60330,60331,60333],{"class":615,"line":781},[613,60332,833],{"class":618},[613,60334,60335],{"class":622},"Reflector\n",[613,60337,60338,60340,60342,60344,60346,60348,60350,60352,60354,60356,60358,60360,60362,60364,60366,60368],{"class":615,"line":807},[613,60339,8243],{"class":618},[613,60341,5839],{"class":626},[613,60343,633],{"class":618},[613,60345,636],{"class":618},[613,60347,3923],{"class":618},[613,60349,26743],{"class":659},[613,60351,1126],{"class":618},[613,60353,26748],{"class":659},[613,60355,54671],{"class":618},[613,60357,1521],{"class":799},[613,60359,1479],{"class":618},[613,60361,945],{"class":799},[613,60363,1479],{"class":618},[613,60365,945],{"class":799},[613,60367,1489],{"class":618},[613,60369,3200],{"class":618},[613,60371,60372,60374,60376,60378,60380,60382,60384],{"class":615,"line":607},[613,60373,8243],{"class":618},[613,60375,1976],{"class":626},[613,60377,633],{"class":618},[613,60379,636],{"class":618},[613,60381,9324],{"class":618},[613,60383,800],{"class":799},[613,60385,3200],{"class":618},[613,60387,60388,60390,60392,60394,60397],{"class":615,"line":830},[613,60389,26878],{"class":626},[613,60391,633],{"class":618},[613,60393,636],{"class":618},[613,60395,60396],{"class":639},"#fff",[613,60398,3200],{"class":618},[613,60400,60401],{"class":615,"line":841},[613,60402,53053],{"class":618},[613,60404,60405,60407,60409,60411,60413,60415,60417,60419,60421,60423,60425,60427,60429],{"class":615,"line":852},[613,60406,844],{"class":618},[613,60408,9263],{"class":622},[613,60410,789],{"class":618},[613,60412,1997],{"class":626},[613,60414,633],{"class":618},[613,60416,636],{"class":618},[613,60418,1474],{"class":618},[613,60420,1486],{"class":799},[613,60422,1479],{"class":618},[613,60424,1486],{"class":799},[613,60426,1489],{"class":618},[613,60428,636],{"class":618},[613,60430,763],{"class":618},[613,60432,60433,60435,60437],{"class":615,"line":862},[613,60434,865],{"class":618},[613,60436,429],{"class":622},[613,60438,645],{"class":618},[613,60440,60441,60443,60445],{"class":615,"line":608},[613,60442,875],{"class":618},[613,60444,20168],{"class":622},[613,60446,645],{"class":618},[613,60448,60449,60451,60453],{"class":615,"line":882},[613,60450,885],{"class":618},[613,60452,737],{"class":622},[613,60454,645],{"class":618},[613,60456,60457,60459,60461],{"class":615,"line":892},[613,60458,708],{"class":618},[613,60460,726],{"class":622},[613,60462,645],{"class":618},[480,60464,902],{"id":901},[907,60466,60467,60477],{},[910,60468,60469],{},[913,60470,60471,60473,60475],{},[916,60472,918],{"align":977},[916,60474,921],{"align":977},[916,60476,924],{},[926,60478,60479,60491,60502,60513,60524,60536],{},[913,60480,60481,60485,60488],{},[931,60482,60483],{"align":977},[1681,60484,7772],{},[931,60486,60487],{"align":977},"The base color that's combine with the mirror effect",[931,60489,60490],{},"'#333'",[913,60492,60493,60497,60500],{},[931,60494,60495],{"align":977},[1681,60496,44746],{},[931,60498,60499],{"align":977},"the width of the texture to render on the mirror",[931,60501,39202],{},[913,60503,60504,60508,60511],{},[931,60505,60506],{"align":977},[1681,60507,44763],{},[931,60509,60510],{"align":977},"the height of the texture to render on the mirror",[931,60512,39202],{},[913,60514,60515,60519,60522],{},[931,60516,60517],{"align":977},[1681,60518,44881],{},[931,60520,60521],{"align":977},"to use the clipBias property",[931,60523,945],{},[913,60525,60526,60531,60534],{},[931,60527,60528],{"align":977},[1681,60529,60530],{},"multisample",[931,60532,60533],{"align":977},"how many samplers will be render",[931,60535,3876],{},[913,60537,60538,60543,60545],{},[931,60539,60540],{"align":977},[1681,60541,60542],{},"shader",[931,60544,46726],{"align":977},[931,60546,60547],{},"Reflector.ReflectorShader",[3268,60549,60550],{},[590,60551,60552,60553,60555],{},"All the props except the ",[594,60554,7772],{},", are not reactive",[480,60557,60559],{"id":60558},"custom-mirror-effect","Custom mirror effect",[590,60561,60562,60563,1479,60565,1699,60567,60569],{},"You can provide your own shader by passing a full shader object with ",[594,60564,25018],{},[594,60566,24991],{},[594,60568,25008],{},". The example below adds animated circular ripples emanating from the center of the surface, while preserving the color tint:",[602,60571,60573],{"className":604,"code":60572,"language":609,"meta":552,"style":552},"\u003Cscript setup lang=\"ts\">\nimport { Reflector } from '@tresjs/cientos'\nimport { useLoop } from '@tresjs/core'\nimport { shallowRef } from 'vue'\n\nconst reflectorRef = shallowRef()\n\nconst customShader = {\n uniforms: {\n color: { value: null },\n tDiffuse: { value: null },\n textureMatrix: { value: null },\n time: { value: 0 },\n },\n vertexShader: /* glsl */`\n uniform mat4 textureMatrix;\n varying vec4 vUv;\n varying vec2 vPos;\n void main() {\n vUv = textureMatrix * vec4(position, 1.0);\n vPos = position.xy;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }`,\n fragmentShader: /* glsl */`\n uniform vec3 color;\n uniform sampler2D tDiffuse;\n uniform float time;\n varying vec4 vUv;\n varying vec2 vPos;\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 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 void main() {\n float dist = length(vPos);\n float wave = sin(dist * 6.0 - time * 4.0) * 0.02;\n vec2 dir = dist > 0.001 ? normalize(vPos) : vec2(0.0);\n vec4 distortedUv = vUv + vec4(dir * wave, 0.0, 0.0);\n vec4 base = texture2DProj(tDiffuse, distortedUv);\n gl_FragColor = vec4(blendOverlay(base.rgb, color), 1.0);\n #include \u003Ctonemapping_fragment>\n #include \u003Ccolorspace_fragment>\n }`,\n}\n\nconst { onBeforeRender } = useLoop()\nonBeforeRender(({ elapsed }) => {\n const uniforms = reflectorRef.value?.instance?.material?.uniforms\n if (uniforms?.time) { uniforms.time.value = elapsed }\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003CReflector\n ref=\"reflectorRef\"\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\u003C/template>\n",[594,60574,60575,60595,60613,60632,60650,60654,60667,60671,60682,60691,60707,60724,60741,60758,60762,60774,60779,60784,60789,60794,60799,60804,60809,60819,60830,60835,60840,60845,60849,60853,60858,60863,60868,60873,60878,60882,60886,60891,60896,60901,60906,60911,60916,60921,60926,60934,60938,60942,60959,60976,61005,61038,61044,61052,61056,61064,61070,61083,61117,61133,61145,61160,61164,61192,61200],{"__ignoreMap":552},[613,60576,60577,60579,60581,60583,60585,60587,60589,60591,60593],{"class":615,"line":553},[613,60578,619],{"class":618},[613,60580,623],{"class":622},[613,60582,627],{"class":626},[613,60584,630],{"class":626},[613,60586,633],{"class":618},[613,60588,636],{"class":618},[613,60590,640],{"class":639},[613,60592,636],{"class":618},[613,60594,645],{"class":618},[613,60596,60597,60599,60601,60603,60605,60607,60609,60611],{"class":615,"line":554},[613,60598,653],{"class":652},[613,60600,656],{"class":618},[613,60602,60233],{"class":659},[613,60604,669],{"class":618},[613,60606,672],{"class":652},[613,60608,675],{"class":618},[613,60610,678],{"class":639},[613,60612,681],{"class":618},[613,60614,60615,60617,60619,60622,60624,60626,60628,60630],{"class":615,"line":684},[613,60616,653],{"class":652},[613,60618,656],{"class":618},[613,60620,60621],{"class":659}," useLoop",[613,60623,669],{"class":618},[613,60625,672],{"class":652},[613,60627,675],{"class":618},[613,60629,700],{"class":639},[613,60631,681],{"class":618},[613,60633,60634,60636,60638,60640,60642,60644,60646,60648],{"class":615,"line":705},[613,60635,653],{"class":652},[613,60637,656],{"class":618},[613,60639,3567],{"class":659},[613,60641,669],{"class":618},[613,60643,672],{"class":652},[613,60645,675],{"class":618},[613,60647,609],{"class":639},[613,60649,681],{"class":618},[613,60651,60652],{"class":615,"line":715},[613,60653,718],{"emptyLinePlaceholder":570},[613,60655,60656,60658,60661,60663,60665],{"class":615,"line":721},[613,60657,2463],{"class":626},[613,60659,60660],{"class":659}," reflectorRef ",[613,60662,633],{"class":618},[613,60664,3567],{"class":2482},[613,60666,6745],{"class":659},[613,60668,60669],{"class":615,"line":731},[613,60670,718],{"emptyLinePlaceholder":570},[613,60672,60673,60675,60678,60680],{"class":615,"line":754},[613,60674,2463],{"class":626},[613,60676,60677],{"class":659}," customShader ",[613,60679,633],{"class":618},[613,60681,1184],{"class":618},[613,60683,60684,60687,60689],{"class":615,"line":766},[613,60685,60686],{"class":622}," uniforms",[613,60688,1198],{"class":618},[613,60690,1184],{"class":618},[613,60692,60693,60695,60697,60699,60701,60703,60705],{"class":615,"line":776},[613,60694,22844],{"class":622},[613,60696,1198],{"class":618},[613,60698,656],{"class":618},[613,60700,25677],{"class":622},[613,60702,1198],{"class":618},[613,60704,3717],{"class":618},[613,60706,7300],{"class":618},[613,60708,60709,60712,60714,60716,60718,60720,60722],{"class":615,"line":781},[613,60710,60711],{"class":622}," tDiffuse",[613,60713,1198],{"class":618},[613,60715,656],{"class":618},[613,60717,25677],{"class":622},[613,60719,1198],{"class":618},[613,60721,3717],{"class":618},[613,60723,7300],{"class":618},[613,60725,60726,60729,60731,60733,60735,60737,60739],{"class":615,"line":807},[613,60727,60728],{"class":622}," textureMatrix",[613,60730,1198],{"class":618},[613,60732,656],{"class":618},[613,60734,25677],{"class":622},[613,60736,1198],{"class":618},[613,60738,3717],{"class":618},[613,60740,7300],{"class":618},[613,60742,60743,60746,60748,60750,60752,60754,60756],{"class":615,"line":607},[613,60744,60745],{"class":622}," time",[613,60747,1198],{"class":618},[613,60749,656],{"class":618},[613,60751,25677],{"class":622},[613,60753,1198],{"class":618},[613,60755,2553],{"class":799},[613,60757,7300],{"class":618},[613,60759,60760],{"class":615,"line":830},[613,60761,2643],{"class":618},[613,60763,60764,60767,60769,60772],{"class":615,"line":841},[613,60765,60766],{"class":622}," vertexShader",[613,60768,1198],{"class":618},[613,60770,60771],{"class":1189}," /* glsl */",[613,60773,21306],{"class":618},[613,60775,60776],{"class":615,"line":852},[613,60777,60778],{"class":639}," uniform mat4 textureMatrix;\n",[613,60780,60781],{"class":615,"line":862},[613,60782,60783],{"class":639}," varying vec4 vUv;\n",[613,60785,60786],{"class":615,"line":608},[613,60787,60788],{"class":639}," varying vec2 vPos;\n",[613,60790,60791],{"class":615,"line":882},[613,60792,60793],{"class":639}," void main() {\n",[613,60795,60796],{"class":615,"line":892},[613,60797,60798],{"class":639}," vUv = textureMatrix * vec4(position, 1.0);\n",[613,60800,60801],{"class":615,"line":2671},[613,60802,60803],{"class":639}," vPos = position.xy;\n",[613,60805,60806],{"class":615,"line":2680},[613,60807,60808],{"class":639}," gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n",[613,60810,60811,60814,60817],{"class":615,"line":2714},[613,60812,60813],{"class":639}," }",[613,60815,60816],{"class":618},"`",[613,60818,2536],{"class":618},[613,60820,60821,60824,60826,60828],{"class":615,"line":2723},[613,60822,60823],{"class":622}," fragmentShader",[613,60825,1198],{"class":618},[613,60827,60771],{"class":1189},[613,60829,21306],{"class":618},[613,60831,60832],{"class":615,"line":2732},[613,60833,60834],{"class":639}," uniform vec3 color;\n",[613,60836,60837],{"class":615,"line":2741},[613,60838,60839],{"class":639}," uniform sampler2D tDiffuse;\n",[613,60841,60842],{"class":615,"line":2763},[613,60843,60844],{"class":639}," uniform float time;\n",[613,60846,60847],{"class":615,"line":2814},[613,60848,60783],{"class":639},[613,60850,60851],{"class":615,"line":2823},[613,60852,60788],{"class":639},[613,60854,60855],{"class":615,"line":2832},[613,60856,60857],{"class":639}," float blendOverlay(float base, float blend) {\n",[613,60859,60860],{"class":615,"line":4034},[613,60861,60862],{"class":639}," return(base \u003C 0.5 ? (2.0 * base * blend) : (1.0 - 2.0 * (1.0 - base) * (1.0 - blend)));\n",[613,60864,60865],{"class":615,"line":4078},[613,60866,60867],{"class":639}," }\n",[613,60869,60870],{"class":615,"line":4105},[613,60871,60872],{"class":639}," vec3 blendOverlay(vec3 base, vec3 blend) {\n",[613,60874,60875],{"class":615,"line":4124},[613,60876,60877],{"class":639}," return vec3(blendOverlay(base.r, blend.r), blendOverlay(base.g, blend.g), blendOverlay(base.b, blend.b));\n",[613,60879,60880],{"class":615,"line":4165},[613,60881,60867],{"class":639},[613,60883,60884],{"class":615,"line":4174},[613,60885,60793],{"class":639},[613,60887,60888],{"class":615,"line":4183},[613,60889,60890],{"class":639}," float dist = length(vPos);\n",[613,60892,60893],{"class":615,"line":19957},[613,60894,60895],{"class":639}," float wave = sin(dist * 6.0 - time * 4.0) * 0.02;\n",[613,60897,60898],{"class":615,"line":19972},[613,60899,60900],{"class":639}," vec2 dir = dist > 0.001 ? normalize(vPos) : vec2(0.0);\n",[613,60902,60903],{"class":615,"line":19987},[613,60904,60905],{"class":639}," vec4 distortedUv = vUv + vec4(dir * wave, 0.0, 0.0);\n",[613,60907,60908],{"class":615,"line":19992},[613,60909,60910],{"class":639}," vec4 base = texture2DProj(tDiffuse, distortedUv);\n",[613,60912,60913],{"class":615,"line":19999},[613,60914,60915],{"class":639}," gl_FragColor = vec4(blendOverlay(base.rgb, color), 1.0);\n",[613,60917,60918],{"class":615,"line":20004},[613,60919,60920],{"class":639}," #include \u003Ctonemapping_fragment>\n",[613,60922,60923],{"class":615,"line":20010},[613,60924,60925],{"class":639}," #include \u003Ccolorspace_fragment>\n",[613,60927,60928,60930,60932],{"class":615,"line":20031},[613,60929,60813],{"class":639},[613,60931,60816],{"class":618},[613,60933,2536],{"class":618},[613,60935,60936],{"class":615,"line":20037},[613,60937,1305],{"class":618},[613,60939,60940],{"class":615,"line":20044},[613,60941,718],{"emptyLinePlaceholder":570},[613,60943,60944,60946,60948,60951,60953,60955,60957],{"class":615,"line":20049},[613,60945,2463],{"class":626},[613,60947,656],{"class":618},[613,60949,60950],{"class":659}," onBeforeRender ",[613,60952,2476],{"class":618},[613,60954,2479],{"class":618},[613,60956,60621],{"class":2482},[613,60958,6745],{"class":659},[613,60960,60961,60964,60966,60968,60970,60972,60974],{"class":615,"line":20070},[613,60962,60963],{"class":2482},"onBeforeRender",[613,60965,2485],{"class":659},[613,60967,37855],{"class":618},[613,60969,37858],{"class":7049},[613,60971,37872],{"class":618},[613,60973,3746],{"class":626},[613,60975,1184],{"class":618},[613,60977,60978,60980,60983,60985,60988,60990,60992,60994,60996,60998,61000,61002],{"class":615,"line":20083},[613,60979,56425],{"class":626},[613,60981,60982],{"class":659}," uniforms",[613,60984,2479],{"class":618},[613,60986,60987],{"class":659}," reflectorRef",[613,60989,1126],{"class":618},[613,60991,3754],{"class":659},[613,60993,3757],{"class":618},[613,60995,25702],{"class":659},[613,60997,3757],{"class":618},[613,60999,5393],{"class":659},[613,61001,3757],{"class":618},[613,61003,61004],{"class":659},"uniforms\n",[613,61006,61007,61009,61011,61013,61015,61018,61020,61022,61024,61026,61028,61030,61032,61034,61036],{"class":615,"line":20109},[613,61008,19771],{"class":652},[613,61010,3143],{"class":622},[613,61012,25018],{"class":659},[613,61014,3757],{"class":618},[613,61016,61017],{"class":659},"time",[613,61019,4893],{"class":622},[613,61021,39867],{"class":618},[613,61023,60982],{"class":659},[613,61025,1126],{"class":618},[613,61027,61017],{"class":659},[613,61029,1126],{"class":618},[613,61031,3754],{"class":659},[613,61033,2479],{"class":618},[613,61035,37858],{"class":659},[613,61037,20808],{"class":618},[613,61039,61040,61042],{"class":615,"line":20114},[613,61041,2476],{"class":618},[613,61043,2496],{"class":659},[613,61045,61046,61048,61050],{"class":615,"line":20121},[613,61047,708],{"class":618},[613,61049,623],{"class":622},[613,61051,645],{"class":618},[613,61053,61054],{"class":615,"line":20130},[613,61055,718],{"emptyLinePlaceholder":570},[613,61057,61058,61060,61062],{"class":615,"line":20135},[613,61059,619],{"class":618},[613,61061,726],{"class":622},[613,61063,645],{"class":618},[613,61065,61066,61068],{"class":615,"line":20144},[613,61067,734],{"class":618},[613,61069,60335],{"class":622},[613,61071,61072,61074,61076,61078,61081],{"class":615,"line":20163},[613,61073,17006],{"class":626},[613,61075,633],{"class":618},[613,61077,636],{"class":618},[613,61079,61080],{"class":639},"reflectorRef",[613,61082,3200],{"class":618},[613,61084,61085,61087,61089,61091,61093,61095,61097,61099,61101,61103,61105,61107,61109,61111,61113,61115],{"class":615,"line":20173},[613,61086,5345],{"class":618},[613,61088,5839],{"class":626},[613,61090,633],{"class":618},[613,61092,636],{"class":618},[613,61094,3923],{"class":618},[613,61096,26743],{"class":659},[613,61098,1126],{"class":618},[613,61100,26748],{"class":659},[613,61102,54671],{"class":618},[613,61104,1521],{"class":799},[613,61106,1479],{"class":618},[613,61108,945],{"class":799},[613,61110,1479],{"class":618},[613,61112,945],{"class":799},[613,61114,1489],{"class":618},[613,61116,3200],{"class":618},[613,61118,61119,61121,61123,61125,61127,61129,61131],{"class":615,"line":20210},[613,61120,5345],{"class":618},[613,61122,1976],{"class":626},[613,61124,633],{"class":618},[613,61126,636],{"class":618},[613,61128,9324],{"class":618},[613,61130,800],{"class":799},[613,61132,3200],{"class":618},[613,61134,61135,61137,61139,61141,61143],{"class":615,"line":20219},[613,61136,22844],{"class":626},[613,61138,633],{"class":618},[613,61140,636],{"class":618},[613,61142,60396],{"class":639},[613,61144,3200],{"class":618},[613,61146,61147,61149,61151,61153,61155,61158],{"class":615,"line":20253},[613,61148,5345],{"class":618},[613,61150,60542],{"class":626},[613,61152,633],{"class":618},[613,61154,636],{"class":618},[613,61156,61157],{"class":659},"customShader",[613,61159,3200],{"class":618},[613,61161,61162],{"class":615,"line":20262},[613,61163,5368],{"class":618},[613,61165,61166,61168,61170,61172,61174,61176,61178,61180,61182,61184,61186,61188,61190],{"class":615,"line":20271},[613,61167,757],{"class":618},[613,61169,9263],{"class":622},[613,61171,789],{"class":618},[613,61173,1997],{"class":626},[613,61175,633],{"class":618},[613,61177,636],{"class":618},[613,61179,1474],{"class":618},[613,61181,1486],{"class":799},[613,61183,1479],{"class":618},[613,61185,1486],{"class":799},[613,61187,1489],{"class":618},[613,61189,636],{"class":618},[613,61191,763],{"class":618},[613,61193,61194,61196,61198],{"class":615,"line":20292},[613,61195,885],{"class":618},[613,61197,429],{"class":622},[613,61199,645],{"class":618},[613,61201,61202,61204,61206],{"class":615,"line":20350},[613,61203,708],{"class":618},[613,61205,726],{"class":622},[613,61207,645],{"class":618},[590,61209,61210],{},"The Reflector shader use the following configuration by default:",[590,61212,61213],{},"You can extend, modify or just play with them",[4191,61215,61217],{"id":61216},"default-shader","Default shader",[602,61219,61221],{"className":40322,"code":61220,"language":40324,"meta":552,"style":552},"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",[594,61222,61223,61234,61250,61258,61266,61276,61281,61289,61297,61301,61309,61317,61321,61325,61335,61340,61345,61349,61354,61359,61363,61368,61373,61378,61382,61387,61391,61400,61410,61415,61420,61424,61428,61433,61437,61442,61447,61451,61455,61460,61465,61469,61473,61477,61482,61486,61491,61496,61500,61505,61510,61516,61520],{"__ignoreMap":552},[613,61224,61225,61227,61230,61232],{"class":615,"line":553},[613,61226,2463],{"class":626},[613,61228,61229],{"class":659}," shader ",[613,61231,633],{"class":618},[613,61233,1184],{"class":618},[613,61235,61236,61239,61241,61243,61246,61248],{"class":615,"line":554},[613,61237,61238],{"class":622}," name",[613,61240,1198],{"class":618},[613,61242,675],{"class":618},[613,61244,61245],{"class":639},"ReflectorShader",[613,61247,2488],{"class":618},[613,61249,2536],{"class":618},[613,61251,61252,61254,61256],{"class":615,"line":684},[613,61253,60686],{"class":622},[613,61255,1198],{"class":618},[613,61257,1184],{"class":618},[613,61259,61260,61262,61264],{"class":615,"line":705},[613,61261,22844],{"class":622},[613,61263,1198],{"class":618},[613,61265,1184],{"class":618},[613,61267,61268,61271,61273],{"class":615,"line":715},[613,61269,61270],{"class":622}," value",[613,61272,1198],{"class":618},[613,61274,61275],{"class":618}," null\n",[613,61277,61278],{"class":615,"line":721},[613,61279,61280],{"class":618}," },\n",[613,61282,61283,61285,61287],{"class":615,"line":731},[613,61284,60711],{"class":622},[613,61286,1198],{"class":618},[613,61288,1184],{"class":618},[613,61290,61291,61293,61295],{"class":615,"line":754},[613,61292,61270],{"class":622},[613,61294,1198],{"class":618},[613,61296,61275],{"class":618},[613,61298,61299],{"class":615,"line":766},[613,61300,61280],{"class":618},[613,61302,61303,61305,61307],{"class":615,"line":776},[613,61304,60728],{"class":622},[613,61306,1198],{"class":618},[613,61308,1184],{"class":618},[613,61310,61311,61313,61315],{"class":615,"line":781},[613,61312,61270],{"class":622},[613,61314,1198],{"class":618},[613,61316,61275],{"class":618},[613,61318,61319],{"class":615,"line":807},[613,61320,60867],{"class":618},[613,61322,61323],{"class":615,"line":607},[613,61324,2643],{"class":618},[613,61326,61327,61329,61331,61333],{"class":615,"line":830},[613,61328,60766],{"class":622},[613,61330,1198],{"class":618},[613,61332,60771],{"class":1189},[613,61334,21306],{"class":618},[613,61336,61337],{"class":615,"line":841},[613,61338,61339],{"class":639}," uniform mat4 textureMatrix;\n",[613,61341,61342],{"class":615,"line":852},[613,61343,61344],{"class":639}," varying vec4 vUv;\n",[613,61346,61347],{"class":615,"line":862},[613,61348,718],{"emptyLinePlaceholder":570},[613,61350,61351],{"class":615,"line":608},[613,61352,61353],{"class":639}," #include \u003Ccommon>\n",[613,61355,61356],{"class":615,"line":882},[613,61357,61358],{"class":639}," #include \u003Clogdepthbuf_pars_vertex>\n",[613,61360,61361],{"class":615,"line":892},[613,61362,718],{"emptyLinePlaceholder":570},[613,61364,61365],{"class":615,"line":2671},[613,61366,61367],{"class":639}," void main() {\n",[613,61369,61370],{"class":615,"line":2680},[613,61371,61372],{"class":639}," vUv = textureMatrix * vec4( position, 1.0 );\n",[613,61374,61375],{"class":615,"line":2714},[613,61376,61377],{"class":639}," gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n",[613,61379,61380],{"class":615,"line":2723},[613,61381,718],{"emptyLinePlaceholder":570},[613,61383,61384],{"class":615,"line":2732},[613,61385,61386],{"class":639}," #include \u003Clogdepthbuf_vertex>\n",[613,61388,61389],{"class":615,"line":2741},[613,61390,718],{"emptyLinePlaceholder":570},[613,61392,61393,61396,61398],{"class":615,"line":2763},[613,61394,61395],{"class":639}," }",[613,61397,60816],{"class":618},[613,61399,2536],{"class":618},[613,61401,61402,61404,61406,61408],{"class":615,"line":2814},[613,61403,60823],{"class":622},[613,61405,1198],{"class":618},[613,61407,60771],{"class":1189},[613,61409,21306],{"class":618},[613,61411,61412],{"class":615,"line":2823},[613,61413,61414],{"class":639}," uniform vec3 color;\n",[613,61416,61417],{"class":615,"line":2832},[613,61418,61419],{"class":639}," uniform sampler2D tDiffuse;\n",[613,61421,61422],{"class":615,"line":4034},[613,61423,61344],{"class":639},[613,61425,61426],{"class":615,"line":4078},[613,61427,718],{"emptyLinePlaceholder":570},[613,61429,61430],{"class":615,"line":4105},[613,61431,61432],{"class":639}," #include \u003Clogdepthbuf_pars_fragment>\n",[613,61434,61435],{"class":615,"line":4124},[613,61436,718],{"emptyLinePlaceholder":570},[613,61438,61439],{"class":615,"line":4165},[613,61440,61441],{"class":639}," float blendOverlay( float base, float blend ) {\n",[613,61443,61444],{"class":615,"line":4174},[613,61445,61446],{"class":639}," return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n",[613,61448,61449],{"class":615,"line":4183},[613,61450,8082],{"class":639},[613,61452,61453],{"class":615,"line":19957},[613,61454,718],{"emptyLinePlaceholder":570},[613,61456,61457],{"class":615,"line":19972},[613,61458,61459],{"class":639}," vec3 blendOverlay( vec3 base, vec3 blend ) {\n",[613,61461,61462],{"class":615,"line":19987},[613,61463,61464],{"class":639}," return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n",[613,61466,61467],{"class":615,"line":19992},[613,61468,8082],{"class":639},[613,61470,61471],{"class":615,"line":19999},[613,61472,718],{"emptyLinePlaceholder":570},[613,61474,61475],{"class":615,"line":20004},[613,61476,61367],{"class":639},[613,61478,61479],{"class":615,"line":20010},[613,61480,61481],{"class":639}," #include \u003Clogdepthbuf_fragment>\n",[613,61483,61484],{"class":615,"line":20031},[613,61485,718],{"emptyLinePlaceholder":570},[613,61487,61488],{"class":615,"line":20037},[613,61489,61490],{"class":639}," vec4 base = texture2DProj( tDiffuse, vUv );\n",[613,61492,61493],{"class":615,"line":20044},[613,61494,61495],{"class":639}," gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n",[613,61497,61498],{"class":615,"line":20049},[613,61499,718],{"emptyLinePlaceholder":570},[613,61501,61502],{"class":615,"line":20070},[613,61503,61504],{"class":639}," #include \u003Ctonemapping_fragment>\n",[613,61506,61507],{"class":615,"line":20083},[613,61508,61509],{"class":639}," #include \u003Ccolorspace_fragment>\n",[613,61511,61512,61514],{"class":615,"line":20109},[613,61513,61395],{"class":639},[613,61515,21306],{"class":618},[613,61517,61518],{"class":615,"line":20114},[613,61519,718],{"emptyLinePlaceholder":570},[613,61521,61522],{"class":615,"line":20121},[613,61523,1305],{"class":618},[1307,61525,61526],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .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}",{"title":552,"searchDepth":553,"depth":554,"links":61528},[61529,61530,61531],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},{"id":60558,"depth":554,"text":60559,"children":61532},[61533],{"id":61216,"depth":684,"text":61217},"Create real-time reflections of your scene.",{},{"title":429,"description":61534},"hu0_cWNcLItstfep2oA3fWu44BIvehGORFbqaCgBRtM",{"id":61539,"title":433,"body":61540,"description":62754,"extension":567,"links":568,"meta":62755,"navigation":570,"path":434,"seo":62756,"stem":435,"__hash__":62757},"docs/2.api/9.objects/refractor.md",{"type":477,"value":61541,"toc":62747},[61542,61547,61560,61562,61845,61847,61941,61949,61953,61961,62510,62513,62515,62744],[584,61543,61544],{},[61545,61546],"objects-refractor",{},[590,61548,2843,61549,60188,61551,61556,61557,61559],{},[594,61550,7528],{},[1120,61552,61555],{"href":61553,"rel":61554},"https://github.com/mrdoob/three.js/blob/dev/examples/jsm/objects/Refractor.js",[1124],"Refractor class",", which creates a Mesh that renders what is behind it with a refractive distortion effect — useful for glass panels, water surfaces, and other transmissive materials. This Mesh extends from ",[594,61558,4431],{}," so all the default props can be passed as well.",[480,61561,15],{"id":600},[602,61563,61565],{"className":604,"code":61564,"language":609,"meta":552,"style":552},"\u003Cscript setup lang=\"ts\">\nimport { Refractor } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTresCanvas shadows alpha>\n \u003CTresPerspectiveCamera :position=\"[0, 2, 8]\" />\n \u003COrbitControls />\n\n \u003C!-- Place objects behind the refracting plane -->\n \u003CTresMesh :position=\"[-2, 0, -2]\">\n \u003CTresTorusKnotGeometry />\n \u003CTresMeshStandardMaterial color=\"hotpink\" />\n \u003C/TresMesh>\n\n \u003CSuspense>\n \u003CRefractor color=\"#9ec8d4\">\n \u003CTresPlaneGeometry :args=\"[8, 5]\" />\n \u003C/Refractor>\n \u003C/Suspense>\n \u003C/TresCanvas>\n\u003C/template>\n",[594,61566,61567,61587,61606,61614,61618,61626,61638,61670,61678,61682,61687,61719,61727,61746,61754,61758,61766,61785,61813,61821,61829,61837],{"__ignoreMap":552},[613,61568,61569,61571,61573,61575,61577,61579,61581,61583,61585],{"class":615,"line":553},[613,61570,619],{"class":618},[613,61572,623],{"class":622},[613,61574,627],{"class":626},[613,61576,630],{"class":626},[613,61578,633],{"class":618},[613,61580,636],{"class":618},[613,61582,640],{"class":639},[613,61584,636],{"class":618},[613,61586,645],{"class":618},[613,61588,61589,61591,61593,61596,61598,61600,61602,61604],{"class":615,"line":554},[613,61590,653],{"class":652},[613,61592,656],{"class":618},[613,61594,61595],{"class":659}," Refractor",[613,61597,669],{"class":618},[613,61599,672],{"class":652},[613,61601,675],{"class":618},[613,61603,678],{"class":639},[613,61605,681],{"class":618},[613,61607,61608,61610,61612],{"class":615,"line":684},[613,61609,708],{"class":618},[613,61611,623],{"class":622},[613,61613,645],{"class":618},[613,61615,61616],{"class":615,"line":705},[613,61617,718],{"emptyLinePlaceholder":570},[613,61619,61620,61622,61624],{"class":615,"line":715},[613,61621,619],{"class":618},[613,61623,726],{"class":622},[613,61625,645],{"class":618},[613,61627,61628,61630,61632,61634,61636],{"class":615,"line":721},[613,61629,734],{"class":618},[613,61631,737],{"class":622},[613,61633,40908],{"class":626},[613,61635,60274],{"class":626},[613,61637,645],{"class":618},[613,61639,61640,61642,61644,61646,61648,61650,61652,61654,61656,61658,61660,61662,61664,61666,61668],{"class":615,"line":731},[613,61641,757],{"class":618},[613,61643,760],{"class":622},[613,61645,789],{"class":618},[613,61647,1467],{"class":626},[613,61649,633],{"class":618},[613,61651,636],{"class":618},[613,61653,1474],{"class":618},[613,61655,945],{"class":799},[613,61657,1479],{"class":618},[613,61659,800],{"class":799},[613,61661,1479],{"class":618},[613,61663,20236],{"class":799},[613,61665,1489],{"class":618},[613,61667,636],{"class":618},[613,61669,763],{"class":618},[613,61671,61672,61674,61676],{"class":615,"line":754},[613,61673,757],{"class":618},[613,61675,771],{"class":622},[613,61677,763],{"class":618},[613,61679,61680],{"class":615,"line":766},[613,61681,718],{"emptyLinePlaceholder":570},[613,61683,61684],{"class":615,"line":776},[613,61685,61686],{"class":1189}," \u003C!-- Place objects behind the refracting plane -->\n",[613,61688,61689,61691,61693,61695,61697,61699,61701,61703,61705,61707,61709,61711,61713,61715,61717],{"class":615,"line":781},[613,61690,757],{"class":618},[613,61692,836],{"class":622},[613,61694,789],{"class":618},[613,61696,1467],{"class":626},[613,61698,633],{"class":618},[613,61700,636],{"class":618},[613,61702,3923],{"class":618},[613,61704,800],{"class":799},[613,61706,1479],{"class":618},[613,61708,945],{"class":799},[613,61710,8838],{"class":618},[613,61712,800],{"class":799},[613,61714,1489],{"class":618},[613,61716,636],{"class":618},[613,61718,645],{"class":618},[613,61720,61721,61723,61725],{"class":615,"line":807},[613,61722,833],{"class":618},[613,61724,37377],{"class":622},[613,61726,763],{"class":618},[613,61728,61729,61731,61733,61735,61737,61739,61742,61744],{"class":615,"line":607},[613,61730,833],{"class":618},[613,61732,2746],{"class":622},[613,61734,2749],{"class":626},[613,61736,633],{"class":618},[613,61738,636],{"class":618},[613,61740,61741],{"class":639},"hotpink",[613,61743,636],{"class":618},[613,61745,763],{"class":618},[613,61747,61748,61750,61752],{"class":615,"line":830},[613,61749,875],{"class":618},[613,61751,836],{"class":622},[613,61753,645],{"class":618},[613,61755,61756],{"class":615,"line":841},[613,61757,718],{"emptyLinePlaceholder":570},[613,61759,61760,61762,61764],{"class":615,"line":852},[613,61761,757],{"class":618},[613,61763,20168],{"class":622},[613,61765,645],{"class":618},[613,61767,61768,61770,61772,61774,61776,61778,61781,61783],{"class":615,"line":862},[613,61769,833],{"class":618},[613,61771,433],{"class":622},[613,61773,2749],{"class":626},[613,61775,633],{"class":618},[613,61777,636],{"class":618},[613,61779,61780],{"class":639},"#9ec8d4",[613,61782,636],{"class":618},[613,61784,645],{"class":618},[613,61786,61787,61789,61791,61793,61795,61797,61799,61801,61803,61805,61807,61809,61811],{"class":615,"line":608},[613,61788,844],{"class":618},[613,61790,26773],{"class":622},[613,61792,789],{"class":618},[613,61794,1997],{"class":626},[613,61796,633],{"class":618},[613,61798,636],{"class":618},[613,61800,1474],{"class":618},[613,61802,20236],{"class":799},[613,61804,1479],{"class":618},[613,61806,7668],{"class":799},[613,61808,1489],{"class":618},[613,61810,636],{"class":618},[613,61812,763],{"class":618},[613,61814,61815,61817,61819],{"class":615,"line":882},[613,61816,865],{"class":618},[613,61818,433],{"class":622},[613,61820,645],{"class":618},[613,61822,61823,61825,61827],{"class":615,"line":892},[613,61824,875],{"class":618},[613,61826,20168],{"class":622},[613,61828,645],{"class":618},[613,61830,61831,61833,61835],{"class":615,"line":2671},[613,61832,885],{"class":618},[613,61834,737],{"class":622},[613,61836,645],{"class":618},[613,61838,61839,61841,61843],{"class":615,"line":2680},[613,61840,708],{"class":618},[613,61842,726],{"class":622},[613,61844,645],{"class":618},[480,61846,902],{"id":901},[907,61848,61849,61859],{},[910,61850,61851],{},[913,61852,61853,61855,61857],{},[916,61854,918],{"align":977},[916,61856,921],{"align":977},[916,61858,924],{},[926,61860,61861,61875,61888,61901,61914,61927],{},[913,61862,61863,61867,61870],{},[931,61864,61865],{"align":977},[1681,61866,7772],{},[931,61868,61869],{"align":977},"Color tint blended with the refracted image",[931,61871,61872],{},[594,61873,61874],{},"'#7f7f7f'",[913,61876,61877,61881,61884],{},[931,61878,61879],{"align":977},[1681,61880,44746],{},[931,61882,61883],{"align":977},"Width of the internal render target texture",[931,61885,61886],{},[594,61887,39202],{},[913,61889,61890,61894,61897],{},[931,61891,61892],{"align":977},[1681,61893,44763],{},[931,61895,61896],{"align":977},"Height of the internal render target texture",[931,61898,61899],{},[594,61900,39202],{},[913,61902,61903,61907,61910],{},[931,61904,61905],{"align":977},[1681,61906,44881],{},[931,61908,61909],{"align":977},"Clip bias for the virtual camera projection",[931,61911,61912],{},[594,61913,945],{},[913,61915,61916,61920,61923],{},[931,61917,61918],{"align":977},[1681,61919,60530],{},[931,61921,61922],{"align":977},"Number of MSAA samples for the render target",[931,61924,61925],{},[594,61926,3876],{},[913,61928,61929,61933,61936],{},[931,61930,61931],{"align":977},[1681,61932,60542],{},[931,61934,61935],{"align":977},"Custom shader object to override the built-in shader",[931,61937,61938],{},[594,61939,61940],{},"Refractor.RefractorShader",[3268,61942,61943],{},[590,61944,61945,61946,61948],{},"All the props except ",[594,61947,7772],{}," are not reactive",[480,61950,61952],{"id":61951},"custom-refraction-effect","Custom refraction effect",[590,61954,60562,61955,1479,61957,1699,61959,60569],{},[594,61956,25018],{},[594,61958,24991],{},[594,61960,25008],{},[602,61962,61964],{"className":604,"code":61963,"language":609,"meta":552,"style":552},"\u003Cscript setup lang=\"ts\">\nimport { Refractor } from '@tresjs/cientos'\nimport { useLoop } from '@tresjs/core'\nimport { shallowRef } from 'vue'\n\nconst refractorRef = shallowRef()\n\nconst customShader = {\n uniforms: {\n color: { value: null },\n tDiffuse: { value: null },\n textureMatrix: { value: null },\n time: { value: 0 },\n },\n vertexShader: /* glsl */`\n uniform mat4 textureMatrix;\n varying vec4 vUv;\n varying vec2 vPos;\n void main() {\n vUv = textureMatrix * vec4(position, 1.0);\n vPos = position.xy;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }`,\n fragmentShader: /* glsl */`\n uniform vec3 color;\n uniform sampler2D tDiffuse;\n uniform float time;\n varying vec4 vUv;\n varying vec2 vPos;\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 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 void main() {\n float dist = length(vPos);\n float wave = sin(dist * 6.0 - time * 4.0) * 0.02;\n vec2 dir = dist > 0.001 ? normalize(vPos) : vec2(0.0);\n vec4 distortedUv = vUv + vec4(dir * wave, 0.0, 0.0);\n vec4 base = texture2DProj(tDiffuse, distortedUv);\n gl_FragColor = vec4(blendOverlay(base.rgb, color), 1.0);\n #include \u003Ctonemapping_fragment>\n #include \u003Ccolorspace_fragment>\n }`,\n}\n\nconst { onBeforeRender } = useLoop()\nonBeforeRender(({ elapsed }) => {\n const uniforms = refractorRef.value?.instance?.material?.uniforms\n if (uniforms?.time) { uniforms.time.value = elapsed }\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003CRefractor\n ref=\"refractorRef\"\n color=\"#9ec8d4\"\n :shader=\"customShader\"\n >\n \u003CTresPlaneGeometry :args=\"[8, 5]\" />\n \u003C/Refractor>\n\u003C/template>\n",[594,61965,61966,61986,62004,62022,62040,62044,62057,62061,62071,62079,62095,62111,62127,62143,62147,62157,62161,62165,62169,62173,62177,62181,62185,62193,62203,62207,62211,62215,62219,62223,62227,62231,62235,62239,62243,62247,62251,62255,62259,62263,62267,62271,62275,62279,62283,62291,62295,62299,62315,62331,62358,62390,62396,62404,62408,62416,62423,62436,62448,62462,62466,62494,62502],{"__ignoreMap":552},[613,61967,61968,61970,61972,61974,61976,61978,61980,61982,61984],{"class":615,"line":553},[613,61969,619],{"class":618},[613,61971,623],{"class":622},[613,61973,627],{"class":626},[613,61975,630],{"class":626},[613,61977,633],{"class":618},[613,61979,636],{"class":618},[613,61981,640],{"class":639},[613,61983,636],{"class":618},[613,61985,645],{"class":618},[613,61987,61988,61990,61992,61994,61996,61998,62000,62002],{"class":615,"line":554},[613,61989,653],{"class":652},[613,61991,656],{"class":618},[613,61993,61595],{"class":659},[613,61995,669],{"class":618},[613,61997,672],{"class":652},[613,61999,675],{"class":618},[613,62001,678],{"class":639},[613,62003,681],{"class":618},[613,62005,62006,62008,62010,62012,62014,62016,62018,62020],{"class":615,"line":684},[613,62007,653],{"class":652},[613,62009,656],{"class":618},[613,62011,60621],{"class":659},[613,62013,669],{"class":618},[613,62015,672],{"class":652},[613,62017,675],{"class":618},[613,62019,700],{"class":639},[613,62021,681],{"class":618},[613,62023,62024,62026,62028,62030,62032,62034,62036,62038],{"class":615,"line":705},[613,62025,653],{"class":652},[613,62027,656],{"class":618},[613,62029,3567],{"class":659},[613,62031,669],{"class":618},[613,62033,672],{"class":652},[613,62035,675],{"class":618},[613,62037,609],{"class":639},[613,62039,681],{"class":618},[613,62041,62042],{"class":615,"line":715},[613,62043,718],{"emptyLinePlaceholder":570},[613,62045,62046,62048,62051,62053,62055],{"class":615,"line":721},[613,62047,2463],{"class":626},[613,62049,62050],{"class":659}," refractorRef ",[613,62052,633],{"class":618},[613,62054,3567],{"class":2482},[613,62056,6745],{"class":659},[613,62058,62059],{"class":615,"line":731},[613,62060,718],{"emptyLinePlaceholder":570},[613,62062,62063,62065,62067,62069],{"class":615,"line":754},[613,62064,2463],{"class":626},[613,62066,60677],{"class":659},[613,62068,633],{"class":618},[613,62070,1184],{"class":618},[613,62072,62073,62075,62077],{"class":615,"line":766},[613,62074,60686],{"class":622},[613,62076,1198],{"class":618},[613,62078,1184],{"class":618},[613,62080,62081,62083,62085,62087,62089,62091,62093],{"class":615,"line":776},[613,62082,22844],{"class":622},[613,62084,1198],{"class":618},[613,62086,656],{"class":618},[613,62088,25677],{"class":622},[613,62090,1198],{"class":618},[613,62092,3717],{"class":618},[613,62094,7300],{"class":618},[613,62096,62097,62099,62101,62103,62105,62107,62109],{"class":615,"line":781},[613,62098,60711],{"class":622},[613,62100,1198],{"class":618},[613,62102,656],{"class":618},[613,62104,25677],{"class":622},[613,62106,1198],{"class":618},[613,62108,3717],{"class":618},[613,62110,7300],{"class":618},[613,62112,62113,62115,62117,62119,62121,62123,62125],{"class":615,"line":807},[613,62114,60728],{"class":622},[613,62116,1198],{"class":618},[613,62118,656],{"class":618},[613,62120,25677],{"class":622},[613,62122,1198],{"class":618},[613,62124,3717],{"class":618},[613,62126,7300],{"class":618},[613,62128,62129,62131,62133,62135,62137,62139,62141],{"class":615,"line":607},[613,62130,60745],{"class":622},[613,62132,1198],{"class":618},[613,62134,656],{"class":618},[613,62136,25677],{"class":622},[613,62138,1198],{"class":618},[613,62140,2553],{"class":799},[613,62142,7300],{"class":618},[613,62144,62145],{"class":615,"line":830},[613,62146,2643],{"class":618},[613,62148,62149,62151,62153,62155],{"class":615,"line":841},[613,62150,60766],{"class":622},[613,62152,1198],{"class":618},[613,62154,60771],{"class":1189},[613,62156,21306],{"class":618},[613,62158,62159],{"class":615,"line":852},[613,62160,60778],{"class":639},[613,62162,62163],{"class":615,"line":862},[613,62164,60783],{"class":639},[613,62166,62167],{"class":615,"line":608},[613,62168,60788],{"class":639},[613,62170,62171],{"class":615,"line":882},[613,62172,60793],{"class":639},[613,62174,62175],{"class":615,"line":892},[613,62176,60798],{"class":639},[613,62178,62179],{"class":615,"line":2671},[613,62180,60803],{"class":639},[613,62182,62183],{"class":615,"line":2680},[613,62184,60808],{"class":639},[613,62186,62187,62189,62191],{"class":615,"line":2714},[613,62188,60813],{"class":639},[613,62190,60816],{"class":618},[613,62192,2536],{"class":618},[613,62194,62195,62197,62199,62201],{"class":615,"line":2723},[613,62196,60823],{"class":622},[613,62198,1198],{"class":618},[613,62200,60771],{"class":1189},[613,62202,21306],{"class":618},[613,62204,62205],{"class":615,"line":2732},[613,62206,60834],{"class":639},[613,62208,62209],{"class":615,"line":2741},[613,62210,60839],{"class":639},[613,62212,62213],{"class":615,"line":2763},[613,62214,60844],{"class":639},[613,62216,62217],{"class":615,"line":2814},[613,62218,60783],{"class":639},[613,62220,62221],{"class":615,"line":2823},[613,62222,60788],{"class":639},[613,62224,62225],{"class":615,"line":2832},[613,62226,60857],{"class":639},[613,62228,62229],{"class":615,"line":4034},[613,62230,60862],{"class":639},[613,62232,62233],{"class":615,"line":4078},[613,62234,60867],{"class":639},[613,62236,62237],{"class":615,"line":4105},[613,62238,60872],{"class":639},[613,62240,62241],{"class":615,"line":4124},[613,62242,60877],{"class":639},[613,62244,62245],{"class":615,"line":4165},[613,62246,60867],{"class":639},[613,62248,62249],{"class":615,"line":4174},[613,62250,60793],{"class":639},[613,62252,62253],{"class":615,"line":4183},[613,62254,60890],{"class":639},[613,62256,62257],{"class":615,"line":19957},[613,62258,60895],{"class":639},[613,62260,62261],{"class":615,"line":19972},[613,62262,60900],{"class":639},[613,62264,62265],{"class":615,"line":19987},[613,62266,60905],{"class":639},[613,62268,62269],{"class":615,"line":19992},[613,62270,60910],{"class":639},[613,62272,62273],{"class":615,"line":19999},[613,62274,60915],{"class":639},[613,62276,62277],{"class":615,"line":20004},[613,62278,60920],{"class":639},[613,62280,62281],{"class":615,"line":20010},[613,62282,60925],{"class":639},[613,62284,62285,62287,62289],{"class":615,"line":20031},[613,62286,60813],{"class":639},[613,62288,60816],{"class":618},[613,62290,2536],{"class":618},[613,62292,62293],{"class":615,"line":20037},[613,62294,1305],{"class":618},[613,62296,62297],{"class":615,"line":20044},[613,62298,718],{"emptyLinePlaceholder":570},[613,62300,62301,62303,62305,62307,62309,62311,62313],{"class":615,"line":20049},[613,62302,2463],{"class":626},[613,62304,656],{"class":618},[613,62306,60950],{"class":659},[613,62308,2476],{"class":618},[613,62310,2479],{"class":618},[613,62312,60621],{"class":2482},[613,62314,6745],{"class":659},[613,62316,62317,62319,62321,62323,62325,62327,62329],{"class":615,"line":20070},[613,62318,60963],{"class":2482},[613,62320,2485],{"class":659},[613,62322,37855],{"class":618},[613,62324,37858],{"class":7049},[613,62326,37872],{"class":618},[613,62328,3746],{"class":626},[613,62330,1184],{"class":618},[613,62332,62333,62335,62337,62339,62342,62344,62346,62348,62350,62352,62354,62356],{"class":615,"line":20083},[613,62334,56425],{"class":626},[613,62336,60982],{"class":659},[613,62338,2479],{"class":618},[613,62340,62341],{"class":659}," refractorRef",[613,62343,1126],{"class":618},[613,62345,3754],{"class":659},[613,62347,3757],{"class":618},[613,62349,25702],{"class":659},[613,62351,3757],{"class":618},[613,62353,5393],{"class":659},[613,62355,3757],{"class":618},[613,62357,61004],{"class":659},[613,62359,62360,62362,62364,62366,62368,62370,62372,62374,62376,62378,62380,62382,62384,62386,62388],{"class":615,"line":20109},[613,62361,19771],{"class":652},[613,62363,3143],{"class":622},[613,62365,25018],{"class":659},[613,62367,3757],{"class":618},[613,62369,61017],{"class":659},[613,62371,4893],{"class":622},[613,62373,39867],{"class":618},[613,62375,60982],{"class":659},[613,62377,1126],{"class":618},[613,62379,61017],{"class":659},[613,62381,1126],{"class":618},[613,62383,3754],{"class":659},[613,62385,2479],{"class":618},[613,62387,37858],{"class":659},[613,62389,20808],{"class":618},[613,62391,62392,62394],{"class":615,"line":20114},[613,62393,2476],{"class":618},[613,62395,2496],{"class":659},[613,62397,62398,62400,62402],{"class":615,"line":20121},[613,62399,708],{"class":618},[613,62401,623],{"class":622},[613,62403,645],{"class":618},[613,62405,62406],{"class":615,"line":20130},[613,62407,718],{"emptyLinePlaceholder":570},[613,62409,62410,62412,62414],{"class":615,"line":20135},[613,62411,619],{"class":618},[613,62413,726],{"class":622},[613,62415,645],{"class":618},[613,62417,62418,62420],{"class":615,"line":20144},[613,62419,734],{"class":618},[613,62421,62422],{"class":622},"Refractor\n",[613,62424,62425,62427,62429,62431,62434],{"class":615,"line":20163},[613,62426,17006],{"class":626},[613,62428,633],{"class":618},[613,62430,636],{"class":618},[613,62432,62433],{"class":639},"refractorRef",[613,62435,3200],{"class":618},[613,62437,62438,62440,62442,62444,62446],{"class":615,"line":20173},[613,62439,22844],{"class":626},[613,62441,633],{"class":618},[613,62443,636],{"class":618},[613,62445,61780],{"class":639},[613,62447,3200],{"class":618},[613,62449,62450,62452,62454,62456,62458,62460],{"class":615,"line":20210},[613,62451,5345],{"class":618},[613,62453,60542],{"class":626},[613,62455,633],{"class":618},[613,62457,636],{"class":618},[613,62459,61157],{"class":659},[613,62461,3200],{"class":618},[613,62463,62464],{"class":615,"line":20219},[613,62465,5368],{"class":618},[613,62467,62468,62470,62472,62474,62476,62478,62480,62482,62484,62486,62488,62490,62492],{"class":615,"line":20253},[613,62469,757],{"class":618},[613,62471,26773],{"class":622},[613,62473,789],{"class":618},[613,62475,1997],{"class":626},[613,62477,633],{"class":618},[613,62479,636],{"class":618},[613,62481,1474],{"class":618},[613,62483,20236],{"class":799},[613,62485,1479],{"class":618},[613,62487,7668],{"class":799},[613,62489,1489],{"class":618},[613,62491,636],{"class":618},[613,62493,763],{"class":618},[613,62495,62496,62498,62500],{"class":615,"line":20262},[613,62497,885],{"class":618},[613,62499,433],{"class":622},[613,62501,645],{"class":618},[613,62503,62504,62506,62508],{"class":615,"line":20271},[613,62505,708],{"class":618},[613,62507,726],{"class":622},[613,62509,645],{"class":618},[590,62511,62512],{},"The Refractor shader uses the following configuration by default:",[4191,62514,61217],{"id":61216},[602,62516,62518],{"className":40322,"code":62517,"language":40324,"meta":552,"style":552},"const shader = {\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 void main() {\n vUv = textureMatrix * vec4( position, 1.0 );\n gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n }`,\n fragmentShader: /* glsl */`\n uniform vec3 color;\n uniform sampler2D tDiffuse;\n varying vec4 vUv;\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 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",[594,62519,62520,62530,62538,62546,62554,62558,62566,62574,62578,62586,62594,62598,62602,62612,62616,62620,62624,62628,62633,62638,62646,62656,62660,62664,62668,62672,62677,62682,62686,62690,62695,62700,62704,62708,62712,62717,62722,62726,62730,62734,62740],{"__ignoreMap":552},[613,62521,62522,62524,62526,62528],{"class":615,"line":553},[613,62523,2463],{"class":626},[613,62525,61229],{"class":659},[613,62527,633],{"class":618},[613,62529,1184],{"class":618},[613,62531,62532,62534,62536],{"class":615,"line":554},[613,62533,60686],{"class":622},[613,62535,1198],{"class":618},[613,62537,1184],{"class":618},[613,62539,62540,62542,62544],{"class":615,"line":684},[613,62541,22844],{"class":622},[613,62543,1198],{"class":618},[613,62545,1184],{"class":618},[613,62547,62548,62550,62552],{"class":615,"line":705},[613,62549,61270],{"class":622},[613,62551,1198],{"class":618},[613,62553,61275],{"class":618},[613,62555,62556],{"class":615,"line":715},[613,62557,61280],{"class":618},[613,62559,62560,62562,62564],{"class":615,"line":721},[613,62561,60711],{"class":622},[613,62563,1198],{"class":618},[613,62565,1184],{"class":618},[613,62567,62568,62570,62572],{"class":615,"line":731},[613,62569,61270],{"class":622},[613,62571,1198],{"class":618},[613,62573,61275],{"class":618},[613,62575,62576],{"class":615,"line":754},[613,62577,61280],{"class":618},[613,62579,62580,62582,62584],{"class":615,"line":766},[613,62581,60728],{"class":622},[613,62583,1198],{"class":618},[613,62585,1184],{"class":618},[613,62587,62588,62590,62592],{"class":615,"line":776},[613,62589,61270],{"class":622},[613,62591,1198],{"class":618},[613,62593,61275],{"class":618},[613,62595,62596],{"class":615,"line":781},[613,62597,60867],{"class":618},[613,62599,62600],{"class":615,"line":807},[613,62601,2643],{"class":618},[613,62603,62604,62606,62608,62610],{"class":615,"line":607},[613,62605,60766],{"class":622},[613,62607,1198],{"class":618},[613,62609,60771],{"class":1189},[613,62611,21306],{"class":618},[613,62613,62614],{"class":615,"line":830},[613,62615,60778],{"class":639},[613,62617,62618],{"class":615,"line":841},[613,62619,60783],{"class":639},[613,62621,62622],{"class":615,"line":852},[613,62623,718],{"emptyLinePlaceholder":570},[613,62625,62626],{"class":615,"line":862},[613,62627,60793],{"class":639},[613,62629,62630],{"class":615,"line":608},[613,62631,62632],{"class":639}," vUv = textureMatrix * vec4( position, 1.0 );\n",[613,62634,62635],{"class":615,"line":882},[613,62636,62637],{"class":639}," gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n",[613,62639,62640,62642,62644],{"class":615,"line":892},[613,62641,60813],{"class":639},[613,62643,60816],{"class":618},[613,62645,2536],{"class":618},[613,62647,62648,62650,62652,62654],{"class":615,"line":2671},[613,62649,60823],{"class":622},[613,62651,1198],{"class":618},[613,62653,60771],{"class":1189},[613,62655,21306],{"class":618},[613,62657,62658],{"class":615,"line":2680},[613,62659,60834],{"class":639},[613,62661,62662],{"class":615,"line":2714},[613,62663,60839],{"class":639},[613,62665,62666],{"class":615,"line":2723},[613,62667,60783],{"class":639},[613,62669,62670],{"class":615,"line":2732},[613,62671,718],{"emptyLinePlaceholder":570},[613,62673,62674],{"class":615,"line":2741},[613,62675,62676],{"class":639}," float blendOverlay( float base, float blend ) {\n",[613,62678,62679],{"class":615,"line":2763},[613,62680,62681],{"class":639}," return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n",[613,62683,62684],{"class":615,"line":2814},[613,62685,60867],{"class":639},[613,62687,62688],{"class":615,"line":2823},[613,62689,718],{"emptyLinePlaceholder":570},[613,62691,62692],{"class":615,"line":2832},[613,62693,62694],{"class":639}," vec3 blendOverlay( vec3 base, vec3 blend ) {\n",[613,62696,62697],{"class":615,"line":4034},[613,62698,62699],{"class":639}," return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n",[613,62701,62702],{"class":615,"line":4078},[613,62703,60867],{"class":639},[613,62705,62706],{"class":615,"line":4105},[613,62707,718],{"emptyLinePlaceholder":570},[613,62709,62710],{"class":615,"line":4124},[613,62711,60793],{"class":639},[613,62713,62714],{"class":615,"line":4165},[613,62715,62716],{"class":639}," vec4 base = texture2DProj( tDiffuse, vUv );\n",[613,62718,62719],{"class":615,"line":4174},[613,62720,62721],{"class":639}," gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n",[613,62723,62724],{"class":615,"line":4183},[613,62725,718],{"emptyLinePlaceholder":570},[613,62727,62728],{"class":615,"line":19957},[613,62729,60920],{"class":639},[613,62731,62732],{"class":615,"line":19972},[613,62733,60925],{"class":639},[613,62735,62736,62738],{"class":615,"line":19987},[613,62737,60813],{"class":639},[613,62739,21306],{"class":618},[613,62741,62742],{"class":615,"line":19992},[613,62743,1305],{"class":618},[1307,62745,62746],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}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":552,"searchDepth":553,"depth":554,"links":62748},[62749,62750,62751],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},{"id":61951,"depth":554,"text":61952,"children":62752},[62753],{"id":61216,"depth":684,"text":61217},"Create real-time refractive (glass-like) surfaces in your scene.",{},{"title":433,"description":62754},"0S_zvDpr4VfCZrIb3n88oUTHkrLHsw7pJnIv_3ITHzM",{"id":62759,"title":437,"body":62760,"description":63298,"extension":567,"links":568,"meta":63299,"navigation":570,"path":438,"seo":63300,"stem":439,"__hash__":63301},"docs/2.api/9.objects/text-3d.md",{"type":477,"value":62761,"toc":63294},[62762,62767,62778,62780,62799,62906,62921,63014,63017,63135,63137,63291],[584,62763,62764],{},[62765,62766],"objects-text",{},[590,62768,62769,62772,62773,34710],{},[594,62770,62771],{},"\u003CText3D />"," is a component that renders text in 3D. It is a wrapper around the ",[1120,62774,62777],{"href":62775,"rel":62776},"https://threejs.org/docs/#api/en/geometries/TextGeometry",[1124],"TextGeometry",[480,62779,15],{"id":600},[590,62781,62782,62783,62785,62786,62789,62790,62793,62794],{},"To use the ",[594,62784,62771],{}," component you need to pass the ",[594,62787,62788],{},"font"," prop with the URL of the font JSON file you want to use. TextGeometry uses ",[594,62791,62792],{},"typeface",".json generated fonts, you can generate yours ",[1120,62795,62798],{"href":62796,"rel":62797},"http://gero3.github.io/facetype.js/",[1124],"here",[602,62800,62802],{"className":604,"code":62801,"language":609,"meta":552,"style":552},"\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",[594,62803,62804,62812,62820,62828,62835,62848,62862,62866,62874,62882,62890,62898],{"__ignoreMap":552},[613,62805,62806,62808,62810],{"class":615,"line":553},[613,62807,619],{"class":618},[613,62809,726],{"class":622},[613,62811,645],{"class":618},[613,62813,62814,62816,62818],{"class":615,"line":554},[613,62815,734],{"class":618},[613,62817,737],{"class":622},[613,62819,645],{"class":618},[613,62821,62822,62824,62826],{"class":615,"line":684},[613,62823,757],{"class":618},[613,62825,20168],{"class":622},[613,62827,645],{"class":618},[613,62829,62830,62832],{"class":615,"line":705},[613,62831,833],{"class":618},[613,62833,62834],{"class":622},"Text3D\n",[613,62836,62837,62840,62842,62844,62846],{"class":615,"line":715},[613,62838,62839],{"class":626}," text",[613,62841,633],{"class":618},[613,62843,636],{"class":618},[613,62845,15632],{"class":639},[613,62847,3200],{"class":618},[613,62849,62850,62853,62855,62857,62860],{"class":615,"line":721},[613,62851,62852],{"class":626}," font",[613,62854,633],{"class":618},[613,62856,636],{"class":618},[613,62858,62859],{"class":639},"/fonts/FiraCodeRegular.json",[613,62861,3200],{"class":618},[613,62863,62864],{"class":615,"line":731},[613,62865,53053],{"class":618},[613,62867,62868,62870,62872],{"class":615,"line":754},[613,62869,844],{"class":618},[613,62871,857],{"class":622},[613,62873,763],{"class":618},[613,62875,62876,62878,62880],{"class":615,"line":766},[613,62877,865],{"class":618},[613,62879,437],{"class":622},[613,62881,645],{"class":618},[613,62883,62884,62886,62888],{"class":615,"line":776},[613,62885,875],{"class":618},[613,62887,20168],{"class":622},[613,62889,645],{"class":618},[613,62891,62892,62894,62896],{"class":615,"line":781},[613,62893,885],{"class":618},[613,62895,737],{"class":622},[613,62897,645],{"class":618},[613,62899,62900,62902,62904],{"class":615,"line":807},[613,62901,708],{"class":618},[613,62903,726],{"class":622},[613,62905,645],{"class":618},[590,62907,62908,62909,62912,62913,62915,62916,4443,62918,62920],{},"Notice that you need to pass the ",[594,62910,62911],{},"\u003CTresMeshNormalMaterial />"," component as a child of the ",[594,62914,62771],{}," component. This is because ",[594,62917,62771],{},[594,62919,4431],{}," 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:",[602,62922,62924],{"className":604,"code":62923,"language":609,"meta":552,"style":552},"\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",[594,62925,62926,62934,62942,62950,62969,62974,62982,62990,62998,63006],{"__ignoreMap":552},[613,62927,62928,62930,62932],{"class":615,"line":553},[613,62929,619],{"class":618},[613,62931,726],{"class":622},[613,62933,645],{"class":618},[613,62935,62936,62938,62940],{"class":615,"line":554},[613,62937,734],{"class":618},[613,62939,737],{"class":622},[613,62941,645],{"class":618},[613,62943,62944,62946,62948],{"class":615,"line":684},[613,62945,757],{"class":618},[613,62947,20168],{"class":622},[613,62949,645],{"class":618},[613,62951,62952,62954,62956,62959,62961,62963,62965,62967],{"class":615,"line":705},[613,62953,833],{"class":618},[613,62955,437],{"class":622},[613,62957,62958],{"class":626}," font",[613,62960,633],{"class":618},[613,62962,636],{"class":618},[613,62964,62859],{"class":639},[613,62966,636],{"class":618},[613,62968,645],{"class":618},[613,62970,62971],{"class":615,"line":715},[613,62972,62973],{"class":659}," TresJS\n",[613,62975,62976,62978,62980],{"class":615,"line":721},[613,62977,844],{"class":618},[613,62979,857],{"class":622},[613,62981,763],{"class":618},[613,62983,62984,62986,62988],{"class":615,"line":731},[613,62985,865],{"class":618},[613,62987,437],{"class":622},[613,62989,645],{"class":618},[613,62991,62992,62994,62996],{"class":615,"line":754},[613,62993,875],{"class":618},[613,62995,20168],{"class":622},[613,62997,645],{"class":618},[613,62999,63000,63002,63004],{"class":615,"line":766},[613,63001,885],{"class":618},[613,63003,737],{"class":622},[613,63005,645],{"class":618},[613,63007,63008,63010,63012],{"class":615,"line":776},[613,63009,708],{"class":618},[613,63011,726],{"class":622},[613,63013,645],{"class":618},[590,63015,63016],{},"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",[602,63018,63020],{"className":604,"code":63019,"language":609,"meta":552,"style":552},"\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",[594,63021,63022,63030,63050,63058,63066,63072,63086,63098,63102,63107,63111,63119,63127],{"__ignoreMap":552},[613,63023,63024,63026,63028],{"class":615,"line":553},[613,63025,619],{"class":618},[613,63027,726],{"class":622},[613,63029,645],{"class":618},[613,63031,63032,63034,63037,63039,63041,63043,63046,63048],{"class":615,"line":554},[613,63033,734],{"class":618},[613,63035,63036],{"class":622},"input",[613,63038,2782],{"class":626},[613,63040,633],{"class":618},[613,63042,636],{"class":618},[613,63044,63045],{"class":659},"myReactiveText",[613,63047,636],{"class":618},[613,63049,763],{"class":618},[613,63051,63052,63054,63056],{"class":615,"line":684},[613,63053,734],{"class":618},[613,63055,737],{"class":622},[613,63057,645],{"class":618},[613,63059,63060,63062,63064],{"class":615,"line":705},[613,63061,757],{"class":618},[613,63063,20168],{"class":622},[613,63065,645],{"class":618},[613,63067,63068,63070],{"class":615,"line":715},[613,63069,833],{"class":618},[613,63071,62834],{"class":622},[613,63073,63074,63076,63078,63080,63082,63084],{"class":615,"line":721},[613,63075,8243],{"class":618},[613,63077,28079],{"class":626},[613,63079,633],{"class":618},[613,63081,636],{"class":618},[613,63083,63045],{"class":659},[613,63085,3200],{"class":618},[613,63087,63088,63090,63092,63094,63096],{"class":615,"line":731},[613,63089,62852],{"class":626},[613,63091,633],{"class":618},[613,63093,636],{"class":618},[613,63095,62859],{"class":639},[613,63097,3200],{"class":618},[613,63099,63100],{"class":615,"line":754},[613,63101,52972],{"class":626},[613,63103,63104],{"class":615,"line":766},[613,63105,63106],{"class":626}," need-updates\n",[613,63108,63109],{"class":615,"line":776},[613,63110,8297],{"class":618},[613,63112,63113,63115,63117],{"class":615,"line":781},[613,63114,875],{"class":618},[613,63116,20168],{"class":622},[613,63118,645],{"class":618},[613,63120,63121,63123,63125],{"class":615,"line":807},[613,63122,885],{"class":618},[613,63124,737],{"class":622},[613,63126,645],{"class":618},[613,63128,63129,63131,63133],{"class":615,"line":607},[613,63130,708],{"class":618},[613,63132,726],{"class":622},[613,63134,645],{"class":618},[480,63136,902],{"id":901},[907,63138,63139,63149],{},[910,63140,63141],{},[913,63142,63143,63145,63147],{},[916,63144,918],{"align":977},[916,63146,921],{"align":977},[916,63148,924],{},[926,63150,63151,63162,63173,63184,63195,63207,63219,63231,63244,63256,63268,63279],{},[913,63152,63153,63157,63160],{},[931,63154,63155],{"align":977},[1681,63156,62788],{},[931,63158,63159],{"align":977},"The font data or font name to use for the text.",[931,63161],{},[913,63163,63164,63168,63171],{},[931,63165,63166],{"align":977},[1681,63167,28079],{},[931,63169,63170],{"align":977},"The text to display.",[931,63172],{},[913,63174,63175,63179,63182],{},[931,63176,63177],{"align":977},[1681,63178,15436],{},[931,63180,63181],{"align":977},"The size of the text.",[931,63183,1521],{},[913,63185,63186,63190,63193],{},[931,63187,63188],{"align":977},[1681,63189,39153],{},[931,63191,63192],{"align":977},"The height of the text.",[931,63194,5939],{},[913,63196,63197,63202,63205],{},[931,63198,63199],{"align":977},[1681,63200,63201],{},"curveSegments",[931,63203,63204],{"align":977},"The number of curve segments to use when generating the text geometry.",[931,63206,7668],{},[913,63208,63209,63214,63217],{},[931,63210,63211],{"align":977},[1681,63212,63213],{},"bevelEnabled",[931,63215,63216],{"align":977},"A flag indicating whether beveling should be enabled for the text.",[931,63218,941],{},[913,63220,63221,63226,63229],{},[931,63222,63223],{"align":977},[1681,63224,63225],{},"bevelThickness",[931,63227,63228],{"align":977},"The thickness of the beveled edge on the text.",[931,63230,10115],{},[913,63232,63233,63238,63241],{},[931,63234,63235],{"align":977},[1681,63236,63237],{},"bevelSize",[931,63239,63240],{"align":977},"The size of the beveled edge on the text.",[931,63242,63243],{},"0.02",[913,63245,63246,63251,63254],{},[931,63247,63248],{"align":977},[1681,63249,63250],{},"bevelOffset",[931,63252,63253],{"align":977},"The offset of the beveled edge on the text.",[931,63255,945],{},[913,63257,63258,63263,63266],{},[931,63259,63260],{"align":977},[1681,63261,63262],{},"bevelSegments",[931,63264,63265],{"align":977},"The number of bevel segments to use when generating the text geometry.",[931,63267,3876],{},[913,63269,63270,63274,63277],{},[931,63271,63272],{"align":977},[1681,63273,44736],{},[931,63275,63276],{"align":977},"To center the text",[931,63278,951],{},[913,63280,63281,63286,63289],{},[931,63282,63283],{"align":977},[1681,63284,63285],{},"needUpdates",[931,63287,63288],{"align":977},"This props add reactivity",[931,63290,951],{},[1307,63292,63293],{},"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":552,"searchDepth":553,"depth":554,"links":63295},[63296,63297],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},"Render text in 3D using TextGeometry.",{},{"title":437,"description":63298},"t6bahOskD-ojOxftya8MrETrI6LWNTRBawqfzv7mouA",[63303,63878,64187,64595,65700,66334,66982],{"id":63304,"title":447,"body":63305,"description":63874,"extension":567,"links":568,"meta":63875,"navigation":570,"path":448,"seo":63876,"stem":449,"__hash__":63877},"docs/2.api/miscellaneous/bounds.md",{"type":477,"value":63306,"toc":63867},[63307,63312,63319,63337,63339,63706,63708,63837,63840,63854,63858,63864],[2343,63308,63309],{},[63310,63311],"miscellaneous-bounds",{},[590,63313,63314,63315,63318],{},"Calculates a boundary box and centers the camera accordingly. Its ",[594,63316,63317],{},"lookAt"," method accepts a target to look at imperatively e.g., after a click.",[2054,63320,63321,63323],{},[590,63322,48761],{},[602,63324,63325],{"className":604,"code":2079,"language":609,"meta":552,"style":552},[594,63326,63327],{"__ignoreMap":552},[613,63328,63329,63331,63333,63335],{"class":615,"line":553},[613,63330,619],{"class":618},[613,63332,771],{"class":622},[613,63334,1876],{"class":626},[613,63336,763],{"class":618},[480,63338,15],{"id":600},[602,63340,63343],{"className":604,"code":63341,"highlights":63342,"language":609,"meta":552,"style":552},"\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",[684,721,731,766,776,781,608,2714],[594,63344,63345,63365,63383,63407,63425,63429,63443,63457,63461,63473,63502,63507,63515,63519,63527,63535,63567,63577,63615,63657,63665,63673,63681,63690,63698],{"__ignoreMap":552},[613,63346,63347,63349,63351,63353,63355,63357,63359,63361,63363],{"class":615,"line":553},[613,63348,619],{"class":618},[613,63350,623],{"class":622},[613,63352,627],{"class":626},[613,63354,630],{"class":626},[613,63356,633],{"class":618},[613,63358,636],{"class":618},[613,63360,640],{"class":639},[613,63362,636],{"class":618},[613,63364,645],{"class":618},[613,63366,63367,63369,63371,63373,63375,63377,63379,63381],{"class":615,"line":554},[613,63368,653],{"class":652},[613,63370,656],{"class":618},[613,63372,691],{"class":659},[613,63374,669],{"class":618},[613,63376,672],{"class":652},[613,63378,675],{"class":618},[613,63380,700],{"class":639},[613,63382,681],{"class":618},[613,63384,63386,63388,63390,63393,63395,63397,63399,63401,63403,63405],{"class":63385,"line":684},[615,649],[613,63387,653],{"class":652},[613,63389,656],{"class":618},[613,63391,63392],{"class":659}," Bounds",[613,63394,663],{"class":618},[613,63396,666],{"class":659},[613,63398,669],{"class":618},[613,63400,672],{"class":652},[613,63402,675],{"class":618},[613,63404,678],{"class":639},[613,63406,681],{"class":618},[613,63408,63409,63411,63413,63415,63417,63419,63421,63423],{"class":615,"line":705},[613,63410,653],{"class":652},[613,63412,656],{"class":618},[613,63414,3567],{"class":659},[613,63416,669],{"class":618},[613,63418,672],{"class":652},[613,63420,675],{"class":618},[613,63422,609],{"class":639},[613,63424,681],{"class":618},[613,63426,63427],{"class":615,"line":715},[613,63428,718],{"emptyLinePlaceholder":570},[613,63430,63432,63434,63437,63439,63441],{"class":63431,"line":721},[615,649],[613,63433,2463],{"class":626},[613,63435,63436],{"class":659}," boundsRef ",[613,63438,633],{"class":618},[613,63440,3567],{"class":2482},[613,63442,6745],{"class":659},[613,63444,63446,63448,63451,63453,63455],{"class":63445,"line":731},[615,649],[613,63447,2463],{"class":626},[613,63449,63450],{"class":659}," objectRef ",[613,63452,633],{"class":618},[613,63454,3567],{"class":2482},[613,63456,6745],{"class":659},[613,63458,63459],{"class":615,"line":754},[613,63460,718],{"emptyLinePlaceholder":570},[613,63462,63464,63466,63469,63471],{"class":63463,"line":766},[615,649],[613,63465,37849],{"class":626},[613,63467,63468],{"class":2482}," focusObject",[613,63470,3743],{"class":618},[613,63472,1184],{"class":618},[613,63474,63476,63479,63481,63483,63485,63487,63489,63491,63493,63496,63498,63500],{"class":63475,"line":776},[615,649],[613,63477,63478],{"class":659}," boundsRef",[613,63480,1126],{"class":618},[613,63482,3754],{"class":659},[613,63484,3757],{"class":618},[613,63486,25702],{"class":659},[613,63488,1126],{"class":618},[613,63490,63317],{"class":2482},[613,63492,2485],{"class":622},[613,63494,63495],{"class":659},"objectRef",[613,63497,1126],{"class":618},[613,63499,3754],{"class":659},[613,63501,2496],{"class":622},[613,63503,63505],{"class":63504,"line":781},[615,649],[613,63506,1305],{"class":618},[613,63508,63509,63511,63513],{"class":615,"line":807},[613,63510,708],{"class":618},[613,63512,623],{"class":622},[613,63514,645],{"class":618},[613,63516,63517],{"class":615,"line":607},[613,63518,718],{"emptyLinePlaceholder":570},[613,63520,63521,63523,63525],{"class":615,"line":830},[613,63522,619],{"class":618},[613,63524,726],{"class":622},[613,63526,645],{"class":618},[613,63528,63529,63531,63533],{"class":615,"line":841},[613,63530,734],{"class":618},[613,63532,737],{"class":622},[613,63534,645],{"class":618},[613,63536,63537,63539,63541,63543,63545,63547,63549,63551,63553,63555,63557,63559,63561,63563,63565],{"class":615,"line":852},[613,63538,757],{"class":618},[613,63540,760],{"class":622},[613,63542,789],{"class":618},[613,63544,1467],{"class":626},[613,63546,633],{"class":618},[613,63548,636],{"class":618},[613,63550,1474],{"class":618},[613,63552,945],{"class":799},[613,63554,1479],{"class":618},[613,63556,800],{"class":799},[613,63558,1479],{"class":618},[613,63560,7668],{"class":799},[613,63562,1489],{"class":618},[613,63564,636],{"class":618},[613,63566,763],{"class":618},[613,63568,63569,63571,63573,63575],{"class":615,"line":862},[613,63570,757],{"class":618},[613,63572,771],{"class":622},[613,63574,1876],{"class":626},[613,63576,763],{"class":618},[613,63578,63580,63582,63584,63586,63588,63590,63593,63595,63598,63601,63603,63605,63607,63609,63611,63613],{"class":63579,"line":608},[615,649],[613,63581,757],{"class":618},[613,63583,447],{"class":622},[613,63585,3975],{"class":626},[613,63587,633],{"class":618},[613,63589,636],{"class":618},[613,63591,63592],{"class":639},"boundsRef",[613,63594,636],{"class":618},[613,63596,63597],{"class":626}," clip",[613,63599,63600],{"class":626}," use-mounted",[613,63602,789],{"class":618},[613,63604,38698],{"class":626},[613,63606,633],{"class":618},[613,63608,636],{"class":618},[613,63610,2597],{"class":799},[613,63612,636],{"class":618},[613,63614,645],{"class":618},[613,63616,63617,63619,63621,63623,63625,63627,63629,63631,63633,63635,63637,63639,63641,63644,63646,63649,63651,63653,63655],{"class":615,"line":882},[613,63618,833],{"class":618},[613,63620,836],{"class":622},[613,63622,3975],{"class":626},[613,63624,633],{"class":618},[613,63626,636],{"class":618},[613,63628,63495],{"class":639},[613,63630,636],{"class":618},[613,63632,4393],{"class":618},[613,63634,36329],{"class":626},[613,63636,633],{"class":618},[613,63638,636],{"class":618},[613,63640,2485],{"class":618},[613,63642,63643],{"class":7049},"e",[613,63645,4893],{"class":618},[613,63647,63648],{"class":626},"=>",[613,63650,63468],{"class":2482},[613,63652,3743],{"class":618},[613,63654,636],{"class":618},[613,63656,645],{"class":618},[613,63658,63659,63661,63663],{"class":615,"line":892},[613,63660,844],{"class":618},[613,63662,847],{"class":622},[613,63664,763],{"class":618},[613,63666,63667,63669,63671],{"class":615,"line":2671},[613,63668,844],{"class":618},[613,63670,857],{"class":622},[613,63672,763],{"class":618},[613,63674,63675,63677,63679],{"class":615,"line":2680},[613,63676,865],{"class":618},[613,63678,836],{"class":622},[613,63680,645],{"class":618},[613,63682,63684,63686,63688],{"class":63683,"line":2714},[615,649],[613,63685,875],{"class":618},[613,63687,447],{"class":622},[613,63689,645],{"class":618},[613,63691,63692,63694,63696],{"class":615,"line":2723},[613,63693,885],{"class":618},[613,63695,737],{"class":622},[613,63697,645],{"class":618},[613,63699,63700,63702,63704],{"class":615,"line":2732},[613,63701,708],{"class":618},[613,63703,726],{"class":622},[613,63705,645],{"class":618},[480,63707,902],{"id":901},[907,63709,63710,63720],{},[910,63711,63712],{},[913,63713,63714,63716,63718],{},[916,63715,8362],{"align":977},[916,63717,921],{"align":977},[916,63719,924],{},[926,63721,63722,63739,63759,63776,63796,63817],{},[913,63723,63724,63729,63735],{},[931,63725,63726],{"align":977},[594,63727,63728],{},"duration",[931,63730,63731,63732,63734],{"align":977},"Duration of the ",[594,63733,63317],{}," animation in seconds",[931,63736,63737],{},[594,63738,12299],{},[913,63740,63741,63745,63755],{},[931,63742,63743],{"align":977},[594,63744,38698],{},[931,63746,63747,63748,63750,63751,5823,63753],{"align":977},"Additional distance from the target when using ",[594,63749,63317],{}," with a ",[594,63752,7843],{},[594,63754,7847],{},[931,63756,63757],{},[594,63758,5939],{},[913,63760,63761,63766,63772],{},[931,63762,63763],{"align":977},[594,63764,63765],{},"useResize",[931,63767,63768,63769,63771],{"align":977},"Whether to re",[594,63770,63317],{}," the last target when the screen is resized",[931,63773,63774],{},[594,63775,951],{},[913,63777,63778,63783,63792],{},[931,63779,63780],{"align":977},[594,63781,63782],{},"useMounted",[931,63784,63785,63786,63788,63789,63791],{"align":977},"Whether to ",[594,63787,63317],{}," the ",[594,63790,447],{}," object when the component is mounts",[931,63793,63794],{},[594,63795,951],{},[913,63797,63798,63803,63813],{},[931,63799,63800],{"align":977},[594,63801,63802],{},"clip",[931,63804,63805,63806,3132,63808,63810,63811],{"align":977},"Whether to adjust the camera's ",[594,63807,41410],{},[594,63809,39167],{}," settings when using ",[594,63812,63317],{},[931,63814,63815],{},[594,63816,951],{},[913,63818,63819,63824,63834],{},[931,63820,63821],{"align":977},[594,63822,63823],{},"easing",[931,63825,63826,63827,63830,63831],{"align":977},"Animation's easing function. ",[594,63828,63829],{},"t"," and the returned value should be in the interval ",[594,63832,63833],{},"[0, 1]",[931,63835,63836],{},"Cubic ease out",[480,63838,63317],{"id":63839},"lookat",[590,63841,63842,3263,63845,63847,63848,1479,63850,5823,63852,1126],{},[594,63843,63844],{},"\u003CBounds />",[594,63846,63317],{}," points the camera at its first argument: an ",[594,63849,7847],{},[594,63851,7843],{},[594,63853,8413],{},[4191,63855,63857],{"id":63856},"method-signatures","Method Signatures",[602,63859,63862],{"className":63860,"code":63861,"language":28079},[28077],"/**\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",[594,63863,63861],{"__ignoreMap":552},[1307,63865,63866],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":552,"searchDepth":553,"depth":554,"links":63868},[63869,63870,63871],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},{"id":63839,"depth":554,"text":63317,"children":63872},[63873],{"id":63856,"depth":684,"text":63857},"Calculate boundary box and center camera accordingly.",{},{"title":447,"description":63874},"99p1FD8mbl4hP9wZB60es2RXMg_34kRJyloKHcDBk80",{"id":63879,"title":451,"body":63880,"description":64183,"extension":567,"links":568,"meta":64184,"navigation":570,"path":452,"seo":64185,"stem":453,"__hash__":64186},"docs/2.api/miscellaneous/global-audio.md",{"type":477,"value":63881,"toc":64178},[63882,63890,63897,63899,64051,64057,64059,64152,64154,64176],[590,63883,2843,63884,8516,63886,63889],{},[594,63885,7528],{},[594,63887,63888],{},"\u003CGlobalAudio />"," component that serves to easily add a global sound to your scene.",[590,63891,28084,63892],{},[1120,63893,63896],{"href":63894,"rel":63895},"https://threejs.org/docs/index.html?q=audio#api/en/audio/Audio",[1124],"Audio",[480,63898,15],{"id":600},[602,63900,63903],{"className":604,"code":63901,"highlights":63902,"language":609,"meta":552,"style":552},"\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",[684,766],[594,63904,63905,63915,63933,63953,63961,63965,63973,63981,64013,64035,64043],{"__ignoreMap":552},[613,63906,63907,63909,63911,63913],{"class":615,"line":553},[613,63908,619],{"class":618},[613,63910,623],{"class":622},[613,63912,627],{"class":626},[613,63914,645],{"class":618},[613,63916,63917,63919,63921,63923,63925,63927,63929,63931],{"class":615,"line":554},[613,63918,653],{"class":652},[613,63920,656],{"class":618},[613,63922,691],{"class":659},[613,63924,669],{"class":618},[613,63926,672],{"class":652},[613,63928,675],{"class":618},[613,63930,700],{"class":639},[613,63932,681],{"class":618},[613,63934,63936,63938,63940,63943,63945,63947,63949,63951],{"class":63935,"line":684},[615,649],[613,63937,653],{"class":652},[613,63939,656],{"class":618},[613,63941,63942],{"class":659}," GlobalAudio",[613,63944,669],{"class":618},[613,63946,672],{"class":652},[613,63948,675],{"class":618},[613,63950,678],{"class":639},[613,63952,681],{"class":618},[613,63954,63955,63957,63959],{"class":615,"line":705},[613,63956,708],{"class":618},[613,63958,623],{"class":622},[613,63960,645],{"class":618},[613,63962,63963],{"class":615,"line":715},[613,63964,718],{"emptyLinePlaceholder":570},[613,63966,63967,63969,63971],{"class":615,"line":721},[613,63968,619],{"class":618},[613,63970,726],{"class":622},[613,63972,645],{"class":618},[613,63974,63975,63977,63979],{"class":615,"line":731},[613,63976,734],{"class":618},[613,63978,737],{"class":622},[613,63980,645],{"class":618},[613,63982,63983,63985,63987,63989,63991,63993,63995,63997,63999,64001,64003,64005,64007,64009,64011],{"class":615,"line":754},[613,63984,757],{"class":618},[613,63986,760],{"class":622},[613,63988,789],{"class":618},[613,63990,1467],{"class":626},[613,63992,633],{"class":618},[613,63994,636],{"class":618},[613,63996,1474],{"class":618},[613,63998,945],{"class":799},[613,64000,1479],{"class":618},[613,64002,945],{"class":799},[613,64004,1479],{"class":618},[613,64006,9909],{"class":799},[613,64008,1489],{"class":618},[613,64010,636],{"class":618},[613,64012,763],{"class":618},[613,64014,64016,64018,64020,64022,64024,64026,64028,64031,64033],{"class":64015,"line":766},[615,649],[613,64017,757],{"class":618},[613,64019,451],{"class":622},[613,64021,789],{"class":618},[613,64023,23272],{"class":626},[613,64025,633],{"class":618},[613,64027,636],{"class":618},[613,64029,64030],{"class":659},"exampleAudio",[613,64032,636],{"class":618},[613,64034,763],{"class":618},[613,64036,64037,64039,64041],{"class":615,"line":776},[613,64038,885],{"class":618},[613,64040,737],{"class":622},[613,64042,645],{"class":618},[613,64044,64045,64047,64049],{"class":615,"line":781},[613,64046,708],{"class":618},[613,64048,726],{"class":622},[613,64050,645],{"class":618},[590,64052,64053,64054,64056],{},"*The ",[594,64055,23272],{}," prop is required",[480,64058,902],{"id":901},[907,64060,64061,64071],{},[910,64062,64063],{},[913,64064,64065,64067,64069],{},[916,64066,918],{"align":977},[916,64068,921],{"align":977},[916,64070,924],{},[926,64072,64073,64084,64099,64111,64124,64138],{},[913,64074,64075,64079,64082],{},[931,64076,64077],{"align":977},[594,64078,23272],{},[931,64080,64081],{"align":977},"Path to your audio file",[931,64083],{},[913,64085,64086,64091,64094],{},[931,64087,64088],{"align":977},[594,64089,64090],{},"playTrigger",[931,64092,64093],{"align":977},"Id of the DOM element that triggers the play/pause state",[931,64095,64096],{},[594,64097,64098],{},"renderer.domElement",[913,64100,64101,64106,64109],{},[931,64102,64103],{"align":977},[594,64104,64105],{},"stopTrigger",[931,64107,64108],{"align":977},"Id of the DOM element that triggers the stop state",[931,64110],{},[913,64112,64113,64117,64120],{},[931,64114,64115],{"align":977},[594,64116,24716],{},[931,64118,64119],{"align":977},"If the audio must be replayed when ends",[931,64121,64122],{},[594,64123,951],{},[913,64125,64126,64131,64134],{},[931,64127,64128],{"align":977},[594,64129,64130],{},"volume",[931,64132,64133],{"align":977},"Volume of the audio",[931,64135,64136],{},[594,64137,1521],{},[913,64139,64140,64145,64148],{},[931,64141,64142],{"align":977},[594,64143,64144],{},"playbackRate",[931,64146,64147],{"align":977},"PlaybackRate of the audio",[931,64149,64150],{},[594,64151,1901],{},[480,64153,12953],{"id":12952},[907,64155,64156,64164],{},[910,64157,64158],{},[913,64159,64160,64162],{},[916,64161,5969],{"align":977},[916,64163,921],{"align":977},[926,64165,64166],{},[913,64167,64168,64173],{},[931,64169,64170],{"align":977},[594,64171,64172],{},"isPlaying",[931,64174,64175],{"align":977},"Dispatched when the Audio change its state (play, pause or stop)",[1307,64177,13050],{},{"title":552,"searchDepth":553,"depth":554,"links":64179},[64180,64181,64182],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},{"id":12952,"depth":554,"text":12953},"Add global sound to your scene.",{},{"title":451,"description":64183},"XaoiVKl16tz4uOX0ZskSCuPQUgYB0CYUZjEEuh4q_uU",{"id":64188,"title":455,"body":64189,"description":64591,"extension":567,"links":568,"meta":64592,"navigation":570,"path":456,"seo":64593,"stem":457,"__hash__":64594},"docs/2.api/miscellaneous/mouse-parallax.md",{"type":477,"value":64190,"toc":64587},[64191,64196,64208,64210,64216,64224,64233,64238,64524,64526,64585],[584,64192,64193],{},[64194,64195],"miscellaneous-mouse-parallax",{},[590,64197,64198,64201,64202,64207],{},[594,64199,64200],{},"\u003CMouseParallax />"," is a component that allows you to easily create a ",[1120,64203,64206],{"href":64204,"rel":64205},"https://en.wikipedia.org/wiki/Parallax",[1124],"parallax"," effect. The camera will update automatically according to the mouse position.",[480,64209,15],{"id":600},[590,64211,64212,64213,64215],{},"You only need to import and add it to your template as ",[594,64214,64200],{},". Additionally, you can pass the following props:",[590,64217,64218,64220,64221,1126],{},[594,64219,27917],{}," 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: ",[594,64222,64223],{},":factor=[x,y]",[590,64225,64226,64229,64230,1126],{},[594,64227,64228],{},"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: ",[594,64231,64232],{},":ease=[x,y]",[590,64234,64235,64237],{},[594,64236,15422],{}," is a boolean that enables movement based on the position of the mouse on the canvas rather than the window.",[602,64239,64242],{"className":604,"code":64240,"highlights":64241,"language":609,"meta":552,"style":552},"\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",[554,807],[594,64243,64244,64264,64290,64310,64318,64322,64330,64348,64393,64401,64419,64427,64468,64476,64508,64516],{"__ignoreMap":552},[613,64245,64246,64248,64250,64252,64254,64256,64258,64260,64262],{"class":615,"line":553},[613,64247,619],{"class":618},[613,64249,623],{"class":622},[613,64251,627],{"class":626},[613,64253,630],{"class":626},[613,64255,633],{"class":618},[613,64257,636],{"class":618},[613,64259,640],{"class":639},[613,64261,636],{"class":618},[613,64263,645],{"class":618},[613,64265,64267,64269,64271,64274,64276,64278,64280,64282,64284,64286,64288],{"class":64266,"line":554},[615,649],[613,64268,653],{"class":652},[613,64270,656],{"class":618},[613,64272,64273],{"class":659}," MouseParallax",[613,64275,663],{"class":618},[613,64277,38820],{"class":659},[613,64279,669],{"class":618},[613,64281,672],{"class":652},[613,64283,8563],{"class":618},[613,64285,678],{"class":639},[613,64287,636],{"class":618},[613,64289,8570],{"class":618},[613,64291,64292,64294,64296,64298,64300,64302,64304,64306,64308],{"class":615,"line":684},[613,64293,653],{"class":652},[613,64295,656],{"class":618},[613,64297,691],{"class":659},[613,64299,669],{"class":618},[613,64301,672],{"class":652},[613,64303,8563],{"class":618},[613,64305,700],{"class":639},[613,64307,636],{"class":618},[613,64309,8570],{"class":618},[613,64311,64312,64314,64316],{"class":615,"line":705},[613,64313,708],{"class":618},[613,64315,623],{"class":622},[613,64317,645],{"class":618},[613,64319,64320],{"class":615,"line":715},[613,64321,718],{"emptyLinePlaceholder":570},[613,64323,64324,64326,64328],{"class":615,"line":721},[613,64325,619],{"class":618},[613,64327,726],{"class":622},[613,64329,645],{"class":618},[613,64331,64332,64334,64336,64338,64340,64342,64344,64346],{"class":615,"line":731},[613,64333,734],{"class":618},[613,64335,737],{"class":622},[613,64337,740],{"class":626},[613,64339,633],{"class":618},[613,64341,636],{"class":618},[613,64343,10263],{"class":639},[613,64345,636],{"class":618},[613,64347,645],{"class":618},[613,64349,64350,64352,64354,64356,64358,64360,64362,64364,64366,64368,64370,64372,64374,64376,64378,64380,64382,64384,64386,64389,64391],{"class":615,"line":754},[613,64351,757],{"class":618},[613,64353,760],{"class":622},[613,64355,789],{"class":618},[613,64357,1467],{"class":626},[613,64359,633],{"class":618},[613,64361,636],{"class":618},[613,64363,1474],{"class":618},[613,64365,945],{"class":799},[613,64367,1479],{"class":618},[613,64369,945],{"class":799},[613,64371,1479],{"class":618},[613,64373,9909],{"class":799},[613,64375,1489],{"class":618},[613,64377,636],{"class":618},[613,64379,789],{"class":618},[613,64381,30196],{"class":626},[613,64383,633],{"class":618},[613,64385,636],{"class":618},[613,64387,64388],{"class":799},"75",[613,64390,636],{"class":618},[613,64392,763],{"class":618},[613,64394,64395,64397,64399],{"class":615,"line":766},[613,64396,757],{"class":618},[613,64398,33788],{"class":622},[613,64400,645],{"class":618},[613,64402,64403,64405,64407,64409,64411,64413,64415,64417],{"class":615,"line":776},[613,64404,833],{"class":618},[613,64406,11943],{"class":622},[613,64408,2749],{"class":626},[613,64410,633],{"class":618},[613,64412,636],{"class":618},[613,64414,11952],{"class":639},[613,64416,636],{"class":618},[613,64418,763],{"class":618},[613,64420,64421,64423,64425],{"class":615,"line":781},[613,64422,875],{"class":618},[613,64424,33788],{"class":622},[613,64426,645],{"class":618},[613,64428,64430,64432,64434,64436,64438,64440,64442,64444,64446,64448,64450,64452,64454,64456,64458,64460,64462,64464,64466],{"class":64429,"line":807},[615,649],[613,64431,757],{"class":618},[613,64433,455],{"class":622},[613,64435,789],{"class":618},[613,64437,27917],{"class":626},[613,64439,633],{"class":618},[613,64441,636],{"class":618},[613,64443,7668],{"class":799},[613,64445,636],{"class":618},[613,64447,789],{"class":618},[613,64449,64228],{"class":626},[613,64451,633],{"class":618},[613,64453,636],{"class":618},[613,64455,1474],{"class":618},[613,64457,2705],{"class":799},[613,64459,1479],{"class":618},[613,64461,2211],{"class":799},[613,64463,1489],{"class":618},[613,64465,636],{"class":618},[613,64467,763],{"class":618},[613,64469,64470,64472,64474],{"class":615,"line":607},[613,64471,757],{"class":618},[613,64473,8758],{"class":622},[613,64475,763],{"class":618},[613,64477,64478,64480,64482,64484,64486,64488,64490,64492,64494,64496,64498,64500,64502,64504,64506],{"class":615,"line":830},[613,64479,757],{"class":618},[613,64481,8779],{"class":622},[613,64483,789],{"class":618},[613,64485,1467],{"class":626},[613,64487,633],{"class":618},[613,64489,636],{"class":618},[613,64491,1474],{"class":618},[613,64493,945],{"class":799},[613,64495,1479],{"class":618},[613,64497,800],{"class":799},[613,64499,1479],{"class":618},[613,64501,3876],{"class":799},[613,64503,1489],{"class":618},[613,64505,636],{"class":618},[613,64507,763],{"class":618},[613,64509,64510,64512,64514],{"class":615,"line":841},[613,64511,885],{"class":618},[613,64513,737],{"class":622},[613,64515,645],{"class":618},[613,64517,64518,64520,64522],{"class":615,"line":852},[613,64519,708],{"class":618},[613,64521,726],{"class":622},[613,64523,645],{"class":618},[480,64525,902],{"id":901},[907,64527,64528,64538],{},[910,64529,64530],{},[913,64531,64532,64534,64536],{},[916,64533,918],{"align":977},[916,64535,921],{"align":977},[916,64537,924],{},[926,64539,64540,64552,64563,64574],{},[913,64541,64542,64547,64550],{},[931,64543,64544],{"align":977},[1681,64545,64546],{},"disabled",[931,64548,64549],{"align":977},"Enable or disable the effect",[931,64551,951],{},[913,64553,64554,64558,64561],{},[931,64555,64556],{"align":977},[1681,64557,27917],{},[931,64559,64560],{"align":977},"Increase the range of the parallax",[931,64562,55364],{},[913,64564,64565,64569,64572],{},[931,64566,64567],{"align":977},[1681,64568,64228],{},[931,64570,64571],{"align":977},"Increase the camera movement speed",[931,64573,2211],{},[913,64575,64576,64580,64583],{},[931,64577,64578],{"align":977},[1681,64579,15422],{},[931,64581,64582],{"align":977},"Whether the mouse coordinates are calculated from the element or the window",[931,64584,951],{},[1307,64586,1656],{},{"title":552,"searchDepth":553,"depth":554,"links":64588},[64589,64590],{"id":600,"depth":554,"text":15},{"id":901,"depth":554,"text":902},"Create parallax effects based on mouse movement.",{},{"title":455,"description":64591},"-wMRikeU1CMiiuet3URQZ7L0rwjhY5Q0pVMViyyOwK0",{"id":64596,"title":459,"body":64597,"description":65696,"extension":567,"links":568,"meta":65697,"navigation":570,"path":460,"seo":65698,"stem":461,"__hash__":65699},"docs/2.api/miscellaneous/positional-audio.md",{"type":477,"value":64598,"toc":65689},[64599,64604,64617,64627,64629,64644,64924,64952,64956,64961,64963,65157,65159,65231,65461,65657,65659,65686],[584,64600,64601],{},[64602,64603],"miscellaneous-positional-audio",{},[590,64605,2843,64606,60188,64608,64612,64613,64616],{},[594,64607,7528],{},[1120,64609,459],{"href":64610,"rel":64611},"https://threejs.org/docs/index.html?q=posi#api/en/audio/PositionalAudio",[1124],".\n",[594,64614,64615],{},"\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.",[590,64618,64619,64621,64622,34710],{},[594,64620,64615],{}," includes a helper 🛠️ that allows you to view the directional cone of te audio. The helper is based on the ",[1120,64623,64626],{"href":64624,"rel":64625},"https://threejs.org/docs/#examples/en/helpers/PositionalAudioHelper",[1124],"PositionalAudioHelper",[480,64628,15],{"id":600},[590,64630,2843,64631,64633,64634,64636,64637,64639,64640,64643],{},[594,64632,64615],{}," 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 ",[594,64635,64615],{}," component and set the ",[594,64638,59134],{},". It must be wrapped around the ",[594,64641,64642],{},"\u003CSuspense>"," component to enable it to load your audio asynchronously. 💥",[602,64645,64648],{"className":604,"code":64646,"highlights":64647,"language":609,"meta":552,"style":552},"\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",[554,862,608,882],[594,64649,64650,64670,64694,64716,64720,64737,64741,64753,64768,64774,64782,64786,64794,64802,64834,64842,64850,64858,64873,64888,64892,64900,64908,64916],{"__ignoreMap":552},[613,64651,64652,64654,64656,64658,64660,64662,64664,64666,64668],{"class":615,"line":553},[613,64653,619],{"class":618},[613,64655,623],{"class":622},[613,64657,627],{"class":626},[613,64659,630],{"class":626},[613,64661,633],{"class":618},[613,64663,636],{"class":618},[613,64665,640],{"class":639},[613,64667,636],{"class":618},[613,64669,645],{"class":618},[613,64671,64673,64675,64677,64679,64681,64684,64686,64688,64690,64692],{"class":64672,"line":554},[615,649],[613,64674,653],{"class":652},[613,64676,656],{"class":618},[613,64678,1377],{"class":659},[613,64680,663],{"class":618},[613,64682,64683],{"class":659}," PositionalAudio",[613,64685,669],{"class":618},[613,64687,672],{"class":652},[613,64689,675],{"class":618},[613,64691,678],{"class":639},[613,64693,681],{"class":618},[613,64695,64696,64698,64700,64702,64704,64706,64708,64710,64712,64714],{"class":615,"line":684},[613,64697,653],{"class":652},[613,64699,656],{"class":618},[613,64701,22290],{"class":659},[613,64703,663],{"class":618},[613,64705,3567],{"class":659},[613,64707,669],{"class":618},[613,64709,672],{"class":652},[613,64711,675],{"class":618},[613,64713,609],{"class":639},[613,64715,681],{"class":618},[613,64717,64718],{"class":615,"line":705},[613,64719,718],{"emptyLinePlaceholder":570},[613,64721,64722,64724,64727,64729,64731,64733,64735],{"class":615,"line":715},[613,64723,2463],{"class":626},[613,64725,64726],{"class":659}," positionalAudioRef ",[613,64728,633],{"class":618},[613,64730,3567],{"class":2482},[613,64732,2485],{"class":659},[613,64734,3725],{"class":618},[613,64736,2496],{"class":659},[613,64738,64739],{"class":615,"line":721},[613,64740,718],{"emptyLinePlaceholder":570},[613,64742,64743,64745,64747,64749,64751],{"class":615,"line":731},[613,64744,22337],{"class":2482},[613,64746,2485],{"class":659},[613,64748,3743],{"class":618},[613,64750,3746],{"class":626},[613,64752,1184],{"class":618},[613,64754,64755,64758,64760,64762,64764,64766],{"class":615,"line":754},[613,64756,64757],{"class":659}," positionalAudioRef",[613,64759,3757],{"class":618},[613,64761,3754],{"class":659},[613,64763,3757],{"class":618},[613,64765,21387],{"class":2482},[613,64767,6745],{"class":622},[613,64769,64770,64772],{"class":615,"line":766},[613,64771,2476],{"class":618},[613,64773,2496],{"class":659},[613,64775,64776,64778,64780],{"class":615,"line":776},[613,64777,708],{"class":618},[613,64779,623],{"class":622},[613,64781,645],{"class":618},[613,64783,64784],{"class":615,"line":781},[613,64785,718],{"emptyLinePlaceholder":570},[613,64787,64788,64790,64792],{"class":615,"line":807},[613,64789,619],{"class":618},[613,64791,726],{"class":622},[613,64793,645],{"class":618},[613,64795,64796,64798,64800],{"class":615,"line":607},[613,64797,734],{"class":618},[613,64799,737],{"class":622},[613,64801,645],{"class":618},[613,64803,64804,64806,64808,64810,64812,64814,64816,64818,64820,64822,64824,64826,64828,64830,64832],{"class":615,"line":830},[613,64805,757],{"class":618},[613,64807,197],{"class":622},[613,64809,789],{"class":618},[613,64811,1997],{"class":626},[613,64813,633],{"class":618},[613,64815,636],{"class":618},[613,64817,1474],{"class":618},[613,64819,1901],{"class":799},[613,64821,1479],{"class":618},[613,64823,1901],{"class":799},[613,64825,1479],{"class":618},[613,64827,1901],{"class":799},[613,64829,1489],{"class":618},[613,64831,636],{"class":618},[613,64833,645],{"class":618},[613,64835,64836,64838,64840],{"class":615,"line":841},[613,64837,833],{"class":618},[613,64839,857],{"class":622},[613,64841,763],{"class":618},[613,64843,64844,64846,64848],{"class":615,"line":852},[613,64845,833],{"class":618},[613,64847,20168],{"class":622},[613,64849,645],{"class":618},[613,64851,64853,64855],{"class":64852,"line":862},[615,649],[613,64854,844],{"class":618},[613,64856,64857],{"class":622},"PositionalAudio\n",[613,64859,64861,64864,64866,64868,64871],{"class":64860,"line":608},[615,649],[613,64862,64863],{"class":626}," ref",[613,64865,633],{"class":618},[613,64867,636],{"class":618},[613,64869,64870],{"class":639},"positionalAudioRef",[613,64872,3200],{"class":618},[613,64874,64876,64879,64881,64883,64886],{"class":64875,"line":882},[615,649],[613,64877,64878],{"class":626}," url",[613,64880,633],{"class":618},[613,64882,636],{"class":618},[613,64884,64885],{"class":639},"your-sound.mp3",[613,64887,3200],{"class":618},[613,64889,64890],{"class":615,"line":892},[613,64891,52553],{"class":618},[613,64893,64894,64896,64898],{"class":615,"line":2671},[613,64895,865],{"class":618},[613,64897,20168],{"class":622},[613,64899,645],{"class":618},[613,64901,64902,64904,64906],{"class":615,"line":2680},[613,64903,875],{"class":618},[613,64905,197],{"class":622},[613,64907,645],{"class":618},[613,64909,64910,64912,64914],{"class":615,"line":2714},[613,64911,885],{"class":618},[613,64913,737],{"class":622},[613,64915,645],{"class":618},[613,64917,64918,64920,64922],{"class":615,"line":2723},[613,64919,708],{"class":618},[613,64921,726],{"class":622},[613,64923,645],{"class":618},[3268,64925,64926],{},[590,64927,64928,64929,64932,64933,64940,64941,64944,64945,3132,64948,64951],{},"AudioContext is authorized when a user gesture has been made on the page. The property ",[594,64930,64931],{},":autoplay=\"true\""," cannot be activated if no user gesture has been made previously ",[1120,64934,64937],{"href":64935,"rel":64936},"https://goo.gl/7K7WLu",[1124],[594,64938,64939],{},"read more",".\nIf you are sure that there will be a user gesture before your ",[594,64942,64943],{},"\u003CPositionAudio>"," component appears/is created, you can directly add ",[594,64946,64947],{},":ready=\"true\"",[594,64949,64950],{},"autoplay=\"true\""," for a direct launch.",[480,64953,64955],{"id":64954},"how-does-it-work","How does it work?",[8508,64957],{"className":64958,"src":64960},[64959],"mx-auto","/cientos/sketch.jpg",[480,64962,902],{"id":901},[907,64964,64965,64975],{},[910,64966,64967],{},[913,64968,64969,64971,64973],{},[916,64970,918],{"align":977},[916,64972,921],{"align":977},[916,64974,924],{},[926,64976,64977,64993,65014,65034,65067,65085,65100,65117,65136],{},[913,64978,64979,64983,64991],{},[931,64980,64981],{"align":977},[1681,64982,59134],{},[931,64984,64985,54676,64987,64990],{"align":977},[594,64986,3641],{},[1681,64988,64989],{},"required"," — The path or URL to the file.",[931,64992],{},[913,64994,64995,65000,65010],{},[931,64996,64997],{"align":977},[1681,64998,64999],{},"helper",[931,65001,65002,65004,65005,3263,65007],{"align":977},[594,65003,16208],{}," — Selects whether helper mode is enabled. ",[7780,65006],{},[1685,65008,65009],{},"(Useful for visualising the angle of sound propagation)",[931,65011,65012],{},[594,65013,951],{},[913,65015,65016,65020,65030],{},[931,65017,65018],{"align":977},[1681,65019,12159],{},[931,65021,65022,65024,65025],{"align":977},[594,65023,5565],{}," — The distance at which the volume reduction starts taking effect. ",[1685,65026,65027],{},[1681,65028,65029],{},"A non-negative number.",[931,65031,65032],{},[594,65033,1901],{},[913,65035,65036,65041,65063],{},[931,65037,65038],{"align":977},[1681,65039,65040],{},"ready",[931,65042,65043,65045,65046,65048,65049,65052,65053,65056,65057,65060,65061],{"align":977},[594,65044,16208],{}," — Tells ",[594,65047,64615],{}," that ",[594,65050,65051],{},"AudioContext"," is authorised because an user gesture has been made on the page. This is imperative, as ",[594,65054,65055],{},"autoplay"," cannot be activated if no user gesture has been made previously (",[1120,65058,64935],{"href":64935,"rel":65059},[1124],"). ",[7780,65062],{},[931,65064,65065],{},[594,65066,951],{},[913,65068,65069,65073,65081],{},[931,65070,65071],{"align":977},[1681,65072,65055],{},[931,65074,65075,65077,65078,65080],{"align":977},[594,65076,16208],{}," — Selects whether the audio is launched automatically. Please refer to the ",[594,65079,65040],{}," prop for a better understanding of how to use autoplay.",[931,65082,65083],{},[594,65084,951],{},[913,65086,65087,65091,65096],{},[931,65088,65089],{"align":977},[1681,65090,24716],{},[931,65092,65093,65095],{"align":977},[594,65094,16208],{}," — Specifies whether the audio should loop.",[931,65097,65098],{},[594,65099,951],{},[913,65101,65102,65107,65112],{},[931,65103,65104],{"align":977},[1681,65105,65106],{},"innerAngle",[931,65108,65109,65111],{"align":977},[594,65110,5565],{}," — A parameter for directional audio sources, this is an angle, inside of which there will be no volume reduction.",[931,65113,65114],{},[594,65115,65116],{},"360",[913,65118,65119,65124,65132],{},[931,65120,65121],{"align":977},[1681,65122,65123],{},"outerAngle",[931,65125,65126,65128,65129,39534],{"align":977},[594,65127,5565],{}," — A parameter for directional audio sources, this is an angle, outside of which the volume will be reduced to a constant value of ",[594,65130,65131],{},"outerGain",[931,65133,65134],{},[594,65135,945],{},[913,65137,65138,65142,65153],{},[931,65139,65140],{"align":977},[1681,65141,65131],{},[931,65143,65144,65146,65147,65149,65150,65152],{"align":977},[594,65145,5565],{}," — A parameter for directional audio sources, this is the amount of volume reduction outside of the ",[594,65148,65123],{}," prop. When the value is ",[594,65151,945],{}," no sound can be heard.",[931,65154,65155],{},[594,65156,945],{},[480,65158,58207],{"id":58206},[907,65160,65161,65169],{},[910,65162,65163],{},[913,65164,65165,65167],{},[916,65166,5969],{"align":977},[916,65168,921],{"align":977},[926,65170,65171,65183,65196,65209,65222],{},[913,65172,65173,65177],{},[931,65174,65175],{"align":977},[594,65176,25702],{},[931,65178,65179,65180,1126],{"align":977},"Instance reference — Inheritance of ",[1120,65181,459],{"href":64610,"rel":65182},[1124],[913,65184,65185,65190],{},[931,65186,65187],{"align":977},[594,65188,65189],{},"play()",[931,65191,65192,65193],{"align":977},"Play audio — ",[1685,65194,65195],{},"Cannot be fired if audio is already running.",[913,65197,65198,65203],{},[931,65199,65200],{"align":977},[594,65201,65202],{},"pause()",[931,65204,65205,65206],{"align":977},"Pause audio — ",[1685,65207,65208],{},"Cannot be fired if audio is already paused.",[913,65210,65211,65216],{},[931,65212,65213],{"align":977},[594,65214,65215],{},"stop()",[931,65217,65218,65219],{"align":977},"Stop audio — ",[1685,65220,65221],{},"Cannot be fired if audio is already stopped.",[913,65223,65224,65228],{},[931,65225,65226],{"align":977},[594,65227,23535],{},[931,65229,65230],{"align":977},"Dispose component — Deletion of the AudioListener in the camera, disconnection of the audio source and deletion of the PositionalAudioHelper (if it exists).",[602,65232,65236],{"className":65233,"code":65234,"language":65235,"meta":552,"style":552},"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",[594,65237,65238,65254,65258,65282,65286,65310,65332,65336,65366,65370,65397,65428,65457],{"__ignoreMap":552},[613,65239,65240,65242,65244,65246,65248,65250,65252],{"class":615,"line":553},[613,65241,2463],{"class":626},[613,65243,64726],{"class":659},[613,65245,633],{"class":618},[613,65247,3567],{"class":2482},[613,65249,2485],{"class":659},[613,65251,3725],{"class":618},[613,65253,2496],{"class":659},[613,65255,65256],{"class":615,"line":554},[613,65257,718],{"emptyLinePlaceholder":570},[613,65259,65260,65263,65265,65267,65270,65272,65274,65276,65279],{"class":615,"line":684},[613,65261,65262],{"class":659},"console",[613,65264,1126],{"class":618},[613,65266,7070],{"class":2482},[613,65268,65269],{"class":659},"(positionalAudioRef",[613,65271,1126],{"class":618},[613,65273,3754],{"class":659},[613,65275,1126],{"class":618},[613,65277,65278],{"class":659},"instance) ",[613,65280,65281],{"class":1189},"// instance properties\n",[613,65283,65284],{"class":615,"line":705},[613,65285,718],{"emptyLinePlaceholder":570},[613,65287,65288,65290,65293,65295,65297,65300,65302,65304,65306,65308],{"class":615,"line":715},[613,65289,2463],{"class":626},[613,65291,65292],{"class":659}," handlerAudio ",[613,65294,633],{"class":618},[613,65296,3143],{"class":618},[613,65298,65299],{"class":7049},"action",[613,65301,1198],{"class":618},[613,65303,5550],{"class":1180},[613,65305,3409],{"class":618},[613,65307,3746],{"class":626},[613,65309,1184],{"class":618},[613,65311,65312,65314,65316,65318,65320,65322,65324,65326,65328,65330],{"class":615,"line":721},[613,65313,19771],{"class":652},[613,65315,3143],{"class":622},[613,65317,20850],{"class":618},[613,65319,64870],{"class":659},[613,65321,1126],{"class":618},[613,65323,3754],{"class":659},[613,65325,4893],{"class":622},[613,65327,39867],{"class":618},[613,65329,51348],{"class":652},[613,65331,20808],{"class":618},[613,65333,65334],{"class":615,"line":731},[613,65335,718],{"emptyLinePlaceholder":570},[613,65337,65338,65340,65342,65345,65347,65350,65352,65355,65357,65359,65362,65364],{"class":615,"line":754},[613,65339,56425],{"class":626},[613,65341,656],{"class":618},[613,65343,65344],{"class":659}," play",[613,65346,663],{"class":618},[613,65348,65349],{"class":659}," pause",[613,65351,663],{"class":618},[613,65353,65354],{"class":659}," stop",[613,65356,669],{"class":618},[613,65358,2479],{"class":618},[613,65360,65361],{"class":659}," positionalAudioRef",[613,65363,1126],{"class":618},[613,65365,22513],{"class":659},[613,65367,65368],{"class":615,"line":766},[613,65369,718],{"emptyLinePlaceholder":570},[613,65371,65372,65374,65376,65378,65380,65382,65385,65387,65389,65391,65393,65395],{"class":615,"line":776},[613,65373,19771],{"class":652},[613,65375,3143],{"class":622},[613,65377,65299],{"class":659},[613,65379,19792],{"class":618},[613,65381,675],{"class":618},[613,65383,65384],{"class":639},"play",[613,65386,2488],{"class":618},[613,65388,4893],{"class":622},[613,65390,39867],{"class":618},[613,65392,65344],{"class":2482},[613,65394,7195],{"class":622},[613,65396,1305],{"class":618},[613,65398,65399,65402,65405,65407,65409,65411,65413,65416,65418,65420,65422,65424,65426],{"class":615,"line":781},[613,65400,65401],{"class":652}," else",[613,65403,65404],{"class":652}," if",[613,65406,3143],{"class":622},[613,65408,65299],{"class":659},[613,65410,19792],{"class":618},[613,65412,675],{"class":618},[613,65414,65415],{"class":639},"pause",[613,65417,2488],{"class":618},[613,65419,4893],{"class":622},[613,65421,39867],{"class":618},[613,65423,65349],{"class":2482},[613,65425,7195],{"class":622},[613,65427,1305],{"class":618},[613,65429,65430,65432,65434,65436,65438,65440,65442,65445,65447,65449,65451,65453,65455],{"class":615,"line":807},[613,65431,65401],{"class":652},[613,65433,65404],{"class":652},[613,65435,3143],{"class":622},[613,65437,65299],{"class":659},[613,65439,19792],{"class":618},[613,65441,675],{"class":618},[613,65443,65444],{"class":639},"stop",[613,65446,2488],{"class":618},[613,65448,4893],{"class":622},[613,65450,39867],{"class":618},[613,65452,65354],{"class":2482},[613,65454,7195],{"class":622},[613,65456,1305],{"class":618},[613,65458,65459],{"class":615,"line":607},[613,65460,1305],{"class":618},[602,65462,65464],{"className":604,"code":65463,"language":609,"meta":552,"style":552},"\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",[594,65465,65466,65474,65513,65551,65589,65593,65601,65609,65617,65625,65633,65641,65649],{"__ignoreMap":552},[613,65467,65468,65470,65472],{"class":615,"line":553},[613,65469,619],{"class":618},[613,65471,726],{"class":622},[613,65473,645],{"class":618},[613,65475,65476,65478,65480,65482,65484,65486,65488,65491,65493,65495,65497,65499,65501,65503,65505,65507,65509,65511],{"class":615,"line":554},[613,65477,734],{"class":618},[613,65479,36324],{"class":622},[613,65481,4393],{"class":618},[613,65483,36329],{"class":626},[613,65485,633],{"class":618},[613,65487,636],{"class":618},[613,65489,65490],{"class":2482},"handlerAudio",[613,65492,2485],{"class":618},[613,65494,2488],{"class":618},[613,65496,65384],{"class":639},[613,65498,2488],{"class":618},[613,65500,3409],{"class":618},[613,65502,636],{"class":618},[613,65504,3720],{"class":618},[613,65506,65384],{"class":659},[613,65508,708],{"class":618},[613,65510,36324],{"class":622},[613,65512,645],{"class":618},[613,65514,65515,65517,65519,65521,65523,65525,65527,65529,65531,65533,65535,65537,65539,65541,65543,65545,65547,65549],{"class":615,"line":684},[613,65516,734],{"class":618},[613,65518,36324],{"class":622},[613,65520,4393],{"class":618},[613,65522,36329],{"class":626},[613,65524,633],{"class":618},[613,65526,636],{"class":618},[613,65528,65490],{"class":2482},[613,65530,2485],{"class":618},[613,65532,2488],{"class":618},[613,65534,65415],{"class":639},[613,65536,2488],{"class":618},[613,65538,3409],{"class":618},[613,65540,636],{"class":618},[613,65542,3720],{"class":618},[613,65544,65415],{"class":659},[613,65546,708],{"class":618},[613,65548,36324],{"class":622},[613,65550,645],{"class":618},[613,65552,65553,65555,65557,65559,65561,65563,65565,65567,65569,65571,65573,65575,65577,65579,65581,65583,65585,65587],{"class":615,"line":705},[613,65554,734],{"class":618},[613,65556,36324],{"class":622},[613,65558,4393],{"class":618},[613,65560,36329],{"class":626},[613,65562,633],{"class":618},[613,65564,636],{"class":618},[613,65566,65490],{"class":2482},[613,65568,2485],{"class":618},[613,65570,2488],{"class":618},[613,65572,65444],{"class":639},[613,65574,2488],{"class":618},[613,65576,3409],{"class":618},[613,65578,636],{"class":618},[613,65580,3720],{"class":618},[613,65582,65444],{"class":659},[613,65584,708],{"class":618},[613,65586,36324],{"class":622},[613,65588,645],{"class":618},[613,65590,65591],{"class":615,"line":715},[613,65592,718],{"emptyLinePlaceholder":570},[613,65594,65595,65597,65599],{"class":615,"line":721},[613,65596,734],{"class":618},[613,65598,737],{"class":622},[613,65600,645],{"class":618},[613,65602,65603,65605,65607],{"class":615,"line":731},[613,65604,757],{"class":618},[613,65606,261],{"class":622},[613,65608,645],{"class":618},[613,65610,65611,65613,65615],{"class":615,"line":754},[613,65612,833],{"class":618},[613,65614,20168],{"class":622},[613,65616,645],{"class":618},[613,65618,65619,65621,65623],{"class":615,"line":766},[613,65620,844],{"class":618},[613,65622,459],{"class":622},[613,65624,763],{"class":618},[613,65626,65627,65629,65631],{"class":615,"line":776},[613,65628,865],{"class":618},[613,65630,20168],{"class":622},[613,65632,645],{"class":618},[613,65634,65635,65637,65639],{"class":615,"line":781},[613,65636,875],{"class":618},[613,65638,261],{"class":622},[613,65640,645],{"class":618},[613,65642,65643,65645,65647],{"class":615,"line":807},[613,65644,885],{"class":618},[613,65646,737],{"class":622},[613,65648,645],{"class":618},[613,65650,65651,65653,65655],{"class":615,"line":607},[613,65652,708],{"class":618},[613,65654,726],{"class":622},[613,65656,645],{"class":618},[480,65658,12953],{"id":12952},[907,65660,65661,65669],{},[910,65662,65663],{},[913,65664,65665,65667],{},[916,65666,5969],{"align":977},[916,65668,921],{"align":977},[926,65670,65671],{},[913,65672,65673,65678],{},[931,65674,65675],{"align":977},[594,65676,65677],{},"is-playing",[931,65679,65680,65681,3263,65683],{"align":977},"Triggered when the audio changes its state (play, pause, or stop) ",[7780,65682],{},[594,65684,65685],{},"@is-playing=\"(e) => yourIsPlayingRef = e\"",[1307,65687,65688],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":552,"searchDepth":553,"depth":554,"links":65690},[65691,65692,65693,65694,65695],{"id":600,"depth":554,"text":15},{"id":64954,"depth":554,"text":64955},{"id":901,"depth":554,"text":902},{"id":58206,"depth":554,"text":58207},{"id":12952,"depth":554,"text":12953},"Spatially positioned audio in 3D space.",{},{"title":459,"description":65696},"LsmuqynUpKNFwOEvnJJepUiBRKPh7SYxe1fcp-_mrT4",{"id":65701,"title":463,"body":65702,"description":66330,"extension":567,"links":568,"meta":66331,"navigation":570,"path":464,"seo":66332,"stem":465,"__hash__":66333},"docs/2.api/miscellaneous/use-animations.md",{"type":477,"value":65703,"toc":66323},[65704,65718,65720,65724,65734,65961,65965,65972,66300,66302,66320],[590,65705,65706,65708,65709,65712,65713,34710],{},[594,65707,463],{}," is a composable that returns a ",[594,65710,65711],{},"shallowReactive"," with all the models actions based on the animations provided. It is a wrapper around the ",[1120,65714,65717],{"href":65715,"rel":65716},"https://threejs.org/docs/#api/en/animation/AnimationMixer",[1124],"AnimationMixer",[480,65719,15],{"id":600},[4191,65721,65723],{"id":65722},"basic-usage-automatic-updates","Basic Usage (Automatic Updates)",[590,65725,65726,65727,65729,65730,65733],{},"By default, ",[594,65728,463],{}," automatically updates the animation mixer on each frame using the ",[594,65731,65732],{},"useLoop"," composable:",[602,65735,65738],{"className":1166,"code":65736,"highlights":65737,"language":640,"meta":552,"style":552},"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",[553,731],[594,65739,65740,65764,65768,65793,65797,65831,65857,65881,65885,65898,65902,65922,65941,65955],{"__ignoreMap":552},[613,65741,65743,65745,65747,65750,65752,65754,65756,65758,65760,65762],{"class":65742,"line":553},[615,649],[613,65744,653],{"class":652},[613,65746,656],{"class":618},[613,65748,65749],{"class":659}," useAnimations",[613,65751,663],{"class":618},[613,65753,4486],{"class":659},[613,65755,669],{"class":618},[613,65757,672],{"class":652},[613,65759,675],{"class":618},[613,65761,678],{"class":639},[613,65763,681],{"class":618},[613,65765,65766],{"class":615,"line":554},[613,65767,718],{"emptyLinePlaceholder":570},[613,65769,65770,65772,65774,65776,65778,65780,65782,65784,65786,65789,65791],{"class":615,"line":684},[613,65771,2463],{"class":626},[613,65773,656],{"class":618},[613,65775,59224],{"class":659},[613,65777,2476],{"class":618},[613,65779,2479],{"class":618},[613,65781,4486],{"class":2482},[613,65783,2485],{"class":659},[613,65785,2488],{"class":618},[613,65787,65788],{"class":639},"/models/ugly-naked-bunny.gltf",[613,65790,2488],{"class":618},[613,65792,2496],{"class":659},[613,65794,65795],{"class":615,"line":705},[613,65796,718],{"emptyLinePlaceholder":570},[613,65798,65799,65801,65804,65806,65808,65810,65812,65814,65816,65818,65820,65822,65825,65828],{"class":615,"line":715},[613,65800,2463],{"class":626},[613,65802,65803],{"class":659}," animations ",[613,65805,633],{"class":618},[613,65807,3558],{"class":2482},[613,65809,2485],{"class":659},[613,65811,3743],{"class":618},[613,65813,3746],{"class":626},[613,65815,2468],{"class":659},[613,65817,1126],{"class":618},[613,65819,3754],{"class":659},[613,65821,3757],{"class":618},[613,65823,65824],{"class":659},"animations ",[613,65826,65827],{"class":618},"||",[613,65829,65830],{"class":659}," [])\n",[613,65832,65833,65835,65837,65839,65841,65843,65845,65847,65849,65851,65853,65855],{"class":615,"line":721},[613,65834,2463],{"class":626},[613,65836,5188],{"class":659},[613,65838,633],{"class":618},[613,65840,3558],{"class":2482},[613,65842,2485],{"class":659},[613,65844,3743],{"class":618},[613,65846,3746],{"class":626},[613,65848,2468],{"class":659},[613,65850,3757],{"class":618},[613,65852,3754],{"class":659},[613,65854,3757],{"class":618},[613,65856,5236],{"class":659},[613,65858,65860,65862,65864,65867,65869,65871,65873,65876,65878],{"class":65859,"line":731},[615,649],[613,65861,2463],{"class":626},[613,65863,656],{"class":618},[613,65865,65866],{"class":659}," actions ",[613,65868,2476],{"class":618},[613,65870,2479],{"class":618},[613,65872,65749],{"class":2482},[613,65874,65875],{"class":659},"(animations",[613,65877,663],{"class":618},[613,65879,65880],{"class":659}," model)\n",[613,65882,65883],{"class":615,"line":754},[613,65884,718],{"emptyLinePlaceholder":570},[613,65886,65887,65889,65892,65894,65896],{"class":615,"line":766},[613,65888,2463],{"class":626},[613,65890,65891],{"class":659}," currentAction ",[613,65893,633],{"class":618},[613,65895,3975],{"class":2482},[613,65897,6745],{"class":659},[613,65899,65900],{"class":615,"line":776},[613,65901,718],{"emptyLinePlaceholder":570},[613,65903,65904,65906,65909,65911,65913,65916,65918,65920],{"class":615,"line":781},[613,65905,10705],{"class":2482},[613,65907,65908],{"class":659},"(actions",[613,65910,663],{"class":618},[613,65912,3143],{"class":618},[613,65914,65915],{"class":7049},"newActions",[613,65917,3409],{"class":618},[613,65919,3746],{"class":626},[613,65921,1184],{"class":618},[613,65923,65924,65927,65929,65931,65933,65936,65938],{"class":615,"line":807},[613,65925,65926],{"class":659}," currentAction",[613,65928,1126],{"class":618},[613,65930,3754],{"class":659},[613,65932,2479],{"class":618},[613,65934,65935],{"class":659}," newActions",[613,65937,1126],{"class":618},[613,65939,65940],{"class":659},"Greeting\n",[613,65942,65943,65945,65947,65949,65951,65953],{"class":615,"line":607},[613,65944,65926],{"class":659},[613,65946,1126],{"class":618},[613,65948,3754],{"class":659},[613,65950,1126],{"class":618},[613,65952,65384],{"class":2482},[613,65954,6745],{"class":622},[613,65956,65957,65959],{"class":615,"line":830},[613,65958,2476],{"class":618},[613,65960,2496],{"class":659},[4191,65962,65964],{"id":65963},"manual-updates","Manual Updates",[590,65966,65967,65968,65971],{},"To gain finer control over animation mixer updates, enable ",[594,65969,65970],{},"manualUpdate: true"," and manage the update cycle manually.",[602,65973,65976],{"className":1166,"code":65974,"highlights":65975,"language":640,"meta":552,"style":552},"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",[553,754,766,776,841],[594,65977,65978,66001,66019,66023,66047,66051,66081,66107,66138,66150,66157,66161,66166,66182,66199,66220,66226,66230,66242,66246,66264,66280,66294],{"__ignoreMap":552},[613,65979,65981,65983,65985,65987,65989,65991,65993,65995,65997,65999],{"class":65980,"line":553},[615,649],[613,65982,653],{"class":652},[613,65984,656],{"class":618},[613,65986,65749],{"class":659},[613,65988,663],{"class":618},[613,65990,4486],{"class":659},[613,65992,669],{"class":618},[613,65994,672],{"class":652},[613,65996,675],{"class":618},[613,65998,678],{"class":639},[613,66000,681],{"class":618},[613,66002,66003,66005,66007,66009,66011,66013,66015,66017],{"class":615,"line":554},[613,66004,653],{"class":652},[613,66006,656],{"class":618},[613,66008,60621],{"class":659},[613,66010,669],{"class":618},[613,66012,672],{"class":652},[613,66014,675],{"class":618},[613,66016,700],{"class":639},[613,66018,681],{"class":618},[613,66020,66021],{"class":615,"line":684},[613,66022,718],{"emptyLinePlaceholder":570},[613,66024,66025,66027,66029,66031,66033,66035,66037,66039,66041,66043,66045],{"class":615,"line":705},[613,66026,2463],{"class":626},[613,66028,656],{"class":618},[613,66030,59224],{"class":659},[613,66032,2476],{"class":618},[613,66034,2479],{"class":618},[613,66036,4486],{"class":2482},[613,66038,2485],{"class":659},[613,66040,2488],{"class":618},[613,66042,65788],{"class":639},[613,66044,2488],{"class":618},[613,66046,2496],{"class":659},[613,66048,66049],{"class":615,"line":715},[613,66050,718],{"emptyLinePlaceholder":570},[613,66052,66053,66055,66057,66059,66061,66063,66065,66067,66069,66071,66073,66075,66077,66079],{"class":615,"line":721},[613,66054,2463],{"class":626},[613,66056,65803],{"class":659},[613,66058,633],{"class":618},[613,66060,3558],{"class":2482},[613,66062,2485],{"class":659},[613,66064,3743],{"class":618},[613,66066,3746],{"class":626},[613,66068,2468],{"class":659},[613,66070,1126],{"class":618},[613,66072,3754],{"class":659},[613,66074,3757],{"class":618},[613,66076,65824],{"class":659},[613,66078,65827],{"class":618},[613,66080,65830],{"class":659},[613,66082,66083,66085,66087,66089,66091,66093,66095,66097,66099,66101,66103,66105],{"class":615,"line":731},[613,66084,2463],{"class":626},[613,66086,5188],{"class":659},[613,66088,633],{"class":618},[613,66090,3558],{"class":2482},[613,66092,2485],{"class":659},[613,66094,3743],{"class":618},[613,66096,3746],{"class":626},[613,66098,2468],{"class":659},[613,66100,3757],{"class":618},[613,66102,3754],{"class":659},[613,66104,3757],{"class":618},[613,66106,5236],{"class":659},[613,66108,66110,66112,66114,66117,66119,66122,66124,66126,66128,66130,66132,66134,66136],{"class":66109,"line":754},[615,649],[613,66111,2463],{"class":626},[613,66113,656],{"class":618},[613,66115,66116],{"class":659}," actions",[613,66118,663],{"class":618},[613,66120,66121],{"class":659}," mixer ",[613,66123,2476],{"class":618},[613,66125,2479],{"class":618},[613,66127,65749],{"class":2482},[613,66129,65875],{"class":659},[613,66131,663],{"class":618},[613,66133,5227],{"class":659},[613,66135,663],{"class":618},[613,66137,1184],{"class":618},[613,66139,66141,66144,66146,66148],{"class":66140,"line":766},[615,649],[613,66142,66143],{"class":622}," manualUpdate",[613,66145,1198],{"class":618},[613,66147,4537],{"class":4536},[613,66149,2536],{"class":618},[613,66151,66153,66155],{"class":66152,"line":776},[615,649],[613,66154,2476],{"class":618},[613,66156,2496],{"class":659},[613,66158,66159],{"class":615,"line":781},[613,66160,718],{"emptyLinePlaceholder":570},[613,66162,66163],{"class":615,"line":807},[613,66164,66165],{"class":1189},"// Handle updates manually\n",[613,66167,66168,66170,66172,66174,66176,66178,66180],{"class":615,"line":607},[613,66169,2463],{"class":626},[613,66171,656],{"class":618},[613,66173,60950],{"class":659},[613,66175,2476],{"class":618},[613,66177,2479],{"class":618},[613,66179,60621],{"class":2482},[613,66181,6745],{"class":659},[613,66183,66184,66186,66188,66190,66193,66195,66197],{"class":615,"line":830},[613,66185,60963],{"class":2482},[613,66187,2485],{"class":659},[613,66189,37855],{"class":618},[613,66191,66192],{"class":7049}," delta",[613,66194,37872],{"class":618},[613,66196,3746],{"class":626},[613,66198,1184],{"class":618},[613,66200,66202,66205,66207,66209,66211,66213,66215,66218],{"class":66201,"line":841},[615,649],[613,66203,66204],{"class":659}," mixer",[613,66206,1126],{"class":618},[613,66208,3754],{"class":659},[613,66210,1126],{"class":618},[613,66212,6013],{"class":2482},[613,66214,2485],{"class":622},[613,66216,66217],{"class":659},"delta",[613,66219,2496],{"class":622},[613,66221,66222,66224],{"class":615,"line":852},[613,66223,2476],{"class":618},[613,66225,2496],{"class":659},[613,66227,66228],{"class":615,"line":862},[613,66229,718],{"emptyLinePlaceholder":570},[613,66231,66232,66234,66236,66238,66240],{"class":615,"line":608},[613,66233,2463],{"class":626},[613,66235,65891],{"class":659},[613,66237,633],{"class":618},[613,66239,3975],{"class":2482},[613,66241,6745],{"class":659},[613,66243,66244],{"class":615,"line":882},[613,66245,718],{"emptyLinePlaceholder":570},[613,66247,66248,66250,66252,66254,66256,66258,66260,66262],{"class":615,"line":892},[613,66249,10705],{"class":2482},[613,66251,65908],{"class":659},[613,66253,663],{"class":618},[613,66255,3143],{"class":618},[613,66257,65915],{"class":7049},[613,66259,3409],{"class":618},[613,66261,3746],{"class":626},[613,66263,1184],{"class":618},[613,66265,66266,66268,66270,66272,66274,66276,66278],{"class":615,"line":2671},[613,66267,65926],{"class":659},[613,66269,1126],{"class":618},[613,66271,3754],{"class":659},[613,66273,2479],{"class":618},[613,66275,65935],{"class":659},[613,66277,1126],{"class":618},[613,66279,65940],{"class":659},[613,66281,66282,66284,66286,66288,66290,66292],{"class":615,"line":2680},[613,66283,65926],{"class":659},[613,66285,1126],{"class":618},[613,66287,3754],{"class":659},[613,66289,1126],{"class":618},[613,66291,65384],{"class":2482},[613,66293,6745],{"class":622},[613,66295,66296,66298],{"class":615,"line":2714},[613,66297,2476],{"class":618},[613,66299,2496],{"class":659},[480,66301,12698],{"id":16243},[2261,66303,66304],{},[2264,66305,66306,66309,66310,66312,66313,66315,66316,66319],{},[594,66307,66308],{},"manualUpdate"," (optional): Default is ",[594,66311,951],{},". If set to ",[594,66314,941],{},", disables automatic animation mixer updates. You'll need to call ",[594,66317,66318],{},"mixer.value.update(delta)"," manually.",[1307,66321,66322],{},"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":552,"searchDepth":553,"depth":554,"links":66324},[66325,66329],{"id":600,"depth":554,"text":15,"children":66326},[66327,66328],{"id":65722,"depth":684,"text":65723},{"id":65963,"depth":684,"text":65964},{"id":16243,"depth":554,"text":12698},"Composable for managing model animations with AnimationMixer.",{},{"title":463,"description":66330},"TJcEqtFqnepbieID3hzHGMd0QylrwTz-3E1RokTEGoY",{"id":66335,"title":467,"body":66336,"description":66978,"extension":567,"links":568,"meta":66979,"navigation":570,"path":468,"seo":66980,"stem":469,"__hash__":66981},"docs/2.api/miscellaneous/use-gltf-exporter.md",{"type":477,"value":66337,"toc":66972},[66338,66354,66356,66769,66773,66822,66824,66969],[590,66339,66340,66345,66346,66350,66351,66353],{},[1120,66341,66344],{"href":66342,"rel":66343},"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,66347,16167],{"href":66348,"rel":66349},"https://www.khronos.org/gltf",[1124]," format. ",[1681,66352,15632],{}," provides a composable that simplifies this process with just a few lines of code.",[480,66355,35239],{"id":35238},[602,66357,66360],{"className":604,"code":66358,"highlights":66359,"language":609,"meta":552,"style":552},"\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",[684,776],[594,66361,66362,66382,66400,66420,66438,66442,66454,66458,66463,66478,66520,66524,66532,66540,66562,66594,66600,66612,66626,66640,66656,66660,66692,66713,66721,66753,66761],{"__ignoreMap":552},[613,66363,66364,66366,66368,66370,66372,66374,66376,66378,66380],{"class":615,"line":553},[613,66365,619],{"class":618},[613,66367,623],{"class":622},[613,66369,627],{"class":626},[613,66371,630],{"class":626},[613,66373,633],{"class":618},[613,66375,636],{"class":618},[613,66377,640],{"class":639},[613,66379,636],{"class":618},[613,66381,645],{"class":618},[613,66383,66384,66386,66388,66390,66392,66394,66396,66398],{"class":615,"line":554},[613,66385,653],{"class":652},[613,66387,656],{"class":618},[613,66389,691],{"class":659},[613,66391,669],{"class":618},[613,66393,672],{"class":652},[613,66395,675],{"class":618},[613,66397,700],{"class":639},[613,66399,681],{"class":618},[613,66401,66403,66405,66407,66410,66412,66414,66416,66418],{"class":66402,"line":684},[615,649],[613,66404,653],{"class":652},[613,66406,656],{"class":618},[613,66408,66409],{"class":659}," useGLTFExporter",[613,66411,669],{"class":618},[613,66413,672],{"class":652},[613,66415,675],{"class":618},[613,66417,678],{"class":639},[613,66419,681],{"class":618},[613,66421,66422,66424,66426,66428,66430,66432,66434,66436],{"class":615,"line":705},[613,66423,653],{"class":652},[613,66425,656],{"class":618},[613,66427,3567],{"class":659},[613,66429,669],{"class":618},[613,66431,672],{"class":652},[613,66433,675],{"class":618},[613,66435,609],{"class":639},[613,66437,681],{"class":618},[613,66439,66440],{"class":615,"line":715},[613,66441,718],{"emptyLinePlaceholder":570},[613,66443,66444,66446,66448,66450,66452],{"class":615,"line":721},[613,66445,2463],{"class":626},[613,66447,14919],{"class":659},[613,66449,633],{"class":618},[613,66451,3567],{"class":2482},[613,66453,6745],{"class":659},[613,66455,66456],{"class":615,"line":731},[613,66457,718],{"emptyLinePlaceholder":570},[613,66459,66460],{"class":615,"line":754},[613,66461,66462],{"class":1189},"// the second argument – options – is not required\n",[613,66464,66465,66467,66470,66472,66474,66476],{"class":615,"line":766},[613,66466,2463],{"class":626},[613,66468,66469],{"class":659}," downloadBox ",[613,66471,633],{"class":618},[613,66473,7291],{"class":618},[613,66475,3746],{"class":626},[613,66477,1184],{"class":618},[613,66479,66481,66484,66486,66488,66490,66492,66494,66496,66499,66501,66503,66505,66507,66509,66512,66514,66516,66518],{"class":66480,"line":776},[615,649],[613,66482,66483],{"class":2482}," useGLTFExporter",[613,66485,2485],{"class":622},[613,66487,15015],{"class":659},[613,66489,1126],{"class":618},[613,66491,3754],{"class":659},[613,66493,663],{"class":618},[613,66495,656],{"class":618},[613,66497,66498],{"class":622}," fileName",[613,66500,1198],{"class":618},[613,66502,675],{"class":618},[613,66504,3910],{"class":639},[613,66506,2488],{"class":618},[613,66508,663],{"class":618},[613,66510,66511],{"class":622}," binary",[613,66513,1198],{"class":618},[613,66515,4537],{"class":4536},[613,66517,669],{"class":618},[613,66519,2496],{"class":622},[613,66521,66522],{"class":615,"line":781},[613,66523,1305],{"class":618},[613,66525,66526,66528,66530],{"class":615,"line":807},[613,66527,708],{"class":618},[613,66529,623],{"class":622},[613,66531,645],{"class":618},[613,66533,66534,66536,66538],{"class":615,"line":607},[613,66535,619],{"class":618},[613,66537,726],{"class":622},[613,66539,645],{"class":618},[613,66541,66542,66544,66546,66548,66550,66552,66554,66556,66559],{"class":615,"line":830},[613,66543,734],{"class":618},[613,66545,737],{"class":622},[613,66547,740],{"class":626},[613,66549,633],{"class":618},[613,66551,636],{"class":618},[613,66553,10263],{"class":639},[613,66555,636],{"class":618},[613,66557,66558],{"class":626}," window-size",[613,66560,66561],{"class":618}," >\n",[613,66563,66564,66566,66568,66570,66572,66574,66576,66578,66580,66582,66584,66586,66588,66590,66592],{"class":615,"line":841},[613,66565,757],{"class":618},[613,66567,760],{"class":622},[613,66569,789],{"class":618},[613,66571,1467],{"class":626},[613,66573,633],{"class":618},[613,66575,636],{"class":618},[613,66577,1474],{"class":618},[613,66579,945],{"class":799},[613,66581,1479],{"class":618},[613,66583,800],{"class":799},[613,66585,1479],{"class":618},[613,66587,7668],{"class":799},[613,66589,1489],{"class":618},[613,66591,636],{"class":618},[613,66593,763],{"class":618},[613,66595,66596,66598],{"class":615,"line":852},[613,66597,757],{"class":618},[613,66599,5305],{"class":622},[613,66601,66602,66604,66606,66608,66610],{"class":615,"line":862},[613,66603,10893],{"class":626},[613,66605,633],{"class":618},[613,66607,636],{"class":618},[613,66609,15015],{"class":639},[613,66611,3200],{"class":618},[613,66613,66614,66616,66618,66620,66622,66624],{"class":615,"line":608},[613,66615,10907],{"class":618},[613,66617,9317],{"class":626},[613,66619,633],{"class":618},[613,66621,636],{"class":618},[613,66623,26839],{"class":799},[613,66625,3200],{"class":618},[613,66627,66628,66630,66632,66634,66636,66638],{"class":615,"line":882},[613,66629,10907],{"class":618},[613,66631,792],{"class":626},[613,66633,633],{"class":618},[613,66635,636],{"class":618},[613,66637,1486],{"class":799},[613,66639,3200],{"class":618},[613,66641,66642,66645,66647,66649,66651,66654],{"class":615,"line":892},[613,66643,66644],{"class":618}," @",[613,66646,36329],{"class":626},[613,66648,633],{"class":618},[613,66650,636],{"class":618},[613,66652,66653],{"class":659},"downloadBox",[613,66655,3200],{"class":618},[613,66657,66658],{"class":615,"line":2671},[613,66659,10927],{"class":618},[613,66661,66662,66664,66666,66668,66670,66672,66674,66676,66678,66680,66682,66684,66686,66688,66690],{"class":615,"line":2680},[613,66663,833],{"class":618},[613,66665,847],{"class":622},[613,66667,789],{"class":618},[613,66669,1997],{"class":626},[613,66671,633],{"class":618},[613,66673,636],{"class":618},[613,66675,1474],{"class":618},[613,66677,1901],{"class":799},[613,66679,1479],{"class":618},[613,66681,1901],{"class":799},[613,66683,1479],{"class":618},[613,66685,1901],{"class":799},[613,66687,1489],{"class":618},[613,66689,636],{"class":618},[613,66691,763],{"class":618},[613,66693,66694,66696,66698,66700,66702,66704,66706,66709,66711],{"class":615,"line":2714},[613,66695,833],{"class":618},[613,66697,2746],{"class":622},[613,66699,789],{"class":618},[613,66701,7772],{"class":626},[613,66703,633],{"class":618},[613,66705,636],{"class":618},[613,66707,66708],{"class":799},"0x00ff00",[613,66710,636],{"class":618},[613,66712,763],{"class":618},[613,66714,66715,66717,66719],{"class":615,"line":2723},[613,66716,875],{"class":618},[613,66718,836],{"class":622},[613,66720,645],{"class":618},[613,66722,66723,66725,66727,66729,66731,66733,66735,66737,66739,66741,66743,66745,66747,66749,66751],{"class":615,"line":2732},[613,66724,757],{"class":618},[613,66726,8779],{"class":622},[613,66728,789],{"class":618},[613,66730,1467],{"class":626},[613,66732,633],{"class":618},[613,66734,636],{"class":618},[613,66736,1474],{"class":618},[613,66738,945],{"class":799},[613,66740,1479],{"class":618},[613,66742,1486],{"class":799},[613,66744,1479],{"class":618},[613,66746,1486],{"class":799},[613,66748,1489],{"class":618},[613,66750,636],{"class":618},[613,66752,763],{"class":618},[613,66754,66755,66757,66759],{"class":615,"line":2741},[613,66756,885],{"class":618},[613,66758,737],{"class":622},[613,66760,645],{"class":618},[613,66762,66763,66765,66767],{"class":615,"line":2763},[613,66764,708],{"class":618},[613,66766,726],{"class":622},[613,66768,645],{"class":618},[480,66770,66772],{"id":66771},"arguments","Arguments",[907,66774,66775,66787],{},[910,66776,66777],{},[913,66778,66779,66781,66783,66785],{},[916,66780,8362],{"align":977},[916,66782,6179],{},[916,66784,924],{},[916,66786,921],{},[926,66788,66789,66805],{},[913,66790,66791,66796,66800,66802],{},[931,66792,66793],{"align":977},[1681,66794,66795],{},"Selector",[931,66797,66798],{},[594,66799,7847],{},[931,66801,32144],{},[931,66803,66804],{},"The object to download. Could be an array of objects",[913,66806,66807,66811,66815,66819],{},[931,66808,66809],{"align":977},[1681,66810,12698],{},[931,66812,66813],{},[594,66814,12698],{},[931,66816,66817],{},[594,66818,1159],{},[931,66820,66821],{},"Description below",[4191,66823,12698],{"id":16243},[907,66825,66826,66838],{},[910,66827,66828],{},[913,66829,66830,66832,66834,66836],{},[916,66831,8362],{"align":977},[916,66833,6179],{"align":977},[916,66835,924],{"align":977},[916,66837,921],{"align":977},[926,66839,66840,66859,66877,66895,66913,66932,66950],{},[913,66841,66842,66847,66852,66856],{},[931,66843,66844],{"align":977},[1681,66845,66846],{},"trs",[931,66848,66849],{"align":977},[594,66850,66851],{},"bool",[931,66853,66854],{"align":977},[594,66855,951],{},[931,66857,66858],{"align":977},"Export position, rotation and scale instead of matrix per node",[913,66860,66861,66866,66870,66874],{},[931,66862,66863],{"align":977},[1681,66864,66865],{},"onlyVisible",[931,66867,66868],{"align":977},[594,66869,66851],{},[931,66871,66872],{"align":977},[594,66873,941],{},[931,66875,66876],{"align":977},"Export only visible objects",[913,66878,66879,66884,66888,66892],{},[931,66880,66881],{"align":977},[1681,66882,66883],{},"binary",[931,66885,66886],{"align":977},[594,66887,66851],{},[931,66889,66890],{"align":977},[594,66891,951],{},[931,66893,66894],{"align":977},"Export in binary (.glb) format, returning an ArrayBuffer",[913,66896,66897,66902,66906,66910],{},[931,66898,66899],{"align":977},[1681,66900,66901],{},"maxTextureSize",[931,66903,66904],{"align":977},[594,66905,5565],{},[931,66907,66908],{"align":977},[594,66909,12152],{},[931,66911,66912],{"align":977},"Restricts the image maximum size (both width and height) to the given value",[913,66914,66915,66920,66925,66929],{},[931,66916,66917],{"align":977},[1681,66918,66919],{},"animations",[931,66921,66922],{"align":977},[594,66923,66924],{},"Array\u003CAnimationClip>",[931,66926,66927],{"align":977},[594,66928,1159],{},[931,66930,66931],{"align":977},"List of animations to be included in the export",[913,66933,66934,66939,66943,66947],{},[931,66935,66936],{"align":977},[1681,66937,66938],{},"includeCustomExtensions",[931,66940,66941],{"align":977},[594,66942,66851],{},[931,66944,66945],{"align":977},[594,66946,951],{},[931,66948,66949],{"align":977},"Export custom glTF extensions defined on an object's userData.gltfExtensions",[913,66951,66952,66957,66961,66966],{},[931,66953,66954],{"align":977},[1681,66955,66956],{},"fileName",[931,66958,66959],{"align":977},[594,66960,3641],{},[931,66962,66963],{"align":977},[594,66964,66965],{},"Object name",[931,66967,66968],{"align":977},"Name of the generated file",[1307,66970,66971],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":552,"searchDepth":553,"depth":554,"links":66973},[66974,66975],{"id":35238,"depth":554,"text":35239},{"id":66771,"depth":554,"text":66772,"children":66976},[66977],{"id":16243,"depth":684,"text":12698},"Export 3D objects to GLTF format.",{},{"title":467,"description":66978},"RMYlhgEenD2JjVSHoqXD_ilu6cdNNok5afbVcapEUPE",{"id":66983,"title":471,"body":66984,"description":67272,"extension":567,"links":568,"meta":67273,"navigation":570,"path":472,"seo":67274,"stem":473,"__hash__":67275},"docs/2.api/miscellaneous/use-intersect.md",{"type":477,"value":66985,"toc":67267},[66986,67003,67005,67021,67164,67166,67194,67198,67265],[590,66987,66988,66990,66991,55814,66994,66996,66997,67002],{},[594,66989,471],{}," is a function that returns ",[594,66992,66993],{},"intersect",[594,66995,58254],{}," that's updated when the observed object enters or leaves the screen. This relies on ",[1120,66998,67001],{"href":66999,"rel":67000},"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.",[480,67004,15],{"id":600},[3268,67006,67007],{},[590,67008,67009,67011,67012,67014,67015,67017,67018,1126],{},[594,67010,471],{}," requires a ",[594,67013,737],{}," context, so it is only available in ",[594,67016,737],{}," descendant components' ",[594,67019,67020],{},"\u003Cscript setup>",[602,67022,67025],{"className":604,"code":67023,"highlights":67024,"language":609,"meta":552,"style":552},"\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",[554,705],[594,67026,67027,67047,67072,67076,67102,67110,67114,67122,67140,67148,67156],{"__ignoreMap":552},[613,67028,67029,67031,67033,67035,67037,67039,67041,67043,67045],{"class":615,"line":553},[613,67030,619],{"class":618},[613,67032,623],{"class":622},[613,67034,627],{"class":626},[613,67036,630],{"class":626},[613,67038,633],{"class":618},[613,67040,636],{"class":618},[613,67042,640],{"class":639},[613,67044,636],{"class":618},[613,67046,645],{"class":618},[613,67048,67050,67052,67054,67057,67059,67062,67064,67066,67068,67070],{"class":67049,"line":554},[615,649],[613,67051,653],{"class":652},[613,67053,656],{"class":618},[613,67055,67056],{"class":659}," Torus",[613,67058,663],{"class":618},[613,67060,67061],{"class":659}," useIntersect",[613,67063,669],{"class":618},[613,67065,672],{"class":652},[613,67067,675],{"class":618},[613,67069,678],{"class":639},[613,67071,681],{"class":618},[613,67073,67074],{"class":615,"line":684},[613,67075,718],{"emptyLinePlaceholder":570},[613,67077,67079,67081,67083,67085,67087,67090,67092,67094,67096,67098,67100],{"class":67078,"line":705},[615,649],[613,67080,2463],{"class":626},[613,67082,656],{"class":618},[613,67084,3975],{"class":659},[613,67086,663],{"class":618},[613,67088,67089],{"class":659}," intersect",[613,67091,663],{"class":618},[613,67093,7032],{"class":659},[613,67095,2476],{"class":618},[613,67097,2479],{"class":618},[613,67099,67061],{"class":2482},[613,67101,6745],{"class":659},[613,67103,67104,67106,67108],{"class":615,"line":715},[613,67105,708],{"class":618},[613,67107,623],{"class":622},[613,67109,645],{"class":618},[613,67111,67112],{"class":615,"line":721},[613,67113,718],{"emptyLinePlaceholder":570},[613,67115,67116,67118,67120],{"class":615,"line":731},[613,67117,619],{"class":618},[613,67119,726],{"class":622},[613,67121,645],{"class":618},[613,67123,67124,67126,67128,67130,67132,67134,67136,67138],{"class":615,"line":754},[613,67125,734],{"class":618},[613,67127,273],{"class":622},[613,67129,3975],{"class":626},[613,67131,633],{"class":618},[613,67133,636],{"class":618},[613,67135,6104],{"class":639},[613,67137,636],{"class":618},[613,67139,645],{"class":618},[613,67141,67142,67144,67146],{"class":615,"line":766},[613,67143,757],{"class":618},[613,67145,857],{"class":622},[613,67147,763],{"class":618},[613,67149,67150,67152,67154],{"class":615,"line":776},[613,67151,885],{"class":618},[613,67153,273],{"class":622},[613,67155,645],{"class":618},[613,67157,67158,67160,67162],{"class":615,"line":781},[613,67159,708],{"class":618},[613,67161,726],{"class":622},[613,67163,645],{"class":618},[480,67165,66772],{"id":66771},[907,67167,67168,67178],{},[910,67169,67170],{},[913,67171,67172,67174,67176],{},[916,67173,8362],{"align":977},[916,67175,921],{},[916,67177,6179],{},[926,67179,67180],{},[913,67181,67182,67186,67189],{},[931,67183,67184],{"align":977},[1681,67185,12976],{},[931,67187,67188],{},"Optional callback function triggered when the observed object enters or leaves the screen.",[931,67190,67191],{},[594,67192,67193],{},"(isIntersected: boolean) => void",[480,67195,67197],{"id":67196},"return","Return",[907,67199,67200,67210],{},[910,67201,67202],{},[913,67203,67204,67206,67208],{},[916,67205,8362],{"align":977},[916,67207,921],{},[916,67209,6179],{},[926,67211,67212,67230,67245],{},[913,67213,67214,67218,67225],{},[931,67215,67216],{"align":977},[1681,67217,6104],{},[931,67219,67220,67221,67224],{},"Vue ",[594,67222,67223],{},"ShallowRef"," to pass to the object to be observed.",[931,67226,67227],{},[594,67228,67229],{},"ShallowRef\u003CObject3D>",[913,67231,67232,67237,67240],{},[931,67233,67234],{"align":977},[1681,67235,67236],{},"intersects",[931,67238,67239],{},"Updates when the observed object's intersect status changes.",[931,67241,67242],{},[594,67243,67244],{},"ShallowRef\u003Cboolean>",[913,67246,67247,67252,67261],{},[931,67248,67249],{"align":977},[1681,67250,67251],{},"off",[931,67253,67254,67255,67257,67258,67260],{},"Calling this function stops ",[594,67256,471],{}," until ",[594,67259,6104],{}," changes.",[931,67262,67263],{},[594,67264,6231],{},[1307,67266,43684],{},{"title":552,"searchDepth":553,"depth":554,"links":67268},[67269,67270,67271],{"id":600,"depth":554,"text":15},{"id":66771,"depth":554,"text":66772},{"id":67196,"depth":554,"text":67197},"Detect when objects enter or leave the screen.",{},{"title":471,"description":67272},"QAcMQnGWf_fxqwXEeZxQJtNfPCiyyVyBtXuwXAh1Cg4",1781273435661]