[{"data":1,"prerenderedAt":13109},["ShallowReactive",2],{"navigation":3,"/api/abstractions":498,"/api/abstractions-surround":519,"abstraction-list":524},[4,26],{"title":5,"path":6,"stem":7,"children":8},"Getting Started","/getting-started","1.getting-started/1.index",[9,10,14,18,22],{"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},"Loading Models","/getting-started/loading-models","1.getting-started/4.loading-models",{"title":23,"path":24,"stem":25},"Upgrade Guide","/getting-started/upgrade-guide","1.getting-started/5.upgrade-guide",{"title":27,"path":28,"stem":29,"children":30},"Api","/api","2.api",[31,34,96,126,168,210,308,334,368,418,464],{"title":32,"path":28,"stem":33},"All","2.api/index",{"title":35,"path":36,"stem":37,"children":38},"Abstractions","/api/abstractions","2.api/1.abstractions/index",[39,40,44,48,52,56,60,64,68,72,76,80,84,88,92],{"title":35,"path":36,"stem":37},{"title":41,"path":42,"stem":43},"Align","/api/abstractions/align","2.api/1.abstractions/align",{"title":45,"path":46,"stem":47},"Billboard","/api/abstractions/billboard","2.api/1.abstractions/billboard",{"title":49,"path":50,"stem":51},"Camera Shake","/api/abstractions/camera-shake","2.api/1.abstractions/camera-shake",{"title":53,"path":54,"stem":55},"Decal","/api/abstractions/decal","2.api/1.abstractions/decal",{"title":57,"path":58,"stem":59},"Edges","/api/abstractions/edges","2.api/1.abstractions/edges",{"title":61,"path":62,"stem":63},"Fit","/api/abstractions/fit","2.api/1.abstractions/fit",{"title":65,"path":66,"stem":67},"Instances","/api/abstractions/instances","2.api/1.abstractions/instances",{"title":69,"path":70,"stem":71},"Levioso (Float)","/api/abstractions/levioso","2.api/1.abstractions/levioso",{"title":73,"path":74,"stem":75},"Mask","/api/abstractions/mask","2.api/1.abstractions/mask",{"title":77,"path":78,"stem":79},"Merged","/api/abstractions/merged","2.api/1.abstractions/merged",{"title":81,"path":82,"stem":83},"Outline","/api/abstractions/outline","2.api/1.abstractions/outline",{"title":85,"path":86,"stem":87},"Sampler","/api/abstractions/sampler","2.api/1.abstractions/sampler",{"title":89,"path":90,"stem":91},"ScreenSizer","/api/abstractions/screen-sizer","2.api/1.abstractions/screen-sizer",{"title":93,"path":94,"stem":95},"ScreenSpace","/api/abstractions/screen-space","2.api/1.abstractions/screen-space",{"title":97,"path":98,"stem":99,"children":100},"Controls","/api/controls","2.api/2.controls/index",[101,102,106,110,114,118,122],{"title":97,"path":98,"stem":99},{"title":103,"path":104,"stem":105},"Camera Controls","/api/controls/camera-controls","2.api/2.controls/camera-controls",{"title":107,"path":108,"stem":109},"Keyboard Controls","/api/controls/keyboard-controls","2.api/2.controls/keyboard-controls",{"title":111,"path":112,"stem":113},"Map Controls","/api/controls/map-controls","2.api/2.controls/map-controls",{"title":115,"path":116,"stem":117},"Orbit Controls","/api/controls/orbit-controls","2.api/2.controls/orbit-controls",{"title":119,"path":120,"stem":121},"PointerLock Controls","/api/controls/pointer-lock-controls","2.api/2.controls/pointer-lock-controls",{"title":123,"path":124,"stem":125},"Transform Controls","/api/controls/transform-controls","2.api/2.controls/transform-controls",{"title":127,"path":128,"stem":129,"children":130},"Loaders","/api/loaders","2.api/3.loaders/index",[131,132,136,140,144,148,152,156,160,164],{"title":127,"path":128,"stem":129},{"title":133,"path":134,"stem":135},"useGLTF","/api/loaders/use-gltf","2.api/3.loaders/1.use-gltf",{"title":137,"path":138,"stem":139},"GLTFModel","/api/loaders/gltf-model","2.api/3.loaders/2.gltf-model",{"title":141,"path":142,"stem":143},"useFBX","/api/loaders/use-fbx","2.api/3.loaders/3.use-fbx",{"title":145,"path":146,"stem":147},"FBXModel","/api/loaders/fbx-model","2.api/3.loaders/4.fbx-model",{"title":149,"path":150,"stem":151},"useTexture","/api/loaders/use-texture","2.api/3.loaders/5.use-texture",{"title":153,"path":154,"stem":155},"useTextures","/api/loaders/use-textures","2.api/3.loaders/6.use-textures",{"title":157,"path":158,"stem":159},"useSVG","/api/loaders/use-svg","2.api/3.loaders/7.use-svg",{"title":161,"path":162,"stem":163},"useProgress","/api/loaders/use-progress","2.api/3.loaders/use-progress",{"title":165,"path":166,"stem":167},"useVideoTexture","/api/loaders/use-video-texture","2.api/3.loaders/use-video-texture",{"title":169,"path":170,"stem":171,"children":172},"Materials","/api/materials","2.api/4.materials/index",[173,174,178,182,186,190,194,198,202,206],{"title":169,"path":170,"stem":171},{"title":175,"path":176,"stem":177},"Custom Shader Material","/api/materials/custom-shader-material","2.api/4.materials/custom-shader-material",{"title":179,"path":180,"stem":181},"Mesh Glass Material","/api/materials/glass-material","2.api/4.materials/glass-material",{"title":183,"path":184,"stem":185},"Holographic Material","/api/materials/holographic-material","2.api/4.materials/holographic-material",{"title":187,"path":188,"stem":189},"Mesh Discard Material","/api/materials/mesh-discard-material","2.api/4.materials/mesh-discard-material",{"title":191,"path":192,"stem":193},"Mesh Portal Material","/api/materials/mesh-portal-material","2.api/4.materials/mesh-portal-material",{"title":195,"path":196,"stem":197},"Mesh Reflection Material","/api/materials/mesh-reflection-material","2.api/4.materials/mesh-reflection-material",{"title":199,"path":200,"stem":201},"Mesh Transmission Material","/api/materials/mesh-transmission-material","2.api/4.materials/mesh-transmission-material",{"title":203,"path":204,"stem":205},"Point Material","/api/materials/point-material","2.api/4.materials/point-material",{"title":207,"path":208,"stem":209},"Wobble Material","/api/materials/wobble-material","2.api/4.materials/wobble-material",{"title":211,"path":212,"stem":213,"children":214},"Shapes","/api/shapes","2.api/5.shapes/index",[215,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296,300,304],{"title":211,"path":212,"stem":213},{"title":217,"path":218,"stem":219},"Box","/api/shapes/box","2.api/5.shapes/box",{"title":221,"path":222,"stem":223},"CatmullRomCurve3","/api/shapes/catmullromcurve3","2.api/5.shapes/catmullromcurve3",{"title":225,"path":226,"stem":227},"Circle","/api/shapes/circle","2.api/5.shapes/circle",{"title":229,"path":230,"stem":231},"Cone","/api/shapes/cone","2.api/5.shapes/cone",{"title":233,"path":234,"stem":235},"Cubic Bezier Line","/api/shapes/cubic-bezier-line","2.api/5.shapes/cubic-bezier-line",{"title":237,"path":238,"stem":239},"Cylinder","/api/shapes/cylinder","2.api/5.shapes/cylinder",{"title":241,"path":242,"stem":243},"Dodecahedron","/api/shapes/dodecahedron","2.api/5.shapes/dodecahedron",{"title":245,"path":246,"stem":247},"Grid","/api/shapes/grid","2.api/5.shapes/grid",{"title":249,"path":250,"stem":251},"Icosahedron","/api/shapes/icosahedron","2.api/5.shapes/icosahedron",{"title":253,"path":254,"stem":255},"Line2","/api/shapes/line2","2.api/5.shapes/line2",{"title":257,"path":258,"stem":259},"Octahedron","/api/shapes/octahedron","2.api/5.shapes/octahedron",{"title":261,"path":262,"stem":263},"Plane","/api/shapes/plane","2.api/5.shapes/plane",{"title":265,"path":266,"stem":267},"Quadratic Bezier Line","/api/shapes/quadratic-bezier-line","2.api/5.shapes/quadratic-bezier-line",{"title":269,"path":270,"stem":271},"Ring","/api/shapes/ring","2.api/5.shapes/ring",{"title":273,"path":274,"stem":275},"Rounded Box","/api/shapes/rounded-box","2.api/5.shapes/rounded-box",{"title":277,"path":278,"stem":279},"Rounded Plane","/api/shapes/rounded-plane","2.api/5.shapes/rounded-plane",{"title":281,"path":282,"stem":283},"Screen Quad","/api/shapes/screen-quad","2.api/5.shapes/screen-quad",{"title":285,"path":286,"stem":287},"Sphere","/api/shapes/sphere","2.api/5.shapes/sphere",{"title":289,"path":290,"stem":291},"Superformula","/api/shapes/superformula","2.api/5.shapes/superformula",{"title":293,"path":294,"stem":295},"Tetrahedron","/api/shapes/tetrahedron","2.api/5.shapes/tetrahedron",{"title":297,"path":298,"stem":299},"Torus","/api/shapes/torus","2.api/5.shapes/torus",{"title":301,"path":302,"stem":303},"Torus Knot","/api/shapes/torus-knot","2.api/5.shapes/torus-knot",{"title":305,"path":306,"stem":307},"Tube","/api/shapes/tube","2.api/5.shapes/tube",{"title":309,"path":310,"stem":311,"children":312},"Debug/Performance","/api/debug-performance","2.api/6.debug-performance/index",[313,314,318,322,326,330],{"title":309,"path":310,"stem":311},{"title":315,"path":316,"stem":317},"Helper","/api/debug-performance/helper","2.api/6.debug-performance/helper",{"title":319,"path":320,"stem":321},"LOD","/api/debug-performance/lod","2.api/6.debug-performance/lod",{"title":323,"path":324,"stem":325},"Stats","/api/debug-performance/stats","2.api/6.debug-performance/stats",{"title":327,"path":328,"stem":329},"StatsGl","/api/debug-performance/stats-gl","2.api/6.debug-performance/stats-gl",{"title":331,"path":332,"stem":333},"useBVH","/api/debug-performance/use-bvh","2.api/6.debug-performance/use-bvh",{"title":335,"path":336,"stem":337,"children":338},"Light/Shadow","/api/light-shadow","2.api/7.light-shadow/index",[339,340,344,348,352,356,360,364],{"title":335,"path":336,"stem":337},{"title":341,"path":342,"stem":343},"Accumulative Shadows","/api/light-shadow/accumulative-shadows","2.api/7.light-shadow/accumulative-shadows",{"title":345,"path":346,"stem":347},"Bake Shadows","/api/light-shadow/bake-shadows","2.api/7.light-shadow/bake-shadows",{"title":349,"path":350,"stem":351},"Circle Shadow","/api/light-shadow/circle-shadow","2.api/7.light-shadow/circle-shadow",{"title":353,"path":354,"stem":355},"Contact Shadows","/api/light-shadow/contact-shadows","2.api/7.light-shadow/contact-shadows",{"title":357,"path":358,"stem":359},"Lensflare","/api/light-shadow/lensflare","2.api/7.light-shadow/lensflare",{"title":361,"path":362,"stem":363},"Randomized Lights","/api/light-shadow/randomized-lights","2.api/7.light-shadow/randomized-lights",{"title":365,"path":366,"stem":367},"Soft Shadows","/api/light-shadow/soft-shadows","2.api/7.light-shadow/soft-shadows",{"title":369,"path":370,"stem":371,"children":372},"Staging","/api/staging","2.api/8.staging/index",[373,374,378,382,386,390,394,398,402,406,410,414],{"title":369,"path":370,"stem":371},{"title":375,"path":376,"stem":377},"Environment","/api/staging/environment","2.api/8.staging/1.environment",{"title":379,"path":380,"stem":381},"useEnvironment","/api/staging/use-environment","2.api/8.staging/2.use-environment",{"title":383,"path":384,"stem":385},"Lightformer","/api/staging/lightformer","2.api/8.staging/3.lightformer",{"title":387,"path":388,"stem":389},"Backdrop","/api/staging/backdrop","2.api/8.staging/backdrop",{"title":391,"path":392,"stem":393},"Ocean","/api/staging/ocean","2.api/8.staging/ocean",{"title":395,"path":396,"stem":397},"Precipitation","/api/staging/precipitation","2.api/8.staging/precipitation",{"title":399,"path":400,"stem":401},"Sky","/api/staging/sky","2.api/8.staging/sky",{"title":403,"path":404,"stem":405},"Smoke","/api/staging/smoke","2.api/8.staging/smoke",{"title":407,"path":408,"stem":409},"Sparkles","/api/staging/sparkles","2.api/8.staging/sparkles",{"title":411,"path":412,"stem":413},"Stage","/api/staging/stage","2.api/8.staging/stage",{"title":415,"path":416,"stem":417},"Stars","/api/staging/stars","2.api/8.staging/stars",{"title":419,"path":420,"stem":421,"children":422},"Objects","/api/objects","2.api/9.objects/index",[423,424,428,432,436,440,444,448,452,456,460],{"title":419,"path":420,"stem":421},{"title":425,"path":426,"stem":427},"AnimatedSprite","/api/objects/animated-sprite","2.api/9.objects/animated-sprite",{"title":429,"path":430,"stem":431},"CubeCamera","/api/objects/cube-camera","2.api/9.objects/cube-camera",{"title":433,"path":434,"stem":435},"Fbo","/api/objects/fbo","2.api/9.objects/fbo",{"title":437,"path":438,"stem":439},"GradientTexture","/api/objects/gradient-texture","2.api/9.objects/gradient-texture",{"title":441,"path":442,"stem":443},"HTML","/api/objects/html","2.api/9.objects/html",{"title":445,"path":446,"stem":447},"Image","/api/objects/image","2.api/9.objects/image",{"title":449,"path":450,"stem":451},"MarchingCubes","/api/objects/marching-cubes","2.api/9.objects/marching-cubes",{"title":453,"path":454,"stem":455},"Reflector","/api/objects/reflector","2.api/9.objects/reflector",{"title":457,"path":458,"stem":459},"Refractor","/api/objects/refractor","2.api/9.objects/refractor",{"title":461,"path":462,"stem":463},"Text3D","/api/objects/text-3d","2.api/9.objects/text-3d",{"title":465,"path":466,"stem":467,"children":468},"Miscellaneous","/api/miscellaneous","2.api/miscellaneous/index",[469,470,474,478,482,486,490,494],{"title":465,"path":466,"stem":467},{"title":471,"path":472,"stem":473},"Bounds","/api/miscellaneous/bounds","2.api/miscellaneous/bounds",{"title":475,"path":476,"stem":477},"GlobalAudio","/api/miscellaneous/global-audio","2.api/miscellaneous/global-audio",{"title":479,"path":480,"stem":481},"MouseParallax","/api/miscellaneous/mouse-parallax","2.api/miscellaneous/mouse-parallax",{"title":483,"path":484,"stem":485},"PositionalAudio","/api/miscellaneous/positional-audio","2.api/miscellaneous/positional-audio",{"title":487,"path":488,"stem":489},"useAnimations","/api/miscellaneous/use-animations","2.api/miscellaneous/use-animations",{"title":491,"path":492,"stem":493},"useGLTFExporter","/api/miscellaneous/use-gltf-exporter","2.api/miscellaneous/use-gltf-exporter",{"title":495,"path":496,"stem":497},"useIntersect","/api/miscellaneous/use-intersect","2.api/miscellaneous/use-intersect",{"id":499,"title":35,"body":500,"description":512,"extension":513,"links":514,"meta":515,"navigation":516,"path":36,"seo":517,"stem":37,"__hash__":518},"docs/2.api/1.abstractions/index.md",{"type":501,"value":502,"toc":507},"minimark",[503],[504,505],"api-list",{"list-name":506},"abstraction-list",{"title":508,"searchDepth":509,"depth":510,"links":511},"",1,2,[],"UI components reference","md",null,{},true,{"title":35,"description":512},"baHMAoaJElysrTy3x8ClFjAsCmHKTlx_oEIhv5zW7dM",[520,522],{"title":32,"path":28,"stem":33,"description":521,"children":-1},"Explore the complete API reference",{"title":41,"path":42,"stem":43,"description":523,"children":-1},"Calculate and align children within their parent using bounding boxes.",[525,1284,1598,2147,7247,7541,8166,9391,9785,10435,11141,11618,12420,12733],{"id":526,"title":41,"body":527,"description":523,"extension":513,"links":514,"meta":1281,"navigation":516,"path":42,"seo":1282,"stem":43,"__hash__":1283},"docs/2.api/1.abstractions/align.md",{"type":501,"value":528,"toc":1275},[529,535,544,548,842,846,849,1091,1095,1126,1129,1271],[530,531,532],"scene-controls-wrapper",{},[533,534],"abstractions-align",{},[536,537,538,539,543],"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 ",[540,541,542],"code",{},"cacheKey"," is set.",[545,546,15],"h2",{"id":547},"usage",[549,550,557],"pre",{"className":551,"code":552,"highlights":553,"language":556,"meta":508,"style":508},"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",[510,554,555],13,18,"vue",[540,558,559,593,629,650,660,666,676,699,711,721,726,748,753,771,782,793,803,813,823,833],{"__ignoreMap":508},[560,561,563,567,571,575,578,581,584,588,590],"span",{"class":562,"line":509},"line",[560,564,566],{"class":565},"sMK4o","\u003C",[560,568,570],{"class":569},"swJcz","script",[560,572,574],{"class":573},"spNyl"," setup",[560,576,577],{"class":573}," lang",[560,579,580],{"class":565},"=",[560,582,583],{"class":565},"\"",[560,585,587],{"class":586},"sfazB","ts",[560,589,583],{"class":565},[560,591,592],{"class":565},">\n",[560,594,597,601,604,608,611,614,617,620,623,626],{"class":595,"line":510},[562,596],"highlight",[560,598,600],{"class":599},"s7zQu","import",[560,602,603],{"class":565}," {",[560,605,607],{"class":606},"sTEyZ"," Align",[560,609,610],{"class":565},",",[560,612,613],{"class":606}," OrbitControls",[560,615,616],{"class":565}," }",[560,618,619],{"class":599}," from",[560,621,622],{"class":565}," '",[560,624,625],{"class":586},"@tresjs/cientos",[560,627,628],{"class":565},"'\n",[560,630,632,634,636,639,641,643,645,648],{"class":562,"line":631},3,[560,633,600],{"class":599},[560,635,603],{"class":565},[560,637,638],{"class":606}," TresCanvas",[560,640,616],{"class":565},[560,642,619],{"class":599},[560,644,622],{"class":565},[560,646,647],{"class":586},"@tresjs/core",[560,649,628],{"class":565},[560,651,653,656,658],{"class":562,"line":652},4,[560,654,655],{"class":565},"\u003C/",[560,657,570],{"class":569},[560,659,592],{"class":565},[560,661,663],{"class":562,"line":662},5,[560,664,665],{"emptyLinePlaceholder":516},"\n",[560,667,669,671,674],{"class":562,"line":668},6,[560,670,566],{"class":565},[560,672,673],{"class":569},"template",[560,675,592],{"class":565},[560,677,679,682,685,688,690,692,695,697],{"class":562,"line":678},7,[560,680,681],{"class":565},"  \u003C",[560,683,684],{"class":569},"TresCanvas",[560,686,687],{"class":573}," clear-color",[560,689,580],{"class":565},[560,691,583],{"class":565},[560,693,694],{"class":586},"#222",[560,696,583],{"class":565},[560,698,592],{"class":565},[560,700,702,705,708],{"class":562,"line":701},8,[560,703,704],{"class":565},"    \u003C",[560,706,707],{"class":569},"TresPerspectiveCamera",[560,709,710],{"class":565}," />\n",[560,712,714,716,719],{"class":562,"line":713},9,[560,715,704],{"class":565},[560,717,718],{"class":569},"OrbitControls",[560,720,710],{"class":565},[560,722,724],{"class":562,"line":723},10,[560,725,665],{"emptyLinePlaceholder":516},[560,727,729,731,734,737,739,741,744,746],{"class":562,"line":728},11,[560,730,704],{"class":565},[560,732,733],{"class":569},"TresAxesHelper",[560,735,736],{"class":573}," :scale",[560,738,580],{"class":565},[560,740,583],{"class":565},[560,742,743],{"class":586},"2",[560,745,583],{"class":565},[560,747,710],{"class":565},[560,749,751],{"class":562,"line":750},12,[560,752,665],{"emptyLinePlaceholder":516},[560,754,756,758,760,763,766,769],{"class":755,"line":554},[562,596],[560,757,704],{"class":565},[560,759,41],{"class":569},[560,761,762],{"class":573}," top",[560,764,765],{"class":573}," right",[560,767,768],{"class":573}," back",[560,770,592],{"class":565},[560,772,774,777,780],{"class":562,"line":773},14,[560,775,776],{"class":565},"      \u003C",[560,778,779],{"class":569},"TresMesh",[560,781,592],{"class":565},[560,783,785,788,791],{"class":562,"line":784},15,[560,786,787],{"class":565},"        \u003C",[560,789,790],{"class":569},"TresBoxGeometry",[560,792,710],{"class":565},[560,794,796,798,801],{"class":562,"line":795},16,[560,797,787],{"class":565},[560,799,800],{"class":569},"TresMeshNormalMaterial",[560,802,710],{"class":565},[560,804,806,809,811],{"class":562,"line":805},17,[560,807,808],{"class":565},"      \u003C/",[560,810,779],{"class":569},[560,812,592],{"class":565},[560,814,816,819,821],{"class":815,"line":555},[562,596],[560,817,818],{"class":565},"    \u003C/",[560,820,41],{"class":569},[560,822,592],{"class":565},[560,824,826,829,831],{"class":562,"line":825},19,[560,827,828],{"class":565},"  \u003C/",[560,830,684],{"class":569},[560,832,592],{"class":565},[560,834,836,838,840],{"class":562,"line":835},20,[560,837,655],{"class":565},[560,839,673],{"class":569},[560,841,592],{"class":565},[545,843,845],{"id":844},"props","Props",[536,847,848],{},"All props are optional.",[850,851,852,868],"table",{},[853,854,855],"thead",{},[856,857,858,862,865],"tr",{},[859,860,861],"th",{},"Prop",[859,863,864],{},"Description",[859,866,867],{},"Default",[869,870,871,895,914,933,951,970,988,1004,1020,1036,1052,1074],"tbody",{},[856,872,873,879,890],{},[874,875,876],"td",{},[540,877,878],{},"top",[874,880,881,882,885,886,889],{},"If ",[540,883,884],{},"true",", aligns bounding box bottom to ",[540,887,888],{},"0"," on the y-axis",[874,891,892],{},[540,893,894],{},"false",[856,896,897,902,910],{},[874,898,899],{},[540,900,901],{},"bottom",[874,903,881,904,906,907,909],{},[540,905,884],{},", aligns bounding box top to ",[540,908,888],{}," on the y-axis.",[874,911,912],{},[540,913,894],{},[856,915,916,921,929],{},[874,917,918],{},[540,919,920],{},"left",[874,922,881,923,925,926,928],{},[540,924,884],{},", aligns bounding box right to ",[540,927,888],{}," on the x-axis.",[874,930,931],{},[540,932,894],{},[856,934,935,940,947],{},[874,936,937],{},[540,938,939],{},"right",[874,941,881,942,944,945,928],{},[540,943,884],{},", aligns bounding box left to ",[540,946,888],{},[874,948,949],{},[540,950,894],{},[856,952,953,958,966],{},[874,954,955],{},[540,956,957],{},"front",[874,959,881,960,962,963,965],{},[540,961,884],{},", aligns bounding box back to ",[540,964,888],{}," on the z-axis.",[874,967,968],{},[540,969,894],{},[856,971,972,977,984],{},[874,973,974],{},[540,975,976],{},"back",[874,978,881,979,981,982,965],{},[540,980,884],{},", aligns bounding box front to ",[540,983,888],{},[874,985,986],{},[540,987,894],{},[856,989,990,995,1000],{},[874,991,992],{},[540,993,994],{},"disable",[874,996,881,997,999],{},[540,998,884],{},", disables alignment on all axes.",[874,1001,1002],{},[540,1003,894],{},[856,1005,1006,1011,1016],{},[874,1007,1008],{},[540,1009,1010],{},"disableX",[874,1012,881,1013,1015],{},[540,1014,884],{},", disables alignment on the x-axis.",[874,1017,1018],{},[540,1019,894],{},[856,1021,1022,1027,1032],{},[874,1023,1024],{},[540,1025,1026],{},"disableY",[874,1028,881,1029,1031],{},[540,1030,884],{},", disables alignment on the y-axis.",[874,1033,1034],{},[540,1035,894],{},[856,1037,1038,1043,1048],{},[874,1039,1040],{},[540,1041,1042],{},"disableZ",[874,1044,881,1045,1047],{},[540,1046,884],{},", disables alignment on the z-axis.",[874,1049,1050],{},[540,1051,894],{},[856,1053,1054,1059,1070],{},[874,1055,1056],{},[540,1057,1058],{},"precise",[874,1060,1061,1062,1069],{},"See ",[1063,1064,1068],"a",{"href":1065,"rel":1066},"https://threejs.org/docs/index.html?q=box3#api/en/math/Box3.setFromObject",[1067],"nofollow","Box3.setFromObject",".",[874,1071,1072],{},[540,1073,884],{},[856,1075,1076,1080,1086],{},[874,1077,1078],{},[540,1079,542],{},[874,1081,1082,1083,1085],{},"If set, component will only update when ",[540,1084,542],{},"'s value changes. If unset, component will update every frame.",[874,1087,1088],{},[540,1089,1090],{},"undefined",[545,1092,1094],{"id":1093},"events","Events",[850,1096,1097,1109],{},[853,1098,1099],{},[856,1100,1101,1104,1107],{},[859,1102,1103],{},"Event",[859,1105,1106],{},"Payload",[859,1108,864],{},[869,1110,1111],{},[856,1112,1113,1118,1123],{},[874,1114,1115],{},[540,1116,1117],{},"change",[874,1119,1120],{},[540,1121,1122],{},"AlignCallbackOptions",[874,1124,1125],{},"Fires after measurement, whenever the aligned bounding box or position changes.",[545,1127,1122],{"id":1128},"aligncallbackoptions",[549,1130,1133],{"className":1131,"code":1132,"language":587,"meta":508,"style":508},"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",[540,1134,1135,1150,1156,1167,1172,1181,1191,1200,1209,1219,1229,1239,1248,1257,1266],{"__ignoreMap":508},[560,1136,1137,1140,1143,1147],{"class":562,"line":509},[560,1138,1139],{"class":599},"export",[560,1141,1142],{"class":573}," interface",[560,1144,1146],{"class":1145},"sBMFI"," AlignCallbackOptions",[560,1148,1149],{"class":565}," {\n",[560,1151,1152],{"class":562,"line":510},[560,1153,1155],{"class":1154},"sHwdD","  /** The next parent above \u003CAlign /> */\n",[560,1157,1158,1161,1164],{"class":562,"line":631},[560,1159,1160],{"class":569},"  parent",[560,1162,1163],{"class":565},":",[560,1165,1166],{"class":1145}," Object3D\n",[560,1168,1169],{"class":562,"line":652},[560,1170,1171],{"class":1154},"  /** The outmost container group of the \u003CAlign/> component */\n",[560,1173,1174,1177,1179],{"class":562,"line":662},[560,1175,1176],{"class":569},"  container",[560,1178,1163],{"class":565},[560,1180,1166],{"class":1145},[560,1182,1183,1186,1188],{"class":562,"line":668},[560,1184,1185],{"class":569},"  width",[560,1187,1163],{"class":565},[560,1189,1190],{"class":1145}," number\n",[560,1192,1193,1196,1198],{"class":562,"line":678},[560,1194,1195],{"class":569},"  height",[560,1197,1163],{"class":565},[560,1199,1190],{"class":1145},[560,1201,1202,1205,1207],{"class":562,"line":701},[560,1203,1204],{"class":569},"  depth",[560,1206,1163],{"class":565},[560,1208,1190],{"class":1145},[560,1210,1211,1214,1216],{"class":562,"line":713},[560,1212,1213],{"class":569},"  boundingBox",[560,1215,1163],{"class":565},[560,1217,1218],{"class":1145}," Box3\n",[560,1220,1221,1224,1226],{"class":562,"line":723},[560,1222,1223],{"class":569},"  boundingSphere",[560,1225,1163],{"class":565},[560,1227,1228],{"class":1145}," Sphere\n",[560,1230,1231,1234,1236],{"class":562,"line":728},[560,1232,1233],{"class":569},"  center",[560,1235,1163],{"class":565},[560,1237,1238],{"class":1145}," Vector3\n",[560,1240,1241,1244,1246],{"class":562,"line":750},[560,1242,1243],{"class":569},"  verticalAlignment",[560,1245,1163],{"class":565},[560,1247,1190],{"class":1145},[560,1249,1250,1253,1255],{"class":562,"line":554},[560,1251,1252],{"class":569},"  horizontalAlignment",[560,1254,1163],{"class":565},[560,1256,1190],{"class":1145},[560,1258,1259,1262,1264],{"class":562,"line":773},[560,1260,1261],{"class":569},"  depthAlignment",[560,1263,1163],{"class":565},[560,1265,1190],{"class":1145},[560,1267,1268],{"class":562,"line":784},[560,1269,1270],{"class":565},"}\n",[1272,1273,1274],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":508,"searchDepth":509,"depth":510,"links":1276},[1277,1278,1279,1280],{"id":547,"depth":510,"text":15},{"id":844,"depth":510,"text":845},{"id":1093,"depth":510,"text":1094},{"id":1128,"depth":510,"text":1122},{},{"title":41,"description":523},"3E8m6ve9BmzyQV2uJm6C_7PXljUwt0sOz94l3FSCjpI",{"id":1285,"title":45,"body":1286,"description":1594,"extension":513,"links":514,"meta":1595,"navigation":516,"path":46,"seo":1596,"stem":47,"__hash__":1597},"docs/2.api/1.abstractions/billboard.md",{"type":501,"value":1287,"toc":1590},[1288,1293,1300,1302,1511,1513,1587],[530,1289,1290],{},[1291,1292],"abstractions-billboard",{},[536,1294,1295,1296,1299],{},"Adds a ",[540,1297,1298],{},"THREE.Group"," that always faces the camera.",[545,1301,15],{"id":547},[549,1303,1306],{"className":551,"code":1304,"highlights":1305,"language":556,"meta":508,"style":508},"\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",[510,723,773],[540,1307,1308,1328,1357,1375,1383,1387,1395,1414,1422,1442,1451,1470,1478,1486,1495,1503],{"__ignoreMap":508},[560,1309,1310,1312,1314,1316,1318,1320,1322,1324,1326],{"class":562,"line":509},[560,1311,566],{"class":565},[560,1313,570],{"class":569},[560,1315,574],{"class":573},[560,1317,577],{"class":573},[560,1319,580],{"class":565},[560,1321,583],{"class":565},[560,1323,587],{"class":586},[560,1325,583],{"class":565},[560,1327,592],{"class":565},[560,1329,1331,1333,1335,1338,1340,1343,1345,1347,1349,1351,1353,1355],{"class":1330,"line":510},[562,596],[560,1332,600],{"class":599},[560,1334,603],{"class":565},[560,1336,1337],{"class":606}," Billboard",[560,1339,610],{"class":565},[560,1341,1342],{"class":606}," Box",[560,1344,610],{"class":565},[560,1346,613],{"class":606},[560,1348,616],{"class":565},[560,1350,619],{"class":599},[560,1352,622],{"class":565},[560,1354,625],{"class":586},[560,1356,628],{"class":565},[560,1358,1359,1361,1363,1365,1367,1369,1371,1373],{"class":562,"line":631},[560,1360,600],{"class":599},[560,1362,603],{"class":565},[560,1364,638],{"class":606},[560,1366,616],{"class":565},[560,1368,619],{"class":599},[560,1370,622],{"class":565},[560,1372,647],{"class":586},[560,1374,628],{"class":565},[560,1376,1377,1379,1381],{"class":562,"line":652},[560,1378,655],{"class":565},[560,1380,570],{"class":569},[560,1382,592],{"class":565},[560,1384,1385],{"class":562,"line":662},[560,1386,665],{"emptyLinePlaceholder":516},[560,1388,1389,1391,1393],{"class":562,"line":668},[560,1390,566],{"class":565},[560,1392,673],{"class":569},[560,1394,592],{"class":565},[560,1396,1397,1399,1401,1403,1405,1407,1410,1412],{"class":562,"line":678},[560,1398,681],{"class":565},[560,1400,684],{"class":569},[560,1402,687],{"class":573},[560,1404,580],{"class":565},[560,1406,583],{"class":565},[560,1408,1409],{"class":586},"#333333",[560,1411,583],{"class":565},[560,1413,592],{"class":565},[560,1415,1416,1418,1420],{"class":562,"line":701},[560,1417,704],{"class":565},[560,1419,718],{"class":569},[560,1421,710],{"class":565},[560,1423,1424,1426,1428,1431,1433,1435,1438,1440],{"class":562,"line":713},[560,1425,704],{"class":565},[560,1427,707],{"class":569},[560,1429,1430],{"class":573}," :position",[560,1432,580],{"class":565},[560,1434,583],{"class":565},[560,1436,1437],{"class":586},"[0, 0, 10]",[560,1439,583],{"class":565},[560,1441,710],{"class":565},[560,1443,1445,1447,1449],{"class":1444,"line":723},[562,596],[560,1446,704],{"class":565},[560,1448,45],{"class":569},[560,1450,592],{"class":565},[560,1452,1453,1455,1457,1459,1461,1463,1466,1468],{"class":562,"line":728},[560,1454,776],{"class":565},[560,1456,217],{"class":569},[560,1458,736],{"class":573},[560,1460,580],{"class":565},[560,1462,583],{"class":565},[560,1464,1465],{"class":586},"[0.5, 0.5, 0.001]",[560,1467,583],{"class":565},[560,1469,592],{"class":565},[560,1471,1472,1474,1476],{"class":562,"line":750},[560,1473,787],{"class":565},[560,1475,800],{"class":569},[560,1477,710],{"class":565},[560,1479,1480,1482,1484],{"class":562,"line":554},[560,1481,808],{"class":565},[560,1483,217],{"class":569},[560,1485,592],{"class":565},[560,1487,1489,1491,1493],{"class":1488,"line":773},[562,596],[560,1490,818],{"class":565},[560,1492,45],{"class":569},[560,1494,592],{"class":565},[560,1496,1497,1499,1501],{"class":562,"line":784},[560,1498,828],{"class":565},[560,1500,684],{"class":569},[560,1502,592],{"class":565},[560,1504,1505,1507,1509],{"class":562,"line":795},[560,1506,655],{"class":565},[560,1508,673],{"class":569},[560,1510,592],{"class":565},[545,1512,845],{"id":844},[850,1514,1515,1525],{},[853,1516,1517],{},[856,1518,1519,1521,1523],{},[859,1520,861],{"align":920},[859,1522,864],{"align":920},[859,1524,867],{},[869,1526,1527,1545,1559,1573],{},[856,1528,1529,1534,1541],{},[874,1530,1531],{"align":920},[540,1532,1533],{},"autoUpdate",[874,1535,1536,1537,1540],{"align":920},"Whether the ",[540,1538,1539],{},"\u003CBillboard />"," should face the camera automatically on every frame.",[874,1542,1543],{},[540,1544,884],{},[856,1546,1547,1552,1555],{},[874,1548,1549],{"align":920},[540,1550,1551],{},"lockX",[874,1553,1554],{"align":920},"Whether to lock the x-axis.",[874,1556,1557],{},[540,1558,894],{},[856,1560,1561,1566,1569],{},[874,1562,1563],{"align":920},[540,1564,1565],{},"lockY",[874,1567,1568],{"align":920},"Whether to lock the y-axis.",[874,1570,1571],{},[540,1572,894],{},[856,1574,1575,1580,1583],{},[874,1576,1577],{"align":920},[540,1578,1579],{},"lockZ",[874,1581,1582],{"align":920},"Whether to lock the z-axis.",[874,1584,1585],{},[540,1586,894],{},[1272,1588,1589],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":508,"searchDepth":509,"depth":510,"links":1591},[1592,1593],{"id":547,"depth":510,"text":15},{"id":844,"depth":510,"text":845},"Make objects always face the camera automatically.",{},{"title":45,"description":1594},"wCDOC5MhR7Q22tA0BbCcbJXpmTRTkGj75EHC3nFIzjA",{"id":1599,"title":49,"body":1600,"description":2143,"extension":513,"links":514,"meta":2144,"navigation":516,"path":50,"seo":2145,"stem":51,"__hash__":2146},"docs/2.api/1.abstractions/camera-shake.md",{"type":501,"value":1601,"toc":2139},[1602,1607,1661,1663,1949,1988,1990,2137],[530,1603,1604],{},[1605,1606],"abstractions-camera-shake",{},[536,1608,1609,1612,1613,1617,1618,1622,1623,1626,1627,1617,1630,1633,1634,1637,1638,1617,1641,1617,1644,1647,1648,1651,1652,1069],{},[540,1610,1611],{},"\u003CCameraShake />"," is a component that adds ",[1614,1615,1616],"strong",{},"natural",", ",[1619,1620,1621],"em",{},"noise-driven motion"," to the ",[1614,1624,1625],{},"active camera",".\nIt offers ",[1614,1628,1629],{},"per-axis control",[1614,1631,1632],{},"adjustable intensity",", and ",[1619,1635,1636],{},"optional decay"," — perfect for ",[1619,1639,1640],{},"handheld feel",[1619,1642,1643],{},"footsteps",[1619,1645,1646],{},"impacts",", or ",[1619,1649,1650],{},"engine rumble"," — and is based on the ",[1063,1653,1656,1657,1660],{"href":1654,"rel":1655},"https://drei.docs.pmnd.rs/staging/camera-shake#camerashake",[1067],"Drei ",[540,1658,1659],{},"CameraShake"," component",[545,1662,15],{"id":547},[549,1664,1667],{"className":551,"code":1665,"highlights":1666,"language":556,"meta":508,"style":508},"\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",[510,728,795],[540,1668,1669,1689,1713,1731,1739,1743,1751,1769,1788,1799,1803,1858,1876,1896,1916,1924,1933,1941],{"__ignoreMap":508},[560,1670,1671,1673,1675,1677,1679,1681,1683,1685,1687],{"class":562,"line":509},[560,1672,566],{"class":565},[560,1674,570],{"class":569},[560,1676,574],{"class":573},[560,1678,577],{"class":573},[560,1680,580],{"class":565},[560,1682,583],{"class":565},[560,1684,587],{"class":586},[560,1686,583],{"class":565},[560,1688,592],{"class":565},[560,1690,1692,1694,1696,1699,1701,1703,1705,1707,1709,1711],{"class":1691,"line":510},[562,596],[560,1693,600],{"class":599},[560,1695,603],{"class":565},[560,1697,1698],{"class":606}," CameraShake",[560,1700,610],{"class":565},[560,1702,613],{"class":606},[560,1704,616],{"class":565},[560,1706,619],{"class":599},[560,1708,622],{"class":565},[560,1710,625],{"class":586},[560,1712,628],{"class":565},[560,1714,1715,1717,1719,1721,1723,1725,1727,1729],{"class":562,"line":631},[560,1716,600],{"class":599},[560,1718,603],{"class":565},[560,1720,638],{"class":606},[560,1722,616],{"class":565},[560,1724,619],{"class":599},[560,1726,622],{"class":565},[560,1728,647],{"class":586},[560,1730,628],{"class":565},[560,1732,1733,1735,1737],{"class":562,"line":652},[560,1734,655],{"class":565},[560,1736,570],{"class":569},[560,1738,592],{"class":565},[560,1740,1741],{"class":562,"line":662},[560,1742,665],{"emptyLinePlaceholder":516},[560,1744,1745,1747,1749],{"class":562,"line":668},[560,1746,566],{"class":565},[560,1748,673],{"class":569},[560,1750,592],{"class":565},[560,1752,1753,1755,1757,1759,1761,1763,1765,1767],{"class":562,"line":678},[560,1754,681],{"class":565},[560,1756,684],{"class":569},[560,1758,687],{"class":573},[560,1760,580],{"class":565},[560,1762,583],{"class":565},[560,1764,694],{"class":586},[560,1766,583],{"class":565},[560,1768,592],{"class":565},[560,1770,1771,1773,1775,1777,1779,1781,1784,1786],{"class":562,"line":701},[560,1772,704],{"class":565},[560,1774,707],{"class":569},[560,1776,1430],{"class":573},[560,1778,580],{"class":565},[560,1780,583],{"class":565},[560,1782,1783],{"class":586},"[0, 2, 6]",[560,1785,583],{"class":565},[560,1787,710],{"class":565},[560,1789,1790,1792,1794,1797],{"class":562,"line":713},[560,1791,704],{"class":565},[560,1793,718],{"class":569},[560,1795,1796],{"class":573}," make-default",[560,1798,710],{"class":565},[560,1800,1801],{"class":562,"line":723},[560,1802,665],{"emptyLinePlaceholder":516},[560,1804,1806,1808,1810,1813,1815,1817,1820,1822,1825,1827,1829,1832,1834,1837,1839,1841,1843,1845,1848,1850,1852,1854,1856],{"class":1805,"line":728},[562,596],[560,1807,704],{"class":565},[560,1809,1659],{"class":569},[560,1811,1812],{"class":573}," :intensity",[560,1814,580],{"class":565},[560,1816,583],{"class":565},[560,1818,1819],{"class":586},"1",[560,1821,583],{"class":565},[560,1823,1824],{"class":573}," :max-yaw",[560,1826,580],{"class":565},[560,1828,583],{"class":565},[560,1830,1831],{"class":586},"0.01",[560,1833,583],{"class":565},[560,1835,1836],{"class":573}," :max-pitch",[560,1838,580],{"class":565},[560,1840,583],{"class":565},[560,1842,1831],{"class":586},[560,1844,583],{"class":565},[560,1846,1847],{"class":573}," :max-roll",[560,1849,580],{"class":565},[560,1851,583],{"class":565},[560,1853,1831],{"class":586},[560,1855,583],{"class":565},[560,1857,710],{"class":565},[560,1859,1860,1862,1864,1866,1868,1870,1872,1874],{"class":562,"line":750},[560,1861,776],{"class":565},[560,1863,733],{"class":569},[560,1865,736],{"class":573},[560,1867,580],{"class":565},[560,1869,583],{"class":565},[560,1871,743],{"class":586},[560,1873,583],{"class":565},[560,1875,710],{"class":565},[560,1877,1878,1880,1882,1885,1887,1889,1892,1894],{"class":562,"line":554},[560,1879,776],{"class":565},[560,1881,779],{"class":569},[560,1883,1884],{"class":573}," :position-y",[560,1886,580],{"class":565},[560,1888,583],{"class":565},[560,1890,1891],{"class":586},"0.5",[560,1893,583],{"class":565},[560,1895,592],{"class":565},[560,1897,1898,1900,1902,1905,1907,1909,1912,1914],{"class":562,"line":773},[560,1899,787],{"class":565},[560,1901,790],{"class":569},[560,1903,1904],{"class":573}," :args",[560,1906,580],{"class":565},[560,1908,583],{"class":565},[560,1910,1911],{"class":586},"[1, 1, 1]",[560,1913,583],{"class":565},[560,1915,710],{"class":565},[560,1917,1918,1920,1922],{"class":562,"line":784},[560,1919,787],{"class":565},[560,1921,800],{"class":569},[560,1923,710],{"class":565},[560,1925,1927,1929,1931],{"class":1926,"line":795},[562,596],[560,1928,808],{"class":565},[560,1930,779],{"class":569},[560,1932,592],{"class":565},[560,1934,1935,1937,1939],{"class":562,"line":805},[560,1936,828],{"class":565},[560,1938,684],{"class":569},[560,1940,592],{"class":565},[560,1942,1943,1945,1947],{"class":562,"line":555},[560,1944,655],{"class":565},[560,1946,673],{"class":569},[560,1948,592],{"class":565},[1950,1951,1952,1973],"prose-note",{},[536,1953,1954,1956,1957,1962,1963,1966,1967,1972],{},[540,1955,1611],{}," is fully compatible with ",[1614,1958,1959],{},[540,1960,1961],{},"\u003COrbitControls />",".\nTo ensure it works ",[1619,1964,1965],{},"as expected",", make sure to add the ",[1614,1968,1969],{},[540,1970,1971],{},"make-default"," prop:",[549,1974,1976],{"className":551,"code":1975,"language":556,"meta":508,"style":508},"\u003COrbitControls make-default />\n",[540,1977,1978],{"__ignoreMap":508},[560,1979,1980,1982,1984,1986],{"class":562,"line":509},[560,1981,566],{"class":565},[560,1983,718],{"class":569},[560,1985,1796],{"class":573},[560,1987,710],{"class":565},[545,1989,845],{"id":844},[850,1991,1992,2002],{},[853,1993,1994],{},[856,1995,1996,1998,2000],{},[859,1997,861],{},[859,1999,864],{},[859,2001,867],{},[869,2003,2004,2018,2034,2052,2066,2080,2094,2109,2123],{},[856,2005,2006,2011,2014],{},[874,2007,2008],{},[540,2009,2010],{},"intensity",[874,2012,2013],{},"The intensity of the shake (0–1).",[874,2015,2016],{},[540,2017,1819],{},[856,2019,2020,2025,2030],{},[874,2021,2022],{},[540,2023,2024],{},"decay",[874,2026,881,2027,2029],{},[540,2028,884],{},", intensity decays over time.",[874,2031,2032],{},[540,2033,894],{},[856,2035,2036,2041,2047],{},[874,2037,2038],{},[540,2039,2040],{},"decayRate",[874,2042,2043,2044,2046],{},"How fast intensity changes when ",[540,2045,2024],{}," is enabled.",[874,2048,2049],{},[540,2050,2051],{},"0.65",[856,2053,2054,2059,2062],{},[874,2055,2056],{},[540,2057,2058],{},"maxYaw",[874,2060,2061],{},"Maximum yaw angle in radians.",[874,2063,2064],{},[540,2065,1831],{},[856,2067,2068,2073,2076],{},[874,2069,2070],{},[540,2071,2072],{},"maxPitch",[874,2074,2075],{},"Maximum pitch angle in radians.",[874,2077,2078],{},[540,2079,1831],{},[856,2081,2082,2087,2090],{},[874,2083,2084],{},[540,2085,2086],{},"maxRoll",[874,2088,2089],{},"Maximum roll angle in radians.",[874,2091,2092],{},[540,2093,1831],{},[856,2095,2096,2101,2104],{},[874,2097,2098],{},[540,2099,2100],{},"yawFrequency",[874,2102,2103],{},"Frequency of yaw oscillation.",[874,2105,2106],{},[540,2107,2108],{},"0.1",[856,2110,2111,2116,2119],{},[874,2112,2113],{},[540,2114,2115],{},"pitchFrequency",[874,2117,2118],{},"Frequency of pitch oscillation.",[874,2120,2121],{},[540,2122,2108],{},[856,2124,2125,2130,2133],{},[874,2126,2127],{},[540,2128,2129],{},"rollFrequency",[874,2131,2132],{},"Frequency of roll oscillation.",[874,2134,2135],{},[540,2136,2108],{},[1272,2138,1589],{},{"title":508,"searchDepth":509,"depth":510,"links":2140},[2141,2142],{"id":547,"depth":510,"text":15},{"id":844,"depth":510,"text":845},"Apply smooth camera shake to the active camera.",{},{"title":49,"description":2143},"_LkwoWvv_PX4M3TXVjPQu0NxYXzfoa26E2WQGUlWZPY",{"id":2148,"title":53,"body":2149,"description":7243,"extension":513,"links":514,"meta":7244,"navigation":516,"path":54,"seo":7245,"stem":55,"__hash__":7246},"docs/2.api/1.abstractions/decal.md",{"type":501,"value":2150,"toc":7208},[2151,2157,2239,2245,2247,2262,2717,2733,2737,2748,2911,2928,2931,2945,3000,3025,3029,3042,3047,3113,3120,3126,3143,3231,3236,3250,3325,3995,4000,4040,4053,4116,4119,4129,4215,4222,4242,4252,4255,4452,4464,4472,4487,4805,4809,4833,5196,5211,5231,5235,5251,5488,5494,5690,5696,5829,5838,5845,5901,6002,6007,6153,6158,6199,6203,6259,6263,6334,6338,6416,6423,6438,6479,6528,7205],[536,2152,2153,2156],{},[540,2154,2155],{},"\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.",[2158,2159,2160,2172,2185,2199,2206,2217,2229],"ul",{},[2161,2162,2163,2164,2167,2168,2171],"li",{},"🎨 Drop-in ",[1614,2165,2166],{},"editor UI"," via ",[540,2169,2170],{},"\u003CDecalDebugUI>"," — placement, rotate / scale / snap, tint, flip, layers, undo / redo, import / export.",[2161,2173,2174,2175,2167,2178,2184],{},"🛠 ",[1614,2176,2177],{},"Programmatic API",[1063,2179,2181],{"href":2180},"#programmatic-api-usedecaleditor",[540,2182,2183],{},"useDecalEditor()"," for custom panels and automation.",[2161,2186,2187,2188,2191,2192,2195,2196,1069],{},"🖼️ ",[1614,2189,2190],{},"Texture palette"," — pass an array of ",[540,2193,2194],{},"Texture"," to ",[540,2197,2198],{},":map",[2161,2200,2201,2202,2205],{},"🧩 ",[1614,2203,2204],{},"Custom material"," — override the default via the slot.",[2161,2207,2208,2209,2212,2213,2216],{},"💾 ",[1614,2210,2211],{},"Lossless JSON"," — ",[540,2214,2215],{},"v-model:data"," round-trips to plain JSON.",[2161,2218,2219,2220,2223,2224,2228],{},"⚡ ",[1614,2221,2222],{},"BVH-accelerated"," — auto-detected via ",[1063,2225,2226],{"href":332},[540,2227,331],{},"; 10–100× faster on dense meshes.",[2161,2230,2231,2232,2212,2235,2238],{},"📚 ",[1614,2233,2234],{},"Per-mesh stacking",[540,2236,2237],{},"zIndex"," with automatic polygon-offset.",[2240,2241,2242],"scene-wrapper",{},[2243,2244],"abstractions-decal",{},[545,2246,15],{"id":547},[536,2248,2249,2250,2252,2253,2256,2257,2259,2260,1069],{},"The minimal setup is a ",[540,2251,2155],{}," placed as a child of any ",[540,2254,2255],{},"\u003CTresMesh>",",\nwith a JSON list of stamped decals bound via ",[540,2258,2215],{}," and one or\nmore textures via ",[540,2261,2198],{},[549,2263,2265],{"className":551,"code":2264,"language":556,"meta":508,"style":508},"\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",[540,2266,2267,2287,2315,2333,2352,2356,2394,2398,2412,2417,2434,2462,2485,2511,2522,2538,2543,2548,2556,2560,2568,2577,2597,2606,2615,2624,2646,2690,2699,2708],{"__ignoreMap":508},[560,2268,2269,2271,2273,2275,2277,2279,2281,2283,2285],{"class":562,"line":509},[560,2270,566],{"class":565},[560,2272,570],{"class":569},[560,2274,574],{"class":573},[560,2276,577],{"class":573},[560,2278,580],{"class":565},[560,2280,583],{"class":565},[560,2282,587],{"class":586},[560,2284,583],{"class":565},[560,2286,592],{"class":565},[560,2288,2289,2291,2293,2296,2298,2300,2302,2305,2307,2309,2311,2313],{"class":562,"line":510},[560,2290,600],{"class":599},[560,2292,603],{"class":565},[560,2294,2295],{"class":606}," Decal",[560,2297,610],{"class":565},[560,2299,613],{"class":606},[560,2301,610],{"class":565},[560,2303,2304],{"class":606}," useTexture",[560,2306,616],{"class":565},[560,2308,619],{"class":599},[560,2310,622],{"class":565},[560,2312,625],{"class":586},[560,2314,628],{"class":565},[560,2316,2317,2319,2321,2323,2325,2327,2329,2331],{"class":562,"line":631},[560,2318,600],{"class":599},[560,2320,603],{"class":565},[560,2322,638],{"class":606},[560,2324,616],{"class":565},[560,2326,619],{"class":599},[560,2328,622],{"class":565},[560,2330,647],{"class":586},[560,2332,628],{"class":565},[560,2334,2335,2337,2339,2342,2344,2346,2348,2350],{"class":562,"line":652},[560,2336,600],{"class":599},[560,2338,603],{"class":565},[560,2340,2341],{"class":606}," reactive",[560,2343,616],{"class":565},[560,2345,619],{"class":599},[560,2347,622],{"class":565},[560,2349,556],{"class":586},[560,2351,628],{"class":565},[560,2353,2354],{"class":562,"line":662},[560,2355,665],{"emptyLinePlaceholder":516},[560,2357,2358,2361,2363,2366,2368,2371,2374,2377,2380,2383,2386,2389,2391],{"class":562,"line":668},[560,2359,2360],{"class":573},"const",[560,2362,603],{"class":565},[560,2364,2365],{"class":569}," state",[560,2367,1163],{"class":565},[560,2369,2370],{"class":606}," texture ",[560,2372,2373],{"class":565},"}",[560,2375,2376],{"class":565}," =",[560,2378,2304],{"class":2379},"s2Zo4",[560,2381,2382],{"class":606},"(",[560,2384,2385],{"class":565},"'",[560,2387,2388],{"class":586},"/textures/logo.png",[560,2390,2385],{"class":565},[560,2392,2393],{"class":606},")\n",[560,2395,2396],{"class":562,"line":678},[560,2397,665],{"emptyLinePlaceholder":516},[560,2399,2400,2402,2405,2407,2409],{"class":562,"line":701},[560,2401,2360],{"class":573},[560,2403,2404],{"class":606}," decals ",[560,2406,580],{"class":565},[560,2408,2341],{"class":2379},[560,2410,2411],{"class":606},"([\n",[560,2413,2414],{"class":562,"line":713},[560,2415,2416],{"class":565},"  {\n",[560,2418,2419,2422,2424,2426,2429,2431],{"class":562,"line":723},[560,2420,2421],{"class":569},"    id",[560,2423,1163],{"class":565},[560,2425,622],{"class":565},[560,2427,2428],{"class":586},"logo-1",[560,2430,2385],{"class":565},[560,2432,2433],{"class":565},",\n",[560,2435,2436,2439,2441,2444,2447,2449,2452,2454,2457,2460],{"class":562,"line":728},[560,2437,2438],{"class":569},"    position",[560,2440,1163],{"class":565},[560,2442,2443],{"class":606}," [",[560,2445,888],{"class":2446},"sbssI",[560,2448,610],{"class":565},[560,2450,2451],{"class":2446}," 0",[560,2453,610],{"class":565},[560,2455,2456],{"class":2446}," 0.5",[560,2458,2459],{"class":606},"]",[560,2461,2433],{"class":565},[560,2463,2464,2467,2469,2471,2473,2475,2477,2479,2481,2483],{"class":562,"line":750},[560,2465,2466],{"class":569},"    orientation",[560,2468,1163],{"class":565},[560,2470,2443],{"class":606},[560,2472,888],{"class":2446},[560,2474,610],{"class":565},[560,2476,2451],{"class":2446},[560,2478,610],{"class":565},[560,2480,2451],{"class":2446},[560,2482,2459],{"class":606},[560,2484,2433],{"class":565},[560,2486,2487,2490,2492,2494,2497,2499,2502,2504,2507,2509],{"class":562,"line":554},[560,2488,2489],{"class":569},"    size",[560,2491,1163],{"class":565},[560,2493,2443],{"class":606},[560,2495,2496],{"class":2446},"0.75",[560,2498,610],{"class":565},[560,2500,2501],{"class":2446}," 0.17",[560,2503,610],{"class":565},[560,2505,2506],{"class":2446}," 1",[560,2508,2459],{"class":606},[560,2510,2433],{"class":565},[560,2512,2513,2516,2518,2520],{"class":562,"line":773},[560,2514,2515],{"class":569},"    zIndex",[560,2517,1163],{"class":565},[560,2519,2451],{"class":2446},[560,2521,2433],{"class":565},[560,2523,2524,2527,2529,2531,2534,2536],{"class":562,"line":784},[560,2525,2526],{"class":569},"    map",[560,2528,1163],{"class":565},[560,2530,622],{"class":565},[560,2532,2533],{"class":586},"logo.png",[560,2535,2385],{"class":565},[560,2537,2433],{"class":565},[560,2539,2540],{"class":562,"line":795},[560,2541,2542],{"class":565},"  },\n",[560,2544,2545],{"class":562,"line":805},[560,2546,2547],{"class":606},"])\n",[560,2549,2550,2552,2554],{"class":562,"line":555},[560,2551,655],{"class":565},[560,2553,570],{"class":569},[560,2555,592],{"class":565},[560,2557,2558],{"class":562,"line":825},[560,2559,665],{"emptyLinePlaceholder":516},[560,2561,2562,2564,2566],{"class":562,"line":835},[560,2563,566],{"class":565},[560,2565,673],{"class":569},[560,2567,592],{"class":565},[560,2569,2571,2573,2575],{"class":562,"line":2570},21,[560,2572,681],{"class":565},[560,2574,684],{"class":569},[560,2576,592],{"class":565},[560,2578,2580,2582,2584,2586,2588,2590,2593,2595],{"class":562,"line":2579},22,[560,2581,704],{"class":565},[560,2583,707],{"class":569},[560,2585,1430],{"class":573},[560,2587,580],{"class":565},[560,2589,583],{"class":565},[560,2591,2592],{"class":586},"[2, 2, 3]",[560,2594,583],{"class":565},[560,2596,710],{"class":565},[560,2598,2600,2602,2604],{"class":562,"line":2599},23,[560,2601,704],{"class":565},[560,2603,718],{"class":569},[560,2605,710],{"class":565},[560,2607,2609,2611,2613],{"class":562,"line":2608},24,[560,2610,704],{"class":565},[560,2612,779],{"class":569},[560,2614,592],{"class":565},[560,2616,2618,2620,2622],{"class":562,"line":2617},25,[560,2619,776],{"class":565},[560,2621,790],{"class":569},[560,2623,710],{"class":565},[560,2625,2627,2629,2632,2635,2637,2639,2642,2644],{"class":562,"line":2626},26,[560,2628,776],{"class":565},[560,2630,2631],{"class":569},"TresMeshStandardMaterial",[560,2633,2634],{"class":573}," color",[560,2636,580],{"class":565},[560,2638,583],{"class":565},[560,2640,2641],{"class":586},"white",[560,2643,583],{"class":565},[560,2645,710],{"class":565},[560,2647,2649,2651,2653,2656,2658,2660,2663,2665,2668,2670,2672,2675,2677,2680,2682,2684,2686,2688],{"class":562,"line":2648},27,[560,2650,776],{"class":565},[560,2652,53],{"class":569},[560,2654,2655],{"class":573}," v-if",[560,2657,580],{"class":565},[560,2659,583],{"class":565},[560,2661,2662],{"class":586},"texture",[560,2664,583],{"class":565},[560,2666,2667],{"class":573}," v-model:data",[560,2669,580],{"class":565},[560,2671,583],{"class":565},[560,2673,2674],{"class":586},"decals",[560,2676,583],{"class":565},[560,2678,2679],{"class":573}," :map",[560,2681,580],{"class":565},[560,2683,583],{"class":565},[560,2685,2662],{"class":586},[560,2687,583],{"class":565},[560,2689,710],{"class":565},[560,2691,2693,2695,2697],{"class":562,"line":2692},28,[560,2694,818],{"class":565},[560,2696,779],{"class":569},[560,2698,592],{"class":565},[560,2700,2702,2704,2706],{"class":562,"line":2701},29,[560,2703,828],{"class":565},[560,2705,684],{"class":569},[560,2707,592],{"class":565},[560,2709,2711,2713,2715],{"class":562,"line":2710},30,[560,2712,655],{"class":565},[560,2714,673],{"class":569},[560,2716,592],{"class":565},[1950,2718,2719],{},[536,2720,2721,2722,2724,2725,2728,2729,2732],{},"The ",[540,2723,2215],{}," array is the ",[1614,2726,2727],{},"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 ",[540,2730,2731],{},".json"," file.",[545,2734,2736],{"id":2735},"multiple-textures-palette","Multiple textures (palette)",[536,2738,2739,2740,2742,2743,2747],{},"Pass an array to ",[540,2741,2198],{}," to give users a palette of textures to pick\nfrom. The array returned by ",[1063,2744,2745],{"href":154},[540,2746,153],{},"\nplugs in directly:",[549,2749,2751],{"className":551,"code":2750,"language":556,"meta":508,"style":508},"\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",[540,2752,2753,2773,2796,2800,2817,2828,2839,2850,2854,2862,2866,2874,2903],{"__ignoreMap":508},[560,2754,2755,2757,2759,2761,2763,2765,2767,2769,2771],{"class":562,"line":509},[560,2756,566],{"class":565},[560,2758,570],{"class":569},[560,2760,574],{"class":573},[560,2762,577],{"class":573},[560,2764,580],{"class":565},[560,2766,583],{"class":565},[560,2768,587],{"class":586},[560,2770,583],{"class":565},[560,2772,592],{"class":565},[560,2774,2775,2777,2779,2781,2783,2786,2788,2790,2792,2794],{"class":562,"line":510},[560,2776,600],{"class":599},[560,2778,603],{"class":565},[560,2780,2295],{"class":606},[560,2782,610],{"class":565},[560,2784,2785],{"class":606}," useTextures",[560,2787,616],{"class":565},[560,2789,619],{"class":599},[560,2791,622],{"class":565},[560,2793,625],{"class":586},[560,2795,628],{"class":565},[560,2797,2798],{"class":562,"line":631},[560,2799,665],{"emptyLinePlaceholder":516},[560,2801,2802,2804,2806,2809,2811,2813,2815],{"class":562,"line":652},[560,2803,2360],{"class":573},[560,2805,603],{"class":565},[560,2807,2808],{"class":606}," textures ",[560,2810,2373],{"class":565},[560,2812,2376],{"class":565},[560,2814,2785],{"class":2379},[560,2816,2411],{"class":606},[560,2818,2819,2822,2824,2826],{"class":562,"line":662},[560,2820,2821],{"class":565},"  '",[560,2823,2388],{"class":586},[560,2825,2385],{"class":565},[560,2827,2433],{"class":565},[560,2829,2830,2832,2835,2837],{"class":562,"line":668},[560,2831,2821],{"class":565},[560,2833,2834],{"class":586},"/textures/badge.png",[560,2836,2385],{"class":565},[560,2838,2433],{"class":565},[560,2840,2841,2843,2846,2848],{"class":562,"line":678},[560,2842,2821],{"class":565},[560,2844,2845],{"class":586},"/textures/sticker.png",[560,2847,2385],{"class":565},[560,2849,2433],{"class":565},[560,2851,2852],{"class":562,"line":701},[560,2853,2547],{"class":606},[560,2855,2856,2858,2860],{"class":562,"line":713},[560,2857,655],{"class":565},[560,2859,570],{"class":569},[560,2861,592],{"class":565},[560,2863,2864],{"class":562,"line":723},[560,2865,665],{"emptyLinePlaceholder":516},[560,2867,2868,2870,2872],{"class":562,"line":728},[560,2869,566],{"class":565},[560,2871,673],{"class":569},[560,2873,592],{"class":565},[560,2875,2876,2878,2880,2882,2884,2886,2888,2890,2892,2894,2896,2899,2901],{"class":562,"line":750},[560,2877,681],{"class":565},[560,2879,53],{"class":569},[560,2881,2667],{"class":573},[560,2883,580],{"class":565},[560,2885,583],{"class":565},[560,2887,2674],{"class":586},[560,2889,583],{"class":565},[560,2891,2679],{"class":573},[560,2893,580],{"class":565},[560,2895,583],{"class":565},[560,2897,2898],{"class":586},"textures",[560,2900,583],{"class":565},[560,2902,710],{"class":565},[560,2904,2905,2907,2909],{"class":562,"line":554},[560,2906,655],{"class":565},[560,2908,673],{"class":569},[560,2910,592],{"class":565},[536,2912,2913,2914,2212,2917,2919,2920,2923,2924,2927],{},"Each entry references its texture by ",[540,2915,2916],{},"name",[540,2918,2155],{}," auto-fills\n",[540,2921,2922],{},"texture.name"," from the URL filename when missing, so JSON ",[540,2925,2926],{},"map","\nfields round-trip cleanly.",[545,2929,2204],{"id":2930},"custom-material",[536,2932,2933,2934,2937,2938,2433,2941,2944],{},"The default material is ",[540,2935,2936],{},"MeshBasicMaterial",". Override it via the slot\nto plug in any Three.js material — ",[540,2939,2940],{},"MeshStandardMaterial",[540,2942,2943],{},"MeshPhysicalMaterial",", or a custom shader.",[549,2946,2948],{"className":551,"code":2947,"language":556,"meta":508,"style":508},"\u003CDecal v-model:data=\"decals\" :map=\"texture\">\n  \u003CTresMeshStandardMaterial :transparent=\"true\" :polygon-offset=\"true\" />\n\u003C/Decal>\n",[540,2949,2950,2987,2992],{"__ignoreMap":508},[560,2951,2952,2954,2956,2959,2961,2964,2966,2968,2970,2972,2975,2977,2979,2981,2983,2985],{"class":562,"line":509},[560,2953,566],{"class":565},[560,2955,53],{"class":569},[560,2957,2958],{"class":573}," v-model",[560,2960,1163],{"class":565},[560,2962,2963],{"class":573},"data",[560,2965,580],{"class":565},[560,2967,583],{"class":565},[560,2969,2674],{"class":606},[560,2971,583],{"class":565},[560,2973,2974],{"class":565}," :",[560,2976,2926],{"class":573},[560,2978,580],{"class":565},[560,2980,583],{"class":565},[560,2982,2662],{"class":606},[560,2984,583],{"class":565},[560,2986,592],{"class":565},[560,2988,2989],{"class":562,"line":510},[560,2990,2991],{"class":606},"  \u003CTresMeshStandardMaterial :transparent=\"true\" :polygon-offset=\"true\" />\n",[560,2993,2994,2996,2998],{"class":562,"line":631},[560,2995,655],{"class":565},[560,2997,53],{"class":569},[560,2999,592],{"class":565},[1950,3001,3002],{},[536,3003,3004,3005,3008,3009,3012,3013,3008,3016,3019,3020,2433,3022,3024],{},"Keep ",[540,3006,3007],{},"transparent: true"," and ",[540,3010,3011],{},"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 ",[540,3014,3015],{},".color",[540,3017,3018],{},".opacity"," (",[540,3021,2936],{},[540,3023,2940],{},", …) — bespoke shader materials are skipped\nsilently.",[545,3026,3028],{"id":3027},"stacking-decals-z-layering","Stacking decals (z-layering)",[536,3030,3031,3032,3034,3035,3038,3039,1069],{},"Each decal has a ",[540,3033,2237],{}," controlling its draw order on the parent\nmesh. Higher = on top. The component handles z-fighting via\n",[540,3036,3037],{},"polygonOffset"," automatically — but if you stack many decals near\nparallel surfaces and still see flicker, raise ",[540,3040,3041],{},"layerGap",[2240,3043,3044],{},[3045,3046],"abstractions-decal-stacking",{},[549,3048,3050],{"className":551,"code":3049,"language":556,"meta":508,"style":508},"\u003CDecal\n  v-model:data=\"decals\"\n  :map=\"textures\"\n  :layer-gap=\"0.002\"\n/>\n",[540,3051,3052,3059,3077,3092,3108],{"__ignoreMap":508},[560,3053,3054,3056],{"class":562,"line":509},[560,3055,566],{"class":565},[560,3057,3058],{"class":569},"Decal\n",[560,3060,3061,3064,3066,3068,3070,3072,3074],{"class":562,"line":510},[560,3062,3063],{"class":573},"  v-model",[560,3065,1163],{"class":565},[560,3067,2963],{"class":573},[560,3069,580],{"class":565},[560,3071,583],{"class":565},[560,3073,2674],{"class":606},[560,3075,3076],{"class":565},"\"\n",[560,3078,3079,3082,3084,3086,3088,3090],{"class":562,"line":631},[560,3080,3081],{"class":565},"  :",[560,3083,2926],{"class":573},[560,3085,580],{"class":565},[560,3087,583],{"class":565},[560,3089,2898],{"class":606},[560,3091,3076],{"class":565},[560,3093,3094,3096,3099,3101,3103,3106],{"class":562,"line":652},[560,3095,3081],{"class":565},[560,3097,3098],{"class":573},"layer-gap",[560,3100,580],{"class":565},[560,3102,583],{"class":565},[560,3104,3105],{"class":2446},"0.002",[560,3107,3076],{"class":565},[560,3109,3110],{"class":562,"line":662},[560,3111,3112],{"class":606},"/>\n",[536,3114,3115,3116,3119],{},"zIndex stacks are ",[1614,3117,3118],{},"per-mesh"," — two decals on different meshes never\ncompete for the same layer slot.",[545,3121,3123,3124],{"id":3122},"editable-mode-decaldebugui","Editable mode + ",[540,3125,2170],{},[536,3127,3128,3129,3132,3133,3135,3136,3139,3140,1069],{},"Add the ",[540,3130,3131],{},"editable"," prop to mount the interactive editor, then pair it\nwith ",[540,3134,2170],{}," — a full in-canvas editor that ships as a drop-in\nHTML overlay sitting ",[1614,3137,3138],{},"outside"," ",[540,3141,3142],{},"\u003CTresCanvas>",[3144,3145,3146,3160,3181],"prose-warning",{},[536,3147,3148,3150,3151,3154,3155,3157,3158,1069],{},[540,3149,2170],{}," needs its stylesheet — import it ",[1614,3152,3153],{},"once"," at your app\nentry. ",[540,3156,2155],{}," itself is style-less, so this is only needed when you\nmount ",[540,3159,2170],{},[549,3161,3163],{"className":1131,"code":3162,"language":587,"meta":508,"style":508},"// Vite / Vue — in main.ts\nimport '@tresjs/cientos/styles.css'\n",[540,3164,3165,3170],{"__ignoreMap":508},[560,3166,3167],{"class":562,"line":509},[560,3168,3169],{"class":1154},"// Vite / Vue — in main.ts\n",[560,3171,3172,3174,3176,3179],{"class":562,"line":510},[560,3173,600],{"class":599},[560,3175,622],{"class":565},[560,3177,3178],{"class":586},"@tresjs/cientos/styles.css",[560,3180,628],{"class":565},[549,3182,3184],{"className":1131,"code":3183,"language":587,"meta":508,"style":508},"// Nuxt — in nuxt.config.ts\nexport default defineNuxtConfig({\n  css: ['@tresjs/cientos/styles.css'],\n})\n",[540,3185,3186,3191,3206,3225],{"__ignoreMap":508},[560,3187,3188],{"class":562,"line":509},[560,3189,3190],{"class":1154},"// Nuxt — in nuxt.config.ts\n",[560,3192,3193,3195,3198,3201,3203],{"class":562,"line":510},[560,3194,1139],{"class":599},[560,3196,3197],{"class":599}," default",[560,3199,3200],{"class":2379}," defineNuxtConfig",[560,3202,2382],{"class":606},[560,3204,3205],{"class":565},"{\n",[560,3207,3208,3211,3213,3215,3217,3219,3221,3223],{"class":562,"line":631},[560,3209,3210],{"class":569},"  css",[560,3212,1163],{"class":565},[560,3214,2443],{"class":606},[560,3216,2385],{"class":565},[560,3218,3178],{"class":586},[560,3220,2385],{"class":565},[560,3222,2459],{"class":606},[560,3224,2433],{"class":565},[560,3226,3227,3229],{"class":562,"line":652},[560,3228,2373],{"class":565},[560,3230,2393],{"class":606},[2240,3232,3233],{},[3234,3235],"abstractions-decal-editable",{},[536,3237,3238,3239,3242,3243,3246,3247,1069],{},"Three panels: a floating ",[1614,3240,3241],{},"handle"," anchored to the editing decal, a\nbottom ",[1614,3244,3245],{},"dock"," (texture picker + edit tools), a right-side ",[1614,3248,3249],{},"layer\npanel",[2158,3251,3252,3262,3267,3273,3286,3291,3296,3302,3308,3314,3320],{},[2161,3253,3254,3257,3258,3261],{},[1614,3255,3256],{},"Floating handle"," (rotate + scale + snap + live ",[540,3259,3260],{},"scale% · rotation° · L\u003Cn>"," badge)",[2161,3263,3264],{},[1614,3265,3266],{},"Color tint & opacity",[2161,3268,3269,3272],{},[1614,3270,3271],{},"Mirror"," (flip X / flip Y)",[2161,3274,3275,3019,3278,3281,3282,3285],{},[1614,3276,3277],{},"Layer controls",[540,3279,3280],{},"L+"," / ",[540,3283,3284],{},"L-",")",[2161,3287,3288],{},[1614,3289,3290],{},"Visibility toggle",[2161,3292,3293],{},[1614,3294,3295],{},"Per-row remove",[2161,3297,3298,3301],{},[1614,3299,3300],{},"Layer panel"," (mesh-grouped, drag-to-reorder)",[2161,3303,3304,3307],{},[1614,3305,3306],{},"Texture picker"," (drag or click-to-arm)",[2161,3309,3310,3313],{},[1614,3311,3312],{},"Mode badge"," (placing / editing status)",[2161,3315,3316,3319],{},[1614,3317,3318],{},"Undo / Redo"," buttons",[2161,3321,3322,3319],{},[1614,3323,3324],{},"Import / Export",[549,3326,3328],{"className":551,"code":3327,"language":556,"meta":508,"style":508},"\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",[540,3329,3330,3350,3381,3408,3426,3454,3458,3493,3497,3532,3544,3555,3561,3565,3604,3644,3652,3656,3664,3709,3713,3721,3740,3748,3752,3783,3791,3809,3853,3861,3865,3896,3917,3936,3968,3977,3986],{"__ignoreMap":508},[560,3331,3332,3334,3336,3338,3340,3342,3344,3346,3348],{"class":562,"line":509},[560,3333,566],{"class":565},[560,3335,570],{"class":569},[560,3337,574],{"class":573},[560,3339,577],{"class":573},[560,3341,580],{"class":565},[560,3343,583],{"class":565},[560,3345,587],{"class":586},[560,3347,583],{"class":565},[560,3349,592],{"class":565},[560,3351,3352,3354,3356,3358,3360,3363,3365,3367,3369,3371,3373,3375,3377,3379],{"class":562,"line":510},[560,3353,600],{"class":599},[560,3355,603],{"class":565},[560,3357,2295],{"class":606},[560,3359,610],{"class":565},[560,3361,3362],{"class":606}," DecalDebugUI",[560,3364,610],{"class":565},[560,3366,613],{"class":606},[560,3368,610],{"class":565},[560,3370,2785],{"class":606},[560,3372,616],{"class":565},[560,3374,619],{"class":599},[560,3376,622],{"class":565},[560,3378,625],{"class":586},[560,3380,628],{"class":565},[560,3382,3383,3385,3388,3390,3393,3395,3398,3400,3402,3404,3406],{"class":562,"line":631},[560,3384,600],{"class":599},[560,3386,3387],{"class":599}," type",[560,3389,603],{"class":565},[560,3391,3392],{"class":606}," DecalEditorSession",[560,3394,610],{"class":565},[560,3396,3397],{"class":606}," DecalJsonEntry",[560,3399,616],{"class":565},[560,3401,619],{"class":599},[560,3403,622],{"class":565},[560,3405,625],{"class":586},[560,3407,628],{"class":565},[560,3409,3410,3412,3414,3416,3418,3420,3422,3424],{"class":562,"line":652},[560,3411,600],{"class":599},[560,3413,603],{"class":565},[560,3415,638],{"class":606},[560,3417,616],{"class":565},[560,3419,619],{"class":599},[560,3421,622],{"class":565},[560,3423,647],{"class":586},[560,3425,628],{"class":565},[560,3427,3428,3430,3432,3435,3437,3439,3441,3444,3446,3448,3450,3452],{"class":562,"line":662},[560,3429,600],{"class":599},[560,3431,603],{"class":565},[560,3433,3434],{"class":606}," computed",[560,3436,610],{"class":565},[560,3438,2341],{"class":606},[560,3440,610],{"class":565},[560,3442,3443],{"class":606}," shallowRef",[560,3445,616],{"class":565},[560,3447,619],{"class":599},[560,3449,622],{"class":565},[560,3451,556],{"class":586},[560,3453,628],{"class":565},[560,3455,3456],{"class":562,"line":668},[560,3457,665],{"emptyLinePlaceholder":516},[560,3459,3460,3462,3464,3466,3468,3470,3472,3475,3477,3480,3482,3484,3486,3489,3491],{"class":562,"line":678},[560,3461,2360],{"class":573},[560,3463,603],{"class":565},[560,3465,2808],{"class":606},[560,3467,2373],{"class":565},[560,3469,2376],{"class":565},[560,3471,2785],{"class":2379},[560,3473,3474],{"class":606},"([",[560,3476,2385],{"class":565},[560,3478,3479],{"class":586},"/textures/a.png",[560,3481,2385],{"class":565},[560,3483,610],{"class":565},[560,3485,622],{"class":565},[560,3487,3488],{"class":586},"/textures/b.png",[560,3490,2385],{"class":565},[560,3492,2547],{"class":606},[560,3494,3495],{"class":562,"line":701},[560,3496,665],{"emptyLinePlaceholder":516},[560,3498,3499,3501,3504,3506,3508,3510,3513,3515,3518,3520,3522,3525,3528,3530],{"class":562,"line":713},[560,3500,2360],{"class":573},[560,3502,3503],{"class":606}," layout ",[560,3505,580],{"class":565},[560,3507,2341],{"class":2379},[560,3509,566],{"class":565},[560,3511,3512],{"class":1145},"Record",[560,3514,566],{"class":565},[560,3516,3517],{"class":1145},"string",[560,3519,610],{"class":565},[560,3521,3397],{"class":1145},[560,3523,3524],{"class":606},"[]",[560,3526,3527],{"class":565},">>",[560,3529,2382],{"class":606},[560,3531,3205],{"class":565},[560,3533,3534,3537,3539,3542],{"class":562,"line":723},[560,3535,3536],{"class":569},"  cube",[560,3538,1163],{"class":565},[560,3540,3541],{"class":606}," []",[560,3543,2433],{"class":565},[560,3545,3546,3549,3551,3553],{"class":562,"line":728},[560,3547,3548],{"class":569},"  sphere",[560,3550,1163],{"class":565},[560,3552,3541],{"class":606},[560,3554,2433],{"class":565},[560,3556,3557,3559],{"class":562,"line":750},[560,3558,2373],{"class":565},[560,3560,2393],{"class":606},[560,3562,3563],{"class":562,"line":554},[560,3564,665],{"emptyLinePlaceholder":516},[560,3566,3567,3569,3572,3574,3576,3579,3582,3584,3586,3588,3591,3594,3597,3599,3602],{"class":562,"line":773},[560,3568,2360],{"class":573},[560,3570,3571],{"class":606}," decalRef ",[560,3573,580],{"class":565},[560,3575,3443],{"class":2379},[560,3577,3578],{"class":565},"\u003C{",[560,3580,3581],{"class":569}," editor",[560,3583,1163],{"class":565},[560,3585,3392],{"class":1145},[560,3587,616],{"class":565},[560,3589,3590],{"class":565}," |",[560,3592,3593],{"class":1145}," null",[560,3595,3596],{"class":565},">",[560,3598,2382],{"class":606},[560,3600,3601],{"class":565},"null",[560,3603,2393],{"class":606},[560,3605,3606,3608,3611,3613,3615,3617,3620,3623,3626,3628,3631,3634,3637,3640,3642],{"class":562,"line":784},[560,3607,2360],{"class":573},[560,3609,3610],{"class":606}," session ",[560,3612,580],{"class":565},[560,3614,3434],{"class":2379},[560,3616,2382],{"class":606},[560,3618,3619],{"class":565},"()",[560,3621,3622],{"class":573}," =>",[560,3624,3625],{"class":606}," decalRef",[560,3627,1069],{"class":565},[560,3629,3630],{"class":606},"value",[560,3632,3633],{"class":565},"?.",[560,3635,3636],{"class":606},"editor ",[560,3638,3639],{"class":565},"??",[560,3641,3593],{"class":565},[560,3643,2393],{"class":606},[560,3645,3646,3648,3650],{"class":562,"line":795},[560,3647,655],{"class":565},[560,3649,570],{"class":569},[560,3651,592],{"class":565},[560,3653,3654],{"class":562,"line":805},[560,3655,665],{"emptyLinePlaceholder":516},[560,3657,3658,3660,3662],{"class":562,"line":555},[560,3659,566],{"class":565},[560,3661,673],{"class":569},[560,3663,592],{"class":565},[560,3665,3666,3668,3671,3674,3676,3678,3681,3683,3686,3688,3690,3693,3695,3698,3700,3702,3705,3707],{"class":562,"line":825},[560,3667,681],{"class":565},[560,3669,3670],{"class":569},"DecalDebugUI",[560,3672,3673],{"class":573}," :session",[560,3675,580],{"class":565},[560,3677,583],{"class":565},[560,3679,3680],{"class":586},"session",[560,3682,583],{"class":565},[560,3684,3685],{"class":573}," :textures",[560,3687,580],{"class":565},[560,3689,583],{"class":565},[560,3691,3692],{"class":586},"textures ?? []",[560,3694,583],{"class":565},[560,3696,3697],{"class":573}," :data",[560,3699,580],{"class":565},[560,3701,583],{"class":565},[560,3703,3704],{"class":586},"layout",[560,3706,583],{"class":565},[560,3708,710],{"class":565},[560,3710,3711],{"class":562,"line":835},[560,3712,665],{"emptyLinePlaceholder":516},[560,3714,3715,3717,3719],{"class":562,"line":2570},[560,3716,681],{"class":565},[560,3718,684],{"class":569},[560,3720,592],{"class":565},[560,3722,3723,3725,3727,3729,3731,3733,3736,3738],{"class":562,"line":2579},[560,3724,704],{"class":565},[560,3726,707],{"class":569},[560,3728,1430],{"class":573},[560,3730,580],{"class":565},[560,3732,583],{"class":565},[560,3734,3735],{"class":586},"[2, 2, 4]",[560,3737,583],{"class":565},[560,3739,710],{"class":565},[560,3741,3742,3744,3746],{"class":562,"line":2599},[560,3743,704],{"class":565},[560,3745,718],{"class":569},[560,3747,710],{"class":565},[560,3749,3750],{"class":562,"line":2608},[560,3751,665],{"emptyLinePlaceholder":516},[560,3753,3754,3756,3758,3761,3763,3765,3768,3770,3772,3774,3776,3779,3781],{"class":562,"line":2617},[560,3755,704],{"class":565},[560,3757,779],{"class":569},[560,3759,3760],{"class":573}," name",[560,3762,580],{"class":565},[560,3764,583],{"class":565},[560,3766,3767],{"class":586},"cube",[560,3769,583],{"class":565},[560,3771,1430],{"class":573},[560,3773,580],{"class":565},[560,3775,583],{"class":565},[560,3777,3778],{"class":586},"[-1.2, 0, 0]",[560,3780,583],{"class":565},[560,3782,592],{"class":565},[560,3784,3785,3787,3789],{"class":562,"line":2626},[560,3786,776],{"class":565},[560,3788,790],{"class":569},[560,3790,710],{"class":565},[560,3792,3793,3795,3797,3799,3801,3803,3805,3807],{"class":562,"line":2648},[560,3794,776],{"class":565},[560,3796,2631],{"class":569},[560,3798,2634],{"class":573},[560,3800,580],{"class":565},[560,3802,583],{"class":565},[560,3804,2641],{"class":586},[560,3806,583],{"class":565},[560,3808,710],{"class":565},[560,3810,3811,3813,3815,3818,3820,3822,3825,3827,3829,3831,3833,3836,3838,3840,3842,3844,3846,3848,3851],{"class":562,"line":2692},[560,3812,776],{"class":565},[560,3814,53],{"class":569},[560,3816,3817],{"class":573}," ref",[560,3819,580],{"class":565},[560,3821,583],{"class":565},[560,3823,3824],{"class":586},"decalRef",[560,3826,583],{"class":565},[560,3828,2667],{"class":573},[560,3830,580],{"class":565},[560,3832,583],{"class":565},[560,3834,3835],{"class":586},"layout.cube",[560,3837,583],{"class":565},[560,3839,2679],{"class":573},[560,3841,580],{"class":565},[560,3843,583],{"class":565},[560,3845,2898],{"class":586},[560,3847,583],{"class":565},[560,3849,3850],{"class":573}," editable",[560,3852,710],{"class":565},[560,3854,3855,3857,3859],{"class":562,"line":2701},[560,3856,818],{"class":565},[560,3858,779],{"class":569},[560,3860,592],{"class":565},[560,3862,3863],{"class":562,"line":2710},[560,3864,665],{"emptyLinePlaceholder":516},[560,3866,3868,3870,3872,3874,3876,3878,3881,3883,3885,3887,3889,3892,3894],{"class":562,"line":3867},31,[560,3869,704],{"class":565},[560,3871,779],{"class":569},[560,3873,3760],{"class":573},[560,3875,580],{"class":565},[560,3877,583],{"class":565},[560,3879,3880],{"class":586},"sphere",[560,3882,583],{"class":565},[560,3884,1430],{"class":573},[560,3886,580],{"class":565},[560,3888,583],{"class":565},[560,3890,3891],{"class":586},"[1.2, 0, 0]",[560,3893,583],{"class":565},[560,3895,592],{"class":565},[560,3897,3899,3901,3904,3906,3908,3910,3913,3915],{"class":562,"line":3898},32,[560,3900,776],{"class":565},[560,3902,3903],{"class":569},"TresSphereGeometry",[560,3905,1904],{"class":573},[560,3907,580],{"class":565},[560,3909,583],{"class":565},[560,3911,3912],{"class":586},"[0.7]",[560,3914,583],{"class":565},[560,3916,710],{"class":565},[560,3918,3920,3922,3924,3926,3928,3930,3932,3934],{"class":562,"line":3919},33,[560,3921,776],{"class":565},[560,3923,2631],{"class":569},[560,3925,2634],{"class":573},[560,3927,580],{"class":565},[560,3929,583],{"class":565},[560,3931,2641],{"class":586},[560,3933,583],{"class":565},[560,3935,710],{"class":565},[560,3937,3939,3941,3943,3945,3947,3949,3952,3954,3956,3958,3960,3962,3964,3966],{"class":562,"line":3938},34,[560,3940,776],{"class":565},[560,3942,53],{"class":569},[560,3944,2667],{"class":573},[560,3946,580],{"class":565},[560,3948,583],{"class":565},[560,3950,3951],{"class":586},"layout.sphere",[560,3953,583],{"class":565},[560,3955,2679],{"class":573},[560,3957,580],{"class":565},[560,3959,583],{"class":565},[560,3961,2898],{"class":586},[560,3963,583],{"class":565},[560,3965,3850],{"class":573},[560,3967,710],{"class":565},[560,3969,3971,3973,3975],{"class":562,"line":3970},35,[560,3972,818],{"class":565},[560,3974,779],{"class":569},[560,3976,592],{"class":565},[560,3978,3980,3982,3984],{"class":562,"line":3979},36,[560,3981,828],{"class":565},[560,3983,684],{"class":569},[560,3985,592],{"class":565},[560,3987,3989,3991,3993],{"class":562,"line":3988},37,[560,3990,655],{"class":565},[560,3992,673],{"class":569},[560,3994,592],{"class":565},[3996,3997,3999],"h3",{"id":3998},"how-the-wiring-works","How the wiring works",[2158,4001,4002,4013,4022,4031],{},[2161,4003,4004,4007,4008,4010,4011,1069],{},[540,4005,4006],{},"v-model:data=\"layout.cube\""," — each ",[540,4009,2155],{}," owns one slice of the\nlayout object. The slice's key matches the parent mesh's ",[540,4012,2916],{},[2161,4014,4015,4018,4019,4021],{},[540,4016,4017],{},"ref=\"decalRef\""," — grab a reference to any ",[540,4020,2155],{}," in the canvas;\nthe session is canvas-shared so it doesn't matter which.",[2161,4023,4024,4027,4028,4030],{},[540,4025,4026],{},"session = decalRef.value?.editor"," — the editor session powers\n",[540,4029,2170],{},". Pass it through.",[2161,4032,4033,4036,4037,4039],{},[540,4034,4035],{},":data=\"layout\""," on ",[540,4038,2170],{}," — the full mesh-keyed layout, so\nthe overlay can render the layer panel and route imports back to each\nDecal by name.",[1950,4041,4042],{},[536,4043,4044,4045,4048,4049,4052],{},"The overlay is full-viewport (",[540,4046,4047],{},"position: fixed; inset: 0",") by default.\nWhen embedding inside a bounded stage (docs, modal, sidebar preview),\npass ",[540,4050,4051],{},"contained"," so the overlay positions itself absolutely against\nthe nearest positioned ancestor instead.",[549,4054,4056],{"className":551,"code":4055,"language":556,"meta":508,"style":508},"\u003Cdiv style=\"position: relative; height: 500px;\">\n  \u003CDecalDebugUI contained ... />\n  \u003CTresCanvas>...\u003C/TresCanvas>\n\u003C/div>\n",[540,4057,4058,4098,4103,4108],{"__ignoreMap":508},[560,4059,4060,4062,4065,4068,4070,4072,4076,4078,4081,4084,4087,4089,4092,4094,4096],{"class":562,"line":509},[560,4061,566],{"class":565},[560,4063,4064],{"class":569},"div",[560,4066,4067],{"class":573}," style",[560,4069,580],{"class":565},[560,4071,583],{"class":565},[560,4073,4075],{"class":4074},"sqsOY","position",[560,4077,1163],{"class":565},[560,4079,4080],{"class":606}," relative",[560,4082,4083],{"class":565},";",[560,4085,4086],{"class":4074}," height",[560,4088,1163],{"class":565},[560,4090,4091],{"class":2446}," 500px",[560,4093,4083],{"class":565},[560,4095,583],{"class":565},[560,4097,592],{"class":565},[560,4099,4100],{"class":562,"line":510},[560,4101,4102],{"class":606},"  \u003CDecalDebugUI contained ... />\n",[560,4104,4105],{"class":562,"line":631},[560,4106,4107],{"class":606},"  \u003CTresCanvas>...\u003C/TresCanvas>\n",[560,4109,4110,4112,4114],{"class":562,"line":652},[560,4111,655],{"class":565},[560,4113,4064],{"class":569},[560,4115,592],{"class":565},[545,4117,3324],{"id":4118},"import-export",[536,4120,4121,4122,4125,4126,4128],{},"The Export button in the dock auto-downloads the current layout as\n",[540,4123,4124],{},"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",[540,4127,2155],{}," automatically — no extra host code needed.",[549,4130,4132],{"className":551,"code":4131,"language":556,"meta":508,"style":508},"\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",[540,4133,4134,4139,4170,4174,4179],{"__ignoreMap":508},[560,4135,4136],{"class":562,"line":509},[560,4137,4138],{"class":1154},"\u003C!-- Custom filename -->\n",[560,4140,4141,4143,4145,4147,4150,4152,4155,4158,4160,4162,4165,4168],{"class":562,"line":510},[560,4142,566],{"class":565},[560,4144,3670],{"class":569},[560,4146,2974],{"class":565},[560,4148,4149],{"class":573},"export-filename",[560,4151,580],{"class":565},[560,4153,4154],{"class":565},"\"`${",[560,4156,4157],{"class":606},"sceneName",[560,4159,2373],{"class":565},[560,4161,2731],{"class":586},[560,4163,4164],{"class":565},"`\"",[560,4166,4167],{"class":565}," ...",[560,4169,710],{"class":565},[560,4171,4172],{"class":562,"line":631},[560,4173,665],{"emptyLinePlaceholder":516},[560,4175,4176],{"class":562,"line":652},[560,4177,4178],{"class":1154},"\u003C!-- Disable the built-in download — handle export yourself -->\n",[560,4180,4181,4183,4185,4187,4189,4191,4193,4195,4197,4200,4202,4204,4206,4209,4211,4213],{"class":562,"line":662},[560,4182,566],{"class":565},[560,4184,3670],{"class":569},[560,4186,2974],{"class":565},[560,4188,4149],{"class":573},[560,4190,580],{"class":565},[560,4192,583],{"class":565},[560,4194,3601],{"class":565},[560,4196,583],{"class":565},[560,4198,4199],{"class":565}," @",[560,4201,1139],{"class":573},[560,4203,580],{"class":565},[560,4205,583],{"class":565},[560,4207,4208],{"class":606},"postToBackend",[560,4210,583],{"class":565},[560,4212,4167],{"class":565},[560,4214,710],{"class":565},[545,4216,4218,4219,3285],{"id":4217},"targeting-a-loaded-model-glb","Targeting a loaded model (",[540,4220,4221],{},".glb",[536,4223,4224,4225,4227,4228,4234,4235,4238,4239,4241],{},"A ",[540,4226,2155],{}," can be a ",[1614,4229,4230,4231],{},"direct child of ",[540,4232,4233],{},"\u003Cprimitive>",". Auto-resolution\nwalks one step up the scene graph and only accepts a ",[540,4236,4237],{},"Mesh"," — so the\nbehaviour depends on what the ",[540,4240,4233],{}," wraps.",[3996,4243,4245,4246,4249,4250],{"id":4244},"when-object-is-a-mesh","When ",[540,4247,4248],{},":object"," is a ",[540,4251,4237],{},[536,4253,4254],{},"The decal auto-resolves the wrapped mesh as its target. This is the\nsimplest option for a single-mesh asset:",[549,4256,4258],{"className":551,"code":4257,"language":556,"meta":508,"style":508},"\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",[540,4259,4260,4280,4303,4307,4348,4353,4361,4365,4373,4405,4436,4444],{"__ignoreMap":508},[560,4261,4262,4264,4266,4268,4270,4272,4274,4276,4278],{"class":562,"line":509},[560,4263,566],{"class":565},[560,4265,570],{"class":569},[560,4267,574],{"class":573},[560,4269,577],{"class":573},[560,4271,580],{"class":565},[560,4273,583],{"class":565},[560,4275,587],{"class":586},[560,4277,583],{"class":565},[560,4279,592],{"class":565},[560,4281,4282,4284,4286,4288,4290,4293,4295,4297,4299,4301],{"class":562,"line":510},[560,4283,600],{"class":599},[560,4285,603],{"class":565},[560,4287,2295],{"class":606},[560,4289,610],{"class":565},[560,4291,4292],{"class":606}," useGLTF",[560,4294,616],{"class":565},[560,4296,619],{"class":599},[560,4298,622],{"class":565},[560,4300,625],{"class":586},[560,4302,628],{"class":565},[560,4304,4305],{"class":562,"line":631},[560,4306,665],{"emptyLinePlaceholder":516},[560,4308,4309,4311,4313,4316,4318,4320,4322,4324,4326,4329,4331,4333,4335,4338,4340,4344,4346],{"class":562,"line":652},[560,4310,2360],{"class":573},[560,4312,603],{"class":565},[560,4314,4315],{"class":606}," nodes ",[560,4317,2373],{"class":565},[560,4319,2376],{"class":565},[560,4321,4292],{"class":2379},[560,4323,2382],{"class":606},[560,4325,2385],{"class":565},[560,4327,4328],{"class":586},"/models/helmet.glb",[560,4330,2385],{"class":565},[560,4332,610],{"class":565},[560,4334,603],{"class":565},[560,4336,4337],{"class":569}," draco",[560,4339,1163],{"class":565},[560,4341,4343],{"class":4342},"sfNiH"," true",[560,4345,616],{"class":565},[560,4347,2393],{"class":606},[560,4349,4350],{"class":562,"line":662},[560,4351,4352],{"class":1154},"// nodes.Helmet is a Mesh in this asset.\n",[560,4354,4355,4357,4359],{"class":562,"line":668},[560,4356,655],{"class":565},[560,4358,570],{"class":569},[560,4360,592],{"class":565},[560,4362,4363],{"class":562,"line":678},[560,4364,665],{"emptyLinePlaceholder":516},[560,4366,4367,4369,4371],{"class":562,"line":701},[560,4368,566],{"class":565},[560,4370,673],{"class":569},[560,4372,592],{"class":565},[560,4374,4375,4377,4380,4382,4384,4386,4389,4391,4394,4396,4398,4401,4403],{"class":562,"line":713},[560,4376,681],{"class":565},[560,4378,4379],{"class":569},"primitive",[560,4381,2655],{"class":573},[560,4383,580],{"class":565},[560,4385,583],{"class":565},[560,4387,4388],{"class":586},"nodes?.Helmet",[560,4390,583],{"class":565},[560,4392,4393],{"class":573}," :object",[560,4395,580],{"class":565},[560,4397,583],{"class":565},[560,4399,4400],{"class":586},"nodes.Helmet",[560,4402,583],{"class":565},[560,4404,592],{"class":565},[560,4406,4407,4409,4411,4413,4415,4417,4420,4422,4424,4426,4428,4430,4432,4434],{"class":562,"line":723},[560,4408,704],{"class":565},[560,4410,53],{"class":569},[560,4412,2667],{"class":573},[560,4414,580],{"class":565},[560,4416,583],{"class":565},[560,4418,4419],{"class":586},"layout.helmet",[560,4421,583],{"class":565},[560,4423,2679],{"class":573},[560,4425,580],{"class":565},[560,4427,583],{"class":565},[560,4429,2898],{"class":586},[560,4431,583],{"class":565},[560,4433,3850],{"class":573},[560,4435,710],{"class":565},[560,4437,4438,4440,4442],{"class":562,"line":728},[560,4439,828],{"class":565},[560,4441,4379],{"class":569},[560,4443,592],{"class":565},[560,4445,4446,4448,4450],{"class":562,"line":750},[560,4447,655],{"class":565},[560,4449,673],{"class":569},[560,4451,592],{"class":565},[1950,4453,4454],{},[536,4455,4456,4457,4459,4460,4463],{},"The resolved parent is the ",[540,4458,4233],{},"'s retargeting proxy rather than\nthe raw object. This is transparent in practice — geometry, ",[540,4461,4462],{},"matrixWorld","\nand raycasting all forward to the wrapped object — so the decal projects\nand follows transforms correctly.",[3996,4465,4245,4467,4249,4469],{"id":4466},"when-object-is-a-group",[540,4468,4248],{},[540,4470,4471],{},"Group",[536,4473,4474,4475,4477,4478,4480,4481,4483,4484,1163],{},"A named node in a ",[540,4476,4221],{}," is often a ",[540,4479,4471],{}," containing several child\nmeshes (e.g. a ceramic body + a metallic interior). Auto-resolution\nreturns ",[540,4482,3601],{}," in that case and the decal silently does nothing — pass\nthe actual target child via ",[540,4485,4486],{},":mesh",[549,4488,4490],{"className":551,"code":4489,"language":556,"meta":508,"style":508},"\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",[540,4491,4492,4512,4534,4552,4574,4578,4615,4620,4644,4692,4696,4704,4708,4716,4746,4789,4797],{"__ignoreMap":508},[560,4493,4494,4496,4498,4500,4502,4504,4506,4508,4510],{"class":562,"line":509},[560,4495,566],{"class":565},[560,4497,570],{"class":569},[560,4499,574],{"class":573},[560,4501,577],{"class":573},[560,4503,580],{"class":565},[560,4505,583],{"class":565},[560,4507,587],{"class":586},[560,4509,583],{"class":565},[560,4511,592],{"class":565},[560,4513,4514,4516,4518,4520,4522,4524,4526,4528,4530,4532],{"class":562,"line":510},[560,4515,600],{"class":599},[560,4517,603],{"class":565},[560,4519,2295],{"class":606},[560,4521,610],{"class":565},[560,4523,4292],{"class":606},[560,4525,616],{"class":565},[560,4527,619],{"class":599},[560,4529,622],{"class":565},[560,4531,625],{"class":586},[560,4533,628],{"class":565},[560,4535,4536,4538,4540,4542,4544,4546,4548,4550],{"class":562,"line":631},[560,4537,600],{"class":599},[560,4539,603],{"class":565},[560,4541,3434],{"class":606},[560,4543,616],{"class":565},[560,4545,619],{"class":599},[560,4547,622],{"class":565},[560,4549,556],{"class":586},[560,4551,628],{"class":565},[560,4553,4554,4556,4558,4560,4563,4565,4567,4569,4572],{"class":562,"line":652},[560,4555,600],{"class":599},[560,4557,3387],{"class":599},[560,4559,603],{"class":565},[560,4561,4562],{"class":606}," Mesh",[560,4564,616],{"class":565},[560,4566,619],{"class":599},[560,4568,622],{"class":565},[560,4570,4571],{"class":586},"three",[560,4573,628],{"class":565},[560,4575,4576],{"class":562,"line":662},[560,4577,665],{"emptyLinePlaceholder":516},[560,4579,4580,4582,4584,4586,4588,4590,4592,4594,4596,4599,4601,4603,4605,4607,4609,4611,4613],{"class":562,"line":668},[560,4581,2360],{"class":573},[560,4583,603],{"class":565},[560,4585,4315],{"class":606},[560,4587,2373],{"class":565},[560,4589,2376],{"class":565},[560,4591,4292],{"class":2379},[560,4593,2382],{"class":606},[560,4595,2385],{"class":565},[560,4597,4598],{"class":586},"/models/mug.glb",[560,4600,2385],{"class":565},[560,4602,610],{"class":565},[560,4604,603],{"class":565},[560,4606,4337],{"class":569},[560,4608,1163],{"class":565},[560,4610,4343],{"class":4342},[560,4612,616],{"class":565},[560,4614,2393],{"class":606},[560,4616,4617],{"class":562,"line":678},[560,4618,4619],{"class":1154},"// nodes.Mug is a Group — pick the child you want to decal.\n",[560,4621,4622,4624,4627,4629,4631,4633,4635,4637,4639,4641],{"class":562,"line":701},[560,4623,2360],{"class":573},[560,4625,4626],{"class":606}," body ",[560,4628,580],{"class":565},[560,4630,3434],{"class":2379},[560,4632,566],{"class":565},[560,4634,4237],{"class":1145},[560,4636,3590],{"class":565},[560,4638,3593],{"class":1145},[560,4640,3596],{"class":565},[560,4642,4643],{"class":606},"(\n",[560,4645,4646,4649,4651,4654,4656,4658,4660,4663,4665,4668,4670,4672,4675,4677,4680,4683,4685,4687,4689],{"class":562,"line":713},[560,4647,4648],{"class":565},"  ()",[560,4650,3622],{"class":573},[560,4652,4653],{"class":606}," (nodes",[560,4655,1069],{"class":565},[560,4657,3630],{"class":606},[560,4659,3633],{"class":565},[560,4661,4662],{"class":606},"Mug",[560,4664,3633],{"class":565},[560,4666,4667],{"class":2379},"getObjectByName",[560,4669,2382],{"class":606},[560,4671,2385],{"class":565},[560,4673,4674],{"class":586},"Body",[560,4676,2385],{"class":565},[560,4678,4679],{"class":606},") ",[560,4681,4682],{"class":599},"as",[560,4684,4562],{"class":1145},[560,4686,4679],{"class":606},[560,4688,3639],{"class":565},[560,4690,4691],{"class":565}," null,\n",[560,4693,4694],{"class":562,"line":723},[560,4695,2393],{"class":606},[560,4697,4698,4700,4702],{"class":562,"line":728},[560,4699,655],{"class":565},[560,4701,570],{"class":569},[560,4703,592],{"class":565},[560,4705,4706],{"class":562,"line":750},[560,4707,665],{"emptyLinePlaceholder":516},[560,4709,4710,4712,4714],{"class":562,"line":554},[560,4711,566],{"class":565},[560,4713,673],{"class":569},[560,4715,592],{"class":565},[560,4717,4718,4720,4722,4724,4726,4728,4731,4733,4735,4737,4739,4742,4744],{"class":562,"line":773},[560,4719,681],{"class":565},[560,4721,4379],{"class":569},[560,4723,2655],{"class":573},[560,4725,580],{"class":565},[560,4727,583],{"class":565},[560,4729,4730],{"class":586},"nodes?.Mug",[560,4732,583],{"class":565},[560,4734,4393],{"class":573},[560,4736,580],{"class":565},[560,4738,583],{"class":565},[560,4740,4741],{"class":586},"nodes.Mug",[560,4743,583],{"class":565},[560,4745,592],{"class":565},[560,4747,4748,4750,4752,4754,4756,4758,4761,4763,4765,4767,4769,4771,4773,4776,4778,4780,4783,4785,4787],{"class":562,"line":784},[560,4749,704],{"class":565},[560,4751,53],{"class":569},[560,4753,2667],{"class":573},[560,4755,580],{"class":565},[560,4757,583],{"class":565},[560,4759,4760],{"class":586},"layout.mug",[560,4762,583],{"class":565},[560,4764,2679],{"class":573},[560,4766,580],{"class":565},[560,4768,583],{"class":565},[560,4770,2898],{"class":586},[560,4772,583],{"class":565},[560,4774,4775],{"class":573}," :mesh",[560,4777,580],{"class":565},[560,4779,583],{"class":565},[560,4781,4782],{"class":586},"body",[560,4784,583],{"class":565},[560,4786,3850],{"class":573},[560,4788,710],{"class":565},[560,4790,4791,4793,4795],{"class":562,"line":795},[560,4792,828],{"class":565},[560,4794,4379],{"class":569},[560,4796,592],{"class":565},[560,4798,4799,4801,4803],{"class":562,"line":805},[560,4800,655],{"class":565},[560,4802,673],{"class":569},[560,4804,592],{"class":565},[3996,4806,4808],{"id":4807},"targeting-an-extracted-sub-mesh","Targeting an extracted sub-mesh",[536,4810,4811,4812,4818,4819,4826,4827,4829,4830,1163],{},"Alternatively, ",[1614,4813,4814,4815,4817],{},"wrap a ",[540,4816,2255],{}," 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",[1063,4820,4823],{"href":4821,"rel":4822},"https://docs.tresjs.org/api/composables.html#usegraph",[1067],[540,4824,4825],{},"useGraph"," to\npull the sub-mesh, then build a regular ",[540,4828,2255],{}," around its\n",[540,4831,4832],{},":geometry",[549,4834,4836],{"className":551,"code":4835,"language":556,"meta":508,"style":508},"\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",[540,4837,4838,4858,4882,4900,4920,4938,4942,4974,5003,5017,5045,5053,5057,5065,5072,5086,5100,5114,5119,5150,5180,5188],{"__ignoreMap":508},[560,4839,4840,4842,4844,4846,4848,4850,4852,4854,4856],{"class":562,"line":509},[560,4841,566],{"class":565},[560,4843,570],{"class":569},[560,4845,574],{"class":573},[560,4847,577],{"class":573},[560,4849,580],{"class":565},[560,4851,583],{"class":565},[560,4853,587],{"class":586},[560,4855,583],{"class":565},[560,4857,592],{"class":565},[560,4859,4860,4862,4864,4867,4869,4872,4874,4876,4878,4880],{"class":562,"line":510},[560,4861,600],{"class":599},[560,4863,603],{"class":565},[560,4865,4866],{"class":606}," useGraph",[560,4868,610],{"class":565},[560,4870,4871],{"class":606}," useLoader",[560,4873,616],{"class":565},[560,4875,619],{"class":599},[560,4877,622],{"class":565},[560,4879,647],{"class":586},[560,4881,628],{"class":565},[560,4883,4884,4886,4888,4890,4892,4894,4896,4898],{"class":562,"line":631},[560,4885,600],{"class":599},[560,4887,603],{"class":565},[560,4889,2295],{"class":606},[560,4891,616],{"class":565},[560,4893,619],{"class":599},[560,4895,622],{"class":565},[560,4897,625],{"class":586},[560,4899,628],{"class":565},[560,4901,4902,4904,4906,4909,4911,4913,4915,4918],{"class":562,"line":652},[560,4903,600],{"class":599},[560,4905,603],{"class":565},[560,4907,4908],{"class":606}," GLTFLoader",[560,4910,616],{"class":565},[560,4912,619],{"class":599},[560,4914,622],{"class":565},[560,4916,4917],{"class":586},"three/examples/jsm/loaders/GLTFLoader.js",[560,4919,628],{"class":565},[560,4921,4922,4924,4926,4928,4930,4932,4934,4936],{"class":562,"line":662},[560,4923,600],{"class":599},[560,4925,603],{"class":565},[560,4927,3434],{"class":606},[560,4929,616],{"class":565},[560,4931,619],{"class":599},[560,4933,622],{"class":565},[560,4935,556],{"class":586},[560,4937,628],{"class":565},[560,4939,4940],{"class":562,"line":668},[560,4941,665],{"emptyLinePlaceholder":516},[560,4943,4944,4946,4948,4950,4952,4955,4957,4959,4961,4964,4966,4968,4970,4972],{"class":562,"line":678},[560,4945,2360],{"class":573},[560,4947,603],{"class":565},[560,4949,2365],{"class":569},[560,4951,1163],{"class":565},[560,4953,4954],{"class":606}," model ",[560,4956,2373],{"class":565},[560,4958,2376],{"class":565},[560,4960,4871],{"class":2379},[560,4962,4963],{"class":606},"(GLTFLoader",[560,4965,610],{"class":565},[560,4967,622],{"class":565},[560,4969,4328],{"class":586},[560,4971,2385],{"class":565},[560,4973,2393],{"class":606},[560,4975,4976,4978,4981,4983,4985,4987,4989,4991,4994,4996,4998,5000],{"class":562,"line":701},[560,4977,2360],{"class":573},[560,4979,4980],{"class":606}," scene ",[560,4982,580],{"class":565},[560,4984,3434],{"class":2379},[560,4986,2382],{"class":606},[560,4988,3619],{"class":565},[560,4990,3622],{"class":573},[560,4992,4993],{"class":606}," model",[560,4995,1069],{"class":565},[560,4997,3630],{"class":606},[560,4999,3633],{"class":565},[560,5001,5002],{"class":606},"scene)\n",[560,5004,5005,5007,5010,5012,5014],{"class":562,"line":713},[560,5006,2360],{"class":573},[560,5008,5009],{"class":606}," graph ",[560,5011,580],{"class":565},[560,5013,4866],{"class":2379},[560,5015,5016],{"class":606},"(scene)\n",[560,5018,5019,5021,5023,5025,5027,5029,5031,5033,5036,5038,5040,5042],{"class":562,"line":723},[560,5020,2360],{"class":573},[560,5022,4315],{"class":606},[560,5024,580],{"class":565},[560,5026,3434],{"class":2379},[560,5028,2382],{"class":606},[560,5030,3619],{"class":565},[560,5032,3622],{"class":573},[560,5034,5035],{"class":606}," graph",[560,5037,1069],{"class":565},[560,5039,3630],{"class":606},[560,5041,3633],{"class":565},[560,5043,5044],{"class":606},"nodes)\n",[560,5046,5047,5049,5051],{"class":562,"line":728},[560,5048,655],{"class":565},[560,5050,570],{"class":569},[560,5052,592],{"class":565},[560,5054,5055],{"class":562,"line":750},[560,5056,665],{"emptyLinePlaceholder":516},[560,5058,5059,5061,5063],{"class":562,"line":554},[560,5060,566],{"class":565},[560,5062,673],{"class":569},[560,5064,592],{"class":565},[560,5066,5067,5069],{"class":562,"line":773},[560,5068,681],{"class":565},[560,5070,5071],{"class":569},"TresMesh\n",[560,5073,5074,5077,5079,5081,5084],{"class":562,"line":784},[560,5075,5076],{"class":573},"    v-if",[560,5078,580],{"class":565},[560,5080,583],{"class":565},[560,5082,5083],{"class":586},"nodes?.Helmet.geometry",[560,5085,3076],{"class":565},[560,5087,5088,5091,5093,5095,5098],{"class":562,"line":795},[560,5089,5090],{"class":573},"    name",[560,5092,580],{"class":565},[560,5094,583],{"class":565},[560,5096,5097],{"class":586},"helmet",[560,5099,3076],{"class":565},[560,5101,5102,5105,5107,5109,5112],{"class":562,"line":805},[560,5103,5104],{"class":573},"    :geometry",[560,5106,580],{"class":565},[560,5108,583],{"class":565},[560,5110,5111],{"class":586},"nodes.Helmet.geometry",[560,5113,3076],{"class":565},[560,5115,5116],{"class":562,"line":555},[560,5117,5118],{"class":565},"  >\n",[560,5120,5121,5123,5125,5127,5129,5131,5134,5136,5139,5141,5143,5146,5148],{"class":562,"line":825},[560,5122,704],{"class":565},[560,5124,4379],{"class":569},[560,5126,4393],{"class":573},[560,5128,580],{"class":565},[560,5130,583],{"class":565},[560,5132,5133],{"class":586},"nodes.Helmet.material",[560,5135,583],{"class":565},[560,5137,5138],{"class":573}," attach",[560,5140,580],{"class":565},[560,5142,583],{"class":565},[560,5144,5145],{"class":586},"material",[560,5147,583],{"class":565},[560,5149,710],{"class":565},[560,5151,5152,5154,5156,5158,5160,5162,5164,5166,5168,5170,5172,5174,5176,5178],{"class":562,"line":835},[560,5153,704],{"class":565},[560,5155,53],{"class":569},[560,5157,2667],{"class":573},[560,5159,580],{"class":565},[560,5161,583],{"class":565},[560,5163,4419],{"class":586},[560,5165,583],{"class":565},[560,5167,2679],{"class":573},[560,5169,580],{"class":565},[560,5171,583],{"class":565},[560,5173,2898],{"class":586},[560,5175,583],{"class":565},[560,5177,3850],{"class":573},[560,5179,710],{"class":565},[560,5181,5182,5184,5186],{"class":562,"line":2570},[560,5183,828],{"class":565},[560,5185,779],{"class":569},[560,5187,592],{"class":565},[560,5189,5190,5192,5194],{"class":562,"line":2579},[560,5191,655],{"class":565},[560,5193,673],{"class":569},[560,5195,592],{"class":565},[536,5197,5198,5199,3008,5202,5204,5205,5207,5208,5210],{},"The mesh's ",[540,5200,5201],{},"geometry",[540,5203,5145],{}," come from the loaded model; the\n",[540,5206,2155],{}," lives inside a regular ",[540,5209,2255],{}," with a clean scene-graph\nparent.",[3144,5212,5213],{},[536,5214,5215,5216,5218,5219,5222,5223,5226,5227,5230],{},"A saved decal's ",[540,5217,4075],{}," is stored in ",[1614,5220,5221],{},"world space",", so it is\nre-projected onto the parent using the parent's transform ",[1614,5224,5225],{},"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. ",[540,5228,5229],{},"\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.",[545,5232,5234],{"id":5233},"json-schema","JSON schema",[536,5236,5237,5238,5240,5241,5244,5245,5247,5248,1069],{},"Each entry in the ",[540,5239,2963],{}," array follows the ",[540,5242,5243],{},"DecalJsonEntry"," shape; the\nlayout passed to ",[540,5246,2170],{}," groups these by mesh name as\n",[540,5249,5250],{},"DecalLayout = Record\u003Cstring, DecalJsonEntry[]>",[5252,5253,5254,5255,5259],"details",{},"\n  ",[5256,5257,5258],"summary",{},"Full schema",[549,5260,5262],{"className":1131,"code":5261,"language":587,"meta":508,"style":508},"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",[540,5263,5264,5273,5286,5313,5337,5361,5373,5389,5403,5414,5426,5438,5450,5454,5458,5483],{"__ignoreMap":508},[560,5265,5266,5269,5271],{"class":562,"line":509},[560,5267,5268],{"class":573},"interface",[560,5270,3397],{"class":1145},[560,5272,1149],{"class":565},[560,5274,5275,5278,5280,5283],{"class":562,"line":510},[560,5276,5277],{"class":569},"  id",[560,5279,1163],{"class":565},[560,5281,5282],{"class":1145}," string",[560,5284,5285],{"class":1154}," // stable UUID\n",[560,5287,5288,5291,5293,5295,5298,5300,5303,5305,5307,5310],{"class":562,"line":631},[560,5289,5290],{"class":569},"  position",[560,5292,1163],{"class":565},[560,5294,2443],{"class":606},[560,5296,5297],{"class":1145},"number",[560,5299,610],{"class":565},[560,5301,5302],{"class":1145}," number",[560,5304,610],{"class":565},[560,5306,5302],{"class":1145},[560,5308,5309],{"class":606},"] ",[560,5311,5312],{"class":1154},"// target-mesh local space (raycast hit, baked into the parent's frame)\n",[560,5314,5315,5318,5320,5322,5324,5326,5328,5330,5332,5334],{"class":562,"line":652},[560,5316,5317],{"class":569},"  orientation",[560,5319,1163],{"class":565},[560,5321,2443],{"class":606},[560,5323,5297],{"class":1145},[560,5325,610],{"class":565},[560,5327,5302],{"class":1145},[560,5329,610],{"class":565},[560,5331,5302],{"class":1145},[560,5333,5309],{"class":606},[560,5335,5336],{"class":1154},"// Euler XYZ\n",[560,5338,5339,5342,5344,5346,5348,5350,5352,5354,5356,5358],{"class":562,"line":662},[560,5340,5341],{"class":569},"  size",[560,5343,1163],{"class":565},[560,5345,2443],{"class":606},[560,5347,5297],{"class":1145},[560,5349,610],{"class":565},[560,5351,5302],{"class":1145},[560,5353,610],{"class":565},[560,5355,5302],{"class":1145},[560,5357,5309],{"class":606},[560,5359,5360],{"class":1154},"// extents along X/Y; Z = projection depth\n",[560,5362,5363,5366,5368,5370],{"class":562,"line":668},[560,5364,5365],{"class":569},"  zIndex",[560,5367,1163],{"class":565},[560,5369,5302],{"class":1145},[560,5371,5372],{"class":1154}," // per-mesh layer order, ≥ 0\n",[560,5374,5375,5378,5380,5382,5384,5386],{"class":562,"line":678},[560,5376,5377],{"class":569},"  map",[560,5379,1163],{"class":565},[560,5381,5282],{"class":1145},[560,5383,3590],{"class":565},[560,5385,3593],{"class":1145},[560,5387,5388],{"class":1154}," // matches a texture's .name\n",[560,5390,5391,5394,5397,5400],{"class":562,"line":701},[560,5392,5393],{"class":569},"  flipX",[560,5395,5396],{"class":565},"?:",[560,5398,5399],{"class":1145}," boolean",[560,5401,5402],{"class":1154}," // omitted when false\n",[560,5404,5405,5408,5410,5412],{"class":562,"line":713},[560,5406,5407],{"class":569},"  flipY",[560,5409,5396],{"class":565},[560,5411,5399],{"class":1145},[560,5413,5402],{"class":1154},[560,5415,5416,5419,5421,5423],{"class":562,"line":723},[560,5417,5418],{"class":569},"  color",[560,5420,5396],{"class":565},[560,5422,5282],{"class":1145},[560,5424,5425],{"class":1154}," // hex (e.g. '#ff6b35'), omitted when no tint\n",[560,5427,5428,5431,5433,5435],{"class":562,"line":728},[560,5429,5430],{"class":569},"  opacity",[560,5432,5396],{"class":565},[560,5434,5302],{"class":1145},[560,5436,5437],{"class":1154}," // 0..1, omitted when 1\n",[560,5439,5440,5443,5445,5447],{"class":562,"line":750},[560,5441,5442],{"class":569},"  visible",[560,5444,5396],{"class":565},[560,5446,5399],{"class":1145},[560,5448,5449],{"class":1154}," // omitted when true; false hides the decal\n",[560,5451,5452],{"class":562,"line":554},[560,5453,1270],{"class":565},[560,5455,5456],{"class":562,"line":773},[560,5457,665],{"emptyLinePlaceholder":516},[560,5459,5460,5463,5466,5468,5471,5473,5475,5477,5479,5481],{"class":562,"line":784},[560,5461,5462],{"class":573},"type",[560,5464,5465],{"class":1145}," DecalLayout",[560,5467,2376],{"class":565},[560,5469,5470],{"class":1145}," Record",[560,5472,566],{"class":565},[560,5474,3517],{"class":1145},[560,5476,610],{"class":565},[560,5478,3397],{"class":1145},[560,5480,3524],{"class":606},[560,5482,592],{"class":565},[560,5484,5485],{"class":562,"line":795},[560,5486,5487],{"class":1154},"// { sphere: [...], cube: [...] }\n",[545,5489,5491,5493],{"id":5490},"decal-props",[540,5492,2155],{}," props",[850,5495,5496,5506],{},[853,5497,5498],{},[856,5499,5500,5502,5504],{},[859,5501,861],{},[859,5503,864],{},[859,5505,867],{},[869,5507,5508,5524,5544,5581,5599,5613,5627,5647,5675],{},[856,5509,5510,5514,5520],{},[874,5511,5512],{},[1614,5513,2963],{},[874,5515,5516,5517,5519],{},"Two-way list of stamped decals (use with ",[540,5518,2215],{},").",[874,5521,5522],{},[540,5523,3524],{},[856,5525,5526,5530,5540],{},[874,5527,5528],{},[1614,5529,2926],{},[874,5531,5532,5533,5535,5536,5539],{},"A single ",[540,5534,2194],{}," or array of ",[540,5537,5538],{},"Texture[]",". With multiple, the editor lets the user cycle through them as a palette.",[874,5541,5542],{},[540,5543,3601],{},[856,5545,5546,5551,5577],{},[874,5547,5548],{},[1614,5549,5550],{},"mesh",[874,5552,5553,5554,5556,5557,5560,5561,5563,5564,5567,5568,3281,5570,3281,5573,5576],{},"Optional explicit target mesh (",[540,5555,4237],{}," or ",[540,5558,5559],{},"ShallowRef\u003CMesh>","). When omitted, the scene-graph parent of ",[540,5562,2155],{}," is auto-resolved via a hidden anchor ",[540,5565,5566],{},"\u003CTresGroup>",". The decal mesh is imperatively parented to the target so it follows the target's runtime ",[540,5569,4075],{},[540,5571,5572],{},"rotation",[540,5574,5575],{},"scale"," via the scene-graph hierarchy.",[874,5578,5579],{},[540,5580,3601],{},[856,5582,5583,5587,5595],{},[874,5584,5585],{},[1614,5586,3131],{},[874,5588,4245,5589,5591,5592,5594],{},[540,5590,884],{},", mounts the interactive editor (raycast, hover, click-to-place, drag-from-thumbnail). Required for ",[540,5593,2170],{}," interactions to work on this Decal.",[874,5596,5597],{},[540,5598,894],{},[856,5600,5601,5606,5609],{},[874,5602,5603],{},[1614,5604,5605],{},"baseSize",[874,5607,5608],{},"Reference size used to derive each decal's size from the texture aspect ratio.",[874,5610,5611],{},[540,5612,1819],{},[856,5614,5615,5620,5623],{},[874,5616,5617],{},[1614,5618,5619],{},"baseOffset",[874,5621,5622],{},"Distance along the surface normal (parent units) to avoid z-fighting between the decal and the host mesh.",[874,5624,5625],{},[540,5626,1831],{},[856,5628,5629,5633,5642],{},[874,5630,5631],{},[1614,5632,3041],{},[874,5634,5635,5636,5638,5639,5641],{},"Extra offset added per ",[540,5637,2237],{}," step on top of ",[540,5640,5619],{},". Increase if stacked decals still flicker.",[874,5643,5644],{},[540,5645,5646],{},"0.001",[856,5648,5649,5654,5670],{},[874,5650,5651],{},[1614,5652,5653],{},"cullThreshold",[874,5655,5656,5657,5660,5661,5666,5667,5669],{},"Drops projected triangles whose face normal makes an angle steeper than ",[540,5658,5659],{},"acos(threshold)"," with the projector. Mitigates ",[1063,5662,5665],{"href":5663,"rel":5664},"https://github.com/mrdoob/three.js/issues/21187",[1067],"#21187",". Pass ",[540,5668,888],{}," to disable.",[874,5671,5672],{},[540,5673,5674],{},"0.2",[856,5676,5677,5682,5685],{},[874,5678,5679],{},[1614,5680,5681],{},"edgeColor",[874,5683,5684],{},"Color of the edge outline drawn around a decal while it is hovered (pointer or layer panel) in editable mode.",[874,5686,5687],{},[540,5688,5689],{},"#0000ff",[545,5691,5693,5695],{"id":5692},"decal-events",[540,5694,2155],{}," events",[850,5697,5698,5708],{},[853,5699,5700],{},[856,5701,5702,5704,5706],{},[859,5703,1103],{},[859,5705,1106],{},[859,5707,864],{},[869,5709,5710,5725,5740,5754,5774,5792,5809],{},[856,5711,5712,5717,5722],{},[874,5713,5714],{},[540,5715,5716],{},"update:data",[874,5718,5719],{},[540,5720,5721],{},"DecalJsonEntry[]",[874,5723,5724],{},"v-model partner — fires whenever the JSON list changes.",[856,5726,5727,5732,5737],{},[874,5728,5729],{},[540,5730,5731],{},"add",[874,5733,5734],{},[540,5735,5736],{},"DecalEntry",[874,5738,5739],{},"A new decal has been committed (create mode → confirm).",[856,5741,5742,5747,5751],{},[874,5743,5744],{},[540,5745,5746],{},"update",[874,5748,5749],{},[540,5750,5736],{},[874,5752,5753],{},"An existing decal has been committed (update mode → confirm).",[856,5755,5756,5761,5765],{},[874,5757,5758],{},[540,5759,5760],{},"delete",[874,5762,5763],{},[540,5764,5736],{},[874,5766,5767,5768,3281,5771,5519],{},"A decal has been removed (delete button or ",[540,5769,5770],{},"Del",[540,5772,5773],{},"Backspace",[856,5775,5776,5781,5785],{},[874,5777,5778],{},[540,5779,5780],{},"select",[874,5782,5783],{},[540,5784,5736],{},[874,5786,5787,5788,5791],{},"Edition began on ",[540,5789,5790],{},"entry"," (panel click, 3D click, or programmatic).",[856,5793,5794,5799,5802],{},[874,5795,5796],{},[540,5797,5798],{},"cancel",[874,5800,5801],{},"—",[874,5803,5804,5805,5808],{},"Edition was aborted without commit (",[540,5806,5807],{},"Esc",", click-outside in create mode).",[856,5810,5811,5816,5821],{},[874,5812,5813],{},[540,5814,5815],{},"decalClick",[874,5817,5818],{},[540,5819,5820],{},"{ entry: DecalEntry, event: MouseEvent }",[874,5822,5823,5824,5826,5827,1069],{},"Fires on click of any stamped decal, even when ",[540,5825,3131],{}," is ",[540,5828,894],{},[545,5830,5832,5834,5835,3285],{"id":5831},"decal-exposed-via-ref",[540,5833,2155],{}," exposed (via ",[540,5836,5837],{},"ref",[536,5839,5840,5841,5844],{},"The template ref resolves to ",[540,5842,5843],{},"DecalImperativeApi"," — import the type for\nfull autocompletion:",[549,5846,5848],{"className":1131,"code":5847,"language":587,"meta":508,"style":508},"import type { DecalImperativeApi } from '@tresjs/cientos'\n\nconst decalRef = ref\u003CDecalImperativeApi | null>(null)\n",[540,5849,5850,5871,5875],{"__ignoreMap":508},[560,5851,5852,5854,5856,5858,5861,5863,5865,5867,5869],{"class":562,"line":509},[560,5853,600],{"class":599},[560,5855,3387],{"class":599},[560,5857,603],{"class":565},[560,5859,5860],{"class":606}," DecalImperativeApi",[560,5862,616],{"class":565},[560,5864,619],{"class":599},[560,5866,622],{"class":565},[560,5868,625],{"class":586},[560,5870,628],{"class":565},[560,5872,5873],{"class":562,"line":510},[560,5874,665],{"emptyLinePlaceholder":516},[560,5876,5877,5879,5881,5883,5885,5887,5889,5891,5893,5895,5897,5899],{"class":562,"line":631},[560,5878,2360],{"class":573},[560,5880,3571],{"class":606},[560,5882,580],{"class":565},[560,5884,3817],{"class":2379},[560,5886,566],{"class":565},[560,5888,5843],{"class":1145},[560,5890,3590],{"class":565},[560,5892,3593],{"class":1145},[560,5894,3596],{"class":565},[560,5896,2382],{"class":606},[560,5898,3601],{"class":565},[560,5900,2393],{"class":606},[850,5902,5903,5915],{},[853,5904,5905],{},[856,5906,5907,5910,5913],{},[859,5908,5909],{},"Property",[859,5911,5912],{},"Type",[859,5914,864],{},[869,5916,5917,5935,5953,5971,5986],{},[856,5918,5919,5924,5929],{},[874,5920,5921],{},[540,5922,5923],{},"editor",[874,5925,5926],{},[540,5927,5928],{},"DecalEditorSession",[874,5930,5931,5932,1069],{},"The canvas-shared editor session. Pass it to ",[540,5933,5934],{},"\u003CDecalDebugUI :session>",[856,5936,5937,5942,5947],{},[874,5938,5939],{},[540,5940,5941],{},"beginEditById",[874,5943,5944],{},[540,5945,5946],{},"(id: string) => boolean",[874,5948,5949,5950,5952],{},"Programmatically start editing a specific decal. Returns ",[540,5951,894],{}," if the id is unknown.",[856,5954,5955,5960,5965],{},[874,5956,5957],{},[540,5958,5959],{},"commit",[874,5961,5962],{},[540,5963,5964],{},"() => void",[874,5966,5967,5968,5519],{},"Commit the in-flight edit (same as ",[540,5969,5970],{},"Enter",[856,5972,5973,5977,5981],{},[874,5974,5975],{},[540,5976,5798],{},[874,5978,5979],{},[540,5980,5964],{},[874,5982,5983,5984,5519],{},"Abort the in-flight edit (same as ",[540,5985,5807],{},[856,5987,5988,5993,5997],{},[874,5989,5990],{},[540,5991,5992],{},"remove",[874,5994,5995],{},[540,5996,5964],{},[874,5998,5999,6000,5519],{},"Delete the currently edited decal (same as ",[540,6001,5770],{},[545,6003,6005,5493],{"id":6004},"decaldebugui-props",[540,6006,2170],{},[850,6008,6009,6019],{},[853,6010,6011],{},[856,6012,6013,6015,6017],{},[859,6014,861],{},[859,6016,864],{},[859,6018,867],{},[869,6020,6021,6044,6069,6082,6102,6117,6140],{},[856,6022,6023,6027,6040],{},[874,6024,6025],{},[1614,6026,3680],{},[874,6028,6029,6032,6033,6035,6036,6039],{},[540,6030,6031],{},"DecalEditorSession | null"," — obtained from any ",[540,6034,2155],{}," ref via ",[540,6037,6038],{},"decalRef.value?.editor",". Mandatory for the overlay to wire up the interactive logic.",[874,6041,6042],{},[540,6043,3601],{},[856,6045,6046,6050,6064],{},[874,6047,6048],{},[1614,6049,2963],{},[874,6051,6052,6053,6056,6057,6060,6061,6063],{},"Mesh-name-keyed map of decal slices — ",[540,6054,6055],{},"{ sphere: [...], cube: [...] }",". Each key matches a ",[540,6058,6059],{},"\u003CTresMesh name=\"...\">"," whose child ",[540,6062,2155],{}," owns the slice.",[874,6065,6066],{},[540,6067,6068],{},"{}",[856,6070,6071,6075,6078],{},[874,6072,6073],{},[1614,6074,2898],{},[874,6076,6077],{},"The full texture palette shown in the dock's picker.",[874,6079,6080],{},[540,6081,3524],{},[856,6083,6084,6089,6098],{},[874,6085,6086],{},[1614,6087,6088],{},"theme",[874,6090,6091,5556,6094,6097],{},[540,6092,6093],{},"'light'",[540,6095,6096],{},"'dark'"," — overlay theme tokens.",[874,6099,6100],{},[540,6101,6093],{},[856,6103,6104,6109,6112],{},[874,6105,6106],{},[1614,6107,6108],{},"snapAngle",[874,6110,6111],{},"Rotation step (degrees) applied when the snap toggle is on. Snap-tick ring on the handle adapts automatically.",[874,6113,6114],{},[540,6115,6116],{},"15",[856,6118,6119,6124,6136],{},[874,6120,6121],{},[1614,6122,6123],{},"exportFilename",[874,6125,6126,6127,5666,6129,6131,6132,6135],{},"Filename for the built-in JSON download. When omitted, defaults to ",[540,6128,4124],{},[540,6130,3601],{}," to skip the auto-download (the ",[540,6133,6134],{},"@export"," event still fires).",[874,6137,6138],{},[540,6139,4124],{},[856,6141,6142,6146,6149],{},[874,6143,6144],{},[1614,6145,4051],{},[874,6147,6148],{},"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.",[874,6150,6151],{},[540,6152,894],{},[545,6154,6156,5695],{"id":6155},"decaldebugui-events",[540,6157,2170],{},[850,6159,6160,6170],{},[853,6161,6162],{},[856,6163,6164,6166,6168],{},[859,6165,1103],{},[859,6167,1106],{},[859,6169,864],{},[869,6171,6172,6186],{},[856,6173,6174,6178,6183],{},[874,6175,6176],{},[540,6177,1139],{},[874,6179,6180],{},[540,6181,6182],{},"DecalLayout",[874,6184,6185],{},"Fires after the user clicks Export. The download (if enabled) has already been triggered — use this for side effects (POST, analytics…).",[856,6187,6188,6192,6196],{},[874,6189,6190],{},[540,6191,600],{},[874,6193,6194],{},[540,6195,6182],{},[874,6197,6198],{},"Fires after the user picks a JSON file. The layout has been sanitised (unknown keys dropped) and already applied to the bound Decals.",[545,6200,6202],{"id":6201},"caveats","Caveats",[2158,6204,6205,6220,6237,6253],{},[2161,6206,6207,6208,6211,6212,6215,6216,6219],{},"✨ The overlay sits at ",[540,6209,6210],{},"position: fixed; inset: 0; pointer-events: none"," with\nindividual panels opting back in. It sits ",[1614,6213,6214],{},"above"," the canvas by default\n(",[540,6217,6218],{},"z-index: 1000000",") — adjust via host CSS if needed.",[2161,6221,6222,6223,6225,6226,6229,6230,1617,6233,6236],{},"🎨 ",[540,6224,2170],{}," ships its own theme in a global stylesheet under the\n",[540,6227,6228],{},".cientos-decal-ui"," namespace, so host styles aren't affected. The CSS\nvariables (",[540,6231,6232],{},"--accent",[540,6234,6235],{},"--dock-bg",", etc.) can be overridden by targeting\nthe namespace.",[2161,6238,6239,6240,6243,6244,6246,6247,6249,6250,6252],{},"🔶 Decals are ",[1614,6241,6242],{},"per-canvas"," — if you have multiple ",[540,6245,3142],{}," in your\napp, each one has its own independent session. Pair each ",[540,6248,2170],{},"\nwith the right ",[540,6251,3680],{}," (from one of the Decals inside that canvas).",[2161,6254,6255,6256,1069],{},"🧩 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 ",[540,6257,6258],{},":mesh=\"meshRef\"",[545,6260,6262],{"id":6261},"limitations","Limitations",[1950,6264,6265,6279,6286,6329],{},[536,6266,6267,6268,6271,6272,3281,6274,3281,6276,6278],{},"Decal vertices are baked into the ",[1614,6269,6270],{},"target mesh's local space"," at\nbuild time (the decal mesh is imperatively re-parented to the target,\nso ",[540,6273,4075],{},[540,6275,5572],{},[540,6277,5575],{}," on the parent are followed via\nthe scene graph — no rebuild needed).",[536,6280,6281,6282,6285],{},"Runtime deformations that change vertex positions outside of a\ntransform are ",[1614,6283,6284],{},"not"," followed:",[2158,6287,6288,6301,6309,6316],{},[2161,6289,6290,6295,6296,1069],{},[1614,6291,6292],{},[540,6293,6294],{},"SkinnedMesh"," skinning is not applied — the decal stays in rest\npose. See ",[1063,6297,6300],{"href":6298,"rel":6299},"https://github.com/mrdoob/three.js/issues/7926",[1067],"three.js#7926",[2161,6302,6303,6308],{},[1614,6304,6305],{},[540,6306,6307],{},"morphAttributes"," on the parent are ignored.",[2161,6310,6311,6312,6315],{},"Direct mutations of the parent's ",[540,6313,6314],{},"geometry.attributes.position","\n(e.g. CPU wave displacement, GPGPU) — the projection is baked once.",[2161,6317,6318,6319,6323,6324,6326,6327,1069],{},"Decals near silhouettes can wrap around onto opposite faces (see\n",[1063,6320,6322],{"href":5663,"rel":6321},[1067],"three.js#21187",") —\nmitigated by the ",[540,6325,5653],{}," prop, default ",[540,6328,5674],{},[536,6330,6331,6333],{},[540,6332,2155],{}," warns once per parent mesh when it detects these conditions.",[545,6335,6337],{"id":6336},"keyboard-shortcuts","Keyboard shortcuts",[850,6339,6340,6350],{},[853,6341,6342],{},[856,6343,6344,6347],{},[859,6345,6346],{},"Shortcut",[859,6348,6349],{},"Action",[869,6351,6352,6361,6370,6382,6395,6408],{},[856,6353,6354,6358],{},[874,6355,6356],{},[540,6357,5970],{},[874,6359,6360],{},"Confirm the in-flight edit",[856,6362,6363,6367],{},[874,6364,6365],{},[540,6366,5807],{},[874,6368,6369],{},"Cancel (revert updates, drop pending placements)",[856,6371,6372,6379],{},[874,6373,6374,3281,6376],{},[540,6375,5770],{},[540,6377,6378],{},"⌫",[874,6380,6381],{},"Delete the edited decal (or cancel a create)",[856,6383,6384,6392],{},[874,6385,6386,3281,6389],{},[540,6387,6388],{},"⌘Z",[540,6390,6391],{},"Ctrl+Z",[874,6393,6394],{},"Undo",[856,6396,6397,6405],{},[874,6398,6399,3281,6402],{},[540,6400,6401],{},"⇧⌘Z",[540,6403,6404],{},"Ctrl+⇧Z",[874,6406,6407],{},"Redo",[856,6409,6410,6413],{},[874,6411,6412],{},"Click outside",[874,6414,6415],{},"Auto-commit an in-flight update; cancel a create",[545,6417,6419,6420,3285],{"id":6418},"programmatic-api-usedecaleditor","Programmatic API (",[540,6421,6422],{},"useDecalEditor",[536,6424,6425,6426,6428,6429,6431,6432,6434,6435,6437],{},"Skip ",[540,6427,2170],{}," entirely or augment it with custom panels —\n",[540,6430,2183],{}," returns the same canvas-scoped session every Decal\nshares. Call it from any component inside ",[540,6433,3142],{}," (after at\nleast one ",[540,6436,2155],{}," has mounted).",[549,6439,6441],{"className":1131,"code":6440,"language":587,"meta":508,"style":508},"import { useDecalEditor } from '@tresjs/cientos'\n\nconst session = useDecalEditor()\n",[540,6442,6443,6462,6466],{"__ignoreMap":508},[560,6444,6445,6447,6449,6452,6454,6456,6458,6460],{"class":562,"line":509},[560,6446,600],{"class":599},[560,6448,603],{"class":565},[560,6450,6451],{"class":606}," useDecalEditor",[560,6453,616],{"class":565},[560,6455,619],{"class":599},[560,6457,622],{"class":565},[560,6459,625],{"class":586},[560,6461,628],{"class":565},[560,6463,6464],{"class":562,"line":510},[560,6465,665],{"emptyLinePlaceholder":516},[560,6467,6468,6470,6472,6474,6476],{"class":562,"line":631},[560,6469,2360],{"class":573},[560,6471,3610],{"class":606},[560,6473,580],{"class":565},[560,6475,6451],{"class":2379},[560,6477,6478],{"class":606},"()\n",[536,6480,6481,6482,1617,6485,2433,6488,1617,6491,6494,6495,2433,6497,1617,6500,1617,6503,6506,6507,6510,6511,6514,6515,1617,6518,1617,6521,2433,6524,6527],{},"The session exposes reactive state (",[540,6483,6484],{},"editingEntry",[540,6486,6487],{},"editingMode",[540,6489,6490],{},"canUndo",[540,6492,6493],{},"canRedo",", …), by-id mutators (",[540,6496,5941],{},[540,6498,6499],{},"setZIndexById",[540,6501,6502],{},"setVisibilityById",[540,6504,6505],{},"removeById","), batched updates\n(",[540,6508,6509],{},"setMeshData","), commit / delete / cancel listeners, undo / redo, and\na ",[540,6512,6513],{},"registerDecalEntry"," hook for external entries. Helper utilities\n(",[540,6516,6517],{},"ensureTextureNames",[540,6519,6520],{},"getTextureName",[540,6522,6523],{},"getTextureAspect",[540,6525,6526],{},"invalidateDecalGeometry",") are exported alongside.",[5252,6529,5254,6530,6533,6537,6612,6616,6687,6703,6707,6743,6749,6753,6892,6896,6942,6945,6949,6963,7133,7137],{},[5256,6531,6532],{},"Full API reference",[3996,6534,6536],{"id":6535},"reactive-state","Reactive state",[549,6538,6540],{"className":1131,"code":6539,"language":587,"meta":508,"style":508},"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",[540,6541,6542,6554,6566,6578,6589,6601],{"__ignoreMap":508},[560,6543,6544,6546,6548,6551],{"class":562,"line":509},[560,6545,3680],{"class":606},[560,6547,1069],{"class":565},[560,6549,6550],{"class":606},"editingEntry ",[560,6552,6553],{"class":1154},"// ShallowRef\u003CDecalEntry | null>\n",[560,6555,6556,6558,6560,6563],{"class":562,"line":510},[560,6557,3680],{"class":606},[560,6559,1069],{"class":565},[560,6561,6562],{"class":606},"editingMode ",[560,6564,6565],{"class":1154},"// Ref\u003C'create' | 'update' | null>\n",[560,6567,6568,6570,6572,6575],{"class":562,"line":631},[560,6569,3680],{"class":606},[560,6571,1069],{"class":565},[560,6573,6574],{"class":606},"lockedMeshUuid ",[560,6576,6577],{"class":1154},"// Ref\u003Cstring | null>\n",[560,6579,6580,6582,6584,6587],{"class":562,"line":652},[560,6581,3680],{"class":606},[560,6583,1069],{"class":565},[560,6585,6586],{"class":606},"hoveredEntry ",[560,6588,6553],{"class":1154},[560,6590,6591,6593,6595,6598],{"class":562,"line":662},[560,6592,3680],{"class":606},[560,6594,1069],{"class":565},[560,6596,6597],{"class":606},"canUndo ",[560,6599,6600],{"class":1154},"// Ref\u003Cboolean>\n",[560,6602,6603,6605,6607,6610],{"class":562,"line":668},[560,6604,3680],{"class":606},[560,6606,1069],{"class":565},[560,6608,6609],{"class":606},"canRedo ",[560,6611,6600],{"class":1154},[3996,6613,6615],{"id":6614},"mutating-decals-by-id","Mutating decals by id",[549,6617,6619],{"className":1131,"code":6618,"language":587,"meta":508,"style":508},"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",[540,6620,6621,6635,6654,6674],{"__ignoreMap":508},[560,6622,6623,6625,6627,6629,6632],{"class":562,"line":509},[560,6624,3680],{"class":606},[560,6626,1069],{"class":565},[560,6628,5941],{"class":2379},[560,6630,6631],{"class":606},"(id) ",[560,6633,6634],{"class":1154},"// start editing a placed decal\n",[560,6636,6637,6639,6641,6643,6646,6648,6651],{"class":562,"line":510},[560,6638,3680],{"class":606},[560,6640,1069],{"class":565},[560,6642,6499],{"class":2379},[560,6644,6645],{"class":606},"(id",[560,6647,610],{"class":565},[560,6649,6650],{"class":606}," newZ) ",[560,6652,6653],{"class":1154},"// reorder one decal\n",[560,6655,6656,6658,6660,6662,6664,6666,6669,6671],{"class":562,"line":631},[560,6657,3680],{"class":606},[560,6659,1069],{"class":565},[560,6661,6502],{"class":2379},[560,6663,6645],{"class":606},[560,6665,610],{"class":565},[560,6667,6668],{"class":4342}," false",[560,6670,4679],{"class":606},[560,6672,6673],{"class":1154},"// hide / show\n",[560,6675,6676,6678,6680,6682,6684],{"class":562,"line":652},[560,6677,3680],{"class":606},[560,6679,1069],{"class":565},[560,6681,6505],{"class":2379},[560,6683,6631],{"class":606},[560,6685,6686],{"class":1154},"// delete\n",[536,6688,6689,6690,6693,6694,6696,6697,6699,6700,6702],{},"When the targeted id matches the ",[1614,6691,6692],{},"currently editing"," entry, mutations\nland on the in-flight buffer (committed on ",[540,6695,5970],{},", reverted on ",[540,6698,5807],{},").\nOtherwise they update ",[540,6701,2963],{}," immediately and record history.",[3996,6704,6706],{"id":6705},"batched-mesh-updates","Batched mesh updates",[549,6708,6710],{"className":1131,"code":6709,"language":587,"meta":508,"style":508},"session.setMeshData(meshName, nextEntries, { recordHistory: true })\n",[540,6711,6712],{"__ignoreMap":508},[560,6713,6714,6716,6718,6720,6723,6725,6728,6730,6732,6735,6737,6739,6741],{"class":562,"line":509},[560,6715,3680],{"class":606},[560,6717,1069],{"class":565},[560,6719,6509],{"class":2379},[560,6721,6722],{"class":606},"(meshName",[560,6724,610],{"class":565},[560,6726,6727],{"class":606}," nextEntries",[560,6729,610],{"class":565},[560,6731,603],{"class":565},[560,6733,6734],{"class":569}," recordHistory",[560,6736,1163],{"class":565},[560,6738,4343],{"class":4342},[560,6740,616],{"class":565},[560,6742,2393],{"class":606},[536,6744,6745,6746,6748],{},"A single emit avoids the stale-snapshot race that hits multiple\nback-to-back ",[540,6747,6499],{}," calls in the same tick.",[3996,6750,6752],{"id":6751},"listening-to-commits","Listening to commits",[549,6754,6756],{"className":1131,"code":6755,"language":587,"meta":508,"style":508},"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",[540,6757,6758,6793,6818,6824,6852,6875,6879,6884],{"__ignoreMap":508},[560,6759,6760,6762,6765,6767,6770,6772,6775,6777,6779,6782,6784,6787,6789,6791],{"class":562,"line":509},[560,6761,2360],{"class":573},[560,6763,6764],{"class":606}," off ",[560,6766,580],{"class":565},[560,6768,6769],{"class":606}," session",[560,6771,1069],{"class":565},[560,6773,6774],{"class":2379},"onCommit",[560,6776,2382],{"class":606},[560,6778,2382],{"class":565},[560,6780,5790],{"class":6781},"sHdIc",[560,6783,610],{"class":565},[560,6785,6786],{"class":6781}," mode",[560,6788,3285],{"class":565},[560,6790,3622],{"class":573},[560,6792,1149],{"class":565},[560,6794,6795,6798,6800,6803,6805,6808,6810,6813,6815],{"class":562,"line":510},[560,6796,6797],{"class":606},"  console",[560,6799,1069],{"class":565},[560,6801,6802],{"class":2379},"log",[560,6804,2382],{"class":569},[560,6806,6807],{"class":606},"mode",[560,6809,610],{"class":565},[560,6811,6812],{"class":606}," entry",[560,6814,4679],{"class":569},[560,6816,6817],{"class":1154},"// mode: 'create' | 'update'\n",[560,6819,6820,6822],{"class":562,"line":631},[560,6821,2373],{"class":565},[560,6823,2393],{"class":606},[560,6825,6826,6828,6830,6833,6835,6837,6839,6841,6843,6845,6848,6850],{"class":562,"line":652},[560,6827,3680],{"class":606},[560,6829,1069],{"class":565},[560,6831,6832],{"class":2379},"onDelete",[560,6834,2382],{"class":606},[560,6836,2382],{"class":565},[560,6838,5790],{"class":6781},[560,6840,3285],{"class":565},[560,6842,3622],{"class":573},[560,6844,603],{"class":565},[560,6846,6847],{"class":1154}," /* … */",[560,6849,616],{"class":565},[560,6851,2393],{"class":606},[560,6853,6854,6856,6858,6861,6863,6865,6867,6869,6871,6873],{"class":562,"line":662},[560,6855,3680],{"class":606},[560,6857,1069],{"class":565},[560,6859,6860],{"class":2379},"onCancel",[560,6862,2382],{"class":606},[560,6864,3619],{"class":565},[560,6866,3622],{"class":573},[560,6868,603],{"class":565},[560,6870,6847],{"class":1154},[560,6872,616],{"class":565},[560,6874,2393],{"class":606},[560,6876,6877],{"class":562,"line":668},[560,6878,665],{"emptyLinePlaceholder":516},[560,6880,6881],{"class":562,"line":678},[560,6882,6883],{"class":1154},"// All return an unsubscribe function:\n",[560,6885,6886,6889],{"class":562,"line":701},[560,6887,6888],{"class":2379},"onBeforeUnmount",[560,6890,6891],{"class":606},"(off)\n",[3996,6893,6895],{"id":6894},"undo-redo","Undo / redo",[549,6897,6899],{"className":1131,"code":6898,"language":587,"meta":508,"style":508},"session.canUndo.value // Ref\u003Cboolean>\nsession.undo() // returns true if something was undone\nsession.redo()\n",[540,6900,6901,6916,6931],{"__ignoreMap":508},[560,6902,6903,6905,6907,6909,6911,6914],{"class":562,"line":509},[560,6904,3680],{"class":606},[560,6906,1069],{"class":565},[560,6908,6490],{"class":606},[560,6910,1069],{"class":565},[560,6912,6913],{"class":606},"value ",[560,6915,6600],{"class":1154},[560,6917,6918,6920,6922,6925,6928],{"class":562,"line":510},[560,6919,3680],{"class":606},[560,6921,1069],{"class":565},[560,6923,6924],{"class":2379},"undo",[560,6926,6927],{"class":606},"() ",[560,6929,6930],{"class":1154},"// returns true if something was undone\n",[560,6932,6933,6935,6937,6940],{"class":562,"line":631},[560,6934,3680],{"class":606},[560,6936,1069],{"class":565},[560,6938,6939],{"class":2379},"redo",[560,6941,6478],{"class":606},[536,6943,6944],{},"History is per-canvas, capped at 100 operations, disabled mid-edit.",[3996,6946,6948],{"id":6947},"power-user-external-entries","Power user — external entries",[536,6950,6951,6952,6954,6955,6958,6959,6962],{},"Plug a decal-like object that lives outside a ",[540,6953,2155],{}," (custom data\nsource, server snapshot, fake entry for tests) by registering a\n",[540,6956,6957],{},"DecalEntryActions"," bundle so the ",[540,6960,6961],{},"*ById"," session methods route to it:",[549,6964,6966],{"className":1131,"code":6965,"language":587,"meta":508,"style":508},"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",[540,6967,6968,6989,6993,7014,7033,7055,7077,7094,7105],{"__ignoreMap":508},[560,6969,6970,6972,6974,6976,6979,6981,6983,6985,6987],{"class":562,"line":509},[560,6971,600],{"class":599},[560,6973,3387],{"class":599},[560,6975,603],{"class":565},[560,6977,6978],{"class":606}," DecalEntryActions",[560,6980,616],{"class":565},[560,6982,619],{"class":599},[560,6984,622],{"class":565},[560,6986,625],{"class":586},[560,6988,628],{"class":565},[560,6990,6991],{"class":562,"line":510},[560,6992,665],{"emptyLinePlaceholder":516},[560,6994,6995,6997,6999,7001,7003,7005,7008,7010,7012],{"class":562,"line":631},[560,6996,3680],{"class":606},[560,6998,1069],{"class":565},[560,7000,6513],{"class":2379},[560,7002,2382],{"class":606},[560,7004,2385],{"class":565},[560,7006,7007],{"class":586},"decal-7",[560,7009,2385],{"class":565},[560,7011,610],{"class":565},[560,7013,1149],{"class":565},[560,7015,7016,7019,7021,7024,7026,7028,7030],{"class":562,"line":652},[560,7017,7018],{"class":2379},"  beginEdit",[560,7020,1163],{"class":565},[560,7022,7023],{"class":565}," ()",[560,7025,3622],{"class":573},[560,7027,603],{"class":565},[560,7029,6847],{"class":1154},[560,7031,7032],{"class":565}," },\n",[560,7034,7035,7038,7040,7042,7045,7047,7049,7051,7053],{"class":562,"line":662},[560,7036,7037],{"class":2379},"  setZIndex",[560,7039,1163],{"class":565},[560,7041,3019],{"class":565},[560,7043,7044],{"class":6781},"newZ",[560,7046,3285],{"class":565},[560,7048,3622],{"class":573},[560,7050,603],{"class":565},[560,7052,6847],{"class":1154},[560,7054,7032],{"class":565},[560,7056,7057,7060,7062,7064,7067,7069,7071,7073,7075],{"class":562,"line":668},[560,7058,7059],{"class":2379},"  setVisibility",[560,7061,1163],{"class":565},[560,7063,3019],{"class":565},[560,7065,7066],{"class":6781},"visible",[560,7068,3285],{"class":565},[560,7070,3622],{"class":573},[560,7072,603],{"class":565},[560,7074,6847],{"class":1154},[560,7076,7032],{"class":565},[560,7078,7079,7082,7084,7086,7088,7090,7092],{"class":562,"line":678},[560,7080,7081],{"class":2379},"  remove",[560,7083,1163],{"class":565},[560,7085,7023],{"class":565},[560,7087,3622],{"class":573},[560,7089,603],{"class":565},[560,7091,6847],{"class":1154},[560,7093,7032],{"class":565},[560,7095,7096,7098,7101,7103],{"class":562,"line":701},[560,7097,2373],{"class":565},[560,7099,7100],{"class":599}," satisfies",[560,7102,6978],{"class":1145},[560,7104,2393],{"class":606},[560,7106,7107,7109,7111,7113,7115,7117,7119,7122,7124,7126,7128,7130],{"class":562,"line":713},[560,7108,6888],{"class":2379},[560,7110,2382],{"class":606},[560,7112,3619],{"class":565},[560,7114,3622],{"class":573},[560,7116,6769],{"class":606},[560,7118,1069],{"class":565},[560,7120,7121],{"class":2379},"unregisterDecalEntry",[560,7123,2382],{"class":606},[560,7125,2385],{"class":565},[560,7127,7007],{"class":586},[560,7129,2385],{"class":565},[560,7131,7132],{"class":606},"))\n",[3996,7134,7136],{"id":7135},"helper-utilities","Helper utilities",[850,7138,7139,7148],{},[853,7140,7141],{},[856,7142,7143,7145],{},[859,7144,315],{},[859,7146,7147],{},"Use",[869,7149,7150,7170,7182,7195],{},[856,7151,7152,7157],{},[874,7153,7154],{},[540,7155,7156],{},"ensureTextureNames(textures)",[874,7158,7159,7160,7162,7163,7166,7167,1069],{},"Back-fills ",[540,7161,2922],{}," from ",[540,7164,7165],{},"userData.name"," or the filename in ",[540,7168,7169],{},"image.src",[856,7171,7172,7177],{},[874,7173,7174],{},[540,7175,7176],{},"getTextureName(texture)",[874,7178,7179,7180,1069],{},"Single-texture variant — returns a stable name or ",[540,7181,3601],{},[856,7183,7184,7189],{},[874,7185,7186],{},[540,7187,7188],{},"getTextureAspect(texture)",[874,7190,7191,7194],{},[540,7192,7193],{},"{ x, y }"," aspect ratio for custom-sized decals.",[856,7196,7197,7202],{},[874,7198,7199],{},[540,7200,7201],{},"invalidateDecalGeometry(mesh)",[874,7203,7204],{},"Force a rebuild on the next frame — call when the parent mesh moved or swapped.",[1272,7206,7207],{},"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":508,"searchDepth":509,"depth":510,"links":7209},[7210,7211,7212,7213,7214,7218,7219,7227,7228,7230,7232,7234,7236,7238,7239,7240,7241],{"id":547,"depth":510,"text":15},{"id":2735,"depth":510,"text":2736},{"id":2930,"depth":510,"text":2204},{"id":3027,"depth":510,"text":3028},{"id":3122,"depth":510,"text":7215,"children":7216},"Editable mode + \u003CDecalDebugUI>",[7217],{"id":3998,"depth":631,"text":3999},{"id":4118,"depth":510,"text":3324},{"id":4217,"depth":510,"text":7220,"children":7221},"Targeting a loaded model (.glb)",[7222,7224,7226],{"id":4244,"depth":631,"text":7223},"When :object is a Mesh",{"id":4466,"depth":631,"text":7225},"When :object is a Group",{"id":4807,"depth":631,"text":4808},{"id":5233,"depth":510,"text":5234},{"id":5490,"depth":510,"text":7229},"\u003CDecal> props",{"id":5692,"depth":510,"text":7231},"\u003CDecal> events",{"id":5831,"depth":510,"text":7233},"\u003CDecal> exposed (via ref)",{"id":6004,"depth":510,"text":7235},"\u003CDecalDebugUI> props",{"id":6155,"depth":510,"text":7237},"\u003CDecalDebugUI> events",{"id":6201,"depth":510,"text":6202},{"id":6261,"depth":510,"text":6262},{"id":6336,"depth":510,"text":6337},{"id":6418,"depth":510,"text":7242},"Programmatic API (useDecalEditor)","Project a texture onto a mesh's surface — with an optional in-canvas editor UI.",{},{"title":53,"description":7243},"nqt2hDhRcN1seFAcvm0knRwz3m-KmMDv-8VwRbWGyfQ",{"id":7248,"title":57,"body":7249,"description":7537,"extension":513,"links":514,"meta":7538,"navigation":516,"path":58,"seo":7539,"stem":59,"__hash__":7540},"docs/2.api/1.abstractions/edges.md",{"type":501,"value":7250,"toc":7533},[7251,7256,7272,7274,7451,7453,7470,7531],[530,7252,7253],{},[7254,7255],"abstractions-edges",{},[536,7257,2721,7258,7261,7262,7267,7268,7271],{},[540,7259,7260],{},"cientos"," package provides an abstraction of ",[1063,7263,7266],{"href":7264,"rel":7265},"https://threejs.org/docs/#api/en/geometries/EdgesGeometry",[1067],"EdgesGeometry"," from Three.js, ",[540,7269,7270],{},"\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.",[545,7273,15],{"id":547},[549,7275,7278],{"className":551,"code":7276,"highlights":7277,"language":556,"meta":508,"style":508},"\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",[631,750],[540,7279,7280,7300,7318,7346,7354,7358,7366,7374,7393,7401,7409,7418,7427,7435,7443],{"__ignoreMap":508},[560,7281,7282,7284,7286,7288,7290,7292,7294,7296,7298],{"class":562,"line":509},[560,7283,566],{"class":565},[560,7285,570],{"class":569},[560,7287,574],{"class":573},[560,7289,577],{"class":573},[560,7291,580],{"class":565},[560,7293,583],{"class":565},[560,7295,587],{"class":586},[560,7297,583],{"class":565},[560,7299,592],{"class":565},[560,7301,7302,7304,7306,7308,7310,7312,7314,7316],{"class":562,"line":510},[560,7303,600],{"class":599},[560,7305,603],{"class":565},[560,7307,638],{"class":606},[560,7309,616],{"class":565},[560,7311,619],{"class":599},[560,7313,622],{"class":565},[560,7315,647],{"class":586},[560,7317,628],{"class":565},[560,7319,7321,7323,7325,7327,7329,7332,7334,7336,7338,7340,7342,7344],{"class":7320,"line":631},[562,596],[560,7322,600],{"class":599},[560,7324,603],{"class":565},[560,7326,1342],{"class":606},[560,7328,610],{"class":565},[560,7330,7331],{"class":606}," Edges",[560,7333,610],{"class":565},[560,7335,613],{"class":606},[560,7337,616],{"class":565},[560,7339,619],{"class":599},[560,7341,622],{"class":565},[560,7343,625],{"class":586},[560,7345,628],{"class":565},[560,7347,7348,7350,7352],{"class":562,"line":652},[560,7349,655],{"class":565},[560,7351,570],{"class":569},[560,7353,592],{"class":565},[560,7355,7356],{"class":562,"line":662},[560,7357,665],{"emptyLinePlaceholder":516},[560,7359,7360,7362,7364],{"class":562,"line":668},[560,7361,566],{"class":565},[560,7363,673],{"class":569},[560,7365,592],{"class":565},[560,7367,7368,7370,7372],{"class":562,"line":678},[560,7369,681],{"class":565},[560,7371,684],{"class":569},[560,7373,592],{"class":565},[560,7375,7376,7378,7380,7382,7384,7386,7389,7391],{"class":562,"line":701},[560,7377,704],{"class":565},[560,7379,707],{"class":569},[560,7381,1430],{"class":573},[560,7383,580],{"class":565},[560,7385,583],{"class":565},[560,7387,7388],{"class":586},"[0, 2, 5]",[560,7390,583],{"class":565},[560,7392,710],{"class":565},[560,7394,7395,7397,7399],{"class":562,"line":713},[560,7396,704],{"class":565},[560,7398,718],{"class":569},[560,7400,710],{"class":565},[560,7402,7403,7405,7407],{"class":562,"line":723},[560,7404,704],{"class":565},[560,7406,217],{"class":569},[560,7408,592],{"class":565},[560,7410,7411,7413,7416],{"class":562,"line":728},[560,7412,776],{"class":565},[560,7414,7415],{"class":569},"TresMeshBasicMaterial",[560,7417,710],{"class":565},[560,7419,7421,7423,7425],{"class":7420,"line":750},[562,596],[560,7422,776],{"class":565},[560,7424,57],{"class":569},[560,7426,710],{"class":565},[560,7428,7429,7431,7433],{"class":562,"line":554},[560,7430,818],{"class":565},[560,7432,217],{"class":569},[560,7434,592],{"class":565},[560,7436,7437,7439,7441],{"class":562,"line":773},[560,7438,828],{"class":565},[560,7440,684],{"class":569},[560,7442,592],{"class":565},[560,7444,7445,7447,7449],{"class":562,"line":784},[560,7446,655],{"class":565},[560,7448,673],{"class":569},[560,7450,592],{"class":565},[545,7452,845],{"id":844},[536,7454,7455,7457,7458,7463,7464,7469],{},[540,7456,7270],{}," is based on ",[1063,7459,7462],{"href":7460,"rel":7461},"https://threejs.org/docs/#api/en/objects/LineSegments",[1067],"LineSegments"," & ",[1063,7465,7468],{"href":7466,"rel":7467},"https://threejs.org/docs/#api/en/objects/Line",[1067],"Line"," and supports all of its props.",[850,7471,7472,7482],{},[853,7473,7474],{},[856,7475,7476,7478,7480],{},[859,7477,861],{"align":920},[859,7479,864],{"align":920},[859,7481,867],{},[869,7483,7484,7515],{},[856,7485,7486,7491,7510],{},[874,7487,7488],{"align":920},[1614,7489,7490],{},"color",[874,7492,7493,7496,7497,7500,7501,2212,7506],{"align":920},[540,7494,7495],{},"THREE.Color"," — Color of the edges. ",[7498,7499],"br",{}," More informations : ",[1063,7502,7505],{"href":7503,"rel":7504},"https://docs.tresjs.org/api/instances-arguments-and-props.html#colors",[1067],"TresColor",[1063,7507,7495],{"href":7508,"rel":7509},"https://threejs.org/docs/#api/en/math/Color",[1067],[874,7511,7512],{},[540,7513,7514],{},"#ff0000",[856,7516,7517,7522,7527],{},[874,7518,7519],{"align":920},[1614,7520,7521],{},"threshold",[874,7523,7524,7526],{"align":920},[540,7525,5297],{}," — An edge is only rendered if the angle (in degrees) between the face normals of the adjoining faces exceeds this value",[874,7528,7529],{},[540,7530,1819],{},[1272,7532,1589],{},{"title":508,"searchDepth":509,"depth":510,"links":7534},[7535,7536],{"id":547,"depth":510,"text":15},{"id":844,"depth":510,"text":845},"Render visible edges of objects with enhanced visual quality.",{},{"title":57,"description":7537},"mRAeZ9k02RaCisz4JzfTtekMB9_pkyMIRW_17D1E3qo",{"id":7542,"title":61,"body":7543,"description":8162,"extension":513,"links":514,"meta":8163,"navigation":516,"path":62,"seo":8164,"stem":63,"__hash__":8165},"docs/2.api/1.abstractions/fit.md",{"type":501,"value":7544,"toc":8158},[7545,7550,7556,7566,7572,7574,8022,8024,8155],[2240,7546,7547],{},[7548,7549],"abstractions-fit",{},[536,7551,7552,7555],{},[540,7553,7554],{},"\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.",[536,7557,7558,7559,7562,7563,1069],{},"Alternatively, the children can be fit into a ",[540,7560,7561],{},"Box3"," or an ",[540,7564,7565],{},"Object3D",[536,7567,7568,7569,7571],{},"Or the children can simply be resized. With ",[540,7570,7554],{}," the children are scaled relative to the center of their calculated bounding box.",[545,7573,15],{"id":547},[549,7575,7578],{"className":551,"code":7576,"highlights":7577,"language":556,"meta":508,"style":508},"\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",[510,835,2648],[540,7579,7580,7600,7624,7642,7666,7670,7689,7731,7769,7796,7801,7805,7821,7836,7844,7848,7856,7875,7893,7901,7910,7916,7930,7944,7958,7972,7977,7986,8006,8014],{"__ignoreMap":508},[560,7581,7582,7584,7586,7588,7590,7592,7594,7596,7598],{"class":562,"line":509},[560,7583,566],{"class":565},[560,7585,570],{"class":569},[560,7587,574],{"class":573},[560,7589,577],{"class":573},[560,7591,580],{"class":565},[560,7593,583],{"class":565},[560,7595,587],{"class":586},[560,7597,583],{"class":565},[560,7599,592],{"class":565},[560,7601,7603,7605,7607,7610,7612,7614,7616,7618,7620,7622],{"class":7602,"line":510},[562,596],[560,7604,600],{"class":599},[560,7606,603],{"class":565},[560,7608,7609],{"class":606}," Fit",[560,7611,610],{"class":565},[560,7613,613],{"class":606},[560,7615,616],{"class":565},[560,7617,619],{"class":599},[560,7619,622],{"class":565},[560,7621,625],{"class":586},[560,7623,628],{"class":565},[560,7625,7626,7628,7630,7632,7634,7636,7638,7640],{"class":562,"line":631},[560,7627,600],{"class":599},[560,7629,603],{"class":565},[560,7631,638],{"class":606},[560,7633,616],{"class":565},[560,7635,619],{"class":599},[560,7637,622],{"class":565},[560,7639,647],{"class":586},[560,7641,628],{"class":565},[560,7643,7644,7646,7648,7651,7653,7656,7658,7660,7662,7664],{"class":562,"line":652},[560,7645,600],{"class":599},[560,7647,603],{"class":565},[560,7649,7650],{"class":606}," BoxGeometry",[560,7652,610],{"class":565},[560,7654,7655],{"class":606}," MeshNormalMaterial",[560,7657,616],{"class":565},[560,7659,619],{"class":599},[560,7661,622],{"class":565},[560,7663,4571],{"class":586},[560,7665,628],{"class":565},[560,7667,7668],{"class":562,"line":662},[560,7669,665],{"emptyLinePlaceholder":516},[560,7671,7672,7674,7677,7679,7681,7684,7686],{"class":562,"line":668},[560,7673,2360],{"class":573},[560,7675,7676],{"class":606}," positions",[560,7678,1163],{"class":565},[560,7680,5302],{"class":1145},[560,7682,7683],{"class":606},"[][] ",[560,7685,580],{"class":565},[560,7687,7688],{"class":606}," []\n",[560,7690,7691,7694,7696,7699,7702,7704,7707,7709,7711,7714,7717,7719,7721,7724,7727,7729],{"class":562,"line":678},[560,7692,7693],{"class":599},"for",[560,7695,3019],{"class":606},[560,7697,7698],{"class":573},"let",[560,7700,7701],{"class":606}," y ",[560,7703,580],{"class":565},[560,7705,7706],{"class":2446}," 100",[560,7708,4083],{"class":565},[560,7710,7701],{"class":606},[560,7712,7713],{"class":565},"\u003C=",[560,7715,7716],{"class":2446}," 120",[560,7718,4083],{"class":565},[560,7720,7701],{"class":606},[560,7722,7723],{"class":565},"+=",[560,7725,7726],{"class":2446}," 10",[560,7728,4679],{"class":606},[560,7730,3205],{"class":565},[560,7732,7733,7736,7738,7740,7743,7745,7747,7749,7751,7754,7756,7758,7760,7763,7765,7767],{"class":562,"line":701},[560,7734,7735],{"class":599},"  for",[560,7737,3019],{"class":569},[560,7739,7698],{"class":573},[560,7741,7742],{"class":606}," x",[560,7744,2376],{"class":565},[560,7746,7706],{"class":2446},[560,7748,4083],{"class":565},[560,7750,7742],{"class":606},[560,7752,7753],{"class":565}," \u003C=",[560,7755,7716],{"class":2446},[560,7757,4083],{"class":565},[560,7759,7742],{"class":606},[560,7761,7762],{"class":565}," +=",[560,7764,7726],{"class":2446},[560,7766,4679],{"class":569},[560,7768,3205],{"class":565},[560,7770,7771,7774,7776,7779,7781,7784,7786,7789,7791,7794],{"class":562,"line":713},[560,7772,7773],{"class":606},"    positions",[560,7775,1069],{"class":565},[560,7777,7778],{"class":2379},"push",[560,7780,3474],{"class":569},[560,7782,7783],{"class":606},"x",[560,7785,610],{"class":565},[560,7787,7788],{"class":606}," y",[560,7790,610],{"class":565},[560,7792,7793],{"class":2446}," 9999",[560,7795,2547],{"class":569},[560,7797,7798],{"class":562,"line":723},[560,7799,7800],{"class":565},"  }\n",[560,7802,7803],{"class":562,"line":728},[560,7804,1270],{"class":565},[560,7806,7807,7809,7812,7814,7817,7819],{"class":562,"line":750},[560,7808,2360],{"class":573},[560,7810,7811],{"class":606}," geom ",[560,7813,580],{"class":565},[560,7815,7816],{"class":565}," new",[560,7818,7650],{"class":2379},[560,7820,6478],{"class":606},[560,7822,7823,7825,7828,7830,7832,7834],{"class":562,"line":554},[560,7824,2360],{"class":573},[560,7826,7827],{"class":606}," mat ",[560,7829,580],{"class":565},[560,7831,7816],{"class":565},[560,7833,7655],{"class":2379},[560,7835,6478],{"class":606},[560,7837,7838,7840,7842],{"class":562,"line":773},[560,7839,655],{"class":565},[560,7841,570],{"class":569},[560,7843,592],{"class":565},[560,7845,7846],{"class":562,"line":784},[560,7847,665],{"emptyLinePlaceholder":516},[560,7849,7850,7852,7854],{"class":562,"line":795},[560,7851,566],{"class":565},[560,7853,673],{"class":569},[560,7855,592],{"class":565},[560,7857,7858,7860,7862,7864,7866,7868,7871,7873],{"class":562,"line":805},[560,7859,681],{"class":565},[560,7861,684],{"class":569},[560,7863,687],{"class":573},[560,7865,580],{"class":565},[560,7867,583],{"class":565},[560,7869,7870],{"class":586},"#4F4F4F",[560,7872,583],{"class":565},[560,7874,592],{"class":565},[560,7876,7877,7879,7881,7883,7885,7887,7889,7891],{"class":562,"line":555},[560,7878,704],{"class":565},[560,7880,707],{"class":569},[560,7882,1430],{"class":573},[560,7884,580],{"class":565},[560,7886,583],{"class":565},[560,7888,1911],{"class":586},[560,7890,583],{"class":565},[560,7892,710],{"class":565},[560,7894,7895,7897,7899],{"class":562,"line":825},[560,7896,704],{"class":565},[560,7898,718],{"class":569},[560,7900,710],{"class":565},[560,7902,7904,7906,7908],{"class":7903,"line":835},[562,596],[560,7905,704],{"class":565},[560,7907,61],{"class":569},[560,7909,592],{"class":565},[560,7911,7912,7914],{"class":562,"line":2570},[560,7913,776],{"class":565},[560,7915,5071],{"class":569},[560,7917,7918,7921,7923,7925,7928],{"class":562,"line":2579},[560,7919,7920],{"class":573},"        v-for",[560,7922,580],{"class":565},[560,7924,583],{"class":565},[560,7926,7927],{"class":586},"(pos, index) in positions",[560,7929,3076],{"class":565},[560,7931,7932,7935,7937,7939,7942],{"class":562,"line":2599},[560,7933,7934],{"class":573},"        :key",[560,7936,580],{"class":565},[560,7938,583],{"class":565},[560,7940,7941],{"class":586},"index",[560,7943,3076],{"class":565},[560,7945,7946,7949,7951,7953,7956],{"class":562,"line":2608},[560,7947,7948],{"class":573},"        :position",[560,7950,580],{"class":565},[560,7952,583],{"class":565},[560,7954,7955],{"class":586},"pos",[560,7957,3076],{"class":565},[560,7959,7960,7963,7965,7967,7970],{"class":562,"line":2617},[560,7961,7962],{"class":573},"        :args",[560,7964,580],{"class":565},[560,7966,583],{"class":565},[560,7968,7969],{"class":586},"[geom, mat]",[560,7971,3076],{"class":565},[560,7973,7974],{"class":562,"line":2626},[560,7975,7976],{"class":565},"      />\n",[560,7978,7980,7982,7984],{"class":7979,"line":2648},[562,596],[560,7981,818],{"class":565},[560,7983,61],{"class":569},[560,7985,592],{"class":565},[560,7987,7988,7990,7993,7995,7997,7999,8002,8004],{"class":562,"line":2692},[560,7989,704],{"class":565},[560,7991,7992],{"class":569},"TresGridHelper",[560,7994,1904],{"class":573},[560,7996,580],{"class":565},[560,7998,583],{"class":565},[560,8000,8001],{"class":586},"[1, 1]",[560,8003,583],{"class":565},[560,8005,710],{"class":565},[560,8007,8008,8010,8012],{"class":562,"line":2701},[560,8009,828],{"class":565},[560,8011,684],{"class":569},[560,8013,592],{"class":565},[560,8015,8016,8018,8020],{"class":562,"line":2710},[560,8017,655],{"class":565},[560,8019,673],{"class":569},[560,8021,592],{"class":565},[545,8023,845],{"id":844},[850,8025,8026,8035],{},[853,8027,8028],{},[856,8029,8030,8033],{},[859,8031,8032],{"align":920},"Name",[859,8034,864],{"align":920},[869,8036,8037,8131],{},[856,8038,8039,8044],{},[874,8040,8041],{"align":920},[1614,8042,8043],{},"into",[874,8045,881,8046,8048,8049,8123,8125,8126,8128],{"align":920},[540,8047,8043],{}," is:",[2158,8050,8051,8060,8068,8076,8084,8095,8102],{},[2161,8052,8053,8054,8056,8057,8059],{},"omitted or explicitly ",[540,8055,1090],{},": position/scale children to fit into a 1 × 1 × 1 ",[540,8058,7561],{}," at world origin.",[2161,8061,8062,8064,8065,8067],{},[540,8063,3601],{},": turn off ",[540,8066,7554],{},"; reset scale/position of children.",[2161,8069,8070,8072,8073,1069],{},[540,8071,5297],{},": convert argument to ",[540,8074,8075],{},"Vector3(number, number, number)",[2161,8077,8078,8072,8081,1069],{},[540,8079,8080],{},"[number, number, number]",[540,8082,8083],{},"Vector3",[2161,8085,8086,8088,8089,8091,8092,8094],{},[540,8087,8083],{},": position/scale children to fit inside a ",[540,8090,7561],{}," of size ",[540,8093,8083],{}," at target objects' cumulative center.",[2161,8096,8097,8099,8100,1069],{},[540,8098,7561],{},": position/scale children to fit inside ",[540,8101,7561],{},[2161,8103,8104,8106,8107,8109,8110,8109,8117,8119,8120,8122],{},[540,8105,7565],{},": position/scale children to fit inside calculated ",[540,8108,7561],{},". ",[1063,8111,1061,8114],{"href":8112,"rel":8113},"https://threejs.org/docs/#api/en/math/Box3.setFromObject",[1067],[540,8115,8116],{},"THREE.Box3.setFromObject",[540,8118,7554],{}," must not contain the ",[540,8121,7565],{}," and vice-versa.",[7498,8124],{},"default:",[7498,8127],{},[540,8129,8130],{},"new Box3(new Vector3(-0.5, -0.5, -0.5), new Vector3(0.5, 0.5, 0.5))",[856,8132,8133,8137],{},[874,8134,8135],{"align":920},[1614,8136,1058],{},[874,8138,8139,8147,8149,8125,8151,8153],{"align":920},[1063,8140,1061,8142,8144,8145],{"href":1065,"rel":8141},[1067],[540,8143,1058],{}," argument in ",[540,8146,8116],{},[7498,8148],{},[7498,8150],{},[7498,8152],{},[540,8154,894],{},[1272,8156,8157],{},"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":508,"searchDepth":509,"depth":510,"links":8159},[8160,8161],{"id":547,"depth":510,"text":15},{"id":844,"depth":510,"text":845},"Uniformly scale and position children to fit into a defined space.",{},{"title":61,"description":8162},"8AurvuiiZvTbSuZQKf_ksydDO09mH9Fnt7AaTb_9ZtA",{"id":8167,"title":65,"body":8168,"description":9387,"extension":513,"links":514,"meta":9388,"navigation":516,"path":66,"seo":9389,"stem":67,"__hash__":9390},"docs/2.api/1.abstractions/instances.md",{"type":501,"value":8169,"toc":9373},[8170,8175,8197,8214,8216,8624,8636,8640,8652,8721,8725,8728,8785,8789,8792,8805,8808,8812,8815,8890,8894,8909,8979,9007,9014,9018,9027,9077,9080,9084,9087,9105,9111,9114,9154,9170,9172,9175,9261,9270,9272,9351,9361,9370],[530,8171,8172],{},[8173,8174],"abstractions-instances",{},[536,8176,8177,8178,8181,8182,3008,8185,8188,8189,8192,8193,8196],{},"Rendering the same mesh many times is one drawcall per copy, and drawcalls are what a scene runs\nout of first. ",[540,8179,8180],{},"\u003CInstances />"," owns a single ",[540,8183,8184],{},"THREE.InstancedMesh",[540,8186,8187],{},"\u003CInstance />"," is a\nplaceholder that registers itself with it, so a ",[540,8190,8191],{},"v-for"," of a thousand nodes costs ",[1614,8194,8195],{},"one"," drawcall.",[536,8198,8199,8200,8202,8203,8205,8206,8209,8210,8213],{},"An ",[540,8201,8187],{}," behaves like any other node in the graph: give it ",[540,8204,4075],{},", nest it under a\ngroup, animate that group, toggle it with ",[540,8207,8208],{},"v-if",", listen for ",[540,8211,8212],{},"@click"," on one of them.",[545,8215,15],{"id":547},[549,8217,8220],{"className":551,"code":8218,"highlights":8219,"language":556,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Instance, Instances } from '@tresjs/cientos'\nimport { BoxGeometry, MeshStandardMaterial } from 'three'\n\nconst geometry = new BoxGeometry(0.35, 0.35, 0.35)\nconst material = new MeshStandardMaterial()\n\nconst cubes = Array.from({ length: 900 }, (_, i) => [i % 30 - 15, 0, Math.floor(i / 30) - 15])\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[14, 10, 14]\" />\n    \u003CInstances :geometry=\"geometry\" :material=\"material\">\n      \u003CInstance\n        v-for=\"(position, i) in cubes\"\n        :key=\"i\"\n        :position=\"position\"\n        color=\"#38bdf8\"\n      />\n    \u003C/Instances>\n  \u003C/TresCanvas>\n\u003C/template>\n",[631,773,795,805,555,825,835,2570],[540,8221,8222,8242,8260,8285,8308,8312,8341,8356,8360,8453,8461,8465,8473,8481,8501,8531,8539,8553,8567,8580,8595,8600,8608,8616],{"__ignoreMap":508},[560,8223,8224,8226,8228,8230,8232,8234,8236,8238,8240],{"class":562,"line":509},[560,8225,566],{"class":565},[560,8227,570],{"class":569},[560,8229,574],{"class":573},[560,8231,577],{"class":573},[560,8233,580],{"class":565},[560,8235,583],{"class":565},[560,8237,587],{"class":586},[560,8239,583],{"class":565},[560,8241,592],{"class":565},[560,8243,8244,8246,8248,8250,8252,8254,8256,8258],{"class":562,"line":510},[560,8245,600],{"class":599},[560,8247,603],{"class":565},[560,8249,638],{"class":606},[560,8251,616],{"class":565},[560,8253,619],{"class":599},[560,8255,622],{"class":565},[560,8257,647],{"class":586},[560,8259,628],{"class":565},[560,8261,8263,8265,8267,8270,8272,8275,8277,8279,8281,8283],{"class":8262,"line":631},[562,596],[560,8264,600],{"class":599},[560,8266,603],{"class":565},[560,8268,8269],{"class":606}," Instance",[560,8271,610],{"class":565},[560,8273,8274],{"class":606}," Instances",[560,8276,616],{"class":565},[560,8278,619],{"class":599},[560,8280,622],{"class":565},[560,8282,625],{"class":586},[560,8284,628],{"class":565},[560,8286,8287,8289,8291,8293,8295,8298,8300,8302,8304,8306],{"class":562,"line":652},[560,8288,600],{"class":599},[560,8290,603],{"class":565},[560,8292,7650],{"class":606},[560,8294,610],{"class":565},[560,8296,8297],{"class":606}," MeshStandardMaterial",[560,8299,616],{"class":565},[560,8301,619],{"class":599},[560,8303,622],{"class":565},[560,8305,4571],{"class":586},[560,8307,628],{"class":565},[560,8309,8310],{"class":562,"line":662},[560,8311,665],{"emptyLinePlaceholder":516},[560,8313,8314,8316,8319,8321,8323,8325,8327,8330,8332,8335,8337,8339],{"class":562,"line":668},[560,8315,2360],{"class":573},[560,8317,8318],{"class":606}," geometry ",[560,8320,580],{"class":565},[560,8322,7816],{"class":565},[560,8324,7650],{"class":2379},[560,8326,2382],{"class":606},[560,8328,8329],{"class":2446},"0.35",[560,8331,610],{"class":565},[560,8333,8334],{"class":2446}," 0.35",[560,8336,610],{"class":565},[560,8338,8334],{"class":2446},[560,8340,2393],{"class":606},[560,8342,8343,8345,8348,8350,8352,8354],{"class":562,"line":678},[560,8344,2360],{"class":573},[560,8346,8347],{"class":606}," material ",[560,8349,580],{"class":565},[560,8351,7816],{"class":565},[560,8353,8297],{"class":2379},[560,8355,6478],{"class":606},[560,8357,8358],{"class":562,"line":701},[560,8359,665],{"emptyLinePlaceholder":516},[560,8361,8362,8364,8367,8369,8372,8374,8377,8379,8382,8385,8387,8390,8393,8395,8398,8400,8403,8405,8407,8410,8413,8416,8419,8422,8424,8426,8428,8431,8433,8436,8439,8442,8444,8446,8449,8451],{"class":562,"line":713},[560,8363,2360],{"class":573},[560,8365,8366],{"class":606}," cubes ",[560,8368,580],{"class":565},[560,8370,8371],{"class":606}," Array",[560,8373,1069],{"class":565},[560,8375,8376],{"class":2379},"from",[560,8378,2382],{"class":606},[560,8380,8381],{"class":565},"{",[560,8383,8384],{"class":569}," length",[560,8386,1163],{"class":565},[560,8388,8389],{"class":2446}," 900",[560,8391,8392],{"class":565}," },",[560,8394,3019],{"class":565},[560,8396,8397],{"class":6781},"_",[560,8399,610],{"class":565},[560,8401,8402],{"class":6781}," i",[560,8404,3285],{"class":565},[560,8406,3622],{"class":573},[560,8408,8409],{"class":606}," [i ",[560,8411,8412],{"class":565},"%",[560,8414,8415],{"class":2446}," 30",[560,8417,8418],{"class":565}," -",[560,8420,8421],{"class":2446}," 15",[560,8423,610],{"class":565},[560,8425,2451],{"class":2446},[560,8427,610],{"class":565},[560,8429,8430],{"class":606}," Math",[560,8432,1069],{"class":565},[560,8434,8435],{"class":2379},"floor",[560,8437,8438],{"class":606},"(i ",[560,8440,8441],{"class":565},"/",[560,8443,8415],{"class":2446},[560,8445,4679],{"class":606},[560,8447,8448],{"class":565},"-",[560,8450,8421],{"class":2446},[560,8452,2547],{"class":606},[560,8454,8455,8457,8459],{"class":562,"line":723},[560,8456,655],{"class":565},[560,8458,570],{"class":569},[560,8460,592],{"class":565},[560,8462,8463],{"class":562,"line":728},[560,8464,665],{"emptyLinePlaceholder":516},[560,8466,8467,8469,8471],{"class":562,"line":750},[560,8468,566],{"class":565},[560,8470,673],{"class":569},[560,8472,592],{"class":565},[560,8474,8475,8477,8479],{"class":562,"line":554},[560,8476,681],{"class":565},[560,8478,684],{"class":569},[560,8480,592],{"class":565},[560,8482,8484,8486,8488,8490,8492,8494,8497,8499],{"class":8483,"line":773},[562,596],[560,8485,704],{"class":565},[560,8487,707],{"class":569},[560,8489,1430],{"class":573},[560,8491,580],{"class":565},[560,8493,583],{"class":565},[560,8495,8496],{"class":586},"[14, 10, 14]",[560,8498,583],{"class":565},[560,8500,710],{"class":565},[560,8502,8503,8505,8507,8510,8512,8514,8516,8518,8521,8523,8525,8527,8529],{"class":562,"line":784},[560,8504,704],{"class":565},[560,8506,65],{"class":569},[560,8508,8509],{"class":573}," :geometry",[560,8511,580],{"class":565},[560,8513,583],{"class":565},[560,8515,5201],{"class":586},[560,8517,583],{"class":565},[560,8519,8520],{"class":573}," :material",[560,8522,580],{"class":565},[560,8524,583],{"class":565},[560,8526,5145],{"class":586},[560,8528,583],{"class":565},[560,8530,592],{"class":565},[560,8532,8534,8536],{"class":8533,"line":795},[562,596],[560,8535,776],{"class":565},[560,8537,8538],{"class":569},"Instance\n",[560,8540,8542,8544,8546,8548,8551],{"class":8541,"line":805},[562,596],[560,8543,7920],{"class":573},[560,8545,580],{"class":565},[560,8547,583],{"class":565},[560,8549,8550],{"class":586},"(position, i) in cubes",[560,8552,3076],{"class":565},[560,8554,8556,8558,8560,8562,8565],{"class":8555,"line":555},[562,596],[560,8557,7934],{"class":573},[560,8559,580],{"class":565},[560,8561,583],{"class":565},[560,8563,8564],{"class":586},"i",[560,8566,3076],{"class":565},[560,8568,8570,8572,8574,8576,8578],{"class":8569,"line":825},[562,596],[560,8571,7948],{"class":573},[560,8573,580],{"class":565},[560,8575,583],{"class":565},[560,8577,4075],{"class":586},[560,8579,3076],{"class":565},[560,8581,8583,8586,8588,8590,8593],{"class":8582,"line":835},[562,596],[560,8584,8585],{"class":573},"        color",[560,8587,580],{"class":565},[560,8589,583],{"class":565},[560,8591,8592],{"class":586},"#38bdf8",[560,8594,3076],{"class":565},[560,8596,8598],{"class":8597,"line":2570},[562,596],[560,8599,7976],{"class":565},[560,8601,8602,8604,8606],{"class":562,"line":2579},[560,8603,818],{"class":565},[560,8605,65],{"class":569},[560,8607,592],{"class":565},[560,8609,8610,8612,8614],{"class":562,"line":2599},[560,8611,828],{"class":565},[560,8613,684],{"class":569},[560,8615,592],{"class":565},[560,8617,8618,8620,8622],{"class":562,"line":2608},[560,8619,655],{"class":565},[560,8621,673],{"class":569},[560,8623,592],{"class":565},[1950,8625,8626],{},[536,8627,2721,8628,3008,8630,8632,8633,8635],{},[540,8629,5201],{},[540,8631,5145],{}," are yours: ",[540,8634,8180],{}," never disposes them.",[545,8637,8639],{"id":8638},"per-instance-color","Per-instance color",[536,8641,8642,8644,8645,8647,8648,8651],{},[540,8643,8187],{}," takes a ",[540,8646,7490],{}," prop, written into the batch's ",[540,8649,8650],{},"instanceColor"," buffer. The buffer is\nonly allocated once at least one instance asks for a color, so an uncolored batch pays nothing.",[549,8653,8655],{"className":551,"code":8654,"language":556,"meta":508,"style":508},"\u003CInstance :position=\"[0, 0, 0]\" :color=\"isSelected ? '#f97316' : '#38bdf8'\" />\n",[540,8656,8657],{"__ignoreMap":508},[560,8658,8659,8661,8664,8666,8668,8670,8672,8675,8677,8679,8681,8683,8685,8687,8689,8691,8693,8695,8697,8700,8703,8705,8708,8710,8712,8714,8716,8719],{"class":562,"line":509},[560,8660,566],{"class":565},[560,8662,8663],{"class":569},"Instance",[560,8665,2974],{"class":565},[560,8667,4075],{"class":573},[560,8669,580],{"class":565},[560,8671,583],{"class":565},[560,8673,8674],{"class":606},"[",[560,8676,888],{"class":2446},[560,8678,610],{"class":565},[560,8680,2451],{"class":2446},[560,8682,610],{"class":565},[560,8684,2451],{"class":2446},[560,8686,2459],{"class":606},[560,8688,583],{"class":565},[560,8690,2974],{"class":565},[560,8692,7490],{"class":573},[560,8694,580],{"class":565},[560,8696,583],{"class":565},[560,8698,8699],{"class":606},"isSelected ",[560,8701,8702],{"class":565},"?",[560,8704,622],{"class":565},[560,8706,8707],{"class":586},"#f97316",[560,8709,2385],{"class":565},[560,8711,2974],{"class":565},[560,8713,622],{"class":565},[560,8715,8592],{"class":586},[560,8717,8718],{"class":565},"'\"",[560,8720,710],{"class":565},[545,8722,8724],{"id":8723},"pointer-events","Pointer events",[536,8726,8727],{},"Each placeholder raycasts against the batch's geometry at its own transform, so pointer events land\non the single instance you clicked, not on the whole batch.",[549,8729,8731],{"className":551,"code":8730,"language":556,"meta":508,"style":508},"\u003CInstance :position=\"position\" @click=\"select(id)\" @pointer-enter=\"hover(id)\" />\n",[540,8732,8733],{"__ignoreMap":508},[560,8734,8735,8737,8739,8741,8743,8745,8747,8749,8751,8753,8756,8758,8760,8762,8765,8767,8769,8772,8774,8776,8779,8781,8783],{"class":562,"line":509},[560,8736,566],{"class":565},[560,8738,8663],{"class":569},[560,8740,2974],{"class":565},[560,8742,4075],{"class":573},[560,8744,580],{"class":565},[560,8746,583],{"class":565},[560,8748,4075],{"class":606},[560,8750,583],{"class":565},[560,8752,4199],{"class":565},[560,8754,8755],{"class":573},"click",[560,8757,580],{"class":565},[560,8759,583],{"class":565},[560,8761,5780],{"class":2379},[560,8763,8764],{"class":606},"(id)",[560,8766,583],{"class":565},[560,8768,4199],{"class":565},[560,8770,8771],{"class":573},"pointer-enter",[560,8773,580],{"class":565},[560,8775,583],{"class":565},[560,8777,8778],{"class":2379},"hover",[560,8780,8764],{"class":606},[560,8782,583],{"class":565},[560,8784,710],{"class":565},[545,8786,8788],{"id":8787},"hiding-instances","Hiding instances",[536,8790,8791],{},"Two ways, and they differ in what they cost:",[2158,8793,8794,8800],{},[2161,8795,8796,8799],{},[540,8797,8798],{},":visible=\"false\""," keeps the instance registered but drops it from the batch for that frame.\nUse it for something that toggles often.",[2161,8801,8802,8804],{},[540,8803,8208],{}," unmounts the placeholder and unregisters it. Use it when the node is really gone.",[536,8806,8807],{},"Either way the remaining instances are packed densely, so hidden ones cost nothing on the GPU.",[545,8809,8811],{"id":8810},"nesting-and-transforms","Nesting and transforms",[536,8813,8814],{},"Instances read their world matrix, so parent transforms work exactly as you would expect:",[549,8816,8818],{"className":551,"code":8817,"language":556,"meta":508,"style":508},"\u003CInstances :geometry=\"geometry\" :material=\"material\">\n  \u003CLevioso>\n    \u003CTresGroup :position=\"[0, 3, 0]\">\n      \u003C!-- floats with the group, still the same drawcall -->\n      \u003CInstance v-for=\"i in 12\" :key=\"i\" :position=\"ringPosition(i)\" />\n    \u003C/TresGroup>\n  \u003C/Levioso>\n\u003C/Instances>\n",[540,8819,8820,8852,8857,8862,8867,8872,8877,8882],{"__ignoreMap":508},[560,8821,8822,8824,8826,8828,8830,8832,8834,8836,8838,8840,8842,8844,8846,8848,8850],{"class":562,"line":509},[560,8823,566],{"class":565},[560,8825,65],{"class":569},[560,8827,2974],{"class":565},[560,8829,5201],{"class":573},[560,8831,580],{"class":565},[560,8833,583],{"class":565},[560,8835,5201],{"class":606},[560,8837,583],{"class":565},[560,8839,2974],{"class":565},[560,8841,5145],{"class":573},[560,8843,580],{"class":565},[560,8845,583],{"class":565},[560,8847,5145],{"class":606},[560,8849,583],{"class":565},[560,8851,592],{"class":565},[560,8853,8854],{"class":562,"line":510},[560,8855,8856],{"class":606},"  \u003CLevioso>\n",[560,8858,8859],{"class":562,"line":631},[560,8860,8861],{"class":606},"    \u003CTresGroup :position=\"[0, 3, 0]\">\n",[560,8863,8864],{"class":562,"line":652},[560,8865,8866],{"class":606},"      \u003C!-- floats with the group, still the same drawcall -->\n",[560,8868,8869],{"class":562,"line":662},[560,8870,8871],{"class":606},"      \u003CInstance v-for=\"i in 12\" :key=\"i\" :position=\"ringPosition(i)\" />\n",[560,8873,8874],{"class":562,"line":668},[560,8875,8876],{"class":606},"    \u003C/TresGroup>\n",[560,8878,8879],{"class":562,"line":678},[560,8880,8881],{"class":606},"  \u003C/Levioso>\n",[560,8883,8884,8886,8888],{"class":562,"line":701},[560,8885,655],{"class":565},[560,8887,65],{"class":569},[560,8889,592],{"class":565},[545,8891,8893],{"id":8892},"animating-instances","Animating instances",[536,8895,8896,8897,8900,8901,8903,8904,8644,8906,8908],{},"Anything that moves an instance's node moves it in the batch, because the batch re-reads world\nmatrices every frame. An ",[540,8898,8899],{},"AnimationMixer"," included: a mixer resolves its tracks by ",[540,8902,7565],{},"\nname, and an ",[540,8905,8187],{},[540,8907,2916],{}," like any other node, so a clip can drive one directly.",[549,8910,8912],{"className":551,"code":8911,"language":556,"meta":508,"style":508},"\u003CInstances :geometry=\"geometry\" :material=\"material\">\n  \u003C!-- \"Blade\" is driven by the clip; everything under \"Rotor\" rides along with it -->\n  \u003CTresGroup name=\"Rotor\">\n    \u003CInstance name=\"Blade\" />\n    \u003CInstance v-for=\"i in 12\" :key=\"i\" :position=\"ringPosition(i)\" />\n  \u003C/TresGroup>\n\u003C/Instances>\n",[540,8913,8914,8946,8951,8956,8961,8966,8971],{"__ignoreMap":508},[560,8915,8916,8918,8920,8922,8924,8926,8928,8930,8932,8934,8936,8938,8940,8942,8944],{"class":562,"line":509},[560,8917,566],{"class":565},[560,8919,65],{"class":569},[560,8921,2974],{"class":565},[560,8923,5201],{"class":573},[560,8925,580],{"class":565},[560,8927,583],{"class":565},[560,8929,5201],{"class":606},[560,8931,583],{"class":565},[560,8933,2974],{"class":565},[560,8935,5145],{"class":573},[560,8937,580],{"class":565},[560,8939,583],{"class":565},[560,8941,5145],{"class":606},[560,8943,583],{"class":565},[560,8945,592],{"class":565},[560,8947,8948],{"class":562,"line":510},[560,8949,8950],{"class":606},"  \u003C!-- \"Blade\" is driven by the clip; everything under \"Rotor\" rides along with it -->\n",[560,8952,8953],{"class":562,"line":631},[560,8954,8955],{"class":606},"  \u003CTresGroup name=\"Rotor\">\n",[560,8957,8958],{"class":562,"line":652},[560,8959,8960],{"class":606},"    \u003CInstance name=\"Blade\" />\n",[560,8962,8963],{"class":562,"line":662},[560,8964,8965],{"class":606},"    \u003CInstance v-for=\"i in 12\" :key=\"i\" :position=\"ringPosition(i)\" />\n",[560,8967,8968],{"class":562,"line":668},[560,8969,8970],{"class":606},"  \u003C/TresGroup>\n",[560,8972,8973,8975,8977],{"class":562,"line":678},[560,8974,655],{"class":565},[560,8976,65],{"class":569},[560,8978,592],{"class":565},[1950,8980,8981],{},[536,8982,8983,8984,1617,8987,3008,8989,8992,8993,8995,8996,8999,9000,9002,9003,9006],{},"Inside a ",[540,8985,8986],{},"\u003CMerged />",[540,8988,2916],{},[540,8990,8991],{},"batch"," are different things: ",[540,8994,8991],{}," picks which\n",[540,8997,8998],{},"InstancedMesh"," to join, ",[540,9001,2916],{}," is what this node is called. ",[540,9004,9005],{},"tres gltf --instance"," emits both,\nbecause a batch is keyed after its first mesh and every copy in it shares that key.",[536,9008,9009,9010,9013],{},"A track that finds no node is not silent: three logs\n",[540,9011,9012],{},"THREE.PropertyBinding: No target node found for track: \u003Cname>.position."," once for it.",[545,9015,9017],{"id":9016},"limit-and-growth","Limit and growth",[536,9019,9020,9023,9024,9026],{},[540,9021,9022],{},"limit"," is the initial buffer allocation, not a cap. If more instances register than it allows, the\nbatch reallocates its buffers (doubling), keeps every instance, and warns once in dev telling you\nwhich ",[540,9025,9022],{}," would have avoided the reallocation.",[549,9028,9030],{"className":551,"code":9029,"language":556,"meta":508,"style":508},"\u003CInstances :geometry=\"geometry\" :material=\"material\" :limit=\"5000\">\n",[540,9031,9032],{"__ignoreMap":508},[560,9033,9034,9036,9038,9040,9042,9044,9046,9048,9050,9052,9054,9056,9058,9060,9062,9064,9066,9068,9070,9073,9075],{"class":562,"line":509},[560,9035,566],{"class":565},[560,9037,65],{"class":569},[560,9039,2974],{"class":565},[560,9041,5201],{"class":573},[560,9043,580],{"class":565},[560,9045,583],{"class":565},[560,9047,5201],{"class":606},[560,9049,583],{"class":565},[560,9051,2974],{"class":565},[560,9053,5145],{"class":573},[560,9055,580],{"class":565},[560,9057,583],{"class":565},[560,9059,5145],{"class":606},[560,9061,583],{"class":565},[560,9063,2974],{"class":565},[560,9065,9022],{"class":573},[560,9067,580],{"class":565},[560,9069,583],{"class":565},[560,9071,9072],{"class":2446},"5000",[560,9074,583],{"class":565},[560,9076,592],{"class":565},[536,9078,9079],{},"Set it close to your real maximum when you know it: reallocating mid-scene is avoidable work.",[545,9081,9083],{"id":9082},"why-every-instance-shows-up-in-the-scene-graph","Why every instance shows up in the scene graph",[536,9085,9086],{},"Open the devtools on a batch of 500 and you will see 500 nodes. That is expected, not a leak.",[536,9088,9089,9090,9092,9093,9095,9096,9098,9099,9101,9102,9104],{},"Each ",[540,9091,8187],{}," is a real ",[540,9094,7565],{}," in the graph. That is precisely what buys you the ergonomics:\n",[540,9097,4075],{}," is just a transform, nesting under a group works because the group is its parent, ",[540,9100,8208],{},"\nworks because unmounting a node unregisters it, and ",[540,9103,8212],{}," works because there is a node to hit.\nThe batch reads each node's world matrix every frame and packs it into the instance buffer.",[536,9106,9107,9108,9110],{},"What those nodes do ",[1614,9109,6284],{}," do is render. They carry no geometry and never enter the render list, so\n500 of them still cost one drawcall. What you are seeing in the graph is bookkeeping, not draw work.",[536,9112,9113],{},"The costs that are real:",[850,9115,9116,9125],{},[853,9117,9118],{},[856,9119,9120,9122],{},[859,9121],{"align":920},[859,9123,9124],{"align":920},"Cost",[869,9126,9127,9135,9143],{},[856,9128,9129,9132],{},[874,9130,9131],{"align":920},"Per frame",[874,9133,9134],{"align":920},"One world-matrix update and one matrix multiply per instance.",[856,9136,9137,9140],{},[874,9138,9139],{"align":920},"On pointer move",[874,9141,9142],{"align":920},"A raycast per instance, but only for instances that have a pointer handler (or inherit one from an ancestor). A scatter with no handlers costs nothing.",[856,9144,9145,9148],{},[874,9146,9147],{"align":920},"Memory",[874,9149,9150,9151,9153],{"align":920},"One bare ",[540,9152,7565],{}," per instance.",[1950,9155,9156],{},[536,9157,9158,9159,9162,9163,9166,9167,9169],{},"If you have tens of thousands of instances that never move, never toggle and never need picking, a\n",[540,9160,9161],{},"TresInstancedMesh"," whose ",[540,9164,9165],{},"instanceMatrix"," you fill yourself will always be cheaper. ",[540,9168,8180],{},"\ntrades that per-node overhead for being able to write instances as ordinary Vue nodes.",[545,9171,845],{"id":844},[3996,9173,65],{"id":9174},"instances",[850,9176,9177,9187],{},[853,9178,9179],{},[856,9180,9181,9183,9185],{},[859,9182,861],{"align":920},[859,9184,864],{"align":920},[859,9186,867],{},[869,9188,9189,9203,9216,9230,9245],{},[856,9190,9191,9195,9198],{},[874,9192,9193],{"align":920},[540,9194,5201],{},[874,9196,9197],{"align":920},"Geometry shared by every instance. Not disposed by the component.",[874,9199,9200],{},[1619,9201,9202],{},"required",[856,9204,9205,9209,9212],{},[874,9206,9207],{"align":920},[540,9208,5145],{},[874,9210,9211],{"align":920},"Material shared by every instance. Not disposed by the component.",[874,9213,9214],{},[1619,9215,9202],{},[856,9217,9218,9222,9225],{},[874,9219,9220],{"align":920},[540,9221,9022],{},[874,9223,9224],{"align":920},"Initial buffer allocation. Grows automatically when exceeded.",[874,9226,9227],{},[540,9228,9229],{},"1000",[856,9231,9232,9236,9241],{},[874,9233,9234],{"align":920},[540,9235,8991],{},[874,9237,9238,9239,1069],{"align":920},"Key this batch registers under with an ancestor ",[540,9240,8986],{},[874,9242,9243],{},[540,9244,1090],{},[856,9246,9247,9251,9257],{},[874,9248,9249],{"align":920},[540,9250,2916],{},[874,9252,9253,9254,9256],{"align":920},"Name for the ",[540,9255,8998],{}," itself.",[874,9258,9259],{},[540,9260,1090],{},[536,9262,9263,9264,9266,9267,1069],{},"Exposes the underlying ",[540,9265,8184],{}," through ",[540,9268,9269],{},"instance",[3996,9271,8663],{"id":9269},[850,9273,9274,9284],{},[853,9275,9276],{},[856,9277,9278,9280,9282],{},[859,9279,861],{"align":920},[859,9281,864],{"align":920},[859,9283,867],{},[869,9285,9286,9305,9321,9336],{},[856,9287,9288,9292,9301],{},[874,9289,9290],{"align":920},[540,9291,8991],{},[874,9293,9294,9295,9298,9299,1069],{"align":920},"Batch to join, by its key in ",[540,9296,9297],{},"\u003CMerged :meshes />",". Omit for the nearest ",[540,9300,8180],{},[874,9302,9303],{},[540,9304,1090],{},[856,9306,9307,9311,9317],{},[874,9308,9309],{"align":920},[540,9310,2916],{},[874,9312,9313,9314,9316],{"align":920},"Name for this instance's node, so a mixer or ",[540,9315,4667],{}," can find it.",[874,9318,9319],{},[540,9320,1090],{},[856,9322,9323,9327,9332],{},[874,9324,9325],{"align":920},[540,9326,7490],{},[874,9328,9329,9330,1069],{"align":920},"Per-instance color, written into ",[540,9331,8650],{},[874,9333,9334],{},[540,9335,1090],{},[856,9337,9338,9342,9347],{},[874,9339,9340],{"align":920},[540,9341,7066],{},[874,9343,9344,9346],{"align":920},[540,9345,894],{}," drops the instance from the batch without unregistering it.",[874,9348,9349],{},[540,9350,884],{},[536,9352,9353,9354,1617,9356,1617,9358,9360],{},"Transform props (",[540,9355,4075],{},[540,9357,5572],{},[540,9359,5575],{},", …) and pointer events behave like any other node.",[9362,9363,9364],"read-more",{"to":78},[536,9365,9366,9367,9369],{},"Instancing several meshes at once, for example every node of a glTF model, is what ",[540,9368,8986],{}," is for.",[1272,9371,9372],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-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":508,"searchDepth":509,"depth":510,"links":9374},[9375,9376,9377,9378,9379,9380,9381,9382,9383],{"id":547,"depth":510,"text":15},{"id":8638,"depth":510,"text":8639},{"id":8723,"depth":510,"text":8724},{"id":8787,"depth":510,"text":8788},{"id":8810,"depth":510,"text":8811},{"id":8892,"depth":510,"text":8893},{"id":9016,"depth":510,"text":9017},{"id":9082,"depth":510,"text":9083},{"id":844,"depth":510,"text":845,"children":9384},[9385,9386],{"id":9174,"depth":631,"text":65},{"id":9269,"depth":631,"text":8663},"Draw thousands of copies of one mesh in a single drawcall, declaratively.",{},{"title":65,"description":9387},"8vKhux_ZHYFi--jFcKf3FugQpxaRNQANDCDzZT-Htl8",{"id":9392,"title":69,"body":9393,"description":9781,"extension":513,"links":514,"meta":9782,"navigation":516,"path":70,"seo":9783,"stem":71,"__hash__":9784},"docs/2.api/1.abstractions/levioso.md",{"type":501,"value":9394,"toc":9777},[9395,9400,9407,9416,9418,9702,9704,9775],[530,9396,9397],{},[9398,9399],"abstractions-levioso",{},[536,9401,9402],{},[9403,9404],"img",{"alt":9405,"src":9406},"Leviosa","https://media.giphy.com/media/HaCFT5ghY6L1m/giphy.gif",[536,9408,2721,9409,9411,9412,9415],{},[540,9410,7260],{}," package provides a ",[540,9413,9414],{},"\u003CLevioso />"," wrapper that makes its content … float, just like Magic 🪄✨",[545,9417,15],{"id":547},[549,9419,9422],{"className":551,"code":9420,"highlights":9421,"language":556,"meta":508,"style":508},"\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",[631,728,554],[540,9423,9424,9444,9466,9496,9500,9508,9512,9520,9540,9571,9579,9601,9609,9618,9637,9667,9686,9694],{"__ignoreMap":508},[560,9425,9426,9428,9430,9432,9434,9436,9438,9440,9442],{"class":562,"line":509},[560,9427,566],{"class":565},[560,9429,570],{"class":569},[560,9431,574],{"class":573},[560,9433,577],{"class":573},[560,9435,580],{"class":565},[560,9437,583],{"class":565},[560,9439,587],{"class":586},[560,9441,583],{"class":565},[560,9443,592],{"class":565},[560,9445,9446,9448,9450,9452,9454,9456,9459,9461,9463],{"class":562,"line":510},[560,9447,600],{"class":599},[560,9449,603],{"class":565},[560,9451,638],{"class":606},[560,9453,616],{"class":565},[560,9455,619],{"class":599},[560,9457,9458],{"class":565}," \"",[560,9460,647],{"class":586},[560,9462,583],{"class":565},[560,9464,9465],{"class":565},";\n",[560,9467,9469,9471,9473,9476,9478,9480,9482,9484,9486,9488,9490,9492,9494],{"class":9468,"line":631},[562,596],[560,9470,600],{"class":599},[560,9472,603],{"class":565},[560,9474,9475],{"class":606}," Levioso",[560,9477,610],{"class":565},[560,9479,613],{"class":606},[560,9481,610],{"class":565},[560,9483,1342],{"class":606},[560,9485,616],{"class":565},[560,9487,619],{"class":599},[560,9489,9458],{"class":565},[560,9491,625],{"class":586},[560,9493,583],{"class":565},[560,9495,9465],{"class":565},[560,9497,9498],{"class":562,"line":652},[560,9499,665],{"emptyLinePlaceholder":516},[560,9501,9502,9504,9506],{"class":562,"line":662},[560,9503,655],{"class":565},[560,9505,570],{"class":569},[560,9507,592],{"class":565},[560,9509,9510],{"class":562,"line":668},[560,9511,665],{"emptyLinePlaceholder":516},[560,9513,9514,9516,9518],{"class":562,"line":678},[560,9515,566],{"class":565},[560,9517,673],{"class":569},[560,9519,592],{"class":565},[560,9521,9522,9524,9526,9529,9531,9533,9536,9538],{"class":562,"line":701},[560,9523,681],{"class":565},[560,9525,684],{"class":569},[560,9527,9528],{"class":573}," :clear-color",[560,9530,580],{"class":565},[560,9532,583],{"class":565},[560,9534,9535],{"class":586},"0x82dbc5",[560,9537,583],{"class":565},[560,9539,592],{"class":565},[560,9541,9542,9544,9546,9548,9550,9552,9555,9557,9560,9562,9564,9567,9569],{"class":562,"line":713},[560,9543,704],{"class":565},[560,9545,707],{"class":569},[560,9547,1430],{"class":573},[560,9549,580],{"class":565},[560,9551,583],{"class":565},[560,9553,9554],{"class":586},"[0, 0, 5]",[560,9556,583],{"class":565},[560,9558,9559],{"class":573}," :look-at",[560,9561,580],{"class":565},[560,9563,583],{"class":565},[560,9565,9566],{"class":586},"[0, 0, 0]",[560,9568,583],{"class":565},[560,9570,710],{"class":565},[560,9572,9573,9575,9577],{"class":562,"line":723},[560,9574,704],{"class":565},[560,9576,718],{"class":569},[560,9578,710],{"class":565},[560,9580,9582,9584,9587,9590,9592,9594,9597,9599],{"class":9581,"line":728},[562,596],[560,9583,704],{"class":565},[560,9585,9586],{"class":569},"Levioso",[560,9588,9589],{"class":573}," :speed",[560,9591,580],{"class":565},[560,9593,583],{"class":565},[560,9595,9596],{"class":586},"4",[560,9598,583],{"class":565},[560,9600,592],{"class":565},[560,9602,9603,9605,9607],{"class":562,"line":750},[560,9604,776],{"class":565},[560,9606,217],{"class":569},[560,9608,710],{"class":565},[560,9610,9612,9614,9616],{"class":9611,"line":554},[562,596],[560,9613,818],{"class":565},[560,9615,9586],{"class":569},[560,9617,592],{"class":565},[560,9619,9620,9622,9625,9627,9629,9631,9633,9635],{"class":562,"line":773},[560,9621,704],{"class":565},[560,9623,9624],{"class":569},"TresAmbientLight",[560,9626,1812],{"class":573},[560,9628,580],{"class":565},[560,9630,583],{"class":565},[560,9632,1819],{"class":586},[560,9634,583],{"class":565},[560,9636,710],{"class":565},[560,9638,9639,9641,9644,9646,9648,9650,9652,9654,9656,9658,9660,9663,9665],{"class":562,"line":784},[560,9640,704],{"class":565},[560,9642,9643],{"class":569},"TresDirectionalLight",[560,9645,1812],{"class":573},[560,9647,580],{"class":565},[560,9649,583],{"class":565},[560,9651,1819],{"class":586},[560,9653,583],{"class":565},[560,9655,1430],{"class":573},[560,9657,580],{"class":565},[560,9659,583],{"class":565},[560,9661,9662],{"class":586},"[2, 2, 2]",[560,9664,583],{"class":565},[560,9666,710],{"class":565},[560,9668,9669,9671,9673,9675,9677,9679,9682,9684],{"class":562,"line":795},[560,9670,704],{"class":565},[560,9672,7992],{"class":569},[560,9674,1430],{"class":573},[560,9676,580],{"class":565},[560,9678,583],{"class":565},[560,9680,9681],{"class":586},"[0, -1, 0]",[560,9683,583],{"class":565},[560,9685,710],{"class":565},[560,9687,9688,9690,9692],{"class":562,"line":805},[560,9689,828],{"class":565},[560,9691,684],{"class":569},[560,9693,592],{"class":565},[560,9695,9696,9698,9700],{"class":562,"line":555},[560,9697,655],{"class":565},[560,9699,673],{"class":569},[560,9701,592],{"class":565},[545,9703,845],{"id":844},[850,9705,9706,9716],{},[853,9707,9708],{},[856,9709,9710,9712,9714],{},[859,9711,861],{"align":920},[859,9713,864],{"align":920},[859,9715,867],{},[869,9717,9718,9732,9746,9760],{},[856,9719,9720,9725,9728],{},[874,9721,9722],{"align":920},[540,9723,9724],{},"speed",[874,9726,9727],{"align":920},"Floating speed, higher it rocks more 🤘.",[874,9729,9730],{},[540,9731,1819],{},[856,9733,9734,9739,9742],{},[874,9735,9736],{"align":920},[540,9737,9738],{},"rotationFactor",[874,9740,9741],{"align":920},"Factor for Euler rotation.",[874,9743,9744],{},[540,9745,1819],{},[856,9747,9748,9753,9756],{},[874,9749,9750],{"align":920},[540,9751,9752],{},"floatFactor",[874,9754,9755],{"align":920},"Factor for Up/down movement.",[874,9757,9758],{},[540,9759,1819],{},[856,9761,9762,9767,9770],{},[874,9763,9764],{"align":920},[540,9765,9766],{},"range",[874,9768,9769],{"align":920},"Range of y-axis values the object will float within.",[874,9771,9772],{},[540,9773,9774],{},"[-0.1, 0.1]",[1272,9776,1589],{},{"title":508,"searchDepth":509,"depth":510,"links":9778},[9779,9780],{"id":547,"depth":510,"text":15},{"id":844,"depth":510,"text":845},"Make content float like magic with smooth animations.",{},{"title":69,"description":9781},"ua7tauTYcB_xqNVlXaBIkTupNCoAiUCKWGlTSK5eTSk",{"id":9786,"title":73,"body":9787,"description":10431,"extension":513,"links":514,"meta":10432,"navigation":516,"path":74,"seo":10433,"stem":75,"__hash__":10434},"docs/2.api/1.abstractions/mask.md",{"type":501,"value":9788,"toc":10426},[9789,9794,9800,9833,9835,10298,10300,10363,10367,10374,10379,10394,10423],[530,9790,9791],{},[9792,9793],"abstractions-mask",{},[536,9795,9796,9799],{},[540,9797,9798],{},"\u003CMask/>"," uses the stencil buffer to cut out areas of the screen.",[3144,9801,9802,9820],{},[536,9803,9804,9805,9808,9809,9812,9813,9816,9817,1069],{},"To use ",[540,9806,9807],{},"\u003CMask />"," you ",[1619,9810,9811],{},"must"," add ",[540,9814,9815],{},":stencil=\"true\""," to your ",[540,9818,9819],{},"\u003CTresCanvas />",[536,9821,9822,9824,9825,9832],{},[540,9823,9807],{}," relies on the ",[1063,9826,9829],{"href":9827,"rel":9828},"https://threejs.org/docs/#api/en/renderers/WebGLRenderer",[1067],[540,9830,9831],{},"stencil buffer",". In recent versions of THREE.js, by default, the stencil buffer is not created.",[545,9834,15],{"id":547},[549,9836,9839],{"className":551,"code":9837,"highlights":9838,"language":556,"meta":508,"style":508},"\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",[510,795,805,555,825],[540,9840,9841,9861,9890,9908,9916,9920,9928,9958,9966,9974,9978,9997,10005,10025,10043,10051,10071,10081,10101,10110,10118,10122,10142,10150,10170,10178,10182,10201,10209,10227,10235,10239,10258,10266,10274,10282,10290],{"__ignoreMap":508},[560,9842,9843,9845,9847,9849,9851,9853,9855,9857,9859],{"class":562,"line":509},[560,9844,566],{"class":565},[560,9846,570],{"class":569},[560,9848,574],{"class":573},[560,9850,577],{"class":573},[560,9852,580],{"class":565},[560,9854,583],{"class":565},[560,9856,587],{"class":586},[560,9858,583],{"class":565},[560,9860,592],{"class":565},[560,9862,9864,9866,9868,9871,9873,9875,9877,9880,9882,9884,9886,9888],{"class":9863,"line":510},[562,596],[560,9865,600],{"class":599},[560,9867,603],{"class":565},[560,9869,9870],{"class":606}," Mask",[560,9872,610],{"class":565},[560,9874,613],{"class":606},[560,9876,610],{"class":565},[560,9878,9879],{"class":606}," useMask",[560,9881,616],{"class":565},[560,9883,619],{"class":599},[560,9885,622],{"class":565},[560,9887,625],{"class":586},[560,9889,628],{"class":565},[560,9891,9892,9894,9896,9898,9900,9902,9904,9906],{"class":562,"line":631},[560,9893,600],{"class":599},[560,9895,603],{"class":565},[560,9897,638],{"class":606},[560,9899,616],{"class":565},[560,9901,619],{"class":599},[560,9903,622],{"class":565},[560,9905,647],{"class":586},[560,9907,628],{"class":565},[560,9909,9910,9912,9914],{"class":562,"line":652},[560,9911,655],{"class":565},[560,9913,570],{"class":569},[560,9915,592],{"class":565},[560,9917,9918],{"class":562,"line":662},[560,9919,665],{"emptyLinePlaceholder":516},[560,9921,9922,9924,9926],{"class":562,"line":668},[560,9923,566],{"class":565},[560,9925,673],{"class":569},[560,9927,592],{"class":565},[560,9929,9930,9932,9934,9937,9939,9941,9943,9945,9947,9949,9951,9954,9956],{"class":562,"line":678},[560,9931,681],{"class":565},[560,9933,684],{"class":569},[560,9935,9936],{"class":573}," :stencil",[560,9938,580],{"class":565},[560,9940,583],{"class":565},[560,9942,884],{"class":586},[560,9944,583],{"class":565},[560,9946,687],{"class":573},[560,9948,580],{"class":565},[560,9950,583],{"class":565},[560,9952,9953],{"class":586},"#4f4f4f",[560,9955,583],{"class":565},[560,9957,592],{"class":565},[560,9959,9960,9962,9964],{"class":562,"line":701},[560,9961,704],{"class":565},[560,9963,707],{"class":569},[560,9965,710],{"class":565},[560,9967,9968,9970,9972],{"class":562,"line":713},[560,9969,704],{"class":565},[560,9971,718],{"class":569},[560,9973,710],{"class":565},[560,9975,9976],{"class":562,"line":723},[560,9977,665],{"emptyLinePlaceholder":516},[560,9979,9980,9982,9985,9987,9989,9991,9993,9995],{"class":562,"line":728},[560,9981,704],{"class":565},[560,9983,9984],{"class":569},"TresGroup",[560,9986,736],{"class":573},[560,9988,580],{"class":565},[560,9990,583],{"class":565},[560,9992,743],{"class":586},[560,9994,583],{"class":565},[560,9996,592],{"class":565},[560,9998,9999,10001,10003],{"class":562,"line":750},[560,10000,776],{"class":565},[560,10002,779],{"class":569},[560,10004,592],{"class":565},[560,10006,10007,10009,10012,10014,10016,10018,10021,10023],{"class":562,"line":554},[560,10008,787],{"class":565},[560,10010,10011],{"class":569},"TresRingGeometry",[560,10013,1904],{"class":573},[560,10015,580],{"class":565},[560,10017,583],{"class":565},[560,10019,10020],{"class":586},"[0.95, 1, 64]",[560,10022,583],{"class":565},[560,10024,710],{"class":565},[560,10026,10027,10029,10031,10033,10035,10037,10039,10041],{"class":562,"line":773},[560,10028,787],{"class":565},[560,10030,7415],{"class":569},[560,10032,2634],{"class":573},[560,10034,580],{"class":565},[560,10036,583],{"class":565},[560,10038,2641],{"class":586},[560,10040,583],{"class":565},[560,10042,710],{"class":565},[560,10044,10045,10047,10049],{"class":562,"line":784},[560,10046,808],{"class":565},[560,10048,779],{"class":569},[560,10050,592],{"class":565},[560,10052,10054,10056,10058,10061,10063,10065,10067,10069],{"class":10053,"line":795},[562,596],[560,10055,776],{"class":565},[560,10057,73],{"class":569},[560,10059,10060],{"class":573}," :id",[560,10062,580],{"class":565},[560,10064,583],{"class":565},[560,10066,1819],{"class":586},[560,10068,583],{"class":565},[560,10070,592],{"class":565},[560,10072,10074,10076,10079],{"class":10073,"line":805},[562,596],[560,10075,787],{"class":565},[560,10077,10078],{"class":569},"TresCircleGeometry",[560,10080,710],{"class":565},[560,10082,10084,10086,10088,10090,10092,10094,10097,10099],{"class":10083,"line":555},[562,596],[560,10085,787],{"class":565},[560,10087,7415],{"class":569},[560,10089,2634],{"class":573},[560,10091,580],{"class":565},[560,10093,583],{"class":565},[560,10095,10096],{"class":586},"#fbb03b",[560,10098,583],{"class":565},[560,10100,710],{"class":565},[560,10102,10104,10106,10108],{"class":10103,"line":825},[562,596],[560,10105,808],{"class":565},[560,10107,73],{"class":569},[560,10109,592],{"class":565},[560,10111,10112,10114,10116],{"class":562,"line":835},[560,10113,818],{"class":565},[560,10115,9984],{"class":569},[560,10117,592],{"class":565},[560,10119,10120],{"class":562,"line":2570},[560,10121,665],{"emptyLinePlaceholder":516},[560,10123,10124,10126,10128,10131,10133,10135,10138,10140],{"class":562,"line":2579},[560,10125,704],{"class":565},[560,10127,779],{"class":569},[560,10129,10130],{"class":573}," :position-z",[560,10132,580],{"class":565},[560,10134,583],{"class":565},[560,10136,10137],{"class":586},"-1",[560,10139,583],{"class":565},[560,10141,592],{"class":565},[560,10143,10144,10146,10148],{"class":562,"line":2599},[560,10145,776],{"class":565},[560,10147,790],{"class":569},[560,10149,710],{"class":565},[560,10151,10152,10154,10156,10159,10161,10163,10166,10168],{"class":562,"line":2608},[560,10153,776],{"class":565},[560,10155,800],{"class":569},[560,10157,10158],{"class":573}," v-bind",[560,10160,580],{"class":565},[560,10162,583],{"class":565},[560,10164,10165],{"class":586},"useMask(1)",[560,10167,583],{"class":565},[560,10169,710],{"class":565},[560,10171,10172,10174,10176],{"class":562,"line":2617},[560,10173,818],{"class":565},[560,10175,779],{"class":569},[560,10177,592],{"class":565},[560,10179,10180],{"class":562,"line":2626},[560,10181,665],{"emptyLinePlaceholder":516},[560,10183,10184,10186,10188,10190,10192,10194,10197,10199],{"class":562,"line":2648},[560,10185,704],{"class":565},[560,10187,779],{"class":569},[560,10189,10130],{"class":573},[560,10191,580],{"class":565},[560,10193,583],{"class":565},[560,10195,10196],{"class":586},"-3",[560,10198,583],{"class":565},[560,10200,592],{"class":565},[560,10202,10203,10205,10207],{"class":562,"line":2692},[560,10204,776],{"class":565},[560,10206,790],{"class":569},[560,10208,710],{"class":565},[560,10210,10211,10213,10215,10217,10219,10221,10223,10225],{"class":562,"line":2701},[560,10212,776],{"class":565},[560,10214,800],{"class":569},[560,10216,10158],{"class":573},[560,10218,580],{"class":565},[560,10220,583],{"class":565},[560,10222,10165],{"class":586},[560,10224,583],{"class":565},[560,10226,710],{"class":565},[560,10228,10229,10231,10233],{"class":562,"line":2710},[560,10230,818],{"class":565},[560,10232,779],{"class":569},[560,10234,592],{"class":565},[560,10236,10237],{"class":562,"line":3867},[560,10238,665],{"emptyLinePlaceholder":516},[560,10240,10241,10243,10245,10247,10249,10251,10254,10256],{"class":562,"line":3898},[560,10242,704],{"class":565},[560,10244,779],{"class":569},[560,10246,10130],{"class":573},[560,10248,580],{"class":565},[560,10250,583],{"class":565},[560,10252,10253],{"class":586},"-5",[560,10255,583],{"class":565},[560,10257,592],{"class":565},[560,10259,10260,10262,10264],{"class":562,"line":3919},[560,10261,776],{"class":565},[560,10263,790],{"class":569},[560,10265,710],{"class":565},[560,10267,10268,10270,10272],{"class":562,"line":3938},[560,10269,776],{"class":565},[560,10271,800],{"class":569},[560,10273,710],{"class":565},[560,10275,10276,10278,10280],{"class":562,"line":3970},[560,10277,818],{"class":565},[560,10279,779],{"class":569},[560,10281,592],{"class":565},[560,10283,10284,10286,10288],{"class":562,"line":3979},[560,10285,828],{"class":565},[560,10287,684],{"class":569},[560,10289,592],{"class":565},[560,10291,10292,10294,10296],{"class":562,"line":3988},[560,10293,655],{"class":565},[560,10295,673],{"class":569},[560,10297,592],{"class":565},[545,10299,845],{"id":844},[850,10301,10302,10312],{},[853,10303,10304],{},[856,10305,10306,10308,10310],{},[859,10307,861],{"align":920},[859,10309,864],{"align":920},[859,10311,867],{},[869,10313,10314,10331,10347],{},[856,10315,10316,10323,10329],{},[874,10317,10318],{"align":920},[1614,10319,10320],{},[540,10321,10322],{},"id",[874,10324,10325,10326,10328],{"align":920},"Id of the stencil buffer to use. Each mask must have a ",[540,10327,5297],{}," id. Multiple masks can refer to the same id.",[874,10330],{},[856,10332,10333,10340,10343],{},[874,10334,10335],{"align":920},[1614,10336,10337],{},[540,10338,10339],{},"colorWrite",[874,10341,10342],{"align":920},"Whether the colors of the mask's own material will leak through.",[874,10344,10345],{},[540,10346,894],{},[856,10348,10349,10356,10359],{},[874,10350,10351],{"align":920},[1614,10352,10353],{},[540,10354,10355],{},"depthWrite",[874,10357,10358],{"align":920},"Whether the depth of the mask's own material will leak through.",[874,10360,10361],{},[540,10362,894],{},[545,10364,10366],{"id":10365},"usemask","useMask",[536,10368,10369,10370,10373],{},"Composable that returns the stencil configuration to apply a mask to a material. Use it with ",[540,10371,10372],{},"v-bind"," on materials that should be affected by the mask.",[536,10375,10376],{},[1614,10377,10378],{},"Parameters:",[2158,10380,10381,10386],{},[2161,10382,10383,10385],{},[540,10384,10322],{}," - The mask id to use (number or Ref)",[2161,10387,10388,10391,10392],{},[540,10389,10390],{},"inverse"," - Whether to invert the mask (boolean or Ref), defaults to ",[540,10393,894],{},[549,10395,10397],{"className":551,"code":10396,"language":556,"meta":508,"style":508},"\u003CTresMeshNormalMaterial v-bind=\"useMask(1)\" />\n",[540,10398,10399],{"__ignoreMap":508},[560,10400,10401,10403,10405,10407,10409,10411,10413,10415,10417,10419,10421],{"class":562,"line":509},[560,10402,566],{"class":565},[560,10404,800],{"class":569},[560,10406,10158],{"class":573},[560,10408,580],{"class":565},[560,10410,583],{"class":565},[560,10412,10366],{"class":2379},[560,10414,2382],{"class":606},[560,10416,1819],{"class":2446},[560,10418,3285],{"class":606},[560,10420,583],{"class":565},[560,10422,710],{"class":565},[1272,10424,10425],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":508,"searchDepth":509,"depth":510,"links":10427},[10428,10429,10430],{"id":547,"depth":510,"text":15},{"id":844,"depth":510,"text":845},{"id":10365,"depth":510,"text":10366},"Cut out areas of the screen using the stencil buffer.",{},{"title":73,"description":10431},"R8IKeS_cog0AR5hyMVg359sjKmupKD2bH-5ixZXY8zY",{"id":10436,"title":77,"body":10437,"description":11137,"extension":513,"links":514,"meta":11138,"navigation":516,"path":78,"seo":11139,"stem":79,"__hash__":11140},"docs/2.api/1.abstractions/merged.md",{"type":501,"value":10438,"toc":11131},[10439,10444,10455,10462,10464,10467,10684,10687,10954,10962,10966,10975,11043,11046,11050,11062,11064,11113,11118,11128],[530,10440,10441],{},[10442,10443],"abstractions-merged",{},[536,10445,10446,8644,10448,10451,10452,1069],{},[540,10447,8986],{},[540,10449,10450],{},"{ name: mesh }"," map and builds one instanced batch per entry. Any descendant,\nat any depth and in any component, joins one by key with ",[540,10453,10454],{},"\u003CInstance batch=\"...\" />",[536,10456,10457,10458,10461],{},"That is what makes repeating a whole model cheap: a robot made of two meshes drawn 49 times is\n",[1614,10459,10460],{},"two"," drawcalls, not 98.",[545,10463,15],{"id":547},[536,10465,10466],{},"The model becomes its own component, and knows nothing about the batches beyond their names:",[549,10468,10471],{"className":551,"code":10469,"filename":10470,"language":556,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { Instance } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresGroup>\n    \u003CInstance batch=\"Body\" :position=\"[0, 0.6, 0]\" />\n    \u003CInstance batch=\"Body\" :position=\"[0, 1.6, 0]\" :scale=\"0.6\" />\n    \u003CInstance batch=\"Eye\" :position=\"[-0.18, 1.7, 0.32]\" />\n    \u003CInstance batch=\"Eye\" :position=\"[0.18, 1.7, 0.32]\" />\n  \u003C/TresGroup>\n\u003C/template>\n","Robot.vue",[540,10472,10473,10493,10511,10519,10523,10531,10539,10569,10609,10639,10668,10676],{"__ignoreMap":508},[560,10474,10475,10477,10479,10481,10483,10485,10487,10489,10491],{"class":562,"line":509},[560,10476,566],{"class":565},[560,10478,570],{"class":569},[560,10480,574],{"class":573},[560,10482,577],{"class":573},[560,10484,580],{"class":565},[560,10486,583],{"class":565},[560,10488,587],{"class":586},[560,10490,583],{"class":565},[560,10492,592],{"class":565},[560,10494,10495,10497,10499,10501,10503,10505,10507,10509],{"class":562,"line":510},[560,10496,600],{"class":599},[560,10498,603],{"class":565},[560,10500,8269],{"class":606},[560,10502,616],{"class":565},[560,10504,619],{"class":599},[560,10506,622],{"class":565},[560,10508,625],{"class":586},[560,10510,628],{"class":565},[560,10512,10513,10515,10517],{"class":562,"line":631},[560,10514,655],{"class":565},[560,10516,570],{"class":569},[560,10518,592],{"class":565},[560,10520,10521],{"class":562,"line":652},[560,10522,665],{"emptyLinePlaceholder":516},[560,10524,10525,10527,10529],{"class":562,"line":662},[560,10526,566],{"class":565},[560,10528,673],{"class":569},[560,10530,592],{"class":565},[560,10532,10533,10535,10537],{"class":562,"line":668},[560,10534,681],{"class":565},[560,10536,9984],{"class":569},[560,10538,592],{"class":565},[560,10540,10541,10543,10545,10548,10550,10552,10554,10556,10558,10560,10562,10565,10567],{"class":562,"line":678},[560,10542,704],{"class":565},[560,10544,8663],{"class":569},[560,10546,10547],{"class":573}," batch",[560,10549,580],{"class":565},[560,10551,583],{"class":565},[560,10553,4674],{"class":586},[560,10555,583],{"class":565},[560,10557,1430],{"class":573},[560,10559,580],{"class":565},[560,10561,583],{"class":565},[560,10563,10564],{"class":586},"[0, 0.6, 0]",[560,10566,583],{"class":565},[560,10568,710],{"class":565},[560,10570,10571,10573,10575,10577,10579,10581,10583,10585,10587,10589,10591,10594,10596,10598,10600,10602,10605,10607],{"class":562,"line":701},[560,10572,704],{"class":565},[560,10574,8663],{"class":569},[560,10576,10547],{"class":573},[560,10578,580],{"class":565},[560,10580,583],{"class":565},[560,10582,4674],{"class":586},[560,10584,583],{"class":565},[560,10586,1430],{"class":573},[560,10588,580],{"class":565},[560,10590,583],{"class":565},[560,10592,10593],{"class":586},"[0, 1.6, 0]",[560,10595,583],{"class":565},[560,10597,736],{"class":573},[560,10599,580],{"class":565},[560,10601,583],{"class":565},[560,10603,10604],{"class":586},"0.6",[560,10606,583],{"class":565},[560,10608,710],{"class":565},[560,10610,10611,10613,10615,10617,10619,10621,10624,10626,10628,10630,10632,10635,10637],{"class":562,"line":713},[560,10612,704],{"class":565},[560,10614,8663],{"class":569},[560,10616,10547],{"class":573},[560,10618,580],{"class":565},[560,10620,583],{"class":565},[560,10622,10623],{"class":586},"Eye",[560,10625,583],{"class":565},[560,10627,1430],{"class":573},[560,10629,580],{"class":565},[560,10631,583],{"class":565},[560,10633,10634],{"class":586},"[-0.18, 1.7, 0.32]",[560,10636,583],{"class":565},[560,10638,710],{"class":565},[560,10640,10641,10643,10645,10647,10649,10651,10653,10655,10657,10659,10661,10664,10666],{"class":562,"line":723},[560,10642,704],{"class":565},[560,10644,8663],{"class":569},[560,10646,10547],{"class":573},[560,10648,580],{"class":565},[560,10650,583],{"class":565},[560,10652,10623],{"class":586},[560,10654,583],{"class":565},[560,10656,1430],{"class":573},[560,10658,580],{"class":565},[560,10660,583],{"class":565},[560,10662,10663],{"class":586},"[0.18, 1.7, 0.32]",[560,10665,583],{"class":565},[560,10667,710],{"class":565},[560,10669,10670,10672,10674],{"class":562,"line":728},[560,10671,828],{"class":565},[560,10673,9984],{"class":569},[560,10675,592],{"class":565},[560,10677,10678,10680,10682],{"class":562,"line":750},[560,10679,655],{"class":565},[560,10681,673],{"class":569},[560,10683,592],{"class":565},[536,10685,10686],{},"The provider hands over the meshes and renders as many copies as it likes:",[549,10688,10691],{"className":551,"code":10689,"highlights":10690,"language":556,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Merged, useGLTF } from '@tresjs/cientos'\nimport Robot from './Robot.vue'\n\nconst { nodes } = useGLTF('/robot.glb')\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera :position=\"[12, 9, 12]\" />\n    \u003CMerged :meshes=\"{ Body: nodes.Body, Eye: nodes.Eye }\">\n      \u003CRobot :position=\"[-2, 0, 0]\" />\n      \u003CRobot :position=\"[0, 0, 0]\" />\n      \u003CRobot :position=\"[2, 0, 0]\" />\n    \u003C/Merged>\n  \u003C/TresCanvas>\n\u003C/template>\n",[750,554,773,784,795,805,555],[540,10692,10693,10713,10731,10754,10770,10774,10799,10807,10811,10819,10827,10846,10867,10888,10907,10927,10936,10945],{"__ignoreMap":508},[560,10694,10695,10697,10699,10701,10703,10705,10707,10709,10711],{"class":562,"line":509},[560,10696,566],{"class":565},[560,10698,570],{"class":569},[560,10700,574],{"class":573},[560,10702,577],{"class":573},[560,10704,580],{"class":565},[560,10706,583],{"class":565},[560,10708,587],{"class":586},[560,10710,583],{"class":565},[560,10712,592],{"class":565},[560,10714,10715,10717,10719,10721,10723,10725,10727,10729],{"class":562,"line":510},[560,10716,600],{"class":599},[560,10718,603],{"class":565},[560,10720,638],{"class":606},[560,10722,616],{"class":565},[560,10724,619],{"class":599},[560,10726,622],{"class":565},[560,10728,647],{"class":586},[560,10730,628],{"class":565},[560,10732,10733,10735,10737,10740,10742,10744,10746,10748,10750,10752],{"class":562,"line":631},[560,10734,600],{"class":599},[560,10736,603],{"class":565},[560,10738,10739],{"class":606}," Merged",[560,10741,610],{"class":565},[560,10743,4292],{"class":606},[560,10745,616],{"class":565},[560,10747,619],{"class":599},[560,10749,622],{"class":565},[560,10751,625],{"class":586},[560,10753,628],{"class":565},[560,10755,10756,10758,10761,10763,10765,10768],{"class":562,"line":652},[560,10757,600],{"class":599},[560,10759,10760],{"class":606}," Robot ",[560,10762,8376],{"class":599},[560,10764,622],{"class":565},[560,10766,10767],{"class":586},"./Robot.vue",[560,10769,628],{"class":565},[560,10771,10772],{"class":562,"line":662},[560,10773,665],{"emptyLinePlaceholder":516},[560,10775,10776,10778,10780,10782,10784,10786,10788,10790,10792,10795,10797],{"class":562,"line":668},[560,10777,2360],{"class":573},[560,10779,603],{"class":565},[560,10781,4315],{"class":606},[560,10783,2373],{"class":565},[560,10785,2376],{"class":565},[560,10787,4292],{"class":2379},[560,10789,2382],{"class":606},[560,10791,2385],{"class":565},[560,10793,10794],{"class":586},"/robot.glb",[560,10796,2385],{"class":565},[560,10798,2393],{"class":606},[560,10800,10801,10803,10805],{"class":562,"line":678},[560,10802,655],{"class":565},[560,10804,570],{"class":569},[560,10806,592],{"class":565},[560,10808,10809],{"class":562,"line":701},[560,10810,665],{"emptyLinePlaceholder":516},[560,10812,10813,10815,10817],{"class":562,"line":713},[560,10814,566],{"class":565},[560,10816,673],{"class":569},[560,10818,592],{"class":565},[560,10820,10821,10823,10825],{"class":562,"line":723},[560,10822,681],{"class":565},[560,10824,684],{"class":569},[560,10826,592],{"class":565},[560,10828,10829,10831,10833,10835,10837,10839,10842,10844],{"class":562,"line":728},[560,10830,704],{"class":565},[560,10832,707],{"class":569},[560,10834,1430],{"class":573},[560,10836,580],{"class":565},[560,10838,583],{"class":565},[560,10840,10841],{"class":586},"[12, 9, 12]",[560,10843,583],{"class":565},[560,10845,710],{"class":565},[560,10847,10849,10851,10853,10856,10858,10860,10863,10865],{"class":10848,"line":750},[562,596],[560,10850,704],{"class":565},[560,10852,77],{"class":569},[560,10854,10855],{"class":573}," :meshes",[560,10857,580],{"class":565},[560,10859,583],{"class":565},[560,10861,10862],{"class":586},"{ Body: nodes.Body, Eye: nodes.Eye }",[560,10864,583],{"class":565},[560,10866,592],{"class":565},[560,10868,10870,10872,10875,10877,10879,10881,10884,10886],{"class":10869,"line":554},[562,596],[560,10871,776],{"class":565},[560,10873,10874],{"class":569},"Robot",[560,10876,1430],{"class":573},[560,10878,580],{"class":565},[560,10880,583],{"class":565},[560,10882,10883],{"class":586},"[-2, 0, 0]",[560,10885,583],{"class":565},[560,10887,710],{"class":565},[560,10889,10891,10893,10895,10897,10899,10901,10903,10905],{"class":10890,"line":773},[562,596],[560,10892,776],{"class":565},[560,10894,10874],{"class":569},[560,10896,1430],{"class":573},[560,10898,580],{"class":565},[560,10900,583],{"class":565},[560,10902,9566],{"class":586},[560,10904,583],{"class":565},[560,10906,710],{"class":565},[560,10908,10910,10912,10914,10916,10918,10920,10923,10925],{"class":10909,"line":784},[562,596],[560,10911,776],{"class":565},[560,10913,10874],{"class":569},[560,10915,1430],{"class":573},[560,10917,580],{"class":565},[560,10919,583],{"class":565},[560,10921,10922],{"class":586},"[2, 0, 0]",[560,10924,583],{"class":565},[560,10926,710],{"class":565},[560,10928,10930,10932,10934],{"class":10929,"line":795},[562,596],[560,10931,818],{"class":565},[560,10933,77],{"class":569},[560,10935,592],{"class":565},[560,10937,10939,10941,10943],{"class":10938,"line":805},[562,596],[560,10940,828],{"class":565},[560,10942,684],{"class":569},[560,10944,592],{"class":565},[560,10946,10948,10950,10952],{"class":10947,"line":555},[562,596],[560,10949,655],{"class":565},[560,10951,673],{"class":569},[560,10953,592],{"class":565},[1950,10955,10956],{},[536,10957,10958,10959,10961],{},"Nothing needs to be threaded through props or slots: the batches are provided, so an ",[540,10960,8187],{},"\nfinds the one it names no matter how deep it sits or how many components stand between them.",[545,10963,10965],{"id":10964},"instancing-a-whole-gltf","Instancing a whole glTF",[536,10967,10968,10970,10971,10974],{},[540,10969,133],{}," gives you ",[540,10972,10973],{},"nodes",", so instancing every repeated mesh of a model is a matter of picking the\nones worth batching:",[549,10976,10978],{"className":551,"code":10977,"language":556,"meta":508,"style":508},"\u003CMerged :meshes=\"{ Screw: nodes.Screw, Bolt: nodes.Bolt }\">\n  \u003CMachine v-for=\"i in 20\" :key=\"i\" :position=\"layout[i]\" />\n\u003C/Merged>\n",[540,10979,10980,11030,11035],{"__ignoreMap":508},[560,10981,10982,10984,10986,10988,10991,10993,10995,10997,11000,11002,11005,11007,11010,11012,11015,11017,11019,11021,11024,11026,11028],{"class":562,"line":509},[560,10983,566],{"class":565},[560,10985,77],{"class":569},[560,10987,2974],{"class":565},[560,10989,10990],{"class":573},"meshes",[560,10992,580],{"class":565},[560,10994,583],{"class":565},[560,10996,8381],{"class":565},[560,10998,10999],{"class":569}," Screw",[560,11001,1163],{"class":565},[560,11003,11004],{"class":606}," nodes",[560,11006,1069],{"class":565},[560,11008,11009],{"class":606},"Screw",[560,11011,610],{"class":565},[560,11013,11014],{"class":569}," Bolt",[560,11016,1163],{"class":565},[560,11018,11004],{"class":606},[560,11020,1069],{"class":565},[560,11022,11023],{"class":606},"Bolt ",[560,11025,2373],{"class":565},[560,11027,583],{"class":565},[560,11029,592],{"class":565},[560,11031,11032],{"class":562,"line":510},[560,11033,11034],{"class":606},"  \u003CMachine v-for=\"i in 20\" :key=\"i\" :position=\"layout[i]\" />\n",[560,11036,11037,11039,11041],{"class":562,"line":631},[560,11038,655],{"class":565},[560,11040,77],{"class":569},[560,11042,592],{"class":565},[536,11044,11045],{},"The payoff is across models, not within one: twenty machines sharing two batches is two drawcalls.",[545,11047,11049],{"id":11048},"opting-a-node-out","Opting a node out",[536,11051,8199,11052,11054,11055,11058,11059,11061],{},[540,11053,8187],{}," is all-or-nothing per node: it uses the batch's geometry and material. When one\nnode needs its own material, a different geometry, or its own shader, render a normal ",[540,11056,11057],{},"\u003CTresMesh />","\ninstead of an ",[540,11060,8187],{},". You trade one drawcall for full control over that node, and every\nother node stays batched.",[545,11063,845],{"id":844},[850,11065,11066,11076],{},[853,11067,11068],{},[856,11069,11070,11072,11074],{},[859,11071,861],{"align":920},[859,11073,864],{"align":920},[859,11075,867],{},[869,11077,11078,11094],{},[856,11079,11080,11084,11090],{},[874,11081,11082],{"align":920},[540,11083,10990],{},[874,11085,11086,11087,11089],{"align":920},"One batch per entry, keyed by what ",[540,11088,10454],{}," joins.",[874,11091,11092],{},[1619,11093,9202],{},[856,11095,11096,11100,11108],{},[874,11097,11098],{"align":920},[540,11099,9022],{},[874,11101,11102,11103,11105,11106,1069],{"align":920},"Initial buffer allocation per batch. One batch per entry in ",[540,11104,10990],{},", so it defaults lower than ",[540,11107,8180],{},[874,11109,11110],{},[540,11111,11112],{},"100",[536,11114,11115,11116,1069],{},"Exposes the named batch registry through ",[540,11117,9174],{},[9362,11119,11120],{"to":66},[536,11121,11122,11123,11125,11126,1069],{},"Per-instance colors, pointer events, visibility and the ",[540,11124,9022],{}," growth behaviour are documented on ",[540,11127,8180],{},[1272,11129,11130],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":508,"searchDepth":509,"depth":510,"links":11132},[11133,11134,11135,11136],{"id":547,"depth":510,"text":15},{"id":10964,"depth":510,"text":10965},{"id":11048,"depth":510,"text":11049},{"id":844,"depth":510,"text":845},"One instanced batch per mesh, shared across your whole component tree.",{},{"title":77,"description":11137},"C2ZYlA8AWc0pX47Tdp8yJPJh6JofaryewUtJVMvgXZw",{"id":11142,"title":81,"body":11143,"description":11614,"extension":513,"links":514,"meta":11615,"navigation":516,"path":82,"seo":11616,"stem":83,"__hash__":11617},"docs/2.api/1.abstractions/outline.md",{"type":501,"value":11144,"toc":11610},[11145,11150,11161,11163,11510,11512,11608],[530,11146,11147],{},[11148,11149],"abstractions-outline",{},[536,11151,11152,11155,11156,3008,11158,1069],{},[540,11153,11154],{},"\u003COutline />"," creates an inverted-hull outline using its parent's geometry. Supported parents are ",[540,11157,2255],{},[540,11159,11160],{},"\u003CTresSkinnedMesh>",[545,11162,15],{"id":547},[549,11164,11167],{"className":551,"code":11165,"highlights":11166,"language":556,"meta":508,"style":508},"\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",[631,784,835],[540,11168,11169,11189,11207,11231,11239,11243,11251,11269,11277,11285,11304,11335,11355,11363,11372,11404,11412,11430,11449,11457,11486,11494,11502],{"__ignoreMap":508},[560,11170,11171,11173,11175,11177,11179,11181,11183,11185,11187],{"class":562,"line":509},[560,11172,566],{"class":565},[560,11174,570],{"class":569},[560,11176,574],{"class":573},[560,11178,577],{"class":573},[560,11180,580],{"class":565},[560,11182,583],{"class":565},[560,11184,587],{"class":586},[560,11186,583],{"class":565},[560,11188,592],{"class":565},[560,11190,11191,11193,11195,11197,11199,11201,11203,11205],{"class":562,"line":510},[560,11192,600],{"class":599},[560,11194,603],{"class":565},[560,11196,638],{"class":606},[560,11198,616],{"class":565},[560,11200,619],{"class":599},[560,11202,622],{"class":565},[560,11204,647],{"class":586},[560,11206,628],{"class":565},[560,11208,11210,11212,11214,11216,11218,11221,11223,11225,11227,11229],{"class":11209,"line":631},[562,596],[560,11211,600],{"class":599},[560,11213,603],{"class":565},[560,11215,613],{"class":606},[560,11217,610],{"class":565},[560,11219,11220],{"class":606}," Outline",[560,11222,616],{"class":565},[560,11224,619],{"class":599},[560,11226,622],{"class":565},[560,11228,625],{"class":586},[560,11230,628],{"class":565},[560,11232,11233,11235,11237],{"class":562,"line":652},[560,11234,655],{"class":565},[560,11236,570],{"class":569},[560,11238,592],{"class":565},[560,11240,11241],{"class":562,"line":662},[560,11242,665],{"emptyLinePlaceholder":516},[560,11244,11245,11247,11249],{"class":562,"line":668},[560,11246,566],{"class":565},[560,11248,673],{"class":569},[560,11250,592],{"class":565},[560,11252,11253,11255,11257,11259,11261,11263,11265,11267],{"class":562,"line":678},[560,11254,681],{"class":565},[560,11256,684],{"class":569},[560,11258,687],{"class":573},[560,11260,580],{"class":565},[560,11262,583],{"class":565},[560,11264,9953],{"class":586},[560,11266,583],{"class":565},[560,11268,592],{"class":565},[560,11270,11271,11273,11275],{"class":562,"line":701},[560,11272,704],{"class":565},[560,11274,707],{"class":569},[560,11276,710],{"class":565},[560,11278,11279,11281,11283],{"class":562,"line":713},[560,11280,704],{"class":565},[560,11282,718],{"class":569},[560,11284,710],{"class":565},[560,11286,11287,11289,11291,11293,11295,11297,11300,11302],{"class":562,"line":723},[560,11288,704],{"class":565},[560,11290,9624],{"class":569},[560,11292,1812],{"class":573},[560,11294,580],{"class":565},[560,11296,583],{"class":565},[560,11298,11299],{"class":586},"3.14",[560,11301,583],{"class":565},[560,11303,710],{"class":565},[560,11305,11306,11308,11311,11313,11315,11317,11320,11322,11324,11326,11328,11331,11333],{"class":562,"line":728},[560,11307,704],{"class":565},[560,11309,11310],{"class":569},"TresPointLight",[560,11312,1812],{"class":573},[560,11314,580],{"class":565},[560,11316,583],{"class":565},[560,11318,11319],{"class":586},"50",[560,11321,583],{"class":565},[560,11323,1430],{"class":573},[560,11325,580],{"class":565},[560,11327,583],{"class":565},[560,11329,11330],{"class":586},"[2, 2, 0]",[560,11332,583],{"class":565},[560,11334,710],{"class":565},[560,11336,11337,11339,11341,11344,11346,11348,11351,11353],{"class":562,"line":750},[560,11338,704],{"class":565},[560,11340,779],{"class":569},[560,11342,11343],{"class":573}," :position-x",[560,11345,580],{"class":565},[560,11347,583],{"class":565},[560,11349,11350],{"class":586},"-0.75",[560,11352,583],{"class":565},[560,11354,592],{"class":565},[560,11356,11357,11359,11361],{"class":562,"line":554},[560,11358,776],{"class":565},[560,11360,790],{"class":569},[560,11362,710],{"class":565},[560,11364,11365,11367,11370],{"class":562,"line":773},[560,11366,776],{"class":565},[560,11368,11369],{"class":569},"TresMeshPhongMaterial",[560,11371,710],{"class":565},[560,11373,11375,11377,11379,11382,11384,11386,11389,11391,11393,11395,11397,11400,11402],{"class":11374,"line":784},[562,596],[560,11376,776],{"class":565},[560,11378,81],{"class":569},[560,11380,11381],{"class":573}," :thickness",[560,11383,580],{"class":565},[560,11385,583],{"class":565},[560,11387,11388],{"class":586},"7.5",[560,11390,583],{"class":565},[560,11392,2634],{"class":573},[560,11394,580],{"class":565},[560,11396,583],{"class":565},[560,11398,11399],{"class":586},"#82dbc5",[560,11401,583],{"class":565},[560,11403,710],{"class":565},[560,11405,11406,11408,11410],{"class":562,"line":795},[560,11407,818],{"class":565},[560,11409,779],{"class":569},[560,11411,592],{"class":565},[560,11413,11414,11416,11418,11420,11422,11424,11426,11428],{"class":562,"line":805},[560,11415,704],{"class":565},[560,11417,779],{"class":569},[560,11419,11343],{"class":573},[560,11421,580],{"class":565},[560,11423,583],{"class":565},[560,11425,2496],{"class":586},[560,11427,583],{"class":565},[560,11429,592],{"class":565},[560,11431,11432,11434,11436,11438,11440,11442,11445,11447],{"class":562,"line":555},[560,11433,776],{"class":565},[560,11435,3903],{"class":569},[560,11437,1904],{"class":573},[560,11439,580],{"class":565},[560,11441,583],{"class":565},[560,11443,11444],{"class":586},"[0.5]",[560,11446,583],{"class":565},[560,11448,710],{"class":565},[560,11450,11451,11453,11455],{"class":562,"line":825},[560,11452,776],{"class":565},[560,11454,11369],{"class":569},[560,11456,710],{"class":565},[560,11458,11460,11462,11464,11466,11468,11470,11472,11474,11476,11478,11480,11482,11484],{"class":11459,"line":835},[562,596],[560,11461,776],{"class":565},[560,11463,81],{"class":569},[560,11465,11381],{"class":573},[560,11467,580],{"class":565},[560,11469,583],{"class":565},[560,11471,11388],{"class":586},[560,11473,583],{"class":565},[560,11475,2634],{"class":573},[560,11477,580],{"class":565},[560,11479,583],{"class":565},[560,11481,10096],{"class":586},[560,11483,583],{"class":565},[560,11485,710],{"class":565},[560,11487,11488,11490,11492],{"class":562,"line":2570},[560,11489,818],{"class":565},[560,11491,779],{"class":569},[560,11493,592],{"class":565},[560,11495,11496,11498,11500],{"class":562,"line":2579},[560,11497,828],{"class":565},[560,11499,684],{"class":569},[560,11501,592],{"class":565},[560,11503,11504,11506,11508],{"class":562,"line":2599},[560,11505,655],{"class":565},[560,11507,673],{"class":569},[560,11509,592],{"class":565},[545,11511,845],{"id":844},[850,11513,11514,11524],{},[853,11515,11516],{},[856,11517,11518,11520,11522],{},[859,11519,845],{},[859,11521,864],{},[859,11523,867],{},[869,11525,11526,11538,11550,11562,11574,11587],{},[856,11527,11528,11530,11533],{},[874,11529,7490],{},[874,11531,11532],{},"Outline color",[874,11534,11535],{},[540,11536,11537],{},"'black'",[856,11539,11540,11543,11546],{},[874,11541,11542],{},"screenspace",[874,11544,11545],{},"Whether line thickness is independent of zoom",[874,11547,11548],{},[540,11549,894],{},[856,11551,11552,11555,11558],{},[874,11553,11554],{},"opacity",[874,11556,11557],{},"Outline opacity",[874,11559,11560],{},[540,11561,1819],{},[856,11563,11564,11567,11570],{},[874,11565,11566],{},"transparent",[874,11568,11569],{},"Outline transparency",[874,11571,11572],{},[540,11573,894],{},[856,11575,11576,11579,11582],{},[874,11577,11578],{},"thickness",[874,11580,11581],{},"Outline thickness",[874,11583,11584],{},[540,11585,11586],{},"0.05",[856,11588,11589,11592,11603],{},[874,11590,11591],{},"angle",[874,11593,11594,11595,11597,11598],{},"Geometry crease angle (",[540,11596,888],{}," is no crease).  See ",[1063,11599,11602],{"href":11600,"rel":11601},"https://threejs.org/docs/#examples/en/utils/BufferGeometryUtils.toCreasedNormals",[1067],"BufferGeometryUtils.toCreasedNormals",[874,11604,11605],{},[540,11606,11607],{},"Math.PI",[1272,11609,1589],{},{"title":508,"searchDepth":509,"depth":510,"links":11611},[11612,11613],{"id":547,"depth":510,"text":15},{"id":844,"depth":510,"text":845},"Create inverted-hull outlines using parent geometry.",{},{"title":81,"description":11614},"Qb5LM-UoZ_zkrRGWyAbuOtaH4q-8vTeY2hMA8LObyAM",{"id":11619,"title":85,"body":11620,"description":12416,"extension":513,"links":514,"meta":12417,"navigation":516,"path":86,"seo":12418,"stem":87,"__hash__":12419},"docs/2.api/1.abstractions/sampler.md",{"type":501,"value":11621,"toc":12411},[11622,11627,11630,11632,11925,11927,11992,11996,12003,12408],[530,11623,11624],{},[11625,11626],"abstractions-sampler",{},[536,11628,11629],{},"Declarative abstraction around MeshSurfaceSampler & InstancedMesh. It samples points from the passed mesh and transforms an InstancedMesh's matrix to distribute instances on the points.",[545,11631,15],{"id":547},[549,11633,11636],{"className":551,"code":11634,"highlights":11635,"language":556,"meta":508,"style":508},"\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",[510,728,750,554,773,784,795,805,555,825,835],[540,11637,11638,11658,11682,11700,11708,11712,11720,11739,11758,11766,11770,11790,11799,11809,11818,11823,11843,11863,11872,11881,11890,11909,11917],{"__ignoreMap":508},[560,11639,11640,11642,11644,11646,11648,11650,11652,11654,11656],{"class":562,"line":509},[560,11641,566],{"class":565},[560,11643,570],{"class":569},[560,11645,574],{"class":573},[560,11647,577],{"class":573},[560,11649,580],{"class":565},[560,11651,583],{"class":565},[560,11653,587],{"class":586},[560,11655,583],{"class":565},[560,11657,592],{"class":565},[560,11659,11661,11663,11665,11667,11669,11672,11674,11676,11678,11680],{"class":11660,"line":510},[562,596],[560,11662,600],{"class":599},[560,11664,603],{"class":565},[560,11666,613],{"class":606},[560,11668,610],{"class":565},[560,11670,11671],{"class":606}," Sampler",[560,11673,616],{"class":565},[560,11675,619],{"class":599},[560,11677,622],{"class":565},[560,11679,625],{"class":586},[560,11681,628],{"class":565},[560,11683,11684,11686,11688,11690,11692,11694,11696,11698],{"class":562,"line":631},[560,11685,600],{"class":599},[560,11687,603],{"class":565},[560,11689,638],{"class":606},[560,11691,616],{"class":565},[560,11693,619],{"class":599},[560,11695,622],{"class":565},[560,11697,647],{"class":586},[560,11699,628],{"class":565},[560,11701,11702,11704,11706],{"class":562,"line":652},[560,11703,655],{"class":565},[560,11705,570],{"class":569},[560,11707,592],{"class":565},[560,11709,11710],{"class":562,"line":662},[560,11711,665],{"emptyLinePlaceholder":516},[560,11713,11714,11716,11718],{"class":562,"line":668},[560,11715,566],{"class":565},[560,11717,673],{"class":569},[560,11719,592],{"class":565},[560,11721,11722,11724,11726,11728,11730,11732,11735,11737],{"class":562,"line":678},[560,11723,681],{"class":565},[560,11725,684],{"class":569},[560,11727,687],{"class":573},[560,11729,580],{"class":565},[560,11731,583],{"class":565},[560,11733,11734],{"class":586},"#82DBC5",[560,11736,583],{"class":565},[560,11738,592],{"class":565},[560,11740,11741,11743,11745,11747,11749,11751,11754,11756],{"class":562,"line":701},[560,11742,704],{"class":565},[560,11744,707],{"class":569},[560,11746,1430],{"class":573},[560,11748,580],{"class":565},[560,11750,583],{"class":565},[560,11752,11753],{"class":586},"[0, 0.5, 5]",[560,11755,583],{"class":565},[560,11757,710],{"class":565},[560,11759,11760,11762,11764],{"class":562,"line":713},[560,11761,704],{"class":565},[560,11763,718],{"class":569},[560,11765,710],{"class":565},[560,11767,11768],{"class":562,"line":723},[560,11769,665],{"emptyLinePlaceholder":516},[560,11771,11773,11775,11777,11780,11782,11784,11786,11788],{"class":11772,"line":728},[562,596],[560,11774,704],{"class":565},[560,11776,85],{"class":569},[560,11778,11779],{"class":573}," :count",[560,11781,580],{"class":565},[560,11783,583],{"class":565},[560,11785,11319],{"class":586},[560,11787,583],{"class":565},[560,11789,592],{"class":565},[560,11791,11793,11795,11797],{"class":11792,"line":750},[562,596],[560,11794,776],{"class":565},[560,11796,779],{"class":569},[560,11798,592],{"class":565},[560,11800,11802,11804,11807],{"class":11801,"line":554},[562,596],[560,11803,787],{"class":565},[560,11805,11806],{"class":569},"TresTorusGeometry",[560,11808,710],{"class":565},[560,11810,11812,11814,11816],{"class":11811,"line":773},[562,596],[560,11813,808],{"class":565},[560,11815,779],{"class":569},[560,11817,592],{"class":565},[560,11819,11821],{"class":11820,"line":784},[562,596],[560,11822,665],{"emptyLinePlaceholder":516},[560,11824,11826,11828,11830,11832,11834,11836,11839,11841],{"class":11825,"line":795},[562,596],[560,11827,776],{"class":565},[560,11829,9161],{"class":569},[560,11831,1904],{"class":573},[560,11833,580],{"class":565},[560,11835,583],{"class":565},[560,11837,11838],{"class":586},"[null!, null!, 1000]",[560,11840,583],{"class":565},[560,11842,592],{"class":565},[560,11844,11846,11848,11850,11852,11854,11856,11859,11861],{"class":11845,"line":805},[562,596],[560,11847,787],{"class":565},[560,11849,790],{"class":569},[560,11851,1904],{"class":573},[560,11853,580],{"class":565},[560,11855,583],{"class":565},[560,11857,11858],{"class":586},"[0.1, 0.1, 0.1]",[560,11860,583],{"class":565},[560,11862,710],{"class":565},[560,11864,11866,11868,11870],{"class":11865,"line":555},[562,596],[560,11867,787],{"class":565},[560,11869,800],{"class":569},[560,11871,710],{"class":565},[560,11873,11875,11877,11879],{"class":11874,"line":825},[562,596],[560,11876,808],{"class":565},[560,11878,9161],{"class":569},[560,11880,592],{"class":565},[560,11882,11884,11886,11888],{"class":11883,"line":835},[562,596],[560,11885,818],{"class":565},[560,11887,85],{"class":569},[560,11889,592],{"class":565},[560,11891,11892,11894,11896,11898,11900,11902,11905,11907],{"class":562,"line":2570},[560,11893,704],{"class":565},[560,11895,7992],{"class":569},[560,11897,1904],{"class":573},[560,11899,580],{"class":565},[560,11901,583],{"class":565},[560,11903,11904],{"class":586},"[10, 10]",[560,11906,583],{"class":565},[560,11908,710],{"class":565},[560,11910,11911,11913,11915],{"class":562,"line":2579},[560,11912,828],{"class":565},[560,11914,684],{"class":569},[560,11916,592],{"class":565},[560,11918,11919,11921,11923],{"class":562,"line":2599},[560,11920,655],{"class":565},[560,11922,673],{"class":569},[560,11924,592],{"class":565},[545,11926,845],{"id":844},[850,11928,11929,11937],{},[853,11930,11931],{},[856,11932,11933,11935],{},[859,11934,845],{},[859,11936,864],{},[869,11938,11939,11948,11959,11970,11981],{},[856,11940,11941,11943],{},[874,11942,5550],{},[874,11944,11945,11947],{},[1614,11946,4237],{}," Surface mesh from which to sample",[856,11949,11950,11953],{},[874,11951,11952],{},"count",[874,11954,11955,11958],{},[1614,11956,11957],{},"Number"," Number of samples",[856,11960,11961,11964],{},[874,11962,11963],{},"instanceMesh",[874,11965,11966,11969],{},[1614,11967,11968],{},"InstanceMesh"," InstanceMesh to scatter",[856,11971,11972,11975],{},[874,11973,11974],{},"weight",[874,11976,11977,11980],{},[1614,11978,11979],{},"String"," A vertex attribute to be used as a weight when sampling",[856,11982,11983,11986],{},[874,11984,11985],{},"transform",[874,11987,11988,11991],{},[1614,11989,11990],{},"Function"," A function that can be used as a custom sampling",[545,11993,11995],{"id":11994},"usesurfacesampler","useSurfaceSampler",[536,11997,11998,11999],{},"A hook to obtain the result of the ",[12000,12001,12002],"sampler",{}," as a buffer. Useful for driving anything other than InstancedMesh via the Sampler.",[549,12004,12007],{"className":551,"code":12005,"highlights":12006,"language":556,"meta":508,"style":508},"\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",[510,723],[540,12008,12009,12029,12053,12071,12094,12098,12111,12124,12128,12148,12182,12188,12196,12200,12208,12226,12244,12252,12256,12275,12283,12291,12295,12302,12316,12330,12335,12354,12362,12370,12374,12392,12400],{"__ignoreMap":508},[560,12010,12011,12013,12015,12017,12019,12021,12023,12025,12027],{"class":562,"line":509},[560,12012,566],{"class":565},[560,12014,570],{"class":569},[560,12016,574],{"class":573},[560,12018,577],{"class":573},[560,12020,580],{"class":565},[560,12022,583],{"class":565},[560,12024,587],{"class":586},[560,12026,583],{"class":565},[560,12028,592],{"class":565},[560,12030,12032,12034,12036,12038,12040,12043,12045,12047,12049,12051],{"class":12031,"line":510},[562,596],[560,12033,600],{"class":599},[560,12035,603],{"class":565},[560,12037,613],{"class":606},[560,12039,610],{"class":565},[560,12041,12042],{"class":606}," useSurfaceSampler",[560,12044,616],{"class":565},[560,12046,619],{"class":599},[560,12048,622],{"class":565},[560,12050,625],{"class":586},[560,12052,628],{"class":565},[560,12054,12055,12057,12059,12061,12063,12065,12067,12069],{"class":562,"line":631},[560,12056,600],{"class":599},[560,12058,603],{"class":565},[560,12060,638],{"class":606},[560,12062,616],{"class":565},[560,12064,619],{"class":599},[560,12066,622],{"class":565},[560,12068,647],{"class":586},[560,12070,628],{"class":565},[560,12072,12073,12075,12077,12079,12081,12084,12086,12088,12090,12092],{"class":562,"line":652},[560,12074,600],{"class":599},[560,12076,603],{"class":565},[560,12078,3817],{"class":606},[560,12080,610],{"class":565},[560,12082,12083],{"class":606}," watch",[560,12085,616],{"class":565},[560,12087,619],{"class":599},[560,12089,622],{"class":565},[560,12091,556],{"class":586},[560,12093,628],{"class":565},[560,12095,12096],{"class":562,"line":662},[560,12097,665],{"emptyLinePlaceholder":516},[560,12099,12100,12102,12105,12107,12109],{"class":562,"line":668},[560,12101,2360],{"class":573},[560,12103,12104],{"class":606}," torusRef ",[560,12106,580],{"class":565},[560,12108,3817],{"class":2379},[560,12110,6478],{"class":606},[560,12112,12113,12115,12118,12120,12122],{"class":562,"line":678},[560,12114,2360],{"class":573},[560,12116,12117],{"class":606}," instancesRef ",[560,12119,580],{"class":565},[560,12121,3817],{"class":2379},[560,12123,6478],{"class":606},[560,12125,12126],{"class":562,"line":701},[560,12127,665],{"emptyLinePlaceholder":516},[560,12129,12130,12133,12136,12138,12140,12142,12144,12146],{"class":562,"line":713},[560,12131,12132],{"class":2379},"watch",[560,12134,12135],{"class":606},"(torusRef",[560,12137,610],{"class":565},[560,12139,3019],{"class":565},[560,12141,3630],{"class":6781},[560,12143,3285],{"class":565},[560,12145,3622],{"class":573},[560,12147,1149],{"class":565},[560,12149,12151,12154,12156,12158,12160,12163,12165,12168,12170,12172,12174,12176,12178,12180],{"class":12150,"line":723},[562,596],[560,12152,12153],{"class":2379},"  useSurfaceSampler",[560,12155,2382],{"class":569},[560,12157,3630],{"class":606},[560,12159,610],{"class":565},[560,12161,12162],{"class":2446}," 50",[560,12164,610],{"class":565},[560,12166,12167],{"class":606}," instancesRef",[560,12169,1069],{"class":565},[560,12171,3630],{"class":606},[560,12173,610],{"class":565},[560,12175,622],{"class":565},[560,12177,7490],{"class":586},[560,12179,2385],{"class":565},[560,12181,2393],{"class":569},[560,12183,12184,12186],{"class":562,"line":728},[560,12185,2373],{"class":565},[560,12187,2393],{"class":606},[560,12189,12190,12192,12194],{"class":562,"line":750},[560,12191,655],{"class":565},[560,12193,570],{"class":569},[560,12195,592],{"class":565},[560,12197,12198],{"class":562,"line":554},[560,12199,665],{"emptyLinePlaceholder":516},[560,12201,12202,12204,12206],{"class":562,"line":773},[560,12203,566],{"class":565},[560,12205,673],{"class":569},[560,12207,592],{"class":565},[560,12209,12210,12212,12214,12216,12218,12220,12222,12224],{"class":562,"line":784},[560,12211,681],{"class":565},[560,12213,684],{"class":569},[560,12215,687],{"class":573},[560,12217,580],{"class":565},[560,12219,583],{"class":565},[560,12221,11734],{"class":586},[560,12223,583],{"class":565},[560,12225,592],{"class":565},[560,12227,12228,12230,12232,12234,12236,12238,12240,12242],{"class":562,"line":795},[560,12229,704],{"class":565},[560,12231,707],{"class":569},[560,12233,1430],{"class":573},[560,12235,580],{"class":565},[560,12237,583],{"class":565},[560,12239,11753],{"class":586},[560,12241,583],{"class":565},[560,12243,710],{"class":565},[560,12245,12246,12248,12250],{"class":562,"line":805},[560,12247,704],{"class":565},[560,12249,718],{"class":569},[560,12251,710],{"class":565},[560,12253,12254],{"class":562,"line":555},[560,12255,665],{"emptyLinePlaceholder":516},[560,12257,12258,12260,12262,12264,12266,12268,12271,12273],{"class":562,"line":825},[560,12259,704],{"class":565},[560,12261,779],{"class":569},[560,12263,3817],{"class":573},[560,12265,580],{"class":565},[560,12267,583],{"class":565},[560,12269,12270],{"class":586},"torusRef",[560,12272,583],{"class":565},[560,12274,592],{"class":565},[560,12276,12277,12279,12281],{"class":562,"line":835},[560,12278,776],{"class":565},[560,12280,11806],{"class":569},[560,12282,710],{"class":565},[560,12284,12285,12287,12289],{"class":562,"line":2570},[560,12286,818],{"class":565},[560,12288,779],{"class":569},[560,12290,592],{"class":565},[560,12292,12293],{"class":562,"line":2579},[560,12294,665],{"emptyLinePlaceholder":516},[560,12296,12297,12299],{"class":562,"line":2599},[560,12298,704],{"class":565},[560,12300,12301],{"class":569},"TresInstancedMesh\n",[560,12303,12304,12307,12309,12311,12314],{"class":562,"line":2608},[560,12305,12306],{"class":573},"      ref",[560,12308,580],{"class":565},[560,12310,583],{"class":565},[560,12312,12313],{"class":586},"instancesRef",[560,12315,3076],{"class":565},[560,12317,12318,12321,12323,12325,12328],{"class":562,"line":2617},[560,12319,12320],{"class":573},"      :args",[560,12322,580],{"class":565},[560,12324,583],{"class":565},[560,12326,12327],{"class":586},"[null!, null!, 1_000]",[560,12329,3076],{"class":565},[560,12331,12332],{"class":562,"line":2626},[560,12333,12334],{"class":565},"    >\n",[560,12336,12337,12339,12341,12343,12345,12347,12350,12352],{"class":562,"line":2648},[560,12338,776],{"class":565},[560,12340,3903],{"class":569},[560,12342,1904],{"class":573},[560,12344,580],{"class":565},[560,12346,583],{"class":565},[560,12348,12349],{"class":586},"[0.1, 32, 32]",[560,12351,583],{"class":565},[560,12353,710],{"class":565},[560,12355,12356,12358,12360],{"class":562,"line":2692},[560,12357,776],{"class":565},[560,12359,800],{"class":569},[560,12361,710],{"class":565},[560,12363,12364,12366,12368],{"class":562,"line":2701},[560,12365,818],{"class":565},[560,12367,9161],{"class":569},[560,12369,592],{"class":565},[560,12371,12372],{"class":562,"line":2710},[560,12373,665],{"emptyLinePlaceholder":516},[560,12375,12376,12378,12380,12382,12384,12386,12388,12390],{"class":562,"line":3867},[560,12377,704],{"class":565},[560,12379,7992],{"class":569},[560,12381,1904],{"class":573},[560,12383,580],{"class":565},[560,12385,583],{"class":565},[560,12387,11904],{"class":586},[560,12389,583],{"class":565},[560,12391,710],{"class":565},[560,12393,12394,12396,12398],{"class":562,"line":3898},[560,12395,828],{"class":565},[560,12397,684],{"class":569},[560,12399,592],{"class":565},[560,12401,12402,12404,12406],{"class":562,"line":3919},[560,12403,655],{"class":565},[560,12405,673],{"class":569},[560,12407,592],{"class":565},[1272,12409,12410],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":508,"searchDepth":509,"depth":510,"links":12412},[12413,12414,12415],{"id":547,"depth":510,"text":15},{"id":844,"depth":510,"text":845},{"id":11994,"depth":510,"text":11995},"Distribute instances on mesh surfaces using MeshSurfaceSampler.",{},{"title":85,"description":12416},"xQHwbKTVWdqSN1pcdzaa4wwWk4iBXV0lk_0HL4ZdPuo",{"id":12421,"title":89,"body":12422,"description":12729,"extension":513,"links":514,"meta":12730,"navigation":516,"path":90,"seo":12731,"stem":91,"__hash__":12732},"docs/2.api/1.abstractions/screen-sizer.md",{"type":501,"value":12423,"toc":12725},[12424,12429,12438,12441,12443,12715,12717,12723],[2240,12425,12426],{},[12427,12428],"abstractions-screen-sizer",{},[536,12430,1295,12431,12434,12435,12437],{},[540,12432,12433],{},"\u003CTresObject3D />"," wrapper that scales to \"screen space\". By default ",[540,12436,1819],{}," THREE world unit will be translated to 1 screen pixel.",[536,12439,12440],{},"E.g. a BoxGeometry with a height, width, and depth of 100 each, will be scaled to 100 screen pixels in each dimension.",[545,12442,15],{"id":547},[549,12444,12447],{"className":551,"code":12445,"highlights":12446,"language":556,"meta":508,"style":508},"\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",[631,723,784],[540,12448,12449,12469,12487,12511,12519,12523,12531,12550,12569,12577,12586,12594,12613,12621,12629,12638,12657,12665,12673,12681,12699,12707],{"__ignoreMap":508},[560,12450,12451,12453,12455,12457,12459,12461,12463,12465,12467],{"class":562,"line":509},[560,12452,566],{"class":565},[560,12454,570],{"class":569},[560,12456,574],{"class":573},[560,12458,577],{"class":573},[560,12460,580],{"class":565},[560,12462,583],{"class":565},[560,12464,587],{"class":586},[560,12466,583],{"class":565},[560,12468,592],{"class":565},[560,12470,12471,12473,12475,12477,12479,12481,12483,12485],{"class":562,"line":510},[560,12472,600],{"class":599},[560,12474,603],{"class":565},[560,12476,638],{"class":606},[560,12478,616],{"class":565},[560,12480,619],{"class":599},[560,12482,622],{"class":565},[560,12484,647],{"class":586},[560,12486,628],{"class":565},[560,12488,12490,12492,12494,12496,12498,12501,12503,12505,12507,12509],{"class":12489,"line":631},[562,596],[560,12491,600],{"class":599},[560,12493,603],{"class":565},[560,12495,613],{"class":606},[560,12497,610],{"class":565},[560,12499,12500],{"class":606}," ScreenSizer",[560,12502,616],{"class":565},[560,12504,619],{"class":599},[560,12506,622],{"class":565},[560,12508,625],{"class":586},[560,12510,628],{"class":565},[560,12512,12513,12515,12517],{"class":562,"line":652},[560,12514,655],{"class":565},[560,12516,570],{"class":569},[560,12518,592],{"class":565},[560,12520,12521],{"class":562,"line":662},[560,12522,665],{"emptyLinePlaceholder":516},[560,12524,12525,12527,12529],{"class":562,"line":668},[560,12526,566],{"class":565},[560,12528,673],{"class":569},[560,12530,592],{"class":565},[560,12532,12533,12535,12537,12539,12541,12543,12546,12548],{"class":562,"line":678},[560,12534,681],{"class":565},[560,12536,684],{"class":569},[560,12538,687],{"class":573},[560,12540,580],{"class":565},[560,12542,583],{"class":565},[560,12544,12545],{"class":586},"#3f3f3f",[560,12547,583],{"class":565},[560,12549,592],{"class":565},[560,12551,12552,12554,12556,12558,12560,12562,12565,12567],{"class":562,"line":701},[560,12553,704],{"class":565},[560,12555,707],{"class":569},[560,12557,1430],{"class":573},[560,12559,580],{"class":565},[560,12561,583],{"class":565},[560,12563,12564],{"class":586},"[10, 10, 10]",[560,12566,583],{"class":565},[560,12568,710],{"class":565},[560,12570,12571,12573,12575],{"class":562,"line":713},[560,12572,704],{"class":565},[560,12574,718],{"class":569},[560,12576,710],{"class":565},[560,12578,12580,12582,12584],{"class":12579,"line":723},[562,596],[560,12581,704],{"class":565},[560,12583,89],{"class":569},[560,12585,592],{"class":565},[560,12587,12588,12590,12592],{"class":562,"line":728},[560,12589,776],{"class":565},[560,12591,779],{"class":569},[560,12593,592],{"class":565},[560,12595,12596,12598,12600,12602,12604,12606,12609,12611],{"class":562,"line":750},[560,12597,787],{"class":565},[560,12599,790],{"class":569},[560,12601,1904],{"class":573},[560,12603,580],{"class":565},[560,12605,583],{"class":565},[560,12607,12608],{"class":586},"[100, 100, 100]",[560,12610,583],{"class":565},[560,12612,710],{"class":565},[560,12614,12615,12617,12619],{"class":562,"line":554},[560,12616,787],{"class":565},[560,12618,800],{"class":569},[560,12620,710],{"class":565},[560,12622,12623,12625,12627],{"class":562,"line":773},[560,12624,808],{"class":565},[560,12626,779],{"class":569},[560,12628,592],{"class":565},[560,12630,12632,12634,12636],{"class":12631,"line":784},[562,596],[560,12633,818],{"class":565},[560,12635,89],{"class":569},[560,12637,592],{"class":565},[560,12639,12640,12642,12644,12646,12648,12650,12653,12655],{"class":562,"line":795},[560,12641,704],{"class":565},[560,12643,779],{"class":569},[560,12645,11343],{"class":573},[560,12647,580],{"class":565},[560,12649,583],{"class":565},[560,12651,12652],{"class":586},"5",[560,12654,583],{"class":565},[560,12656,592],{"class":565},[560,12658,12659,12661,12663],{"class":562,"line":805},[560,12660,776],{"class":565},[560,12662,790],{"class":569},[560,12664,710],{"class":565},[560,12666,12667,12669,12671],{"class":562,"line":555},[560,12668,776],{"class":565},[560,12670,800],{"class":569},[560,12672,710],{"class":565},[560,12674,12675,12677,12679],{"class":562,"line":825},[560,12676,818],{"class":565},[560,12678,779],{"class":569},[560,12680,592],{"class":565},[560,12682,12683,12685,12687,12689,12691,12693,12695,12697],{"class":562,"line":835},[560,12684,704],{"class":565},[560,12686,7992],{"class":569},[560,12688,1904],{"class":573},[560,12690,580],{"class":565},[560,12692,583],{"class":565},[560,12694,11904],{"class":586},[560,12696,583],{"class":565},[560,12698,710],{"class":565},[560,12700,12701,12703,12705],{"class":562,"line":2570},[560,12702,828],{"class":565},[560,12704,684],{"class":569},[560,12706,592],{"class":565},[560,12708,12709,12711,12713],{"class":562,"line":2579},[560,12710,655],{"class":565},[560,12712,673],{"class":569},[560,12714,592],{"class":565},[545,12716,845],{"id":844},[536,12718,12719,12720,1069],{},"Inherits all props from ",[540,12721,12722],{},"THREE.Object3D",[1272,12724,1589],{},{"title":508,"searchDepth":509,"depth":510,"links":12726},[12727,12728],{"id":547,"depth":510,"text":15},{"id":844,"depth":510,"text":845},"Scale objects to screen space where 1 unit equals 1 pixel.",{},{"title":89,"description":12729},"tMjbiq6RDx6TiRe5Yr52gRCjsYdoekkV4e0s25K29s0",{"id":12734,"title":93,"body":12735,"description":13105,"extension":513,"links":514,"meta":13106,"navigation":516,"path":94,"seo":13107,"stem":95,"__hash__":13108},"docs/2.api/1.abstractions/screen-space.md",{"type":501,"value":12736,"toc":13101},[12737,12742,12755,12777,12779,13005,13007,13099],[530,12738,12739],{},[12740,12741],"abstractions-screen-space",{},[536,12743,12744,12747,12748,12751,12752,1069],{},[540,12745,12746],{},"\u003CScreenSpace />"," wraps its children in a ",[540,12749,12750],{},"\u003CTresGroup />"," and positions them in front of the active camera at ",[540,12753,12754],{},":depth",[536,12756,12757,12758,1617,12760,1617,12762,1617,12764,12766,12767,12770,12771,7562,12774,1069],{},"Additionally, the ",[540,12759,878],{},[540,12761,901],{},[540,12763,920],{},[540,12765,939],{}," props can be used to position them similarly to CSS ",[540,12768,12769],{},"position: absolute"," property when using a ",[540,12772,12773],{},"PerspectiveCamera",[540,12775,12776],{},"OrtographicCamera",[545,12778,15],{"id":547},[549,12780,12783],{"className":551,"code":12781,"highlights":12782,"language":556,"meta":508,"style":508},"\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",[510,728,795],[540,12784,12785,12805,12829,12847,12855,12859,12867,12886,12894,12902,12906,12926,12934,12942,12950,12958,12967,12971,12989,12997],{"__ignoreMap":508},[560,12786,12787,12789,12791,12793,12795,12797,12799,12801,12803],{"class":562,"line":509},[560,12788,566],{"class":565},[560,12790,570],{"class":569},[560,12792,574],{"class":573},[560,12794,577],{"class":573},[560,12796,580],{"class":565},[560,12798,583],{"class":565},[560,12800,587],{"class":586},[560,12802,583],{"class":565},[560,12804,592],{"class":565},[560,12806,12808,12810,12812,12814,12816,12819,12821,12823,12825,12827],{"class":12807,"line":510},[562,596],[560,12809,600],{"class":599},[560,12811,603],{"class":565},[560,12813,613],{"class":606},[560,12815,610],{"class":565},[560,12817,12818],{"class":606}," ScreenSpace",[560,12820,616],{"class":565},[560,12822,619],{"class":599},[560,12824,622],{"class":565},[560,12826,625],{"class":586},[560,12828,628],{"class":565},[560,12830,12831,12833,12835,12837,12839,12841,12843,12845],{"class":562,"line":631},[560,12832,600],{"class":599},[560,12834,603],{"class":565},[560,12836,638],{"class":606},[560,12838,616],{"class":565},[560,12840,619],{"class":599},[560,12842,622],{"class":565},[560,12844,647],{"class":586},[560,12846,628],{"class":565},[560,12848,12849,12851,12853],{"class":562,"line":652},[560,12850,655],{"class":565},[560,12852,570],{"class":569},[560,12854,592],{"class":565},[560,12856,12857],{"class":562,"line":662},[560,12858,665],{"emptyLinePlaceholder":516},[560,12860,12861,12863,12865],{"class":562,"line":668},[560,12862,566],{"class":565},[560,12864,673],{"class":569},[560,12866,592],{"class":565},[560,12868,12869,12871,12873,12875,12877,12879,12882,12884],{"class":562,"line":678},[560,12870,681],{"class":565},[560,12872,684],{"class":569},[560,12874,687],{"class":573},[560,12876,580],{"class":565},[560,12878,583],{"class":565},[560,12880,12881],{"class":586},"#333",[560,12883,583],{"class":565},[560,12885,592],{"class":565},[560,12887,12888,12890,12892],{"class":562,"line":701},[560,12889,704],{"class":565},[560,12891,707],{"class":569},[560,12893,710],{"class":565},[560,12895,12896,12898,12900],{"class":562,"line":713},[560,12897,704],{"class":565},[560,12899,718],{"class":569},[560,12901,710],{"class":565},[560,12903,12904],{"class":562,"line":723},[560,12905,665],{"emptyLinePlaceholder":516},[560,12907,12909,12911,12913,12916,12918,12920,12922,12924],{"class":12908,"line":728},[562,596],[560,12910,704],{"class":565},[560,12912,93],{"class":569},[560,12914,12915],{"class":573}," :depth",[560,12917,580],{"class":565},[560,12919,583],{"class":565},[560,12921,12652],{"class":586},[560,12923,583],{"class":565},[560,12925,592],{"class":565},[560,12927,12928,12930,12932],{"class":562,"line":750},[560,12929,776],{"class":565},[560,12931,779],{"class":569},[560,12933,592],{"class":565},[560,12935,12936,12938,12940],{"class":562,"line":554},[560,12937,787],{"class":565},[560,12939,11806],{"class":569},[560,12941,710],{"class":565},[560,12943,12944,12946,12948],{"class":562,"line":773},[560,12945,787],{"class":565},[560,12947,800],{"class":569},[560,12949,710],{"class":565},[560,12951,12952,12954,12956],{"class":562,"line":784},[560,12953,808],{"class":565},[560,12955,779],{"class":569},[560,12957,592],{"class":565},[560,12959,12961,12963,12965],{"class":12960,"line":795},[562,596],[560,12962,818],{"class":565},[560,12964,93],{"class":569},[560,12966,592],{"class":565},[560,12968,12969],{"class":562,"line":805},[560,12970,665],{"emptyLinePlaceholder":516},[560,12972,12973,12975,12977,12979,12981,12983,12985,12987],{"class":562,"line":555},[560,12974,704],{"class":565},[560,12976,7992],{"class":569},[560,12978,1904],{"class":573},[560,12980,580],{"class":565},[560,12982,583],{"class":565},[560,12984,11904],{"class":586},[560,12986,583],{"class":565},[560,12988,710],{"class":565},[560,12990,12991,12993,12995],{"class":562,"line":825},[560,12992,828],{"class":565},[560,12994,684],{"class":569},[560,12996,592],{"class":565},[560,12998,12999,13001,13003],{"class":562,"line":835},[560,13000,655],{"class":565},[560,13002,673],{"class":569},[560,13004,592],{"class":565},[545,13006,845],{"id":844},[850,13008,13009,13019],{},[853,13010,13011],{},[856,13012,13013,13015,13017],{},[859,13014,861],{"align":920},[859,13016,864],{"align":920},[859,13018,867],{},[869,13020,13021,13035,13054,13068,13085],{},[856,13022,13023,13028,13031],{},[874,13024,13025],{"align":920},[540,13026,13027],{},"depth",[874,13029,13030],{"align":920},"Distance from the camera",[874,13032,13033],{},[540,13034,10137],{},[856,13036,13037,13041,13049],{},[874,13038,13039],{"align":920},[540,13040,878],{},[874,13042,13043,13044,13046,13047],{"align":920},"Similar to CSS ",[540,13045,878],{}," property. Cannot be used with ",[540,13048,901],{},[874,13050,13051,13053],{},[540,13052,1891],{}," (vertical center of the screen)",[856,13055,13056,13060,13066],{},[874,13057,13058],{"align":920},[540,13059,901],{},[874,13061,13043,13062,13046,13064],{"align":920},[540,13063,901],{},[540,13065,878],{},[874,13067],{},[856,13069,13070,13074,13080],{},[874,13071,13072],{"align":920},[540,13073,920],{},[874,13075,13043,13076,13046,13078],{"align":920},[540,13077,920],{},[540,13079,939],{},[874,13081,13082,13084],{},[540,13083,1891],{}," (horizontal center of the screen)",[856,13086,13087,13091,13097],{},[874,13088,13089],{"align":920},[540,13090,939],{},[874,13092,13043,13093,13046,13095],{"align":920},[540,13094,939],{},[540,13096,920],{},[874,13098],{},[1272,13100,1589],{},{"title":508,"searchDepth":509,"depth":510,"links":13102},[13103,13104],{"id":547,"depth":510,"text":15},{"id":844,"depth":510,"text":845},"Position objects in front of the camera with CSS-like positioning.",{},{"title":93,"description":13105},"HsnjizzUu-Otw_0NXfsXgH-NRKdmkNQdklnC4aRzjC8",1789116507254]