[{"data":1,"prerenderedAt":11698},["ShallowReactive",2],{"navigation":3,"/api/abstractions":474,"/api/abstractions-surround":495,"abstraction-list":500},[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":31,"body":476,"description":488,"extension":489,"links":490,"meta":491,"navigation":492,"path":32,"seo":493,"stem":33,"__hash__":494},"docs/2.api/1.abstractions/index.md",{"type":477,"value":478,"toc":483},"minimark",[479],[480,481],"api-list",{"list-name":482},"abstraction-list",{"title":484,"searchDepth":485,"depth":486,"links":487},"",1,2,[],"UI components reference","md",null,{},true,{"title":31,"description":488},"baHMAoaJElysrTy3x8ClFjAsCmHKTlx_oEIhv5zW7dM",[496,498],{"title":28,"path":24,"stem":29,"description":497,"children":-1},"Explore the complete API reference",{"title":37,"path":38,"stem":39,"description":499,"children":-1},"Calculate and align children within their parent using bounding boxes.",[501,1241,1587,2172,7437,7745,8418,8871,9562,10069,10959,11310],{"id":502,"title":37,"body":503,"description":499,"extension":489,"links":490,"meta":1238,"navigation":492,"path":38,"seo":1239,"stem":39,"__hash__":1240},"docs/2.api/1.abstractions/align.md",{"type":477,"value":504,"toc":1233},[505,511,520,524,822,826,829,1083,1087,1229],[506,507,508],"scene-controls-wrapper",{},[509,510],"abstractions-align",{},[512,513,514,515,519],"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 ",[516,517,518],"code",{},"cacheKey"," is set.",[521,522,15],"h2",{"id":523},"usage",[525,526,533],"pre",{"className":527,"code":528,"highlights":529,"language":532,"meta":484,"style":484},"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",[486,530,531],13,18,"vue",[516,534,535,569,605,626,636,642,652,675,687,697,702,728,733,751,762,773,783,793,803,813],{"__ignoreMap":484},[536,537,539,543,547,551,554,557,560,564,566],"span",{"class":538,"line":485},"line",[536,540,542],{"class":541},"sMK4o","\u003C",[536,544,546],{"class":545},"swJcz","script",[536,548,550],{"class":549},"spNyl"," setup",[536,552,553],{"class":549}," lang",[536,555,556],{"class":541},"=",[536,558,559],{"class":541},"\"",[536,561,563],{"class":562},"sfazB","ts",[536,565,559],{"class":541},[536,567,568],{"class":541},">\n",[536,570,573,577,580,584,587,590,593,596,599,602],{"class":571,"line":486},[538,572],"highlight",[536,574,576],{"class":575},"s7zQu","import",[536,578,579],{"class":541}," {",[536,581,583],{"class":582},"sTEyZ"," Align",[536,585,586],{"class":541},",",[536,588,589],{"class":582}," OrbitControls",[536,591,592],{"class":541}," }",[536,594,595],{"class":575}," from",[536,597,598],{"class":541}," '",[536,600,601],{"class":562},"@tresjs/cientos",[536,603,604],{"class":541},"'\n",[536,606,608,610,612,615,617,619,621,624],{"class":538,"line":607},3,[536,609,576],{"class":575},[536,611,579],{"class":541},[536,613,614],{"class":582}," TresCanvas",[536,616,592],{"class":541},[536,618,595],{"class":575},[536,620,598],{"class":541},[536,622,623],{"class":562},"@tresjs/core",[536,625,604],{"class":541},[536,627,629,632,634],{"class":538,"line":628},4,[536,630,631],{"class":541},"\u003C/",[536,633,546],{"class":545},[536,635,568],{"class":541},[536,637,639],{"class":538,"line":638},5,[536,640,641],{"emptyLinePlaceholder":492},"\n",[536,643,645,647,650],{"class":538,"line":644},6,[536,646,542],{"class":541},[536,648,649],{"class":545},"template",[536,651,568],{"class":541},[536,653,655,658,661,664,666,668,671,673],{"class":538,"line":654},7,[536,656,657],{"class":541},"  \u003C",[536,659,660],{"class":545},"TresCanvas",[536,662,663],{"class":549}," clear-color",[536,665,556],{"class":541},[536,667,559],{"class":541},[536,669,670],{"class":562},"#222",[536,672,559],{"class":541},[536,674,568],{"class":541},[536,676,678,681,684],{"class":538,"line":677},8,[536,679,680],{"class":541},"    \u003C",[536,682,683],{"class":545},"TresPerspectiveCamera",[536,685,686],{"class":541}," />\n",[536,688,690,692,695],{"class":538,"line":689},9,[536,691,680],{"class":541},[536,693,694],{"class":545},"OrbitControls",[536,696,686],{"class":541},[536,698,700],{"class":538,"line":699},10,[536,701,641],{"emptyLinePlaceholder":492},[536,703,705,707,710,713,716,718,720,724,726],{"class":538,"line":704},11,[536,706,680],{"class":541},[536,708,709],{"class":545},"TresAxesHelper",[536,711,712],{"class":541}," :",[536,714,715],{"class":549},"scale",[536,717,556],{"class":541},[536,719,559],{"class":541},[536,721,723],{"class":722},"sbssI","2",[536,725,559],{"class":541},[536,727,686],{"class":541},[536,729,731],{"class":538,"line":730},12,[536,732,641],{"emptyLinePlaceholder":492},[536,734,736,738,740,743,746,749],{"class":735,"line":530},[538,572],[536,737,680],{"class":541},[536,739,37],{"class":545},[536,741,742],{"class":549}," top",[536,744,745],{"class":549}," right",[536,747,748],{"class":549}," back",[536,750,568],{"class":541},[536,752,754,757,760],{"class":538,"line":753},14,[536,755,756],{"class":541},"      \u003C",[536,758,759],{"class":545},"TresMesh",[536,761,568],{"class":541},[536,763,765,768,771],{"class":538,"line":764},15,[536,766,767],{"class":541},"        \u003C",[536,769,770],{"class":545},"TresBoxGeometry",[536,772,686],{"class":541},[536,774,776,778,781],{"class":538,"line":775},16,[536,777,767],{"class":541},[536,779,780],{"class":545},"TresMeshNormalMaterial",[536,782,686],{"class":541},[536,784,786,789,791],{"class":538,"line":785},17,[536,787,788],{"class":541},"      \u003C/",[536,790,759],{"class":545},[536,792,568],{"class":541},[536,794,796,799,801],{"class":795,"line":531},[538,572],[536,797,798],{"class":541},"    \u003C/",[536,800,37],{"class":545},[536,802,568],{"class":541},[536,804,806,809,811],{"class":538,"line":805},19,[536,807,808],{"class":541},"  \u003C/",[536,810,660],{"class":545},[536,812,568],{"class":541},[536,814,816,818,820],{"class":538,"line":815},20,[536,817,631],{"class":541},[536,819,649],{"class":545},[536,821,568],{"class":541},[521,823,825],{"id":824},"props","Props",[512,827,828],{},"All props are optional.",[830,831,832,848],"table",{},[833,834,835],"thead",{},[836,837,838,842,845],"tr",{},[839,840,841],"th",{},"Prop",[839,843,844],{},"Description",[839,846,847],{},"Default",[849,850,851,875,894,913,931,950,968,984,1000,1016,1032,1054,1066],"tbody",{},[836,852,853,859,870],{},[854,855,856],"td",{},[516,857,858],{},"top",[854,860,861,862,865,866,869],{},"If ",[516,863,864],{},"true",", aligns bounding box bottom to ",[516,867,868],{},"0"," on the y-axis",[854,871,872],{},[516,873,874],{},"false",[836,876,877,882,890],{},[854,878,879],{},[516,880,881],{},"bottom",[854,883,861,884,886,887,889],{},[516,885,864],{},", aligns bounding box top to ",[516,888,868],{}," on the y-axis.",[854,891,892],{},[516,893,874],{},[836,895,896,901,909],{},[854,897,898],{},[516,899,900],{},"left",[854,902,861,903,905,906,908],{},[516,904,864],{},", aligns bounding box right to ",[516,907,868],{}," on the x-axis.",[854,910,911],{},[516,912,874],{},[836,914,915,920,927],{},[854,916,917],{},[516,918,919],{},"right",[854,921,861,922,924,925,908],{},[516,923,864],{},", aligns bounding box left to ",[516,926,868],{},[854,928,929],{},[516,930,874],{},[836,932,933,938,946],{},[854,934,935],{},[516,936,937],{},"front",[854,939,861,940,942,943,945],{},[516,941,864],{},", aligns bounding box back to ",[516,944,868],{}," on the z-axis.",[854,947,948],{},[516,949,874],{},[836,951,952,957,964],{},[854,953,954],{},[516,955,956],{},"back",[854,958,861,959,961,962,945],{},[516,960,864],{},", aligns bounding box front to ",[516,963,868],{},[854,965,966],{},[516,967,874],{},[836,969,970,975,980],{},[854,971,972],{},[516,973,974],{},"disable",[854,976,861,977,979],{},[516,978,864],{},", disables alignment on all axes.",[854,981,982],{},[516,983,874],{},[836,985,986,991,996],{},[854,987,988],{},[516,989,990],{},"disableX",[854,992,861,993,995],{},[516,994,864],{},", disables alignment on the x-axis.",[854,997,998],{},[516,999,874],{},[836,1001,1002,1007,1012],{},[854,1003,1004],{},[516,1005,1006],{},"disableY",[854,1008,861,1009,1011],{},[516,1010,864],{},", disables alignment on the y-axis.",[854,1013,1014],{},[516,1015,874],{},[836,1017,1018,1023,1028],{},[854,1019,1020],{},[516,1021,1022],{},"disableZ",[854,1024,861,1025,1027],{},[516,1026,864],{},", disables alignment on the z-axis.",[854,1029,1030],{},[516,1031,874],{},[836,1033,1034,1039,1050],{},[854,1035,1036],{},[516,1037,1038],{},"precise",[854,1040,1041,1042,1049],{},"See ",[1043,1044,1048],"a",{"href":1045,"rel":1046},"https://threejs.org/docs/index.html?q=box3#api/en/math/Box3.setFromObject",[1047],"nofollow","Box3.setFromObject",".",[854,1051,1052],{},[516,1053,864],{},[836,1055,1056,1061,1064],{},[854,1057,1058],{},[516,1059,1060],{},"onAlign",[854,1062,1063],{},"Callback that fires when updating, after measurement.",[854,1065],{},[836,1067,1068,1072,1078],{},[854,1069,1070],{},[516,1071,518],{},[854,1073,1074,1075,1077],{},"If set, component will only update when ",[516,1076,518],{},"'s value changes. If unset, component will update every frame.",[854,1079,1080],{},[516,1081,1082],{},"undefined",[521,1084,1086],{"id":1085},"aligncallbackoptions","AlignCallbackOptions",[525,1088,1091],{"className":1089,"code":1090,"language":563,"meta":484,"style":484},"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",[516,1092,1093,1108,1114,1125,1130,1139,1149,1158,1167,1177,1187,1197,1206,1215,1224],{"__ignoreMap":484},[536,1094,1095,1098,1101,1105],{"class":538,"line":485},[536,1096,1097],{"class":575},"export",[536,1099,1100],{"class":549}," interface",[536,1102,1104],{"class":1103},"sBMFI"," AlignCallbackOptions",[536,1106,1107],{"class":541}," {\n",[536,1109,1110],{"class":538,"line":486},[536,1111,1113],{"class":1112},"sHwdD","  /** The next parent above \u003CAlign /> */\n",[536,1115,1116,1119,1122],{"class":538,"line":607},[536,1117,1118],{"class":545},"  parent",[536,1120,1121],{"class":541},":",[536,1123,1124],{"class":1103}," Object3D\n",[536,1126,1127],{"class":538,"line":628},[536,1128,1129],{"class":1112},"  /** The outmost container group of the \u003CAlign/> component */\n",[536,1131,1132,1135,1137],{"class":538,"line":638},[536,1133,1134],{"class":545},"  container",[536,1136,1121],{"class":541},[536,1138,1124],{"class":1103},[536,1140,1141,1144,1146],{"class":538,"line":644},[536,1142,1143],{"class":545},"  width",[536,1145,1121],{"class":541},[536,1147,1148],{"class":1103}," number\n",[536,1150,1151,1154,1156],{"class":538,"line":654},[536,1152,1153],{"class":545},"  height",[536,1155,1121],{"class":541},[536,1157,1148],{"class":1103},[536,1159,1160,1163,1165],{"class":538,"line":677},[536,1161,1162],{"class":545},"  depth",[536,1164,1121],{"class":541},[536,1166,1148],{"class":1103},[536,1168,1169,1172,1174],{"class":538,"line":689},[536,1170,1171],{"class":545},"  boundingBox",[536,1173,1121],{"class":541},[536,1175,1176],{"class":1103}," Box3\n",[536,1178,1179,1182,1184],{"class":538,"line":699},[536,1180,1181],{"class":545},"  boundingSphere",[536,1183,1121],{"class":541},[536,1185,1186],{"class":1103}," Sphere\n",[536,1188,1189,1192,1194],{"class":538,"line":704},[536,1190,1191],{"class":545},"  center",[536,1193,1121],{"class":541},[536,1195,1196],{"class":1103}," Vector3\n",[536,1198,1199,1202,1204],{"class":538,"line":730},[536,1200,1201],{"class":545},"  verticalAlignment",[536,1203,1121],{"class":541},[536,1205,1148],{"class":1103},[536,1207,1208,1211,1213],{"class":538,"line":530},[536,1209,1210],{"class":545},"  horizontalAlignment",[536,1212,1121],{"class":541},[536,1214,1148],{"class":1103},[536,1216,1217,1220,1222],{"class":538,"line":753},[536,1218,1219],{"class":545},"  depthAlignment",[536,1221,1121],{"class":541},[536,1223,1148],{"class":1103},[536,1225,1226],{"class":538,"line":764},[536,1227,1228],{"class":541},"}\n",[1230,1231,1232],"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":484,"searchDepth":485,"depth":486,"links":1234},[1235,1236,1237],{"id":523,"depth":486,"text":15},{"id":824,"depth":486,"text":825},{"id":1085,"depth":486,"text":1086},{},{"title":37,"description":499},"xKHSzqW-P7t9zP-D9aaYnfHnsXGeMVyRjLNmM0UU0M8",{"id":1242,"title":41,"body":1243,"description":1583,"extension":489,"links":490,"meta":1584,"navigation":492,"path":42,"seo":1585,"stem":43,"__hash__":1586},"docs/2.api/1.abstractions/billboard.md",{"type":477,"value":1244,"toc":1579},[1245,1250,1257,1259,1500,1502,1576],[506,1246,1247],{},[1248,1249],"abstractions-billboard",{},[512,1251,1252,1253,1256],{},"Adds a ",[516,1254,1255],{},"THREE.Group"," that always faces the camera.",[521,1258,15],{"id":523},[525,1260,1263],{"className":527,"code":1261,"highlights":1262,"language":532,"meta":484,"style":484},"\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",[486,699,753],[516,1264,1265,1285,1314,1332,1340,1344,1352,1371,1379,1416,1425,1459,1467,1475,1484,1492],{"__ignoreMap":484},[536,1266,1267,1269,1271,1273,1275,1277,1279,1281,1283],{"class":538,"line":485},[536,1268,542],{"class":541},[536,1270,546],{"class":545},[536,1272,550],{"class":549},[536,1274,553],{"class":549},[536,1276,556],{"class":541},[536,1278,559],{"class":541},[536,1280,563],{"class":562},[536,1282,559],{"class":541},[536,1284,568],{"class":541},[536,1286,1288,1290,1292,1295,1297,1300,1302,1304,1306,1308,1310,1312],{"class":1287,"line":486},[538,572],[536,1289,576],{"class":575},[536,1291,579],{"class":541},[536,1293,1294],{"class":582}," Billboard",[536,1296,586],{"class":541},[536,1298,1299],{"class":582}," Box",[536,1301,586],{"class":541},[536,1303,589],{"class":582},[536,1305,592],{"class":541},[536,1307,595],{"class":575},[536,1309,598],{"class":541},[536,1311,601],{"class":562},[536,1313,604],{"class":541},[536,1315,1316,1318,1320,1322,1324,1326,1328,1330],{"class":538,"line":607},[536,1317,576],{"class":575},[536,1319,579],{"class":541},[536,1321,614],{"class":582},[536,1323,592],{"class":541},[536,1325,595],{"class":575},[536,1327,598],{"class":541},[536,1329,623],{"class":562},[536,1331,604],{"class":541},[536,1333,1334,1336,1338],{"class":538,"line":628},[536,1335,631],{"class":541},[536,1337,546],{"class":545},[536,1339,568],{"class":541},[536,1341,1342],{"class":538,"line":638},[536,1343,641],{"emptyLinePlaceholder":492},[536,1345,1346,1348,1350],{"class":538,"line":644},[536,1347,542],{"class":541},[536,1349,649],{"class":545},[536,1351,568],{"class":541},[536,1353,1354,1356,1358,1360,1362,1364,1367,1369],{"class":538,"line":654},[536,1355,657],{"class":541},[536,1357,660],{"class":545},[536,1359,663],{"class":549},[536,1361,556],{"class":541},[536,1363,559],{"class":541},[536,1365,1366],{"class":562},"#333333",[536,1368,559],{"class":541},[536,1370,568],{"class":541},[536,1372,1373,1375,1377],{"class":538,"line":677},[536,1374,680],{"class":541},[536,1376,694],{"class":545},[536,1378,686],{"class":541},[536,1380,1381,1383,1385,1387,1390,1392,1394,1397,1399,1402,1404,1406,1409,1412,1414],{"class":538,"line":689},[536,1382,680],{"class":541},[536,1384,683],{"class":545},[536,1386,712],{"class":541},[536,1388,1389],{"class":549},"position",[536,1391,556],{"class":541},[536,1393,559],{"class":541},[536,1395,1396],{"class":541},"[",[536,1398,868],{"class":722},[536,1400,1401],{"class":541},", ",[536,1403,868],{"class":722},[536,1405,1401],{"class":541},[536,1407,1408],{"class":722},"10",[536,1410,1411],{"class":541},"]",[536,1413,559],{"class":541},[536,1415,686],{"class":541},[536,1417,1419,1421,1423],{"class":1418,"line":699},[538,572],[536,1420,680],{"class":541},[536,1422,41],{"class":545},[536,1424,568],{"class":541},[536,1426,1427,1429,1431,1433,1435,1437,1439,1441,1444,1446,1448,1450,1453,1455,1457],{"class":538,"line":704},[536,1428,756],{"class":541},[536,1430,197],{"class":545},[536,1432,712],{"class":541},[536,1434,715],{"class":549},[536,1436,556],{"class":541},[536,1438,559],{"class":541},[536,1440,1396],{"class":541},[536,1442,1443],{"class":722},"0.5",[536,1445,1401],{"class":541},[536,1447,1443],{"class":722},[536,1449,1401],{"class":541},[536,1451,1452],{"class":722},"0.001",[536,1454,1411],{"class":541},[536,1456,559],{"class":541},[536,1458,568],{"class":541},[536,1460,1461,1463,1465],{"class":538,"line":730},[536,1462,767],{"class":541},[536,1464,780],{"class":545},[536,1466,686],{"class":541},[536,1468,1469,1471,1473],{"class":538,"line":530},[536,1470,788],{"class":541},[536,1472,197],{"class":545},[536,1474,568],{"class":541},[536,1476,1478,1480,1482],{"class":1477,"line":753},[538,572],[536,1479,798],{"class":541},[536,1481,41],{"class":545},[536,1483,568],{"class":541},[536,1485,1486,1488,1490],{"class":538,"line":764},[536,1487,808],{"class":541},[536,1489,660],{"class":545},[536,1491,568],{"class":541},[536,1493,1494,1496,1498],{"class":538,"line":775},[536,1495,631],{"class":541},[536,1497,649],{"class":545},[536,1499,568],{"class":541},[521,1501,825],{"id":824},[830,1503,1504,1514],{},[833,1505,1506],{},[836,1507,1508,1510,1512],{},[839,1509,841],{"align":900},[839,1511,844],{"align":900},[839,1513,847],{},[849,1515,1516,1534,1548,1562],{},[836,1517,1518,1523,1530],{},[854,1519,1520],{"align":900},[516,1521,1522],{},"autoUpdate",[854,1524,1525,1526,1529],{"align":900},"Whether the ",[516,1527,1528],{},"\u003CBillboard />"," should face the camera automatically on every frame.",[854,1531,1532],{},[516,1533,864],{},[836,1535,1536,1541,1544],{},[854,1537,1538],{"align":900},[516,1539,1540],{},"lockX",[854,1542,1543],{"align":900},"Whether to lock the x-axis.",[854,1545,1546],{},[516,1547,874],{},[836,1549,1550,1555,1558],{},[854,1551,1552],{"align":900},[516,1553,1554],{},"lockY",[854,1556,1557],{"align":900},"Whether to lock the y-axis.",[854,1559,1560],{},[516,1561,874],{},[836,1563,1564,1569,1572],{},[854,1565,1566],{"align":900},[516,1567,1568],{},"lockZ",[854,1570,1571],{"align":900},"Whether to lock the z-axis.",[854,1573,1574],{},[516,1575,874],{},[1230,1577,1578],{},"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":484,"searchDepth":485,"depth":486,"links":1580},[1581,1582],{"id":523,"depth":486,"text":15},{"id":824,"depth":486,"text":825},"Make objects always face the camera automatically.",{},{"title":41,"description":1583},"H0n9HWJ0zpK9LW-fd3nQd2xaa9PwDLLnVK3zImwMAZs",{"id":1588,"title":45,"body":1589,"description":2168,"extension":489,"links":490,"meta":2169,"navigation":492,"path":46,"seo":2170,"stem":47,"__hash__":2171},"docs/2.api/1.abstractions/camera-shake.md",{"type":477,"value":1590,"toc":2164},[1591,1596,1649,1651,1975,2014,2016,2162],[506,1592,1593],{},[1594,1595],"abstractions-camera-shake",{},[512,1597,1598,1601,1602,1401,1606,1610,1611,1614,1615,1401,1618,1621,1622,1625,1626,1401,1629,1401,1632,1635,1636,1639,1640,1049],{},[516,1599,1600],{},"\u003CCameraShake />"," is a component that adds ",[1603,1604,1605],"strong",{},"natural",[1607,1608,1609],"em",{},"noise-driven motion"," to the ",[1603,1612,1613],{},"active camera",".\nIt offers ",[1603,1616,1617],{},"per-axis control",[1603,1619,1620],{},"adjustable intensity",", and ",[1607,1623,1624],{},"optional decay"," — perfect for ",[1607,1627,1628],{},"handheld feel",[1607,1630,1631],{},"footsteps",[1607,1633,1634],{},"impacts",", or ",[1607,1637,1638],{},"engine rumble"," — and is based on the ",[1043,1641,1644,1645,1648],{"href":1642,"rel":1643},"https://drei.docs.pmnd.rs/staging/camera-shake#camerashake",[1047],"Drei ",[516,1646,1647],{},"CameraShake"," component",[521,1650,15],{"id":523},[525,1652,1655],{"className":527,"code":1653,"highlights":1654,"language":532,"meta":484,"style":484},"\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",[486,704,775],[516,1656,1657,1677,1701,1719,1727,1731,1739,1757,1790,1801,1805,1868,1888,1909,1942,1950,1959,1967],{"__ignoreMap":484},[536,1658,1659,1661,1663,1665,1667,1669,1671,1673,1675],{"class":538,"line":485},[536,1660,542],{"class":541},[536,1662,546],{"class":545},[536,1664,550],{"class":549},[536,1666,553],{"class":549},[536,1668,556],{"class":541},[536,1670,559],{"class":541},[536,1672,563],{"class":562},[536,1674,559],{"class":541},[536,1676,568],{"class":541},[536,1678,1680,1682,1684,1687,1689,1691,1693,1695,1697,1699],{"class":1679,"line":486},[538,572],[536,1681,576],{"class":575},[536,1683,579],{"class":541},[536,1685,1686],{"class":582}," CameraShake",[536,1688,586],{"class":541},[536,1690,589],{"class":582},[536,1692,592],{"class":541},[536,1694,595],{"class":575},[536,1696,598],{"class":541},[536,1698,601],{"class":562},[536,1700,604],{"class":541},[536,1702,1703,1705,1707,1709,1711,1713,1715,1717],{"class":538,"line":607},[536,1704,576],{"class":575},[536,1706,579],{"class":541},[536,1708,614],{"class":582},[536,1710,592],{"class":541},[536,1712,595],{"class":575},[536,1714,598],{"class":541},[536,1716,623],{"class":562},[536,1718,604],{"class":541},[536,1720,1721,1723,1725],{"class":538,"line":628},[536,1722,631],{"class":541},[536,1724,546],{"class":545},[536,1726,568],{"class":541},[536,1728,1729],{"class":538,"line":638},[536,1730,641],{"emptyLinePlaceholder":492},[536,1732,1733,1735,1737],{"class":538,"line":644},[536,1734,542],{"class":541},[536,1736,649],{"class":545},[536,1738,568],{"class":541},[536,1740,1741,1743,1745,1747,1749,1751,1753,1755],{"class":538,"line":654},[536,1742,657],{"class":541},[536,1744,660],{"class":545},[536,1746,663],{"class":549},[536,1748,556],{"class":541},[536,1750,559],{"class":541},[536,1752,670],{"class":562},[536,1754,559],{"class":541},[536,1756,568],{"class":541},[536,1758,1759,1761,1763,1765,1767,1769,1771,1773,1775,1777,1779,1781,1784,1786,1788],{"class":538,"line":677},[536,1760,680],{"class":541},[536,1762,683],{"class":545},[536,1764,712],{"class":541},[536,1766,1389],{"class":549},[536,1768,556],{"class":541},[536,1770,559],{"class":541},[536,1772,1396],{"class":541},[536,1774,868],{"class":722},[536,1776,1401],{"class":541},[536,1778,723],{"class":722},[536,1780,1401],{"class":541},[536,1782,1783],{"class":722},"6",[536,1785,1411],{"class":541},[536,1787,559],{"class":541},[536,1789,686],{"class":541},[536,1791,1792,1794,1796,1799],{"class":538,"line":689},[536,1793,680],{"class":541},[536,1795,694],{"class":545},[536,1797,1798],{"class":549}," make-default",[536,1800,686],{"class":541},[536,1802,1803],{"class":538,"line":699},[536,1804,641],{"emptyLinePlaceholder":492},[536,1806,1808,1810,1812,1814,1817,1819,1821,1824,1826,1828,1831,1833,1835,1838,1840,1842,1845,1847,1849,1851,1853,1855,1858,1860,1862,1864,1866],{"class":1807,"line":704},[538,572],[536,1809,680],{"class":541},[536,1811,1647],{"class":545},[536,1813,712],{"class":541},[536,1815,1816],{"class":549},"intensity",[536,1818,556],{"class":541},[536,1820,559],{"class":541},[536,1822,1823],{"class":722},"1",[536,1825,559],{"class":541},[536,1827,712],{"class":541},[536,1829,1830],{"class":549},"max-yaw",[536,1832,556],{"class":541},[536,1834,559],{"class":541},[536,1836,1837],{"class":722},"0.01",[536,1839,559],{"class":541},[536,1841,712],{"class":541},[536,1843,1844],{"class":549},"max-pitch",[536,1846,556],{"class":541},[536,1848,559],{"class":541},[536,1850,1837],{"class":722},[536,1852,559],{"class":541},[536,1854,712],{"class":541},[536,1856,1857],{"class":549},"max-roll",[536,1859,556],{"class":541},[536,1861,559],{"class":541},[536,1863,1837],{"class":722},[536,1865,559],{"class":541},[536,1867,686],{"class":541},[536,1869,1870,1872,1874,1876,1878,1880,1882,1884,1886],{"class":538,"line":730},[536,1871,756],{"class":541},[536,1873,709],{"class":545},[536,1875,712],{"class":541},[536,1877,715],{"class":549},[536,1879,556],{"class":541},[536,1881,559],{"class":541},[536,1883,723],{"class":722},[536,1885,559],{"class":541},[536,1887,686],{"class":541},[536,1889,1890,1892,1894,1896,1899,1901,1903,1905,1907],{"class":538,"line":530},[536,1891,756],{"class":541},[536,1893,759],{"class":545},[536,1895,712],{"class":541},[536,1897,1898],{"class":549},"position-y",[536,1900,556],{"class":541},[536,1902,559],{"class":541},[536,1904,1443],{"class":722},[536,1906,559],{"class":541},[536,1908,568],{"class":541},[536,1910,1911,1913,1915,1917,1920,1922,1924,1926,1928,1930,1932,1934,1936,1938,1940],{"class":538,"line":753},[536,1912,767],{"class":541},[536,1914,770],{"class":545},[536,1916,712],{"class":541},[536,1918,1919],{"class":549},"args",[536,1921,556],{"class":541},[536,1923,559],{"class":541},[536,1925,1396],{"class":541},[536,1927,1823],{"class":722},[536,1929,1401],{"class":541},[536,1931,1823],{"class":722},[536,1933,1401],{"class":541},[536,1935,1823],{"class":722},[536,1937,1411],{"class":541},[536,1939,559],{"class":541},[536,1941,686],{"class":541},[536,1943,1944,1946,1948],{"class":538,"line":764},[536,1945,767],{"class":541},[536,1947,780],{"class":545},[536,1949,686],{"class":541},[536,1951,1953,1955,1957],{"class":1952,"line":775},[538,572],[536,1954,788],{"class":541},[536,1956,759],{"class":545},[536,1958,568],{"class":541},[536,1960,1961,1963,1965],{"class":538,"line":785},[536,1962,808],{"class":541},[536,1964,660],{"class":545},[536,1966,568],{"class":541},[536,1968,1969,1971,1973],{"class":538,"line":531},[536,1970,631],{"class":541},[536,1972,649],{"class":545},[536,1974,568],{"class":541},[1976,1977,1978,1999],"prose-note",{},[512,1979,1980,1982,1983,1988,1989,1992,1993,1998],{},[516,1981,1600],{}," is fully compatible with ",[1603,1984,1985],{},[516,1986,1987],{},"\u003COrbitControls />",".\nTo ensure it works ",[1607,1990,1991],{},"as expected",", make sure to add the ",[1603,1994,1995],{},[516,1996,1997],{},"make-default"," prop:",[525,2000,2002],{"className":527,"code":2001,"language":532,"meta":484,"style":484},"\u003COrbitControls make-default />\n",[516,2003,2004],{"__ignoreMap":484},[536,2005,2006,2008,2010,2012],{"class":538,"line":485},[536,2007,542],{"class":541},[536,2009,694],{"class":545},[536,2011,1798],{"class":549},[536,2013,686],{"class":541},[521,2015,825],{"id":824},[830,2017,2018,2028],{},[833,2019,2020],{},[836,2021,2022,2024,2026],{},[839,2023,841],{},[839,2025,844],{},[839,2027,847],{},[849,2029,2030,2043,2059,2077,2091,2105,2119,2134,2148],{},[836,2031,2032,2036,2039],{},[854,2033,2034],{},[516,2035,1816],{},[854,2037,2038],{},"The intensity of the shake (0–1).",[854,2040,2041],{},[516,2042,1823],{},[836,2044,2045,2050,2055],{},[854,2046,2047],{},[516,2048,2049],{},"decay",[854,2051,861,2052,2054],{},[516,2053,864],{},", intensity decays over time.",[854,2056,2057],{},[516,2058,874],{},[836,2060,2061,2066,2072],{},[854,2062,2063],{},[516,2064,2065],{},"decayRate",[854,2067,2068,2069,2071],{},"How fast intensity changes when ",[516,2070,2049],{}," is enabled.",[854,2073,2074],{},[516,2075,2076],{},"0.65",[836,2078,2079,2084,2087],{},[854,2080,2081],{},[516,2082,2083],{},"maxYaw",[854,2085,2086],{},"Maximum yaw angle in radians.",[854,2088,2089],{},[516,2090,1837],{},[836,2092,2093,2098,2101],{},[854,2094,2095],{},[516,2096,2097],{},"maxPitch",[854,2099,2100],{},"Maximum pitch angle in radians.",[854,2102,2103],{},[516,2104,1837],{},[836,2106,2107,2112,2115],{},[854,2108,2109],{},[516,2110,2111],{},"maxRoll",[854,2113,2114],{},"Maximum roll angle in radians.",[854,2116,2117],{},[516,2118,1837],{},[836,2120,2121,2126,2129],{},[854,2122,2123],{},[516,2124,2125],{},"yawFrequency",[854,2127,2128],{},"Frequency of yaw oscillation.",[854,2130,2131],{},[516,2132,2133],{},"0.1",[836,2135,2136,2141,2144],{},[854,2137,2138],{},[516,2139,2140],{},"pitchFrequency",[854,2142,2143],{},"Frequency of pitch oscillation.",[854,2145,2146],{},[516,2147,2133],{},[836,2149,2150,2155,2158],{},[854,2151,2152],{},[516,2153,2154],{},"rollFrequency",[854,2156,2157],{},"Frequency of roll oscillation.",[854,2159,2160],{},[516,2161,2133],{},[1230,2163,1578],{},{"title":484,"searchDepth":485,"depth":486,"links":2165},[2166,2167],{"id":523,"depth":486,"text":15},{"id":824,"depth":486,"text":825},"Apply smooth camera shake to the active camera.",{},{"title":45,"description":2168},"tbo--_1LLyK1wDUHqKdzu8KZiLMIGya4l_8miKZTrMc",{"id":2173,"title":49,"body":2174,"description":7433,"extension":489,"links":490,"meta":7434,"navigation":492,"path":50,"seo":7435,"stem":51,"__hash__":7436},"docs/2.api/1.abstractions/decal.md",{"type":477,"value":2175,"toc":7398},[2176,2182,2264,2270,2272,2287,2761,2777,2781,2792,2961,2977,2980,2994,3046,3071,3075,3088,3093,3159,3166,3172,3189,3277,3282,3296,3371,4112,4117,4157,4170,4232,4235,4245,4331,4338,4358,4368,4371,4588,4600,4608,4623,4961,4965,4989,5387,5401,5421,5425,5441,5678,5684,5877,5883,6018,6027,6034,6090,6191,6196,6342,6347,6388,6392,6448,6452,6523,6527,6605,6612,6627,6668,6717,7395],[512,2177,2178,2181],{},[516,2179,2180],{},"\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.",[2183,2184,2185,2197,2210,2224,2231,2242,2254],"ul",{},[2186,2187,2188,2189,2192,2193,2196],"li",{},"🎨 Drop-in ",[1603,2190,2191],{},"editor UI"," via ",[516,2194,2195],{},"\u003CDecalDebugUI>"," — placement, rotate / scale / snap, tint, flip, layers, undo / redo, import / export.",[2186,2198,2199,2200,2192,2203,2209],{},"🛠 ",[1603,2201,2202],{},"Programmatic API",[1043,2204,2206],{"href":2205},"#programmatic-api-usedecaleditor",[516,2207,2208],{},"useDecalEditor()"," for custom panels and automation.",[2186,2211,2212,2213,2216,2217,2220,2221,1049],{},"🖼️ ",[1603,2214,2215],{},"Texture palette"," — pass an array of ",[516,2218,2219],{},"Texture"," to ",[516,2222,2223],{},":map",[2186,2225,2226,2227,2230],{},"🧩 ",[1603,2228,2229],{},"Custom material"," — override the default via the slot.",[2186,2232,2233,2234,2237,2238,2241],{},"💾 ",[1603,2235,2236],{},"Lossless JSON"," — ",[516,2239,2240],{},"v-model:data"," round-trips to plain JSON.",[2186,2243,2244,2245,2248,2249,2253],{},"⚡ ",[1603,2246,2247],{},"BVH-accelerated"," — auto-detected via ",[1043,2250,2251],{"href":308},[516,2252,307],{},"; 10–100× faster on dense meshes.",[2186,2255,2256,2257,2237,2260,2263],{},"📚 ",[1603,2258,2259],{},"Per-mesh stacking",[516,2261,2262],{},"zIndex"," with automatic polygon-offset.",[2265,2266,2267],"scene-wrapper",{},[2268,2269],"abstractions-decal",{},[521,2271,15],{"id":523},[512,2273,2274,2275,2277,2278,2281,2282,2284,2285,1049],{},"The minimal setup is a ",[516,2276,2180],{}," placed as a child of any ",[516,2279,2280],{},"\u003CTresMesh>",",\nwith a JSON list of stamped decals bound via ",[516,2283,2240],{}," and one or\nmore textures via ",[516,2286,2223],{},[525,2288,2290],{"className":527,"code":2289,"language":532,"meta":484,"style":484},"\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",[516,2291,2292,2312,2340,2358,2377,2381,2419,2423,2437,2442,2459,2485,2508,2534,2545,2561,2566,2571,2579,2583,2591,2600,2634,2643,2652,2661,2683,2734,2743,2752],{"__ignoreMap":484},[536,2293,2294,2296,2298,2300,2302,2304,2306,2308,2310],{"class":538,"line":485},[536,2295,542],{"class":541},[536,2297,546],{"class":545},[536,2299,550],{"class":549},[536,2301,553],{"class":549},[536,2303,556],{"class":541},[536,2305,559],{"class":541},[536,2307,563],{"class":562},[536,2309,559],{"class":541},[536,2311,568],{"class":541},[536,2313,2314,2316,2318,2321,2323,2325,2327,2330,2332,2334,2336,2338],{"class":538,"line":486},[536,2315,576],{"class":575},[536,2317,579],{"class":541},[536,2319,2320],{"class":582}," Decal",[536,2322,586],{"class":541},[536,2324,589],{"class":582},[536,2326,586],{"class":541},[536,2328,2329],{"class":582}," useTexture",[536,2331,592],{"class":541},[536,2333,595],{"class":575},[536,2335,598],{"class":541},[536,2337,601],{"class":562},[536,2339,604],{"class":541},[536,2341,2342,2344,2346,2348,2350,2352,2354,2356],{"class":538,"line":607},[536,2343,576],{"class":575},[536,2345,579],{"class":541},[536,2347,614],{"class":582},[536,2349,592],{"class":541},[536,2351,595],{"class":575},[536,2353,598],{"class":541},[536,2355,623],{"class":562},[536,2357,604],{"class":541},[536,2359,2360,2362,2364,2367,2369,2371,2373,2375],{"class":538,"line":628},[536,2361,576],{"class":575},[536,2363,579],{"class":541},[536,2365,2366],{"class":582}," reactive",[536,2368,592],{"class":541},[536,2370,595],{"class":575},[536,2372,598],{"class":541},[536,2374,532],{"class":562},[536,2376,604],{"class":541},[536,2378,2379],{"class":538,"line":638},[536,2380,641],{"emptyLinePlaceholder":492},[536,2382,2383,2386,2388,2391,2393,2396,2399,2402,2405,2408,2411,2414,2416],{"class":538,"line":644},[536,2384,2385],{"class":549},"const",[536,2387,579],{"class":541},[536,2389,2390],{"class":545}," state",[536,2392,1121],{"class":541},[536,2394,2395],{"class":582}," texture ",[536,2397,2398],{"class":541},"}",[536,2400,2401],{"class":541}," =",[536,2403,2329],{"class":2404},"s2Zo4",[536,2406,2407],{"class":582},"(",[536,2409,2410],{"class":541},"'",[536,2412,2413],{"class":562},"/textures/logo.png",[536,2415,2410],{"class":541},[536,2417,2418],{"class":582},")\n",[536,2420,2421],{"class":538,"line":654},[536,2422,641],{"emptyLinePlaceholder":492},[536,2424,2425,2427,2430,2432,2434],{"class":538,"line":677},[536,2426,2385],{"class":549},[536,2428,2429],{"class":582}," decals ",[536,2431,556],{"class":541},[536,2433,2366],{"class":2404},[536,2435,2436],{"class":582},"([\n",[536,2438,2439],{"class":538,"line":689},[536,2440,2441],{"class":541},"  {\n",[536,2443,2444,2447,2449,2451,2454,2456],{"class":538,"line":699},[536,2445,2446],{"class":545},"    id",[536,2448,1121],{"class":541},[536,2450,598],{"class":541},[536,2452,2453],{"class":562},"logo-1",[536,2455,2410],{"class":541},[536,2457,2458],{"class":541},",\n",[536,2460,2461,2464,2466,2469,2471,2473,2476,2478,2481,2483],{"class":538,"line":704},[536,2462,2463],{"class":545},"    position",[536,2465,1121],{"class":541},[536,2467,2468],{"class":582}," [",[536,2470,868],{"class":722},[536,2472,586],{"class":541},[536,2474,2475],{"class":722}," 0",[536,2477,586],{"class":541},[536,2479,2480],{"class":722}," 0.5",[536,2482,1411],{"class":582},[536,2484,2458],{"class":541},[536,2486,2487,2490,2492,2494,2496,2498,2500,2502,2504,2506],{"class":538,"line":730},[536,2488,2489],{"class":545},"    orientation",[536,2491,1121],{"class":541},[536,2493,2468],{"class":582},[536,2495,868],{"class":722},[536,2497,586],{"class":541},[536,2499,2475],{"class":722},[536,2501,586],{"class":541},[536,2503,2475],{"class":722},[536,2505,1411],{"class":582},[536,2507,2458],{"class":541},[536,2509,2510,2513,2515,2517,2520,2522,2525,2527,2530,2532],{"class":538,"line":530},[536,2511,2512],{"class":545},"    size",[536,2514,1121],{"class":541},[536,2516,2468],{"class":582},[536,2518,2519],{"class":722},"0.75",[536,2521,586],{"class":541},[536,2523,2524],{"class":722}," 0.17",[536,2526,586],{"class":541},[536,2528,2529],{"class":722}," 1",[536,2531,1411],{"class":582},[536,2533,2458],{"class":541},[536,2535,2536,2539,2541,2543],{"class":538,"line":753},[536,2537,2538],{"class":545},"    zIndex",[536,2540,1121],{"class":541},[536,2542,2475],{"class":722},[536,2544,2458],{"class":541},[536,2546,2547,2550,2552,2554,2557,2559],{"class":538,"line":764},[536,2548,2549],{"class":545},"    map",[536,2551,1121],{"class":541},[536,2553,598],{"class":541},[536,2555,2556],{"class":562},"logo.png",[536,2558,2410],{"class":541},[536,2560,2458],{"class":541},[536,2562,2563],{"class":538,"line":775},[536,2564,2565],{"class":541},"  },\n",[536,2567,2568],{"class":538,"line":785},[536,2569,2570],{"class":582},"])\n",[536,2572,2573,2575,2577],{"class":538,"line":531},[536,2574,631],{"class":541},[536,2576,546],{"class":545},[536,2578,568],{"class":541},[536,2580,2581],{"class":538,"line":805},[536,2582,641],{"emptyLinePlaceholder":492},[536,2584,2585,2587,2589],{"class":538,"line":815},[536,2586,542],{"class":541},[536,2588,649],{"class":545},[536,2590,568],{"class":541},[536,2592,2594,2596,2598],{"class":538,"line":2593},21,[536,2595,657],{"class":541},[536,2597,660],{"class":545},[536,2599,568],{"class":541},[536,2601,2603,2605,2607,2609,2611,2613,2615,2617,2619,2621,2623,2625,2628,2630,2632],{"class":538,"line":2602},22,[536,2604,680],{"class":541},[536,2606,683],{"class":545},[536,2608,712],{"class":541},[536,2610,1389],{"class":549},[536,2612,556],{"class":541},[536,2614,559],{"class":541},[536,2616,1396],{"class":541},[536,2618,723],{"class":722},[536,2620,1401],{"class":541},[536,2622,723],{"class":722},[536,2624,1401],{"class":541},[536,2626,2627],{"class":722},"3",[536,2629,1411],{"class":541},[536,2631,559],{"class":541},[536,2633,686],{"class":541},[536,2635,2637,2639,2641],{"class":538,"line":2636},23,[536,2638,680],{"class":541},[536,2640,694],{"class":545},[536,2642,686],{"class":541},[536,2644,2646,2648,2650],{"class":538,"line":2645},24,[536,2647,680],{"class":541},[536,2649,759],{"class":545},[536,2651,568],{"class":541},[536,2653,2655,2657,2659],{"class":538,"line":2654},25,[536,2656,756],{"class":541},[536,2658,770],{"class":545},[536,2660,686],{"class":541},[536,2662,2664,2666,2669,2672,2674,2676,2679,2681],{"class":538,"line":2663},26,[536,2665,756],{"class":541},[536,2667,2668],{"class":545},"TresMeshStandardMaterial",[536,2670,2671],{"class":549}," color",[536,2673,556],{"class":541},[536,2675,559],{"class":541},[536,2677,2678],{"class":562},"white",[536,2680,559],{"class":541},[536,2682,686],{"class":541},[536,2684,2686,2688,2690,2693,2695,2697,2700,2702,2705,2707,2710,2712,2714,2717,2719,2721,2724,2726,2728,2730,2732],{"class":538,"line":2685},27,[536,2687,756],{"class":541},[536,2689,49],{"class":545},[536,2691,2692],{"class":575}," v-if",[536,2694,556],{"class":541},[536,2696,559],{"class":541},[536,2698,2699],{"class":582},"texture",[536,2701,559],{"class":541},[536,2703,2704],{"class":549}," v-model",[536,2706,1121],{"class":541},[536,2708,2709],{"class":549},"data",[536,2711,556],{"class":541},[536,2713,559],{"class":541},[536,2715,2716],{"class":582},"decals",[536,2718,559],{"class":541},[536,2720,712],{"class":541},[536,2722,2723],{"class":549},"map",[536,2725,556],{"class":541},[536,2727,559],{"class":541},[536,2729,2699],{"class":582},[536,2731,559],{"class":541},[536,2733,686],{"class":541},[536,2735,2737,2739,2741],{"class":538,"line":2736},28,[536,2738,798],{"class":541},[536,2740,759],{"class":545},[536,2742,568],{"class":541},[536,2744,2746,2748,2750],{"class":538,"line":2745},29,[536,2747,808],{"class":541},[536,2749,660],{"class":545},[536,2751,568],{"class":541},[536,2753,2755,2757,2759],{"class":538,"line":2754},30,[536,2756,631],{"class":541},[536,2758,649],{"class":545},[536,2760,568],{"class":541},[1976,2762,2763],{},[512,2764,2765,2766,2768,2769,2772,2773,2776],{},"The ",[516,2767,2240],{}," array is the ",[1603,2770,2771],{},"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 ",[516,2774,2775],{},".json"," file.",[521,2778,2780],{"id":2779},"multiple-textures-palette","Multiple textures (palette)",[512,2782,2783,2784,2786,2787,2791],{},"Pass an array to ",[516,2785,2223],{}," to give users a palette of textures to pick\nfrom. The array returned by ",[1043,2788,2789],{"href":142},[516,2790,141],{},"\nplugs in directly:",[525,2793,2795],{"className":527,"code":2794,"language":532,"meta":484,"style":484},"\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",[516,2796,2797,2817,2840,2844,2861,2872,2883,2894,2898,2906,2910,2918,2953],{"__ignoreMap":484},[536,2798,2799,2801,2803,2805,2807,2809,2811,2813,2815],{"class":538,"line":485},[536,2800,542],{"class":541},[536,2802,546],{"class":545},[536,2804,550],{"class":549},[536,2806,553],{"class":549},[536,2808,556],{"class":541},[536,2810,559],{"class":541},[536,2812,563],{"class":562},[536,2814,559],{"class":541},[536,2816,568],{"class":541},[536,2818,2819,2821,2823,2825,2827,2830,2832,2834,2836,2838],{"class":538,"line":486},[536,2820,576],{"class":575},[536,2822,579],{"class":541},[536,2824,2320],{"class":582},[536,2826,586],{"class":541},[536,2828,2829],{"class":582}," useTextures",[536,2831,592],{"class":541},[536,2833,595],{"class":575},[536,2835,598],{"class":541},[536,2837,601],{"class":562},[536,2839,604],{"class":541},[536,2841,2842],{"class":538,"line":607},[536,2843,641],{"emptyLinePlaceholder":492},[536,2845,2846,2848,2850,2853,2855,2857,2859],{"class":538,"line":628},[536,2847,2385],{"class":549},[536,2849,579],{"class":541},[536,2851,2852],{"class":582}," textures ",[536,2854,2398],{"class":541},[536,2856,2401],{"class":541},[536,2858,2829],{"class":2404},[536,2860,2436],{"class":582},[536,2862,2863,2866,2868,2870],{"class":538,"line":638},[536,2864,2865],{"class":541},"  '",[536,2867,2413],{"class":562},[536,2869,2410],{"class":541},[536,2871,2458],{"class":541},[536,2873,2874,2876,2879,2881],{"class":538,"line":644},[536,2875,2865],{"class":541},[536,2877,2878],{"class":562},"/textures/badge.png",[536,2880,2410],{"class":541},[536,2882,2458],{"class":541},[536,2884,2885,2887,2890,2892],{"class":538,"line":654},[536,2886,2865],{"class":541},[536,2888,2889],{"class":562},"/textures/sticker.png",[536,2891,2410],{"class":541},[536,2893,2458],{"class":541},[536,2895,2896],{"class":538,"line":677},[536,2897,2570],{"class":582},[536,2899,2900,2902,2904],{"class":538,"line":689},[536,2901,631],{"class":541},[536,2903,546],{"class":545},[536,2905,568],{"class":541},[536,2907,2908],{"class":538,"line":699},[536,2909,641],{"emptyLinePlaceholder":492},[536,2911,2912,2914,2916],{"class":538,"line":704},[536,2913,542],{"class":541},[536,2915,649],{"class":545},[536,2917,568],{"class":541},[536,2919,2920,2922,2924,2926,2928,2930,2932,2934,2936,2938,2940,2942,2944,2946,2949,2951],{"class":538,"line":730},[536,2921,657],{"class":541},[536,2923,49],{"class":545},[536,2925,2704],{"class":549},[536,2927,1121],{"class":541},[536,2929,2709],{"class":549},[536,2931,556],{"class":541},[536,2933,559],{"class":541},[536,2935,2716],{"class":582},[536,2937,559],{"class":541},[536,2939,712],{"class":541},[536,2941,2723],{"class":549},[536,2943,556],{"class":541},[536,2945,559],{"class":541},[536,2947,2948],{"class":582},"textures",[536,2950,559],{"class":541},[536,2952,686],{"class":541},[536,2954,2955,2957,2959],{"class":538,"line":530},[536,2956,631],{"class":541},[536,2958,649],{"class":545},[536,2960,568],{"class":541},[512,2962,2963,2964,2237,2967,2969,2970,2973,2974,2976],{},"Each entry references its texture by ",[516,2965,2966],{},"name",[516,2968,2180],{}," auto-fills\n",[516,2971,2972],{},"texture.name"," from the URL filename when missing, so JSON ",[516,2975,2723],{},"\nfields round-trip cleanly.",[521,2978,2229],{"id":2979},"custom-material",[512,2981,2982,2983,2986,2987,2458,2990,2993],{},"The default material is ",[516,2984,2985],{},"MeshBasicMaterial",". Override it via the slot\nto plug in any Three.js material — ",[516,2988,2989],{},"MeshStandardMaterial",[516,2991,2992],{},"MeshPhysicalMaterial",", or a custom shader.",[525,2995,2997],{"className":527,"code":2996,"language":532,"meta":484,"style":484},"\u003CDecal v-model:data=\"decals\" :map=\"texture\">\n  \u003CTresMeshStandardMaterial :transparent=\"true\" :polygon-offset=\"true\" />\n\u003C/Decal>\n",[516,2998,2999,3033,3038],{"__ignoreMap":484},[536,3000,3001,3003,3005,3007,3009,3011,3013,3015,3017,3019,3021,3023,3025,3027,3029,3031],{"class":538,"line":485},[536,3002,542],{"class":541},[536,3004,49],{"class":545},[536,3006,2704],{"class":549},[536,3008,1121],{"class":541},[536,3010,2709],{"class":549},[536,3012,556],{"class":541},[536,3014,559],{"class":541},[536,3016,2716],{"class":582},[536,3018,559],{"class":541},[536,3020,712],{"class":541},[536,3022,2723],{"class":549},[536,3024,556],{"class":541},[536,3026,559],{"class":541},[536,3028,2699],{"class":582},[536,3030,559],{"class":541},[536,3032,568],{"class":541},[536,3034,3035],{"class":538,"line":486},[536,3036,3037],{"class":582},"  \u003CTresMeshStandardMaterial :transparent=\"true\" :polygon-offset=\"true\" />\n",[536,3039,3040,3042,3044],{"class":538,"line":607},[536,3041,631],{"class":541},[536,3043,49],{"class":545},[536,3045,568],{"class":541},[1976,3047,3048],{},[512,3049,3050,3051,3054,3055,3058,3059,3054,3062,3065,3066,2458,3068,3070],{},"Keep ",[516,3052,3053],{},"transparent: true"," and ",[516,3056,3057],{},"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 ",[516,3060,3061],{},".color",[516,3063,3064],{},".opacity"," (",[516,3067,2985],{},[516,3069,2989],{},", …) — bespoke shader materials are skipped\nsilently.",[521,3072,3074],{"id":3073},"stacking-decals-z-layering","Stacking decals (z-layering)",[512,3076,3077,3078,3080,3081,3084,3085,1049],{},"Each decal has a ",[516,3079,2262],{}," controlling its draw order on the parent\nmesh. Higher = on top. The component handles z-fighting via\n",[516,3082,3083],{},"polygonOffset"," automatically — but if you stack many decals near\nparallel surfaces and still see flicker, raise ",[516,3086,3087],{},"layerGap",[2265,3089,3090],{},[3091,3092],"abstractions-decal-stacking",{},[525,3094,3096],{"className":527,"code":3095,"language":532,"meta":484,"style":484},"\u003CDecal\n  v-model:data=\"decals\"\n  :map=\"textures\"\n  :layer-gap=\"0.002\"\n/>\n",[516,3097,3098,3105,3123,3138,3154],{"__ignoreMap":484},[536,3099,3100,3102],{"class":538,"line":485},[536,3101,542],{"class":541},[536,3103,3104],{"class":545},"Decal\n",[536,3106,3107,3110,3112,3114,3116,3118,3120],{"class":538,"line":486},[536,3108,3109],{"class":549},"  v-model",[536,3111,1121],{"class":541},[536,3113,2709],{"class":549},[536,3115,556],{"class":541},[536,3117,559],{"class":541},[536,3119,2716],{"class":582},[536,3121,3122],{"class":541},"\"\n",[536,3124,3125,3128,3130,3132,3134,3136],{"class":538,"line":607},[536,3126,3127],{"class":541},"  :",[536,3129,2723],{"class":549},[536,3131,556],{"class":541},[536,3133,559],{"class":541},[536,3135,2948],{"class":582},[536,3137,3122],{"class":541},[536,3139,3140,3142,3145,3147,3149,3152],{"class":538,"line":628},[536,3141,3127],{"class":541},[536,3143,3144],{"class":549},"layer-gap",[536,3146,556],{"class":541},[536,3148,559],{"class":541},[536,3150,3151],{"class":722},"0.002",[536,3153,3122],{"class":541},[536,3155,3156],{"class":538,"line":638},[536,3157,3158],{"class":582},"/>\n",[512,3160,3161,3162,3165],{},"zIndex stacks are ",[1603,3163,3164],{},"per-mesh"," — two decals on different meshes never\ncompete for the same layer slot.",[521,3167,3169,3170],{"id":3168},"editable-mode-decaldebugui","Editable mode + ",[516,3171,2195],{},[512,3173,3174,3175,3178,3179,3181,3182,3185,3186,1049],{},"Add the ",[516,3176,3177],{},"editable"," prop to mount the interactive editor, then pair it\nwith ",[516,3180,2195],{}," — a full in-canvas editor that ships as a drop-in\nHTML overlay sitting ",[1603,3183,3184],{},"outside"," ",[516,3187,3188],{},"\u003CTresCanvas>",[3190,3191,3192,3206,3227],"prose-warning",{},[512,3193,3194,3196,3197,3200,3201,3203,3204,1049],{},[516,3195,2195],{}," needs its stylesheet — import it ",[1603,3198,3199],{},"once"," at your app\nentry. ",[516,3202,2180],{}," itself is style-less, so this is only needed when you\nmount ",[516,3205,2195],{},[525,3207,3209],{"className":1089,"code":3208,"language":563,"meta":484,"style":484},"// Vite / Vue — in main.ts\nimport '@tresjs/cientos/styles.css'\n",[516,3210,3211,3216],{"__ignoreMap":484},[536,3212,3213],{"class":538,"line":485},[536,3214,3215],{"class":1112},"// Vite / Vue — in main.ts\n",[536,3217,3218,3220,3222,3225],{"class":538,"line":486},[536,3219,576],{"class":575},[536,3221,598],{"class":541},[536,3223,3224],{"class":562},"@tresjs/cientos/styles.css",[536,3226,604],{"class":541},[525,3228,3230],{"className":1089,"code":3229,"language":563,"meta":484,"style":484},"// Nuxt — in nuxt.config.ts\nexport default defineNuxtConfig({\n  css: ['@tresjs/cientos/styles.css'],\n})\n",[516,3231,3232,3237,3252,3271],{"__ignoreMap":484},[536,3233,3234],{"class":538,"line":485},[536,3235,3236],{"class":1112},"// Nuxt — in nuxt.config.ts\n",[536,3238,3239,3241,3244,3247,3249],{"class":538,"line":486},[536,3240,1097],{"class":575},[536,3242,3243],{"class":575}," default",[536,3245,3246],{"class":2404}," defineNuxtConfig",[536,3248,2407],{"class":582},[536,3250,3251],{"class":541},"{\n",[536,3253,3254,3257,3259,3261,3263,3265,3267,3269],{"class":538,"line":607},[536,3255,3256],{"class":545},"  css",[536,3258,1121],{"class":541},[536,3260,2468],{"class":582},[536,3262,2410],{"class":541},[536,3264,3224],{"class":562},[536,3266,2410],{"class":541},[536,3268,1411],{"class":582},[536,3270,2458],{"class":541},[536,3272,3273,3275],{"class":538,"line":628},[536,3274,2398],{"class":541},[536,3276,2418],{"class":582},[2265,3278,3279],{},[3280,3281],"abstractions-decal-editable",{},[512,3283,3284,3285,3288,3289,3292,3293,1049],{},"Three panels: a floating ",[1603,3286,3287],{},"handle"," anchored to the editing decal, a\nbottom ",[1603,3290,3291],{},"dock"," (texture picker + edit tools), a right-side ",[1603,3294,3295],{},"layer\npanel",[2183,3297,3298,3308,3313,3319,3332,3337,3342,3348,3354,3360,3366],{},[2186,3299,3300,3303,3304,3307],{},[1603,3301,3302],{},"Floating handle"," (rotate + scale + snap + live ",[516,3305,3306],{},"scale% · rotation° · L\u003Cn>"," badge)",[2186,3309,3310],{},[1603,3311,3312],{},"Color tint & opacity",[2186,3314,3315,3318],{},[1603,3316,3317],{},"Mirror"," (flip X / flip Y)",[2186,3320,3321,3065,3324,3327,3328,3331],{},[1603,3322,3323],{},"Layer controls",[516,3325,3326],{},"L+"," / ",[516,3329,3330],{},"L-",")",[2186,3333,3334],{},[1603,3335,3336],{},"Visibility toggle",[2186,3338,3339],{},[1603,3340,3341],{},"Per-row remove",[2186,3343,3344,3347],{},[1603,3345,3346],{},"Layer panel"," (mesh-grouped, drag-to-reorder)",[2186,3349,3350,3353],{},[1603,3351,3352],{},"Texture picker"," (drag or click-to-arm)",[2186,3355,3356,3359],{},[1603,3357,3358],{},"Mode badge"," (placing / editing status)",[2186,3361,3362,3365],{},[1603,3363,3364],{},"Undo / Redo"," buttons",[2186,3367,3368,3365],{},[1603,3369,3370],{},"Import / Export",[525,3372,3374],{"className":527,"code":3373,"language":532,"meta":484,"style":484},"\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",[516,3375,3376,3396,3427,3454,3472,3500,3504,3539,3543,3578,3590,3601,3607,3611,3650,3690,3698,3702,3710,3760,3764,3772,3805,3813,3817,3863,3871,3889,3942,3950,3954,3998,4025,4044,4085,4094,4103],{"__ignoreMap":484},[536,3377,3378,3380,3382,3384,3386,3388,3390,3392,3394],{"class":538,"line":485},[536,3379,542],{"class":541},[536,3381,546],{"class":545},[536,3383,550],{"class":549},[536,3385,553],{"class":549},[536,3387,556],{"class":541},[536,3389,559],{"class":541},[536,3391,563],{"class":562},[536,3393,559],{"class":541},[536,3395,568],{"class":541},[536,3397,3398,3400,3402,3404,3406,3409,3411,3413,3415,3417,3419,3421,3423,3425],{"class":538,"line":486},[536,3399,576],{"class":575},[536,3401,579],{"class":541},[536,3403,2320],{"class":582},[536,3405,586],{"class":541},[536,3407,3408],{"class":582}," DecalDebugUI",[536,3410,586],{"class":541},[536,3412,589],{"class":582},[536,3414,586],{"class":541},[536,3416,2829],{"class":582},[536,3418,592],{"class":541},[536,3420,595],{"class":575},[536,3422,598],{"class":541},[536,3424,601],{"class":562},[536,3426,604],{"class":541},[536,3428,3429,3431,3434,3436,3439,3441,3444,3446,3448,3450,3452],{"class":538,"line":607},[536,3430,576],{"class":575},[536,3432,3433],{"class":575}," type",[536,3435,579],{"class":541},[536,3437,3438],{"class":582}," DecalEditorSession",[536,3440,586],{"class":541},[536,3442,3443],{"class":582}," DecalJsonEntry",[536,3445,592],{"class":541},[536,3447,595],{"class":575},[536,3449,598],{"class":541},[536,3451,601],{"class":562},[536,3453,604],{"class":541},[536,3455,3456,3458,3460,3462,3464,3466,3468,3470],{"class":538,"line":628},[536,3457,576],{"class":575},[536,3459,579],{"class":541},[536,3461,614],{"class":582},[536,3463,592],{"class":541},[536,3465,595],{"class":575},[536,3467,598],{"class":541},[536,3469,623],{"class":562},[536,3471,604],{"class":541},[536,3473,3474,3476,3478,3481,3483,3485,3487,3490,3492,3494,3496,3498],{"class":538,"line":638},[536,3475,576],{"class":575},[536,3477,579],{"class":541},[536,3479,3480],{"class":582}," computed",[536,3482,586],{"class":541},[536,3484,2366],{"class":582},[536,3486,586],{"class":541},[536,3488,3489],{"class":582}," shallowRef",[536,3491,592],{"class":541},[536,3493,595],{"class":575},[536,3495,598],{"class":541},[536,3497,532],{"class":562},[536,3499,604],{"class":541},[536,3501,3502],{"class":538,"line":644},[536,3503,641],{"emptyLinePlaceholder":492},[536,3505,3506,3508,3510,3512,3514,3516,3518,3521,3523,3526,3528,3530,3532,3535,3537],{"class":538,"line":654},[536,3507,2385],{"class":549},[536,3509,579],{"class":541},[536,3511,2852],{"class":582},[536,3513,2398],{"class":541},[536,3515,2401],{"class":541},[536,3517,2829],{"class":2404},[536,3519,3520],{"class":582},"([",[536,3522,2410],{"class":541},[536,3524,3525],{"class":562},"/textures/a.png",[536,3527,2410],{"class":541},[536,3529,586],{"class":541},[536,3531,598],{"class":541},[536,3533,3534],{"class":562},"/textures/b.png",[536,3536,2410],{"class":541},[536,3538,2570],{"class":582},[536,3540,3541],{"class":538,"line":677},[536,3542,641],{"emptyLinePlaceholder":492},[536,3544,3545,3547,3550,3552,3554,3556,3559,3561,3564,3566,3568,3571,3574,3576],{"class":538,"line":689},[536,3546,2385],{"class":549},[536,3548,3549],{"class":582}," layout ",[536,3551,556],{"class":541},[536,3553,2366],{"class":2404},[536,3555,542],{"class":541},[536,3557,3558],{"class":1103},"Record",[536,3560,542],{"class":541},[536,3562,3563],{"class":1103},"string",[536,3565,586],{"class":541},[536,3567,3443],{"class":1103},[536,3569,3570],{"class":582},"[]",[536,3572,3573],{"class":541},">>",[536,3575,2407],{"class":582},[536,3577,3251],{"class":541},[536,3579,3580,3583,3585,3588],{"class":538,"line":699},[536,3581,3582],{"class":545},"  cube",[536,3584,1121],{"class":541},[536,3586,3587],{"class":582}," []",[536,3589,2458],{"class":541},[536,3591,3592,3595,3597,3599],{"class":538,"line":704},[536,3593,3594],{"class":545},"  sphere",[536,3596,1121],{"class":541},[536,3598,3587],{"class":582},[536,3600,2458],{"class":541},[536,3602,3603,3605],{"class":538,"line":730},[536,3604,2398],{"class":541},[536,3606,2418],{"class":582},[536,3608,3609],{"class":538,"line":530},[536,3610,641],{"emptyLinePlaceholder":492},[536,3612,3613,3615,3618,3620,3622,3625,3628,3630,3632,3634,3637,3640,3643,3645,3648],{"class":538,"line":753},[536,3614,2385],{"class":549},[536,3616,3617],{"class":582}," decalRef ",[536,3619,556],{"class":541},[536,3621,3489],{"class":2404},[536,3623,3624],{"class":541},"\u003C{",[536,3626,3627],{"class":545}," editor",[536,3629,1121],{"class":541},[536,3631,3438],{"class":1103},[536,3633,592],{"class":541},[536,3635,3636],{"class":541}," |",[536,3638,3639],{"class":1103}," null",[536,3641,3642],{"class":541},">",[536,3644,2407],{"class":582},[536,3646,3647],{"class":541},"null",[536,3649,2418],{"class":582},[536,3651,3652,3654,3657,3659,3661,3663,3666,3669,3672,3674,3677,3680,3683,3686,3688],{"class":538,"line":764},[536,3653,2385],{"class":549},[536,3655,3656],{"class":582}," session ",[536,3658,556],{"class":541},[536,3660,3480],{"class":2404},[536,3662,2407],{"class":582},[536,3664,3665],{"class":541},"()",[536,3667,3668],{"class":549}," =>",[536,3670,3671],{"class":582}," decalRef",[536,3673,1049],{"class":541},[536,3675,3676],{"class":582},"value",[536,3678,3679],{"class":541},"?.",[536,3681,3682],{"class":582},"editor ",[536,3684,3685],{"class":541},"??",[536,3687,3639],{"class":541},[536,3689,2418],{"class":582},[536,3691,3692,3694,3696],{"class":538,"line":775},[536,3693,631],{"class":541},[536,3695,546],{"class":545},[536,3697,568],{"class":541},[536,3699,3700],{"class":538,"line":785},[536,3701,641],{"emptyLinePlaceholder":492},[536,3703,3704,3706,3708],{"class":538,"line":531},[536,3705,542],{"class":541},[536,3707,649],{"class":545},[536,3709,568],{"class":541},[536,3711,3712,3714,3717,3719,3722,3724,3726,3728,3730,3732,3734,3736,3738,3740,3743,3745,3747,3749,3751,3753,3756,3758],{"class":538,"line":805},[536,3713,657],{"class":541},[536,3715,3716],{"class":545},"DecalDebugUI",[536,3718,712],{"class":541},[536,3720,3721],{"class":549},"session",[536,3723,556],{"class":541},[536,3725,559],{"class":541},[536,3727,3721],{"class":582},[536,3729,559],{"class":541},[536,3731,712],{"class":541},[536,3733,2948],{"class":549},[536,3735,556],{"class":541},[536,3737,559],{"class":541},[536,3739,2948],{"class":582},[536,3741,3742],{"class":541}," ?? []",[536,3744,559],{"class":541},[536,3746,712],{"class":541},[536,3748,2709],{"class":549},[536,3750,556],{"class":541},[536,3752,559],{"class":541},[536,3754,3755],{"class":582},"layout",[536,3757,559],{"class":541},[536,3759,686],{"class":541},[536,3761,3762],{"class":538,"line":815},[536,3763,641],{"emptyLinePlaceholder":492},[536,3765,3766,3768,3770],{"class":538,"line":2593},[536,3767,657],{"class":541},[536,3769,660],{"class":545},[536,3771,568],{"class":541},[536,3773,3774,3776,3778,3780,3782,3784,3786,3788,3790,3792,3794,3796,3799,3801,3803],{"class":538,"line":2602},[536,3775,680],{"class":541},[536,3777,683],{"class":545},[536,3779,712],{"class":541},[536,3781,1389],{"class":549},[536,3783,556],{"class":541},[536,3785,559],{"class":541},[536,3787,1396],{"class":541},[536,3789,723],{"class":722},[536,3791,1401],{"class":541},[536,3793,723],{"class":722},[536,3795,1401],{"class":541},[536,3797,3798],{"class":722},"4",[536,3800,1411],{"class":541},[536,3802,559],{"class":541},[536,3804,686],{"class":541},[536,3806,3807,3809,3811],{"class":538,"line":2636},[536,3808,680],{"class":541},[536,3810,694],{"class":545},[536,3812,686],{"class":541},[536,3814,3815],{"class":538,"line":2645},[536,3816,641],{"emptyLinePlaceholder":492},[536,3818,3819,3821,3823,3826,3828,3830,3833,3835,3837,3839,3841,3843,3846,3849,3851,3853,3855,3857,3859,3861],{"class":538,"line":2654},[536,3820,680],{"class":541},[536,3822,759],{"class":545},[536,3824,3825],{"class":549}," name",[536,3827,556],{"class":541},[536,3829,559],{"class":541},[536,3831,3832],{"class":562},"cube",[536,3834,559],{"class":541},[536,3836,712],{"class":541},[536,3838,1389],{"class":549},[536,3840,556],{"class":541},[536,3842,559],{"class":541},[536,3844,3845],{"class":541},"[-",[536,3847,3848],{"class":722},"1.2",[536,3850,1401],{"class":541},[536,3852,868],{"class":722},[536,3854,1401],{"class":541},[536,3856,868],{"class":722},[536,3858,1411],{"class":541},[536,3860,559],{"class":541},[536,3862,568],{"class":541},[536,3864,3865,3867,3869],{"class":538,"line":2663},[536,3866,756],{"class":541},[536,3868,770],{"class":545},[536,3870,686],{"class":541},[536,3872,3873,3875,3877,3879,3881,3883,3885,3887],{"class":538,"line":2685},[536,3874,756],{"class":541},[536,3876,2668],{"class":545},[536,3878,2671],{"class":549},[536,3880,556],{"class":541},[536,3882,559],{"class":541},[536,3884,2678],{"class":562},[536,3886,559],{"class":541},[536,3888,686],{"class":541},[536,3890,3891,3893,3895,3898,3900,3902,3905,3907,3909,3911,3913,3915,3917,3919,3921,3923,3925,3927,3929,3931,3933,3935,3937,3940],{"class":538,"line":2736},[536,3892,756],{"class":541},[536,3894,49],{"class":545},[536,3896,3897],{"class":549}," ref",[536,3899,556],{"class":541},[536,3901,559],{"class":541},[536,3903,3904],{"class":562},"decalRef",[536,3906,559],{"class":541},[536,3908,2704],{"class":549},[536,3910,1121],{"class":541},[536,3912,2709],{"class":549},[536,3914,556],{"class":541},[536,3916,559],{"class":541},[536,3918,3755],{"class":582},[536,3920,1049],{"class":541},[536,3922,3832],{"class":582},[536,3924,559],{"class":541},[536,3926,712],{"class":541},[536,3928,2723],{"class":549},[536,3930,556],{"class":541},[536,3932,559],{"class":541},[536,3934,2948],{"class":582},[536,3936,559],{"class":541},[536,3938,3939],{"class":549}," editable",[536,3941,686],{"class":541},[536,3943,3944,3946,3948],{"class":538,"line":2745},[536,3945,798],{"class":541},[536,3947,759],{"class":545},[536,3949,568],{"class":541},[536,3951,3952],{"class":538,"line":2754},[536,3953,641],{"emptyLinePlaceholder":492},[536,3955,3957,3959,3961,3963,3965,3967,3970,3972,3974,3976,3978,3980,3982,3984,3986,3988,3990,3992,3994,3996],{"class":538,"line":3956},31,[536,3958,680],{"class":541},[536,3960,759],{"class":545},[536,3962,3825],{"class":549},[536,3964,556],{"class":541},[536,3966,559],{"class":541},[536,3968,3969],{"class":562},"sphere",[536,3971,559],{"class":541},[536,3973,712],{"class":541},[536,3975,1389],{"class":549},[536,3977,556],{"class":541},[536,3979,559],{"class":541},[536,3981,1396],{"class":541},[536,3983,3848],{"class":722},[536,3985,1401],{"class":541},[536,3987,868],{"class":722},[536,3989,1401],{"class":541},[536,3991,868],{"class":722},[536,3993,1411],{"class":541},[536,3995,559],{"class":541},[536,3997,568],{"class":541},[536,3999,4001,4003,4006,4008,4010,4012,4014,4016,4019,4021,4023],{"class":538,"line":4000},32,[536,4002,756],{"class":541},[536,4004,4005],{"class":545},"TresSphereGeometry",[536,4007,712],{"class":541},[536,4009,1919],{"class":549},[536,4011,556],{"class":541},[536,4013,559],{"class":541},[536,4015,1396],{"class":541},[536,4017,4018],{"class":722},"0.7",[536,4020,1411],{"class":541},[536,4022,559],{"class":541},[536,4024,686],{"class":541},[536,4026,4028,4030,4032,4034,4036,4038,4040,4042],{"class":538,"line":4027},33,[536,4029,756],{"class":541},[536,4031,2668],{"class":545},[536,4033,2671],{"class":549},[536,4035,556],{"class":541},[536,4037,559],{"class":541},[536,4039,2678],{"class":562},[536,4041,559],{"class":541},[536,4043,686],{"class":541},[536,4045,4047,4049,4051,4053,4055,4057,4059,4061,4063,4065,4067,4069,4071,4073,4075,4077,4079,4081,4083],{"class":538,"line":4046},34,[536,4048,756],{"class":541},[536,4050,49],{"class":545},[536,4052,2704],{"class":549},[536,4054,1121],{"class":541},[536,4056,2709],{"class":549},[536,4058,556],{"class":541},[536,4060,559],{"class":541},[536,4062,3755],{"class":582},[536,4064,1049],{"class":541},[536,4066,3969],{"class":582},[536,4068,559],{"class":541},[536,4070,712],{"class":541},[536,4072,2723],{"class":549},[536,4074,556],{"class":541},[536,4076,559],{"class":541},[536,4078,2948],{"class":582},[536,4080,559],{"class":541},[536,4082,3939],{"class":549},[536,4084,686],{"class":541},[536,4086,4088,4090,4092],{"class":538,"line":4087},35,[536,4089,798],{"class":541},[536,4091,759],{"class":545},[536,4093,568],{"class":541},[536,4095,4097,4099,4101],{"class":538,"line":4096},36,[536,4098,808],{"class":541},[536,4100,660],{"class":545},[536,4102,568],{"class":541},[536,4104,4106,4108,4110],{"class":538,"line":4105},37,[536,4107,631],{"class":541},[536,4109,649],{"class":545},[536,4111,568],{"class":541},[4113,4114,4116],"h3",{"id":4115},"how-the-wiring-works","How the wiring works",[2183,4118,4119,4130,4139,4148],{},[2186,4120,4121,4124,4125,4127,4128,1049],{},[516,4122,4123],{},"v-model:data=\"layout.cube\""," — each ",[516,4126,2180],{}," owns one slice of the\nlayout object. The slice's key matches the parent mesh's ",[516,4129,2966],{},[2186,4131,4132,4135,4136,4138],{},[516,4133,4134],{},"ref=\"decalRef\""," — grab a reference to any ",[516,4137,2180],{}," in the canvas;\nthe session is canvas-shared so it doesn't matter which.",[2186,4140,4141,4144,4145,4147],{},[516,4142,4143],{},"session = decalRef.value?.editor"," — the editor session powers\n",[516,4146,2195],{},". Pass it through.",[2186,4149,4150,4153,4154,4156],{},[516,4151,4152],{},":data=\"layout\""," on ",[516,4155,2195],{}," — the full mesh-keyed layout, so\nthe overlay can render the layer panel and route imports back to each\nDecal by name.",[1976,4158,4159],{},[512,4160,4161,4162,4165,4166,4169],{},"The overlay is full-viewport (",[516,4163,4164],{},"position: fixed; inset: 0",") by default.\nWhen embedding inside a bounded stage (docs, modal, sidebar preview),\npass ",[516,4167,4168],{},"contained"," so the overlay positions itself absolutely against\nthe nearest positioned ancestor instead.",[525,4171,4173],{"className":527,"code":4172,"language":532,"meta":484,"style":484},"\u003Cdiv style=\"position: relative; height: 500px;\">\n  \u003CDecalDebugUI contained ... />\n  \u003CTresCanvas>...\u003C/TresCanvas>\n\u003C/div>\n",[516,4174,4175,4214,4219,4224],{"__ignoreMap":484},[536,4176,4177,4179,4182,4185,4187,4189,4192,4194,4197,4200,4203,4205,4208,4210,4212],{"class":538,"line":485},[536,4178,542],{"class":541},[536,4180,4181],{"class":545},"div",[536,4183,4184],{"class":549}," style",[536,4186,556],{"class":541},[536,4188,559],{"class":541},[536,4190,1389],{"class":4191},"sqsOY",[536,4193,1121],{"class":541},[536,4195,4196],{"class":582}," relative",[536,4198,4199],{"class":541},";",[536,4201,4202],{"class":4191}," height",[536,4204,1121],{"class":541},[536,4206,4207],{"class":722}," 500px",[536,4209,4199],{"class":541},[536,4211,559],{"class":541},[536,4213,568],{"class":541},[536,4215,4216],{"class":538,"line":486},[536,4217,4218],{"class":582},"  \u003CDecalDebugUI contained ... />\n",[536,4220,4221],{"class":538,"line":607},[536,4222,4223],{"class":582},"  \u003CTresCanvas>...\u003C/TresCanvas>\n",[536,4225,4226,4228,4230],{"class":538,"line":628},[536,4227,631],{"class":541},[536,4229,4181],{"class":545},[536,4231,568],{"class":541},[521,4233,3370],{"id":4234},"import-export",[512,4236,4237,4238,4241,4242,4244],{},"The Export button in the dock auto-downloads the current layout as\n",[516,4239,4240],{},"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",[516,4243,2180],{}," automatically — no extra host code needed.",[525,4246,4248],{"className":527,"code":4247,"language":532,"meta":484,"style":484},"\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",[516,4249,4250,4255,4286,4290,4295],{"__ignoreMap":484},[536,4251,4252],{"class":538,"line":485},[536,4253,4254],{"class":1112},"\u003C!-- Custom filename -->\n",[536,4256,4257,4259,4261,4263,4266,4268,4271,4274,4276,4278,4281,4284],{"class":538,"line":486},[536,4258,542],{"class":541},[536,4260,3716],{"class":545},[536,4262,712],{"class":541},[536,4264,4265],{"class":549},"export-filename",[536,4267,556],{"class":541},[536,4269,4270],{"class":541},"\"`${",[536,4272,4273],{"class":582},"sceneName",[536,4275,2398],{"class":541},[536,4277,2775],{"class":562},[536,4279,4280],{"class":541},"`\"",[536,4282,4283],{"class":541}," ...",[536,4285,686],{"class":541},[536,4287,4288],{"class":538,"line":607},[536,4289,641],{"emptyLinePlaceholder":492},[536,4291,4292],{"class":538,"line":628},[536,4293,4294],{"class":1112},"\u003C!-- Disable the built-in download — handle export yourself -->\n",[536,4296,4297,4299,4301,4303,4305,4307,4309,4311,4313,4316,4318,4320,4322,4325,4327,4329],{"class":538,"line":638},[536,4298,542],{"class":541},[536,4300,3716],{"class":545},[536,4302,712],{"class":541},[536,4304,4265],{"class":549},[536,4306,556],{"class":541},[536,4308,559],{"class":541},[536,4310,3647],{"class":541},[536,4312,559],{"class":541},[536,4314,4315],{"class":541}," @",[536,4317,1097],{"class":549},[536,4319,556],{"class":541},[536,4321,559],{"class":541},[536,4323,4324],{"class":582},"postToBackend",[536,4326,559],{"class":541},[536,4328,4283],{"class":541},[536,4330,686],{"class":541},[521,4332,4334,4335,3331],{"id":4333},"targeting-a-loaded-model-glb","Targeting a loaded model (",[516,4336,4337],{},".glb",[512,4339,4340,4341,4343,4344,4350,4351,4354,4355,4357],{},"A ",[516,4342,2180],{}," can be a ",[1603,4345,4346,4347],{},"direct child of ",[516,4348,4349],{},"\u003Cprimitive>",". Auto-resolution\nwalks one step up the scene graph and only accepts a ",[516,4352,4353],{},"Mesh"," — so the\nbehaviour depends on what the ",[516,4356,4349],{}," wraps.",[4113,4359,4361,4362,4365,4366],{"id":4360},"when-object-is-a-mesh","When ",[516,4363,4364],{},":object"," is a ",[516,4367,4353],{},[512,4369,4370],{},"The decal auto-resolves the wrapped mesh as its target. This is the\nsimplest option for a single-mesh asset:",[525,4372,4374],{"className":527,"code":4373,"language":532,"meta":484,"style":484},"\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",[516,4375,4376,4396,4419,4423,4464,4469,4477,4481,4489,4531,4572,4580],{"__ignoreMap":484},[536,4377,4378,4380,4382,4384,4386,4388,4390,4392,4394],{"class":538,"line":485},[536,4379,542],{"class":541},[536,4381,546],{"class":545},[536,4383,550],{"class":549},[536,4385,553],{"class":549},[536,4387,556],{"class":541},[536,4389,559],{"class":541},[536,4391,563],{"class":562},[536,4393,559],{"class":541},[536,4395,568],{"class":541},[536,4397,4398,4400,4402,4404,4406,4409,4411,4413,4415,4417],{"class":538,"line":486},[536,4399,576],{"class":575},[536,4401,579],{"class":541},[536,4403,2320],{"class":582},[536,4405,586],{"class":541},[536,4407,4408],{"class":582}," useGLTF",[536,4410,592],{"class":541},[536,4412,595],{"class":575},[536,4414,598],{"class":541},[536,4416,601],{"class":562},[536,4418,604],{"class":541},[536,4420,4421],{"class":538,"line":607},[536,4422,641],{"emptyLinePlaceholder":492},[536,4424,4425,4427,4429,4432,4434,4436,4438,4440,4442,4445,4447,4449,4451,4454,4456,4460,4462],{"class":538,"line":628},[536,4426,2385],{"class":549},[536,4428,579],{"class":541},[536,4430,4431],{"class":582}," nodes ",[536,4433,2398],{"class":541},[536,4435,2401],{"class":541},[536,4437,4408],{"class":2404},[536,4439,2407],{"class":582},[536,4441,2410],{"class":541},[536,4443,4444],{"class":562},"/models/helmet.glb",[536,4446,2410],{"class":541},[536,4448,586],{"class":541},[536,4450,579],{"class":541},[536,4452,4453],{"class":545}," draco",[536,4455,1121],{"class":541},[536,4457,4459],{"class":4458},"sfNiH"," true",[536,4461,592],{"class":541},[536,4463,2418],{"class":582},[536,4465,4466],{"class":538,"line":638},[536,4467,4468],{"class":1112},"// nodes.Helmet is a Mesh in this asset.\n",[536,4470,4471,4473,4475],{"class":538,"line":644},[536,4472,631],{"class":541},[536,4474,546],{"class":545},[536,4476,568],{"class":541},[536,4478,4479],{"class":538,"line":654},[536,4480,641],{"emptyLinePlaceholder":492},[536,4482,4483,4485,4487],{"class":538,"line":677},[536,4484,542],{"class":541},[536,4486,649],{"class":545},[536,4488,568],{"class":541},[536,4490,4491,4493,4496,4498,4500,4502,4505,4507,4510,4512,4514,4517,4519,4521,4523,4525,4527,4529],{"class":538,"line":689},[536,4492,657],{"class":541},[536,4494,4495],{"class":545},"primitive",[536,4497,2692],{"class":575},[536,4499,556],{"class":541},[536,4501,559],{"class":541},[536,4503,4504],{"class":582},"nodes",[536,4506,3679],{"class":541},[536,4508,4509],{"class":582},"Helmet",[536,4511,559],{"class":541},[536,4513,712],{"class":541},[536,4515,4516],{"class":549},"object",[536,4518,556],{"class":541},[536,4520,559],{"class":541},[536,4522,4504],{"class":582},[536,4524,1049],{"class":541},[536,4526,4509],{"class":582},[536,4528,559],{"class":541},[536,4530,568],{"class":541},[536,4532,4533,4535,4537,4539,4541,4543,4545,4547,4549,4551,4554,4556,4558,4560,4562,4564,4566,4568,4570],{"class":538,"line":699},[536,4534,680],{"class":541},[536,4536,49],{"class":545},[536,4538,2704],{"class":549},[536,4540,1121],{"class":541},[536,4542,2709],{"class":549},[536,4544,556],{"class":541},[536,4546,559],{"class":541},[536,4548,3755],{"class":582},[536,4550,1049],{"class":541},[536,4552,4553],{"class":582},"helmet",[536,4555,559],{"class":541},[536,4557,712],{"class":541},[536,4559,2723],{"class":549},[536,4561,556],{"class":541},[536,4563,559],{"class":541},[536,4565,2948],{"class":582},[536,4567,559],{"class":541},[536,4569,3939],{"class":549},[536,4571,686],{"class":541},[536,4573,4574,4576,4578],{"class":538,"line":704},[536,4575,808],{"class":541},[536,4577,4495],{"class":545},[536,4579,568],{"class":541},[536,4581,4582,4584,4586],{"class":538,"line":730},[536,4583,631],{"class":541},[536,4585,649],{"class":545},[536,4587,568],{"class":541},[1976,4589,4590],{},[512,4591,4592,4593,4595,4596,4599],{},"The resolved parent is the ",[516,4594,4349],{},"'s retargeting proxy rather than\nthe raw object. This is transparent in practice — geometry, ",[516,4597,4598],{},"matrixWorld","\nand raycasting all forward to the wrapped object — so the decal projects\nand follows transforms correctly.",[4113,4601,4361,4603,4365,4605],{"id":4602},"when-object-is-a-group",[516,4604,4364],{},[516,4606,4607],{},"Group",[512,4609,4610,4611,4613,4614,4616,4617,4619,4620,1121],{},"A named node in a ",[516,4612,4337],{}," is often a ",[516,4615,4607],{}," containing several child\nmeshes (e.g. a ceramic body + a metallic interior). Auto-resolution\nreturns ",[516,4618,3647],{}," in that case and the decal silently does nothing — pass\nthe actual target child via ",[516,4621,4622],{},":mesh",[525,4624,4626],{"className":527,"code":4625,"language":532,"meta":484,"style":484},"\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",[516,4627,4628,4648,4670,4688,4710,4714,4751,4756,4780,4828,4832,4840,4844,4852,4890,4945,4953],{"__ignoreMap":484},[536,4629,4630,4632,4634,4636,4638,4640,4642,4644,4646],{"class":538,"line":485},[536,4631,542],{"class":541},[536,4633,546],{"class":545},[536,4635,550],{"class":549},[536,4637,553],{"class":549},[536,4639,556],{"class":541},[536,4641,559],{"class":541},[536,4643,563],{"class":562},[536,4645,559],{"class":541},[536,4647,568],{"class":541},[536,4649,4650,4652,4654,4656,4658,4660,4662,4664,4666,4668],{"class":538,"line":486},[536,4651,576],{"class":575},[536,4653,579],{"class":541},[536,4655,2320],{"class":582},[536,4657,586],{"class":541},[536,4659,4408],{"class":582},[536,4661,592],{"class":541},[536,4663,595],{"class":575},[536,4665,598],{"class":541},[536,4667,601],{"class":562},[536,4669,604],{"class":541},[536,4671,4672,4674,4676,4678,4680,4682,4684,4686],{"class":538,"line":607},[536,4673,576],{"class":575},[536,4675,579],{"class":541},[536,4677,3480],{"class":582},[536,4679,592],{"class":541},[536,4681,595],{"class":575},[536,4683,598],{"class":541},[536,4685,532],{"class":562},[536,4687,604],{"class":541},[536,4689,4690,4692,4694,4696,4699,4701,4703,4705,4708],{"class":538,"line":628},[536,4691,576],{"class":575},[536,4693,3433],{"class":575},[536,4695,579],{"class":541},[536,4697,4698],{"class":582}," Mesh",[536,4700,592],{"class":541},[536,4702,595],{"class":575},[536,4704,598],{"class":541},[536,4706,4707],{"class":562},"three",[536,4709,604],{"class":541},[536,4711,4712],{"class":538,"line":638},[536,4713,641],{"emptyLinePlaceholder":492},[536,4715,4716,4718,4720,4722,4724,4726,4728,4730,4732,4735,4737,4739,4741,4743,4745,4747,4749],{"class":538,"line":644},[536,4717,2385],{"class":549},[536,4719,579],{"class":541},[536,4721,4431],{"class":582},[536,4723,2398],{"class":541},[536,4725,2401],{"class":541},[536,4727,4408],{"class":2404},[536,4729,2407],{"class":582},[536,4731,2410],{"class":541},[536,4733,4734],{"class":562},"/models/mug.glb",[536,4736,2410],{"class":541},[536,4738,586],{"class":541},[536,4740,579],{"class":541},[536,4742,4453],{"class":545},[536,4744,1121],{"class":541},[536,4746,4459],{"class":4458},[536,4748,592],{"class":541},[536,4750,2418],{"class":582},[536,4752,4753],{"class":538,"line":654},[536,4754,4755],{"class":1112},"// nodes.Mug is a Group — pick the child you want to decal.\n",[536,4757,4758,4760,4763,4765,4767,4769,4771,4773,4775,4777],{"class":538,"line":677},[536,4759,2385],{"class":549},[536,4761,4762],{"class":582}," body ",[536,4764,556],{"class":541},[536,4766,3480],{"class":2404},[536,4768,542],{"class":541},[536,4770,4353],{"class":1103},[536,4772,3636],{"class":541},[536,4774,3639],{"class":1103},[536,4776,3642],{"class":541},[536,4778,4779],{"class":582},"(\n",[536,4781,4782,4785,4787,4790,4792,4794,4796,4799,4801,4804,4806,4808,4811,4813,4816,4819,4821,4823,4825],{"class":538,"line":689},[536,4783,4784],{"class":541},"  ()",[536,4786,3668],{"class":549},[536,4788,4789],{"class":582}," (nodes",[536,4791,1049],{"class":541},[536,4793,3676],{"class":582},[536,4795,3679],{"class":541},[536,4797,4798],{"class":582},"Mug",[536,4800,3679],{"class":541},[536,4802,4803],{"class":2404},"getObjectByName",[536,4805,2407],{"class":582},[536,4807,2410],{"class":541},[536,4809,4810],{"class":562},"Body",[536,4812,2410],{"class":541},[536,4814,4815],{"class":582},") ",[536,4817,4818],{"class":575},"as",[536,4820,4698],{"class":1103},[536,4822,4815],{"class":582},[536,4824,3685],{"class":541},[536,4826,4827],{"class":541}," null,\n",[536,4829,4830],{"class":538,"line":699},[536,4831,2418],{"class":582},[536,4833,4834,4836,4838],{"class":538,"line":704},[536,4835,631],{"class":541},[536,4837,546],{"class":545},[536,4839,568],{"class":541},[536,4841,4842],{"class":538,"line":730},[536,4843,641],{"emptyLinePlaceholder":492},[536,4845,4846,4848,4850],{"class":538,"line":530},[536,4847,542],{"class":541},[536,4849,649],{"class":545},[536,4851,568],{"class":541},[536,4853,4854,4856,4858,4860,4862,4864,4866,4868,4870,4872,4874,4876,4878,4880,4882,4884,4886,4888],{"class":538,"line":753},[536,4855,657],{"class":541},[536,4857,4495],{"class":545},[536,4859,2692],{"class":575},[536,4861,556],{"class":541},[536,4863,559],{"class":541},[536,4865,4504],{"class":582},[536,4867,3679],{"class":541},[536,4869,4798],{"class":582},[536,4871,559],{"class":541},[536,4873,712],{"class":541},[536,4875,4516],{"class":549},[536,4877,556],{"class":541},[536,4879,559],{"class":541},[536,4881,4504],{"class":582},[536,4883,1049],{"class":541},[536,4885,4798],{"class":582},[536,4887,559],{"class":541},[536,4889,568],{"class":541},[536,4891,4892,4894,4896,4898,4900,4902,4904,4906,4908,4910,4913,4915,4917,4919,4921,4923,4925,4927,4929,4932,4934,4936,4939,4941,4943],{"class":538,"line":764},[536,4893,680],{"class":541},[536,4895,49],{"class":545},[536,4897,2704],{"class":549},[536,4899,1121],{"class":541},[536,4901,2709],{"class":549},[536,4903,556],{"class":541},[536,4905,559],{"class":541},[536,4907,3755],{"class":582},[536,4909,1049],{"class":541},[536,4911,4912],{"class":582},"mug",[536,4914,559],{"class":541},[536,4916,712],{"class":541},[536,4918,2723],{"class":549},[536,4920,556],{"class":541},[536,4922,559],{"class":541},[536,4924,2948],{"class":582},[536,4926,559],{"class":541},[536,4928,712],{"class":541},[536,4930,4931],{"class":549},"mesh",[536,4933,556],{"class":541},[536,4935,559],{"class":541},[536,4937,4938],{"class":582},"body",[536,4940,559],{"class":541},[536,4942,3939],{"class":549},[536,4944,686],{"class":541},[536,4946,4947,4949,4951],{"class":538,"line":775},[536,4948,808],{"class":541},[536,4950,4495],{"class":545},[536,4952,568],{"class":541},[536,4954,4955,4957,4959],{"class":538,"line":785},[536,4956,631],{"class":541},[536,4958,649],{"class":545},[536,4960,568],{"class":541},[4113,4962,4964],{"id":4963},"targeting-an-extracted-sub-mesh","Targeting an extracted sub-mesh",[512,4966,4967,4968,4974,4975,4982,4983,4985,4986,1121],{},"Alternatively, ",[1603,4969,4970,4971,4973],{},"wrap a ",[516,4972,2280],{}," 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",[1043,4976,4979],{"href":4977,"rel":4978},"https://docs.tresjs.org/api/composables.html#usegraph",[1047],[516,4980,4981],{},"useGraph"," to\npull the sub-mesh, then build a regular ",[516,4984,2280],{}," around its\n",[516,4987,4988],{},":geometry",[525,4990,4992],{"className":527,"code":4991,"language":532,"meta":484,"style":484},"\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",[516,4993,4994,5014,5038,5056,5076,5094,5098,5130,5159,5173,5201,5209,5213,5221,5228,5250,5263,5286,5291,5331,5371,5379],{"__ignoreMap":484},[536,4995,4996,4998,5000,5002,5004,5006,5008,5010,5012],{"class":538,"line":485},[536,4997,542],{"class":541},[536,4999,546],{"class":545},[536,5001,550],{"class":549},[536,5003,553],{"class":549},[536,5005,556],{"class":541},[536,5007,559],{"class":541},[536,5009,563],{"class":562},[536,5011,559],{"class":541},[536,5013,568],{"class":541},[536,5015,5016,5018,5020,5023,5025,5028,5030,5032,5034,5036],{"class":538,"line":486},[536,5017,576],{"class":575},[536,5019,579],{"class":541},[536,5021,5022],{"class":582}," useGraph",[536,5024,586],{"class":541},[536,5026,5027],{"class":582}," useLoader",[536,5029,592],{"class":541},[536,5031,595],{"class":575},[536,5033,598],{"class":541},[536,5035,623],{"class":562},[536,5037,604],{"class":541},[536,5039,5040,5042,5044,5046,5048,5050,5052,5054],{"class":538,"line":607},[536,5041,576],{"class":575},[536,5043,579],{"class":541},[536,5045,2320],{"class":582},[536,5047,592],{"class":541},[536,5049,595],{"class":575},[536,5051,598],{"class":541},[536,5053,601],{"class":562},[536,5055,604],{"class":541},[536,5057,5058,5060,5062,5065,5067,5069,5071,5074],{"class":538,"line":628},[536,5059,576],{"class":575},[536,5061,579],{"class":541},[536,5063,5064],{"class":582}," GLTFLoader",[536,5066,592],{"class":541},[536,5068,595],{"class":575},[536,5070,598],{"class":541},[536,5072,5073],{"class":562},"three/examples/jsm/loaders/GLTFLoader.js",[536,5075,604],{"class":541},[536,5077,5078,5080,5082,5084,5086,5088,5090,5092],{"class":538,"line":638},[536,5079,576],{"class":575},[536,5081,579],{"class":541},[536,5083,3480],{"class":582},[536,5085,592],{"class":541},[536,5087,595],{"class":575},[536,5089,598],{"class":541},[536,5091,532],{"class":562},[536,5093,604],{"class":541},[536,5095,5096],{"class":538,"line":644},[536,5097,641],{"emptyLinePlaceholder":492},[536,5099,5100,5102,5104,5106,5108,5111,5113,5115,5117,5120,5122,5124,5126,5128],{"class":538,"line":654},[536,5101,2385],{"class":549},[536,5103,579],{"class":541},[536,5105,2390],{"class":545},[536,5107,1121],{"class":541},[536,5109,5110],{"class":582}," model ",[536,5112,2398],{"class":541},[536,5114,2401],{"class":541},[536,5116,5027],{"class":2404},[536,5118,5119],{"class":582},"(GLTFLoader",[536,5121,586],{"class":541},[536,5123,598],{"class":541},[536,5125,4444],{"class":562},[536,5127,2410],{"class":541},[536,5129,2418],{"class":582},[536,5131,5132,5134,5137,5139,5141,5143,5145,5147,5150,5152,5154,5156],{"class":538,"line":677},[536,5133,2385],{"class":549},[536,5135,5136],{"class":582}," scene ",[536,5138,556],{"class":541},[536,5140,3480],{"class":2404},[536,5142,2407],{"class":582},[536,5144,3665],{"class":541},[536,5146,3668],{"class":549},[536,5148,5149],{"class":582}," model",[536,5151,1049],{"class":541},[536,5153,3676],{"class":582},[536,5155,3679],{"class":541},[536,5157,5158],{"class":582},"scene)\n",[536,5160,5161,5163,5166,5168,5170],{"class":538,"line":689},[536,5162,2385],{"class":549},[536,5164,5165],{"class":582}," graph ",[536,5167,556],{"class":541},[536,5169,5022],{"class":2404},[536,5171,5172],{"class":582},"(scene)\n",[536,5174,5175,5177,5179,5181,5183,5185,5187,5189,5192,5194,5196,5198],{"class":538,"line":699},[536,5176,2385],{"class":549},[536,5178,4431],{"class":582},[536,5180,556],{"class":541},[536,5182,3480],{"class":2404},[536,5184,2407],{"class":582},[536,5186,3665],{"class":541},[536,5188,3668],{"class":549},[536,5190,5191],{"class":582}," graph",[536,5193,1049],{"class":541},[536,5195,3676],{"class":582},[536,5197,3679],{"class":541},[536,5199,5200],{"class":582},"nodes)\n",[536,5202,5203,5205,5207],{"class":538,"line":704},[536,5204,631],{"class":541},[536,5206,546],{"class":545},[536,5208,568],{"class":541},[536,5210,5211],{"class":538,"line":730},[536,5212,641],{"emptyLinePlaceholder":492},[536,5214,5215,5217,5219],{"class":538,"line":530},[536,5216,542],{"class":541},[536,5218,649],{"class":545},[536,5220,568],{"class":541},[536,5222,5223,5225],{"class":538,"line":753},[536,5224,657],{"class":541},[536,5226,5227],{"class":545},"TresMesh\n",[536,5229,5230,5233,5235,5237,5239,5241,5243,5245,5248],{"class":538,"line":764},[536,5231,5232],{"class":575},"    v-if",[536,5234,556],{"class":541},[536,5236,559],{"class":541},[536,5238,4504],{"class":582},[536,5240,3679],{"class":541},[536,5242,4509],{"class":582},[536,5244,1049],{"class":541},[536,5246,5247],{"class":582},"geometry",[536,5249,3122],{"class":541},[536,5251,5252,5255,5257,5259,5261],{"class":538,"line":775},[536,5253,5254],{"class":549},"    name",[536,5256,556],{"class":541},[536,5258,559],{"class":541},[536,5260,4553],{"class":562},[536,5262,3122],{"class":541},[536,5264,5265,5268,5270,5272,5274,5276,5278,5280,5282,5284],{"class":538,"line":785},[536,5266,5267],{"class":541},"    :",[536,5269,5247],{"class":549},[536,5271,556],{"class":541},[536,5273,559],{"class":541},[536,5275,4504],{"class":582},[536,5277,1049],{"class":541},[536,5279,4509],{"class":582},[536,5281,1049],{"class":541},[536,5283,5247],{"class":582},[536,5285,3122],{"class":541},[536,5287,5288],{"class":538,"line":531},[536,5289,5290],{"class":541},"  >\n",[536,5292,5293,5295,5297,5299,5301,5303,5305,5307,5309,5311,5313,5316,5318,5321,5323,5325,5327,5329],{"class":538,"line":805},[536,5294,680],{"class":541},[536,5296,4495],{"class":545},[536,5298,712],{"class":541},[536,5300,4516],{"class":549},[536,5302,556],{"class":541},[536,5304,559],{"class":541},[536,5306,4504],{"class":582},[536,5308,1049],{"class":541},[536,5310,4509],{"class":582},[536,5312,1049],{"class":541},[536,5314,5315],{"class":582},"material",[536,5317,559],{"class":541},[536,5319,5320],{"class":549}," attach",[536,5322,556],{"class":541},[536,5324,559],{"class":541},[536,5326,5315],{"class":562},[536,5328,559],{"class":541},[536,5330,686],{"class":541},[536,5332,5333,5335,5337,5339,5341,5343,5345,5347,5349,5351,5353,5355,5357,5359,5361,5363,5365,5367,5369],{"class":538,"line":815},[536,5334,680],{"class":541},[536,5336,49],{"class":545},[536,5338,2704],{"class":549},[536,5340,1121],{"class":541},[536,5342,2709],{"class":549},[536,5344,556],{"class":541},[536,5346,559],{"class":541},[536,5348,3755],{"class":582},[536,5350,1049],{"class":541},[536,5352,4553],{"class":582},[536,5354,559],{"class":541},[536,5356,712],{"class":541},[536,5358,2723],{"class":549},[536,5360,556],{"class":541},[536,5362,559],{"class":541},[536,5364,2948],{"class":582},[536,5366,559],{"class":541},[536,5368,3939],{"class":549},[536,5370,686],{"class":541},[536,5372,5373,5375,5377],{"class":538,"line":2593},[536,5374,808],{"class":541},[536,5376,759],{"class":545},[536,5378,568],{"class":541},[536,5380,5381,5383,5385],{"class":538,"line":2602},[536,5382,631],{"class":541},[536,5384,649],{"class":545},[536,5386,568],{"class":541},[512,5388,5389,5390,3054,5392,5394,5395,5397,5398,5400],{},"The mesh's ",[516,5391,5247],{},[516,5393,5315],{}," come from the loaded model; the\n",[516,5396,2180],{}," lives inside a regular ",[516,5399,2280],{}," with a clean scene-graph\nparent.",[3190,5402,5403],{},[512,5404,5405,5406,5408,5409,5412,5413,5416,5417,5420],{},"A saved decal's ",[516,5407,1389],{}," is stored in ",[1603,5410,5411],{},"world space",", so it is\nre-projected onto the parent using the parent's transform ",[1603,5414,5415],{},"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. ",[516,5418,5419],{},"\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.",[521,5422,5424],{"id":5423},"json-schema","JSON schema",[512,5426,5427,5428,5430,5431,5434,5435,5437,5438,1049],{},"Each entry in the ",[516,5429,2709],{}," array follows the ",[516,5432,5433],{},"DecalJsonEntry"," shape; the\nlayout passed to ",[516,5436,2195],{}," groups these by mesh name as\n",[516,5439,5440],{},"DecalLayout = Record\u003Cstring, DecalJsonEntry[]>",[5442,5443,5444,5445,5449],"details",{},"\n  ",[5446,5447,5448],"summary",{},"Full schema",[525,5450,5452],{"className":1089,"code":5451,"language":563,"meta":484,"style":484},"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",[516,5453,5454,5463,5476,5503,5527,5551,5563,5579,5593,5604,5616,5628,5640,5644,5648,5673],{"__ignoreMap":484},[536,5455,5456,5459,5461],{"class":538,"line":485},[536,5457,5458],{"class":549},"interface",[536,5460,3443],{"class":1103},[536,5462,1107],{"class":541},[536,5464,5465,5468,5470,5473],{"class":538,"line":486},[536,5466,5467],{"class":545},"  id",[536,5469,1121],{"class":541},[536,5471,5472],{"class":1103}," string",[536,5474,5475],{"class":1112}," // stable UUID\n",[536,5477,5478,5481,5483,5485,5488,5490,5493,5495,5497,5500],{"class":538,"line":607},[536,5479,5480],{"class":545},"  position",[536,5482,1121],{"class":541},[536,5484,2468],{"class":582},[536,5486,5487],{"class":1103},"number",[536,5489,586],{"class":541},[536,5491,5492],{"class":1103}," number",[536,5494,586],{"class":541},[536,5496,5492],{"class":1103},[536,5498,5499],{"class":582},"] ",[536,5501,5502],{"class":1112},"// target-mesh local space (raycast hit, baked into the parent's frame)\n",[536,5504,5505,5508,5510,5512,5514,5516,5518,5520,5522,5524],{"class":538,"line":628},[536,5506,5507],{"class":545},"  orientation",[536,5509,1121],{"class":541},[536,5511,2468],{"class":582},[536,5513,5487],{"class":1103},[536,5515,586],{"class":541},[536,5517,5492],{"class":1103},[536,5519,586],{"class":541},[536,5521,5492],{"class":1103},[536,5523,5499],{"class":582},[536,5525,5526],{"class":1112},"// Euler XYZ\n",[536,5528,5529,5532,5534,5536,5538,5540,5542,5544,5546,5548],{"class":538,"line":638},[536,5530,5531],{"class":545},"  size",[536,5533,1121],{"class":541},[536,5535,2468],{"class":582},[536,5537,5487],{"class":1103},[536,5539,586],{"class":541},[536,5541,5492],{"class":1103},[536,5543,586],{"class":541},[536,5545,5492],{"class":1103},[536,5547,5499],{"class":582},[536,5549,5550],{"class":1112},"// extents along X/Y; Z = projection depth\n",[536,5552,5553,5556,5558,5560],{"class":538,"line":644},[536,5554,5555],{"class":545},"  zIndex",[536,5557,1121],{"class":541},[536,5559,5492],{"class":1103},[536,5561,5562],{"class":1112}," // per-mesh layer order, ≥ 0\n",[536,5564,5565,5568,5570,5572,5574,5576],{"class":538,"line":654},[536,5566,5567],{"class":545},"  map",[536,5569,1121],{"class":541},[536,5571,5472],{"class":1103},[536,5573,3636],{"class":541},[536,5575,3639],{"class":1103},[536,5577,5578],{"class":1112}," // matches a texture's .name\n",[536,5580,5581,5584,5587,5590],{"class":538,"line":677},[536,5582,5583],{"class":545},"  flipX",[536,5585,5586],{"class":541},"?:",[536,5588,5589],{"class":1103}," boolean",[536,5591,5592],{"class":1112}," // omitted when false\n",[536,5594,5595,5598,5600,5602],{"class":538,"line":689},[536,5596,5597],{"class":545},"  flipY",[536,5599,5586],{"class":541},[536,5601,5589],{"class":1103},[536,5603,5592],{"class":1112},[536,5605,5606,5609,5611,5613],{"class":538,"line":699},[536,5607,5608],{"class":545},"  color",[536,5610,5586],{"class":541},[536,5612,5472],{"class":1103},[536,5614,5615],{"class":1112}," // hex (e.g. '#ff6b35'), omitted when no tint\n",[536,5617,5618,5621,5623,5625],{"class":538,"line":704},[536,5619,5620],{"class":545},"  opacity",[536,5622,5586],{"class":541},[536,5624,5492],{"class":1103},[536,5626,5627],{"class":1112}," // 0..1, omitted when 1\n",[536,5629,5630,5633,5635,5637],{"class":538,"line":730},[536,5631,5632],{"class":545},"  visible",[536,5634,5586],{"class":541},[536,5636,5589],{"class":1103},[536,5638,5639],{"class":1112}," // omitted when true; false hides the decal\n",[536,5641,5642],{"class":538,"line":530},[536,5643,1228],{"class":541},[536,5645,5646],{"class":538,"line":753},[536,5647,641],{"emptyLinePlaceholder":492},[536,5649,5650,5653,5656,5658,5661,5663,5665,5667,5669,5671],{"class":538,"line":764},[536,5651,5652],{"class":549},"type",[536,5654,5655],{"class":1103}," DecalLayout",[536,5657,2401],{"class":541},[536,5659,5660],{"class":1103}," Record",[536,5662,542],{"class":541},[536,5664,3563],{"class":1103},[536,5666,586],{"class":541},[536,5668,3443],{"class":1103},[536,5670,3570],{"class":582},[536,5672,568],{"class":541},[536,5674,5675],{"class":538,"line":775},[536,5676,5677],{"class":1112},"// { sphere: [...], cube: [...] }\n",[521,5679,5681,5683],{"id":5680},"decal-props",[516,5682,2180],{}," props",[830,5685,5686,5696],{},[833,5687,5688],{},[836,5689,5690,5692,5694],{},[839,5691,841],{},[839,5693,844],{},[839,5695,847],{},[849,5697,5698,5714,5734,5769,5787,5801,5815,5834,5862],{},[836,5699,5700,5704,5710],{},[854,5701,5702],{},[1603,5703,2709],{},[854,5705,5706,5707,5709],{},"Two-way list of stamped decals (use with ",[516,5708,2240],{},").",[854,5711,5712],{},[516,5713,3570],{},[836,5715,5716,5720,5730],{},[854,5717,5718],{},[1603,5719,2723],{},[854,5721,5722,5723,5725,5726,5729],{},"A single ",[516,5724,2219],{}," or array of ",[516,5727,5728],{},"Texture[]",". With multiple, the editor lets the user cycle through them as a palette.",[854,5731,5732],{},[516,5733,3647],{},[836,5735,5736,5740,5765],{},[854,5737,5738],{},[1603,5739,4931],{},[854,5741,5742,5743,5745,5746,5749,5750,5752,5753,5756,5757,3327,5759,3327,5762,5764],{},"Optional explicit target mesh (",[516,5744,4353],{}," or ",[516,5747,5748],{},"ShallowRef\u003CMesh>","). When omitted, the scene-graph parent of ",[516,5751,2180],{}," is auto-resolved via a hidden anchor ",[516,5754,5755],{},"\u003CTresGroup>",". The decal mesh is imperatively parented to the target so it follows the target's runtime ",[516,5758,1389],{},[516,5760,5761],{},"rotation",[516,5763,715],{}," via the scene-graph hierarchy.",[854,5766,5767],{},[516,5768,3647],{},[836,5770,5771,5775,5783],{},[854,5772,5773],{},[1603,5774,3177],{},[854,5776,4361,5777,5779,5780,5782],{},[516,5778,864],{},", mounts the interactive editor (raycast, hover, click-to-place, drag-from-thumbnail). Required for ",[516,5781,2195],{}," interactions to work on this Decal.",[854,5784,5785],{},[516,5786,874],{},[836,5788,5789,5794,5797],{},[854,5790,5791],{},[1603,5792,5793],{},"baseSize",[854,5795,5796],{},"Reference size used to derive each decal's size from the texture aspect ratio.",[854,5798,5799],{},[516,5800,1823],{},[836,5802,5803,5808,5811],{},[854,5804,5805],{},[1603,5806,5807],{},"baseOffset",[854,5809,5810],{},"Distance along the surface normal (parent units) to avoid z-fighting between the decal and the host mesh.",[854,5812,5813],{},[516,5814,1837],{},[836,5816,5817,5821,5830],{},[854,5818,5819],{},[1603,5820,3087],{},[854,5822,5823,5824,5826,5827,5829],{},"Extra offset added per ",[516,5825,2262],{}," step on top of ",[516,5828,5807],{},". Increase if stacked decals still flicker.",[854,5831,5832],{},[516,5833,1452],{},[836,5835,5836,5841,5857],{},[854,5837,5838],{},[1603,5839,5840],{},"cullThreshold",[854,5842,5843,5844,5847,5848,5853,5854,5856],{},"Drops projected triangles whose face normal makes an angle steeper than ",[516,5845,5846],{},"acos(threshold)"," with the projector. Mitigates ",[1043,5849,5852],{"href":5850,"rel":5851},"https://github.com/mrdoob/three.js/issues/21187",[1047],"#21187",". Pass ",[516,5855,868],{}," to disable.",[854,5858,5859],{},[516,5860,5861],{},"0.2",[836,5863,5864,5869,5872],{},[854,5865,5866],{},[1603,5867,5868],{},"edgeColor",[854,5870,5871],{},"Color of the edge outline drawn around a decal while it is hovered (pointer or layer panel) in editable mode.",[854,5873,5874],{},[516,5875,5876],{},"#0000ff",[521,5878,5880,5882],{"id":5879},"decal-events",[516,5881,2180],{}," events",[830,5884,5885,5897],{},[833,5886,5887],{},[836,5888,5889,5892,5895],{},[839,5890,5891],{},"Event",[839,5893,5894],{},"Payload",[839,5896,844],{},[849,5898,5899,5914,5929,5943,5963,5981,5998],{},[836,5900,5901,5906,5911],{},[854,5902,5903],{},[516,5904,5905],{},"update:data",[854,5907,5908],{},[516,5909,5910],{},"DecalJsonEntry[]",[854,5912,5913],{},"v-model partner — fires whenever the JSON list changes.",[836,5915,5916,5921,5926],{},[854,5917,5918],{},[516,5919,5920],{},"add",[854,5922,5923],{},[516,5924,5925],{},"DecalEntry",[854,5927,5928],{},"A new decal has been committed (create mode → confirm).",[836,5930,5931,5936,5940],{},[854,5932,5933],{},[516,5934,5935],{},"update",[854,5937,5938],{},[516,5939,5925],{},[854,5941,5942],{},"An existing decal has been committed (update mode → confirm).",[836,5944,5945,5950,5954],{},[854,5946,5947],{},[516,5948,5949],{},"delete",[854,5951,5952],{},[516,5953,5925],{},[854,5955,5956,5957,3327,5960,5709],{},"A decal has been removed (delete button or ",[516,5958,5959],{},"Del",[516,5961,5962],{},"Backspace",[836,5964,5965,5970,5974],{},[854,5966,5967],{},[516,5968,5969],{},"select",[854,5971,5972],{},[516,5973,5925],{},[854,5975,5976,5977,5980],{},"Edition began on ",[516,5978,5979],{},"entry"," (panel click, 3D click, or programmatic).",[836,5982,5983,5988,5991],{},[854,5984,5985],{},[516,5986,5987],{},"cancel",[854,5989,5990],{},"—",[854,5992,5993,5994,5997],{},"Edition was aborted without commit (",[516,5995,5996],{},"Esc",", click-outside in create mode).",[836,5999,6000,6005,6010],{},[854,6001,6002],{},[516,6003,6004],{},"decalClick",[854,6006,6007],{},[516,6008,6009],{},"{ entry: DecalEntry, event: MouseEvent }",[854,6011,6012,6013,6015,6016,1049],{},"Fires on click of any stamped decal, even when ",[516,6014,3177],{}," is ",[516,6017,874],{},[521,6019,6021,6023,6024,3331],{"id":6020},"decal-exposed-via-ref",[516,6022,2180],{}," exposed (via ",[516,6025,6026],{},"ref",[512,6028,6029,6030,6033],{},"The template ref resolves to ",[516,6031,6032],{},"DecalImperativeApi"," — import the type for\nfull autocompletion:",[525,6035,6037],{"className":1089,"code":6036,"language":563,"meta":484,"style":484},"import type { DecalImperativeApi } from '@tresjs/cientos'\n\nconst decalRef = ref\u003CDecalImperativeApi | null>(null)\n",[516,6038,6039,6060,6064],{"__ignoreMap":484},[536,6040,6041,6043,6045,6047,6050,6052,6054,6056,6058],{"class":538,"line":485},[536,6042,576],{"class":575},[536,6044,3433],{"class":575},[536,6046,579],{"class":541},[536,6048,6049],{"class":582}," DecalImperativeApi",[536,6051,592],{"class":541},[536,6053,595],{"class":575},[536,6055,598],{"class":541},[536,6057,601],{"class":562},[536,6059,604],{"class":541},[536,6061,6062],{"class":538,"line":486},[536,6063,641],{"emptyLinePlaceholder":492},[536,6065,6066,6068,6070,6072,6074,6076,6078,6080,6082,6084,6086,6088],{"class":538,"line":607},[536,6067,2385],{"class":549},[536,6069,3617],{"class":582},[536,6071,556],{"class":541},[536,6073,3897],{"class":2404},[536,6075,542],{"class":541},[536,6077,6032],{"class":1103},[536,6079,3636],{"class":541},[536,6081,3639],{"class":1103},[536,6083,3642],{"class":541},[536,6085,2407],{"class":582},[536,6087,3647],{"class":541},[536,6089,2418],{"class":582},[830,6091,6092,6104],{},[833,6093,6094],{},[836,6095,6096,6099,6102],{},[839,6097,6098],{},"Property",[839,6100,6101],{},"Type",[839,6103,844],{},[849,6105,6106,6124,6142,6160,6175],{},[836,6107,6108,6113,6118],{},[854,6109,6110],{},[516,6111,6112],{},"editor",[854,6114,6115],{},[516,6116,6117],{},"DecalEditorSession",[854,6119,6120,6121,1049],{},"The canvas-shared editor session. Pass it to ",[516,6122,6123],{},"\u003CDecalDebugUI :session>",[836,6125,6126,6131,6136],{},[854,6127,6128],{},[516,6129,6130],{},"beginEditById",[854,6132,6133],{},[516,6134,6135],{},"(id: string) => boolean",[854,6137,6138,6139,6141],{},"Programmatically start editing a specific decal. Returns ",[516,6140,874],{}," if the id is unknown.",[836,6143,6144,6149,6154],{},[854,6145,6146],{},[516,6147,6148],{},"commit",[854,6150,6151],{},[516,6152,6153],{},"() => void",[854,6155,6156,6157,5709],{},"Commit the in-flight edit (same as ",[516,6158,6159],{},"Enter",[836,6161,6162,6166,6170],{},[854,6163,6164],{},[516,6165,5987],{},[854,6167,6168],{},[516,6169,6153],{},[854,6171,6172,6173,5709],{},"Abort the in-flight edit (same as ",[516,6174,5996],{},[836,6176,6177,6182,6186],{},[854,6178,6179],{},[516,6180,6181],{},"remove",[854,6183,6184],{},[516,6185,6153],{},[854,6187,6188,6189,5709],{},"Delete the currently edited decal (same as ",[516,6190,5959],{},[521,6192,6194,5683],{"id":6193},"decaldebugui-props",[516,6195,2195],{},[830,6197,6198,6208],{},[833,6199,6200],{},[836,6201,6202,6204,6206],{},[839,6203,841],{},[839,6205,844],{},[839,6207,847],{},[849,6209,6210,6233,6258,6271,6291,6306,6329],{},[836,6211,6212,6216,6229],{},[854,6213,6214],{},[1603,6215,3721],{},[854,6217,6218,6221,6222,6224,6225,6228],{},[516,6219,6220],{},"DecalEditorSession | null"," — obtained from any ",[516,6223,2180],{}," ref via ",[516,6226,6227],{},"decalRef.value?.editor",". Mandatory for the overlay to wire up the interactive logic.",[854,6230,6231],{},[516,6232,3647],{},[836,6234,6235,6239,6253],{},[854,6236,6237],{},[1603,6238,2709],{},[854,6240,6241,6242,6245,6246,6249,6250,6252],{},"Mesh-name-keyed map of decal slices — ",[516,6243,6244],{},"{ sphere: [...], cube: [...] }",". Each key matches a ",[516,6247,6248],{},"\u003CTresMesh name=\"...\">"," whose child ",[516,6251,2180],{}," owns the slice.",[854,6254,6255],{},[516,6256,6257],{},"{}",[836,6259,6260,6264,6267],{},[854,6261,6262],{},[1603,6263,2948],{},[854,6265,6266],{},"The full texture palette shown in the dock's picker.",[854,6268,6269],{},[516,6270,3570],{},[836,6272,6273,6278,6287],{},[854,6274,6275],{},[1603,6276,6277],{},"theme",[854,6279,6280,5745,6283,6286],{},[516,6281,6282],{},"'light'",[516,6284,6285],{},"'dark'"," — overlay theme tokens.",[854,6288,6289],{},[516,6290,6282],{},[836,6292,6293,6298,6301],{},[854,6294,6295],{},[1603,6296,6297],{},"snapAngle",[854,6299,6300],{},"Rotation step (degrees) applied when the snap toggle is on. Snap-tick ring on the handle adapts automatically.",[854,6302,6303],{},[516,6304,6305],{},"15",[836,6307,6308,6313,6325],{},[854,6309,6310],{},[1603,6311,6312],{},"exportFilename",[854,6314,6315,6316,5853,6318,6320,6321,6324],{},"Filename for the built-in JSON download. When omitted, defaults to ",[516,6317,4240],{},[516,6319,3647],{}," to skip the auto-download (the ",[516,6322,6323],{},"@export"," event still fires).",[854,6326,6327],{},[516,6328,4240],{},[836,6330,6331,6335,6338],{},[854,6332,6333],{},[1603,6334,4168],{},[854,6336,6337],{},"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.",[854,6339,6340],{},[516,6341,874],{},[521,6343,6345,5882],{"id":6344},"decaldebugui-events",[516,6346,2195],{},[830,6348,6349,6359],{},[833,6350,6351],{},[836,6352,6353,6355,6357],{},[839,6354,5891],{},[839,6356,5894],{},[839,6358,844],{},[849,6360,6361,6375],{},[836,6362,6363,6367,6372],{},[854,6364,6365],{},[516,6366,1097],{},[854,6368,6369],{},[516,6370,6371],{},"DecalLayout",[854,6373,6374],{},"Fires after the user clicks Export. The download (if enabled) has already been triggered — use this for side effects (POST, analytics…).",[836,6376,6377,6381,6385],{},[854,6378,6379],{},[516,6380,576],{},[854,6382,6383],{},[516,6384,6371],{},[854,6386,6387],{},"Fires after the user picks a JSON file. The layout has been sanitised (unknown keys dropped) and already applied to the bound Decals.",[521,6389,6391],{"id":6390},"caveats","Caveats",[2183,6393,6394,6409,6426,6442],{},[2186,6395,6396,6397,6400,6401,6404,6405,6408],{},"✨ The overlay sits at ",[516,6398,6399],{},"position: fixed; inset: 0; pointer-events: none"," with\nindividual panels opting back in. It sits ",[1603,6402,6403],{},"above"," the canvas by default\n(",[516,6406,6407],{},"z-index: 1000000",") — adjust via host CSS if needed.",[2186,6410,6411,6412,6414,6415,6418,6419,1401,6422,6425],{},"🎨 ",[516,6413,2195],{}," ships its own theme in a global stylesheet under the\n",[516,6416,6417],{},".cientos-decal-ui"," namespace, so host styles aren't affected. The CSS\nvariables (",[516,6420,6421],{},"--accent",[516,6423,6424],{},"--dock-bg",", etc.) can be overridden by targeting\nthe namespace.",[2186,6427,6428,6429,6432,6433,6435,6436,6438,6439,6441],{},"🔶 Decals are ",[1603,6430,6431],{},"per-canvas"," — if you have multiple ",[516,6434,3188],{}," in your\napp, each one has its own independent session. Pair each ",[516,6437,2195],{},"\nwith the right ",[516,6440,3721],{}," (from one of the Decals inside that canvas).",[2186,6443,6444,6445,1049],{},"🧩 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 ",[516,6446,6447],{},":mesh=\"meshRef\"",[521,6449,6451],{"id":6450},"limitations","Limitations",[1976,6453,6454,6468,6475,6518],{},[512,6455,6456,6457,6460,6461,3327,6463,3327,6465,6467],{},"Decal vertices are baked into the ",[1603,6458,6459],{},"target mesh's local space"," at\nbuild time (the decal mesh is imperatively re-parented to the target,\nso ",[516,6462,1389],{},[516,6464,5761],{},[516,6466,715],{}," on the parent are followed via\nthe scene graph — no rebuild needed).",[512,6469,6470,6471,6474],{},"Runtime deformations that change vertex positions outside of a\ntransform are ",[1603,6472,6473],{},"not"," followed:",[2183,6476,6477,6490,6498,6505],{},[2186,6478,6479,6484,6485,1049],{},[1603,6480,6481],{},[516,6482,6483],{},"SkinnedMesh"," skinning is not applied — the decal stays in rest\npose. See ",[1043,6486,6489],{"href":6487,"rel":6488},"https://github.com/mrdoob/three.js/issues/7926",[1047],"three.js#7926",[2186,6491,6492,6497],{},[1603,6493,6494],{},[516,6495,6496],{},"morphAttributes"," on the parent are ignored.",[2186,6499,6500,6501,6504],{},"Direct mutations of the parent's ",[516,6502,6503],{},"geometry.attributes.position","\n(e.g. CPU wave displacement, GPGPU) — the projection is baked once.",[2186,6506,6507,6508,6512,6513,6515,6516,1049],{},"Decals near silhouettes can wrap around onto opposite faces (see\n",[1043,6509,6511],{"href":5850,"rel":6510},[1047],"three.js#21187",") —\nmitigated by the ",[516,6514,5840],{}," prop, default ",[516,6517,5861],{},[512,6519,6520,6522],{},[516,6521,2180],{}," warns once per parent mesh when it detects these conditions.",[521,6524,6526],{"id":6525},"keyboard-shortcuts","Keyboard shortcuts",[830,6528,6529,6539],{},[833,6530,6531],{},[836,6532,6533,6536],{},[839,6534,6535],{},"Shortcut",[839,6537,6538],{},"Action",[849,6540,6541,6550,6559,6571,6584,6597],{},[836,6542,6543,6547],{},[854,6544,6545],{},[516,6546,6159],{},[854,6548,6549],{},"Confirm the in-flight edit",[836,6551,6552,6556],{},[854,6553,6554],{},[516,6555,5996],{},[854,6557,6558],{},"Cancel (revert updates, drop pending placements)",[836,6560,6561,6568],{},[854,6562,6563,3327,6565],{},[516,6564,5959],{},[516,6566,6567],{},"⌫",[854,6569,6570],{},"Delete the edited decal (or cancel a create)",[836,6572,6573,6581],{},[854,6574,6575,3327,6578],{},[516,6576,6577],{},"⌘Z",[516,6579,6580],{},"Ctrl+Z",[854,6582,6583],{},"Undo",[836,6585,6586,6594],{},[854,6587,6588,3327,6591],{},[516,6589,6590],{},"⇧⌘Z",[516,6592,6593],{},"Ctrl+⇧Z",[854,6595,6596],{},"Redo",[836,6598,6599,6602],{},[854,6600,6601],{},"Click outside",[854,6603,6604],{},"Auto-commit an in-flight update; cancel a create",[521,6606,6608,6609,3331],{"id":6607},"programmatic-api-usedecaleditor","Programmatic API (",[516,6610,6611],{},"useDecalEditor",[512,6613,6614,6615,6617,6618,6620,6621,6623,6624,6626],{},"Skip ",[516,6616,2195],{}," entirely or augment it with custom panels —\n",[516,6619,2208],{}," returns the same canvas-scoped session every Decal\nshares. Call it from any component inside ",[516,6622,3188],{}," (after at\nleast one ",[516,6625,2180],{}," has mounted).",[525,6628,6630],{"className":1089,"code":6629,"language":563,"meta":484,"style":484},"import { useDecalEditor } from '@tresjs/cientos'\n\nconst session = useDecalEditor()\n",[516,6631,6632,6651,6655],{"__ignoreMap":484},[536,6633,6634,6636,6638,6641,6643,6645,6647,6649],{"class":538,"line":485},[536,6635,576],{"class":575},[536,6637,579],{"class":541},[536,6639,6640],{"class":582}," useDecalEditor",[536,6642,592],{"class":541},[536,6644,595],{"class":575},[536,6646,598],{"class":541},[536,6648,601],{"class":562},[536,6650,604],{"class":541},[536,6652,6653],{"class":538,"line":486},[536,6654,641],{"emptyLinePlaceholder":492},[536,6656,6657,6659,6661,6663,6665],{"class":538,"line":607},[536,6658,2385],{"class":549},[536,6660,3656],{"class":582},[536,6662,556],{"class":541},[536,6664,6640],{"class":2404},[536,6666,6667],{"class":582},"()\n",[512,6669,6670,6671,1401,6674,2458,6677,1401,6680,6683,6684,2458,6686,1401,6689,1401,6692,6695,6696,6699,6700,6703,6704,1401,6707,1401,6710,2458,6713,6716],{},"The session exposes reactive state (",[516,6672,6673],{},"editingEntry",[516,6675,6676],{},"editingMode",[516,6678,6679],{},"canUndo",[516,6681,6682],{},"canRedo",", …), by-id mutators (",[516,6685,6130],{},[516,6687,6688],{},"setZIndexById",[516,6690,6691],{},"setVisibilityById",[516,6693,6694],{},"removeById","), batched updates\n(",[516,6697,6698],{},"setMeshData","), commit / delete / cancel listeners, undo / redo, and\na ",[516,6701,6702],{},"registerDecalEntry"," hook for external entries. Helper utilities\n(",[516,6705,6706],{},"ensureTextureNames",[516,6708,6709],{},"getTextureName",[516,6711,6712],{},"getTextureAspect",[516,6714,6715],{},"invalidateDecalGeometry",") are exported alongside.",[5442,6718,5444,6719,6722,6727,6802,6806,6877,6893,6897,6933,6939,6943,7082,7086,7132,7135,7139,7153,7323,7327],{},[5446,6720,6721],{},"Full API reference",[6723,6724,6726],"h4",{"id":6725},"reactive-state","Reactive state",[525,6728,6730],{"className":1089,"code":6729,"language":563,"meta":484,"style":484},"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",[516,6731,6732,6744,6756,6768,6779,6791],{"__ignoreMap":484},[536,6733,6734,6736,6738,6741],{"class":538,"line":485},[536,6735,3721],{"class":582},[536,6737,1049],{"class":541},[536,6739,6740],{"class":582},"editingEntry ",[536,6742,6743],{"class":1112},"// ShallowRef\u003CDecalEntry | null>\n",[536,6745,6746,6748,6750,6753],{"class":538,"line":486},[536,6747,3721],{"class":582},[536,6749,1049],{"class":541},[536,6751,6752],{"class":582},"editingMode ",[536,6754,6755],{"class":1112},"// Ref\u003C'create' | 'update' | null>\n",[536,6757,6758,6760,6762,6765],{"class":538,"line":607},[536,6759,3721],{"class":582},[536,6761,1049],{"class":541},[536,6763,6764],{"class":582},"lockedMeshUuid ",[536,6766,6767],{"class":1112},"// Ref\u003Cstring | null>\n",[536,6769,6770,6772,6774,6777],{"class":538,"line":628},[536,6771,3721],{"class":582},[536,6773,1049],{"class":541},[536,6775,6776],{"class":582},"hoveredEntry ",[536,6778,6743],{"class":1112},[536,6780,6781,6783,6785,6788],{"class":538,"line":638},[536,6782,3721],{"class":582},[536,6784,1049],{"class":541},[536,6786,6787],{"class":582},"canUndo ",[536,6789,6790],{"class":1112},"// Ref\u003Cboolean>\n",[536,6792,6793,6795,6797,6800],{"class":538,"line":644},[536,6794,3721],{"class":582},[536,6796,1049],{"class":541},[536,6798,6799],{"class":582},"canRedo ",[536,6801,6790],{"class":1112},[6723,6803,6805],{"id":6804},"mutating-decals-by-id","Mutating decals by id",[525,6807,6809],{"className":1089,"code":6808,"language":563,"meta":484,"style":484},"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",[516,6810,6811,6825,6844,6864],{"__ignoreMap":484},[536,6812,6813,6815,6817,6819,6822],{"class":538,"line":485},[536,6814,3721],{"class":582},[536,6816,1049],{"class":541},[536,6818,6130],{"class":2404},[536,6820,6821],{"class":582},"(id) ",[536,6823,6824],{"class":1112},"// start editing a placed decal\n",[536,6826,6827,6829,6831,6833,6836,6838,6841],{"class":538,"line":486},[536,6828,3721],{"class":582},[536,6830,1049],{"class":541},[536,6832,6688],{"class":2404},[536,6834,6835],{"class":582},"(id",[536,6837,586],{"class":541},[536,6839,6840],{"class":582}," newZ) ",[536,6842,6843],{"class":1112},"// reorder one decal\n",[536,6845,6846,6848,6850,6852,6854,6856,6859,6861],{"class":538,"line":607},[536,6847,3721],{"class":582},[536,6849,1049],{"class":541},[536,6851,6691],{"class":2404},[536,6853,6835],{"class":582},[536,6855,586],{"class":541},[536,6857,6858],{"class":4458}," false",[536,6860,4815],{"class":582},[536,6862,6863],{"class":1112},"// hide / show\n",[536,6865,6866,6868,6870,6872,6874],{"class":538,"line":628},[536,6867,3721],{"class":582},[536,6869,1049],{"class":541},[536,6871,6694],{"class":2404},[536,6873,6821],{"class":582},[536,6875,6876],{"class":1112},"// delete\n",[512,6878,6879,6880,6883,6884,6886,6887,6889,6890,6892],{},"When the targeted id matches the ",[1603,6881,6882],{},"currently editing"," entry, mutations\nland on the in-flight buffer (committed on ",[516,6885,6159],{},", reverted on ",[516,6888,5996],{},").\nOtherwise they update ",[516,6891,2709],{}," immediately and record history.",[6723,6894,6896],{"id":6895},"batched-mesh-updates","Batched mesh updates",[525,6898,6900],{"className":1089,"code":6899,"language":563,"meta":484,"style":484},"session.setMeshData(meshName, nextEntries, { recordHistory: true })\n",[516,6901,6902],{"__ignoreMap":484},[536,6903,6904,6906,6908,6910,6913,6915,6918,6920,6922,6925,6927,6929,6931],{"class":538,"line":485},[536,6905,3721],{"class":582},[536,6907,1049],{"class":541},[536,6909,6698],{"class":2404},[536,6911,6912],{"class":582},"(meshName",[536,6914,586],{"class":541},[536,6916,6917],{"class":582}," nextEntries",[536,6919,586],{"class":541},[536,6921,579],{"class":541},[536,6923,6924],{"class":545}," recordHistory",[536,6926,1121],{"class":541},[536,6928,4459],{"class":4458},[536,6930,592],{"class":541},[536,6932,2418],{"class":582},[512,6934,6935,6936,6938],{},"A single emit avoids the stale-snapshot race that hits multiple\nback-to-back ",[516,6937,6688],{}," calls in the same tick.",[6723,6940,6942],{"id":6941},"listening-to-commits","Listening to commits",[525,6944,6946],{"className":1089,"code":6945,"language":563,"meta":484,"style":484},"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",[516,6947,6948,6983,7008,7014,7042,7065,7069,7074],{"__ignoreMap":484},[536,6949,6950,6952,6955,6957,6960,6962,6965,6967,6969,6972,6974,6977,6979,6981],{"class":538,"line":485},[536,6951,2385],{"class":549},[536,6953,6954],{"class":582}," off ",[536,6956,556],{"class":541},[536,6958,6959],{"class":582}," session",[536,6961,1049],{"class":541},[536,6963,6964],{"class":2404},"onCommit",[536,6966,2407],{"class":582},[536,6968,2407],{"class":541},[536,6970,5979],{"class":6971},"sHdIc",[536,6973,586],{"class":541},[536,6975,6976],{"class":6971}," mode",[536,6978,3331],{"class":541},[536,6980,3668],{"class":549},[536,6982,1107],{"class":541},[536,6984,6985,6988,6990,6993,6995,6998,7000,7003,7005],{"class":538,"line":486},[536,6986,6987],{"class":582},"  console",[536,6989,1049],{"class":541},[536,6991,6992],{"class":2404},"log",[536,6994,2407],{"class":545},[536,6996,6997],{"class":582},"mode",[536,6999,586],{"class":541},[536,7001,7002],{"class":582}," entry",[536,7004,4815],{"class":545},[536,7006,7007],{"class":1112},"// mode: 'create' | 'update'\n",[536,7009,7010,7012],{"class":538,"line":607},[536,7011,2398],{"class":541},[536,7013,2418],{"class":582},[536,7015,7016,7018,7020,7023,7025,7027,7029,7031,7033,7035,7038,7040],{"class":538,"line":628},[536,7017,3721],{"class":582},[536,7019,1049],{"class":541},[536,7021,7022],{"class":2404},"onDelete",[536,7024,2407],{"class":582},[536,7026,2407],{"class":541},[536,7028,5979],{"class":6971},[536,7030,3331],{"class":541},[536,7032,3668],{"class":549},[536,7034,579],{"class":541},[536,7036,7037],{"class":1112}," /* … */",[536,7039,592],{"class":541},[536,7041,2418],{"class":582},[536,7043,7044,7046,7048,7051,7053,7055,7057,7059,7061,7063],{"class":538,"line":638},[536,7045,3721],{"class":582},[536,7047,1049],{"class":541},[536,7049,7050],{"class":2404},"onCancel",[536,7052,2407],{"class":582},[536,7054,3665],{"class":541},[536,7056,3668],{"class":549},[536,7058,579],{"class":541},[536,7060,7037],{"class":1112},[536,7062,592],{"class":541},[536,7064,2418],{"class":582},[536,7066,7067],{"class":538,"line":644},[536,7068,641],{"emptyLinePlaceholder":492},[536,7070,7071],{"class":538,"line":654},[536,7072,7073],{"class":1112},"// All return an unsubscribe function:\n",[536,7075,7076,7079],{"class":538,"line":677},[536,7077,7078],{"class":2404},"onBeforeUnmount",[536,7080,7081],{"class":582},"(off)\n",[6723,7083,7085],{"id":7084},"undo-redo","Undo / redo",[525,7087,7089],{"className":1089,"code":7088,"language":563,"meta":484,"style":484},"session.canUndo.value // Ref\u003Cboolean>\nsession.undo() // returns true if something was undone\nsession.redo()\n",[516,7090,7091,7106,7121],{"__ignoreMap":484},[536,7092,7093,7095,7097,7099,7101,7104],{"class":538,"line":485},[536,7094,3721],{"class":582},[536,7096,1049],{"class":541},[536,7098,6679],{"class":582},[536,7100,1049],{"class":541},[536,7102,7103],{"class":582},"value ",[536,7105,6790],{"class":1112},[536,7107,7108,7110,7112,7115,7118],{"class":538,"line":486},[536,7109,3721],{"class":582},[536,7111,1049],{"class":541},[536,7113,7114],{"class":2404},"undo",[536,7116,7117],{"class":582},"() ",[536,7119,7120],{"class":1112},"// returns true if something was undone\n",[536,7122,7123,7125,7127,7130],{"class":538,"line":607},[536,7124,3721],{"class":582},[536,7126,1049],{"class":541},[536,7128,7129],{"class":2404},"redo",[536,7131,6667],{"class":582},[512,7133,7134],{},"History is per-canvas, capped at 100 operations, disabled mid-edit.",[6723,7136,7138],{"id":7137},"power-user-external-entries","Power user — external entries",[512,7140,7141,7142,7144,7145,7148,7149,7152],{},"Plug a decal-like object that lives outside a ",[516,7143,2180],{}," (custom data\nsource, server snapshot, fake entry for tests) by registering a\n",[516,7146,7147],{},"DecalEntryActions"," bundle so the ",[516,7150,7151],{},"*ById"," session methods route to it:",[525,7154,7156],{"className":1089,"code":7155,"language":563,"meta":484,"style":484},"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",[516,7157,7158,7179,7183,7204,7223,7245,7267,7284,7295],{"__ignoreMap":484},[536,7159,7160,7162,7164,7166,7169,7171,7173,7175,7177],{"class":538,"line":485},[536,7161,576],{"class":575},[536,7163,3433],{"class":575},[536,7165,579],{"class":541},[536,7167,7168],{"class":582}," DecalEntryActions",[536,7170,592],{"class":541},[536,7172,595],{"class":575},[536,7174,598],{"class":541},[536,7176,601],{"class":562},[536,7178,604],{"class":541},[536,7180,7181],{"class":538,"line":486},[536,7182,641],{"emptyLinePlaceholder":492},[536,7184,7185,7187,7189,7191,7193,7195,7198,7200,7202],{"class":538,"line":607},[536,7186,3721],{"class":582},[536,7188,1049],{"class":541},[536,7190,6702],{"class":2404},[536,7192,2407],{"class":582},[536,7194,2410],{"class":541},[536,7196,7197],{"class":562},"decal-7",[536,7199,2410],{"class":541},[536,7201,586],{"class":541},[536,7203,1107],{"class":541},[536,7205,7206,7209,7211,7214,7216,7218,7220],{"class":538,"line":628},[536,7207,7208],{"class":2404},"  beginEdit",[536,7210,1121],{"class":541},[536,7212,7213],{"class":541}," ()",[536,7215,3668],{"class":549},[536,7217,579],{"class":541},[536,7219,7037],{"class":1112},[536,7221,7222],{"class":541}," },\n",[536,7224,7225,7228,7230,7232,7235,7237,7239,7241,7243],{"class":538,"line":638},[536,7226,7227],{"class":2404},"  setZIndex",[536,7229,1121],{"class":541},[536,7231,3065],{"class":541},[536,7233,7234],{"class":6971},"newZ",[536,7236,3331],{"class":541},[536,7238,3668],{"class":549},[536,7240,579],{"class":541},[536,7242,7037],{"class":1112},[536,7244,7222],{"class":541},[536,7246,7247,7250,7252,7254,7257,7259,7261,7263,7265],{"class":538,"line":644},[536,7248,7249],{"class":2404},"  setVisibility",[536,7251,1121],{"class":541},[536,7253,3065],{"class":541},[536,7255,7256],{"class":6971},"visible",[536,7258,3331],{"class":541},[536,7260,3668],{"class":549},[536,7262,579],{"class":541},[536,7264,7037],{"class":1112},[536,7266,7222],{"class":541},[536,7268,7269,7272,7274,7276,7278,7280,7282],{"class":538,"line":654},[536,7270,7271],{"class":2404},"  remove",[536,7273,1121],{"class":541},[536,7275,7213],{"class":541},[536,7277,3668],{"class":549},[536,7279,579],{"class":541},[536,7281,7037],{"class":1112},[536,7283,7222],{"class":541},[536,7285,7286,7288,7291,7293],{"class":538,"line":677},[536,7287,2398],{"class":541},[536,7289,7290],{"class":575}," satisfies",[536,7292,7168],{"class":1103},[536,7294,2418],{"class":582},[536,7296,7297,7299,7301,7303,7305,7307,7309,7312,7314,7316,7318,7320],{"class":538,"line":689},[536,7298,7078],{"class":2404},[536,7300,2407],{"class":582},[536,7302,3665],{"class":541},[536,7304,3668],{"class":549},[536,7306,6959],{"class":582},[536,7308,1049],{"class":541},[536,7310,7311],{"class":2404},"unregisterDecalEntry",[536,7313,2407],{"class":582},[536,7315,2410],{"class":541},[536,7317,7197],{"class":562},[536,7319,2410],{"class":541},[536,7321,7322],{"class":582},"))\n",[6723,7324,7326],{"id":7325},"helper-utilities","Helper utilities",[830,7328,7329,7338],{},[833,7330,7331],{},[836,7332,7333,7335],{},[839,7334,291],{},[839,7336,7337],{},"Use",[849,7339,7340,7360,7372,7385],{},[836,7341,7342,7347],{},[854,7343,7344],{},[516,7345,7346],{},"ensureTextureNames(textures)",[854,7348,7349,7350,7352,7353,7356,7357,1049],{},"Back-fills ",[516,7351,2972],{}," from ",[516,7354,7355],{},"userData.name"," or the filename in ",[516,7358,7359],{},"image.src",[836,7361,7362,7367],{},[854,7363,7364],{},[516,7365,7366],{},"getTextureName(texture)",[854,7368,7369,7370,1049],{},"Single-texture variant — returns a stable name or ",[516,7371,3647],{},[836,7373,7374,7379],{},[854,7375,7376],{},[516,7377,7378],{},"getTextureAspect(texture)",[854,7380,7381,7384],{},[516,7382,7383],{},"{ x, y }"," aspect ratio for custom-sized decals.",[836,7386,7387,7392],{},[854,7388,7389],{},[516,7390,7391],{},"invalidateDecalGeometry(mesh)",[854,7393,7394],{},"Force a rebuild on the next frame — call when the parent mesh moved or swapped.",[1230,7396,7397],{},"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":484,"searchDepth":485,"depth":486,"links":7399},[7400,7401,7402,7403,7404,7408,7409,7417,7418,7420,7422,7424,7426,7428,7429,7430,7431],{"id":523,"depth":486,"text":15},{"id":2779,"depth":486,"text":2780},{"id":2979,"depth":486,"text":2229},{"id":3073,"depth":486,"text":3074},{"id":3168,"depth":486,"text":7405,"children":7406},"Editable mode + \u003CDecalDebugUI>",[7407],{"id":4115,"depth":607,"text":4116},{"id":4234,"depth":486,"text":3370},{"id":4333,"depth":486,"text":7410,"children":7411},"Targeting a loaded model (.glb)",[7412,7414,7416],{"id":4360,"depth":607,"text":7413},"When :object is a Mesh",{"id":4602,"depth":607,"text":7415},"When :object is a Group",{"id":4963,"depth":607,"text":4964},{"id":5423,"depth":486,"text":5424},{"id":5680,"depth":486,"text":7419},"\u003CDecal> props",{"id":5879,"depth":486,"text":7421},"\u003CDecal> events",{"id":6020,"depth":486,"text":7423},"\u003CDecal> exposed (via ref)",{"id":6193,"depth":486,"text":7425},"\u003CDecalDebugUI> props",{"id":6344,"depth":486,"text":7427},"\u003CDecalDebugUI> events",{"id":6390,"depth":486,"text":6391},{"id":6450,"depth":486,"text":6451},{"id":6525,"depth":486,"text":6526},{"id":6607,"depth":486,"text":7432},"Programmatic API (useDecalEditor)","Project a texture onto a mesh's surface — with an optional in-canvas editor UI.",{},{"title":49,"description":7433},"UXzJTvWzu0DUebb9Yjx34N2tvhWy1dqXuLm2nippsug",{"id":7438,"title":53,"body":7439,"description":7741,"extension":489,"links":490,"meta":7742,"navigation":492,"path":54,"seo":7743,"stem":55,"__hash__":7744},"docs/2.api/1.abstractions/edges.md",{"type":477,"value":7440,"toc":7737},[7441,7446,7462,7464,7655,7657,7674,7735],[506,7442,7443],{},[7444,7445],"abstractions-edges",{},[512,7447,2765,7448,7451,7452,7457,7458,7461],{},[516,7449,7450],{},"cientos"," package provides an abstraction of ",[1043,7453,7456],{"href":7454,"rel":7455},"https://threejs.org/docs/#api/en/geometries/EdgesGeometry",[1047],"EdgesGeometry"," from Three.js, ",[516,7459,7460],{},"\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.",[521,7463,15],{"id":523},[525,7465,7468],{"className":527,"code":7466,"highlights":7467,"language":532,"meta":484,"style":484},"\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",[607,730],[516,7469,7470,7490,7508,7536,7544,7548,7556,7564,7597,7605,7613,7622,7631,7639,7647],{"__ignoreMap":484},[536,7471,7472,7474,7476,7478,7480,7482,7484,7486,7488],{"class":538,"line":485},[536,7473,542],{"class":541},[536,7475,546],{"class":545},[536,7477,550],{"class":549},[536,7479,553],{"class":549},[536,7481,556],{"class":541},[536,7483,559],{"class":541},[536,7485,563],{"class":562},[536,7487,559],{"class":541},[536,7489,568],{"class":541},[536,7491,7492,7494,7496,7498,7500,7502,7504,7506],{"class":538,"line":486},[536,7493,576],{"class":575},[536,7495,579],{"class":541},[536,7497,614],{"class":582},[536,7499,592],{"class":541},[536,7501,595],{"class":575},[536,7503,598],{"class":541},[536,7505,623],{"class":562},[536,7507,604],{"class":541},[536,7509,7511,7513,7515,7517,7519,7522,7524,7526,7528,7530,7532,7534],{"class":7510,"line":607},[538,572],[536,7512,576],{"class":575},[536,7514,579],{"class":541},[536,7516,1299],{"class":582},[536,7518,586],{"class":541},[536,7520,7521],{"class":582}," Edges",[536,7523,586],{"class":541},[536,7525,589],{"class":582},[536,7527,592],{"class":541},[536,7529,595],{"class":575},[536,7531,598],{"class":541},[536,7533,601],{"class":562},[536,7535,604],{"class":541},[536,7537,7538,7540,7542],{"class":538,"line":628},[536,7539,631],{"class":541},[536,7541,546],{"class":545},[536,7543,568],{"class":541},[536,7545,7546],{"class":538,"line":638},[536,7547,641],{"emptyLinePlaceholder":492},[536,7549,7550,7552,7554],{"class":538,"line":644},[536,7551,542],{"class":541},[536,7553,649],{"class":545},[536,7555,568],{"class":541},[536,7557,7558,7560,7562],{"class":538,"line":654},[536,7559,657],{"class":541},[536,7561,660],{"class":545},[536,7563,568],{"class":541},[536,7565,7566,7568,7570,7572,7574,7576,7578,7580,7582,7584,7586,7588,7591,7593,7595],{"class":538,"line":677},[536,7567,680],{"class":541},[536,7569,683],{"class":545},[536,7571,712],{"class":541},[536,7573,1389],{"class":549},[536,7575,556],{"class":541},[536,7577,559],{"class":541},[536,7579,1396],{"class":541},[536,7581,868],{"class":722},[536,7583,1401],{"class":541},[536,7585,723],{"class":722},[536,7587,1401],{"class":541},[536,7589,7590],{"class":722},"5",[536,7592,1411],{"class":541},[536,7594,559],{"class":541},[536,7596,686],{"class":541},[536,7598,7599,7601,7603],{"class":538,"line":689},[536,7600,680],{"class":541},[536,7602,694],{"class":545},[536,7604,686],{"class":541},[536,7606,7607,7609,7611],{"class":538,"line":699},[536,7608,680],{"class":541},[536,7610,197],{"class":545},[536,7612,568],{"class":541},[536,7614,7615,7617,7620],{"class":538,"line":704},[536,7616,756],{"class":541},[536,7618,7619],{"class":545},"TresMeshBasicMaterial",[536,7621,686],{"class":541},[536,7623,7625,7627,7629],{"class":7624,"line":730},[538,572],[536,7626,756],{"class":541},[536,7628,53],{"class":545},[536,7630,686],{"class":541},[536,7632,7633,7635,7637],{"class":538,"line":530},[536,7634,798],{"class":541},[536,7636,197],{"class":545},[536,7638,568],{"class":541},[536,7640,7641,7643,7645],{"class":538,"line":753},[536,7642,808],{"class":541},[536,7644,660],{"class":545},[536,7646,568],{"class":541},[536,7648,7649,7651,7653],{"class":538,"line":764},[536,7650,631],{"class":541},[536,7652,649],{"class":545},[536,7654,568],{"class":541},[521,7656,825],{"id":824},[512,7658,7659,7661,7662,7667,7668,7673],{},[516,7660,7460],{}," is based on ",[1043,7663,7666],{"href":7664,"rel":7665},"https://threejs.org/docs/#api/en/objects/LineSegments",[1047],"LineSegments"," & ",[1043,7669,7672],{"href":7670,"rel":7671},"https://threejs.org/docs/#api/en/objects/Line",[1047],"Line"," and supports all of its props.",[830,7675,7676,7686],{},[833,7677,7678],{},[836,7679,7680,7682,7684],{},[839,7681,841],{"align":900},[839,7683,844],{"align":900},[839,7685,847],{},[849,7687,7688,7719],{},[836,7689,7690,7695,7714],{},[854,7691,7692],{"align":900},[1603,7693,7694],{},"color",[854,7696,7697,7700,7701,7704,7705,2237,7710],{"align":900},[516,7698,7699],{},"THREE.Color"," — Color of the edges. ",[7702,7703],"br",{}," More informations : ",[1043,7706,7709],{"href":7707,"rel":7708},"https://docs.tresjs.org/api/instances-arguments-and-props.html#colors",[1047],"TresColor",[1043,7711,7699],{"href":7712,"rel":7713},"https://threejs.org/docs/#api/en/math/Color",[1047],[854,7715,7716],{},[516,7717,7718],{},"#ff0000",[836,7720,7721,7726,7731],{},[854,7722,7723],{"align":900},[1603,7724,7725],{},"threshold",[854,7727,7728,7730],{"align":900},[516,7729,5487],{}," — An edge is only rendered if the angle (in degrees) between the face normals of the adjoining faces exceeds this value",[854,7732,7733],{},[516,7734,1823],{},[1230,7736,1578],{},{"title":484,"searchDepth":485,"depth":486,"links":7738},[7739,7740],{"id":523,"depth":486,"text":15},{"id":824,"depth":486,"text":825},"Render visible edges of objects with enhanced visual quality.",{},{"title":53,"description":7741},"vRk1JMb5etr7hxo-Xvqb4plDDBOVqDhpMNgSnbTVmEE",{"id":7746,"title":57,"body":7747,"description":8414,"extension":489,"links":490,"meta":8415,"navigation":492,"path":58,"seo":8416,"stem":59,"__hash__":8417},"docs/2.api/1.abstractions/fit.md",{"type":477,"value":7748,"toc":8410},[7749,7754,7760,7770,7776,7778,8274,8276,8407],[2265,7750,7751],{},[7752,7753],"abstractions-fit",{},[512,7755,7756,7759],{},[516,7757,7758],{},"\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.",[512,7761,7762,7763,7766,7767,1049],{},"Alternatively, the children can be fit into a ",[516,7764,7765],{},"Box3"," or an ",[516,7768,7769],{},"Object3D",[512,7771,7772,7773,7775],{},"Or the children can simply be resized. With ",[516,7774,7758],{}," the children are scaled relative to the center of their calculated bounding box.",[521,7777,15],{"id":523},[525,7779,7782],{"className":527,"code":7780,"highlights":7781,"language":532,"meta":484,"style":484},"\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",[486,815,2685],[516,7783,7784,7804,7828,7846,7870,7874,7893,7935,7973,8000,8005,8009,8025,8040,8048,8052,8060,8079,8111,8119,8128,8134,8161,8177,8191,8215,8220,8229,8258,8266],{"__ignoreMap":484},[536,7785,7786,7788,7790,7792,7794,7796,7798,7800,7802],{"class":538,"line":485},[536,7787,542],{"class":541},[536,7789,546],{"class":545},[536,7791,550],{"class":549},[536,7793,553],{"class":549},[536,7795,556],{"class":541},[536,7797,559],{"class":541},[536,7799,563],{"class":562},[536,7801,559],{"class":541},[536,7803,568],{"class":541},[536,7805,7807,7809,7811,7814,7816,7818,7820,7822,7824,7826],{"class":7806,"line":486},[538,572],[536,7808,576],{"class":575},[536,7810,579],{"class":541},[536,7812,7813],{"class":582}," Fit",[536,7815,586],{"class":541},[536,7817,589],{"class":582},[536,7819,592],{"class":541},[536,7821,595],{"class":575},[536,7823,598],{"class":541},[536,7825,601],{"class":562},[536,7827,604],{"class":541},[536,7829,7830,7832,7834,7836,7838,7840,7842,7844],{"class":538,"line":607},[536,7831,576],{"class":575},[536,7833,579],{"class":541},[536,7835,614],{"class":582},[536,7837,592],{"class":541},[536,7839,595],{"class":575},[536,7841,598],{"class":541},[536,7843,623],{"class":562},[536,7845,604],{"class":541},[536,7847,7848,7850,7852,7855,7857,7860,7862,7864,7866,7868],{"class":538,"line":628},[536,7849,576],{"class":575},[536,7851,579],{"class":541},[536,7853,7854],{"class":582}," BoxGeometry",[536,7856,586],{"class":541},[536,7858,7859],{"class":582}," MeshNormalMaterial",[536,7861,592],{"class":541},[536,7863,595],{"class":575},[536,7865,598],{"class":541},[536,7867,4707],{"class":562},[536,7869,604],{"class":541},[536,7871,7872],{"class":538,"line":638},[536,7873,641],{"emptyLinePlaceholder":492},[536,7875,7876,7878,7881,7883,7885,7888,7890],{"class":538,"line":644},[536,7877,2385],{"class":549},[536,7879,7880],{"class":582}," positions",[536,7882,1121],{"class":541},[536,7884,5492],{"class":1103},[536,7886,7887],{"class":582},"[][] ",[536,7889,556],{"class":541},[536,7891,7892],{"class":582}," []\n",[536,7894,7895,7898,7900,7903,7906,7908,7911,7913,7915,7918,7921,7923,7925,7928,7931,7933],{"class":538,"line":654},[536,7896,7897],{"class":575},"for",[536,7899,3065],{"class":582},[536,7901,7902],{"class":549},"let",[536,7904,7905],{"class":582}," y ",[536,7907,556],{"class":541},[536,7909,7910],{"class":722}," 100",[536,7912,4199],{"class":541},[536,7914,7905],{"class":582},[536,7916,7917],{"class":541},"\u003C=",[536,7919,7920],{"class":722}," 120",[536,7922,4199],{"class":541},[536,7924,7905],{"class":582},[536,7926,7927],{"class":541},"+=",[536,7929,7930],{"class":722}," 10",[536,7932,4815],{"class":582},[536,7934,3251],{"class":541},[536,7936,7937,7940,7942,7944,7947,7949,7951,7953,7955,7958,7960,7962,7964,7967,7969,7971],{"class":538,"line":677},[536,7938,7939],{"class":575},"  for",[536,7941,3065],{"class":545},[536,7943,7902],{"class":549},[536,7945,7946],{"class":582}," x",[536,7948,2401],{"class":541},[536,7950,7910],{"class":722},[536,7952,4199],{"class":541},[536,7954,7946],{"class":582},[536,7956,7957],{"class":541}," \u003C=",[536,7959,7920],{"class":722},[536,7961,4199],{"class":541},[536,7963,7946],{"class":582},[536,7965,7966],{"class":541}," +=",[536,7968,7930],{"class":722},[536,7970,4815],{"class":545},[536,7972,3251],{"class":541},[536,7974,7975,7978,7980,7983,7985,7988,7990,7993,7995,7998],{"class":538,"line":689},[536,7976,7977],{"class":582},"    positions",[536,7979,1049],{"class":541},[536,7981,7982],{"class":2404},"push",[536,7984,3520],{"class":545},[536,7986,7987],{"class":582},"x",[536,7989,586],{"class":541},[536,7991,7992],{"class":582}," y",[536,7994,586],{"class":541},[536,7996,7997],{"class":722}," 9999",[536,7999,2570],{"class":545},[536,8001,8002],{"class":538,"line":699},[536,8003,8004],{"class":541},"  }\n",[536,8006,8007],{"class":538,"line":704},[536,8008,1228],{"class":541},[536,8010,8011,8013,8016,8018,8021,8023],{"class":538,"line":730},[536,8012,2385],{"class":549},[536,8014,8015],{"class":582}," geom ",[536,8017,556],{"class":541},[536,8019,8020],{"class":541}," new",[536,8022,7854],{"class":2404},[536,8024,6667],{"class":582},[536,8026,8027,8029,8032,8034,8036,8038],{"class":538,"line":530},[536,8028,2385],{"class":549},[536,8030,8031],{"class":582}," mat ",[536,8033,556],{"class":541},[536,8035,8020],{"class":541},[536,8037,7859],{"class":2404},[536,8039,6667],{"class":582},[536,8041,8042,8044,8046],{"class":538,"line":753},[536,8043,631],{"class":541},[536,8045,546],{"class":545},[536,8047,568],{"class":541},[536,8049,8050],{"class":538,"line":764},[536,8051,641],{"emptyLinePlaceholder":492},[536,8053,8054,8056,8058],{"class":538,"line":775},[536,8055,542],{"class":541},[536,8057,649],{"class":545},[536,8059,568],{"class":541},[536,8061,8062,8064,8066,8068,8070,8072,8075,8077],{"class":538,"line":785},[536,8063,657],{"class":541},[536,8065,660],{"class":545},[536,8067,663],{"class":549},[536,8069,556],{"class":541},[536,8071,559],{"class":541},[536,8073,8074],{"class":562},"#4F4F4F",[536,8076,559],{"class":541},[536,8078,568],{"class":541},[536,8080,8081,8083,8085,8087,8089,8091,8093,8095,8097,8099,8101,8103,8105,8107,8109],{"class":538,"line":531},[536,8082,680],{"class":541},[536,8084,683],{"class":545},[536,8086,712],{"class":541},[536,8088,1389],{"class":549},[536,8090,556],{"class":541},[536,8092,559],{"class":541},[536,8094,1396],{"class":541},[536,8096,1823],{"class":722},[536,8098,1401],{"class":541},[536,8100,1823],{"class":722},[536,8102,1401],{"class":541},[536,8104,1823],{"class":722},[536,8106,1411],{"class":541},[536,8108,559],{"class":541},[536,8110,686],{"class":541},[536,8112,8113,8115,8117],{"class":538,"line":805},[536,8114,680],{"class":541},[536,8116,694],{"class":545},[536,8118,686],{"class":541},[536,8120,8122,8124,8126],{"class":8121,"line":815},[538,572],[536,8123,680],{"class":541},[536,8125,57],{"class":545},[536,8127,568],{"class":541},[536,8129,8130,8132],{"class":538,"line":2593},[536,8131,756],{"class":541},[536,8133,5227],{"class":545},[536,8135,8136,8139,8141,8143,8145,8148,8150,8153,8156,8159],{"class":538,"line":2602},[536,8137,8138],{"class":575},"        v-for",[536,8140,556],{"class":541},[536,8142,559],{"class":541},[536,8144,2407],{"class":541},[536,8146,8147],{"class":582},"pos",[536,8149,1401],{"class":541},[536,8151,8152],{"class":582},"index",[536,8154,8155],{"class":541},") in ",[536,8157,8158],{"class":582},"positions",[536,8160,3122],{"class":541},[536,8162,8163,8166,8169,8171,8173,8175],{"class":538,"line":2636},[536,8164,8165],{"class":541},"        :",[536,8167,8168],{"class":549},"key",[536,8170,556],{"class":541},[536,8172,559],{"class":541},[536,8174,8152],{"class":582},[536,8176,3122],{"class":541},[536,8178,8179,8181,8183,8185,8187,8189],{"class":538,"line":2645},[536,8180,8165],{"class":541},[536,8182,1389],{"class":549},[536,8184,556],{"class":541},[536,8186,559],{"class":541},[536,8188,8147],{"class":582},[536,8190,3122],{"class":541},[536,8192,8193,8195,8197,8199,8201,8203,8206,8208,8211,8213],{"class":538,"line":2654},[536,8194,8165],{"class":541},[536,8196,1919],{"class":549},[536,8198,556],{"class":541},[536,8200,559],{"class":541},[536,8202,1396],{"class":541},[536,8204,8205],{"class":582},"geom",[536,8207,1401],{"class":541},[536,8209,8210],{"class":582},"mat",[536,8212,1411],{"class":541},[536,8214,3122],{"class":541},[536,8216,8217],{"class":538,"line":2663},[536,8218,8219],{"class":541},"      />\n",[536,8221,8223,8225,8227],{"class":8222,"line":2685},[538,572],[536,8224,798],{"class":541},[536,8226,57],{"class":545},[536,8228,568],{"class":541},[536,8230,8231,8233,8236,8238,8240,8242,8244,8246,8248,8250,8252,8254,8256],{"class":538,"line":2736},[536,8232,680],{"class":541},[536,8234,8235],{"class":545},"TresGridHelper",[536,8237,712],{"class":541},[536,8239,1919],{"class":549},[536,8241,556],{"class":541},[536,8243,559],{"class":541},[536,8245,1396],{"class":541},[536,8247,1823],{"class":722},[536,8249,1401],{"class":541},[536,8251,1823],{"class":722},[536,8253,1411],{"class":541},[536,8255,559],{"class":541},[536,8257,686],{"class":541},[536,8259,8260,8262,8264],{"class":538,"line":2745},[536,8261,808],{"class":541},[536,8263,660],{"class":545},[536,8265,568],{"class":541},[536,8267,8268,8270,8272],{"class":538,"line":2754},[536,8269,631],{"class":541},[536,8271,649],{"class":545},[536,8273,568],{"class":541},[521,8275,825],{"id":824},[830,8277,8278,8287],{},[833,8279,8280],{},[836,8281,8282,8285],{},[839,8283,8284],{"align":900},"Name",[839,8286,844],{"align":900},[849,8288,8289,8383],{},[836,8290,8291,8296],{},[854,8292,8293],{"align":900},[1603,8294,8295],{},"into",[854,8297,861,8298,8300,8301,8375,8377,8378,8380],{"align":900},[516,8299,8295],{}," is:",[2183,8302,8303,8312,8320,8328,8336,8347,8354],{},[2186,8304,8305,8306,8308,8309,8311],{},"omitted or explicitly ",[516,8307,1082],{},": position/scale children to fit into a 1 × 1 × 1 ",[516,8310,7765],{}," at world origin.",[2186,8313,8314,8316,8317,8319],{},[516,8315,3647],{},": turn off ",[516,8318,7758],{},"; reset scale/position of children.",[2186,8321,8322,8324,8325,1049],{},[516,8323,5487],{},": convert argument to ",[516,8326,8327],{},"Vector3(number, number, number)",[2186,8329,8330,8324,8333,1049],{},[516,8331,8332],{},"[number, number, number]",[516,8334,8335],{},"Vector3",[2186,8337,8338,8340,8341,8343,8344,8346],{},[516,8339,8335],{},": position/scale children to fit inside a ",[516,8342,7765],{}," of size ",[516,8345,8335],{}," at target objects' cumulative center.",[2186,8348,8349,8351,8352,1049],{},[516,8350,7765],{},": position/scale children to fit inside ",[516,8353,7765],{},[2186,8355,8356,8358,8359,8361,8362,8361,8369,8371,8372,8374],{},[516,8357,7769],{},": position/scale children to fit inside calculated ",[516,8360,7765],{},". ",[1043,8363,1041,8366],{"href":8364,"rel":8365},"https://threejs.org/docs/#api/en/math/Box3.setFromObject",[1047],[516,8367,8368],{},"THREE.Box3.setFromObject",[516,8370,7758],{}," must not contain the ",[516,8373,7769],{}," and vice-versa.",[7702,8376],{},"default:",[7702,8379],{},[516,8381,8382],{},"new Box3(new Vector3(-0.5, -0.5, -0.5), new Vector3(0.5, 0.5, 0.5))",[836,8384,8385,8389],{},[854,8386,8387],{"align":900},[1603,8388,1038],{},[854,8390,8391,8399,8401,8377,8403,8405],{"align":900},[1043,8392,1041,8394,8396,8397],{"href":1045,"rel":8393},[1047],[516,8395,1038],{}," argument in ",[516,8398,8368],{},[7702,8400],{},[7702,8402],{},[7702,8404],{},[516,8406,874],{},[1230,8408,8409],{},"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":484,"searchDepth":485,"depth":486,"links":8411},[8412,8413],{"id":523,"depth":486,"text":15},{"id":824,"depth":486,"text":825},"Uniformly scale and position children to fit into a defined space.",{},{"title":57,"description":8414},"tH6jw7YAXoAU7p9igc7yqRqMHzbHPTChNczZPQOqacI",{"id":8419,"title":61,"body":8420,"description":8867,"extension":489,"links":490,"meta":8868,"navigation":492,"path":62,"seo":8869,"stem":63,"__hash__":8870},"docs/2.api/1.abstractions/levioso.md",{"type":477,"value":8421,"toc":8863},[8422,8427,8434,8443,8445,8789,8791,8861],[506,8423,8424],{},[8425,8426],"abstractions-levioso",{},[512,8428,8429],{},[8430,8431],"img",{"alt":8432,"src":8433},"Leviosa","https://media.giphy.com/media/HaCFT5ghY6L1m/giphy.gif",[512,8435,2765,8436,8438,8439,8442],{},[516,8437,7450],{}," package provides a ",[516,8440,8441],{},"\u003CLevioso />"," wrapper that makes its content … float, just like Magic 🪄✨",[521,8444,15],{"id":523},[525,8446,8449],{"className":527,"code":8447,"highlights":8448,"language":532,"meta":484,"style":484},"\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",[607,704,530],[516,8450,8451,8471,8493,8523,8527,8535,8539,8547,8569,8626,8634,8657,8665,8674,8695,8740,8773,8781],{"__ignoreMap":484},[536,8452,8453,8455,8457,8459,8461,8463,8465,8467,8469],{"class":538,"line":485},[536,8454,542],{"class":541},[536,8456,546],{"class":545},[536,8458,550],{"class":549},[536,8460,553],{"class":549},[536,8462,556],{"class":541},[536,8464,559],{"class":541},[536,8466,563],{"class":562},[536,8468,559],{"class":541},[536,8470,568],{"class":541},[536,8472,8473,8475,8477,8479,8481,8483,8486,8488,8490],{"class":538,"line":486},[536,8474,576],{"class":575},[536,8476,579],{"class":541},[536,8478,614],{"class":582},[536,8480,592],{"class":541},[536,8482,595],{"class":575},[536,8484,8485],{"class":541}," \"",[536,8487,623],{"class":562},[536,8489,559],{"class":541},[536,8491,8492],{"class":541},";\n",[536,8494,8496,8498,8500,8503,8505,8507,8509,8511,8513,8515,8517,8519,8521],{"class":8495,"line":607},[538,572],[536,8497,576],{"class":575},[536,8499,579],{"class":541},[536,8501,8502],{"class":582}," Levioso",[536,8504,586],{"class":541},[536,8506,589],{"class":582},[536,8508,586],{"class":541},[536,8510,1299],{"class":582},[536,8512,592],{"class":541},[536,8514,595],{"class":575},[536,8516,8485],{"class":541},[536,8518,601],{"class":562},[536,8520,559],{"class":541},[536,8522,8492],{"class":541},[536,8524,8525],{"class":538,"line":628},[536,8526,641],{"emptyLinePlaceholder":492},[536,8528,8529,8531,8533],{"class":538,"line":638},[536,8530,631],{"class":541},[536,8532,546],{"class":545},[536,8534,568],{"class":541},[536,8536,8537],{"class":538,"line":644},[536,8538,641],{"emptyLinePlaceholder":492},[536,8540,8541,8543,8545],{"class":538,"line":654},[536,8542,542],{"class":541},[536,8544,649],{"class":545},[536,8546,568],{"class":541},[536,8548,8549,8551,8553,8555,8558,8560,8562,8565,8567],{"class":538,"line":677},[536,8550,657],{"class":541},[536,8552,660],{"class":545},[536,8554,712],{"class":541},[536,8556,8557],{"class":549},"clear-color",[536,8559,556],{"class":541},[536,8561,559],{"class":541},[536,8563,8564],{"class":722},"0x82dbc5",[536,8566,559],{"class":541},[536,8568,568],{"class":541},[536,8570,8571,8573,8575,8577,8579,8581,8583,8585,8587,8589,8591,8593,8595,8597,8599,8601,8604,8606,8608,8610,8612,8614,8616,8618,8620,8622,8624],{"class":538,"line":689},[536,8572,680],{"class":541},[536,8574,683],{"class":545},[536,8576,712],{"class":541},[536,8578,1389],{"class":549},[536,8580,556],{"class":541},[536,8582,559],{"class":541},[536,8584,1396],{"class":541},[536,8586,868],{"class":722},[536,8588,1401],{"class":541},[536,8590,868],{"class":722},[536,8592,1401],{"class":541},[536,8594,7590],{"class":722},[536,8596,1411],{"class":541},[536,8598,559],{"class":541},[536,8600,712],{"class":541},[536,8602,8603],{"class":549},"look-at",[536,8605,556],{"class":541},[536,8607,559],{"class":541},[536,8609,1396],{"class":541},[536,8611,868],{"class":722},[536,8613,1401],{"class":541},[536,8615,868],{"class":722},[536,8617,1401],{"class":541},[536,8619,868],{"class":722},[536,8621,1411],{"class":541},[536,8623,559],{"class":541},[536,8625,686],{"class":541},[536,8627,8628,8630,8632],{"class":538,"line":699},[536,8629,680],{"class":541},[536,8631,694],{"class":545},[536,8633,686],{"class":541},[536,8635,8637,8639,8642,8644,8647,8649,8651,8653,8655],{"class":8636,"line":704},[538,572],[536,8638,680],{"class":541},[536,8640,8641],{"class":545},"Levioso",[536,8643,712],{"class":541},[536,8645,8646],{"class":549},"speed",[536,8648,556],{"class":541},[536,8650,559],{"class":541},[536,8652,3798],{"class":722},[536,8654,559],{"class":541},[536,8656,568],{"class":541},[536,8658,8659,8661,8663],{"class":538,"line":730},[536,8660,756],{"class":541},[536,8662,197],{"class":545},[536,8664,686],{"class":541},[536,8666,8668,8670,8672],{"class":8667,"line":530},[538,572],[536,8669,798],{"class":541},[536,8671,8641],{"class":545},[536,8673,568],{"class":541},[536,8675,8676,8678,8681,8683,8685,8687,8689,8691,8693],{"class":538,"line":753},[536,8677,680],{"class":541},[536,8679,8680],{"class":545},"TresAmbientLight",[536,8682,712],{"class":541},[536,8684,1816],{"class":549},[536,8686,556],{"class":541},[536,8688,559],{"class":541},[536,8690,1823],{"class":722},[536,8692,559],{"class":541},[536,8694,686],{"class":541},[536,8696,8697,8699,8702,8704,8706,8708,8710,8712,8714,8716,8718,8720,8722,8724,8726,8728,8730,8732,8734,8736,8738],{"class":538,"line":764},[536,8698,680],{"class":541},[536,8700,8701],{"class":545},"TresDirectionalLight",[536,8703,712],{"class":541},[536,8705,1816],{"class":549},[536,8707,556],{"class":541},[536,8709,559],{"class":541},[536,8711,1823],{"class":722},[536,8713,559],{"class":541},[536,8715,712],{"class":541},[536,8717,1389],{"class":549},[536,8719,556],{"class":541},[536,8721,559],{"class":541},[536,8723,1396],{"class":541},[536,8725,723],{"class":722},[536,8727,1401],{"class":541},[536,8729,723],{"class":722},[536,8731,1401],{"class":541},[536,8733,723],{"class":722},[536,8735,1411],{"class":541},[536,8737,559],{"class":541},[536,8739,686],{"class":541},[536,8741,8742,8744,8746,8748,8750,8752,8754,8756,8758,8761,8763,8765,8767,8769,8771],{"class":538,"line":775},[536,8743,680],{"class":541},[536,8745,8235],{"class":545},[536,8747,712],{"class":541},[536,8749,1389],{"class":549},[536,8751,556],{"class":541},[536,8753,559],{"class":541},[536,8755,1396],{"class":541},[536,8757,868],{"class":722},[536,8759,8760],{"class":541},", -",[536,8762,1823],{"class":722},[536,8764,1401],{"class":541},[536,8766,868],{"class":722},[536,8768,1411],{"class":541},[536,8770,559],{"class":541},[536,8772,686],{"class":541},[536,8774,8775,8777,8779],{"class":538,"line":785},[536,8776,808],{"class":541},[536,8778,660],{"class":545},[536,8780,568],{"class":541},[536,8782,8783,8785,8787],{"class":538,"line":531},[536,8784,631],{"class":541},[536,8786,649],{"class":545},[536,8788,568],{"class":541},[521,8790,825],{"id":824},[830,8792,8793,8803],{},[833,8794,8795],{},[836,8796,8797,8799,8801],{},[839,8798,841],{"align":900},[839,8800,844],{"align":900},[839,8802,847],{},[849,8804,8805,8818,8832,8846],{},[836,8806,8807,8811,8814],{},[854,8808,8809],{"align":900},[516,8810,8646],{},[854,8812,8813],{"align":900},"Floating speed, higher it rocks more 🤘.",[854,8815,8816],{},[516,8817,1823],{},[836,8819,8820,8825,8828],{},[854,8821,8822],{"align":900},[516,8823,8824],{},"rotationFactor",[854,8826,8827],{"align":900},"Factor for Euler rotation.",[854,8829,8830],{},[516,8831,1823],{},[836,8833,8834,8839,8842],{},[854,8835,8836],{"align":900},[516,8837,8838],{},"floatFactor",[854,8840,8841],{"align":900},"Factor for Up/down movement.",[854,8843,8844],{},[516,8845,1823],{},[836,8847,8848,8853,8856],{},[854,8849,8850],{"align":900},[516,8851,8852],{},"range",[854,8854,8855],{"align":900},"Range of y-axis values the object will float within.",[854,8857,8858],{},[516,8859,8860],{},"[-0.1, 0.1]",[1230,8862,1578],{},{"title":484,"searchDepth":485,"depth":486,"links":8864},[8865,8866],{"id":523,"depth":486,"text":15},{"id":824,"depth":486,"text":825},"Make content float like magic with smooth animations.",{},{"title":61,"description":8867},"VAdlRyCWTgbZPtL3_7gw5lCESxOAP-g-m4p4X69NI_4",{"id":8872,"title":65,"body":8873,"description":9558,"extension":489,"links":490,"meta":9559,"navigation":492,"path":66,"seo":9560,"stem":67,"__hash__":9561},"docs/2.api/1.abstractions/mask.md",{"type":477,"value":8874,"toc":9553},[8875,8880,8886,8919,8921,9427,9429,9491,9494,9501,9506,9521,9550],[506,8876,8877],{},[8878,8879],"abstractions-mask",{},[512,8881,8882,8885],{},[516,8883,8884],{},"\u003CMask/>"," uses the stencil buffer to cut out areas of the screen.",[3190,8887,8888,8906],{},[512,8889,8890,8891,8894,8895,8898,8899,8902,8903,1049],{},"To use ",[516,8892,8893],{},"\u003CMask />"," you ",[1607,8896,8897],{},"must"," add ",[516,8900,8901],{},":stencil=\"true\""," to your ",[516,8904,8905],{},"\u003CTresCanvas />",[512,8907,8908,8910,8911,8918],{},[516,8909,8893],{}," relies on the ",[1043,8912,8915],{"href":8913,"rel":8914},"https://threejs.org/docs/#api/en/renderers/WebGLRenderer",[1047],[516,8916,8917],{},"stencil buffer",". In recent versions of THREE.js, by default, the stencil buffer is not created.",[521,8920,15],{"id":523},[525,8922,8925],{"className":527,"code":8923,"highlights":8924,"language":532,"meta":484,"style":484},"\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",[486,775,785,531,805],[516,8926,8927,8947,8976,8994,9002,9006,9014,9046,9054,9062,9066,9087,9095,9130,9148,9156,9178,9188,9208,9217,9225,9229,9253,9261,9287,9295,9299,9321,9329,9353,9361,9365,9387,9395,9403,9411,9419],{"__ignoreMap":484},[536,8928,8929,8931,8933,8935,8937,8939,8941,8943,8945],{"class":538,"line":485},[536,8930,542],{"class":541},[536,8932,546],{"class":545},[536,8934,550],{"class":549},[536,8936,553],{"class":549},[536,8938,556],{"class":541},[536,8940,559],{"class":541},[536,8942,563],{"class":562},[536,8944,559],{"class":541},[536,8946,568],{"class":541},[536,8948,8950,8952,8954,8957,8959,8961,8963,8966,8968,8970,8972,8974],{"class":8949,"line":486},[538,572],[536,8951,576],{"class":575},[536,8953,579],{"class":541},[536,8955,8956],{"class":582}," Mask",[536,8958,586],{"class":541},[536,8960,589],{"class":582},[536,8962,586],{"class":541},[536,8964,8965],{"class":582}," useMask",[536,8967,592],{"class":541},[536,8969,595],{"class":575},[536,8971,598],{"class":541},[536,8973,601],{"class":562},[536,8975,604],{"class":541},[536,8977,8978,8980,8982,8984,8986,8988,8990,8992],{"class":538,"line":607},[536,8979,576],{"class":575},[536,8981,579],{"class":541},[536,8983,614],{"class":582},[536,8985,592],{"class":541},[536,8987,595],{"class":575},[536,8989,598],{"class":541},[536,8991,623],{"class":562},[536,8993,604],{"class":541},[536,8995,8996,8998,9000],{"class":538,"line":628},[536,8997,631],{"class":541},[536,8999,546],{"class":545},[536,9001,568],{"class":541},[536,9003,9004],{"class":538,"line":638},[536,9005,641],{"emptyLinePlaceholder":492},[536,9007,9008,9010,9012],{"class":538,"line":644},[536,9009,542],{"class":541},[536,9011,649],{"class":545},[536,9013,568],{"class":541},[536,9015,9016,9018,9020,9022,9025,9027,9029,9031,9033,9035,9037,9039,9042,9044],{"class":538,"line":654},[536,9017,657],{"class":541},[536,9019,660],{"class":545},[536,9021,712],{"class":541},[536,9023,9024],{"class":549},"stencil",[536,9026,556],{"class":541},[536,9028,559],{"class":541},[536,9030,864],{"class":4458},[536,9032,559],{"class":541},[536,9034,663],{"class":549},[536,9036,556],{"class":541},[536,9038,559],{"class":541},[536,9040,9041],{"class":562},"#4f4f4f",[536,9043,559],{"class":541},[536,9045,568],{"class":541},[536,9047,9048,9050,9052],{"class":538,"line":677},[536,9049,680],{"class":541},[536,9051,683],{"class":545},[536,9053,686],{"class":541},[536,9055,9056,9058,9060],{"class":538,"line":689},[536,9057,680],{"class":541},[536,9059,694],{"class":545},[536,9061,686],{"class":541},[536,9063,9064],{"class":538,"line":699},[536,9065,641],{"emptyLinePlaceholder":492},[536,9067,9068,9070,9073,9075,9077,9079,9081,9083,9085],{"class":538,"line":704},[536,9069,680],{"class":541},[536,9071,9072],{"class":545},"TresGroup",[536,9074,712],{"class":541},[536,9076,715],{"class":549},[536,9078,556],{"class":541},[536,9080,559],{"class":541},[536,9082,723],{"class":722},[536,9084,559],{"class":541},[536,9086,568],{"class":541},[536,9088,9089,9091,9093],{"class":538,"line":730},[536,9090,756],{"class":541},[536,9092,759],{"class":545},[536,9094,568],{"class":541},[536,9096,9097,9099,9102,9104,9106,9108,9110,9112,9115,9117,9119,9121,9124,9126,9128],{"class":538,"line":530},[536,9098,767],{"class":541},[536,9100,9101],{"class":545},"TresRingGeometry",[536,9103,712],{"class":541},[536,9105,1919],{"class":549},[536,9107,556],{"class":541},[536,9109,559],{"class":541},[536,9111,1396],{"class":541},[536,9113,9114],{"class":722},"0.95",[536,9116,1401],{"class":541},[536,9118,1823],{"class":722},[536,9120,1401],{"class":541},[536,9122,9123],{"class":722},"64",[536,9125,1411],{"class":541},[536,9127,559],{"class":541},[536,9129,686],{"class":541},[536,9131,9132,9134,9136,9138,9140,9142,9144,9146],{"class":538,"line":753},[536,9133,767],{"class":541},[536,9135,7619],{"class":545},[536,9137,2671],{"class":549},[536,9139,556],{"class":541},[536,9141,559],{"class":541},[536,9143,2678],{"class":562},[536,9145,559],{"class":541},[536,9147,686],{"class":541},[536,9149,9150,9152,9154],{"class":538,"line":764},[536,9151,788],{"class":541},[536,9153,759],{"class":545},[536,9155,568],{"class":541},[536,9157,9159,9161,9163,9165,9168,9170,9172,9174,9176],{"class":9158,"line":775},[538,572],[536,9160,756],{"class":541},[536,9162,65],{"class":545},[536,9164,712],{"class":541},[536,9166,9167],{"class":549},"id",[536,9169,556],{"class":541},[536,9171,559],{"class":541},[536,9173,1823],{"class":722},[536,9175,559],{"class":541},[536,9177,568],{"class":541},[536,9179,9181,9183,9186],{"class":9180,"line":785},[538,572],[536,9182,767],{"class":541},[536,9184,9185],{"class":545},"TresCircleGeometry",[536,9187,686],{"class":541},[536,9189,9191,9193,9195,9197,9199,9201,9204,9206],{"class":9190,"line":531},[538,572],[536,9192,767],{"class":541},[536,9194,7619],{"class":545},[536,9196,2671],{"class":549},[536,9198,556],{"class":541},[536,9200,559],{"class":541},[536,9202,9203],{"class":562},"#fbb03b",[536,9205,559],{"class":541},[536,9207,686],{"class":541},[536,9209,9211,9213,9215],{"class":9210,"line":805},[538,572],[536,9212,788],{"class":541},[536,9214,65],{"class":545},[536,9216,568],{"class":541},[536,9218,9219,9221,9223],{"class":538,"line":815},[536,9220,798],{"class":541},[536,9222,9072],{"class":545},[536,9224,568],{"class":541},[536,9226,9227],{"class":538,"line":2593},[536,9228,641],{"emptyLinePlaceholder":492},[536,9230,9231,9233,9235,9237,9240,9242,9244,9247,9249,9251],{"class":538,"line":2602},[536,9232,680],{"class":541},[536,9234,759],{"class":545},[536,9236,712],{"class":541},[536,9238,9239],{"class":549},"position-z",[536,9241,556],{"class":541},[536,9243,559],{"class":541},[536,9245,9246],{"class":541},"-",[536,9248,1823],{"class":722},[536,9250,559],{"class":541},[536,9252,568],{"class":541},[536,9254,9255,9257,9259],{"class":538,"line":2636},[536,9256,756],{"class":541},[536,9258,770],{"class":545},[536,9260,686],{"class":541},[536,9262,9263,9265,9267,9270,9272,9274,9277,9279,9281,9283,9285],{"class":538,"line":2645},[536,9264,756],{"class":541},[536,9266,780],{"class":545},[536,9268,9269],{"class":549}," v-bind",[536,9271,556],{"class":541},[536,9273,559],{"class":541},[536,9275,9276],{"class":2404},"useMask",[536,9278,2407],{"class":541},[536,9280,1823],{"class":722},[536,9282,3331],{"class":541},[536,9284,559],{"class":541},[536,9286,686],{"class":541},[536,9288,9289,9291,9293],{"class":538,"line":2654},[536,9290,798],{"class":541},[536,9292,759],{"class":545},[536,9294,568],{"class":541},[536,9296,9297],{"class":538,"line":2663},[536,9298,641],{"emptyLinePlaceholder":492},[536,9300,9301,9303,9305,9307,9309,9311,9313,9315,9317,9319],{"class":538,"line":2685},[536,9302,680],{"class":541},[536,9304,759],{"class":545},[536,9306,712],{"class":541},[536,9308,9239],{"class":549},[536,9310,556],{"class":541},[536,9312,559],{"class":541},[536,9314,9246],{"class":541},[536,9316,2627],{"class":722},[536,9318,559],{"class":541},[536,9320,568],{"class":541},[536,9322,9323,9325,9327],{"class":538,"line":2736},[536,9324,756],{"class":541},[536,9326,770],{"class":545},[536,9328,686],{"class":541},[536,9330,9331,9333,9335,9337,9339,9341,9343,9345,9347,9349,9351],{"class":538,"line":2745},[536,9332,756],{"class":541},[536,9334,780],{"class":545},[536,9336,9269],{"class":549},[536,9338,556],{"class":541},[536,9340,559],{"class":541},[536,9342,9276],{"class":2404},[536,9344,2407],{"class":541},[536,9346,1823],{"class":722},[536,9348,3331],{"class":541},[536,9350,559],{"class":541},[536,9352,686],{"class":541},[536,9354,9355,9357,9359],{"class":538,"line":2754},[536,9356,798],{"class":541},[536,9358,759],{"class":545},[536,9360,568],{"class":541},[536,9362,9363],{"class":538,"line":3956},[536,9364,641],{"emptyLinePlaceholder":492},[536,9366,9367,9369,9371,9373,9375,9377,9379,9381,9383,9385],{"class":538,"line":4000},[536,9368,680],{"class":541},[536,9370,759],{"class":545},[536,9372,712],{"class":541},[536,9374,9239],{"class":549},[536,9376,556],{"class":541},[536,9378,559],{"class":541},[536,9380,9246],{"class":541},[536,9382,7590],{"class":722},[536,9384,559],{"class":541},[536,9386,568],{"class":541},[536,9388,9389,9391,9393],{"class":538,"line":4027},[536,9390,756],{"class":541},[536,9392,770],{"class":545},[536,9394,686],{"class":541},[536,9396,9397,9399,9401],{"class":538,"line":4046},[536,9398,756],{"class":541},[536,9400,780],{"class":545},[536,9402,686],{"class":541},[536,9404,9405,9407,9409],{"class":538,"line":4087},[536,9406,798],{"class":541},[536,9408,759],{"class":545},[536,9410,568],{"class":541},[536,9412,9413,9415,9417],{"class":538,"line":4096},[536,9414,808],{"class":541},[536,9416,660],{"class":545},[536,9418,568],{"class":541},[536,9420,9421,9423,9425],{"class":538,"line":4105},[536,9422,631],{"class":541},[536,9424,649],{"class":545},[536,9426,568],{"class":541},[521,9428,825],{"id":824},[830,9430,9431,9441],{},[833,9432,9433],{},[836,9434,9435,9437,9439],{},[839,9436,841],{"align":900},[839,9438,844],{"align":900},[839,9440,847],{},[849,9442,9443,9459,9475],{},[836,9444,9445,9451,9457],{},[854,9446,9447],{"align":900},[1603,9448,9449],{},[516,9450,9167],{},[854,9452,9453,9454,9456],{"align":900},"Id of the stencil buffer to use. Each mask must have a ",[516,9455,5487],{}," id. Multiple masks can refer to the same id.",[854,9458],{},[836,9460,9461,9468,9471],{},[854,9462,9463],{"align":900},[1603,9464,9465],{},[516,9466,9467],{},"colorWrite",[854,9469,9470],{"align":900},"Whether the colors of the mask's own material will leak through.",[854,9472,9473],{},[516,9474,874],{},[836,9476,9477,9484,9487],{},[854,9478,9479],{"align":900},[1603,9480,9481],{},[516,9482,9483],{},"depthWrite",[854,9485,9486],{"align":900},"Whether the depth of the mask's own material will leak through.",[854,9488,9489],{},[516,9490,874],{},[521,9492,9276],{"id":9493},"usemask",[512,9495,9496,9497,9500],{},"Composable that returns the stencil configuration to apply a mask to a material. Use it with ",[516,9498,9499],{},"v-bind"," on materials that should be affected by the mask.",[512,9502,9503],{},[1603,9504,9505],{},"Parameters:",[2183,9507,9508,9513],{},[2186,9509,9510,9512],{},[516,9511,9167],{}," - The mask id to use (number or Ref)",[2186,9514,9515,9518,9519],{},[516,9516,9517],{},"inverse"," - Whether to invert the mask (boolean or Ref), defaults to ",[516,9520,874],{},[525,9522,9524],{"className":527,"code":9523,"language":532,"meta":484,"style":484},"\u003CTresMeshNormalMaterial v-bind=\"useMask(1)\" />\n",[516,9525,9526],{"__ignoreMap":484},[536,9527,9528,9530,9532,9534,9536,9538,9540,9542,9544,9546,9548],{"class":538,"line":485},[536,9529,542],{"class":541},[536,9531,780],{"class":545},[536,9533,9269],{"class":549},[536,9535,556],{"class":541},[536,9537,559],{"class":541},[536,9539,9276],{"class":2404},[536,9541,2407],{"class":582},[536,9543,1823],{"class":722},[536,9545,3331],{"class":582},[536,9547,559],{"class":541},[536,9549,686],{"class":541},[1230,9551,9552],{},"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":484,"searchDepth":485,"depth":486,"links":9554},[9555,9556,9557],{"id":523,"depth":486,"text":15},{"id":824,"depth":486,"text":825},{"id":9493,"depth":486,"text":9276},"Cut out areas of the screen using the stencil buffer.",{},{"title":65,"description":9558},"G7X7KSfvm9ZBJpENVvMjF0UaBORYjhBMGhf9hH7E7tw",{"id":9563,"title":69,"body":9564,"description":10065,"extension":489,"links":490,"meta":10066,"navigation":492,"path":70,"seo":10067,"stem":71,"__hash__":10068},"docs/2.api/1.abstractions/outline.md",{"type":477,"value":9565,"toc":10061},[9566,9571,9582,9584,9962,9964,10059],[506,9567,9568],{},[9569,9570],"abstractions-outline",{},[512,9572,9573,9576,9577,3054,9579,1049],{},[516,9574,9575],{},"\u003COutline />"," creates an inverted-hull outline using its parent's geometry. Supported parents are ",[516,9578,2280],{},[516,9580,9581],{},"\u003CTresSkinnedMesh>",[521,9583,15],{"id":523},[525,9585,9588],{"className":527,"code":9586,"highlights":9587,"language":532,"meta":484,"style":484},"\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",[607,764,815],[516,9589,9590,9610,9628,9652,9660,9664,9672,9690,9698,9706,9727,9773,9796,9804,9813,9847,9855,9875,9899,9907,9938,9946,9954],{"__ignoreMap":484},[536,9591,9592,9594,9596,9598,9600,9602,9604,9606,9608],{"class":538,"line":485},[536,9593,542],{"class":541},[536,9595,546],{"class":545},[536,9597,550],{"class":549},[536,9599,553],{"class":549},[536,9601,556],{"class":541},[536,9603,559],{"class":541},[536,9605,563],{"class":562},[536,9607,559],{"class":541},[536,9609,568],{"class":541},[536,9611,9612,9614,9616,9618,9620,9622,9624,9626],{"class":538,"line":486},[536,9613,576],{"class":575},[536,9615,579],{"class":541},[536,9617,614],{"class":582},[536,9619,592],{"class":541},[536,9621,595],{"class":575},[536,9623,598],{"class":541},[536,9625,623],{"class":562},[536,9627,604],{"class":541},[536,9629,9631,9633,9635,9637,9639,9642,9644,9646,9648,9650],{"class":9630,"line":607},[538,572],[536,9632,576],{"class":575},[536,9634,579],{"class":541},[536,9636,589],{"class":582},[536,9638,586],{"class":541},[536,9640,9641],{"class":582}," Outline",[536,9643,592],{"class":541},[536,9645,595],{"class":575},[536,9647,598],{"class":541},[536,9649,601],{"class":562},[536,9651,604],{"class":541},[536,9653,9654,9656,9658],{"class":538,"line":628},[536,9655,631],{"class":541},[536,9657,546],{"class":545},[536,9659,568],{"class":541},[536,9661,9662],{"class":538,"line":638},[536,9663,641],{"emptyLinePlaceholder":492},[536,9665,9666,9668,9670],{"class":538,"line":644},[536,9667,542],{"class":541},[536,9669,649],{"class":545},[536,9671,568],{"class":541},[536,9673,9674,9676,9678,9680,9682,9684,9686,9688],{"class":538,"line":654},[536,9675,657],{"class":541},[536,9677,660],{"class":545},[536,9679,663],{"class":549},[536,9681,556],{"class":541},[536,9683,559],{"class":541},[536,9685,9041],{"class":562},[536,9687,559],{"class":541},[536,9689,568],{"class":541},[536,9691,9692,9694,9696],{"class":538,"line":677},[536,9693,680],{"class":541},[536,9695,683],{"class":545},[536,9697,686],{"class":541},[536,9699,9700,9702,9704],{"class":538,"line":689},[536,9701,680],{"class":541},[536,9703,694],{"class":545},[536,9705,686],{"class":541},[536,9707,9708,9710,9712,9714,9716,9718,9720,9723,9725],{"class":538,"line":699},[536,9709,680],{"class":541},[536,9711,8680],{"class":545},[536,9713,712],{"class":541},[536,9715,1816],{"class":549},[536,9717,556],{"class":541},[536,9719,559],{"class":541},[536,9721,9722],{"class":722},"3.14",[536,9724,559],{"class":541},[536,9726,686],{"class":541},[536,9728,9729,9731,9734,9736,9738,9740,9742,9745,9747,9749,9751,9753,9755,9757,9759,9761,9763,9765,9767,9769,9771],{"class":538,"line":704},[536,9730,680],{"class":541},[536,9732,9733],{"class":545},"TresPointLight",[536,9735,712],{"class":541},[536,9737,1816],{"class":549},[536,9739,556],{"class":541},[536,9741,559],{"class":541},[536,9743,9744],{"class":722},"50",[536,9746,559],{"class":541},[536,9748,712],{"class":541},[536,9750,1389],{"class":549},[536,9752,556],{"class":541},[536,9754,559],{"class":541},[536,9756,1396],{"class":541},[536,9758,723],{"class":722},[536,9760,1401],{"class":541},[536,9762,723],{"class":722},[536,9764,1401],{"class":541},[536,9766,868],{"class":722},[536,9768,1411],{"class":541},[536,9770,559],{"class":541},[536,9772,686],{"class":541},[536,9774,9775,9777,9779,9781,9784,9786,9788,9790,9792,9794],{"class":538,"line":730},[536,9776,680],{"class":541},[536,9778,759],{"class":545},[536,9780,712],{"class":541},[536,9782,9783],{"class":549},"position-x",[536,9785,556],{"class":541},[536,9787,559],{"class":541},[536,9789,9246],{"class":541},[536,9791,2519],{"class":722},[536,9793,559],{"class":541},[536,9795,568],{"class":541},[536,9797,9798,9800,9802],{"class":538,"line":530},[536,9799,756],{"class":541},[536,9801,770],{"class":545},[536,9803,686],{"class":541},[536,9805,9806,9808,9811],{"class":538,"line":753},[536,9807,756],{"class":541},[536,9809,9810],{"class":545},"TresMeshPhongMaterial",[536,9812,686],{"class":541},[536,9814,9816,9818,9820,9822,9825,9827,9829,9832,9834,9836,9838,9840,9843,9845],{"class":9815,"line":764},[538,572],[536,9817,756],{"class":541},[536,9819,69],{"class":545},[536,9821,712],{"class":541},[536,9823,9824],{"class":549},"thickness",[536,9826,556],{"class":541},[536,9828,559],{"class":541},[536,9830,9831],{"class":722},"7.5",[536,9833,559],{"class":541},[536,9835,2671],{"class":549},[536,9837,556],{"class":541},[536,9839,559],{"class":541},[536,9841,9842],{"class":562},"#82dbc5",[536,9844,559],{"class":541},[536,9846,686],{"class":541},[536,9848,9849,9851,9853],{"class":538,"line":775},[536,9850,798],{"class":541},[536,9852,759],{"class":545},[536,9854,568],{"class":541},[536,9856,9857,9859,9861,9863,9865,9867,9869,9871,9873],{"class":538,"line":785},[536,9858,680],{"class":541},[536,9860,759],{"class":545},[536,9862,712],{"class":541},[536,9864,9783],{"class":549},[536,9866,556],{"class":541},[536,9868,559],{"class":541},[536,9870,2519],{"class":722},[536,9872,559],{"class":541},[536,9874,568],{"class":541},[536,9876,9877,9879,9881,9883,9885,9887,9889,9891,9893,9895,9897],{"class":538,"line":531},[536,9878,756],{"class":541},[536,9880,4005],{"class":545},[536,9882,712],{"class":541},[536,9884,1919],{"class":549},[536,9886,556],{"class":541},[536,9888,559],{"class":541},[536,9890,1396],{"class":541},[536,9892,1443],{"class":722},[536,9894,1411],{"class":541},[536,9896,559],{"class":541},[536,9898,686],{"class":541},[536,9900,9901,9903,9905],{"class":538,"line":805},[536,9902,756],{"class":541},[536,9904,9810],{"class":545},[536,9906,686],{"class":541},[536,9908,9910,9912,9914,9916,9918,9920,9922,9924,9926,9928,9930,9932,9934,9936],{"class":9909,"line":815},[538,572],[536,9911,756],{"class":541},[536,9913,69],{"class":545},[536,9915,712],{"class":541},[536,9917,9824],{"class":549},[536,9919,556],{"class":541},[536,9921,559],{"class":541},[536,9923,9831],{"class":722},[536,9925,559],{"class":541},[536,9927,2671],{"class":549},[536,9929,556],{"class":541},[536,9931,559],{"class":541},[536,9933,9203],{"class":562},[536,9935,559],{"class":541},[536,9937,686],{"class":541},[536,9939,9940,9942,9944],{"class":538,"line":2593},[536,9941,798],{"class":541},[536,9943,759],{"class":545},[536,9945,568],{"class":541},[536,9947,9948,9950,9952],{"class":538,"line":2602},[536,9949,808],{"class":541},[536,9951,660],{"class":545},[536,9953,568],{"class":541},[536,9955,9956,9958,9960],{"class":538,"line":2636},[536,9957,631],{"class":541},[536,9959,649],{"class":545},[536,9961,568],{"class":541},[521,9963,825],{"id":824},[830,9965,9966,9976],{},[833,9967,9968],{},[836,9969,9970,9972,9974],{},[839,9971,825],{},[839,9973,844],{},[839,9975,847],{},[849,9977,9978,9990,10002,10014,10026,10038],{},[836,9979,9980,9982,9985],{},[854,9981,7694],{},[854,9983,9984],{},"Outline color",[854,9986,9987],{},[516,9988,9989],{},"'black'",[836,9991,9992,9995,9998],{},[854,9993,9994],{},"screenspace",[854,9996,9997],{},"Whether line thickness is independent of zoom",[854,9999,10000],{},[516,10001,874],{},[836,10003,10004,10007,10010],{},[854,10005,10006],{},"opacity",[854,10008,10009],{},"Outline opacity",[854,10011,10012],{},[516,10013,1823],{},[836,10015,10016,10019,10022],{},[854,10017,10018],{},"transparent",[854,10020,10021],{},"Outline transparency",[854,10023,10024],{},[516,10025,874],{},[836,10027,10028,10030,10033],{},[854,10029,9824],{},[854,10031,10032],{},"Outline thickness",[854,10034,10035],{},[516,10036,10037],{},"0.05",[836,10039,10040,10043,10054],{},[854,10041,10042],{},"angle",[854,10044,10045,10046,10048,10049],{},"Geometry crease angle (",[516,10047,868],{}," is no crease).  See ",[1043,10050,10053],{"href":10051,"rel":10052},"https://threejs.org/docs/#examples/en/utils/BufferGeometryUtils.toCreasedNormals",[1047],"BufferGeometryUtils.toCreasedNormals",[854,10055,10056],{},[516,10057,10058],{},"Math.PI",[1230,10060,1578],{},{"title":484,"searchDepth":485,"depth":486,"links":10062},[10063,10064],{"id":523,"depth":486,"text":15},{"id":824,"depth":486,"text":825},"Create inverted-hull outlines using parent geometry.",{},{"title":69,"description":10065},"L_LPQP787liM6IASr51UnMfLs2CRosI1PG5BXlr7m_Q",{"id":10070,"title":73,"body":10071,"description":10955,"extension":489,"links":490,"meta":10956,"navigation":492,"path":74,"seo":10957,"stem":75,"__hash__":10958},"docs/2.api/1.abstractions/sampler.md",{"type":477,"value":10072,"toc":10950},[10073,10078,10081,10083,10421,10423,10487,10491,10498,10947],[506,10074,10075],{},[10076,10077],"abstractions-sampler",{},[512,10079,10080],{},"Declarative abstraction around MeshSurfaceSampler & InstancedMesh. It samples points from the passed mesh and transforms an InstancedMesh's matrix to distribute instances on the points.",[521,10082,15],{"id":523},[525,10084,10087],{"className":527,"code":10085,"highlights":10086,"language":532,"meta":484,"style":484},"\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",[486,704,730,530,753,764,775,785,531,805,815],[516,10088,10089,10109,10133,10151,10159,10163,10171,10190,10222,10230,10234,10256,10265,10275,10284,10289,10317,10350,10359,10368,10377,10405,10413],{"__ignoreMap":484},[536,10090,10091,10093,10095,10097,10099,10101,10103,10105,10107],{"class":538,"line":485},[536,10092,542],{"class":541},[536,10094,546],{"class":545},[536,10096,550],{"class":549},[536,10098,553],{"class":549},[536,10100,556],{"class":541},[536,10102,559],{"class":541},[536,10104,563],{"class":562},[536,10106,559],{"class":541},[536,10108,568],{"class":541},[536,10110,10112,10114,10116,10118,10120,10123,10125,10127,10129,10131],{"class":10111,"line":486},[538,572],[536,10113,576],{"class":575},[536,10115,579],{"class":541},[536,10117,589],{"class":582},[536,10119,586],{"class":541},[536,10121,10122],{"class":582}," Sampler",[536,10124,592],{"class":541},[536,10126,595],{"class":575},[536,10128,598],{"class":541},[536,10130,601],{"class":562},[536,10132,604],{"class":541},[536,10134,10135,10137,10139,10141,10143,10145,10147,10149],{"class":538,"line":607},[536,10136,576],{"class":575},[536,10138,579],{"class":541},[536,10140,614],{"class":582},[536,10142,592],{"class":541},[536,10144,595],{"class":575},[536,10146,598],{"class":541},[536,10148,623],{"class":562},[536,10150,604],{"class":541},[536,10152,10153,10155,10157],{"class":538,"line":628},[536,10154,631],{"class":541},[536,10156,546],{"class":545},[536,10158,568],{"class":541},[536,10160,10161],{"class":538,"line":638},[536,10162,641],{"emptyLinePlaceholder":492},[536,10164,10165,10167,10169],{"class":538,"line":644},[536,10166,542],{"class":541},[536,10168,649],{"class":545},[536,10170,568],{"class":541},[536,10172,10173,10175,10177,10179,10181,10183,10186,10188],{"class":538,"line":654},[536,10174,657],{"class":541},[536,10176,660],{"class":545},[536,10178,663],{"class":549},[536,10180,556],{"class":541},[536,10182,559],{"class":541},[536,10184,10185],{"class":562},"#82DBC5",[536,10187,559],{"class":541},[536,10189,568],{"class":541},[536,10191,10192,10194,10196,10198,10200,10202,10204,10206,10208,10210,10212,10214,10216,10218,10220],{"class":538,"line":677},[536,10193,680],{"class":541},[536,10195,683],{"class":545},[536,10197,712],{"class":541},[536,10199,1389],{"class":549},[536,10201,556],{"class":541},[536,10203,559],{"class":541},[536,10205,1396],{"class":541},[536,10207,868],{"class":722},[536,10209,1401],{"class":541},[536,10211,1443],{"class":722},[536,10213,1401],{"class":541},[536,10215,7590],{"class":722},[536,10217,1411],{"class":541},[536,10219,559],{"class":541},[536,10221,686],{"class":541},[536,10223,10224,10226,10228],{"class":538,"line":689},[536,10225,680],{"class":541},[536,10227,694],{"class":545},[536,10229,686],{"class":541},[536,10231,10232],{"class":538,"line":699},[536,10233,641],{"emptyLinePlaceholder":492},[536,10235,10237,10239,10241,10243,10246,10248,10250,10252,10254],{"class":10236,"line":704},[538,572],[536,10238,680],{"class":541},[536,10240,73],{"class":545},[536,10242,712],{"class":541},[536,10244,10245],{"class":549},"count",[536,10247,556],{"class":541},[536,10249,559],{"class":541},[536,10251,9744],{"class":722},[536,10253,559],{"class":541},[536,10255,568],{"class":541},[536,10257,10259,10261,10263],{"class":10258,"line":730},[538,572],[536,10260,756],{"class":541},[536,10262,759],{"class":545},[536,10264,568],{"class":541},[536,10266,10268,10270,10273],{"class":10267,"line":530},[538,572],[536,10269,767],{"class":541},[536,10271,10272],{"class":545},"TresTorusGeometry",[536,10274,686],{"class":541},[536,10276,10278,10280,10282],{"class":10277,"line":753},[538,572],[536,10279,788],{"class":541},[536,10281,759],{"class":545},[536,10283,568],{"class":541},[536,10285,10287],{"class":10286,"line":764},[538,572],[536,10288,641],{"emptyLinePlaceholder":492},[536,10290,10292,10294,10297,10299,10301,10303,10305,10308,10311,10313,10315],{"class":10291,"line":775},[538,572],[536,10293,756],{"class":541},[536,10295,10296],{"class":545},"TresInstancedMesh",[536,10298,712],{"class":541},[536,10300,1919],{"class":549},[536,10302,556],{"class":541},[536,10304,559],{"class":541},[536,10306,10307],{"class":541},"[null!, null!, ",[536,10309,10310],{"class":722},"1000",[536,10312,1411],{"class":541},[536,10314,559],{"class":541},[536,10316,568],{"class":541},[536,10318,10320,10322,10324,10326,10328,10330,10332,10334,10336,10338,10340,10342,10344,10346,10348],{"class":10319,"line":785},[538,572],[536,10321,767],{"class":541},[536,10323,770],{"class":545},[536,10325,712],{"class":541},[536,10327,1919],{"class":549},[536,10329,556],{"class":541},[536,10331,559],{"class":541},[536,10333,1396],{"class":541},[536,10335,2133],{"class":722},[536,10337,1401],{"class":541},[536,10339,2133],{"class":722},[536,10341,1401],{"class":541},[536,10343,2133],{"class":722},[536,10345,1411],{"class":541},[536,10347,559],{"class":541},[536,10349,686],{"class":541},[536,10351,10353,10355,10357],{"class":10352,"line":531},[538,572],[536,10354,767],{"class":541},[536,10356,780],{"class":545},[536,10358,686],{"class":541},[536,10360,10362,10364,10366],{"class":10361,"line":805},[538,572],[536,10363,788],{"class":541},[536,10365,10296],{"class":545},[536,10367,568],{"class":541},[536,10369,10371,10373,10375],{"class":10370,"line":815},[538,572],[536,10372,798],{"class":541},[536,10374,73],{"class":545},[536,10376,568],{"class":541},[536,10378,10379,10381,10383,10385,10387,10389,10391,10393,10395,10397,10399,10401,10403],{"class":538,"line":2593},[536,10380,680],{"class":541},[536,10382,8235],{"class":545},[536,10384,712],{"class":541},[536,10386,1919],{"class":549},[536,10388,556],{"class":541},[536,10390,559],{"class":541},[536,10392,1396],{"class":541},[536,10394,1408],{"class":722},[536,10396,1401],{"class":541},[536,10398,1408],{"class":722},[536,10400,1411],{"class":541},[536,10402,559],{"class":541},[536,10404,686],{"class":541},[536,10406,10407,10409,10411],{"class":538,"line":2602},[536,10408,808],{"class":541},[536,10410,660],{"class":545},[536,10412,568],{"class":541},[536,10414,10415,10417,10419],{"class":538,"line":2636},[536,10416,631],{"class":541},[536,10418,649],{"class":545},[536,10420,568],{"class":541},[521,10422,825],{"id":824},[830,10424,10425,10433],{},[833,10426,10427],{},[836,10428,10429,10431],{},[839,10430,825],{},[839,10432,844],{},[849,10434,10435,10444,10454,10465,10476],{},[836,10436,10437,10439],{},[854,10438,4931],{},[854,10440,10441,10443],{},[1603,10442,4353],{}," Surface mesh from which to sample",[836,10445,10446,10448],{},[854,10447,10245],{},[854,10449,10450,10453],{},[1603,10451,10452],{},"Number"," Number of samples",[836,10455,10456,10459],{},[854,10457,10458],{},"instanceMesh",[854,10460,10461,10464],{},[1603,10462,10463],{},"InstanceMesh"," InstanceMesh to scatter",[836,10466,10467,10470],{},[854,10468,10469],{},"weight",[854,10471,10472,10475],{},[1603,10473,10474],{},"String"," A vertex attribute to be used as a weight when sampling",[836,10477,10478,10481],{},[854,10479,10480],{},"transform",[854,10482,10483,10486],{},[1603,10484,10485],{},"Function"," A function that can be used as a custom sampling",[521,10488,10490],{"id":10489},"usesurfacesampler","useSurfaceSampler",[512,10492,10493,10494],{},"A hook to obtain the result of the ",[10495,10496,10497],"sampler",{}," as a buffer. Useful for driving anything other than InstancedMesh via the Sampler.",[525,10499,10502],{"className":527,"code":10500,"highlights":10501,"language":532,"meta":484,"style":484},"\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",[486,699],[516,10503,10504,10524,10548,10566,10589,10593,10606,10619,10623,10643,10677,10683,10691,10695,10703,10721,10753,10761,10765,10784,10792,10800,10804,10811,10825,10845,10850,10883,10891,10899,10903,10931,10939],{"__ignoreMap":484},[536,10505,10506,10508,10510,10512,10514,10516,10518,10520,10522],{"class":538,"line":485},[536,10507,542],{"class":541},[536,10509,546],{"class":545},[536,10511,550],{"class":549},[536,10513,553],{"class":549},[536,10515,556],{"class":541},[536,10517,559],{"class":541},[536,10519,563],{"class":562},[536,10521,559],{"class":541},[536,10523,568],{"class":541},[536,10525,10527,10529,10531,10533,10535,10538,10540,10542,10544,10546],{"class":10526,"line":486},[538,572],[536,10528,576],{"class":575},[536,10530,579],{"class":541},[536,10532,589],{"class":582},[536,10534,586],{"class":541},[536,10536,10537],{"class":582}," useSurfaceSampler",[536,10539,592],{"class":541},[536,10541,595],{"class":575},[536,10543,598],{"class":541},[536,10545,601],{"class":562},[536,10547,604],{"class":541},[536,10549,10550,10552,10554,10556,10558,10560,10562,10564],{"class":538,"line":607},[536,10551,576],{"class":575},[536,10553,579],{"class":541},[536,10555,614],{"class":582},[536,10557,592],{"class":541},[536,10559,595],{"class":575},[536,10561,598],{"class":541},[536,10563,623],{"class":562},[536,10565,604],{"class":541},[536,10567,10568,10570,10572,10574,10576,10579,10581,10583,10585,10587],{"class":538,"line":628},[536,10569,576],{"class":575},[536,10571,579],{"class":541},[536,10573,3897],{"class":582},[536,10575,586],{"class":541},[536,10577,10578],{"class":582}," watch",[536,10580,592],{"class":541},[536,10582,595],{"class":575},[536,10584,598],{"class":541},[536,10586,532],{"class":562},[536,10588,604],{"class":541},[536,10590,10591],{"class":538,"line":638},[536,10592,641],{"emptyLinePlaceholder":492},[536,10594,10595,10597,10600,10602,10604],{"class":538,"line":644},[536,10596,2385],{"class":549},[536,10598,10599],{"class":582}," torusRef ",[536,10601,556],{"class":541},[536,10603,3897],{"class":2404},[536,10605,6667],{"class":582},[536,10607,10608,10610,10613,10615,10617],{"class":538,"line":654},[536,10609,2385],{"class":549},[536,10611,10612],{"class":582}," instancesRef ",[536,10614,556],{"class":541},[536,10616,3897],{"class":2404},[536,10618,6667],{"class":582},[536,10620,10621],{"class":538,"line":677},[536,10622,641],{"emptyLinePlaceholder":492},[536,10624,10625,10628,10631,10633,10635,10637,10639,10641],{"class":538,"line":689},[536,10626,10627],{"class":2404},"watch",[536,10629,10630],{"class":582},"(torusRef",[536,10632,586],{"class":541},[536,10634,3065],{"class":541},[536,10636,3676],{"class":6971},[536,10638,3331],{"class":541},[536,10640,3668],{"class":549},[536,10642,1107],{"class":541},[536,10644,10646,10649,10651,10653,10655,10658,10660,10663,10665,10667,10669,10671,10673,10675],{"class":10645,"line":699},[538,572],[536,10647,10648],{"class":2404},"  useSurfaceSampler",[536,10650,2407],{"class":545},[536,10652,3676],{"class":582},[536,10654,586],{"class":541},[536,10656,10657],{"class":722}," 50",[536,10659,586],{"class":541},[536,10661,10662],{"class":582}," instancesRef",[536,10664,1049],{"class":541},[536,10666,3676],{"class":582},[536,10668,586],{"class":541},[536,10670,598],{"class":541},[536,10672,7694],{"class":562},[536,10674,2410],{"class":541},[536,10676,2418],{"class":545},[536,10678,10679,10681],{"class":538,"line":704},[536,10680,2398],{"class":541},[536,10682,2418],{"class":582},[536,10684,10685,10687,10689],{"class":538,"line":730},[536,10686,631],{"class":541},[536,10688,546],{"class":545},[536,10690,568],{"class":541},[536,10692,10693],{"class":538,"line":530},[536,10694,641],{"emptyLinePlaceholder":492},[536,10696,10697,10699,10701],{"class":538,"line":753},[536,10698,542],{"class":541},[536,10700,649],{"class":545},[536,10702,568],{"class":541},[536,10704,10705,10707,10709,10711,10713,10715,10717,10719],{"class":538,"line":764},[536,10706,657],{"class":541},[536,10708,660],{"class":545},[536,10710,663],{"class":549},[536,10712,556],{"class":541},[536,10714,559],{"class":541},[536,10716,10185],{"class":562},[536,10718,559],{"class":541},[536,10720,568],{"class":541},[536,10722,10723,10725,10727,10729,10731,10733,10735,10737,10739,10741,10743,10745,10747,10749,10751],{"class":538,"line":775},[536,10724,680],{"class":541},[536,10726,683],{"class":545},[536,10728,712],{"class":541},[536,10730,1389],{"class":549},[536,10732,556],{"class":541},[536,10734,559],{"class":541},[536,10736,1396],{"class":541},[536,10738,868],{"class":722},[536,10740,1401],{"class":541},[536,10742,1443],{"class":722},[536,10744,1401],{"class":541},[536,10746,7590],{"class":722},[536,10748,1411],{"class":541},[536,10750,559],{"class":541},[536,10752,686],{"class":541},[536,10754,10755,10757,10759],{"class":538,"line":785},[536,10756,680],{"class":541},[536,10758,694],{"class":545},[536,10760,686],{"class":541},[536,10762,10763],{"class":538,"line":531},[536,10764,641],{"emptyLinePlaceholder":492},[536,10766,10767,10769,10771,10773,10775,10777,10780,10782],{"class":538,"line":805},[536,10768,680],{"class":541},[536,10770,759],{"class":545},[536,10772,3897],{"class":549},[536,10774,556],{"class":541},[536,10776,559],{"class":541},[536,10778,10779],{"class":562},"torusRef",[536,10781,559],{"class":541},[536,10783,568],{"class":541},[536,10785,10786,10788,10790],{"class":538,"line":815},[536,10787,756],{"class":541},[536,10789,10272],{"class":545},[536,10791,686],{"class":541},[536,10793,10794,10796,10798],{"class":538,"line":2593},[536,10795,798],{"class":541},[536,10797,759],{"class":545},[536,10799,568],{"class":541},[536,10801,10802],{"class":538,"line":2602},[536,10803,641],{"emptyLinePlaceholder":492},[536,10805,10806,10808],{"class":538,"line":2636},[536,10807,680],{"class":541},[536,10809,10810],{"class":545},"TresInstancedMesh\n",[536,10812,10813,10816,10818,10820,10823],{"class":538,"line":2645},[536,10814,10815],{"class":549},"      ref",[536,10817,556],{"class":541},[536,10819,559],{"class":541},[536,10821,10822],{"class":562},"instancesRef",[536,10824,3122],{"class":541},[536,10826,10827,10830,10832,10834,10836,10838,10841,10843],{"class":538,"line":2654},[536,10828,10829],{"class":541},"      :",[536,10831,1919],{"class":549},[536,10833,556],{"class":541},[536,10835,559],{"class":541},[536,10837,10307],{"class":541},[536,10839,10840],{"class":722},"1_000",[536,10842,1411],{"class":541},[536,10844,3122],{"class":541},[536,10846,10847],{"class":538,"line":2663},[536,10848,10849],{"class":541},"    >\n",[536,10851,10852,10854,10856,10858,10860,10862,10864,10866,10868,10870,10873,10875,10877,10879,10881],{"class":538,"line":2685},[536,10853,756],{"class":541},[536,10855,4005],{"class":545},[536,10857,712],{"class":541},[536,10859,1919],{"class":549},[536,10861,556],{"class":541},[536,10863,559],{"class":541},[536,10865,1396],{"class":541},[536,10867,2133],{"class":722},[536,10869,1401],{"class":541},[536,10871,10872],{"class":722},"32",[536,10874,1401],{"class":541},[536,10876,10872],{"class":722},[536,10878,1411],{"class":541},[536,10880,559],{"class":541},[536,10882,686],{"class":541},[536,10884,10885,10887,10889],{"class":538,"line":2736},[536,10886,756],{"class":541},[536,10888,780],{"class":545},[536,10890,686],{"class":541},[536,10892,10893,10895,10897],{"class":538,"line":2745},[536,10894,798],{"class":541},[536,10896,10296],{"class":545},[536,10898,568],{"class":541},[536,10900,10901],{"class":538,"line":2754},[536,10902,641],{"emptyLinePlaceholder":492},[536,10904,10905,10907,10909,10911,10913,10915,10917,10919,10921,10923,10925,10927,10929],{"class":538,"line":3956},[536,10906,680],{"class":541},[536,10908,8235],{"class":545},[536,10910,712],{"class":541},[536,10912,1919],{"class":549},[536,10914,556],{"class":541},[536,10916,559],{"class":541},[536,10918,1396],{"class":541},[536,10920,1408],{"class":722},[536,10922,1401],{"class":541},[536,10924,1408],{"class":722},[536,10926,1411],{"class":541},[536,10928,559],{"class":541},[536,10930,686],{"class":541},[536,10932,10933,10935,10937],{"class":538,"line":4000},[536,10934,808],{"class":541},[536,10936,660],{"class":545},[536,10938,568],{"class":541},[536,10940,10941,10943,10945],{"class":538,"line":4027},[536,10942,631],{"class":541},[536,10944,649],{"class":545},[536,10946,568],{"class":541},[1230,10948,10949],{},"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":484,"searchDepth":485,"depth":486,"links":10951},[10952,10953,10954],{"id":523,"depth":486,"text":15},{"id":824,"depth":486,"text":825},{"id":10489,"depth":486,"text":10490},"Distribute instances on mesh surfaces using MeshSurfaceSampler.",{},{"title":73,"description":10955},"tp0RMAouxWdIwvGbhPWEaPk4Au2TU5HY1qCtuO9XCUA",{"id":10960,"title":77,"body":10961,"description":11306,"extension":489,"links":490,"meta":11307,"navigation":492,"path":78,"seo":11308,"stem":79,"__hash__":11309},"docs/2.api/1.abstractions/screen-sizer.md",{"type":477,"value":10962,"toc":11302},[10963,10968,10977,10980,10982,11292,11294,11300],[2265,10964,10965],{},[10966,10967],"abstractions-screen-sizer",{},[512,10969,1252,10970,10973,10974,10976],{},[516,10971,10972],{},"\u003CTresObject3D />"," wrapper that scales to \"screen space\". By default ",[516,10975,1823],{}," THREE world unit will be translated to 1 screen pixel.",[512,10978,10979],{},"E.g. a BoxGeometry with a height, width, and depth of 100 each, will be scaled to 100 screen pixels in each dimension.",[521,10981,15],{"id":523},[525,10983,10986],{"className":527,"code":10984,"highlights":10985,"language":532,"meta":484,"style":484},"\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",[607,699,764],[516,10987,10988,11008,11026,11050,11058,11062,11070,11089,11121,11129,11138,11146,11179,11187,11195,11204,11224,11232,11240,11248,11276,11284],{"__ignoreMap":484},[536,10989,10990,10992,10994,10996,10998,11000,11002,11004,11006],{"class":538,"line":485},[536,10991,542],{"class":541},[536,10993,546],{"class":545},[536,10995,550],{"class":549},[536,10997,553],{"class":549},[536,10999,556],{"class":541},[536,11001,559],{"class":541},[536,11003,563],{"class":562},[536,11005,559],{"class":541},[536,11007,568],{"class":541},[536,11009,11010,11012,11014,11016,11018,11020,11022,11024],{"class":538,"line":486},[536,11011,576],{"class":575},[536,11013,579],{"class":541},[536,11015,614],{"class":582},[536,11017,592],{"class":541},[536,11019,595],{"class":575},[536,11021,598],{"class":541},[536,11023,623],{"class":562},[536,11025,604],{"class":541},[536,11027,11029,11031,11033,11035,11037,11040,11042,11044,11046,11048],{"class":11028,"line":607},[538,572],[536,11030,576],{"class":575},[536,11032,579],{"class":541},[536,11034,589],{"class":582},[536,11036,586],{"class":541},[536,11038,11039],{"class":582}," ScreenSizer",[536,11041,592],{"class":541},[536,11043,595],{"class":575},[536,11045,598],{"class":541},[536,11047,601],{"class":562},[536,11049,604],{"class":541},[536,11051,11052,11054,11056],{"class":538,"line":628},[536,11053,631],{"class":541},[536,11055,546],{"class":545},[536,11057,568],{"class":541},[536,11059,11060],{"class":538,"line":638},[536,11061,641],{"emptyLinePlaceholder":492},[536,11063,11064,11066,11068],{"class":538,"line":644},[536,11065,542],{"class":541},[536,11067,649],{"class":545},[536,11069,568],{"class":541},[536,11071,11072,11074,11076,11078,11080,11082,11085,11087],{"class":538,"line":654},[536,11073,657],{"class":541},[536,11075,660],{"class":545},[536,11077,663],{"class":549},[536,11079,556],{"class":541},[536,11081,559],{"class":541},[536,11083,11084],{"class":562},"#3f3f3f",[536,11086,559],{"class":541},[536,11088,568],{"class":541},[536,11090,11091,11093,11095,11097,11099,11101,11103,11105,11107,11109,11111,11113,11115,11117,11119],{"class":538,"line":677},[536,11092,680],{"class":541},[536,11094,683],{"class":545},[536,11096,712],{"class":541},[536,11098,1389],{"class":549},[536,11100,556],{"class":541},[536,11102,559],{"class":541},[536,11104,1396],{"class":541},[536,11106,1408],{"class":722},[536,11108,1401],{"class":541},[536,11110,1408],{"class":722},[536,11112,1401],{"class":541},[536,11114,1408],{"class":722},[536,11116,1411],{"class":541},[536,11118,559],{"class":541},[536,11120,686],{"class":541},[536,11122,11123,11125,11127],{"class":538,"line":689},[536,11124,680],{"class":541},[536,11126,694],{"class":545},[536,11128,686],{"class":541},[536,11130,11132,11134,11136],{"class":11131,"line":699},[538,572],[536,11133,680],{"class":541},[536,11135,77],{"class":545},[536,11137,568],{"class":541},[536,11139,11140,11142,11144],{"class":538,"line":704},[536,11141,756],{"class":541},[536,11143,759],{"class":545},[536,11145,568],{"class":541},[536,11147,11148,11150,11152,11154,11156,11158,11160,11162,11165,11167,11169,11171,11173,11175,11177],{"class":538,"line":730},[536,11149,767],{"class":541},[536,11151,770],{"class":545},[536,11153,712],{"class":541},[536,11155,1919],{"class":549},[536,11157,556],{"class":541},[536,11159,559],{"class":541},[536,11161,1396],{"class":541},[536,11163,11164],{"class":722},"100",[536,11166,1401],{"class":541},[536,11168,11164],{"class":722},[536,11170,1401],{"class":541},[536,11172,11164],{"class":722},[536,11174,1411],{"class":541},[536,11176,559],{"class":541},[536,11178,686],{"class":541},[536,11180,11181,11183,11185],{"class":538,"line":530},[536,11182,767],{"class":541},[536,11184,780],{"class":545},[536,11186,686],{"class":541},[536,11188,11189,11191,11193],{"class":538,"line":753},[536,11190,788],{"class":541},[536,11192,759],{"class":545},[536,11194,568],{"class":541},[536,11196,11198,11200,11202],{"class":11197,"line":764},[538,572],[536,11199,798],{"class":541},[536,11201,77],{"class":545},[536,11203,568],{"class":541},[536,11205,11206,11208,11210,11212,11214,11216,11218,11220,11222],{"class":538,"line":775},[536,11207,680],{"class":541},[536,11209,759],{"class":545},[536,11211,712],{"class":541},[536,11213,9783],{"class":549},[536,11215,556],{"class":541},[536,11217,559],{"class":541},[536,11219,7590],{"class":722},[536,11221,559],{"class":541},[536,11223,568],{"class":541},[536,11225,11226,11228,11230],{"class":538,"line":785},[536,11227,756],{"class":541},[536,11229,770],{"class":545},[536,11231,686],{"class":541},[536,11233,11234,11236,11238],{"class":538,"line":531},[536,11235,756],{"class":541},[536,11237,780],{"class":545},[536,11239,686],{"class":541},[536,11241,11242,11244,11246],{"class":538,"line":805},[536,11243,798],{"class":541},[536,11245,759],{"class":545},[536,11247,568],{"class":541},[536,11249,11250,11252,11254,11256,11258,11260,11262,11264,11266,11268,11270,11272,11274],{"class":538,"line":815},[536,11251,680],{"class":541},[536,11253,8235],{"class":545},[536,11255,712],{"class":541},[536,11257,1919],{"class":549},[536,11259,556],{"class":541},[536,11261,559],{"class":541},[536,11263,1396],{"class":541},[536,11265,1408],{"class":722},[536,11267,1401],{"class":541},[536,11269,1408],{"class":722},[536,11271,1411],{"class":541},[536,11273,559],{"class":541},[536,11275,686],{"class":541},[536,11277,11278,11280,11282],{"class":538,"line":2593},[536,11279,808],{"class":541},[536,11281,660],{"class":545},[536,11283,568],{"class":541},[536,11285,11286,11288,11290],{"class":538,"line":2602},[536,11287,631],{"class":541},[536,11289,649],{"class":545},[536,11291,568],{"class":541},[521,11293,825],{"id":824},[512,11295,11296,11297,1049],{},"Inherits all props from ",[516,11298,11299],{},"THREE.Object3D",[1230,11301,1578],{},{"title":484,"searchDepth":485,"depth":486,"links":11303},[11304,11305],{"id":523,"depth":486,"text":15},{"id":824,"depth":486,"text":825},"Scale objects to screen space where 1 unit equals 1 pixel.",{},{"title":77,"description":11306},"kz3721y8yAocwgiv4rVn-y48A-pFvSXFLwhVmj14V5k",{"id":11311,"title":81,"body":11312,"description":11694,"extension":489,"links":490,"meta":11695,"navigation":492,"path":82,"seo":11696,"stem":83,"__hash__":11697},"docs/2.api/1.abstractions/screen-space.md",{"type":477,"value":11313,"toc":11690},[11314,11319,11332,11354,11356,11594,11596,11688],[506,11315,11316],{},[11317,11318],"abstractions-screen-space",{},[512,11320,11321,11324,11325,11328,11329,1049],{},[516,11322,11323],{},"\u003CScreenSpace />"," wraps its children in a ",[516,11326,11327],{},"\u003CTresGroup />"," and positions them in front of the active camera at ",[516,11330,11331],{},":depth",[512,11333,11334,11335,1401,11337,1401,11339,1401,11341,11343,11344,11347,11348,7766,11351,1049],{},"Additionally, the ",[516,11336,858],{},[516,11338,881],{},[516,11340,900],{},[516,11342,919],{}," props can be used to position them similarly to CSS ",[516,11345,11346],{},"position: absolute"," property when using a ",[516,11349,11350],{},"PerspectiveCamera",[516,11352,11353],{},"OrtographicCamera",[521,11355,15],{"id":523},[525,11357,11360],{"className":527,"code":11358,"highlights":11359,"language":532,"meta":484,"style":484},"\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",[486,704,775],[516,11361,11362,11382,11406,11424,11432,11436,11444,11463,11471,11479,11483,11505,11513,11521,11529,11537,11546,11550,11578,11586],{"__ignoreMap":484},[536,11363,11364,11366,11368,11370,11372,11374,11376,11378,11380],{"class":538,"line":485},[536,11365,542],{"class":541},[536,11367,546],{"class":545},[536,11369,550],{"class":549},[536,11371,553],{"class":549},[536,11373,556],{"class":541},[536,11375,559],{"class":541},[536,11377,563],{"class":562},[536,11379,559],{"class":541},[536,11381,568],{"class":541},[536,11383,11385,11387,11389,11391,11393,11396,11398,11400,11402,11404],{"class":11384,"line":486},[538,572],[536,11386,576],{"class":575},[536,11388,579],{"class":541},[536,11390,589],{"class":582},[536,11392,586],{"class":541},[536,11394,11395],{"class":582}," ScreenSpace",[536,11397,592],{"class":541},[536,11399,595],{"class":575},[536,11401,598],{"class":541},[536,11403,601],{"class":562},[536,11405,604],{"class":541},[536,11407,11408,11410,11412,11414,11416,11418,11420,11422],{"class":538,"line":607},[536,11409,576],{"class":575},[536,11411,579],{"class":541},[536,11413,614],{"class":582},[536,11415,592],{"class":541},[536,11417,595],{"class":575},[536,11419,598],{"class":541},[536,11421,623],{"class":562},[536,11423,604],{"class":541},[536,11425,11426,11428,11430],{"class":538,"line":628},[536,11427,631],{"class":541},[536,11429,546],{"class":545},[536,11431,568],{"class":541},[536,11433,11434],{"class":538,"line":638},[536,11435,641],{"emptyLinePlaceholder":492},[536,11437,11438,11440,11442],{"class":538,"line":644},[536,11439,542],{"class":541},[536,11441,649],{"class":545},[536,11443,568],{"class":541},[536,11445,11446,11448,11450,11452,11454,11456,11459,11461],{"class":538,"line":654},[536,11447,657],{"class":541},[536,11449,660],{"class":545},[536,11451,663],{"class":549},[536,11453,556],{"class":541},[536,11455,559],{"class":541},[536,11457,11458],{"class":562},"#333",[536,11460,559],{"class":541},[536,11462,568],{"class":541},[536,11464,11465,11467,11469],{"class":538,"line":677},[536,11466,680],{"class":541},[536,11468,683],{"class":545},[536,11470,686],{"class":541},[536,11472,11473,11475,11477],{"class":538,"line":689},[536,11474,680],{"class":541},[536,11476,694],{"class":545},[536,11478,686],{"class":541},[536,11480,11481],{"class":538,"line":699},[536,11482,641],{"emptyLinePlaceholder":492},[536,11484,11486,11488,11490,11492,11495,11497,11499,11501,11503],{"class":11485,"line":704},[538,572],[536,11487,680],{"class":541},[536,11489,81],{"class":545},[536,11491,712],{"class":541},[536,11493,11494],{"class":549},"depth",[536,11496,556],{"class":541},[536,11498,559],{"class":541},[536,11500,7590],{"class":722},[536,11502,559],{"class":541},[536,11504,568],{"class":541},[536,11506,11507,11509,11511],{"class":538,"line":730},[536,11508,756],{"class":541},[536,11510,759],{"class":545},[536,11512,568],{"class":541},[536,11514,11515,11517,11519],{"class":538,"line":530},[536,11516,767],{"class":541},[536,11518,10272],{"class":545},[536,11520,686],{"class":541},[536,11522,11523,11525,11527],{"class":538,"line":753},[536,11524,767],{"class":541},[536,11526,780],{"class":545},[536,11528,686],{"class":541},[536,11530,11531,11533,11535],{"class":538,"line":764},[536,11532,788],{"class":541},[536,11534,759],{"class":545},[536,11536,568],{"class":541},[536,11538,11540,11542,11544],{"class":11539,"line":775},[538,572],[536,11541,798],{"class":541},[536,11543,81],{"class":545},[536,11545,568],{"class":541},[536,11547,11548],{"class":538,"line":785},[536,11549,641],{"emptyLinePlaceholder":492},[536,11551,11552,11554,11556,11558,11560,11562,11564,11566,11568,11570,11572,11574,11576],{"class":538,"line":531},[536,11553,680],{"class":541},[536,11555,8235],{"class":545},[536,11557,712],{"class":541},[536,11559,1919],{"class":549},[536,11561,556],{"class":541},[536,11563,559],{"class":541},[536,11565,1396],{"class":541},[536,11567,1408],{"class":722},[536,11569,1401],{"class":541},[536,11571,1408],{"class":722},[536,11573,1411],{"class":541},[536,11575,559],{"class":541},[536,11577,686],{"class":541},[536,11579,11580,11582,11584],{"class":538,"line":805},[536,11581,808],{"class":541},[536,11583,660],{"class":545},[536,11585,568],{"class":541},[536,11587,11588,11590,11592],{"class":538,"line":815},[536,11589,631],{"class":541},[536,11591,649],{"class":545},[536,11593,568],{"class":541},[521,11595,825],{"id":824},[830,11597,11598,11608],{},[833,11599,11600],{},[836,11601,11602,11604,11606],{},[839,11603,841],{"align":900},[839,11605,844],{"align":900},[839,11607,847],{},[849,11609,11610,11624,11643,11657,11674],{},[836,11611,11612,11616,11619],{},[854,11613,11614],{"align":900},[516,11615,11494],{},[854,11617,11618],{"align":900},"Distance from the camera",[854,11620,11621],{},[516,11622,11623],{},"-1",[836,11625,11626,11630,11638],{},[854,11627,11628],{"align":900},[516,11629,858],{},[854,11631,11632,11633,11635,11636],{"align":900},"Similar to CSS ",[516,11634,858],{}," property. Cannot be used with ",[516,11637,881],{},[854,11639,11640,11642],{},[516,11641,1443],{}," (vertical center of the screen)",[836,11644,11645,11649,11655],{},[854,11646,11647],{"align":900},[516,11648,881],{},[854,11650,11632,11651,11635,11653],{"align":900},[516,11652,881],{},[516,11654,858],{},[854,11656],{},[836,11658,11659,11663,11669],{},[854,11660,11661],{"align":900},[516,11662,900],{},[854,11664,11632,11665,11635,11667],{"align":900},[516,11666,900],{},[516,11668,919],{},[854,11670,11671,11673],{},[516,11672,1443],{}," (horizontal center of the screen)",[836,11675,11676,11680,11686],{},[854,11677,11678],{"align":900},[516,11679,919],{},[854,11681,11632,11682,11635,11684],{"align":900},[516,11683,919],{},[516,11685,900],{},[854,11687],{},[1230,11689,1578],{},{"title":484,"searchDepth":485,"depth":486,"links":11691},[11692,11693],{"id":523,"depth":486,"text":15},{"id":824,"depth":486,"text":825},"Position objects in front of the camera with CSS-like positioning.",{},{"title":81,"description":11694},"kqBTtDRTjTEQO1CtIqpPWtj4cpsi2JzyDHE4eOsdRvU",1781273436209]